:root{
  /* 只做淺色。這是一份給客戶看的正式文件，深色不是必要的；
     兩套配色等於每加一個元件都要調兩次，維護成本翻倍。
     色碼都經過對比度檢查（WCAG AA：一般文字 4.5:1）。 */
  color-scheme: light;

  /* 紙張與墨 */
  --paper:#FBFAF7;
  --surface:#FFFFFF;
  --surface-2:#F3F1EC;
  --ink:#14181F;      /* 17.05:1 on paper */
  --ink-2:#454C57;    /*  8.30:1 */
  --muted:#666D78;    /*  5.00:1 on paper、4.62:1 on surface-2 */

  /* 線 */
  --rule:#D2CCC2;     /* 1.53:1 —— 髮絲線看得見但不搶戲 */
  --rule-soft:#E9E5DE;

  /* 橘色分成四個 token —— 橘色越亮對比度越低，一個色碼不可能同時當小字與色塊。
     亮橘只用在色塊、邊框、大字（WCAG 圖形門檻 3:1）；
     小字與白字按鈕底一律用深橘（門檻 4.5:1）。 */
  --orange:#EA580C;      /* 3.41:1 on paper —— 色塊、邊框、圖示 */
  --orange-ink:#A9490E;  /* 5.52:1 on paper、4.89:1 on orange-soft —— 小字 */
  --orange-soft:#FCE9DC; /* 狀態方塊底色 */
  --orange-line:#F0C4A2; /* 狀態方塊框線，1.53:1 對紙張 */
  --accent:#14487A;   /* 8.99:1 */
  --accent-soft:#E7EDF5;
  --on-accent:#FFFFFF;/* 9.38:1 on accent */

  /* 狀態 */
  --danger:#A32A22;   /* 6.91:1 */
  --danger-soft:#F7E9E6;
  --ok:#2A6146;       /* 6.08:1 on ok-soft */
  --ok-soft:#E5EDE8;
  --warn:#8A5A17;     /* 5.17:1 on warn-soft */
  --warn-soft:#F7EFDF;

  --focus:0 0 0 3px rgba(20,72,122,.18);

  /* 圓角。容器一律 3px（大圓角是模板感的來源）；
     徽章／狀態標籤例外，完全圓的形狀本身就在傳達「這是狀態」。 */
  --radius:3px;
  --radius-pill:999px;

  /* 字級 */
  --serif:"Noto Serif TC",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
}
[hidden]{display:none !important}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  min-height:100dvh; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
h1,h2{margin:0; line-height:1.25; font-family:var(--serif); font-weight:700; text-wrap:balance}
p{margin:0}
a{color:var(--accent); text-underline-offset:3px}
button{font:inherit; cursor:pointer}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:var(--radius)}
.ico{width:1.05em; height:1.05em; flex:0 0 auto; display:inline-block; vertical-align:-.13em}
.eyebrow{
  font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--orange-ink);
}

/* 抬頭：與各 app 同一套 */
.topbar{background:var(--surface); border-bottom:1px solid var(--rule)}
.topbar-in{max-width:1180px; margin:0 auto; padding:14px 32px; display:flex; align-items:center; gap:24px}
.swo{height:24px; width:auto; flex:0 0 auto}
.topbar-doc{min-width:0; padding-left:24px; border-left:1px solid var(--rule-soft)}
.topbar h1{font-size:17px; font-weight:700; letter-spacing:-.005em; margin-top:2px}
.topbar-actions{margin-left:auto; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.topbar-actions .sub{color:var(--muted); font-size:12px}

.page{flex:1 0 auto; width:100%; max-width:1180px; margin:0 auto; padding:38px 32px 72px}

/* 分類 */
.group-head{padding-bottom:12px; border-bottom:2px solid var(--ink); margin:0 0 22px}
.group-head:not(:first-child){margin-top:48px}
.group-title{font-size:21px; letter-spacing:-.01em}
.group-note{color:var(--ink-2); font-size:13.5px; margin-top:6px; max-width:62ch}

/* 工具卡 */
.apps{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:16px}
.app{
  display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit;
  padding:20px 22px 18px; background:var(--surface); border:1px solid var(--rule);
  border-radius:var(--radius); transition:border-color .15s ease, transform .15s ease;
}
.app:hover{border-color:var(--accent); transform:translateY(-1px)}
.app:hover .app-name{color:var(--accent)}
.app-head{display:flex; align-items:center; gap:11px}
.app-brand{width:22px; height:22px; object-fit:contain; flex:0 0 auto}
.app-head > .ico:first-child{color:var(--accent); width:20px; height:20px}
.app-name{
  font-family:var(--serif); font-weight:700; font-size:16.5px; flex:1 1 auto;
  transition:color .15s ease;
}
.app-head > .ico:last-child{color:var(--muted); width:14px; height:14px}
.app:hover .app-head > .ico:last-child{color:var(--accent)}
.app-summary{font-size:13.5px; color:var(--ink-2); line-height:1.7; flex:1 1 auto}
.app-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding-top:4px}
.app-audience{font-size:11.5px; color:var(--muted)}
.app-auth{
  font-family:var(--mono); font-size:9.5px; font-weight:600; letter-spacing:.06em;
  padding:2px 9px; border-radius:var(--radius-pill); margin-left:auto;
}
.app-auth.ok{background:var(--ok-soft); color:var(--ok)}
.app-auth.warn{background:var(--warn-soft); color:var(--warn)}
.app-auth.muted{background:var(--surface-2); color:var(--muted)}

/* 未登入 */
.gate{
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
  padding:72px 24px; background:var(--surface); border:1px solid var(--rule); border-radius:var(--radius);
}
.gate .ico{color:var(--muted)}
.gate h2{font-size:19px}
.gate p{color:var(--ink-2); font-size:14px}
.gate .btn{margin-top:8px}

.notice{
  border-left:2px solid var(--accent); background:var(--accent-soft); color:var(--ink-2);
  padding:14px 18px; margin-bottom:24px; font-size:13.5px; line-height:1.7;
}
.notice.error{border-color:var(--danger); background:var(--danger-soft)}
.notice strong{color:var(--ink)}
.notice:empty{display:none}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; text-decoration:none;
  border:1px solid var(--rule); background:var(--surface); color:var(--ink);
  padding:9px 18px; border-radius:var(--radius); font-size:14px; font-weight:600; min-height:40px;
  transition:border-color .15s ease, color .15s ease;
}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.12); color:var(--on-accent)}
.btn.sm{padding:6px 13px; font-size:12.5px; min-height:34px}

.site-foot{flex:0 0 auto; border-top:1px solid var(--rule-soft); background:var(--surface)}
.site-foot-in{max-width:1180px; margin:0 auto; padding:20px 32px; font-size:12px; color:var(--muted)}

@media (max-width:860px){
  .topbar-in{padding:12px 20px; gap:16px}
  .topbar-doc{padding-left:16px}
  .page{padding:26px 20px 56px}
  .site-foot-in{padding:18px 20px}
  .apps{grid-template-columns:1fr}
}