*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Segoe UI,Arial,sans-serif;background:linear-gradient(135deg,#0f766e,#1e3a8a);color:#0f172a;min-height:100vh}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;color:#fff}
.topbar h1{margin:0;font-size:1.4rem}
button{font:inherit;padding:10px 18px;border:0;border-radius:10px;background:#e2e8f0;cursor:pointer}
button:hover{filter:brightness(.95)}
button.primary{background:#f59e0b;color:#111;font-weight:700}
.tools button{background:rgba(255,255,255,.2);color:#fff;margin-left:6px}
main{max-width:900px;margin:0 auto;padding:10px 20px 40px}
.screen{display:none;background:#fff;border-radius:18px;padding:24px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.screen.active{display:block}
.sub{color:#475569}
input{font:inherit;padding:10px 14px;border:2px solid #cbd5e1;border-radius:10px;width:100%;max-width:360px;margin:6px 0}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:14px 0}
.status{font-size:.85rem;color:#64748b}
.hud{display:flex;justify-content:space-between;font-size:1.1rem}
.timerbar{height:12px;background:#e2e8f0;border-radius:8px;overflow:hidden;margin:10px 0 4px}
#timerFill{height:100%;width:100%;background:#22c55e;transition:width .25s linear,background .3s}
.timertext{font-size:1.6rem;font-weight:800}
.board{display:flex;flex-direction:column;align-items:center;gap:18px;margin:18px 0}
.card{padding:22px 26px;border-radius:16px;font-size:1.25rem;font-weight:700;min-width:200px;box-shadow:0 4px 12px rgba(0,0,0,.15);user-select:none}
.card.question{background:#dbeafe;border:3px solid #3b82f6;max-width:560px}
.pair-zone{border:3px dashed #94a3b8;border-radius:16px;padding:16px 40px;color:#94a3b8}
.pair-zone.over{border-color:#f59e0b;color:#f59e0b}
.answers{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.card.answer{background:#fef3c7;border:3px solid #f59e0b;cursor:grab;transition:transform .15s}
.card.answer:hover{transform:translateY(-4px) rotate(-1deg)}
.card.correct{background:#bbf7d0!important;border-color:#16a34a!important}
.card.wrong{background:#fecaca!important;border-color:#dc2626!important;animation:shake .4s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.hint{color:#64748b;font-size:.85rem}
.big{font-size:2rem}
.boardlist{text-align:left;max-width:420px;margin:12px auto;padding-left:30px;font-size:1.1rem}
.boardlist li{padding:6px 0;border-bottom:1px solid #e2e8f0}
.boardlist span{float:right;font-weight:700}
.qform{display:flex;flex-direction:column;align-items:center}
table{width:100%;border-collapse:collapse;margin:14px 0;text-align:left;font-size:.95rem}
th,td{padding:8px;border-bottom:1px solid #e2e8f0}
td button{padding:4px 10px;margin-right:4px}
#toast{position:fixed;bottom:24px;right:24px;left:auto;transform:translateY(20px);background:#0f172a;color:#fff;padding:14px 22px;border-radius:14px;font-size:1rem;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.35);border-left:5px solid #22c55e;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s cubic-bezier(0.18,0.89,0.32,1.28);z-index:99999;max-width:380px}
#toast.show{opacity:1;transform:translateY(0)}
.home-desc{font-size:1.15rem;color:#475569;margin:-6px 0 20px;font-weight:500}
[hidden]{display:none!important}
.card img{display:block;max-width:100%;max-height:180px;margin:10px auto 0;border-radius:10px;object-fit:contain}
.card.answer img{max-height:140px}
label.file{display:block;font-size:.9rem;color:#475569;margin:4px 0}
label.file input{max-width:260px;border:0}
td img{height:32px;border-radius:4px;margin-right:4px}
/* ---- Admin form (rapi & elegan) ---- */
#admin{text-align:left}
#admin h2{text-align:center}
.qform{align-items:stretch;background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:22px;margin:16px 0 24px;gap:16px;box-shadow:0 2px 8px rgba(15,23,42,.05)}
.form-title{margin:0;font-size:1.1rem;color:#0f172a}
.field{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px;border-top:4px solid #3b82f6}
.field.benar{border-top-color:#16a34a}
.field.salah{border-top-color:#dc2626}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lbl{font-size:.8rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:#475569}
.field input[type=text],.field input:not([type]){max-width:none;width:100%;margin:0;padding:11px 14px;border:1.5px solid #cbd5e1;border-radius:10px;background:#f8fafc;transition:border-color .2s,box-shadow .2s,background .2s}
.field input:focus{outline:none;border-color:#0f766e;background:#fff;box-shadow:0 0 0 3px rgba(15,118,110,.18)}
.upload{position:relative}
.tile{display:flex;align-items:center;justify-content:center;min-height:84px;border:2px dashed #cbd5e1;border-radius:12px;background:#f8fafc;color:#64748b;cursor:pointer;overflow:hidden;transition:border-color .2s,background .2s;text-align:center;font-size:.9rem;margin:0}
.tile:hover{border-color:#0f766e;background:#f0fdfa;color:#0f766e}
.tile .ph small{display:block;opacity:.7}
.tile .prev{max-width:100%;max-height:150px;object-fit:contain;display:block}
.upload .rm{position:absolute;top:6px;right:6px;width:28px;height:28px;padding:0;border-radius:50%;background:rgba(15,23,42,.75);color:#fff;line-height:1}
.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:2px}
.actions .primary{min-width:150px;box-shadow:0 2px 6px rgba(245,158,11,.4)}
#qTable{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(15,23,42,.08)}
#qTable th{background:#f1f5f9;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:#475569}
#qTable tbody tr:hover{background:#f8fafc}
#btnBackHome2{display:block;margin:0 auto}
@media(max-width:640px){.duo{grid-template-columns:1fr}.qform{padding:14px}}
/* ---- Tema ceria ---- */
body{background:linear-gradient(135deg,#7c3aed 0%,#ec4899 45%,#f59e0b 100%) fixed;position:relative;overflow-x:hidden}
body::before,body::after{content:"\1F48A  \1F9B7  \1F9EA  \1F489  \1F52C  \1FA7A  \2795  \2B50";position:fixed;left:0;right:0;font-size:2.2rem;letter-spacing:1.5rem;white-space:nowrap;opacity:.18;pointer-events:none;animation:drift 40s linear infinite}
body::before{top:12%}
body::after{bottom:8%;animation-direction:reverse}
@keyframes drift{from{transform:translateX(-30%)}to{transform:translateX(0)}}
main,.topbar{position:relative;z-index:1}
.topbar h1{font-size:1.6rem;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.screen{border:4px solid #fff;box-shadow:0 12px 0 rgba(0,0,0,.12),0 18px 40px rgba(0,0,0,.25)}
#home h2,#result h2{font-size:1.9rem;background:linear-gradient(90deg,#7c3aed,#ec4899,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent;margin-top:4px}
#home input{border-color:#c4b5fd;text-align:center;font-size:1.1rem}
#home input:focus{outline:none;border-color:#ec4899;box-shadow:0 0 0 4px rgba(236,72,153,.2)}
button{transition:transform .12s,box-shadow .12s}
button:hover{transform:translateY(-2px)}
button:active{transform:translateY(1px)}
#btnStart{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;font-size:1.2rem;padding:14px 34px;box-shadow:0 5px 0 #15803d;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
#btnBoard{background:#fde68a;box-shadow:0 4px 0 #f59e0b}
#btnAdmin{background:#e9d5ff;box-shadow:0 4px 0 #a855f7}
#btnAgain{background:linear-gradient(135deg,#22c55e,#16a34a);color:#fff;box-shadow:0 4px 0 #15803d}
/* sesi soal */
#game{background:linear-gradient(180deg,#fff 0%,#fdf4ff 100%)}
.hud span{background:#ede9fe;color:#5b21b6;padding:6px 16px;border-radius:999px;font-weight:600}
.hud b{font-size:1.2em}
#score{color:#db2777}
.timerbar{height:16px;background:#f3e8ff;border:2px solid #e9d5ff}
#timerFill{background:linear-gradient(90deg,#22c55e,#84cc16)}
.timertext{color:#7c3aed}
.card.question{background:linear-gradient(135deg,#bae6fd,#c4b5fd);border-color:#6366f1;color:#1e1b4b;font-size:1.4rem;box-shadow:0 6px 0 #6366f1}
.pair-zone{border-color:#f472b6;color:#ec4899;background:#fdf2f8;font-weight:600}
.card.answer{box-shadow:0 6px 0 rgba(0,0,0,.15);font-size:1.3rem;min-width:220px}
.card.answer:nth-child(1){background:linear-gradient(135deg,#fecdd3,#fda4af);border-color:#f43f5e;color:#881337}
.card.answer:nth-child(2){background:linear-gradient(135deg,#a7f3d0,#67e8f9);border-color:#0891b2;color:#134e4a}
.card.answer:hover{transform:translateY(-6px) scale(1.04) rotate(-1.5deg)}
.card.correct{animation:pop .5s}
@keyframes pop{40%{transform:scale(1.12)}}
.hint{color:#a855f7;font-weight:600}
/* ---- Pengaturan admin ---- */
.settings{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.set-item{background:#f8fafc;border:1px solid #e2e8f0;border-top:4px solid #0f766e;border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.set-item.danger{border-top-color:#dc2626}
.set-item small{color:#64748b}
.set-row{display:flex;gap:10px}
.set-row input{margin:0;max-width:120px;text-align:center}
.btn-danger{background:#fee2e2;color:#b91c1c;font-weight:700;border:1.5px solid #fca5a5}
.btn-danger:hover{background:#dc2626;color:#fff}
@media(max-width:640px){.settings{grid-template-columns:1fr}}
/* ---- Mode soal ---- */
.mode-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#ecfeff;border:1px solid #a5f3fc;border-radius:12px;padding:10px 14px;margin-top:4px}
.mode-bar span{color:#0e7490}
.mode-btns{margin-left:auto;display:flex;gap:8px}
.mode-btns button{padding:6px 12px;font-size:.85rem}
.mode-note{display:block;color:#64748b;margin:6px 2px 0}
input.sw{width:20px;height:20px;max-width:none;margin:0;accent-color:#0f766e;cursor:pointer}
#qTable tr.off td:not(:first-child){opacity:.45}
/* ---- Jurusan, pengaturan baru ---- */
.jur-badge{display:inline-block;background:#ede9fe;color:#5b21b6;font-weight:700;padding:6px 16px;border-radius:999px;margin:0 0 10px;font-size:.95rem}
.jur-badge:empty{display:none}
.btn-tour{background:linear-gradient(135deg,#6366f1,#ec4899);color:#fff;font-weight:700;font-size:1.1rem;padding:12px 28px;box-shadow:0 4px 0 #4338ca}
.set-item input,.set-item select{width:100%;max-width:none;margin:0;padding:10px 12px;border:1.5px solid #cbd5e1;border-radius:10px;background:#fff;font:inherit}
.set-item.jur{border-top-color:#7c3aed}
.set-item.tour{border-top-color:#ec4899}
.settings{grid-template-columns:repeat(3,1fr)}
.set-save{text-align:right;margin:-4px 0 14px}
@media(max-width:800px){.settings{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.settings{grid-template-columns:1fr}}
.chips-check{display:flex;flex-wrap:wrap;gap:10px}
.chk{cursor:pointer}
.chk input{position:absolute;opacity:0;pointer-events:none}
.chk span{display:inline-block;padding:9px 16px;border:2px solid #cbd5e1;border-radius:999px;background:#f8fafc;color:#475569;font-weight:600;transition:all .15s}
.chk input:checked+span{background:#ede9fe;border-color:#7c3aed;color:#5b21b6;box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.chk input:focus-visible+span{outline:2px solid #0f766e}
.field.kat{border-top-color:#7c3aed}
.badge{display:inline-block;background:#ede9fe;color:#5b21b6;border-radius:999px;padding:2px 9px;font-size:.75rem;margin:1px 3px 1px 0;white-space:nowrap}

/* ---- Turnamen: lobby ---- */
#tLobby input{text-align:center}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:0;margin:12px 0}
.chips li{background:linear-gradient(135deg,#bae6fd,#c4b5fd);border:2px solid #6366f1;border-radius:999px;padding:6px 8px 6px 16px;font-weight:700;color:#1e1b4b;display:flex;align-items:center;gap:8px}
.chips li button{padding:0;width:24px;height:24px;border-radius:50%;background:rgba(15,23,42,.15);line-height:1}

/* ---- Turnamen: bagan ---- */
#tBracket h2{font-size:1.6rem}
.tree{display:flex;gap:26px;overflow-x:auto;padding:10px 4px 18px;justify-content:center;align-items:stretch}
.tcol{display:flex;flex-direction:column;justify-content:space-around;gap:14px;min-width:190px}
.tcol h4{margin:0;text-align:center;color:#7c3aed}
.tmatch{border:2px solid #cbd5e1;border-radius:12px;background:#f8fafc;overflow:hidden;text-align:left}
.tmatch.current{border-color:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.3);animation:pulse 1.6s ease-in-out infinite}
.tp{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;font-weight:600}
.tp+.tp{border-top:1px solid #e2e8f0}
.tp.win{background:#bbf7d0;color:#14532d}
.tp.lose{opacity:.5;text-decoration:line-through}
.big-btn{font-size:1.25rem;padding:14px 34px}

/* ---- Turnamen: duel (layar TV) ---- */
#tDuel{background:linear-gradient(180deg,#fff,#fdf4ff)}
.duel-top{display:flex;justify-content:space-between;font-weight:800;font-size:1.2rem;color:#5b21b6;margin-bottom:6px}
#dFill{height:100%;width:100%;background:#22c55e;transition:width .25s linear,background .3s}
.duel-grid{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:18px;margin:14px 0;align-items:start}
.pl{border-radius:18px;padding:14px;border:4px solid}
.pl.p1{background:#e0f2fe;border-color:#0284c7}
.pl.p2{background:#fce7f3;border-color:#db2777}
.pname{font-size:1.5rem;font-weight:800;word-break:break-word}
.p1 .pname{color:#075985}.p2 .pname{color:#9d174d}
.pscore{font-size:4rem;font-weight:900;line-height:1.1}
.p1 .pscore{color:#0284c7}.p2 .pscore{color:#db2777}
.pans{display:flex;flex-direction:column;gap:12px;margin-top:8px}
.pans .card.answer{min-width:0;font-size:1.2rem;background:#fff;border-color:currentColor;position:relative;padding:16px 14px 16px 54px;text-align:left}
.p1 .pans .card.answer{color:#075985;border-color:#0284c7}
.p2 .pans .card.answer{color:#9d174d;border-color:#db2777}
.pans .card.answer.locked{opacity:.55;pointer-events:none}
.pans .card.correct{background:#bbf7d0!important;border-color:#16a34a!important;color:#14532d!important;opacity:1}
.pans .card.wrong{background:#fecaca!important;border-color:#dc2626!important;color:#7f1d1d!important}
kbd{position:absolute;left:12px;top:50%;transform:translateY(-50%);background:#0f172a;color:#fff;border-radius:8px;padding:6px 11px;font-size:1.1rem;font-weight:800;font-family:inherit}
.dq{display:flex;flex-direction:column;align-items:center;gap:12px}
.dq .card.question{font-size:1.5rem;width:100%;max-width:none}
.dmsg{min-height:2.4em;font-weight:800;font-size:1.3rem;color:#7c3aed}
@media(max-width:900px){.duel-grid{grid-template-columns:1fr}.dq{order:-1}}

/* ---- Juara ---- */
#tChamp{position:relative;overflow:hidden;padding:60px 24px}
.champ-name{font-size:3.4rem;font-weight:900;margin:10px 0 24px;background:linear-gradient(90deg,#f59e0b,#ec4899,#7c3aed);-webkit-background-clip:text;background-clip:text;color:transparent}
.confetti{position:absolute;inset:0;pointer-events:none}
.confetti i{position:absolute;top:-40px;font-style:normal;font-size:1.8rem;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(560px) rotate(360deg);opacity:.2}}

/* ---- Data Soal & Filter Modern ---- */
.filter-panel{background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:16px;margin:20px 0 14px;box-shadow:0 2px 6px rgba(15,23,42,.04)}
.filter-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.filter-header h3{margin:0;font-size:1.1rem;color:#0f172a}
.badge-active{background:#ecfeff;color:#0891b2;font-size:.85rem;font-weight:700;padding:4px 12px;border-radius:999px;border:1px solid #a5f3fc}
.filter-controls{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px;margin-bottom:12px}
@media(max-width:860px){.filter-controls{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.filter-controls{grid-template-columns:1fr}}

.search-box{position:relative;display:flex;align-items:center}
.search-icon{position:absolute;left:10px;pointer-events:none;font-size:1rem;color:#94a3b8}
.search-box input{width:100%;max-width:none;padding:9px 34px 9px 34px;margin:0;border:1.5px solid #cbd5e1;border-radius:10px;font-size:.95rem}
.search-box input:focus{border-color:#0f766e;outline:none;background:#fff;box-shadow:0 0 0 3px rgba(15,118,110,.15)}
.btn-clear{position:absolute;right:8px;background:none;border:none;padding:4px 8px;color:#94a3b8;font-size:1rem;cursor:pointer}
.btn-clear:hover{color:#0f172a}

.filter-controls select{width:100%;padding:9px 12px;border:1.5px solid #cbd5e1;border-radius:10px;background:#fff;font:inherit;font-size:.92rem;color:#1e293b}

.bulk-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-top:10px;border-top:1px dashed #e2e8f0}
.filter-info{font-size:.88rem;color:#64748b;font-weight:600}
.bulk-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.btn-bulk{padding:7px 14px;font-size:.85rem;font-weight:700;border-radius:8px;border:1px solid transparent;cursor:pointer}
.btn-bulk.on{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.btn-bulk.on:hover{background:#047857;color:#fff}
.btn-bulk.off{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.btn-bulk.off:hover{background:#b91c1c;color:#fff}
.btn-bulk.rand{background:#f5f3ff;color:#6d28d9;border-color:#ddd6fe}
.btn-bulk.rand:hover{background:#6d28d9;color:#fff}
.rand-box{display:flex;align-items:center;gap:6px;background:#f8fafc;padding:3px 8px;border-radius:8px;border:1px solid #e2e8f0;font-size:.85rem;color:#475569}
.rand-box input{margin:0;padding:4px 6px;text-align:center;border:1px solid #cbd5e1;border-radius:6px;font:inherit}

/* ---- Tabel Soal Nyaman Dilihat ---- */
.table-container{width:100%;overflow-x:auto;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 2px 8px rgba(15,23,42,.04);margin-bottom:12px}
#qTable{width:100%;border-collapse:collapse;margin:0;text-align:left;font-size:.92rem}
#qTable th{background:#f8fafc;padding:12px 14px;border-bottom:2px solid #e2e8f0;color:#475569;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
#qTable td{padding:12px 14px;border-bottom:1px solid #f1f5f9;vertical-align:middle;color:#1e293b}
#qTable tbody tr:hover{background:#f8fafc}
#qTable tr.off{background:#fafafa}
#qTable tr.off td:not(:first-child){opacity:.45}

.cell-q{font-weight:600;color:#0f172a;max-width:300px;line-height:1.4}
.cell-ans-ok{color:#15803d;font-weight:600}
.cell-ans-bad{color:#b91c1c}
.badge-kelompok{display:inline-block;background:#fef3c7;color:#92400e;border:1px solid #fde68a;padding:3px 9px;border-radius:6px;font-size:.8rem;font-weight:600;white-space:nowrap}
.badge-jur{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.76rem;font-weight:700;margin:1px 2px;white-space:nowrap}
.badge-jur.farmasi{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}
.badge-jur.dental{background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd}
.badge-jur.analis{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe}
.badge-jur.semua{background:#ede9fe;color:#5b21b6;border:1px solid #c4b5fd}

.q-img-thumb{width:36px;height:36px;object-fit:cover;border-radius:6px;border:1px solid #cbd5e1;cursor:pointer;vertical-align:middle;margin-right:6px}
.action-cell{white-space:nowrap;text-align:center}
.action-cell button{padding:6px 9px;margin:0 2px;border-radius:8px;font-size:.9rem;background:#f1f5f9;border:1px solid #cbd5e1}
.action-cell button:hover{background:#e2e8f0}

/* ---- Paginasi ---- */
.pagination-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding:8px 4px;font-size:.9rem;color:#475569}
.page-size{display:flex;align-items:center;gap:8px}
.page-size select{padding:6px 10px;border-radius:8px;border:1.5px solid #cbd5e1;background:#fff;font:inherit}
.page-controls{display:flex;align-items:center;gap:8px}
.btn-nav{padding:7px 14px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;font-weight:600;color:#0f172a;cursor:pointer}
.btn-nav:disabled{opacity:.4;cursor:not-allowed}
.btn-nav:not(:disabled):hover{background:#f1f5f9}
.page-indicator{font-weight:700;color:#0f172a;padding:0 6px}

/* ---- Modal Popup Tambah/Edit Soal ---- */
body.modal-open{overflow:hidden!important}
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.75);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;padding:16px;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-dialog{background:#fff;border-radius:18px;width:100%;max-width:680px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 25px 50px -12px rgba(0,0,0,.35);overflow:hidden;animation:zoomIn .2s cubic-bezier(0.18,0.89,0.32,1.2)}
@keyframes zoomIn{from{transform:scale(.94)}to{transform:scale(1)}}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 22px;border-bottom:1px solid #e2e8f0;background:#f8fafc}
.modal-header h3{margin:0;font-size:1.2rem;color:#0f172a}
.btn-close-modal{background:none;border:none;font-size:1.4rem;color:#64748b;cursor:pointer;padding:4px 8px;border-radius:8px}
.btn-close-modal:hover{background:#e2e8f0;color:#0f172a}
.modal-body{padding:20px 22px;overflow-y:auto}
.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid #e2e8f0}
.btn-cancel{background:#f1f5f9;color:#475569;border:1px solid #cbd5e1;padding:10px 20px;border-radius:10px;font-weight:600;cursor:pointer}
.btn-cancel:hover{background:#e2e8f0}

/* Modal Konfirmasi Hapus In-App */
.modal-confirm{max-width:440px;text-align:center;padding:28px 24px}
.confirm-icon{font-size:3rem;margin-bottom:8px}
.modal-confirm h3{margin:4px 0 10px;font-size:1.3rem;color:#0f172a}
.confirm-text{color:#64748b;font-size:.95rem;margin:0 0 22px;line-height:1.5}
.confirm-actions{display:flex;justify-content:center;gap:12px}
.btn-danger-confirm{background:#dc2626;color:#fff;font-weight:700;padding:11px 24px;border-radius:10px;border:none;box-shadow:0 4px 10px rgba(220,38,38,.3);cursor:pointer}
.btn-danger-confirm:hover{background:#b91c1c}

/* Header & Tombol Modal */
.filter-header-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.btn-open-modal{padding:9px 18px;font-size:.92rem;font-weight:700;background:linear-gradient(135deg,#0f766e,#0d9488);color:#fff;box-shadow:0 3px 8px rgba(15,118,110,.3);border-radius:10px;border:none}
.btn-open-modal:hover{filter:brightness(1.08)}

/* Perapihan Filter & Aksi Cepat (Sesuai Gambar 1) */
.filter-controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.filter-controls .search-box{flex:2;min-width:240px}
.filter-controls select{flex:1;min-width:150px}
.bulk-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:12px;border-top:1px dashed #e2e8f0}
.bulk-buttons{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.rand-box{display:inline-flex;align-items:center;gap:8px;background:#f5f3ff;border:1.5px solid #ddd6fe;border-radius:10px;padding:4px 12px;font-size:.88rem;color:#6d28d9;font-weight:700;white-space:nowrap}
.rand-box input{margin:0;width:52px;padding:5px;text-align:center;border:1.5px solid #c4b5fd;border-radius:6px;font:inherit;font-weight:700}
.btn-bulk.rand{background:none;border:none;padding:4px 0;margin:0;color:#6d28d9;font-weight:800;cursor:pointer}

/* Tombol Admin di Topbar */
.tool-btn{background:rgba(255,255,255,.2);color:#fff;border-radius:8px;padding:7px 12px;font-size:.95rem;font-weight:600;border:none;cursor:pointer}
.tool-btn:hover{background:rgba(255,255,255,.32)}

/* Style Select dalam Field Modal */
.field select{width:100%;margin:0;padding:11px 14px;border:1.5px solid #cbd5e1;border-radius:10px;background:#f8fafc;font:inherit;font-size:.95rem;color:#0f172a;transition:border-color .2s,box-shadow .2s,background .2s}
.field select:focus{outline:none;border-color:#0f766e;background:#fff;box-shadow:0 0 0 3px rgba(15,118,110,.18)}

/* ---- Layout Admin Modern: Blok Turnamen & Blok Soal ---- */
.admin-block {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
  margin-bottom: 24px;
  text-align: left;
}

.config-block {
  border-top: 5px solid #7c3aed;
  background: linear-gradient(180deg, #ffffff, #faf5ff 160%);
}

.bank-block {
  border-top: 5px solid #0d9488;
  background: #ffffff;
}

.bank-block .filter-panel {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0 0 16px;
  box-shadow: none;
}

.block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
  flex-wrap: wrap;
  gap: 14px;
}

.block-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.block-icon {
  font-size: 2rem;
  line-height: 1;
}

.block-title h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
  color: #0f172a;
}

.block-sub {
  margin: 3px 0 0;
  font-size: 0.88rem;
  color: #64748b;
  font-weight: 500;
}

.btn-save-config {
  font-weight: 700;
  padding: 11px 22px;
  font-size: 0.95rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-save-config:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.38);
}

/* Grid 2x2 Simetris Pengaturan Turnamen */
.settings-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 720px) {
  .settings-grid-2x2 {
    grid-template-columns: 1fr;
  }
}

.set-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  transition: all 0.2s ease;
}

.set-card:focus-within,
.set-card:hover {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.set-card .lbl {
  font-weight: 700;
  font-size: 0.95rem;
  color: #1e293b;
  margin: 0;
}

.set-card select {
  width: 100%;
  padding: 10px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  margin: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.set-card select:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.input-with-suffix {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.input-with-suffix input {
  width: 100%;
  max-width: none;
  padding: 10px 72px 10px 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  margin: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.input-with-suffix input:focus {
  outline: none;
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.input-with-suffix .suffix {
  position: absolute;
  right: 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #64748b;
  pointer-events: none;
}

.set-card small {
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.4;
  margin-top: 2px;
}

/* Pembatas Visual Antar Konteks Pekerjaan (Turnamen vs Bank Soal) */
.section-divider {
  display: flex;
  align-items: center;
  margin: 34px 0 26px;
  gap: 16px;
}

.divider-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, rgba(203, 213, 225, 0.2), #cbd5e1, rgba(203, 213, 225, 0.2));
}

.divider-pill {
  background: #ede9fe;
  border: 1.5px solid #c4b5fd;
  color: #5b21b6;
  padding: 8px 20px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(124, 58, 237, 0.12);
  white-space: nowrap;
}