/* BeautyGEO Beauty Industry AI Index dashboard (beautygeo.com/omniindex/ · beautygeo.cn/daping/).
   Design system: 08_国内平台头像与公众号素材 (deep layered dark, solid gold hairlines, bright gold corner brackets).
   No external resources: fonts are self-hosted, charts are inline SVG. */
:root{
  --ink:#0A0B0E;--ink2:#16111A;--plum:#2D1F2D;--gold:#B8976C;--gold-d:#967448;--gold-hi:#E4CB98;
  --ivory:#FAF8F5;--soft:rgba(250,248,245,.86);--muted:rgba(250,248,245,.64);--faint:rgba(250,248,245,.42);
  --line:rgba(184,151,108,.30);--line2:rgba(184,151,108,.16);--panel:rgba(20,15,22,.78);
  --ok:#7FD69A;--warn:#E9C46A;--off:#8C8590;
  --c-official:#E4CB98;--c-directory:#8FA6C8;--c-media:#B48AA8;--c-other:#6E6872;
  --head:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
:root[lang="zh-CN"]{
  --head:"BG Serif SC","Songti SC","STSong","SimSun",serif;
  --body:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink)}
body{margin:0;min-height:100vh;color:var(--ivory);font:16px/1.65 var(--body);-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(ellipse 75% 100% at 92% 0%,rgba(184,151,108,.20),rgba(184,151,108,.07) 45%,transparent 75%) top/100% 1400px no-repeat,
    radial-gradient(ellipse 70% 100% at 0% 100%,rgba(45,31,45,.80),transparent 72%) bottom/100% 1600px no-repeat,
    linear-gradient(180deg,var(--ink2) 0,var(--ink) 1600px) top/100% 100% no-repeat;
  background-color:var(--ink)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(184,151,108,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(184,151,108,.055) 1px,transparent 1px);
  background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 25%,transparent 85%);mask-image:radial-gradient(ellipse 90% 70% at 50% 0%,#000 25%,transparent 85%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px)}
a{color:var(--gold-hi);text-underline-offset:3px}
a:hover{color:var(--ivory)}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:4px}
.wrap{position:relative;z-index:1;max-width:1320px;margin:0 auto;padding:0 28px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:rgba(10,11,14,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line2)}
.top .wrap{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ivory)}
.brand svg{display:block;height:30px;width:auto}
.brand .tag{font:600 11px/1 var(--mono);letter-spacing:.18em;color:var(--gold-hi);border:1px solid var(--line);padding:6px 8px;border-radius:3px;text-transform:uppercase;white-space:nowrap}
.nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.nav a{color:var(--soft);text-decoration:none;font-size:14px;padding:8px 12px;border-radius:6px}
.nav a:hover{background:rgba(184,151,108,.10);color:var(--ivory)}
.nav a.cta{color:var(--ink);background:linear-gradient(100deg,var(--gold-hi),var(--gold));font-weight:700}
.nav a.cta:hover{filter:brightness(1.06);color:var(--ink)}

/* status strip */
.status{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;font:12.5px/1.5 var(--mono);color:var(--muted);letter-spacing:.04em;padding:14px 0 0}
.status b{color:var(--soft);font-weight:600}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px;background:var(--ok);box-shadow:0 0 0 0 rgba(127,214,154,.6);animation:pulse 2.4s infinite}
.dot.amber{background:var(--warn);box-shadow:none;animation:none}
.dot.off{background:var(--off);box-shadow:none;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(127,214,154,.55)}70%{box-shadow:0 0 0 8px rgba(127,214,154,0)}100%{box-shadow:0 0 0 0 rgba(127,214,154,0)}}

/* hero */
.hero{padding:30px 0 10px}
.eyebrow{display:flex;align-items:center;gap:.75em;color:var(--gold);letter-spacing:.28em;font:600 12.5px/1.4 var(--body);text-transform:uppercase;margin:0 0 14px}
.eyebrow::before{content:"";width:2.4em;height:1.5px;background:linear-gradient(90deg,var(--gold-hi),var(--gold-d))}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.18;margin:0;letter-spacing:-.005em}
:root[lang="zh-CN"] h1,:root[lang="zh-CN"] h2{font-weight:900;letter-spacing:.01em}
h1{font-size:clamp(34px,5.2vw,64px);text-wrap:balance}
h1 .nw{white-space:nowrap}
:root[lang="zh-CN"] h1{text-wrap:wrap}
h1 em{font-style:italic;background:linear-gradient(100deg,var(--gold-hi) 0%,#CFAF7C 45%,var(--gold-d) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
:root[lang="zh-CN"] h1 em{font-style:normal}
.lede{font-size:clamp(16px,1.6vw,19px);color:var(--soft);max-width:880px;margin:16px 0 0}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:26px 0 6px}
.kpi{position:relative;padding:14px 16px;border:1px solid var(--line);background:rgba(22,17,26,.6);border-radius:4px}
.kpi .v{font:600 clamp(26px,3vw,36px)/1.1 var(--head);color:var(--ivory);font-variant-numeric:tabular-nums}
.kpi .l{font-size:12.5px;color:var(--muted);margin-top:4px;letter-spacing:.02em}

/* panels */
.panel{position:relative;margin:22px 0;padding:24px 26px 26px;border:1px solid var(--line);background:var(--panel);border-radius:2px}
.panel::before{content:"";position:absolute;inset:-2px;pointer-events:none;background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--gold-hi),var(--gold-hi)),linear-gradient(var(--gold-hi),var(--gold-hi)),
    linear-gradient(var(--gold-hi),var(--gold-hi)),linear-gradient(var(--gold-hi),var(--gold-hi)),
    linear-gradient(var(--gold-hi),var(--gold-hi)),linear-gradient(var(--gold-hi),var(--gold-hi)),
    linear-gradient(var(--gold-hi),var(--gold-hi)),linear-gradient(var(--gold-hi),var(--gold-hi));
  background-size:16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px,16px 2px,2px 16px;
  background-position:left top,left top,right top,right top,left bottom,left bottom,right bottom,right bottom}
.ph{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 20px;margin-bottom:18px}
.ph h2{font-size:clamp(22px,2.4vw,30px)}
.ph .code{font:600 11px/1 var(--mono);letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:8px}
.meta{font:12px/1.5 var(--mono);color:var(--muted);letter-spacing:.03em}
.meta b{color:var(--soft);font-weight:600}
.note{font-size:14px;color:var(--muted);margin:14px 0 0}
.note a{color:var(--gold-hi)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sub{border:1px solid var(--line2);padding:16px 18px;background:rgba(10,11,14,.35);border-radius:2px;min-width:0}
.sub h3{font-size:17px;margin:0 0 12px;color:var(--ivory)}
:root[lang="zh-CN"] .sub h3{font-family:var(--body);font-weight:700}

/* segment tiles */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tile{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:block;padding:16px 16px 14px;border:1px solid var(--line2);background:linear-gradient(160deg,rgba(45,31,45,.55),rgba(10,11,14,.55));border-radius:3px;transition:border-color .2s,transform .2s,background .2s;min-width:0}
.tile:hover{border-color:var(--gold);transform:translateY(-2px)}
.tile[aria-pressed="true"]{border-color:var(--gold-hi);background:linear-gradient(160deg,rgba(184,151,108,.20),rgba(45,31,45,.55));box-shadow:0 0 0 1px rgba(228,203,152,.25),0 10px 30px rgba(0,0,0,.35)}
.tile .nm{font-size:14.5px;color:var(--soft);font-weight:600;line-height:1.35;min-height:2.7em}
.tile .sc{display:flex;align-items:baseline;gap:8px;margin:6px 0 2px}
.tile .num{font:600 46px/1 var(--head);color:var(--ivory);font-variant-numeric:tabular-nums}
.tile .of{font:12px var(--mono);color:var(--faint)}
.tile .lb{font:11.5px/1.3 var(--mono);letter-spacing:.08em;color:var(--gold);text-transform:uppercase}
.meters{display:grid;gap:5px;margin-top:12px}
.m{display:grid;grid-template-columns:7.6em 1fr 2.8em;white-space:nowrap;align-items:center;gap:8px;font:11.5px/1.2 var(--mono);color:var(--muted)}
:root[lang="zh-CN"] .m{grid-template-columns:4.8em 1fr 2.8em;font-family:var(--body);font-size:12px}
.m i{display:block;height:4px;background:rgba(250,248,245,.08);border-radius:2px;overflow:hidden}
.m i s{display:block;height:100%;background:linear-gradient(90deg,var(--gold-d),var(--gold-hi));text-decoration:none;transform-origin:left;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.m span{text-align:right;color:var(--soft);font-variant-numeric:tabular-nums}
.tile .ft{margin-top:10px;font:11px/1.4 var(--mono);color:var(--faint);letter-spacing:.03em}

/* rank bars */
.rank{list-style:none;margin:0;padding:0;display:grid;gap:7px;counter-reset:r}
.rank li{display:grid;grid-template-columns:1.6em minmax(0,1fr) auto;gap:8px;align-items:center;font-size:14px;counter-increment:r}
.rank li::before{content:counter(r);font:600 12px var(--mono);color:var(--gold)}
.rank .bar{position:relative;min-width:0;padding:5px 9px;border-radius:2px;overflow:hidden;background:rgba(250,248,245,.04)}
.rank .bar s{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(184,151,108,.62),rgba(184,151,108,.22));border-right:2px solid var(--gold-hi);text-decoration:none;transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.rank .bar span{position:relative;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ivory)}
.rank .bar em{font-style:normal;color:var(--gold-hi);font:600 10px var(--mono);margin-left:6px;border:1px solid var(--line);padding:1px 4px;border-radius:2px;vertical-align:1px}
.rank .n{font:12px var(--mono);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{color:var(--muted);font-size:14px}

/* stacked source mix */
.stack{display:flex;height:12px;border-radius:2px;overflow:hidden;background:rgba(250,248,245,.06);margin:6px 0 10px}
.stack i{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13px;color:var(--soft)}
.legend b{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.k-official{background:var(--c-official)}.k-directory{background:var(--c-directory)}.k-media{background:var(--c-media)}.k-other{background:var(--c-other)}

/* tables */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid var(--line2);text-align:left;vertical-align:top}
.tbl th{font:600 11.5px/1.3 var(--mono);letter-spacing:.08em;color:var(--gold);text-transform:uppercase}
.tbl td.r,.tbl th.r{text-align:right;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pill{display:inline-block;font:600 11px/1 var(--mono);padding:4px 7px;border-radius:20px;border:1px solid var(--line);color:var(--soft);white-space:nowrap}
.pill.ok{border-color:rgba(127,214,154,.5);color:var(--ok)}
.pill.amber{border-color:rgba(233,196,106,.5);color:var(--warn)}

/* prompts & raw answers */
.prompts{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.prompts li{border:1px solid var(--line2);border-radius:2px;background:rgba(10,11,14,.35)}
.prompts .q{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;font-size:14.5px;color:var(--soft)}
.prompts .q b{font:600 11px/1.9 var(--mono);color:var(--gold);flex:none}
.prompts .acts{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 12px}
.btn{all:unset;box-sizing:border-box;cursor:pointer;font:600 12.5px/1 var(--body);padding:8px 12px;border:1px solid var(--line);border-radius:3px;color:var(--gold-hi);background:rgba(184,151,108,.06)}
.btn:hover{border-color:var(--gold-hi);color:var(--ivory)}
.btn[aria-expanded="true"]{background:rgba(184,151,108,.18);color:var(--ivory)}
.ans{display:none;margin:0 14px 14px;padding:14px 16px;border-left:2px solid var(--gold);background:rgba(250,248,245,.035);font-size:14px;color:var(--soft);overflow-wrap:anywhere}
.ans.open{display:block}
.ans .hd{font:12px/1.5 var(--mono);color:var(--muted);margin-bottom:8px}
.ans p{margin:0 0 8px}
.ans .src{margin-top:10px;font-size:12.5px;color:var(--muted)}
.ans .src a{color:var(--gold-hi);margin-right:10px}
.ans mark{background:rgba(228,203,152,.18);color:var(--ivory);padding:0 2px;border-radius:2px}

/* sparkline + misc */
.spark{display:block;width:100%;height:44px}
.dm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dm .sub{padding:12px 14px}
.dm .t{font-size:13.5px;color:var(--soft);font-weight:600}
.dm .v{font:600 24px/1.1 var(--head);margin:4px 0 0;font-variant-numeric:tabular-nums}
.dm .d{font:11.5px var(--mono);color:var(--muted)}
.up{color:var(--ok)}.down{color:#E58C8C}
.pending{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border:1px dashed var(--line);border-radius:3px;background:rgba(184,151,108,.05);color:var(--soft);font-size:14.5px}
.pending .dot{margin-top:7px}
.cta-band{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center}
.cta-band p{color:var(--soft);margin:10px 0 0}
.bigbtn{display:inline-block;text-decoration:none;font-weight:700;padding:14px 22px;border-radius:4px;color:var(--ink);background:linear-gradient(100deg,var(--gold-hi),var(--gold));margin:6px 10px 0 0}
.bigbtn.ghost{background:none;color:var(--gold-hi);border:1px solid var(--gold)}
.dl{display:flex;flex-wrap:wrap;gap:10px}
.dl a{font:600 13px var(--mono);text-decoration:none;padding:9px 12px;border:1px solid var(--line);border-radius:3px}
.cite{font:12.5px/1.6 var(--mono);color:var(--soft);background:rgba(250,248,245,.04);border:1px solid var(--line2);padding:10px 12px;margin-top:12px;overflow-wrap:anywhere}
.foot{position:relative;z-index:1;border-top:1px solid var(--line2);margin-top:40px;padding:24px 0 40px;color:var(--muted);font-size:13.5px}
.foot a{color:var(--soft)}
.hide{display:none!important}

/* methodology page */
.doc{max-width:900px}
.doc h2{font-size:clamp(22px,2.4vw,28px);margin:34px 0 10px}
.doc h3{font-size:18px;margin:22px 0 8px}
.doc p,.doc li{color:var(--soft)}
.doc code{font:13px var(--mono);background:rgba(250,248,245,.06);padding:1px 5px;border-radius:3px}
.doc ol.pr li{margin:4px 0}
.formula{font:14px/1.8 var(--mono);background:rgba(250,248,245,.04);border:1px solid var(--line2);padding:12px 14px;color:var(--ivory);overflow-wrap:anywhere}

.kpis.k6{grid-template-columns:repeat(6,minmax(0,1fr))}.kpis.k5{grid-template-columns:repeat(5,minmax(0,1fr))}
.kpis.k6 .kpi:last-child,.kpis.k5 .kpi:last-child{grid-column:auto}
@media (max-width:1100px){.kpis.k6{grid-template-columns:repeat(3,minmax(0,1fr))}.kpis.k5{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.kpis{grid-template-columns:repeat(3,minmax(0,1fr))}.dm{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:1fr}}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .top .wrap{gap:8px;padding-top:10px;padding-bottom:10px}
  .brand svg{height:24px}
  .nav{margin-left:0;width:100%;gap:2px}
  .nav a{padding:7px 9px;font-size:13px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis .kpi:last-child{grid-column:1/-1}
  .panel{padding:18px 16px 20px;margin:16px 0}
  .grid2,.cta-band{grid-template-columns:1fr}
  .tile .num{font-size:38px}
  .tile{padding:14px 12px 12px}
  .kpis.k6,.kpis.k5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpis.k5 .kpi:last-child{grid-column:1/-1}
  .m,:root[lang="zh-CN"] .m{grid-template-columns:1fr auto;row-gap:3px}
  .m i{grid-column:1/-1;order:3}
  .tile .nm{min-height:0}
  .tbl{font-size:13px}
  .tbl th,.tbl td{padding:8px 6px}
}
@media (max-width:400px){.tiles{gap:8px}.dm{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{body{background:#fff;color:#000}body::before,body::after,.top,.nav{display:none}.panel{border-color:#999;background:#fff}}