:root{
--ce-blue:#0b3b8f;
--ce-blue2:#1559c5;
--ce-dark:#0f172a;
--ce-muted:#64748b;
--ce-border:#e2e8f0;
--ce-bg:#f4f7fb;
--ce-sidebar:270px;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:Inter,Arial,sans-serif;background:var(--ce-bg);color:var(--ce-dark)}
a{text-decoration:none;color:var(--ce-blue2)}
.portal-shell{min-height:100vh;display:flex}
.portal-sidebar{
position:fixed;top:0;bottom:0;left:0;z-index:50;
width:var(--ce-sidebar);display:flex;flex-direction:column;
color:#fff;background:linear-gradient(180deg,#082b68 0%,#0b3b8f 55%,#092d6b 100%);
box-shadow:8px 0 30px rgba(15,23,42,.08)
}
.portal-brand{
display:flex;align-items:center;gap:12px;min-height:82px;
padding:17px 20px;border-bottom:1px solid rgba(255,255,255,.12)
}
.portal-brand img{
width:46px;height:46px;object-fit:contain;padding:4px;
background:#fff;border-radius:12px
}
.portal-brand strong{display:block;color:#fff;font-size:17px}
.portal-brand span{
display:block;margin-top:3px;color:#bfdbfe;font-size:10px;
font-weight:800;letter-spacing:1px;text-transform:uppercase
}
.portal-nav{flex:1;overflow-y:auto;padding:14px 13px}
.nav-label{
padding:12px 12px 6px;color:#93c5fd;font-size:10px;
font-weight:900;letter-spacing:1.1px;text-transform:uppercase
}
.portal-nav a{
display:flex;align-items:center;gap:11px;margin:3px 0;
padding:10px 12px;border-radius:10px;color:#dbeafe;
font-size:13px;font-weight:700;transition:.18s ease
}
.portal-nav a:hover{background:rgba(255,255,255,.10);color:#fff}
.portal-nav a.active{
background:#fff;color:var(--ce-blue);
box-shadow:0 7px 17px rgba(0,0,0,.12)
}
.nav-icon{
width:25px;flex:0 0 25px;text-align:center;
font-size:16px;font-weight:800
}
.sidebar-logout{
margin-top:15px;padding-top:14px;
border-top:1px solid rgba(255,255,255,.12)
}
.logout-button{
width:100%;padding:11px;border:1px solid rgba(255,255,255,.18);
border-radius:10px;background:rgba(255,255,255,.08);
color:#fff;font-weight:800;cursor:pointer
}
.logout-button:hover{background:rgba(255,255,255,.15)}

.portal-main{
width:calc(100% - var(--ce-sidebar));
min-height:100vh;margin-left:var(--ce-sidebar)
}
.portal-topbar{
position:sticky;top:0;z-index:40;min-height:76px;
display:flex;align-items:center;justify-content:space-between;gap:18px;
padding:14px 28px;background:#fff;
border-bottom:1px solid var(--ce-border);
box-shadow:0 4px 18px rgba(15,23,42,.035)
}
.portal-topbar strong{display:block;font-size:20px;color:var(--ce-dark)}
.portal-topbar small{
display:block;margin-top:4px;color:var(--ce-muted);font-size:11px
}
.portal-user{
padding:9px 13px;border:1px solid var(--ce-border);
border-radius:11px;background:#f8fafc;
color:#475569;font-size:12px;font-weight:700
}
.portal-content{
width:100%;max-width:1500px;margin:0 auto;
padding:28px 30px 42px
}

.portal-content .panel,
.portal-content .card{
background:#fff;border:1px solid var(--ce-border);
border-radius:14px;box-shadow:0 5px 20px rgba(15,23,42,.04)
}
.portal-content h1,
.portal-content h2,
.portal-content h3{color:var(--ce-dark)}

.portal-content input,
.portal-content select,
.portal-content textarea{
width:100%;max-width:100%;border:1px solid #cbd5e1;
border-radius:9px;padding:11px 12px;background:#fff;
color:#0f172a;outline:none
}
.portal-content input:focus,
.portal-content select:focus,
.portal-content textarea:focus{
border-color:#2563eb;
box-shadow:0 0 0 3px rgba(37,99,235,.10)
}
.portal-content table{
width:100%;border-collapse:collapse;background:#fff
}
.portal-content th{
background:#f8fafc;color:#475569;font-size:12px;
text-align:left
}
.portal-content th,
.portal-content td{
padding:11px;border-bottom:1px solid var(--ce-border)
}
.portal-content .btn{
display:inline-flex;align-items:center;justify-content:center;
gap:7px;border-radius:9px;font-weight:700
}

@media(max-width:900px){
:root{--ce-sidebar:100%}
.portal-shell{display:block}
.portal-sidebar{
position:relative;width:100%;height:auto;bottom:auto;
box-shadow:none
}
.portal-brand{
min-height:68px;padding:11px 16px
}
.portal-brand img{width:40px;height:40px}
.portal-nav{
display:flex;align-items:center;gap:5px;
overflow-x:auto;padding:8px 10px 11px
}
.portal-nav::-webkit-scrollbar{height:3px}
.portal-nav .nav-label{display:none}
.portal-nav a{
flex:0 0 auto;margin:0;padding:9px 11px;
white-space:nowrap;font-size:12px
}
.portal-nav a .nav-icon{width:auto;flex:0 0 auto}
.sidebar-logout{
flex:0 0 auto;margin:0;padding:0;border:0
}
.sidebar-logout form{margin:0}
.logout-button{
width:auto;white-space:nowrap;padding:9px 12px
}
.portal-main{
width:100%;margin-left:0
}
.portal-topbar{
position:relative;min-height:66px;padding:11px 16px
}
.portal-topbar strong{font-size:17px}
.portal-topbar small{font-size:10px}
.portal-user{font-size:10px;padding:7px 9px}
.portal-content{padding:18px 14px 32px}
}

@media(max-width:560px){
.portal-topbar{
align-items:flex-start;flex-direction:column;gap:8px
}
.portal-user{width:100%}
.portal-content{padding:15px 10px 28px}
.portal-content table{
display:block;overflow-x:auto;white-space:nowrap
}
}

/* Compact two-column service table */
.service-icon-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px;
overflow:hidden;
background:#e2e8f0;
border:1px solid #e2e8f0;
border-radius:14px;
box-shadow:0 4px 18px rgba(15,23,42,.04)
}

.service-icon-card{
display:flex;
align-items:center;
gap:12px;
min-height:64px;
padding:13px 16px;
margin:0;
border:0;
border-radius:0;
background:#fff;
box-shadow:none;
color:#0f172a
}

.service-icon-card:hover{
transform:none;
background:#f8fbff;
border:0;
box-shadow:none
}

.service-card-icon{
width:34px;
height:34px;
flex:0 0 34px;
display:flex;
align-items:center;
justify-content:center;
background:transparent;
font-size:22px
}

.service-card-text strong{
font-size:14px;
font-weight:700
}

@media(max-width:560px){
.service-icon-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1px
}

.service-icon-card{
min-height:58px;
padding:10px 8px;
gap:7px
}

.service-card-icon{
width:27px;
height:27px;
flex-basis:27px;
font-size:18px
}

.service-card-text strong{
font-size:11px;
white-space:normal
}
}