/* theme_arcade.css — Cute Game + Tech style */
:root{
  --bg:#eef3ff;
  --bg2:#fdf7ff;
  --surface:rgba(255,255,255,.86);
  --surface-strong:#ffffff;
  --border:#dbe7ff;
  --text:#162033;
  --muted:#64748b;
  --primary:#ff2456;
  --primary-2:#ff6b9f;
  --secondary:#5b8cff;
  --accent:#8b5cf6;
  --success:#22c55e;
  --warn:#f97316;
  --danger:#ef4444;
  --shadow:0 14px 40px rgba(65,88,166,.16);
  --shadow-soft:0 8px 24px rgba(65,88,166,.10);
  --radius:24px;
  --radius-sm:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);font-family:"Segoe UI","Noto Sans TC","Microsoft JhengHei",sans-serif;background:radial-gradient(circle at 10% 15%, rgba(255,114,156,.18), transparent 18%),radial-gradient(circle at 85% 12%, rgba(91,140,255,.20), transparent 20%),radial-gradient(circle at 70% 85%, rgba(139,92,246,.16), transparent 22%),linear-gradient(180deg,#f8fbff 0%, #eef4ff 45%, #f8f0ff 100%);min-height:100vh;overflow-x:hidden}
a{color:#163b7a;text-decoration:none} a:hover{text-decoration:underline}
.arcade-bg{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:-1;}
.arcade-orb{position:absolute; border-radius:50%; filter:blur(10px); opacity:.45; animation:floaty 12s ease-in-out infinite;}
.arcade-orb.o1{width:160px;height:160px; background:rgba(255,87,135,.24); left:4%; top:10%}
.arcade-orb.o2{width:220px;height:220px; background:rgba(91,140,255,.18); right:8%; top:8%; animation-delay:-3s}
.arcade-orb.o3{width:200px;height:200px; background:rgba(139,92,246,.14); left:16%; bottom:8%; animation-delay:-6s}
.arcade-orb.o4{width:140px;height:140px; background:rgba(62,207,142,.16); right:15%; bottom:12%; animation-delay:-2s}
@keyframes floaty{0%,100%{transform:translateY(0) translateX(0) scale(1)}50%{transform:translateY(-18px) translateX(10px) scale(1.06)}}
.topbar{position:sticky; top:0; z-index:50;backdrop-filter:blur(14px);background:linear-gradient(90deg, rgba(255,27,77,.92), rgba(255,73,126,.92) 48%, rgba(94,114,255,.90));box-shadow:0 10px 28px rgba(31,41,55,.18)}
.topbar-inner{max-width:1320px; margin:0 auto; padding:14px 18px;display:flex; align-items:center; gap:18px; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none}
.brand:hover{text-decoration:none}
.brand-badge{width:44px; height:44px; border-radius:14px;background:linear-gradient(180deg,#fff,#ffe5ef);position:relative; box-shadow:inset 0 -3px 0 rgba(255,38,104,.18)}
.brand-badge:before,.brand-badge:after{content:""; position:absolute; background:#ff295d; border-radius:999px;}
.brand-badge:before{width:10px;height:24px;left:9px;top:10px}
.brand-badge:after{width:10px;height:24px;right:9px;top:10px}
.brand-title{font-size:18px; font-weight:900; letter-spacing:.02em}
.brand-sub{font-size:11px; opacity:.86; margin-top:2px}
.nav{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end}
.nav a{color:#fff; text-decoration:none; font-weight:800; font-size:15px;padding:10px 14px; border-radius:999px;transition:.15s ease; position:relative}
.nav a:hover{background:rgba(255,255,255,.15); transform:translateY(-1px)}
.nav a.active{background:rgba(255,255,255,.22); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.nav-user{display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; margin-left:6px}
.user-chip{background:rgba(255,255,255,.18); padding:8px 12px; border-radius:999px;backdrop-filter:blur(8px)}
.page-shell{max-width:1320px; margin:22px auto 30px; padding:0 16px}
.page-head{margin-bottom:14px;display:flex; align-items:end; justify-content:space-between; gap:14px; flex-wrap:wrap}
.page-head h1,.page-head h2,.card h2,.card h3{margin:0 0 12px}
.page-head .subtitle{color:var(--muted); font-size:14px}
.card,.hero,.panel,.stat-card,.login-panel,.side-panel{background:var(--surface);border:1px solid rgba(255,255,255,.75);border-radius:var(--radius);box-shadow:var(--shadow);backdrop-filter:blur(10px)}
.card{padding:20px;margin-bottom:16px}.card h2{font-size:20px}.card h3{font-size:18px}
.flex{display:grid; grid-template-columns:1fr 360px; gap:16px; align-items:start}.grow{min-width:0}.sidebar{position:sticky; top:96px}
.tbl{width:100%; border-collapse:collapse; font-size:15px}.tbl thead th{text-align:left; color:#31415c; font-size:13px; letter-spacing:.02em;padding:14px 12px; border-bottom:2px solid #dbe7ff}.tbl tbody td{padding:14px 12px; border-bottom:1px solid #e8eefb; vertical-align:top}.tbl tbody tr:hover{background:rgba(91,140,255,.06)}
.tbl .chip-edit{display:inline-flex; align-items:center; gap:6px;padding:8px 14px; border-radius:999px;border:1px solid #dbe7ff; background:#fff; font-weight:800; cursor:pointer;box-shadow:0 4px 14px rgba(15,23,42,.05)}
.tbl .chip-edit:hover{background:#fff7fb; border-color:#ffbfd1; transform:translateY(-1px)}.tbl details > summary{list-style:none}.tbl details > summary::-webkit-details-marker{display:none}
label{display:block; font-weight:700; color:#334155; margin:10px 0 8px}
input[type="text"],input[type="password"],input[type="date"],input[type="number"],input[type="search"],select,textarea,input:not([type]),.input,.select{width:100%;padding:12px 14px;border-radius:16px;border:1px solid #d4def4;background:rgba(255,255,255,.96);color:var(--text);font-size:15px;outline:none;transition:border-color .15s ease, box-shadow .15s ease, transform .06s ease}
input:focus,select:focus,textarea:focus{border-color:#9bb7ff;box-shadow:0 0 0 4px rgba(91,140,255,.14)}textarea{min-height:100px; resize:vertical}input[type="checkbox"]{transform:scale(1.15); accent-color:var(--primary)}
button,.btn{appearance:none; border:0; cursor:pointer; text-decoration:none; display:inline-flex;align-items:center; justify-content:center; gap:8px;padding:12px 18px; border-radius:16px;background:linear-gradient(180deg, #ff4777, #e50043);color:#fff; font-weight:900; font-size:15px;box-shadow:0 12px 22px rgba(229,0,67,.18), inset 0 -2px 0 rgba(0,0,0,.08);transition:transform .08s ease, filter .15s ease, box-shadow .15s ease}
button:hover,.btn:hover{filter:brightness(1.02); transform:translateY(-1px); text-decoration:none}button:active,.btn:active{transform:translateY(1px)}.btn.secondary{background:linear-gradient(180deg,#6ea2ff,#4773ff)}.btn.dark{background:linear-gradient(180deg,#273244,#111827)}.btn.success{background:linear-gradient(180deg,#33d17a,#16a34a)}.btn.warn{background:linear-gradient(180deg,#ffb258,#f97316)}.btn.ghost{background:#fff; color:#1f2f4d; border:1px solid #d8e2f6; box-shadow:var(--shadow-soft)}.btn.danger,.danger{background:linear-gradient(180deg,#ff6b6b,#ef4444)}
.badge,.status-badge{display:inline-flex; align-items:center; gap:6px;padding:6px 12px; border-radius:999px; font-size:13px; font-weight:900;white-space:nowrap; line-height:1}.badge.ok,.status-badge.ok{background:#dcfce7; color:#166534; border:1px solid #bbf7d0}.badge.warn,.status-badge.warn{background:#ffedd5; color:#9a3412; border:1px solid #fed7aa}.badge.info,.status-badge.info{background:#dbeafe; color:#1d4ed8; border:1px solid #bfdbfe}.badge.pink{background:#ffe4ee; color:#be185d; border:1px solid #fecdd3}
.hint,.muted{color:var(--muted)}.tools{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px}.tools .grow{flex:1 1 280px}.tools .cnt{margin-left:auto; font-weight:800; color:#334155}
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px}.stat-card{padding:16px 18px}.stat-card .k{font-size:13px; color:#64748b; font-weight:800}.stat-card .v{font-size:28px; font-weight:900; margin-top:6px}.stat-card .glow{display:inline-flex; width:10px; height:10px; border-radius:50%; background:#6ea2ff;box-shadow:0 0 0 6px rgba(110,162,255,.14), 0 0 18px rgba(110,162,255,.45);margin-right:8px}
.grid-g{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px}.card-g{position:relative; overflow:hidden; background:#fff; border:1px solid #edf2ff;border-radius:22px; box-shadow:var(--shadow-soft); color:#112240; text-decoration:none;transition:transform .15s ease, box-shadow .15s ease}.card-g:hover{transform:translateY(-3px) scale(1.01); box-shadow:0 18px 34px rgba(30,64,175,.15); text-decoration:none}.card-g .media{aspect-ratio:3/4; background:linear-gradient(180deg,#f6f9ff,#eef3ff); overflow:hidden; position:relative}.card-g .media:after{content:""; position:absolute; inset:0;background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%, rgba(0,0,0,.04))}.card-g img{width:100%; height:100%; object-fit:cover; display:block}.card-g .body{padding:12px 14px 16px}.card-g .title{font-size:16px; font-weight:900; line-height:1.35;min-height:44px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}.card-g .meta{margin-top:6px; font-size:13px; color:#55657f; line-height:1.6}.card-g .badge{position:absolute; top:10px; right:10px}.card-g .spark{position:absolute; width:70px; height:70px; right:-10px; top:-10px; border-radius:50%;background:radial-gradient(circle, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);opacity:.8}
.pager{display:flex; justify-content:center; align-items:center; gap:8px; flex-wrap:wrap; margin:18px 0 4px}.pager a,.pager span{display:inline-flex; min-width:42px; justify-content:center;padding:8px 12px; border-radius:14px; border:1px solid #dbe7ff; background:#fff;color:#17325c; font-weight:900; text-decoration:none}.pager a:hover{background:#f7faff}.pager .on{background:linear-gradient(180deg,#ff4f7d,#e50043); color:#fff; border-color:transparent}.pager .muted{opacity:.5; pointer-events:none}
.flash{padding:12px 14px; border-radius:18px; margin-bottom:14px; font-weight:800;border:1px solid transparent}.flash.success{background:#dcfce7; color:#166534; border-color:#bbf7d0}.flash.error{background:#fee2e2; color:#991b1b; border-color:#fecaca}.flash.info{background:#dbeafe; color:#1d4ed8; border-color:#bfdbfe}
.site-footer{padding:18px 16px 34px; text-align:center; color:#64748b; font-size:14px}.site-footer .tiny{display:block; font-size:12px; margin-top:6px; opacity:.8}
.sound-toggle{position:fixed; right:16px; bottom:16px; z-index:70;display:inline-flex; align-items:center; gap:8px;padding:12px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.8);background:rgba(255,255,255,.82); color:#22304e; font-weight:900; box-shadow:var(--shadow);cursor:pointer; backdrop-filter:blur(12px)}.sound-toggle:hover{transform:translateY(-1px)}.sound-toggle .dot{width:9px; height:9px; border-radius:50%; background:#22c55e;box-shadow:0 0 0 5px rgba(34,197,94,.14)}.sound-toggle.off .dot{background:#94a3b8; box-shadow:0 0 0 5px rgba(148,163,184,.12)}
.neon-line{height:4px; border-radius:999px; margin:0 0 16px;background:linear-gradient(90deg,#ff4f7d,#5b8cff,#a855f7,#32d296);box-shadow:0 0 18px rgba(91,140,255,.35)}
@media (max-width:1100px){.flex{grid-template-columns:1fr}.sidebar{position:static}}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.topbar-inner{align-items:flex-start; flex-direction:column}.nav{width:100%; justify-content:flex-start}}
@media (max-width:560px){.stats{grid-template-columns:1fr}.grid-g{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}.card{padding:16px}.brand-title{font-size:16px}}