:root {
  --bg: #060a12;
  --panel: rgba(12, 19, 32, 0.88);
  --panel-2: #0d1625;
  --line: #1c2b40;
  --muted: #8fa0b8;
  --text: #f6f8fc;
  --blue: #4d7cff;
  --purple: #7b46ff;
  --green: #34d399;
  --radius: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(circle at top, #111a2c 0, var(--bg) 45%); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select { font: inherit; }
button { color: inherit; }
select { width: 100%; background:#08111e; border:1px solid #263851; border-radius:8px; color:white; padding:9px 10px; outline:none; }
select:focus { border-color:#4e82e9; box-shadow:0 0 0 3px rgba(78,130,233,.12); }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 210px 1fr; }
.sidebar { min-height: 100vh; padding: 22px 16px; border-right: 1px solid var(--line); background: rgba(5, 10, 18, .94); display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; }
.brand { display: flex; gap: 11px; align-items: center; }
.brand-mark { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-weight: 900; font-style: italic; background: linear-gradient(135deg, #213b66, #7b46ff); box-shadow: 0 0 28px rgba(97, 72, 255, .34); }
.brand strong { display: block; letter-spacing: .08em; font-size: 19px; }
.brand span { display: block; color: #67d5ff; font-size: 9px; letter-spacing: .22em; margin-top: 4px; }
.nav-list { display: grid; gap: 7px; }
.nav-item { border: 0; background: transparent; color: #b4c0d1; padding: 12px 13px; border-radius: 11px; text-align: left; cursor: pointer; display: flex; gap: 12px; align-items: center; }
.nav-item:hover { background: #101b2c; color: white; }
.nav-item.active { background: linear-gradient(90deg, #2256ff, #7444ff); color: white; box-shadow: 0 10px 28px rgba(70, 68, 255, .22); }
.sidebar-card { margin-top: auto; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, rgba(40,60,98,.32), rgba(10,16,27,.65)); }
.sidebar-card strong { display:block; margin: 5px 0; }
.sidebar-card p { color: var(--muted); font-size: 12px; line-height: 1.5; margin:0; }
.workspace { min-width: 0; }
.topbar { min-height: 68px; padding: 12px 18px; border-bottom: 1px solid var(--line); background: rgba(7, 12, 21, .78); backdrop-filter: blur(20px); display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:10; }
.mode-tabs { display:flex; padding:4px; background:#08101d; border:1px solid var(--line); border-radius:12px; }
.mode-tab { border:0; background:transparent; padding:10px 18px; border-radius:9px; cursor:pointer; color:var(--muted); }
.mode-tab.active { background:linear-gradient(90deg,#2f59d5,#6e43db); color:white; }
.topbar-actions { display:flex; align-items:center; gap:10px; color:var(--muted); font-size:13px; flex-wrap: wrap; }
.status-dot { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
.ghost-btn { background:#0b1422; border:1px solid var(--line); color:#c8d4e4; border-radius:10px; padding:9px 13px; cursor:pointer; }
.ghost-btn:hover { border-color:#41618a; }
.builder-grid { display:grid; grid-template-columns: 360px minmax(300px, 430px) minmax(480px, 1fr); gap:14px; padding:14px; align-items:start; }
.panel { border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, rgba(14,23,38,.94), rgba(7,13,23,.94)); box-shadow:0 18px 45px rgba(0,0,0,.22); }
.controls-panel { padding:15px; max-height:calc(100vh - 96px); overflow:auto; }
.section-block { padding:13px 0 15px; border-bottom:1px solid rgba(42,60,82,.55); }
.section-block:first-child { padding-top:0; }
.section-block:last-child { border-bottom:0; }
.section-title { font-size:12px; text-transform:uppercase; letter-spacing:.09em; font-weight:800; color:#b9c7db; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.section-title span { width:21px; height:21px; border-radius:7px; display:grid; place-items:center; background:#15243a; color:#7ca5ff; }
.subsection-title { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#90a7c9; font-weight:800; margin:14px 0 10px; }
.chip-grid, .type-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.wide-grid { grid-template-columns:repeat(2,1fr); }
.choice-chip, .type-card { border:1px solid #24364f; background:#0a1321; color:#c4d0df; border-radius:10px; padding:10px 9px; cursor:pointer; font-size:12px; }
.choice-chip.active, .type-card.active { border-color:#54c8ff; background:linear-gradient(145deg,rgba(46,92,177,.34),rgba(66,45,132,.24)); color:white; box-shadow:inset 0 0 0 1px rgba(118,213,255,.1); }
.type-card.special.active { border-color:#4cda8b; background:linear-gradient(145deg,rgba(34,124,100,.36),rgba(67,70,181,.22)); }
.form-stack { display:grid; gap:9px; }
label { display:grid; gap:6px; color:#96a8c0; font-size:11px; }
input { width:100%; background:#08111e; border:1px solid #263851; border-radius:8px; color:white; padding:9px 10px; outline:none; }
input:focus { border-color:#4e82e9; box-shadow:0 0 0 3px rgba(78,130,233,.12); }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.upload-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.single-upload-gap { grid-template-columns:1fr; }
.upload-box { min-height:94px; padding:11px; border:1px dashed #36506e; border-radius:11px; display:grid; place-items:center; text-align:center; cursor:pointer; background:#091321; }
.upload-box:hover { border-color:#5b91e8; }
.upload-box input { display:none; }
.upload-box small { color:#6f8199; }
.upload-box.wide { grid-column:1/-1; min-height:72px; grid-template-columns:auto 1fr; column-gap:10px; text-align:left; justify-content:start; }
.upload-box.wide small { grid-column:2; }
.upload-icon { font-size:20px; color:#7fa7ff; }
.preset-row { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.preset-row button { background:#08111e; border:1px solid #2b405c; border-radius:8px; padding:8px 4px; color:#9db0c9; cursor:pointer; font-size:11px; }
.preset-row button.active { background:#224e95; border-color:#5a93f0; color:white; }
.custom-size { margin-top:9px; }
.segmented-wrap { display:grid; gap:7px; margin-top:10px; color:#96a8c0; font-size:11px; }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.five-seg { grid-template-columns: repeat(5,1fr); }
#playerPosition { grid-template-columns:repeat(2,1fr); }
.segmented button { background:#08111e; border:1px solid #283c57; border-radius:8px; padding:8px; color:#8fa3bd; cursor:pointer; }
.segmented button.active { border-color:#6c7cff; background:#253061; color:white; }
.templates-panel, .preview-panel { padding:15px; }
.panel-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; gap: 10px; }
.panel-heading h2 { margin:2px 0 0; font-size:18px; }
.eyebrow { color:#6fe3be; letter-spacing:.12em; font-size:9px; font-weight:800; }
.template-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.template-card { border:1px solid #20334c; border-radius:12px; background:#0a1320; padding:7px; text-align:left; cursor:pointer; }
.template-card.active { border-color:#4cda8b; box-shadow:0 0 0 2px rgba(76,218,139,.12); }
.template-card strong { display:block; font-size:12px; margin:7px 3px 2px; }
.template-card small { color:#72859e; margin:0 3px 4px; display:block; }
.thumb { aspect-ratio:16/10; border-radius:8px; overflow:hidden; display:grid; place-items:center; font-size:24px; font-weight:1000; letter-spacing:-.05em; color:white; position:relative; }
.thumb::before, .thumb::after { content:""; position:absolute; inset:8% 52% 8% 5%; border:2px solid rgba(255,255,255,.18); border-radius:9px; }
.thumb::after { inset:8% 5% 8% 52%; }
.thumb span { z-index:2; text-shadow:0 3px 12px black; }
.thumb.cricket { background:radial-gradient(circle at 50% 85%,#29a95d 0 10%,transparent 35%),linear-gradient(135deg,#123a69,#07223d 50%,#78430c); }
.thumb.football { background:linear-gradient(135deg,#0a3b7a,#101d45 48%,#a92032); }
.thumb.table-tennis { background:radial-gradient(circle,#8c2cff,#10172c 60%); }
.thumb.casino { background:radial-gradient(circle at 70% 35%,#d148ff,#21123f 45%,#090b18); }
.thumb.gaming { background:linear-gradient(135deg,#0b4768,#0b1527 50%,#d35c1c); }
.thumb.shield { background:linear-gradient(135deg,#0e294a,#092138 40%,#4d2e6b); }
.tip-card { margin-top:12px; border:1px solid #20344e; color:#8093ac; padding:12px; font-size:12px; border-radius:11px; background:#091321; }
.preview-panel { position:sticky; top:82px; }
.preview-heading { margin-bottom:11px; }
.dimension-badge { color:#8fa2ba; font-size:12px; border:1px solid #243850; background:#08111d; border-radius:9px; padding:7px 10px; }
.canvas-stage { min-height:300px; display:flex; align-items:center; justify-content:center; padding:10px; background:repeating-conic-gradient(#0a101a 0 25%,#0d1521 0 50%) 50%/18px 18px; border-radius:12px; border:1px solid #1e3048; overflow:hidden; }
#posterCanvas { max-width:100%; max-height:58vh; display:block; border-radius:7px; box-shadow:0 20px 50px rgba(0,0,0,.52); }
.preview-actions { display:grid; gap:8px; margin-top:10px; }
.preview-actions-five { grid-template-columns:repeat(5,1fr); }
.action-btn { min-height:62px; background:#091321; border:1px solid #263a54; border-radius:10px; color:#d5deeb; display:flex; justify-content:center; align-items:center; gap:8px; cursor:pointer; }
.action-btn span { display:grid; text-align:left; font-size:11px; }
.action-btn small { color:#6f829c; font-size:9px; margin-top:3px; }
.action-btn.primary { background:linear-gradient(120deg,#6347ef,#19c98d); border-color:transparent; }
.action-btn.primary small { color:#dafbef; }
.preview-footer { display:flex; justify-content:space-between; gap:10px; margin-top:10px; color:#6f8299; font-size:10px; }
.mode-section { display:none; }
.mode-section.is-active { display:block; }
.hidden { display:none !important; }
.modal-overlay { position: fixed; inset: 0; background: rgba(3,7,14,.68); backdrop-filter: blur(6px); z-index: 120; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.show { display: flex; }
.modal-card { width: min(980px, 100%); max-height: 86vh; overflow: auto; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(14,23,38,.97), rgba(7,13,23,.97)); box-shadow: 0 24px 60px rgba(0,0,0,.35); padding: 18px; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.modal-header h3 { margin: 4px 0 0; font-size: 24px; }
.saved-designs-list { display: grid; gap: 12px; }
.saved-empty { padding: 24px; text-align: center; color: #8ea0b7; border: 1px dashed #2a3d59; border-radius: 14px; background: #091321; }
.saved-card { display: grid; grid-template-columns: 1fr auto; gap: 14px; border: 1px solid #22344c; border-radius: 14px; padding: 14px; background: #0a1320; }
.saved-card strong { display: block; font-size: 15px; }
.saved-meta { color: #8da2bf; font-size: 12px; line-height: 1.6; margin-top: 4px; }
.saved-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.saved-actions button { min-width: 92px; background:#08111e; border:1px solid #2c4261; border-radius:10px; padding:9px 12px; color:#d8e2ef; cursor:pointer; }
.saved-actions button.primary { background: linear-gradient(120deg,#2256ff,#5f46ff); border-color: transparent; }
.saved-actions button.danger { background: #251018; border-color: #5d2435; color: #ffd1d9; }
.toast { position:fixed; right:18px; bottom:18px; z-index:130; padding:12px 16px; border-radius:10px; background:#18243a; border:1px solid #355176; color:white; transform:translateY(30px); opacity:0; pointer-events:none; transition:.25s ease; max-width: 320px; }
.toast.show { transform:translateY(0); opacity:1; }
@media (max-width: 1500px) { .builder-grid { grid-template-columns:340px 360px minmax(430px,1fr); } }
@media (max-width: 1280px) { .preview-actions-five { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 1180px) { .app-shell { grid-template-columns:74px 1fr; } .brand div:last-child,.nav-item:not(.active){font-size:0}.nav-item{justify-content:center}.sidebar-card{display:none}.builder-grid{grid-template-columns:360px 1fr}.preview-panel{grid-column:1/-1;position:static}.controls-panel{max-height:none}.templates-panel{min-height:auto}.topbar-actions span{display:none} }
@media (max-width: 760px) { .app-shell{display:block}.sidebar{min-height:auto;position:static;display:none}.builder-grid{grid-template-columns:1fr;padding:8px}.topbar{position:static;flex-direction:column;align-items:stretch;gap:10px}.controls-panel{max-height:none}.template-grid{grid-template-columns:repeat(2,1fr)}.preview-actions-five{grid-template-columns:repeat(2,1fr)}.wide-grid,.chip-grid,.type-grid,.upload-grid,.two-col,.preset-row,.segmented,.five-seg{grid-template-columns:1fr 1fr}.preview-footer{display:block}.saved-card{grid-template-columns:1fr}.modal-header{flex-direction:column;align-items:flex-start} }

/* V4 interactive editor */
.editor-help { color:#7f93ae; font-size:11px; line-height:1.55; margin-bottom:10px; padding:10px; border:1px solid #20344c; background:#091321; border-radius:10px; }
.layer-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.layer-grid button { background:#08111e; border:1px solid #2a405d; border-radius:9px; padding:9px 7px; color:#9eb0c7; cursor:pointer; font-size:10px; }
.layer-grid button.active { border-color:#4ed6a0; background:linear-gradient(145deg,rgba(34,124,100,.30),rgba(50,74,150,.22)); color:#fff; }
.selected-element-card { margin-top:10px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:#091321; border:1px solid #20344c; border-radius:10px; padding:10px; color:#8396b0; font-size:10px; }
.selected-element-card strong { color:#fff; font-size:11px; }
.range-field { margin-top:11px; display:grid; grid-template-columns:1fr auto; gap:7px; align-items:center; }
.range-field input[type="range"] { grid-column:1/-1; padding:0; border:0; box-shadow:none; accent-color:#5c7cff; background:transparent; }
.range-field span { color:#dbe5f2; font-size:10px; }
.check-row { margin-top:10px; display:flex; grid-template-columns:none; align-items:center; gap:8px; color:#a3b2c6; }
.check-row input { width:15px; height:15px; padding:0; accent-color:#4d7cff; }
.nudge-grid { margin-top:11px; display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.nudge-grid button,.editor-buttons button { background:#08111e; border:1px solid #2a405d; border-radius:9px; padding:8px; color:#c6d2e2; cursor:pointer; }
.editor-buttons { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:7px; }
.editor-buttons button:last-child { color:#ffd0d9; border-color:#5a2a3b; background:#25111a; }
.preview-actions-grid { grid-template-columns:repeat(4,1fr); }
#posterCanvas { touch-action:none; cursor:default; }
#posterCanvas.is-editing { cursor:move; }
@media (max-width:1280px){ .preview-actions-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .preview-actions-grid{grid-template-columns:repeat(2,1fr);} .layer-grid{grid-template-columns:repeat(2,1fr);} }

/* Phase 1 account integration */
a.nav-item,a.ghost-btn,a.action-btn{text-decoration:none}.user-badge{padding:8px 10px;border:1px solid #27405e;border-radius:9px;background:#0a1422;color:#d9e4f1;font-size:12px}.action-btn.account-save{background:linear-gradient(120deg,#174b88,#16a67b);border-color:transparent}.action-btn:disabled{opacity:.65;cursor:wait}

/* Phase 1B additions */
input[type="color"] { min-height: 42px; padding: 4px; cursor: pointer; }
.template-filter-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:10px; }
.template-filter-row select { font-size:11px; }
.upload-library-card { width:min(1080px,100%); }
.library-toolbar { display:grid; grid-template-columns:minmax(200px,1.3fr) minmax(220px,1.3fr) auto; gap:10px; align-items:end; margin-bottom:14px; padding:12px; border:1px solid #243750; border-radius:13px; background:#091321; }
.library-upload-label input { min-height:42px; padding:8px; }
.upload-library-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.library-item { border:1px solid #223650; border-radius:13px; background:#08111e; overflow:hidden; }
.library-thumb { aspect-ratio:4/3; background:#050a12; display:grid; place-items:center; overflow:hidden; cursor:pointer; }
.library-thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.library-item-body { padding:10px; display:grid; gap:8px; }
.library-name { font-size:11px; color:#c9d6e6; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.library-meta { font-size:10px; color:#71859f; }
.library-actions { display:grid; grid-template-columns:1fr auto; gap:7px; }
.library-actions button { border:1px solid #294361; border-radius:8px; padding:8px; background:#0d1a2b; cursor:pointer; font-size:11px; }
.library-actions .danger { background:#29111a; border-color:#5f2638; color:#ffd7df; }
.library-empty { grid-column:1/-1; padding:24px; border:1px dashed #2e4563; border-radius:14px; color:#8ea2bc; text-align:center; }
.template-loading { grid-column:1/-1; padding:18px; text-align:center; color:#8da2bd; }
@media(max-width:1100px){.upload-library-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.library-toolbar{grid-template-columns:1fr}.upload-library-grid{grid-template-columns:repeat(2,1fr)}.template-filter-row{grid-template-columns:1fr}}
@media(max-width:480px){.upload-library-grid{grid-template-columns:1fr}}
.thumb { background: linear-gradient(135deg,#172b48,#0b1524 52%,#5b2f6c); }