:root{
--navy:#071b38;--navy2:#113d70;--gold:#d8a53a;--gold2:#f0cb72;--green:#0e7651;
--bg:#f3f6fa;--card:#fff;--text:#314157;--muted:#718096;--line:#dce4ed;--danger:#b42318;
--success:#087443;--warning:#8a650e;--sidebar:286px;--shadow:0 12px 32px rgba(7,27,56,.08)
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:var(--bg);font-family:Inter,Arial,sans-serif;line-height:1.55}
a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.system-shell{min-height:100vh;display:flex}
.system-sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:18px 13px;color:#fff;background:linear-gradient(180deg,var(--navy),#041127);overflow-y:auto;z-index:1000}
.system-brand{display:grid;gap:5px;padding:9px 11px 17px;border-bottom:1px solid rgba(255,255,255,.1)}.system-brand img{width:72px;height:72px;object-fit:contain;padding:5px;border-radius:15px;background:#fff}
.system-brand strong{font-size:1rem}.system-brand span{color:var(--gold2);font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.system-user{margin:15px 7px;padding:11px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.07);display:grid}.system-user strong{font-size:.87rem}.system-user span{color:#aebdd0;font-size:.72rem}
.system-nav{display:grid;gap:3px}.nav-heading{padding:15px 10px 5px;color:#8296ad;font-size:.65rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.system-nav a{padding:9px 11px;border-radius:9px;color:#d0dbea;font-size:.82rem;font-weight:700}
.system-nav a:hover{background:rgba(255,255,255,.08);color:#fff}.system-nav a.active{background:#fff;color:var(--navy)}.logout-link{display:block;margin:16px 7px 4px;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:10px;text-align:center;color:#fff;font-weight:800;font-size:.82rem}
.system-main{width:calc(100% - var(--sidebar));margin-left:var(--sidebar);min-width:0}.system-topbar{position:sticky;top:0;z-index:700;min-height:82px;padding:17px 25px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.system-topbar h1{margin:0;color:var(--navy);font-size:1.42rem}.system-topbar p{margin:3px 0 0;color:var(--muted);font-size:.82rem}.topbar-actions{display:flex;gap:8px;flex-wrap:wrap}.system-content{padding:24px}.menu-button{display:none;margin-bottom:7px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--navy);font-weight:800}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border:1px solid transparent;border-radius:999px;background:linear-gradient(135deg,var(--gold),var(--gold2));color:var(--navy);font-size:.82rem;font-weight:900;cursor:pointer}.button.secondary{background:#fff;border-color:var(--line)}.button.danger{background:#fff1f1;border-color:#ffcaca;color:var(--danger)}.button.small{min-height:32px;padding:5px 10px;font-size:.74rem}
.alert{padding:12px 14px;margin-bottom:16px;border:1px solid var(--line);border-radius:12px;font-weight:700}.alert.success{background:#ecfdf3;border-color:#a9dfc2;color:var(--success)}.alert.error{background:#fff1f1;border-color:#ffcaca;color:var(--danger)}.alert.warning{background:#fff8e7;border-color:#ead6a6;color:var(--warning)}.alert.info{background:#eef6ff;border-color:#bad7f7;color:#175d9c}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:20px}.stat{padding:18px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}.stat strong{display:block;color:var(--navy);font-size:1.8rem;line-height:1}.stat span{display:block;margin-top:7px;color:var(--muted);font-size:.78rem;font-weight:800}.stat small{color:var(--success)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.panel{padding:19px;border:1px solid var(--line);border-radius:17px;background:#fff;box-shadow:var(--shadow)}.panel-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:15px}.panel-head h2{margin:0;color:var(--navy);font-size:1.04rem}.panel-head p{margin:3px 0 0;color:var(--muted);font-size:.78rem}
.table-wrap{overflow:auto}.data-table{width:100%;min-width:760px;border-collapse:collapse}.data-table th,.data-table td{padding:11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-size:.8rem}.data-table th{color:var(--muted);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase}.data-table td strong{color:var(--navy)}.data-table small{display:block;color:var(--muted)}.table-actions{display:flex;gap:6px;flex-wrap:wrap}.empty{padding:26px!important;text-align:center!important;color:var(--muted)}
.badge{display:inline-flex;padding:4px 8px;border-radius:999px;background:#eef2f6;color:var(--navy);font-size:.68rem;font-weight:900;text-transform:capitalize}.badge.new,.badge.open,.badge.scheduled,.badge.issued{background:#eef6ff;color:#175d9c}.badge.active,.badge.complete,.badge.completed,.badge.paid,.badge.approved,.badge.published,.badge.confirmed,.badge.enrolled{background:#eaf8f0;color:var(--success)}.badge.urgent,.badge.rejected,.badge.refused,.badge.overdue,.badge.failed{background:#fff0f0;color:var(--danger)}.badge.draft,.badge.pending,.badge.documents_pending,.badge.under_review,.badge.waiting{background:#fff7e5;color:var(--warning)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px;flex-wrap:wrap}.search-form{display:flex;gap:8px;flex:1;min-width:260px}.search-form input{flex:1}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{color:var(--navy);font-size:.8rem;font-weight:850}.field input,.field select,.field textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fcfdff;color:var(--text);outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 4px rgba(216,165,58,.11)}.field textarea{min-height:110px;resize:vertical}.field small{color:var(--muted);font-size:.72rem}.check-field{display:flex;align-items:center;gap:8px}.check-field input{width:auto}.form-actions{grid-column:1/-1;display:flex;gap:9px;flex-wrap:wrap;padding-top:5px}
.pagination{display:flex;justify-content:center;gap:6px;margin-top:17px}.pagination a{display:grid;place-items:center;min-width:34px;height:34px;padding:0 8px;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--navy);font-size:.75rem;font-weight:800}.pagination a.active{background:var(--navy);color:#fff}
.system-overlay{position:fixed;inset:0;z-index:900;background:rgba(7,27,56,.45);opacity:0;pointer-events:none}.system-overlay.active{opacity:1;pointer-events:auto}
.login-body{
min-height:100vh;padding:24px;display:grid;place-items:center;
background:
radial-gradient(circle at 12% 8%,rgba(216,165,58,.12),transparent 28%),
linear-gradient(145deg,#f3f6fa,#fff)
}
.login-card{
width:min(840px,100%);display:grid;grid-template-columns:290px minmax(0,1fr);
overflow:hidden;border:1px solid #d8e1eb;border-radius:18px;background:#fff;
box-shadow:0 18px 48px rgba(7,27,56,.12)
}
.auth-card-login{width:min(790px,100%);grid-template-columns:275px minmax(0,1fr)}
.auth-card-register{width:min(930px,100%);grid-template-columns:275px minmax(0,1fr)}
.auth-card-message{width:min(760px,100%);grid-template-columns:265px minmax(0,1fr)}
.login-brand{
min-height:440px;padding:28px;display:flex;flex-direction:column;justify-content:center;
color:#fff;background:
linear-gradient(155deg,rgba(7,27,56,.98),rgba(17,61,112,.96))
}
.auth-card-register .login-brand{min-height:500px}
.auth-card-message .login-brand{min-height:390px}
.login-brand img{
width:76px;height:76px;object-fit:contain;padding:6px;border-radius:14px;
background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.12)
}
.login-brand h1{
margin:16px 0 8px;font-size:1.65rem;line-height:1.16;letter-spacing:-.025em
}
.login-brand p{
margin:0;color:rgba(255,255,255,.78);font-size:.88rem;line-height:1.62
}
.login-form{
padding:30px 32px;display:flex;flex-direction:column;justify-content:center
}
.auth-card-register .login-form{padding:25px 30px}
.auth-card-message .login-form{padding:28px 30px}
.login-form h2{
margin:0;color:var(--navy);font-size:1.42rem;line-height:1.2;letter-spacing:-.018em
}
.login-form>p{
margin:7px 0 0;color:var(--muted);font-size:.82rem;line-height:1.55
}
.login-form form{display:grid;gap:11px;margin-top:15px}
.auth-card-register .login-form form{margin-top:13px}
.auth-card-register .form-grid{gap:10px 12px}
.login-form .field{gap:5px}
.login-form .field label{font-size:.76rem}
.login-form .field input,
.login-form .field select{
min-height:41px;padding:9px 11px;border-radius:9px;font-size:.84rem
}
.login-form .button{
min-height:39px;padding:8px 14px;border-radius:9px;font-size:.8rem
}
.auth-card-register .form-actions{padding-top:2px}
.auth-card-register .form-actions .button{min-width:190px}
.login-form .alert{
padding:10px 12px;margin:12px 0 0;border-radius:10px;font-size:.79rem
}
.login-links{
display:flex;gap:7px 14px;flex-wrap:wrap;margin-top:14px;padding-top:13px;
border-top:1px solid #e7edf3
}
.login-links a{
padding:2px 0;border:0;border-radius:0;color:var(--navy);font-size:.72rem;
font-weight:800;line-height:1.35
}
.login-links a:hover{text-decoration:underline;text-underline-offset:3px}

.portal-body{background:#f5f7fb}.portal-topbar{position:sticky;top:0;z-index:600;background:#fff;border-bottom:1px solid var(--line)}.portal-container{width:min(1180px,calc(100% - 32px));margin:auto}.portal-nav{min-height:75px;display:flex;align-items:center;justify-content:space-between;gap:16px}.portal-brand{display:flex;align-items:center;gap:11px}.portal-brand img{width:52px;height:52px;object-fit:contain}.portal-brand div{display:grid}.portal-brand strong{color:var(--navy)}.portal-brand span{color:var(--muted);font-size:.72rem}.portal-links{display:flex;align-items:center;gap:4px}.portal-links a{padding:8px 9px;border-radius:8px;color:var(--navy);font-size:.78rem;font-weight:750}.portal-links a.active,.portal-links a:hover{background:#eef3f8}.portal-menu-button{display:none}.portal-main{padding:26px 0 45px}.portal-heading{margin-bottom:18px}.portal-heading h1{margin:0;color:var(--navy);font-size:1.55rem}.portal-heading p{margin:4px 0;color:var(--muted)}
.timeline{display:grid;gap:10px}.timeline-item{position:relative;padding:12px 14px 12px 34px;border:1px solid var(--line);border-radius:12px;background:#fff}.timeline-item:before{content:"";position:absolute;left:14px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--gold)}.progress{height:8px;border-radius:999px;background:#e8edf3;overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--green))}
@media(max-width:1100px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.system-sidebar{transform:translateX(-104%);transition:.2s}.system-sidebar.open{transform:translateX(0)}.system-main{width:100%;margin-left:0}.menu-button{display:inline-flex}.grid-2,.grid-3{grid-template-columns:1fr}.portal-menu-button{display:inline-flex;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:#fff}.portal-links{display:none;position:absolute;top:70px;left:16px;right:16px;padding:10px;flex-direction:column;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.portal-links.open{display:flex}}
@media(max-width:760px){
.login-body{padding:14px;place-items:start center}
.login-card,
.auth-card-login,
.auth-card-register,
.auth-card-message{
width:min(560px,100%);grid-template-columns:1fr;border-radius:16px;
box-shadow:0 14px 36px rgba(7,27,56,.11)
}
.login-brand,
.auth-card-register .login-brand,
.auth-card-message .login-brand{
min-height:auto;padding:20px 22px;display:grid;
grid-template-columns:62px minmax(0,1fr);grid-template-rows:auto auto;
column-gap:15px;align-items:center
}
.login-brand img{
width:62px;height:62px;grid-row:1/3;border-radius:12px
}
.login-brand h1{
margin:0 0 4px;font-size:1.25rem;line-height:1.18
}
.login-brand p{
margin:0;font-size:.78rem;line-height:1.48
}
.login-form,
.auth-card-register .login-form,
.auth-card-message .login-form{
padding:22px
}
.login-form h2{font-size:1.28rem}
.login-form>p{font-size:.78rem}
.login-links{margin-top:13px}
}
@media(max-width:680px){
.system-content{padding:15px}.system-topbar{padding:13px 15px;display:block}
.topbar-actions{margin-top:10px}.stats{grid-template-columns:1fr}
.form-grid{grid-template-columns:1fr}.field.full,.form-actions{grid-column:auto}
.toolbar{align-items:stretch}.search-form{min-width:100%}
.search-form .button{flex:0 0 auto}
.auth-card-register .form-grid{gap:10px}
.auth-card-register .form-actions .button{width:100%;min-width:0}
}
@media(max-width:420px){
.login-body{padding:9px}
.login-brand,
.auth-card-register .login-brand,
.auth-card-message .login-brand{
padding:17px;grid-template-columns:54px minmax(0,1fr);column-gap:12px
}
.login-brand img{width:54px;height:54px}
.login-brand h1{font-size:1.12rem}
.login-brand p{font-size:.73rem}
.login-form,
.auth-card-register .login-form,
.auth-card-message .login-form{
padding:18px 17px
}
.login-form .field input,
.login-form .field select{min-height:40px}
}

.editor-toolbar{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:#f5f8fb}.editor-toolbar button{padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--navy);font-size:.72rem;font-weight:800;cursor:pointer}.editor-toolbar+textarea{border-radius:0 0 10px 10px}