/* Android Brand.kt paperWash / wingArcs / RainbowRibbon: same palette and restrained decorative layers. */
main#main { position: relative; isolation: isolate; background:
  linear-gradient(to bottom, transparent, var(--surface) 280px),
  linear-gradient(115deg, var(--paper-wash-first), var(--paper-wash-second)) top / 100% 280px no-repeat,
  var(--surface); }
main#main::before { content: ''; position: absolute; z-index: -1; pointer-events: none; right: 0; top: calc(var(--bar-h) + env(safe-area-inset-top)); width: 264px; height: 264px; opacity: var(--wing-alpha);
  background: radial-gradient(circle at 100% 0, transparent 112px, var(--wing-0) 113px 118px, transparent 119px 130px, var(--wing-1) 131px 136px, transparent 137px 148px, var(--wing-2) 149px 154px, transparent 155px 166px, var(--wing-3) 167px 172px, transparent 173px 184px, var(--wing-4) 185px 190px, transparent 191px 202px, var(--wing-5) 203px 208px, transparent 209px 220px, var(--wing-6) 221px 226px, transparent 227px); }
.page-head .page-title::after { content: ''; display: block; width: 28px; height: 4px; border-radius: 2px; background: var(--rainbow-wing); margin-top: 10px; }
.card { box-shadow: 0 1px 0 color-mix(in srgb, var(--outline-var) 70%, transparent), 0 10px 26px -24px var(--on-ter); }
.card-title { display: flex; align-items: center; gap: 8px; }
.card-title::before { content: ''; width: 4px; height: 14px; flex: none; border-radius: 2px; background: linear-gradient(var(--accent), var(--brand)); }
.btn, .chip, .nav-item { transition: background-color 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
.btn:not(:disabled):active, .chip:not(:disabled):active { transform: scale(.97); }
.chip.on { background: var(--brand-container); color: var(--on-brand-container); }
.native-today-group .row { background: var(--surface); box-shadow: 0 6px 18px -18px var(--on-ter); }
@media (hover: hover) {
  .btn:not(:disabled):hover { box-shadow: 0 3px 12px -10px var(--on); }
  a.card:hover { box-shadow: 0 3px 18px -12px var(--accent); }
}
@media (prefers-reduced-motion: no-preference) {
  .page { animation: paper-arrive 220ms ease-out both; }
  @keyframes paper-arrive { from { opacity: .55; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 899px) {
  main#main::before { transform: scale(.65); transform-origin: top right; }
  .bottom-item { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; }
  .bottom-item.on { color: var(--on-brand-container); }
  .bottom-item.on::before { position: absolute; z-index: -1; content: ''; width: min(76px, 90%); height: 36px; border-radius: var(--r-full); background: var(--brand-container); margin: 0; }
}
@media (prefers-reduced-transparency: reduce) { main#main { background: var(--surface); } main#main::before { display: none; } }
@media (forced-colors: active) {
  main#main { background: Canvas; } main#main::before, .page-head .page-title::after, .card-title::before { display: none; }
  .card, .native-today-group .row { box-shadow: none; border: 1px solid CanvasText; }
  .bottom-item.on { outline: 2px solid Highlight; outline-offset: -4px; } .bottom-item.on::before { display: none; }
}
/* Today keeps the original rounded mascot banner and small rainbow signature. */
.native-today { max-width: 880px; margin-inline: auto; }
.native-page-title { font-size: 28px; line-height: 36px; font-weight: 600; margin-bottom: 4px; }
.native-ribbon { width: 28px; height: 3px; border-radius: 2px; background: var(--rainbow-wing); margin-bottom: 24px; }
.native-mascot-banner { --dept-accent: var(--accent); --dept-wash: var(--accent-container); position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 12px; padding: 20px 16px 20px 20px; min-height: 134px; border-radius: var(--r-feature); border-left: 4px solid var(--dept-accent); background: linear-gradient(115deg, var(--dept-wash), var(--sc-low)); margin-bottom: 16px; }
.native-banner-copy { flex: 1; min-width: 0; z-index: 1; }
.native-greeting { font-size: 14px; line-height: 22px; font-weight: 500; color: var(--on-var); margin-bottom: 6px; overflow-wrap: anywhere; }
.native-headline { font-size: clamp(23px, 4.8vw, 30px); line-height: 1.3; font-weight: 650; letter-spacing: -.03em; overflow-wrap: anywhere; }
.native-role { font-size: 13px; line-height: 20px; color: var(--on-var); margin-top: 8px; }
.native-banner-art { width: 76px; height: 84px; object-fit: contain; flex: none; z-index: 1; }
.native-wing-arc { position: absolute; z-index: -1; pointer-events: none; right: -95px; bottom: -145px; width: 230px; height: 230px; border-radius: 50%; border: 4px solid var(--wing-0); box-shadow: 0 0 0 7px var(--wing-1), 0 0 0 14px var(--wing-2), 0 0 0 21px var(--wing-3), 0 0 0 28px var(--wing-4), 0 0 0 35px var(--wing-5), 0 0 0 42px var(--wing-6); opacity: var(--wing-alpha); }
.native-today .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 8px; margin-bottom: 24px; }
.native-today .chip { flex: none; min-height: 40px; font-size: 14px; }
.native-today .chip.on { background: var(--brand-container); color: var(--on-brand-container); }
.native-today-group { margin-bottom: 28px; }
.native-today-group > h2 { position: relative; display: flex; align-items: center; gap: 8px; font-size: 19px; line-height: 28px; font-weight: 600; margin-bottom: 10px; }
.native-today-group > h2::before { content: ''; flex: none; width: 4px; height: 18px; border-radius: 2px; background: linear-gradient(var(--accent), var(--brand)); }
.native-today-group .row { flex-wrap: wrap; gap: 10px 14px; padding: 16px; border: 1px solid var(--outline-var); border-radius: var(--r-card-large); margin-bottom: 10px; }
.native-today-group .row-main { flex-basis: 210px; }
.native-today-group .row-side { max-width: 100%; align-items: flex-start; }
.native-today-group .row-title { font-size: 16px; line-height: 24px; font-weight: 600; margin-top: 2px; }
.native-today-group[data-group=confirm] .row { background: var(--sc-low); border-color: transparent; }
.native-today-group .btn { min-height: 44px; }
@media (max-width: 480px) {
  .native-today .native-mascot-banner { padding: 16px; }
  .native-banner-art { width: 66px; height: 80px; }
  .native-today-group .row-side { width: 100%; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: space-between; }
  .native-today-group .row-actions { flex-wrap: wrap; }
}
@media (forced-colors: active) { .native-mascot-banner { border: 1px solid CanvasText; } .native-ribbon, .native-wing-arc { display: none; } }