* { box-sizing: border-box; }

:root {
    --bg: #07111f;
    --bg-soft: #0d1728;
    --panel: rgba(12, 23, 41, 0.9);
    --panel-strong: #0f1b31;
    --line: rgba(148, 163, 184, 0.14);
    --line-soft: rgba(148, 163, 184, 0.09);
    --text: #f8fafc;
    --muted: #8ea0b9;
    --blue: #60a5fa;
    --blue-strong: #2563eb;
    --violet: #8b5cf6;
    --green: #22c55e;
    --yellow: #f59e0b;
    --red: #ef4444;
    --shadow: 0 24px 60px rgba(2, 6, 23, 0.38);
    --radius: 22px;
}

html, body { min-height: 100%; }
body {
    margin: 0;
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(96, 165, 250, 0.14), transparent 28%),
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.12), transparent 22%),
        linear-gradient(180deg, #07111f 0%, #0a1220 100%);
}

a { color: inherit; text-decoration: none; }

.app-shell {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px 18px;
    border-right: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(9,17,31,0.96), rgba(10,18,32,0.96));
    backdrop-filter: blur(16px);
}

.brand-wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    margin-bottom: 24px;
}

.brand-badge {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    font-weight: 800;
    border-radius: 16px;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    box-shadow: 0 16px 30px rgba(37, 99, 235, 0.32);
}

.brand-title { font-size: 18px; font-weight: 800; }
.brand-subtitle { color: var(--muted); font-size: 12px; margin-top: 3px; }

.nav { display: flex; flex-direction: column; gap: 10px; }
.nav-link {
    display: block;
    padding: 14px 16px;
    border-radius: 18px;
    border: 1px solid transparent;
    background: rgba(255,255,255,0.03);
    transition: all .22s ease;
}
.nav-link span { display:block; font-weight: 700; }
.nav-link small { display:block; margin-top: 4px; color: var(--muted); font-size: 12px; }
.nav-link:hover {
    transform: translateX(2px);
    border-color: var(--line);
    background: rgba(255,255,255,0.05);
}
.nav-link.active {
    border-color: rgba(96,165,250,0.28);
    background: linear-gradient(135deg, rgba(37,99,235,0.18), rgba(124,58,237,0.14));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.sidebar-footer { margin-top: auto; padding-top: 18px; display: flex; }
.logout-btn {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    padding: 13px 16px;
    border-radius: 16px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.18);
    color: #fecaca;
    font-weight: 700;
}

.content {
    padding: 28px;
}

.hero {
    display: grid;
    grid-template-columns: 1.3fr .7fr;
    gap: 18px;
    padding: 28px;
    margin-bottom: 18px;
    border-radius: 28px;
    background:
        radial-gradient(circle at top right, rgba(96, 165, 250, 0.18), transparent 28%),
        radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.18), transparent 26%),
        linear-gradient(180deg, rgba(15,27,49,0.95), rgba(10,19,34,0.95));
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}
.eyebrow {
    display:inline-flex;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #cfe2ff;
    background: rgba(96,165,250,0.12);
    border: 1px solid rgba(96,165,250,0.18);
}
.hero h1, .page-topbar h1 { margin: 12px 0 10px; font-size: 34px; line-height: 1.04; letter-spacing: -0.03em; }
.hero p, .muted, .panel-header p { color: var(--muted); }
.hero-side { display:grid; gap: 12px; align-content:start; }
.hero-stat, .info-pill {
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.045);
    border: 1px solid var(--line);
}
.hero-stat span { display:block; color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.hero-stat strong { font-size: 24px; }

.page-topbar {
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    margin-bottom:18px;
    flex-wrap:wrap;
}
.topbar-actions, .status-row, .action-row {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
}
.info-pill { font-size: 13px; color: #dbeafe; }

.kpi-grid {
    display:grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.kpi-card, .panel, .review-card {
    background: linear-gradient(180deg, rgba(15,27,49,0.9), rgba(11,20,36,0.92));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.kpi-card {
    padding: 18px;
    position: relative;
    overflow: hidden;
}
.kpi-card::before {
    content: "";
    position: absolute;
    inset: auto auto -40px -40px;
    width: 120px; height: 120px;
    border-radius: 999px;
    opacity: .18;
}
.accent-blue::before { background: var(--blue); }
.accent-green::before { background: var(--green); }
.accent-violet::before { background: var(--violet); }
.accent-orange::before { background: var(--yellow); }
.kpi-label { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.kpi-value { font-size: 28px; font-weight: 800; line-height: 1.05; }
.kpi-meta { margin-top: 8px; font-size: 12px; color: #b8c7dc; }

.panel { padding: 20px; }
.panel-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.panel-header h2 { margin: 0 0 6px; font-size: 20px; }
.ghost-btn, .primary-btn, .danger-btn, .warning-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height: 44px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid transparent;
    font-weight: 700;
    cursor: pointer;
}
.primary-btn {
    background: linear-gradient(135deg, #2563eb, #4f46e5);
    color: #fff;
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.28);
}
.ghost-btn {
    background: rgba(255,255,255,0.04);
    color: #e2e8f0;
    border-color: var(--line);
}
.warning-btn {
    background: rgba(245,158,11,0.12);
    color: #fde68a;
    border-color: rgba(245,158,11,0.18);
}
.danger-btn {
    background: rgba(239,68,68,0.12);
    color: #fecaca;
    border-color: rgba(239,68,68,0.18);
}
.alt-green {
    background: rgba(34,197,94,0.12);
    color: #bbf7d0;
    border-color: rgba(34,197,94,0.18);
}
.small { min-height: 36px; padding: 8px 12px; font-size: 13px; }

.segmented {
    display:flex; gap:8px; padding:4px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
}
.segment {
    border: 0;
    min-height: 38px;
    padding: 9px 12px;
    border-radius: 12px;
    color: #cbd5e1;
    background: transparent;
    cursor: pointer;
    font-weight: 700;
}
.segment.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(37,99,235,0.92), rgba(124,58,237,0.92));
}

.chart-grid, .content-grid, .profile-grid, .order-grid, .settings-layout {
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 18px;
}
.chart-panel {
    height: 340px;
    padding: 16px;
    border-radius: 20px;
    border: 1px solid var(--line-soft);
    background: rgba(255,255,255,0.03);
}
.chart-title { font-weight: 700; margin-bottom: 14px; }
.chart-panel canvas { width:100% !important; height: 270px !important; }

.stats-mini-grid {
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}
.mini-stat, .stack-item {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--line-soft);
    background: rgba(255,255,255,0.03);
}
.mini-stat span, .stack-sub { display:block; color: var(--muted); font-size: 12px; }
.mini-stat strong, .stack-title, .stack-value { margin-top: 6px; font-weight: 800; }
.stack-list { display:flex; flex-direction:column; gap: 10px; }
.stack-item { display:flex; justify-content:space-between; gap: 16px; align-items:center; }

.divider { height: 1px; background: var(--line); margin: 18px 0; }

.table-wrap {
    overflow-x:auto;
    border-radius: 18px;
    border: 1px solid var(--line-soft);
}
.data-table {
    width:100%;
    border-collapse: collapse;
    min-width: 900px;
}
.data-table th {
    text-align:left;
    padding: 14px 14px;
    font-size: 12px;
    color: #9fb1c8;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--line);
}
.data-table td {
    padding: 14px;
    border-bottom: 1px solid var(--line-soft);
    vertical-align: top;
    color: #e2e8f0;
    font-size: 14px;
}
.data-table tr:hover td {
    background: rgba(255,255,255,0.025);
}
.cell-main { font-weight: 700; }
.cell-sub { margin-top: 5px; color: var(--muted); font-size: 12px; }
.table-link { color: #93c5fd; font-weight: 700; }
.empty-cell, .empty-block { padding: 18px; color: var(--muted); text-align: center; }

.filter-grid, .settings-grid-form, .two-col, .single-grow {
    display:grid;
    gap: 12px;
}
.filter-grid { grid-template-columns: minmax(240px, 1.4fr) 220px 220px auto; }
.single-grow { grid-template-columns: 1fr auto; }
.settings-grid-form { grid-template-columns: repeat(2, minmax(0,1fr)); }
.two-col { grid-template-columns: repeat(2, minmax(0,1fr)); }
.full-span { grid-column: 1 / -1; }

.input, .filter-grid input, .filter-grid select, .single-grow input, .single-grow select, .inline-form input {
    width: 100%;
    min-height: 48px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(7,17,31,0.72);
    color: #fff;
    outline: none;
}
textarea.input, .textarea-xl, .textarea-large {
    min-height: 120px;
    resize: vertical;
}
.textarea-xl { min-height: 150px; }
.field { display:flex; flex-direction:column; gap: 8px; }
.field label, .form-stack label, .upload-box label { font-size: 13px; color: #c6d4e5; }

.form-stack { display:flex; flex-direction:column; gap: 12px; }
.checkbox-tile {
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
}
.checkbox-tile small { display:block; margin-top: 4px; color: var(--muted); }

.status-chip, .tiny-chip {
    display:inline-flex;
    align-items:center;
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}
.status-chip.success, .tiny-chip.success { background: rgba(34,197,94,0.12); color: #bbf7d0; border: 1px solid rgba(34,197,94,0.18); }
.status-chip.warning, .tiny-chip.warning, .tiny-chip.dangerless { background: rgba(245,158,11,0.12); color: #fde68a; border: 1px solid rgba(245,158,11,0.18); }
.status-chip.danger, .tiny-chip.danger { background: rgba(239,68,68,0.12); color: #fecaca; border: 1px solid rgba(239,68,68,0.18); }
.status-chip.neutral { background: rgba(148,163,184,0.12); color: #dbe7f5; border: 1px solid rgba(148,163,184,0.18); }
.status-chip.badge-green { background: rgba(34,197,94,0.12); color: #bbf7d0; border: 1px solid rgba(34,197,94,0.18); }
.status-chip.badge-yellow { background: rgba(245,158,11,0.12); color: #fde68a; border: 1px solid rgba(245,158,11,0.18); }
.status-chip.badge-red { background: rgba(239,68,68,0.12); color: #fecaca; border: 1px solid rgba(239,68,68,0.18); }

.quick-actions, .fraud-stack, .inline-form { display:flex; gap: 8px; flex-wrap:wrap; align-items:center; }
.mini-btn {
    border: 1px solid transparent;
    border-radius: 12px;
    min-height: 34px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}
.mini-btn.success { background: rgba(34,197,94,0.12); color: #bbf7d0; border-color: rgba(34,197,94,0.18); }
.mini-btn.warning { background: rgba(245,158,11,0.12); color: #fde68a; border-color: rgba(245,158,11,0.18); }
.mini-btn.danger { background: rgba(239,68,68,0.12); color: #fecaca; border-color: rgba(239,68,68,0.18); }

.stats-list {
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}
.compact-list { grid-template-columns: 1fr; }
.stats-list > div {
    display:flex;
    flex-direction:column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line-soft);
}
.stats-list span { color: var(--muted); font-size: 12px; }
.stats-list strong { font-size: 15px; }

.upload-box {
    padding: 14px;
    border-radius: 16px;
    border: 1px dashed rgba(148,163,184,0.22);
    background: rgba(255,255,255,0.025);
}
.preview-thumb {
    display:block;
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    margin-top: 12px;
    border-radius: 16px;
    border: 1px solid var(--line);
}

.payload-block {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    padding: 12px;
    border-radius: 14px;
    background: rgba(7,17,31,0.72);
    border: 1px solid var(--line);
    color: #d8e4f4;
    max-width: 520px;
}

.review-card { padding: 18px; }
.reviews-grid { display:grid; gap: 16px; }
.review-head, .review-foot { display:flex; justify-content:space-between; gap: 14px; align-items:flex-start; flex-wrap:wrap; }
.review-title { font-size: 18px; font-weight: 800; }
.review-sub, .review-text { color: #d9e2ef; }
.review-text {
    margin: 16px 0;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line-soft);
}

.login-page {
    min-height: 100vh;
    display:grid;
    place-items:center;
}
.login-shell {
    width: min(1180px, calc(100% - 32px));
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
}
.login-showcase, .login-card {
    border-radius: 28px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(15,27,49,0.92), rgba(10,19,34,0.92));
    box-shadow: var(--shadow);
}
.login-showcase {
    padding: 36px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}
.login-showcase h1 { margin: 14px 0 12px; font-size: 42px; line-height: 1.02; letter-spacing: -0.03em; }
.login-points {
    display:flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.login-point {
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    font-weight: 700;
}
.login-card { padding: 32px; align-self:center; }
.login-card h2 { margin: 0 0 8px; font-size: 28px; }

.alert.danger {
    margin: 14px 0;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.18);
    color: #fecaca;
}
.full-btn { width: 100%; }

.sticky-panel { position: sticky; top: 28px; height: fit-content; }

@media (max-width: 1360px) {
    .kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .hero, .content-grid, .chart-grid, .profile-grid, .order-grid, .settings-layout, .login-shell { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .content { padding: 18px; }
    .filter-grid, .settings-grid-form, .single-grow, .two-col, .stats-list { grid-template-columns: 1fr; }
    .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .hero h1, .page-topbar h1 { font-size: 28px; }
    .kpi-grid { grid-template-columns: 1fr; }
    .brand-wrap { margin-bottom: 16px; }
}

/* ===== Rollback patch additions ===== */
.current-admin-card {
    display:flex;
    gap:12px;
    align-items:center;
    padding: 14px;
    margin: 0 0 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
}
.current-admin-avatar {
    width: 44px;
    height: 44px;
    display:grid;
    place-items:center;
    border-radius: 14px;
    font-weight: 800;
    background: linear-gradient(135deg, rgba(37,99,235,0.92), rgba(124,58,237,0.92));
    box-shadow: 0 16px 28px rgba(37,99,235,0.22);
}
.current-admin-meta { min-width: 0; }
.current-admin-name { font-weight: 800; line-height: 1.1; }
.current-admin-login, .current-admin-status { font-size: 12px; color: var(--muted); margin-top: 3px; }

.settings-section {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line-soft);
}
.section-title-row {
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.section-title-row h3 {
    margin: 0 0 4px;
    font-size: 17px;
}
.block-note {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line-soft);
    font-size: 13px;
}
.tiny-chip-ok {
    background: rgba(34,197,94,0.12);
    color: #bbf7d0;
    border: 1px solid rgba(34,197,94,0.18);
}
.form-note {
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
}
.calc-cards {
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
    margin-top: 16px;
}
.calc-card {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line-soft);
}
.calc-card span { display:block; color: var(--muted); font-size: 12px; }
.calc-card strong { display:block; margin-top: 6px; font-size: 18px; }
.calc-highlight {
    margin-top: 16px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(124,58,237,0.10));
    border: 1px solid rgba(96,165,250,0.18);
}
.calc-highlight-title {
    color: #cfe2ff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.calc-highlight-value {
    margin-top: 8px;
    font-size: 26px;
    font-weight: 800;
}
.admins-grid { align-items: start; }
.admin-create-form { padding: 0; }
.inline-help {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line-soft);
    color: var(--muted);
    font-size: 12px;
}
@media (max-width: 980px) {
    .calc-cards { grid-template-columns: 1fr; }
}


.manual-grid {
    display:grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 12px;
    margin-bottom: 14px;
}
.textarea-md { min-height: 96px; }
.manual-hint {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    color: #cbd5e1;
    font-size: 13px;
    line-height: 1.45;
}
.manual-hint.success {
    background: rgba(34,197,94,0.12);
    border-color: rgba(34,197,94,0.18);
    color: #dcfce7;
}
@media (max-width: 900px) {
    .manual-grid { grid-template-columns: 1fr; }
}