/* Skinex × Duxton tokens
   Source: design-ref-duxton / Immersion Bingo (Grab Duxton)
   Brand green (#00b14f / #00804a) remapped → Skinex blue (#0074d9) */

:root, .app{
  /* Neutrals — light default (Duxton) */
  --bg-canvas:#f5f5f5;
  --bg-card:#ffffff;
  --bg-card-2:#ffffff;
  --bg-elev:#e8e8e8;
  --border-soft:#e8e8e8;
  --border-mid:#e8e8e8;
  --border-strong:#bfbfbf;
  --ink-hi:#1a1a1a;
  --ink:#1a1a1a;
  --ink-mute:#707070;
  --ink-dim:#707070;
  --ink-faint:#a3a3a3;

  /* Brand — Skinex blue (replaces Duxton green) */
  --brand:#0074d9;
  --brand-hi:#0058a8;
  --brand-deep:#003e7a;
  --brand-soft:#d6ebff;
  --brand-soft-ink:#0058a8;
  --on-brand:#ffffff;

  /* Domain accents (kept for skin/body modules) */
  --skin:#c47a5e;
  --skin-hi:#a85f45;
  --body:#2f8a64;
  --body-hi:#1f6a4a;
  --gold:#8c6420;
  --gold-hi:#6a4a14;
  --warn:#c45c2a;
  --bad:#c0392b;
  --good:#0074d9;

  --surface-1:#f5f5f5;
  --surface-2:#eef0f3;
  --surface-3:#e8e8e8;
  --surface-4:#dfe2e6;
  --track:#e8e8e8;
  --on-glass-bg:rgba(26,26,26,0.04);

  --glow-brand:rgba(0,116,217,0.12);
  --glow-skin:rgba(196,122,94,0.08);
  --stage-bg:#eceae5;
  --bezel-1:#d0cdc6;
  --bezel-2:#e4e1da;
  --statusbar-fg:#1a1a1a;
  --indicator:rgba(26,26,26,0.45);

  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-pill:999px;
  --shadow-card:0 1px 2px rgba(26,26,26,0.04), 0 4px 16px rgba(26,26,26,0.05);
  --font-sans:'Inter',system-ui,-apple-system,sans-serif;
  --tabbar-bg:#ffffff;
  --tabbar-shadow:none;

  /* Type scale — member UI (Body InBody screen uses its own local scale) */
  --text-eyebrow:10px;
  --text-meta:11px;
  --text-caption:12px;
  --text-section:13px;
  --text-body:14px;
  --text-emphasis:16px;
  --text-metric:22px;
  --text-screen:26px;
  --text-greet:28px;
}

/* Dark mode — Duxton inverted neutrals, same brand blue */
body[data-theme="dark"] .app,
.app[data-theme="dark"],
:root[data-theme="dark"] .app{
  --bg-canvas:#1a1a1a;
  --bg-card:#292929;
  --bg-card-2:#292929;
  --bg-elev:#3d3d3d;
  --border-soft:#3d3d3d;
  --border-mid:#3d3d3d;
  --border-strong:#707070;
  --ink-hi:#ffffff;
  --ink:#ffffff;
  --ink-mute:#a3a3a3;
  --ink-dim:#a3a3a3;
  --ink-faint:#707070;

  --brand:#0074d9;
  --brand-hi:#5aa3ff;
  --brand-deep:#003e7a;
  --brand-soft:#0a3a66;
  --brand-soft-ink:#8ec5ff;
  --on-brand:#ffffff;

  --skin:#f0bfae;
  --skin-hi:#ffd6c4;
  --body:#8cd9b3;
  --body-hi:#b6ecd0;
  --gold:#e0c184;
  --gold-hi:#f0d9a8;
  --warn:#ffb070;
  --bad:#ff8a7a;
  --good:#5aa3ff;

  --surface-1:#292929;
  --surface-2:#323232;
  --surface-3:#3d3d3d;
  --surface-4:#4a4a4a;
  --track:#3d3d3d;
  --on-glass-bg:rgba(0,0,0,0.25);

  --glow-brand:rgba(0,116,217,0.22);
  --glow-skin:rgba(240,191,174,0.08);
  --stage-bg:#0f0f0f;
  --bezel-1:#1a1a1a;
  --bezel-2:#292929;
  --statusbar-fg:#ffffff;
  --indicator:rgba(255,255,255,0.55);
  --tabbar-bg:#1a1a1a;
  --shadow-card:0 1px 2px rgba(0,0,0,0.2), 0 8px 24px rgba(0,0,0,0.25);
}

body[data-theme="dark"]{
  --stage-bg:#0f0f0f;
}

*,*::before,*::after{box-sizing:border-box}
html,body{
  margin:0;padding:0;height:100%;width:100%;overflow:hidden;
  touch-action:manipulation;
  -ms-touch-action:manipulation;
  overscroll-behavior:none;
}
html{height:-webkit-fill-available}
body{
  font-family:var(--font-sans);
  background:var(--bg-canvas,#f5f5f5);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100%;
  min-height:-webkit-fill-available;
}
.app,.scroll{touch-action:pan-x pan-y}

.stage{
  position:relative;
  background:var(--stage-bg);
  min-height:100vh;
  width:100%;
  display:flex;align-items:center;justify-content:center;
}

.app{
  position:fixed;
  top:0; right:0; bottom:0; left:0;
  width:100%;
  height:auto;
  max-height:100%;
  padding-top:env(safe-area-inset-top, 0px);
  box-sizing:border-box;
  background:var(--bg-canvas);
  display:flex;flex-direction:column;
  font-family:var(--font-sans);
  color:var(--ink);
  overflow:hidden;
  transition:background-color .25s ease, color .25s ease;
}

.scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding-top:8px;padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)); -webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{display:none}
.scroll{scrollbar-width:none}
.scroll-guest{
  padding-top:0;
  padding-bottom:0;
  display:flex;
  flex-direction:column;
}
.scroll-guest > .login-screen{flex:1;min-height:100%}

.statusbar-pad{height:12px;flex-shrink:0}

/* Typography — Inter, Duxton weight ladder */
.serif{font-family:var(--font-sans);font-weight:800;letter-spacing:-0.03em}
.label{font-size:var(--text-caption);font-weight:600;letter-spacing:0.02em;color:var(--ink-mute)}
.label-hi{font-size:var(--text-caption);font-weight:700;letter-spacing:0.01em;color:var(--ink-hi)}
.eyebrow{font-size:var(--text-eyebrow);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--brand)}
.section-title{font-size:var(--text-section);font-weight:700;letter-spacing:-0.01em;color:var(--ink-hi);margin:0 0 12px;text-transform:none}
.h1-greet{font-family:var(--font-sans);font-weight:800;font-size:var(--text-greet);letter-spacing:-0.035em;line-height:1.15;margin:0;color:var(--ink-hi)}
.h2{font-size:var(--text-metric);font-weight:800;letter-spacing:-0.03em;margin:0}
.text-meta{font-size:var(--text-meta);font-weight:600;color:var(--ink-mute)}
.text-caption{font-size:var(--text-caption);font-weight:500;color:var(--ink-mute);line-height:1.45}
.text-body{font-size:var(--text-body);font-weight:600;color:var(--ink-hi)}
.ai-kicker{font-size:var(--text-eyebrow);font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--brand)}
.num-mono{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;font-weight:800;letter-spacing:-0.03em}
.body-ai-html{font-size:var(--text-caption);line-height:1.45;color:var(--ink)}
.body-ai-html p{margin:0 0 8px;line-height:1.5}
.body-ai-html p:last-child{margin-bottom:0}
.body-ai-html strong,.body-ai-html b{font-weight:700;color:var(--ink-hi)}
.body-ai-html ul,.body-ai-html ol{margin:4px 0 0;padding-left:1.15em}
.body-ai-html li{margin:0 0 4px;line-height:1.45}
.body-ai-html li:last-child{margin-bottom:0}

/* Cards — flat Duxton modules */
.card{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  border:1px solid var(--border-soft);
  padding:16px;
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.card-flat{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:14px;
  border:1px solid var(--border-soft);
}
.card-elev{
  background:var(--bg-card);
  border-radius:var(--radius-md);
  padding:14px;
  border:1px solid var(--border-mid);
}
.row{display:flex;align-items:center;gap:12px}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.stack{display:flex;flex-direction:column;gap:12px}
.stack-tight{display:flex;flex-direction:column;gap:6px}
.gap-8{gap:8px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.px-20{padding-left:20px;padding-right:20px}
.py-12{padding-top:12px;padding-bottom:12px}
.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}
.mb-8{margin-bottom:8px}.mb-12{margin-bottom:12px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}

/* Buttons — 48px pills */
.btn{
  appearance:none;border:0;cursor:pointer;
  font-family:inherit;font-weight:700;letter-spacing:-0.01em;text-transform:none;
  font-size:var(--text-body);padding:0 20px;height:48px;border-radius:var(--radius-pill);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s,opacity .12s,background .15s;
}
.btn:active{transform:scale(0.98)}
.btn-primary{background:#0074d9;color:#ffffff}
.btn-primary:hover{background:#0058a8}
.btn-ghost{background:transparent;color:var(--ink-hi);border:1px solid var(--border-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-outline{background:transparent;color:var(--ink-hi);border:1px solid var(--border-strong)}
.btn:disabled,.btn[disabled]{cursor:default;transform:none;pointer-events:none}
.btn-primary:disabled,.btn-primary[disabled]{background:#0074d9;color:#ffffff;opacity:1}

/* Chip / pill */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:var(--radius-pill);font-size:var(--text-meta);font-weight:700;letter-spacing:-0.01em;
  background:var(--brand-soft);color:var(--brand-soft-ink);border:0;
}
.chip-brand{background:var(--brand-soft);color:var(--brand-soft-ink)}
.chip-skin{background:rgba(196,122,94,0.14);color:var(--skin)}
.chip-body{background:rgba(47,138,100,0.14);color:var(--body)}
.chip-gold{background:rgba(140,100,32,0.12);color:var(--gold)}
.chip-silver{background:rgba(169,173,188,0.22);color:#5c6275}
.chip-platinum{background:rgba(126,147,214,0.18);color:#4a5d99}
.chip-good{background:var(--brand-soft);color:var(--brand-soft-ink)}
.chip-warn{background:rgba(196,92,42,0.14);color:var(--warn)}
body[data-theme="dark"] .chip-silver{background:rgba(169,173,188,0.18);color:#c8ccd8}
body[data-theme="dark"] .chip-platinum{background:rgba(126,147,214,0.22);color:#b8c6f0}
body[data-theme="dark"] .chip-gold{background:rgba(224,193,132,0.16);color:var(--gold)}

.div-h{height:1px;background:var(--border-soft);width:100%}

/* Tab bar — Duxton flat bottom nav */
.tabbar-wrap{
  position:absolute;left:0;right:0;bottom:0;z-index:30;
  padding:0;
  pointer-events:none;
}
.tabbar{
  pointer-events:auto;
  background:var(--tabbar-bg);
  border-top:1px solid var(--border-soft);
  border-radius:0;
  padding:6px 8px calc(10px + env(safe-area-inset-bottom, 0px));
  display:flex;align-items:center;justify-content:space-around;
  gap:4px;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.tab{
  appearance:none;background:transparent;border:0;cursor:pointer;
  padding:6px 4px;height:52px;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  color:var(--ink-mute);min-width:0;
  font-family:inherit;font-size:9.5px;font-weight:600;letter-spacing:-0.01em;
  text-transform:uppercase;
  border-radius:var(--radius-md);
  transition:color .15s, background .15s;
}
.tab.active{color:var(--brand);background:var(--brand-soft)}
.tab svg{stroke-width:1.9}
.tab span{text-transform:uppercase}

.ring{position:relative;display:inline-flex;align-items:center;justify-content:center}
.ring svg{transform:rotate(-90deg)}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

.glow-skin{box-shadow:none}
.glow-brand{box-shadow:none}
.glow-body{box-shadow:none}

.scrn-hd{padding:6px 20px 14px;display:flex;align-items:center;justify-content:space-between}
.scrn-title{font-family:var(--font-sans);font-size:var(--text-screen);font-weight:800;letter-spacing:-0.035em;color:var(--ink-hi);margin:0}
.scrn-sub{font-size:var(--text-section);font-weight:500;color:var(--ink-mute);margin:6px 0 0;letter-spacing:-0.01em;line-height:1.4}

.ph-image{
  background:linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 100%);
  background-size:cover;background-position:center;
  position:relative;overflow:hidden;
}
.ph-image::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(60% 80% at 30% 30%, rgba(255,255,255,0.12) 0%, transparent 60%);
}

.touchable{transition:opacity .12s, transform .12s; cursor:pointer}
.touchable:active{opacity:0.75; transform:scale(0.985)}

.bg-gold{
  background:linear-gradient(135deg, #f0d9a8 0%, #e0a76d 50%, #be8a52 100%);
  color:#3a2a18;
}
.bg-silver{background:linear-gradient(135deg,#e8e8ed 0%,#a9adbc 100%);color:#1a1d28}
.bg-platinum{background:linear-gradient(135deg,#c5d4ff 0%,#7e93d6 50%,#5b6ea8 100%);color:#11142a}

.bar{height:6px;border-radius:999px;background:var(--track);overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:999px;background:var(--brand);transition:width .5s cubic-bezier(.22,1,.36,1)}

/* Opacity-only — avoid transform (it traps position:fixed children to the page) */
@keyframes screenIn{
  from{opacity:0}
  to{opacity:1}
}
.screen-anim{animation:screenIn .28s cubic-bezier(.22,1,.36,1) both}
@media (prefers-reduced-motion: reduce){
  .screen-anim{animation:none}
  .touchable:active{transform:none}
}

.sheet-backdrop{position:fixed;inset:0;background:rgba(26,26,26,0.55);z-index:40;backdrop-filter:blur(2px)}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:var(--bg-card);
  border-top-left-radius:var(--radius-md);border-top-right-radius:var(--radius-md);
  border-top:1px solid var(--border-soft);
  padding:8px 0 30px;
  animation:sheetIn .28s cubic-bezier(.22,1,.36,1) both;
  max-height:80%;display:flex;flex-direction:column;
}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-handle{width:36px;height:4px;border-radius:999px;background:var(--ink-faint);margin:8px auto 12px}

.iframe-modal-backdrop{
  /* Must live on document.body (via SkinexPortal) so fixed = visual viewport */
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  width:100%;
  height:100%;
  height:100dvh;
  z-index:200;
  background:rgba(26,26,26,0.55);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:
    max(10px, env(safe-area-inset-top, 0px))
    5vw
    max(10px, env(safe-area-inset-bottom, 0px));
  box-sizing:border-box;
}
.iframe-modal{
  position:relative;
  width:90vw;
  height:90svh;
  height:90dvh;
  max-width:90vw;
  max-height:calc(100svh - 20px);
  max-height:calc(100dvh - 20px);
  margin:0;
  flex-shrink:0;
  background:var(--bg-card);
  border-radius:var(--radius-md);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  display:flex;flex-direction:column;
  animation:iframeModalIn .22s cubic-bezier(.22,1,.36,1) both;
}
@keyframes iframeModalIn{from{opacity:0}to{opacity:1}}
.iframe-modal-close{
  position:absolute;top:10px;right:10px;z-index:2;
  width:36px;height:36px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  appearance:none;cursor:pointer;
  border:1px solid var(--border-mid);
  background:rgba(255,255,255,0.92);
  color:var(--ink-hi);
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.app[data-theme="dark"] .iframe-modal-close{
  background:rgba(30,30,30,0.92);
}
.iframe-modal iframe{
  flex:1 1 auto;width:100%;height:100%;min-height:0;border:0;background:#fff;
}

/* Native article reader sheet (profile-edit style) */
.article-sheet-header{
  display:flex;align-items:flex-start;gap:8px;
  padding-top:4px;padding-bottom:12px;
  border-bottom:1px solid var(--border-soft);
  flex-shrink:0;
}
.article-sheet-title{
  font-size:18px;font-weight:800;letter-spacing:-0.02em;line-height:1.3;
  color:var(--ink-hi);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
}
.article-sheet-body{
  flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-top:16px;padding-bottom:12px;
}
.article-sheet-hero{
  display:block;width:100%;max-height:220px;object-fit:cover;
  border-radius:14px;margin:0 0 16px;background:var(--surface-2);
}
.article-sheet-prose{
  font-size:16px;line-height:1.7;color:var(--ink);
  letter-spacing:-0.005em;
}
.article-sheet-prose p{margin:0 0 14px}
.article-sheet-prose p:last-child{margin-bottom:0}
.article-sheet-prose h1,.article-sheet-prose h2,.article-sheet-prose h3,
.article-sheet-prose h4,.article-sheet-prose h5,.article-sheet-prose h6{
  margin:18px 0 8px;color:var(--ink-hi);font-weight:800;letter-spacing:-0.02em;line-height:1.25;
}
.article-sheet-prose h2{font-size:1.2em}
.article-sheet-prose h3{font-size:1.08em}
.article-sheet-prose ul,.article-sheet-prose ol{margin:0 0 14px;padding-left:1.25em}
.article-sheet-prose li{margin:0 0 6px}
.article-sheet-prose a{color:var(--brand-hi);text-decoration:underline;text-underline-offset:2px}
.article-sheet-prose img{
  display:block;max-width:100%;height:auto;border-radius:12px;margin:12px 0;
}
.article-sheet-prose figure{margin:12px 0}
.article-sheet-prose figcaption{
  font-size:var(--text-meta);color:var(--ink-mute);margin-top:6px;line-height:1.4;
}
.article-sheet-prose blockquote{
  margin:12px 0;padding:10px 14px;border-left:3px solid var(--brand);
  background:rgba(0,116,217,0.06);border-radius:0 10px 10px 0;color:var(--ink);
}
.article-sheet-footer{
  flex-shrink:0;padding-top:12px;padding-bottom:max(16px, env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--border-soft);background:var(--bg-card);
}

/* Form field helper (Duxton) */
.field{
  display:flex;align-items:center;gap:8px;height:48px;padding:0 12px;
  border-radius:var(--radius-sm);border:1px solid var(--border-strong);
  background:var(--bg-card);
}
.field:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(0,116,217,0.15);
}
.field input,.field textarea{
  flex:1;border:0;background:transparent;outline:none;
  font:500 13px/1.3 var(--font-sans);color:var(--ink-hi);
}

/* Hide Google reCAPTCHA v3 floating badge (allowed if branding text stays in login UI) */
.grecaptcha-badge{
  visibility:hidden !important;
}

/* ─── Skin module — mirrors skin-module-proposal.html ─── */
.skin-screen{
  --good:#2f8a64;
  --mid:#c98a1e;
  --low:#c0392b;
  --sk-radius:16px;
}
.skin-screen > .sk-hdr{
  padding:12px 20px 16px; /* match ScreenHeader */
  display:flex;align-items:center;justify-content:space-between;gap:12px
}
.skin-screen > .sk-hdr .sk-hdr-text{min-width:0;flex:1}
.skin-screen > .sk-hdr .eyebrow{
  margin-bottom:8px; /* match ScreenHeader kicker */
  color:var(--brand);letter-spacing:.12em;font-weight:700
}
.skin-screen > .sk-hdr .scrn-title{
  margin:0;font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15
}
.skin-screen > .sk-hdr .sk-hdr-logo,
.skin-screen > .sk-hdr img{
  width:36px;height:36px;object-fit:contain;flex-shrink:0;display:block
}
.skin-screen .eyebrow{color:var(--ink-faint);letter-spacing:.12em}
.body-screen .eyebrow{color:var(--ink-faint);letter-spacing:.12em}
/* ScreenHeader kicker — match brand blue used on other tabs */
.body-screen > div:first-child > .eyebrow{
  color:var(--brand);letter-spacing:.12em;font-weight:700
}
.skin-screen .section-title{margin:0 0 10px;font-size:13px;font-weight:700;letter-spacing:0}
.skin-screen .card{border-radius:var(--sk-radius)}
.skin-screen .chip-good{
  color:var(--good);
  background:color-mix(in srgb,var(--good) 15%,transparent)
}
.skin-screen .chip-warn{
  color:var(--warn);
  background:color-mix(in srgb,var(--warn) 16%,transparent)
}
.skin-screen .chip{
  font-size:11px;font-weight:700;padding:4px 9px;gap:4px;border-radius:999px
}

.sk-hero{
  padding:16px 18px;
  background:radial-gradient(120% 80% at 50% 0%,rgba(196,122,94,.14) 0%,transparent 60%),var(--bg-card)
}
.sk-hero-score{
  font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink-hi)
}
.sk-hero-unit{font-size:12px;color:var(--ink-mute);font-weight:700}
.sk-ai{
  padding:13px 14px;border-radius:14px;
  border:1px solid rgba(0,116,217,.22);
  background:linear-gradient(135deg,rgba(0,116,217,.12) 0%,rgba(0,116,217,.05) 55%,rgba(196,122,94,.08) 100%)
}
.sk-ai .ai-kicker{letter-spacing:.12em;color:var(--brand-hi)}
.sk-ai .sk-ai-msg{font-size:var(--text-caption);line-height:1.5;color:var(--ink);margin:6px 0 0}
.sk-ai .body-ai-html{font-size:var(--text-body);line-height:1.5;color:var(--ink);margin:6px 0 0}
.sk-ai .body-ai-html p{margin:0 0 8px;line-height:1.5}
.sk-ai .body-ai-html p:last-child{margin-bottom:0}
.sk-ai .body-ai-html ul{margin:8px 0;padding-left:1.2em}
.sk-ai .body-ai-html li{margin:0 0 5px;line-height:1.5;font-size:var(--text-body)}
.sk-ai .body-ai-html li:last-child{margin-bottom:0}
.sk-ai-ico{
  width:28px;height:28px;border-radius:8px;flex-shrink:0;
  background:rgba(0,116,217,.14);color:var(--brand);
  display:flex;align-items:center;justify-content:center
}
.sk-ai-refresh{
  appearance:none;border:0;background:transparent;color:var(--brand);
  width:36px;height:36px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center
}
.sk-ai-refresh:disabled{opacity:.5;cursor:default}
.sk-ai-treats{margin-top:10px;padding-top:10px;border-top:1px solid rgba(0,116,217,.14)}
.sk-ai-treats-label{
  font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-hi);margin-bottom:8px
}
.sk-ai-treats-list{display:flex;flex-direction:column;gap:8px}
.sk-ai-treat{
  appearance:none;border:1px solid rgba(0,116,217,.16);background:rgba(255,255,255,.55);
  border-radius:12px;padding:8px 10px;display:flex;align-items:center;gap:10px;
  text-align:left;cursor:pointer;color:var(--ink-hi);width:100%
}
.sk-ai-treat-img{
  width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0;
  background:var(--surface-2);display:block
}
.sk-ai-treat-img--ph{
  display:flex;align-items:center;justify-content:center;color:var(--brand);
  background:linear-gradient(135deg,rgba(0,116,217,.16),rgba(0,116,217,.04))
}
.sk-ai-treat-title{
  font-size:12px;font-weight:600;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

.sk-badge{
  display:inline-flex;align-items:center;font-size:9px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--on-brand);
  background:var(--brand);padding:2px 7px;border-radius:999px
}
.sk-badge-soft{background:var(--skin);color:var(--on-brand)}

.sk-grp{padding:14px 15px;margin-bottom:12px}
.sk-grp-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.sk-ic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:17px;flex-shrink:0}
.sk-grp-nm{font-size:14px;font-weight:700;color:var(--ink-hi)}
.sk-grp-sub{font-size:11px;color:var(--ink-mute);margin-top:1px}
.sk-metrics{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sk-m{background:var(--surface-2);border-radius:11px;padding:9px 11px}
.sk-m-l{font-size:10.5px;color:var(--ink-mute);font-weight:600;margin-bottom:4px;letter-spacing:.02em}
.sk-m-r{display:flex;align-items:baseline;justify-content:space-between}
.sk-m-v{font-size:18px;font-weight:800;color:var(--ink-hi)}
.sk-m-d{font-size:11px;font-weight:700}
.sk-bar{height:4px;border-radius:2px;background:var(--track);margin-top:7px;overflow:hidden}
.sk-bar>i{display:block;height:100%;border-radius:2px}
.sk-gal{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.sk-tile{aspect-ratio:3/4;border-radius:12px;position:relative;overflow:hidden;
  display:flex;align-items:flex-end;border:1px solid var(--border-soft);background:var(--surface-2)}
.sk-tile>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sk-tile>span{position:relative;z-index:1;font-size:9.5px;font-weight:700;color:#fff;
  letter-spacing:.06em;padding:6px 8px;text-shadow:0 1px 3px rgba(0,0,0,.5);
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);width:100%}
.sk-gal-tabs{display:flex;flex-direction:column;gap:10px}
.sk-gal-tabbar{
  display:flex;flex-wrap:nowrap;gap:8px;overflow-x:auto;padding-bottom:2px;
  margin-bottom:0;scrollbar-width:none;-ms-overflow-style:none
}
.sk-gal-tabbar::-webkit-scrollbar{display:none}
.sk-gal-tabbar .sk-sel{flex:0 0 auto;white-space:nowrap}
.sk-gal-stage{
  position:relative;border-radius:16px;overflow:hidden;
  /* Ratio from image via --sk-gal-ratio (unitless w/h). Shrink width if max-height binds. */
  --sk-gal-ratio:1.333;
  width:min(100%, calc(min(80vh, 720px) * var(--sk-gal-ratio)));
  aspect-ratio:var(--sk-gal-ratio);
  max-height:min(80vh, 720px);
  height:auto;margin-inline:auto;
  border:1px solid var(--border-soft);background:var(--surface-2)
}
.sk-gal-stage>img:not(.sk-gal-wm){
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;display:block
}
.sk-gal-stage-label{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  font-size:11px;font-weight:800;letter-spacing:.08em;color:#fff;
  padding:12px 14px 14px;
  text-shadow:0 1px 3px rgba(0,0,0,.45);
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);
  pointer-events:none
}
.sk-gal-wm{
  position:absolute;right:12px;bottom:12px;z-index:3;
  width:64px;height:64px;object-fit:contain;pointer-events:none;
  opacity:.72;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))
}
.sk-ba{touch-action:none;user-select:none;-webkit-user-select:none;cursor:ew-resize}
.sk-ba-layer{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;
  display:block;pointer-events:none;-webkit-user-drag:none
}
.sk-ba-before{z-index:1}
.sk-ba-shade{position:absolute;top:0;bottom:0;z-index:2;pointer-events:none}
.sk-ba-shade-l{left:0;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 70%)}
.sk-ba-shade-r{right:0;background:linear-gradient(270deg,rgba(0,0,0,.12),transparent 70%)}
.sk-ba-chip{
  position:absolute;top:10px;z-index:3;pointer-events:none;
  display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  font-size:10px;font-weight:800;letter-spacing:.04em;color:#fff;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
  padding:6px 10px;border-radius:12px;max-width:46%;
  overflow:hidden
}
.sk-ba-chip-l{left:10px}
.sk-ba-chip-r{right:10px;align-items:flex-end;text-align:right}
.sk-ba-chip-top{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%
}
.sk-ba-chip-tx{
  font-size:9px;font-weight:600;letter-spacing:.01em;opacity:.92;
  line-height:1.25;max-width:100%;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden
}
.sk-ba-handle{
  position:absolute;top:0;bottom:0;z-index:4;width:44px;margin-left:-22px;
  display:flex;align-items:center;justify-content:center;cursor:ew-resize;
  touch-action:none;background:transparent;border:0;padding:0
}
.sk-ba-line{
  position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;
  background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(0,0,0,.2)
}
.sk-ba-knob{
  position:relative;z-index:1;width:34px;height:34px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;color:#0a1220;
  background:#fff;border:2px solid rgba(0,116,217,.55);
  box-shadow:0 4px 14px rgba(0,0,0,.28)
}
.sk-ba-hint{
  margin-top:2px;font-size:11px;color:var(--ink-mute);line-height:1.35;
  text-align:center
}
.sk-prof{display:flex;gap:8px;flex-wrap:wrap}
.sk-pchip{font-size:11px;font-weight:600;padding:7px 12px;border-radius:10px;
  background:var(--surface-2);color:var(--ink)}
.sk-pchip b{color:var(--ink-hi)}
.sk-face-row{display:flex;justify-content:space-between;padding:11px 0;
  border-bottom:1px solid var(--border-soft);font-size:12.5px}
.sk-face-row:last-child{border-bottom:0}
.sk-face-row .k{color:var(--ink-mute)}
.sk-face-row .v{color:var(--ink-hi);font-weight:700}
.sk-tag{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--skin) 14%,transparent);color:var(--skin-hi)}

.sk-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.sk-sel{
  appearance:none;cursor:pointer;font-family:inherit;
  font-size:11px;font-weight:600;letter-spacing:.03em;
  padding:7px 13px;border-radius:999px;
  border:1px solid var(--border-soft);background:transparent;color:var(--ink-mute)
}
.sk-sel.on{
  background:var(--bg-card);color:var(--ink-hi);
  border-color:var(--brand);box-shadow:var(--shadow-card)
}
.sk-chart{padding:15px 16px 18px;overflow:visible}
.sk-chart>div{overflow:visible}
.sk-chart-val{font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink-hi)}
.sk-log-row{padding:13px 15px}
.sk-log-thumb{width:38px;height:38px;border-radius:10px;object-fit:cover;flex-shrink:0;
  background:var(--surface-2)}
.sk-log-d{font-size:14px;font-weight:600;color:var(--ink-hi)}
.sk-log-s{
  font-size:11px;color:var(--ink-mute);
  max-width:min(52vw,280px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.sk-log-sc{font-size:16px;font-weight:800;color:var(--ink-hi);text-align:right}
.sk-log-dl{font-size:11px;font-weight:700;text-align:right}

/* ─── Skin module: metric info bottom sheet ─── */
.sk-m-tappable{cursor:pointer;transition:background .15s ease}
.sk-m-tappable:hover{background:var(--surface-3)}
.sk-m-tappable:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
.sk-m-info{margin-left:4px;font-size:10px;color:var(--ink-faint)}
.sk-sheet-backdrop{
  /* Lives on document.body (via SkinexPortal) so fixed = visual viewport.
     Redeclare the .skin-screen traffic-light vars — the portal escapes that scope. */
  --good:#2f8a64;--mid:#c98a1e;--low:#c0392b;
  position:fixed;top:0;left:0;right:0;bottom:0;width:100%;height:100%;height:100dvh;
  z-index:210;background:rgba(26,26,26,.5);backdrop-filter:blur(2px);
  display:flex;align-items:flex-end;justify-content:center;animation:skSheetFade .18s ease}
.sk-sheet-backdrop .sk-sheet{max-width:412px}
.sk-sheet{width:100%;max-height:82%;overflow-y:auto;background:var(--bg-card);
  border-radius:20px 20px 0 0;padding:10px 18px 18px;box-shadow:0 -8px 32px rgba(0,0,0,.25);
  animation:skSheetUp .22s cubic-bezier(.32,.72,.28,1)}
.sk-sheet-grab{width:36px;height:4px;border-radius:2px;background:var(--border-strong);
  margin:2px auto 12px;opacity:.6}
.sk-sheet-title{font-size:var(--text-emphasis);font-weight:800;color:var(--ink-hi)}
.sk-sheet-score{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1}
.sk-sheet-band{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px}
.sk-sheet-close{appearance:none;border:0;background:var(--surface-2);color:var(--ink-mute);
  width:30px;height:30px;border-radius:999px;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;flex-shrink:0}
.sk-sheet-scale{margin:6px 0 14px}
.sk-sheet-scale-bar{position:relative;display:flex;height:6px;border-radius:3px;overflow:visible}
.sk-sheet-scale-bar i{display:block;height:100%}
.sk-sheet-scale-bar i:first-child{border-radius:3px 0 0 3px}
.sk-sheet-scale-bar i:last-child{border-radius:0 3px 3px 0}
.sk-sheet-marker{position:absolute;top:-13px;transform:translateX(-50%);font-size:10px;color:var(--ink-hi)}
.sk-sheet-scale-labels{font-size:9px;color:var(--ink-faint);margin-top:4px}
.sk-sheet-sec{margin-bottom:12px}
.sk-sheet-h{font-size:var(--text-meta);font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:4px}
.sk-sheet-p{font-size:var(--text-caption);line-height:1.55;color:var(--ink)}
.sk-sheet-foot{font-size:var(--text-meta);line-height:1.5;color:var(--ink-faint);
  border-top:1px solid var(--border-soft);padding-top:10px;margin-top:2px}
@keyframes skSheetFade{from{opacity:0}to{opacity:1}}
@keyframes skSheetUp{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}