*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#ffffff;--bg-muted:#f4f4f5;--fg:#18181b;--fg-muted:#71717a;
  --card:#ffffff;--card-fg:#18181b;--border:#e4e4e7;--input:#e4e4e7;
  --primary:#18181b;--primary-fg:#fafafa;
  --secondary:#f4f4f5;--secondary-fg:#18181b;
  --destructive:#ef4444;--destructive-fg:#fafafa;
  --green:#16a34a;--red:#ef4444;--purple:#7c3aed;--blue:#2563eb;
  --radius:0.5rem;
}
[data-theme="dark"]{
  --bg:#09090b;--bg-muted:#18181b;--fg:#fafafa;--fg-muted:#a1a1aa;
  --card:#131316;--card-fg:#fafafa;--border:#27272a;--input:#3f3f46;
  --primary:#fafafa;--primary-fg:#18181b;
  --secondary:#27272a;--secondary-fg:#fafafa;
  --destructive:#ef4444;--destructive-fg:#fafafa;
  --green:#22c55e;--red:#f87171;--purple:#a78bfa;--blue:#60a5fa;
}
[data-theme="dark"] .login-icon{background:rgba(250,250,250,.08)}
[data-theme="dark"] .sub-icon{background:rgba(250,250,250,.08)}
[data-theme="dark"] .badge-warning{background:#451a03;color:#fbbf24}
[data-theme="dark"] .badge-owner{background:#3b0764;color:#c4b5fd}
[data-theme="dark"] .badge-admin{background:#1e3a8a;color:#93c5fd}
[data-theme="dark"] .badge-user{background:#14532d;color:#86efac}
[data-theme="dark"] .btn-primary:hover:not(:disabled){background:#e4e4e7}
[data-theme="dark"] .dialog{box-shadow:0 10px 25px rgba(0,0,0,.6)}
[data-theme="dark"] .login-card{box-shadow:0 1px 3px rgba(0,0,0,.5)}

body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg-muted);color:var(--fg);line-height:1.5;min-height:100vh}
a{color:inherit;text-decoration:none}
input,button,select,textarea{font:inherit}

.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:1rem}
.login-container{width:100%;max-width:28rem}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.login-header{text-align:center;margin-bottom:1.5rem}
.login-icon{display:inline-flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background:rgba(24,24,27,.08);margin-bottom:1rem}
.login-icon svg{width:1.5rem;height:1.5rem;color:var(--primary)}
.login-header h1{font-size:1.5rem;font-weight:700}
.login-header p{color:var(--fg-muted);font-size:0.875rem;margin-top:0.25rem}

.app-layout{display:flex;min-height:100vh}
.sidebar{width:16rem;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:1rem;flex-shrink:0;position:fixed;top:0;left:0;bottom:0;overflow-y:auto}
.sidebar-brand{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;margin-bottom:1.5rem;font-weight:700;font-size:1.125rem}
.sidebar-brand svg,.sidebar-link svg{width:1rem;height:1rem;flex-shrink:0}
.sidebar-nav{flex:1;display:flex;flex-direction:column;gap:0.25rem}
.sidebar-link{display:flex;align-items:center;gap:0.75rem;padding:0.5rem 0.75rem;border-radius:var(--radius);font-size:0.875rem;font-weight:500;color:var(--fg-muted);transition:background 0.15s,color 0.15s}
.sidebar-link:hover{background:var(--bg-muted);color:var(--fg)}
.sidebar-link.active{background:var(--primary);color:var(--primary-fg)}
.sidebar-footer{border-top:1px solid var(--border);padding-top:1rem;margin-top:1rem}
.sidebar-user{padding:0 0.5rem;margin-bottom:0.75rem}
.sidebar-user-name{font-size:0.875rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-logout{width:100%;justify-content:flex-start}

.main-content{flex:1;padding:1.5rem;margin-left:16rem}
.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem}
.page-header h1{font-size:1.875rem;font-weight:700;letter-spacing:-0.025em}
.page-header p{color:var(--fg-muted);margin-top:0.25rem}

.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}
.stats-grid-3{grid-template-columns:repeat(3,1fr)}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
.stat-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem}
.stat-label{font-size:0.875rem;font-weight:500;color:var(--fg-muted)}
.stat-value{font-size:1.875rem;font-weight:700}
.stat-desc{font-size:0.75rem;color:var(--fg-muted);margin-top:0.25rem}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1.5rem}
.card-header{padding:1.5rem 1.5rem 0;display:flex;justify-content:space-between;align-items:center}
.card-header h2{font-size:1.125rem;font-weight:600}
.card-header p{font-size:0.875rem;color:var(--fg-muted)}
.card-content{padding:1.5rem}

.table-container{overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th{text-align:left;font-size:0.875rem;font-weight:500;color:var(--fg-muted);padding:0.75rem 1rem;border-bottom:1px solid var(--border)}
.table td{padding:0.75rem 1rem;border-bottom:1px solid var(--border);font-size:0.875rem}
.table tr:last-child td{border-bottom:none}
.table .font-medium{font-weight:500}

.badge{display:inline-flex;align-items:center;padding:0.125rem 0.625rem;border-radius:9999px;font-size:0.75rem;font-weight:500;line-height:1.5}
.badge-default{background:var(--primary);color:var(--primary-fg)}
.badge-danger{background:var(--destructive);color:var(--destructive-fg)}
.badge-warning{background:#fef3c7;color:#92400e}
.badge-secondary{background:var(--secondary);color:var(--secondary-fg)}
.badge-owner{background:#f3e8ff;color:#7c3aed}
.badge-admin{background:#dbeafe;color:#2563eb}
.badge-user{background:#dcfce7;color:#16a34a}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.5rem 1rem;border-radius:var(--radius);font-size:0.875rem;font-weight:500;border:1px solid transparent;cursor:pointer;transition:background 0.15s,opacity 0.15s}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn-primary{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}
.btn-primary:hover:not(:disabled){background:#27272a}
.btn-ghost{background:transparent;color:var(--fg-muted);border-color:transparent}
.btn-ghost:hover:not(:disabled){background:var(--bg-muted)}
.btn-destructive{background:var(--destructive);color:var(--destructive-fg)}
.btn-sm{padding:0.25rem 0.5rem;font-size:0.75rem}
.btn-full{width:100%}
.btn-icon{width:2rem;height:2rem;padding:0;border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--fg-muted);cursor:pointer}
.btn-icon:hover{background:var(--bg-muted)}
.btn-icon.danger:hover{color:var(--destructive)}

.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:0.875rem;font-weight:500;margin-bottom:0.375rem}
.form-group input{width:100%;padding:0.5rem 0.75rem;border:1px solid var(--input);border-radius:var(--radius);font-size:0.875rem;background:var(--card);color:var(--fg)}
.form-group input:focus{outline:none;ring:2px;ring-color:var(--ring)}
.form-error{color:var(--destructive);font-size:0.875rem;text-align:center;padding:0.5rem 0}
.form-hint{font-size:0.75rem;color:var(--fg-muted);margin-top:0.25rem}
.text-muted{color:var(--fg-muted)}
.text-green{color:var(--green)}
.text-red{color:var(--red)}

.key-display{display:flex;align-items:center;gap:0.5rem;padding:0.75rem;background:var(--bg-muted);border-radius:var(--radius);margin:0.75rem 0}
.key-display code{flex:1;font-family:monospace;font-size:0.875rem;word-break:break-all}
.key-display-inline{background:var(--bg-muted);padding:0.125rem 0.5rem;border-radius:var(--radius);font-family:monospace;font-size:0.8125rem}
.key-list{display:flex;flex-direction:column;gap:0.375rem;margin:0.75rem 0;max-height:16rem;overflow-y:auto}
.bulk-key-row{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;padding:0.375rem 0.5rem;background:var(--bg-muted);border-radius:var(--radius)}

.loading-spinner{display:flex;justify-content:center;padding:2rem}
.loading-spinner::after{content:'';width:2rem;height:2rem;border:3px solid var(--primary);border-top-color:transparent;border-radius:50%;animation:spin 0.6s linear infinite}
.empty-state{text-align:center;color:var(--fg-muted);padding:2rem}

.dialog-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:1rem}
.dialog{background:var(--card);border-radius:var(--radius);width:100%;max-width:28rem;box-shadow:0 20px 25px -5px rgba(0,0,0,0.1);max-height:90vh;overflow-y:auto}
.dialog-header{padding:1.5rem 1.5rem 0}
.dialog-header h2{font-size:1.125rem;font-weight:600}
.dialog-header p{font-size:0.875rem;color:var(--fg-muted);margin-top:0.25rem}
.dialog-body{padding:1.5rem}
.dialog-footer{display:flex;justify-content:flex-end;gap:0.5rem;margin-top:1rem}

.subscription-card .card-header{padding-bottom:0}
.sub-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:1rem}
.sub-item{display:flex;align-items:flex-start;gap:0.75rem}
.sub-icon{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:0.5rem;background:rgba(24,24,27,.08);flex-shrink:0}
.sub-icon svg{color:var(--primary)}
.sub-label{font-size:0.875rem;color:var(--fg-muted);font-weight:500}
.sub-value{font-size:1.125rem;font-weight:600;margin-top:0.125rem}

@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:768px){
  .sidebar{display:none}
  .main-content{margin-left:0}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid-3{grid-template-columns:1fr}
  .sub-grid{grid-template-columns:1fr}
  .page-header{flex-direction:column;gap:1rem}
}

.quick-days{display:flex;flex-wrap:wrap;gap:0.25rem;margin-top:0.5rem}
.quick-days .btn{border:1px solid var(--border)}

#user-created-result,#bulk-created-result{padding:0 1.5rem 1.25rem}
#user-created-result>.text-muted,#bulk-created-result>.text-muted{margin-bottom:0.5rem}

/* App device / session state */
.device-cell{display:flex;flex-direction:column;gap:0.125rem;font-size:0.8125rem;white-space:nowrap}
.device-session{display:inline-flex;align-items:center;gap:0.375rem;font-size:0.75rem}
.device-hint{font-family:monospace;font-size:0.75rem;background:var(--bg-muted);padding:0 0.25rem;border-radius:0.25rem}
.dot{display:inline-block;width:0.5rem;height:0.5rem;border-radius:50%;background:var(--border)}
.dot-on{background:var(--green)}
.btn-icon:disabled{opacity:.35;cursor:not-allowed}
.btn-icon:disabled:hover{background:transparent}
.btn-icon.attention{color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.own-device-card{margin-top:1.5rem}
.own-device-body{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.own-device-state{font-size:0.875rem;display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}

/* Toasts */
#toast-box{position:fixed;right:1rem;bottom:1rem;display:flex;flex-direction:column;gap:0.5rem;z-index:100;max-width:min(24rem,calc(100vw - 2rem))}
.toast{padding:0.625rem 0.875rem;border-radius:var(--radius);font-size:0.875rem;background:var(--card);color:var(--fg);border:1px solid var(--border);border-left:4px solid var(--green);box-shadow:0 4px 12px rgba(0,0,0,.12)}
.toast-error{border-left-color:var(--red)}
[data-theme="dark"] .toast{box-shadow:0 4px 12px rgba(0,0,0,.5)}

.table .key-display-inline{white-space:nowrap}

/* Mobile navigation (sidebar is hidden below 768px) */
.mobile-nav{display:none}
@media(max-width:768px){
  .app-layout{flex-direction:column}
  .mobile-nav{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;flex-wrap:wrap;padding:0.5rem 1rem;background:var(--card);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:40}
  .mobile-nav-links{display:flex;gap:0.25rem;overflow-x:auto}
  .mobile-nav-link{padding:0.375rem 0.625rem;border-radius:var(--radius);font-size:0.875rem;font-weight:500;color:var(--fg-muted);white-space:nowrap}
  .mobile-nav-link.active{background:var(--primary);color:var(--primary-fg)}
  .mobile-nav-actions{display:flex;gap:0.25rem;margin-left:auto}
  .main-content{padding:1rem}
}

/* Pause dialog */
.pause-question{font-size:0.875rem;margin-bottom:0.75rem}
.pause-options{display:flex;flex-direction:column;gap:0.5rem}
.pause-option{display:flex;flex-direction:column;align-items:flex-start;gap:0.25rem;text-align:left;padding:0.75rem 0.875rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);color:var(--fg);cursor:pointer;font:inherit}
.pause-option:hover{border-color:var(--primary);background:var(--bg-muted)}
.pause-option strong{font-size:0.9375rem}
.pause-option span{font-size:0.8125rem;color:var(--fg-muted)}

/* App builds (owner: anti-tampering) */
.app-builds-note { margin: 0 0 12px; color: var(--text-secondary); font-size: 13px; }
.app-builds-note-warn { color: var(--warning, #b45309); }
.app-builds-empty { color: var(--text-secondary); font-size: 13px; margin: 0; }
.app-build { padding: 12px 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.app-build:first-child { border-top: none; }
.app-build-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.app-build-cert { font-family: ui-monospace, monospace; font-size: 12px; color: var(--text-secondary); }
.app-build-meta { font-size: 12px; color: var(--text-secondary); }
.app-build-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.app-build-actions .btn { border: 1px solid var(--border); padding: 6px 10px; font-size: 13px; }