@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Unbounded:wght@300;400;600;800&display=swap');

:root {
  --bg: #0a0a0f; --surface: #111118; --surface2: #1a1a24;
  --border: #2a2a3a; --accent: #7c6aff; --accent2: #ff6a9b;
  --accent3: #6affd4; --text: #e8e8f0; --text-muted: #6a6a8a;
  --mod: #7c6aff; --helper: #ff9f6a; --intern: #6affd4; --senior: #ff6a9b;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Space Mono',monospace; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0;
  background-image: linear-gradient(rgba(124,106,255,0.03) 1px,transparent 1px), linear-gradient(90deg,rgba(124,106,255,0.03) 1px,transparent 1px);
  background-size:40px 40px; pointer-events:none; z-index:0; }

/* LOGIN */
#login-screen { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:200; }
.login-box { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:36px 40px; width:90%; max-width:380px; position:relative; z-index:1; box-shadow:0 0 60px rgba(124,106,255,0.15); }
.login-logo { font-family:'Unbounded',sans-serif; font-weight:800; font-size:22px; text-align:center; margin-bottom:28px; }
.login-logo span { color:var(--accent); }
.login-tabs { display:flex; gap:4px; background:var(--surface2); border-radius:10px; padding:4px; margin-bottom:24px; }
.login-tab { flex:1; background:transparent; border:none; color:var(--text-muted); font-family:'Space Mono',monospace; font-size:11px; padding:8px; border-radius:7px; cursor:pointer; transition:all 0.2s; }
.login-tab.active { background:var(--accent); color:#fff; font-weight:700; }

/* HEADER */
header { padding:14px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:rgba(10,10,15,0.9); backdrop-filter:blur(12px); position:sticky; top:0; z-index:100; gap:10px; flex-wrap:wrap; }
.logo { font-family:'Unbounded',sans-serif; font-weight:800; font-size:16px; flex-shrink:0; }
.logo span { color:var(--accent); }
nav { display:flex; gap:3px; flex-wrap:wrap; }
.nav-btn { background:transparent; border:1px solid transparent; color:var(--text-muted); font-family:'Space Mono',monospace; font-size:10px; padding:6px 12px; cursor:pointer; border-radius:6px; transition:all 0.2s; }
.nav-btn:hover { color:var(--text); border-color:var(--border); }
.nav-btn.active { color:var(--accent); border-color:var(--accent); background:rgba(124,106,255,0.1); }
.sync-status { display:flex; align-items:center; gap:7px; font-size:10px; color:var(--text-muted); }
.sync-dot { width:7px; height:7px; border-radius:50%; background:var(--text-muted); transition:background 0.4s; }

/* PAGES */
.page { display:none; padding:24px 28px; max-width:1400px; margin:0 auto; }
.page.active { display:block; }
.page-title { font-family:'Unbounded',sans-serif; font-size:24px; font-weight:800; margin-bottom:8px; letter-spacing:-1px; }
.page-subtitle { color:var(--text-muted); font-size:12px; margin-bottom:24px; }

/* WEEK NAV */
.week-nav { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.week-nav button { background:var(--surface); border:1px solid var(--border); color:var(--text); font-family:'Space Mono',monospace; font-size:16px; width:36px; height:36px; border-radius:6px; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; justify-content:center; }
.week-nav button:hover { border-color:var(--accent); color:var(--accent); }
.week-label { font-family:'Unbounded',sans-serif; font-size:13px; font-weight:600; color:var(--accent); min-width:200px; text-align:center; }
.current-week-tag { font-size:10px; background:rgba(124,106,255,0.2); color:var(--accent); padding:2px 8px; border-radius:10px; margin-left:8px; }

/* SUMMARY */
.summary-bar { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.summary-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 16px; min-width:120px; }
.summary-label { font-size:10px; color:var(--text-muted); letter-spacing:0.5px; margin-bottom:5px; }
.summary-value { font-family:'Unbounded',sans-serif; font-size:18px; font-weight:700; }
.summary-value.mod { color:var(--mod); } .summary-value.helper { color:var(--helper); }
.summary-value.intern { color:var(--intern); } .summary-value.total { color:var(--accent3); }

/* FILTERS */
.filters { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.filter-btn { background:var(--surface); border:1px solid var(--border); color:var(--text-muted); font-family:'Space Mono',monospace; font-size:11px; padding:7px 13px; border-radius:20px; cursor:pointer; transition:all 0.2s; }
.filter-btn:hover { color:var(--text); }
.filter-btn.active[data-role="all"]       { color:var(--text); border-color:var(--text); background:rgba(232,232,240,0.1); }
.filter-btn.active[data-role="moderator"] { color:var(--mod); border-color:var(--mod); background:rgba(124,106,255,0.1); }
.filter-btn.active[data-role="helper"]    { color:var(--helper); border-color:var(--helper); background:rgba(255,159,106,0.1); }
.filter-btn.active[data-role="intern"]    { color:var(--intern); border-color:var(--intern); background:rgba(106,255,212,0.1); }
.filter-btn.active[data-cat="all"]        { color:var(--text); border-color:var(--text); background:rgba(232,232,240,0.1); }
.filter-btn.active[data-cat="chunk"]      { color:var(--accent3); border-color:var(--accent3); background:rgba(106,255,212,0.1); }
.filter-btn.active[data-cat="energy"]     { color:var(--accent); border-color:var(--accent); background:rgba(124,106,255,0.1); }
.filter-btn.active[data-cat="tech"]       { color:var(--helper); border-color:var(--helper); background:rgba(255,159,106,0.1); }
.filter-btn.active[data-cat="cases"]      { color:#ffd700; border-color:#ffd700; background:rgba(255,215,0,0.1); }
.filter-btn.active[data-cat="privileges"] { color:var(--accent2); border-color:var(--accent2); background:rgba(255,106,155,0.1); }

/* TABLE */
.table-wrap { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; overflow-x:auto; }
table { width:100%; border-collapse:collapse; min-width:900px; }
thead tr { background:var(--surface2); border-bottom:1px solid var(--border); }
th { padding:12px 13px; text-align:left; font-size:10px; letter-spacing:1px; color:var(--text-muted); font-weight:700; white-space:nowrap; }
th.day { text-align:center; }
tbody tr { border-bottom:1px solid var(--border); transition:background 0.15s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:rgba(124,106,255,0.04); }
td { padding:10px 13px; font-size:12px; vertical-align:middle; }
td.day-cell { text-align:center; }
.role-badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:10px; font-weight:700; }
.role-badge.moderator { background:rgba(124,106,255,0.15); color:var(--mod); border:1px solid rgba(124,106,255,0.3); }
.role-badge.helper    { background:rgba(255,159,106,0.15); color:var(--helper); border:1px solid rgba(255,159,106,0.3); }
.role-badge.intern    { background:rgba(106,255,212,0.15); color:var(--intern); border:1px solid rgba(106,255,212,0.3); }
.role-badge.senior    { background:rgba(255,106,155,0.15); color:var(--senior); border:1px solid rgba(255,106,155,0.3); }
.hours-cell { font-size:12px; }
.hours-cell.off      { color:var(--accent2); font-style:italic; font-size:10px; }
.hours-cell.vacation { color:var(--accent3); font-style:italic; font-size:10px; }
.dash { color:var(--border); }
.total-hours { font-weight:700; }
.salary-cell { font-family:'Unbounded',sans-serif; font-size:12px; font-weight:600; color:var(--accent3); }
.salary-cell.zero { color:var(--text-muted); }
.bonus-tag { font-size:10px; color:var(--accent3); background:rgba(106,255,212,0.15); border:1px solid rgba(106,255,212,0.3); padding:1px 6px; border-radius:8px; margin-left:4px; font-family:'Space Mono',monospace; font-weight:400; }
.custom-tag { font-size:9px; color:#ffd700; background:rgba(255,215,0,0.15); border:1px solid rgba(255,215,0,0.3); padding:1px 5px; border-radius:6px; margin-left:4px; }
.edit-btn { background:transparent; border:1px solid var(--border); color:var(--text-muted); font-family:'Space Mono',monospace; font-size:10px; padding:4px 9px; border-radius:4px; cursor:pointer; transition:all 0.2s; }
.edit-btn:hover { border-color:var(--accent); color:var(--accent); }

/* STAFF */
.staff-controls { display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; align-items:flex-end; }
.input-group { display:flex; flex-direction:column; gap:6px; }
.input-label { font-size:10px; color:var(--text-muted); letter-spacing:0.5px; }
.text-input { background:var(--surface); border:1px solid var(--border); color:var(--text); font-family:'Space Mono',monospace; font-size:12px; padding:10px 13px; border-radius:8px; width:200px; transition:border-color 0.2s; }
.text-input:focus { outline:none; border-color:var(--accent); }
.role-select { background:var(--surface); border:1px solid var(--border); color:var(--text); font-family:'Space Mono',monospace; font-size:12px; padding:10px 13px; border-radius:8px; cursor:pointer; width:160px; }
.staff-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.staff-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; display:flex; align-items:center; justify-content:space-between; transition:border-color 0.2s; }
.staff-card:hover { border-color:var(--accent); }
.staff-info { display:flex; align-items:center; gap:12px; }
.staff-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Unbounded',sans-serif; font-size:14px; font-weight:800; flex-shrink:0; }
.staff-avatar.moderator { background:rgba(124,106,255,0.2); color:var(--mod); }
.staff-avatar.helper    { background:rgba(255,159,106,0.2); color:var(--helper); }
.staff-avatar.intern    { background:rgba(106,255,212,0.2); color:var(--intern); }
.staff-name-text { font-size:13px; font-weight:700; }
.delete-btn { background:transparent; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; padding:4px; transition:color 0.2s; }
.delete-btn:hover { color:var(--accent2); }

/* CABINET */
.cabinet-header { display:flex; align-items:center; gap:16px; margin-bottom:20px; }
.cabinet-avatar { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Unbounded',sans-serif; font-size:20px; font-weight:800; }
.cabinet-avatar.moderator { background:rgba(124,106,255,0.2); color:var(--mod); }
.cabinet-avatar.helper    { background:rgba(255,159,106,0.2); color:var(--helper); }
.cabinet-avatar.intern    { background:rgba(106,255,212,0.2); color:var(--intern); }
.cabinet-nick { font-family:'Unbounded',sans-serif; font-size:18px; font-weight:800; margin-bottom:6px; }
.cabinet-stats { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px 16px; min-width:120px; }
.stat-label { font-size:10px; color:var(--text-muted); letter-spacing:0.5px; margin-bottom:5px; }
.stat-value { font-family:'Unbounded',sans-serif; font-size:18px; font-weight:700; }
.stat-value.accent3 { color:var(--accent3); } .stat-value.accent2 { color:var(--accent2); } .stat-value.mod { color:var(--mod); }
.cabinet-section-title { font-size:10px; letter-spacing:1px; color:var(--text-muted); font-weight:700; margin-bottom:12px; }
.cabinet-days { display:flex; gap:8px; flex-wrap:wrap; }
.cabinet-day { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:10px 12px; text-align:center; min-width:58px; }
.cabinet-day-name { font-size:10px; color:var(--text-muted); margin-bottom:6px; font-weight:700; }
.purchases-list { display:flex; flex-direction:column; gap:8px; }
.purchase-row { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:11px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; flex-wrap:wrap; }

/* SHOP */
.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:14px; }
.shop-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center; transition:border-color 0.2s,transform 0.2s; }
.shop-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.shop-card.cant-afford { opacity:0.5; }
.shop-img-wrap { width:80px; height:80px; display:flex; align-items:center; justify-content:center; }
.shop-img { width:72px; height:72px; object-fit:contain; image-rendering:pixelated; }
.shop-item-name { font-size:11px; font-weight:700; }
.shop-item-desc { font-size:10px; color:var(--text-muted); }
.shop-item-price { font-family:'Unbounded',sans-serif; font-size:13px; font-weight:700; color:var(--accent3); }

/* REQUESTS */
.requests-section-title { font-size:10px; letter-spacing:1px; color:var(--text-muted); font-weight:700; margin-bottom:10px; }
.request-row { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:13px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; flex-wrap:wrap; }
.request-info { flex:1; font-size:12px; }

/* PAYOUTS */
.payouts-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; margin-bottom:28px; }
.payout-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:22px; }
.payout-card-title { font-family:'Unbounded',sans-serif; font-size:13px; font-weight:700; margin-bottom:18px; color:var(--text); }

/* HISTORY */
.history-list { display:flex; flex-direction:column; gap:14px; }
.history-week { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.history-week-header { padding:13px 16px; background:var(--surface2); display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.history-week-title { font-family:'Unbounded',sans-serif; font-size:12px; font-weight:600; }
.history-week-body { display:none; }
.history-week-body.open { display:block; }
.chevron { transition:transform 0.2s; font-size:12px; }
.chevron.open { transform:rotate(180deg); }

/* MODAL */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.7); backdrop-filter:blur(4px); z-index:1000; align-items:center; justify-content:center; }
.modal-overlay.open { display:flex; }
.modal { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:26px; width:90%; max-width:520px; max-height:90vh; overflow-y:auto; animation:modalIn 0.2s ease; }
@keyframes modalIn { from{opacity:0;transform:translateY(14px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.modal-title { font-family:'Unbounded',sans-serif; font-size:15px; font-weight:700; margin-bottom:18px; }
.days-grid { display:flex; flex-direction:column; gap:11px; margin-bottom:18px; }
.day-row { display:flex; align-items:center; gap:12px; }
.day-name { font-size:11px; color:var(--text-muted); width:30px; flex-shrink:0; }
.day-input-wrap { display:flex; align-items:center; gap:8px; flex:1; }
.type-select { background:var(--surface2); border:1px solid var(--border); color:var(--text); font-family:'Space Mono',monospace; font-size:11px; padding:8px 10px; border-radius:6px; cursor:pointer; flex:1; }
.time-input { background:var(--surface2); border:1px solid var(--border); color:var(--text); font-family:'Space Mono',monospace; font-size:12px; padding:8px 11px; border-radius:6px; width:88px; transition:border-color 0.2s; }
.time-input:focus { outline:none; border-color:var(--accent); }
.time-input:disabled { opacity:0.3; }
.modal-footer { display:flex; gap:8px; justify-content:flex-end; }

/* BUTTONS */
.btn { font-family:'Space Mono',monospace; font-size:12px; padding:10px 18px; border-radius:8px; cursor:pointer; transition:all 0.2s; border:1px solid transparent; }
.btn:disabled { opacity:0.5; cursor:not-allowed; }
.btn-ghost { background:transparent; border-color:var(--border); color:var(--text-muted); }
.btn-ghost:hover:not(:disabled) { color:var(--text); border-color:var(--text-muted); }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; }
.btn-primary:hover:not(:disabled) { background:#9280ff; }

/* DAY-OFF */
.dayoff-btn { background:transparent; border:1px solid var(--accent2); color:var(--accent2); font-family:'Space Mono',monospace; font-size:9px; padding:3px 7px; border-radius:4px; cursor:pointer; transition:all 0.2s; }
.dayoff-btn:hover { background:rgba(255,106,155,0.15); }
.dayoff-cancel-btn { background:transparent; border:1px solid var(--border); color:var(--text-muted); font-family:'Space Mono',monospace; font-size:9px; padding:3px 7px; border-radius:4px; cursor:pointer; transition:all 0.2s; }
.dayoff-cancel-btn:hover { border-color:var(--accent2); color:var(--accent2); }

/* MISC */
.empty-state { text-align:center; padding:60px 20px; color:var(--text-muted); font-size:13px; }
.empty-icon { font-size:40px; margin-bottom:12px; opacity:0.4; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* ===== SERVER BADGES & DIVIDERS ===== */
.server-badge { font-size:9px; padding:2px 7px; border-radius:8px; font-weight:700; }
.server-badge.mcskill    { background:rgba(124,106,255,0.2); color:#a08aff; border:1px solid rgba(124,106,255,0.3); }
.server-badge.enthusiasm { background:rgba(255,215,0,0.15);  color:#ffd700; border:1px solid rgba(255,215,0,0.3); }

.server-divider td { padding:6px 13px; background:var(--surface2); border-bottom:1px solid var(--border); }
.server-divider-label { font-size:10px; font-weight:700; letter-spacing:1.5px; }
.server-divider-label.mcskill    { color:#a08aff; }
.server-divider-label.enthusiasm { color:#ffd700; }

.filter-btn.active[data-srv="all"]        { color:var(--text); border-color:var(--text); background:rgba(232,232,240,0.1); }
.filter-btn.active[data-srv="mcskill"]    { color:#a08aff; border-color:#a08aff; background:rgba(124,106,255,0.1); }
.filter-btn.active[data-srv="enthusiasm"] { color:#ffd700; border-color:#ffd700; background:rgba(255,215,0,0.1); }

/* ===== PRICE EDITOR ===== */
.price-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); }
.price-row:last-of-type { border-bottom:none; }

/* ===== SALARY EDITOR ===== */
.salary-editor { display:flex; flex-direction:column; gap:16px; }
.salary-edit-block { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; }
.salary-edit-role { font-family:'Unbounded',sans-serif; font-size:13px; font-weight:700; margin-bottom:14px; }
.salary-edit-role.moderator { color:var(--mod); }
.salary-edit-role.helper    { color:var(--helper); }
.salary-edit-role.intern    { color:var(--intern); }
.salary-edit-fields { display:flex; gap:12px; flex-wrap:wrap; }