:root {
    --os-primary: #181c32;
    --os-primary-soft: #252b48;
    --os-primary-muted: #3f4666;
    --os-accent: #ff7a00;
    --os-accent-hover: #ff8a1f;
    --os-accent-soft: #fff2e5;
    --os-bg: #f5f7fa;
    --os-bg-soft: #eef2f7;
    --os-surface: #ffffff;
    --os-surface-muted: #f8fafc;
    --os-border: #e5e7eb;
    --os-border-strong: #d8dde7;
    --os-text: #181c32;
    --os-muted: #6b7280;
    --os-success: #169b62;
    --os-danger: #dc2626;
    --os-warning: #f59e0b;
    --os-radius-sm: 8px;
    --os-radius-md: 12px;
    --os-radius-lg: 18px;
    --os-radius-xl: 24px;
    --os-shadow-sm: 0 6px 16px rgba(24, 28, 50, .08);
    --os-shadow-card: 0 18px 45px rgba(24, 28, 50, .12);
    --os-shadow-accent: 0 14px 28px rgba(255, 122, 0, .24);
    --os-hero-gradient:
        radial-gradient(ellipse 140% 120% at 0% 0%, rgba(255, 200, 130, .45) 0%, transparent 55%),
        linear-gradient(
            118deg,
            #ff8410 0%,
            #ff6a14 26%,
            #e84820 52%,
            #1f6fde 92%,
            #0f4fd0 100%
        );
    --os-hero-shadow: 0 16px 40px rgba(24, 40, 88, .16);
    --os-focus-ring: 0 0 0 .2rem rgba(255, 122, 0, .18);
    --os-font-family: "Roboto Condensed", Arial, sans-serif;
}

body {
    font-family: var(--os-font-family);
}

.os-card {
    background: var(--os-surface);
    border: 1px solid var(--os-border);
    border-radius: var(--os-radius-lg);
    box-shadow: var(--os-shadow-card);
}

.os-btn-primary {
    align-items: center;
    background: linear-gradient(180deg, var(--os-accent-hover), var(--os-accent));
    border: 0;
    border-radius: var(--os-radius-md);
    box-shadow: var(--os-shadow-accent);
    color: #fff;
    display: inline-flex;
    gap: 8px;
    font-weight: 700;
    justify-content: center;
    letter-spacing: .2px;
    min-height: 44px;
    padding: 10px 18px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.os-btn-primary:hover,
.os-btn-primary:focus {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

.os-btn-primary:focus {
    box-shadow: var(--os-shadow-accent), var(--os-focus-ring);
    outline: none;
}

.os-btn-secondary {
    align-items: center;
    background: var(--os-surface);
    border: 1px solid var(--os-border-strong);
    border-radius: var(--os-radius-md);
    color: var(--os-primary);
    display: inline-flex;
    gap: 8px;
    font-weight: 700;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    text-decoration: none;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}

.os-btn-secondary:hover,
.os-btn-secondary:focus {
    background: var(--os-surface-muted);
    border-color: var(--os-accent);
    color: var(--os-accent);
    text-decoration: none;
}

.os-form-control {
    background: var(--os-surface);
    border: 1px solid var(--os-border-strong);
    border-radius: var(--os-radius-md);
    color: var(--os-text);
    min-height: 44px;
    transition: border-color .18s ease, box-shadow .18s ease;
    width: 100%;
}

.os-form-control:focus {
    border-color: var(--os-accent);
    box-shadow: var(--os-focus-ring);
    outline: none;
}