/* TOOLPASS Mitgliederbereich — design system.
   Brand tokens from the main site; app-shell surfaces layered on top.
   Theme-aware (light default, dark via prefers-color-scheme + [data-theme]). */
:root{
  --orange:#D94B19; --orange-deep:#B93810; --amber:#F2AC78;
  --ink:#242522; --paper:#FAF9F6; --good:#1e9e5a; --bad:#dc2626;
  --glow:217,75,25;
  /* light surfaces */
  --bg:#F4F5F8; --surface:#ffffff; --surface-2:#ECEEF3;
  --line:#DADFE8; --text:#242522; --text-soft:#566074; --text-faint:#677287;
  --shadow:0 18px 48px -24px rgba(35,44,31,.22);
  /* one radius scale for the whole app: cards / controls / pills */
  --radius:20px; --r-ctl:12px; --r-pill:999px;
  /* elevation scale — tinted to the background hue, never pure black */
  --e1:0 1px 2px rgba(35,44,31,.035), 0 6px 18px -12px rgba(35,44,31,.12);
  --e2:0 8px 20px -10px rgba(23,18,14,.18);
  --e3:0 32px 70px -28px rgba(23,18,14,.34);
  --font-ui:'Inter Tight',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-display:'Bricolage Grotesque',var(--font-ui);
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --orange:#F58A56; --orange-deep:#FFAD80; --glow:245,138,86;
  --bg:#101114; --surface:#17191E; --surface-2:#22252C;
    --line:#353943; --text:#F5F6F8; --text-soft:#BDC2CE; --text-faint:#969EAF;
    --paper:#17191E; --shadow:0 24px 60px -30px rgba(0,0,0,.72);
  --e1:0 1px 2px rgba(0,0,0,.4), 0 4px 12px -6px rgba(0,0,0,.5);
  --e2:0 8px 22px -10px rgba(0,0,0,.55);
  --e3:0 32px 70px -26px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --orange:#F58A56; --orange-deep:#FFAD80; --glow:245,138,86;
  --bg:#101114; --surface:#17191E; --surface-2:#22252C;
  --line:#353943; --text:#F5F6F8; --text-soft:#BDC2CE; --text-faint:#969EAF;
  --paper:#17191E; --shadow:0 24px 60px -30px rgba(0,0,0,.72);
  --e1:0 1px 2px rgba(0,0,0,.4), 0 4px 12px -6px rgba(0,0,0,.5);
  --e2:0 8px 22px -10px rgba(0,0,0,.55);
  --e3:0 32px 70px -26px rgba(0,0,0,.7);
}
:root[data-theme="light"]{
  --orange:#D94B19; --orange-deep:#B93810; --glow:217,75,25;
  --e1:0 1px 2px rgba(35,44,31,.035), 0 6px 18px -12px rgba(35,44,31,.12);
  --e2:0 8px 20px -10px rgba(35,44,31,.18);
  --e3:0 32px 70px -28px rgba(35,44,31,.3);
  --bg:#F4F5F8; --surface:#ffffff; --surface-2:#ECEEF3;
  --line:#DADFE8; --text:#242522; --text-soft:#566074; --text-faint:#677287;
  --paper:#FAF9F6; --shadow:0 18px 48px -24px rgba(35,44,31,.22);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{background:var(--bg);color:var(--text);}
body{font-family:var(--font-ui);line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:100dvh;overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
input{font-family:inherit;}
:focus-visible{outline:3px solid var(--orange);outline-offset:4px;}
::selection{background:rgba(var(--glow),.24);}

@keyframes fadeUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes shimmer{0%{background-position:-420px 0;}100%{background-position:420px 0;}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important;}}

/* ---------- app shell ---------- */
.app{display:grid;grid-template-columns:248px 1fr;min-height:100dvh;}
.sidebar{position:sticky;top:0;height:100dvh;background:var(--bg);
  border-right:1px solid var(--line);display:flex;flex-direction:column;padding:28px 16px;gap:10px;}
.brand{display:flex;align-items:center;gap:12px;padding:6px 10px 26px;}
.brand .logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  display:grid;place-items:center;flex:none;box-shadow:0 8px 18px -8px rgba(var(--glow),.7);}
.brand .logo svg{width:18px;height:18px;}
.brand b{font-family:var(--font-display);font-weight:800;font-size:1.22rem;letter-spacing:-.035em;}
.nav{display:flex;flex-direction:column;gap:5px;}
.nav a{display:flex;align-items:center;gap:11px;padding:12px;border-radius:12px;
  color:var(--text-soft);font-weight:550;font-size:.9rem;transition:background .15s,color .15s;}
.nav a svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.nav a:hover{background:var(--surface-2);color:var(--text);}
.nav a{position:relative;}
.nav a.active{background:var(--surface);color:var(--text);
  box-shadow:var(--e1);
  font-weight:700;}
.nav a.active::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:3px;background:var(--orange);}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding-top:14px;}
.plan-pill{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:13px;padding:11px 12px;font-size:.8rem;}
.plan-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--good);flex:none;box-shadow:0 0 0 3px rgba(30,158,90,.18);}
.plan-pill b{font-weight:700;}
.plan-pill span{color:var(--text-faint);display:block;font-size:.72rem;}

.main{min-width:0;display:flex;flex-direction:column;}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:16px 30px;background:var(--bg);
  backdrop-filter:none;border-bottom:1px solid var(--line);}
/* stands in for the search on every route where searching does nothing, and is
   the only place the brand appears on a phone (the sidebar is hidden there) */
.topbrand{flex:1;display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);min-width:0;}
.topbrand b{font-size:.98rem;font-weight:700;letter-spacing:-.01em;}
/* .logo is styled under .brand only, so the tile is repeated here rather than
   widening that selector and touching the sidebar */
.topbrand .logo{width:30px;height:30px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));}
.topbrand .logo svg{width:18px;height:18px;}
.search{flex:1;max-width:520px;display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:11px 15px;}
.search svg{width:17px;height:17px;stroke:var(--text-faint);fill:none;stroke-width:2;}
.search input{flex:1;border:none;background:none;font-size:1rem;color:var(--text);
  min-width:0;}
.search input::placeholder{color:var(--text-faint);}
.icon-btn{width:44px;height:44px;border-radius:var(--r-ctl);display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line);color:var(--text-soft);
  transition:background .15s,border-color .15s,transform .12s;}
.icon-btn:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--orange) 35%,var(--line));color:var(--text);}
.icon-btn:active{transform:scale(.96);}
.icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.content{padding:32px;max-width:1240px;width:100%;margin:0 auto;flex:1;}
.view{animation:fadeUp .4s ease both;}

h1.page-h{font-family:var(--font-display);font-weight:700;letter-spacing:-.045em;line-height:1.12;
  font-size:clamp(1.85rem,1.3rem + 2.2vw,2.6rem);text-wrap:balance;}
.page-h .accent{color:var(--orange);}
.page-sub{color:var(--text-soft);margin-top:12px;font-size:.95rem;max-width:52ch;
  line-height:1.65;}
.section-h{font-family:var(--font-display);font-weight:700;font-size:1.12rem;letter-spacing:-.01em;margin:32px 0 16px;}

/* category chips */
.cats{display:flex;gap:8px;flex-wrap:wrap;margin:24px 0;}
.cat{padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  font-size:.84rem;font-weight:600;color:var(--text-soft);transition:.15s;white-space:nowrap;}
.cat:hover{border-color:var(--orange);color:var(--text);}
.cat.active{background:var(--ink);color:#fff;border-color:var(--ink);}
:root[data-theme="dark"] .cat.active{background:var(--orange);border-color:var(--orange);color:#fff;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cat.active{background:var(--orange);border-color:var(--orange);color:#fff;}}

/* tool grid — the card IS the poster (name is baked into the image) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:18px;}
.tool{position:relative;aspect-ratio:171/256;border-radius:var(--radius);overflow:hidden;
  background:var(--surface-2);border:1px solid var(--line);cursor:pointer;
  transition:transform .16s,box-shadow .16s,border-color .16s;}
.tool:hover{transform:translateY(-3px);box-shadow:var(--e2);border-color:var(--text-faint);}
.tool .poster{width:100%;height:100%;object-fit:cover;display:block;}
.tool::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,18,14,.20),transparent 32%,transparent 68%,rgba(23,18,14,.22));
  opacity:.85;transition:opacity .16s;}
.tool:hover::after{opacity:.45;}
.tool .badge-new,.tool .tcat,.tool .go{z-index:1;}
/* Original TOOLPASS posters for tools whose source art is not available yet:
   same white/orange visual language as the supplied catalogue posters. */
.tool .fallback{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;padding:14px;text-align:center;isolation:isolate;overflow:hidden;
  color:#171514;background:#faf9f7;}
.tool.noposter .fallback{display:flex;}
.tool.noposter::after{background:none;}
.tool .fallback::before,.tool .fallback::after{content:"";position:absolute;z-index:-1;width:118px;height:118px;border-radius:50%;
  border:8px solid #ff5a1f;box-shadow:0 0 0 4px #ffb98f,0 0 0 8px #ffe1cf,0 0 0 12px #fff0e8;}
.tool .fallback::before{top:-74px;right:-70px;}
.tool .fallback::after{bottom:-76px;left:-72px;}
.tool .fallback b{position:relative;z-index:1;font-size:.92rem;font-weight:800;letter-spacing:-.035em;line-height:1.1;text-wrap:balance;}
.tool .fallback small{position:relative;z-index:1;font:700 .5rem/1 var(--font-mono,monospace);letter-spacing:.18em;color:var(--orange);}
.tool .fallback .mono{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:20px;
  font-size:2rem;background:#fff;border:1px solid #f1dfd5;box-shadow:8px 8px 0 #ff5a1f,0 10px 20px rgba(80,45,25,.13);}
.tool .fallback-grid{position:absolute;z-index:-1;top:12px;left:12px;width:38px;height:38px;
  background-image:radial-gradient(circle,#ff6e32 1.4px,transparent 1.7px);background-size:8px 8px;}
.tool .fallback-orbit{position:absolute;z-index:-1;bottom:13px;right:12px;width:38px;height:38px;
  background-image:radial-gradient(circle,#ff6e32 1.4px,transparent 1.7px);background-size:8px 8px;}
.mono{font-family:var(--font-display);font-weight:800;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.tool .tcat{position:absolute;left:8px;bottom:8px;font-family:var(--font-mono);font-size:.55rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#fff;
  padding:3px 7px;border-radius:99px;background:rgba(23,18,14,.62);backdrop-filter:blur(6px);}
.tool .go{position:absolute;right:8px;bottom:8px;width:26px;height:26px;border-radius:99px;
  display:grid;place-items:center;background:var(--orange);opacity:0;
  transition:opacity .16s,transform .16s;}
.tool:hover .go{opacity:1;transform:translateX(1px);}
.tool .go svg{width:15px;height:15px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}

/* detail head keeps the small square logo tile */
.logo-box{width:52px;height:52px;border-radius:14px;background:var(--surface-2);
  border:1px solid var(--line);display:grid;place-items:center;flex:none;overflow:hidden;}
.logo-box img{width:100%;height:100%;object-fit:cover;}
.logo-box .mono{font-size:1.35rem;}
.detail-head .logo-box{width:64px;height:64px;border-radius:16px;}
.detail-head .logo-box .mono{font-size:1.7rem;}
.logo-box img ~ .mono{display:none;} /* img removes itself on error, then the monogram shows */

/* KPI row + install bar */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);margin:22px 0 6px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--e1);}
.kpi{padding:20px;border-left:1px solid var(--line);}
.kpi:first-child{border-left:0;}
.kpi b{display:block;font-family:var(--font-display);font-weight:700;font-size:1.85rem;
  letter-spacing:-.03em;line-height:1.1;}
.kpi:first-child b,.kpi:nth-child(3) b{color:var(--orange);}
.kpi span{display:block;margin-top:7px;font-size:.76rem;font-weight:600;color:var(--text-soft);}
.install{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px;}
.install b{display:block;font-size:.95rem;}
.install span{font-size:.8rem;color:var(--text-soft);}
.badge-new{position:absolute;top:8px;right:8px;font-family:var(--font-mono);font-size:.55rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:99px;
  color:#fff;background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  box-shadow:0 2px 8px rgba(0,0,0,.25);}
@media(max-width:520px){.kpis{grid-template-columns:1fr 1fr;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:11px;}}

/* skeletons */
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 37%,var(--surface-2) 63%);
  background-size:840px 100%;animation:shimmer 1.3s linear infinite;border-radius:8px;}
.tool.skel{border-radius:var(--radius);}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;
  min-height:46px;border-radius:var(--r-ctl);white-space:nowrap;
  background:#B93810;color:#fff;font-weight:650;font-size:.94rem;
  box-shadow:0 3px 7px -3px rgba(94,35,15,.28);transition:background .18s,transform .18s,box-shadow .18s;}
.btn:hover{transform:translateY(-1px);filter:none;box-shadow:0 5px 12px -5px rgba(94,35,15,.3);}
.btn:active{transform:translateY(0) scale(.985);box-shadow:none;}
.btn.ghost{background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:none;}
/* Ein-Klick-Zugang: só aparece quando cookie decifrado do Zyon está no card */
.oneclick{display:flex;align-items:center;gap:12px 16px;margin-top:18px;padding:0;}
.oneclick .btn{padding:13px 20px;min-height:46px;font-size:.94rem;}
.oneclick .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.oneclick .ext-hint{font-size:.82rem;color:var(--muted);flex:1;min-width:180px;}
.btn.block{width:100%;}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none;}

/* ---------- auth ---------- */
.auth{min-height:100dvh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(ellipse at 50% 0%,rgba(var(--glow),.065),transparent 65%),var(--bg);}
.auth-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);
  border-radius:24px;padding:36px clamp(22px,5vw,36px);box-shadow:var(--e3);animation:fadeUp .5s ease both;}
.auth-card .brand{justify-content:center;padding:0 0 22px;}
.auth h1{font-family:var(--font-display);font-weight:800;font-size:1.45rem;text-align:center;letter-spacing:-.02em;}
.auth p.sub{color:var(--text-soft);text-align:center;margin:6px 0 24px;font-size:.94rem;}
.field{margin-bottom:14px;}
.field label{display:block;font-size:.8rem;font-weight:600;color:var(--text-soft);margin-bottom:6px;}
.field input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  padding:14px 15px;font-size:1rem;color:var(--text);transition:border-color .15s;}
.field input:focus{outline:none;border-color:var(--orange);}
.auth .msg{text-align:center;font-size:.88rem;margin-top:14px;min-height:1.2em;}
.auth .msg.ok{color:var(--good);}
.auth .msg.err{color:var(--bad);}
.auth .fine{text-align:center;font-size:.76rem;color:var(--text-faint);margin-top:18px;line-height:1.5;}
.auth-help{margin-top:12px;padding-top:14px;border-top:1px solid var(--line);color:var(--text-soft);}
.auth-help p{font-size:.82rem;line-height:1.55;margin:0 0 12px;}
.auth-help .fine{margin-top:12px;}
.auth .fine a{color:var(--orange-deep);text-decoration:underline;}

/* ---------- tool detail ---------- */
.back-link{display:inline-flex;align-items:center;gap:7px;color:var(--text-soft);font-weight:600;
  font-size:.9rem;margin-bottom:18px;}
.back-link svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.detail-head{display:flex;align-items:center;gap:16px;margin-bottom:8px;}
.detail-head .logo-box{width:64px;height:64px;border-radius:16px;}
.detail-head h1{font-family:var(--font-display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em;}
.video{aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--surface-2);
  border:1px solid var(--line);margin:22px 0;}
.video iframe{width:100%;height:100%;border:0;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;margin-bottom:20px;box-shadow:var(--e1);}
.card h3{font-weight:700;font-size:1.02rem;margin-bottom:12px;}
.card .prose{color:var(--text-soft);font-size:.94rem;line-height:1.65;white-space:pre-wrap;}
.access-card{padding:20px;}
.access-card.access-cookie{border-color:color-mix(in srgb,var(--orange) 28%,var(--line));
  background:linear-gradient(135deg,color-mix(in srgb,var(--orange) 6%,var(--surface)),var(--surface) 58%);}
.access-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px;}
.access-head .access-icon{width:38px;height:38px;display:grid;place-items:center;flex:none;border-radius:11px;
  color:var(--orange-deep);background:color-mix(in srgb,var(--orange) 11%,var(--surface));}
.access-head .access-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.access-head h3{margin:0 0 3px;font-size:1.05rem;}
.access-head p{margin:0;color:var(--text-soft);font-size:.86rem;line-height:1.45;}
.access-fresh{margin:12px 0 0;color:var(--text-faint);font-size:.76rem;line-height:1.45;}
.access-steps{border:1px solid var(--line);border-radius:var(--r-ctl);overflow:hidden;background:var(--surface);}
.access-step{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:11px;padding:12px 13px;border-bottom:1px solid var(--line);}
.access-step:last-child{border-bottom:0;}
.access-step>span{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;background:color-mix(in srgb,var(--orange) 12%,var(--surface));color:var(--orange-deep);font-size:.76rem;font-weight:800;}
.access-step b,.access-step small{display:block;}
.access-step b{font-size:.86rem;line-height:1.35;}
.access-step small{margin-top:2px;color:var(--text-faint);font-size:.74rem;line-height:1.35;}
.access-step a{color:var(--orange-deep);font-size:.78rem;font-weight:750;text-decoration:none;}
.access-step a:hover{text-decoration:underline;}
.access-step-final{background:color-mix(in srgb,var(--orange) 5%,var(--surface));}

/* credentials — the paywalled payload */
.cred{display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r-ctl);padding:10px 10px 10px 14px;margin-bottom:9px;}
.cred .ck{font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-faint);width:78px;flex:none;}
.cred .cv{flex:1;font-family:var(--font-mono);font-size:.9rem;color:var(--text);word-break:break-all;
  filter:blur(0);transition:filter .2s;}
.cred.locked .cv{filter:blur(6px);user-select:none;}
.cred .copy{width:44px;height:44px;border-radius:var(--r-ctl);background:var(--surface-2);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--text-soft);flex:none;transition:.15s;}
.cred .copy:hover{color:var(--orange-deep);border-color:var(--orange);background:var(--surface);}
.cred .copy:active{transform:scale(.94);}
.cred .copy svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;}
.cred .copy.done{color:var(--good);border-color:var(--good);}
/* Session-Schlüssel: nicht anzeigen, nur kopieren. 4.000 Zeichen Base64 sehen
   für den Käufer nach Fehler aus, und niemand liest sie je. */
.cred .cv.blob{font-family:inherit;display:flex;flex-direction:column;gap:2px;word-break:normal;}
.cred .cv.blob b{font-size:.92rem;font-weight:600;}
.cred .cv.blob i{font-style:normal;font-size:.78rem;color:var(--text-faint);line-height:1.4;}
.cred-next{margin:2px 0 0;font-size:.82rem;color:var(--text-soft);line-height:1.5;}
@media(max-width:560px){
  .access-step{grid-template-columns:30px minmax(0,1fr);}
  .access-step a{grid-column:2;justify-self:start;}
  .oneclick{align-items:stretch;flex-direction:column;}
  .oneclick .btn{width:100%;}
  .oneclick .ext-hint{min-width:0;text-align:center;}
}

/* locked overlay for non-members */
.locked-note{background:linear-gradient(135deg,rgba(var(--glow),.08),transparent);
  border:1px solid color-mix(in srgb,var(--orange) 30%,var(--line));border-radius:var(--radius);
  padding:22px;text-align:center;margin-bottom:16px;}
.locked-note b{display:block;font-family:var(--font-display);font-size:1.1rem;margin-bottom:6px;}
.locked-note p{color:var(--text-soft);font-size:.9rem;margin-bottom:16px;}

/* empty / error states */
.state{text-align:center;padding:60px 20px;color:var(--text-soft);}
.state svg{width:46px;height:46px;stroke:var(--text-faint);fill:none;stroke-width:1.6;margin:0 auto 14px;}
.state b{display:block;font-family:var(--font-display);font-size:1.1rem;color:var(--text);margin-bottom:5px;}

.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:100;
  background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font-size:.88rem;font-weight:600;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.spinner{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--orange);
  border-radius:50%;animation:spin .8s linear infinite;margin:40px auto;}

/* ---------- mobile ---------- */
.mobile-nav{display:none;}
@media (max-width:860px){
  .app{grid-template-columns:1fr;}
  .sidebar{display:none;}
  .content{padding:18px 16px 90px;}
  .topbar{padding:12px 16px;}
  /* bottom tab bar (PWA feel) */
  .mobile-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;
    background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(14px);
    border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom));justify-content:space-around;}
  /* At most 4 tabs, so each one gets room for a readable label instead of the
     squeezed nine it used to carry. flex:1 keeps them evenly divided whether
     the visitor is logged in (4) or a cold lead (3 + the join tab). */
  .mobile-nav a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:6px 4px;border-radius:12px;color:var(--text-faint);font-size:.68rem;font-weight:600;}
  .mobile-nav a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .mobile-nav a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .mobile-nav a.active{color:var(--orange-deep);}
  /* the only tab that sells: it must not look like the navigation around it */
  .mobile-nav a.join{color:var(--orange-deep);}
  .mobile-nav a.join svg{fill:color-mix(in srgb,var(--orange) 22%,transparent);}
  /* the chat input is sticky to the bottom of the viewport, which on a phone is
     exactly where the fixed tab bar sits — it was typing into a field the bar
     covered. Lift it clear and keep it under the bar in the stack. */
  .chat-bar{bottom:calc(68px + env(safe-area-inset-bottom));z-index:10;}
  h1.page-h{font-size:1.4rem;}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px;}
}

/* numbered steps — one component, used by the tool guide, the sessions page
   and the install modal (they were three different-looking lists before) */
.steps{margin:0;padding:0;list-style:none;counter-reset:s;}
.steps li{counter-increment:s;position:relative;padding:0 0 15px 38px;font-size:.9rem;
  line-height:1.55;color:var(--text-soft);}
.steps li:last-child{padding-bottom:0;}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:24px;height:24px;
  border-radius:var(--r-pill);display:grid;place-items:center;font-family:var(--font-mono);
  font-size:.68rem;font-weight:700;color:var(--orange-deep);
  background:color-mix(in srgb,var(--orange) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--orange) 30%,transparent);}
/* the connecting rail makes the list read as one sequence, not four bullets */
.steps li:not(:last-child)::after{content:"";position:absolute;left:11.5px;top:26px;bottom:5px;
  width:1px;background:color-mix(in srgb,var(--orange) 22%,transparent);}

/* platform switch — segmented control, not three loose pills */
.guide .ptabs,.ptabs{display:inline-flex;gap:2px;margin:2px 0 18px;padding:3px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-pill);}
.ptab{font:inherit;font-size:.82rem;font-weight:600;padding:9px 16px;min-height:38px;
  border-radius:var(--r-pill);border:0;background:none;color:var(--text-soft);cursor:pointer;
  transition:background .15s,color .15s;}
.ptab:hover{color:var(--text);}
.ptab.active{background:var(--surface);color:var(--text);box-shadow:var(--e1);}
.ptab:active{transform:scale(.97);}

/* yearly upgrade promo (monthly members only) */
.promo{position:relative;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;
  padding:16px 18px;border-radius:var(--radius);color:#fff;
  background:linear-gradient(120deg,var(--orange),var(--orange-deep));box-shadow:var(--shadow);}
.promo-txt{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px;}
.promo-tag{align-self:flex-start;font-family:var(--font-mono);font-size:.58rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:99px;
  background:rgba(255,255,255,.22);margin-bottom:4px;}
.promo-txt b{font-family:var(--font-display);font-size:1.3rem;line-height:1.15;letter-spacing:-.025em;}
.promo-act{display:flex;flex-direction:column;align-items:flex-end;gap:7px;position:relative;z-index:1;}
.promo-save{font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:4px 9px;border-radius:var(--r-pill);background:rgba(255,255,255,.2);}
@media(max-width:560px){.promo-act{width:100%;align-items:stretch;}
  .promo-act .btn{width:100%;}.promo-save{text-align:center;}}
.promo-txt span:last-child{font-size:.83rem;opacity:.92;}
.promo .btn{background:#fff;color:var(--orange-deep);border-color:#fff;}
.promo .btn:hover{background:#fff;transform:translateY(-1px);}
.promo-x{position:absolute;top:8px;right:10px;background:none;border:0;color:#fff;opacity:.7;
  font-size:1.3rem;line-height:1;cursor:pointer;padding:2px 6px;}
.promo-x:hover{opacity:1;}

/* sessions banner */
.sessions-banner{display:flex;align-items:center;gap:13px;margin-bottom:14px;padding:14px 16px;
  border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);
  text-decoration:none;color:inherit;transition:.16s;}
.sessions-banner:hover{border-color:color-mix(in srgb,var(--orange) 45%,var(--line));transform:translateY(-2px);}
.sb-ic{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));}
.sb-ic svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sb-txt{flex:1;display:flex;flex-direction:column;}
.sb-txt b{font-size:.95rem;}
.sb-txt span{font-size:.8rem;color:var(--text-soft);}
.sb-go svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}

/* install modal */
.modal-back{position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  padding:max(20px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));
  background:rgba(14,12,11,.62);backdrop-filter:blur(6px);animation:fade .18s ease-out;}
.modal{position:relative;width:min(420px,100%);max-height:86dvh;overflow:auto;
  padding:30px 26px 22px;border-radius:22px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--e3);animation:modalIn .26s cubic-bezier(.2,.8,.3,1) both;}
.modal{border-color:color-mix(in srgb,var(--orange) 12%,var(--line));}
/* app icon at the top, the way a native install sheet opens */
.modal-icon{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  box-shadow:0 14px 30px -12px rgba(var(--glow),.75);}
.modal-icon svg{width:32px;height:32px;}
.modal h2{font-family:var(--font-display);font-weight:800;font-size:1.55rem;line-height:1.14;
  letter-spacing:-.03em;text-wrap:balance;margin-bottom:10px;}
.modal h2 .hl{color:var(--orange);white-space:nowrap;} /* keeps "App installieren" from splitting mid-phrase */
.modal p{font-size:.88rem;color:var(--text-soft);line-height:1.6;margin-bottom:20px;max-width:42ch;}
.modal-steps{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;margin-bottom:20px;}
.modal-steps b{display:block;font-family:var(--font-mono);font-size:.68rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--text-faint);margin-bottom:15px;}
.modal-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border-radius:var(--r-pill);
  display:grid;place-items:center;background:none;border:0;color:var(--text-faint);
  font-size:1.4rem;line-height:1;cursor:pointer;transition:background .15s,color .15s;}
.modal-x:hover{background:var(--surface-2);color:var(--text);}
.modal-never{display:block;width:100%;min-height:44px;margin-top:6px;background:none;border:0;
  cursor:pointer;font:inherit;font-size:.84rem;font-weight:600;color:var(--text-soft);
  border-radius:var(--r-ctl);transition:color .15s,background .15s;}
.modal-never:hover{color:var(--text);background:var(--surface-2);}
.report-modal{max-width:430px;text-align:center;}
.report-modal-icon{margin:0 auto 12px;background:linear-gradient(135deg,#13a96a,#0b7548);box-shadow:0 14px 30px -12px rgba(19,169,106,.58);}
.report-live{display:inline-flex;align-items:center;gap:7px;margin:0 0 13px;color:#19b878;font-family:var(--font-mono);font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.report-live i{width:7px;height:7px;border-radius:50%;background:#20d989;box-shadow:0 0 0 5px rgba(32,217,137,.13);animation:reportLive 1.7s ease-in-out infinite;}
.report-promise{text-align:left;margin-bottom:18px;}
.report-promise span{display:block;font-size:.84rem;line-height:1.5;color:var(--text-soft);}
@keyframes reportLive{50%{transform:scale(.72);opacity:.55;}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(14px) scale(.985);}to{opacity:1;transform:none;}}

/* ---------- motion ----------
   Every animation below answers one question: what changed, or where am I.
   Nothing loops forever except the two live indicators. All of it collapses
   under prefers-reduced-motion (block at the bottom of this file). */

/* detected-client line */
.client{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 16px;
  font-size:.82rem;color:var(--text-soft);}
.client b{color:var(--text);font-weight:700;}
.client-dot{width:7px;height:7px;border-radius:50%;background:var(--good);flex:none;
  box-shadow:0 0 0 0 rgba(30,158,90,.5);animation:livePulse 2.4s ease-out infinite;}
.client-note{flex-basis:100%;color:var(--orange-deep);font-weight:600;}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(30,158,90,.5);}70%{box-shadow:0 0 0 7px rgba(30,158,90,0);}100%{box-shadow:0 0 0 0 rgba(30,158,90,0);}}

/* catalogue: cards fly in staggered, so the grid reads as filling up */
.tool{animation:cardIn .5s cubic-bezier(.2,.8,.3,1) both;
  animation-delay:calc(var(--i,0) * 28ms);}
@keyframes cardIn{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}
.tool .poster{transition:transform .45s cubic-bezier(.2,.8,.3,1);}
.tool:hover .poster{transform:scale(1.015);}
.tool:active{transform:translateY(-1px) scale(.985);}

/* KPI numbers count up (JS sets --n, CSS just animates the reveal) */
.kpi b{animation:kpiIn .55s cubic-bezier(.2,.8,.3,1) both;}
.kpi:nth-child(2) b{animation-delay:.06s;}
.kpi:nth-child(3) b{animation-delay:.12s;}
.kpi:nth-child(4) b{animation-delay:.18s;}
@keyframes kpiIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* upgrade banner: a slow light sweep, the one piece of pure salesmanship */
.promo{overflow:hidden;}
.promo::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);animation:none;pointer-events:none;
  opacity:0;}
@keyframes sweep{0%{left:-60%;}55%{left:120%;}100%{left:120%;}}
.promo .btn{position:relative;z-index:1;}

/* sessions banner: the key nudges toward the arrow on hover */
.sessions-banner .sb-ic{transition:transform .3s cubic-bezier(.2,.8,.3,1);}
.sessions-banner:hover .sb-ic{transform:rotate(-12deg) scale(1.06);}
.sessions-banner .sb-go svg{transition:transform .2s;}
.sessions-banner:hover .sb-go svg{transform:translateX(4px);}

/* install modal: the app icon pops before the copy settles */
.modal-icon{animation:iconPop .5s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes iconPop{from{opacity:0;transform:scale(.6) rotate(-8deg);}to{opacity:1;transform:none;}}
.modal h2,.modal p,.modal-steps,.modal .btn{animation:modalStep .45s ease both;}
.modal h2{animation-delay:.06s;} .modal p{animation-delay:.12s;}
.modal-steps{animation-delay:.18s;} .modal .btn{animation-delay:.24s;}
@keyframes modalStep{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}

/* steps draw their rail as the list appears */
.steps li{animation:stepIn .4s ease both;animation-delay:calc(var(--i,0) * 55ms);}
@keyframes stepIn{from{opacity:0;transform:translateX(-6px);}to{opacity:1;transform:none;}}

/* copy confirmation is feedback, not decoration */
.cred .copy.done{animation:pop .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes pop{50%{transform:scale(1.18);}100%{transform:scale(1);}}

@media (prefers-reduced-motion: reduce){
  .tool,.kpi b,.modal-icon,.modal h2,.modal p,.modal-steps,.modal .btn,.steps li,.report-live i{
    animation:none!important;opacity:1!important;transform:none!important;}
  .promo::after,.client-dot{animation:none!important;}
  .tool:hover .poster{transform:none;}
}

/* ---------- KI-Agenten ---------- */
.agent-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-top:20px;}
.agent-card{display:flex;flex-direction:column;gap:10px;padding:22px 20px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;color:var(--text);
  transition:transform .15s,border-color .15s,box-shadow .15s;}
.agent-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--orange) 45%,var(--line));
  box-shadow:var(--e2);}
.agent-ic{display:inline-flex;width:34px;height:34px;border-radius:10px;align-items:center;justify-content:center;
  color:var(--orange);background:color-mix(in srgb,var(--orange) 11%,transparent);}
.agent-ic svg{width:19px;height:19px;}
.agent-card b{font-weight:700;font-size:1rem;}
.agent-tag{font-family:var(--font-mono);font-size:.66rem;color:var(--text-soft);}
.agent-card.locked{opacity:.66;}
.agent-lock{position:absolute;top:12px;right:12px;font-size:.9rem;opacity:.65;}
.agent-go{position:absolute;top:14px;right:13px;opacity:0;transform:translateX(-4px);transition:.18s;color:var(--orange);display:inline-flex}
.agent-go svg{width:16px;height:16px}
.agent-card:hover .agent-go{opacity:1;transform:none}
.agent-card{position:relative;}
.agent-grid .agent-card{animation:agentIn .5s ease both;}
.agent-grid .agent-card:nth-child(2){animation-delay:.05s}
.agent-grid .agent-card:nth-child(3){animation-delay:.1s}
.agent-grid .agent-card:nth-child(4){animation-delay:.15s}
.agent-grid .agent-card:nth-child(n+5){animation-delay:.2s}
@keyframes agentIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* locked upsell hero: split text + orbit motion graphic */
.agent-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center;
  margin-bottom:26px;padding:26px;border-radius:22px;overflow:hidden;position:relative;
  background:radial-gradient(120% 140% at 100% 0,color-mix(in srgb,var(--orange) 13%,var(--surface-2)),var(--surface-2));
  border:1px solid color-mix(in srgb,var(--orange) 26%,var(--line));}
.agent-hero-txt .page-h{margin:8px 0 10px;font-size:1.9rem;}
.agent-hero-txt .page-sub{margin:0 0 16px;}
.agent-buy{display:flex;flex-direction:column;gap:9px;align-items:flex-start;}
.btn.xl{font-size:1.02rem;font-weight:800;padding:15px 26px;border-radius:14px;display:inline-flex;gap:10px;align-items:center;
  box-shadow:var(--e2);animation:none;}
.btn.xl b{font-weight:800;}
@keyframes buyPulse{0%,100%{transform:none}50%{transform:translateY(-2px) scale(1.015)}}
.agent-buy-note{font-family:var(--font-mono);font-size:.64rem;color:var(--text-soft);margin-top:2px;}
.btn.xl{align-self:flex-start;}
.agent-hero-txt .page-sub{margin:0 0 14px;}
/* mechanism = "what your secretary does" */
.mech{display:flex;flex-direction:column;gap:9px;margin:0 0 16px;}
.mech-row{display:flex;align-items:center;gap:11px;font-size:.92rem;font-weight:600;color:var(--text);}
.mech-ic{flex:none;display:inline-flex;width:30px;height:30px;border-radius:9px;align-items:center;justify-content:center;
  color:var(--orange);background:color-mix(in srgb,var(--orange) 12%,transparent);}
.mech-ic svg{width:17px;height:17px;}
/* scarcity strip */
.scarce{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:9px 13px;border-radius:12px;
  background:color-mix(in srgb,var(--orange) 10%,var(--surface-1));border:1px solid color-mix(in srgb,var(--orange) 32%,var(--line));
  font-size:.84rem;font-weight:600;color:var(--text);line-height:1.35;}
.scarce b{color:var(--orange-deep);}
.sc-dot{width:9px;height:9px;border-radius:50%;background:var(--orange-deep);flex:none;animation:scPulse 1.3s ease-in-out infinite;}
@keyframes scPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--orange-deep) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}}
/* animated price slash 497 -> 197. Pre-state is set here; the animation fires
   only when .agent-hero gets .play (after the reveal intro), so it is always seen. */
.price-slash{display:flex;align-items:center;gap:14px;margin:2px 0 14px;flex-wrap:wrap;}
.ps-old{position:relative;font-family:var(--font-display);font-weight:800;font-size:1.55rem;color:var(--text-soft);transform-origin:left center;}
.ps-strike{position:absolute;left:-4px;right:-4px;top:50%;height:4px;border-radius:3px;background:var(--orange-deep);transform:scaleX(0);transform-origin:left;}
.ps-new{position:relative;font-family:var(--font-display);font-weight:800;font-size:2.7rem;line-height:1;color:var(--orange);opacity:0;transform:scale(.4);}
.ps-new::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid var(--orange);opacity:0;transform:scale(.5);}
.ps-badge{font-family:var(--font-mono);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--orange) 14%,transparent);color:var(--orange-deep);opacity:0;}
.agent-hero.play .ps-old{animation:oldDrop .5s ease .55s forwards;}
.agent-hero.play .ps-strike{animation:slash .34s cubic-bezier(.6,0,.2,1) .3s forwards;}
.agent-hero.play .ps-new{animation:pricePop .55s cubic-bezier(.18,1.5,.4,1) .78s forwards;}
.agent-hero.play .ps-new::before{animation:priceRing .6s ease .85s forwards;}
.agent-hero.play .ps-badge{animation:fadeIn .4s ease 1.25s forwards;}
@keyframes slash{60%{transform:scaleX(1.06)}100%{transform:scaleX(1)}}
@keyframes oldDrop{to{opacity:.4;transform:rotate(-7deg) scale(.9)}}
@keyframes pricePop{55%{transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes priceRing{0%{opacity:.55;transform:scale(.5)}100%{opacity:0;transform:scale(1.5)}}
@keyframes fadeIn{to{opacity:1}}
/* reveal intro overlay: "Angebot freigeschaltet" (padlock opens) */
.view{position:relative;}
.reveal-intro{position:absolute;inset:0;z-index:30;display:flex;align-items:flex-start;justify-content:center;text-align:center;
  background:radial-gradient(circle at 50% 26%,color-mix(in srgb,var(--orange) 20%,var(--surface-2)),var(--surface-2) 62%);}
.ri-inner{margin-top:min(26vh,200px);}
.reveal-intro.out{animation:riOut .5s ease forwards;pointer-events:none;}
@keyframes riOut{to{opacity:0;transform:scale(1.05)}}
.ri-inner{position:relative;}
.ri-rings,.ri-rings::before{position:absolute;left:50%;top:34px;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:2px solid var(--orange);opacity:0;}
.ri-rings{animation:riRing .7s ease .35s forwards;}
.ri-rings::before{content:"";animation:riRing .7s ease .5s forwards;}
@keyframes riRing{0%{opacity:.6;transform:scale(.4)}100%{opacity:0;transform:scale(2.6)}}
.ri-lock{width:72px;height:72px;margin:0 auto 18px;color:var(--orange);}
.ri-lock .shackle{transform-origin:19px 20px;animation:riShackle .5s cubic-bezier(.6,0,.2,1) .15s forwards;}
@keyframes riShackle{to{transform:translateY(-3px) rotate(-24deg)}}
.ri-lock .body{transform-origin:center;animation:riPop .4s cubic-bezier(.2,1.5,.4,1) .45s both;}
@keyframes riPop{0%{transform:scale(.9)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
.ri-kicker{font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);opacity:0;animation:riUp .5s ease .55s forwards;}
.ri-title{font-family:var(--font-display);font-weight:800;font-size:1.7rem;letter-spacing:-.02em;line-height:1.1;margin-top:6px;opacity:0;animation:riUp .5s ease .7s forwards;}
@keyframes riUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* motion-graphic scene (SVG + SMIL): routine -> KI-Mitarbeiter -> server */
.agent-stage{display:flex;align-items:center;justify-content:center;}
.agent-svg{width:100%;height:auto;max-height:230px;}
/* activity band: cycling highlight over life-area tiles */
.act-band{margin-top:26px;padding:22px;border-radius:20px;background:var(--surface-2);border:1px solid var(--line);}
.act-h{text-align:center;font-family:var(--font-display);font-weight:800;font-size:1.15rem;margin:0 0 16px;}
.act-strip{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.act-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;width:84px;padding:14px 6px;border-radius:15px;
  background:var(--surface-1);border:1px solid var(--line);}
.act-tile i{display:inline-flex;width:38px;height:38px;border-radius:11px;align-items:center;justify-content:center;
  color:var(--text-soft);background:color-mix(in srgb,var(--text-soft) 8%,transparent);
  animation:actIcon 7.2s ease-in-out infinite;animation-delay:inherit;}
.act-tile i svg{width:21px;height:21px;}
.act-tile b{font-size:.72rem;font-weight:600;color:var(--text-soft);
  animation:actLbl 7.2s ease-in-out infinite;animation-delay:inherit;}
@keyframes actIcon{
  0%,16%,100%{color:var(--text-soft);background:color-mix(in srgb,var(--text-soft) 8%,transparent);transform:none}
  5%,11%{color:#fff;background:var(--orange);transform:translateY(-4px) scale(1.1)}}
@keyframes actLbl{0%,16%,100%{color:var(--text-soft)}5%,11%{color:var(--text);font-weight:700}}
@media (max-width:720px){
  .agent-hero{grid-template-columns:1fr;gap:14px;padding:20px 18px;}
  .agent-hero-txt{display:flex;flex-direction:column;align-items:center;text-align:center;}
  .agent-stage{order:-1;}
  .agent-svg{max-height:190px;}
  .agent-hero-txt .page-h{font-size:1.6rem;}
  .mech{width:100%;max-width:320px;margin-inline:auto;}
  .price-slash{justify-content:center;}
  .btn.xl{align-self:stretch;width:100%;max-width:340px;justify-content:center;}
  .agent-buy-note{text-align:center;max-width:300px;margin-inline:auto;}
  .act-band{padding:18px 14px;}
  .act-h{font-size:1.02rem;}
}
@media (prefers-reduced-motion:reduce){
  .agent-grid .agent-card,.btn.xl,.act-tile i,.act-tile b,.sc-dot,.ps-new::before,.ps-old{animation:none}
  .agent-svg *{animation-play-state:paused}
  .ps-strike{animation:none;transform:scaleX(1)}
  .ps-new,.ps-badge{animation:none;opacity:1;transform:none}
  .reveal-intro{display:none}}

/* ---------- sessions page ---------- */
.promo-tag.solo{display:inline-flex;align-items:center;margin-bottom:14px;
  background:color-mix(in srgb,var(--orange) 14%,transparent);color:var(--orange-deep);}
.sess-help{margin-top:20px;padding:16px;}
.sess-help .ptabs{margin:0 0 14px;}
.helper{background:color-mix(in srgb,var(--orange) 7%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--orange) 22%,var(--line));
  border-radius:16px;padding:16px 17px;display:flex;flex-direction:column;gap:5px;}
.helper b{font-size:.97rem;}
.helper span{font-size:.86rem;color:var(--text-soft);line-height:1.5;}
.helper .btn{margin-top:11px;align-self:stretch;}
.sess-search{max-width:none;margin:18px 0 14px;}
.sess-list{display:flex;flex-direction:column;gap:10px;}
.sess{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;box-shadow:var(--e1);
  animation:cardIn .45s cubic-bezier(.2,.8,.3,1) both;animation-delay:calc(var(--i,0) * 35ms);}
.sess .logo-box{width:46px;height:46px;border-radius:13px;}
.sess-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.sess-txt b{font-size:.97rem;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sess-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.78rem;color:var(--text-soft);}
.sess-age{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:.68rem;
  font-weight:700;padding:3px 8px;border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--orange) 12%,transparent);color:var(--orange-deep);}
.sess-age .client-dot{width:6px;height:6px;background:var(--orange);
  box-shadow:0 0 0 0 rgba(var(--glow),.55);animation:cookiePulse 2.6s ease-out infinite;}
@keyframes cookiePulse{0%{box-shadow:0 0 0 0 rgba(var(--glow),.55);}70%{box-shadow:0 0 0 6px rgba(var(--glow),0);}100%{box-shadow:0 0 0 0 rgba(var(--glow),0);}}
.sess-go{flex:none;padding:11px 15px;font-size:.86rem;min-height:44px;}
.sess-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@media(max-width:560px){
  .sess{flex-wrap:wrap;}
  .sess-go{width:100%;}
}
@media (prefers-reduced-motion: reduce){
  .sess{animation:none!important;}
  .sess-age .client-dot{animation:none!important;}
}

/* ---------- upgrade offer modal ---------- */
.modal.offer{width:min(430px,100%);}
.offer .promo-tag.solo{margin-bottom:12px;}
.offer h2 .hl,.offer h2{color:var(--text);}
.offer-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px;
  padding:16px 18px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line);}
.offer-price s{font-family:var(--font-mono);font-size:1rem;color:var(--text-faint);}
.offer-price b{font-family:var(--font-display);font-size:2.4rem;line-height:1;letter-spacing:-.04em;
  color:var(--orange);}
.offer-badge{margin-left:auto;font-family:var(--font-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);
  color:#fff;background:linear-gradient(135deg,var(--orange),var(--orange-deep));}
.offer-list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:10px;}
.offer-list li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--text-soft);
  line-height:1.45;}
.offer-list svg{width:17px;height:17px;flex:none;margin-top:1px;stroke:var(--good);fill:none;
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.offer .btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}
.offer .btn{animation:offerCta .5s cubic-bezier(.2,.8,.3,1) .3s both;}
@keyframes offerCta{from{opacity:0;transform:translateY(10px) scale(.97);}to{opacity:1;transform:none;}}
.offer-price b{animation:priceIn .55s cubic-bezier(.34,1.56,.64,1) .22s both;}
@keyframes priceIn{from{opacity:0;transform:scale(.75);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion: reduce){
  .offer .btn,.offer-price b{animation:none!important;}
}

/* ---------- membership plan modal (in-place from the vitrine) ---------- */
.modal.plan-modal{width:min(460px,100%);}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
.plan-opt{position:relative;display:flex;flex-direction:column;gap:3px;padding:16px 15px;border-radius:16px;text-decoration:none;
  background:var(--surface-2);border:1px solid var(--line);color:var(--text);
  transition:transform .15s,border-color .15s,box-shadow .15s;animation:planIn .4s ease both;}
.plan-opt:nth-child(2){animation-delay:.05s}.plan-opt:nth-child(3){animation-delay:.1s}.plan-opt:nth-child(4){animation-delay:.15s}
@keyframes planIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.plan-opt:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--orange) 45%,var(--line));
  box-shadow:0 10px 26px color-mix(in srgb,var(--orange) 16%,transparent);}
.plan-opt.feat{border-color:color-mix(in srgb,var(--orange) 55%,var(--line));
  background:linear-gradient(150deg,color-mix(in srgb,var(--orange) 10%,var(--surface-2)),var(--surface-2));}
.plan-opt b{font-weight:700;font-size:1rem;}
.plan-price{font-family:var(--font-display);font-weight:800;font-size:1.5rem;line-height:1.1;color:var(--orange);letter-spacing:-.02em;}
.plan-price small{font-family:var(--font-mono);font-size:.6rem;font-weight:600;color:var(--text-soft);letter-spacing:0;}
.plan-note{font-family:var(--font-mono);font-size:.62rem;color:var(--text-soft);}
.plan-rib{position:absolute;top:10px;right:10px;font-family:var(--font-mono);font-size:.54rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;padding:3px 7px;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--orange),var(--orange-deep));}
.plan-go{position:absolute;bottom:12px;right:12px;opacity:0;transform:translateX(-4px);transition:.16s;color:var(--orange);display:inline-flex;}
.plan-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.plan-opt:hover .plan-go{opacity:1;transform:none;}
@media (max-width:460px){.plan-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.plan-opt{animation:none}}

/* ---------- vitrine email wall ---------- */
.lead-back{backdrop-filter:blur(4px);}
.modal.lead-modal{width:min(400px,100%);text-align:center;}
.lead-modal h2{margin:8px 0 6px;}
.lead-modal p{color:var(--text-soft);font-size:.92rem;margin-bottom:16px;}
.lead-input{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);
  color:var(--text);font-size:1rem;margin-bottom:12px;}
.lead-input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 18%,transparent);}
.lead-optin{display:flex;align-items:flex-start;gap:9px;text-align:left;font-size:.82rem;color:var(--text-soft);
  margin-bottom:14px;line-height:1.4;cursor:pointer;}
.lead-optin input{margin-top:2px;flex:none;accent-color:var(--orange);}
.lead-msg{font-size:.82rem;color:var(--danger,#c0392b);min-height:1em;margin-top:8px;}

/* Immersive chat: on a phone the conversation gets the whole screen. The tab
   bar goes, the back arrow in the top bar replaces it, and the write field
   drops to the bottom edge since nothing sits under it any more. A desktop is
   untouched — it has the sidebar, which is a better way back than an arrow. */
.app.immersive{grid-template-columns:1fr;}
.app.immersive .sidebar,.app.immersive .mobile-nav{display:none;}
.app.immersive .topbar .icon-btn:not(.top-back){display:none;}
.top-back{display:none;align-items:center;gap:7px;width:auto;padding:0 13px;flex:none;}
.app.immersive .top-back{display:flex;}
.top-back::after{content:"Zurück";font-size:.88rem;font-weight:700;}
@media (max-width:860px){
  .app.immersive .content{padding-bottom:16px;}
  .app.immersive .chat-bar{bottom:calc(6px + env(safe-area-inset-bottom));}
}

/* KI-Chat */
/* Two columns on a desktop: conversations beside the chat. On a phone the
   column is gone and the same list opens as a modal from the header button —
   there the width belongs to the conversation. */
.chat-view{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;min-height:0;}
/* flex:1 is what gives the chat its height. A grid item stretches on its own,
   so the desktop looked right without it, but on a phone .chat-view is a flex
   column and the whole chat collapsed to the height of its own content —
   greeting, field and all, stacked against the top edge. */
/* A generator wears the chat shell but has no conversation list, so it must not
   keep the 250px column the list lived in — without this the whole generator is
   squeezed into that column and the right two thirds of the page stay empty. */
.gen-chat{grid-template-columns:minmax(0,1fr);}
.chat-main{display:flex;flex-direction:column;flex:1;min-height:0;}
.chat-side{display:flex;flex-direction:column;gap:12px;min-height:0;padding-right:18px;
  border-right:1px solid var(--line);}
.chat-side .btn.block{justify-content:center;font-size:.88rem;padding:11px 14px;}
.chat-side .btn.block svg{width:16px;height:16px;margin-right:7px;vertical-align:-3px;}
.chat-side-list{flex:1;min-height:0;overflow-y:auto;}
.chat-side-list .thr-list{gap:5px;margin:0;}
.chat-side-list .thr{border:none;background:none;border-radius:10px;}
.chat-side-list .thr:hover{background:var(--surface-2);}
.chat-side-list .thr.on{background:rgba(var(--glow),.12);border:none;}
.chat-side-list .thr-open{padding:9px 10px;}
.chat-side-list .thr-open b{font-size:.86rem;font-weight:600;}
.chat-side-list .thr-open span{font-size:.68rem;}
.chat-side-list .thr-del{width:34px;border-left:none;opacity:0;transition:opacity .15s;}
.chat-side-list .thr:hover .thr-del{opacity:1;}
.chat-side-list .thr-empty{font-size:.82rem;margin:4px 2px;}
@media (max-width:860px){
  .chat-view{display:flex;flex-direction:column;}
  .chat-side{display:none;}
}
.chat-log{flex:1;min-height:340px;display:flex;flex-direction:column;gap:10px;
  padding:16px 2px;overflow-y:auto;margin-top:14px;}
/* The chat is the one view that should NOT grow the page: the log scrolls inside
   itself so the write field stays where the member left it. :has is the whole
   mechanism; a browser without it keeps the old page-scroll layout above, which
   works, so there is no fallback to write.
   ponytail: viewport-height chat, only for the chat route. */
.content:has(.chat-view){display:flex;flex-direction:column;min-height:0;}
.content:has(.chat-view) .chat-view{flex:1;min-height:0;}
.content:has(.chat-view) .chat-log{min-height:0;}
.cmsg{position:relative;max-width:82%;padding:11px 14px;border-radius:16px;line-height:1.45;
  white-space:pre-wrap;word-wrap:break-word;font-size:15px;}
.cmsg.ai{align-self:flex-start;background:var(--surface);border:1px solid var(--line);
  color:var(--text);border-bottom-left-radius:5px;}
.cmsg.me{align-self:flex-end;background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  color:#fff;border-bottom-right-radius:5px;}
/* three breathing dots instead of a static "…": the member has to see that the
   answer is coming, not that the app froze */
.cmsg.typing{display:flex;align-items:center;gap:5px;padding:15px 14px;}
.cmsg.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-faint);
  animation:cdot 1.1s ease-in-out infinite;}
.cmsg.typing i:nth-child(2){animation-delay:.18s}
.cmsg.typing i:nth-child(3){animation-delay:.36s}
@keyframes cdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
/* the AI bubble is rendered Markdown (see md() in app.js), so it carries real
   block elements: pre-wrap would keep the source newlines on top of them and
   double every gap. The member's own bubble stays plain text and keeps it. */
.cmsg.ai{white-space:normal;}
.cmsg.ai>*+*{margin-top:.6em;}
.cmsg.ai ul,.cmsg.ai ol{padding-left:1.15em;}
.cmsg.ai li+li{margin-top:.25em;}
.cmsg.ai strong{font-weight:700;}
/* Image generator reuses the chat shell (renderImage): the prompt is a user
   bubble, the picture comes back as an answer bubble. An answer that holds a
   picture gets more room and lets the image fill it edge to edge. */
.cmsg-note{color:var(--text-soft);font-size:14px;}
.gen-chat .cmsg.ai{max-width:min(94%,440px);}
.gen-chat .cmsg.ai:has(.img-card){padding:6px;}
.gen-chat .img-card{display:flex;flex-direction:column;gap:8px;}
.gen-chat .img-card img{width:100%;height:auto;display:block;border-radius:12px;}
.gen-chat .img-card .btn{width:100%;}
.cmsg.ai code{font-family:var(--font-mono,monospace);font-size:.86em;padding:.1em .35em;
  border-radius:5px;background:color-mix(in srgb,var(--text) 9%,transparent);}
/* copy sits inside the bubble, top right, and only shows on hover on a pointer
   device; a touch screen has no hover, so there it is always visible */
.cmsg-copy{position:absolute;top:5px;right:5px;width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;color:var(--text-faint);background:var(--surface-2);
  border:1px solid var(--line);opacity:0;transition:opacity .15s,color .15s;}
.cmsg-copy svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.cmsg:has(.cmsg-copy){padding-right:42px;}
.cmsg:hover .cmsg-copy,.cmsg-copy:focus-visible{opacity:1;}
.cmsg-copy:hover{color:var(--text);}
.cmsg-copy.done{opacity:1;color:var(--good);border-color:var(--good);}
@media (hover:none){.cmsg-copy{opacity:.75;}}
.chat-bar{position:sticky;bottom:0;display:flex;gap:9px;align-items:flex-end;
  padding:12px 0 6px;background:color-mix(in srgb,var(--bg) 90%,transparent);}
.chat-bar textarea{flex:1;resize:none;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:12px 14px;color:var(--text);font:inherit;font-size:15px;
  max-height:140px;line-height:1.4;}
.chat-bar textarea:focus{outline:none;border-color:color-mix(in srgb,var(--brand) 45%,var(--line));}
.chat-view.empty .chat-bar:focus-within{border-color:color-mix(in srgb,var(--brand) 40%,var(--line));}
.chat-bar .btn{flex:none;width:46px;height:46px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:13px;}
.chat-bar .btn svg{width:20px;height:20px;}
.chat-cap{text-align:center;font-size:12px;color:var(--text-faint);padding:4px 0 8px;min-height:16px;}
.chat-bar-model{flex:none;max-width:170px;border:0;background:transparent;color:var(--text-soft);font:inherit;font-size:.82rem;padding:9px 4px;outline:0;}
.chat-bar-model option{background:var(--surface);color:var(--text);}

/* ---- empty chat: the question in the middle of the screen, field under it ----
   Only while the thread has no message. The switch is .empty on .chat-view, and
   everything below is scoped to it, so a conversation is untouched. */
.chat-hero{display:none;}
.chat-view.empty .chat-hero{display:flex;flex:1;flex-direction:column;justify-content:flex-end;
  align-items:center;text-align:center;gap:10px;padding:0 16px 26px;}
.chat-hero .hero-mark{width:42px;height:42px;object-fit:contain;margin-bottom:2px;}
.chat-hero .hero-emo{font-size:2rem;line-height:1;}
.chat-view.empty .chat-hero h1{font-family:var(--font-display);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.6rem,1.1rem + 2.4vw,2.5rem);line-height:1.15;text-wrap:balance;}
.chat-view.empty .chat-hero p{color:var(--text-soft);font-size:.95rem;max-width:46ch;}
.chat-view.empty .chat-log{display:none;}
/* the credit line takes the rest of the height, which is what keeps the
   headline + field centred instead of sitting at the bottom edge */
.chat-view.empty .chat-cap{flex:1;padding-top:12px;}
/* the glow behind it, in the selected model's own colour (--brand, written by
   renderChat from config). Fixed to the viewport, under everything, and gone
   the moment the first message lands. */
.chat-view{--brand:var(--orange);}
.chat-view.empty::before{content:"";position:fixed;left:50%;top:46%;translate:-50% -50%;
  width:min(1100px,120vw);aspect-ratio:1.6;z-index:-1;pointer-events:none;transition:background .35s;
  background:radial-gradient(closest-side,
    color-mix(in srgb,var(--brand) 22%,transparent),
    color-mix(in srgb,var(--brand) 8%,transparent) 55%,transparent 78%);}
/* the field becomes one pill, centred, with the model picker inside it */
.chat-view.empty .chat-bar{position:static;width:100%;max-width:740px;margin:0 auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);
  padding:7px 7px 7px 8px;gap:6px;box-shadow:var(--e2);}
.chat-view.empty .chat-bar textarea{border:none;background:none;padding:12px 10px;}
.chat-view.empty .chat-bar textarea:focus{border:none;}
.chat-view.empty .chat-bar .btn{width:40px;height:40px;border-radius:var(--r-pill);}
/* On a phone the field belongs at the bottom edge, where the thumb is and
   where the keyboard pushes it anyway — the greeting takes the space above it.
   Desktop centres the pair instead, because there the field would otherwise sit
   a screen away from the question it answers. */
@media (max-width:860px){
  .chat-view.empty .chat-hero{flex:1;justify-content:center;padding-bottom:8px;}
  .chat-view.empty .chat-cap{flex:none;}
  .chat-view.empty .chat-bar{position:sticky;max-width:none;}
  /* the glow rises from the bottom of the screen, behind the field, instead of
     sitting behind the headline the way the wide layout wants it */
  .chat-view.empty::before{top:auto;bottom:0;translate:-50% 0;width:170vw;aspect-ratio:1.15;
    background:radial-gradient(closest-side,
      color-mix(in srgb,var(--brand) 28%,transparent),
      color-mix(in srgb,var(--brand) 10%,transparent) 52%,transparent 76%);}
}
/* starter chips: an opening move, not a toolbar, so they leave with the rest of
   the empty screen the moment a message exists */
.chat-sugg{display:none;}
.chat-view.empty .chat-sugg{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:14px 4px 0;}
.sugg{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);color:var(--text-soft);
  font-size:.84rem;font-weight:600;transition:border-color .15s,color .15s,transform .12s;}
.sugg:hover{color:var(--text);border-color:color-mix(in srgb,var(--brand) 45%,var(--line));}
.sugg:active{transform:scale(.97);}
.sugg svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* wide screen: under the field, where the reference puts them. flex order, so
   the DOM keeps one sensible reading order — greeting, chips, conversation. */
@media (min-width:861px){
  .chat-view.empty .chat-sugg{order:5;}
  .chat-view.empty .chat-cap{order:6;}
}
/* phone: a left-aligned list above the field, one per line */
@media (max-width:860px){
  .chat-view.empty .chat-sugg{flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:2px;padding:0 2px 10px;}
  .sugg{justify-content:flex-start;border:none;background:none;padding:12px 6px;
    font-size:.98rem;font-weight:500;color:var(--text);}
  .sugg svg{width:19px;height:19px;margin-right:5px;color:var(--text-soft);}
  /* with chips to show, the greeting stops owning the middle of the screen */
  .chat-view.empty:has(.sugg) .chat-hero{justify-content:flex-end;padding-bottom:22px;}
}

/* The ChatGPT reference has no glow and, on a phone, no greeting either: chips
   and the field on flat black. Copying a layout means copying what it leaves
   out. */
.chat-view[data-layout="chatgpt"].empty::before{display:none;}
@media (max-width:860px){
  .chat-view[data-layout="chatgpt"].empty .chat-hero{display:none;}
  /* the greeting was also the spacer that held everything down. With it gone,
     the chips take over that job — margin-top:auto pushes them and the field
     to the bottom edge instead of leaving both stacked at the top. */
  .chat-view[data-layout="chatgpt"].empty .chat-sugg{margin-top:auto;gap:6px;padding-bottom:14px;}
  /* the reference sets these in the system UI face at a normal weight, not in
     our display font: light line icons, roomy rows, nothing bold */
  .chat-view[data-layout="chatgpt"] .sugg{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    font-weight:400;font-size:1.06rem;letter-spacing:0;gap:14px;padding:11px 4px;color:var(--text);}
  .chat-view[data-layout="chatgpt"] .sugg svg{width:22px;height:22px;stroke-width:1.6;
    margin-right:0;color:var(--text);opacity:.92;}
  /* and the field is an outline pill on the page itself, not a filled card */
  .chat-view[data-layout="chatgpt"].empty .chat-bar{background:none;box-shadow:none;
    border-color:color-mix(in srgb,var(--text) 26%,transparent);padding:5px 5px 5px 16px;}
  .chat-view[data-layout="chatgpt"].empty .chat-bar textarea{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    font-size:1.02rem;padding:11px 8px;}
  .chat-view[data-layout="chatgpt"].empty .chat-bar .btn{width:38px;height:38px;background:var(--brand);}
}

.chat-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 8px;}
.chat-model{display:flex;align-items:center;gap:9px;min-width:0;}
.chat-model img{width:26px;height:26px;object-fit:contain;border-radius:6px;flex:none;}
.chat-model img.brand-crop,.hero-mark.brand-crop{object-fit:cover;object-position:center;}
.tool-brand{display:flex;align-items:center;gap:10px;margin:2px 0 18px;font-family:var(--font-display,inherit);font-size:17px;font-weight:800;letter-spacing:-.02em;}
.tool-brand img{width:30px;height:30px;object-fit:contain;border-radius:7px;}
.tool-brand img.brand-crop{object-fit:cover;object-position:center;}
.seo-report{grid-column:1/-1;width:100%;margin-top:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--e1);overflow:hidden;}
.seo-report-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 22px;border-bottom:1px solid var(--line);}
.seo-report-head span{display:block;color:var(--text-faint);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.seo-report-head h2{margin:3px 0 0;font-family:var(--font-display);font-size:1.35rem;letter-spacing:-.03em;overflow-wrap:anywhere;}
.seo-report-head p{margin:6px 0 0;color:var(--text-soft);font-size:.82rem;}
.seo-report-head .seo-live{color:var(--good);background:color-mix(in srgb,var(--good) 10%,transparent);padding:5px 8px;border-radius:var(--r-pill);letter-spacing:.04em;}
.seo-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}
.seo-group{min-width:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}.seo-group:nth-child(2n){border-right:0;}.seo-group:nth-last-child(-n+2){border-bottom:0;}
.seo-group:last-child:nth-child(odd){grid-column:1/-1;border-right:0;}
.seo-group-head{padding:17px 22px 13px;background:color-mix(in srgb,var(--surface-2) 42%,transparent);border-bottom:1px solid var(--line);}.seo-group-head h3{margin:0;font-family:var(--font-display);font-size:1rem;letter-spacing:-.02em;}.seo-group-head p{margin:3px 0 0;color:var(--text-soft);font-size:.76rem;}
.seo-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.seo-metric{padding:19px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0;}
.seo-metric:nth-child(3n){border-right:none;}.seo-metric:nth-last-child(-n+3){border-bottom:none;}.seo-group .seo-metric:only-child{grid-column:1/-1;}
.seo-metric span{display:block;color:var(--text-soft);font-size:.78rem;line-height:1.3;}.seo-metric b{display:block;margin-top:6px;font-family:var(--font-display);font-size:1.55rem;letter-spacing:-.04em;overflow-wrap:anywhere;}
.seo-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));}.seo-detail{min-width:0;padding:20px 22px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);}.seo-detail:nth-child(2n){border-right:0;}.seo-detail:last-child:nth-child(odd){grid-column:1/-1;border-right:0;}.seo-detail h3{margin:0 0 15px;font-family:var(--font-display);font-size:1rem;letter-spacing:-.02em;}.seo-detail-head,.seo-detail-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:9px 0;border-top:1px solid var(--line);font-size:.78rem;}.seo-detail-head{color:var(--text-soft);font-weight:650;}.seo-detail-row{color:var(--text);}.seo-detail-head.two,.seo-detail .seo-detail-row:has(span:nth-child(2):last-child){grid-template-columns:2fr 1fr;}.seo-detail-head.four,.seo-detail:has(.seo-detail-head.four) .seo-detail-row{grid-template-columns:1.45fr .75fr 1fr 1fr;}.seo-detail-row span{overflow-wrap:anywhere;}
@media (max-width:620px){.seo-groups,.seo-details{grid-template-columns:1fr;}.seo-group,.seo-detail{border-right:0;}.seo-group:nth-last-child(-n+2){border-bottom:1px solid var(--line);}.seo-group:last-child,.seo-detail:last-child{border-bottom:0;}.seo-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}.seo-metric:nth-child(3n){border-right:1px solid var(--line);}.seo-metric:nth-child(2n){border-right:none;}.seo-metric:nth-last-child(-n+3){border-bottom:1px solid var(--line);}.seo-metric:nth-last-child(-n+2){border-bottom:none;}.seo-report-head{padding:17px;}.seo-group-head,.seo-metric,.seo-detail{padding:16px;}.seo-detail:last-child:nth-child(odd){grid-column:auto;}}
.gen-brand{display:flex;align-items:center;gap:10px;margin:2px 0 18px;font-family:var(--font-display,inherit);font-size:17px;font-weight:800;letter-spacing:-.02em;}
.gen-brand img{width:28px;height:28px;object-fit:contain;border-radius:7px;}
.chat-model b{font-family:var(--font-display,inherit);font-size:17px;font-weight:800;letter-spacing:-.02em;}
.chat-sel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 30px 8px 11px;color:var(--text);font:inherit;font-size:14px;max-width:58%;min-width:0;flex:none;width:auto;cursor:pointer;
  -webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;}
.chat-sel:focus{outline:none;border-color:color-mix(in srgb,var(--orange) 45%,var(--line));}
/* thread controls sit next to the model picker; the select gives up width on
   mobile so the two buttons never push it off the row */
.chat-acts{display:flex;align-items:center;gap:7px;min-width:0;}
.chat-acts .icon-btn{flex:none;width:36px;height:36px;padding:0;justify-content:center;}
.chat-acts .icon-btn svg{width:18px;height:18px;}
@media (max-width:560px){.chat-sel{max-width:46vw;font-size:13px;padding:8px 26px 8px 9px;text-overflow:ellipsis;}}
/* thread picker */
.thr-modal{text-align:left;}
.thr-empty{color:var(--text-soft);font-size:.92rem;margin:6px 0 16px;}
.thr-list{display:flex;flex-direction:column;gap:7px;margin:6px 0 16px;max-height:52vh;overflow-y:auto;}
.thr{display:flex;align-items:stretch;gap:6px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;}
.thr.on{border-color:color-mix(in srgb,var(--orange) 55%,var(--line));background:color-mix(in srgb,var(--orange) 7%,var(--surface));}
.thr-open{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  background:none;border:none;padding:11px 12px;cursor:pointer;font:inherit;color:var(--text);}
.thr-open b{font-size:.93rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.thr-open span{font-size:.74rem;color:var(--text-soft);}
.thr-del{flex:none;width:42px;border:none;border-left:1px solid var(--line);background:none;color:var(--text-soft);cursor:pointer;}
.thr-del svg{width:16px;height:16px;}
.thr-del:hover{color:#e5484d;background:color-mix(in srgb,#e5484d 9%,transparent);}
.thr-modal .btn.block svg{width:17px;height:17px;margin-right:7px;vertical-align:-3px;}
/* Bild-KI */
.img-form{display:flex;flex-direction:column;gap:10px;margin:4px 0 18px;}
.img-form textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:13px 14px;
  color:var(--text);font:inherit;font-size:15px;line-height:1.45;resize:vertical;min-height:84px;}
.img-form textarea:focus{outline:none;border-color:color-mix(in srgb,var(--orange) 45%,var(--line));}
.img-cost{font-family:var(--font-mono,monospace);font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 8px;border-radius:999px;background:rgba(255,255,255,.22);margin-left:9px;}
.img-note{font-size:.84rem;color:var(--text-soft);min-height:1.2em;}
.img-out{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;}
.img-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;gap:0;}
.img-card img{width:100%;height:auto;display:block;background:var(--surface-2,var(--surface));}
.img-card .btn.block{border-radius:0;}
@media (max-width:560px){.img-out{grid-template-columns:1fr;}}
/* ASK-Werkzeug (Perplexity): die recherchierte Antwort, als lesbarer Fliesstext
   statt einer Datei-Karte. Links in der Antwort erben die Markenfarbe. */
.ask-out{width:100%;}
.ask-answer{width:100%;text-align:left;line-height:1.6;color:var(--text);font-size:.96rem;}
.ask-answer p{margin:0 0 .7em;}
.ask-answer ul,.ask-answer ol{margin:0 0 .7em;padding-left:1.3em;}
.ask-answer li{margin:.25em 0;}
.ask-answer strong{color:var(--text);}
.ask-answer code{background:var(--surface-2,var(--surface));border:1px solid var(--line);border-radius:6px;padding:1px 5px;font-size:.88em;}
/* Bibliothek (Storyblocks): Typ-Tabs, Suchzeile, Ergebnis-Raster mit Vorschau. */
.lib-view{max-width:1120px;}.lib-hero{display:grid;grid-template-columns:minmax(0,1fr) 242px;gap:42px;align-items:stretch;padding:8px 0 26px;border-bottom:1px solid var(--line);}.lib-hero-copy{min-width:0;}.lib-hero .promo-tag{display:inline-flex;margin:16px 0 10px;}.lib-hero .page-h{max-width:650px;font-size:clamp(2.15rem,2rem + 1.85vw,3.35rem);}.lib-hero .page-sub{max-width:590px;font-size:1rem;line-height:1.55;}.lib-cover{position:relative;min-height:306px;overflow:hidden;border:1px solid color-mix(in srgb,var(--orange) 34%,var(--line));border-radius:18px;background:var(--surface);box-shadow:var(--shadow);}.lib-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(12,10,9,.48));pointer-events:none;}.lib-cover img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .45s cubic-bezier(.22,1,.36,1);}.lib-cover:hover img{transform:scale(1.04);}.lib-assurance{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;}.lib-assurance span{padding:6px 9px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.74rem;font-weight:700;color:var(--text-soft);}.lib-assurance span:first-child{color:var(--orange);border-color:color-mix(in srgb,var(--orange) 32%,var(--line));}.lib-discover{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:center;padding:25px 0 22px;}.lib-discover h2{margin:0;font-family:var(--font-display);font-size:1.12rem;letter-spacing:-.02em;}.lib-discover p{margin:6px 0 0;color:var(--text-soft);font-size:.82rem;line-height:1.45;}.lib-starters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;}.lib-starter{min-height:89px;padding:13px;text-align:left;border:1px solid var(--line);border-radius:14px;background:var(--surface);font:inherit;color:var(--text);cursor:pointer;transition:transform .16s,border-color .16s,background .16s;}.lib-starter:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--orange) 48%,var(--line));background:color-mix(in srgb,var(--orange) 5%,var(--surface));}.lib-starter:active{transform:scale(.98);}.lib-starter b{display:block;font-size:.87rem;}.lib-starter span{display:block;margin-top:5px;color:var(--text-soft);font-size:.71rem;line-height:1.35;}.lib-note{display:block;margin:0 0 8px;}.lib-view .lib-results-head{margin-top:20px;}
.lib-view{max-width:1120px;}.lib-hero{display:block;padding:26px 30px 28px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(110deg,color-mix(in srgb,var(--orange) 8%,var(--surface)),var(--surface) 55%);}.lib-hero .promo-tag{margin-top:12px;}.lib-cover{display:none;}.lib-hero .page-h{max-width:730px;}.lib-hero .page-sub{max-width:680px;}.lib-discover{padding-top:28px;}
.lib-showcase{display:grid;grid-template-columns:230px minmax(0,1fr);gap:28px;padding:8px 0 26px;align-items:center;}.lib-showcase-copy span{font-family:var(--font-mono,monospace);font-size:.65rem;letter-spacing:.12em;color:var(--orange);font-weight:700;}.lib-showcase-copy h2{margin:8px 0 6px;font:700 1.3rem/1.08 var(--font-display);letter-spacing:-.04em;}.lib-showcase-copy p{margin:0;color:var(--text-soft);font-size:.82rem;line-height:1.45;}.lib-showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}.lib-showcase-card{min-height:138px;padding:16px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;text-align:left;border:1px solid var(--line);border-radius:16px;color:#fff;font:inherit;cursor:pointer;overflow:hidden;transition:transform .18s,border-color .18s;}.lib-showcase-card:hover{transform:translateY(-3px);border-color:var(--orange);}.lib-showcase-card b{font-size:.94rem;}.lib-showcase-card span{margin-top:5px;font-size:.71rem;opacity:.82;}.tone-a{background:linear-gradient(135deg,#1a2631,#566f85);}.tone-b{background:linear-gradient(135deg,#522f37,#cf7952);}.tone-c{background:linear-gradient(135deg,#29223b,#7669a8);}
.lib-tabs{display:flex;gap:8px;margin:18px 0 12px;flex-wrap:wrap;}
.lib-tab{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:.88rem;font-weight:650;color:var(--text-soft);cursor:pointer;transition:background .16s,border-color .16s,color .16s;}
.lib-tab:hover{border-color:color-mix(in srgb,var(--text) 30%,var(--line));color:var(--text);}.lib-tab.on{background:var(--text);color:var(--bg);border-color:var(--text);}
.lib-search{display:flex;gap:8px;margin-bottom:8px;padding:6px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--e1);}
.lib-search .ask-input{flex:1;min-height:42px;border:0;background:transparent;box-shadow:none;}.lib-search .ask-input:focus{outline:0;}.lib-search .btn{border-radius:11px;}
.lib-results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:23px;color:var(--text-soft);font-size:.84rem;font-weight:650;}
.lib-free{padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--good) 12%,transparent);color:var(--good);font-size:.72rem;font-weight:700;}
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:16px;margin-top:12px;}
.lib-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);display:flex;flex-direction:column;box-shadow:var(--e1);transition:transform .16s,box-shadow .16s,border-color .16s;}
.lib-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--text) 25%,var(--line));box-shadow:var(--e2);}
.lib-thumb{position:relative;aspect-ratio:16/9;background:var(--surface-2,var(--surface));display:flex;align-items:center;justify-content:center;overflow:hidden;}
.lib-thumb img,.lib-thumb video{width:100%;height:100%;object-fit:cover;display:block;}
.lib-thumb audio{width:100%;}
.lib-type{position:absolute;top:9px;left:9px;padding:4px 7px;border-radius:7px;background:rgba(18,15,13,.76);color:#fff;font-size:.67rem;font-weight:750;letter-spacing:.03em;backdrop-filter:blur(8px);}
.lib-meta{padding:13px;display:flex;flex:1;flex-direction:column;gap:10px;}
.lib-title{min-height:2.7em;font-size:.9rem;font-weight:680;color:var(--text);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.lib-facts{display:flex;min-height:18px;gap:6px;flex-wrap:wrap;}.lib-facts span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 6px;border-radius:6px;background:var(--surface-2,var(--bg));color:var(--text-soft);font-size:.68rem;}
.lib-meta .lib-dl{margin-top:auto;}
.btn.sm{padding:8px 12px;font-size:.86rem;}
.btn.sm.block{width:100%;text-align:center;}
@media (max-width:800px){.lib-hero{grid-template-columns:1fr;gap:20px;}.lib-cover{display:none;}.lib-discover{grid-template-columns:1fr;gap:14px;}.lib-starters{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:800px){.lib-showcase{grid-template-columns:1fr;gap:14px;}.lib-showcase-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:560px){.lib-hero{padding-top:0;}.lib-hero .page-h{font-size:2rem;}.lib-search{padding:4px;}.lib-search .btn{padding-inline:13px;}.lib-assurance{gap:6px;}.lib-assurance span{font-size:.66rem;padding:5px 7px;}.lib-starters{gap:8px;}.lib-starter{min-height:77px;padding:11px;}.lib-grid{grid-template-columns:1fr 1fr;gap:10px;}.lib-card{border-radius:13px;}.lib-meta{padding:10px;gap:8px;}.lib-title{font-size:.82rem;}.lib-facts{display:none;}.lib-meta .lib-dl{font-size:.74rem;padding:8px 6px;}.lib-free{font-size:.64rem;padding:4px 6px;}}
@media (max-width:560px){.lib-hero{padding:20px 16px 22px;}.lib-hero .promo-tag{margin-top:6px;}}
/* Mirror-Werkzeuge: der Upload-Bereich. Ein grosses klickbares Feld, das nach
   der Wahl die Vorschau zeigt — dieselbe Optik wie die Bild-Karten. */
.up-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  min-height:150px;padding:20px;border:1.5px dashed var(--line);border-radius:16px;background:var(--surface);
  cursor:pointer;text-align:center;transition:border-color .15s;}
.up-drop:hover{border-color:color-mix(in srgb,var(--orange) 45%,var(--line));}
.up-cta{font-weight:600;color:var(--text-soft);font-size:.92rem;}
.up-prev{max-width:100%;max-height:260px;border-radius:12px;display:block;}
.up-prev[hidden]{display:none;}
.img-card video{width:100%;height:auto;display:block;background:#000;}
.vid-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.9rem;font-weight:600;color:var(--text-soft);}
.vid-pick .chat-sel{max-width:62%;}
/* Transkription */
.file-drop{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;cursor:pointer;
  border:1.5px dashed var(--line);border-radius:16px;padding:22px 16px;background:var(--surface);}
.file-drop:hover{border-color:color-mix(in srgb,var(--orange) 45%,var(--line));}
.file-drop b{font-size:.95rem;font-weight:600;}
.file-drop span{font-size:.78rem;color:var(--text-soft);}
.tr-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface);margin-bottom:14px;}
.tr-card textarea{width:100%;border:none;background:none;color:var(--text);font:inherit;font-size:14.5px;line-height:1.6;
  padding:14px;resize:vertical;display:block;}
.tr-card textarea:focus{outline:none;}
.tr-card .btn.block{border-radius:0;}
/* "Nur am PC": DICloak and cookie tools are shown everywhere, but a phone user
   has to see before tapping that the access needs a computer */
.badge-pc{position:absolute;left:8px;bottom:8px;z-index:3;padding:4px 8px;border-radius:999px;
  background:rgba(23,18,14,.82);color:#fff;font-family:var(--font-mono,monospace);font-size:.58rem;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;backdrop-filter:blur(3px);}
/* "the plan already includes these, over there" — shown next to a paid
   generator, so it must read as information, not as another upsell */
.alt-route{display:flex;flex-direction:column;gap:4px;margin:0 0 16px;padding:13px 15px;
  border:1px solid var(--line);border-left:3px solid var(--orange);border-radius:12px;
  background:color-mix(in srgb,var(--orange) 5%,transparent);}
.alt-route b{font-size:.88rem;font-weight:700;}
.alt-route span{font-size:.8rem;color:var(--text-soft);line-height:1.45;}
.alt-route a{align-self:flex-start;margin-top:3px;font-size:.8rem;font-weight:700;
  color:var(--orange-deep);text-decoration:none;}

/* KI-Studio: one card per model, grouped by modality */
.hub-grp{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:20px 0 8px;}
.hub-grp h2{font-size:.95rem;font-weight:700;letter-spacing:-.01em;}
.hub-grp span{font-family:var(--font-mono,monospace);font-size:.62rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text-soft);}
.hub-ic img{width:22px;height:22px;object-fit:contain;border-radius:5px;}
.hub-emo{font-size:1.1rem;line-height:1;}

/* The art is 171x256. A card wider than that upscales it, which is exactly how
   a 1200px desktop ended up with five enormous, soft posters per row. The track
   is therefore capped at the art's own width and the row fills from the left. */
.hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,171px));
  justify-content:start;gap:11px;margin:6px 0 18px;}
/* poster card, same 171x256 art as the catalogue tile. The text sits on a scrim
   over the image; with no poster the card falls back to the icon tile. */
.hub-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:flex-start;gap:3px;text-align:left;cursor:pointer;overflow:hidden;
  aspect-ratio:948/2016;border:1px solid var(--line);border-radius:16px;background:var(--surface-2);
  padding:13px;font:inherit;color:var(--text);
  transition:transform .16s,box-shadow .16s,border-color .16s;}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--orange) 45%,var(--line));}
.hub-card:active{transform:scale(.98);}
.hub-card.connecting{transform:translateY(-3px) scale(.98);border-color:var(--orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 16%,transparent),var(--shadow);}
.hub-card.connecting::before{content:"";position:absolute;inset:0;z-index:4;background:rgba(17,13,10,.52);animation:card-connect 1s ease-in-out infinite;}
@keyframes card-connect{50%{background:rgba(255,90,31,.20)}}
.tool-connect{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:27px;overflow:hidden;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--orange) 13%,transparent),transparent 31%),var(--bg);text-align:center;}.tool-connect-stage{position:relative;display:grid;place-items:center;width:148px;height:148px;}.tool-connect-ring{position:absolute;border:1px solid color-mix(in srgb,var(--orange) 44%,transparent);border-radius:50%;}.tool-connect-ring.ring-a{width:104px;height:104px;box-shadow:0 0 40px color-mix(in srgb,var(--orange) 14%,transparent);animation:tool-connect-orbit 1.35s linear infinite;}.tool-connect-ring.ring-a::after{content:"";position:absolute;left:50%;top:-3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--orange);box-shadow:0 0 12px var(--orange);}.tool-connect-ring.ring-b{width:142px;height:142px;border-color:color-mix(in srgb,var(--text) 13%,transparent);animation:tool-connect-breathe 1.35s ease-out infinite;}.tool-connect-scan{position:absolute;width:144px;height:72px;top:2px;overflow:hidden;border-radius:144px 144px 0 0;transform-origin:bottom center;animation:tool-connect-scan 1.35s linear infinite;}.tool-connect-scan::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:72px;background:linear-gradient(transparent,var(--orange));box-shadow:0 0 10px var(--orange);}.tool-connect-mark{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:21px;color:var(--orange);background:color-mix(in srgb,var(--orange) 13%,var(--surface));border:1px solid color-mix(in srgb,var(--orange) 48%,transparent);box-shadow:0 12px 35px color-mix(in srgb,var(--orange) 18%,transparent),inset 0 1px rgba(255,255,255,.08);animation:tool-connect-core 1.35s ease-in-out infinite;}.tool-connect-mark svg{width:32px;height:32px;}.tool-connect-signal{position:absolute;bottom:3px;display:flex;align-items:end;gap:3px;height:15px;}.tool-connect-signal i{display:block;width:3px;border-radius:4px;background:var(--orange);box-shadow:0 0 9px color-mix(in srgb,var(--orange) 75%,transparent);animation:tool-connect-bars .7s ease-in-out infinite alternate;}.tool-connect-signal i:nth-child(1){height:5px}.tool-connect-signal i:nth-child(2){height:10px;animation-delay:.16s}.tool-connect-signal i:nth-child(3){height:7px;animation-delay:.32s}.tool-connect-copy em{display:block;margin-bottom:8px;color:var(--orange);font-family:var(--font-mono,monospace);font-size:.58rem;font-style:normal;font-weight:700;letter-spacing:.16em;}.tool-connect-copy b{display:block;font-family:var(--font-display);font-size:clamp(1.1rem,3vw,1.35rem);letter-spacing:-.025em;}.tool-connect-copy span{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:9px;font-family:var(--font-mono,monospace);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--text-soft);}.tool-connect-copy span i{width:4px;height:4px;border-radius:50%;background:var(--orange);animation:studio-dot .85s ease-in-out infinite;}.tool-connect-copy span i:nth-child(2){animation-delay:.12s}.tool-connect-copy span i:nth-child(3){animation-delay:.24s}@keyframes tool-connect-orbit{to{transform:rotate(360deg)}}@keyframes tool-connect-breathe{0%{transform:scale(.82);opacity:.85}100%{transform:scale(1.04);opacity:0}}@keyframes tool-connect-scan{to{transform:rotate(360deg)}}@keyframes tool-connect-core{50%{transform:scale(1.07);box-shadow:0 12px 45px color-mix(in srgb,var(--orange) 32%,transparent),inset 0 1px rgba(255,255,255,.1)}}@keyframes tool-connect-bars{to{transform:scaleY(.45);opacity:.55}}
.studio-enter{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:rgba(11,9,8,.95);backdrop-filter:blur(5px);opacity:0;pointer-events:none;transition:opacity .2s ease-out;}
.studio-enter.on{opacity:1;}.studio-enter-card{width:min(132px,32vw);aspect-ratio:948/2016;overflow:hidden;border-radius:17px;background:var(--surface);border:1px solid color-mix(in srgb,var(--orange) 42%,var(--line));box-shadow:0 24px 70px rgba(0,0,0,.28);transform:scale(.8) translateY(12px);transition:transform .32s cubic-bezier(.22,1,.36,1);}
.studio-enter.on .studio-enter-card{transform:scale(1) translateY(0);}.studio-enter-card img{width:100%;height:100%;object-fit:cover;display:block;}.studio-enter-mark{display:grid;place-items:center;width:100%;height:100%;color:var(--orange);}.studio-enter-mark svg{width:34px;height:34px;}.studio-enter-copy{text-align:center;opacity:0;transform:translateY(4px);transition:opacity .18s .14s,transform .18s .14s;}.studio-enter.on .studio-enter-copy{opacity:1;transform:none;}.studio-enter-copy b{display:block;font-size:.92rem;letter-spacing:-.01em;}.studio-enter-copy span{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:7px;font-family:var(--font-mono,monospace);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);}.studio-enter-copy i{width:4px;height:4px;border-radius:50%;background:var(--orange);animation:studio-dot .85s ease-in-out infinite;}.studio-enter-copy i:nth-child(2){animation-delay:.12s}.studio-enter-copy i:nth-child(3){animation-delay:.24s}@keyframes studio-dot{50%{transform:translateY(-4px);opacity:.45}}@media (prefers-reduced-motion:reduce){.studio-enter,.tool-connect{animation:none;}}
.tool-connect-ring.ring-a,.tool-connect-ring.ring-b,.tool-connect-scan,.tool-connect-mark{animation-duration:3.4s;}.tool-connect-signal i{animation-duration:1.35s;}
.tool-connect-success{position:absolute;z-index:3;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#fff;background:#1e9e5a;border:2px solid color-mix(in srgb,#fff 72%,transparent);box-shadow:0 0 0 9px rgba(30,158,90,.14),0 12px 28px rgba(0,0,0,.22);opacity:0;transform:scale(.35);transition:opacity .24s ease,transform .34s cubic-bezier(.2,1.4,.4,1);}.tool-connect-success svg,.tool-connect-ready svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round;}.tool-connect-ready{display:none!important;color:#42c979!important;font-weight:700;}.tool-connect-ready svg{width:15px;height:15px;}.tool-connect.is-connected .tool-connect-success{opacity:1;transform:scale(1);}.tool-connect.is-connected .tool-connect-mark,.tool-connect.is-connected .tool-connect-ring,.tool-connect.is-connected .tool-connect-scan,.tool-connect.is-connected .tool-connect-signal{opacity:0;transition:opacity .18s ease;}.tool-connect.is-connected .tool-connect-live{display:none;}.tool-connect.is-connected .tool-connect-ready{display:flex!important;animation:tool-connect-ready .34s ease both;}@keyframes tool-connect-ready{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
/* The card carries the drawn card WHOLE: badges, logo and name, nothing cut.
   That only holds while .hub-card's aspect-ratio equals the art's 948x2016 —
   any other ratio and cover starts trimming an edge again. */
.hub-card .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hub-card::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(23,18,14,.10),transparent 30%,rgba(23,18,14,.72) 72%,rgba(23,18,14,.92));}
.hub-card.noposter::after{background:none;}
.hub-txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;}
.hub-card .poster~.hub-tile{display:none;} /* the art already carries the mark */
.hub-tile{position:relative;z-index:1;margin-bottom:auto;}
.hub-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:11px;
  color:var(--orange);background:color-mix(in srgb,var(--orange) 12%,transparent);}
.hub-ic svg{width:19px;height:19px;}
.hub-card b{font-size:.88rem;font-weight:700;line-height:1.2;}
.hub-sub{font-size:.72rem;color:var(--text-soft);line-height:1.3;}
.hub-cost{margin-top:5px;font-family:var(--font-mono,monospace);font-size:.58rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--orange);}
/* With real art the card shows the art and the price, nothing else: the poster
   already carries the brand, so the title under it was the same word twice.
   The price chip STAYS — a member must know what a tap costs before they make
   it, which is the one thing the picture cannot say. Cards with no poster keep
   their text, or they would be blank tiles. */
.hub-card:not(.noposter) b,.hub-card:not(.noposter) .hub-sub{display:none;}
/* over the art the scrim is dark in both themes, so the type must be light */
.hub-card:not(.noposter) b{color:#fff;}
.hub-card:not(.noposter) .hub-sub{color:rgba(255,255,255,.76);}
.hub-card:not(.noposter) .hub-cost{color:#fff;}
.hub-all{display:block;text-align:center;padding:13px;border:1px solid var(--line);border-radius:14px;
  text-decoration:none;color:var(--text);font-weight:600;font-size:.9rem;}
/* phones are narrower than two 171px tracks, so there the cards keep filling
   the row instead of leaving a gap on the right */
@media (max-width:400px){.hub{grid-template-columns:1fr 1fr;}}

/* ---------- generator workbench (Video-KI, Bild-KI) ----------
   Ask on the left, result on the right. Single column under 980px, where a
   second column would leave neither side usable. */
.gen{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:18px;align-items:start;margin-top:14px;}
.gen-form,.gen-out{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:18px;}
.gen-form{display:flex;flex-direction:column;gap:10px;}
.gen-h{display:flex;align-items:center;gap:8px;font-family:var(--font-mono,monospace);font-size:.64rem;
  font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-soft);margin:2px 0;}
.gen-h i{width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none;}
.gen-form textarea{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-ctl);
  padding:13px 14px;color:var(--text);font:inherit;font-size:15px;line-height:1.45;resize:vertical;min-height:110px;}
.gen-form textarea:focus{outline:none;border-color:color-mix(in srgb,var(--orange) 45%,var(--line));}
.gen-sel{max-width:none;width:100%;background:var(--surface-2);}
/* facts about the job, never controls: the backend takes a prompt and nothing else */
.gen-specs{display:flex;flex-wrap:wrap;gap:6px;}
.gen-specs span{font-family:var(--font-mono,monospace);font-size:.62rem;font-weight:700;letter-spacing:.05em;
  padding:5px 9px;border-radius:var(--r-pill);border:1px solid var(--line);color:var(--text-soft);}
.gen-specs .cost{color:var(--orange-deep);border-color:color-mix(in srgb,var(--orange) 45%,var(--line));}
.gen-outhead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;}
.gen-outhead span{font-family:var(--font-mono,monospace);font-size:.6rem;letter-spacing:.06em;color:var(--text-faint);}
.gen-stage{position:relative;min-height:280px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-ctl);background:var(--surface-2);padding:14px;}
.gen-stage .img-out{width:100%;}
.gen-hist{margin-top:18px;border-top:1px solid var(--line);padding-top:14px;}
.hist-p{padding:9px 11px;font-size:.8rem;line-height:1.35;color:var(--text-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.gen-idle{display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--text-faint);font-size:.86rem;}
.gen-idle svg{width:30px;height:30px;stroke:currentColor;fill:none;}
.gen-stage.busy .gen-idle,.gen-stage.busy .img-out{display:none;}
@media (max-width:980px){
  .gen{grid-template-columns:1fr;}
  .gen-stage{min-height:200px;}
}

/* the wait: the brand mark orbiting, because a page that shows nothing for two
   minutes reads as a page that broke */
.mark-load{display:none;flex-direction:column;align-items:center;gap:14px;}
.gen-stage.busy .mark-load{display:flex;}
.cmsg.ai .mark-load{display:flex;align-items:flex-start;min-width:260px;padding:18px 0 8px;}
.cmsg.ai .mark-load-orb{width:58px;height:58px;}
.cmsg.ai .mark-load-mark{width:34px;height:34px;border-radius:11px;}
.cmsg.ai .mark-load-mark svg{width:19px;height:19px;}
.cmsg.ai .mark-load-ring:nth-child(2){inset:8px;}
.cmsg.ai .mark-load-t{font-family:var(--font-ui);font-size:.88rem;letter-spacing:0;text-transform:none;color:var(--text-soft);}
.mark-load-orb{position:relative;width:96px;height:96px;display:grid;place-items:center;}
.mark-load-mark{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  box-shadow:0 10px 26px -10px rgba(var(--glow),.75);animation:markPulse 1.8s ease-in-out infinite, markGlow 2.4s ease-in-out infinite;}
.mark-load-orb::before{content:"";position:absolute;inset:-8px;border-radius:50%;
  background:radial-gradient(circle,rgba(var(--glow),.35),transparent 70%);
  animation:orbGlow 2.6s ease-in-out infinite;pointer-events:none;}
@keyframes markGlow{0%,100%{box-shadow:0 10px 26px -10px rgba(var(--glow),.4)}50%{box-shadow:0 10px 40px -6px rgba(var(--glow),1)}}
@keyframes orbGlow{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.15)}}
.mark-load-t b{animation:fadeIn .4s ease both;}
@keyframes fadeIn{from{opacity:.4}to{opacity:.65}}
.mark-load-mark svg{width:26px;height:26px;}
.mark-load-ring{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;
  border-top-color:var(--orange);animation:spin 1.5s linear infinite;}
.mark-load-ring:nth-child(2){inset:12px;border-top-color:transparent;border-bottom-color:color-mix(in srgb,var(--orange) 55%,transparent);
  animation-duration:2.1s;animation-direction:reverse;}
.mark-load-t{font-family:var(--font-mono,monospace);font-size:.68rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-soft);}
@keyframes markPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){
  .mark-load-ring,.mark-load-mark{animation:none;}
}

/* ---------- unified AI workspace -----------------------------------------
   Image, video and transcription now share the construction members already
   know from modern AI products: a quiet history rail, one central stream and
   the task controls inside a composer at the bottom. The orange stays an
   action accent instead of becoming the background of the whole experience. */
.content:has(.ai-workspace){max-width:1340px;padding-top:0;padding-bottom:18px;}
.ai-workspace{grid-template-columns:236px minmax(0,1fr);gap:0;min-height:calc(100dvh - 98px);
  border:1px solid var(--line);border-radius:20px;background:var(--surface);overflow:hidden;
  box-shadow:var(--e1);animation:none;}
.ai-workspace.empty::before{display:none;}
.ai-workspace .ai-rail{padding:16px 14px;background:color-mix(in srgb,var(--surface-2) 50%,var(--surface));
  border-right:1px solid var(--line);}
.ai-rail .btn.ghost{justify-content:flex-start;border:1px solid var(--line);background:var(--surface-2);
  color:var(--text);box-shadow:none;
  min-height:48px;
  border-radius:12px;}
.ai-rail .btn.ghost:hover{background:var(--surface-2);border-color:color-mix(in srgb,var(--text) 22%,var(--line));}
.ai-rail-label{display:block;margin:24px 8px 10px;color:var(--text-faint);font-size:.65rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;}
.ai-rail-guide{display:flex;flex-direction:column;gap:2px;margin-top:4px;}
.ai-rail-guide span{padding:8px 9px;border-radius:9px;color:var(--text-soft);font-size:.84rem;}
.ai-workspace .chat-main{min-width:0;background:var(--surface);}
.ai-workspace .chat-head{min-height:58px;margin:0;padding:10px 20px;border-bottom:1px solid var(--line);}
.ai-workspace .chat-model>span:not(.ai-symbol){display:flex;min-width:0;flex-direction:column;line-height:1.2;}
.ai-workspace .chat-model b{font-family:var(--font-ui);font-size:.94rem;font-weight:700;letter-spacing:-.01em;}
.ai-workspace .chat-model small{margin-top:3px;color:var(--text-faint);font-size:.7rem;font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ai-workspace .chat-acts .icon-btn{width:34px;height:34px;border-color:transparent;background:transparent;}
.ai-workspace .chat-acts .icon-btn:hover{border-color:var(--line);background:var(--surface-2);}
.ai-symbol,.ai-hero-symbol{display:grid;place-items:center;flex:none;color:var(--orange);
  background:color-mix(in srgb,var(--orange) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--orange) 22%,var(--line));}
.ai-symbol{width:30px;height:30px;border-radius:9px;}
.ai-symbol svg{width:17px;height:17px;}
.ai-hero-symbol{width:80px;height:54px;border-radius:18px;margin-bottom:8px;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:#FFD9C4;
  border:1px solid rgba(255,161,111,.4);
  background:linear-gradient(125deg,#292A36 10%,#914D36 40%,#272C42 65%,#292A36 90%);
  background-size:300% 100%;
  animation:shimmer 12s ease-in-out infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 35px -18px rgba(var(--glow),.6);}
.ai-hero-symbol svg{width:32px;height:32px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));}
.ai-workspace .chat-hero{width:min(100%,860px);margin:0 auto;}
.ai-workspace.empty .chat-hero{justify-content:center;gap:14px;padding:clamp(20px,3vh,36px) 24px 20px;
  flex:0 0 auto;
  animation:fadeUp .55s ease both;}
.ai-workspace.empty .chat-hero h1{font-family:var(--font-display);font-size:clamp(1.75rem,1.3rem + 1.5vw,2.65rem);
  font-weight:650;letter-spacing:-.045em;
  max-width:30ch;
  line-height:1.14;}
.ai-workspace.empty .chat-hero p{margin:0;max-width:52ch;color:var(--text-soft);font-size:.95rem;line-height:1.65;}
.ai-workspace.empty .chat-hero #inote:empty,.ai-workspace.empty .chat-hero #ivia:empty{display:none;}
.ai-workspace .img-via{font-size:.74rem!important;color:var(--text-faint)!important;}
.ai-workspace .chat-log{width:min(100%,860px);margin:0 auto;padding:26px 24px 14px;gap:16px;}
.ai-workspace .cmsg{max-width:min(84%,680px);border-radius:18px;font-size:.94rem;}
.ai-workspace .cmsg.me{background:var(--surface-2);color:var(--text);border-bottom-right-radius:5px;}
.ai-workspace .cmsg.ai{border:0;background:transparent;padding-left:0;padding-right:0;}
.ai-workspace .cmsg.ai:has(.img-card){width:min(100%,620px);max-width:620px;padding:0;}
.ai-workspace .cmsg.ai .img-card{border-radius:16px;box-shadow:none;}
.ai-workspace .chat-sugg{width:min(100%,820px);margin:0 auto;padding:16px 0 24px;gap:10px;}
.ai-workspace.empty .chat-sugg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.ai-workspace .sugg{justify-content:flex-start;min-height:52px;padding:12px 14px;border-radius:12px;
  background:var(--surface);color:var(--text-soft);text-align:left;font-weight:550;
  font-size:.82rem;
  border:1px solid var(--line);
  transition:transform .2s,border-color .2s,background .2s;}
.ai-workspace .sugg:hover{background:var(--surface-2);color:var(--text);
  transform:translateY(-2px);
  border-color:var(--orange);}
.ai-composer{position:sticky;bottom:0;z-index:5;width:min(calc(100% - 48px),820px);margin:0 auto;
  border:1px solid color-mix(in srgb,var(--text) 22%,var(--line));border-radius:22px;background:var(--surface);
  box-shadow:0 18px 50px -24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.04);}
.ai-workspace .chat-bar,.ai-workspace.empty .chat-bar{display:flex;position:sticky;width:min(calc(100% - 48px),820px);
  margin:0 auto;padding:7px 8px 7px 15px;gap:8px;background:var(--surface);border-radius:24px;
  border:1px solid var(--line);box-shadow:var(--e2);}
.ai-workspace .chat-bar:focus-within,.ai-workspace.empty .chat-bar:focus-within,.ai-composer:focus-within{
  border-color:color-mix(in srgb,var(--orange) 48%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 10%,transparent),0 12px 36px -20px rgba(23,18,14,.36);}
.ai-workspace .chat-bar textarea,.ai-workspace.empty .chat-bar textarea,.ai-composer textarea{min-height:44px;max-height:150px;
  padding:11px 6px;border:0;background:transparent;color:var(--text);font:inherit;font-size:1rem;line-height:1.6;resize:none;}
.ai-workspace .chat-bar textarea:focus,.ai-workspace.empty .chat-bar textarea:focus,.ai-composer textarea:focus{outline:0;border:0;}
.ai-workspace .chat-bar .img-cost{flex:none;align-self:center;margin:0;padding:5px 8px;background:var(--surface-2);
  color:var(--text-faint);font-size:.58rem;letter-spacing:.03em;}
.ai-workspace .chat-bar .btn,.ai-workspace.empty .chat-bar .btn,.ai-composer .btn{flex:none;align-self:flex-end;
  width:40px;height:40px;padding:0;display:grid;place-items:center;border-radius:12px;box-shadow:none;}
.ai-workspace .chat-cap{padding:7px 24px 12px;color:var(--text-faint);font-size:.67rem;}
.ai-workspace.empty .chat-cap{flex:none;order:initial;padding-top:7px;}
.ai-status{display:block;width:min(calc(100% - 48px),820px);margin:7px auto 0;min-height:18px;font-size:.76rem;}
.ai-inline-note{width:min(calc(100% - 48px),820px);margin:4px auto 0;}
.ai-inline-note .alt-route{display:flex;flex-direction:row;align-items:center;gap:8px;margin:0 0 10px;padding:10px 14px;
  border:1px solid var(--line);background:var(--surface);
  border-radius:10px;
  flex-wrap:wrap;}
.ai-inline-note .alt-route b{font-size:.78rem;
  color:var(--text);}.ai-inline-note .alt-route span{font-size:.76rem;}
.ai-inline-note .alt-route a{margin:0 0 0 auto;white-space:nowrap;font-size:.7rem;}
.ai-workspace>.rep{grid-column:2;margin:4px auto 0;width:min(calc(100% - 48px),820px);}

/* Video uses the same stream. The settings are real farm parameters, grouped
   as a fieldset so keyboard and screen-reader users get the same control as a
   pointer user. Four compact columns collapse to two on narrow phones. */
.video-composer{display:flex;flex-direction:column;padding:12px 14px;position:relative;bottom:auto;flex-shrink:0;
  gap:4px;
  animation:fadeUp .6s ease both;border-radius:24px;}
.video-composer textarea{width:100%;
  min-height:48px;
  font-size:1rem;
  line-height:1.65;
  padding:6px 8px;
  max-height:220px;}
.gen-controls{display:flex;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0;padding:0;
  border:0;border-top:1px solid var(--line);border-bottom:0;min-width:0;flex:0 1 auto;}
.gen-controls[hidden]{display:none;}
.gen-controls legend{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.gen-controls label,.gen-fixed{min-width:0;display:flex;flex-direction:column;gap:3px;padding:0 2px;}
.gen-controls label>span,.gen-fixed small{color:var(--text-faint);font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:4px;display:none;}
.gen-controls select,.gen-fixed b{width:auto;min-height:36px;padding:6px 22px 6px 10px;border:0;border-radius:999px;
  background-color:var(--surface-2);color:var(--text);font:inherit;font-size:.76rem;font-weight:650;}
.gen-controls select:focus-visible{outline:2px solid color-mix(in srgb,var(--orange) 60%,transparent);outline-offset:1px;}
.gen-fixed b{display:flex;align-items:center;padding-right:9px;color:var(--text-soft);}
.ai-composer-foot{display:flex;align-items:center;gap:6px;min-width:0;
  flex-wrap:wrap;
  padding-top:0;}
.video-composer .gen-sel{width:auto;max-width:190px;padding:6px 26px 6px 10px;border:0;background-color:var(--surface-2);
  font-size:.76rem;
  min-height:36px;border-radius:999px;}
.video-composer .gen-specs{flex:1;min-width:0;gap:5px;overflow:hidden;
  justify-content:flex-end;}
.video-composer .gen-specs span{padding:4px 6px;background:transparent;font-size:.63rem;white-space:nowrap;
  border:0;}
.video-composer #vgo{margin-left:auto;
  width:40px;
  min-width:40px;
  height:40px;
  padding:0;
  font-size:1.5rem;
  border-radius:50%;
  background:#C64A20;
  color:#fff;
  box-shadow:none;}
.video-name-panel{display:flex;flex-direction:column;gap:7px;margin:14px 0 4px;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg);}
.video-name-panel b{font-size:.78rem;letter-spacing:.02em;}
.video-name-panel input{width:100%;min-height:34px;padding:7px 9px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);font:inherit;font-size:.76rem;}
.video-name-panel .btn{min-height:34px;padding:7px 10px;font-size:.72rem;}
.video-name-panel small{min-height:1em;color:var(--good);font-size:.68rem;}
.video-sugg{display:none!important;}
/* Keep the composer controls on one row at every viewport width. */
.video-composer .ai-composer-foot{display:flex;flex-wrap:nowrap;gap:8px;min-width:0;}
.video-composer .gen-sel{flex:0 1 240px;min-width:0;max-width:100%;width:0;min-height:44px;overflow:hidden;text-overflow:ellipsis;margin-right:auto;}
.video-composer #vsettings,.video-composer #vgo{flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;line-height:1;}
.video-composer #vsettings{font-size:1.2rem;background:var(--surface-2);color:var(--text);border:1px solid var(--line);}
.video-composer #vgo{margin:0;font-size:1.5rem;}
.video-settings{position:fixed;inset:0;margin:auto;width:min(420px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--surface);color:var(--text);box-shadow:var(--e3);}
.video-settings::backdrop{background:rgba(0,0,0,.65);}
.video-settings h2{font-size:1.2rem;line-height:1.3;margin:0 0 22px;}
.video-settings .gen-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;border:0;margin:0 0 18px;}
.video-settings .gen-controls[hidden]{display:none;}
.video-settings .gen-controls label>span{display:block;margin-bottom:6px;color:var(--text-soft);font-size:.8rem;letter-spacing:0;text-transform:none;}
.video-settings .gen-controls select{width:100%;min-width:0;min-height:48px;font-size:1rem;border:1px solid var(--line);border-radius:12px;}
.video-settings .gen-specs{margin:0 0 22px;gap:8px;}
.video-settings .btn{min-height:46px;}
.video-workspace .chat-head{display:none;}
.image-workspace .chat-head{display:none;}
.image-workspace .chat-hero #inote,
.image-workspace .chat-hero .img-via{display:none;}
.image-workspace .chat-hero .hero-mark,
.image-workspace .img-sugg{display:none!important;}
.image-workspace .chat-hero{padding-top:clamp(28px,5vh,58px);}
.image-workspace .chat-side-list{display:none;}
.image-workspace .chat-bar{border-radius:24px;}
.image-workspace .image-composer{display:flex;flex-direction:column;padding:12px 14px;gap:4px;border-radius:24px;}
.image-workspace .image-composer textarea{width:100%;min-height:48px;padding:6px 8px;font-size:1rem;line-height:1.65;}
.image-workspace .image-composer .ai-composer-foot{display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.image-workspace .image-model-wrap{position:relative;display:flex;align-items:center;min-height:36px;min-width:180px;margin-right:auto;padding:0 12px;border-radius:999px;background:var(--surface-2);overflow:hidden;}
.image-workspace .image-model-visible{color:#F5F6F8;font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.image-workspace .image-model-wrap .image-model-select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;}
.image-workspace .image-composer .gen-fixed{margin-right:auto;display:flex;align-items:center;min-height:36px;padding:6px 12px;border-radius:999px;background:var(--surface-2);color:var(--text-soft);font-size:.76rem;}
.image-workspace .image-model-select{color:var(--text)!important;-webkit-text-fill-color:var(--text);background-color:var(--surface-2)!important;color-scheme:dark;appearance:none;-webkit-appearance:none;}
.image-workspace .image-model-select option{color:#F5F6F8!important;background:#22252C!important;}
.image-workspace .image-composer .img-cost{margin-right:0;padding:5px 8px;background:var(--surface-2);color:var(--text-faint);font-size:.58rem;letter-spacing:.03em;}
.image-workspace .image-composer #igo{flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;background:#C64A20;color:#fff;}
.video-workspace .chat-log{justify-content:flex-end;}
.video-workspace .gen-stage{width:100%;min-height:250px;padding:0;border-radius:16px;background:transparent;}
.video-workspace .gen-stage.busy{min-height:300px;border:1px solid var(--line);background:radial-gradient(ellipse at 50% 45%,rgba(var(--glow),.09),transparent 65%),var(--surface);
  border-radius:20px;}
/* Quiet generation placeholder: a field of blue dots, without the brand orb. */
.video-workspace .gen-stage.busy{min-height:0;justify-content:flex-start;border:0;background:none;border-radius:0;padding:12px 0 20px;}
.video-workspace .mark-load{width:min(100%,480px);align-items:flex-start;gap:20px;}
.video-workspace .mark-load-orb{display:none;}
.video-workspace .mark-load-t{font-family:var(--font-ui);font-size:.94rem;font-weight:400;letter-spacing:0;text-transform:none;color:var(--text-soft);}
.video-workspace .mark-load-t b{animation:none;}
.video-workspace .mark-load::after{content:"";display:block;width:100%;height:clamp(140px,24vw,240px);background-image:radial-gradient(circle,#558ED6 1.3px,transparent 1.7px);background-size:14px 14px;mask-image:linear-gradient(115deg,transparent 10%,#000 35%,rgba(0,0,0,.12) 58%,#000 80%,transparent 100%);mask-size:250% 100%;animation:videoDots 4s ease-in-out infinite alternate;}
@keyframes videoDots{from{mask-position:0% 0;opacity:.45;}to{mask-position:100% 0;opacity:.85;}}
@media(prefers-reduced-motion:reduce){.video-workspace .mark-load::after{animation:none;opacity:.6;}}
.video-workspace .gen-stage .img-out{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;}
.video-workspace .gen-stage .img-card:only-child{grid-column:1/-1;}
.video-workspace .gen-stage.has-result .gen-idle{display:none;}
.video-workspace .gen-idle{width:100%;min-height:220px;border:1px dashed var(--line);border-radius:16px;}
.video-workspace .img-card{width:100%;border-radius:16px;}
.video-result{width:100%;min-width:0;}
.video-workspace .gen-stage .video-result:only-child{grid-column:1/-1;}
.video-result-frame{position:relative;border-radius:24px;overflow:hidden;background:#08090b;}
.video-result-frame video{display:block;width:100%;max-height:560px;object-fit:contain;}
.video-result-download{position:absolute;right:14px;bottom:54px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(15,23,30,.85);color:#fff;border:1px solid rgba(255,255,255,.18);}
.video-result-download:disabled{opacity:.5;cursor:wait;}
.video-result-actions{display:flex;align-items:center;gap:2px;padding-top:8px;}
.video-result-action{width:44px;height:44px;display:grid;place-items:center;color:var(--text-soft);border-radius:10px;transition:background .18s,color .18s;}
.video-result-action:hover,.video-result-action[aria-pressed="true"]{color:var(--text);background:var(--surface-2);}
.video-result-action svg,.video-result-download svg{width:20px;height:20px;}
.video-result-status{display:block;color:var(--text-soft);font-size:.78rem;line-height:1.5;}
.video-result-status a{text-decoration:underline;}
.video-workspace .img-card video{max-height:520px;object-fit:contain;}
.video-workspace .variant-label{padding:9px 11px 0;color:var(--text-soft);font-size:.72rem;font-weight:700;}
.video-workspace .ai-rail-history{margin:0;padding:0;border:0;overflow-y:auto;}
.video-workspace .ai-rail-history .img-out{grid-template-columns:1fr;gap:8px;}
.video-workspace .ai-rail-history .img-card{border-radius:10px;}
.video-workspace .ai-rail-history .img-card .btn{font-size:.7rem;padding:7px 8px;}
.video-workspace.empty .chat-log{display:none;}

/* Transcription keeps the native file picker, but it now behaves like an
   attachment composer and the transcript arrives as an answer in the stream. */
.transcribe-composer{display:flex;align-items:center;gap:9px;padding:7px 8px;}
.transcribe-composer .file-drop{flex:1;min-width:0;min-height:48px;display:flex;flex-direction:row;justify-content:flex-start;
  gap:10px;padding:6px 8px;border:0;background:transparent;text-align:left;}
.transcribe-composer .file-ico{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:10px;
  background:var(--surface-2);color:var(--text-soft);}
.transcribe-composer .file-ico svg{width:18px;height:18px;}
.transcribe-composer .file-copy{min-width:0;display:flex;flex-direction:column;line-height:1.25;}
.transcribe-composer .file-copy b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.86rem;}
.transcribe-composer .file-copy small{margin-top:3px;color:var(--text-faint);font-size:.65rem;}
.transcribe-composer .file-drop.has-file .file-ico{background:color-mix(in srgb,var(--orange) 12%,var(--surface));color:var(--orange);}
.transcribe-composer #tgo{width:auto;min-width:118px;padding:0 14px;}
.transcribe-log{justify-content:flex-end;}
.transcribe-workspace.empty .transcribe-log{display:none;}
.transcribe-workspace .tr-card{align-self:flex-start;width:min(100%,760px);margin:0;border-radius:16px;}
.tr-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);}
.tr-card-head b{font-size:.8rem;}.tr-card-head .btn{width:auto;height:auto;padding:7px 10px;border:1px solid var(--line);}
.transcribe-workspace .tr-card textarea{min-height:220px;padding:16px;font-size:.92rem;}
.file-msg::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--orange);}

@media (max-width:860px){
  .content:has(.ai-workspace){padding:0 12px 14px;}
  .ai-workspace{grid-template-columns:1fr;min-height:calc(100dvh - 88px);border-left:0;border-right:0;border-radius:0;}
  .ai-workspace .chat-head{padding:9px 12px;}
  .ai-workspace.empty .chat-hero{display:flex;flex:1;justify-content:center;padding:28px 16px 18px;}
  .ai-workspace.empty .chat-sugg{display:flex;margin-top:0;padding:0 14px 12px;gap:3px;}
  .ai-workspace .sugg{min-height:40px;padding:9px 8px;font-size:.88rem;}
  .ai-workspace .chat-log{padding:18px 14px 10px;}
  .ai-workspace .chat-bar,.ai-workspace.empty .chat-bar,.ai-composer{width:calc(100% - 24px);bottom:6px;}
  .ai-workspace .chat-cap{padding-bottom:10px;}
  .ai-status,.ai-inline-note,.ai-workspace>.rep{grid-column:1;width:calc(100% - 24px);}
  .ai-inline-note .alt-route span{display:none;}
  .video-composer .gen-specs span:not(.cost){display:none;}
  .video-composer .gen-sel{max-width:58%;}
  .video-workspace .gen-stage .img-out{grid-template-columns:1fr;}
  .transcribe-composer .file-copy small{display:none;}
  .transcribe-composer #tgo{min-width:96px;padding:0 10px;font-size:.78rem;}
}
@media (max-width:520px){
  .ai-workspace.empty .chat-hero h1{font-size:1.45rem;}
  .ai-workspace .chat-bar .img-cost{display:none;}
  .ai-workspace .chat-cap{font-size:.61rem;}
  .video-composer{padding-left:10px;}
  .video-composer .gen-sel{max-width:66%;}
  .gen-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
  .gen-controls select,.gen-fixed b{min-height:44px;font-size:.78rem;}
  .transcribe-composer .file-copy b{font-size:.78rem;}
  .transcribe-composer #tgo{min-width:86px;font-size:.72rem;}
}

/* ---------- fullscreen KI Studio ----------------------------------------
   The Studio is an application surface, not a card inside the members area.
   Child tools consume the complete viewport: one quiet rail, one header and
   one work area. The readable stream remains centred, while the surface itself
   reaches every edge, like ChatGPT and other mature AI workspaces. */
.app.studio-shell{background:var(--bg);}
.app.studio-shell .main{min-height:0;}
.app.studio-shell .content{max-width:none;}
.app.studio-shell.immersive .main{height:100dvh;overflow:hidden;}
.app.studio-shell.immersive .topbar{position:relative;flex:none;min-height:60px;padding:8px 14px;
  gap:8px;background:var(--surface);backdrop-filter:none;}
.app.studio-shell.immersive .top-back{min-width:44px;height:44px;padding:0 13px;border-color:transparent;
  background:transparent;}
.app.studio-shell.immersive .top-back:hover{background:var(--surface-2);border-color:var(--line);}
.app.studio-shell.immersive .content{display:flex;flex:1;min-height:0;width:100%;margin:0;padding:0;overflow:hidden;}
.app.studio-shell.immersive .content>.studio-surface{flex:1;min-width:0;min-height:0;}
.app.studio-shell.immersive .chat-view{height:100%;min-height:0;grid-template-columns:260px minmax(0,1fr);
  gap:0;background:var(--surface);animation:none;}
.app.studio-shell.immersive .chat-side{padding:22px 16px;background:var(--surface);
  border-right:1px solid var(--line);}
.app.studio-shell.immersive .chat-main{height:100%;min-height:0;background:var(--bg);
  overflow-y:auto;}
.app.studio-shell.immersive .chat-head{min-height:60px;margin:0;padding:12px 24px;border-bottom:1px solid var(--line);
  background:var(--bg);}
.app.studio-shell.immersive .chat-acts .icon-btn{min-width:40px;width:40px;height:40px;}
.app.studio-shell.immersive .chat-log{width:min(100%,900px);margin:0 auto;padding:24px 28px 14px;}
.app.studio-shell.immersive .chat-bar{width:min(calc(100% - 48px),860px);margin-left:auto;margin-right:auto;}
.app.studio-shell.immersive .chat-cap{width:min(calc(100% - 48px),860px);margin-left:auto;margin-right:auto;}
.app.studio-shell.immersive .ai-workspace{height:100%;min-height:0;border:0;border-radius:0;box-shadow:none;overflow:hidden;}
.app.studio-shell.immersive .ai-workspace .chat-hero{width:min(100%,900px);}
.app.studio-shell.immersive .ai-workspace .chat-log{width:min(100%,900px);}
.app.studio-shell.immersive .ai-workspace .chat-sugg,
.app.studio-shell.immersive .ai-workspace .chat-bar,
.app.studio-shell.immersive .ai-composer,
.app.studio-shell.immersive .ai-status,
.app.studio-shell.immersive .ai-inline-note{width:min(calc(100% - 48px),860px);}
.app.studio-shell.immersive .ai-workspace>.rep,
.app.studio-shell.immersive .chat-view>.rep{grid-column:2;width:min(calc(100% - 48px),860px);margin:4px auto 10px;}
/* Image generation keeps a quiet, compact history rail. It is only history —
   never a second work panel — so the creative stream still owns the screen. */
.app.studio-shell.immersive .image-workspace{grid-template-columns:236px minmax(0,1fr);}
.app.studio-shell.immersive .image-workspace .ai-rail{display:flex;}
.app.studio-shell.immersive .image-workspace.rail-collapsed{grid-template-columns:minmax(0,1fr);}
.app.studio-shell.immersive .image-workspace.rail-collapsed .ai-rail{display:none;}
.rail-toggle{width:36px;height:36px;display:grid;place-items:center;flex:none;border-radius:10px;border:1px solid var(--line);background:var(--surface);transition:background .15s,border-color .15s,transform .12s;}
.rail-toggle:hover{background:color-mix(in srgb,var(--orange) 10%,var(--surface));border-color:color-mix(in srgb,var(--orange) 48%,var(--line));}
.rail-toggle:active{transform:scale(.95);}
.rail-toggle img{width:20px;height:20px;object-fit:contain;border-radius:6px;}
.app.studio-shell.immersive .image-workspace .chat-log{width:min(100%,980px);padding-top:34px;}
.app.studio-shell.immersive .image-workspace .cmsg.me{max-width:min(86%,760px);}
.app.studio-shell.immersive .image-workspace .cmsg.ai:has(.img-card){width:min(100%,720px);max-width:720px;}
.app.studio-shell.immersive .image-workspace .cmsg.ai .mark-load{min-width:320px;padding-top:28px;}
.app.studio-shell.immersive .image-workspace .chat-bar{width:min(calc(100% - 48px),900px);}
.app.studio-shell.immersive .image-workspace .chat-cap{width:min(calc(100% - 48px),900px);}
/* Keep scrolling for long image conversations, without the persistent browser
   rail that made the workspace look broken. */
.app.studio-shell.immersive .image-workspace .chat-log,
.app.studio-shell.immersive .image-workspace .chat-side-list{scrollbar-width:none;-ms-overflow-style:none;}
.app.studio-shell.immersive .image-workspace .chat-log::-webkit-scrollbar,
.app.studio-shell.immersive .image-workspace .chat-side-list::-webkit-scrollbar{width:0;height:0;}
/* Mirror, research, library and SEO tools do not use the conversation shell,
   but they still belong to this product family and therefore receive the same
   edge-to-edge viewport with a readable internal measure. */
.app.studio-shell.immersive .content>.studio-surface:not(.chat-view){height:100%;overflow:auto;
  padding:32px clamp(24px,4vw,64px) 48px;}
.app.studio-shell.immersive .content>.studio-surface:not(.chat-view)>*{max-width:1280px;margin-left:auto;margin-right:auto;}

/* Studio home: compact launchers replace the tall promotional posters. They
   read as tools in a professional product, preserve every brand name and keep
   the whole catalogue scannable without turning the page into an advert wall. */
.studio-home{width:100%;max-width:1440px;margin:0 auto;animation:none;}
.studio-home>.page-h{font-size:clamp(2rem,1.35rem + 1.8vw,3rem);
  font-weight:700;
  letter-spacing:-.045em;}
.studio-home>.page-sub{max-width:64ch;font-size:1rem;}
.studio-home .hub-grp{align-items:flex-end;margin:36px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.studio-home .hub-grp h2{font-size:1.12rem;font-weight:650;}
.studio-home .hub-grp span{font-family:var(--font-ui);font-size:.76rem;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--text-faint);}
.studio-home .hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));
  justify-content:stretch;gap:14px;margin:0 0 28px;}
.studio-home .hub-card{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 32px;
  align-items:center;gap:14px;width:100%;min-height:102px;aspect-ratio:auto;padding:20px 16px;
  border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;
  text-align:left;box-shadow:var(--e1);transition:background .18s,border-color .18s,box-shadow .18s,transform .18s;}
.studio-home .hub-card::after{display:none;}
.studio-home .hub-card:hover{transform:translateY(-2px);background:var(--surface);
  border-color:color-mix(in srgb,var(--orange) 50%,var(--line));box-shadow:var(--e2);}
.studio-home .hub-card:active{transform:none;background:color-mix(in srgb,var(--orange) 7%,var(--surface));}
.studio-home .hub-card .poster{display:none;}
.studio-home .hub-tile{position:relative;z-index:1;margin:0;}
.studio-home .hub-ic{width:48px;height:48px;border-radius:14px;background:var(--bg);
  border:1px solid var(--line);color:var(--orange);}
.studio-home .hub-ic img{width:26px;height:26px;border-radius:6px;object-fit:contain;}
.studio-home .hub-ic svg{width:22px;height:22px;}
.studio-home .hub-ic img~svg{display:none;}
.studio-home .hub-txt{position:relative;z-index:1;min-width:0;gap:4px;}
.studio-home .hub-card b,.studio-home .hub-card:not(.noposter) b{display:block;color:var(--text);
  font-size:.94rem;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.studio-home .hub-sub,.studio-home .hub-card:not(.noposter) .hub-sub{display:block;color:var(--text-soft);
  font-size:.76rem;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.studio-home .hub-open{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;
  border-radius:50%;color:var(--text-faint);transition:color .16s,background .16s;
  background:var(--bg);}
.studio-home .hub-open svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.studio-home .hub-card:hover .hub-open{color:var(--orange-deep);background:color-mix(in srgb,var(--orange) 10%,var(--surface));}
.studio-home .hub-all{margin-top:12px;min-height:50px;display:flex;align-items:center;justify-content:center;
  background:transparent;
  border-style:dashed;}

@media (min-width:861px){
  .app.studio-shell:not(.immersive) .content{padding:34px clamp(28px,3vw,56px) 52px;}
  .app.studio-shell:not(.immersive) .topbrand{display:none;}
  .app.studio-shell:not(.immersive) #inst{margin-left:auto;}
}
@media (min-width:861px) and (max-width:1100px){
  .app.studio-shell.immersive .chat-view{grid-template-columns:220px minmax(0,1fr);}
  .studio-home .hub{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px;}
}
@media (max-width:860px){
  .app.studio-shell:not(.immersive) .content{max-width:none;padding:20px 16px calc(94px + env(safe-area-inset-bottom));}
  .app.studio-shell.immersive .main{height:100dvh;}
  .app.studio-shell.immersive .topbar{min-height:56px;padding:6px 8px;}
  .app.studio-shell.immersive .top-back{height:44px;}
  .app.studio-shell.immersive .content{padding:0;}
  .app.studio-shell.immersive .chat-view{display:flex;height:100%;min-height:0;}
  .app.studio-shell.immersive .chat-side{display:none;}
  .app.studio-shell.immersive .chat-head{min-height:56px;padding:6px 10px 6px 14px;}
  .app.studio-shell.immersive .chat-acts .icon-btn{min-width:44px;width:44px;height:44px;}
  .app.studio-shell.immersive .chat-log{width:100%;padding:18px 14px 10px;}
  .app.studio-shell.immersive .chat-bar,
  .app.studio-shell.immersive .ai-workspace .chat-bar,
  .app.studio-shell.immersive .ai-composer,
  .app.studio-shell.immersive .ai-status,
  .app.studio-shell.immersive .ai-inline-note{width:calc(100% - 24px);}
  .app.studio-shell.immersive .ai-workspace>.rep,
  .app.studio-shell.immersive .chat-view>.rep{grid-column:1;width:calc(100% - 24px);margin:4px auto 8px;}
  .app.studio-shell.immersive .content>.studio-surface:not(.chat-view){padding:22px 16px 36px;}
  .studio-home>.page-h{font-size:1.75rem;}
  .studio-home>.page-sub{font-size:.92rem;}
  .studio-home .hub-grp{display:block;margin-top:28px;}
  .studio-home .hub-grp span{display:block;margin-top:3px;}
  .studio-home .hub{grid-template-columns:1fr;gap:8px;}
  .studio-home .hub-card{min-height:86px;grid-template-columns:44px minmax(0,1fr) 32px;padding:15px 12px;}
  .studio-home .hub-ic{width:44px;height:44px;border-radius:12px;}
  .studio-home .ob{padding:20px 22px;margin:24px 0 8px;
  border-radius:20px;
  box-shadow:var(--e1);}
  .studio-home .ob-top{align-items:center;}
  .studio-home .ob-bar{margin:16px 0 8px;
  height:4px;}
  .studio-home .ob-row{display:none;padding:10px 0 1px;border:0;}
  .studio-home .ob-row.next{display:flex;}
  .studio-home .ob-row.next .ob-txt i{display:none;}
  .studio-home .ob-row.next .btn{min-height:40px;white-space:nowrap;}
}
@media (max-width:860px) and (max-height:640px){
  .app.studio-shell.immersive .ai-workspace.empty .chat-hero{padding-top:14px;padding-bottom:10px;}
  .app.studio-shell.immersive .ai-workspace.empty .chat-hero p{display:none;}
  .app.studio-shell.immersive .ai-workspace .chat-sugg{padding-bottom:8px;}
}

/* ---- Onboarding checklist ------------------------------------------------
   Sits above the grid because the member who never scrolls is exactly the one
   it is for. Four steps are ticked from real actions and the Studio mobile view
   exposes only the next one, so setup never buries the tools it explains. */
.ob{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:18px 0 4px;}
.ob-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.ob-k{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);}
.ob-h{font-weight:700;font-size:1.02rem;margin-top:3px;}
.ob-x{background:none;border:0;color:var(--text-faint);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 2px;}
.ob-x:hover{color:var(--text);}
.ob-bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin:12px 0 4px;}
.ob-bar span{display:block;height:100%;border-radius:99px;background:var(--brand,#D94B19);transition:width .5s cubic-bezier(.22,1,.36,1);}
.ob-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);}
.ob-row:last-child{border-bottom:0;padding-bottom:2px;}
.ob-tick{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);
  display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff;}
.ob-row.on .ob-tick{background:var(--good,#1E9E5A);border-color:var(--good,#1E9E5A);}
.ob-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ob-txt b{font-size:.92rem;}
.ob-txt i{font-style:normal;font-size:.78rem;color:var(--text-soft);}
.ob-row.on .ob-txt b{color:var(--text-soft);text-decoration:line-through;}
.btn.sm{padding:8px 14px;font-size:.8rem;flex:none;}

/* ---- Support -------------------------------------------------------------
   Two ways to reach a human, above the FAQ: someone who opened this page has
   already failed to solve it alone, and making them scroll past five questions
   first is how a support page turns into a refund. */
/* Rundgang (coach marks). Das Loch ist ein box-shadow, kein zweites Overlay:
   ein Element, das mitwandert, statt vier Balken, die sich neu berechnen. */
.tour{position:fixed;inset:0;z-index:120;}
body.tour-on{overscroll-behavior:contain;}
.tour-hole{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(8,8,10,.74);
  outline:2px solid var(--brand,#D94B19);outline-offset:2px;transition:all .28s cubic-bezier(.22,1,.36,1);}
.tour-pop{position:absolute;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;box-shadow:0 18px 50px rgba(0,0,0,.35);transition:top .28s cubic-bezier(.22,1,.36,1);}
.tour-k{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:5px;}
.tour-pop b{display:block;font-size:1.02rem;margin-bottom:5px;}
.tour-pop p{font-size:.88rem;line-height:1.5;color:var(--text-soft);}
.tour-btns{display:flex;align-items:center;gap:8px;margin-top:14px;}
.tour-sp{flex:1;}
.tour-skip{background:none;border:0;color:var(--text-faint);font:inherit;font-size:.8rem;cursor:pointer;padding:0;}
.tour-skip:hover{color:var(--text);}
@media (prefers-reduced-motion:reduce){.tour-hole,.tour-pop{transition:none;}}

/* "Braucht einen Computer" — vor der Anleitung, nicht darin */
.pcnote{border:1px solid var(--line);border-left:3px solid var(--text-faint);border-radius:12px;
  background:var(--surface);padding:14px 16px;margin:0 0 16px;}
.pcnote.hard{border-left-color:var(--brand,#D94B19);}
.pcnote b{display:block;font-size:.95rem;margin-bottom:4px;}
.pcnote p{font-size:.86rem;color:var(--text-soft);line-height:1.5;}
.cat.mob.active{background:var(--brand,#D94B19);color:#fff;border-color:var(--brand,#D94B19);}
.badge-pc.hard{background:var(--brand,#D94B19);color:#fff;}

/* Wer das Bild wirklich erzeugt — steht vor dem Klick, nicht im FAQ */
.img-via{margin-top:10px;font-size:.78rem;line-height:1.5;color:var(--text-faint);max-width:60ch;}

/* Onboarding-Erklärseite (#start) */
.st-b{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);}
.st-b:last-of-type{border-bottom:0;}
.st-n{flex:none;width:30px;height:30px;border-radius:50%;background:var(--brand,#D94B19);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;}
.st-c{min-width:0;}
.st-c h3{font-size:1.05rem;margin:3px 0 6px;}
.st-c p{color:var(--text-soft);font-size:.92rem;line-height:1.5;}
.st-c ul{margin:10px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:7px;}
.st-c li{font-size:.9rem;line-height:1.5;}
.st-go{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}

/* "Zugang funktioniert nicht" */
.rep{margin:-6px 0 16px;}
.rep.on,.rep.ok{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:16px 18px;margin-top:10px;}
.rep.ok{border-color:var(--good,#1E9E5A);}
.rep h3{font-size:1rem;margin-bottom:8px;}
.rep p{font-size:.88rem;color:var(--text-soft);line-height:1.5;}
.rep-open{background:none;border:0;padding:4px 0;color:var(--text-faint);font:inherit;font-size:.85rem;
  text-decoration:underline;cursor:pointer;}
.rep-open:hover{color:var(--text);}
.rep-rs{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;}
.rep-r{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:.9rem;cursor:pointer;}
.rep-t{width:100%;resize:vertical;border:1px solid var(--line);border-radius:12px;background:var(--bg);
  color:var(--text);padding:10px 12px;font:inherit;font-size:.9rem;margin-bottom:10px;}
.rep-fine{margin-top:8px;font-size:.78rem;color:var(--text-faint);}
.rep-next{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}

/* 24/7-Support-Chat */
.sc{border:1px solid var(--line);border-radius:20px;background:var(--surface);margin-top:18px;overflow:hidden;
  box-shadow:var(--e1);}
.sc-top{display:flex;align-items:center;gap:8px;padding:16px 18px;border-bottom:1px solid var(--line);
  background:var(--bg);}
.sc-top b{font-size:.95rem;}
.sc-top i{font-style:normal;font-size:.76rem;color:var(--text-faint);margin-left:auto;}
.sc-dot{width:8px;height:8px;border-radius:50%;background:var(--good,#1E9E5A);box-shadow:0 0 0 0 rgba(30,158,90,.5);animation:scpulse 2.4s infinite;}
@keyframes scpulse{70%{box-shadow:0 0 0 7px rgba(30,158,90,0);}100%{box-shadow:0 0 0 0 rgba(30,158,90,0);}}
@media (prefers-reduced-motion:reduce){.sc-dot{animation:none;}}
.sc-log{max-height:340px;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:9px;}
.sc-b{max-width:88%;padding:10px 13px;border-radius:14px;font-size:.9rem;line-height:1.45;white-space:pre-wrap;}
.sc-b.ai{background:var(--bg);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:5px;}
.sc-b.human{background:color-mix(in srgb,var(--brand,#D94B19) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--brand,#D94B19) 42%,var(--line));align-self:flex-start;border-bottom-left-radius:5px;}
.sc-refresh{margin-left:auto;border:0;background:transparent;color:var(--text-soft);font:inherit;font-size:.68rem;font-weight:600;cursor:pointer;padding:4px 0}.sc-refresh:hover{color:var(--brand,#D94B19)}
.sc-b.user{background:var(--brand,#D94B19);color:#fff;align-self:flex-end;border-bottom-right-radius:5px;}
.sc-in{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line);align-items:flex-end;}
.sc-esc{width:100%;background:none;border:0;border-top:1px solid var(--line);padding:11px 14px;
  color:var(--text-faint);font:inherit;font-size:.8rem;cursor:pointer;text-align:left;}
.sc-esc:hover{color:var(--text);}
.sc-esc:disabled{cursor:default;}
.sc-in textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:12px;background:var(--bg);
  color:var(--text);padding:10px 12px;font:inherit;font-size:.9rem;max-height:120px;}
.sup-top{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px;}
@media(max-width:640px){.sup-top{grid-template-columns:1fr;}}
.sup-card{display:flex;flex-direction:column;gap:6px;padding:22px;border:1px solid var(--line);
  border-radius:20px;background:var(--surface);transition:border-color .18s,transform .18s;
  box-shadow:var(--e1);}
.sup-card:hover{border-color:var(--brand,#D94B19);transform:translateY(-1px);}
.sup-card b{font-size:1rem;}
.sup-card i{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--brand,#D94B19);word-break:break-all;}
.sup-card span{font-size:.78rem;color:var(--text-soft);margin-top:4px;}
.sup-you{margin-top:12px;font-size:.8rem;color:var(--text-faint);}
.sup-h{font-size:1.05rem;font-weight:700;margin:26px 0 10px;}
.sup-q{border:1px solid var(--line);border-radius:16px;background:var(--surface);margin-bottom:12px;overflow:hidden;}
.sup-q summary{padding:18px 20px;cursor:pointer;font-weight:600;font-size:.92rem;list-style:none;}
.sup-q summary::-webkit-details-marker{display:none;}
.sup-q summary::after{content:"+";float:right;color:var(--text-faint);font-weight:400;}
.sup-q[open] summary::after{content:"–";}
.sup-q .prose{padding:0 18px 15px;font-size:.86rem;}


/* ---------- Video history card + modal ---------- */
.vhist-card{cursor:pointer;border-radius:18px;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);transition:transform .18s ease,box-shadow .18s ease;display:flex;flex-direction:column;
  box-shadow:var(--e1);}
.vhist-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px -12px rgba(var(--glow),.45);}
.vhist-thumb{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden;}
.vhist-thumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;}
.vhist-play{position:absolute;inset:0;display:grid;place-items:center;color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.35));
  opacity:.92;transition:opacity .2s ease,transform .2s ease;}
.vhist-play svg{width:52px;height:52px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.6));}
.vhist-card:hover .vhist-play{opacity:1;transform:scale(1.06);}
.vhist-prompt{padding:10px 12px;font-size:.8rem;color:var(--text-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;}

.vhist-modal{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;animation:fade .2s ease;}
.vhist-modal-bg{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);}
.vhist-modal-card{position:relative;max-width:min(960px,94vw);max-height:92vh;
  display:flex;flex-direction:column;gap:12px;padding:14px;}
.vhist-modal-card video{max-width:100%;max-height:76vh;width:auto;border-radius:12px;background:#000;}
.vhist-modal-x{position:absolute;top:-10px;right:-10px;width:36px;height:36px;border-radius:50%;
  background:#fff;color:#000;border:0;font-size:22px;font-weight:400;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.4);z-index:2;}
.vhist-modal-x:hover{transform:scale(1.08);}

/* Mobile image studio: one stream, no desktop history rail. */
@media(max-width:860px){
 .app.studio-shell.immersive .image-workspace,.app.studio-shell.immersive .image-workspace.rail-collapsed{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;}
 .app.studio-shell.immersive .image-workspace .ai-rail{display:none;}
 .app.studio-shell.immersive .image-workspace .chat-main{min-width:0;width:100%;height:100%;padding:0 0 16px;overflow-x:hidden;}
 .app.studio-shell.immersive .image-workspace .chat-head{display:flex;flex:none;min-height:56px;padding:8px 16px;}
 .app.studio-shell.immersive .image-workspace .rail-toggle{display:none;}
 .app.studio-shell.immersive .image-workspace .chat-model{min-width:0;}
 .app.studio-shell.immersive .image-workspace .chat-model b{font-size:.9rem;}
 .app.studio-shell.immersive .image-workspace.empty .chat-hero{flex:0 0 auto;min-height:0;width:100%;padding:36px 24px 24px;gap:12px;justify-content:flex-start;}
 .app.studio-shell.immersive .image-workspace.empty .chat-hero h1{font-size:clamp(1.5rem,6vw,1.9rem);line-height:1.2;max-width:18ch;text-align:center;letter-spacing:-.03em;}
 .app.studio-shell.immersive .image-workspace.empty .chat-hero .ai-hero-copy{display:block;font-size:.87rem;line-height:1.55;max-width:34ch;text-align:center;}
 .app.studio-shell.immersive .image-workspace.empty .chat-log:empty{display:none;}
 .app.studio-shell.immersive .image-workspace .chat-log{min-width:0;padding:16px;width:100%;}
 .app.studio-shell.immersive .image-workspace .image-composer{flex:none;width:calc(100% - 32px);max-width:100%;margin:12px auto 0;padding:14px;border-radius:20px;}
 .app.studio-shell.immersive .image-workspace .image-composer textarea{width:100%;min-height:100px;max-height:220px;padding:8px 2px;font-size:16px;line-height:1.5;}
 .app.studio-shell.immersive .image-workspace .ai-composer-foot{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:10px;align-items:center;}
 .app.studio-shell.immersive .image-workspace .image-model-wrap{grid-column:1;grid-row:1;min-width:0;width:100%;max-width:100%;margin:0;padding:8px 12px;}
 .app.studio-shell.immersive .image-workspace .image-model-visible{display:block;min-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.8rem;}
 .app.studio-shell.immersive .image-workspace .img-cost{grid-column:1;grid-row:2;justify-self:start;font-size:.58rem;padding:4px 8px;margin:0;}
 .app.studio-shell.immersive .image-workspace #igo{grid-column:2;grid-row:1/3;width:44px;height:44px;min-width:44px;min-height:44px;}
 .app.studio-shell.immersive .image-workspace #igo svg{width:20px;height:20px;}
 .app.studio-shell.immersive .image-workspace .chat-cap{display:none;}
 .app.studio-shell.immersive .image-workspace>.rep{grid-column:1;width:calc(100% - 32px);margin:0 auto 12px;font-size:.78rem;}
 .app.studio-shell.immersive .image-workspace .cmsg.ai .mark-load{min-width:0;width:100%;}
 .app.studio-shell.immersive .image-workspace .cmsg.ai:has(.img-card){width:100%;max-width:100%;}
}
@media(max-width:860px) and (max-height:640px){
 .app.studio-shell.immersive .image-workspace.empty .chat-hero{padding:18px 20px 12px;}
 .app.studio-shell.immersive .image-workspace.empty .chat-hero .ai-hero-copy{display:none;}
}

/* Mobile Studio home: readable header and a compact next step. */
@media(max-width:860px){
 .app.studio-shell:not(.immersive) .topbar{padding:10px 12px;gap:6px;min-height:64px;}
 .app.studio-shell:not(.immersive) .topbar>.icon-btn{flex:0 0 40px;width:40px;height:44px;min-width:40px;min-height:44px;padding:9px;border-radius:12px;}
 .app.studio-shell:not(.immersive) .topbar>.icon-btn svg{width:19px;height:19px;}
 .app.studio-shell:not(.immersive) .topbrand{gap:7px;min-width:0;flex:1;}
 .app.studio-shell:not(.immersive) .topbrand b{font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .app.studio-shell:not(.immersive) .topbrand .logo{width:28px;height:28px;border-radius:9px;}
 .studio-home>.page-h{font-size:1.6rem;line-height:1.2;letter-spacing:-.03em;}
 .studio-home>.page-sub{font-size:.87rem;line-height:1.5;margin-top:8px;}
 .studio-home .ob{padding:16px;margin:18px 0 8px;border-radius:16px;}
 .studio-home .ob-h{font-size:.9rem;}.studio-home .ob-k{font-size:.58rem;letter-spacing:.12em;}
 .studio-home .ob-bar{margin:12px 0 8px;height:4px;}
 .studio-home .ob-row.next{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px 10px;align-items:center;padding:8px 0 0;}
 .studio-home .ob-tick{width:18px;height:18px;}
 .studio-home .ob-txt b{font-size:.83rem;line-height:1.35;}
 .studio-home .ob-row.next .btn{grid-column:2;justify-self:start;padding:8px 14px;min-height:40px;font-size:.8rem;border-radius:10px;}
 .studio-home .hub-grp{margin-top:22px;font-size:1.05rem;}
 .studio-home .hub-grp span{font-size:.8rem;line-height:1.4;}
 .studio-home .hub-card{min-height:78px;padding:12px;gap:12px;border-radius:16px;}
 .studio-home .hub-card b,.studio-home .hub-card:not(.noposter) b{font-size:.95rem;line-height:1.3;}
 .studio-home .hub-sub,.studio-home .hub-card:not(.noposter) .hub-sub{font-size:.78rem;line-height:1.4;}
}
@media(max-width:360px){.app.studio-shell:not(.immersive) .topbrand b{display:none;}.app.studio-shell:not(.immersive) .topbar{gap:8px;}}

/* Public catalogue uses the same mobile sizing as the member Studio. */
@media(max-width:860px){
 .app.studio-shell:not(.immersive) .topbar:has(>.search){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;}
 .app.studio-shell:not(.immersive) .topbar>.search{grid-column:1/-1;width:100%;max-width:none;min-width:0;min-height:44px;padding:10px 12px;}
 .app.studio-shell:not(.immersive) .topbar:has(>.search)>.icon-btn{justify-self:end;width:100%;max-width:64px;}
 .app.studio-shell:not(.immersive) .content>.view>.page-h{font-size:1.6rem;line-height:1.2;}
 .app.studio-shell:not(.immersive) .content>.view>.page-sub{font-size:.87rem;line-height:1.5;}
 .cats{flex-wrap:nowrap;max-width:100%;overflow-x:auto;gap:8px;margin:18px 0;padding-bottom:6px;scrollbar-width:none;}
 .cats::-webkit-scrollbar{display:none;}.cat{flex:none;padding:10px 14px;font-size:.78rem;min-height:40px;}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
 .grid>.tool{min-width:0;width:100%;border-radius:16px;}
 .tool .tcat{max-width:calc(100% - 16px);font-size:.5rem;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
 .kpis{grid-template-columns:repeat(2,minmax(0,1fr));margin:18px 0 6px;}
 .kpi{min-width:0;padding:14px;}.kpi b{font-size:1.4rem;white-space:nowrap;}.kpi span{font-size:.7rem;line-height:1.4;}
 .kpi:nth-child(3){border-left:0;}.kpi:nth-child(n+3){border-top:1px solid var(--line);}
 .content>.view>.ob{padding:16px;border-radius:16px;margin:18px 0;}
 .content>.view>.ob .ob-row{gap:8px;}.content>.view>.ob .ob-txt b{font-size:.8rem;}
 .content>.view>.ob .ob-row .btn{font-size:.75rem;padding:8px 10px;min-height:40px;}
 .modal.plan-modal{padding:22px 18px;max-height:calc(100dvh - 32px);overflow-y:auto;}
 .plan-grid{gap:10px;}.plan-option{min-width:0;}
}
@media(max-width:360px){.grid{gap:10px;}.kpi{padding:12px;}.kpi b{font-size:1.2rem;}}

/* Shared install dialog: usable on a phone for leads and members. */
.install-platform{display:block;width:100%;min-height:44px;padding:10px 12px;margin:0 0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--text);font:inherit;font-size:16px;}
@media(max-width:860px){
 .modal-back:has(.install-modal){padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom));}
 .modal.install-modal{width:100%;max-width:400px;max-height:calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));padding:22px 18px 14px;border-radius:20px;overflow-y:auto;scrollbar-width:thin;}
 .install-modal .modal-icon{width:42px;height:42px;margin-bottom:14px;border-radius:12px;}
 .install-modal .modal-icon svg{width:24px;height:24px;}
 .install-modal .modal-x{top:8px;right:8px;min-width:44px;min-height:44px;}
 .install-modal h2{font-size:1.35rem;line-height:1.2;max-width:22ch;margin-bottom:10px;}
 .install-modal h2 .hl{white-space:normal;}
 .install-modal>p{font-size:.83rem;line-height:1.5;margin-bottom:14px;}
 .install-modal .modal-steps{padding:14px;margin-bottom:14px;border-radius:12px;}
 .install-modal .modal-steps>b{display:none;}
 .install-modal .steps{margin:0;}
 .install-modal .steps li{font-size:.82rem;line-height:1.5;min-width:0;}
 .install-modal #mok{min-height:44px;padding:12px;font-size:.85rem;border-radius:12px;}
 .install-modal .modal-never{min-height:44px;font-size:.78rem;margin-top:4px;}
}

/* Install sheet fits as a single compact dialog without internal scrolling. */
.modal.install-modal{overflow:visible;max-height:none;padding:20px 18px 12px;width:min(360px,100%);}
.install-modal .modal-icon{width:36px;height:36px;margin-bottom:12px;border-radius:10px;}.install-modal .modal-icon svg{width:22px;height:22px;}
.install-modal h2{font-size:1.22rem;line-height:1.18;margin-bottom:8px;max-width:24ch;}.install-modal h2 .hl{white-space:normal;}
.install-modal>p{font-size:.78rem;line-height:1.4;margin-bottom:12px;}
.install-modal .install-platform{min-height:40px;margin-bottom:10px;padding:8px 10px;font-size:16px;}
.install-modal .modal-steps{padding:12px;margin-bottom:12px;border-radius:12px;}
.install-modal .modal-steps>b{display:none;}
.install-modal .steps li{font-size:.76rem;line-height:1.4;padding-left:30px;padding-bottom:10px;}
.install-modal .steps li:last-child{padding-bottom:0;}
.install-modal .steps li::before{width:21px;height:21px;font-size:.7rem;}
.install-modal .steps li:not(:last-child)::after{left:10px;top:24px;}
.install-modal #mok{min-height:42px;padding:10px;font-size:.82rem;border-radius:10px;}
.install-modal .modal-never{min-height:36px;font-size:.74rem;margin-top:3px;}
@media(max-height:600px){
 .install-modal .modal-icon{display:none;}
 .modal.install-modal{padding:16px 14px 10px;}
 .install-modal h2{font-size:1.08rem;padding-right:24px;}
 .install-modal>p{display:none;}
 .install-modal .modal-steps{padding:10px;margin-bottom:8px;}
 .install-modal .steps li{font-size:.72rem;padding-bottom:8px;}
 .install-modal .install-platform{min-height:36px;margin-bottom:8px;padding:6px 8px;}
}

/* All mobile generators share one app-like stream. */
@media(max-width:860px){
 .app.studio-shell.immersive .chat-view:not(.image-workspace){display:flex;flex-direction:column;width:100%;min-width:0;}
 .app.studio-shell.immersive .chat-view .chat-side{display:none;}
 .app.studio-shell.immersive .chat-view .chat-main{width:100%;min-width:0;flex:1;min-height:0;overflow-x:hidden;}
 .app.studio-shell.immersive .chat-view .chat-head{flex:none;min-width:0;padding:8px 16px;}
 .app.studio-shell.immersive .chat-view .chat-model{min-width:0;}
 .app.studio-shell.immersive .chat-view .chat-model b{font-size:.9rem;}
 .app.studio-shell.immersive .chat-view.empty .chat-hero{flex:0 0 auto;min-height:0;width:100%;padding:32px 20px 20px;gap:12px;}
 .app.studio-shell.immersive .chat-view.empty .chat-hero h1{font-size:clamp(1.5rem,6vw,1.9rem);line-height:1.2;max-width:20ch;text-align:center;}
 .app.studio-shell.immersive .chat-view .chat-hero .hero-mark{width:44px;height:44px;margin-bottom:4px;}
 .app.studio-shell.immersive .chat-view .ai-hero-symbol{width:52px;height:44px;margin-bottom:0;}
 .app.studio-shell.immersive .chat-view .chat-sugg{width:calc(100% - 32px);flex-wrap:wrap;justify-content:center;padding:0;margin:0 auto 16px;gap:8px;}
 .app.studio-shell.immersive .chat-view .sugg{font-size:.78rem;padding:10px;min-height:40px;}
 .app.studio-shell.immersive .chat-view .chat-bar,.app.studio-shell.immersive .chat-view .ai-composer{width:calc(100% - 32px);max-width:100%;margin-inline:auto;border-radius:18px;}
 .app.studio-shell.immersive .chat-view textarea{font-size:16px;line-height:1.5;min-width:0;max-width:100%;}
 .app.studio-shell.immersive .video-workspace:not(.image-workspace) .video-composer textarea{min-height:88px;padding:10px 4px;}
 .app.studio-shell.immersive .video-workspace:not(.image-workspace) .ai-composer-foot{flex-wrap:wrap;gap:8px;}
 .app.studio-shell.immersive .video-workspace:not(.image-workspace) .gen-sel{min-width:0;max-width:100%;flex:1 1 130px;font-size:.8rem;min-height:40px;}
 .app.studio-shell.immersive .chat-view .chat-bar-model{max-width:100%;min-width:0;font-size:.78rem;}
 .app.studio-shell.immersive .chat-view .chat-cap{display:none;}
 .app.studio-shell.immersive .chat-view>.rep{flex:none;width:calc(100% - 32px);margin:8px auto 12px;font-size:.78rem;}
 .app.studio-shell.immersive .chat-view .gen-stage{min-width:0;max-width:100%;}
}

/* Compact brand mark in the mobile header, for leads and members. */
@media(max-width:860px){
 .app.studio-shell:not(.immersive) .topbrand b{display:none;}
 .app.studio-shell:not(.immersive) .topbrand{flex:1;min-width:28px;}
}

/* Familiar message composer across text and media surfaces. */
.app.studio-shell.immersive .chat-view .chat-bar{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:24px;}
.app.studio-shell.immersive .chat-view .chat-bar textarea{grid-column:1/-1;min-height:52px;border:0;background:transparent;padding:6px 2px;box-shadow:none;resize:none;font-size:16px;}
.app.studio-shell.immersive .chat-view .chat-bar textarea:focus{outline:none;box-shadow:none;}
.app.studio-shell.immersive .chat-view .chat-bar .chat-bar-model{grid-column:1;min-width:0;max-width:100%;justify-self:start;background:var(--surface-2);border-radius:999px;padding:8px 12px;}
.app.studio-shell.immersive .chat-view .chat-bar #csend{grid-column:2;justify-self:end;width:44px;height:44px;border-radius:50%;background:var(--text);color:var(--bg);}
.app.studio-shell.immersive .image-workspace .chat-hero .hero-mark{display:block;width:48px;height:48px;object-fit:contain;}
.video-history-modal{padding-top:56px;}.video-history-modal .ai-rail-history{display:block;}.video-history-modal .img-out{display:grid;grid-template-columns:1fr;gap:12px;}
.app.studio-shell.immersive .video-workspace .chat-head>.icon-btn{margin-left:auto;flex:none;}
/* Shared send control: explicit SVG stroke keeps the arrow visible in both themes. */
.chat-view #csend,.chat-view #igo,.chat-view #vgo{width:44px;height:44px;min-width:44px;padding:0;border:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--text);color:var(--bg);}
.chat-view #csend svg,.chat-view #igo svg,.chat-view #vgo svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.purchase-page{min-height:100dvh;padding:24px 20px 40px;background:radial-gradient(ellipse at top,rgba(255,96,35,.12),transparent 65%),var(--bg);display:flex;flex-direction:column;align-items:center;gap:28px;}
.purchase-brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;}.purchase-brand img{width:36px;height:36px;border-radius:12px;}
.purchase-card{width:100%;max-width:440px;padding:28px 24px;border:1px solid var(--line);border-radius:26px;background:var(--surface);}.purchase-card h1{font-size:clamp(28px,7vw,38px);line-height:1.15;margin:20px 0 14px;letter-spacing:-.04em;}.purchase-card p{color:var(--text-soft);line-height:1.6;font-size:15px;}.purchase-price{font-size:46px;font-weight:750;margin:24px 0 16px;}.purchase-price small{font-size:15px;font-weight:400;color:var(--text-soft);}.purchase-card ul{padding-left:20px;margin:0 0 26px;line-height:2;font-size:14px;}.purchase-card .btn{min-height:52px;gap:10px;}.purchase-card .btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;}.purchase-login{display:block;text-align:center;font-size:12px;color:var(--text-faint);margin-top:18px;}.purchase-login a{color:var(--text-soft);text-decoration:underline;}
.img-upload{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text-soft);cursor:pointer;font-size:18px;flex:none;}
.img-upload:hover{color:var(--text);border-color:var(--orange);}
.img-upload svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;}
.edit-bar{display:flex;align-items:center;gap:10px;padding:8px 10px;margin-bottom:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface);font-size:13px;color:var(--text-soft);}
.edit-bar img{width:40px;height:40px;object-fit:cover;border-radius:8px;flex:none;}
.edit-bar span{flex:1;}
.edit-bar button{background:none;border:0;color:var(--text-faint);cursor:pointer;font-size:16px;padding:4px 8px;}
.edit-bar button:hover{color:var(--text);}
.m-inst{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-soft);cursor:pointer;flex:none;}
.m-inst input{accent-color:var(--orange);}
.music-card audio{width:100%;display:block;margin-bottom:10px;}
.shop-link{display:flex;align-items:center;gap:8px;padding:9px 12px;margin-bottom:10px;border-radius:10px;color:var(--text-faint);font-size:.85rem;text-decoration:none;border:1px dashed var(--line);}
.shop-link:hover{color:var(--text);border-color:var(--orange);}
.shop-link svg{width:16px;height:16px;}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:8px;}
.shop-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:18px;gap:14px;}
.shop-badge{position:absolute;top:12px;right:12px;background:var(--orange);color:#fff;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;}
.shop-body b{font-size:16px;}.shop-body p{color:var(--text-soft);font-size:13px;line-height:1.5;margin:6px 0 0;}
.shop-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;}
.shop-price{font-size:22px;font-weight:700;}.shop-price.muted{font-size:14px;font-weight:500;color:var(--text-faint);}
.shop-card .btn[disabled]{opacity:.5;cursor:default;}
/* Music is a guided form, with one scrolling surface on phones. */
.music-workspace{color:var(--text);}
.music-intro{padding-bottom:28px;}
.music-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);}
.music-intro h1{font-size:clamp(1.9rem,4vw,2.8rem);line-height:1.12;letter-spacing:-.035em;margin:10px 0 12px;}
.music-intro p{max-width:52ch;color:var(--text-soft);line-height:1.6;margin:0 0 12px;}
.music-included{font-size:.8rem;color:var(--text-soft);}
.music-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:start;}
.music-form,.music-results{min-width:0;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--surface);}
.music-step{display:flex;align-items:center;gap:10px;font-size:1.05rem;font-weight:700;line-height:1.4;}
.music-step>span{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--orange-deep);font-size:.85rem;}
.music-help{color:var(--text-soft);font-size:.875rem;line-height:1.55;margin:10px 0 14px;}
.music-form textarea{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:140px;resize:vertical;font:inherit;font-size:16px;line-height:1.55;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--bg);color:var(--text);}
.music-form textarea::placeholder{color:var(--text-faint);opacity:1;}
.music-example-label{margin-bottom:8px;}
.music-examples{display:flex;gap:8px;flex-wrap:wrap;}
.music-examples button{min-height:44px;padding:9px 13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;font-size:.875rem;cursor:pointer;}
.music-examples button:hover{background:var(--surface-2);}
.music-voice{border:0;padding:0;margin:24px 0;min-width:0;}
.music-voice legend{padding:0;margin-bottom:12px;}
.music-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.music-options label{display:flex;align-items:flex-start;gap:8px;padding:14px 10px;border:1px solid var(--line);border-radius:12px;cursor:pointer;min-width:0;}
.music-options label:has(input:checked){border-color:var(--orange);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--orange);}
.music-options input{width:18px;height:18px;margin:2px 0;flex:none;accent-color:var(--orange-deep);}
.music-options b{display:block;font-size:.9rem;line-height:1.4;}
.music-options small{display:block;color:var(--text-soft);font-size:.8rem;line-height:1.45;margin-top:4px;}
.music-submit{width:100%;min-height:52px;font-size:1rem;white-space:normal;}
.music-wait-hint{text-align:center;margin-bottom:0;}
.music-status{font-size:.95rem;line-height:1.6;padding:14px;border-radius:12px;background:var(--surface-2);margin:16px 0 0;overflow-wrap:anywhere;}
.music-status:empty{display:none;}
.music-results h2{font-size:1.15rem;margin:0 0 20px;}
.music-empty{text-align:center;padding:30px 8px;}
.music-empty[hidden]{display:none;}
.music-empty>span{display:inline-flex;color:var(--orange);padding:18px;border-radius:50%;background:var(--surface-2);}
.music-empty svg{width:32px;height:32px;}
.music-empty h3,.music-card h3{font-size:1rem;margin:18px 0 10px;}
.music-empty p{color:var(--text-soft);font-size:.95rem;line-height:1.6;max-width:30ch;margin:0 auto;}
.music-job{min-width:0;margin-bottom:16px;overflow-wrap:anywhere;}
.music-card audio{max-width:100%;min-width:0;}
.music-card .btn{min-height:48px;white-space:normal;}
.music-support{display:inline-flex;align-items:center;min-height:44px;color:var(--text);text-decoration:underline;text-underline-offset:4px;font-size:.9rem;}
.music-workspace :is(button,textarea,input,a):focus-visible{outline:3px solid var(--orange);outline-offset:3px;}
.music-workspace button:disabled{opacity:.6;cursor:wait;}
@media(max-width:860px){
 .music-layout{grid-template-columns:minmax(0,1fr);gap:20px;}
 .music-intro{padding-bottom:16px;}
 .music-intro h1{margin:8px 0;}
 .music-intro p{margin-bottom:8px;}
 .music-form,.music-results{padding:16px;}
 .music-form textarea{min-height:120px;}
 .music-voice{margin:20px 0;}
 .app.studio-shell.immersive .content>.music-workspace{padding-bottom:calc(32px + env(safe-area-inset-bottom));}
}
@media(max-width:359px){.music-options{grid-template-columns:minmax(0,1fr);}}