/* 大像娛樂展覽管理系統 — 淺色玻璃感 UI */
* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --yellow:#F7C51E; --yellow-deep:#6b4e00; --amber:#8a6a1f;
  --ink:#f2f4f9; --card:rgba(255,255,255,.72);
  --stroke:rgba(15,23,42,.10); --stroke-soft:rgba(15,23,42,.06);
  --txt:#1a2332; --txt2:#5b6472; --txt3:#8a93a3;
  --ok:#15803d; --warn:#a16207; --bad:#dc2626; --blue:#1d4ed8;
}
body {
  font-family:"Microsoft JhengHei","PingFang TC",sans-serif;
  background:var(--ink); color:var(--txt); min-height:100vh; position:relative;
}
body::before {
  content:""; position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(640px 440px at 78% -8%, rgba(247,197,30,.22), transparent 60%),
    radial-gradient(520px 400px at -6% 82%, rgba(96,165,250,.14), transparent 60%);
  pointer-events:none;
}
body::after {
  content:""; position:fixed; inset:0; z-index:0; opacity:.6; pointer-events:none;
  background-image:linear-gradient(rgba(15,23,42,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.035) 1px, transparent 1px);
  background-size:44px 44px;
}
.app { position:relative; z-index:1; display:flex; min-height:100vh; }
.side {
  width:225px; padding:22px 14px; display:flex; flex-direction:column; gap:6px; flex:none;
  background:rgba(255,255,255,.55); border-right:1px solid var(--stroke-soft); backdrop-filter:blur(24px);
}
.brand { display:flex; align-items:center; gap:11px; padding:6px 8px 18px; }
.brand img { width:42px; height:42px; border-radius:11px; box-shadow:0 6px 18px rgba(247,197,30,.45); }
.brand .t1 { font-size:15px; font-weight:700; }
.brand .t2 { font-size:9.5px; color:var(--txt3); letter-spacing:1.5px; }
.nav { display:flex; flex-direction:column; gap:3px; }
.nav a { display:flex; align-items:center; gap:10px; padding:10px 13px; border-radius:12px;
  color:var(--txt2); text-decoration:none; font-size:13.5px; cursor:pointer; }
.nav a.on { background:linear-gradient(120deg, rgba(247,197,30,.38), rgba(247,197,30,.14));
  border:1px solid rgba(200,150,10,.45); color:var(--yellow-deep); font-weight:700; }
.side .foot { margin-top:auto; padding:12px; border-radius:14px; background:var(--card); border:1px solid var(--stroke-soft); font-size:11px; color:var(--txt3); line-height:1.6; }
.main { flex:1; padding:24px 28px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.top { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.top h1 { font-size:20px; font-weight:800; }
.top .sub { color:var(--txt3); font-size:12.5px; margin-top:3px; }
.top .sp { flex:1; }
.chip { padding:7px 14px; border-radius:99px; font-size:12px; color:var(--txt2);
  background:var(--card); border:1px solid var(--stroke); backdrop-filter:blur(16px); }
.chip.hl { border-color:rgba(200,150,10,.45); color:var(--yellow-deep); font-weight:700; }
.card { background:var(--card); border:1px solid rgba(255,255,255,.9); border-radius:18px;
  backdrop-filter:blur(24px); padding:18px 20px; position:relative;
  box-shadow:0 12px 30px rgba(15,23,42,.09), inset 0 1px 0 rgba(255,255,255,.95); }
.card .hd { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.card .hd h3 { font-size:14px; font-weight:700; }
.card .hd .more { margin-left:auto; font-size:11.5px; color:var(--txt3); }
.dot { width:8px; height:8px; border-radius:50%; background:var(--yellow); box-shadow:0 0 8px rgba(247,197,30,.9); flex:none; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.kpi .lab { font-size:12px; color:var(--txt2); }
.kpi .val { font-size:29px; font-weight:800; margin:6px 0 3px; font-family:"Segoe UI","Microsoft JhengHei",sans-serif; }
.kpi .val small { font-size:14px; color:var(--txt2); font-weight:600; }
.kpi.hot { background:linear-gradient(135deg, rgba(247,197,30,.42), rgba(247,197,30,.14)); border-color:rgba(200,150,10,.5); }
.kpi.hot .val { color:var(--yellow-deep); }
.tag { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:10.5px; font-weight:700; white-space:nowrap; }
.tag.g { background:rgba(34,197,94,.14); color:var(--ok); border:1px solid rgba(34,197,94,.35); }
.tag.y { background:rgba(247,197,30,.22); color:var(--warn); border:1px solid rgba(200,150,10,.4); }
.tag.r { background:rgba(220,38,38,.10); color:var(--bad); border:1px solid rgba(220,38,38,.3); }
.tag.b { background:rgba(29,78,216,.10); color:var(--blue); border:1px solid rgba(29,78,216,.28); }
.tag.k { background:rgba(15,23,42,.06); color:var(--txt2); border:1px solid var(--stroke); }
table { width:100%; border-collapse:collapse; font-size:12.5px; }
th { text-align:left; color:var(--txt3); font-size:11px; font-weight:700; letter-spacing:.6px; padding:0 10px 9px; border-bottom:1px solid var(--stroke); }
td { padding:10px; border-bottom:1px solid var(--stroke-soft); vertical-align:top; }
tr:last-child td { border-bottom:none; }
.num { font-family:"Segoe UI",sans-serif; font-weight:700; }
.r { text-align:right; }
.bar { height:7px; border-radius:99px; background:rgba(15,23,42,.10); overflow:hidden; }
.bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#e8b400,var(--yellow)); }
.btn { display:inline-flex; align-items:center; gap:7px; padding:9px 17px; border-radius:12px; font-size:13px; font-weight:700;
  border:none; cursor:pointer; font-family:inherit; }
.btn.p { background:linear-gradient(135deg,#ffd84d,var(--yellow)); color:#231a05; box-shadow:0 6px 18px rgba(247,197,30,.45); }
.btn.o { background:rgba(255,255,255,.8); border:1px solid var(--stroke); color:var(--txt); }
.btn.d { background:rgba(220,38,38,.08); border:1px solid rgba(220,38,38,.3); color:var(--bad); }
.btn.sm { padding:5px 12px; font-size:11.5px; border-radius:9px; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
input, select, textarea { font-family:inherit; font-size:13px; color:var(--txt);
  background:rgba(255,255,255,.85); border:1px solid var(--stroke); border-radius:10px; padding:9px 12px; width:100%; }
input:focus, select:focus, textarea:focus { outline:2px solid rgba(247,197,30,.5); border-color:rgba(200,150,10,.5); }
label { font-size:11.5px; color:var(--txt2); font-weight:700; display:block; margin-bottom:5px; }
.fgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.frow { margin-bottom:12px; }
.notice { display:flex; align-items:center; gap:10px; padding:11px 16px; border-radius:13px; font-size:12.5px;
  background:linear-gradient(120deg, rgba(247,197,30,.20), rgba(247,197,30,.06)); border:1px solid rgba(200,150,10,.4); color:var(--yellow-deep); }
.notice.err { background:rgba(220,38,38,.08); border-color:rgba(220,38,38,.35); color:var(--bad); }
.notice.ok { background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.35); color:var(--ok); }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:980px){ .grid2 { grid-template-columns:1fr; } .side { display:none; } }
.mut { color:var(--txt3); font-size:11px; }
.sect { display:none; flex-direction:column; gap:16px; }
.sect.on { display:flex; }
/* 登入頁 */
.login-wrap { position:relative; z-index:1; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card { width:400px; max-width:94vw; text-align:center; padding:34px 30px; }
.login-card img { width:72px; height:72px; border-radius:18px; box-shadow:0 10px 30px rgba(247,197,30,.45); margin-bottom:14px; }
.login-card h1 { font-size:20px; font-weight:800; margin-bottom:4px; }
.login-card .sys { font-size:11px; color:var(--txt3); letter-spacing:2px; margin-bottom:22px; }
.demo-badge { position:fixed; right:14px; bottom:14px; z-index:9; padding:7px 14px; border-radius:99px; font-size:11px; font-weight:700;
  background:rgba(29,78,216,.10); color:var(--blue); border:1px solid rgba(29,78,216,.3); backdrop-filter:blur(10px); }
.cartline { display:flex; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid var(--stroke-soft); font-size:12.5px; }
.cartline:last-child { border-bottom:none; }
.skucard { border:1px solid var(--stroke); border-radius:14px; padding:13px 14px; background:rgba(255,255,255,.8); }
.skucard .nm { font-weight:700; font-size:13px; min-height:36px; }
.skucard .meta { display:flex; align-items:baseline; gap:6px; margin:6px 0; }
.skucard .pr { font-size:16px; font-weight:800; color:var(--yellow-deep); font-family:"Segoe UI",sans-serif; }
.skugrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.mstone { display:flex; align-items:center; }
.ms { flex:1; text-align:center; position:relative; }
.ms::before { content:""; position:absolute; top:9px; left:-50%; width:100%; height:2.5px; background:rgba(15,23,42,.14); }
.ms:first-child::before { display:none; }
.ms.done::before { background:linear-gradient(90deg,#e8b400,var(--yellow)); }
.ms .pt { width:19px; height:19px; border-radius:50%; margin:0 auto; background:rgba(15,23,42,.08); border:2px solid rgba(15,23,42,.2);
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center; font-size:9px; }
.ms.done .pt { background:var(--yellow); border-color:#d8a900; color:#231a05; font-weight:800; }
.ms.now .pt { background:#fff; border-color:var(--yellow); box-shadow:0 0 10px rgba(247,197,30,.6); }
.ms .mt { font-size:11px; margin-top:6px; color:var(--txt2); }
.ms.done .mt, .ms.now .mt { color:var(--txt); font-weight:700; }