*{box-sizing:border-box}
:root{--bg:#f3f5fa;--ink:#1e293b;--mut:#64748b;--line:#e2e8f0;--acc:#4f46e5;--acc-d:#4338ca;--soft:#eef2ff;--s1:#1e1b4b;--s2:#3730a3;--sb1:#ece6ff;--sb2:#ffffff}
body.t-admin{--acc:#2563eb;--acc-d:#1d4ed8;--soft:#eff6ff;--s1:#0b1730;--s2:#1e3a8a;--sb1:#e6efff;--sb2:#ffffff}
body.t-manager{--acc:#0f766e;--acc-d:#115e59;--soft:#f0fdfa;--s1:#052e2b;--s2:#0f766e;--sb1:#d9f5ee;--sb2:#ffffff}
body.t-employee{--acc:#6d28d9;--acc-d:#5b21b6;--soft:#f5f3ff;--s1:#2e1065;--s2:#5b21b6;--sb1:#ece6ff;--sb2:#ffffff}
body{margin:0;font:15px/1.55 'Segoe UI',system-ui,sans-serif;color:var(--ink);background:var(--bg)}a{color:var(--acc-d)}
.app{display:flex;min-height:100vh}
aside{width:260px;flex:none;background:linear-gradient(180deg,var(--sb1),var(--sb2));color:var(--ink);border-right:1px solid var(--line);box-shadow:2px 0 14px rgba(15,23,42,.05);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:18px 14px}
.brand{display:flex;gap:10px;align-items:center;padding:4px 8px 18px;border-bottom:1px solid var(--line);margin-bottom:12px}.brand b{display:block;font-size:18px;color:#0f172a}.brand small{color:var(--mut)}
aside nav{display:flex;flex-direction:column;gap:3px;overflow:auto}
aside nav a{display:flex;align-items:center;gap:12px;color:#1e293b;text-decoration:none;padding:9px 12px;border-radius:10px;font-weight:600;font-size:14.5px;transition:.15s}
aside nav a .ic{width:32px;height:32px;border-radius:9px;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.15);display:flex;align-items:center;justify-content:center}
aside nav a:hover{background:rgba(15,23,42,.06)}aside nav a.on{background:var(--acc);color:#fff;font-weight:700;box-shadow:0 6px 14px rgba(15,23,42,.22)}aside nav a.on .ic{background:rgba(255,255,255,.25);box-shadow:none}
.sl{margin:16px 12px 4px;font-size:11px;letter-spacing:1.4px;text-transform:uppercase;color:#475569;font-weight:700}.sf{margin-top:auto;font-size:12px;color:#64748b;padding:8px 12px}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:16px;background:#fff;border-bottom:1px solid var(--line);padding:10px 28px;position:sticky;top:0;z-index:10}.crumb{margin-right:auto;font-weight:600;color:var(--mut)}
.usr{display:flex;align-items:center;gap:10px}.usr b{display:block;line-height:1.1}.usr small{color:var(--mut)}
.av{display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--acc);color:#fff;align-items:center;justify-content:center;font-weight:700;margin-right:8px;flex:none}.usr .av{margin:0}
.bell{position:relative;font-size:20px;cursor:pointer;outline:none;padding:4px 8px}.cnt{position:absolute;top:-4px;right:-2px;background:#dc2626;color:#fff;border-radius:99px;font:700 11px system-ui;padding:1px 6px}
.drop{display:none;position:absolute;right:0;top:36px;width:340px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 30px rgba(15,23,42,.18);padding:10px;font-size:14px}.bell:hover .drop,.bell:focus-within .drop{display:block}
.drop b{display:block;padding:4px 8px}.drop .n{display:block;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--ink);border-left:4px solid #3b82f6;margin:4px 0;background:#f8fafc}.drop .n.warn{border-color:#f59e0b;background:#fffbeb}.drop .n.bad{border-color:#dc2626;background:#fef2f2}.none{color:var(--mut);padding:8px}
main{padding:26px 30px;max-width:1180px;width:100%}
.ph{display:flex;gap:14px;align-items:center;margin-bottom:20px}.chip{width:50px;height:50px;border-radius:14px;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:0 6px 14px rgba(0,0,0,.18)}
.ph h1{font-size:28px;font-weight:800;margin:0;color:#0f172a;line-height:1.15}.ph p{margin:2px 0 0;color:var(--mut)}
.sec{font-size:18px;font-weight:700;border-left:4px solid var(--acc);padding-left:10px;margin:24px 0 10px;color:#0f172a}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:12px 0;box-shadow:0 1px 3px rgba(15,23,42,.05)}.card h3,.ct{margin:0 0 8px;font-size:16px;color:#0f172a}
table{width:100%;border-collapse:collapse}th{background:var(--soft);color:var(--acc-d);font-size:13px;text-transform:uppercase;letter-spacing:.4px}td,th{padding:9px 8px;text-align:left;border-bottom:1px solid #eef0f6}tr:hover td{background:#fafbff}
form{display:inline}input,select{padding:8px 10px;margin:2px;border:1px solid #cbd5e1;border-radius:9px;font:inherit;background:#fff}input:focus,select:focus{outline:2px solid var(--acc);border-color:var(--acc)}input:disabled,select:disabled{background:#f1f5f9;color:#475569}
button,.btn{padding:8px 16px;margin:2px;border:0;border-radius:9px;background:var(--acc);color:#fff;font:600 14px 'Segoe UI',system-ui;cursor:pointer}button:hover{background:var(--acc-d)}.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}.ghost:hover{background:#f1f5f9}.danger{background:#dc2626}
.msg{background:#fef9c3;border:1px solid #fde68a;padding:10px 14px;border-radius:10px;margin:8px 0}.alert{padding:10px 14px;border-radius:10px;margin:8px 0;border-left:5px solid}.alert a{color:inherit;font-weight:600;text-decoration:none}.alert.warn{background:#fffbeb;border-color:#f59e0b;color:#92400e}.alert.bad{background:#fef2f2;border-color:#dc2626;color:#991b1b}
small{color:var(--mut)}.g{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 14px}.g label{display:block;margin:6px 0;font-size:13px;font-weight:600;color:#334155}.g input,.g select{width:100%;margin:3px 0}.g2{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}.stat{border-radius:14px;padding:16px;color:#fff;display:flex;flex-direction:column;box-shadow:0 6px 14px rgba(15,23,42,.12)}.stat b{font-size:32px;line-height:1.2}.stat small{color:rgba(255,255,255,.85)}
.c1{background:linear-gradient(135deg,var(--acc),var(--s2))}.c2{background:linear-gradient(135deg,#f59e0b,#d97706)}.c3{background:linear-gradient(135deg,#0ea5e9,#0369a1)}.c4{background:linear-gradient(135deg,#10b981,#047857)}.c5{background:linear-gradient(135deg,#ec4899,#be185d)}
.hero{background:linear-gradient(135deg,var(--s1),var(--s2));color:#fff;border-radius:18px;padding:26px 30px;margin-bottom:16px}.hero h2{margin:0 0 6px;font-size:26px}.hero p{margin:4px 0;color:#dbe4ff;max-width:700px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}.tile{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;color:var(--ink);border-left:5px solid var(--acc);transition:.15s}.tile:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(15,23,42,.12)}.tile .ic{font-size:26px}.tile b{display:block;margin:4px 0}
.viewing{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px;margin-bottom:16px}.viewing b{margin:0 8px;font-size:17px}
.pill{padding:5px 13px;border-radius:99px;background:var(--soft);text-decoration:none;color:var(--acc-d);font-weight:600;font-size:14px}.pill.on{background:var(--acc);color:#fff}
.badge{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;background:var(--soft);color:var(--acc-d)}.badge.ok{background:#dcfce7;color:#166534}.badge.warn{background:#fef3c7;color:#92400e}.badge.bad{background:#fee2e2;color:#991b1b}
.bad{border:2px solid #dc2626!important;background:#fef2f2!important}.amber{border:2px solid #f59e0b!important;background:#fffbeb!important}.err{color:#b91c1c;font-size:13px}.warnt{color:#92400e;font-size:13px}
.i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--acc);color:#fff;font:700 11px system-ui;cursor:help;position:relative;margin-left:5px;vertical-align:middle;text-transform:none;letter-spacing:0}.stat .i{background:#fff;color:#334155}
.i:hover::after,.i:focus::after{content:attr(data-tip);position:absolute;left:50%;bottom:140%;transform:translateX(-50%);width:240px;background:#0f172a;color:#fff;padding:8px 10px;border-radius:8px;font:400 12.5px/1.4 system-ui;z-index:30;text-align:left;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.prog{height:8px;background:#e2e8f0;border-radius:99px;overflow:hidden}.prog>div{height:100%;background:linear-gradient(90deg,var(--acc),#10b981)}.stat .prog{background:rgba(255,255,255,.35)}.stat .prog>div{background:#fff}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;max-width:420px}.cal i{font-style:normal;text-align:center;padding:6px 0;border-radius:6px;background:#f1f5f9;font-size:13px}.cal .h{background:none;font-weight:700;color:var(--mut)}.cal .o{opacity:.3}.cal .today{outline:2px solid #0f172a}
.annual{background:#3b82f6!important;color:#fff}.sick{background:#ef4444!important;color:#fff}.maternity{background:#ec4899!important;color:#fff}.paternity{background:#8b5cf6!important;color:#fff}.cal .pending{opacity:.6;outline:2px dashed #475569}
.yr{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}.mt{font-weight:700;margin:6px 0;color:var(--acc-d)}.dot{display:inline-block;width:12px;height:12px;border-radius:4px;margin:0 4px 0 10px}
.pf{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.pf .big{width:72px;height:72px;font-size:30px;margin:0}.pf h3{font-size:22px}.foot{margin:30px 0 6px;color:#94a3b8;font-size:12px;text-align:center}
.note{background:var(--soft);border-color:transparent}.gh{display:flex;justify-content:space-between;gap:10px}details{margin-top:8px}summary{cursor:pointer;color:var(--acc-d);font-weight:600}.cm{border-left:3px solid var(--line);padding:4px 10px;margin:6px 0}.cm.mg{border-color:var(--acc)}
/* sign-in page */
body.t-login{margin:0}.lg{display:flex;min-height:100vh}.lg .l{flex:1.15;background:linear-gradient(150deg,#0b1730 0%,#1e3a8a 60%,#0f766e 100%);color:#fff;padding:56px 64px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.lg .l::after{content:"";position:absolute;right:-120px;bottom:-120px;width:380px;height:380px;border-radius:50%;background:rgba(255,255,255,.06)}.lb{display:flex;gap:12px;align-items:center;font-size:24px;font-weight:700;margin-bottom:46px}.lg h1{font-size:40px;line-height:1.15;margin:0 0 12px}.lg .l p{color:#cbd5e1;max-width:480px;font-size:17px}
.feats{list-style:none;padding:0;margin:26px 0}.feats li{margin:12px 0;display:flex;gap:12px;align-items:center;font-size:16px}.feats span{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}.lf{margin-top:auto;font-size:13px;opacity:.7}
.lg .r{flex:1;display:flex;align-items:center;justify-content:center;background:#f8fafc;padding:24px}.lcard{background:#fff;border-radius:20px;padding:36px;width:100%;max-width:420px;box-shadow:0 20px 50px rgba(15,23,42,.12);border:1px solid var(--line)}
.lcard h2{margin:0 0 4px;font-size:26px;color:#0f172a}.lcard label{display:block;font-weight:600;font-size:14px;margin:16px 0 4px}.lcard input{width:100%;padding:12px 14px;margin:0}.lcard button{width:100%;padding:13px;margin:22px 0 0;font-size:16px;background:#2563eb}.lcard button:hover{background:#1d4ed8}.help{color:var(--mut);font-size:13px;margin-top:18px;text-align:center}
@media(max-width:900px){.app{flex-direction:column}aside{width:auto;height:auto;position:static}.lg{flex-direction:column}.lg .l{padding:32px}.top{padding:10px 14px}main{padding:18px 14px}}