:root {
  color-scheme: dark;
  --bg: #121318;
  --surface: #202127;
  --surface-soft: #26272e;
  --surface-strong: #18191f;
  --text: #f6f7fb;
  --muted: #9799a4;
  --border: rgba(255, 255, 255, 0.055);
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
  --blue: #71d9c5;
  --pink: #f472b6;
  --green: #4ade80;
  --orange: #fb923c;
  --purple: #9370ff;
  --radius: clamp(16px, 1.2vw, 24px);
  --space-xs: clamp(8px, 0.9vw, 12px);
  --space-sm: clamp(12px, 1vw, 16px);
  --space-md: clamp(14px, 1.2vw, 18px);
  --space-lg: clamp(18px, 1.6vw, 24px);
  --transition: 180ms ease;
  --stats-card-min: 120px;
  --stats-card-gap: 10px;
  --stats-card-padding: 12px;
  --stats-card-radius: 20px;
  --stats-card-label: 0.78rem;
  --stats-card-value: clamp(1.15rem, 1.8vw, 1.45rem);
  --stats-card-note: 0.72rem;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); }
body { overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.app-shell { max-width: 1560px; margin: 0 auto; padding: clamp(16px, 3vw, 36px); }
.topbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md); align-items: center; margin-bottom: var(--space-lg); }
.brand-lockup { display: flex; align-items: center; gap: clamp(12px, 1.5vw, 18px); }
.brand-mark { display: grid; width: clamp(54px, 5vw, 68px); height: clamp(54px, 5vw, 68px); flex: 0 0 auto; place-items: center; border: 1px solid rgba(113, 217, 197, 0.42); border-radius: clamp(17px, 1.5vw, 22px); background: linear-gradient(145deg, rgba(113, 217, 197, 0.18), rgba(147, 112, 255, 0.13)); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22), 0 0 22px rgba(113, 217, 197, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
.brand-mark span { color: var(--blue); font-size: clamp(1rem, 1.5vw, 1.28rem); font-weight: 900; letter-spacing: -0.08em; text-shadow: 0 0 16px rgba(113, 217, 197, 0.52); transform: translateX(-0.04em); }
.title-block h1 { margin: 4px 0 0; font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.02; letter-spacing: -0.055em; }
.brand-subtitle { margin: 7px 0 0; color: var(--muted); font-size: clamp(0.76rem, 1vw, 0.9rem); font-weight: 600; letter-spacing: 0.025em; }
.eyebrow { margin: 0; color: var(--muted); font-size: clamp(0.68rem, 1vw, 0.82rem); letter-spacing: 0.22em; text-transform: uppercase; }
.top-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.top-meta span { display: inline-flex; align-items: center; gap: 8px; }
.status-pill { align-self: center; justify-self: start; min-width: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; letter-spacing: 0.02em; padding: 7px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.topbar-right { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.logout-button { display: inline-flex; align-items: center; text-decoration: none; }
.status-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin-bottom: var(--space-lg); }
.status-row div, .status-pill { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.status-label { margin: 0 0 6px; color: var(--muted); font-size: clamp(0.8rem, 1vw, 0.95rem); }
.status-row strong { display: block; margin: 0; font-size: clamp(1.4rem, 3vw, 2.4rem); }
.status-pill { align-self: center; justify-self: start; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; letter-spacing: 0.04em; }
.dashboard-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-lg); align-items: start; }
.main-column { display: grid; gap: var(--space-lg); }
.summary-row { display: grid; gap: var(--stats-card-gap); grid-template-columns: repeat(auto-fit, minmax(var(--stats-card-min), 1fr)); grid-auto-rows: minmax(96px, auto); }
.stats-compact-grid { align-items: stretch; }
.panel-grid { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.summary-card { position: relative; padding: var(--stats-card-padding); border-radius: var(--stats-card-radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); overflow: hidden; min-height: 88px; display: grid; gap: 6px; }
.card-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 15px; box-shadow: var(--shadow); }
.section-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: baseline; margin-bottom: var(--space-md); }
.section-header h2 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin: 0; }
.section-header p { margin: 4px 0 0; color: var(--muted); font-size: 0.9rem; }
.last-events, .timeline { min-height: 120px; }
.summary-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: var(--blue); pointer-events: none; opacity: 0.7; }
.summary-card * { position: relative; }
.summary-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: var(--stats-card-label); letter-spacing: 0.04em; }
.summary-card strong { font-size: var(--stats-card-value); line-height: 1.05; }
.summary-card small { display: block; margin-top: 4px; color: var(--muted); font-size: var(--stats-card-note); }
.gradient-blue { background: linear-gradient(180deg, rgba(56, 189, 248, 0.16), rgba(15, 23, 42, 0.96)); }
.gradient-pink { background: linear-gradient(180deg, rgba(244, 114, 182, 0.16), rgba(15, 23, 42, 0.96)); }
.gradient-green { background: linear-gradient(180deg, rgba(74, 222, 128, 0.16), rgba(15, 23, 42, 0.96)); }
.gradient-orange { background: linear-gradient(180deg, rgba(251, 146, 60, 0.18), rgba(15, 23, 42, 0.96)); }
.glow-panel { display: grid; gap: var(--space-sm); grid-template-columns: 1.6fr 1fr; background: rgba(8, 14, 28, 0.9); border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); padding: var(--space-lg); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.glow-panel h2 { margin: 0 0 10px; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.glow-panel p { margin: 0; color: var(--muted); line-height: 1.7; }
.status-card { align-self: center; justify-self: end; display: grid; gap: 10px; justify-items: end; }
.status-card span { color: var(--muted); }
.status-card strong { font-size: clamp(1.4rem, 3vw, 2rem); }
.activity-panel { background: rgba(15, 23, 42, 0.9); border: 1px solid var(--border); border-radius: calc(var(--radius) + 6px); padding: var(--space-lg); box-shadow: var(--shadow); }
.activity-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); align-items: baseline; margin-bottom: var(--space-md); }
.activity-header h2 { margin: 0; font-size: clamp(1.2rem, 2vw, 1.6rem); }
.activity-header p { margin: 0; color: var(--muted); }
.activity-chips { display: grid; gap: var(--space-sm); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.activity-chip { padding: var(--space-sm); border-radius: 20px; border: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; color: var(--text); background: rgba(255,255,255,0.03); }
.activity-chip strong { font-size: 1.2rem; }
.action-panel { display: grid; gap: 10px; }
.action-grid { display: grid; gap: clamp(10px, 1.1vw, 14px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.action-card { display: flex; aspect-ratio: 1 / 0.92; min-height: clamp(128px, 14vw, 168px); flex-direction: column; align-items: center; justify-content: center; gap: clamp(7px, 0.8vw, 11px); padding: clamp(14px, 1.5vw, 20px) 10px; border-radius: clamp(17px, 1.6vw, 22px); background: linear-gradient(145deg, rgba(38, 39, 46, 0.96), rgba(29, 30, 37, 0.94)); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.035); text-align: center; isolation: isolate; overflow: hidden; transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition); }
.action-card .action-icon { display: flex; align-items: center; justify-content: center; min-height: 1em; font-size: clamp(3rem, 5.2vw, 4.65rem); line-height: 1; filter: drop-shadow(0 7px 14px rgba(0, 0, 0, 0.24)); transform: scale(1); transform-origin: center; transition: transform var(--transition), filter var(--transition); }
.action-card strong { max-width: 100%; font-size: clamp(1rem, 1.65vw, 1.24rem); font-weight: 800; line-height: 1.12; letter-spacing: 0.01em; }
.action-card small { color: var(--muted); font-size: clamp(0.72rem, 1vw, 0.84rem); font-weight: 600; line-height: 1.1; letter-spacing: 0.025em; }
.action-card:hover { transform: translateY(-4px); border-color: rgba(113, 217, 197, 0.5); background: linear-gradient(145deg, rgba(43, 47, 54, 0.98), rgba(31, 36, 42, 0.96)); box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26), 0 0 22px rgba(113, 217, 197, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.07); }
.action-card:hover .action-icon { transform: scale(1.1); filter: drop-shadow(0 9px 16px rgba(113, 217, 197, 0.22)); }
.action-card:focus-visible { outline: 3px solid rgba(113, 217, 197, 0.72); outline-offset: 3px; border-color: rgba(113, 217, 197, 0.76); }
.action-card:active { transform: translateY(0) scale(0.97); border-color: rgba(147, 112, 255, 0.82); background: linear-gradient(145deg, rgba(52, 47, 69, 0.98), rgba(34, 32, 48, 0.98)); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.26), 0 0 24px rgba(147, 112, 255, 0.18), inset 0 2px 8px rgba(0, 0, 0, 0.16); }
.action-card:active .action-icon { transform: scale(1.16); filter: drop-shadow(0 8px 16px rgba(147, 112, 255, 0.32)); }
.weather-card { --weather-accent: #7adcf5; --weather-accent-rgb: 122,220,245; display: none; position: relative; isolation: isolate; margin-top: 10px; padding: 18px; overflow: hidden; border: 1px solid rgba(var(--weather-accent-rgb),0.18); border-radius: 24px; background: linear-gradient(145deg, rgba(25,45,64,0.98), rgba(16,23,39,0.99)); box-shadow: 0 24px 52px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12), 0 0 32px rgba(var(--weather-accent-rgb),0.08); transition: background 700ms ease, box-shadow 700ms ease; backdrop-filter: blur(12px); }
.weather-card[data-theme="warm"] { --weather-accent: #ffc46b; --weather-accent-rgb: 255,196,107; background: linear-gradient(145deg, rgba(94,53,33,0.98), rgba(32,28,43,0.99)); box-shadow: 0 24px 52px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12), 0 0 32px rgba(255,196,107,0.08); }
.weather-card[data-theme="rainy"] { --weather-accent: #a99dff; --weather-accent-rgb: 169,157,255; background: linear-gradient(145deg, rgba(41,40,85,0.98), rgba(15,23,53,0.99)); box-shadow: 0 24px 52px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12), 0 0 32px rgba(169,157,255,0.08); }
.weather-card[data-theme="night"] { --weather-accent: #9aafff; --weather-accent-rgb: 154,175,255; background: linear-gradient(145deg, rgba(28,32,76,0.98), rgba(12,19,42,0.99)); box-shadow: 0 24px 52px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12), 0 0 32px rgba(154,175,255,0.08); }
.weather-card[data-theme="mild"] { --weather-accent: #8ce6ce; --weather-accent-rgb: 140,230,206; background: linear-gradient(145deg, rgba(31,67,70,0.98), rgba(18,29,45,0.99)); box-shadow: 0 24px 52px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12), 0 0 32px rgba(140,230,206,0.08); }
.weather-ambient, .weather-glow { position: absolute; pointer-events: none; }
.weather-ambient { z-index: -1; inset: 0; overflow: hidden; }
.weather-glow { width: 170px; height: 170px; border-radius: 50%; background: rgba(var(--weather-accent-rgb),0.22); filter: blur(42px); animation: weatherDrift 10s ease-in-out infinite alternate; }
.weather-glow-one { top: -80px; right: -36px; }
.weather-glow-two { bottom: -110px; left: 16%; opacity: 0.45; animation-delay: -4s; }
.weather-particle { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.42); box-shadow: 0 0 12px rgba(var(--weather-accent-rgb),0.8); animation: weatherFloat 8s ease-in-out infinite; }
.particle-one { top: 27%; left: 11%; }.particle-two { top: 18%; right: 31%; animation-delay: -2s; }.particle-three { bottom: 36%; right: 10%; animation-delay: -5s; }.particle-four { bottom: 24%; left: 40%; animation-delay: -7s; }
.weather-topline, .weather-hero { position: relative; display: flex; justify-content: space-between; gap: 12px; }
.weather-topline { align-items: start; }
.weather-topline small, .weather-updated, .weather-message { color: rgba(231,241,255,0.58); font-size: 0.68rem; }
.weather-topline small { display: block; margin-top: 5px; }
.weather-live { display: inline-flex; align-items: center; gap: 6px; color: rgba(243,251,255,0.8); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.weather-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--weather-accent); box-shadow: 0 0 14px var(--weather-accent); animation: weatherLive 2s ease-in-out infinite; }
.weather-hero { align-items: center; min-height: 120px; }
.weather-current { position: relative; display: grid; gap: 3px; }
.weather-temperature { color: #fff; font-size: clamp(3.6rem,7vw,5.6rem); font-weight: 700; letter-spacing: 0.08em; line-height: 0.92; text-shadow: 0 0 32px rgba(var(--weather-accent-rgb),0.56); animation: weatherBreathe 5s ease-in-out infinite; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.weather-status { color: var(--weather-accent); font-size: clamp(1rem,1.7vw,1.28rem); font-weight: 800; letter-spacing: -0.035em; }
.weather-message { margin: 4px 0 0; }
.weather-visual { width: clamp(100px,14vw,138px); height: clamp(100px,14vw,138px); flex: 0 0 auto; color: var(--weather-accent); animation: weatherIconFloat 5s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(var(--weather-accent-rgb),0.36)); }
.weather-icon-svg { width: 100%; height: 100%; overflow: visible; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.icon-sun, .icon-cloud, .icon-rain, .icon-wind, .icon-moon { opacity: 0; transform-origin: center; transition: opacity 500ms ease; }
[data-icon="sun"] .icon-sun, [data-icon="sun-cloud"] .icon-sun, [data-icon="sun-cloud"] .icon-cloud, [data-icon="cloud"] .icon-cloud, [data-icon="rain"] .icon-cloud, [data-icon="rain"] .icon-rain, [data-icon="night"] .icon-moon, [data-icon="wind"] .icon-wind { opacity: 1; }
[data-icon="sun-cloud"] .icon-sun { transform: translate(-18px,-16px) scale(0.72); }
.icon-sun { animation: weatherSunSpin 22s linear infinite; }
.icon-rain { animation: weatherRainDrop 1.8s ease-in-out infinite; }
.weather-grid { position: relative; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.weather-grid div { display: grid; gap: 3px; padding: 10px; border: 0; border-radius: 14px; background: rgba(255,255,255,0.065); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); backdrop-filter: blur(14px); transition: transform var(--transition), background var(--transition); }
.weather-grid div:hover { transform: translateY(-2px); background: rgba(255,255,255,0.1); }
.weather-grid .metric-icon { color: var(--weather-accent); font-size: 1rem; line-height: 1; }
.weather-grid small, .weather-updated { color: rgba(231,241,255,0.58); font-size: 0.62rem; }
.weather-grid strong { color: #f9fcff; font-size: clamp(0.82rem,1.2vw,0.96rem); }
.weather-updated { position: relative; display: block; margin-top: 9px; }
.weather-value-updated { animation: weatherValueUpdate 480ms ease; }
.weather-unavailable .weather-temperature { color: rgba(255,255,255,0.52); }
.weather-unavailable .weather-live { color: var(--pink); }
.weather-stale .weather-live { color: var(--orange); }
@keyframes weatherDrift { to { transform: translate3d(-22px,18px,0) scale(1.12); } }
@keyframes weatherFloat { 50% { opacity: 0.32; transform: translate3d(10px,-15px,0); } }
@keyframes weatherLive { 50% { opacity: 0.42; transform: scale(0.72); } }
@keyframes weatherBreathe { 50% { text-shadow: 0 0 42px rgba(var(--weather-accent-rgb),0.58); } }
@keyframes weatherIconFloat { 50% { transform: translateY(-6px); } }
@keyframes weatherSunSpin { to { transform: rotate(360deg); } }
@keyframes weatherRainDrop { 50% { transform: translateY(6px); opacity: 0.48; } }
@keyframes weatherValueUpdate { 45% { color: var(--weather-accent); text-shadow: 0 0 14px rgba(var(--weather-accent-rgb),0.56); } }
.mini-event-card { display: grid; grid-template-columns: auto 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.mini-event-card:last-child { border-bottom: 0; }
.mini-event-card p { margin: 3px 0 0; color: var(--muted); font-size: 0.8rem; }
.mini-event-time { color: var(--muted); font-size: 0.78rem; }
.timeline { display: grid; gap: 9px; }
.timeline-item { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 0.82rem; }
.timeline-item div { display: flex; gap: 8px; }
.timeline-item strong { color: var(--text); }
.timeline-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.empty-state { color: var(--muted); font-size: 0.86rem; }
.side-column { display: grid; gap: var(--space-md); }
.history-column { display: grid; gap: 10px; min-width: 0; }
.history-toolbar { position: sticky; top: 8px; z-index: 20; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 8px; border: 1px solid var(--border); border-radius: 16px; background: rgba(32, 33, 39, 0.94); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
.history-toolbar .button { display: inline-flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; }
.button-compact { padding: 8px 9px; border-radius: 13px; font-size: clamp(0.7rem, 1vw, 0.8rem); line-height: 1.15; }
.history-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 15px; box-shadow: var(--shadow); }
.history-header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); align-items: center; }
.history-header h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.history-header p { margin: 4px 0 0; color: var(--muted); }
.history-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.select-wrapper { display: flex; align-items: center; gap: 10px; }
.select-wrapper select { border-radius: 12px; border: 1px solid var(--border); background: var(--surface-strong); color: var(--text); padding: 9px 11px; outline: none; min-width: 140px; }
.button { border: none; border-radius: 18px; padding: 10px 14px; font-weight: 700; transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition); }
.button:hover { transform: translateY(-1px); }
.button-soft { background: var(--surface-soft); color: var(--text); }
.button-primary { background: var(--purple); color: #fff; }
.export-button { background: linear-gradient(135deg, rgba(56,189,248,1), rgba(244,114,182,1)); color: #fff; }
.history-list { display: grid; gap: 9px; max-height: clamp(380px, 48vh, 760px); overflow-y: auto; padding-right: 4px; }
.entry-card { display: grid; gap: 9px; padding: 13px; border-radius: 15px; background: var(--surface-soft); border: 1px solid var(--border); transition: transform var(--transition), opacity var(--transition); }
.entry-card.new-entry { animation: slideIn 260ms ease both; }
@keyframes slideIn { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.entry-meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.entry-label { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 999px; color: var(--blue); font-size: 0.82rem; font-weight: 700; }
.entry-time { color: var(--muted); font-size: 0.8rem; }
.entry-title { font-size: clamp(0.88rem, 2vw, 1rem); font-weight: 700; margin: 0; }
.entry-foot { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.entry-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.entry-tag { padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,0.05); color: var(--text); font-size: 0.85rem; }
.entry-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.action-pill { border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,0.035); color: var(--text); padding: 7px 10px; font-size: 0.78rem; transition: background var(--transition), transform var(--transition); }
.action-pill:hover { background: rgba(56,189,248,0.12); transform: translateY(-1px); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(3, 6, 15, 0.76); display: none; align-items: center; justify-content: center; padding: 24px; z-index: 50; }
.modal-backdrop.open { display: flex; }
.modal-card { width: min(560px, 100%); border-radius: 24px; background: var(--surface); border: 1px solid var(--border); box-shadow: 0 40px 120px rgba(0,0,0,0.45); padding: 22px; animation: pop 180ms ease; }
@keyframes pop { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-header { display: flex; justify-content: space-between; gap: var(--space-sm); align-items: flex-start; margin-bottom: var(--space-lg); }
.icon-button { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); color: var(--text); cursor: pointer; }
.modal-body { display: grid; gap: var(--space-md); }
.modal-body label { display: block; color: var(--muted); font-size: 0.92rem; margin-bottom: 8px; }
.modal-body input, .modal-body textarea, .modal-body select { width: 100%; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-strong); color: var(--text); padding: 13px 15px; outline: none; }
.modal-body textarea { min-height: 100px; resize: vertical; }
.dual-inputs { display: grid; gap: var(--space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quantity-group { display: grid; gap: 14px; }
.quantity-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.quantity-buttons button { border: none; border-radius: 16px; background: rgba(255,255,255,0.06); color: var(--text); padding: 12px 10px; font-weight: 700; transition: transform var(--transition), background var(--transition); }
.quantity-buttons button:hover { transform: translateY(-1px); background: rgba(56,189,248,0.18); }
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); min-width: 260px; max-width: calc(100% - 32px); padding: 14px 18px; border-radius: 999px; background: rgba(15, 23, 42, 0.96); border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 20px 60px rgba(0,0,0,0.35); color: #fff; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; z-index: 100; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }

@media (max-width: 860px) {
  .dashboard-layout { grid-template-columns: 1fr; }
  .status-row { grid-template-columns: 1fr; }
  .glow-panel { grid-template-columns: 1fr; }
  .history-panel { padding: var(--space-md); }
}

@media (max-width: 720px) {
  .topbar { flex-direction: column; align-items: stretch; }
  .topbar-right { justify-content: stretch; }
  .topbar-right .button { flex: 1 1 48%; }
  .history-actions { align-items: stretch; }
  .dual-inputs { grid-template-columns: 1fr; }
}

@media (min-width: 1024px) {
  .dashboard-layout { grid-template-columns: 1.6fr 1fr; align-items: start; }
  .history-list { max-height: calc(100vh - 320px); }
}

body.fullscreen-mode .app-shell { padding: 12px; }
body.fullscreen-mode .topbar, body.fullscreen-mode .status-row, body.fullscreen-mode .summary-row, body.fullscreen-mode .action-panel, body.fullscreen-mode .history-panel { border-radius: 28px; }

.focus-exit { display: none; position: fixed; right: 20px; bottom: 20px; z-index: 120; }
body.focus-mode .topbar,
body.focus-mode .history-panel { display: none; }
body.focus-mode .focus-exit { display: inline-flex; }
body.focus-mode .dashboard-layout { grid-template-columns: 1fr; }
body.focus-mode .summary-row { margin-bottom: 0; }
body.focus-mode .action-panel { gap: var(--space-sm); }

@media (min-width: 1180px) {
  .dashboard-layout { gap: 32px; }
  .topbar { gap: 24px; }
  .app-shell { padding: 32px 36px 42px; }
  .weather-card { display: block; }
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode {
    --tablet-gap: 10px;
    --tablet-panel-padding: 11px;
    --stats-card-gap: 8px;
    --stats-card-padding: 10px;
    --stats-card-radius: 15px;
  }
  body.tablet-mode .tablet-layout {
    max-width: none;
    padding: 10px 12px 12px;
  }
  body.tablet-mode .sticky-top {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 7px 9px;
    margin-bottom: var(--tablet-gap);
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(24, 25, 31, 0.94);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
  }
  body.tablet-mode .brand-lockup { gap: 10px; }
  body.tablet-mode .brand-mark { width: 44px; height: 44px; border-radius: 14px; }
  body.tablet-mode .title-block h1 { margin-top: 2px; font-size: 1.35rem; }
  body.tablet-mode .brand-subtitle { display: none; }
  body.tablet-mode .eyebrow { font-size: 0.58rem; }
  body.tablet-mode .topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
  body.tablet-mode .top-meta { gap: 6px; margin-top: 0; font-size: 0.72rem; }
  body.tablet-mode .status-pill { padding: 5px 8px; font-size: 0.66rem; }
  body.tablet-mode .topbar-right { gap: 6px; }
  body.tablet-mode .topbar-right .button { padding: 7px 9px; border-radius: 12px; font-size: 0.68rem; }
  body.tablet-mode .tablet-dashboard {
    display: grid;
    grid-template-columns: minmax(210px, 0.8fr) minmax(300px, 1.15fr) minmax(250px, 0.95fr);
    grid-template-rows: minmax(138px, auto) minmax(0, 1fr);
    grid-template-areas:
      "actions stats weather"
      "actions center history";
    gap: var(--tablet-gap);
    height: calc(100dvh - 86px);
    min-height: 560px;
    align-items: stretch;
  }
  body.tablet-mode .summary-panel { display: contents; }
  body.tablet-mode .summary-row { grid-area: stats; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
  body.tablet-mode .summary-card { min-height: 0; gap: 3px; }
  body.tablet-mode .summary-label { margin-bottom: 2px; font-size: 0.68rem; }
  body.tablet-mode .summary-card strong { font-size: 1rem; }
  body.tablet-mode .summary-card small { margin-top: 1px; font-size: 0.62rem; }
  body.tablet-mode .panel-grid { grid-area: center; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: var(--tablet-gap); min-height: 0; }
  body.tablet-mode .card-panel,
  body.tablet-mode .history-panel,
  body.tablet-mode .weather-card { padding: var(--tablet-panel-padding); border-radius: 16px; }
  body.tablet-mode .section-header { gap: 7px; margin-bottom: 8px; }
  body.tablet-mode .section-header h2 { font-size: 0.96rem; }
  body.tablet-mode .section-header p { margin-top: 2px; font-size: 0.72rem; }
  body.tablet-mode .section-header .button { padding: 7px 9px; border-radius: 11px; font-size: 0.68rem; }
  body.tablet-mode .last-events,
  body.tablet-mode .timeline { min-height: 0; overflow-y: auto; }
  body.tablet-mode .card-panel { min-height: 0; overflow: hidden; }
  body.tablet-mode .mini-event-card { gap: 7px; padding: 7px 0; }
  body.tablet-mode .mini-event-card p,
  body.tablet-mode .timeline-item { font-size: 0.72rem; }
  body.tablet-mode .timeline { gap: 7px; }
  body.tablet-mode .action-panel { grid-area: actions; grid-template-rows: auto minmax(0, 1fr); gap: var(--tablet-gap); min-height: 0; }
  body.tablet-mode .action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 7px; min-height: 0; }
  body.tablet-mode .action-card { min-height: 0; aspect-ratio: auto; gap: 4px; padding: 7px 4px; border-radius: 14px; }
  body.tablet-mode .action-card .action-icon { font-size: 1.85rem; }
  body.tablet-mode .action-card strong { font-size: 0.72rem; }
  body.tablet-mode .action-card small { font-size: 0.58rem; }
  body.tablet-mode .weather-card {
    grid-area: weather;
    display: block;
    margin-top: 0;
    min-height: 0;
  }
  body.tablet-mode .weather-temperature { font-size: 3.2rem; letter-spacing: 0.08em; }
  body.tablet-mode .weather-hero { min-height: 78px; }
  body.tablet-mode .weather-visual { width: 76px; height: 76px; }
  body.tablet-mode .weather-message { margin-top: 2px; font-size: 0.58rem; }
  body.tablet-mode .weather-grid { gap: 5px; }
  body.tablet-mode .weather-grid div { gap: 2px; padding: 6px; border-radius: 10px; }
  body.tablet-mode .weather-grid small,
  body.tablet-mode .weather-updated { font-size: 0.58rem; }
  body.tablet-mode .weather-grid strong { font-size: 0.7rem; }
  body.tablet-mode .weather-updated { margin-top: 7px; }
  body.tablet-mode .history-column { grid-area: history; grid-template-rows: auto minmax(0, 1fr); gap: var(--tablet-gap); min-height: 0; }
  body.tablet-mode .history-toolbar { position: static; gap: 5px; padding: 5px; border-radius: 13px; }
  body.tablet-mode .history-toolbar .button { padding: 6px 5px; border-radius: 9px; font-size: 0.62rem; }
  body.tablet-mode #historyToggle { display: none; }
  body.tablet-mode .history-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.tablet-mode .history-panel { display: grid !important; grid-template-rows: auto minmax(0, 1fr); min-height: 0; overflow: hidden; }
  body.tablet-mode .history-header { gap: 7px; }
  body.tablet-mode .history-header h2 { font-size: 1rem; }
  body.tablet-mode .history-header p { margin-top: 2px; font-size: 0.68rem; }
  body.tablet-mode .select-wrapper { gap: 5px; font-size: 0.68rem; }
  body.tablet-mode .select-wrapper select { min-width: 110px; padding: 6px 7px; border-radius: 9px; }
  body.tablet-mode .history-list { gap: 6px; max-height: none; min-height: 0; padding-right: 2px; }
  body.tablet-mode .entry-card { gap: 6px; padding: 8px; border-radius: 11px; }
  body.tablet-mode .entry-label { gap: 5px; padding: 5px 7px; font-size: 0.68rem; }
  body.tablet-mode .entry-time,
  body.tablet-mode .action-pill { font-size: 0.66rem; }
  body.tablet-mode .entry-title { font-size: 0.78rem; }
  body.tablet-mode .action-pill { padding: 5px 7px; }
}

@media (min-width: 1367px) {
  body.desktop-tablet-mode {
    --tablet-gap: 12px;
    --tablet-panel-padding: 13px;
    --stats-card-gap: 10px;
    --stats-card-padding: 12px;
  }
  body.desktop-tablet-mode .tablet-layout { padding: 12px 14px 14px; }
  body.desktop-tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(280px, 0.88fr) minmax(520px, 1.35fr) minmax(340px, 1.02fr);
    grid-template-rows: minmax(154px, auto) minmax(0, 1fr);
    height: calc(100dvh - 90px);
  }
  body.desktop-tablet-mode .summary-card strong { font-size: 1.12rem; }
  body.desktop-tablet-mode .action-card .action-icon { font-size: 2.15rem; }
  body.desktop-tablet-mode .action-card strong { font-size: 0.78rem; }
  body.desktop-tablet-mode .history-list { gap: 8px; }
  body.desktop-tablet-mode .entry-card { padding: 10px; }
}

@media (min-width: 1920px) {
  body.wide-dashboard-mode {
    --tablet-gap: 14px;
    --tablet-panel-padding: 15px;
    --stats-card-gap: 12px;
    --stats-card-padding: 14px;
  }
  body.wide-dashboard-mode .tablet-layout { padding: 14px 16px 16px; }
  body.wide-dashboard-mode .tablet-dashboard {
    grid-template-columns: minmax(360px, 0.95fr) minmax(720px, 1.55fr) minmax(420px, 1.08fr);
    grid-template-rows: minmax(174px, auto) minmax(0, 1fr);
    height: calc(100dvh - 96px);
  }
  body.wide-dashboard-mode .topbar-right .button { font-size: 0.76rem; }
  body.wide-dashboard-mode .summary-label { font-size: 0.76rem; }
  body.wide-dashboard-mode .summary-card strong { font-size: 1.3rem; }
  body.wide-dashboard-mode .summary-card small { font-size: 0.7rem; }
  body.wide-dashboard-mode .section-header h2 { font-size: 1.08rem; }
  body.wide-dashboard-mode .action-card .action-icon { font-size: 2.45rem; }
  body.wide-dashboard-mode .action-card strong { font-size: 0.86rem; }
  body.wide-dashboard-mode .action-card small { font-size: 0.66rem; }
  body.wide-dashboard-mode .mini-event-card p,
  body.wide-dashboard-mode .timeline-item { font-size: 0.8rem; }
  body.wide-dashboard-mode .history-header h2 { font-size: 1.12rem; }
  body.wide-dashboard-mode .entry-title { font-size: 0.86rem; }
}

@media (max-width: 560px) {
  .app-shell { padding: 13px; }
  .topbar { margin-bottom: 14px; }
  .brand-mark { width: 52px; height: 52px; border-radius: 17px; }
  .top-meta { gap: 7px; }
  .status-pill { padding: 6px 9px; font-size: 0.72rem; }
  .weather-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weather-card { padding: 15px; border-radius: 20px; }
  .weather-temperature { font-size: 3.75rem; }
  .weather-status { font-size: 1rem; }
  .weather-visual { width: 92px; height: 92px; }
}

.dashboard-only { display: none; }

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode {
    --control-gap: 9px;
    --control-radius: 16px;
    background:
      radial-gradient(circle at 12% -10%, rgba(113, 217, 197, 0.08), transparent 28%),
      radial-gradient(circle at 92% 18%, rgba(147, 112, 255, 0.08), transparent 24%),
      #111218;
  }
  body.tablet-mode .dashboard-only { display: inline-flex; }
  body.tablet-mode .tablet-layout { padding: 9px 10px 10px; }
  body.tablet-mode .sticky-top {
    gap: 8px;
    padding: 7px 9px;
    margin-bottom: var(--control-gap);
    border-color: rgba(255,255,255,0.075);
    background: linear-gradient(135deg, rgba(31, 34, 42, 0.9), rgba(22, 24, 31, 0.88));
  }
  body.tablet-mode .topbar-left { gap: 10px; }
  body.tablet-mode .top-meta { gap: 5px; }
  body.tablet-mode .top-meta > span:not(.status-pill) { color: var(--muted); font-size: 0.68rem; }
  body.tablet-mode .status-pill {
    gap: 5px;
    padding: 4px 7px;
    border-color: rgba(255,255,255,0.065);
    border-radius: 999px;
    background: rgba(255,255,255,0.035);
    box-shadow: none;
    color: #dfe4ed;
    font-size: 0.6rem;
    letter-spacing: 0.045em;
    text-transform: uppercase;
  }
  body.tablet-mode .live-status,
  body.tablet-mode .server-status { color: var(--blue); }
  .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 10px rgba(113,217,197,0.8); animation: liveBlink 2s ease-in-out infinite; }
  .live-dot.online { background: var(--green); }
  @keyframes liveBlink { 50% { opacity: 0.38; transform: scale(0.78); } }
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(190px, 0.86fr) minmax(285px, 1.36fr) minmax(225px, 0.96fr);
    grid-template-rows: minmax(96px, 0.7fr) minmax(94px, 0.82fr) minmax(102px, 0.88fr) minmax(112px, 1fr);
    grid-template-areas:
      "actions stats history"
      "actions feed history"
      "weather smart history"
      "weather timeline history";
    gap: var(--control-gap);
    height: calc(100dvh - 78px);
    min-height: 548px;
  }
  body.tablet-mode .summary-row { grid-area: stats; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 1fr; gap: var(--control-gap); }
  body.tablet-mode .summary-card,
  body.tablet-mode .card-panel,
  body.tablet-mode .weather-card,
  body.tablet-mode .history-panel,
  body.tablet-mode .history-toolbar {
    border: 1px solid rgba(255,255,255,0.065);
    background: linear-gradient(145deg, rgba(37, 39, 48, 0.9), rgba(27, 29, 36, 0.88));
    box-shadow: 0 10px 26px rgba(0,0,0,0.16), inset 0 1px 0 rgba(255,255,255,0.04);
    backdrop-filter: blur(18px);
  }
  body.tablet-mode .summary-card { padding: 10px; border-radius: 14px; }
  body.tablet-mode .summary-card::before { height: 2px; opacity: 0.52; }
  body.tablet-mode .summary-card strong { font-size: clamp(0.98rem, 1.45vw, 1.22rem); letter-spacing: -0.04em; }
  body.tablet-mode .summary-card small { font-size: 0.58rem; }
  body.tablet-mode .panel-grid { display: contents; }
  body.tablet-mode .last-events-card { grid-area: feed; }
  body.tablet-mode .timeline-card { grid-area: timeline; }
  body.tablet-mode .smart-summary-card { grid-area: smart; }
  body.tablet-mode .card-panel { padding: 10px; border-radius: var(--control-radius); }
  body.tablet-mode .section-header { margin-bottom: 6px; }
  body.tablet-mode .section-header h2 { font-size: 0.86rem; letter-spacing: -0.025em; }
  body.tablet-mode .section-header p { font-size: 0.62rem; }
  body.tablet-mode .insight-live { display: inline-flex; gap: 5px; align-items: center; color: var(--blue); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
  body.tablet-mode .smart-summary-text { margin: 0 0 7px; color: #d9dce5; font-size: 0.7rem; line-height: 1.35; }
  body.tablet-mode .mini-analytics { display: grid; gap: 5px; }
  body.tablet-mode .analytics-row { display: grid; grid-template-columns: 64px 1fr 28px; gap: 6px; align-items: center; color: var(--muted); font-size: 0.58rem; }
  body.tablet-mode .analytics-row > div { height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,0.055); }
  body.tablet-mode .analytics-row i { display: block; height: 100%; border-radius: inherit; box-shadow: 0 0 9px currentColor; transition: width 500ms ease; }
  body.tablet-mode .analytics-row strong { color: #d9dce5; text-align: right; font-size: 0.58rem; }
  body.tablet-mode .action-panel { grid-area: actions; grid-template-rows: auto minmax(0, 1fr); }
  body.tablet-mode .action-grid { gap: 6px; }
  body.tablet-mode .action-card {
    position: relative;
    border-color: rgba(255,255,255,0.055);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(255,255,255,0.055), rgba(255,255,255,0.022));
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
  }
  body.tablet-mode .action-card::before { content: ''; position: absolute; inset: 45%; border-radius: 50%; background: rgba(113,217,197,0.2); opacity: 0; transition: inset 240ms ease, opacity 240ms ease; }
  body.tablet-mode .action-card:hover { transform: translateY(-2px); border-color: rgba(113,217,197,0.28); box-shadow: 0 10px 18px rgba(0,0,0,0.18), 0 0 16px rgba(113,217,197,0.06); }
  body.tablet-mode .action-card:active::before { inset: -25%; opacity: 0.52; }
  body.tablet-mode .action-card .action-icon { z-index: 1; font-size: 1.62rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2)); }
  body.tablet-mode .action-card strong { z-index: 1; font-size: 0.66rem; }
  body.tablet-mode .action-card small { z-index: 1; color: #777c88; font-size: 0.52rem; }
  body.tablet-mode .weather-card { grid-area: weather; padding: 10px; border-radius: var(--control-radius); }
  body.tablet-mode .weather-grid div { background: rgba(255,255,255,0.07); }
  body.tablet-mode .history-column { grid-area: history; }
  body.tablet-mode .history-toolbar { padding: 5px; border-radius: 13px; }
  body.tablet-mode .history-panel { padding: 9px; border-radius: var(--control-radius); }
  body.tablet-mode .history-header p { display: none; }
  body.tablet-mode .history-list { gap: 5px; }
  body.tablet-mode .entry-card { gap: 4px; padding: 7px; border-color: rgba(255,255,255,0.045); background: rgba(255,255,255,0.025); transition: transform var(--transition), background var(--transition), border-color var(--transition); }
  body.tablet-mode .entry-card:hover { transform: translateX(-2px); border-color: rgba(113,217,197,0.18); background: rgba(255,255,255,0.045); }
  body.tablet-mode .entry-label { gap: 5px; padding: 4px 6px; }
  body.tablet-mode .entry-label i { display: inline-grid; min-width: 12px; place-items: center; color: inherit; font-style: normal; }
  body.tablet-mode .entry-title { margin: 0; color: #d9dce5; font-size: 0.72rem; }
  body.tablet-mode .entry-foot { justify-content: end; }
  body.tablet-mode .entry-actions,
  body.tablet-mode .entry-foot { gap: 5px; }
  body.tablet-mode .action-pill { padding: 3px 6px; border-color: rgba(255,255,255,0.055); background: transparent; color: var(--muted); font-size: 0.58rem; }
  body.tablet-mode .timeline {
    display: flex;
    gap: 0;
    align-items: start;
    overflow-x: auto;
    padding-top: 8px;
  }
  body.tablet-mode .timeline-item { position: relative; display: grid; min-width: 82px; justify-items: center; gap: 6px; text-align: center; }
  body.tablet-mode .timeline-item::after { content: ''; position: absolute; top: 11px; left: calc(50% + 10px); width: calc(100% - 20px); height: 1px; background: linear-gradient(90deg, currentColor, rgba(255,255,255,0.12)); opacity: 0.5; }
  body.tablet-mode .timeline-item:last-child::after { display: none; }
  body.tablet-mode .timeline-dot { z-index: 1; display: grid; width: 24px; height: 24px; place-items: center; border: 1px solid currentColor; background: #20232b !important; box-shadow: 0 0 14px currentColor; }
  body.tablet-mode .timeline-dot b { color: currentColor; font-size: 0.66rem; font-weight: 800; }
  body.tablet-mode .timeline-item div { display: grid; gap: 2px; }
  body.tablet-mode .timeline-item strong { font-size: 0.62rem; }
  body.tablet-mode .timeline-item span { font-size: 0.58rem; }
  body.focus-mode.tablet-mode .tablet-dashboard { grid-template-columns: minmax(220px, 0.8fr) minmax(420px, 1.5fr); grid-template-areas: "actions stats" "actions feed" "weather smart" "weather timeline"; }
}

@media (min-width: 1367px) {
  body.desktop-tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(300px, 0.9fr) minmax(540px, 1.48fr) minmax(330px, 0.98fr);
    gap: 11px;
    height: calc(100dvh - 82px);
  }
  body.desktop-tablet-mode .action-card .action-icon { font-size: 1.88rem; }
  body.desktop-tablet-mode .action-card strong { font-size: 0.72rem; }
}

@media (min-width: 1920px) {
  body.wide-dashboard-mode .tablet-dashboard { grid-template-columns: minmax(360px, 0.92fr) minmax(760px, 1.6fr) minmax(420px, 1fr); }
  body.wide-dashboard-mode .action-card .action-icon { font-size: 2.2rem; }
  body.wide-dashboard-mode .entry-title { font-size: 0.8rem; }
}

/* Adaptive UI scale layer */
:root {
  --ui-scale: 1;
  --font-xs: clamp(0.58rem, calc(0.66rem * var(--ui-scale)), 0.74rem);
  --font-sm: clamp(0.68rem, calc(0.78rem * var(--ui-scale)), 0.88rem);
  --font-md: clamp(0.78rem, calc(0.92rem * var(--ui-scale)), 1rem);
  --font-lg: clamp(0.94rem, calc(1.14rem * var(--ui-scale)), 1.28rem);
  --font-xl: clamp(1.12rem, calc(1.48rem * var(--ui-scale)), 1.72rem);
  --space-xs: clamp(5px, calc(8px * var(--ui-scale)), 10px);
  --space-sm: clamp(7px, calc(11px * var(--ui-scale)), 14px);
  --space-md: clamp(9px, calc(15px * var(--ui-scale)), 18px);
  --space-lg: clamp(12px, calc(21px * var(--ui-scale)), 26px);
  --control-radius: clamp(11px, calc(16px * var(--ui-scale)), 18px);
  --panel-padding: clamp(9px, calc(14px * var(--ui-scale)), 17px);
  --dashboard-gap: clamp(7px, calc(11px * var(--ui-scale)), 14px);
  --shadow: 0 calc(12px * var(--ui-scale)) calc(30px * var(--ui-scale)) rgba(0,0,0,0.2);
}

body { font-size: var(--font-md); }
.app-shell { container-type: inline-size; width: min(100%, 2360px); max-width: 2360px; padding: var(--space-lg); }
.dashboard-grid { gap: var(--dashboard-gap); }
.ui-scale-control { display: inline-flex; align-items: center; gap: var(--space-xs); padding: clamp(5px, calc(7px * var(--ui-scale)), 8px); border: 1px solid var(--border); border-radius: var(--control-radius); background: var(--surface-soft); color: var(--muted); font-size: var(--font-xs); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.ui-scale-control select { max-width: 72px; border: 0; background: transparent; color: var(--text); font-size: inherit; font-weight: 800; outline: none; }
.ui-scale-control option { background: var(--surface-strong); }
.button { padding: clamp(7px, calc(10px * var(--ui-scale)), 12px) clamp(9px, calc(14px * var(--ui-scale)), 16px); border-radius: var(--control-radius); font-size: var(--font-sm); }
.brand-mark { width: clamp(42px, calc(58px * var(--ui-scale)), 64px); height: clamp(42px, calc(58px * var(--ui-scale)), 64px); border-radius: var(--control-radius); }
.brand-mark span { font-size: var(--font-lg); }
.title-block h1 { font-size: clamp(1.18rem, calc(2rem * var(--ui-scale)), 2.3rem); }
.brand-subtitle, .section-header p, .history-header p { font-size: var(--font-sm); }
.eyebrow, .status-pill { font-size: var(--font-xs); }
.topbar { gap: var(--space-md); margin-bottom: var(--space-md); }
.topbar-right, .top-meta { gap: var(--space-xs); }
.summary-row { gap: var(--dashboard-gap); }
.summary-card, .card-panel, .history-panel { padding: var(--panel-padding); border-radius: var(--control-radius); }
.summary-card { min-height: clamp(68px, calc(88px * var(--ui-scale)), 94px); }
.summary-label, .summary-card small { font-size: var(--font-xs); }
.summary-card strong { font-size: var(--font-lg); }
.section-header h2 { font-size: var(--font-lg); }
.action-panel { container-type: inline-size; gap: var(--dashboard-gap); }
.action-grid { gap: var(--space-xs); }
.action-card { min-height: clamp(94px, calc(142px * var(--ui-scale)), 156px); gap: var(--space-xs); padding: var(--space-sm); border-radius: var(--control-radius); }
.action-card .action-icon { font-size: clamp(2rem, calc(3.7rem * var(--ui-scale)), 4.1rem); }
.action-card strong { font-size: var(--font-md); }
.action-card small, .mini-event-time, .entry-time { font-size: var(--font-xs); }
.history-column { gap: var(--space-xs); min-height: 0; }
.history-toolbar { gap: var(--space-xs); padding: var(--space-xs); border-radius: var(--control-radius); }
.history-panel { min-height: 0; }
.history-list { gap: var(--space-xs); max-height: clamp(320px, calc(100dvh - 245px), 920px); }
.entry-card { gap: var(--space-xs); padding: var(--space-sm); border-radius: clamp(10px, calc(14px * var(--ui-scale)), 16px); }
.entry-label, .entry-title, .action-pill { font-size: var(--font-sm); }
.modal-card { width: min(calc(100vw - (var(--space-lg) * 2)), calc(540px * var(--ui-scale))); max-height: min(92dvh, 760px); overflow-y: auto; padding: var(--space-lg); border-radius: clamp(16px, calc(24px * var(--ui-scale)), 26px); }
.modal-body { gap: var(--space-md); }
.modal-body input, .modal-body textarea, .modal-body select { padding: var(--space-sm) var(--space-md); border-radius: var(--control-radius); }
.weather-card { padding: var(--panel-padding); border-radius: clamp(16px, calc(22px * var(--ui-scale)), 24px); }
.weather-hero { min-height: clamp(76px, calc(118px * var(--ui-scale)), 126px); }
.weather-temperature { font-size: clamp(3rem, calc(5.2rem * var(--ui-scale)), 5.6rem); }
.weather-status { font-size: var(--font-lg); }
.weather-visual { width: clamp(76px, calc(126px * var(--ui-scale)), 138px); height: clamp(76px, calc(126px * var(--ui-scale)), 138px); }
.weather-grid { gap: var(--space-xs); }
.weather-grid div { padding: var(--space-sm); border-radius: clamp(9px, calc(13px * var(--ui-scale)), 14px); }
.timeline { min-width: 0; }

@container (min-width: 520px) {
  .action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 760px) {
  .action-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
  .app-shell { padding: var(--space-sm); }
  .topbar-right .button, .ui-scale-control { flex: 1 1 46%; justify-content: center; }
  .title-block h1 { font-size: 1.2rem; }
  .brand-subtitle, #currentDate, #tabletModeBadge { display: none; }
  .summary-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .weather-temperature { font-size: 3.2rem; }
  .weather-visual { width: 78px; height: 78px; }
}

@media (max-width: 767px) {
  body.is-mobile .app-shell { padding: var(--space-sm); }
  body.is-mobile .dashboard-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-md); }
  body.is-mobile .summary-panel { display: grid; gap: var(--space-sm); }
  body.is-mobile .weather-card { display: block; margin-top: 0; }
  body.is-mobile .action-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.is-mobile .action-card { min-height: clamp(108px, 31vw, 142px); }
  body.is-mobile .history-list { max-height: min(58dvh, 620px); }
  body.is-mobile .timeline { display: flex; gap: 0; overflow-x: auto; padding-top: var(--space-xs); }
  body.is-mobile .timeline-item { min-width: 92px; }
  body.is-mobile .dashboard-only, body.is-mobile .day-status { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  body.is-tablet .app-shell { padding: var(--space-md); }
  body.is-tablet .dashboard-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-md); height: auto; }
  body.is-tablet .summary-panel { display: grid; gap: var(--space-sm); }
  body.is-tablet .summary-row { grid-template-columns: repeat(4,minmax(0,1fr)); }
  body.is-tablet .weather-card { display: block; margin-top: 0; }
  body.is-tablet .action-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.is-tablet .action-card { min-height: clamp(104px, 15vw, 132px); }
  body.is-tablet .history-list { max-height: min(48dvh, 720px); }
}

@media (min-width: 1024px) and (max-width: 1365px) {
  body.is-tablet .tablet-dashboard { grid-template-columns: minmax(182px,.86fr) minmax(275px,1.36fr) minmax(220px,.96fr); }
  body.is-tablet .action-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (min-width: 1366px) and (max-width: 1919px) {
  body.is-desktop .app-shell { max-width: 1760px; }
  body.is-desktop .tablet-dashboard { grid-template-columns: minmax(270px,.88fr) minmax(500px,1.48fr) minmax(320px,.98fr); }
  body.is-desktop .action-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (min-width: 1920px) and (max-width: 2559px) {
  body.is-desktop .app-shell { max-width: 2140px; }
  body.is-desktop .tablet-dashboard { grid-template-columns: minmax(350px,.94fr) minmax(700px,1.58fr) minmax(410px,1fr); }
  body.is-desktop .action-grid { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); }
}

@media (min-width: 2560px) {
  body.is-ultrawide .app-shell { max-width: 2360px; }
  body.is-ultrawide .tablet-dashboard { grid-template-columns: minmax(390px,.94fr) minmax(820px,1.62fr) minmax(470px,1fr); }
  body.is-ultrawide .action-grid { grid-template-columns: repeat(4,minmax(0,1fr)); grid-template-rows: repeat(3,minmax(0,1fr)); }
}

@media (max-height: 820px) and (min-width: 1024px) {
  .app-shell { padding: var(--space-xs); }
  .sticky-top { margin-bottom: var(--space-xs) !important; }
  body.tablet-mode .tablet-dashboard { height: calc(100dvh - 68px); min-height: 500px; }
  body.tablet-mode .weather-hero { min-height: 68px; }
  body.tablet-mode .weather-visual { width: 64px; height: 64px; }
  body.tablet-mode .weather-temperature { font-size: 2.35rem; }
  body.tablet-mode .action-card .action-icon { font-size: 1.45rem; }
}

/* Premium icon safety and full-width timeline */
body::before {
  content: '';
  position: fixed;
  z-index: -1;
  inset: -18%;
  pointer-events: none;
  background:
    radial-gradient(circle at 14% 18%, rgba(113,217,197,0.055), transparent 24%),
    radial-gradient(circle at 82% 74%, rgba(147,112,255,0.055), transparent 27%);
  animation: dashboardAmbient 20s ease-in-out infinite alternate;
}

.action-card {
  min-width: 0;
  overflow: hidden;
}
.action-icon-wrapper {
  z-index: 1;
  display: flex;
  width: clamp(38px, calc(68px * var(--ui-scale)), 76px);
  height: clamp(38px, calc(68px * var(--ui-scale)), 76px);
  max-width: 68%;
  max-height: 48%;
  flex: 0 1 auto;
  align-items: center;
  justify-content: center;
  overflow: visible;
  aspect-ratio: 1;
  padding: clamp(2px, calc(5px * var(--ui-scale)), 6px);
}
.action-card .action-icon {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: visible;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Android Emoji", sans-serif;
  font-size: clamp(1.7rem, calc(3.3rem * var(--ui-scale)), 3.65rem);
  font-style: normal;
  font-variant-emoji: emoji;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  transform: scale(var(--icon-render-scale, 0.92));
  transform-origin: center;
}
.action-card:hover .action-icon { transform: scale(var(--icon-hover-scale, 1)); }
.action-card:active .action-icon { transform: scale(var(--icon-active-scale, 0.96)); }

.timeline-wide-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(113,217,197,0.13);
  background:
    linear-gradient(145deg, rgba(38,42,53,0.96), rgba(24,27,37,0.94));
  box-shadow: 0 16px 36px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.055);
}
.timeline-wide-card::before {
  content: '';
  position: absolute;
  z-index: -1;
  width: 42%;
  height: 170%;
  top: -54%;
  right: 7%;
  border-radius: 50%;
  background: rgba(113,217,197,0.075);
  filter: blur(54px);
}
.timeline-header { align-items: center; }
.timeline-wide {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 0;
  width: 100%;
  min-height: 78px;
  overflow: visible;
  padding: var(--space-xs) 0 0;
}
.timeline-wide .timeline-item {
  position: relative;
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 7px;
  color: var(--timeline-color);
  text-align: center;
  animation: timelineReveal 420ms ease both;
}
.timeline-wide .timeline-item::after {
  content: '';
  position: absolute;
  top: 17px;
  left: calc(50% + 17px);
  width: calc(100% - 34px);
  height: 1px;
  background: linear-gradient(90deg, var(--timeline-color), rgba(255,255,255,0.16));
  opacity: 0.64;
}
.timeline-wide .timeline-item:last-child::after { display: none; }
.timeline-wide .timeline-dot {
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--timeline-color) 72%, white 18%);
  border-radius: 50%;
  background: #20232c !important;
  color: var(--timeline-color);
  box-shadow: 0 0 16px color-mix(in srgb, var(--timeline-color) 45%, transparent);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.timeline-wide .timeline-dot b {
  color: inherit;
  font-size: 0.76rem;
  font-weight: 900;
}
.timeline-wide .timeline-copy { display: grid; gap: 2px; }
.timeline-wide .timeline-copy strong { color: #f7fbff; font-size: var(--font-sm); letter-spacing: 0.02em; }
.timeline-wide .timeline-copy span { color: rgba(226,232,240,0.68); font-size: var(--font-xs); font-weight: 700; }
.timeline-wide .timeline-item:hover .timeline-dot {
  transform: translateY(-3px) scale(1.08);
  box-shadow: 0 0 24px color-mix(in srgb, var(--timeline-color) 58%, transparent);
}
.timeline-wide .timeline-latest .timeline-dot { animation: timelineLivePulse 2.4s ease-in-out infinite; }
.timeline-wide .timeline-latest .timeline-copy span { color: var(--timeline-color); }

body.tablet-mode .entry-card {
  gap: 3px;
  padding: clamp(5px, calc(7px * var(--ui-scale)), 8px);
}
body.tablet-mode .entry-meta { gap: 5px; }
body.tablet-mode .entry-foot { min-height: 0; }

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .tablet-dashboard {
    grid-template-rows: auto minmax(88px,.72fr) minmax(82px,.8fr) minmax(92px,.86fr) minmax(104px,1fr);
    grid-template-areas:
      "timeline timeline timeline"
      "actions stats history"
      "actions feed history"
      "weather smart history"
      "weather smart history";
  }
  body.tablet-mode .timeline-wide-card {
    grid-area: timeline;
    grid-column: 1 / -1;
    padding: clamp(9px, calc(12px * var(--ui-scale)), 14px);
  }
  body.tablet-mode .timeline-card { grid-area: timeline; }
  body.tablet-mode .timeline-wide {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    min-height: 70px;
    overflow: visible;
    padding-top: 3px;
  }
  body.tablet-mode .timeline-wide .timeline-item { min-width: 0; }
  body.tablet-mode .timeline-wide .timeline-dot { width: 30px; height: 30px; }
  body.tablet-mode .timeline-wide .timeline-item::after {
    top: 15px;
    left: calc(50% + 15px);
    width: calc(100% - 30px);
  }
  body.tablet-mode .timeline-wide .timeline-copy strong { font-size: 0.68rem; }
  body.tablet-mode .timeline-wide .timeline-copy span { font-size: 0.58rem; }
  body.tablet-mode .action-icon-wrapper {
    width: clamp(30px, calc(48px * var(--ui-scale)), 52px);
    height: clamp(30px, calc(48px * var(--ui-scale)), 52px);
    max-height: 52%;
    padding: 3px;
  }
  body.tablet-mode .action-card .action-icon {
    font-size: clamp(1.35rem, calc(2.35rem * var(--ui-scale)), 2.55rem);
    line-height: 1;
  }
  body.focus-mode.tablet-mode .tablet-dashboard {
    grid-template-areas:
      "timeline timeline"
      "actions stats"
      "actions feed"
      "weather smart"
      "weather smart";
  }
}

/* Stable left column: weather and daily stats stay together on tablet/PC. */
.left-column-panel {
  display: contents;
}

@media (min-width: 1024px) {
  body.tablet-mode .dashboard-grid,
  body.tablet-mode .tablet-dashboard {
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "header header header"
      "timeline timeline timeline"
      "left journal right" !important;
  }

  body.tablet-mode .left-column-panel {
    grid-area: left;
    display: flex;
    flex-direction: column;
    align-self: start;
    gap: 10px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.tablet-mode .left-column-panel .weather-panel,
  body.tablet-mode .left-column-panel .daily-stats-column-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* On phones the timeline remains a horizontal swipe strip inside the single-column page. */
@media (max-width: 767px) {
  body.is-mobile .timeline,
  body.is-mobile .timeline-wide {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  body.is-mobile .timeline-item,
  body.is-mobile .timeline-wide .timeline-item {
    flex: 0 0 96px !important;
    min-width: 96px !important;
  }
}

/* Final tablet/PC override: keep daily stats directly below weather. */
@media (min-width: 768px) {
  body.tablet-mode .left-column-panel {
    display: flex !important;
    flex-direction: column !important;
    align-self: start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  body.tablet-mode .left-column-panel .weather-panel,
  body.tablet-mode .left-column-panel .daily-stats-column-panel {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    align-self: stretch !important;
  }
}

@media (min-width: 1024px) {
  body.tablet-mode .dashboard-grid,
  body.tablet-mode .tablet-dashboard {
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "header header header"
      "timeline timeline timeline"
      "left journal right" !important;
  }

  body.tablet-mode .left-column-panel {
    grid-area: left !important;
  }
}

/* Phone layout: every visible block stays in one vertical column. */
@media (max-width: 767px) {
  html,
  body,
  .app-shell,
  .dashboard-layout,
  .dashboard-grid,
  .timeline-panel,
  .weather-panel,
  .daily-stats-panel,
  .right-column-panel,
  .journal-panel,
  .actions-panel,
  .rhythm-panel,
  .journal-feed-panel {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  body.is-mobile .dashboard-layout,
  body.is-mobile .dashboard-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto !important;
    grid-template-areas:
      "header"
      "timeline"
      "weather"
      "daily-stats"
      "right"
      "journal" !important;
    overflow: hidden !important;
  }

  body.is-mobile .right-column-panel .actions-grid,
  body.is-mobile .actions-grid,
  body.is-mobile .action-grid,
  body.is-mobile .daily-stats-grid,
  body.is-mobile .summary-row,
  body.is-mobile .today-highlights,
  body.is-mobile .history-actions,
  body.is-mobile .topbar-right {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body.is-mobile .action-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 88px !important;
    aspect-ratio: auto !important;
  }

  body.is-mobile .timeline,
  body.is-mobile .timeline-wide {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow-x: hidden !important;
  }

  body.is-mobile .timeline-item {
    min-width: 0 !important;
  }

  body.is-mobile .history-actions > *,
  body.is-mobile .topbar-right > *,
  body.is-mobile .select-wrapper,
  body.is-mobile .select-wrapper select {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Exact dashboard contract: header, timeline, three columns, analytics. */
.dashboard-grid {
  display: grid !important;
  grid-template-columns: 360px minmax(680px,1fr) 360px !important;
  grid-template-rows: auto auto minmax(0,1fr) auto !important;
  grid-template-areas:
    "header header header"
    "timeline timeline timeline"
    "weather journal actions"
    "weather journal analytics" !important;
  gap: 14px !important;
  align-items: start !important;
  width: 100% !important;
  min-height: 100dvh !important;
  height: auto !important;
  overflow: visible !important;
}
.app-header { grid-area: header; }
.timeline-panel { grid-area: timeline; }
.weather-panel { grid-area: weather; }
.journal-panel { grid-area: journal; min-height: 0; }
.actions-panel { grid-area: actions; }
.analytics-panel,
.rhythm-panel { grid-area: analytics; }

.app-header,
.timeline-panel,
.weather-panel,
.journal-panel,
.actions-panel,
.analytics-panel,
.rhythm-panel,
.rhythm-panel .rhythm-strip-card {
  position: static !important;
  inset: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}
.app-header {
  width: 100%;
  margin-bottom: 0 !important;
}
.weather-panel,
.actions-panel,
.journal-panel,
.rhythm-panel {
  min-width: 0;
  align-self: start;
}
.journal-panel {
  display: grid;
  grid-template-rows: minmax(0,1fr);
  overflow: hidden;
}
.journal-panel .history-toolbar { display: none; }
.journal-panel .journal-feed-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr);
  min-height: 0;
  overflow: hidden;
}
.journal-panel .history-list {
  max-height: clamp(420px,56vh,760px);
  min-height: 0;
  overflow-y: auto;
}
.weather-panel {
  width: 100%;
  overflow: hidden;
}
.weather-panel .weather-scroll,
.weather-panel .weather-days-strip {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.actions-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit,minmax(105px,1fr)) !important;
  grid-auto-rows: minmax(92px,auto) !important;
  gap: 10px !important;
  width: 100%;
  min-width: 0;
}
.actions-panel .action-tile,
.actions-panel .action-tile:hover,
.actions-panel .action-tile:active {
  min-width: 0;
  min-height: 92px !important;
  margin: 0 !important;
  overflow: hidden;
  transform: none !important;
}
.actions-panel .action-tile .action-icon,
.actions-panel .action-tile:hover .action-icon,
.actions-panel .action-tile:active .action-icon {
  transform: none !important;
}
.rhythm-panel {
  display: grid !important;
  grid-template-columns: minmax(0,1fr);
  width: 100%;
  min-height: 0;
  overflow: visible;
}
.rhythm-panel .panel-grid { display: grid; }
.rhythm-panel .rhythm-strip-card {
  width: 100%;
  min-height: 0;
}

@media (max-width: 1199px) {
  .dashboard-grid {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: auto auto auto auto auto auto !important;
    grid-template-areas:
      "header"
      "timeline"
      "weather"
      "actions"
      "journal"
      "analytics" !important;
  }
  .journal-panel .history-list { max-height: min(54vh,720px); }
}

/* Clear visual hierarchy inside the right column: daily stats above analytics. */
.rhythm-panel {
  gap: 16px;
}
.daily-stats-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  background:
    radial-gradient(circle at 12% 0%,rgba(113,217,197,.12),transparent 44%),
    linear-gradient(145deg,rgba(39,46,57,.96),rgba(27,32,42,.96));
  box-shadow: 0 14px 30px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.08);
}
.daily-stats-heading {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.daily-stats-heading h2 {
  margin: 2px 0 0;
  color: #fbfdff;
  font-size: .94rem;
  letter-spacing: -.035em;
}
.daily-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 8px !important;
  margin: 0 !important;
}
.daily-stat-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  min-width: 0;
  min-height: 76px !important;
  padding: 10px 7px !important;
  border: 1px solid rgba(255,255,255,.085);
  border-radius: 12px !important;
  background: linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.045));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08),0 6px 14px rgba(0,0,0,.1);
  text-align: center;
}
.daily-stat-label {
  color: rgba(232,243,250,.7);
  font-size: .6rem;
  font-weight: 820;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.daily-stat-value {
  color: #fff;
  font-size: clamp(.94rem,1.12vw,1.28rem) !important;
  font-weight: 880;
  line-height: 1;
  letter-spacing: -.04em;
}
.daily-stat-card small {
  color: rgba(222,234,244,.52);
  font-size: .55rem;
}
.rhythm-panel .panel-grid {
  margin-top: 2px;
}
.rhythm-panel .rhythm-strip-card {
  padding: 13px !important;
  border: 1px solid rgba(147,112,255,.17);
  border-radius: 16px;
  background:
    radial-gradient(circle at 84% 0%,rgba(147,112,255,.12),transparent 42%),
    linear-gradient(145deg,rgba(27,28,42,.98),rgba(17,20,29,.98));
  box-shadow: 0 16px 34px rgba(0,0,0,.22),0 0 24px rgba(147,112,255,.055),inset 0 1px 0 rgba(255,255,255,.06);
}
.rhythm-panel .rhythm-strip-card .section-header {
  margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(147,112,255,.14);
}
.rhythm-panel .rhythm-strip-card .section-header h2 {
  font-size: 1.08rem;
}

@media (max-width: 1199px) {
  .daily-stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 560px) {
  .daily-stats-grid { grid-template-columns: minmax(0,1fr) !important; }
}

@media (max-width: 767px) {
  body.is-mobile .timeline-wide-card { order: initial; }
  body.is-mobile .timeline-wide {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding-bottom: var(--space-xs);
  }
  body.is-mobile .timeline-wide .timeline-item { min-width: 96px; }
}

@media (min-width: 1920px) {
  body.tablet-mode .timeline-wide .timeline-dot { width: 36px; height: 36px; }
  body.tablet-mode .timeline-wide .timeline-item::after {
    top: 18px;
    left: calc(50% + 18px);
    width: calc(100% - 36px);
  }
  body.tablet-mode .timeline-wide .timeline-copy strong { font-size: 0.74rem; }
  body.tablet-mode .timeline-wide .timeline-copy span { font-size: 0.64rem; }
}

@keyframes dashboardAmbient { to { transform: translate3d(2.2%,1.6%,0) scale(1.035); } }
@keyframes timelineReveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes timelineLivePulse {
  50% { box-shadow: 0 0 26px color-mix(in srgb, var(--timeline-color) 68%, transparent); transform: scale(1.08); }
}

/* Quick action tiles keep enough room for icon, title and subtitle at every UI scale. */
.quick-actions-grid,
.action-grid {
  align-content: start;
  grid-auto-rows: minmax(clamp(92px, 10vh, 128px), auto);
}
.action-tile,
.action-card {
  display: flex;
  height: auto;
  min-height: clamp(92px, 10vh, 128px);
  aspect-ratio: auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, calc(6px * var(--ui-scale)), 8px);
  padding: clamp(8px, calc(11px * var(--ui-scale)), 14px);
  overflow: hidden;
}
.action-icon-wrapper {
  display: flex;
  width: clamp(32px, 4.8vh, 48px);
  height: clamp(32px, 4.8vh, 48px);
  min-height: clamp(32px, 4.8vh, 48px);
  max-width: 70%;
  max-height: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  overflow: visible;
  padding: 0;
}
.action-card .action-icon {
  display: block;
  width: auto;
  height: auto;
  overflow: visible;
  font-size: clamp(24px, 3.6vh, 40px);
  line-height: 1;
  transform: none;
}
.action-card:hover .action-icon,
.action-card:active .action-icon {
  transform: none;
}
.action-title,
.action-card strong {
  z-index: 1;
  max-width: 100%;
  flex: 0 0 auto;
  font-size: clamp(0.7rem, calc(0.82rem * var(--ui-scale)), 0.92rem);
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
}
.action-subtitle,
.action-card small {
  z-index: 1;
  max-width: 100%;
  flex: 0 0 auto;
  color: #8d929e;
  font-size: clamp(0.56rem, calc(0.64rem * var(--ui-scale)), 0.74rem);
  line-height: 1.1;
  text-align: center;
  opacity: 0.78;
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .action-panel {
    min-height: 0;
    overflow-y: auto;
  }
  body.tablet-mode .quick-actions-grid,
  body.tablet-mode .action-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(clamp(82px, 10.5vh, 108px), auto);
    min-height: min-content;
    overflow: visible;
  }
  body.tablet-mode .action-tile,
  body.tablet-mode .action-card {
    min-height: clamp(82px, 10.5vh, 108px);
    gap: clamp(3px, calc(5px * var(--ui-scale)), 6px);
    padding: clamp(7px, calc(9px * var(--ui-scale)), 11px);
  }
  body.tablet-mode .action-icon-wrapper {
    width: clamp(30px, 4.2vh, 44px);
    height: clamp(30px, 4.2vh, 44px);
    min-height: clamp(30px, 4.2vh, 44px);
    max-height: none;
    padding: 0;
  }
  body.tablet-mode .action-card .action-icon {
    font-size: clamp(23px, 3.45vh, 38px);
    line-height: 1;
    transform: none;
  }
}

@media (min-width: 1920px) {
  body.tablet-mode .quick-actions-grid,
  body.tablet-mode .action-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
}

/* Compact dashboard with action tiles and without the removed quick-note box. */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(210px,.86fr) minmax(300px,1.36fr) minmax(250px,.96fr);
    grid-template-rows: auto minmax(88px,.72fr) minmax(96px,.88fr) minmax(112px,1fr) minmax(100px,.9fr);
    grid-template-areas:
      "timeline timeline timeline"
      "actions stats history"
      "actions feed history"
      "actions smart history"
      "actions weather history";
  }
  body.tablet-mode .action-tiles-panel {
    grid-area: actions;
    grid-template-rows: minmax(0,1fr);
    gap: 0;
    min-height: 0;
    overflow-y: auto;
  }
  body.tablet-mode .summary-row { grid-area: stats; }
  body.tablet-mode .last-events-card { grid-area: feed; }
  body.tablet-mode .weather-card { grid-area: weather; }
  body.tablet-mode .smart-summary-card { grid-area: smart; }
  body.tablet-mode .history-column { grid-area: history; }
  body.focus-mode.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(210px,.86fr) minmax(300px,1.36fr);
    grid-template-areas:
      "timeline timeline"
      "actions stats"
      "actions feed"
      "actions smart"
      "actions weather";
  }
  body.focus-mode.tablet-mode .history-column { display: none; }
}

@media (min-width: 1366px) {
  body.desktop-tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(280px,.88fr) minmax(520px,1.48fr) minmax(330px,.98fr);
  }
}

@media (min-width: 1920px) {
  body.wide-dashboard-mode .tablet-dashboard {
    grid-template-columns: minmax(360px,.94fr) minmax(700px,1.58fr) minmax(410px,1fr);
  }
}

/* Unified control-center density for tablet and desktop dashboards. */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode {
    --control-center-gap: clamp(8px, .72vw, 12px);
    --control-center-padding: clamp(8px, .7vw, 11px);
  }
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(170px,22fr) minmax(270px,50fr) minmax(210px,28fr);
    grid-template-rows: auto minmax(72px,.62fr) minmax(112px,1fr) minmax(112px,1fr) minmax(108px,.9fr);
    grid-template-areas:
      "timeline timeline timeline"
      "actions stats history"
      "actions feed history"
      "actions feed history"
      "weather smart history";
    gap: var(--control-center-gap);
  }
  body.tablet-mode .timeline-wide-card,
  body.tablet-mode .card-panel,
  body.tablet-mode .history-panel,
  body.tablet-mode .history-toolbar {
    border-color: rgba(255,255,255,.055);
    box-shadow: 0 9px 22px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.035);
  }
  body.tablet-mode .timeline-wide-card { grid-area: timeline; }
  body.tablet-mode .action-tiles-panel {
    grid-area: actions;
    display: grid;
    min-height: 0;
    overflow-y: auto;
  }
  body.tablet-mode .action-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(clamp(76px,9vh,94px),auto);
    gap: clamp(5px,.45vw,7px);
    align-content: start;
  }
  body.tablet-mode .action-card,
  body.tablet-mode .action-tile {
    min-height: clamp(76px,9vh,94px);
    gap: 3px;
    padding: clamp(6px,.5vw,8px) 4px;
    border-color: rgba(255,255,255,.048);
    border-radius: 12px;
    background: linear-gradient(145deg,rgba(255,255,255,.05),rgba(255,255,255,.018));
  }
  body.tablet-mode .action-icon-wrapper {
    width: clamp(28px,3.7vh,38px);
    height: clamp(28px,3.7vh,38px);
    min-height: clamp(28px,3.7vh,38px);
  }
  body.tablet-mode .action-card .action-icon { font-size: clamp(21px,3vh,32px); }
  body.tablet-mode .action-card strong { font-size: clamp(.63rem,calc(.72rem * var(--ui-scale)),.76rem); }
  body.tablet-mode .action-card small { font-size: clamp(.51rem,calc(.58rem * var(--ui-scale)),.64rem); }
  body.tablet-mode .summary-row {
    grid-area: stats;
    grid-template-columns: repeat(4,minmax(0,1fr));
    grid-template-rows: minmax(0,1fr);
    gap: var(--control-center-gap);
  }
  body.tablet-mode .summary-card {
    min-height: 0;
    padding: var(--control-center-padding);
    border-color: rgba(255,255,255,.05);
    border-radius: 13px;
    background: linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.018));
  }
  body.tablet-mode .summary-card strong { font-size: clamp(.94rem,1.18vw,1.12rem); }
  body.tablet-mode .last-events-card {
    grid-area: feed;
    padding: var(--control-center-padding);
    overflow: hidden;
  }
  body.tablet-mode .last-events-card .section-header { margin-bottom: 3px; }
  body.tablet-mode .last-events { display: grid; min-height: 0; overflow-y: auto; }
  body.tablet-mode .mini-event-card {
    gap: 8px;
    padding: clamp(7px,.62vw,10px) 2px;
    border-color: rgba(255,255,255,.045);
    transition: background 180ms ease, transform 180ms ease;
  }
  body.tablet-mode .mini-event-card:hover {
    transform: translateX(3px);
    background: rgba(255,255,255,.025);
  }
  body.tablet-mode .smart-summary-card {
    grid-area: smart;
    align-self: stretch;
    padding: var(--control-center-padding);
  }
  body.tablet-mode .smart-summary-card .section-header { margin-bottom: 3px; }
  body.tablet-mode .smart-summary-text {
    margin-bottom: 5px;
    font-size: clamp(.62rem,calc(.7rem * var(--ui-scale)),.72rem);
    line-height: 1.28;
  }
  body.tablet-mode .mini-analytics { gap: 3px; }
  body.tablet-mode .weather-card {
    grid-area: weather;
    min-height: 0;
    padding: var(--control-center-padding);
    border-radius: 16px;
  }
  body.tablet-mode .weather-topline { margin-bottom: 1px; }
  body.tablet-mode .weather-hero { min-height: 48px; }
  body.tablet-mode .weather-temperature { font-size: clamp(2rem,3.2vw,2.7rem); }
  body.tablet-mode .weather-status { font-size: .72rem; }
  body.tablet-mode .weather-message,
  body.tablet-mode .weather-updated { display: none; }
  body.tablet-mode .weather-visual { width: clamp(46px,5.2vw,62px); height: clamp(46px,5.2vw,62px); }
  body.tablet-mode .weather-grid { gap: 4px; }
  body.tablet-mode .weather-grid div { gap: 1px; padding: 4px 3px; border-radius: 8px; }
  body.tablet-mode .weather-grid .metric-icon { font-size: .7rem; }
  body.tablet-mode .weather-grid small { font-size: .48rem; }
  body.tablet-mode .weather-grid strong { font-size: .62rem; }
  body.tablet-mode .history-column {
    grid-area: history;
    gap: var(--control-center-gap);
  }
  body.tablet-mode .history-panel { padding: var(--control-center-padding); }
  body.tablet-mode .history-header { gap: 5px; margin-bottom: 5px; }
  body.tablet-mode .history-header h2 { font-size: .88rem; }
  body.tablet-mode .history-list { gap: 4px; }
  body.tablet-mode .entry-card {
    gap: 2px;
    padding: clamp(5px,.48vw,7px);
    border-color: rgba(255,255,255,.038);
    border-radius: 10px;
    background: rgba(255,255,255,.018);
  }
  body.tablet-mode .entry-title { font-size: .68rem; }
  body.tablet-mode .entry-time,
  body.tablet-mode .action-pill { font-size: .54rem; }
  body.tablet-mode .entry-label { padding: 3px 5px; font-size: .58rem; }
  body.tablet-mode .action-pill { padding: 2px 5px; }
  body.focus-mode.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(220px,31fr) minmax(400px,69fr);
    grid-template-areas:
      "timeline timeline"
      "actions stats"
      "actions feed"
      "actions feed"
      "weather smart";
  }
}

@media (min-width: 1024px) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(220px,22fr) minmax(360px,50fr) minmax(270px,28fr);
  }
}

@media (min-width: 1920px) {
  body.wide-dashboard-mode .tablet-dashboard {
    grid-template-columns: minmax(330px,21fr) minmax(820px,55fr) minmax(380px,24fr);
  }
  body.wide-dashboard-mode .action-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

/* Compact cockpit layout: content-sized widgets without viewport stretching. */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(190px,25fr) minmax(280px,51fr) minmax(220px,24fr);
    grid-template-rows: auto auto auto auto;
    grid-auto-rows: min-content;
    grid-template-areas:
      "timeline timeline timeline"
      "actions stats history"
      "actions feed history"
      "weather smart history";
    height: auto;
    min-height: 0;
    align-items: start;
  }
  body.tablet-mode .timeline-wide-card,
  body.tablet-mode .action-tiles-panel,
  body.tablet-mode .summary-row,
  body.tablet-mode .last-events-card,
  body.tablet-mode .smart-summary-card,
  body.tablet-mode .weather-card,
  body.tablet-mode .history-column {
    align-self: start;
  }
  body.tablet-mode .action-tiles-panel {
    max-height: none;
    overflow: visible;
  }
  body.tablet-mode .action-grid {
    grid-auto-rows: minmax(74px,84px);
  }
  body.tablet-mode .action-card,
  body.tablet-mode .action-tile {
    min-height: 74px;
    max-height: 84px;
  }
  body.tablet-mode .summary-row {
    max-height: 108px;
  }
  body.tablet-mode .summary-card {
    min-height: 68px;
    max-height: 108px;
  }
  body.tablet-mode .last-events-card {
    height: auto;
    max-height: 224px;
  }
  body.tablet-mode .last-events {
    min-height: 0;
    max-height: 168px;
    overflow-y: auto;
  }
  body.tablet-mode .smart-summary-card {
    height: auto;
    max-height: 142px;
    overflow: hidden;
  }
  body.tablet-mode .weather-card {
    height: auto;
    max-height: 172px;
    margin-top: 0;
  }
  body.tablet-mode .history-column {
    grid-template-rows: auto auto;
    max-height: min(620px,calc(100dvh - 168px));
    overflow: hidden;
  }
  body.tablet-mode .history-panel {
    height: auto;
    max-height: min(574px,calc(100dvh - 214px));
    overflow: hidden;
  }
  body.tablet-mode .history-list {
    min-height: 0;
    max-height: min(490px,calc(100dvh - 286px));
    overflow-y: auto;
  }
  body.focus-mode.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(220px,32fr) minmax(400px,68fr);
    grid-template-rows: auto auto auto auto;
    grid-auto-rows: min-content;
    grid-template-areas:
      "timeline timeline"
      "actions stats"
      "actions feed"
      "weather smart";
  }
}

@media (min-width: 1024px) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(250px,25fr) minmax(410px,51fr) minmax(260px,24fr);
  }
}

@media (min-width: 1920px) {
  body.wide-dashboard-mode .tablet-dashboard {
    grid-template-columns: minmax(360px,24fr) minmax(860px,55fr) minmax(360px,21fr);
  }
}

.day-shortcuts-card,
.today-overview-card { display: grid; gap: var(--space-xs); }
.day-shortcuts,
.today-overview { display: grid; gap: 6px; }
.day-shortcut,
.today-overview-item {
  display: grid;
  gap: 2px;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.045);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}
.day-shortcut small,
.today-overview-item small { color: var(--muted); font-size: .62rem; }
.day-shortcut strong,
.today-overview-item strong { color: #eef4fb; font-size: .7rem; line-height: 1.2; }

/* Viewport-filling control center with purposeful bottom widgets. */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(190px,25fr) minmax(280px,51fr) minmax(220px,24fr);
    grid-template-rows: auto auto minmax(64px,1fr) minmax(64px,1fr) auto minmax(96px,.72fr);
    grid-auto-rows: min-content;
    grid-template-areas:
      "timeline timeline timeline"
      "actions stats history"
      "actions feed history"
      "actions feed history"
      "weather smart history"
      "shortcuts today history";
    min-height: calc(100dvh - 86px);
    align-items: stretch;
  }
  body.tablet-mode .timeline-wide-card,
  body.tablet-mode .action-tiles-panel,
  body.tablet-mode .summary-row,
  body.tablet-mode .weather-card,
  body.tablet-mode .smart-summary-card { align-self: start; }
  body.tablet-mode .action-grid { grid-auto-rows: minmax(68px,78px); }
  body.tablet-mode .action-card,
  body.tablet-mode .action-tile {
    min-height: 68px;
    max-height: 78px;
  }
  body.tablet-mode .summary-row { max-height: 98px; }
  body.tablet-mode .summary-card {
    min-height: 64px;
    max-height: 98px;
  }
  body.tablet-mode .last-events-card {
    grid-area: feed;
    align-self: stretch;
    height: auto;
    max-height: none;
  }
  body.tablet-mode .last-events {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
  body.tablet-mode .smart-summary-card {
    grid-area: smart;
    max-height: 136px;
  }
  body.tablet-mode .weather-card {
    grid-area: weather;
    max-height: 154px;
  }
  body.tablet-mode .day-shortcuts-card {
    grid-area: shortcuts;
    align-self: stretch;
    min-height: 0;
    padding: var(--control-center-padding);
    overflow: hidden;
  }
  body.tablet-mode .day-shortcuts {
    grid-template-columns: 1fr;
    align-content: start;
  }
  body.tablet-mode .today-overview-card {
    grid-area: today;
    align-self: stretch;
    min-height: 0;
    padding: var(--control-center-padding);
    overflow: hidden;
  }
  body.tablet-mode .today-overview {
    grid-template-columns: repeat(5,minmax(0,1fr));
    align-content: start;
  }
  body.tablet-mode .history-column {
    grid-area: history;
    grid-template-rows: auto minmax(0,1fr);
    align-self: stretch;
    height: auto;
    max-height: none;
    overflow: hidden;
  }
  body.tablet-mode .history-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr);
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: hidden;
  }
  body.tablet-mode .history-list {
    max-height: none;
    min-height: 0;
    overflow-y: auto;
  }
  body.focus-mode.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(220px,32fr) minmax(400px,68fr);
    grid-template-rows: auto auto minmax(64px,1fr) minmax(64px,1fr) auto minmax(96px,.72fr);
    grid-template-areas:
      "timeline timeline"
      "actions stats"
      "actions feed"
      "actions feed"
      "weather smart"
      "shortcuts today";
  }
}

@media (min-width: 1024px) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(250px,25fr) minmax(410px,51fr) minmax(260px,24fr);
  }
}

@media (min-width: 1920px) {
  body.wide-dashboard-mode .tablet-dashboard {
    grid-template-columns: minmax(360px,24fr) minmax(860px,55fr) minmax(360px,21fr);
    min-height: calc(100dvh - 92px);
  }
}

/* Responsive viewport shell and readable weather widget. */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode { height: 100dvh; overflow: hidden; }
  body.tablet-mode .app-shell {
    display: grid;
    width: min(100%,2360px);
    height: 100dvh;
    min-height: 100dvh;
    grid-template-rows: auto minmax(0,1fr);
    overflow: hidden;
  }
  body.tablet-mode .sticky-top { min-height: 0; }
  body.tablet-mode .tablet-dashboard {
    height: 100%;
    min-height: 0;
    grid-template-rows: auto auto minmax(58px,1fr) minmax(58px,1fr) auto minmax(92px,.72fr);
    overflow: hidden;
  }
  body.tablet-mode .action-tiles-panel,
  body.tablet-mode .last-events-card,
  body.tablet-mode .today-overview-card,
  body.tablet-mode .day-shortcuts-card,
  body.tablet-mode .history-column,
  body.tablet-mode .history-panel,
  body.tablet-mode .history-list { min-height: 0; }
  body.tablet-mode .last-events-card,
  body.tablet-mode .today-overview-card,
  body.tablet-mode .day-shortcuts-card,
  body.tablet-mode .history-column { align-self: stretch; }
  body.tablet-mode .weather-card {
    container-type: inline-size;
    display: grid;
    min-width: 0;
    max-height: none;
    gap: 6px;
    overflow: hidden;
    padding: clamp(8px,.72vw,11px);
  }
  body.tablet-mode .weather-topline {
    min-width: 0;
    align-items: center;
    gap: 6px;
  }
  body.tablet-mode .weather-topline small { display: none; }
  body.tablet-mode .weather-hero {
    display: grid;
    min-width: 0;
    min-height: 56px;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 8px;
    align-items: center;
  }
  body.tablet-mode .weather-current { min-width: 0; gap: 2px; }
  body.tablet-mode .weather-temperature {
    font-size: clamp(2.05rem,3.5vw,3rem);
    line-height: .94;
    letter-spacing: -.1em;
  }
  body.tablet-mode .weather-status {
    overflow: hidden;
    color: #dffcff;
    font-size: clamp(.68rem,.78vw,.8rem);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.tablet-mode .weather-message { display: none; }
  body.tablet-mode .weather-visual {
    width: clamp(48px,4.6vw,68px);
    height: clamp(48px,4.6vw,68px);
  }
  body.tablet-mode .weather-metrics-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 5px;
  }
  body.tablet-mode .weather-metric {
    display: grid;
    min-width: 0;
    min-height: 38px;
    grid-template-columns: auto minmax(0,1fr);
    grid-template-areas:
      "icon label"
      "icon value";
    column-gap: 5px;
    row-gap: 1px;
    align-items: center;
    padding: 5px 6px;
  }
  body.tablet-mode .weather-metric .metric-icon { grid-area: icon; }
  body.tablet-mode .weather-label {
    grid-area: label;
    overflow: hidden;
    color: rgba(239,248,255,.68);
    font-size: clamp(.5rem,.56vw,.6rem);
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.tablet-mode .weather-value {
    grid-area: value;
    overflow: hidden;
    color: #fff;
    font-size: clamp(.62rem,.68vw,.76rem);
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.tablet-mode .weather-updated {
    display: block;
    overflow: hidden;
    margin-top: 0;
    color: rgba(239,248,255,.62);
    font-size: clamp(.5rem,.54vw,.58rem);
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (min-width: 1600px) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(330px,24fr) minmax(720px,54fr) minmax(340px,22fr);
  }
  body.tablet-mode .weather-metrics-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
  body.tablet-mode .weather-metric {
    min-height: 44px;
    grid-template-columns: minmax(0,1fr);
    grid-template-areas:
      "icon"
      "label"
      "value";
    gap: 2px;
  }
}

@media (min-aspect-ratio: 16/9) and (min-width: 1024px) {
  body.tablet-mode .tablet-dashboard {
    grid-template-rows: auto auto minmax(52px,1fr) minmax(52px,1fr) auto minmax(84px,.62fr);
  }
}

@media (max-aspect-ratio: 16/9) and (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .tablet-dashboard {
    grid-template-rows: auto auto minmax(64px,1fr) minmax(64px,1fr) auto minmax(104px,.82fr);
  }
}

@media (max-height: 799px) and (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .app-shell { padding: 7px 9px 9px; }
  body.tablet-mode .sticky-top { gap: 6px; margin-bottom: 7px; padding: 6px 8px; }
  body.tablet-mode .timeline-wide-card { padding: 7px 9px; }
  body.tablet-mode .timeline-header { margin-bottom: 3px; }
  body.tablet-mode .timeline-header p { display: none; }
  body.tablet-mode .timeline-wide { min-height: 52px; }
  body.tablet-mode .action-grid { grid-auto-rows: minmax(60px,68px); }
  body.tablet-mode .action-card,
  body.tablet-mode .action-tile { min-height: 60px; max-height: 68px; }
  body.tablet-mode .weather-card { gap: 4px; padding: 7px; }
  body.tablet-mode .weather-hero { min-height: 42px; }
  body.tablet-mode .weather-visual { width: 42px; height: 42px; }
  body.tablet-mode .weather-temperature { font-size: 2rem; }
  body.tablet-mode .weather-metric { min-height: 32px; padding: 3px 5px; }
}

@media (min-height: 900px) and (min-width: 1024px) {
  body.tablet-mode .tablet-dashboard {
    grid-template-rows: auto auto minmax(82px,1fr) minmax(82px,1fr) minmax(132px,auto) minmax(118px,.72fr);
  }
  body.tablet-mode .weather-hero { min-height: 68px; }
  body.tablet-mode .weather-visual { width: clamp(58px,5vw,78px); height: clamp(58px,5vw,78px); }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  body.is-tablet .app-shell { min-height: 100dvh; }
  body.is-tablet .weather-card { container-type: inline-size; }
  body.is-tablet .weather-hero {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
  }
  body.is-tablet .weather-metrics-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  body.is-tablet .weather-metric { min-width: 0; }
  body.is-tablet .weather-label,
  body.is-tablet .weather-value { line-height: 1.15; }
}

/* Premium 2026 visual hierarchy: depth, live feed and rhythm analytics. */
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: radial-gradient(rgba(255,255,255,.14) .55px,transparent .7px);
  background-size: 5px 5px;
  mix-blend-mode: soft-light;
}
.card-panel,
.summary-card,
.history-panel,
.history-toolbar {
  backdrop-filter: blur(20px) saturate(118%);
}
.timeline-wide-card,
.last-events-card,
.today-overview-card {
  position: relative;
  isolation: isolate;
}
.timeline-wide-card::after,
.last-events-card::after,
.today-overview-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(circle at 12% 0%,rgba(113,217,197,.09),transparent 42%);
}
.last-events-card {
  background: linear-gradient(145deg,rgba(33,39,49,.94),rgba(21,25,33,.9));
  box-shadow: 0 18px 38px rgba(0,0,0,.24),0 0 28px rgba(113,217,197,.055),inset 0 1px 0 rgba(255,255,255,.06);
}
.last-events-card .section-header h2 {
  color: #f9fcff;
  font-size: clamp(1rem,1.35vw,1.28rem);
  letter-spacing: -.045em;
}
.feed-refresh { border: 1px solid rgba(113,217,197,.12); color: #c9fff5; }
.today-overview-card {
  background: linear-gradient(145deg,rgba(37,33,58,.78),rgba(23,26,35,.92));
}
.rhythm-analytics {
  display: grid;
  grid-column: 1 / -1;
  gap: 4px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid rgba(147,112,255,.14);
  border-radius: 11px;
  background: rgba(12,15,24,.3);
}
.rhythm-head,
.rhythm-scale { display: flex; justify-content: space-between; gap: 6px; }
.rhythm-head small { color: rgba(232,237,248,.7); font-size: .58rem; font-weight: 800; }
.rhythm-head b { color: #b7a7ff; font-size: .52rem; letter-spacing: .12em; text-transform: uppercase; }
.rhythm-heatmap { display: grid; grid-template-columns: repeat(24,minmax(0,1fr)); gap: 2px; }
.rhythm-cell {
  display: block;
  height: 9px;
  border-radius: 3px;
  background: rgba(255,255,255,.045);
  transition: transform 180ms ease,background 180ms ease;
}
.rhythm-cell:hover { transform: translateY(-2px) scaleY(1.28); }
.rhythm-cell.level-1 { background: rgba(113,217,197,.24); }
.rhythm-cell.level-2 { background: rgba(113,217,197,.44); }
.rhythm-cell.level-3 { background: rgba(147,112,255,.62); }
.rhythm-cell.level-4 { background: rgba(244,114,182,.78); box-shadow: 0 0 9px rgba(244,114,182,.28); }
.rhythm-scale small { color: rgba(222,232,242,.45); font-size: .48rem; }
.rhythm-insights { display: flex; gap: 5px; flex-wrap: wrap; }
.rhythm-insights span {
  padding: 3px 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.045);
  color: rgba(236,240,249,.72);
  font-size: .52rem;
  line-height: 1.15;
}
.history-toolbar {
  position: sticky;
  top: 0;
  border-color: rgba(147,112,255,.12);
  background: rgba(26,28,38,.82);
}
.entry-card {
  position: relative;
  overflow: hidden;
  border-left: 2px solid var(--entry-accent,#71d9c5);
  background: linear-gradient(105deg,color-mix(in srgb,var(--entry-accent) 5%,transparent),rgba(255,255,255,.018));
  transition: transform 180ms ease,border-color 180ms ease,background 180ms ease,box-shadow 180ms ease;
}
.entry-card:nth-child(3n+2) { padding-top: 8px; padding-bottom: 8px; }
.entry-card:hover {
  transform: translateX(-3px);
  border-color: color-mix(in srgb,var(--entry-accent) 55%,transparent);
  background: linear-gradient(105deg,color-mix(in srgb,var(--entry-accent) 10%,transparent),rgba(255,255,255,.027));
  box-shadow: 0 9px 18px rgba(0,0,0,.16),0 0 16px color-mix(in srgb,var(--entry-accent) 8%,transparent);
}
.timeline-wide .timeline-dot {
  border-width: 1.5px;
  box-shadow: 0 0 20px color-mix(in srgb,var(--timeline-color) 55%,transparent);
}
.timeline-wide .timeline-item::after {
  height: 2px;
  background: linear-gradient(90deg,color-mix(in srgb,var(--timeline-color) 76%,white 8%),rgba(255,255,255,.09));
}
.weather-card {
  box-shadow: 0 18px 40px rgba(0,0,0,.22),0 0 28px rgba(var(--weather-accent-rgb),.1),inset 0 1px 0 rgba(255,255,255,.1);
}
.weather-metric {
  border: 1px solid rgba(255,255,255,.045);
  background: rgba(255,255,255,.055);
}
@media (max-height: 799px) and (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .today-overview-item { display: none; }
  body.tablet-mode .rhythm-analytics { padding: 5px 6px; }
  body.tablet-mode .rhythm-insights span { font-size: .48rem; }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  body.is-tablet .today-overview { grid-template-columns: repeat(2,minmax(0,1fr)); }
  body.is-tablet .rhythm-analytics { grid-column: 1 / -1; }
}

/* Central realtime status: current state without duplicating the journal list. */
.now-panel-card {
  background:
    radial-gradient(circle at 92% 0%,rgba(113,217,197,.14),transparent 36%),
    linear-gradient(145deg,rgba(30,39,48,.96),rgba(19,24,32,.94));
}
.now-panel-card .section-header { align-items: center; }
.now-panel-actions,
.now-hints {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}
.now-panel {
  display: grid;
  gap: 9px;
  min-width: 0;
}
.now-status-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 7px;
}
.now-status-item {
  display: grid;
  grid-template-columns: 30px minmax(0,1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 12px;
  background: linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.022));
  transition: transform 180ms ease,border-color 180ms ease,background 180ms ease;
}
.now-status-item:hover {
  transform: translateY(-2px);
  border-color: rgba(113,217,197,.24);
  background: linear-gradient(145deg,rgba(113,217,197,.1),rgba(255,255,255,.026));
}
.now-status-icon {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border: 1px solid rgba(113,217,197,.2);
  border-radius: 10px;
  background: rgba(113,217,197,.08);
  color: #bafff3;
  font-size: .88rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 14px rgba(113,217,197,.09);
}
.now-status-item div { min-width: 0; }
.now-status-item small,
.now-status-item strong,
.now-status-item em { display: block; min-width: 0; }
.now-status-item small {
  overflow: hidden;
  color: rgba(221,232,242,.58);
  font-size: .54rem;
  font-weight: 850;
  letter-spacing: .06em;
  line-height: 1.1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.now-status-item strong {
  overflow: hidden;
  margin-top: 3px;
  color: #f4fbff;
  font-size: .7rem;
  line-height: 1.12;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.now-status-item em {
  margin-top: 3px;
  color: #89e4d5;
  font-size: .56rem;
  font-style: normal;
  font-weight: 750;
  line-height: 1.1;
}
.now-hints { gap: 5px; }
.now-hint {
  padding: 4px 7px;
  border: 1px solid rgba(113,217,197,.1);
  border-radius: 999px;
  background: rgba(113,217,197,.055);
  color: rgba(224,245,242,.76);
  font-size: .56rem;
  font-weight: 720;
  line-height: 1.12;
}
body.tablet-mode .now-panel-card {
  grid-area: feed;
  min-height: 0;
  overflow-y: auto;
}
@media (max-height: 799px) and (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .now-panel { gap: 6px; }
  body.tablet-mode .now-status-grid { gap: 5px; }
  body.tablet-mode .now-status-item { grid-template-columns: 24px minmax(0,1fr); gap: 5px; padding: 5px 6px; }
  body.tablet-mode .now-status-icon { width: 23px; height: 23px; border-radius: 8px; font-size: .74rem; }
  body.tablet-mode .now-status-item strong { margin-top: 2px; font-size: .62rem; }
  body.tablet-mode .now-status-item em { margin-top: 2px; font-size: .5rem; }
  body.tablet-mode .now-hint { padding: 3px 5px; font-size: .49rem; }
}
@media (max-width: 767px), (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  .now-status-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Premium weather rail: actions, weather and day shortcuts stay physically adjacent. */
.left-rail {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}
.weather-premium-card {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 82% 18%,rgba(var(--weather-accent-rgb),.24),transparent 34%),
    linear-gradient(145deg,rgba(23,43,61,.98),rgba(14,20,35,.98));
  box-shadow: 0 20px 44px rgba(0,0,0,.28),0 0 34px rgba(var(--weather-accent-rgb),.14),inset 0 1px 0 rgba(255,255,255,.14);
  animation: weatherCardFloat 7s ease-in-out infinite;
}
.weather-premium-card::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -35%;
  pointer-events: none;
  background: conic-gradient(from 180deg,transparent,rgba(var(--weather-accent-rgb),.12),transparent 38%);
  animation: weatherLighting 15s linear infinite;
}
.weather-premium-card .weather-glow {
  background: rgba(var(--weather-accent-rgb),.28);
  filter: blur(34px);
}
.weather-premium-card .weather-main-temp {
  color: #fff;
  font-size: clamp(3.05rem,4.6vw,4.55rem);
  font-weight: 760;
  line-height: .88;
  letter-spacing: 0.09em;
  text-shadow: 0 0 38px rgba(var(--weather-accent-rgb),.68);
}
.weather-premium-card .weather-status {
  color: #ecffff;
  font-size: clamp(.78rem,.9vw,.96rem);
  font-weight: 850;
  line-height: 1.14;
  text-shadow: 0 0 14px rgba(var(--weather-accent-rgb),.42);
}
.weather-premium-card .weather-visual {
  width: clamp(70px,6.8vw,98px);
  height: clamp(70px,6.8vw,98px);
  filter: drop-shadow(0 0 22px rgba(var(--weather-accent-rgb),.52));
}
.weather-premium-card .weather-metrics {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px;
}
.weather-premium-card .weather-metric-card {
  min-width: 0;
  min-height: 52px;
  padding: 7px 8px;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 12px;
  background: linear-gradient(145deg,rgba(255,255,255,.095),rgba(255,255,255,.038));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(16px);
  transition: transform 180ms ease,background 180ms ease,border-color 180ms ease;
}
.weather-premium-card .weather-metric-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--weather-accent-rgb),.28);
  background: linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.055));
}
.weather-premium-card .weather-label {
  color: rgba(238,249,255,.7);
  font-size: clamp(.58rem,.64vw,.68rem);
  line-height: 1.12;
}
.weather-premium-card .weather-value {
  color: #fff;
  font-size: clamp(.76rem,.88vw,.94rem);
  font-weight: 850;
  line-height: 1.1;
}
.weather-premium-card .metric-icon {
  color: var(--weather-accent);
  font-size: 1rem;
  text-shadow: 0 0 12px rgba(var(--weather-accent-rgb),.62);
}
.weather-premium-card .weather-updated {
  color: rgba(238,249,255,.72);
  font-size: clamp(.54rem,.58vw,.62rem);
}
@keyframes weatherCardFloat { 50% { transform: translateY(-2px); } }
@keyframes weatherLighting { to { transform: rotate(360deg); } }

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .tablet-dashboard {
    grid-template-areas:
      "timeline timeline timeline"
      "left stats history"
      "left feed history"
      "left feed history"
      "left smart history"
      "left today history";
  }
  body.tablet-mode .left-rail {
    grid-area: left;
    grid-template-rows: auto auto minmax(0,1fr);
    align-content: start;
    gap: var(--control-center-gap);
    min-height: 0;
    overflow-y: auto;
    padding-right: 1px;
  }
  body.tablet-mode .action-tiles-panel,
  body.tablet-mode .weather-premium-card,
  body.tablet-mode .day-shortcuts-card {
    grid-area: auto;
    align-self: start;
  }
  body.tablet-mode .weather-premium-card {
    width: 100%;
    min-height: 222px;
    max-height: none;
    margin-top: 0;
    padding: clamp(10px,.82vw,13px);
    gap: 8px;
  }
  body.tablet-mode .weather-premium-card .weather-hero { min-height: 76px; }
  body.tablet-mode .day-shortcuts-card { width: 100%; }
  body.focus-mode.tablet-mode .tablet-dashboard {
    grid-template-areas:
      "timeline timeline"
      "left stats"
      "left feed"
      "left feed"
      "left smart"
      "left today";
  }
}

@media (max-height: 799px) and (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .weather-premium-card {
    min-height: 174px;
    gap: 5px;
    padding: 8px;
  }
  body.tablet-mode .weather-premium-card .weather-hero { min-height: 52px; }
  body.tablet-mode .weather-premium-card .weather-main-temp { font-size: 2.75rem; }
  body.tablet-mode .weather-premium-card .weather-visual { width: 56px; height: 56px; }
  body.tablet-mode .weather-premium-card .weather-metrics { gap: 5px; }
  body.tablet-mode .weather-premium-card .weather-metric-card { min-height: 38px; padding: 4px 6px; }
}

@media (min-width: 1600px) {
  body.tablet-mode .weather-premium-card { min-height: 242px; }
  body.tablet-mode .weather-premium-card .weather-hero { min-height: 88px; }
}

/* Weather center: station-based hourly and multi-day forecast. */
.weather-premium-card .weather-main-temp {
  letter-spacing: 0.09em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-rendering: geometricPrecision;
}
.weather-forecast-hours,
.weather-forecast-days {
  position: relative;
  display: grid;
  gap: 7px;
  margin-top: 11px;
  min-width: 0;
}
.weather-forecast-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.weather-forecast-heading strong {
  color: rgba(249,253,255,.94);
  font-size: clamp(.7rem,.78vw,.84rem);
  font-weight: 850;
  letter-spacing: .01em;
}
.weather-forecast-heading small {
  color: rgba(228,243,255,.58);
  font-size: .56rem;
  font-weight: 780;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.weather-scroll,
.weather-days-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(76px,28%);
  gap: 7px;
  overflow-x: auto;
  padding: 1px 1px 6px;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-color: rgba(var(--weather-accent-rgb),.52) transparent;
  scrollbar-width: thin;
}
.weather-days-strip { grid-auto-columns: minmax(158px,66%); }
.weather-scroll::-webkit-scrollbar,
.weather-days-strip::-webkit-scrollbar { height: 3px; }
.weather-scroll::-webkit-scrollbar-thumb,
.weather-days-strip::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(var(--weather-accent-rgb),.38);
}
.weather-hour-card,
.weather-day-card {
  display: grid;
  min-width: 0;
  scroll-snap-align: start;
  border: 1px solid rgba(var(--weather-accent-rgb),.18);
  border-radius: 13px;
  background: linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.16), 0 0 16px rgba(var(--weather-accent-rgb),.12);
  backdrop-filter: blur(20px);
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.weather-hour-card {
  justify-items: center;
  gap: 3px;
  padding: 8px 5px;
}
.weather-day-card {
  grid-template-columns: minmax(0,1fr) auto;
  gap: 3px 8px;
  padding: 9px;
}
.weather-hour-card:hover,
.weather-day-card:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--weather-accent-rgb),.42);
  background: linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.07));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 12px 32px rgba(0,0,0,.2), 0 0 24px rgba(var(--weather-accent-rgb),.18);
}
.weather-hour-card time,
.weather-day-card time {
  color: rgba(239,249,255,.74);
  font-size: .61rem;
  font-weight: 780;
}
.weather-day-card time {
  overflow: hidden;
  color: #fff;
  font-size: .68rem;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}
.weather-forecast-icon {
  color: var(--weather-accent);
  font-size: 1.32rem;
  filter: drop-shadow(0 0 12px rgba(var(--weather-accent-rgb),.68));
}
.weather-hour-card strong,
.weather-day-card strong {
  color: #fff;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  font-weight: 800;
}
.weather-hour-card small,
.weather-day-card small {
  color: var(--weather-accent);
  font-size: .58rem;
  font-weight: 800;
}
.weather-hour-card em,
.weather-day-card em {
  overflow: hidden;
  color: rgba(227,241,250,.6);
  font-size: .52rem;
  font-style: normal;
  line-height: 1.18;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.weather-day-card .weather-forecast-icon,
.weather-day-card small { justify-self: end; }
.weather-day-card em {
  grid-column: 1 / -1;
  white-space: normal;
}
.weather-forecast-empty {
  margin: 0;
  padding: 9px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  color: rgba(236,247,255,.68);
  font-size: .62rem;
}

@media (min-width: 1600px) {
  .weather-scroll { grid-auto-columns: minmax(88px,26%); }
  .weather-days-strip { grid-auto-columns: minmax(178px,56%); }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  body.is-tablet .weather-scroll { grid-auto-columns: minmax(88px,15%); }
  body.is-tablet .weather-days-strip { grid-auto-columns: minmax(176px,30%); }
  body.is-tablet .weather-forecast-heading strong { font-size: .92rem; }
  body.is-tablet .weather-hour-card,
  body.is-tablet .weather-day-card { padding: 10px; }
}

@media (max-width: 767px) {
  .weather-scroll { grid-auto-columns: minmax(82px,27%); }
  .weather-days-strip { grid-auto-columns: minmax(164px,58%); }
}

@media (max-height: 799px) and (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .weather-forecast-hours,
  body.tablet-mode .weather-forecast-days { gap: 4px; margin-top: 6px; }
  body.tablet-mode .weather-forecast-heading strong { font-size: .64rem; }
  body.tablet-mode .weather-hour-card { gap: 2px; padding: 5px 4px; }
  body.tablet-mode .weather-day-card { padding: 6px; }
  body.tablet-mode .weather-forecast-icon { font-size: 1rem; }
  body.tablet-mode .weather-hour-card em { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  body.is-tablet .left-rail { display: grid; gap: var(--space-sm); }
  body.is-tablet .weather-premium-card { margin-top: 0; padding: 16px; }
  body.is-tablet .weather-premium-card .weather-main-temp { font-size: clamp(4rem,8vw,5.4rem); }
  body.is-tablet .weather-premium-card .weather-visual { width: 112px; height: 112px; }
  body.is-tablet .weather-premium-card .weather-metrics { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

/* Lean control center: one timeline, one current-state panel and one journal. */
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(230px,24fr) minmax(420px,52fr) minmax(280px,24fr);
    grid-template-rows: auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "timeline timeline timeline"
      "left stats history"
      "left feed history"
      "left rhythm history";
    gap: var(--control-center-gap);
    align-items: stretch;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  body.tablet-mode .timeline-wide-card { grid-area: timeline; align-self: start; }
  body.tablet-mode .left-rail {
    grid-area: left;
    grid-template-rows: auto auto;
    align-content: start;
    gap: var(--control-center-gap);
    min-height: 0;
    overflow-y: auto;
  }
  body.tablet-mode .summary-row {
    grid-area: stats;
    align-self: start;
    max-height: 92px;
  }
  body.tablet-mode .summary-card {
    min-height: 62px;
    max-height: 92px;
  }
  body.tablet-mode .panel-grid { display: contents; }
  body.tablet-mode .now-panel-card {
    grid-area: feed;
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
  }
  body.tablet-mode .rhythm-strip-card {
    grid-area: rhythm;
    align-self: end;
    min-height: 0;
    padding: var(--control-center-padding);
    overflow: hidden;
  }
  body.tablet-mode .rhythm-strip-card .section-header { margin-bottom: 5px; }
  body.tablet-mode .today-overview { display: block; }
  body.tablet-mode .rhythm-analytics { padding: 6px 8px; }
  body.tablet-mode .history-column {
    grid-area: history;
    grid-template-rows: auto minmax(0,1fr);
    align-self: stretch;
    min-height: 0;
    height: auto;
    overflow: hidden;
  }
  body.tablet-mode .history-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr);
    min-height: 0;
    height: auto;
    overflow: hidden;
  }
  body.tablet-mode .history-list {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
  body.focus-mode.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(230px,30fr) minmax(460px,70fr);
    grid-template-rows: auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "timeline timeline"
      "left stats"
      "left feed"
      "left rhythm";
  }
}

@media (min-width: 1600px) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(330px,24fr) minmax(720px,55fr) minmax(330px,21fr);
  }
}

@media (max-height: 799px) and (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .rhythm-strip-card .section-header { display: none; }
  body.tablet-mode .rhythm-insights { display: none; }
  body.tablet-mode .rhythm-analytics { padding: 5px 7px; }
}

/* Journal-first dashboard: weather and actions left, activity feed center, insights right. */
.journal-feed-panel {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 0%,rgba(113,217,197,.09),transparent 36%),
    linear-gradient(145deg,rgba(29,35,45,.96),rgba(18,22,31,.96));
  box-shadow: 0 22px 52px rgba(0,0,0,.26),0 0 28px rgba(113,217,197,.055),inset 0 1px 0 rgba(255,255,255,.075);
}
.journal-feed-panel .history-header {
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.journal-feed-panel .history-header h2 {
  color: #fbfdff;
  font-size: clamp(1.34rem,1.7vw,1.82rem);
  letter-spacing: -.045em;
}
.journal-feed-panel .history-header p:not(.eyebrow) {
  color: rgba(222,234,244,.64);
  font-size: .72rem;
}
.journal-feed-panel .history-actions { gap: 6px; }
.journal-feed-panel .history-actions .button {
  border: 1px solid rgba(113,217,197,.12);
  color: #d8fff8;
  text-decoration: none;
}
.journal-feed-panel .select-wrapper {
  color: rgba(227,239,248,.66);
  font-size: .7rem;
}
.journal-feed-panel .select-wrapper select {
  min-width: 116px;
  padding: 7px 9px;
  font-size: .72rem;
}
.journal-feed-panel .history-list {
  padding-top: 10px;
  scrollbar-color: rgba(113,217,197,.36) transparent;
  scrollbar-width: thin;
}
.journal-feed-panel .entry-card {
  gap: 7px;
  padding: 11px 12px;
  border-left-width: 3px;
  border-radius: 13px;
}
.journal-feed-panel .entry-label { padding: 6px 9px; }
.journal-feed-panel .entry-label i {
  font-size: .92rem;
  font-style: normal;
  text-shadow: 0 0 12px currentColor;
}
.journal-feed-panel .entry-title {
  color: rgba(250,253,255,.94);
  font-size: clamp(.78rem,.92vw,.96rem);
  line-height: 1.26;
}
.journal-feed-panel .entry-foot { justify-content: flex-end; }
.journal-feed-panel .action-pill {
  padding: 5px 8px;
  border-color: rgba(255,255,255,.08);
  color: rgba(235,244,250,.72);
  font-size: .67rem;
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(250px,24fr) minmax(480px,49fr) minmax(270px,27fr);
    grid-template-rows: auto minmax(0,1fr);
    grid-template-areas:
      "timeline timeline timeline"
      "left journal side";
    gap: var(--control-center-gap);
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  body.tablet-mode .left-rail {
    grid-area: left;
    grid-template-rows: auto auto;
    align-content: start;
    min-height: 0;
    overflow-y: auto;
  }
  body.tablet-mode .weather-premium-card { order: 0; }
  body.tablet-mode .action-tiles-panel { order: 1; }
  body.tablet-mode .journal-column {
    grid-area: journal;
    grid-template-rows: minmax(0,1fr);
    min-height: 0;
    height: auto;
    overflow: hidden;
  }
  body.tablet-mode .journal-column .history-toolbar { display: none; }
  body.tablet-mode .journal-feed-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr);
    min-height: 0;
    height: auto;
    overflow: hidden;
  }
  body.tablet-mode .journal-feed-panel .history-list {
    min-height: 0;
    max-height: none;
    overflow-y: auto;
  }
  body.tablet-mode .summary-panel {
    display: grid !important;
    grid-area: side;
    grid-template-rows: auto minmax(0,1fr);
    align-content: start;
    gap: var(--control-center-gap);
    min-height: 0;
    overflow-y: auto;
  }
  body.tablet-mode .summary-row {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
    max-height: none;
  }
  body.tablet-mode .summary-card {
    min-height: 64px;
    max-height: none;
  }
  body.tablet-mode .panel-grid {
    display: grid;
    align-content: start;
    min-height: 0;
  }
  body.tablet-mode .rhythm-strip-card {
    align-self: start;
    min-height: 0;
    overflow: hidden;
  }
  body.focus-mode.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(260px,30fr) minmax(520px,70fr);
    grid-template-areas:
      "timeline timeline"
      "left side";
  }
  body.focus-mode.tablet-mode .journal-column { display: none; }
}

@media (min-width: 1600px) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(330px,23fr) minmax(720px,52fr) minmax(340px,25fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  body.is-tablet .tablet-dashboard {
    display: grid;
    grid-template-columns: minmax(270px,.9fr) minmax(0,1.35fr);
    grid-template-areas:
      "timeline timeline"
      "left journal"
      "side journal";
    gap: var(--space-sm);
    align-items: start;
  }
  body.is-tablet .timeline-wide-card { grid-area: timeline; }
  body.is-tablet .left-rail { grid-area: left; }
  body.is-tablet .journal-column { grid-area: journal; min-height: 0; }
  body.is-tablet .summary-panel { grid-area: side; }
  body.is-tablet .journal-feed-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr);
    overflow: hidden;
  }
  body.is-tablet .journal-feed-panel .history-list {
    max-height: min(74dvh,920px);
    overflow-y: auto;
  }
  body.is-tablet .history-toolbar { display: none; }
}

/* Unified dashboard canvas: two main columns and a full-width analytics center. */
body.is-desktop .app-shell,
body.is-ultrawide .app-shell,
body.tablet-mode .app-shell {
  width: 100%;
  max-width: none;
}
.analytics-panel .rhythm-strip-card {
  background:
    radial-gradient(circle at 16% 0%,rgba(113,217,197,.1),transparent 32%),
    radial-gradient(circle at 88% 100%,rgba(147,112,255,.1),transparent 34%),
    linear-gradient(145deg,rgba(31,35,48,.95),rgba(18,22,31,.97));
  box-shadow: 0 18px 42px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.07);
}
.analytics-panel .rhythm-strip-card .section-header { margin-bottom: 7px; }
.analytics-panel .rhythm-strip-card .section-header h2 {
  color: #fbfdff;
  font-size: clamp(1.08rem,1.38vw,1.42rem);
  letter-spacing: -.04em;
}
.analytics-panel .rhythm-analytics {
  display: grid;
  grid-template-columns: minmax(210px,.76fr) minmax(360px,1.7fr) minmax(220px,.9fr);
  grid-template-areas:
    "metrics chart categories"
    "insights insights insights";
  gap: 8px 12px;
  padding: 0;
  border: 0;
  background: transparent;
}
.rhythm-metrics {
  display: grid;
  grid-area: metrics;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 7px;
}
.rhythm-metric {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 11px;
  background: rgba(255,255,255,.035);
}
.rhythm-metric small {
  color: rgba(222,234,244,.58);
  font-size: .55rem;
  font-weight: 760;
  line-height: 1.15;
}
.rhythm-metric strong {
  color: #fff;
  font-size: clamp(.94rem,1.22vw,1.3rem);
  letter-spacing: -.04em;
}
.rhythm-chart {
  display: grid;
  grid-area: chart;
  gap: 4px;
  min-width: 0;
}
.rhythm-bars {
  display: grid;
  grid-template-columns: repeat(24,minmax(0,1fr));
  align-items: end;
  gap: 3px;
  height: 42px;
}
.rhythm-bar {
  display: block;
  height: var(--bar-height);
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg,rgba(113,217,197,.92),rgba(147,112,255,.4));
  box-shadow: 0 0 10px rgba(113,217,197,.12);
  transition: height 240ms ease,filter 180ms ease;
}
.rhythm-bar:hover { filter: brightness(1.28); }
.rhythm-categories {
  display: grid;
  grid-area: categories;
  align-content: center;
  gap: 6px;
}
.rhythm-category {
  display: grid;
  grid-template-columns: 70px minmax(0,1fr) 18px;
  align-items: center;
  gap: 6px;
}
.rhythm-category span,
.rhythm-category strong {
  color: rgba(229,240,248,.7);
  font-size: .55rem;
  font-weight: 780;
}
.rhythm-category strong { color: #fff; text-align: right; }
.rhythm-category i {
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
}
.rhythm-category b {
  display: block;
  width: var(--category-width);
  height: 100%;
  border-radius: inherit;
  background: var(--category-color);
  box-shadow: 0 0 10px color-mix(in srgb,var(--category-color) 40%,transparent);
}
.analytics-panel .rhythm-insights {
  grid-area: insights;
  gap: 6px;
}
.analytics-panel .rhythm-insights span {
  padding: 4px 7px;
  border: 1px solid rgba(255,255,255,.05);
  background: rgba(255,255,255,.035);
  color: rgba(236,244,249,.74);
  font-size: .56rem;
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(280px,28fr) minmax(640px,72fr);
    grid-template-rows: auto minmax(0,1fr) auto;
    grid-template-areas:
      "timeline timeline"
      "left journal"
      "analytics analytics";
    gap: var(--control-center-gap);
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }
  body.tablet-mode .left-rail {
    grid-area: left;
    grid-template-rows: auto auto;
    align-content: start;
    gap: 7px;
    min-height: 0;
    overflow-y: auto;
  }
  body.tablet-mode .journal-column {
    grid-area: journal;
    min-height: 0;
    overflow: hidden;
  }
  body.tablet-mode .analytics-panel {
    display: grid !important;
    grid-area: analytics;
    grid-template-columns: minmax(0,1fr);
    min-height: 0;
    overflow: hidden;
  }
  body.tablet-mode .analytics-panel .summary-row {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 7px;
    margin-bottom: 7px;
  }
  body.tablet-mode .analytics-panel .summary-card {
    min-height: 46px;
    padding: 7px 9px;
  }
  body.tablet-mode .analytics-panel .panel-grid { display: grid; }
  body.tablet-mode .analytics-panel .rhythm-strip-card {
    padding: 9px 11px;
    overflow: hidden;
  }
  body.tablet-mode .weather-premium-card {
    min-height: 0;
    padding: 9px;
    animation: none;
  }
  body.tablet-mode .weather-premium-card::after { opacity: .5; }
  body.tablet-mode .weather-premium-card .weather-hero { min-height: 56px; }
  body.tablet-mode .weather-premium-card .weather-main-temp { font-size: clamp(2.52rem,3.2vw,3.34rem); }
  body.tablet-mode .weather-premium-card .weather-visual { width: 58px; height: 58px; }
  body.tablet-mode .weather-premium-card .weather-metric-card {
    min-height: 34px;
    padding: 4px 6px;
  }
  body.tablet-mode .weather-forecast-hours,
  body.tablet-mode .weather-forecast-days { gap: 4px; margin-top: 6px; }
  body.tablet-mode .weather-scroll,
  body.tablet-mode .weather-days-strip { gap: 6px; }
  body.tablet-mode .weather-scroll { grid-auto-columns: minmax(76px,24%); }
  body.tablet-mode .weather-days-strip { grid-auto-columns: minmax(145px,48%); }
  body.tablet-mode .weather-hour-card { padding: 6px 5px; }
  body.tablet-mode .weather-day-card { padding: 7px; }
  body.tablet-mode .weather-day-card em { display: none; }
  body.tablet-mode .weather-day-card .weather-forecast-icon { font-size: 1.35rem; }
  body.tablet-mode .action-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-auto-rows: minmax(58px,66px);
    gap: 5px;
  }
  body.tablet-mode .action-card {
    min-height: 0;
    padding: 5px 3px;
    border-radius: 10px;
  }
  body.tablet-mode .action-card .action-icon { font-size: 1.42rem; }
  body.tablet-mode .action-card strong { font-size: .61rem; }
  body.tablet-mode .action-card small { font-size: .48rem; }
}

@media (min-width: 1920px) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(340px,26fr) minmax(900px,74fr);
  }
  body.tablet-mode .analytics-panel .rhythm-analytics {
    grid-template-columns: minmax(280px,.82fr) minmax(620px,1.9fr) minmax(260px,.92fr);
  }
}

@media (min-width: 2560px) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(390px,24fr) minmax(1120px,76fr);
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  body.is-tablet .tablet-dashboard {
    grid-template-columns: minmax(250px,.88fr) minmax(0,1.32fr);
    grid-template-areas:
      "timeline timeline"
      "left journal"
      "analytics analytics";
  }
  body.is-tablet .analytics-panel {
    display: grid;
    grid-area: analytics;
    gap: var(--space-sm);
  }
  body.is-tablet .analytics-panel .rhythm-analytics {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "metrics" "chart" "categories" "insights";
  }
  body.is-tablet .rhythm-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }
  body.is-tablet .weather-premium-card { padding: 12px; }
}

@media (max-height: 799px) and (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .analytics-panel .rhythm-strip-card .section-header { display: none; }
  body.tablet-mode .analytics-panel .rhythm-insights { display: flex; }
  body.tablet-mode .rhythm-bars { height: 30px; }
  body.tablet-mode .analytics-panel .rhythm-strip-card { padding: 7px 9px; }
  body.tablet-mode .analytics-panel .summary-card { min-height: 40px; }
}

/* Stable five-area dashboard grid. Main panels stay in normal document flow. */
.timeline-panel { grid-area: timeline; }
.actions-panel { grid-area: actions; min-width: 0; }
.journal-panel { grid-area: journal; min-width: 0; }
.weather-panel { grid-area: weather; min-width: 0; }
.analytics-panel { grid-area: analytics; min-width: 0; }

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .tablet-dashboard {
    display: grid;
    grid-template-columns: minmax(260px,22%) minmax(520px,1fr) minmax(320px,26%);
    grid-template-rows: auto minmax(0,1fr) auto;
    grid-template-areas:
      "timeline timeline timeline"
      "actions journal weather"
      "analytics analytics analytics";
    gap: var(--space-md);
    align-items: start;
    height: auto;
    min-height: 0;
    overflow: visible;
  }
  body.tablet-mode .timeline-panel,
  body.tablet-mode .actions-panel,
  body.tablet-mode .journal-panel,
  body.tablet-mode .weather-panel,
  body.tablet-mode .analytics-panel {
    position: relative;
    inset: auto;
    min-width: 0;
    transform: none;
  }
  body.tablet-mode .timeline-panel { align-self: start; }
  body.tablet-mode .actions-panel {
    align-self: start;
    overflow: visible;
  }
  body.tablet-mode .journal-panel {
    display: grid;
    grid-template-rows: minmax(0,1fr);
    align-self: stretch;
    height: 100%;
    overflow: hidden;
  }
  body.tablet-mode .journal-panel .history-toolbar { display: none; }
  body.tablet-mode .journal-feed-panel {
    display: grid !important;
    grid-template-rows: auto minmax(0,1fr);
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  body.tablet-mode .journal-feed-panel .history-list {
    max-height: clamp(420px,56vh,760px);
    min-height: 0;
    overflow-y: auto;
  }
  body.tablet-mode .weather-panel {
    align-self: start;
    width: 100%;
    max-height: none;
    overflow: hidden;
    animation: none;
  }
  body.tablet-mode .weather-panel .weather-scroll,
  body.tablet-mode .weather-panel .weather-days-strip {
    overscroll-behavior-x: contain;
    overflow-x: auto;
  }
  body.tablet-mode .actions-panel .action-grid {
    grid-template-columns: repeat(3,minmax(0,1fr));
    grid-auto-rows: minmax(62px,72px);
    gap: 6px;
  }
  body.tablet-mode .actions-panel .action-card {
    min-width: 0;
    min-height: 0;
    padding: 6px 4px;
  }
  body.tablet-mode .analytics-panel {
    display: grid !important;
    grid-template-columns: minmax(0,1fr);
    align-self: start;
    width: 100%;
    min-height: 0;
    overflow: visible;
  }
  body.tablet-mode .analytics-panel .summary-row {
    grid-template-columns: repeat(4,minmax(0,1fr));
  }
  body.tablet-mode .analytics-panel .panel-grid { display: grid; }
  body.tablet-mode .analytics-panel .rhythm-strip-card {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    transform: none;
  }
}

@media (min-width: 1920px) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(300px,21%) minmax(700px,1fr) minmax(360px,25%);
  }
}

@media (min-width: 2560px) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(340px,20%) minmax(900px,1fr) minmax(420px,24%);
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  body.is-tablet .tablet-dashboard {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas:
      "timeline"
      "weather"
      "actions"
      "journal"
      "analytics";
    gap: var(--space-md);
    align-items: start;
    height: auto;
    overflow: visible;
  }
  body.is-tablet .timeline-panel,
  body.is-tablet .actions-panel,
  body.is-tablet .journal-panel,
  body.is-tablet .weather-panel,
  body.is-tablet .analytics-panel {
    position: relative;
    inset: auto;
    width: 100%;
    min-width: 0;
    transform: none;
  }
  body.is-tablet .weather-panel { animation: none; }
  body.is-tablet .actions-panel .action-grid {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 7px;
  }
  body.is-tablet .actions-panel .action-card { min-height: 86px; }
  body.is-tablet .journal-panel .history-toolbar { display: none; }
  body.is-tablet .journal-feed-panel { display: grid !important; }
  body.is-tablet .journal-feed-panel .history-list {
    max-height: min(54vh,720px);
    overflow-y: auto;
  }
  body.is-tablet .analytics-panel {
    display: grid;
    gap: var(--space-sm);
  }
}

/* Final compact landscape tablet override. */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(0,23%) minmax(0,49%) minmax(0,28%);
    gap: var(--space-sm);
  }
  body.tablet-mode .actions-panel .action-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-auto-rows: minmax(58px,68px);
  }
  body.tablet-mode .weather-panel .weather-scroll { grid-auto-columns: minmax(72px,34%); }
  body.tablet-mode .weather-panel .weather-days-strip { grid-auto-columns: minmax(138px,72%); }
  body.tablet-mode .analytics-panel .rhythm-analytics {
    grid-template-columns: minmax(190px,.8fr) minmax(300px,1.5fr) minmax(190px,.86fr);
  }
}

/* Targeted layout correction: weather left, journal center, actions right, rhythm below. */
.rhythm-panel {
  grid-area: rhythm;
  position: relative;
  inset: auto;
  min-width: 0;
  min-height: 0;
  transform: none;
}

@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(320px,24%) minmax(600px,1fr) minmax(320px,25%);
    grid-template-rows: auto minmax(0,1fr) auto;
    grid-template-areas:
      "timeline timeline timeline"
      "weather journal actions"
      "rhythm rhythm rhythm";
    gap: var(--space-md);
    align-items: start;
    height: auto;
    overflow: visible;
  }
  body.tablet-mode .rhythm-panel {
    display: grid !important;
    grid-template-columns: minmax(0,1fr);
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    overflow: visible;
    transform: none;
  }
  body.tablet-mode .rhythm-panel .panel-grid { display: grid; }
  body.tablet-mode .rhythm-panel .rhythm-strip-card {
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    transform: none;
  }
  body.tablet-mode .actions-panel {
    align-self: start;
    min-width: 0;
    overflow: visible;
  }
  body.tablet-mode .actions-panel .action-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(110px,1fr));
    grid-auto-rows: minmax(82px,auto);
    gap: 8px;
    width: 100%;
    min-width: 0;
  }
  body.tablet-mode .actions-panel .action-card,
  body.tablet-mode .actions-panel .action-card:hover,
  body.tablet-mode .actions-panel .action-card:active {
    min-width: 0;
    min-height: 82px;
    margin: 0;
    padding: 8px 6px;
    transform: none;
  }
  body.tablet-mode .actions-panel .action-card .action-icon,
  body.tablet-mode .actions-panel .action-card:hover .action-icon,
  body.tablet-mode .actions-panel .action-card:active .action-icon {
    transform: none;
  }
}

@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(0,28%) minmax(0,46%) minmax(0,26%);
    gap: var(--space-sm);
  }
  body.tablet-mode .actions-panel .action-grid {
    grid-template-columns: repeat(auto-fit,minmax(110px,1fr));
    gap: 6px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  body.is-tablet .tablet-dashboard {
    grid-template-areas:
      "timeline"
      "weather"
      "actions"
      "journal"
      "rhythm";
  }
  body.is-tablet .rhythm-panel {
    display: grid;
    grid-area: rhythm;
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 0;
    transform: none;
  }
  body.is-tablet .actions-panel .action-grid {
    grid-template-columns: repeat(auto-fit,minmax(110px,1fr));
  }
  body.is-tablet .actions-panel .action-card,
  body.is-tablet .actions-panel .action-card:hover,
  body.is-tablet .actions-panel .action-card:active {
    min-height: 92px;
    margin: 0;
    transform: none;
  }
}

/* Final exact dashboard contract. Keep this block last. */
.dashboard-grid {
  display: grid !important;
  grid-template-columns: 360px minmax(680px,1fr) 360px !important;
  grid-template-rows: auto auto minmax(0,1fr) auto !important;
  grid-template-areas:
    "header header header"
    "timeline timeline timeline"
    "weather journal actions"
    "daily-stats journal analytics" !important;
  gap: 14px !important;
  align-items: start !important;
  width: 100% !important;
  min-height: 100dvh !important;
  height: auto !important;
  overflow: visible !important;
}
.app-header { grid-area: header; }
.timeline-panel { grid-area: timeline; }
.weather-panel { grid-area: weather; }
.daily-stats-column-panel { grid-area: daily-stats; }
.journal-panel { grid-area: journal; min-height: 0; }
.actions-panel { grid-area: actions; }
.analytics-panel,
.rhythm-panel { grid-area: analytics; }

.app-header,
.timeline-panel,
.weather-panel,
.journal-panel,
.actions-panel,
.analytics-panel,
.rhythm-panel,
.rhythm-panel .rhythm-strip-card {
  position: static !important;
  inset: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}
.app-header { width: 100%; margin-bottom: 0 !important; }
.weather-panel,
.daily-stats-column-panel,
.actions-panel,
.journal-panel,
.rhythm-panel { min-width: 0; align-self: start; }
.journal-panel {
  display: grid;
  grid-template-rows: minmax(0,1fr);
  overflow: hidden;
}
.journal-panel .history-toolbar { display: none; }
.journal-panel .journal-feed-panel {
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr);
  min-height: 0;
  overflow: hidden;
}
.journal-panel .history-list {
  max-height: clamp(420px,56vh,760px);
  min-height: 0;
  overflow-y: auto;
}
.weather-panel { width: 100%; overflow: hidden; }
.daily-stats-column-panel {
  min-width: 0;
  align-self: start;
}
.daily-stats-column-panel .daily-stats-grid {
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
.daily-stats-column-panel .daily-stat-card {
  min-height: 82px !important;
}
.weather-panel .weather-scroll,
.weather-panel .weather-days-strip { overflow-x: auto; overscroll-behavior-x: contain; }
.actions-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit,minmax(105px,1fr)) !important;
  grid-auto-rows: minmax(92px,auto) !important;
  gap: 10px !important;
  width: 100%;
  min-width: 0;
}
.actions-panel .action-tile,
.actions-panel .action-tile:hover,
.actions-panel .action-tile:active {
  min-width: 0;
  min-height: 92px !important;
  margin: 0 !important;
  overflow: hidden;
  transform: none !important;
}
.actions-panel .action-tile .action-icon,
.actions-panel .action-tile:hover .action-icon,
.actions-panel .action-tile:active .action-icon { transform: none !important; }
.rhythm-panel {
  display: grid !important;
  grid-template-columns: minmax(0,1fr);
  width: 100%;
  min-height: 0;
  overflow: visible;
}
.rhythm-panel .panel-grid { display: grid; }
.rhythm-panel .rhythm-strip-card { width: 100%; min-height: 0; }
.rhythm-panel .rhythm-analytics {
  grid-template-columns: minmax(0,1fr);
  grid-template-areas: "metrics" "chart" "categories" "insights";
}
.rhythm-panel .rhythm-metrics { grid-template-columns: repeat(3,minmax(0,1fr)); }

@media (max-width: 1199px) {
  .dashboard-grid {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-rows: auto auto auto auto auto auto auto !important;
    grid-template-areas:
      "header"
      "timeline"
      "weather"
      "daily-stats"
      "actions"
      "journal"
      "analytics" !important;
  }
  .journal-panel .history-list { max-height: min(54vh,720px); }
}

@media (max-width: 560px) {
  .daily-stats-column-panel .daily-stats-grid {
    grid-template-columns: minmax(0,1fr) !important;
  }
}

/* Mobile journal cards: readable entries with always-visible touch actions. */
@media (max-width: 767px) {
  body.is-mobile .journal-panel,
  body.is-mobile .journal-feed-panel,
  body.is-mobile .journal-feed-panel .history-list {
    min-width: 0;
    width: 100%;
  }
  body.is-mobile .journal-feed-panel {
    padding: 12px !important;
    overflow: hidden;
  }
  body.is-mobile .journal-feed-panel .history-header {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 10px;
  }
  body.is-mobile .journal-feed-panel .history-actions {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    width: 100%;
  }
  body.is-mobile .journal-feed-panel .history-actions .select-wrapper {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0,1fr);
    gap: 8px;
  }
  body.is-mobile .journal-feed-panel .select-wrapper select {
    min-width: 0;
    width: 100%;
  }
  body.is-mobile .journal-feed-panel .history-list {
    display: grid;
    gap: 10px;
    max-height: none;
    padding: 10px 0 0;
    overflow: visible;
  }
  body.is-mobile .journal-feed-panel .entry-card,
  body.is-mobile .journal-feed-panel .entry-card:nth-child(3n+2),
  body.is-mobile .journal-feed-panel .entry-card:hover {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 10px;
    min-width: 0;
    padding: 12px !important;
    overflow: visible;
    transform: none;
  }
  body.is-mobile .journal-feed-panel .entry-meta {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 7px;
    min-width: 0;
  }
  body.is-mobile .journal-feed-panel .entry-label {
    justify-self: start;
    max-width: 100%;
    padding: 7px 9px;
    white-space: normal;
  }
  body.is-mobile .journal-feed-panel .entry-time {
    display: block;
    font-size: .76rem;
    line-height: 1.25;
    white-space: normal;
  }
  body.is-mobile .journal-feed-panel .entry-title {
    overflow-wrap: anywhere;
    font-size: .92rem;
    line-height: 1.42;
  }
  body.is-mobile .journal-feed-panel .entry-foot {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    width: 100%;
  }
  body.is-mobile .journal-feed-panel .action-pill {
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    border-color: rgba(255,255,255,.15);
    background: rgba(255,255,255,.065);
    color: rgba(248,252,255,.94);
    font-size: .78rem;
    font-weight: 760;
    line-height: 1;
    visibility: visible;
    opacity: 1;
  }
  body.is-mobile .journal-feed-panel .action-pill[data-action="delete"] {
    border-color: rgba(244,114,182,.24);
    background: rgba(244,114,182,.09);
    color: #ffd5e7;
  }
}

/* Tablet and desktop journal cards: keep entries separated and actions usable. */
@media (min-width: 768px) {
  .journal-panel,
  .journal-feed-panel,
  .journal-feed-panel .history-list {
    min-width: 0;
    width: 100%;
  }
  .journal-feed-panel .history-list {
    display: grid;
    align-content: start;
    gap: 10px !important;
    padding: 10px 4px 4px 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .journal-feed-panel .entry-card,
  .journal-feed-panel .entry-card:nth-child(3n+2),
  .journal-feed-panel .entry-card:hover {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 9px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 12px !important;
    overflow: visible;
    transform: none !important;
  }
  .journal-feed-panel .entry-meta {
    display: flex;
    min-width: 0;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .journal-feed-panel .entry-label {
    max-width: 100%;
    white-space: normal;
  }
  .journal-feed-panel .entry-time {
    line-height: 1.25;
    white-space: normal;
  }
  .journal-feed-panel .entry-title {
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.4;
  }
  .journal-feed-panel .entry-foot {
    display: flex !important;
    width: 100%;
    min-height: 38px;
    gap: 8px !important;
    align-items: center;
    justify-content: flex-end !important;
    flex-wrap: wrap;
    overflow: visible;
  }
  .journal-feed-panel .action-pill,
  body.tablet-mode .journal-feed-panel .action-pill {
    display: inline-flex !important;
    min-width: 76px;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px !important;
    border-color: rgba(255,255,255,.15);
    background: rgba(255,255,255,.065);
    color: rgba(248,252,255,.94);
    font-size: .76rem !important;
    font-weight: 760;
    line-height: 1;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .journal-feed-panel .action-pill[data-action="delete"],
  body.tablet-mode .journal-feed-panel .action-pill[data-action="delete"] {
    border-color: rgba(244,114,182,.24);
    background: rgba(244,114,182,.09);
    color: #ffd5e7;
  }
}

/* Scalable premium journal activity feed. */
.journal-feed-panel .journal-entry {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-template-areas:
    "main meta"
    "main actions";
  gap: clamp(6px,.55vw,10px) clamp(12px,1vw,18px) !important;
  min-width: 0;
  min-height: 0;
  padding: clamp(10px,.8vw,14px) clamp(12px,1vw,16px) !important;
  border: 1px solid color-mix(in srgb,var(--entry-accent) 20%,rgba(255,255,255,.05));
  border-left: 3px solid var(--entry-accent);
  border-radius: clamp(13px,1vw,17px);
  background:
    radial-gradient(circle at 0% 50%,color-mix(in srgb,var(--entry-accent) 12%,transparent),transparent 34%),
    linear-gradient(110deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055),0 8px 18px rgba(0,0,0,.12);
  overflow: hidden;
}
.journal-feed-panel .journal-entry:hover {
  border-color: color-mix(in srgb,var(--entry-accent) 40%,rgba(255,255,255,.08));
  background:
    radial-gradient(circle at 0% 50%,color-mix(in srgb,var(--entry-accent) 18%,transparent),transparent 38%),
    linear-gradient(110deg,rgba(255,255,255,.07),rgba(255,255,255,.024));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07),0 10px 22px rgba(0,0,0,.16),0 0 18px color-mix(in srgb,var(--entry-accent) 10%,transparent);
  transform: translateX(2px) !important;
}
.journal-entry-main {
  grid-area: main;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: clamp(11px,1vw,17px);
}
.journal-entry-icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: clamp(44px,3vw,56px);
  height: clamp(44px,3vw,56px);
  place-items: center;
  border: 1px solid color-mix(in srgb,var(--entry-accent) 42%,transparent);
  border-radius: clamp(14px,1vw,18px);
  background:
    radial-gradient(circle at 32% 18%,rgba(255,255,255,.24),transparent 44%),
    var(--entry-accent-bg);
  color: var(--entry-accent);
  font-size: clamp(1.55rem,1.75vw,2rem);
  line-height: 1;
  text-shadow: 0 0 16px currentColor;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),0 0 18px color-mix(in srgb,var(--entry-accent) 20%,transparent);
}
.journal-entry-copy {
  display: grid;
  min-width: 0;
  gap: clamp(4px,.35vw,6px);
  align-content: center;
}
.journal-feed-panel .journal-entry-title {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb,var(--entry-accent) 78%,white);
  font-size: clamp(1rem,1.05vw,1.3rem);
  font-weight: 860;
  letter-spacing: -.025em;
  line-height: 1.08;
}
.journal-feed-panel .journal-entry-details {
  min-width: 0;
  margin: 0;
  color: rgba(244,249,253,.84);
  font-size: clamp(.82rem,.76vw,1rem);
  font-weight: 620;
  line-height: 1.34;
  overflow-wrap: anywhere;
}
.journal-feed-panel .journal-entry-meta {
  grid-area: meta;
  display: flex;
  min-width: max-content;
  align-items: center;
  justify-content: flex-end;
}
.journal-feed-panel .journal-entry-meta .entry-time {
  color: rgba(220,232,241,.7);
  font-size: clamp(.7rem,.62vw,.82rem);
  font-weight: 680;
  line-height: 1.2;
  white-space: nowrap;
}
.journal-feed-panel .journal-entry-actions {
  grid-area: actions;
  display: flex !important;
  min-height: 0;
  gap: 7px !important;
  align-items: center;
  justify-content: flex-end !important;
  align-self: end;
}
.journal-feed-panel .journal-entry-actions .action-pill,
body.tablet-mode .journal-feed-panel .journal-entry-actions .action-pill {
  min-width: clamp(62px,4.7vw,76px);
  min-height: clamp(30px,2vw,34px);
  padding: 6px 10px !important;
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.052);
  color: rgba(242,248,252,.84);
  font-size: clamp(.66rem,.55vw,.74rem) !important;
  font-weight: 740;
}
.journal-feed-panel .journal-entry-actions .action-pill[data-action="delete"],
body.tablet-mode .journal-feed-panel .journal-entry-actions .action-pill[data-action="delete"] {
  border-color: rgba(244,114,182,.2);
  background: rgba(244,114,182,.075);
  color: #ffd5e7;
}

@media (max-width: 1023px) {
  .journal-feed-panel .journal-entry {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas:
      "main"
      "meta"
      "actions";
    gap: 8px !important;
  }
  .journal-feed-panel .journal-entry-meta {
    justify-content: flex-start;
  }
  .journal-feed-panel .journal-entry-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 767px) {
  body.is-mobile .journal-feed-panel .journal-entry {
    gap: 9px !important;
    padding: 11px !important;
    overflow: hidden;
  }
  body.is-mobile .journal-entry-main {
    align-items: center;
    gap: 11px;
  }
  body.is-mobile .journal-entry-icon {
    width: 46px;
    height: 46px;
    font-size: 1.58rem;
  }
  body.is-mobile .journal-feed-panel .journal-entry-title {
    font-size: 1rem;
  }
  body.is-mobile .journal-feed-panel .journal-entry-details {
    font-size: .86rem;
  }
  body.is-mobile .journal-feed-panel .journal-entry-actions {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    width: 100%;
  }
  body.is-mobile .journal-feed-panel .journal-entry-actions .action-pill {
    min-width: 0;
    min-height: 42px;
  }
}

/* Feed cards scale against the journal column, not the whole viewport. */
.journal-feed-panel {
  container-type: inline-size;
  container-name: journal-feed;
}
.journal-feed-panel .history-list {
  grid-auto-rows: max-content;
  align-content: start;
}
.journal-feed-panel .journal-entry,
.journal-feed-panel .journal-entry *,
.journal-feed-panel .journal-entry *::before,
.journal-feed-panel .journal-entry *::after {
  box-sizing: border-box;
}
.journal-feed-panel .journal-entry {
  width: 100%;
  max-width: 100%;
  isolation: isolate;
  overflow: hidden !important;
}
.journal-feed-panel .journal-entry-main,
.journal-feed-panel .journal-entry-copy,
.journal-feed-panel .journal-entry-details,
.journal-feed-panel .journal-entry-meta,
.journal-feed-panel .journal-entry-actions {
  max-width: 100%;
}
.journal-feed-panel .journal-entry-icon {
  width: clamp(38px,2.4vw,48px);
  height: clamp(38px,2.4vw,48px);
  border-radius: clamp(12px,.85vw,16px);
  font-size: clamp(1.3rem,1.45vw,1.72rem);
  overflow: hidden;
}
.journal-feed-panel .journal-entry-title {
  font-size: clamp(.92rem,.9vw,1.12rem);
}
.journal-feed-panel .journal-entry-details {
  font-size: clamp(.76rem,.68vw,.9rem);
}
.journal-feed-panel .journal-entry-actions {
  flex-wrap: wrap;
}
.journal-feed-panel .journal-entry-actions .action-pill,
body.tablet-mode .journal-feed-panel .journal-entry-actions .action-pill {
  flex: 0 1 auto;
  min-width: 58px;
  min-height: 30px;
  max-width: 100%;
}

@container journal-feed (max-width: 620px) {
  .journal-feed-panel .journal-entry {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas:
      "main"
      "meta"
      "actions";
    gap: 7px !important;
    padding: 10px !important;
  }
  .journal-feed-panel .journal-entry-main {
    gap: 10px;
  }
  .journal-feed-panel .journal-entry-meta,
  .journal-feed-panel .journal-entry-actions {
    justify-content: flex-start !important;
  }
}

@container journal-feed (max-width: 390px) {
  .journal-feed-panel .journal-entry-icon {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 1.2rem;
  }
  .journal-feed-panel .journal-entry-title {
    font-size: .9rem;
  }
  .journal-feed-panel .journal-entry-details {
    font-size: .76rem;
  }
  .journal-feed-panel .journal-entry-actions {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr));
    width: 100%;
  }
  .journal-feed-panel .journal-entry-actions .action-pill {
    min-width: 0;
    width: 100%;
  }
}

/* Right column stable contract: actions first, rhythm below, equal width. */
.right-column,
.right-column-panel {
  grid-area: right;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  align-self: start;
  container-type: inline-size;
}

/* Compact mobile-first highlights requested for quick daily checks. */
.today-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 10px;
}
.today-highlights article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--surface-soft);
}
.today-highlights small { color: var(--muted); font-size: 0.72rem; }
.today-highlights strong { overflow-wrap: anywhere; font-size: 0.82rem; line-height: 1.35; }

@media (max-width: 520px) {
  .today-highlights { grid-template-columns: 1fr; }
}
.right-column > .actions-panel,
.right-column > .rhythm-panel,
.right-column-panel > .actions-panel,
.right-column-panel > .rhythm-panel {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  position: static;
  inset: auto;
  transform: none;
}
.right-column > .actions-panel,
.right-column-panel > .actions-panel { order: 1; }
.right-column > .rhythm-panel,
.right-column-panel > .rhythm-panel {
  order: 2;
  overflow: visible;
}
.right-column .actions-grid,
.right-column-panel .actions-grid {
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: var(--space-sm) !important;
  width: 100%;
  min-width: 0;
}
.right-column .rhythm-panel .panel-grid,
.right-column-panel .rhythm-panel .panel-grid {
  display: grid !important;
  grid-template-columns: minmax(0,1fr);
  width: 100%;
  min-width: 0;
}
.right-column .rhythm-panel .rhythm-strip-card,
.right-column-panel .rhythm-panel .rhythm-strip-card {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
}
@container (max-width: 330px) {
  .right-column .actions-grid,
  .right-column-panel .actions-grid {
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }
}

/* Tablet mode on PC: keep a dedicated right column with consistent alignment. */
@media (min-width: 1024px) {
  body.tablet-mode .dashboard-grid,
  body.tablet-mode .tablet-dashboard {
    grid-template-columns: minmax(220px,24%) minmax(360px,1fr) minmax(280px,30%) !important;
    grid-template-rows: auto auto minmax(0,1fr) auto !important;
    grid-template-areas:
      "header header header"
      "timeline timeline timeline"
      "weather journal right"
      "daily-stats journal right" !important;
    gap: 14px !important;
    align-items: start !important;
    height: auto !important;
    overflow: visible !important;
  }
  body.tablet-mode .right-column,
  body.tablet-mode .right-column-panel {
    grid-area: right !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-md) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    align-self: start !important;
  }
  body.tablet-mode .right-column > .actions-panel,
  body.tablet-mode .right-column > .rhythm-panel,
  body.tablet-mode .right-column-panel > .actions-panel,
  body.tablet-mode .right-column-panel > .rhythm-panel {
    display: block !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
  }
  body.tablet-mode .right-column > .actions-panel,
  body.tablet-mode .right-column-panel > .actions-panel { order: 1; }
  body.tablet-mode .right-column > .rhythm-panel,
  body.tablet-mode .right-column-panel > .rhythm-panel {
    order: 2;
  }
  body.tablet-mode .right-column-panel > .rhythm-panel.summary-panel {
    display: block !important;
    grid-area: auto !important;
    gap: 0 !important;
    overflow: visible !important;
  }
  body.tablet-mode .right-column .actions-grid,
  body.tablet-mode .right-column-panel .actions-grid {
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
  body.tablet-mode .right-column .rhythm-panel .panel-grid,
  body.tablet-mode .right-column-panel .rhythm-panel .panel-grid {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
  body.tablet-mode .right-column .rhythm-panel .rhythm-strip-card,
  body.tablet-mode .right-column-panel .rhythm-panel .rhythm-strip-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    margin: 0 !important;
  }
  body.tablet-mode .right-column .rhythm-panel .rhythm-analytics,
body.tablet-mode .right-column-panel .rhythm-panel .rhythm-analytics {
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-areas: "metrics" "chart" "categories" "insights" !important;
  }
}

/* Export modal: isolated from the dashboard layout. */
.export-modal { backdrop-filter: blur(16px); }
.export-modal-card {
  width: min(920px, calc(100vw - 32px));
  max-height: min(92dvh, 860px);
  overflow-y: auto;
  border: 1px solid rgba(147,112,255,.26);
  background: linear-gradient(145deg,rgba(36,38,50,.98),rgba(20,22,31,.98));
  box-shadow: 0 32px 100px rgba(0,0,0,.55),0 0 36px rgba(147,112,255,.1);
}
.export-grid {
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  gap: 16px;
}
.export-section {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
}
.export-section h4 { margin: 0; color: #fff; font-size: 1rem; }
.export-checkbox-group { display: grid; gap: 8px; }
.export-checkbox-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
  color: rgba(246,247,251,.9);
  cursor: pointer;
}
.export-checkbox-group input {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
  accent-color: var(--purple);
}
.export-select-all {
  border-color: rgba(113,217,197,.25) !important;
  background: rgba(113,217,197,.08) !important;
  font-weight: 800;
}
.export-date-range {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
}
.export-date-range[hidden] { display: none; }
.export-date-range label { margin: 0; }
.export-date-range input { margin-top: 6px; color-scheme: dark; }
.export-actions { gap: 10px; padding-top: 10px; }

@media (max-width: 767px) {
  .export-modal { padding: 12px; }
  .export-modal-card {
    width: 100%;
    max-height: 94dvh;
    padding: 16px;
    border-radius: 18px;
  }
  .export-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .export-section { padding: 12px; }
  .export-date-range { grid-template-columns: minmax(0,1fr); }
  .export-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  .export-actions .button { width: 100%; }
}

/* Final phone override: horizontal timeline with the newest item on the right. */
@media (max-width: 767px) {
  body.is-mobile .timeline,
  body.is-mobile .timeline-wide {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  body.is-mobile .timeline-item,
  body.is-mobile .timeline-wide .timeline-item {
    flex: 0 0 96px !important;
    min-width: 96px !important;
  }
}

/* Weather readability: larger typography and metric cards only. */
.weather-premium-card .weather-main-temp {
  font-size: clamp(42px, 4vw, 72px) !important;
  letter-spacing: .04em !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

.weather-premium-card .weather-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(8px, .8vw, 12px) !important;
}

.weather-premium-card .weather-metric-card {
  display: grid !important;
  min-width: 0 !important;
  min-height: 74px !important;
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-areas:
    "icon label"
    "icon value" !important;
  align-items: center !important;
  column-gap: clamp(6px, .55vw, 10px) !important;
  row-gap: 3px !important;
  padding: clamp(8px, .7vw, 12px) !important;
  border-radius: 16px !important;
}

.weather-premium-card .weather-value {
  grid-area: value !important;
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: clamp(16px, 1.15vw, 23px) !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.weather-premium-card .weather-label {
  grid-area: label !important;
  min-width: 0 !important;
  overflow: hidden !important;
  font-size: clamp(11px, .72vw, 14px) !important;
  opacity: .75;
  line-height: 1.2 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.weather-premium-card .metric-icon {
  grid-area: icon !important;
  font-size: clamp(18px, 1.15vw, 24px) !important;
  line-height: 1 !important;
}

@media (min-width: 768px) and (max-width: 1365px) {
  body.tablet-mode .weather-premium-card .weather-main-temp {
    font-size: clamp(48px, 6vw, 68px) !important;
  }

  body.tablet-mode .weather-premium-card .weather-metric-card {
    min-height: 72px !important;
    padding: 8px !important;
  }

  body.tablet-mode .weather-premium-card .weather-value {
    font-size: clamp(15px, 1.45vw, 21px) !important;
  }

  body.tablet-mode .weather-premium-card .weather-label {
    font-size: clamp(10px, 1vw, 13px) !important;
  }

  body.tablet-mode .weather-premium-card .metric-icon {
    font-size: clamp(17px, 1.6vw, 23px) !important;
  }
}

@media (max-width: 767px) {
  body.is-mobile .weather-premium-card .weather-main-temp {
    font-size: clamp(42px, 14vw, 60px) !important;
  }

  body.is-mobile .weather-premium-card .weather-metric-card {
    min-height: 68px !important;
    padding: 8px !important;
    column-gap: 6px !important;
    row-gap: 2px !important;
  }

  body.is-mobile .weather-premium-card .weather-value {
    font-size: clamp(16px, 4.5vw, 20px) !important;
  }

  body.is-mobile .weather-premium-card .weather-label {
    font-size: clamp(10px, 3vw, 13px) !important;
  }

  body.is-mobile .weather-premium-card .metric-icon {
    font-size: clamp(16px, 4.5vw, 21px) !important;
  }
}