/* The app layout uses the existing theme palette and the original workflow markup. */
.app-shell { --rail-width:224px; --card-radius:8px; --control-radius:6px; font-size:14px; }
.app-rail { position:fixed; inset:0 auto 0 0; width:var(--rail-width); padding:30px 18px 18px; border-right:1px solid var(--line); background:color-mix(in srgb,var(--card) 35%,var(--paper)); display:flex; flex-direction:column; overflow-y:auto; z-index:20; }
.app-rail>.brand { margin:0 13px 25px; }
.app-shell .rail-nav { display:grid; gap:3px; flex:none; align-items:stretch; }
.app-shell .rail-nav a { display:flex; align-items:center; gap:12px; min-height:44px; padding:9px 13px; border-radius:6px; color:var(--muted); font-size:13px; }
.app-shell .rail-nav a:hover { background:var(--brand-soft); color:var(--ink); }
.app-shell nav a[aria-current="page"] { color:var(--brand); background:var(--brand-soft); font-weight:650; text-decoration:none; }
.nav-icon { width:19px; height:19px; flex-shrink:0; }
.secondary-nav { margin-top:22px; border-top:1px solid var(--line); padding-top:18px; }
.settings-nav { margin-top:auto; padding-top:24px; }
.rail-account { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--line); margin:15px 13px 0; padding-top:10px; font-size:12px; color:var(--muted); overflow-wrap:anywhere; }
.rail-account .link-button { color:var(--muted); font-size:12px; min-height:44px; }
.app-shell>.container { width:auto; max-width:1300px; margin:0 0 0 var(--rail-width); padding:46px clamp(24px,4vw,52px) 70px; }
.app-shell .page-head { margin-bottom:30px; align-items:center; }
.app-shell .page-head h1 { font-family:var(--font-body); font-size:34px; font-weight:550; letter-spacing:-.04em; line-height:1.15; }
.app-shell .page-head p { margin:9px 0 0; }
.app-shell .live-clock { font-size:13px; line-height:1.5; }
.app-shell .section-head h2 { font-family:var(--font-body); font-size:17px; font-weight:600; letter-spacing:-.02em; margin:0; }
.app-shell .section-head a { font-size:12px; display:inline-flex; align-items:center; min-height:44px; }
.app-shell .card { box-shadow:none; padding:18px 20px; }
.app-shell .card h2 { font-size:17px; font-weight:600; }
.app-shell .card h3 { font-size:15px; font-weight:600; margin:0; }
.app-shell .card-list { gap:10px; }
.app-shell .card-list>.card:hover { border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); }
.app-shell .quick-grid { gap:12px; margin-bottom:30px; }
.app-shell .quick strong { font-size:14px; font-weight:600; }
.app-shell .quick span { font-size:11px; }
.app-shell .two-col { gap:28px; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.app-shell .two-col>section { min-width:0; }
.app-shell .button { font-size:13px; }
.app-shell .badge { text-transform:none; letter-spacing:0; font-weight:550; font-size:11px; }
.app-shell .tabs { border-bottom:1px solid var(--line); gap:18px; margin:0 0 22px; padding:0; }
.app-shell .tabs a { border-radius:0; border-bottom:2px solid transparent; padding:10px 0; min-height:44px; }
.app-shell .tabs a.active { background:transparent; color:var(--brand); border-bottom-color:var(--brand); }
.app-shell .task-group { font-size:13px; color:var(--muted); font-weight:600; margin:14px 0 0; }
.app-shell .check { border-radius:50%; }
.app-shell .task-title { line-height:1.6; }
.dashboard-journal { margin-top:32px; border-top:1px solid var(--line); padding-top:22px; }
.app-shell .theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.app-shell .settings-heading { margin-top:30px; }
.app-shell .actions { flex-wrap:wrap; }
.app-shell .card>.actions { justify-content:flex-start; }
.app-shell textarea, .app-shell pre { max-width:100%; }
.mobile-header,.mobile-tabs { display:none; }
@media(min-width:1524px) { .app-shell>.container { margin-right:auto; } }
@media(max-width:1050px) and (min-width:761px) {
  .app-shell { --rail-width:196px; }
  .app-shell>.container { padding:34px 24px 60px; }
  .app-shell .two-col { grid-template-columns:1fr; }
  .app-shell .theme-grid { grid-template-columns:1fr; }
}
@media(max-width:760px) {
  .app-rail { display:none; }
  .mobile-header { display:flex; position:sticky; top:0; align-items:center; justify-content:space-between; gap:20px; padding:8px 18px; background:var(--paper); border-bottom:1px solid var(--line); z-index:30; }
  .mobile-menu summary { cursor:pointer; display:flex; align-items:center; min-width:44px; min-height:44px; color:var(--ink); }
  .mobile-menu summary::after { content:'⌄'; margin-left:8px; }
  .mobile-menu-panel { position:absolute; top:100%; left:0; right:0; max-height:calc(100dvh - 130px); overflow-y:auto; background:var(--card); border-bottom:1px solid var(--line); padding:14px 18px; box-shadow:var(--shadow); }
  .mobile-menu-panel .secondary-nav { margin-top:12px; padding-top:12px; }
  .mobile-menu-panel .settings-nav { padding-top:8px; }
  .mobile-menu-panel .logout-form { margin:6px 13px; }
  .mobile-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; position:fixed; bottom:0; left:0; right:0; z-index:20; background:var(--card); border-top:1px solid var(--line); padding:6px 8px calc(6px + env(safe-area-inset-bottom)); }
  .mobile-tabs a { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; min-height:48px; border-radius:6px; font-size:10px; color:var(--muted); }
  .mobile-tabs .nav-icon { width:18px; height:18px; }
  .app-shell>.container { margin:0; width:100%; padding:26px 18px calc(90px + env(safe-area-inset-bottom)); }
  .app-shell .page-head { margin-bottom:22px; gap:14px; }
  .app-shell .page-head h1 { font-size:29px; }
  .app-shell .quick-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-bottom:24px; }
  .app-shell .quick { padding:12px 10px; }
  .app-shell .quick strong { font-size:12px; }
  .app-shell .quick span { font-size:10px; }
  .app-shell .two-col { grid-template-columns:1fr; gap:24px; }
  .app-shell .card { padding:15px; }
  .app-shell .theme-grid { grid-template-columns:1fr; }
  .app-shell .filters { grid-template-columns:1fr; }
  .app-shell .form-card .form-actions { bottom:68px; }
}