/* 必能入口 — 必能 2026 色譜（橘 #F5A21D 只當色塊，不作文字色） */
:root{
  --orange-50:#FFF5E8;--orange-100:#FEEACC;--orange-200:#FED397;--orange-300:#FEB856;--orange-400:#F5A21D;--orange-500:#DA8A08;--orange-700:#8F5206;
  --sand-50:#FCF7E5;--sand-100:#F3EDD9;--sand-200:#E2DBC3;--sand-300:#CCC4A7;
  --charcoal-50:#FBF8F6;--charcoal-100:#F2EFEE;--charcoal-200:#E4E0DF;--charcoal-300:#D0CDCB;--charcoal-400:#ADAAA9;--charcoal-500:#888584;--charcoal-600:#6B6867;--charcoal-700:#524F4E;--charcoal-800:#3C3A39;--charcoal-900:#1C1A19;
  --brand:var(--orange-400);--brand-hover:var(--orange-500);--brand-text:var(--orange-700);--brand-soft:var(--orange-50);--brand-ring:var(--orange-100);
  --ink:var(--charcoal-800);--ink-strong:var(--charcoal-900);--ink-soft:var(--charcoal-600);--label:var(--charcoal-700);
  --bg:#FBF8F1;--panel:#FFFFFF;--head-bg:var(--sand-100);--line:var(--charcoal-200);--line-strong:var(--charcoal-300);
  --pass:#2F8247;--pass-bg:#E3F6E6;--pass-text:#045725;--info:#2A73A0;--info-bg:#E3F3FF;--info-text:#034D73;
  --warn:#DCBC33;--warn-bg:#F8F0D4;--warn-text:#554703;--fail:#C13D34;--fail-bg:#FFEBE8;--fail-text:#870F0E;--idle-bg:var(--charcoal-100);
  --sans:"Inter","Noto Sans TC","Source Han Sans TC","Microsoft JhengHei","PingFang TC","Segoe UI",sans-serif;
  --radius:12px;--shadow:0 1px 2px rgba(60,58,57,.05),0 2px 6px rgba(60,58,57,.06);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:var(--brand-text)}
h1{font-size:24px;margin:8px 0 16px;color:var(--ink-strong)}
h2{font-size:18px;margin:28px 0 12px;color:var(--ink-strong);display:flex;align-items:center;gap:10px}
h3{font-size:15px;margin:0 0 4px}
.muted{color:var(--ink-soft)}.small{font-size:12px}.nowrap{white-space:nowrap}
code{background:var(--charcoal-100);padding:1px 6px;border-radius:5px;font-size:12px;word-break:break-all}
code.key{font-size:16px;letter-spacing:.06em;display:inline-block;margin:6px 0;padding:6px 10px}

/* 頁首 */
.apphead{position:sticky;top:0;z-index:10;background:rgba(251,248,246,.95);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.headin{max-width:1180px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:18px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink-strong);white-space:nowrap}
.brand .mark{width:32px;height:32px;border-radius:8px;background:var(--brand);color:var(--charcoal-800);display:grid;place-items:center;font-weight:700}
.brand .bt{font-size:15px}
.topnav{display:flex;gap:4px;overflow-x:auto;flex:1}
.topnav a{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--label);white-space:nowrap;font-size:13.5px}
.topnav a:hover{background:var(--brand-soft)}
.topnav a.active{background:var(--brand);color:var(--charcoal-800);font-weight:600}
.who{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:13px}
.who a{color:var(--ink);text-decoration:none;font-weight:600}
.who form{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding:20px 20px 60px}
.foot{text-align:center;color:var(--ink-soft);font-size:12px;padding:24px}
.crumb{margin:0;font-size:12.5px;color:var(--ink-soft)}.crumb a{color:var(--ink-soft)}

/* 按鈕 */
button,.btn-primary,.btn-ghost{font:inherit;cursor:pointer}
.btn-primary,.btn-ghost{display:inline-flex;align-items:center;gap:6px;border-radius:9px;padding:8px 16px;text-decoration:none;font-weight:600;font-size:13.5px;border:1px solid transparent}
.btn-primary{background:var(--brand);color:var(--charcoal-800)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-ghost{background:#fff;border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--brand)}
.btn-ghost.sm,.btn-primary.sm{padding:4px 10px;font-size:12.5px;font-weight:600}
.wide{width:100%;justify-content:center;padding:10px}
.linkbtn{background:none;border:0;padding:0;color:var(--brand-text);text-decoration:underline;font-size:13px}
.linkbtn.danger{color:var(--fail-text)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
form.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
.inline-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.rowact{white-space:nowrap}.rowact>*{margin-right:8px}

/* 表單 */
label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;color:var(--label);font-weight:600}
label.check{flex-direction:row;align-items:center;gap:8px;font-weight:400;color:var(--ink);font-size:13.5px}
input,select,textarea{font:inherit;font-weight:400;font-size:14px;color:var(--ink);background:#fff;border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;width:100%}
input[type=checkbox]{width:auto}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ring)}
input:disabled,select:disabled{background:var(--charcoal-100)}
.w80{width:80px}
input.copy{margin-top:6px;font-size:12px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;align-items:end}
.form-grid .span2,.form-grid fieldset,.form-grid h3{grid-column:1/-1}
fieldset{border:1px solid var(--line);border-radius:10px;padding:12px 14px}
legend{font-weight:700;padding:0 6px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.filters input,.filters select{width:auto;min-width:160px}
.pagehead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* 卡片、統計 */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin:0 0 18px}
.card h2{margin-top:0}
.cards2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.cards2 .card{margin:0}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;margin:0 0 12px}.kv dt{color:var(--ink-soft)}.kv dd{margin:0}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:8px}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:26px;color:var(--ink-strong)}.stat span{font-size:12.5px;color:var(--ink-soft)}
.meter{display:inline-block;width:90px;height:8px;background:var(--charcoal-100);border-radius:4px;vertical-align:middle;overflow:hidden}
.meter i{display:block;height:100%;background:var(--brand)}
.steps{padding-left:20px}.steps li{margin-bottom:6px}

/* 表格 */
.rtable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:12px}
.rtable th{background:var(--head-bg);color:var(--label);font-size:12.5px;text-align:left;padding:9px 12px;font-weight:600}
.rtable td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}
.rtable tbody tr:hover{background:var(--brand-soft)}
.rtable .num{text-align:right}
.rtable.compact td,.rtable.compact th{padding:6px 10px}
.rtable select{width:auto}
td.detail{max-width:420px;word-break:break-all}
.pager{display:flex;gap:6px;flex-wrap:wrap}.pager a,.pager b{padding:3px 9px;border-radius:6px;border:1px solid var(--line)}.pager b{background:var(--brand)}

/* 徽章、提示 */
.badge{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:999px;white-space:nowrap}
.badge.pass{background:var(--pass-bg);color:var(--pass-text)}.badge.info{background:var(--info-bg);color:var(--info-text)}
.badge.warn{background:var(--warn-bg);color:var(--warn-text)}.badge.fail{background:var(--fail-bg);color:var(--fail-text)}
.badge.idle{background:var(--idle-bg);color:var(--charcoal-600)}
.alert{padding:10px 14px;border-radius:10px;margin:0 0 14px;border-left:4px solid}
.alert.pass{background:var(--pass-bg);color:var(--pass-text);border-color:var(--pass)}
.alert.info{background:var(--info-bg);color:var(--info-text);border-color:var(--info)}
.alert.warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn)}
.alert.fail{background:var(--fail-bg);color:var(--fail-text);border-color:var(--fail)}

/* 登入 */
.login-card{max-width:400px;margin:48px auto;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:28px}
.login-card form{display:flex;flex-direction:column;gap:14px}

/* 網站目錄（沿用原入口卡片樣式） */
.dir-head{text-align:center;margin-bottom:8px}
.dir-head h1{margin-bottom:4px}
.search{max-width:460px;margin:14px auto 0}
.dir-sec{padding:20px 0 6px}.dir-sec+.dir-sec{border-top:1px solid var(--line)}
.sec-title{margin:0 2px 12px}
.sec-title::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--brand)}
.sec-title .count{margin-left:auto;font-size:12px;font-weight:500;color:var(--ink-soft)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:12px}
a.tile{position:relative;display:flex;flex-direction:column;gap:4px;min-height:72px;padding:13px 16px 13px 18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s,border-color .12s}
a.tile:hover,a.tile:focus-visible{transform:translate(-1px,-2px);border-color:var(--brand);box-shadow:3px 3px 0 var(--brand);outline:none}
.tile-name{font-size:15px;font-weight:600;color:var(--ink)}
.tile-host{font-size:12px;color:var(--charcoal-400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.tile .badge{align-self:flex-start}
.tile.hidden,.dir-sec.hidden{display:none}
.no-results{text-align:center;color:var(--ink-soft);padding:32px}

@media (max-width:760px){
  .headin{flex-wrap:wrap;gap:8px}.topnav{order:3;flex-basis:100%}
  .form-grid{grid-template-columns:1fr}
  .rtable{display:block;overflow-x:auto}
  .grid{grid-template-columns:1fr 1fr;gap:10px}
}
@media (max-width:380px){.grid{grid-template-columns:1fr}}
@media print{.apphead,.filters,.actions,.foot{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
