:root {
  --sidebar-width: 222px;
  --bg: #090d14;
  --bg-soft: #0d1420;
  --surface-1: #101926;
  --surface-2: #141f30;
  --surface-3: #1a273a;
  --border: #1f2f43;
  --border-strong: #2a3f5a;
  --text: #e4ebf7;
  --muted: #8fa4c4;
  --muted-soft: #7f93b2;
  --primary: #6f97ff;
  --danger: #d58a97;
  --warn: #ddb66f;
  --success: #81c99f;
}

body.app-shell { background: var(--bg); color: var(--text); }
.app-layout { min-height: 100vh; font-size: .855rem; }
.app-main { min-width: 0; }
.content { min-height: calc(100vh - 50px); max-width: 1760px; margin: 0 auto; padding: .85rem !important; }
.content > * + * { margin-top: .62rem; }

.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: #0b121c;
  border-right: 1px solid #213044;
  position: sticky;
  top: 0;
  padding: .6rem !important;
}
.sidebar .brand {
  color: #f2f6ff;
  text-decoration: none;
  font-size: .86rem;
  font-weight: 650;
  letter-spacing: .015em;
  padding: .28rem .42rem;
}
.sidebar .sidebar-section {
  text-transform: uppercase;
  font-size: .6rem;
  color: #7f93b4;
  letter-spacing: .1em;
  padding: 0 .42rem;
}
.sidebar .sidebar-section-muted { color: #7084a4; }
.sidebar .nav-link {
  color: #b0c1de;
  border-radius: .38rem;
  padding: .34rem .5rem;
  border: 1px solid transparent;
  line-height: 1.26;
  font-size: .81rem;
}
.sidebar .nav-link:hover,
.sidebar .nav-link:focus { color: #f3f7ff; background: #172435; border-color: #2a3d57; }
.sidebar .nav-link.active { background: #1f324a; color: #fff; border-color: #355374; font-weight: 600; }
.sidebar .sidebar-nav-aux .nav-link { font-size: .78rem; color: #97aac9; }
.sidebar .sidebar-divider { border-color: #223247; opacity: 1; margin-block: .65rem !important; }
.sidebar .nav-link-danger { color: #dca8b2 !important; }
.sidebar .nav-link-danger:hover,
.sidebar .nav-link-danger:focus { color: #ffdce3 !important; background: #3a1d25; border-color: #653645; }

.topbar {
  height: 50px;
  padding: .38rem .8rem !important;
  background: #0d1521;
  border-color: var(--border) !important;
}
.topbar-title { font-size: .84rem; font-weight: 620; line-height: 1.2; }
.topbar-subtitle { font-size: .7rem; color: var(--muted); line-height: 1.2; }

.page-header {
  border-bottom: 1px solid #1b2a3d;
  padding-bottom: .5rem;
  margin-bottom: .65rem !important;
}
.page-kicker {
  margin: 0 0 .15rem;
  color: #8ea2c1;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.page-subtle { color: #93a6c6; font-size: .77rem; margin: .12rem 0 0; max-width: 88ch; }
.page-header h1,
.page-header .h3 { font-size: 1.06rem; margin: 0; font-weight: 630; letter-spacing: .01em; }
.page-header .text-secondary { color: #8194b3 !important; }

.surface,
.card,
.panel-card,
.filter-panel,
.table-shell,
.workflow-card,
.auth-card,
.modal-content {
  background: var(--surface-1);
  border: 1px solid #1d2b3d;
  border-radius: .45rem;
  box-shadow: none;
}
.card-body,
.filter-panel,
.action-toolbar { padding: .62rem .72rem; }

.console-stack { display: grid; gap: .58rem; }
.compact-page-grid { display: grid; gap: .58rem; }
.compact-page-grid.cols-main { grid-template-columns: minmax(0, 1.7fr) minmax(290px, 1fr); }
.compact-page-grid.cols-wider { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
@media (max-width: 1200px) {
  .compact-page-grid.cols-main,
  .compact-page-grid.cols-wider { grid-template-columns: 1fr; }
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .4rem;
}
.summary-item {
  grid-column: span 3;
  border: 1px solid #172536;
  border-radius: .36rem;
  padding: .28rem .4rem;
  background: #0c1521;
  min-height: 52px;
}
.summary-item .label { color: #7489aa; font-size: .57rem; letter-spacing: .09em; text-transform: uppercase; }
.summary-item .value { font-size: .94rem; font-weight: 620; line-height: 1.2; margin-top: .06rem; color: #e5eefb; }
.summary-item .meta { color: #7f94b3; font-size: .69rem; margin-top: .09rem; }
.summary-item.span-2 { grid-column: span 2; }
.summary-item.span-4 { grid-column: span 4; }
.summary-item.span-6 { grid-column: span 6; }
.summary-item.is-link { color: inherit; text-decoration: none; }
.summary-item.is-link:hover { border-color: #2b415e; background: #0f1a29; }
@media (max-width: 1200px) { .summary-item, .summary-item.span-2, .summary-item.span-4, .summary-item.span-6 { grid-column: span 4; } }
@media (max-width: 760px) { .summary-item, .summary-item.span-2, .summary-item.span-4, .summary-item.span-6 { grid-column: span 6; } }

.section-block { border: 1px solid #182638; border-radius: .45rem; background: #0d1622; }
.section-body { padding: .62rem .72rem; }
.section-block.section-quiet { background: #0c141f; }
.section-block.section-flat { border-color: #172334; box-shadow: none; }
.section-block.section-danger { border-color: #6f3643; }
.section-block.section-warning { border-color: #6b5526; }
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .4rem;
  margin-bottom: .48rem;
}
.section-header h2,
.section-header .h6,
.section-header h3 {
  margin: 0;
  font-size: .77rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.section-header .section-meta { color: var(--muted-soft); font-size: .73rem; }

.queue-list,
.activity-list { display: grid; gap: .3rem; }
.queue-item,
.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .45rem;
  padding: .34rem .38rem;
  border: 1px solid #18273a;
  border-radius: .38rem;
  background: #0d1623;
}
.queue-item .title,
.activity-item .title { font-weight: 560; }
.queue-item .meta,
.activity-item .meta { font-size: .69rem; color: #7f93b0; }

.kv-inline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: .36rem .58rem;
}
.kv-inline .k { color: #8196b7; font-size: .59rem; text-transform: uppercase; letter-spacing: .08em; }
.kv-inline .v { font-size: .81rem; }

.compact-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .36rem .58rem;
}
.compact-info-grid .info-cell {
  border: 1px solid #26384f;
  background: #101a29;
  border-radius: .38rem;
  padding: .36rem .45rem;
}
.compact-info-grid .info-label { color: #8ea3c5; font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; margin-bottom: .08rem; }
.compact-info-grid .info-value { font-size: .82rem; }

.action-bar,
.action-cluster,
.btn-toolbar-clean,
.meta-strip { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; }

.filters-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: .35rem;
}
.filters-row .field { grid-column: span 2; }
.filters-row .field-wide { grid-column: span 4; }
.filters-row .field-actions { grid-column: span 2; }
@media (max-width: 1200px) {
  .filters-row .field,
  .filters-row .field-wide,
  .filters-row .field-actions { grid-column: span 6; }
}
@media (max-width: 760px) {
  .filters-row .field,
  .filters-row .field-wide,
  .filters-row .field-actions { grid-column: span 12; }
}

.form-control, .form-select, .input-group-text {
  min-height: 30px;
  padding: .27rem .46rem;
  font-size: .79rem;
  background-color: #0f1825;
  border-color: var(--border);
  color: var(--text);
  border-radius: .35rem;
}
.form-control:focus, .form-select:focus {
  border-color: #4d74bc;
  box-shadow: 0 0 0 .14rem rgba(77, 116, 188, .2);
  background-color: #0f1825;
  color: var(--text);
}
.form-check-input { background-color: #0f1825; border-color: #405775; }
.form-label { color: #a5b6d4; font-size: .68rem; margin-bottom: .14rem; letter-spacing: .02em; }
.form-text { color: #7d91af; font-size: .71rem; }
textarea.form-control { min-height: 66px; }

.btn {
  --bs-btn-padding-y: .22rem;
  --bs-btn-padding-x: .55rem;
  --bs-btn-font-size: .77rem;
  border-radius: .35rem;
}
.btn-sm { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .43rem; --bs-btn-font-size: .72rem; }
.btn-xs { --bs-btn-padding-y: .08rem; --bs-btn-padding-x: .3rem; --bs-btn-font-size: .67rem; }
.btn-primary { background: #5f89f8; border-color: #5379db; }
.btn-outline-secondary { border-color: #435a78; color: #c6d2ea; }
.btn-outline-secondary:hover,
.btn-outline-secondary:focus { background: #162335; border-color: #38506e; color: #e8effb; }
.btn-outline-primary { border-color: #3f5a8b; color: #bdd2ff; }
.btn-outline-primary:hover,
.btn-outline-primary:focus { background: #193154; border-color: #4d6da6; color: #e8f0ff; }
.btn-link-soft {
  color: #a9bad7;
  border: 0;
  background: transparent;
  text-decoration: none;
  padding-inline: .2rem;
}
.btn-link-soft:hover,
.btn-link-soft:focus { color: #e4ecfb; text-decoration: underline; }

.badge { padding: .16em .38em; font-size: .62rem; border-radius: .28rem; font-weight: 610; }
.badge-soft { background: #253347; color: #d2def4; border: 1px solid #334964; }
.badge-protocol-awg2 { background: #15324d; color: #9ed4ff; border: 1px solid #2b5e91; }
.badge-protocol-awg { background: #2b3245; color: #cfd9ee; border: 1px solid #4a5670; }
.status-badge { border: 1px solid transparent; background: #253045; color: #c9d5ee; }
.status-success { background: #1a3828; border-color: #2d6447; color: #9de3ba; }
.status-warning { background: #443315; border-color: #725520; color: #ffd99f; }
.status-danger { background: #492128; border-color: #7a3441; color: #ffc7d0; }
.status-neutral { background: #293346; border-color: #465675; color: #b7c4db; }
.status-info { background: #1b3350; border-color: #2f557f; color: #b8d8ff; }
.badge-ok { background: #1a3929; color: #9ce2b8; border: 1px solid #2b6a49; }
.badge-warn { background: #433214; color: #ffd58e; border: 1px solid #74551f; }
.badge-danger { background: #4a1f27; color: #ffc8d2; border: 1px solid #7b323f; }
.badge-muted { background: #2a3346; color: #b7c3db; border: 1px solid #475673; }

.table-shell { overflow: hidden; }
.table-shell-soft { border-color: #1a293b; background: #0b131f; }
.table {
  --bs-table-bg: transparent;
  --bs-table-color: #e5eaf4;
  --bs-table-hover-bg: #162435;
  margin-bottom: 0;
}
.table thead th {
  color: #859abc;
  text-transform: uppercase;
  font-size: .6rem;
  letter-spacing: .09em;
  border-bottom-color: #213247;
  font-weight: 620;
  padding: .34rem .38rem;
  white-space: nowrap;
}
.table td { border-color: #1c2c40; padding: .34rem .38rem; font-size: .775rem; vertical-align: middle; }
.table .small { font-size: .69rem !important; }
.table .collapse-row td { background: #0d1623; }
.clients-table tbody tr.row-expired td { background: rgba(255, 193, 7, .06); }
.clients-table tbody tr.row-danger td { background: rgba(220, 53, 69, .075); }
.clients-table tbody tr.row-deleted td { background: rgba(108, 117, 125, .1); }
.clients-table tbody tr.row-warning td { background: rgba(13, 202, 240, .05); }

.table-primary-cell .primary { font-weight: 590; line-height: 1.23; }
.table-primary-cell .meta { font-size: .665rem; color: #7b8fae; margin-top: .06rem; }
.table-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .24rem; }
.table-actions-compact .btn { min-width: 2rem; }
.meta-strip-primary { gap: .2rem; }
.meta-strip-muted .badge { opacity: .88; }
.table-meta-quiet { color: #6f84a4 !important; }
.table-meta-soft { color: #7589a9 !important; font-size: .68rem; }
.badge-renewal-soft {
  background: #212f41;
  color: #adc0df;
  border-color: #32465f;
}
.btn-icon-muted {
  --bs-btn-padding-y: .1rem;
  --bs-btn-padding-x: .38rem;
  --bs-btn-font-size: .69rem;
  border-color: #2f435b;
  color: #9ab0d3;
  min-height: 1.55rem;
  min-width: 1.55rem;
  line-height: 1.15;
}
.btn-icon-muted:hover,
.btn-icon-muted:focus { border-color: #3f5a7d; color: #edf3ff; background: #172538; }
.btn-icon-muted.dropdown-toggle::after { display: none; }
.clients-table td.address-cell code {
  display: inline-block;
  max-width: 272px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 1280px) {
  .clients-table td.address-cell code { max-width: 220px; }
}
@media (max-width: 992px) {
  .clients-table td.address-cell code { max-width: 170px; }
}

.empty-state {
  border: 1px dashed #384d6a;
  border-radius: .42rem;
  padding: .68rem;
  color: #a8b6cf;
  background: #0e1724;
}
.compact-empty { padding: .52rem .6rem; border-style: solid; border-color: #2a3c56; background: #0c1522; }
.app-alert {
  border-width: 1px;
  border-radius: .4rem;
  margin-bottom: .5rem;
  padding: .43rem .58rem;
  font-size: .77rem;
}
.app-alert.alert-success { color: #d5f5df; background: #153823; border-color: #27553a; }
.app-alert.alert-warning { color: #ffe5b8; background: #3a2c15; border-color: #62461f; }
.app-alert.alert-danger { color: #ffd7dc; background: #401b22; border-color: #6b2a35; }
.app-alert.alert-info { color: #d2e8ff; background: #1a2d45; border-color: #2a4568; }

code { white-space: pre-wrap; color: #9ad3ff; background: #18263a; padding: 1px 4px; border-radius: 4px; }
pre.log { background: #0f1520; color: #d7e2ff; padding: .75rem; border-radius: .5rem; max-height: 240px; overflow: auto; }

.portal-shell { max-width: 1080px !important; }
.portal-section { border: 1px solid #26384f; border-radius: .42rem; background: #0f1826; }
.portal-section .section-body { padding: .58rem .66rem; }
.portal-history .list-group-item { padding: .34rem 0; }
.renewal-action-card { border: 1px solid #22354d; border-radius: .42rem; background: #0f1826; padding: .56rem; }
.renewal-action-buttons { display: flex; flex-wrap: wrap; gap: .31rem; }

.ops-strip {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: .36rem;
}
.ops-pill {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  border: 1px solid #172536;
  background: #0b131e;
  border-radius: .35rem;
  padding: .33rem .42rem;
}
.ops-pill .k { color: #7489aa; font-size: .57rem; text-transform: uppercase; letter-spacing: .08em; }
.ops-pill .v { font-size: .93rem; font-weight: 620; line-height: 1.15; color: #e3ecfa; }
.ops-pill.is-link { text-decoration: none; color: inherit; }
.ops-pill.is-link:hover { border-color: #304a69; background: #0f1b2a; }

.section-attention { border-left-color: #7a5a24; }
.section-renewals { border-left-color: #355072; }
.section-jobs { border-left-color: #5e3440; }
.section-audit { border-left-color: #2f425f; }

.queue-list-clean .queue-item,
.activity-list-clean .activity-item { border-left: 0; border-right: 0; border-radius: 0; padding-inline: .2rem; background: transparent; border-bottom-color: #1b2b3f; }

.summary-strip-compact .summary-item { min-height: 42px; padding: .24rem .36rem; }
.filter-toolbar { background: #0c131e; border-color: #1a2738; }
.diagnostics-table-shell { border-color: #293b57; background: #0b1320; }

/* login page */
.app-auth-shell {
  background:
    radial-gradient(circle at 18% 12%, rgba(86, 132, 222, .2), transparent 42%),
    radial-gradient(circle at 82% 82%, rgba(45, 77, 128, .15), transparent 45%),
    linear-gradient(180deg, #0c1118 0%, #0a0f16 100%);
}
.auth-shell { min-height: calc(100vh - 3rem); display: flex; align-items: center; justify-content: center; padding-inline: .6rem; }
.auth-card { width: min(100%, 560px); }
.auth-card-body { padding: 1.5rem; }
.auth-brand { color: #9eb2d7; text-transform: uppercase; letter-spacing: .1em; font-size: .69rem; font-weight: 600; }
.auth-title { font-size: clamp(1.35rem, 2vw, 1.6rem); line-height: 1.24; color: #edf3ff; font-weight: 650; }
.auth-subtitle { color: #9eb1d2; max-width: 42ch; font-size: .9rem; line-height: 1.4; }
.auth-label { color: #c2cee4; font-weight: 500; margin-bottom: .35rem; }
.auth-input { min-height: 44px; padding: .62rem .85rem; border-color: #3a4f6d; background-color: #101925; border-radius: .5rem !important; }
.auth-submit { min-height: 44px; font-weight: 620; letter-spacing: .012em; }
.auth-note { margin-top: .85rem; padding-top: .85rem; border-top: 1px solid #2d3f58; color: #8ea3c7; font-size: .8rem; }

.section-header-compact { display:flex; justify-content:space-between; align-items:center; gap:.45rem; margin-bottom:.4rem; }
.section-header-compact h2, .section-header-compact .h6 { margin:0; font-size:.79rem; }
.client-actions { display:flex; flex-wrap:wrap; gap:.25rem; }
.client-actions .dropdown-menu { background:#172334; border-color:var(--border); }
.client-actions .dropdown-item { color:#d6e2f8; font-size:.79rem; }
.client-actions .dropdown-item:hover, .client-actions .dropdown-item:focus { background:#243552; color:#fff; }
.client-actions .dropdown-divider { border-color:#304461; }

@media (max-width: 992px) {
  :root { --sidebar-width: 204px; }
  .topbar-subtitle { display: none; }
  .ops-pill { grid-column: span 5; }
}