/* AniMeory — compact Material 3 Expressive interpretation. */
:root {
  color-scheme: dark;
  --bg-main: var(--md-sys-color-background);
  --bg-card: #26262e;
  --bg-card-hover: #2f2f39;
  --bg-input: #24242c;
  --accent-purple: var(--md-sys-color-primary);
  --accent-purple-hover: #c8baf5;
  --text-on-accent: var(--md-sys-color-on-primary);
  --text-main: var(--md-sys-color-on-surface);
  --text-secondary: #9ca3af;
  --text-muted: var(--md-sys-color-on-surface-variant);
  --border-subtle: rgba(255,255,255,.08);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --content-max: 1440px;
  --md-surface: var(--md-sys-color-surface-container-low);
  --md-surface-container: var(--md-sys-color-surface-container);
  --md-surface-high: var(--md-sys-color-surface-container-high);
  --md-primary: var(--md-sys-color-primary);
  --md-on-primary: var(--md-sys-color-on-primary);
  --md-primary-container: var(--md-sys-color-primary-container);
  --md-outline: #ffffff18;
  --md-shape-small: 12px;
  --md-shape-medium: 16px;
  --md-shape-large: 24px;
  --md-shape-extra-large: 28px;
  /* Official Material role names; custom AStrea values preserve approved colours. */
  --md-sys-color-background: #141414;
  --md-sys-color-surface: #141414;
  --md-sys-color-surface-container-low: #1b1b1f;
  --md-sys-color-surface-container: #24242c;
  --md-sys-color-surface-container-high: #26262e;
  --md-sys-color-on-surface: #f3f4f6;
  --md-sys-color-on-surface-variant: #a3a3b0;
  --md-sys-color-primary: #B8A7F0;
  --md-sys-color-on-primary: #1E1E24;
  --md-sys-color-primary-container: #302b40;
  --md-sys-color-on-primary-container: #ddd1fa;
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #49454f;
  --md-sys-color-error: #e63946;
  --md-ref-typeface-brand: 'Roboto','Segoe UI',sans-serif;
  --md-ref-typeface-plain: 'Roboto','Segoe UI',sans-serif;
  /* Compact product overrides; not the stock mobile typescale. */
  --md-sys-typescale-title-medium-size: 18px;
  --md-sys-typescale-title-medium-weight: 700;
  --md-sys-typescale-headline-medium-size: 26px;
  --md-sys-typescale-headline-medium-weight: 700;
  --md-sys-typescale-body-medium-size: 14px;
  --md-sys-typescale-label-large-size: 13px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-spatial-fast-duration: 260ms;
  --md-spatial-default-duration: 360ms;
  --md-effects-fast-duration: 180ms;
  --md-effects-default-duration: 260ms;
  --md-spatial-fast: cubic-bezier(.2,.8,.2,1);
  --md-spatial-default: cubic-bezier(.2,.8,.2,1);
  --md-effects-fast: cubic-bezier(.2,0,0,1);
  --md-effects-default: cubic-bezier(.2,0,0,1);
  --md-motion: var(--md-spatial-fast);
}
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-padding-top: 100px; scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y:scroll; } }
body.astrea-body { background: var(--bg-main); color: var(--text-main); font-family: var(--md-ref-typeface-plain); line-height: 1.5; min-height: 100vh; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button,input,textarea { font: inherit; }
button,a { -webkit-tap-highlight-color: #B8A7F020; touch-action: manipulation; }
button { cursor: pointer; }
:where(button[data-navigate]) { appearance:none; background:none; border:0; padding:0; color:inherit; text-align:left; }
button:disabled { opacity: .35; cursor: default; }
:focus-visible { outline: 2px solid var(--accent-purple); outline-offset: 4px; }
h1,h2,h3 { text-wrap: balance; }
.ui-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:300; left:20px; top:12px; padding:10px 16px; background:var(--accent-purple); color:var(--text-on-accent); border-radius:8px; transform:translateY(-150%); }
.skip-link:focus { transform:translateY(0); }
.astrea-header { position:sticky; top:0; z-index:100; padding:10px 0; background:var(--bg-main); border:0; }
.header-container { width:calc(100% - 32px); max-width:calc(var(--content-max) - 56px); min-height:64px; margin:auto; padding:8px 16px; display:flex; align-items:center; gap:16px; border-radius:28px; background:var(--md-surface); }
.header-left { display:flex; align-items:center; gap:22px; flex-shrink:0; }
.logo { font-size:20px; font-weight:800; letter-spacing:-1px; text-decoration:none; padding:0 4px; }
.logo-accent { color:var(--accent-purple); }
.nav-links { display:flex; align-items:center; gap:4px; }
.nav-item { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:8px 12px; border-radius:20px; color:var(--text-secondary); font-size:12px; font-weight:600; text-decoration:none; white-space:nowrap; transition:background-color var(--md-effects-fast-duration) var(--md-effects-fast),color var(--md-effects-fast-duration) var(--md-effects-fast),border-radius var(--md-spatial-fast-duration) var(--md-spatial-fast); }
.nav-item:hover { color:var(--text-main); background:#ffffff05; }
.nav-item.active { color:var(--md-on-primary); background:var(--md-primary); }
.header-center { flex:1; min-width:120px; max-width:300px; margin-left:auto; }
.search-wrapper { display:flex; align-items:center; position:relative; }
.search-wrapper > .ui-icon { position:absolute; left:12px; width:16px; height:16px; color:var(--text-secondary); pointer-events:none; }
.search-input { width:100%; height:40px; padding:0 16px 0 38px; font-size:12px; color:var(--text-main); background:var(--bg-input); border:1px solid transparent; border-radius:22px; min-width:0; transition:border-color var(--md-effects-fast-duration) var(--md-effects-fast),background-color var(--md-effects-fast-duration) var(--md-effects-fast); }
.search-input::placeholder { color:var(--text-muted); }

.header-right { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.btn-publish { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 16px; font-size:12px; font-weight:600; color:var(--text-on-accent); background:var(--accent-purple); border:0; border-radius:20px; transition:border-radius var(--md-spatial-fast-duration) var(--md-spatial-fast),background-color var(--md-effects-fast-duration) var(--md-effects-fast); }
.btn-publish .ui-icon { width:16px; height:16px; }
.btn-publish:hover { background:var(--accent-purple-hover); }
.btn-icon { position:relative; display:grid; place-items:center; width:40px; height:40px; color:var(--accent-purple); border:0; background:var(--md-primary-container); border-radius:50%; transition:border-radius var(--md-spatial-fast-duration) var(--md-spatial-fast),background-color var(--md-effects-fast-duration) var(--md-effects-fast); }
.btn-icon:hover { background:#B8A7F030; color:var(--accent-purple); }
.notification-badge { position:absolute; top:7px; right:7px; width:5px; height:5px; border-radius:50%; background:var(--accent-purple); box-shadow:0 0 0 2px var(--md-surface); }
.avatar-img { width:32px; height:32px; border-radius:50%; object-fit:cover; background:var(--bg-card); }
.main-content { width:100%; max-width:var(--content-max); margin:auto; padding:24px 28px 64px; }
.main-content > section + section { margin-top:36px; }
.section-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.section-title { font-size:var(--md-sys-typescale-title-medium-size); line-height:1.3; font-weight:var(--md-sys-typescale-title-medium-weight); letter-spacing:-.3px; }
.section-description { margin-top:4px; color:var(--text-secondary); font-size:12px; }
.slider-controls-top,.section-actions { display:flex; align-items:center; gap:20px; }
.view-all-link { display:inline-flex; align-items:center; min-height:36px; padding:6px 12px; border-radius:18px; font-size:12px; font-weight:500; color:var(--accent-purple); text-decoration:none; white-space:nowrap; transition:background-color var(--md-effects-fast-duration) var(--md-effects-fast); }
.view-all-link:hover { color:var(--accent-purple); background:var(--md-primary-container); }
.shelf-controls { display:flex; gap:3px; }
.shelf-controls button { display:grid; place-items:center; width:36px; height:36px; border:0; border-radius:10px; background:var(--md-surface-high); color:var(--accent-purple); transition:border-radius var(--md-spatial-fast-duration) var(--md-spatial-fast),background-color var(--md-effects-fast-duration) var(--md-effects-fast); }
.shelf-controls button:hover:not(:disabled) { background:var(--md-primary-container); color:var(--accent-purple); }
.shelf-controls .ui-icon { width:16px; height:16px; }
.slider-viewport { position:relative; min-width:0; }
.shelf-track { display:flex; width:100%; gap:12px; overflow-x:auto; scrollbar-width:none; padding:3px 2px 6px; scroll-snap-type:x proximity; overscroll-behavior-x:contain; }
.slider-track { gap:14px; }
.shelf-track::-webkit-scrollbar { display:none; }
.shelf-track:focus-visible { outline-offset:3px; border-radius:10px; }
.shelf-track.is-dragging { cursor:grabbing; user-select:none; scroll-snap-type:none; }
.news-card,.art-card,.manga-card { position:relative; flex-shrink:0; border:1px solid #ffffff08; overflow:hidden; background:var(--bg-card); scroll-snap-align:start; transition:border-color var(--md-effects-fast-duration) var(--md-effects-fast); }
.news-card:hover,.art-card:hover,.manga-card:hover { border-color:#B8A7F055; }
.news-card { flex-basis:calc((100% - 56px)/4.8); min-width:240px; height:220px; border-radius:24px; }
.news-cover,.art-cover,.art-collage { position:absolute; inset:0; }
.media-frame { background:var(--bg-card); overflow:hidden; }
.media-frame img { display:block; width:100%; height:100%; object-fit:cover; }
.media-frame.media-unavailable { background:repeating-linear-gradient(135deg,transparent 0 20px,#B8A7F005 20px 21px); }
.media-fallback { position:absolute; inset:0; display:grid; place-items:center; padding:12px; color:var(--text-secondary); font-size:11px; text-align:center; }
.news-badge { position:absolute; top:12px; left:12px; z-index:3; font-size:10px; font-weight:500; background:#141414c9; color:var(--text-main); border:0; border-radius:12px; padding:4px 9px; }
.news-info { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; background:linear-gradient(180deg,transparent 20%,#14141422 40%,#141414de 76%,#141414 100%); }
.news-title { font-size:13px; font-weight:550; line-height:1.4; margin-bottom:10px; min-height:36px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:11px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.art-card { flex-basis:calc((100% - 72px)/7); min-width:155px; height:175px; border-radius:20px; }
.art-collage { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; }
.collage-item { position:relative; min-width:0; min-height:0; }
.art-tag-badge { position:absolute; z-index:3; top:8px; left:8px; padding:3px 7px; border-radius:10px; background:#e63946; color:white; font-size:10px; font-weight:650; }
.art-tag-badge.badge-neutral { background:#141414bb; border:1px solid #ffffff15; }
.art-meta-bar { position:absolute; z-index:2; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:4px; padding:28px 9px 9px; background:linear-gradient(transparent,#141414e0); font-size:10.5px; color:var(--text-main); font-variant-numeric:tabular-nums; }
.art-rating,.art-stat-item { display:inline-flex; align-items:center; gap:4px; }
.art-rating { color:#fbbf24; }
.art-rating .ui-icon { width:11px; height:11px; fill:currentColor; stroke:none; }
.art-stat-item .ui-icon { width:12px; height:12px; }
.art-stat-group { display:flex; gap:7px; }
.manga-card { flex-basis:calc((100% - 96px)/9); min-width:115px; height:175px; border-radius:16px; }
.manga-cover { width:100%; height:100%; position:relative; }
.site-toast { position:fixed; z-index:250; bottom:24px; left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); padding:14px 20px; border:1px solid #B8A7F030; background:var(--md-surface-high); color:var(--text-main); border-radius:20px; box-shadow:0 8px 24px #0005; font-size:13px; }
.profile-disclosure { position: relative; }
.user-profile { display:flex; align-items:center; gap:6px; min-height:44px; padding:4px 6px; background:transparent; border:0; color:var(--text-secondary); border-radius:22px; transition:background-color var(--md-effects-fast-duration) var(--md-effects-fast),border-radius var(--md-spatial-fast-duration) var(--md-spatial-fast); }
.user-profile svg { transition: transform var(--md-spatial-fast-duration) var(--md-spatial-fast); }
.user-profile[aria-expanded="true"] svg { transform: rotate(180deg); }
.profile-dropdown { position:absolute; top:calc(100% + 12px); right:0; width:264px; padding:8px; border:1px solid var(--border-subtle); border-radius:24px; background:var(--md-surface-high); box-shadow:0 12px 40px #0006; transform-origin:top right; animation:menu-spatial var(--md-spatial-default-duration) var(--md-spatial-default) both, menu-effects var(--md-effects-default-duration) var(--md-effects-default) both; }
.dropdown-identity { display:flex; gap:12px; align-items:center; padding:12px 12px 16px; margin-bottom:6px; border-bottom:1px solid var(--border-subtle); }
.dropdown-identity strong { display: block; font-size: 14px; }
.dropdown-identity span:not(.mini-avatar) { display: block; font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.mini-avatar { width:40px; height:40px; display:grid; place-items:center; border-radius:14px; background:var(--accent-purple); color:var(--text-on-accent); font-weight:600; }
.profile-dropdown :is(a,button[data-navigate]) { display:flex; align-items:center; justify-content:flex-start; gap:12px; min-height:44px; padding:10px 14px; border-radius:16px; color:var(--text-main); text-decoration:none; font-size:13px; }
.profile-dropdown :is(a,button[data-navigate]):hover, .profile-dropdown :is(a,button[data-navigate]):focus-visible { background: #B8A7F010; color: var(--text-main); }
.profile-breadcrumb { display: flex; gap: 12px; margin: 0 0 20px; font-size: 12px; color: var(--text-secondary); }
.profile-breadcrumb :is(a,button[data-navigate]) { color: inherit; text-decoration: none; }
.profile-breadcrumb :is(a,button[data-navigate]):hover { color: var(--accent-purple); }
.profile-shell { border:0; border-radius:28px; overflow:hidden; background:var(--md-surface); }
.profile-cover { height:156px; padding:24px 28px; display:flex; justify-content:space-between; align-items:flex-start; background:linear-gradient(115deg,#292432,#24212d 65%,#393044); position:relative; overflow:hidden; }
.profile-cover::after { content:""; position:absolute; right:8%; top:18px; width:170px; height:170px; border:0; border-radius:45% 35% 48% 32%; background:#B8A7F018; transform:rotate(-24deg); box-shadow:36px 18px 0 #B8A7F00b; }
.cover-caption { font-size:18px; font-weight:650; line-height:1.35; letter-spacing:-.25px; color:#d1c5ee; max-width:240px; }
.prototype-label { font-size:10px; color:#d1c5ee; padding:5px 10px; border:1px solid #B8A7F025; border-radius:16px; z-index:1; background:#14141420; }
.profile-overview { display:flex; gap:20px; align-items:center; padding:0 28px 20px; position:relative; }
.profile-avatar { flex-shrink:0; margin-top:-28px; width:96px; height:96px; display:grid; place-items:center; font-size:36px; font-weight:650; border-radius:30px; background:var(--accent-purple); color:var(--text-on-accent); border:5px solid var(--md-surface); }
.profile-identity { padding-top: 20px; min-width: 0; }
.profile-handle { font-size: 12px; color: var(--text-secondary); }
.profile-identity h1 { font-size:var(--md-sys-typescale-headline-medium-size); line-height:1.3; font-weight:750; letter-spacing:-.6px; margin:4px 0 8px; overflow-wrap:anywhere; }
.profile-identity > p:last-child { font-size: 14px; color: #b1adb9; max-width: 560px; overflow-wrap: anywhere; }
.secondary-button, .primary-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:40px; padding:10px 18px; border-radius:22px; font-size:var(--md-sys-typescale-label-large-size); font-weight:600; cursor:pointer; transition:border-radius var(--md-spatial-fast-duration) var(--md-spatial-fast),background-color var(--md-effects-fast-duration) var(--md-effects-fast); }
.secondary-button { background:var(--md-primary-container); border:0; color:var(--md-sys-color-on-primary-container); }
.secondary-button:hover { background:#B8A7F030; }
.primary-button { background:var(--accent-purple); color:var(--text-on-accent); border:0; }
.primary-button:hover { background: var(--accent-purple-hover); }
.profile-edit { margin-left: auto; flex-shrink: 0; }
.profile-stats { display:flex; gap:6px; padding:0 28px 24px 144px; }
.profile-stats div { display:flex; align-items:center; gap:7px; padding:10px 16px; background:var(--md-surface-container); border:0; border-radius:6px; }
.profile-stats strong { font-size:18px; font-weight:700; color:var(--accent-purple); }
.profile-stats span { font-size: 12px; color: var(--text-secondary); }
.profile-body { display:grid; grid-template-columns:280px minmax(0,1fr); gap:24px; margin-top:24px; }
.profile-sidebar { display:grid; gap:4px; align-content:start; }
.profile-panel { background:var(--md-surface); border:0; border-radius:10px; padding:20px; }
.profile-panel h2 { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.profile-panel p { font-size: 13px; line-height: 1.65; color: var(--text-secondary); }
.profile-panel dl { margin: 20px 0; font-size: 12px; }
.profile-panel dl div { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; }
.profile-panel dt { color: var(--text-secondary); }
.profile-panel dd { text-align: right; }
.profile-note { display: block; color: var(--text-secondary); font-size: 12px; line-height: 1.6; }
.eyebrow { display: block; color: var(--accent-purple); font-size: 9px; letter-spacing: 1.4px; margin-bottom: 12px; }
.coming-soon { display:inline-block; margin-top:16px; font-size:11px; color:var(--accent-purple); border-radius:16px; padding:6px 10px; background:var(--md-primary-container); }
.profile-collection { min-width: 0; }
.profile-tabs { display:flex; gap:3px; border:0; padding:0; width:max-content; max-width:100%; }
.profile-tabs button { position:relative; display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:10px 16px; font-size:13px; font-weight:600; color:var(--text-secondary); background:var(--md-surface-container); border:0; border-radius:6px; cursor:pointer; white-space:nowrap; transition:border-radius var(--md-spatial-fast-duration) var(--md-spatial-fast),background-color var(--md-effects-fast-duration) var(--md-effects-fast),color var(--md-effects-fast-duration) var(--md-effects-fast); }
.profile-tabs button span { font-size:10px; padding:1px 5px; background:#14141412; border-radius:8px; }
.profile-tabs button[aria-selected="true"] { color:var(--text-on-accent); background:var(--accent-purple); border-radius:24px; }
.profile-tabs button[aria-selected="true"]::after { content:none; }
.collection-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 24px 0; }
.collection-heading h2 { font-size: 18px; font-weight: 600; }
.collection-heading p { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }
.collection-count { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.profile-empty { min-height:260px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px; padding:32px 24px; border:0; border-radius:24px; background:var(--md-surface); }
.profile-empty svg, .empty-heart { color: var(--accent-purple); opacity: .7; }
.empty-heart { display:grid; place-items:center; font-size:0; line-height:1; }
.profile-empty h3 { font-size:16px; font-weight:650; }
.profile-empty p { max-width: 350px; font-size: 13px; color: var(--text-secondary); line-height: 1.65; }
.about-content { padding:24px; border-radius:24px; background:var(--md-surface); font-size:14px; overflow-wrap:anywhere; white-space:pre-wrap; }
.about-content .profile-note { margin-top: 20px; white-space: normal; }
.profile-dialog { width:min(460px,calc(100% - 32px)); margin:auto; padding:24px; border:0; border-radius:28px; background:var(--md-surface-high); color:var(--text-main); overscroll-behavior:contain; }
.profile-dialog::backdrop { background: #0009; backdrop-filter: blur(4px); }
.dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.dialog-heading h2 { font-size:20px; font-weight:650; }
.dialog-close { display:grid; place-items:center; width:40px; height:40px; background:var(--md-primary-container); border:0; border-radius:50%; color:var(--accent-purple); cursor:pointer; }
.profile-dialog label { display: block; font-size: 13px; margin: 16px 0 8px; }
.profile-dialog input, .profile-dialog textarea { width:100%; padding:14px 16px; background:var(--bg-main); border:1px solid var(--md-sys-color-outline); border-radius:16px; color:var(--text-main); font-size:14px; }
.profile-dialog textarea { resize: vertical; }
.profile-dialog .profile-note { margin-top: 12px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }

/* Profile follows the same quiet shelf rhythm. */









.profile-stats div:last-child { border:0; padding:10px 16px; border-radius:6px 18px 18px 6px; }

.profile-panel:first-child { padding-top:20px; border-radius:24px 24px 10px 10px; }
.profile-panel .eyebrow { font-size:12px; letter-spacing:0; }


.profile-empty .empty-heart .ui-icon { width:40px; height:40px; }




.nav-item .ui-icon { width:16px; height:16px; }

.nav-item:hover:not(.active) { color:var(--text-main); background:#B8A7F012; }

.nav-item:active { border-radius:12px; }

.search-input:hover { background:var(--bg-card); }

.user-profile:hover, .user-profile[aria-expanded="true"] { background:var(--md-primary-container); }

.shelf-controls button:first-child { border-radius:20px 10px 10px 20px; }

.shelf-controls button:last-child { border-radius:10px 20px 20px 10px; }

.shelf-controls button:active:not(:disabled) { border-radius:16px; background:var(--accent-purple); color:var(--text-on-accent); }

.profile-dropdown :is(a,button[data-navigate]) .ui-icon { width:18px; height:18px; color:var(--accent-purple); }

.secondary-button .ui-icon, .primary-button .ui-icon { width:17px; height:17px; }

.btn-publish:active, .primary-button:active, .secondary-button:active, .btn-icon:active { border-radius:12px; }

.profile-stats div:first-child { border-radius:18px 6px 6px 18px; }

.profile-panel:last-child { border-radius:10px 10px 24px 24px; }

.profile-tabs button .ui-icon { width:17px; height:17px; }

.profile-tabs button:first-child { border-radius:24px 6px 6px 24px; }

.profile-tabs button:last-child { border-radius:6px 24px 24px 6px; }

.profile-tabs button:active { border-radius:12px; }

.profile-empty > svg, .profile-empty > .empty-heart { box-sizing:content-box; padding:18px; border-radius:28px; background:var(--md-primary-container); color:var(--accent-purple); opacity:1; }

@keyframes menu-spatial { from { transform:translateY(-8px) scale(.97); } to { transform:translateY(0) scale(1); } }
@keyframes menu-effects { from { opacity:0; } to { opacity:1; } }
@keyframes dialog-spatial { from { transform:translateY(8px) scale(.98); } to { transform:translateY(0) scale(1); } }
.profile-dialog[open] { animation:dialog-spatial var(--md-spatial-default-duration) var(--md-spatial-default) both, menu-effects var(--md-effects-default-duration) var(--md-effects-default) both; }
.profile-tabs button[aria-selected="true"]:active { border-radius:12px; }
.profile-tabs button[aria-selected="true"]:first-child, .profile-tabs button[aria-selected="true"]:last-child { border-radius:24px; }
@media (max-width:1200px) {
 .header-container { gap:12px; }
 .header-left { gap:14px; }
 .nav-item { padding-inline:9px; }
 .nav-item .ui-icon { display:none; }
 .btn-publish { display:none; }
 .art-card { flex-basis:160px; }
 .manga-card { flex-basis:120px; }
}
@media (max-width:1024px) { .news-card { flex-basis:calc((100% - 14px)/2.5); } }
@media (max-width:900px) {
 .header-container { display:flex; flex-wrap:wrap; gap:8px 12px; padding:10px 12px; }
 .header-left { display:contents; }
 .logo { order:0; }
 .header-center { order:1; max-width:none; }
 .header-right { order:2; }
 .nav-links { order:3; width:100%; overflow-x:auto; scrollbar-width:none; gap:4px; }
 .nav-item { min-height:40px; padding-inline:12px; }
 .profile-body { grid-template-columns:220px minmax(0,1fr); gap:20px; }
 .profile-stats { padding-left:28px; }
}
@media (max-width:768px) { .art-card { flex-basis:140px; height:160px; } .manga-card { flex-basis:105px; height:155px; } }
@media (max-width:640px) {
 html { scroll-padding-top:140px; }
 .astrea-header { padding:8px 0; }
 .header-container { width:calc(100% - 24px); padding:8px 10px; gap:6px 10px; border-radius:24px; }
 .header-center { min-width:60px; }
 .header-right { gap:0; }
 .btn-icon { display:none; }
 .logo { font-size:19px; }
 .nav-item { padding:8px 10px; font-size:12px; min-height:36px; }
 .search-input { height:38px; }
 .main-content { padding:20px 16px 40px; }
 .main-content > section + section { margin-top:32px; }
 .section-header { align-items:center; gap:8px; }
 .section-title { font-size:18px; }
 .section-description { font-size:11px; max-width:190px; }
 .section-actions,.slider-controls-top { gap:8px; }
 .section-actions .view-all-link,.slider-controls-top .view-all-link { display:none; }
 .shelf-controls { gap:3px; }
 .shelf-controls button { width:34px; height:36px; }
 .news-card { flex-basis:80%; }
 .profile-cover { height:132px; padding:20px; }
 .cover-caption { max-width:145px; font-size:16px; }
 .profile-cover::after { width:125px; height:125px; right:-24px; top:24px; }
 .prototype-label { font-size:9px; padding:4px 8px; }
 .profile-overview { flex-wrap:wrap; padding:0 20px 20px; gap:12px; align-items:flex-start; }
 .profile-avatar { width:76px; height:76px; border-radius:24px; font-size:28px; }
 .profile-identity { flex:1; padding-top:12px; }
 .profile-identity h1 { font-size:22px; }
 .profile-identity > p:last-child { font-size:13px; }
 .profile-edit { margin:0; width:100%; }
 .profile-stats { padding:0 20px 20px; display:grid; grid-template-columns:1fr 1fr; gap:4px; }
 .profile-stats div { border-radius:8px; padding:10px 12px; }
 .profile-stats div:first-child { border-radius:16px 8px 8px 8px; }
 .profile-stats div:last-child { border-radius:8px 8px 16px 8px; padding:10px 12px; }
 .profile-body { display:flex; flex-direction:column; }
 .profile-collection { order:0; }
 .profile-sidebar { order:1; }
 .profile-tabs { width:100%; gap:3px; }
 .profile-tabs button { flex:1; font-size:12px; gap:5px; padding:10px 9px; }
 .profile-tabs button .ui-icon { display:none; }
 .collection-count { display:none; }
 .profile-empty { min-height:240px; }
 .profile-panel { padding:20px; }
 .profile-dialog input,.profile-dialog textarea { font-size:16px; }
}
@media (pointer:coarse) {
 .shelf-controls button,.btn-icon,.user-profile,.dialog-close { min-width:48px; min-height:48px; }
 .nav-item,.view-all-link,.profile-dropdown :is(a,button[data-navigate]),.profile-tabs button,.primary-button,.secondary-button { min-height:48px; }
 .search-input,.profile-dialog input { min-height:48px; }
 .section-heading { min-width:0; }
}

/* Unit-mass sampled spring response, using documented Material damping/stiffness. */
@supports (animation-timing-function: linear(0, 1)) {
 :root {
  --md-spatial-fast: linear(0.000000, 0.025571, 0.088524, 0.172606, 0.266319, 0.361780, 0.453820, 0.539264, 0.616378, 0.684439, 0.743412, 0.793709, 0.836007, 0.871127, 0.899938, 0.923305, 0.942043, 0.956901, 0.968546, 0.977562, 0.984450, 0.989638, 0.993481, 0.996272, 0.998251, 0.999612, 1.000509, 1.001063, 1.001371, 1.001504, 1.001518, 1.001455, 1.001345, 1.001210, 1.001065, 1.000920, 1.000783, 1.000658, 1.000545, 1.000446, 1.000000);
  --md-spatial-default: linear(0.000000, 0.024586, 0.085370, 0.166944, 0.258317, 0.351880, 0.442575, 0.527238, 0.604088, 0.672320, 0.731806, 0.782866, 0.826093, 0.862233, 0.892098, 0.916505, 0.936236, 0.952016, 0.964497, 0.974257, 0.981797, 0.987543, 0.991859, 0.995043, 0.997345, 0.998967, 1.000070, 1.000786, 1.001216, 1.001440, 1.001521, 1.001503, 1.001422, 1.001305, 1.001168, 1.001026, 1.000886, 1.000754, 1.000633, 1.000526, 1.000000);
  --md-effects-fast: linear(0.000000, 0.032048, 0.107253, 0.202825, 0.304482, 0.403669, 0.495615, 0.578009, 0.650083, 0.712002, 0.764455, 0.808396, 0.844871, 0.874918, 0.899511, 0.919529, 0.935745, 0.948827, 0.959342, 0.967765, 0.974493, 0.979853, 0.984113, 0.987492, 0.990166, 0.992278, 0.993944, 0.995256, 0.996288, 0.997098, 0.997734, 0.998232, 0.998621, 0.998926, 0.999164, 0.999350, 0.999494, 0.999607, 0.999695, 0.999763, 1.000000);
  --md-effects-default: linear(0.000000, 0.028475, 0.096329, 0.184037, 0.278952, 0.373177, 0.462052, 0.543087, 0.615215, 0.678266, 0.732615, 0.778943, 0.818072, 0.850872, 0.878189, 0.900815, 0.919465, 0.934774, 0.947295, 0.957502, 0.965797, 0.972522, 0.977960, 0.982349, 0.985883, 0.988724, 0.991004, 0.992832, 0.994294, 0.995462, 0.996394, 0.997138, 0.997730, 0.998201, 0.998575, 0.998872, 0.999108, 0.999295, 0.999443, 0.999560, 1.000000);
 }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }

/* Working catalogue and personal collection — the existing feed stays intact. */
.btn-publish { text-decoration:none; }
.avatar-initial { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--md-primary-container); color:var(--accent-purple); font-size:14px; font-weight:700; }
.site-footer { max-width:1440px; margin:0 auto; padding:16px 28px 28px; border-top:1px solid var(--border-subtle); color:var(--text-secondary); font-size:11px; display:flex; justify-content:space-between; gap:16px; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:24px; }
.page-heading h1 { font-size:28px; font-weight:700; letter-spacing:-.5px; }
.page-heading p { font-size:14px; color:var(--text-secondary); margin-top:8px; max-width:650px; }
.page-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.page-actions a,.page-heading>a,.app-empty a { text-decoration:none; }
.filter-panel { display:grid; grid-template-columns:minmax(180px,2fr) repeat(3,minmax(120px,1fr)) auto auto; align-items:end; gap:12px; padding:20px; background:var(--md-surface); border-radius:24px; margin-bottom:16px; }
.filter-panel label { display:flex; flex-direction:column; gap:8px; color:var(--text-secondary); font-size:12px; min-width:0; }
.filter-panel input,.filter-panel select,.collection-toolbar input,.collection-toolbar select { width:100%; height:42px; padding:0 12px; background:var(--bg-input); color:var(--text-main); border:1px solid var(--md-outline); border-radius:12px; font:inherit; font-size:13px; min-width:0; }
.text-button { min-height:40px; padding:8px 12px; border:0; background:none; color:var(--accent-purple); font-size:13px; border-radius:20px; }
.text-button:hover { background:var(--md-primary-container); }
.results-status { font-size:12px; color:var(--text-secondary); margin:16px 0; min-height:18px; }
.anime-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:24px 16px; }
.anime-card { min-width:0; position:relative; }
.anime-card-link { display:block; width:100%; text-decoration:none; border-radius:18px; }
.anime-poster { position:relative; height:220px; overflow:hidden; border-radius:18px; background:var(--bg-card); }
.anime-poster img,.detail-poster img { width:100%; height:100%; display:block; object-fit:cover; }
.anime-card-link:hover .anime-poster { outline:2px solid #B8A7F060; outline-offset:2px; }
.anime-card-title { font-size:14px; font-weight:600; line-height:1.35; margin-top:10px; min-height:38px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.anime-card-meta { font-size:11px; color:var(--text-secondary); margin-top:5px; }
.anime-source-score { position:absolute; top:8px; left:8px; background:#141414d9; color:var(--text-main); padding:4px 7px; border-radius:12px; font-size:11px; }
.anime-list-badge { position:absolute; bottom:8px; left:8px; right:8px; padding:4px 8px; text-align:center; color:var(--text-on-accent); background:var(--accent-purple); border-radius:12px; font-size:10px; font-weight:600; }
.poster-placeholder { display:grid; place-items:center; width:100%; height:100%; min-height:100px; padding:12px; color:var(--text-secondary); text-align:center; font-size:12px; }
.anime-card-actions { display:flex; gap:4px; margin-top:10px; }
.card-add { flex:1; min-width:0; min-height:36px; background:var(--md-primary-container); color:var(--md-sys-color-on-primary-container); border:0; border-radius:18px 8px 8px 18px; font-size:12px; font-weight:600; }
.card-favorite { width:36px; height:36px; flex-shrink:0; background:var(--md-surface-high); color:var(--accent-purple); border:0; border-radius:8px 18px 18px 8px; font-size:22px; }
.card-favorite[aria-pressed="true"] { color:var(--text-on-accent); background:var(--accent-purple); }
.card-add:hover,.card-favorite:hover { filter:brightness(1.12); }
.card-progress { font-size:11px; margin-top:6px; color:var(--accent-purple); }
.anime-shelf { gap:16px; }
.anime-shelf .anime-card { flex:0 0 156px; width:156px; scroll-snap-align:start; }
.anime-shelf .anime-poster { height:195px; }
.anime-shelf .anime-card-title { font-size:13px; }
.loading-message { padding:24px; font-size:14px; color:var(--text-secondary); }
.app-empty { grid-column:1/-1; width:100%; padding:40px 24px; border-radius:24px; background:var(--md-surface); text-align:center; }
.app-empty h2 { font-size:18px; margin-bottom:12px; }
.app-empty p { max-width:560px; margin:0 auto 20px; color:var(--text-secondary); font-size:14px; }
.app-empty a { display:inline-flex; }
.pagination { display:flex; align-items:center; justify-content:center; gap:20px; margin:32px 0; font-size:13px; }
.source-note { font-size:12px; color:var(--text-secondary); line-height:1.6; margin-top:20px; }
.source-note a,a.source-note { color:var(--accent-purple); }
.anime-detail-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:32px; align-items:start; }
.detail-poster { width:220px; height:330px; overflow:hidden; border-radius:24px; background:var(--bg-card); }
.release-schedule { margin:16px 0; padding:14px 18px; border-radius:20px; background:var(--md-surface-container); display:grid; gap:6px; font-size:13px; }
.release-schedule strong { color:var(--accent-purple); }
.release-schedule p { margin:0; }
.detail-info { min-width:0; }
.detail-kind { font-size:12px; color:var(--accent-purple); margin-bottom:10px; }
.detail-title { font-size:28px; line-height:1.2; max-width:750px; }
.detail-original { font-size:14px; color:var(--text-secondary); margin-top:10px; }
.detail-facts { display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.detail-facts span { padding:8px 12px; background:var(--md-surface); border-radius:12px; font-size:13px; }
.genre-tags { display:flex; flex-wrap:wrap; gap:6px; margin:16px 0; }
.genre-tag { padding:5px 9px; color:var(--text-secondary); background:var(--bg-input); border-radius:10px; font-size:12px; text-decoration:none; }
.genre-tag:hover { color:var(--accent-purple); }
.detail-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.detail-description { margin-top:32px; padding:24px; border-radius:24px; background:var(--md-surface); }
.detail-description h2 { font-size:18px; margin-bottom:12px; }
.detail-description>p:first-of-type { font-size:15px; line-height:1.8; max-width:900px; white-space:pre-line; }
.detail-progress { margin-top:20px; padding:20px; border-radius:20px; background:var(--md-surface); max-width:550px; font-size:13px; }
.detail-progress strong { color:var(--accent-purple); }
.detail-progress>p { margin-top:8px; }
.detail-progress progress { width:100%; height:8px; appearance:none; border:0; display:block; margin:14px 0; border-radius:8px; overflow:hidden; background:var(--bg-card); }
progress::-webkit-progress-bar { background:var(--bg-card); }
progress::-webkit-progress-value { background:var(--accent-purple); border-radius:8px; }
progress::-moz-progress-bar { background:var(--accent-purple); }
.personal-note { color:var(--text-secondary); white-space:pre-wrap; overflow-wrap:anywhere; }
#related-section { margin-top:32px; }
.collection-toolbar { display:flex; gap:12px; max-width:700px; margin-bottom:16px; }
.collection-toolbar input { flex:1; }
.collection-toolbar select { width:220px; }
.filter-chips { display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 24px; }
.filter-chip { min-height:38px; padding:8px 13px; border:1px solid var(--md-outline); border-radius:20px; background:transparent; color:var(--text-secondary); font-size:12px; }
.filter-chip.active { color:var(--text-on-accent); background:var(--accent-purple); border-color:transparent; }
.recommendation-intro,.local-storage-note { padding:20px; background:var(--md-surface); border-radius:20px; font-size:14px; color:var(--text-secondary); }
.recommendation-intro { max-width:1000px; }
.recommendation-tag { font-size:11px; line-height:1.4; color:var(--accent-purple); margin-top:6px; }
.local-storage-note { margin-top:32px; }
.local-storage-note strong { color:var(--text-main); font-size:13px; }
.local-storage-note p { font-size:12px; margin-top:8px; }
.profile-anime-grid { grid-template-columns:repeat(auto-fill,minmax(135px,1fr)); }
.profile-anime-grid .anime-poster { height:190px; }
.profile-data-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:16px; }
.profile-data-actions button { font-size:11px; padding:8px 12px; }
.profile-dialog,.entry-dialog,.import-dialog { max-height:calc(100dvh - 32px); overflow-y:auto; }
.entry-dialog,.import-dialog { width:min(520px,calc(100% - 32px)); margin:auto; padding:24px; border:0; border-radius:28px; color:var(--text-main); background:var(--md-surface-high); }
.entry-dialog::backdrop,.import-dialog::backdrop { background:#0009; backdrop-filter:blur(4px); }
.entry-dialog label { display:block; font-size:13px; margin:16px 0 8px; }
.entry-dialog input:not([type="checkbox"]),.entry-dialog select,.entry-dialog textarea { width:100%; padding:12px 14px; background:var(--bg-main); color:var(--text-main); border:1px solid var(--md-sys-color-outline); border-radius:12px; font:inherit; font-size:14px; }
.entry-dialog textarea { resize:vertical; }
.form-columns { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.entry-dialog .check-label { display:flex; align-items:center; gap:10px; min-height:40px; }
.check-label input { width:18px; height:18px; accent-color:var(--accent-purple); }
.entry-anime-name { color:var(--accent-purple); font-size:14px; }
.field-help { color:var(--text-secondary); font-size:12px; margin-top:8px; }
.form-error { color:#ffb4ab; font-size:13px; margin-top:12px; }
.delete-button { min-height:40px; margin-right:auto; padding:8px 0; background:none; border:0; color:#ffb4ab; font-size:12px; text-align:left; }
.entry-dialog .dialog-actions { flex-wrap:wrap; }
.import-dialog h2 { font-size:20px; margin-bottom:16px; }
.import-dialog>p { font-size:14px; line-height:1.6; }
@media (max-width:1100px) { .filter-panel { grid-template-columns:repeat(3,minmax(0,1fr)); } .filter-search { grid-column:1/-1; } .page-heading { align-items:flex-start; } }
@media (max-width:640px) {
 .page-heading { flex-direction:column; gap:16px; }
 .page-heading h1 { font-size:24px; }
 .page-heading p { font-size:13px; }
 .filter-panel { grid-template-columns:1fr 1fr; padding:16px; gap:12px; }
 .filter-panel>label:first-child { grid-column:1/-1; }
 .anime-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 12px; }
 .anime-poster { height:210px; }
 .anime-card-title { font-size:13px; }
 .anime-shelf .anime-card { flex-basis:140px; width:140px; }
 .anime-shelf .anime-poster { height:190px; }
 .anime-detail-layout { display:flex; flex-direction:column; gap:24px; }
 .detail-poster { width:160px; height:240px; }
 .detail-title { font-size:24px; }
 .detail-description { padding:20px; }
 .detail-description>p:first-of-type { font-size:14px; }
 .collection-toolbar { flex-direction:column; }
 .collection-toolbar select { width:100%; }
 .profile-anime-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .profile-anime-grid .anime-poster { height:190px; }
 .site-footer { padding:16px; flex-direction:column; gap:6px; }
 .entry-dialog,.import-dialog { padding:20px; }
 .entry-dialog input:not([type="checkbox"]),.entry-dialog select,.entry-dialog textarea,.filter-panel input,.filter-panel select,.collection-toolbar input,.collection-toolbar select { font-size:16px; }
}
@media (pointer:coarse) { .card-add,.card-favorite,.filter-chip,.text-button { min-height:44px; } .card-favorite { min-width:44px; } }

.export-dialog { width:min(680px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; margin:auto; padding:24px; border:0; border-radius:28px; background:var(--md-surface-high); color:var(--text-main); }
.export-dialog::backdrop { background:#0009; backdrop-filter:blur(4px); }
.export-dialog h2 { font-size:20px; }
.export-dialog label { display:block; font-size:13px; margin:16px 0 8px; }
.export-dialog textarea { width:100%; padding:16px; border:1px solid var(--md-outline); border-radius:16px; background:var(--bg-main); color:var(--text-main); font:12px/1.6 monospace; resize:vertical; }
.export-dialog .dialog-actions { flex-wrap:wrap; }

/* Stable page geometry; Material Expressive shapes and motion remain shared. */
.logo { white-space:nowrap; }
.profile-collection { min-height:440px; }
.anime-grid { align-items:start; }
.anime-card { display:flex; flex-direction:column; }
.anime-grid .anime-card { height:100%; }
.anime-card-actions { margin-top:auto; padding-top:10px; }
.loading-card { pointer-events:none; }
.loading-card .anime-poster { background:var(--md-surface-container); }
.loading-line { background:var(--md-surface-high); border-radius:12px; }
.loading-title { height:38px; margin-top:10px; width:85%; }
.loading-meta { height:16px; margin-top:5px; width:65%; }
.loading-action { height:36px; margin-top:10px; border-radius:20px; }
#home-anime { min-height:310px; }
#recommendation-reason { min-height:3em; }
.filter-chip { transition:background-color var(--md-effects-fast-duration) var(--md-effects-fast),color var(--md-effects-fast-duration) var(--md-effects-fast),border-radius var(--md-spatial-fast-duration) var(--md-spatial-fast); }
.filter-chip:hover:not(.active) { background:var(--md-primary-container); }
.filter-chip:active { border-radius:12px; }
.entry-dialog[open],.import-dialog[open],.export-dialog[open] { animation:dialog-spatial var(--md-spatial-default-duration) var(--md-spatial-default) both,menu-effects var(--md-effects-default-duration) var(--md-effects-default) both; }
@media (prefers-reduced-motion:reduce) { .entry-dialog[open],.import-dialog[open],.export-dialog[open] { animation:none; } }

/* Kodik trial: the surrounding controls follow the existing Material roles. */
.watch-section { margin-top:32px; }
.watch-content { padding:20px; background:var(--md-surface); border-radius:28px; }
.watch-placeholder { min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; text-align:center; }
.watch-placeholder p { max-width:480px; font-size:14px; color:var(--text-secondary); }
.watch-toolbar { display:flex; align-items:end; flex-wrap:wrap; gap:12px; margin-bottom:16px; }
.watch-field { flex:1; min-width:0; }
.watch-field label { display:block; font-size:12px; color:var(--text-secondary); margin-bottom:8px; }
.watch-field select { width:100%; min-height:44px; padding:10px 14px; border:1px solid var(--md-outline); border-radius:16px; background:var(--bg-input); color:var(--text-main); font:inherit; font-size:14px; }
.watch-stage { width:100%; aspect-ratio:16/9; background:#000; border-radius:20px; overflow:hidden; }
.watch-stage iframe { display:block; width:100%; height:100%; border:0; }
@media(max-width:640px) { .watch-content { padding:12px; border-radius:24px; } .watch-field { flex-basis:100%; } .watch-stage { border-radius:12px; } .watch-field select { font-size:16px; } }

/* Native customizable selects retain browser keyboard and form semantics. */

@supports (appearance:base-select) {
 select,select::picker(select) { appearance:base-select; }
 select { align-items:center; }
 select::picker(select) { min-width:anchor-size(width); max-height:min(320px,60vh); padding:6px; border:1px solid var(--md-outline); border-radius:20px; background:var(--md-surface-high); color:var(--text-main); box-shadow:0 12px 32px #0006; overflow-y:auto; scrollbar-width:thin; }
 select option { padding:10px 12px; min-height:40px; border-radius:12px; font:inherit; font-size:13px; cursor:pointer; }
 select option:hover,select option:focus { background:var(--md-primary-container); outline:none; }
 select option:checked { background:var(--md-primary-container); color:var(--accent-purple); }
 select::picker-icon { color:var(--text-secondary); margin-left:auto; }
}
.news-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; }
.news-grid .news-card { width:100%; min-width:0; height:220px; }
.live-news-card { display:block; text-decoration:none; }
.live-news-card .news-cover { position:absolute; inset:0; background:var(--md-surface-container); }
.live-news-card .news-cover img { width:100%; height:100%; object-fit:cover; }
.live-news-card .news-title { -webkit-line-clamp:3; min-height:0; }
.live-news-card:hover { border-color:var(--accent-purple); }
#home-upcoming,#home-airing { min-height:310px; }
@media(max-width:640px) { .news-grid { grid-template-columns:1fr; } }

/* One outlined-field focus state: replace the border, never add a detached ring. */
.profile-dialog select { width:100%; min-height:48px; padding:14px 16px; border:1px solid var(--md-sys-color-outline); border-radius:16px; background:var(--bg-main); color:var(--text-main); font:inherit; font-size:14px; }
body.astrea-body :is(input:not([type="checkbox"]),textarea,select):focus,body.astrea-body select:open {
 outline:none; border-color:var(--accent-purple); box-shadow:inset 0 0 0 1px var(--accent-purple);
}
@media(max-width:640px) { .profile-dialog select { font-size:16px; } }
@media(forced-colors:active) { body.astrea-body :is(input:not([type="checkbox"]),textarea,select):focus { outline:2px solid Highlight; outline-offset:0; } }

/* Selected menu item: consistent SVG check, independent of the browser glyph. */
@supports (appearance:base-select) {
 select option::checkmark { content:""; width:18px; height:18px; flex:0 0 18px; }
 select option:checked::checkmark {
  background-color:currentColor;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12 4 4 10-10' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px 18px no-repeat;
 }
}