/* ===== S.A.F.E. 共用主題（沿用 /my 風格）===== */
* { box-sizing: border-box; }
:root{
/* 調色區：要換成暖橘系，只要改這裡 */
--bg1:#0b1020;
--bg2:#131a33;
--panel:#0f172a88;
--border:#2b3b55;
--muted:#9fb0c7;
--text:#e8eef7;
--accent:#58a6ff;
--ok:#35c26d;
--wait:#e3b341;
--cancel:#ff6b6b;
--radius:16px;
--shadow: 0 10px 30px rgba(3,10,30,.35), inset 0 1px 0 rgba(255,255,255,.05);
/* 通知膠囊 */
--msg-alpha:.14;
--msg-shadow: 0 10px 30px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06);
}
html, body { height: 100%; }
body {
margin: 0; color: var(--text);
font-family: system-ui, Segoe UI, Roboto, Arial;
background:
radial-gradient(1200px 600px at 80% -10%, #1a2666 0%, transparent 60%),
radial-gradient(900px 500px at -20% 20%, #0a7 0%, transparent 55%),
linear-gradient(180deg,var(--bg1),var(--bg2));
}
/* 布局 */
.container, .wrap { max-width: 980px; margin: 28px auto; padding: 0 20px; }
.section { margin-top: 26px; }
.title { margin: 6px 0 10px; color: var(--muted); font-size: 13px; letter-spacing: .3px; }
/* Header / Nav */
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.header h1 { margin: 0; font-size: 22px; letter-spacing: .4px }
.nav a, .topbar a {
color: var(--text); text-decoration: none; padding: 8px 12px;
border: 1px solid var(--border); border-radius: 12px; background: rgba(20,32,60,.4);
}
.nav a:hover, .topbar a:hover { opacity: .9; }
/* 卡片（玻璃質感） */
.card {
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--panel);
box-shadow: var(--shadow);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 18px;
margin: 14px 0;
}
/* 表單元件 */
label { display: block; margin: 10px 0 6px; color: var(--muted); font-size: 13px; }
input, select, textarea, button {
width: 100%; padding: 10px 12px; font-size: 15px; color: var(--text);
border: 1px solid var(--border); border-radius: 12px;
background: rgba(12,20,40,.65); outline: none;
}
textarea { resize: vertical; min-height: 88px; }
input:focus, select:focus, textarea:focus, button:focus {
border-color: var(--accent); box-shadow: 0 0 0 3px #58a6ff33;
}
/* 按鈕 */
button { cursor: pointer; transition: .18s transform ease; }
button:active { transform: translateY(1px); }
.btn { background: rgba(20,32,60,.9); }
.btn.primary { background: linear-gradient(180deg,#1f3b6b,#1b2a44); border-color: #2f4b7a; }
.btn.outline { background: transparent; }
.btn.danger { background: #2a1212; border-color: #8a2a2a; }
/* 版面工具 */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid .full { grid-column: 1 / -1; }
@media (max-width: 720px) { .grid { grid-template-columns: 1fr; } }
.hidden { display: none !important; }
.small { opacity: .8; font-size: 12px; }
/* 狀態徽章／統計 */
.badge{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--border);font-size:12px;margin-left:8px}
.badge.ok{color:#bff3d4;border-color:#1f6d45;background:#0f2a1c}
.badge.wait{color:#ffe7a6;border-color:#8f6a17;background:#2b230f}
.badge.cancel{color:#ffd0d0;border-color:#8a2a2a;background:#2a1212}
/* 列表 Pills */
.people{margin-top:8px;line-height:1.7}
.pill{
display:inline-block; margin:6px 6px 0 0; padding:8px 12px;
border:1px solid var(--border); border-radius:999px; font-size:16px;
background:rgba(18,26,46,.85)
}
/* 表格（admin 列表） */
table { border-collapse: collapse; width: 100%; margin-top: 12px; }
th, td { border: 1px solid var(--border); padding: 8px; vertical-align: top; }
thead th { background: rgba(20,32,60,.5); }
/* ===== 通知膠囊（取代原 .msg） ===== */
.msg{
position: relative;
display: none; /* 用 JS 切換 */
margin-top: 12px;
padding: 12px 44px 12px 44px;
border-radius: 16px;
border: 1px solid var(--border);
background: rgba(18,26,46,.85);
box-shadow: var(--msg-shadow);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
line-height: 1.7;
}
.msg.ok {
border-color: color-mix(in oklab, var(--ok) 60%, var(--border));
background: color-mix(in oklab, var(--ok) calc(var(--msg-alpha)*100%), rgba(18,26,46,.85));
}
.msg.err {
border-color: color-mix(in oklab, var(--cancel) 60%, var(--border));
background: color-mix(in oklab, var(--cancel) calc(var(--msg-alpha)*100%), rgba(18,26,46,.85));
}
.msg.info,
.msg.wait {
border-color: color-mix(in oklab, var(--accent) 60%, var(--border));
background: color-mix(in oklab, var(--accent) calc(var(--msg-alpha)*100%), rgba(18,26,46,.85));
}
.msg a{
color: var(--accent);
text-decoration: underline;
text-underline-offset: 2px;
}
.msg a:hover{ filter: brightness(1.15); }
/* 左側圖示 */
.msg::before{
content: "";
position: absolute; left: 14px; top: 50%;
width: 18px; height: 18px; transform: translateY(-50%);
background-repeat: no-repeat; background-size: 18px 18px;
opacity: .95;
}
.msg.ok::before{
background-image:url('data:image/svg+xml;utf8,');
}
.msg.err::before{
background-image:url('data:image/svg+xml;utf8,');
}
.msg.info::before,
.msg.wait::before{
background-image:url('data:image/svg+xml;utf8,');
}
/* 顯示動畫 */
.msg.show{
display:block;
animation: msg-pop .22s ease-out;
}
@keyframes msg-pop{
from{ transform: translateY(6px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* 關閉鍵與自動收起進度條（可選） */
.msg .close{
position: absolute; right: 8px; top: 6px;
border: 0; background: transparent; color: var(--text);
opacity: .7; font-size: 18px; line-height: 1; cursor: pointer;
}
.msg .close:hover{ opacity: 1; }
.msg[data-autoclose]::after{
content:"";
position:absolute; left:12px; right:12px; bottom:6px; height:2px;
background: currentColor; opacity:.35;
transform-origin:left center;
animation: msg-progress linear forwards;
animation-duration: var(--msg-ms, 6000ms);
}
@keyframes msg-progress{
from{ transform: scaleX(1); }
to { transform: scaleX(0); }
}
/* 人員欄位群組（index） */
fieldset.person{border:1px dashed var(--border);border-radius:12px;padding:12px;margin:10px 0}
legend{padding:0 6px;color:var(--muted);font-size:12px}
.p-course.hidden{display:none}
/* Login 面板（admin） */
.center { display:flex; justify-content:center; }
.loginPane { max-width: 520px; width: 100%; }