:root {
    --ice-bg: #ebf4fb;
    --ice-panel: rgba(255, 255, 255, 0.45);
    --ice-control: rgba(255, 255, 255, 0.35);
    --ice-button: rgba(255, 255, 255, 0.65);
    --ice-border: rgba(255, 255, 255, 0.65);
    --ice-text: #2c4a6f;
    --ice-muted: #6b87a2;
    --ice-blue: #418fca;
    --ice-shadow: 0 12px 32px rgba(77, 137, 186, 0.12);
    --ice-radius: 20px;
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    color: var(--ice-text) !important;
    background: radial-gradient(circle at 12% 8%, rgba(255,255,255,.95), transparent 34%), radial-gradient(circle at 90% 82%, rgba(164,211,241,.55), transparent 38%), linear-gradient(135deg, #ebf4fb 0%, #d1e7f8 52%, #f8fafc 100%) !important;
    background-attachment: fixed;
    overflow-x: hidden;
}

body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .42;
    background-image: linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
    background-size: 42px 42px; mask-image: linear-gradient(to bottom, black, transparent 75%);
}

.card, .login-card, .sidebar, .modal-content, .container > .card, .utc-clock-bar {
    background: var(--ice-panel) !important;
    border: 1px solid var(--ice-border) !important;
    box-shadow: var(--ice-shadow) !important;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.card, .login-card, .container > .card { border-radius: var(--ice-radius) !important; }
h2, h3, .header-title h2 { color: var(--ice-text) !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
.subtitle, label, .input-group label, .text-muted, .back-link, .back-btn { color: var(--ice-muted) !important; }
input, select, textarea {
    min-height: 44px; color: var(--ice-text) !important; background: var(--ice-control) !important;
    border: 1px solid rgba(255,255,255,.5) !important; border-radius: 12px !important;
    box-shadow: inset 0 2px 8px rgba(77,137,186,.08); padding: 12px 14px !important;
}
input::placeholder { color: #5a738e !important; opacity: .86; }
input:focus, select:focus, textarea:focus { border-color: rgba(65,143,202,.65) !important; box-shadow: 0 0 0 4px rgba(65,143,202,.13), inset 0 2px 8px rgba(77,137,186,.08) !important; }
button, .nav-btn, .back-btn, .btn-add, .btn-submit, .inline-btn {
    min-height: 44px; border-radius: 12px !important; border: 1px solid rgba(255,255,255,.8) !important;
    color: var(--ice-text) !important; background: var(--ice-button) !important; box-shadow: none !important;
}
button:hover, .nav-btn:hover, .back-btn:hover, .btn-add:hover, .inline-btn:hover { background: rgba(255,255,255,.9) !important; box-shadow: 0 4px 16px rgba(135,180,220,.25) !important; transform: translateY(-1px); }
button[type="submit"], .btn-submit { background: linear-gradient(135deg, #4b9bd2, #6ab6df) !important; color: #fff !important; border-color: rgba(255,255,255,.72) !important; }
.nav-btn.blue, .nav-btn.green, .nav-btn.purple { background: rgba(255,255,255,.58) !important; color: var(--ice-text) !important; border-color: var(--ice-border) !important; }
.section-tag, .utc-clock-bar strong { color: var(--ice-blue) !important; }
.back-link:hover { color: var(--ice-blue) !important; }
.event-row, #revenue_fields_wrapper { background: rgba(255,255,255,.26) !important; border-color: rgba(255,255,255,.6) !important; }
.table-container { background: rgba(255,255,255,.25) !important; border-color: rgba(255,255,255,.6) !important; overflow-x: auto; }
th { background: rgba(255,255,255,.28) !important; color: var(--ice-muted) !important; }
td { border-color: rgba(255,255,255,.5) !important; }
.status-200 { background: rgba(54,178,125,.16) !important; color: #187c5a !important; }
.status-pending { background: rgba(65,143,202,.16) !important; color: #2875a6 !important; }
.status-error, .danger-btn { color: #ba4960 !important; }
.modal-overlay, #loader-overlay { background: rgba(211,231,246,.58) !important; backdrop-filter: blur(12px) !important; }
.spinner { border-color: rgba(65,143,202,.18) !important; border-top-color: var(--ice-blue) !important; }
.sidebar { width: 264px !important; transition: width .3s ease, transform .3s ease; }
.sidebar-brand { padding: 28px 24px !important; }
.sidebar-brand h2 { font-size: 22px !important; }
.sidebar-nav { padding: 10px 14px !important; }
.sidebar-nav-item { color: var(--ice-muted) !important; min-height: 48px; }
.sidebar-nav-item:hover, .sidebar-nav-item.active { background: rgba(255,255,255,.62) !important; color: var(--ice-text) !important; }
.sidebar-meta { border-color: rgba(255,255,255,.5) !important; }
.logout-link { color: #ba4960 !important; }
.main-content { margin-left: 264px !important; max-width: none !important; padding: 40px clamp(20px, 5vw, 64px) 80px !important; transition: margin-left .3s ease; }
.sidebar-toggle, .mobile-menu, .sidebar-backdrop { display: none; }

@media (min-width: 769px) {
    body.sidebar-collapsed .sidebar { width: 76px !important; }
    body.sidebar-collapsed .main-content { margin-left: 76px !important; }
    body.sidebar-collapsed .sidebar-brand h2 { font-size: 0 !important; justify-content: center; }
    body.sidebar-collapsed .sidebar-brand h2::before { content: "IP"; font-size: 18px; }
    body.sidebar-collapsed .sidebar-nav-item { justify-content: center; padding-inline: 8px; font-size: 0; }
    body.sidebar-collapsed .sidebar-nav-item::before { font-size: 18px; line-height: 1; }
    body.sidebar-collapsed .sidebar-nav-item:nth-child(1)::before { content: "↗"; }
    body.sidebar-collapsed .sidebar-nav-item:nth-child(2)::before { content: "▣"; }
    body.sidebar-collapsed .sidebar-nav-item:nth-child(3)::before { content: "▤"; }
    body.sidebar-collapsed .sidebar-nav-item:nth-child(4)::before { content: "◇"; }
    body.sidebar-collapsed .sidebar-nav-item:nth-child(5)::before { content: "≡"; }
    body.sidebar-collapsed .sidebar-meta { padding-inline: 10px; text-align: center; }
    body.sidebar-collapsed .user-badge { font-size: 0; }
    body.sidebar-collapsed .logout-link { font-size: 0; }
    body.sidebar-collapsed .logout-link::before { content: "↗"; font-size: 18px; }
    .sidebar-toggle { display: flex; position: fixed; z-index: 110; top: 18px; left: 242px; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border-radius: 50% !important; transition: left .3s ease; }
    body.sidebar-collapsed .sidebar-toggle { left: 54px; }
}

@media (max-width: 768px) {
    body { padding-bottom: env(safe-area-inset-bottom); }
    .sidebar { width: min(294px, 88vw) !important; transform: translateX(-105%); z-index: 200; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    .main-content { margin-left: 0 !important; padding: 72px 16px calc(80px + env(safe-area-inset-bottom)) !important; width: 100%; }
    .mobile-menu { display: flex; position: fixed; top: 16px; left: 16px; z-index: 150; width: 44px; height: 44px; align-items: center; justify-content: center; padding: 0; border-radius: 50% !important; }
    .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 190; background: rgba(91,140,174,.18); opacity: 0; pointer-events: none; transition: opacity .3s ease; backdrop-filter: blur(5px); }
    body.sidebar-open .sidebar-backdrop { opacity: 1; pointer-events: auto; }
    .sidebar-close { display: block !important; position: absolute; top: 16px; right: 16px; }
    .card, .login-card, .container > .card { padding: 24px !important; }
    .nav-actions { grid-template-columns: 1fr !important; gap: 10px !important; }
    .event-row { grid-template-columns: 1fr !important; }
    .btn-row, .header-title { flex-direction: column; align-items: stretch !important; }
    .header-title { gap: 12px; }
    .header-title h2 { font-size: 18px; }
    .utc-clock-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)) !important; }
    .utc-clock-bar span { display: block; }
}