:root{--bg:#f4f6f2;--surface:#fff;--surface-2:#f8faf7;--ink:#17211d;--muted:#6f7a74;--line:#e3e8e3;--green:#0f7a53;--green-dark:#075c3d;--green-soft:#e7f4ed;--lime:#9dc84b;--orange:#eaa04b;--red:#d9584f;--shadow:0 10px 30px rgba(20,45,33,.06)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"DM Sans",sans-serif;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}.app-shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:248px;padding:25px 18px;background:#10251d;color:#fff;display:flex;flex-direction:column;z-index:20}.brand{display:flex;align-items:center;gap:12px;padding:0 8px 25px;border-bottom:1px solid rgba(255,255,255,.1)}.brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#c6e878,#75af4a);display:grid;place-items:center;color:#10251d;font:800 20px Manrope}.brand-name{font:700 17px Manrope}.brand-sub{font-size:11px;color:#9eb0a8;margin-top:2px}.nav{display:grid;gap:6px;padding-top:24px}.nav-item{border:0;background:transparent;color:#aebdb7;padding:11px 12px;border-radius:9px;display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer}.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.09);color:#fff}.nav-icon{width:22px;text-align:center;font-size:17px}.sidebar-footer{margin-top:auto}.system-status{display:flex;gap:10px;align-items:flex-start;padding:14px 10px;background:rgba(255,255,255,.05);border-radius:10px}.status-dot{width:8px;height:8px;border-radius:50%;background:#7cda8f;margin-top:5px;box-shadow:0 0 0 4px rgba(124,218,143,.12)}.system-status strong,.system-status small{display:block}.system-status strong{font-size:12px}.system-status small{font-size:10px;color:#91a39b;margin-top:3px}
.main{margin-left:248px;padding:30px 34px 20px;max-width:1800px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}.eyebrow,.panel-kicker{margin:0 0 7px;color:var(--green);font-weight:700;font-size:10px;letter-spacing:.15em}h1,h2{font-family:Manrope,sans-serif;margin:0}h1{font-size:30px;letter-spacing:-.04em}h2{font-size:18px;letter-spacing:-.025em}.page-subtitle,.section-head p{color:var(--muted);margin:6px 0 0;font-size:13px}.topbar-actions{display:flex;align-items:end;gap:9px;flex-wrap:wrap}.date-control{display:grid;gap:5px;font-size:10px;color:var(--muted)}.date-control select,select,input{border:1px solid var(--line);background:#fff;border-radius:9px;padding:10px 12px;color:var(--ink);outline:none}.button{border-radius:9px;padding:10px 14px;border:1px solid var(--line);font-weight:600;font-size:12px;cursor:pointer}.button.primary{background:var(--green);color:#fff;border-color:var(--green)}.button.primary:hover{background:var(--green-dark)}.button.secondary{background:#fff;color:var(--ink)}.mobile-menu{display:none}
.company-selector{min-width:220px;display:grid;grid-template-columns:1fr auto;text-align:left;gap:2px 10px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 12px;cursor:pointer}.company-selector-label{grid-column:1;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.company-selector-value{grid-column:1;font-size:12px;font-weight:700;max-width:190px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.company-selector-chevron{grid-column:2;grid-row:1/3;align-self:center;color:var(--muted)}
.selection-summary{display:flex;justify-content:space-between;align-items:center;margin:22px 0 10px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:10px}.selection-left{display:flex;align-items:center;gap:10px;min-width:0}.scope-badge{border-radius:99px;padding:6px 9px;font-size:9px;font-weight:700;white-space:nowrap}.scope-badge.company{background:#e7f4ed;color:var(--green)}.scope-badge.platform{background:#edf0f7;color:#465a84}.selected-company-chips{display:flex;gap:6px;overflow:hidden}.selected-chip{background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:5px 8px;font-size:9px;white-space:nowrap}.selected-chip.more{color:var(--muted)}
.filter-summary{display:flex;justify-content:space-between;margin:0 0 14px;padding:11px 14px;background:#eaf1ec;border:1px solid #dce7df;border-radius:10px;font-size:12px}.filter-summary>div{display:flex;align-items:center;gap:8px}.filter-summary span{color:var(--muted)}.pulse{display:inline-block!important;width:7px;height:7px;border-radius:50%;background:var(--green)!important}.text-button,.icon-button{border:0;background:transparent;color:var(--green);font-weight:600;cursor:pointer;font-size:12px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:17px;box-shadow:var(--shadow);min-width:0}.kpi-top{display:flex;justify-content:space-between;gap:8px}.kpi-label{color:var(--muted);font-size:12px}.kpi-icon{width:31px;height:31px;border-radius:9px;background:var(--green-soft);color:var(--green);display:grid;place-items:center}.kpi-value{font:700 25px Manrope;margin:12px 0 7px}.change{font-size:11px;font-weight:600}.change.positive{color:var(--green)}.change.negative{color:var(--red)}.change.warning{color:#b87525}.change-note{font-size:10px;color:var(--muted);font-weight:400;margin-left:4px}
.chart-grid{display:grid;grid-template-columns:1.45fr .8fr .8fr;gap:13px;margin-top:13px}.panel{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;box-shadow:var(--shadow);min-width:0}.panel-wide{grid-column:span 2}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.panel-meta{font-size:10px;color:var(--muted)}.segmented{display:flex;background:var(--surface-2);padding:3px;border-radius:8px}.segmented button{border:0;background:transparent;padding:6px 9px;border-radius:6px;font-size:10px;color:var(--muted);cursor:pointer}.segmented button.active{background:#fff;color:var(--ink);box-shadow:0 1px 5px rgba(0,0,0,.07)}.chart-summary{display:flex;align-items:baseline;gap:10px;margin:20px 0 8px}.chart-summary strong{font:700 25px Manrope}.chart-summary span{color:var(--green);font-size:11px}.line-chart{height:190px;position:relative}.line-chart svg{width:100%;height:100%;overflow:visible}.grid-line{stroke:#edf0ed;stroke-width:1}.chart-line{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chart-area{fill:url(#areaGradient)}.chart-dot{fill:#fff;stroke:var(--green);stroke-width:2}.axis-label{font-size:9px;fill:#8a958f}
.donut-layout{display:flex;align-items:center;justify-content:center;gap:22px;min-height:228px}.donut{width:136px;height:136px;border-radius:50%;display:grid;place-items:center;position:relative}.donut:after{content:"";position:absolute;width:88px;height:88px;background:#fff;border-radius:50%}.donut>div{position:relative;z-index:1;text-align:center}.donut strong,.donut span{display:block}.donut strong{font:700 22px Manrope}.donut span{font-size:10px;color:var(--muted)}.legend{display:grid;gap:12px}.legend-row{display:grid;grid-template-columns:8px 1fr auto;gap:8px;align-items:center;font-size:11px}.legend-dot{width:7px;height:7px;border-radius:50%}.legend-row span{color:var(--muted)}.legend-row strong{font-size:11px}.bar-chart{height:160px;display:flex;align-items:end;gap:22px;padding:25px 20px 0;border-bottom:1px solid var(--line);margin-top:10px}.bar-column{flex:1;text-align:center;height:100%;display:flex;flex-direction:column;justify-content:end;gap:7px}.bar-column i{display:block;border-radius:7px 7px 0 0;background:linear-gradient(#6cac61,#0f7a53);min-height:12px}.bar-column span{font-size:10px;color:var(--muted)}.split-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.split-stats div{padding:10px;background:var(--surface-2);border-radius:8px}.split-stats span,.split-stats small,.split-stats strong{display:block}.split-stats span,.split-stats small{font-size:9px;color:var(--muted)}.split-stats strong{font:700 15px Manrope;margin:3px 0}.operation-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:17px}.operation-card{padding:13px;background:var(--surface-2);border-radius:10px}.operation-card span{display:block;font-size:10px;color:var(--muted)}.operation-card strong{display:block;font:700 18px Manrope;margin:6px 0}.operation-card small{font-size:9px;color:var(--green)}.live-badge{background:#e7f4ed;color:var(--green);border-radius:99px;padding:5px 8px;font-size:9px;font-weight:700}.live-badge:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:5px}.live-stat{padding:18px 0 13px}.live-stat strong,.live-stat span{display:block}.live-stat strong{font:700 28px Manrope}.live-stat span{font-size:11px;color:var(--muted)}.progress-row{margin-top:14px}.progress-row>div:first-child{display:flex;justify-content:space-between;font-size:10px}.progress{height:5px;background:#e9eee9;border-radius:10px;margin-top:6px;overflow:hidden}.progress i{display:block;height:100%;background:var(--green);border-radius:10px}.progress.danger i{background:var(--red)}
.metrics-section{margin-top:30px}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.table-actions{display:flex;gap:8px;align-items:center}.search-box{display:flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:9px;padding-left:10px}.search-box input{border:0;width:250px;padding-left:7px}.search-box.grow{flex:1}.search-box.grow input{width:100%}.category-chips{display:flex;gap:7px;overflow:auto;padding:14px 0 11px}.chip{white-space:nowrap;border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 10px;font-size:10px;color:var(--muted);cursor:pointer}.chip.active{background:var(--green);border-color:var(--green);color:#fff}.table-card{background:#fff;border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:var(--shadow)}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;min-width:920px}th{text-align:left;background:#f7f9f7;color:#7b8780;font-size:9px;text-transform:uppercase;letter-spacing:.08em;padding:12px 15px;border-bottom:1px solid var(--line)}td{padding:13px 15px;border-bottom:1px solid #edf0ed;font-size:11px;vertical-align:middle}tbody tr:hover{background:#fbfcfb}.metric-cell strong,.metric-cell span{display:block}.metric-cell strong{font-size:12px}.metric-cell span{color:var(--muted);margin-top:3px;max-width:410px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-tag{display:inline-block;padding:5px 7px;border-radius:6px;background:#edf4ef;color:#426151;font-size:9px;font-weight:600}.value-cell{font:700 13px Manrope}.row-button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:6px 9px;font-size:9px;cursor:pointer}.table-footer{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;font-size:10px;color:var(--muted)}.pagination{display:flex;align-items:center;gap:9px}.pagination button{border:1px solid var(--line);background:#fff;border-radius:6px;padding:6px 9px;font-size:9px;cursor:pointer}.pagination button:disabled{opacity:.4}footer{display:flex;justify-content:space-between;color:#8b958f;font-size:10px;padding:25px 2px}
dialog{border:0;border-radius:16px;width:min(600px,calc(100% - 28px));padding:25px;box-shadow:0 30px 90px rgba(0,0,0,.25)}dialog::backdrop{background:rgba(11,24,18,.55);backdrop-filter:blur(4px)}.dialog-close{position:absolute;right:18px;top:15px;border:0;background:#f1f4f1;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:18px}.dialog-intro{font-size:12px;line-height:1.55;color:var(--muted)}.dialog-value{display:flex;align-items:baseline;gap:12px;margin:22px 0}.dialog-value strong{font:800 33px Manrope}.dialog-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.dialog-grid>div{background:#f7f9f7;border-radius:10px;padding:13px}.dialog-grid span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.dialog-grid p{font-size:11px;line-height:1.55;margin:6px 0 0}.date-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.date-grid label{display:grid;gap:6px;font-size:11px;color:var(--muted)}.full{width:100%}
.company-dialog{width:min(720px,calc(100% - 28px))}.company-dialog-toolbar{display:flex;gap:8px;margin:18px 0 12px}.company-list{border:1px solid var(--line);border-radius:11px;max-height:400px;overflow:auto}.company-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer}.company-row:last-child{border-bottom:0}.company-row:hover{background:#f8faf7}.company-row.selected{background:#eef7f2}.company-check{width:18px;height:18px;border:1px solid #cdd7d0;border-radius:5px;display:grid;place-items:center;font-size:11px;color:#fff}.company-row.selected .company-check{background:var(--green);border-color:var(--green)}.company-info strong,.company-info span{display:block}.company-info strong{font-size:12px}.company-info span{font-size:10px;color:var(--muted);margin-top:3px}.company-meta{text-align:right}.company-meta strong,.company-meta span{display:block}.company-meta strong{font-size:11px}.company-meta span{font-size:9px;color:var(--muted);margin-top:3px}.company-dialog-footer{display:flex;justify-content:space-between;align-items:center;margin-top:14px}.company-dialog-footer>span{font-size:11px;color:var(--muted)}
@media(max-width:1250px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.chart-grid{grid-template-columns:1fr 1fr}.panel-wide{grid-column:span 2}.topbar{flex-direction:column}.topbar-actions{width:100%}.section-head{align-items:flex-start;flex-direction:column}.table-actions{width:100%}.search-box{flex:1}.search-box input{width:100%}}
@media(max-width:760px){.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}.main{margin-left:0;padding:20px 15px}.mobile-menu{display:block;border:0;background:#fff;border-radius:8px;padding:8px 10px;position:absolute;right:15px;top:18px}.topbar-actions{display:grid;grid-template-columns:1fr 1fr}.company-selector,.date-control{grid-column:span 2}.topbar-actions .primary{grid-column:span 2}.selection-summary{align-items:flex-start}.selection-left{align-items:flex-start;flex-direction:column}.selected-company-chips{max-width:230px}.filter-summary>div span:last-child{display:none}.kpi-grid,.chart-grid{grid-template-columns:1fr}.panel-wide{grid-column:span 1}.operation-grid{grid-template-columns:1fr 1fr}.table-actions{display:grid;grid-template-columns:1fr 1fr}.search-box{grid-column:span 2}.category-chips{margin-right:-15px}.dialog-grid{grid-template-columns:1fr}.company-dialog-toolbar{display:grid;grid-template-columns:1fr 1fr}.company-dialog-toolbar .grow{grid-column:span 2}.company-row{grid-template-columns:auto 1fr}.company-meta{display:none}footer{flex-direction:column;gap:6px}.segmented{display:none}}

/* =========================================================
   ROUND 1 — SCOPE, COMPANY AND DATE CONTROLS
   ========================================================= */

.dashboard-controls{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:9px;
  max-width:860px;
}

.control-group{
  display:grid;
  gap:5px;
}

.control-label{
  color:var(--muted);
  font-size:10px;
}

.scope-switch{
  display:flex;
  background:#edf1ed;
  border:1px solid var(--line);
  border-radius:9px;
  padding:3px;
}

.scope-switch button{
  border:0;
  background:transparent;
  color:var(--muted);
  border-radius:7px;
  padding:8px 11px;
  font-size:10px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}

.scope-switch button.active{
  background:#fff;
  color:var(--ink);
  box-shadow:0 2px 8px rgba(20,45,33,.08);
}

.scope-switch button:focus-visible,
.company-selector-button:focus-visible,
.button:focus-visible,
select:focus-visible,
input:focus-visible{
  outline:3px solid rgba(15,122,83,.16);
  outline-offset:2px;
}

.company-selector-wrap.disabled{
  opacity:.48;
  pointer-events:none;
}

.company-selector-popover{
  width:390px;
}

.company-selector-head{
  align-items:flex-start;
}

.company-selector-head > div{
  display:grid;
  gap:3px;
}

.company-selector-head small{
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
  max-width:245px;
}

.selected-company-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 10px;
}

.selected-company-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  padding:5px 8px;
  border-radius:999px;
  background:var(--green-soft);
  color:var(--green-dark);
  font-size:9px;
  font-weight:600;
}

.selected-company-chip span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.selected-company-chip button{
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  cursor:pointer;
  font-size:12px;
  line-height:1;
}

.period-summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:22px 0 14px;
  padding:12px 14px;
  background:#eaf1ec;
  border:1px solid #dce7df;
  border-radius:10px;
}

.period-summary-main{
  display:flex;
  align-items:center;
  gap:18px;
}

.period-block{
  display:grid;
  gap:3px;
}

.period-label{
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.period-block strong{
  font-size:12px;
}

.period-divider{
  color:var(--muted);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
}

.period-summary-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.data-note{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#7a6750;
  background:#fff7e8;
  border:1px solid #f0dfbe;
  border-radius:999px;
  padding:5px 8px;
  font-size:9px;
  font-weight:600;
}

.data-note::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:#d49a45;
}

.comparison-hidden{
  display:none !important;
}

.dialog-description{
  color:var(--muted);
  font-size:11px;
  line-height:1.55;
  margin:8px 0 0;
}

.date-validation-message{
  margin:-4px 0 14px;
  padding:10px 11px;
  border-radius:8px;
  background:#fff0ef;
  border:1px solid #f1cfcc;
  color:#a33c35;
  font-size:10px;
  line-height:1.45;
}

.kpi-comparison{
  display:block;
  margin-top:5px;
  color:var(--muted);
  font-size:9px;
  font-weight:400;
  line-height:1.35;
}

@media(max-width:1150px){
  .dashboard-controls{
    justify-content:flex-start;
    max-width:none;
  }

  .scope-control{
    order:1;
  }

  .company-selector-wrap{
    order:2;
  }
}

@media(max-width:760px){
  .dashboard-controls{
    width:100%;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .scope-control,
  .company-selector-wrap,
  .download-wrap{
    grid-column:span 2;
  }

  .scope-switch{
    width:100%;
  }

  .scope-switch button{
    flex:1;
  }

  .company-selector-button{
    width:100%;
  }

  .period-summary{
    align-items:flex-start;
    flex-direction:column;
  }

  .period-summary-main{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }

  .period-divider{
    display:none;
  }

  .period-summary-actions{
    width:100%;
    justify-content:space-between;
  }
}

/* Company modal list fix */
.company-row{
  width:100%;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
}

.company-row + .company-row{
  margin-top:8px;
}

.company-row:hover{
  background:var(--surface-2);
  border-color:#cad8cf;
}

.company-row.selected{
  background:var(--green-soft);
  border-color:#9bc8ae;
}

.company-check{
  width:27px;
  height:27px;
  display:grid;
  place-items:center;
  border:1px solid #cad5ce;
  border-radius:8px;
  background:#fff;
  color:var(--green);
  font-weight:800;
}

.company-row.selected .company-check{
  border-color:var(--green);
}

.company-info,
.company-meta{
  display:grid;
  gap:4px;
}

.company-info strong,
.company-meta strong{
  font-size:12px;
}

.company-info span,
.company-meta span{
  color:var(--muted);
  font-size:10px;
}

.company-meta{
  text-align:right;
}

#companyList{
  max-height:330px;
  overflow-y:auto;
  padding:2px;
  margin-top:12px;
}

@media(max-width:760px){
  .company-row{
    grid-template-columns:30px minmax(0,1fr);
  }

  .company-meta{
    grid-column:2;
    text-align:left;
  }
}


/* =========================================================
   ROUND 3 — DASHBOARD SCHEMA ENGINE
   ========================================================= */

.schema-kpi-card{
  position:relative;
  cursor:pointer;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.schema-kpi-card:hover{
  transform:translateY(-2px);
  border-color:#c8d7cd;
  box-shadow:0 14px 36px rgba(20,45,33,.10);
}

.schema-kpi-card:focus-visible{
  outline:3px solid rgba(15,122,83,.18);
  outline-offset:2px;
}

.schema-kpi-card .kpi-top > div{
  display:grid;
  gap:6px;
  min-width:0;
}

.metric-status{
  display:inline-flex;
  align-items:center;
  width:max-content;
  gap:5px;
  padding:4px 7px;
  border-radius:999px;
  font-size:8px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.metric-status::before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
}

.metric-status-live{
  background:#e6f4ec;
  color:#08744d;
}

.metric-status-calculated{
  background:#eef1ff;
  color:#5362a8;
}

.metric-status-delayed{
  background:#fff5e3;
  color:#ae762d;
}

.metric-status-incomplete{
  background:#fff0ef;
  color:#b34c45;
}

.metric-status-not-tracked{
  background:#f0f2f0;
  color:#78827d;
}

.kpi-schema-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:8px;
}

.kpi-schema-meta span{
  min-width:0;
  overflow:hidden;
  color:#8a958f;
  font-family:monospace;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.kpi-schema-meta strong{
  flex:none;
  color:var(--green);
  font-size:9px;
}



/* =========================================================
   ROUND 3B — DATA STATES
   ========================================================= */

.analytics-state-region{
  margin:14px 0;
}

.analytics-state-region[hidden]{
  display:none;
}

.analytics-state-message{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:14px 15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow);
}

.analytics-state-icon{
  flex:none;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#eef2ef;
  color:var(--muted);
  font-weight:800;
}

.analytics-state-copy{
  flex:1;
  min-width:0;
}

.analytics-state-copy strong{
  display:block;
  font-size:12px;
}

.analytics-state-copy p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
}

.analytics-state-copy small{
  display:block;
  margin-top:7px;
  color:#89938d;
  font-size:9px;
}

.analytics-state-warnings{
  margin:8px 0 0;
  padding-left:17px;
  color:#8c6329;
  font-size:10px;
  line-height:1.5;
}

.analytics-state-loading .analytics-state-message{
  background:#f7faf8;
}

.analytics-state-loading .analytics-state-icon{
  background:var(--green-soft);
  color:var(--green);
}

.analytics-state-partial .analytics-state-message{
  border-color:#ead9b9;
  background:#fff9ee;
}

.analytics-state-partial .analytics-state-icon{
  background:#f7e9cb;
  color:#a76e20;
}

.analytics-state-error .analytics-state-message{
  border-color:#efcac7;
  background:#fff5f4;
}

.analytics-state-error .analytics-state-icon{
  background:#f8dcda;
  color:#b44841;
}

.analytics-state-empty .analytics-state-message{
  background:#f8faf8;
}


.skeleton{
  position:relative;
  overflow:hidden;
  background:#e9eeea !important;
  color:transparent !important;
  border-color:transparent !important;
}

.skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.72),
    transparent
  );
  animation:skeleton-loading 1.35s infinite;
}

@keyframes skeleton-loading{
  100%{
    transform:translateX(100%);
  }
}

.skeleton-kpi-card{
  min-height:165px;
}

.skeleton-line{
  height:11px;
  border-radius:6px;
  margin-bottom:10px;
}

.skeleton-line.short{
  width:42%;
}

.skeleton-line.medium{
  width:68%;
}

.skeleton-value{
  width:55%;
  height:29px;
  margin:20px 0 15px;
  border-radius:8px;
}

.loading-chart-placeholder{
  height:210px;
  border-radius:10px;
}

.loading-table-row td{
  padding:15px;
}

.no-data-card{
  grid-column:1/-1;
  display:grid;
  place-items:center;
  min-height:220px;
  padding:30px;
  border:1px dashed #ccd6cf;
  border-radius:13px;
  background:#f9fbf9;
  text-align:center;
}

.no-data-card strong{
  font-size:15px;
}

.no-data-card span{
  max-width:430px;
  margin-top:6px;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}

.data-disabled{
  opacity:.42;
  pointer-events:none;
  user-select:none;
}

@media(max-width:760px){
  .analytics-state-message{
    flex-wrap:wrap;
  }

  .analytics-state-message .button{
    width:100%;
  }

}


/* =========================================================
   ROUND 4A — METRIC DRILLDOWNS
   ========================================================= */

.metric-drilldown-dialog{
  width:min(920px, calc(100% - 28px));
  max-height:90vh;
  overflow-y:auto;
}

.metric-drilldown-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding-right:38px;
}

.metric-drilldown-eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
}

.metric-drilldown-eyebrow .panel-kicker{
  margin:0;
}

.metric-drilldown-scope{
  margin:7px 0 0;
  color:var(--muted);
  font-size:11px;
}

.metric-drilldown-summary{
  display:grid;
  grid-template-columns:1.25fr 1fr 1fr;
  gap:11px;
  margin:22px 0 14px;
}

.metric-current-value,
.metric-comparison-card{
  min-width:0;
  padding:15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface-2);
}

.metric-current-value{
  background:var(--green-soft);
  border-color:#c9dfd2;
}

.metric-current-value span,
.metric-comparison-card span{
  display:block;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.metric-current-value strong,
.metric-comparison-card strong{
  display:block;
  margin:7px 0 4px;
  font:800 24px Manrope;
}

.metric-current-value small,
.metric-comparison-card small{
  display:block;
  overflow:hidden;
  color:var(--muted);
  font-size:9px;
  line-height:1.45;
  text-overflow:ellipsis;
}

.metric-drilldown-section{
  margin-top:12px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
}

.metric-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}

.metric-section-head h3{
  margin:0;
  font:700 14px Manrope;
}

.metric-section-head > span{
  color:var(--muted);
  font-size:9px;
}

.metric-trend-chart{
  width:100%;
  min-height:220px;
}

.metric-trend-chart svg{
  display:block;
  width:100%;
  height:220px;
  overflow:visible;
}

.metric-breakdown-list{
  display:grid;
  gap:8px;
}

.metric-breakdown-row{
  display:grid;
  grid-template-columns:minmax(130px, 1fr) 2fr auto;
  align-items:center;
  gap:12px;
  padding:10px 11px;
  border-radius:9px;
  background:var(--surface-2);
}

.metric-breakdown-row strong{
  overflow:hidden;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.metric-breakdown-bar{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#e3e9e4;
}

.metric-breakdown-bar i{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--green);
}

.metric-breakdown-row span{
  color:var(--muted);
  font-size:10px;
  text-align:right;
}

.metric-contract-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.metric-contract-grid > div{
  min-width:0;
  padding:11px;
  border-radius:9px;
  background:var(--surface-2);
}

.metric-contract-grid span{
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:.07em;
}

.metric-contract-grid code{
  display:block;
  overflow:hidden;
  color:#345345;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.metric-definition-grid{
  margin-top:12px;
}

@media(max-width:760px){
  .metric-drilldown-header{
    flex-direction:column;
  }

  .metric-drilldown-header .button{
    width:100%;
  }

  .metric-drilldown-summary{
    grid-template-columns:1fr;
  }

  .metric-contract-grid{
    grid-template-columns:1fr;
  }

  .metric-breakdown-row{
    grid-template-columns:1fr auto;
  }

  .metric-breakdown-bar{
    grid-column:1/-1;
    grid-row:2;
  }
}


/* =========================================================
   ROUND 4B — SCHEMA DRIVEN CHARTS
   ========================================================= */

[data-chart-id]{
  position:relative;
}

[data-chart-id]::after{
  content:attr(data-api-field);
  position:absolute;
  right:5px;
  bottom:3px;
  max-width:65%;
  overflow:hidden;
  color:#98a19c;
  font-family:monospace;
  font-size:7px;
  line-height:1;
  opacity:.72;
  pointer-events:none;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#journeyDonut[data-chart-id]::after{
  display:none;
}

.chart-schema-ready{
  border-color:#cbd9d0;
}



/* =========================================================
   ROUND 5 — ADVANCED FILTERS
   ========================================================= */

.advanced-filter-toolbar{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  margin:14px 0 10px;
}

.filter-toggle-button{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.filter-count{
  min-width:19px;
  height:19px;
  display:grid;
  place-items:center;
  padding:0 5px;
  border-radius:999px;
  background:#e2e9e4;
  color:#496255;
  font-size:9px;
  font-weight:800;
}

.filter-toggle-button.has-filters{
  border-color:#98bea8;
  background:var(--green-soft);
  color:var(--green);
}

.filter-toggle-button.has-filters .filter-count{
  background:var(--green);
  color:#fff;
}

.active-filter-chips{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  flex:1;
}

.active-filter-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:220px;
  padding:6px 8px;
  border:1px solid #cfdbd3;
  border-radius:999px;
  background:#f5f8f6;
  color:#40574b;
  font-size:9px;
}

.active-filter-chip span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.active-filter-chip button{
  width:16px;
  height:16px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:#dfe7e2;
  color:#52645a;
  cursor:pointer;
  font-size:11px;
  line-height:1;
}

.advanced-filters-panel{
  margin-bottom:13px;
  padding:15px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#f8faf8;
}

.advanced-filters-panel[hidden]{
  display:none;
}

.advanced-filter-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:11px;
}

.advanced-filter-field{
  display:grid;
  gap:6px;
}

.advanced-filter-field > span{
  color:#596960;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.055em;
}

.advanced-filter-field select{
  width:100%;
  min-width:0;
  padding:9px 10px;
  border:1px solid #d5ded8;
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-size:10px;
}

.advanced-filter-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:14px;
  padding-top:13px;
  border-top:1px solid var(--line);
}

.advanced-filter-footer > div:first-child{
  display:grid;
  gap:3px;
}

.advanced-filter-footer strong{
  font-size:10px;
}

.advanced-filter-footer span{
  color:var(--muted);
  font-size:9px;
}

.advanced-filter-actions{
  display:flex;
  gap:8px;
  flex:none;
}

@media(max-width:1050px){
  .advanced-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:650px){
  .advanced-filter-grid{
    grid-template-columns:1fr;
  }

  .advanced-filter-footer{
    align-items:stretch;
    flex-direction:column;
  }

  .advanced-filter-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .advanced-filter-actions .button{
    width:100%;
  }

  .active-filter-chips{
    flex-basis:100%;
    order:3;
  }
}

/* ==========================================================================
   AUTHENTICATION & LOGIN OVERLAY
   ========================================================================== */

[hidden],
[hidden] * {
  display: none !important;
}

.app-shell.auth-hidden {
  display: none !important;
}

.login-page-body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: radial-gradient(circle at top, #143e30 0%, #071711 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  color: var(--text-primary);
}

.login-overlay-static {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top, #143e30 0%, #071711 100%);
  padding: 24px;
  overflow-y: auto;
}

.login-overlay[hidden] {
  display: none !important;
}

.login-error[hidden] {
  display: none !important;
}

.login-spinner[hidden] {
  display: none !important;
}

.login-container {
  width: 100%;
  max-width: 440px;
  margin: auto;
}

.login-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  padding: 36px 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.login-brand .brand-mark {
  width: 38px;
  height: 38px;
  background: var(--lime);
  color: #0c261d;
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 800;
  border-radius: 10px;
  display: grid;
  place-items: center;
}

.login-brand .brand-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: #0d271e;
  letter-spacing: -0.02em;
}

.login-brand .brand-sub {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.login-header {
  margin-bottom: 22px;
}

.login-header h2 {
  font-family: 'Manrope', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0d271e;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.login-header p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  line-height: 1.45;
}

.quick-accounts-section {
  margin-bottom: 20px;
  padding: 14px;
  background: #f4f7f5;
  border-radius: 12px;
  border: 1px solid #e2ebe5;
}

.quick-accounts-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #0f7a53;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}

.quick-accounts-grid {
  display: grid;
  gap: 8px;
}

.quick-account-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #d9e4dd;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
  font-family: inherit;
  width: 100%;
}

.quick-account-btn:hover {
  border-color: #0f7a53;
  background: #f9fbf9;
  transform: translateY(-1px);
}

.quick-account-btn.active {
  border-color: #0f7a53;
  background: #eef7f2;
  box-shadow: 0 0 0 2px rgba(15, 122, 83, 0.15);
}

.quick-account-avatar {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #0f7a53;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.quick-account-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.quick-account-info strong {
  font-size: 12px;
  color: #111e19;
  font-weight: 600;
}

.quick-account-info small {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.login-error {
  background: #fdf2f2;
  border: 1px solid #f8b4b4;
  color: #9b1c1c;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 18px;
  line-height: 1.4;
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-field {
  display: grid;
  gap: 6px;
}

.login-field label {
  font-size: 12px;
  font-weight: 600;
  color: #1a3028;
}

.login-field-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle-password-btn {
  background: none;
  border: none;
  color: #0f7a53;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.toggle-password-btn:hover {
  text-decoration: underline;
}

.login-field input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #d4dfd8;
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  color: #10241c;
  background: #ffffff;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.login-field input:focus {
  outline: none;
  border-color: #0f7a53;
  box-shadow: 0 0 0 3px rgba(15, 122, 83, 0.15);
}

.login-submit-btn {
  width: 100%;
  height: 44px;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 10px;
  background: #0f7a53;
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s ease;
}

.login-submit-btn:hover:not(:disabled) {
  background: #0c6746;
}

.login-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.login-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.login-footer {
  margin-top: 20px;
  text-align: center;
}

/* ==========================================================================
   OTP VERIFICATION SCREEN (STEP 2)
   ========================================================================== */

.otp-shield-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #e7f4ed;
  color: #0f7a53;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.otp-target-email {
  color: #0f7a53;
  word-break: break-all;
}

.otp-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #f0f7f3;
  border: 1px solid #d2e8dc;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 12px;
  color: #174231;
  line-height: 1.45;
}

.otp-notice-code {
  font-family: 'Manrope', monospace;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: #ffffff;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid #badccb;
  color: #0c5c3e;
}

.otp-inputs {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 18px 0 20px;
}

.otp-digit {
  width: 48px;
  height: 56px;
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #0d271e;
  border: 1.5px solid #dce5e0;
  border-radius: 12px;
  background: #fafcfa;
  transition: all 0.15s ease;
  caret-color: #0f7a53;
  padding: 0;
}

.otp-digit:focus {
  outline: none;
  border-color: #0f7a53;
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(15, 122, 83, 0.14);
}

.otp-digit.filled {
  border-color: #0f7a53;
  background: #ffffff;
}

.otp-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
  text-align: center;
}

.resend-otp-btn {
  background: transparent;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: #0f7a53;
  cursor: pointer;
  padding: 6px;
}

.resend-otp-btn:disabled {
  color: var(--muted);
  cursor: not-allowed;
}

.back-to-login-btn {
  background: transparent;
  border: none;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
  transition: color 0.15s ease;
}

.back-to-login-btn:hover {
  color: #0d271e;
  text-decoration: underline;
}

.security-badge {
  font-size: 11px;
  color: #5c7569;
  font-weight: 500;
}

/* ==========================================================================
   404 NOT FOUND PAGE
   ========================================================================== */

.notfound-container {
  width: 100%;
  max-width: 480px;
  margin: auto;
}

.notfound-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  padding: 36px 32px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.notfound-hero {
  text-align: center;
  padding: 8px 0 18px;
}

.notfound-number {
  font-family: 'Manrope', sans-serif;
  font-size: 72px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #0f7a53 0%, #10251d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 10px;
}

.notfound-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e7f4ed;
  color: var(--green);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 99px;
  margin-bottom: 12px;
}

.notfound-badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.notfound-title {
  font-family: 'Manrope', sans-serif;
  font-size: 21px;
  font-weight: 800;
  color: #0d271e;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.notfound-desc {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.notfound-quicklinks-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 20px 0 10px;
}

.notfound-quicklinks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 22px;
}

.notfound-link-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: all 0.15s ease;
}

.notfound-link-card:hover {
  background: #eaf4ee;
  border-color: #b7ded0;
  color: var(--green);
  transform: translateY(-1px);
}

.notfound-link-icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: rgba(15, 122, 83, 0.1);
  color: var(--green);
  display: grid;
  place-items: center;
  font-size: 12px;
}

.notfound-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.notfound-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  border-radius: 10px;
  padding: 12px 18px;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.15s ease;
}

.notfound-btn.primary {
  background: var(--green);
  color: #ffffff;
  border: 1px solid var(--green);
}

.notfound-btn.primary:hover {
  background: var(--green-dark);
}

.notfound-btn.secondary {
  background: #ffffff;
  color: var(--ink);
  border: 1px solid var(--line);
}

.notfound-btn.secondary:hover {
  background: var(--surface-2);
}

.notfound-footer-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid #edf0ed;
  font-size: 11px;
  color: var(--muted);
}

/* ==========================================================================
   USER PROFILE IN SIDEBAR
   ========================================================================== */

.user-profile-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  margin-bottom: 12px;
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--lime);
  color: #0c261d;
  font-weight: 800;
  font-size: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.user-info strong {
  font-size: 11px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}

.user-info small {
  font-size: 9px;
  color: #8fa99c;
}

.sign-out-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #a4c4b5;
  border-radius: 7px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  padding: 0;
}

.sign-out-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}