/* ============================================================
   PromptForge — NEW PAGES shared stylesheet (design-concept build)
   Reuses the SAME design tokens as the main app (css/styles.css) so the
   new pages feel like one product. No new dependencies, no external assets.
   Pages: dashboard, analytics, shares,
          settings, api-keys, welcome, download.
   ============================================================ */

:root{
  --bg:#0A0A0B;
  --white:#F4F4F5;
  --text:rgba(244,244,245,.88);
  --text-56:rgba(244,244,245,.70);
  --text-38:rgba(244,244,245,.62);
  --text-26:rgba(244,244,245,.56);
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --glass:rgba(255,255,255,.04);
  --glass-2:rgba(255,255,255,.06);
  --good:#7ee2a0;
  --radius:24px;
  --radius-sm:14px;
  --font-sys:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
}

*{margin:0; padding:0; box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sys); background:var(--bg); color:var(--text);
  font-weight:400; line-height:1.6; letter-spacing:.002em;
  text-shadow:0 0 12px rgba(255,255,255,.05), 0 0 1px rgba(255,255,255,.12);
  text-shadow:var(--glow-soft);
  -webkit-font-smoothing:antialiased; min-height:100vh;
  background-image:
    radial-gradient(1200px 700px at 70% -10%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(255,255,255,.04), transparent 60%);
  background-attachment:fixed;
}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer}
::selection{background:rgba(244,244,245,.18)}

/* ---------- top nav (matches main app) ---------- */
.nav{position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(10,10,11,.6); border-bottom:1px solid var(--line-soft)}
.nav-inner{max-width:1200px; margin:0 auto; padding:14px var(--s3); display:flex; align-items:center; justify-content:space-between; gap:var(--s3)}
.brand{font-size:1.1875rem; font-weight:560; letter-spacing:-.02em}
.brand .brand-thin{font-weight:270; color:var(--text-56)}
.nav-links{display:flex; align-items:center; gap:var(--s3); font-size:0.875rem; color:var(--text-56)}
.nav-links a:hover{color:var(--text)}
.nav-cta{border:1px solid var(--line); border-radius:999px; padding:8px 16px; color:var(--text); background:var(--glass); font-size:0.875rem}
.nav-cta:hover{background:var(--glass-2)}
@media(max-width:760px){.nav-links a:not(.nav-cta){display:none}}

/* ---------- page shell ---------- */
.wrap{max-width:1200px; margin:0 auto; padding:var(--s4) var(--s3) var(--s6)}
.page-head{margin:var(--s3) 0 var(--s4)}
.page-head .eyebrow{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text-38)}
.page-head h1{font-size:clamp(1.75rem,4vw,2.75rem); font-weight:560; letter-spacing:-.03em; line-height:1.05; margin-top:var(--s2)}
.page-head p{color:var(--text-38); margin-top:var(--s1); font-size:0.9375rem; font-weight:400}

/* ---------- layout: sidebar + main (dashboard / library / settings / api) ---------- */
.shell{display:grid; grid-template-columns:230px 1fr; gap:var(--s4); align-items:start}
@media(max-width:900px){.shell{grid-template-columns:1fr}}
.side{border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); padding:var(--s3); position:sticky; top:76px}
@media(max-width:900px){.side{position:static}}
.side-label{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-38); margin-bottom:var(--s2)}
.side-item{display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:12px; color:var(--text-56); font-size:0.875rem; font-weight:400; border:1px solid transparent}
.side-item:hover{background:var(--glass-2); color:var(--text)}
.side-item.active{background:var(--glass-2); color:var(--text); border-color:var(--line)}
.side-item svg{opacity:.7; flex:none}
.side-sep{height:1px; background:var(--line-soft); margin:var(--s2) 0}

/* ---------- generic cards / panels ---------- */
.card{border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); padding:var(--s4); backdrop-filter:blur(8px)}
.card + .card{margin-top:var(--s3)}
.card-title{font-size:1.0625rem; font-weight:520; letter-spacing:-.01em; margin-bottom:var(--s2)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3)}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3)}
@media(max-width:1000px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:12px 22px; font-size:0.875rem; font-weight:480; border:1px solid var(--line); transition:all .2s; background:transparent; color:var(--text)}
.btn-primary{background:var(--white); color:#0A0A0B; border-color:var(--white); font-weight:560}
.btn-primary:hover{opacity:.9}
.btn-ghost{background:transparent; color:var(--text-56)}
.btn-ghost:hover{color:var(--text); border-color:var(--text-38)}
.btn-block{width:100%}
.btn-sm{padding:8px 16px; font-size:0.875rem}

/* ---------- stat / metric tiles ---------- */
.stat{border:1px solid var(--line); border-radius:var(--radius-sm); background:rgba(0,0,0,.25); padding:var(--s3)}
.stat .k{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-38); display:flex; align-items:center; justify-content:space-between}
.stat .v{font-size:2.125rem; font-weight:560; letter-spacing:-.02em; margin-top:var(--s2); line-height:1}
.stat .d{font-size:0.875rem; color:var(--text-26); margin-top:6px; font-weight:400}

/* ---------- tables ---------- */
.table{width:100%; border-collapse:collapse; font-size:0.875rem}
.table th{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-38); text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); font-weight:600}
.table td{padding:13px 14px; border-bottom:1px solid var(--line-soft); color:var(--text-56); vertical-align:middle}
.table tr:hover td{background:rgba(255,255,255,.02)}
.table .num{text-align:right}

/* ---------- chips / pills / tags ---------- */
.chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.04em; color:var(--text-56); border:1px solid var(--line); border-radius:999px; padding:5px 12px; background:var(--glass)}
.tag{display:inline-block; font-size:0.875rem; color:var(--text-56); border:1px solid var(--line); border-radius:999px; padding:4px 11px; background:rgba(0,0,0,.2); margin:2px 4px 2px 0}

/* ---------- forms ---------- */
.field{margin-bottom:var(--s3)}
.field-label{display:block; font-size:0.875rem; color:var(--text-56); margin-bottom:8px; font-weight:420}
.input, textarea.input, select.input{width:100%; background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:12px; padding:12px 14px; color:var(--text); font-size:0.875rem; font-family:inherit; font-weight:400}
.input:focus{outline:none; border-color:var(--text-38)}
textarea.input{resize:vertical; min-height:110px; line-height:1.55}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:var(--s2)}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
.toolbar{display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:12px; padding:8px 10px; background:rgba(0,0,0,.25); margin-bottom:8px; flex-wrap:wrap}
.tool-btn{width:32px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; color:var(--text-56); background:transparent; border:none; font-size:0.875rem}
.tool-btn:hover{background:var(--glass-2); color:var(--text)}

/* ---------- avatar / profile ---------- */
.avatar{width:96px; height:96px; border-radius:50%; background:var(--glass-2); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; overflow:hidden; flex:none}
.avatar svg{opacity:.5}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.avatar img[hidden]{display:none}
.avatar-sm{width:36px; height:36px; border-radius:50%; background:var(--glass-2); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; flex:none}

/* ---------- list rows ---------- */
.row-item{display:flex; align-items:center; justify-content:space-between; gap:var(--s2); padding:14px 0; border-bottom:1px solid var(--line-soft)}
.row-item:last-child{border-bottom:none}
.row-item .t{font-size:0.875rem; color:var(--text); font-weight:420}
.row-item .s{font-size:0.875rem; color:var(--text-38); font-weight:400; margin-top:2px}
.row-item .meta{font-family:var(--font-mono); font-size:0.875rem; color:var(--text-38); white-space:nowrap}

/* ---------- post card (shares) ---------- */
.post{border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); padding:var(--s3) var(--s4); margin-bottom:var(--s3)}
.post-head{display:flex; align-items:center; gap:12px; margin-bottom:var(--s2)}
.post-user{font-size:0.875rem; font-weight:480}
.post-time{font-size:0.875rem; color:var(--text-38); font-weight:400}
.post-body{color:var(--text-56); font-size:0.875rem; font-weight:400; margin-bottom:var(--s2)}
.post-actions{display:flex; align-items:center; gap:var(--s3); color:var(--text-38); font-size:0.875rem; border-top:1px solid var(--line-soft); padding-top:var(--s2); margin-top:var(--s2)}
.post-actions .spacer{flex:1}
.link{color:var(--text); font-size:0.875rem; border-bottom:1px solid var(--text-38)}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:var(--s3); border-bottom:1px solid var(--line); margin-bottom:var(--s3); flex-wrap:wrap}
.tab{padding:10px 4px; color:var(--text-38); font-size:0.875rem; background:none; border:none; border-bottom:2px solid transparent; font-weight:420}
.tab.active{color:var(--text); border-bottom-color:var(--text)}

/* ---------- search ---------- */
.search{display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:999px; padding:9px 16px; color:var(--text-38); flex:1; max-width:340px}
.search input{background:none; border:none; outline:none; color:var(--text); font-size:0.875rem; width:100%; font-family:inherit}

/* ---------- filter chips (sidebar pill options) ---------- */
.pill{display:inline-block; border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:0.875rem; color:var(--text-56); background:var(--glass); margin:3px 4px 3px 0}
.pill:hover{color:var(--text); border-color:var(--text-38)}
.pill.on{background:var(--white); color:#0A0A0B; border-color:var(--white); font-weight:520}
.check{display:flex; align-items:center; gap:10px; padding:8px 0; color:var(--text-56); font-size:0.875rem; cursor:pointer}
.check input{accent-color:var(--text)}
.filter-group{margin-bottom:var(--s3)}
.filter-group .fg-label{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-38); display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; cursor:pointer}

/* ---------- sliders / gauge / bars (visual, non-functional placeholder) ---------- */
.slider{height:4px; border-radius:99px; background:rgba(255,255,255,.12); position:relative; margin:10px 0 4px}
.slider .knob{position:absolute; top:50%; width:14px; height:14px; border-radius:50%; background:var(--white); transform:translate(-50%,-50%)}
.bar{height:22px; border-radius:6px; background:linear-gradient(90deg, rgba(244,244,245,.35), rgba(244,244,245,.18)); display:flex; align-items:center; justify-content:flex-end; padding-right:8px; font-family:var(--font-mono); font-size:0.875rem; color:var(--text); margin:6px 0}
.gauge{width:120px; height:60px; border-radius:120px 120px 0 0; background:conic-gradient(from 270deg, var(--text) 0 65%, rgba(255,255,255,.1) 65% 100%); margin:0 auto; position:relative}
.gauge::after{content:""; position:absolute; inset:14px 14px 0; background:var(--bg); border-radius:100px 100px 0 0}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line-soft); margin-top:var(--s6); padding:var(--s4) var(--s3); color:var(--text-38); font-size:0.875rem; text-align:center; font-weight:400}

/* ---------- account dropdown menu (shared, nav.js) ---------- */
.account-chip{position:relative; cursor:pointer}
.account-menu{position:absolute; top:calc(100% + 10px); right:0; min-width:190px; background:#0E0E10; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:0 18px 50px rgba(0,0,0,.5); padding:6px; z-index:300}
.account-menu-item{display:block; padding:9px 14px; font-size:0.875rem; color:var(--text-56); border-radius:9px; font-weight:400; white-space:nowrap}
.account-menu-item:hover{background:var(--glass-2); color:var(--text)}
.account-menu-sep{height:1px; background:var(--line-soft); margin:6px 8px}
.nav-links a.active{color:var(--text)}

/* ---------- API page (docs + live console + key management) ---------- */
.api-block{margin-bottom:var(--s3)}
.api-block-head{margin-bottom:var(--s3)}
.api-block-head .eyebrow{margin-bottom:var(--s2)}
.api-h2{font-size:1.375rem; font-weight:520; letter-spacing:-.02em}
.api-sub{color:var(--text-38); font-size:0.875rem; margin-top:8px; max-width:72ch}
.api-hint{font-size:0.875rem; color:var(--text-26)}

/* base-url / auth / content-type rows */
.api-kv{display:flex; flex-direction:column; gap:10px; margin:var(--s3) 0}
.api-kv-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid var(--line-soft); background:rgba(0,0,0,.25); border-radius:12px; padding:11px 14px}
.api-k{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-38); min-width:84px}
.api-code-inline{font-family:var(--font-mono); font-size:0.875rem; color:var(--text); background:var(--glass-2); border:1px solid var(--line); border-radius:8px; padding:5px 9px; word-break:break-all}
.api-kv-link{margin-left:auto}

/* language tabs + response */
.api-lang-pane{display:none}
.api-lang-pane.active{display:block; animation:fadeUp .3s ease}
.api-lang-pane .code{margin:0}
.api-resp-head{display:flex; align-items:center; justify-content:space-between; margin:var(--s3) 0 10px; font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-38)}
.api-resp{max-height:340px; overflow:auto; margin:0}

/* live console */
.api-console-bar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.api-console-endpoint{display:inline-flex; align-items:center; gap:10px; padding:6px 10px; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.25)}
.api-select{max-width:340px}
.api-status{font-family:var(--font-mono); font-size:0.875rem; color:var(--text-38)}
.api-status.ok{color:var(--good)}
.api-status.err{color:#ff9a9a}
.api-body{min-height:120px; font-family:var(--font-mono); font-size:0.875rem; margin-bottom:0}

/* public endpoint row + table sub-headings */
.api-endpoint{display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px solid var(--line-soft); background:rgba(0,0,0,.25); border-radius:12px; padding:12px 14px; margin-bottom:var(--s3)}
.api-endpoint-note{font-family:var(--font-mono); font-size:0.875rem; color:var(--text-38); margin-left:auto}
.api-subhead{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-38); margin:var(--s3) 0 10px}

/* endpoint / error tables */
.api-table-wrap{overflow-x:auto}
.api-table td{font-size:0.875rem}
.api-table .api-group td{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text-38); background:rgba(255,255,255,.02); padding:14px 14px 9px}
.api-table .api-group:hover td{background:rgba(255,255,255,.02)}
.api-method{display:inline-block; font-family:var(--font-mono); font-size:0.875rem; font-weight:600; letter-spacing:.06em; border-radius:6px; padding:3px 8px; border:1px solid var(--line); white-space:nowrap}
.api-method.get{background:rgba(126,226,160,.12); color:var(--good); border-color:rgba(126,226,160,.25)}
.api-method.post{background:rgba(196,199,228,.14); color:#c4c7e4; border-color:rgba(196,199,228,.3)}
.api-path{font-family:var(--font-mono); font-size:0.875rem; color:var(--text)}

/* placeholders — PLACEHOLDER(api-info) */
.api-placeholder{border-style:dashed}
.api-ph{display:flex; align-items:flex-start; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-soft)}
.api-ph:last-child{border-bottom:none}
.api-ph-ico{flex:none; width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--glass); display:flex; align-items:center; justify-content:center; color:var(--text-38)}
.api-ph b{display:block; font-size:0.875rem; font-weight:520; color:var(--text)}
.api-ph span{display:block; font-size:0.875rem; color:var(--text-38); margin-top:3px}
.api-ph em{color:var(--text-26); font-style:normal}
.api-soon{font-family:var(--font-mono); font-size:0.875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text-26); border:1px solid var(--line-soft); border-radius:999px; padding:3px 9px; margin-left:auto; white-space:nowrap}

/* api-keys page additions */
.api-key-actions{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3); flex-wrap:wrap}
.api-key-reveal{border:1px solid var(--line); border-radius:var(--radius-sm); background:rgba(208,208,208,.06); padding:var(--s3); margin-bottom:var(--s3)}
.api-key-reveal-title{font-size:0.875rem; color:var(--text-56); margin-bottom:10px}
.api-key-reveal-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.api-key-reveal-row code{font-family:var(--font-mono); font-size:0.875rem; color:var(--text); background:rgba(0,0,0,.4); border:1px solid var(--line); border-radius:10px; padding:10px 12px; word-break:break-all}

@media(max-width:640px){
  .api-kv-row{align-items:flex-start}
  .api-kv-link{margin-left:0}
  .api-soon{margin-left:0}
}

/* ---------- Studio: hidden blocks (by request) ----------
   "Planning · elicited assumptions" (#elicitedBox), "Evaluate on" (#evalRow) and the
   applied-technique chips under the prompt (#studioProv). The elements and their
   renderers in engine.js are untouched — the data is still produced and still written
   into the DOM, they just never show. (!important because the renderers may set
   display inline.) */
#elicitedBox{display:none !important}
#evalRow{display:none !important}
#studioProv{display:none !important}

/* ---------- Settings: profile + password ---------- */
.input-static{opacity:.8; cursor:text; user-select:text; -webkit-user-select:text; background:rgba(255,255,255,.04)}
.set-h2{font-size:1.125rem; font-weight:520; letter-spacing:-.01em; color:var(--text); margin:0 0 6px}
.set-sub{font-size:0.875rem; color:var(--text-56); margin:0 0 var(--s3); font-weight:400}
.set-msg{font-size:0.875rem; color:var(--good); margin-top:var(--s2); font-weight:400}
.set-msg.err{color:#e2a07e}
/* profile save confirmation stays out of the UI — errors still show */
#setMsg:not(.err){display:none !important}
.pw-hint{font-size:0.875rem; color:var(--text-38); margin-top:8px; font-weight:400}
.pw-hint.err{color:#e2a07e}
/* password card: same inner layout, a smaller box than the profile card above it */
.pw-card{max-width:460px; margin:var(--s2) auto 0; padding:var(--s3)}
.pw-card .set-h2{margin-bottom:3px}
.pw-card .set-sub{margin-bottom:var(--s2)}
.pw-card .field-label{margin-bottom:5px}
.pw-card .input{padding:8px 11px}
.pw-card .pw-hint{margin-top:5px}

/* ---- change-password card: send-code row, live strength + rules ---- */
.pw-field{margin-bottom:var(--s2)}
.pw-send-row{display:flex; align-items:center; gap:8px; margin-bottom:var(--s2); min-height:24px}
/* small BOX, normal label: no min-height inherited from .btn, tight line-box */
.pw-ghost{background:none; border:1px solid var(--line); color:var(--text-56); border-radius:7px;
  font-size:0.8125rem; font-weight:420; line-height:1; min-height:0; height:auto; padding:4px 9px;
  cursor:pointer; transition:.18s; white-space:nowrap}
.pw-ghost:hover{color:var(--text); border-color:color-mix(in srgb, var(--text) 28%, transparent)}
.pw-ghost:disabled{opacity:.45; cursor:not-allowed}
.pw-sent{display:flex; align-items:center; gap:7px; font-size:0.8125rem; color:var(--text-56)}
.pw-tick{width:12px; height:12px; flex:none; border-radius:50%; position:relative;
  background:color-mix(in srgb, var(--good) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--good) 45%, transparent)}
.pw-tick::after{content:""; position:absolute; left:3px; top:3.5px; width:5px; height:2.5px;
  border-left:1.3px solid var(--good); border-bottom:1.3px solid var(--good); transform:rotate(-45deg)}
.pw-code{font-family:inherit; font-size:0.875rem; letter-spacing:.22em; max-width:170px}
.pw-strength{display:flex; gap:5px; margin:8px 0 6px}
.pw-strength span{height:3px; border-radius:2px; background:var(--line); flex:1; transition:.25s}
.pw-strength.s1 span:nth-child(-n+1){background:var(--line)}
.pw-strength.s2 span:nth-child(-n+2){background:var(--warn)}
.pw-strength.s3 span:nth-child(-n+3){background:var(--warn)}
.pw-strength.s4 span{background:color-mix(in srgb, var(--good) 78%, transparent)}
.pw-rules{list-style:none; margin:0; padding:0; display:grid; gap:3px}
.pw-rules li{font-size:0.75rem; color:var(--text-38); padding-left:15px; position:relative; transition:.2s; line-height:1.45}
.pw-rules li::before{content:""; position:absolute; left:0; top:.42em; width:8px; height:8px; border-radius:50%;
  border:1px solid var(--line); transition:.2s}
.pw-rules li.ok{color:var(--text-56)}
.pw-rules li.ok::before{background:color-mix(in srgb, var(--good) 30%, transparent);
  border-color:color-mix(in srgb, var(--good) 55%, transparent)}
#pwSave:disabled{opacity:.4; cursor:not-allowed}
.pw-prompt{max-width:460px; margin:var(--s3) auto 0; text-align:center}

/* email change: the email field and its "Change" link share one box; steps indent below */
.em-field{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.3); padding-right:14px}
.em-field:focus-within{border-color:var(--text-38)}
.em-field .input{flex:1; min-width:0; border:none; background:transparent; border-radius:0; padding:12px 14px}
.em-field .input:focus, .em-field .input:focus-visible{outline:none; border:none; box-shadow:none}
/* kill Chrome's autofill paint so it can't draw a second box inside the field */
.em-field .input:-webkit-autofill, .em-field .input:-webkit-autofill:hover, .em-field .input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px rgba(0,0,0,.3) inset;
  -webkit-text-fill-color:var(--text-56);
  caret-color:var(--text-56);
  transition:background-color 9999s ease-out 0s;
}
.em-field #emPrompt{flex:none}
.em-field #emPromptLink{border-bottom:none}
.em-inline{margin-top:12px; padding-left:16px; border-left:1px solid var(--line)}
.em-step + .em-step{margin-top:16px}
.em-step-label{display:block; font-family:var(--font-sans); font-size:0.875rem; letter-spacing:0; text-transform:none; color:var(--text-56); margin-bottom:8px; font-weight:420}
.em-row{display:flex; gap:8px; align-items:center}
.em-row .input{padding:8px 11px}
.em-btn{flex:none; padding:4px 9px; min-height:0; line-height:1; border-radius:7px}
.em-code{letter-spacing:.3em; font-family:var(--font-mono)}
.em-note{display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:0.875rem; color:var(--text-38); margin-top:10px}
.em-note[hidden]{display:none}
.em-dev{margin-top:10px; font-family:var(--font-mono); font-size:0.75rem; letter-spacing:.06em; color:var(--text-26)}
.em-inline .set-msg{margin-top:10px}
@media(max-width:560px){.em-row{flex-direction:column; align-items:stretch}.em-btn{width:100%}}

/* ---------- Shares (grid of shared prompts — design C) ---------- */
.shv-bar{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin-bottom:var(--s3)}
.shv-bar .tabs{flex:1; margin:0; border-bottom:none}
.shv-tag{display:inline-flex; align-items:center; font-size:0.8125rem; color:var(--text-56); border:1px solid var(--line-soft); border-radius:999px; padding:3px 10px; background:rgba(0,0,0,.2); white-space:nowrap}
.shv-ava{width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--glass-2); display:inline-flex; align-items:center; justify-content:center; flex:none; color:var(--text-38); overflow:hidden}
.shv-ava svg{width:16px; height:16px}
.shv-meta{font-family:var(--font-sans); font-size:0.8125rem; color:var(--text-38)}
.shv-like{display:inline-flex; align-items:center; gap:5px; background:none; border:0; padding:0; font-family:inherit; font-size:0.8125rem; color:var(--text-38); cursor:pointer; transition:color .18s}
.shv-like:hover{color:var(--text)}
.shv-like.on{color:var(--text)}
.shv-like svg{width:13px; height:13px}
.shv-acts{display:inline-flex; align-items:center; gap:2px}
.shv-ibtn{display:inline-grid; place-items:center; width:24px; height:24px; padding:0; background:none; border:0; border-radius:7px; color:var(--text-38); cursor:pointer; transition:color .18s, background .18s}
.shv-ibtn:hover{color:var(--text); background:rgba(255,255,255,.06)}
.shv-ibtn.copied{color:var(--good)}
.shv-ibtn.busy{opacity:.45; pointer-events:none}
.shv-card-foot .shv-out-btn[data-upload-out]{margin-right:2px; color:var(--text-38)}
.shv-del:hover{color:#ff8f87; background:rgba(255,123,114,.08)}
.shv-del-wrap{position:relative; display:inline-flex}
.shv-del-pop{position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); z-index:60; display:flex; align-items:center; gap:8px; white-space:nowrap;
  padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#0E0E10; box-shadow:0 18px 50px rgba(0,0,0,.5)}
.shv-del-pop[hidden]{display:none}
.shv-del-pop span{font-size:0.8125rem; color:var(--text-56)}
.shv-del-yes,.shv-del-no{font-family:inherit; font-size:0.75rem; padding:4px 9px; border-radius:7px; border:1px solid var(--line); background:none; color:var(--text-56); cursor:pointer; transition:.18s}
.shv-del-yes{color:#ff8f87; border-color:rgba(255,123,114,.4)}
.shv-del-yes:hover{background:rgba(255,123,114,.12)}
.shv-del-no:hover{color:var(--text); border-color:var(--text-38)}
.shv-ibtn svg{width:13px; height:13px; display:block}
.shv-out-btn{display:inline-flex; align-items:center; gap:5px; font-family:inherit; font-size:0.8125rem; color:var(--text-38); background:none; border:1px solid transparent; border-radius:7px; padding:3px 7px; cursor:pointer; transition:.18s}
.shv-out-btn:hover{color:var(--text); border-color:var(--line); background:rgba(255,255,255,.04)}
.shv-out-btn svg{width:14px; height:14px}
.shv-empty{border:1px dashed var(--line); border-radius:var(--radius); padding:42px 24px; text-align:center; color:var(--text-38); font-size:0.9375rem}
.shv-none{color:var(--text-38); font-size:0.9375rem; text-align:center; padding:30px 0; border:1px dashed var(--line); border-radius:var(--radius)}
.shv-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s3)}
@media(max-width:760px){.shv-grid{grid-template-columns:1fr}}
.shv-card{border:1px solid var(--line); border-radius:var(--radius); background:var(--glass); padding:18px; display:flex; flex-direction:column; gap:10px; transition:border-color .2s, transform .2s}
.shv-card:hover{border-color:var(--text-38); transform:translateY(-1px)}
.shv-card-top{display:flex; align-items:center; justify-content:space-between; gap:6px 10px; flex-wrap:wrap}
.shv-card-tags{display:flex; gap:5px; flex-wrap:wrap}
.shv-score{font-size:0.8125rem; font-variant-numeric:tabular-nums; color:var(--text-56); border:1px solid var(--line-soft); border-radius:999px; padding:3px 10px; background:rgba(0,0,0,.2); white-space:nowrap}
.shv-card-title{font-size:1rem; font-weight:480; color:var(--text); letter-spacing:-.01em; margin:0}
.shv-card-snippet{color:var(--text-56); font-size:0.890625rem; line-height:23px; margin:0; flex:1; max-height:calc(23px * 4);
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.shv-card-foot{display:flex; align-items:center; gap:9px; padding-top:12px; border-top:1px solid var(--line-soft)}
.shv-card-foot .spacer{flex:1}

/* filters: multi-select type pills + More dropdown + sort */
.shv-filters{display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin:0 0 var(--s3)}
.shv-types{display:flex; gap:6px; flex-wrap:wrap}
.shv-sort{display:flex; align-items:center; gap:6px; margin-left:auto; flex-wrap:wrap}
.shv-sort-label{font-size:0.75rem; letter-spacing:0; text-transform:uppercase; color:var(--text-38); margin-right:2px}
.shv-filters .pill{margin:0; padding:5px 12px; font-size:0.8125rem; cursor:pointer; transition:all .18s}
.shv-filters .pill:hover{color:var(--text); border-color:var(--text-38)}
.shv-filters .pill.on{background:var(--white); color:#0A0A0B; border-color:var(--white); font-weight:520}
.shv-more{position:relative; display:inline-flex}
.shv-more-btn{gap:6px}
.shv-more-btn svg{width:12px; height:12px; transition:transform .18s}
.shv-more.open .shv-more-btn svg{transform:rotate(180deg)}
.shv-more-menu{position:absolute; top:calc(100% + 8px); right:0; left:auto; z-index:70; display:none; grid-template-columns:repeat(4,104px); gap:6px;
  width:max-content; max-width:92vw; padding:8px; border:1px solid var(--line); border-radius:12px; background:#0E0E10; box-shadow:0 18px 50px rgba(0,0,0,.5)}
.shv-more.open .shv-more-menu{display:grid}
.shv-more-menu .pill{margin:0; width:104px; text-align:center; white-space:nowrap}
@media(max-width:700px){.shv-more-menu{grid-template-columns:repeat(2,104px)}}

/* popup: shared prompt / typed output */
.shv-modal{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; padding:24px}
.shv-modal[hidden]{display:none}
.shv-modal-back{position:absolute; inset:0; background:rgba(6,6,7,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.shv-modal-panel{position:relative; width:min(680px,100%); max-height:82vh; display:flex; flex-direction:column; border:1px solid var(--line);
  border-radius:var(--radius); background:#0E0E10; box-shadow:0 30px 80px rgba(0,0,0,.6); overflow:hidden; animation:shvIn .18s ease}
@keyframes shvIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.shv-modal-head{display:flex; align-items:flex-start; gap:14px; padding:18px 20px 14px; border-bottom:1px solid var(--line)}
.shv-modal-kicker{font-size:0.75rem; color:var(--text-38); margin-bottom:4px}
.shv-modal-title{font-size:1.0625rem; font-weight:500; color:var(--text); letter-spacing:-.01em}
.shv-title-toggle{display:inline-block; background:none; border:0; padding:0 2px; margin-left:2px; color:var(--text-38); font-family:inherit; font-size:0.75rem; line-height:1; cursor:pointer; vertical-align:2px; transition:color .18s}
.shv-title-toggle:hover{color:var(--text)}
.shv-modal-x{margin-left:auto; width:30px; height:30px; border-radius:8px; color:var(--text-38); font-size:20px; line-height:1; background:none; border:0; cursor:pointer; transition:.18s; flex:none}
.shv-modal-x:hover{color:var(--text); background:rgba(255,255,255,.06)}
.shv-modal-body{padding:18px 20px; overflow:auto; color:var(--text-56); font-size:0.9375rem; line-height:1.7; white-space:pre-wrap}
.shv-modal-foot{display:flex; align-items:center; gap:12px; padding:12px 20px; border-top:1px solid var(--line); background:rgba(0,0,0,.25)}
.shv-modal-foot .shv-meta{margin-right:auto}
.shv-modal-acts{display:flex; align-items:center; gap:8px; margin-left:auto}
.shv-modal-acts [hidden]{display:none !important}
.shv-act{display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:transparent;
  color:var(--text-56); font-family:inherit; font-size:0.8125rem; cursor:pointer; transition:all .18s; white-space:nowrap}
.shv-act:hover{color:var(--text); border-color:var(--text-38)}
.shv-act-ico{width:34px; padding:0; justify-content:center}
.shv-act-ico svg{width:15px; height:15px; display:block}
.shv-act:disabled{opacity:.45; pointer-events:none}
.shv-act.danger{color:#ff8f87; border-color:rgba(255,123,114,.45)}
.shv-act.danger:hover{color:#ffb3ad; border-color:rgba(255,123,114,.7); background:rgba(255,123,114,.08)}
.shv-act svg{width:14px; height:14px}
.shv-modal-foot .btn{height:34px; padding:0 16px; font-size:0.8125rem; border-radius:999px}

/* techniques the sharer selected — compact popover off the footer button */
.shv-tech-wrap{position:relative; display:inline-flex}
.shv-tech-pop{position:absolute; bottom:calc(100% + 10px); right:0; z-index:5; display:flex; flex-wrap:wrap; gap:6px;
  width:max-content; max-width:300px; padding:10px; border:1px solid var(--line); border-radius:12px; background:#0E0E10;
  box-shadow:0 18px 50px rgba(0,0,0,.5); white-space:normal}
.shv-tech-pop .shv-tag{font-size:0.75rem; padding:2px 9px}

/* typed previews */
.shv-prev{display:flex; align-items:center; justify-content:center; min-height:220px}
.shv-prev iframe{width:100%; height:56vh; min-height:300px; border:1px solid var(--line); border-radius:12px; background:#0b0c0e; display:block}
.shv-prev img{max-width:100%; max-height:56vh; border-radius:12px; border:1px solid var(--line); display:block}
.shv-prev-svg svg, .shv-prev-svg img{width:min(340px,70%); height:auto; display:block}
.shv-file{display:flex; align-items:center; gap:14px; border:1px solid var(--line-soft); border-radius:12px; background:rgba(0,0,0,.25); padding:14px 16px}
.shv-file-ico{width:38px; height:38px; border-radius:10px; border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; color:var(--text-38); flex:none}
.shv-file-ico svg{width:18px; height:18px}
.shv-file-info b{display:block; color:var(--text); font-weight:500; font-size:0.9375rem}
.shv-file-info span{display:block; color:var(--text-38); font-size:0.8125rem; margin-top:3px}
.shv-file-prev{margin:14px 0 0; padding:14px 16px; max-height:34vh; overflow:auto; border:1px solid var(--line-soft); border-radius:12px;
  background:rgba(0,0,0,.25); color:var(--text-56); font-size:0.8125rem; line-height:1.6; white-space:pre-wrap}

/* ---------- Studio → Share popup ---------- */
/* the body keeps white-space:pre-wrap for shared text; here the content is
   markup, so collapse the source newlines into normal block flow */
#pfShareModal .shv-modal-body{white-space:normal}
.pf-label{font-size:0.75rem; letter-spacing:0; text-transform:uppercase; color:var(--text-38); margin:0 0 8px; white-space:normal}
.pf-tags{display:flex; flex-wrap:wrap; gap:6px; white-space:normal}
.pf-tags .pill{margin:0; padding:5px 12px; font-size:0.8125rem; cursor:pointer; transition:all .18s}
.pf-tags .pill:hover{color:var(--text); border-color:var(--text-38)}
.pf-tags .pill.on{background:var(--white); color:#0A0A0B; border-color:var(--white); font-weight:520}
.pf-prev{margin:0; padding:14px 16px; max-height:32vh; overflow:auto; border:1px solid var(--line-soft); border-radius:12px;
  background:rgba(0,0,0,.25); color:var(--text-56); font-size:0.8125rem; line-height:1.6; white-space:pre-wrap; font-family:var(--font-sans)}
.pf-meta{margin-top:10px; white-space:normal}

/* output uploader (share popup) */
.pf-drop{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 14px; border:1px dashed var(--line);
  border-radius:12px; background:rgba(0,0,0,.18); white-space:normal; transition:border-color .18s, background .18s}
.pf-drop.is-over{border-color:var(--text-38); background:rgba(255,255,255,.04)}
.pf-drop-hint{color:var(--text-38); font-size:0.8125rem}
.pf-attach{display:flex; align-items:center; gap:12px; margin-top:10px; padding:10px 12px; border:1px solid var(--line);
  border-radius:12px; background:rgba(0,0,0,.25); white-space:normal}
.pf-attach[hidden]{display:none}
.pf-attach-thumb{width:34px; height:34px; border-radius:8px; object-fit:cover; border:1px solid var(--line-soft); flex:none; background:#0b0c0e}
.pf-attach-body{min-width:0; display:flex; flex-direction:column; gap:2px}
.pf-attach-body b{color:var(--text); font-weight:500; font-size:0.875rem; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pf-attach-body span{color:var(--text-38); font-size:0.75rem}
.pf-attach .shv-ibtn{margin-left:auto; font-size:17px; line-height:1; color:var(--text-38)}
.pf-attach .shv-ibtn:hover{color:var(--text)}

/* full-screen lightbox extras for shares */
.lightbox-stage iframe{width:min(1100px,92vw); height:82vh; border:1px solid var(--line); border-radius:12px; background:#0b0c0e; display:block}
.lightbox-stage .lb-svg{width:min(700px,84vw); max-height:82vh; display:flex; align-items:center; justify-content:center}
.lightbox-stage .lb-svg svg, .lightbox-stage .lb-svg img{width:100%; height:auto; max-height:82vh; object-fit:contain}
.lightbox-stage .lb-pre{max-width:92vw; max-height:82vh; overflow:auto; margin:0; padding:24px; border:1px solid var(--line); border-radius:12px;
  background:#0E0E10; color:var(--text-56); font-size:0.875rem; line-height:1.7; white-space:pre-wrap}

/* ============================================================
   Change-password card — values copied 1:1 from the design bench
   (changepassword-galary.html, variant E) so the live Settings card
   renders exactly like the version that was approved there.
   These rules sit last on purpose: equal specificity, later wins.
   ============================================================ */
.pw-card{max-width:460px; margin:var(--s3) auto 0; padding:var(--s4);
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--glass)}
.pw-title{font-size:1rem; font-weight:520; color:var(--text); margin:0 0 4px; letter-spacing:0}
.pw-sub{font-size:0.875rem; color:var(--text-56); margin:0 0 var(--s3)}
.pw-label{display:block; font-size:0.875rem; color:var(--text-56); margin-bottom:8px; font-weight:420}
.pw-input{width:100%; background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:10px;
  color:var(--text); font-family:var(--font-sans); font-size:0.9375rem; padding:11px 13px; transition:.18s}
.pw-input::placeholder{color:var(--text-26)}
.pw-input:focus{outline:none; border-color:color-mix(in srgb, var(--text) 30%, transparent); background:rgba(255,255,255,.05)}
.pw-field{margin-bottom:var(--s3)}
.pw-gap{height:var(--s3)}
.pw-send-row{display:flex; align-items:center; gap:10px; margin-bottom:var(--s3); min-height:0}
.pw-ghost{background:none; border:1px solid var(--line); color:var(--text-56); border-radius:10px;
  font-family:var(--font-sans); font-size:0.875rem; font-weight:420; line-height:1.2; min-height:0; height:auto;
  padding:9px 14px; cursor:pointer; transition:.18s; white-space:nowrap}
.pw-ghost:hover{color:var(--text); border-color:color-mix(in srgb, var(--text) 28%, transparent)}
.pw-ghost:disabled{opacity:.45; cursor:not-allowed}
.pw-sent{display:flex; align-items:center; gap:10px; font-size:0.875rem; color:var(--text-56)}
.pw-tick{width:16px; height:16px; flex:none; border-radius:50%; position:relative;
  background:color-mix(in srgb, var(--good) 22%, transparent);
  border:1px solid color-mix(in srgb, var(--good) 45%, transparent)}
.pw-tick::after{content:""; position:absolute; left:4px; top:4.5px; width:6px; height:3px;
  border-left:1.5px solid var(--good); border-bottom:1.5px solid var(--good); transform:rotate(-45deg)}
.pw-code{font-family:inherit; font-size:0.9375rem; letter-spacing:.22em; max-width:190px}
.pw-code::placeholder{font-family:inherit; letter-spacing:normal}
.pw-strength{display:flex; gap:6px; margin:10px 0 8px}
.pw-strength span{height:3px; border-radius:2px; background:var(--line); flex:1; transition:.25s}
.pw-strength.s1 span:nth-child(-n+1){background:var(--line)}
.pw-strength.s2 span:nth-child(-n+2){background:var(--warn)}
.pw-strength.s3 span:nth-child(-n+3){background:color-mix(in srgb, var(--good) 70%, transparent)}
.pw-strength.s4 span{background:var(--good)}
.pw-rules{list-style:none; margin:0; padding:0; display:grid; gap:5px}
.pw-rules li{font-size:0.8125rem; color:var(--text-38); padding-left:18px; position:relative; line-height:1.5}
.pw-rules li::before{content:""; position:absolute; left:0; top:.42em; width:9px; height:9px; border-radius:50%;
  border:1px solid var(--line)}
.pw-rules li.ok{color:var(--text-56)}
.pw-rules li.ok::before{background:color-mix(in srgb, var(--good) 30%, transparent);
  border-color:color-mix(in srgb, var(--good) 55%, transparent)}
.pw-primary{width:100%; background:var(--white); color:#0a0a0b; border:none; border-radius:10px;
  font-family:var(--font-sans); font-size:0.9375rem; font-weight:520; padding:12px 16px; cursor:pointer; transition:.18s}
.pw-primary:hover{background:#fff}
.pw-primary:disabled{opacity:.4; cursor:not-allowed}

/* ---- the card now carries the same .card class as the profile box, so the
        background / blur / border / radius are literally identical. This rule
        only sets the geometry, and sits last so it wins. ---- */
.pw-card{max-width:460px; margin:var(--s3) auto 0; padding:var(--s4)}
/* email-change "Continue" (and its neighbours) — same box as Send/Resend code */
.em-btn{flex:none; padding:9px 14px; font-size:0.875rem; font-weight:420; line-height:1.2;
  min-height:0; height:auto; border-radius:10px}

/* ---- Turnstile gate: the challenge stays on screen when it fails ---- */
.ts-note{font-size:0.8125rem; color:var(--text-56); margin-top:10px; line-height:1.5; max-width:360px; margin-left:auto; margin-right:auto; text-align:center}
.ts-note.err{color:#e2a07e}
#turnstileWrap{display:flex; justify-content:center}