@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');

:root { --navy:#07182c; --navy2:#0b2440; --blue:#1597d5; --cyan:#31c2df; --teal:#14b8a6; --lime:#b8e83e; --red:#ef4444; --ink:#172438; --muted:#718096; --line:#dce5ed; --panel:#f7fafc; --white:#fff; --shadow:0 18px 48px rgba(5,24,45,.16); }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; overflow:hidden; }
body { font-family:'DM Sans',sans-serif; color:var(--ink); background:#e8eef3; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.hidden { display:none!important; }
.app-shell { height:100%; display:flex; flex-direction:column; }
.topbar { height:76px; flex:0 0 76px; display:flex; align-items:center; gap:28px; padding:0 24px; background:var(--navy); color:#fff; box-shadow:0 3px 20px rgba(4,18,34,.24); z-index:1001; }
.brand { width:292px; display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; }
.brand img { width:48px; height:48px; object-fit:cover; border-radius:12px; box-shadow:0 0 0 1px rgba(255,255,255,.16); }
.brand span { display:flex; align-items:baseline; gap:10px; }
.brand b { font:800 24px/1 'Manrope',sans-serif; letter-spacing:.12em; }
.brand small { font-size:13px; color:#9edbea; letter-spacing:.04em; }
.global-search { position:relative; max-width:680px; flex:1; }
.global-search input { width:100%; height:46px; border:1px solid rgba(255,255,255,.15); border-radius:12px; background:rgba(255,255,255,.09); color:#fff; padding:0 44px; outline:none; transition:.2s; }
.global-search input::placeholder { color:#a9bbc9; }
.global-search input:focus { border-color:#54c9e1; background:rgba(255,255,255,.13); box-shadow:0 0 0 3px rgba(49,194,223,.12); }
.search-icon { position:absolute; left:16px; top:8px; font-size:25px; color:#9edbea; }
.icon-button { position:absolute; right:9px; top:7px; border:0; background:transparent; color:#fff; font-size:25px; }
.search-results { position:absolute; top:53px; left:0; right:0; background:#fff; color:var(--ink); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; z-index:2000; max-height:360px; overflow-y:auto; }
.result-item { width:100%; display:flex; align-items:center; gap:12px; border:0; border-bottom:1px solid #eef2f5; background:#fff; padding:12px 14px; text-align:left; }
.result-item:hover,.result-item:focus { background:#f1f8fb; }
.result-icon { width:34px; height:34px; border-radius:9px; display:grid; place-items:center; background:#e5f6fa; color:#0c7fa7; font-weight:700; }
.result-item span { min-width:0; }
.result-item b,.result-item small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-item small { color:var(--muted); margin-top:2px; }
.top-actions { margin-left:auto; display:flex; align-items:center; gap:12px; }
.mode-badge { font-size:13px; color:#cbd9e3; white-space:nowrap; }
.mode-badge i { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--lime); margin-right:7px; box-shadow:0 0 0 5px rgba(184,232,62,.11); }
.button { border-radius:10px; border:0; font-weight:700; padding:11px 16px; }
.button-secondary { border:1px solid rgba(255,255,255,.2); color:#fff; background:rgba(255,255,255,.08); }
.button-primary { background:linear-gradient(135deg,#0ea5d1,#1575c8); color:#fff; box-shadow:0 8px 22px rgba(21,117,200,.24); }
.button-danger { background:#fff0f0; color:#c23333; }
.workspace { display:grid; grid-template-columns:340px minmax(0,1fr); min-height:0; overflow:hidden; flex:1; }
.sidebar { height:100%; min-height:0; max-height:100%; background:#fff; overflow-x:hidden; overflow-y:scroll; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#9db7c5 #edf3f6; border-right:1px solid var(--line); z-index:900; }
.sidebar::-webkit-scrollbar { width:9px; }
.sidebar::-webkit-scrollbar-track { background:#edf3f6; }
.sidebar::-webkit-scrollbar-thumb { background:#9db7c5; border:2px solid #edf3f6; border-radius:10px; }
.sidebar::-webkit-scrollbar-thumb:hover { background:#6f98ab; }
.intro { padding:28px 24px 18px; }
.eyebrow { font-size:10px; font-weight:800; letter-spacing:.15em; color:#178bad; }
h1,h2,h3 { font-family:'Manrope',sans-serif; margin:0; }
.intro h1 { font-size:27px; margin-top:7px; color:#0b2038; }
.intro p { margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--muted); }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 24px 20px; }
.stats-grid article { border:1px solid #e5edf3; border-radius:12px; padding:13px 14px; background:#fbfdfe; }
.stats-grid span { display:block; font:800 20px/1 'Manrope'; color:#0a789f; }
.stats-grid small { display:block; color:var(--muted); font-size:11px; margin-top:5px; }
.panel-section { padding:20px 24px; border-top:1px solid #edf1f4; }
.section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.section-heading h2 { font-size:13px; letter-spacing:.02em; }
.text-button { border:0; background:transparent; color:#1585b0; font-size:11px; font-weight:700; padding:2px; }
.danger-text { color:#d04444; }
.layer-row { display:grid; grid-template-columns:20px 1fr 34px; align-items:center; gap:10px; padding:9px 0; cursor:pointer; }
.layer-row b,.layer-row small { display:block; }
.layer-row b { font-size:12px; }
.layer-row small { font-size:10px; color:var(--muted); margin-top:2px; }
.layer-row input { appearance:none; width:32px; height:18px; border-radius:20px; background:#ccd7df; position:relative; transition:.2s; }
.layer-row input:after { content:''; position:absolute; width:14px; height:14px; top:2px; left:2px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 1px 3px #8794a0; }
.layer-row input:checked { background:#19a8c9; }
.layer-row input:checked:after { transform:translateX(14px); }
.legend-line { display:block; width:18px; border-top:4px solid var(--teal); border-radius:2px; }
.legend-line.planned { border-color:#e5a832; border-top-style:dashed; }
.legend-nap,.legend-client,.legend-splice,.legend-splitter,.legend-hub { width:15px; height:15px; display:block; border-radius:4px; background:#097d9c; border:3px solid #fff; box-shadow:0 0 0 2px #097d9c; }
.legend-client { border-radius:50%; background:#764fd1; box-shadow:0 0 0 2px #764fd1; }
.legend-splice { transform:rotate(45deg); border-radius:3px; background:#e67332; box-shadow:0 0 0 2px #e67332; }
.legend-splitter { border-radius:50%; background:#e0a514; box-shadow:0 0 0 2px #e0a514; }
.legend-hub { background:#183d75; box-shadow:0 0 0 2px #183d75; }
.tool-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tool-button { min-height:74px; padding:11px; text-align:left; border:1px solid #dce8ee; background:#f8fbfc; border-radius:11px; color:var(--ink); }
.tool-button:hover { border-color:#55b7ce; background:#eef9fb; transform:translateY(-1px); }
.tool-button span { float:left; width:27px; height:27px; border-radius:8px; display:grid; place-items:center; color:#0c89aa; background:#dff4f8; margin-right:8px; font-weight:800; }
.tool-button b,.tool-button small { display:block; }
.tool-button b { font-size:11px; margin-top:1px; }
.tool-button small { font-size:9px; color:var(--muted); margin-top:3px; }
.admin-hint { font-size:10px; line-height:1.4; color:var(--muted); margin:10px 0 0; }
.fiber-colors { display:grid; grid-template-columns:repeat(2,1fr); gap:6px 12px; }
.fiber-chip { display:flex; align-items:center; gap:7px; font-size:10px; color:#526274; }
.fiber-chip i { width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }
.sidebar-footer { padding:16px 24px 24px; border-top:1px solid #edf1f4; display:flex; flex-direction:column; gap:7px; color:#66788a; font-size:10px; }
.sidebar-footer span { font-weight:700; color:#34475b; }
.pulse-dot,.live-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#40bf64; margin-right:6px; box-shadow:0 0 0 4px rgba(64,191,100,.12); }
.map-stage { position:relative; min-width:0; }
#map { width:100%; height:100%; background:#dce7eb; }
.leaflet-control-zoom { border:0!important; box-shadow:0 5px 20px rgba(18,46,65,.18)!important; }
.leaflet-control-zoom a { color:#12344a!important; }
.leaflet-popup-content-wrapper { border-radius:14px; box-shadow:0 14px 36px rgba(4,24,43,.2); }
.leaflet-popup-content { margin:15px 16px; min-width:220px; }
.popup-eyebrow { color:#1489a9; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.popup-title { font:800 16px 'Manrope'; margin:5px 0 10px; color:#0b2038; }
.popup-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.popup-grid span { background:#f3f7f9; border-radius:8px; padding:7px; }
.popup-grid small,.popup-grid b { display:block; }
.popup-grid small { color:#7a8998; font-size:9px; }
.popup-grid b { margin-top:2px; font-size:11px; }
.popup-actions { display:flex; gap:6px; margin-top:10px; }
.popup-actions button { flex:1; border:0; border-radius:7px; padding:7px; background:#e8f6f9; color:#087d9f; font-size:10px; font-weight:700; }
.nap-marker,.client-marker { width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:#fff; font-weight:800; background:linear-gradient(145deg,#0c9bb8,#075b84); border:3px solid #fff; box-shadow:0 4px 12px rgba(3,70,99,.35); }
.nap-marker.full { background:linear-gradient(145deg,#e89529,#b35320); }
.nap-marker.maintenance { background:linear-gradient(145deg,#7c8793,#48535e); }
.client-marker { width:25px; height:25px; border-radius:50%; background:#7254cf; font-size:10px; }
.technical-marker { width:29px; height:29px; display:grid; place-items:center; border:3px solid #fff; color:#fff; font:800 11px 'Manrope'; box-shadow:0 4px 12px rgba(46,46,46,.32); }
.technical-marker.splice { border-radius:7px; background:linear-gradient(145deg,#f08a42,#b84f22); transform:rotate(45deg); }
.technical-marker.splice b { transform:rotate(-45deg); }
.technical-marker.splitter { border-radius:50%; background:linear-gradient(145deg,#efbf2e,#ba7610); }
.technical-marker.hub { width:35px; height:35px; border-radius:9px; background:linear-gradient(145deg,#275d9f,#102f5b); font-size:15px; }
.map-toolbar { position:absolute; right:18px; top:18px; z-index:800; display:flex; flex-direction:column; gap:8px; }
.map-toolbar button { width:42px; height:42px; border:1px solid #d7e0e7; border-radius:11px; background:#fff; color:#13344b; font-size:21px; box-shadow:0 6px 18px rgba(21,48,67,.14); }
.map-toolbar button:hover { color:#0c91b5; }
.map-status { position:absolute; z-index:800; right:18px; bottom:18px; border-radius:12px; padding:10px 14px; background:rgba(7,24,44,.92); color:#fff; box-shadow:0 8px 24px rgba(4,20,38,.2); }
.map-status b,.map-status small { display:inline-block; }
.map-status b { font-size:11px; margin-right:7px; }
.map-status small { color:#a7bccb; font-size:10px; }
.empty-state { position:absolute; z-index:700; left:50%; top:50%; transform:translate(-50%,-50%); width:min(360px,calc(100% - 40px)); background:rgba(255,255,255,.94); border:1px solid #d9e5eb; border-radius:16px; padding:25px; text-align:center; box-shadow:var(--shadow); }
.empty-icon { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; margin:0 auto 12px; background:#e3f5f8; color:#0a8cac; font-size:24px; }
.empty-state b { font-family:'Manrope'; font-size:15px; }
.empty-state p { color:var(--muted); font-size:12px; line-height:1.5; margin:7px 0 0; }
.modal-backdrop { position:fixed; inset:0; z-index:3000; background:rgba(3,17,30,.62); backdrop-filter:blur(5px); display:grid; place-items:center; padding:18px; }
.modal { position:relative; width:min(570px,100%); max-height:92vh; overflow:auto; background:#fff; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.34); padding:28px; }
.modal-close { position:absolute; right:16px; top:14px; border:0; background:transparent; color:#789; font-size:26px; }
.modal-logo { width:54px; height:54px; border-radius:14px; object-fit:cover; margin-bottom:14px; }
.modal h2 { font-size:22px; color:#0a2038; padding-right:30px; }
.modal-description { color:var(--muted); font-size:13px; line-height:1.5; margin:7px 0 20px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field.full { grid-column:1/-1; }
.field label { font-size:11px; font-weight:700; color:#455b70; }
.field input,.field select,.field textarea { width:100%; border:1px solid #d7e2e9; border-radius:10px; background:#fbfdfe; padding:10px 11px; color:#172b3d; outline:none; }
.field input:focus,.field select:focus,.field textarea:focus { border-color:#23a7c5; box-shadow:0 0 0 3px rgba(35,167,197,.1); }
.field textarea { min-height:76px; resize:vertical; }
.form-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; }
.color-input { height:42px; padding:4px!important; }
.strand-preview { margin-top:14px; padding:12px; background:#f4f8fa; border-radius:11px; }
.strand-preview p { margin:0 0 8px; font-size:10px; color:#617487; }
.strand-dots { display:flex; flex-wrap:wrap; gap:5px; }
.strand-dots i { width:18px; height:18px; border-radius:50%; box-shadow:0 1px 2px rgba(0,0,0,.17); }
.toast { position:fixed; z-index:4000; left:50%; bottom:28px; transform:translateX(-50%); background:#07182c; color:#fff; border-radius:11px; padding:12px 18px; font-size:12px; font-weight:600; box-shadow:var(--shadow); }
.toast.error { background:#a92f36; }
.file-drop { display:block; border:1px dashed #a9c5d2; border-radius:12px; padding:18px; text-align:center; color:#527084; background:#f7fbfc; cursor:pointer; }

@media (max-width:900px) {
  .topbar { height:auto; min-height:72px; flex-wrap:wrap; gap:10px; padding:10px 14px; }
  .brand { width:auto; flex:1; }
  .brand small,.mode-badge { display:none; }
  .brand img { width:42px; height:42px; }
  .global-search { order:3; flex-basis:100%; max-width:none; }
  .top-actions .button { padding:9px 11px; font-size:11px; }
  .workspace { height:100%; grid-template-columns:1fr; grid-template-rows:minmax(210px,45%) minmax(0,55%); }
  .map-stage { grid-row:1; min-height:0; }
  .sidebar { grid-row:2; height:100%; min-height:0; max-height:none; overflow-y:scroll; border-right:0; border-top:1px solid var(--line); }
  .intro { padding-top:18px; }
  .map-status { display:none; }
}

@media (max-width:520px) {
  .brand b { font-size:20px; }
  .brand img { width:38px; height:38px; }
  .top-actions .button { font-size:0; padding:9px 12px; }
  .top-actions .button:after { content:'Admin'; font-size:11px; }
  .form-grid { grid-template-columns:1fr; }
  .field.full { grid-column:auto; }
}