:root{
    --bg:#ffffff; --bg2:#f6f6fb; --bd:#e7e7f0;
    --tx:#181826; --tx2:#6c6c82; --brand:#22549F; --brand2:#1A4585;
    --c0:#e24b4a; --c1:#378add; --c2:#f0992b; --c3:#1d9e75;
  }
  @media (prefers-color-scheme:dark){
    :root{ --bg:#141420; --bg2:#1d1d2b; --bd:#2c2c3e; --tx:#f0f0f6; --tx2:#9a9ab2; }
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
    background:var(--bg); color:var(--tx); min-height:100vh; -webkit-font-smoothing:antialiased;}

  /* Dekorasi pojok — cuma tampil di layar desktop (>=1024px), fixed di
     pojok kiri-bawah & kanan-bawah, transparansi 70%, ukuran sedang,
     pointer-events:none supaya tidak menghalangi klik tombol di tengah. */
  @media (min-width:1024px){
    body::before,
    body::after{
      content:"";
      position:fixed;
      bottom:0;
      width:clamp(340px, 39.8vw, 620px);
      height:clamp(240px, 28.1vw, 437px);
      background-image:url('assets/corner-wave.png');
      background-size:contain;
      background-repeat:no-repeat;
      background-position:bottom;
      opacity:.7;
      pointer-events:none;
      z-index:0;
    }
    body::after{
      right:0;
      background-position:bottom right;
    }
    body::before{
      left:0;
      transform:scaleX(-1);
      background-position:bottom right;
    }
  }
  .wrap{position:relative;z-index:1}
  .wrap{max-width:920px;margin:0 auto;padding:24px 20px 80px}
  header{height:62px;display:flex;align-items:center;gap:10px;padding:0 20px;
    border-bottom:1px solid var(--bd);position:sticky;top:0;background:var(--bg);z-index:50;
    justify-content:space-between;}
  .logo{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:600;cursor:pointer;user-select:none}
  .logo .mark{width:32px;height:32px;border-radius:9px;background:var(--brand);color:#fff;
    display:grid;place-items:center;font-weight:800;font-size:17px}
  .admin-tag{font-size:12px;font-weight:700;background:var(--brand);color:#fff;padding:5px 10px;
    border-radius:99px;letter-spacing:.5px}
  h1{font-size:46px;font-weight:800;line-height:1.06;margin:0 0 16px}
  h2{font-size:28px;font-weight:800;margin:0}
  p.sub{font-size:17px;color:var(--tx2);line-height:1.6;margin:0 0 28px}

  button{font-family:inherit;cursor:pointer;border:none;transition:.15s;font-weight:700}
  button:disabled{opacity:.5;cursor:not-allowed}
  .btn{background:var(--brand);color:#fff;font-size:16px;padding:13px 26px;border-radius:12px}
  .btn:hover:not(:disabled){background:var(--brand2);transform:translateY(-1px)}
  .btn:active{transform:scale(.98)}
  .btn-ghost{background:var(--bg2);color:var(--tx);font-size:16px;padding:13px 26px;
    border-radius:12px;border:1px solid var(--bd)}
  .btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
  .btn-green{background:#1d9e75;color:#fff;font-size:16px;padding:11px 20px;border-radius:10px}
  .btn-green:hover:not(:disabled){background:#188562;transform:translateY(-1px)}
  .btn-red{background:transparent;color:var(--c0);font-size:14px;padding:9px 16px;border-radius:10px;
    border:1.5px solid var(--bd);font-weight:700}
  .btn-red:hover{border-color:var(--c0);background:var(--c0);color:#fff}
  .btn-back{background:none;color:var(--tx2);font-size:15px;font-weight:600;padding:8px 4px}
  .btn-back:hover{color:var(--tx)}
  .btn-add{background:var(--bg2);color:var(--brand);border:2px dashed var(--bd);font-size:16px;
    padding:16px;border-radius:14px;width:100%}
  .btn-add:hover{border-color:var(--brand)}
  .btn-icon{background:none;font-size:18px;padding:4px 8px;border-radius:8px}
  .btn-icon:hover{background:var(--bd)}

  input,textarea,select{font-family:inherit;color:var(--tx);background:var(--bg);
    border:1px solid var(--bd);border-radius:12px;outline:none}
  input:focus,textarea:focus{border-color:var(--brand)}

  .hero{text-align:center;padding-top:20px;animation:fade .4s ease}
  .badge{display:inline-block;padding:6px 14px;background:var(--bg2);border:1px solid var(--bd);
    border-radius:99px;font-size:13px;color:var(--tx2);margin-bottom:22px}

  /* role choice cards on landing */
  .role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:16px;margin-top:38px;max-width:680px;margin-left:auto;margin-right:auto}
  .role-card{background:var(--bg2);border:2px solid var(--bd);border-radius:18px;padding:30px 26px;
    cursor:pointer;text-align:left;transition:.18s;display:flex;flex-direction:column;gap:8px}
  .role-card:hover{border-color:var(--brand);transform:translateY(-2px)}
  .role-card .ic{font-size:34px;margin-bottom:6px}
  .role-card .t{font-size:20px;font-weight:800}
  .role-card .d{font-size:14px;color:var(--tx2);line-height:1.5}
  .role-card .arrow{color:var(--brand);font-weight:700;margin-top:8px;font-size:14px}

  .builder{display:flex;flex-direction:column;gap:16px;animation:fade .4s ease}
  .builder-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
  .title-input{font-size:25px;font-weight:700;padding:14px 18px;background:var(--bg2)}

  .mode-bar{display:flex;gap:0;background:var(--bg2);border:1px solid var(--bd);
    border-radius:14px;padding:5px;width:100%}
  .mode-opt{flex:1;text-align:center;padding:14px 12px;border-radius:10px;cursor:pointer;
    transition:.15s;color:var(--tx2);font-weight:700}
  .mode-opt.active{background:var(--brand);color:#fff}
  .mode-opt .small{display:block;font-size:12px;font-weight:500;margin-top:3px;opacity:.85}
  .mode-note{font-size:13px;color:var(--tx2);line-height:1.5;background:var(--bg2);
    border:1px solid var(--bd);border-radius:12px;padding:12px 16px}

  .qcard{background:var(--bg2);border:1px solid var(--bd);border-radius:18px;padding:22px}
  .qcard-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
  .qnum{font-size:14px;font-weight:700;color:var(--brand);letter-spacing:.3px}
  .qcard-actions{display:flex;align-items:center;gap:10px}
  .time-label{display:flex;align-items:center;gap:5px;font-size:14px;color:var(--tx2)}
  .time-label select{padding:5px 7px;border-radius:8px}
  .qtext{width:100%;font-size:18px;font-weight:600;padding:12px 14px;resize:vertical;margin-bottom:14px}
  .opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
  .opt-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:2px solid var(--bd);
    border-radius:12px;background:var(--bg);transition:.15s}
  .opt-row .shape{font-size:18px}
  .opt-row input{flex:1;border:none;background:transparent;font-size:15px;min-width:0;padding:6px 0}
  .btn-correct{font-size:13px;padding:7px 12px;border-radius:8px;border:1.5px solid var(--bd);
    background:transparent;color:var(--tx2);white-space:nowrap}
  .hint{font-size:14px;color:var(--c0);text-align:center;margin:0}

  .center-col{display:flex;flex-direction:column;align-items:center;gap:20px;min-height:440px;animation:fade .4s ease}
  .lobby-card{width:100%;background:var(--bg2);border:1px solid var(--bd);border-radius:24px;
    padding:36px 28px;text-align:center}
  .mode-pill{display:inline-block;font-size:12px;font-weight:700;padding:4px 12px;border-radius:99px;
    letter-spacing:.4px}
  .mode-pill.pre{background:#fde9d6;color:#8a5a12}
  .mode-pill.post{background:#dcefe6;color:#0f6e4e}
  .mode-pill.lobby{background:#d6e2f3;color:#1A3D6E}
  .mode-pill.active{background:#fff1d6;color:#8a5a12}
  .mode-pill.ended{background:#e7e7f0;color:#6c6c82}
  @media (prefers-color-scheme:dark){
    .mode-pill.pre{background:#3a2c10;color:#e8b765}
    .mode-pill.post{background:#10331f;color:#6fd0a0}
    .mode-pill.lobby{background:#1A2D52;color:#9BB6E0}
    .mode-pill.active{background:#3a2c10;color:#e8b765}
    .mode-pill.ended{background:#2c2c3e;color:#9a9ab2}
  }
  .lobby-label{font-size:15px;color:var(--tx2);margin-bottom:14px}
  .join-link{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:8px}
  .link-box{font-size:15px;font-weight:600;background:var(--bg);border:1px solid var(--bd);
    border-radius:10px;padding:10px 14px;color:var(--brand);max-width:100%;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .qr{margin:18px auto 6px;width:180px;height:180px;background:#fff;border-radius:14px;padding:10px}
  .qr img{width:100%;height:100%;display:block}
  .pin-big{font-size:40px;font-weight:800;letter-spacing:6px;color:var(--brand);margin:6px 0}
  .lobby-title{font-size:22px;font-weight:700;margin:14px 0 4px}
  .pcount{font-size:15px;color:var(--tx2);margin-bottom:18px}
  .chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
  .chip{background:var(--bg);border:1px solid var(--bd);border-radius:99px;padding:7px 16px;
    font-size:15px;font-weight:600;animation:pop .3s ease}
  .waiting{color:var(--tx2);font-style:italic}
  .host-bar{display:flex;gap:12px;margin-top:6px;flex-wrap:wrap;justify-content:center}
  .qprog{font-size:14px;font-weight:700;color:var(--tx2);letter-spacing:1px}
  .host-q{font-size:32px;font-weight:800;text-align:center;line-height:1.2;margin:0}
  .timer-ring{width:84px;height:84px;border-radius:50%;background:var(--brand);display:grid;place-items:center}
  .timer-ring span{font-size:36px;font-weight:800;color:#fff}
  .answered{font-size:16px;color:var(--tx2);font-weight:600}
  .host-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
  .host-opt{display:flex;align-items:center;gap:12px;padding:20px 22px;border-radius:14px;
    color:#fff;font-size:18px;font-weight:600}
  .host-opt .shape{font-size:22px}

  .barchart{display:flex;gap:16px;align-items:flex-end;width:100%;height:280px;padding:0 10px}
  .barcol{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
  .barwrap{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;overflow:visible}
  .bar{width:72%;border-radius:10px 10px 0 0;position:relative;
    transition:height .6s ease;min-height:4px}
  .bar span{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
    color:var(--fg);font-weight:800;font-size:20px;padding-bottom:6px;white-space:nowrap}
  .barlabel{margin-top:10px;font-size:15px;text-align:center}

  .board{width:100%;display:flex;flex-direction:column;gap:8px}
  .board-row{display:flex;align-items:center;gap:14px;background:var(--bg2);border:1px solid var(--bd);
    border-radius:12px;padding:12px 18px;animation:slideIn .4s ease backwards}
  .board-row .rank{font-size:18px;font-weight:800;color:var(--brand);width:26px}
  .board-row .name{flex:1;font-size:17px;font-weight:600}
  .board-row .score{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
  .board-row:nth-child(1){animation-delay:.05s}.board-row:nth-child(2){animation-delay:.1s}
  .board-row:nth-child(3){animation-delay:.15s}.board-row:nth-child(4){animation-delay:.2s}
  .board-row:nth-child(5){animation-delay:.25s}.board-row:nth-child(6){animation-delay:.3s}

  .podium{display:flex;align-items:flex-end;gap:16px;width:100%;max-width:520px;height:220px}
  .podium-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
  .podium-medal{font-size:30px}
  .podium-name{font-size:15px;font-weight:700;margin-bottom:8px;text-align:center}
  .podium-bar{width:100%;border-radius:10px 10px 0 0;display:flex;align-items:flex-start;
    justify-content:center;padding-top:12px;animation:grow .6s ease}
  .podium-bar span{color:#fff;font-weight:800;font-size:20px}

  .join-wrap{display:flex;flex-direction:column;gap:16px;max-width:420px;margin:0 auto;animation:fade .4s ease}
  .join-card{background:var(--bg2);border:1px solid var(--bd);border-radius:22px;padding:30px}
  .name-input{width:100%;font-size:20px;font-weight:600;padding:14px 16px;border-width:2px;margin-bottom:16px}
  .pin-input{width:100%;font-size:38px;font-weight:800;letter-spacing:10px;text-align:center;
    padding:16px 0;border-width:2px;margin-bottom:16px;font-variant-numeric:tabular-nums}
  .code-input{width:100%;font-size:30px;font-weight:800;letter-spacing:8px;text-align:center;
    padding:16px 0;border-width:2px;margin-bottom:16px;font-variant-numeric:tabular-nums}
  .err{color:var(--c0);font-size:14px;margin-bottom:14px;font-weight:600}
  .pstatus{display:flex;justify-content:space-between;align-items:center;background:var(--bg2);
    border:1px solid var(--bd);border-radius:12px;padding:10px 16px}
  .pstatus .nm{font-weight:700;font-size:16px}
  .pstatus .sc{font-weight:800;font-size:16px;color:var(--brand);font-variant-numeric:tabular-nums}
  .pcenter{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:12px;text-align:center}
  .pbig{font-size:25px;font-weight:800;margin:0}
  .pmuted{color:var(--tx2);font-size:16px;margin:0}
  .pq{font-size:21px;font-weight:700;text-align:center;padding:12px 0}
  .pgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:1}
  .ans-btn{border-radius:16px;color:#fff;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:8px;padding:24px 12px;min-height:108px;transition:transform .1s}
  .ans-btn:hover{transform:scale(1.03)}.ans-btn:active{transform:scale(.96)}
  .ans-btn .shape{font-size:28px}.ans-btn .txt{font-size:16px}
  .presult{flex:1;border-radius:24px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:8px;color:#fff}
  .presult .ic{font-size:70px;font-weight:800}
  .presult .t{font-size:28px;font-weight:800}
  .presult .g{font-size:22px;font-weight:700}
  .pfinal{font-size:38px;font-weight:800;color:var(--brand)}
  .prankbig{font-size:68px;font-weight:800;color:var(--brand)}

  .play-wrap{display:flex;flex-direction:column;gap:18px;min-height:440px;animation:fade .4s ease}
  .spinner{width:44px;height:44px;border:4px solid var(--bd);border-top-color:var(--brand);
    border-radius:50%;animation:spin 1s linear infinite}
  .loading{display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-height:380px;gap:14px;color:var(--tx2)}
  .toast{position:relative;font-size:14px;color:#0f6e4e;font-weight:600;margin-top:4px}

  /* admin dashboard */
  .admin-wrap{display:flex;flex-direction:column;gap:20px;animation:fade .4s ease}
  .admin-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
  .section-title{font-size:14px;font-weight:700;color:var(--tx2);letter-spacing:1px;
    text-transform:uppercase;margin:8px 0 -4px}
  .quiz-list{display:flex;flex-direction:column;gap:10px}
  .quiz-card{background:var(--bg2);border:1px solid var(--bd);border-radius:14px;padding:18px 20px;
    display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center}
  .quiz-card .info{min-width:0}
  .quiz-card .pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
  .quiz-card .title{font-size:17px;font-weight:700;margin-bottom:4px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .quiz-card .meta{font-size:13px;color:var(--tx2)}
  .quiz-card .actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .empty-state{text-align:center;padding:40px 20px;color:var(--tx2);background:var(--bg2);
    border:1px dashed var(--bd);border-radius:14px}
  .empty-state .ic{font-size:38px;margin-bottom:8px;opacity:.5}

  /* clickable info pada quiz card */
  .quiz-card .info.clickable{cursor:pointer;border-radius:10px;padding:6px 10px;margin:-6px -10px;
    transition:.15s;outline:none}
  .quiz-card .info.clickable:hover{background:rgba(34,84,159,.06)}
  .quiz-card .info.clickable:focus-visible{box-shadow:0 0 0 2px var(--brand) inset}
  .quiz-card .meta-hint{font-size:12px;color:var(--brand);font-weight:700;margin-top:6px;opacity:0;
    transition:.15s}
  .quiz-card .info.clickable:hover .meta-hint,
  .quiz-card .info.clickable:focus-visible .meta-hint{opacity:1}

  /* analytics page */
  .analytics{display:flex;flex-direction:column;gap:18px;animation:fade .4s ease}
  .ana-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
  .ana-title{font-size:26px;font-weight:800;margin:0}
  .ana-meta{font-size:14px;color:var(--tx2);margin-top:4px}
  .ana-tools{display:flex;gap:8px;flex-wrap:wrap}
  .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
  .kpi{background:var(--bg2);border:1px solid var(--bd);border-radius:14px;padding:18px 20px}
  .kpi .lbl{font-size:13px;color:var(--tx2);font-weight:600;margin-bottom:6px}
  .kpi .val{font-size:30px;font-weight:800;color:var(--brand);font-variant-numeric:tabular-nums}
  .kpi .sub{font-size:12px;color:var(--tx2);margin-top:2px}
  .ana-section{background:var(--bg2);border:1px solid var(--bd);border-radius:16px;padding:22px}
  .ana-section h3{margin:0 0 16px;font-size:18px;font-weight:800}
  .qa-item{padding:14px 0;border-bottom:1px solid var(--bd)}
  .qa-item:last-child{border-bottom:none}
  .qa-q{font-size:15px;font-weight:700;margin-bottom:10px;display:flex;gap:8px;align-items:flex-start}
  .qa-q .qn{color:var(--brand);flex-shrink:0}
  .qa-q .pct{margin-left:auto;font-size:14px;font-weight:800;padding:3px 10px;border-radius:99px;
    background:var(--bg);color:var(--tx2);flex-shrink:0}
  .qa-q .pct.high{background:#dcefe6;color:#0f6e4e}
  .qa-q .pct.low{background:#fbe0e0;color:#a13030}
  @media (prefers-color-scheme:dark){
    .qa-q .pct.high{background:#10331f;color:#6fd0a0}
    .qa-q .pct.low{background:#3a1818;color:#e8a0a0}
  }
  .qa-opts{display:flex;flex-direction:column;gap:6px}
  .qa-opt{display:flex;align-items:center;gap:10px;font-size:14px}
  .qa-opt .lbl{flex:1;display:flex;align-items:center;gap:8px;min-width:0}
  .qa-opt .lbl .sh{font-size:14px;flex-shrink:0}
  .qa-opt .lbl .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .qa-opt .lbl .tick{color:#1d9e75;font-weight:800;flex-shrink:0}
  .qa-opt .barwrap{flex:2;background:var(--bg);border-radius:6px;height:22px;overflow:hidden;position:relative}
  .qa-opt .barfill{height:100%;border-radius:6px;transition:width .6s ease}
  .qa-opt .cnt{font-size:13px;font-weight:700;color:var(--tx2);font-variant-numeric:tabular-nums;
    width:60px;text-align:right;flex-shrink:0}
  .player-table{width:100%;border-collapse:collapse;font-size:14px}
  .player-table th{text-align:left;font-weight:700;color:var(--tx2);font-size:12px;letter-spacing:.5px;
    text-transform:uppercase;padding:8px 12px;border-bottom:1px solid var(--bd)}
  .player-table td{padding:10px 12px;border-bottom:1px solid var(--bd)}
  .player-table tr:last-child td{border-bottom:none}
  .player-table .rk{font-weight:800;color:var(--brand);width:40px}
  .player-table .nm{font-weight:600}
  .player-table .sc{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
  .player-table .ok{color:#1d9e75;font-weight:700}
  .player-table .no{color:var(--c0);font-weight:700}

  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes grow{from{height:0!important}}
  @keyframes slideIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
  @media(max-width:520px){
    h1{font-size:36px}.host-q{font-size:24px}.host-opts{grid-template-columns:1fr}
    .quiz-card{grid-template-columns:1fr}.quiz-card .actions{justify-content:flex-start}
  }