/* ============================================================
   CintaAI — Skin "Studio Bersih" (Konsep 1)
   Lapisan desain di atas styles.css. File lama tidak diubah;
   hapus <link> skin ini untuk kembali ke tampilan sebelumnya.
   Sistem: kertas hangat #FAF9F6 · tinta #1C1B1A · coral logo
   #E8483F · navy logo #1D3557 · garis #E7E1D6 · radius besar.
   ============================================================ */

:root{
  --studio-paper:#000000;
  --studio-paper-2:#0B0B0C;
  --studio-ink:#F4F5F6;
  --studio-ink-2:#C3C7CD;
  --studio-muted:#8B9099;
  --studio-line:#1F1F22;
  --studio-coral:#E8483F;
  --studio-coral-dark:#FF7A6E;
  --studio-navy:#1D3557;
  --studio-code-bg:#050505;
  --studio-green:#3ECF8E;
  --studio-shadow:0 24px 54px rgba(0,0,0,.5);
  --studio-shadow-sm:0 10px 26px rgba(0,0,0,.42);
  color-scheme:dark;
}

html{ scroll-behavior:smooth; }
body{ font-family:"Plus Jakarta Sans", Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif; background:var(--studio-paper); }
::selection{ background:var(--studio-coral); color:#fff; }
:focus-visible{ outline:2px solid var(--studio-coral); outline-offset:2px; }

/* ---------- Tipografi: rapat tapi tidak ekstrem ---------- */
#landingPage h1, #landingPage h2, .auth-art h2, .cta-content h2{
  letter-spacing:-.032em; font-weight:800;
}
.headline-italic{ color:var(--studio-coral); }
.muted-italic{ color:#A39C8F; }
.section-kicker{ color:var(--studio-coral); letter-spacing:.14em; }
.eyebrow{ color:var(--studio-ink-2); }
.eyebrow-dot{ background:var(--studio-coral); }

/* ---------- Tombol: solid, bersih, tanpa gradasi ---------- */
.button{ border-radius:999px; font-weight:700; letter-spacing:.01em; }
.button-primary{ background:var(--studio-coral); color:#fff; box-shadow:0 10px 22px rgba(232,72,63,.22); }
.button-primary:hover{ background:var(--studio-coral-dark); box-shadow:0 14px 28px rgba(232,72,63,.26); }
.button-primary .button-arrow{ background:rgba(255,255,255,.18); border-radius:999px; }
.button-quiet{ background:#fff; color:var(--studio-ink); border:1px solid var(--studio-line); }
.button-quiet:hover{ border-color:#CFC7B8; box-shadow:var(--studio-shadow-sm); }
.button-light{ background:#fff; color:var(--studio-ink); }
.button-light:hover{ background:var(--studio-paper-2); }

/* ---------- Header & drawer ---------- */
.site-header{ background:rgba(250,249,246,.86); border-bottom:1px solid var(--studio-line); }
.site-header.is-scrolled{ background:rgba(250,249,246,.96); box-shadow:0 10px 30px rgba(28,27,26,.05); }
.desktop-nav a{ color:var(--studio-ink-2); font-weight:600; }
.desktop-nav a:hover{ color:var(--studio-ink); }
.language-toggle{ border:1px solid var(--studio-line); background:#fff; border-radius:999px; color:var(--studio-ink); font-weight:700; }
.menu-trigger span{ background:var(--studio-ink); }
.menu-drawer{ background:#fff; }
.drawer-display em{ color:var(--studio-coral); }
.drawer-links button span{ color:var(--studio-coral); }
.drawer-links button{ color:var(--studio-ink); }

/* ---------- HERO ---------- */
.hero-section{ background:var(--studio-paper); }
.hero-description{ color:var(--studio-ink-2); }
.hero-footnote{ color:var(--studio-muted); }
.footnote-line{ background:var(--studio-line); }
.hero-bottom-rule{ color:var(--studio-muted); border-top-color:var(--studio-line); }

/* Visual studio: foto + panel coding 3D */
.studio-visual{ position:relative; align-self:center; perspective:1200px; padding-bottom:64px; }
.sv-photo-wrap{ position:relative; border-radius:24px; overflow:hidden; box-shadow:var(--studio-shadow); transform:rotate(1.1deg); transform-style:preserve-3d; will-change:transform; }
.sv-photo{ display:block; width:100%; height:auto; aspect-ratio:4/3.1; object-fit:cover; }
.sv-photo-tag{ position:absolute; left:14px; top:14px; padding:7px 12px; border-radius:999px; background:rgba(20,22,26,.72); color:#F3EFE7; font-size:10.5px; font-weight:600; letter-spacing:.04em; backdrop-filter:blur(6px); }
.sv-code{ position:absolute; left:-44px; bottom:0; width:min(440px,94%); background:var(--studio-code-bg); border:1px solid #26282E; border-radius:16px; box-shadow:0 30px 60px rgba(15,16,20,.35); transform:rotate(-1.4deg); transform-style:preserve-3d; will-change:transform; overflow:hidden; }
.sv-code-bar{ display:flex; align-items:center; gap:6px; padding:10px 13px; border-bottom:1px solid #232529; }
.sv-dot{ width:10px; height:10px; border-radius:50%; }
.dot-r{ background:#FF5F57; } .dot-y{ background:#FEBC2E; } .dot-g{ background:#28C840; }
.sv-code-title{ margin-left:8px; color:#9BA1A8; font-family:"JetBrains Mono",monospace; font-size:10.5px; white-space:nowrap; overflow:hidden; }
.sv-typing{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:#FFB3AD; font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.12em; }
.sv-typing i{ width:6px; height:6px; border-radius:50%; background:var(--studio-coral); animation:sv-pulse 1.1s ease-in-out infinite; }
@keyframes sv-pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.72);} }
.sv-code-body{ margin:0; padding:15px 17px 6px; min-height:196px; color:#E9E6DE; font-family:"JetBrains Mono",monospace; font-size:12.3px; line-height:1.72; white-space:pre-wrap; word-break:break-word; }
.sv-code-body .tk-k{ color:#FF8A7A; }              /* keyword */
.sv-code-body .tk-s{ color:#A9D18E; }              /* string */
.sv-code-body .tk-f{ color:#8FB8FF; }              /* fungsi */
.sv-code-body .tk-c{ color:#7E838C; font-style:italic; } /* komentar */
.sv-code-body .tk-n{ color:#FFC46B; }              /* angka */
.sv-caret{ display:inline-block; width:8px; height:15px; margin-left:2px; vertical-align:-2px; background:var(--studio-coral); animation:sv-blink 1s steps(1) infinite; }
@keyframes sv-blink{ 50%{ opacity:0; } }
.sv-code-foot{ display:flex; gap:14px; flex-wrap:wrap; padding:9px 17px 12px; border-top:1px solid #232529; color:#8B9096; font-family:"JetBrains Mono",monospace; font-size:9.8px; }
.sv-code-foot .sv-ok{ color:#7BC47F; margin-left:auto; }
.studio-visual .floating-label{ background:#fff; border:1px solid var(--studio-line); border-radius:14px; box-shadow:var(--studio-shadow-sm); color:var(--studio-ink); }
.studio-visual .label-top{ top:-16px; left:-12px; }
.studio-visual .label-bottom{ bottom:96px; right:-14px; }
.studio-visual .art-index{ color:var(--studio-muted); }

/* ---------- INTRO ---------- */
.intro-section{ background:var(--studio-paper); }
.intro-visual{ border-color:var(--studio-line); }
.intro-photo{ display:block; width:100%; height:330px; object-fit:cover; border-radius:14px; }
.aside-vertical-line{ background:var(--studio-line); }
.section-number{ color:var(--studio-muted); }

/* ---------- KEMAMPUAN (dulu gelap -> terang) ---------- */
.capabilities-section{ background:var(--studio-paper-2); color:var(--studio-ink); }
.capabilities-section::before{ display:none; }
.kicker-on-dark{ color:var(--studio-coral); }
.capability-head h2 .dark-italic{ color:#A39C8F; }
.capability-intro{ color:var(--studio-ink-2); }
.capability-item{ background:#fff; border:1px solid var(--studio-line); border-radius:18px; box-shadow:none; }
.capability-item:hover{ box-shadow:var(--studio-shadow-sm); border-color:#D9D2C3; }
.capability-item h3{ color:var(--studio-ink); }
.capability-item p{ color:var(--studio-ink-2); }
.cap-index{ color:var(--studio-coral); }
.cap-glyph{ color:var(--studio-navy); }
.cap-arrow{ color:var(--studio-coral); }
.capability-footer{ color:var(--studio-muted); border-top-color:var(--studio-line); }

/* ---------- TOOLS STRIP (section baru) ---------- */
.tools-strip-section{ background:var(--studio-paper); }
.tools-strip-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:45px; max-width:1380px; margin:0 auto 47px; }
.tools-strip-head h2{ margin:0; font-size:clamp(38px,4.6vw,62px); line-height:1.02; }
.tools-strip-head > p{ max-width:380px; margin:0 0 4px; color:var(--studio-ink-2); font-size:13.5px; line-height:1.85; }
.tools-strip-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; max-width:1380px; margin:0 auto; }
.tool-strip-card{ position:relative; padding:22px 20px 18px; background:#fff; border:1px solid var(--studio-line); border-radius:18px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tool-strip-card:hover{ transform:translateY(-4px); box-shadow:var(--studio-shadow-sm); border-color:#D9D2C3; }
.tsc-index{ color:var(--studio-coral); font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:600; }
.tool-strip-card h3{ margin:10px 0 8px; font-size:17.5px; font-weight:700; letter-spacing:-.02em; color:var(--studio-ink); }
.tool-strip-card p{ margin:0 0 16px; color:var(--studio-ink-2); font-size:12.5px; line-height:1.75; }
.tsc-open{ display:inline-flex; align-items:center; gap:7px; padding:0; border:0; background:none; color:var(--studio-coral); font-size:12.5px; font-weight:700; cursor:pointer; }
.tsc-open span{ transition:transform .2s ease; }
.tsc-open:hover span{ transform:translate(2px,-2px); }

/* ---------- MODEL ---------- */
.models-section{ background:#fff; }
.model-card{ border:1px solid var(--studio-line); border-radius:18px; box-shadow:none; }
.model-card::before{ display:none; }
.model-card:hover{ border-color:#D9D2C3; box-shadow:var(--studio-shadow-sm); }
.model-card h3{ color:var(--studio-ink); }
.model-card p{ color:var(--studio-ink-2); }
.model-label{ color:var(--studio-muted); }
.model-sigil{ color:var(--studio-navy); }
.model-status{ display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--studio-paper-2); color:var(--studio-ink-2); font-size:10px; font-weight:700; }
.model-status::before{ content:""; width:6px; height:6px; border-radius:50%; background:#C9C2B2; }
.model-status[data-state="available"]{ background:#E9F5E4; color:var(--studio-green); }
.model-status[data-state="available"]::before{ background:#43A047; }
.model-status[data-state="checking"]{ background:#FDF3D8; color:#8A6D1A; }
.model-status[data-state="checking"]::before{ background:#E3B505; animation:sv-pulse 1.1s infinite; }
.model-status[data-state="unavailable"], .model-status[data-state="error"]{ background:#FBEAE8; color:var(--studio-coral-dark); }
.model-status[data-state="unavailable"]::before, .model-status[data-state="error"]::before{ background:var(--studio-coral); }
.model-capabilities{ color:var(--studio-muted); }
.model-try{ color:var(--studio-coral); font-weight:700; }
.model-card-bottom{ border-top-color:var(--studio-line); }
.model-disclaimer{ color:var(--studio-muted); }
.disclaimer-icon{ border-color:var(--studio-line); color:var(--studio-muted); }

/* ---------- CARA KERJA ---------- */
.workflow-section{ background:var(--studio-paper); }
.workflow-step{ background:#fff; border:1px solid var(--studio-line); border-radius:16px; }
.step-index{ color:var(--studio-coral); font-family:"JetBrains Mono",monospace; }
.step-icon{ color:var(--studio-navy); }
.workflow-step h3{ color:var(--studio-ink); }
.workflow-step p{ color:var(--studio-ink-2); }

/* ---------- CTA AKHIR & FOOTER ---------- */
.final-cta-section{ background:var(--studio-ink); }
.final-cta-section::before{ background:radial-gradient(ellipse,rgba(232,72,63,.16),transparent 65%); }
.final-cta-section::after{ display:none; }
.cta-orbit{ display:none; }
.cta-content h2 span{ color:var(--studio-coral); }
.cta-content > p:not(.section-kicker){ color:#B9B2A4; }
.cta-index{ color:#7C766B; }
.site-footer{ background:var(--studio-paper); border-top:1px solid var(--studio-line); color:var(--studio-ink-2); }
.footer-link-column > span{ color:var(--studio-muted); }
.footer-link-column a, .footer-link-column button{ color:var(--studio-ink-2); }
.footer-link-column a:hover, .footer-link-column button:hover{ color:var(--studio-ink); }
.footer-bottom{ border-top-color:var(--studio-line); color:var(--studio-muted); }

/* ---------- Animasi masuk (diaktifkan JS; aman tanpa JS) ---------- */
html.js-anim #landingPage .section-pad, html.js-anim #landingPage .final-cta-section{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.22,.8,.3,1); }
html.js-anim #landingPage .section-pad.sv-in, html.js-anim #landingPage .final-cta-section.sv-in{ opacity:1; transform:none; }

@media (max-width: 1080px){
  .tools-strip-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px){
  .studio-visual{ padding-bottom:0; margin-top:8px; }
  .sv-code{ position:relative; left:0; bottom:auto; width:100%; margin-top:-34px; transform:rotate(-.6deg); }
  .studio-visual .label-bottom{ bottom:auto; top:12px; right:10px; }
  .studio-visual .label-top{ display:none; }
  .tools-strip-head{ flex-direction:column; align-items:flex-start; gap:18px; }
}
@media (max-width: 620px){
  .tools-strip-grid{ grid-template-columns:1fr; }
  .sv-code-body{ font-size:11.4px; min-height:178px; }
}
@media (prefers-reduced-motion: reduce){
  .sv-typing i, .sv-caret{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ============================================================
   Halaman dalam: Auth · Chat · Tools Akademik
   ============================================================ */

/* ---------- AUTH ---------- */
.auth-page{ background:var(--studio-paper); }
.auth-shell{ background:var(--studio-paper); }
.auth-art{ background:var(--studio-ink); }
.auth-art::before{ border-color:rgba(232,72,63,.16); box-shadow:0 0 0 40px rgba(232,72,63,.03),0 0 0 82px rgba(232,72,63,.02); }
.auth-art .eyebrow{ color:#B9B2A4; }
.auth-art h2 em{ color:var(--studio-coral); }
.auth-art > p:not(.eyebrow){ color:#B9B2A4; }
.auth-art-bottom{ border-top-color:rgba(250,249,246,.14); color:#8A857B; }
/* Orb generik diganti logo hati asli CintaAI */
.auth-art-orb{ animation:none; border:0; }
.auth-art-orb::before, .auth-art-orb::after{ display:none; }
.auth-art-orb span{ inset:0; left:8%; top:8%; width:84%; height:84%; background:url("/assets/cintaai-icon.png") center/contain no-repeat; box-shadow:none; border-radius:0; }
.auth-art-orb i{ display:none; }
.auth-form-panel{ background:var(--studio-paper); }
.auth-title-area .section-kicker{ color:var(--studio-coral); }
.auth-tabs{ border-bottom:1px solid var(--studio-line); }
.auth-tab{ color:var(--studio-muted); font-weight:600; }
.auth-tab.active{ color:var(--studio-ink); border-color:var(--studio-coral); }
.field label{ color:var(--studio-ink-2); font-weight:600; }
.field input, .field select, .field textarea{
  border:1px solid var(--studio-line); border-radius:12px; background:#fff; color:var(--studio-ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--studio-coral); box-shadow:0 0 0 3px rgba(232,72,63,.14); outline:none;
}
.password-toggle{ color:var(--studio-muted); }
.auth-legal{ color:var(--studio-muted); }
.auth-back{ color:var(--studio-ink-2); }

/* ---------- CHAT ---------- */
.chat-page{ background:var(--studio-paper); }
.chat-sidebar{ background:var(--studio-paper-2); border-right:1px solid var(--studio-line); }
.new-chat-button{ background:var(--studio-ink); color:#fff; border-color:var(--studio-ink); border-radius:12px; font-weight:700; }
.new-chat-button:hover{ background:#000; border-color:#000; box-shadow:var(--studio-shadow-sm); }
.new-chat-button kbd{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#CFC9BC; }
.history-label{ color:var(--studio-muted); }
.conversation-item{ border-radius:10px; color:var(--studio-ink-2); }
.conversation-item:hover{ background:#EAE5D9; }
.conversation-item.active, .conversation-item[aria-current="true"]{ background:var(--studio-ink); color:#fff; }
.conversation-item.active .conversation-delete, .conversation-item.active .conversation-rename{ color:#CFC9BC; }
.chat-topbar{ background:rgba(250,249,246,.88); border-bottom:1px solid var(--studio-line); backdrop-filter:blur(14px); }
.chat-model-bar{ background:transparent; }
.chat-welcome h1, .chat-welcome h2{ letter-spacing:-.03em; font-weight:800; color:var(--studio-ink); }
.chat-welcome p{ color:var(--studio-ink-2); }
/* Pesan pengguna: navy logo, solid (tanpa gradasi) */
.message-row.user .message-body{
  background:var(--studio-navy); border-radius:18px; border-bottom-right-radius:6px;
  box-shadow:0 8px 20px rgba(29,53,87,.18);
}
.message-row.user .message-status{ color:#F3C6C1; }
/* Pesan AI: kartu putih bersih */
.message-row.assistant .message-body{
  background:#fff; border:1px solid var(--studio-line); border-radius:18px; border-bottom-left-radius:6px;
  box-shadow:0 4px 14px rgba(28,27,26,.04); padding:13px 16px 14px;
}
.message-avatar{ border-radius:10px; }
.message-actions button{ color:var(--studio-muted); border-radius:8px; }
.message-actions button:hover{ color:var(--studio-ink); background:var(--studio-paper-2); }
/* Composer */
.chat-composer-wrap{ background:linear-gradient(transparent, var(--studio-paper) 32%); }
.chat-composer-form{ background:#fff; border:1px solid var(--studio-line); border-radius:18px; box-shadow:var(--studio-shadow-sm); }
.chat-composer-form:focus-within{ border-color:#D9D2C3; box-shadow:0 14px 34px rgba(28,27,26,.10); }
.composer-icon-button{ color:var(--studio-ink-2); border-radius:10px; }
.composer-icon-button:hover{ background:var(--studio-paper-2); color:var(--studio-ink); }
.composer-model-note, .composer-context, .composer-file-limit{ color:var(--studio-muted); }
.chat-disclaimer{ color:var(--studio-muted); }

/* ---------- TOOLS AKADEMIK (di dalam app) ---------- */
.tools-view{ background:var(--studio-paper); }
.tools-head h2{ letter-spacing:-.03em; font-weight:800; color:var(--studio-ink); }
.tools-head p{ color:var(--studio-ink-2); }
.tools-back, .tools-nav-button{ color:var(--studio-ink-2); border-color:var(--studio-line); border-radius:999px; background:#fff; }
.tools-back:hover, .tools-nav-button:hover{ color:var(--studio-ink); border-color:#CFC7B8; }
.tool-card{ border:1px solid var(--studio-line); border-radius:18px; box-shadow:0 8px 24px rgba(28,27,26,.05); }
.tool-card h3{ color:var(--studio-ink); letter-spacing:-.02em; }
.tool-desc{ color:var(--studio-ink-2); }
.tool-field label{ color:var(--studio-ink-2); font-weight:600; }
.tool-card input, .tool-card select, .tool-card textarea{
  border:1px solid var(--studio-line); border-radius:10px; background:#fff; color:var(--studio-ink);
}
.tool-card input:focus, .tool-card select:focus, .tool-card textarea:focus{
  border-color:var(--studio-coral); box-shadow:0 0 0 3px rgba(232,72,63,.13); outline:none;
}
.tool-run{ background:var(--studio-coral); color:#fff; border-radius:999px; font-weight:700; box-shadow:0 8px 18px rgba(232,72,63,.20); }
.tool-run:hover{ background:var(--studio-coral-dark); }
.tool-note{ color:var(--studio-muted); }
.tool-result{ border-color:var(--studio-line); border-radius:12px; background:var(--studio-paper); }
.tool-check{ accent-color:var(--studio-coral); }

/* ---------- MODE GELAP: permukaan diselaraskan ---------- */
[data-theme="dark"] body, [data-theme="dark"] .chat-page, [data-theme="dark"] .tools-view, [data-theme="dark"] .auth-page{
  background:#101014;
}
[data-theme="dark"] .chat-sidebar{ background:#141519; border-right-color:#26272E; }
[data-theme="dark"] .message-row.assistant .message-body{ background:#1A1B20; border-color:#26272E; box-shadow:none; }
[data-theme="dark"] .chat-composer-form{ background:#1A1B20; border-color:#26272E; }
[data-theme="dark"] .tool-card{ background:#1A1B20; border-color:#26272E; }
[data-theme="dark"] .tool-card input, [data-theme="dark"] .tool-card select, [data-theme="dark"] .tool-card textarea,
[data-theme="dark"] .field input, [data-theme="dark"] .field select{
  background:#141519; border-color:#26272E; color:#EDEBE6;
}
[data-theme="dark"] .conversation-item:hover{ background:#1E1F24; }
[data-theme="dark"] .new-chat-button{ background:var(--studio-coral); border-color:var(--studio-coral); }

/* ---------- Perbaikan hasil uji visual ---------- */
.auth-page .auth-submit{ background:var(--studio-coral); border:0; box-shadow:0 10px 22px rgba(232,72,63,.22); }
.auth-page .auth-submit:hover{ background:var(--studio-coral-dark); }
.send-button{ background:var(--studio-coral); box-shadow:0 6px 14px rgba(232,72,63,.25); }
.send-button:hover:not(:disabled){ background:var(--studio-coral-dark); }
.auth-art-orb{ width:min(44%,185px); top:14%; }
.auth-art-orb span{ background:url("/assets/cintaai-icon-clean.png") center/contain no-repeat; }
.sv-photo-tag{ left:auto; right:14px; }
.tools-strip-section{ padding-top:clamp(70px,9vw,118px); padding-bottom:clamp(70px,9vw,118px); }
.intro-visual{ border-radius:18px; background:var(--studio-paper-2); }
@media (max-width: 900px){ .sv-photo-tag{ display:none; } }
.workflow-steps{ border-top:0; display:flex; flex-direction:column; gap:10px; }
.workflow-step{ padding:18px 20px; border-bottom:1px solid var(--studio-line); }

/* ---------- Perbaikan auth HP: hero mobile harus terang & ringkas ---------- */
@media (max-width: 1100px){
  .auth-art{ background:transparent; }
  .auth-art-orb{ width:104px; top:0; }
  html:not([data-theme="dark"]) .auth-hero-mobile h2{ color:var(--studio-navy); }
  html:not([data-theme="dark"]) .auth-hero-mobile p{ color:var(--studio-muted); }
}

/* ---------- Drawer menu: gaya menu beneran, bukan slogan ---------- */
.menu-drawer{ background:var(--studio-paper); padding-top:24px; }
.drawer-top{ display:flex; align-items:center; justify-content:space-between; }
.drawer-logo{ width:118px; }
.drawer-close{ border:1px solid var(--studio-line); background:#fff; border-radius:12px; }
.drawer-hello{ margin:36px 0 4px; font-size:25px; font-weight:800; letter-spacing:-.03em; color:var(--studio-ink); }
.drawer-nav{ display:flex; flex-direction:column; margin-top:12px; }
.drawer-nav a{ display:flex; align-items:center; justify-content:space-between; padding:16px 2px; border-bottom:1px solid var(--studio-line); color:var(--studio-ink); text-decoration:none; font-size:16.5px; font-weight:600; }
.drawer-nav a i{ font-style:normal; color:var(--studio-coral); font-size:17px; transition:transform .2s ease; }
.drawer-nav a:hover i{ transform:translateX(3px); }
.drawer-actions{ margin-top:30px; }
.drawer-cta{ width:100%; justify-content:center; }
.drawer-auth-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:15px; color:var(--studio-muted); }
.drawer-auth-row button{ background:none; border:0; padding:6px 4px; font-size:14.5px; color:var(--studio-navy); cursor:pointer; }
.drawer-auth-row button:hover{ color:var(--studio-coral); }
.menu-drawer .drawer-note{ color:var(--studio-muted); max-width:300px; font-size:12.5px; }

/* ---------- Drawer Konsep 3: Kartu Pastel (pilihan Cinta) ---------- */
.drawer-hello{ margin-top:28px; }
.drawer-sub{ margin-top:5px; font-size:13px; color:var(--studio-muted); }
.drawer-nav{ gap:10px; margin-top:22px; }
.drawer-nav a.dnav-card{ display:flex; align-items:center; justify-content:flex-start; gap:14px; padding:14px 15px; border:0; border-radius:17px; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.drawer-nav a.dnav-card:hover{ transform:translateY(-1px); box-shadow:var(--studio-shadow-sm); }
.dc-1{ background:#E7EEFB; } .dc-1 .dnav-tile{ color:#1D3557; }
.dc-2{ background:#FCE9E7; } .dc-2 .dnav-tile{ color:#D23A32; }
.dc-3{ background:#E6F3E7; } .dc-3 .dnav-tile{ color:#2F7D32; }
.dc-4{ background:#FBF0D7; } .dc-4 .dnav-tile{ color:#9A6B0F; }
.dnav-tile{ width:42px; height:42px; border-radius:13px; background:rgba(255,255,255,.78); display:grid; place-items:center; flex:none; }
.dnav-tile svg{ width:21px; height:21px; }
.dnav-text b{ display:block; font-size:15.5px; font-weight:700; color:var(--studio-ink); letter-spacing:-.01em; }
.dnav-text small{ display:block; margin-top:2px; font-size:11.5px; font-weight:500; color:#6E675C; }
.dnav-chev{ margin-left:auto; font-size:21px; color:#A39C8F; }
.drawer-auth-row{ font-size:13.5px; gap:7px; }
.drawer-auth-row button{ font-size:13.5px; padding:4px 2px; }

/* ---------- Drawer Konsep 1: Rapi Klasik, versi KOMPAK (pilihan Cinta) ---------- */
.menu-drawer{ padding:22px 22px 18px; }
.drawer-logo{ width:104px; }
.drawer-hello{ margin-top:20px; font-size:19px; }
.drawer-sub{ font-size:12.5px; }
.drawer-nav{ gap:0; margin-top:14px; }
.drawer-nav a.dnav-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border:0; border-bottom:1px solid var(--studio-line); border-radius:0; background:none; text-decoration:none; }
.drawer-nav a.dnav-row:hover{ box-shadow:none; transform:none; }
.drawer-nav a.dnav-row .dnav-tile{ width:34px; height:34px; border-radius:10px; background:var(--studio-paper-2); color:var(--studio-navy); }
.drawer-nav a.dnav-row .dnav-tile svg{ width:18px; height:18px; }
.drawer-nav a.dnav-row b{ font-size:14.5px; font-weight:600; color:var(--studio-ink); }
.drawer-nav a.dnav-row .dnav-chev{ margin-left:auto; font-size:18px; color:#B9B2A4; }
.drawer-actions{ margin-top:20px; }
.drawer-auth-row{ margin-top:12px; font-size:13px; }
/* Penyetelan kompak tahap 2: semua dikecilkan satu tingkat */
.menu-drawer{ padding-top:18px; }
.drawer-hello{ font-size:18px; margin-top:16px; }
.drawer-nav{ margin-top:10px; }
.drawer-nav a.dnav-row{ padding:8.5px 0; gap:11px; }
.drawer-nav a.dnav-row .dnav-tile{ width:32px; height:32px; border-radius:9px; }
.drawer-nav a.dnav-row .dnav-tile svg{ width:17px; height:17px; }
.drawer-nav a.dnav-row b{ font-size:14px; }
.drawer-cta{ font-size:14.5px; }

/* ================================================================
   SKIN FROST — dark + kaca (Konsep 10 Photo Frost, arah antislop)
   Menimpa Skin Studio di berkas yang sama: dasar nyaris hitam,
   panel kaca buram (blur + tepian terang), tombol primer putih,
   coral hanya untuk aksen. Isi & struktur tidak berubah.
   ================================================================ */
body{ background:#0A0B0D; }
#landingPage{ background:radial-gradient(1100px 520px at 85% -80px, rgba(29,53,87,.35), transparent 60%), radial-gradient(900px 480px at -10% 240px, rgba(232,72,63,.10), transparent 55%), #0A0B0D; }
#siteHeader{ background:rgba(10,11,13,.72); backdrop-filter:blur(18px) saturate(150%); -webkit-backdrop-filter:blur(18px) saturate(150%); border-bottom:1px solid var(--studio-line); }
.brand-logo{ background:rgba(246,247,248,.95); border-radius:10px; padding:5px 9px; }
.button-primary{ background:#F6F7F8; color:#0A0B0D; box-shadow:0 12px 26px rgba(0,0,0,.35); }
.button-primary:hover{ background:#FFFFFF; }
.button-primary .button-arrow{ background:rgba(10,11,13,.08); color:#0A0B0D; }
.button-quiet{ background:rgba(255,255,255,.05); color:var(--studio-ink); border:1px solid var(--studio-line); backdrop-filter:blur(12px); }
.button-light{ background:#F6F7F8; color:#0A0B0D; }
.language-toggle{ background:rgba(255,255,255,.05); color:var(--studio-ink); backdrop-filter:blur(12px); }
.hero-section, .intro-section, .tools-strip-section, .workflow-section, .models-section, .capabilities-section{ background:transparent; }
.capability-item, .tool-strip-card, .workflow-step, .model-card{ background:var(--studio-paper-2); border:1px solid var(--studio-line); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.capability-item:hover, .tool-strip-card:hover, .model-card:hover{ border-color:rgba(255,255,255,.24); }
.model-status{ backdrop-filter:blur(8px); }
.site-footer{ background:transparent; }

/* ---------- Hero: foto jadi panggung, dua panel kaca melayang ---------- */
.studio-visual{ position:relative; min-height:604px; }
.studio-visual .sv-photo-wrap{ position:absolute; inset:0; border-radius:24px; overflow:hidden; border:1px solid var(--studio-line); }
.studio-visual .sv-photo{ width:100%; height:100%; object-fit:cover; display:block; }
.studio-visual .sv-photo-wrap::after{ content:''; position:absolute; inset:0; background:linear-gradient(165deg, rgba(6,7,10,.05) 30%, rgba(6,7,10,.52) 82%); }
.sv-photo-tag{ position:absolute; left:16px; top:16px; z-index:2; background:rgba(10,11,13,.55); color:#EDEFF2; border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px); padding:6px 12px; border-radius:999px; font-size:11px; font-weight:600; }
.studio-visual .sv-code{ position:absolute; top:24px; right:24px; width:min(63%,428px); z-index:3; background:var(--studio-code-bg); border:1px solid rgba(255,255,255,.14); border-radius:16px; backdrop-filter:blur(20px) saturate(150%); -webkit-backdrop-filter:blur(20px) saturate(150%); box-shadow:0 26px 54px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.studio-visual .floating-label{ background:rgba(13,15,19,.55); border:1px solid rgba(255,255,255,.14); color:var(--studio-ink); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 14px 30px rgba(0,0,0,.4); }
.studio-visual .label-top{ top:auto; bottom:24px; right:24px; left:auto; }
.studio-visual .label-bottom{ display:none; }
.studio-visual .art-index{ display:none; }

/* ---------- Panel chat AI (baru, khas Frost) ---------- */
.frost-chat{ position:absolute; left:24px; bottom:24px; width:min(57%,372px); z-index:3; background:rgba(12,14,18,.6); border:1px solid rgba(255,255,255,.14); border-radius:18px; backdrop-filter:blur(22px) saturate(150%); -webkit-backdrop-filter:blur(22px) saturate(150%); box-shadow:0 26px 54px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); overflow:hidden; text-align:left; }
.fc-head{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid rgba(255,255,255,.09); }
.fc-head img{ width:25px; height:22px; object-fit:contain; }
.fc-head b{ display:block; font-size:13.5px; color:#F4F5F6; line-height:1.2; }
.fc-head small{ display:block; font-size:10.5px; color:#9BA1A9; margin-top:1px; }
.fc-live{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:"JetBrains Mono", monospace; font-size:9.5px; letter-spacing:.16em; color:#3ECF8E; }
.fc-live i{ width:7px; height:7px; border-radius:50%; background:#3ECF8E; animation:fcPulse 1.8s ease infinite; }
.fc-body{ padding:13px 14px 15px; display:flex; flex-direction:column; gap:9px; min-height:178px; }
.fc-msg{ max-width:88%; padding:9px 12px; border-radius:13px; font-size:12.8px; line-height:1.55; animation:fcIn .45s ease both; overflow-wrap:break-word; }
.fc-msg.user{ align-self:flex-end; background:rgba(232,72,63,.17); border:1px solid rgba(255,122,110,.35); color:#FFE9E6; border-bottom-right-radius:5px; }
.fc-msg.ai{ align-self:flex-start; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11); color:#F4F5F6; border-bottom-left-radius:5px; }
.fc-caret{ display:inline-block; width:7px; height:13px; background:var(--studio-coral); margin-left:2px; vertical-align:-2px; animation:fcBlink 1s steps(1) infinite; }
.fc-dots{ display:inline-flex; gap:4px; padding:11px 13px; }
.fc-dots i{ width:6px; height:6px; border-radius:50%; background:#9BA1A9; animation:fcBounce 1.1s ease infinite; }
.fc-dots i:nth-child(2){ animation-delay:.15s; } .fc-dots i:nth-child(3){ animation-delay:.3s; }
@keyframes fcIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
@keyframes fcBlink{ 50%{ opacity:0; } }
@keyframes fcPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(62,207,142,.45); } 55%{ box-shadow:0 0 0 6px rgba(62,207,142,0); } }
@keyframes fcBounce{ 0%,60%,100%{ transform:none; opacity:.5; } 30%{ transform:translateY(-4px); opacity:1; } }
@media (max-width: 900px){
  .studio-visual{ display:flex; flex-direction:column; gap:12px; min-height:0; }
  .studio-visual .sv-photo-wrap{ position:relative; inset:auto; height:176px; flex:none; }
  .studio-visual .sv-code{ position:relative; top:auto; right:auto; width:100%; }
  .frost-chat{ position:relative; left:auto; bottom:auto; width:100%; }
  .studio-visual .label-top{ display:none; }
}

/* ---------- Drawer (struktur & ukuran Konsep 1 kompak, warna Frost) ---------- */
.menu-drawer{ background:rgba(12,13,16,.88); backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%); color:var(--studio-ink); border-left:1px solid var(--studio-line); }
.drawer-close{ background:rgba(255,255,255,.05); border:1px solid var(--studio-line); color:var(--studio-ink); }
.drawer-hello{ color:var(--studio-ink); }
.drawer-sub{ color:var(--studio-muted); }
.drawer-nav a.dnav-row b{ color:var(--studio-ink); }
.drawer-nav a.dnav-row .dnav-tile{ background:rgba(255,255,255,.07); color:#F4F5F6; }
.drawer-nav a.dnav-row .dnav-chev{ color:#5C6167; }
.drawer-auth-row{ color:var(--studio-muted); }
.drawer-auth-row button{ color:var(--studio-ink); }

/* ---------- Auth Frost ---------- */
.auth-page, .auth-shell{ background:#0A0B0D; }
.auth-art{ background:radial-gradient(700px 420px at 20% 0%, rgba(29,53,87,.5), transparent 60%), radial-gradient(560px 380px at 90% 100%, rgba(232,72,63,.16), transparent 55%), #0C0E11; }
.auth-form-panel{ background:rgba(255,255,255,.045); border:1px solid var(--studio-line); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%); box-shadow:0 24px 54px rgba(0,0,0,.45); }
.auth-page .field input, .auth-page .field select, .auth-page .field textarea{ background:rgba(255,255,255,.06); border-color:var(--studio-line); color:var(--studio-ink); }
.auth-page .field input::placeholder, .auth-page .field textarea::placeholder{ color:#6E747D; }
.auth-tab{ color:var(--studio-muted); }
.auth-tab.active{ color:var(--studio-ink); }
.auth-page .auth-submit{ background:#F6F7F8; color:#0A0B0D; box-shadow:0 12px 26px rgba(0,0,0,.35); }
@media (max-width: 1100px){
  html:not([data-theme="dark"]) .auth-hero-mobile h2{ color:var(--studio-ink); }
  html:not([data-theme="dark"]) .auth-hero-mobile p{ color:var(--studio-ink-2); }
}

/* ---------- Chat Frost ---------- */
.chat-page{ background:#0A0B0D; }
.chat-sidebar{ background:rgba(255,255,255,.03); border-right:1px solid var(--studio-line); backdrop-filter:blur(16px); }
.chat-topbar, .chat-model-bar{ background:rgba(10,11,13,.72); backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--studio-line); }
.conversation-item:hover{ background:rgba(255,255,255,.05); }
.conversation-item.active{ background:rgba(255,255,255,.08); }
.message-row.assistant .message-body, [data-theme="dark"] .message-row.assistant .message-body{ background:rgba(255,255,255,.05); border:1px solid var(--studio-line); backdrop-filter:blur(12px); box-shadow:none; color:var(--studio-ink); }
.chat-composer-form{ background:rgba(255,255,255,.05); border:1px solid var(--studio-line); backdrop-filter:blur(16px) saturate(140%); box-shadow:0 16px 34px rgba(0,0,0,.4); }
.chat-composer-form textarea{ color:var(--studio-ink); }
.chat-composer-form textarea::placeholder{ color:#6E747D; }
.composer-icon-button:hover{ background:rgba(255,255,255,.07); }

/* ---------- Tools Frost ---------- */
.tools-view{ background:#0A0B0D; }
.tool-card{ background:var(--studio-paper-2); border:1px solid var(--studio-line); backdrop-filter:blur(16px) saturate(140%); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); }
.tools-back, .tools-nav-button{ background:rgba(255,255,255,.05); color:var(--studio-ink-2); border:1px solid var(--studio-line); }
.tool-card input, .tool-card select, .tool-card textarea{ background:rgba(255,255,255,.06); border-color:var(--studio-line); color:var(--studio-ink); }
.tool-card input::placeholder, .tool-card textarea::placeholder{ color:#6E747D; }
.tool-result{ background:rgba(255,255,255,.04); border-color:var(--studio-line); }
.tool-run{ background:#F6F7F8; color:#0A0B0D; }
@media (prefers-reduced-motion: reduce){
  .fc-msg, .fc-live i, .fc-dots i{ animation:none; }
  .fc-caret{ animation:none; }
}

/* ---------- Perbaikan Frost ronde 2 ---------- */
:root{ --ink:#F4F5F6; --ink-2:#C3C7CD; --muted:#9BA1A9; --line:rgba(255,255,255,.12); --paper:#0A0B0D; --paper-2:#101216; color-scheme:dark; }
.hero-copy h1{ color:var(--studio-ink); }
.studio-visual .sv-photo-wrap{ transform:none; }
.label-spark{ background:linear-gradient(145deg,#FF8A7A,#D23A32); }
.chat-welcome h1{ color:var(--studio-ink); }
.chat-welcome h1 em{ color:#8FB6FF; }
.welcome-description{ color:var(--studio-ink-2); }
.message-content{ color:var(--studio-ink-2); }
.message-row.user .message-content{ color:var(--studio-ink); }
.message-content h1, .message-content h2, .message-content h3{ color:var(--studio-ink); }
.message-meta{ color:var(--studio-muted); }
.message-meta b{ color:var(--studio-ink-2); }
.message-content code{ background:rgba(255,255,255,.08); border-color:var(--studio-line); color:#FFD9D4; }
.message-content blockquote{ color:var(--studio-ink-2); border-left-color:var(--studio-coral); }
.message-content th, .message-content td{ border-color:var(--studio-line); }
.message-content th{ background:rgba(255,255,255,.06); }
.message-file-chip{ background:rgba(255,255,255,.05); border-color:var(--studio-line); color:var(--studio-ink-2); }

/* ---------- Perbaikan Frost ronde 3 ---------- */
.chat-main{ background:#0A0B0D; }
.new-chat-button{ background:#F6F7F8; color:#0A0B0D; border-color:transparent; }
.new-chat-button:hover{ background:#FFFFFF; border-color:transparent; }
.new-chat-button kbd{ color:#5C6167; }
.history-search input{ background:rgba(255,255,255,.06); border-color:var(--studio-line); color:var(--studio-ink); }
.history-search input:focus{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.3); }
.model-select-wrap select{ background:rgba(255,255,255,.06); border:1px solid var(--studio-line); color:var(--studio-ink); border-radius:10px; padding:8px 30px 8px 12px; }
.auth-tabs{ background:rgba(255,255,255,.06); }
.auth-tab.active{ background:#F6F7F8; color:#0A0B0D; }
.password-wrap input{ background:rgba(255,255,255,.06); }
.sidebar-status b, .profile-info b{ color:var(--studio-ink); }
.sidebar-status small, .profile-info small{ color:var(--studio-muted); }
.chat-top-brand b{ color:var(--studio-ink); }
.connection-badge{ color:var(--studio-ink-2); }

/* ---------- Perbaikan Frost ronde 4 ---------- */
#passwordInput{ background:rgba(255,255,255,.06) !important; color:var(--studio-ink) !important; -webkit-text-fill-color:var(--studio-ink); box-shadow:inset 0 0 0 1000px #14161A; }
#passwordInput::placeholder{ -webkit-text-fill-color:#6E747D; }
.text-link{ color:var(--studio-ink); border-bottom-color:rgba(255,255,255,.3); }
.tool-card label{ color:var(--studio-ink-2); }
.tool-card summary{ color:#FF7A6E; }

/* ---------- Perbaikan Frost ronde 5 ---------- */
.final-cta-section{ background:#0C0E11; }
.model-disclaimer{ background:rgba(255,255,255,.05); border-color:var(--studio-line); backdrop-filter:blur(12px); }
.model-disclaimer p{ color:var(--studio-ink-2); }

/* ---------- Footer Frost: kolom Support + strip kontak ---------- */
.site-footer{ grid-template-columns:minmax(240px,1.1fr) auto auto auto; }
.footer-mail-link{ font-size:12px; overflow-wrap:anywhere; }
.footer-contact{ grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; justify-content:space-between; background:rgba(255,255,255,.045); border:1px solid var(--studio-line); border-radius:16px; padding:16px 20px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.footer-contact b{ display:block; font-size:14.5px; color:var(--studio-ink); margin-bottom:2px; }
.footer-contact span{ font-size:12px; color:var(--studio-muted); }
.footer-mail{ font-family:"JetBrains Mono", monospace; font-size:12.5px; color:var(--studio-ink); background:rgba(255,255,255,.06); border:1px solid var(--studio-line); padding:9px 15px; border-radius:999px; text-decoration:none; white-space:nowrap; }
.footer-mail:hover{ border-color:rgba(255,255,255,.32); }
@media (max-width: 900px){
  .site-footer{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1 / -1; }
  .footer-mail{ white-space:normal; overflow-wrap:anywhere; }
}

/* ---------- Halaman FAQ ---------- */
.faq-header-nav{ display:flex; align-items:center; gap:26px; }
.faq-header-nav a{ color:var(--studio-ink-2); text-decoration:none; font-size:13px; font-weight:600; }
.faq-header-nav a:hover{ color:var(--studio-ink); }
.faq-main{ max-width:860px; margin:0 auto; padding:54px 22px 84px; }
.faq-main h1{ font-size:clamp(34px,5vw,52px); letter-spacing:-.03em; font-weight:800; line-height:1.05; margin:10px 0 14px; }
.faq-intro{ color:var(--studio-ink-2); font-size:14.5px; line-height:1.75; max-width:560px; }
.faq-list{ display:flex; flex-direction:column; gap:10px; margin-top:34px; }
.faq-item{ background:rgba(255,255,255,.045); border:1px solid var(--studio-line); border-radius:16px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.faq-item summary{ cursor:pointer; padding:16px 20px; font-weight:700; font-size:15px; color:var(--studio-ink); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; color:var(--studio-coral); font-weight:800; font-size:18px; flex:none; }
.faq-item[open ] summary::after{ content:'\2013'; }
.faq-a{ padding:0 20px 18px; color:var(--studio-ink-2); font-size:13.5px; line-height:1.75; }
.faq-a a{ color:#FF7A6E; }
.faq-contact{ margin-top:26px; display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; justify-content:space-between; background:rgba(255,255,255,.045); border:1px solid var(--studio-line); border-radius:16px; padding:18px 20px; backdrop-filter:blur(14px); }
.faq-contact b{ display:block; font-size:15px; color:var(--studio-ink); margin-bottom:2px; }
.faq-contact span{ font-size:12.5px; color:var(--studio-muted); }
.faq-mini-foot{ max-width:860px; margin:0 auto; padding:0 22px 40px; display:flex; justify-content:space-between; gap:16px; color:var(--studio-muted); font-size:12px; }
.faq-mini-foot a{ color:var(--studio-ink-2); text-decoration:none; }
@media (max-width: 760px){ .faq-header-nav a:not(.button){ display:none; } }

/* ================================================================
   SKIN MONO — hitam pekat 100%, flat, monospace, padat.
   Tanpa kaca blur, tanpa pendaran warna, tanpa kotak logo.
   Aksen coral hanya untuk label kecil, tautan, dan status.
   ================================================================ */
::selection{ background:#FFFFFF; color:#000000; }
body{ background:#000000; }
#landingPage{ background:#000000; }
#siteHeader{ background:#000000; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid #1F1F22; }
.brand-lockup{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; }
.brand-icon{ height:29px; width:auto; display:block; }
.brand-word{ font-size:20px; font-weight:800; letter-spacing:-.02em; color:#FFFFFF; line-height:1; white-space:nowrap; }
.brand-word em{ font-style:normal; color:#FF6B5E; }
.brand-logo{ background:transparent; padding:0; border-radius:0; }
.chat-sidebar-brand .brand-icon{ height:25px; }
.chat-sidebar-brand .brand-word{ font-size:17.5px; }
.footer-brand .brand-icon{ height:27px; }
.footer-brand .brand-word{ font-size:19px; }

/* ---------- Tombol: padat, kotak kecil, ala terminal ---------- */
.button{ min-height:40px; padding:0 16px; font-size:13px; border-radius:8px; gap:8px; }
.button-primary{ background:#FFFFFF; color:#000000; box-shadow:none; }
.button-primary:hover{ background:#E8E8E8; }
.button-primary .button-arrow{ width:19px; height:19px; border-radius:5px; background:rgba(0,0,0,.08); color:#000000; font-size:11px; }
.button-quiet{ background:transparent; border:1px solid #2A2A2E; color:#FFFFFF; backdrop-filter:none; }
.button-quiet:hover{ border-color:#4A4A4F; background:#0B0B0C; }
.button-light{ background:#FFFFFF; color:#000000; }
.language-toggle{ background:transparent; border:1px solid #2A2A2E; backdrop-filter:none; font-family:"JetBrains Mono", monospace; font-size:11px; }

/* ---------- Skala huruf lebih rapat + label monospace ---------- */
.hero-copy h1{ font-size:clamp(42px, 5.6vw, 66px); }
#landingPage h2{ font-size:clamp(27px, 3.4vw, 38px); }
.section-kicker, .eyebrow{ font-family:"JetBrains Mono", monospace; letter-spacing:.18em; }
.cap-index, .step-index, .model-label, .history-label, .footer-link-column > span, .fc-live, .sv-code-title, .active-model-label span{ font-family:"JetBrains Mono", monospace; }

/* ---------- Permukaan flat ---------- */
.capability-item, .tool-strip-card, .workflow-step, .model-card, .tool-card{ background:#0B0B0C; border:1px solid #1F1F22; border-radius:12px; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
.capability-item:hover, .tool-strip-card:hover, .model-card:hover{ border-color:#333338; }
.model-status{ border-radius:6px; background:#0E0E10; border:1px solid #1F1F22; font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; backdrop-filter:none; }
.model-disclaimer{ background:#0B0B0C; border:1px solid #1F1F22; backdrop-filter:none; }

/* ---------- Hero flat ---------- */
.studio-visual .sv-photo-wrap{ border-radius:14px; border-color:#1F1F22; }
.studio-visual .sv-photo-wrap::after{ background:linear-gradient(165deg, rgba(0,0,0,.12) 30%, rgba(0,0,0,.62) 84%); }
.sv-photo-tag{ background:#000000; border-color:#2A2A2E; backdrop-filter:none; font-family:"JetBrains Mono", monospace; font-size:10px; letter-spacing:.06em; }
.studio-visual .sv-code{ background:#050505; border:1px solid #1F1F22; border-radius:10px; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
.frost-chat{ background:#050505; border:1px solid #1F1F22; border-radius:12px; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
.fc-msg.user{ background:#1B1B1E; border-color:#2A2A2E; color:#FFFFFF; }
.fc-msg.ai{ background:#101012; border-color:#1F1F22; }
.studio-visual .floating-label{ background:#0B0B0C; border:1px solid #1F1F22; backdrop-filter:none; box-shadow:none; }
.label-spark{ background:#1B1B1E; color:#FF6B5E; }

/* ---------- CTA & footer flat ---------- */
.final-cta-section{ background:#050505; }
.footer-contact, .faq-contact{ background:#0B0B0C; border-color:#1F1F22; border-radius:12px; backdrop-filter:none; }
.footer-mail{ border-radius:8px; background:#0E0E10; }

/* ---------- Drawer flat ---------- */
.menu-drawer{ background:#050505; backdrop-filter:none; -webkit-backdrop-filter:none; border-left:1px solid #1F1F22; }
.drawer-nav a.dnav-row .dnav-tile{ background:#121214; border-radius:8px; }
.drawer-close{ background:#0B0B0C; border-color:#2A2A2E; border-radius:8px; }

/* ---------- Auth: panel flat + ORB 3D dipulihkan persis ---------- */
.auth-page, .auth-shell{ background:#000000; }
.auth-art{ background:#050505; }
.auth-form-panel{ background:#0B0B0C; border:1px solid #1F1F22; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; border-radius:14px; }
.auth-tabs{ background:#0E0E10; border-radius:8px; }
.auth-tab.active{ background:#FFFFFF; color:#000000; border-radius:6px; }
.auth-page .field input, .auth-page .field select, .auth-page .field textarea, .password-wrap input{ background:#0E0E10; border-color:#232326; border-radius:8px; }
#passwordInput{ box-shadow:inset 0 0 0 1000px #0E0E10; }
.auth-page .auth-submit{ background:#FFFFFF; color:#000000; box-shadow:none; border-radius:8px; min-height:44px; }
.auth-art-orb{ animation:orbit-spin 36s linear infinite; border:1px solid rgba(133,181,255,.23); width:min(75%,310px); top:26%; }
.auth-art-orb::before, .auth-art-orb::after{ display:block; }
.auth-art-orb span{ inset:auto; left:27%; top:27%; width:46%; height:auto; aspect-ratio:1; background:radial-gradient(circle at 28% 22%, #FFFFFF, #93D5FF 12%, #4588EC 46%, #173D9D 78%); box-shadow:0 0 60px rgba(67,143,250,.45); border-radius:50%; }
.auth-art-orb i{ display:block; }
@media (max-width: 1100px){ .auth-art-orb{ width:118px; top:2px; } }

/* ---------- Chat flat ---------- */
.chat-page, .chat-main{ background:#000000; }
.chat-sidebar{ background:#050505; border-right-color:#1F1F22; backdrop-filter:none; }
.chat-topbar, .chat-model-bar{ background:#000000; backdrop-filter:none; border-bottom-color:#1F1F22; }
.new-chat-button{ background:#FFFFFF; color:#000000; border-radius:8px; }
.history-search input{ background:#0E0E10; border-color:#232326; border-radius:8px; }
.model-select-wrap select{ background:#0E0E10; border-color:#232326; border-radius:8px; }
.conversation-item.active{ background:#141416; }
.message-row.user .message-body{ background:#161618; border:1px solid #232326; border-radius:12px; }
.message-row.assistant .message-body, [data-theme="dark"] .message-row.assistant .message-body{ background:#0B0B0C; border:1px solid #1F1F22; backdrop-filter:none; }
.chat-composer-form{ background:#0B0B0C; border:1px solid #232326; border-radius:12px; backdrop-filter:none; box-shadow:none; }
.send-button{ background:#FFFFFF; color:#000000; box-shadow:none; border-radius:10px; }
.send-button:hover:not(:disabled){ background:#E8E8E8; }

/* ---------- Tools & FAQ flat ---------- */
.tools-view{ background:#000000; }
.tool-card input, .tool-card select, .tool-card textarea{ background:#0E0E10; border-color:#232326; border-radius:8px; }
.tool-run{ background:#FFFFFF; color:#000000; border-radius:8px; }
.tools-back, .tools-nav-button{ background:#0B0B0C; border-color:#232326; border-radius:8px; }
.faq-item{ background:#0B0B0C; border-color:#1F1F22; border-radius:12px; backdrop-filter:none; }
.studio-visual .floating-label b{ color:#FFFFFF; }
.studio-visual .floating-label small{ color:#9A9AA0; }
.top-brand-dot{ background:url("/assets/cintaai-icon-clean.png") center/contain no-repeat; border-radius:0; box-shadow:none; }

/* ================================================================
   OTP EMAIL — kotak digit monospace, animasi mekanis presisi.
   Tanpa gradasi, tanpa kaca: terminal murni.
   ================================================================ */
.auth-forgot-link{ display:block; margin:14px auto 0; padding:6px 10px; background:none; border:0; color:#9A9AA0; font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.auth-forgot-link:hover{ color:#FFFFFF; }
.otp-view{ margin-top:8px; }
.otp-view[hidden]{ display:none; }
.otp-term{ font-family:"JetBrains Mono", monospace; font-size:11px; letter-spacing:.14em; color:#8B8B90; text-transform:uppercase; margin:0 0 14px; }
.otp-prompt{ color:#FF6B5E; font-weight:700; }
.otp-blink{ color:#FF6B5E; animation:otpBlink 1.06s steps(1) infinite; }
@keyframes otpBlink{ 0%, 49%{ opacity:1; } 50%, 100%{ opacity:0; } }
.otp-title{ font-size:26px; font-weight:800; letter-spacing:-.02em; margin:0 0 8px; color:#FFFFFF; }
.otp-sub{ font-size:13.5px; line-height:1.55; color:#9A9AA0; margin:0 0 20px; }
.otp-sub b{ color:#FFFFFF; }
.otp-boxes{ display:flex; gap:9px; margin:0 0 6px; }
.otp-box{ flex:1 1 0; min-width:0; max-width:56px; height:60px; background:#0E0E10; border:1px solid #26262A; border-radius:8px; color:#FFFFFF; font-family:"JetBrains Mono", monospace; font-size:25px; font-weight:700; text-align:center; caret-color:#FF6B5E; outline:none; transition:border-color .15s ease, background .15s ease; padding:0; }
.otp-box:hover{ border-color:#3A3A3F; }
.otp-box:focus{ border-color:#FF6B5E; background:#050505; }
.otp-box.filled{ border-color:#4A4A4F; background:#121214; }
.otp-box:disabled{ opacity:.45; }
.otp-enter .otp-box{ animation:otpIn .45s cubic-bezier(.22,.9,.3,1) both; }
.otp-enter .otp-box:nth-child(1){ animation-delay:.02s; } .otp-enter .otp-box:nth-child(2){ animation-delay:.08s; }
.otp-enter .otp-box:nth-child(3){ animation-delay:.14s; } .otp-enter .otp-box:nth-child(4){ animation-delay:.20s; }
.otp-enter .otp-box:nth-child(5){ animation-delay:.26s; } .otp-enter .otp-box:nth-child(6){ animation-delay:.32s; }
@keyframes otpIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.otp-boxes.error{ animation:otpShake .38s cubic-bezier(.36,.07,.19,.97); }
.otp-boxes.error .otp-box{ border-color:#E5484D; }
@keyframes otpShake{ 10%, 90%{ transform:translateX(-1px); } 20%, 80%{ transform:translateX(2px); } 30%, 50%, 70%{ transform:translateX(-7px); } 40%, 60%{ transform:translateX(7px); } }
.otp-boxes.success .otp-box{ border-color:#2F9E6E; color:#3DD68C; transition:border-color .3s ease, color .3s ease; }
.otp-boxes.success .otp-box:nth-child(1){ transition-delay:0s; } .otp-boxes.success .otp-box:nth-child(2){ transition-delay:.06s; }
.otp-boxes.success .otp-box:nth-child(3){ transition-delay:.12s; } .otp-boxes.success .otp-box:nth-child(4){ transition-delay:.18s; }
.otp-boxes.success .otp-box:nth-child(5){ transition-delay:.24s; } .otp-boxes.success .otp-box:nth-child(6){ transition-delay:.30s; }
.otp-status{ min-height:20px; font-family:"JetBrains Mono", monospace; font-size:12px; letter-spacing:.02em; color:#9A9AA0; margin:8px 0 12px; }
.otp-status.err{ color:#FF8589; }
.otp-status.ok{ color:#3DD68C; }
.otp-meta{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; font-family:"JetBrains Mono", monospace; font-size:10.5px; letter-spacing:.12em; color:#8B8B90; }
.otp-resend{ background:none; border:0; padding:4px 0; font:inherit; color:#FFFFFF; cursor:pointer; letter-spacing:inherit; }
.otp-resend:hover:not(:disabled){ color:#FF6B5E; }
.otp-resend:disabled{ color:#5C5C61; cursor:default; }
.otp-back{ display:inline-block; margin-top:18px; background:none; border:0; padding:4px 0; color:#9A9AA0; font-size:13px; cursor:pointer; }
.otp-back:hover{ color:#FFFFFF; }
.otp-view .field{ margin-bottom:14px; }
@media (max-width: 480px){
  .otp-boxes{ gap:7px; }
  .otp-box{ height:54px; font-size:22px; border-radius:7px; }
  .otp-title{ font-size:23px; }
}

/* ================================================================
   COMPOSER POLISH (mono3) — tombol ala aplikasi AI mainstream:
   kirim = lingkaran putih solid dengan bayangan halus & animasi
   skala; lampir/hapus = lingkaran ghost; sudut composer lebih
   membulat; baris atas/bawah rata kanan (label konteks & petunjuk
   keyboard sudah dihapus dari markup).
   ================================================================ */
.chat-composer-form{ border-radius:22px; padding:10px 12px 12px; }
.composer-top-row{ justify-content:flex-end; padding:0 6px; }
.composer-bottom-row{ justify-content:flex-end; padding:0 6px; }
.composer-icon-button{ width:38px; height:38px; border-radius:50%; background:transparent; border:0; color:#C9C9CE; box-shadow:none; }
.composer-icon-button:hover{ background:#1B1B1E; color:#FFFFFF; }
.send-button{ width:40px; height:40px; border-radius:50%; background:#FFFFFF; color:#000000; font-size:17px; box-shadow:0 2px 12px rgba(0,0,0,.5); transition:transform .15s ease, background .15s ease, box-shadow .15s ease; }
.send-button:hover:not(:disabled){ background:#FFFFFF; transform:scale(1.07); }
.send-button:active:not(:disabled){ transform:scale(.96); }
.send-button:disabled{ background:#26262A; color:#6E6E73; box-shadow:none; }
.stop-button{ width:40px; height:40px; border-radius:50%; background:#141416; border:1px solid #2A2A2E; color:#FFFFFF; box-shadow:none; }
.chat-composer-form textarea{ font-size:15.5px; }
@media (max-width: 768px){
  .chat-composer-form{ border-radius:20px; }
  .chat-composer-form textarea{ font-size:16px; }
}

/* ================================================================
   PENGATURAN AKUN (mono4) — modal ala ChatGPT: panel datar hitam,
   tab samping, blok hairline. Avatar foto menutupi lingkaran.
   ================================================================ */
.profile-avatar.has-photo, .settings-avatar.has-photo{ background-size:cover; background-position:center; color:transparent; }
.profile-info{ cursor:pointer; }
.code-login-link{ margin-top:2px; }
.settings-modal{ position:fixed; inset:0; z-index:200; }
.settings-modal[hidden]{ display:none; }
.settings-scrim{ position:absolute; inset:0; background:rgba(0,0,0,.72); }
.settings-panel{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(860px, calc(100vw - 28px)); max-height:min(92vh, 760px); display:flex; background:#000000; border:1px solid #26262A; border-radius:14px; overflow:hidden; }
.settings-side{ width:196px; flex:none; background:#0B0B0C; border-right:1px solid #1C1C1F; padding:20px 12px; display:flex; flex-direction:column; gap:2px; }
.settings-side-title{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.18em; color:#6E6E73; margin:0 8px 12px; }
.settings-tab{ text-align:left; background:transparent; border:0; color:#C9C9CE; font:inherit; font-size:13.5px; padding:9px 10px; border-radius:8px; cursor:pointer; }
.settings-tab:hover{ background:#151517; color:#FFFFFF; }
.settings-tab.active{ background:#1D1D20; color:#FFFFFF; }
.settings-body{ flex:1; overflow-y:auto; padding:26px 28px 30px; position:relative; }
.settings-x{ position:absolute; top:14px; right:16px; width:32px; height:32px; border-radius:50%; border:1px solid #26262A; background:transparent; color:#C9C9CE; font-size:17px; line-height:1; cursor:pointer; }
.settings-x:hover{ background:#151517; color:#FFFFFF; }
.settings-pane h3{ font-size:19px; margin:0 0 20px; color:#FFFFFF; letter-spacing:-.01em; }
.settings-avatar-row{ display:flex; gap:16px; align-items:flex-start; margin-bottom:22px; }
.settings-avatar{ width:64px; height:64px; flex:none; border-radius:50%; background:#1D1D20; border:1px solid #2A2A2E; color:#FFFFFF; display:grid; place-items:center; font-size:24px; font-weight:600; overflow:hidden; }
.settings-avatar-actions{ display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.settings-textbtn{ background:none; border:0; padding:2px 0; font:inherit; font-size:12.5px; color:#8E8E93; cursor:pointer; }
.settings-textbtn:hover{ color:#FFFFFF; }
.settings-textbtn.danger:hover{ color:#FF7A70; }
.settings-pane .field{ display:block; margin:0 0 12px; }
.settings-pane .field > span{ display:block; font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:#8E8E93; margin-bottom:6px; }
.settings-pane .field input{ width:100%; background:#0B0B0C; border:1px solid #26262A; border-radius:8px; color:#FFFFFF; padding:10px 12px; font:inherit; font-size:14px; }
.settings-pane .field input:focus{ outline:none; border-color:#48484A; }
.settings-hint{ font-size:12px; color:#6E6E73; margin:4px 0 12px; line-height:1.5; }
.settings-hint span{ color:#C9C9CE; }
.settings-msg{ font-size:13px; color:#FF7A70; min-height:18px; margin:6px 0 10px; }
.settings-msg.ok{ color:#4CC38A; }
.settings-save{ margin-top:2px; }
.settings-block{ border-top:1px solid #1C1C1F; padding:18px 0 8px; margin-top:14px; }
.settings-block:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.settings-block > b{ display:block; font-size:14.5px; color:#FFFFFF; margin-bottom:8px; }
.settings-block .button{ margin:2px 0 6px; }
.settings-methods{ list-style:none; margin:0 0 12px; padding:0; border:1px solid #1C1C1F; border-radius:8px; overflow:hidden; }
.settings-methods li{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; font-size:13px; color:#E8E8EA; }
.settings-methods li + li{ border-top:1px solid #1C1C1F; }
.settings-methods em{ font-family:"JetBrains Mono",monospace; font-style:normal; font-size:9.5px; letter-spacing:.14em; color:#4CC38A; }
.settings-seg{ display:inline-flex; border:1px solid #26262A; border-radius:8px; overflow:hidden; }
.settings-seg button{ background:transparent; border:0; color:#8E8E93; font:inherit; font-size:13px; padding:8px 16px; cursor:pointer; }
.settings-seg button + button{ border-left:1px solid #26262A; }
.settings-seg button.active{ background:#FFFFFF; color:#000000; font-weight:600; }
.settings-danger-btn{ background:transparent; border:1px solid #5A2320; color:#FF7A70; border-radius:8px; }
.settings-danger-btn:hover{ background:#2A100E; }
.settings-otp-boxes{ display:flex; gap:8px; margin:10px 0 12px; }
.otp-box.mini{ flex:none; width:40px; height:46px; font-size:18px; }
#emailOtpRow{ margin-top:8px; }
@media (max-width: 768px){
  .settings-panel{ flex-direction:column; max-height:94vh; }
  .settings-side{ width:auto; flex-direction:row; flex-wrap:wrap; align-items:center; border-right:0; border-bottom:1px solid #1C1C1F; padding:12px; }
  .settings-side-title{ width:100%; margin:0 4px 8px; }
  .settings-tab{ padding:7px 10px; font-size:13px; }
  .settings-body{ padding:20px 18px 24px; }
  .otp-box.mini{ width:36px; height:42px; }
  .settings-otp-boxes{ gap:6px; }
}

/* ================================================================
   COMPACT CHAT (mono5) — kepadatan chat diperkecil atas permintaan
   Cinta (di HP-nya area obrolan & kotak ketik terasa terlalu besar).
   Semua selector ber-ID (#chatPage) supaya menang dari tema dasar.
   ================================================================ */
#chatPage .messages-list{ padding-top:20px; padding-bottom:26px; }
#chatPage .message-row{ grid-template-columns:26px minmax(0,1fr); gap:9px; margin-bottom:16px; }
#chatPage .message-avatar{ width:26px; height:26px; border-radius:8px; }
#chatPage .message-avatar-img{ width:17px; height:17px; }
#chatPage .message-row.assistant .message-body{ padding:10px 12px 11px; border-radius:16px; border-bottom-left-radius:6px; }
#chatPage .message-row.user .message-body{ padding:9px 12px 10px; border-radius:16px; border-bottom-right-radius:6px; }
#chatPage .message-meta{ font-size:10.5px; margin-bottom:4px; gap:8px; }
#chatPage .message-meta b{ font-size:12px; }
#chatPage .message-content{ font-size:13.5px; line-height:1.62; }
#chatPage .message-row.user .message-content{ font-size:13.5px; }
#chatPage .message-content p{ margin-bottom:8px; }
#chatPage .message-content h1{ font-size:17px; } #chatPage .message-content h2{ font-size:15px; } #chatPage .message-content h3{ font-size:13.5px; }
#chatPage .message-content h1, #chatPage .message-content h2, #chatPage .message-content h3{ margin:12px 0 6px; }
#chatPage .message-actions{ margin-top:7px; gap:5px; }
#chatPage .msg-action{ font-size:10.5px; padding:3px 9px; gap:4px; }
#chatPage .greeting-chips{ margin-left:35px; }
#chatPage .greeting-chip{ font-size:12px; padding:6px 11px; }
#chatPage .chat-composer-wrap{ padding-top:8px; }
#chatPage .chat-composer-form{ padding:8px 10px 9px; border-radius:18px; }
#chatPage .composer-top-row{ margin-bottom:4px; }
#chatPage .composer-bottom-row{ margin-top:4px; }
#chatPage .composer-input-row{ gap:6px; }
#chatPage .composer-input-row textarea{ font-size:14.5px; line-height:1.45; padding:5px 0; }
#chatPage .composer-icon-button{ width:32px; height:32px; }
#chatPage .clear-composer{ width:28px; height:28px; }
#chatPage .send-button{ width:34px; height:34px; }
#chatPage .stop-button{ width:34px; height:34px; }
#chatPage .chat-disclaimer{ margin-top:5px; }
@media (min-width: 901px){
  #chatPage .message-content{ font-size:14.5px; }
  #chatPage .message-row.user .message-content{ font-size:14.5px; }
  #chatPage .message-row{ margin-bottom:20px; }
}

/* ================================================================
   MONO6 — layar boot (anti kedipan landing), halaman legal
   (Terms/Privacy), tautan legal di auth, dan bar penggunaan harian.
   ================================================================ */
#bootScreen{ position:fixed; inset:0; z-index:400; background:#000000; display:grid; place-items:center; opacity:1; transition:opacity .35s ease; }
body.app-ready #bootScreen{ opacity:0; pointer-events:none; }
body:not(.app-ready) .page-view{ visibility:hidden; }
.boot-inner{ display:grid; justify-items:center; gap:18px; }
.boot-inner img{ width:52px; height:52px; }
.boot-bar{ width:118px; height:2px; background:#1C1C1F; border-radius:2px; overflow:hidden; display:block; }
.boot-bar i{ display:block; height:100%; width:38%; background:#2F7CF6; animation:bootSlide 1s ease-in-out infinite alternate; }
@keyframes bootSlide{ from{ transform:translateX(-45%);} to{ transform:translateX(285%);} }
.auth-legal-links{ margin-top:6px; font-size:11.5px; color:#6E6E73; display:flex; gap:7px; justify-content:center; }
.auth-legal-links a{ color:#8E8E93; text-decoration:none; }
.auth-legal-links a:hover{ color:#FFFFFF; text-decoration:underline; }
.legal-updated{ font-family:"JetBrains Mono",monospace; font-size:10.5px; letter-spacing:.14em; color:#6E6E73; margin:0 0 8px; text-transform:uppercase; }
.legal-doc{ margin-top:26px; }
.legal-doc h2{ font-size:16.5px; color:#FFFFFF; margin:26px 0 8px; letter-spacing:-.01em; }
.legal-doc p, .legal-doc li{ font-size:14px; line-height:1.75; color:#C9C9CE; }
.legal-doc p{ margin:0 0 10px; }
.legal-doc ul{ margin:0 0 10px; padding-left:20px; }
.legal-doc li{ margin:4px 0; }
.legal-doc a{ color:#7FB2FF; }
.legal-doc b{ color:#FFFFFF; }
.legal-foot-links{ display:inline-flex; gap:16px; }
.sidebar-usage{ padding:10px 2px 12px; border-top:1px solid #1C1C1F; margin-top:2px; }
.usage-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.usage-head span{ font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.16em; color:#6E6E73; }
.usage-head b{ font-family:"JetBrains Mono",monospace; font-size:11px; color:#FFFFFF; font-weight:600; }
.usage-bar{ height:5px; background:#1C1C1F; border-radius:99px; overflow:hidden; }
.usage-bar i{ display:block; height:100%; width:0%; background:#2F7CF6; border-radius:99px; transition:width .5s ease; }
.sidebar-usage.full .usage-head b{ color:#2F7CF6; }

/* ===== Ronde Pro 2: pin/folder/menu, edit pesan, share, kuis, flashcard, admin (2026-10-23) ===== */
.pin-tag{ font-family:"JetBrains Mono",monospace; font-size:8px; letter-spacing:.1em; color:#2F7CF6; border:1px solid rgba(47,124,246,.45); border-radius:4px; padding:1px 4px; flex:none; }
.share-tag{ color:#9A9AA0; border-color:#2A2A2E; }
.conversation-more{ flex:none; background:none; border:none; color:#6E6E73; font-size:15px; line-height:1; padding:2px 5px; border-radius:6px; cursor:pointer; }
.conversation-more:hover{ color:#fff; background:#1C1C1F; }
.history-section-label{ font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.16em; color:#6E6E73; padding:10px 10px 4px; }
.folder-head{ display:flex; align-items:center; gap:2px; padding:6px 4px 2px 6px; }
.folder-toggle{ flex:1; display:flex; align-items:center; gap:6px; background:none; border:none; color:#EDEDED; font-size:12.5px; font-weight:600; padding:3px 4px; cursor:pointer; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.folder-caret{ color:#6E6E73; font-size:10px; }
.folder-count{ font-family:"JetBrains Mono",monospace; font-size:9px; color:#6E6E73; border:1px solid #2A2A2E; border-radius:99px; padding:0 5px; }
.folder-mini{ background:none; border:none; color:#6E6E73; font-size:11px; padding:3px 4px; border-radius:5px; cursor:pointer; }
.folder-mini:hover{ color:#fff; background:#1C1C1F; }
.folder-empty{ padding:4px 10px 8px; font-size:11.5px; }
.history-label-right{ display:flex; align-items:center; gap:8px; }
.history-add-folder{ background:none; border:1px solid #2A2A2E; color:#9A9AA0; font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.08em; border-radius:5px; padding:2px 7px; cursor:pointer; }
.history-add-folder:hover{ color:#fff; border-color:#3A3A3F; }
.conversation-menu{ position:fixed; z-index:1200; width:210px; background:#0A0A0B; border:1px solid #26262A; border-radius:10px; padding:5px; box-shadow:0 14px 40px rgba(0,0,0,.6); }
.conversation-menu button{ display:block; width:100%; text-align:left; background:none; border:none; color:#EDEDED; font-size:12.5px; padding:7px 9px; border-radius:6px; cursor:pointer; }
.conversation-menu button:hover{ background:#1C1C1F; }
.conversation-menu button.danger{ color:#FF7A6B; }
.conversation-menu button.current{ color:#2F7CF6; }
.conversation-menu .menu-label{ font-family:"JetBrains Mono",monospace; font-size:8.5px; letter-spacing:.14em; color:#6E6E73; padding:8px 9px 3px; }
.message-edit{ width:100%; }
.message-edit-input{ width:100%; background:#0A0A0B; border:1px solid #2A2A2E; border-radius:10px; color:#fff; font:inherit; font-size:13.5px; line-height:1.55; padding:9px 11px; resize:vertical; }
.message-edit-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.msg-edit-cancel,.msg-edit-save{ border-radius:8px; font-size:12px; padding:7px 12px; cursor:pointer; border:1px solid #2A2A2E; background:none; color:#9A9AA0; }
.msg-edit-save{ background:#fff; color:#000; border-color:#fff; font-weight:600; }
.share-panel{ max-width:430px; width:calc(100% - 32px); margin:auto; padding:22px; position:relative; }
.share-title{ margin:0 0 8px; font-size:17px; }
.share-actions{ display:flex; gap:8px; margin-top:12px; }
.quiz-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; }
.quiz-head span{ font-family:"JetBrains Mono",monospace; font-size:10px; color:#9A9AA0; letter-spacing:.08em; }
.quiz-mode-toggle{ display:flex; gap:0; border:1px solid #2A2A2E; border-radius:8px; overflow:hidden; margin-bottom:14px; width:max-content; max-width:100%; }
.quiz-mode-toggle button{ background:none; border:none; color:#9A9AA0; font-size:12.5px; font-weight:600; padding:8px 16px; cursor:pointer; }
.quiz-mode-toggle button.active{ background:#fff; color:#000; }
.quiz-q{ border-top:1px solid #1C1C1E; padding:12px 0 4px; }
.quiz-q p{ margin:0 0 6px; font-size:13.5px; line-height:1.6; }
.quiz-opt{ color:#C9C9CE; padding-left:22px; }
.quiz-key{ color:#2F7CF6; font-size:12.5px; }
.quiz-key .ok{ color:#35C26E; } .quiz-key .bad{ color:#FF7A6B; }
.quiz-expl{ color:#9A9AA0; font-size:12.5px; line-height:1.6; }
.quiz-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.quiz-progress{ display:flex; align-items:center; gap:10px; font-family:"JetBrains Mono",monospace; font-size:10px; color:#9A9AA0; letter-spacing:.08em; margin-bottom:10px; }
.quiz-progress-bar{ flex:1; height:5px; background:#1C1C1F; border-radius:99px; overflow:hidden; }
.quiz-progress-bar i{ display:block; height:100%; background:#2F7CF6; }
.quiz-options{ display:grid; gap:8px; margin:10px 0; }
.quiz-option{ display:flex; gap:10px; align-items:center; text-align:left; background:#0A0A0B; border:1px solid #2A2A2E; color:#EDEDED; border-radius:10px; padding:11px 12px; font-size:13.5px; cursor:pointer; }
.quiz-option span{ font-family:"JetBrains Mono",monospace; font-size:11px; border:1px solid #2A2A2E; border-radius:6px; padding:2px 7px; flex:none; }
.quiz-option:hover:not(:disabled){ border-color:#3A3A3F; }
.quiz-option.correct{ border-color:#35C26E; background:rgba(53,194,110,.08); }
.quiz-option.wrong{ border-color:#FF7A6B; background:rgba(255,122,107,.08); }
.quiz-done{ text-align:center; padding:14px 0 6px; }
.quiz-score{ font-size:44px; font-weight:800; margin:0; }
.sum-block{ margin-bottom:16px; font-size:13.5px; line-height:1.65; }
.sum-block h4{ font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.14em; color:#9A9AA0; margin:0 0 8px; text-transform:uppercase; }
.sum-block ul{ margin:0; padding-left:18px; }
.flash-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; }
.flash-card{ position:relative; min-height:110px; background:#0A0A0B; border:1px solid #2A2A2E; border-radius:10px; color:#EDEDED; cursor:pointer; padding:0; perspective:600px; }
.flash-face{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:12px; font-size:12.5px; line-height:1.5; text-align:center; backface-visibility:hidden; -webkit-backface-visibility:hidden; transition:transform .45s ease; overflow:auto; }
.flash-front{ font-weight:600; }
.flash-back{ transform:rotateY(180deg); color:#C9C9CE; }
.flash-card.flipped .flash-front{ transform:rotateY(180deg); }
.flash-card.flipped .flash-back{ transform:rotateY(360deg); }
.admin-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; margin-bottom:14px; }
.admin-card{ border:1px solid #26262A; border-radius:12px; padding:14px; background:#0A0A0B; }
.admin-card span{ font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.14em; color:#6E6E73; display:block; margin-bottom:6px; }
.admin-card>b{ font-size:24px; display:block; }
.admin-card small{ color:#9A9AA0; font-size:11.5px; }
.admin-card p{ font-size:12.5px; line-height:1.7; margin:0; color:#C9C9CE; }
.admin-card-wide{ grid-column:1 / -1; }
.admin-table-wrap{ overflow-x:auto; }
.admin-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.admin-table th{ font-family:"JetBrains Mono",monospace; font-size:9px; letter-spacing:.12em; color:#6E6E73; text-align:left; padding:8px 8px; border-bottom:1px solid #26262A; }
.admin-table td{ padding:9px 8px; border-bottom:1px solid #1C1C1E; vertical-align:top; }
.admin-table small{ color:#9A9AA0; }
.admin-banned{ color:#FF7A6B; font-weight:700; }
.admin-ban-btn{ background:none; border:1px solid #FF7A6B; color:#FF7A6B; border-radius:7px; font-size:11.5px; padding:5px 10px; cursor:pointer; white-space:nowrap; }
.admin-ban-btn.unban{ border-color:#35C26E; color:#35C26E; }
.admin-head-actions{ display:flex; gap:8px; }

/* ===== Sambutan chat DIPIN persis foto referensi Cinta (2026-10-23): gaya kaca terang Design-7
   (pil saran terang, orb 3D, strip krem) di atas hitam — dikunci #chatPage agar identik di kedua atribut tema. ===== */
#chatPage .suggestion-grid button{ background:rgba(255,255,255,.7); border:1px solid #e0e8f5; border-radius:16px; color:#667894; }
#chatPage .suggestion-grid button:hover{ background:#fff; border-color:rgba(44,103,231,.3); transform:translateY(-2px); }
#chatPage .suggestion-icon{ background:#edf4ff; color:#4577c5; }
#chatPage .suggestion-arrow{ color:#9eacc1; }
#chatPage .setup-warning{ background:#fff9ee; border:1px solid #f0dcb9; border-radius:9px; color:#9b7e52; }
#chatPage .setup-warning>span{ border-color:#dbbd8c; color:#9b7e52; }
#chatPage .setup-warning[hidden]{ display:none !important; }
#chatPage .model-select-wrap select{ color:#FFFFFF; }
#chatPage .model-select-wrap select option{ background:#0E0E10; color:#FFFFFF; }
#chatPage .active-model-label>div>span{ color:#9aa7bc; }
#chatPage .active-model-label b{ color:#415777; }
#chatPage .welcome-description{ color:#8996ab; }
#chatPage .greeting-chip{ background:#fff; border:1px solid #DCE7F5; color:#2B62B8; }
#chatPage .greeting-chip:hover{ background:#F2F7FD; border-color:#BFD4F0; }

/* === MONO11: gambar hasil generate (Prisma) pas lebar percakapan + aksi === */
#chatPage .message-content img{ max-width:100%; height:auto; }
#chatPage .gen-image{ margin:8px 0 4px; max-width:420px; }
#chatPage .gen-image img{ display:block; width:100%; max-width:100%; height:auto; border-radius:12px; }
#chatPage .gen-image-actions{ display:flex; gap:8px; margin-top:8px; }

/* === MONO12: tombol Masuk dengan Google === */
.google-auth-wrap{ margin-top:18px; }
.auth-divider{ display:flex; align-items:center; gap:12px; margin:4px 0 14px; }
.auth-divider::before,.auth-divider::after{ content:""; flex:1; height:1px; background:#2a2a30; }
.auth-divider span{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.18em; color:#8a8f98; }
.google-btn{ display:flex; align-items:center; justify-content:center; gap:10px; height:44px; border-radius:10px; background:#fff; color:#1f2328; font-weight:600; font-size:14px; text-decoration:none; transition:background .2s ease, transform .12s ease; }
.google-btn:hover{ background:#eef1f4; }
.google-btn:active{ transform:scale(.99); }

/* === MONO13: basis pengetahuan di Pengaturan === */
.kb-list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.kb-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid #26262b; border-radius:10px; }
.kb-item-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.kb-item-info b{ font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kb-del{ flex:none; }

/* === MONO14: kanvas (artifact), panel pratinjau, menu unduh === */
.artifact-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0; padding:12px 14px; border:1px solid #2a2a30; border-radius:12px; background:#0b0b0d; }
.artifact-card-info{ display:flex; align-items:center; gap:12px; min-width:0; }
.artifact-card-icon{ flex:none; display:grid; place-items:center; width:38px; height:38px; border:1px solid #2f7cf6; border-radius:9px; color:#2f7cf6; font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; }
.artifact-card-texts{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.artifact-card-texts b{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.artifact-card-texts small{ color:#8a8a93; font-size:11.5px; }
.artifact-open{ flex:none; border:1px solid #2f7cf6; background:#2f7cf6; color:#fff; border-radius:8px; padding:8px 14px; font-size:12.5px; font-weight:600; cursor:pointer; }
.artifact-open:disabled{ background:transparent; color:#8a8a93; border-color:#33333a; cursor:default; }
.download-menu{ display:flex; flex-direction:column; min-width:196px; padding:6px; }
.download-menu button{ text-align:left; background:none; border:none; color:#e8e8ea; padding:9px 10px; border-radius:8px; font-size:13px; cursor:pointer; }
.download-menu button:hover{ background:#1b1b1f; }
.canvas-panel{ position:fixed; top:0; right:0; height:100dvh; width:min(700px,100vw); background:#050506; border-left:1px solid #26262b; z-index:120; display:flex; flex-direction:column; transform:translateX(24px); opacity:0; transition:transform .22s ease, opacity .22s ease; }
.canvas-panel.open{ transform:translateX(0); opacity:1; }
.canvas-panel[hidden]{ display:none; }
.canvas-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px 10px; }
.canvas-title-wrap{ display:flex; align-items:center; gap:10px; min-width:0; }
.canvas-title-wrap h3{ font-size:15px; margin:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.canvas-type{ flex:none; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; color:#2f7cf6; border:1px solid #2f7cf6; border-radius:6px; padding:3px 7px; }
.canvas-actions{ display:flex; gap:8px; flex:none; }
.canvas-btn{ background:#101013; border:1px solid #2c2c33; color:#e8e8ea; border-radius:8px; padding:7px 12px; font-size:12.5px; cursor:pointer; }
.canvas-btn:hover{ border-color:#3d3d46; }
.canvas-tabs{ display:flex; gap:6px; padding:0 16px 10px; }
.canvas-tab{ background:none; border:1px solid #2c2c33; color:#a7a7b0; border-radius:8px; padding:6px 14px; font-size:12.5px; cursor:pointer; }
.canvas-tab.active{ background:#fff; color:#000; border-color:#fff; font-weight:600; }
.canvas-tab:disabled{ opacity:.4; cursor:default; }
.canvas-body{ flex:1; min-height:0; border-top:1px solid #1d1d22; display:flex; }
.canvas-frame{ flex:1; width:100%; height:100%; border:none; background:#fff; }
.canvas-rendered{ flex:1; overflow:auto; padding:18px; }
.canvas-code{ flex:1; overflow:auto; margin:0; padding:16px; font-family:'JetBrains Mono',monospace; font-size:12.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word; }

/* ===== Bilah error kanvas (mono15) ===== */
.canvas-error-bar{display:flex;align-items:center;gap:10px;padding:8px 14px;background:#2a1216;border-bottom:1px solid #5a232c;color:#f3b8bf;font:500 12px/1.5 "JetBrains Mono",monospace}
.canvas-error-bar[hidden]{display:none}
.canvas-error-bar span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.canvas-error-bar button{flex:0 0 auto;background:#e5484d;color:#fff;border:0;border-radius:7px;padding:6px 12px;font:600 12px "JetBrains Mono",monospace;cursor:pointer}
.canvas-error-bar button:hover{background:#f2555a}

/* ================================================================
   MONO18 — boot dua mode + perbaikan posisi (koreksi 2026-10-24).
   BUG MONO17: .boot-inner img (52px) mengalahkan .boot-logo (120px),
   DAN .boot-stage tanpa perata tengah → logo 52px menempel di pojok
   kiri-atas stage 120px = 34px meleset dari tengah (inilah "miring"
   di screenshot Cinta). PERBAIKAN: stage di-grid tengah; ukuran logo
   eksplisit per mode (lama 52px persis boot lama, Orbit 120px).
   Default (refresh/load biasa) = boot LAMA: logo statis + bar, tanpa
   partikel/wordmark. Mode Orbit (class .boot-orbit di #bootScreen,
   hanya habis login Google / interstitial login) = partikel mengerucut,
   logo melenting + napas cahaya, wordmark naik. Bar dipertahankan.
   ================================================================ */
.boot-stage{ position:relative; display:grid; place-items:center; width:52px; height:52px; }
#bootScreen.boot-orbit .boot-stage{ width:120px; height:120px; }
#bootScreen .boot-orbit-box, #bootScreen .boot-glow, #bootScreen .boot-wordmark{ display:none; }
#bootScreen.boot-orbit .boot-orbit-box, #bootScreen.boot-orbit .boot-glow, #bootScreen.boot-orbit .boot-wordmark{ display:block; }
.boot-glow{ position:absolute; left:50%; top:50%; width:300px; height:300px; transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(139,92,246,.30), rgba(255,111,97,.12), transparent 72%);
  border-radius:50%; opacity:0; }
#bootScreen.boot-orbit .boot-glow{ animation:bootGlow 3s ease-in-out 1.1s infinite; }
@keyframes bootGlow{ 0%{ opacity:0; } 20%{ opacity:1; } 50%{ opacity:.6; } 100%{ opacity:1; } }
.boot-orbit-box{ position:absolute; left:50%; top:50%; width:0; height:0; z-index:1; }
.boot-orbit-box i{ position:absolute; width:10px; height:10px; margin:-5px; border-radius:50%;
  background:#a78bfa; opacity:0; }
#bootScreen.boot-orbit .boot-orbit-box i{ animation:bootOrbit 2.4s both; }
.boot-orbit-box i:nth-child(odd){ background:#ff6f61; }
.boot-orbit-box i:nth-child(2){ animation-delay:.04s; } .boot-orbit-box i:nth-child(3){ animation-delay:.08s; }
.boot-orbit-box i:nth-child(4){ animation-delay:.12s; } .boot-orbit-box i:nth-child(5){ animation-delay:.16s; }
.boot-orbit-box i:nth-child(6){ animation-delay:.20s; } .boot-orbit-box i:nth-child(7){ animation-delay:.24s; }
.boot-orbit-box i:nth-child(8){ animation-delay:.28s; } .boot-orbit-box i:nth-child(9){ animation-delay:.32s; }
.boot-orbit-box i:nth-child(10){ animation-delay:.36s; } .boot-orbit-box i:nth-child(11){ animation-delay:.40s; }
.boot-orbit-box i:nth-child(12){ animation-delay:.44s; }
@keyframes bootOrbit{
  0%{ opacity:0; transform:translate(var(--x), var(--y)) scale(.4); }
  30%{ opacity:1; }
  38%{ opacity:1; transform:translate(0, 0) scale(1); }
  46%, 100%{ opacity:0; transform:translate(0, 0) scale(0); }
}
.boot-logo{ position:relative; z-index:2; width:52px; height:52px; object-fit:contain;
  filter:drop-shadow(0 0 22px rgba(167,139,250,.55)); }
#bootScreen.boot-orbit .boot-logo{ width:120px; height:120px; }
#bootScreen.boot-orbit .boot-logo{ animation:bootPop 2.4s both; }
@keyframes bootPop{
  0%, 32%{ opacity:0; transform:scale(.4); }
  44%{ opacity:1; transform:scale(1.1); }
  52%, 100%{ opacity:1; transform:scale(1); }
}
.boot-wordmark{ font-size:26px; font-weight:700; letter-spacing:.5px; }
#bootScreen.boot-orbit .boot-wordmark{ animation:bootWord 2.4s both; }
.boot-wordmark .bw-c{ color:#FFFFFF; }
.boot-wordmark .bw-ai{ color:#ff6f61; }
@keyframes bootWord{ 0%, 44%{ opacity:0; transform:translateY(14px); } 56%, 100%{ opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  #bootScreen.boot-orbit .boot-glow, #bootScreen.boot-orbit .boot-wordmark{ animation:none !important; opacity:1 !important; transform:none !important; }
  #bootScreen.boot-orbit .boot-logo{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ================================================================
   MONO20 — Koleksi (2026-10-24): seksi Dokumen + Media, tanpa emot.
   ================================================================ */
.gal-topbar{ display:flex; align-items:center; gap:12px; margin:0 0 16px; }
.gal-back{ width:36px; height:36px; border-radius:50%; border:1px solid var(--studio-line); background:transparent; color:var(--studio-ink); font-size:18px; cursor:pointer; flex:none; }
.gal-topbar h2{ flex:1; text-align:center; font-size:19px; margin:0; }
.gal-topbar-spacer{ width:36px; flex:none; }
.gal-toolbar{ display:flex; align-items:center; gap:10px; margin:0 0 20px; flex-wrap:wrap; }
.gal-toolbar input{ flex:1; min-width:180px; border:0; border-radius:14px; background:#F4F1EC; color:#111; padding:10px 14px; font-size:14px; }
[data-theme="dark"] .gal-toolbar input{ background:#1A1B20; color:#F4F5F6; }
.gal-section{ margin-bottom:24px; }
.gal-section-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.gal-section-head h3{ font-size:17px; margin:0; font-weight:600; }
.gal-collapse{ width:32px; height:32px; border-radius:50%; border:1px solid var(--studio-line); background:transparent; color:var(--studio-ink); font-size:20px; line-height:1; cursor:pointer; transform:rotate(90deg); transition:transform .18s ease; }
.gal-collapse.collapsed{ transform:rotate(0deg); }
.gal-rows{ display:flex; flex-direction:column; gap:12px; }
.gal-row{ display:flex; align-items:center; gap:14px; width:100%; text-align:left; font:inherit; color:#141414; border:0; border-radius:20px; background:#F4F1EC; padding:16px 18px; cursor:pointer; }
[data-theme="dark"] .gal-row{ background:#1A1B20; color:#F4F5F6; }
.gal-row-icon{ flex:none; width:34px; height:34px; border:1.5px solid currentColor; border-radius:8px; display:grid; place-items:center; font-size:14px; font-weight:700; }
.gal-row-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.gal-row-text b{ font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gal-row-meta{ font-size:13px; color:#8A8A8E; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
[data-theme="dark"] .gal-row-meta{ color:#9BA1A9; }
.gal-media-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; }
.gal-media-tile{ border:0; padding:0; border-radius:10px; overflow:hidden; aspect-ratio:1/1; cursor:pointer; background:#F4F1EC; }
[data-theme="dark"] .gal-media-tile{ background:#1A1B20; }
.gal-media-tile img{ width:100%; height:100%; object-fit:cover; display:block; }
.mem-item{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:10px 12px; border:1px solid #26262b; border-radius:10px; }
.mem-item-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.mem-text{ font-size:13px; line-height:1.5; margin:0; }
#memStyleRow{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
#memStyleRow[hidden]{ display:none; }

/* ================================================================
   MONO21 — tombol login GitHub (2026-10-24).
   ================================================================ */
.github-btn{ display:flex; align-items:center; justify-content:center; gap:10px; height:44px; border-radius:10px; background:#24292f; color:#fff; font-weight:600; font-size:14px; text-decoration:none; transition:background .2s ease, transform .12s ease; }
.github-btn:hover{ background:#32383f; }
.github-btn:active{ transform:scale(.99); }