:root{
  --ink:#20302C; --ink-soft:#4B5C56; --paper:#F3F4EE; --paper-raised:#FFFFFF; --line:#DADED2;
  --sidebar:#173430; --sidebar-soft:#22453F; --sidebar-text:#CFE3DA; --sidebar-text-dim:#8FADA3;
  --accent:#D98F2B; --accent-ink:#5A3A0C; --accent-soft:#F7E4C0;
  --cat-a:#C9762E; --cat-a-soft:#F5E1CC; --cat-b:#2E7A6C; --cat-b-soft:#DBEDE7;
  --cat-c:#A8432B; --cat-c-soft:#F1DAD3; --cat-other:#5C6470; --cat-other-soft:#E3E5E9;
  --good:#2E7A54; --bad:#B0402A; --radius:10px;
  --shadow:0 1px 2px rgba(23,52,48,0.06), 0 4px 14px rgba(23,52,48,0.06);
  --font-display:'Fraunces', serif; --font-body:'Inter', sans-serif; --font-mono:'IBM Plex Mono', monospace;
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; } }
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0; font-family:var(--font-body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* LOGIN */
.login-screen{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--sidebar); padding:20px; }
.login-card{ background:var(--paper-raised); border-radius:14px; padding:36px 32px; width:100%; max-width:380px; box-shadow:0 20px 60px rgba(0,0,0,0.3); text-align:center; }
.login-mark{ width:48px; height:48px; border-radius:12px; background:var(--accent); color:var(--accent-ink); font-family:var(--font-display); font-weight:700; font-size:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; }
.login-card h1{ font-family:var(--font-display); font-size:21px; margin:0 0 4px; }
.login-card .field{ text-align:left; margin-bottom:14px; }
.login-card p.muted{ margin:0 0 22px; }
.login-card p.small{ font-size:11.5px; margin-top:14px; }
.login-error{ background:#FBEAE5; color:var(--bad); border:1px solid #E9AF9C; border-radius:8px; padding:9px 12px; font-size:12.5px; margin-bottom:14px; }

.app{ display:flex; height:100vh; overflow:hidden; }
.sidebar{ width:250px; flex:none; background:var(--sidebar); color:var(--sidebar-text); display:flex; flex-direction:column; transition:width .22s ease; border-right:1px solid #0E2622; position:relative; }
.sidebar.collapsed{ width:72px; }
.side-head{ display:flex; align-items:center; gap:10px; padding:20px 18px 16px; border-bottom:1px solid rgba(255,255,255,0.08); }
.side-mark{ width:34px; height:34px; border-radius:8px; background:var(--accent); display:flex; align-items:center; justify-content:center; flex:none; font-family:var(--font-display); font-weight:700; color:var(--accent-ink); font-size:16px; }
.side-title{ font-family:var(--font-display); font-weight:600; font-size:15.5px; line-height:1.15; white-space:nowrap; overflow:hidden;}
.side-sub{ font-size:11px; color:var(--sidebar-text-dim); white-space:nowrap; }
.sidebar.collapsed .side-title, .sidebar.collapsed .side-sub{ display:none; }
.side-toggle{ position:absolute; top:22px; right:-12px; width:24px; height:24px; border-radius:50%; background:var(--paper-raised); border:1px solid var(--line); color:var(--ink); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:12px; box-shadow:var(--shadow); z-index:5; }
.nav{ flex:1; padding:14px 10px; overflow-y:auto; }
.nav-item{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:8px; cursor:pointer; color:var(--sidebar-text); font-size:13.5px; font-weight:500; margin-bottom:2px; white-space:nowrap; overflow:hidden; border:1px solid transparent; }
.nav-item:hover{ background:var(--sidebar-soft); }
.nav-item.active{ background:var(--accent-soft); color:var(--accent-ink); font-weight:600; }
.nav-icon{ width:18px; text-align:center; flex:none; font-size:14px; }
.sidebar.collapsed .nav-label{ display:none; }
.nav-count{ margin-left:auto; font-family:var(--font-mono); font-size:10.5px; background:rgba(255,255,255,0.12); padding:1px 6px; border-radius:20px; color:var(--sidebar-text); }
.nav-item.active .nav-count{ background:rgba(90,58,12,0.14); color:var(--accent-ink); }
.sidebar.collapsed .nav-count{ display:none; }
.side-foot{ padding:14px 18px 18px; border-top:1px solid rgba(255,255,255,0.08); font-size:11px; color:var(--sidebar-text-dim); }
.status-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; margin-right:6px; }
.status-dot.on{ background:#59C08C; } .status-dot.off{ background:#D9722B; }
.sidebar.collapsed .side-foot .txt{ display:none; }

.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{ position:sticky; top:0; z-index:4; background:var(--paper-raised); border-bottom:1px solid var(--line); padding:14px 26px; display:flex; align-items:center; gap:16px; flex:none; }
.topbar h1{ font-family:var(--font-display); font-weight:600; font-size:19px; margin:0; flex:none; }
.topbar .sub{ font-size:12px; color:var(--ink-soft); margin-top:1px; }
.topbar-spacer{ flex:1; }
.pill{ font-family:var(--font-mono); font-size:11px; padding:4px 10px; border-radius:20px; border:1px solid var(--line); color:var(--ink-soft); background:var(--paper); }
.pill.warn{ border-color:#E9C79A; background:#FCF1DE; color:#8A5A16; }
.btn{ font-weight:600; font-size:13px; padding:9px 15px; border-radius:8px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.btn-accent{ background:var(--accent); color:#3E2705; }
.btn-accent:hover{ background:#C77F1E; }
.btn-ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ background:var(--paper); }
.btn-sm{ padding:6px 10px; font-size:12px; border-radius:7px; }
.btn-danger{ background:#FBEAE5; color:var(--bad); border-color:#F0C9BC; }
.view{ flex:1; overflow-y:auto; padding:24px 26px 60px; }
.view-hidden{ display:none; }
.card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.section-title{ font-family:var(--font-display); font-size:15px; font-weight:600; margin:0 0 4px; }
.muted{ color:var(--ink-soft); font-size:13px; }
.stat-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; margin-bottom:22px; }
.stat-card{ padding:16px 18px; }
.stat-num{ font-family:var(--font-mono); font-size:26px; font-weight:500; }
.stat-label{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.qlist{ display:flex; flex-direction:column; gap:12px; }
.qcard{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; display:flex; gap:14px; align-items:flex-start; box-shadow:var(--shadow); border-left:5px solid var(--cat-other); }
.qcard[data-cat="A"]{ border-left-color:var(--cat-a); } .qcard[data-cat="B"]{ border-left-color:var(--cat-b); } .qcard[data-cat="C"]{ border-left-color:var(--cat-c); }
.qcard-num{ font-family:var(--font-mono); font-size:11px; color:var(--ink-soft); width:26px; flex:none; padding-top:3px; }
.qcard-body{ flex:1; min-width:0; }
.qcard-tags{ display:flex; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
.tag{ font-size:10.5px; font-weight:600; padding:2px 8px; border-radius:20px; text-transform:uppercase; letter-spacing:.02em; }
.tag.cat-A{ background:var(--cat-a-soft); color:var(--cat-a); } .tag.cat-B{ background:var(--cat-b-soft); color:var(--cat-b); }
.tag.cat-C{ background:var(--cat-c-soft); color:var(--cat-c); } .tag.cat-Egyéb{ background:var(--cat-other-soft); color:var(--cat-other); }
.tag.type{ background:var(--paper); color:var(--ink-soft); border:1px solid var(--line); }
.qcard-text{ font-size:14.5px; font-weight:500; margin-bottom:4px; }
.qcard-opts{ font-size:12px; color:var(--ink-soft); }
.qcard-actions{ display:flex; gap:6px; flex:none; }
.collector-bar{ display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap; }
.collector-bar input[type=text]{ padding:8px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; width:240px; }
.form-cat-title{ font-family:var(--font-display); font-weight:600; font-size:15px; margin:26px 0 10px; display:flex; align-items:center; gap:8px; }
.form-cat-dot{ width:9px; height:9px; border-radius:50%; }
.qform{ padding:16px 18px; margin-bottom:12px; }
.qform-label{ font-size:14.5px; font-weight:500; margin-bottom:10px; }
.req{ color:var(--bad); }
.opt-row{ display:flex; align-items:center; gap:8px; padding:6px 0; font-size:13.5px; }
.opt-row input{ width:16px; height:16px; }
.scale-row{ display:flex; gap:8px; align-items:center; }
.scale-btn{ width:38px; height:38px; border-radius:8px; border:1px solid var(--line); background:var(--paper); cursor:pointer; font-family:var(--font-mono); font-weight:600; }
.scale-btn.sel{ background:var(--accent); border-color:var(--accent); color:#3E2705; }
.yn-row{ display:flex; gap:8px; }
.yn-btn{ padding:8px 20px; border-radius:8px; border:1px solid var(--line); background:var(--paper); cursor:pointer; font-weight:600; font-size:13px; }
.yn-btn.sel-yes{ background:#DEF3E6; border-color:#8FCFA9; color:var(--good); }
.yn-btn.sel-no{ background:#FBEAE5; border-color:#E9AF9C; color:var(--bad); }
textarea.qtext{ width:100%; min-height:70px; padding:10px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:13.5px; resize:vertical; }
table{ width:100%; border-collapse:collapse; font-size:13px; }
th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft); padding:10px 12px; border-bottom:1px solid var(--line); background:var(--paper); }
td{ padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td{ border-bottom:none; }
.name-chip{ display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.name-dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
.toolbar{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.toolbar select, .toolbar input[type=text], .collector-bar select{ padding:7px 10px; border:1px solid var(--line); border-radius:8px; font-size:13px; background:var(--paper-raised); }
.empty{ text-align:center; padding:60px 20px; color:var(--ink-soft); }
.empty h3{ font-family:var(--font-display); color:var(--ink); font-weight:600; margin-bottom:6px; }
.modal-bg{ position:fixed; inset:0; background:rgba(23,40,36,0.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
.modal{ background:var(--paper-raised); border-radius:12px; width:100%; max-width:520px; max-height:88vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
.modal-head{ padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
.modal-head h3{ margin:0; font-family:var(--font-display); font-size:16px; }
.modal-body{ padding:20px 22px; display:flex; flex-direction:column; gap:14px; }
.field label{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:5px; }
.field input[type=text], .field input[type=password], .field select, .field textarea{ width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-family:inherit; font-size:13.5px; }
.field textarea{ min-height:80px; resize:vertical; }
.modal-foot{ padding:16px 22px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px; }
.toast{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:11px 18px; border-radius:8px; font-size:13px; opacity:0; pointer-events:none; transition:all .25s ease; z-index:60; }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.chart-wrap{ padding:18px; margin-bottom:16px; }
.chart-canvas-box{ height:280px; }
#newUserName, #newUserUsername, #newUserPass{ padding:9px 10px; border:1px solid var(--line); border-radius:8px; font-size:13.5px; }
.admin-only, .admin-only-inline{ display:none; }
body.role-admin .admin-only{ display:inline-flex; }
body.role-admin .admin-only-inline{ display:inline-block; }
body.role-admin .nav-item.admin-only{ display:flex; }

@media (max-width:820px){
  .sidebar{ position:fixed; z-index:30; height:100%; }
  .sidebar:not(.collapsed){ width:220px; }
}