/* ===== 共用元件（補充 app.css，不覆蓋既有規則；請勿把此檔內容混回 app.css） ===== */

/* 資訊磚：首頁儀表板、報表摘要共用（取代各頁重複的 .hx-tile / .ex-tile） */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 12px; }
.tile { background: var(--blue-soft); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.tile .l { font-size: 12px; color: var(--muted); }
.tile .v { font-size: 22px; font-weight: 800; color: var(--ink); margin-top: 6px; letter-spacing: .3px; }
.tile .v.neg { color: #d4537e; }

/* 金額用等寬數字，欄位對齊更整齊 */
table.list td.num, table.list th.num, .tile .v, .hx-net, .hx-holdsum b { font-variant-numeric: tabular-nums; }

/* 主題選單色塊預覽 */
.theme-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; border: 1px solid rgba(0,0,0,.2); }

/* 導覽列固定圖層：確保下拉選單/手機面板永遠在頁面內容（含 Hero 圖）之上。
   部分主題的 topbar 用了 backdrop-filter 會形成新堆疊環境，沒有 z-index 時
   會被較晚渲染的內容蓋住 → 統一給明確層級（低於 modal 的 100）。 */
.topbar { position: relative; z-index: 90; }

/* ===== 手機：寬表格自動變「卡片式堆疊」（<600px），不用橫向捲動 ===== */
/* 由 ui.js 依表頭自動為每個 td 補 data-label；欄名顯示在左、值在右 */
@media (max-width: 600px) {
    .table-scroll { overflow-x: visible; }
    .table-scroll table.list { min-width: 0; }
    table.list thead { display: none; }
    table.list, table.list tbody, table.list tfoot { display: block; width: 100%; }
    table.list tr {
        display: block; border: 1px solid var(--line); border-radius: 10px;
        background: var(--card); padding: 4px 12px; margin-bottom: 10px;
    }
    table.list tbody tr:hover td { background: transparent; }
    table.list td {
        display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
        border: none !important; padding: 7px 0; white-space: normal !important; text-align: right;
    }
    table.list td::before {
        content: attr(data-label); color: var(--muted); font-weight: 600;
        text-align: left; flex: 0 0 auto;
    }
    table.list td.actions { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
    table.list td.actions::before { flex-basis: 100%; }
    /* 整列 colspan（尚無資料、合計等）維持整塊顯示，不加欄名 */
    table.list tr.rc-full td { justify-content: center; text-align: center; }
    table.list tr.rc-full td::before { content: ''; }
    /* 卡片模式取消凍結首欄 */
    .table-scroll table.list th:first-child,
    .table-scroll table.list td:first-child { position: static; box-shadow: none; }
    table.list tfoot tr { background: var(--blue-soft); }
}

/* 尊重使用者「減少動態效果」偏好 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ===== リコリコ / LycoReco 主題（千束紅 × 瀧奈藏青，非官方角色圖，圖片為個人收藏） ===== */
[data-theme="lycoreco"] {
    --blue:       #d24455;   /* 千束紅（主色：導覽、按鈕、連結） */
    --blue-deep:  #b8394a;   /* hover / 深一階 */
    --blue-dark:  #8a2c3f;   /* 標題深酒紅 */
    --blue-soft:  #fce9ec;   /* 淺玫瑰（表頭、tag、tile 底） */
    --bg:         #f7f1ee;   /* 暖米色頁面底 */
    --ink:        #2f2a2c;   /* 主要文字 */
    --muted:      #97878b;   /* 次要文字 */
    --card:       #ffffff;
    --line:       #f0e1e3;   /* 邊線 */
    --line-in:    #e6cdd1;   /* 輸入框邊線 */
    --hero-a:     #d24455;   /* Hero 漸層起（無圖時 fallback） */
    --hero-b:     #6f83a0;   /* 瀧奈藏青（另一端） */
}
/* 背景：淡玫瑰斜線＋圓點（呼應紅／青 X 標誌，低調不干擾） */
[data-theme="lycoreco"] body {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23edd2d6'%20stroke-width='3'%3E%3Cline%20x1='22'%20y1='34'%20x2='46'%20y2='10'/%3E%3Cline%20x1='118'%20y1='150'%20x2='142'%20y2='126'/%3E%3C/g%3E%3Cg%20fill='%23f1dbde'%3E%3Ccircle%20cx='98'%20cy='52'%20r='4'/%3E%3Ccircle%20cx='40'%20cy='112'%20r='5'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}
/* Hero：雙人橫幅 + 左側千束紅漸層蓋住讓白字清楚 */
[data-theme="lycoreco"] .hero {
    min-height: 240px;
    display: flex; flex-direction: column; justify-content: center;
    background-image:
        linear-gradient(90deg, rgba(138,30,50,.94) 0%, rgba(138,30,50,.82) 34%, rgba(138,30,50,.34) 60%, rgba(138,30,50,0) 82%),
        url("../img/lycoreco/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, right top;
    background-size: cover, cover;
}
[data-theme="lycoreco"] .hero h1, [data-theme="lycoreco"] .hero p { text-shadow: 0 1px 4px rgba(80,12,22,.5); }
[data-theme="lycoreco"] .hero h1::after { content: " 🌺"; }
/* 登入頁：整頁雙人背景 + 半透明毛玻璃卡片 */
[data-theme="lycoreco"] body.auth-bg {
    background-image:
        linear-gradient(rgba(60,20,30,.34), rgba(60,20,30,.56)),
        url("../img/lycoreco/login.jpg");
    background-size: cover; background-position: center 18%; background-attachment: fixed;
}
[data-theme="lycoreco"] body.auth-bg .auth-card {
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255,255,255,.6);
}

/* ===== 灰原哀 / Haibara 主題（青綠冷色，取其瞳色，非官方角色圖，圖片為個人收藏） ===== */
[data-theme="haibara"] {
    --blue:       #2f8f7f;   /* 沉靜青綠（主色） */
    --blue-deep:  #26786a;   /* hover / 深一階 */
    --blue-dark:  #1f5f54;   /* 標題深青 */
    --blue-soft:  #e4f0ec;   /* 淺青灰（表頭、tag、tile 底） */
    --bg:         #eef4f1;   /* 冷調米白頁面底 */
    --ink:        #1f2d2a;   /* 主要文字 */
    --muted:      #798b85;   /* 次要文字 */
    --card:       #ffffff;
    --line:       #dcebe5;   /* 邊線 */
    --line-in:    #c4ddd4;   /* 輸入框邊線 */
    --hero-a:     #2f8f7f;
    --hero-b:     #6bb1a0;
}
/* 背景：淡青綠六角（化學分子意象）＋圓點，低調 */
[data-theme="haibara"] body {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23d3e6e0'%20stroke-width='3'%3E%3Cpolygon%20points='40,20%2058,30%2058,50%2040,60%2022,50%2022,30'/%3E%3Cpolygon%20points='120,100%20138,110%20138,130%20120,140%20102,130%20102,110'/%3E%3C/g%3E%3Cg%20fill='%23e0eeea'%3E%3Ccircle%20cx='112'%20cy='40'%20r='4'/%3E%3Ccircle%20cx='36'%20cy='118'%20r='4'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}
/* Hero：人物橫幅 + 左側深青漸層蓋住讓白字清楚 */
[data-theme="haibara"] .hero {
    min-height: 240px;
    display: flex; flex-direction: column; justify-content: center;
    background-image:
        linear-gradient(90deg, rgba(24,72,64,.95) 0%, rgba(24,72,64,.84) 34%, rgba(24,72,64,.34) 60%, rgba(24,72,64,0) 82%),
        url("../img/haibara/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, right top;
    background-size: cover, cover;
}
[data-theme="haibara"] .hero h1, [data-theme="haibara"] .hero p { text-shadow: 0 1px 4px rgba(10,40,34,.5); }
[data-theme="haibara"] .hero h1::after { content: " 🧪"; }
/* 登入頁：整頁背景 + 半透明毛玻璃卡片 */
[data-theme="haibara"] body.auth-bg {
    background-image:
        linear-gradient(rgba(16,44,40,.36), rgba(16,44,40,.58)),
        url("../img/haibara/login.jpg");
    background-size: cover; background-position: center 20%; background-attachment: fixed;
}
[data-theme="haibara"] body.auth-bg .auth-card {
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255,255,255,.6);
}

/* ===== 灰原哀（暖棕）：取其髮色的暖陶紅／可可配色 ===== */
[data-theme="haibara-warm"] {
    --blue:       #c06f5e;   /* 暖陶紅（主色） */
    --blue-deep:  #a85b4b;
    --blue-dark:  #834437;   /* 標題深可可 */
    --blue-soft:  #f6e9e3;   /* 暖奶油（表頭、tag、tile 底） */
    --bg:         #f6f0ea;   /* 暖象牙頁面底 */
    --ink:        #322a26;
    --muted:      #9c8a80;
    --card:       #ffffff;
    --line:       #efe2d9;
    --line-in:    #e2ccc0;
    --hero-a:     #c06f5e;
    --hero-b:     #d9a58f;
}
[data-theme="haibara-warm"] body {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23ecdcd2'%20stroke-width='3'%3E%3Cpolygon%20points='40,20%2058,30%2058,50%2040,60%2022,50%2022,30'/%3E%3Cpolygon%20points='120,100%20138,110%20138,130%20120,140%20102,130%20102,110'/%3E%3C/g%3E%3Cg%20fill='%23f1e2da'%3E%3Ccircle%20cx='112'%20cy='40'%20r='4'/%3E%3Ccircle%20cx='36'%20cy='118'%20r='4'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}
[data-theme="haibara-warm"] .hero {
    min-height: 240px;
    display: flex; flex-direction: column; justify-content: center;
    background-image:
        linear-gradient(90deg, rgba(108,54,44,.95) 0%, rgba(108,54,44,.84) 34%, rgba(108,54,44,.32) 60%, rgba(108,54,44,0) 82%),
        url("../img/haibara-warm/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, right top;
    background-size: cover, cover;
}
[data-theme="haibara-warm"] .hero h1, [data-theme="haibara-warm"] .hero p { text-shadow: 0 1px 4px rgba(60,24,18,.5); }
[data-theme="haibara-warm"] .hero h1::after { content: " 🧪"; }
[data-theme="haibara-warm"] body.auth-bg {
    background-image:
        linear-gradient(rgba(50,24,18,.36), rgba(50,24,18,.58)),
        url("../img/haibara-warm/login.jpg");
    background-size: cover; background-position: center 18%; background-attachment: fixed;
}
[data-theme="haibara-warm"] body.auth-bg .auth-card {
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255,255,255,.6);
}

/* ===== 互動微動效（全站；prefers-reduced-motion 會自動關閉） ===== */
.btn, .btn-ghost { transition: background .15s, transform .12s, box-shadow .15s; }
.btn:hover, .btn-ghost:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(53,106,156,.22); }
.btn:active, .btn-ghost:active { transform: translateY(0); box-shadow: none; }

.actions a, .actions button { transition: background .12s, border-color .12s, transform .1s; }
.actions a:hover, .actions button:hover { transform: translateY(-1px); }

.tile { transition: transform .14s, box-shadow .16s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }

.topbar a, .navtop { transition: opacity .15s; }

/* 卡片載入淡入上升 */
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.container > .card { animation: cardIn .34s ease both; }

/* ===== Hero 動態光澤：緩慢掃過的光帶 ===== */
.hero { position: relative; overflow: hidden; }
.hero > * { position: relative; z-index: 1; }
.hero::before {
    content: ''; position: absolute; top: -60%; left: -60%; width: 55%; height: 220%;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.16) 50%, transparent 100%);
    transform: skewX(-18deg); pointer-events: none;
    animation: heroSheen 8s ease-in-out infinite;
}
@keyframes heroSheen { 0% { left: -60%; } 55%, 100% { left: 140%; } }

/* 桌機把含人物的 Hero 加高約 50%（240→360px），避免寬扁裁切只剩頭部；手機維持原高度 */
@media (min-width: 700px) {
    [data-theme="gura"] .hero,
    [data-theme="gura2"] .hero,
    [data-theme="okakoro"] .hero,
    [data-theme="lycoreco"] .hero,
    [data-theme="haibara"] .hero,
    [data-theme="haibara-warm"] .hero { min-height: 360px; }
}

/* ===== 手機漢堡選單改版：標題列高度固定，選單改成浮在下方的白色面板 ===== */
@media (max-width: 700px) {
    .topbar { position: relative; flex-wrap: nowrap; }
    .brand { order: 1; }
    .nav-toggle { order: 2; margin-left: auto; }
    .nav-avatar-link { order: 3; margin: 0 0 0 10px; }

    /* 展開時：圓角白色面板浮在標題列下方（不再把藍色列撐高） */
    .topbar.nav-open .navlinks {
        position: absolute; top: calc(100% + 6px); left: auto; right: 8px;
        width: auto; min-width: 200px; max-width: 82vw;
        flex-direction: column; align-items: stretch;
        background: var(--card); color: var(--ink);
        border: 1px solid var(--line); border-radius: 14px;
        box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
        padding: 8px; margin: 0; row-gap: 2px; z-index: 300;
        max-height: calc(100vh - 72px); overflow-y: auto;
    }
    /* 面板內連結：深色字、整列可點、圓角 hover */
    .topbar .navlinks > a,
    .topbar .navtop {
        color: var(--ink); width: 100%; box-sizing: border-box;
        padding: 12px 14px; margin: 0; border-radius: 8px; font-size: 15px;
    }
    .topbar .navlinks > a:hover,
    .topbar .navtop:hover { background: var(--blue-soft); text-decoration: none; }
    .topbar .navlinks > a.on,
    .topbar .navtop.on { color: var(--blue-deep); background: var(--blue-soft); text-decoration: none; }
    .topbar .navtop { display: flex; align-items: center; justify-content: space-between; }

    /* 子選單：改為縮排的清單，不再是有邊框的小方塊 */
    .topbar .navgroup { width: 100%; }
    .topbar .navmenu {
        position: static; width: auto; min-width: 0; box-shadow: none;
        border: none; background: transparent; margin: 0 0 4px; padding: 2px 0 2px 10px;
    }
    .topbar .navmenu a { color: var(--ink); padding: 10px 14px; border-radius: 8px; }
    .topbar .navmenu a:hover { background: var(--blue-soft); text-decoration: none; }
    .topbar .navmenu a.on { color: var(--blue-deep); background: var(--blue-soft); }
    .topbar .navmenu-label { border-top: 1px solid var(--line); color: var(--muted); margin-top: 6px; }
}

/* ===== GURA II（深藍／街頭；圖片為個人收藏，非官方角色圖） ===== */
[data-theme="gura2"] {
    --blue:       #3f78d6;   /* 皇家藍（主色） */
    --blue-deep:  #2f63bd;
    --blue-dark:  #24467f;   /* 標題深藍 */
    --blue-soft:  #e8f0fc;   /* 淺藍（表頭、tag、tile 底） */
    --bg:         #eef3fb;
    --ink:        #1e2a3a;
    --muted:      #7a8798;
    --card:       #ffffff;
    --line:       #dde7f4;
    --line-in:    #c7d7ee;
    --hero-a:     #3f78d6;
    --hero-b:     #7fc4e6;   /* 帶點鯊魚青 */
}
[data-theme="gura2"] body {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%20viewBox='0%200%20150%20150'%3E%3Cg%20fill='none'%20stroke='%23cfe0f6'%20stroke-width='2'%3E%3Ccircle%20cx='30'%20cy='36'%20r='7'/%3E%3Ccircle%20cx='108'%20cy='96'%20r='11'/%3E%3Ccircle%20cx='124'%20cy='30'%20r='4'/%3E%3Ccircle%20cx='58'%20cy='120'%20r='5'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}
[data-theme="gura2"] .hero {
    min-height: 240px;
    display: flex; flex-direction: column; justify-content: center;
    background-image:
        linear-gradient(90deg, rgba(22,42,82,.94) 0%, rgba(22,42,82,.80) 34%, rgba(22,42,82,.28) 60%, rgba(22,42,82,0) 80%),
        url("../img/gura2/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, right top;
    background-size: cover, cover;
}
[data-theme="gura2"] .hero h1, [data-theme="gura2"] .hero p { text-shadow: 0 1px 4px rgba(8,20,45,.5); }
[data-theme="gura2"] .hero h1::after { content: " 🔱"; }
[data-theme="gura2"] body.auth-bg {
    background-image:
        linear-gradient(rgba(14,26,54,.40), rgba(14,26,54,.60)),
        url("../img/gura2/login.jpg");
    background-size: cover; background-position: center 12%; background-attachment: fixed;
}
[data-theme="gura2"] body.auth-bg .auth-card {
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255,255,255,.6);
}
/* 桌機加高需放在 gura2 主題區塊之後才蓋得過其 min-height:240（同分後者贏） */
@media (min-width: 700px) {
    [data-theme="gura2"] .hero { min-height: 360px; }
}

/* ===== Nachoneko（柔和粉彩水藍／貓；圖片為個人收藏，非官方角色圖） ===== */
[data-theme="nachoneko"] {
    --blue:       #4fb3be;   /* 柔和水藍（主色） */
    --blue-deep:  #3d99a3;
    --blue-dark:  #2a6a72;   /* 標題深青 */
    --blue-soft:  #e7f4f5;   /* 淺水藍（表頭、tag、tile 底） */
    --bg:         #eef6f7;
    --ink:        #253138;
    --muted:      #7e939a;
    --card:       #ffffff;
    --line:       #d9ebed;
    --line-in:    #c2e0e3;
    --hero-a:     #4fb3be;
    --hero-b:     #9ad7dd;
}
/* 背景：淡水藍貓掌印 */
[data-theme="nachoneko"] body {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%20viewBox='0%200%20150%20150'%3E%3Cg%20fill='%23d3ecef'%3E%3Cellipse%20cx='40'%20cy='52'%20rx='11'%20ry='9'/%3E%3Ccircle%20cx='28'%20cy='38'%20r='4'/%3E%3Ccircle%20cx='40'%20cy='34'%20r='4'/%3E%3Ccircle%20cx='52'%20cy='38'%20r='4'/%3E%3Cellipse%20cx='108'%20cy='116'%20rx='11'%20ry='9'/%3E%3Ccircle%20cx='96'%20cy='102'%20r='4'/%3E%3Ccircle%20cx='108'%20cy='98'%20r='4'/%3E%3Ccircle%20cx='120'%20cy='102'%20r='4'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}
[data-theme="nachoneko"] .hero {
    min-height: 240px;
    display: flex; flex-direction: column; justify-content: center;
    background-image:
        linear-gradient(90deg, rgba(28,78,84,.93) 0%, rgba(28,78,84,.80) 34%, rgba(28,78,84,.28) 60%, rgba(28,78,84,0) 80%),
        url("../img/nachoneko/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, right top;
    background-size: cover, cover;
}
[data-theme="nachoneko"] .hero h1, [data-theme="nachoneko"] .hero p { text-shadow: 0 1px 4px rgba(8,34,38,.5); }
[data-theme="nachoneko"] .hero h1::after { content: " 🐱"; }
[data-theme="nachoneko"] body.auth-bg {
    background-image:
        linear-gradient(rgba(16,46,50,.38), rgba(16,46,50,.58)),
        url("../img/nachoneko/login.jpg");
    background-size: cover; background-position: center 30%; background-attachment: fixed;
}
[data-theme="nachoneko"] body.auth-bg .auth-card {
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border-color: rgba(255,255,255,.6);
}
@media (min-width: 700px) {
    [data-theme="nachoneko"] .hero { min-height: 360px; }
}

/* ===== 追加 12 組角色主題（圖片為個人收藏，非官方角色圖） ===== */

/* GURA 深藍 */
[data-theme="gura3"] { --blue:#3a5bb0; --blue-deep:#2f4a92; --blue-dark:#223566; --blue-soft:#e9edf9; --bg:#eef1fa; --ink:#1e2438; --muted:#7c85a0; --card:#ffffff; --line:#dde2f2; --line-in:#c6cee8; --hero-a:#3a5bb0; --hero-b:#6f86c8; }
[data-theme="gura3"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(24,32,64,.93) 0%,rgba(24,32,64,.80) 34%,rgba(24,32,64,.28) 60%,rgba(24,32,64,0) 80%),url("../img/gura3/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="gura3"] .hero h1,[data-theme="gura3"] .hero p{ text-shadow:0 1px 4px rgba(10,16,45,.5); }
[data-theme="gura3"] .hero h1::after{ content:" 🔱"; }
[data-theme="gura3"] body.auth-bg{ background-image:linear-gradient(rgba(16,22,48,.40),rgba(16,22,48,.60)),url("../img/gura3/login.jpg"); background-size:cover; background-position:center 18%; background-attachment:fixed; }
[data-theme="gura3"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

/* GURA 淡藍 */
[data-theme="gura4"] { --blue:#6ba9d8; --blue-deep:#5590c0; --blue-dark:#3c6a94; --blue-soft:#eef6fc; --bg:#f2f8fd; --ink:#26333f; --muted:#85929e; --card:#ffffff; --line:#dfeaf4; --line-in:#cadeee; --hero-a:#6ba9d8; --hero-b:#bfe0f2; }
[data-theme="gura4"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(40,66,96,.92) 0%,rgba(40,66,96,.78) 34%,rgba(40,66,96,.26) 60%,rgba(40,66,96,0) 80%),url("../img/gura4/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="gura4"] .hero h1,[data-theme="gura4"] .hero p{ text-shadow:0 1px 4px rgba(18,36,55,.5); }
[data-theme="gura4"] .hero h1::after{ content:" 🎈"; }
[data-theme="gura4"] body.auth-bg{ background-image:linear-gradient(rgba(28,48,72,.38),rgba(28,48,72,.58)),url("../img/gura4/login.jpg"); background-size:cover; background-position:center 15%; background-attachment:fixed; }
[data-theme="gura4"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

/* GURA 水藍 */
[data-theme="gura5"] { --blue:#2fb3a6; --blue-deep:#259487; --blue-dark:#1c6a60; --blue-soft:#e4f5f2; --bg:#edf7f5; --ink:#21332f; --muted:#7c948f; --card:#ffffff; --line:#d7ece7; --line-in:#bfe1da; --hero-a:#2fb3a6; --hero-b:#7fd6c9; }
[data-theme="gura5"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(18,72,66,.93) 0%,rgba(18,72,66,.80) 34%,rgba(18,72,66,.28) 60%,rgba(18,72,66,0) 80%),url("../img/gura5/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="gura5"] .hero h1,[data-theme="gura5"] .hero p{ text-shadow:0 1px 4px rgba(8,40,36,.5); }
[data-theme="gura5"] .hero h1::after{ content:" 🐠"; }
[data-theme="gura5"] body.auth-bg{ background-image:linear-gradient(rgba(12,54,50,.38),rgba(12,54,50,.58)),url("../img/gura5/login.jpg"); background-size:cover; background-position:center 20%; background-attachment:fixed; }
[data-theme="gura5"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

/* 灰原哀（亮青） */
[data-theme="haibara3"] { --blue:#23a7bd; --blue-deep:#1c8c9f; --blue-dark:#145f6c; --blue-soft:#e4f4f7; --bg:#edf6f8; --ink:#20323a; --muted:#7b9098; --card:#ffffff; --line:#d7ebef; --line-in:#bfe0e6; --hero-a:#23a7bd; --hero-b:#79d3df; }
[data-theme="haibara3"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(14,70,80,.93) 0%,rgba(14,70,80,.80) 34%,rgba(14,70,80,.28) 60%,rgba(14,70,80,0) 80%),url("../img/haibara3/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="haibara3"] .hero h1,[data-theme="haibara3"] .hero p{ text-shadow:0 1px 4px rgba(6,40,46,.5); }
[data-theme="haibara3"] .hero h1::after{ content:" 🧪"; }
[data-theme="haibara3"] body.auth-bg{ background-image:linear-gradient(rgba(10,52,60,.38),rgba(10,52,60,.58)),url("../img/haibara3/login.jpg"); background-size:cover; background-position:center 18%; background-attachment:fixed; }
[data-theme="haibara3"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

/* 灰原哀（琥珀） */
[data-theme="haibara4"] { --blue:#cf9038; --blue-deep:#b87b2e; --blue-dark:#85561d; --blue-soft:#fbeeda; --bg:#f8f2e9; --ink:#33291d; --muted:#9c8a76; --card:#ffffff; --line:#efe1cf; --line-in:#e2ccae; --hero-a:#cf9038; --hero-b:#ecc07f; }
[data-theme="haibara4"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(92,58,22,.93) 0%,rgba(92,58,22,.80) 34%,rgba(92,58,22,.28) 60%,rgba(92,58,22,0) 80%),url("../img/haibara4/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="haibara4"] .hero h1,[data-theme="haibara4"] .hero p{ text-shadow:0 1px 4px rgba(50,30,12,.5); }
[data-theme="haibara4"] .hero h1::after{ content:" 🧪"; }
[data-theme="haibara4"] body.auth-bg{ background-image:linear-gradient(rgba(64,40,16,.40),rgba(64,40,16,.60)),url("../img/haibara4/login.jpg"); background-size:cover; background-position:center 18%; background-attachment:fixed; }
[data-theme="haibara4"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

/* 灰原哀（玫瑰） */
[data-theme="haibara5"] { --blue:#cf6480; --blue-deep:#b5526b; --blue-dark:#86394d; --blue-soft:#fbe8ee; --bg:#f9eff2; --ink:#322329; --muted:#9c8189; --card:#ffffff; --line:#efdce3; --line-in:#e2c4ce; --hero-a:#cf6480; --hero-b:#ec9fb4; }
[data-theme="haibara5"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(84,28,44,.93) 0%,rgba(84,28,44,.80) 34%,rgba(84,28,44,.28) 60%,rgba(84,28,44,0) 80%),url("../img/haibara5/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="haibara5"] .hero h1,[data-theme="haibara5"] .hero p{ text-shadow:0 1px 4px rgba(50,16,26,.5); }
[data-theme="haibara5"] .hero h1::after{ content:" 🧪"; }
[data-theme="haibara5"] body.auth-bg{ background-image:linear-gradient(rgba(60,20,32,.38),rgba(60,20,32,.58)),url("../img/haibara5/login.jpg"); background-size:cover; background-position:center 15%; background-attachment:fixed; }
[data-theme="haibara5"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

/* リコリコ（藏青） */
[data-theme="lycoreco2"] { --blue:#3f6bb5; --blue-deep:#315699; --blue-dark:#24406f; --blue-soft:#e9eef8; --bg:#eef2fa; --ink:#1f2839; --muted:#7c86a0; --card:#ffffff; --line:#dde3f1; --line-in:#c6d0e8; --hero-a:#3f6bb5; --hero-b:#7f97c8; }
[data-theme="lycoreco2"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(24,34,66,.93) 0%,rgba(24,34,66,.80) 34%,rgba(24,34,66,.28) 60%,rgba(24,34,66,0) 80%),url("../img/lycoreco2/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="lycoreco2"] .hero h1,[data-theme="lycoreco2"] .hero p{ text-shadow:0 1px 4px rgba(10,18,44,.5); }
[data-theme="lycoreco2"] .hero h1::after{ content:" 🌸"; }
[data-theme="lycoreco2"] body.auth-bg{ background-image:linear-gradient(rgba(16,24,52,.40),rgba(16,24,52,.60)),url("../img/lycoreco2/login.jpg"); background-size:cover; background-position:center 18%; background-attachment:fixed; }
[data-theme="lycoreco2"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

/* Nachoneko（灰藍） */
[data-theme="nachoneko2"] { --blue:#5a7fb0; --blue-deep:#486a98; --blue-dark:#33496c; --blue-soft:#eaeff7; --bg:#eff3f9; --ink:#232c38; --muted:#7f8b9c; --card:#ffffff; --line:#dde5f0; --line-in:#c6d3e6; --hero-a:#5a7fb0; --hero-b:#9fb6d6; }
[data-theme="nachoneko2"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(28,40,64,.93) 0%,rgba(28,40,64,.80) 34%,rgba(28,40,64,.28) 60%,rgba(28,40,64,0) 80%),url("../img/nachoneko2/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="nachoneko2"] .hero h1,[data-theme="nachoneko2"] .hero p{ text-shadow:0 1px 4px rgba(12,20,40,.5); }
[data-theme="nachoneko2"] .hero h1::after{ content:" 🐱"; }
[data-theme="nachoneko2"] body.auth-bg{ background-image:linear-gradient(rgba(18,28,52,.40),rgba(18,28,52,.60)),url("../img/nachoneko2/login.jpg"); background-size:cover; background-position:center 18%; background-attachment:fixed; }
[data-theme="nachoneko2"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

/* Nachoneko（天藍） */
[data-theme="nachoneko3"] { --blue:#40b6d6; --blue-deep:#329cba; --blue-dark:#226a80; --blue-soft:#e6f5fa; --bg:#edf7fb; --ink:#22323a; --muted:#7c939c; --card:#ffffff; --line:#d7ecf2; --line-in:#bfe0ea; --hero-a:#40b6d6; --hero-b:#8fd6ea; }
[data-theme="nachoneko3"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(16,70,86,.93) 0%,rgba(16,70,86,.80) 34%,rgba(16,70,86,.28) 60%,rgba(16,70,86,0) 80%),url("../img/nachoneko3/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="nachoneko3"] .hero h1,[data-theme="nachoneko3"] .hero p{ text-shadow:0 1px 4px rgba(8,40,50,.5); }
[data-theme="nachoneko3"] .hero h1::after{ content:" 🐱"; }
[data-theme="nachoneko3"] body.auth-bg{ background-image:linear-gradient(rgba(10,52,66,.38),rgba(10,52,66,.58)),url("../img/nachoneko3/login.jpg"); background-size:cover; background-position:center 20%; background-attachment:fixed; }
[data-theme="nachoneko3"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

/* Nachoneko（薰衣草） */
[data-theme="nachoneko4"] { --blue:#7c93d8; --blue-deep:#6579c0; --blue-dark:#47548c; --blue-soft:#eceffb; --bg:#f1f3fb; --ink:#272a3c; --muted:#838aa2; --card:#ffffff; --line:#dfe3f4; --line-in:#c9cfee; --hero-a:#7c93d8; --hero-b:#aebbe8; }
[data-theme="nachoneko4"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(34,42,82,.93) 0%,rgba(34,42,82,.80) 34%,rgba(34,42,82,.28) 60%,rgba(34,42,82,0) 80%),url("../img/nachoneko4/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="nachoneko4"] .hero h1,[data-theme="nachoneko4"] .hero p{ text-shadow:0 1px 4px rgba(16,20,48,.5); }
[data-theme="nachoneko4"] .hero h1::after{ content:" 🐟"; }
[data-theme="nachoneko4"] body.auth-bg{ background-image:linear-gradient(rgba(22,28,62,.40),rgba(22,28,62,.60)),url("../img/nachoneko4/login.jpg"); background-size:cover; background-position:center 18%; background-attachment:fixed; }
[data-theme="nachoneko4"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

/* OKAKORO（暖橘） */
[data-theme="okakoro2"] { --blue:#d1913f; --blue-deep:#ba7c30; --blue-dark:#8a5a24; --blue-soft:#fbeede; --bg:#f8f1e8; --ink:#33291f; --muted:#9c8a76; --card:#ffffff; --line:#efe4d2; --line-in:#e2ceac; --hero-a:#d1913f; --hero-b:#ecc888; }
[data-theme="okakoro2"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(92,58,24,.93) 0%,rgba(92,58,24,.80) 34%,rgba(92,58,24,.28) 60%,rgba(92,58,24,0) 80%),url("../img/okakoro2/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="okakoro2"] .hero h1,[data-theme="okakoro2"] .hero p{ text-shadow:0 1px 4px rgba(50,30,12,.5); }
[data-theme="okakoro2"] .hero h1::after{ content:" 🐶"; }
[data-theme="okakoro2"] body.auth-bg{ background-image:linear-gradient(rgba(64,40,16,.40),rgba(64,40,16,.60)),url("../img/okakoro2/login.jpg"); background-size:cover; background-position:center 18%; background-attachment:fixed; }
[data-theme="okakoro2"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

/* OKAKORO（薰紫） */
[data-theme="okakoro3"] { --blue:#9b7fce; --blue-deep:#856bb8; --blue-dark:#5f4a8a; --blue-soft:#efeafb; --bg:#f4f0fb; --ink:#2a2440; --muted:#837b96; --card:#ffffff; --line:#e6def4; --line-in:#d6c9ee; --hero-a:#9b7fce; --hero-b:#c3a7e0; }
[data-theme="okakoro3"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(48,32,80,.93) 0%,rgba(48,32,80,.80) 34%,rgba(48,32,80,.28) 60%,rgba(48,32,80,0) 80%),url("../img/okakoro3/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="okakoro3"] .hero h1,[data-theme="okakoro3"] .hero p{ text-shadow:0 1px 4px rgba(28,16,54,.5); }
[data-theme="okakoro3"] .hero h1::after{ content:" 🐾"; }
[data-theme="okakoro3"] body.auth-bg{ background-image:linear-gradient(rgba(34,22,60,.40),rgba(34,22,60,.60)),url("../img/okakoro3/login.jpg"); background-size:cover; background-position:center 18%; background-attachment:fixed; }
[data-theme="okakoro3"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

/* 桌機加高（放在以上主題之後，確保蓋過各自的 min-height:240） */
@media (min-width: 700px) {
    [data-theme="gura3"] .hero, [data-theme="gura4"] .hero, [data-theme="gura5"] .hero,
    [data-theme="haibara3"] .hero, [data-theme="haibara4"] .hero, [data-theme="haibara5"] .hero,
    [data-theme="lycoreco2"] .hero,
    [data-theme="nachoneko2"] .hero, [data-theme="nachoneko3"] .hero, [data-theme="nachoneko4"] .hero,
    [data-theme="okakoro2"] .hero, [data-theme="okakoro3"] .hero { min-height: 360px; }
}

/* ===== 追加 12 組的背景花紋（GURA 泡泡／灰原哀六角／リコリコ斜線／Nachoneko・OKAKORO 貓掌） ===== */
[data-theme="gura3"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%20viewBox='0%200%20150%20150'%3E%3Cg%20fill='none'%20stroke='%23d3dbf0'%20stroke-width='2'%3E%3Ccircle%20cx='30'%20cy='36'%20r='7'/%3E%3Ccircle%20cx='108'%20cy='96'%20r='11'/%3E%3Ccircle%20cx='124'%20cy='30'%20r='4'/%3E%3Ccircle%20cx='58'%20cy='120'%20r='5'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; }
[data-theme="gura4"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%20viewBox='0%200%20150%20150'%3E%3Cg%20fill='none'%20stroke='%23d3e6f4'%20stroke-width='2'%3E%3Ccircle%20cx='30'%20cy='36'%20r='7'/%3E%3Ccircle%20cx='108'%20cy='96'%20r='11'/%3E%3Ccircle%20cx='124'%20cy='30'%20r='4'/%3E%3Ccircle%20cx='58'%20cy='120'%20r='5'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; }
[data-theme="gura5"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%20viewBox='0%200%20150%20150'%3E%3Cg%20fill='none'%20stroke='%23cfe8e2'%20stroke-width='2'%3E%3Ccircle%20cx='30'%20cy='36'%20r='7'/%3E%3Ccircle%20cx='108'%20cy='96'%20r='11'/%3E%3Ccircle%20cx='124'%20cy='30'%20r='4'/%3E%3Ccircle%20cx='58'%20cy='120'%20r='5'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; }
[data-theme="haibara3"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23cfe6ea'%20stroke-width='3'%3E%3Cpolygon%20points='40,20%2058,30%2058,50%2040,60%2022,50%2022,30'/%3E%3Cpolygon%20points='120,100%20138,110%20138,130%20120,140%20102,130%20102,110'/%3E%3C/g%3E%3Cg%20fill='%23dceff2'%3E%3Ccircle%20cx='112'%20cy='40'%20r='4'/%3E%3Ccircle%20cx='36'%20cy='118'%20r='4'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; }
[data-theme="haibara4"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23ecdcc6'%20stroke-width='3'%3E%3Cpolygon%20points='40,20%2058,30%2058,50%2040,60%2022,50%2022,30'/%3E%3Cpolygon%20points='120,100%20138,110%20138,130%20120,140%20102,130%20102,110'/%3E%3C/g%3E%3Cg%20fill='%23f0e6d6'%3E%3Ccircle%20cx='112'%20cy='40'%20r='4'/%3E%3Ccircle%20cx='36'%20cy='118'%20r='4'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; }
[data-theme="haibara5"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23eed7de'%20stroke-width='3'%3E%3Cpolygon%20points='40,20%2058,30%2058,50%2040,60%2022,50%2022,30'/%3E%3Cpolygon%20points='120,100%20138,110%20138,130%20120,140%20102,130%20102,110'/%3E%3C/g%3E%3Cg%20fill='%23f2dfe6'%3E%3Ccircle%20cx='112'%20cy='40'%20r='4'/%3E%3Ccircle%20cx='36'%20cy='118'%20r='4'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; }
[data-theme="lycoreco2"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23d6dcef'%20stroke-width='3'%3E%3Cline%20x1='22'%20y1='34'%20x2='46'%20y2='10'/%3E%3Cline%20x1='118'%20y1='150'%20x2='142'%20y2='126'/%3E%3C/g%3E%3Cg%20fill='%23e0e6f4'%3E%3Ccircle%20cx='98'%20cy='52'%20r='4'/%3E%3Ccircle%20cx='40'%20cy='112'%20r='5'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; }
[data-theme="nachoneko2"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%20viewBox='0%200%20150%20150'%3E%3Cg%20fill='%23d6ddec'%3E%3Cellipse%20cx='40'%20cy='52'%20rx='11'%20ry='9'/%3E%3Ccircle%20cx='28'%20cy='38'%20r='4'/%3E%3Ccircle%20cx='40'%20cy='34'%20r='4'/%3E%3Ccircle%20cx='52'%20cy='38'%20r='4'/%3E%3Cellipse%20cx='108'%20cy='116'%20rx='11'%20ry='9'/%3E%3Ccircle%20cx='96'%20cy='102'%20r='4'/%3E%3Ccircle%20cx='108'%20cy='98'%20r='4'/%3E%3Ccircle%20cx='120'%20cy='102'%20r='4'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; }
[data-theme="nachoneko3"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%20viewBox='0%200%20150%20150'%3E%3Cg%20fill='%23cfe7f0'%3E%3Cellipse%20cx='40'%20cy='52'%20rx='11'%20ry='9'/%3E%3Ccircle%20cx='28'%20cy='38'%20r='4'/%3E%3Ccircle%20cx='40'%20cy='34'%20r='4'/%3E%3Ccircle%20cx='52'%20cy='38'%20r='4'/%3E%3Cellipse%20cx='108'%20cy='116'%20rx='11'%20ry='9'/%3E%3Ccircle%20cx='96'%20cy='102'%20r='4'/%3E%3Ccircle%20cx='108'%20cy='98'%20r='4'/%3E%3Ccircle%20cx='120'%20cy='102'%20r='4'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; }
[data-theme="nachoneko4"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%20viewBox='0%200%20150%20150'%3E%3Cg%20fill='%23dce0f2'%3E%3Cellipse%20cx='40'%20cy='52'%20rx='11'%20ry='9'/%3E%3Ccircle%20cx='28'%20cy='38'%20r='4'/%3E%3Ccircle%20cx='40'%20cy='34'%20r='4'/%3E%3Ccircle%20cx='52'%20cy='38'%20r='4'/%3E%3Cellipse%20cx='108'%20cy='116'%20rx='11'%20ry='9'/%3E%3Ccircle%20cx='96'%20cy='102'%20r='4'/%3E%3Ccircle%20cx='108'%20cy='98'%20r='4'/%3E%3Ccircle%20cx='120'%20cy='102'%20r='4'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; }
[data-theme="okakoro2"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%20viewBox='0%200%20150%20150'%3E%3Cg%20fill='%23ecdcc4'%3E%3Cellipse%20cx='40'%20cy='52'%20rx='11'%20ry='9'/%3E%3Ccircle%20cx='28'%20cy='38'%20r='4'/%3E%3Ccircle%20cx='40'%20cy='34'%20r='4'/%3E%3Ccircle%20cx='52'%20cy='38'%20r='4'/%3E%3Cellipse%20cx='108'%20cy='116'%20rx='11'%20ry='9'/%3E%3Ccircle%20cx='96'%20cy='102'%20r='4'/%3E%3Ccircle%20cx='108'%20cy='98'%20r='4'/%3E%3Ccircle%20cx='120'%20cy='102'%20r='4'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; }
[data-theme="okakoro3"] body { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='150'%20height='150'%20viewBox='0%200%20150%20150'%3E%3Cg%20fill='%23e2d8f0'%3E%3Cellipse%20cx='40'%20cy='52'%20rx='11'%20ry='9'/%3E%3Ccircle%20cx='28'%20cy='38'%20r='4'/%3E%3Ccircle%20cx='40'%20cy='34'%20r='4'/%3E%3Ccircle%20cx='52'%20cy='38'%20r='4'/%3E%3Cellipse%20cx='108'%20cy='116'%20rx='11'%20ry='9'/%3E%3Ccircle%20cx='96'%20cy='102'%20r='4'/%3E%3Ccircle%20cx='108'%20cy='98'%20r='4'/%3E%3Ccircle%20cx='120'%20cy='102'%20r='4'/%3E%3C/g%3E%3C/svg%3E"); background-attachment: fixed; }

/* ===== リコリコ 追加三款（青碧／暮色／奶油金；圖片為個人收藏，非官方角色圖） ===== */
[data-theme="lycoreco3"] { --blue:#2f9e82; --blue-deep:#268569; --blue-dark:#1b5f4b; --blue-soft:#e4f4ee; --bg:#edf6f2; --ink:#20322b; --muted:#7b948a; --card:#ffffff; --line:#d7ece3; --line-in:#bfe1d3; --hero-a:#2f9e82; --hero-b:#7fd0b6; }
[data-theme="lycoreco3"] body { background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23cfe9df'%20stroke-width='3'%3E%3Cline%20x1='22'%20y1='34'%20x2='46'%20y2='10'/%3E%3Cline%20x1='118'%20y1='150'%20x2='142'%20y2='126'/%3E%3C/g%3E%3Cg%20fill='%23dcefe7'%3E%3Ccircle%20cx='98'%20cy='52'%20r='4'/%3E%3Ccircle%20cx='40'%20cy='112'%20r='5'/%3E%3C/g%3E%3C/svg%3E"); background-attachment:fixed; }
[data-theme="lycoreco3"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(14,66,52,.93) 0%,rgba(14,66,52,.80) 34%,rgba(14,66,52,.28) 60%,rgba(14,66,52,0) 80%),url("../img/lycoreco3/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="lycoreco3"] .hero h1,[data-theme="lycoreco3"] .hero p{ text-shadow:0 1px 4px rgba(6,38,30,.5); }
[data-theme="lycoreco3"] .hero h1::after{ content:" 🌸"; }
[data-theme="lycoreco3"] body.auth-bg{ background-image:linear-gradient(rgba(10,48,38,.38),rgba(10,48,38,.58)),url("../img/lycoreco3/login.jpg"); background-size:cover; background-position:center 15%; background-attachment:fixed; }
[data-theme="lycoreco3"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

[data-theme="lycoreco4"] { --blue:#b06a3c; --blue-deep:#985831; --blue-dark:#6e3f22; --blue-soft:#f8ebdf; --bg:#f7f0e8; --ink:#33281f; --muted:#9c8977; --card:#ffffff; --line:#efe0d0; --line-in:#e2cab2; --hero-a:#b06a3c; --hero-b:#dba277; }
[data-theme="lycoreco4"] body { background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23ecdccb'%20stroke-width='3'%3E%3Cline%20x1='22'%20y1='34'%20x2='46'%20y2='10'/%3E%3Cline%20x1='118'%20y1='150'%20x2='142'%20y2='126'/%3E%3C/g%3E%3Cg%20fill='%23f0e3d4'%3E%3Ccircle%20cx='98'%20cy='52'%20r='4'/%3E%3Ccircle%20cx='40'%20cy='112'%20r='5'/%3E%3C/g%3E%3C/svg%3E"); background-attachment:fixed; }
[data-theme="lycoreco4"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(74,44,20,.93) 0%,rgba(74,44,20,.80) 34%,rgba(74,44,20,.28) 60%,rgba(74,44,20,0) 80%),url("../img/lycoreco4/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="lycoreco4"] .hero h1,[data-theme="lycoreco4"] .hero p{ text-shadow:0 1px 4px rgba(44,24,10,.5); }
[data-theme="lycoreco4"] .hero h1::after{ content:" 🌇"; }
[data-theme="lycoreco4"] body.auth-bg{ background-image:linear-gradient(rgba(52,30,14,.40),rgba(52,30,14,.60)),url("../img/lycoreco4/login.jpg"); background-size:cover; background-position:center 15%; background-attachment:fixed; }
[data-theme="lycoreco4"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

[data-theme="lycoreco5"] { --blue:#c9a13b; --blue-deep:#af8a2f; --blue-dark:#7e6220; --blue-soft:#faf2dc; --bg:#f9f4e8; --ink:#332c1d; --muted:#9c9076; --card:#ffffff; --line:#efe6cf; --line-in:#e2d3ab; --hero-a:#c9a13b; --hero-b:#e6cd85; }
[data-theme="lycoreco5"] body { background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='160'%20height='160'%20viewBox='0%200%20160%20160'%3E%3Cg%20fill='none'%20stroke='%23ece2c6'%20stroke-width='3'%3E%3Cline%20x1='22'%20y1='34'%20x2='46'%20y2='10'/%3E%3Cline%20x1='118'%20y1='150'%20x2='142'%20y2='126'/%3E%3C/g%3E%3Cg%20fill='%23f0e8d1'%3E%3Ccircle%20cx='98'%20cy='52'%20r='4'/%3E%3Ccircle%20cx='40'%20cy='112'%20r='5'/%3E%3C/g%3E%3C/svg%3E"); background-attachment:fixed; }
[data-theme="lycoreco5"] .hero { min-height:240px; display:flex; flex-direction:column; justify-content:center; background-image:linear-gradient(90deg,rgba(84,64,18,.93) 0%,rgba(84,64,18,.80) 34%,rgba(84,64,18,.28) 60%,rgba(84,64,18,0) 80%),url("../img/lycoreco5/wide.jpg"); background-repeat:no-repeat,no-repeat; background-position:center,right top; background-size:cover,cover; }
[data-theme="lycoreco5"] .hero h1,[data-theme="lycoreco5"] .hero p{ text-shadow:0 1px 4px rgba(48,36,10,.5); }
[data-theme="lycoreco5"] .hero h1::after{ content:" 🍉"; }
[data-theme="lycoreco5"] body.auth-bg{ background-image:linear-gradient(rgba(56,42,12,.40),rgba(56,42,12,.60)),url("../img/lycoreco5/login.jpg"); background-size:cover; background-position:center 15%; background-attachment:fixed; }
[data-theme="lycoreco5"] body.auth-bg .auth-card{ background:rgba(255,255,255,.35); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); border-color:rgba(255,255,255,.6); }

@media (min-width: 700px) {
    [data-theme="lycoreco3"] .hero, [data-theme="lycoreco4"] .hero, [data-theme="lycoreco5"] .hero { min-height: 360px; }
}

/* ===== リコリコ 夜（暗夜電影風：全深色 UI＋滿版電影海報 Hero；圖片為個人收藏） ===== */
[data-theme="lyconight"] {
    --blue:       #e8425d;   /* リコリス紅（主色/按鈕） */
    --blue-deep:  #c93049;
    --blue-dark:  #f2919f;   /* 深色底下標題用亮玫瑰 */
    --blue-soft:  #33222a;   /* 表頭/tag 暗紅底 */
    --bg:         #17141a;   /* 暖黑 */
    --ink:        #ece7ee;
    --muted:      #9b91a1;
    --card:       #201c24;
    --line:       #322c38;
    --line-in:    #453d4e;
    --hero-a:     #a12034;
    --hero-b:     #37655e;
}
/* 深色 UI 細節覆蓋（同深色模式，但暖紅調） */
[data-theme="lyconight"] input, [data-theme="lyconight"] select { background: #262028; color: var(--ink); }
[data-theme="lyconight"] .navmenu { background: #241f2b; }
[data-theme="lyconight"] .navmenu a:hover { background: #322c38; }
[data-theme="lyconight"] table.list tbody tr:hover td { background: #282230; }
[data-theme="lyconight"] table.list tr.inactive td { color: #5c5468; }
[data-theme="lyconight"] .actions a, [data-theme="lyconight"] .actions button { background: #262028; color: #f2919f; }
[data-theme="lyconight"] .actions a:hover, [data-theme="lyconight"] .actions button:hover { background: #322c38; }
[data-theme="lyconight"] .actions button.danger { color: #f0a488; border-color: #5a3226; }
[data-theme="lyconight"] .actions button.danger:hover { background: #3b201a; }
[data-theme="lyconight"] .msg-ok { background: #1b3a2d; color: #7fd4b4; }
[data-theme="lyconight"] .msg-err { background: #40222a; color: #f0a4a4; }
[data-theme="lyconight"] .badge-on { background: #1b3a2d; color: #7fd4b4; }
[data-theme="lyconight"] .badge-off { background: #2c2833; color: #a39aad; }
[data-theme="lyconight"] .field-err { color: #f08cae; }
[data-theme="lyconight"] .pnl-pos { color: #5fcf9f; }
[data-theme="lyconight"] .pnl-neg { color: #f0938c; }
[data-theme="lyconight"] .stat .empty, [data-theme="lyconight"] .acct-card .empty { color: #565062; }
[data-theme="lyconight"] .avatar-empty { color: #6b6377; }
[data-theme="lyconight"] .nav-avatar { background: #262028; }
[data-theme="lyconight"] .esel-btn, [data-theme="lyconight"] .esel-panel { background: #262028; }
/* Hero：滿版電影畫面，文字壓在下緣（底部暗角，不再左右漸層） */
[data-theme="lyconight"] .hero {
    min-height: 300px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background-image:
        linear-gradient(180deg, rgba(23,20,26,.18) 0%, rgba(23,20,26,.05) 42%, rgba(23,20,26,.66) 78%, rgba(23,20,26,.88) 100%),
        url("../img/lyconight/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center 30%;
    background-size: cover, cover;
}
[data-theme="lyconight"] .hero h1 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.55); display: flex; align-items: center; }
[data-theme="lyconight"] .hero h1::before { content: ''; display: inline-block; width: 6px; height: 22px; background: var(--blue); border-radius: 3px; margin-right: 10px; }
[data-theme="lyconight"] .hero h1::after { content: " 🌙"; }
[data-theme="lyconight"] .hero p { color: rgba(255,255,255,.85); text-shadow: 0 1px 5px rgba(0,0,0,.55); }
/* 右上角紅×青小 X 印記（呼應作品標誌） */
[data-theme="lyconight"] .hero::after {
    content: ''; position: absolute; top: 16px; right: 18px; width: 42px; height: 42px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2042%2042'%3E%3Cline%20x1='6'%20y1='6'%20x2='36'%20y2='36'%20stroke='%23e8425d'%20stroke-width='6'%20stroke-linecap='round'/%3E%3Cline%20x1='36'%20y1='6'%20x2='6'%20y2='36'%20stroke='%2337b8ab'%20stroke-width='6'%20stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; opacity: .9; pointer-events: none;
    animation: none; transform: none; left: auto; bottom: auto;
}
/* 登入頁：暗夜霧面 */
[data-theme="lyconight"] body.auth-bg {
    background-image:
        linear-gradient(rgba(14,10,16,.55), rgba(14,10,16,.72)),
        url("../img/lyconight/login.jpg");
    background-size: cover; background-position: center 18%; background-attachment: fixed;
}
[data-theme="lyconight"] body.auth-bg .auth-card {
    background: rgba(30,24,32,.55); color: var(--ink);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    border-color: rgba(255,255,255,.18);
}
@media (min-width: 700px) {
    [data-theme="lyconight"] .hero { min-height: 420px; }
}

/* ===== GURA 深海玻璃（glassmorphism：深海漸層底＋毛玻璃卡片＋滿版 Hero；圖片為個人收藏） ===== */
[data-theme="guradeep"] {
    --blue:       #37c1dd;   /* 鯊魚青（主色/按鈕） */
    --blue-deep:  #2aa3bd;
    --blue-dark:  #9fe3f0;   /* 深色底標題用亮青 */
    --blue-soft:  #16455a;   /* 表頭/tag 深海青底 */
    --bg:         #06222f;
    --ink:        #e6f4f8;
    --muted:      #8fb4c0;
    --card:       #0e3444;   /* 固定欄等需不透明處用 */
    --line:       #1e4a5e;
    --line-in:    #2c617a;
    --hero-a:     #1180a0;
    --hero-b:     #12384a;
}
/* 深海漸層＋上浮泡泡（固定不捲動，像置身水中） */
[data-theme="guradeep"] body {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='200'%20height='200'%20viewBox='0%200%20200%20200'%3E%3Cg%20fill='none'%20stroke='%23ffffff'%20stroke-opacity='0.07'%20stroke-width='2'%3E%3Ccircle%20cx='40'%20cy='150'%20r='9'/%3E%3Ccircle%20cx='58'%20cy='108'%20r='5'/%3E%3Ccircle%20cx='150'%20cy='60'%20r='12'/%3E%3Ccircle%20cx='170'%20cy='120'%20r='6'/%3E%3Ccircle%20cx='110'%20cy='178'%20r='4'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(180deg, #0b3648 0%, #072a3a 45%, #041d29 100%);
    background-attachment: fixed, fixed;
}
/* 卡片/磚：半透明毛玻璃，透出海色 */
[data-theme="guradeep"] .card,
[data-theme="guradeep"] .stat {
    background: rgba(14, 52, 68, .62);
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    border-color: rgba(255, 255, 255, .10);
    box-shadow: 0 6px 22px rgba(0, 10, 18, .35);
}
[data-theme="guradeep"] .tile { background: rgba(55, 193, 221, .10); border-color: rgba(255, 255, 255, .10); }
[data-theme="guradeep"] .hx-tile, [data-theme="guradeep"] .acct-card .subtotal { color: var(--blue-dark); }
/* 深色 UI 細節 */
[data-theme="guradeep"] input, [data-theme="guradeep"] select { background: rgba(6, 34, 47, .8); color: var(--ink); }
[data-theme="guradeep"] .navmenu { background: #0d3140; }
[data-theme="guradeep"] .navmenu a:hover { background: #16455a; }
[data-theme="guradeep"] .topbar { background: linear-gradient(135deg, #0e4a60, #0a3648); }
[data-theme="guradeep"] table.list th { background: rgba(55, 193, 221, .12); }
[data-theme="guradeep"] table.list tbody tr:hover td { background: rgba(55, 193, 221, .07); }
[data-theme="guradeep"] table.list tr.inactive td { color: #517687; }
[data-theme="guradeep"] .actions a, [data-theme="guradeep"] .actions button { background: rgba(6, 34, 47, .7); color: #9fe3f0; }
[data-theme="guradeep"] .actions a:hover, [data-theme="guradeep"] .actions button:hover { background: #16455a; }
[data-theme="guradeep"] .actions button.danger { color: #f0a488; border-color: #5a3a2c; }
[data-theme="guradeep"] .actions button.danger:hover { background: #3b2620; }
[data-theme="guradeep"] .msg-ok { background: #123c30; color: #7fd4b4; }
[data-theme="guradeep"] .msg-err { background: #3b2026; color: #f0a4a4; }
[data-theme="guradeep"] .badge-on { background: #123c30; color: #7fd4b4; }
[data-theme="guradeep"] .badge-off { background: #12333f; color: #8fb4c0; }
[data-theme="guradeep"] .field-err { color: #f08cae; }
[data-theme="guradeep"] .pnl-pos { color: #5fcf9f; }
[data-theme="guradeep"] .pnl-neg { color: #f0938c; }
[data-theme="guradeep"] .stat .empty, [data-theme="guradeep"] .acct-card .empty { color: #48697a; }
[data-theme="guradeep"] .avatar-empty { color: #5f8496; background: #12333f; }
[data-theme="guradeep"] .nav-avatar { background: #0d3140; }
[data-theme="guradeep"] .esel-btn, [data-theme="guradeep"] .esel-panel { background: #0d3140; }
/* Hero：滿版特寫，文字壓下緣（底部深海暗角） */
[data-theme="guradeep"] .hero {
    min-height: 300px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background-image:
        linear-gradient(180deg, rgba(4,24,34,.10) 0%, rgba(4,24,34,.04) 40%, rgba(4,24,34,.62) 78%, rgba(4,24,34,.88) 100%),
        url("../img/guradeep/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center 25%;
    background-size: cover, cover;
    border: 1px solid rgba(255,255,255,.10);
}
[data-theme="guradeep"] .hero h1 { color: #fff; text-shadow: 0 2px 8px rgba(0,10,18,.6); display: flex; align-items: center; }
[data-theme="guradeep"] .hero h1::before { content: ''; display: inline-block; width: 6px; height: 22px; background: var(--blue); border-radius: 3px; margin-right: 10px; }
[data-theme="guradeep"] .hero h1::after { content: " 🔱"; }
[data-theme="guradeep"] .hero p { color: rgba(230,244,248,.88); text-shadow: 0 1px 5px rgba(0,10,18,.6); }
/* 右上角三顆上浮泡泡印記 */
[data-theme="guradeep"] .hero::after {
    content: ''; position: absolute; top: 14px; right: 18px; width: 46px; height: 46px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2046%2046'%3E%3Cg%20fill='none'%20stroke='%23bfeef8'%20stroke-width='3'%3E%3Ccircle%20cx='14'%20cy='32'%20r='9'/%3E%3Ccircle%20cx='32'%20cy='16'%20r='6'/%3E%3Ccircle%20cx='36'%20cy='34'%20r='3.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain; background-repeat: no-repeat; opacity: .85; pointer-events: none;
    animation: none; transform: none; left: auto; bottom: auto;
}
/* 登入頁：深海霧面＋深色玻璃卡片 */
[data-theme="guradeep"] body.auth-bg {
    background-image:
        linear-gradient(rgba(4,22,32,.50), rgba(4,22,32,.72)),
        url("../img/guradeep/login.jpg");
    background-size: cover; background-position: center 25%; background-attachment: fixed;
}
[data-theme="guradeep"] body.auth-bg .auth-card {
    background: rgba(10, 40, 54, .58); color: var(--ink);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-color: rgba(255,255,255,.16);
}
@media (min-width: 700px) {
    [data-theme="guradeep"] .hero { min-height: 420px; }
}

/* ===== 灰原哀 霓虹檔案（賽博雙色：暗夜藍＋青×洋紅霓虹光暈；圖片為個人收藏） ===== */
[data-theme="haibaraneon"] {
    --blue:       #2fd4c2;   /* 霓虹青（主色） */
    --blue-deep:  #25b2a3;
    --blue-dark:  #9ff0e6;
    --blue-soft:  #123239;
    --bg:         #10131c;
    --ink:        #e7ecf5;
    --muted:      #8b94a8;
    --card:       #171b28;
    --line:       #262c3d;
    --line-in:    #38405a;
    --hero-a:     #17323d;
    --hero-b:     #3a1830;
}
[data-theme="haibaraneon"] body {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='260'%20viewBox='0%200%20260%20260'%3E%3Cg%20stroke-width='2'%20fill='none'%20opacity='0.10'%3E%3Cline%20x1='0'%20y1='240'%20x2='240'%20y2='0'%20stroke='%232fd4c2'/%3E%3Cline%20x1='40'%20y1='260'%20x2='260'%20y2='40'%20stroke='%23e84a8a'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}
[data-theme="haibaraneon"] input, [data-theme="haibaraneon"] select { background: #12151f; color: var(--ink); }
[data-theme="haibaraneon"] .navmenu { background: #151927; }
[data-theme="haibaraneon"] .navmenu a:hover { background: #202638; }
[data-theme="haibaraneon"] .topbar { background: linear-gradient(135deg, #161b2c, #101420); border-bottom: 1px solid rgba(47,212,194,.35); }
[data-theme="haibaraneon"] table.list th { background: rgba(47,212,194,.10); }
[data-theme="haibaraneon"] table.list tbody tr:hover td { background: rgba(47,212,194,.06); }
[data-theme="haibaraneon"] table.list tr.inactive td { color: #565f74; }
[data-theme="haibaraneon"] .actions a, [data-theme="haibaraneon"] .actions button { background: #12151f; color: #7fe8db; }
[data-theme="haibaraneon"] .actions a:hover, [data-theme="haibaraneon"] .actions button:hover { background: #202638; }
[data-theme="haibaraneon"] .actions button.danger { color: #ff9db8; border-color: #6a2c44; }
[data-theme="haibaraneon"] .actions button.danger:hover { background: #3a1a2a; }
[data-theme="haibaraneon"] .msg-ok { background: #10352f; color: #7fe8db; }
[data-theme="haibaraneon"] .msg-err { background: #3a1a2a; color: #ff9db8; }
[data-theme="haibaraneon"] .badge-on { background: #10352f; color: #7fe8db; }
[data-theme="haibaraneon"] .badge-off { background: #232838; color: #98a2b8; }
[data-theme="haibaraneon"] .field-err { color: #ff8cae; }
[data-theme="haibaraneon"] .pnl-pos { color: #5fe8c4; }
[data-theme="haibaraneon"] .pnl-neg { color: #ff92a8; }
[data-theme="haibaraneon"] .stat .empty, [data-theme="haibaraneon"] .acct-card .empty { color: #4a5266; }
[data-theme="haibaraneon"] .avatar-empty { color: #5f6a80; background: #1b2030; }
[data-theme="haibaraneon"] .nav-avatar { background: #151927; }
[data-theme="haibaraneon"] .esel-btn, [data-theme="haibaraneon"] .esel-panel { background: #12151f; }
/* 霓虹光暈：按鈕與資訊磚 */
[data-theme="haibaraneon"] .btn { box-shadow: 0 0 14px rgba(47,212,194,.30); }
[data-theme="haibaraneon"] .btn:hover { box-shadow: 0 0 20px rgba(47,212,194,.45); }
[data-theme="haibaraneon"] .tile { background: #151927; border-color: rgba(47,212,194,.28); box-shadow: 0 0 12px rgba(47,212,194,.10) inset; }
[data-theme="haibaraneon"] h2 { border-bottom: 2px solid; border-image: linear-gradient(90deg, #2fd4c2, #e84a8a) 1; padding-bottom: 6px; }
/* Hero：滿版海報，下緣暗角＋青/洋紅雙色立柱 */
[data-theme="haibaraneon"] .hero {
    min-height: 300px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background-image:
        linear-gradient(180deg, rgba(13,16,26,.15) 0%, rgba(13,16,26,.05) 42%, rgba(13,16,26,.68) 80%, rgba(13,16,26,.9) 100%),
        url("../img/haibaraneon/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center 20%;
    background-size: cover, cover;
    border: 1px solid rgba(47,212,194,.25);
}
[data-theme="haibaraneon"] .hero h1 { color: #fff; text-shadow: 0 0 12px rgba(47,212,194,.55); display: flex; align-items: center; }
[data-theme="haibaraneon"] .hero h1::before { content: ''; display: inline-block; width: 6px; height: 22px; margin-right: 10px; border-radius: 3px; background: linear-gradient(180deg, #2fd4c2 50%, #e84a8a 50%); }
[data-theme="haibaraneon"] .hero h1::after { content: " 🧢"; }
[data-theme="haibaraneon"] .hero p { color: rgba(231,236,245,.85); text-shadow: 0 1px 6px rgba(0,0,0,.6); }
[data-theme="haibaraneon"] body.auth-bg {
    background-image: linear-gradient(rgba(10,13,22,.55), rgba(10,13,22,.75)), url("../img/haibaraneon/login.jpg");
    background-size: cover; background-position: center 18%; background-attachment: fixed;
}
[data-theme="haibaraneon"] body.auth-bg .auth-card {
    background: rgba(20,24,38,.6); color: var(--ink);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    border-color: rgba(47,212,194,.3);
}

/* ===== Nachoneko 雲夢（柔霧圓潤：粉彩迷霧底＋大圓角飄浮卡片＋亮色電影 Hero；圖片為個人收藏） ===== */
[data-theme="nachodream"] {
    --blue:       #8fa3e8;   /* 霧紫藍 */
    --blue-deep:  #7489d4;
    --blue-dark:  #5a6aa8;
    --blue-soft:  #edf0fb;
    --bg:         #f0f2fa;
    --ink:        #4a4658;
    --muted:      #9a97ad;
    --card:       #ffffff;
    --line:       #e6e6f2;
    --line-in:    #d4d6ea;
    --hero-a:     #aab7e8;
    --hero-b:     #e8d4e4;
}
/* 迷霧漸層底（淡紫→淡粉），加飄浮小雲 */
[data-theme="nachodream"] body {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%20viewBox='0%200%20240%20240'%3E%3Cg%20fill='%23ffffff'%20opacity='0.55'%3E%3Cellipse%20cx='60'%20cy='60'%20rx='26'%20ry='12'/%3E%3Cellipse%20cx='44'%20cy='66'%20rx='16'%20ry='9'/%3E%3Cellipse%20cx='180'%20cy='170'%20rx='30'%20ry='13'/%3E%3Cellipse%20cx='198'%20cy='176'%20rx='16'%20ry='9'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(160deg, #eef1fb 0%, #f3eef8 55%, #faf0f4 100%);
    background-attachment: fixed, fixed;
}
/* 大圓角飄浮卡片與膠囊按鈕 */
[data-theme="nachodream"] .card, [data-theme="nachodream"] .stat {
    border-radius: 22px; border-color: rgba(255,255,255,.9);
    box-shadow: 0 10px 30px rgba(150,160,200,.16);
}
[data-theme="nachodream"] .btn, [data-theme="nachodream"] .btn-ghost { border-radius: 999px; }
[data-theme="nachodream"] input, [data-theme="nachodream"] select { border-radius: 12px; }
[data-theme="nachodream"] .tile { border-radius: 18px; background: #f2f0fb; border-color: #e8e6f6; }
[data-theme="nachodream"] table.list th { background: #f0eefa; }
/* Hero：亮色電影感——滿版被窩圖、下緣白霧、深色文字 */
[data-theme="nachodream"] .hero {
    min-height: 300px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 46%, rgba(255,255,255,.72) 80%, rgba(255,255,255,.92) 100%),
        url("../img/nachodream/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center 30%;
    background-size: cover, cover;
    border-radius: 22px;
}
[data-theme="nachodream"] .hero h1 { color: #4a4658; text-shadow: none; display: flex; align-items: center; }
[data-theme="nachodream"] .hero h1::before { content: ''; display: inline-block; width: 6px; height: 22px; background: #aab7e8; border-radius: 3px; margin-right: 10px; }
[data-theme="nachodream"] .hero h1::after { content: " ☁️"; }
[data-theme="nachodream"] .hero p { color: #7d7890; text-shadow: none; }
[data-theme="nachodream"] body.auth-bg {
    background-image: linear-gradient(rgba(255,255,255,.35), rgba(255,255,255,.55)), url("../img/nachodream/login.jpg");
    background-size: cover; background-position: center 30%; background-attachment: fixed;
}
[data-theme="nachodream"] body.auth-bg .auth-card {
    background: rgba(255,255,255,.6); border-radius: 22px;
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    border-color: rgba(255,255,255,.85);
}

/* ===== OKAKORO 復古POP（普普風：奶油底＋粗黑框＋硬陰影＋亮橘；圖片為個人收藏） ===== */
[data-theme="okapop"] {
    --blue:       #f7941d;   /* 亮橘（主色） */
    --blue-deep:  #e08114;
    --blue-dark:  #8a4d12;
    --blue-soft:  #ffe9c9;
    --bg:         #f7edd8;   /* 奶油紙 */
    --ink:        #2f2418;
    --muted:      #97815f;
    --card:       #fffdf5;
    --line:       #3a2a1a;   /* 邊線直接用深色（粗框感） */
    --line-in:    #c8b391;
    --hero-a:     #f7b267;
    --hero-b:     #9b7fce;
}
[data-theme="okapop"] body {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%20viewBox='0%200%2028%2028'%3E%3Ccircle%20cx='6'%20cy='6'%20r='2.2'%20fill='%23e8d9b8'/%3E%3C/svg%3E");
}
/* 粗黑框＋硬偏移陰影（neo-brutalism） */
[data-theme="okapop"] .card, [data-theme="okapop"] .stat {
    border: 2px solid #3a2a1a; border-radius: 12px;
    box-shadow: 6px 6px 0 rgba(58,42,26,.9);
}
[data-theme="okapop"] .btn {
    border: 2px solid #3a2a1a; color: #2f2418; border-radius: 10px;
    box-shadow: 3px 3px 0 #3a2a1a;
}
[data-theme="okapop"] .btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 #3a2a1a; }
[data-theme="okapop"] .btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #3a2a1a; }
[data-theme="okapop"] .btn-ghost { border: 2px solid #3a2a1a; color: #2f2418; box-shadow: 3px 3px 0 rgba(58,42,26,.35); }
[data-theme="okapop"] .tile { border: 2px solid #3a2a1a; border-radius: 12px; box-shadow: 4px 4px 0 rgba(58,42,26,.85); background: #ffe9c9; }
[data-theme="okapop"] input, [data-theme="okapop"] select { border: 2px solid #6b543a; border-radius: 10px; }
[data-theme="okapop"] table.list th { background: #ffe3bd; color: #6b4a1f; border-bottom: 2px solid #3a2a1a; }
[data-theme="okapop"] .actions a, [data-theme="okapop"] .actions button { border: 2px solid #6b543a; color: #6b4a1f; }
/* 標題：麥克筆螢光底線 */
[data-theme="okapop"] h2 { display: inline-block; background: linear-gradient(transparent 62%, #ffd86e 62%, #ffd86e 92%, transparent 92%); padding: 0 4px; }
/* Hero：平塗橘點點底＋和服ころね（左字右圖的普普海報）＋粗框硬影 */
[data-theme="okapop"] .hero {
    min-height: 240px;
    display: flex; flex-direction: column; justify-content: center;
    background-image: url("../img/okapop/wide.jpg");
    background-repeat: no-repeat; background-position: right center; background-size: cover;
    border: 3px solid #3a2a1a; border-radius: 14px;
    box-shadow: 8px 8px 0 rgba(58,42,26,.9);
}
[data-theme="okapop"] .hero h1 { color: #2f2418; text-shadow: none; }
[data-theme="okapop"] .hero h1::after { content: " 🍞"; }
[data-theme="okapop"] .hero p { color: #6b4a1f; text-shadow: none; }
[data-theme="okapop"] body.auth-bg {
    background-image: linear-gradient(rgba(58,42,26,.20), rgba(58,42,26,.38)), url("../img/okapop/login.jpg");
    background-size: cover; background-position: center 20%; background-attachment: fixed;
}
[data-theme="okapop"] body.auth-bg .auth-card {
    background: rgba(255,253,245,.92); border: 2px solid #3a2a1a;
    box-shadow: 8px 8px 0 rgba(58,42,26,.85);
}
@media (min-width: 700px) {
    [data-theme="haibaraneon"] .hero { min-height: 420px; }
    [data-theme="nachodream"] .hero { min-height: 420px; }
    [data-theme="okapop"] .hero { min-height: 360px; }
}

/* ===== リコリコ 雜誌（編輯設計：黑白＋一抹紅、襯線標題、細線分隔；圖片為個人收藏） ===== */
[data-theme="lycomag"] {
    --blue:       #d1203c;   /* 雜誌紅（唯一彩色） */
    --blue-deep:  #b01830;
    --blue-dark:  #1a1a1a;   /* 標題黑 */
    --blue-soft:  #f5f0ee;
    --bg:         #fbfaf8;
    --ink:        #141414;
    --muted:      #8c8886;
    --card:       #ffffff;
    --line:       #e8e4e1;
    --line-in:    #cfc9c5;
    --hero-a:     #1a1a1a;
    --hero-b:     #d1203c;
}
[data-theme="lycomag"] h1, [data-theme="lycomag"] h2, [data-theme="lycomag"] .brand {
    font-family: Georgia, 'Times New Roman', 'Noto Serif TC', 'PMingLiU', serif;
    letter-spacing: .5px;
}
[data-theme="lycomag"] .topbar { background: #141414; }
[data-theme="lycomag"] .card { border-radius: 2px; border: 1px solid var(--line); border-top: 3px solid #141414; }
[data-theme="lycomag"] .stat { border-radius: 2px; border-top: 3px solid var(--blue); }
[data-theme="lycomag"] .tile { border-radius: 2px; background: #faf6f4; }
[data-theme="lycomag"] h2 { border-bottom: 1px solid #141414; padding-bottom: 6px; }
[data-theme="lycomag"] .btn { border-radius: 2px; }
[data-theme="lycomag"] input, [data-theme="lycomag"] select { border-radius: 2px; }
[data-theme="lycomag"] table.list th { background: #f5f0ee; color: #141414; border-bottom: 2px solid #141414; }
/* Hero：紅色雙色調滿版，下緣紙白漸層＋黑色襯線標題＋紅色 kicker */
[data-theme="lycomag"] .hero {
    min-height: 300px; border-radius: 2px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background-image:
        linear-gradient(180deg, rgba(251,250,248,0) 0%, rgba(251,250,248,0) 48%, rgba(251,250,248,.82) 82%, rgba(251,250,248,.97) 100%),
        url("../img/lycomag/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center 18%;
    background-size: cover, cover;
    border: 1px solid var(--line);
}
[data-theme="lycomag"] .hero h1 { color: #141414; text-shadow: none; display: flex; align-items: center; }
[data-theme="lycomag"] .hero h1::before { content: ''; display: inline-block; width: 34px; height: 4px; background: var(--blue); margin-right: 12px; }
[data-theme="lycomag"] .hero h1::after { content: ""; }
[data-theme="lycomag"] .hero p { color: #6d6a68; text-shadow: none; letter-spacing: 1px; }
[data-theme="lycomag"] body.auth-bg {
    background-image: linear-gradient(rgba(20,20,20,.30), rgba(20,20,20,.55)), url("../img/lycomag/login.jpg");
    background-size: cover; background-position: center 15%; background-attachment: fixed;
}
[data-theme="lycomag"] body.auth-bg .auth-card {
    background: rgba(255,255,255,.9); border-radius: 2px; border-top: 3px solid var(--blue);
}

/* ===== GURA 8-bit 街機（像素遊戲：深夜藍＋像素方框＋硬影＋掃描格線；圖片為個人收藏） ===== */
[data-theme="guraarcade"] {
    --blue:       #3ad6ff;   /* 街機青 */
    --blue-deep:  #22b6e0;
    --blue-dark:  #9fe8ff;
    --blue-soft:  #14224d;
    --bg:         #0d1030;
    --ink:        #e8ecff;
    --muted:      #8a92c0;
    --card:       #141a3e;
    --line:       #28327a;
    --line-in:    #3a468f;
    --hero-a:     #1a2a6b;
    --hero-b:     #ff5aa0;
}
/* 格線＋像素星星 */
[data-theme="guraarcade"] body {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%20viewBox='0%200%20180%20180'%3E%3Cg%20fill='%233ad6ff'%20opacity='0.25'%3E%3Crect%20x='30'%20y='40'%20width='4'%20height='4'/%3E%3Crect%20x='140'%20y='90'%20width='4'%20height='4'/%3E%3Crect%20x='80'%20y='150'%20width='4'%20height='4'/%3E%3C/g%3E%3Cg%20fill='%23ff5aa0'%20opacity='0.22'%3E%3Crect%20x='110'%20y='30'%20width='4'%20height='4'/%3E%3Crect%20x='50'%20y='110'%20width='4'%20height='4'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(rgba(58,90,214,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(58,90,214,.05) 1px, transparent 1px);
    background-size: 180px 180px, 28px 28px, 28px 28px;
    background-attachment: fixed, fixed, fixed;
}
[data-theme="guraarcade"] .card, [data-theme="guraarcade"] .stat {
    border-radius: 0; border: 2px solid #28327a; box-shadow: 5px 5px 0 #080b22;
}
[data-theme="guraarcade"] .tile { border-radius: 0; background: #10163a; border: 2px solid #28327a; box-shadow: 4px 4px 0 #080b22; }
[data-theme="guraarcade"] .btn { border-radius: 0; border: 2px solid #9fe8ff; box-shadow: 4px 4px 0 #081a3a; color: #041022; font-weight: 700; }
[data-theme="guraarcade"] .btn:hover { transform: translate(-1px,-1px); box-shadow: 6px 6px 0 #081a3a; }
[data-theme="guraarcade"] .btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 #081a3a; }
[data-theme="guraarcade"] .btn-ghost { color: #9fe8ff; border: 2px solid #3ad6ff; border-radius: 0; }
[data-theme="guraarcade"] input, [data-theme="guraarcade"] select { border-radius: 0; background: #0c1130; color: var(--ink); }
[data-theme="guraarcade"] .navmenu { background: #10163a; }
[data-theme="guraarcade"] .navmenu a:hover { background: #1a2354; }
[data-theme="guraarcade"] .topbar { background: linear-gradient(135deg, #1a2354, #10163a); border-bottom: 2px solid #3ad6ff; }
[data-theme="guraarcade"] table.list th { background: #14224d; }
[data-theme="guraarcade"] table.list tbody tr:hover td { background: #161d48; }
[data-theme="guraarcade"] table.list tr.inactive td { color: #545c8c; }
[data-theme="guraarcade"] .actions a, [data-theme="guraarcade"] .actions button { background: #0c1130; color: #9fe8ff; border-radius: 0; }
[data-theme="guraarcade"] .actions a:hover, [data-theme="guraarcade"] .actions button:hover { background: #1a2354; }
[data-theme="guraarcade"] .actions button.danger { color: #ff9db8; border-color: #6a2c50; }
[data-theme="guraarcade"] .msg-ok { background: #0e3530; color: #7fe8c4; }
[data-theme="guraarcade"] .msg-err { background: #3a1a30; color: #ff9db8; }
[data-theme="guraarcade"] .badge-on { background: #0e3530; color: #7fe8c4; }
[data-theme="guraarcade"] .badge-off { background: #1c2350; color: #8a92c0; }
[data-theme="guraarcade"] .pnl-pos { color: #5fe8c4; }
[data-theme="guraarcade"] .pnl-neg { color: #ff8ca8; }
[data-theme="guraarcade"] .field-err { color: #ff8cae; }
[data-theme="guraarcade"] .stat .empty, [data-theme="guraarcade"] .acct-card .empty { color: #454e80; }
[data-theme="guraarcade"] .avatar-empty { color: #5a64a0; background: #10163a; }
[data-theme="guraarcade"] .nav-avatar { background: #10163a; }
[data-theme="guraarcade"] .esel-btn, [data-theme="guraarcade"] .esel-panel { background: #0c1130; }
[data-theme="guraarcade"] h2::before { content: '▶ '; color: #3ad6ff; }
/* Hero：像素化滿版＋下緣深藍暗角 */
[data-theme="guraarcade"] .hero {
    min-height: 280px; border-radius: 0; border: 2px solid #3ad6ff;
    box-shadow: 6px 6px 0 #080b22;
    display: flex; flex-direction: column; justify-content: flex-end;
    background-image:
        linear-gradient(180deg, rgba(13,16,48,.12) 0%, rgba(13,16,48,.04) 45%, rgba(13,16,48,.72) 82%, rgba(13,16,48,.92) 100%),
        url("../img/guraarcade/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: cover, cover;
    image-rendering: pixelated;
}
[data-theme="guraarcade"] .hero h1 { color: #fff; text-shadow: 2px 2px 0 #1a2a6b; display: flex; align-items: center; }
[data-theme="guraarcade"] .hero h1::before { content: ''; display: inline-block; width: 14px; height: 14px; background: #3ad6ff; box-shadow: 18px 0 0 #ff5aa0; margin-right: 30px; }
[data-theme="guraarcade"] .hero h1::after { content: " 👾"; }
[data-theme="guraarcade"] .hero p { color: rgba(232,236,255,.85); text-shadow: 1px 1px 0 #1a2a6b; }
[data-theme="guraarcade"] body.auth-bg {
    background-image: linear-gradient(rgba(8,10,30,.55), rgba(8,10,30,.75)), url("../img/guraarcade/login.jpg");
    background-size: cover; background-position: center 20%; background-attachment: fixed;
}
[data-theme="guraarcade"] body.auth-bg .auth-card {
    background: rgba(16,22,58,.72); color: var(--ink); border-radius: 0;
    border: 2px solid #3ad6ff; box-shadow: 6px 6px 0 #080b22;
}

/* ===== 灰原哀 手帳（牛皮紙拼貼：紙膠帶卡片＋拍立得 Hero＋陶土橘；圖片為個人收藏） ===== */
[data-theme="haibarascrap"] {
    --blue:       #c96f4a;   /* 陶土橘 */
    --blue-deep:  #b25c39;
    --blue-dark:  #86452b;
    --blue-soft:  #f6e8db;
    --bg:         #efe5d0;   /* 牛皮紙 */
    --ink:        #3d3125;
    --muted:      #97835f;
    --card:       #fffdf8;
    --line:       #e6d9c2;
    --line-in:    #d4c3a4;
    --hero-a:     #d99b5b;
    --hero-b:     #eadfc6;
}
[data-theme="haibarascrap"] body {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='30'%20height='30'%20viewBox='0%200%2030%2030'%3E%3Ccircle%20cx='7'%20cy='9'%20r='1.4'%20fill='%23dfd2b4'/%3E%3Ccircle%20cx='23'%20cy='21'%20r='1.2'%20fill='%23e2d5b9'/%3E%3C/svg%3E");
}
/* 卡片：白紙＋頂端紙膠帶 */
[data-theme="haibarascrap"] .card { position: relative; border-radius: 6px; box-shadow: 0 3px 10px rgba(120,95,60,.16); }
[data-theme="haibarascrap"] .card::before {
    content: ''; position: absolute; top: -10px; left: 50%; width: 96px; height: 22px;
    background: rgba(226,196,120,.72); transform: translateX(-50%) rotate(-2.5deg);
    box-shadow: 0 1px 3px rgba(120,95,60,.2); pointer-events: none;
}
[data-theme="haibarascrap"] .stat { border-radius: 6px; box-shadow: 0 3px 10px rgba(120,95,60,.14); }
[data-theme="haibarascrap"] .tile { background: #f9f1e2; border-color: #e6d9c2; }
[data-theme="haibarascrap"] h2 { border-bottom: 3px dotted var(--blue); padding-bottom: 5px; }
[data-theme="haibarascrap"] table.list th { background: #f3e9d5; color: #7a5c36; }
/* Hero：牛皮紙上的拍立得（已烘焙斜貼＋膠帶），文字置左 */
[data-theme="haibarascrap"] .hero {
    min-height: 260px;
    display: flex; flex-direction: column; justify-content: center;
    background-image: url("../img/haibarascrap/wide.jpg");
    background-repeat: no-repeat; background-position: right center; background-size: cover;
    border: 1px solid #e0d2b6;
}
[data-theme="haibarascrap"] .hero h1 { color: #3d3125; text-shadow: none; display: flex; align-items: center; }
[data-theme="haibarascrap"] .hero h1::before { content: ''; display: inline-block; width: 6px; height: 22px; background: var(--blue); border-radius: 3px; margin-right: 10px; }
[data-theme="haibarascrap"] .hero h1::after { content: " 📎"; }
[data-theme="haibarascrap"] .hero p { color: #7a6a50; text-shadow: none; }
[data-theme="haibarascrap"] body.auth-bg {
    background-image: linear-gradient(rgba(80,60,30,.22), rgba(80,60,30,.42)), url("../img/haibarascrap/login.jpg");
    background-size: cover; background-position: center 20%; background-attachment: fixed;
}
[data-theme="haibarascrap"] body.auth-bg .auth-card {
    background: rgba(255,253,248,.92); border-radius: 6px;
    box-shadow: 0 6px 18px rgba(80,60,30,.3);
}
@media (min-width: 700px) {
    [data-theme="lycomag"] .hero { min-height: 420px; }
    [data-theme="guraarcade"] .hero { min-height: 400px; }
    [data-theme="haibarascrap"] .hero { min-height: 360px; }
}

/* ===== Nachoneko 貓窩（多圖：整頁房間背景＋半透明卡片＋貓咪浮水印；圖片為個人收藏） ===== */
[data-theme="nachoroom"] {
    --blue:       #a678d8;   /* 薰衣草紫 */
    --blue-deep:  #8f63c0;
    --blue-dark:  #6b4a96;
    --blue-soft:  #f0eafa;
    --bg:         #eef0f8;
    --ink:        #453f52;
    --muted:      #948da6;
    --card:       #ffffff;
    --line:       #e6e2f0;
    --line-in:    #d2cce6;
    --hero-a:     #b9a8e0;
    --hero-b:     #e8d8ec;
}
/* 整頁背景＝她的房間（柔焦提亮版），所有卡片浮在上面 */
[data-theme="nachoroom"] body {
    background-image: url("../img/nachoroom/bg.jpg");
    background-size: cover; background-position: center; background-attachment: fixed;
}
[data-theme="nachoroom"] .topbar {
    background: linear-gradient(135deg, rgba(150,130,210,.88), rgba(190,150,205,.88));
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* 半透明卡片＋微模糊：透出房間 */
[data-theme="nachoroom"] .card, [data-theme="nachoroom"] .stat {
    position: relative;
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    border-color: rgba(255,255,255,.9);
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(130,110,170,.14);
}
/* 每張卡片右下角：圓形貓咪浮水印（Hero 除外） */
[data-theme="nachoroom"] .card:not(.hero)::after {
    content: ''; position: absolute; right: 12px; bottom: 10px; width: 104px; height: 104px;
    background: url("../img/nachoroom/mark.png") no-repeat center / contain;
    opacity: .10; pointer-events: none;
}
[data-theme="nachoroom"] .tile { background: rgba(240,234,250,.8); border-color: rgba(255,255,255,.9); border-radius: 14px; }
[data-theme="nachoroom"] table.list th { background: rgba(240,234,250,.85); }
[data-theme="nachoroom"] input, [data-theme="nachoroom"] select { background: rgba(255,255,255,.85); border-radius: 12px; }
[data-theme="nachoroom"] .btn, [data-theme="nachoroom"] .btn-ghost { border-radius: 999px; }
[data-theme="nachoroom"] .navmenu { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); background: rgba(255,255,255,.92); }
/* Hero：滿版禮物抱枕圖＋下緣白霧＋深色文字 */
[data-theme="nachoroom"] .hero {
    min-height: 300px; border-radius: 18px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 46%, rgba(255,255,255,.70) 80%, rgba(255,255,255,.92) 100%),
        url("../img/nachoroom/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center 25%;
    background-size: cover, cover;
}
[data-theme="nachoroom"] .hero h1 { color: #453f52; text-shadow: none; display: flex; align-items: center; }
[data-theme="nachoroom"] .hero h1::before { content: ''; display: inline-block; width: 6px; height: 22px; background: #a678d8; border-radius: 3px; margin-right: 10px; }
[data-theme="nachoroom"] .hero h1::after { content: " 🐾"; }
[data-theme="nachoroom"] .hero p { color: #7d7590; text-shadow: none; }
[data-theme="nachoroom"] body.auth-bg {
    background-image: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,.45)), url("../img/nachoroom/login.jpg");
    background-size: cover; background-position: center 20%; background-attachment: fixed;
}
[data-theme="nachoroom"] body.auth-bg .auth-card {
    background: rgba(255,255,255,.62); border-radius: 18px;
    backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
    border-color: rgba(255,255,255,.9);
}

/* ===== リコリコ 相簿牆（多圖：五張圖拼貼牆背景＋暗色玻璃卡片＋拼貼 Hero；圖片為個人收藏） ===== */
[data-theme="lycowall"] {
    --blue:       #e8425d;
    --blue-deep:  #c93049;
    --blue-dark:  #f2919f;
    --blue-soft:  #33222a;
    --bg:         #171016;
    --ink:        #efe8ec;
    --muted:      #a3939c;
    --card:       #221921;
    --line:       #3a2c36;
    --line-in:    #4e3c48;
    --hero-a:     #a12034;
    --hero-b:     #2fb3a6;
}
/* 整頁背景＝暗化的照片牆 */
[data-theme="lycowall"] body {
    background-image: url("../img/lycowall/bg.jpg");
    background-size: cover; background-position: center; background-attachment: fixed;
}
[data-theme="lycowall"] .topbar { background: linear-gradient(135deg, rgba(60,24,36,.92), rgba(30,16,26,.92)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-bottom: 1px solid rgba(232,66,93,.35); }
/* 暗色玻璃卡片：透出照片牆 */
[data-theme="lycowall"] .card, [data-theme="lycowall"] .stat {
    background: rgba(28,18,26,.78);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-color: rgba(255,255,255,.10);
    box-shadow: 0 8px 26px rgba(0,0,0,.4);
}
[data-theme="lycowall"] .tile { background: rgba(232,66,93,.10); border-color: rgba(255,255,255,.10); }
[data-theme="lycowall"] input, [data-theme="lycowall"] select { background: rgba(20,12,18,.85); color: var(--ink); }
[data-theme="lycowall"] .navmenu { background: #241a22; }
[data-theme="lycowall"] .navmenu a:hover { background: #33222a; }
[data-theme="lycowall"] table.list th { background: rgba(232,66,93,.12); }
[data-theme="lycowall"] table.list tbody tr:hover td { background: rgba(232,66,93,.06); }
[data-theme="lycowall"] table.list tr.inactive td { color: #6a5a64; }
[data-theme="lycowall"] .actions a, [data-theme="lycowall"] .actions button { background: rgba(20,12,18,.7); color: #f2919f; }
[data-theme="lycowall"] .actions a:hover, [data-theme="lycowall"] .actions button:hover { background: #33222a; }
[data-theme="lycowall"] .actions button.danger { color: #f0a488; border-color: #5a3226; }
[data-theme="lycowall"] .msg-ok { background: #1b3a2d; color: #7fd4b4; }
[data-theme="lycowall"] .msg-err { background: #40222a; color: #f0a4a4; }
[data-theme="lycowall"] .badge-on { background: #1b3a2d; color: #7fd4b4; }
[data-theme="lycowall"] .badge-off { background: #2c2833; color: #a39aad; }
[data-theme="lycowall"] .field-err { color: #f08cae; }
[data-theme="lycowall"] .pnl-pos { color: #5fcf9f; }
[data-theme="lycowall"] .pnl-neg { color: #f0938c; }
[data-theme="lycowall"] .stat .empty, [data-theme="lycowall"] .acct-card .empty { color: #5c4e58; }
[data-theme="lycowall"] .avatar-empty { color: #7a6a74; background: #2a1e28; }
[data-theme="lycowall"] .nav-avatar { background: #241a22; }
[data-theme="lycowall"] .esel-btn, [data-theme="lycowall"] .esel-panel { background: #241a22; }
/* Hero：清晰拼貼牆＋下緣暗角（回憶牆） */
[data-theme="lycowall"] .hero {
    min-height: 300px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background-image:
        linear-gradient(180deg, rgba(23,16,22,.20) 0%, rgba(23,16,22,.08) 40%, rgba(23,16,22,.72) 80%, rgba(23,16,22,.92) 100%),
        url("../img/lycowall/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: cover, cover;
    border: 1px solid rgba(232,66,93,.28);
}
[data-theme="lycowall"] .hero h1 { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); display: flex; align-items: center; }
[data-theme="lycowall"] .hero h1::before { content: ''; display: inline-block; width: 6px; height: 22px; border-radius: 3px; margin-right: 10px; background: linear-gradient(180deg, #e8425d 50%, #2fb3a6 50%); }
[data-theme="lycowall"] .hero h1::after { content: " 📷"; }
[data-theme="lycowall"] .hero p { color: rgba(239,232,236,.85); text-shadow: 0 1px 5px rgba(0,0,0,.6); }
[data-theme="lycowall"] body.auth-bg {
    background-image: linear-gradient(rgba(14,8,12,.45), rgba(14,8,12,.62)), url("../img/lycowall/login.jpg");
    background-size: cover; background-position: center; background-attachment: fixed;
}
[data-theme="lycowall"] body.auth-bg .auth-card {
    background: rgba(30,20,28,.6); color: var(--ink);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border-color: rgba(232,66,93,.3);
}
@media (min-width: 700px) {
    [data-theme="nachoroom"] .hero { min-height: 420px; }
    [data-theme="lycowall"] .hero { min-height: 420px; }
}

/* ===== OKAKORO 雙色分屏（左おかゆ紫×右ころね橘：卡片交替雙色；圖片為個人收藏） ===== */
[data-theme="okasplit"] {
    --blue:       #9b7fce;   /* おかゆ紫（主按鈕） */
    --blue-deep:  #856bb8;
    --blue-dark:  #5f4a8a;
    --blue-soft:  #f1eafa;
    --bg:         #faf6f0;
    --ink:        #322b3a;
    --muted:      #948a9c;
    --card:       #ffffff;
    --line:       #ece4f0;
    --line-in:    #d8cce6;
    --hero-a:     #9b7fce;
    --hero-b:     #f09a3e;   /* ころね橘 */
}
[data-theme="okasplit"] body {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='170'%20height='170'%20viewBox='0%200%20170%20170'%3E%3Cg%20opacity='0.5'%3E%3Cellipse%20cx='45'%20cy='55'%20rx='10'%20ry='8'%20fill='%23e6dcf4'/%3E%3Cellipse%20cx='125'%20cy='120'%20rx='10'%20ry='8'%20fill='%23f8e2c8'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}
/* 卡片交替雙色頂線：單數紫、雙數橘 */
[data-theme="okasplit"] .container > .card:nth-of-type(odd) { border-top: 3px solid #9b7fce; }
[data-theme="okasplit"] .container > .card:nth-of-type(even) { border-top: 3px solid #f09a3e; }
[data-theme="okasplit"] .btn-ghost { color: #c07c28; border-color: #f09a3e; }
[data-theme="okasplit"] .btn-ghost:hover { background: #fbeeda; }
[data-theme="okasplit"] h2 { border-bottom: 2px solid; border-image: linear-gradient(90deg, #9b7fce, #f09a3e) 1; padding-bottom: 6px; }
[data-theme="okasplit"] .tile:nth-child(odd) { background: #f1eafa; }
[data-theme="okasplit"] .tile:nth-child(even) { background: #fbeeda; border-color: #f3ddc0; }
/* Hero：斜線分屏雙人＋下緣白霧＋深色文字 */
[data-theme="okasplit"] .hero {
    min-height: 280px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 52%, rgba(255,255,255,.72) 82%, rgba(255,255,255,.94) 100%),
        url("../img/okasplit/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center top;
    background-size: cover, cover;
}
[data-theme="okasplit"] .hero h1 { color: #322b3a; text-shadow: none; display: flex; align-items: center; }
[data-theme="okasplit"] .hero h1::before { content: ''; display: inline-block; width: 6px; height: 22px; border-radius: 3px; margin-right: 10px; background: linear-gradient(180deg, #9b7fce 50%, #f09a3e 50%); }
[data-theme="okasplit"] .hero h1::after { content: " 🐱🐶"; }
[data-theme="okasplit"] .hero p { color: #7a6f84; text-shadow: none; }
[data-theme="okasplit"] body.auth-bg {
    background-image: linear-gradient(rgba(60,40,70,.25), rgba(60,40,70,.45)), url("../img/okasplit/login.jpg");
    background-size: cover; background-position: center 15%; background-attachment: fixed;
}
[data-theme="okasplit"] body.auth-bg .auth-card {
    background: rgba(255,255,255,.55);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    border-color: rgba(255,255,255,.8);
}

/* ===== 灰原哀 底片膠卷（暗房沖印：炭黑底＋琥珀色＋膠卷 Hero；圖片為個人收藏） ===== */
[data-theme="haibarafilm"] {
    --blue:       #e8b34b;   /* 琥珀（主色） */
    --blue-deep:  #cf9a33;
    --blue-dark:  #f2d08a;
    --blue-soft:  #2e2a20;
    --bg:         #17181c;
    --ink:        #eae8e2;
    --muted:      #97948b;
    --card:       #202127;
    --line:       #33343c;
    --line-in:    #47484f;
    --hero-a:     #2e2a20;
    --hero-b:     #6b5a30;
}
[data-theme="haibarafilm"] body {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='140'%20height='140'%20viewBox='0%200%20140%20140'%3E%3Cg%20fill='%23ffffff'%20opacity='0.04'%3E%3Ccircle%20cx='30'%20cy='40'%20r='1.5'/%3E%3Ccircle%20cx='100'%20cy='80'%20r='1.2'/%3E%3Ccircle%20cx='60'%20cy='110'%20r='1.4'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}
[data-theme="haibarafilm"] .btn { color: #241d10; font-weight: 700; }
[data-theme="haibarafilm"] input, [data-theme="haibarafilm"] select { background: #1a1b20; color: var(--ink); }
[data-theme="haibarafilm"] .navmenu { background: #1d1e24; }
[data-theme="haibarafilm"] .navmenu a:hover { background: #2a2b33; }
[data-theme="haibarafilm"] .topbar { background: linear-gradient(135deg, #232128, #18171c); border-bottom: 2px solid #e8b34b; }
[data-theme="haibarafilm"] table.list th { background: rgba(232,179,75,.10); }
[data-theme="haibarafilm"] table.list tbody tr:hover td { background: rgba(232,179,75,.05); }
[data-theme="haibarafilm"] table.list tr.inactive td { color: #5c5d64; }
[data-theme="haibarafilm"] .actions a, [data-theme="haibarafilm"] .actions button { background: #1a1b20; color: #f2d08a; }
[data-theme="haibarafilm"] .actions a:hover, [data-theme="haibarafilm"] .actions button:hover { background: #2a2b33; }
[data-theme="haibarafilm"] .actions button.danger { color: #f0a488; border-color: #5a3a2c; }
[data-theme="haibarafilm"] .msg-ok { background: #1c3527; color: #7fd4a8; }
[data-theme="haibarafilm"] .msg-err { background: #3b2420; color: #f0a89c; }
[data-theme="haibarafilm"] .badge-on { background: #1c3527; color: #7fd4a8; }
[data-theme="haibarafilm"] .badge-off { background: #2a2b33; color: #9a9ba2; }
[data-theme="haibarafilm"] .field-err { color: #f0a0a0; }
[data-theme="haibarafilm"] .pnl-pos { color: #7fd4a8; }
[data-theme="haibarafilm"] .pnl-neg { color: #f0a08c; }
[data-theme="haibarafilm"] .stat .empty, [data-theme="haibarafilm"] .acct-card .empty { color: #4e4f56; }
[data-theme="haibarafilm"] .avatar-empty { color: #6e6f76; background: #1d1e24; }
[data-theme="haibarafilm"] .nav-avatar { background: #1d1e24; }
[data-theme="haibarafilm"] .esel-btn, [data-theme="haibarafilm"] .esel-panel { background: #1a1b20; }
[data-theme="haibarafilm"] .card { border-radius: 4px; }
[data-theme="haibarafilm"] h2 { border-left: 4px solid #e8b34b; padding-left: 10px; }
/* Hero：一段膠卷（齒孔＋三格照片） */
[data-theme="haibarafilm"] .hero {
    min-height: 280px; border-radius: 4px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background-image: url("../img/haibarafilm/wide.jpg");
    background-repeat: no-repeat; background-position: center; background-size: cover;
    border: 1px solid #33343c;
}
[data-theme="haibarafilm"] .hero h1 { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.7); display: flex; align-items: center; }
[data-theme="haibarafilm"] .hero h1::before { content: ''; display: inline-block; width: 6px; height: 22px; background: #e8b34b; border-radius: 3px; margin-right: 10px; }
[data-theme="haibarafilm"] .hero h1::after { content: " 🎞️"; }
[data-theme="haibarafilm"] .hero p { color: rgba(234,232,226,.85); text-shadow: 0 1px 5px rgba(0,0,0,.7); }
[data-theme="haibarafilm"] body.auth-bg {
    background-image: linear-gradient(rgba(14,14,18,.55), rgba(14,14,18,.75)), url("../img/haibarafilm/login.jpg");
    background-size: cover; background-position: center 18%; background-attachment: fixed;
}
[data-theme="haibarafilm"] body.auth-bg .auth-card {
    background: rgba(28,29,35,.7); color: var(--ink); border-radius: 4px;
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
    border-color: rgba(232,179,75,.4);
}
@media (min-width: 700px) {
    [data-theme="okasplit"] .hero { min-height: 400px; }
    [data-theme="haibarafilm"] .hero { min-height: 420px; }
}

/* ===== GURA 深海王國 RPG（奇幻選單：皇家藏青＋金色雙線框＋任務窗；圖片為個人收藏） ===== */
[data-theme="guraquest"] {
    --blue:       #c9a34b;   /* 王國金（主按鈕） */
    --blue-deep:  #b08c38;
    --blue-dark:  #e8cf8f;
    --blue-soft:  #1c2a56;
    --bg:         #0e1b3a;
    --ink:        #e8ecf8;
    --muted:      #8f9ab8;
    --card:       #16244c;
    --line:       #2a3a6e;
    --line-in:    #3c4f8a;
    --hero-a:     #1c2a56;
    --hero-b:     #c9a34b;
}
[data-theme="guraquest"] body {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%20viewBox='0%200%20120%20120'%3E%3Cg%20fill='none'%20stroke='%23c9a34b'%20opacity='0.10'%20stroke-width='1.5'%3E%3Cpath%20d='M60%2010%20L70%2030%20L60%2050%20L50%2030%20Z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}
/* 卡片：金色雙線框（外框＋內細線，像 RPG 視窗） */
[data-theme="guraquest"] .card, [data-theme="guraquest"] .stat {
    border: 2px solid #c9a34b; border-radius: 10px;
    box-shadow: inset 0 0 0 1px #0e1b3a, inset 0 0 0 2px rgba(201,163,75,.55), 0 6px 20px rgba(0,0,0,.4);
}
[data-theme="guraquest"] .tile { background: #1c2a56; border: 1px solid rgba(201,163,75,.5); }
[data-theme="guraquest"] .btn { color: #241d08; font-weight: 700; border: 1px solid #e8cf8f; }
[data-theme="guraquest"] .btn-ghost { color: #e8cf8f; border-color: #c9a34b; }
[data-theme="guraquest"] input, [data-theme="guraquest"] select { background: #101d40; color: var(--ink); }
[data-theme="guraquest"] .navmenu { background: #14213f; }
[data-theme="guraquest"] .navmenu a:hover { background: #1c2a56; }
[data-theme="guraquest"] .topbar { background: linear-gradient(135deg, #1c2c5e, #12204a); border-bottom: 2px solid #c9a34b; }
[data-theme="guraquest"] table.list th { background: rgba(201,163,75,.12); }
[data-theme="guraquest"] table.list tbody tr:hover td { background: rgba(201,163,75,.06); }
[data-theme="guraquest"] table.list tr.inactive td { color: #56618a; }
[data-theme="guraquest"] .actions a, [data-theme="guraquest"] .actions button { background: #101d40; color: #e8cf8f; }
[data-theme="guraquest"] .actions a:hover, [data-theme="guraquest"] .actions button:hover { background: #1c2a56; }
[data-theme="guraquest"] .actions button.danger { color: #f0a488; border-color: #6a3c2c; }
[data-theme="guraquest"] .msg-ok { background: #143528; color: #7fd4a8; }
[data-theme="guraquest"] .msg-err { background: #3b2026; color: #f0a4a4; }
[data-theme="guraquest"] .badge-on { background: #143528; color: #7fd4a8; }
[data-theme="guraquest"] .badge-off { background: #1c2444; color: #8f9ab8; }
[data-theme="guraquest"] .field-err { color: #f08cae; }
[data-theme="guraquest"] .pnl-pos { color: #5fcf9f; }
[data-theme="guraquest"] .pnl-neg { color: #f0938c; }
[data-theme="guraquest"] .stat .empty, [data-theme="guraquest"] .acct-card .empty { color: #465080; }
[data-theme="guraquest"] .avatar-empty { color: #5f6a96; background: #14213f; }
[data-theme="guraquest"] .nav-avatar { background: #14213f; }
[data-theme="guraquest"] .esel-btn, [data-theme="guraquest"] .esel-panel { background: #101d40; }
[data-theme="guraquest"] h2::before { content: '◆ '; color: #c9a34b; }
/* Hero：三叉戟小 Gura＋金框＋下緣白霧深字（任務看板） */
[data-theme="guraquest"] .hero {
    min-height: 280px; border: 2px solid #c9a34b; border-radius: 10px;
    box-shadow: inset 0 0 0 2px rgba(201,163,75,.4), 0 8px 24px rgba(0,0,0,.45);
    display: flex; flex-direction: column; justify-content: flex-end;
    background-image:
        linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,.78) 84%, rgba(255,255,255,.95) 100%),
        url("../img/guraquest/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center top;
    background-size: cover, cover;
}
[data-theme="guraquest"] .hero h1 { color: #1a2a5e; text-shadow: none; display: flex; align-items: center; }
[data-theme="guraquest"] .hero h1::before { content: ''; display: inline-block; width: 6px; height: 22px; background: #c9a34b; border-radius: 3px; margin-right: 10px; }
[data-theme="guraquest"] .hero h1::after { content: " 👑"; }
[data-theme="guraquest"] .hero p { color: #4a5a8e; text-shadow: none; }
[data-theme="guraquest"] body.auth-bg {
    background-image: linear-gradient(rgba(10,18,42,.50), rgba(10,18,42,.72)), url("../img/guraquest/login.jpg");
    background-size: cover; background-position: center 20%; background-attachment: fixed;
}
[data-theme="guraquest"] body.auth-bg .auth-card {
    background: rgba(18,28,64,.72); color: var(--ink);
    border: 2px solid #c9a34b; box-shadow: inset 0 0 0 2px rgba(201,163,75,.4);
    backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
}

/* ===== OKAKORO 黑板塗鴉（教室黑板：墨綠板底＋粉筆虛線＋便貼照片；圖片為個人收藏） ===== */
[data-theme="okaboard"] {
    --blue:       #e8d44b;   /* 粉筆黃（主按鈕） */
    --blue-deep:  #cfba33;
    --blue-dark:  #f2e88f;
    --blue-soft:  #33453d;
    --bg:         #263832;
    --ink:        #eef2ea;
    --muted:      #9fb0a5;
    --card:       #2e453d;
    --line:       #44584f;
    --line-in:    #5a7065;
    --hero-a:     #2c4038;
    --hero-b:     #e8d44b;
}
/* 板面塗鴉：粉筆小星星/愛心/骨頭 */
[data-theme="okaboard"] body {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%20viewBox='0%200%20220%20220'%3E%3Cg%20stroke='%23ffffff'%20fill='none'%20opacity='0.10'%20stroke-width='2'%3E%3Cpath%20d='M40%2050%20l6%2012%2012%202-9%209%202%2013-11-6-11%206%202-13-9-9%2012-2z'/%3E%3Cpath%20d='M160%20150%20c-6-8-18-2-14%206%203%206%2014%2012%2014%2012s11-6%2014-12c4-8-8-14-14-6z'/%3E%3Crect%20x='150'%20y='40'%20width='36'%20height='10'%20rx='5'/%3E%3Ccircle%20cx='148'%20cy='45'%20r='6'/%3E%3Ccircle%20cx='188'%20cy='45'%20r='6'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}
/* 卡片：板上粉筆虛線框 */
[data-theme="okaboard"] .card, [data-theme="okaboard"] .stat {
    border: 2px dashed rgba(238,242,234,.55); border-radius: 10px;
    background: #2e453d; box-shadow: 0 4px 16px rgba(0,0,0,.3);
}
[data-theme="okaboard"] .tile { background: #33453d; border: 2px dashed rgba(238,242,234,.4); }
[data-theme="okaboard"] .btn { color: #2c3a24; font-weight: 700; }
[data-theme="okaboard"] .btn-ghost { color: #f2e88f; border: 2px dashed #e8d44b; }
[data-theme="okaboard"] input, [data-theme="okaboard"] select { background: #223229; color: var(--ink); border: 1px solid #5a7065; }
[data-theme="okaboard"] .navmenu { background: #2a3e36; }
[data-theme="okaboard"] .navmenu a:hover { background: #384f45; }
[data-theme="okaboard"] .topbar { background: linear-gradient(135deg, #33493f, #263832); border-bottom: 3px solid #8a6f4e; }
[data-theme="okaboard"] table.list th { background: rgba(238,242,234,.08); }
[data-theme="okaboard"] table.list tbody tr:hover td { background: rgba(238,242,234,.05); }
[data-theme="okaboard"] table.list tr.inactive td { color: #6c7f74; }
[data-theme="okaboard"] .actions a, [data-theme="okaboard"] .actions button { background: #223229; color: #d4e2d0; }
[data-theme="okaboard"] .actions a:hover, [data-theme="okaboard"] .actions button:hover { background: #384f45; }
[data-theme="okaboard"] .actions button.danger { color: #f0a488; border-color: #6a4a3c; }
[data-theme="okaboard"] .msg-ok { background: #1c3a2c; color: #8fd4a8; }
[data-theme="okaboard"] .msg-err { background: #46352a; color: #f0b49c; }
[data-theme="okaboard"] .badge-on { background: #1c3a2c; color: #8fd4a8; }
[data-theme="okaboard"] .badge-off { background: #33453d; color: #9fb0a5; }
[data-theme="okaboard"] .field-err { color: #f0a8a0; }
[data-theme="okaboard"] .pnl-pos { color: #8fd4a8; }
[data-theme="okaboard"] .pnl-neg { color: #f0a88c; }
[data-theme="okaboard"] .stat .empty, [data-theme="okaboard"] .acct-card .empty { color: #5c6f64; }
[data-theme="okaboard"] .avatar-empty { color: #7c8f84; background: #2a3e36; }
[data-theme="okaboard"] .nav-avatar { background: #2a3e36; }
[data-theme="okaboard"] .esel-btn, [data-theme="okaboard"] .esel-panel { background: #223229; }
[data-theme="okaboard"] h2 { border-bottom: 2px dashed rgba(238,242,234,.5); padding-bottom: 6px; }
/* Hero：黑板＋便貼照片（已烘焙），文字像粉筆字 */
[data-theme="okaboard"] .hero {
    min-height: 260px;
    display: flex; flex-direction: column; justify-content: center;
    background-image: url("../img/okaboard/wide.jpg");
    background-repeat: no-repeat; background-position: right center; background-size: cover;
    border: 6px solid #8a6f4e; border-radius: 6px;
    box-shadow: inset 0 0 30px rgba(0,0,0,.35);
}
[data-theme="okaboard"] .hero h1 { color: #f5f7f2; text-shadow: 0 0 6px rgba(255,255,255,.25); display: flex; align-items: center; }
[data-theme="okaboard"] .hero h1::before { content: ''; display: inline-block; width: 6px; height: 22px; background: #e8d44b; border-radius: 3px; margin-right: 10px; }
[data-theme="okaboard"] .hero h1::after { content: " 🦴"; }
[data-theme="okaboard"] .hero p { color: rgba(238,242,234,.8); text-shadow: none; }
[data-theme="okaboard"] body.auth-bg {
    background-image: linear-gradient(rgba(30,44,38,.5), rgba(30,44,38,.7)), url("../img/okaboard/login.jpg");
    background-size: cover; background-position: center 18%; background-attachment: fixed;
}
[data-theme="okaboard"] body.auth-bg .auth-card {
    background: rgba(46,69,61,.85); color: var(--ink);
    border: 2px dashed rgba(238,242,234,.55);
}

/* ===== Nachoneko 旅行車票（薄荷＋黑色票券：卡片打孔虛線像車票；圖片為個人收藏） ===== */
[data-theme="nachoticket"] {
    --blue:       #3aa88f;   /* 薄荷綠 */
    --blue-deep:  #2f8e78;
    --blue-dark:  #1e6b58;
    --blue-soft:  #e2f3ed;
    --bg:         #eaf5f0;
    --ink:        #24312c;
    --muted:      #7f958c;
    --card:       #ffffff;
    --line:       #d5e8e0;
    --line-in:    #b8d8cc;
    --hero-a:     #3aa88f;
    --hero-b:     #14181c;
}
[data-theme="nachoticket"] body {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='170'%20height='170'%20viewBox='0%200%20170%20170'%3E%3Cg%20fill='none'%20stroke='%23c8e2d8'%20stroke-width='2'%20stroke-dasharray='6%206'%3E%3Cpath%20d='M20%20140%20C%2060%20100%20110%20120%20150%2060'/%3E%3C/g%3E%3Cg%20fill='%23cfe8de'%3E%3Cpath%20d='M148%2054%20l10%204-6%209z'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
}
/* 卡片＝車票：右側虛線撕票線＋上下打孔 */
[data-theme="nachoticket"] .card, [data-theme="nachoticket"] .stat { position: relative; border-radius: 14px; overflow: hidden; }
[data-theme="nachoticket"] .card::before {
    content: ''; position: absolute; top: 8px; bottom: 8px; right: 74px; width: 0;
    border-right: 2px dashed #c8ddd4; pointer-events: none;
}
[data-theme="nachoticket"] .card::after {
    content: ''; position: absolute; right: 66px; top: -9px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--bg); box-shadow: 0 calc(100% + 2px) 0 0 var(--bg); pointer-events: none;
}
[data-theme="nachoticket"] .btn, [data-theme="nachoticket"] .btn-ghost { border-radius: 999px; }
[data-theme="nachoticket"] table.list th { background: #e2f3ed; }
[data-theme="nachoticket"] h2 { border-left: 4px solid #3aa88f; padding-left: 10px; }
/* Hero：薄荷底上的黑色車票（已烘焙） */
[data-theme="nachoticket"] .hero {
    min-height: 280px;
    display: flex; flex-direction: column; justify-content: flex-end;
    background-image:
        linear-gradient(180deg, rgba(223,240,234,0) 0%, rgba(223,240,234,0) 58%, rgba(223,240,234,.80) 86%, rgba(223,240,234,.95) 100%),
        url("../img/nachoticket/wide.jpg");
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    background-size: cover, cover;
}
[data-theme="nachoticket"] .hero h1 { color: #24312c; text-shadow: none; display: flex; align-items: center; }
[data-theme="nachoticket"] .hero h1::before { content: ''; display: inline-block; width: 6px; height: 22px; background: #3aa88f; border-radius: 3px; margin-right: 10px; }
[data-theme="nachoticket"] .hero h1::after { content: " 🎫"; }
[data-theme="nachoticket"] .hero p { color: #5f7a70; text-shadow: none; }
[data-theme="nachoticket"] body.auth-bg {
    background-image: linear-gradient(rgba(20,40,34,.30), rgba(20,40,34,.5)), url("../img/nachoticket/login.jpg");
    background-size: cover; background-position: center 25%; background-attachment: fixed;
}
[data-theme="nachoticket"] body.auth-bg .auth-card {
    background: rgba(255,255,255,.8); border-radius: 14px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
@media (min-width: 700px) {
    [data-theme="guraquest"] .hero { min-height: 400px; }
    [data-theme="okaboard"] .hero { min-height: 380px; }
    [data-theme="nachoticket"] .hero { min-height: 400px; }
}

/* ===== 主題選擇器彈窗 ===== */
.tp-mask { z-index: 500; }   /* 高於手機漢堡選單面板(300)，避免被蓋住 */
.tp-modal { max-width: 480px; width: calc(100% - 40px); }
.tp-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tp-head strong { font-size: 16px; color: var(--ink); }
.tp-x { background: none; border: none; font-size: 16px; line-height: 1; cursor: pointer; color: var(--muted); padding: 4px; }
.tp-body { max-height: 68vh; overflow-y: auto; }
.tp-group-label { font-size: 12px; color: var(--muted); margin: 12px 0 6px; }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.tp-chip { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); cursor: pointer; font-size: 14px; text-align: left; }
.tp-chip:hover { border-color: var(--blue); background: var(--blue-soft); }
.tp-chip.on { border-color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue-soft); font-weight: 600; }
.tp-sw { width: 16px; height: 16px; border-radius: 5px; flex: none; border: 1px solid rgba(0, 0, 0, .15); }