:root {
  color-scheme: light;
  --navy-950: #061936;
  --navy-900: #09234a;
  --navy-800: #103466;
  --navy-700: #174779;
  --blue-600: #1862b5;
  --blue-500: #2476d0;
  --blue-100: #e8f2fd;
  --cyan-600: #068fa9;
  --cyan-500: #16bcd4;
  --cyan-100: #e6f9fc;
  --yellow-500: #f4c743;
  --yellow-100: #fff7d8;
  --green-600: #148466;
  --green-100: #e9f7f1;
  --red-600: #b84d58;
  --red-100: #fff0f1;
  --ink: #142641;
  --ink-soft: #3b506a;
  --muted: #60748d;
  --line: #e1e8f1;
  --canvas: #f5f8fc;
  --surface: #fff;
  --shadow: 0 12px 32px rgba(19, 48, 87, .055), 0 2px 7px rgba(19, 48, 87, .025);
  --shadow-hover: 0 18px 40px rgba(19, 48, 87, .11);
  --radius: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 14px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
button, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(22, 188, 212, .66); outline-offset: 3px; }
::selection { background: #beeef6; color: var(--navy-950); }
.hidden { display: none !important; }

body.auth-active .shell { display: none; }
.auth-screen { min-height: 100dvh; display: grid; grid-template-columns: minmax(320px, .9fr) minmax(420px, 1.1fr); background: #f4f8fc; }
.auth-intro { position: relative; min-height: 100dvh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; overflow: hidden; padding: clamp(36px, 6vw, 96px); color: #fff; background: radial-gradient(circle at 18% 12%, rgba(28, 190, 211, .22), transparent 33%), linear-gradient(155deg, #061936, #0c3568); }
.auth-intro::after { content: ""; position: absolute; width: min(68vw, 700px); height: min(68vw, 700px); left: -23%; bottom: -48%; border: 1px solid rgba(91, 206, 236, .24); border-radius: 50%; box-shadow: 0 0 0 75px rgba(58, 153, 202, .035), 0 0 0 150px rgba(58, 153, 202, .025); pointer-events: none; }
.auth-intro > * { position: relative; z-index: 1; }
.auth-brand { position: absolute; top: clamp(30px, 4vw, 58px); left: clamp(36px, 6vw, 96px); display: flex; align-items: center; gap: 13px; }
.auth-brand strong { display: block; font-size: 24px; line-height: 1; letter-spacing: -.06em; }
.auth-brand small { display: block; margin-top: 6px; color: #91b8dd; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.auth-kicker { margin-bottom: 16px; color: #5ad9ec; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.auth-intro h1 { max-width: 570px; margin: 0; font-size: clamp(38px, 4.5vw, 68px); line-height: 1.04; letter-spacing: -.065em; }
.auth-intro p { max-width: 440px; margin: 24px 0 0; color: #b6d1eb; font-size: 15px; line-height: 1.65; }
.auth-intro-mark { position: absolute; right: 9%; bottom: 9%; color: rgba(66, 199, 226, .23); font-size: 104px; line-height: 1; }
.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 48px 24px 24px; }
.auth-card { width: min(100%, 455px); border: 1px solid #dce6f1; border-radius: 20px; padding: clamp(24px, 3vw, 38px); background: #fff; box-shadow: 0 24px 70px rgba(12, 40, 79, .09); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 32px; border: 1px solid #e0eaf3; border-radius: 10px; padding: 4px; background: #f5f8fc; }
.auth-tab { min-height: 37px; border: 0; border-radius: 7px; background: transparent; color: #71839a; font-size: 12px; font-weight: 740; }
.auth-tab.active, .auth-tab[aria-selected="true"] { background: #fff; color: var(--navy-900); box-shadow: 0 2px 7px rgba(17, 48, 88, .1); }
.auth-card-heading { margin-bottom: 24px; }
.auth-card-heading h2 { margin: 7px 0 0; color: var(--navy-950); font-size: 29px; line-height: 1.2; letter-spacing: -.045em; }
.auth-card-heading p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.auth-form { display: grid; gap: 16px; }
.auth-form .field { gap: 7px; color: #435977; font-size: 11px; }
.auth-form .field input { min-height: 45px; padding: 11px 12px; background: #fff; font-size: 13px; }
.auth-form .field small { color: #8191a5; font-size: 10px; font-weight: 500; }
.auth-help { margin: -2px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.auth-submit { width: 100%; min-height: 46px; margin-top: 4px; font-size: 12px; }
.auth-message { margin: -4px 0 17px; border: 1px solid #b6e2da; border-radius: 9px; padding: 10px 12px; background: #e9f7f1; color: #176a55; font-size: 11px; line-height: 1.45; }
.auth-message.error { border-color: #f2cbd0; background: var(--red-100); color: #a83746; }
.auth-footer { margin: 24px 0 0; color: #8da0b8; font-size: 10px; }

.view-switcher { display: flex; align-items: center; gap: 7px; border: 1px solid #d9e6f3; border-radius: 10px; padding: 4px; background: #f3f9fd; }
.view-switcher label { display: flex; align-items: center; gap: 7px; color: #627d99; font-size: 10px; font-weight: 750; white-space: nowrap; }
.view-switcher label > span { padding-left: 6px; }
.view-switcher select { min-height: 30px; max-width: 170px; border: 1px solid #d8e6f2; border-radius: 7px; padding: 4px 23px 4px 9px; background: #fff; color: var(--navy-900); font-size: 10px; font-weight: 720; }
.view-switcher select:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 2px; }
.account-menu { position: relative; flex: 0 0 auto; }
.account-menu > summary { min-height: 36px; display: flex; align-items: center; gap: 8px; border: 1px solid #dae5f0; border-radius: 10px; padding: 4px 8px 4px 4px; background: #fff; color: var(--navy-900); cursor: pointer; list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu[open] > summary { border-color: #9dc7dc; box-shadow: 0 0 0 3px rgba(22, 188, 212, .09); }
.account-avatar { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 7px; background: linear-gradient(145deg, #1775b4, #19bed0); color: #fff; font-size: 13px; font-weight: 800; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.account-identity { display: flex; min-width: 0; flex-direction: column; text-align: left; line-height: 1.15; }
.account-identity strong { max-width: 115px; overflow: hidden; color: var(--navy-900); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-identity small { margin-top: 3px; color: #6f829a; font-size: 9px; }
.account-chevron { margin-left: 2px; color: #7890aa; font-size: 13px; }
.account-popover { position: absolute; top: calc(100% + 7px); right: 0; z-index: 60; width: min(240px, calc(100vw - 28px)); border: 1px solid #d9e4ef; border-radius: 11px; padding: 8px; background: #fff; box-shadow: 0 14px 38px rgba(9, 35, 74, .17); }
.account-popover-heading { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px 10px; border-bottom: 1px solid #e8edf4; }
.account-popover-heading strong { color: var(--navy-900); font-size: 11px; }
.account-popover-heading small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-popover button { width: 100%; border: 0; border-radius: 7px; padding: 9px 10px; background: transparent; color: var(--navy-800); text-align: left; font-size: 11px; font-weight: 650; }
.account-popover button:hover { background: #f1f7fd; }
.account-mini-form { display: grid; gap: 6px; padding: 8px 10px; border-top: 1px solid #e8edf4; }
.account-mini-form label { display: grid; gap: 3px; color: var(--muted); font-size: 10px; font-weight: 700; }
.account-mini-form input { min-height: 30px; width: 100%; padding: 5px 7px; border: 1px solid #dae5f0; border-radius: 6px; color: var(--navy-900); }
.account-mini-form button { padding: 5px 0; color: #116b9a; }
.password-disclosure { border-top: 1px solid #e8edf4; }
.password-disclosure > summary { padding: 9px 10px; color: var(--navy-800); font-size: 11px; font-weight: 650; cursor: pointer; }
.password-disclosure .account-mini-form { border-top: 0; padding-top: 0; }
.account-photo-control { display: block; margin-top: 5px; border-radius: 7px; padding: 9px 10px; color: var(--navy-800); font-size: 11px; font-weight: 650; cursor: pointer; }
.account-photo-control:hover { background: #f1f7fd; }
.account-photo-control input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.account-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid #e8edf4; }
.account-row > div:first-child { display: flex; align-items: center; gap: 9px; min-width: 0; }
.account-row .account-row-copy { display: flex; flex-direction: column; min-width: 0; }
.account-row strong { color: var(--navy-900); font-size: 12px; }
.account-row small { color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.account-row > div:last-child { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.account-row-photo { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 8px; background: #e4f5fa; color: var(--navy-900); font-weight: 800; overflow: hidden; }
.account-row-photo img { width: 100%; height: 100%; object-fit: cover; }
.account-admin-panel { margin-bottom: 16px; }
.account-admin-panel #inviteForm { align-items: end; margin: 18px 0 16px; }
.account-admin-panel #inviteForm .button { width: fit-content; min-height: 39px; }
.invite-result { margin: 5px 0 17px; border: 1px solid #b6e2da; border-radius: 9px; padding: 12px 14px; background: #e9f7f1; color: #176a55; font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.invite-result.error { border-color: #f2cbd0; background: var(--red-100); color: #a83746; }
.accounts-list { max-width: 100%; overflow-x: auto; }
.accounts-list:empty { display: none; }
.accounts-list > p { color: var(--muted); font-size: 11px; }
.role-context { position: relative; margin-bottom: 16px; overflow: hidden; border-color: #b9e5ec; background: linear-gradient(110deg, #eefbfe, #fff 72%); }
.role-context::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--cyan-500); }
.role-context h2 { margin: 4px 0 5px; color: var(--navy-900); font-size: 17px; letter-spacing: -.025em; }
.role-context p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.role-context strong { color: var(--navy-900); }
.role-context-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.role-context-grid > div { border: 1px solid #dcebf2; border-radius: 10px; padding: 12px; background: rgba(255, 255, 255, .8); }
.role-context-grid small { display: block; color: var(--muted); font-size: 10px; }
.role-context-grid b { display: block; margin-top: 3px; color: var(--navy-900); font-size: 16px; }

.shell { min-height: 100vh; display: grid; grid-template-columns: 254px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; align-self: start; height: 100vh; min-height: 650px; display: flex; flex-direction: column; padding: 27px 15px 18px; color: #d8e7fb; background: linear-gradient(165deg, #061936 0%, #09234a 55%, #061831 100%); box-shadow: 12px 0 35px rgba(10, 32, 67, .06); z-index: 30; }
.sidebar::before { content: ""; position: absolute; inset: 0 0 auto; height: 270px; pointer-events: none; background: radial-gradient(circle at 0 0, rgba(24, 120, 200, .2), transparent 68%); }
.sidebar > * { position: relative; }
.brand { display: flex; align-items: center; gap: 12px; padding: 3px 12px 32px; white-space: nowrap; }
.brand-mark { width: 39px; height: 39px; flex: 0 0 39px; display: grid; place-items: center; position: relative; border-radius: 11px; background: linear-gradient(145deg, #1775b4, #19bed0); color: #fff; box-shadow: 0 7px 17px rgba(0, 183, 214, .22); font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.08em; }
.brand-mark span { position: absolute; top: -6px; right: -5px; color: var(--yellow-500); font-size: 16px; line-height: 1; text-shadow: 0 2px 5px rgba(3, 25, 52, .35); }
.brand strong { display: block; color: #fff; font-size: 20px; line-height: 1.1; font-weight: 760; letter-spacing: -.055em; }
.brand small { display: block; margin-top: 5px; color: #83a6cb; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
.side-caption { margin: 0 15px 11px; color: #658bb7; font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.side-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-link { width: 100%; min-height: 43px; display: flex; align-items: center; gap: 14px; border: 1px solid transparent; border-radius: 11px; padding: 9px 14px; background: transparent; color: #afc3df; text-align: left; font-size: 12px; font-weight: 600; transition: background .18s, color .18s, border-color .18s, transform .18s; }
.nav-link:hover { background: rgba(120, 174, 233, .11); color: #fff; transform: translateX(2px); }
.nav-link.active { background: linear-gradient(90deg, rgba(22, 129, 194, .24), rgba(19, 78, 139, .15)); border-color: rgba(89, 186, 233, .15); color: #fff; box-shadow: inset 3px 0 0 var(--cyan-500); }
.nav-glyph { width: 19px; flex: 0 0 19px; text-align: center; color: #8bb0d3; font-size: 19px; line-height: 1; font-weight: 400; }
.nav-link.active .nav-glyph { color: #58daec; }
.side-spacer { flex: 1; }
.side-status { display: flex; align-items: center; gap: 10px; margin: 16px 6px 14px; padding: 13px 12px; border: 1px solid rgba(131, 171, 213, .15); border-radius: 12px; background: rgba(255, 255, 255, .045); }
.status-light { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #43cfb7; box-shadow: 0 0 0 4px rgba(67, 207, 183, .13); }
.side-status strong, .side-status small { display: block; }
.side-status strong { font-size: 10px; color: #d8e7fb; font-weight: 700; }
.side-status small { margin-top: 2px; color: #799abe; font-size: 10px; }
.side-foot { padding: 0 14px; color: #6485a9; font-size: 10px; }
.side-foot span { padding: 0 5px; color: var(--yellow-500); }

.workspace { min-width: 0; }
.topbar { min-height: 76px; display: flex; align-items: center; gap: 20px; padding: 14px clamp(24px, 3.1vw, 52px); border-bottom: 1px solid #e8edf4; background: rgba(255, 255, 255, .95); }
.crumb { color: #8899ad; font-size: 11px; font-weight: 800; letter-spacing: .12em; white-space: nowrap; }
.crumb span { color: #bdc8d5; margin: 0 9px; }
.crumb strong { color: var(--navy-700); font-size: 12px; font-weight: 700; letter-spacing: 0; }
.topbar-actions { min-width: 0; margin-left: auto; display: flex; align-items: center; justify-content: flex-end; gap: 17px; }
.today-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 650; white-space: nowrap; }
.today-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan-500); box-shadow: 0 0 0 4px var(--cyan-100); }
.mode-control { display: flex; align-items: center; gap: 9px; color: #7b8ca1; font-size: 11px; font-weight: 650; white-space: nowrap; }
.mode-control select { width: auto; min-width: 123px; height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 28px 0 11px; background: #fff; color: var(--navy-800); font-size: 11px; font-weight: 750; }
.mobile-menu, .mobile-brand { display: none; }

.button { min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid transparent; border-radius: 9px; padding: 8px 14px; font-size: 11px; font-weight: 760; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: transform .16s, background .16s, box-shadow .16s, border-color .16s; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:active:not(:disabled) { transform: translateY(0); }
.button-dark { background: var(--navy-900); color: #fff; box-shadow: 0 5px 12px rgba(8, 34, 74, .15); }
.button-dark:hover:not(:disabled) { background: var(--navy-800); box-shadow: 0 8px 17px rgba(8, 34, 74, .2); }
.button-primary { background: var(--blue-600); color: #fff; box-shadow: 0 5px 13px rgba(24, 98, 181, .15); }
.button-primary:hover:not(:disabled) { background: #11569f; box-shadow: 0 8px 17px rgba(24, 98, 181, .2); }
.button-secondary { border-color: #ccd9e9; background: #fff; color: var(--navy-800); }
.button-secondary:hover:not(:disabled) { border-color: #98b8d8; background: #f5faff; }
.button-danger { border-color: #f2cbd0; background: #fff6f6; color: var(--red-600); }
.button-danger:hover:not(:disabled) { background: #ffe9ec; }
.button.small, .button-sm { min-height: 27px; padding: 5px 8px; font-size: 10px; border-radius: 7px; }
.text-button, .link-arrow { border: 0; padding: 0; background: transparent; color: var(--blue-600); font-size: 11px; font-weight: 750; white-space: nowrap; }
.text-button:hover, .link-arrow:hover { color: var(--cyan-600); text-decoration: underline; }

.main { width: min(100%, 1610px); margin: 0 auto; padding: 32px clamp(24px, 3.1vw, 52px) 64px; }
.page-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 21px; }
.eyebrow, .section-kicker { color: var(--cyan-600); font-size: 10px; font-weight: 820; letter-spacing: .14em; line-height: 1.3; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.eyebrow-rule { width: 24px; height: 1px; background: #a9c4da; }
.page-heading h1 { margin: 0; color: var(--navy-950); font-size: clamp(26px, 2.4vw, 36px); font-weight: 760; letter-spacing: -.05em; line-height: 1.18; }
.page-heading p { margin: 8px 0 0; color: var(--muted); font-size: 12px; }
.heading-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-bottom: 3px; }
.badge { min-height: 25px; display: inline-flex; align-items: center; justify-content: center; border-radius: 100px; padding: 4px 10px; font-size: 9px; font-weight: 820; line-height: 1.2; letter-spacing: .07em; white-space: nowrap; }
.badge-mode { background: var(--navy-900); color: #e5f6ff; }
.badge-mode.demo { background: #167c91; color: #fff; }
.badge-outline { border: 1px solid #cbd8e8; background: #fff; color: var(--navy-700); }
.demo-banner, .local-banner { display: flex; align-items: center; gap: 11px; border-radius: 11px; padding: 11px 14px; line-height: 1.35; }
.demo-banner { margin-bottom: 12px; border: 1px solid #a7e9f2; background: #e9f9fc; color: #0b687d; }
.demo-banner > span { color: #0ca9c3; font-size: 22px; line-height: 1; }
.demo-banner strong { display: block; font-size: 11px; }
.demo-banner p { margin: 2px 0 0; font-size: 10px; }
.local-banner { margin-bottom: 21px; border: 1px solid #e1eaf3; background: #edf3f9; color: #58708d; font-size: 11px; }
.local-banner > span { color: var(--blue-600); font-size: 17px; line-height: 1; }

.filter-card, .panel { min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.filter-card { margin-bottom: 20px; padding: 17px 20px 12px; }
.filter-header, .panel-title, .calendar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.filter-header { align-items: center; margin-bottom: 14px; }
.filter-header strong { display: block; margin-top: 2px; font-size: 13px; color: var(--navy-900); }
.filter-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 10px; }
.field { min-width: 0; display: flex; flex-direction: column; gap: 6px; color: #65768e; font-size: 10px; font-weight: 720; }
.field > span, .field > label { line-height: 1.3; }
.field input, .field select, .field textarea, .mode-control select { appearance: none; outline: none; }
.field input, .field select, .field textarea { width: 100%; min-height: 37px; border: 1px solid #d6e1ee; border-radius: 8px; padding: 8px 11px; background: #fbfdff; color: var(--ink); font-size: 11px; font-weight: 560; transition: border-color .16s, box-shadow .16s, background .16s; }
.field select, .mode-control select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%235c7290' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 28px; }
.field input[type="date"] { color-scheme: light; }
.month-control input[type="month"] { color-scheme: light; font-variant-numeric: tabular-nums; }
.field input:focus, .field select:focus, .field textarea:focus, .mode-control select:focus { border-color: var(--cyan-500); background-color: #fff; box-shadow: 0 0 0 3px rgba(22, 188, 212, .13); }
.field textarea { min-height: 74px; resize: vertical; line-height: 1.55; }
.field input::placeholder, .field textarea::placeholder { color: #a0adbd; }
.filter-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 13px; padding-top: 10px; border-top: 1px solid #eef2f7; color: var(--muted); font-size: 10px; font-weight: 600; }
.filter-foot span:last-child { color: var(--blue-600); }
.history-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 11px; padding: 11px 0 1px; border-top: 1px solid #eef2f7; }
.history-strip-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.history-strip-copy .section-kicker { font-size: 9px; }
.history-status { color: var(--muted); font-size: 10px; line-height: 1.35; }
.history-strip-actions { display: flex; align-items: center; gap: 7px; }
.history-nav-button, .history-current-button { flex: 0 0 auto; height: 33px; border: 1px solid #d6e1ee; border-radius: 8px; background: #fbfdff; color: var(--navy-900); cursor: pointer; transition: border-color .16s, background .16s, box-shadow .16s; }
.history-nav-button { width: 33px; font-size: 20px; line-height: 1; }
.history-current-button { padding: 0 11px; color: var(--blue-600); font-size: 10px; font-weight: 750; white-space: nowrap; }
.history-nav-button:hover, .history-current-button:hover { border-color: var(--cyan-500); background: var(--cyan-100); }
.history-nav-button:focus-visible, .history-current-button:focus-visible, .history-month-control select:focus-visible { outline: 2px solid var(--cyan-500); outline-offset: 2px; }
.history-month-control { min-width: 0; display: flex; align-items: center; gap: 6px; color: #65768e; font-size: 10px; font-weight: 720; }
.history-month-control select { width: 154px; height: 33px; min-width: 0; appearance: none; border: 1px solid #d6e1ee; border-radius: 8px; padding: 0 27px 0 10px; background: #fbfdff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%235c7290' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center; color: var(--ink); font-size: 10px; font-weight: 650; cursor: pointer; }

.view { display: none; min-width: 0; }
.view.active { display: block; animation: view-in .18s ease-out; }
@keyframes view-in { from { opacity: .5; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
.panel { padding: 20px 21px; }
.panel + .panel { margin-top: 16px; }
.panel-title { align-items: flex-start; margin-bottom: 17px; }
.panel-title h2, .calendar-head h2, .section-intro h2 { margin: 3px 0 0; color: var(--navy-900); font-size: 15px; font-weight: 770; letter-spacing: -.025em; line-height: 1.25; }
.panel-title p, .section-intro p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.panel-icon { width: 29px; height: 29px; flex: 0 0 29px; display: grid; place-items: center; border-radius: 9px; background: var(--cyan-100); color: var(--cyan-600); font-size: 20px; line-height: 1; }
.section-intro { display: flex; justify-content: space-between; align-items: end; gap: 15px; margin: 3px 0 16px; }
.section-intro h2 { font-size: 21px; }
.section-intro p { max-width: 310px; text-align: right; }
.panel-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.panel-stack .panel { margin: 0; }
.panel-stack .panel:last-child { grid-column: 1 / -1; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi-card { min-width: 0; min-height: 145px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 15px; background: #fff; box-shadow: var(--shadow); }
.kpi-card::after { content: ""; position: absolute; width: 75px; height: 75px; right: -28px; top: -28px; border-radius: 50%; background: rgba(25, 120, 205, .045); }
.kpi-card:nth-child(2)::after { background: rgba(22, 188, 212, .07); }
.kpi-card:nth-child(3)::after { background: rgba(244, 199, 67, .1); }
.kpi-card:nth-child(4)::after { background: rgba(42, 157, 131, .07); }
.kpi-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kpi-label { color: var(--muted); font-size: 10px; font-weight: 700; }
.kpi-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--blue-100); color: var(--blue-600); font-size: 16px; }
.kpi-card:nth-child(2) .kpi-icon { background: var(--cyan-100); color: var(--cyan-600); }
.kpi-card:nth-child(3) .kpi-icon { background: var(--yellow-100); color: #ae7b00; }
.kpi-card:nth-child(4) .kpi-icon { background: var(--green-100); color: var(--green-600); }
.kpi-value { display: block; margin: 9px 0 2px; color: var(--navy-950); font-size: clamp(22px, 2.3vw, 30px); font-weight: 770; letter-spacing: -.055em; line-height: 1.13; overflow-wrap: anywhere; }
.kpi-foot, .kpi-note { color: #8291a4; font-size: 10px; line-height: 1.4; }
.kpi-foot strong, .kpi-note strong { color: var(--blue-600); }
.kpi-card .progress-track { height: 5px; margin-top: 14px; }
.kpi-underline { width: 38px; height: 3px; margin-top: 14px; border-radius: 3px; background: var(--yellow-500); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.58fr) minmax(285px, 1fr); gap: 16px; }
.dashboard-grid .panel { margin: 0; min-height: 265px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 6px; color: #697d95; font-size: 10px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.chart-legend i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; }
.legend-blue { background: var(--blue-600); }
.legend-cyan { background: var(--cyan-500); }
.legend-gold { background: var(--yellow-500); }
.trend-chart { width: 100%; min-height: 183px; display: grid; place-items: center; }
.trend-chart svg { display: block; width: 100%; height: auto; max-height: 230px; overflow: visible; }
.trend-chart .gridline, .trend-chart .chart-grid, .trend-chart .chart-gridline { stroke: #e9eff6; stroke-width: 1; }
.trend-chart text { fill: #8997a9; font-size: 10px; font-family: inherit; }
.trend-chart .line-blue { stroke: var(--blue-600); }
.trend-chart .line-cyan { stroke: var(--cyan-500); }
.trend-chart .line-gold { stroke: #e8b41e; }
.trend-chart .point { stroke: #fff; stroke-width: 1.5; }
.trend-chart .point.line-blue { fill: var(--blue-600); }
.trend-chart .point.line-cyan { fill: var(--cyan-500); }
.trend-chart .point.line-gold { fill: #e8b41e; }
#goalRing { display: grid; place-items: center; min-height: 165px; }
.goal-ring, .ring { width: 160px; height: 160px; display: grid; place-items: center; position: relative; border-radius: 50%; background: conic-gradient(var(--cyan-500) 0 var(--progress, 0%), #eaf0f7 var(--progress, 0%) 100%); }
.goal-ring::before, .ring::before { content: ""; position: absolute; inset: 23px; border-radius: 50%; background: #fff; }
.ring-center, .goal-ring-content { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; }
.ring-center strong, .goal-ring-content strong { color: var(--navy-900); font-size: 31px; font-weight: 790; letter-spacing: -.06em; line-height: 1; }
.ring-center small, .goal-ring-content small, .ring-center span, .goal-ring-content span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.ring-summary { display: flex; align-items: baseline; justify-content: center; gap: 5px; margin-top: 10px; color: var(--muted); font-size: 10px; text-align: center; }
.ring-summary strong { color: var(--cyan-600); font-size: 17px; font-weight: 800; }
.target-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 11px; border-top: 1px solid #edf1f6; color: var(--ink-soft); font-size: 10px; }
.target-foot strong { color: var(--navy-900); }
.target-foot > div { display: flex; flex-direction: column; gap: 2px; }
.target-foot > div:last-child { text-align: right; }
.target-foot > div:nth-child(2) { text-align: center; }
.target-foot span { color: var(--muted); font-size: 9px; }
.target-foot strong { font-size: 15px; font-weight: 780; }

.funnel-row { display: grid; grid-template-columns: minmax(95px, 1fr) minmax(0, 1.5fr) 47px; align-items: center; gap: 10px; margin: 0 0 16px; font-size: 10px; color: var(--ink-soft); }
.funnel-row > :last-child { text-align: right; color: var(--navy-900); font-weight: 760; }
.funnel-track, .progress-track, .bar-track { height: 8px; overflow: hidden; border-radius: 20px; background: #edf2f7; }
.funnel-fill, .progress-fill, .progress-track > span, .bar-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue-600), var(--cyan-500)); }
.funnel-row:nth-child(3n) .funnel-fill { background: linear-gradient(90deg, #12a4bb, #31c5d7); }
.funnel-list { display: grid; gap: 12px; }
.funnel-item { min-width: 0; }
.funnel-line { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; color: var(--ink-soft); font-size: 10px; }
.funnel-line strong { color: var(--navy-900); font-weight: 770; }
.funnel-item .funnel-track { height: 7px; }
.funnel-item:nth-child(2) .funnel-fill { background: linear-gradient(90deg, #1680c6, #19b3d1); }
.funnel-item:nth-child(3) .funnel-fill { background: linear-gradient(90deg, #11a5c6, #22c7d6); }
.funnel-item:nth-child(4) .funnel-fill { background: linear-gradient(90deg, #11a5c6, #53cfd6); }
.funnel-item:nth-child(5) .funnel-fill { background: linear-gradient(90deg, #e2ab13, var(--yellow-500)); }
.rate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #edf1f6; }
.rate-grid > div { min-width: 0; }
.rate-grid strong, .rate-grid span { display: block; }
.rate-grid strong { color: var(--navy-900); font-size: 14px; font-weight: 780; letter-spacing: -.035em; }
.rate-grid span { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.2; }
.weekly-row, .week-row { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid #eef2f7; color: var(--ink-soft); font-size: 10px; }
.weekly-row:last-child, .week-row:last-child { border-bottom: 0; }
.weekly-row strong, .week-row strong { color: var(--navy-900); }
.weekly-row small, .week-row small { color: var(--muted); }
.week-card { padding: 10px 0; border-bottom: 1px solid #edf1f6; }
.week-card:first-child { padding-top: 0; }
.week-card:last-child { padding-bottom: 0; border-bottom: 0; }
.week-top, .week-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.week-top { margin-bottom: 7px; color: var(--navy-900); font-size: 10px; font-weight: 750; }
.week-top small { margin-left: 3px; color: var(--muted); font-size: 9px; font-weight: 500; }
.week-top > span { font-variant-numeric: tabular-nums; }
.week-card .progress-track { height: 5px; }
.week-foot { margin-top: 6px; color: var(--muted); font-size: 9px; }
.week-foot span:last-child { color: var(--cyan-600); }

/* Visão geral executiva */
#view-dashboard .kpi-grid, .goal-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; margin-bottom: 16px; }
#view-dashboard .kpi-card { --kpi-accent: var(--blue-600); display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 170px; padding: 18px 18px 16px; }
#view-dashboard .kpi-card:nth-child(2) { --kpi-accent: var(--cyan-600); }
#view-dashboard .kpi-card:nth-child(3) { --kpi-accent: var(--green-600); }
#view-dashboard .kpi-card::after { width: 102px; height: 102px; right: -52px; top: -52px; background: color-mix(in srgb, var(--kpi-accent) 7%, transparent); }
.kpi-copy { min-width: 0; align-self: stretch; display: flex; flex: 1 1 auto; flex-direction: column; justify-content: center; gap: 2px; position: relative; z-index: 1; }
.kpi-copy .kpi-label { color: var(--ink-soft); font-size: 11px; }
.kpi-copy .kpi-value { margin: 4px 0 6px; font-size: clamp(22px, 2vw, 30px); line-height: 1.05; white-space: nowrap; }
.kpi-target, .kpi-remaining { display: block; color: var(--muted); font-size: 10px; line-height: 1.3; }
.kpi-remaining { margin-top: 4px; color: var(--navy-800); font-weight: 720; }
.kpi-meter { width: clamp(105px, 11vw, 145px); flex: 0 0 clamp(105px, 11vw, 145px); position: relative; align-self: center; color: var(--kpi-accent); }
.kpi-meter svg { width: 100%; display: block; overflow: visible; }
.gauge-track, .gauge-progress { fill: none; stroke-width: 13; stroke-linecap: round; }
.gauge-track { stroke: #e8eef5; }
.gauge-progress { stroke: var(--kpi-accent); transition: stroke-dasharray .7s cubic-bezier(.2,.75,.25,1); }
.kpi-meter-text { position: absolute; inset: auto 0 3px; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.kpi-meter-text strong { color: var(--navy-900); font-size: 20px; font-weight: 820; letter-spacing: -.045em; }
.kpi-meter-text span { color: var(--muted); font-size: 9px; }
.goal-summary-grid .panel { margin: 0; }
.goal-summary-card, .trend-verdict { --pace-color: var(--blue-600); --pace-bg: var(--blue-100); --pace-border: #cfe0f4; }
.goal-summary-card.pace-above, .goal-summary-card.pace-met, .trend-verdict.pace-above, .trend-verdict.pace-met { --pace-color: #116e54; --pace-bg: #eaf7f1; --pace-border: #bfe8d4; }
.goal-summary-card.pace-on, .trend-verdict.pace-on { --pace-color: #185aab; --pace-bg: #eaf3ff; --pace-border: #c7ddf6; }
.goal-summary-card.pace-below, .trend-verdict.pace-below { --pace-color: #aa3944; --pace-bg: #fff0f1; --pace-border: #efc5c9; }
.goal-summary-card.pace-pending, .trend-verdict.pace-pending { --pace-color: #826400; --pace-bg: #fff8df; --pace-border: #ebd99a; }
.goal-summary-card.pace-unavailable, .trend-verdict.pace-unavailable { --pace-color: #53677e; --pace-bg: #f1f4f8; --pace-border: #dce3eb; }
.goal-summary-card { min-height: 231px; border-color: var(--pace-border); border-top: 4px solid var(--pace-color); padding: 14px 18px 14px; background: linear-gradient(180deg, var(--pace-bg) 0, #fff 94px); }
.goal-card-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.goal-card-heading h2 { margin: 2px 0 1px; color: var(--navy-900); font-size: 15px; font-weight: 790; letter-spacing: -.025em; }
.goal-card-heading p { margin: 0; color: var(--muted); font-size: 10px; }
.goal-card-mark { width: 27px; height: 27px; display: grid; place-items: center; flex: 0 0 27px; border-radius: 8px; background: var(--pace-bg); color: var(--pace-color); font-size: 18px; }
.pace-status { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; border: 1px solid var(--pace-border); border-radius: 999px; margin-top: 9px; padding: 4px 9px; background: var(--pace-bg); color: var(--pace-color); font-size: 10px; font-weight: 800; line-height: 1.3; }
.pace-status::before { content: ""; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: currentColor; }
.goal-stat { display: flex; align-items: baseline; gap: 5px; margin-top: 9px; }
.goal-stat > strong { color: var(--navy-950); font-size: 29px; font-weight: 820; letter-spacing: -.06em; line-height: 1; }
.goal-stat > span { color: var(--muted); font-size: 10px; }
.goal-stat > b { margin-left: auto; color: var(--cyan-600); font-size: 15px; font-weight: 820; white-space: nowrap; }
.goal-summary-card .goal-stat > b { color: var(--pace-color); }
.goal-summary-card .progress-track { height: 7px; margin-top: 9px; }
.goal-summary-card .progress-track > span { background: var(--pace-color); }
.goal-levels { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; margin-top: 11px; }
.goal-level { display: flex; flex-direction: column; gap: 1px; min-width: 0; border: 1px solid #eaf0f6; border-radius: 8px; padding: 5px 8px; background: #f8fbfe; }
.goal-level:nth-child(2) { border-color: #c9e9f2; background: #effafd; }
.goal-level small { color: var(--muted); font-size: 9px; }
.goal-level strong { color: var(--navy-800); font-size: 13px; line-height: 1.1; }
.goal-card-foot, .goal-daily-details { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3px 8px; margin-top: 10px; color: var(--muted); font-size: 10px; }
.goal-card-foot strong, .goal-daily-details strong { color: var(--navy-900); font-weight: 800; }
.goal-pace { margin: 6px 0 0; color: var(--pace-color); font-size: 10px; font-weight: 760; }
.goal-secondary { margin: 5px 0 0; color: var(--muted); font-size: 9px; }
.goal-off-track { margin-top: 9px; border: 1px dashed #d5e0ec; border-radius: 7px; padding: 4px 7px; background: #f8fbfe; color: var(--muted); font-size: 9px; }
#view-dashboard .dashboard-grid { grid-template-columns: minmax(0,1fr); }
#view-dashboard .dashboard-grid .panel { min-height: 0; }
#view-dashboard .trend-panel { min-height: 315px; }
#view-dashboard .trend-chart { position: relative; display: block; min-height: 250px; }
#view-dashboard .trend-chart svg { width: 100%; height: 250px; max-height: none; }
.trend-scroll { border-radius: 10px; scrollbar-color: #cbd7e5 transparent; }
.trend-toggle { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #dce6f1; border-radius: 20px; padding: 5px 9px; background: #fff; color: var(--navy-800); font-size: 10px; font-weight: 720; transition: background .15s, opacity .15s, border-color .15s; }
.trend-toggle:hover { border-color: #9acde0; background: #f3fbff; }
.trend-toggle.is-off { opacity: .52; background: #f5f7fa; }
.trend-toggle i, .trend-tooltip-row i { width: 8px; height: 8px; display: inline-block; flex: 0 0 8px; border-radius: 50%; }
.trend-tooltip { position: absolute; z-index: 5; min-width: 165px; border: 1px solid #d9e5ef; border-radius: 10px; padding: 9px 10px; background: rgba(255,255,255,.98); color: var(--navy-900); box-shadow: 0 10px 26px rgba(15,43,77,.16); pointer-events: none; font-size: 10px; }
.trend-tooltip > strong { display: block; margin-bottom: 5px; font-size: 11px; }
.trend-tooltip-row { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.trend-tooltip-row b { margin-left: auto; color: var(--navy-900); }
.trend-tooltip-row.is-off { opacity: .46; }
.trend-muted-note { margin: 8px 0 0; color: var(--muted); font-size: 10px; }
.trend-verdict { display: grid; gap: 5px; border: 1px solid var(--pace-border); border-left: 4px solid var(--pace-color); border-radius: 10px; margin-top: 14px; padding: 12px 14px; background: var(--pace-bg); color: var(--navy-900); }
.trend-verdict:empty { display: none; }
.trend-verdict strong { color: var(--pace-color); font-size: 13px; font-weight: 800; line-height: 1.35; }
.trend-verdict p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.trend-verdict small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.trend-diagnosis { border: 1px solid #dce6f0; border-radius: 10px; margin-top: 10px; background: #fff; }
.trend-diagnosis summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; border-radius: 9px; padding: 11px 14px; color: var(--blue-600); cursor: pointer; font-size: 11px; font-weight: 800; line-height: 1.4; }
.trend-diagnosis summary::-webkit-details-marker { display: none; }
.trend-diagnosis summary::after { content: "⌄"; flex: 0 0 auto; color: var(--blue-600); font-size: 19px; font-weight: 500; line-height: .7; transition: transform .15s ease; }
.trend-diagnosis[open] summary::after { transform: rotate(180deg); }
.trend-diagnosis summary:hover { background: #f5f9fd; }
.trend-diagnosis summary:focus-visible { outline: 2px solid var(--cyan-600); outline-offset: 2px; }
.diagnosis-content { border-top: 1px solid #e8eef5; padding: 13px 14px 15px; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }
.diagnosis-content > :first-child { margin-top: 0; }
.diagnosis-content > :last-child { margin-bottom: 0; }
.diagnosis-content h3 { margin: 12px 0 5px; color: var(--navy-900); font-size: 12px; font-weight: 800; }
.diagnosis-content p { margin: 5px 0; }
.diagnosis-content ul, .diagnosis-content ol { margin: 8px 0; padding-left: 20px; }
.diagnosis-content li + li { margin-top: 6px; }
.diagnosis-content strong { color: var(--navy-900); }
.diagnosis-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); gap: 9px; list-style: none; margin: 10px 0; padding: 0; }
.diagnosis-item { min-width: 0; border: 1px solid #e4ebf3; border-radius: 9px; padding: 10px 11px; background: #f9fbfe; }
.diagnosis-item strong { display: block; margin-bottom: 4px; }
.diagnosis-item p { margin: 0; }
.diagnosis-note { border-top: 1px solid #e8eef5; margin-top: 12px; padding-top: 10px; color: var(--muted); font-size: 10px; }
.funnel-layout { display: grid; grid-template-columns: minmax(210px, .7fr) minmax(0, 1.7fr); align-items: center; gap: 19px; }
.funnel-graphic { min-width: 0; border-radius: 12px; padding: 9px 10px 6px; background: #f7fbfe; text-align: center; }
.funnel-graphic svg { width: 100%; height: 260px; display: block; }
.funnel-graphic p { margin: 1px 0 0; color: var(--muted); font-size: 9px; }
.funnel-diagnostics { min-width: 0; display: grid; gap: 6px; }
.funnel-diagnostic { --status-color: #bdc9d7; min-width: 0; border: 1px solid #e6edf5; border-left: 4px solid var(--status-color); border-radius: 9px; padding: 7px 9px; background: #fff; }
.funnel-diagnostic.status-below, .funnel-overall.status-below { --status-color: var(--red-600); }
.funnel-diagnostic.status-within, .funnel-overall.status-within { --status-color: var(--blue-600); }
.funnel-diagnostic.status-above, .funnel-overall.status-above { --status-color: var(--green-600); }
.funnel-diag-main { display: flex; align-items: center; gap: 7px; }
.funnel-step { color: var(--cyan-600); font-size: 9px; font-weight: 800; }
.funnel-diag-main strong { color: var(--navy-900); font-size: 11px; }
.funnel-diag-main b { margin-left: auto; color: var(--navy-950); font-size: 14px; }
.funnel-diag-meta { display: flex; flex-wrap: wrap; gap: 4px 13px; margin-top: 2px; color: var(--muted); font-size: 9px; }
.funnel-diag-meta strong { color: var(--navy-800); font-weight: 740; }
.funnel-status { color: var(--status-color); font-weight: 800; }
.funnel-overall { --status-color: #8393a6; display: flex; align-items: center; flex-wrap: wrap; gap: 5px 15px; border-left: 4px solid var(--status-color); border-radius: 8px; margin-top: 13px; padding: 9px 12px; background: #f5f9fd; }
.funnel-overall > strong { color: var(--navy-900); font-size: 11px; }
.funnel-overall > span { margin-left: auto; color: var(--navy-950); font-size: 14px; font-weight: 800; }
.funnel-overall small { color: var(--muted); font-size: 9px; font-weight: 500; }
.funnel-overall > b { color: var(--status-color); font-size: 10px; }
.funnel-no-base { margin-bottom: 11px; border: 1px solid #dce6f0; border-radius: 9px; padding: 9px 11px; background: #f7fbff; color: var(--ink-soft); font-size: 10px; }
.funnel-caveat { margin: 10px 0 0; color: var(--muted); font-size: 9px; }
.weekly-card-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.week-planning-card { --week-color: var(--blue-600); min-width: 0; display: flex; flex-direction: column; align-items: stretch; border: 1px solid #dce6f0; border-top: 3px solid var(--week-color); border-radius: 11px; padding: 10px 11px; background: #fff; color: var(--ink); text-align: left; transition: transform .16s, box-shadow .16s, border-color .16s; }
.week-planning-card:hover { transform: translateY(-2px); box-shadow: 0 10px 23px rgba(19,48,87,.09); }
.week-planning-card.status-nao_iniciada { --week-color: #8ca1b9; }
.week-planning-card.status-no_ritmo { --week-color: var(--blue-600); }
.week-planning-card.status-atencao { --week-color: #b78613; }
.week-planning-card.status-atrasada { --week-color: var(--red-600); }
.week-planning-card.status-meta_atingida, .week-planning-card.status-super_meta_atingida { --week-color: var(--green-600); }
.week-planning-card.status-encerrada { --week-color: #72839a; }
.week-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 4px; }
.week-card-top strong { color: var(--navy-900); font-size: 12px; }
.week-card-top > span { color: var(--muted); font-size: 9px; white-space: nowrap; }
.week-status { align-self: flex-start; border-radius: 20px; margin-top: 5px; padding: 3px 7px; background: color-mix(in srgb,var(--week-color) 11%,white); color: var(--week-color); font-size: 9px; font-weight: 780; }
.week-card-numbers { display: flex; align-items: baseline; gap: 3px; margin-top: 9px; white-space: nowrap; }
.week-card-numbers > strong { color: var(--navy-950); font-size: 25px; line-height: 1; }
.week-card-numbers > span { color: var(--muted); font-size: 9px; }
.week-card-numbers > b { margin-left: auto; color: var(--week-color); font-size: 11px; }
.week-planning-card .progress-track { height: 6px; margin-top: 7px; }
.week-planning-card .progress-track > span { background: var(--week-color); }
.week-card-stats { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1px 5px; margin-top: 8px; color: var(--muted); font-size: 9px; }
.week-card-stats strong { color: var(--navy-900); }
.week-card-close { display: flex; flex-direction: column; gap: 1px; border-radius: 6px; margin-top: auto; padding: 5px 7px; background: var(--yellow-100); color: var(--navy-900); font-size: 9px; }
.week-card-close small { color: var(--muted); font-size: 9px; }
.week-card-scope { margin-top: 5px; color: var(--cyan-600); font-size: 8px; font-weight: 700; }

.calendar-layout { display: grid; grid-template-columns: minmax(0, 1.58fr) minmax(280px, .86fr); align-items: start; gap: 16px; margin-bottom: 16px; }
.calendar-layout .panel { margin: 0; }
.calendar-panel { padding: 21px; }
.calendar-head { align-items: center; margin-bottom: 19px; }
.calendar-head h2 { font-size: 20px; letter-spacing: -.035em; }
.calendar-nav { display: inline-flex; align-items: center; gap: 5px; }
.calendar-nav button { height: 30px; min-width: 30px; display: grid; place-items: center; border: 1px solid #dce5ef; border-radius: 8px; padding: 0 7px; background: #fff; color: var(--navy-700); font-size: 19px; font-weight: 650; line-height: 1; }
.calendar-nav button:hover { border-color: #a9cbe4; background: #f0f8fd; }
.calendar-nav #calendarToday { min-width: 47px; font-size: 10px; }
.weekday-row, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.weekday-row { gap: 5px; margin-bottom: 5px; text-align: center; }
.weekday-row span { padding: 5px 0; color: #8a9bae; font-size: 9px; font-weight: 800; letter-spacing: .08em; }
.calendar-grid { gap: 5px; }
.calendar-cell { min-width: 0; min-height: 95px; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; overflow: hidden; border: 1px solid #e8edf4; border-radius: 10px; padding: 8px; background: #fff; color: var(--ink); text-align: left; font-size: 10px; line-height: 1.25; transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
button.calendar-cell:hover { z-index: 1; border-color: #69c7df; box-shadow: 0 5px 14px rgba(15, 117, 155, .1); transform: translateY(-1px); }
.calendar-cell.outside { background: #f7f9fc; color: #b9c4d1; opacity: .65; }
.calendar-cell.operational { background: #f5faff; border-color: #d8e9fa; }
.calendar-cell.holiday { background: #fff5f6; border-color: #f2dfe2; }
.calendar-cell.special { background: #fff9e9; border-color: #f3dea2; }
.calendar-cell.today { box-shadow: inset 0 0 0 2px rgba(24, 98, 181, .27); }
.calendar-cell.selected, .calendar-cell.selected:hover { z-index: 2; border-color: var(--blue-600); background: #eaf5ff; box-shadow: inset 0 0 0 1px var(--blue-600), 0 5px 14px rgba(24, 98, 181, .12); }
.calendar-cell.met::after, .calendar-cell.below::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--green-600); }
.calendar-cell.below::after { background: var(--red-600); }
.calendar-cell.empty::after { background: #c7d2de; }
.calendar-cell .day-number, .calendar-cell .date-number, .calendar-cell .calendar-date, .calendar-cell .calendar-day { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; color: var(--navy-900); font-size: 11px; font-weight: 780; }
.calendar-cell .cell-day { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; color: var(--navy-900); font-size: 11px; font-weight: 780; }
.calendar-cell.outside .day-number, .calendar-cell.outside .date-number { color: #aab6c5; }
.calendar-cell.outside .cell-day { color: #aab6c5; }
.calendar-cell.today .day-number, .calendar-cell.today .date-number { border-radius: 50%; background: var(--navy-900); color: #fff; }
.calendar-cell.today .cell-day { border-radius: 50%; background: var(--navy-900); color: #fff; }
.calendar-cell .day-label, .calendar-cell .calendar-label, .calendar-cell .holiday-name { max-width: 100%; color: #98754a; font-size: 9px; line-height: 1.2; overflow-wrap: anywhere; }
.calendar-cell.holiday .holiday-name, .calendar-cell.holiday .day-label { color: var(--red-600); }
.calendar-cell .day-stats, .calendar-cell .calendar-stats, .calendar-cell .day-meta, .calendar-cell .calendar-meta { display: block; max-width: 100%; color: #5d7690; font-size: 9px; line-height: 1.3; overflow-wrap: anywhere; }
.calendar-cell.met .day-stats, .calendar-cell.met .day-meta { color: var(--green-600); }
.calendar-cell.below .day-stats, .calendar-cell.below .day-meta { color: var(--red-600); }
.calendar-cell small { display: block; max-width: 100%; color: #667d95; font-size: 9px; line-height: 1.3; overflow-wrap: anywhere; }
.calendar-cell.holiday small { color: var(--red-600); }
.calendar-cell.special small { color: #936e13; }
.calendar-cell.met small { color: var(--green-600); font-weight: 700; }
.calendar-cell.below small { color: var(--red-600); font-weight: 700; }
.calendar-cell .cell-status { width: 5px; height: 5px; position: absolute; right: 8px; top: 14px; border-radius: 50%; background: #ced7e2; }
.calendar-cell.operational .cell-status { background: var(--blue-500); }
.calendar-cell.holiday .cell-status { background: var(--red-600); }
.calendar-cell.special .cell-status { background: #e8b41e; }
.calendar-cell.met .cell-status { background: var(--green-600); }
.calendar-cell.below .cell-status { background: var(--red-600); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #edf1f6; color: #687c95; font-size: 9px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.calendar-legend i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #c9d4e1; }
.calendar-legend .dot-operational { background: var(--blue-500); }
.calendar-legend .dot-off { background: #a4b1c1; }
.calendar-legend .dot-holiday { background: var(--red-600); }
.calendar-legend .dot-special { background: var(--yellow-500); }
.calendar-legend .dot-met { background: var(--green-600); }
.calendar-legend .dot-below { background: #e28788; }
.calendar-legend .dot-empty { background: #d5dee8; }
.day-panel { min-height: 410px; }
.day-panel h2, .day-panel h3 { margin: 0 0 8px; color: var(--navy-900); font-size: 17px; letter-spacing: -.03em; }
.day-panel h3 { margin-top: 18px; font-size: 12px; }
.day-panel p { color: var(--muted); font-size: 11px; }
.day-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.day-heading { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.day-heading h2 { margin: 3px 0 0; font-size: 21px; }
.day-heading p { margin: 2px 0 0; color: var(--muted); font-size: 10px; }
.day-score { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 15px 0 10px; }
.day-score > div { border: 1px solid #e2eaf3; border-radius: 10px; padding: 11px; background: #f7faff; }
.day-score > div:first-child { border-color: #cdeaf0; background: #eefbfc; }
.day-score strong, .day-score span { display: block; }
.day-score strong { color: var(--navy-900); font-size: 23px; font-weight: 790; line-height: 1.1; letter-spacing: -.05em; }
.day-score span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.day-panel .progress-track { height: 7px; }
.day-progress { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--muted); font-size: 9px; }
.day-progress strong { color: var(--blue-600); font-weight: 750; }
.day-grid, .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.day-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.day-metrics > div { border: 1px solid #e8edf3; border-radius: 9px; padding: 8px 10px; background: #f9fbfe; }
.day-metrics span, .day-metrics strong { display: block; }
.day-metrics span { color: var(--muted); font-size: 9px; }
.day-metrics strong { color: var(--navy-900); font-size: 15px; font-weight: 780; }
.day-rates { display: grid; gap: 5px; }
.day-rates > span, .day-product, .day-person { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 5px 0; border-bottom: 1px solid #f0f3f7; color: var(--ink-soft); font-size: 10px; }
.day-rates > span:last-child, .day-product:last-child, .day-person:last-child { border-bottom: 0; }
.day-rates b, .day-product strong, .day-person strong { color: var(--navy-900); font-weight: 760; text-align: right; white-space: nowrap; }
.day-person small { color: var(--muted); font-size: 9px; }
.day-stat, .detail-stat { min-width: 0; border: 1px solid #e8edf3; border-radius: 9px; padding: 9px 10px; background: #f9fbfe; }
.day-stat span, .detail-stat span { display: block; color: var(--muted); font-size: 9px; }
.day-stat strong, .detail-stat strong { display: block; color: var(--navy-900); font-size: 17px; font-weight: 770; letter-spacing: -.03em; }
.day-section { margin-top: 15px; padding-top: 12px; border-top: 1px solid #edf1f6; }
.day-section h3 { margin-top: 0; }
.weeks-section { margin-bottom: 16px; }
.weeks-section + .panel { margin-top: 0; }

.entry-grid, .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; margin-bottom: 16px; }
.entry-grid .panel, .settings-grid .panel { margin: 0; }
.settings-grid { grid-template-areas: "main team" "main calendar" "main bonus"; grid-template-rows: auto auto auto; }
.settings-grid > .panel:nth-child(1) { grid-area: main; }
.settings-grid > .panel:nth-child(2) { grid-area: team; }
.settings-grid > .panel:nth-child(3) { grid-area: calendar; }
.settings-grid > .panel:nth-child(4) { grid-area: bonus; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 11px; margin-bottom: 13px; }
.form-grid .field { gap: 5px; }
.form-grid .field input, .form-grid .field select { min-height: 39px; }
.form-hint { margin: 7px 0 14px; color: var(--muted); font-size: 10px; line-height: 1.55; }
.form-actions, .backup-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.settings-grid form > .field { margin-bottom: 12px; }
.bonus-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-bottom: 15px; }
.bonus-fields > strong, .bonus-fields > h3, .bonus-heading { grid-column: 1 / -1; margin: 10px 0 0; color: var(--navy-900); font-size: 11px; }
.bonus-group { border: 1px solid #e5ebf3; border-radius: 10px; padding: 10px 11px; background: #fafcff; }
.bonus-group > strong { display: block; margin-bottom: 8px; color: var(--navy-900); font-size: 10px; }
.bonus-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bonus-row .field input { min-height: 34px; }
.file-button { position: relative; overflow: hidden; cursor: pointer; }
.file-button input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-button:focus-within { outline: 3px solid rgba(22, 188, 212, .66); outline-offset: 3px; }

.table-wrap, #goalLevels, #goalProducts, #dailyTargets, #weeklyTable, #weeklyProducts, #productResults, #teamResults, #payTable, #paySimulation, #activitiesTable, #salesTable, #recentActivity, #dashboardWeeks { min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; min-width: 540px; border-collapse: collapse; text-align: left; }
th, td { padding: 10px 9px; border-bottom: 1px solid #edf1f6; vertical-align: middle; }
th { color: #657a92; background: #f8fafc; font-size: 9px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; white-space: nowrap; }
td { color: var(--ink-soft); font-size: 10px; }
td strong, td b { color: var(--navy-900); font-weight: 750; }
.table-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; font-weight: 500; }
.table-actions { display: inline-flex; gap: 5px; white-space: nowrap; }
.table-button { min-height: 25px; border: 1px solid #d2dfed; border-radius: 6px; padding: 3px 7px; background: #f7fbff; color: var(--blue-600); font-size: 9px; font-weight: 750; white-space: nowrap; }
.table-button:hover { border-color: #9cc3e7; background: #eaf4ff; }
.table-button.danger { border-color: #f0d3d7; background: #fff7f7; color: var(--red-600); }
.table-button.danger:hover { background: #ffebee; }
tbody tr:hover { background: #f9fcff; }
tbody tr:last-child td { border-bottom-color: transparent; }
tfoot td { background: #f5f9fd; color: var(--navy-900); font-weight: 760; }
.num, th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pill, .status-pill { display: inline-flex; align-items: center; border-radius: 100px; padding: 3px 8px; background: var(--blue-100); color: var(--blue-600); font-size: 9px; font-weight: 760; white-space: nowrap; }
.pill.good, .status-pill.good { background: var(--green-100); color: var(--green-600); }
.pill.warn, .status-pill.warn { background: var(--yellow-100); color: #996c00; }
.pill.bad, .status-pill.bad { background: var(--red-100); color: var(--red-600); }
.pill.success { background: var(--green-100); color: var(--green-600); }
.pill.warning { background: var(--yellow-100); color: #996c00; }
.pill.neutral { background: #edf2f7; color: #66798e; }
.muted { color: var(--muted); }
.empty-state, .empty, .no-data { display: grid; justify-items: center; align-content: center; min-height: 125px; border: 1px dashed #d6e1ed; border-radius: 12px; padding: 17px; background: #fafcff; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.5; }
.empty-state strong, .empty strong { color: var(--navy-800); font-size: 12px; }
.empty-state p, .empty p { margin: 4px 0 0; }
.empty-state > span { width: 29px; height: 29px; display: grid; place-items: center; margin-bottom: 7px; border-radius: 9px; background: var(--cyan-100); color: var(--cyan-600); font-size: 19px; }

.toast { position: fixed; right: 22px; bottom: 20px; z-index: 90; max-width: min(380px, calc(100vw - 32px)); border: 1px solid #cce7e8; border-radius: 10px; padding: 11px 15px; background: #e9f9f8; color: #126d6e; box-shadow: 0 15px 34px rgba(13, 57, 80, .16); font-size: 11px; font-weight: 700; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.toast.show, .toast.visible { opacity: 1; transform: translateY(0); }
.toast.error { border-color: #f1ccd0; background: #fff0f1; color: #a83746; }

@media (max-width: 1350px) {
  .shell { grid-template-columns: 226px minmax(0, 1fr); }
  .brand { padding-left: 9px; }
  .nav-link { gap: 11px; padding-inline: 11px; }
  .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .weekly-card-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 1120px) {
  .today-chip { display: none; }
  .topbar-actions { gap: 9px; }
  .dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-card { min-height: 130px; }
  #view-dashboard .kpi-grid, .goal-summary-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .goal-summary-card:last-child { grid-column: 1 / -1; }
  .calendar-layout { grid-template-columns: minmax(0, 1fr); }
  .day-panel { min-height: auto; }
}

@media (max-width: 860px) {
  .auth-screen { grid-template-columns: minmax(0, 1fr); }
  .auth-intro { min-height: 275px; padding: 112px 24px 31px; }
  .auth-brand { top: 28px; left: 24px; }
  .auth-intro h1 { max-width: 560px; font-size: clamp(31px, 5vw, 44px); }
  .auth-intro p { margin-top: 12px; font-size: 12px; }
  .auth-intro-mark { right: 4%; bottom: -9%; font-size: 90px; }
  .auth-main { padding: 25px 20px 36px; }
  .shell { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(290px, calc(100vw - 46px)); height: 100dvh; min-height: 0; overflow-y: auto; transform: translateX(-105%); transition: transform .22s ease; box-shadow: 16px 0 50px rgba(4, 18, 39, .2); }
  .sidebar.open { transform: translateX(0); }
  body:has(.sidebar.open)::before { content: ""; position: fixed; inset: 0; z-index: 29; background: rgba(5, 20, 44, .5); }
  body:has(.sidebar.open) { overflow: hidden; }
  .topbar { min-height: 64px; flex-wrap: wrap; padding: 11px 21px; }
  .topbar-actions { flex: 1; flex-wrap: wrap; }
  .view-switcher:not(.hidden) { order: 2; width: 100%; justify-content: flex-end; margin-top: 3px; }
  .mobile-menu { width: 35px; height: 35px; display: grid; place-items: center; flex: 0 0 35px; border: 1px solid #dce6f1; border-radius: 9px; background: #fff; color: var(--navy-900); font-size: 18px; }
  .mobile-brand { display: block; color: var(--navy-900); font-size: 15px; font-weight: 780; letter-spacing: -.045em; white-space: nowrap; }
  .mobile-brand span { color: var(--cyan-600); }
  .crumb { display: none; }
  .main { padding: 26px 21px 52px; }
}

@media (max-width: 680px) {
  .auth-intro { min-height: 250px; padding-top: 105px; }
  .auth-intro h1 { font-size: 32px; }
  .auth-card { padding: 24px; }
  .auth-card-heading h2 { font-size: 25px; }
  .role-context-grid { grid-template-columns: minmax(0, 1fr); }
  .topbar { gap: 10px; padding-inline: 15px; }
  .topbar-actions { gap: 8px; }
  .topbar-actions .mode-control > span { display: none; }
  .account-identity { display: none; }
  .account-menu > summary { padding-right: 5px; }
  .account-chevron { display: none; }
  .view-switcher { flex-wrap: wrap; }
  .view-switcher label { flex: 1 1 150px; }
  .view-switcher select { flex: 1; max-width: 100%; }
  .view-switcher label > span { padding-left: 3px; }
  .mode-control select { min-width: 105px; height: 34px; }
  #openEntries { width: 35px; min-width: 35px; min-height: 35px; overflow: hidden; padding: 0 10px; font-size: 0; }
  #openEntries::before { content: "＋"; font-size: 18px; }
  .main { padding: 23px 15px 44px; }
  #view-dashboard .kpi-grid, .goal-summary-grid, .weekly-card-grid { grid-template-columns: minmax(0,1fr); }
  .goal-summary-card:last-child { grid-column: auto; }
  .funnel-layout { grid-template-columns: minmax(0,1fr); }
  .funnel-graphic svg { height: 225px; }
  .page-heading { display: block; margin-bottom: 18px; }
  .page-heading h1 { font-size: 27px; }
  .heading-badges { justify-content: flex-start; margin-top: 13px; }
  .filter-card, .panel { border-radius: 14px; }
  .filter-card { padding: 15px; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history-strip { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .history-strip-actions { justify-content: flex-start; }
  .dashboard-grid, .entry-grid, .settings-grid, .panel-stack { grid-template-columns: minmax(0, 1fr); }
  .settings-grid { grid-template-areas: "main" "team" "calendar" "bonus"; grid-template-rows: auto; }
  .panel-stack .panel:last-child { grid-column: auto; }
  .dashboard-grid .panel { min-height: 0; }
  .section-intro { display: block; }
  .section-intro p { max-width: none; text-align: left; }
  .calendar-panel { padding: 15px; }
  .calendar-cell { min-height: 76px; padding: 5px; }
  .calendar-cell .day-label, .calendar-cell .calendar-label, .calendar-cell .holiday-name, .calendar-cell .day-stats, .calendar-cell .calendar-stats, .calendar-cell .day-meta, .calendar-cell .calendar-meta { font-size: 8px; }
  .calendar-cell small { font-size: 8px; }
  .calendar-legend { gap: 8px 11px; }
}

@media (max-width: 450px) {
  .auth-intro { min-height: 220px; padding: 92px 19px 23px; }
  .auth-brand { top: 21px; left: 19px; }
  .auth-intro h1 { font-size: 29px; }
  .auth-intro p { font-size: 11px; }
  .auth-main { padding: 15px 12px 26px; }
  .auth-card { padding: 19px; border-radius: 15px; }
  .auth-tabs { margin-bottom: 24px; }
  .auth-form { gap: 12px; }
  .account-admin-panel #inviteForm { grid-template-columns: minmax(0, 1fr); }
  .account-admin-panel #inviteForm .button { width: 100%; }
  .mobile-brand { font-size: 13px; }
  .topbar-actions .mode-control select { min-width: 91px; width: 91px; padding-left: 7px; font-size: 10px; }
  .eyebrow { font-size: 8px; gap: 7px; }
  .eyebrow-rule { width: 14px; }
  .filter-grid { gap: 8px; }
  .filter-grid .field:first-child { grid-column: 1 / -1; }
  .filter-foot { font-size: 9px; }
  .history-strip-actions { display: grid; grid-template-columns: 33px minmax(0, 1fr) 33px auto; gap: 5px; }
  .history-month-control { min-width: 0; }
  .history-month-control > span { display: none; }
  .history-month-control select { width: 100%; }
  .history-current-button { padding-inline: 7px; font-size: 9px; }
  .kpi-grid { gap: 9px; }
  .kpi-card { min-height: 123px; padding: 13px; }
  .kpi-value { font-size: 22px; }
  .kpi-icon { width: 25px; height: 25px; font-size: 14px; }
  .panel { padding: 16px; }
  .panel-title { gap: 9px; }
  .panel-title h2 { font-size: 14px; }
  .calendar-head h2 { font-size: 17px; }
  .weekday-row, .calendar-grid { gap: 3px; }
  .weekday-row span { font-size: 8px; }
  .calendar-cell { min-height: 65px; padding: 4px; border-radius: 7px; }
  .calendar-cell .day-label, .calendar-cell .calendar-label, .calendar-cell .holiday-name { display: none; }
  .calendar-cell .day-number, .calendar-cell .date-number, .calendar-cell .cell-day { min-width: 18px; height: 18px; font-size: 10px; }
  .calendar-cell .cell-status { right: 5px; top: 9px; }
  .calendar-cell small { font-size: 7px; line-height: 1.15; }
  .form-grid { gap: 10px 8px; }
  .bonus-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .backup-actions .button { width: 100%; }
  .toast { right: 16px; bottom: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}