:root{
    --blue:#0f6fc5;
    --accent:#2563eb;
    --dark:#0f1724;
    --muted:#6b7280;
    --ok:#16a085;
    --warning:#f59e0b;
    --danger:#e55353;
    --card-bg:#ffffff;
    --surface:#f8fafc;
    --overlay: rgba(2,6,23,0.45);
    --radius:12px;
  }
  /* Base */
  @media (prefers-reduced-motion: no-preference){
    :root{--trans:.18s}
  }
  *{box-sizing:border-box}
  body{
    font-family: Inter, "Segoe UI", Tahoma, Arial, sans-serif;
    background: linear-gradient(180deg,#f5f7fb 0%, #f8fafc 100%);
    margin:0;padding:22px;color:var(--dark);
    display:flex;flex-direction:column;align-items:center;min-height:100vh;
  }
  h1{margin:0 0 14px;text-align:center;width:100%;max-width:1200px;font-weight:700;color:var(--dark);letter-spacing:-0.02em}

  /* Top menu */
  .menu{display:flex;gap:10px;align-items:center;margin-bottom:14px;flex-wrap:wrap;width:100%;max-width:1200px}
  .menu button{padding:9px 12px;border:none;border-radius:10px;background:linear-gradient(180deg,var(--blue),var(--accent));color:#fff;cursor:pointer;font-weight:700;box-shadow:0 6px 18px rgba(15,111,197,0.12);transition:transform var(--trans) ease, box-shadow var(--trans) ease}
  .menu button:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(15,111,197,0.14)}
  .filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .filters label{font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
  .filters input{width:16px;height:16px}
  .menu-separator {
    width: 1px;
    height: 24px;
    background-color: #e2e8f0;
    margin: 0 4px;
  }

  .power-budget {
      width: 100%;
      max-width: 1200px;
      margin-bottom: 14px;
      padding: 12px;
      background: var(--card-bg);
      border-radius: var(--radius);
      box-shadow: 0 8px 22px rgba(2,6,23,0.05);
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      gap: 10px;
  }
  .power-budget div {
      text-align: center;
  }
  .power-budget .label {
      font-size: 12px;
      color: var(--muted);
  }
  .power-budget .value {
      font-size: 18px;
      font-weight: 700;
  }

  /* network canvas */
  #network-container{
    position:relative;background:var(--card-bg);border-radius:var(--radius);
    padding:16px 14px 40px;box-shadow:0 10px 30px rgba(2,6,23,0.06);
    overflow:auto;min-height:160px;width:100%;max-width:1200px;
  }
  #fiber-line{position:absolute;top:64px;left:20px;height:6px;background:linear-gradient(90deg,var(--dark), rgba(15,111,197,0.5));border-radius:6px;z-index:0;box-shadow:0 6px 20px rgba(15,111,197,0.06)}
  #network{display:flex;gap:14px;align-items:flex-start;position:relative;z-index:1;padding:6px}

  .block{
    min-width:90px;min-height:70px;border: 2px solid #16a34a;background:var(--card-bg);color:var(--dark);
    display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
    position:relative;font-size:12px;border-radius:10px;box-shadow:0 6px 14px rgba(2,6,23,0.04);padding:8px;cursor:grab;transition:transform var(--trans) ease, box-shadow var(--trans) ease;
  }
  .block:active{cursor:grabbing}
  .block:hover{transform:translateY(-4px);box-shadow:0 10px 30px rgba(2,6,23,0.06)}
  .block.fiber{ background:linear-gradient(180deg,#ffffff, #fbfdff); border: 2px solid #2563eb; }
  .block .label{font-weight:800;color:var(--dark);margin-bottom:6px; }
  .block .icon{width:40px;height:26px;margin:0;display:flex;align-items:center;justify-content:center;line-height:1;}
  .block .small{font-size:11px;color:var(--muted);margin-top:4px}

  .block.olt, .block.ont { min-width:100px;min-height:100px;width:100px;height:100px;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;color:var(--dark); border: 2px solid #FD5D5D }
  .ont.good { border-color: rgba(22,160,133,0.18); background: linear-gradient(180deg,#f0fdfa, #ecfff8); }
  .ont.warn { border-color: rgba(245,158,11,0.18); background: linear-gradient(180deg,#fffbf0, #fffbf0); }
  .ont.bad { border-color: rgba(229,83,83,0.12); background: linear-gradient(180deg,#fff6f6,#fff6f6); }

  .delete-btn{position:absolute;top:8px;right:8px;background:var(--danger);color:#fff;border:none;border-radius:8px;width:30px;height:30px;font-size:14px;cursor:pointer;opacity:0;transition:opacity .12s}
  .edit-btn{position:absolute;top:8px;left:8px;background:#f3f4f6;color:var(--dark);border:none;border-radius:8px;padding:6px 8px;cursor:pointer;opacity:0;transition:opacity .12s}
  .block:hover .delete-btn{opacity:1}
  .block:hover .edit-btn{opacity:1}

  .wrapper{display:inline-flex;flex-direction:column;align-items:center;position:relative}
  .branch{display:flex;flex-direction:column;align-items:center;margin-top:6px}
  .branch-line{width:2px;background:var(--dark);border-radius:2px}
  .ont-branch{margin-top:8px;width:84px;height:84px;border:2px solid rgba(15,111,197,0.12);background:#f8fffb;color:var(--blue);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;padding:8px}
  .vertical-connector{width:2px;height:36px;background:var(--dark);margin-top:6px;margin-bottom:6px}

  table{width:100%;border-collapse:collapse;margin-top:18px;background:var(--card-bg);border-radius:12px;overflow:hidden;box-shadow:0 8px 22px rgba(2,6,23,0.05);max-width:1200px}
  thead th{background:linear-gradient(180deg,#f8fbff,#f3faff);color:var(--dark);font-weight:700;padding:12px 14px;text-align:center}
  th,td{padding:12px;border-bottom:1px solid #f1f5f9;text-align:center;font-size:12px;color:var(--dark)}
  tr.alert{background:linear-gradient(180deg,#fff2f2,#fff2f2)}
  tbody tr.highlight{background: #e3f2fd !important; }
  tbody td:nth-child(4){font-weight:700}

  #eventsTable tbody {
    display: block;
    max-height: 250px;
    overflow-y: auto;
  }

  #eventsTable thead, #eventsTable tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  #eventsTable td svg {
    max-width: 24px;
    max-height: 14px;
    vertical-align: middle;
  }

  #eventsTable thead th {
    text-align: center;
  }

  #eventsTable th:nth-child(1), #eventsTable td:nth-child(1) { width: 5%; }
  #eventsTable th:nth-child(2), #eventsTable td:nth-child(2) { width: 8%; }
  #eventsTable th:nth-child(3), #eventsTable td:nth-child(3) { width: 15%; }
  #eventsTable th:nth-child(4), #eventsTable td:nth-child(4) { width: 25%; }
  #eventsTable th:nth-child(5), #eventsTable td:nth-child(5) { width: 15%; }
  #eventsTable th:nth-child(6), #eventsTable td:nth-child(6) { width: 15%; }
  #eventsTable th:nth-child(7), #eventsTable td:nth-child(7) { width: 17%; }

  /* modals */
  .modal{display:none;position:fixed;inset:0;background:var(--overlay);align-items:center;justify-content:center;z-index:9999}
  .modal .box{background:#fff;border-radius:12px;padding:16px;min-width:320px;max-width:92%;box-shadow:0 8px 24px rgba(2,6,23,0.14);overflow:auto}
  .row{display:flex;gap:10px;align-items:center;margin-top:10px}
  .row label{flex:1;color:var(--muted);font-size:14px}
  input[type=number],input[type=text],select,textarea{width:100%;padding:10px;border:1px solid #edf2f7;border-radius:10px;font-size:14px}
  .buttons{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
  .btn{padding:8px 12px;border-radius:10px;border:none;cursor:pointer;font-weight:700}
  .primary{background:linear-gradient(180deg,var(--blue),var(--accent));color:#fff}
  .ghost{background:#f3f4f6;color:var(--dark)}
  @media (max-width:640px){ .block{min-width:80px} .modal .box{width:92%} }

  .tabs { display:flex; gap:8px; border-bottom:1px solid #eef2f8; margin-bottom:12px; flex-wrap:wrap }
  .tab-btn { padding:8px 12px; background:transparent; border:none; cursor:pointer; font-weight:700; color:var(--muted); border-radius:8px 8px 0 0 }
  .tab-btn.active{ background:#f3f9ff; color:var(--blue); box-shadow: inset 0 -2px 0 0 #d7eafc }
  .tab-content { display:none; }
  .tab-content.active { display:block; }

  .splitter-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:8px 12px; align-items:center }
  .preset-row{ display:flex; gap:8px; align-items:center; margin-bottom:8px; flex-wrap:wrap }
  .preset-row label{ min-width:160px; color:var(--muted) }

  /* tooltip */
  .tooltip { position:absolute; background:#fff; border:1px solid #e6eef7; padding:8px 10px; font-size:13px; border-radius:10px; box-shadow:0 8px 22px rgba(2,6,23,0.08); pointer-events:none; z-index:10000; display:none; }

  /* chart */
  #chart-container {
    width: 100%;
    max-width: 1200px;
    margin-top: 0;
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: 0 8px 22px rgba(2,6,23,0.05);
  }

  #chart-and-table-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
    max-width: 1200px;
    margin-top: 20px;
  }

  #chart-and-table-container #chart-container {
    flex: 1;
    min-width: 400px;
  }

  #chart-and-table-container table {
    flex: 0 0 550px;
    min-width: 300px;
    max-width: 550px;
    margin-top: 0;
  }

  @media (max-width: 1024px) {
    #chart-and-table-container {
      flex-direction: column;
    }
    #chart-and-table-container #chart-container,
    #chart-and-table-container table {
      flex: none;
      width: 100%;
      min-width: unset;
    }
    #chart-and-table-container table {
      margin-top: 20px;
    }
  }

  @media (max-width: 768px) {
    body { padding: 10px; }
    .menu { flex-direction: column; align-items: stretch; }
    .menu-right { margin-left: 0; }
    .filters { margin-left: 0; }
  }

#network .block.highlight, #network .wrapper.highlight > .block {
  box-shadow: 0 0 0 3px var(--accent, #2563eb);
  transform: translateY(-4px);
}

.menu-separator {
  width: 1px;
  height: 24px;
  background-color: #e2e8f0;
  margin: 0 4px;
}

.menu-group {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #f3f9ff;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid #d7eafc;
  width: 100%;
  max-width: 1200px;
  margin-bottom: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.menu-label {
  font-weight: 700;
  font-size: 12px;
  color: var(--blue);
  margin-bottom: 2px;
}
#wavelength-selectors, #wavelength-primary {
  display: flex;
  gap: 10px;
  align-items: center;
}
#wavelength-selectors label, #wavelength-primary label {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}
#wavelength-primary span {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
}