:root {
  --azure:#0078d4; --azure-dark:#005a9e; --azure-light:#e8f4fd; --azure-mid:#b3d7f5;
  --bg:#f4f6f9; --surface:#fff; --surface2:#f8f9fb;
  --border:#d0d7e3; --border-light:#e8ecf2;
  --text:#1a2233; --text-muted:#6b7a99; --text-faint:#a0aec0;
  --success:#107c10; --warning:#d83b01; --free:#e9ecf2;
  --shadow:0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.05);
  --shadow-hover:0 4px 12px rgba(0,120,212,.15);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'IBM Plex Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

/* HEADER */
header{background:var(--surface);border-bottom:2px solid var(--azure);padding:0 28px;
  display:flex;align-items:center;gap:14px;height:58px;position:sticky;top:0;z-index:200;
  box-shadow:0 2px 8px rgba(0,120,212,.08)}
.hdr-logo{width:28px;height:28px;background:var(--azure);border-radius:6px;
  display:flex;align-items:center;justify-content:center}
.hdr-logo svg{width:17px;height:17px;fill:#fff}
header h1{font-size:15px;font-weight:600;letter-spacing:-.01em}
.hdr-badge{font-size:11px;color:var(--text-muted);background:var(--azure-light);
  padding:2px 9px;border-radius:12px;font-family:'IBM Plex Mono',monospace}

/* LAYOUT */
.app{display:grid;grid-template-columns:370px 1fr;min-height:calc(100vh - 58px)}

/* LEFT PANEL */
.panel-left{background:var(--surface);border-right:1px solid var(--border);
  overflow-y:auto;max-height:calc(100vh - 58px);position:sticky;top:58px}
.panel-left::-webkit-scrollbar{width:4px}
.panel-left::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

/* VNet tabs strip */
.vnet-tabs-wrap{border-bottom:1px solid var(--border);display:flex;align-items:stretch;
  background:var(--surface2);overflow:hidden}
.vnet-tabs{display:flex;align-items:stretch;overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--azure-mid) var(--surface2);flex:1;min-width:0}
.vnet-tabs::-webkit-scrollbar{height:4px}
.vnet-tabs::-webkit-scrollbar-track{background:var(--surface2)}
.vnet-tabs::-webkit-scrollbar-thumb{background:var(--azure-mid);border-radius:2px}
.vnet-tab{display:flex;align-items:center;gap:6px;padding:0 14px;
  height:40px;font-size:12px;font-weight:600;cursor:pointer;
  border-bottom:2px solid transparent;white-space:nowrap;
  color:var(--text-muted);transition:all .15s;flex-shrink:0}
.vnet-tab:hover{color:var(--azure);background:var(--azure-light)}
.vnet-tab.active{color:var(--azure);border-bottom-color:var(--azure);background:var(--azure-light)}
.vnet-tab .tab-dot{width:7px;height:7px;border-radius:50%}
.tab-remove{display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-left:5px;border-radius:3px;font-size:10px;
  color:var(--text-faint);line-height:1;transition:all .15s;flex-shrink:0}
.tab-remove:hover{color:#fff;background:var(--warning)}
.vnet-tab.active .tab-remove:hover{color:#fff}
.add-spoke-btn{display:flex;align-items:center;gap:4px;padding:0 12px;
  height:40px;font-size:11px;font-weight:600;cursor:pointer;
  color:var(--text-faint);border:none;border-left:1px solid var(--border);
  background:var(--surface2);white-space:nowrap;flex-shrink:0;
  transition:all .15s}
.add-spoke-btn:hover{color:var(--azure);background:var(--azure-light)}

/* Panel sections */
.ps{padding:16px 18px 0}
.ps:last-child{padding-bottom:18px}
.ps-label{font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:8px}

/* VNet name + CIDR inputs */
.vnet-name-wrap{display:flex;align-items:center;border:1.5px solid var(--border);
  border-radius:8px;overflow:hidden;background:var(--surface2);margin-bottom:8px;transition:border-color .2s}
.vnet-name-wrap:focus-within{border-color:var(--azure);background:#fff;box-shadow:0 0 0 3px rgba(0,120,212,.1)}
.vnet-name-wrap input{border:none;outline:none;background:transparent;
  font-family:'IBM Plex Sans',sans-serif;font-size:13px;font-weight:500;
  color:var(--text);padding:8px 10px;width:100%}
.vn-label{font-size:10px;font-weight:700;color:var(--text-faint);
  background:var(--surface2);padding:0 8px;white-space:nowrap;border-left:1px solid var(--border)}

.vnet-input-wrap{display:flex;align-items:center;border:1.5px solid var(--border);
  border-radius:8px;overflow:hidden;background:var(--surface2);transition:border-color .2s}
.vnet-input-wrap:focus-within{border-color:var(--azure);background:#fff;box-shadow:0 0 0 3px rgba(0,120,212,.1)}
.vnet-input-wrap input{border:none;outline:none;background:transparent;
  font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;
  color:var(--text);padding:8px 10px;width:100%}
.vnet-badge{font-size:10px;font-weight:600;color:var(--azure);background:var(--azure-light);
  padding:3px 9px;white-space:nowrap;border-left:1px solid var(--border);font-family:'IBM Plex Mono',monospace}
.vnet-meta{margin-top:5px;font-family:'IBM Plex Mono',monospace;font-size:10px;
  color:var(--text-muted);min-height:14px}
.vnet-meta.error{color:var(--warning)} .vnet-meta.ok{color:var(--success)}

/* Remove spoke btn */
.remove-spoke{display:flex;align-items:center;gap:5px;margin-top:8px;
  font-size:11px;font-weight:500;color:var(--text-faint);cursor:pointer;
  background:none;border:none;padding:0;transition:color .15s}
.remove-spoke:hover{color:var(--warning)}

.divider{height:1px;background:var(--border-light);margin:14px 0}

/* Category groups */
.cat-group{margin-bottom:3px}
.cat-header{display:flex;align-items:center;gap:7px;padding:5px 0;cursor:pointer;user-select:none}
.cat-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.cat-name{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;flex:1}
.cat-count{font-size:10px;color:var(--text-faint);font-family:'IBM Plex Mono',monospace}
.cat-chevron{width:13px;height:13px;color:var(--text-faint);transition:transform .2s;flex-shrink:0}
.cat-group.collapsed .cat-chevron{transform:rotate(-90deg)}
.cat-group.collapsed .cat-cards{display:none}
.cat-cards{display:flex;flex-direction:column;gap:4px;padding-bottom:6px}

/* Resource cards */
.resource-card{border:1.5px solid var(--border-light);border-radius:8px;background:var(--surface2);
  padding:9px 10px;cursor:pointer;transition:all .15s;display:flex;align-items:flex-start;gap:9px}
.resource-card:hover{border-color:var(--azure-mid);background:var(--azure-light)}
.resource-card.selected{border-color:var(--azure);background:var(--azure-light);box-shadow:var(--shadow-hover)}
.rc-check{width:15px;height:15px;border:1.5px solid var(--border);border-radius:4px;flex-shrink:0;
  margin-top:2px;position:relative;transition:all .15s;background:#fff}
.rc-check::after{content:'';position:absolute;left:3px;top:0;width:5px;height:8px;
  border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg);
  opacity:0;transition:opacity .1s}
.resource-card.selected .rc-check{background:var(--azure);border-color:var(--azure)}
.resource-card.selected .rc-check::after{opacity:1}
.rc-body{flex:1;min-width:0}
.rc-name{font-size:12px;font-weight:600;color:var(--text);line-height:1.3}
.rc-controls{display:flex;align-items:center;gap:5px;margin-top:6px;flex-wrap:wrap}
.rc-badge{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  padding:2px 6px;border-radius:4px;background:rgba(0,120,212,.1);color:var(--azure-dark)}
.rc-badge.locked{background:#edf0f5;color:var(--text-muted)}
.lock-icon{width:10px;height:10px;color:var(--text-faint)}
.cidr-select{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--azure-dark);
  padding:2px 4px;cursor:pointer;outline:none}
.cidr-select:focus{border-color:var(--azure)}
.rc-name-input{font-family:'IBM Plex Mono',monospace;font-size:10px;border:1px solid var(--border);
  border-radius:4px;padding:2px 6px;width:100%;color:var(--text);outline:none;
  background:#fff;margin-top:4px}
.rc-name-input:focus{border-color:var(--azure)}
.rc-name-input:disabled{background:var(--surface2);color:var(--text-muted);cursor:not-allowed}
.locked-tag{font-size:9px;font-weight:600;background:#edf0f5;color:var(--text-muted);
  padding:1px 5px;border-radius:3px;margin-left:4px;text-transform:uppercase;letter-spacing:.05em}
.deleg-tag{font-size:9px;font-weight:600;background:#f3edf9;color:#7b4f9e;
  padding:1px 5px;border-radius:3px;margin-left:2px}

/* RIGHT PANEL */
.panel-right{padding:22px 26px;overflow-y:auto}

/* VNet output tabs */
.output-vnet-tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.out-tab{display:flex;align-items:center;gap:6px;padding:6px 14px;
  border-radius:20px;border:1.5px solid var(--border);background:var(--surface);
  cursor:pointer;font-size:12px;font-weight:600;color:var(--text-muted);
  transition:all .15s}
.out-tab:hover{border-color:var(--azure-mid);color:var(--azure)}
.out-tab.active{border-color:var(--azure);background:var(--azure-light);color:var(--azure)}
.out-tab .tab-dot{width:7px;height:7px;border-radius:50%}

.output-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.output-title{font-size:17px;font-weight:600}
.output-vnet-pill{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--azure);
  background:var(--azure-light);padding:4px 12px;border-radius:20px;font-weight:600}

/* Stats */
.stats-row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.stat-card{background:var(--surface);border:1px solid var(--border-light);
  border-radius:10px;padding:11px 14px;flex:1;min-width:100px}
.stat-label{font-size:10px;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;color:var(--text-muted);margin-bottom:3px}
.stat-value{font-family:'IBM Plex Mono',monospace;font-size:19px;font-weight:600}
.stat-value.warn{color:var(--warning)} .stat-value.ok{color:var(--success)}

.overflow-banner{background:#fdf3f0;border:1.5px solid #f4b8a0;border-radius:8px;
  padding:9px 13px;font-size:12px;color:var(--warning);font-weight:500;
  margin-bottom:14px;display:none}
.overflow-banner.visible{display:block}

/* Table */
.subnet-table-wrap{background:var(--surface);border:1px solid var(--border-light);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse}
thead th{background:var(--surface2);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);
  padding:9px 12px;text-align:left;border-bottom:1px solid var(--border-light);white-space:nowrap}
tbody tr{border-bottom:1px solid var(--border-light);transition:background .1s}
tbody tr:last-child{border-bottom:none}
tbody tr:hover:not(.free-row){background:var(--azure-light)}
tbody td{padding:10px 12px;font-size:12px;vertical-align:middle}
.td-mono{font-family:'IBM Plex Mono',monospace;font-size:11px}
.free-row td{color:var(--text-faint);background:var(--free);font-style:italic}
.free-row .td-mono{color:var(--text-faint)}
.cat-pill{font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;white-space:nowrap}
.deleg-pill{font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;
  background:#f3edf9;color:#7b4f9e;white-space:nowrap;font-family:'IBM Plex Mono',monospace}
.no-deleg{font-size:11px;color:var(--text-faint)}
.usable-hosts{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600}

/* Empty state */
.empty-state{text-align:center;padding:52px 20px;color:var(--text-muted)}
.empty-state svg{width:44px;height:44px;color:var(--border);margin-bottom:14px}
.empty-state h3{font-size:14px;font-weight:600;color:var(--text-muted);margin-bottom:5px}
.empty-state p{font-size:12px}

/* Action buttons row */
.action-btns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copy-btn{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  padding:5px 12px;border-radius:6px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text-muted);cursor:pointer;transition:all .15s;
  display:flex;align-items:center;gap:5px}
.copy-btn:hover{border-color:var(--azure);color:var(--azure);background:var(--azure-light)}
.copy-btn.copied{border-color:var(--success);color:var(--success);background:#f0faf0}

/* export buttons consolidated into .export-menu-wrap */

/* ── MODE TABS (top-level) ── */
.mode-tabs{display:flex;align-items:stretch;gap:0;margin-left:auto}
.mode-tab{display:flex;align-items:center;gap:7px;padding:0 18px;height:58px;
  font-size:12px;font-weight:600;cursor:pointer;color:var(--text-muted);
  border-bottom:3px solid transparent;border-top:3px solid transparent;
  transition:all .15s;white-space:nowrap;background:none;border-left:none;border-right:none}
.mode-tab:hover{color:var(--azure);background:var(--azure-light)}
.mode-tab.active{color:var(--azure);border-bottom-color:var(--azure)}
.mode-tab svg{opacity:.6}
.mode-tab.active svg{opacity:1}

/* ── VISUAL SPLITTER ── */
#splitterView{display:none;flex-direction:column;min-height:calc(100vh - 58px);
  background:var(--bg);padding:28px}
#splitterView.active{display:flex}
.spl-top{background:var(--surface);border:1px solid var(--border-light);
  border-radius:12px;padding:20px 24px;margin-bottom:20px;
  box-shadow:var(--shadow);display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.spl-top label{font-size:12px;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.08em}
.spl-cidr-wrap{display:flex;align-items:center;gap:0;border:1.5px solid var(--border);
  border-radius:8px;overflow:hidden;background:var(--surface2);transition:border-color .2s}
.spl-cidr-wrap:focus-within{border-color:var(--azure);background:#fff;
  box-shadow:0 0 0 3px rgba(0,120,212,.1)}
.spl-cidr-wrap input{border:none;outline:none;background:transparent;
  font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500;
  color:var(--text);padding:8px 12px;width:160px}
.spl-apply{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  padding:8px 16px;background:var(--azure);color:#fff;border:none;border-radius:6px;
  cursor:pointer;transition:background .15s}
.spl-apply:hover{background:var(--azure-dark)}
.spl-meta{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-muted)}
.spl-meta.error{color:var(--warning)} .spl-meta.ok{color:var(--success)}
.spl-reset{font-size:11px;font-weight:600;color:var(--text-faint);background:none;
  border:1.5px solid var(--border);border-radius:6px;padding:6px 12px;cursor:pointer;
  font-family:'IBM Plex Mono',monospace;transition:all .15s}
.spl-reset:hover{color:var(--warning);border-color:var(--warning)}

.spl-table-wrap{background:var(--surface);border:1px solid var(--border-light);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.spl-table{width:100%;border-collapse:collapse}
.spl-table thead th{background:var(--surface2);font-size:10px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);
  padding:9px 14px;text-align:left;border-bottom:1px solid var(--border-light)}
.spl-table tbody tr{border-bottom:1px solid var(--border-light);transition:background .1s}
.spl-table tbody tr:last-child{border-bottom:none}
.spl-table tbody tr:hover{background:var(--azure-light)}
.spl-table td{padding:0;vertical-align:middle}
.spl-row-inner{display:flex;align-items:center;padding:9px 14px;gap:0}
.spl-indent{display:inline-block;background:repeating-linear-gradient(
  to right, var(--border-light) 0, var(--border-light) 1px, transparent 1px, transparent 12px);
  height:20px;flex-shrink:0}
.spl-cidr-cell{font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
  color:var(--azure);min-width:140px}
.spl-mask-cell{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-muted);
  min-width:120px}
.spl-range-cell{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-muted);
  flex:1;min-width:200px}
.spl-hosts-cell{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  min-width:90px;text-align:right}
.spl-name-input{font-family:'IBM Plex Sans',sans-serif;font-size:12px;
  border:1px solid transparent;border-radius:5px;padding:3px 7px;
  background:transparent;color:var(--text);width:150px;outline:none;transition:all .15s}
.spl-name-input:hover{border-color:var(--border);background:var(--surface2)}
.spl-name-input:focus{border-color:var(--azure);background:#fff}
.spl-btn{font-size:10px;font-weight:700;padding:3px 10px;border-radius:5px;
  border:1.5px solid;cursor:pointer;transition:all .15s;white-space:nowrap;
  font-family:'IBM Plex Mono',monospace}
.spl-divide{color:#107c10;border-color:#107c10;background:#f0faf0}
.spl-divide:hover{background:#107c10;color:#fff}
.spl-join{color:#d83b01;border-color:#d83b01;background:#fdf3f0}
.spl-join:hover{background:#d83b01;color:#fff}
.spl-btn:disabled{opacity:.3;cursor:not-allowed}
.spl-acts{display:flex;gap:5px;align-items:center;min-width:130px;justify-content:flex-end}
.spl-bar-wrap{height:16px;background:var(--border-light);border-radius:8px;
  overflow:hidden;flex:1;min-width:80px;max-width:120px}
.spl-bar{height:100%;border-radius:8px;transition:width .3s}
.spl-empty{text-align:center;padding:52px;color:var(--text-muted)}
.spl-empty svg{width:44px;height:44px;color:var(--border);margin-bottom:14px;display:block;margin-left:auto;margin-right:auto}
.spl-empty h3{font-size:14px;font-weight:600;margin-bottom:6px}
.spl-empty p{font-size:12px}

/* ── DEPLOYMENT TEMPLATES VIEW ── */
#deployView{display:none;flex-direction:column;min-height:calc(100vh - 58px);background:var(--bg)}
#deployView.active{display:flex}

.deploy-layout{display:grid;grid-template-columns:300px 1fr;flex:1;min-height:0}

/* Left config panel */
.deploy-left{background:var(--surface);border-right:1px solid var(--border);
  overflow-y:auto;padding:20px 18px;display:flex;flex-direction:column;gap:16px}
.deploy-left::-webkit-scrollbar{width:4px}
.deploy-left::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.deploy-section-title{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:10px}

/* Location selector */
.loc-global-wrap{border:1.5px solid var(--border);border-radius:8px;overflow:hidden;
  background:var(--surface2);display:flex;align-items:center;transition:border-color .2s}
.loc-global-wrap:focus-within{border-color:var(--azure);background:#fff;box-shadow:0 0 0 3px rgba(0,120,212,.1)}
.loc-global-wrap select,.loc-global-wrap input{border:none;outline:none;background:transparent;
  font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text);padding:8px 10px;width:100%}
.loc-label{font-size:10px;font-weight:700;color:var(--text-faint);background:var(--surface2);
  padding:0 8px;white-space:nowrap;border-left:1px solid var(--border)}

/* Per-VNet location override */
.vnet-loc-card{border:1px solid var(--border-light);border-radius:8px;padding:10px 12px;
  background:var(--surface2);margin-bottom:6px}
.vnet-loc-card-header{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.vnet-loc-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.vnet-loc-name{font-size:12px;font-weight:600;flex:1}
.vnet-loc-override{display:flex;align-items:center;gap:6px;margin-top:4px}
.vnet-loc-override input[type=checkbox]{accent-color:var(--azure);width:13px;height:13px;cursor:pointer}
.vnet-loc-override label{font-size:11px;color:var(--text-muted);cursor:pointer}
.vnet-loc-select-wrap{margin-top:6px;border:1.5px solid var(--azure-mid);border-radius:6px;
  overflow:hidden;background:#fff;display:flex}
.vnet-loc-select-wrap select{border:none;outline:none;background:transparent;
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text);padding:6px 8px;width:100%}

/* Template format tabs */
.tmpl-format-tabs{display:flex;gap:6px;flex-wrap:wrap}
.tmpl-tab{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:8px;
  border:1.5px solid var(--border);background:var(--surface);cursor:pointer;
  font-size:12px;font-weight:600;color:var(--text-muted);transition:all .15s;white-space:nowrap}
.tmpl-tab:hover{border-color:var(--azure-mid);color:var(--azure)}
.tmpl-tab.active{border-color:var(--azure);background:var(--azure-light);color:var(--azure)}
.tmpl-tab-dot{width:8px;height:8px;border-radius:50%}

/* Right code panel */
.deploy-right{display:flex;flex-direction:column;overflow:hidden}
.deploy-toolbar{display:flex;align-items:center;gap:10px;padding:14px 20px;
  background:var(--surface);border-bottom:1px solid var(--border-light);flex-shrink:0;flex-wrap:wrap}
.deploy-toolbar-title{font-size:13px;font-weight:600;flex:1}
.deploy-toolbar-meta{font-size:11px;color:var(--text-muted);font-family:'IBM Plex Mono',monospace}

.code-actions{display:flex;gap:7px}
.code-copy-btn,.code-dl-btn{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  padding:5px 12px;border-radius:6px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text-muted);cursor:pointer;transition:all .15s;
  display:flex;align-items:center;gap:5px;white-space:nowrap}
.code-copy-btn:hover{border-color:var(--azure);color:var(--azure);background:var(--azure-light)}
.code-copy-btn.copied{border-color:var(--success);color:var(--success);background:#f0faf0}
.code-dl-btn:hover{border-color:#5c3d9e;color:#5c3d9e;background:#f5f0fd}

/* Code blocks area - scrollable sections */
.code-sections{flex:1;overflow-y:auto;padding:20px}
.code-sections::-webkit-scrollbar{width:5px}
.code-sections::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

.code-section{margin-bottom:24px}
.code-section-header{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:8px}
.code-section-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);display:flex;align-items:center;gap:7px}
.code-section-label .cs-dot{width:8px;height:8px;border-radius:50%}
.code-section-copy{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  padding:3px 9px;border-radius:5px;border:1.5px solid var(--border);background:var(--surface);
  color:var(--text-faint);cursor:pointer;transition:all .15s}
.code-section-copy:hover{border-color:var(--azure);color:var(--azure)}
.code-section-copy.copied{border-color:var(--success);color:var(--success)}

.code-block{background:#1e2433;border-radius:10px;overflow:hidden;position:relative}
.code-block pre{padding:16px 18px;overflow-x:auto;font-family:'IBM Plex Mono',monospace;
  font-size:12px;line-height:1.65;color:#c9d1e0;white-space:pre;tab-size:2}
.code-block pre::-webkit-scrollbar{height:4px}
.code-block pre::-webkit-scrollbar-thumb{background:#3a4258;border-radius:2px}

/* Collapsible code sections */
.code-section-header{cursor:pointer;user-select:none}
.code-section-header:hover .code-section-label{color:var(--azure)}
.code-block{display:none}
.code-section.expanded .code-block{display:block}
.code-section-toggle{font-size:11px;font-weight:600;color:var(--text-faint);
  background:none;border:1.5px solid var(--border);border-radius:5px;
  padding:2px 9px;cursor:pointer;transition:all .15s;font-family:'IBM Plex Mono',monospace;
  flex-shrink:0}
.code-section-toggle:hover{border-color:var(--azure);color:var(--azure)}
.code-section.expanded .code-section-toggle{border-color:var(--azure);color:var(--azure)}
.code-section-chevron{transition:transform .18s;display:inline-block;margin-right:4px}
.code-section.expanded .code-section-chevron{transform:rotate(90deg)}

/* Syntax highlight colours */
.hl-kw{color:#79b8ff}   /* keywords: resource, param, var, module */
.hl-ty{color:#b392f0}   /* types: string, int, bool, object */
.hl-st{color:#9ecbff}   /* strings */
.hl-cm{color:#6a737d;font-style:italic}  /* comments */
.hl-fn{color:#e1c699}   /* function names / decorators */
.hl-nm{color:#f8c555}   /* names/identifiers */
.hl-op{color:#79b8ff}   /* operators */
.hl-nu{color:#f8c555}   /* numbers */
.hl-ps{color:#85e89d}   /* PS cmdlets */
.hl-cl{color:#79b8ff}   /* CLI az commands */
.hl-fl{color:#f97583}   /* flags --xxx */

/* Empty/warning states */
.deploy-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex:1;text-align:center;padding:60px 30px;color:var(--text-muted)}
.deploy-empty svg{width:52px;height:52px;color:var(--border);margin-bottom:18px}
.deploy-empty h3{font-size:16px;font-weight:600;margin-bottom:8px;color:var(--text-muted)}
.deploy-empty p{font-size:13px;max-width:380px;line-height:1.6}
.deploy-warn{background:#fdf3f0;border:1.5px solid #f4b8a0;border-radius:8px;
  padding:10px 14px;font-size:12px;color:var(--warning);margin-bottom:16px}

/* Subscription ID input */
.sub-id-wrap{display:flex;align-items:center;border:1.5px solid var(--border);
  border-radius:8px;overflow:hidden;background:var(--surface2);transition:border-color .2s}
.sub-id-wrap:focus-within{border-color:var(--azure);background:#fff;
  box-shadow:0 0 0 3px rgba(0,120,212,.1)}
.sub-id-wrap input{border:none;outline:none;background:transparent;
  font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
  color:var(--text);padding:8px 10px;width:100%;letter-spacing:.01em}
.sub-id-wrap input::placeholder{color:var(--text-faint)}
.sub-id-label{font-size:9px;font-weight:700;color:var(--text-faint);
  background:var(--surface2);padding:0 7px;white-space:nowrap;
  border-left:1px solid var(--border);letter-spacing:.05em}

/* Overlap checker */
.overlap-section{margin-top:4px}
.overlap-status{display:flex;align-items:center;gap:8px;padding:9px 12px;
  border-radius:8px;font-size:12px;font-weight:600;margin-bottom:6px}
.overlap-status.ok{background:#f0faf0;color:#107c10;border:1.5px solid #9dd49d}
.overlap-status.warn{background:#fdf3f0;color:var(--warning);border:1.5px solid #f4b8a0}
.overlap-status.na{background:var(--surface2);color:var(--text-faint);border:1.5px solid var(--border-light)}
.overlap-status svg{flex-shrink:0}
.overlap-pairs{display:flex;flex-direction:column;gap:4px}
.overlap-pair{background:#fdf3f0;border:1px solid #f4b8a0;border-radius:6px;
  padding:7px 10px;font-size:10px;font-family:'IBM Plex Mono',monospace;color:var(--warning);
  line-height:1.5}
.overlap-pair b{color:#a02000}
.deploy-blocked-banner{background:#fdf3f0;border:1.5px solid #f4b8a0;border-radius:8px;
  padding:10px 14px;font-size:12px;color:var(--warning);font-weight:600;
  margin-bottom:14px;display:none;align-items:center;gap:8px}
.deploy-blocked-banner.visible{display:flex}

/* ── PLANNER OVERLAP BANNER ── */
.planner-overlap-wrap{margin-bottom:14px}
.planner-overlap-header{display:flex;align-items:center;gap:8px;padding:10px 14px;
  border-radius:8px;font-size:12px;font-weight:600;cursor:default}
.planner-overlap-header.ok{background:#f0faf0;color:#107c10;border:1.5px solid #9dd49d}
.planner-overlap-header.warn{background:#fdf3f0;color:var(--warning);border:1.5px solid #f4b8a0;
  border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:none}
.planner-overlap-header svg{flex-shrink:0}
.planner-overlap-details{border:1.5px solid #f4b8a0;border-top:none;
  border-bottom-left-radius:8px;border-bottom-right-radius:8px;
  background:#fff8f6;padding:8px 10px;display:flex;flex-direction:column;gap:5px}
.planner-overlap-row{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;
  background:#fdf3f0;border-radius:6px;border:1px solid #f4b8a0}
.planner-overlap-type{font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;background:var(--warning);color:#fff;
  padding:2px 6px;border-radius:3px;white-space:nowrap;flex-shrink:0;margin-top:1px}
.planner-overlap-info{font-size:11px;font-family:'IBM Plex Mono',monospace;
  color:var(--text);line-height:1.5}
.planner-overlap-info span{color:var(--warning);font-weight:600}

/* Export dropdown */
.export-menu-wrap{position:relative;display:inline-flex}
.export-menu-btn{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
  padding:5px 10px 5px 12px;border-radius:6px;border:1.5px solid #1e6b39;
  background:#f0faf4;color:#1e6b39;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;gap:5px;white-space:nowrap;user-select:none}
.export-menu-btn:hover,.export-menu-btn.open{background:#1e6b39;color:#fff;border-color:#1e6b39}
.export-menu-btn .chevron{transition:transform .18s;flex-shrink:0}
.export-menu-btn.open .chevron{transform:rotate(180deg)}
.export-dropdown{position:absolute;top:calc(100% + 5px);right:0;
  background:var(--surface);border:1.5px solid var(--border);border-radius:8px;
  box-shadow:0 4px 18px rgba(0,0,0,.12);min-width:190px;z-index:300;
  overflow:hidden;display:none;flex-direction:column}
.export-dropdown.open{display:flex}
.export-dropdown-item{display:flex;align-items:center;gap:9px;padding:9px 13px;
  font-size:12px;font-weight:600;color:var(--text);cursor:pointer;
  transition:background .12s;border:none;background:none;width:100%;text-align:left;
  font-family:'IBM Plex Sans',sans-serif}
.export-dropdown-item:hover{background:var(--azure-light);color:var(--azure)}
.export-dropdown-item svg{flex-shrink:0;opacity:.7}
.export-dropdown-item:hover svg{opacity:1}
.export-dropdown-divider{height:1px;background:var(--border-light);margin:3px 0}

/* ── DARK MODE ── */
body.dark {
  --azure:#3aa0f3; --azure-dark:#60b4f8; --azure-light:#0d2137; --azure-mid:#1a3a55;
  --bg:#0f1117; --surface:#161b26; --surface2:#1c2333;
  --border:#2a3348; --border-light:#222840;
  --text:#e2e8f4; --text-muted:#8896b3; --text-faint:#4a5673;
  --success:#4ec94e; --warning:#f97316; --free:#1a2030;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.3);
  --shadow-hover:0 4px 12px rgba(58,160,243,.2);
}
body.dark header{box-shadow:0 2px 8px rgba(0,0,0,.4)}
body.dark .code-block{background:#0d1117}
body.dark .spl-table tbody tr:hover{background:var(--azure-light)}

/* Dark mode toggle */
.dark-toggle{display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;cursor:pointer;
  border:1.5px solid var(--border);background:var(--surface2);
  color:var(--text-muted);transition:all .15s;flex-shrink:0}
.dark-toggle:hover{border-color:var(--azure);color:var(--azure);background:var(--azure-light)}

/* ── NSG TOGGLE ON RESOURCE CARD ── */
.nsg-toggle-wrap{display:flex;align-items:center;gap:5px;margin-top:5px}
.nsg-toggle-wrap input[type=checkbox]{accent-color:var(--azure);width:12px;height:12px;cursor:pointer}
.nsg-toggle-wrap label{font-size:10px;color:var(--text-muted);cursor:pointer;
  font-family:'IBM Plex Mono',monospace}

/* ── RESET BUTTON ── */
.reset-vnet-btn{display:flex;align-items:center;gap:5px;margin-top:8px;
  font-size:11px;font-weight:500;color:var(--text-faint);cursor:pointer;
  background:none;border:1.5px solid var(--border);border-radius:6px;
  padding:5px 10px;transition:all .15s;font-family:'IBM Plex Sans',sans-serif}
.reset-vnet-btn:hover{color:var(--warning);border-color:var(--warning)}

/* ── PEERING SECTION ── */
.peering-section{padding:14px 18px;border-top:1px solid var(--border-light)}
.peering-section-title{font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:10px}
.peering-empty{font-size:11px;color:var(--text-faint);font-style:italic;padding:4px 0}

/* Add peering row — inline selects + Add button */
.peering-add-row{display:flex;align-items:center;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.peering-add-row .peering-select{flex:1;min-width:80px}
.peering-add-row .peering-add-confirm{display:flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;color:#fff;background:var(--azure);
  border:none;border-radius:6px;padding:5px 10px;cursor:pointer;
  transition:background .15s;white-space:nowrap;flex-shrink:0}
.peering-add-row .peering-add-confirm:hover{background:var(--azure-dark)}
.peering-add-row .pa-arrow{font-size:13px;color:var(--text-faint);flex-shrink:0}

/* Peering chip — collapsed view */
.peering-chip{border:1.5px solid var(--border-light);border-radius:8px;
  background:var(--surface2);margin-bottom:6px;overflow:hidden}
.peering-chip-header{display:flex;align-items:center;gap:8px;padding:8px 10px;cursor:default}
.peering-chip-name{font-size:11px;font-weight:700;font-family:'IBM Plex Mono',monospace;
  color:var(--azure);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peering-chip-edit{display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:600;color:var(--text-muted);cursor:pointer;
  background:none;border:1.5px solid var(--border);border-radius:5px;
  padding:2px 8px;transition:all .15s;flex-shrink:0}
.peering-chip-edit:hover{border-color:var(--azure);color:var(--azure);background:var(--azure-light)}
.peering-chip-edit.active{border-color:var(--azure);color:var(--azure);background:var(--azure-light)}
.peering-chip-remove{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:5px;font-size:13px;
  color:var(--text-faint);cursor:pointer;background:none;border:none;
  transition:all .15s;flex-shrink:0;line-height:1}
.peering-chip-remove:hover{color:#fff;background:var(--warning)}

/* Peering expanded options panel */
.peering-opts-panel{display:none;padding:0 10px 10px;border-top:1px solid var(--border-light)}
.peering-chip.expanded .peering-opts-panel{display:block}
.peering-chip.expanded{border-color:var(--azure-mid)}
.peering-directions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.peering-dir-col{background:var(--surface);border:1px solid var(--border-light);
  border-radius:6px;padding:8px}
.peering-dir-label{font-size:9px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.peering-opt{display:flex;align-items:center;gap:5px;margin-bottom:4px}
.peering-opt input[type=checkbox]{accent-color:var(--azure);width:12px;height:12px;cursor:pointer}
.peering-opt label{font-size:10px;color:var(--text-muted);cursor:pointer;line-height:1.3}

.peering-select{font-family:'IBM Plex Mono',monospace;font-size:11px;
  border:1px solid var(--border);border-radius:5px;background:var(--surface);
  color:var(--text);padding:4px 6px;outline:none;cursor:pointer;width:100%}
.peering-select:focus{border-color:var(--azure)}
.add-peering-btn{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  color:var(--azure);background:var(--azure-light);border:1.5px solid var(--azure-mid);
  border-radius:6px;padding:6px 12px;cursor:pointer;transition:all .15s;
  font-family:'IBM Plex Sans',sans-serif;margin-top:4px}
.add-peering-btn:hover{background:var(--azure);color:#fff}

/* ── SUMMARY VIEW ── */
.summary-view{padding:22px 26px;overflow-y:auto;display:none}
.summary-view.active{display:block}
.summary-vnet-block{background:var(--surface);border:1px solid var(--border-light);
  border-radius:12px;margin-bottom:20px;overflow:hidden;box-shadow:var(--shadow)}
.summary-vnet-header{display:flex;align-items:center;gap:10px;padding:12px 16px;
  background:var(--surface2);border-bottom:1px solid var(--border-light)}
.summary-vnet-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.summary-vnet-name{font-size:14px;font-weight:700;flex:1}
.summary-vnet-cidr{font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:var(--azure);background:var(--azure-light);padding:2px 10px;border-radius:12px}
.summary-vnet-rg{font-size:11px;color:var(--text-muted);font-family:'IBM Plex Mono',monospace}
.summary-subnet-row{display:flex;align-items:center;gap:0;padding:8px 16px;
  border-bottom:1px solid var(--border-light);font-size:12px}
.summary-subnet-row:last-child{border-bottom:none}
.summary-subnet-row:hover{background:var(--azure-light)}
.summary-sn-name{font-weight:600;min-width:220px}
.summary-sn-cidr{font-family:'IBM Plex Mono',monospace;color:var(--azure);
  font-weight:600;min-width:140px}
.summary-sn-range{font-family:'IBM Plex Mono',monospace;font-size:11px;
  color:var(--text-muted);flex:1}
.summary-sn-cat{font-size:10px;font-weight:600;padding:2px 7px;border-radius:10px;
  white-space:nowrap;margin-right:8px}
.summary-sn-nsg{font-size:10px;color:var(--text-faint);font-family:'IBM Plex Mono',monospace;
  min-width:160px}
.summary-sn-deleg{font-size:10px;color:#7b4f9e;font-family:'IBM Plex Mono',monospace;
  max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.summary-empty{text-align:center;padding:60px 20px;color:var(--text-muted)}
.summary-empty h3{font-size:15px;font-weight:600;margin-bottom:8px}
.summary-empty p{font-size:13px}

/* Summary peering section */
.summary-peering-block{background:var(--surface);border:1px solid var(--border-light);
  border-radius:12px;margin-bottom:20px;overflow:hidden;box-shadow:var(--shadow)}
.summary-peering-header{display:flex;align-items:center;gap:8px;padding:12px 16px;
  background:var(--surface2);border-bottom:1px solid var(--border-light);
  font-size:14px;font-weight:700}
.summary-peer-row{padding:10px 16px;border-bottom:1px solid var(--border-light);
  font-size:12px;display:flex;gap:12px;align-items:flex-start}
.summary-peer-row:last-child{border-bottom:none}
.summary-peer-name{font-family:'IBM Plex Mono',monospace;font-weight:600;
  color:var(--azure);min-width:280px}
.summary-peer-opts{font-size:11px;color:var(--text-muted);line-height:1.6}

/* ── SAVE/LOAD ── */
.session-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.session-btn{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  padding:4px 10px;border-radius:5px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--text-muted);cursor:pointer;
  transition:all .15s;display:flex;align-items:center;gap:4px}
.session-btn:hover{border-color:var(--azure);color:var(--azure);background:var(--azure-light)}
.session-btn.save-btn:hover{border-color:#107c10;color:#107c10;background:#f0faf0}


/* RT (Route Table) inline checkbox — mirrors NSG */
.rc-rt-check{display:flex;align-items:center;gap:4px;padding:2px 7px;
  border:1px solid var(--border);border-radius:4px;background:var(--surface);
  cursor:pointer;transition:all .15s;white-space:nowrap}
.rc-rt-check:hover{border-color:#b4720a;background:#fdf8ec}
.rc-rt-check.active{border-color:#b4720a;background:#fdf8ec}
.rc-rt-check input{accent-color:#b4720a;width:11px;height:11px;cursor:pointer;margin:0}
.rc-rt-check label{font-size:10px;font-weight:600;color:var(--text-muted);
  cursor:pointer;font-family:'IBM Plex Mono',monospace}
.rc-rt-check.active label{color:#b4720a}
.rt-name-row{display:flex;align-items:center;gap:5px;margin-top:4px}
.rt-name-row input{font-family:'IBM Plex Mono',monospace;font-size:10px;
  border:1px solid #d4a060;border-radius:4px;padding:2px 6px;
  background:#fdf8ec;color:#7a4f00;outline:none;
  width:100%;transition:border-color .15s}
.rt-name-row input:focus{border-color:#b4720a;background:#fff}
.rt-name-row .rt-name-label{font-size:9px;font-weight:700;color:var(--text-faint);
  white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}

/* NSG name input row */
.nsg-name-row{display:flex;align-items:center;gap:5px;margin-top:4px}
.nsg-name-row input{font-family:'IBM Plex Mono',monospace;font-size:10px;
  border:1px solid var(--azure-mid);border-radius:4px;padding:2px 6px;
  background:var(--azure-light);color:var(--azure-dark);outline:none;
  width:100%;transition:border-color .15s}
.nsg-name-row input:focus{border-color:var(--azure);background:#fff}
.nsg-name-row .nsg-name-label{font-size:9px;font-weight:700;color:var(--text-faint);
  white-space:nowrap;text-transform:uppercase;letter-spacing:.05em}

/* NSG inline checkbox */
.rc-controls-row{display:flex;align-items:center;gap:8px;margin-top:6px;flex-wrap:wrap}
.rc-nsg-check{display:flex;align-items:center;gap:4px;padding:2px 7px;
  border:1px solid var(--border);border-radius:4px;background:var(--surface);
  cursor:pointer;transition:all .15s;white-space:nowrap}
.rc-nsg-check:hover{border-color:var(--azure);background:var(--azure-light)}
.rc-nsg-check.active{border-color:#107c10;background:#f0faf0}
.rc-nsg-check input{accent-color:#107c10;width:11px;height:11px;cursor:pointer;margin:0}
.rc-nsg-check label{font-size:10px;font-weight:600;color:var(--text-muted);
  cursor:pointer;font-family:'IBM Plex Mono',monospace}
.rc-nsg-check.active label{color:#107c10}

/* Section collapse toggle */
.ps-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.section-collapse-btn{display:flex;align-items:center;gap:3px;font-size:10px;
  font-weight:600;color:var(--text-faint);background:none;border:1.5px solid var(--border);
  border-radius:5px;padding:2px 8px;cursor:pointer;transition:all .15s;font-family:'IBM Plex Mono',monospace}
.section-collapse-btn:hover{color:var(--azure);border-color:var(--azure)}
.section-collapse-btn .sc-chevron{transition:transform .18s}
.section-collapse-btn.collapsed .sc-chevron{transform:rotate(-90deg)}
.section-collapsible{overflow:hidden;transition:max-height .2s ease}
.section-collapsible.collapsed{display:none}

/* ── FOOTER ── */
.app-footer{
  text-align:center;padding:12px 20px;
  font-size:11px;color:var(--text-faint);
  border-top:1px solid var(--border-light);
  background:var(--surface);
  font-family:'IBM Plex Sans',sans-serif;
  letter-spacing:.01em;
}
.app-footer strong{color:var(--text-muted);font-weight:600}

/* ══════════════════════════════════════════
   LANDING PAGE
   ══════════════════════════════════════════ */

/* Landing light/dark tokens — default LIGHT */
:root {
  --lp-bg:       #f0f4f8;
  --lp-surface:  #ffffff;
  --lp-surface2: #f7f9fc;
  --lp-surface3: #eef2f7;
  --lp-border:   rgba(0,0,0,0.07);
  --lp-border-h: rgba(0,120,212,0.45);
  --lp-text:     #0f1923;
  --lp-muted:    #52657e;
  --lp-faint:    #aab8cc;
  --lp-grid:     rgba(0,0,0,0.04);
  --lp-glow:     rgba(0,120,212,0.10);
  --lp-glow2:    rgba(0,120,212,0.06);
  --lp-card-bg:  #ffffff;
  --lp-tag-bg:   #eef2f7;
  --lp-tag-col:  #6b7a99;
  --lp-success:  #107c10;
  --lp-amber:    #b45309;
  --lp-amber-bg: rgba(180,83,9,0.07);
  --lp-amber-br: rgba(180,83,9,0.18);
  --lp-purple:   #6d28d9;
  --lp-purple-bg:rgba(109,40,217,0.07);
  --lp-purple-br:rgba(109,40,217,0.18);
  --lp-modal-bg: rgba(255,255,255,0.97);
  --lp-modal-bd: rgba(0,0,0,0.1);
  --lp-modal-ov: rgba(0,0,0,0.4);
}
body.lp-dark {
  --lp-bg:       #0b0f1a;
  --lp-surface:  #111827;
  --lp-surface2: #1a2235;
  --lp-surface3: #1f2d42;
  --lp-border:   rgba(255,255,255,0.07);
  --lp-border-h: rgba(0,120,212,0.5);
  --lp-text:     #e8edf8;
  --lp-muted:    #7a8aa8;
  --lp-faint:    #3a4a64;
  --lp-grid:     rgba(255,255,255,0.03);
  --lp-glow:     rgba(0,120,212,0.16);
  --lp-glow2:    rgba(0,120,212,0.08);
  --lp-card-bg:  #111827;
  --lp-tag-bg:   #1a2235;
  --lp-tag-col:  #4a5a76;
  --lp-success:  #22c55e;
  --lp-amber:    #f59e0b;
  --lp-amber-bg: rgba(245,158,11,0.08);
  --lp-amber-br: rgba(245,158,11,0.2);
  --lp-purple:   #8b5cf6;
  --lp-purple-bg:rgba(139,92,246,0.08);
  --lp-purple-br:rgba(139,92,246,0.2);
  --lp-modal-bg: #111827;
  --lp-modal-bd: rgba(255,255,255,0.1);
  --lp-modal-ov: rgba(0,0,0,0.75);
}

#landingView {
  display: none;
  flex-direction: column;
  min-height: 100vh;
  background: var(--lp-bg);
  position: relative;
  overflow-x: hidden;
  font-family: 'IBM Plex Sans', sans-serif;
}
#landingView.active { display: flex; }

/* grid bg */
#landingView::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--lp-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--lp-grid) 1px, transparent 1px);
  background-size: 48px 48px;
}
/* top glow */
#landingView::after {
  content: '';
  position: fixed;
  top: -20vh; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse at center, var(--lp-glow) 0%, transparent 70%);
  pointer-events: none; z-index: 0;
}

.lp-body { position: relative; z-index: 1; display: flex; flex-direction: column; flex: 1; }

/* ── Landing hero ── */
.lp-hero {
  padding: 80px 48px 52px;
  text-align: center;
}
.lp-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--azure); margin-bottom: 22px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.lp-eyebrow::before, .lp-eyebrow::after {
  content: ''; display: block; width: 36px; height: 1px;
}
body:not(.lp-dark) .lp-eyebrow::before {
  background: linear-gradient(90deg, transparent, var(--azure));
}
body:not(.lp-dark) .lp-eyebrow::after {
  background: linear-gradient(90deg, var(--azure), transparent);
}
body.lp-dark .lp-eyebrow::before {
  background: linear-gradient(90deg, transparent, var(--azure));
}
body.lp-dark .lp-eyebrow::after {
  background: linear-gradient(90deg, var(--azure), transparent);
}

.lp-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 18px;
  background: linear-gradient(135deg, #0a1628 0%, #0050a0 45%, #0078d4 80%, #40a0f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.lp-dark .lp-title {
  background: linear-gradient(135deg, #ffffff 0%, #a8c8f0 55%, #60a8f8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lp-sub {
  font-size: 15px; font-weight: 300;
  color: var(--lp-muted);
  max-width: 440px; margin: 0 auto 10px;
  line-height: 1.7;
}
.lp-authors {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; color: var(--lp-faint);
  letter-spacing: .06em; margin-bottom: 56px;
}

/* ── Tools section ── */
.lp-tools { padding: 0 48px 72px; flex: 1; }
.lp-tools-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--lp-faint); margin-bottom: 24px;
  max-width: 1200px; margin-left: auto; margin-right: auto;
  margin-bottom: 24px;
}
.lp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
  max-width: 1200px; margin: 0 auto;
}

/* ── Tool card ── */
.lp-card {
  position: relative;
  background: var(--lp-card-bg);
  border: 1px solid var(--lp-border);
  border-radius: 16px;
  padding: 28px;
  cursor: pointer;
  display: flex; flex-direction: column;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  overflow: hidden;
  animation: lpCardIn .55s both;
  text-decoration: none; color: inherit;
}
.lp-card:nth-child(1){animation-delay:.05s}
.lp-card:nth-child(2){animation-delay:.14s}
.lp-card:nth-child(3){animation-delay:.23s}
@keyframes lpCardIn {
  from{opacity:0;transform:translateY(22px)}
  to  {opacity:1;transform:translateY(0)}
}
.lp-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--lp-card-accent,#0078d4); opacity:0; transition:opacity .25s;
}
.lp-card::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 30% 0%,
    var(--lp-card-glow, rgba(0,120,212,.10)) 0%, transparent 60%);
  opacity:0; transition:opacity .3s;
}
.lp-card:not(.lp-card-soon):hover { transform:translateY(-4px); }
.lp-card:not(.lp-card-soon):hover::before { opacity:1; }
.lp-card:not(.lp-card-soon):hover::after  { opacity:1; }
.lp-card:not(.lp-card-soon):hover {
  border-color: var(--lp-border-h);
  box-shadow: 0 18px 44px rgba(0,0,0,.12), 0 0 0 1px var(--lp-border-h);
}
body.lp-dark .lp-card:not(.lp-card-soon):hover {
  box-shadow: 0 18px 44px rgba(0,0,0,.4), 0 0 0 1px var(--lp-border-h);
}

.lp-card-icon {
  width:50px; height:50px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  background:var(--lp-icon-bg, rgba(0,120,212,.09));
  border:1px solid var(--lp-icon-br, rgba(0,120,212,.2));
  transition: box-shadow .25s;
}
.lp-card:not(.lp-card-soon):hover .lp-card-icon {
  box-shadow: 0 0 22px var(--lp-card-glow, rgba(0,120,212,.18));
}
.lp-card-icon svg { width:24px; height:24px; }

.lp-card-status {
  font-family:'IBM Plex Mono',monospace;
  font-size:9px; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  padding:2px 8px; border-radius:10px;
  display:inline-flex; align-items:center; gap:4px;
  margin-bottom:12px; width:fit-content;
}
.lp-status-live {
  color:var(--lp-success);
  background:rgba(34,197,94,.09); border:1px solid rgba(34,197,94,.22);
}
body:not(.lp-dark) .lp-status-live {
  color:var(--lp-success);
  background:rgba(16,124,16,.09); border:1px solid rgba(16,124,16,.22);
}
.lp-status-live::before {
  content:''; width:5px; height:5px; border-radius:50%;
  background:var(--lp-success); animation:lpPulse 2s infinite;
}
@keyframes lpPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.lp-status-soon {
  color:var(--lp-amber);
  background:var(--lp-amber-bg); border:1px solid var(--lp-amber-br);
}

.lp-card-title {
  font-family:'Syne',sans-serif;
  font-size:18px; font-weight:700; letter-spacing:-.02em;
  color:var(--lp-text); margin-bottom:9px; line-height:1.2;
}
.lp-card-desc {
  font-size:12px; font-weight:300; color:var(--lp-muted);
  line-height:1.65; flex:1; margin-bottom:22px;
}
.lp-card-tags {
  display:flex; flex-wrap:wrap; gap:5px; margin-bottom:22px;
}
.lp-card-tag {
  font-family:'IBM Plex Mono',monospace;
  font-size:9px; font-weight:500;
  color:var(--lp-tag-col); background:var(--lp-tag-bg);
  border:1px solid var(--lp-border);
  padding:2px 7px; border-radius:4px;
}
.lp-card-cta {
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--lp-border); padding-top:16px; margin-top:auto;
}
.lp-card-cta-label {
  font-size:11px; font-weight:500; color:var(--lp-muted);
  transition:color .2s;
}
.lp-card:not(.lp-card-soon):hover .lp-card-cta-label { color:var(--lp-text); }
.lp-card-arrow {
  width:30px; height:30px; border-radius:8px;
  background:var(--lp-surface3); border:1px solid var(--lp-border);
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; flex-shrink:0;
}
.lp-card:not(.lp-card-soon):hover .lp-card-arrow {
  background:#0078d4; border-color:#0078d4; transform:translateX(3px);
}
.lp-card:not(.lp-card-soon):hover .lp-card-arrow svg { stroke:#fff; }
.lp-card-arrow svg { width:13px; height:13px; stroke:var(--lp-muted); transition:stroke .2s; }
.lp-card-soon .lp-card-cta-label { color:var(--lp-faint); }
.lp-card-soon .lp-card-arrow { opacity:.45; }

/* ── Landing footer ── */
.lp-footer {
  border-top:1px solid var(--lp-border);
  padding:16px 48px;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:8px;
  background: var(--lp-surface);
  position:relative; z-index:1;
  text-align:center;
}
.lp-footer-copy {
  font-size:11px; color:var(--lp-faint);
  font-family:'IBM Plex Sans',sans-serif;
  letter-spacing:.01em;
}
.lp-footer-copy strong { color:var(--lp-muted); font-weight:600; }
.lp-footer-ver {
  font-family:'IBM Plex Sans',sans-serif;
  font-size:11px; color:var(--lp-faint);
}

/* ── Dark toggle on landing ── */
.lp-dark-toggle {
  width:34px; height:34px; border-radius:8px; cursor:pointer;
  border:1px solid var(--lp-border); background:var(--lp-surface2);
  color:var(--lp-muted); display:flex; align-items:center; justify-content:center;
  transition:all .15s; flex-shrink:0;
}
.lp-dark-toggle:hover {
  border-color:#0078d4; color:#0078d4; background:rgba(0,120,212,.08);
}
.lp-top-bar {
  display:flex; align-items:center; justify-content:flex-end;
  padding:16px 48px; position:relative; z-index:1;
}

/* ── Under Construction Modal ── */
.lp-modal-overlay {
  display:none; position:fixed; inset:0; z-index:999;
  background:var(--lp-modal-ov); backdrop-filter:blur(8px);
  align-items:center; justify-content:center;
}
.lp-modal-overlay.open { display:flex; }
.lp-modal {
  background:var(--lp-modal-bg);
  border:1px solid var(--lp-modal-bd);
  border-radius:20px; padding:44px 36px;
  max-width:400px; width:90%; text-align:center;
  animation:lpModalIn .28s both;
}
@keyframes lpModalIn {
  from{opacity:0;transform:scale(.94) translateY(14px)}
  to  {opacity:1;transform:scale(1) translateY(0)}
}
.lp-modal-icon {
  width:54px; height:54px; border-radius:14px;
  background:var(--lp-amber-bg); border:1px solid var(--lp-amber-br);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
}
.lp-modal-eyebrow {
  font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--lp-amber); margin-bottom:12px;
}
.lp-modal-title {
  font-family:'Syne',sans-serif; font-size:20px; font-weight:700;
  color:var(--lp-text); margin-bottom:10px; letter-spacing:-.02em;
}
.lp-modal-body {
  font-size:13px; color:var(--lp-muted); line-height:1.65; margin-bottom:28px;
}
.lp-modal-btn {
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
  padding:9px 26px; border-radius:8px;
  border:1.5px solid var(--lp-border);
  background:transparent; color:var(--lp-text);
  cursor:pointer; transition:all .18s;
}
.lp-modal-btn:hover {
  background:var(--lp-surface3); border-color:var(--lp-border-h);
}

@media(max-width:640px){
  .lp-hero,.lp-tools,.lp-footer,.lp-top-bar{padding-left:20px;padding-right:20px}
  .lp-hero{padding-top:48px}
  .lp-grid{grid-template-columns:1fr}
}