html,body,#root{min-height:100%}:root{--bg:#eef2f6;--panel:#f8fbff;--ink:#1f2a38;--muted:#607286;--line:#d5deea;--primary:#6aa8df;--primary-dark:#4c8fcf;--danger:#9a2e2e;--ok:#1a7f37;--warn:#8a6700}*{box-sizing:border-box}body{background:radial-gradient(circle at top right, #fff, var(--bg));color:var(--ink);margin:0;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}.app-shell{flex-direction:column;min-height:100vh;display:flex}.top-navbar{border-bottom:1px solid var(--line);background:#f8fbff;width:100%}.top-navbar-inner{justify-content:space-between;align-items:center;max-width:1020px;margin:0 auto;padding:.55rem 1.25rem;display:flex}.nav-logo{object-fit:contain;width:auto;height:42px}.nav-login{color:#1f2a38;cursor:pointer;background:#dceaf8;border:1px solid #8eb2d8;border-radius:9px;padding:.45rem .9rem;font-weight:600}.nav-login:hover{background:#c9ddf4}.app{flex:1;width:100%;max-width:1020px;margin:0 auto;padding:1.25rem}.hero{border:1px solid var(--line);background:linear-gradient(120deg,#edf6ff,#f7fbff);border-radius:16px;padding:1.2rem}.hero h1{margin:.2rem 0 .35rem}.eyebrow{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0;font-size:.8rem}.hint{color:var(--muted);font-size:.9rem}.tabs{gap:.5rem;margin:1rem 0;display:flex}.tab{border:1px solid var(--line);color:var(--ink);cursor:pointer;background:#f4f8fd;border-radius:10px;padding:.65rem 1rem}.tab.active{background:var(--primary);color:#fff;border-color:var(--primary)}.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:1rem}.block{border:1px solid var(--line);background:#fbfdff;border-radius:12px;gap:.7rem;min-width:0;margin-top:.85rem;padding:.9rem;display:grid}label{gap:.3rem;width:100%;min-width:0;font-weight:600;display:grid}input,select,textarea,button{font:inherit}input,select,textarea{background:#fff;border:1px solid #bfccdc;border-radius:8px;width:100%;min-width:0;max-width:100%;padding:.55rem .65rem}input[type=file]{width:100%;min-width:0;max-width:100%}input[type=checkbox],input[type=radio]{width:auto;min-width:auto;max-width:none;padding:0}button{background:var(--primary);color:#fff;cursor:pointer;border:none;border-radius:9px;padding:.55rem .9rem}button:hover{background:var(--primary-dark)}.button-secondary{color:#1f2a38;background:#dceaf8}.button-danger{background:var(--danger)}.toolbar{flex-wrap:wrap;align-items:end;gap:.6rem;margin:.9rem 0;display:flex}.admin-topbar{margin-bottom:.9rem}.check-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.45rem;display:grid}.check-item{grid-template-columns:18px 1fr;align-items:center;column-gap:.4rem;margin:0;font-weight:500;display:grid}.check-item input[type=checkbox]{margin:0}.otp-panel{background:#fbfdff;border:1px solid #6d7480;border-radius:4px;gap:.75rem;margin-top:.85rem;padding:.85rem 1.1rem;display:grid}.otp-panel h3{color:#315bea;margin:0;font-size:.95rem}.otp-description,.otp-support{color:#555f6b;margin:0;font-size:.92rem;font-weight:600;line-height:1.45}.otp-options{flex-wrap:wrap;justify-content:center;gap:2.5rem;display:flex}.otp-option{color:#555f6b;align-items:center;gap:.35rem;width:auto;min-width:min(100%,14rem);max-width:100%;font-weight:400;display:flex}.otp-option span{overflow-wrap:anywhere}.otp-actions{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.otp-actions button{background:#345de8;border-radius:4px;min-width:4.6rem}.otp-actions button:hover{background:#2849c7}.role-permissions-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.6rem;display:grid}.role-permission-item{border:1px solid var(--line);background:#fff;border-radius:10px;align-items:flex-start;gap:.55rem;width:100%;min-width:0;margin:0;padding:.55rem .7rem;display:flex}.role-permission-item input[type=checkbox]{flex:none;margin:.15rem 0 0}.role-permission-label{overflow-wrap:anywhere;word-break:break-word;white-space:normal;width:100%;min-width:0;font-weight:500;display:block}.error{color:#b32323;font-weight:600}.list{margin:0;padding-left:1rem}.list li{overflow-wrap:anywhere;word-break:break-word}.badge{border:1px solid #0000;border-radius:999px;padding:.2rem .6rem;font-size:.8rem;display:inline-block}.badge-pending{color:var(--warn);background:#eff6ff;border-color:#bed5f0}.badge-approved{color:var(--ok);background:#e5f4ff;border-color:#9cc6ee}.badge-rejected{color:var(--danger);background:#fee9e9;border-color:#e7b2b2}.tableWrap{overflow-x:auto}.read-info-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem 1rem;display:grid}.read-info-grid p{margin:0}table{border-collapse:collapse;background:#fbfdff;border:1px solid #d5deea;border-radius:10px;width:100%;overflow:hidden}th,td{text-align:left;border-bottom:1px solid #e2eaf3;padding:.6rem}th+th,td+td{border-left:1px solid #edf2f8}tbody tr:hover{background:#f6faff}.sortable-th{cursor:pointer;-webkit-user-select:none;user-select:none}.empty-table-message{text-align:center}.site-footer{background:#d1d7df;border-top:1px solid #b9c1cb;padding:.85rem 1rem}.site-footer-inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem;max-width:1020px;margin:0 auto;display:flex}.footer-logo{object-fit:contain;width:auto;height:42px}.social-links{flex-wrap:wrap;align-items:center;gap:.45rem;display:flex}.social-link{text-decoration:none}.social-icon{color:#24496d;background:#e7eff9;border:1px solid #91a4ba;border-radius:999px;justify-content:center;align-items:center;width:34px;height:34px;font-size:1rem;display:inline-flex}.social-icon svg{width:16px;height:16px}.modal-overlay{z-index:1200;background:#13213073;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-card{border:1px solid var(--line);background:#fbfdff;border-radius:14px;gap:.75rem;width:min(560px,100%);max-height:calc(100vh - 2rem);padding:1rem;display:grid;overflow-y:auto;box-shadow:0 14px 32px #0f1c2b33}.modal-card h3,.modal-card p{margin:0}.modal-actions{justify-content:flex-end;margin:0}@media (width<=700px){.top-navbar-inner{padding:.5rem .8rem}.nav-logo{height:34px}.app{padding:.8rem}.tabs{flex-direction:column}.tab{width:100%}.check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.otp-options{justify-content:flex-start;gap:.7rem}.otp-option{width:100%}.otp-actions button{flex:1}.read-info-grid{grid-template-columns:1fr}.site-footer-inner{text-align:center;justify-content:center}.footer-logo{height:36px}.modal-actions{justify-content:stretch}.modal-actions button{flex:1}.modal-overlay{align-items:flex-start;padding:.75rem}.modal-card{width:100%;max-height:calc(100vh - 1.5rem)}}