*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#fff;color:#09090b;-webkit-font-smoothing:antialiased;min-height:100vh}

/* ── Auth screen ── */
.auth-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1.5rem}
.auth-card{width:100%;max-width:380px;text-align:center}
.auth-card .logo{font-size:1.5rem;font-weight:600;letter-spacing:-0.02em;color:#09090b;text-decoration:none;display:inline-block;margin-bottom:2.5rem}
.auth-card h2{font-size:1.25rem;font-weight:600;margin-bottom:0.5rem}
.auth-card p.subtitle{font-size:0.875rem;color:#71717a;margin-bottom:1.5rem}
.auth-card .field{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem;text-align:left}
.auth-card label{font-size:0.8125rem;font-weight:500;color:#3f3f46}
.auth-card input{width:100%;padding:0.625rem 0.75rem;font-size:0.9375rem;border:1px solid #e4e4e7;border-radius:6px;outline:none;font-family:inherit;color:#09090b;background:#fff}
.auth-card input:focus{border-color:#09090b;box-shadow:0 0 0 1px #09090b}
.auth-card input::placeholder{color:#a1a1aa}
.auth-card .btn-primary{width:100%;padding:0.625rem 1rem;font-size:0.9375rem;font-weight:500;background:#09090b;color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:inherit;margin-top:0.25rem}
.auth-card .btn-primary:hover{background:#27272a}
.auth-card .btn-primary:disabled{opacity:0.5;cursor:not-allowed}
.auth-card .error-msg{color:#dc2626;font-size:0.8125rem;margin-top:0.5rem;min-height:1.25rem}
.auth-card .back-link{display:inline-block;margin-top:1rem;font-size:0.8125rem;color:#71717a;cursor:pointer;border:none;background:none;font-family:inherit;text-decoration:underline}
.auth-card .back-link:hover{color:#09090b}

/* ── Dashboard layout ── */
.dashboard{display:none;min-height:100vh;flex-direction:column}
.dashboard.active{display:flex}
.auth-screen.active{display:flex}
.auth-screen{display:none}

/* Header */
.dash-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1.5rem;background:rgba(255,255,255,0.97);backdrop-filter:blur(8px);border-bottom:1px solid #f4f4f5}
.dash-header .logo{font-size:1.125rem;font-weight:600;letter-spacing:-0.02em;color:#09090b;text-decoration:none}
.dash-header-right{display:flex;align-items:center;gap:1.25rem}
.dash-header-right a{font-size:0.8125rem;color:#71717a;text-decoration:none}
.dash-header-right a:hover{color:#09090b}
.user-menu{position:relative}
.user-menu-btn{display:flex;align-items:center;gap:0.375rem;padding:0.375rem 0.625rem;font-size:0.8125rem;color:#3f3f46;background:#f4f4f5;border:1px solid #e4e4e7;border-radius:6px;cursor:pointer;font-family:inherit}
.user-menu-btn:hover{background:#e4e4e7}
.user-menu-btn svg{flex-shrink:0}
.user-dropdown{display:none;position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid #e4e4e7;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.08);min-width:180px;z-index:30;overflow:hidden}
.user-dropdown.open{display:block}
.user-dropdown button{display:block;width:100%;text-align:left;padding:0.625rem 0.875rem;font-size:0.8125rem;border:none;background:none;cursor:pointer;color:#3f3f46;font-family:inherit}
.user-dropdown button:hover{background:#f4f4f5}

/* Body */
.dash-body{display:flex;flex:1}

/* Sidebar */
.dash-sidebar{width:200px;padding:1.25rem 1rem;border-right:1px solid #f4f4f5;flex-shrink:0}
.dash-sidebar nav{display:flex;flex-direction:column;gap:0.125rem}
.dash-sidebar nav button{display:flex;align-items:center;gap:0.5rem;width:100%;text-align:left;padding:0.5rem 0.75rem;font-size:0.875rem;color:#71717a;border:none;background:none;border-radius:6px;cursor:pointer;font-family:inherit;font-weight:400}
.dash-sidebar nav button:hover{background:#f4f4f5;color:#09090b}
.dash-sidebar nav button.active{background:#f4f4f5;color:#09090b;font-weight:600}
.dash-sidebar nav button svg{flex-shrink:0;width:16px;height:16px}

/* Main content */
.dash-main{flex:1;padding:1.5rem 2rem;min-width:0;overflow-y:auto}
.dash-main h1{font-size:1.375rem;font-weight:600;letter-spacing:-0.02em;margin-bottom:1.5rem}

/* Sites grid */
.sites-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.site-card{border:1px solid #e4e4e7;border-radius:8px;padding:1rem 1.125rem;position:relative;transition:border-color 0.15s,box-shadow 0.15s}
.site-card:hover{border-color:#d4d4d8;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.site-card-top{display:flex;align-items:flex-start;justify-content:space-between}
.site-card a{font-size:0.9375rem;font-weight:500;color:#2563eb;text-decoration:none;word-break:break-all}
.site-card a:hover{text-decoration:underline}
.site-card .site-time{font-size:0.75rem;color:#a1a1aa;margin-top:0.375rem}
.site-card .menu-btn{background:none;border:none;cursor:pointer;padding:0.25rem;border-radius:4px;color:#a1a1aa;display:flex;align-items:center;justify-content:center}
.site-card .menu-btn:hover{background:#f4f4f5;color:#71717a}
.site-card .card-dropdown{display:none;position:absolute;right:0.5rem;top:2.5rem;background:#fff;border:1px solid #e4e4e7;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.08);min-width:140px;z-index:10;overflow:hidden}
.site-card .card-dropdown.open{display:block}
.site-card .card-dropdown button{display:block;width:100%;text-align:left;padding:0.5rem 0.75rem;font-size:0.8125rem;border:none;background:none;cursor:pointer;color:#3f3f46;font-family:inherit}
.site-card .card-dropdown button:hover{background:#f4f4f5}
.site-card .card-dropdown button.danger{color:#dc2626}
.site-card .card-dropdown button.danger:hover{background:#fef2f2}

.sites-empty{text-align:center;padding:4rem 1rem;color:#71717a}
.sites-empty p{font-size:1rem;margin-bottom:0.25rem}
.sites-empty .muted{font-size:0.875rem;color:#a1a1aa}

/* API key view */
.apikey-section{max-width:560px}
.apikey-section p.desc{font-size:0.875rem;color:#71717a;margin-bottom:1.25rem;line-height:1.6}
.apikey-box{display:flex;align-items:center;gap:0.5rem;margin-bottom:1.5rem}
.apikey-box input{flex:1;padding:0.625rem 0.75rem;font-size:0.875rem;font-family:"SF Mono",Monaco,Consolas,monospace;border:1px solid #e4e4e7;border-radius:6px;background:#fafafa;color:#09090b}
.apikey-box button{padding:0.625rem 0.875rem;font-size:0.8125rem;font-weight:500;border:1px solid #e4e4e7;border-radius:6px;background:#fff;cursor:pointer;color:#3f3f46;font-family:inherit;white-space:nowrap}
.apikey-box button:hover{background:#f4f4f5}
.apikey-usage{margin-top:1.5rem;padding:1.25rem;background:#fafafa;border:1px solid #f4f4f5;border-radius:8px}
.apikey-usage h3{font-size:0.9375rem;font-weight:600;margin-bottom:0.75rem}
.apikey-usage pre{font-size:0.8125rem;font-family:"SF Mono",Monaco,Consolas,monospace;color:#3f3f46;white-space:pre-wrap;word-break:break-all;line-height:1.7;background:#fff;padding:0.75rem;border-radius:6px;border:1px solid #e4e4e7}

/* Loading */
.loading{display:flex;align-items:center;justify-content:center;padding:4rem;color:#a1a1aa;font-size:0.875rem}

/* ── New: shared chrome ── */
.view-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;gap:1rem;flex-wrap:wrap}
.view-header h1{margin-bottom:0}
.count-badge{display:inline-block;background:#f4f4f5;color:#71717a;font-size:0.75rem;font-weight:500;padding:0.125rem 0.5rem;border-radius:10px;margin-left:0.375rem;vertical-align:middle}
.muted{color:#a1a1aa;font-size:0.8125rem}

/* Buttons */
.btn-secondary{padding:0.5rem 0.875rem;font-size:0.8125rem;font-weight:500;background:#fff;color:#3f3f46;border:1px solid #e4e4e7;border-radius:6px;cursor:pointer;font-family:inherit}
.btn-secondary:hover{background:#f4f4f5}
.btn-danger{padding:0.5rem 0.875rem;font-size:0.8125rem;font-weight:500;background:#dc2626;color:#fff;border:none;border-radius:6px;cursor:pointer;font-family:inherit}
.btn-danger:hover{background:#b91c1c}
.btn-danger:disabled{opacity:0.5;cursor:not-allowed}
.back-btn{background:none;border:none;color:#71717a;font-size:0.875rem;cursor:pointer;padding:0.25rem 0;margin-bottom:0.75rem;font-family:inherit}
.back-btn:hover{color:#09090b}

/* Toasts */
.toast{position:fixed;bottom:1.25rem;right:1.25rem;background:#09090b;color:#fff;padding:0.75rem 1rem;border-radius:8px;font-size:0.875rem;box-shadow:0 8px 24px rgba(0,0,0,0.18);transition:opacity 0.4s,transform 0.4s;z-index:100;max-width:360px}
.toast-error{background:#dc2626}
.toast-out{opacity:0;transform:translateY(8px)}

/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;z-index:200;padding:1rem}
.modal{background:#fff;border-radius:12px;padding:1.25rem;max-width:440px;width:100%;box-shadow:0 16px 48px rgba(0,0,0,0.18)}
.modal h3{font-size:1rem;font-weight:600;margin-bottom:0.5rem}
.modal-body{font-size:0.875rem;color:#3f3f46;line-height:1.5;margin-bottom:1rem}
.modal-confirm-input{width:100%;padding:0.5rem 0.625rem;font-size:0.875rem;border:1px solid #e4e4e7;border-radius:6px;margin-bottom:1rem;font-family:inherit}
.modal-confirm-input:focus{outline:none;border-color:#09090b}
.modal-actions{display:flex;justify-content:flex-end;gap:0.5rem}

/* Tables */
.data-table{width:100%;border-collapse:collapse;font-size:0.875rem}
.data-table th{text-align:left;padding:0.625rem 0.75rem;font-weight:500;color:#71717a;font-size:0.8125rem;border-bottom:1px solid #f4f4f5;cursor:pointer;user-select:none}
.data-table th:hover{color:#09090b}
.data-table td{padding:0.625rem 0.75rem;border-bottom:1px solid #f4f4f5;vertical-align:middle}
.data-table tr:hover td{background:#fafafa}
.data-table tr.clickable{cursor:pointer}
.data-table .col-check{width:32px}
.data-table .col-actions{width:48px;text-align:right}
.data-table a{color:#2563eb;text-decoration:none}
.data-table a:hover{text-decoration:underline}

/* Status dot */
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:0.5rem;vertical-align:middle}
.status-dot.live{background:#16a34a}
.status-dot.idle{background:#a1a1aa}

/* View toggle */
.view-toggle{display:inline-flex;border:1px solid #e4e4e7;border-radius:6px;overflow:hidden}
.view-toggle button{padding:0.4rem 0.625rem;background:#fff;border:none;cursor:pointer;color:#71717a;font-family:inherit;font-size:0.875rem}
.view-toggle button.active{background:#f4f4f5;color:#09090b}
.view-toggle button:not(:last-child){border-right:1px solid #e4e4e7}

/* Search */
.view-search{padding:0.4rem 0.625rem;border:1px solid #e4e4e7;border-radius:6px;font-size:0.8125rem;font-family:inherit;width:200px}
.view-search:focus{outline:none;border-color:#09090b}

/* Bulk action bar */
.bulk-bar{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%);background:#09090b;color:#fff;padding:0.625rem 0.875rem 0.625rem 1rem;border-radius:10px;display:flex;align-items:center;gap:0.875rem;font-size:0.875rem;box-shadow:0 12px 32px rgba(0,0,0,0.24);z-index:50}
.bulk-bar .bulk-cancel{background:none;border:none;color:#a1a1aa;cursor:pointer;font-family:inherit;padding:0.25rem 0.375rem;font-size:0.875rem}
.bulk-bar .bulk-cancel:hover{color:#fff}

/* Worker detail */
.worker-detail-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;margin-bottom:1rem}
.worker-detail-header h1{margin-bottom:0;font-size:1.25rem}
.worker-url-row{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem;color:#71717a;margin-bottom:1.5rem;flex-wrap:wrap}
.worker-url-row code{font-family:"SF Mono",Monaco,Consolas,monospace;background:#fafafa;border:1px solid #f4f4f5;padding:0.2rem 0.4rem;border-radius:4px}
.worker-url-row a{color:#2563eb;text-decoration:none}
.tabs{display:flex;gap:0;border-bottom:1px solid #f4f4f5;margin-bottom:1.25rem;overflow-x:auto}
.tabs button{padding:0.625rem 1rem;background:none;border:none;color:#71717a;font-family:inherit;font-size:0.875rem;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button:hover{color:#09090b}
.tabs button.active{color:#09090b;font-weight:500;border-bottom-color:#09090b}

/* Stats grid */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0.75rem;margin-bottom:1.25rem}
.stat-card{padding:0.875rem 1rem;border:1px solid #e4e4e7;border-radius:8px;background:#fff}
.stat-card .stat-label{font-size:0.75rem;color:#71717a;font-weight:500;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:0.25rem}
.stat-card .stat-value{font-size:1.25rem;font-weight:600;color:#09090b}
.stat-card .stat-sub{font-size:0.75rem;color:#a1a1aa;margin-top:0.125rem}

/* Histograms */
.histogram{margin-bottom:1.25rem}
.histogram h3{font-size:0.875rem;font-weight:600;margin-bottom:0.5rem}
.hbar-row{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.25rem;font-size:0.8125rem}
.hbar-label{width:80px;color:#71717a;flex-shrink:0}
.hbar-track{flex:1;height:14px;background:#f4f4f5;border-radius:3px;overflow:hidden;position:relative}
.hbar-fill{height:100%;background:#09090b;border-radius:3px}
.hbar-fill.error{background:#dc2626}
.hbar-count{width:80px;text-align:right;color:#3f3f46;font-variant-numeric:tabular-nums;flex-shrink:0}

/* Sparkline */
.sparkline{width:100%;height:80px;margin-bottom:1.25rem}
.sparkline path{fill:none;stroke:#09090b;stroke-width:1.5}
.sparkline path.errors{stroke:#dc2626}

/* Range picker */
.range-picker{display:inline-flex;border:1px solid #e4e4e7;border-radius:6px;overflow:hidden;margin-bottom:1rem}
.range-picker button{padding:0.4rem 0.75rem;background:#fff;border:none;cursor:pointer;color:#71717a;font-family:inherit;font-size:0.8125rem}
.range-picker button.active{background:#09090b;color:#fff}
.range-picker button:not(:last-child){border-right:1px solid #e4e4e7}

/* Logs */
.log-pane{background:#0a0a0a;color:#e4e4e7;font-family:"SF Mono",Monaco,Consolas,monospace;font-size:0.75rem;padding:0.875rem;border-radius:8px;max-height:480px;overflow-y:auto;white-space:pre-wrap;word-break:break-all}
.log-controls{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem;flex-wrap:wrap}

/* Secrets form */
.secret-form{display:flex;gap:0.5rem;margin-bottom:1rem;align-items:flex-end;flex-wrap:wrap}
.secret-form input{padding:0.5rem 0.625rem;font-size:0.8125rem;border:1px solid #e4e4e7;border-radius:6px;font-family:inherit}
.secret-form input:focus{outline:none;border-color:#09090b}

/* Usage activity chart */
.activity-chart{display:flex;align-items:flex-end;gap:2px;height:160px;padding:0 0.25rem;border-bottom:1px solid #f4f4f5;margin-bottom:0.5rem}
.activity-day{flex:1;display:flex;flex-direction:column-reverse;min-width:8px;position:relative;cursor:default}
.activity-bar-sites{background:#09090b}
.activity-bar-workers{background:#2563eb}
.activity-day:hover .activity-tip{display:block}
.activity-tip{display:none;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:#09090b;color:#fff;padding:0.375rem 0.5rem;border-radius:6px;font-size:0.75rem;white-space:nowrap;z-index:10}
.activity-legend{display:flex;gap:1rem;font-size:0.75rem;color:#71717a;margin-bottom:1.5rem}
.activity-legend .swatch{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:0.25rem;vertical-align:middle}

/* Responsive */
@media(max-width:900px){
  .sites-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .dash-sidebar{display:none}
  .dash-main{padding:1.25rem 1rem}
  .sites-grid{grid-template-columns:1fr}
  .dash-header{padding:0.75rem 1rem}
  .mobile-nav{display:flex;gap:0;border-bottom:1px solid #f4f4f5;padding:0 1rem;background:#fff;overflow-x:auto}
  .mobile-nav button{flex:1;min-width:80px;padding:0.75rem 0.5rem;font-size:0.8125rem;border:none;background:none;color:#71717a;font-family:inherit;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
  .mobile-nav button.active{color:#09090b;font-weight:600;border-bottom-color:#09090b}
}
@media(min-width:641px){
  .mobile-nav{display:none}
}