/* ══════════════════════════════════════════════════════════════════
   INEXMAPS — Builder Styles
   Shares the same design token palette as landing.css.
   Accent: --accent. Change once to retheme.
══════════════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ── */
:root {
    --accent:          #3B6EF8;
    --accent-light:    #EEF2FF;
    --accent-hover:    #2855D6;
    --accent-shadow:   rgba(59, 110, 248, 0.28);

    --text-1:          #111827;
    --text-2:          #6B7280;
    --text-3:          #9CA3AF;

    --border:          #E5E7EB;
    --border-focus:    #93AAFD;

    --bg:              #FFFFFF;
    --bg-soft:         #F9FAFB;
    --bg-muted:        #F3F4F6;

    --nav-h:           68px;
    --topbar-h:        58px;
    --sidebar-w:       280px;

    --radius-xs:       6px;
    --radius-sm:       10px;
    --radius:          14px;

    --shadow-xs:       0 1px 2px rgba(0,0,0,.05);
    --shadow-sm:       0 1px 4px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04);
    --shadow-md:       0 4px 16px rgba(0,0,0,.08);

    --transition:      .16s ease;
}

/* ── Base ── */
html, body {
    min-height: 100%;
}
html {
    height: auto;          /* override map.css html{height:100%} */
    scrollbar-width: none; /* Firefox: hide page scrollbar */
}
html::-webkit-scrollbar { display: none; } /* Chrome/Safari: hide page scrollbar */
body {
    height: auto;          /* override map.css body{height:100%} */
    overflow-y: auto;      /* override map.css body{overflow:hidden} */
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text-1);
    background: var(--bg-soft);
    -webkit-font-smoothing: antialiased;
    font-size: 13px;
    line-height: 1.5;
}

/* Fix nav to top on builder page so there's no scroll gap */
.page-builder .nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 400;
}

/* ══════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════ */
.topbar {
    position: fixed;
    top: var(--nav-h); left: 0; right: 0;
    height: var(--topbar-h);
    background: #fff;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 16px;
    z-index: 300;
    box-shadow: var(--shadow-xs);
}

.topbar-logo {
    display: none;
}

.topbar-logo .logo-icon { width: 28px; height: 28px; }

.logo-text {
    font-size: 15px;
    font-weight: 500;
}

.logo-text strong { font-weight: 800; }

.topbar-tools {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Search */
.search-wrap {
    position: relative;
    flex-shrink: 0;
}

.search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--text-3);
    pointer-events: none;
}

.search-input {
    height: 34px;
    width: 200px;
    padding: 0 12px 0 32px;
    border: 1.5px solid var(--border);
    border-radius: 50px;
    background: var(--bg-soft);
    font-size: 13px;
    font-family: inherit;
    color: var(--text-1);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.search-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(59,110,248,.12);
    background: #fff;
}

.search-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    list-style: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 500;
}

.search-dropdown li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    transition: background var(--transition);
}

.search-dropdown li:hover,
.search-dropdown li[aria-selected="true"] {
    background: var(--bg-muted);
}

/* Topbar action buttons */
.topbar-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.icon-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: all var(--transition);
    flex-shrink: 0;
}

.icon-btn svg { width: 16px; height: 16px; }

.icon-btn:hover:not(:disabled) {
    background: var(--bg-muted);
    color: var(--text-1);
    border-color: var(--border-focus);
}

.icon-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}

.tb-btn {
    height: 34px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
    flex-shrink: 0;
}

.tb-btn svg { width: 14px; height: 14px; }

.tb-btn--ghost {
    color: var(--text-2);
    border-color: var(--border);
    background: transparent;
}

.tb-btn--ghost:hover {
    color: var(--text-1);
    background: var(--bg-muted);
}

.tb-btn--accent {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.tb-btn--accent:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: 0 2px 10px var(--accent-shadow);
    transform: translateY(-1px);
}


/* ══════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════ */
.builder-layout {
    display: flex;
    height: calc(100vh - var(--nav-h) - var(--topbar-h));
    margin-top: calc(var(--nav-h) + var(--topbar-h));
}

/* ── Sidebar ── */
.panel-sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--bg);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    padding: 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.panel-sidebar::-webkit-scrollbar { display: none; }
.panel-sidebar { scrollbar-width: none; }

/* ── Map canvas ── */
.map-canvas {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-soft);
    position: relative;
    overflow: hidden;
}

.map-canvas-inner {
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ══════════════════════════════════════════
   STATE CHIP
══════════════════════════════════════════ */
.state-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    transition: border-color var(--transition);
}

.state-chip-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-muted);
    border: 1.5px solid var(--border);
    flex-shrink: 0;
    transition: background var(--transition);
}

.state-chip-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.state-chip-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.state-chip-hint {
    font-size: 11px;
    color: var(--text-3);
}


/* ══════════════════════════════════════════
   PANEL GROUPS (accordions)
══════════════════════════════════════════ */
.panel-group {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: box-shadow var(--transition);
    flex-shrink: 0;
}

.panel-group:focus-within {
    box-shadow: 0 0 0 2px var(--border-focus);
}

.panel-group-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-soft);
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-1);
    text-align: left;
    border-radius: calc(var(--radius-sm) - 1.5px) calc(var(--radius-sm) - 1.5px) 0 0;
    transition: none;
}

/* Constant color — no hover change */
.panel-group-btn:hover,
.accordion-btn:hover {
    background: var(--bg-soft) !important;
    color: var(--text-1) !important;
}

.pg-icon {
    width: 16px;
    height: 16px;
    color: var(--text-3);
    flex-shrink: 0;
}

.pg-badge {
    font-size: 10px;
    font-weight: 600;
    color: var(--accent);
    background: var(--accent-light);
    padding: 2px 7px;
    border-radius: 50px;
    letter-spacing: .2px;
}

.pg-chevron {
    width: 14px;
    height: 14px;
    color: var(--text-3);
    margin-left: auto;
    flex-shrink: 0;
    transition: transform var(--transition);
}

.panel-group-btn[aria-expanded="true"] .pg-chevron {
    transform: rotate(180deg);
}

.panel-group-body {
    padding: 4px 12px 12px;
    border-top: 1px solid var(--border);
    background: #fff;
}


/* ══════════════════════════════════════════
   CONTROLS
══════════════════════════════════════════ */
.ctrl-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    min-height: 32px;
}

.ctrl-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    width: 90px;
    flex-shrink: 0;
}

.ctrl-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

/* Color swatch — single rounded rectangle, no inner browser box */
.color-wheel {
    width: 32px;
    height: 28px;
    padding: 0;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    cursor: pointer;
    background: none;
    flex-shrink: 0;
    transition: border-color var(--transition), box-shadow var(--transition);
    overflow: hidden;
    /* Remove browser chrome */
    -webkit-appearance: none;
    appearance: none;
}

/* Fill the entire swatch — no inner gap or border */
.color-wheel::-webkit-color-swatch-wrapper {
    padding: 0;
    border: 0;
    margin: 0;
}
.color-wheel::-webkit-color-swatch {
    border: 0 !important;
    border-radius: 0;  /* rely on parent overflow:hidden for corner clipping */
}
.color-wheel::-moz-color-swatch {
    border: 0 !important;
    border-radius: 0;
}

.color-wheel:hover { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(59,110,248,.12); }

/* Color hex input */
.color-hex {
    height: 28px;
    flex: 1;
    min-width: 0;
    max-width: 90px;
    padding: 0 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-family: 'Courier New', monospace;
    color: var(--text-1);
    background: var(--bg-soft);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.color-hex:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(59,110,248,.1);
    background: #fff;
}

/* Range slider */
.range-input {
    flex: 1;
    height: 4px;
    accent-color: var(--accent);
    cursor: pointer;
    min-width: 60px;
}

.range-val {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    width: 34px;
    text-align: right;
    flex-shrink: 0;
}

/* Select */
.select-input {
    flex: 1;
    height: 28px;
    padding: 0 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-family: inherit;
    color: var(--text-1);
    background: var(--bg-soft);
    outline: none;
    cursor: pointer;
    transition: border-color var(--transition);
}

.select-input:focus { border-color: var(--border-focus); }

/* Toggle / checkbox option */
.toggle-opt {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}

.toggle-opt input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
    cursor: pointer;
}

.check-inline {
    width: 14px;
    height: 14px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

/* Radio group */
.radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.radio-opt {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    cursor: pointer;
}

.radio-opt input { accent-color: var(--accent); cursor: pointer; }

.muted { opacity: .5; font-size: 11px; }

/* Check group */
.check-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.check-group.inline { flex-direction: row; gap: 10px; }

/* Section divider / label */
.section-divider {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text-3);
    margin: 10px 0 6px;
    display: block;
}

.section-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

/* Field rows */
.field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}

.field-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.field-input {
    width: 100%;
    height: 30px;
    padding: 0 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 13px;
    font-family: inherit;
    color: var(--text-1);
    background: var(--bg-soft);
    outline: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.field-input:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(59,110,248,.1);
    background: #fff;
}

.field-textarea {
    height: auto;
    padding: 8px 10px;
    resize: vertical;
    line-height: 1.5;
}

/* Hint text */
.hint-text {
    font-size: 11px;
    color: var(--text-3);
    line-height: 1.5;
    margin-top: 6px;
}

.hint-text code, .hint-text kbd {
    background: var(--bg-muted);
    border: 1px solid var(--border);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
}


/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 30px;
    padding: 0 14px;
    background: var(--accent);
    color: #fff;
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn-accent:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-accent.btn-sm { height: 26px; padding: 0 10px; font-size: 11px; }
.btn-accent.btn-full { width: 100%; }

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 30px;
    padding: 0 12px;
    background: transparent;
    color: var(--text-1);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}

.btn-secondary.btn-full { width: 100%; }

.btn-ghost-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 10px;
    background: transparent;
    color: var(--text-3);
    border: none;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: color var(--transition);
}

.btn-ghost-sm:hover { color: var(--text-1); }

.btn-link {
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 600;
    color: var(--accent);
    cursor: pointer;
    font-family: inherit;
    padding: 0;
}

.btn-link:hover { text-decoration: underline; }

.btn-add-field {
    width: 100%;
    height: 28px;
    background: transparent;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    font-family: inherit;
    transition: all var(--transition);
    margin-bottom: 8px;
}

.btn-add-field:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-light);
}

.btn-clear-legend {
    margin-left: auto;
    background: none;
    border: none;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-3);
    cursor: pointer;
    font-family: inherit;
    padding: 2px 6px;
    border-radius: 4px;
}

.btn-clear-legend:hover { color: #EF4444; background: #FFF1F2; }

/* Button groups */
.btn-pair {
    display: flex;
    gap: 6px;
}

.btn-trio {
    display: flex;
    gap: 6px;
}

.btn-trio .btn-secondary { flex: 1; }


/* ══════════════════════════════════════════
   PALETTE
══════════════════════════════════════════ */
.palette-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.palette-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    flex-shrink: 0;
}

.palette-swatch:hover,
.palette-swatch.selected {
    transform: scale(1.25);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    border-color: #fff;
    outline: 2px solid var(--accent);
}

/* Picker row */
.picker-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Preferred colours */
.pref-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.pref-swatch {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    cursor: pointer;
    border: 1.5px solid rgba(0,0,0,.18);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    transition: transform var(--transition), box-shadow var(--transition);
    flex-shrink: 0;
    padding: 0;
}

.pref-swatch:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(0,0,0,.28);
    border-color: #fff;
    outline: 2px solid var(--accent);
}

/* Pattern grid */
.pattern-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.btn-pattern {
    height: 26px;
    padding: 0 4px;
    font-size: 11px;
    font-weight: 600;
    font-family: inherit;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    transition: color var(--transition);
}

.btn-pattern:hover { color: var(--accent); }
.btn-pattern--active { color: var(--accent); text-decoration: underline; }

/* Suppress browser focus ring on SVG state paths */
.map-canvas-inner svg path:focus,
.map-canvas-inner svg rect:focus {
    outline: none;
}

@keyframes usim-march {
    to { stroke-dashoffset: -26; }
}

#usim-demo .usim-selected {
    stroke: #ffffff !important;
    stroke-width: 4 !important;
    stroke-dasharray: 16 10 !important;
    stroke-dashoffset: 0;
    animation: usim-march 0.55s linear infinite !important;
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.55)) !important;
}

/* ── Image fill ──────────────────────────────────────────────── */
.img-fill-state-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}
.img-fill-state-label {
    color: var(--text-3);
    white-space: nowrap;
}
#imgFillStateName {
    font-weight: 600;
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.image-fill-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.image-fill-preview {
    width: 100%;
    height: 68px;
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-soft) center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 11px;
    color: var(--text-3);
}

.btn-file-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    flex: 1;
}


/* ══════════════════════════════════════════
   DATA / SCALE
══════════════════════════════════════════ */
.data-textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-family: 'Courier New', monospace;
    color: var(--text-1);
    background: var(--bg-soft);
    outline: none;
    resize: vertical;
    line-height: 1.5;
    transition: border-color var(--transition);
}

.data-textarea:focus {
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(59,110,248,.1);
    background: #fff;
}

.import-status {
    font-size: 11px;
    margin-top: 4px;
    min-height: 14px;
    color: var(--text-2);
}

.scale-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.scale-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-2);
    width: 30px;
    flex-shrink: 0;
}

.scale-label--mid {
    display: flex;
    align-items: center;
    gap: 4px;
}

.scale-range-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.scale-range-input {
    width: 60px;
    height: 28px;
    padding: 0 8px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-family: inherit;
    color: var(--text-1);
    background: var(--bg-soft);
    outline: none;
}

.scale-range-input:focus { border-color: var(--border-focus); }

.scale-preview {
    height: 10px;
    border-radius: 50px;
    margin-top: 8px;
    background: linear-gradient(to right, #eff3ff, #08306b);
}


/* ══════════════════════════════════════════
   LEGEND
══════════════════════════════════════════ */
.legend-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legend-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-2);
}


/* ══════════════════════════════════════════
   MAP CANVAS & USIM OVERRIDES
══════════════════════════════════════════ */
/* Map wrapper fills the canvas — override map.css position:relative with absolute fill */
.map-canvas-inner > .usim-map-wrapper {
    position: absolute;
    inset: 0;
    border-radius: 0;
    padding: 0;
    flex: none;
}

/* Loading text */
.usim-map-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 14px;
    color: var(--text-3);
}

/* Map title overlay */
.map-title-overlay {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    pointer-events: none;
    padding: 12px 20px;
}

.map-title-text {
    font-size: 20px;
    font-weight: 800;
    color: inherit;
    line-height: 1.2;
}

.map-subtitle-text {
    font-size: 12px;
    color: inherit;
    opacity: 0.7;
    margin-top: 2px;
}

/* Zoom controls */
.zoom-controls {
    position: absolute;
    bottom: 16px;
    right: 16px;
    left: auto;    /* cancel map.css left:14px */
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 20;
}

.zoom-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-xs);
    border: 1.5px solid var(--border);
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition);
    font-size: 0;  /* hide any residual text */
}

.zoom-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.zoom-btn:hover,
.zoom-btn:hover:not(:disabled) {
    background: var(--bg-muted);
    color: var(--text-1);
    border-color: var(--border-focus);
}

.zoom-btn--reset svg { width: 13px; height: 13px; }

/* Tooltip */
.usim-tooltip {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
}

.usim-tooltip.visible { opacity: 1; }


/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-overlay[hidden] { display: none; }

.modal-card {
    background: #fff;
    border-radius: var(--radius);
    width: min(680px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

.modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border);
}

.modal-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-muted);
    border: 1.5px solid var(--border);
    flex-shrink: 0;
}

.modal-title {
    font-size: 16px;
    font-weight: 700;
    flex: 1;
}

.modal-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition), color var(--transition);
}

.modal-close:hover { background: var(--bg-muted); color: var(--text-1); }

.modal-img {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
    background: var(--bg-muted);
    display: block;
}

.modal-body {
    padding: 16px 18px;
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-2);
}

.modal-footer {
    padding: 12px 18px;
    border-top: 1px solid var(--border);
}

.modal-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}

.modal-link:hover { text-decoration: underline; }

/* Example data popup */
#exampleDataOverlay,
#themesPopupOverlay,
#labelExampleOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

#exampleDataOverlay[hidden],
#themesPopupOverlay[hidden] { display: none; }

/* labelExampleOverlay uses style.display directly — no [hidden] rule needed */

#exampleDataCard,
#labelExampleCard {
    background: #fff;
    border-radius: var(--radius);
    width: min(520px, 92vw);
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
}

#themesPopupCard {
    background: #fff;
    border-radius: var(--radius);
    width: min(580px, 94vw);
    max-height: 88vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
}

#exampleDataHeader,
#labelExampleHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    font-weight: 700;
    flex-shrink: 0;
}

#themesPopupHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-1);
    flex-shrink: 0;
}

#exampleDataHeader button,
#labelExampleHeader button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    font-size: 18px;
    cursor: pointer;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}

#themesPopupHeader button {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}

#exampleDataHeader button:hover,
#labelExampleHeader button:hover { background: var(--bg-muted); color: var(--text-1); }
#themesPopupHeader button:hover { background: var(--bg-muted); color: var(--text-1); }

.example-data-hint {
    padding: 12px 18px;
    font-size: 12px;
    color: var(--text-2);
    line-height: 1.6;
    border-bottom: 1px solid var(--border);
}

.example-data-tabs {
    display: flex;
    gap: 0;
    padding: 10px 18px 0;
}

.example-tab {
    height: 30px;
    padding: 0 14px;
    border: 1.5px solid var(--border);
    background: transparent;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--transition);
    color: var(--text-2);
}

.example-tab:first-child { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.example-tab:last-child  { border-radius: 0 var(--radius-xs) var(--radius-xs) 0; border-left: none; }

.example-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.example-data-textarea {
    flex: 1;
    margin: 10px 18px 0;
    padding: 10px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-family: 'Courier New', monospace;
    resize: none;
    min-height: 200px;
    color: #111827;
    background: #ffffff;
    outline: none;
    line-height: 1.6;
}

.example-data-textarea:focus { border-color: var(--border-focus); }

.example-data-footer {
    padding: 12px 18px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--border);
    margin-top: 10px;
}

/* Themes grid — dark background only for the cards area */
.themes-popup-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 20px;
    background: #1a2235;
    border-radius: 0 0 var(--radius) var(--radius);
}

.btn-theme {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: rgba(255,255,255,.06);
    border: 1.5px solid rgba(255,255,255,.10);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #d0dae8;
    text-align: left;
    transition: background .15s, border-color .15s, transform .1s;
}

.btn-theme:hover {
    background: rgba(255,255,255,.13);
    border-color: rgba(255,255,255,.28);
    color: #fff;
    transform: translateY(-1px);
}

.theme-swatch {
    display: flex;
    gap: 5px;
    width: 100%;
}

.theme-swatch span {
    flex: 1;
    height: 36px;
    border-radius: 6px;
    min-width: 20px;
    border: 1px solid rgba(255,255,255,.12);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR SECTION LABELS
═══════════════════════════════════════════════════════════════ */
.sidebar-section-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--text-3);
    padding: 14px 4px 5px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING TOUR
═══════════════════════════════════════════════════════════════ */
.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 9980;
    pointer-events: none;
    animation: tourFadeIn .3s ease both;
}
.tour-overlay.tour-exit {
    animation: tourFadeOut .25s ease both;
}
@keyframes tourFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes tourFadeOut { from { opacity: 1; } to { opacity: 0; } }

.tour-spotlight {
    position: fixed;
    border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.62);
    transition: top .35s cubic-bezier(.4,0,.2,1),
                left .35s cubic-bezier(.4,0,.2,1),
                width .35s cubic-bezier(.4,0,.2,1),
                height .35s cubic-bezier(.4,0,.2,1);
    z-index: 9981;
    pointer-events: none;
    outline: 2.5px solid rgba(255,255,255,.25);
    outline-offset: 0;
}

.tour-card {
    position: fixed;
    background: #fff;
    border-radius: 14px;
    padding: 22px 22px 16px;
    width: 290px;
    box-shadow: 0 16px 56px rgba(0,0,0,.24), 0 2px 8px rgba(0,0,0,.1);
    z-index: 9982;
    pointer-events: all;
    transition: top .35s cubic-bezier(.4,0,.2,1), left .35s cubic-bezier(.4,0,.2,1);
    animation: tourCardIn .3s ease both;
}
@keyframes tourCardIn {
    from { opacity: 0; transform: scale(.95) translateY(6px); }
    to   { opacity: 1; transform: none; }
}

.tour-dots {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 14px;
}
.tour-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border, #e5e7eb);
    transition: background .2s, width .2s, border-radius .2s;
    flex-shrink: 0;
}
.tour-dot.active {
    width: 20px;
    border-radius: 4px;
    background: var(--accent, #3b82f6);
}
.tour-dot.done { background: #86efac; }

.tour-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1, #111827);
    margin-bottom: 8px;
    line-height: 1.35;
}
.tour-desc {
    font-size: 0.875rem;
    color: var(--text-2, #6B7280);
    line-height: 1.65;
    margin-bottom: 18px;
}
.tour-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tour-skip {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--text-3, #9CA3AF);
    font-family: inherit;
    padding: 0;
    transition: color .15s;
}
.tour-skip:hover { color: var(--text-2, #6B7280); }
.tour-next {
    background: var(--accent, #3b82f6);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, transform .1s;
    white-space: nowrap;
}
.tour-next:hover {
    background: var(--accent-hover, #2563eb);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   PRICING MODAL
═══════════════════════════════════════════════════════════════ */
.pricing-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.pricing-overlay[hidden] { display: none; }

.pricing-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 24, 39, .45);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.pricing-sheet {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--border, #E5E7EB);
    border-radius: 20px;
    width: 100%;
    max-width: 880px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 36px 32px 28px;
    color: var(--text-1, #111827);
    box-shadow: 0 20px 60px rgba(0,0,0,.18);
}

.pricing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.pricing-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: var(--text-1, #111827);
    letter-spacing: -.02em;
}

.pricing-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border, #E5E7EB);
    background: var(--bg-muted, #F3F4F6);
    color: var(--text-2, #6B7280);
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.pricing-close:hover { background: var(--border, #E5E7EB); color: var(--text-1, #111827); }

.pricing-subtitle {
    font-size: .875rem;
    color: var(--text-2, #6B7280);
    margin-bottom: 28px;
}

.pricing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 680px) {
    .pricing-cards { grid-template-columns: 1fr; }
}

.pricing-card {
    position: relative;
    background: var(--bg-soft, #F9FAFB);
    border: 1.5px solid var(--border, #E5E7EB);
    border-radius: 14px;
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color .18s, box-shadow .18s, background .18s;
}
.pricing-card:hover {
    border-color: var(--accent, #3B6EF8);
    box-shadow: 0 4px 20px rgba(59,110,248,.12);
    background: #fff;
}

.pricing-card--highlight {
    border-color: var(--accent, #3B6EF8);
    background: var(--accent-light, #EEF2FF);
    box-shadow: 0 4px 20px rgba(59,110,248,.12);
}
.pricing-card--highlight:hover {
    box-shadow: 0 6px 28px rgba(59,110,248,.2);
}

.pricing-card-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 3px 12px;
    border-radius: 20px;
    background: var(--accent, #3B6EF8);
    color: #fff;
    white-space: nowrap;
}
.pricing-card-badge--gold  { background: #B45309; }
.pricing-card-badge--muted { background: var(--text-3, #9CA3AF); }

.pricing-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--accent-light, #EEF2FF);
    color: var(--accent, #3B6EF8);
    margin-top: 4px;
}

.pricing-card-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1, #111827);
    line-height: 1.3;
}

.pricing-card-desc {
    font-size: .82rem;
    color: var(--text-2, #6B7280);
    line-height: 1.6;
    flex: 1;
}

.pricing-card-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
}

.pricing-amount {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--text-1, #111827);
    letter-spacing: -.03em;
}

.pricing-per {
    font-size: .78rem;
    color: var(--text-2, #6B7280);
}

.pricing-buy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
    padding: 11px 16px;
    height: auto;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .15s, transform .1s, box-shadow .15s;
    border: none;
    white-space: nowrap;
}
.pricing-buy-btn:hover { opacity: .88; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(59,110,248,.25); }
.pricing-buy-btn:active { transform: translateY(0); opacity: 1; }

/* accent variant already from builder.css btn-accent; secondary via inline style */
a.pricing-buy-btn.btn-secondary {
    background: #fff;
    color: var(--text-1, #111827);
    border: 1.5px solid var(--border, #E5E7EB);
}
a.pricing-buy-btn.btn-secondary:hover {
    border-color: var(--accent, #3B6EF8);
    color: var(--accent, #3B6EF8);
    box-shadow: none;
}

.pricing-image-btns {
    display: flex;
    gap: 8px;
}
.pricing-image-btns .pricing-buy-btn { flex: 1; }

.pricing-footer-note {
    margin-top: 24px;
    font-size: .78rem;
    color: var(--text-3, #9CA3AF);
    text-align: center;
}
.pricing-footer-note a { color: var(--text-2, #6B7280); text-decoration: underline; }
.pricing-footer-note a:hover { color: var(--text-1, #111827); }