:root{
  --bg: #16171b;
  --panel: #1e2025;
  --panel-2: #24262c;
  --border: #33353c;
  --text: #eceef2;
  --text-dim: #9a9da5;
  --accent: #1b1bff;
  --accent-dim: rgba(27,27,255,0.20);
  --accent-2: #5b5bff;
  --danger: #e5605a;
  --font-head: "Space Grotesk", -apple-system, sans-serif;
  --font-body: "DM Sans", -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin:0; font-family: var(--font-body);
  background: var(--bg); color: var(--text); font-size: 15.5px;
}
a { color: inherit; }

/* ---------- Top navigation ---------- */
.topnav {
  position: sticky; top:0; z-index: 20;
  display:flex; align-items:center; gap:22px;
  padding: 16px 26px; border-bottom: 1px solid var(--border);
  background: rgba(22,23,27,0.92); backdrop-filter: blur(6px);
}
.topnav .brand {
  font-family: var(--font-head); font-size: 18px; font-weight:700; letter-spacing:-.02em;
  margin-right: 8px; text-decoration:none; color: var(--text); flex-shrink:0;
}
.topnav .brand span { color: var(--accent); }
.nav-toggle {
  display:none; margin-left:auto; flex-shrink:0;
  width:36px; height:36px; align-items:center; justify-content:center;
  flex-direction:column; gap:5px;
  background: var(--panel-2); border:1px solid var(--border); border-radius:8px; cursor:pointer;
}
.nav-toggle span { display:block; width:16px; height:2px; background: var(--text); border-radius:2px; transition: transform .15s, opacity .15s; }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.topnav nav { display:flex; gap:4px; flex-wrap:wrap; }
.topnav nav a {
  text-decoration:none; color: var(--text-dim); font-size: 13.5px; font-weight:500;
  padding: 8px 12px; border-radius:7px; transition: all .12s;
  white-space:nowrap;
}
.topnav nav a:hover { color: var(--text); background: var(--panel-2); }
.topnav nav a.active { color: #fff; background: var(--accent); }

/* ---------- Page shell for tool pages ---------- */
.layout { display:grid; grid-template-columns: 340px 1fr; min-height: calc(100vh - 62px); }
.sidebar {
  border-right: 1px solid var(--border); padding: 20px; overflow-y:auto;
  display:flex; flex-direction:column; gap: 24px;
}
.main {
  padding: 26px; display:flex; flex-direction:column; gap:18px;
  position: sticky; top: 60px; align-self: start;
  max-height: calc(100vh - 60px);
}

.section-title {
  font-family: var(--font-head);
  font-size: 11.5px; text-transform:uppercase; letter-spacing: .09em; color: var(--text-dim);
  margin: 0 0 10px 0; font-weight:600;
}

/* ---------- Dropzone / upload ---------- */
.dropzone {
  border: 1.5px dashed var(--border); border-radius: 12px; padding: 24px 14px;
  text-align:center; color: var(--text-dim); cursor:pointer; transition: all .15s;
}
.dropzone.drag { border-color: var(--accent); background: var(--accent-dim); color: var(--text); }
.dropzone strong { color: var(--text); font-family: var(--font-head); font-weight:600; }

/* ---------- Draggable item list ---------- */
.logo-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.logo-item {
  display:flex; align-items:center; gap:9px; background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 9px; padding: 7px 8px; cursor:grab;
}
.logo-item.dragging { opacity:.4; }
.logo-item .thumb {
  width:36px; height:36px; border-radius:7px; background:#fff; display:flex;
  align-items:center; justify-content:center; overflow:hidden; flex-shrink:0;
}
.logo-item .thumb.avatar { border-radius:50%; }
.logo-item .thumb img { max-width:100%; max-height:100%; }
.logo-item .name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.logo-item .name-input {
  flex:1; min-width:0; background: var(--panel); border:1px solid var(--border); color:var(--text);
  border-radius:6px; padding:5px 7px; font-size:12px; font-family: var(--font-body);
}
button.remove {
  background:none; border:none; color: var(--text-dim); cursor:pointer; font-size:16px; line-height:1;
  padding: 2px 4px; flex-shrink:0;
}
button.remove:hover { color: var(--danger); }
.empty-hint { color: var(--text-dim); font-size:13px; padding: 8px 2px; }

/* ---------- Stepper (scale %) ---------- */
.stepper {
  display:flex; align-items:stretch; border:1px solid var(--border); border-radius:7px;
  overflow:hidden; flex-shrink:0; background: var(--panel);
}
.stepper button {
  width:22px; background:var(--panel); border:none; color:var(--text-dim); cursor:pointer;
  font-family: var(--font-head); font-size:13px; line-height:1;
}
.stepper button:hover { color: var(--text); background: var(--border); }
.stepper input {
  width:38px; background:var(--panel); border:none; border-left:1px solid var(--border);
  border-right:1px solid var(--border); color:var(--text); text-align:center;
  font-family: var(--font-body); font-size:12px; padding:0; -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.stepper .unit { display:flex; align-items:center; padding:0 6px; font-size:11px; color:var(--text-dim); background:var(--panel); }

/* ---------- Controls ---------- */
.control-row { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.control-row label { font-size:13px; color: var(--text-dim); display:flex; justify-content:space-between; }
.control-row label b { color: var(--text); font-weight:600; font-family: var(--font-head); }
input[type=range] { width:100%; accent-color: var(--accent); }
input[type=text], select {
  background: var(--panel-2); border:1px solid var(--border); color:var(--text);
  border-radius:7px; padding:7px 8px; font-size:13px; width:100%; font-family: var(--font-body);
}
.seg { display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.seg button {
  flex:1; background: var(--panel-2); color: var(--text-dim); border:none; padding:8px 4px;
  font-size:12.5px; font-family: var(--font-body); font-weight:500; cursor:pointer; border-right:1px solid var(--border);
}
.seg button:last-child{ border-right:none; }
.seg button.active { background: var(--accent); color:#fff; }

.color-control { display:flex; align-items:center; gap:8px; }
.color-control .swatch {
  width:34px; height:34px; border-radius:9px; border:1px solid var(--border);
  cursor:pointer; padding:0; flex-shrink:0; position:relative;
}
.color-control .swatch::after {
  content:''; position:absolute; inset:0; border-radius:9px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.color-control .hex-input {
  flex:1; background: var(--panel-2); border:1px solid var(--border); color:var(--text);
  border-radius:7px; padding:7px 10px; font-size:13px; font-family: var(--font-body);
  text-transform: uppercase; letter-spacing: .02em;
}
.color-control .hex-input:focus { outline:none; border-color: var(--accent); }

/* ---------- Canvas preview ---------- */
.canvas-wrap {
  flex:1; border:1px solid var(--border); border-radius: 14px; padding: 26px;
  display:flex; align-items:center; justify-content:center;
  background-image: linear-gradient(45deg,#26282e 25%,transparent 25%), linear-gradient(-45deg,#26282e 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#26282e 75%), linear-gradient(-45deg,transparent 75%,#26282e 75%);
  background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  background-color: #1a1b1f;
  overflow:auto;
}
#preview { max-width:100%; }

.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.btn {
  background: var(--accent); color:#fff; border:none; border-radius:9px; padding: 11px 18px;
  font-family: var(--font-head); font-size:13.5px; font-weight:600; cursor:pointer;
}
.btn:hover { background: var(--accent-2); }
.btn.secondary { background: var(--panel-2); border:1px solid var(--border); color: var(--text); }
.btn.secondary:hover { background: var(--panel); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.toolbar .spacer { flex:1; }
.format-select {
  background: var(--panel-2); border:1px solid var(--border); color:var(--text);
  border-radius:9px; padding:10px 12px; font-size:13px; font-family: var(--font-body); width:auto;
}
.note { color: var(--text-dim); font-size:12.5px; line-height:1.6; }

/* ---------- Icon / flag library picker ---------- */
.library-btn {
  width:100%; background: var(--panel-2); border:1px dashed var(--border); color: var(--text);
  border-radius:10px; padding:10px; font-family: var(--font-body); font-size:13px; cursor:pointer;
  margin-top:10px; margin-bottom:20px;
}
.library-btn:hover { border-color: var(--accent); }
.modal-overlay {
  position:fixed; inset:0; background: rgba(10,10,12,0.7); z-index:100;
  display:flex; align-items:center; justify-content:center; padding: 30px;
}
.modal {
  background: var(--panel); border:1px solid var(--border); border-radius:14px;
  width: 100%; max-width: 640px; max-height: 80vh; display:flex; flex-direction:column;
  overflow:hidden;
}
.modal-header { padding: 16px 18px; border-bottom:1px solid var(--border); display:flex; gap:10px; align-items:center; }
.modal-header input {
  flex:1; background: var(--panel-2); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:9px 12px; font-size:14px; font-family: var(--font-body);
}
.modal-header button.close { background:none; border:none; color: var(--text-dim); font-size:20px; cursor:pointer; }
.modal-grid {
  display:grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap:8px;
  padding: 16px 18px; overflow-y:auto;
}
.modal-grid button {
  display:flex; flex-direction:column; align-items:center; gap:6px; background: var(--panel-2);
  border:1px solid var(--border); border-radius:10px; padding:10px 6px; cursor:pointer; color: var(--text-dim);
}
.modal-grid button:hover { border-color: var(--accent); color: var(--text); }
.modal-grid button svg { width:26px; height:26px; }
.modal-grid button .lbl { font-size:10.5px; text-align:center; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.modal-grid .flag-emoji { font-size:26px; line-height:1; }

/* ---------- Heading component (shared across templates) ---------- */
.heading-toggle { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.switch { position:relative; width:38px; height:22px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.switch .track {
  position:absolute; inset:0; background: var(--border); border-radius:20px; cursor:pointer; transition:.15s;
}
.switch .track::before {
  content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s;
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::before { transform: translateX(16px); }

/* ---------- Team Bar & KPI Bar specific list rows ---------- */
.logo-item .name-below-toggle { display:flex; align-items:center; gap:5px; flex-shrink:0; font-size:11px; color:var(--text-dim); }

.kpi-item { display:flex; flex-direction:column; gap:6px; background: var(--panel-2); border:1px solid var(--border); border-radius:9px; padding:10px; }
.kpi-item .kpi-row { display:flex; gap:6px; align-items:center; }
.kpi-item input { font-size:12.5px; padding:6px 8px; }
.kpi-icon-row { display:flex; align-items:center; gap:6px; }
.kpi-icon-row .library-btn { flex:1; padding:8px; font-size:12.5px; }
.icon-pill {
  flex:1; display:flex; align-items:center; gap:8px; background: var(--panel);
  border:1px solid var(--border); border-radius:8px; padding:7px 10px; color: var(--text);
  font-size:12.5px; font-family: var(--font-body); cursor:pointer; text-align:left;
}
.icon-pill:hover { border-color: var(--accent); }
.icon-pill svg { width:16px; height:16px; flex-shrink:0; }

/* ---------- Brand glow (decorative, homepage + subtle on tool pages) ---------- */
.brand-glow {
  position:absolute; top:0; left:0; right:0; height:520px; overflow:hidden;
  z-index:0; pointer-events:none;
}
.brand-glow::before, .brand-glow::after {
  content:''; position:absolute; border-radius:50%;
}
.brand-glow::before {
  width:560px; height:460px; right:-160px; top:-180px;
  background: radial-gradient(circle at 30% 30%, var(--accent), transparent 70%);
  filter: blur(90px); opacity:.55;
}
.brand-glow::after {
  width:460px; height:460px; right:220px; top:60px;
  background: radial-gradient(circle at 70% 70%, #4d4dff, transparent 70%);
  filter: blur(100px); opacity:.4;
}
.brand-glow-mark {
  position:absolute; top:24px; right:60px; width:260px; height:260px;
  opacity:.10; fill: var(--accent); transform: rotate(-8deg);
}
.brand-glow--subtle .brand-glow-mark { width:160px; height:160px; opacity:.07; top:14px; right:80px; }
.brand-glow-grain {
  position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.brand-glow--subtle { height: 280px; }
.brand-glow--subtle::before { opacity:.22; width:420px; height:340px; }
.brand-glow--subtle::after { opacity:.13; }

.hero { position:relative; z-index:1; }

/* ---------- Ad slots (placeholders — swap the inner content for real ad code) ---------- */
.ad-slot {
  max-width:970px; margin: 0 auto; padding: 0 26px;
}
.ad-slot .ad-slot-inner {
  display:flex; align-items:center; justify-content:center; min-height:90px;
  border:1px dashed var(--border); border-radius:10px; color: var(--text-dim);
  font-size:12px; letter-spacing:.03em; text-transform:uppercase;
}

/* ---------- Cookie consent banner ---------- */
.consent-banner {
  position:fixed; left:20px; right:20px; bottom:20px; z-index:200;
  max-width: 720px; margin: 0 auto;
  background: var(--panel); border:1px solid var(--border); border-radius:14px;
  padding: 18px 20px; display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.consent-banner p { margin:0; flex:1; min-width:220px; color: var(--text-dim); font-size:13px; line-height:1.55; }
.consent-banner a { color: var(--text); text-decoration:underline; }
.consent-actions { display:flex; gap:10px; flex-shrink:0; }
.consent-actions .btn { padding: 9px 16px; font-size:12.5px; }

/* ---------- Simple content pages (privacy policy, etc.) ---------- */
.simple-page { max-width: 760px; margin: 0 auto; padding: 50px 26px 70px; }
.simple-page h1 { font-family: var(--font-head); font-size:32px; margin:0 0 8px; }
.simple-page .updated { color: var(--text-dim); font-size:13px; margin: 0 0 36px; }
.simple-page h2 { font-family: var(--font-head); font-size:19px; margin: 34px 0 10px; }
.simple-page p, .simple-page li { color: var(--text-dim); font-size:14.5px; line-height:1.7; }
.simple-page ul { padding-left: 20px; }
.simple-page strong { color: var(--text); }
.hero { padding: 64px 26px 40px; max-width: 920px; margin:0 auto; text-align:center; }
.hero--compact { padding: 30px 26px 22px; }
.hero--compact h1 { font-size: 26px; }
.hero--compact .lead { font-size: 14px; max-width: 640px; margin: 0 auto; }
.hero h1 { font-family: var(--font-head); font-size: 40px; font-weight:700; letter-spacing:-.02em; margin: 0 0 14px; }
.hero p.lead { color: var(--text-dim); font-size:16.5px; line-height:1.6; max-width:640px; margin:0 auto; }
.tool-frame { border-top: 1px solid var(--border); }
.content-section { max-width: 760px; margin: 0 auto; padding: 56px 26px; }
.content-section h2 { font-family: var(--font-head); font-size:24px; margin: 0 0 14px; }
.content-section p { color: var(--text-dim); line-height:1.7; font-size:15px; }
.faq-item { border-bottom:1px solid var(--border); padding: 18px 0; }
.faq-item h3 { font-family: var(--font-head); font-size:16px; margin:0 0 8px; font-weight:600; }
.faq-item p { color: var(--text-dim); line-height:1.6; font-size:14.5px; margin:0; }

.tool-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:16px; max-width:1000px; margin: 0 auto 60px; padding: 0 26px; }
.tool-card {
  display:block; text-decoration:none; background: var(--panel); border:1px solid var(--border);
  border-radius:14px; padding:22px; transition: all .15s;
}
.tool-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.tool-card h3 { font-family: var(--font-head); color: var(--text); font-size:17px; margin:0 0 8px; }
.tool-card p { color: var(--text-dim); font-size:13.5px; line-height:1.5; margin:0; }

/* ---------- Footer ---------- */
footer.site-footer { border-top:1px solid var(--border); padding: 44px 26px 30px; }
.footer-grid {
  max-width: 1080px; margin:0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:36px;
}
.footer-grid h4 { font-family: var(--font-head); font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color: var(--text-dim); margin:0 0 14px; }
.footer-grid ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer-grid a { text-decoration:none; color: var(--text-dim); font-size:13.5px; }
.footer-grid a:hover { color: var(--text); }
.footer-grid p { color: var(--text-dim); font-size:13.5px; line-height:1.6; margin:0 0 14px; }
.footer-bottom {
  max-width:1080px; margin: 32px auto 0; padding-top:20px; border-top:1px solid var(--border);
  color: var(--text-dim); font-size:12.5px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;
}
.footer-bottom .brand { font-family: var(--font-head); color: var(--text); font-weight:700; }
.footer-bottom .brand span { color: var(--accent); }

@media (max-width: 760px) {
  .topnav nav {
    display:none; position:absolute; top:100%; left:0; right:0; z-index:50;
    flex-direction:column; gap:2px; padding:10px;
    background: var(--panel); border-bottom:1px solid var(--border);
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  }
  .topnav nav.open { display:flex; }
  .topnav nav a { padding: 12px 14px; }
  .nav-toggle { display:flex; }
}

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { border-right:none; border-bottom:1px solid var(--border); }
  .main { position: static; max-height: none; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero { padding: 44px 20px 30px; }
  .hero h1 { font-size: 26px; }
  .hero p.lead { font-size: 14.5px; }
  .canvas-wrap { padding: 16px; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar .spacer { display:none; }
  .toolbar .btn, .toolbar .format-select { width:100%; }
  .modal-overlay { padding: 14px; }
  .modal { max-height: 85vh; }
  .modal-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .consent-banner { left:12px; right:12px; bottom:12px; padding:14px 16px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap:6px; }
}