*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,Segoe UI,sans-serif;background:#f4f6f9;color:#332d3f;min-height:100vh;display:flex;flex-direction:column}
header .hbar{background:#332d3f;color:#fff;padding:14px 28px;display:flex;justify-content:space-between;align-items:center}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:36px;width:auto}
.logo span{font-weight:700;font-size:1.1rem}
.ttl{font-size:.95rem;opacity:.8}
main{flex:1;max-width:640px;margin:40px auto;padding:0 20px;width:100%}
.card{background:#fff;border-radius:10px;padding:32px;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.card h1{margin-bottom:8px;font-size:1.5rem;color:#332d3f}
.desc{color:#555;margin-bottom:24px}
.fg{margin-bottom:18px}.fg label{display:block;font-weight:600;margin-bottom:6px;color:#332d3f}
.fg input[type="file"],.fg input[type="text"],.fg input[type="number"],.fg input[type="password"],.fg input[type="date"],.fg select{width:100%;padding:10px 12px;border:1px solid #d0d5dd;border-radius:6px;font-size:.95rem}
.fg input[type="file"]:focus,.fg input[type="text"]:focus,.fg input[type="number"]:focus,.fg input[type="password"]:focus,.fg input[type="date"]:focus,.fg select:focus{outline:none;border-color:#db374f;box-shadow:0 0 0 3px rgba(219,55,79,.15)}
.fg small{color:#888;font-size:.82rem}
.btn{display:inline-block;padding:12px 28px;background:#db374f;color:#fff;border:none;border-radius:6px;font-size:1rem;cursor:pointer;text-decoration:none;margin-top:10px}
.btn:hover{background:#c22e43}
.btn:disabled{background:#999;cursor:not-allowed}
.dl{background:#332d3f}.dl:hover{background:#4a4358}
.sec{background:#6c757d;margin-left:8px}.sec:hover{background:#545b62}
#submitError{ display: none;  margin-top: 12px; }
#submitError.visible{ display: block; }
.alert{padding:12px 16px;border-radius:6px;margin-bottom:16px}
.a-error{background:#fee;color:#a00;border:1px solid #fcc}
.a-success{background:#efe;color:#070;border:1px solid #cfc}
.a-warning{background:#fff8e1;color:#7a5200;border:1px solid #ffe082}
.a-info{background:#e8f4fd;color:#0a558c;border:1px solid #90caf9}
.rbox{padding:20px;border-radius:8px;margin-bottom:20px}
.r-success{background:#f0faf5;border:1px solid #b7e4c7}
.r-error{background:#fef2f2;border:1px solid #fca5a5}
footer{text-align:center;padding:16px;color:#999;font-size:.82rem}

/* --- Logout form --- */
.logout-form{text-align:right;margin-bottom:8px}

/* --- Login card --- */
.login-card{max-width:420px;margin:0 auto}
.login-hd{text-align:center;margin-bottom:28px}
.login-hd svg{width:40px;height:40px;color:#332d3f}
.login-hd h1{margin:12px 0 4px;font-size:1.4rem}
.login-hd p{color:#888;font-size:.85rem}
.input-wrap{position:relative}
.fg .input-wrap input[type="password"]{padding-right:48px}
.pw-toggle{position:absolute;right:0;top:0;height:100%;width:44px;background:none;border:none;border-left:1px solid #d0d5dd;cursor:pointer;color:#aaa;display:flex;align-items:center;justify-content:center;border-radius:0 6px 6px 0}
.pw-toggle:hover{color:#332d3f;background:#f4f6f9}
.pw-toggle svg{width:16px;height:16px;pointer-events:none}
.pw-toggle .eye-off{display:none}
.pw-toggle.pw-visible .eye-on{display:none}
.pw-toggle.pw-visible .eye-off{display:block}
.caps-warn{color:#b45300;font-size:.82rem;margin-top:5px;display:none}
.caps-warn.visible{display:block}
.btn-full{width:100%;text-align:center;padding:12px;margin-top:4px}
.login-note{text-align:center;color:#bbb;font-size:.78rem;margin-top:20px;padding-top:16px;border-top:1px solid #f0f0f0}

/* --- Loading overlay --- */
.loading-overlay{position:fixed;inset:0;background:rgba(51,45,63,.55);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;pointer-events:none;transition:opacity .25s ease}
.loading-overlay.active{opacity:1;pointer-events:auto}
.loading-box{background:#fff;border-radius:12px;padding:40px 48px;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.18)}
.loading-text{font-size:1.15rem;font-weight:600;color:#332d3f;margin-top:20px}
.loading-sub{font-size:.85rem;color:#888;margin-top:6px}

/* --- Checkbox --- */
.fg .cb-wrap{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-weight:normal}
.fg .cb-wrap input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0}
.cb-box{display:inline-block;width:18px;height:18px;border:2px solid #d0d5dd;border-radius:4px;background:#fff;flex-shrink:0;transition:border-color .15s,background .15s}
.cb-wrap input[type="checkbox"]:checked+.cb-box{background:#db374f;border-color:#db374f}
.cb-box::after{content:'';display:none;width:5px;height:9px;border:2px solid #fff;border-top:none;border-left:none;transform:rotate(45deg) translate(2px,-1px)}
.cb-wrap input[type="checkbox"]:checked+.cb-box::after{display:block}
.cb-wrap input[type="checkbox"]:focus+.cb-box{outline:none;box-shadow:0 0 0 3px rgba(219,55,79,.15)}
.cb-lbl{font-size:.95rem;color:#332d3f}

/* --- Error page --- */
.err-card{text-align:center;padding:48px 32px}
.err-icon{margin:0 auto 20px;width:56px;height:56px;color:#db374f}
.err-icon svg{width:100%;height:100%}
.err-card h1{font-size:1.4rem;margin-bottom:12px}
.err-card .desc{margin-bottom:28px}

/* Spinner */
.spinner{width:48px;height:48px;margin:0 auto;border:4px solid #e0e0e0;border-top-color:#db374f;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}