*{box-sizing:border-box}body{margin:0;background:#f4f6f8;color:#253247;font-family:ui-sans-serif,system-ui,"Noto Sans TC",sans-serif}.topbar{height:68px;background:#fff;border-bottom:1px solid #e7ebf0;display:flex;align-items:center;justify-content:space-between;padding:0 32px}.brand{font-size:20px;font-weight:800;color:#2563eb}.brand span{color:#253247}.top-user{display:flex;gap:18px;align-items:center;font-size:14px}.top-user form{margin:0}.top-user button{border:0;background:none;color:#64748b;cursor:pointer}.shell{display:flex;min-height:calc(100vh - 68px)}.sidebar{width:230px;background:#fff;padding:24px 14px;border-right:1px solid #e7ebf0}.sidebar a{display:block;padding:12px 16px;margin:3px 0;border-radius:8px;color:#64748b;text-decoration:none}.sidebar a.active,.sidebar a:hover{background:#eff6ff;color:#2563eb;font-weight:600}.content{flex:1;padding:36px;max-width:1400px}.page-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.page-head h1{margin:0 0 6px;font-size:27px}.page-head p,.muted{color:#8290a3;margin:0}.btn{display:inline-block;border:0;border-radius:7px;padding:10px 17px;font-size:14px;text-decoration:none;cursor:pointer}.primary{background:#2563eb;color:#fff}.secondary{background:#eef2f7;color:#42526a}.card{background:#fff;border:1px solid #e7ebf0;border-radius:10px;padding:25px;box-shadow:0 2px 8px #26364a08}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:20px}.stat{min-height:125px}.stat span{display:block;color:#8290a3;font-size:14px;margin-bottom:15px}.stat strong{display:block;font-size:24px;margin-bottom:10px}.stat small{color:#8290a3}.empty{text-align:center;padding:45px}.empty h2{font-size:18px}.empty p{color:#8290a3}.search{display:flex;gap:10px;margin-bottom:20px}.search input{max-width:340px}input,select{display:block;width:100%;padding:11px 12px;border:1px solid #d8e0e9;border-radius:6px;background:#fff;color:#253247;font:inherit}label{display:block;font-size:14px;color:#42526a;font-weight:600}label input,label select{margin-top:7px;font-weight:400}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:760px}th,td{text-align:left;padding:14px 12px;border-bottom:1px solid #edf0f3;font-size:14px}th{color:#8290a3;font-weight:600;background:#fbfcfd}.badge{padding:4px 9px;border-radius:20px;background:#f1f3f5;color:#8290a3;font-size:12px}.badge.on{background:#e9f8ef;color:#16834b}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}.actions{display:flex;justify-content:flex-end;gap:10px;margin-top:28px}em,.field-error{display:block;color:#dc3d4b;font-size:12px;font-style:normal;margin-top:5px}.alert{padding:12px 16px;border-radius:7px;margin-bottom:18px}.success{background:#e9f8ef;color:#16834b}.error{background:#fff0f1;color:#c52d3d}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#eff6ff,#f4f6f8)}.login-card{width:min(420px,calc(100% - 32px));background:#fff;border:1px solid #e7ebf0;border-radius:12px;padding:40px;box-shadow:0 15px 40px #1e3a8a12}.login-mark{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;background:#2563eb;color:#fff;font-weight:800;font-size:20px;margin-bottom:22px}.login-card h1{margin:0 0 8px}.login-card p{margin-bottom:30px}.login-card label{margin-bottom:18px}.check{display:flex;align-items:center;gap:8px;font-weight:400}.check input{width:auto;margin:0}.full{width:100%;margin-top:10px}@media(max-width:700px){.topbar{padding:0 18px}.sidebar{width:64px;padding:16px 8px}.sidebar a{font-size:0;text-align:center;padding:14px 4px}.sidebar a:before{content:'•';font-size:20px}.content{padding:24px 16px}.page-head{align-items:flex-start;gap:15px}.page-head h1{font-size:23px}.grid,.form-grid{grid-template-columns:1fr}.top-user{gap:8px;font-size:0}.top-user button{font-size:14px}}

/* Login page */
.login-page { min-height: 100vh; padding: 24px 16px; background: #f4f6f8; }
.login-card { width: min(440px, 100%); overflow: hidden; padding: 0; background: #fff; border: 0; border-radius: 16px; box-shadow: 0 18px 50px rgba(37, 50, 71, 0.14); }
.login-brand { padding: 36px 24px 32px; text-align: center; color: #fff; background: linear-gradient(135deg, #c94f00 0%, #ff6600 55%, #ff8a00 100%); }
.login-logo { display: block; width: 110px; height: 110px; margin: 0 auto 18px; object-fit: contain; }
.login-brand h1 { margin: 0; color: #fff; font-size: 24px; font-weight: 800; }
.login-form-panel { padding: 36px 40px 40px; }
.login-form-panel h2 { margin: 0 0 28px; color: #172337; font-size: 24px; font-weight: 700; text-align: center; }
.login-form-panel label { margin-bottom: 18px; color: #42526a; font-size: 14px; font-weight: 600; }
.login-form-panel input[type="email"], .login-form-panel input[type="password"], .login-form-panel input[type="text"] { min-height: 46px; margin-top: 8px; padding: 11px 13px; border: 1px solid #d8e0e9; border-radius: 8px; }
.login-form-panel input:focus { outline: 0; border-color: #ff6600; box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.16); }
.login-form-panel .check { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 400; }
.login-form-panel .check input { width: auto; min-height: 0; margin: 0; }
.login-submit { min-height: 46px; margin-top: 8px; border-radius: 8px; background: #c94f00; color: #fff; font-weight: 700; }
.login-submit:hover, .login-submit:focus { background: #a84000; color: #fff; }
@media (max-width: 480px) { .login-form-panel { padding: 30px 24px 32px; } }