/* =====================================================================
   Fotomatic — theme.css
   ---------------------------------------------------------------------
   Sep 2026 redesign. Everything reads from the token block below —
   change a colour, radius or type size HERE and the whole app follows.
   Visual language: off-white canvas, one hairline border colour,
   8/12px radii, Inter at small sizes with tight tracking, brand pink
   (#E8127A, unchanged) reserved for primary actions + selected state.
   ===================================================================== */

:root {
  /* surfaces */
  --canvas:        #FAFAFA;
  --surface:       #FFFFFF;
  --surface-2:     #F4F4F5;
  --surface-3:     #ECECEF;
  --line:          #E6E6EA;
  --line-strong:   #D4D4D9;

  /* text */
  --ink:           #0F0F12;
  --ink-2:         #55555E;
  --ink-3:         #7A7A85;
  --ink-4:         #A0A0A8;   /* placeholders / disabled only */

  /* brand */
  --pink:          #E8127A;
  --pink-hover:    #CC0F6E;
  --pink-soft:     #FDE8F2;
  --pink-ink:      #B0085A;
  --pink-ring:     rgba(232,18,122,.28);

  /* semantic */
  --success:       #1B8A5A;  --success-soft: #E8F5EE;
  --warning:       #B7791F;  --warning-soft: #FBF3E4;
  --danger:        #D23B3B;  --danger-soft:  #FDECEC;
  --info:          #2F6FDB;  --info-soft:    #EAF1FD;

  /* shape */
  --r-sm: 6px;  --r-md: 8px;  --r-lg: 12px;  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15,15,18,.04);
  --shadow-2: 0 8px 24px rgba(15,15,18,.07);
  --shadow-3: 0 24px 60px rgba(15,15,18,.18);

  /* type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 11.5px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px;
  --fs-h2: 20px;  --fs-h1: 26px;
  --track-tight: -0.015em;

  /* layout */
  --sidebar-w: 232px; --sidebar-collapsed: 64px;
  --gutter: 32px; --gap: 20px;
  --topbar-h: 56px;
  --dots: radial-gradient(var(--line-strong) 1px, transparent 1px);
}

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: var(--font); font-size: var(--fs-md); background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--pink-ink); }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
h1, h2, h3, h4 { letter-spacing: var(--track-tight); }
.script { font-family: inherit; font-style: normal; }
::placeholder { color: var(--ink-4); }
::selection { background: var(--pink-soft); color: var(--pink-ink); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--pink-ring); outline-offset: 2px; border-radius: var(--r-sm); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--pink) !important; box-shadow: 0 0 0 3px var(--pink-ring); }

/* Utilities used across pages */
.muted { color: var(--ink-3); }
.eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-xs); font-weight:500; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px 8px; letter-spacing:.02em; text-transform:uppercase; }
.eyebrow svg { width:12px; height:12px; }
.divider-dashed { border:0; border-top:1px dashed var(--line-strong); margin:0; }
.dots-bg { background-image: var(--dots); background-size: 18px 18px; }

/* ---------------------------------------------------------------------
   App shell
   --------------------------------------------------------------------- */
.app-shell { display:flex; width:100%; min-height:100vh; background:var(--canvas); }

.sidebar { width:var(--sidebar-w); flex-shrink:0; background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:14px 12px 16px; gap:6px; position:sticky; top:0; height:100vh; overflow-y:auto; overflow-x:hidden; transition:width .18s ease; z-index:30; }
.sidebar::-webkit-scrollbar { width:0; }

.sidebar-brand { display:flex; flex-direction:column; gap:10px; padding:4px 6px 10px; }
.sidebar-brand .brand-row { display:flex; align-items:center; gap:9px; min-height:28px; }
.sidebar-brand .wordmark { font-size:17px; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.sidebar-tagline { display:none; }
.brand-mark { width:26px; height:26px; border-radius:7px; background:var(--pink); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; }
.brand-mark-img { background:transparent; border-radius:0; }
.brand-mark-img img { width:100%; height:100%; object-fit:contain; }

/* Workspace / client switcher under the logo */
.sb-switcher { display:flex; align-items:center; gap:8px; width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:6px 8px; text-align:left; transition:border-color .12s, background .12s; }
.sb-switcher:hover { border-color:var(--line-strong); background:var(--surface-2); }
.sb-switcher .sw-logo { width:22px; height:22px; border-radius:5px; object-fit:contain; background:var(--surface-2); flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:11px; font-weight:600; }
.sb-switcher .sw-text { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2; }
.sb-switcher .sw-label { font-size:10.5px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.04em; }
.sb-switcher .sw-name { font-size:var(--fs-sm); font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-switcher .sw-caret { color:var(--ink-3); flex-shrink:0; }
.sb-switcher-wrap { position:relative; }
.sb-menu { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:50; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-2); padding:6px; display:none; flex-direction:column; gap:2px; max-height:320px; overflow-y:auto; }
.sb-menu.open { display:flex; }
.sb-menu button, .sb-menu a { display:flex; align-items:center; gap:8px; width:100%; padding:8px 9px; border:none; background:transparent; border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--ink); text-align:left; }
.sb-menu button:hover, .sb-menu a:hover { background:var(--surface-2); color:var(--ink); }
.sb-menu .is-current { background:var(--pink-soft); color:var(--pink-ink); font-weight:600; }
.sb-menu .sw-logo { width:20px; height:20px; border-radius:5px; font-size:10px; display:inline-flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; object-fit:contain; }
.sb-menu .menu-sep { border-top:1px solid var(--line); margin:4px 0; }

.sb-group { display:flex; flex-direction:column; gap:1px; }
.sb-group + .sb-group { margin-top:10px; }
.sb-group-label { font-size:10.5px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; padding:6px 10px 4px; white-space:nowrap; }

.nav-item { position:relative; display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-md); color:var(--ink-2); font-size:var(--fs-sm); font-weight:500; white-space:nowrap; transition:background .12s, color .12s; }
.nav-item:hover { background:var(--surface-2); color:var(--ink); }
.nav-item.active { background:var(--pink-soft); color:var(--pink-ink); font-weight:600; }
.nav-item.active::before { content:''; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--pink); }
.nav-item svg { flex-shrink:0; width:17px; height:17px; }
a.nav-item, a.nav-item:hover { color:inherit; }
a.nav-item:hover { color:var(--ink); }
a.nav-item.active, a.nav-item.active:hover { color:var(--pink-ink); }
.nav-item .nav-label { flex:1; overflow:hidden; text-overflow:ellipsis; }

.sb-foot { margin-top:auto; padding-top:10px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:2px; }
.sb-usage { display:flex; align-items:center; gap:8px; padding:6px 10px; font-size:var(--fs-xs); color:var(--ink-3); white-space:nowrap; overflow:hidden; }
.sb-usage .bar { flex:1; height:4px; border-radius:2px; background:var(--surface-3); overflow:hidden; display:flex; min-width:30px; }
.sb-usage .bar span { display:block; height:100%; }
.sb-collapse-btn { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-md); border:none; background:transparent; color:var(--ink-3); font-size:var(--fs-sm); font-weight:500; white-space:nowrap; }
.sb-collapse-btn:hover { background:var(--surface-2); color:var(--ink); }
.sb-collapse-btn svg { width:17px; height:17px; flex-shrink:0; transition:transform .18s; }

/* Collapsed rail */
.app-shell.sb-collapsed .sidebar { width:var(--sidebar-collapsed); padding-left:10px; padding-right:10px; }
.app-shell.sb-collapsed .wordmark, .app-shell.sb-collapsed .sb-group-label, .app-shell.sb-collapsed .nav-label, .app-shell.sb-collapsed .sb-collapse-btn span, .app-shell.sb-collapsed .sb-usage, .app-shell.sb-collapsed .sw-text, .app-shell.sb-collapsed .sw-caret { display:none; }
.app-shell.sb-collapsed .nav-item, .app-shell.sb-collapsed .sb-collapse-btn { justify-content:center; padding-left:0; padding-right:0; }
.app-shell.sb-collapsed .nav-item.active::before { left:-10px; }
.app-shell.sb-collapsed .sb-switcher { padding:6px; justify-content:center; }
.app-shell.sb-collapsed .sb-group + .sb-group { margin-top:6px; padding-top:6px; border-top:1px solid var(--line); }
.app-shell.sb-collapsed .sb-collapse-btn svg { transform:rotate(180deg); }
.app-shell.sb-collapsed .sb-menu { left:0; right:auto; min-width:220px; }

/* Mobile drawer */
.sb-backdrop { display:none; position:fixed; inset:0; background:rgba(15,15,18,.4); z-index:29; }
.sb-hamburger { display:none; width:36px; height:36px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); color:var(--ink-2); align-items:center; justify-content:center; flex-shrink:0; }
@media (max-width:1024px) {
  .sidebar { position:fixed; left:0; top:0; transform:translateX(-100%); transition:transform .2s ease; box-shadow:none; }
  .app-shell.sb-collapsed .sidebar { width:var(--sidebar-w); padding:14px 12px 16px; }
  .app-shell.sb-collapsed .wordmark, .app-shell.sb-collapsed .sb-group-label, .app-shell.sb-collapsed .nav-label, .app-shell.sb-collapsed .sb-usage, .app-shell.sb-collapsed .sw-text, .app-shell.sb-collapsed .sw-caret { display:initial; }
  .app-shell.sb-collapsed .nav-item { justify-content:flex-start; padding-left:10px; padding-right:10px; }
  .app-shell.sb-collapsed .sb-group + .sb-group { border-top:none; padding-top:0; margin-top:10px; }
  .app-shell.sb-collapsed .nav-item.active::before { left:-12px; }
  .app-shell.sb-open .sidebar { transform:none; box-shadow:var(--shadow-3); }
  .app-shell.sb-open .sb-backdrop { display:block; }
  .sb-collapse-btn { display:none; }
  .sb-hamburger { display:inline-flex; }
}

/* ---------------------------------------------------------------------
   Main + topbar
   --------------------------------------------------------------------- */
.main-content { flex:1; min-width:0; padding:18px var(--gutter) 56px; display:flex; flex-direction:column; gap:28px; }
@media (max-width:720px) { .main-content { padding:14px 16px 40px; gap:22px; } .workspace-grid { grid-template-columns:1fr; } }

.topbar { display:flex; align-items:center; gap:12px; min-height:40px; }
.searchbar { flex:1; max-width:420px; display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:0 10px; height:36px; color:var(--ink-3); font-size:var(--fs-sm); cursor:text; transition:border-color .12s, box-shadow .12s; }
.searchbar:hover { border-color:var(--line-strong); }
.searchbar:focus-within { border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-ring); }
.searchbar input { flex:1; border:none; background:transparent; outline:none; font-size:var(--fs-sm); color:var(--ink); min-width:0; height:100%; }
.searchbar input:focus-visible { box-shadow:none; }
.kbd { font-size:10.5px; color:var(--ink-3); border:1px solid var(--line); border-radius:4px; padding:1px 5px; background:var(--surface-2); font-family:inherit; white-space:nowrap; }
.tb-icon-btn { width:36px; height:36px; border-radius:var(--r-md); border:1px solid transparent; background:transparent; color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .12s; }
.tb-icon-btn:hover { background:var(--surface-2); color:var(--ink); }
.avatar-circle { width:32px; height:32px; border-radius:50%; background:var(--ink); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:12.5px; flex-shrink:0; }
.tb-user { display:flex; align-items:center; gap:9px; padding:3px 8px 3px 3px; border-radius:var(--r-pill); border:1px solid transparent; background:transparent; }
.tb-user:hover { background:var(--surface-2); border-color:var(--line); }
.tb-user .u-name { font-size:var(--fs-sm); font-weight:600; color:var(--ink); line-height:1.15; }
.tb-user .u-role { font-size:var(--fs-xs); color:var(--ink-3); line-height:1.15; }
.tb-user-wrap { position:relative; }
.tb-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:50; min-width:200px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-2); padding:6px; display:none; flex-direction:column; gap:2px; }
.tb-menu.open { display:flex; }
.tb-menu a, .tb-menu button { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r-sm); font-size:var(--fs-sm); color:var(--ink); border:none; background:transparent; width:100%; text-align:left; }
.tb-menu a:hover, .tb-menu button:hover { background:var(--surface-2); color:var(--ink); }
.tb-menu .menu-sep { border-top:1px solid var(--line); margin:4px 0; }
.tb-menu .menu-head { padding:6px 10px 8px; font-size:var(--fs-xs); color:var(--ink-3); }
.tb-menu .menu-head strong { display:block; color:var(--ink); font-size:var(--fs-sm); font-weight:600; }
@media (max-width:720px) { .tb-user .u-name, .tb-user .u-role { display:none; } .searchbar .kbd { display:none; } }

/* Command palette (Ctrl/Cmd-K) */
.cmdk-overlay { position:fixed; inset:0; z-index:1100; background:rgba(15,15,18,.45); display:none; align-items:flex-start; justify-content:center; padding:10vh 16px 16px; }
.cmdk-overlay.open { display:flex; }
.cmdk { width:100%; max-width:560px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-3); overflow:hidden; display:flex; flex-direction:column; max-height:70vh; }
.cmdk-input { display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line); }
.cmdk-input input { flex:1; border:none; outline:none; font-size:15px; background:transparent; color:var(--ink); }
.cmdk-input input:focus-visible { box-shadow:none; }
.cmdk-list { overflow-y:auto; padding:6px; }
.cmdk-group { font-size:10.5px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; padding:8px 10px 4px; }
.cmdk-item { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-md); color:var(--ink); font-size:var(--fs-sm); }
.cmdk-item .ci-thumb { width:28px; height:28px; border-radius:var(--r-sm); object-fit:cover; background:var(--surface-2); border:1px solid var(--line); flex-shrink:0; }
.cmdk-item .ci-meta { margin-left:auto; font-size:var(--fs-xs); color:var(--ink-3); }
.cmdk-item.is-active, .cmdk-item:hover { background:var(--surface-2); color:var(--ink); }
.cmdk-empty { padding:24px; text-align:center; color:var(--ink-3); font-size:var(--fs-sm); }
.cmdk-foot { display:flex; gap:14px; padding:8px 14px; border-top:1px solid var(--line); font-size:var(--fs-xs); color:var(--ink-3); }

/* Flash / banners */
.banner { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:var(--r-md); font-size:var(--fs-sm); font-weight:500; border:1px solid transparent; flex-wrap:wrap; }
.banner > span { flex:1; }
.banner-success { background:var(--success-soft); color:var(--success); border-color:#CBE8D8; }
.banner-error { background:var(--danger-soft); color:var(--danger); border-color:#F5CACA; }
.banner-warning { background:var(--warning-soft); color:var(--warning); border-color:#F0DFB9; }
.banner-info { background:var(--info-soft); color:var(--info); border-color:#C9DAF8; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--pink); color:#fff; font-weight:600; font-size:var(--fs-sm); padding:0 16px; height:38px; border-radius:var(--r-md); border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:background .12s, transform .06s; }
.btn-primary:hover { background:var(--pink-hover); color:#fff; }
.btn-primary:active { transform:translateY(1px); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn-dark { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--ink); color:#fff; font-weight:600; font-size:var(--fs-sm); padding:0 16px; height:38px; border-radius:var(--r-md); border:1px solid transparent; cursor:pointer; white-space:nowrap; }
.btn-dark:hover { background:#2A2A30; color:#fff; }
.btn-outline { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.45); color:#fff; font-weight:600; font-size:var(--fs-sm); padding:0 16px; height:38px; border-radius:var(--r-md); }
.btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); font-weight:500; font-size:var(--fs-sm); padding:0 14px; height:36px; border-radius:var(--r-md); cursor:pointer; white-space:nowrap; transition:border-color .12s, background .12s, color .12s; }
.btn-ghost:hover { border-color:var(--line-strong); background:var(--surface-2); color:var(--ink); }
.btn-danger { display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--surface); border:1px solid #F1C6C6; color:var(--danger); font-weight:500; font-size:var(--fs-xs); padding:0 12px; height:32px; border-radius:var(--r-md); cursor:pointer; white-space:nowrap; }
.btn-danger:hover { background:var(--danger-soft); }
.btn-sm { height:32px; padding:0 12px; font-size:var(--fs-xs); }

/* ---------------------------------------------------------------------
   Cards / sections
   --------------------------------------------------------------------- */
.section-title { font-size:var(--fs-h2); font-weight:600; margin:0 0 4px 0; color:var(--ink); letter-spacing:var(--track-tight); }
.section-sub { font-size:var(--fs-sm); color:var(--ink-3); margin:0; max-width:620px; line-height:1.5; }
.more-link { font-size:var(--fs-sm); font-weight:500; color:var(--ink-2); display:inline-flex; align-items:center; gap:4px; white-space:nowrap; background:none; border:none; cursor:pointer; padding:0; }
.more-link:hover { color:var(--ink); }
.section-eyebrow { display:none; }
.page-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.back-link { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:500; color:var(--ink-3); margin-bottom:8px; }
.back-link:hover { color:var(--ink); }

.card-plain { background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line); padding:20px; }

.studio-card { position:relative; border-radius:var(--r-lg); overflow:hidden; padding:22px; display:flex; flex-direction:column; justify-content:flex-start; gap:16px; color:#fff; min-height:220px; }
.studio-card .icon-badge { width:38px; height:38px; border-radius:var(--r-md); background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.arrow-btn { width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.95); display:flex; align-items:center; justify-content:center; border:none; cursor:pointer; margin-top:auto; flex-shrink:0; }

/* Generic tile used by Home / Create / Quick Tools */
.tool-card, .feature-card { background:var(--surface); border-radius:var(--r-lg); padding:10px; display:flex; flex-direction:column; gap:6px; border:1px solid var(--line); text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s, transform .12s; }
.tool-card:hover, .feature-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-2); transform:translateY(-1px); color:inherit; }
.tool-card .thumb, .feature-card .thumb { border-radius:var(--r-md); height:118px; width:100%; object-fit:cover; display:block; border:1px solid var(--line); background:var(--surface-2); }
.tool-card .thumb-wrap { border-radius:var(--r-md); height:118px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--surface-2); }
.tool-card h4, .feature-card h4 { margin:6px 2px 0; font-size:var(--fs-md); font-weight:600; color:var(--ink); }
.tool-card p, .feature-card p { margin:0 2px; font-size:var(--fs-xs); color:var(--ink-3); line-height:1.45; }
.tool-card .meta, .feature-card .meta { margin:0 2px; font-size:10.5px; color:var(--ink-3); display:flex; align-items:center; gap:6px; font-weight:500; text-transform:uppercase; letter-spacing:.04em; }
.feature-card .meta { display:none; }
.feature-card .thumb { height:132px; }

.social-dot { width:24px; height:24px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:#fff; font-size:9.5px; font-weight:700; flex-shrink:0; }

.filter-tab { padding:0 12px; height:32px; display:inline-flex; align-items:center; border-radius:var(--r-md); font-size:var(--fs-sm); font-weight:500; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); white-space:nowrap; cursor:pointer; transition:background .12s, color .12s, border-color .12s; }
.filter-tab:hover { background:var(--surface-2); color:var(--ink); }
.filter-tab.active { background:var(--pink-soft); color:var(--pink-ink); border-color:#F3B7D3; font-weight:600; }

.lib-card { background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; position:relative; transition:border-color .12s, box-shadow .12s, transform .12s; }
.lib-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-2); transform:translateY(-1px); }
.lib-card img { width:100%; height:150px; object-fit:cover; display:block; background:var(--surface-2); }
.lib-card .lib-body { padding:12px 13px 13px; display:flex; flex-direction:column; gap:3px; }
.lib-card .lib-title { font-size:var(--fs-sm); font-weight:600; color:var(--ink); }
.lib-card .lib-meta { font-size:var(--fs-xs); color:var(--ink-3); }
.lib-card .lib-delete { position:absolute; top:8px; right:8px; width:26px; height:26px; border-radius:50%; background:rgba(15,15,18,.6); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s; }
.lib-card:hover .lib-delete, .lib-card .lib-delete:focus-visible { opacity:1; }
.lib-meta { font-size:var(--fs-xs); color:var(--ink-3); }

.stat-card { background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line); padding:16px 18px; display:flex; flex-direction:column; gap:4px; }
.stat-card .stat-value { font-size:22px; font-weight:600; color:var(--ink); letter-spacing:var(--track-tight); }
.stat-card .stat-label { font-size:var(--fs-xs); color:var(--ink-3); }

.swatch { width:100%; height:56px; border-radius:var(--r-md); margin-bottom:8px; border:1px solid rgba(0,0,0,.06); cursor:pointer; padding:0; }

/* Empty state */
.empty-state { border:1px dashed var(--line-strong); border-radius:var(--r-lg); padding:40px 24px; text-align:center; background-image:var(--dots); background-size:18px 18px; background-color:var(--surface); display:flex; flex-direction:column; align-items:center; gap:10px; }
.empty-state h3 { margin:0; font-size:var(--fs-lg); font-weight:600; }
.empty-state p { margin:0; color:var(--ink-3); font-size:var(--fs-sm); max-width:420px; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.field-label { font-size:var(--fs-xs); font-weight:500; color:var(--ink-2); margin-bottom:6px; display:block; }
.field-input, .field-select, .field-textarea { width:100%; border:1px solid var(--line); border-radius:var(--r-md); padding:0 11px; height:36px; font-size:var(--fs-sm); font-family:inherit; color:var(--ink); background:var(--surface); transition:border-color .12s, box-shadow .12s; }
.field-textarea { height:auto; padding:9px 11px; resize:vertical; min-height:80px; line-height:1.5; }
.field-input:hover, .field-select:hover, .field-textarea:hover { border-color:var(--line-strong); }
.field-select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237A7A85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat:no-repeat; background-position:right 9px center; padding-right:30px; }
.field-group { margin-bottom:14px; }
.field-row { display:flex; gap:6px; flex-wrap:wrap; }
.field-row > * { flex:0 0 auto; }

.chip { display:inline-flex; align-items:center; height:32px; padding:0 12px; border-radius:var(--r-md); font-size:var(--fs-xs); font-weight:500; color:var(--ink-2); background:var(--surface-2); border:1px solid transparent; cursor:pointer; transition:background .12s, color .12s, border-color .12s; user-select:none; }
.chip:hover { background:var(--surface-3); color:var(--ink); }
.chip.active { background:var(--pink-soft); border-color:#F3B7D3; color:var(--pink-ink); font-weight:600; }

.upload-zone { display:block; position:relative; border:1px dashed var(--line-strong); border-radius:var(--r-lg); padding:22px 16px; text-align:center; color:var(--ink-3); font-size:var(--fs-xs); background-color:var(--surface); background-image:var(--dots); background-size:14px 14px; cursor:pointer; transition:border-color .12s, background-color .12s; }
.upload-zone:hover { border-color:var(--pink); background-color:color-mix(in srgb, var(--pink) 5%, var(--surface)); }
.upload-zone svg { margin-bottom:6px; color:var(--ink-3); }
.upload-zone.has-image { padding:0; border-style:solid; overflow:hidden; background-image:none; }
.upload-zone.has-image img { width:100%; display:block; }
.dz-url-row { display:flex; gap:6px; margin:6px 0 14px; }
.dz-url-row .field-input { height:32px; font-size:var(--fs-xs); }
.dz-url-row .btn-ghost { height:32px; font-size:var(--fs-xs); padding:0 10px; }

.dz-crop-btn { display:none; position:absolute; top:8px; right:8px; z-index:2; align-items:center; gap:5px; background:rgba(15,15,18,.72); color:#fff; border:none; border-radius:var(--r-sm); padding:5px 9px; font-size:11px; font-weight:600; cursor:pointer; }
.dz-crop-btn:hover { background:rgba(15,15,18,.9); }
.upload-zone.has-image .dz-crop-btn { display:flex; }

.dropzone-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:2px; }
.dropzone-row > div { margin-bottom:10px; }
@media (max-width:640px) { .dropzone-row { grid-template-columns:1fr; } }

.field-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:2px 14px; }
.field-grid .field-group { margin-bottom:14px; }
@media (max-width:560px) { .field-grid { grid-template-columns:1fr; } }

table.data-table { width:100%; border-collapse:collapse; }
table.data-table th { text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:600; padding:10px 12px; border-bottom:1px solid var(--line); }
table.data-table td { font-size:var(--fs-sm); color:var(--ink); padding:12px; border-bottom:1px solid var(--line); }
table.data-table tr:last-child td { border-bottom:none; }
table.data-table tr:hover td { background:var(--canvas); }

.toggle-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:13px 0; border-bottom:1px solid var(--line); }
.toggle-row:last-child { border-bottom:none; }
.toggle-btn { width:36px; height:20px; border-radius:20px; position:relative; flex-shrink:0; border:none; cursor:pointer; padding:0; transition:background .15s; }
.toggle-btn.on { background:var(--pink); }
.toggle-btn.off { background:var(--line-strong); }
.toggle-btn .knob { position:absolute; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s, right .15s; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.toggle-btn.on .knob { right:2px; }
.toggle-btn.off .knob { left:2px; }

.toggle-switch { position:relative; display:inline-block; width:36px; height:20px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-switch .track { position:absolute; inset:0; background:var(--line-strong); border-radius:20px; transition:background .15s; cursor:pointer; }
.toggle-switch .track .knob { position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.toggle-switch input:checked + .track { background:var(--pink); }
.toggle-switch input:checked + .track .knob { left:18px; }
.toggle-switch input:focus-visible + .track { box-shadow:0 0 0 3px var(--pink-ring); }

/* Segmented control (mode tabs) */
.mode-tab { flex:1; height:34px; padding:0 12px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-weight:500; font-size:var(--fs-sm); cursor:pointer; }
.mode-tab:hover { background:var(--surface-2); }
.mode-tab.active { background:var(--ink); border-color:var(--ink); color:#fff; }
.wm-tool-btn.active, .le-tool-btn.active { background:var(--pink-soft); border-color:#F3B7D3; color:var(--pink-ink); }

/* ---------------------------------------------------------------------
   Create bar (Home)
   --------------------------------------------------------------------- */
.create-bar-wrap { display:flex; flex-direction:column; gap:8px; }
.create-bar { display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:8px 8px 8px 16px; box-shadow:var(--shadow-1); transition:border-color .12s, box-shadow .12s; }
.create-bar:focus-within { border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-ring); }
.create-bar .cb-input { flex:1; border:none; outline:none; background:transparent; font-family:inherit; font-size:15px; color:var(--ink); min-width:0; height:36px; }
.create-bar .cb-input:focus-visible { box-shadow:none; }
.cb-icon-btn { width:34px; height:34px; border-radius:var(--r-md); background:var(--surface); border:1px solid var(--line); color:var(--ink-2); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; text-decoration:none; }
.cb-icon-btn:hover { background:var(--surface-2); color:var(--ink); }
.cb-icon-btn.active { background:var(--pink-soft); border-color:#F3B7D3; color:var(--pink-ink); }
.cb-submit { width:36px; height:36px; border-radius:var(--r-md); background:var(--pink); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:background .12s; }
.cb-submit:hover { background:var(--pink-hover); }
.cb-submit:disabled { background:var(--surface-3); color:var(--ink-4); cursor:not-allowed; }
.create-bar-hint { font-size:var(--fs-xs); color:var(--ink-3); padding-left:16px; }

/* Home hero panel */
.home-hero { position:relative; border:1px solid var(--line); border-radius:var(--r-lg); background-color:var(--surface); background-image:var(--dots); background-size:18px 18px; padding:28px 28px 24px; display:flex; flex-direction:column; gap:16px; overflow:hidden; }
.home-hero::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 0%, transparent 0%, color-mix(in srgb, var(--surface) 85%, transparent) 70%); pointer-events:none; }
.home-hero > * { position:relative; z-index:1; }
.home-hero h1 { margin:0; font-size:var(--fs-h1); font-weight:600; letter-spacing:-.02em; line-height:1.2; }
.home-hero .section-sub { max-width:none; }
.home-section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.home-section-head .eyebrow { margin-bottom:8px; }
.continue-row { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.continue-card { display:flex; flex-direction:column; gap:6px; text-decoration:none; color:inherit; }
.continue-card img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface-2); transition:box-shadow .12s, border-color .12s; }
.continue-card:hover img { border-color:var(--line-strong); box-shadow:var(--shadow-2); }
.continue-card .cc-title { font-size:var(--fs-xs); font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.continue-card .cc-meta { font-size:10.5px; color:var(--ink-3); }
.gen-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; }
@media (max-width:1200px) { .gen-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:820px) { .gen-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:480px) { .gen-grid { grid-template-columns:1fr; } }
.app-footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:16px; flex-wrap:wrap; gap:12px; font-size:var(--fs-xs); color:var(--ink-3); }
.app-footer a { color:var(--ink-3); }
.app-footer a:hover { color:var(--ink); }

/* ---------------------------------------------------------------------
   Toasts / modals
   --------------------------------------------------------------------- */
.toast { position:fixed; top:16px; right:16px; z-index:999; background:var(--ink); color:#fff; padding:11px 16px; border-radius:var(--r-md); font-size:var(--fs-sm); font-weight:500; box-shadow:var(--shadow-3); }
.toast.error { background:var(--danger); }

.lib-card-open { cursor:pointer; display:flex; flex-direction:column; flex:1; }
.proj-modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,15,18,.6); z-index:1000; align-items:center; justify-content:center; padding:24px; }
.proj-modal-overlay.open { display:flex; }
.proj-modal { background:var(--surface); border-radius:var(--r-lg); max-width:960px; width:100%; max-height:90vh; overflow:auto; display:flex; box-shadow:var(--shadow-3); position:relative; border:1px solid var(--line); }
.proj-modal-close { position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%; background:rgba(15,15,18,.6); border:none; color:#fff; font-size:18px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2; }
.proj-modal-img-wrap { flex:1.3; min-width:0; background:var(--ink); display:flex; align-items:center; justify-content:center; position:relative; }
.proj-modal-img-wrap img { max-width:100%; max-height:90vh; display:block; object-fit:contain; }
.proj-modal-loader { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.proj-modal-body { flex:1; min-width:280px; padding:24px; display:flex; flex-direction:column; gap:12px; overflow-y:auto; }
.proj-modal-title { font-size:var(--fs-lg); font-weight:600; color:var(--ink); }
.proj-modal-meta { font-size:var(--fs-xs); color:var(--ink-3); }
.proj-modal-label { font-size:10.5px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; }
.proj-modal-prompt { background:var(--canvas); border:1px solid var(--line); border-radius:var(--r-md); padding:12px; font-size:var(--fs-sm); line-height:1.55; color:var(--ink-2); white-space:pre-wrap; word-break:break-word; max-height:340px; overflow-y:auto; }
.proj-modal-noprompt { font-size:var(--fs-sm); color:var(--ink-3); font-style:italic; }
.proj-admin-pill { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:var(--pink-soft, #FFE5F1); color:var(--pink-ink, #C2185B); font-size:9.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; }
@media (max-width:720px) { .proj-modal { flex-direction:column; max-height:94vh; } .proj-modal-img-wrap img { max-height:44vh; } }

/* ---------------------------------------------------------------------
   Auth
   --------------------------------------------------------------------- */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background-color:var(--canvas); background-image:var(--dots); background-size:18px 18px; padding:20px; }
.auth-card { background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line); padding:32px; width:100%; max-width:380px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow-2); }
.auth-error { background:var(--danger-soft); color:var(--danger); font-size:var(--fs-sm); font-weight:500; padding:9px 12px; border-radius:var(--r-md); }

/* ---------------------------------------------------------------------
   Generator workspace — split layout
   Left: scrollable control rail with Generate pinned at the bottom.
   Right: sticky preview/result + actions + session history strip.
   Every generator page already uses .workspace-grid > form.control-panel
   + .preview-panel, so this is layout-only; no page markup changes.
   --------------------------------------------------------------------- */
.workspace-grid { display:grid; grid-template-columns:minmax(360px, 440px) minmax(0, 1fr); gap:var(--gap); align-items:start; }
.control-panel { background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line); padding:18px 18px 0; display:flex; flex-direction:column; width:100%; min-width:0; }
.control-panel > .field-grid { grid-template-columns:1fr 1fr; }
.control-panel .field-grid.field-grid-1 { grid-template-columns:1fr; }
.control-panel-fashion, .control-panel-product, .control-panel-social { padding:18px 18px 0; }
.control-panel-fashion .upload-zone, .control-panel-product .upload-zone, .control-panel-social .upload-zone { padding:18px 14px; }
.control-panel-fashion .field-group, .control-panel-product .field-group, .control-panel-social .field-group { margin-bottom:12px; }
.control-panel-social .dropzone-row { grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); }
/* Generate button + status pinned to the bottom of the rail */
.control-panel #generateBtn { order:2; position:sticky; bottom:0; z-index:5; margin:8px -18px 0; width:calc(100% + 36px); border-radius:0 0 var(--r-lg) var(--r-lg); height:46px; font-size:var(--fs-md); box-shadow:0 -12px 16px -8px rgba(15,15,18,.08); }
.control-panel #status { order:1; font-size:var(--fs-xs); color:var(--ink-3); margin:4px 0 0; padding:6px 0 0; text-align:center; }
.control-panel #status:empty { display:none; }

.preview-panel { background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line); padding:16px; min-height:420px; display:flex; flex-direction:column; gap:12px; position:sticky; top:16px; max-height:calc(100vh - 32px); }
.preview-panel .field-label { margin:0; }
.preview-frame { border-radius:var(--r-md); overflow:hidden; background-color:var(--surface-2); background-image:var(--dots); background-size:16px 16px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; position:relative; min-height:320px; flex:1; }
.preview-frame img { width:100%; height:100%; object-fit:contain; display:block; background:var(--surface-2); }
.preview-frame .pf-empty { color:var(--ink-3); font-size:var(--fs-sm); text-align:center; padding:20px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.preview-frame .pf-empty svg { color:var(--ink-4); }
.pf-generating { display:flex; flex-direction:column; align-items:center; gap:10px; color:var(--ink-2); font-size:var(--fs-sm); }
.pf-generating .spinner { width:28px; height:28px; border-radius:50%; border:3px solid var(--surface-3); border-top-color:var(--pink); animation:fm-spin .8s linear infinite; }
.pf-generating .pf-timer { font-variant-numeric:tabular-nums; color:var(--ink-3); font-size:var(--fs-xs); }
@keyframes fm-spin { to { transform:rotate(360deg); } }
.preview-frame.is-generating { background-image:none; background:linear-gradient(100deg, var(--surface-2) 40%, #FFFFFF 50%, var(--surface-2) 60%); background-size:200% 100%; animation:fm-shimmer 1.6s ease-in-out infinite; }
@keyframes fm-shimmer { from { background-position:200% 0; } to { background-position:-200% 0; } }
.result-actions { display:none; gap:8px; flex-wrap:wrap; }
.result-actions.show { display:flex; }
.result-strip { display:none; gap:8px; overflow-x:auto; padding-bottom:2px; }
.result-strip.show { display:flex; }
.result-strip img { width:64px; height:64px; object-fit:cover; border-radius:var(--r-md); border:1px solid var(--line); cursor:pointer; flex-shrink:0; opacity:.85; transition:opacity .12s, border-color .12s; }
.result-strip img:hover, .result-strip img.is-current { opacity:1; border-color:var(--pink); }
@media (max-width:1100px) { .workspace-grid { grid-template-columns:1fr; } .preview-panel { position:static; max-height:none; } }

.style-match-results { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px) { .style-match-results { grid-template-columns:1fr; } }

/* Advanced Filters — accordion categories with value summaries */
.adv-toggle { border:1px solid var(--line); border-radius:var(--r-lg); margin:4px 0 14px; overflow:hidden; background:var(--surface); }
.adv-toggle > summary { list-style:none; cursor:pointer; padding:11px 14px; font-size:var(--fs-sm); font-weight:600; color:var(--ink); display:flex; align-items:center; justify-content:space-between; user-select:none; }
.adv-toggle > summary:hover { background:var(--canvas); }
.adv-toggle > summary::-webkit-details-marker { display:none; }
.adv-toggle > summary::after { content:''; width:8px; height:8px; border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform:rotate(45deg); transition:transform .15s; margin-right:4px; }
.adv-toggle[open] > summary::after { transform:rotate(-135deg); }
.adv-toggle[open] > summary { border-bottom:1px solid var(--line); }
.adv-toggle-body { padding:12px 14px 4px; background:var(--canvas); }
.adv-section { border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); margin-bottom:8px; overflow:hidden; }
.adv-section:last-child { margin-bottom:6px; }
.adv-section-title { display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0; margin:0; padding:9px 12px; cursor:pointer; user-select:none; }
.adv-section-title::before { content:''; width:7px; height:7px; border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform:rotate(-45deg); transition:transform .15s; flex-shrink:0; }
.adv-section.is-open .adv-section-title::before { transform:rotate(45deg); }
.adv-section-title .adv-summary { flex:1; font-weight:400; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adv-section > .field-grid, .adv-section > .toggle-row { display:none; padding:4px 12px 0; }
.adv-section.is-open > .field-grid { display:grid; }
.adv-section.is-open > .toggle-row { display:flex; padding:6px 12px 10px; }
.adv-section .field-grid .field-group { margin-bottom:10px; }
.adv-section .field-label { margin-bottom:4px; }
.adv-preset-bar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.adv-preset-bar .field-select { max-width:220px; width:auto; flex:1 1 150px; }
.adv-icon-btn { font-size:var(--fs-xs); padding:0 10px; height:34px; white-space:nowrap; flex-shrink:0; }

/* ---------------------------------------------------------------------
   Settings rail
   --------------------------------------------------------------------- */
.settings-layout { display:grid; grid-template-columns:200px minmax(0,1fr); gap:28px; align-items:start; }
.settings-nav { display:flex; flex-direction:column; gap:1px; position:sticky; top:16px; }
.settings-nav a { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:var(--r-md); font-size:var(--fs-sm); font-weight:500; color:var(--ink-2); }
.settings-nav a:hover { background:var(--surface-2); color:var(--ink); }
.settings-nav a.active { background:var(--pink-soft); color:var(--pink-ink); font-weight:600; }
.settings-nav a svg { width:16px; height:16px; flex-shrink:0; }
.settings-nav .settings-nav-label { font-size:10.5px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; padding:10px 10px 4px; }
.settings-main { display:flex; flex-direction:column; gap:20px; max-width:860px; min-width:0; }
@media (max-width:900px) { .settings-layout { grid-template-columns:1fr; } .settings-nav { position:static; flex-direction:row; flex-wrap:wrap; gap:4px; } .settings-nav .settings-nav-label { display:none; } }

/* ---------------------------------------------------------------------
   Poster Maker
   --------------------------------------------------------------------- */
.poster-app { display:grid; grid-template-columns:230px 1fr 260px; gap:var(--gap); align-items:start; }
@media (max-width:1100px) { .poster-app { grid-template-columns:1fr; } }
.poster-panel { background:var(--surface); border-radius:var(--r-lg); border:1px solid var(--line); padding:16px; display:flex; flex-direction:column; gap:16px; }
.poster-panel-section { display:flex; flex-direction:column; gap:8px; }
.poster-panel-section + .poster-panel-section { padding-top:14px; border-top:1px solid var(--line); }
.poster-btn-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.poster-swatch-btn { width:26px; height:26px; border-radius:var(--r-sm); border:1px solid var(--line); cursor:pointer; padding:0; }
.poster-stage-col { display:flex; flex-direction:column; gap:10px; min-width:0; }
.poster-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.poster-stage-wrap { background-color:var(--surface-2); background-image:var(--dots); background-size:16px 16px; border-radius:var(--r-lg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; padding:20px; min-height:420px; overflow:auto; }
.poster-layers-list { display:flex; flex-direction:column; gap:4px; max-height:260px; overflow-y:auto; }
.poster-layer-row { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:var(--r-sm); background:var(--surface-2); cursor:pointer; font-size:var(--fs-xs); color:var(--ink-2); border:1px solid transparent; }
.poster-layer-row.active { background:var(--pink-soft); border-color:#F3B7D3; color:var(--pink-ink); }
.poster-layer-row .layer-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.poster-layer-row .layer-icon { flex-shrink:0; width:16px; text-align:center; font-size:12px; }
.poster-layer-row button { border:none; background:transparent; color:inherit; cursor:pointer; font-size:12px; padding:2px 4px; line-height:1; opacity:.7; }
.poster-layer-row button:hover { opacity:1; }
.poster-prop-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.poster-prop-row label { font-size:var(--fs-xs); color:var(--ink-3); width:56px; flex-shrink:0; }
.poster-align-group { display:flex; gap:4px; }
.poster-align-group button { flex:1; padding:6px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); cursor:pointer; }
.poster-align-group button.active { background:var(--pink-soft); border-color:#F3B7D3; }

/* ---------------------------------------------------------------------
   Social Calendar
   --------------------------------------------------------------------- */
.sc-month-card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 16px 18px; margin-top:16px; }
.sc-grid { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:8px; margin-top:12px; }
.sc-month-card .sc-grid:first-of-type { margin-top:0; }
.sc-grid-head { margin-top:0; margin-bottom:2px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.sc-weekday { font-size:10.5px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; text-align:center; padding-bottom:2px; }
.sc-grid-head .sc-weekday:first-child, .sc-grid-head .sc-weekday:last-child { color:var(--ink-4); }
.sc-cell { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:8px; min-height:112px; display:flex; flex-direction:column; gap:5px; transition:box-shadow .15s ease, border-color .15s ease; }
.sc-cell:not(.sc-cell-blank):hover { border-color:var(--line-strong); box-shadow:var(--shadow-2); z-index:1; }
.sc-grid:not(.sc-grid-head) > .sc-cell:nth-child(7n+1):not(.sc-cell-blank),
.sc-grid:not(.sc-grid-head) > .sc-cell:nth-child(7n):not(.sc-cell-blank) { background:var(--canvas); }
.sc-cell-blank { background:transparent; border-color:transparent; box-shadow:none; }
.sc-cell-today { border-color:rgba(232,18,122,.45); box-shadow:0 0 0 1px rgba(232,18,122,.45) inset; background:color-mix(in srgb, var(--pink) 6%, var(--surface)); }
.sc-cell-head { display:flex; align-items:center; justify-content:space-between; }
.sc-daynum { font-size:var(--fs-xs); font-weight:600; color:var(--ink-2); width:22px; height:22px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.sc-cell-today .sc-daynum { color:#fff; background:var(--pink); }
.sc-add-btn { width:20px; height:20px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-3); font-size:12px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .12s ease; }
.sc-cell:hover .sc-add-btn, .sc-add-btn:focus-visible { opacity:1; }
.sc-add-btn:hover { background:var(--pink); border-color:var(--pink); color:#fff; }
.sc-pills { display:flex; flex-direction:column; gap:3px; }
.sc-pill { border-radius:var(--r-sm); padding:3px 6px; font-size:11px; font-weight:500; color:var(--ink); cursor:pointer; display:flex; align-items:center; gap:5px; max-width:100%; overflow:hidden; transition:box-shadow .12s ease; }
.sc-pill:hover { box-shadow:var(--shadow-1); }
.sc-pill-time { font-size:10px; font-weight:600; color:var(--ink-3); flex-shrink:0; }
.sc-pill-topic { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.sc-pill-status { font-size:9px; font-weight:700; color:#fff; padding:1px 6px; border-radius:var(--r-pill); flex-shrink:0; text-transform:uppercase; letter-spacing:.03em; }
.sc-pill-more { font-size:10.5px; font-weight:600; color:var(--ink-3); cursor:pointer; padding:2px 6px; }
.sc-pill-dots { display:inline-flex; align-items:center; gap:2px; flex-shrink:0; }
.sc-pill-wrap { position:relative; }
.sc-pill-thumb { width:16px; height:16px; border-radius:3px; object-fit:cover; flex-shrink:0; }
.sc-thumb-tooltip { position:absolute; left:50%; top:100%; transform:translateX(-50%); margin-top:6px; z-index:40; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:5px; box-shadow:var(--shadow-3); visibility:hidden; opacity:0; transition:opacity .12s ease; pointer-events:none; }
.sc-pill-wrap:hover .sc-thumb-tooltip { visibility:visible; opacity:1; }
.sc-thumb-tooltip img { display:block; width:150px; max-width:none; height:auto; border-radius:var(--r-sm); }
.sc-list-thumb-wrap { position:relative; display:inline-block; }
.sc-list-thumb { width:32px; height:32px; border-radius:var(--r-sm); object-fit:cover; display:block; cursor:pointer; }
.sc-thumb-tooltip-list { left:0; transform:none; }
.sc-list-thumb-wrap:hover .sc-thumb-tooltip { visibility:visible; opacity:1; }
.sc-gallery-category { font-size:10.5px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
.sc-gallery-card-form { margin:0; }
.sc-gallery-card { width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; padding:0; cursor:pointer; text-align:left; font:inherit; color:inherit; transition:box-shadow .12s ease, border-color .12s ease; }
.sc-gallery-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-2); }
.sc-gallery-card img { width:100%; height:110px; object-fit:cover; display:block; }
.sc-gallery-card-body { padding:9px 11px; display:flex; flex-direction:column; gap:4px; }
.sc-gallery-card-topic { font-size:var(--fs-xs); font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-gallery-card-meta { font-size:11px; color:var(--ink-3); display:flex; align-items:center; gap:6px; }
.sc-platform-checks { display:flex; flex-wrap:wrap; gap:6px; }
.sc-platform-chip { display:inline-flex; align-items:center; gap:5px; font-size:var(--fs-xs); font-weight:500; color:var(--ink-2); background:var(--surface-2); border:1px solid transparent; border-radius:var(--r-sm); padding:5px 9px; cursor:pointer; }
.sc-platform-chip input { margin:0; accent-color:var(--pink); }
#postForm .field-group { margin-bottom:10px; }
#postForm .field-grid .field-group { margin-bottom:10px; }
#postForm .field-label { margin-bottom:5px; }
#postForm .adv-toggle { margin:2px 0 12px; }
#postForm .adv-toggle-body .field-group:last-child { margin-bottom:2px; }
#postForm .sc-grid-3 { grid-template-columns:repeat(3, 1fr); }
@media (max-width:520px) { #postForm .sc-grid-3 { grid-template-columns:1fr; } }
@media (max-width:900px) { .sc-grid { grid-template-columns:repeat(7, minmax(60px,1fr)); overflow-x:auto; } }
.sc-event-flag { display:flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; color:var(--warning); background:var(--warning-soft); border:1px solid #F0DFB9; border-radius:var(--r-pill); padding:2px 7px 2px 5px; margin:1px 0 2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:default; }
.sc-event-flag::before { content:"🎉"; font-size:9px; flex-shrink:0; }
.sc-event-flag-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-export-menu { position:relative; }
.sc-export-menu summary { list-style:none; }
.sc-export-menu summary::-webkit-details-marker { display:none; }
.sc-export-menu-panel { position:absolute; top:calc(100% + 6px); right:0; z-index:20; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-2); padding:6px; display:flex; flex-direction:column; min-width:210px; }
.sc-export-menu-panel a { padding:8px 10px; border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:500; color:var(--ink); text-decoration:none; white-space:nowrap; }
.sc-export-menu-panel a:hover { background:var(--surface-2); }
.sc-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.sc-table th { text-align:left; font-size:10.5px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.sc-table td { padding:11px 14px; border-bottom:1px solid var(--line); color:var(--ink-2); white-space:nowrap; }
.sc-table tr:hover td { background:var(--canvas); }
.sc-table td:nth-child(3) { white-space:normal; min-width:200px; }
.sc-status-badge { font-size:11px; font-weight:600; padding:3px 9px; border-radius:var(--r-pill); white-space:nowrap; }

/* ---------------------------------------------------------------------
   Legacy inline-colour overrides. Pages still carry a few hard-coded
   purple-grey colours in style="" attributes from the old theme; these
   attribute selectors re-map the most common ones onto tokens so the
   whole app reads as one palette without touching every page.
   --------------------------------------------------------------------- */
[style*="color:#8B899C"], [style*="color: #8B899C"], [style*="color:#9C9AB0"], [style*="color: #9C9AB0"], [style*="color:#A9A7BB"] { color:var(--ink-3) !important; }
[style*="color:#4B4863"], [style*="color: #4B4863"], [style*="color:#6B6980"], [style*="color:#5B5871"], [style*="color:#3A3850"] { color:var(--ink-2) !important; }
[style*="color:#15131F"], [style*="color: #15131F"] { color:var(--ink) !important; }
[style*="border:1px solid #ECEBF3"], [style*="border: 1px solid #ECEBF3"], [style*="border:1.5px solid #ECEBF3"], [style*="border:1px solid #E9E7F2"], [style*="border:1.5px solid #E4E2EF"], [style*="border:1px solid #E4E2EF"] { border-color:var(--line) !important; border-width:1px !important; }
[style*="border-top:1px solid #ECEBF3"], [style*="border-top:1px solid #E9E7F2"], [style*="border-bottom:1px solid #ECEBF3"], [style*="border-bottom:1px solid #F2F1F7"] { border-color:var(--line) !important; }
[style*="background:#F6F6FA"], [style*="background: #F6F6FA"], [style*="background:#F3F2F8"], [style*="background:#FAFAFC"], [style*="background:#F7F6FB"], [style*="background:#FBFBFD"] { background-color:var(--surface-2) !important; }
[style*="border-radius:22px"], [style*="border-radius:20px"], [style*="border-radius:18px"], [style*="border-radius:16px"], [style*="border-radius: 18px"], [style*="border-radius: 16px"] { border-radius:var(--r-lg) !important; }
[style*="border-radius:14px"] { border-radius:var(--r-lg) !important; }
[style*="font-weight:800"], [style*="font-weight: 800"] { font-weight:600 !important; }
[style*="font-weight:700"], [style*="font-weight: 700"] { font-weight:600 !important; }
[style*="font-family:'Caveat'"], [style*="font-family: 'Caveat'"] { font-family:inherit !important; }

/* Chip groups take the full rail width so 4–5 chips sit on one line */
.control-panel .field-group:has([data-role="chip-group"]) { grid-column:1 / -1; }
.eyebrow { width:fit-content; align-self:flex-start; }

/* ---------------------------------------------------------------------
   Library pages (includes/library.php) — toolbar, grid, search/sort
   --------------------------------------------------------------------- */
.lib-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lib-tabs { display:flex; gap:6px; flex-wrap:wrap; }
.lib-tools { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lib-count { font-size:var(--fs-xs); color:var(--ink-3); white-space:nowrap; }
.lib-search { display:flex; align-items:center; gap:7px; height:32px; padding:0 10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); color:var(--ink-3); min-width:200px; }
.lib-search:focus-within { border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-ring); }
.lib-search input { border:none; background:transparent; outline:none; font-size:var(--fs-sm); color:var(--ink); flex:1; min-width:0; }
.lib-search input:focus-visible { box-shadow:none; }
.lib-search input::-webkit-search-cancel-button { -webkit-appearance:none; }
.lib-sort { height:32px; width:auto; font-size:var(--fs-xs); padding-right:28px; }
.lib-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px; }
.lib-grid.lib-grid-dense { grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); }
.lib-grid.lib-grid-wide { grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.lib-card .lib-badge { position:absolute; top:8px; left:8px; background:rgba(15,15,18,.65); color:#fff; font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:var(--r-pill); display:flex; align-items:center; gap:5px; max-width:calc(100% - 46px); pointer-events:none; }
.lib-card .lib-badge i { width:7px; height:7px; border-radius:50%; flex-shrink:0; display:inline-block; }
.lib-card .lib-body form { margin-top:8px; }
.lib-card .lib-body .btn-ghost { width:100%; height:32px; font-size:var(--fs-xs); }
.lib-section { display:flex; flex-direction:column; gap:12px; }
.lib-section-head { display:flex; align-items:center; gap:10px; }
.lib-section-head h3 { margin:0; font-size:var(--fs-lg); font-weight:600; }
.lib-section-head .dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.lib-section-head .muted { font-size:var(--fs-xs); }
.lib-upload { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.lib-upload > div { flex:1; min-width:150px; }
.lib-upload > div:first-child { flex:2; min-width:200px; }
.lib-upload .btn-primary { height:36px; }
input[type=file].field-input { padding:6px 8px; line-height:1.4; }
input[type=file].field-input::file-selector-button { font:inherit; font-size:var(--fs-xs); font-weight:500; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:3px 9px; margin-right:10px; cursor:pointer; }

/* ---------------------------------------------------------------------
   Dark theme — a token override only. The user's choice is stamped on
   <html data-theme="dark|light"> by a tiny inline script in header.php
   (before paint, so no flash); no attribute = follow the OS setting.
   --------------------------------------------------------------------- */
:root[data-theme="dark"] { color-scheme:dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme:dark; } }
:root[data-theme="dark"] {
  --canvas:#121215; --surface:#1A1A1F; --surface-2:#232329; --surface-3:#2D2D34;
  --line:#2A2A31; --line-strong:#3B3B44;
  --ink:#F2F2F4; --ink-2:#B9B9C2; --ink-3:#8D8D97; --ink-4:#5F5F69;
  --pink-soft:rgba(232,18,122,.16); --pink-ink:#FF6FB3; --pink-ring:rgba(232,18,122,.38);
  --success-soft:rgba(27,138,90,.16); --success:#4CC38A;
  --warning-soft:rgba(183,121,31,.16); --warning:#E2A33F;
  --danger-soft:rgba(210,59,59,.16); --danger:#F06A6A;
  --info-soft:rgba(47,111,219,.16); --info:#6B9BF2;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px rgba(0,0,0,.45); --shadow-3:0 24px 60px rgba(0,0,0,.6);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --canvas:#121215; --surface:#1A1A1F; --surface-2:#232329; --surface-3:#2D2D34;
    --line:#2A2A31; --line-strong:#3B3B44;
    --ink:#F2F2F4; --ink-2:#B9B9C2; --ink-3:#8D8D97; --ink-4:#5F5F69;
    --pink-soft:rgba(232,18,122,.16); --pink-ink:#FF6FB3; --pink-ring:rgba(232,18,122,.38);
    --success-soft:rgba(27,138,90,.16); --success:#4CC38A;
    --warning-soft:rgba(183,121,31,.16); --warning:#E2A33F;
    --danger-soft:rgba(210,59,59,.16); --danger:#F06A6A;
    --info-soft:rgba(47,111,219,.16); --info:#6B9BF2;
    --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 24px rgba(0,0,0,.45); --shadow-3:0 24px 60px rgba(0,0,0,.6);
  }
}
/* Ink-on-surface components stay readable when --ink flips light */
.avatar-circle, .btn-dark, .mode-tab.active, .toast { color:var(--surface); }
.toast.error { color:#fff; }
.btn-dark:hover { background:var(--ink-2); color:var(--surface); }
.brand-mark, .btn-primary, .cb-submit, .sc-cell-today .sc-daynum, .sc-add-btn:hover { color:#fff; }
.proj-modal-img-wrap { background:#0B0B0D; }
.banner-success { border-color:transparent; } .banner-error { border-color:transparent; } .banner-warning { border-color:transparent; } .banner-info { border-color:transparent; }
.filter-tab.active, .chip.active, .poster-layer-row.active, .poster-align-group button.active, .wm-tool-btn.active, .le-tool-btn.active { border-color:rgba(232,18,122,.35); }
[style*="background:#fff"], [style*="background: #fff"], [style*="background:#FFFFFF"] { background-color:var(--surface) !important; }
[style*="border:1px solid #F3C6D9"], [style*="border-color:#F3C6D9"] { border-color:var(--danger-soft) !important; }

.lib-no-results[hidden] { display:none; }
[hidden] { display:none !important; }
.field-input:disabled, .field-select:disabled, .field-textarea:disabled { background:var(--surface-2) !important; color:var(--ink-3) !important; cursor:not-allowed; }

/* ---------------------------------------------------------------------
   Social Creative v2 — poster maker AI tab
   --------------------------------------------------------------------- */
.brand-strip { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--canvas); margin-bottom:14px; font-size:var(--fs-xs); }
.brand-strip .bs-name { display:inline-flex; align-items:center; gap:7px; color:var(--ink); margin-right:4px; }
.brand-strip .bs-name .sw-logo { width:20px; height:20px; border-radius:5px; object-fit:contain; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:600; }
.brand-strip .bs-item { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:var(--r-pill); font-weight:500; }
.brand-strip .bs-item.ok { background:var(--success-soft); color:var(--success); }
.brand-strip .bs-item.warn { background:var(--warning-soft); color:var(--warning); }
.brand-strip .bs-item i { width:10px; height:10px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.08); }
.brand-strip .bs-link { margin-left:auto; color:var(--ink-2); font-weight:500; }
.look-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(118px, 1fr)); gap:6px; margin-bottom:14px; }
.look-card { display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left; padding:8px 10px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); cursor:pointer; transition:border-color .12s, background .12s; }
.look-card:hover { border-color:var(--line-strong); background:var(--surface-2); }
.look-card.active { border-color:var(--pink); background:var(--pink-soft); }
.look-card .lk-name { font-size:var(--fs-xs); font-weight:600; color:var(--ink); }
.look-card.active .lk-name { color:var(--pink-ink); }
.look-card .lk-tag { font-size:10.5px; color:var(--ink-3); line-height:1.3; }
.sc-variant { display:flex; flex-direction:column; gap:8px; min-width:0; }
.sc-variant-head { display:flex; align-items:baseline; gap:8px; font-size:var(--fs-sm); }
.sc-variant-head .muted { font-size:var(--fs-xs); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sc-variant-concept { margin:0; font-size:var(--fs-xs); line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.sc-variant-concept:empty { display:none; }
.sc-variant-frame img { object-fit:contain; }
#socialPreview { position:static; max-height:none; }

/* Client picker on the Social Calendar toolbar */
.sc-client-pick { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 6px 0 8px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); margin:0; }
.sc-client-pick .sw-logo { width:22px; height:22px; border-radius:5px; object-fit:contain; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:600; flex-shrink:0; }
.sc-client-pick .field-select { border:none; height:32px; width:auto; min-width:140px; max-width:220px; font-weight:600; padding-left:4px; background-color:transparent; }
.sc-client-pick .field-select:focus-visible { box-shadow:none; }

/* ---------------------------------------------------------------------
   Client Studio
   --------------------------------------------------------------------- */
.cs-layout { display:flex; flex-direction:column; gap:20px; }
.cs-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
@media (max-width:1100px) { .cs-grid { grid-template-columns:1fr; } }
.cs-col { display:flex; flex-direction:column; gap:20px; min-width:0; }
.cs-h { margin:0 0 12px; font-size:var(--fs-lg); font-weight:600; display:flex; align-items:center; gap:8px; }
.cs-analyse { background-image:var(--dots); background-size:18px 18px; }
.cs-logos { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.cs-logo { display:flex; flex-direction:column; gap:4px; text-align:center; }
.cs-logo .upload-zone { padding:10px 6px; min-height:74px; display:flex; align-items:center; justify-content:center; }
.cs-swatches { display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; }
@media (max-width:640px) { .cs-swatches { grid-template-columns:repeat(3, 1fr); } .cs-logos { grid-template-columns:repeat(2, 1fr); } }
.cs-swatch { display:flex; flex-direction:column; gap:4px; cursor:pointer; position:relative; }
.cs-swatch .sw { display:block; height:44px; border-radius:var(--r-md); border:1px solid rgba(0,0,0,.08); }
.cs-swatch .sw { position:relative; } .cs-swatch input[type=color] { position:absolute; left:0; top:0; width:100%; height:44px; opacity:0; cursor:pointer; }
.cs-hex { height:26px; font-size:11px; font-family:ui-monospace, Menlo, monospace; padding:0 6px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); text-transform:uppercase; width:100%; position:relative; z-index:1; }
.cs-hex.is-bad { border-color:var(--danger); }

.cs-pal { width:26px; height:26px; border-radius:var(--r-sm); border:1px solid rgba(0,0,0,.1); cursor:pointer; }
.cs-pal:hover { transform:scale(1.1); }
.field-group.is-draft .field-input, .field-group.is-draft .field-textarea { border-color:var(--pink); background:color-mix(in srgb, var(--pink) 4%, var(--surface)); }
.field-group.is-draft .field-label::after { content:'AI draft'; margin-left:6px; font-size:9.5px; font-weight:600; color:var(--pink-ink); background:var(--pink-soft); padding:1px 6px; border-radius:var(--r-pill); }
.cs-bench { border-color:#F3B7D3; }
.cs-savebar { position:sticky; bottom:0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-2); }

.dz-remove-btn { display:none; position:absolute; top:8px; left:8px; z-index:2; width:26px; height:26px; border-radius:50%; background:rgba(15,15,18,.72); color:#fff; border:none; font-size:16px; line-height:1; cursor:pointer; align-items:center; justify-content:center; }
.dz-remove-btn:hover { background:var(--danger); }
.upload-zone.has-image .dz-remove-btn { display:flex; }

/* ---- Google Drive status badge on library cards ---- */
.lib-drive { position:absolute; right:8px; bottom:8px; display:flex; align-items:center; gap:5px; padding:4px 9px 4px 7px; border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); color:var(--ink-2); font-size:10.5px; font-weight:600; z-index:2; text-decoration:none; white-space:nowrap; }
a.lib-drive:hover { color:var(--pink); border-color:var(--pink); }
.lib-drive.is-synced { color:#1A9E5C; border-color:#BEEBD2; background:#F1FBF5; }
a.lib-drive.is-synced:hover { color:#128246; border-color:#8FDCB2; }
.lib-drive.is-failed { color:var(--danger); border-color:#F1C6C6; background:#FDF2F2; cursor:help; }
.lib-drive.is-pending { color:var(--ink-3); }

/* ---- Library: select mode + bulk delete (My Projects, etc.) ---- */
.lib-bulkbar { display:flex; align-items:center; gap:14px; padding:9px 14px; margin:-8px 0 16px; background:var(--pink-soft); border:1px solid #F6C7E1; border-radius:var(--r-md); font-size:var(--fs-sm); color:var(--ink); }
.lib-bulk-all { display:flex; align-items:center; gap:7px; cursor:pointer; font-weight:500; }
.lib-bulk-count { color:var(--ink-2); font-size:var(--fs-xs); }
.lib-bulkbar .lib-sp { flex:1; }
.lib-select-check { position:absolute; top:8px; left:8px; z-index:3; display:none; cursor:pointer; }
.lib-grid.is-selecting .lib-select-check { display:block; }
.lib-grid.is-selecting .lib-card .lib-delete { display:none; }
.lib-grid.is-selecting .lib-card .lib-badge { left:36px; }
.lib-select-check input { position:absolute; inset:0; opacity:0; margin:0; width:22px; height:22px; cursor:pointer; z-index:1; }
.lib-select-check span { display:flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px; background:rgba(15,15,18,.55); border:1.5px solid rgba(255,255,255,.85); color:#fff; pointer-events:none; }
.lib-select-check span svg { opacity:0; transition:opacity .1s; }
.lib-select-check input:checked + span { background:var(--pink); border-color:var(--pink); }
.lib-select-check input:checked + span svg { opacity:1; }

/* ---- Editor (editor.php) ---- */
.poster-app { grid-template-columns:248px 1fr 260px; }
@media (max-width:1100px) { .poster-app { grid-template-columns:1fr; } }
.poster-panel .btn-ghost, .poster-panel .btn-primary { min-width:0; padding:0 8px; font-size:var(--fs-xs); height:34px; overflow:hidden; text-overflow:ellipsis; }
.poster-btn-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.poster-panel details summary { list-style:none; }
.poster-panel details summary::-webkit-details-marker { display:none; }
.poster-panel details summary::before { content:'▸ '; }
.poster-panel details[open] summary::before { content:'▾ '; }
.ed-logo-btn img { filter:none; }
[data-theme=dark] .ed-logo-btn { background:#fff; }

/* ---- Projects model: sidebar project switcher, project cards ---- */
.sb-project-wrap { margin-top:6px; }
.sb-switcher-project { padding:5px 8px; }
.sb-switcher-project .sw-logo { width:20px; height:20px; }
.app-shell.sb-collapsed .sb-project-wrap { display:none; }
.wp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:var(--gap); }
.wp-card { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s, transform .12s; position:relative; }
.wp-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-1); transform:translateY(-1px); }
.wp-card.is-active { border-color:var(--pink); }
.wp-cover { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) minmax(0,1fr); gap:2px; aspect-ratio:4/3; background:var(--surface-2); overflow:hidden; }
.wp-cover img { width:100%; height:100%; min-height:0; object-fit:cover; display:block; }
.wp-cover.n1 { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); }
.wp-cover.n2 { grid-template-rows:minmax(0,1fr); }
.wp-cover.n3 img:first-child { grid-row:1 / span 2; }
.wp-cover .wp-empty { grid-column:1 / -1; grid-row:1 / -1; display:flex; align-items:center; justify-content:center; color:var(--ink-3); font-size:var(--fs-xs); }
.wp-body { padding:12px 14px; display:flex; flex-direction:column; gap:4px; }
.wp-name { font-weight:600; font-size:var(--fs-sm); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wp-meta { font-size:var(--fs-xs); color:var(--ink-3); }
.wp-badge { position:absolute; top:10px; left:10px; background:var(--pink); color:#fff; font-size:10.5px; font-weight:600; padding:3px 8px; border-radius:999px; }
.wp-tabs { display:flex; gap:6px; flex-wrap:wrap; margin:14px 0; }
.draft-card .lib-body .btn-primary { width:100%; height:32px; font-size:var(--fs-xs); margin-top:6px; }


/* ---- Home v3: composer-first, one column ---- */
.home-v3 { max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:28px; padding:28px 0 40px; }
.hv3-greet { text-align:center; display:flex; flex-direction:column; gap:6px; }
.hv3-greet h1 { margin:0; font-size:clamp(24px, 3vw, 34px); font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.hv3-greet p { margin:0; font-size:var(--fs-md); color:var(--ink-3); }
.hv3-composer { background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-1); padding:14px 14px 10px; display:flex; flex-direction:column; gap:8px; transition:border-color .12s, box-shadow .12s; }
.hv3-composer:focus-within { border-color:var(--line-strong); box-shadow:0 0 0 4px var(--pink-ring), var(--shadow-2); }
.hv3-input { width:100%; border:none; outline:none; background:transparent; resize:none; font-family:inherit; font-size:16px; line-height:1.5; color:var(--ink); min-height:28px; max-height:160px; padding:2px 4px; }
.hv3-input:focus-visible { box-shadow:none; }
.hv3-bar { display:flex; align-items:center; gap:6px; }
.hv3-icon { width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-2); background:transparent; border:1px solid transparent; cursor:pointer; text-decoration:none; }
.hv3-icon:hover { background:var(--surface-2); color:var(--ink); }
.hv3-icon.active { color:var(--pink); background:var(--pink-soft); }
.hv3-hint { flex:1; text-align:right; font-size:var(--fs-xs); color:var(--ink-3); padding-right:8px; }
.hv3-send { width:36px; height:36px; border-radius:50%; border:none; background:var(--pink); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s, transform .06s; }
.hv3-send:hover { background:var(--pink-hover); }
.hv3-send:disabled { background:var(--line-strong); cursor:not-allowed; }
.hv3-doors { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width:720px) { .hv3-doors { grid-template-columns:1fr; } }
.hv3-door { display:flex; gap:12px; align-items:flex-start; padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s, transform .12s; }
.hv3-door:hover { border-color:var(--line-strong); box-shadow:var(--shadow-1); transform:translateY(-1px); color:inherit; }
.hv3-door-icon { width:34px; height:34px; border-radius:10px; background:var(--pink-soft); color:var(--pink-ink); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.hv3-door-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.hv3-door-text strong { font-size:var(--fs-sm); font-weight:600; color:var(--ink); }
.hv3-door-text span { font-size:var(--fs-xs); color:var(--ink-3); line-height:1.4; }
.hv3-section { display:flex; flex-direction:column; gap:10px; }
.hv3-section-head { display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.hv3-continue { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; }
.hv3-cc { display:flex; gap:12px; align-items:center; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s; }
.hv3-cc:hover { border-color:var(--line-strong); box-shadow:var(--shadow-1); color:inherit; }
.hv3-cc-thumb { width:56px; height:56px; border-radius:10px; background:var(--surface-2); overflow:hidden; flex-shrink:0; }
.hv3-cc-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.hv3-cc-text { display:flex; flex-direction:column; gap:3px; min-width:0; }
.hv3-cc-text strong { font-size:var(--fs-sm); font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hv3-cc-text span { font-size:var(--fs-xs); color:var(--ink-3); }
.hv3-tools { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
@media (max-width:820px) { .hv3-tools { grid-template-columns:1fr; } }
.hv3-tool-group { display:flex; flex-direction:column; gap:4px; }
.hv3-tool-group-label { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:0 8px 4px; }
.hv3-tool { display:flex; gap:10px; align-items:center; padding:8px; border-radius:12px; text-decoration:none; color:inherit; transition:background .12s; }
.hv3-tool:hover { background:var(--surface-2); color:inherit; }
.hv3-tool img { width:40px; height:40px; border-radius:9px; object-fit:cover; border:1px solid var(--line); background:var(--surface-2); flex-shrink:0; }
.hv3-tool > span { display:flex; flex-direction:column; gap:1px; min-width:0; }
.hv3-tool strong { font-size:var(--fs-sm); font-weight:600; color:var(--ink); }
.hv3-tool > span > span { font-size:var(--fs-xs); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


/* ---- Studio modes + professional-control cards (pass 3) ---- */
.mode-tabs { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:8px; margin:0 0 18px; }
.mode-tab-card { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); text-align:left; cursor:pointer; transition:border-color .12s, background .12s; color:var(--ink); }
.mode-tab-card:hover { border-color:var(--line-strong); }
.mode-tab-card.active { border-color:var(--pink); background:var(--pink-soft); }
.mode-tab-card .mt-icon { width:32px; height:32px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--surface-2); color:var(--ink-2); flex-shrink:0; }
.mode-tab-card.active .mt-icon { background:var(--pink); color:#fff; }
.mode-tab-card .mt-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.mode-tab-card .mt-text strong { font-size:var(--fs-sm); font-weight:600; }
.mode-tab-card .mt-text span { font-size:11px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mode-tab-card.active .mt-text span { color:var(--pink-ink); }
.adv-open { margin:6px 0 14px; }
.adv-open-head { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.adv-open .adv-toggle-body { padding:0; background:transparent; }
.adv-open .adv-toggle-body .adv-preset-bar { margin-bottom:8px; }
.adv-cards, .adv-open .adv-toggle-body { display:block; }
.adv-card { border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); margin-bottom:6px; overflow:hidden; }
.adv-card-head { list-style:none; display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; user-select:none; }
.adv-card-head::-webkit-details-marker { display:none; }
.adv-card-head::after { content:''; width:7px; height:7px; border-right:1.5px solid var(--ink-3); border-bottom:1.5px solid var(--ink-3); transform:rotate(45deg); margin-left:auto; margin-right:4px; transition:transform .15s; }
.adv-card[open] .adv-card-head::after { transform:rotate(-135deg); }
.adv-card[open] .adv-card-head { border-bottom:1px solid var(--line); background:var(--canvas); }
.adv-card-icon { width:28px; height:28px; border-radius:8px; background:var(--pink-soft); color:var(--pink-ink); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.adv-card-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
.adv-card-text strong { font-size:var(--fs-sm); font-weight:600; color:var(--ink); }
.adv-card-summary { font-size:11.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.adv-card-body { padding:12px 12px 4px; }
.control-panel .mode-only[style*="display: none"] { display:none; }

/* ---- Client + Project switchers live in the top bar ---- */
.tb-context { display:flex; align-items:center; gap:8px; min-width:0; }
.tb-context .sb-switcher-wrap { position:relative; min-width:0; }
.tb-context .sb-project-wrap { margin-top:0; }
.tb-context .sb-switcher { width:auto; height:36px; padding:0 10px 0 7px; gap:8px; max-width:220px; }
.tb-context .sw-name { max-width:150px; }
.tb-context .sb-menu { left:0; right:auto; min-width:260px; width:max-content; max-width:min(360px, calc(100vw - 32px)); }
.sidebar-brand .sb-switcher-wrap { display:none; }
@media (max-width: 900px) {
  .tb-context .sb-switcher { max-width:150px; }
  .tb-context .sw-name { max-width:96px; }
}
@media (max-width: 640px) {
  .topbar { flex-wrap:wrap; row-gap:8px; }
  .tb-context { order:3; width:100%; }
  .tb-context .sb-switcher-wrap { flex:1; }
  .tb-context .sb-switcher { max-width:none; width:100%; }
  .tb-context .sw-name { max-width:none; }
}
.sb-menu .sb-newproject { display:flex; gap:6px; padding:4px 4px; align-items:center; }
.sb-menu .sb-newproject input.field-input { flex:1; min-width:120px; height:32px; font-size:var(--fs-xs); }
.sb-menu .sb-newproject button.btn-primary { width:auto; flex:0 0 auto; height:32px; padding:0 12px; background:var(--pink); color:#fff; border-radius:var(--r-sm); font-weight:600; font-size:var(--fs-xs); display:inline-flex; align-items:center; justify-content:center; }
.sb-menu .sb-newproject button.btn-primary:hover { background:var(--pink-ink); color:#fff; }
.clients-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px; }

/* ---- App launcher (top bar, next to the user menu) ---- */
.tb-apps-wrap { position:relative; }
.tb-apps-btn { width:36px; height:36px; border-radius:50%; border:1px solid transparent; background:transparent; color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; transition:background .12s, color .12s; }
.tb-apps-btn:hover, .tb-apps-btn[aria-expanded="true"] { background:var(--surface-2); border-color:var(--line); color:var(--ink); }
.tb-menu.tb-apps { width:336px; padding:10px; gap:0; }
.tb-apps-head { font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); padding:2px 8px 8px; }
.tb-apps-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:4px; }
.tb-menu .tb-app { display:flex; flex-direction:column; align-items:center; gap:7px; padding:12px 6px 10px; border-radius:var(--r-md); text-align:center; width:auto; }
.tb-menu .tb-app:hover { background:var(--surface-2); }
.tb-menu .tb-app.is-here { background:var(--pink-soft); }
.tb-app-ic { width:42px; height:42px; border-radius:12px; background:var(--surface-2); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; transition:transform .12s; }
.tb-app:hover .tb-app-ic { transform:translateY(-1px); }
.tb-app.is-here .tb-app-ic { background:var(--pink); color:#fff; }
.tb-app-name { font-size:11.5px; font-weight:500; color:var(--ink); line-height:1.2; }
.tb-app.is-here .tb-app-name { color:var(--pink-ink); font-weight:600; }
.tb-menu .tb-apps-all { margin-top:8px; border-top:1px solid var(--line); border-radius:0; padding-top:12px; justify-content:center; color:var(--ink-2); font-size:var(--fs-xs); }
@media (max-width: 640px) { .tb-menu.tb-apps { width:min(336px, calc(100vw - 24px)); } }

/* ---- Google Drive setup progress ---- */
.drive-steps { list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.drive-steps li { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); min-width:0; }
.drive-steps .ds-num { width:24px; height:24px; border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line); }
.drive-steps .ds-text { display:flex; flex-direction:column; gap:2px; min-width:0; font-size:var(--fs-xs); color:var(--ink-3); }
.drive-steps .ds-text strong { font-size:var(--fs-sm); color:var(--ink); }
.drive-steps .ds-text span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.drive-steps .ds-done { border-color:rgba(22,163,74,.35); background:rgba(22,163,74,.06); }
.drive-steps .ds-done .ds-num { background:#16A34A; color:#fff; border-color:#16A34A; }
.drive-steps .ds-done .ds-text span { color:#15803D; }
.drive-steps .ds-now { border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-ring); }
.drive-steps .ds-now .ds-num { background:var(--pink); color:#fff; border-color:var(--pink); }
.drive-steps .ds-now .ds-text span { color:var(--pink-ink); }
@media (max-width: 720px) { .drive-steps { grid-template-columns:1fr; } }

.dp-bar { height:6px; border-radius:99px; background:var(--line); overflow:hidden; margin-bottom:8px; }
.dp-bar span { display:block; height:100%; background:var(--pink); border-radius:99px; transition:width .6s ease; }

/* =====================================================================
   Editor — mini-Photoshop layout (icon bars, tool rail, dockable panels)
   ===================================================================== */
.ps-app { display:flex; flex-direction:column; height:calc(100vh - 92px); min-height:560px; margin:-6px 0 -40px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; }
.ps-bar, .ps-options { display:flex; align-items:center; gap:4px; padding:6px 8px; border-bottom:1px solid var(--line); background:var(--surface); flex-shrink:0; }
.ps-options { min-height:40px; padding:4px 10px; font-size:var(--fs-xs); color:var(--ink-3); gap:14px; }
.ps-grow { flex:1; }
.ps-sep { width:1px; height:22px; background:var(--line); margin:0 4px; }
.ps-ib, .ps-tool { width:32px; height:32px; border-radius:var(--r-sm); border:1px solid transparent; background:transparent; color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:background .12s, color .12s; margin:0; padding:0; }
.ps-ib:hover, .ps-tool:hover { background:var(--surface-2); color:var(--ink); }
.ps-ib:active, .ps-tool:active { transform:translateY(1px); }
.ps-tool.active { background:var(--pink-soft); color:var(--pink-ink); border-color:#F3B7D3; }
.ps-primary { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 12px; border-radius:var(--r-sm); background:var(--pink); color:#fff; font-weight:600; font-size:var(--fs-sm); border:none; }
.ps-primary:hover { background:var(--pink-ink); }
.ps-select { height:30px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-size:var(--fs-xs); padding:0 6px; max-width:180px; }
.ps-title { height:30px; border:1px solid transparent; border-radius:var(--r-sm); background:transparent; color:var(--ink); font-size:var(--fs-sm); font-weight:600; padding:0 8px; min-width:120px; max-width:260px; }
.ps-title:hover { border-color:var(--line); }
.ps-title:focus { border-color:var(--pink); outline:none; box-shadow:0 0 0 3px var(--pink-ring); background:var(--surface); }
.ps-opt { display:none; align-items:center; gap:6px; white-space:nowrap; }
.ps-opt.on { display:inline-flex; }
.ps-opt output { min-width:24px; text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); }
.ps-opt-label { color:var(--ink-3); flex:0 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ps-color { width:26px; height:26px; border:1px solid var(--line); border-radius:6px; padding:1px; background:var(--surface); cursor:pointer; }
.ps-swatch { width:18px; height:18px; border-radius:5px; border:1px solid rgba(0,0,0,.12); padding:0; cursor:pointer; margin-left:2px; }
.ps-range { width:120px; accent-color:var(--pink); }
.ps-chip { display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 10px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:var(--fs-xs); font-weight:500; cursor:pointer; }
.ps-chip:hover { background:var(--surface-2); }
.ps-chip-primary { background:var(--pink); border-color:var(--pink); color:#fff; }
.ps-chip-primary:hover { background:var(--pink-ink); }

.ps-body { flex:1; display:flex; min-height:0; }
.ps-rail { width:44px; flex-shrink:0; border-right:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 0; position:relative; overflow:visible; }
.ps-rail-sep { width:24px; height:1px; background:var(--line); margin:4px 0; }
.ps-stage { flex:1; min-width:0; background-color:var(--surface-2); background-image:var(--dots); background-size:16px 16px; display:flex; align-items:center; justify-content:center; padding:16px; overflow:auto; position:relative; }
.ps-toast { position:absolute; left:50%; bottom:10px; transform:translateX(-50%); font-size:var(--fs-xs); color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 10px; box-shadow:var(--shadow-1); }
.ps-toast:empty { display:none; }
.ps-side { width:272px; flex-shrink:0; border-left:1px solid var(--line); background:var(--surface); display:flex; flex-direction:column; overflow-y:auto; }
.ps-panel { border-bottom:1px solid var(--line); }
.ps-panel-head { display:flex; align-items:center; gap:6px; padding:8px 10px; font-size:var(--fs-xs); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2); background:var(--surface-2); border-bottom:1px solid var(--line); }
.ps-panel-hint { margin-left:auto; font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-3); }
.ps-panel-body { padding:10px; }
.ps-panel-body .field-label { font-size:10.5px; margin-bottom:3px; }
.ps-panel-body .field-select, .ps-panel-body .field-input, .ps-panel-body .field-textarea { font-size:var(--fs-xs); min-height:30px; padding-top:4px; padding-bottom:4px; }
.ps-panel-body .field-group { margin-bottom:8px; }
.ps-panel-body .btn-ghost { font-size:var(--fs-xs); padding:6px 8px; min-width:0; }
.ps-status { flex-shrink:0; border-top:1px solid var(--line); padding:4px 10px; font-size:var(--fs-xs); color:var(--ink-3); min-height:24px; }
#psLayersPanel { flex:0 0 auto; max-height:46%; display:flex; flex-direction:column; }
.ps-layers { overflow-y:auto; padding:4px; }
.ps-layers .lib-meta { padding:8px 6px; }
.ps-layer { display:flex; align-items:center; gap:6px; padding:4px 6px; border-radius:var(--r-sm); cursor:pointer; font-size:var(--fs-xs); color:var(--ink-2); border:1px solid transparent; user-select:none; }
.ps-layer:hover { background:var(--surface-2); }
.ps-layer.active { background:var(--pink-soft); border-color:#F3B7D3; color:var(--pink-ink); }
.ps-layer.hidden-layer .ps-layer-name { opacity:.45; text-decoration:line-through; }
.ps-layer.drag-over-top { box-shadow:0 -2px 0 var(--pink); }
.ps-layer.drag-over-bottom { box-shadow:0 2px 0 var(--pink); }
.ps-layer.dragging { opacity:.4; }
.ps-layer-thumb { width:28px; height:22px; border-radius:4px; border:1px solid var(--line); background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='4' height='4' fill='%23ddd'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%23ddd'/%3E%3C/svg%3E"); background-size:8px 8px; object-fit:contain; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; color:var(--ink-3); overflow:hidden; }
.ps-layer-thumb img { width:100%; height:100%; object-fit:contain; }
.ps-layer-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ps-layer .ps-lb { width:22px; height:22px; border:none; background:transparent; color:inherit; border-radius:4px; display:inline-flex; align-items:center; justify-content:center; opacity:.55; cursor:pointer; padding:0; flex-shrink:0; }
.ps-layer .ps-lb:hover { opacity:1; background:rgba(0,0,0,.06); }
.ps-layer .ps-lb.vis { opacity:.85; }
.ps-layer .ps-lb-move { display:none; }
.ps-layer:hover .ps-lb-move, .ps-layer.active .ps-lb-move { display:inline-flex; }
.ps-pop { display:none; position:absolute; left:48px; top:8px; width:280px; z-index:40; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-2); padding:10px; }
.ps-pop.open { display:block; }
.ps-pop-head { font-size:var(--fs-xs); font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2); margin-bottom:8px; }
.ps-logo-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ps-logo-grid .ed-logo-btn { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); padding:8px; cursor:pointer; height:48px; display:flex; align-items:center; justify-content:center; }
.ps-logo-grid .ed-logo-btn img { max-height:28px; max-width:100%; object-fit:contain; }

/* Hover tooltips (CSS only) */
.ps-app [data-tip] { position:relative; }
.ps-app [data-tip]::after { content:attr(data-tip); position:absolute; z-index:60; pointer-events:none; opacity:0; transform:translateY(-2px); transition:opacity .12s, transform .12s; background:var(--ink); color:#fff; font-size:11px; font-weight:500; line-height:1.3; padding:4px 8px; border-radius:6px; white-space:nowrap; box-shadow:var(--shadow-2); left:50%; top:calc(100% + 6px); translate:-50% 0; }
.ps-app [data-tip]:hover::after { opacity:1; transform:translateY(0); transition-delay:.35s; }
.ps-rail [data-tip]::after { left:calc(100% + 8px); top:50%; translate:0 -50%; transform:none; }
.ps-rail .ps-pop [data-tip]::after { left:50%; top:calc(100% + 4px); translate:-50% 0; }
.ps-app .ps-primary[data-tip]::after, .ps-app #edSaveDraft[data-tip]::after, .ps-app #edDownload[data-tip]::after { left:auto; right:0; translate:0 0; }
[data-theme=dark] .ps-app [data-tip]::after { background:#F4F4F5; color:#111; }
[data-theme=dark] .ps-layer .ps-lb:hover { background:rgba(255,255,255,.08); }
@media (max-width: 1100px) { .ps-side { width:240px; } }
@media (max-width: 860px) {
  .ps-app { height:auto; min-height:0; }
  .ps-body { flex-direction:column; }
  .ps-rail { width:auto; flex-direction:row; flex-wrap:wrap; border-right:none; border-bottom:1px solid var(--line); padding:4px; }
  .ps-rail-sep { width:1px; height:24px; margin:0 4px; }
  .ps-stage { min-height:360px; }
  .ps-side { width:auto; border-left:none; border-top:1px solid var(--line); }
  #psLayersPanel { max-height:none; }
  .ps-pop { left:8px; top:52px; }
  .ps-rail [data-tip]::after { left:50%; top:calc(100% + 6px); translate:-50% 0; }
}
.ps-panel-body input[type=range] { accent-color:var(--pink); }
.ps-layer-thumb.ico { background:var(--surface-2); color:var(--ink-2); }
.ps-layer.active .ps-layer-thumb.ico { color:var(--pink-ink); }
.ps-toast-big { position:absolute; left:50%; top:14px; transform:translate(-50%, -8px); opacity:0; pointer-events:none; transition:opacity .18s, transform .18s; z-index:30; font-size:var(--fs-sm); font-weight:600; padding:9px 14px; border-radius:var(--r-pill); background:var(--ink); color:#fff; box-shadow:var(--shadow-2); max-width:min(560px, 90%); text-align:center; }
.ps-toast-big.show { opacity:1; transform:translate(-50%, 0); }
.ps-toast-big.ok { background:#16A34A; }
.ps-toast-big.error { background:#CC0F6E; }

/* =====================================================================
   Lens loader (assets/js/fm-loader.js) — generators + Editor
   ===================================================================== */
.fm-loader { width:min(380px, 100%); display:flex; flex-direction:column; align-items:center; gap:16px; padding:30px 26px; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(8px); border:1px solid var(--line); border-radius:18px; box-shadow:0 16px 48px rgba(17,17,20,.12); box-sizing:border-box; }
.fm-lens { position:relative; width:112px; height:112px; flex-shrink:0; }
.fm-lens .ring { position:absolute; inset:0; border-radius:50%; border:3px solid var(--pink-soft); }
.fm-lens .arc { position:absolute; inset:0; border-radius:50%; border:3px solid transparent; border-top-color:var(--pink); border-right-color:var(--pink); animation:fm-l-spin 1.1s cubic-bezier(.6,.1,.3,.9) infinite; }
.fm-lens .arc2 { position:absolute; inset:10px; border-radius:50%; border:2px dashed #F3B7D3; animation:fm-l-spin 6s linear infinite reverse; }
.fm-lens .iris { position:absolute; inset:22px; border-radius:50%; background:conic-gradient(from 0deg, var(--pink) 0 60deg, #F06CA8 60deg 120deg, var(--pink) 120deg 180deg, #F06CA8 180deg 240deg, var(--pink) 240deg 300deg, #F06CA8 300deg 360deg); animation:fm-l-iris 2.4s ease-in-out infinite; box-shadow:inset 0 0 0 6px var(--surface); }
.fm-lens .iris::after { content:""; position:absolute; inset:34%; border-radius:50%; background:var(--surface); animation:fm-l-pupil 2.4s ease-in-out infinite; }
.fm-lens .flash { position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,0) 60%); opacity:0; animation:fm-l-flash 4.8s ease-out infinite; }
.fm-lens .spark { position:absolute; top:calc(50% - 5px); left:calc(50% - 5px); width:10px; height:10px; color:var(--pink); animation:fm-l-orbit 3.6s linear infinite; }
.fm-lens .spark svg { width:10px; height:10px; fill:currentColor; display:block; }
@keyframes fm-l-spin { to { transform:rotate(360deg); } }
@keyframes fm-l-iris { 0%,100% { transform:scale(1); } 50% { transform:scale(.86); } }
@keyframes fm-l-pupil { 0%,100% { inset:34%; } 50% { inset:42%; } }
@keyframes fm-l-flash { 0%,88% { opacity:0; } 92% { opacity:.9; } 100% { opacity:0; } }
@keyframes fm-l-orbit { from { transform:rotate(0deg) translateX(62px) rotate(0deg); } to { transform:rotate(360deg) translateX(62px) rotate(-360deg); } }
.fm-title { font-size:16px; font-weight:700; letter-spacing:-.01em; text-align:center; color:var(--ink); }
.fm-title small { display:block; font-weight:500; font-size:12.5px; color:var(--ink-3); margin-top:3px; }
.fm-steps { width:100%; display:flex; flex-direction:column; gap:7px; }
.fm-step { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink-3); transition:color .2s; }
.fm-step i { width:18px; height:18px; border-radius:50%; border:1.5px solid var(--line); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; font-style:normal; font-size:10px; color:#fff; transition:background .2s, border-color .2s; }
.fm-step.done { color:var(--ink-2); } .fm-step.done i { background:#16A34A; border-color:#16A34A; }
.fm-step.now { color:var(--ink); font-weight:600; } .fm-step.now i { border-color:var(--pink); background:var(--pink-soft); position:relative; }
.fm-step.now i::after { content:""; width:6px; height:6px; border-radius:50%; background:var(--pink); animation:fm-l-pulse 1s ease-in-out infinite; }
@keyframes fm-l-pulse { 0%,100% { transform:scale(.7); opacity:.6; } 50% { transform:scale(1.2); opacity:1; } }
.fm-bar { width:100%; height:5px; border-radius:99px; background:var(--line); overflow:hidden; position:relative; }
.fm-bar span { position:absolute; inset:0; width:38%; border-radius:99px; background:linear-gradient(90deg, var(--pink), #F06CA8); animation:fm-l-bar 1.6s ease-in-out infinite; }
.fm-bar.det span { animation:none; left:0; transition:width .4s ease; }
@keyframes fm-l-bar { 0% { left:-40%; } 100% { left:100%; } }
.fm-meta { display:flex; justify-content:space-between; width:100%; font-size:11.5px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.fm-tip { font-size:12px; color:var(--ink-2); background:var(--pink-soft); border-radius:10px; padding:8px 12px; text-align:center; line-height:1.45; width:100%; box-sizing:border-box; }
.fm-tip b { color:var(--pink-ink); } .fm-tip span { transition:opacity .22s; }
.fm-loader.sm { width:min(300px, 100%); padding:22px 20px; gap:12px; }
.fm-loader.sm .fm-lens { width:72px; height:72px; } .fm-loader.sm .fm-lens .iris { inset:14px; } .fm-loader.sm .fm-lens .arc2 { inset:7px; }
.fm-loader.sm .fm-lens .spark { animation-name:fm-l-orbit-sm; } @keyframes fm-l-orbit-sm { from { transform:rotate(0deg) translateX(40px); } to { transform:rotate(360deg) translateX(40px); } }
.fm-loader.sm .fm-title { font-size:14px; } .fm-loader.sm .fm-step { font-size:12px; }
.fm-loader.is-failed .fm-lens .arc, .fm-loader.is-failed .fm-lens .spark, .fm-loader.is-failed .fm-lens .iris, .fm-loader.is-failed .fm-bar span { animation-play-state:paused; }
.fm-loader.is-failed .fm-lens .iris { background:#CC0F6E; } .fm-loader.is-failed .fm-title { color:#CC0F6E; }
.fm-overlay-wrap { position:absolute; inset:0; z-index:35; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--surface-2) 55%, transparent); animation:fm-l-fade .18s ease-out; }
@keyframes fm-l-fade { from { opacity:0; } to { opacity:1; } }
.preview-frame.is-generating .fm-loader, .sc-variant-frame.is-generating .fm-loader { margin:auto; }
.preview-frame.is-generating, .sc-variant-frame.is-generating { background-image:var(--dots) !important; background-color:var(--surface-2) !important; animation:none !important; padding:16px; }
[data-theme=dark] .fm-lens .flash { background:radial-gradient(circle, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); }
[data-theme=dark] .fm-lens .arc2 { border-color:#7A2A4F; }
@media (prefers-reduced-motion: reduce) { .fm-lens *, .fm-bar span, .fm-step.now i::after { animation-duration:4s !important; } }

/* ---- Editor v2 controls: AI button, accent export, colour + font panels, lasso, boot ---- */
.ps-pop-anchor { position:relative; display:inline-flex; align-items:center; }
.ps-pop.ps-pop-down { left:0; top:calc(100% + 8px); }
.ps-pop.ps-pop-right { left:auto; right:0; }
.ps-ib-ai { background:var(--pink-soft); color:var(--pink-ink); border-color:#F3B7D3; }
.ps-ib-ai:hover, .ps-ib-ai[aria-expanded="true"] { background:var(--pink); color:#fff; border-color:var(--pink); }
.ps-ib-accent { color:var(--pink-ink); }
.ps-ib-accent:hover { background:var(--pink-soft); color:var(--pink-ink); }
.ps-ib-sm { width:26px; height:26px; }
.ps-ib-sm.on { background:var(--pink-soft); color:var(--pink-ink); border-color:#F3B7D3; }
.ps-seg { display:inline-flex; gap:1px; border:1px solid var(--line); border-radius:var(--r-sm); padding:1px; background:var(--surface); }
.ps-num { width:56px; height:26px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-size:var(--fs-xs); padding:0 6px; text-align:center; font-variant-numeric:tabular-nums; }
.ps-font-btn { display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 8px 0 10px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-size:13px; max-width:190px; cursor:pointer; }
.ps-font-btn:hover { border-color:var(--line-strong); background:var(--surface-2); }
.ps-font-btn span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ps-font-pop { width:340px; padding:8px; }
.ps-font-search { display:flex; align-items:center; gap:6px; padding:4px 6px; border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:6px; flex-wrap:wrap; color:var(--ink-3); }
.ps-font-search input { flex:1; min-width:100px; border:none; background:transparent; outline:none; font-size:var(--fs-sm); color:var(--ink); height:24px; }
.ps-font-cats { display:flex; gap:3px; width:100%; }
.ps-font-cats button { border:1px solid transparent; background:transparent; color:var(--ink-3); font-size:10.5px; padding:2px 7px; border-radius:99px; cursor:pointer; }
.ps-font-cats button.on { background:var(--pink-soft); color:var(--pink-ink); border-color:#F3B7D3; }
.ps-font-list { max-height:320px; overflow-y:auto; }
.ps-font-item { display:flex; align-items:baseline; justify-content:space-between; gap:8px; width:100%; padding:7px 10px; border:none; background:transparent; border-radius:var(--r-sm); cursor:pointer; text-align:left; color:var(--ink); }
.ps-font-item:hover { background:var(--surface-2); }
.ps-font-item.on { background:var(--pink-soft); color:var(--pink-ink); }
.ps-font-item .fn { font-size:17px; line-height:1.2; }
.ps-font-item .fc { font-size:10.5px; color:var(--ink-3); font-family:var(--font, Inter, sans-serif); flex-shrink:0; }
.ps-color-btn { width:28px; height:28px; border:1px solid var(--line); border-radius:6px; background:var(--surface); padding:2px; cursor:pointer; display:inline-flex; }
.ps-color-btn:hover { border-color:var(--line-strong); }
.ps-color-chip { flex:1; border-radius:4px; border:1px solid rgba(0,0,0,.08); background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%); background-size:8px 8px; background-position:0 0,0 4px,4px -4px,-4px 0; }
.ps-hex { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; text-transform:uppercase; }
.ps-hex-inline { width:78px; height:26px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-size:11.5px; padding:0 7px; }
.ps-hex-inline:focus { border-color:var(--pink); outline:none; box-shadow:0 0 0 3px var(--pink-ring); }
.ps-recent { display:inline-flex; gap:4px; margin-left:2px; }
.ps-recent .ps-swatch { width:20px; height:20px; }
.ps-color-pop { width:250px; }
.ps-color-top { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.ps-color-top input[type=color] { width:44px; height:34px; border:1px solid var(--line); border-radius:6px; padding:2px; background:var(--surface); cursor:pointer; }
.ps-color-top .field-input { flex:1; height:34px; font-size:13px; }
.ps-color-group { margin-top:8px; }
.ps-color-group > span { display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); margin-bottom:5px; }
.ps-color-grid { display:flex; flex-wrap:wrap; gap:5px; min-height:22px; }
.ps-color-grid .ps-swatch { width:22px; height:22px; border-radius:6px; }
.ps-color-grid:empty::after { content:"Nothing yet"; font-size:11px; color:var(--ink-3); }
.ps-lasso-acts { display:none; gap:6px; }
#leLassoRow.closed .ps-lasso-acts { display:inline-flex; }
#leLassoRow.closed #leLassoHint { display:none; }
.ps-boot { position:absolute; inset:0; z-index:80; background:var(--surface); display:flex; align-items:center; justify-content:center; transition:opacity .25s; }
.ps-boot.hide { opacity:0; pointer-events:none; }
.ps-app { position:relative; }
@media (max-width: 1180px) { .ps-font-btn { max-width:130px; } .ps-opt-label { display:none; } }

/* ---- Editor autosave indicator ---- */
.ps-autosave { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink-3); padding:0 8px; height:28px; border-radius:var(--r-pill); white-space:nowrap; }
.ps-autosave i { width:7px; height:7px; border-radius:50%; background:var(--ink-3); opacity:.5; }
.ps-autosave.dirty i { background:#F59E0B; opacity:1; }
.ps-autosave.saving i { background:var(--pink); opacity:1; animation:fm-l-pulse 1s ease-in-out infinite; }
.ps-autosave.saved i { background:#16A34A; opacity:1; }
.ps-autosave.error { color:#CC0F6E; } .ps-autosave.error i { background:#CC0F6E; opacity:1; }
@media (max-width: 900px) { .ps-autosave span { display:none; } }

/* ---- Editor v3: AI tags, looks panel, cut-out, fill, notice ---- */
.ai-tag { display:inline-flex; align-items:center; font-style:normal; font-size:9.5px; font-weight:700; letter-spacing:.06em; padding:1px 5px; border-radius:99px; background:var(--pink-soft); color:var(--pink-ink); border:1px solid #F3B7D3; line-height:1.3; vertical-align:middle; }
.ai-tag-inv { background:rgba(255,255,255,.22); color:#fff; border-color:rgba(255,255,255,.4); }
.ai-note { font-size:10.5px; color:var(--ink-3); margin-top:8px; text-align:center; }
.ps-chip-ai { border-color:#F3B7D3; background:var(--pink-soft); color:var(--pink-ink); }
.ps-chip-ai:hover { background:#FBD1E4; }
.ps-chip-ai svg { color:var(--pink-ink); }
.ps-tabs { margin-left:auto; display:inline-flex; gap:2px; background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:2px; }
.ps-tabs button { border:none; background:transparent; color:var(--ink-3); font-size:10.5px; font-weight:600; padding:2px 9px; border-radius:99px; cursor:pointer; text-transform:none; letter-spacing:0; }
.ps-tabs button.on { background:var(--pink); color:#fff; }
.ps-look-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-bottom:8px; }
.ps-look { border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-2); padding:3px; cursor:pointer; text-align:center; font-size:10.5px; color:var(--ink-2); }
.ps-look img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; display:block; margin-bottom:3px; background:var(--surface-2); }
.ps-look:hover { border-color:var(--line-strong); }
.ps-look.on { border-color:var(--pink); box-shadow:0 0 0 2px var(--pink-ring); color:var(--pink-ink); font-weight:600; }
.ps-adj-row { display:grid; grid-template-columns:78px 1fr 34px; align-items:center; gap:6px; margin:3px 0; font-size:11px; color:var(--ink-2); }
.ps-adj-row input[type=range] { width:100%; accent-color:var(--pink); }
.ps-adj-row output { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-3); font-size:10.5px; }
.ps-fill-pop { position:absolute; left:50%; top:96px; transform:translateX(-50%); width:360px; z-index:45; }
.ps-fill-pop.open { display:block; }
.ps-modal { position:fixed; inset:0; z-index:200; background:rgba(17,17,20,.45); display:flex; align-items:center; justify-content:center; padding:16px; }
.ps-modal[hidden] { display:none; }
.ps-modal-card { width:min(440px, 100%); background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-2); padding:22px 22px 18px; }
.ps-modal-ic { width:40px; height:40px; border-radius:12px; background:var(--pink-soft); color:var(--pink-ink); display:inline-flex; align-items:center; justify-content:center; margin-bottom:10px; }
.ps-modal-card h3 { margin:0 0 6px; font-size:16px; }
.ps-modal-card p { margin:0 0 12px; font-size:var(--fs-sm); color:var(--ink-2); line-height:1.5; }
.ps-check { display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); color:var(--ink-3); margin-bottom:14px; }
.ps-stage.drop-hint::after { content:"Drop to import as a new layer"; position:absolute; inset:12px; border:2px dashed var(--pink); border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:600; color:var(--pink-ink); background:rgba(232,18,122,.06); pointer-events:none; }
.ps-layer.active { background:var(--pink-soft); border-color:#F3B7D3; color:var(--pink-ink); box-shadow:inset 3px 0 0 var(--pink); }

/* ---- Members & wallet ---- */
.nav-item.is-locked { opacity:.7; }
.nav-item .nav-lock { margin-left:auto; color:var(--ink-3); display:inline-flex; }
.tb-app.is-locked { opacity:.75; } .tb-app-lock { position:absolute; right:-4px; bottom:-4px; width:16px; height:16px; border-radius:50%; background:var(--surface); border:1px solid var(--line); color:var(--ink-3); display:inline-flex; align-items:center; justify-content:center; }
.tb-app-ic { position:relative; }
.hv3-tool.is-locked img { filter:grayscale(.6); opacity:.75; }
.lock-pill { display:inline-flex; align-items:center; gap:3px; font-size:10px; font-weight:600; padding:1px 6px; border-radius:99px; background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line); vertical-align:middle; margin-left:4px; }
.hv3-door-primary { border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-ring); }
.tb-wallet { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px 0 9px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:var(--fs-xs); margin-right:4px; }
.tb-wallet strong { color:var(--ink); font-variant-numeric:tabular-nums; }
.tb-wallet:hover { background:var(--surface-2); color:var(--ink); }
.tb-wallet.low { border-color:#F59E0B; background:#FFF7E6; } .tb-wallet.low strong { color:#B45309; }
[data-theme=dark] .tb-wallet.low { background:#3A2A0A; }
.wallet-grid { display:grid; grid-template-columns:minmax(260px, 1fr) 2fr; gap:var(--gap); }
.wallet-balance .wb-num { font-size:40px; font-weight:700; letter-spacing:-.02em; margin:4px 0 6px; } .wallet-balance .wb-num small { font-size:14px; font-weight:500; color:var(--ink-3); }
.wallet-prices { width:100%; border-collapse:collapse; } .wallet-prices td { padding:8px 0; border-top:1px solid var(--line); font-size:var(--fs-sm); vertical-align:top; } .wallet-prices tr:first-child td { border-top:none; }
.wallet-prices td.num { text-align:right; white-space:nowrap; font-weight:700; font-variant-numeric:tabular-nums; } .wallet-prices td.num small { font-weight:400; color:var(--ink-3); }
.wallet-packs { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:8px; margin-bottom:14px; }
.wallet-pack { display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 8px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); cursor:pointer; color:var(--ink); }
.wallet-pack:hover { border-color:var(--line-strong); } .wallet-pack.on { border-color:var(--pink); box-shadow:0 0 0 3px var(--pink-ring); }
.wallet-pack .wp-t { font-size:20px; font-weight:700; } .wallet-pack .wp-l { font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.05em; } .wallet-pack .wp-p { font-size:13px; color:var(--pink-ink); font-weight:600; margin-top:2px; }
.wallet-pack-custom input { width:90px; text-align:center; border:1px solid var(--line); border-radius:6px; padding:4px; font-size:16px; font-weight:700; background:var(--surface); color:var(--ink); }
.wallet-pay { display:flex; flex-direction:column; gap:10px; } .wallet-pay > .btn-primary { align-self:flex-start; }
.wallet-manual summary { cursor:pointer; font-size:var(--fs-sm); font-weight:600; }
.wallet-table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); } .wallet-table th { text-align:left; font-size:var(--fs-xs); color:var(--ink-3); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line); } .wallet-table td { padding:7px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.wallet-table .num, .wallet-table th.num { text-align:right; font-variant-numeric:tabular-nums; } .wallet-table .neg { color:#B45309; } .wallet-table .pos { color:#15803D; font-weight:600; }
.wstatus { font-size:11px; font-weight:600; padding:2px 8px; border-radius:99px; background:var(--surface-2); color:var(--ink-2); } .wstatus.paid { background:rgba(22,163,74,.12); color:#15803D; } .wstatus.pending { background:#FFF7E6; color:#B45309; } .wstatus.rejected, .wstatus.failed { background:var(--pink-soft); color:var(--pink-ink); }
@media (max-width: 900px) { .wallet-grid { grid-template-columns:1fr; } }
.mem-actions { position:relative; display:inline-block; } .mem-actions summary { list-style:none; cursor:pointer; display:inline-flex; } .mem-actions summary::-webkit-details-marker { display:none; }
.mem-pop { position:absolute; right:0; top:calc(100% + 6px); z-index:30; width:360px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-2); padding:10px; display:flex; flex-direction:column; gap:8px; text-align:left; }
.mem-row { display:flex; gap:6px; align-items:center; } .mem-row .field-input { min-height:32px; font-size:var(--fs-xs); }

/* ---- Social Creator text check ---- */
.sc-textcheck { margin:8px 0 4px; padding:8px 10px; border-radius:var(--r-md); font-size:var(--fs-xs); color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.sc-textcheck .tc-dot { width:8px; height:8px; border-radius:50%; background:var(--ink-3); flex-shrink:0; }
.sc-textcheck.checking .tc-dot { background:var(--pink); animation:fm-l-pulse 1s ease-in-out infinite; }
.sc-textcheck.ok { background:rgba(22,163,74,.08); border-color:rgba(22,163,74,.3); color:#15803D; } .sc-textcheck.ok .tc-dot { background:#16A34A; }
.sc-textcheck.warn { background:#FFF7E6; border-color:#F5D08A; color:#B45309; } .sc-textcheck.warn .tc-dot { background:#F59E0B; }
.sc-textcheck.bad { background:var(--pink-soft); border-color:#F3B7D3; color:var(--pink-ink); } .sc-textcheck.bad .tc-dot { background:var(--pink); }
.sc-textcheck ul { margin:2px 0 0; padding-left:16px; width:100%; color:var(--ink-2); } .sc-textcheck li { margin:2px 0; } .sc-textcheck li em { color:var(--ink-3); font-style:normal; font-size:10.5px; } .sc-textcheck li s { color:var(--pink-ink); }
.sc-textcheck .tc-fix { margin-top:4px; }

/* ---- Editor spelling panel ---- */
.sp-row { display:flex; align-items:flex-start; gap:8px; padding:6px 0; border-top:1px solid var(--line); font-size:var(--fs-xs); }
.sp-row:first-child { border-top:none; }
.sp-word { font-weight:700; color:var(--pink-ink); text-decoration:underline wavy #E8127A; min-width:70px; word-break:break-all; }
.sp-sugg { display:flex; flex-wrap:wrap; gap:4px; flex:1; } .sp-sugg .ps-chip { height:22px; padding:0 8px; font-size:11px; } .sp-sugg .sp-ignore { color:var(--ink-3); }
.sp-badge { display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; border-radius:99px; background:var(--pink); color:#fff; font-size:10px; font-weight:700; margin-left:4px; flex-shrink:0; }
.sp-proof { display:flex; flex-direction:column; gap:6px; } .sp-proof-text { padding:8px 10px; border-radius:var(--r-sm); background:var(--surface-2); color:var(--ink); font-size:var(--fs-sm); line-height:1.45; }
.sp-proof ul { margin:0; padding-left:16px; color:var(--ink-2); }
.ps-crop-acts { display:none; gap:6px; } #leCropApplyRow.has .ps-crop-acts { display:inline-flex; } #leCropApplyRow.has #leCropHint { display:none; }

/* ---- Client scope: "All clients" browse mode (Sep 2026) ---- */
.sw-logo-all { background:linear-gradient(135deg, var(--brand, #E8127A), #7C3AED) !important; color:#fff !important; }
.sb-menu .sw-all small { font-size:10.5px; font-weight:400; }
.scope-strip { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); margin-bottom:16px; font-size:var(--fs-sm); }
.scope-strip .scope-pill { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:999px; background:var(--surface-2); font-weight:600; }
.scope-strip .scope-pill.on { background:#FDE8F2; color:#CC0F6E; }
.scope-strip form { display:inline; }
.scope-strip .sw-logo { width:20px; height:20px; border-radius:5px; object-fit:contain; display:inline-flex; align-items:center; justify-content:center; color:#fff; font-size:10px; font-weight:600; }

/* ================= HOME v4 (Sep 2026) — composer-first dashboard ================= */
.hv4 { max-width:980px; margin:0 auto; display:flex; flex-direction:column; gap:28px; padding-top:18px; }
.hv4-greet { text-align:center; display:flex; flex-direction:column; gap:6px; }
.hv4-greet h1 { margin:0; font-family:-apple-system, 'SF Pro Display', 'SF Pro Text', BlinkMacSystemFont, 'Helvetica Neue', 'Inter', system-ui, sans-serif; font-size:clamp(28px, 3.4vw, 40px); font-weight:500; letter-spacing:-.03em; line-height:1.15; color:var(--ink); }
.hv4-greet p { margin:0; font-size:var(--fs-md); color:var(--ink-3); }
.hv4-greet + .hv4-composer { margin-top:-8px; }

.hv4-composer { position:relative; background:var(--surface); border:1px solid var(--line); border-radius:20px; box-shadow:0 12px 40px rgba(60,40,90,.07), 0 1px 2px rgba(0,0,0,.04); padding:14px 16px 10px; display:flex; flex-direction:column; gap:6px; transition:border-color .12s, box-shadow .12s; }
.hv4-composer:focus-within { border-color:var(--pink); box-shadow:0 0 0 4px var(--pink-ring), 0 12px 40px rgba(60,40,90,.08); }
.hv4-composer.is-drag { border-color:var(--pink); border-style:dashed; }
.hv4-drop { display:none; position:absolute; inset:0; border-radius:20px; background:rgba(253,232,242,.9); color:var(--pink-ink); font-weight:600; align-items:center; justify-content:center; pointer-events:none; z-index:3; }
.hv4-composer.is-drag .hv4-drop { display:flex; }
.hv4-chips { display:flex; flex-wrap:wrap; gap:8px; }
.hv4-chips:has(.hv4-chip-att) { margin-bottom:4px; }
.hv4-chip { position:relative; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px 0 6px; border:1px solid var(--line); border-radius:999px; font-size:12.5px; color:var(--ink-2); background:var(--surface); }
.hv4-chip img { width:22px; height:22px; border-radius:6px; object-fit:cover; }
.hv4-chip .n { font-weight:500; color:var(--ink); }
.hv4-chip .r { border:none; background:none; color:var(--ink-3); font:inherit; font-size:12px; cursor:pointer; padding:0 2px; }
.hv4-chip .r:hover { color:var(--pink-ink); }
.hv4-chip .x { border:none; background:none; color:var(--ink-3); font-size:16px; line-height:1; cursor:pointer; padding:0 0 0 2px; }
.hv4-chip .x:hover { color:var(--danger); }
.hv4-chip-add { border-style:dashed; color:var(--ink-3); background:transparent; cursor:pointer; padding:0 12px; }
.hv4-chip-add:hover { color:var(--pink-ink); border-color:var(--pink); background:var(--pink-soft); }
.hv4-chips:has(.hv4-chip-att) .hv4-chip-add { font-size:0; padding:0; width:32px; justify-content:center; color:var(--ink-2); }
.hv4-chips:has(.hv4-chip-att) .hv4-chip-add svg { width:15px; height:15px; }
.hv4-input { width:100%; border:none; outline:none; background:transparent; resize:none; font-family:inherit; font-size:16.5px; line-height:1.5; color:var(--ink); min-height:30px; max-height:200px; padding:4px 2px; }
.hv4-input:focus-visible { box-shadow:none; }
.hv4-input::placeholder { color:#A5A3B5; }
.hv4-bar { display:flex; align-items:center; gap:4px; flex-wrap:wrap; padding-top:8px; border-top:1px solid #F0EFF5; }
.hv4-tool { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 9px; border-radius:9px; border:1px solid transparent; background:transparent; font:inherit; font-size:12.5px; font-weight:500; color:var(--ink-2); cursor:pointer; white-space:nowrap; text-decoration:none; }
.hv4-tool:hover { background:var(--surface-2); color:var(--ink); }
.hv4-tool.active { color:var(--pink); background:var(--pink-soft); }
.hv4-tool-pill { border-color:var(--line); background:#FAFAFC; }
.hv4-tool .v { color:var(--ink); font-weight:600; }
.hv4-tool .v.on { color:#1A9E5C; }
.hv4-tool.is-off .v { color:var(--ink-3); }
.hv4-tool .c { color:var(--ink-3); font-size:9px; margin-left:-2px; }
.hv4-ratio { display:inline-block; width:12px; height:12px; border:1.7px solid currentColor; border-radius:2px; box-sizing:border-box; }
.hv4-sp { flex:1; }
.hv4-cost { font-size:12px; color:var(--ink-3); padding-right:6px; white-space:nowrap; }
.hv4-send { width:38px; height:38px; border-radius:12px; border:none; background:var(--pink); color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 16px rgba(232,18,122,.32); transition:background .12s, transform .06s, box-shadow .12s; }
.hv4-send:hover { background:var(--pink-hover); transform:translateY(-1px); }
.hv4-send:disabled { background:var(--line-strong); box-shadow:none; cursor:not-allowed; transform:none; }
.hv4-pop-wrap { position:relative; }
.hv4-pop { display:none; position:absolute; left:0; top:calc(100% + 6px); z-index:60; min-width:200px; background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-2); padding:6px; flex-direction:column; gap:1px; }
.hv4-pop.open { display:flex; }
.hv4-pop button { display:flex; align-items:center; gap:8px; width:100%; text-align:left; border:none; background:none; font:inherit; font-size:13px; color:var(--ink); padding:8px 10px; border-radius:8px; cursor:pointer; white-space:nowrap; }
.hv4-pop button:hover { background:var(--surface-2); }
.hv4-pop button.on { background:var(--pink-soft); color:var(--pink-ink); }
.hv4-pop button b { width:36px; font-weight:600; }
.hv4-rolepop { left:auto; right:0; min-width:150px; }
.hv4-examples { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:-14px; }
.hv4-examples button { border:1px solid var(--line); background:var(--surface); color:var(--ink-3); font:inherit; font-size:12.5px; border-radius:999px; padding:6px 12px; cursor:pointer; transition:all .12s; }
.hv4-examples button:hover { color:var(--ink); border-color:var(--line-strong); box-shadow:var(--shadow-1); }

/* results */
.hv4-results { display:flex; flex-direction:column; gap:12px; }
.hv4-results-meta { text-transform:none; letter-spacing:0; font-weight:500; }
.hv4-result-grid { display:flex; flex-direction:column; gap:18px; }
.hv4-batch { display:flex; flex-direction:column; gap:10px; }
.hv4-batch-brief { font-size:var(--fs-sm); color:var(--ink-2); padding-left:2px; }
.hv4-batch-row { display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); }
.hv4-batch-row.n1 { grid-template-columns:minmax(0, 560px); }
.hv4-batch-row.n3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.hv4-batch-row.n4 { grid-template-columns:repeat(4, minmax(0,1fr)); }
.hv4-card { position:relative; border-radius:16px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line); aspect-ratio:4/5; display:flex; align-items:center; justify-content:center; }
.hv4-card.ar-1x1 { aspect-ratio:1/1; } .hv4-card.ar-9x16 { aspect-ratio:9/16; } .hv4-card.ar-3x4 { aspect-ratio:3/4; } .hv4-card.ar-16x9 { aspect-ratio:16/9; } .hv4-card.ar-4x3 { aspect-ratio:4/3; }
.hv4-card > img { width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.hv4-card .fm-loader { border:none; box-shadow:none; background:transparent; }
.hv4-card-bar { position:absolute; left:10px; right:10px; bottom:10px; display:flex; gap:6px; opacity:0; transform:translateY(6px); transition:opacity .15s, transform .15s; }
.hv4-card:hover .hv4-card-bar { opacity:1; transform:none; }
.hv4-card-bar > * { display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 10px; border-radius:9px; background:rgba(21,19,31,.82); color:#fff; border:none; font:inherit; font-size:12px; font-weight:600; cursor:pointer; text-decoration:none; backdrop-filter:blur(6px); }
.hv4-card-bar > *:hover { background:var(--pink); color:#fff; }
.hv4-card-bar [data-a="dl"], .hv4-card-bar [data-a="open"] { padding:0 8px; margin-left:auto; } .hv4-card-bar [data-a="open"] { margin-left:0; }
.hv4-card-err { padding:16px; font-size:var(--fs-sm); color:var(--danger); text-align:center; }
.hv4-lightbox { position:fixed; inset:0; z-index:400; background:rgba(21,19,31,.9); display:flex; align-items:center; justify-content:center; cursor:zoom-out; padding:24px; }
.hv4-lightbox img { max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.hv4-toast { position:fixed; left:50%; bottom:28px; transform:translate(-50%, 20px); z-index:500; background:#15131F; color:#fff; padding:10px 16px; border-radius:12px; font-size:13px; box-shadow:var(--shadow-2); opacity:0; pointer-events:none; transition:all .2s; max-width:min(560px, 92vw); }
.hv4-toast.show { opacity:1; transform:translate(-50%, 0); }
.hv4-toast.err { background:#B4123F; }

/* quick actions */
.hv4-actions { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.hv4-actions a { display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s, transform .12s; }
.hv4-actions a:hover { border-color:var(--line-strong); box-shadow:var(--shadow-1); transform:translateY(-1px); color:inherit; }
.hv4-actions a > svg { width:32px; height:32px; padding:8px; border-radius:10px; background:var(--pink-soft); color:var(--pink-ink); flex-shrink:0; box-sizing:border-box; }
.hv4-actions a span { display:flex; flex-direction:column; gap:1px; min-width:0; }
.hv4-actions strong { font-size:var(--fs-sm); font-weight:600; color:var(--ink); }
.hv4-actions small { font-size:11.5px; color:var(--ink-3); line-height:1.35; }

/* sections */
.hv4-section { display:flex; flex-direction:column; gap:12px; }
.hv4-section-head { display:flex; align-items:center; justify-content:space-between; font-size:var(--fs-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.hv4-strip { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.hv4-tile { position:relative; display:flex; flex-direction:column; gap:7px; text-decoration:none; color:inherit; }
.hv4-tile-img { display:block; aspect-ratio:4/5; border-radius:12px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line); transition:transform .15s, box-shadow .15s; }
.hv4-tile:hover .hv4-tile-img { transform:translateY(-2px); box-shadow:var(--shadow-2); }
.hv4-tile-img img { width:100%; height:100%; object-fit:cover; display:block; }
.hv4-tile-blank { width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--ink-3); }
.hv4-tile-tag { position:absolute; top:8px; left:8px; background:rgba(21,19,31,.78); color:#fff; font-size:10.5px; font-weight:600; padding:3px 7px; border-radius:999px; letter-spacing:.02em; }
.hv4-tile-text { display:flex; flex-direction:column; gap:1px; min-width:0; padding:0 2px; }
.hv4-tile-text strong { font-size:12.5px; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hv4-tile-text span { font-size:11.5px; color:var(--ink-3); }
.hv4-projects { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px; }
.hv4-proj { display:flex; flex-direction:column; gap:8px; padding:10px; border:1px solid var(--line); border-radius:14px; background:var(--surface); text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s; }
.hv4-proj:hover { border-color:var(--line-strong); box-shadow:var(--shadow-1); color:inherit; }
.hv4-proj-covers { display:grid; gap:3px; height:96px; border-radius:10px; overflow:hidden; background:var(--surface-2); grid-template-columns:2fr 1fr; grid-template-rows:1fr 1fr; }
.hv4-proj-covers.n1 { grid-template-columns:1fr; grid-template-rows:1fr; } .hv4-proj-covers.n2 { grid-template-columns:1fr 1fr; grid-template-rows:1fr; }
.hv4-proj-covers img { width:100%; height:100%; object-fit:cover; display:block; }
.hv4-proj-covers.n3 img:first-child { grid-row:1 / span 2; }
.hv4-proj-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
.hv4-proj-text strong { font-size:var(--fs-sm); font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hv4-proj-text span { font-size:11.5px; color:var(--ink-3); }
.hv4-tools { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
@media (max-width:760px) { .hv4-tools { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.hv4-tool-card { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s, transform .12s; }
.hv4-tool-card:hover { border-color:var(--line-strong); box-shadow:var(--shadow-2); transform:translateY(-2px); color:inherit; }
.hv4-tool-cover { display:block; aspect-ratio:16/9; background:var(--surface-2); overflow:hidden; }
.hv4-tool-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s; }
.hv4-tool-card:hover .hv4-tool-cover img { transform:scale(1.04); }
.hv4-tool-text { display:flex; flex-direction:column; gap:3px; padding:10px 12px 12px; }
.hv4-tool-text strong { font-size:var(--fs-sm); font-weight:600; color:var(--ink); }
.hv4-tool-text span { font-size:11.5px; color:var(--ink-3); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:900px) { .hv4-actions { grid-template-columns:repeat(2, minmax(0,1fr)); } .hv4-batch-row.n3, .hv4-batch-row.n4 { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) { .hv4-actions, .hv4-batch-row { grid-template-columns:1fr; } .hv4-cost { display:none; } }

/* ---- Home v4.1: hero aura + icon studios ---- */
.hv4-hero { position:relative; display:flex; flex-direction:column; gap:22px; padding:22px 0 6px; }
.hv4-aura { position:absolute; inset:-40px -40px 30px; z-index:0; pointer-events:none; }
.hv4-aura i { position:absolute; border-radius:50%; filter:blur(48px); opacity:.95; }
.hv4-aura i:nth-child(1) { width:420px; height:320px; left:-40px; top:-20px; background:radial-gradient(circle, #FFC1DD 0%, rgba(255,193,221,0) 70%); }
.hv4-aura i:nth-child(2) { width:520px; height:360px; right:-80px; top:-60px; background:radial-gradient(circle, #D7C6FF 0%, rgba(215,198,255,0) 70%); }
.hv4-aura i:nth-child(3) { width:380px; height:260px; left:40%; top:120px; background:radial-gradient(circle, #C3E4FF 0%, rgba(195,228,255,0) 70%); opacity:.85; }
.hv4-hero > * { position:relative; z-index:1; }
.hv4-hero .hv4-greet { text-align:left; padding:0 4px; gap:8px; }
.hv4-hero .hv4-greet h1 { font-size:clamp(30px, 3.8vw, 44px); font-weight:600; letter-spacing:-.035em; }
.hv4-hero .hv4-greet p { font-size:var(--fs-md); color:var(--ink-2); }
.hv4-hero .hv4-composer { margin-top:-6px; background:rgba(255,255,255,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.9); box-shadow:0 20px 50px rgba(80,50,120,.10), 0 1px 0 rgba(255,255,255,.8) inset; border-radius:22px; padding:16px 18px 12px; }
.hv4-hero .hv4-composer:focus-within { border-color:rgba(232,18,122,.45); box-shadow:0 0 0 4px var(--pink-ring), 0 20px 50px rgba(80,50,120,.12); }
.hv4-hero .hv4-input { font-size:17.5px; min-height:34px; }
.hv4-hero .hv4-tool-pill { background:rgba(255,255,255,.7); }
.hv4-hero .hv4-send { border-radius:50%; width:40px; height:40px; background:linear-gradient(135deg, #E8127A, #B44BFF); box-shadow:0 8px 20px rgba(200,40,180,.35); }
.hv4-hero .hv4-send:disabled { background:var(--line-strong); box-shadow:none; }
.hv4-hero .hv4-examples { justify-content:flex-start; margin-top:-8px; padding:0 2px; }
.hv4-hero .hv4-examples button { background:rgba(255,255,255,.7); backdrop-filter:blur(8px); }
@media (prefers-color-scheme: dark) { .hv4-hero .hv4-composer { background:rgba(30,28,40,.75); border-color:rgba(255,255,255,.08); } .hv4-aura i { opacity:.25; } .hv4-hero .hv4-tool-pill, .hv4-hero .hv4-examples button { background:rgba(255,255,255,.06); } }

.hv4-studios { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.hv4-studio { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:16px; background:var(--surface); text-decoration:none; color:inherit; transition:border-color .12s, box-shadow .12s, transform .12s; }
.hv4-studio:hover { border-color:var(--line-strong); box-shadow:var(--shadow-2); transform:translateY(-2px); color:inherit; }
.hv4-studio-icon { width:44px; height:44px; border-radius:13px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; box-shadow:0 6px 14px rgba(0,0,0,.10); }
.hv4-studio.t-pink .hv4-studio-icon { background:linear-gradient(135deg, #FF5FA8, #E8127A); }
.hv4-studio.t-amber .hv4-studio-icon { background:linear-gradient(135deg, #FFB65C, #F0791A); }
.hv4-studio.t-teal .hv4-studio-icon { background:linear-gradient(135deg, #4FD1C5, #159E8F); }
.hv4-studio.t-violet .hv4-studio-icon { background:linear-gradient(135deg, #A78BFA, #6D3FE0); }
.hv4-studio.t-blue .hv4-studio-icon { background:linear-gradient(135deg, #5CB2FF, #1E6FE8); }
.hv4-studio.t-rose .hv4-studio-icon { background:linear-gradient(135deg, #FF7A7A, #D62B5C); }
.hv4-studio-text { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.hv4-studio-text strong { font-size:var(--fs-sm); font-weight:600; color:var(--ink); display:flex; align-items:center; gap:6px; }
.hv4-studio-text strong em { font-style:normal; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#1A9E5C; background:#E6F7EE; padding:2px 6px; border-radius:999px; }
.hv4-studio-text span { font-size:11.5px; color:var(--ink-3); line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hv4-studio-go { color:var(--ink-3); font-size:14px; opacity:0; transform:translateX(-4px); transition:all .15s; }
.hv4-studio:hover .hv4-studio-go { opacity:1; transform:none; color:var(--pink); }
@media (max-width:820px) { .hv4-studios { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:520px) { .hv4-studios { grid-template-columns:1fr; } }

/* ================= Login v2 (Sep 2026) ================= */
body.auth-v2 { background:var(--canvas); }
.lg-wrap { min-height:100vh; display:grid; grid-template-columns:minmax(360px, 46%) 1fr; }
.lg-side { position:relative; overflow:hidden; background:#15131F; color:#fff; padding:40px 48px; display:flex; flex-direction:column; justify-content:space-between; gap:40px; }
.lg-aura { position:absolute; inset:0; pointer-events:none; }
.lg-aura i { position:absolute; border-radius:50%; filter:blur(70px); opacity:.75; }
.lg-aura i:nth-child(1) { width:520px; height:520px; left:-160px; top:-140px; background:radial-gradient(circle, #E8127A 0%, rgba(232,18,122,0) 70%); }
.lg-aura i:nth-child(2) { width:560px; height:560px; right:-220px; top:30%; background:radial-gradient(circle, #6D3FE0 0%, rgba(109,63,224,0) 70%); }
.lg-aura i:nth-child(3) { width:420px; height:420px; left:20%; bottom:-200px; background:radial-gradient(circle, #1E6FE8 0%, rgba(30,111,232,0) 70%); opacity:.5; }
.lg-side > * { position:relative; z-index:1; }
.lg-side-top { display:flex; align-items:center; gap:10px; }
.lg-brand { font-size:21px; font-weight:700; letter-spacing:-.02em; color:#fff; } .lg-brand b { color:var(--pink); }
.lg-brand.dark { color:var(--ink); }
.lg-side-mid h2 { margin:0 0 14px; font-family:-apple-system, 'SF Pro Display', BlinkMacSystemFont, 'Helvetica Neue', 'Inter', sans-serif; font-size:clamp(34px, 3.6vw, 48px); font-weight:600; letter-spacing:-.035em; line-height:1.08; background:linear-gradient(90deg, #fff 0%, #FFC1DD 60%, #D7C6FF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lg-side-mid p { margin:0 0 22px; font-size:15px; line-height:1.55; color:rgba(255,255,255,.72); max-width:440px; }
.lg-points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.lg-points li { display:flex; align-items:center; gap:10px; font-size:13.5px; color:rgba(255,255,255,.85); }
.lg-points li i { width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg, #E8127A, #B44BFF); flex-shrink:0; position:relative; }
.lg-points li i::after { content:''; position:absolute; left:6px; top:3px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.lg-side-bot { display:flex; flex-direction:column; gap:10px; }
.lg-powered { font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.lg-stack { display:flex; flex-wrap:wrap; gap:8px; }
.lg-chip { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 13px 0 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06); backdrop-filter:blur(6px); font-size:13px; font-weight:600; color:rgba(255,255,255,.9); letter-spacing:-.01em; }
.lg-chip svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
.lg-note { font-size:11.5px; color:rgba(255,255,255,.42); }
.lg-main { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; gap:22px; }
.lg-card { width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:0 20px 60px rgba(60,40,90,.10); padding:32px 32px 26px; display:flex; flex-direction:column; gap:14px; }
.lg-card-brand { display:none; align-items:center; gap:9px; margin-bottom:4px; }
.lg-card h1 { margin:6px 0 0; font-size:26px; font-weight:650; letter-spacing:-.025em; color:var(--ink); }
.lg-sub { margin:-8px 0 4px; color:var(--ink-3); font-size:var(--fs-sm); }
.lg-input { height:44px; border-radius:12px; font-size:15px; }
.lg-pw { position:relative; }
.lg-pw .lg-input { padding-right:42px; }
.lg-eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:32px; height:32px; border:none; background:transparent; color:var(--ink-3); border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.lg-eye:hover, .lg-eye.on { color:var(--pink); background:var(--pink-soft); }
.lg-submit { height:46px; border-radius:12px; font-size:15px; margin-top:4px; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:linear-gradient(135deg, #E8127A, #C0269A); box-shadow:0 10px 24px rgba(232,18,122,.28); }
.lg-submit:hover { background:linear-gradient(135deg, #D1106E, #A9208A); }
.lg-foot { margin:2px 0 0; text-align:center; font-size:var(--fs-xs); color:var(--ink-3); }
.lg-legal { margin:8px 0 0; text-align:center; font-size:11px; color:var(--ink-3); opacity:.8; }
.lg-stack-mobile { display:none; justify-content:center; }
.lg-stack-mobile span { font-size:12px; font-weight:600; color:var(--ink-3); padding:5px 10px; border:1px solid var(--line); border-radius:999px; }
@media (max-width:860px) {
  .lg-wrap { grid-template-columns:1fr; } .lg-side { display:none; }
  .lg-card-brand { display:flex; } .lg-stack-mobile { display:flex; }
  .lg-main { min-height:100vh; background:radial-gradient(600px 300px at 50% -40px, #FDE8F2, transparent), var(--canvas); }
}

/* ---- Product Studio · Prototype (Sep 2026) ---- */
.proto-steps { display:flex; gap:8px; margin:0 0 12px; }
.proto-steps span { font-size:var(--fs-xs); font-weight:600; padding:6px 12px; border-radius:999px; border:1px solid var(--line); color:var(--ink-3); background:var(--surface); }
.proto-steps span.on { border-color:var(--pink); color:var(--pink-ink); background:var(--pink-soft); }
.proto-steps span.done { color:#1A9E5C; border-color:#BFE8D0; background:#E6F7EE; }
.proto-refs { grid-template-columns:repeat(4, 1fr); margin-bottom:14px; }
.proto-refs .upload-zone { min-height:104px; }
@media (max-width:900px) { .proto-refs { grid-template-columns:repeat(2, 1fr); } }
.proto-dims { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.proto-dims .field-input { width:72px; text-align:center; }
.proto-dims .field-select { width:auto; }
.proto-dims span { color:var(--ink-3); }
.proto-sheet-row { display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); margin-bottom:14px; }
.proto-sheet-row img { width:64px; height:64px; border-radius:10px; object-fit:cover; background:var(--surface-2); border:1px solid var(--line); flex-shrink:0; }
.proto-sheet-row > div { flex:1; min-width:0; font-size:var(--fs-sm); }

/* ---- References used (image viewers) ---- */
.proj-refs { display:flex; gap:10px; flex-wrap:wrap; }
.proj-ref { display:flex; flex-direction:column; gap:4px; width:84px; text-decoration:none; color:inherit; }
.proj-ref img { width:84px; height:84px; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:var(--surface-2); }
.proj-ref span { font-size:11px; color:var(--ink-3); text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.proj-ref:hover img { border-color:var(--pink); }
/* Composer popovers must sit above the example chips / cards below (the glass composer is its own stacking context). */
.hv4-hero .hv4-composer { z-index:5; }
.hv4-hero .hv4-composer:focus-within, .hv4-hero .hv4-composer:has(.hv4-pop.open) { z-index:20; }
.hv4-pop { z-index:60; background:var(--surface); }

/* ================= Home v4.2 — hero head, pro tip, big composer, prompt cards ================= */
.hv4-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px, 400px); gap:24px; align-items:start; }
.hv4-head .hv4-greet { gap:6px; }
.hv4-hero .hv4-greet h1 { font-size:clamp(34px, 4.2vw, 52px); font-weight:600; letter-spacing:-.04em; line-height:1.05; }
.hv4-name { background:linear-gradient(90deg, #E8127A 0%, #B44BFF 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hv4-hero .hv4-greet p { font-size:18px; color:var(--ink); }
.hv4-hero .hv4-greet p strong { font-weight:600; }
.hv4-hero .hv4-greet p.hv4-help { font-size:15px; color:var(--ink-3); margin-top:-2px; }
.hv4-tip { display:flex; align-items:center; gap:14px; text-align:left; padding:14px 16px; border-radius:18px; border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.62); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 10px 30px rgba(80,50,120,.08); cursor:pointer; font:inherit; color:inherit; margin-top:6px; }
.hv4-tip:hover { border-color:var(--pink); }
.hv4-tip-icon { width:44px; height:44px; border-radius:50%; background:#FDE8F2; color:var(--pink); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.hv4-tip-text { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1; }
.hv4-tip-text strong { font-size:14px; font-weight:600; color:var(--pink-ink); }
.hv4-tip-text span { font-size:12.5px; color:var(--ink-2); line-height:1.45; transition:opacity .15s; }
.hv4-tip-go { color:var(--ink-3); font-size:20px; }
.hv4-usage { display:flex; align-items:center; gap:22px; margin-top:6px; }
.hv4-usage-item { display:flex; align-items:center; gap:9px; text-decoration:none; color:inherit; }
.hv4-usage-ic { width:32px; height:32px; border-radius:50%; background:#FDE8F2; color:var(--pink); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.hv4-usage-text { display:flex; align-items:baseline; gap:4px; white-space:nowrap; }
.hv4-usage-text strong { font-size:14px; font-weight:600; color:var(--ink); }
.hv4-usage-text small { font-size:12px; color:var(--ink-3); font-weight:500; }
@media (max-width:900px) { .hv4-head { grid-template-columns:1fr; } }

.hv4-hero .hv4-composer { padding:20px 22px 18px; border-radius:24px; gap:10px; }
.hv4-input-row { display:flex; align-items:flex-start; gap:12px; }
.hv4-hero .hv4-input { font-size:19px; line-height:1.5; min-height:58px; padding:6px 2px; flex:1; }
.hv4-input-tools { display:flex; align-items:center; gap:8px; flex-shrink:0; padding-top:4px; }
.hv4-input-tools i { width:1px; height:24px; background:var(--line); }
.hv4-itool { width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:all .12s; }
.hv4-itool:hover { color:var(--pink); border-color:var(--pink); background:var(--pink-soft); }
.hv4-itool.active { color:var(--pink); background:var(--pink-soft); border-color:var(--pink); }
.hv4-hero .hv4-bar { border-top:none; padding-top:6px; gap:8px; }
.hv4-hero .hv4-tool-pill { height:44px; padding:0 14px; border-radius:12px; font-size:14px; gap:8px; background:var(--surface); border-color:var(--line); }
.hv4-hero .hv4-tool-pill:hover { border-color:var(--line-strong); box-shadow:var(--shadow-1); }
.hv4-hero .hv4-tool .c { font-size:11px; margin-left:2px; }
.hv4-vsep { width:1px; height:26px; background:var(--line); margin:0 4px; }
.hv4-brand .v.on { background:#E6F7EE; color:#1A9E5C; padding:3px 9px; border-radius:999px; font-size:12.5px; }
.hv4-brand.is-off .v { background:var(--surface-2); color:var(--ink-3); padding:3px 9px; border-radius:999px; font-size:12.5px; }
.hv4-hero .hv4-send { width:auto; height:48px; padding:0 22px 0 18px; border-radius:14px; gap:10px; font:inherit; font-size:16px; font-weight:600; color:#fff; background:linear-gradient(90deg, #E8127A 0%, #B44BFF 100%); box-shadow:0 12px 28px rgba(200,40,180,.32); }
.hv4-hero .hv4-send:hover { transform:translateY(-1px); filter:brightness(1.05); }
.hv4-hero .hv4-send:disabled { background:var(--line-strong); color:#fff; box-shadow:none; filter:none; transform:none; }
#cpAdd2 { }

.hv4-examples-row { display:flex; align-items:center; gap:14px; margin-top:-6px; }
.hv4-examples-label { font-size:14px; color:var(--ink-3); white-space:nowrap; flex-shrink:0; }
.hv4-hero .hv4-examples { flex:1; display:flex; flex-wrap:nowrap; gap:10px; overflow-x:auto; scrollbar-width:none; margin:0; padding:2px; justify-content:flex-start; }
.hv4-hero .hv4-examples::-webkit-scrollbar { display:none; }
.hv4-hero .hv4-examples button { display:flex; align-items:center; gap:12px; flex:0 0 auto; min-width:230px; max-width:300px; padding:8px 14px 8px 8px; border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.7); backdrop-filter:blur(8px); color:var(--ink-2); font-size:13.5px; line-height:1.35; text-align:left; white-space:normal; }
.hv4-examples button .hv4-ex-icon { width:44px; height:44px; border-radius:11px; background:var(--surface-2); color:var(--ink-2); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.hv4-examples button:hover .hv4-ex-icon { background:var(--pink-soft); color:var(--pink); }
.hv4-examples-more { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:20px; cursor:pointer; flex-shrink:0; }
.hv4-examples-more:hover { border-color:var(--pink); color:var(--pink); }
/* aura stays on the theme's own colours: pink → violet, with a soft sky edge */
.hv4-aura i:nth-child(1) { background:radial-gradient(circle, #FFC1DD 0%, rgba(255,193,221,0) 70%); }
.hv4-aura i:nth-child(2) { background:radial-gradient(circle, #E3D2FF 0%, rgba(227,210,255,0) 70%); }
.hv4-aura i:nth-child(3) { background:radial-gradient(circle, #FFD6E8 0%, rgba(255,214,232,0) 70%); opacity:.7; }
@media (max-width:640px) { .hv4-examples-label, .hv4-examples-more { display:none; } .hv4-hero .hv4-send span { display:none; } .hv4-hero .hv4-send { padding:0 14px; } }
.hv4-hero .hv4-chips:not(:has(.hv4-chip-att)) { display:none; }
.hv4-hero .hv4-greet h1 { font-size:clamp(32px, 3.6vw, 46px); white-space:nowrap; }
@media (min-width:901px) { .hv4-head { grid-template-columns:minmax(0,1fr) minmax(260px, 360px); } }
@media (max-width:900px) { .hv4-hero .hv4-greet h1 { white-space:normal; } }

/* -----------------------------------------------------------------
   Help chatbot widget (Sep 2026) — floating FAB + slide-up panel.
   ----------------------------------------------------------------- */
.fm-chat { position:fixed; right:24px; bottom:24px; z-index:900; }
.fm-chat-fab {
  width:56px; height:56px; border-radius:50%; border:none; cursor:pointer;
  background:var(--pink); color:#fff; box-shadow:var(--shadow-2);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, background .15s ease;
}
.fm-chat-fab:hover { background:var(--pink-hover); transform:translateY(-1px); }
.fm-chat-fab-ic { width:24px; height:24px; }
.fm-chat-fab-close { width:20px; height:20px; display:none; }
.fm-chat.is-open .fm-chat-fab-ic { display:none; }
.fm-chat.is-open .fm-chat-fab-close { display:block; }

.fm-chat-panel {
  position:absolute; right:0; bottom:72px; width:360px; max-width:calc(100vw - 32px);
  height:480px; max-height:calc(100vh - 140px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-3); display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
.fm-chat.is-open .fm-chat-panel { opacity:1; transform:none; pointer-events:auto; }

.fm-chat-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line); flex:none;
}
.fm-chat-head-title { display:flex; align-items:center; gap:8px; font-weight:600; font-size:var(--fs-md); color:var(--ink); }
.fm-chat-head-dot { width:8px; height:8px; border-radius:50%; background:var(--success); flex:none; }
.fm-chat-head-close { width:28px; height:28px; border:none; background:transparent; color:var(--ink-3); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:var(--r-sm); }
.fm-chat-head-close:hover { background:var(--surface-2); color:var(--ink); }
.fm-chat-head-close svg { width:16px; height:16px; }

.fm-chat-body { flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; background:var(--canvas); }
.fm-chat-msg { max-width:86%; padding:9px 12px; border-radius:var(--r-md); font-size:var(--fs-sm); line-height:1.45; white-space:pre-wrap; word-wrap:break-word; }
.fm-chat-msg.is-bot { align-self:flex-start; background:var(--surface); border:1px solid var(--line); color:var(--ink); border-bottom-left-radius:2px; }
.fm-chat-msg.is-user { align-self:flex-end; background:var(--pink); color:#fff; border-bottom-right-radius:2px; }

.fm-chat-msg.is-typing { display:flex; gap:4px; align-items:center; padding:12px; }
.fm-chat-msg.is-typing span { width:6px; height:6px; border-radius:50%; background:var(--ink-4); animation:fmChatTyping 1.1s infinite ease-in-out; }
.fm-chat-msg.is-typing span:nth-child(2) { animation-delay:.15s; }
.fm-chat-msg.is-typing span:nth-child(3) { animation-delay:.3s; }
@keyframes fmChatTyping { 0%, 60%, 100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-3px); opacity:1; } }

.fm-chat-inputrow { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); flex:none; background:var(--surface); }
.fm-chat-input { flex:1; border:1px solid var(--line); border-radius:var(--r-pill); padding:9px 14px; font-size:var(--fs-sm); font-family:var(--font); color:var(--ink); background:var(--surface-2); outline:none; }
.fm-chat-input:focus { border-color:var(--pink); background:var(--surface); }
.fm-chat-send { width:36px; height:36px; border-radius:50%; border:none; background:var(--pink); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; }
.fm-chat-send:hover { background:var(--pink-hover); }
.fm-chat-send svg { width:16px; height:16px; }

@media (max-width:480px) {
  .fm-chat { right:16px; bottom:16px; }
  .fm-chat-panel { width:calc(100vw - 32px); height:calc(100vh - 120px); bottom:68px; }
}