:root {
  --ddl-bg: #f8fafc;
  --ddl-surface: #ffffff;
  --ddl-border: #e2e8f0;
  --ddl-border-soft: #f1f5f9;
  --ddl-text: #0f172a;
  --ddl-muted: #64748b;
  --ddl-muted-2: #94a3b8;
  --ddl-blue: #1677ff;
  --ddl-green: #22b573;
  --ddl-orange: #ff9f43;
  --ddl-red: #ff4d6d;
  --ddl-violet: #7c4dff;
  --ddl-teal: #14b8a6;
  --ddl-sidebar-width: 205px;
  --ddl-radius: 8px;
}

html, body {
  min-height: 100%;
}

body.ddl-admin-body {
  margin: 0;
  background: var(--ddl-bg);
  color: var(--ddl-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.ddl-app-shell * {
  box-sizing: border-box;
}

.ddl-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--ddl-sidebar-width);
  background: var(--ddl-surface);
  border-right: 1px solid var(--ddl-border);
  z-index: 50;
}

.ddl-brand {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  border-bottom: 1px solid var(--ddl-border-soft);
}

.ddl-brand-logo {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #111827;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
}

.ddl-brand-title {
  font-weight: 700;
  font-size: 14px;
}

.ddl-nav {
  padding: 16px 10px;
}

.ddl-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  padding: 9px 12px;
  border-radius: var(--ddl-radius);
  color: #334155;
  text-decoration: none;
  font-weight: 600;
  font-size: 12px;
  margin-bottom: 3px;
}

.ddl-nav a:hover {
  background: #f8fafc;
  color: #0f172a;
  text-decoration: none;
}

.ddl-nav a.active {
  background: #f8fafc;
  color: #0f766e;
  border-left: 2px solid var(--ddl-teal);
}

.ddl-nav-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #64748b;
}

.ddl-svg-icon {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex: 0 0 16px;
  color: currentColor;
  vertical-align: -3px;
}

.ddl-nav a.active .ddl-nav-icon {
  color: var(--ddl-teal);
}

.ddl-userbox {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px;
  border-top: 1px solid var(--ddl-border-soft);
}

.ddl-userline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ddl-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ddl-blue);
  color: #fff;
  font-weight: 800;
}

.ddl-username {
  font-weight: 700;
  color: var(--ddl-text);
}

.ddl-useremail, .ddl-logout {
  color: var(--ddl-muted);
  font-size: 11px;
}

.ddl-logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  text-decoration: none;
}

.ddl-main {
  margin-left: var(--ddl-sidebar-width);
  min-height: 100vh;
}

.ddl-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: 56px;
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid var(--ddl-border);
  backdrop-filter: blur(10px);
}

.ddl-topbar-inner {
  height: 100%;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ddl-topbar-left, .ddl-topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.ddl-menu-toggle {
  display: inline-flex;
  color: #475569;
}

.ddl-menu-toggle .ddl-svg-icon {
  width: 20px;
  height: 20px;
  color: #475569;
}

.ddl-search {
  width: 370px;
  position: relative;
}

.ddl-search-icon {
  position: absolute;
  left: 11px;
  top: 10px;
  color: #94a3b8;
  pointer-events: none;
}

.ddl-search-icon .ddl-svg-icon {
  width: 14px;
  height: 14px;
}

.ddl-search input,
.ddl-form-control,
.ddl-admin .form-control,
.ddl-admin select,
.ddl-admin textarea {
  height: 36px;
  border: 1px solid var(--ddl-border);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 12px;
  color: var(--ddl-text);
  background: #fff;
  box-shadow: none;
}

.ddl-search input {
  width: 100%;
  padding-left: 32px;
}

.ddl-admin textarea,
.ddl-admin textarea.form-control {
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
}

.ddl-search input:focus,
.ddl-form-control:focus,
.ddl-admin .form-control:focus {
  outline: none;
  border-color: #93c5fd;
  box-shadow: 0 0 0 2px #dbeafe;
}

.ddl-content {
  padding: 20px 24px;
}

.ddl-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.ddl-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
}

.ddl-page-subtitle {
  margin-top: 4px;
  color: var(--ddl-muted);
  font-size: 11px;
}

.ddl-page-subtitle .ddl-svg-icon {
  width: 13px;
  height: 13px;
  margin-right: 4px;
}

.ddl-card {
  background: var(--ddl-surface);
  border: 1px solid var(--ddl-border);
  border-radius: var(--ddl-radius);
  overflow: hidden;
}

.ddl-card-padded {
  padding: 16px;
}

.ddl-card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ddl-border-soft);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.ddl-card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.ddl-card-subtitle, .ddl-card-right {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ddl-muted);
}

.ddl-grid {
  display: grid;
  gap: 12px;
}

.ddl-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ddl-grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ddl-col-3 { grid-column: span 3 / span 3; }
.ddl-col-4 { grid-column: span 4 / span 4; }
.ddl-col-5 { grid-column: span 5 / span 5; }
.ddl-col-8 { grid-column: span 8 / span 8; }
.ddl-col-12 { grid-column: span 12 / span 12; }
.ddl-mt-12 { margin-top: 12px; }
.ddl-mt-16 { margin-top: 16px; }
.ddl-mt-20 { margin-top: 20px; }

.ddl-kpi {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.ddl-iconbox {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  font-size: 17px;
}

.ddl-tone-blue { color: #1d4ed8; background: #dbeafe; border-color: #bfdbfe; }
.ddl-tone-green { color: #047857; background: #d1fae5; border-color: #a7f3d0; }
.ddl-tone-orange { color: #c2410c; background: #ffedd5; border-color: #fed7aa; }
.ddl-tone-red { color: #be123c; background: #ffe4e6; border-color: #fecdd3; }
.ddl-tone-violet { color: #6d28d9; background: #ede9fe; border-color: #ddd6fe; }
.ddl-tone-gray { color: #334155; background: #f1f5f9; border-color: #e2e8f0; }

.ddl-kpi-label {
  font-size: 11px;
  color: var(--ddl-muted);
  font-weight: 600;
}

.ddl-kpi-value {
  margin-top: 2px;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

.ddl-kpi-meta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ddl-muted);
}

.ddl-up {
  font-size: 11px;
  color: #059669;
  font-weight: 700;
  margin-left: 8px;
}

.ddl-minimetrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 16px;
}

.ddl-minimetric {
  border: 1px solid;
  border-radius: 6px;
  padding: 8px 10px;
}

.ddl-minimetric-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ddl-minimetric-label {
  font-size: 11px;
  font-weight: 600;
}

.ddl-minimetric-value {
  font-size: 14px;
  font-weight: 800;
}

.ddl-minimetric-suffix {
  margin-top: 4px;
  font-size: 10px;
  opacity: .75;
}

.ddl-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
}

.ddl-table-wrap {
  overflow-x: auto;
}

.ddl-table,
.ddl-admin .table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 11px;
  color: var(--ddl-text);
}

.ddl-table > thead > tr > th,
.ddl-admin .table > thead > tr > th {
  background: #f8fafc;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .025em;
  font-size: 11px;
  font-weight: 700;
  border-bottom: 1px solid var(--ddl-border-soft);
  padding: 8px 12px;
  vertical-align: middle;
}

.ddl-table > tbody > tr > td,
.ddl-admin .table > tbody > tr > td {
  border-top: 1px solid var(--ddl-border-soft);
  padding: 10px 12px;
  vertical-align: top;
}

.ddl-table > tbody > tr:hover,
.ddl-admin .table > tbody > tr:hover {
  filter: brightness(.985);
}

.ddl-row-ok { background: rgba(209, 250, 229, .7); }
.ddl-row-bad { background: rgba(255, 228, 230, .65); }
.ddl-row-warn { background: rgba(255, 237, 213, .65); }
.ddl-row-neutral { background: #fff; }

.ddl-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.ddl-actions-vertical {
  flex-direction: column;
  align-items: center;
}

.ddl-action {
  color: var(--ddl-blue);
  text-decoration: none;
  font-weight: 800;
  cursor: pointer;
}

.ddl-action-danger { color: #e11d48; }
.ddl-action:hover { color: #1d4ed8; text-decoration: none; }

.ddl-admin .action-column,
.ddl-admin .action-td {
  width: 70px;
  min-width: 70px;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle !important;
  writing-mode: horizontal-tb;
}

.ddl-admin .action-column a,
.ddl-admin .action-td a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--ddl-border);
  border-radius: 6px;
  background: #fff;
  color: #1d4ed8;
  text-decoration: none;
  margin: 0 1px;
  vertical-align: middle;
}

.ddl-admin .action-column a:hover,
.ddl-admin .action-td a:hover {
  background: #f8fafc;
  border-color: #bfdbfe;
  color: #1d4ed8;
  text-decoration: none;
}

.ddl-admin .action-column a.text-danger,
.ddl-admin .action-td a.text-danger {
  color: #be123c;
  border-color: #fecdd3;
  background: #fff1f2;
}

.ddl-admin .glyphicon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-family: Arial, sans-serif;
  font-size: 0;
  line-height: 1;
}

.ddl-admin .glyphicon:before {
  font-size: 15px;
  font-family: Arial, sans-serif;
  font-weight: 700;
}

.ddl-admin .glyphicon-refresh:before { content: "\21bb"; }
.ddl-admin .glyphicon-fire:before { content: "\25b2"; }
.ddl-admin .glyphicon-pencil:before { content: "\270e"; }
.ddl-admin .glyphicon-cog:before { content: "\2699"; }
.ddl-admin .glyphicon-circle-arrow-down:before,
.ddl-admin .glyphicon-download:before { content: "\2193"; }

.ddl-btn,
.ddl-admin .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border-radius: 6px;
  border: 1px solid var(--ddl-border);
  padding: 7px 12px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: none;
}

.ddl-btn:hover { text-decoration: none; filter: brightness(.98); }
.ddl-btn-primary { background: var(--ddl-blue); color: #fff; border-color: var(--ddl-blue); }
.ddl-btn-orange { background: var(--ddl-orange); color: #fff; border-color: var(--ddl-orange); }
.ddl-btn-teal { background: var(--ddl-teal); color: #fff; border-color: var(--ddl-teal); }
.ddl-btn-green { background: var(--ddl-green); color: #fff; border-color: var(--ddl-green); }
.ddl-btn-red { background: var(--ddl-red); color: #fff; border-color: var(--ddl-red); }
.ddl-btn-white { background: #fff; color: #334155; }

.ddl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.ddl-muted { color: var(--ddl-muted); }
.ddl-blue-text { color: #1d4ed8; }
.ddl-green-text { color: #047857; }
.ddl-red-text { color: #be123c; }
.ddl-orange-text { color: #c2410c; }
.ddl-bold { font-weight: 800; }
.ddl-center { text-align: center; }
.ddl-right { text-align: right; }
.ddl-nowrap { white-space: nowrap; }

.ddl-domain-host {
  font-weight: 800;
  color: #1d4ed8;
}

.ddl-domain-meta {
  margin-top: 4px;
  line-height: 1.7;
  color: #64748b;
}

.ddl-status-grid {
  display: grid;
  grid-template-columns: 70px 80px 1fr;
}

.ddl-status-grid span,
.ddl-status-grid b {
  padding: 4px;
}

.ddl-status-grid .label {
  background: rgba(255, 255, 255, .75);
  color: #475569;
  font-weight: 600;
}

.ddl-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr);
  gap: 12px;
}

.ddl-form-body {
  padding: 20px;
}

.ddl-form-group,
.ddl-admin .form-group {
  margin-bottom: 16px;
}

.ddl-form-group label,
.ddl-admin .control-label {
  display: block;
  margin-bottom: 5px;
  color: #334155;
  font-weight: 700;
  font-size: 11px;
}

.ddl-form-actions {
  display: flex;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--ddl-border-soft);
}

.ddl-chart {
  height: 150px;
  padding: 8px 12px;
}

.ddl-queue-error {
  background: rgba(255, 228, 230, .4);
  padding: 16px;
}

.ddl-mini-list {
  padding: 0 16px;
}

.ddl-mini-list-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--ddl-border-soft);
}

.ddl-mini-list-row:first-child { border-top: 0; }

.ddl-pagination {
  display: flex;
  gap: 4px;
  padding: 16px;
  border-top: 1px solid var(--ddl-border-soft);
}

.ddl-pagination a,
.ddl-admin .pagination > li > a,
.ddl-admin .pagination > li > span {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ddl-border);
  border-radius: 6px;
  background: #fff;
  color: #334155;
  font-size: 11px;
  text-decoration: none;
  margin-left: 0;
}

.ddl-admin .pagination > .active > a,
.ddl-admin .pagination > .active > span {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

@media (max-width: 1200px) {
  .ddl-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ddl-col-3, .ddl-col-4, .ddl-col-5 { grid-column: span 6 / span 6; }
  .ddl-form-layout { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .ddl-sidebar { position: static; width: 100%; height: auto; }
  .ddl-userbox { position: static; }
  .ddl-main { margin-left: 0; }
  .ddl-topbar { position: static; height: auto; }
  .ddl-topbar-inner { padding: 12px; flex-direction: column; align-items: stretch; gap: 12px; }
  .ddl-search { width: 100%; }
  .ddl-grid-6, .ddl-grid-12 { grid-template-columns: 1fr; }
  .ddl-col-3, .ddl-col-4, .ddl-col-5, .ddl-col-8, .ddl-col-12 { grid-column: span 1 / span 1; }
}