:root {
  --bg: #f5f6f8;
  --bg-elevated: rgba(255,255,255,.78);
  --surface: #ffffff;
  --surface-2: #f0f2f5;
  --text: #121317;
  --muted: #717782;
  --line: rgba(18,19,23,.08);
  --accent: #111318;
  --accent-text: #ffffff;
  --shadow: 0 18px 55px rgba(25, 27, 33, .08);
  --shadow-soft: 0 8px 24px rgba(20,24,30,.05);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --topbar-h: 74px;
  --rail-w: 214px;
}

[data-theme="dark"] {
  --bg: #0b0c0f;
  --bg-elevated: rgba(22,24,29,.76);
  --surface: #14161b;
  --surface-2: #1b1e24;
  --text: #f5f7fa;
  --muted: #9ba2ad;
  --line: rgba(255,255,255,.08);
  --accent: #f2f3f5;
  --accent-text: #111216;
  --shadow: 0 22px 60px rgba(0,0,0,.28);
  --shadow-soft: 0 10px 28px rgba(0,0,0,.18);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 75% -20%, rgba(120,130,255,.10), transparent 35%),
    radial-gradient(circle at -10% 50%, rgba(255,176,120,.08), transparent 28%),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; }
button { color: inherit; }
button, .dropzone { -webkit-tap-highlight-color: transparent; }

.app-shell { min-height: 100vh; padding-top: env(safe-area-inset-top); }
.glass { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.topbar {
  height: var(--topbar-h);
  position: fixed;
  z-index: 30;
  top: env(safe-area-inset-top);
  left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-elevated);
}
.brand-wrap,.top-actions,.hero-actions,.heading-actions,.section-head,.toolbar,.label-row,.dialog-head,.dialog-actions { display:flex; align-items:center; }
.brand-wrap { gap: 12px; }
.brand-mark { width:40px; height:40px; border-radius:14px; display:grid; place-items:center; background:var(--text); color:var(--bg); font-weight:800; box-shadow:var(--shadow-soft); }
.brand-name { font-size:14px; font-weight:780; letter-spacing:-.02em; }
.brand-subtitle { font-size:11px; color:var(--muted); margin-top:2px; }
.top-actions { gap:10px; }
.icon-btn,.profile-chip,.search-trigger { border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-soft); cursor:pointer; }
.icon-btn { width:42px; height:42px; border-radius:14px; display:grid; place-items:center; font-size:18px; }
.profile-chip { height:44px; border-radius:16px; padding:4px 12px 4px 5px; display:flex; gap:9px; align-items:center; }
.avatar { width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#f8dad4,#d8defc); color:#29272c; font-weight:800; font-size:12px; }
.profile-text { font-size:12px; font-weight:700; }
.search-trigger { height:42px; border-radius:14px; padding:0 10px 0 14px; display:flex; align-items:center; gap:10px; color:var(--muted); }
kbd { border:1px solid var(--line); background:var(--surface-2); border-radius:7px; padding:3px 6px; font-size:10px; color:var(--muted); box-shadow: inset 0 -1px 0 var(--line); }
.workspace { padding-top:var(--topbar-h); min-height:100vh; }
.rail {
  position:fixed; z-index:25; top:calc(var(--topbar-h) + env(safe-area-inset-top)); left:0; bottom:0;
  width:var(--rail-w); display:flex; flex-direction:column; justify-content:space-between;
  border-right:1px solid var(--line); background:rgba(255,255,255,.28); padding:18px 12px 16px;
}
[data-theme="dark"] .rail { background:rgba(12,13,16,.30); }
.nav-list { display:grid; gap:5px; }
.nav-item { width:100%; border:0; background:transparent; border-radius:14px; min-height:44px; padding:0 12px; display:flex; align-items:center; gap:11px; cursor:pointer; color:var(--muted); transition:.18s ease; text-align:left; }
.nav-item span { width:21px; text-align:center; font-size:17px; }
.nav-item b { font-size:12.5px; font-weight:650; }
.nav-item:hover { background:var(--surface); color:var(--text); transform:translateX(2px); }
.nav-item.active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-soft); }
.primary-nav { margin:8px 0 5px; background:var(--text); color:var(--bg); }
.primary-nav:hover { background:var(--text); color:var(--bg); }
.rail-footer { display:grid; gap:9px; }
.version-pill { font-size:10px; color:var(--muted); padding:0 12px; }
.content { margin-left:var(--rail-w); padding:36px clamp(24px,4vw,58px) 70px; }
.page { display:none; max-width:1440px; margin:0 auto; animation:pageIn .24s ease both; }
.page.active { display:block; }
@keyframes pageIn { from { opacity:0; transform:translateY(5px);} to {opacity:1; transform:none;} }
.panel { border:1px solid var(--line); background:var(--bg-elevated); box-shadow:var(--shadow-soft); border-radius:var(--radius-lg); }
.gradient-card { background:
  radial-gradient(circle at 82% 5%, rgba(155,169,255,.32), transparent 35%),
  radial-gradient(circle at 72% 100%, rgba(255,198,171,.24), transparent 42%),
  var(--surface); }
.hero { min-height:315px; padding:46px; position:relative; overflow:hidden; display:flex; align-items:center; }
.hero > div:first-child { max-width:720px; position:relative; z-index:2; }
.eyebrow { font-size:10px; font-weight:800; letter-spacing:.13em; color:var(--muted); }
h1,h2,h3,p { margin-top:0; }
.hero h1,.page-heading h1 { letter-spacing:-.045em; line-height:1.03; }
.hero h1 { font-size:clamp(34px,4vw,58px); margin:12px 0 18px; }
.hero p { max-width:640px; color:var(--muted); font-size:16px; line-height:1.65; }
.hero-actions { gap:10px; margin-top:25px; }
.hero-orb { position:absolute; width:310px; height:310px; right:-25px; border-radius:46% 54% 42% 58%; border:1px solid var(--line); background:linear-gradient(145deg,rgba(255,255,255,.4),rgba(255,255,255,.05)); transform:rotate(18deg); box-shadow:inset 0 0 80px rgba(255,255,255,.16); }
.btn { border:1px solid var(--line); min-height:44px; padding:0 17px; border-radius:14px; cursor:pointer; font-size:12.5px; font-weight:720; transition:.17s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--text); color:var(--bg); border-color:transparent; box-shadow:var(--shadow-soft); }
.btn-secondary { background:var(--surface); }
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:14px; }
.stat-card { padding:21px; min-height:138px; }
.stat-top { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }
.stat-card strong { display:block; font-size:31px; letter-spacing:-.04em; margin:21px 0 2px; }
.stat-card small { color:var(--muted); font-size:11px; }
.dashboard-grid { display:grid; grid-template-columns:1.55fr 1fr; gap:14px; margin-top:14px; }
.section-card { padding:25px; }
.section-head { justify-content:space-between; gap:18px; margin-bottom:20px; }
.section-head h2 { font-size:18px; letter-spacing:-.025em; margin:5px 0 0; }
.text-btn { border:0; background:transparent; cursor:pointer; color:var(--muted); font-size:12px; font-weight:700; padding:6px; }
.text-btn:hover { color:var(--text); }
.disabled-feature { opacity:.55; cursor:not-allowed; }
.empty-state { display:grid; justify-items:center; text-align:center; padding:50px 20px; color:var(--muted); }
.empty-state.compact { padding:34px 15px; }
.empty-state h3 { color:var(--text); font-size:14px; margin:9px 0 6px; }
.empty-state p { font-size:12px; margin:0; }
.empty-icon { width:44px;height:44px;border-radius:15px;display:grid;place-items:center;background:var(--surface-2);font-size:18px;color:var(--text); }
.beta-badge,.mini-badge,.status-pill,.roadmap-chip { border:1px solid var(--line); background:var(--surface-2); border-radius:999px; font-size:10px; padding:6px 9px; color:var(--muted); white-space:nowrap; }
.smart-stack { display:grid; gap:12px; }
.smart-row { display:flex; gap:12px; padding:15px; border-radius:16px; background:var(--surface); border:1px solid var(--line); }
.smart-row .dot { width:8px;height:8px;border-radius:50%;background:var(--text);margin-top:5px; }
.smart-row b,.smart-row small { display:block; }
.smart-row b { font-size:12px; margin-bottom:4px; }
.smart-row small { color:var(--muted); font-size:10.5px; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin:4px 0 28px; }
.page-heading h1 { font-size:clamp(34px,4vw,52px); margin:8px 0 8px; }
.page-heading p { color:var(--muted); margin:0; font-size:13px; }
.heading-actions { gap:9px; }
.product-layout { display:grid; grid-template-columns:minmax(380px,.82fr) minmax(560px,1.18fr); gap:15px; align-items:start; }
.upload-card,.form-card { padding:25px; }
.dropzone { min-height:245px; border:1px dashed color-mix(in srgb, var(--muted) 50%, transparent); border-radius:20px; display:grid; place-items:center; align-content:center; text-align:center; cursor:pointer; padding:28px; transition:.18s ease; background:linear-gradient(180deg,var(--surface),transparent); }
.dropzone:hover,.dropzone.dragover { border-color:var(--text); background:var(--surface-2); }
.drop-icon { width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--text);color:var(--bg);font-size:23px;margin-bottom:13px; }
.dropzone h3 { font-size:14px; margin-bottom:6px; }
.dropzone p,.dropzone small { color:var(--muted); }
.dropzone p { font-size:12px; margin-bottom:6px; }
.dropzone small { font-size:10px; }
.image-preview-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:12px; }
.preview-item { aspect-ratio:1; border-radius:15px; overflow:hidden; position:relative; border:1px solid var(--line); background:var(--surface-2); }
.preview-item img { width:100%; height:100%; object-fit:cover; display:block; }
.preview-item button { position:absolute;top:7px;right:7px;width:27px;height:27px;border:0;border-radius:9px;background:rgba(10,10,12,.72);color:#fff;cursor:pointer; }
.product-form { display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; }
.field { display:grid; gap:7px; }
.field.span-2 { grid-column:1/-1; }
.field label { font-size:11px; font-weight:700; color:var(--muted); }
.field input,.field textarea,.field select,.input-search,.filter-select,.global-search-box { width:100%; border:1px solid var(--line); background:var(--surface); color:var(--text); border-radius:14px; outline:none; }
.field input,.field select { min-height:44px; padding:0 13px; }
.field textarea { resize:vertical; padding:12px 13px; line-height:1.55; }
.field input:focus,.field textarea:focus,.field select:focus,.input-search:focus-within,.global-search-box:focus-within { border-color:color-mix(in srgb,var(--text) 30%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 5%,transparent); }
.label-row { justify-content:space-between; }
.status-pill.draft { background:var(--surface); }
.toolbar { justify-content:space-between; gap:10px; margin-bottom:18px; }
.input-search { max-width:520px; display:flex; align-items:center; padding:0 12px; }
.input-search input { width:100%; border:0; background:transparent; outline:none; min-height:44px; color:var(--text); padding:0 9px; }
.filter-select { width:auto; min-width:140px; min-height:44px; padding:0 12px; }
.products-list { display:grid; gap:9px; }
.product-row { display:grid; grid-template-columns:58px 1.5fr 1fr .8fr .7fr auto; gap:14px; align-items:center; padding:10px; border:1px solid var(--line); background:var(--surface); border-radius:17px; }
.product-thumb { width:58px;height:58px;border-radius:13px;object-fit:cover;background:var(--surface-2); }
.product-meta b,.product-meta small { display:block; }
.product-meta b { font-size:12px; }
.product-meta small,.cell-muted { color:var(--muted); font-size:10.5px; margin-top:3px; }
.row-actions { display:flex; gap:6px; }
.row-actions button { border:1px solid var(--line);background:var(--surface-2);border-radius:10px;width:34px;height:34px;cursor:pointer; }
.categories-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:11px; }
.category-card { padding:18px;border:1px solid var(--line);background:var(--surface);border-radius:17px;display:flex;justify-content:space-between;align-items:center; }
.category-card b { font-size:12px; }
.category-card span { color:var(--muted);font-size:10px; }
.coming-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
.feature-card { padding:28px; min-height:230px; display:flex; flex-direction:column; align-items:flex-start; }
.feature-icon { min-width:48px;height:48px;padding:0 11px;border-radius:16px;background:var(--surface-2);display:grid;place-items:center;font-weight:800;font-size:12px; }
.feature-card h2 { margin:24px 0 9px; font-size:18px; }
.feature-card p { color:var(--muted);font-size:12px;line-height:1.6; }
.roadmap-chip { margin-top:auto; }
.timeline { display:grid; gap:12px; }
.timeline-item { display:grid;grid-template-columns:12px 1fr auto;gap:13px;align-items:start; }
.timeline-dot { width:10px;height:10px;border-radius:50%;background:var(--text);margin-top:4px;box-shadow:0 0 0 5px var(--surface-2); }
.timeline-item b { display:block;font-size:12px;margin-bottom:3px; }
.timeline-item small,.timeline-time { color:var(--muted);font-size:10px; }
.settings-grid { display:grid;gap:12px; }
.setting-card { padding:22px;display:flex;align-items:center;justify-content:space-between;gap:22px; }
.setting-card h2 { font-size:15px;margin:0 0 5px; }
.setting-card p { margin:0;color:var(--muted);font-size:11px; }
.segmented { display:flex;padding:4px;border:1px solid var(--line);background:var(--surface-2);border-radius:13px; }
.segmented button { border:0;background:transparent;border-radius:10px;padding:8px 12px;cursor:pointer;color:var(--muted);font-size:10.5px; }
.segmented button.active { background:var(--surface);color:var(--text);box-shadow:var(--shadow-soft); }
.connection-dot { width:11px;height:11px;border-radius:50%;background:#d19d37;box-shadow:0 0 0 5px rgba(209,157,55,.13); }
.connection-dot.online { background:#4ca66a;box-shadow:0 0 0 5px rgba(76,166,106,.13); }
.connection-dot.offline { background:#c65f5f;box-shadow:0 0 0 5px rgba(198,95,95,.13); }
.modal-backdrop { position:fixed;z-index:100;inset:0;background:rgba(8,9,12,.42);backdrop-filter:blur(10px);padding:11vh 20px 20px; }
.search-modal { width:min(700px,100%);margin:0 auto;padding:12px; }
.global-search-box { min-height:56px;display:flex;align-items:center;gap:10px;padding:0 13px; }
.global-search-box input { flex:1;border:0;background:transparent;outline:none;color:var(--text);font-size:14px; }
.search-results { max-height:430px;overflow:auto;padding:9px 3px 3px; }
.search-hint { padding:24px;text-align:center;color:var(--muted);font-size:11px; }
.search-result { display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:13px;cursor:pointer; }
.search-result:hover { background:var(--surface-2); }
.search-result b { font-size:12px; }
.search-result small { color:var(--muted);font-size:10px; }
.dialog { width:min(460px,100%);margin:10vh auto 0;padding:23px; }
.dialog-head { justify-content:space-between;margin-bottom:20px; }
.dialog-head h2 { margin:5px 0 0;font-size:20px; }
.dialog-actions { justify-content:flex-end;gap:8px;margin-top:20px; }
.toast-region { position:fixed;z-index:120;right:20px;bottom:20px;display:grid;gap:8px; }
.toast { min-width:260px;max-width:360px;padding:13px 15px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);border-radius:14px;font-size:11.5px;animation:toastIn .22s ease; }
@keyframes toastIn { from { opacity:0;transform:translateY(8px);} to {opacity:1;transform:none;} }
.mobile-only { display:none; }

@media (max-width: 1100px) {
  :root { --rail-w: 78px; }
  .nav-item { justify-content:center;padding:0; }
  .nav-item b,.version-pill { display:none; }
  .nav-item span { width:auto; }
  .product-layout { grid-template-columns:1fr; }
  .dashboard-grid { grid-template-columns:1fr; }
  .categories-grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 760px) {
  :root { --topbar-h: 66px; }
  .mobile-only { display:grid; }
  .brand-subtitle,.search-label,.search-trigger kbd,.profile-text { display:none; }
  .search-trigger { width:42px;padding:0;justify-content:center; }
  .profile-chip { padding:4px; }
  .topbar { padding:0 14px; }
  .rail { width:min(270px,82vw); transform:translateX(-105%); transition:.22s ease; padding-bottom:calc(16px + env(safe-area-inset-bottom)); background:var(--bg-elevated); }
  .rail.open { transform:none; box-shadow:40px 0 80px rgba(0,0,0,.18); }
  .nav-item { justify-content:flex-start;padding:0 12px; }
  .nav-item b,.version-pill { display:block; }
  .nav-item span { width:21px; }
  .content { margin-left:0;padding:23px 14px calc(50px + env(safe-area-inset-bottom)); }
  .hero { padding:30px 24px;min-height:370px;align-items:flex-start; }
  .hero h1 { font-size:36px; }
  .hero-orb { width:230px;height:230px;right:-80px;bottom:-60px; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .page-heading { align-items:flex-start;flex-direction:column; }
  .heading-actions { width:100%; }
  .heading-actions .btn { flex:1; }
  .product-form { grid-template-columns:1fr; }
  .field.span-2 { grid-column:auto; }
  .toolbar { align-items:stretch;flex-direction:column; }
  .input-search { max-width:none; }
  .filter-select { width:100%; }
  .product-row { grid-template-columns:48px 1fr auto; }
  .product-thumb { width:48px;height:48px; }
  .product-row > .cell-muted,.product-row > .status-pill { display:none; }
  .categories-grid,.coming-grid { grid-template-columns:1fr; }
  .setting-card { align-items:flex-start;flex-direction:column; }
  .segmented { width:100%; }
  .segmented button { flex:1; }
  .image-preview-grid { grid-template-columns:repeat(2,1fr); }
  .modal-backdrop { padding-top:8vh; }
}
@media (max-width: 440px) {
  .brand-name { font-size:13px; }
  .top-actions { gap:6px; }
  .stat-grid { grid-template-columns:1fr; }
  .hero-actions { align-items:stretch;flex-direction:column; }
  .hero-actions .btn { width:100%; }
}


/* v1.0.1 — Product workflow */
.toolbar-end{display:flex;align-items:center;gap:10px}.product-row.clickable{cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease}.product-row.clickable:hover{transform:translateY(-1px);background:var(--surface-strong)}
.status-pill.published{background:rgba(52,199,89,.12);color:#248a3d;border-color:rgba(52,199,89,.22)}
.preview-item .saved-image-badge,.preview-item .new-image-badge{position:absolute;left:8px;bottom:8px;padding:4px 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.04em;backdrop-filter:blur(10px)}
.preview-item .saved-image-badge{background:rgba(15,23,42,.72);color:#fff}.preview-item .new-image-badge{background:rgba(255,255,255,.82);color:#111827}
@media (max-width:760px){.toolbar-end{width:100%;justify-content:space-between}.toolbar-end .filter-select{flex:1}.page-heading .heading-actions{flex-wrap:wrap}}

/* v1.0.3 — Studio Intelligence */
.btn-ai{background:linear-gradient(135deg,var(--surface),var(--surface-2));color:var(--text);border-color:color-mix(in srgb,var(--text) 15%,var(--line));box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.btn-ai:hover{border-color:color-mix(in srgb,var(--text) 32%,var(--line))}
.btn:disabled,.text-btn:disabled{opacity:.55;cursor:wait;transform:none}
.ai-photo-hint{display:flex;gap:11px;align-items:flex-start;margin-top:12px;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}
.ai-photo-hint>span{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;background:var(--text);color:var(--bg);flex:0 0 auto;font-size:11px}.ai-photo-hint b,.ai-photo-hint small{display:block}.ai-photo-hint b{font-size:11px;margin:1px 0 3px}.ai-photo-hint small{font-size:10px;line-height:1.45;color:var(--muted)}
.ai-result-bar{margin-top:18px;padding:13px 14px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(135deg,var(--surface-2),var(--surface));display:grid;grid-template-columns:34px 1fr auto;gap:11px;align-items:center}.ai-result-bar[hidden]{display:none}.ai-result-icon{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;background:var(--text);color:var(--bg)}.ai-result-copy b,.ai-result-copy small{display:block}.ai-result-copy b{font-size:11.5px;margin-bottom:3px}.ai-result-copy small{font-size:10px;color:var(--muted);line-height:1.4}
@media(max-width:760px){.heading-actions .btn-ai{flex-basis:100%}.ai-result-bar{grid-template-columns:34px 1fr}.ai-result-bar .mini-badge{grid-column:2;justify-self:start}}