/* etavo (test) — embedded admin UI.
 *
 * Lifted from the concept draft (reference/etavo-concept.html) so the shipped app
 * looks like the thing that was designed. Shopify supplies the admin chrome — top
 * bar, store nav — so only the app's own surface lives here.
 *
 * Fonts are the system stack: the concept embedded Inter/Poppins as base64, which is
 * ~250 KB per weight and would be paid on every admin load. Shopify admin already
 * renders in Inter, so inside the iframe the system stack IS Inter.
 */
:root {
  --coral-300:#ffb35f; --coral-400:#ff8a3c; --coral-500:#f9502a;
  --coral-600:#e8431f; --coral-700:#d63a18; --coral-800:#c93312;
  --amber:#ffb020; --cream:#fff7f2; --sand:#f7e9e0;

  /* polaris-ish admin tokens — from the concept */
  --p-bg:#f1f1f1; --p-card:#ffffff; --p-text:#202223; --p-sub:#6d7175;
  --p-border:#e3e3e3; --p-border-2:#ebebeb;
  --p-link:#005bd3; --p-btn:#1a1a1a; --p-hover:#f6f6f7; --p-focus:#458fff;
  --p-succ-bg:#cdfee1; --p-succ-tx:#0c5132;
  --p-att-bg:#ffd6a4;  --p-att-tx:#5e4200;
  --p-info-bg:#d0e9ff; --p-info-tx:#00527c;
  --p-crit-bg:#fee9e8; --p-crit-tx:#8e1f0b;
  --succ-text:#1a7f4b; --crit-text:#c81e1e;
  --shadow-s:0 1px 2px rgba(35,20,13,.06),0 1px 6px rgba(35,20,13,.05);
  --shadow-m:0 2px 6px rgba(35,20,13,.07),0 12px 32px rgba(35,20,13,.09);
  --shadow-l:0 8px 24px rgba(35,20,13,.10),0 32px 80px rgba(35,20,13,.14);
}

* { margin:0; padding:0; box-sizing:border-box }
use[href^="#i-"] { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.step.done .ck use { stroke-width:2.6 }
body {
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Inter,system-ui,sans-serif;
  background:var(--p-bg); color:var(--p-text); font-size:13px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img, svg { display:block }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; font-size:inherit }
a { color:var(--p-link); text-decoration:none }
[hidden] { display:none !important }

/* ---------- app shell ---------- */
.app { max-width:1180px; margin:0 auto; position:relative; min-height:100vh }
.app-head { display:flex; align-items:center; gap:11px; padding:16px 22px 0 }
.app-head .ai { width:30px; height:30px; border-radius:8px; overflow:hidden; box-shadow:var(--shadow-s) }
.app-head .an { font-weight:700; font-size:15.5px }
.app-head .env { font-size:11px; font-weight:600; color:var(--p-sub); border:1px solid var(--p-border);
                 background:#fff; border-radius:7px; padding:2.5px 8px }
.app-head .spacer { flex:1 }
.app-head .hl { font-size:12.5px; font-weight:600; color:var(--p-link) }

.app-tabs { display:flex; gap:2px; padding:10px 22px 0; border-bottom:1px solid var(--p-border) }
.app-tabs button { padding:9px 14px; font-size:13px; font-weight:600; color:var(--p-sub);
                   border-radius:10px 10px 0 0; position:relative }
.app-tabs button:hover { color:var(--p-text); background:var(--p-hover) }
.app-tabs button.on { color:var(--p-text) }
.app-tabs button.on::after { content:""; position:absolute; left:10px; right:10px; bottom:-1px;
                             height:3px; border-radius:3px 3px 0 0; background:var(--coral-600) }

.app-page { padding:20px 22px 40px; display:none }
.app-page.on { display:block; animation:fade .2s ease }
@keyframes fade { from { opacity:0; transform:translateY(3px) } to { opacity:1; transform:none } }

.pg-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap }
.pg-head h3 { font-size:16px; font-weight:700 }
.pg-head .sub { color:var(--p-sub); font-size:12.5px }
.pg-head .grow { flex:1 }

/* ---------- cards, banners, badges ---------- */
.pcardX { background:var(--p-card); border:1px solid var(--p-border-2); border-radius:14px; box-shadow:var(--shadow-s) }
.banner { display:flex; gap:11px; align-items:flex-start; border-radius:12px; padding:12px 14px;
          font-size:12.5px; margin-bottom:14px }
.banner.succ { background:var(--p-succ-bg); color:var(--p-succ-tx) }
.banner.att  { background:var(--p-att-bg);  color:var(--p-att-tx) }
.banner.info { background:var(--p-info-bg); color:var(--p-info-tx) }
.banner.crit { background:var(--p-crit-bg); color:var(--p-crit-tx) }
.banner svg { width:15px; height:15px; flex:none; margin-top:1px }
.banner b { font-weight:700 }
.banner .x { margin-left:auto; opacity:.6; font-size:14px; line-height:1 }

.badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
         border-radius:8px; padding:2.5px 8px }
.badge.succ { background:var(--p-succ-bg); color:var(--p-succ-tx) }
.badge.att  { background:var(--p-att-bg);  color:var(--p-att-tx) }
.badge.info { background:var(--p-info-bg); color:var(--p-info-tx) }
.badge.neu  { background:#e8e8e8; color:#5c5f62 }
.badge .dt  { width:6px; height:6px; border-radius:99px; background:currentColor; opacity:.75 }

/* ---------- setup guide ---------- */
.setup { padding:16px 18px }
.setup .shead { display:flex; align-items:center; gap:10px; margin-bottom:4px }
.setup .shead b { font-size:13.5px }
.setup .prg { margin-left:auto; font-size:11.5px; color:var(--p-sub) }
.setup .bar { height:5px; border-radius:5px; background:#ececec; margin:9px 0 13px; overflow:hidden }
.setup .bar i { display:block; height:100%; border-radius:5px; background:var(--coral-600); transition:width .3s }
.step { display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px }
.step:hover { background:var(--p-hover) }
.step .ck { width:18px; height:18px; border-radius:99px; flex:none; display:flex; align-items:center; justify-content:center }
.step.done .ck { background:#1a1a1a; color:#fff }
.step.done .ck svg { width:10px; height:10px }
.step.todo .ck { border:2px dashed #b5b5b5 }
.step .tx { font-size:12.5px; font-weight:500 }
.step.done .tx { color:var(--p-sub); text-decoration:line-through }
.step .act { margin-left:auto; font-size:12px; font-weight:600; color:var(--p-link); text-align:right }
.step .hint { display:block; font-weight:500; font-size:11px; color:var(--p-sub); margin-top:2px }

/* ---------- stats + chart ---------- */
.statRow { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:14px 0 }
.stat { padding:13px 15px }
.stat .lb { font-size:11.5px; font-weight:600; color:var(--p-sub) }
.stat .vl { font-size:22px; font-weight:700; letter-spacing:-.01em; margin-top:3px;
            display:flex; align-items:baseline; gap:8px; flex-wrap:wrap }
.stat .vl.empty { font-size:14px; font-weight:600; color:var(--p-sub) }
.stat .dl { font-size:11.5px; font-weight:600; display:inline-flex; align-items:center; gap:3px }
.stat .dl.up { color:var(--succ-text) }
.stat .dl.dn { color:var(--crit-text) }
.stat .snote { font-size:10.5px; color:var(--p-sub); margin-top:4px }

.chartCard { padding:16px 18px }
.chartCard .chead { display:flex; align-items:baseline; gap:10px; margin-bottom:4px; flex-wrap:wrap }
.chartCard .chead b { font-size:13.5px }
.chartCard .chead span { font-size:11.5px; color:var(--p-sub) }
.chartbox { position:relative }
.charttip { position:absolute; pointer-events:none; background:#1a1a1a; color:#fff; font-size:11px;
            border-radius:8px; padding:6px 9px; transform:translate(-50%,-115%); white-space:nowrap;
            display:none; z-index:3; box-shadow:var(--shadow-m) }
.charttip b { font-weight:700 }
.emptychart { display:flex; align-items:center; justify-content:center; height:180px;
              color:var(--p-sub); font-size:12.5px; text-align:center; padding:0 30px }

/* ---------- tables ---------- */
table.ptab { width:100%; border-collapse:collapse; font-size:12.5px }
.ptab th { text-align:left; font-size:11px; font-weight:600; color:var(--p-sub); padding:9px 14px;
           border-bottom:1px solid var(--p-border-2); white-space:nowrap }
.ptab td { padding:10px 14px; border-bottom:1px solid var(--p-border-2); vertical-align:middle }
.ptab tr:last-child td { border-bottom:none }
.ptab tbody tr:hover { background:var(--p-hover) }
.ptab .rn { font-weight:600; color:var(--p-text) }
.ptab .rs { color:var(--p-sub); font-size:11.5px }
.ptab .num { font-variant-numeric:tabular-nums }
.ptab .rowact { text-align:right; white-space:nowrap }
.ptab .rowact button { color:var(--p-link); font-weight:600; font-size:11.5px; margin-left:10px }
.ptab .rowact button.danger { color:var(--crit-text) }
.tablewrap { overflow-x:auto }

.fchips { display:flex; gap:6px; margin-bottom:12px }
.fchips button { font-size:12px; font-weight:600; color:var(--p-sub); border:1px solid var(--p-border);
                 background:#fff; border-radius:9px; padding:5px 12px }
.fchips button.on { background:#1a1a1a; color:#fff; border-color:#1a1a1a }

.btn-p { background:var(--p-btn); color:#fff; font-weight:600; font-size:12.5px; padding:8px 14px;
         border-radius:10px; box-shadow:var(--shadow-s) }
.btn-o { background:#fff; border:1px solid var(--p-border); color:var(--p-text); font-weight:600;
         font-size:12.5px; padding:7px 13px; border-radius:10px }
.btn-o:hover, .btn-p:hover { filter:brightness(1.06) }
.btn-p[disabled], .btn-o[disabled] { opacity:.5; cursor:not-allowed; filter:none }

/* ---------- display tab ---------- */
.dispGrid { display:grid; grid-template-columns:1fr 340px; gap:14px; align-items:start }
.ctl { padding:15px 17px; border-bottom:1px solid var(--p-border-2) }
.ctl:last-child { border-bottom:none }
.ctl .cl { font-size:12.5px; font-weight:600; margin-bottom:9px; display:flex; align-items:center }
.ctl .cl .hint { margin-left:auto; font-weight:500; font-size:11px; color:var(--p-sub) }
.ctl .note { font-size:11px; color:var(--p-sub); margin-top:7px }
.segs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px }
.seg { border:1px solid var(--p-border); border-radius:11px; padding:9px 10px; text-align:center;
       font-size:12px; font-weight:600; color:var(--p-sub); background:#fff; cursor:pointer }
.seg.on { border:2px solid var(--coral-600); color:var(--p-text); padding:8px 9px; background:#fff8f4 }
.swrow { display:flex; gap:9px }
.swb { width:30px; height:30px; border-radius:99px; border:2px solid #fff; outline:1px solid var(--p-border);
       cursor:pointer; position:relative }
.swb.on { outline:2px solid var(--coral-600); outline-offset:2px }
.selrow { display:flex; gap:8px; align-items:center }
select.psel, input.pin { font-family:inherit; font-size:12.5px; border:1px solid var(--p-border);
                         border-radius:10px; padding:8px 11px; background:#fff; color:var(--p-text);
                         flex:1; min-width:0 }
select.psel:focus, input.pin:focus { outline:2px solid var(--p-focus); outline-offset:-1px }
.tgl { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12.5px;
       font-weight:500; padding:4px 0 }
.tswitch { width:36px; height:21px; border-radius:99px; background:#d6d6d6; position:relative;
           transition:background .15s; flex:none; cursor:pointer }
.tswitch::after { content:""; position:absolute; top:2.5px; left:2.5px; width:16px; height:16px;
                  border-radius:99px; background:#fff; box-shadow:var(--shadow-s); transition:left .15s }
.tswitch.on { background:#1a1a1a }
.tswitch.on::after { left:17.5px }

.codebox { display:flex; align-items:center; gap:9px; background:#f6f6f7; border:1px solid var(--p-border);
           border-radius:10px; padding:8px 11px; font-family:ui-monospace,Menlo,monospace;
           font-size:11.5px; color:#4c4c4c; overflow:hidden }
.codebox code { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.codebox button { margin-left:auto; flex:none; color:var(--p-link); font-weight:600; font-size:11.5px;
                  display:flex; gap:5px; align-items:center }
.codebox button svg { width:12px; height:12px }

.livePrev { position:sticky; top:16px }
.livePrev .ph { font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
                color:var(--p-sub); padding:11px 15px; border-bottom:1px solid var(--p-border-2);
                display:flex; align-items:center; gap:7px }
.livePrev .ph i { width:7px; height:7px; border-radius:99px; background:var(--coral-500); display:inline-block }
.livePrev .pv { padding:16px; background:#fafafa; border-radius:0 0 14px 14px }
.pcard { background:#fff; border-radius:12px; border:1px solid #eee }
.pimg { background:linear-gradient(150deg,#ffe1c8,#ff9d68); border-radius:9px; display:flex;
        align-items:center; justify-content:center; color:#fff8 }
.ptit { font-weight:700; margin-top:10px }
.psub { color:#8a8a8a; font-size:11.5px }
.patc { background:#1a1a1a; color:#fff; border-radius:9px; text-align:center; font-weight:600 }

/* ---------- the storefront widget, as previewed ---------- */
.eta-badge { display:inline-flex; align-items:center; gap:8px; background:#fff4ec; border:1px solid #ffd9c0;
             color:#8a3413; font-weight:600; font-size:12.5px; border-radius:99px; padding:7px 13px }
.eta-badge svg { width:14px; height:14px; color:var(--wa,var(--coral-600)) }
.eta-inline { display:flex; flex-direction:column; gap:7px; font-size:13px; color:#3c3c3c }
.eta-inline .l { display:flex; align-items:center; gap:9px }
.eta-inline svg { width:15px; height:15px; color:var(--wa,var(--coral-600)); flex:none }
.eta-inline b { color:#141414 }
.eta-card { border:1px solid #f0e0d5; background:linear-gradient(180deg,#fff9f5,#fff); border-radius:14px; padding:14px 16px }
.eta-card .top { display:flex; align-items:center; gap:9px; font-weight:600; font-size:13.5px;
                 color:#141414; flex-wrap:wrap }
.eta-card .top > svg + * , .eta-card .top { min-width:0 }
.eta-card .top svg { width:16px; height:16px; color:var(--wa,var(--coral-600)) }
.eta-card .cd { font-size:12px; color:#8a3413; background:#fff1e6; border-radius:8px; padding:3px 9px;
                font-weight:600; margin-left:auto; white-space:nowrap }
.eta-card .dates { font-weight:700; font-size:15px; margin-top:8px; color:#141414 }
.eta-tl { display:flex; align-items:flex-start; margin-top:13px }
.eta-tl .st { flex:1; position:relative; text-align:center }
.eta-tl .st::before { content:""; position:absolute; top:5px; left:calc(-50% + 6px); right:calc(50% + 6px);
                      height:2px; background:#f2ddcf; border-radius:2px }
.eta-tl .st:first-child::before { display:none }
.eta-tl .st.done::before { background:var(--wa,var(--coral-500)) }
.eta-tl .dot { width:12px; height:12px; border-radius:99px; background:#fff; border:2.5px solid #e8cdbb;
               margin:0 auto; position:relative; z-index:1 }
.eta-tl .st.done .dot { background:var(--wa,var(--coral-500)); border-color:var(--wa,var(--coral-500)) }
.eta-tl .lb { font-size:10.5px; font-weight:700; color:#9a8578; margin-top:7px; letter-spacing:.02em;
              text-transform:uppercase }
.eta-tl .dt { font-size:11.5px; color:#141414; font-weight:600; margin-top:1px }
.eta-foot { font-size:10.5px; color:#9a8578; margin-top:10px }

/* ---------- emails tab ---------- */
.mailGrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start }
.mailrow { display:flex; align-items:center; gap:12px; padding:12px 15px; border-bottom:1px solid var(--p-border-2) }
.mailrow:last-child { border-bottom:none }
.mailrow .ic { width:30px; height:30px; border-radius:9px; background:#f2f2f2; display:flex;
               align-items:center; justify-content:center; flex:none }
.mailrow .ic svg { width:15px; height:15px; color:#5c5f62 }
.mailrow .tt { font-weight:600; font-size:12.5px }
.mailrow .ss { font-size:11.5px; color:var(--p-sub) }
.mailprev { background:#f6f6f7; border-radius:12px; padding:18px; border:1px solid var(--p-border-2) }
.mail { background:#fff; border-radius:12px; max-width:430px; margin:0 auto; box-shadow:var(--shadow-s);
        overflow:hidden; font-size:12px }
.mail .mh { padding:16px 18px 12px; border-bottom:1px solid #f0f0f0 }
.mail .mh .from { font-size:11px; color:#8a8a8a }
.mail .mh .subj { font-weight:700; font-size:13px; margin-top:2px }
.mail .mb { padding:16px 18px }

/* ---------- settings tab ---------- */
.setGrid { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start }
.daychips { display:flex; gap:6px; flex-wrap:wrap }
.daychips span { width:34px; text-align:center; font-size:11.5px; font-weight:600; padding:6px 0;
                 border-radius:9px; border:1px solid var(--p-border); color:var(--p-sub); background:#fff; cursor:pointer }
.daychips span.on { background:#1a1a1a; border-color:#1a1a1a; color:#fff }
.holi { display:flex; flex-wrap:wrap; gap:6px }
.holi span { font-size:11px; font-weight:600; background:#f6f6f7; border:1px solid var(--p-border-2);
             border-radius:8px; padding:4px 9px; color:#4c4c4c }
.kv { display:flex; gap:10px; font-size:12.5px; padding:5px 0 }
.kv .k { color:var(--p-sub); min-width:120px }
.kv .v { font-weight:600; font-variant-numeric:tabular-nums }

/* ---------- contextual save bar ---------- */
.savebar { position:sticky; top:0; background:#1a1a1a; color:#fff; display:none; align-items:center;
           gap:12px; padding:9px 16px; font-size:12.5px; font-weight:600; z-index:8 }
.savebar.on { display:flex }
.savebar svg { width:15px; height:15px }
.savebar .sp { flex:1 }
.savebar .dsc { color:#b5b5b5; font-weight:600 }
.savebar .sv { background:#fff; color:#1a1a1a; border-radius:9px; padding:6px 14px; font-weight:700; font-size:12px }
.savebar .sv[disabled] { opacity:.6 }

/* ---------- modal + toast ---------- */
.scrim { position:fixed; inset:0; background:rgba(20,10,5,.45); z-index:90; display:none;
         align-items:center; justify-content:center; backdrop-filter:blur(2px) }
.scrim.on { display:flex }
.modal { width:520px; max-width:92vw; max-height:90vh; overflow:auto; background:#fff; border-radius:16px;
         box-shadow:var(--shadow-l); animation:pop .18s ease }
@keyframes pop { from { transform:scale(.96); opacity:0 } to { transform:none; opacity:1 } }
.modal .mh2 { display:flex; align-items:center; padding:15px 18px; border-bottom:1px solid var(--p-border-2);
              font-weight:700; font-size:14px }
.modal .mh2 button { margin-left:auto; color:var(--p-sub); font-size:16px }
.modal .mb2 { padding:16px 18px; display:flex; flex-direction:column; gap:13px }
.modal .fr { display:flex; flex-direction:column; gap:5px }
.modal .fr label { font-size:12px; font-weight:600 }
.modal .two { display:grid; grid-template-columns:1fr 1fr; gap:10px }
.modal .mf2 { display:flex; justify-content:flex-end; gap:9px; padding:13px 18px;
              border-top:1px solid var(--p-border-2); background:#fafafa }
.modal .err { background:var(--p-crit-bg); color:var(--p-crit-tx); border-radius:9px; padding:8px 11px; font-size:12px }

.toast { position:fixed; bottom:26px; left:50%; transform:translate(-50%,20px); background:#1a1a1a; color:#fff;
         font-size:13px; font-weight:600; padding:11px 18px; border-radius:12px; box-shadow:var(--shadow-l);
         opacity:0; transition:all .25s; z-index:120; display:flex; gap:9px; align-items:center; pointer-events:none }
.toast.on { opacity:1; transform:translate(-50%,0) }
.toast svg { width:14px; height:14px; color:#7ee2a8 }
.toast.bad svg { color:#ff9d8e }

.loading { padding:60px 22px; text-align:center; color:var(--p-sub); font-size:13px }

@media (max-width:900px) {
  .dispGrid, .setGrid, .mailGrid { grid-template-columns:1fr }
  .statRow { grid-template-columns:repeat(2,1fr) }
  .livePrev { position:static }
}