:root{
  --bg:#0a0d14;
  --panel:#121722;
  --panel-2:#1a2130;
  --line:#242c3d;
  --brass:#c9a24b;
  --brass-dim:#7d6631;
  --text:#e8e6df;
  --text-dim:#7c869c;
  --ok:#4f9d69;
  --danger:#c1544a;
  --warn:#c98a3f;
  --font-display:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',Consolas,'Courier New',monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:#1a1a1a;color:#e0e0e0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;height:100vh;overflow:hidden}
.app{display:none;flex-direction:column;height:100vh}

/* Login */
.login-screen{position:fixed;top:0;left:0;right:0;bottom:0;background:
    radial-gradient(circle at 18% 12%,rgba(201,162,75,0.07),transparent 40%),
    radial-gradient(circle at 85% 88%,rgba(201,162,75,0.05),transparent 45%),
    var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:999;padding:1.5rem;overflow-y:auto;font-family:var(--font-display)}
.login-screen::before{content:'';position:fixed;inset:0;pointer-events:none;opacity:0.035;
  background-image:repeating-linear-gradient(0deg,#fff 0px,#fff 1px,transparent 1px,transparent 3px);
  mix-blend-mode:overlay}
.login-wrap{display:flex;gap:1.25rem;max-width:820px;width:100%;align-items:stretch;flex-direction:column;position:relative;z-index:1}

.login-box{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:2.1rem 1.9rem 1.8rem;flex:0 0 auto;width:100%;position:relative}
.login-box::before,.login-box::after,.login-box .corner-l,.login-box .corner-r{content:'';position:absolute;width:16px;height:16px;border-color:var(--brass);opacity:0.85}
.login-box::before{top:-1px;left:-1px;border-top:2px solid var(--brass);border-left:2px solid var(--brass)}
.login-box::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--brass);border-right:2px solid var(--brass)}
.login-box .corner-l{top:-1px;right:-1px;border-top:2px solid var(--brass);border-right:2px solid var(--brass)}
.login-box .corner-r{bottom:-1px;left:-1px;border-bottom:2px solid var(--brass);border-left:2px solid var(--brass)}
.login-box .eyebrow{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.18em;text-transform:uppercase;color:var(--brass);display:flex;align-items:center;gap:0.45rem;margin-bottom:0.9rem}
.login-box .eyebrow .seal{width:8px;height:8px;border:1.5px solid var(--brass);border-radius:50%;position:relative;flex-shrink:0}
.login-box .eyebrow .seal::after{content:'';position:absolute;inset:2px;border-radius:50%;background:var(--brass)}
.login-box h1{font-size:1.5rem;color:var(--text);margin-bottom:0.15rem;font-weight:700;letter-spacing:-0.01em;font-family:var(--font-display)}
.login-box h1 span{color:var(--brass)}
.login-box .sub{font-size:0.7rem;color:var(--text-dim);margin-bottom:1.6rem;font-family:var(--font-mono)}
.login-box .field{margin-bottom:1.1rem}
.login-box label{display:block;font-size:0.6rem;text-transform:uppercase;color:var(--text-dim);letter-spacing:0.1em;margin-bottom:0.35rem;font-family:var(--font-mono)}
.login-box input{width:100%;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:2px;padding:0.6rem 0.65rem;font-size:0.85rem;font-family:var(--font-mono);min-height:44px;letter-spacing:0.03em}
.login-box input:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 1px var(--brass) inset}
.login-box .btn-login{width:100%;background:var(--brass);color:#181205;border:none;border-radius:2px;padding:0.65rem;font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;cursor:pointer;min-height:46px;font-family:var(--font-display)}
.login-box .btn-login:active{background:#e0b859}
.login-box .btn-login:disabled{opacity:0.4;cursor:not-allowed}
.login-box .error{color:var(--danger);font-size:0.72rem;min-height:1.2rem;margin-top:0.6rem;font-family:var(--font-mono)}
.login-box .info{color:#555f74;font-size:0.62rem;margin-top:0.3rem;font-family:var(--font-mono)}

.login-info{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:1.6rem;flex:1;min-width:0}
.login-info h3{font-size:0.65rem;color:var(--text-dim);margin-bottom:0.9rem;font-weight:600;padding-bottom:0.5rem;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:0.14em;font-family:var(--font-mono)}
.login-info .doc-item{display:flex;align-items:flex-start;gap:0.6rem;padding:0.55rem 0;border-bottom:1px solid #1a1f2b;font-size:0.72rem}
.login-info .doc-item .icon{color:var(--brass);font-size:0.85rem;flex-shrink:0;width:18px;text-align:center}
.login-info .doc-item .txt{color:var(--text-dim);line-height:1.45;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
.login-info .doc-item .txt strong{color:var(--text);display:block;margin-bottom:0.15rem;font-family:var(--font-display);font-weight:600;font-size:0.78rem}
.login-info .status-bar{display:flex;align-items:center;gap:0.55rem;background:var(--panel-2);border:1px solid var(--line);border-radius:2px;padding:0.6rem 0.8rem;margin-bottom:1rem}
.login-info .status-bar .dot{width:7px;height:7px;background:var(--ok);border-radius:50%;animation:pulse 2s infinite;box-shadow:0 0 6px var(--ok)}
.login-info .status-bar span{font-size:0.68rem;color:var(--text-dim);font-family:var(--font-mono);letter-spacing:0.03em}
.login-info .features{display:grid;grid-template-columns:1fr 1fr;gap:0.4rem;margin-top:0.6rem}
.login-info .features div{font-size:0.62rem;color:var(--text-dim);padding:0.4rem 0.3rem;background:var(--panel-2);border:1px solid var(--line);border-radius:2px;text-align:center;font-family:var(--font-mono);letter-spacing:0.02em}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}

.how-works{max-width:820px;width:100%;margin-top:1.25rem;position:relative;z-index:1}
.how-works-header{margin-bottom:0.8rem}
.how-works-header h3{font-size:0.65rem;color:var(--text-dim);font-weight:600;text-transform:uppercase;letter-spacing:0.14em;font-family:var(--font-mono);margin-bottom:0.25rem}
.how-works-header p{font-size:0.68rem;color:#555f74;font-family:var(--font-mono)}
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.4rem}
.how-card{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:0.7rem 0.75rem;transition:border-color 0.2s}
.how-card:hover{border-color:var(--brass-dim)}
.how-card .how-icon{color:var(--brass);font-size:0.85rem;display:block;margin-bottom:0.25rem}
.how-card strong{color:var(--text);font-size:0.75rem;font-family:var(--font-display);font-weight:600;display:block;margin-bottom:0.15rem}
.how-card p{color:var(--text-dim);font-size:0.65rem;line-height:1.45;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}

/* Top Bar */
.top-bar{display:flex;align-items:center;gap:0.6rem;padding:0.45rem 0.7rem;background:var(--panel);border-bottom:1px solid var(--line);flex-shrink:0;min-height:46px;font-family:var(--font-display)}
.top-bar label{font-size:0.62rem;color:var(--text-dim);display:none;text-transform:uppercase;letter-spacing:0.1em;font-family:var(--font-mono)}
.top-bar select{background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:2px;padding:0.4rem 0.5rem;font-size:0.78rem;flex:1;max-width:180px;height:36px;font-family:var(--font-mono)}
.top-bar select:focus{outline:none;border-color:var(--brass)}
.top-bar .badge{font-size:0.58rem;padding:3px 9px;border-radius:2px;background:var(--panel-2);border:1px solid var(--line);color:var(--text-dim);white-space:nowrap;text-transform:uppercase;letter-spacing:0.08em;font-family:var(--font-mono)}
.top-bar .badge.admin{background:rgba(201,162,75,0.12);border-color:var(--brass-dim);color:var(--brass)}
.top-bar .status{font-size:0.65rem;color:var(--text-dim);margin-left:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;font-family:var(--font-mono)}
.hamburger{background:none;border:1px solid var(--line);color:var(--text-dim);font-size:1.1rem;cursor:pointer;padding:0.3rem;line-height:1;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:2px}
.hamburger:active{background:var(--panel-2);border-color:var(--brass-dim);color:var(--brass)}

/* Overlay */
.overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(6,8,13,0.75);z-index:98}
.overlay.show{display:block}

/* Sidebar */
.body-wrap{display:flex;flex:1;overflow:hidden;position:relative}
.sidebar{position:fixed;top:0;left:-260px;width:210px;height:100vh;background:var(--panel);border-right:1px solid var(--line);padding:0.5rem 0;overflow-y:auto;z-index:99;transition:left 0.25s ease;flex-shrink:0;font-family:var(--font-display)}
.sidebar.open{left:0}
.sidebar .sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0.9rem;border-bottom:1px solid var(--line);margin-bottom:0.4rem}
.sidebar .sidebar-header span{font-size:0.65rem;font-weight:600;color:var(--brass);text-transform:uppercase;letter-spacing:0.16em;font-family:var(--font-mono)}
.sidebar .sidebar-close{background:none;border:none;color:var(--text-dim);font-size:1.2rem;cursor:pointer;padding:0.2rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center}
.sidebar button{display:block;width:100%;padding:0.65rem 0.9rem;background:none;border:none;border-left:3px solid transparent;color:var(--text-dim);text-align:left;cursor:pointer;font-size:0.76rem;font-family:var(--font-display);font-weight:500;min-height:40px;letter-spacing:0.01em}
.sidebar button:active{background:var(--panel-2)}
.sidebar button.active{background:rgba(201,162,75,0.08);color:var(--brass);border-left:3px solid var(--brass);font-weight:600}
.sidebar .sep{border-top:1px solid var(--line);margin:0.4rem 0}
.sidebar .logout{color:var(--danger)!important}

/* Main */
.main{flex:1;padding:0.5rem;overflow-y:auto;background:#1a1a1a;-webkit-overflow-scrolling:touch}
.panel{display:none;background:#222;border:1px solid #333;border-radius:8px;padding:0.6rem;margin-bottom:0.5rem}
.panel.active{display:block}
.panel h3{font-size:0.8rem;color:#ccc;margin-bottom:0.5rem;font-weight:600;padding-bottom:0.3rem;border-bottom:1px solid #2a2a2a}

/* Forms */
.row{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:0.35rem}
.col{flex:1;min-width:100px}
.col-narrow{flex:0 0 auto}
label{display:block;font-size:0.6rem;text-transform:uppercase;color:#888;letter-spacing:0.03em;margin-bottom:0.1rem}
input,textarea,select{background:#333;color:#e0e0e0;border:1px solid #555;border-radius:6px;padding:0.45rem 0.5rem;font-size:0.8rem;font-family:inherit;width:100%;min-height:38px;-webkit-appearance:none;appearance:none}
input[type=checkbox]{-webkit-appearance:checkbox;appearance:checkbox}
textarea{resize:vertical;min-height:44px;padding:0.4rem 0.5rem}
input:focus,textarea:focus,select:focus{outline:none;border-color:#4fc3f7}

/* Buttons */
.btn{padding:0.5rem 1rem;border-radius:6px;border:none;cursor:pointer;font-weight:600;font-size:0.75rem;font-family:inherit;min-height:38px;display:inline-flex;align-items:center;justify-content:center;gap:0.3rem}
.btn-primary{background:#388e3c;color:#fff}.btn-primary:active{background:#43a047}
.btn-danger{background:#d32f2f;color:#fff}.btn-danger:active{background:#e53935}
.btn-secondary{background:#424242;color:#e0e0e0}.btn-secondary:active{background:#616161}
.btn-warning{background:#f57c00;color:#fff}.btn-warning:active{background:#fb8c00}
.btn-sm{padding:0.4rem 0.6rem;font-size:0.7rem;min-height:34px}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn-group{display:flex;gap:0.4rem;flex-wrap:wrap;margin-top:0.3rem}
.mt-1{margin-top:0.4rem}.mb-1{margin-bottom:0.4rem}
.text-muted{color:#888;font-size:0.7rem}
.text-center{text-align:center}
hr{border:none;border-top:1px solid #2a2a2a;margin:0.5rem 0}

/* Output */
.output-box{background:#111;border:1px solid #333;border-radius:4px;padding:0.5rem;font-size:0.7rem;font-family:Consolas,'Courier New',monospace;color:#ccc;white-space:pre-wrap;overflow-y:auto;max-height:300px;min-height:50px;margin-top:0.4rem;word-break:break-all;display:none}
.output-box.success{border-color:#388e3c}
.output-box.error{border-color:#d32f2f}
.info-box{background:#111;border:1px solid #333;border-radius:6px;padding:0.6rem;font-size:0.7rem;font-family:Consolas,'Courier New',monospace;color:#ccc;white-space:pre-wrap;word-break:break-all;margin-top:0.4rem;display:none}

/* Stats */
.stat-bar{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:0.4rem}
.stat-item{background:#111;border:1px solid #333;border-radius:4px;padding:0.3rem 0.5rem;text-align:center;min-width:70px;flex:1}
.stat-item .num{font-size:1rem;font-weight:700;color:#4fc3f7}
.stat-item .lbl{font-size:0.55rem;color:#888;text-transform:uppercase}

/* Table */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-height:360px;overflow-y:auto}
table{width:100%;border-collapse:collapse;font-size:0.7rem;min-width:600px}
th{text-align:left;font-size:0.55rem;text-transform:uppercase;color:#888;padding:0.35rem 0.4rem;border-bottom:1px solid #333;position:sticky;top:0;background:#222;font-weight:600;white-space:nowrap}
td{padding:0.25rem 0.4rem;border-bottom:1px solid #2a2a2a;white-space:nowrap}
tr:active td{background:#2a2a2a}

/* Checkbox group */
.checkbox-group{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.checkbox-group label{display:flex;align-items:center;gap:0.35rem;font-size:0.75rem;text-transform:none;color:#ccc;cursor:pointer;padding:0.35rem 0;user-select:none}
.checkbox-group input[type=checkbox]{width:18px;height:18px;min-height:auto;cursor:pointer;accent-color:var(--brass);margin:0;padding:0;background:none;border:none;border-radius:0;-webkit-appearance:checkbox;appearance:checkbox}

/* Loading */
.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:9999}
.loading-overlay.show{display:flex}
.loading-overlay .loader-box{background:#1e1e1e;border:1px solid #333;border-radius:16px;padding:2rem 2.5rem;display:flex;flex-direction:column;align-items:center;box-shadow:0 8px 32px rgba(0,0,0,0.5)}
.loading-overlay .spinner{width:42px;height:42px;border:3px solid #2a2a2a;border-top-color:#4fc3f7;border-radius:50%;animation:spin .7s cubic-bezier(.6,0,.4,1) infinite}
.loading-overlay .loading-text{color:#ccc;font-size:0.85rem;margin-top:1rem;font-weight:500}
@keyframes spin{to{transform:rotate(360deg)}}

/* Toast */
.toast{position:fixed;bottom:1rem;left:1rem;right:1rem;background:#333;border:1px solid #555;border-radius:8px;padding:0.6rem 0.8rem;font-size:0.8rem;box-shadow:0 4px 12px rgba(0,0,0,0.5);z-index:999;display:none;max-width:100%}
.toast.show{display:flex;align-items:center;gap:0.5rem}
.toast.success{border-color:#388e3c}
.toast.error{border-color:#d32f2f}

@media(min-width:768px){
  .hamburger,.overlay,.sidebar-close,.sidebar-header{display:none!important}
  .sidebar{position:static;left:auto;width:160px;height:auto;transition:none}
  .top-bar label{display:block}
  .top-bar select{flex:none;min-width:140px}
  .top-bar .status{max-width:none;font-size:0.75rem}
  .panel{padding:0.75rem}
  .row{gap:0.5rem}
  .toast{left:auto;right:1.5rem;max-width:380px}
.login-wrap{flex-direction:row}
  .login-box{max-width:360px}
  .how-grid{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:767px){
  .login-screen{justify-content:flex-start;padding-top:1.5rem}
}