@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&family=Syne:wght@400..800&display=swap');

/* ═══════════════════════════════════════════════════════════════
   GESTOR APOLLO v5 — FINAL PRODUCTION BUILD
   DESIGN: APOLLO SILENT LUXURY
   White BG | Black & White ruled | Glassmorphism (grayscale blur)
   Minimal orange accent via var(--primary)
   No Tailwind — Pure CSS Custom Properties
   ═══════════════════════════════════════════════════════════════ */

/* ─── DESIGN TOKENS — Apollo Universal System ─── */
:root {
    color-scheme: light;

    /* ── Fonts ── */
    --ff-main:  "Space Grotesk", system-ui, -apple-system, sans-serif;
    --ff-mono:  "Space Mono", monospace;
    --ff-fun:   "Syne", sans-serif;

    /* ── Brand ── */
    --primary:   #f45f00;
    --primary-l: rgba(244,95,0,.08);
    --primary-m: rgba(244,95,0,.18);

    /* ── Text ── */
    --txt-rgb:           19, 21, 23;
    --txt-color:         rgba(var(--txt-rgb), 0.77);
    --txt-color-hover:   rgba(var(--txt-rgb), 0.90);
    --txt-color-heading: var(--txt-color-hover);
    --muted:             rgba(var(--txt-rgb), 0.45);
    --muted-txt:         rgba(var(--txt-rgb), 0.30);

    /* ── White ramp ── */
    --white-1:  rgba(255,255,255,1);
    --white-2:  rgba(0,0,0,0.01);
    --white-3:  rgba(0,0,0,0.02);
    --white-4:  rgba(0,0,0,0.04);
    --white-5:  rgba(0,0,0,0.06);
    --white-6:  rgba(0,0,0,0.08);
    --white-7:  rgba(0,0,0,0.10);
    --white-8:  rgba(0,0,0,0.12);
    --white-9:  rgba(0,0,0,0.16);
    --white-10: rgba(0,0,0,0.18);
    --white-11: rgba(0,0,0,0.20);
    --white-12: rgba(0,0,0,0.22);
    --white-13: rgba(0,0,0,0.24);
    --white-14: rgba(0,0,0,0.26);
    --white-15: rgba(0,0,0,0.28);
    --white-16: rgba(0,0,0,0.30);
    --white-17: rgba(0,0,0,0.32);
    --white-18: rgba(0,0,0,0.34);
    --white-19: rgba(0,0,0,0.36);
    --white-20: rgba(0,0,0,0.38);

    /* ── Gray ramp ── */
    --gray-1:  rgba(0,0,0,0.40);
    --gray-2:  rgba(0,0,0,0.42);
    --gray-3:  rgba(0,0,0,0.44);
    --gray-4:  rgba(0,0,0,0.46);
    --gray-5:  rgba(0,0,0,0.48);
    --gray-6:  rgba(0,0,0,0.50);
    --gray-7:  rgba(0,0,0,0.52);
    --gray-8:  rgba(0,0,0,0.54);
    --gray-9:  rgba(0,0,0,0.56);
    --gray-10: rgba(0,0,0,0.58);

    /* ── Black ramp ── */
    --black-1:  #121214;
    --black-2:  #0f0f11;
    --black-3:  #0c0c0d;
    --black-4:  #0a0a0a;
    --black-5:  #090909;
    --black-10: #000;

    /* ── Semantic Surfaces ── */
    --bg:            var(--white-1);
    --surface:       var(--white-4);
    --surface-hover: var(--white-5);
    --bg-neutral:    var(--white-4);
    --glass:         var(--white-4);

    /* ── Borders ── */
    --border:       var(--white-9);
    --border-hover: var(--white-12);

    /* ── Radius ── */
    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius:    16px;
    --radius-lg: 24px;
    --pill:      100px;

    /* ── Spacing ── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;

    /* ── Motion ── */
    --ease-default:  cubic-bezier(.16, 1, .3, 1);
    --ease-smooth:   cubic-bezier(.25, 1, .5, 1);
    --ease-snappy:   cubic-bezier(.2, .9, .3, 1);
    --transition-ui: .25s var(--ease-default);

    /* ── Layout ── */
    --hd:  52px;
    --tab: 46px;

    /* ── Status ── */
    --s-plan:   #6366f1;
    --s-prep:   #d97706;
    --s-live:   #16a34a;
    --s-done:   #64748b;
    --s-cancel: #dc2626;

    /* ── Priority ── */
    --p-urg:  #dc2626;
    --p-high: #ea580c;
    --p-med:  #d97706;
    --p-low:  #94a3b8;

    /* ── Roles ── */
    --role-adm:     #7c3aed;
    --role-gestor:  #121214;
    --role-tgestor: #64748b;
    --role-team:    #94a3b8;

    /* ── Glass ── */
    --glass-bg:     rgba(255,255,255,.72);
    --glass-blur:   blur(20px);
    --glass-border: rgba(255,255,255,.18);

    /* ── Backwards-compat aliases ── */
    --sans:    var(--ff-main);
    --mono:    var(--ff-mono);
    --display: var(--ff-fun);
    --sf:      var(--white-4);
    --sf2:     var(--white-5);
    --sf3:     var(--white-6);
    --ink:     var(--black-1);
    --smoke:   var(--gray-6);
    --ghost:   var(--gray-1);
    --mist:    var(--white-20);
    --faint:   var(--white-14);
    --whisper: var(--white-12);
    --brd:     var(--border);
    --brd-h:   var(--border-hover);
    --r:       var(--radius);
    --r-lg:    var(--radius-lg);
    --ease:    var(--ease-default);
}


/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; outline: none; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}
a { text-decoration: none; color: inherit; }
button { border: none; background: none; cursor: pointer; font-family: inherit; font-size: inherit; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--primary-m); }
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--brd-h); border-radius: 4px; }


/* ─── APOLLO ICON SYSTEM (SVG mask) ─── */
[data-apollo-icon] {
    display: inline-flex;
    width: 20px; height: 20px;
    background: currentColor;
    -webkit-mask-image: var(--apollo-mask);
    mask-image: var(--apollo-mask);
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    vertical-align: middle;
    flex-shrink: 0;
}
.tab [data-apollo-icon] { width: 22px; height: 22px; }


/* ─── TOOLTIPS ─── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%; transform: translateX(-50%) translateY(4px);
    font-family: var(--mono); font-size: 9px; letter-spacing: .02em;
    color: #fff; background: var(--ink);
    padding: 4px 10px; border-radius: 6px;
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity .15s, transform .15s var(--ease);
    z-index: 999;
}
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
[data-tooltip-pos="bottom"]::after { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-4px); }
[data-tooltip-pos="bottom"]:hover::after { transform: translateX(-50%) translateY(0); }


/* ─── LOADER ─── */
.loader {
    position: fixed; inset: 0;
    background: var(--bg);
    z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
    transition: opacity .5s, transform .5s var(--ease);
}
.loader.out { opacity: 0; transform: scale(1.02); pointer-events: none; }
.loader-logo { display: flex; align-items: baseline; gap: 3px; }
.loader-logo .gl { font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: -.03em; color: var(--ink); }
.loader-logo .ga { font-family: var(--display); font-size: 12px; color: var(--ink); }
.loader-bar { width: 80px; height: 1.5px; background: var(--sf2); border-radius: 2px; overflow: hidden; position: relative; margin-top: 8px; }
.loader-bar::after {
    content: ''; position: absolute; left: 0; top: 0;
    height: 100%; width: 30%;
    background: var(--ink); border-radius: 2px;
    animation: lslide .7s ease-in-out infinite alternate;
}
@keyframes lslide { from { left: 0; } to { left: 70%; } }


/* ═══════════════════════════════════════
   HEADER — Sticky glassmorphism bar
   ═══════════════════════════════════════ */
.hd {
    position: sticky; top: 0; z-index: 200;
    height: var(--hd);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--brd);
    display: flex; align-items: center;
    padding: 0 16px; gap: 10px;
}
.hd-logo { display: flex; align-items: baseline; gap: 3px; flex-shrink: 0; }
.hd-logo .gl { font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; color: var(--ink); }
.hd-logo .ga { font-family: var(--display); font-size: 10px; color: var(--ink); }

/* Event selector */
.hd-evento-wrap { position: relative; flex-shrink: 0; }
.hd-evento-select {
    height: 30px;
    background: var(--sf); border: 1px solid var(--brd); border-radius: var(--pill);
    padding: 0 28px 0 10px;
    font-family: var(--mono); font-size: 10px; color: var(--smoke);
    appearance: none; cursor: pointer; transition: .15s; min-width: 180px;
}
.hd-evento-select:focus { border-color: var(--brd-h); color: var(--ink); background: var(--bg); }
.hd-evento-arrow { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--mist); pointer-events: none; }

/* Search */
.hd-search { flex: 1; max-width: 240px; position: relative; margin-left: auto; }
.hd-search input {
    width: 100%; height: 30px;
    background: var(--sf); border: 1px solid var(--brd); border-radius: var(--pill);
    padding: 0 10px 0 30px; font-size: 11px; color: var(--ink); transition: .2s;
}
.hd-search input:focus { border-color: var(--brd-h); background: var(--bg); }
.hd-search input::placeholder { color: var(--mist); }
.hd-search > i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--mist); pointer-events: none; }
.hd-search .sc {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-family: var(--mono); font-size: 8px; color: var(--faint);
    border: 1px solid var(--brd); padding: 1px 4px; border-radius: 3px; line-height: 1.2;
}

/* Header actions */
.hd-acts { display: flex; align-items: center; gap: 4px; }
.icon-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; color: var(--ghost); font-size: 17px;
    position: relative; transition: .15s;
}
.icon-btn:hover { background: var(--sf); color: var(--ink); }
.icon-btn .dot {
    position: absolute; top: 5px; right: 5px;
    width: 5px; height: 5px;
    background: var(--primary); border-radius: 50%;
    border: 1.5px solid var(--bg);
}
.user-av {
    width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
    border: 1px solid var(--brd); flex-shrink: 0; cursor: pointer;
}
.user-av img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter .3s; }
.user-av:hover img { filter: grayscale(0); }


/* ═══════════════════════════════════════
   TABS — Icon-only navigation
   ═══════════════════════════════════════ */
.tabs {
    position: sticky; top: var(--hd); z-index: 180;
    height: var(--tab);
    background: var(--bg);
    border-bottom: 1px solid var(--brd);
    display: flex; align-items: stretch; justify-content: center; gap: 0;
}
.tab {
    width: 52px;
    display: flex; align-items: center; justify-content: center;
    color: var(--mist); font-size: 19px;
    border-bottom: 2px solid transparent;
    transition: .15s; position: relative;
}
.tab:hover { color: var(--ink); background: var(--sf); }
.tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.tab .cnt {
    position: absolute; top: 6px; right: 4px;
    font-family: var(--mono); font-size: 7px; font-weight: 700;
    background: var(--sf2); color: var(--ghost);
    padding: 1px 4px; border-radius: var(--pill); line-height: 1.2;
}
.tab.on .cnt { background: var(--ink); color: #fff; }
.tab .lock { position: absolute; top: 6px; left: 6px; font-size: 8px; color: var(--mist); }


/* ═══════════════════════════════════════
   PERMISSIONS
   ═══════════════════════════════════════ */
.perm {
    display: inline-flex; align-items: center; gap: 3px;
    font-family: var(--mono); font-size: 8px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 2px 8px; border-radius: var(--pill); border: 1px solid;
}
.perm-adm { background: #f5f3ff; color: var(--role-adm); border-color: #e9d5ff; }
.perm-gestor { background: var(--sf); color: var(--ink); border-color: var(--brd); }
.perm-tgestor { background: var(--sf); color: var(--smoke); border-color: var(--brd); }
.perm-team { background: var(--sf2); color: var(--ghost); border-color: var(--whisper); }

.vis-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px;
    background: var(--sf); border: 1px solid var(--brd); border-radius: 10px;
    margin-bottom: 14px;
    font-family: var(--mono); font-size: 10px; color: var(--smoke);
}
.vis-bar i { font-size: 14px; color: var(--ghost); }
.vis-bar .vis-roles { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.vis-bar.restricted { border-color: rgba(220,38,38,.15); background: #fef2f2; }
.vis-bar.restricted > i { color: var(--p-urg); }


/* ═══════════════════════════════════════
   PANELS — Container & Animations
   ═══════════════════════════════════════ */
.main { min-height: calc(100vh - var(--hd) - var(--tab)); }
.panel { display: none; animation: panelIn .35s var(--ease); }
.panel.on { display: block; }
@keyframes panelIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.section { padding: 20px 16px; }
.sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.sec-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; display: flex; align-items: center; gap: 6px; }
.sec-sub { font-family: var(--mono); font-size: 10px; color: var(--ghost); }
.divider { height: 1px; background: var(--brd); max-width: 85%; margin: 30px auto; }


/* ═══════════════════════════════════════
   STAT CARDS
   ═══════════════════════════════════════ */
.stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px; margin-bottom: 18px;
    visibility: visible !important; opacity: 1 !important;
    position: relative; z-index: 1; overflow: visible;
}
.stat {
    display: block !important; visibility: visible !important; opacity: 1 !important;
    background: var(--sf); border: 1px solid var(--brd); border-radius: var(--r);
    padding: 14px; transition: .2s; overflow: visible;
    position: relative; min-height: 80px;
}
.stat:hover { border-color: var(--brd-h); transform: translateY(-1px); }
.stat-icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; margin-bottom: 8px;
    background: var(--sf2); color: var(--ink);
}
.stat-val { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.stat-label { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--ghost); margin-top: 2px; }
.stat-change {
    font-family: var(--mono); font-size: 9px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 2px;
    margin-top: 4px;
}
.stat-change.up { color: var(--s-live); }
.stat-change.down { color: var(--p-urg); }


/* ═══════════════════════════════════════
   OVERVIEW — Event mini-cards
   ═══════════════════════════════════════ */
.ov-cols { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 12px; }
.ov-col { min-width: 200px; flex: 1; }
.ov-col-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.ov-minicard {
    background: var(--bg); border: 1px solid var(--brd); border-radius: var(--r);
    padding: 10px; margin-bottom: 5px; transition: .15s; cursor: pointer;
}
.ov-minicard:hover { border-color: var(--brd-h); }
.ov-minicard-title { font-size: 12px; font-weight: 700; }
.ov-minicard-meta { font-family: var(--mono); font-size: 9px; color: var(--ghost); display: flex; align-items: center; gap: 3px; margin-top: 2px; }
.ov-minicard-meta i { font-size: 10px; }


/* ═══════════════════════════════════════
   SINGLE EVENT VIEW
   ═══════════════════════════════════════ */
.ev-single { padding: 20px 16px; }
.ev-single-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ev-single-title { font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.ev-single-meta { font-family: var(--mono); font-size: 10px; color: var(--ghost); }

/* Task rows */
.task-list { display: flex; flex-direction: column; gap: 0; }
.task-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; border-bottom: 1px solid var(--brd);
    transition: .1s; cursor: pointer;
}
.task-row:hover { background: var(--sf); margin: 0 -8px; padding: 10px 8px; border-radius: 8px; }
.task-chk {
    width: 16px; height: 16px;
    border: 1.5px solid var(--brd-h); border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: .15s; flex-shrink: 0;
}
.task-chk.done { background: var(--ink); border-color: var(--ink); }
.task-chk.done::after { content: '✓'; color: #fff; font-size: 9px; font-weight: 700; }
.task-row-info { flex: 1; min-width: 0; }
.task-row-title { font-size: 12px; font-weight: 600; }
.task-row-title.done { text-decoration: line-through; color: var(--ghost); }
.task-row-sub { font-family: var(--mono); font-size: 9px; color: var(--mist); }
.task-row-date { font-family: var(--mono); font-size: 9px; color: var(--ghost); }
.task-row-date.overdue { color: var(--p-urg); }
.priority-dot {
    width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}


/* ═══════════════════════════════════════
   EVENT KANBAN
   ═══════════════════════════════════════ */
.ev-kanban {
    display: flex; gap: 10px;
    padding: 0 16px 20px;
    overflow-x: auto; min-height: 380px;
    align-items: flex-start;
}
.ev-col { min-width: 250px; max-width: 280px; flex: 1; display: flex; flex-direction: column; }
.ev-col-head { display: flex; align-items: center; gap: 6px; padding: 6px 0 8px; }
.ev-col-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ev-col-name { font-family: var(--mono); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--smoke); }
.ev-col-count { font-family: var(--mono); font-size: 9px; color: var(--mist); margin-left: auto; }
.ev-col-add {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; color: var(--mist); font-size: 14px; transition: .15s;
}
.ev-col-add:hover { background: var(--sf); color: var(--ink); }

/* Kanban list / drop zone */
.ev-list {
    display: flex; flex-direction: column; gap: 8px;
    flex: 1; min-height: 50px;
    padding: 4px; border-radius: 10px;
    transition: background .2s;
}
.ev-list.drag-over { background: var(--primary-l); }

/* Kanban cards */
.ev-card {
    background: var(--bg); border: 1px solid var(--brd); border-radius: var(--r);
    padding: 14px; cursor: grab; transition: .2s;
}
.ev-card:active { cursor: grabbing; }
.ev-card:hover { border-color: var(--brd-h); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,.03); }
.ev-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.ev-card-id { font-family: var(--mono); font-size: 9px; color: var(--mist); }
.ev-card-date { font-family: var(--mono); font-size: 9px; color: var(--smoke); display: flex; align-items: center; gap: 3px; }
.ev-card-date i { font-size: 11px; }
.ev-card-title { font-size: 13px; font-weight: 700; line-height: 1.25; margin-bottom: 4px; }
.ev-card-venue { font-family: var(--mono); font-size: 10px; color: var(--ghost); display: flex; align-items: center; gap: 3px; margin-bottom: 8px; }
.ev-card-venue i { font-size: 12px; }
.ev-card-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.etag {
    font-family: var(--mono); font-size: 8px; text-transform: uppercase;
    letter-spacing: .04em; padding: 2px 7px; border-radius: var(--pill);
    font-weight: 700; background: var(--sf2); color: var(--smoke); border: 1px solid var(--brd);
}
.ev-card-bottom { display: flex; align-items: center; justify-content: space-between; }
.ev-card-team { display: flex; }
.ev-card-team .tav {
    width: 20px; height: 20px; border-radius: 50%;
    overflow: hidden; border: 2px solid var(--bg); margin-left: -4px;
}
.ev-card-team .tav:first-child { margin-left: 0; }
.ev-card-team .tav img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter .3s; }
.ev-card:hover .tav img { filter: grayscale(0); }
.ev-card-budget { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--ghost); display: flex; align-items: center; gap: 3px; }
.ev-card-budget i { font-size: 10px; }
.ev-prog { margin-top: 8px; }
.ev-prog-track { height: 3px; background: var(--sf2); border-radius: var(--pill); overflow: hidden; }
.ev-prog-fill { height: 100%; border-radius: var(--pill); transition: width .8s var(--ease); }
.ev-prog-info { font-family: var(--mono); font-size: 8px; color: var(--mist); margin-top: 3px; display: flex; justify-content: space-between; }


/* ═══════════════════════════════════════
   STAFF / TIME
   ═══════════════════════════════════════ */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.staff-card {
    background: var(--bg); border: 1px solid var(--brd); border-radius: var(--r);
    padding: 16px; text-align: center; transition: .2s;
}
.staff-card:hover { border-color: var(--brd-h); transform: translateY(-1px); }
.staff-av { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; margin: 0 auto 8px; border: 1px solid var(--brd); }
.staff-av img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter .3s; }
.staff-card:hover .staff-av img { filter: grayscale(0); }
.staff-name { font-size: 13px; font-weight: 700; margin-bottom: 1px; }
.staff-func { font-family: var(--mono); font-size: 9px; color: var(--ghost); margin-bottom: 8px; }
.staff-role-badge { display: flex; justify-content: center; margin-bottom: 8px; }
.staff-stats { display: flex; justify-content: center; gap: 12px; }
.staff-stat { text-align: center; }
.staff-stat .v { font-size: 14px; font-weight: 800; }
.staff-stat .l { font-family: var(--mono); font-size: 7px; text-transform: uppercase; color: var(--mist); }
.staff-pix {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 6px 8px; background: var(--sf); border: 1px solid var(--brd);
    border-radius: 8px; margin-top: 8px;
    font-family: var(--mono); font-size: 9px; color: var(--smoke);
    cursor: pointer; transition: .15s;
}
.staff-pix:hover { border-color: var(--brd-h); }
.staff-pix i { font-size: 12px; color: var(--ink); }

/* Mural Section (Team Chat) */
.mural-section {
    background: var(--sf);
    border: 1px solid var(--brd);
    border-radius: var(--r-lg);
    padding: 20px;
    margin-top: 18px;
    display: flex; flex-direction: column;
    max-height: 420px;
}
.mural-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
}
.mural-head h3 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.mural-online {
    font-family: var(--mono); font-size: 9px;
    padding: 2px 8px; border-radius: var(--pill);
    background: rgba(22,163,106,.08); color: var(--s-live);
}
.mural-msgs {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column; gap: 10px;
    margin-bottom: 12px; padding-right: 4px;
}
.mural-msg { display: flex; align-items: flex-start; gap: 8px; }
.mural-msg.mine { flex-direction: row-reverse; }
.mural-msg-av {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--sf2); display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; color: var(--smoke); flex-shrink: 0;
    border: 1px solid var(--brd);
}
.mural-msg-bubble {
    background: var(--bg); border: 1px solid var(--brd);
    border-radius: 12px; padding: 8px 12px;
    max-width: 320px;
}
.mural-msg.mine .mural-msg-bubble { background: var(--ink); color: #fff; border-color: var(--ink); }
.mural-msg-name { font-size: 10px; font-weight: 700; margin-bottom: 2px; }
.mural-msg-text { font-size: 12px; line-height: 1.4; }
.mural-msg-time { font-family: var(--mono); font-size: 8px; color: var(--mist); margin-top: 3px; }
.mural-msg.mine .mural-msg-time { color: rgba(255,255,255,.5); }
.mural-input {
    display: flex; align-items: center; gap: 8px;
    padding-top: 12px; border-top: 1px solid var(--brd);
}
.mural-input input {
    flex: 1; height: 36px;
    background: var(--bg); border: 1px solid var(--brd); border-radius: var(--pill);
    padding: 0 12px; font-size: 12px; color: var(--ink);
}
.mural-input input::placeholder { color: var(--mist); }
.mural-input button {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--ink); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; transition: .15s;
}
.mural-input button:hover { background: var(--primary); }


/* ═══════════════════════════════════════
   BUDGET — MANDATORY TAB
   ═══════════════════════════════════════ */
.budget-layout { display: grid; grid-template-columns: 1fr 300px; gap: 14px; }
@media (max-width: 900px) { .budget-layout { grid-template-columns: 1fr; } }

/* Filters */
.budget-filters {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px; flex-wrap: wrap;
}
.budget-filter-btn {
    font-family: var(--mono); font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 5px 12px; border-radius: var(--pill);
    background: var(--sf); border: 1px solid var(--brd);
    color: var(--smoke); cursor: pointer; transition: .15s;
}
.budget-filter-btn:hover { border-color: var(--brd-h); }
.budget-filter-btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Table */
.budget-table { width: 100%; border-collapse: collapse; }
.budget-table th {
    font-family: var(--mono); font-size: 8px;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--mist); text-align: left;
    padding: 8px; border-bottom: 1px solid var(--brd);
    background: var(--bg);
}
.budget-table td {
    padding: 8px; border-bottom: 1px solid var(--brd);
    font-size: 12px;
}
.budget-table tr:hover td { background: var(--sf); }
.budget-table .cat-pill {
    font-family: var(--mono); font-size: 8px; font-weight: 700;
    text-transform: uppercase; padding: 2px 7px;
    border-radius: var(--pill);
    background: var(--sf2); color: var(--smoke);
}

/* Budget status */
.budget-st {
    font-family: var(--mono); font-size: 8px; font-weight: 700;
    text-transform: uppercase; padding: 2px 7px;
    border-radius: var(--pill); display: inline-flex; align-items: center; gap: 3px;
}
.budget-st.approved { background: rgba(22,163,106,.08); color: var(--s-live); }
.budget-st.pending { background: rgba(217,119,6,.08); color: var(--s-prep); }
.budget-st.rejected { background: rgba(220,38,38,.08); color: var(--p-urg); }

/* Budget actions */
.budget-act-btn {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 6px; color: var(--ghost); font-size: 13px;
    transition: .15s;
}
.budget-act-btn:hover { background: var(--sf); color: var(--ink); }
.budget-act-btn.del:hover { color: var(--p-urg); }

/* Summary sidebar */
.budget-summary {
    background: var(--sf); border: 1px solid var(--brd);
    border-radius: var(--r-lg); padding: 18px;
}
.budget-summary-title {
    font-size: 14px; font-weight: 700; margin-bottom: 14px;
    display: flex; align-items: center; gap: 6px;
}
.budget-sum-row {
    display: flex; justify-content: space-between;
    padding: 8px 0; border-bottom: 1px solid var(--brd);
}
.budget-sum-row:last-child { border-bottom: none; }
.budget-sum-k { font-family: var(--mono); font-size: 11px; color: var(--smoke); }
.budget-sum-v { font-family: var(--mono); font-size: 12px; font-weight: 700; }
.budget-sum-v.total { font-size: 20px; letter-spacing: -.02em; color: var(--ink); }
.budget-sum-v.surplus { color: var(--s-live); }
.budget-sum-v.deficit { color: var(--p-urg); }

/* Add item form */
.budget-add-form {
    margin-top: 14px;
    background: var(--white-3); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
}
.budget-add-form-inner {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0 24px;
}
@media (max-width: 700px) { .budget-add-form-inner { grid-template-columns: 1fr; } }
.budget-add-form-acts {
    grid-column: span 2; display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border);
}
@media (max-width: 700px) { .budget-add-form-acts { grid-column: 1; } }

/* Budget category sections (rendered by initBudget) */
.budget-cat-section {
    margin-top: 16px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); overflow: hidden;
}
.budget-cat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--white-3);
    border-bottom: 1px solid var(--border);
}
.budget-cat-name { font-size: 12px; font-weight: 700; color: var(--black-1); text-transform: uppercase; letter-spacing: .05em; font-family: var(--ff-mono); }
.budget-cat-total { font-size: 13px; font-weight: 700; color: var(--black-1); }
.budget-cat-items { padding: 4px 0; }
.budget-item {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 8px 14px;
    border-bottom: 1px solid var(--white-5); font-size: 13px;
    transition: background .12s;
}
.budget-item:last-child { border-bottom: none; }
.budget-item:hover { background: var(--white-3); }
.budget-item-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.budget-item-desc { color: var(--txt-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.budget-item-resp { font-size: 11px; color: var(--muted); font-family: var(--ff-mono); flex-shrink: 0; }
.budget-item-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.budget-item-cost { font-size: 13px; font-weight: 700; color: var(--black-1); font-family: var(--ff-mono); }

/* Chart area */
.budget-chart-wrap {
    margin-top: 14px;
    background: var(--bg); border: 1px solid var(--brd);
    border-radius: var(--r); padding: 16px; text-align: center;
}
.budget-chart-wrap canvas { max-height: 180px; margin: 0 auto; }


/* ═══════════════════════════════════════
   FINANCEIRO
   ═══════════════════════════════════════ */
.fin-grid { display: grid; grid-template-columns: 1fr 320px; gap: 14px; }
@media (max-width: 900px) { .fin-grid { grid-template-columns: 1fr; } }

.fin-table { width: 100%; border-collapse: collapse; }
.fin-table th {
    font-family: var(--mono); font-size: 8px; text-transform: uppercase;
    letter-spacing: .06em; color: var(--mist); text-align: left;
    padding: 8px; border-bottom: 1px solid var(--brd); background: var(--bg);
}
.fin-table td { padding: 8px; border-bottom: 1px solid var(--brd); font-size: 12px; }
.fin-table tr:hover td { background: var(--sf); }
.fin-st {
    font-family: var(--mono); font-size: 8px; font-weight: 700;
    text-transform: uppercase; padding: 2px 7px;
    border-radius: var(--pill); display: inline-flex; align-items: center; gap: 3px;
}
.fin-st.paid { background: var(--sf2); color: var(--s-live); }
.fin-st.pend { background: var(--sf2); color: var(--s-prep); }
.fin-st.late { background: var(--sf2); color: var(--p-urg); }
.fin-pix { font-family: var(--mono); font-size: 9px; color: var(--ghost); display: flex; align-items: center; gap: 3px; }
.fin-pix i { font-size: 11px; }

.fin-sum {
    background: var(--sf); border: 1px solid var(--brd);
    border-radius: var(--r-lg); padding: 18px;
}
.fin-sum-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px solid var(--brd); }
.fin-sum-row:last-child { border-bottom: none; }
.fin-sum-k { font-family: var(--mono); font-size: 11px; color: var(--smoke); }
.fin-sum-v { font-family: var(--mono); font-size: 12px; font-weight: 700; }
.fin-sum-v.big { font-size: 18px; letter-spacing: -.02em; }


/* ═══════════════════════════════════════
   FORNECEDORES + MODAL
   ═══════════════════════════════════════ */
.sup-list { display: flex; flex-direction: column; gap: 6px; }
.sup-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; background: var(--bg);
    border: 1px solid var(--brd); border-radius: var(--r);
    transition: .15s; cursor: pointer;
}
.sup-row:hover { border-color: var(--brd-h); transform: translateY(-1px); }
.sup-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
    background: var(--sf); color: var(--smoke);
}
.sup-info { flex: 1; min-width: 0; }
.sup-name { font-size: 12px; font-weight: 700; }
.sup-type { font-family: var(--mono); font-size: 9px; color: var(--ghost); }
.sup-contact { font-family: var(--mono); font-size: 9px; color: var(--mist); display: flex; align-items: center; gap: 3px; }
.sup-contact i { font-size: 11px; }
.sup-val { font-family: var(--mono); font-size: 11px; font-weight: 700; }
.sup-status { font-family: var(--mono); font-size: 8px; font-weight: 700; text-transform: uppercase; }

/* Modal */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(255,255,255,.6);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity .2s var(--ease);
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal-overlay.open .modal-card { transform: scale(1); opacity: 1; }
.modal-card {
    width: 500px; max-width: 90%;
    background: var(--bg); border: 1px solid var(--brd);
    border-radius: var(--r-lg);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,.08);
    padding: 24px; transform: scale(.96); opacity: 0;
    transition: .3s var(--ease);
    display: flex; flex-direction: column; gap: 16px;
}
.modal-h { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.modal-close {
    margin-left: auto;
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ghost); font-size: 16px; transition: .15s;
}
.modal-close:hover { background: var(--sf); color: var(--ink); }

/* User list in modal */
.usr-list { display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; margin: 0 -8px; padding: 0 8px; }
.usr-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px; border-radius: 8px; transition: .15s;
    border-bottom: 1px solid var(--brd);
}
.usr-row:last-child { border-bottom: none; }
.usr-row:hover { background: var(--sf); }
.usr-info { display: flex; align-items: center; gap: 10px; }
.usr-av {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--sf2); display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--smoke); border: 1px solid var(--brd);
}
.usr-det { display: flex; flex-direction: column; }
.usr-n { font-size: 12px; font-weight: 600; color: var(--ink); }
.usr-d { font-family: var(--mono); font-size: 9px; color: var(--mist); text-transform: uppercase; letter-spacing: .05em; }
.usr-acts { display: flex; gap: 4px; opacity: 0; transition: .2s; }
.usr-row:hover .usr-acts { opacity: 1; }

/* .btn-primary — defined in UNIVERSAL COMPONENTS section below */


/* ═══════════════════════════════════════
   CRONOGRAMA / GANTT — amCharts v5
   ═══════════════════════════════════════ */
.crono { padding: 20px 16px 40px; }

/* amCharts container */
#gantt-chart {
    width: 100%;
    height: 520px;
    background: var(--bg);
    border: 1px solid var(--brd);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.gantt-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; margin-bottom: 8px; flex-wrap: wrap; gap: 8px;
}
.gantt-filter-group { display: flex; gap: 6px; flex-wrap: wrap; }
.gantt-filter {
    font-family: var(--mono); font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 4px 10px; border-radius: var(--pill);
    background: var(--sf); border: 1px solid var(--brd);
    color: var(--smoke); cursor: pointer; transition: .15s;
    display: flex; align-items: center; gap: 4px;
}
.gantt-filter:hover { border-color: var(--brd-h); }
.gantt-filter.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.gantt-filter .filter-dot { width: 6px; height: 6px; border-radius: 50%; }

/* Phase progress (below Gantt) */
.crono-phases { display: flex; flex-direction: column; gap: 5px; margin-top: 18px; }
.crono-phase { display: flex; align-items: center; gap: 8px; }
.crono-phase-handle { cursor: grab; color: var(--mist); font-size: 13px; transition: .15s; flex-shrink: 0; }
.crono-phase-handle:hover { color: var(--ink); }
.crono-phase-handle:active { cursor: grabbing; }
.crono-phase-label {
    font-family: var(--mono); font-size: 10px;
    width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex-shrink: 0; color: var(--smoke);
    display: flex; align-items: center; gap: 3px;
}
.crono-phase-label i { font-size: 12px; color: var(--mist); }
.crono-track { flex: 1; height: 8px; background: var(--sf2); border-radius: var(--pill); overflow: hidden; }
.crono-fill { height: 100%; border-radius: var(--pill); transition: width 1s var(--ease); }
.crono-pct { font-family: var(--mono); font-size: 9px; font-weight: 700; width: 30px; text-align: right; flex-shrink: 0; }

/* Milestones */
.ms-section { display: block !important; visibility: visible !important; opacity: 1 !important; margin-top: 14px; }
.ms {
    display: flex !important; visibility: visible !important; opacity: 1 !important;
    align-items: center; gap: 8px;
    padding: 8px 12px; background: var(--bg);
    border: 1px dashed var(--brd); border-radius: 10px;
    margin-bottom: 6px; transition: .15s;
}
.ms:hover { border-style: solid; border-color: var(--brd-h); }
.ms-icon {
    width: 26px; height: 26px; border-radius: 7px;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; flex-shrink: 0;
    background: var(--sf); color: var(--smoke);
}
.ms-info { flex: 1; }
.ms-name { font-size: 11px; font-weight: 600; }
.ms-date { font-family: var(--mono); font-size: 9px; color: var(--ghost); }
.ms-chk {
    width: 20px; height: 20px; border-radius: 50%;
    border: 1.5px solid var(--brd-h);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: .15s; flex-shrink: 0;
}
.ms-chk.done { background: var(--ink); border-color: var(--ink); }
.ms-chk.done::after { content: '✓'; color: #fff; font-size: 10px; font-weight: 700; }


/* ═══════════════════════════════════════
   CALCULATOR LIGHTBOX
   ═══════════════════════════════════════ */
.calc-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(18,18,20,.45);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .25s var(--ease);
}
.calc-overlay.open { opacity: 1; pointer-events: auto; }
.calc-overlay.open .calc-box { transform: scale(1) translateY(0); }

.calc-box {
    width: 320px; max-width: 90vw;
    background: #1c1c1e;
    border-radius: var(--r-lg);
    padding: 20px;
    box-shadow: 0 30px 80px rgba(0,0,0,.35);
    transform: scale(.92) translateY(20px);
    transition: .35s var(--ease);
}
.calc-display {
    text-align: right;
    padding: 12px 8px 20px;
    color: #fff;
    font-family: var(--sans);
    font-size: 42px;
    font-weight: 300;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    min-height: 56px;
}
.calc-keys {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.calc-key {
    width: 100%; aspect-ratio: 1;
    max-height: 65px;
    border-radius: 50%;
    border: none;
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    transition: .12s;
    display: flex; align-items: center; justify-content: center;
}
.calc-key:active { transform: scale(.92); }
.calc-key-num {
    background: #333333;
    color: #fff;
}
.calc-key-num:hover { background: #555555; }
.calc-key-fn {
    background: #a5a5a5;
    color: #1c1c1e;
}
.calc-key-fn:hover { background: #c0c0c0; }
.calc-key-op {
    background: var(--primary);
    color: #fff;
}
.calc-key-op:hover { background: #ff7a26; }
.calc-key-op.active { background: #fff; color: var(--primary); }
.calc-key-zero {
    grid-column: span 2;
    border-radius: 34px;
    aspect-ratio: auto;
    justify-content: flex-start;
    padding-left: 26px;
}
.calc-close {
    position: absolute; top: -40px; right: 0;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255,255,255,.15);
    color: #fff; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: .15s;
}
.calc-close:hover { background: rgba(255,255,255,.3); }
.calc-box { position: relative; }


/* ═══════════════════════════════════════
   SLIDE-OVER (Detail Panel)
   ═══════════════════════════════════════ */
.slide-over {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 460px; max-width: 100%;
    background: var(--bg);
    border-left: 1px solid var(--brd);
    box-shadow: -20px 0 60px rgba(0,0,0,.05);
    z-index: 500;
    transform: translateX(100%);
    transition: transform .35s var(--ease);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.slide-over.open { transform: translateX(0); }
.slide-over-backdrop {
    position: fixed; inset: 0; z-index: 499;
    background: rgba(0,0,0,.08);
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
}
.slide-over-backdrop.open { opacity: 1; pointer-events: auto; }
.slide-over-head {
    padding: 16px; border-bottom: 1px solid var(--brd);
    display: flex; align-items: center; gap: 10px;
}
.slide-over-title { font-size: 15px; font-weight: 700; flex: 1; }
.slide-over-close {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--ghost); font-size: 16px; transition: .15s;
}
.slide-over-close:hover { background: var(--sf); color: var(--ink); }
.slide-over-body { flex: 1; overflow-y: auto; padding: 16px; }


/* ═══════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════ */
.toast {
    position: fixed; bottom: 20px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink); color: #fff;
    font-family: var(--mono); font-size: 11px;
    padding: 8px 16px; border-radius: var(--pill);
    opacity: 0; pointer-events: none;
    transition: .3s var(--ease);
    z-index: 3000;
    white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }


/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
    :root { --hd: 48px; --tab: 42px; }
    .hd { padding: 0 10px; gap: 6px; }
    .hd-search { max-width: 160px; }
    .hd-evento-select { min-width: 140px; font-size: 9px; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .ev-kanban { padding: 0 10px 20px; }
    .staff-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .fin-grid { grid-template-columns: 1fr; }
    .budget-layout { grid-template-columns: 1fr; }
    .budget-add-form { grid-template-columns: 1fr; }
    .slide-over { width: 100%; }
    .tabs { justify-content: flex-start; overflow-x: auto; }
    .tab { min-width: 44px; }
}
@media (max-width: 480px) {
    .stats { grid-template-columns: 1fr; }
    .hd-search { display: none; }
    .hd-acts .icon-btn:not(:first-child) { display: none; }
}


/* ═══════════════════════════════════════
   SINGLE EVENT HERO HEADER
   ═══════════════════════════════════════ */
.ev-hero {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px 0 20px;
    border-bottom: 1px solid var(--brd);
    margin-bottom: 22px;
}
.ev-hero-datebox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 16px;
    border: 1px solid var(--brd);
    background: var(--bg);
    flex-shrink: 0;
    transition: border-color .25s, background .25s;
}
.ev-hero-datebox:hover { border-color: var(--brd-h); background: var(--sf); }
.ev-hero-day {
    font-family: var(--mono);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ink);
}
.ev-hero-month {
    font-family: var(--mono);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary);
    font-weight: 500;
    margin-top: 4px;
}
.ev-hero-body { flex: 1; min-width: 0; }
.ev-hero-title {
    font-size: clamp(1.15rem, 2.5vw, 1.5rem);
    font-weight: 800;
    letter-spacing: -.025em;
    color: var(--ink);
    line-height: 1.15;
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ev-hero-loc {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ghost);
    margin-bottom: 10px;
}
.ev-hero-loc i { font-size: 12px; }
.ev-hero-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.ev-hero-tag {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 9px;
    border-radius: 100px;
    background: var(--sf2);
    color: var(--smoke);
    border: 1px solid var(--brd);
}
.ev-hero-tag.status-prep  { background: rgba(217,119,6,.08);  color: #92400e; border-color: rgba(217,119,6,.2); }
.ev-hero-tag.status-plan  { background: rgba(99,102,241,.07); color: #3730a3; border-color: rgba(99,102,241,.18); }
.ev-hero-tag.status-live  { background: rgba(22,163,74,.07);  color: #14532d; border-color: rgba(22,163,74,.18); }
.ev-hero-tag.status-done  { background: rgba(100,116,139,.07);color: var(--smoke); border-color: var(--brd); }
.ev-hero-acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }


/* ═══════════════════════════════════════
   STAT CARDS — IMPROVED
   ═══════════════════════════════════════ */
.stats {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}
.stat {
    background: var(--bg);
    border: 1px solid var(--brd);
    border-radius: 16px;
    padding: 16px 16px 14px;
    transition: border-color .2s, transform .2s var(--ease);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.stat:hover { border-color: var(--brd-h); transform: translateY(-2px); }
.stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    background: var(--sf2);
    color: var(--ink);
    margin-bottom: 8px;
}
.stat-val {
    font-family: var(--mono);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--ink);
}
.stat-label {
    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ghost);
    margin-top: 2px;
}


/* ═══════════════════════════════════════
   EVENT META GRID — WAS MISSING!
   ═══════════════════════════════════════ */
.ev-meta-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1px;
    background: var(--brd);
    border: 1px solid var(--brd);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 20px;
}
.ev-meta-item {
    background: var(--bg);
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    transition: background .15s;
}
.ev-meta-item:hover { background: var(--sf); }
.ev-meta-k {
    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ghost);
    display: flex;
    align-items: center;
    gap: 4px;
}
.ev-meta-k i { font-size: 11px; }
.ev-meta-v {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 7px;
    line-height: 1.3;
}
.ev-meta-v .genre-chip {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 8px;
    border-radius: 100px;
    background: var(--sf2);
    color: var(--smoke);
}
/* Status indicator dot */
.sdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
    position: relative;
}
/* Live pulse */
.sdot[style*="--s-live"]::after,
.sdot.live::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: inherit;
    opacity: .25;
    animation: sdot-pulse 2s ease-in-out infinite;
}
@keyframes sdot-pulse {
    0%, 100% { transform: scale(1); opacity: .25; }
    50% { transform: scale(1.8); opacity: 0; }
}

/* Description block */
.ev-desc {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--smoke);
    padding: 18px 0 20px;
    border-top: 1px solid var(--brd);
    border-bottom: 1px solid var(--brd);
    margin-bottom: 20px;
}

/* Progress bar for tasks */
.ev-progress-wrap { margin-bottom: 20px; }
.ev-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.ev-progress-label {
    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--ghost);
}
.ev-progress-val {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    color: var(--ink);
}
.ev-progress-bar {
    height: 4px;
    background: var(--sf3);
    border-radius: 100px;
    overflow: hidden;
}
.ev-progress-fill {
    height: 100%;
    background: var(--ink);
    border-radius: 100px;
    transition: width .6s var(--ease);
}


/* ═══════════════════════════════════════
   TASK LIST — IMPROVED
   ═══════════════════════════════════════ */
.task-list { display: flex; flex-direction: column; }
.task-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--brd);
    cursor: pointer;
    transition: background .12s, padding .12s;
    border-radius: 0;
}
.task-row:last-child { border-bottom: none; }
.task-row:hover {
    background: var(--sf);
    padding: 12px 10px;
    margin: 0 -10px;
    border-radius: 12px;
    border-bottom-color: transparent;
}
.task-chk {
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--faint);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s var(--ease);
    flex-shrink: 0;
    position: relative;
}
.task-chk:hover { border-color: var(--brd-h); background: var(--sf2); }
.task-chk.done { background: var(--ink); border-color: var(--ink); }
.task-chk.done::after { content: '✓'; color: #fff; font-size: 9px; font-weight: 700; }
.task-row-info { flex: 1; min-width: 0; }
.task-row-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.task-row-title.done { text-decoration: line-through; color: var(--ghost); }
.task-row-sub {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ghost);
    margin-top: 2px;
}
.task-row-date {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ghost);
    flex-shrink: 0;
    padding: 2px 7px;
    border-radius: 100px;
    background: var(--sf2);
    transition: background .15s;
}
.task-row:hover .task-row-date { background: var(--sf3); }
.task-row-date.overdue {
    color: var(--p-urg);
    background: rgba(220,38,38,.07);
}


/* ═══════════════════════════════════════
   SEC-HEAD — improved section headers
   ═══════════════════════════════════════ */
.sec-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.sec-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ink);
}
.sec-sub {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--ghost);
    letter-spacing: .03em;
}
.sec-link {
    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ghost);
    transition: color .15s;
    cursor: pointer;
}
.sec-link:hover { color: var(--ink); }


/* ─── UTILITY CLASSES ─── */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: var(--mono); }
.text-ghost { color: var(--ghost); }
.text-smoke { color: var(--smoke); }
.text-primary { color: var(--primary); }
.bg-primary-l { background: var(--primary-l); }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 14px; }
.mt-lg { margin-top: 24px; }
.gap-sm { gap: 6px; }
.gap-md { gap: 10px; }
.flex-center { display: flex; align-items: center; justify-content: center; }


/* ═══════════════════════════════════════════════════════════════
   UNIVERSAL COMPONENTS — Apollo Design System (universal-style)
   ═══════════════════════════════════════════════════════════════ */

/* ── BUTTONS ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 22px;
    font-family: var(--ff-main); font-size: 0.85rem; font-weight: 600;
    border-radius: var(--radius); border: 1px solid transparent;
    cursor: pointer; transition: all var(--transition-ui);
    white-space: nowrap; position: relative; overflow: hidden;
    background: transparent; color: var(--txt-color);
}
.btn:active { transform: scale(0.97); }
.btn-primary {
    background: var(--black-1); color: #fff; border-color: var(--black-1);
    height: auto; padding: 10px 22px; border-radius: var(--radius);
    font-size: 0.85rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px;
    transition: all var(--transition-ui); justify-content: center;
    white-space: nowrap; position: relative; overflow: hidden;
}
.btn-primary:hover { background: var(--black-10); border-color: var(--black-10); }
.btn-secondary { background: var(--white-4); color: var(--txt-color-heading); border-color: transparent; }
.btn-secondary:hover { background: var(--white-5); }
.btn-ghost {
    background: transparent; border: 1px solid var(--border); color: var(--txt-color);
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: var(--radius);
    font-size: 0.85rem; font-weight: 500; cursor: pointer;
    transition: all var(--transition-ui); position: relative; overflow: hidden;
}
.btn-ghost:hover { border-color: var(--border-hover); background: var(--bg-neutral); }
.btn-icon {
    width: 36px; height: 36px; padding: 0; border-radius: 50%;
    background: var(--white-1); color: var(--txt-color); border: 1px solid var(--border);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all var(--transition-ui);
    position: relative; overflow: hidden;
}
.btn-icon:hover { background: var(--white-4); border-color: var(--white-6); }
.btn-sm { padding: 6px 14px; font-size: 0.78rem; }
.btn-lg { padding: 14px 30px; font-size: 1rem; }

/* Ripple */
.ripple {
    position: absolute; border-radius: 50%;
    background: rgba(0,0,0,0.07);
    transform: scale(0); animation: ripple-anim 0.55s linear; pointer-events: none;
}
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

/* ── FORM INPUTS — Apollo Universal ── */
.input-group {
    position: relative;
    margin-bottom: 16px;
}
.apollo-input {
    width: 100%;
    padding: 14px 0 6px;
    font-family: var(--ff-main);
    font-size: 14px;
    color: var(--black-1);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    outline: none;
    transition: border-color var(--transition-ui);
}
.apollo-input:focus { border-bottom-color: var(--primary); }
.apollo-input:not(:placeholder-shown) ~ .apollo-label,
.apollo-input:focus ~ .apollo-label {
    transform: translateY(-18px) scale(0.8);
    color: var(--primary);
    transform-origin: left top;
}
.apollo-label {
    position: absolute;
    left: 0; top: 12px;
    font-family: var(--ff-main);
    font-size: 14px;
    color: var(--muted);
    pointer-events: none;
    transition: transform var(--transition-ui), color var(--transition-ui);
    transform-origin: left top;
}
.apollo-input[type="number"] { -moz-appearance: textfield; }
.apollo-input[type="number"]::-webkit-inner-spin-button,
.apollo-input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }

/* ── TAGS ── */
.tag {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: var(--radius-xs);
    font-family: var(--ff-mono); font-size: 0.62rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    background: var(--white-4); color: var(--gray-6);
    border: 1px solid var(--border);
}
.tag-primary { background: var(--white-4); color: var(--black-1); border-color: var(--white-6); }
.tag-success  { background: rgba(119,224,0,0.08); color: #3d7a00; border-color: transparent; }
.tag-danger   { background: rgba(229,57,53,0.07); color: #b71c1c; border-color: transparent; }

/* ── AS1 SELECT (icon + dropdown) ── */
.as1 { position: relative; }
.as1-trigger {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 10px 12px;
    background: var(--white-4); border: 1px solid var(--border);
    border-radius: var(--radius-sm); cursor: pointer;
    outline: none; text-align: left;
    transition: border-color var(--transition-ui);
    font-family: var(--ff-main); font-size: 13px; color: var(--black-1);
}
.as1-trigger:hover { border-color: var(--border-hover); }
.as1-val { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.as1-val-icon {
    width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.as1-val-icon svg { width: 12px; height: 12px; color: #fff; stroke: #fff; }
.as1-val-text { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as1-trigger.is-placeholder .as1-val-text { color: var(--muted); }
.as1-arrow {
    width: 14px; height: 14px; flex-shrink: 0; color: var(--muted);
    transition: transform var(--transition-ui);
}
.as1.is-open .as1-arrow { transform: rotate(180deg); }
.as1-drop {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 100;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(14px) saturate(200%);
    -webkit-backdrop-filter: blur(14px) saturate(200%);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 4px; overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98);
    transition: opacity var(--transition-ui), transform var(--transition-ui), visibility 0s var(--transition-ui);
}
.as1.is-open .as1-drop {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
    transition: opacity var(--transition-ui), transform var(--transition-ui), visibility 0s 0s;
}
.as1-opt {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border-radius: var(--radius-xs); cursor: pointer;
    color: var(--txt-color); font-size: 13px;
    transition: background 0.15s var(--ease-default);
}
.as1-opt:hover, .as1-opt.is-focused { background: var(--primary-l); }
.as1-opt.is-selected { background: rgba(244,95,0,0.08); }
.as1-opt-icon {
    width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.as1-opt-icon svg { width: 12px; height: 12px; stroke: #fff; }
.as1-opt-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.as1-opt-name { font-weight: 500; color: var(--black-1); font-size: 13px; }
.as1-opt-hint { font-size: 10px; color: var(--muted); margin-top: 1px; }
.as1-opt-check {
    margin-left: auto; width: 13px; height: 13px;
    color: var(--primary); opacity: 0; transition: opacity 0.2s; flex-shrink: 0;
}
.as1-opt.is-selected .as1-opt-check { opacity: 1; }

/* ── AS3 SELECT (glass panel with search) ── */
.as3 { position: relative; }
.as3-trigger {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; cursor: pointer; outline: none;
    font-family: var(--ff-main); font-size: 14px; color: var(--txt-color);
    background: transparent; border-radius: var(--radius-sm);
    text-align: left; line-height: 1.4; width: 100%;
    transition: border-color var(--transition-ui);
}
.as3-swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; transition: background var(--transition-ui); }
.as3-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.as3-lbl-name { font-weight: 600; color: var(--black-1); }
.as3-lbl-desc { color: var(--muted); margin-left: 5px; font-size: 12px; }
.as3-chevron {
    width: 16px; height: 16px; flex-shrink: 0; color: var(--muted);
    transition: transform var(--transition-ui), color 0.2s;
}
.as3.is-open .as3-chevron { transform: rotate(180deg); color: var(--primary); }
.as3-drop {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 200;
    background: rgba(255,255,255,0.92); backdrop-filter: blur(20px) saturate(200%);
    -webkit-backdrop-filter: blur(20px) saturate(200%);
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 6px; max-height: 280px; overflow-y: auto;
    opacity: 0; visibility: hidden;
    transform: translateY(-8px) scale(0.98);
    transition: opacity var(--transition-ui), transform 0.25s var(--ease-default), visibility 0s 0.25s;
    box-shadow: 0 8px 32px rgba(0,0,0,0.08);
}
.as3.is-open .as3-drop {
    opacity: 1; visibility: visible; transform: translateY(0) scale(1);
    transition: opacity var(--transition-ui), transform 0.3s var(--ease-default), visibility 0s 0s;
}
.as3-search-wrap { position: sticky; top: 0; z-index: 2; padding: 0 2px 6px; }
.as3-search {
    width: 100%; padding: 6px 12px 6px 32px;
    font-family: var(--ff-main); font-size: 13px; color: var(--txt-color);
    background: var(--white-4); border: 1px solid var(--border);
    border-radius: var(--radius-sm); outline: none;
    transition: border-color var(--transition-ui);
}
.as3-search::placeholder { color: var(--muted); }
.as3-search:focus { border-color: var(--primary); }
.as3-search-icon {
    position: absolute; left: 14px; top: 10px;
    width: 13px; height: 13px; color: var(--muted); pointer-events: none;
}
.as3-opt {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    cursor: pointer; color: var(--txt-color); font-size: 13px;
    transition: background 0.15s var(--ease-default);
}
.as3-opt:hover, .as3-opt.is-focused { background: var(--primary-l); }
.as3-opt.is-selected { background: rgba(244,95,0,0.08); color: var(--black-1); }
.as3-opt[hidden] { display: none; }
.as3-opt-sw { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.as3-opt-name { font-weight: 600; color: var(--black-1); font-size: 13px; }
.as3-opt-desc { color: var(--muted); font-size: 11px; margin-left: 4px; }
.as3-opt-check {
    margin-left: auto; width: 14px; height: 14px;
    color: var(--primary); opacity: 0; transition: opacity 0.2s; flex-shrink: 0;
}
.as3-opt.is-selected .as3-opt-check { opacity: 1; }
.as3-empty {
    padding: 18px 12px; text-align: center; color: var(--muted);
    font-size: 11px; font-family: var(--ff-mono);
    text-transform: uppercase; letter-spacing: 0.05em; display: none;
}
.as3-empty.is-visible { display: block; }

/* ── HEADER EVENT SELECTOR (as3 in .hd) ── */
.hd-evento-wrap.as3 { min-width: 180px; max-width: 240px; }
.hd-evento-wrap .as3-trigger {
    padding: 6px 10px; background: var(--white-4);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    font-size: 13px;
}
.hd-evento-wrap .as3-trigger:hover { background: var(--white-5); border-color: var(--border-hover); }
.hd-evento-wrap .as3-drop { min-width: 260px; right: auto; left: 0; }

/* ── STAT-CARD (universal) ── */
.stat-card {
    padding: var(--space-4); background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius);
    display: flex; flex-direction: column; justify-content: space-between;
}
.stat-card:hover { border-color: var(--border-hover); }
.stat-value { font-family: var(--ff-mono); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; color: var(--black-1); }
.stat-label { color: var(--txt-color); font-size: 0.82rem; margin-top: 2px; }
.stat-trend {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--ff-mono); font-size: 0.65rem; font-weight: 600;
    padding: 2px 7px; border-radius: var(--radius-xs); margin-top: var(--space-2); width: fit-content;
}
.trend-up   { background: rgba(119,224,0,0.08); color: #3d7a00; }
.trend-down { background: rgba(229,57,53,0.07); color: #b71c1c; }

/* ── CARD ── */
.card {
    background: var(--bg); border-radius: var(--radius);
    padding: var(--space-4); border: 1px solid var(--border);
    transition: transform 0.25s var(--ease-snappy), border-color var(--transition-ui);
}
.card-hover:hover { transform: translateY(-2px); border-color: var(--border-hover); }

/* ── BUDGET CALCULATOR LAYOUT (cachê calculator in budget panel) ── */
.calc-wrap {
    background: var(--white-4); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 20px;
    margin-top: 12px;
}
.calc-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 4px 20px; margin-bottom: 16px;
}
.calc-field .input-group { margin-bottom: 0; }
.calc-result {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 0; border-top: 1px solid var(--border); margin-bottom: 16px;
}
.calc-result-label {
    font-family: var(--ff-mono); font-size: 10px; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--muted);
}
.calc-result-val {
    font-family: var(--ff-mono); font-size: 1.4rem; font-weight: 700;
    color: var(--black-1); letter-spacing: -0.02em;
}
.calc-actions { display: flex; gap: 10px; justify-content: flex-end; }