:root{--navy:#0d3152;--blue:#287eb7;--red:#d6103b;--ink:#152b40;--muted:#6d8092;--line:#dce6ed;--bg:#f3f7fa;--green:#19735b;--amber:#bd7311}*{box-sizing:border-box}body{margin:0;background:var(--bg);font:14px "Segoe UI",Arial,sans-serif;color:var(--ink)}.topbar{height:68px;padding:0 max(24px,calc((100vw - 1240px)/2));display:flex;align-items:center;justify-content:space-between;background:var(--navy);color:#fff;box-shadow:0 2px 9px #00172928}.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:14px;font-weight:800;letter-spacing:.8px}.brand img{width:58px;height:43px;object-fit:contain}.account{font-size:13px;font-weight:600}.account a{color:#fff;margin-left:12px}main{width:min(1240px,calc(100% - 36px));margin:0 auto 56px}.hero{padding:36px 0 26px}.hero p,.panel-head p,.card p{margin:0 0 6px;color:var(--blue);font-size:11px;font-weight:800;letter-spacing:.8px}.hero h1{font-size:34px;letter-spacing:-1px;margin:0 0 7px}.hero span{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}.card,.panel,.notice{background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 7px 20px #173b5b0b}.card{position:relative;min-height:130px;padding:22px}.card .icon{position:absolute;right:21px;top:20px;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#eaf4fb;color:var(--blue);font-weight:800}.card h2{margin:11px 0 6px;font-size:24px}.card small{color:var(--muted)}.panel{padding:24px;margin:18px 0}.panel-head{display:flex;align-items:start;justify-content:space-between;gap:16px;margin-bottom:18px}.panel-head h2{margin:0;font-size:19px}.panel-head small{color:var(--muted);max-width:340px;text-align:right}.form{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;border-top:1px solid var(--line);padding-top:18px}.form label{display:grid;gap:6px;font-weight:700;color:#334e67;font-size:12px}.form .wide{grid-column:span 2}input,select,textarea{width:100%;border:1px solid #cbd9e4;border-radius:7px;padding:10px;font:inherit;color:var(--ink);background:#fff}textarea{resize:vertical}.action-row{display:flex!important;align-items:center;gap:12px}button{border:0;border-radius:7px;padding:10px 15px;background:var(--blue);color:#fff;font:700 13px inherit;cursor:pointer}button:hover{background:#176b9e}.secondary{background:#edf3f7;color:#31526c}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:700px}th{background:#f8fafc;text-align:left;color:#5e7489;font-size:11px;letter-spacing:.3px}th,td{padding:13px 11px;border-bottom:1px solid var(--line);vertical-align:middle}td small{color:var(--muted)}.status{display:inline-block;border-radius:99px;padding:4px 9px;font-size:11px;font-weight:800;background:#e8eff4;color:#4f687d}.status.approved{color:var(--green);background:#e1f4ed}.status.rejected{color:#b21f3f;background:#fde9ee}.status.submitted,.status.manager_approved{color:var(--amber);background:#fff1d9}.empty{margin:0;color:var(--muted)}.notice{padding:14px 18px;margin-bottom:18px;background:#fff7e7;border-color:#f2d69b;color:#795319}.hidden{display:none!important}@media(max-width:760px){main{width:min(100% - 24px,1240px)}.topbar{padding:0 14px}.hero{padding:26px 0 18px}.grid{grid-template-columns:1fr}.form{grid-template-columns:1fr}.form .wide{grid-column:auto}.panel{padding:17px}.panel-head{display:block}.panel-head small{display:block;text-align:left;margin-top:7px}}
