/* Content and headings */
.content{width:100%;max-width:1520px;margin:0 auto;padding:28px 30px 54px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.page-head-copy{min-width:0}
.page-head h1{margin:6px 0 7px;color:var(--ee-ink);font-size:clamp(26px,2.5vw,36px);font-weight:810;letter-spacing:-.052em;line-height:1.04}
.page-head p{max-width:720px;margin:0;color:var(--ee-muted);font-size:11.5px;line-height:1.62}
.page-head-actions{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.eyebrow{display:flex;align-items:center;gap:7px;color:var(--ee-muted);font-size:8px;font-weight:820;letter-spacing:.14em;text-transform:uppercase}
.eyebrow>span{display:block;width:6px;height:6px;border-radius:50%;background:var(--ee-teal);box-shadow:0 0 10px rgba(31,187,174,.62)}
.grid{display:grid;gap:14px}
.card{
  position:relative;
  padding:19px;
  color:var(--ee-ink);
  border:1px solid var(--ee-line);
  border-radius:var(--ee-radius-lg);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ee-surface) 98%,var(--ee-primary) 2%),var(--ee-surface));
  box-shadow:var(--ee-shadow-sm);
  backdrop-filter:none;
}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px rgba(255,255,255,.48)}
html[data-theme="dark"] .card::before{box-shadow:inset 0 1px rgba(255,255,255,.035)}
.panel-title{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.panel-title h3{margin:0 0 5px;color:var(--ee-ink);font-size:12.5px;font-weight:770;letter-spacing:-.015em}
.panel-title p{margin:0;color:var(--ee-muted);font-size:8.5px;line-height:1.5}
.wide{grid-column:1/-1}

/* Metrics */
.metrics{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:14px}
.metric{min-height:132px;overflow:hidden;padding:16px 17px;isolation:isolate;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.metric:hover{transform:translateY(-2px);border-color:var(--ee-line-strong);box-shadow:var(--ee-shadow-md)}
.metric::after{content:"";position:absolute;z-index:-1;right:-36px;bottom:-62px;width:145px;height:145px;border-radius:50%;background:radial-gradient(circle,rgba(141,112,239,.14),transparent 67%)}
.metric-teal::after,.metric-success::after{background:radial-gradient(circle,rgba(31,187,174,.14),transparent 67%)}
.metric-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.metric .label{color:var(--ee-muted);font-size:8.5px;font-weight:760;letter-spacing:.01em}
.metric-icon{display:grid;width:32px;height:32px;place-items:center;color:var(--ee-primary);border:1px solid rgba(93,70,217,.10);border-radius:10px;background:rgba(93,70,217,.075)}
.metric-teal .metric-icon,.metric-success .metric-icon{color:var(--ee-success);border-color:rgba(31,187,174,.12);background:rgba(31,187,174,.09)}
.metric-lavender .metric-icon{color:#765add;background:rgba(141,112,239,.10)}
.metric-slate .metric-icon{color:var(--ee-muted);background:var(--ee-surface-muted);border-color:var(--ee-line)}
.metric .value{margin:14px 0 11px;color:var(--ee-ink);font-size:27px;font-weight:830;letter-spacing:-.055em;line-height:1}
.metric-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.delta{display:flex;align-items:center;gap:5px;color:var(--ee-success);font-size:7.5px;font-weight:800;white-space:nowrap}
.delta i{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.delta .muted{font-weight:600}
.spark{width:58px;height:17px;margin:0;opacity:.7;filter:saturate(.9)}

/* Dashboard */
.dashboard-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:14px}
.progress-row{display:grid;grid-template-columns:112px 1fr;align-items:center;gap:20px}
.ring{position:relative;display:grid;width:108px;height:108px;place-items:center;border-radius:50%;background:conic-gradient(var(--ee-primary) 64%,var(--ee-surface-muted) 0);box-shadow:inset 0 0 0 1px var(--ee-line),0 12px 32px rgba(93,70,217,.12)}
.ring::after{content:"";position:absolute;inset:11px;border:1px solid var(--ee-line);border-radius:50%;background:var(--ee-surface);box-shadow:inset 0 4px 12px rgba(30,34,81,.04)}
.ring b{position:relative;z-index:1;color:var(--ee-ink);font-size:22px;letter-spacing:-.04em}
.stats-inline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stats-inline>div{min-width:0;padding-right:8px;border-right:1px solid var(--ee-line)}
.stats-inline>div:last-child{border-right:0}
.stats-inline span{display:block;color:var(--ee-muted);font-size:8px}
.stats-inline b{display:block;margin-top:5px;color:var(--ee-ink);font-size:17px;letter-spacing:-.035em}
.bar,.mini-bar{overflow:hidden;border-radius:99px;background:var(--ee-surface-muted);box-shadow:inset 0 1px 2px rgba(24,27,62,.06)}
.bar{height:7px;margin-top:18px}
.mini-bar{height:6px}
.bar i,.mini-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ee-primary),var(--ee-violet),var(--ee-teal));box-shadow:0 0 10px rgba(93,70,217,.24)}
.campaign-list{display:grid;gap:4px}
.campaign-row{display:grid;grid-template-columns:minmax(0,1.5fr) .55fr .75fr auto;align-items:center;gap:12px;padding:10px 9px;border:1px solid transparent;border-radius:12px;transition:background .16s ease,border-color .16s ease,transform .16s ease}
.campaign-row:hover{border-color:var(--ee-line);background:var(--ee-surface-soft);transform:translateX(2px)}
.campaign-row b{font-size:9.5px}.campaign-row small{display:block;margin-top:3px;color:var(--ee-muted);font-size:7.5px}
.events{display:grid}
.event{position:relative;display:grid;grid-template-columns:30px 1fr auto;gap:10px;padding:8px 0}
.event:not(:last-child)::after{content:"";position:absolute;top:35px;bottom:-4px;left:14px;border-left:1px dashed var(--ee-line-strong)}
.dot{display:grid;width:29px;height:29px;place-items:center;color:var(--ee-primary);border:1px solid rgba(93,70,217,.10);border-radius:10px;background:rgba(93,70,217,.08);font-size:9px}
.event.teal .dot{color:var(--ee-success);border-color:rgba(31,187,174,.14);background:rgba(31,187,174,.10)}
.event b{font-size:9px}.event small{display:block;margin-top:3px;color:var(--ee-muted);font-size:7.5px}.event time{color:var(--ee-subtle);font-size:7.5px}
.chart{height:215px;border-bottom:1px solid var(--ee-line);background:repeating-linear-gradient(to bottom,transparent 0,transparent 42px,var(--ee-line) 43px)}
.chart svg{width:100%;height:100%}.chart-labels{display:flex;justify-content:space-between;margin-top:8px;color:var(--ee-muted);font-size:7px}
.empty-inline{display:grid;min-height:174px;place-items:center;align-content:center;gap:7px;padding:22px;color:var(--ee-muted);text-align:center;border:1px dashed var(--ee-line-strong);border-radius:15px;background:linear-gradient(135deg,var(--ee-surface-soft),transparent)}
.empty-inline b{color:var(--ee-ink-soft);font-size:10px}.empty-inline>span:not(.empty-icon){max-width:340px;font-size:8.5px;line-height:1.5}
.empty-icon{display:grid;width:38px;height:38px;place-items:center;color:var(--ee-primary);border-radius:12px;background:rgba(93,70,217,.08)}
.chart-empty{min-height:188px}
.path{display:flex;justify-content:space-between;gap:12px;padding:8px 4px 2px}
.path-node{position:relative;flex:1;text-align:center}
.path-node:not(:last-child)::after{content:"";position:absolute;top:20px;left:62%;right:-38%;border-top:1px dashed var(--ee-line-strong)}
.node{position:relative;z-index:1;display:grid;width:40px;height:40px;margin:auto;place-items:center;color:var(--ee-primary);border:1px solid rgba(93,70,217,.13);border-radius:13px;background:var(--ee-surface);box-shadow:0 0 0 5px rgba(93,70,217,.055),var(--ee-shadow-xs)}
.path-node:last-child .node{color:var(--ee-success);border-color:rgba(31,187,174,.18);box-shadow:0 0 0 5px rgba(31,187,174,.065),var(--ee-shadow-xs)}
.path-node b{display:block;margin-top:10px;color:var(--ee-ink-soft);font-size:8.5px}.path-node small{display:block;margin-top:2px;color:var(--ee-muted);font-size:7px}

/* Status and summaries */
.pill{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border:1px solid transparent;border-radius:999px;font-size:7.5px;font-weight:820;letter-spacing:.025em;text-transform:capitalize;white-space:nowrap}
.pill::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor}
.pill.completed,.pill.active,.pill.published{color:#117b6c;border-color:rgba(31,187,174,.18);background:#e5faf6}
html[data-theme="dark"] .pill.completed,html[data-theme="dark"] .pill.active,html[data-theme="dark"] .pill.published{color:#63ded0;background:rgba(31,187,174,.11)}
.pill.generating,.pill.validating,.pill.rendering{color:#6548cc;border-color:rgba(93,70,217,.16);background:#f0edff}
html[data-theme="dark"] .pill.generating,html[data-theme="dark"] .pill.validating,html[data-theme="dark"] .pill.rendering{color:#baa9ff;background:rgba(141,112,239,.12)}
.pill.draft,.pill.paused{color:var(--ee-muted);border-color:var(--ee-line);background:var(--ee-surface-muted)}
.pill.failed,.pill.archived{color:var(--ee-danger);border-color:rgba(193,63,96,.17);background:var(--ee-danger-soft)}
.summary-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.summary-box{min-width:0;padding:13px;border:1px solid var(--ee-line);border-radius:13px;background:var(--ee-surface-soft);box-shadow:inset 0 1px rgba(255,255,255,.4)}
html[data-theme="dark"] .summary-box{box-shadow:inset 0 1px rgba(255,255,255,.025)}
.summary-box small{display:block;color:var(--ee-muted);font-size:8px;line-height:1.35}
.summary-box strong{display:block;overflow-wrap:anywhere;margin-top:7px;color:var(--ee-ink);font-size:18px;font-weight:780;letter-spacing:-.035em;line-height:1.1}
.detail-grid{grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);gap:14px}
.info-list{display:grid;gap:0}
.info{padding:10px 0;border-bottom:1px solid var(--ee-line)}
.info:last-child{border-bottom:0;padding-bottom:0}
.info span{display:block;color:var(--ee-muted);font-size:7.5px}.info b{display:block;overflow-wrap:anywhere;margin-top:4px;color:var(--ee-ink-soft);font-size:9px;line-height:1.45}
.summary-line{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--ee-line);font-size:9px}
.summary-line:last-child{border-bottom:0}.summary-line span{color:var(--ee-muted)}

/* Tables */
.table-card{overflow:hidden;padding:0}
.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 17px;border-bottom:1px solid var(--ee-line)}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filter{min-height:34px;padding:7px 10px;color:var(--ee-muted);border:1px solid var(--ee-line);background:var(--ee-surface-soft);font-size:8px}
.filter:hover,.filter.active{color:var(--ee-primary);border-color:rgba(93,70,217,.24);background:rgba(93,70,217,.07)}
.table-card>.table,.table-card table{width:100%}
.table{width:100%;min-width:760px;border-collapse:separate;border-spacing:0}
.table th{position:sticky;top:0;z-index:2;padding:11px 13px;color:var(--ee-muted);text-align:left;border-bottom:1px solid var(--ee-line);background:var(--ee-surface-soft);font-size:7.5px;font-weight:800;letter-spacing:.055em;text-transform:uppercase}
.table td{padding:13px;color:var(--ee-ink-soft);border-bottom:1px solid var(--ee-line);font-size:9px;line-height:1.45;vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background .14s ease}
.table tbody tr:hover td{background:rgba(93,70,217,.035)}
.table td b{color:var(--ee-ink)}
.table td .muted{margin-top:3px;font-size:7.5px}
.table code,code{padding:3px 6px;color:var(--ee-primary);border:1px solid var(--ee-line);border-radius:7px;background:var(--ee-surface-muted);font:600 8px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace}
.link{color:var(--ee-primary);font-weight:760;text-decoration:none}.link:hover{text-decoration:underline}
.tabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:15px;padding:4px;border:1px solid var(--ee-line);border-radius:13px;background:var(--ee-surface-soft)}
.tab{min-height:36px;padding:8px 12px;color:var(--ee-muted);border:0;border-radius:9px;background:transparent;font-size:8.5px;font-weight:700;white-space:nowrap}
.tab.active{color:var(--ee-primary);border:0;background:var(--ee-surface);box-shadow:var(--ee-shadow-xs)}

/* Forms and wizard */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.field{display:grid;align-content:start;gap:7px;min-width:0}
.field.full{grid-column:1/-1}
.field label{color:var(--ee-ink-soft);font-size:9px;font-weight:730;line-height:1.4}
.field label:has(input[type="checkbox"]){display:flex;align-items:center;gap:9px;padding:8px 0;color:var(--ee-ink-soft);cursor:pointer}
.search input,.field input,.field select,.field textarea,.brand-select,.filter{
  width:100%;
  color:var(--ee-ink);
  border:1px solid var(--ee-line-strong);
  border-radius:11px;
  outline:0;
  background:var(--ee-surface);
  box-shadow:var(--ee-shadow-xs);
}
.field input,.field select,.field textarea,.brand-select{min-height:42px;padding:10px 12px;font-size:10px}
.field textarea{min-height:100px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--ee-subtle)}
.field input:hover,.field select:hover,.field textarea:hover{border-color:rgba(93,70,217,.25)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(93,70,217,.52);box-shadow:0 0 0 4px var(--ee-focus),var(--ee-shadow-xs)}
.field input:disabled{color:var(--ee-muted);background:var(--ee-surface-muted);cursor:not-allowed}
.field small{font-size:7.5px;line-height:1.5}
input[type="checkbox"]{width:16px!important;height:16px;min-height:auto!important;padding:0!important;accent-color:var(--ee-primary);box-shadow:none!important}
.wizard-layout{grid-template-columns:minmax(0,1fr) 320px;gap:16px}
.stepper{display:flex;justify-content:space-between;margin:0 0 20px;padding:4px 4px 0}
.step{position:relative;flex:1;text-align:center}
.step:not(:last-child)::after{content:"";position:absolute;top:16px;left:58%;right:-42%;border-top:1px dashed var(--ee-line-strong)}
.step i{position:relative;z-index:1;display:grid;width:33px;height:33px;margin:auto;place-items:center;color:var(--ee-muted);border:1px solid var(--ee-line);border-radius:11px;background:var(--ee-surface-muted);font-size:9px;font-style:normal;font-weight:800;transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.step.active i,.step.done i{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--ee-primary),var(--ee-violet) 60%,var(--ee-teal));box-shadow:0 7px 18px rgba(93,70,217,.22)}
.step span{display:block;margin-top:7px;color:var(--ee-muted);font-size:7px;font-weight:650}
.wizard-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--ee-line)}
.summary-sticky{position:sticky;top:94px;height:max-content}
.upload{display:grid;min-height:220px;place-items:center;align-content:center;gap:8px;padding:32px;text-align:center;border:1.5px dashed rgba(93,70,217,.34);border-radius:18px;background:linear-gradient(145deg,rgba(93,70,217,.055),rgba(31,187,174,.035));cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.upload:hover{transform:translateY(-1px);border-color:rgba(93,70,217,.56);background:linear-gradient(145deg,rgba(93,70,217,.085),rgba(31,187,174,.055))}
.upload strong{color:var(--ee-ink);font-size:12px}.upload span{line-height:1.5}
.handoff-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-3px 0 18px;padding:13px 15px;border:1px solid rgba(31,187,174,.22);border-left:3px solid var(--ee-teal);border-radius:13px;background:linear-gradient(90deg,rgba(31,187,174,.07),var(--ee-surface))}
.handoff-summary span{display:block;color:var(--ee-muted);font-size:8px}.handoff-summary strong{display:block;margin-top:4px;color:var(--ee-ink);font-size:10px;text-transform:capitalize}

/* Brands, QR and supporting components */
.brand-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.brand-card:hover{transform:translateY(-2px);border-color:rgba(93,70,217,.20);box-shadow:var(--ee-shadow-md)}
.qr-thumb{border-color:var(--ee-line-strong);border-radius:12px;box-shadow:var(--ee-shadow-sm)}
.featured-qr{border-color:var(--ee-line);border-radius:18px;background:linear-gradient(135deg,var(--ee-surface),var(--ee-surface-soft))}
.featured-qr img{border:1px solid var(--ee-line);border-radius:16px;box-shadow:var(--ee-shadow-md)}
.featured-qr span{color:var(--ee-muted)}.featured-qr b{color:var(--ee-ink)}.featured-qr code{color:var(--ee-muted)}
.toast{position:fixed;right:24px;bottom:24px;z-index:120;width:min(360px,calc(100vw - 32px));padding:14px 16px;color:#f8f8ff;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(15,16,40,.94);box-shadow:0 22px 65px rgba(5,6,24,.30);backdrop-filter:blur(18px);animation:ee-toast-in .24s ease both}
.toast b{font-size:10px}.toast small{color:#b8bdd2!important;font-size:8.5px;line-height:1.45}
@keyframes ee-toast-in{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* Settings appearance */
.appearance-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
.appearance-choice{display:grid;gap:10px;padding:11px;color:var(--ee-ink-soft);text-align:left;border:1px solid var(--ee-line);border-radius:13px;background:var(--ee-surface-soft)}
.appearance-choice:hover,.appearance-choice.active{border-color:rgba(93,70,217,.36);box-shadow:0 0 0 3px rgba(93,70,217,.08)}
.appearance-preview{height:58px;overflow:hidden;border:1px solid var(--ee-line);border-radius:9px;background:#f4f5fb;box-shadow:inset 18px 0 #11112b}
.appearance-preview.dark{background:#181a35;box-shadow:inset 18px 0 #090a1d}
.appearance-choice span{font-size:8.5px;font-weight:750}