@charset "utf-8";

@property --chart-glow { syntax: "<color>"; inherits: true; initial-value: #5ca8ef; }

:root {
    color-scheme: light;
    --body: #dce8f2;
    --body-deep: #b7cee0;
    --ambient: rgba(50, 120, 190, .24);
    --frame: #edf4f9;
    --sidebar: #d4e3ee;
    --surface: #ffffff;
    --surface-2: #eaf2f8;
    --surface-3: #dfeaf3;
    --line: rgba(25, 66, 104, .12);
    --line-strong: rgba(25, 66, 104, .22);
    --text: #14283d;
    --muted: #6d7e91;
    --faint: #93a4b5;
    --accent: #2f79c2;
    --accent-2: #5ca5e6;
    --accent-soft: #dbeeff;
    --selected: #153f6c;
    --positive: #138d78;
    --negative: #d65d6e;
    --warning: #d18435;
    --shadow: 0 30px 90px rgba(22, 52, 80, .22);
    --card-shadow: 0 8px 28px rgba(33, 77, 116, .07);
    --spotlight-strength: 9%;
    --aurora-opacity: .2;
    --radius-xl: 28px;
    --radius-lg: 19px;
    --radius-md: 14px;
    --font-body: "Pretendard", "Noto Sans JP", system-ui, sans-serif;
    --font-display: "Clash Display", "ClashDisplay-Variable", "Pretendard", "Noto Sans JP", sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --body: #040b14;
    --body-deep: #071a2c;
    --ambient: rgba(43, 111, 210, .28);
    --frame: #091827;
    --sidebar: #0b2034;
    --surface: #102944;
    --surface-2: #0d2339;
    --surface-3: #183653;
    --line: rgba(170, 205, 236, .1);
    --line-strong: rgba(170, 205, 236, .2);
    --text: #f2f7fb;
    --muted: #98adbf;
    --faint: #71879b;
    --accent: #5ca8ef;
    --accent-2: #79c1ff;
    --accent-soft: #153a5c;
    --selected: #bcdaf1;
    --positive: #55cbb4;
    --negative: #ff8391;
    --warning: #f1a553;
    --shadow: 0 36px 110px rgba(0, 0, 0, .52);
    --card-shadow: 0 10px 30px rgba(0, 0, 0, .14);
    --spotlight-strength: 13%;
    --aurora-opacity: .28;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
    min-width: 320px; color: var(--text); background: var(--body);
    font-family: var(--font-body); font-size: 15px; font-weight: 400;
    -webkit-font-smoothing: antialiased; overflow: hidden;
    transition: color .25s ease, background .35s ease;
}
button, input, select, textarea { color: inherit; font: inherit; }
button, select { cursor: pointer; }
button { border: 0; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 999; left: 20px; top: -80px; padding: 12px 18px; color: #fff; background: #000; border-radius: 8px; }
.skip-link:focus { top: 20px; }

.ambient { position: fixed; z-index: 0; border-radius: 50%; filter: blur(12px); pointer-events: none; will-change: transform; }
.ambient-a { width: 62vw; height: 62vw; left: -22vw; top: -24vw; background: radial-gradient(circle, var(--ambient), transparent 68%); animation: ambientFloatA 16s ease-in-out infinite alternate; }
.ambient-b { width: 58vw; height: 58vw; right: -21vw; bottom: -30vw; background: radial-gradient(circle, color-mix(in srgb, var(--ambient) 58%, #825bff 42%), transparent 70%); animation: ambientFloatB 19s ease-in-out infinite alternate; }
.ambient-c { width: 34vw; height: 34vw; min-width: 430px; min-height: 430px; right: 2vw; top: -13vw; opacity: .58; background: radial-gradient(circle at 45% 52%, rgba(255,185,90,.5), rgba(255,112,103,.3) 34%, rgba(205,93,180,.14) 55%, transparent 72%); filter: blur(20px); animation: ambientFloatC 17s ease-in-out infinite alternate; }
.ambient-d { width: 300px; height: 300px; left: 44vw; top: 4vh; opacity: .28; background: conic-gradient(from 35deg, #ffba66, #9b68ec, #54d7bd, #ff7f83, #ffba66); filter: blur(12px); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 34px), #000 calc(100% - 32px)); mask: radial-gradient(farthest-side, transparent calc(100% - 34px), #000 calc(100% - 32px)); animation: ambientRing 21s ease-in-out infinite alternate; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; opacity: .28; background-image: radial-gradient(circle at center, rgba(255,255,255,.32) 0 1px, transparent 1.3px); background-size: 34px 34px; mask-image: linear-gradient(130deg, #000, transparent 62%); }

@keyframes ambientFloatA { from { transform: translate3d(-2vw,-1vh,0) scale(.96); } to { transform: translate3d(8vw,7vh,0) scale(1.1); } }
@keyframes ambientFloatB { from { transform: translate3d(2vw,3vh,0) scale(1.04); } to { transform: translate3d(-9vw,-7vh,0) scale(.92); } }
@keyframes ambientFloatC { from { transform: translate3d(4vw,-2vh,0) scale(.94); } to { transform: translate3d(-8vw,9vh,0) scale(1.12); } }
@keyframes ambientRing { from { transform: translate3d(-3vw,-2vh,0) rotate(-12deg) scale(.92); } to { transform: translate3d(8vw,8vh,0) rotate(28deg) scale(1.12); } }
@keyframes auroraDrift { 0% { transform: translate3d(-6%,-4%,0) rotate(-8deg) scale(1); } 50% { transform: translate3d(7%,4%,0) rotate(7deg) scale(1.08); } 100% { transform: translate3d(-2%,8%,0) rotate(-2deg) scale(.98); } }

.dashboard-frame {
    position: relative; z-index: 1; isolation: isolate;
    display: grid; grid-template-columns: 186px minmax(0, 1fr); width: min(calc(100vw - 32px), 1760px);
    height: calc(100dvh - 32px); min-height: 680px; margin: 16px auto; overflow: hidden;
    background: color-mix(in srgb, var(--frame) 91%, transparent); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow);
    transition: filter .55s ease, transform .55s cubic-bezier(.2,.8,.2,1), background .3s ease;
}
.dashboard-frame::before { content: ""; position: absolute; z-index: 0; width: 70%; height: 120%; left: 15%; top: -55%; opacity: var(--aurora-opacity); background: conic-gradient(from 210deg, transparent 0 16%, #318fe3 27%, #54d3de 39%, #7568e9 52%, transparent 66%); filter: blur(85px); pointer-events: none; animation: auroraDrift 22s ease-in-out infinite alternate; }
.sidebar, .dashboard-main { position: relative; z-index: 1; }
.sidebar { display: flex; min-width: 0; flex-direction: column; padding: 24px 16px 18px; background: color-mix(in srgb, var(--sidebar) 95%, transparent); border-right: 1px solid var(--line); }
.brand-lockup { display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 8px; }
.brand-symbol { display: grid; flex: 0 0 38px; height: 38px; place-items: center; background: linear-gradient(145deg, #2468ba, #59a6e8); border-radius: 12px; box-shadow: 0 10px 22px rgba(31,104,179,.22); overflow: hidden; }
.brand-symbol img { display: block; width: 30px; height: 30px; object-fit: contain; }
.brand-name { display: flex; min-width: 0; flex-direction: column; line-height: 1.05; }
.brand-name strong { font: 600 15px/1 var(--font-display); letter-spacing: .01em; }
.brand-name small { margin-top: 5px; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.side-nav { display: grid; gap: 7px; margin-top: 38px; }
.side-link { display: flex; width: 100%; min-height: 43px; align-items: center; gap: 12px; padding: 0 13px; color: var(--muted); background: transparent; border-radius: 13px; font-size: 13px; font-weight: 500; text-align: left; transition: .2s ease; }
.side-link svg { flex: 0 0 18px; width: 18px; height: 18px; }
.side-link:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 62%, transparent); }
.side-link:disabled { opacity: .38; cursor: not-allowed; }
.side-link:disabled:hover { color: var(--muted); background: transparent; }
.side-link.is-active { color: #fff; background: var(--selected); box-shadow: 0 10px 24px rgba(20,67,111,.16); }
html[data-theme="dark"] .side-link.is-active { color: #0d2740; }
.side-section-label { display: block; padding: 0 13px 9px; color: var(--faint); font-size: 10px; font-weight: 600; letter-spacing: .12em; }
.admin-nav { display: grid; gap: 5px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.sidebar-bottom { display: grid; gap: 5px; margin-top: auto; }
.admin-login-link { color: var(--text); background: color-mix(in srgb,var(--accent) 11%,var(--surface)); border: 1px solid color-mix(in srgb,var(--accent) 28%,var(--line)); }
.admin-login-link svg { color: var(--accent); }
.admin-login-link:hover { color: var(--text); background: color-mix(in srgb,var(--accent) 18%,var(--surface)); border-color: color-mix(in srgb,var(--accent) 45%,var(--line)); box-shadow: 0 8px 22px color-mix(in srgb,var(--accent) 12%,transparent); }
.admin-mode-indicator { position: relative; color: var(--text); background: color-mix(in srgb,var(--positive) 10%,var(--surface)); border: 1px solid color-mix(in srgb,var(--positive) 26%,var(--line)); cursor: pointer; }
.admin-mode-indicator svg { color: var(--positive); }
.admin-mode-indicator i { width: 6px; height: 6px; margin-left: auto; background: var(--positive); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb,var(--positive) 13%,transparent); }
.admin-mode-indicator:hover { color: var(--text); background: color-mix(in srgb,var(--positive) 17%,var(--surface)); border-color: color-mix(in srgb,var(--positive) 42%,var(--line)); box-shadow: 0 8px 22px color-mix(in srgb,var(--positive) 12%,transparent); }
@media (max-width: 1500px) { .admin-mode-indicator i { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; margin: 0; } }
.theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

.dashboard-main { display: flex; min-width: 0; flex-direction: column; padding: 0 22px 20px; overflow: hidden; transition: opacity .2s ease, transform .2s ease, filter .2s ease; }
.topbar { display: flex; flex: 0 0 82px; align-items: center; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }
.topbar-title p { display: none; }
.display-title { margin: 0; font: 600 26px/1.08 var(--font-display); letter-spacing: -.015em; }
.display-title span { display: block; }
.display-title span + span { margin-top: 2px; }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.month-picker { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.month-picker svg { width: 16px; height: 16px; color: var(--accent); }
.month-picker select { min-width: 112px; height: 100%; padding: 0 22px 0 1px; color: var(--text); background: transparent; border: 0; outline: 0; font-size: 13px; font-weight: 600; }
.picker-caption { color: var(--muted); font-size: 8px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.scoped-picker select { min-width: 150px; }
html[data-theme="dark"] .month-picker select { color-scheme: dark; color: var(--text); }
html[data-theme="dark"] .month-picker select option { color: #eaf3fb; background-color: #102944; }
html[data-theme="dark"] .month-picker select option:checked { color: #fff; background-color: #245680; font-weight: 600; }
html[data-theme="dark"] .month-picker select option:disabled { color: #71879b; background-color: #0d2339; }
.language-switch { display: flex; height: 40px; padding: 4px; background: var(--surface-3); border: 1px solid var(--line); border-radius: 12px; }
.language-switch button { min-width: 36px; padding: 0 8px; color: var(--muted); background: transparent; border-radius: 8px; font-size: 11px; font-weight: 600; }
.language-switch button.is-active { color: #fff; background: var(--accent); }
.side-nav, .sidebar-bottom { transition: opacity .18s ease; }
.dashboard-frame.is-language-changing .dashboard-main { opacity: 0; transform: translateY(4px); filter: blur(2px); pointer-events: none; }
.dashboard-frame.is-language-changing .side-nav,
.dashboard-frame.is-language-changing .sidebar-bottom { opacity: 0; pointer-events: none; }
.admin-badge { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 13px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 11px; font-weight: 600; }
.status-dot { width: 7px; height: 7px; background: var(--positive); border-radius: 50%; box-shadow: 0 0 0 4px color-mix(in srgb, var(--positive) 15%, transparent); }
.sample-banner { flex: 0 0 auto; align-items: center; justify-content: space-between; margin: 10px 0 -1px; padding: 8px 12px; color: #775119; background: #fff4d8; border: 1px solid #f0d798; border-radius: 10px; font-size: 12px; }
.sample-banner:not([hidden]) { display: flex; }
.sample-banner button { padding: 6px 9px; color: #fff; background: #9b681d; border-radius: 7px; font-size: 11px; }

.workspace { --spot-x: 50%; --spot-y: 45%; position: relative; isolation: isolate; display: grid; min-height: 0; flex: 1; grid-template-columns: minmax(0, 1fr) 363px; gap: 14px; padding-top: 14px; }
.workspace::before { content: ""; position: absolute; z-index: 0; inset: -18px; opacity: .8; background: radial-gradient(circle 330px at var(--spot-x) var(--spot-y), color-mix(in srgb, var(--spot-color, var(--accent)) var(--spotlight-strength), transparent), transparent 72%); pointer-events: none; transition: background .25s ease; }
.workspace > * { position: relative; z-index: 1; }
.primary-column { display: grid; min-width: 0; min-height: 0; grid-template-rows: 325px 128px minmax(190px,1fr); gap: 14px; }
.utility-column { display: grid; min-width: 0; min-height: 0; grid-template-rows: 1.04fr 1.06fr .7fr; gap: 14px; }
.panel, .kpi-card { background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--card-shadow), inset 0 1px rgba(255,255,255,.06); backdrop-filter: blur(10px) saturate(1.06); transition: background .3s ease, border-color .3s ease, transform .2s ease; }
.kpi-grid { display: grid; min-height: 0; grid-template-columns: repeat(4, minmax(0,1fr)); grid-template-rows: minmax(0,1fr); gap: 12px; }
.kpi-card, .kpi-card:nth-child(4), .kpi-card:nth-child(5), .kpi-grid[data-count] .kpi-card { position: relative; display: flex; min-width: 0; overflow: hidden; grid-column: span 1; flex-direction: column; padding: 12px 14px 9px; cursor: pointer; }
.kpi-card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.kpi-card.is-selected { color: #f4f9fd; background: linear-gradient(145deg, #123e6b, #1f5d98); border-color: rgba(110,181,244,.5); box-shadow: 0 13px 32px rgba(32,103,173,.22), inset 0 0 32px rgba(74,145,229,.12); }
.kpi-card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kpi-card-label { overflow: hidden; color: var(--muted); font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.is-selected .kpi-card-label { color: #c8ddf0; }
.kpi-dot { width: 8px; height: 8px; background: var(--kpi-accent); border-radius: 50%; box-shadow: 0 0 0 5px color-mix(in srgb, var(--kpi-accent) 14%, transparent); }
.kpi-value-row { display: flex; align-items: baseline; gap: 5px; margin-top: 6px; }
.kpi-value { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.035em; }
.kpi-unit { color: var(--muted); font-size: 11px; font-weight: 600; }
.is-selected .kpi-unit { color: #c0d5e8; }
.kpi-note { width: calc(100% - 84px); min-height: 14px; margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 400; white-space: nowrap; text-overflow: ellipsis; }
.is-selected .kpi-note { color: #a8c4dd; }
.kpi-chart-row { position: absolute; right: 13px; bottom: 8px; display: flex; width: 70px; height: 58px; align-items: end; justify-content: flex-end; margin: 0; }
.kpi-mini-chart { position: relative; width: 100%; height: 100%; outline: none; }
.kpi-mini-bars { display: flex; width: 100%; height: 100%; align-items: end; justify-content: flex-end; gap: 9px; padding: 0 7px 4px; border-bottom: 1px solid var(--line); }
.kpi-mini-bar { display: block; width: 13px; height: var(--bar-height); min-height: 2px; background: var(--kpi-accent); border-radius: 3px 3px 1px 1px; transform-origin: center bottom; animation: chartBarIn .65s cubic-bezier(.2,.8,.25,1) both; }
.kpi-mini-bar.is-previous { background: color-mix(in srgb,var(--kpi-accent) 42%,var(--muted)); opacity: .72; }.kpi-mini-bar.is-current { box-shadow: 0 0 8px color-mix(in srgb,var(--kpi-accent) 48%,transparent); }.kpi-mini-bar.is-empty { height: 2px; background: transparent; border: 1px dashed var(--muted); opacity: .45; }
.kpi-mini-tooltip { position: absolute; z-index: 8; right: 0; bottom: calc(100% + 7px); display: grid; min-width: 125px; gap: 4px; padding: 8px; color: #f5f9fd; background: rgba(8,25,45,.95); border: 1px solid rgba(255,255,255,.14); border-radius: 9px; box-shadow: 0 10px 25px rgba(0,0,0,.25); opacity: 0; transform: translateY(5px) scale(.97); transform-origin: right bottom; pointer-events: none; transition: opacity .16s ease,transform .16s ease; }
.kpi-mini-chart:hover .kpi-mini-tooltip,.kpi-mini-chart:focus .kpi-mini-tooltip { opacity: 1; transform: translateY(0) scale(1); }.kpi-mini-tooltip strong { margin-bottom: 2px; font-size: 10px; font-weight: 650; }.kpi-mini-tooltip span { display: grid; grid-template-columns: 6px 30px 1fr; align-items: center; gap: 4px; color: #b8c9da; font-size: 8px; white-space: nowrap; }.kpi-mini-tooltip span > i { width: 6px; height: 6px; background: var(--kpi-accent); border-radius: 2px; }.kpi-mini-tooltip span > i.is-previous { opacity: .5; }.kpi-mini-tooltip b { color: #fff; font-weight: 600; text-align: right; }
.sparkline { width: 100%; height: 38px; overflow: visible; }
.sparkline .grid-line { stroke: var(--line); stroke-width: 1; }
.sparkline .trend-line { fill: none; stroke: var(--kpi-accent); stroke-width: 2.2; vector-effect: non-scaling-stroke; }
.sparkline .trend-area { fill: color-mix(in srgb, var(--kpi-accent) 13%, transparent); stroke: none; }
.sparkline.is-dashed .trend-line { stroke-dasharray: 6 5; }
.sparkline .spark-bar { fill: color-mix(in srgb, var(--kpi-accent) 72%, transparent); stroke: none; }
.sparkline .spark-dot { fill: var(--surface); stroke: var(--kpi-accent); stroke-width: 1.7; vector-effect: non-scaling-stroke; }
.sparkline .spark-single-marker { fill: var(--kpi-accent); stroke: none; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--kpi-accent) 45%, transparent)); }
.is-selected .sparkline .spark-bar { fill: color-mix(in srgb, var(--kpi-accent) 82%, white 8%); }
.is-selected .sparkline .spark-dot { fill: #174c7e; }
.is-selected .sparkline .grid-line { stroke: rgba(255,255,255,.12); }
.sparkline .trend-line, .sparkline .trend-area { animation: chartRevealX .7s cubic-bezier(.22,.75,.25,1) both; }
.sparkline .spark-bar, .sparkline .spark-single-marker { transform-box: fill-box; transform-origin: center bottom; animation: chartBarIn .62s cubic-bezier(.2,.8,.25,1) both; }
.sparkline .spark-dot { transform-box: fill-box; transform-origin: center; animation: chartPointIn .4s .38s ease-out both; }
.change { display: inline-flex; align-items: center; margin-left: 7px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.change.is-up { color: #ed5565; }.change.is-down { color: #438fe5; }.change.is-flat { color: var(--muted); }
.is-selected .change.is-up { color: #ff8994; }.is-selected .change.is-down { color: #8bc2ff; }
.edit-kpi-button { position: absolute; right: 30px; top: 7px; display: flex; width: 24px; height: 24px; align-items: center; justify-content: center; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; opacity: 0; transition: .2s; }
.kpi-card:hover .edit-kpi-button, .edit-kpi-button:focus-visible { opacity: 1; }

.detail-chart-panel { --chart-glow: var(--accent); position: relative; isolation: isolate; display: flex; min-height: 0; overflow: hidden; flex-direction: column; padding: 16px 18px 13px; transition: --chart-glow .5s ease, background .3s ease, border-color .3s ease; }
.detail-chart-panel::before { content: ""; position: absolute; z-index: 0; width: 70%; height: 95%; left: -16%; bottom: -58%; background: radial-gradient(circle, color-mix(in srgb, var(--chart-glow) 24%, transparent), transparent 68%); filter: blur(14px); pointer-events: none; }
.detail-chart-panel > * { position: relative; z-index: 1; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.panel-header h2, .report-card h2 { margin: 2px 0 0; font-size: 15px; font-weight: 600; }
#detailChartTitle { font-size: 18px; }
.panel-eyebrow { margin: 0; color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; }
.chart-tabs { display: flex; max-width: 64%; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.chart-tabs button { flex: 0 0 auto; padding: 6px 9px; color: var(--muted); background: var(--surface-2); border-radius: 8px; font-size: 10px; font-weight: 500; }
.chart-tabs button.is-active { color: #fff; background: var(--accent); }
.detail-chart { min-height: 0; flex: 1; margin-top: 8px; }
.detail-chart svg { width: 100%; height: 100%; overflow: visible; }
.detail-chart .chart-grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.detail-chart .chart-line { fill: none; stroke: var(--chart-color); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.detail-chart .chart-line.is-dashed { stroke-dasharray: 9 7; }
.detail-chart .chart-area { fill: url(#chartGradient); stroke: none; }
.detail-chart .chart-bar { fill: color-mix(in srgb, var(--chart-color) 74%, transparent); stroke: none; }
.detail-chart .chart-point { fill: var(--surface); stroke: var(--chart-color); stroke-width: 2; vector-effect: non-scaling-stroke; }
.detail-chart .chart-point:only-child { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--chart-color) 50%, transparent)); }
.detail-chart .chart-single-guide { fill: none; stroke: color-mix(in srgb,var(--chart-color) 52%,transparent); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; animation: chartGuideIn .68s cubic-bezier(.2,.8,.25,1) both; }
.detail-chart text { fill: var(--muted); stroke: none; font-family: var(--font-body); font-size: 10px; font-weight: 500; }
.detail-chart .axis-label { fill: var(--muted); font-size: 9px; }
.detail-chart .axis-unit { fill: var(--chart-color); font-size: 9px; font-weight: 650; }
.detail-chart .chart-line, .detail-chart .chart-area { animation: chartRevealX .85s cubic-bezier(.22,.75,.25,1) both; }
.detail-chart .chart-bar { transform-box: fill-box; transform-origin: center bottom; animation: chartBarIn .72s cubic-bezier(.2,.8,.25,1) both; }
.detail-chart .chart-point { transform-box: fill-box; transform-origin: center; animation: chartPointIn .42s .48s ease-out both; }
.detail-chart g text { animation: chartValueIn .38s .54s ease-out both; }

.trend-panel { padding: 13px 18px 8px; }.trend-header { flex: 0 0 auto; }.trend-controls { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 7px; }.trend-header .chart-tabs { max-width: none; }.trend-year-picker select { height: 30px; padding: 0 24px 0 9px; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; outline: 0; font-size: 10px; font-weight: 600; }.trend-year-picker select option { color: var(--text); background: var(--surface); }
.trend-panel .detail-chart { margin-top: 2px; }
.hotel-status-panel { position: relative; display: flex; min-height: 0; overflow: hidden; flex-direction: column; padding: 14px 18px 10px; }
.hotel-edit-button { z-index: 3; top: 12px; right: 16px; }
.hotel-status-panel:hover .hotel-edit-button { opacity: 1; }
.hotel-status-header { display: flex; min-width: 0; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 16px; }.hotel-status-header h2 { margin: 2px 0 0; font-size: 16px; font-weight: 600; }
.hotel-view-controls { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 7px; }
.hotel-view-tabs { display: flex; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; }
.hotel-view-tabs button { min-height: 32px; padding: 6px 12px; color: var(--muted); border-radius: 6px; font-size: 11px; font-weight: 600; transition: color .18s ease,background .18s ease,box-shadow .18s ease; }
.hotel-view-tabs button:hover { color: var(--text); }.hotel-view-tabs button.is-active { color: #fff; background: var(--accent); box-shadow: 0 4px 12px color-mix(in srgb,var(--accent) 25%,transparent); }
.hotel-overview { display: grid; min-height: 0; flex: 1; grid-template-columns: 1.05fr 1.35fr .95fr; gap: clamp(18px,3vw,46px); padding: 18px 4px 0; }
.hotel-section { display: flex; min-width: 0; min-height: 0; flex-direction: column; }
.hotel-section h3 { margin: 0; padding-left: 10px; border-left: 3px solid #ef8f25; font-size: 12px; font-weight: 650; line-height: 1.5; }
.booking-share { align-items: center; }.booking-share h3 { align-self: stretch; }
.hotel-donut { position: relative; width: min(220px,88%); margin: 10px auto 0; aspect-ratio: 1; }
.hotel-donut-svg { display: block; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.donut-track, .donut-segment { fill: none; stroke-width: 18; }
.donut-track { stroke: var(--line); opacity: .55; }
.donut-segment { cursor: pointer; stroke-linecap: butt; stroke-linejoin: miter; transition: stroke-dasharray var(--fill-duration,.3s) cubic-bezier(.35,.05,.2,1) var(--fill-delay,0s),stroke-width .18s ease,filter .18s ease,opacity .18s ease; }
.donut-segment:hover, .donut-segment:focus { stroke-width: 21; filter: drop-shadow(0 0 4px color-mix(in srgb,var(--segment-color) 60%,transparent)); outline: none; }
.hotel-donut:has(.donut-segment:hover) .donut-segment:not(:hover), .hotel-donut:has(.donut-segment:focus) .donut-segment:not(:focus) { opacity: .42; }
.donut-center { position: absolute; z-index: 2; inset: 25%; display: grid; place-content: center; text-align: center; }
.donut-center strong { font-size: 22px; font-weight: 700; line-height: 1; }.donut-center span { margin-top: 7px; color: var(--muted); font-size: 9px; }
.donut-tooltip { position: absolute; z-index: 8; min-width: 142px; padding: 9px 10px; color: #f5f9fd; background: rgba(8,25,45,.94); border: 1px solid rgba(255,255,255,.14); border-radius: 9px; box-shadow: 0 10px 25px rgba(0,0,0,.28); opacity: 0; transform: translate(-50%,calc(-100% - 10px)) scale(.96); pointer-events: none; transition: opacity .16s ease,transform .16s ease; }
.donut-tooltip.is-visible { opacity: 1; transform: translate(-50%,calc(-100% - 10px)) scale(1); }.donut-tooltip strong { display: block; font-size: 11px; font-weight: 650; }.donut-tooltip span { display: block; margin-top: 3px; color: #b8c9da; font-size: 9px; white-space: nowrap; }
.hotel-bars { display: grid; gap: 12px; margin: 10px 0 0; }
.hotel-bar-row { display: grid; grid-template-columns: 36px minmax(80px,1fr) 74px; align-items: center; gap: 8px; }
.hotel-bar-row > span { color: var(--muted); font-size: 10px; }.hotel-bar-track { height: 22px; overflow: hidden; background: color-mix(in srgb,var(--surface-2) 75%,transparent); border-radius: 2px; }
.hotel-bar-track i { display: block; width: var(--bar-width); height: 100%; background: var(--hotel-color); border-radius: 2px; transform-origin: left; animation: hotelBarIn .72s var(--bar-delay) cubic-bezier(.2,.8,.25,1) both; }
.hotel-bar-row strong { font-size: 10px; font-weight: 650; white-space: nowrap; }.hotel-bar-row small { font-size: 8px; font-weight: 600; }
.hotel-legend ul { display: grid; gap: 10px; margin: 10px 0 0; padding: 0; list-style: none; }
.hotel-legend li { display: grid; grid-template-columns: 9px auto 1fr; align-items: center; gap: 7px; font-size: 12px; }.hotel-legend li i { width: 9px; height: 9px; border-radius: 50%; }.hotel-legend li strong { font-weight: 650; }.hotel-legend li span { color: var(--muted); white-space: nowrap; }
@keyframes hotelBarIn { from { opacity: .25; transform: scaleX(.04); } to { opacity: 1; transform: scaleX(1); } }

@keyframes chartRevealX { from { opacity: .15; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes chartBarIn { from { opacity: .2; transform: scaleY(.05); } to { opacity: 1; transform: scaleY(1); } }
@keyframes chartPointIn { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: scale(1); } }
@keyframes chartValueIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chartGuideIn { from { opacity: 0; stroke-dashoffset: 28; } to { opacity: .8; stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
    .sparkline .trend-line, .sparkline .trend-area, .sparkline .spark-bar, .sparkline .spark-single-marker, .sparkline .spark-dot,
    .detail-chart .chart-line, .detail-chart .chart-area, .detail-chart .chart-bar, .detail-chart .chart-point, .detail-chart .chart-single-guide, .detail-chart g text, .hotel-bar-track i { animation: none; }
    .donut-segment { transition: none; }
}

.report-card { min-height: 0; padding: 16px; overflow: auto; scrollbar-width: thin; }
.report-card > header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.report-status { padding: 5px 7px; color: var(--positive); background: color-mix(in srgb, var(--positive) 12%, transparent); border-radius: 7px; font-size: 10px; font-weight: 700; letter-spacing: .07em; }
.report-card h3 { margin: 14px 0 0; font-size: 14px; font-weight: 600; line-height: 1.45; }
.report-summary { display: -webkit-box; margin: 6px 0 13px; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.55; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.report-meta { display: grid; gap: 7px; margin: 0; padding-top: 11px; border-top: 1px solid var(--line); }
.report-meta div { display: flex; justify-content: space-between; gap: 12px; }
.report-meta dt { color: var(--muted); font-size: 10px; }
.report-meta dd { margin: 0; font-size: 10px; font-weight: 500; text-align: right; }
.promotion-link { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; padding: 8px 9px; color: var(--accent); background: var(--surface-2); border: 1px solid transparent; border-radius: 8px; font-size: 10px; font-weight: 600; transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.promotion-link svg { width: 13px; height: 13px; transition: transform .2s ease; }
.promotion-link:hover { color: color-mix(in srgb,var(--accent) 82%,#fff 18%); background: color-mix(in srgb,var(--accent) 13%,var(--surface)); border-color: color-mix(in srgb,var(--accent) 28%,transparent); box-shadow: 0 8px 18px color-mix(in srgb,var(--accent) 13%,transparent); transform: translateY(-2px); }
.promotion-link:hover svg { transform: translate(2px,-2px); }
.promotion-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pdf-card, .recent-card { min-height: 0; padding: 14px 16px; overflow: hidden; }
.pdf-list { display: grid; width: 100%; min-width: 0; max-width: 100%; gap: 6px; margin-top: 10px; }
.pdf-item { display: flex; width: 100%; min-width: 0; max-width: 100%; min-height: 35px; align-items: center; gap: 9px; padding: 5px 7px; overflow: hidden; background: var(--surface-2); border: 1px solid transparent; border-radius: 10px; }
.pdf-item.is-primary { border-color: color-mix(in srgb, var(--accent) 42%, transparent); }
.pdf-code { display: grid; flex: 0 0 25px; height: 25px; place-items: center; color: #fff; background: var(--accent); border-radius: 7px; font-size: 10px; font-weight: 700; }
.pdf-info { min-width: 0; max-width: 100%; flex: 1; }.pdf-info strong { display: block; font-size: 10px; font-weight: 600; }.pdf-info small { display: block; min-width: 0; color: var(--muted); font-size: 10px; line-height: 1.35; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.pdf-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.pdf-action { display: grid; width: 27px; height: 27px; place-items: center; color: var(--accent); background: var(--surface); border-radius: 8px; }
.pdf-action { transition: color .2s ease, background .2s ease, transform .2s ease; }
.pdf-action:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.pdf-action.is-download { color: #fff; background: var(--accent); }
.pdf-action.is-download:hover { background: color-mix(in srgb, var(--accent) 82%, #fff 18%); }
.pdf-action svg { width: 13px; height: 13px; }
.pdf-item.is-empty { opacity: .55; }.pdf-item.is-empty .pdf-code { color: var(--muted); background: var(--surface-3); }
.text-button { padding: 4px; color: var(--accent); background: transparent; font-size: 10px; font-weight: 600; }
.recent-months { display: grid; grid-template-columns: repeat(5,1fr); gap: 5px; margin-top: 10px; }
.recent-month { min-width: 0; padding: 7px 2px; color: var(--muted); background: var(--surface-2); border: 1px solid transparent; border-radius: 9px; font-size: 10px; font-weight: 500; text-align: center; }
.recent-month strong { display: block; margin-bottom: 2px; color: var(--text); font-size: 11px; font-weight: 600; }
.recent-month.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }.recent-month.is-active strong { color: #fff; }

.language-gate { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 20px; }
.language-gate[hidden] { display: none; }
.language-gate__backdrop { position: absolute; inset: 0; background: rgba(4,13,25,.42); backdrop-filter: blur(16px); }
.language-gate__panel { position: relative; width: min(540px, 100%); padding: 35px; color: #eef6fd; background: linear-gradient(145deg, rgba(11,34,58,.97), rgba(16,58,96,.96)); border: 1px solid rgba(151,205,250,.22); border-radius: 26px; box-shadow: 0 35px 100px rgba(0,0,0,.42); text-align: center; }
.gate-mark { display: grid; width: 46px; height: 46px; margin: 0 auto 15px; place-items: center; background: linear-gradient(145deg,#2468ba,#64b2ee); border-radius: 14px; font: 600 22px/1 var(--font-display); }
.gate-eyebrow { margin: 0; color: #8ebee8; font: 500 10px/1 var(--font-display); letter-spacing: .16em; }
.language-gate h1 { margin: 12px 0 5px; font: 600 28px/1.15 var(--font-display); }
.gate-subtitle { margin: 0; color: #afc4d7; font-size: 12px; }
.gate-languages { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 27px; }
.gate-languages button { display: flex; min-width: 0; flex-direction: column; align-items: start; padding: 14px; color: #eaf4fc; background: rgba(255,255,255,.065); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; text-align: left; transition: .22s ease; }
.gate-languages button:hover, .gate-languages button.is-recommended { background: rgba(83,162,230,.16); border-color: rgba(104,184,248,.48); transform: translateY(-2px); }
.gate-languages button.is-selected { background: #347fc4; box-shadow: 0 0 0 7px rgba(67,147,217,.14), 0 15px 35px rgba(29,113,190,.34); }
.gate-languages span { color: #75bdf5; font-size: 10px; font-weight: 700; }.gate-languages strong { margin-top: 9px; font-size: 14px; font-weight: 600; }.gate-languages small { margin-top: 5px; overflow: hidden; color: #9eb5c8; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.gate-languages .is-selected span, .gate-languages .is-selected small { color: #fff; }
.gate-note { margin: 16px 0 0; color: #7f9ab1; font-size: 10px; }
body.is-gated .dashboard-frame { filter: blur(12px); transform: scale(.985); }
.language-gate.is-leaving { pointer-events: none; animation: gateFade .55s ease forwards; }
.language-gate.is-leaving .language-gate__panel { animation: gatePanelOut .42s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes gateFade { to { opacity: 0; } }
@keyframes gatePanelOut { to { opacity: 0; transform: translateY(-10px) scale(.96); } }
.is-revealing .topbar { animation: revealUp .46s ease both; }
.is-revealing .kpi-card { animation: cardReveal .52s cubic-bezier(.2,.8,.2,1) both; }
.is-revealing .kpi-card:nth-child(2) { animation-delay: .04s; }.is-revealing .kpi-card:nth-child(3) { animation-delay: .08s; }.is-revealing .kpi-card:nth-child(4) { animation-delay: .12s; }.is-revealing .kpi-card:nth-child(5) { animation-delay: .16s; }.is-revealing .kpi-card:nth-child(6) { animation-delay: .2s; }
.is-revealing .detail-chart-panel { animation: revealUp .55s .12s ease both; }
.is-revealing .utility-column { animation: revealSide .55s .12s ease both; }
@keyframes revealUp { from { opacity: 0; transform: translateY(9px); } }
@keyframes cardReveal { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes revealSide { from { opacity: 0; transform: translateX(10px); } }

.drawer, .modal { position: fixed; z-index: 120; inset: 0; width: 100%; max-width: 100vw; overflow: hidden; visibility: hidden; opacity: 0; transition: .22s; }
.drawer.is-open, .modal.is-open { visibility: visible; opacity: 1; }
.drawer-backdrop, .modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(4,12,22,.46); backdrop-filter: blur(7px); }
.drawer-panel { position: absolute; right: 0; top: 0; width: min(480px, 100%); height: 100%; padding: 25px; color: var(--text); background: var(--frame); box-shadow: -25px 0 80px rgba(0,0,0,.25); transform: translateX(100%); transition: .3s cubic-bezier(.2,.8,.2,1); }
.drawer.is-open .drawer-panel { transform: translateX(0); }
.drawer-panel > header, .editor-panel > header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.drawer-panel h2, .editor-panel h2 { margin: 4px 0 0; font-size: 20px; font-weight: 600; }
.icon-button { display: grid; width: 36px; height: 36px; place-items: center; color: var(--muted); background: var(--surface-2); border-radius: 10px; font-size: 22px; }
.archive-controls { display: grid; grid-template-columns: 1fr 105px; gap: 8px; margin: 18px 0 12px; }
.archive-controls input, .archive-controls select { height: 41px; padding: 0 12px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 11px; outline: 0; }
.archive-list { display: grid; gap: 8px; max-height: calc(100vh - 145px); overflow: auto; }
.archive-row { display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 11px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.archive-row:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.archive-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.archive-row time { color: var(--accent); font-size: 12px; font-weight: 600; }.archive-row h3 { margin: 0; font-size: 13px; font-weight: 600; }.archive-row p { display: none; }.archive-row p.trash-date { display: block; margin: 4px 0 0; color: var(--muted); font-size: 11px; }.archive-langs { display: flex; gap: 5px; }.archive-langs span, .archive-langs a { display: grid; min-width: 27px; min-height: 27px; padding: 5px; place-items: center; color: var(--faint); background: var(--surface-2); border-radius: 7px; font-size: 10px; font-weight: 600; }.archive-langs .has-file { min-width: 33px; min-height: 33px; padding: 7px 8px; color: #fff; background: var(--accent); font-size: 11px; box-shadow: 0 7px 16px color-mix(in srgb, var(--accent) 22%, transparent); transition: transform .2s ease, background .2s ease; }.archive-langs .has-file:hover { transform: translateY(-2px) scale(1.04); background: color-mix(in srgb, var(--accent) 84%, #fff 16%); }

.editor-panel { position: relative; display: flex; width: min(900px, calc(100% - 32px)); max-width: 100vw; max-height: calc(100dvh - 40px); margin: 20px auto; overflow: hidden; flex-direction: column; color: var(--text); background: var(--frame); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); transform: translateY(18px) scale(.98); transition: .25s; }
.modal.is-open .editor-panel { transform: translateY(0) scale(1); }
.editor-panel > header { flex: 0 0 auto; padding: 20px 22px 16px; }
.editor-panel form { display: flex; min-width: 0; min-height: 0; max-width: 100%; flex: 1; flex-direction: column; }
.editor-scroll { min-height: 0; padding: 19px 22px; overflow-x: hidden; overflow-y: auto; }
.editor-panel fieldset { min-width: 0; margin: 0 0 19px; padding: 0; border: 0; }.editor-panel legend { width: 100%; margin-bottom: 11px; padding-bottom: 8px; color: var(--text); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.form-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 11px; }.form-grid .full { grid-column: 1/-1; }
.form-grid label, .locale-field, .kpi-edit-field { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 500; }
.form-grid input, .form-grid select, .locale-field input, .locale-field textarea, .kpi-edit-field input, .kpi-edit-field select { width: 100%; min-width: 0; height: 40px; padding: 0 11px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 10px; outline: 0; }.locale-field textarea { height: 72px; padding-top: 10px; resize: vertical; }
.locale-editor-tabs { display: flex; gap: 5px; margin-bottom: 10px; }.locale-editor-tabs button { padding: 6px 12px; color: var(--muted); background: var(--surface-2); border-radius: 8px; font-size: 10px; font-weight: 600; }.locale-editor-tabs button.is-active { color: #fff; background: var(--accent); }
.localized-panel { display: none; grid-template-columns: 1fr; gap: 10px; }.localized-panel.is-active { display: grid; }
.kpi-editor-list { display: grid; gap: 8px; }.kpi-value-editor { display: grid; grid-template-columns: minmax(150px,1fr) 160px 1fr; align-items: end; gap: 9px; padding: 11px; background: var(--surface-2); border-radius: 12px; }.kpi-value-editor strong { display: grid; align-self: center; gap: 3px; font-size: 12px; font-weight: 600; }.kpi-value-editor strong small { color: var(--accent); font-size: 9px; font-weight: 500; }.kpi-value-editor input[readonly] { opacity: .78; cursor: default; }
.field-help { margin: -2px 0 10px; color: var(--muted); font-size: 10px; line-height: 1.5; }.hotel-editor-list { display: grid; gap: 8px; }.hotel-editor-row { display: grid; grid-template-columns: minmax(100px,.7fr) 1fr 1fr; align-items: end; gap: 9px; padding: 11px; background: var(--surface-2); border-radius: 12px; }.hotel-editor-row > strong { display: flex; align-self: center; align-items: center; gap: 8px; font-size: 12px; }.hotel-editor-row > strong i { width: 9px; height: 9px; border-radius: 50%; }
.pdf-editor-list { display: grid; min-width: 0; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }.pdf-upload-box { display: grid; min-width: 0; overflow: hidden; gap: 7px; padding: 11px; background: var(--surface-2); border-radius: 11px; }.pdf-upload-box strong { font-size: 11px; font-weight: 600; }.pdf-upload-box > span { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.pdf-upload-box input { display: block; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; box-sizing: border-box; font-size: 10px; }
.editor-panel > footer, .editor-panel form > footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 14px 22px; border-top: 1px solid var(--line); }.editor-panel footer > div { display: flex; gap: 7px; }
.primary-button, .secondary-button, .danger-button, .add-kpi-button { min-height: 37px; padding: 0 15px; border-radius: 10px; font-size: 11px; font-weight: 600; }.primary-button { color: #fff; background: var(--accent); }.secondary-button { color: var(--text); background: var(--surface-2); }.danger-button { color: var(--negative); background: color-mix(in srgb, var(--negative) 10%, transparent); }.add-kpi-button { width: 100%; color: var(--accent); background: var(--surface); border: 1px dashed var(--line-strong); }
.compact-editor { width: min(760px,calc(100% - 32px)); }.kpi-manager-row { display: grid; grid-template-columns: 32px 1.1fr 1.1fr 1.1fr 70px 90px 42px; gap: 7px; align-items: end; margin-bottom: 8px; padding: 10px; background: var(--surface-2); border-radius: 12px; }.drag-handle { align-self: center; color: var(--faint); text-align: center; }.remove-kpi { height: 40px; color: var(--negative); background: transparent; font-size: 18px; }
.toast-region { position: fixed; z-index: 300; right: 24px; bottom: 24px; display: grid; gap: 8px; }.toast { padding: 11px 15px; color: #fff; background: #12395f; border: 1px solid rgba(255,255,255,.14); border-radius: 11px; box-shadow: 0 12px 35px rgba(0,0,0,.25); font-size: 12px; animation: toastIn .25s ease; }@keyframes toastIn{from{opacity:0;transform:translateY(8px)}}

@media (min-width: 1921px) and (min-height: 1100px) {
    .dashboard-frame { width: min(calc(100vw - 96px),2280px); height: min(calc(100dvh - 64px),1280px); margin: max(32px,calc((100dvh - 1280px)/2)) auto; grid-template-columns: 200px minmax(0,1fr); }
    .sidebar { padding: 28px 18px 22px; }.brand-lockup { padding-inline: 7px; }.side-nav { margin-top: 42px; }.dashboard-main { padding: 0 28px 24px; }
    .topbar { flex-basis: 90px; }.display-title { font-size: 28px; }.topbar-actions { gap: 11px; }
    .workspace { grid-template-columns: minmax(0,1fr) 420px; gap: 18px; padding-top: 18px; }
    .primary-column { grid-template-rows: 380px 148px minmax(300px,1fr); gap: 18px; }.utility-column { grid-template-rows: 1.02fr .9fr .58fr; gap: 18px; }
    .hotel-status-panel { padding: 18px 22px 14px; }.hotel-overview { gap: clamp(28px,3vw,58px); padding-top: 22px; }.hotel-donut { width: min(250px,88%); }.hotel-bars { gap: 14px; }.hotel-bar-track { height: 24px; }
    .kpi-grid { gap: 14px; }.kpi-card,.kpi-card:nth-child(4),.kpi-card:nth-child(5),.kpi-grid[data-count] .kpi-card { padding: 14px 16px 11px; }.kpi-value { font-size: 28px; }.sparkline { height: 36px; }
    .trend-panel { padding: 17px 22px 12px; }.report-card { padding: 19px; }.pdf-card,.recent-card { padding: 17px 19px; }
}
@media (max-width: 1500px) {
    .dashboard-frame { grid-template-columns: 78px minmax(0,1fr); }
    .sidebar { padding-inline: 10px; }.brand-lockup { justify-content: center; padding: 0; }.brand-name, .side-link > span, .side-section-label { display: none; }.side-link { justify-content: center; padding: 0; }.side-nav { margin-top: 35px; }.workspace { grid-template-columns: minmax(0,1fr) 341px; }.dashboard-main { padding-inline: 18px; }
}
@media (min-width: 981px) and (max-width: 1500px) {
    .utility-column { grid-template-rows: minmax(0,1.12fr) minmax(0,1.18fr) minmax(82px,.5fr); }
    .pdf-card { min-width: 0; }.pdf-actions { max-width: 61px; }.recent-months { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media (max-height: 780px) and (min-width: 981px) {
    .dashboard-frame { height: calc(100dvh - 16px); min-height: 650px; margin-block: 8px; }.topbar { flex-basis: 68px; }.display-title { font-size: 23px; }.workspace { padding-top: 10px; gap: 10px; }.primary-column, .utility-column { gap: 10px; }.primary-column { grid-template-rows: 275px 112px minmax(166px,1fr); }.kpi-grid { gap: 9px; }.kpi-card { padding: 7px 12px 5px; }.kpi-value-row { margin-top: 2px; }.kpi-note { margin-top: 2px; }.sparkline { height: 22px; }.report-card { padding: 13px; }.report-summary { margin-block: 4px 8px; }.report-meta { gap: 4px; padding-top: 7px; }.pdf-card,.recent-card { padding: 11px 13px; }.pdf-list { gap: 4px; margin-top: 6px; }.pdf-item { min-height: 29px; padding-block: 3px; }.recent-months { margin-top: 6px; }.trend-panel { padding: 9px 16px 4px; }.hotel-status-panel { padding: 10px 16px 7px; }.hotel-overview { padding-top: 14px; }.hotel-donut { width: min(180px,80%); }.hotel-bars { gap: 6px; }.hotel-bar-track { height: 16px; }
}
@media (max-width: 1250px) and (min-width: 981px) {
    .picker-caption { display: none; }.scoped-picker select { min-width: 116px; }.month-picker select { min-width: 98px; }.topbar-actions { gap: 5px; }
}
@media (max-width: 980px) {
    html,body { width: 100%; max-width: 100%; overflow-x: hidden; }.dashboard-frame { display: block; width: 100%; height: auto; min-height: 100dvh; margin: 0; overflow: visible; border: 0; border-radius: 0; }.sidebar { position: fixed; z-index: 50; left: 12px; right: 12px; bottom: 10px; display: flex; height: 58px; padding: 7px; flex-direction: row; align-items: center; background: color-mix(in srgb, var(--sidebar) 90%, transparent); border: 1px solid var(--line); border-radius: 17px; backdrop-filter: blur(16px); box-shadow: 0 15px 40px rgba(0,0,0,.18); }.brand-lockup,.admin-nav,.sidebar-bottom .side-link span { display: none; }.side-nav { display: flex; flex: 1; justify-content: center; gap: 8px; margin: 0; }.sidebar-bottom { display: flex; margin: 0; }.side-link { width: 44px; min-height: 42px; }.dashboard-main { padding: 0 14px 88px; overflow: visible; }.topbar { position: sticky; z-index: 40; top: 0; flex: none; flex-wrap: wrap; min-height: 0; height: auto; align-content: flex-start; row-gap: 10px; padding: 14px 0 16px; background: color-mix(in srgb, var(--frame) 91%, transparent); backdrop-filter: blur(15px); }.topbar-title { width: 100%; }.topbar-title p { display: none; }.display-title { font-size: 22px; }.topbar-actions { width: 100%; }.month-picker { flex: 1; }.month-picker select { width: 100%; }.admin-badge { display: none; }.workspace { display: block; }.primary-column { display: block; }.kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; }.kpi-card,.kpi-card:nth-child(4),.kpi-card:nth-child(5),.kpi-grid[data-count] .kpi-card { grid-column: span 1; min-height: 150px; }.kpi-card:last-child:nth-child(odd) { grid-column: 1/-1; }.detail-chart-panel { height: 310px; margin-top: 14px; }.utility-column { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: none; margin-top: 14px; }.report-card { grid-row: span 2; }.recent-card { min-height: 130px; }
}

@media (max-width: 980px) {
    .trend-panel { height: 340px; }.hotel-status-panel { height: auto; min-height: 420px; margin-top: 0; margin-bottom: 14px; }
    .hotel-overview { grid-template-columns: 1fr 1.25fr; }
    .hotel-legend { grid-column: 1 / -1; }
    .hotel-legend ul { grid-template-columns: repeat(5,minmax(0,1fr)); margin-top: 14px; }
    .hotel-legend li { grid-template-columns: 9px 1fr; }.hotel-legend li span { grid-column: 2; }
}

@media (max-width: 620px) {
    .trend-header { align-items: flex-start; flex-direction: column; }.trend-controls { width: 100%; justify-content: flex-start; }.trend-header .chart-tabs { width: 100%; max-width: 100%; }
    .hotel-status-header { flex-direction: column; gap: 10px; padding-right: 0; }.hotel-view-controls { width: 100%; justify-content: flex-start; }.hotel-view-tabs { flex: 0 0 auto; }
    .trend-panel { height: 360px; padding-inline: 12px; }.trend-panel .detail-chart { overflow-x: auto; overflow-y: hidden; padding-bottom: 5px; overscroll-behavior-inline: contain; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }.trend-panel .detail-chart svg { width: 620px; min-width: 620px; }.hotel-status-panel { min-height: 0; }.hotel-overview { display: flex; gap: 18px; overflow: visible; flex-direction: column; }.hotel-donut { width: min(220px,80vw); margin-top: 10px; }.hotel-bars { width: 100%; margin-top: 10px; }.hotel-legend { grid-column: auto; }.hotel-legend ul { grid-template-columns: 1fr 1fr; margin-top: 10px; }.hotel-editor-row { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
    .ambient { display: none; }
    .workspace::before { display: none; }
    .panel, .kpi-card { backdrop-filter: none; }
    .dashboard-frame::before { opacity: .16; }
}
@media (max-width: 620px) {
    .topbar-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }.topbar-actions .scoped-picker { grid-column: 1 / -1; }.topbar-actions .month-picker:not(.scoped-picker) { grid-column: 1; }.month-picker { min-width: 0; flex-basis: auto; }.month-picker select,.scoped-picker select { min-width: 0; }.picker-caption { display: inline; }.language-switch { grid-column: 2; margin: 0; }.kpi-grid { grid-template-columns: 1fr; }.kpi-card,.kpi-card:nth-child(4),.kpi-card:nth-child(5),.kpi-card:last-child:nth-child(odd) { grid-column: auto; min-height: 155px; }.utility-column { display: block; }.utility-column .panel { margin-bottom: 12px; }.report-card { max-height: none; }.gate-languages { grid-template-columns: 1fr; }.gate-languages button { display: grid; grid-template-columns: 35px 1fr; align-items: center; }.gate-languages strong { margin: 0; }.gate-languages small { grid-column: 2; margin-top: 2px; }.language-gate__panel { padding: 27px 20px; }.language-gate h1 { font-size: 24px; }.form-grid,.pdf-editor-list { grid-template-columns: 1fr; }.kpi-value-editor { grid-template-columns: 1fr; }.archive-row { grid-template-columns: 92px 1fr; }.archive-langs { grid-column: 2; }.editor-panel { width: 100%; max-width: 100%; max-height: 100dvh; height: 100dvh; margin: 0; border-radius: 0; }.editor-scroll,.editor-panel fieldset,.form-grid,.localized-panel,.kpi-editor-list,.hotel-editor-list,.pdf-editor-list { min-width: 0; max-width: 100%; }.editor-panel input,.editor-panel select,.editor-panel textarea { max-width: 100%; }.editor-panel > footer,.editor-panel form > footer { align-items: stretch; flex-direction: column; gap: 8px; }.editor-panel footer > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }.editor-panel footer button { min-width: 0; }.kpi-manager-row { grid-template-columns: 1fr; }.kpi-manager-row > *,.kpi-manager-row > :nth-child(n+4) { min-width: 0; grid-column: 1; }.kpi-manager-row .drag-handle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior: auto!important; animation-duration: .01ms!important; animation-iteration-count: 1!important; transition-duration: .01ms!important; }
}

/* Gnuboard utility pages such as administrator login. */
.mpr-system-ambient { position: fixed; z-index: 0; border-radius: 50%; filter: blur(24px); pointer-events: none; }.mpr-system-ambient-a { width: 560px; height: 560px; left: -180px; top: -230px; background: radial-gradient(circle,rgba(52,93,243,.34),transparent 70%); animation: ambientFloatA 16s ease-in-out infinite alternate; }.mpr-system-ambient-b { width: 520px; height: 520px; right: -170px; bottom: -250px; background: radial-gradient(circle,rgba(209,76,62,.2),rgba(118,91,215,.13) 42%,transparent 70%); animation: ambientFloatB 19s ease-in-out infinite alternate; }
.mpr-system-page { position: relative; z-index: 1; width: min(480px,calc(100% - 32px)); margin: clamp(18px,7vh,72px) auto; padding: 16px; color: var(--text); background: color-mix(in srgb,var(--frame) 92%,transparent); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(1.08); }
.mpr-system-header { display: flex; min-height: 62px; align-items: center; justify-content: space-between; gap: 18px; padding: 3px 4px 15px; }
.mpr-system-brand { display: flex; min-width: 0; align-items: center; gap: 11px; }.mpr-system-logo { display: grid; flex: 0 0 42px; height: 42px; place-items: center; overflow: hidden; background: linear-gradient(145deg,#204f94,#3478bd); border: 1px solid rgba(255,255,255,.12); border-radius: 13px; box-shadow: 0 9px 22px rgba(26,82,145,.24); }.mpr-system-logo img { display: block; width: 32px; height: 32px; object-fit: contain; }.mpr-system-brand > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 5px; }.mpr-system-brand strong { font: 600 15px/1 var(--font-display); letter-spacing: .08em; }.mpr-system-brand small { overflow: hidden; color: var(--muted); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.mpr-system-theme { display: grid; flex: 0 0 38px; height: 38px; place-items: center; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; transition: color .2s ease,border-color .2s ease,transform .2s ease; }.mpr-system-theme:hover { color: var(--text); border-color: var(--line-strong); transform: rotate(8deg); }.mpr-system-theme svg { width: 16px; height: 16px; }
.mpr-system-content { position: relative; overflow: hidden; padding: 32px; background: color-mix(in srgb,var(--surface) 96%,transparent); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--card-shadow),inset 0 1px rgba(255,255,255,.05); }.mpr-system-content::before { content: ""; position: absolute; width: 260px; height: 260px; right: -150px; top: -160px; background: radial-gradient(circle,rgba(52,93,243,.22),transparent 70%); pointer-events: none; }
.mpr-login { position: relative; z-index: 1; }.mpr-login-heading .panel-eyebrow { margin-bottom: 8px; }.mpr-login-heading h1 { margin: 0; font-family: var(--font-display); font-size: clamp(25px,5vw,32px); font-weight: 600; line-height: 1.08; letter-spacing: -.025em; }.mpr-login-heading p:last-child { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.mpr-login-form { display: grid; gap: 14px; margin-top: 28px; }.mpr-login-field { display: grid; gap: 7px; }.mpr-login-field > span { color: var(--muted); font-size: 10px; font-weight: 600; }.mpr-login-control { display: flex; min-height: 48px; align-items: center; gap: 10px; padding: 0 13px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s ease,box-shadow .2s ease,background .2s ease; }.mpr-login-control:focus-within { background: var(--surface); border-color: color-mix(in srgb,var(--accent) 58%,transparent); box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent); }.mpr-login-control svg { flex: 0 0 16px; width: 16px; height: 16px; color: var(--faint); }.mpr-login-control input { width: 100%; min-width: 0; height: 46px; padding: 0; background: transparent; border: 0; outline: 0; font-size: 13px; }.mpr-login-control input::placeholder { color: var(--faint); }
.mpr-login-submit { min-height: 48px; margin-top: 4px; color: #fff; background: linear-gradient(135deg,#345df3,#2f82c8); border-radius: 12px; box-shadow: 0 12px 25px rgba(52,93,243,.24); font-size: 12px; font-weight: 650; transition: transform .2s ease,box-shadow .2s ease,filter .2s ease; }.mpr-login-submit:hover { transform: translateY(-1px); box-shadow: 0 15px 30px rgba(52,93,243,.3); filter: brightness(1.05); }.mpr-login-submit:active { transform: translateY(0); }
.mpr-login-note { display: flex; align-items: center; gap: 7px; margin: 17px 0 0; color: var(--faint); font-size: 9px; line-height: 1.5; }.mpr-login-note svg { flex: 0 0 13px; width: 13px; height: 13px; color: var(--positive); }
@media (max-width: 520px) { .mpr-system-page { width: 100%; min-height: 100dvh; margin: 0; padding: 13px; border: 0; border-radius: 0; }.mpr-system-header { padding: 5px 3px 15px; }.mpr-system-content { padding: 27px 21px; }.mpr-system-brand small { max-width: 190px; } }