/* Fbclaude shared styles — landing + console + admin */
:root{
  --sans:"Urbanist","PingFang SC","HarmonyOS Sans SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  --serif:"Instrument Serif","Songti SC","Noto Serif SC","STSong",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --top-h:72px; --pad:clamp(18px,3.4vw,44px); --maxw:1240px; --radius:26px;

  --bg-a:#C9C7C4; --bg-b:#ECEBE8; --horizon:rgba(255,255,255,.75); --orb:.3;
  --ink:#1D1B19; --ink-2:rgba(29,27,25,.68); --ink-3:rgba(29,27,25,.46); --ink-4:rgba(29,27,25,.08);
  --glass:rgba(248,248,246,.5); --glass-strong:rgba(251,250,248,.82); --glass-solid:#EFEEEA;
  --glass-line:rgba(255,255,255,.72); --glass-hi:rgba(255,255,255,.95);
  --shadow-soft:0 26px 60px -32px rgba(30,24,18,.4);
  --pill:rgba(255,255,255,.42); --pill-line:rgba(255,255,255,.68); --pill-hover:rgba(255,255,255,.68);

  --accent:#D96B4A; --accent-deep:#B84A2D; --accent-soft:rgba(217,107,74,.14);
  --lilac:#8E7BF0; --ring:#C96A4C; --ok:#3E9E6E; --danger:#B4372B;
  --term-bg:#17151A; --term-ink:#F2EFE9;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg-a:#131114; --bg-b:#1F1D21; --horizon:rgba(255,255,255,.05); --orb:.12;
    --ink:#EFEDEA; --ink-2:rgba(239,237,234,.7); --ink-3:rgba(239,237,234,.44); --ink-4:rgba(239,237,234,.09);
    --glass:rgba(46,43,48,.5); --glass-strong:rgba(40,38,43,.86); --glass-solid:#2B292E;
    --glass-line:rgba(255,255,255,.08); --glass-hi:rgba(255,255,255,.07);
    --shadow-soft:0 26px 60px -26px rgba(0,0,0,.7);
    --pill:rgba(255,255,255,.06); --pill-line:rgba(255,255,255,.1); --pill-hover:rgba(255,255,255,.13);
    --accent:#E8836A; --accent-deep:#E8836A; --accent-soft:rgba(232,131,106,.14);
    --lilac:#A99BFF; --ring:#E8836A; --ok:#5CC793; --danger:#FF8A80;
    --term-bg:#100E12;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg-a:#131114; --bg-b:#1F1D21; --horizon:rgba(255,255,255,.05); --orb:.12;
  --ink:#EFEDEA; --ink-2:rgba(239,237,234,.7); --ink-3:rgba(239,237,234,.44); --ink-4:rgba(239,237,234,.09);
  --glass:rgba(46,43,48,.5); --glass-strong:rgba(40,38,43,.86); --glass-solid:#2B292E;
  --glass-line:rgba(255,255,255,.08); --glass-hi:rgba(255,255,255,.07);
  --shadow-soft:0 26px 60px -26px rgba(0,0,0,.7);
  --pill:rgba(255,255,255,.06); --pill-line:rgba(255,255,255,.1); --pill-hover:rgba(255,255,255,.13);
  --accent:#E8836A; --accent-deep:#E8836A; --accent-soft:rgba(232,131,106,.14);
  --lilac:#A99BFF; --ring:#E8836A; --ok:#5CC793; --danger:#FF8A80;
  --term-bg:#100E12;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100%;background:var(--bg-b);color:var(--ink);font:400 15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
h1,h2,h3{margin:0;font-weight:inherit}
p{margin:0}
input,select,textarea{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
[hidden]{display:none!important}

/* backdrop */
.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,var(--bg-a) 0%,var(--bg-b) 46%,var(--bg-b) 72%,var(--bg-a) 100%)}
.backdrop::after{content:"";position:absolute;left:-10%;right:-10%;bottom:-12vh;height:46vh;background:radial-gradient(56% 62% at 50% 100%,var(--horizon),transparent 72%)}
.backdrop i{position:absolute;border-radius:50%;filter:blur(110px);opacity:var(--orb)}
.backdrop .o1{width:36vw;height:36vw;left:-11vw;top:16vh;background:#F2C9B4}
.backdrop .o2{width:32vw;height:32vw;right:-9vw;top:-8vh;background:#CFC6EE}
.backdrop .o3{width:26vw;height:26vw;left:40vw;bottom:-16vh;background:#F0DBBE}

/* glass */
.glass{background:var(--glass);-webkit-backdrop-filter:blur(26px) saturate(160%);backdrop-filter:blur(26px) saturate(160%);border:1px solid var(--glass-line);box-shadow:inset 0 1px 0 var(--glass-hi),var(--shadow-soft)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--glass-solid)!important}}

/* notice */
.notice{position:relative;z-index:30;background:linear-gradient(90deg,var(--accent-deep),var(--accent) 55%,var(--accent-deep));color:#FFF3EC;text-align:center;font:500 12.5px/1 var(--sans);letter-spacing:.02em;padding:9px var(--pad)}
.notice b{font-weight:700}
@media (max-width:640px){.notice{font-size:11.5px;line-height:1.5}}

/* nav */
.nav{position:sticky;top:0;z-index:20;-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);background:color-mix(in srgb,var(--bg-b) 62%,transparent);border-bottom:1px solid var(--ink-4)}
.nav-in{display:flex;align-items:center;gap:20px;height:var(--top-h);max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:linear-gradient(150deg,var(--accent),var(--accent-deep));color:#FFF4EE;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 22px -12px rgba(184,74,45,.6)}
.brand-name{font:700 16.5px/1 var(--sans);letter-spacing:.01em;white-space:nowrap}
.brand-name small{display:block;margin-top:4px;font:400 11px/1 var(--sans);color:var(--ink-3);letter-spacing:.04em}
.nav-links{display:flex;gap:4px;margin-left:14px}
.nav-links a{padding:9px 14px;border-radius:999px;font:500 13.5px/1 var(--sans);color:var(--ink-2);transition:background .18s,color .18s}
.nav-links a:hover{background:var(--pill);color:var(--ink)}
.nav-acts{margin-left:auto;display:flex;align-items:center;gap:10px}
@media (max-width:860px){.nav-links{display:none}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 20px;border-radius:999px;border:1px solid var(--pill-line);background:var(--pill);font:600 13.5px/1 var(--sans);white-space:nowrap;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);transition:background .18s,transform .15s,color .18s}
.btn:hover{background:var(--pill-hover)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn-solid{background:var(--accent);border-color:transparent;color:#FFF4EE;box-shadow:0 12px 26px -14px rgba(184,74,45,.65)}
.btn-solid:hover{background:var(--accent-deep)}
.btn-danger{color:var(--danger)}
.icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;border:1px solid var(--pill-line);background:var(--pill);transition:background .18s}
.icon-btn:hover{background:var(--pill-hover)}
.icon-btn .moon{display:none}
[data-theme="dark"] .icon-btn .sun{display:none}
[data-theme="dark"] .icon-btn .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .icon-btn .sun{display:none}:root:not([data-theme="light"]) .icon-btn .moon{display:block}}
.btn-sm{height:34px;padding:0 14px;font-size:12.5px}
.btn-flow{position:relative;display:inline-flex;height:52px;padding:1.5px;border:0;border-radius:9999px;overflow:hidden;background:transparent;isolation:isolate}
.btn-flow::before{content:"";position:absolute;inset:-1000%;background:conic-gradient(from 90deg at 50% 50%,#F5C4AD 0%,var(--accent) 28%,var(--accent-deep) 55%,#F5C4AD 100%);animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn-flow-inner{position:relative;display:inline-flex;align-items:center;gap:9px;height:100%;padding:0 26px;border-radius:9999px;background:#1B1713;color:#FFF3EC;font:600 14.5px/1 var(--sans);transition:background .25s}
.btn-flow:hover .btn-flow-inner{background:#2A211B}
.btn-flow:disabled{opacity:.6;pointer-events:none}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 11px;border-radius:999px;font:600 11.5px/1 var(--sans);white-space:nowrap}
.badge-acc{background:var(--accent-soft);color:var(--accent)}
.badge-ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.badge-warn{background:rgba(214,158,46,.16);color:#A87416}
.badge-err{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.badge-mut{background:var(--ink-4);color:var(--ink-3)}

/* forms */
.field{display:grid;gap:7px;margin-bottom:14px}
.field label{font:600 12.5px/1.2 var(--sans);color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;height:46px;padding:0 16px;border-radius:14px;border:1px solid var(--pill-line);background:var(--pill);color:var(--ink);font:500 14px/1 var(--sans);outline:none;transition:border-color .18s,box-shadow .18s}
.field textarea{height:auto;padding:12px 16px;line-height:1.5;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field input::placeholder{color:var(--ink-3);font-weight:400}
.field .hint{font-size:12px;color:var(--ink-3)}
.input-mono{font-family:var(--mono)!important;letter-spacing:.06em}
.err{display:none;font-size:12.5px;color:var(--danger);line-height:1.5}
.err.on{display:block}

/* terminal / code */
.term{border-radius:22px;background:var(--term-bg);border:1px solid rgba(255,255,255,.09);box-shadow:0 50px 90px -50px rgba(10,5,0,.75),inset 0 1px 0 rgba(255,255,255,.07);text-align:left;overflow:hidden}
.term-head{display:flex;align-items:center;gap:8px;height:46px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.term-head i{width:11px;height:11px;border-radius:50%}
.term-head i:nth-child(1){background:#F2604F}.term-head i:nth-child(2){background:#F5B74E}.term-head i:nth-child(3){background:#4FC07A}
.term-title{margin-left:8px;font:500 12px/1 var(--mono);color:rgba(255,255,255,.4)}
.term-body{padding:20px 22px 24px;font:400 13.5px/1.9 var(--mono);color:var(--term-ink);overflow-x:auto;white-space:pre}
.term-body .p{color:rgba(255,255,255,.42);user-select:none}
.term-body .k{color:#F0A88F}
.term-body .v{color:#B7E4C7}
.term-body .c{color:rgba(255,255,255,.34)}
.cursor{display:inline-block;width:8px;height:15px;margin-left:3px;vertical-align:-2px;background:rgba(255,255,255,.7);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.code-tabs{display:flex;gap:4px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07)}
.code-tab{height:34px;padding:0 15px;border-radius:10px;border:0;background:transparent;color:rgba(255,255,255,.5);font:500 12.5px/1 var(--sans);transition:background .18s,color .18s}
.code-tab:hover{color:rgba(255,255,255,.85)}
.code-tab[aria-selected="true"]{background:rgba(255,255,255,.1);color:#fff}
.code-pane{display:none;padding:20px 22px 24px;font:400 13px/1.85 var(--mono);color:var(--term-ink);overflow-x:auto;white-space:pre;flex:1}
.code-pane.on{display:block}
.code-pane .p{color:rgba(255,255,255,.42)}
.code-pane .k{color:#F0A88F}
.code-pane .v{color:#B7E4C7}
.code-pane .c{color:rgba(255,255,255,.34)}

/* toast */
.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);z-index:60;display:flex;align-items:center;gap:9px;padding:12px 20px;border-radius:14px;background:var(--glass-strong);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow-soft);font:500 13.5px/1 var(--sans);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err-t{color:var(--danger)}

/* footer */
footer{border-top:1px solid var(--ink-4);padding:44px 0 calc(44px + env(safe-area-inset-bottom,0px))}
.foot{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:32px}
.foot-brand p{margin-top:14px;font-size:12.5px;color:var(--ink-3);line-height:1.7;max-width:26em}
.foot h4{margin:0 0 14px;font:600 12.5px/1 var(--sans);color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:13.5px}
.foot ul a{color:var(--ink-2);transition:color .15s}
.foot ul a:hover{color:var(--ink)}
.foot ul span{color:var(--ink-2)}
.foot-bar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:40px;padding-top:22px;border-top:1px solid var(--ink-4);font-size:12.5px;color:var(--ink-3)}
@media (max-width:820px){.foot{grid-template-columns:1fr 1fr}}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.06s}.rv-d2{transition-delay:.12s}.rv-d3{transition-delay:.18s}.rv-d4{transition-delay:.24s}.rv-d5{transition-delay:.3s}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
}
