@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700;900&display=swap');
*{font-family:'Noto Sans TC',sans-serif;box-sizing:border-box;}
body{background:#0f1117;color:#fff;min-height:100vh;margin:0}
a{text-decoration:none;color:inherit}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
::-webkit-scrollbar-track{background:transparent}
input,select,textarea{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:.5rem;padding:.5rem .75rem;width:100%;outline:none;transition:border-color .2s,box-shadow .2s}
input:focus,select:focus,textarea:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.15)}
input::placeholder{color:rgba(255,255,255,.3)}
.btn{padding:.5rem 1.25rem;border-radius:.5rem;font-weight:600;transition:all .2s;cursor:pointer;border:none;display:inline-flex;align-items:center;gap:.4rem}
.btn-primary{background:#3b82f6;color:#fff}
.btn-primary:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px rgba(59,130,246,.3)}
.btn-success{background:#10b981;color:#fff}
.btn-success:hover{background:#059669}
.btn-danger{background:#ef4444;color:#fff}
.btn-danger:hover{background:#dc2626}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.12)}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn-sm{padding:.3rem .75rem;font-size:.8rem}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:1rem;padding:1.25rem}
.card:hover{border-color:rgba(255,255,255,.15)}
.glass{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:1rem}
.animate-slideUp{animation:slideUp .3s ease-out}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.animate-fadeIn{animation:fadeIn .4s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-in{animation:fadeIn .4s ease-out}
.page{max-width:6xl;margin:0 auto;padding:1.5rem}
.section-title{font-size:1.25rem;font-weight:700;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.badge{padding:.2rem .6rem;border-radius:9999px;font-size:.7rem;font-weight:700}
.badge-blue{background:rgba(59,130,246,.2);color:#93c5fd}
.badge-green{background:rgba(16,185,129,.2);color:#6ee7b7}
.badge-amber{background:rgba(245,158,11,.2);color:#fcd34d}
.badge-red{background:rgba(239,68,68,.2);color:#fca5a5}
.empty-state{text-align:center;padding:4rem 2rem;color:#6b7280}
.empty-state .text-5xl{font-size:3rem;margin-bottom:1rem}
.dropdown{display:none;position:absolute;right:0;top:100%;background:#1f2937;border:1px solid rgba(255,255,255,.1);border-radius:.75rem;padding:.5rem;min-w:160px;z-index:50;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.dropdown.show{display:block}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:200;align-items:center;justify-content:center;padding:1rem}
.modal.show{display:flex}
.modal-content{background:#1a1d27;border:1px solid rgba(255,255,255,.1);border-radius:1.25rem;padding:1.5rem;max-width:480px;width:100%;max-height:90vh;overflow-y:auto}
.spinner{border:2px solid rgba(255,255,255,.1);border-top-color:#3b82f6;border-radius:50%;width:24px;height:24px;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
table{width:100%;border-collapse:collapse}
th,td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.05);font-size:.875rem}
th{color:#9ca3af;font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}
tr:hover td{background:rgba(255,255,255,.02)}
.star{color:#d1d5db;font-size:1.5rem;cursor:pointer;transition:color .15s,transform .15s}
.star.active,.star:hover{color:#f59e0b;transform:scale(1.1)}