:root {
  --brand-primary: #0878ed;
  --brand-secondary: #18b66a;
  --brand-sidebar: #072a5c;
  --brand-bg: #f3f8fd;
  --brand-card: #fff;
  --brand-dark: #12223d;
  --brand-green: #18b66a;
  --brand-red: #e45151;
  --brand-border: #dfeaf5;
  --panel-radius: 12px;
  --panel-shadow: 0 12px 35px rgba(23, 65, 111, .08);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--brand-bg); color: var(--brand-dark); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.58; }
a { color: var(--brand-primary); }
.panel-app { display: flex; min-height: 100vh; background: radial-gradient(circle at 76% 0, color-mix(in srgb, var(--brand-primary) 8%, transparent), transparent 32%), var(--brand-bg); }
.panel-sidebar { width: 238px; min-height: 100vh; flex: 0 0 238px; padding: 25px 18px; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--brand-sidebar) 92%, black), var(--brand-sidebar)); box-shadow: 9px 0 28px rgba(5,35,73,.12); position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 20; }
.panel-brand { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 0 7px 28px; }
.panel-brand picture { display: flex; }
.panel-logo { width: 42px; height: 42px; border-radius: 10px; object-fit: contain; background: rgba(255,255,255,.08); }
.panel-brand-copy { display: grid; min-width: 0; line-height: 1.1; }
.panel-brand-copy strong { font-size: 18px; overflow: hidden; text-overflow: ellipsis; }
.panel-brand-copy span { opacity: .68; font-size: 12px; margin-top: 5px; }
.panel-navigation { display: grid; gap: 5px; }
.panel-nav-link { color: rgba(255,255,255,.78); display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 12px 13px; border-radius: 10px; text-decoration: none; font-size: 16px; font-weight: 650; transition: background .18s, color .18s, transform .18s, box-shadow .18s; }
.panel-nav-link:hover { color: #fff; background: rgba(255,255,255,.09); transform: translateX(2px); }
.panel-nav-link.active { color: #fff; background: var(--brand-primary); box-shadow: 0 7px 17px color-mix(in srgb, var(--brand-primary) 35%, transparent); }
.panel-nav-icon { width: 18px; height: 18px; flex: 0 0 18px; }
.panel-nav-label { margin: 20px 13px 7px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.4); }
.panel-content { min-width: 0; }
.panel-topbar { height: 74px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid color-mix(in srgb, var(--brand-border) 78%, transparent); background: color-mix(in srgb, var(--brand-bg) 87%, transparent); backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 15; }
.panel-home-mark { display: flex; color: var(--brand-primary); padding: 8px; border-radius: 9px; }
.panel-home-mark .panel-nav-icon { width: 19px; height: 19px; }
.panel-account { display: flex; align-items: center; gap: 9px; color: var(--brand-dark); }
.panel-account > span:nth-child(2) { display: grid; line-height: 1.15; }
.panel-account strong { font-size: 13px; }
.panel-account small { color: #7b8da4; font-size: 10px; text-transform: capitalize; }
.panel-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--brand-sidebar); background: color-mix(in srgb, var(--brand-primary) 12%, white); }
.panel-avatar .panel-nav-icon { width: 16px; height: 16px; }
.panel-account form { margin: 0; }
.panel-account button { border: 0; background: transparent; color: #7b8da4; padding: 6px; font-size: 12px; }
.panel-account button:hover { color: var(--brand-primary); }
.panel-main { max-width: 1400px; padding: 38px clamp(20px,4vw,58px) 50px; animation: panel-enter .32s ease-out both; }
.panel-welcome { margin-bottom: 25px; }
.panel-welcome h1 { font-size: clamp(30px,3.2vw,42px); font-weight: 780; letter-spacing: -.04em; margin-bottom: 5px; }
.panel-welcome p { color: #71849b; margin: 0; }
.panel-card { background: var(--brand-card); border: 1px solid color-mix(in srgb, var(--brand-border) 86%, white); border-radius: var(--panel-radius); box-shadow: var(--panel-shadow); }
.panel-metric { min-height: 136px; }
.service-card { min-height: 116px; padding: 20px; display: flex; gap: 15px; align-items: flex-start; transition: transform .18s, box-shadow .18s; }
.service-card:hover { transform: translateY(-2px); box-shadow: 0 15px 38px rgba(23,65,111,.12); }
.service-icon { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border-radius: 50%; color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 11%, white); }
.service-icon .panel-nav-icon { width: 21px; height: 21px; }
.service-icon.success { color: var(--brand-green); background: color-mix(in srgb, var(--brand-green) 12%, white); }
.service-copy strong { display: block; font-size: 18px; margin: 1px 0 4px; }
.service-copy span { font-size: 13px; color: var(--brand-green); }
.service-copy small { display: block; color: #8393a7; margin-top: 3px; }
.panel-section-title { font-size: 13px; color: #788ba2; text-transform: uppercase; letter-spacing: .09em; font-weight: 750; margin: 32px 0 13px; }
.panel-btn-primary { --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); --bs-btn-hover-bg: color-mix(in srgb,var(--brand-primary) 88%,black); --bs-btn-hover-border-color: color-mix(in srgb,var(--brand-primary) 88%,black); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; border-radius: 9px; font-weight: 650; box-shadow: 0 8px 18px color-mix(in srgb,var(--brand-primary) 22%,transparent); }
.panel-btn-outline { color: var(--brand-primary); border: 1px solid color-mix(in srgb,var(--brand-primary) 55%,white); background: transparent; border-radius: 9px; font-weight: 650; }
.panel-btn-outline:hover { background: color-mix(in srgb,var(--brand-primary) 8%,white); color: var(--brand-primary); }
.panel-icon { display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;color:#fff; }
.panel-icon.primary { background:var(--brand-primary); }.panel-icon.purple{background:var(--brand-secondary)}.panel-icon.green{background:var(--brand-green)}.panel-icon.red{background:var(--brand-red)}
.status-dot { width:8px;height:8px;border-radius:50%;display:inline-block }.status-dot.primary{background:var(--brand-primary)}.status-dot.purple{background:var(--brand-secondary)}.status-dot.green{background:var(--brand-green)}.status-dot.red{background:var(--brand-red)}
.table { --bs-table-bg: transparent; font-size: .94rem; }.table thead th { color:#71839a;font-size:12px;text-transform:uppercase;letter-spacing:.055em;border-bottom-color:var(--brand-border); }.form-control,.form-select { min-height:46px;border-color:var(--brand-border);border-radius:10px;font-size:1rem; }.form-control:focus,.form-select:focus { border-color:var(--brand-primary);box-shadow:0 0 0 .2rem color-mix(in srgb,var(--brand-primary) 14%,transparent); }
@keyframes panel-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.login-page { background: linear-gradient(90deg,color-mix(in srgb,var(--brand-bg) 95%,transparent),color-mix(in srgb,var(--brand-bg) 75%,transparent)),url("../img/login-bg.jpg") center/cover no-repeat;min-height:100vh }.login-box{max-width:430px}.login-box .panel-card{border-radius:18px;box-shadow:0 25px 70px rgba(13,49,91,.16)}
@media(max-width:767.98px){.panel-app{display:block!important}.panel-sidebar{position:relative;width:100%;height:auto;min-height:auto;padding:14px 16px}.panel-brand{margin:0 5px 13px}.panel-navigation{display:flex;overflow-x:auto;padding-bottom:4px}.panel-nav-link{white-space:nowrap}.panel-nav-label{display:none}.panel-topbar{top:0;height:62px;padding:0 18px}.panel-main{padding:24px 16px 38px}.panel-brand-copy span{display:none}}
@media(max-width:575.98px){.panel-account small{display:none}.panel-account strong{max-width:105px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.service-card{min-height:105px}.panel-welcome h1{font-size:27px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
.branding-preview { position: sticky; top: 98px; }
.branding-preview-frame { display:grid;grid-template-columns:34% 66%;min-height:260px;overflow:hidden;border-radius:12px;background:var(--preview-bg);box-shadow:0 15px 35px rgba(9,36,75,.12);color:var(--preview-text) }
.branding-preview-nav { display:flex;flex-direction:column;gap:11px;padding:18px 12px;background:var(--preview-sidebar);color:#fff;font-size:11px }.branding-preview-nav .panel-logo{width:32px;height:32px}.branding-preview-nav span{height:9px;border-radius:5px;background:rgba(255,255,255,.16)}.branding-preview-nav span:first-of-type{background:var(--preview-primary)}
.branding-preview-body{padding:25px 15px;display:flex;flex-direction:column;gap:6px}.branding-preview-body>b{font-size:20px}.branding-preview-body>small{color:#8190a3}.branding-preview-body>div{display:flex;gap:8px;margin:13px 0}.branding-preview-body i{width:50%;height:58px;border-radius:8px;background:var(--preview-surface);box-shadow:0 5px 15px rgba(0,0,0,.06)}.branding-preview-body button{border:0;border-radius:7px;background:var(--preview-primary);color:#fff;padding:8px;font-weight:700;font-size:11px}.branding-preview-logo{width:38px;height:38px;object-fit:contain;border-radius:9px;background:rgba(255,255,255,.1)}