/* BIG BEN — Premium interface layer 2.0
   Isolated from business styles so the visual update remains safe to deploy. */

:root {
    --ink: #181315;
    --muted: #756b6d;
    --line: rgba(73, 50, 54, .11);
    --line-strong: rgba(98, 34, 49, .18);
    --surface: rgba(255, 255, 255, .91);
    --surface-solid: #fffdfb;
    --canvas: #f6f2ed;
    --sidebar: #171112;
    --sidebar-soft: #251a1d;
    --wine: #7a2035;
    --wine-dark: #561526;
    --wine-bright: #9b3450;
    --wine-soft: #f5e8eb;
    --gold: #c69442;
    --gold-light: #e0bb74;
    --gold-soft: #fbf1df;
    --green: #20775b;
    --green-soft: #e7f5ef;
    --red: #b33d4b;
    --red-soft: #fae9eb;
    --amber: #9c6718;
    --amber-soft: #fff3dd;
    --shadow-xs: 0 1px 2px rgba(35, 18, 22, .04);
    --shadow-sm: 0 8px 22px rgba(41, 22, 26, .06);
    --shadow: 0 18px 50px rgba(41, 22, 26, .09);
    --shadow-lg: 0 30px 90px rgba(34, 15, 20, .14);
    --radius-sm: 12px;
    --radius: 20px;
    --radius-lg: 28px;
    --sidebar-width: 282px;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.2, .9, .25, 1.25);
}

* { scrollbar-width: thin; scrollbar-color: rgba(122, 32, 53, .24) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 20px; background: rgba(122, 32, 53, .22); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(122, 32, 53, .38); background-clip: padding-box; }
::selection { color: #fff; background: rgba(122, 32, 53, .82); }

html { scroll-behavior: smooth; }
body {
    overflow-x: hidden;
    color: var(--ink);
    background: var(--canvas);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: -.008em;
}

body::after {
    position: fixed;
    z-index: -1;
    inset: 0;
    content: "";
    opacity: .22;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}

.ambient-canvas { position: fixed; z-index: -2; inset: 0; overflow: hidden; pointer-events: none; }
.ambient-canvas span { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .55; animation: ambient-drift 18s var(--ease-out) infinite alternate; }
.ambient-canvas span:nth-child(1) { top: -20vw; right: -10vw; width: 55vw; height: 55vw; background: radial-gradient(circle, rgba(190, 138, 53, .13), transparent 68%); }
.ambient-canvas span:nth-child(2) { bottom: -25vw; left: 10vw; width: 58vw; height: 58vw; background: radial-gradient(circle, rgba(122, 32, 53, .09), transparent 68%); animation-delay: -7s; }
.ambient-canvas span:nth-child(3) { top: 35%; left: 35%; width: 28vw; height: 28vw; background: radial-gradient(circle, rgba(255, 255, 255, .8), transparent 70%); animation-delay: -13s; }

a, button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a, button { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(198, 148, 66, .36);
    outline-offset: 3px;
}
.ui-icon { display: block; width: 20px; height: 20px; flex: 0 0 auto; }

/* Sidebar */
.sidebar {
    width: var(--sidebar-width);
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, .065);
    background:
        radial-gradient(circle at 15% 0, rgba(198, 148, 66, .12), transparent 24%),
        linear-gradient(165deg, #1d1517 0%, #130e10 72%);
    box-shadow: 22px 0 60px rgba(30, 15, 18, .08);
}
.sidebar::before {
    position: absolute;
    top: -80px;
    left: -90px;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(198, 148, 66, .12);
    border-radius: 50%;
    content: "";
    box-shadow: 0 0 0 32px rgba(198, 148, 66, .025), 0 0 0 70px rgba(198, 148, 66, .018);
    pointer-events: none;
}
.brand { position: relative; height: 108px; padding: 0 25px; gap: 13px; border-bottom-color: rgba(255, 255, 255, .07); }
.brand > span:last-child { justify-content: center; }
.brand strong { color: #fffaf4; font-size: 1.08rem; letter-spacing: .18em; line-height: 1; }
.brand small { color: rgba(229, 218, 210, .48); letter-spacing: .08em; }
.brand .brand-eyebrow { margin: 0 0 6px; color: var(--gold-light); font-size: .5rem; font-weight: 750; letter-spacing: .18em; text-transform: uppercase; }
.brand-logo {
    display: block;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    object-fit: contain;
    filter: drop-shadow(0 9px 16px rgba(0, 0, 0, .28));
}
.brand-logo.small { width: 40px; height: 40px; }
.brand-logo.auth-logo { width: 78px; height: 78px; filter: drop-shadow(0 12px 20px rgba(80, 23, 37, .2)); }
.brand-logo.label-logo { width: 52px; height: 52px; filter: none; }
.brand-mark {
    position: relative;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border: 1px solid rgba(224, 187, 116, .62);
    border-radius: 15px;
    color: #fff8eb;
    background: linear-gradient(145deg, rgba(198, 148, 66, .2), rgba(255, 255, 255, .025));
    box-shadow: inset 0 1px rgba(255, 255, 255, .12), 0 10px 30px rgba(0, 0, 0, .22);
}
.brand-mark::after { position: absolute; inset: 4px; border: 1px solid rgba(224, 187, 116, .18); border-radius: 11px; content: ""; }
.brand-mark b { position: relative; z-index: 1; font-family: Georgia, serif; font-size: .9rem; letter-spacing: -.08em; }
.brand-mark.small { width: 34px; height: 34px; border-radius: 11px; }
.brand-mark.small::after { border-radius: 8px; }
.brand-mark.large { width: 64px; height: 64px; border-radius: 20px; color: #fff7e8; background: linear-gradient(145deg, #2c1d20, #160f11); }
.brand-mark.large::after { border-radius: 15px; }
.brand-mark.large b { font-size: 1.12rem; }

.main-nav { position: relative; gap: 4px; padding: 22px 14px 18px; }
.nav-link {
    position: relative;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 13px;
    color: rgba(237, 228, 220, .6);
    font-size: .82rem;
    font-weight: 650;
    transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s var(--ease-out);
}
.nav-link:hover { color: #fff; border-color: rgba(255, 255, 255, .06); background: rgba(255, 255, 255, .045); transform: translateX(3px); }
.nav-link.active {
    color: #fffaf6;
    border-color: rgba(224, 187, 116, .14);
    background: linear-gradient(100deg, rgba(122, 32, 53, .5), rgba(198, 148, 66, .085));
    box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 10px 24px rgba(0, 0, 0, .12);
}
.nav-link.active::before { position: absolute; top: 13px; bottom: 13px; left: -1px; width: 3px; border-radius: 0 5px 5px 0; content: ""; background: linear-gradient(var(--gold-light), var(--gold)); box-shadow: 0 0 16px rgba(198, 148, 66, .6); }
.nav-link-primary { margin: 7px 0 8px; color: #f6e8ce; border-color: rgba(198, 148, 66, .15); background: rgba(198, 148, 66, .07); }
.nav-link-primary .nav-icon { color: #f2ca83; }
.nav-icon { width: 22px; color: rgba(224, 187, 116, .88); }
.nav-icon .ui-icon { width: 18px; height: 18px; }
.nav-label { margin: 19px 15px 7px; color: rgba(225, 213, 204, .3); font-size: .55rem; letter-spacing: .2em; }
.nav-count { min-width: 21px; height: 21px; border: 2px solid #24171a; background: linear-gradient(145deg, #d74c61, #9d273f); box-shadow: 0 4px 12px rgba(179, 61, 75, .35); }

.sidebar-user {
    position: relative;
    margin: 10px 14px max(16px, env(safe-area-inset-bottom));
    padding: 13px;
    border-color: rgba(255, 255, 255, .08);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .018));
    box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}
.sidebar-user:hover { border-color: rgba(198, 148, 66, .18); }
.avatar { color: #fff; background: linear-gradient(145deg, #a0324c, #671a2d); box-shadow: 0 7px 18px rgba(122, 32, 53, .32); }
.sidebar-user-copy strong { color: #fff7f2; }
.sidebar-user > a { display: grid; width: 29px; height: 29px; place-items: center; border-radius: 9px; background: rgba(255, 255, 255, .04); }
.sidebar-user > a .ui-icon { width: 15px; height: 15px; }

/* Content and hierarchy */
.content { position: relative; width: calc(100% - var(--sidebar-width)); max-width: 1780px; margin-left: var(--sidebar-width); padding: 48px clamp(28px, 4vw, 66px) 88px; }
.page-heading { position: relative; align-items: flex-end; margin-bottom: 32px; animation: page-heading-in .7s var(--ease-out) both; }
.page-heading::before { position: absolute; top: -18px; left: -21px; width: 66px; height: 66px; border: 1px solid rgba(198, 148, 66, .16); border-radius: 22px; content: ""; transform: rotate(10deg); opacity: .65; pointer-events: none; }
.page-heading > div:first-child { position: relative; z-index: 1; }
.page-heading h1 { margin-bottom: 9px; color: #191315; font-size: clamp(2rem, 3.2vw, 3rem); font-weight: 780; letter-spacing: -.055em; }
.page-heading p { max-width: 660px; color: #7e7274; font-size: .9rem; }
.eyebrow { margin-bottom: 9px; color: var(--wine); font-size: .61rem; font-weight: 850; letter-spacing: .18em; }
.page-actions { align-items: center; flex-wrap: wrap; }

.card, .metric-card, .store-card {
    border-color: var(--line);
    background: var(--surface);
    box-shadow: var(--shadow-sm), inset 0 1px rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(18px) saturate(120%);
    backdrop-filter: blur(18px) saturate(120%);
}
.card { border-radius: var(--radius); }
.section-block { margin-top: 38px; }
.block-heading { margin-bottom: 17px; }
.block-heading h2 { color: #241a1d; font-size: 1.16rem; font-weight: 760; }
.subtle-label { padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; background: rgba(255, 255, 255, .65); }

/* Buttons */
.button {
    position: relative;
    min-height: 47px;
    overflow: hidden;
    padding: 0 20px;
    border-radius: 13px;
    font-size: .78rem;
    font-weight: 760;
    letter-spacing: .005em;
    box-shadow: var(--shadow-xs);
    transition: transform .24s var(--ease-out), box-shadow .24s ease, border-color .24s ease, background .24s ease;
}
.button::after { position: absolute; top: -50%; left: -80%; width: 42%; height: 200%; content: ""; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .28), transparent); transform: skewX(-18deg); transition: left .65s var(--ease-out); }
.button:hover { transform: translateY(-2px); }
.button:hover::after { left: 135%; }
.button:active { transform: translateY(0) scale(.98); transition-duration: .08s; }
.button-primary { border-color: rgba(255, 255, 255, .08); background: linear-gradient(145deg, #8f2943, #65182c); box-shadow: 0 10px 26px rgba(122, 32, 53, .23), inset 0 1px rgba(255, 255, 255, .15); }
.button-primary:hover { background: linear-gradient(145deg, #9b304b, #721b31); box-shadow: 0 14px 32px rgba(122, 32, 53, .3); }
.button-secondary { border-color: rgba(74, 48, 53, .13); background: rgba(255, 255, 255, .82); box-shadow: 0 6px 18px rgba(40, 22, 25, .05); }
.button-secondary:hover { border-color: rgba(122, 32, 53, .24); background: #fff; }
.button-danger { background: linear-gradient(145deg, #c84c58, #9f2d3e); }
.text-link, .row-action { position: relative; color: var(--wine); font-weight: 780; }
.text-link::after, .row-action::after { position: absolute; right: 100%; bottom: -3px; left: 0; height: 1px; content: ""; background: currentColor; transition: right .25s var(--ease-out); }
.text-link:hover::after, .row-action:hover::after { right: 0; }

/* Metrics */
.metric-grid { gap: 17px; }
.metric-card { position: relative; min-height: 132px; overflow: hidden; padding: 22px; border-radius: 19px; transition: transform .3s var(--ease-out), box-shadow .3s ease, border-color .3s ease; }
.metric-card::after { position: absolute; right: -36px; bottom: -46px; width: 120px; height: 120px; border: 1px solid rgba(122, 32, 53, .07); border-radius: 50%; content: ""; box-shadow: 0 0 0 20px rgba(122, 32, 53, .018); }
.metric-card:hover { z-index: 1; border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-4px); }
.metric-card strong { margin: 6px 0 3px; color: #211719; font-size: clamp(1.35rem, 2vw, 1.68rem); font-weight: 790; letter-spacing: -.05em; }
.metric-card span:not(.metric-icon) { color: #7e7374; font-size: .68rem; font-weight: 700; }
.metric-card small { color: #a09696; }
.metric-icon { position: relative; z-index: 1; width: 47px; height: 47px; border-radius: 15px; box-shadow: inset 0 1px rgba(255, 255, 255, .65); }
.metric-icon.wine { background: linear-gradient(145deg, #f8e9ed, #efd8de); }
.metric-icon.gold { background: linear-gradient(145deg, #fff5e3, #f4e4c5); }
.metric-icon.green { background: linear-gradient(145deg, #eaf8f2, #d9eee5); }
.metric-icon.red { background: linear-gradient(145deg, #fdeff0, #f4dadd); }

/* Store cards */
.store-grid { gap: 16px; }
.store-card { min-height: 118px; overflow: hidden; border-radius: 19px; box-shadow: var(--shadow-xs); }
.store-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: linear-gradient(transparent, var(--gold), transparent); opacity: 0; transition: opacity .25s; }
.store-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); transform: translateY(-4px); }
.store-card:hover::before { opacity: 1; }
.store-number { border: 1px solid rgba(122, 32, 53, .08); background: linear-gradient(145deg, #f8ecef, #f1dfe3); box-shadow: inset 0 1px #fff; }

/* Tables */
.table-card { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.responsive-table { overscroll-behavior-inline: contain; scrollbar-color: rgba(122, 32, 53, .25) transparent; }
table { background: transparent; }
thead { position: relative; z-index: 1; }
th { height: 50px; padding: 13px 18px; color: #887b7d; background: rgba(249, 246, 242, .88); font-size: .58rem; letter-spacing: .1em; }
td { padding: 17px 18px; border-top-color: rgba(79, 52, 57, .08); font-size: .75rem; }
tbody tr { transition: background .2s ease, transform .2s ease; }
tbody tr:hover { background: rgba(250, 244, 242, .7); }
tbody tr:hover td:first-child { box-shadow: inset 3px 0 var(--gold); }
tfoot td { background: #faf5f1; }
.badge { min-height: 26px; padding: 0 9px; border: 1px solid transparent; font-size: .58rem; letter-spacing: .02em; }
.badge-success { border-color: rgba(32, 119, 91, .1); }
.badge-warning { border-color: rgba(156, 103, 24, .12); }
.badge-danger { border-color: rgba(179, 61, 75, .1); }

/* Forms */
.form-card, .narrow-card { padding: 29px; }
.field { gap: 8px; }
.field > span:first-child { color: #55494c; font-size: .66rem; font-weight: 780; letter-spacing: .01em; }
input, select, textarea {
    border-color: rgba(81, 55, 60, .16);
    border-radius: 12px;
    color: #21191b;
    background: rgba(255, 255, 255, .88);
    box-shadow: inset 0 1px 2px rgba(41, 24, 27, .025), 0 1px rgba(255, 255, 255, .8);
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
}
input, select { height: 48px; padding: 0 14px; }
textarea { padding: 14px; }
input:hover, select:hover, textarea:hover { border-color: rgba(122, 32, 53, .26); background: #fff; }
input:focus, select:focus, textarea:focus { border-color: rgba(122, 32, 53, .58); background: #fff; box-shadow: 0 0 0 4px rgba(122, 32, 53, .085), 0 8px 24px rgba(46, 24, 29, .06); }
input:disabled { background: rgba(238, 233, 228, .7); }
.input-prefix b { left: 14px; color: #958889; }
.input-prefix input { padding-left: 42px; }
.form-grid { gap: 18px; }
.divider { background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.section-heading { margin-bottom: 24px; }
.section-heading h2 { color: #261b1e; font-weight: 770; }
.step-number { width: 35px; height: 35px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px; background: linear-gradient(145deg, #912a44, #66182c); box-shadow: 0 8px 18px rgba(122, 32, 53, .2), inset 0 1px rgba(255, 255, 255, .15); }
.target-pill { min-height: 32px; border-color: rgba(198, 148, 66, .22); background: rgba(255, 247, 232, .85); box-shadow: inset 0 1px #fff; }
.expected-cash-box, .sales-total-box { min-height: 82px; padding: 19px 20px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 15px; background: linear-gradient(135deg, #241a1d, #151012); box-shadow: 0 16px 35px rgba(29, 16, 20, .14), inset 0 1px rgba(255, 255, 255, .07); }
.sales-total-box { color: #fff; background: linear-gradient(135deg, #89263f, #5c1729); }
.expected-cash-box span, .sales-total-box span { color: rgba(255, 255, 255, .75); }
.expected-cash-box small { color: rgba(255, 255, 255, .42); }
.confirm-box { border-color: rgba(122, 32, 53, .12); border-radius: 15px; background: linear-gradient(135deg, rgba(249, 236, 239, .9), rgba(255, 251, 247, .9)); }
.count-stepper { grid-template-columns: 38px 64px 38px; }
.count-stepper button { height: 41px; border-color: rgba(122, 32, 53, .15); color: var(--wine); background: #fbf7f4; transition: color .18s, background .18s, transform .12s; }
.count-stepper button:hover { color: #fff; background: var(--wine); }
.count-stepper button:active { transform: scale(.92); }
.count-stepper input { height: 41px; }
.banknote { border-color: rgba(177, 126, 43, .28); background: linear-gradient(145deg, #fff9ea, #f2dfb8); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .48), 0 5px 14px rgba(129, 89, 25, .08); }

/* Summaries and operational panels */
.summary-grid { gap: 13px; }
.summary-item { position: relative; overflow: hidden; min-height: 112px; border-color: var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(255, 255, 255, .92), rgba(249, 246, 242, .84)); box-shadow: var(--shadow-xs); }
.summary-item::after { position: absolute; right: -18px; bottom: -30px; width: 70px; height: 70px; border: 1px solid currentColor; border-radius: 50%; content: ""; opacity: .06; }
.summary-item.accent { border-color: rgba(122, 32, 53, .3); background: linear-gradient(145deg, #8e2943, #61172a); box-shadow: 0 13px 30px rgba(122, 32, 53, .18); }
.summary-item.accent-soft { background: linear-gradient(145deg, #faedf0, #f1dce1); }
.summary-item.warning-soft { background: linear-gradient(145deg, #fff7e8, #f7e8c9); }
.difference-positive { background: linear-gradient(145deg, #edf9f4, #def1e9); }
.difference-negative { background: linear-gradient(145deg, #fff0f1, #f5dfe2); }
.selected-sale-summary { gap: 10px; }
.selected-sale-summary > div { border-radius: 13px; background: rgba(250, 247, 243, .9); }
.selected-sale-summary .featured { background: linear-gradient(145deg, #8b2841, #60172a); box-shadow: 0 9px 22px rgba(122, 32, 53, .18); }
.destination { min-height: 28px; align-items: center; padding: 5px 9px; border: 1px solid transparent; border-radius: 8px; }

/* Reports and special areas */
.filter-card { padding: 18px; border-radius: 18px; }
.results-bar { margin: 22px 3px 12px; }
.report-period { margin-top: 25px; }
.report-chart-card, .annual-summary-card { padding: 27px; }
.monthly-bars { height: 300px; }
.bar-track { border-radius: 9px 9px 4px 4px; background: linear-gradient(#f1ece7, #ebe4dc); }
.bar-track span { border-radius: 9px 9px 4px 4px; background: linear-gradient(180deg, #b64a65, #741f35 72%, #5d172a); box-shadow: 0 8px 18px rgba(122, 32, 53, .17); }
.month-bar:hover .bar-track span { background: linear-gradient(180deg, #e2ba72, #bd8530); }
.annual-value-list > div { border-radius: 13px; background: rgba(251, 248, 245, .9); }
.annual-value-list .featured { border-color: transparent; background: linear-gradient(145deg, #8b2841, #5e1729); box-shadow: 0 12px 28px rgba(122, 32, 53, .2); }
.comparison-banner { border-radius: 15px; box-shadow: var(--shadow-xs); }
.envelope-label { border-color: rgba(198, 148, 66, .28); border-radius: 20px; background: linear-gradient(155deg, #fffefb, #faf2e5); box-shadow: var(--shadow); }
.label-total { border-radius: 14px; background: linear-gradient(145deg, #8c2942, #5a1728); box-shadow: 0 12px 24px rgba(122, 32, 53, .2); }
.envelope-workflow, .danger-zone, .detail-card { border-radius: var(--radius); }
.timeline-event .audit-dot { box-shadow: 0 0 0 5px var(--wine-soft), 0 0 18px rgba(122, 32, 53, .18); }
.notification-item, .notification-preview, .replenishment-card { border-radius: 17px; }
.notification-item:hover { box-shadow: var(--shadow); }
.notification-item.unread { border-left-width: 3px; }
.notification-icon { border-radius: 13px; }
.backup-status-card { border-radius: 18px; }
.info-banner { border-color: rgba(198, 148, 66, .2); border-radius: 15px; background: linear-gradient(135deg, rgba(255, 249, 238, .92), rgba(255, 255, 255, .86)); }
.rule-card { position: relative; overflow: hidden; }
.rule-card::after { position: absolute; right: -50px; bottom: -50px; width: 150px; height: 150px; border: 1px solid rgba(198, 148, 66, .1); border-radius: 50%; content: ""; box-shadow: 0 0 0 28px rgba(198, 148, 66, .025); }

/* Authentication */
.auth-shell { background: #140e10; }
.auth-shell::before { opacity: .14; background-size: 68px 68px; mask-image: linear-gradient(to bottom, black, transparent 85%); }
.auth-shell .ambient-canvas { z-index: 0; }
.auth-shell .ambient-canvas span:nth-child(1) { top: -25vw; right: -8vw; background: radial-gradient(circle, rgba(198, 148, 66, .24), transparent 65%); }
.auth-shell .ambient-canvas span:nth-child(2) { bottom: -30vw; left: -10vw; background: radial-gradient(circle, rgba(150, 40, 66, .24), transparent 66%); }
.auth-content { padding: max(30px, env(safe-area-inset-top)) 18px max(30px, env(safe-area-inset-bottom)); }
.auth-card { position: relative; width: min(100%, 460px); overflow: hidden; padding: 40px; border-color: rgba(255, 255, 255, .55); border-radius: 27px; background: rgba(255, 253, 250, .96); box-shadow: 0 40px 120px rgba(0, 0, 0, .42), inset 0 1px #fff; animation: auth-card-in .8s var(--ease-out) both; }
.auth-card::before { position: absolute; top: -90px; right: -80px; width: 210px; height: 210px; border: 1px solid rgba(198, 148, 66, .18); border-radius: 50%; content: ""; box-shadow: 0 0 0 32px rgba(198, 148, 66, .035); }
.auth-brand { position: relative; margin-bottom: 38px; }
.auth-brand strong { letter-spacing: .17em; }
.auth-heading { position: relative; }
.auth-heading h1, .install-card h1 { font-size: 1.95rem; letter-spacing: -.05em; }
.auth-footnote { margin-top: 24px; }
.password-field button { height: 48px; }

/* Toasts and feedback */
.toast { top: 25px; right: 28px; min-height: 58px; border-color: rgba(76, 51, 56, .12); border-left-width: 0; border-radius: 15px; background: rgba(255, 255, 255, .94); box-shadow: 0 24px 60px rgba(28, 15, 18, .18); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); animation: toast-premium-in .5s var(--ease-out) both; }
.toast::before { width: 9px; height: 9px; border-radius: 50%; content: ""; background: var(--gold); box-shadow: 0 0 0 5px var(--gold-soft); }
.toast-success::before { background: var(--green); box-shadow: 0 0 0 5px var(--green-soft); }
.toast-danger::before { background: var(--red); box-shadow: 0 0 0 5px var(--red-soft); }
.toast-hide { opacity: 0; transform: translateY(-12px) scale(.98); }
.alert { border-radius: 13px; }
.empty-state { min-height: 280px; }
.empty-icon { border: 1px solid rgba(122, 32, 53, .09); border-radius: 17px; background: linear-gradient(145deg, #faecef, #f1dfe3); box-shadow: inset 0 1px #fff; }

/* Page reveal — only compositor-friendly properties */
.content > :not(.toast) { animation: surface-in .62s var(--ease-out) both; }
.content > :nth-child(2) { animation-delay: .045s; }
.content > :nth-child(3) { animation-delay: .09s; }
.content > :nth-child(4) { animation-delay: .135s; }
.content > :nth-child(5) { animation-delay: .18s; }
.metric-grid .metric-card, .store-grid .store-card, .notification-preview-grid > *, .notification-list > *, .replenishment-list > * { opacity: 0; animation: item-reveal .55s var(--ease-out) forwards; }
.metric-grid > :nth-child(2), .store-grid > :nth-child(2), .notification-preview-grid > :nth-child(2) { animation-delay: .06s; }
.metric-grid > :nth-child(3), .store-grid > :nth-child(3), .notification-preview-grid > :nth-child(3) { animation-delay: .12s; }
.metric-grid > :nth-child(4), .store-grid > :nth-child(4) { animation-delay: .18s; }
.is-observed { opacity: 0; transform: translateY(15px); }
.is-observed.is-visible { opacity: 1; transform: none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.button-ripple { position: absolute; width: 12px; height: 12px; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .38); transform: translate(-50%, -50%) scale(0); animation: ripple .6s ease-out forwards; }

@keyframes ambient-drift { to { transform: translate3d(2.5vw, -1.5vw, 0) scale(1.06); } }
@keyframes page-heading-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes surface-in { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: none; } }
@keyframes item-reveal { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes auth-card-in { from { opacity: 0; transform: translateY(22px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes toast-premium-in { from { opacity: 0; transform: translateY(-14px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ripple { to { opacity: 0; transform: translate(-50%, -50%) scale(18); } }

/* Medium screens */
@media (max-width: 1180px) {
    :root { --sidebar-width: 258px; }
    .content { padding-inline: 28px; }
    .metric-card { min-height: 116px; }
}

/* Mobile and tablet */
@media (max-width: 900px) {
    :root { --sidebar-width: min(86vw, 320px); }
    body { background: #f7f3ef; }
    body.menu-open { overflow: hidden; }
    .sidebar { padding-top: env(safe-area-inset-top); transform: translateX(calc(-100% - 20px)); box-shadow: 26px 0 80px rgba(18, 8, 11, .38); transition: transform .38s var(--ease-out); }
    .menu-open .sidebar { transform: translateX(0); }
    .sidebar-overlay { background: rgba(22, 12, 15, .54); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: opacity .3s ease, visibility .3s; }
    .brand { height: 96px; }
    .mobile-header {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        height: calc(68px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 16px 0;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
        background: rgba(24, 17, 19, .93);
        box-shadow: 0 8px 28px rgba(31, 16, 20, .12);
        -webkit-backdrop-filter: blur(20px) saturate(130%);
        backdrop-filter: blur(20px) saturate(130%);
        transition: box-shadow .25s, background .25s;
    }
    .mobile-header.is-scrolled { background: rgba(20, 14, 16, .975); box-shadow: 0 10px 35px rgba(31, 16, 20, .22); }
    .mobile-brand { gap: 9px; color: #fff8f1; font-size: .69rem; letter-spacing: .16em; }
    .mobile-brand > span:last-child { display: flex; flex-direction: column; }
    .mobile-brand small { margin-top: 2px; color: rgba(255, 255, 255, .4); font-size: .42rem; letter-spacing: .2em; }
    .icon-button { width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, .06); border-radius: 13px; background: rgba(255, 255, 255, .035); }
    .icon-button .ui-icon { width: 20px; height: 20px; }
    .content { width: 100%; margin: 0; padding: calc(94px + env(safe-area-inset-top)) 20px calc(112px + env(safe-area-inset-bottom)); }
    .page-heading { margin-bottom: 25px; }
    .page-heading::before { top: -12px; left: -12px; width: 52px; height: 52px; }
    .page-heading h1 { font-size: clamp(1.8rem, 7vw, 2.35rem); }
    .page-heading p { font-size: .82rem; }
    .bottom-nav {
        right: 12px;
        bottom: max(10px, env(safe-area-inset-bottom));
        left: 12px;
        grid-template-columns: repeat(5, 1fr);
        height: 72px;
        padding: 5px 6px;
        border-color: rgba(255, 255, 255, .09);
        border-radius: 22px;
        background: rgba(24, 17, 19, .95);
        box-shadow: 0 20px 55px rgba(23, 11, 14, .32), inset 0 1px rgba(255, 255, 255, .06);
        -webkit-backdrop-filter: blur(22px) saturate(130%);
        backdrop-filter: blur(22px) saturate(130%);
    }
    .bottom-nav a, .bottom-nav button { display: flex; min-width: 0; align-items: center; justify-content: center; flex-direction: column; gap: 4px; padding: 0; border: 0; border-radius: 15px; color: rgba(238, 226, 218, .5); background: transparent; font: inherit; font-size: .52rem; font-weight: 700; transition: color .2s, background .2s, transform .2s; }
    .bottom-nav a > span, .bottom-nav button > span { color: inherit; font-size: inherit; line-height: inherit; }
    .bottom-nav .ui-icon { width: 19px; height: 19px; color: rgba(224, 187, 116, .78); }
    .bottom-nav a.active { color: #fff; background: rgba(255, 255, 255, .055); }
    .bottom-nav a.active .ui-icon { color: #f0c77d; filter: drop-shadow(0 0 8px rgba(198, 148, 66, .35)); }
    .bottom-nav .bottom-action { top: -15px; width: 66px; height: 66px; border: 4px solid #f7f3ef; border-radius: 21px; color: #fff; background: linear-gradient(145deg, #982f49, #64172b); box-shadow: 0 13px 28px rgba(122, 32, 53, .38), inset 0 1px rgba(255, 255, 255, .18); }
    .bottom-nav .bottom-action .ui-icon { width: 23px; height: 23px; color: #fff; }
    .bottom-nav a:active, .bottom-nav button:active { transform: scale(.92); }
    .detail-layout, .settings-layout { gap: 20px; }
    .envelope-label { width: min(100%, 430px); margin-inline: auto; }
}

@media (max-width: 680px) {
    .content { padding-right: 14px; padding-left: 14px; }
    .page-heading { gap: 18px; }
    .page-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .page-actions > *, .page-actions form, .page-actions .button { width: 100%; }
    .button { min-height: 49px; }
    input, select { height: 50px; font-size: 16px; }
    textarea { font-size: 16px; }
    .metric-grid { gap: 11px; }
    .metric-card { min-height: 103px; padding: 17px; }
    .metric-card strong { font-size: 1.38rem; }
    .metric-icon { width: 43px; height: 43px; }
    .card { border-radius: 17px; }
    .form-card, .detail-card, .narrow-card, .report-chart-card, .annual-summary-card { padding: 19px 16px; }
    .store-card { border-radius: 16px; }
    .filter-card { padding: 15px; }
    .filter-form, .report-filter-form { grid-template-columns: 1fr; }
    .filter-form .field, .filter-form .field:nth-of-type(n+3), .filter-form .button, .report-filter-form > * { grid-column: auto; }
    .report-filter-form .button { width: 100%; }
    .selected-sale-summary, .payment-summary { grid-template-columns: 1fr 1fr; }
    .selected-sale-summary > div { min-height: 74px; }
    .cash-table { min-width: 710px; }
    .cash-table-wrap, .responsive-table { margin-right: -16px; margin-left: -16px; padding-right: 16px; padding-left: 16px; }
    .cash-table-wrap::after { position: sticky; right: 0; display: block; width: 20px; height: 1px; content: ""; }
    .sticky-actions { bottom: calc(91px + env(safe-area-inset-bottom)); border-top-color: var(--line); background: rgba(255, 253, 251, .94); box-shadow: 0 -12px 35px rgba(31, 17, 21, .08); }
    .sticky-actions .button { min-width: 0; padding-inline: 12px; }
    .summary-item { min-height: 92px; }
    .replenishment-card { padding: 18px 18px 44px; }
    .notification-item { grid-template-columns: 39px 1fr 16px; padding: 15px; }
    .auth-card { padding: 30px 23px; border-radius: 23px; }
    .auth-heading h1, .install-card h1 { font-size: 1.72rem; }
    .toast { top: calc(12px + env(safe-area-inset-top)); right: 12px; left: 12px; }
}

@media (max-width: 390px) {
    .content { padding-inline: 11px; }
    .page-heading h1 { font-size: 1.72rem; }
    .metric-card { padding: 15px; }
    .metric-icon { width: 40px; height: 40px; }
    .metric-card strong { font-size: 1.24rem; }
    .selected-sale-summary, .payment-summary { grid-template-columns: 1fr; }
    .bottom-nav { right: 8px; left: 8px; }
    .bottom-nav a, .bottom-nav button { font-size: .47rem; }
}

@media (hover: none) {
    .metric-card:hover, .store-card:hover, .button:hover { transform: none; }
    .nav-link:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .ambient-canvas { display: none; }
    .metric-grid .metric-card, .store-grid .store-card, .notification-preview-grid > *, .notification-list > *, .replenishment-list > * { opacity: 1; }
}

@media print {
    .ambient-canvas { display: none !important; }
    .page-reports .content { width: 100%; }
}

/* 2.3.14 — divergência financeira */
.difference-warning { background: linear-gradient(145deg, #fff7e8, #f7e8c9); }