/* XZ PON 光功率 / 光衰计算器 —— 前端样式
   由 staging/pon-calculator/pon-calculator.fragment.html 自动拆分生成，
   **不要直接改这个文件**。改样式请改片段，然后跑: python tools\build_pon_page.py
   设计令牌对齐站内样式基准（public-ip-check / .xzip），见 docs/tool-style-baseline.md */

  /* ══════════ 令牌：与基准页 .xzip 逐值一致（全站只有一个蓝 #2f6bff） ══════════ */
  .xzop{
    --xzop-ink:#0f172a; --xzop-ink2:#64748b; --xzop-ink3:#94a3b8; --xzop-ink4:#b9c2cf;
    --xzop-line:#e6eaf2; --xzop-divider:#eef2f7; --xzop-soft:#f1f5f9;
    --xzop-brand:#2f6bff; --xzop-off:#94a3b8;
    --xzop-ok:#16a34a; --xzop-warn:#f59e0b; --xzop-warn-ink:#d97706;
    --xzop-bad:#dc2626; --xzop-idle:#cbd5e1;

    box-sizing:border-box;
    max-width:min(760px,100%);      /* ④ 居中限宽 */
    margin:8px auto 4px;
    font-family:inherit;            /* ③ 不覆盖站点字体 */
    color:var(--xzop-ink);
  }
  .xzop,.xzop *,.xzop *::before,.xzop *::after{box-sizing:border-box}   /* ① 盒模型复位 */

  /* ══════════ 外层卡片 ══════════ */
  .xzop .xz-card{
    border:1px solid var(--xzop-line); border-radius:20px; padding:26px 22px;
    background:linear-gradient(180deg,#fbfcff,#fff);
  }
  .xzop h3{margin:0 0 6px; font-size:20px; font-weight:600; line-height:1.4; font-family:inherit}
  /* ② 干掉主题的装饰字符：Sakurairo 给 h3→"#"、h4→">"、h5→"~"，h3~h5 必须全列 */
  .xzop h1::before,.xzop h1::after,
  .xzop h2::before,.xzop h2::after,
  .xzop h3::before,.xzop h3::after,
  .xzop h4::before,.xzop h4::after,
  .xzop h5::before,.xzop h5::after,
  .xzop h6::before,.xzop h6::after{content:none !important; display:none !important}
  /* 兜底：主题把 .entry-content p 设成 16px/30px，控件里的段落自己说了算 */
  .xzop p{margin:0 0 8px; font-size:13.5px; line-height:1.75; color:var(--xzop-ink2)}
  .xzop .xz-sub{margin:0 auto 20px; max-width:580px; font-size:14px; line-height:1.85; color:var(--xzop-ink2)}

  /* ══════════ 模式切换 ══════════ */
  .xzop .xz-op-modes{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:0 auto 18px}
  .xzop .xz-op-mode{
    appearance:none; -webkit-appearance:none; font-family:inherit; font-size:13.5px; line-height:1.4;
    cursor:pointer; padding:8px 16px; border-radius:999px; color:var(--xzop-ink2);
    background:var(--xzop-soft); border:1px solid var(--xzop-line); transition:.18s;
  }
  .xzop .xz-op-mode:hover{border-color:#cbd5e1; color:var(--xzop-ink)}
  .xzop .xz-op-mode.is-on{color:#fff; border-color:transparent; background:var(--xzop-brand)}

  /* ══════════ 输入区 ══════════ */
  .xzop .xz-op-form{display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; margin:0 0 14px}
  .xzop .xz-field{display:flex; flex-direction:column; gap:5px; min-width:0}
  .xzop .xz-field[hidden]{display:none !important}
  .xzop .xz-field-l{font-size:12.5px; color:var(--xzop-ink2); line-height:1.5}
  .xzop .xz-field input,.xzop .xz-field select{
    width:100%; font-family:inherit; font-size:14px; line-height:1.4; color:var(--xzop-ink);
    padding:9px 12px; border:1px solid var(--xzop-line); border-radius:12px; background:#fff;
    appearance:none; -webkit-appearance:none; transition:.18s;
  }
  .xzop .xz-field input:focus,.xzop .xz-field select:focus{
    outline:none; border-color:var(--xzop-brand); box-shadow:0 0 0 3px rgba(47,107,255,.13);
  }
  .xzop .xz-field select{
    padding-right:34px; cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 11px center; background-size:15px 15px;
  }

  /* ══════════ 高级设置（折叠区：Sakurairo 会把 details/summary 改成弹性盒） ══════════ */
  .xzop details.xz-fold{
    display:block !important; width:100% !important;
    border:1px solid var(--xzop-line); border-radius:16px; padding:15px 19px;
    background:linear-gradient(180deg,#fbfcff,#fff); margin:0 0 14px;
  }
  .xzop details.xz-fold > summary{
    display:block !important; width:auto !important; float:none !important;
    text-align:left !important; list-style:none !important;
    cursor:pointer; font-size:14.5px; font-weight:600; color:var(--xzop-ink);
    position:relative; padding:0 30px 0 0; margin:0;
  }
  .xzop details.xz-fold > summary::-webkit-details-marker{display:none !important}
  .xzop details.xz-fold > summary::marker{content:none !important}
  .xzop details.xz-fold > summary::after{
    content:"+" !important; position:absolute; right:0; top:50%; transform:translateY(-50%);
    font-size:19px; font-weight:400; color:var(--xzop-ink3); line-height:1;
  }
  .xzop details.xz-fold[open] > summary::after{content:"−" !important}
  .xzop details.xz-fold .xz-op-form{margin:14px 0 8px}
  .xzop .xz-op-advbar{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
  .xzop .xz-op-reset{
    appearance:none; -webkit-appearance:none; font-family:inherit; font-size:12.5px; cursor:pointer;
    padding:6px 13px; border-radius:999px; color:var(--xzop-ink2);
    background:#fff; border:1px solid var(--xzop-line); transition:.18s;
  }
  .xzop .xz-op-reset:hover{border-color:#cbd5e1; color:var(--xzop-ink)}

  /* ══════════ 操作区 ══════════ */
  .xzop .xz-act{text-align:center; margin-top:20px}
  .xzop .xz-btn{
    display:inline-block; cursor:pointer; border:0; padding:12px 34px; border-radius:999px;
    font-size:15px; font-weight:600; color:#fff; background:var(--xzop-brand);
    font-family:inherit; transition:.2s;
  }
  .xzop .xz-btn:hover{transform:translateY(-1px)}
  .xzop .xz-btn[disabled]{background:var(--xzop-off); cursor:default; transform:none}

  /* ══════════ 结果区 ══════════ */
  .xzop .xz-op-out{margin-top:20px}
  /* 判定条：状态点 + 文字结论，不靠颜色单独表意 */
  .xzop .xz-op-verdict{
    display:flex; align-items:flex-start; gap:10px;
    border:1px solid var(--xzop-line); border-radius:16px; background:var(--xzop-soft);
    padding:13px 16px; margin:0 0 14px; min-height:62px;
  }
  .xzop .xz-dot{width:9px; height:9px; border-radius:50%; background:var(--xzop-idle); flex:0 0 9px; margin-top:7px}
  .xzop .xz-dot.ok{background:var(--xzop-ok)}
  .xzop .xz-dot.warn{background:var(--xzop-warn)}
  .xzop .xz-dot.bad{background:var(--xzop-bad)}
  .xzop .xz-op-vt{margin:0; font-size:14px; font-weight:600; color:var(--xzop-ink); line-height:1.6}
  .xzop .xz-op-vd{margin:3px 0 0; font-size:12.5px; color:var(--xzop-ink2); line-height:1.7}
  .xzop .xz-ok{color:var(--xzop-ok)}
  .xzop .xz-warn2{color:var(--xzop-warn-ink)}
  .xzop .xz-bad2{color:var(--xzop-bad)}

  /* 指标小框（复用基准页公共类名） */
  .xzop .xz-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px}
  .xzop .xz-grid-box{grid-auto-rows:112px}
  .xzop .xz-box{
    border:1px solid var(--xzop-line); border-radius:16px; padding:14px 18px; background:#fff;
    display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  }
  .xzop .xz-box-t{font-size:12.5px; color:var(--xzop-ink2); margin-bottom:5px; flex:0 0 auto}
  .xzop .xz-box-v{font-size:17px; font-weight:600; color:var(--xzop-ink); line-height:1.45;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  .xzop .xz-box-v.none{font-size:15px; font-weight:400; color:var(--xzop-ink3); font-family:inherit}
  .xzop .xz-box-n{margin-top:3px; font-size:12px; color:var(--xzop-ink3); line-height:1.6;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

  /* 拆解面板 */
  .xzop .xz-op-panel{
    border:1px solid var(--xzop-line); border-radius:16px; background:#fff;
    padding:14px 18px; margin:0 0 14px;
  }
  .xzop .xz-op-panel[hidden]{display:none !important}
  .xzop .xz-op-panel-t{margin:0 0 10px; font-size:13.5px; font-weight:600; color:var(--xzop-ink); line-height:1.6}
  .xzop .xz-op-panel-t span{margin-left:8px; font-size:12px; font-weight:400; color:var(--xzop-ink3)}
  .xzop .xz-op-row{
    display:grid; grid-template-columns:1fr 84px 96px; align-items:center; gap:10px;
    padding:7px 0; border-top:1px solid var(--xzop-divider);
  }
  .xzop .xz-op-row:first-of-type{border-top:0}
  .xzop .xz-op-row-k{font-size:12.5px; color:var(--xzop-ink2); line-height:1.6;
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .xzop .xz-op-row-v{font-size:13px; font-weight:600; color:var(--xzop-ink); text-align:right; line-height:1.6;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  .xzop .xz-op-row-v.none{font-weight:400; color:var(--xzop-ink3); font-family:inherit}
  .xzop .xz-op-row-v i{font-style:normal; font-weight:400; font-size:11.5px; color:var(--xzop-ink3); margin-left:5px;
    font-family:inherit}
  .xzop .xz-op-bar{display:block; height:7px; border-radius:999px; background:var(--xzop-soft); overflow:hidden}
  .xzop .xz-op-bar i{display:block; height:100%; width:0; border-radius:999px;
    background:linear-gradient(90deg,#7ea6ff,var(--xzop-brand)); transition:width .35s}
  .xzop .xz-op-row.is-total{border-top:1px solid var(--xzop-line); margin-top:2px}
  .xzop .xz-op-row.is-total .xz-op-row-k{font-weight:600; color:var(--xzop-ink)}
  .xzop .xz-op-row.is-total .xz-op-bar i{background:linear-gradient(90deg,#0f172a,#3f4a5f)}

  /* "键 —— 值" 对齐行（复用基准页公共类名，比表格轻） */
  .xzop .xz-icmp-line{display:flex; align-items:baseline; justify-content:space-between; gap:12px; line-height:1.85}
  .xzop .xz-icmp-line .xz-icmp-k{color:var(--xzop-ink2); font-size:12.5px}
  .xzop .xz-icmp-line .xz-icmp-v{font-weight:600; color:var(--xzop-ink); font-size:13.5px; white-space:nowrap;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
  .xzop .xz-icmp-line .xz-icmp-v.none{font-weight:400; color:var(--xzop-ink3); font-family:inherit}

  .xzop p.xz-note{margin:14px auto 0; font-size:12px; color:var(--xzop-ink3); line-height:1.8; text-align:center}
  .xzop noscript{display:block; margin:12px 0 0; font-size:12.5px; color:var(--xzop-warn-ink); text-align:center}

  /* ══════════ 响应式：唯一断点 640px ══════════ */
  @media (max-width:640px){
    .xzop .xz-op-form{grid-template-columns:1fr}
    .xzop .xz-grid{grid-template-columns:1fr}
    .xzop .xz-grid-box{grid-auto-rows:auto}
    .xzop .xz-box{padding:12px 15px}
    .xzop .xz-sub{max-width:none}
    .xzop .xz-op-row{grid-template-columns:1fr 76px}
    .xzop .xz-op-bar{grid-column:1 / -1; margin:2px 0 4px}
  }