@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&display=swap');

  :root{
    --bg: #0a0b10;
    --bg-2: #12141c;
    --panel: #14161f;
    --panel-2: #1a1d29;
    --line: #262a38;
    --line-soft: #1e212c;
    --text: #f3efe6;
    --muted: #8d90a0;
    --accent: #cda860;
    --accent-2: #e8c98a;
    --accent-deep: #a9823f;
    --accent-dim: rgba(205,168,96,0.12);
    --ok: #5cb98a;
    --ok-dim: rgba(92,185,138,0.12);
    --danger: #d9707a;
    --danger-dim: rgba(217,112,122,0.12);
    --radius: 16px;
    --mono: 'JetBrains Mono', monospace;
    --serif: 'Playfair Display', Georgia, serif;
    --sans: 'Manrope', 'Inter', system-ui, sans-serif;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
    --shadow-md: 0 16px 40px -18px rgba(0,0,0,0.6);
    --shadow-lg: 0 30px 70px -24px rgba(0,0,0,0.75);
    --gold-line: linear-gradient(90deg, transparent, rgba(205,168,96,0.55), transparent);
  }

  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background:
      radial-gradient(1100px 620px at 10% -14%, rgba(205,168,96,0.09), transparent 60%),
      radial-gradient(900px 560px at 108% 4%, rgba(205,168,96,0.05), transparent 55%),
      var(--bg);
    color: var(--text);
    font-family: var(--sans);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
  }

  .app{ max-width: 980px; margin: 0 auto; padding: 30px 20px 68px; }

  /* ---------- Tombol musik & tes suara ---------- */
  .music-toggle{
    position: fixed; top: 16px; right: 16px; z-index: 50;
    display:flex; align-items:center; gap:6px;
    font-family: var(--sans); font-weight:700; font-size: 11.5px; letter-spacing:0.02em;
    color: var(--muted); background: var(--panel); border:1px solid var(--line);
    padding: 8px 12px; border-radius: 999px; box-shadow: var(--shadow-sm);
    cursor:pointer; transition: all .18s ease;
  }
  .music-toggle:hover{ color: var(--text); border-color: var(--accent); }
  .music-toggle.is-on{ color:#14161f; background: linear-gradient(135deg, var(--accent-2), var(--accent-deep)); border-color: transparent; box-shadow: 0 8px 20px -8px rgba(205,168,96,0.55); }
  .music-toggle.needs-tap{ color:#14161f; background: linear-gradient(135deg, var(--ok), #3d8f68); border-color: transparent; animation: musicNeedsTap 1.4s ease-in-out infinite; }
  .music-toggle-icon{ font-size: 14px; line-height:1; }
  @keyframes musicNeedsTap{
    0%, 100%{ box-shadow: 0 0 0 0 rgba(92,185,138,0.55); }
    50%{ box-shadow: 0 0 0 8px rgba(92,185,138,0); }
  }
  @media (max-width: 640px){
    .music-toggle{ top: 10px; right: 10px; padding: 7px 10px; }
    .music-toggle-label{ display:none; }
  }

  /* ---------- Topbar ---------- */
  .topbar{
    display:flex; align-items:flex-end; justify-content:space-between;
    gap:16px; flex-wrap:wrap; margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line-soft);
    position: relative;
  }
  .topbar::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
    background: var(--gold-line);
  }
  .brand .eyebrow{
    font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.24em;
    color: var(--accent); text-transform: uppercase; font-weight:600;
  }
  .brand h1{ margin: 8px 0 0; font-family: var(--serif); font-size: 25px; font-weight:700; letter-spacing:0.005em; color: var(--text); }
  .brand h1 + h1{ font-family: var(--sans); font-size: 14px; font-weight:600; color: var(--accent-2); margin-top: 5px; letter-spacing:0.01em; }
  .tabs{ display:flex; gap:4px; background: var(--panel); padding:5px; border-radius: 12px; border:1px solid var(--line); box-shadow: var(--shadow-sm); }
  .tab{
    font-family: var(--sans); font-weight:700; font-size: 12.5px; letter-spacing:0.02em; color: var(--muted);
    background:transparent; border:none; padding: 10px 17px; border-radius:8px; cursor:pointer;
    transition: all .18s ease;
  }
  .tab:hover{ color: var(--text); }
  .tab.active{ background: linear-gradient(135deg, var(--accent-2), var(--accent-deep)); color: #14161f; box-shadow: 0 8px 20px -8px rgba(205,168,96,0.55); }
  .tab:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

  .view{ display:none; animation: fadein .3s ease; }
  .view.active{ display:block; }
  @keyframes fadein{ from{opacity:0; transform: translateY(6px);} to{opacity:1; transform:none;} }

  /* ---------- Board (signature element) ---------- */
  .board-wrap{ margin-bottom: 18px; }
  .board{
    position:relative; overflow:hidden;
    background: linear-gradient(160deg, #171a24 0%, #101219 60%, #0b0c12 100%);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 28px 28px 24px;
    box-shadow: var(--shadow-lg);
  }
  .board::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
  }
  .board::after{
    content:""; position:absolute; left:0; right:0; top:0; height:1px;
    background: var(--gold-line);
  }
  .board-scan{
    position:absolute; left:-30%; top:0; height:100%; width:30%;
    background: linear-gradient(90deg, transparent, rgba(205,168,96,0.09), transparent);
    animation: scan 6s ease-in-out infinite;
  }
  @keyframes scan{ 0%{ left:-30%; } 50%{ left:100%; } 100%{ left:100%; } }

  .board-label{ font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; color: var(--accent-2); text-transform:uppercase; font-weight:600; }
  .digits{ display:flex; gap:9px; margin: 14px 0 10px; }
  .digit{
    font-family: var(--mono); font-weight:800; font-size: 46px; line-height:1;
    width: 55px; text-align:center; padding: 13px 0;
    background: rgba(255,255,255,0.06); border:1px solid rgba(205,168,96,0.35); border-radius: 10px;
    color: #f0d9a8;
    text-shadow: 0 0 18px rgba(205,168,96,0.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -12px 18px rgba(0,0,0,0.4);
  }
  .digit.dim{ color: #4b4f5e; text-shadow:none; }
  .digit.flash{ animation: flash .5s ease; border-color: var(--accent); }
  @keyframes flash{ 0%{ transform: scale(1.08); box-shadow: 0 0 0 3px rgba(205,168,96,0.4);} 100%{ transform: scale(1); } }

  .board-sub{ font-size: 13px; color: var(--muted); }
  .board.calling{ box-shadow: 0 0 0 1px var(--accent), 0 30px 70px -20px rgba(205,168,96,0.35); }

  /* ---------- Panels ---------- */
  .panel{
    background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
    padding: 23px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
  }
  .panel h2{ margin: 0 0 5px; font-family: var(--serif); font-size: 18px; font-weight:700; letter-spacing:0.003em; color: var(--text); }
  .panel .hint{ font-size: 13.5px; color: var(--muted); margin: 0 0 16px; line-height:1.6; }
  .hidden{ display:none !important; }

  label{ display:block; font-size: 11.5px; color: var(--accent-2); margin-bottom:7px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }
  input[type=text], input[type=password], textarea{
    width:100%; background: var(--bg-2); border:1px solid var(--line); color: var(--text);
    padding: 12px 13px; border-radius: 10px; font-family: var(--sans); font-size:14px;
    margin-bottom: 14px; transition: border-color .15s ease, box-shadow .15s ease;
  }
  textarea{ resize: vertical; min-height: 70px; line-height:1.55; }
  input::placeholder, textarea::placeholder{ color: #5a5e6e; }
  input:focus-visible, textarea:focus-visible{ outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim); }

  .btn{
    font-family: var(--sans); font-weight:700; font-size: 13.5px; letter-spacing:0.01em; cursor:pointer;
    border-radius: 10px; padding: 12px 21px; border: 1px solid transparent;
    transition: transform .1s ease, filter .15s ease, box-shadow .15s ease, background .15s ease;
  }
  .btn:active{ transform: translateY(1px); }
  .btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
  .btn-primary{ background: linear-gradient(135deg, var(--accent-2), var(--accent-deep)); color: #191a20; box-shadow: 0 10px 22px -10px rgba(205,168,96,0.55); }
  .btn-primary:hover{ filter: brightness(1.07); }
  .btn-ghost{ background: var(--panel-2); color: var(--text); border-color: var(--line); }
  .btn-ghost:hover{ background: var(--bg-2); border-color: rgba(205,168,96,0.3); }
  .btn-danger{ background: var(--danger-dim); color: var(--danger); border-color: rgba(217,112,122,0.3); }
  .btn-danger:hover{ background: rgba(217,112,122,0.18); }
  .btn[disabled]{ opacity:.45; cursor:not-allowed; box-shadow:none; }
  .row{ display:flex; gap:10px; flex-wrap:wrap; }

  .badge{ display:inline-block; font-family: var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.06em;
    padding: 5px 10px; border-radius: 999px; text-transform:uppercase; }
  .badge-wait{ background: rgba(255,255,255,0.06); color: var(--muted); }
  .badge-call{ background: var(--accent-dim); color: var(--accent-2); }
  .badge-done{ background: var(--ok-dim); color: var(--ok); }
  .badge-skip{ background: var(--danger-dim); color: var(--danger); }

  .recall-btn{ padding:7px 13px; font-size:12px; }

  .ticket{ text-align:center; }
  .ticket .digits{ justify-content:center; }
  .ticket .digit{ width: 63px; font-size: 54px; background: #12141c; border-color: rgba(205,168,96,0.45); }
  .ticket-name{ font-family: var(--serif); font-size: 17px; font-weight:700; margin-top: 4px; }
  .ticket-nim{ font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
  .ticket-status{ margin: 14px 0 6px; }
  .ticket-pos{ font-size: 13px; color: var(--muted); }

  .callbanner{
    margin-top: 16px; padding: 17px 19px; border-radius: 12px;
    background: var(--accent-dim); border: 1px solid rgba(205,168,96,0.35);
    animation: pulseGlow 1.6s ease-in-out infinite;
  }
  @keyframes pulseGlow{ 0%,100%{ box-shadow: 0 0 0 0 rgba(205,168,96,0.3);} 50%{ box-shadow: 0 0 0 9px rgba(205,168,96,0);} }
  .callbanner strong{ font-family: var(--serif); color: var(--accent-2); font-size:16px; }
  .callbanner p{ margin: 5px 0 0; font-size: 13px; color: var(--text); }
  .meet-link{
    display:inline-flex; align-items:center; gap:8px; margin-top: 13px;
    background: linear-gradient(135deg, var(--accent-2), var(--accent-deep)); color: #191a20; font-weight:800; font-size: 14px;
    padding: 11px 20px; border-radius: 10px; text-decoration:none;
    box-shadow: 0 10px 22px -10px rgba(205,168,96,0.55);
    transition: filter .15s ease;
  }
  .meet-link:hover{ filter: brightness(1.07); }
  .meet-link svg{ width:16px; height:16px; flex-shrink:0; }
  .meet-note{ font-size:12px; color: var(--muted); margin-top:8px; }

  table{ width:100%; border-collapse: collapse; font-size: 13.5px; }
  th{ text-align:left; font-family: var(--mono); font-size: 10px; letter-spacing:.1em; text-transform:uppercase;
      color: var(--accent-2); font-weight:600; padding: 10px 10px; border-bottom: 1px solid var(--line); }
  td{ padding: 11px 10px; border-bottom: 1px solid var(--line-soft); color: var(--text); }
  tr.is-current td{ background: var(--accent-dim); }
  .empty-row td{ color: var(--muted); text-align:center; padding: 28px 10px; }

  .config-warning{
    background: var(--danger-dim); border: 1px solid rgba(217,112,122,0.35);
    border-radius: var(--radius); padding: 17px 19px; margin-bottom: 18px;
    font-size: 13.5px; line-height:1.6; color: #f1c7cb;
  }
  .config-warning strong{ color: var(--danger); display:block; margin-bottom:4px; font-size:14px; }
  .config-warning code{ font-family: var(--mono); background: rgba(0,0,0,0.25); padding:1px 6px; border-radius:5px; }

  .footnote{ margin-top: 28px; font-size: 11.5px; color: var(--muted); line-height:1.6; text-align:center; letter-spacing:0.02em; }
  .footnote code{ font-family: var(--mono); background: var(--panel-2); padding:1px 6px; border-radius:5px; }

  /* ---------- Info strip (jam operasional & kuota) ---------- */
  .info-strip{
    display:flex; gap:10px; flex-wrap:wrap; margin: 14px 0 18px;
  }
  .info-chip{
    flex:1; min-width: 150px;
    background: var(--panel); border:1px solid var(--line); border-radius: 12px;
    padding: 14px 16px; box-shadow: var(--shadow-sm);
  }
  .info-chip .info-label{ font-family: var(--mono); font-size: 9.5px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted); font-weight:600; }
  .info-chip .info-value{ font-size: 15.5px; font-weight:800; margin-top: 6px; color: var(--text); }
  .info-chip .info-value.warn{ color: var(--danger); }
  .info-chip .info-value.ok{ color: var(--ok); }

  /* ---------- Status petugas pills ---------- */
  .status-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 6px; }
  .status-pill{
    font-family: var(--sans); font-weight:700; font-size: 12.5px; cursor:pointer;
    border-radius: 999px; padding: 10px 17px; border: 1px solid var(--line);
    background: var(--panel-2); color: var(--muted); transition: all .15s ease;
  }
  .status-pill:hover{ background: var(--bg-2); }
  .status-pill[data-status="aktif"].active{ background: var(--ok-dim); color: var(--ok); border-color: rgba(92,185,138,0.4); }
  .status-pill[data-status="istirahat"].active{ background: var(--accent-dim); color: var(--accent-2); border-color: rgba(205,168,96,0.4); }
  .status-pill[data-status="tutup"].active{ background: var(--danger-dim); color: var(--danger); border-color: rgba(217,112,122,0.4); }

  /* ---------- Daftar lagu ruang tunggu ---------- */
  .music-playlist{ display:flex; flex-direction:column; gap:6px; margin-bottom: 10px; }
  .music-track{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    border:1px solid var(--line); border-radius: 10px; background: var(--panel-2);
    padding: 4px 4px 4px 4px; transition: all .15s ease;
  }
  .music-track.active{ background: var(--ok-dim); border-color: rgba(92,185,138,0.4); }
  .music-track-play{
    flex:1; text-align:left; font-family: var(--sans); font-weight:600; font-size: 13px;
    color: var(--text); background:transparent; border:none; cursor:pointer;
    padding: 8px 10px; border-radius: 8px; transition: background .15s ease;
  }
  .music-track-play:hover{ background: var(--bg-2); }
  .music-track.active .music-track-play{ color: var(--ok); }
  .music-track-del{
    background:transparent; border:none; cursor:pointer; font-size: 13px;
    padding: 8px 10px; border-radius: 8px; opacity:.7; transition: all .15s ease;
  }
  .music-track-del:hover{ opacity:1; background: var(--danger-dim); }
  .music-add-form{ margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
  .music-add-form input{ margin-bottom: 8px; }

  .loket-status-banner{
    padding: 12px 16px; border-radius: 12px; font-size: 13.5px; font-weight:600;
    margin-bottom: 14px; display:flex; align-items:center; gap:8px;
  }
  .loket-status-banner.istirahat{ background: var(--accent-dim); border:1px solid rgba(205,168,96,0.35); color: var(--accent-2); }
  .loket-status-banner.tutup{ background: var(--danger-dim); border:1px solid rgba(217,112,122,0.35); color: var(--danger); }

  /* ---------- Pengumuman dosen (ditampilkan di halaman mahasiswa) ---------- */
  .announcement-banner{
    margin: 0 0 18px; padding: 15px 18px;
    display:flex; align-items:flex-start; gap:12px;
    background: linear-gradient(135deg, rgba(205,168,96,0.14), rgba(205,168,96,0.05));
    border: 1px solid rgba(205,168,96,0.4); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  .announcement-icon{ font-size: 18px; line-height:1; margin-top:1px; flex-shrink:0; }
  .announcement-label{ font-family: var(--mono); font-size: 10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--accent-2); font-weight:700; margin-bottom: 3px; }
  .announcement-text{ font-size: 14px; color: var(--text); line-height:1.55; white-space: pre-line; }

  /* ---------- Badge: mendekati panggilan ---------- */
  .badge-warn{ background: var(--accent-dim); color: var(--accent-2); }

  /* ---------- Pemilih hari (mahasiswa & dosen) ---------- */
  .day-pills{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 14px; }
  .day-pill{
    font-family: var(--sans); font-weight:700; font-size: 12.5px; cursor:pointer;
    border-radius: 999px; padding: 9px 16px; border: 1px solid var(--line);
    background: var(--panel-2); color: var(--muted); transition: all .15s ease;
  }
  .day-pill:hover{ background: var(--bg-2); border-color: rgba(205,168,96,0.3); }
  .day-pill.active{ background: linear-gradient(135deg, var(--accent-2), var(--accent-deep)); color: #191a20; border-color: transparent; box-shadow: 0 8px 18px -8px rgba(205,168,96,0.5); }

  /* ---------- Mini games ---------- */
  .game-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
  @media (max-width: 640px){ .game-grid{ grid-template-columns: 1fr; } }
  .game-card{ text-align:center; }
  .guess-feedback{ font-size:14px; min-height: 20px; margin: 10px 0; font-weight:700; }
  .guess-feedback.hi{ color: var(--danger); }
  .guess-feedback.lo{ color: var(--accent-2); }
  .guess-feedback.win{ color: var(--ok); }
  .rps-choices{ display:flex; justify-content:center; gap:10px; margin: 14px 0; }
  .rps-btn{
    font-size: 28px; background: var(--panel-2); border:1px solid var(--line);
    border-radius: 14px; width: 58px; height: 58px; cursor:pointer; transition: all .12s ease;
  }
  .rps-btn:hover{ border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
  .rps-result{ font-size: 14px; font-weight:700; min-height:20px; margin-top:6px; }
  .rps-score{ font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top:4px; }

  /* ---------- Tetris ---------- */
  .tetris-wrap{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; align-items:flex-start; }
  #tetrisCanvas{
    background: #0d0f16; border:1px solid var(--line); border-radius: 10px;
    display:block; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
  }
  .tetris-side{ min-width: 140px; text-align:left; }
  .tetris-stat{ font-family: var(--mono); font-size: 12px; color: var(--muted); margin-bottom: 8px; }
  .tetris-stat b{ color: var(--accent-2); font-size: 15px; display:block; }
  .tetris-controls{ display:grid; grid-template-columns: repeat(3, 46px); grid-template-rows: repeat(2, 46px); gap:8px; margin-top:14px; justify-content:center; }
  .tetris-btn{
    font-size: 20px; background: var(--panel-2); border:1px solid var(--line); color: var(--text);
    border-radius: 12px; cursor:pointer; touch-action: manipulation;
  }
  .tetris-btn:active{ background: var(--accent); color:#191a20; border-color: var(--accent); }
  .tetris-msg{ font-size: 13px; color: var(--muted); min-height: 18px; margin-top: 10px; }
  .tetris-msg.over{ color: var(--danger); font-weight:700; }
  .wa-send-btn{ color:#4fce8e !important; border-color: rgba(37,211,102,0.3) !important; background: rgba(37,211,102,0.08) !important; }
  .wa-send-btn:hover{ background: rgba(37,211,102,0.16) !important; }

  /* ---------- Extra celebratory / feedback animations ---------- */
  @keyframes popScale{ 0%{ transform: scale(1);} 45%{ transform: scale(1.4); color: var(--accent-2);} 100%{ transform: scale(1);} }
  .pop{ animation: popScale .4s ease; }

  @keyframes shakeX{
    10%,90%{ transform: translateX(-2px); }
    20%,80%{ transform: translateX(4px); }
    30%,50%,70%{ transform: translateX(-8px); }
    40%,60%{ transform: translateX(8px); }
  }
  .shake{ animation: shakeX .5s ease; }

  @keyframes slideDown{ from{ opacity:0; transform: translateY(-8px);} to{ opacity:1; transform:none; } }
  .slide-in{ animation: slideDown .3s ease; }

  @keyframes bounceIn{
    0%{ transform: scale(.6); opacity:0; }
    60%{ transform: scale(1.08); opacity:1; }
    100%{ transform: scale(1); }
  }
  .bounce-in{ animation: bounceIn .45s cubic-bezier(.34,1.56,.64,1); }

  @keyframes confettiFall{
    0%{ transform: translateY(-20px) rotate(0deg); opacity:1; }
    100%{ transform: translateY(320px) rotate(540deg); opacity:0; }
  }
  .confetti-piece{
    position: fixed; top:0; width:8px; height:14px; border-radius:2px;
    pointer-events:none; z-index:9999; animation: confettiFall linear forwards;
  }

  @keyframes glowPulseRing{
    0%,100%{ box-shadow: 0 0 0 0 rgba(205,168,96,0.45); }
    50%{ box-shadow: 0 0 0 6px rgba(205,168,96,0); }
  }
  .win-glow{ animation: glowPulseRing 1s ease-in-out 2; }

  @keyframes flashWhite{ 0%,100%{ filter: brightness(1); } 50%{ filter: brightness(2.2); } }
  .tetris-flash{ animation: flashWhite .18s ease-in-out 2; }

  /* ---------- Live Radar: visualisasi posisi antrean real-time ---------- */
  .radar-panel{ padding-bottom: 18px; }
  .radar-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:5px; }
  .radar-head h2{ margin:0; }
  .radar-live-badge{
    display:inline-flex; align-items:center; gap:6px;
    font-family: var(--mono); font-size:10.5px; font-weight:700; letter-spacing:0.14em;
    color: var(--ok); background: var(--ok-dim); border:1px solid rgba(92,185,138,0.35);
    padding:5px 10px; border-radius:999px; flex-shrink:0;
  }
  .radar-live-ping{
    width:7px; height:7px; border-radius:50%; background: var(--ok); display:inline-block;
    box-shadow: 0 0 0 0 rgba(92,185,138,0.6); animation: radarLivePing 1.6s ease-out infinite;
  }
  @keyframes radarLivePing{
    0%{ box-shadow: 0 0 0 0 rgba(92,185,138,0.55); }
    70%{ box-shadow: 0 0 0 7px rgba(92,185,138,0); }
    100%{ box-shadow: 0 0 0 0 rgba(92,185,138,0); }
  }

  .radar-track{
    position:relative; height:104px; margin-top:14px;
    background: linear-gradient(160deg, #171a24 0%, #101219 65%, #0b0c12 100%);
    border:1px solid var(--line); border-radius: 14px; overflow:hidden;
  }
  .radar-track::before{
    content:""; position:absolute; inset:0; pointer-events:none;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
  }
  .radar-sweep{
    position:absolute; top:0; bottom:0; left:-18%; width:18%;
    background: linear-gradient(90deg, transparent, rgba(205,168,96,0.10), transparent);
    animation: radarSweep 4.5s ease-in-out infinite;
  }
  @keyframes radarSweep{ 0%{ left:-18%; } 55%{ left:100%; } 100%{ left:100%; } }
  .radar-baseline{
    position:absolute; left:6%; right:16%; top:50%; height:2px; transform: translateY(-50%);
    background: repeating-linear-gradient(90deg, rgba(205,168,96,0.4) 0, rgba(205,168,96,0.4) 6px, transparent 6px, transparent 13px);
  }
  .radar-start-label{
    position:absolute; left:6%; bottom:9px; transform: translateX(-50%);
    font-family: var(--mono); font-size:9.5px; letter-spacing:0.16em; color: var(--muted);
  }
  .radar-loket{
    position:absolute; right:14px; top:50%; transform: translateY(-50%);
    display:flex; flex-direction:column; align-items:center; gap:2px; z-index:3;
  }
  .radar-loket-ring{
    position:absolute; left:50%; top:14px; width:44px; height:44px; border-radius:50%;
    transform: translate(-50%,-50%); border:1px solid rgba(205,168,96,0.35);
  }
  .radar-loket.is-calling .radar-loket-ring{
    border-color: var(--accent); animation: radarLoketCalling 1.1s ease-out infinite;
  }
  @keyframes radarLoketCalling{
    0%{ box-shadow: 0 0 0 0 rgba(205,168,96,0.5); }
    100%{ box-shadow: 0 0 0 14px rgba(205,168,96,0); }
  }
  .radar-loket-icon{
    width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background: linear-gradient(135deg, var(--accent-2), var(--accent-deep)); color:#191a20;
    font-family: var(--mono); font-weight:800; font-size:12px; box-shadow: 0 8px 18px -8px rgba(205,168,96,0.6);
    transition: font-size .15s ease;
  }
  .radar-loket-label{ font-family: var(--mono); font-size:9px; letter-spacing:0.16em; color: var(--accent-2); margin-top:4px; }

  .radar-avatar{
    position:absolute; top:50%; z-index:2;
    transform: translate(-50%, -50%);
    transition: left 1.1s cubic-bezier(.4,0,.2,1), opacity .35s ease, transform .35s ease;
    display:flex; flex-direction:column; align-items:center; gap:3px;
  }
  .radar-avatar.entering{ opacity:0; transform: translate(-50%, -50%) scale(.5); }
  .radar-avatar.leaving{ opacity:0; transform: translate(-50%, -50%) scale(.4); transition: opacity .4s ease, transform .4s ease; }
  .radar-avatar-circle{
    width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background: var(--panel-2); border:1px solid var(--line); color: var(--muted);
    font-family: var(--sans); font-weight:700; font-size:12px;
  }
  .radar-avatar-num{ font-family: var(--mono); font-size:9px; color: var(--muted); }
  .radar-avatar.me .radar-avatar-circle{
    background: linear-gradient(135deg, var(--accent-2), var(--accent-deep)); color:#191a20; border-color: transparent;
    box-shadow: 0 0 0 0 rgba(205,168,96,0.55); animation: radarMePulse 1.8s ease-out infinite;
  }
  .radar-avatar.me .radar-avatar-num{ color: var(--accent-2); font-weight:700; }
  @keyframes radarMePulse{
    0%{ box-shadow: 0 0 0 0 rgba(205,168,96,0.55); }
    70%{ box-shadow: 0 0 0 9px rgba(205,168,96,0); }
    100%{ box-shadow: 0 0 0 0 rgba(205,168,96,0); }
  }
  .radar-avatar.far .radar-avatar-circle{ border-style:dashed; border-color: rgba(205,168,96,0.5); }

  .radar-gap{
    position:absolute; top:50%; transform: translate(-50%,-50%);
    font-family: var(--mono); color: var(--muted); font-size:16px; letter-spacing:2px; z-index:1;
  }

  .radar-overflow{ font-size:12px; color: var(--muted); margin-top:10px; text-align:center; }
  .radar-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:11.5px; color: var(--muted); }
  .radar-legend span{ display:inline-flex; align-items:center; gap:6px; }
  .radar-dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }
  .radar-dot.me{ background: linear-gradient(135deg, var(--accent-2), var(--accent-deep)); }
  .radar-dot.other{ background: var(--panel-2); border:1px solid var(--line); }
  .radar-dot.current{ background: var(--accent); }

  @media (max-width: 520px){
    .digit{ width: 42px; font-size: 32px; }
    .ticket .digit{ width: 48px; font-size: 40px; }
    .brand h1{ font-size:20px; }
    .radar-track{ height:92px; }
    .radar-avatar-circle{ width:26px; height:26px; font-size:11px; }
    .radar-loket-ring, .radar-loket-icon{ width:38px; height:38px; }
    .radar-loket-ring{ top:12px; }
    .radar-loket-icon{ font-size:10.5px; }
  }

  /* ---------- Cross-page nav link styled as a tab (dosen.html <-> index.html) ---------- */
  a.tab{
    display:inline-flex; align-items:center; text-decoration:none;
    background: var(--panel); border:1px solid var(--line); box-shadow: var(--shadow-sm);
  }
  a.tab:hover{ background: var(--bg-2); border-color: rgba(205,168,96,0.3); }

  /* ---------- Dosen dashboard layout (compact, less scrolling) ---------- */
  .dosen-toolbar{
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding: 13px 18px; margin-bottom: 18px;
    background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  .dosen-toolbar-label{
    font-family: var(--mono); font-size: 10.5px; letter-spacing:.14em; text-transform:uppercase;
    color: var(--muted); font-weight:700; white-space:nowrap;
  }
  .dosen-toolbar .day-pills{ margin-bottom:0; }

  .dosen-layout{ display:grid; grid-template-columns: 1fr 320px; gap: 18px; align-items:start; }
  @media (max-width: 900px){ .dosen-layout{ grid-template-columns: 1fr; } }

  .dosen-main{ min-width:0; }
  .dosen-sidebar{ min-width:0; }

  .board-controls{
    margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-soft);
    position: relative; z-index: 1;
  }

  .table-panel{ margin-bottom: 0; }

  /* ---------- Settings accordion cards (sidebar) ---------- */
  .settings-card{
    background: var(--panel); border:1px solid var(--line); border-radius: var(--radius);
    margin-bottom: 12px; box-shadow: var(--shadow-sm); overflow:hidden;
  }
  .settings-card summary{
    cursor:pointer; list-style:none; padding: 15px 18px;
    display:flex; align-items:center; gap:10px; justify-content:space-between;
    -webkit-tap-highlight-color: transparent; user-select:none;
    transition: background .15s ease;
  }
  .settings-card summary::-webkit-details-marker{ display:none; }
  .settings-card summary::after{
    content:"+"; font-family: var(--sans); font-size:18px; font-weight:700;
    color: var(--accent); line-height:1; flex-shrink:0; transition: transform .2s ease;
  }
  .settings-card[open] summary::after{ content:"–"; }
  .settings-card summary:hover{ background: var(--panel-2); }
  .settings-title{
    font-family: var(--serif); font-weight:700; font-size: 14.5px; color: var(--text);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .settings-tag{
    font-family: var(--mono); font-size: 10.5px; font-weight:700; letter-spacing:.02em;
    color: var(--muted); background: var(--panel-2); border:1px solid var(--line);
    padding: 4px 9px; border-radius: 999px; white-space:nowrap; flex-shrink:0;
  }
  .settings-tag.ok{ color: var(--ok); background: var(--ok-dim); border-color: rgba(92,185,138,0.35); }
  .settings-tag.warn{ color: var(--accent-2); background: var(--accent-dim); border-color: rgba(205,168,96,0.35); }
  .settings-tag.danger{ color: var(--danger); background: var(--danger-dim); border-color: rgba(217,112,122,0.35); }
  .settings-card .settings-body{
    padding: 0 18px 18px; border-top: 1px solid var(--line-soft);
    animation: fadein .2s ease;
  }
  .settings-card .settings-body .hint:first-child{ margin-top: 15px; }
  .settings-card .settings-body .day-pills{ margin-bottom: 12px; }

  /* ---------- Modal pindah hari ---------- */
  .modal-overlay{
    position: fixed; inset: 0; background: rgba(6,7,11,0.72);
    display: flex; align-items: center; justify-content: center;
    z-index: 200; padding: 20px; backdrop-filter: blur(2px);
  }
  .modal-box{
    width: 100%; max-width: 420px; background: var(--panel);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 22px; box-shadow: var(--shadow-lg); animation: fadein .18s ease;
  }
  .modal-box h3{ margin: 0 0 6px; font-family: var(--serif); font-size: 18px; font-weight:700; color: var(--text); }
  .modal-box .hint{ font-size: 13.5px; color: var(--muted); margin: 0 0 14px; line-height:1.6; }
  .modal-box .day-pills{ margin-bottom: 10px; }


  /* ---------- Logo di header ---------- */
  .brand-wrap{ display:flex; align-items:center; gap:16px; min-width:0; }
  .brand-logo{ flex:none; display:block; width:68px; height:68px; border-radius:16px; background:var(--panel); border:1px solid var(--line); padding:7px; box-shadow:var(--shadow-sm); transition:border-color .18s ease, transform .18s ease; }
  .brand-logo:hover{ border-color:var(--accent); transform:translateY(-1px); }
  .brand-logo:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
  .brand-logo img{ display:block; width:100%; height:100%; object-fit:contain; }
  @media (max-width: 640px){
    .brand-wrap{ gap:12px; }
    .brand-logo{ width:54px; height:54px; border-radius:13px; padding:6px; }
  }

  /* ---------- Loading screen ---------- */
  html.is-loading, html.is-loading body{ overflow:hidden; }
  .page-loader{
    position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
    background: radial-gradient(700px 460px at 50% 42%, rgba(205,168,96,0.13), transparent 62%), var(--bg);
    transition: opacity .6s ease, visibility .6s ease;
  }
  .page-loader.is-done{ opacity:0; visibility:hidden; pointer-events:none; }
  .page-loader.is-done .loader-inner{ transform:scale(1.06); }
  .loader-inner{ display:flex; flex-direction:column; align-items:center; gap:18px; transition:transform .6s ease; }
  .loader-logo{ position:relative; width:132px; height:132px; animation: loaderIn .7s cubic-bezier(.2,.8,.2,1) both; }
  .loader-logo::before{
    content:""; position:absolute; inset:-26px; border-radius:50%;
    background: radial-gradient(closest-side, rgba(232,201,138,0.28), transparent 70%);
    animation: loaderGlow 2.2s ease-in-out infinite;
  }
  .loader-logo img{ position:relative; display:block; width:100%; height:100%; object-fit:contain; }
  /* kilau emas yang menyapu logo */
  .loader-logo::after{
    content:""; position:absolute; inset:0;
    background: linear-gradient(105deg, transparent 38%, rgba(255,244,214,0.75) 50%, transparent 62%);
    background-size:260% 100%; background-position:160% 0;
    -webkit-mask: url(logo-mark.png) center/contain no-repeat; mask: url(logo-mark.png) center/contain no-repeat;
    animation: loaderShine 1.8s ease-in-out .3s infinite;
  }
  .loader-name{ font-family:var(--serif); font-size:15px; font-weight:600; letter-spacing:.06em; color:var(--accent-2); animation: loaderIn .7s .15s cubic-bezier(.2,.8,.2,1) both; }
  .loader-bar{ width:160px; height:3px; border-radius:99px; background:var(--line); overflow:hidden; animation: loaderIn .7s .25s both; }
  .loader-bar i{ display:block; width:42%; height:100%; border-radius:inherit; background:linear-gradient(90deg, var(--accent-deep), var(--accent-2)); animation: loaderBar 1.2s ease-in-out infinite; }
  @keyframes loaderIn{ from{opacity:0; transform:translateY(10px) scale(.96);} to{opacity:1; transform:none;} }
  @keyframes loaderGlow{ 0%,100%{opacity:.55; transform:scale(.92);} 50%{opacity:1; transform:scale(1.06);} }
  @keyframes loaderShine{ to{ background-position:-60% 0; } }
  @keyframes loaderBar{ 0%{ transform:translateX(-110%);} 100%{ transform:translateX(260%);} }
  @media (prefers-reduced-motion: reduce){
    .loader-logo, .loader-name, .loader-bar{ animation:none; }
    .loader-logo::before, .loader-logo::after{ animation:none; }
    .loader-bar i{ animation:none; width:100%; }
    .page-loader, .loader-inner{ transition-duration:.01s; }
  }