/* WhoKnows — clean editorial redesign */
:root {
  --p:#f15a37; --p2:#c94328; --p3:#fff0e9; --p4:#f6c7b5;
  --t:#35725e; --t2:#285846; --t3:#e5efe8;
  --pk:#b94c75; --pk2:#94385c; --pk3:#f6e8ed;
  --am:#a66b21; --am2:#865319; --am3:#f7eddb;
  --rd:#b53f34; --rd2:#943128; --rd3:#f8e7e4;
  --bg:#f7f4ed; --bg2:#eeebe3; --bg3:#f7f4ed;
  --text:#20201d; --text2:#68665f; --text3:#98958c; --border:#d8d4ca;
  --radius:10px; --radius-lg:16px; --radius-xl:24px; --card-shadow:none;
}
:root.dark-theme {
  --bg:#171816; --bg2:#20211e; --bg3:#131411; --text:#f3f0e8;
  --text2:#b6b3aa; --text3:#817f78; --border:#383a35;
  --p:#ff7657; --p2:#ff9a82; --p3:#31211c; --p4:#5d3026;
  --t:#72c6a8; --t2:#9bd8c1; --t3:#1d3029;
  --pk:#ef8bad; --pk2:#f2aac1; --pk3:#302127;
  --am:#e2ad62; --am2:#efc98f; --am3:#30281c;
  --rd:#ff8d80; --rd2:#ffb0a7; --rd3:#311f1c;
}
@media (prefers-color-scheme:dark) {
  :root:not(.light-theme) {
    --bg:#171816; --bg2:#20211e; --bg3:#131411; --text:#f3f0e8;
    --text2:#b6b3aa; --text3:#817f78; --border:#383a35;
    --p:#ff7657; --p2:#ff9a82; --p3:#31211c; --p4:#5d3026;
    --t:#72c6a8; --t2:#9bd8c1; --t3:#1d3029;
    --pk:#ef8bad; --pk2:#f2aac1; --pk3:#302127;
    --am:#e2ad62; --am2:#efc98f; --am3:#30281c;
    --rd:#ff8d80; --rd2:#ffb0a7; --rd3:#311f1c;
  }
}
html { scroll-behavior:smooth; }
body {
  font-family:Inter,"Helvetica Neue",Helvetica,Arial,sans-serif!important;
  font-size:16px; line-height:1.55; letter-spacing:-.01em;
  color:var(--text); background:var(--bg3)!important; background-image:none!important;
}
button,input,textarea,select { font-family:inherit!important; }
.bg-blob,.shooting-stars,.hero-bento::after,.feat-card::before { display:none!important; }
.app-container { background:var(--bg3); }

/* Navigation */
.modern-navbar {
  min-height:78px; padding:0 5vw!important;
  background:color-mix(in srgb,var(--bg) 92%,transparent)!important;
  border:0!important; border-bottom:1px solid var(--border)!important;
  box-shadow:none!important; backdrop-filter:blur(18px);
}
.mn-logo,.mh-logo { gap:10px!important; font-size:20px!important; font-weight:650!important; letter-spacing:-.04em!important; text-transform:none!important; }
.mn-logo i,.mh-logo i {
  width:30px!important; height:30px!important; color:var(--text)!important;
  background:transparent!important; border:1px solid var(--border)!important;
  border-radius:50%!important; box-shadow:none!important;
}
.mn-links { gap:2px!important; }
.mn-btn {
  padding:9px 14px!important; color:var(--text2)!important; border:0!important;
  border-radius:999px!important; font-size:13px!important; font-weight:550!important; text-transform:none!important;
}
.mn-btn:hover { color:var(--text)!important; background:var(--bg2)!important; }
.mn-btn.active { color:var(--bg)!important; background:var(--text)!important; border:0!important; box-shadow:none!important; }
.mn-profile-btn {
  min-height:42px; padding:10px 16px!important; color:var(--text)!important;
  background:transparent!important; border:1px solid var(--border)!important;
  border-radius:999px!important; box-shadow:none!important; font-size:13px!important;
  font-weight:550!important; text-transform:none!important;
}
.mn-profile-btn:hover { color:var(--bg)!important; background:var(--text)!important; border-color:var(--text)!important; box-shadow:none!important; transform:none!important; }
.mobile-header {
  min-height:64px; padding:0 20px!important;
  background:color-mix(in srgb,var(--bg) 94%,transparent)!important;
  border:0!important; border-bottom:1px solid var(--border)!important;
  box-shadow:none!important; backdrop-filter:blur(18px);
}
.bottom-nav {
  width:calc(100% - 24px)!important; left:12px!important; bottom:12px!important;
  padding:8px 4px calc(8px + env(safe-area-inset-bottom))!important;
  background:color-mix(in srgb,var(--text) 94%,transparent)!important;
  border:0!important; border-radius:18px!important; backdrop-filter:blur(18px);
  box-shadow:0 12px 36px rgba(0,0,0,.14)!important;
}
.b-btn { color:color-mix(in srgb,var(--bg) 65%,transparent)!important; font-size:10px!important; font-weight:550!important; text-transform:none!important; }
.b-btn i { font-size:20px!important; }
.b-btn.active { color:var(--bg)!important; }
.b-btn.active i { padding:0!important; color:var(--p)!important; background:none!important; border:0!important; box-shadow:none!important; }

/* Layout and surfaces */
.page { padding-top:54px!important; }
#page-home { max-width:1400px!important; }
#home-bento,#toolkit-bento,#hotline-bento,#admin-bento { gap:18px!important; }
#home-bento { display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; align-items:stretch; }
.form-card,.feat-card,.riwayat-card,.modal-box,.admin-stat-card {
  color:var(--text)!important; background:var(--bg)!important;
  border:1px solid var(--border)!important; border-radius:18px!important;
  box-shadow:none!important; backdrop-filter:none!important;
}
.form-card { padding:32px!important; }
.form-card h4 { font-size:19px!important; font-weight:600!important; letter-spacing:-.035em!important; text-transform:none!important; }
.page h1,.page h2,.page h3,.page h4 { text-transform:none!important; }
.page h2 { font-weight:520!important; letter-spacing:-.055em!important; }
.page [style*="box-shadow"] { box-shadow:none!important; }
.page [style*="border: 3px"],.page [style*="border:3px"] { border-width:1px!important; }
.page [style*="text-transform:uppercase"],.page [style*="text-transform: uppercase"] { text-transform:none!important; }

/* Editorial home */
.hero-bento {
  grid-column:span 8!important; min-height:580px;
  padding:clamp(34px,5vw,70px)!important; color:#f9f5ed!important;
  background:#23231f!important; border:0!important; border-radius:26px!important; box-shadow:none!important;
}
.hero-inner { max-width:860px; }
.hero h1 {
  max-width:850px; margin-bottom:28px!important; color:#f9f5ed!important;
  background:none!important; -webkit-text-fill-color:currentColor!important;
  font-size:clamp(58px,6.4vw,92px)!important; font-weight:480!important;
  line-height:.91!important; letter-spacing:-.07em!important; text-transform:none!important;
}
.hero p {
  max-width:650px!important; margin:0 0 36px!important; color:#c9c6bd!important;
  font-size:clamp(17px,1.6vw,21px)!important; font-weight:400!important; line-height:1.55!important;
}
.hero-badge {
  margin-bottom:42px!important; padding:8px 13px!important; color:#f9f5ed!important;
  background:transparent!important; border:1px solid #57574f!important;
  border-radius:999px!important; box-shadow:none!important; font-size:11px!important;
  font-weight:550!important; letter-spacing:.08em!important;
}
.hero-floating-icon {
  width:190px; height:190px; display:none; place-items:center; margin:0 2vw 0 40px!important;
  background:var(--p); border-radius:50%; filter:none!important;
  font-size:92px!important; animation:clean-float 5s ease-in-out infinite!important;
}
@keyframes clean-float { 50% { transform:translateY(-10px) rotate(2deg); } }
.hero-btns { gap:10px!important; }
.hbtn,.reg-btn,.qbtn,.btn-view,.btn-delete {
  min-height:50px; padding:13px 20px!important; border:1px solid var(--border)!important;
  border-radius:999px!important; box-shadow:none!important; font-size:14px!important;
  font-weight:580!important; text-transform:none!important;
  transition:background .2s,color .2s,border-color .2s,transform .2s!important;
}
.hbtn:hover,.reg-btn:hover,.qbtn:hover,.btn-view:hover,.btn-delete:hover { transform:translateY(-2px)!important; box-shadow:none!important; }
.hero .hbtn { color:#f9f5ed!important; background:transparent!important; border-color:#57574f!important; }
.hero .hbtn-p { color:#201f1c!important; background:#f9f5ed!important; border-color:#f9f5ed!important; }
.hero .hbtn:hover { border-color:#f9f5ed!important; }

.mood-bento { grid-column:span 4!important; min-height:580px; padding:40px 32px!important; text-align:left!important; justify-content:center!important; }
.mood-bento h4 { justify-content:flex-start!important; margin-bottom:26px!important; font-size:23px!important; }
.mood-bento>div:first-of-type { display:grid!important; grid-template-columns:1fr 1fr; justify-content:stretch!important; gap:8px!important; }
.mood-btn {
  width:100%!important; max-width:none!important; min-width:0!important; padding:12px 14px!important;
  color:var(--text)!important; background:transparent!important;
  border:1px solid var(--border)!important; border-radius:999px!important;
  box-shadow:none!important; font-size:13px!important; font-weight:520!important; text-transform:none!important;
}
.mood-btn span { font-size:18px!important; }
.mood-btn:hover { color:var(--bg)!important; background:var(--text)!important; border-color:var(--text)!important; box-shadow:none!important; transform:translateY(-2px)!important; }
.mood-bento .mood-btn:last-child { grid-column:1 / -1; }
.stat-strip {
  grid-column:span 12!important; display:grid!important; grid-template-columns:repeat(3,1fr)!important;
  background:var(--p)!important; border:0!important; border-radius:18px!important; box-shadow:none!important;
}
.stat-item {
  display:flex; align-items:center; justify-content:space-between; padding:24px 28px!important;
  background:none!important; border:0!important; border-right:1px solid rgba(255,255,255,.25)!important; text-align:left!important;
}
.stat-item:last-child { border-right:0!important; }
.stat-num { margin:0!important; color:#fff!important; font-size:36px!important; font-weight:520!important; letter-spacing:-.05em!important; }
.stat-lbl { padding:0!important; color:rgba(255,255,255,.8)!important; background:none!important; border:0!important; box-shadow:none!important; font-size:11px!important; font-weight:550!important; letter-spacing:.04em!important; }
.feat-card { min-height:270px; padding:30px!important; background:var(--bg)!important; cursor:pointer; }
.fc-1,.fc-2,.fc-3,.fc-4 { background:var(--bg)!important; }
.feat-card:hover { border-color:var(--text2)!important; box-shadow:none!important; transform:translateY(-4px)!important; }
.feat-icon-wrap {
  width:46px!important; height:46px!important; margin-bottom:auto!important;
  color:var(--text)!important; background:var(--bg2)!important; border:0!important;
  border-radius:50%!important; box-shadow:none!important; font-size:22px!important;
}
.feat-card h3 { margin-top:50px; font-size:20px!important; font-weight:600!important; text-transform:none!important; letter-spacing:-.035em!important; }
.feat-card p { color:var(--text2)!important; font-size:14px!important; font-weight:400!important; }

/* Forms */
.fgrp { margin-bottom:22px!important; }
.fgrp label { margin-bottom:8px!important; color:var(--text2)!important; font-size:12px!important; font-weight:550!important; letter-spacing:.01em!important; text-transform:none!important; }
.fgrp input,.fgrp textarea,.fgrp select {
  padding:14px 16px!important; color:var(--text)!important;
  background:color-mix(in srgb,var(--bg) 80%,var(--bg2))!important;
  border:1px solid var(--border)!important; border-radius:10px!important;
  box-shadow:none!important; font-size:15px!important; font-weight:400!important;
}
.fgrp input:focus,.fgrp textarea:focus,.fgrp select:focus { outline:2px solid color-mix(in srgb,var(--p) 35%,transparent)!important; border-color:var(--p)!important; }
.err-msg { border:0!important; border-radius:10px!important; box-shadow:none!important; text-transform:none!important; }

/* Toolkit, profile, hotline */
.p3k-header,.hl-header-bento {
  padding:48px!important; color:var(--bg)!important; background:var(--text)!important;
  border:0!important; border-radius:24px!important; box-shadow:none!important;
}
.p3k-header h2,.hl-header-bento h2 { color:var(--bg)!important; font-size:clamp(38px,5vw,66px)!important; font-weight:500!important; text-transform:none!important; letter-spacing:-.055em!important; }
.p3k-header p { color:color-mix(in srgb,var(--bg) 70%,transparent)!important; font-weight:400!important; }
.p3k-header>div:first-child { color:var(--bg)!important; background:transparent!important; border:1px solid #57574f!important; border-radius:50%!important; box-shadow:none!important; }
.p3k-card { padding:38px!important; }
.p3k-card h3 { font-weight:600!important; text-transform:none!important; letter-spacing:-.04em!important; }
.p3k-card li { border:1px solid var(--border)!important; border-radius:12px!important; box-shadow:none!important; font-size:15px!important; font-weight:500!important; text-transform:none!important; }
.hl-form-bento { padding:42px!important; }
.hl-side-bento .form-card { padding:30px!important; border:1px solid var(--border)!important; border-radius:18px!important; box-shadow:none!important; }
.hl-card-green { background:var(--t3)!important; }
.hl-card-red { background:var(--rd3)!important; }
.profil-grid,.profil-kiri,.profil-kanan { gap:18px!important; }
.mood-card { background:var(--bg2)!important; border:1px solid var(--border)!important; border-radius:12px!important; box-shadow:none!important; }

/* Quiz */
.prog-track { height:5px!important; background:var(--bg2)!important; border:0!important; border-radius:99px!important; box-shadow:none!important; }
.prog-fill { background:var(--p)!important; border:0!important; }
#page-quiz .form-card { padding:clamp(24px,5vw,54px)!important; }
#q-text { font-size:clamp(28px,4vw,42px)!important; font-weight:550!important; line-height:1.12!important; letter-spacing:-.045em!important; text-transform:none!important; }
.opt { padding:16px 18px!important; background:transparent!important; border:1px solid var(--border)!important; border-radius:12px!important; box-shadow:none!important; font-size:15px!important; font-weight:450!important; text-transform:none!important; }
.opt:hover { border-color:var(--text2)!important; transform:none!important; box-shadow:none!important; }
.opt.selected { color:var(--text)!important; background:var(--p3)!important; border-color:var(--p)!important; box-shadow:none!important; }

/* Admin and data tables */
.admin-tabs-wrapper { border:1px solid var(--border)!important; border-radius:18px!important; box-shadow:none!important; overflow:hidden; }
.admin-tab { padding:15px 18px!important; font-size:13px!important; font-weight:550!important; text-transform:none!important; }
.admin-tab.active { color:var(--text)!important; background:var(--bg2)!important; box-shadow:inset 0 -2px var(--p)!important; }
.admin-stat-card { padding:24px!important; }
.admin-stat-num { font-size:38px!important; font-weight:550!important; }
.admin-stat-lbl { font-size:12px!important; font-weight:500!important; text-transform:none!important; }
.admin-table { border-collapse:collapse!important; }
.admin-table th { padding:14px 16px!important; color:var(--text2)!important; background:var(--bg2)!important; border-bottom:1px solid var(--border)!important; font-size:11px!important; font-weight:600!important; letter-spacing:.04em!important; text-transform:uppercase!important; }
.admin-table td { border-bottom:1px solid var(--border)!important; }
#page-admin [style*="border:3px"],#page-super-admin [style*="border:3px"] { border-width:1px!important; box-shadow:none!important; }

/* Dialog and chat */
.my-swal-popup { padding:28px!important; color:var(--text)!important; background:var(--bg)!important; border:1px solid var(--border)!important; border-radius:18px!important; box-shadow:0 24px 80px rgba(0,0,0,.18)!important; }
.my-swal-title { font-size:25px!important; font-weight:600!important; text-transform:none!important; letter-spacing:-.04em!important; }
.my-swal-confirm,.my-swal-cancel { border-width:1px!important; border-radius:999px!important; box-shadow:none!important; font-size:13px!important; font-weight:550!important; text-transform:none!important; }
.chat-main-btn { height:52px!important; color:#f9f5ed!important; background:#23231f!important; border:0!important; border-radius:999px!important; box-shadow:0 12px 30px rgba(0,0,0,.16)!important; }
.chat-main-btn span { font-weight:550!important; text-transform:none!important; }
.chat-opt-btn { border:1px solid var(--border)!important; box-shadow:none!important; }

/* Explicit dark-mode contrast fixes for legacy inline colors */
:root.dark-theme .hl-card-green h3,
:root.dark-theme .hl-card-green [style*="color: #14532D"],
:root.dark-theme .hl-card-green [style*="color: #16A34A"] { color:#94dfbd!important; }
:root.dark-theme .hl-card-red h3,
:root.dark-theme .hl-card-red [style*="color: #7F1D1D"],
:root.dark-theme .hl-card-red [style*="color: #DC2626"] { color:#ff9d92!important; }
:root.dark-theme .p3k-card li [style*="background:var(--text)"] { background:var(--p3)!important; color:var(--p)!important; }
:root.dark-theme .admin-table td { color:var(--text2)!important; }
:root.dark-theme .admin-table td:first-child { color:var(--text)!important; }
:root.dark-theme .form-card[style*="background:var(--rd3)"] { background:var(--rd3)!important; }
:root.dark-theme .my-swal-cancel { color:var(--text)!important; background:var(--bg2)!important; }
:root.dark-theme input::placeholder,
:root.dark-theme textarea::placeholder { color:#85827a!important; opacity:1; }

@media (prefers-color-scheme:dark) {
  :root:not(.light-theme) .hl-card-green h3,
  :root:not(.light-theme) .hl-card-green [style*="color: #14532D"],
  :root:not(.light-theme) .hl-card-green [style*="color: #16A34A"] { color:#94dfbd!important; }
  :root:not(.light-theme) .hl-card-red h3,
  :root:not(.light-theme) .hl-card-red [style*="color: #7F1D1D"],
  :root:not(.light-theme) .hl-card-red [style*="color: #DC2626"] { color:#ff9d92!important; }
  :root:not(.light-theme) .admin-table td { color:var(--text2)!important; }
  :root:not(.light-theme) .admin-table td:first-child { color:var(--text)!important; }
  :root:not(.light-theme) input::placeholder,
  :root:not(.light-theme) textarea::placeholder { color:#85827a!important; opacity:1; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}
@media (max-width:1100px) {
  .hero-bento { min-height:500px; }
  .hero-floating-icon { display:none!important; }
  .hero-bento,.mood-bento,.stat-strip { grid-column:span 12!important; }
  .mood-bento { min-height:auto; }
  .mood-bento>div:first-of-type { grid-template-columns:repeat(5,1fr); }
  .mood-bento .mood-btn:last-child { grid-column:auto; }
  .feat-bento { grid-column:span 6!important; }
  .page { padding-left:20px!important; padding-right:20px!important; }
}
@media (max-width:640px) {
  .main-content { padding-bottom:105px!important; }
  .page { padding:26px 16px 0!important; }
  #home-bento,#toolkit-bento,#hotline-bento,#admin-bento { gap:12px!important; }
  .hero-bento { min-height:540px; padding:34px 24px!important; align-items:flex-end!important; text-align:left!important; }
  .hero h1 { font-size:clamp(52px,16vw,72px)!important; text-align:left!important; }
  .hero p { margin:0 0 28px!important; text-align:left!important; font-size:16px!important; }
  .hero-btns { align-items:stretch!important; justify-content:flex-start!important; }
  .hero .hbtn { width:100%; justify-content:center; }
  .hero-badge { margin-bottom:30px!important; }
  .mood-bento { padding:28px 22px!important; text-align:left!important; }
  .mood-bento h4 { justify-content:flex-start!important; }
  .mood-bento>div:first-of-type { grid-template-columns:1fr 1fr; }
  .mood-bento .mood-btn:last-child { grid-column:1 / -1; }
  .stat-strip { grid-template-columns:1fr!important; }
  .stat-item { border-right:0!important; border-bottom:1px solid rgba(255,255,255,.25)!important; }
  .stat-item:last-child { border-bottom:0!important; }
  .feat-bento { width:100%!important; min-height:220px; }
  .feat-card h3 { margin-top:38px; }
  .form-card { padding:24px!important; }
  .p3k-header,.hl-header-bento { padding:32px 24px!important; text-align:left!important; align-items:flex-start!important; }
  .p3k-header>div:last-child { text-align:left!important; }
  .p3k-card { padding:26px!important; }
  .responsive-row { gap:0!important; }
  .responsive-row .fgrp { width:100%; }
  .admin-tab-content { padding:18px!important; }
  .chat-widget-container { right:16px!important; bottom:98px!important; }
  .chat-main-btn span:last-child { display:none; }
  .chat-main-btn { width:52px!important; padding:0!important; justify-content:center; }
}

/* Super Admin — enterprise operations console */
.sa-sidebar-brand,.sa-nav-label { display:none; }
.google-auth-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:var(--text3); font-size:11px; text-transform:uppercase; }
.google-auth-divider::before,.google-auth-divider::after { content:""; flex:1; height:1px; background:var(--border); }
.google-auth-button {
  width:100%; min-height:48px; display:flex; align-items:center; justify-content:center; gap:11px;
  border:1px solid var(--border); border-radius:9px; color:var(--text); background:var(--bg);
  font:650 13px/1 inherit; cursor:pointer; box-shadow:none;
}
.google-auth-button:hover { background:var(--bg2); border-color:var(--text3); }
.google-g { display:grid; place-items:center; width:23px; height:23px; border-radius:50%; color:#4285f4; background:#fff; border:1px solid #e5e7eb; font-weight:800; }
@media (min-width:768px) {
  body.superadmin-mode {
    background:#f4f6f8!important;
  }
  body.superadmin-mode .modern-navbar,
  body.superadmin-mode #ticker-wrap,
  body.superadmin-mode .bottom-nav,
  body.superadmin-mode #custom-chat-widget {
    display:none!important;
  }
  body.superadmin-mode .main-content {
    min-height:100vh; padding:0!important; background:#f4f6f8!important;
  }
  #page-superadmin {
    width:100%!important; max-width:none!important; min-height:100vh;
    margin:0!important; padding:0!important;
  }
  #page-superadmin>.page-inner-wrap {
    display:grid; grid-template-columns:244px minmax(0,1fr);
    grid-template-rows:auto 1fr; gap:0; width:100%; max-width:none!important;
    min-height:100vh; margin:0!important; background:#f4f6f8;
  }
  #page-superadmin .admin-tabs {
    grid-column:1; grid-row:1 / span 2; align-self:stretch;
    display:flex; flex-direction:column; flex-wrap:nowrap; gap:3px;
    min-height:100vh; padding:20px 14px 28px;
    overflow-y:auto; overflow-x:hidden; border:0!important;
    color:#d6dae3; background:#111827;
    scrollbar-color:#374151 transparent;
  }
  #page-superadmin .sa-sidebar-brand {
    display:flex; align-items:center; gap:11px; min-height:58px;
    margin:0 4px 20px; padding:0 8px 17px; border-bottom:1px solid #283244;
  }
  #page-superadmin .sa-sidebar-brand>span {
    display:grid; place-items:center; width:36px; height:36px;
    border-radius:10px; color:#fff; background:#6d5dfc; font-size:20px;
    box-shadow:0 8px 20px rgba(109,93,252,.24);
  }
  #page-superadmin .sa-sidebar-brand strong {
    display:block; color:#fff; font-size:15px; font-weight:720; letter-spacing:-.02em;
  }
  #page-superadmin .sa-sidebar-brand small {
    display:block; margin-top:2px; color:#7f8a9d; font-size:10px; text-transform:uppercase; letter-spacing:.12em;
  }
  #page-superadmin .sa-nav-label {
    display:block; margin:17px 12px 6px; color:#667085;
    font-size:9px; font-weight:750; letter-spacing:.14em; text-transform:uppercase;
  }
  #page-superadmin .admin-tab {
    flex:0 0 auto; justify-content:flex-start; width:100%; min-height:42px;
    padding:10px 12px!important; gap:11px; border:0!important;
    border-radius:8px!important; color:#9ca5b5!important; background:transparent!important;
    font-size:12px!important; font-weight:570!important; letter-spacing:0!important;
    text-transform:none!important; box-shadow:none!important;
  }
  #page-superadmin .admin-tab i { width:19px; font-size:18px; color:#7c8799; }
  #page-superadmin .admin-tab:hover { color:#f8fafc!important; background:#1d2736!important; }
  #page-superadmin .admin-tab.active {
    color:#fff!important; background:#273345!important;
  }
  #page-superadmin .admin-tab.active i { color:#9b8cff; }

  #page-superadmin .admin-header-strip {
    grid-column:2; grid-row:1; display:flex; min-height:104px;
    margin:0!important; padding:25px 34px!important; border:0!important;
    border-radius:0!important; color:#172033!important; background:#fff!important;
    box-shadow:inset 0 -1px #e5e9f0!important; overflow:visible;
  }
  #page-superadmin .admin-header-strip::before { display:none!important; }
  .sa-header-copy { position:relative; z-index:2; }
  .sa-header-eyebrow {
    display:flex; align-items:center; gap:7px; margin-bottom:7px;
    color:#788397; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  }
  .sa-live-dot {
    display:inline-block; width:7px; height:7px; border-radius:50%; background:#22c55e;
    box-shadow:0 0 0 4px rgba(34,197,94,.12);
  }
  #page-superadmin .sa-header-copy h2 {
    margin:0!important; color:#172033!important; font-size:27px!important;
    font-weight:680!important; letter-spacing:-.045em!important; line-height:1.08!important;
    text-transform:none!important;
  }
  #page-superadmin .sa-header-copy p {
    margin:5px 0 0!important; color:#7a8597!important; font-size:12px!important;
    font-weight:430!important; text-transform:none!important;
  }
  #page-superadmin .sa-header-copy p strong { color:#3f4b5f; font-weight:620; }
  .sa-header-actions { display:flex; align-items:center; gap:10px; position:relative; z-index:2; }
  .sa-header-date { margin-right:6px; color:#8490a2; font-size:11px; text-transform:capitalize; }
  .sa-icon-button,.sa-logout-button {
    display:inline-flex; align-items:center; justify-content:center; height:38px;
    border:1px solid #dfe4eb; border-radius:8px; color:#455166; background:#fff; cursor:pointer;
  }
  .sa-icon-button { width:38px; font-size:17px; }
  .sa-logout-button { gap:7px; padding:0 13px; font:600 11px/1 inherit; }
  .sa-icon-button:hover,.sa-logout-button:hover { border-color:#b8c0cc; background:#f8fafc; }

  #page-superadmin>.page-inner-wrap>.form-card {
    grid-column:2; grid-row:2; align-self:stretch; min-width:0;
    margin:0!important; padding:0!important; overflow:visible!important;
    border:0!important; border-radius:0!important; background:#f4f6f8!important; box-shadow:none!important;
  }
  #page-superadmin .admin-tab-content { padding:32px 34px 48px!important; }

  #sa-dashboard>div:first-child {
    grid-template-columns:repeat(5,minmax(0,1fr))!important; gap:12px!important; margin-bottom:18px!important;
  }
  #page-superadmin .admin-stat-card {
    position:relative; min-height:116px; padding:19px 20px!important;
    text-align:left!important; border:1px solid #e2e7ee!important;
    border-radius:10px!important; background:#fff!important; box-shadow:0 1px 2px rgba(15,23,42,.025)!important;
  }
  #page-superadmin .admin-stat-card:hover { transform:none!important; border-color:#cbd3df!important; box-shadow:0 8px 24px rgba(15,23,42,.055)!important; }
  #page-superadmin .admin-stat-num {
    margin:0 0 25px!important; color:#172033!important; font-size:31px!important;
    font-weight:690!important; letter-spacing:-.045em!important;
  }
  #page-superadmin .admin-stat-lbl {
    display:flex; align-items:center; color:#7b8799!important; font-size:10px!important;
    font-weight:620!important; letter-spacing:.02em!important; text-transform:none!important;
  }
  #page-superadmin .admin-stat-lbl i { margin-right:7px!important; color:#8c97a8; font-size:15px; }
  #sa-dashboard>div:nth-child(2) { gap:16px!important; }
  #sa-dashboard>div:nth-child(2)>div {
    padding:24px!important; border:1px solid #e2e7ee!important; border-radius:10px!important;
    background:#fff!important; box-shadow:0 1px 2px rgba(15,23,42,.025)!important;
  }
  #sa-dashboard>div:nth-child(2) h4 {
    margin-bottom:20px!important; color:#273247; font-size:14px!important;
    font-weight:650!important; letter-spacing:-.02em!important; text-transform:none!important;
  }

  #page-superadmin .sa-table-heading { margin-bottom:15px; align-items:center; }
  #page-superadmin .sa-table-heading h4 { color:#1d2939; font-size:18px; font-weight:660; }
  #page-superadmin .sa-table-heading p { color:#8a94a5; font-size:11px; }
  #page-superadmin .sa-table-wrap,
  #page-superadmin .admin-tab-content>div[style*="overflow-x:auto"] {
    border:1px solid #e1e6ed!important; border-radius:10px!important;
    background:#fff!important; box-shadow:0 1px 2px rgba(15,23,42,.02)!important;
  }
  #page-superadmin .admin-table { width:100%; border-collapse:separate; border-spacing:0; }
  #page-superadmin .admin-table th {
    padding:13px 16px!important; color:#7d8899!important; background:#f8fafc!important;
    border-bottom:1px solid #e7ebf0!important; font-size:9px!important; font-weight:720!important;
    letter-spacing:.07em!important; text-transform:uppercase!important;
  }
  #page-superadmin .admin-table td {
    padding:14px 16px!important; color:#344054!important; border-bottom:1px solid #edf0f4!important;
    font-size:12px!important; font-weight:480!important;
  }
  #page-superadmin .admin-table tr:last-child td { border-bottom:0!important; }
  #page-superadmin .admin-table tr:hover td { background:#fbfcfd!important; }

  #page-superadmin .sa-management-form,
  #sa-users>div:first-child {
    margin-bottom:24px!important; padding:24px!important; border:1px solid #e1e6ed!important;
    border-radius:10px!important; color:#273247!important; background:#fff!important; box-shadow:0 1px 2px rgba(15,23,42,.02)!important;
  }
  #page-superadmin .sa-management-form h4,
  #sa-users>div:first-child h4 {
    margin-bottom:20px!important; color:#273247!important; font-size:16px!important;
    font-weight:660!important; letter-spacing:-.025em!important; text-transform:none!important;
  }
  #page-superadmin .admin-reg-form { gap:13px!important; }
  #page-superadmin .fgrp label { color:#667085!important; font-size:10px!important; font-weight:620!important; text-transform:none!important; }
  #page-superadmin input,#page-superadmin select,#page-superadmin textarea {
    min-height:42px; padding:10px 12px!important; border:1px solid #dce2e9!important;
    border-radius:8px!important; color:#273247!important; background:#fff!important;
    box-shadow:0 1px 2px rgba(15,23,42,.02)!important; font-size:12px!important;
  }
  #page-superadmin input:focus,#page-superadmin select:focus,#page-superadmin textarea:focus {
    border-color:#8b7cf6!important; outline:3px solid rgba(109,93,252,.1)!important;
  }
  #page-superadmin .reg-btn,#page-superadmin .btn-view,#page-superadmin .btn-delete {
    min-height:38px; border:1px solid #dce2e9!important; border-radius:8px!important;
    box-shadow:none!important; font-size:10px!important; font-weight:650!important; letter-spacing:0!important;
    text-transform:none!important;
  }
  #page-superadmin .reg-btn { color:#fff!important; background:#6d5dfc!important; border-color:#6d5dfc!important; }
  #page-superadmin .btn-view { color:#455166!important; background:#fff!important; }
  #page-superadmin .btn-delete { color:#b42318!important; background:#fff!important; border-color:#f0cbc7!important; }
  #page-superadmin .reg-btn:hover { background:#5d4ee4!important; }

  #page-superadmin .sa-stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
  #page-superadmin .sa-stat-card {
    display:flex; align-items:center; gap:14px; min-height:112px; padding:19px;
    border:1px solid #e1e6ed; border-radius:10px; background:#fff;
  }
  #page-superadmin .sa-stat-icon { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; border-radius:9px; font-size:20px; }
  #page-superadmin .sa-stat-card span,#page-superadmin .sa-stat-card small { display:block; color:#8490a2; font-size:10px; }
  #page-superadmin .sa-stat-card strong { display:block; margin:3px 0; color:#172033; font-size:25px; line-height:1; }
  #page-superadmin .sa-chart-card { padding:23px; border:1px solid #e1e6ed; border-radius:10px; background:#fff; }
  #page-superadmin .sa-card-title { display:flex; align-items:center; gap:8px; margin-bottom:18px; color:#273247; font-size:14px; font-weight:650; }
}

html.dark-theme body.superadmin-mode,
html.dark-theme body.superadmin-mode .main-content,
html.dark-theme #page-superadmin>.page-inner-wrap,
html.dark-theme #page-superadmin>.page-inner-wrap>.form-card { background:#0d1117!important; }
@media (min-width:768px) {
  html.dark-theme #page-superadmin .admin-header-strip,
  html.dark-theme #page-superadmin .admin-stat-card,
  html.dark-theme #page-superadmin .sa-management-form,
  html.dark-theme #page-superadmin .sa-table-wrap,
  html.dark-theme #page-superadmin .sa-stat-card,
  html.dark-theme #page-superadmin .sa-chart-card,
  html.dark-theme #sa-dashboard>div:nth-child(2)>div,
  html.dark-theme #sa-users>div:first-child {
    color:#d9e0ea!important; background:#151b23!important; border-color:#273140!important;
  }
  html.dark-theme #page-superadmin .sa-header-copy h2,
  html.dark-theme #page-superadmin .admin-stat-num,
  html.dark-theme #page-superadmin .sa-stat-card strong,
  html.dark-theme #page-superadmin .sa-table-heading h4,
  html.dark-theme #page-superadmin .sa-management-form h4,
  html.dark-theme #page-superadmin .sa-card-title { color:#edf2f7!important; }
  html.dark-theme #page-superadmin .admin-table th { color:#8995a8!important; background:#111720!important; border-color:#273140!important; }
  html.dark-theme #page-superadmin .admin-table td { color:#c5ceda!important; border-color:#242d3a!important; }
  html.dark-theme #page-superadmin .admin-table tr:hover td { background:#19212b!important; }
  html.dark-theme #page-superadmin input,
  html.dark-theme #page-superadmin select,
  html.dark-theme #page-superadmin textarea,
  html.dark-theme #page-superadmin .btn-view,
  html.dark-theme #page-superadmin .sa-icon-button,
  html.dark-theme #page-superadmin .sa-logout-button { color:#d5dce6!important; background:#111720!important; border-color:#303b4b!important; }
}

@media (max-width:767px) {
  #page-superadmin .sa-sidebar-brand,#page-superadmin .sa-nav-label { display:none!important; }
  #page-superadmin .sa-header-copy { position:relative; z-index:2; }
  #page-superadmin .sa-header-eyebrow { display:flex; align-items:center; gap:7px; margin-bottom:8px; color:rgba(255,255,255,.68); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; }
  #page-superadmin .sa-live-dot { width:7px; height:7px; border-radius:50%; background:#34d399; }
  #page-superadmin .sa-header-copy h2 { margin:0; color:#fff; font-size:28px; }
  #page-superadmin .sa-header-copy p { margin:7px 0 0; color:rgba(255,255,255,.68); font-size:13px; }
  #page-superadmin .sa-header-actions { display:flex; align-items:center; gap:8px; position:relative; z-index:2; }
  #page-superadmin .sa-header-date { display:none; }
  #page-superadmin .sa-icon-button,#page-superadmin .sa-logout-button { min-height:42px; border:1px solid rgba(255,255,255,.28); border-radius:10px; color:#fff; background:rgba(255,255,255,.12); }
  #page-superadmin .sa-icon-button { width:42px; }
  #page-superadmin .sa-logout-button { display:flex; align-items:center; gap:7px; padding:0 12px; }
  #page-superadmin .sa-stats-grid { display:grid; grid-template-columns:1fr; gap:10px; }
  #page-superadmin .sa-stat-card { display:flex; align-items:center; gap:12px; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--bg); }
  #page-superadmin .sa-stat-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:9px; }
  #page-superadmin .sa-stat-card span,#page-superadmin .sa-stat-card small { display:block; font-size:10px; color:var(--text3); }
  #page-superadmin .sa-stat-card strong { display:block; font-size:24px; color:var(--text); }
  #page-superadmin .sa-chart-card { padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--bg); }
}

/* Teacher dashboard — professional classroom workspace (desktop only) */
.teacher-panel-eyebrow { display:none; }
@media (min-width:768px) {
  body.teacher-panel-mode { background:#f5f7fa!important; }
  body.teacher-panel-mode .modern-navbar,
  body.teacher-panel-mode #ticker-wrap,
  body.teacher-panel-mode .bottom-nav,
  body.teacher-panel-mode #custom-chat-widget { display:none!important; }
  body.teacher-panel-mode .main-content { min-height:100vh; padding:0!important; background:#f5f7fa!important; }
  #page-guru-dash {
    width:100%!important; max-width:none!important; min-height:100vh;
    margin:0!important; padding:0!important;
  }
  #guru-bento {
    display:grid!important; grid-template-columns:minmax(0,1fr)!important;
    gap:18px!important; width:min(1280px,calc(100% - 64px)); max-width:none!important;
    margin:0 auto!important; padding:28px 0 52px;
  }
  #guru-bento>.form-card {
    grid-column:1!important; grid-row:auto!important; margin:0!important;
    border:1px solid #e1e6ed!important; border-radius:11px!important;
    background:#fff!important; box-shadow:0 1px 2px rgba(15,23,42,.025)!important;
  }
  #guru-bento>.form-card:first-child {
    min-height:104px; padding:24px 28px!important; color:#172033!important;
  }
  .teacher-panel-eyebrow {
    display:flex; align-items:center; gap:8px; margin-bottom:8px;
    color:#8490a2; font-size:9px; font-weight:750; letter-spacing:.13em; text-transform:uppercase;
  }
  .teacher-panel-eyebrow span { width:7px; height:7px; border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.1); }
  #guru-bento>.form-card:first-child h2 {
    margin:0!important; color:#172033!important; font-size:27px!important;
    font-weight:680!important; letter-spacing:-.045em!important; line-height:1.1!important; text-transform:none!important;
  }
  #guru-bento>.form-card:first-child p {
    margin:6px 0 0!important; color:#8490a2!important; font-size:12px!important;
    font-weight:450!important; text-transform:none!important;
  }
  #guru-bento .teacher-logout {
    min-height:39px; padding:0 14px!important; border:1px solid #dce2e9!important;
    border-radius:8px!important; color:#475467!important; background:#fff!important;
    box-shadow:none!important; font-size:10px!important; font-weight:650!important;
  }
  #guru-bento .teacher-logout i { font-size:16px!important; }

  #guru-bento>.form-card:nth-child(2) {
    padding:0!important; color:#273247!important; text-align:left!important;
    overflow:hidden; background:#fff!important;
  }
  #guru-bento .teacher-class-toolbar {
    display:grid!important; grid-template-columns:minmax(240px,1fr) repeat(4,auto);
    align-items:end!important; gap:9px!important; margin:0!important; padding:20px 24px!important;
    border-bottom:1px solid #e6eaf0; background:#fbfcfd;
  }
  #guru-bento .teacher-class-toolbar .fgrp label {
    margin-bottom:7px; color:#667085!important; font-size:10px!important; font-weight:650!important;
    letter-spacing:.02em; text-transform:none!important;
  }
  #guru-bento .teacher-class-toolbar select {
    width:100%; min-height:40px; padding:9px 12px; border:1px solid #dce2e9;
    border-radius:8px; color:#273247; background:#fff; font-size:12px;
  }
  #guru-bento .teacher-class-toolbar .reg-btn {
    width:auto!important; min-height:40px; padding:0 12px!important;
    border:1px solid #dce2e9!important; border-radius:8px!important;
    color:#475467!important; background:#fff!important; box-shadow:none!important;
    font-size:10px!important; font-weight:650!important; text-transform:none!important;
  }
  #guru-bento .teacher-class-toolbar .reg-btn:first-of-type {
    color:#fff!important; background:#6d5dfc!important; border-color:#6d5dfc!important;
  }
  #guru-bento .teacher-code-label {
    margin:24px 28px 8px!important; color:#8a94a5!important;
    font-size:9px!important; font-weight:750!important; letter-spacing:.12em!important;
  }
  #guru-kode-display {
    margin:0 28px 9px!important; color:#172033!important; font-size:44px!important;
    font-weight:690!important; letter-spacing:.15em!important; text-shadow:none!important;
    word-break:normal!important;
  }
  #guru-bento>.form-card:nth-child(2)>p {
    margin:0 28px 25px!important; color:#8490a2!important; font-size:11px!important; font-weight:450!important;
  }

  #guru-bento>.form-card:nth-child(3) { padding:0!important; overflow:hidden!important; }
  #guru-bento .teacher-results-head {
    padding:20px 24px!important; border-bottom:1px solid #e6eaf0!important; background:#fff!important;
  }
  #guru-bento .teacher-results-head h4 {
    color:#273247!important; font-size:16px!important; font-weight:660!important; letter-spacing:-.025em;
  }
  #guru-bento .teacher-results-head h4 i { color:#6d5dfc!important; }
  #guru-bento .teacher-results-head .reg-btn {
    min-height:38px; padding:0 13px!important; border:1px solid #dce2e9!important;
    border-radius:8px!important; color:#475467!important; background:#fff!important;
    box-shadow:none!important; font-size:10px!important; font-weight:650!important;
  }
  #guru-bento .admin-table { width:100%; border-collapse:separate; border-spacing:0; }
  #guru-bento .admin-table th {
    padding:13px 18px!important; color:#7d8899!important; background:#f8fafc!important;
    border-bottom:1px solid #e7ebf0!important; font-size:9px!important; font-weight:720!important;
    letter-spacing:.07em!important; text-transform:uppercase!important;
  }
  #guru-bento .admin-table td {
    padding:15px 18px!important; color:#344054!important; border-bottom:1px solid #edf0f4!important;
    font-size:12px!important; font-weight:480!important;
  }
  #guru-bento .admin-table tr:hover td { background:#fbfcfd!important; }
  #guru-table-body button {
    min-height:34px!important; padding:7px 10px!important; border:1px solid #dce2e9!important;
    border-radius:7px!important; color:#455166!important; background:#fff!important;
    font-size:9px!important; box-shadow:none!important;
  }
}

@media (min-width:768px) {
  html.dark-theme body.teacher-panel-mode,
  html.dark-theme body.teacher-panel-mode .main-content { background:#0d1117!important; }
  html.dark-theme #guru-bento>.form-card,
  html.dark-theme #guru-bento .teacher-results-head,
  html.dark-theme #guru-bento .teacher-class-toolbar {
    color:#d6dee9!important; background:#151b23!important; border-color:#273140!important;
  }
  html.dark-theme #guru-bento>.form-card:first-child h2,
  html.dark-theme #guru-kode-display,
  html.dark-theme #guru-bento .teacher-results-head h4 { color:#edf2f7!important; }
  html.dark-theme #guru-bento .teacher-class-toolbar select,
  html.dark-theme #guru-bento .teacher-class-toolbar .reg-btn,
  html.dark-theme #guru-bento .teacher-logout,
  html.dark-theme #guru-table-body button { color:#d5dce6!important; background:#111720!important; border-color:#303b4b!important; }
  html.dark-theme #guru-bento .admin-table th { color:#8995a8!important; background:#111720!important; border-color:#273140!important; }
  html.dark-theme #guru-bento .admin-table td { color:#c5ceda!important; border-color:#242d3a!important; }
}

/* =========================================================
   Editorial homepage — narrative flow, not a card grid
   ========================================================= */
.legacy-home { display:none!important; }
.home-editorial { width:100%; max-width:1320px; margin:0 auto; }
#page-home { max-width:1440px!important; padding-top:0!important; }

.ed-kicker {
  display:flex; align-items:center; gap:16px; color:var(--text2);
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
}
.ed-kicker span:first-child { min-width:30px; color:var(--p); }

.ed-hero { padding:76px 0 120px; border-bottom:1px solid var(--border); }
.ed-hero-grid {
  display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,.7fr);
  gap:clamp(48px,8vw,130px); align-items:end; margin-top:72px;
}
.ed-hero h1 {
  max-width:920px; margin:0; color:var(--text)!important;
  font-size:clamp(72px,9vw,136px)!important; font-weight:430!important;
  line-height:.88!important; letter-spacing:-.078em!important; text-wrap:balance;
}
.ed-hero-copy { padding-bottom:8px; }
.ed-hero-copy>p {
  max-width:430px; margin:0 0 34px; color:var(--text2);
  font-size:17px; line-height:1.65;
}
.ed-actions { display:flex; flex-wrap:wrap; gap:10px; }
.ed-button {
  min-height:50px; padding:0 20px; color:var(--text); background:transparent;
  border:1px solid var(--text); border-radius:2px; font-size:13px; font-weight:600;
  cursor:pointer; transition:background .2s,color .2s,transform .2s;
}
.ed-button i { margin-left:12px; font-size:17px; }
.ed-button-primary { color:var(--bg); background:var(--text); }
.ed-button:hover { transform:translateY(-2px); }
.ed-button-primary:hover { color:#fff; background:var(--p); border-color:var(--p); }
.ed-meta {
  display:flex; gap:20px; margin-top:30px; padding-top:18px;
  color:var(--text3); border-top:1px solid var(--border); font-size:11px;
}

.ed-statement { padding:140px 0; border-bottom:1px solid var(--border); }
.ed-statement-grid {
  display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(60px,12vw,180px);
  align-items:end; margin-top:68px;
}
.ed-statement h2 {
  max-width:820px; margin:0; font-size:clamp(48px,6.2vw,88px)!important;
  font-weight:440!important; line-height:.98; letter-spacing:-.065em!important;
}
.ed-statement p { max-width:430px; margin:0; color:var(--text2); font-size:18px; line-height:1.7; }

.ed-process { padding:120px 0 140px; }
.ed-section-head {
  display:grid; grid-template-columns:.65fr 1.35fr; gap:40px;
  align-items:start; margin-bottom:76px;
}
.ed-section-head h2 {
  max-width:700px; margin:0; font-size:clamp(44px,5.4vw,76px)!important;
  font-weight:450!important; line-height:1; letter-spacing:-.06em!important;
}
.ed-process-row {
  width:100%; display:grid; grid-template-columns:80px 1fr 1.15fr 28px;
  gap:32px; align-items:center; padding:30px 4px;
  color:var(--text); background:none; border:0; border-top:1px solid var(--border);
  text-align:left; cursor:pointer; transition:padding .25s,color .25s;
}
.ed-process-row:last-child { border-bottom:1px solid var(--border); }
.ed-process-row:hover { padding-left:14px; padding-right:14px; color:var(--p); }
.ed-process-no { color:var(--text3); font-size:12px; }
.ed-process-title { font-size:clamp(22px,2.5vw,34px); font-weight:520; letter-spacing:-.04em; }
.ed-process-desc { color:var(--text2); font-size:14px; }
.ed-process-row i { justify-self:end; font-size:22px; }

.ed-mood {
  margin:0; padding:90px clamp(36px,6vw,90px) 100px;
  color:#201b18; background:#f15a37;
}
.ed-kicker-light { color:rgba(32,27,24,.68); }
.ed-kicker-light span:first-child { color:#201b18; }
.ed-mood-grid {
  display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(60px,10vw,150px);
  align-items:start; margin-top:70px;
}
.ed-mood h2 {
  max-width:700px; margin:0; color:#201b18!important;
  font-size:clamp(58px,7vw,100px)!important; font-weight:450!important;
  line-height:.92; letter-spacing:-.07em!important;
}
.ed-mood-grid p { max-width:430px; margin:0 0 34px; color:rgba(32,27,24,.76); font-size:16px; line-height:1.65; }
.ed-mood-options { border-top:1px solid rgba(32,27,24,.45); }
.ed-mood-options button {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  padding:15px 2px; color:#201b18; background:none; border:0;
  border-bottom:1px solid rgba(32,27,24,.45); font-size:16px; cursor:pointer;
  transition:padding .2s,background .2s;
}
.ed-mood-options button:hover { padding-left:10px; padding-right:10px; background:rgba(255,255,255,.14); }
.ed-mood-options button span { font-size:20px; }
.ed-mood-feedback {
  display:none; margin-top:20px; padding:12px 0; color:#201b18;
  border-bottom:1px solid rgba(32,27,24,.45); font-size:13px; font-weight:600;
}

.ed-numbers { display:grid; grid-template-columns:repeat(3,1fr); padding:120px 0; border-bottom:1px solid var(--border); }
.ed-numbers>div { min-height:240px; display:flex; flex-direction:column; justify-content:space-between; padding:0 42px; border-right:1px solid var(--border); }
.ed-numbers>div:first-child { padding-left:0; }
.ed-numbers>div:last-child { padding-right:0; border-right:0; }
.ed-numbers strong { font-size:clamp(76px,9vw,132px); font-weight:430; line-height:.8; letter-spacing:-.07em; }
.ed-numbers span { max-width:180px; color:var(--text2); font-size:13px; line-height:1.4; }

.ed-support { display:grid; grid-template-columns:1fr 1fr; gap:clamp(60px,10vw,150px); padding:140px 0 120px; }
.ed-support-intro h2 {
  max-width:650px; margin:66px 0 0; font-size:clamp(48px,6vw,82px)!important;
  font-weight:440!important; line-height:.98; letter-spacing:-.065em!important;
}
.ed-support-links { border-top:1px solid var(--border); align-self:end; }
.ed-support-links button {
  width:100%; display:grid; grid-template-columns:1fr 1.2fr 24px; gap:24px;
  align-items:center; padding:28px 2px; color:var(--text); background:none;
  border:0; border-bottom:1px solid var(--border); text-align:left; cursor:pointer;
  transition:padding .2s,color .2s;
}
.ed-support-links button:hover { padding-left:12px; padding-right:12px; color:var(--p); }
.ed-support-links button>span { font-size:21px; font-weight:520; letter-spacing:-.035em; }
.ed-support-links small { color:var(--text2); font-size:13px; line-height:1.45; }
.ed-support-links i { justify-self:end; font-size:21px; }

.ed-footer {
  display:flex; justify-content:space-between; padding:28px 0 40px;
  color:var(--text3); border-top:1px solid var(--border); font-size:11px;
}

@media (max-width:900px) {
  .home-editorial { max-width:100%; }
  .ed-hero { padding:54px 0 80px; }
  .ed-hero-grid,.ed-statement-grid,.ed-mood-grid,.ed-support { grid-template-columns:1fr; }
  .ed-hero-grid { gap:52px; margin-top:52px; }
  .ed-hero h1 { max-width:780px; }
  .ed-hero-copy>p { max-width:620px; }
  .ed-statement { padding:100px 0; }
  .ed-statement-grid { gap:48px; margin-top:50px; }
  .ed-section-head { grid-template-columns:1fr; gap:42px; }
  .ed-process-row { grid-template-columns:50px 1fr 28px; gap:18px; }
  .ed-process-desc { grid-column:2; }
  .ed-process-row i { grid-column:3; grid-row:1; }
  .ed-mood-grid { gap:52px; }
  .ed-support { gap:70px; padding:100px 0; }
  .ed-support-intro h2 { margin-top:46px; }
}

@media (max-width:640px) {
  #page-home { padding:0 18px!important; }
  .ed-hero { padding-top:42px; }
  .ed-hero-grid { margin-top:44px; }
  .ed-hero h1 { font-size:clamp(58px,18vw,82px)!important; }
  .ed-actions { flex-direction:column; }
  .ed-button { width:100%; }
  .ed-meta { justify-content:space-between; gap:8px; }
  .ed-statement,.ed-process { padding:88px 0; }
  .ed-statement h2,.ed-section-head h2 { font-size:46px!important; }
  .ed-process { padding-bottom:96px; }
  .ed-process-row { grid-template-columns:34px 1fr 22px; padding:22px 0; }
  .ed-process-title { font-size:22px; }
  .ed-process-desc { font-size:12px; }
  .ed-mood { margin-left:-18px; margin-right:-18px; padding:68px 18px 76px; }
  .ed-mood h2 { font-size:58px!important; }
  .ed-numbers { grid-template-columns:1fr; padding:70px 0; }
  .ed-numbers>div,.ed-numbers>div:first-child,.ed-numbers>div:last-child {
    min-height:170px; padding:30px 0; border-right:0; border-bottom:1px solid var(--border);
  }
  .ed-numbers>div:last-child { border-bottom:0; }
  .ed-numbers strong { font-size:90px; }
  .ed-support-links button { grid-template-columns:1fr 24px; }
  .ed-support-links small { grid-column:1; }
  .ed-support-links i { grid-column:2; grid-row:1; }
  .ed-footer { flex-direction:column; gap:6px; padding-bottom:120px; }
}

/* =========================================================
   P3K Mental — calm instructional editorial layout
   ========================================================= */
.legacy-toolkit,.legacy-hotline { display:none!important; }
#page-toolkit,#page-hotline { max-width:1440px!important; padding-top:0!important; }
.toolkit-editorial,.story-editorial { width:100%; max-width:1320px; margin:0 auto; }

.tk-hero { padding:76px 0 120px; border-bottom:1px solid var(--border); }
.tk-hero-grid {
  display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(60px,10vw,150px);
  align-items:end; margin-top:72px;
}
.tk-hero h1 {
  max-width:900px; margin:0; font-size:clamp(68px,8.3vw,124px)!important;
  font-weight:430!important; line-height:.9!important; letter-spacing:-.075em!important;
}
.tk-hero-grid p { max-width:420px; margin:0 0 28px; color:var(--text2); font-size:17px; line-height:1.65; }
.tk-note { display:block; padding-top:18px; color:var(--text3); border-top:1px solid var(--border); font-size:11px; }

.tk-breath { padding:130px 0 150px; }
.tk-method-label { display:flex; justify-content:space-between; padding-bottom:16px; color:var(--text3); border-bottom:1px solid var(--border); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.tk-breath-grid { display:grid; grid-template-columns:1fr .9fr; gap:clamp(70px,12vw,180px); align-items:center; margin-top:78px; }
.tk-breath-copy h2 { margin:0 0 28px; font-size:clamp(58px,7vw,102px)!important; font-weight:440!important; line-height:.9; letter-spacing:-.07em!important; }
.tk-breath-copy>p { max-width:500px; margin:0 0 56px; color:var(--text2); font-size:17px; line-height:1.65; }
.tk-breath-copy ol { margin:0; padding:0; list-style:none; border-top:1px solid var(--border); }
.tk-breath-copy li { display:grid; grid-template-columns:80px 1fr auto; align-items:baseline; gap:24px; padding:20px 0; border-bottom:1px solid var(--border); }
.tk-breath-copy li strong { font-size:32px; font-weight:480; letter-spacing:-.05em; }
.tk-breath-copy li span { font-size:16px; }
.tk-breath-copy li small { color:var(--text3); font-size:11px; }
.tk-breath-visual { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:520px; background:var(--p3); }
.tk-orbit { width:270px; height:270px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--p) 40%,var(--border)); border-radius:50%; }
.tk-orbit span { width:110px; height:110px; display:block; background:var(--p); border-radius:50%; animation:tk-breathe 19s ease-in-out infinite; }
.tk-breath-visual p { margin:46px 0 0; color:var(--p2); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; }
@keyframes tk-breathe { 0%,100% { transform:scale(.72); opacity:.7; } 21% { transform:scale(1.7); opacity:1; } 58% { transform:scale(1.7); opacity:1; } }

.tk-ground { padding:100px clamp(36px,6vw,90px) 110px; color:#f7f4ed; background:#23231f; }
.ed-kicker-ground { color:#aaa69c; }
.tk-ground-head { display:grid; grid-template-columns:1.2fr .65fr; gap:clamp(60px,10vw,150px); align-items:end; margin:72px 0 90px; }
.tk-ground h2 { max-width:760px; margin:0; color:#f7f4ed!important; font-size:clamp(58px,7vw,100px)!important; font-weight:440!important; line-height:.92; letter-spacing:-.07em!important; }
.tk-ground-head p { margin:0; color:#aaa69c; font-size:16px; line-height:1.65; }
.tk-senses { margin:0; padding:0; list-style:none; border-top:1px solid #56564f; }
.tk-senses li { display:grid; grid-template-columns:100px 1fr auto; align-items:center; gap:24px; padding:24px 0; border-bottom:1px solid #56564f; }
.tk-senses strong { color:var(--p); font-size:30px; font-weight:480; }
.tk-senses span { font-size:clamp(20px,2.4vw,32px); letter-spacing:-.035em; }
.tk-senses small { color:#8f8c84; font-size:10px; text-transform:uppercase; letter-spacing:.1em; }
.tk-closing { display:flex; justify-content:space-between; align-items:center; gap:40px; padding:80px 0 100px; border-bottom:1px solid var(--border); }
.tk-closing p { max-width:600px; margin:0; font-size:clamp(25px,3vw,40px); line-height:1.2; letter-spacing:-.045em; }

/* =========================================================
   Teman Cerita — conversational editorial layout
   ========================================================= */
.story-hero { padding:76px 0 120px; border-bottom:1px solid var(--border); }
.ed-kicker-story { color:var(--text2); }
.story-hero-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(60px,10vw,150px); align-items:end; margin-top:72px; }
.story-hero h1 { max-width:920px; margin:0; font-size:clamp(72px,8.5vw,126px)!important; font-weight:430!important; line-height:.88!important; letter-spacing:-.078em!important; }
.story-hero-grid p { max-width:420px; margin:0 0 32px; color:var(--text2); font-size:17px; line-height:1.65; }
.story-status { display:flex; align-items:center; gap:10px; padding-top:18px; color:var(--text3); border-top:1px solid var(--border); font-size:11px; }
.story-status i { width:7px; height:7px; display:block; background:#4eaa79; border-radius:50%; box-shadow:0 0 0 5px color-mix(in srgb,#4eaa79 16%,transparent); }

.story-form-section { display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(60px,11vw,170px); padding:130px 0 150px; }
.story-form-intro h2 { max-width:500px; margin:68px 0 28px; font-size:clamp(48px,5.5vw,76px)!important; font-weight:440!important; line-height:.98; letter-spacing:-.065em!important; }
.story-form-intro p { max-width:410px; margin:0; color:var(--text2); font-size:14px; line-height:1.65; }
.story-form { display:grid; grid-template-columns:1fr .55fr; gap:28px 20px; align-content:start; }
.story-field { border-bottom:1px solid var(--border); }
.story-field-full { grid-column:1 / -1; }
.story-field label { display:flex; justify-content:space-between; margin-bottom:8px; color:var(--text2); font-size:11px; font-weight:600; }
.story-field label span { color:var(--text3); font-weight:400; }
.story-field input,.story-field textarea { width:100%; padding:14px 0; color:var(--text); background:transparent; border:0; border-radius:0; outline:0; font-size:16px; resize:vertical; }
.story-field textarea { min-height:190px; line-height:1.65; }
.story-field:focus-within { border-color:var(--p); }
.story-field input::placeholder,.story-field textarea::placeholder { color:var(--text3); }
.story-submit { grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; min-height:62px; margin-top:10px; padding:0 22px; color:#fff; background:#287a53; border:0; border-radius:2px; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s,transform .2s; }
.story-submit i { font-size:24px; }
.story-submit:hover { background:#216746; transform:translateY(-2px); }

.story-help { padding:100px clamp(36px,6vw,90px) 110px; color:#201b18; background:#f15a37; }
.story-help>.story-help-links,.story-help>div:first-child { min-width:0; }
.story-help { display:grid; grid-template-columns:1fr 1fr; gap:clamp(60px,10vw,150px); }
.story-help h2 { max-width:600px; margin:68px 0 0; color:#201b18!important; font-size:clamp(54px,6.5vw,90px)!important; font-weight:440!important; line-height:.94; letter-spacing:-.068em!important; }
.story-help-links { align-self:end; border-top:1px solid rgba(32,27,24,.45); }
.story-help-links button { width:100%; display:flex; justify-content:space-between; align-items:center; padding:24px 2px; color:#201b18; background:none; border:0; border-bottom:1px solid rgba(32,27,24,.45); text-align:left; cursor:pointer; transition:padding .2s,background .2s; }
.story-help-links button:hover { padding-left:10px; padding-right:10px; background:rgba(255,255,255,.13); }
.story-help-links button span { font-size:24px; font-weight:520; letter-spacing:-.04em; }
.story-help-links button small { display:block; margin-bottom:5px; color:rgba(32,27,24,.65); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.story-help-links button i { font-size:22px; }
.story-footnote { display:flex; gap:22px; align-items:flex-start; padding:48px 0 90px; color:var(--text2); border-bottom:1px solid var(--border); }
.story-footnote i { color:var(--p); font-size:22px; }
.story-footnote p { max-width:720px; margin:0; font-size:13px; line-height:1.6; }

@media (max-width:900px) {
  .toolkit-editorial,.story-editorial { max-width:100%; }
  .tk-hero-grid,.tk-breath-grid,.tk-ground-head,.story-hero-grid,.story-form-section,.story-help { grid-template-columns:1fr; }
  .tk-hero-grid,.story-hero-grid { gap:48px; margin-top:52px; }
  .tk-hero,.story-hero { padding:54px 0 90px; }
  .tk-breath { padding:100px 0; }
  .tk-breath-grid { gap:70px; }
  .tk-breath-visual { min-height:460px; }
  .tk-ground-head { gap:44px; }
  .story-form-section { gap:72px; padding:100px 0; }
  .story-form-intro h2 { margin-top:48px; }
  .story-help { gap:70px; }
}

@media (max-width:640px) {
  #page-toolkit,#page-hotline { padding:0 18px!important; }
  .tk-hero,.story-hero { padding-top:42px; }
  .tk-hero h1,.story-hero h1 { font-size:clamp(58px,18vw,80px)!important; }
  .tk-breath-copy h2,.tk-ground h2,.story-help h2 { font-size:54px!important; }
  .tk-breath-visual { min-height:380px; }
  .tk-orbit { width:220px; height:220px; }
  .tk-orbit span { width:90px; height:90px; }
  .tk-breath-copy li { grid-template-columns:58px 1fr auto; gap:12px; }
  .tk-ground,.story-help { margin-left:-18px; margin-right:-18px; padding:72px 18px 82px; }
  .tk-senses li { grid-template-columns:54px 1fr; gap:14px; }
  .tk-senses small { display:none; }
  .tk-closing { align-items:flex-start; flex-direction:column; }
  .tk-closing .ed-button { width:100%; }
  .story-form { grid-template-columns:1fr; }
  .story-field-full,.story-submit { grid-column:1; }
  .story-help-links button span { font-size:21px; }
  .story-footnote { padding-bottom:120px; }
}

/* =========================================================
   Profile — personal editorial dashboard
   ========================================================= */
.legacy-profile { display:none!important; }
#page-profil { max-width:1440px!important; padding-top:0!important; }
.profile-editorial { width:100%; max-width:1320px; margin:0 auto; }

.pf-hero { padding:76px 0 120px; border-bottom:1px solid var(--border); }
.pf-hero-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:clamp(60px,10vw,150px); align-items:end; margin-top:72px; }
.pf-hero h1 { max-width:920px; margin:0; font-size:clamp(72px,8.6vw,128px)!important; font-weight:430!important; line-height:.88!important; letter-spacing:-.078em!important; }
.pf-hero-grid p { max-width:420px; margin:0 0 28px; color:var(--text2); font-size:17px; line-height:1.65; }
.pf-hero-grid>div>span { display:block; padding-top:18px; color:var(--text3); border-top:1px solid var(--border); font-size:11px; }

.pf-identity { display:grid; grid-template-columns:.78fr 1.22fr; gap:clamp(60px,11vw,170px); padding:130px 0 150px; }
.pf-section-intro h2 { max-width:520px; margin:68px 0 28px; font-size:clamp(48px,5.5vw,76px)!important; font-weight:440!important; line-height:.98; letter-spacing:-.065em!important; }
.pf-section-intro p { max-width:390px; margin:0; color:var(--text2); font-size:14px; line-height:1.65; }
.pf-form { align-self:start; }
.pf-form .story-field { margin-bottom:30px; }
.pf-form .pwd-wrapper { position:relative; }
.pf-form .pwd-toggle { position:absolute; right:2px; top:50%; transform:translateY(-50%); color:var(--text3); cursor:pointer; }
.pf-save { width:100%; min-height:62px; display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding:0 22px; color:var(--bg); background:var(--text); border:0; border-radius:2px; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s,transform .2s; }
.pf-save:hover { color:#fff; background:var(--p); transform:translateY(-2px); }

.pf-journal { padding:100px clamp(36px,6vw,90px) 110px; color:#201b18; background:#f15a37; }
.pf-journal-head { display:grid; grid-template-columns:1fr auto; gap:40px; align-items:end; margin:68px 0 72px; }
.pf-journal h2 { max-width:780px; margin:0; color:#201b18!important; font-size:clamp(56px,7vw,98px)!important; font-weight:440!important; line-height:.92; letter-spacing:-.07em!important; }
.pf-streak { display:flex; align-items:center; gap:8px; padding:10px 0; color:#201b18; border-bottom:1px solid rgba(32,27,24,.45); font-size:12px; font-weight:600; white-space:nowrap; }
.pf-streak i { font-size:18px; }
.pf-mood-list { display:flex; gap:0; overflow-x:auto; padding:0 0 18px; border-top:1px solid rgba(32,27,24,.45); scrollbar-width:thin; }
.pf-mood-list .mood-card { min-width:190px; padding:26px 22px!important; color:#201b18!important; background:transparent!important; border:0!important; border-right:1px solid rgba(32,27,24,.45)!important; border-radius:0!important; box-shadow:none!important; text-align:left!important; }
.pf-mood-list .mood-card>div { color:#201b18!important; text-transform:none!important; }
.pf-journal-link { width:100%; display:flex; justify-content:space-between; align-items:center; margin-top:32px; padding:18px 2px; color:#201b18; background:none; border:0; border-top:1px solid rgba(32,27,24,.45); border-bottom:1px solid rgba(32,27,24,.45); font-size:14px; font-weight:600; cursor:pointer; transition:padding .2s; }
.pf-journal-link:hover { padding-left:12px; padding-right:12px; }

.pf-history { padding:130px 0 150px; border-bottom:1px solid var(--border); }
.pf-history-head { display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(60px,10vw,150px); align-items:end; margin-bottom:80px; }
.pf-history-head h2 { margin:62px 0 0; font-size:clamp(54px,6.5vw,90px)!important; font-weight:440!important; line-height:.94; letter-spacing:-.068em!important; }
.pf-history-head>p { max-width:380px; margin:0; color:var(--text2); font-size:14px; line-height:1.65; }
.pf-history-list { border-top:1px solid var(--border); }
.pf-history-list .riwayat-card { display:grid!important; grid-template-columns:1fr auto; align-items:center; min-height:140px; margin:0!important; padding:26px 2px!important; background:transparent!important; border:0!important; border-bottom:1px solid var(--border)!important; border-radius:0!important; box-shadow:none!important; }
.pf-history-list .rw-tgl { color:var(--text3)!important; font-size:11px!important; font-weight:500!important; }
.pf-history-list .rw-kat { margin:10px 0 2px; color:var(--text)!important; font-size:22px!important; font-weight:520!important; letter-spacing:-.035em; text-transform:none!important; }
.pf-history-list .rw-skor { color:var(--text)!important; font-size:54px!important; font-weight:450!important; letter-spacing:-.06em; }
.pf-history-list .rw-skor span { color:var(--text3)!important; font-size:10px!important; font-weight:500!important; text-transform:none!important; }
.pf-history-list .btn-guru { padding:4px 0!important; color:var(--p)!important; background:none!important; border:0!important; box-shadow:none!important; font-size:11px!important; }

.pf-utilities { display:grid; grid-template-columns:1fr 1fr; padding:70px 0 110px; }
.pf-utilities>button { width:100%; display:flex; justify-content:space-between; align-items:center; padding:28px 26px; color:var(--text); background:none; border:0; border-right:1px solid var(--border); text-align:left; cursor:pointer; transition:background .2s,padding .2s; }
.pf-utilities>button:last-child { border-right:0; }
.pf-utilities>button:hover { padding-left:36px; padding-right:36px; background:var(--bg2); }
.pf-utilities small { display:block; margin-bottom:6px; color:var(--text3); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.pf-utilities strong { font-size:18px; font-weight:520; letter-spacing:-.025em; }
.pf-utilities i { font-size:22px; }
.pf-utilities .pf-logout { color:var(--rd); }
.pf-utilities-top { margin-bottom:28px; padding:0; border:1px solid var(--border); border-radius:12px; overflow:hidden; }

@media (max-width:900px) {
  .profile-editorial { max-width:100%; }
  .pf-hero-grid,.pf-identity,.pf-history-head { grid-template-columns:1fr; }
  .pf-hero { padding:54px 0 90px; }
  .pf-hero-grid { gap:48px; margin-top:52px; }
  .pf-identity { gap:70px; padding:100px 0; }
  .pf-section-intro h2 { margin-top:48px; }
  .pf-history-head { gap:48px; }
}

@media (max-width:640px) {
  #page-profil { padding:0 18px!important; }
  .pf-hero { padding-top:42px; }
  .pf-hero h1 { font-size:clamp(58px,18vw,80px)!important; }
  .pf-identity { padding:88px 0; }
  .pf-section-intro h2,.pf-history-head h2 { font-size:48px!important; }
  .pf-journal { margin-left:-18px; margin-right:-18px; padding:72px 18px 82px; }
  .pf-journal-head { grid-template-columns:1fr; gap:30px; margin-bottom:50px; }
  .pf-journal h2 { font-size:56px!important; }
  .pf-streak { justify-self:start; }
  .pf-history { padding:90px 0; }
  .pf-history-list .riwayat-card { min-height:130px; }
  .pf-utilities { grid-template-columns:1fr; padding-bottom:130px; }
  .pf-utilities>button,.pf-utilities>button:last-child { border-right:0; border-bottom:1px solid var(--border); }
}

/* Mobile keeps the established pre-editorial UI. */
@media (max-width:640px) {
  .home-editorial,
  .toolkit-editorial,
  .story-editorial,
  .profile-editorial { display:none!important; }

  .legacy-home,
  .legacy-toolkit,
  .legacy-hotline,
  .legacy-profile { display:block!important; }

  /* Keep the original mobile home, but fit it safely on narrow screens. */
  .legacy-home .hero-bento {
    min-height:auto!important;
    padding:34px 22px 30px!important;
    align-items:flex-start!important;
    text-align:left!important;
    overflow:hidden!important;
  }
  .legacy-home .hero-inner { width:100%; min-width:0; }
  .legacy-home .hero-badge {
    margin-bottom:26px!important;
    padding:7px 11px!important;
    font-size:10px!important;
    white-space:nowrap;
  }
  .legacy-home .hero h1 {
    max-width:100%!important;
    margin:0 0 26px!important;
    font-size:clamp(39px,11.4vw,46px)!important;
    line-height:.98!important;
    letter-spacing:-.055em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-align:left!important;
  }
  .legacy-home .hero p {
    max-width:100%!important;
    margin:0 0 26px!important;
    font-size:14px!important;
    line-height:1.55!important;
    text-align:left!important;
  }
  .legacy-home .hero-btns { width:100%; gap:8px!important; }
  .legacy-home .hero .hbtn {
    width:100%; min-height:47px; padding:11px 14px!important;
    justify-content:center; font-size:12px!important;
  }
  .legacy-home .mood-bento { padding:26px 22px!important; }
  .legacy-home .mood-bento h4 {
    margin-bottom:22px!important;
    font-size:20px!important;
    line-height:1.2!important;
  }
  .legacy-home .mood-btn { min-width:0!important; padding:10px 8px!important; font-size:12px!important; }
  #custom-chat-widget>div:last-child>div:first-child { display:none!important; }
}

/* =========================================================
   Assessment — editorial split layout (tablet/desktop only)
   ========================================================= */
@media (min-width:641px) {
  #page-quiz { width:100%; max-width:1440px!important; padding-top:64px!important; }
  .quiz-editorial { width:100%; max-width:1240px!important; }
  .quiz-progress-head {
    margin-bottom:14px!important; padding:0 2px;
    color:var(--text3); text-transform:none!important;
  }
  .quiz-progress-head #prog-label,
  .quiz-progress-head #prog-pct {
    color:var(--text2)!important; font-size:11px!important;
    font-weight:600!important; letter-spacing:.08em; text-transform:uppercase;
  }
  .quiz-editorial .prog-track {
    height:2px!important; margin-bottom:0;
    background:var(--border)!important; border-radius:0!important;
  }
  .quiz-editorial .prog-fill { height:2px!important; background:var(--p)!important; }
  .quiz-surface {
    margin-top:56px; padding:0!important; background:transparent!important;
    border:0!important; border-radius:0!important; box-shadow:none!important;
  }
  .quiz-instruction {
    margin:0 0 68px!important; padding:16px 2px!important;
    color:var(--text2)!important; background:transparent!important;
    border:0!important; border-top:1px solid var(--border)!important;
    border-bottom:1px solid var(--border)!important; border-radius:0!important;
    box-shadow:none!important; font-size:12px!important; font-weight:500!important;
    line-height:1.55; letter-spacing:0!important; text-transform:none!important;
  }
  .quiz-instruction i { color:var(--p)!important; font-size:18px!important; }
  .quiz-editorial #q-text {
    margin:0 0 52px!important; color:var(--text)!important;
    font-size:clamp(48px,5.6vw,78px)!important; font-weight:440!important;
    line-height:.98!important; letter-spacing:-.065em!important; text-transform:none!important;
  }
  .quiz-editorial .opts { border-top:1px solid var(--border); }
  .quiz-editorial .opt {
    min-height:62px; display:flex; align-items:center; gap:16px;
    margin:0!important; padding:17px 2px!important;
    color:var(--text)!important; background:transparent!important;
    border:0!important; border-bottom:1px solid var(--border)!important;
    border-radius:0!important; box-shadow:none!important;
    font-size:15px!important; font-weight:450!important; text-transform:none!important;
    transition:padding .2s,color .2s,background .2s!important;
  }
  .quiz-editorial .opt:hover { padding-left:12px!important; padding-right:12px!important; color:var(--p)!important; background:var(--p3)!important; }
  .quiz-editorial .opt.sel,
  .quiz-editorial .opt.selected { padding-left:12px!important; padding-right:12px!important; color:var(--text)!important; background:var(--p3)!important; border-color:var(--p)!important; }
  .quiz-editorial .opt-box {
    width:20px!important; height:20px!important; display:grid!important; place-items:center;
    flex:0 0 20px; color:var(--bg)!important; background:transparent!important;
    border:1px solid var(--text3)!important; border-radius:50%!important;
    box-shadow:none!important; font-size:11px!important;
  }
  .quiz-editorial .opt.sel .opt-box,
  .quiz-editorial .opt.selected .opt-box { color:#fff!important; background:var(--p)!important; border-color:var(--p)!important; }
  .quiz-editorial #opts .opt:last-child {
    margin-top:28px!important; color:var(--text2)!important;
    border-top:1px solid var(--border)!important; border-bottom:1px solid var(--border)!important;
  }
  .quiz-editorial #opts .opt:last-child span { color:inherit!important; font-size:13px!important; font-weight:500!important; text-transform:none!important; }
  .quiz-actions {
    gap:10px!important; margin-top:52px!important; padding-top:24px;
    border-top:1px solid var(--border);
  }
  .quiz-actions .qbtn {
    min-height:56px; padding:0 22px!important; border-radius:2px!important;
    box-shadow:none!important; font-size:13px!important; font-weight:600!important;
    text-transform:none!important;
  }
  .quiz-actions .qbtn:first-child { color:var(--text)!important; background:transparent!important; border-color:var(--border)!important; }
  .quiz-actions .qbtn:last-child { color:var(--bg)!important; background:var(--text)!important; border-color:var(--text)!important; }
  .quiz-actions .qbtn:hover { transform:translateY(-2px)!important; }
}

@media (min-width:900px) {
  .quiz-surface {
    display:grid; grid-template-columns:minmax(280px,.72fr) minmax(420px,1.28fr);
    column-gap:clamp(60px,9vw,140px); align-items:start;
  }
  .quiz-instruction { grid-column:1 / -1; }
  .quiz-editorial #q-text { grid-column:1; position:sticky; top:130px; }
  .quiz-editorial #opts { grid-column:2; }
  .quiz-actions { width:calc(64% - 10px); margin-left:auto; }
}

/* =========================================================
   Professional account and staff dashboards — desktop only
   ========================================================= */
@media (min-width:641px) {
  /* Profile: familiar, restrained account dashboard */
  #page-profil { padding-top:46px!important; }
  .profile-editorial { max-width:1180px; }
  .pf-hero {
    padding:40px 44px 42px; background:var(--bg);
    border:1px solid var(--border); border-radius:14px;
  }
  .pf-hero-grid { display:flex; justify-content:space-between; gap:60px; align-items:flex-end; margin-top:42px; }
  .pf-hero h1 { max-width:650px; font-size:clamp(46px,5vw,68px)!important; line-height:.98!important; letter-spacing:-.06em!important; }
  .pf-hero-grid p { max-width:390px; margin-bottom:18px; font-size:14px; }
  .pf-identity { grid-template-columns:320px 1fr; gap:70px; padding:80px 44px; border-bottom:1px solid var(--border); }
  .pf-section-intro h2 { margin-top:38px; font-size:38px!important; line-height:1.05; }
  .pf-form { padding:34px; background:var(--bg); border:1px solid var(--border); border-radius:12px; }
  .pf-journal { margin-top:40px; padding:48px 44px 52px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:14px; }
  .pf-journal .ed-kicker-light { color:var(--text2); }
  .pf-journal .ed-kicker-light span:first-child { color:var(--p); }
  .pf-journal-head { margin:38px 0 42px; }
  .pf-journal h2 { color:var(--text)!important; font-size:clamp(38px,4.5vw,58px)!important; line-height:1; }
  .pf-streak { color:var(--text); border-color:var(--border); }
  .pf-mood-list { border-color:var(--border); }
  .pf-mood-list .mood-card { min-width:170px; color:var(--text)!important; border-color:var(--border)!important; }
  .pf-mood-list .mood-card>div { color:var(--text)!important; }
  .pf-mood-list .mood-card>div:last-child { color:var(--text3)!important; }
  .pf-journal-link { color:var(--text); border-color:var(--border); }
  .pf-history { padding:90px 44px; }
  .pf-history-head { margin-bottom:50px; }
  .pf-history-head h2 { margin-top:38px; font-size:48px!important; }
  .pf-utilities { margin-bottom:60px; padding:24px 0; border:1px solid var(--border); border-radius:12px; }
  .pf-utilities-top { margin-bottom:22px; padding:0; }

  /* Shared professional sign-in composition */
  #page-guru-auth,#page-admin-login { width:100%; max-width:1240px!important; padding-top:64px!important; }
  #page-guru-auth>.page-inner-wrap,#page-admin-login>.page-inner-wrap {
    display:grid; grid-template-columns:minmax(280px,.8fr) minmax(380px,1.2fr);
    gap:clamp(60px,9vw,120px); max-width:1050px!important; align-items:start;
  }
  #page-guru-auth>.page-inner-wrap>div:first-child,
  #page-admin-login>.page-inner-wrap>div:first-child {
    position:sticky; top:120px; display:flex!important; flex-direction:column;
    align-items:flex-start!important; text-align:left!important; margin:0!important; padding:14px 0;
  }
  #page-guru-auth>.page-inner-wrap>div:first-child>div:nth-of-type(1),
  #page-admin-login>.page-inner-wrap>div:first-child>div:nth-of-type(1) {
    width:54px!important; height:54px!important; margin:0 0 32px!important;
    border:1px solid var(--border)!important; border-radius:12px!important;
    box-shadow:none!important; font-size:25px!important;
  }
  #page-guru-auth>.page-inner-wrap>div:first-child>div:nth-last-of-type(2),
  #page-admin-login>.page-inner-wrap>div:first-child>div:nth-last-of-type(2) {
    font-size:42px!important; font-weight:520!important; line-height:1!important;
    letter-spacing:-.055em!important; text-transform:none!important;
  }
  #page-guru-auth>.page-inner-wrap>div:first-child>div:last-child,
  #page-admin-login>.page-inner-wrap>div:first-child>div:last-child {
    margin-top:14px!important; color:var(--text2)!important;
    font-size:12px!important; font-weight:500!important; letter-spacing:.04em!important;
  }
  #form-login-guru,#form-reg-guru,#page-admin-login .form-card {
    padding:38px!important; background:var(--bg)!important;
    border:1px solid var(--border)!important; border-radius:12px!important; box-shadow:none!important;
  }
  #form-login-guru h4,#form-reg-guru h4 { margin-bottom:34px!important; font-size:22px!important; }
  #page-guru-auth>.page-inner-wrap>div:last-child,
  #page-admin-login>.page-inner-wrap>div:last-child { grid-column:2; margin-top:20px!important; font-size:12px!important; text-transform:none!important; }

  /* Teacher dashboard */
  #page-guru-dash { width:100%; max-width:1380px!important; padding-top:54px!important; }
  #guru-bento { display:grid; grid-template-columns:1fr 340px; gap:18px; max-width:1240px; margin:0 auto; }
  #guru-bento>.form-card { margin:0!important; padding:30px!important; border-radius:12px!important; }
  #guru-bento>.form-card:first-child { grid-column:1; grid-row:1; background:var(--bg)!important; }
  #guru-bento>.form-card:first-child h2 { color:var(--text)!important; font-size:30px!important; font-weight:560!important; text-transform:none!important; letter-spacing:-.04em!important; }
  #guru-bento>.form-card:first-child p { font-size:13px!important; font-weight:400!important; text-transform:none!important; }
  #guru-bento>.form-card:nth-child(2) { grid-column:2; grid-row:1; padding:28px!important; color:#f7f4ed!important; background:#23231f!important; text-align:left!important; }
  #guru-bento>.form-card:nth-child(2)>div:first-child { margin-bottom:14px!important; font-size:10px!important; letter-spacing:.08em!important; }
  #guru-kode-display { margin-bottom:14px!important; font-size:42px!important; letter-spacing:.12em!important; text-shadow:none!important; word-break:normal!important; }
  #guru-bento>.form-card:nth-child(2) p { color:#aaa69c!important; font-size:12px!important; font-weight:400!important; }
  #guru-bento>.form-card:nth-child(3) { grid-column:1 / -1; padding:0!important; overflow:hidden; }
  #guru-bento>.form-card:nth-child(3)>div:first-child { padding:22px 24px!important; background:var(--bg2)!important; border-bottom:1px solid var(--border)!important; }
  #guru-bento>.form-card:nth-child(3) h4 { font-size:18px!important; }
  #guru-bento .admin-table th { background:var(--bg)!important; }

  /* Counselor login */
  /* Counselor operational dashboard */
  #page-admin { width:100%; max-width:1380px!important; padding-top:54px!important; }
  #admin-bento { display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; gap:18px!important; max-width:1240px; margin:0 auto; }
  #admin-bento>.form-card { border-radius:12px!important; box-shadow:none!important; }
  #admin-bento>.form-card:first-child { padding:30px 34px!important; color:var(--text)!important; background:var(--bg)!important; border:1px solid var(--border)!important; }
  #admin-bento>.form-card:first-child h2 { font-size:30px!important; font-weight:560!important; letter-spacing:-.04em!important; text-transform:none!important; }
  #admin-bento>.form-card:first-child p { color:var(--text2)!important; font-size:13px!important; font-weight:400!important; text-transform:none!important; }
  #admin-bento>.stat-strip { grid-column:span 12!important; display:grid!important; grid-template-columns:repeat(3,1fr)!important; background:var(--bg)!important; border:1px solid var(--border)!important; border-radius:12px!important; box-shadow:none!important; }
  #admin-bento>.stat-strip .stat-item { padding:24px 28px!important; border-right:1px solid var(--border)!important; }
  #admin-bento>.stat-strip .stat-num { color:var(--text)!important; font-size:36px!important; }
  #admin-bento>.stat-strip .stat-lbl { color:var(--text2)!important; font-size:11px!important; background:none!important; }
  #admin-bento>.form-card:nth-of-type(2),#admin-bento>.form-card:nth-of-type(3) { padding:28px!important; }
  #admin-bento .admin-table { font-size:13px; }
  #admin-bento .admin-table th { background:var(--bg2)!important; }
}

/* Super Admin account management and audit */
#page-superadmin .admin-tabs {
  flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin;
  border-bottom:1px solid var(--border);
}
#page-superadmin .admin-tab { flex:0 0 auto; white-space:nowrap; }
.sa-management-form {
  margin-bottom:34px; padding:28px;
  background:var(--bg2); border:1px solid var(--border); border-radius:12px;
}
.sa-management-form h4 {
  display:flex; align-items:center; gap:9px; margin:0 0 22px;
  font-size:19px; font-weight:600; letter-spacing:-.03em;
}
.sa-management-form .reg-btn { color:#fff; background:var(--text); }
.sa-table-heading {
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:20px; margin-bottom:18px;
}
.sa-table-heading h4 { margin:0 0 5px; font-size:21px; font-weight:600; letter-spacing:-.035em; }
.sa-table-heading p { margin:0; color:var(--text2); font-size:13px; }
.sa-table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:10px; }
.sa-table-wrap .admin-table td { font-size:13px; }
.sa-log-status {
  display:inline-flex; padding:5px 9px; border-radius:999px;
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.sa-log-status.success { color:var(--t); background:var(--t3); }
.sa-log-status.failed { color:var(--rd); background:var(--rd3); }
.sa-log-identity small { display:block; margin-top:4px; color:var(--text3); font-size:10px; font-weight:400; }
.sa-user-agent { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text2)!important; font-size:11px!important; }
.sa-row-actions { display:flex; gap:7px; align-items:center; }
.sa-row-actions .btn-view,.sa-row-actions .btn-delete { min-height:38px; padding:8px 11px!important; font-size:11px!important; }
.sa-edit-user-form { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding-top:8px; text-align:left; }
.sa-edit-user-form .sa-edit-email { grid-column:1 / -1; padding:10px 12px; color:var(--text2); background:var(--bg2); border-radius:8px; font-size:12px; }
.sa-edit-user-form label { display:flex; flex-direction:column; gap:7px; color:var(--text2); font-size:11px; font-weight:600; }
.sa-edit-user-form input { width:100%; padding:12px 13px; color:var(--text); background:var(--bg); border:1px solid var(--border); border-radius:8px; font-size:14px; }
.sa-edit-user-form small { grid-column:1 / -1; color:var(--text3); font-size:11px; }

@media (max-width:640px) {
  .sa-management-form { padding:20px; }
  .sa-table-heading { align-items:flex-start; flex-direction:column; }
  #page-superadmin .admin-tab { padding:11px 14px!important; }
  .sa-edit-user-form { grid-template-columns:1fr; }
  .sa-edit-user-form .sa-edit-email,.sa-edit-user-form small { grid-column:1; }
}

/* Dark-mode shooting stars */
.shooting-stars {
  display:block!important; position:fixed; inset:0; z-index:1;
  overflow:hidden; pointer-events:none; opacity:0!important; visibility:hidden!important;
  transition:opacity .8s ease,visibility .8s ease;
}
html.dark-theme .shooting-stars {
  opacity:.72!important; visibility:visible!important;
}
.shooting-stars .star {
  position:absolute; width:3px; height:3px; border-radius:50%;
  background:#fff; opacity:0;
  box-shadow:0 0 8px rgba(255,255,255,.9),0 0 16px color-mix(in srgb,var(--p) 65%,transparent);
  animation:editorial-shooting-star 11s linear infinite;
}
.shooting-stars .star::before {
  content:""; position:absolute; top:50%; right:2px; width:clamp(80px,12vw,170px); height:1px;
  transform:translateY(-50%); background:linear-gradient(90deg,transparent,rgba(255,255,255,.85));
}
.shooting-stars .star:nth-child(1) { top:8%; left:88%; animation-delay:0s; animation-duration:10s; }
.shooting-stars .star:nth-child(2) { top:22%; left:104%; animation-delay:3.5s; animation-duration:13s; }
.shooting-stars .star:nth-child(3) { top:44%; left:94%; animation-delay:7s; animation-duration:12s; }
.shooting-stars .star:nth-child(4) { top:2%; left:58%; animation-delay:9.5s; animation-duration:15s; }
.shooting-stars .star:nth-child(5) { top:64%; left:108%; animation-delay:5s; animation-duration:14s; }
.shooting-stars .star:nth-child(6) { top:31%; left:76%; animation-delay:12s; animation-duration:16s; }
.shooting-stars .star:nth-child(7) { top:78%; left:98%; animation-delay:1.8s; animation-duration:17s; }
.shooting-stars .star:nth-child(8) { top:15%; left:112%; animation-delay:14s; animation-duration:18s; }
@keyframes editorial-shooting-star {
  0%,72% { opacity:0; transform:translate3d(0,0,0) rotate(138deg); }
  74% { opacity:0; }
  76% { opacity:1; }
  88% { opacity:.85; }
  96%,100% { opacity:0; transform:translate3d(-125vw,125vw,0) rotate(138deg); }
}
@media (prefers-color-scheme:dark) {
  html:not(.light-theme) .shooting-stars { opacity:.72!important; visibility:visible!important; }
}
@media (prefers-reduced-motion:reduce) {
  .shooting-stars { display:none!important; }
}

/* Final teacher layout precedence over legacy desktop rules. */
@media (min-width:768px) {
  #page-guru-dash { width:100%!important; max-width:none!important; padding:0!important; }
  #guru-bento {
    display:grid!important; grid-template-columns:minmax(0,1fr)!important;
    gap:18px!important; width:min(1280px,calc(100% - 64px))!important;
    max-width:none!important; margin:0 auto!important; padding:28px 0 52px!important;
  }
  #guru-bento>.form-card:first-child,
  #guru-bento>.form-card:nth-child(2),
  #guru-bento>.form-card:nth-child(3) {
    grid-column:1!important; grid-row:auto!important; margin:0!important;
    border:1px solid #e1e6ed!important; border-radius:11px!important;
    background:#fff!important; box-shadow:0 1px 2px rgba(15,23,42,.025)!important;
  }
  #guru-bento>.form-card:first-child { padding:24px 28px!important; }
  #guru-bento>.form-card:first-child h2 { color:#172033!important; font-size:27px!important; font-weight:680!important; letter-spacing:-.045em!important; text-transform:none!important; }
  #guru-bento>.form-card:first-child p { color:#8490a2!important; font-size:12px!important; font-weight:450!important; text-transform:none!important; }
  #guru-bento>.form-card:nth-child(2) { padding:0!important; color:#273247!important; text-align:left!important; overflow:hidden!important; }
  #guru-bento>.form-card:nth-child(2)>p { margin:0 28px 25px!important; color:#8490a2!important; font-size:11px!important; font-weight:450!important; }
  #guru-bento>.form-card:nth-child(3) { padding:0!important; overflow:hidden!important; }
  html.dark-theme #guru-bento>.form-card:first-child,
  html.dark-theme #guru-bento>.form-card:nth-child(2),
  html.dark-theme #guru-bento>.form-card:nth-child(3) { color:#d6dee9!important; background:#151b23!important; border-color:#273140!important; }
  html.dark-theme #guru-bento>.form-card:first-child h2 { color:#edf2f7!important; }
}