:root{
  --app-bg:#f6f8fb;
  --app-surface:#ffffff;
  --app-surface-muted:#f9fbfc;
  --app-border:#e4ebf0;
  --app-text:#12202a;
  --app-muted:#667784;
  --app-primary:#0f6e56;
  --app-primary-dark:#0b5c48;
  --app-success:#157347;
  --app-warning:#b7791f;
  --app-danger:#c0392b;
  --app-info:#2563eb;
  --app-shadow:0 10px 30px rgba(15,23,42,.06);
  --app-radius:18px;
}
body.crm-body, body.portal-body{background:var(--app-bg); color:var(--app-text);}
.app-shell{min-height:100vh; display:grid; grid-template-columns:280px minmax(0,1fr);}
.app-sidebar{background:linear-gradient(180deg,#0b1f19 0%,#102923 100%); color:#fff; padding:24px 18px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:18px;}
.app-brand{display:flex; align-items:center; gap:12px; padding:6px 8px 14px; border-bottom:1px solid rgba(255,255,255,.08);}
.app-brand-mark{width:42px;height:42px;border-radius:14px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-weight:700;}
.app-brand h1{font-size:17px;margin:0;color:#fff;}
.app-brand p{margin:2px 0 0;color:rgba(255,255,255,.62);font-size:12px;}
.app-menu{display:flex;flex-direction:column;gap:6px; overflow:auto; padding-right:6px;}
.app-menu-section{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.42);padding:14px 10px 4px;}
.app-nav-link{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;color:rgba(255,255,255,.8);text-decoration:none;font-size:14px;}
.app-nav-link:hover,.app-nav-link.active{background:rgba(255,255,255,.09); color:#fff;}
.app-sidebar-user{margin-top:auto; border-top:1px solid rgba(255,255,255,.08); padding-top:16px;}
.app-sidebar-user .name{font-weight:600;color:#fff;}
.app-sidebar-user .meta{font-size:12px;color:rgba(255,255,255,.6);}
.app-main{padding:24px;}
.app-topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px;}
.app-page-title{margin:0;font-size:30px;line-height:1.1;}
.app-page-subtitle{margin:6px 0 0;color:var(--app-muted);font-size:14px;}
.app-breadcrumb{font-size:12px;color:var(--app-muted);margin-bottom:6px;}
.app-topbar-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end;}
.app-date-pill,.app-profile-pill{background:var(--app-surface);border:1px solid var(--app-border);border-radius:999px;padding:10px 14px;font-size:13px;color:var(--app-muted);box-shadow:0 1px 2px rgba(15,23,42,.03);}
.app-grid{display:grid;gap:18px;}
.app-grid-2{grid-template-columns:2fr 1fr;}
.app-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.app-grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.app-grid-5{grid-template-columns:repeat(5,minmax(0,1fr));}
.app-card{background:var(--app-surface);border:1px solid var(--app-border);border-radius:var(--app-radius);box-shadow:var(--app-shadow);padding:20px;}
.app-card-muted{background:var(--app-surface-muted);}
.app-card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;}
.app-card-title{margin:0;font-size:17px;}
.app-card-desc{font-size:13px;color:var(--app-muted);}
.app-kpi{display:flex;flex-direction:column;gap:10px;}
.app-kpi-top{display:flex;justify-content:space-between;align-items:center;gap:10px;}
.app-kpi-label{font-size:13px;color:var(--app-muted);}
.app-kpi-value{font-size:34px;font-weight:800;line-height:1;color:var(--app-text);}
.app-kpi-meta{font-size:12px;color:var(--app-muted);}
.app-icon{width:42px;height:42px;border-radius:14px;background:#eef7f4;color:var(--app-primary);display:flex;align-items:center;justify-content:center;font-weight:700;}
.app-actions{display:flex;gap:10px;flex-wrap:wrap;}
.app-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 14px;border-radius:12px;border:1px solid var(--app-border);background:var(--app-surface);color:var(--app-text);text-decoration:none;font-size:14px;font-weight:600;}
.app-btn:hover{border-color:#cfd8df;}
.app-btn-primary{background:var(--app-primary);border-color:var(--app-primary);color:#fff;}
.app-btn-primary:hover{background:var(--app-primary-dark);}
.app-btn-ghost{background:transparent;}
.app-btn-sm{padding:8px 12px;font-size:13px;border-radius:10px;}
.app-list{display:grid;gap:10px;}
.app-list-item{padding:14px 16px;border:1px solid var(--app-border);border-radius:14px;background:var(--app-surface-muted);}
.app-list-item strong{display:block;margin-bottom:4px;}
.app-list-meta{font-size:13px;color:var(--app-muted);}
.app-table-wrap{overflow:auto;border:1px solid var(--app-border);border-radius:16px;background:var(--app-surface);}
.app-table{width:100%;border-collapse:collapse;}
.app-table th,.app-table td{padding:14px 14px;border-bottom:1px solid var(--app-border);text-align:left;vertical-align:top;}
.app-table th{font-size:12px;color:var(--app-muted);text-transform:uppercase;letter-spacing:.06em;}
.app-table tr:last-child td{border-bottom:0;}
.app-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;}
.app-badge-green{background:#edf8f2;color:var(--app-success);}
.app-badge-orange{background:#fff6e8;color:var(--app-warning);}
.app-badge-red{background:#fdeeee;color:var(--app-danger);}
.app-badge-blue{background:#edf4ff;color:var(--app-info);}
.app-badge-gray{background:#f1f5f9;color:#475569;}
.app-split-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;}
.app-meta-box{padding:14px;border:1px solid var(--app-border);border-radius:14px;background:var(--app-surface-muted);}
.app-meta-box .label{display:block;color:var(--app-muted);font-size:12px;margin-bottom:6px;}
.app-timeline{display:grid;gap:14px;}
.app-timeline-item{padding-left:18px;border-left:3px solid #dfe9ee;}
.app-timeline-item strong{display:block;margin-bottom:4px;}
.app-empty{padding:24px;border:1px dashed #cfd9df;border-radius:16px;color:var(--app-muted);text-align:center;background:var(--app-surface-muted);}
.portal-welcome{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;}
.portal-welcome h2{margin:0 0 8px;font-size:28px;}
.portal-cta-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.portal-shortcut{padding:16px;border:1px solid var(--app-border);border-radius:16px;background:var(--app-surface);text-decoration:none;color:var(--app-text);}
.portal-shortcut strong{display:block;margin-bottom:4px;}
.portal-shortcut span{font-size:13px;color:var(--app-muted);}
@media (max-width: 1200px){
  .app-grid-5{grid-template-columns:repeat(3,minmax(0,1fr));}
  .portal-cta-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 1024px){
  .app-shell{grid-template-columns:1fr;}
  .app-sidebar{position:relative;height:auto;}
  .app-grid-2,.app-grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 700px){
  .app-main{padding:18px;}
  .app-topbar{flex-direction:column;}
  .app-topbar-right{justify-content:flex-start;}
  .app-grid-2,.app-grid-3,.app-grid-4,.app-grid-5,.portal-cta-grid,.app-split-meta{grid-template-columns:1fr;}
  .app-page-title{font-size:24px;}
}