:root {
    --bg: #111111;
    --card: #1a1a1a;
    --card-2: #222222;
    --text: #f8f8f8;
    --muted: #bbbbbb;
    --accent: #d83b01;
    --accent-2: #f6c400;
    --border: rgba(255,255,255,0.09);
    --success: #167c3f;
    --warning: #b08900;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: radial-gradient(circle at top, rgba(216,59,1,.25), transparent 35%), var(--bg);
    color: var(--text);
}
.container {
    width: min(1100px, calc(100% - 32px));
    margin: 32px auto;
}
.container.narrow { width: min(700px, calc(100% - 32px)); }
.hero {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: end;
    margin-bottom: 24px;
}
.hero.compact { align-items: center; }
.eyebrow {
    color: var(--accent-2);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .85rem;
    margin: 0 0 8px;
}
h1,h2,h3,p { margin-top: 0; }
h1 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 8px; }
.subtitle { color: var(--muted); max-width: 700px; }
.card, .stat-card {
    background: linear-gradient(180deg, var(--card), var(--card-2));
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.order-form, .login-form { display: grid; gap: 18px; }
.grid.two {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
label { display: grid; gap: 8px; }
label span { font-weight: 700; }
input, select, textarea, button, .button {
    font: inherit;
    border-radius: 14px;
}
input, select, textarea {
    width: 100%;
    padding: 14px 16px;
    background: #0f0f0f;
    border: 1px solid var(--border);
    color: var(--text);
}
textarea { resize: vertical; min-height: 130px; }
button, .button, .admin-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border: none;
    cursor: pointer;
    background: linear-gradient(180deg, var(--accent), #a72d00);
    color: white;
    padding: 14px 18px;
    font-weight: 700;
}
.button.secondary { background: #303030; }
.admin-link { padding: 12px 16px; border-radius: 14px; white-space: nowrap; }
.info-box {
    padding: 18px;
    background: rgba(246,196,0,.08);
    border: 1px solid rgba(246,196,0,.2);
    border-radius: 18px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 16px;
    margin-bottom: 18px;
}
.stat-card span { display:block; color: var(--muted); margin-bottom: 10px; }
.stat-card strong { font-size: 1.8rem; }
.table-wrap { overflow-x: auto; }
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    text-align: left;
    padding: 14px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
th { color: var(--accent-2); }
.badge {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: .9rem;
    font-weight: 700;
}
.badge.paid { background: rgba(22,124,63,.2); color: #8cffb3; }
.badge.open { background: rgba(176,137,0,.2); color: #ffd35a; }
.small-btn {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: .92rem;
}
.inline-form { margin: 0; }
.empty, .muted, small { color: var(--muted); }
.error { color: #ff8b8b; }
.button-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.success-card { text-align: center; }
@media (max-width: 780px) {
    .grid.two, .stats-grid, .hero {
        grid-template-columns: 1fr;
        display: grid;
    }
    .hero { align-items: start; }
}