/* nGyn Image Lab — shared design system: tokens, controls, app header, cards and dialogs.
   Loaded by every page before its page-specific stylesheet. */
:root{
  --font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  --bg:#f3f5fb;--surface:#fff;--surface-2:#f8f9fd;--surface-3:#eef1f8;
  --border:#e2e6f0;--border-strong:#cdd3e2;
  --text:#121a33;--text-2:#465068;--text-3:#636c85;
  /* Interactive accent (buttons, links, focus): indigo. White text on it is 6.3:1. */
  --accent:#4f46e5;--accent-hover:#4338ca;--accent-soft:#eef0ff;--accent-line:#b9bdf7;
  /* Brand gradient: teal → blue → violet. Text never sits on its light end. */
  --brand-grad:linear-gradient(120deg,#0ea5a0 0%,#3b6ee8 55%,#7c4dff 100%);
  --cta-grad:linear-gradient(120deg,#0f766e 0%,#3b49df 60%,#5b3fd6 100%);
  --header-bg:linear-gradient(100deg,#0b1330 0%,#14204d 58%,#1b2a64 100%);
  /* Step identities, each with a 4.5:1+ text shade, a tint and a line colour. */
  --c-violet:#7c3aed;--c-violet-soft:#f3edff;--c-violet-line:#cdb6fb;
  --c-teal:#0f766e;--c-teal-soft:#e3f5f2;--c-teal-line:#9dd6cd;
  --c-blue:#2563eb;--c-blue-soft:#e9f0ff;--c-blue-line:#a8c3f8;
  --c-orange:#c2410c;--c-orange-soft:#fff1e7;--c-orange-line:#f6c3a0;
  --c-pink:#be185d;--c-pink-soft:#fdebf3;
  --good:#047857;--good-soft:#e3f6ee;--good-line:#9fdcc2;
  --warn:#8a5300;--warn-soft:#fff7e6;--warn-line:#f1d595;
  --danger:#b42318;--danger-soft:#fdeceb;--danger-line:#f5c2bd;
  --stage:#090f20;--stage-2:#172142;
  --radius:14px;--radius-sm:9px;
  --shadow:0 1px 2px rgb(16 24 54/6%),0 8px 24px rgb(16 24 54/6%);
  --shadow-lg:0 2px 6px rgb(16 24 54/8%),0 20px 44px rgb(16 24 54/12%);
  --header-h:60px;--gap:20px;
  /* Aliases kept for older stylesheets */
  --teal:var(--accent);--line:var(--border);--muted:var(--text-3);--white:#fff;--rose:#c17f78;
  color-scheme:light;font-family:var(--font);color:var(--text);background:var(--bg);font-synthesis:none;-webkit-font-smoothing:antialiased
}
*{box-sizing:border-box}
body{margin:0;font-size:14px;line-height:1.5;background:var(--bg)}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
a{color:var(--accent)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.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}
.icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
h1,h2,h3{color:var(--text);margin:0;letter-spacing:-.01em}
h1{font-size:22px;font-weight:650}
h2{font-size:15px;font-weight:620}
h3{font-size:14px;font-weight:620}

/* ---------- Buttons ---------- */
.primary-button,.secondary-button,.quiet-button,.dark-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--radius-sm);padding:9px 14px;font-size:13px;font-weight:560;line-height:1.25;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s}
.primary-button,.dark-button{background:var(--accent);border:1px solid var(--accent);color:#fff;box-shadow:0 1px 2px rgb(40 36 140/22%),0 4px 12px rgb(79 70 229/18%)}
.primary-button:hover:not(:disabled),.dark-button:hover:not(:disabled){background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 2px 4px rgb(40 36 140/24%),0 6px 16px rgb(79 70 229/26%)}
.secondary-button,.quiet-button{background:var(--surface);border:1px solid var(--border-strong);color:var(--text)}
.secondary-button:hover:not(:disabled),.quiet-button:hover:not(:disabled){background:var(--surface-2);border-color:var(--accent-line)}
.secondary-button.small,.primary-button.small{padding:7px 11px;font-size:12.5px}
.link-button{background:none;border:0;padding:4px 2px;color:var(--accent);font-size:13px;font-weight:550}
.link-button:hover:not(:disabled){text-decoration:underline;text-underline-offset:3px}
.icon-button{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--text-2)}
.icon-button:hover:not(:disabled){background:var(--surface-3);color:var(--text)}
.icon-button .icon{width:18px;height:18px}

/* ---------- Form controls ---------- */
select,input[type=number],input[type=text],input[type=search],input:not([type]),textarea{width:100%;min-height:36px;padding:7px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-size:13px}
input::placeholder,textarea::placeholder{color:#8a968f}
select{appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346564f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;background-size:14px;cursor:pointer}
select:disabled,input:disabled,textarea:disabled{background-color:var(--surface-2);color:var(--text-3);cursor:not-allowed}
input[type=range]{width:100%;height:4px;margin:6px 0 14px;accent-color:var(--accent);cursor:pointer;display:block}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
.field-label{display:block;font-size:12px;font-weight:600;color:var(--text-2);margin:14px 0 6px}
.hint,.microcopy{font-size:12.5px;line-height:1.55;color:var(--text-3);margin:8px 0 0}
details.more{margin-top:12px;border-top:1px solid var(--border);padding-top:10px}
details.more>summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--text-2);list-style:none;display:flex;align-items:center;gap:6px}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details.more[open]>summary::before{transform:rotate(45deg)}
.tag{display:inline-block;font-size:11px;font-weight:620;padding:2px 8px;border-radius:999px;background:var(--surface-3);color:var(--text-2);white-space:nowrap;border:1px solid transparent}
.tag-good{background:var(--good-soft);color:var(--good);border-color:var(--good-line)}
.tag-warn{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.tag-ai{background:var(--accent-soft);color:#4338ca;border-color:var(--accent-line)}
.tag-pilot{background:var(--c-violet-soft);color:#6d28d9;border-color:var(--c-violet-line)}
.tag-classic{background:var(--surface-3);color:var(--text-2);border-color:var(--border)}
.count{font-size:12px;font-weight:650;background:var(--surface-3);color:var(--text-2);border-radius:999px;padding:1px 8px}
.error{color:var(--danger)!important}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--text-3);text-transform:uppercase}

/* ---------- App header: navy bar with a brand-gradient underline ---------- */
.app-header{position:sticky;top:0;z-index:20;height:var(--header-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 24px;background:var(--header-bg);color:#fff;box-shadow:0 6px 20px rgb(9 15 40/22%)}
.app-header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--brand-grad);opacity:.95}
.app-header :focus-visible{outline-color:#a5b4fc}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-weight:700;font-size:17px;letter-spacing:-.02em;justify-self:start}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--brand-grad);color:#fff;font-size:17px;font-weight:750;box-shadow:0 4px 14px rgb(91 63 214/45%),inset 0 1px 0 rgb(255 255 255/30%)}
.brand-light{font-weight:450;color:rgb(219 226 255/70%)}
.brand-logo{display:block;width:auto;height:30px;flex:none;filter:drop-shadow(0 2px 6px rgb(0 0 0/30%))}
.brand-name{white-space:nowrap}
.workspace-tabs{display:flex;gap:3px;padding:4px;background:rgb(255 255 255/7%);border:1px solid rgb(255 255 255/10%);border-radius:12px}
.nav-button{display:flex;align-items:center;gap:7px;border:0;background:transparent;padding:7px 13px;border-radius:9px;font-size:13px;font-weight:580;color:rgb(219 226 255/78%);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.nav-button:hover{color:#fff;background:rgb(255 255 255/10%)}
.nav-button.active{background:#fff;color:var(--accent);box-shadow:0 2px 10px rgb(0 0 0/28%)}
.nav-button .external{font-size:11px;color:rgb(219 226 255/60%)}
.header-actions{display:flex;align-items:center;gap:6px;justify-self:end}
.local-badge{display:flex;align-items:center;gap:7px;font-size:12px;color:rgb(219 226 255/82%);padding:5px 10px;white-space:nowrap}
.status-dot,.tiny-status{width:8px;height:8px;border-radius:50%;background:#10b981;box-shadow:0 0 0 3px rgb(16 185 129/22%);flex:none;display:block}
.app-header .status-dot{background:#34d399;box-shadow:0 0 0 3px rgb(52 211 153/25%),0 0 10px rgb(52 211 153/55%)}
.header-link{border:0;background:none;color:var(--text-2);font-size:13px;font-weight:560;padding:6px 9px;border-radius:8px;text-decoration:none;white-space:nowrap}
.header-link:hover{background:var(--surface-3);color:var(--text)}
.app-header .header-link{color:rgb(219 226 255/82%)}
.app-header .header-link:hover{background:rgb(255 255 255/10%);color:#fff}

/* ---------- Footer, toast, dialogs ---------- */
.app-footer{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;padding:22px 2px 28px;font-size:12px;color:var(--text-3)}
.app-footer a{color:var(--text-2);text-decoration:none;font-weight:550}
.app-footer a:hover{text-decoration:underline}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:30;max-width:min(92vw,640px);padding:12px 18px 12px 16px;border-radius:12px;background:#121b3d;color:#eef1ff;font-size:13.5px;line-height:1.55;box-shadow:0 12px 34px rgb(9 15 40/35%);border-left:4px solid #6d7cff}
dialog{max-width:720px;width:calc(100% - 32px);max-height:86vh;overflow:auto;border:1px solid var(--border);border-top:4px solid transparent;border-image:none;border-radius:18px;padding:24px 28px 28px;color:var(--text);background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--brand-grad) border-box;box-shadow:0 24px 80px rgb(9 15 40/32%)}
dialog::backdrop{background:rgb(9 15 40/55%);backdrop-filter:blur(3px)}
.dialog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.dialog-top .icon-button{font-size:24px;line-height:1}
dialog h2{font-size:22px;font-weight:620;margin:10px 0 12px}
dialog h3{font-size:15px;margin:22px 0 6px}
dialog p,dialog li{font-size:14px;line-height:1.7;color:var(--text-2)}
dialog .note{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn);padding:10px 14px;border-radius:var(--radius-sm);font-size:13px}
dialog code{font:12.5px var(--mono);color:#4338ca;background:var(--accent-soft);padding:1px 5px;border-radius:5px;word-break:break-word}

/* ---------- Responsive header ---------- */
@media(max-width:1240px){.brand-light,.local-badge{display:none}.app-header{padding:0 16px}:root{--gap:16px}}
@media(max-width:980px){
  .app-header{grid-template-columns:auto 1fr;height:auto;padding:10px 16px;row-gap:10px}
  .workspace-tabs{grid-column:1/-1;grid-row:2;overflow-x:auto;scrollbar-width:none}
  .header-actions{grid-column:2;grid-row:1}
  :root{--header-h:104px}
}
@media(max-width:560px){
  .header-link{padding:6px 5px;font-size:12.5px}
  .nav-button{padding:7px 10px;font-size:12.5px}
  dialog{padding:20px}
}