/* OMI Pro 5.0 — sistem desain terpadu untuk seluruh halaman lama */
:root{
  --omi-bg:#f5f8f7;
  --omi-panel:#ffffff;
  --omi-ink:#15241f;
  --omi-muted:#66756f;
  --omi-line:#dce5e1;
  --omi-green:#086451;
  --omi-green-dark:#123e34;
  --omi-gold:#c99026;
  --omi-shadow:0 16px 46px rgba(18,62,52,.10);
  --omi-shadow-hover:0 24px 64px rgba(18,62,52,.16);
  --omi-radius:22px;
  --omi-radius-lg:28px;
}

/* ===== Aplikasi mapel lama ===== */
body.legacy-app{
  background:linear-gradient(180deg,#f9fbfa 0%,#eef5f2 100%) !important;
  min-height:100dvh;
  color:var(--text,var(--omi-ink));
}
body.legacy-app:before{display:none!important}
body.legacy-app .app-header{
  min-height:68px;
  padding:10px clamp(12px,3vw,30px)!important;
  background:rgba(255,255,255,.94)!important;
  border-bottom:1px solid var(--line,var(--omi-line))!important;
  box-shadow:none!important;
  backdrop-filter:blur(16px);
}
body.legacy-app .brand{gap:10px}
body.legacy-app .logo{
  width:44px!important;height:44px!important;border-radius:14px!important;
  animation:none!important;box-shadow:0 9px 24px color-mix(in srgb,var(--accent) 25%,transparent)!important;
}
body.legacy-app .logo:after{display:none!important}
body.legacy-app .brand p{display:none!important}
body.legacy-app .brand h1{font-size:1.02rem!important;letter-spacing:-.015em}
body.legacy-app .header-actions{align-items:center;gap:6px;min-width:0}
body.legacy-app .legacy-home-link,
body.legacy-app .icon-btn{
  width:40px;height:40px;padding:0!important;border-radius:13px!important;
  display:inline-grid;place-items:center;text-decoration:none;font-weight:900;
  background:var(--panel,#fff)!important;border:1px solid var(--line,var(--omi-line))!important;
  color:var(--text,var(--omi-ink))!important;box-shadow:none!important;
}
body.legacy-app .live-status{
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  padding:7px 10px!important;border-radius:999px!important;font-size:.72rem!important;
}
body.legacy-app .screen{max-width:1180px!important;padding:clamp(16px,3vw,28px)!important}
body.legacy-app #welcomeScreen{max-width:820px!important;padding-top:clamp(24px,6vw,64px)!important}
body.legacy-app #welcomeScreen .hero{display:block!important}
body.legacy-app #welcomeScreen .hero-main,
body.legacy-app #welcomeScreen .overview{display:none!important}
body.legacy-app .start-card{
  width:100%;max-width:760px;margin:0 auto!important;
  padding:clamp(18px,4vw,28px)!important;
  border:1px solid var(--line,var(--omi-line))!important;
  border-radius:var(--omi-radius-lg)!important;
  background:var(--panel,#fff)!important;
  box-shadow:var(--omi-shadow)!important;
  transform:none!important;
}
body.legacy-app .start-card:hover{transform:none!important;box-shadow:var(--omi-shadow)!important}
body.legacy-app .start-card>h3{font-size:clamp(1.55rem,4vw,2.1rem);margin:0 0 16px!important;letter-spacing:-.03em}
body.legacy-app .start-card>.eyebrow,
body.legacy-app #modeInfo,
body.legacy-app .live-code-note,
body.legacy-app .integration-note{display:none!important}
body.legacy-app .mode-cards{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;margin:0 0 18px!important;
}
body.legacy-app .mode-card{
  min-height:62px!important;padding:12px 14px!important;border-radius:16px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;
  background:#f7faf9!important;border:1px solid var(--line,var(--omi-line))!important;
  box-shadow:none!important;
}
body.legacy-app .mode-card:hover{transform:translateY(-1px)!important;border-color:color-mix(in srgb,var(--accent) 55%,var(--line))!important}
body.legacy-app .mode-card.active{
  background:color-mix(in srgb,var(--accent) 9%,#fff)!important;
  border:2px solid var(--accent)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)!important;
}
body.legacy-app .mode-card.active:after{
  width:21px!important;height:21px!important;right:8px!important;top:8px!important;font-size:.72rem!important;
}
body.legacy-app .mode-card strong{font-size:.93rem;line-height:1.2}
body.legacy-app .mode-card small,
body.legacy-app .version-badge{display:none!important}
body.legacy-app .module-picker{
  margin:0 0 14px!important;padding:13px!important;border-radius:16px!important;
  background:#fbfcfc!important;border:1px solid var(--line,var(--omi-line))!important;
}
body.legacy-app .module-summary{margin-top:7px!important;font-size:.74rem!important}
body.legacy-app label{margin:.65rem 0!important;font-size:.88rem}
body.legacy-app input,
body.legacy-app select,
body.legacy-app textarea{
  min-height:46px;border-radius:13px!important;background:#fff!important;
  border:1px solid var(--line,var(--omi-line))!important;padding:.75rem .82rem!important;
}
body.legacy-app .student-picker{gap:10px!important}
body.legacy-app .student-meta{margin:5px 0 10px!important}
body.legacy-app .meta-chip{font-size:.7rem!important;padding:5px 8px!important}
body.legacy-app .check-row{
  padding:10px 12px;border-radius:14px;background:#f5f9f7;border:1px solid var(--line,var(--omi-line));
  color:var(--text,var(--omi-ink))!important;font-size:.82rem!important;align-items:center!important;
}
body.legacy-app .check-row input{margin:0!important;min-height:auto!important}
body.legacy-app .primary-btn,
body.legacy-app .secondary-btn,
body.legacy-app .danger-btn,
body.legacy-app .soft-btn{
  min-height:44px;border-radius:13px!important;padding:.7rem .95rem!important;
  box-shadow:none!important;font-weight:850!important;
}
body.legacy-app .start-card>.primary-btn{margin-top:10px;font-size:.98rem}

/* Layar soal */
body.legacy-app .exam-layout.active{
  grid-template-columns:270px minmax(0,900px)!important;
  justify-content:center!important;gap:16px!important;max-width:1240px!important;
}
body.legacy-app .sidebar{
  top:82px!important;height:calc(100dvh - 98px)!important;
  border-radius:20px!important;padding:15px!important;box-shadow:none!important;
  background:rgba(255,255,255,.96)!important;
}
body.legacy-app .side-head small{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
body.legacy-app .side-head b{font-size:.9rem}
body.legacy-app .timer-card{border-radius:16px!important;padding:13px!important;margin:12px 0!important;box-shadow:none!important}
body.legacy-app .palette{gap:6px!important}
body.legacy-app .palette button{border-radius:9px!important}
body.legacy-app .exam-main{width:100%;max-width:900px;margin:0 auto}
body.legacy-app .exam-top{margin-bottom:9px!important}
body.legacy-app .question-card{
  padding:clamp(17px,3vw,28px)!important;border-radius:24px!important;
  box-shadow:var(--omi-shadow)!important;background:var(--panel,#fff)!important;
  transform:none!important;
}
body.legacy-app .q-num{width:43px!important;height:43px!important;border-radius:13px!important}
body.legacy-app .tag{font-size:.68rem!important;padding:.28rem .55rem!important}
body.legacy-app .stimulus{margin:16px 0!important;padding:15px!important;border-radius:14px!important}
body.legacy-app .prompt{font-size:1rem!important;line-height:1.65;margin:16px 0!important}
body.legacy-app .options{gap:9px!important}
body.legacy-app .option{
  border-radius:14px!important;padding:11px!important;box-shadow:none!important;
  transform:none!important;background:var(--panel,#fff)!important;
}
body.legacy-app .option:hover{transform:none!important;background:color-mix(in srgb,var(--accent) 5%,var(--panel))!important}
body.legacy-app .option-marker{border-radius:10px!important}
body.legacy-app .confidence{margin-top:17px!important;padding-top:15px!important}
body.legacy-app .confidence small{display:none}
body.legacy-app .q-nav{margin-top:10px!important}
body.legacy-app .q-nav button{min-width:124px}
body.legacy-app .scaffold-panel{border-radius:18px!important}
body.legacy-app .tutor-head{padding:14px!important}
body.legacy-app .scaffold-step{padding:14px!important}

/* Hasil */
body.legacy-app #resultScreen{max-width:1050px!important}
body.legacy-app .result-hero{
  border-radius:24px!important;padding:clamp(22px,4vw,32px)!important;box-shadow:var(--omi-shadow)!important;
}
body.legacy-app .result-hero h2{margin:.2rem 0!important}
body.legacy-app .result-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
body.legacy-app .result-card{border-radius:20px!important;padding:18px!important;box-shadow:none!important}
body.legacy-app .result-grid{gap:14px!important;margin-top:14px!important}
body.legacy-app .result-card>p{color:var(--muted);font-size:.88rem}
body.legacy-app footer{display:none!important}

@media(max-width:900px){
  body.legacy-app .exam-layout.active{display:block!important;padding:10px 10px 88px!important}
  body.legacy-app .sidebar{top:72px!important;inset:72px 9px 74px!important;height:auto!important}
  body.legacy-app .q-nav{padding:8px 10px max(10px,env(safe-area-inset-bottom))!important}
  body.legacy-app .question-card{box-shadow:none!important;border-radius:20px!important}
}
@media(max-width:600px){
  body.legacy-app .app-header{padding:9px 10px!important}
  body.legacy-app .brand h1{max-width:35vw!important}
  body.legacy-app .live-status{display:none!important}
  body.legacy-app .legacy-home-link,
  body.legacy-app .icon-btn{width:38px;height:38px;border-radius:12px!important;font-size:.82rem}
  body.legacy-app .mode-cards{grid-template-columns:1fr 1fr!important}
  body.legacy-app .mode-card{min-height:56px!important;padding:10px!important}
  body.legacy-app .student-picker,
  body.legacy-app .field-grid{grid-template-columns:1fr!important}
  body.legacy-app .screen{padding:11px!important}
  body.legacy-app #welcomeScreen{padding-top:22px!important}
  body.legacy-app .start-card{padding:16px!important;border-radius:22px!important;box-shadow:none!important}
  body.legacy-app .result-grid{grid-template-columns:1fr!important}
  body.legacy-app .result-hero{grid-template-columns:1fr!important}
  body.legacy-app .score-ring{width:105px!important;height:105px!important}
}
@media(max-width:390px){
  body.legacy-app .brand .logo{width:38px!important;height:38px!important}
  body.legacy-app .header-actions{gap:3px}
  body.legacy-app .legacy-home-link,
  body.legacy-app .icon-btn{width:35px;height:35px;font-size:.75rem}
  body.legacy-app .mode-card strong{font-size:.82rem}
}

/* ===== Halaman lama umum ===== */
body.omi-page{
  background:linear-gradient(180deg,#f9fbfa 0%,#eef5f2 100%)!important;
  color:var(--omi-ink)!important;min-height:100dvh;
}
body.omi-page .top,
body.omi-page header:not(.app-header):not(.topbar){
  background:rgba(255,255,255,.94)!important;border-bottom:1px solid var(--omi-line)!important;
  box-shadow:none!important;backdrop-filter:blur(16px)!important;
}
body.omi-page .wrap,
body.omi-page main{max-width:1160px!important}
body.omi-page .hero{
  background:#fff!important;color:var(--omi-ink)!important;border:1px solid var(--omi-line)!important;
  border-radius:var(--omi-radius-lg)!important;padding:clamp(20px,4vw,34px)!important;
  box-shadow:var(--omi-shadow)!important;
}
body.omi-page .hero:after{display:none!important}
body.omi-page .hero h1{font-size:clamp(1.8rem,5vw,3rem)!important;line-height:1.08!important;max-width:none!important;margin:.15rem 0!important}
body.omi-page .hero p,
body.omi-page .hero .notice,
body.omi-page .hero .stats{display:none!important}
body.omi-page .eyebrow,
body.omi-page .hero>small{color:var(--omi-gold)!important}
body.omi-page .grid{gap:12px!important}
body.omi-page .card,
body.omi-page .module,
body.omi-page .panel,
body.omi-page .board,
body.omi-page .auth{
  border:1px solid var(--omi-line)!important;border-radius:20px!important;
  box-shadow:none!important;background:#fff!important;
}
body.omi-page input,
body.omi-page select{
  min-height:44px;border-radius:12px!important;border:1px solid var(--omi-line)!important;background:#fff!important;
}
body.omi-page .btn,
body.omi-page button,
body.omi-page .open,
body.omi-page .buttons a{
  border-radius:12px!important;box-shadow:none!important;transition:.18s ease!important;
}
body.omi-page .btn:hover,
body.omi-page button:hover,
body.omi-page .open:hover,
body.omi-page .buttons a:hover{transform:translateY(-1px)!important}

/* Arsip */
body.omi-catalog .toolbar{position:sticky;top:68px;z-index:5;background:rgba(245,248,247,.94);backdrop-filter:blur(12px);padding:12px 0!important}
body.omi-catalog .card p{display:none!important}
body.omi-catalog .card h2{font-size:1rem!important;line-height:1.35!important;margin:10px 0 14px!important}
body.omi-catalog .card{padding:16px!important}
body.omi-catalog .tag{font-size:.68rem!important}
body.omi-catalog .count{font-size:.8rem!important;color:var(--omi-muted)!important}

/* Peta modul */
body.omi-modules .module{grid-template-columns:44px 1fr!important;padding:15px!important;gap:12px!important}
body.omi-modules .num{width:44px!important;height:44px!important;border-radius:13px!important}
body.omi-modules .module small,
body.omi-modules .module p{display:none!important}
body.omi-modules .module h2{margin:0 0 10px!important;font-size:1rem!important}
body.omi-modules .buttons a{padding:8px 10px!important;font-size:.74rem!important}

/* Monitoring */
body.omi-monitor .wrap{max-width:1420px!important;padding:16px!important}
body.omi-monitor .top{padding:10px clamp(12px,3vw,28px)!important}
body.omi-monitor .brand small{display:none!important}
body.omi-monitor .grid{grid-template-columns:330px 1fr!important;gap:14px!important}
body.omi-monitor .panel{padding:16px!important}
body.omi-monitor .panel h2,
body.omi-monitor .panel h3{margin-bottom:10px!important}
body.omi-monitor .session-card{border-radius:14px!important;padding:11px!important}
body.omi-monitor .board-head{border-radius:19px 19px 0 0!important;padding:18px!important}
body.omi-monitor .board-title h1{font-size:clamp(1.35rem,3vw,2.1rem)!important}
body.omi-monitor .stats{gap:7px!important;margin-top:13px!important}
body.omi-monitor .stat{padding:10px!important;border-radius:12px!important}
body.omi-monitor .stat b{font-size:1.2rem!important}
body.omi-monitor .controls{gap:7px!important;padding:10px!important}
body.omi-monitor .toggle-row{padding:0 10px 10px!important}
body.omi-monitor .footer-note{display:none!important}
body.omi-monitor .auth{padding:24px!important;box-shadow:var(--omi-shadow)!important}
@media(max-width:1050px){body.omi-monitor .grid{grid-template-columns:1fr!important}}

/* Diagnostik */
body.omi-diagnostic .diag{padding-top:32px!important}
body.omi-diagnostic .diag-item{border-radius:14px!important;box-shadow:none!important}

/* Error */
body.omi-error{background:linear-gradient(180deg,#f9fbfa,#eef5f2)!important}
body.omi-error .box{background:#fff;border:1px solid var(--omi-line);border-radius:24px;box-shadow:var(--omi-shadow);min-width:min(420px,calc(100vw - 28px))}
body.omi-error .box b{font-size:3rem!important}

@media(max-width:760px){
  body.omi-page .wrap,body.omi-page main{padding-left:12px!important;padding-right:12px!important}
  body.omi-page .hero{border-radius:22px!important;box-shadow:none!important}
  body.omi-modules .grid{grid-template-columns:1fr!important}
  body.omi-catalog .toolbar{top:62px}
}

/* Kontrol header aplikasi lama: ringkas di HP, fungsi tetap tersedia. */
body.legacy-app .legacy-tool-panel{display:flex;gap:6px;align-items:center}
body.legacy-app .legacy-tools-toggle{display:none!important}
@media(max-width:600px){
  body.legacy-app .brand h1{max-width:44vw!important}
  body.legacy-app .legacy-tool-panel{
    display:none;position:absolute;right:10px;top:62px;z-index:90;
    padding:8px;background:rgba(255,255,255,.98);border:1px solid var(--line,var(--omi-line));
    border-radius:15px;box-shadow:var(--omi-shadow);gap:6px;
  }
  body.legacy-app .app-header.tools-open .legacy-tool-panel{display:flex}
  body.legacy-app .legacy-tools-toggle{display:inline-grid!important}
  body.legacy-app #paletteBtn{display:none!important}
  body.legacy-app.legacy-exam-active #paletteBtn{display:inline-grid!important}
}

/* ===== OMI Pro 5.0 — mobile-native refinement for legacy subject apps ===== */
body.legacy-app{background:radial-gradient(circle at 10% 0,color-mix(in srgb,var(--accent) 9%,#fff) 0,transparent 28rem),linear-gradient(180deg,#f9fbfa,#eef5f2)!important}
body.legacy-app .app-header{position:sticky!important;top:0!important;box-shadow:0 6px 24px rgba(18,62,52,.055)!important;z-index:70!important}
body.legacy-app .logo{background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 68%,#072b24))!important;box-shadow:0 12px 27px color-mix(in srgb,var(--accent) 27%,transparent),inset 0 1px 0 rgba(255,255,255,.32)!important;transform:translateZ(0)}
body.legacy-app .start-card{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 16%,var(--line))!important;box-shadow:0 22px 60px rgba(18,62,52,.10)!important}
body.legacy-app .start-card:before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-70px;top:-75px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 20%,#fff),transparent 70%);pointer-events:none}
body.legacy-app .start-card>*{position:relative;z-index:1}
body.legacy-app .mode-card{box-shadow:0 5px 18px rgba(18,62,52,.04)!important;min-height:84px;transition:border-color .18s ease,background .18s ease,transform .14s ease!important}
body.legacy-app .mode-card.active{background:color-mix(in srgb,var(--accent) 6%,#fff)!important;box-shadow:inset 0 0 0 1px var(--accent),0 9px 25px color-mix(in srgb,var(--accent) 10%,transparent)!important}
body.legacy-app .question-card{border:1px solid color-mix(in srgb,var(--accent) 11%,var(--line))!important;box-shadow:0 18px 50px rgba(18,62,52,.08)!important}
body.legacy-app .q-num{background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 65%,#133))!important;box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 25%,transparent)!important}
body.legacy-app .option{min-height:58px;box-shadow:0 4px 16px rgba(18,62,52,.025);will-change:auto;transform:translateZ(0)}
body.legacy-app .option.selected{box-shadow:inset 0 0 0 1px var(--accent),0 7px 22px color-mix(in srgb,var(--accent) 8%,transparent)!important}
body.legacy-app .result-card{box-shadow:0 16px 44px rgba(18,62,52,.07)!important}
body.legacy-app .score-ring{filter:drop-shadow(0 16px 26px color-mix(in srgb,var(--accent) 20%,transparent))}
body.legacy-app .sidebar{scrollbar-width:thin;overscroll-behavior:contain}
body.legacy-app textarea{line-height:1.55}
@media(max-width:920px){
  body.legacy-app .sidebar{top:0!important;height:100dvh!important;padding-top:max(18px,env(safe-area-inset-top))!important;border-radius:0 24px 24px 0!important;box-shadow:24px 0 70px rgba(11,43,35,.22)!important}
  body.legacy-app .exam-main{padding-bottom:8px}
}
@media(max-width:600px){
  body.legacy-app .app-header{min-height:62px!important;padding:9px 10px!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
  body.legacy-app .screen{padding:12px!important}
  body.legacy-app #welcomeScreen{padding-top:16px!important}
  body.legacy-app .start-card{padding:18px!important;border-radius:22px!important;box-shadow:0 12px 38px rgba(18,62,52,.075)!important}
  body.legacy-app .mode-cards{grid-template-columns:1fr!important}
  body.legacy-app .mode-card{min-height:65px!important;padding:12px!important}
  body.legacy-app .field-grid{grid-template-columns:1fr!important;gap:8px!important}
  body.legacy-app .question-card{padding:16px!important;border-radius:21px!important;box-shadow:0 10px 34px rgba(18,62,52,.065)!important}
  body.legacy-app .stimulus{padding:14px!important;margin:14px 0!important}
  body.legacy-app .prompt{font-size:1rem!important;line-height:1.62!important;margin:16px 0!important}
  body.legacy-app .option{padding:12px!important;border-radius:15px!important;gap:10px!important;min-height:54px}
  body.legacy-app .confidence{align-items:flex-start!important;flex-direction:column!important}
  body.legacy-app .q-nav{position:sticky;bottom:8px;z-index:25;background:rgba(248,251,250,.92);backdrop-filter:blur(12px);border:1px solid var(--line);padding:7px;border-radius:17px;box-shadow:0 12px 34px rgba(18,62,52,.11)}
  body.legacy-app .q-nav .primary-btn,body.legacy-app .q-nav .secondary-btn{min-height:44px}
  body.legacy-app .result-hero{padding:21px!important;border-radius:22px!important;grid-template-columns:1fr!important;text-align:center}
  body.legacy-app .score-ring{margin:auto}
  body.legacy-app .result-grid{grid-template-columns:1fr!important;gap:10px!important}
  body.legacy-app .profile-row{grid-template-columns:1fr 50px!important}.profile-row>span{grid-column:1/-1}
}

@media(max-width:760px){
  body.legacy-app .app-header,body.legacy-app .q-nav,body.omi-catalog .toolbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body.legacy-app .q-nav{background:#f8fbfa!important}
  body.legacy-app .option{will-change:auto!important}
}