/* 色票、圓角、字型沿用鴻綸官網，讓 perf.hunglun.com 和官網是同一家人。 */
:root{
  --bg:#fdfdfc; --bg-soft:#f6f6f3; --text:#1a1a1a; --body:#252525; --muted:#5c5c5c;
  --line:rgba(0,0,0,.10); --line-strong:#e2e2dd; --edge:#767672;
  --accent:#1e3a5f; --accent-deep:#15293f;
  --ok:#1d6a43; --warn:#8a5800; --bad:#a32020;
  --radius:4px; --measure:46rem;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:#b9b9b3 var(--bg)}
body{background:var(--bg);color:var(--body);font:400 1.0625rem/1.8 "Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty;min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,summary,th,caption,button,.lead,.note,.state-note,.aspect-hint,.foot p{text-wrap:balance}
::selection{background:#cfe0f5;color:var(--text)}
input,button{font:inherit;color:inherit}
input{caret-color:var(--accent);accent-color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:2px}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--accent);color:#fff;padding:.6rem 1rem;z-index:10}
.skip:focus{left:0}
.icon{width:1.25em;height:1.25em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;vertical-align:-.2em}

/* 頁首 */
.top{display:flex;align-items:baseline;gap:.9rem;padding:1.1rem max(1.25rem,calc((100vw - var(--measure))/2));border-bottom:1px solid var(--line)}
.mark{font-weight:700;color:var(--accent);letter-spacing:.02em}
.name{color:var(--muted);font-size:.9375rem}

main{width:100%;max-width:calc(var(--measure) + 2.5rem);margin:0 auto;padding:0 1.25rem 4rem;flex:1}

/* 首頁 */
#screen-start{padding-top:clamp(2.5rem,9vh,5.5rem)}
h1{font-size:clamp(2.1rem,6.4vw,3.5rem);line-height:1.2;font-weight:700;color:var(--text);letter-spacing:-.01em;max-width:14em}
.lead{margin-top:1.25rem;color:var(--muted);max-width:30em;font-size:1.125rem}
#form{margin-top:2.25rem}
label{display:block;font-weight:600;font-size:.9375rem;color:var(--text);margin-bottom:.4rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap}
input[type=text],input[type=password]{width:100%;min-height:3.25rem;padding:.5rem 1rem;border:1.5px solid var(--edge);border-radius:var(--radius);background:#fff;font-size:1.0625rem}
.row input{flex:1 1 16rem;width:auto}
input::placeholder{color:#6b6b67;opacity:1}
button{cursor:pointer;min-height:3.25rem;padding:0 1.5rem;border-radius:var(--radius);border:1.5px solid transparent;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;transition:background-color .2s var(--ease),border-color .2s var(--ease)}
button:disabled{opacity:.55;cursor:progress}
.primary{background:var(--accent);color:#fff}
.primary:hover:not(:disabled){background:var(--accent-deep)}
.ghost{background:transparent;color:var(--accent);border-color:var(--edge);min-height:2.75rem;padding:0 1.1rem}
.ghost:hover{border-color:var(--accent);background:var(--bg-soft)}
.code-box{margin-top:1.1rem}
summary{cursor:pointer;color:var(--accent);font-weight:600;list-style:none;display:flex;align-items:center;gap:.4rem;min-height:2.75rem;width:fit-content}
summary::-webkit-details-marker{display:none}
summary:hover{text-decoration:underline;text-underline-offset:.25em}
.code-box[open] summary{margin-bottom:.5rem}
.code-box summary .chev,.checks summary .chev{transition:transform .25s var(--ease)}
.code-box[open]>summary .chev{transform:rotate(180deg)}
.code-box input[type=password]{max-width:26rem}
.check-row{display:flex;align-items:center;gap:.5rem;font-weight:400;margin:.7rem 0 0;color:var(--muted);font-size:.9375rem}
.check-row input{width:1.15rem;height:1.15rem}
.form-error{margin-top:.9rem;color:var(--bad);font-weight:600}
.note{margin-top:2rem;color:var(--muted);font-size:.9375rem;max-width:32em}

/* 檢查中 */
#screen-loading{padding-top:clamp(3rem,14vh,7rem)}
.loading-text{font-size:1.25rem;color:var(--text);font-weight:600}
.indeterminate{margin-top:1.25rem;height:4px;max-width:22rem;background:var(--line-strong);border-radius:2px;overflow:hidden}
.indeterminate span{display:block;height:100%;width:40%;background:var(--accent);border-radius:2px;animation:slide 1.4s var(--ease) infinite}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(260%)}}

/* 結果 */
.result-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.5rem}
.domain{font-weight:600;color:var(--muted);word-break:break-all}
.lead-result{margin-top:1.5rem;font-size:clamp(1.35rem,3.8vw,1.95rem);line-height:1.5;font-weight:600;color:var(--text);max-width:24em;outline:none}
#codeNote{margin-top:1rem}
section>h2{margin-top:3.5rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:1.25rem;line-height:1.4;font-weight:700;color:var(--text)}
.sub{margin:2rem 0 .5rem;font-size:1.0625rem;font-weight:700;color:var(--text)}

.aspect{padding:1.4rem 0;border-bottom:1px solid var(--line)}
.aspect:first-child{padding-top:1rem}
.aspect-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.aspect h3{font-size:1.0625rem;font-weight:700;color:var(--text)}
.aspect-score{color:var(--muted);font-size:.9375rem;white-space:nowrap}
.aspect-score .num{font-size:1.625rem;font-weight:700;color:var(--accent);margin-right:.1rem}
.bar{margin-top:.5rem;height:6px;background:var(--line-strong);border-radius:3px;overflow:hidden}
.bar-fill{display:block;height:100%;width:var(--w);background:var(--accent);border-radius:3px;transform-origin:left;animation:grow 1s var(--ease) .15s backwards}
@keyframes grow{from{transform:scaleX(0)}}
.aspect-hint{margin-top:.65rem;color:var(--muted);font-size:.9375rem}

.checks{margin-top:.5rem}
.checks summary .chev{transition:transform .25s var(--ease)}
.checks[open]>summary .chev{transform:rotate(180deg)}
.checks ul{list-style:none;margin-top:.4rem}
.check{display:flex;gap:.8rem;padding:.8rem 0;border-top:1px solid var(--line)}
.check-mark{margin-top:.2rem}
.check.ok .check-mark{color:var(--ok)}
.check.warn .check-mark{color:var(--warn)}
.check.bad .check-mark{color:var(--bad)}
.check-label{font-weight:600;color:var(--text)}
.check-detail{font-size:.9375rem;color:var(--muted)}
.check-fix{font-size:.9375rem;margin-top:.2rem}

.state-note{background:var(--bg-soft);border-radius:var(--radius);padding:.9rem 1.1rem;margin:.75rem 0;font-size:.9375rem;max-width:var(--measure)}
.state-note+button{margin-top:.5rem}
.fresh{font-size:.875rem;color:var(--muted);margin:.5rem 0}
.fresh.stale{color:var(--warn);font-weight:600}
.fresh.failed{color:var(--bad);font-weight:600}

/* 實際成效 */
.range{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:1rem 0 .5rem}
.range-label{font-size:.9375rem;color:var(--muted);margin-right:.4rem}
.seg{min-height:2.75rem;padding:0 1rem;background:#fff;color:var(--text);border:1.5px solid var(--edge);font-weight:500}
.seg[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.seg:hover:not([aria-pressed=true]){background:var(--bg-soft)}
.charts{margin:1rem 0 1.5rem}
.chart-box{margin:0 0 1.5rem}
.chart-box figcaption{font-size:.9375rem;font-weight:600;color:var(--text);margin-bottom:.2rem}
.chart{display:block;width:100%;height:auto;touch-action:pan-y;cursor:crosshair}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .grid{stroke:var(--line-strong);stroke-dasharray:3 4}
.chart .axis{stroke:var(--edge)}
.chart .tick{font-size:11px;fill:var(--muted)}
.chart .guide{stroke:var(--edge);stroke-dasharray:2 3}
.chart .dot{fill:var(--accent);stroke:#fff;stroke-width:2}
.chart-read{font-size:.9375rem;color:var(--text);font-variant-numeric:tabular-nums;min-height:1.6em}

table.data{width:100%;border-collapse:collapse;margin:.75rem 0 1.25rem;font-size:.9375rem}
.data caption{text-align:left;font-weight:700;color:var(--text);padding-bottom:.4rem}
.data th,.data td{padding:.7rem .5rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.data thead th{font-weight:600;color:var(--muted);font-size:.875rem;border-bottom:1px solid var(--edge)}
.data tbody th{font-weight:500;color:var(--text)}
.data .r{text-align:right}
.data .c{text-align:center}
.data .none{color:var(--muted)}
.partial{display:block;font-size:.8125rem;color:var(--muted);font-weight:400}
.mini-bar{display:block;height:4px;background:var(--line-strong);border-radius:2px;margin-top:.35rem;max-width:12rem}
.mini-bar span{display:block;height:100%;background:var(--accent);border-radius:2px}
.scroll{overflow-x:auto}
.formula{margin-top:.5rem;font-size:.9375rem}
.formula p,.formula ul{margin:.3rem 0 0 .2rem;color:var(--muted)}
.formula ul{padding-left:1.2rem}

/* 建議 */
ol.advice{list-style:none;counter-reset:a;margin-top:.5rem}
ol.advice li{counter-increment:a;position:relative;padding:1.1rem 0 1.1rem 3rem;border-bottom:1px solid var(--line)}
ol.advice.more li{counter-increment:none}
ol.advice li::before{content:counter(a);position:absolute;left:0;top:1.05rem;width:2rem;height:2rem;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;display:grid;place-items:center;font-variant-numeric:tabular-nums}
ol.advice.more li::before{display:none}
ol.advice.more li{padding-left:0}
.advice-num{font-weight:700;color:var(--text);margin-bottom:.3rem}
ol.advice li p{font-size:.9375rem}
ol.advice li p.advice-num{font-size:1.0625rem}

.export-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}

.foot{border-top:1px solid var(--line);padding:1.5rem max(1.25rem,calc((100vw - var(--measure))/2)) 2rem;color:var(--muted);font-size:.875rem}
.foot p+p{margin-top:.3rem}
.toast{position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%);background:var(--text);color:#fff;padding:.6rem 1.1rem;border-radius:var(--radius);font-size:.9375rem;max-width:90vw}
.toast:empty{display:none}
.print-head{display:none}

@media (max-width:30rem){
  .row{flex-direction:column}
  .row input{flex:none;width:100%}
  .primary,.row button,.export-row button{width:100%}
  .aspect-head{flex-direction:column;gap:.1rem}
  .data th,.data td{padding:.6rem .3rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}
@media print{
  :root{--bg:#fff}
  body{font-size:11pt;line-height:1.6;display:block}
  .top,.foot,.toast,#again,.range,.export,.skip,.state-note button,.ghost,.chart-read{display:none!important}
  .print-head{display:block;color:var(--muted);font-size:10pt;margin-top:.5rem}
  main{max-width:none;padding:0}
  .aspect,tr,figure,li{break-inside:avoid}
  section>h2{break-after:avoid;margin-top:1.8rem}
  .bar-fill{animation:none}
  .chart .guide,.chart .dot{display:none}
}