/* Минимальный CSS, который страхует если Tailwind не подгрузился.
   Содержит только базовый layout и нашу тёмную тему. */

* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; background:#0a0c10; color:#e6edf3;
             font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, sans-serif;
             font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
table { border-collapse: collapse; }

/* layout */
.app-shell { display:flex; min-height:100vh; }
.app-sidebar { width:240px; flex-shrink:0; border-right:1px solid #21262d; background:#0d1117;
               display:flex; flex-direction:column; }
.app-sidebar-head { padding:18px 20px; border-bottom:1px solid #21262d; }
.app-sidebar-title { font-size:17px; font-weight:700; letter-spacing:-0.01em; }
.app-sidebar-sub { font-size:11px; color:#6e7681; margin-top:4px; }
.app-sidebar-nav { display:flex; flex-direction:column; gap:2px; padding:12px; }
.app-sidebar-nav a { padding:8px 12px; border-radius:6px; font-size:14px; color:#c9d1d9; }
.app-sidebar-nav a:hover { background:#161b22; }
.app-sidebar-nav a.active { color:#60a5fa; background:#1e2630; }
.app-sidebar-foot { margin-top:auto; padding:12px; border-top:1px solid #21262d; }

.app-main { flex:1; padding:24px 36px; max-width:1500px; }

.guest { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }

/* cards */
.card { background:#0d1117; border:1px solid #21262d; border-radius:12px; }
.card-pad { padding:20px; }
.card-head { padding:12px 20px; border-bottom:1px solid #21262d; font-weight:600; display:flex; justify-content:space-between; align-items:center; }

/* typography */
.title-xl { font-size:24px; font-weight:600; line-height:1.2; }
.title-lg { font-size:18px; font-weight:600; }
.title-md { font-size:15px; font-weight:600; }
.muted { color:#6e7681; }
.muted-2 { color:#8b949e; }
.subtle { font-size:12px; color:#6e7681; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* forms */
.label { font-size:11px; color:#8b949e; text-transform:uppercase; letter-spacing:0.06em;
         font-weight:600; margin-bottom:4px; display:block; }
.input { background:#0a0c10; border:1px solid #30363d; border-radius:6px;
         padding:8px 11px; width:100%; font-size:14px; color:#e6edf3; display:block; }
.input:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.16); }
select.input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #8b949e 50%), linear-gradient(135deg, #8b949e 50%, transparent 50%);
               background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
               padding-right: 30px; }
.checkbox-row { display:flex; align-items:center; gap:8px; font-size:13px; color:#c9d1d9; }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border-radius:6px;
       font-size:13px; font-weight:500; border:1px solid #30363d; background:#161b22; color:#e6edf3;
       text-decoration:none; transition: all .15s ease; }
.btn:hover { border-color:#3b82f6; background:#1e2630; }
.btn-sm { padding:4px 9px; font-size:12px; }
.btn-primary { background:#2563eb; border-color:#2563eb; color:#fff; }
.btn-primary:hover { background:#1d4ed8; border-color:#1d4ed8; }
.btn-danger { background:#7f1d1d; border-color:#991b1b; color:#fecaca; }
.btn-danger:hover { background:#991b1b; }
.btn-block { display:flex; width:100%; justify-content:center; }

/* badges */
.badge { display:inline-block; padding:2px 8px; border-radius:9999px; font-size:11px; font-weight:600;
         background:#21262d; color:#e6edf3; line-height:1.4; }
.badge-good { background:#052e16; color:#86efac; }
.badge-warn { background:#451a03; color:#fbbf24; }
.badge-bad  { background:#450a0a; color:#fca5a5; }
.badge-info { background:#0c2245; color:#93c5fd; }

/* tables */
.table { width:100%; font-size:14px; }
.table thead th { text-align:left; padding:10px 12px; font-size:11px; color:#6e7681;
                  text-transform:uppercase; font-weight:600; letter-spacing:0.05em; }
.table tbody td { padding:10px 12px; border-top:1px solid #21262d; vertical-align: middle; }
.table tbody tr:hover { background: rgba(56,68,82,0.18); }
.table .num { text-align:right; font-variant-numeric: tabular-nums; }
.table-edge th:first-child, .table-edge td:first-child { padding-left:20px; }
.table-edge th:last-child,  .table-edge td:last-child  { padding-right:20px; }

/* grid */
.row { display:flex; gap:16px; }
.row-tight { display:flex; gap:8px; }
.row-between { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.row-end { display:flex; justify-content:flex-end; gap:8px; }
.col { flex:1; }
.spacer { flex:1; }

.grid { display:grid; gap:16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .app-sidebar { width:60px; }
  .app-main { padding:16px; }
}

/* stat card */
.stat { padding:16px 18px; }
.stat-label { font-size:11px; color:#8b949e; text-transform:uppercase; letter-spacing:0.06em; font-weight:600; }
.stat-value { font-size:24px; font-weight:600; margin-top:4px; line-height:1.15; }
.stat-sub  { font-size:11px; color:#6e7681; margin-top:4px; }
.stat-value.is-good { color:#22c55e; }
.stat-value.is-bad  { color:#ef4444; }
.stat-value.is-accent { color:#60a5fa; }

/* utilities */
.mt-1{margin-top:4px} .mt-2{margin-top:8px} .mt-3{margin-top:12px} .mt-4{margin-top:16px} .mt-6{margin-top:24px} .mt-8{margin-top:32px}
.mb-1{margin-bottom:4px} .mb-2{margin-bottom:8px} .mb-3{margin-bottom:12px} .mb-4{margin-bottom:16px} .mb-6{margin-bottom:24px}
.pad-3{padding:12px} .pad-4{padding:16px} .pad-5{padding:20px}
.text-good{color:#22c55e} .text-bad{color:#ef4444} .text-warn{color:#f59e0b} .text-accent{color:#60a5fa}
.text-muted{color:#6e7681} .text-muted-2{color:#8b949e}
.hidden { display:none !important; }
.center { text-align:center; }
.right  { text-align:right; }
.nowrap { white-space:nowrap; }
.break  { word-break: break-all; }
.full   { width:100%; }
.flex   { display:flex; }
.flex-col { display:flex; flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-2 { gap:8px; }
.gap-3 { gap:12px; }
.gap-4 { gap:16px; }

/* code box (copy) */
.copy-box { background:#0a0c10; border:1px solid #21262d; border-radius:6px; padding:10px 12px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px;
            word-break:break-all; cursor:pointer; transition: border-color .15s; }
.copy-box:hover { border-color:#3b82f6; }
.copy-box.flash { border-color:#22c55e; }

/* hint */
.hint { background:#161b22; border-left:3px solid #3b82f6; padding:10px 14px; border-radius:6px;
        font-size:12px; color:#8b949e; line-height:1.5; }

/* form notice */
.notice-bad  { background:#450a0a; border:1px solid #7f1d1d; color:#fca5a5;
               padding:10px 14px; border-radius:6px; font-size:13px; margin-bottom:14px; }
.notice-good { background:#052e16; border:1px solid #14532d; color:#86efac;
               padding:10px 14px; border-radius:6px; font-size:13px; margin-bottom:14px; }

/* hidden Alpine cloak */
[x-cloak] { display:none !important; }