.reference-screen { display:grid; gap:12px; }
.screen-actions { margin-top:0; }
.reference-dashboard > .screen-actions { display:none; }
.reference-dashboard > .metric-grid { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:10px; }
.metric-card {
  min-height:118px;
  padding:18px 20px;
  border-radius:9px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dashboard-metric {
  width:100%;
  grid-template-columns:minmax(0, 1fr) 54px;
  gap:14px;
  min-height:112px;
  padding:16px 18px;
  border:1px solid rgba(248,189,36,.18);
  text-align:left;
  color:inherit;
  background:
    linear-gradient(90deg, rgba(248,189,36,.12), transparent 4px),
    radial-gradient(circle at 91% 21%, rgba(248,189,36,.16), transparent 29%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012)),
    rgba(7,7,7,.92);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 14px 36px rgba(0,0,0,.28);
}
.dashboard-metric:hover {
  transform:translateY(-2px);
  border-color:rgba(248,189,36,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 38px rgba(0,0,0,.34), 0 0 28px rgba(248,189,36,.14);
}
.dashboard-metric .metric-copy {
  min-width:0;
}
.dashboard-metric span {
  display:block;
  margin-bottom:9px;
  color:#b1aaa1;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
}
.dashboard-metric strong {
  margin:0 0 10px;
  color:#f8f2e8;
  font-size:28px;
  font-weight:800;
}
.dashboard-metric small {
  display:block;
  overflow:visible;
  color:#c8c0b5;
  font-size:13px;
  line-height:1.3;
  white-space:normal;
}
.metric-card:hover,
.panel:hover,
.table-card:hover,
.flow-card:hover { border-color:rgba(248,189,36,.46); box-shadow:var(--shadow), 0 0 24px rgba(248,189,36,.1), inset 0 1px 0 rgba(255,255,255,.06); }
.metric-card strong { font-size:30px; letter-spacing:0; }
.dashboard-metric strong { font-size:28px; }
.metric-icon {
  width:54px;
  height:54px;
  border-radius:14px;
  box-shadow:inset 0 0 22px rgba(248,189,36,.16), 0 0 20px rgba(248,189,36,.08);
}
.panel,
.table-card,
.side-card,
.settings-card,
.kanban-column {
  border-radius:9px;
  border-color:rgba(248,189,36,.18);
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012)), rgba(8,8,8,.82);
}
.dashboard-grid { grid-template-columns:minmax(0, 1.35fr) minmax(440px, .85fr); }
.reference-dashboard .chart {
  min-height:238px;
  height:238px;
  margin-top:2px;
  border-radius:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent),
    radial-gradient(circle at 55% 16%, rgba(248,189,36,.08), transparent 34%);
}
.reference-dashboard .panel {
  padding:18px 20px;
}
.reference-dashboard .panel-header {
  min-height:30px;
  margin-bottom:12px;
}
.reference-dashboard .panel-header h2 {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:17px;
  font-weight:800;
}
.info-dot {
  width:16px;
  height:16px;
  display:inline-grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.24);
  border-radius:50%;
  color:#bdb6ad;
  font-size:11px;
  font-weight:700;
}
.select-like {
  min-height:34px;
  padding:6px 12px;
  border-color:rgba(255,255,255,.12);
  color:#d8d1c7;
  background:rgba(255,255,255,.025);
}
.reference-dashboard .table-card th,
.reference-dashboard .table-card td {
  height:42px;
  padding:7px 12px;
}
.reference-dashboard > .table-card > .panel-header {
  min-height:52px;
  margin:0;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.chart-legend { display:flex; gap:24px; color:#d9d2c7; margin-bottom:8px; font-size:12px; flex-wrap:wrap; }
.chart-legend i { display:inline-block; width:10px; height:10px; margin-right:8px; border-radius:50%; background:var(--gold); }
.chart-legend .silver { background:#b9b6b0; }
.chart-legend .dash { width:16px; height:2px; border-radius:0; vertical-align:middle; background:#d8950b; }
.donut-layout { grid-template-columns:260px 1fr; }
.donut {
  width:220px;
  height:220px;
  margin:auto;
  background:conic-gradient(var(--donut-gradient, var(--green) 0 25%, var(--blue) 25% 50%, var(--gold) 50% 78%, var(--orange) 78% 91%, var(--red) 91% 100%));
  box-shadow:0 0 34px rgba(248,189,36,.12), inset 0 0 0 1px rgba(255,255,255,.08);
}
.donut.donut-segments-0 { background:#756f66; }
.donut.donut-segments-1 { background:conic-gradient(var(--green) 0 100%); }
.donut.donut-segments-2 { background:conic-gradient(var(--green) 0 50%, var(--blue) 50% 100%); }
.donut.donut-segments-3 { background:conic-gradient(var(--green) 0 34%, var(--blue) 34% 67%, var(--gold) 67% 100%); }
.donut.donut-segments-4 { background:conic-gradient(var(--green) 0 25%, var(--blue) 25% 50%, var(--gold) 50% 75%, var(--orange) 75% 100%); }
.donut.donut-segments-5 { background:conic-gradient(var(--green) 0 20%, var(--blue) 20% 40%, var(--gold) 40% 60%, var(--orange) 60% 80%, var(--red) 80% 100%); }
.donut.donut-segments-6 { background:conic-gradient(var(--green) 0 17%, var(--blue) 17% 34%, var(--gold) 34% 51%, var(--orange) 51% 68%, var(--red) 68% 85%, #b7b0a6 85% 100%); }
.donut:after {
  inset:56px;
  background:radial-gradient(circle, #0a0a0a 0 56%, #070707 57% 100%);
  border-color:rgba(255,255,255,.08);
}
.donut strong { font-size:30px; }
.donut small { position:relative; z-index:1; display:block; max-width:82px; margin-top:2px; font-size:12px; line-height:1.12; color:#bdb5a9; text-align:center; }
.reference-dashboard .legend {
  gap:0;
  align-self:stretch;
  align-content:center;
  border:1px solid rgba(255,255,255,.06);
  border-radius:8px;
  background:rgba(255,255,255,.018);
}
.reference-dashboard .legend-row {
  min-height:38px;
  padding:8px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:#cfc7bc;
}
.reference-dashboard .legend-row:last-child { border-bottom:0; }
.reference-dashboard .legend-row strong {
  color:#e8dfd3;
  font-weight:700;
}
.panel-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  color:#a79f95;
  font-size:13px;
}
.panel-footer .link-button {
  color:var(--gold);
}
.dashboard-table .profile-name {
  min-width:210px;
}
.dashboard-table .profile-logo,
.dashboard-table .brand-dot {
  width:34px;
  height:34px;
}
.dashboard-table .user-chip {
  margin-right:8px;
}
.dashboard-table td:nth-child(3) {
  color:#e9dfcf;
  font-weight:700;
}
th, td { height:54px; }
.reference-table th,
.reference-table td,
.reference-profiles table th,
.reference-profiles table td { font-size:13px; }
.reference-screen .subtext {
  border:0;
  border-radius:0;
  background:transparent;
  padding:0;
}
.reference-profiles table {
  table-layout:auto;
  min-width:1126px;
}
.reference-profiles th,
.reference-profiles td {
  overflow:visible;
  text-overflow:clip;
}