/* ════════════════════════════════════════════════════════════
   Wisherly UI — the one look for admin, the customer dashboard and the Wedding Tracker.
   White by default, dark on switch (components/ui/theme.js sets html[data-theme]).
   Sidebar v2: a floating card that collapses to an icon rail; the current page glows.
   ════════════════════════════════════════════════════════════ */
:root {
  --w-bg: #FFFFFF;
  --w-surface: #FFFFFF;
  --w-surface-2: #F8F8FA;
  --w-surface-3: #F2F2F5;
  --w-line: #ECECF1;
  --w-line-2: #F2F2F6;
  --w-line-3: #DCDCE3;
  --w-ink: #111116;
  --w-ink-2: #3A3A44;
  --w-muted: #6B6B78;
  --w-faint: #9D9DA9;
  --w-brand: #D4225F;
  --w-brand-2: #B0105A;
  --w-brand-ink: #FFFFFF;
  --w-brand-soft: #FDEBF2;
  --w-brand-softer: #FFF6FA;
  --w-glow: rgba(212, 34, 95, .55);
  --w-ok: #13804F; --w-ok-bg: #E7F6EE;
  --w-warn: #9A6200; --w-warn-bg: #FFF4D9;
  --w-danger: #C0261A; --w-danger-bg: #FDECEA;
  --w-info: #2459B5; --w-info-bg: #EBF1FC;
  --w-side-bg: #FFFFFF;
  --w-side-line: #ECECF1;
  --w-side-shadow: 0 1px 2px rgba(17,17,22,.04), 0 10px 30px -12px rgba(17,17,22,.14);
  --w-field: #F4F4F7;
  --w-shadow: 0 1px 2px rgba(17,17,22,.04);
  --w-shadow-pop: 0 2px 6px rgba(17,17,22,.05), 0 18px 44px -12px rgba(17,17,22,.22);
  --w-r: 7px; --w-r-card: 14px; --w-r-side: 18px;
  --w-side-w: 252px; --w-side-w-c: 72px; --w-gap: 12px;
  --w-font: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
html[data-theme="dark"] {
  --w-bg: #0C0C0F;
  --w-surface: #141418;
  --w-surface-2: #18181D;
  --w-surface-3: #1F1F25;
  --w-line: #26262E;
  --w-line-2: #1E1E25;
  --w-line-3: #34343E;
  --w-ink: #F3F3F6;
  --w-ink-2: #C9C9D2;
  --w-muted: #9494A2;
  --w-faint: #6C6C79;
  --w-brand: #F0457F;
  --w-brand-2: #FF5C92;
  --w-brand-soft: rgba(240, 69, 127, .16);
  --w-brand-softer: rgba(240, 69, 127, .08);
  --w-glow: rgba(240, 69, 127, .7);
  --w-ok: #4CCB8C; --w-ok-bg: rgba(76,203,140,.13);
  --w-warn: #F2B544; --w-warn-bg: rgba(242,181,68,.13);
  --w-danger: #FF6B5E; --w-danger-bg: rgba(255,107,94,.13);
  --w-info: #6EA2FF; --w-info-bg: rgba(110,162,255,.13);
  --w-side-bg: #131317;
  --w-side-line: #25252C;
  --w-side-shadow: 0 0 0 1px rgba(255,255,255,.02), 0 20px 40px -16px rgba(0,0,0,.7);
  --w-field: #1C1C22;
  --w-shadow: 0 1px 2px rgba(0,0,0,.3);
  --w-shadow-pop: 0 0 0 1px rgba(255,255,255,.04), 0 24px 48px -12px rgba(0,0,0,.75);
  color-scheme: dark;
}

/* sizes include padding and borders everywhere these components appear */
.sb, .sb *, .sb *::before, .sb *::after, .w-app, .w-app *, .w-app *::before, .w-app *::after, .w-overlay, .w-overlay * { box-sizing: border-box; }

/* ── Sidebar v2 ───────────────────────────────────────────── */
.sb { position: sticky; top: 0; height: 100vh; height: 100dvh; align-self: flex-start; padding: var(--w-gap); z-index: 30; width: calc(var(--w-side-w) + var(--w-gap) * 2); transition: width .26s cubic-bezier(.3,.7,.2,1); flex: none; }
.sb-card { position: relative; height: 100%; min-height: 0; max-height: 100%; overflow: visible; display: flex; flex-direction: column; background: var(--w-side-bg); border: 1px solid var(--w-side-line); border-radius: var(--w-r-side); box-shadow: var(--w-side-shadow); padding: 18px 12px 12px; min-width: 0; }
.sb-toggle { position: absolute; top: 22px; right: -12px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--w-side-line); background: var(--w-side-bg); color: var(--w-muted); display: grid; place-items: center; cursor: pointer; z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,.08); padding: 0; transition: color .15s, border-color .15s, transform .26s; }
.sb-toggle:hover { color: var(--w-brand); border-color: var(--w-brand); }
.sb-toggle svg { width: 13px; height: 13px; transition: transform .26s; }
.sb-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px; margin-bottom: 18px; text-decoration: none; color: var(--w-ink); min-width: 0; height: 36px; }
.sb-brand img { width: 38px; height: 38px; flex: none; object-fit: contain; }
.sb-brand-name { display: none; }
.sb-brand-name { font-weight: 800; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.sb-brand-tag { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--w-muted); border: 1px solid var(--w-line); border-radius: 5px; padding: 1px 5px; white-space: nowrap; }
.sb-search { position: relative; display: flex; align-items: center; margin: 0 2px 16px; }
.sb-search svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--w-faint); pointer-events: none; }
.sb-search input { font: inherit; font-size: 13.5px; width: 100%; height: 40px; border: 1px solid transparent; border-radius: 10px; background: var(--w-field); color: var(--w-ink); padding: 0 12px 0 38px; outline: none; -webkit-appearance: none; appearance: none; }
.sb-search input::placeholder { color: var(--w-faint); }
.sb-search input:focus { border-color: var(--w-line-3); background: var(--w-surface); }
.sb-search-btn { display: none; }
.sb-label { font-size: 11.5px; font-weight: 600; color: var(--w-faint); padding: 0 12px; margin: 6px 0 8px; white-space: nowrap; letter-spacing: .01em; }
.sb-nav { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0 0 8px; scrollbar-width: none; }
.sb-nav::-webkit-scrollbar { display: none; }
.sb-item { position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px; border-radius: 11px; color: var(--w-ink-2); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; min-width: 0; cursor: pointer; border: 0; background: none; font-family: inherit; text-align: left; width: 100%; transition: background .15s, color .15s; }
.sb-item svg, .sb-item .ico { width: 20px; height: 20px; flex: none; color: var(--w-muted); transition: color .15s; }
.sb-item .ico svg { width: 20px; height: 20px; }
.sb-item .sb-text, .sb-item .nav-text { overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
.sb-item:hover { background: var(--w-surface-3); color: var(--w-ink); }
.sb-item:hover svg, .sb-item:hover .ico { color: var(--w-ink); }
.sb-item.active { color: var(--w-ink); font-weight: 700; background: var(--w-surface-3); }
.sb-item.active svg, .sb-item.active .ico { color: var(--w-brand); }
.sb-badge { flex: none; margin-left: auto; padding: 0 2px; color: var(--w-brand); font-size: 13px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; background: none; }
.sb-badge.soft { color: var(--w-muted); font-weight: 600; }
.sb-sep { height: 1px; background: var(--w-side-line); margin: 10px 4px; flex: none; }
.sb-foot { display: flex; flex-direction: column; gap: 3px; flex: none; }
.sb-cta { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 10px; border-radius: 11px; color: var(--w-ink); font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer; border: 0; background: none; font-family: inherit; width: 100%; text-align: left; white-space: nowrap; }
.sb-cta:hover { background: var(--w-surface-3); }
.sb-cta-ico { width: 28px; height: 28px; border-radius: 50%; background: var(--w-ink); color: var(--w-bg); display: grid; place-items: center; flex: none; font-size: 10px; font-weight: 800; overflow: hidden; }
.sb-cta-ico img { width: 100%; height: 100%; object-fit: cover; }
.sb-cta-ico svg { width: 14px; height: 14px; }
.sb-cta .sb-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.sb-cta .sb-sub { display: block; font-size: 11.5px; font-weight: 500; color: var(--w-muted); overflow: hidden; text-overflow: ellipsis; }
.sb-cta > svg:last-child { width: 16px; height: 16px; color: var(--w-muted); flex: none; }
.sb-switch { margin-left: auto; width: 32px; height: 18px; border-radius: 10px; background: var(--w-line-3); position: relative; flex: none; transition: background .2s; }
.sb-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
html[data-theme="dark"] .sb-switch { background: var(--w-brand); }
html[data-theme="dark"] .sb-switch::after { transform: translateX(14px); }

/* collapsed: the icon rail */
body.sb-collapsed .sb { width: calc(var(--w-side-w-c) + var(--w-gap) * 2); }
body.sb-collapsed .sb-toggle svg { transform: rotate(180deg); }
body.sb-collapsed .sb-card { padding: 18px 10px 12px; align-items: stretch; }
body.sb-collapsed .sb-brand { justify-content: center; padding: 0; }
body.sb-collapsed .sb-brand-name, body.sb-collapsed .sb-brand-tag,
body.sb-collapsed .sb-text, body.sb-collapsed .nav-text, body.sb-collapsed .sb-cta .sb-sub,
body.sb-collapsed .sb-cta > svg:last-child, body.sb-collapsed .sb-switch, body.sb-collapsed .sb-hide-c { display: none; }
body.sb-collapsed .sb-search input { display: none; }
body.sb-collapsed .sb-search { justify-content: center; margin: 0 0 16px; }
body.sb-collapsed .sb-search svg { position: static; }
body.sb-collapsed .sb-search .sb-search-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--w-field); border: 0; color: var(--w-muted); cursor: pointer; }
body.sb-collapsed .sb-search > svg { display: none; }
body.sb-collapsed .sb-label { text-align: center; padding: 0; font-size: 10.5px; }
body.sb-collapsed .sb-item, body.sb-collapsed .sb-cta { justify-content: center; padding: 0; }
body.sb-collapsed .sb-item.active { background: var(--w-surface-3); }
body.sb-collapsed .sb-item .sb-badge { position: absolute; top: 5px; right: 6px; font-size: 10.5px; margin: 0; }
body.sb-collapsed .sb-item[data-tip]:hover::after { content: attr(data-tip); left: calc(100% + 14px); top: 50%; transform: translateY(-50%); width: auto; height: auto; background: var(--w-ink); color: var(--w-bg); font-size: 12px; font-weight: 600; padding: 5px 9px; border-radius: 6px; white-space: nowrap; opacity: 1; z-index: 50; }


/* phones: the sidebar is a drawer */
.sb-scrim { display: none; }
.sb-menu-btn { display: none; }
@media (max-width: 900px) {
  .sb { position: fixed; left: 0; top: 0; bottom: 0; transform: translateX(-105%); transition: transform .26s cubic-bezier(.3,.7,.2,1); width: calc(var(--w-side-w) + var(--w-gap) * 2) !important; }
  body.sb-open .sb { transform: none; }
  body.sb-open .sb-scrim { display: block; position: fixed; inset: 0; background: rgba(10,10,14,.38); z-index: 29; }
  .sb-toggle { display: none; }
  .sb-menu-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--w-line); background: var(--w-surface); color: var(--w-ink); cursor: pointer; flex: none; padding: 0; }
  .sb-menu-btn svg { width: 18px; height: 18px; }
  body.sb-collapsed .sb-brand-name, body.sb-collapsed .sb-brand-tag, body.sb-collapsed .sb-text, body.sb-collapsed .nav-text, body.sb-collapsed .sb-switch, body.sb-collapsed .sb-cta .sb-sub { display: initial; }
  body.sb-collapsed .sb-search input { display: block; }
}
@media (prefers-reduced-motion: reduce) { .sb, .sb-toggle svg, .sb-item { transition: none; } }

/* ── App frame (dashboard / tracker) ──────────────────────── */
.w-app { display: flex; min-height: 100vh; background: var(--w-bg); color: var(--w-ink); font-family: var(--w-font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.w-main { flex: 1 1 auto; min-width: 0; padding: 18px 28px 64px 16px; }
.w-top { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-bottom: 18px; }
.w-top h1 { font-size: 24px; font-weight: 800; letter-spacing: -.025em; margin: 0; line-height: 1.2; }
.w-top .w-sub { color: var(--w-muted); font-size: 13.5px; margin: 2px 0 0; }
.w-top-r { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.w-view { max-width: 1240px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .w-main { padding: 12px 14px 80px; } .w-top h1 { font-size: 21px; } }

/* cards */
.w-card { background: var(--w-surface); border: 1px solid var(--w-line); border-radius: var(--w-r-card); padding: 18px; box-shadow: var(--w-shadow); min-width: 0; }
.w-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.w-card-h h2, .w-card-h h3 { font-size: 15px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.w-card-h .w-top-r { margin-left: auto; }
.w-grid { display: grid; gap: 14px; }
.w-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.w-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .w-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .w-grid-2, .w-grid-3 { grid-template-columns: minmax(0, 1fr); } .w-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

.w-kpi { background: var(--w-surface); border: 1px solid var(--w-line); border-radius: var(--w-r-card); padding: 14px 16px; min-width: 0; }
.w-kpi small { display: block; color: var(--w-muted); font-size: 12.5px; font-weight: 600; }
.w-kpi b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.w-kpi span { display: block; color: var(--w-muted); font-size: 12px; margin-top: 2px; }
.w-bar { height: 6px; border-radius: 4px; background: var(--w-surface-3); overflow: hidden; margin-top: 10px; }
.w-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--w-brand); }

/* buttons */
.w-btn { font: inherit; font-size: 13.5px; font-weight: 650; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--w-r); border: 1px solid var(--w-line); background: var(--w-surface); color: var(--w-ink); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.w-btn svg { width: 16px; height: 16px; flex: none; }
.w-btn:hover { background: var(--w-surface-3); }
.w-btn.pri { background: var(--w-brand); border-color: var(--w-brand); color: #fff; }
.w-btn.pri:hover { background: var(--w-brand-2); border-color: var(--w-brand-2); }
.w-btn.ghost { border-color: transparent; background: none; }
.w-btn.ghost:hover { background: var(--w-surface-3); }
.w-btn.danger { color: var(--w-danger); }
.w-btn.sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.w-btn.icon { width: 36px; padding: 0; }
.w-btn.sm.icon { width: 30px; }
.w-btn:disabled { opacity: .5; cursor: not-allowed; }
.w-btn:focus-visible { outline: 2px solid var(--w-ink-2); outline-offset: 2px; }
.w-in:focus-visible { outline: none; }

/* fields */
.w-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.w-field > span, .w-field > label { font-size: 12.5px; font-weight: 600; color: var(--w-ink-2); }
.w-field > small { color: var(--w-muted); font-size: 12px; }
.w-in { font: inherit; font-size: 14px; height: 38px; padding: 0 11px; border-radius: var(--w-r); border: 1px solid var(--w-line); background: var(--w-surface); color: var(--w-ink); width: 100%; min-width: 0; -webkit-appearance: none; appearance: none; }
textarea.w-in { height: auto; min-height: 76px; padding: 9px 11px; resize: vertical; line-height: 1.45; }
select.w-in { padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239D9DA9' stroke-width='2.4'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
.w-in:focus { outline: none; border-color: var(--w-ink-2); box-shadow: none; }
.w-in::placeholder { color: var(--w-faint); }
.w-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.w-check input { width: 16px; height: 16px; accent-color: var(--w-brand); margin: 0; }
.w-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.w-form .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .w-form { grid-template-columns: minmax(0, 1fr); } }

/* toolbar, tabs, chips */
.w-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.w-tools .w-in { width: auto; }
.w-tools .w-search { flex: 1 1 220px; max-width: 340px; padding-left: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%239D9DA9' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 11px center; }
.w-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--w-line); overflow-x: auto; scrollbar-width: none; }
.w-tabs button { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--w-muted); background: none; border: 0; padding: 9px 12px; cursor: pointer; position: relative; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.w-tabs button:hover { color: var(--w-ink); }
.w-tabs button.on { color: var(--w-ink); }
.w-tabs button.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--w-ink); }
.w-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.w-chip { font: inherit; font-size: 12.5px; font-weight: 600; height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--w-line); background: var(--w-surface); color: var(--w-ink-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.w-chip:hover { border-color: var(--w-line-3); }
.w-chip.on { background: var(--w-brand-soft); border-color: transparent; color: var(--w-brand); }
.w-chip i { font-style: normal; color: var(--w-muted); font-weight: 600; }
.w-chip.on i { color: inherit; opacity: .8; }

/* badges */
.w-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; background: var(--w-surface-3); color: var(--w-ink-2); white-space: nowrap; }
.w-badge.ok { background: var(--w-ok-bg); color: var(--w-ok); }
.w-badge.warn { background: var(--w-warn-bg); color: var(--w-warn); }
.w-badge.danger { background: var(--w-danger-bg); color: var(--w-danger); }
.w-badge.info { background: var(--w-info-bg); color: var(--w-info); }
.w-badge.brand { background: var(--w-brand-soft); color: var(--w-brand); }
.w-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }

/* tables / lists */
.w-table-wrap { overflow-x: auto; border: 1px solid var(--w-line); border-radius: var(--w-r-card); background: var(--w-surface); }
.w-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.w-table th { text-align: left; font-size: 12px; font-weight: 650; color: var(--w-muted); padding: 10px 12px; border-bottom: 1px solid var(--w-line); white-space: nowrap; background: var(--w-surface-2); position: sticky; top: 0; z-index: 1; }
.w-table td { padding: 10px 12px; border-bottom: 1px solid var(--w-line-2); vertical-align: middle; }
.w-table tr:last-child td { border-bottom: 0; }
.w-table tbody tr:hover td { background: var(--w-surface-2); }
.w-table tr.click { cursor: pointer; }
.w-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.w-table .muted, .w-muted { color: var(--w-muted); }
.w-table input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--w-brand); }
.w-list { display: flex; flex-direction: column; }
.w-row { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--w-line-2); min-width: 0; }
.w-row:last-child { border-bottom: 0; }
.w-row-main { flex: 1 1 auto; min-width: 0; }
.w-row-main b { display: block; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-row-main small { display: block; color: var(--w-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--w-surface-3); color: var(--w-ink-2); display: grid; place-items: center; font-weight: 700; font-size: 12.5px; flex: none; }

/* empty / loading */
.w-empty { text-align: center; padding: 40px 20px; color: var(--w-muted); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.w-empty b { color: var(--w-ink); font-size: 15.5px; }
.w-empty p { margin: 0 0 6px; max-width: 420px; }
.w-empty-ico { color: var(--w-brand); display: grid; place-items: center; margin-bottom: 4px; }
.w-empty-ico svg, .w-empty-ico .ico svg { width: 40px; height: 40px; stroke-width: 1.5; }
.w-skel { border-radius: 8px; background: linear-gradient(90deg, var(--w-surface-3), var(--w-surface-2), var(--w-surface-3)); background-size: 200% 100%; animation: w-skel 1.2s infinite linear; }
@keyframes w-skel { to { background-position: -200% 0; } }

/* modal + sheet */
.w-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(10,10,14,.42); display: grid; place-items: center; padding: 16px; animation: w-fade .15s; }
.w-modal { background: var(--w-surface); border: 1px solid var(--w-line); border-radius: 16px; box-shadow: var(--w-shadow-pop); width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; animation: w-pop .18s cubic-bezier(.3,.7,.2,1); }
.w-modal.wide { width: min(820px, 100%); }
.w-modal-h { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--w-line); }
.w-modal-h h2 { font-size: 16px; font-weight: 750; margin: 0; }
.w-modal-h .w-btn { margin-left: auto; }
.w-modal-b { padding: 18px; overflow-y: auto; }
.w-modal-f { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--w-line); flex-wrap: wrap; }
@media (max-width: 600px) { .w-overlay { place-items: end center; padding: 0; } .w-modal { border-radius: 18px 18px 0 0; max-height: 92vh; width: 100%; } }
@keyframes w-fade { from { opacity: 0; } }
@keyframes w-pop { from { opacity: 0; transform: translateY(8px) scale(.985); } }

/* toast */
.w-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.w-toast { background: var(--w-ink); color: var(--w-bg); font-size: 13.5px; font-weight: 600; padding: 10px 14px; border-radius: 10px; box-shadow: var(--w-shadow-pop); max-width: 360px; animation: w-pop .18s; }
.w-toast.err { background: var(--w-danger); color: #fff; }
@media (max-width: 600px) { .w-toasts { left: 12px; right: 12px; bottom: 12px; } }

/* progress ring */
.w-ring { --p: 0; width: 56px; height: 56px; border-radius: 50%; background: conic-gradient(var(--w-brand) calc(var(--p) * 1%), var(--w-surface-3) 0); display: grid; place-items: center; flex: none; }
.w-ring > span { width: 44px; height: 44px; border-radius: 50%; background: var(--w-surface); display: grid; place-items: center; font-size: 12.5px; font-weight: 800; }