:root {
  --ink: #173d34;
  --ink-deep: #0d2c26;
  --ink-soft: #315b50;
  --paper: #f4efe2;
  --paper-bright: #fffdf7;
  --paper-deep: #e8dfca;
  --amber: #b77a2d;
  --amber-soft: #ead5a7;
  --rust: #9a4939;
  --muted: #6e746b;
  --line: rgba(23, 61, 52, .15);
  --shadow: 0 20px 55px rgba(32, 46, 38, .11);
  --serif: "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", SimSun, serif;
  --kai: "STKaiti", "KaiTi", "Kaiti SC", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink-deep);
  background:
    radial-gradient(circle at 84% 12%, rgba(183, 122, 45, .12), transparent 28rem),
    radial-gradient(circle at 5% 90%, rgba(23, 61, 52, .09), transparent 30rem),
    repeating-linear-gradient(92deg, transparent 0 7px, rgba(71, 57, 37, .017) 8px 9px),
    var(--paper);
  font-family: var(--serif);
  min-height: 100vh;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
input, textarea, select {
  width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: .78rem .9rem;
  background: rgba(255, 253, 247, .8); color: var(--ink-deep); outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
textarea { resize: vertical; line-height: 1.7; }
input:focus, textarea:focus, select:focus { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(183, 122, 45, .14); background: var(--paper-bright); }
label { display: grid; gap: .42rem; font-weight: 700; font-size: .89rem; }
label small { color: var(--muted); font-weight: 400; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: .02em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.kicker, .eyebrow { color: var(--amber); font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; margin-bottom: .55rem; }
.brand-seal { display: grid; place-items: center; width: 64px; height: 64px; color: var(--paper-bright); background: var(--ink); border-radius: 42% 58% 48% 52%; font-family: var(--kai); font-size: 2rem; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); transform: rotate(-3deg); }
.brand-seal.small { width: 38px; height: 38px; font-size: 1.22rem; flex: 0 0 auto; }
.button { border: 1px solid var(--line); background: var(--paper-bright); border-radius: 9px; padding: .7rem 1rem; cursor: pointer; font-weight: 700; transition: transform .18s, box-shadow .18s, background .18s; }
.button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(23,61,52,.1); }
.button.primary { color: #fffdf6; background: var(--ink); border-color: var(--ink); }
.button.primary:hover:not(:disabled) { background: var(--ink-soft); }
.button.ghost { background: transparent; }
.button.compact { padding: .45rem .65rem; font-size: .82rem; }
.button.wide { width: 100%; }
.button:disabled { opacity: .55; cursor: wait; }
.text-button, .icon-button { border: 0; background: transparent; cursor: pointer; }
.text-button { padding: .5rem; text-decoration: underline; text-underline-offset: 3px; }
.icon-button { width: 38px; height: 38px; border-radius: 50%; font-size: 1.2rem; }
.icon-button:hover { background: rgba(23,61,52,.08); }
.danger, .danger-text { color: var(--rust); }
.form-error { min-height: 1.25rem; margin: .2rem 0; color: var(--rust); font-size: .86rem; }
.form-status { min-height: 1.3rem; color: var(--ink-soft); margin: 0; font-size: .84rem; }
.stack-form { display: grid; gap: 1rem; }
.button-row, .field-row { display: flex; gap: .7rem; align-items: end; flex-wrap: wrap; }
.field-row > * { flex: 1; }
.paper-card { background: rgba(255,253,247,.82); border: 1px solid rgba(23,61,52,.12); border-radius: 16px; box-shadow: 0 9px 35px rgba(23,61,52,.055); }

/* Login */
.login-page { overflow-x: hidden; }
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); padding: clamp(1.4rem, 5vw, 5rem); gap: clamp(3rem, 8vw, 9rem); align-items: center; position: relative; }
.login-wrap::before { content: ""; position: absolute; width: 42vw; height: 42vw; border: 1px solid rgba(23,61,52,.08); border-radius: 50%; left: -17vw; top: -20vw; box-shadow: 0 0 0 6vw rgba(23,61,52,.025), 0 0 0 12vw rgba(23,61,52,.018); pointer-events: none; }
.login-story { max-width: 650px; position: relative; animation: reveal-up .75s ease both; }
.login-story h1 { margin: 1.3rem 0 1.4rem; font-size: clamp(3rem, 6vw, 6.2rem); line-height: 1.08; font-family: var(--kai); font-weight: 500; }
.login-story h1 em { color: var(--amber); font-style: normal; }
.login-lead { max-width: 34rem; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.9; }
.login-card { width: 100%; max-width: 470px; justify-self: end; padding: clamp(1.6rem, 4vw, 3rem); background: rgba(255,253,247,.83); backdrop-filter: blur(10px); border: 1px solid rgba(23,61,52,.13); border-radius: 22px 6px 22px 6px; box-shadow: var(--shadow); }
.login-card h2 { font-family: var(--kai); font-size: 2rem; margin-bottom: .5rem; }
.login-card header > p:last-child { color: var(--muted); }
.login-card form { display: grid; gap: .75rem; margin-top: 2rem; }
.privacy-note { color: var(--muted); margin: 1.6rem 0 0; text-align: center; font-size: .78rem; }
.ink-orbit { position: relative; width: 190px; height: 70px; margin-top: 3rem; opacity: .55; }
.ink-orbit span { position: absolute; border-radius: 50%; border: 1px solid var(--ink); }
.ink-orbit span:nth-child(1) { width: 170px; height: 55px; transform: rotate(-8deg); }
.ink-orbit span:nth-child(2) { width: 110px; height: 42px; left: 34px; top: 8px; transform: rotate(7deg); }
.ink-orbit span:nth-child(3) { width: 7px; height: 7px; background: var(--amber); border: 0; left: 145px; top: 14px; }
.reveal-card { animation: reveal-up .75s .15s ease both; }

/* Authenticated shell */
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar { height: 100vh; position: sticky; top: 0; display: flex; flex-direction: column; padding: 1.4rem 1rem; color: #f9f3e5; background: linear-gradient(155deg, #143c32, #0c2923 72%); box-shadow: 8px 0 35px rgba(13,44,38,.15); z-index: 20; }
.brand { color: inherit; text-decoration: none; display: flex; gap: .75rem; align-items: center; padding: .2rem .45rem 1.4rem; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: var(--kai); font-size: 1.25rem; }
.brand small { color: rgba(255,255,255,.58); font-size: .67rem; letter-spacing: .18em; margin-top: .14rem; }
.sidebar .brand-seal { color: var(--ink); background: var(--paper); }
.main-nav { display: grid; gap: .22rem; overflow-y: auto; }
.main-nav > p { color: rgba(255,255,255,.43); font-size: .65rem; letter-spacing: .19em; margin: 1rem .75rem .35rem; }
.nav-item { width: 100%; display: flex; align-items: center; gap: .75rem; border: 0; border-radius: 9px; background: transparent; color: rgba(255,255,255,.76); text-align: left; padding: .64rem .7rem; cursor: pointer; }
.nav-item > span:first-child { width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; font-family: var(--kai); }
.nav-item span:last-child { display: grid; font-size: .88rem; }
.nav-item small { color: rgba(255,255,255,.42); font-size: .65rem; margin-top: .12rem; }
.nav-item:hover, .nav-item.active { background: rgba(255,255,255,.1); color: #fff; }
.nav-item.active > span:first-child { color: var(--ink-deep); background: var(--amber-soft); border-color: var(--amber-soft); }
.sidebar-user { margin-top: auto; border-top: 1px solid rgba(255,255,255,.12); padding: 1rem .35rem 0; display: grid; grid-template-columns: 35px 1fr 38px; gap: .65rem; align-items: center; }
.sidebar-user .avatar { width: 35px; height: 35px; display: grid; place-items: center; color: var(--ink-deep); background: var(--amber-soft); border-radius: 50%; }
.sidebar-user strong, .sidebar-user small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user small { color: rgba(255,255,255,.48); font-size: .68rem; margin-top: .1rem; }
.sidebar-user .icon-button { color: rgba(255,255,255,.7); }
.sidebar:has(.pro-usage-card) { overflow-y: auto; }
.sidebar:has(.pro-usage-card) .brand { flex-shrink: 0; }
.sidebar:has(.pro-usage-card) .main-nav { flex: 0 1 auto; min-height: 80px; }
.sidebar:has(.pro-usage-card) .sidebar-user { flex-shrink: 0; margin-top: .9rem; }
.pro-usage-card { flex: 0 0 auto; margin-top: auto; padding: .85rem; border: 1px solid #708873; border-radius: 11px; background: #203f33; color: #e6eadb; }
.sidebar .pro-usage-card { margin-top: auto; }
.sidebar .main-nav:has(+ .pro-usage-card) { margin-bottom: 1rem; }
.pro-usage-head, .pro-usage-line, .pro-usage-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.pro-usage-head strong { font-family: var(--kai); font-size: .95rem; }
.pro-usage-head > span { color: #e3d7ab; border: 1px solid #8e916f; border-radius: 5px; padding: .12rem .3rem; font-size: .65rem; }
.pro-usage-window { margin-top: .85rem; }
.pro-usage-line { font-size: .72rem; }
.pro-usage-line b { color: #ead6a0; font: 1.2rem Georgia, serif; }
.pro-usage-card progress { display: block; width: 100%; height: 6px; margin-top: .4rem; border: 0; border-radius: 8px; overflow: hidden; appearance: none; background: #3b5748; }
.pro-usage-card progress[hidden] { display: none; }
.pro-usage-card progress::-webkit-progress-bar { background: #3b5748; }
.pro-usage-card progress::-webkit-progress-value { background: #e8d5a1; border-radius: 8px; }
.pro-usage-card progress::-moz-progress-bar { background: #e8d5a1; border-radius: 8px; }
.pro-usage-reset { margin: .4rem 0 0; color: #b5c7b6; font-size: .65rem; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-line; }
.pro-usage-footer { margin-top: .85rem; padding-top: .65rem; border-top: 1px solid #49614b; }
.pro-usage-footer > span { font-size: .63rem; line-height: 1.6; white-space: pre-line; color: #b5c7b6; }
.pro-usage-query { flex-shrink: 0; min-height: 40px; border: 1px solid #e0d09e; border-radius: 7px; padding: .45rem .6rem; background: #e8d9a9; color: #223b2e; font-size: .7rem; cursor: pointer; }
.pro-usage-query:disabled { opacity: .65; cursor: wait; }
.pro-usage-query:focus-visible { outline: 2px solid #fff5d6; outline-offset: 3px; }
.pro-usage-notice { margin: .55rem 0 0; color: #f2d99e; font-size: .68rem; line-height: 1.6; overflow-wrap: anywhere; }
.pro-usage-notice:empty { display: none; }
.pro-usage-hint { margin: .65rem 0 0; color: #a9bca9; font-size: .61rem; line-height: 1.6; }
.workspace-main { min-width: 0; padding: clamp(1.2rem, 3vw, 3.2rem); }
.workspace-view { display: none; max-width: 1480px; margin: 0 auto; animation: reveal-up .38s ease both; }
.workspace-view.active { display: block; }
.view-heading { min-height: 92px; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.35rem; }
.view-heading h1 { font-family: var(--kai); font-size: clamp(2rem, 3.3vw, 3.2rem); font-weight: 500; margin-bottom: .2rem; }
.view-heading p:last-child { color: var(--muted); margin-bottom: 0; }
.status-chip { display: inline-flex; align-items: center; border-radius: 99px; background: rgba(23,61,52,.1); color: var(--ink); padding: .4rem .65rem; font-size: .73rem; white-space: nowrap; }
.status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4d8b6e; margin-right: .4rem; box-shadow: 0 0 0 3px rgba(77,139,110,.12); }
.status-chip.amber { color: #815219; background: rgba(183,122,45,.11); }
.status-chip.amber::before { background: var(--amber); }
.chat-layout { display: grid; grid-template-columns: 275px minmax(0, 1fr); min-height: calc(100vh - 195px); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(255,253,247,.66); box-shadow: var(--shadow); }
.conversation-rail { border-right: 1px solid var(--line); padding: 1rem; background: rgba(232,223,202,.34); }
.rail-head, .chat-head, .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.rail-head h2 { margin: 0; font-size: 1rem; }
.conversation-list { display: grid; gap: .35rem; margin-top: .9rem; }
.conversation-item { width: 100%; border: 0; background: transparent; padding: .72rem; border-radius: 9px; cursor: pointer; text-align: left; display: grid; gap: .18rem; }
.conversation-item strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversation-item small { color: var(--muted); font-size: .7rem; }
.conversation-item:hover, .conversation-item.active { background: var(--paper-bright); box-shadow: 0 5px 16px rgba(23,61,52,.07); }
.chat-paper { min-width: 0; display: grid; grid-template-rows: auto 1fr auto; height: calc(100vh - 195px); }
.chat-head { padding: .9rem 1.2rem; border-bottom: 1px solid var(--line); }
.chat-head h2 { margin: 0 0 .1rem; font-size: 1rem; }
.chat-head p { color: var(--muted); font-size: .7rem; margin: 0; }
.messages { min-height: 0; overflow-y: auto; padding: clamp(1rem,3vw,2.2rem); display: flex; flex-direction: column; gap: 1rem; }
.message { max-width: min(78%, 720px); padding: .9rem 1rem; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 4px 15px 15px 15px; background: var(--paper-bright); box-shadow: 0 5px 16px rgba(23,61,52,.06); }
.message.user { align-self: flex-end; color: white; background: var(--ink); border-radius: 15px 4px 15px 15px; }
.message.pending { color: var(--muted); border: 1px dashed var(--line); box-shadow: none; animation: pending-pulse 1.2s ease-in-out infinite alternate; }
.message small { display: block; opacity: .55; margin-bottom: .3rem; font-size: .66rem; }
.message.with-images { width: min(78%, 720px); }
.message-attachments { display: grid; gap: .8rem; margin-top: .7rem; white-space: normal; }
.message-image { margin: 0; min-width: 0; }
.message-image-open { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--paper-deep); cursor: zoom-in; }
.message-image-open img { display: block; width: 100%; max-height: 440px; aspect-ratio: 1; object-fit: contain; }
.message-image-status { margin: .4rem 0; color: var(--muted); font-size: .73rem; }
.message-image-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.message-image-actions a { text-decoration: none; }
.image-lightbox { width: min(1000px, 94vw); max-height: 92vh; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-bright); }
.image-lightbox::backdrop { background: rgba(0,0,0,.65); }
.image-lightbox > button { display: block; margin: 0 0 .7rem auto; }
.image-lightbox img { display: block; width: 100%; max-height: 78vh; object-fit: contain; }
.composer { margin: .8rem; display: grid; grid-template-columns: 1fr 45px; gap: .55rem; align-items: end; padding: .55rem; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-bright); }
.composer[aria-busy="true"] { border-color: rgba(183,122,45,.48); }
.composer textarea { border: 0; box-shadow: none; background: transparent; resize: none; max-height: 180px; }
.send-button { width: 42px; height: 42px; border: 0; border-radius: 11px; color: white; background: var(--ink); font-size: 1.2rem; cursor: pointer; }
.send-button:disabled { color: rgba(255,255,255,.72); background: var(--muted); cursor: wait; opacity: .7; }
.empty-state { margin: auto; text-align: center; color: var(--muted); padding: 2rem; }
.empty-state > span { margin: 0 auto 1rem; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; border: 1px dashed rgba(23,61,52,.28); color: var(--amber); font-family: var(--kai); font-size: 1.5rem; }
.empty-state h3 { color: var(--ink); margin-bottom: .4rem; }

/* Studio, skills, settings */
.studio-grid { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(380px, 1.28fr); gap: 1.1rem; }
.image-mode-switch { display: flex; gap: .4rem; }
.image-mode-switch .active { color: white; background: var(--ink); }
.studio-controls { padding: 1.25rem; display: grid; gap: .9rem; }
.edit-source-preview { min-height: 190px; display: grid; place-items: center; overflow: hidden; border: 1px dashed var(--line); border-radius: 10px; background: var(--paper-deep); }
.edit-source-preview img { display: block; max-width: 100%; max-height: 320px; object-fit: contain; }
.canvas-stage { min-height: 480px; display: grid; place-items: center; padding: 1rem; overflow: hidden; }
.canvas-stage img { max-width: 100%; max-height: 65vh; object-fit: contain; border-radius: 9px; box-shadow: 0 15px 35px rgba(23,61,52,.16); }
.generation-loading { text-align: center; }
.brush-loader { width: 180px; height: 5px; margin: 1rem auto; background: var(--paper-deep); overflow: hidden; border-radius: 10px; }
.brush-loader::after { content: ""; display: block; height: 100%; width: 45%; background: var(--amber); animation: brush 1.2s infinite ease-in-out; }
.inline-notice { padding: .65rem .75rem; border-left: 3px solid var(--amber); color: var(--muted); background: rgba(234,213,167,.18); font-size: .82rem; }
.section-heading { margin: 2.3rem 0 1rem; }
.section-heading h2 { margin-bottom: 0; font-family: var(--kai); font-size: 1.8rem; }
.gallery-grid, .skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.gallery-item, .skill-card { background: rgba(255,253,247,.83); border: 1px solid var(--line); border-radius: 13px; overflow: hidden; box-shadow: 0 8px 22px rgba(23,61,52,.05); animation: reveal-up .35s ease both; }
.gallery-item { transition: border-color .2s, box-shadow .2s; }
.gallery-item.source-version { border-color: rgba(183,122,45,.34); }
.gallery-item.source-located { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(183,122,45,.18), 0 12px 30px rgba(23,61,52,.12); }
.gallery-item img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper-deep); }
.gallery-details { display: grid; gap: .4rem; padding: .8rem .8rem 0; }
.gallery-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.gallery-badge { padding: .22rem .45rem; border-radius: 99px; color: var(--ink-soft); background: rgba(23,61,52,.08); font-size: .67rem; font-weight: 700; }
.gallery-badge.newest { color: #815219; background: rgba(183,122,45,.16); }
.gallery-badge.source { color: var(--ink); border: 1px solid rgba(183,122,45,.28); background: transparent; }
.gallery-version, .gallery-time, .gallery-source-deleted { margin: 0; }
.gallery-version { font-size: .78rem; font-weight: 700; letter-spacing: .04em; }
.gallery-time, .gallery-source-deleted, .gallery-help { color: var(--muted); font-size: .75rem; }
.gallery-help { margin: .35rem 0 0; }
.gallery-source-deleted { color: var(--rust); }
.gallery-source-link { width: fit-content; border: 0; padding: .15rem 0; color: var(--ink-soft); background: transparent; cursor: pointer; font-size: .75rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.gallery-source-link:hover { color: var(--amber); }
.gallery-actions, .skill-card { padding: .8rem; }
.gallery-actions { display: flex; gap: .4rem; justify-content: space-between; flex-wrap: wrap; }
.gallery-actions a { text-decoration: none; }
.skill-card { min-height: 210px; display: flex; flex-direction: column; }
.skill-card h3 { margin-bottom: .45rem; }
.skill-card p { color: var(--muted); line-height: 1.6; font-size: .84rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.skill-tags { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .8rem; }
.skill-tags span { padding: .2rem .45rem; border-radius: 99px; background: rgba(183,122,45,.12); color: #815219; font-size: .68rem; }
.skill-actions { margin-top: auto; display: flex; gap: .35rem; }
.settings-grid, .provider-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
.settings-grid > form, .provider-form { padding: 1.35rem; }
.provider-form header { display: flex; justify-content: space-between; align-items: center; }
.provider-form header > div { display: flex; gap: .7rem; align-items: center; }
.provider-form h2 { margin: 0; font-size: 1.12rem; }
.provider-mark { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: white; background: var(--ink); font-family: var(--kai); }
.switch-line { display: flex; align-items: center; gap: .6rem; }
.switch-line input { width: auto; accent-color: var(--ink); }
.storage-card { margin-top: 1.1rem; padding: 1.2rem; display: flex; justify-content: space-between; align-items: center; }
.storage-card h2 { margin-bottom: .3rem; }
.storage-card p:last-child { margin: 0; color: var(--muted); }
.table-wrap { overflow: auto; }
table { border-collapse: collapse; width: 100%; min-width: 760px; }
th, td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { color: var(--muted); font-size: .73rem; letter-spacing: .08em; }
td { font-size: .86rem; }
.account-name strong, .account-name small { display: block; }
.account-name small { color: var(--muted); margin-top: .2rem; }
.forced-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1.2rem; }
.forced-card { width: min(500px, 100%); padding: clamp(1.5rem, 5vw, 3rem); background: var(--paper-bright); border: 1px solid var(--line); border-radius: 22px 6px; box-shadow: var(--shadow); }
.forced-card h1 { font-family: var(--kai); font-size: 2.4rem; font-weight: 500; margin: 1rem 0 .7rem; }
.forced-card > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.forced-card .stack-form { margin: 1.5rem 0 .7rem; }
.mobile-header, .mobile-nav, .mobile-drawer, .drawer-backdrop, .mobile-only { display: none; }
.rail-actions, .chat-actions { display: flex; align-items: center; gap: .25rem; }

/* Dialog and feedback */
dialog { width: min(540px, calc(100% - 2rem)); color: var(--ink-deep); background: var(--paper-bright); border: 1px solid var(--line); border-radius: 17px 5px; padding: 1.35rem; box-shadow: 0 30px 80px rgba(13,44,38,.28); }
dialog::backdrop { background: rgba(13,44,38,.48); backdrop-filter: blur(3px); }
.dialog-head { display: flex; justify-content: space-between; }
.dialog-head h2 { margin-bottom: .8rem; }
#dialog-fields { display: grid; gap: .85rem; }
.toast-region { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; display: grid; gap: .5rem; }
.toast { max-width: 380px; color: white; background: var(--ink-deep); border-left: 4px solid var(--amber); border-radius: 8px; padding: .85rem 1rem; box-shadow: var(--shadow); animation: toast-in .28s ease both; }
.toast.error { border-color: #d98572; }

@keyframes reveal-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pending-pulse { from { opacity: .62; } to { opacity: 1; } }
@keyframes brush { from { transform: translateX(-110%); } to { transform: translateX(330%); } }
@keyframes toast-in { from { opacity: 0; transform: translateX(15px); } }

@media (max-width: 900px) {
  .login-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .login-story { text-align: center; margin: 0 auto; }
  .login-story .brand-seal { margin: auto; }
  .ink-orbit { display: none; }
  .login-card { justify-self: center; }
  body.mobile-surface-open { overflow: hidden; }
  .app-shell { display: block; min-height: 100vh; min-height: 100dvh; }
  .sidebar { display: none; }
  .workspace-main { padding: .8rem 1rem calc(5.4rem + env(safe-area-inset-bottom)); }
  .mobile-header { display: flex; align-items: center; justify-content: space-between; min-height: 44px; margin: 0 0 .7rem; }
  .mobile-header .brand { padding: 0; color: var(--ink); }
  .mobile-header .brand-seal { color: var(--paper-bright); background: var(--ink); }
  .mobile-only { display: inline-grid; }
  .icon-button, .button.compact, input, textarea, select { min-height: 44px; }
  .icon-button { min-width: 44px; width: 44px; height: 44px; }
  .mobile-nav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; z-index: 40; bottom: 0; left: 0; right: 0; padding: .38rem max(.35rem, env(safe-area-inset-right)) calc(.32rem + env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-left)); background: rgba(255,253,247,.96); border-top: 1px solid var(--line); backdrop-filter: blur(12px); }
  .mobile-nav button { min-width: 0; min-height: 52px; border: 0; background: transparent; color: var(--muted); display: grid; justify-items: center; align-content: center; gap: .16rem; font-size: .64rem; padding: .25rem; cursor: pointer; }
  .mobile-nav button span { font-family: var(--kai); font-size: 1.15rem; line-height: 1; }
  .mobile-nav button.active { color: var(--ink); font-weight: 700; }
  .mobile-drawer { display: flex; flex-direction: column; gap: .25rem; position: fixed; right: 0; top: 0; bottom: 0; width: min(330px, 88vw); z-index: 60; padding: 1.2rem max(1.2rem, env(safe-area-inset-right)) calc(1.2rem + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--paper-bright); box-shadow: -20px 0 60px rgba(13,44,38,.2); transform: translateX(105%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .mobile-drawer.open { transform: none; visibility: visible; transition-delay: 0s; }
  .mobile-drawer .pro-usage-card { margin-top: auto; margin-bottom: .7rem; }
  .mobile-drawer .pro-usage-query { min-height: 44px; }
  .mobile-drawer > button { flex-shrink: 0; }
  .mobile-drawer button:not(.icon-button):not(.pro-usage-query) { min-height: 48px; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: .8rem .4rem; text-align: left; cursor: pointer; }
  .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 1rem; }
  .drawer-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(13,44,38,.42); backdrop-filter: blur(2px); }
  .drawer-backdrop:not([hidden]) { display: block; }
  .chat-view.active { display: flex; flex-direction: column; height: calc(100vh - 7.8rem - env(safe-area-inset-bottom)); height: calc(100dvh - 7.8rem - env(safe-area-inset-bottom)); min-height: 0; overflow: hidden; animation: none; }
  .chat-view .view-heading { flex: 0 0 auto; min-height: auto; margin-bottom: .65rem; align-items: center; }
  .chat-view .view-heading h1 { font-size: clamp(1.65rem, 7vw, 2rem); line-height: 1.08; }
  .chat-view .view-heading .kicker { margin-bottom: .3rem; }
  .chat-view .view-heading p:last-child { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72vw; }
  .chat-layout { flex: 1 1 auto; display: block; min-height: 0; overflow: hidden; border-radius: 14px; }
  .conversation-rail { position: fixed; left: 0; right: 0; bottom: calc(4.15rem + env(safe-area-inset-bottom)); z-index: 60; height: min(72vh, 620px); height: min(72dvh, 620px); display: flex; flex-direction: column; padding: 1rem max(1rem, env(safe-area-inset-right)) 1rem max(1rem, env(safe-area-inset-left)); border: 0; border-radius: 20px 20px 0 0; background: var(--paper-bright); box-shadow: 0 -20px 60px rgba(13,44,38,.22); transform: translateY(105%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; }
  .conversation-rail.open { transform: none; visibility: visible; transition-delay: 0s; }
  .conversation-list { min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: .4rem; margin-top: .8rem; padding: 0 0 calc(.4rem + env(safe-area-inset-bottom)); }
  .conversation-item { min-height: 52px; padding: .75rem; border: 1px solid transparent; }
  .conversation-item.active { border-color: var(--line); }
  .chat-paper { height: 100%; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
  .chat-head { min-height: 58px; padding: .42rem .55rem; gap: .35rem; }
  .conversation-trigger { grid-template-columns: auto auto; align-items: center; gap: .35rem; min-height: 44px; padding: .45rem .55rem; border: 0; border-radius: 10px; background: rgba(23,61,52,.07); font-weight: 700; cursor: pointer; }
  .chat-title { flex: 1 1 auto; min-width: 0; }
  .chat-title h2, .chat-title p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chat-actions { flex: 0 0 auto; }
  .messages { min-height: 0; padding: 1rem; overscroll-behavior: contain; }
  .composer { flex: 0 0 auto; margin: .55rem; grid-template-columns: minmax(0, 1fr) 44px; padding: .35rem; }
  .composer textarea { min-height: 48px; max-height: 120px; padding: .65rem .7rem; font-size: 16px; }
  .send-button { width: 44px; height: 44px; }
  .studio-grid, .settings-grid, .provider-grid { grid-template-columns: 1fr; }
  .canvas-stage { min-height: 350px; }
  .table-wrap { overflow: visible; padding: 0; border: 0; background: transparent; box-shadow: none; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: 100%; min-width: 0; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  .table-wrap tr { margin-bottom: .8rem; padding: .55rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,253,247,.83); box-shadow: 0 8px 22px rgba(23,61,52,.05); }
  .table-wrap td { display: grid; grid-template-columns: minmax(6.4rem, .42fr) minmax(0, 1fr); align-items: center; gap: .7rem; min-height: 44px; padding: .6rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
  .table-wrap td::before { content: attr(data-label); color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .04em; }
  .table-wrap td:last-child { border-bottom: 0; }
  .table-wrap .account-table-status { display: block; padding: .9rem 0; border: 0; text-align: center; }
  .table-wrap .account-table-status::before { content: none; }
  .table-wrap .button-row { justify-content: flex-start; }
  dialog { max-height: min(82vh, 720px); max-height: min(82dvh, 720px); overflow-y: auto; }
  .toast-region { right: .75rem; left: .75rem; bottom: calc(4.65rem + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
}

@media (max-width: 560px) {
  .login-wrap { padding: 1rem; align-content: center; }
  .login-story h1 { font-size: 2.7rem; }
  .login-lead { display: none; }
  .login-card { padding: 1.35rem; }
  .view-heading { min-height: auto; margin-bottom: 1rem; }
  .view-heading h1 { font-size: 2rem; }
  .view-heading > .button { align-self: center; padding: .6rem .7rem; }
  .view-heading > .status-chip { display: none; }
  .chat-layout { margin: 0 -.55rem; border-radius: 12px; }
  .message { max-width: 90%; }
  .gallery-grid, .skill-grid { grid-template-columns: 1fr; gap: .75rem; }
  .gallery-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .gallery-actions > * { width: 100%; text-align: center; }
  .storage-card { align-items: flex-start; gap: 1rem; flex-direction: column; }
  .button-row .button { flex: 1; }
  dialog { position: fixed; inset: auto 0 0; width: 100%; max-width: none; margin: 0; padding: 1.2rem 1rem calc(1.2rem + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 20px 20px 0 0; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .workspace-main { padding-top: .45rem; }
  .mobile-header { margin-bottom: .35rem; }
  .chat-view.active { height: calc(100dvh - 7.4rem - env(safe-area-inset-bottom)); }
  .chat-view .view-heading { margin-bottom: .35rem; }
  .chat-view .view-heading .kicker, .chat-view .view-heading p:last-child { display: none; }
  .chat-view .view-heading h1 { margin: 0; font-size: 1.35rem; }
  .chat-head { min-height: 50px; }
  .messages { padding: .65rem; }
  .composer { margin: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}