/* ==========================================================================
 * WeebV Design System — dark, minimal, monochrome. Imported from the
 * claude.ai/design project "WeebV design system inquiry" (Linktree-WeebV.dc.html).
 * Loaded ONLY on the dashboard editor/analytics screens for now.
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&display=swap');

:root{
  --black:#000000;
  --near-black:#0a0a0a;
  --surface-1:#0d0d0d;
  --surface-2:#141414;
  --surface-3:#1f1f1f;
  --white:#ffffff;
  --grey-100:#f5f5f5;
  --grey-300:#c9c9c9;
  --grey-400:#9a9a9a;
  --grey-500:#8a8a8a;
  --grey-600:#5c5c5c;
  --grey-700:#3a3a3a;
  --grey-800:#2a2a2a;
  --grey-900:#1a1a1a;
  --success:#3ecf6e;
  --warning:#e8b93a;
  --danger:#e2483a;

  --surface-page:var(--black);
  --surface-elevated:var(--surface-1);
  --surface-card:var(--surface-2);
  --surface-inverse:var(--white);
  --surface-overlay:rgba(0,0,0,.72);

  --text-primary:var(--white);
  --text-secondary:var(--grey-500);
  --text-disabled:var(--grey-700);
  --text-on-inverse:var(--black);
  --text-link:var(--white);

  --border-subtle:var(--grey-800);
  --border-strong:var(--grey-500);

  --font-body:'Cairo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --text-display:56px; --text-h1:40px; --text-h2:28px; --text-h3:22px;
  --text-body-lg:18px; --text-body:16px; --text-small:14px; --text-caption:12px;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-black:800;
  --leading-tight:1.2; --leading-heading:1.35; --leading-body:1.6;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px;
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-xl:28px; --radius-pill:999px;
  --shadow-elevated:0 12px 32px rgba(0,0,0,.5);
  --ease-standard:cubic-bezier(.4,0,.2,1); --duration-fast:120ms; --duration-base:200ms;
}

/* --- Scope: only inside .ds-root (dashboard editor/analytics) ------------- */
.ds-root{background:var(--surface-page);color:var(--text-primary);font-family:var(--font-body);min-height:100vh}
.ds-root *{box-sizing:border-box}
.ds-root a{color:var(--text-link);text-decoration:none}
.ds-root a:hover{color:var(--grey-300);text-decoration:underline}
.ds-root input,.ds-root textarea,.ds-root select{font-family:var(--font-body)}
.ds-root ::placeholder{color:var(--grey-600)}

/* --- Header ---------------------------------------------------------------- */
.ds-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:24px;padding:16px 32px;background:rgba(0,0,0,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-subtle)}
.ds-header img.ds-logo{height:20px;width:auto}
.ds-header-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ds-url-chip{font-size:var(--text-small);color:var(--text-secondary);direction:ltr}

/* --- Pill tabs -------------------------------------------------------------- */
.ds-pilltabs{display:flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);padding:4px}
.ds-pilltabs button{border:none;cursor:pointer;font-family:var(--font-body);font-weight:var(--weight-semibold);
  font-size:var(--text-small);padding:9px 22px;border-radius:var(--radius-pill);background:transparent;color:var(--text-secondary)}
.ds-pilltabs button.active{background:var(--surface-inverse);color:var(--text-on-inverse)}

/* --- Button ------------------------------------------------------------------ */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-body);
  font-weight:var(--weight-semibold);border-radius:var(--radius-pill);cursor:pointer;border:1px solid transparent;
  transition:opacity var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard);
  font-size:var(--text-body);padding:14px 28px}
.ds-btn:active{transform:scale(.97)}
.ds-btn:disabled{opacity:.4;cursor:not-allowed}
.ds-btn-sm{font-size:var(--text-small);padding:10px 20px}
.ds-btn-primary{background:var(--surface-inverse);color:var(--text-on-inverse)}
.ds-btn-outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.ds-btn-ghost{background:transparent;color:var(--text-primary)}
.ds-btn-outline:hover,.ds-btn-ghost:hover,.ds-btn-primary:hover{opacity:.75;text-decoration:none}
.ds-btn-block{display:flex;width:100%}

/* --- IconButton --------------------------------------------------------------- */
.ds-iconbtn{width:36px;height:36px;border-radius:var(--radius-pill);display:inline-flex;align-items:center;justify-content:center;
  background:transparent;color:var(--text-primary);border:1px solid var(--border-strong);cursor:pointer;
  transition:opacity var(--duration-fast) var(--ease-standard);flex:none}
.ds-iconbtn:hover{opacity:.75}

/* --- Card ----------------------------------------------------------------------- */
.ds-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:28px;transition:border-color var(--duration-base) var(--ease-standard)}
.ds-card:hover{border-color:var(--border-strong)}
.ds-card h3{margin:0;font-size:var(--text-h3);font-weight:var(--weight-bold)}
.ds-card + .ds-card{margin-top:20px}

/* --- Badge ------------------------------------------------------------------------ */
.ds-badge{display:inline-flex;align-items:center;padding:5px 14px;border-radius:var(--radius-pill);
  font-size:var(--text-caption);font-weight:var(--weight-semibold)}
.ds-badge-neutral{background:var(--surface-3);color:var(--text-primary)}
.ds-badge-success{background:rgba(62,207,110,.15);color:var(--success)}
.ds-badge-danger{background:rgba(226,72,58,.15);color:var(--danger)}

/* --- Input / textarea / select ------------------------------------------------------ */
.ds-field{display:flex;flex-direction:column;gap:8px;width:100%}
.ds-field > span{font-size:var(--text-small);color:var(--text-secondary)}
.ds-input,.ds-root textarea.ds-input,.ds-root select.ds-input{
  width:100%;background:var(--surface-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  padding:13px 18px;color:var(--text-primary);font-size:var(--text-body);outline:none;
  transition:border-color var(--duration-fast) var(--ease-standard)}
.ds-input:focus{border-color:var(--border-strong)}
.ds-bare-input{all:unset;flex:1;color:var(--text-primary);font-size:var(--text-body);width:100%}

/* --- Switch ------------------------------------------------------------------------- */
.ds-switch{width:40px;height:24px;border-radius:var(--radius-pill);padding:3px;display:flex;cursor:pointer;flex:none;
  transition:background var(--duration-base) var(--ease-standard)}
.ds-switch.on{background:var(--surface-inverse);border:1px solid transparent;justify-content:flex-start}
.ds-switch.off{background:var(--surface-3);border:1px solid var(--border-subtle);justify-content:flex-end}
.ds-switch .knob{width:16px;height:16px;border-radius:50%;transition:background var(--duration-base) var(--ease-standard)}
.ds-switch.on .knob{background:var(--text-on-inverse)}
.ds-switch.off .knob{background:var(--white)}

/* --- Radio dot (button-style picker) -------------------------------------------------- */
.ds-radio-item{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.ds-radio-dot{width:22px;height:22px;border-radius:50%;border:1px solid var(--border-strong);display:flex;align-items:center;justify-content:center;flex:none}
.ds-radio-dot.checked{border-color:var(--surface-inverse)}
.ds-radio-dot i{width:11px;height:11px;border-radius:50%;background:var(--surface-inverse)}

/* --- Editor grid & link rows -------------------------------------------------------------- */
.ds-editor-grid{display:grid;grid-template-columns:1fr 380px;gap:32px;max-width:1180px;margin:0 auto;padding:32px}
@media(max-width:980px){.ds-editor-grid{grid-template-columns:1fr}}
.ds-linkrow{display:flex;align-items:center;gap:10px;padding:14px;background:var(--surface-elevated);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.ds-linkrow.inactive{opacity:.45}
.ds-reorder{display:flex;flex-direction:column;gap:2px;flex:none}
.ds-reorder button{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;font-size:12px;padding:2px}
.ds-linkrow .ds-lr-body{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.ds-linkrow .ds-lr-body input{background:transparent;border:none;outline:none;padding:0;color:var(--text-primary);width:100%}
.ds-linkrow .ds-lr-title{font-size:var(--text-body);font-weight:var(--weight-semibold)}
.ds-linkrow .ds-lr-url{font-size:var(--text-small);color:var(--text-secondary)}

/* --- iOS device preview frame ------------------------------------------------------------- */
.ds-preview-wrap{position:sticky;top:96px;display:flex;justify-content:center}
.ds-ios-frame{width:300px;background:#111;border-radius:44px;padding:12px;box-shadow:var(--shadow-elevated);border:1px solid #2a2a2a}
.ds-ios-notch{height:22px;display:flex;justify-content:center}
.ds-ios-notch i{width:110px;height:18px;background:#000;border-radius:0 0 14px 14px}
.ds-ios-screen{background:#000;border-radius:32px;overflow:hidden;height:610px;display:flex;flex-direction:column}
.ds-ios-scroll{flex:1;overflow-y:auto;padding:40px 22px 48px;display:flex;flex-direction:column;align-items:center;gap:14px}
.ds-preview-caption{font-size:var(--text-caption);color:var(--text-secondary);text-align:center;margin-top:10px}

/* --- Modal ------------------------------------------------------------------------------------ */
.ds-modal-bg{position:fixed;inset:0;background:var(--surface-overlay);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.ds-modal{width:460px;max-width:92vw;background:var(--surface-elevated);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow-elevated);max-height:88vh;overflow:auto}

/* --- Stat cards (analytics) ----------------------------------------------------------------------- */
.ds-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:760px){.ds-stat-grid{grid-template-columns:1fr}}
.ds-stat-label{font-size:var(--text-small);color:var(--text-secondary)}
.ds-stat-value{font-size:var(--text-h1);font-weight:var(--weight-bold)}
.ds-perf-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--border-subtle)}
.ds-perf-row:first-child{border-top:none}

.ds-alert{padding:12px 16px;border-radius:var(--radius-md);font-size:var(--text-small);margin-bottom:16px}
.ds-alert-success{background:rgba(62,207,110,.12);color:var(--success);border:1px solid rgba(62,207,110,.3)}
.ds-alert-error{background:rgba(226,72,58,.12);color:var(--danger);border:1px solid rgba(226,72,58,.3)}

/* --- App shell (sidebar + main + preview panel) — Dashboard.dc.html import ------------------- */
.ds-shell{display:flex;min-height:100vh}
.ds-sidebar{width:230px;flex:none;border-inline-start:1px solid var(--border-subtle);display:flex;flex-direction:column;
  padding:24px 16px;gap:28px;height:100vh;position:sticky;top:0;overflow-y:auto}
.ds-sidebar img.ds-logo{height:20px;width:auto;padding:0 8px}
.ds-navlist{display:flex;flex-direction:column;gap:4px}
.ds-navlist button{display:flex;align-items:center;gap:10px;text-align:start;border:none;cursor:pointer;width:100%;
  padding:11px 12px;border-radius:var(--radius-md);background:transparent;color:var(--text-secondary);
  font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-body)}
.ds-navlist button.active{background:var(--surface-elevated);color:var(--text-primary);font-weight:var(--weight-semibold)}
.ds-navlist button .dot{width:6px;height:6px;border-radius:50%;background:transparent;flex:none}
.ds-navlist button.active .dot{background:var(--text-primary)}
.ds-sidebar-profile{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px;background:var(--surface-elevated);
  border-radius:var(--radius-md);border:1px solid var(--border-subtle)}
.ds-sidebar-profile .avatar{width:36px;height:36px;border-radius:50%;background:var(--surface-3);display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:var(--weight-semibold);flex:none}
.ds-sidebar-profile .name{font-size:var(--text-small);font-weight:var(--weight-semibold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-sidebar-profile .plan{font-size:var(--text-caption);color:var(--text-secondary)}

.ds-shell-main{flex:1;min-width:0;display:flex;flex-direction:column}
.ds-shell-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 36px;background:rgba(0,0,0,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-subtle);overflow:hidden}
.ds-shell-body{padding:32px 36px 80px;display:flex;flex-direction:column;gap:20px;max-width:760px}

.ds-shell-preview{width:300px;flex:none;display:flex;align-items:flex-start;justify-content:center;padding:36px 20px;
  background:var(--surface-1);border-inline-end:1px solid var(--border-subtle);position:sticky;top:0;height:100vh}

@media(max-width:1100px){.ds-shell-preview{display:none}}
@media(max-width:820px){.ds-sidebar{position:fixed;inset-inline-start:0;top:0;z-index:40;transform:translateX(-110%);transition:.2s;background:var(--surface-page)}
  html[dir=rtl] .ds-sidebar{transform:translateX(110%)}
  .ds-sidebar.is-open{transform:translateX(0)}
  .ds-shell-burger{display:inline-flex !important}}
.ds-shell-burger{display:none}

/* --- Toggle switch row (audience email-collection card) --------------------------------------- */
.ds-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:16px}