/* ============================================================
   Newsletter Builder — design system (din bundle Claude Design)
   ============================================================ */
:root{
  --bg:#FAF9F7;
  --surface:#FFFFFF;
  --surface-2:#F4F2EE;
  --surface-3:#EEEBE5;
  --border:#EAE7E1;
  --border-strong:#DBD7CF;
  --ink:#26231E;
  --ink-2:#6C685F;
  --ink-3:#9C978D;

  --violet:#6B4EFF;
  --violet-600:#5A3DF0;
  --violet-700:#4B30D6;
  --violet-50:#F1EEFF;
  --violet-100:#E3DDFF;

  --pink:#EC2A8E;
  --pink-600:#D81B7C;
  --pink-50:#FCE8F3;

  --green:#1F9D6B;
  --green-50:#E6F6EF;
  --amber:#E08A1E;
  --amber-50:#FBF1E2;

  --r-xs:7px; --r-sm:9px; --r:11px; --r-lg:14px; --r-xl:18px; --r-2xl:24px;
  --sh-1:0 1px 2px rgba(38,35,30,.05), 0 1px 1px rgba(38,35,30,.04);
  --sh-2:0 4px 14px rgba(38,35,30,.07), 0 1px 3px rgba(38,35,30,.05);
  --sh-3:0 14px 38px rgba(38,35,30,.14), 0 5px 12px rgba(38,35,30,.08);
  --sh-pop:0 18px 50px rgba(38,35,30,.20), 0 6px 16px rgba(38,35,30,.10);

  --font:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;

  --topbar-h:58px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-size:14px;
  line-height:1.45;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit;color:inherit}
::selection{background:var(--violet-100)}
a{color:inherit}
.mono{font-family:var(--mono)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:500}

/* scrollbars */
.scroll{scrollbar-width:thin;scrollbar-color:#D8D4CC transparent}
.scroll::-webkit-scrollbar{width:10px;height:10px}
.scroll::-webkit-scrollbar-thumb{background:#D8D4CC;border-radius:20px;border:3px solid transparent;background-clip:content-box}
.scroll::-webkit-scrollbar-thumb:hover{background:#C2BDB2;background-clip:content-box}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--r-sm);
  font-weight:600;font-size:13.5px;color:var(--ink);background:var(--surface);border:1px solid var(--border-strong);
  box-shadow:var(--sh-1);transition:.14s ease;white-space:nowrap;line-height:1;text-decoration:none}
.btn:hover{background:var(--surface-2);border-color:#CFCABF}
.btn:active{transform:translateY(.5px)}
.btn svg{flex:none}
.btn.sm{height:30px;padding:0 10px;font-size:12.5px;border-radius:var(--r-xs)}
.btn.lg{height:42px;padding:0 18px;font-size:14.5px}
.btn.primary{background:var(--violet);color:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(75,48,214,.35),0 2px 8px rgba(107,78,255,.28)}
.btn.primary:hover{background:var(--violet-600)}
.btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--surface-2)}
.btn.subtle{background:var(--surface-2);border-color:transparent;box-shadow:none}
.btn.subtle:hover{background:var(--surface-3)}
.btn:disabled{opacity:.5;cursor:not-allowed}

.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-xs);
  color:var(--ink-2);transition:.13s ease}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.iconbtn.sm{width:28px;height:28px}
.iconbtn.danger:hover{background:#FCE9E7;color:#C0392B}
.iconbtn:disabled{opacity:.3;cursor:default}
.iconbtn:disabled:hover{background:none;color:var(--ink-2)}

/* badge */
.badge{display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:600;letter-spacing:.01em}
.badge .dot{width:6px;height:6px;border-radius:50%}
.badge.draft{background:var(--surface-3);color:var(--ink-2)}
.badge.draft .dot{background:var(--ink-3)}

/* ---------- form controls ---------- */
.field{display:flex;flex-direction:column;gap:6px}
.label{font-size:12.5px;font-weight:600;color:var(--ink)}
.hint{font-size:11.5px;color:var(--ink-3);line-height:1.4}
.input,.textarea,.select{width:100%;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-sm);
  padding:9px 11px;font-size:13.5px;color:var(--ink);transition:.13s ease;box-shadow:var(--sh-1)}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-50)}
.textarea{resize:vertical;line-height:1.5}
.input.mono,.textarea.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239C978D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px;cursor:pointer}

/* segmented */
.seg{display:inline-flex;background:var(--surface-2);border-radius:var(--r-sm);padding:3px;gap:2px}
.seg button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--r-xs);font-size:12.5px;font-weight:600;color:var(--ink-2);transition:.13s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh-1)}

/* toggle */
.tog{position:relative;width:36px;height:21px;border-radius:999px;background:var(--border-strong);transition:.16s;flex:none}
.tog.on{background:var(--violet)}
.tog::after{content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:.16s}
.tog.on::after{transform:translateX(15px)}

/* color swatch */
.swatch{width:30px;height:30px;border-radius:var(--r-xs);border:1px solid rgba(0,0,0,.12);box-shadow:var(--sh-1);cursor:pointer;flex:none;position:relative;padding:0}
.swatch.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--violet)}
.swatches{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.swatch-custom{width:30px;height:30px;padding:1px;border:1px dashed var(--border-strong);border-radius:var(--r-xs);background:var(--surface);cursor:pointer}

.hr{height:1px;background:var(--border);margin:0}

/* tooltip */
.tip{position:relative}
.tip[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  background:#2B2823;color:#fff;font-size:11.5px;font-weight:500;padding:5px 8px;border-radius:6px;white-space:nowrap;z-index:50;pointer-events:none;box-shadow:var(--sh-2)}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{height:100vh;display:flex;flex-direction:column;background:var(--bg)}

.topbar{height:var(--topbar-h);flex:none;display:flex;align-items:center;gap:14px;padding:0 16px;
  background:var(--surface);border-bottom:1px solid var(--border);z-index:30}
.topbar .brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.02em}
.logo{width:28px;height:28px;border-radius:8px;background:linear-gradient(140deg,var(--violet),#9B6BFF);display:inline-flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 2px 8px rgba(107,78,255,.4);font-weight:800}
.topbar .sep{width:1px;height:24px;background:var(--border)}
.nl-name{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.nl-name input{font-weight:700;font-size:15px;border:none;background:transparent;padding:3px 6px;border-radius:6px;width:auto;min-width:60px}
.nl-name input:hover{background:var(--surface-2)}
.nl-name input:focus{outline:none;background:var(--surface-2);box-shadow:0 0 0 2px var(--violet-100)}
.save-state{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink-3);font-weight:500}
.save-state .spin{width:11px;height:11px;border:2px solid var(--border-strong);border-top-color:var(--violet);border-radius:50%;display:inline-block;animation:spin .7s linear infinite}
.spacer{flex:1}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   DASHBOARD
   ============================================================ */
.dash{flex:1;overflow:auto;background:var(--bg)}
.dash-inner{max-width:1080px;margin:0 auto;padding:46px 40px 80px}
.dash-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}
.dash-head h1{font-size:30px;font-weight:800;letter-spacing:-.025em;margin:0 0 6px}
.dash-head p{margin:0;color:var(--ink-2);font-size:14.5px}
.dash-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.searchbox{position:relative;flex:1;max-width:340px}
.searchbox svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-3)}
.searchbox input{padding-left:34px}

.nl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.nl-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1);
  transition:.16s ease;cursor:pointer;display:flex;flex-direction:column;text-decoration:none}
.nl-card:hover{box-shadow:var(--sh-2);transform:translateY(-2px);border-color:var(--border-strong)}
.nl-thumb{height:150px;background:var(--surface-2);position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.nl-thumb iframe{position:absolute;top:0;left:50%;transform:translateX(-50%) scale(.3);transform-origin:top center;width:632px;height:520px;border:0;pointer-events:none}
.nl-card-body{padding:13px 15px 14px}
.nl-card-body h3{margin:0 0 6px;font-size:15px;font-weight:700;letter-spacing:-.01em}
.nl-card-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.nl-card-meta .when{font-size:12px;color:var(--ink-3)}
.nl-card .row-actions{display:flex;gap:2px;opacity:0;transition:.13s}
.nl-card:hover .row-actions{opacity:1}
.new-card{border:1.5px dashed var(--border-strong);background:transparent;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:10px;color:var(--ink-2);font-weight:600;min-height:230px;border-radius:var(--r-lg);transition:.16s}
.new-card:hover{border-color:var(--violet);color:var(--violet);background:var(--violet-50)}
.new-card .plus{width:46px;height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-1);font-size:22px;font-weight:400}
.new-card:hover .plus{border-color:var(--violet-100);color:var(--violet)}

/* ============================================================
   EDITOR — 3 panouri
   ============================================================ */
.editor{flex:1;display:flex;min-height:0}
.palette{width:248px;flex:none;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;overflow:auto}
.canvas-wrap{flex:1;min-width:0;overflow:auto;background:var(--bg);
  background-image:radial-gradient(circle, #E6E2DB 1px, transparent 1px);background-size:22px 22px}
.inspector{width:332px;flex:none;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;min-height:0}

/* palette */
.pal-section{padding:16px 14px}
.pal-title{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:3px}
.pal-sub{font-size:11.5px;color:var(--ink-3);margin-bottom:12px;line-height:1.4}
.link-btn{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r);background:linear-gradient(135deg,var(--violet-50),#F6EFFF);
  border:1px solid var(--violet-100);text-align:left;transition:.14s}
.link-btn:hover{box-shadow:var(--sh-2);transform:translateY(-1px)}
.link-btn .ic{width:34px;height:34px;border-radius:9px;background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 2px 7px rgba(107,78,255,.4);font-size:16px}
.link-btn b{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.link-btn span{font-size:11px;color:var(--ink-2)}

.blocks-list{display:flex;flex-direction:column;gap:4px}
.block-chip{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);transition:.12s;text-align:left;width:100%;border:1px solid transparent}
.block-chip:hover{background:var(--surface-2);border-color:var(--border)}
.block-chip:active{cursor:grabbing}
.block-chip .ic{width:32px;height:32px;border-radius:8px;background:var(--surface-2);color:var(--ink-2);display:flex;align-items:center;justify-content:center;flex:none;transition:.12s;font-size:15px}
.block-chip:hover .ic{background:var(--violet-50);color:var(--violet)}
.block-chip b{font-size:13px;font-weight:600;display:block}
.block-chip span{font-size:11px;color:var(--ink-3)}
.block-chip .grip{margin-left:auto;color:var(--ink-3);opacity:0;transition:.12s}
.block-chip:hover .grip{opacity:1}

/* canvas */
.canvas-pad{min-height:100%;padding:34px 20px 120px;display:flex;flex-direction:column;align-items:center}
.email-frame{width:600px;max-width:100%;background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-2);overflow:visible;border:1px solid var(--border)}
.email-frame.mobile{width:380px}
.email-meta-bar{display:flex;flex-direction:column;gap:2px;width:600px;max-width:100%;margin-bottom:14px}
.email-meta-bar.mobile{width:380px}
.subject-line{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.preheader-line{font-size:12.5px;color:var(--ink-3)}
.canvas-info{margin-top:18px;display:flex;align-items:center;gap:7px;color:var(--ink-3);font-size:12px}

/* block chrome */
.blk{position:relative;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .12s}
.blk:hover{outline-color:var(--violet-100)}
.blk.sel{outline-color:var(--violet)}
.blk.error{outline-color:#E8B3AC}
.blk.error.sel{outline-color:#C0392B}
.blk.dragging{opacity:.4}
.blk-tools{position:absolute;top:6px;right:6px;display:flex;gap:1px;background:var(--surface);border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--sh-2);padding:2px;opacity:0;transform:translateY(-3px);transition:.12s;z-index:7}
.blk:hover .blk-tools,.blk.sel .blk-tools{opacity:1;transform:none}
.blk-grip{position:absolute;top:50%;left:-13px;transform:translateY(-50%);width:22px;height:34px;border-radius:7px;background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--sh-2);display:flex;align-items:center;justify-content:center;color:var(--ink-3);
  cursor:grab;opacity:0;transition:.12s;z-index:7;font-size:13px}
.blk:hover .blk-grip,.blk.sel .blk-grip{opacity:1}
.blk-grip:active{cursor:grabbing}
.blk-label{position:absolute;top:6px;left:6px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;
  color:var(--violet);background:var(--violet-50);padding:2px 6px;border-radius:5px;opacity:0;transition:.12s;z-index:7;pointer-events:none}
.blk:hover .blk-label,.blk.sel .blk-label{opacity:1}
.blk.error .blk-label{color:#C0392B;background:#FCE9E7}
.drop-ind{position:absolute;z-index:8;background:var(--violet);border-radius:3px;box-shadow:0 0 0 3px rgba(107,78,255,.18)}

.canvas-empty{width:600px;max-width:100%;border:1.5px dashed var(--border-strong);border-radius:var(--r-lg);padding:60px 30px;text-align:center;color:var(--ink-2);background:rgba(255,255,255,.5)}
.canvas-empty .ic{width:46px;height:46px;border-radius:14px;background:var(--violet-50);color:var(--violet);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:20px}

/* add-between */
.add-between{height:18px;width:100%;display:flex;align-items:center;justify-content:center;position:relative}
.add-between .ln{position:absolute;left:0;right:0;height:2px;background:var(--violet);opacity:0;transition:.12s;border-radius:2px}
.add-between>button{width:24px;height:24px;border-radius:50%;background:var(--violet);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sh-2);opacity:0;transform:scale(.6);transition:.13s;z-index:3;font-size:15px;line-height:1}
.add-between:hover .ln{opacity:.3}
.add-between:hover>button{opacity:1;transform:none}

/* row break marker in canvas */
.rowbreak-marker{display:flex;align-items:center;gap:8px;padding:4px 14px;color:var(--violet);font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;text-transform:uppercase}
.rowbreak-marker::before,.rowbreak-marker::after{content:"";flex:1;height:1px;background:var(--violet-100)}

/* inspector */
.insp-tabs{display:flex;gap:2px;padding:10px 12px;border-bottom:1px solid var(--border);flex:none}
.insp-tabs button{flex:1;height:34px;border-radius:var(--r-sm);font-size:13px;font-weight:600;color:var(--ink-2);transition:.13s;display:flex;align-items:center;justify-content:center;gap:6px}
.insp-tabs button:hover{background:var(--surface-2);color:var(--ink)}
.insp-tabs button.on{background:var(--violet-50);color:var(--violet)}
.insp-body{flex:1;overflow:auto;padding:0}
.insp-group{padding:16px 16px;border-bottom:1px solid var(--border)}
.insp-group:last-child{border-bottom:none}
.insp-group h4{margin:0 0 14px;font-size:11.5px;font-weight:700;letter-spacing:.01em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:7px;white-space:nowrap}
.insp-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.insp-row:last-child{margin-bottom:0}
.insp-row .label{flex:none}
.insp-col{display:flex;flex-direction:column;gap:13px}
.range-row{display:flex;align-items:center;gap:10px}
.range-row input[type=range]{width:120px;accent-color:var(--violet)}
.range-row .val{font-family:var(--mono);font-size:12px;color:var(--ink-2);width:40px}

.empty-insp{padding:40px 24px;text-align:center;color:var(--ink-3)}
.empty-insp .ic{width:48px;height:48px;border-radius:14px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:var(--ink-3);font-size:20px}

/* product picker */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.prod-pick{border:1.5px solid var(--border);border-radius:var(--r-sm);padding:7px;background:var(--surface);transition:.12s;text-align:center;cursor:pointer}
.prod-pick:hover{border-color:var(--border-strong);background:var(--surface-2)}
.prod-pick.on{border-color:var(--violet);background:var(--violet-50);box-shadow:0 0 0 2px var(--violet-50)}
.prod-pick .ph{height:54px;border-radius:6px;margin-bottom:6px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--surface-2)}
.prod-pick .ph img{max-width:100%;max-height:100%;object-fit:contain}
.prod-pick small{font-size:10px;line-height:1.25;color:var(--ink-2);display:block}

/* ============================================================
   EMAIL RENDER (canvas WYSIWYG)
   ============================================================ */
.em{font-family:var(--font);color:#2A2722}
.em-banner-img{display:block;width:100%;height:auto;border:0}
.em-section{padding:14px 24px}
.em-heading{font-weight:800;text-align:center;letter-spacing:-.01em;line-height:1.2}
.em-text{line-height:1.6;font-size:14px;color:#46423B}
.em-btn{display:inline-block;padding:12px 26px;border-radius:9px;font-weight:700;font-size:14px;text-decoration:none;cursor:default}
.em-divider{height:1px;background:#EAE7E1;margin:10px 24px}
.em-pill{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:13px;color:#fff;padding:8px 12px;border-radius:13px;line-height:1.3;min-height:54px}
.em-row{display:flex}
.em-row.stack{flex-direction:column}
.em-col{flex:1;min-width:0;padding:10px;display:flex;flex-direction:column;gap:8px}
.em-prodimg{height:150px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.em-prodimg img{max-width:100%;max-height:100%;object-fit:contain}
.em-prodname{font-size:12px;line-height:1.35;color:#46423B;min-height:34px;text-align:center}
.em-cardbtn{display:block;text-align:center;font-weight:700;font-size:12px;padding:10px 0;border-radius:8px}
.em-foot{padding:22px 24px 26px;text-align:center;color:#9A958C;font-size:11.5px;line-height:1.7;background:#FAF8F5}
.em-spacer{outline:1px dashed transparent}
.blk:hover .em-spacer{outline-color:var(--violet-100)}
.em-err{padding:14px 24px;background:#FFF5F5;border:1px dashed #E8B3AC;color:#C0392B;font-size:12.5px;border-radius:8px;margin:8px 14px}
.cell-empty{border:1.5px dashed var(--border-strong);border-radius:8px;padding:22px 10px;text-align:center;color:var(--ink-3);font-size:11.5px;background:rgba(0,0,0,.015)}

/* ============================================================
   MODALS
   ============================================================ */
.scrim{position:fixed;inset:0;background:rgba(34,31,26,.42);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:100;padding:24px;
  animation:fade .15s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--sh-pop);width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;
  animation:pop .18s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--border);flex:none}
.modal-head h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em}
.modal-head p{margin:2px 0 0;font-size:12.5px;color:var(--ink-2)}
.modal-body{padding:22px;overflow:auto}
.modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:16px 22px;border-top:1px solid var(--border);flex:none;background:var(--surface)}

/* link-import modal */
.import-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}
.import-left{padding:4px 22px 4px 0}
.import-right{padding:4px 0 4px 22px;border-left:1px solid var(--border)}
.detected{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);margin-bottom:8px}
.detected .ph{width:40px;height:40px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--surface-2)}
.detected .ph img{max-width:100%;max-height:100%;object-fit:contain}
.detected b{font-size:12.5px;font-weight:600;display:block;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detected span{font-size:11px;color:var(--ink-3)}
.detected .ok{color:var(--green);flex:none}
.detected .bad{color:#C0392B;flex:none}

/* preview modal */
.preview-stage{background:var(--surface-3);padding:30px;display:flex;justify-content:center;overflow:auto;flex:1}
.device{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden;align-self:flex-start;border:1px solid var(--border)}
.device iframe{display:block;border:0;width:100%;height:72vh}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#2B2823;color:#fff;padding:11px 16px;border-radius:var(--r);
  font-size:13px;font-weight:600;box-shadow:var(--sh-pop);z-index:200;display:flex;align-items:center;gap:9px;animation:toastin .25s cubic-bezier(.2,.9,.3,1.2)}
.toast .ic{color:#5FD39A}
@keyframes toastin{from{opacity:0}to{opacity:1}}

/* dropdown menu */
.menu{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh-pop);padding:5px;z-index:60;min-width:184px;
  animation:pop .13s ease;max-height:320px;overflow:auto}
.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:var(--r-xs);font-size:13px;font-weight:500;color:var(--ink);text-align:left;transition:.1s}
.menu button:hover{background:var(--surface-2)}
.menu button.danger{color:#C0392B}
.menu button.danger:hover{background:#FCE9E7}
.menu .mhr{height:1px;background:var(--border);margin:5px 0}
.menu .mlabel{font-size:11px;font-weight:600;color:var(--ink-3);padding:6px 10px 4px;text-transform:uppercase;letter-spacing:.03em}

/* ============================================================
   LOGIN
   ============================================================ */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:32px;width:330px;box-shadow:var(--sh-2)}
.login-card h1{font-size:19px;margin:0 0 4px;font-weight:800;letter-spacing:-.02em}
.login-card .sub{color:var(--ink-3);font-size:13px;margin:0 0 20px}
.login-card .err{background:#FFF5F5;border:1px solid #E8B3AC;color:#C0392B;border-radius:var(--r-sm);padding:9px 12px;font-size:13px;margin-bottom:14px}
.login-card .field{margin-bottom:14px}