:root{
  --ink:#16131f; --paper:#fffdf8; --panel:#fffaf0; --cream:#fff3ce;
  --blue:#1668ff; --blue2:#6bc7ff; --purple:#7c46ff; --pink:#ff4da6;
  --yellow:#ffe24a; --green:#46d67b; --red:#ff5b5b; --muted:#6f687a;
  --line:#1d1930; --shadow:5px 5px 0 #1d1930; --shadow-sm:3px 3px 0 #1d1930; --radius:4px;
}
*{box-sizing:border-box}
html{background:#11101a}
body{
  margin:0;min-height:100vh;color:var(--ink);
  background:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    radial-gradient(circle at 15% 10%,rgba(90,193,255,.35),transparent 26rem),
    radial-gradient(circle at 90% 85%,rgba(124,70,255,.38),transparent 32rem),
    #171525;
  background-size:8px 8px,8px 8px,auto,auto,auto;
  font-family:"Courier New",Courier,monospace;
}
button,input,select,textarea{font:inherit}
button{cursor:pointer}

.shell{display:grid;grid-template-columns:238px minmax(0,1fr);min-height:100vh}
.sidebar{min-height:100vh;padding:22px 16px;color:#fff;background:#11101a;border-right:3px solid #fff;box-shadow:6px 0 0 var(--blue);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
.brandBlock{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.brandMark{width:42px;height:42px;display:grid;place-items:center;background:var(--yellow);color:#111;border:3px solid #fff;box-shadow:4px 4px 0 var(--pink);font-weight:900;font-size:22px}
.brandName{font-size:18px;line-height:1;text-transform:uppercase;letter-spacing:.5px;font-weight:900}
.brandSub{color:#93d7ff;font-size:11px;margin-top:5px;text-transform:uppercase}
.sideNav{display:grid;gap:11px;margin-bottom:22px}
.navItem{border:2px solid transparent;background:transparent;color:#d8d4e5;text-align:left;padding:12px 13px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;font-size:13px}
.navItem:hover{color:#fff;border-color:#5a5670;background:#1c1a2a}
.navItem.active{background:var(--blue);color:#fff;border-color:#fff;box-shadow:4px 4px 0 var(--pink)}
.sideTools{display:grid;gap:8px;padding-top:18px;border-top:2px solid #353148;margin-top:auto}
.sideTool{border:2px solid #4a465b;background:transparent;color:#d8d4e5;text-align:left;padding:9px 10px;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.sideTool:hover{color:var(--yellow);border-color:var(--yellow)}
.profileCard{margin-top:14px;padding:10px;border:2px solid #4a465b;background:#171521;display:flex;gap:10px;align-items:center}
.profileAvatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#f6f4fb;color:#11101a;font-weight:900;font-size:13px;flex-shrink:0}
.profileMeta{min-width:0}.profileMeta strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.mainPanel{min-width:0;background:#f6f4fb;min-height:100vh}
.topbar{min-height:92px;padding:22px 32px;display:flex;justify-content:space-between;align-items:center;background:var(--paper);border-bottom:3px solid var(--line);position:sticky;top:0;z-index:20}
.eyebrow{color:var(--blue);font-weight:900;letter-spacing:2px;font-size:11px;text-transform:uppercase;display:block}
.topbar h1{margin:4px 0 0;font-size:26px;line-height:1;text-transform:uppercase;letter-spacing:-1px}

.appView{display:none;padding:28px 32px 48px}
.appView.activeView{display:block;animation:viewPop .16s steps(2,end)}
@keyframes viewPop{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}
.pageIntro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.pageIntro.splitIntro{align-items:center}
.pageIntro h2{font-size:29px;text-transform:uppercase;letter-spacing:-1.5px;margin:0 0 7px}
.pageIntro p{margin:0;color:var(--muted);max-width:640px;font-family:Arial,sans-serif;font-size:14px;line-height:1.55}

.twoCol{display:grid;grid-template-columns:minmax(280px,.85fr) minmax(360px,1.25fr);gap:22px}
.siteControlGrid{grid-template-columns:minmax(340px,.9fr) minmax(420px,1.1fr)}
.botGrid{grid-template-columns:minmax(300px,.8fr) minmax(360px,1.2fr)}

.card{background:var(--paper);border:3px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;position:relative}
.slimCard{padding:16px}
.cardHead{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:16px}
.cardHead h3{margin:5px 0 0;font-size:19px;text-transform:uppercase}
.stepLabel{color:var(--blue);font-weight:900;letter-spacing:2px;font-size:11px}
.humanOnly{background:var(--yellow);border:2px solid var(--line);padding:6px 8px;font-size:10px;font-weight:900;box-shadow:2px 2px 0 var(--pink);white-space:nowrap}
.fieldLabel{display:block;margin-bottom:7px;font-weight:900;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#353043}
.field{width:100%;border:2px solid var(--line);border-radius:2px;background:#fff;padding:11px 12px;color:var(--ink);outline:none;box-shadow:inset 3px 3px 0 #efebf4;margin-bottom:0}
.field:focus{border-color:var(--blue);box-shadow:3px 3px 0 var(--blue2)}
.fieldNote{display:block;color:#766f80;margin-top:8px;font-size:10px;font-family:Arial,sans-serif}

.dropZone{min-height:150px;border:3px dashed var(--blue);background:linear-gradient(45deg,rgba(22,104,255,.06) 25%,transparent 25%,transparent 75%,rgba(22,104,255,.06) 75%),#fbfdff;background-size:18px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;transition:.12s steps(2,end);cursor:pointer}
.dropZone::before{content:"[ + ]";font-size:22px;font-weight:900;color:var(--pink);margin-bottom:8px;display:block}
.dropZone:hover,.dropZone.active{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--blue);background-color:#eef7ff}
.dropZone strong{text-transform:uppercase;font-size:15px}
.dropZone span{margin-top:7px;color:var(--muted);font-size:11px}

.progressTop{display:flex;justify-content:space-between;text-transform:uppercase;font-weight:900;font-size:11px;margin-bottom:8px}
.progressTrack{height:16px;background:#ded8e8;border:2px solid var(--line);overflow:hidden}
.progressFill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--green) 0 12px,#b8ffcd 12px 18px);transition:width .2s linear}

.sectionHead{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.sectionHead h3{margin:5px 0 0;font-size:19px;text-transform:uppercase}
.countChip{background:var(--yellow);border:2px solid var(--line);padding:6px 9px;font-size:10px;font-weight:900;text-transform:uppercase}
.tableWrap{overflow:auto;border:3px solid var(--line);box-shadow:var(--shadow-sm);background:#fff}
.dataTable{width:100%;border-collapse:collapse}
.dataTable th{background:#171525;color:#fff;text-transform:uppercase;font-size:10px;letter-spacing:.7px;padding:11px;text-align:left}
.dataTable td{padding:11px;border-right:1px solid #d8d3e0;border-bottom:1px solid #d8d3e0}
.dataTable tr:nth-child(even){background:#faf7ff}
.dataTable tr:hover{background:#fff2b8}
.actionRow{display:flex;gap:11px;flex-wrap:wrap;margin-top:16px}

button.primaryBtn,.primaryBtn,.btn-primary{border:3px solid var(--line);border-radius:2px;background:var(--blue);color:#fff;padding:11px 15px;font-weight:900;text-transform:uppercase;box-shadow:var(--shadow-sm);transition:.1s steps(2,end)}
button.secondaryBtn,.secondaryBtn,.btn-secondary,.ghostBtn{border:3px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink);padding:10px 14px;font-weight:900;text-transform:uppercase;box-shadow:var(--shadow-sm);transition:.1s steps(2,end)}
button:hover:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--line)}
button:disabled{opacity:.45;cursor:not-allowed}
.smallBtn{padding:8px 11px;font-size:11px}

.metricGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:20px}
.metricCard{background:var(--paper);border:3px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:16px;position:relative;overflow:hidden}
.metricCard:nth-child(1){background:#eaf3ff}.metricCard:nth-child(2){background:#fff7ca}.metricCard:nth-child(3){background:#eafff1}.metricCard:nth-child(4){background:#ffeaf5}
.metricCard span{display:block;font-size:10px;text-transform:uppercase;font-weight:900;letter-spacing:1px;color:var(--muted)}
.metricCard strong{display:block;font-size:29px;margin-top:6px}

.toolbar{display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.segmented{display:flex;gap:8px;flex-wrap:wrap}
.segBtn{border:2px solid var(--line);background:#fff;padding:9px 12px;font-weight:900;text-transform:uppercase;font-size:10px;box-shadow:2px 2px 0 var(--line)}
.segBtn span{margin-left:5px;color:var(--muted)}
.segBtn.active{background:var(--yellow)}
.searchField{border:2px solid var(--line);border-radius:2px;background:#fff;padding:10px 12px;min-width:240px;box-shadow:inset 2px 2px 0 #efebf4}
.websiteListCard{padding:20px}
.websiteList{display:grid;gap:11px;margin-top:6px}
.websiteRow{display:grid;grid-template-columns:26px 2fr 1fr 1fr auto;gap:12px;align-items:center;border:2px solid var(--line);background:#fff;padding:11px;box-shadow:3px 3px 0 #c9c2d4}
.websiteRow:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--blue2)}
.productIdentity{display:flex;gap:10px;align-items:center}
.productThumb{width:44px;height:44px;flex-shrink:0;background:repeating-linear-gradient(45deg,#15131f 0 5px,#242133 5px 10px);color:#fff;border:2px solid var(--line);display:grid;place-items:center;font-size:8px}
.productIdentity strong,.rowMeta strong{display:block}
.productIdentity small,.rowMeta small{display:block;margin-top:3px;color:var(--muted);font-size:10px}
.statusCell{display:flex;flex-direction:column;gap:4px}
.statusPill{display:inline-block;border:2px solid var(--line);padding:5px 7px;font-size:9px;font-weight:900;text-align:center}
.statusPill.live{background:var(--green)}.statusPill.ready{background:#bfe0ff}.statusPill.attention{background:var(--yellow)}
.rowActions{display:flex;gap:7px}
.rowActions button{border:2px solid var(--line);background:#fff;padding:7px 9px;font-weight:900;font-size:9px;text-transform:uppercase}
.rowActions button.primary{background:var(--blue);color:#fff}
.emptyState{padding:24px;border:3px dashed #bcb5c9;background:#fff;text-align:center;color:var(--muted);font-weight:900;text-transform:uppercase}

.toggleLine{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.toggleLine h3{margin:5px 0 0;font-size:19px;text-transform:uppercase}
.switch{position:relative;width:52px;height:28px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch span{position:absolute;inset:0;background:#5a5566;border:2px solid var(--line);transition:.15s}
.switch span::before{content:"";position:absolute;width:18px;height:18px;left:2px;top:2px;background:#fff;transition:.15s}
.switch input:checked+span{background:var(--green)}
.switch input:checked+span::before{transform:translateX(24px)}

.formGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0}
.formGrid .wideField{grid-column:1/-1}
.formGrid label,.drawerForm label{display:flex;flex-direction:column;gap:6px}
.formGrid label>span,.drawerForm label>span{font-weight:900;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#353043}
.percentField{display:flex;align-items:center}
.percentField input{border-right:0}
.percentField b{border:2px solid var(--line);background:var(--yellow);padding:11px;font-weight:900}
.presetBlock{margin-top:6px}
.presetRow{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.presetCard{border:2px solid var(--line);background:#fff;padding:12px;text-align:left;box-shadow:2px 2px 0 var(--line)}
.presetCard.active{background:var(--yellow);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--pink)}
.presetCard strong{display:block;text-transform:uppercase}
.presetCard small{display:block;font-family:Arial,sans-serif;margin-top:4px;color:var(--muted)}

.salePreview{overflow:hidden;background:#171525;color:#fff;border:3px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.previewMarquee{background:var(--yellow);color:#111;border-bottom:3px solid var(--line);padding:8px;white-space:nowrap;overflow:hidden;font-weight:900;text-transform:uppercase;font-size:12px}
.previewHero{min-height:220px;display:grid;place-items:center;align-content:center;gap:6px;background:linear-gradient(135deg,#171525,#24337f);position:relative;overflow:hidden;text-align:center;padding:20px}
.previewHero span{font-weight:900;letter-spacing:3px;color:var(--blue2)}
.previewHero h3{margin:0;font-size:52px;color:var(--yellow);text-shadow:4px 4px 0 var(--pink)}
.previewHero p{margin:0;color:#d8d4e5}
.previewCategories{display:grid;grid-template-columns:repeat(3,1fr)}
.previewCategories span{padding:14px;text-align:center;border-top:3px solid #fff;border-right:3px solid #fff;font-weight:900;font-size:11px}
.previewCategories span:last-child{border-right:0}
.salePreview.flash .previewMarquee{background:var(--pink);color:#fff}
.salePreview.flash .previewHero{background:linear-gradient(135deg,#125cff,#2ad0ff)}
.salePreview.major .previewMarquee{background:#fff;color:#000}
.salePreview.major .previewHero{background:#000}
.salePreview.major .previewHero h3{color:#fff;text-shadow:5px 5px 0 #555}

.botModeCard p{font-family:Arial,sans-serif;color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 16px}
.ruleList{display:grid;gap:9px}
.ruleList div{display:flex;justify-content:space-between;padding:10px 12px;border:2px solid var(--line);background:#faf7ff;font-size:11px}
.ruleList span{color:var(--muted);text-transform:uppercase;font-weight:800;font-size:10px}
.activityList{display:grid;gap:9px;margin-top:14px}
.activityItem{display:flex;justify-content:space-between;gap:12px;padding:12px;border:2px solid var(--line);background:#fff;box-shadow:2px 2px 0 #cbc4d5}
.activityItem small{display:block;color:var(--muted);margin-top:4px;font-size:9px}

.drawer{position:fixed;inset:0;z-index:90;pointer-events:none}
.drawer.open{pointer-events:auto}
.drawerShade{position:absolute;inset:0;background:rgba(10,8,18,.6);opacity:0;transition:.16s}
.drawer.open .drawerShade{opacity:1}
.drawerPanel{position:absolute;right:0;top:0;height:100%;width:min(560px,94vw);background:var(--paper);border-left:3px solid var(--line);box-shadow:-7px 0 0 var(--blue);transform:translateX(105%);transition:.18s;overflow:auto;padding:22px}
.drawer.open .drawerPanel{transform:translateX(0)}
.drawerHead{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.drawerHead h2{font-size:22px;text-transform:uppercase;margin:5px 0 0}
.iconBtn{width:32px;height:32px;border:2px solid var(--line);background:#ff4da6;color:#fff;font-size:20px;font-weight:900;line-height:1}
.photoSlots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0}
.photoSlots>div{border:2px solid var(--line);background:#f7f4fb;padding:11px;text-align:center}
.photoSlots span{display:block;font-size:10px;text-transform:uppercase;color:var(--muted)}
.photoSlots b{display:block;margin-top:5px;font-size:9px;color:var(--blue)}
.drawerForm{margin-top:6px;display:grid;gap:14px}
.textArea{min-height:100px;resize:vertical}
.drawerActions{display:flex;gap:11px;flex-wrap:wrap;margin-top:6px}
@media(max-width:1050px){.metricGrid{grid-template-columns:repeat(2,1fr)}.siteControlGrid{grid-template-columns:1fr}.botGrid{grid-template-columns:1fr}}
@media(max-width:780px){.shell{grid-template-columns:1fr}.sidebar{position:relative;height:auto;min-height:0;border-right:0;border-bottom:3px solid #fff;box-shadow:0 5px 0 var(--blue)}.topbar{padding:16px}.appView{padding:20px 16px}.twoCol{grid-template-columns:1fr}.formGrid{grid-template-columns:1fr}.metricGrid{grid-template-columns:1fr 1fr}.websiteRow{grid-template-columns:22px 1fr auto}.rowMeta{display:none}.photoSlots{grid-template-columns:1fr 1fr}.presetRow{grid-template-columns:1fr}}