/* ireze — charcoal glass. Component styles, not an override stack. */
:root {
  color-scheme: dark;
  --bg-base:#171819; --bg-sidebar:rgba(32,33,35,.96); --bg-surface:#232527;
  --bg-elevated:#303235; --bg-card:rgba(39,41,43,.94); --bg-well:#1c1e20; --bg-input:#1b1d1f;
  --border-base:rgba(255,255,255,.12); --border-subtle:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.23);
  --text-primary:#f1f1ef; --text-secondary:#b7b9bb; --text-tertiary:#a0a3a6; --text-quaternary:#898d91;
  --blue:#526f91; --green:#a0b8a7; --orange:#c7b394; --red:#d6a3a3; --purple:#b7b2bd; --teal:#a5b9ba; --indigo:#b3b7c2; --yellow:#c7b994;
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:22px; --radius-2xl:26px;
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.07), 6px 10px 26px rgba(0,0,0,.18);
}
* { box-sizing:border-box; }
html { height:100%; }
body.app-shell { margin:0; background:var(--bg-base); color:var(--text-primary); font-family:'Plus Jakarta Sans',sans-serif; letter-spacing:-.015em; }
/* Hero art as a fixed layer rather than a body background: a `background-attachment: fixed`
   image is ignored by iOS Safari, and a single fixed layer keeps one compositing surface for
   every scroll container inside the shell. The gradient scrim is what keeps body copy and
   secondary text legible over an image this high-contrast. */
body.app-shell::before { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(23,24,25,.55) 0%,rgba(23,24,25,.78) 45%,rgba(23,24,25,.92) 100%),
    radial-gradient(ellipse at 80% 0%,rgba(48,49,51,.5),transparent 60%),
    url('/static/bg.webp') center/cover no-repeat; }
@media (max-width:640px) { body.app-shell::before {
  background:linear-gradient(180deg,rgba(23,24,25,.6) 0%,rgba(23,24,25,.82) 45%,rgba(23,24,25,.93) 100%),
    url('/static/bg-mobile.webp') center/cover no-repeat; } }
code,pre,.font-mono { font-family:'JetBrains Mono',monospace; font-variant-numeric:tabular-nums; }
.app-main { height:100vh; height:100dvh; min-width:0; }
.workspace-scroll { min-height:0; padding:clamp(16px,2.6vw,36px); overscroll-behavior:contain; }
.app-header { min-height:72px; height:auto; padding:14px 20px; gap:14px; flex-wrap:wrap; background:rgba(30,31,33,.94); border-bottom:1px solid var(--border-subtle); }
.app-header > div { min-width:0; }
.header-search { flex:1 1 180px; max-width:300px; }
.header-actions { flex-wrap:wrap; }
#auth-section { max-width:100%; }
#auth-section > div { flex-wrap:wrap; }
#auth-section span { overflow-wrap:anywhere; }
#main-sidebar { height:100vh; height:100dvh; max-width:88vw; border-right:1px solid var(--border-base); transition:transform .2s ease; }
#main-sidebar nav { padding:20px 12px; }
#main-sidebar nav::before { content:'WORKSPACE'; display:block; padding:0 12px 14px; font-size:10px; letter-spacing:.15em; color:var(--text-tertiary); }
.apple-glass { background:var(--bg-sidebar); }
.apple-glass-card,.apple-glass-panel,.model-card { position:relative; min-width:0; background:linear-gradient(145deg,rgba(255,255,255,.025),transparent 65%),var(--bg-card); border:1px solid var(--border-base); border-radius:var(--radius-xl); box-shadow:var(--glass-shadow); }
.apple-glass-card,.model-card { transition:border-color .18s ease; }
.apple-glass-card:hover,.model-card:hover { border-color:var(--border-strong); }
.model-card { padding:20px; }
.apple-well { background:var(--bg-well); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:inset 2px 3px 7px rgba(0,0,0,.2); min-width:0; overflow-wrap:anywhere; }
.apple-btn-primary,.apple-btn-secondary { min-height:40px; border:1px solid var(--border-base); border-radius:var(--radius-md); font-weight:600; cursor:pointer; transition:background .16s,border-color .16s; box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 8px rgba(0,0,0,.16); }
.apple-btn-primary { background:var(--blue); color:#fff; }
.apple-btn-primary:hover { background:#607d9e; }
.apple-btn-secondary { background:linear-gradient(145deg,#343639,#292b2e); color:var(--text-primary); }
.apple-btn-secondary:hover { background:#3a3c3f; border-color:var(--border-strong); }
button:disabled { opacity:.45; cursor:not-allowed; }
:where(button,a,input,textarea,select,summary):focus-visible { outline:2px solid #b9c8db !important; outline-offset:3px; }
input:not([type=checkbox]):not([type=range]),textarea,select { min-width:0; max-width:100%; min-height:40px; background:var(--bg-input); color:var(--text-primary); border:1px solid var(--border-base); border-radius:var(--radius-md); box-shadow:inset 1px 2px 5px rgba(0,0,0,.18); }
input::placeholder,textarea::placeholder { color:var(--text-tertiary); opacity:1; }
select option { background:#232527; color:var(--text-primary); }
input[aria-invalid=true] { border-color:var(--red); }
input[type=range],input[type=checkbox] { accent-color:var(--blue); }
.nav-capsule,.doc-pill,.admin-subtab-pill,.ios-segmented-item { min-height:40px; border:1px solid transparent; border-radius:var(--radius-md); color:var(--text-secondary); cursor:pointer; }
.nav-capsule { min-height:44px; }
.nav-capsule:hover,.doc-pill:hover,.admin-subtab-pill:hover,.ios-segmented-item:hover { background:rgba(255,255,255,.04); color:var(--text-primary); }
.nav-capsule.active,.doc-pill.active,.admin-subtab-pill.active,.ios-segmented-item.active { background:linear-gradient(145deg,#3a3c3f,#2c2e31); color:var(--text-primary); border-color:var(--border-base); box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 3px 8px rgba(0,0,0,.14); }
#main-sidebar .nav-capsule > i { color:var(--text-secondary); font-size:17px; }
.ios-segmented { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; background:var(--bg-well); border:1px solid var(--border-subtle); border-radius:var(--radius-md); }
.ios-segmented-item { padding:7px 12px; font-size:12px; }
.tab-content { width:100%; max-width:1200px; margin-inline:auto; min-width:0; }
.tab-content h1,.tab-content h2,.tab-content h3 { overflow-wrap:anywhere; }
.tab-content > div:first-child h2 { font-size:clamp(22px,2vw,28px); line-height:1.3; font-weight:600; flex-wrap:wrap; }
.tab-content p { line-height:1.75; }
.tab-content .grid > * { min-width:0; }
#discord-global-banner { background:rgba(39,41,43,.8); border:1px solid var(--border-base); box-shadow:none; }
.playground-view:not(.hidden) { display:flex; flex-direction:column; }
.chat-toolbar { display:flex; flex-wrap:wrap; gap:12px; }
.chat-toolbar > div { min-width:0; flex-wrap:wrap; }
.chat-workspace { display:flex; flex-direction:row; min-width:0; min-height:480px; align-items:stretch; }
.chat-panel { flex:1 1 0%; display:flex; flex-direction:column; min-width:0; }
#chat-messages { min-height:280px; max-height:65vh; max-height:65dvh; padding:clamp(16px,2.5vw,30px); overflow-x:hidden; }
.chat-message { display:flex; gap:12px; min-width:0; max-width:850px; }
.chat-bubble-user,.chat-bubble-assistant { min-width:0; max-width:100%; padding:16px 20px; border:1px solid var(--border-base); border-radius:18px 18px 18px 5px; background:rgba(255,255,255,.035); color:var(--text-primary); }
.chat-bubble-user { background:#343638; border-radius:18px 18px 5px 18px; }
.chat-markdown { min-width:0; font-size:13px; line-height:1.8; overflow-wrap:anywhere; }
.chat-markdown p { margin-bottom:.75rem; }
.chat-markdown p:last-child { margin-bottom:0; }
pre { max-width:100%; overflow-x:auto; }
.chat-markdown pre { margin:.75rem 0; padding:14px; background:var(--bg-well); border:1px solid var(--border-subtle); border-radius:12px; }
.chat-markdown code:not(pre code) { background:var(--bg-well); padding:.15em .35em; border-radius:5px; }
.chat-markdown ul,.chat-markdown ol { padding-left:1.5rem; margin-bottom:.75rem; }
.chat-markdown ul { list-style:disc; }
.chat-markdown ol { list-style:decimal; }
.chat-markdown h1,.chat-markdown h2,.chat-markdown h3 { font-weight:600; margin-block:1rem .5rem; }
.chat-markdown blockquote { border-left:2px solid var(--border-strong); padding-left:14px; color:var(--text-secondary); }
.chat-markdown table { display:block; overflow-x:auto; }
.chat-composer { background:var(--bg-surface); padding:16px; }
#chat-input { min-height:56px; padding-block:16px; }
#send-button { width:38px; height:38px; min-height:38px; border-radius:50%; }
#chat-stats { overflow-wrap:anywhere; }
#params-drawer { background:#27292b; width:270px; max-height:80dvh; }
#params-drawer .justify-between { gap:10px; flex-wrap:wrap; }
.catalog-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:16px; }
.catalog-filters { max-width:100%; }
.catalog-search { flex:1 1 250px; min-width:0; }
.catalog-search input { padding-left:36px; }
.catalog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr)); gap:22px; align-items:stretch; }
.catalog-card { display:flex; flex-direction:column; justify-content:space-between; padding:24px; }
.catalog-card-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.catalog-provider { display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:600; color:var(--text-secondary); }
.catalog-provider > i { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--border-base); border-radius:10px; background:rgba(255,255,255,.04); font-size:17px; }
.catalog-title-row { display:flex; flex-wrap:wrap; gap:8px 12px; margin-bottom:12px; }
.catalog-model-name { flex:1 1 180px; font-size:22px; line-height:1.3; font-weight:600; }
.catalog-model-id { max-width:100%; min-height:34px; text-align:left; }
.catalog-model-id span { min-width:0; overflow-wrap:anywhere; }
.catalog-model-id i { flex-shrink:0; }
.catalog-description { margin:18px 0; font-size:12px; color:var(--text-secondary); overflow-wrap:anywhere; }
.catalog-capabilities { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:22px; }
.catalog-capability,.catalog-status,.neutral-role-badge { background:rgba(255,255,255,.035); border:1px solid var(--border-subtle); color:var(--text-secondary); }
.catalog-capability { display:inline-flex; align-items:center; gap:5px; padding:5px 8px; border-radius:8px; font-size:10px; }
.catalog-status-dot { display:inline-block; width:6px; height:6px; flex-shrink:0; border-radius:50%; }
.catalog-status-dot.is-operational { background:var(--green); }
.catalog-status-dot.is-offline { background:var(--red); }
.catalog-status-dot.is-unknown { background:var(--text-secondary); }
.catalog-specs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding:18px; margin-bottom:20px; }
.catalog-pricing { grid-column:1 / -1; padding-bottom:16px; border-bottom:1px solid var(--border-base); }
.catalog-specs dt { font-size:11px; color:var(--text-secondary); margin-bottom:7px; }
.catalog-specs dd { font-family:'JetBrains Mono',monospace; font-size:13px; line-height:1.7; overflow-wrap:anywhere; }
.catalog-specs dd span { font-size:11px; color:var(--text-secondary); }
.catalog-lock { flex-wrap:wrap; gap:10px; line-height:1.6; }
.catalog-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:18px; border-top:1px solid var(--border-base); }
.catalog-actions button:first-child { flex:1 1 160px; }
.catalog-actions button { min-height:42px; }
.separator { height:1px; background:var(--border-subtle); }
.chip-blue,.chip-purple,.chip-teal,.chip-green,.chip-orange,.chip-red { background:rgba(255,255,255,.045); border:1px solid var(--border-base); color:var(--text-secondary); }
.chip-green { color:var(--green); } .chip-orange { color:var(--orange); } .chip-red { color:var(--red); }
.overflow-x-auto { max-width:100%; overscroll-behavior-x:contain; }
.workspace-scroll table { width:100%; min-width:600px; border-collapse:collapse; }
thead { background:rgba(0,0,0,.12); }
th { font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
th,td { vertical-align:middle; }
tbody tr { border-bottom:1px solid var(--border-subtle); }
tbody tr:hover { background:rgba(255,255,255,.025); }
#tab-admin > div:nth-child(2) > div:first-child { flex-wrap:wrap; }
#tab-docs .apple-well.relative { padding-top:52px; }
.dialog-overlay { overflow-y:auto; overscroll-behavior:contain; }
.dialog-overlay > div { max-height:90vh; max-height:90dvh; overflow-y:auto; background:#292b2d; box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 80px rgba(0,0,0,.45); }
.dialog-overlay > div > div:first-of-type { padding-right:18px; }
.apple-toast { position:fixed; z-index:1000; bottom:max(24px,env(safe-area-inset-bottom)); left:50%; display:flex; align-items:center; gap:10px; max-width:calc(100vw - 32px); width:max-content; padding:12px 20px; border:1px solid var(--border-strong); border-radius:18px; background:#303234; color:var(--text-primary); font-size:13px; box-shadow:var(--glass-shadow); opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:opacity .2s,transform .2s; }
.apple-toast.show { opacity:1; transform:translate(-50%,0); }
.typing-cursor::after { content:'│'; color:var(--text-secondary); animation:appleBlink 1s step-start infinite; }
@keyframes appleBlink { 50% { opacity:0; } }
::-webkit-scrollbar { width:7px; height:7px; }
::-webkit-scrollbar-thumb { background:#505356; border-radius:10px; }
@supports (backdrop-filter:blur(1px)) { .app-header,#main-sidebar,.apple-glass-panel { backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); } }
@media (min-width:1024px) { #main-sidebar { width:248px; } }
@media (max-width:767px) { .app-header { padding:12px 16px; } .chat-toolbar { flex-direction:column; } .chat-composer { padding:12px; } input:not([type=checkbox]):not([type=range]),textarea,select { font-size:16px; } .catalog-card { padding:20px; } }
@media (max-width:639px) { #params-drawer { width:min(340px,92vw); height:100vh; height:100dvh; max-height:100dvh; border-radius:20px 0 0 20px; } .chat-workspace { min-height:420px; } .chat-message { gap:8px; } .chat-bubble-user,.chat-bubble-assistant { padding:12px; } .chat-toolbar > div { justify-content:flex-start; } .catalog-filters button { flex:1 1 40%; white-space:normal; } .workspace-scroll .flex > .relative.w-64 { width:100%; min-width:0; } .workspace-scroll .flex:has(> #promo-code-input) { flex-wrap:wrap; } .workspace-scroll .flex:has(> #admin-requests-page-summary) { flex-wrap:wrap; gap:12px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
/* Visibility is a state contract; responsive Tailwind hidden utilities remain intact. */
.tab-content.hidden,.dialog-overlay.hidden,#params-drawer.hidden,#sidebar-backdrop.hidden,#params-drawer-backdrop.hidden { display:none !important; }

/* Playground convenience controls share the charcoal surface system. */
.playground-tools,.playground-model-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; min-width:0; }
.playground-action { padding:8px 12px; font-size:11px; min-height:44px; }
.playground-notice { color:var(--text-secondary); font-size:11px; line-height:1.6; margin-top:8px; overflow-wrap:anywhere; }
.playground-model-tools input,.playground-model-tools select { flex:1 1 160px; width:100%; padding:8px 12px; }
@media(max-width:640px) { .playground-tools { gap:6px; } .playground-action { flex:1 1 auto; } .playground-model-tools { width:100%; } }