:root{--color-primary: #4ecdc4;--color-primary-dark: #2c9b8e;--color-secondary: #ff6b6b;--color-warning: #f9ca24;--color-success: #38ada9;--color-info: #0984e3;--color-muted: #95a5a6;--color-light: #ecf0f1;--color-dark: #2c3e50;--color-border: #bdc3c7;--color-bg-light: #f5f5f5;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;--font-size-base: 16px;--font-size-small: 14px;--font-size-large: 18px;--font-size-xl: 24px;--font-size-2xl: 32px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .1);--z-modal: 1000;--z-overlay: 999;--z-dropdown: 100}:root{font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;font-family:var(--font-family);font-size:var(--font-size-base);color:var(--color-dark);background-color:var(--color-bg-light)}.app-container{display:flex;flex-direction:column;height:100vh;width:100%}.top-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background-color:var(--color-dark);color:#fff;box-shadow:var(--shadow-md);gap:var(--space-lg)}.top-bar h1{margin:0;font-size:var(--font-size-xl);font-weight:700}.scenario-badge{display:inline-block;padding:var(--space-xs) var(--space-sm);background-color:var(--color-primary);border-radius:var(--radius-sm);font-weight:700;font-size:var(--font-size-small)}.top-bar-left{display:flex;align-items:center;gap:var(--space-md);flex:1}.top-bar-center{flex:1;text-align:center}.metrics-mini{display:flex;gap:var(--space-md);justify-content:center}.metric-dot{padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);color:#fff;font-weight:700;font-size:var(--font-size-small)}.top-bar-right{display:flex;gap:var(--space-md);justify-content:flex-end}.main-layout{display:grid;grid-template-columns:minmax(260px,20%) minmax(640px,1fr) minmax(300px,24%);align-items:stretch;flex:1;gap:var(--space-md);padding:var(--space-lg);width:100%;min-height:0}.left-panel,.center-panel,.right-panel{min-height:0;min-width:0}.left-panel{overflow-y:auto;background-color:var(--color-bg-light);border-radius:var(--radius-md);padding:var(--space-md);border:1px solid var(--color-border)}.center-panel{overflow-y:auto;background-color:#fff;border-radius:var(--radius-md);border:1px solid var(--color-border);box-shadow:var(--shadow-sm);display:flex;flex-direction:column}.right-panel{overflow-y:auto;background-color:var(--color-bg-light);border-radius:var(--radius-md);padding:var(--space-md);border:1px solid var(--color-border)}.scenario-selector h2,.site-gallery h2{margin-top:0;font-size:var(--font-size-large);border-bottom:2px solid var(--color-primary);padding-bottom:var(--space-sm)}.scenario-buttons{display:flex;flex-direction:column;gap:var(--space-sm)}.scenario-btn{text-align:left;padding:var(--space-md);border:2px solid var(--color-border);border-radius:var(--radius-md);background-color:#fff;cursor:pointer;transition:all .2s}.scenario-btn:hover{border-color:var(--color-primary);background-color:var(--color-bg-light)}.scenario-btn.active{border-color:var(--color-primary);background-color:var(--color-primary);color:#fff}.scenario-label{font-weight:700;margin-bottom:var(--space-xs)}.scenario-desc{font-size:var(--font-size-small);opacity:.8}.site-list{display:flex;flex-direction:column;gap:var(--space-md);margin-top:var(--space-md)}.site-card{padding:var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:#fff;cursor:pointer;transition:all .2s}.site-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translateY(-2px)}.site-card.selected{border-color:var(--color-primary);background-color:#4ecdc41a}.site-card h3{margin:0 0 var(--space-xs) 0;font-size:var(--font-size-large)}.site-domain{margin:0;font-size:var(--font-size-small);color:var(--color-muted);font-family:monospace}.site-description{margin:var(--space-sm) 0;font-size:var(--font-size-small);color:var(--color-dark)}.site-tags{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-sm)}.tag{display:inline-block;padding:var(--space-xs) var(--space-sm);background-color:var(--color-light);border-radius:var(--radius-sm);font-size:var(--font-size-small);font-weight:500}.tracker-tag{background-color:#ff6b6b33;color:var(--color-secondary)}.browser-panel{display:flex;flex-direction:column;height:100%;padding:var(--space-md)}.browser-tabs{display:flex;gap:var(--space-sm);border-bottom:2px solid var(--color-border);margin-bottom:var(--space-md)}.tab-btn{padding:var(--space-sm) var(--space-md);background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-weight:600;color:var(--color-muted);transition:all .2s}.tab-btn:hover{color:var(--color-primary)}.tab-btn.active{color:var(--color-primary);border-color:var(--color-primary)}.browser-content{flex:1;overflow-y:auto;padding-right:var(--space-md)}.cookie-jar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--space-md)}.cookie-jar h3{margin:0;font-size:var(--font-size-large)}.cookie-tabs{display:flex;gap:var(--space-sm);margin-bottom:var(--space-md);border-bottom:1px solid var(--color-border)}.cookie-tab{padding:var(--space-sm) var(--space-md);background:none;border:none;cursor:pointer;color:var(--color-muted);border-bottom:2px solid transparent;transition:all .2s}.cookie-tab:hover{color:var(--color-primary)}.cookie-tab.active{color:var(--color-primary);border-color:var(--color-primary)}.cookie-table{width:100%;border-collapse:collapse;font-size:var(--font-size-small)}.cookie-table thead{background-color:var(--color-bg-light)}.cookie-table th{text-align:left;padding:var(--space-sm) var(--space-md);font-weight:600;border-bottom:2px solid var(--color-border)}.cookie-row{cursor:pointer;transition:background-color .2s}.cookie-row:hover{background-color:#4ecdc40d}.cookie-row td{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border);word-break:break-all}.cookie-value{font-family:monospace;color:var(--color-muted)}.empty-state{padding:var(--space-lg);text-align:center;color:var(--color-muted)}.cookie-detail-drawer{position:fixed;right:0;bottom:0;top:60px;width:400px;background-color:#fff;border-left:2px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown);display:flex;flex-direction:column;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translate(100%)}to{transform:translate(0)}}.drawer-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md);border-bottom:1px solid var(--color-border)}.drawer-header h3{margin:0}.drawer-content{flex:1;overflow-y:auto;padding:var(--space-md)}.detail-field{margin-bottom:var(--space-md)}.detail-field label{display:block;font-weight:600;margin-bottom:var(--space-xs);font-size:var(--font-size-small);color:var(--color-muted)}.detail-field code{display:block;background-color:var(--color-bg-light);padding:var(--space-sm);border-radius:var(--radius-sm);overflow-x:auto;font-family:monospace;font-size:var(--font-size-small)}.value-code{word-break:break-all}.badge-danger{color:var(--color-secondary);font-weight:700}.badge-success{color:var(--color-success);font-weight:700}.badge-info{display:inline-block;padding:var(--space-xs) var(--space-sm);background-color:#0984e31a;color:var(--color-info);border-radius:var(--radius-sm);font-weight:600;font-size:var(--font-size-small)}.explanation-box{margin-top:var(--space-lg);padding:var(--space-md);background-color:#4ecdc41a;border-left:4px solid var(--color-primary);border-radius:var(--radius-md)}.explanation-box h4{margin:0 0 var(--space-sm) 0}.explanation-box p{margin:0;line-height:1.6}.settings-panel{padding:var(--space-md)}.setting-group{margin-bottom:var(--space-lg)}.setting-label{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:500}.setting-label input{cursor:pointer}.info-icon{cursor:help;color:var(--color-info)}.setting-hint{margin:var(--space-sm) 0 0 0;font-size:var(--font-size-small);color:var(--color-muted)}.timeline{padding:var(--space-md)}.timeline-filters{display:flex;flex-wrap:wrap;gap:var(--space-sm);margin-bottom:var(--space-md)}.filter-btn{padding:var(--space-xs) var(--space-sm);background-color:var(--color-light);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s}.filter-btn:hover,.filter-btn.active{background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.timeline-list{max-height:600px;overflow-y:auto}.timeline-event{display:flex;gap:var(--space-md);padding:var(--space-md);border-left:4px solid var(--color-primary);border-radius:var(--radius-md);background-color:var(--color-bg-light);margin-bottom:var(--space-sm)}.event-icon{font-size:var(--font-size-large);min-width:32px;display:flex;align-items:center;justify-content:center}.event-content{flex:1}.event-type{font-weight:600;color:var(--color-dark);margin-bottom:var(--space-xs)}.event-time{font-size:var(--font-size-small);color:var(--color-muted)}.event-details{margin-top:var(--space-sm)}.event-details summary{cursor:pointer;color:var(--color-primary);font-weight:500}.event-details pre{background-color:#fff;padding:var(--space-sm);border-radius:var(--radius-sm);overflow-x:auto;font-size:var(--font-size-small);margin:var(--space-sm) 0 0 0}.risk-meters{padding:var(--space-md)}.meters-grid{display:grid;grid-template-columns:1fr;gap:var(--space-lg)}.meter{margin-bottom:var(--space-lg)}.meter h4{margin:0 0 var(--space-xs) 0;font-size:var(--font-size-large)}.meter-explanation{margin:0 0 var(--space-sm) 0;font-size:var(--font-size-small);color:var(--color-muted)}.meter-bar{height:40px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:var(--font-size-large);transition:all .3s}.tracker-hq{display:flex;flex-direction:column;gap:var(--space-md)}.tracker-hq h2{margin:0 0 var(--space-md) 0;font-size:var(--font-size-large);border-bottom:2px solid var(--color-secondary);padding-bottom:var(--space-sm)}.tracker-status,.tracker-stats{display:flex;gap:var(--space-md);margin-bottom:var(--space-md)}.status-item{flex:1;padding:var(--space-md);background-color:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md)}.status-item label{display:block;font-weight:600;margin-bottom:var(--space-sm);font-size:var(--font-size-small);color:var(--color-muted)}.badge-success,.badge-danger,.badge-muted{display:inline-block;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);font-weight:600;font-size:var(--font-size-small)}.badge-success{background-color:#38ada91a;color:var(--color-success)}.badge-danger{background-color:#ff6b6b1a;color:var(--color-secondary)}.badge-muted{background-color:var(--color-light);color:var(--color-muted)}.stat{flex:1;padding:var(--space-md);background-color:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md);text-align:center}.stat-value{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-primary)}.stat-label{font-size:var(--font-size-small);color:var(--color-muted);margin-top:var(--space-xs)}.profile-card{padding:var(--space-md);background-color:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md)}.profile-card h4{margin-top:0;margin-bottom:var(--space-md)}.segments{margin-bottom:var(--space-md)}.segments-label,.topics-label{font-weight:600;display:block;margin-bottom:var(--space-sm);font-size:var(--font-size-small);color:var(--color-muted)}.segment-list{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.segment-tag{display:inline-block;padding:var(--space-xs) var(--space-sm);background-color:var(--color-primary);color:#fff;border-radius:var(--radius-sm);font-size:var(--font-size-small);font-weight:600}.topics{margin-bottom:var(--space-md)}.topic-bar{display:flex;align-items:center;gap:var(--space-sm);margin-bottom:var(--space-sm);font-size:var(--font-size-small)}.topic-name{min-width:60px;font-weight:500}.progress-bar{flex:1;height:20px;background-color:var(--color-light);border-radius:var(--radius-sm);overflow:hidden}.progress-fill{height:100%;background-color:var(--color-primary);transition:width .3s}.topic-score{min-width:30px;text-align:right;font-weight:600}.observations{padding:var(--space-md);background-color:#fff;border:1px solid var(--color-border);border-radius:var(--radius-md)}.observation-list{display:flex;flex-direction:column;gap:var(--space-sm)}.observation-item{padding:var(--space-sm);background-color:var(--color-bg-light);border-radius:var(--radius-sm);display:flex;gap:var(--space-sm);align-items:center;font-size:var(--font-size-small)}.obs-action{font-weight:600;color:var(--color-primary)}.obs-site{color:var(--color-muted);font-family:monospace}.obs-topic{background-color:var(--color-light);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm)}.obs-cookie-badge{margin-left:auto}.consent-banner{position:fixed;bottom:0;right:0;left:0;background-color:#fff;border-top:2px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:var(--z-overlay);max-height:50vh;overflow-y:auto}.consent-content{padding:var(--space-lg);max-width:800px;margin:0 auto}.consent-content h3{margin:0 0 var(--space-md) 0;font-size:var(--font-size-large)}.consent-content p{margin:0 0 var(--space-md) 0;line-height:1.6}.consent-actions,.consent-preferences{display:flex;gap:var(--space-md);flex-wrap:wrap}.pref-check{display:flex;align-items:center;gap:var(--space-sm);cursor:pointer;flex:1;min-width:200px}.pref-check input{cursor:pointer}.btn{padding:var(--space-sm) var(--space-md);border:none;border-radius:var(--radius-md);cursor:pointer;font-weight:600;transition:all .2s;font-size:var(--font-size-base)}.btn-primary{background-color:var(--color-primary);color:#fff}.btn-primary:hover{background-color:var(--color-primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--color-light);color:var(--color-dark);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:#fff;border-color:var(--color-primary)}.btn-danger-small{padding:var(--space-xs) var(--space-sm);background-color:var(--color-secondary);color:#fff;font-size:var(--font-size-small)}.btn-danger-small:hover{background-color:#ff5252}.btn-link{background:none;color:var(--color-primary);border:none;padding:0;text-decoration:underline;cursor:pointer;font-weight:600}.btn-link:hover{color:var(--color-primary-dark)}.btn-debug{position:fixed;bottom:var(--space-md);right:var(--space-md);z-index:50;background-color:var(--color-secondary);color:#fff}.close-btn{background:none;border:none;font-size:var(--font-size-large);cursor:pointer;color:var(--color-muted);padding:0}.close-btn:hover{color:var(--color-dark)}.mode-toggle{padding:var(--space-sm) var(--space-md);background-color:#fff;color:var(--color-dark);border:2px solid white;border-radius:var(--radius-md);cursor:pointer;font-weight:600;transition:all .2s}.mode-toggle:hover{background-color:var(--color-bg-light)}.summary-modal-overlay{position:fixed;inset:0;background-color:#00000080;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center}.summary-modal{background-color:#fff;border-radius:var(--radius-lg);max-width:600px;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-lg);border-bottom:1px solid var(--color-border)}.modal-header h2{margin:0}.modal-body{padding:var(--space-lg)}.modal-footer{padding:var(--space-lg);border-top:1px solid var(--color-border);display:flex;justify-content:flex-end;gap:var(--space-md)}.summary-section{margin-bottom:var(--space-lg)}.summary-section h3{margin-top:0;margin-bottom:var(--space-md);font-size:var(--font-size-large)}.summary-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-md)}.metric-box{padding:var(--space-md);background-color:var(--color-bg-light);border-radius:var(--radius-md);text-align:center}.metric-label{font-size:var(--font-size-small);color:var(--color-muted);margin-bottom:var(--space-sm)}.metric-value{font-size:var(--font-size-2xl);font-weight:700;color:var(--color-primary)}.summary-list{list-style:none;padding:0;margin:0}.summary-list li{padding:var(--space-sm);border-bottom:1px solid var(--color-border)}.learning-points{list-style:disc;padding-left:var(--space-lg);margin:0}.learning-points li{margin-bottom:var(--space-sm);line-height:1.6}.debug-toggle{position:fixed;bottom:var(--space-lg);right:var(--space-lg);z-index:50}.debug-panel{position:fixed;bottom:0;right:0;top:60px;width:40%;background-color:#fff;border-left:2px solid var(--color-border);box-shadow:var(--shadow-lg);z-index:var(--z-dropdown);display:flex;flex-direction:column;overflow:hidden}.debug-header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-md);border-bottom:1px solid var(--color-border)}.debug-header h3{margin:0}.debug-content{flex:1;overflow-y:auto;padding:var(--space-md)}.debug-section{margin-bottom:var(--space-lg)}.debug-section h4{margin-top:0;margin-bottom:var(--space-sm);font-size:var(--font-size-large)}.debug-section pre{background-color:var(--color-bg-light);padding:var(--space-md);border-radius:var(--radius-md);overflow-x:auto;font-size:var(--font-size-small);line-height:1.4;margin:0}@media(max-width:1200px){.main-layout{display:flex;flex-direction:column;padding:var(--space-md)}.left-panel,.right-panel,.center-panel,.debug-panel{width:100%}.top-bar{flex-wrap:wrap}.metrics-mini{order:3;width:100%;margin-top:var(--space-md)}}@media(max-width:768px){.cookie-detail-drawer{width:100%}.summary-metrics{grid-template-columns:1fr}.consent-actions{flex-direction:column}}