/* MILAN V7.2 — Master interaction layer (loaded on every page).
   Additive only: FAB, free-music banner, footer nav, install button, a11y polish. */

/* Scroll-to-top FAB */
#milan-fab-top{
  position:fixed; right:18px; bottom:88px; z-index:9990;
  width:46px; height:46px; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; font-size:20px; color:#fff;
  background:linear-gradient(135deg,#3b82f6,#6366f1); box-shadow:0 8px 26px rgba(59,130,246,.4);
  opacity:0; transform:translateY(12px) scale(.9); pointer-events:none;
  transition:opacity .25s, transform .25s;
}
#milan-fab-top.show{ opacity:1; transform:none; pointer-events:auto; }
#milan-fab-top:active{ transform:scale(.92); }

/* Free-music banner strip */
#milan-music-banner{
  position:relative; z-index:50; display:flex; align-items:center; gap:12px;
  padding:10px 44px 10px 16px; font:600 14px/1.4 system-ui,Segoe UI,Roboto,sans-serif;
  color:#eaf0ff; background:linear-gradient(90deg,rgba(59,130,246,.20),rgba(139,92,246,.20));
  border-bottom:1px solid rgba(148,163,196,.18);
}
#milan-music-banner a{ color:#a5b4fc; font-weight:800; text-decoration:none; white-space:nowrap; }
#milan-music-banner a:hover{ color:#c4b5fd; }
#milan-music-banner .mmb-close{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:30px; height:30px; border:0; border-radius:8px; cursor:pointer;
  background:transparent; color:#c3cbe0; font-size:18px; line-height:1;
}
#milan-music-banner .mmb-close:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* Injected footer nav (crawl depth + consistency) */
#milan-footer-nav{
  margin-top:40px; padding:22px 16px; text-align:center;
  border-top:1px solid rgba(148,163,196,.16);
  font:14px/1.8 system-ui,Segoe UI,Roboto,sans-serif; color:#95a0bd;
}
#milan-footer-nav a{ color:#aab4d4; text-decoration:none; margin:0 8px; white-space:nowrap; }
#milan-footer-nav a:hover{ color:#fff; text-decoration:underline; }
#milan-footer-nav .mfn-copy{ display:block; margin-top:10px; font-size:12px; color:#6b7596; }

/* Install (A2HS) button */
#milan-install-btn{
  position:fixed; left:18px; bottom:88px; z-index:9990;
  display:none; align-items:center; gap:8px; cursor:pointer;
  padding:10px 14px; border:1px solid rgba(148,163,196,.25); border-radius:999px;
  background:rgba(11,20,55,.86); color:#eaf0ff; font:700 13px system-ui; backdrop-filter:blur(10px);
  box-shadow:0 8px 26px rgba(0,0,0,.4);
}
#milan-install-btn.show{ display:inline-flex; }

/* Back-to-feed pill (music page) */
.milan-backfeed{
  display:inline-flex; align-items:center; gap:6px; text-decoration:none;
  padding:8px 12px; border-radius:10px; font:700 13px system-ui; color:#eaf0ff;
  border:1px solid rgba(148,163,196,.25); background:rgba(255,255,255,.04);
}
.milan-backfeed:hover{ border-color:rgba(148,163,196,.5); }

/* A11y polish — visible focus ring + min tap targets on interactive elements */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid #6366f1 !important; outline-offset:2px; border-radius:6px;
}
@media (prefers-reduced-motion: reduce){
  #milan-fab-top, #milan-music-banner{ transition:none !important; }
}

/* ============================================================
   MILAN V7.2 — Unified floating action dock (right edge).
   Organizes scattered FABs (Music, Ask MILAN, Theme, Flow, Top)
   into one tidy, non-overlapping vertical column. Clears the sidebar.
   ============================================================ */

/* Ask MILAN — primary, bottom-most (easiest reach) */
.ma-fab { right: 16px !important; bottom: 20px !important; z-index: 99996 !important; }

/* Theme palette */
.mcm-fab { right: 19px !important; bottom: 86px !important; z-index: 99995 !important; }

/* Flow — normalize the side tab into a dock pill */
#milan-flow-btn {
  position: fixed !important; right: 16px !important; bottom: 150px !important;
  top: auto !important; left: auto !important; transform: none !important;
  writing-mode: horizontal-tb !important; height: auto !important;
  border-radius: 999px !important; padding: 9px 14px !important; z-index: 99994 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}

/* Music — move OUT of the bottom-left (it overlapped the sidebar) into the dock, as a clean circle */
.mlz-fab {
  left: auto !important; right: 17px !important; bottom: 210px !important; z-index: 99993 !important;
  width: 50px !important; height: 50px !important; padding: 0 !important; justify-content: center !important;
}
.mlz-fab .lbl { display: none !important; }
.mlz-fab .ic { font-size: 20px !important; }

/* Scroll-to-top — top of the dock (still only shows after scroll) */
#milan-fab-top { right: 19px !important; bottom: 274px !important; z-index: 99992 !important; }

/* Declutter: hide the floating "⌘K Command Palette" hint — the top search bar already is the entry */
.milan-cmd-shortcut { display: none !important; }

/* Consistent depth on every dock item */
.ma-fab, .mcm-fab, #milan-flow-btn, .mlz-fab, #milan-fab-top {
  box-shadow: 0 8px 24px rgba(0,0,0,.35) !important;
}

/* Mobile: keep the dock above the bottom bar, tighter column */
@media (max-width: 780px) {
  .ma-fab     { right: 12px !important; bottom: 80px  !important; }
  .mcm-fab    { right: 14px !important; bottom: 142px !important; }
  #milan-flow-btn { right: 12px !important; bottom: 204px !important; }
  .mlz-fab    { right: 13px !important; bottom: 266px !important; left: auto !important; }
  #milan-fab-top  { right: 14px !important; bottom: 328px !important; }
}

/* ============================================================
   MILAN V7.2 — Mobile safety & responsiveness (no horizontal scroll)
   Conservative: does not touch sticky/positioned layout ancestors.
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Media never forces the page wider than the screen */
img, svg, video, canvas, iframe { max-width: 100%; }

/* Free-music banner: wrap on narrow screens instead of overflowing */
@media (max-width: 560px) {
  #milan-music-banner { flex-wrap: wrap; gap: 6px; padding-right: 40px; font-size: 13px; }
  #milan-music-banner a { margin-left: 0; }
}

/* Injected footer nav: comfortable wrapping + tap targets on mobile */
@media (max-width: 560px) {
  #milan-footer-nav { font-size: 13px; line-height: 2.2; }
  #milan-footer-nav a { display: inline-block; padding: 2px 6px; }
}

/* Toast never exceeds the viewport */
#milan-toast { max-width: calc(100vw - 24px); }

/* ============================================================
   MILAN V7.2 — Premium mobile drawer (hamburger + Logout).
   Hamburger shows only on small screens; drawer is dark glass.
   ============================================================ */
#milan-burger {
  position: fixed; left: 16px; bottom: 18px; z-index: 99990;
  width: 50px; height: 50px; border: 0; border-radius: 50%; cursor: pointer;
  display: none; align-items: center; justify-content: center; font-size: 22px; color: #fff;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  box-shadow: 0 10px 28px rgba(59,130,246,.45);
}
#milan-burger:active { transform: scale(.94); }

#milan-drawer-ov {
  position: fixed; inset: 0; z-index: 99998; background: rgba(0,0,0,.55);
  opacity: 0; pointer-events: none; transition: opacity .25s; backdrop-filter: blur(2px);
}
#milan-drawer {
  position: fixed; top: 0; left: 0; z-index: 99999;
  width: min(86vw, 320px); height: 100dvh; overflow-y: auto;
  transform: translateX(-100%); transition: transform .28s cubic-bezier(.22,1,.36,1);
  background: linear-gradient(180deg, #0c1326, #0a0f1f);
  border-right: 1px solid rgba(148,163,196,.16);
  box-shadow: 0 0 60px rgba(0,0,0,.5);
  padding: 14px 12px calc(20px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
body.milan-drawer-open #milan-drawer { transform: none; }
body.milan-drawer-open #milan-drawer-ov { opacity: 1; pointer-events: auto; }
body.milan-drawer-open { overflow: hidden; }

#milan-drawer .md-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; }
#milan-drawer .md-brand { font-weight: 900; letter-spacing: .16em; color: #eef2ff; font-size: 18px; }
#milan-drawer .md-close { width: 36px; height: 36px; border: 0; border-radius: 10px; background: rgba(255,255,255,.06); color: #c3cbe0; font-size: 22px; cursor: pointer; }
#milan-drawer .md-user { margin: 2px 6px 8px; padding: 10px 12px; border-radius: 14px; background: rgba(99,102,241,.12); border: 1px solid rgba(99,102,241,.28); color: #dfe5ff; font-weight: 700; font-size: 13px; }
#milan-drawer .md-sec { margin: 12px 8px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: #8b95b3; font-weight: 800; }
#milan-drawer .md-item {
  display: block; width: 100%; text-align: left; text-decoration: none;
  padding: 13px 14px; margin: 4px 0; border: 0; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.04); color: #e7ecfb; font: 700 15px Inter, system-ui, sans-serif;
}
#milan-drawer .md-item:hover, #milan-drawer .md-item:active { background: rgba(99,102,241,.18); color: #fff; }
#milan-drawer .md-logout {
  display: block; width: 100%; text-align: center; margin: 16px 0 6px;
  padding: 13px 14px; border: 1px solid rgba(239,68,68,.45); border-radius: 14px; cursor: pointer;
  background: rgba(239,68,68,.12); color: #ff8b8b; font: 800 15px Inter, system-ui, sans-serif;
}
#milan-drawer .md-logout:active { background: rgba(239,68,68,.22); }

/* Show the hamburger only when the desktop sidebar can't fit */
@media (max-width: 820px) {
  #milan-burger { display: flex; }
}

/* V95 bottom nav active (mobile/PWA /app): lift the hamburger above the nav
   bar so it never covers the 🏠 Home tab — mirrors the right-side dock. */
body.milan-v95 #milan-burger {
  left: 12px;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   MILAN V7.2 — Global responsive hardening (every page).
   Goal: zero horizontal overflow + nothing pushed off-screen,
   WITHOUT redesigning or changing the box model / existing layout.
   - overflow-x:clip prevents the horizontal scrollbar but (unlike
     'hidden') does NOT break the sticky top bar.
   - long unbreakable strings (DIDs, hashes, URLs) wrap instead of
     pushing the page wider.
   - media, tables, modals, dropdowns are capped to the viewport.
   ============================================================ */
html { overflow-x: clip; }
body { max-width: 100%; overflow-wrap: break-word; }

/* Long IDs / hashes / code / links wrap instead of overflowing the row */
code, pre, kbd, samp { white-space: pre-wrap; overflow-wrap: anywhere; }
.did, .didText, .hash, .mono, .copyDid, [class*="did"], [class*="hash"],
a[href^="did:"], .post a, .bubble a { overflow-wrap: anywhere; word-break: break-word; }

/* Media & tables never exceed their container (height kept intact for avatars/logos) */
img, svg, video, canvas, iframe, table, embed, object { max-width: 100%; }

/* Modals / dropdowns / popovers / toasts stay inside the viewport */
.modal, .mai-panel, .ma-panel, [role="dialog"], .dropdown, .dropdown-menu,
.popover, .menu-popover, .toast {
  max-width: calc(100vw - 16px) !important;
}

/* Composer/feed long content wraps; flex/grid kids may shrink (kills overflow) */
.composer textarea, .post, .postBody, .feed, .card, .quickCard,
.rightBox, .layout > * { min-width: 0; }

/* Very small phones (320px) — keep paddings sane so nothing clips at edges */
@media (max-width: 360px) {
  .card, .post, .composer, .quickCard, .rightBox, .profileCard { border-radius: 16px; }
  body { font-size: 14px; }
}

/* ============================================================
   MILAN V7.2 — Launch polish (a11y skip link + offline state).
   ============================================================ */
.milan-skip {
  position: fixed; left: 12px; top: -64px; z-index: 100001;
  background: #6366f1; color: #fff; padding: 10px 16px; border-radius: 10px;
  font: 800 14px Inter, system-ui, sans-serif; text-decoration: none;
  box-shadow: 0 10px 28px rgba(99,102,241,.45); transition: top .2s ease;
}
.milan-skip:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }
#milan-offline {
  position: fixed; left: 0; right: 0; top: 0; z-index: 99997;
  background: linear-gradient(90deg,#7c2d12,#9a3412); color: #ffedd5;
  padding: 9px 14px; text-align: center; font: 600 13px Inter, system-ui, sans-serif;
  box-shadow: 0 4px 14px rgba(0,0,0,.3);
}

/* ============================================================
   MILAN V7.2 — FACEBOOK-STYLE FEED-FIRST MOBILE (real /app).
   Mobile par profile+nav-menu stack hatao → feed sabse upar.
   Saari nav hamburger drawer (milan-mobile-nav.js) mein already hai.
   Android APK (body.native-apk) ko chhodo — uska apna layout hai.
   ============================================================ */
@media (max-width: 820px) {
  /* hide the stacked left sidebar (profile pic + "Home Feed / My Posts" list) */
  body:not(.native-apk) .leftRail,
  body:not(.native-apk) .leftRail.side { display: none !important; }

  /* feed column first + full width (composer → posts), like Facebook */
  body:not(.native-apk) .layout { display: block !important; padding: 8px 8px calc(72px + env(safe-area-inset-bottom)) !important; }
  body:not(.native-apk) .feed { width: 100% !important; margin: 0 !important; }
  body:not(.native-apk) .composer { width: 100% !important; }

  /* right rail (People / Notifications) neeche stack — secondary */
  body:not(.native-apk) .rightRail,
  body:not(.native-apk) .rightRail.side {
    position: static !important; max-height: none !important;
    margin-top: 12px !important; width: 100% !important;
  }

  /* premium spacing for feed cards on mobile */
  body:not(.native-apk) .post,
  body:not(.native-apk) .card,
  body:not(.native-apk) .composer { border-radius: 16px !important; margin-bottom: 12px !important; }

  /* make the hamburger clearly visible (it opens the full nav + Logout) */
  #milan-burger { box-shadow: 0 12px 30px rgba(59,130,246,.55) !important; }
}

/* Feed-first ordering inside the center column (.main): composer & feed up,
   stat/quick cards (.advancedStrip) pushed BELOW the feed. (browser/PWA only) */
@media (max-width: 820px) {
  body:not(.native-apk) .main { display: flex !important; flex-direction: column !important; }
  body:not(.native-apk) .composer { order: 1 !important; }
  body:not(.native-apk) .sectionTitle { order: 2 !important; }
  body:not(.native-apk) #feed,
  body:not(.native-apk) .feed { order: 3 !important; }
  body:not(.native-apk) .advancedStrip { order: 90 !important; margin-top: 16px !important; }
}

/* ============================================================
   MILAN V7.2 — FACEBOOK FEED-FIRST (DESKTOP + TABLET, real /app).
   .main children verified direct: reorder via flex so feed is first;
   dashboard/stat cards (.advancedStrip) go BELOW the feed.
   Sidebars sticky → only the feed scrolls. (Android APK untouched.)
   ============================================================ */
body:not(.native-apk) .layout .main { display: flex !important; flex-direction: column !important; }
body:not(.native-apk) .layout .main > .composer { order: 1 !important; padding: 12px 14px !important; }
body:not(.native-apk) .layout .main > .sectionTitle { order: 2 !important; }
body:not(.native-apk) .layout .main > #feed,
body:not(.native-apk) .layout .main > .feed { order: 3 !important; }
body:not(.native-apk) .layout .main > .advancedStrip { order: 90 !important; margin-top: 18px !important; }

/* Sticky sidebars on desktop/tablet — visible while only the feed scrolls */
@media (min-width: 821px) {
  body:not(.native-apk) .layout .leftRail.side,
  body:not(.native-apk) .layout .rightRail.side {
    position: sticky !important; top: 72px !important; align-self: start !important;
    max-height: calc(100vh - 84px) !important; overflow: auto !important;
  }
  body:not(.native-apk) .layout .leftRail.side::-webkit-scrollbar,
  body:not(.native-apk) .layout .rightRail.side::-webkit-scrollbar { width: 0; }
}

/* ============================================================
   MILAN V7.2 — Facebook-style COMPACT composer (real /app).
   Collapsed by default = slim "What's on your mind?" bar.
   Expands to full composer (upload, publish, AI chips) on focus/click.
   So the FEED is what dominates the screen, not a giant create-post form.
   ============================================================ */
body:not(.native-apk) .composer > .grid2,
body:not(.native-apk) .composer > .grid3 { display: none !important; }
body:not(.native-apk) .composer.composer-expanded > .grid2,
body:not(.native-apk) .composer.composer-expanded > .grid3 { display: grid !important; }
body:not(.native-apk) .composer { padding: 10px 12px !important; cursor: text; }
body:not(.native-apk) .composer:not(.composer-expanded) #postText {
  min-height: 42px !important; height: 42px !important; resize: none !important;
}
body:not(.native-apk) .composer.composer-expanded #postText { min-height: 88px !important; resize: vertical !important; }

/* MILAN — shared subtle white-hover interaction */
.milan-hover,
.card,
.right-card,
.sidebar,
.heroIntro,
.composer,
.quickStat,
.person,
.post,
.milan-feed-card,
.mcc-card,
.music-links a,
.genre-chips button,
.mz-chip {
  transition:
    background-color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease !important;
}

.card:hover,
.right-card:hover,
.sidebar:hover,
.heroIntro:hover,
.composer:hover,
.quickStat:hover,
.person:hover,
.post:hover,
.milan-feed-card:hover,
.mcc-card:hover,
.music-links a:hover,
.genre-chips button:hover,
.mz-chip:hover {
  border-color: rgba(255,255,255,.12) !important;
  background-color: rgba(255,255,255,.045) !important;
  box-shadow:
    0 10px 28px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

@media (hover:hover) and (pointer:fine) {
  .card:hover,
  .right-card:hover,
  .heroIntro:hover,
  .composer:hover,
  .person:hover,
  .post:hover,
  .milan-feed-card:hover,
  .mcc-card:hover,
  .music-links a:hover,
  .genre-chips button:hover,
  .mz-chip:hover {
    transform: translateY(-1px);
  }
}


/* ============================================================
   MILAN V2026 — Universal Product UX Layer
   Cross-page polish for public, auth, utility and content surfaces.
   Additive + compatibility-first: existing page-specific UI remains authoritative.
   ============================================================ */
:root{
  --milan-ui-bg:#050915;
  --milan-ui-panel:rgba(12,20,42,.82);
  --milan-ui-panel-2:rgba(16,27,54,.72);
  --milan-ui-line:rgba(148,163,184,.14);
  --milan-ui-line-strong:rgba(255,255,255,.11);
  --milan-ui-text:#f5f7ff;
  --milan-ui-muted:#93a1bd;
  --milan-ui-accent:#ff9c38;
  --milan-ui-accent-2:#df46c8;
  --milan-ui-blue:#5879ff;
  --milan-ui-green:#34d399;
  --milan-ui-radius:22px;
  --milan-ui-shadow:0 20px 70px rgba(0,0,0,.22);
}

html{scroll-behavior:smooth}
body{
  color:var(--milan-ui-text);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(900px 560px at 7% -8%,rgba(88,121,255,.11),transparent 62%),
    radial-gradient(820px 520px at 100% 0%,rgba(223,70,200,.09),transparent 58%),
    linear-gradient(180deg,#071126 0%,#050915 62%,#040711 100%);
}

body > main,
body > .page,
body > .wrap,
main.page,
.page-main,
.site-main,
.content-wrap{
  width:min(1180px,calc(100% - 32px));
  margin-inline:auto;
}

main{isolation:isolate}

.nav{
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:1px solid var(--milan-ui-line);
  background:rgba(5,9,21,.78);
  backdrop-filter:blur(18px) saturate(135%);
  -webkit-backdrop-filter:blur(18px) saturate(135%);
}

.nav-in{
  width:min(1180px,calc(100% - 32px));
  min-height:68px;
  margin-inline:auto;
  display:flex;
  align-items:center;
  gap:22px;
  padding:10px 0;
}

.brand{
  min-width:0;
  display:inline-flex;
  align-items:center;
  gap:11px;
  color:#fff !important;
  font-weight:900;
  letter-spacing:.12em;
}

.brand img{
  width:42px;
  height:42px;
  flex:0 0 42px;
  object-fit:cover;
  border-radius:13px;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 12px 32px rgba(0,0,0,.22);
}

.nav a{
  color:#b9c4dc;
  text-decoration:none;
  transition:color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease;
}

.nav a:hover{
  color:#fff;
}

.nav-in > .nav-links,
.nav-links,
.nav-actions{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}

.nav-links a,
.nav-actions a{
  min-height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border:1px solid transparent;
  border-radius:12px;
  font-size:12px;
  font-weight:800;
}

.nav-links a:hover,
.nav-actions a:hover{
  background:rgba(255,255,255,.045);
  border-color:var(--milan-ui-line);
}

.hero,
.page-hero,
.hero-card,
.heroPanel{
  position:relative;
  overflow:hidden;
  margin:28px 0 20px;
  padding:clamp(26px,5vw,52px);
  border:1px solid var(--milan-ui-line-strong);
  border-radius:28px;
  background:
    radial-gradient(520px 280px at 100% 0%,rgba(223,70,200,.10),transparent 64%),
    radial-gradient(520px 300px at 0% 0%,rgba(88,121,255,.10),transparent 60%),
    linear-gradient(145deg,rgba(18,30,61,.92),rgba(7,14,30,.96));
  box-shadow:var(--milan-ui-shadow);
}

.hero h1,
.page-hero h1,
.hero-card h1,
.heroPanel h1{
  margin:0;
  color:#fff;
  font-size:clamp(30px,5vw,56px);
  line-height:1.04;
  letter-spacing:-.045em;
}

.hero p,
.page-hero p,
.hero-card p,
.heroPanel p{
  max-width:760px;
  margin:14px 0 0;
  color:var(--milan-ui-muted);
  font-size:15px;
  line-height:1.75;
}

.card,
.panel,
.feature,
.info-card,
.section-card,
.article-card{
  border:1px solid var(--milan-ui-line);
  border-radius:var(--milan-ui-radius);
  background:linear-gradient(180deg,rgba(18,31,64,.76),rgba(7,14,30,.86));
  box-shadow:0 16px 50px rgba(0,0,0,.14);
}

.card:hover,
.panel:hover,
.feature:hover,
.info-card:hover,
.section-card:hover,
.article-card:hover{
  border-color:rgba(255,255,255,.15);
  box-shadow:0 20px 58px rgba(0,0,0,.2);
}

.section,
.content-section,
.article-section{
  margin:20px 0;
  padding:clamp(22px,4vw,34px);
  border:1px solid var(--milan-ui-line);
  border-radius:24px;
  background:rgba(9,17,36,.62);
}

.section h2,
.content-section h2,
.article-section h2{
  margin:0 0 12px;
  font-size:clamp(22px,3vw,32px);
  letter-spacing:-.025em;
}

.section h3,
.content-section h3,
.article-section h3{
  margin:22px 0 8px;
  font-size:18px;
}

.section p,
.content-section p,
.article-section p,
.card p,
.panel p{
  color:#aeb9cf;
  line-height:1.75;
}

a{
  text-underline-offset:3px;
}

button,
.btn,
.button,
[role="button"]{
  min-height:42px;
  border-radius:13px;
  font-weight:800;
  letter-spacing:-.01em;
  transition:transform .16s ease,filter .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}

button:hover,
.btn:hover,
.button:hover,
[role="button"]:hover{
  filter:brightness(1.06);
}

button:active,
.btn:active,
.button:active,
[role="button"]:active{
  transform:scale(.985);
}

button:disabled,
.btn:disabled,
.button:disabled{
  cursor:not-allowed;
  filter:none;
  opacity:.55;
}

input,
select,
textarea{
  min-height:44px;
  border-radius:13px;
  border:1px solid var(--milan-ui-line);
  background:rgba(255,255,255,.045);
  color:#fff;
  padding:10px 13px;
}

textarea{min-height:110px;resize:vertical}

input::placeholder,
textarea::placeholder{color:#667694}

input:focus,
select:focus,
textarea:focus{
  border-color:rgba(88,121,255,.42);
  box-shadow:0 0 0 3px rgba(88,121,255,.08);
  outline:none;
}

form{
  max-width:860px;
}

label{
  display:block;
  margin-bottom:7px;
  color:#d8e0f1;
  font-size:12px;
  font-weight:800;
}

table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border:1px solid var(--milan-ui-line);
  border-radius:16px;
}

th,td{
  padding:12px 14px;
  border-bottom:1px solid var(--milan-ui-line);
  text-align:left;
  vertical-align:top;
}

th{
  color:#eaf0ff;
  background:rgba(255,255,255,.035);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

td{
  color:#aeb9cf;
  font-size:13px;
}

tr:last-child td{border-bottom:0}

blockquote{
  margin:20px 0;
  padding:16px 18px;
  border-left:3px solid var(--milan-ui-accent);
  border-radius:0 16px 16px 0;
  background:rgba(255,255,255,.035);
  color:#cdd6e9;
}

code{
  border-radius:7px;
  padding:.14em .4em;
  background:rgba(255,255,255,.055);
  color:#e5eaff;
}

pre{
  padding:16px;
  border:1px solid var(--milan-ui-line);
  border-radius:16px;
  background:#040811;
  color:#dbe4ff;
  overflow:auto;
}

.badge,
.tag,
.pill,
.status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:5px 9px;
  border:1px solid var(--milan-ui-line);
  border-radius:999px;
  background:rgba(255,255,255,.04);
  color:#cbd5ea;
  font-size:10px;
  font-weight:800;
}

.cta,
.primary,
.primary-btn,
.btn-primary{
  background:linear-gradient(135deg,var(--milan-ui-accent),var(--milan-ui-accent-2));
  color:#121522 !important;
  border:0 !important;
  box-shadow:0 12px 28px rgba(223,70,200,.16);
}

.secondary,
.secondary-btn,
.btn-secondary{
  color:#e7ecfb !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid var(--milan-ui-line) !important;
}

footer,
.site-footer{
  width:min(1180px,calc(100% - 32px));
  margin:38px auto 0;
  padding:24px 0 34px;
  border-top:1px solid var(--milan-ui-line);
  color:#7181a2;
}

footer a,
.site-footer a{
  display:inline-block;
  margin:2px 8px 2px 0;
  color:#9eadc8;
  text-decoration:none;
}

footer a:hover,
.site-footer a:hover{color:#fff}

@media (max-width:900px){
  .nav-in{
    width:min(100% - 24px,1180px);
    gap:12px;
    min-height:62px;
  }
  .nav-in > .nav-links,
  .nav-links,
  .nav-actions{gap:4px}
  .nav-links a,
  .nav-actions a{
    min-height:38px;
    padding:7px 9px;
  }
  .hero,
  .page-hero,
  .hero-card,
  .heroPanel{
    margin-top:16px;
    border-radius:22px;
    padding:26px 20px;
  }
  .section,
  .content-section,
  .article-section{
    border-radius:20px;
    padding:22px 18px;
  }
}

@media (max-width:620px){
  body > main,
  body > .page,
  body > .wrap,
  main.page,
  .page-main,
  .site-main,
  .content-wrap,
  footer,
  .site-footer{
    width:calc(100% - 20px);
  }

  .nav-in{
    width:calc(100% - 20px);
    flex-wrap:wrap;
    justify-content:space-between;
  }

  .nav-in > .nav-links,
  .nav-links,
  .nav-actions{
    width:100%;
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
    padding-bottom:2px;
  }
  .nav-in > .nav-links::-webkit-scrollbar,
  .nav-links::-webkit-scrollbar,
  .nav-actions::-webkit-scrollbar{display:none}

  .nav-links a,
  .nav-actions a{white-space:nowrap}

  .hero h1,
  .page-hero h1,
  .hero-card h1,
  .heroPanel h1{
    font-size:clamp(29px,9vw,42px);
  }

  .hero p,
  .page-hero p,
  .hero-card p,
  .heroPanel p{
    font-size:14px;
  }

  .section,
  .content-section,
  .article-section,
  .card,
  .panel,
  .feature,
  .info-card,
  .section-card,
  .article-card{
    border-radius:18px;
  }

  .section h2,
  .content-section h2,
  .article-section h2{font-size:24px}

  th,td{
    padding:10px;
    font-size:12px;
  }

  .card,
  .panel,
  .feature,
  .info-card,
  .section-card,
  .article-card{min-width:0}
}

@media (max-width:380px){
  button,
  .btn,
  .button,
  [role="button"]{min-height:44px}
  input,
  select,
  textarea{min-height:46px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,
  *::before,
  *::after{transition:none!important}
}

/* V2026 UI deployment freshness marker — latest universal UX layer */


/* ============================================================
   MILAN V2026 — Motion Studio / Ambient Web5 Animation Layer
   Safe, additive motion: entrance, depth, hover, focus, ambient glow.
   No layout dependencies; reduced-motion users get a static surface.
   ============================================================ */

:root{
  --milan-motion-fast:.18s;
  --milan-motion-med:.42s;
  --milan-motion-slow:8s;
  --milan-motion-ease:cubic-bezier(.22,1,.36,1);
}

/* Living interface: subtle ambient light without expensive canvas/WebGL. */
body{
  background-color:var(--milan-ui-bg,#050915);
  background-attachment:fixed;
}

body::before{
  content:"";
  position:fixed;
  inset:-14%;
  z-index:-1;
  pointer-events:none;
  opacity:.34;
  background:
    radial-gradient(34% 26% at 16% 18%,rgba(88,121,255,.13),transparent 70%),
    radial-gradient(28% 24% at 84% 12%,rgba(223,70,200,.11),transparent 70%),
    radial-gradient(24% 20% at 55% 86%,rgba(255,156,56,.06),transparent 72%);
  filter:blur(28px);
  animation:milanAmbientDrift var(--milan-motion-slow) ease-in-out infinite alternate;
}

@keyframes milanAmbientDrift{
  0%{transform:translate3d(-1.5%,-1%,0) scale(1)}
  50%{transform:translate3d(1.5%,1%,0) scale(1.035)}
  100%{transform:translate3d(-.5%,1.5%,0) scale(1.015)}
}

/* Header becomes an active glass surface on scroll/hover. */
.nav{
  animation:milanNavIn .56s var(--milan-motion-ease) both;
}

@keyframes milanNavIn{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:none}
}

.nav::after{
  content:"";
  position:absolute;
  left:8%;
  right:8%;
  bottom:-1px;
  height:1px;
  opacity:.45;
  background:linear-gradient(90deg,transparent,rgba(88,121,255,.55),rgba(223,70,200,.45),transparent);
  transform-origin:left;
  transform:scaleX(.72);
  transition:transform .7s var(--milan-motion-ease),opacity .35s ease;
}

.nav:hover::after{transform:scaleX(1);opacity:.9}

/* Brand presence. */
.brand img{
  animation:milanLogoFloat 5.5s ease-in-out infinite;
}

@keyframes milanLogoFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-2px) rotate(.6deg)}
}

/* Hero surfaces: cinematic entrance + light sweep. */
.hero,
.page-hero,
.hero-card,
.heroPanel{
  animation:milanHeroIn .72s var(--milan-motion-ease) both;
  isolation:isolate;
}

.hero::before,
.page-hero::before,
.hero-card::before,
.heroPanel::before{
  content:"";
  position:absolute;
  inset:-45%;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.065) 49%,transparent 56%);
  transform:translateX(-28%) rotate(8deg);
  animation:milanHeroSweep 7s ease-in-out infinite;
}

@keyframes milanHeroIn{
  from{opacity:0;transform:translateY(16px) scale(.988)}
  to{opacity:1;transform:none}
}

@keyframes milanHeroSweep{
  0%,70%{transform:translateX(-34%) rotate(8deg);opacity:0}
  82%{opacity:.65}
  100%{transform:translateX(34%) rotate(8deg);opacity:0}
}

/* Section/card rhythm: restrained staggered entrance. */
.section,
.content-section,
.article-section,
.card,
.panel,
.feature,
.info-card,
.section-card,
.article-card{
  animation:milanSurfaceIn .56s var(--milan-motion-ease) both;
}

main > .section:nth-child(2),
main > .content-section:nth-child(2),
main > .article-section:nth-child(2),
main > .card:nth-child(2){animation-delay:.06s}

main > .section:nth-child(3),
main > .content-section:nth-child(3),
main > .article-section:nth-child(3),
main > .card:nth-child(3){animation-delay:.12s}

main > .section:nth-child(4),
main > .content-section:nth-child(4),
main > .article-section:nth-child(4),
main > .card:nth-child(4){animation-delay:.18s}

@keyframes milanSurfaceIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}

/* Hover depth: feels tactile, but only on devices that support true hover. */
@media (hover:hover) and (pointer:fine){
  .card,
  .panel,
  .feature,
  .info-card,
  .section-card,
  .article-card,
  .hero,
  .page-hero,
  .hero-card,
  .heroPanel{
    transition:
      transform var(--milan-motion-med) var(--milan-motion-ease),
      border-color .28s ease,
      box-shadow var(--milan-motion-med) var(--milan-motion-ease),
      background .28s ease !important;
    will-change:transform;
  }

  .card:hover,
  .panel:hover,
  .feature:hover,
  .info-card:hover,
  .section-card:hover,
  .article-card:hover{
    transform:translateY(-4px);
    box-shadow:
      0 24px 70px rgba(0,0,0,.24),
      inset 0 1px 0 rgba(255,255,255,.07);
  }

  .hero:hover,
  .page-hero:hover,
  .hero-card:hover,
  .heroPanel:hover{
    transform:translateY(-2px);
  }
}

/* Interactive controls get a tiny magnetic lift + focus halo. */
@media (hover:hover) and (pointer:fine){
  button:not(:disabled),
  .btn:not(:disabled),
  .button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]){
    position:relative;
    overflow:hidden;
  }

  button:not(:disabled)::after,
  .btn:not(:disabled)::after,
  .button:not(:disabled)::after,
  [role="button"]:not([aria-disabled="true"])::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.18) 50%,transparent 72%);
    transform:translateX(-130%);
    transition:transform .65s var(--milan-motion-ease);
  }

  button:not(:disabled):hover::after,
  .btn:not(:disabled):hover::after,
  .button:not(:disabled):hover::after,
  [role="button"]:not([aria-disabled="true"]):hover::after{
    transform:translateX(130%);
  }
}

/* Focus response is visible and animated, not just a static outline. */
input,
select,
textarea{
  transition:
    transform var(--milan-motion-fast) var(--milan-motion-ease),
    border-color var(--milan-motion-fast) ease,
    box-shadow var(--milan-motion-fast) ease,
    background var(--milan-motion-fast) ease !important;
}

input:focus,
select:focus,
textarea:focus{
  transform:translateY(-1px);
}

/* Status pills / badges: low-key pulse to signal live state. */
.badge,
.tag,
.pill,
.status{
  animation:milanBadgePulse 3.8s ease-in-out infinite;
}

@keyframes milanBadgePulse{
  0%,100%{box-shadow:0 0 0 rgba(88,121,255,0)}
  50%{box-shadow:0 0 0 4px rgba(88,121,255,.045)}
}

/* App/social content gets a slightly more alive hover state. */
@media (hover:hover) and (pointer:fine){
  .person,
  .post,
  .quickStat,
  .milan-feed-card,
  .mcc-card,
  .music-links a,
  .genre-chips button,
  .mz-chip{
    transition:
      transform .3s var(--milan-motion-ease),
      box-shadow .3s ease,
      border-color .25s ease,
      background-color .25s ease !important;
  }

  .person:hover,
  .quickStat:hover,
  .milan-feed-card:hover,
  .mcc-card:hover{
    transform:translateY(-3px) scale(1.003);
  }
}

/* Bottom/edge dock controls get a gentle "alive" breathing effect. */
.ma-fab,
.mcm-fab,
.mlz-fab,
#milan-flow-btn,
#milan-fab-top,
#milan-burger{
  animation:milanDockBreathe 4.8s ease-in-out infinite;
}

@keyframes milanDockBreathe{
  0%,100%{filter:brightness(1);box-shadow:0 8px 24px rgba(0,0,0,.35)}
  50%{filter:brightness(1.045);box-shadow:0 12px 30px rgba(0,0,0,.42)}
}

/* Mobile drawer feels native: content follows the panel rather than popping in. */
body.milan-drawer-open #milan-drawer .md-head,
body.milan-drawer-open #milan-drawer .md-user,
body.milan-drawer-open #milan-drawer .md-item,
body.milan-drawer-open #milan-drawer .md-logout{
  animation:milanDrawerItemIn .38s var(--milan-motion-ease) both;
}

body.milan-drawer-open #milan-drawer .md-item:nth-of-type(2){animation-delay:.035s}
body.milan-drawer-open #milan-drawer .md-item:nth-of-type(3){animation-delay:.07s}
body.milan-drawer-open #milan-drawer .md-item:nth-of-type(4){animation-delay:.105s}

@keyframes milanDrawerItemIn{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:none}
}

/* Back-to-top appears with more physical lift. */
#milan-fab-top.show{
  animation:milanFabIn .38s var(--milan-motion-ease) both;
}

@keyframes milanFabIn{
  from{opacity:0;transform:translateY(14px) scale(.78) rotate(-8deg)}
  to{opacity:1;transform:translateY(0) scale(1) rotate(0)}
}

/* Keep animations off when the user has requested less motion. */
@media (prefers-reduced-motion:reduce){
  body::before,
  .nav,
  .brand img,
  .hero,
  .page-hero,
  .hero-card,
  .heroPanel,
  .hero::before,
  .page-hero::before,
  .hero-card::before,
  .heroPanel::before,
  .section,
  .content-section,
  .article-section,
  .card,
  .panel,
  .feature,
  .info-card,
  .section-card,
  .article-card,
  .badge,
  .tag,
  .pill,
  .status,
  .ma-fab,
  .mcm-fab,
  .mlz-fab,
  #milan-flow-btn,
  #milan-fab-top,
  #milan-burger{
    animation:none !important;
  }
}


/* ============================================================
   MILAN V2026.10 — Universal HTML UI/UX + data visibility layer
   Applies to public/content/utility pages that load milan-core.css.
   Additive: does not change API/data behavior or hide content.
   ============================================================ */

:root{
  --milan-data-bg:rgba(255,255,255,.035);
  --milan-data-bg-strong:rgba(255,255,255,.055);
  --milan-data-line:rgba(148,163,184,.16);
  --milan-data-text:#f5f7ff;
  --milan-data-muted:#9aa8c2;
  --milan-data-green:#34d399;
}

main, .page, .wrap, .container, .content, .content-wrap{
  min-width:0;
}

main > h1:first-child,
.page > h1:first-child,
.wrap > h1:first-child{
  margin-top:28px;
}

main > p,
.page > p,
.wrap > p{
  max-width:900px;
  line-height:1.8;
  color:var(--milan-data-muted);
}

/* Data/metric surfaces */
.stats, .stats-grid, .metrics, .metrics-grid, .data-grid, .kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:18px 0;
}
.stat, .metric, .kpi, .data-point, .stat-card{
  min-width:0;
  padding:16px;
  border:1px solid var(--milan-data-line);
  border-radius:18px;
  background:linear-gradient(145deg,rgba(18,31,64,.78),rgba(7,14,30,.82));
  box-shadow:0 12px 35px rgba(0,0,0,.10);
}
.stat b, .metric b, .kpi b, .stat-card b{
  display:block;
  font-size:clamp(20px,3vw,30px);
  line-height:1.05;
  color:var(--milan-data-text);
}
.stat span, .metric span, .kpi span, .stat-card span,
.stat small, .metric small, .kpi small, .stat-card small{
  display:block;
  margin-top:6px;
  color:var(--milan-data-muted);
  font-size:11px;
  line-height:1.5;
}

/* Reusable content grids */
.grid2, .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3, .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cards, .card-grid, .feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cards > *, .card-grid > *, .feature-grid > *, .grid2 > *, .grid3 > *{min-width:0}

/* Tables: data remains readable instead of becoming clipped */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:18px 0;
  overflow:hidden;
  border:1px solid var(--milan-data-line);
  border-radius:16px;
  background:rgba(7,14,30,.58);
}
thead th{
  text-align:left;
  padding:12px 14px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:#c9d3e7;
  background:rgba(255,255,255,.045);
  border-bottom:1px solid var(--milan-data-line);
}
tbody td{
  padding:12px 14px;
  vertical-align:top;
  color:#dfe6f3;
  border-bottom:1px solid rgba(148,163,184,.09);
}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:rgba(255,255,255,.025)}

/* Lists/details used by dashboards and informational pages */
dl.data-list, .details-grid, .info-list{
  display:grid;
  gap:10px;
}
dl.data-list > div, .details-grid > div, .info-list > div{
  display:grid;
  grid-template-columns:minmax(130px,.7fr) minmax(0,1.3fr);
  gap:12px;
  padding:11px 13px;
  border:1px solid rgba(148,163,184,.10);
  border-radius:13px;
  background:var(--milan-data-bg);
}
dl.data-list dt, .details-grid strong{font-weight:800;color:#cbd5e1}
dl.data-list dd, .details-grid span{margin:0;color:#aebbd0;overflow-wrap:anywhere}

/* Real controls */
.field, .form-field{display:grid;gap:7px}
.field label, .form-field label{margin:0;color:#dfe7f5;font-size:12px;font-weight:800}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid > .full{grid-column:1/-1}

fieldset{
  min-width:0;
  margin:16px 0;
  padding:16px;
  border:1px solid var(--milan-data-line);
  border-radius:18px;
  background:rgba(255,255,255,.018);
}
legend{
  padding:0 8px;
  color:#dfe7f5;
  font-size:12px;
  font-weight:900;
}

details{
  margin:12px 0;
  border:1px solid var(--milan-data-line);
  border-radius:15px;
  background:rgba(255,255,255,.025);
  overflow:hidden;
}
details > summary{
  cursor:pointer;
  padding:13px 15px;
  font-weight:800;
  color:#e6edf8;
}
details > :not(summary){padding-inline:15px}

/* Status / state chips */
.status, .badge, .pill, .tag, .chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:30px;
  padding:5px 10px;
  border:1px solid rgba(148,163,184,.16);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:#dce5f4;
  font-size:11px;
  font-weight:800;
  line-height:1.2;
}

/* Article/readability */
article, .prose, .article, .reading-content{
  max-width:900px;
  margin-inline:auto;
}
article h2, .prose h2, .article h2, .reading-content h2{
  margin-top:32px;
  color:#f7f9ff;
}
article p, .prose p, .article p, .reading-content p{
  line-height:1.85;
  color:#b4bfd2;
}
article li, .prose li, .article li, .reading-content li{
  line-height:1.75;
  color:#b4bfd2;
}
blockquote{
  margin:18px 0;
  padding:14px 16px;
  border-left:3px solid var(--milan-ui-accent,#ff9c38);
  border-radius:0 14px 14px 0;
  background:rgba(255,255,255,.035);
  color:#dbe4f3;
}
pre{
  max-width:100%;
  overflow:auto;
  padding:15px;
  border:1px solid var(--milan-data-line);
  border-radius:16px;
  background:#030712;
  color:#dbe7f7;
  line-height:1.6;
}
code{color:#dbe7f7}

/* Empty/loading states should look intentional */
.empty, .empty-state, .loading, .loading-state{
  min-height:120px;
  display:grid;
  place-items:center;
  padding:24px;
  text-align:center;
  border:1px dashed var(--milan-data-line);
  border-radius:18px;
  background:rgba(255,255,255,.018);
  color:var(--milan-data-muted);
}

/* Images/media and embeds keep their aspect ratio */
figure{margin:18px 0}
figure img, .content img, article img, .article img{
  height:auto;
  border-radius:16px;
}
figcaption{
  margin-top:7px;
  color:#7887a2;
  font-size:11px;
  line-height:1.5;
}

/* Wide content scrolls cleanly on small devices */
.table-wrap, .data-table-wrap, .overflow-x-auto{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.table-wrap table, .data-table-wrap table, .overflow-x-auto table{min-width:620px}

@media (max-width:900px){
  .stats, .stats-grid, .metrics, .metrics-grid, .data-grid, .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards, .card-grid, .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  body{font-size:14px}
  .stats, .stats-grid, .metrics, .metrics-grid, .data-grid, .kpi-grid,
  .cards, .card-grid, .feature-grid, .grid2, .grid-2, .grid3, .grid-3, .form-grid{
    grid-template-columns:1fr;
  }
  .form-grid > .full{grid-column:auto}
  dl.data-list > div, .details-grid > div, .info-list > div{
    grid-template-columns:1fr;
    gap:5px;
  }
  table{font-size:12px}
  thead th, tbody td{padding:10px 11px}
  .hero, .page-hero, .hero-card, .heroPanel{
    margin-top:16px;
    padding:22px 18px;
    border-radius:20px;
  }
}

/* ============================================================
   MILAN GLOBAL UX QUALITY LAYER — shared by every page
   Guardrails: responsive layout, accessible interactions, readable
   controls, keyboard focus and device-safe spacing.
   ============================================================ */
:root {
  --milan-ux-focus: #9ab7ff;
  --milan-ux-focus-ring: rgba(125, 160, 255, .24);
  --milan-ux-hit-area: 42px;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 92px;
}
body {
  min-width: 320px;
  max-width: 100%;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:where(main, header, footer, section, article, aside, nav, form, fieldset,
       figure, .container, .wrap, .shell, .layout, .layout-main, .main,
       .main-content, .page-container, .page-wrap, .page-content,
       .content-wrap, .content-container, .app-content, .settings-content,
       .admin-content) {
  min-width: 0;
}
:where(img, picture, video, canvas, iframe) {
  max-width: 100%;
}
:where(img, video) {
  height: auto;
}
:where(input, textarea, select, button) {
  max-width: 100%;
}
:where(pre, code, kbd, samp) {
  overflow-wrap: anywhere;
}
:where([id]) {
  scroll-margin-top: 92px;
}
:where(a, button, summary, [role="button"], input[type="button"],
       input[type="submit"], input[type="reset"]) {
  touch-action: manipulation;
}
:where(a, button, input, select, textarea, summary, [role="button"],
       [tabindex]):focus-visible {
  outline: 2px solid var(--milan-ux-focus);
  outline-offset: 3px;
}
:where(button, input[type="button"], input[type="submit"],
       input[type="reset"], [role="button"]) {
  -webkit-tap-highlight-color: transparent;
}
:where(.nav-links a, .nav-in > a, .navbar a, .navbar-inner a,
       .topbar a, .topbar-inner a, header nav a) {
  scroll-margin-top: 92px;
}
:where(.skip-link, .milan-skip-link, .terms-skip-link) {
  position: absolute;
  z-index: 99999;
  left: 12px;
  top: -70px;
  padding: 11px 15px;
  border-radius: 10px;
  background: #f8fafc;
  color: #0b1020;
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}
:where(.skip-link, .milan-skip-link, .terms-skip-link):focus {
  top: 12px;
}
::selection {
  background: rgba(91, 130, 242, .32);
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  :where(a, button, [role="button"]) {
    transition-property: color, background-color, border-color, box-shadow;
    transition-duration: .16s;
  }
}
@media (max-width: 900px) {
  :where(.row, .flex-row, .page-toolbar, .section-toolbar,
         .settings-toolbar, .admin-toolbar, .form-actions) {
    min-width: 0;
  }
}
@media (max-width: 680px) {
  html { scroll-padding-top: 82px; }
  :where(.nav-in, .navbar-inner, .header-inner, .topbar-inner) {
    min-width: 0;
    max-width: 100%;
  }
  .nav-links {
    min-width: 0;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex: 0 0 auto; min-height: var(--milan-ux-hit-area); }
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
         textarea, select) {
    font-size: 16px;
    min-width: 0;
    max-width: 100%;
  }
  :where(button:not(.icon-button):not(.iconBtn):not(.close-btn):not(.closeBtn):not([data-icon-only]),
         input[type="button"], input[type="submit"], input[type="reset"]) {
    min-height: var(--milan-ux-hit-area);
  }
  :where(.table-wrap, .data-table-wrap, .overflow-x-auto, .table-responsive) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  :where(.form-grid, .grid-4, .grid4, .columns-4) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  :where(.form-grid, .grid-4, .grid4, .columns-4,
         .grid-3, .grid3, .columns-3) {
    grid-template-columns: minmax(0, 1fr);
  }
  :where(.page-toolbar, .section-toolbar, .settings-toolbar,
         .admin-toolbar, .form-actions) {
    flex-wrap: wrap;
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* MILAN CROSS-PAGE UI/UX POLISH — 2026-10-16 — additive shared visual polish */
:root {
  --milan-polish-easing: cubic-bezier(.22,.68,0,1);
}
:where(.card,.panel,.surface,.feature-card,.post-card,.feed-card,
       .settings-card,.stat-card,.metric-card,.dashboard-card,
       .hero-card,.data-card,.music-card,.profile-card,.auth-card,.login-card) {
  min-width: 0;
  transition: border-color 180ms var(--milan-polish-easing),
              box-shadow 180ms var(--milan-polish-easing),
              background-color 180ms var(--milan-polish-easing);
}
@media (hover:hover) and (pointer:fine) {
  :where(.card,.panel,.surface,.feature-card,.post-card,.feed-card,
         .settings-card,.stat-card,.metric-card,.dashboard-card,
         .hero-card,.data-card,.music-card,.profile-card,.auth-card,.login-card):hover {
    border-color: rgba(148,163,184,.28);
    box-shadow: 0 10px 28px rgba(0,0,0,.12);
  }
  :where(button:not(:disabled),.btn:not(:disabled),a.button,
         input[type="button"]:not(:disabled),
         input[type="submit"]:not(:disabled),
         [role="button"]:not([aria-disabled="true"])) {
    transition: filter 160ms var(--milan-polish-easing),
                box-shadow 160ms var(--milan-polish-easing),
                border-color 160ms var(--milan-polish-easing);
  }
  :where(button:not(:disabled),.btn:not(:disabled),a.button,
         input[type="button"]:not(:disabled),
         input[type="submit"]:not(:disabled),
         [role="button"]:not([aria-disabled="true"])):hover {
    filter: brightness(1.035);
  }
}
:where(input[type="text"],input[type="email"],input[type="password"],
       input[type="search"],input[type="url"],input[type="tel"],
       input[type="number"],textarea,select) {
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
:where(h1,h2,h3,.page-title,.hero-title,.section-title) {
  text-wrap: balance;
}
@media (max-width:680px) {
  :where(.card,.panel,.surface,.feature-card,.post-card,.feed-card,
         .settings-card,.data-card,.music-card,.profile-card,.auth-card,.login-card) {
    max-width: 100%;
  }
}
@media (prefers-reduced-motion:reduce) {
  :where(.card,.panel,.surface,.feature-card,.post-card,.feed-card,
         .settings-card,.stat-card,.metric-card,.dashboard-card,.hero-card,
         .data-card,.music-card,.profile-card,.auth-card,.login-card,
         button,input,select,textarea,a.button) {
    transition: none !important;
  }
}