:root {
    --oh-bg: #070911;
    --oh-surface: rgba(23, 23, 29, .92);
    --oh-surface-2: rgba(15, 23, 42, .72);
    --oh-border: rgba(148, 163, 184, .16);
    --oh-border-strong: rgba(245, 158, 11, .55);
    --oh-text: #ffffff;
    --oh-muted: #a8b0c2;
    --oh-orange: #f59e0b;
    --oh-orange-2: #f97316;
    --oh-blue: #2563eb;
    --oh-green: #16a34a;
    --oh-red: #ef4444;
}

html {
    background: var(--oh-bg);
}

body {
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, .16), transparent 35%),
        radial-gradient(circle at top left, rgba(37, 99, 235, .12), transparent 32%),
        linear-gradient(180deg, #070911 0%, #090b12 45%, #05060a 100%) !important;
    color: var(--oh-text) !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.top {
    background: rgba(10, 12, 20, .84) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(148, 163, 184, .12) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}

.top h1,
h1 {
    letter-spacing: -.4px;
}

.wrap {
    max-width: 520px;
    margin: 0 auto;
}

.card,
.task,
.store-card,
.product {
    background:
        linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
        rgba(17, 24, 39, .78) !important;
    border: 1px solid var(--oh-border) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 14px 40px rgba(0,0,0,.28);
}

.card,
.task,
.store-card {
    border-radius: 22px !important;
}

.product {
    border-radius: 18px !important;
}

.store-switcher select,
.search-form input,
.search-form select,
input,
select {
    background: rgba(15, 23, 42, .82) !important;
    color: #fff !important;
    border: 1px solid rgba(148, 163, 184, .20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.store-switcher select:focus,
.search-form input:focus,
.search-form select:focus,
input:focus,
select:focus {
    outline: none;
    border-color: var(--oh-border-strong) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .16);
}

button,
a.btn,
.search-buttons button {
    box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

a.btn,
button[type="submit"],
.search-buttons button,
.store-switcher button {
    background: linear-gradient(135deg, var(--oh-orange), var(--oh-orange-2)) !important;
    color: #111827 !important;
}

a.btn.secondary,
.status-actions .contacted {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
}

.status-actions .completed,
.badge.green {
    background: rgba(22, 163, 74, .16) !important;
    border-color: rgba(34, 197, 94, .45) !important;
    color: #60f29a !important;
}

.status-actions .processing,
.badge.yellow {
    background: rgba(245, 158, 11, .16) !important;
    border-color: rgba(245, 158, 11, .45) !important;
    color: #fbbf24 !important;
}

.badge {
    background: rgba(31, 41, 55, .84) !important;
    border: 1px solid rgba(148, 163, 184, .16) !important;
}

.section-title {
    color: var(--oh-orange) !important;
}

.mobile-footer {
    background: rgba(10, 12, 20, .90) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(148, 163, 184, .15) !important;
    box-shadow: 0 -18px 45px rgba(0,0,0,.32);
}

.mobile-footer a {
    background: rgba(15, 23, 42, .76) !important;
    border: 1px solid rgba(148, 163, 184, .14) !important;
}

.mobile-footer a.active {
    background: linear-gradient(135deg, var(--oh-orange), var(--oh-orange-2)) !important;
    color: #111827 !important;
    border-color: transparent !important;
}

.pagination a,
.pagination span {
    background: rgba(15, 23, 42, .78) !important;
    border-color: rgba(148, 163, 184, .16) !important;
}

@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
    }
}