:root {
  --gy-navy: #08162f;
  --gy-navy-2: #102b4c;
  --gy-graphite: #172238;
  --gy-blue: #1284f6;
  --gy-blue-strong: #0869d4;
  --gy-blue-soft: #eaf4ff;
  --gy-blue-light: #67b7ff;
  --gy-bg: #f2f6fb;
  --gy-surface: #ffffff;
  --gy-surface-2: #f7faff;
  --gy-surface-dark: #0e2239;
  --gy-text: #111d35;
  --gy-text-muted: #697791;
  --gy-muted: #697791;
  --gy-border: #e1e9f3;
  --gy-success: #16a365;
  --gy-success-soft: #e9f9f1;
  --gy-warning: #a86608;
  --gy-warning-bright: #f2ab3c;
  --gy-warning-soft: #fff4dc;
  --gy-danger: #c63c4a;
  --gy-danger-soft: #fff0f2;
  --gy-radius-sm: 12px;
  --gy-radius: 18px;
  --gy-radius-lg: 26px;
  --gy-shadow-sm: 0 8px 22px rgba(15, 39, 71, .07);
  --gy-shadow: 0 18px 48px rgba(13, 35, 64, .11);
  --gy-space-1: 4px;
  --gy-space-2: 8px;
  --gy-space-3: 12px;
  --gy-space-4: 16px;
  --gy-space-5: 20px;
  --gy-space-6: 24px;
  --gy-space-8: 32px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--gy-bg); color: var(--gy-text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--gy-bg); font-size: 15px; line-height: 1.45; transition: background-color .2s ease,color .2s ease; }
body.portal-auth { background: linear-gradient(180deg, var(--gy-navy) 0 238px, var(--gy-bg) 238px); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .62; }
img { max-width: 100%; }
.portal-icon { display: block; flex: 0 0 auto; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--gy-text-muted); }
.stack { display: grid; gap: var(--gy-space-3); }

.portal-frame { min-height: 100vh; }
.portal-stage { min-width: 0; }
.desktop-sidebar { display: none; }
.topbar { height: 76px; width: min(100% - 28px, 1080px); margin: 0 auto; padding-top: max(12px, env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between; color: #fff; }
.mobile-wordmark, .wordmark { display: flex; flex-direction: column; line-height: 1; }
.mobile-wordmark strong, .wordmark strong { font-size: 17px; letter-spacing: .22em; }
.mobile-wordmark em, .wordmark em { color: var(--gy-blue); font-style: normal; }
.mobile-wordmark small, .wordmark small { margin-top: 7px; color: #67b7ff; font-size: 9px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; }
.top-user { display: flex; align-items: center; gap: 10px; }
.top-user > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 14px; color: #dce9fa; }
.top-user > div { display: none; flex-direction: column; text-align: right; }
.top-user small { color: #9cabc1; font-size: 11px; }
.top-user strong { font-size: 14px; }
.app-shell { width: min(100% - 20px, 1080px); margin: 0 auto; padding: 4px 0 calc(104px + env(safe-area-inset-bottom)); }
.guest-shell { min-height: 100vh; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 22% 10%, #18385f 0, var(--gy-navy) 36%, #050d1c 100%); }

.card { background: var(--gy-surface); border: 1px solid rgba(222, 232, 243, .9); border-radius: var(--gy-radius); box-shadow: var(--gy-shadow-sm); padding: 18px; }
.card h2, .card h3 { color: var(--gy-text); }
.card p { margin: 5px 0; color: var(--gy-text-muted); line-height: 1.55; }
.card > small, .eyebrow, .page-title small, .section-head small, .card-heading small, .confirmation-copy small, .finish small { color: var(--gy-text-muted); font-size: 11px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }

.dashboard-hero { position: relative; overflow: hidden; min-height: 260px; margin: 0 -10px; padding: 28px 20px 78px; color: #fff; border-radius: 0 0 var(--gy-radius-lg) var(--gy-radius-lg); background: radial-gradient(circle at 85% 18%, rgba(24,139,250,.31), transparent 29%), linear-gradient(145deg, #07152c, #102d4d 70%, #0a2039); }
.dashboard-hero::after { content: ""; position: absolute; right: -54px; bottom: -94px; width: 240px; height: 240px; border: 1px solid rgba(91,181,255,.16); border-radius: 50%; box-shadow: 0 0 0 34px rgba(78,169,247,.035), 0 0 0 72px rgba(78,169,247,.025); }
.hero-brand { display: none; flex-direction: column; margin-bottom: 52px; }
.hero-brand strong { letter-spacing: .22em; font-size: 18px; }
.hero-brand em { color: var(--gy-blue); font-style: normal; }
.hero-brand small { color: #65b8ff; font-size: 9px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; }
.dashboard-hero .eyebrow { position: relative; z-index: 1; color: #94a9c4; margin: 0 0 8px; }
.dashboard-hero h1 { position: relative; z-index: 1; margin: 0; max-width: 580px; font-size: clamp(34px, 9vw, 58px); line-height: .99; letter-spacing: -.045em; }
.dashboard-hero h1 span { display: block; margin-bottom: 6px; color: #dce8f7; font-size: .52em; font-weight: 550; letter-spacing: -.02em; }
.hero-subline { position: relative; z-index: 1; margin: 16px 0 0; color: #b7c7dc; font-size: 16px; }

.kpi-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; margin: -58px 4px 22px; }
.kpi-card { min-width: 0; min-height: 126px; padding: 14px 12px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--gy-text); background: rgba(255,255,255,.97); border: 1px solid rgba(255,255,255,.8); border-radius: 17px; box-shadow: var(--gy-shadow); }
.kpi-card .kpi-icon { width: 36px; height: 36px; margin-bottom: auto; display: grid; place-items: center; border-radius: 11px; }
.kpi-icon.blue { color: var(--gy-blue); background: var(--gy-blue-soft); }
.kpi-icon.navy { color: #426998; background: #edf2f8; }
.kpi-icon.green { color: var(--gy-success); background: var(--gy-success-soft); }
.kpi-card strong { overflow: hidden; font-size: clamp(18px, 5.2vw, 28px); line-height: 1.1; white-space: nowrap; text-overflow: ellipsis; }
.kpi-card small { margin-top: 5px; overflow: hidden; color: var(--gy-text-muted); font-size: 11px; white-space: nowrap; text-overflow: ellipsis; }

.page-title { padding: 28px 4px 22px; color: #fff; }
.page-title small { color: #94a9c4; }
.page-title h1 { margin: 5px 0 0; font-size: clamp(32px, 8vw, 46px); line-height: 1; letter-spacing: -.04em; }
.section-head { min-height: 42px; margin: 28px 4px 12px; display: flex; align-items: end; justify-content: space-between; gap: 15px; }
.section-head h2 { margin: 2px 0 0; color: var(--gy-text); font-size: 22px; line-height: 1.15; letter-spacing: -.025em; }
.section-head a, .text-btn { min-height: 44px; display: inline-flex; align-items: center; color: var(--gy-blue-strong); font-weight: 750; background: none; border: 0; }
.section-count { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 30px; padding: 0 10px; color: var(--gy-blue-strong); background: var(--gy-blue-soft); border-radius: 999px; font-size: 12px; font-weight: 800; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { min-height: 26px; padding: 5px 10px; display: inline-flex; align-items: center; border-radius: 999px; background: #edf2f7; color: #58677d; font-size: 11px; font-weight: 800; line-height: 1; text-transform: capitalize; }
.chip.ok, .chip.genehmigt { color: var(--gy-success); background: var(--gy-success-soft); }
.chip.warn, .chip.offen, .chip.hoch { color: var(--gy-warning); background: var(--gy-warning-soft); }
.chip.kritisch, .chip.abgelehnt { color: var(--gy-danger); background: var(--gy-danger-soft); }
.chip.neutral { color: var(--gy-blue-strong); background: var(--gy-blue-soft); }
.chip.dark { color: #d8e7f7; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); }

.assignment-card, .assignment-list, .time-row, .list-row, .document-row, .action-card { display: flex; align-items: center; gap: 15px; }
.assignment-card { position: relative; padding: 17px; }
.assignment-card.featured { color: #fff; background: linear-gradient(140deg, #0d2238, #112e4b); border-color: rgba(47,139,222,.2); }
.assignment-card.featured h3, .assignment-card.featured .customer-name { color: #fff; }
.assignment-card.featured .assignment-address, .assignment-card.featured .progress-row small { color: #afc2d8; }
.assignment-card.featured progress { background: rgba(255,255,255,.16); }
.assignment-time { align-self: stretch; min-width: 62px; padding: 9px 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: var(--gy-blue); border-right: 1px solid rgba(133,154,182,.18); }
.assignment-time strong { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; letter-spacing: .05em; }
.assignment-card h3, .assignment-list h3, .time-row h3 { margin: 7px 0 3px; font-size: 17px; line-height: 1.25; }
.customer-name { color: var(--gy-text); font-weight: 700; }
.assignment-address { display: flex; align-items: flex-start; gap: 5px; }
.progress-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; margin-top: 12px; }
progress { width: 100%; height: 6px; border: 0; border-radius: 999px; overflow: hidden; background: #e6edf5; }
progress::-webkit-progress-bar { background: #e6edf5; border-radius: 999px; }
progress::-webkit-progress-value { background: linear-gradient(90deg, var(--gy-blue), #54b6ff); border-radius: 999px; }
progress::-moz-progress-bar { background: linear-gradient(90deg, var(--gy-blue), #54b6ff); }
.progress-row small { color: var(--gy-text-muted); font-size: 10px; white-space: nowrap; }
.time-block, .date-tile { align-self: stretch; min-width: 64px; min-height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; background: var(--gy-surface-dark); border-radius: 14px; }
.time-block strong, .date-tile strong { font-size: 20px; }
.time-block small, .date-tile small { color: #abc0d8; }
.round-link { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; color: var(--gy-blue); background: var(--gy-blue-soft); border-radius: 50%; }
.assignment-card.featured .round-link { color: #fff; background: var(--gy-blue); }

@media (max-width: 559px) {
  .assignment-card { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 8px 12px; }
  .assignment-time { grid-column: 1; grid-row: 1; min-width: 0; min-height: 28px; padding: 0; flex-direction: row; justify-content: flex-start; border: 0; }
  .assignment-time strong { writing-mode: horizontal-tb; transform: none; font-size: 13px; }
  .assignment-card > .grow { grid-column: 1; grid-row: 2; }
  .assignment-card > .round-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

.live-card { margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: linear-gradient(135deg, #0c2c4c, #18558b); border: 0; }
.live-card h2 { margin: 5px 0 0; color: #fff; }
.live-label { display: flex; align-items: center; gap: 7px; color: #a9c5e0; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.pulse { width: 9px; height: 9px; display: inline-block; background: #8f9bae; border-radius: 50%; }
.pulse.on, .live-card .pulse { background: #3ee49b; box-shadow: 0 0 0 6px rgba(62,228,155,.12); }

.btn { min-height: 44px; padding: 11px 17px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--gy-radius-sm); font-weight: 800; transition: transform .16s ease, background .16s ease, opacity .16s ease; }
.btn:active { transform: scale(.98); }
.btn.primary { color: #fff; background: linear-gradient(135deg, var(--gy-blue), #0871de); box-shadow: 0 8px 20px rgba(18,132,246,.24); }
.btn.primary:hover { background: linear-gradient(135deg, #2493ff, var(--gy-blue-strong)); }
.btn.secondary { color: var(--gy-blue-strong); background: var(--gy-blue-soft); }
.btn.light { color: var(--gy-navy); background: #fff; }
.btn.danger { color: var(--gy-danger); background: var(--gy-danger-soft); }
.btn.wide { width: 100%; }
.btn.is-loading::before { content: ""; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.5); border-top-color: currentColor; border-radius: 50%; animation: gy-spin .75s linear infinite; }
@keyframes gy-spin { to { transform: rotate(360deg); } }

.tabs { margin-bottom: 15px; padding: 5px; display: flex; gap: 4px; background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.8); border-radius: 15px; box-shadow: var(--gy-shadow-sm); }
.tabs a { min-height: 42px; flex: 1; display: grid; place-items: center; color: var(--gy-text-muted); border-radius: 11px; font-weight: 750; }
.tabs a.active { color: #fff; background: var(--gy-navy); }
.back { min-height: 44px; margin-top: 3px; display: inline-flex; align-items: center; gap: 4px; color: #bed0e4; font-weight: 750; }

.detail-hero { margin: 2px -10px 14px; padding: 20px 20px 29px; color: #fff; background: radial-gradient(circle at 95% 10%, rgba(18,132,246,.28), transparent 35%), linear-gradient(145deg, #08172f, #123657); border-radius: var(--gy-radius-lg); box-shadow: 0 18px 42px rgba(3,16,34,.18); }
.detail-hero h1 { margin: 14px 0 16px; font-size: clamp(30px,8vw,48px); line-height: 1.03; letter-spacing: -.045em; }
.detail-schedule { display: flex; flex-wrap: wrap; gap: 12px 22px; color: #c2d3e6; }
.detail-schedule span { display: inline-flex; align-items: center; gap: 8px; }
.confirmation-panel { margin: 12px 0; padding: 18px; display: grid; gap: 16px; color: #fff; background: linear-gradient(135deg, #0d3155, #126bb0); border: 1px solid rgba(84,183,255,.22); border-radius: var(--gy-radius); box-shadow: var(--gy-shadow); }
.confirmation-copy { display: flex; gap: 13px; align-items: flex-start; }
.confirmation-copy .panel-icon { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.12); border-radius: 14px; }
.confirmation-copy small { color: #a9d5f7; }
.confirmation-copy h2 { margin: 3px 0; font-size: 20px; }
.confirmation-copy p { margin: 0; color: #cbe3f6; }
.confirmation-panel form .btn { width: 100%; background: #fff; color: #075ca7; box-shadow: none; }
.detail-grid { display: grid; gap: 12px; }
.detail-notes { display: grid; gap: 12px; }
.card-heading { margin-bottom: 17px; display: flex; align-items: center; gap: 11px; }
.card-heading > span { width: 40px; height: 40px; display: grid; place-items: center; color: var(--gy-blue); background: var(--gy-blue-soft); border-radius: 12px; }
.card-heading h2 { margin: 2px 0 0; font-size: 19px; }
.detail-card dl, .profile-card dl { margin: 0 0 17px; display: grid; gap: 0; }
.detail-card dl div, .profile-card dl div { padding: 12px 0; display: grid; gap: 4px; border-bottom: 1px solid var(--gy-border); }
.detail-card dt, .profile-card dt { color: var(--gy-text-muted); font-size: 12px; }
.detail-card dd, .profile-card dd { margin: 0; color: var(--gy-text); font-weight: 750; overflow-wrap: anywhere; }
.notice { border-left: 4px solid var(--gy-blue); }
.notice h3 { margin-bottom: 4px; }

.task-list { padding: 5px 17px; }
.task { border-bottom: 1px solid var(--gy-border); }
.task:last-child { border-bottom: 0; }
.task button { width: 100%; min-height: 58px; padding: 13px 0; display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: transparent; }
.task .check { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: #fff; background: #fff; border: 2px solid #c8d3e1; border-radius: 9px; }
.task .check:not(:empty) { background: var(--gy-success); border-color: var(--gy-success); }
.task button > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.task button small { color: var(--gy-text-muted); }
.task.info { background: #f8fafc; }
.task-copy small { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.task-copy small em { color: var(--gy-text-muted); font-size: 10px; font-style: normal; }
.task-badge { min-height: 22px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 6px; color: #53657c; background: #edf2f7; font-size: 9px; font-weight: 850; line-height: 1; }
.task-badge.pflicht { color: #a65300; background: #fff0df; }
.task-badge.optional { color: var(--gy-blue-strong); background: var(--gy-blue-soft); }
.task-badge.hinweis { color: #5f6e82; background: #eef1f5; }

.action-grid, .menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.mini-action { min-height: 126px; padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; color: var(--gy-text); }
.mini-action > span { width: 42px; height: 42px; margin-bottom: auto; display: grid; place-items: center; color: var(--gy-blue); background: var(--gy-blue-soft); border-radius: 13px; }
.mini-action strong { font-size: 15px; }
.mini-action small { color: var(--gy-text-muted); font-size: 11px; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; box-shadow: var(--gy-shadow-sm); }
.problem { margin: 0; }
.finish { margin-top: 18px; display: grid; gap: 14px; }
.finish > div { display: flex; flex-direction: column; }

.timer-card { display: grid; gap: 20px; }
.timer-state { display: flex; align-items: flex-start; gap: 10px; }
.timer-state h2 { margin: 3px 0; }
.timer-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.timer-actions form, .timer-actions button { width: 100%; }
.time-row > div:first-child { min-width: 60px; display: flex; flex-direction: column; }
.month-picker { width: auto; min-height: 42px; padding: 8px; background: #fff; border: 1px solid var(--gy-border); border-radius: 10px; }
.timer-start-card { padding: 20px; }
.timer-start-card .timer-state { padding-bottom: 2px; }
.timer-start-card .timer-state h2 { font-size: 21px; letter-spacing: -.025em; }

body.portal-auth.has-active-time { color: #fff; background: var(--gy-navy); }
body.has-active-time .portal-frame, body.has-active-time .portal-stage { min-height: 100vh; background: radial-gradient(circle at 52% 18%, rgba(18,132,246,.16) 0, transparent 34%), linear-gradient(150deg, var(--gy-navy-2) 0, var(--gy-navy) 48%, #050d1c 100%); }
.app-shell.has-active-time { width: 100%; min-height: calc(100dvh - 76px); padding: 0 max(16px,env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
.time-focus { --time-accent: var(--gy-blue); width: min(100%, 560px); min-height: calc(100dvh - 172px); margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: clamp(14px,2.2vh,22px); color: #fff; }
.time-focus.is-paused { --time-accent: var(--gy-warning-bright); }
.time-focus-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.time-focus-header p { margin: 0 0 2px; color: #9cabc1; font-size: 15px; font-weight: 650; }
.time-focus-header h1 { margin: 0; font-size: clamp(32px,9vw,42px); line-height: 1; letter-spacing: -.045em; }
.time-avatar { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--gy-blue), var(--gy-blue-strong)); border: 1px solid rgba(103,183,255,.24); border-radius: 50%; box-shadow: 0 10px 28px rgba(18,132,246,.2); font-size: 18px; font-weight: 800; }
.time-orbit { position: relative; width: min(72vw,315px); aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; }
.time-orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.time-orbit circle { fill: none; stroke-width: 12; }
.time-orbit-track { stroke: rgba(139,172,211,.2); }
.time-orbit-state { stroke: var(--time-accent); filter: drop-shadow(0 0 7px color-mix(in srgb,var(--time-accent) 28%,transparent)); }
.time-orbit-value { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.time-orbit-value span { color: var(--time-accent); font-size: clamp(16px,4.3vw,21px); }
.time-orbit-value strong { font: 500 clamp(38px,12.3vw,58px)/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.time-live-meta { margin: -4px auto 0; display: flex; align-items: center; justify-content: center; gap: 24px; color: #91a4bc; font-size: 15px; font-variant-numeric: tabular-nums; }
.time-live-meta span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.time-live-meta i { width: 10px; height: 10px; background: var(--gy-warning-bright); border-radius: 50%; }
.time-live-meta strong { color: #d6e2ef; }
.time-assignment { min-height: 92px; padding: 15px 16px; display: flex; align-items: center; gap: 14px; color: #fff; background: linear-gradient(145deg, rgba(16,43,76,.96), rgba(8,22,47,.96)); border: 1px solid rgba(18,132,246,.25); border-radius: 24px; box-shadow: 0 18px 44px rgba(2,13,31,.28), 0 0 28px rgba(18,132,246,.06); }
.time-assignment-icon { width: 54px; height: 54px; flex: 0 0 54px; display: grid; place-items: center; color: #d7ecff; background: rgba(18,132,246,.24); border: 1px solid rgba(103,183,255,.16); border-radius: 17px; }
.time-assignment .grow { display: flex; flex-direction: column; }
.time-assignment strong { overflow: hidden; font-size: 18px; line-height: 1.25; text-overflow: ellipsis; }
.time-assignment small { overflow: hidden; color: #9fb2c9; font-size: 13px; line-height: 1.35; text-overflow: ellipsis; }
.time-assignment-category { padding-right: 22px; }
.time-focus-actions { display: flex; align-items: stretch; gap: 10px; }
.time-focus-actions form { min-width: 0; flex: 1; display: flex; }
.time-action { min-width: 0; min-height: 68px; padding: 11px 15px; display: flex; flex: 1; align-items: center; justify-content: center; gap: 8px; color: #fff; background: var(--gy-blue); border: 0; border-radius: 22px; font-weight: 800; line-height: 1.12; }
.time-action.round { width: 68px; min-width: 68px; flex: 0 0 68px; padding: 8px; flex-direction: column; color: #d6e2ef; background: var(--gy-surface-dark); border: 1px solid rgba(103,183,255,.16); border-radius: 50%; }
.time-action.round small { font-size: 10px; }
.time-action.pause { color: #ffdda6; background: linear-gradient(145deg, #71470a, var(--gy-warning)); }
.time-action.resume { color: #fff; background: linear-gradient(135deg, var(--gy-blue), var(--gy-blue-strong)); box-shadow: 0 10px 25px rgba(18,132,246,.2); }
.time-action.end { flex: 1.22; color: #ffd9de; background: linear-gradient(145deg, var(--gy-navy-2), var(--gy-surface-dark)); border: 1px solid rgba(198,60,74,.58); box-shadow: inset 0 -3px 0 rgba(198,60,74,.24); }
.time-action.is-loading { font-size: 12px; }
.time-sync-note { margin: -5px 0 0; color: #6f86a1; font-size: 11px; text-align: center; }
.time-end-dialog p { margin: 14px 0 0; color: var(--gy-text-muted); }

@media (max-width: 560px) {
  body.has-active-time .topbar { display: none; }
  .app-shell.has-active-time { min-height: 100dvh; padding-top: max(18px,env(safe-area-inset-top)); }
  .time-focus { min-height: calc(100dvh - 118px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .time-focus-actions { margin-top: auto; }
}

@media (max-width: 370px), (max-height: 760px) {
  .time-focus { gap: 11px; justify-content: flex-start; }
  .time-orbit { width: min(62vw,245px); }
  .time-assignment { min-height: 78px; }
  .time-action { min-height: 60px; padding: 9px 11px; }
  .time-action.round { width: 60px; min-width: 60px; flex-basis: 60px; }
  .time-sync-note { display: none; }
}

.chat-page-title { margin-bottom: 16px; }
.chat-layout { display: grid; gap: 12px; }
.chat-v2 { min-height: 650px; grid-template-columns: minmax(250px,330px) minmax(0,1fr); overflow: hidden; border: 1px solid var(--gy-border); border-radius: 22px; background: #fff; box-shadow: var(--gy-shadow); }
.chat-list-panel { min-width: 0; border-right: 1px solid var(--gy-border); background: #f7faff; }
.chat-contacts { padding: 16px; border-bottom: 1px solid var(--gy-border); }
.chat-contacts > span { display: block; margin-bottom: 9px; color: var(--gy-text-muted); font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.chat-contacts > div { display: flex; gap: 9px; overflow-x: auto; }
.chat-contacts form { flex: none; }
.chat-contacts button { min-width: 54px; padding: 0; display: grid; justify-items: center; gap: 5px; color: var(--gy-text-muted); background: transparent; border: 0; font: inherit; font-size: 10px; cursor: pointer; }
.chat-contacts button b { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,var(--gy-blue),var(--gy-navy)); border-radius: 14px; font-size: 12px; }
.chat-list-items { max-height: 650px; overflow-y: auto; }
.chat-list-item { min-width: 0; padding: 14px 13px; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; gap: 10px; align-items: center; color: inherit; border-bottom: 1px solid #e8eef6; text-decoration: none; }
.chat-list-item.active { background: #eaf3ff; box-shadow: inset 3px 0 var(--gy-blue); }
.chat-list-copy { min-width: 0; display: grid; gap: 3px; }
.chat-list-copy strong,.chat-list-copy small,.chat-list-copy em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-list-copy strong { font-size: 13px; }.chat-list-copy small { color: var(--gy-text-muted); font-size: 11px; }.chat-list-copy em { color: #7f91a8; font-size: 9px; font-style: normal; }
.chat-list-meta { align-self: stretch; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 5px; color: var(--gy-text-muted); font-size: 9px; }
.avatar, .profile-avatar, .profile-mini { display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #123a62, var(--gy-navy)); font-weight: 900; }
.avatar { width: 42px; height: 42px; border-radius: 14px; }
.badge { min-width: 22px; height: 22px; display: grid; place-items: center; color: #fff; background: var(--gy-blue); border-radius: 999px; font-size: 11px; }
.conversation { min-width: 0; min-height: 650px; padding: 0; display: flex; flex-direction: column; background: linear-gradient(180deg,#fff,#f8fbff); }
.chat-conversation-head { min-height: 74px; padding: 14px 18px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid var(--gy-border); background: rgba(255,255,255,.94); }
.chat-mobile-back { display: none; color: var(--gy-blue); font-size: 31px; line-height: 1; }
.chat-conversation-head h2 { margin: 0 0 3px; font-size: 17px; }.chat-conversation-head small { color: var(--gy-text-muted); }
.messages { min-height: 260px; max-height: 565px; flex: 1; padding: 18px; display: flex; flex-direction: column; gap: 9px; overflow: auto; scroll-behavior: smooth; }
.chat-day { margin: 5px 0; display: flex; align-items: center; justify-content: center; }.chat-day span { padding: 5px 10px; color: #6d7f96; background: #e9eff7; border-radius: 999px; font-size: 9px; font-weight: 850; }
.message { max-width: min(78%,520px); padding: 10px 13px 7px; align-self: flex-start; overflow-wrap: anywhere; background: #edf2f8; border-radius: 5px 16px 16px; }
.message.mine { align-self: flex-end; background: var(--gy-blue-soft); border-radius: 16px 5px 16px 16px; }
.message.pinned { border-left: 3px solid var(--gy-warning); }
.message-sender { display: block; margin-bottom: 3px; color: var(--gy-blue-strong); font-size: 10px; }.message p { margin: 0; color: var(--gy-text); line-height: 1.5; }
.message footer { margin-top: 5px; display: flex; align-items: center; justify-content: flex-end; gap: 6px; color: var(--gy-text-muted); font-size: 8px; }.message-flag { color: #a75f00; font-weight: 900; }.message-pin { color: #49617e; }
.chat-image { position: relative; width: min(280px,100%); margin-top: 7px; padding: 0; overflow: hidden; display: block; background: #dce6f2; border: 0; border-radius: 11px; cursor: zoom-in; }.chat-image img { width: 100%; max-height: 310px; display: block; object-fit: cover; }.chat-image span { position: absolute; right: 7px; bottom: 7px; padding: 6px 8px; display: flex; gap: 4px; align-items: center; color: #fff; background: rgba(7,24,55,.78); border-radius: 7px; font-size: 9px; font-weight: 800; }
.composer { position: relative; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: end; gap: 8px; border-top: 1px solid var(--gy-border); background: #fff; }
.composer textarea { min-height: 44px; max-height: 130px; margin: 0; padding: 11px 13px; resize: vertical; }
.composer .attach { width: 42px; height: 42px; margin: 0; display: grid; place-items: center; color: var(--gy-blue); background: var(--gy-blue-soft); border-radius: 13px; cursor: pointer; }.composer .attach span { font-size: 25px; line-height: 1; }.composer .btn { min-height: 44px; display: flex; align-items: center; gap: 7px; }
.composer-file { grid-column: 2/-1; color: var(--gy-text-muted); font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time-start-context { margin: -2px 0 12px; color: var(--gy-text-muted); font-size: 11px; }
.time-start-context[hidden], [data-time-category][hidden] { display: none !important; }
.closed-note { padding: 16px; color: var(--gy-warning); background: var(--gy-warning-soft); border-radius: 12px; text-align: center; }
.chat-lightbox { width: min(92vw,960px); padding: 16px; overflow: visible; background: #07152b; border: 0; border-radius: 18px; }.chat-lightbox::backdrop { background: rgba(3,10,23,.82); backdrop-filter: blur(5px); }.chat-lightbox>button { position: absolute; z-index: 2; top: -12px; right: -12px; width: 38px; height: 38px; color: #fff; background: #17385f; border: 2px solid #fff; border-radius: 50%; font-size: 23px; cursor: pointer; }.chat-lightbox img { width: 100%; max-height: 78vh; display: block; object-fit: contain; border-radius: 10px; }.chat-lightbox p { margin: 10px 2px 0; color: #dce8f7; font-size: 11px; }

@media(max-width:760px){
  input,select,textarea{font-size:16px}
  .chat-page-title{margin-bottom:10px}
  .chat-v2{min-height:0;display:block;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
  .chat-v2.has-selected{height:var(--chat-workspace-height,calc(100dvh - 164px));overflow:hidden}
  body.chat-workspace-active{overflow:hidden}
  body.chat-workspace-active .app-shell.chat{padding-bottom:0}
  .chat-list-panel{margin-bottom:10px;border:1px solid var(--gy-border);border-radius:18px;background:#fff;overflow:hidden}
  .chat-v2.has-selected .chat-list-panel{display:none}
  .chat-list-items{max-height:none}.chat-list-item{padding:12px}
  .conversation{min-height:calc(100dvh - 238px);border:1px solid var(--gy-border);border-radius:18px;overflow:hidden;box-shadow:var(--gy-shadow)}
  .chat-v2.has-selected .conversation{height:100%;min-height:0}
  .chat-mobile-back{display:block}
  .messages{min-height:0;max-height:none;padding:13px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .message{max-width:88%}
  .composer{position:relative;z-index:2;flex:0 0 auto;grid-template-columns:42px minmax(0,1fr) 46px;padding:10px max(10px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
  body.chat-keyboard-open .composer{padding-bottom:10px}
  body.chat-keyboard-open .bottom-nav{display:none}
  .composer .btn{width:46px;padding:0;justify-content:center}.composer .btn span{display:none}.chat-lightbox{padding:10px}
}

@media(min-width:761px){
  .chat-v2.has-selected{height:clamp(650px,calc(100dvh - 190px),860px);min-height:650px}
  .chat-v2.has-selected .conversation{height:100%;min-height:0}
  .chat-v2.has-selected .messages{min-height:0;max-height:none}
}

.menu-grid { margin-bottom: 14px; }
.menu-item { min-height: 100px; display: flex; align-items: center; gap: 14px; }
.menu-item > b { color: var(--gy-blue); font-size: 24px; }
.menu-item span { display: flex; flex-direction: column; }
.menu-item small, .list-row small, .document-row small { color: var(--gy-text-muted); }
.selfservice-title p { margin: 7px 0 0; color: var(--gy-text-muted); }
.selfservice-actions { margin-bottom: 13px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.selfservice-action { min-width: 0; min-height: 94px; padding: 15px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 11px; color: inherit; border: 1px solid var(--gy-border); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.selfservice-action>span:first-child { width: 42px; height: 42px; display: grid; place-items: center; color: var(--gy-blue); background: var(--gy-blue-soft); border-radius: 13px; }
.selfservice-action div { min-width: 0; display: grid; gap: 4px; }.selfservice-action strong,.selfservice-action small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.selfservice-action small { color: var(--gy-text-muted); font-size: 10px; }.selfservice-action>svg { color: #8ea0b6; }
.push-card { margin-bottom: 19px; padding: 15px 17px; display: grid; grid-template-columns: 44px minmax(0,1fr) auto; align-items: center; gap: 12px; }
.push-card-icon { width: 44px; height: 44px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,var(--gy-navy),#173d6c); border-radius: 14px; }.push-card>div { min-width: 0; display: grid; gap: 3px; }.push-card small { color: var(--gy-text-muted); font-size: 10px; }.push-card .btn { min-height: 39px; white-space: nowrap; }
.selfservice-section { margin-top: 18px; }.selfservice-section-head { margin-bottom: 9px; }.selfservice-section-head h2 { display: flex; align-items: center; gap: 7px; }.selfservice-section-head h2 span { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; color: #fff; background: var(--gy-blue); border-radius: 999px; font-size: 10px; }
.notification-list { gap: 8px; }.notification-item { padding: 0; overflow: hidden; }.notification-item.unread { border-color: rgba(18,132,246,.3); box-shadow: inset 3px 0 var(--gy-blue),var(--gy-shadow); }.notification-item.read { opacity: .82; }.notification-item>button { width: 100%; min-height: 82px; padding: 13px 14px; display: grid; grid-template-columns: 42px minmax(0,1fr) auto 18px; align-items: center; gap: 11px; color: inherit; background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; }
.notification-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--gy-blue); background: var(--gy-blue-soft); border-radius: 13px; }.notification-copy { min-width: 0; display: grid; gap: 3px; }.notification-copy strong,.notification-copy span,.notification-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.notification-copy span { color: var(--gy-text); font-size: 11px; }.notification-copy small,.notification-item time { color: var(--gy-text-muted); font-size: 9px; }.notification-item>button>svg { color: #93a4b9; }
.announcement-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }.announcement-card { min-width: 0; padding: 17px; border: 1px solid var(--gy-border); }.announcement-card.unread { border-top: 3px solid var(--gy-blue); }.announcement-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.announcement-card time { color: var(--gy-text-muted); font-size: 9px; }.announcement-card h3 { margin: 13px 0 7px; font-size: 15px; }.announcement-card p { margin: 0; color: var(--gy-text-muted); font-size: 11px; line-height: 1.6; }.announcement-card form { margin-top: 14px; }.announcement-card .btn { display: inline-flex; align-items: center; gap: 6px; }.read-confirmation { margin-top: 13px; display: flex; align-items: center; gap: 5px; color: var(--gy-success); font-weight: 800; }
.selfservice-planning-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; }.planning-card { min-width: 0; }.compact-list { gap: 8px; }.planning-row { min-width: 0; padding: 13px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; }.planning-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--gy-blue); background: var(--gy-blue-soft); border-radius: 12px; }.planning-row>div:not(.planning-actions) { min-width: 0; }.planning-row strong,.planning-row small,.planning-row p { display: block; overflow-wrap: anywhere; }.planning-row small { margin-top: 3px; color: var(--gy-text-muted); font-size: 9px; }.planning-row p { margin: 5px 0 0; color: var(--gy-text-muted); font-size: 10px; }.status-pill { padding: 5px 8px; color: #7a8798; background: #eef2f7; border-radius: 999px; font-size: 9px; font-weight: 850; white-space: nowrap; }.status-pill.genehmigt,.status-pill.verfuegbar { color: var(--gy-success); background: var(--gy-success-soft); }.status-pill.abgelehnt,.status-pill.nicht_verfuegbar { color: var(--gy-danger); background: var(--gy-danger-soft); }.status-pill.offen,.status-pill.eingeschraenkt { color: var(--gy-warning); background: var(--gy-warning-soft); }.planning-actions { display: grid; justify-items: end; gap: 4px; }.planning-actions form { margin: 0; }.text-btn.danger { color: var(--gy-danger); }
.selfservice-section .empty p { margin: 6px 0 0; font-size: 10px; }
.absence-attachment-summary { margin-top: 7px!important; display: flex!important; align-items: center; gap: 5px; color: var(--gy-blue)!important; }
.absence-file-picker>small { color: var(--gy-text-muted); font-size: 10px; font-weight: 500; }
.absence-file-picker input { padding: 9px; }
.absence-file-selection { padding: 11px 12px; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 9px; border: 1px solid var(--gy-border); border-radius: 11px; background: #f7faff; }
.absence-file-selection[hidden] { display: none; }.absence-file-selection>span { color: var(--gy-blue); }.absence-file-selection>div { min-width: 0; display: grid; gap: 2px; }.absence-file-selection strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }.absence-file-selection small { color: var(--gy-text-muted); font-size: 9px; }.absence-file-selection button { color: var(--gy-danger); background: transparent; border: 0; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
@media(max-width:980px){.selfservice-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.selfservice-actions{gap:8px}.selfservice-action{min-height:83px;padding:12px;grid-template-columns:38px minmax(0,1fr)}.selfservice-action>span:first-child{width:38px;height:38px}.selfservice-action>svg{display:none}.push-card{grid-template-columns:40px minmax(0,1fr);padding:13px}.push-card-icon{width:40px;height:40px}.push-card .btn{grid-column:1/-1;width:100%}.notification-item>button{grid-template-columns:40px minmax(0,1fr) 17px;padding:12px}.notification-item time{grid-column:2}.notification-item>button>svg{grid-column:3;grid-row:1/3}.announcement-grid,.selfservice-planning-grid{grid-template-columns:1fr}.planning-row{grid-template-columns:36px minmax(0,1fr)}.planning-actions,.status-pill{grid-column:2;justify-self:start}.planning-actions{display:flex;gap:10px}}
.document-page-title p { margin: 7px 0 0; color: var(--gy-text-muted); }
.document-list { gap: 11px; }
.document-row { min-height: 96px; padding: 16px 18px; color: inherit; text-decoration: none; transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.document-row:hover { transform: translateY(-1px); border-color: rgba(18,132,246,.28); box-shadow: 0 15px 34px rgba(11,42,78,.11); }
.document-icon { width: 50px; height: 50px; flex: none; display: grid; place-items: center; color: var(--gy-blue); background: linear-gradient(145deg,var(--gy-blue-soft),#f3f8ff); border-radius: 15px; }
.document-copy { min-width: 0; display: grid; gap: 4px; }
.document-copy strong,.document-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-copy time { color: #8a9aaf; font-size: 10px; }
.document-open { display: flex; align-items: center; gap: 4px; color: var(--gy-blue); font-size: 11px; font-weight: 850; }
.document-list .empty p { max-width: 310px; margin: 8px 0 0; font-size: 12px; line-height: 1.55; }
@media(max-width:520px){.document-row{min-height:88px;padding:14px}.document-icon{width:44px;height:44px}.document-open{font-size:0}.document-open svg{width:20px;height:20px}}
.profile-card { text-align: center; }
.profile-avatar { width: 78px; height: 78px; margin: auto; border-radius: 25px; font-size: 24px; }
.profile-card h2 { margin: 12px; }
.logout-form { margin-top: 14px; }

label { margin: 12px 0; display: grid; gap: 7px; color: var(--gy-text); font-weight: 700; }
input, select, textarea { width: 100%; min-height: 46px; padding: 11px 12px; color: var(--gy-text); background: #fff; border: 1px solid #cbd7e5; border-radius: 11px; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--gy-blue); box-shadow: 0 0 0 4px rgba(18,132,246,.12); }
textarea { min-height: 96px; resize: vertical; }
.form-grid { display: grid; gap: 10px; }
.empty { padding: 34px 20px; display: flex; flex-direction: column; align-items: center; color: var(--gy-text-muted); text-align: center; }
.empty.compact { padding: 24px 12px; }
.empty-icon { width: 50px; height: 50px; margin-bottom: 10px; display: grid; place-items: center; color: var(--gy-blue); background: var(--gy-blue-soft); border-radius: 16px; }
.empty strong { color: var(--gy-text); }

dialog { width: min(92vw, 510px); max-height: calc(100vh - 40px); padding: 0; overflow: auto; background: #fff; border: 0; border-radius: 22px; box-shadow: 0 30px 90px rgba(4,17,35,.35); }
dialog::backdrop { background: rgba(5,17,35,.68); backdrop-filter: blur(5px); }
.dialog-card { padding: 23px; }
.dialog-title { display: flex; align-items: center; gap: 10px; }
.dialog-title > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--gy-blue); background: var(--gy-blue-soft); border-radius: 13px; }
.dialog-card h2 { margin: 0; }
.dialog-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 10px; }
.dialog-actions > button:not(.btn) { min-height: 44px; color: var(--gy-text-muted); background: transparent; border: 0; }

.flash { margin-bottom: 12px; padding: 13px 15px; color: var(--gy-success); background: var(--gy-success-soft); border: 1px solid rgba(22,163,101,.14); border-radius: 12px; font-weight: 700; }
.flash.error { color: var(--gy-danger); background: var(--gy-danger-soft); border-color: rgba(198,60,74,.15); }
#portal-toast { position: fixed; z-index: 100; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); width: max-content; max-width: calc(100vw - 32px); padding: 12px 17px; color: #fff; background: var(--gy-graphite); border-radius: 13px; box-shadow: var(--gy-shadow); opacity: 0; pointer-events: none; transform: translate(-50%,20px); transition: opacity .2s, transform .2s; }
#portal-toast[data-type="success"] { background: #087b4c; }
#portal-toast[data-type="error"] { background: #a92f3b; }
#portal-toast.show { opacity: 1; transform: translate(-50%,0); }

.bottom-nav { position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; min-height: calc(76px + env(safe-area-inset-bottom)); padding: 8px max(9px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left)); display: flex; align-items: flex-start; justify-content: space-around; background: rgba(255,255,255,.94); border-top: 1px solid var(--gy-border); box-shadow: 0 -10px 35px rgba(13,35,64,.07); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.bottom-nav a { min-width: 58px; min-height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #748198; font-size: 10px; font-weight: 700; }
.bottom-nav .nav-icon { width: 34px; height: 29px; display: grid; place-items: center; border-radius: 10px; }
.bottom-nav a.active { color: var(--gy-blue-strong); }
.bottom-nav a.active .nav-icon { color: #fff; background: var(--gy-blue); box-shadow: 0 5px 14px rgba(18,132,246,.25); }

.login-wrap { width: min(1080px,100%); min-height: calc(100vh - 32px); margin: auto; display: grid; align-items: center; gap: 42px; }
.login-brand { color: #fff; text-align: center; }
.login-brand > span { width: 72px; height: 72px; margin: auto; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #2198ff, #0869d4); border-radius: 23px; box-shadow: 0 18px 38px rgba(18,132,246,.25); font-size: 22px; font-weight: 900; }
.login-brand small { display: block; margin-top: 19px; color: #64b7ff; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }
.login-brand h1 { margin: 8px 0; font-size: clamp(36px,9vw,54px); letter-spacing: -.045em; }
.login-brand p { color: #b5c5da; font-size: 17px; }
.login-card { padding: 24px; }
.login-card h2 { margin-top: 0; font-size: 26px; }
.login-card .btn { width: 100%; margin-top: 6px; }
.login-card .text-btn { margin-top: 8px; }

@media (min-width: 560px) {
  .top-user > div { display: flex; }
  .app-shell { width: min(100% - 40px,1080px); }
  .kpi-grid { gap: 12px; margin-right: 10px; margin-left: 10px; }
  .kpi-card { padding: 16px; }
  .assignment-time { min-width: 112px; flex-direction: row; border-right: 1px solid rgba(133,154,182,.18); }
  .assignment-time strong { writing-mode: horizontal-tb; transform: none; font-size: 14px; }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .confirmation-panel { grid-template-columns: 1fr auto; align-items: center; }
  .confirmation-panel form .btn { width: auto; }
  .finish { grid-template-columns: 1fr auto; align-items: center; }
}

@media (min-width: 760px) {
  .dashboard-hero { padding-right: 42px; padding-left: 42px; }
  .kpi-grid { max-width: 660px; margin-left: 28px; }
  .action-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .detail-grid { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); align-items: start; }
  .menu-grid { grid-template-columns: 1fr 1fr; }
  .chat-layout { grid-template-columns: 300px 1fr; }
  .chat-list { display: grid; align-content: start; overflow: visible; }
  .chat-link { min-width: 0; }
  .login-wrap { grid-template-columns: 1fr 430px; gap: 8vw; }
  .login-brand { text-align: left; }
  .login-brand > span { margin: 0; }
  .login-card { padding: 30px; }
}

@media (min-width: 1040px) {
  body.portal-auth { background: #eaf0f7; }
  .portal-frame { display: grid; grid-template-columns: 260px minmax(0,1fr); gap: 18px; padding: 18px; }
  .desktop-sidebar { position: sticky; top: 18px; height: calc(100vh - 36px); padding: 32px 20px 20px; display: flex; flex-direction: column; color: #d9e7f6; background: radial-gradient(circle at 60% 0, #173c62, transparent 34%), linear-gradient(180deg, #09182d, #0d2135); border-radius: 24px; box-shadow: 0 22px 60px rgba(7,23,42,.18); }
  .wordmark { padding: 0 12px 30px; }
  .wordmark strong { font-size: 20px; }
  .desktop-sidebar nav { display: grid; gap: 7px; }
  .desktop-sidebar nav a { min-height: 48px; padding: 0 13px; display: flex; align-items: center; gap: 13px; color: #aebed1; border-radius: 13px; font-weight: 650; }
  .desktop-sidebar nav a.active { color: #fff; background: linear-gradient(90deg, rgba(18,132,246,.95), rgba(24,112,204,.76)); box-shadow: 0 10px 25px rgba(10,103,193,.24); }
  .sidebar-profile { margin-top: auto; padding: 18px 8px 0; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.1); }
  .profile-mini { width: 40px; height: 40px; border-radius: 13px; background: rgba(255,255,255,.12); }
  .sidebar-profile > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; }
  .sidebar-profile small { color: #8498b0; }
  .portal-stage { overflow: hidden; background: linear-gradient(180deg, #0d223a 0 220px, var(--gy-bg) 220px); border-radius: 24px; box-shadow: 0 22px 60px rgba(12,34,61,.1); }
  .topbar { width: min(100% - 56px,1080px); }
  .mobile-wordmark { visibility: hidden; }
  .app-shell { width: min(100% - 56px,1080px); padding-bottom: 60px; }
  .bottom-nav { display: none; }
  #portal-toast { bottom: 34px; }
  .dashboard-hero { min-height: 330px; margin: 0; padding: 34px 44px 100px; border-radius: 24px; }
  .hero-brand { display: flex; }
  .kpi-grid { max-width: 720px; margin: -72px 28px 28px; }
  .kpi-card { min-height: 145px; }
}

@media (max-width: 380px) {
  .kpi-card { padding: 12px 9px; }
  .kpi-card .kpi-icon { width: 32px; height: 32px; }
  .assignment-card { gap: 10px; padding: 14px 12px; }
  .assignment-time { min-width: 48px; }
  .round-link { width: 40px; height: 40px; flex-basis: 40px; }
}

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

/* Final Glanz Y product layer */
.top-user { position: relative; border-radius: 14px; }
.top-user > span { position: relative; }
.top-user > span b { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; color: #fff; background: var(--gy-danger); border: 2px solid var(--gy-navy); border-radius: 99px; font-size: 9px; line-height: 1; }
.dashboard-hero h1 i { position: relative; width: .58em; height: .58em; margin-left: .08em; display: inline-block; vertical-align: .08em; }
.dashboard-hero h1 i::before,.dashboard-hero h1 i::after { content:""; position:absolute; inset:50% auto auto 50%; background:var(--gy-blue-light); border-radius:99px; transform:translate(-50%,-50%); }
.dashboard-hero h1 i::before { width:100%; height:2px; }
.dashboard-hero h1 i::after { width:2px; height:100%; }
.hero-glow { position:absolute; right:8%; bottom:12%; width:150px; height:150px; background:radial-gradient(circle,rgba(18,132,246,.22),transparent 67%); filter:blur(4px); border-radius:50%; }
.section-head time,.section-head>time { color:var(--gy-text-muted); font-size:12px; font-weight:700; }
.assignment-card,.assignment-list,.current-card,.next-card,.task-overview-card,.profile-link { transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.assignment-card:hover,.assignment-list:hover,.current-card:hover,.next-card:hover,.task-overview-card:hover,.profile-link:hover { transform:translateY(-2px); border-color:rgba(18,132,246,.28); box-shadow:0 18px 40px rgba(11,38,71,.12); }
.assignment-meta { margin-top:11px; display:flex; flex-wrap:wrap; gap:8px 14px; color:var(--gy-text-muted); font-size:10px; font-weight:700; }
.assignment-meta span { display:inline-flex; align-items:center; gap:5px; }
.chip.live { color:#04794a; background:#dcf8ea; }
.chip.danger { color:var(--gy-danger); background:var(--gy-danger-soft); }
.dashboard-layout { display:grid; gap:22px; }
.dashboard-aside { display:none; }
.day-progress { margin-top:16px; padding:20px; }
.day-progress header { margin-bottom:14px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.day-progress small { color:var(--gy-text-muted); font-size:10px; font-weight:850; letter-spacing:.12em; text-transform:uppercase; }
.day-progress h2 { margin:4px 0 0; font-size:16px; }
.day-progress header>strong { color:var(--gy-blue-strong); font-size:22px; }
.day-progress progress { height:8px; }
.current-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.current-card { position:relative; min-width:0; min-height:128px; padding:14px; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.current-card>span { width:38px; height:38px; margin-bottom:auto; display:grid; place-items:center; color:var(--gy-blue); background:var(--gy-blue-soft); border-radius:12px; }
.current-card strong { max-width:100%; font-size:12px; overflow:hidden; text-overflow:ellipsis; }
.current-card small { color:var(--gy-text-muted); font-size:9px; }
.current-card>b { position:absolute; top:11px; right:11px; min-width:21px; height:21px; padding:0 6px; display:grid; place-items:center; color:#fff; background:var(--gy-danger); border-radius:99px; font-size:9px; }
.next-card { position:relative; min-height:230px; display:flex; flex-direction:column; }
.next-card header { display:flex; align-items:center; gap:9px; color:var(--gy-text); }
.next-card header span { color:var(--gy-blue); }
.next-card>div { margin:auto 0; }
.next-card>div>b { display:block; margin-bottom:9px; color:var(--gy-blue-strong); font-size:22px; }
.next-card h3 { margin:0 0 8px; font-size:19px; }
.next-card p { margin:1px 0; font-size:12px; }
.next-card>.round-link { position:absolute; right:18px; bottom:18px; }
.brand-card { min-height:195px; margin:0; padding:24px; display:flex; flex-direction:column; justify-content:center; color:#fff; background:radial-gradient(circle at 80% 10%,rgba(18,132,246,.24),transparent 34%),linear-gradient(145deg,#07162e,#102d4c); border-radius:var(--gy-radius); box-shadow:var(--gy-shadow); }
.brand-card span { color:#7699be; font:700 52px/1 Georgia,serif; }
.brand-card p { max-width:230px; margin:0; font-size:24px; font-weight:700; line-height:1.2; letter-spacing:-.03em; }
.brand-card i { width:38px; height:4px; margin-top:22px; background:var(--gy-blue); border-radius:99px; }
.assignments-title p,.task-overview-title p,.profile-page-title p { margin:8px 0 0; color:#b9c9dc; }
.assignment-list-heading { margin-top:18px; }
.assignments-list { gap:11px; }
.assignments-list .assignment-list { min-height:126px; }
.task-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:8px; }
.task-summary .card { min-width:0; min-height:94px; padding:14px; display:flex; flex-direction:column; justify-content:center; }
.task-summary strong { color:var(--gy-blue-strong); font-size:26px; line-height:1; }
.task-summary small { margin-top:7px; color:var(--gy-text-muted); font-size:10px; }
.task-overview-section { margin-top:6px; }
.task-overview-list { gap:9px; }
.task-overview-card { min-height:104px; padding:15px; display:grid; grid-template-columns:42px minmax(0,1fr) 20px; align-items:center; gap:12px; }
.task-state { width:42px; height:42px; display:grid; place-items:center; color:var(--gy-blue); background:var(--gy-blue-soft); border:1px solid rgba(18,132,246,.11); border-radius:13px; }
.task-overview-card.is-done .task-state { color:#fff; background:var(--gy-success); }
.task-overview-card.is-done { opacity:.75; }
.task-overview-card>.grow { display:grid; gap:3px; }
.task-overview-card>.grow>strong { font-size:14px; }
.task-overview-card>.grow>small,.task-overview-card time { color:var(--gy-text-muted); font-size:10px; }
.task-overview-card .chips { margin-top:4px; align-items:center; }
.task-overview-card .chips em { color:var(--gy-text-muted); font-size:9px; font-style:normal; }
.task-overview-card>svg { color:#91a1b6; }
.task-overview-empty { margin-top:18px; }
.profile-identity { padding:22px; display:flex; align-items:center; gap:17px; text-align:left; }
.profile-identity .profile-avatar { margin:0; flex:0 0 78px; }
.profile-identity>div:last-child { display:grid; justify-items:start; gap:4px; }
.profile-identity h2 { margin:0; }
.profile-identity small { color:var(--gy-text-muted); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.detail-hero.is-active { box-shadow:0 18px 46px rgba(3,16,34,.2),inset 0 0 0 1px rgba(51,226,154,.22); }
.profile-grid { margin-top:12px; display:grid; gap:12px; }
.profile-section { min-width:0; }
.profile-link { display:grid; grid-template-columns:44px minmax(0,1fr) 20px; align-items:center; gap:13px; }
.profile-link>div { min-width:0; }
.profile-link small { color:var(--gy-text-muted); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.profile-link strong { display:block; margin-top:2px; }
.profile-link p { margin:3px 0 0; font-size:10px; }
.profile-link>svg { color:#91a1b6; }
.theme-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.theme-options button { min-height:82px; padding:10px 6px; display:grid; place-items:center; align-content:center; gap:7px; color:var(--gy-text-muted); background:var(--gy-surface-2); border:1px solid var(--gy-border); border-radius:13px; }
.theme-options button span { width:32px; height:32px; display:grid; place-items:center; }
.theme-options button strong { font-size:11px; }
.theme-options button.active { color:var(--gy-blue-strong); background:var(--gy-blue-soft); border-color:rgba(18,132,246,.45); box-shadow:0 0 0 2px rgba(18,132,246,.08); }
.setting-note { margin:11px 0 0!important; font-size:10px; }
.sidebar-profile>svg { margin-left:auto; color:#7f93ab; }

@media (min-width:760px) {
  .current-grid { gap:11px; }
  .current-card { min-height:142px; padding:17px; }
  .current-card strong { font-size:14px; }
  .profile-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .logout-form { max-width:360px; margin-left:auto; }
}

@media (min-width:1040px) {
  .portal-frame { grid-template-columns:246px minmax(0,1fr); gap:0; padding:0; }
  .desktop-sidebar { top:0; height:100vh; padding:36px 18px 22px; border-radius:0; background:radial-gradient(circle at 20% 0,#173c67,transparent 35%),linear-gradient(180deg,#081831,#0b1d35); box-shadow:18px 0 50px rgba(6,20,42,.12); }
  .desktop-sidebar nav { gap:6px; }
  .desktop-sidebar nav a { min-height:50px; border-radius:14px; }
  .desktop-sidebar nav a:hover { color:#fff; background:rgba(255,255,255,.06); }
  .desktop-sidebar nav a.active { background:linear-gradient(90deg,#258cff,#176dcc); }
  .sidebar-profile { margin-top:auto; min-height:64px; padding:16px 8px 0; }
  .portal-stage { border-radius:0; box-shadow:none; background:linear-gradient(180deg,#0b203a 0 220px,var(--gy-bg) 220px); }
  .app-shell { width:min(100% - 64px,1180px); }
  .topbar { width:min(100% - 64px,1180px); }
  .dashboard-hero { min-height:316px; padding:34px 42px 96px; }
  .hero-brand { margin-bottom:40px; }
  .kpi-grid { max-width:720px; margin:-70px 28px 30px; }
  .kpi-card { min-height:138px; }
  .dashboard-layout { grid-template-columns:minmax(0,1fr) 300px; align-items:start; gap:22px; }
  .dashboard-aside { padding-top:28px; display:grid; gap:16px; }
}

@media (min-width:1440px) {
  .portal-frame { grid-template-columns:270px minmax(0,1fr); }
  .desktop-sidebar { padding-right:22px; padding-left:22px; }
  .app-shell,.topbar { width:min(100% - 76px,1260px); }
  .dashboard-layout { grid-template-columns:minmax(0,1fr) 330px; gap:26px; }
}

@media (max-width:559px) {
  .current-card { padding:12px 9px; }
  .current-card strong { font-size:10px; }
  .current-card small { font-size:8px; }
  .assignment-meta { gap:7px 10px; }
  .assignments-list .assignment-list { display:grid; grid-template-columns:54px minmax(0,1fr) 40px; align-items:center; gap:10px; padding:13px; }
  .assignments-list .date-tile { min-width:54px; min-height:72px; }
  .assignments-list .round-link { width:40px; height:40px; flex-basis:40px; }
  .task-overview-card { grid-template-columns:38px minmax(0,1fr) 18px; gap:10px; padding:13px 12px; }
  .task-state { width:38px; height:38px; }
}

@media (max-width:340px) {
  .kpi-card small { font-size:8px; }
  .current-grid { grid-template-columns:1fr; }
  .current-card { min-height:74px; display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; }
  .current-card>span { grid-row:1/3; margin:0; }
  .task-summary .card { padding:11px 8px; }
  .task-summary strong { font-size:21px; }
  .task-summary small { font-size:8px; }
}

html[data-theme="dark"] {
  color-scheme:dark;
  --gy-bg:#071426;
  --gy-surface:#0e2138;
  --gy-surface-2:#122941;
  --gy-text:#eef5fd;
  --gy-text-muted:#9bb0c8;
  --gy-muted:#9bb0c8;
  --gy-border:#203852;
  --gy-blue-soft:#122f4d;
  --gy-success-soft:#0e3429;
  --gy-warning-soft:#392b14;
  --gy-danger-soft:#3b1d27;
  --gy-shadow-sm:0 10px 26px rgba(0,0,0,.18);
  --gy-shadow:0 20px 52px rgba(0,0,0,.27);
}
html[data-theme="dark"],html[data-theme="dark"] body { background:var(--gy-bg); color:var(--gy-text); }
html[data-theme="dark"] body.portal-auth { background:linear-gradient(180deg,#061226 0 238px,var(--gy-bg) 238px); }
html[data-theme="dark"] .card,html[data-theme="dark"] .tabs,html[data-theme="dark"] .chat-list-panel,html[data-theme="dark"] .conversation,html[data-theme="dark"] .composer,html[data-theme="dark"] dialog { color:var(--gy-text); background:var(--gy-surface); border-color:var(--gy-border); }
html[data-theme="dark"] .card h2,html[data-theme="dark"] .card h3,html[data-theme="dark"] .card p,html[data-theme="dark"] .customer-name,html[data-theme="dark"] .detail-card dd,html[data-theme="dark"] .profile-card dd,html[data-theme="dark"] label,html[data-theme="dark"] .message p,html[data-theme="dark"] .notification-copy span,html[data-theme="dark"] .empty strong { color:var(--gy-text); }
html[data-theme="dark"] .card p,html[data-theme="dark"] .card small,html[data-theme="dark"] .document-copy time { color:var(--gy-text-muted); }
html[data-theme="dark"] input,html[data-theme="dark"] select,html[data-theme="dark"] textarea,html[data-theme="dark"] .month-picker { color:var(--gy-text); background:#0a1b30; border-color:#29425d; }
html[data-theme="dark"] .bottom-nav { background:rgba(8,23,41,.94); border-color:var(--gy-border); box-shadow:0 -10px 35px rgba(0,0,0,.22); }
html[data-theme="dark"] .bottom-nav a { color:#8ea3ba; }
html[data-theme="dark"] .bottom-nav a.active { color:#64b5ff; }
html[data-theme="dark"] .tabs a.active { color:#fff; background:var(--gy-blue-strong); }
html[data-theme="dark"] .date-tile { background:#132b45; }
html[data-theme="dark"] .assignment-card.featured { background:linear-gradient(140deg,#102a45,#12395c); }
html[data-theme="dark"] .task.info,html[data-theme="dark"] .chat-list-panel,html[data-theme="dark"] .conversation { background:var(--gy-surface-2); }
html[data-theme="dark"] .task .check { background:#0a1b30; border-color:#3a5068; }
html[data-theme="dark"] .chat-list-item { border-color:var(--gy-border); }
html[data-theme="dark"] .chat-list-item.active { background:#123352; }
html[data-theme="dark"] .chat-conversation-head,html[data-theme="dark"] .composer { background:rgba(14,33,56,.96); border-color:var(--gy-border); }
html[data-theme="dark"] .message { background:#1a334d; }
html[data-theme="dark"] .message.mine { background:#123c62; }
html[data-theme="dark"] .absence-file-selection { background:var(--gy-surface-2); border-color:var(--gy-border); }
html[data-theme="dark"] .current-card>span,html[data-theme="dark"] .task-state,html[data-theme="dark"] .card-heading>span,html[data-theme="dark"] .document-icon,html[data-theme="dark"] .planning-icon,html[data-theme="dark"] .notification-icon { background:#133454; }
html[data-theme="dark"] .kpi-card { background:rgba(14,33,56,.98); border-color:rgba(57,87,119,.8); }
html[data-theme="dark"] .kpi-card strong,html[data-theme="dark"] .section-head h2 { color:var(--gy-text); }
html[data-theme="dark"] .kpi-icon.navy { color:#8db9e7; background:#19334d; }
html[data-theme="dark"] .day-progress header>strong,html[data-theme="dark"] .task-summary strong { color:#67b7ff; }
html[data-theme="dark"] .brand-card { border:1px solid var(--gy-border); }
html[data-theme="dark"] .theme-options button { color:var(--gy-text-muted); background:var(--gy-surface-2); border-color:var(--gy-border); }
html[data-theme="dark"] .theme-options button.active { color:#8bc7ff; background:#123b60; border-color:#267cc4; }
html[data-theme="dark"] .portal-stage { background:linear-gradient(180deg,#07182d 0 220px,var(--gy-bg) 220px); }

@media (prefers-color-scheme:dark) {
  html:not([data-theme]) { color-scheme:dark; }
}

/* Visual polish V2: compact, native-style employee workspace. */
.hero-vehicle { position:absolute; z-index:0; right:-28px; bottom:-7px; width:min(55%,430px); max-height:78%; object-fit:contain; object-position:right bottom; opacity:.78; filter:drop-shadow(0 14px 22px rgba(0,0,0,.34)); pointer-events:none; }
.dashboard-hero::before { content:""; position:absolute; z-index:0; inset:0; background:linear-gradient(90deg,rgba(4,16,36,.98) 0%,rgba(6,24,48,.92) 51%,rgba(6,24,48,.44) 100%); }
.dashboard-hero > :not(.hero-vehicle,.hero-glow) { position:relative; z-index:2; }
.dashboard-hero .hero-subline { max-width:58%; }
.card { border-radius:15px; box-shadow:0 7px 20px rgba(13,35,64,.065); }
.page-title { padding-top:19px; padding-bottom:15px; }
.page-title h1 { font-size:clamp(27px,7vw,39px); }
.section-head { min-height:34px; margin:20px 3px 8px; }
.section-head h2 { font-size:19px; }
.section-head a,.text-btn { min-height:36px; font-size:12px; }
.empty { min-height:0; padding:19px 15px; display:grid; grid-template-columns:38px minmax(0,1fr); column-gap:11px; text-align:left; }
.empty .empty-icon { grid-row:1/3; width:38px; height:38px; margin:0; border-radius:11px; }
.empty p { margin:2px 0!important; font-size:11px; }
.empty.compact { padding:16px 12px; }
.chip { min-height:22px; padding:4px 8px; font-size:9px; }

.dashboard-hero { min-height:205px; margin:0 -10px; padding:18px 20px 53px; border-radius:0 0 22px 22px; background:radial-gradient(circle at 78% 32%,#174f7b 0,transparent 34%),linear-gradient(140deg,#061329,#102f4f); }
.dashboard-hero::after { opacity:.45; transform:scale(.78); transform-origin:bottom right; }
.dashboard-hero .eyebrow { margin-bottom:5px; font-size:9px; }
.dashboard-hero h1 { max-width:66%; font-size:clamp(28px,7.8vw,43px); line-height:1; }
.dashboard-hero h1 span { margin-bottom:4px; font-size:.46em; }
.hero-subline { margin-top:10px; font-size:13px; line-height:1.35; }
.hero-glow { opacity:.46; }
.kpi-grid { gap:7px; margin:-38px 4px 15px; }
.kpi-card { min-height:86px; padding:10px 10px 9px; border-radius:14px; box-shadow:0 12px 28px rgba(11,33,60,.11); }
.kpi-card .kpi-icon { width:27px; height:27px; margin-bottom:7px; border-radius:8px; }
.kpi-card .kpi-icon svg { width:16px; height:16px; }
.kpi-card strong { font-size:clamp(16px,4.4vw,22px); }
.kpi-card small { margin-top:3px; font-size:9px; }
.dashboard-layout { gap:16px; }
.assignment-stack { gap:8px; }
.assignment-card { min-height:112px; gap:11px; padding:13px; }
.assignment-card h3,.assignment-list h3,.time-row h3 { margin:5px 0 2px; font-size:15px; }
.assignment-card p { margin:2px 0; font-size:11px; line-height:1.35; }
.assignment-time { min-width:50px; padding:4px 2px; gap:5px; }
.assignment-time strong { font-size:10px; }
.assignment-meta { margin-top:7px; gap:5px 10px; font-size:9px; }
.round-link { width:36px; height:36px; flex-basis:36px; }
.round-link svg { width:18px; height:18px; }
.day-progress { margin-top:11px; padding:14px 15px; }
.day-progress header { margin-bottom:9px; align-items:center; }
.day-progress h2 { margin-top:2px; font-size:13px; }
.day-progress header>strong { font-size:18px; }
.day-progress progress { height:6px; }
.current-grid { gap:7px; }
.current-card { min-height:91px; padding:10px; border-radius:13px; }
.current-card>span { width:29px; height:29px; margin-bottom:8px; border-radius:9px; }
.current-card>span svg { width:16px; height:16px; }
.current-card strong { font-size:10px; }
.current-card small { font-size:8px; }
.current-card>b { top:7px; right:7px; min-width:18px; height:18px; font-size:8px; }
.live-card { padding:13px 15px; }
.live-card h2 { font-size:16px; }

.detail-hero { margin:0 -4px 10px; padding:15px 17px 19px; border-radius:18px; }
.detail-hero h1 { margin:10px 0 11px; font-size:clamp(26px,7vw,39px); }
.detail-schedule { gap:8px 14px; font-size:11px; }
.detail-card,.detail-notes .card { padding:15px; }
.card-heading { margin-bottom:11px; gap:9px; }
.card-heading>span { width:33px; height:33px; border-radius:10px; }
.card-heading h2 { font-size:16px; }
.detail-card dl,.profile-card dl { margin-bottom:12px; }
.detail-card dl div,.profile-card dl div { padding:8px 0; }
.detail-card dt,.profile-card dt { font-size:10px; }
.detail-card dd,.profile-card dd { font-size:13px; }
.task-list { padding:3px 14px; }
.task button { min-height:49px; padding:9px 0; }
.task .check { width:27px; height:27px; flex-basis:27px; }
.action-grid,.menu-grid { gap:8px; }
.mini-action,.action-card { min-height:93px; padding:12px; }
.mini-action>span,.action-card>span { width:34px; height:34px; }
.mini-action strong,.action-card strong { font-size:12px; }
.mini-action small,.action-card small { font-size:9px; }
.finish { margin-top:13px; padding:14px; }
.assignments-list { gap:8px; }
.assignments-list .assignment-list { min-height:101px; }
.task-summary .card { min-height:76px; padding:10px; }
.task-summary strong { font-size:21px; }
.task-summary small { margin-top:4px; font-size:9px; }
.task-overview-card { min-height:82px; padding:11px; grid-template-columns:35px minmax(0,1fr) 17px; gap:9px; }
.task-state { width:35px; height:35px; border-radius:10px; }
.selfservice-action { min-height:76px; padding:11px; grid-template-columns:36px minmax(0,1fr) auto; }
.selfservice-action>span:first-child { width:36px; height:36px; border-radius:10px; }
.planning-row,.notification-item>button,.document-row { padding:11px; }

.bottom-nav { min-height:calc(62px + env(safe-area-inset-bottom)); padding:5px max(8px,env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); border-top-color:rgba(130,150,176,.2); box-shadow:0 -6px 22px rgba(13,35,64,.055); }
.bottom-nav a { min-height:48px; gap:1px; font-size:9px; }
.bottom-nav .nav-icon { width:31px; height:26px; border-radius:9px; }
.bottom-nav .nav-icon svg { width:19px; height:19px; }
.bottom-nav a.active .nav-icon { color:var(--gy-blue-strong); background:rgba(18,132,246,.09); box-shadow:none; }
.app-shell { padding-bottom:calc(82px + env(safe-area-inset-bottom)); }

@media (max-width:559px) {
  .topbar { height:64px; width:calc(100% - 32px); padding-top:max(8px,env(safe-area-inset-top)); }
  .mobile-wordmark strong { font-size:18px; }
  .mobile-wordmark small { margin-top:5px; font-size:8px; }
  .top-user>span { width:36px; height:36px; border-radius:11px; }
  .app-shell { padding-top:0; }
  .assignment-card.featured .assignment-time { border-right-color:rgba(255,255,255,.14); }
  .assignment-card.featured .chip { background:rgba(255,255,255,.12); color:#d7ebff; }
  .current-card { padding:9px 8px; }
  .current-card strong { font-size:9.5px; }
  .current-card small { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
}

@media (min-width:560px) {
  .dashboard-hero { padding-left:30px; padding-right:30px; }
  .kpi-card { padding:11px 13px; }
  .assignment-time { min-width:98px; }
}

@media (min-width:1040px) {
  .portal-frame { grid-template-columns:226px minmax(0,1fr); }
  .desktop-sidebar { padding:27px 15px 18px; }
  .wordmark { padding:0 12px 24px; }
  .wordmark strong { font-size:22px; }
  .wordmark small { font-size:8px; }
  .desktop-sidebar nav { gap:4px; }
  .desktop-sidebar nav a { min-height:43px; padding:0 12px; gap:11px; border-radius:11px; font-size:13px; }
  .desktop-sidebar nav a svg { width:18px; height:18px; }
  .sidebar-profile { min-height:57px; padding-top:12px; }
  .profile-mini { width:36px; height:36px; border-radius:11px; }
  .topbar { height:66px; }
  .app-shell { width:min(100% - 48px,1160px); padding-bottom:42px; }
  .dashboard-hero { min-height:237px; padding:25px 34px 66px; border-radius:19px; }
  .hero-brand { margin-bottom:22px; }
  .hero-brand strong { font-size:20px; }
  .dashboard-hero h1 { font-size:39px; }
  .hero-vehicle { right:1.5%; width:44%; max-height:91%; }
  .kpi-grid { max-width:650px; margin:-48px 23px 21px; }
  .kpi-card { min-height:96px; }
  .dashboard-layout { grid-template-columns:minmax(0,1fr) 276px; gap:17px; }
  .dashboard-aside { padding-top:20px; gap:12px; }
  .next-card { min-height:194px; padding:17px; }
  .brand-card { min-height:153px; padding:19px; }
  .brand-card p { font-size:20px; }
  .detail-grid { gap:10px; }
}

html[data-theme="dark"] .dashboard-hero::before { background:linear-gradient(90deg,rgba(2,10,24,.99),rgba(5,21,41,.92) 52%,rgba(4,18,36,.5)); }
html[data-theme="dark"] .bottom-nav a.active .nav-icon { color:#70bcff; background:rgba(75,164,245,.12); }

/* Glanz Y Employee Operations — Futuristic V3 */
:root {
  --gy-bg:#eef4fa;
  --gy-surface:rgba(255,255,255,.96);
  --gy-surface-2:#f5f9fd;
  --gy-surface-elevated:#fff;
  --gy-navy:#06182b;
  --gy-navy-2:#0a2947;
  --gy-deep:#04111f;
  --gy-blue:#0788ff;
  --gy-blue-strong:#006ee6;
  --gy-cyan:#16c7f3;
  --gy-text:#0b1930;
  --gy-text-muted:#6f829a;
  --gy-border:rgba(116,145,176,.22);
  --gy-success:#13b66b;
  --gy-warning:#f2a33a;
  --gy-danger:#f0445b;
  --gy-radius-sm:10px;
  --gy-radius:14px;
  --gy-radius-lg:19px;
  --gy-shadow-sm:0 8px 24px rgba(5,27,54,.07);
  --gy-shadow:0 18px 48px rgba(4,22,45,.14);
}
html { background:var(--gy-deep); }
body { color:var(--gy-text); background:var(--gy-bg); font-size:14px; line-height:1.42; }
body.portal-auth { background:linear-gradient(180deg,var(--gy-deep) 0 226px,var(--gy-bg) 226px); }
.topbar { height:61px; }
.mobile-wordmark strong,.wordmark strong { font-size:19px; letter-spacing:.27em; }
.mobile-wordmark small,.wordmark small { margin-top:5px; color:#47aefe; font-size:8px; letter-spacing:.3em; }
.top-user>span { width:36px; height:36px; border-color:rgba(92,183,255,.28); border-radius:11px; background:rgba(9,43,73,.48); backdrop-filter:blur(12px); }
.top-user>span b { border-color:var(--gy-deep); }
.app-shell { width:min(100% - 18px,1160px); padding-top:0; }
.card { background:var(--gy-surface); border:1px solid var(--gy-border); border-radius:var(--gy-radius); box-shadow:var(--gy-shadow-sm); }
.card:hover { border-color:rgba(7,136,255,.3); }
.page-title { padding:18px 5px 13px; }
.page-title h1 { margin-top:3px; font-size:clamp(26px,7vw,40px); font-weight:780; letter-spacing:-.045em; }
.page-title p { max-width:560px; margin:6px 0 0!important; color:#9fb1c6!important; font-size:12px; }
.card>small,.eyebrow,.page-title small,.section-head small,.card-heading small,.confirmation-copy small,.finish small { font-size:9px; letter-spacing:.16em; }
.section-head { margin:18px 3px 8px; }
.section-head h2 { font-size:18px; letter-spacing:-.025em; }
.section-head time,.section-head>time { font-size:11px; }
.section-count { min-width:34px; min-height:23px; padding:4px 8px; color:var(--gy-blue); background:rgba(7,136,255,.1); border-radius:99px; font-size:10px; font-weight:800; text-align:center; }
.btn { min-height:41px; padding:10px 15px; border-radius:10px; font-size:12px; }
.btn.primary { background:linear-gradient(135deg,#1094ff,#006ee6); box-shadow:0 10px 24px rgba(0,120,240,.22); }
.btn.secondary { color:#0077ef; background:rgba(7,136,255,.09); border:1px solid rgba(7,136,255,.12); }
.tabs { margin-bottom:10px; padding:4px; gap:3px; border-color:rgba(91,153,209,.18); border-radius:12px; background:rgba(9,39,66,.72); box-shadow:inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(16px); }
.tabs a { min-height:36px; color:#afc3d7; border-radius:9px; font-size:11px; }
.tabs a.active { background:linear-gradient(135deg,var(--gy-blue),var(--gy-blue-strong)); box-shadow:0 7px 18px rgba(7,136,255,.22); }
.chip,.status-pill,.task-badge { font-weight:820; letter-spacing:.01em; }
.chip.neutral,.chip.dark { color:#bee1ff; background:rgba(7,136,255,.14); }
.round-link { color:var(--gy-blue); background:rgba(7,136,255,.09); }
.empty { background:rgba(255,255,255,.8); }

/* Dashboard hero and operational summary */
.dashboard-hero { min-height:197px; padding:17px 19px 49px; border:1px solid rgba(54,150,232,.12); background:radial-gradient(circle at 79% 25%,rgba(12,119,200,.48),transparent 29%),linear-gradient(135deg,#041323,#0b2c4a 66%,#092039); box-shadow:0 24px 55px rgba(2,13,30,.2); }
.dashboard-hero::before { background:linear-gradient(90deg,rgba(3,15,30,.98) 0%,rgba(4,21,39,.9) 49%,rgba(3,18,34,.24) 100%); }
.dashboard-hero::after { right:-40px; bottom:-112px; border-color:rgba(22,199,243,.18); box-shadow:0 0 0 38px rgba(7,136,255,.045),0 0 0 76px rgba(7,136,255,.026); }
.dashboard-hero .eyebrow { color:#86a8c7; }
.dashboard-hero h1 { max-width:60%; font-size:clamp(28px,7.6vw,42px); }
.dashboard-hero h1 span { color:#e9f4ff; font-size:.43em; font-weight:650; }
.dashboard-hero h1 i::before,.dashboard-hero h1 i::after { background:var(--gy-cyan); box-shadow:0 0 9px rgba(22,199,243,.55); }
.hero-subline { max-width:51%!important; color:#b9ccdf; font-size:12px; }
.hero-vehicle { right:-22px; bottom:-4px; width:min(58%,450px); max-height:82%; opacity:.91; filter:drop-shadow(0 18px 26px rgba(0,0,0,.42)) saturate(1.04) contrast(1.03); }
.hero-glow { right:19%; width:110px; height:110px; background:radial-gradient(circle,rgba(22,199,243,.3),transparent 68%); }
.kpi-grid { gap:7px; margin:-35px 4px 13px; }
.kpi-card { min-height:80px; padding:9px 10px; border-color:rgba(112,154,195,.18); border-radius:12px; background:rgba(255,255,255,.94); box-shadow:0 13px 30px rgba(3,22,46,.13); backdrop-filter:blur(16px); }
.kpi-card .kpi-icon { width:25px; height:25px; margin-bottom:6px; color:var(--gy-blue); background:rgba(7,136,255,.09); border:1px solid rgba(7,136,255,.1); border-radius:7px; }
.kpi-card strong { font-size:18px; }
.kpi-card small { font-size:8.5px; letter-spacing:.01em; }
.assignment-card { min-height:101px; padding:11px; border-radius:13px; }
.assignment-card.featured { background:radial-gradient(circle at 97% 0,rgba(7,136,255,.22),transparent 30%),linear-gradient(135deg,#061a2e,#0c3151); border-color:rgba(35,155,249,.25); box-shadow:0 15px 34px rgba(3,21,43,.18); }
.assignment-time { min-width:47px; color:#20a5ff; }
.assignment-card h3,.assignment-list h3,.time-row h3 { font-size:14px; }
.assignment-card p,.assignment-list p { font-size:11px; }
.assignment-meta { color:#7890aa; font-size:9px; }
.assignment-card.featured .assignment-meta { color:#8faac5; }
.assignment-card.featured .round-link { background:linear-gradient(135deg,#0c9cff,#0075e8); box-shadow:0 8px 18px rgba(0,128,255,.25); }
.day-progress { background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,250,254,.94)); }
.day-progress progress,.progress-row progress { overflow:hidden; background:#e6edf5; border-radius:99px; }
.day-progress progress::-webkit-progress-value,.progress-row progress::-webkit-progress-value { background:linear-gradient(90deg,var(--gy-blue),var(--gy-cyan)); border-radius:99px; }
.current-card { background:linear-gradient(145deg,#fff,#f7fbff); }
.current-card>span { color:var(--gy-blue); background:rgba(7,136,255,.08); border:1px solid rgba(7,136,255,.08); }
.next-card { color:#fff; background:radial-gradient(circle at 92% 8%,rgba(7,136,255,.25),transparent 31%),linear-gradient(145deg,#06182b,#0c3151); border-color:rgba(52,159,245,.22); }
.next-card h3,.next-card header { color:#fff; }
.next-card p { color:#9db4ca; }
.brand-card { background:radial-gradient(circle at 84% 15%,rgba(22,199,243,.18),transparent 30%),linear-gradient(145deg,#041323,#0b2c49); }

/* Assignment, task and detail workspaces */
.assignments-list .assignment-list { min-height:92px; padding:10px 12px; background:linear-gradient(145deg,#fff,#f8fbfe); }
.assignments-list .assignment-list:first-child { border-color:rgba(7,136,255,.24); box-shadow:inset 3px 0 0 var(--gy-blue),var(--gy-shadow-sm); }
.date-tile { min-width:48px; min-height:61px; color:#fff; background:linear-gradient(160deg,#082843,#061827); border:1px solid rgba(27,150,245,.2); border-radius:11px; }
.date-tile strong { font-size:17px; }
.date-tile small { color:#8faec9; font-size:9px; }
.back { min-height:33px; color:#b8cada; font-size:11px; }
.detail-hero { position:relative; overflow:hidden; min-height:136px; margin:0 -3px 10px; padding:15px 17px 18px; border:1px solid rgba(34,151,240,.18); background:radial-gradient(circle at 88% 20%,rgba(16,145,230,.35),transparent 30%),linear-gradient(135deg,#041424,#0d3150); }
.detail-hero::after { content:""; position:absolute; right:-6px; bottom:-26px; width:195px; height:120px; background:url('portal-hero-van.webp') right bottom/contain no-repeat; opacity:.22; filter:blur(.2px); pointer-events:none; }
.detail-hero>* { position:relative; z-index:1; }
.detail-hero h1 { max-width:70%; margin:9px 0 10px; font-size:clamp(25px,6.8vw,38px); }
.detail-schedule { font-size:10.5px; }
.confirmation-panel { border-color:rgba(7,136,255,.25); border-radius:13px; background:linear-gradient(145deg,#fafdff,#edf7ff); }
.detail-grid { gap:9px; }
.detail-card,.detail-notes .card { padding:13px; }
.card-heading { margin-bottom:9px; }
.card-heading>span { width:31px; height:31px; color:var(--gy-blue); background:rgba(7,136,255,.08); }
.card-heading h2 { font-size:15px; }
.detail-card dl div,.profile-card dl div { padding:7px 0; }
.task-list { border-radius:13px; }
.task button { min-height:46px; }
.task .check { border-color:#bfcfe0; border-radius:7px; }
.task .check:not(:empty) { background:linear-gradient(135deg,var(--gy-blue),var(--gy-blue-strong)); border-color:var(--gy-blue); }
.task-summary .card { border-radius:11px; background:linear-gradient(145deg,#fff,#f6faff); }
.task-overview-card { border-radius:12px; background:linear-gradient(145deg,#fff,#f7fbff); }
.task-overview-card.is-done { opacity:.72; }
.task-state { color:var(--gy-blue); background:rgba(7,136,255,.08); }
.mini-action,.action-card { min-height:83px; border-radius:12px; background:linear-gradient(145deg,#fff,#f6faff); }
.mini-action>span,.action-card>span { color:var(--gy-blue); background:rgba(7,136,255,.08); }
.finish { border-color:rgba(7,136,255,.22); background:linear-gradient(145deg,#fafdff,#edf7ff); }

/* Time cockpit */
.time-focus { max-width:520px; min-height:calc(100dvh - 150px); gap:13px; }
.time-focus-header h1 { font-size:clamp(28px,8vw,38px); }
.time-avatar { width:48px; height:48px; flex-basis:48px; background:linear-gradient(145deg,var(--gy-blue),#0557b7); box-shadow:0 0 30px rgba(7,136,255,.22); }
.time-orbit { width:min(63vw,280px); }
.time-orbit circle { stroke-width:10; }
.time-orbit-state { stroke:var(--gy-blue); filter:drop-shadow(0 0 9px rgba(7,136,255,.28)); }
.time-orbit-value strong { font-size:clamp(36px,11vw,52px); }
.time-assignment { min-height:80px; padding:12px 14px; border-radius:16px; background:linear-gradient(145deg,rgba(10,41,70,.94),rgba(4,19,36,.97)); }
.time-assignment-icon { width:45px; height:45px; flex-basis:45px; border-radius:13px; }
.time-assignment strong { font-size:15px; }
.time-action { min-height:58px; border-radius:15px; }
.time-action.round { width:58px; min-width:58px; flex-basis:58px; }
.time-action.end { color:#fff; background:linear-gradient(135deg,#ff5266,#e8314a); border-color:#ff6274; box-shadow:0 10px 25px rgba(240,68,91,.2); }
.timer-start-card { background:radial-gradient(circle at 90% 0,rgba(7,136,255,.13),transparent 30%),linear-gradient(145deg,#fff,#f5faff); }

/* Messenger, documents and self service */
.chat-v2 { border-color:rgba(80,137,190,.2); border-radius:15px; box-shadow:var(--gy-shadow); }
.chat-list-panel { background:rgba(255,255,255,.86); backdrop-filter:blur(18px); }
.chat-list-item { min-height:68px; padding:10px 11px; }
.chat-list-item.active { background:linear-gradient(90deg,rgba(7,136,255,.12),rgba(22,199,243,.05)); box-shadow:inset 3px 0 0 var(--gy-blue); }
.avatar { background:linear-gradient(145deg,#0d416e,#06192c); }
.conversation { background:#f6f9fc; }
.chat-conversation-head { min-height:62px; background:rgba(255,255,255,.9); backdrop-filter:blur(18px); }
.messages { background:radial-gradient(circle at 88% 8%,rgba(7,136,255,.05),transparent 32%),#f3f7fb; }
.message { border:1px solid rgba(110,142,175,.15); border-radius:14px 14px 14px 4px; box-shadow:0 6px 16px rgba(5,25,48,.05); }
.message.mine { color:#fff; background:linear-gradient(145deg,#0b7fe8,#075fb8); border-radius:14px 14px 4px 14px; }
.composer { background:rgba(255,255,255,.92); backdrop-filter:blur(18px); }
.document-row { min-height:75px; padding:11px 13px; background:linear-gradient(145deg,#fff,#f7fbff); }
.document-icon,.notification-icon,.planning-icon,.push-card-icon { color:var(--gy-blue); background:rgba(7,136,255,.08); border:1px solid rgba(7,136,255,.08); }
.selfservice-actions { gap:8px; }
.selfservice-action { min-height:72px; border-radius:12px; background:linear-gradient(145deg,#fff,#f7fbff); }
.push-card { border-color:rgba(7,136,255,.17); background:linear-gradient(145deg,#fff,#f2f9ff); }
.notification-item,.planning-row,.announcement-card { border-radius:12px; }
.notification-item.unread { box-shadow:inset 3px 0 0 var(--gy-blue),var(--gy-shadow-sm); }
.profile-identity { color:#fff; border-color:rgba(47,157,241,.23); background:radial-gradient(circle at 90% 15%,rgba(22,199,243,.16),transparent 31%),linear-gradient(145deg,#041523,#0b2f4e); }
.profile-identity h2 { color:#fff!important; }
.profile-identity small { color:#88a8c5; }
.profile-avatar { background:linear-gradient(145deg,#168fff,#075bb4); box-shadow:0 0 30px rgba(7,136,255,.22); }
.profile-section { background:linear-gradient(145deg,#fff,#f7fbff); }
.theme-options button { border-radius:10px; }

/* Mobile native shell */
.bottom-nav { min-height:calc(59px + env(safe-area-inset-bottom)); padding-top:4px; border-top:1px solid rgba(98,130,163,.18); background:rgba(250,253,255,.91); box-shadow:0 -8px 26px rgba(3,23,47,.07); backdrop-filter:blur(22px) saturate(1.2); }
.bottom-nav a { min-height:46px; gap:0; color:#688098; font-size:8.5px; }
.bottom-nav .nav-icon { height:25px; }
.bottom-nav a.active { color:var(--gy-blue); }
.bottom-nav a.active .nav-icon { color:var(--gy-blue); background:transparent; filter:drop-shadow(0 0 7px rgba(7,136,255,.3)); }

/* Premium login */
.guest-shell { padding:0; background:var(--gy-deep); }
.login-wrap { position:relative; width:100%; min-height:100dvh; padding:24px; gap:0; overflow:hidden; background:radial-gradient(circle at 78% 23%,rgba(7,136,255,.21),transparent 27%),linear-gradient(145deg,#020c17,#062039 68%,#04121f); }
.login-wrap::after { content:""; position:absolute; right:-18%; bottom:-18%; width:62vw; height:52vw; max-width:900px; max-height:700px; background:linear-gradient(135deg,transparent 38%,rgba(22,199,243,.08) 49%,rgba(7,136,255,.7) 50%,rgba(22,199,243,.12) 51%,transparent 62%); transform:rotate(-12deg); filter:drop-shadow(0 0 18px rgba(7,136,255,.6)); pointer-events:none; }
.login-brand { position:relative; z-index:1; min-height:290px; display:flex; flex-direction:column; text-align:left; }
.login-wordmark { display:flex; flex-direction:column; color:#fff; }
.login-wordmark strong { font-size:22px; letter-spacing:.28em; }
.login-wordmark em { color:var(--gy-blue); font-style:normal; }
.login-wordmark small { margin-top:5px; color:#48b2ff; font-size:8px; font-weight:850; letter-spacing:.28em; text-transform:uppercase; }
.login-brand-copy { margin-top:auto; max-width:300px; }
.login-brand-copy small { margin:0; color:#4fb8ff; font-size:8px; letter-spacing:.2em; }
.login-brand-copy h1 { margin:7px 0 4px; font-size:30px; }
.login-brand-copy p { margin:0; color:#b6c8d9; font-size:12px; }
.login-statement { display:none; }
.login-card { position:relative; z-index:2; padding:18px; color:#fff; border-color:rgba(89,168,230,.21); background:rgba(7,31,54,.77); box-shadow:0 24px 60px rgba(0,0,0,.28); backdrop-filter:blur(22px); }
.login-card h2 { margin:3px 0 13px; color:#fff; font-size:23px; }
.login-kicker { color:#55b8ff!important; }
.login-card label { color:#a9bfd3; font-size:10px; }
.login-card input { min-height:44px; color:#fff; background:rgba(6,26,46,.8); border-color:rgba(100,165,218,.24); }
.login-card input:focus { border-color:var(--gy-blue); box-shadow:0 0 0 3px rgba(7,136,255,.12); }
.login-card .text-btn { width:100%; justify-content:center; color:#65bdff; }

/* Dark theme uses the same operational language, not an inverted afterthought. */
html[data-theme="dark"] {
  --gy-bg:#041321;
  --gy-surface:rgba(9,32,54,.96);
  --gy-surface-2:#0b2945;
  --gy-surface-elevated:#0d2d4b;
  --gy-text:#f4f9ff;
  --gy-text-muted:#94abc1;
  --gy-border:rgba(111,158,199,.24);
  --gy-shadow-sm:0 10px 28px rgba(0,0,0,.2);
  --gy-shadow:0 20px 55px rgba(0,0,0,.3);
}
html[data-theme="dark"] body.portal-auth { background:linear-gradient(180deg,#020d19 0 226px,var(--gy-bg) 226px); }
html[data-theme="dark"] .kpi-card,html[data-theme="dark"] .current-card,html[data-theme="dark"] .day-progress,html[data-theme="dark"] .assignments-list .assignment-list,html[data-theme="dark"] .task-summary .card,html[data-theme="dark"] .task-overview-card,html[data-theme="dark"] .mini-action,html[data-theme="dark"] .action-card,html[data-theme="dark"] .profile-section,html[data-theme="dark"] .selfservice-action,html[data-theme="dark"] .document-row { background:linear-gradient(145deg,rgba(12,39,65,.98),rgba(7,27,48,.98)); }
html[data-theme="dark"] .empty { background:rgba(9,31,52,.84); }
html[data-theme="dark"] .conversation,html[data-theme="dark"] .messages { background:#061827; }
html[data-theme="dark"] .chat-conversation-head,html[data-theme="dark"] .composer { background:rgba(8,29,49,.92); }
html[data-theme="dark"] .bottom-nav { background:rgba(4,19,33,.93); }
html[data-theme="dark"] .finish,html[data-theme="dark"] .confirmation-panel,html[data-theme="dark"] .push-card,html[data-theme="dark"] .timer-start-card { background:linear-gradient(145deg,#0b2b48,#071c31); }

@media(max-width:559px) {
  .topbar { width:calc(100% - 30px); }
  .app-shell { padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
  .dashboard-hero { margin:0 -9px; }
  .assignment-time { writing-mode:horizontal-tb; }
  .assignment-time strong { writing-mode:vertical-rl; }
  .assignments-list .assignment-list { grid-template-columns:48px minmax(0,1fr) 35px; gap:9px; padding:10px; }
  .assignments-list .date-tile { min-width:48px; min-height:62px; }
  .current-card strong { font-size:10px; }
  .selfservice-actions { grid-template-columns:1fr 1fr; }
  .selfservice-action { grid-template-columns:34px minmax(0,1fr); }
  .page-title+.tabs { margin-top:0; }
}

/* Final V3 micro-polish: atmospheric vehicle integration without changing hero geometry. */
.dashboard-hero {
  isolation:isolate;
  background:
    radial-gradient(ellipse 40% 42% at 82% 63%,rgba(22,199,243,.15),transparent 72%),
    radial-gradient(circle at 79% 25%,rgba(12,119,200,.43),transparent 30%),
    linear-gradient(135deg,#041323,#0b2c4a 66%,#092039);
}
.dashboard-hero::before {
  background:
    linear-gradient(90deg,rgba(3,15,30,.99) 0%,rgba(4,21,39,.92) 48%,rgba(3,18,34,.26) 100%),
    linear-gradient(180deg,transparent 56%,rgba(2,13,27,.28));
}
.hero-vehicle {
  right:-1%;
  bottom:-2px;
  width:min(55%,430px);
  max-height:80%;
  opacity:.84;
  filter:brightness(.88) saturate(.86) contrast(1.05) drop-shadow(0 19px 28px rgba(0,0,0,.46)) drop-shadow(0 0 16px rgba(23,150,235,.16));
  -webkit-mask-image:linear-gradient(105deg,transparent 0,#000 16%,#000 87%,rgba(0,0,0,.72) 96%,transparent 100%);
  mask-image:linear-gradient(105deg,transparent 0,#000 16%,#000 87%,rgba(0,0,0,.72) 96%,transparent 100%);
}
.hero-glow {
  right:1%;
  bottom:2px;
  width:52%;
  height:42px;
  opacity:.72;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(20,180,246,.35),rgba(7,136,255,.13) 42%,transparent 72%);
  filter:blur(10px);
}

@media(max-width:559px) {
  .hero-vehicle {
    right:6px;
    width:min(50%,220px);
    max-height:67%;
    opacity:.8;
  }
  .hero-glow { right:-1%; width:55%; height:34px; bottom:3px; }
}

@media(min-width:760px) {
  .hero-vehicle { right:2.5%; width:min(43%,455px); max-height:84%; }
  .hero-glow { right:2%; width:43%; }
}

@media(min-width:1040px) {
  .hero-vehicle { right:3%; width:min(41%,470px); max-height:88%; }
  .hero-glow { right:2%; width:42%; height:48px; }
}

@media(min-width:760px) {
  .login-wrap { grid-template-columns:minmax(0,1.3fr) minmax(360px,440px); align-items:stretch; padding:40px clamp(40px,7vw,108px); }
  .login-brand { min-height:calc(100dvh - 80px); padding:10px 30px 20px 0; }
  .login-wordmark strong { font-size:28px; }
  .login-brand-copy { margin-top:auto; margin-bottom:10%; max-width:480px; }
  .login-brand-copy h1 { font-size:clamp(40px,5vw,64px); }
  .login-brand-copy p { font-size:15px; }
  .login-statement { display:block; margin:0; color:#79a6ca; font-size:10px; font-weight:700; letter-spacing:.3em; text-transform:uppercase; }
  .login-card { align-self:center; padding:27px; }
}

@media(min-width:1040px) {
  .portal-frame { grid-template-columns:218px minmax(0,1fr); background:var(--gy-deep); }
  .desktop-sidebar { padding:27px 14px 18px; background:radial-gradient(circle at 26% 0,rgba(13,72,119,.66),transparent 31%),linear-gradient(180deg,#041321,#061b2e); border-right:1px solid rgba(72,135,190,.14); }
  .wordmark { padding:0 12px 26px; }
  .wordmark strong { font-size:21px; }
  .desktop-sidebar nav a { min-height:41px; border-radius:9px; color:#94acc2; font-size:12px; }
  .desktop-sidebar nav a.active { background:linear-gradient(90deg,#058cff,#006bda); box-shadow:0 9px 24px rgba(0,121,236,.24); }
  .portal-stage { background:linear-gradient(180deg,#061a2d 0 204px,var(--gy-bg) 204px); }
  .topbar { height:58px; }
  .app-shell { width:min(100% - 42px,1220px); padding-bottom:38px; }
  .dashboard-hero { min-height:225px; padding:23px 31px 62px; }
  .dashboard-hero h1 { font-size:38px; }
  .hero-brand { margin-bottom:18px; }
  .hero-brand strong { font-size:18px; }
  .hero-vehicle { right:2%; width:43%; max-height:92%; }
  .kpi-grid { max-width:670px; margin:-45px 22px 18px; }
  .kpi-card { min-height:91px; }
  .dashboard-layout { grid-template-columns:minmax(0,1fr) 270px; gap:15px; }
  .dashboard-aside { padding-top:18px; gap:11px; }
  .next-card { min-height:184px; padding:15px; }
  .brand-card { min-height:140px; }
  .page-title { padding-top:14px; }
  .assignments-list .assignment-list { display:grid; grid-template-columns:54px 1fr 38px; }
  .detail-grid { grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); }
  .action-grid { gap:9px; }
  .chat-layout { grid-template-columns:286px minmax(0,1fr); }
}

@media(min-width:1440px) {
  .portal-frame { grid-template-columns:228px minmax(0,1fr); }
  .app-shell,.topbar { width:min(100% - 54px,1280px); }
  .dashboard-layout { grid-template-columns:minmax(0,1fr) 292px; }
}

@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) {
  .kpi-card,.bottom-nav,.login-card,.tabs,.chat-conversation-head,.composer { backdrop-filter:none; }
}

.notification-history-item.unread { border-left:3px solid var(--gy-blue); }
.notification-history-item p { overflow-wrap:anywhere; }
.notification-history-item time { font-size:12px; color:var(--gy-text-muted); }
.notification-history-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:16px; }
[data-notification-empty][hidden] { display:none; }

/* Branding hotfix: in-flow hero columns cannot reach the separate header. */
.topbar { height:auto; min-height:64px; padding-bottom:8px; gap:16px; flex-shrink:0; }
.mobile-wordmark { min-width:0; min-height:44px; justify-content:center; flex:0 1 190px; }
.portal-brand-logo { display:block; width:100%; height:auto; object-fit:contain; }
.wordmark .portal-brand-logo { width:100%; }
.top-user { flex-shrink:0; min-height:44px; }
.top-user > span { width:44px; height:44px; }
.dashboard-brand-hero {
  display:grid; grid-template-columns:minmax(0,1fr) minmax(90px,30%);
  align-items:center; gap:18px; margin:0; min-height:200px;
  padding:22px 20px 58px; overflow:hidden; isolation:isolate;
}
.dashboard-brand-hero::before,.dashboard-brand-hero::after { pointer-events:none; }
.dashboard-brand-hero .hero-copy { min-width:0; }
.dashboard-brand-hero h1 { max-width:none; overflow-wrap:anywhere; }
.dashboard-brand-hero .hero-subline { max-width:none !important; }
.dashboard-brand-hero .hero-logo {
  position:static; display:block; width:100%; height:auto; max-width:260px;
  justify-self:center; object-fit:contain; pointer-events:none;
}
.login-logo { align-items:center; margin:0 0 22px; padding:18px; border-radius:12px; background:#08162f; }
.login-logo img { display:block; width:min(100%,280px); height:auto; object-fit:contain; }
@media(min-width:760px) {
  .dashboard-brand-hero { grid-template-columns:minmax(0,1fr) minmax(150px,30%); padding:26px 32px 62px; }
}

/* Pre-1.0: the selected mobile chat is one bounded workspace; only messages scroll. */
@media(max-width:760px) {
  .chat-v2.has-selected { border:0; border-radius:0; box-shadow:none; }
  .chat-v2.has-selected .conversation { border-radius:15px; }
}

/* V3 reference pass: preserve compact legibility on native-width screens. */
@media(max-width:559px) {
  .assignment-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) 36px;
    grid-template-rows:auto auto;
    align-items:center;
  }
  .assignment-card .assignment-time {
    grid-column:1;
    grid-row:1;
    min-width:0;
    padding:0;
    flex-direction:row;
    justify-content:flex-start;
    gap:6px;
  }
  .assignment-card .assignment-time strong {
    writing-mode:horizontal-tb;
    transform:none;
    white-space:nowrap;
  }
  .assignment-card .grow { grid-column:1; grid-row:2; }
  .assignment-card .round-link { grid-column:2; grid-row:1 / 3; }
  .conversation > .empty {
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:center;
  }
  .conversation > .empty strong { max-width:240px; }
  .conversation > .empty p { max-width:270px; }
  .login-statement {
    display:block;
    margin:12px 0 0;
    color:#79a6ca;
    font-size:8px;
    font-weight:750;
    letter-spacing:.22em;
    line-height:1.55;
    text-transform:uppercase;
  }
}