/* ═══════════════════════════════════════════════════════════
   AIO UI v2 — dimuat setelah style.css (override + komponen baru)
═══════════════════════════════════════════════════════════ */
:root{
  --bg:#f4f6fb;--card2:#f7f8fc;--border:#e4e8f1;--border2:#cfd6e4;
  --ink3:#8590a6;
  --blue:#2f5bff;--blue-h:#2147e6;--blue-s:#eef2ff;--blue-b:#c7d4ff;
  --violet:#7c4dff;--cyan:#12b5e5;
  --grad:linear-gradient(135deg,#2f5bff 0%,#7c4dff 100%);
  --grad-soft:linear-gradient(135deg,#eef2ff,#f4efff);
  --radius:20px;--radius-sm:14px;--radius-xs:10px;
  --shadow:0 1px 2px rgba(20,30,70,.04),0 6px 20px -8px rgba(20,30,70,.10);
  --shadow-md:0 10px 30px -10px rgba(40,60,140,.25);
  --glow:0 10px 30px -8px rgba(47,91,255,.55);
}
[data-theme=dark]{
  --bg:#080a12;--bg2:#0e1119;--card:#121521;--card2:#181c2b;--border:#242a3d;--border2:#323a54;
  --ink3:#6b7694;--blue:#5b82ff;--blue-h:#7d9bff;--blue-s:#151d3d;--blue-b:#2a3a78;
  --grad:linear-gradient(135deg,#4f72ff 0%,#8f6bff 100%);
  --grad-soft:linear-gradient(135deg,#131a38,#1b1535);
  --glow:0 10px 34px -8px rgba(79,114,255,.6);
}
body{background:var(--bg);font-feature-settings:"ss01","cv11";position:relative;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(600px 380px at 12% -4%,color-mix(in srgb,var(--blue) 16%,transparent),transparent 70%),
    radial-gradient(520px 340px at 92% 2%,color-mix(in srgb,var(--violet) 14%,transparent),transparent 70%)}
.page{max-width:760px}
.nav-inner{max-width:760px}
.ico{display:inline-flex}.ico svg{width:1.1em;height:1.1em}

/* ── NAV ── */
nav{background:color-mix(in srgb,var(--bg) 78%,transparent)}
.brand-mark{background:var(--grad);box-shadow:var(--glow);border-radius:11px;width:34px;height:34px}
.brand-mark svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.brand-name{font-weight:800;font-size:1.05rem;letter-spacing:-.03em}
.nav-links{display:flex;gap:4px;margin-left:auto;margin-right:10px}
.nav-link{font-size:.82rem;font-weight:600;color:var(--ink2);text-decoration:none;padding:7px 12px;border-radius:99px;transition:.18s}
.nav-link:hover{background:var(--blue-s);color:var(--blue)}
.nav-link.active{background:var(--blue-s);color:var(--blue)}
.nav-right{margin-left:0}
.theme-toggle{width:36px;height:36px;border-radius:12px}
@media(max-width:520px){.nav-link.hide-sm{display:none}}

/* ── HERO ── */
.hero{padding:56px 0 30px;position:relative}
.hero-badge{background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow);color:var(--ink2)}
.hero h1{font-size:clamp(2rem,7vw,3.1rem);font-weight:800;letter-spacing:-.045em;line-height:1.05;margin-bottom:14px}
.hero h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:1rem;max-width:520px;margin:0 auto;color:var(--ink2)}
.hero-points{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:20px;font-size:.78rem;font-weight:600;color:var(--ink2)}
.hero-points span{display:inline-flex;align-items:center;gap:6px}
.hero-points svg{width:15px;height:15px;color:var(--green);stroke:currentColor;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* ── URL CARD ── */
.url-card{padding:14px;border-radius:24px;background:var(--card);border:1px solid var(--border);
  box-shadow:0 20px 50px -22px rgba(47,91,255,.35),var(--shadow);position:relative}
.url-card::before{content:"";position:absolute;inset:-1px;border-radius:25px;padding:1px;z-index:0;pointer-events:none;
  background:linear-gradient(135deg,color-mix(in srgb,var(--blue) 45%,transparent),transparent 40%,color-mix(in srgb,var(--violet) 40%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.url-wrap{border-radius:15px;background:var(--card2);border:1.5px solid transparent;padding:0 12px}
.url-wrap:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 14%,transparent)}
.url-input{padding:16px 0;font-size:.98rem}
.btn{border-radius:14px;font-weight:700}
.btn-primary{background:var(--grad);box-shadow:var(--glow);position:relative;overflow:hidden}
.btn-primary:hover:not(:disabled){background:var(--grad);filter:brightness(1.08);transform:translateY(-1px)}
.btn-primary:active:not(:disabled){transform:translateY(0)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s}
.btn-primary:hover:not(:disabled)::after{transform:translateX(120%)}
#analyzeBtn{padding:0 24px}
.platform-row{margin-top:14px;padding:0 4px 4px}
.chip{border-radius:12px;background:var(--card2);border-color:var(--border)}

/* ── STATS ── */
.dash-stats{gap:12px;margin-top:16px}
.dstat{border-radius:18px;padding:16px;position:relative;overflow:hidden;transition:.2s}
.dstat:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.dstat::after{content:"";position:absolute;right:-18px;top:-18px;width:70px;height:70px;border-radius:50%;background:var(--blue-s);opacity:.7}
.dstat>*{position:relative;z-index:1}
.dstat-ic{border-radius:12px}
@media(max-width:520px){.dash-stats{grid-template-columns:1fr 1fr 1fr;gap:8px}.dstat{padding:12px}.dstat small{font-size:.66rem}}

/* ── CARDS / SECTIONS ── */
.section,.card,.result-card{border-radius:var(--radius)}
.section{padding:22px}
.section-label{color:var(--ink3);display:flex;align-items:center;gap:8px}
.type-switch{border-radius:15px;padding:4px}
.type-opt{border-radius:11px;padding:11px 8px;display:flex;align-items:center;justify-content:center;gap:8px}
.type-opt.on{background:var(--grad);color:#fff;box-shadow:var(--glow)}
.q-btn{border-radius:14px;padding:13px 12px;position:relative}
.q-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.q-btn.on{background:var(--blue-s);box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 14%,transparent)}
.q-btn.on::after{content:"";position:absolute;top:9px;right:9px;width:16px;height:16px;border-radius:50%;
  background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/10px no-repeat}
.info-card{padding:16px;animation:rise .35s ease both}
.thumb{width:164px;height:96px;border-radius:14px;box-shadow:var(--shadow)}
.meta-pill{border-radius:99px;background:var(--blue-s);color:var(--blue);border-color:var(--blue-b);font-weight:600}
.dl-main-btn{padding:16px;font-size:1rem;border-radius:16px}
.prog-bar{background:var(--grad);background-size:200% 100%;animation:flow 1.6s linear infinite}
.prog-bar-bg{height:9px;border:0;background:var(--blue-s)}
.result-card{border-radius:var(--radius)}
.hist-item{border-radius:14px;transition:.18s}
.hist-item:hover{border-color:var(--blue-b);transform:translateX(2px)}
.hist-type{font-size:.64rem;font-weight:800;letter-spacing:.06em;color:var(--blue);background:var(--blue-s);padding:2px 7px;border-radius:6px;margin-right:6px}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes flow{to{background-position:-200% 0}}

/* ── BENTO FITUR ── */
.home-info{padding:26px;margin-top:28px}
.home-head{text-align:center;margin-bottom:6px}
.home-head h2{font-size:1.35rem;letter-spacing:-.035em}
.eyebrow{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);background:var(--blue-s);padding:5px 11px;border-radius:99px;margin-bottom:10px}
.step-n{background:var(--grad)!important;color:#fff!important;box-shadow:var(--glow);border-radius:12px!important}
.feat{border-radius:16px;background:var(--card2)}
.feat-ic{border-radius:12px;background:var(--grad);color:#fff;border:0;box-shadow:var(--glow)}
.feat:hover{border-color:var(--blue-b);box-shadow:var(--shadow-md);transform:translateY(-3px)}


/* ── HELP / FAQ ── */
.faq-section{padding:24px}
.faq-heading h2{font-size:1.3rem;font-weight:800;letter-spacing:-.035em}
.faq-count{background:var(--blue-s);color:var(--blue);border-color:var(--blue-b);font-weight:700}
.help-guide{border-radius:16px;transition:.2s}
.help-guide:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--blue-b)}
.help-guide-icon{background:var(--grad)!important;color:#fff!important;border-radius:12px!important}
.faq-filter{border-radius:99px;padding:8px 14px;font-weight:600}
.faq-filter.active{background:var(--grad);color:#fff;border-color:transparent;box-shadow:var(--glow)}
.faq-search-wrap{border-radius:15px;min-height:48px}
.faq-item{border-radius:15px;background:var(--card);transition:.2s}
.faq-item:hover{border-color:var(--blue-b)}
.faq-item[open]{background:var(--card2);box-shadow:var(--shadow)}
.faq-item summary{padding:16px 18px}
.faq-answer{padding:0 18px 18px}
.faq-chevron{border-color:var(--blue)}

/* ── FLOATING LAUNCHER ── */
#supportLauncher.support-help-link{background:var(--grad)!important;box-shadow:var(--glow)!important}
#supportLauncher.support-help-link::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--blue);opacity:.35;animation:ping 2.4s cubic-bezier(0,0,.2,1) infinite;z-index:-1}
@keyframes ping{75%,100%{transform:scale(1.55);opacity:0}}

footer{padding:34px 0 10px;text-align:center;font-size:.78rem;line-height:1.7;color:var(--ink3)}
.foot-links{display:flex;gap:16px;justify-content:center;margin-bottom:10px}
.foot-links a{color:var(--ink2);text-decoration:none;font-weight:600}
.foot-links a:hover{color:var(--blue)}

/* ═══════════════ LIVE CHAT PAGE ═══════════════ */
html.livechat-page #faqSection{max-width:760px;margin:18px auto 40px;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
.chat-hero{text-align:center;padding:30px 0 20px}
.chat-hero h1{font-size:clamp(1.6rem,5.5vw,2.3rem);font-weight:800;letter-spacing:-.04em;line-height:1.1;margin-bottom:8px}
.chat-hero h1 span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.chat-hero p{font-size:.92rem;color:var(--ink2);max-width:460px;margin:0 auto}
html.livechat-page .page>.chat-hero{display:block!important}

.chat-layout{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:860px){html.livechat-page .page,html.livechat-page .nav-inner{max-width:960px}html.livechat-page #faqSection{max-width:960px}
  .chat-layout{grid-template-columns:minmax(0,1fr) 280px;align-items:start}}

.live-chat-panel{margin:0!important;padding:0!important;border-radius:24px!important;overflow:hidden;
  background:var(--card)!important;border:1px solid var(--border)!important;box-shadow:0 24px 60px -28px rgba(47,91,255,.4),var(--shadow);display:flex;flex-direction:column}
.chat-head{display:flex;align-items:center;gap:13px;padding:16px 18px;color:#fff;background:var(--grad);position:relative;overflow:hidden}
.chat-head::after{content:"";position:absolute;right:-30px;top:-50px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.13)}
.chat-ava{position:relative;width:46px;height:46px;border-radius:16px;background:rgba(255,255,255,.22);display:grid;place-items:center;flex:none;font-weight:800;font-size:1.15rem;z-index:1}
.chat-ava::after{content:"";position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;background:#22c55e;border:2.5px solid #4a5bff}
.chat-head-text{min-width:0;z-index:1}
.chat-head-text h3{font-size:1.02rem;font-weight:800;letter-spacing:-.02em;margin:0}
.chat-head-text p{font-size:.76rem;opacity:.9;margin:2px 0 0}
.chat-status-line{margin:0!important;padding:9px 18px;background:var(--card2);border-bottom:1px solid var(--border);font-size:.72rem!important}
.chat-status-dot{box-shadow:0 0 0 3px color-mix(in srgb,#22c55e 25%,transparent);animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px transparent}}

.chat-messages{border:0!important;border-radius:0!important;max-height:none!important;height:min(52vh,460px);min-height:260px!important;padding:18px!important;gap:12px!important;
  background:
    radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink3) 18%,transparent) 1px,transparent 0) 0 0/22px 22px,
    var(--bg2,var(--card2))!important;scroll-behavior:smooth}
.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-thumb{background:var(--border2);border-radius:9px}
.chat-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 12px!important}
.chat-empty::before{content:"";width:64px;height:64px;border-radius:22px;background-color:var(--blue-s);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f5bff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11.5a7.5 7.5 0 0 1-7.5 7.5H5l-2 2v-9.5A7.5 7.5 0 0 1 10.5 4H12a8 8 0 0 1 8 7.5z'/%3E%3C/svg%3E");background-position:center;background-size:30px;background-repeat:no-repeat;border:1px solid var(--blue-b)}
.chat-bubble{max-width:82%!important;padding:10px 14px!important;font-size:.88rem!important;line-height:1.55;animation:pop .22s ease both;box-shadow:0 1px 2px rgba(20,30,70,.06)}
.chat-bubble.visitor{background:var(--grad)!important;color:#fff;border:0!important;border-radius:18px 18px 5px 18px!important;box-shadow:var(--glow)}
.chat-bubble.admin{background:var(--card)!important;border-radius:18px 18px 18px 5px!important}
.chat-bubble.visitor .chat-meta{color:rgba(255,255,255,.75)}
.chat-meta{font-size:.66rem!important;margin-top:6px!important;font-weight:500}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}

.quick-replies{display:flex;gap:7px;overflow-x:auto;padding:12px 18px 2px;scrollbar-width:none}
.quick-replies::-webkit-scrollbar{display:none}
.quick-replies button{flex:none;font-size:.76rem;font-weight:600;padding:8px 13px;border-radius:99px;border:1px solid var(--blue-b);background:var(--blue-s);color:var(--blue);transition:.18s;white-space:nowrap}
.quick-replies button:hover{background:var(--grad);color:#fff;border-color:transparent;transform:translateY(-1px)}

.live-chat-form{margin:0!important;padding:12px 14px 6px;display:grid!important;grid-template-columns:auto 1fr auto;grid-template-areas:"att txt send" "prev prev prev";gap:8px!important;align-items:end!important}
.chat-attach-row{grid-area:att;margin:0!important;display:block}
.chat-attach-btn{width:44px;height:44px;padding:0!important;border-radius:14px!important;font-size:0!important;background:var(--card2);border:1px solid var(--border);position:relative}
.chat-attach-btn::before{content:"";width:20px;height:20px;background:var(--blue);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.4 11.6-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.4 11.6-9.2 9.2a6 6 0 0 1-8.5-8.5l9.2-9.2a4 4 0 0 1 5.7 5.7l-9.2 9.2a2 2 0 0 1-2.8-2.8l8.5-8.5'/%3E%3C/svg%3E") center/contain no-repeat}
.chat-attach-btn:hover{border-color:var(--blue);background:var(--blue-s)}
.chat-image-name{display:none}
.live-chat-form textarea{grid-area:txt;min-height:44px;max-height:130px;resize:none!important;border-radius:14px!important;padding:12px 14px!important;font-size:.9rem!important;line-height:1.4;border:1.5px solid var(--border)!important;outline:0;transition:.18s}
.live-chat-form textarea:focus{border-color:var(--blue)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 13%,transparent)}
.live-chat-form .btn{grid-area:send;width:44px!important;height:44px;padding:0!important;border-radius:14px;font-size:0}
.live-chat-form .btn::before{content:"";width:20px;height:20px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E") center/contain no-repeat}
.img-preview{grid-area:prev;display:none;align-items:center;gap:10px;padding:8px;border-radius:14px;background:var(--blue-s);border:1px solid var(--blue-b)}
.img-preview.show{display:flex}
.img-preview img{width:44px;height:44px;object-fit:cover;border-radius:10px}
.img-preview span{flex:1;min-width:0;font-size:.78rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.img-preview button{width:28px;height:28px;border-radius:50%;background:var(--card);border:1px solid var(--border);color:var(--ink2);font-size:1rem;line-height:1}
.img-preview button:hover{color:var(--red);border-color:var(--red)}
.chat-foot{display:flex;justify-content:space-between;gap:10px;padding:2px 18px 14px}
.chat-note{margin:0!important;padding:0;font-size:.68rem!important;flex:1}
.chat-count{font-size:.68rem;color:var(--ink3);font-variant-numeric:tabular-nums;flex:none}
.chat-count.warn{color:var(--amber);font-weight:700}

.chat-side{display:grid;gap:12px}
.side-card{padding:18px;border-radius:20px;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}
.side-card h4{font-size:.8rem;font-weight:800;letter-spacing:-.01em;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.side-list{list-style:none;display:grid;gap:11px}
.side-list li{display:flex;gap:11px;font-size:.78rem;color:var(--ink2);line-height:1.45}
.side-list .si{width:30px;height:30px;border-radius:10px;flex:none;display:grid;place-items:center;background:var(--blue-s);color:var(--blue)}
.side-list .si svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.side-list b{display:block;color:var(--ink);font-size:.8rem}
.side-card.warn{background:var(--amber-s);border-color:color-mix(in srgb,var(--amber) 35%,var(--border))}
.side-card.warn p{font-size:.76rem;line-height:1.55;color:var(--ink2)}
.back-link{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:var(--ink2);text-decoration:none;padding:8px 14px;border-radius:99px;background:var(--card);border:1px solid var(--border);margin-bottom:14px;transition:.18s}
.back-link:hover{color:var(--blue);border-color:var(--blue-b)}
.back-link svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

@media(max-width:520px){
  .hero{padding:40px 0 22px}.home-info,.faq-section{padding:18px}
  .chat-messages{height:50vh}.chat-bubble{max-width:90%!important}
  .thumb{width:118px;height:78px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ── Switch potong ── */
.trim-card{border-radius:18px!important;padding:0!important;margin:4px 0 18px;overflow:hidden;background:var(--card2);border:1px solid var(--border)}
.trim-switch{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.trim-switch-ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--blue-s);color:var(--blue)}
.trim-switch-ic svg{width:19px;height:19px}
.trim-switch-text{flex:1;min-width:0}
.trim-switch-text b{display:block;font-size:.9rem;font-weight:700;letter-spacing:-.01em}
.trim-switch-text small{display:block;font-size:.75rem;color:var(--ink3);margin-top:1px}
.trim-toggle-input{position:absolute;opacity:0;pointer-events:none}
.trim-track{width:50px;height:30px;border-radius:99px;background:var(--border2);position:relative;flex:none;transition:background .2s}
.trim-track i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.trim-toggle-input:checked~.trim-track{background:var(--grad)}
.trim-toggle-input:checked~.trim-track i{transform:translateX(20px)}
.trim-toggle-input:focus-visible~.trim-track{box-shadow:0 0 0 4px color-mix(in srgb,var(--blue) 25%,transparent)}
.trim-body{padding:4px 16px 16px;border-top:1px dashed var(--border);margin-top:0;animation:rise .25s ease both}
.trim-body[hidden]{display:none}
.trim-body>.section-label{margin-top:12px}


/* ── Level HD (geser kanan) ── */
.hd-levels{padding:0 16px 14px}
.hd-scroll{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:2px 2px 8px;scrollbar-width:none;overscroll-behavior-x:contain}
.hd-scroll::-webkit-scrollbar{display:none}
.hd-chip{flex:0 0 auto;scroll-snap-align:start;min-width:132px;text-align:left;padding:11px 14px;border-radius:14px;border:1px solid var(--border);background:var(--card);color:inherit;cursor:pointer;font:inherit;-webkit-tap-highlight-color:transparent;transition:border-color .15s,background .15s}
.hd-chip b{display:block;font-size:.86rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.hd-chip small{display:block;font-size:.72rem;color:var(--ink3);margin-top:2px;white-space:nowrap}
.hd-chip.on{border-color:var(--blue);background:var(--blue-s);color:var(--blue)}
.hd-chip.on small{color:inherit;opacity:.85}
.hd-levels .trim-hint{margin:2px 0 0}