:root{
    --dark:#021616;
    --panel:#0B3B3D;
    --panel-2:#0F4749;
    --teal:#028090;
    --seafoam:#00A896;
    --mint:#02C39A;
    --light:#F4FBFA;
    --ink:#16302F;
    --muted:#7FA6A2;
    --muted-dark:#5C7A78;
    --danger:#E0776B;
    --danger-bg:#3A1F1C;
    --serif: Cambria, Georgia, "Times New Roman", serif;
    --sans: -apple-system, "Segoe UI", Calibri, Roboto, sans-serif;
    --mono: "Courier New", Consolas, monospace;
  }

  *{ box-sizing:border-box; }

  body{
    margin:0;
    background: radial-gradient(circle at 40% -10%, #0B4547 0%, var(--dark) 45%), var(--dark);
    color: var(--light);
    font-family: var(--sans);
    padding: 32px 16px 64px;
    min-height:100vh;
  }

  .wrap{ max-width: 980px; margin: 0 auto; }

  header{ margin-bottom: 28px; }
  .eyebrow{
    font-size: 12px; letter-spacing: 3px; text-transform: uppercase;
    color: var(--mint); font-weight: 700; margin-bottom: 8px;
  }
  h1{
    font-family: var(--serif); font-size: clamp(28px, 4vw, 40px);
    margin: 0 0 8px; font-weight: 700; color: var(--light);
  }
  .lead{ color: var(--muted); font-size: 15px; max-width: 620px; line-height: 1.5; }

  /* Tabs */
  .tabs{
    display:flex; gap: 4px; margin: 28px 0 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .tab{
    background: none; border: none; color: var(--muted);
    font-family: var(--sans); font-size: 14.5px; font-weight: 600;
    padding: 10px 18px; cursor: pointer; position: relative;
    border-radius: 8px 8px 0 0; transition: color .2s ease;
  }
  .tab:hover{ color: var(--light); }
  .tab.active{ color: var(--mint); }
  .tab.active::after{
    content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
    background: var(--mint); border-radius: 2px;
  }

  .panel{ display:none; }
  .panel.active{ display:block; animation: fadeIn .25s ease; }
  @keyframes fadeIn{ from{opacity:0; transform: translateY(4px);} to{opacity:1; transform:none;} }

  .card{
    background: var(--panel); border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px; padding: 24px; margin-bottom: 18px;
  }
  .card h2{
    font-family: var(--serif); font-size: 18px; margin: 0 0 16px; color: var(--light);
    display:flex; align-items:center; gap:10px;
  }
  .card h2 .dot{ width:8px; height:8px; border-radius:50%; background: var(--mint); display:inline-block; }

  /* Simple mode inputs */
  .row{ display:flex; gap: 16px; flex-wrap: wrap; }
  .field{ flex: 1 1 220px; }
  label{
    display:block; font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
    color: var(--muted); margin-bottom: 6px; font-weight: 600;
  }
  input[type=text], input[type=number]{
    width: 100%; background: var(--dark); border: 1px solid rgba(255,255,255,0.12);
    color: var(--light); font-family: var(--mono); font-size: 16px;
    padding: 11px 12px; border-radius: 8px; outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  input:focus{ border-color: var(--mint); box-shadow: 0 0 0 3px rgba(2,195,154,0.18); }
  .cidr-row{ display:flex; align-items:center; gap: 14px; }
  input[type=range]{
    flex:1; accent-color: var(--mint); height: 4px;
  }
  .cidr-val{
    font-family: var(--mono); font-size: 20px; font-weight:700; color: var(--mint);
    min-width: 52px; text-align:center;
    background: var(--dark); border-radius: 8px; padding: 6px 4px;
    border: 1px solid rgba(255,255,255,0.1);
  }

  .error-box{
    background: var(--danger-bg); border: 1px solid rgba(224,119,107,0.4);
    color: #F3B7AF; padding: 12px 14px; border-radius: 8px; font-size: 14px;
    margin-top: 14px; display:none;
  }
  .error-box.show{ display:block; }

  /* Binary visualizer — signature element */
  .bitgrid{
    display:flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;
  }
  .octet{
    display:flex; flex-direction:column; gap:6px; flex: 1 1 200px;
  }
  .octet-label{
    font-size: 11px; color: var(--muted); font-family: var(--mono);
    display:flex; justify-content: space-between;
  }
  .bits{ display:flex; gap: 3px; }
  .bit{
    flex:1; aspect-ratio: 1/1.15; border-radius: 4px;
    display:flex; align-items:center; justify-content:center;
    font-family: var(--mono); font-size: 13px; font-weight:700;
    background: #0A3335; color: var(--muted-dark);
    border: 1px solid rgba(255,255,255,0.05);
    transition: background .25s ease, color .25s ease, transform .15s ease;
  }
  .bit.network{ background: var(--teal); color: #fff; }
  .bit.host{ background: #133F41; color: var(--mint); }
  .legend{ display:flex; gap: 18px; margin-top: 14px; flex-wrap:wrap; }
  .legend-item{ display:flex; align-items:center; gap: 7px; font-size: 12.5px; color: var(--muted); }
  .legend-swatch{ width: 13px; height: 13px; border-radius: 3px; }

  /* Results grid */
  .results{
    display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    gap: 12px; margin-top: 4px;
  }
  .result{
    background: var(--panel-2); border-radius: 10px; padding: 14px 16px;
    border: 1px solid rgba(255,255,255,0.05);
  }
  .result .k{ font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); margin-bottom: 5px; }
  .result .v{ font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--light); word-break: break-all; }
  .result.highlight .v{ color: var(--mint); }

  /* VLSM mode */
  .vlsm-rows{ display:flex; flex-direction:column; gap: 10px; margin: 16px 0; }
  .vlsm-row{
    display:grid; grid-template-columns: 1fr 140px 40px; gap: 10px; align-items:center;
  }
  .vlsm-row input{ margin:0; }
  .icon-btn{
    background: var(--dark); border: 1px solid rgba(255,255,255,0.12);
    color: var(--muted); width: 40px; height: 42px; border-radius: 8px;
    cursor:pointer; font-size: 18px; line-height:1; display:flex; align-items:center; justify-content:center;
    transition: all .15s ease;
  }
  .icon-btn:hover{ border-color: var(--danger); color: var(--danger); }

  .btn{
    font-family: var(--sans); font-weight: 700; font-size: 14px;
    border: none; border-radius: 9px; padding: 12px 20px; cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease;
  }
  .btn:active{ transform: scale(0.98); }
  .btn-primary{ background: var(--mint); color: var(--dark); }
  .btn-primary:hover{ box-shadow: 0 4px 18px rgba(2,195,154,0.35); }
  .btn-ghost{
    background: transparent; color: var(--muted); border: 1px dashed rgba(255,255,255,0.2);
  }
  .btn-ghost:hover{ color: var(--light); border-color: var(--light); }
  .btn-row{ display:flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }

  table{ width:100%; border-collapse: collapse; margin-top: 6px; font-size: 13.5px; }
  thead th{
    text-align:left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
    color: var(--muted); padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  tbody td{
    padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.05);
    font-family: var(--mono); color: var(--light);
  }
  tbody td.name{ font-family: var(--sans); font-weight:600; }
  tbody tr:hover{ background: rgba(255,255,255,0.02); }
  .table-wrap{ overflow-x:auto; }

  .foot-note{
    font-size: 12.5px; color: var(--muted-dark); margin-top: 22px; line-height:1.6;
  }

  @media (max-width: 560px){
    .vlsm-row{ grid-template-columns: 1fr 90px 36px; }
    .card{ padding: 18px; }
  }