```css
/* 任天堂 Switch 風格：紅頂欄、圓角卡、Joy-Con 點綴 */
:root{
--switch-red:#e60012; /* 任天堂紅（近似） */
--joycon-blue:#00c3e3;
--joycon-red:#ff4d4d;
--bg:#0a0d14;
--panel:#0f1420;
--muted:#93a3b3;
--text:#eef2f7;
--ok:#16a34a; --warn:#f59e0b; --err:#ef4444; --link:#6cb6ff;
}
*{box-sizing:border-box}
html,body{margin:0;font-family:system-ui,-apple-system,"Noto Sans TC",Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}
/* 頂欄：Switch 紅 + 膠囊導覽 */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--switch-red);position:sticky;top:0;z-index:10;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.brand{font-weight:900;letter-spacing:.5px;text-shadow:0 1px 0 #0006}
.menu a{display:inline-block;color:#fff;text-decoration:none;margin-left:10px;padding:8px 14px;border-radius:999px;transition:.2s;background:transparent}
.menu a:hover{background:#ffffff1a}
.menu a .badge{display:inline-block;min-width:20px;padding:1px 8px;border-radius:999px;background:#0009;color:#fff;margin-left:6px;font-size:12px}


.container{max-width:1120px;margin:20px auto;padding:0 16px}
.footer{text-align:center;color:var(--muted);padding:24px;margin-top:34px;border-top:1px solid #1b2436}


.card{background:linear-gradient(180deg,#0f1420,#0b101a);border:1px solid #1b2436;border-radius:18px;padding:16px;margin-bottom:16px;box-shadow:0 8px 28px rgba(0,0,0,.35)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{background:#0b111c;border:1px solid #1b2436;border-radius:18px;padding:18px;text-align:center}


.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th,.tbl td{border-bottom:1px solid #1b2436;padding:10px 8px;vertical-align:top}
.tbl th{text-align:left;color:var(--muted);font-weight:700}


.flex{display:flex;gap:16px;align-items:flex-start}
.grow{flex:1}
.sidebar{width:340px}
label{display:block;margin:8px 0}


input,select,button,textarea{width:100%;padding:10px 12px;background:#0b111c;color:var(--text);border:1px solid #27314a;border-radius:12px}
button{cursor:pointer;margin-top:6px;background:linear-gradient(180deg,#131b2a,#0f1623);border:1px solid #27314a}
button:hover{filter:brightness(1.05)}
button.danger{background:linear-gradient(180deg,#3a1010,#250909);border-color:#4b1d1d}


.flash{padding:10px 12px;border-radius:12px;margin:12px 0}
.flash.success{background:#0d2a17;border:1px solid #134423}
.flash.error{background:#2a1010;border:1px solid #4b1d1d}
.tag{padding:3px 10px;border-radius:999px;font-size:12px;border:1px solid #1b2436}
.tag.ok{background:#092015;border-color:#0e3a2a}
.tag.warn{background:#2a1f0b;border-color:#4a3d17}
.tag.overdue{background:#3a1212;border-color:#612020}


/* 逾期橫幅 */
.banner-overdue{background:linear-gradient(90deg,var(--joycon-red),#e60012);padding:12px 16px;border-radius:16px;color:#fff;margin-bottom:12px;box-shadow:0 10px 26px rgba(230,0,18,.25)}


/* 借出中（逾期）列高亮 */
tr.overdue-row{background:linear-gradient(90deg,#1a0f12,#160b0b)}
tr.overdue-row td{border-bottom-color:#4b1d1d}


/* Joy-Con 分隔點綴 */
.card::after{content:"";display:block;height:4px;border-radius:2px;margin-top:10px;background:linear-gradient(90deg,var(--joycon-blue),var(--joycon-red));opacity:.15}
/* === Light mode override === */
body { background:#f5f7fb; color:#0b1220; }
.card { background:#ffffff; color:#0b1220; border:1px solid #e5e7eb; }
input,select,textarea { background:#ffffff; color:#0b1220; border:1px solid #cbd5e1; }
input::placeholder { color:#64748b; opacity:1; }
button { background:#e60012; color:#fff; border-color:#b90c14; }
.tbl th { color:#334155; }
.tag.ok{ background:#dcfce7; color:#166534; border-color:#bbf7d0; }
.tag.warn{ background:#fff7ed; color:#92400e; border-color:#fed7aa; }
.tag.overdue{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
/* === eShop style add-on === */
:root{
  --eshop-card-bg:#fff;
  --eshop-card-text:#0b1220;
  --eshop-border:#e5e7eb;
}
.eshop-toolbar{ display:flex; gap:12px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.eshop-toolbar .field{ display:flex; gap:8px; align-items:center; }
.eshop-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap:16px; }
.game-card{
  background:var(--eshop-card-bg); color:var(--eshop-card-text);
  border:1px solid var(--eshop-border); border-radius:18px; overflow:hidden;
  box-shadow:0 6px 20px rgba(0,0,0,.10); transition:transform .12s ease, box-shadow .12s ease;
  text-decoration:none;
}
.game-card:hover{ transform: translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.16); }
.game-card .cover{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; background:#111827; }
.game-card .body{ padding:12px 14px; }
.game-card .title{ font-weight:600; margin:0 0 6px; }
.game-card .meta{ font-size:12px; color:#475569; display:flex; gap:10px; }
.badge-status{
  position:absolute; top:10px; right:10px; padding:4px 8px; border-radius:999px;
  font-size:12px; font-weight:600; background:#dcfce7; color:#166534; border:1px solid #bbf7d0;
}
.badge-status.overdue{ background:#fee2e2; color:#991b1b; border-color:#fecaca; }
.card .hint{ font-size:12px; color:#64748b; }