.surface-control-panel {
  --sc-accent: #4edbb2;
  --sc-line: rgba(146, 181, 193, .22);
  display: grid;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--sc-line);
  border-radius: 11px;
  color: #dcebef;
  background: rgba(5, 15, 20, .78);
  font: 11px/1.35 Inter, system-ui, sans-serif;
}
.surface-control-header { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.surface-control-header > div { display: grid; gap: 2px; }
.surface-control-header strong { color: #eefaf7; font-size: 12px; }
.surface-control-header span { color: #8fa8b1; font-size: 9px; }
.surface-control-header output { padding: 4px 7px; border-radius: 7px; color: #bff9e8; background: rgba(78,219,178,.13); font-weight: 800; }
.surface-control-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 5px; }
.surface-control-toolbar label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 4px; color: #9eb3bc; font-size: 8px; }
.surface-control-toolbar label > select { grid-column: 1 / -1; }
.surface-control-toolbar input,
.surface-control-toolbar select { min-height: 29px; max-width: 84px; padding: 4px 6px; border: 1px solid var(--sc-line); border-radius: 7px; color: #ecf7f8; background: #111d23; font: inherit; }
.surface-control-toolbar button { position: relative; display: inline-flex; align-items: center; gap: 4px; min-height: 31px; padding: 5px 7px; border: 1px solid var(--sc-line); border-radius: 8px; color: #dcf2ec; background: rgba(255,255,255,.045); font: inherit; font-weight: 750; cursor: pointer; }
.surface-control-toolbar button:hover:not(:disabled) { border-color: var(--sc-accent); background: rgba(78,219,178,.12); }
.surface-control-toolbar button:disabled { opacity: .38; cursor: not-allowed; }
.surface-control-toolbar button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.surface-control-toolbar button::after { position: absolute; z-index: 20; right: 0; bottom: calc(100% + 6px); display: none; width: max-content; max-width: 190px; padding: 5px 7px; border: 1px solid var(--sc-line); border-radius: 6px; content: attr(data-tooltip); color: #eaf8f5; background: #0b151a; font-size: 9px; box-shadow: 0 5px 15px #0008; }
.surface-control-toolbar button:hover::after,
.surface-control-toolbar button:focus-visible::after { display: block; }
.surface-control-notice { margin: 0; padding: 6px 8px; border-left: 3px solid #dca244; color: #d9c79e; background: rgba(220,162,68,.08); font-size: 9px; }
.surface-control-primary { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 8px; border: 1px solid rgba(78,219,178,.38); border-radius: 8px; background: rgba(78,219,178,.09); }
.surface-control-primary small { color: #8fb4aa; font-size: 8px; }
.surface-control-primary strong { color: #bff9e8; font-size: 12px; font-variant-numeric: tabular-nums; }
.surface-control-role-summaries { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.surface-control-role-summaries > div { display: grid; grid-template-columns: auto 1fr; gap: 2px 7px; padding: 6px 7px; border: 1px solid var(--sc-line); border-radius: 7px; background: rgba(255,255,255,.025); }
.surface-control-role-summaries strong { grid-row: 1 / span 3; align-self: center; color: #e9f7f4; font-size: 10px; }
.surface-control-role-summaries span { overflow: hidden; color: #93aab3; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.surface-control-summary { display: grid; grid-template-columns: repeat(6, minmax(48px, 1fr)); gap: 4px; }
.surface-control-summary > span { min-width: 0; padding: 5px 6px; border: 1px solid var(--sc-line); border-radius: 7px; background: rgba(255,255,255,.025); }
.surface-control-summary small { display: block; overflow: hidden; color: #8198a2; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.surface-control-summary strong { display: block; overflow: hidden; color: #eefafa; font-size: 11px; text-overflow: ellipsis; }
.surface-control-summary .accepted strong { color: #7aebc9; }
.surface-control-summary .warning strong { color: #f3c665; }
.surface-control-summary .rejected strong { color: #ff8d8d; }
.surface-control-table-shell { max-height: 220px; overflow: auto; border: 1px solid var(--sc-line); border-radius: 8px; scrollbar-width: thin; }
.surface-control-table-shell table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; white-space: nowrap; }
.surface-control-table-shell th,
.surface-control-table-shell td { padding: 4px 5px; border-bottom: 1px solid rgba(146,181,193,.12); text-align: right; font-size: 8px; }
.surface-control-table-shell th { position: sticky; top: 0; z-index: 1; color: #a9c1ca; background: #111d23; }
.surface-control-table-shell th:first-child,
.surface-control-table-shell td:first-child,
.surface-control-table-shell th:last-child,
.surface-control-table-shell td:last-child { text-align: left; }
.surface-control-status { display: inline-block; padding: 2px 5px; border-radius: 8px; font-size: 7px; font-weight: 800; }
.surface-control-status.acceptat { color: #84eccd; background: rgba(78,219,178,.12); }
.surface-control-status.avertizare { color: #f3c665; background: rgba(220,162,68,.12); }
.surface-control-status.respins { color: #ff9c9c; background: rgba(255,96,96,.12); }
.surface-control-status.fara_cota,
.surface-control-status.neevaluat { color: #9fb1b8; background: rgba(146,181,193,.10); }
.surface-control-empty { padding: 18px !important; color: #7f959e; text-align: center !important; }
.surface-control-message { min-height: 14px; margin: 0; color: #8ea5ae; font-size: 9px; }
.surface-control-message[data-kind="success"] { color: #83e7c7; }
.surface-control-message[data-kind="error"] { color: #ff9b9b; }
@media (max-width: 720px) {
  .surface-control-summary { grid-template-columns: repeat(3, minmax(48px, 1fr)); }
  .surface-control-button-label { display: none; }
}