:root{
    --bg: #f3f4f7;
    --bg-2: #ffffff;
    --card: #ffffff;
    --line: #1c2130;
    --line-dim: #6b7280;
    --border: #e4e6eb;
    --yellow: #f5a300;
    --yellow-soft: #fff4de;
    --blue: #2f5fdb;
    --blue-soft: #eaf0ff;
    --red: #d9463c;
    --red-soft: #fdeceb;
    --green: #1a9564;
    --green-soft: #e7f8f0;
    --disp: 'Oswald', sans-serif;
    --body: 'Inter', sans-serif;
    --mono: 'JetBrains Mono', monospace;
    --radius: 14px;
    --shadow: 0 8px 24px rgba(20,25,40,.08);
    --shadow-sm: 0 2px 8px rgba(20,25,40,.06);
    --img-pad-bg: #ffffff;
    --input-bg: #fbfbfc;
  }
  [data-theme="dark"]{
    --bg: #16181b;
    --bg-2: #1f2226;
    --card: #1f2226;
    --line: #f0f1f4;
    --line-dim: #9aa0aa;
    --border: #33373d;
    --yellow: #f5a300;
    --yellow-soft: #3a2c10;
    --blue: #5b84e8;
    --blue-soft: #1c2740;
    --red: #e2685f;
    --red-soft: #3a1e1c;
    --green: #3fbb84;
    --green-soft: #163326;
    --shadow: 0 8px 24px rgba(0,0,0,.4);
    --shadow-sm: 0 2px 8px rgba(0,0,0,.3);
    --img-pad-bg: #f4f4f4;
    --input-bg: #15171a;
  }
  [data-theme="dark"] body{
    background: radial-gradient(ellipse 900px 500px at 50% -10%, #20242a 0%, var(--bg) 60%);
  }
  [data-theme="dark"] select{
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%239aa0aa' stroke-width='2' fill='none'/></svg>");
  }
  [data-theme="dark"] .q-image-wrap img, [data-theme="dark"] .q-item .thumb{
    background:var(--img-pad-bg);
  }
  .theme-toggle{
    display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
    border-radius:10px; border:1px solid var(--border); background:var(--card); color:var(--line);
    cursor:pointer; font-size:17px; transition:.15s; box-shadow:var(--shadow-sm);
  }
  .theme-toggle:hover{border-color:var(--blue);}

  /* ---- Auth screen ---- */
  .auth-main{max-width:400px; margin:0 auto; padding:24px 18px 60px; position:relative; z-index:1;}
  .auth-card{
    background:var(--card); border:1px solid var(--border); border-radius:22px;
    padding:34px 28px 30px; box-shadow:0 24px 60px -12px rgba(20,25,40,.22), 0 4px 14px rgba(20,25,40,.06);
    text-align:left; position:relative; animation:authIn .45s cubic-bezier(.2,.8,.3,1); overflow:hidden;
  }
  [data-theme="dark"] .auth-card{ box-shadow:0 24px 60px -12px rgba(0,0,0,.6), 0 4px 14px rgba(0,0,0,.3); }
  .auth-card::before{
    content:""; position:absolute; top:0; left:0; right:0; height:5px;
    background:linear-gradient(90deg, var(--yellow), var(--blue), var(--green));
  }
  @keyframes authIn{ from{opacity:0; transform:translateY(16px) scale(.97);} to{opacity:1; transform:none;} }
  .auth-avatar{
    width:64px; height:64px; border-radius:19px; margin:2px auto 22px; display:flex;
    align-items:center; justify-content:center; font-size:30px;
    background:linear-gradient(150deg, var(--yellow), #ffcf4d); box-shadow:0 10px 24px rgba(233,175,26,.4);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1);
  }
  .auth-card:hover .auth-avatar{ transform:rotate(-8deg) scale(1.06); }
  .auth-tabs{
    display:flex; background:var(--bg); border:1px solid var(--border); border-radius:13px;
    padding:5px; margin-bottom:24px; gap:4px; position:relative;
  }
  .auth-tab{
    flex:1; border:none; background:transparent; padding:11px 8px; border-radius:10px; cursor:pointer;
    font-family:var(--disp); text-transform:uppercase; letter-spacing:.4px; font-size:12.5px;
    color:var(--line-dim); transition:color .2s; position:relative; z-index:1;
  }
  .auth-tab.active{color:var(--line);}
  .auth-tabs::before{
    content:""; position:absolute; top:5px; left:5px; width:calc(50% - 5px); height:calc(100% - 10px);
    background:var(--card); border-radius:9px; box-shadow:var(--shadow-sm);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
  }
  .auth-tabs.mode-register::before{ transform:translateX(100%); }
  .auth-card label{margin:16px 0 8px;}
  .auth-card input[type=email], .auth-card input[type=password], .auth-card input[type=text]{
    padding:13px 13px 13px 40px; border-radius:11px; background:var(--input-bg);
  }
  .auth-field{position:relative;}
  .auth-field input{padding-left:40px !important;}
  .auth-field .field-ico{
    position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:14px; opacity:.55; pointer-events:none;
  }
  .auth-field.pw input{padding-right:42px !important;}
  .pw-toggle{
    position:absolute; right:6px; top:50%; transform:translateY(-50%); background:none; border:none; box-shadow:none;
    cursor:pointer; font-size:15px; padding:8px; color:var(--line-dim); line-height:1; border-radius:8px; transition:.15s;
  }
  .pw-toggle:hover{color:var(--line); background:var(--bg);}
  .auth-submit-btn{
    width:100%; justify-content:center; margin-top:22px; padding:15px 20px; font-size:14.5px; letter-spacing:.4px;
    background:linear-gradient(135deg, var(--yellow), #f0930b); box-shadow:0 10px 22px rgba(245,163,0,.35);
  }
  .auth-submit-btn:hover{ box-shadow:0 12px 26px rgba(245,163,0,.45); }
  .auth-submit-btn:disabled{opacity:.65; cursor:default; transform:none; box-shadow:none;}
  .link-btn{
    background:none; border:none; box-shadow:none; padding:2px 4px; color:var(--blue);
    font-family:var(--body); font-size:12.5px; text-decoration:underline; cursor:pointer; transition:color .15s;
  }
  .link-btn:hover{color:var(--yellow);}
  .auth-guest-btn{width:100%; justify-content:center;}
  .auth-msg{border-radius:11px; padding:11px 14px; font-size:12.5px; margin-top:12px; display:none; animation:authIn .25s ease; line-height:1.5;}
  .auth-msg.show{display:block;}
  .auth-msg.err{background:var(--red-soft); color:var(--red);}
  .auth-msg.ok{background:var(--green-soft); color:var(--green);}
  .pw-strength{height:4px; border-radius:2px; background:var(--border); margin-top:8px; overflow:hidden; display:none;}
  .pw-strength.show{display:block;}
  .pw-strength-bar{height:100%; width:0%; border-radius:2px; transition:width .2s, background-color .2s; background:var(--red);}
  .pw-strength-label{font-size:11px; color:var(--line-dim); margin-top:4px; display:none;}
  .pw-strength-label.show{display:block;}
  *{box-sizing:border-box;}
  body{
    transition: background-color .2s, color .2s;
    margin:0; background:var(--bg); color:var(--line);
    font-family:var(--body); min-height:100vh; -webkit-font-smoothing:antialiased;
  }
  ::selection{background:var(--yellow); color:#fff;}
  ::-webkit-scrollbar{width:10px; height:10px;}
  ::-webkit-scrollbar-thumb{background:#d3d6dc; border-radius:6px;}
  [data-theme="dark"] ::-webkit-scrollbar-thumb{background:#3a3e44;}

  body.auth-bg{
    background:
      radial-gradient(560px 420px at 8% -8%, rgba(245,163,0,.16), transparent 60%),
      radial-gradient(620px 460px at 105% 10%, rgba(47,95,219,.14), transparent 60%),
      radial-gradient(520px 420px at 50% 115%, rgba(26,149,100,.12), transparent 60%),
      var(--bg);
    min-height:100vh;
  }
  [data-theme="dark"] body.auth-bg{
    background:
      radial-gradient(560px 420px at 8% -8%, rgba(245,163,0,.10), transparent 60%),
      radial-gradient(620px 460px at 105% 10%, rgba(91,132,232,.14), transparent 60%),
      radial-gradient(520px 420px at 50% 115%, rgba(63,187,132,.10), transparent 60%),
      var(--bg);
  }
  .road.compact{padding:22px 20px 18px;}
  .road.compact h1{font-size:22px;}
  .road.compact h1 .sign-ico{width:30px; height:30px; font-size:15px;}

  .road{
    position:relative; padding:30px 20px 22px; background:var(--bg-2);
    border-bottom:1px solid var(--border); overflow:hidden;
  }
  .road::before{
    content:""; position:absolute; left:0; right:0; top:50%; height:4px; transform:translateY(-50%);
    background-image: repeating-linear-gradient(90deg, var(--yellow) 0 34px, transparent 34px 60px);
    opacity:.35;
  }
  .road-inner{position:relative; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; max-width:960px; margin:0 auto;}
  h1{
    font-family:var(--disp); font-weight:700; letter-spacing:.3px; font-size:27px; margin:0;
    text-transform:uppercase; display:flex; align-items:center; gap:10px; color:var(--line);
  }
  h1 .sign-ico{
    display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
    background:var(--yellow); color:#fff; border-radius:10px; font-size:18px; transform:rotate(-4deg);
    box-shadow:var(--shadow-sm);
  }
  h1 span{color:var(--yellow);}
  .subtitle{font-size:12.5px; color:var(--line-dim); margin-top:5px; font-family:var(--mono); letter-spacing:.2px;}
  #statHeader{background:var(--bg); padding:9px 16px; border-radius:20px; border:1px solid var(--border); color:var(--line-dim);}

  nav{
    display:flex; gap:6px; background:var(--bg-2); padding:8px; justify-content:center;
    border-bottom:1px solid var(--border); flex-wrap:wrap; position:sticky; top:0; z-index:10;
  }
  .tab{
    font-family:var(--disp); text-transform:uppercase; letter-spacing:.4px; font-size:13.5px;
    background:transparent; border:none; color:var(--line-dim);
    padding:10px 20px; border-radius:9px; cursor:pointer; transition:.15s;
  }
  .tab:hover{color:var(--line); background:var(--bg);}
  .tab.active{color:#fff; background:var(--blue); box-shadow:var(--shadow-sm);}
  main{max-width:920px; margin:0 auto; padding:28px 18px 70px;}
  .view{display:none; animation:fadein .25s ease;}
  .view.active{display:block;}
  @keyframes fadein{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

  .card{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px;
    margin-bottom:18px; box-shadow:var(--shadow-sm);
  }
  .sign-card{
    background:var(--card); border:2px solid var(--yellow); border-radius:16px; padding:28px;
    position:relative; box-shadow:var(--shadow);
  }
  .sign-card::before{
    content:"OTÁZKA"; position:absolute; top:-12px; left:22px; background:var(--yellow); color:#fff;
    font-family:var(--disp); font-size:11px; font-weight:700; letter-spacing:1.5px; padding:3px 12px; border-radius:5px;
    box-shadow:var(--shadow-sm);
  }
  label{display:block; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px; color:var(--line-dim); margin:16px 0 7px; font-family:var(--disp);}
  label:first-child{margin-top:0;}
  input[type=text], input[type=email], input[type=password], input[type=number], select, textarea{
    width:100%; background:var(--input-bg); border:1.5px solid var(--border); color:var(--line); padding:11px 13px;
    border-radius:9px; font-family:var(--body); font-size:14.5px; transition:.15s;
  }
  select{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%236b7280' stroke-width='2' fill='none'/></svg>"); background-repeat:no-repeat; background-position:right 13px center; padding-right:34px;}
  textarea{resize:vertical; font-family:var(--mono); font-size:12.5px;}
  input:hover, select:hover, textarea:hover{border-color:var(--line-dim);}
  input:focus, select:focus, textarea:focus, button:focus-visible{outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-soft);}
  /* Prehliadače (najmä Chrome/Safari) pri automatickom vyplnení vnucujú vlastné
     svetlé pozadie s tmavým textom bez ohľadu na CSS vyššie -- prepíš to späť. */
  input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus{
    -webkit-text-fill-color:var(--line);
    -webkit-box-shadow:0 0 0 1000px var(--input-bg) inset;
    box-shadow:0 0 0 1000px var(--input-bg) inset;
    transition:background-color 5000s ease-in-out 0s;
  }
  .btn{
    font-family:var(--disp); text-transform:uppercase; letter-spacing:.5px; font-size:13.5px; font-weight:600;
    background:var(--blue); color:#fff; border:none; padding:12px 20px; border-radius:10px; cursor:pointer;
    transition:.15s; display:inline-flex; align-items:center; gap:6px; box-shadow:var(--shadow-sm);
  }
  .btn:hover{filter:brightness(1.08); transform:translateY(-1px); box-shadow:var(--shadow);}
  .btn:active{transform:translateY(0);}
  .btn.yellow{background:var(--yellow); color:#fff;}
  .btn.ghost{background:var(--card); border:1.5px solid var(--border); color:var(--line-dim); box-shadow:none;}
  .btn.ghost:hover{border-color:var(--blue); color:var(--blue); box-shadow:none;}
  .btn.danger{background:var(--red);}
  .btn.small{padding:7px 12px; font-size:11.5px; border-radius:7px;}
  .row{display:flex; gap:10px; flex-wrap:wrap;}
  .opt-row{display:flex; gap:8px; align-items:center; margin-bottom:8px;}
  .opt-row input[type=text]{flex:1;}

  .q-item{
    background:var(--card); border:1px solid var(--border); border-left:4px solid var(--blue); border-radius:11px;
    padding:15px 17px; margin-bottom:11px; transition:.15s; box-shadow:var(--shadow-sm);
  }
  .q-item:hover{border-color:var(--line-dim); box-shadow:var(--shadow);}
  .q-item .cat{font-family:var(--mono); font-size:11px; color:var(--yellow); text-transform:uppercase; letter-spacing:.3px; font-weight:700;}
  .q-item .txt{margin:5px 0 9px; font-size:14.5px; line-height:1.45; color:var(--line);}
  .q-item ul{margin:0; padding-left:18px; font-size:13px; color:var(--line-dim); line-height:1.6;}
  .q-item .correct{color:var(--green); font-weight:600;}
  .q-item .thumb{height:46px; width:auto; border-radius:6px; background:#fff; padding:3px; margin-right:9px; vertical-align:middle; float:left; box-shadow:var(--shadow-sm); border:1px solid var(--border);}

  .q-image-wrap{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:18px;}
  .q-image-wrap img{max-height:320px; max-width:100%; background:#fff; border-radius:12px; padding:10px; border:2px solid var(--yellow); box-shadow:var(--shadow-sm);}
  .q-image-wrap img.sign-img{max-height:190px; max-width:230px;}

  .progress-wrap{position:relative; height:30px; margin-bottom:24px;}
  .progress-track{
    position:absolute; top:12px; left:0; right:0; height:6px; border-radius:3px;
    background:var(--border);
  }
  .progress-fill{position:absolute; top:12px; left:0; height:6px; border-radius:3px; background:var(--yellow); transition:width .25s;}
  .car{position:absolute; top:-5px; transform:translateX(-50%); transition:left .25s; font-size:21px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));}
  .progress-label{font-family:var(--mono); font-size:12px; color:var(--line-dim); margin-bottom:7px; letter-spacing:.3px;}

  .option-btn{
    display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--input-bg); border:1.5px solid var(--border); color:var(--line);
    padding:14px 16px; border-radius:11px; margin-bottom:9px; cursor:pointer; font-size:14.5px; font-family:var(--body);
    transition:.12s;
  }
  .option-btn::before{
    content:""; flex:0 0 9px; width:9px; height:9px; border-radius:50%; border:2px solid var(--line-dim); transition:.12s;
  }
  .option-btn:hover{border-color:var(--blue); background:var(--blue-soft);}
  .option-btn:hover::before{border-color:var(--blue);}
  .option-btn.selected{border-color:var(--blue); background:var(--blue-soft);}
  .option-btn.selected::before{background:var(--blue); border-color:var(--blue);}
  .option-btn.correct{border-color:var(--green); background:var(--green-soft);}
  .option-btn.correct::before{background:var(--green); border-color:var(--green);}
  .option-btn.wrong{border-color:var(--red); background:var(--red-soft);}
  .option-btn.wrong::before{background:var(--red); border-color:var(--red);}
  .option-btn:disabled{cursor:default;}

  .score-big{font-family:var(--disp); font-size:56px; font-weight:700; text-align:center; margin:6px 0;}
  .score-big.pass{color:var(--green);}
  .score-big.fail{color:var(--red);}
  .center{text-align:center;}
  .dash-divider{height:1px; margin:24px 0; background:var(--border);}
  .muted{color:var(--line-dim); font-size:13px;}
  .hist-item{display:flex; justify-content:space-between; align-items:center; padding:13px 15px; background:var(--card); border-radius:11px; margin-bottom:9px; border-left:4px solid var(--blue); box-shadow:var(--shadow-sm); transition:.15s;}
  .hist-item:hover{box-shadow:var(--shadow);}
  .hist-item.pass{border-left-color:var(--green);}
  .hist-item.fail{border-left-color:var(--red);}
  .pill{font-family:var(--mono); font-size:12px; padding:4px 10px; border-radius:20px; background:var(--bg); color:var(--line-dim); border:1px solid var(--border);}
  .empty{text-align:center; padding:46px 20px; color:var(--line-dim);}
  .empty .big{font-size:36px; margin-bottom:10px;}
  .toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%); background:var(--line); color:#fff;
    padding:11px 22px; border-radius:10px; font-family:var(--disp); font-size:13px; font-weight:600; box-shadow:0 8px 24px rgba(20,25,40,.25);
    opacity:0; pointer-events:none; transition:.25s; letter-spacing:.3px;}
  .toast.show{opacity:1; transform:translateX(-50%) translateY(-8px);}
  select#filterCat, select#testCat{max-width:260px;}
  select#filterGroup, select#testGroup{max-width:200px;}

  .dropzone{
    border:2px dashed var(--border); border-radius:12px; padding:22px; text-align:center; cursor:pointer;
    transition:.15s; background:var(--input-bg);
  }
  .dropzone:hover, .dropzone.drag{border-color:var(--blue); background:var(--blue-soft);}
  .dropzone input[type=file]{display:none;}
  .dropzone .dz-title{font-family:var(--disp); text-transform:uppercase; letter-spacing:.4px; font-size:13.5px; color:var(--line);}
  .dropzone .dz-sub{font-size:12px; color:var(--line-dim); margin-top:4px;}
  .seed-banner{
    display:flex; align-items:center; gap:12px; background:var(--green-soft); border:1px solid #b9e8d3; color:#0e6b47;
    padding:12px 16px; border-radius:11px; margin-bottom:16px; font-size:13px;
  }

/* ---- Multi-page layout additions ---- */
.page-nav{display:flex; gap:6px; background:var(--bg-2); padding:8px; justify-content:center; border-bottom:1px solid var(--border); flex-wrap:wrap; position:sticky; top:0; z-index:10;}
.page-nav a{
  font-family:var(--disp); text-transform:uppercase; letter-spacing:.4px; font-size:13.5px; text-decoration:none;
  color:var(--line-dim); padding:10px 18px; border-radius:9px; transition:.15s;
}
.page-nav a:hover{color:var(--line); background:var(--bg);}
.page-nav a.active{color:#fff; background:var(--blue); box-shadow:var(--shadow-sm);}
.page-main{max-width:920px; margin:0 auto; padding:28px 18px 70px;}
.page-main.narrow{max-width:460px;}
table.data-table{width:100%; border-collapse:collapse; font-size:13.5px;}
table.data-table th{text-align:left; font-family:var(--disp); text-transform:uppercase; font-size:11px; letter-spacing:.3px; color:var(--line-dim); padding:8px 10px; border-bottom:1px solid var(--border);}
table.data-table td{padding:10px; border-bottom:1px solid var(--border); vertical-align:middle;}
table.data-table tr:last-child td{border-bottom:none;}
.flash{border-radius:11px; padding:12px 16px; margin-bottom:16px; font-size:13.5px;}
.flash.ok{background:var(--green-soft); color:var(--green);}
.flash.err{background:var(--red-soft); color:var(--red);}
.breadcrumb{font-size:12px; color:var(--line-dim); margin-bottom:14px;}
.breadcrumb a{color:var(--blue); text-decoration:none;}