/* 全站共用樣式。深淺色靠 ，由 inline script 在畫面出現前就設好。 */
:root {
--bg: #f4f6fb;
--surface: #ffffff;
--surface-2: #eef1f8;
--border: #dde2ec;
--text: #1c2333;
--text-dim: #67708a;
--accent: #4c6ef5;
--accent-text: #ffffff;
--danger: #d64545;
--ok: #2f9e5e;
--shadow: 0 1px 2px rgba(20, 28, 50, .06), 0 8px 24px rgba(20, 28, 50, .06);
--radius: 16px;
}
:root[data-theme="dark"] {
--bg: #12151d;
--surface: #1a1f2b;
--surface-2: #222836;
--border: #2e3648;
--text: #e8ecf5;
--text-dim: #98a2ba;
--accent: #7c92ff;
--accent-text: #10131b;
--danger: #ff7a7a;
--ok: #5fd693;
--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--bg);
color: var(--text);
}
body {
font-family: system-ui, -apple-system, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
line-height: 1.6;
-webkit-text-size-adjust: 100%;
min-height: 100dvh;
}
a { color: var(--accent); }
.wrap {
width: 100%;
max-width: 880px;
margin: 0 auto;
padding: 20px 16px 48px;
}
/* ---------------------------------------------------------------- 頂部列 */
.topbar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 24px;
}
.topbar h1 {
font-size: 20px;
margin: 0;
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.who {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text-dim);
}
.avatar {
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
font-weight: 700;
font-size: 14px;
color: #10131b;
flex: none;
}
/* ---------------------------------------------------------------- 元件 */
.btn {
appearance: none;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font: inherit;
font-size: 15px;
padding: 10px 16px;
border-radius: 12px;
cursor: pointer;
min-height: 44px;
transition: filter .15s, border-color .15s;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { filter: brightness(.96); }
.btn.primary {
background: var(--accent);
border-color: var(--accent);
color: var(--accent-text);
font-weight: 600;
}
.btn.wide { width: 100%; }
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
}
.card + .card { margin-top: 16px; }
.card h2 {
margin: 0 0 4px;
font-size: 17px;
}
.card .hint {
margin: 0 0 16px;
font-size: 14px;
color: var(--text-dim);
}
label.field {
display: block;
margin-bottom: 14px;
}
label.field span {
display: block;
font-size: 14px;
color: var(--text-dim);
margin-bottom: 6px;
}
input[type="password"],
input[type="text"] {
width: 100%;
font: inherit;
font-size: 16px; /* 小於 16px 的話 iOS Safari 會自動放大整個畫面 */
padding: 12px 14px;
min-height: 48px;
border-radius: 12px;
border: 1px solid var(--border);
background: var(--surface-2);
color: var(--text);
}
input:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.msg {
margin-top: 14px;
font-size: 14px;
min-height: 20px;
}
.msg.err { color: var(--danger); }
.msg.ok { color: var(--ok); }
/* ---------------------------------------------------------------- 登入頁 */
.login-wrap {
min-height: 100dvh;
display: grid;
place-items: center;
padding: 24px 16px;
}
.login-box {
width: 100%;
max-width: 380px;
}
.login-box .logo {
text-align: center;
margin-bottom: 20px;
}
.login-box .logo .mark {
font-size: 40px;
line-height: 1;
}
.login-box .logo h1 {
font-size: 22px;
margin: 10px 0 2px;
}
.login-box .logo p {
margin: 0;
font-size: 14px;
color: var(--text-dim);
}
/* ---------------------------------------------------------------- 首頁磁磚 */
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 14px;
}
.tile {
display: flex;
flex-direction: column;
gap: 6px;
text-decoration: none;
color: inherit;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 18px 16px;
min-height: 132px;
transition: transform .12s, border-color .12s;
}
.tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.tile:active { transform: translateY(0); }
.tile .icon { font-size: 30px; line-height: 1; }
.tile .name { font-weight: 600; font-size: 16px; }
.tile .desc { font-size: 13px; color: var(--text-dim); }
.tile.locked {
opacity: .55;
cursor: default;
pointer-events: none;
}
.tile .badge {
align-self: flex-start;
margin-top: auto;
font-size: 12px;
padding: 2px 8px;
border-radius: 999px;
background: var(--surface-2);
color: var(--text-dim);
border: 1px solid var(--border);
}
/* ---------------------------------------------------------------- 設定頁 */
.seg {
display: inline-flex;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.seg button {
appearance: none;
border: 0;
background: var(--surface);
color: var(--text-dim);
font: inherit;
font-size: 15px;
padding: 10px 20px;
min-height: 44px;
cursor: pointer;
}
.seg button[aria-pressed="true"] {
background: var(--accent);
color: var(--accent-text);
font-weight: 600;
}
.back {
font-size: 14px;
text-decoration: none;
color: var(--text-dim);
}
.back:hover { color: var(--text); }
@media (max-width: 420px) {
.tiles { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.tile { min-height: 124px; padding: 16px 14px; }
.tile .icon { font-size: 26px; }
.wrap { padding: 16px 14px 40px; }
}