/*
 * Abqary Live — Phase 5 shared experience layer
 * Loaded after nita-mobile-redesign.css. Presentation-only; no API or database behavior.
 * Keep admin screens explicitly excluded from application chrome overrides.
 */
:root {
    --n5-green: #18bd79;
    --n5-green-strong: #0b9e62;
    --n5-green-soft: #e9fbf1;
    --n5-ink: #202923;
    --n5-muted: #78837b;
    --n5-border: #e7eee9;
    --n5-surface: #ffffff;
    --n5-surface-soft: #f7faf8;
    --n5-pink: #e76ab5;
    --n5-gold: #dcae38;
    --n5-shadow: 0 12px 34px rgba(27, 54, 38, .065);
    --n5-shadow-hover: 0 17px 38px rgba(27, 54, 38, .105);
    --n5-radius-xl: 26px;
    --n5-radius-lg: 20px;
    --n5-radius-md: 14px;
}

/* Accessibility and shared application shell */
body.app-nita:not(.app-admin) {
    color: var(--n5-ink);
    background: #f7f9f7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body.app-nita:not(.app-admin) main { min-height: 55vh; }
body.app-nita:not(.app-admin) a { -webkit-tap-highlight-color: rgba(24, 189, 121, .12); }
body.app-nita:not(.app-admin) :where(button, input, select, textarea, a, summary):focus-visible {
    outline: 3px solid rgba(24, 189, 121, .75);
    outline-offset: 3px;
}
.nita-skip-link {
    position: fixed;
    z-index: 3000;
    top: 8px;
    right: 8px;
    transform: translateY(-160%);
    padding: 12px 16px;
    border-radius: 12px;
    color: #fff;
    background: #08794b;
    box-shadow: var(--n5-shadow);
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
}
.nita-skip-link:focus { transform: translateY(0); }
body.app-nita:not(.app-admin) #main-content { scroll-margin-top: 96px; }
body.app-nita:not(.app-admin) .section { padding-top: clamp(22px, 4vw, 42px); padding-bottom: clamp(26px, 4vw, 46px); }
body.app-nita:not(.app-admin) .section-kicker { color: var(--n5-green-strong); font-size: 10px; font-weight: 950; letter-spacing: .11em; }
body.app-nita:not(.app-admin) .section-heading,
body.app-nita:not(.app-admin) .wallet-heading,
body.app-nita:not(.app-admin) .voice-lobby-toolbar,
body.app-nita:not(.app-admin) .room-interaction-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
body.app-nita:not(.app-admin) :where(.section-heading h1,.section-heading h2,.wallet-heading h1,.voice-lobby-toolbar h2,.room-interaction-heading h2) {
    color: var(--n5-ink); font-weight: 950; letter-spacing: -.025em;
}
body.app-nita:not(.app-admin) .button {
    min-height: 42px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: 14px;
    font-size: 12px; font-weight: 850;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
body.app-nita:not(.app-admin) .button-primary {
    color: #fff; border-color: var(--n5-green); background: linear-gradient(135deg, #25ca83, #0da86a);
    box-shadow: 0 6px 16px rgba(24, 189, 121, .17);
}
body.app-nita:not(.app-admin) .button-primary:hover { background: linear-gradient(135deg, #17bb76, #078d59); box-shadow: 0 9px 20px rgba(24, 189, 121, .24); transform: translateY(-1px); }
body.app-nita:not(.app-admin) .button-outline { color: #48554c; border-color: #dfe8e2; background: #fff; }
body.app-nita:not(.app-admin) .button-outline:hover { color: var(--n5-green-strong); border-color: #8cddb5; background: #f5fff9; }
body.app-nita:not(.app-admin) .button-danger { color: #c44545; border-color: #f3cccc; background: #fff8f8; }
body.app-nita:not(.app-admin) .button-full { width: 100%; }
body.app-nita:not(.app-admin) :where(.setup-notice,.wallet-notice,.form-errors,.flash) { border-radius: 17px; line-height: 1.75; }
body.app-nita:not(.app-admin) .setup-notice { border: 1px solid #f0e4c7; background: linear-gradient(120deg, #fffdf6, #fff9e9); }
body.app-nita:not(.app-admin) .form-errors { border: 1px solid #f0caca; background: #fff7f7; color: #a73535; }
body.app-nita:not(.app-admin) .empty-state { border: 1px dashed #dce8df; border-radius: var(--n5-radius-xl); background: linear-gradient(150deg, #fff, #f8fcf9); }
body.app-nita:not(.app-admin) .empty-state :where(h2,h3) { color: var(--n5-ink); font-weight: 950; }
body.app-nita:not(.app-admin) .empty-symbol { display: grid; place-items: center; width: 54px; height: 54px; margin-inline: auto; border-radius: 18px; color: #0ca265; background: #e6fbef; font-size: 25px; }
body.app-nita:not(.app-admin) .status-badge,
body.app-nita:not(.app-admin) .category-tag,
body.app-nita:not(.app-admin) .role-tag,
body.app-nita:not(.app-admin) .level-pill,
body.app-nita:not(.app-admin) .live-pill { border-radius: 999px; font-weight: 850; }
body.app-nita:not(.app-admin) .category-tag { color: #138254; background: #e8f9ef; border: 1px solid #d7f3e2; }
body.app-nita:not(.app-admin) .live-pill { color: #087e50; background: #e4fbef; border: 1px solid #cbf2dc; }
body.app-nita:not(.app-admin) .live-pill i,
body.app-nita:not(.app-admin) .voice-live-badge i { display: inline-block; width: 6px; height: 6px; margin-inline-end: 5px; border-radius: 50%; background: #17bc79; box-shadow: 0 0 0 3px rgba(23,188,121,.12); }

/* Forms: consistent touch targets, readable labels, and deliberate validation states */
body.app-nita:not(.app-admin) :where(.form-stack,.create-room-form) { gap: 16px; }
body.app-nita:not(.app-admin) :where(.form-stack label,.create-room-form label,.settings-card label) { color: #46564b; font-size: 12px; font-weight: 850; }
body.app-nita:not(.app-admin) :where(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) {
    width: 100%; min-height: 46px; border: 1px solid #dfe8e2; border-radius: 13px;
    color: #26362b; background: #fff; padding: 11px 13px; font: inherit; font-size: 13px;
    box-shadow: inset 0 1px 1px rgba(20,40,25,.018); transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
body.app-nita:not(.app-admin) textarea { min-height: 112px; resize: vertical; }
body.app-nita:not(.app-admin) :where(input,select,textarea)::placeholder { color: #a2aaa4; }
body.app-nita:not(.app-admin) :where(input,select,textarea):focus { border-color: #55cf91; box-shadow: 0 0 0 4px rgba(24,189,121,.105); outline: none; }
body.app-nita:not(.app-admin) :where(input,select,textarea)[aria-invalid=true] { border-color: #d96767; box-shadow: 0 0 0 3px rgba(217,103,103,.10); }
body.app-nita:not(.app-admin) input[type=checkbox], body.app-nita:not(.app-admin) input[type=radio] { accent-color: var(--n5-green-strong); }
body.app-nita:not(.app-admin) .form-stack small,
body.app-nita:not(.app-admin) .form-help { color: #7b897f; font-size: 11px; line-height: 1.7; }

/* Wallet and currency history */
body.app-page-wallet .wallet-page { max-width: 1080px; }
body.app-page-wallet .wallet-heading { margin-bottom: 20px; }
body.app-page-wallet .wallet-heading h1 { margin: 3px 0 0; font-size: clamp(25px, 4vw, 36px); }
body.app-page-wallet .wallet-balance-card {
    position: relative; isolation: isolate; overflow: hidden; min-height: 205px; padding: clamp(24px,4vw,38px);
    display: flex; align-items: center; justify-content: space-between; gap: 22px;
    border: 1px solid #c5efd6; border-radius: 30px;
    color: #184a32; background: radial-gradient(circle at 90% 8%, rgba(255,255,255,.72), transparent 30%), linear-gradient(125deg,#dbffe9 0%,#adf2cc 53%,#f4ffd5 100%);
    box-shadow: 0 15px 34px rgba(33,151,88,.09);
}
body.app-page-wallet .wallet-balance-card::before,
body.app-page-wallet .wallet-balance-card::after { content: ""; position: absolute; z-index: -1; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.54); border-radius: 50%; }
body.app-page-wallet .wallet-balance-card::before { left: -45px; bottom: -110px; }
body.app-page-wallet .wallet-balance-card::after { left: 10px; bottom: -130px; width: 215px; height: 215px; }
body.app-page-wallet .wallet-balance-copy { position: relative; z-index: 1; }
body.app-page-wallet .wallet-balance-copy :where(strong,.wallet-balance-value) { color: #174d32; font-size: clamp(31px,5vw,48px); font-weight: 1000; letter-spacing: -.04em; }
body.app-page-wallet .wallet-balance-copy p { max-width: 420px; color: #49775b; font-size: 12px; line-height: 1.8; }
body.app-page-wallet .wallet-coin-art { display: grid; place-items: center; width: clamp(82px,15vw,126px); height: clamp(82px,15vw,126px); flex: 0 0 auto; border: 1px solid rgba(255,255,255,.8); border-radius: 38%; color: #b57b13; background: radial-gradient(circle at 30% 25%,#fff8c7,#ffd964 60%,#f4b534); box-shadow: inset 0 4px 9px rgba(255,255,255,.6), 0 12px 20px rgba(146,105,24,.14); font-size: clamp(38px,7vw,58px); }
body.app-page-wallet .wallet-section { margin-top: 26px; padding: clamp(17px,3vw,26px); border: 1px solid var(--n5-border); border-radius: 24px; background: #fff; box-shadow: 0 5px 22px rgba(22,52,32,.028); }
body.app-page-wallet .wallet-section .section-heading { padding-bottom: 15px; border-bottom: 1px solid #eff3f0; }
body.app-page-wallet .wallet-transaction-list { display: grid; gap: 2px; }
body.app-page-wallet .wallet-transaction { display: grid; grid-template-columns: 46px minmax(0,1fr) auto; align-items: center; gap: 13px; padding: 14px 2px; border-bottom: 1px solid #f0f3f0; }
body.app-page-wallet .wallet-transaction:last-child { border-bottom: 0; }
body.app-page-wallet .tx-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 15px; background: #effbf4; color: #13965c; }
body.app-page-wallet .tx-icon.tx-negative { color: #d25b66; background: #fff0f0; }
body.app-page-wallet .tx-main strong { display: block; color: #2a352d; font-size: 12px; }
body.app-page-wallet .tx-main small { color: #8a958d; font-size: 10px; }
body.app-page-wallet .tx-amount { direction: ltr; text-align: left; font-size: 14px; font-weight: 950; white-space: nowrap; }
body.app-page-wallet .tx-amount.positive { color: #0a9e60; }
body.app-page-wallet .tx-amount.negative { color: #ca5b63; }
body.app-page-wallet .received-gift-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
body.app-page-wallet .received-gift { min-width: 0; padding: 14px; border: 1px solid #edf1ed; border-radius: 17px; background: #fbfdfb; }

/* Gift shop: product-led catalog and clearer cost information */
body.app-page-gifts .gifts-page { max-width: 1160px; }
body.app-page-gifts .gifts-hero { position: relative; overflow: hidden; padding: clamp(23px,5vw,48px); border: 1px solid #f2e3bc; border-radius: 30px; background: radial-gradient(circle at 10% 10%,rgba(255,255,255,.9),transparent 28%),linear-gradient(125deg,#fff4b9,#fff9df 52%,#e3ffed); }
body.app-page-gifts .premium-page-icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 15px; border: 1px solid rgba(255,255,255,.8); border-radius: 22px; background: rgba(255,255,255,.72); box-shadow: 0 8px 20px rgba(99,83,33,.07); font-size: 32px; }
body.app-page-gifts .gifts-hero h1 { margin: 7px 0 10px; color: #342e20; font-size: clamp(28px,4vw,42px); font-weight: 1000; letter-spacing: -.035em; }
body.app-page-gifts .gifts-hero p { max-width: 650px; color: #756e54; font-size: 13px; line-height: 1.9; }
body.app-page-gifts .gift-store-shortcuts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
body.app-page-gifts .gift-store-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 17px; margin-top: 26px; }
body.app-page-gifts .gift-store-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 17px; border: 1px solid #e9eee9; border-radius: 22px; background: #fff; box-shadow: 0 5px 20px rgba(29,54,36,.035); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; text-align: center; }
body.app-page-gifts .gift-store-card:hover { transform: translateY(-4px); border-color: #c4ecd4; box-shadow: var(--n5-shadow-hover); }
body.app-page-gifts .gift-store-art { display: grid; place-items: center; width: 100%; aspect-ratio: 1.08; overflow: hidden; border-radius: 17px; color: #c18a20; background: radial-gradient(circle at 30% 25%,#fff,#fff0b7 48%,#e6fbe9); font-size: clamp(42px,6vw,70px); }
body.app-page-gifts .gift-store-art img { width: 100%; height: 100%; object-fit: contain; }
body.app-page-gifts .gift-store-card h2 { margin: 14px 0 5px; color: #28342c; font-size: 15px; font-weight: 950; }
body.app-page-gifts .gift-store-card :where(.gift-price,.gift-cost,.gift-store-price) { color: #a57914; font-weight: 950; }
body.app-page-gifts .gift-store-card .button { margin-top: 12px; }
body.app-page-gifts .svip-disclaimer { margin-top: 20px; color: #7e877f; font-size: 11px; line-height: 1.8; }

/* SVIP tiers: comparison cards with clear selected/upgrading states */
body.app-page-svip .svip-page { max-width: 1160px; }
body.app-page-svip .svip-hero { overflow: hidden; border: 1px solid #ead9f6; border-radius: 30px; background: radial-gradient(circle at 90% 15%,rgba(255,255,255,.9),transparent 30%),linear-gradient(125deg,#f7e8ff,#f7f1ff 55%,#e2fff0); }
body.app-page-svip .svip-hero h1 { color: #352744; font-size: clamp(28px,4vw,42px); font-weight: 1000; }
body.app-page-svip .svip-tier-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; gap: 17px; margin-top: 27px; }
body.app-page-svip .svip-tier-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; padding: 20px; border: 1px solid #e9e1ef; border-radius: 24px; background: #fff; box-shadow: 0 5px 22px rgba(49,35,63,.04); transition: transform .18s ease, box-shadow .18s ease; }
body.app-page-svip .svip-tier-card:hover { transform: translateY(-3px); box-shadow: var(--n5-shadow-hover); }
body.app-page-svip .svip-tier-card:has(.vip-current-pill) { border-color: #a6e6c2; box-shadow: 0 0 0 3px rgba(24,189,121,.08); }
body.app-page-svip .svip-tier-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
body.app-page-svip .svip-tier-emblem { display: grid; place-items: center; width: 55px; height: 55px; border-radius: 19px; color: #a65bce; background: linear-gradient(135deg,#f8e7ff,#ebe9ff); font-size: 28px; }
body.app-page-svip .svip-tier-level { margin-top: 13px; color: #30273a; font-size: 22px; font-weight: 1000; }
body.app-page-svip .svip-tier-coins { color: #a57820; font-size: 12px; font-weight: 900; }
body.app-page-svip .svip-tier-price { margin: 17px 0; color: #1d9e65; font-size: clamp(25px,3vw,35px); font-weight: 1000; }
body.app-page-svip .svip-tier-card .button { margin-top: auto; }
body.app-page-svip .vip-current-pill { padding: 6px 9px; color: #07814f; background: #e5faed; border-radius: 99px; font-size: 10px; font-weight: 900; }
body.app-page-svip .svip-owned-label { color: #128a59; font-size: 11px; font-weight: 900; }

/* Rankings: segmented filters and a cleaner ranking table */
body.app-page-rankings .rankings-page { max-width: 1000px; }
body.app-page-rankings .premium-page-hero { overflow: hidden; border: 1px solid #efdfb9; border-radius: 28px; background: linear-gradient(125deg,#fff1b2,#fffbea 54%,#e6fff0); }
body.app-page-rankings .premium-page-hero h1 { font-size: clamp(26px,4vw,39px); font-weight: 1000; color: #322d20; }
body.app-page-rankings .rankings-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; padding: 6px; border: 1px solid #e8eee9; border-radius: 17px; background: #fff; }
body.app-page-rankings .rankings-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 8px 16px; border-radius: 12px; color: #68756c; background: transparent; font-size: 12px; font-weight: 850; text-decoration: none; }
body.app-page-rankings .rankings-tabs a.active { color: #08794b; background: #e6faee; box-shadow: inset 0 0 0 1px #d3f2df; }
body.app-page-rankings .ranking-list { overflow: hidden; padding: 5px 18px; border: 1px solid #e8eee9; border-radius: 23px; background: #fff; box-shadow: 0 5px 22px rgba(25,50,32,.03); }
body.app-page-rankings .ranking-row { display: grid; grid-template-columns: 44px 50px minmax(0,1fr) auto; align-items: center; gap: 13px; min-height: 82px; padding: 12px 0; border-bottom: 1px solid #f0f3f0; }
body.app-page-rankings .ranking-row:last-child { border-bottom: 0; }
body.app-page-rankings .ranking-number { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 12px; color: #68736b; background: #f3f6f3; font-size: 13px; font-weight: 1000; }
body.app-page-rankings .ranking-number-1 { color: #8b6412; background: linear-gradient(140deg,#fff0a9,#ffe18c); }
body.app-page-rankings .ranking-number-2 { color: #52616a; background: linear-gradient(140deg,#eef3f5,#d9e1e5); }
body.app-page-rankings .ranking-number-3 { color: #99613b; background: linear-gradient(140deg,#fce4d2,#f3c6a8); }
body.app-page-rankings .ranking-avatar { width: 49px; height: 49px; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px #e3ebe5; }
body.app-page-rankings .ranking-person { min-width: 0; color: #29342c; font-size: 13px; font-weight: 900; overflow-wrap: anywhere; }
body.app-page-rankings .ranking-score { direction: ltr; color: #118858; font-size: 13px; font-weight: 1000; white-space: nowrap; }

/* Notifications: unread emphasis without altering read-state actions */
body.app-page-notifications .notifications-page { max-width: 900px; }
body.app-page-notifications .settings-page-heading { margin-bottom: 23px; }
body.app-page-notifications .settings-page-heading h1 { color: var(--n5-ink); font-size: clamp(25px,4vw,35px); font-weight: 1000; }
body.app-page-notifications .notification-list { display: grid; gap: 10px; }
body.app-page-notifications .notification-item { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: start; gap: 13px; padding: 17px; border: 1px solid #e8eee9; border-radius: 19px; background: #fff; box-shadow: 0 4px 15px rgba(20,45,27,.025); transition: border-color .16s ease, background-color .16s ease; }
body.app-page-notifications .notification-item.notification-unread { border-color: #ccefd9; background: linear-gradient(105deg,#fff,#f0fff5); box-shadow: inset -3px 0 #20bf7a, 0 4px 15px rgba(20,45,27,.025); }
body.app-page-notifications .notification-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; color: #108456; background: #e6f9ee; font-size: 20px; }
body.app-page-notifications .notification-content { min-width: 0; color: #445149; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
body.app-page-notifications .notification-content :where(strong,h2,h3) { display: block; margin-bottom: 3px; color: #29352c; font-size: 13px; font-weight: 950; }
body.app-page-notifications .notification-content :where(small,time) { display: block; margin-top: 6px; color: #929d94; font-size: 10px; }

/* Account settings and security */
body.app-page-settings .settings-page { max-width: 1100px; }
body.app-page-settings .settings-page-heading { margin-bottom: 24px; }
body.app-page-settings .settings-page-heading h1 { font-size: clamp(25px,4vw,35px); font-weight: 1000; }
body.app-page-settings .settings-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 17px; }
body.app-page-settings .settings-card,
body.app-page-settings .web-push-settings-card,
body.app-page-settings .email-verification-card { min-width: 0; padding: clamp(17px,3vw,25px); border: 1px solid #e5ede7; border-radius: 23px; background: #fff; box-shadow: 0 5px 20px rgba(24,52,32,.035); }
body.app-page-settings .settings-card h2,
body.app-page-settings .web-push-settings-card h2 { margin: 0 0 14px; color: #26342a; font-size: 16px; font-weight: 950; }
body.app-page-settings .settings-security-note { padding: 13px 15px; border: 1px solid #deeee3; border-radius: 14px; color: #597262; background: #f5fcf7; font-size: 11px; line-height: 1.8; }
body.app-page-settings .email-verified-status { color: #0d8a57; background: #e8faef; border-radius: 99px; }
body.app-page-settings .email-unverified-status { color: #9a6b13; background: #fff5d9; border-radius: 99px; }
body.app-page-settings .web-push-icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; color: #0b915b; background: #e7faef; font-size: 24px; }
body.app-page-settings .web-push-status { color: #65756a; font-size: 11px; line-height: 1.8; }
body.app-page-settings .web-push-actions { display: flex; flex-wrap: wrap; gap: 9px; }

/* Public profiles and own-profile components */
body.app-page-user .public-profile-page { max-width: 1000px; }
body.app-page-user .public-profile-card { overflow: hidden; border: 1px solid #e5ede7; border-radius: 28px; background: #fff; box-shadow: var(--n5-shadow); }
body.app-page-user .public-profile-cover { position: relative; min-height: clamp(135px,24vw,240px); overflow: hidden; background: radial-gradient(circle at 20% 10%,rgba(255,255,255,.55),transparent 32%),linear-gradient(125deg,#a9f0cb,#b4e9fa 52%,#fce7b3); }
body.app-page-user .public-profile-cover img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
body.app-page-user .public-profile-avatar { position: relative; z-index: 1; width: clamp(90px,15vw,132px); height: clamp(90px,15vw,132px); margin-top: calc(clamp(90px,15vw,132px) / -2); border: 5px solid #fff; border-radius: 50%; background: linear-gradient(130deg,#63ddb0,#9ddc7f); box-shadow: 0 4px 16px rgba(22,73,43,.16); }
body.app-page-user .public-profile-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
body.app-page-user .public-profile-name { color: #222e25; font-size: clamp(22px,4vw,31px); font-weight: 1000; overflow-wrap: anywhere; }
body.app-page-user .public-profile-bio { color: #6d7b71; font-size: 13px; line-height: 1.9; }
body.app-page-user .public-profile-badges { display: flex; flex-wrap: wrap; gap: 7px; }
body.app-page-user .public-profile-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; margin-top: 20px; }
body.app-page-user .public-profile-stats > * { padding: 14px 8px; border: 1px solid #edf1ed; border-radius: 15px; background: #f9fcfa; text-align: center; }
body.app-page-user .public-profile-stats strong { display: block; color: #26342a; font-size: 22px; font-weight: 1000; }
body.app-page-user .public-profile-stats span { color: #8a958d; font-size: 10px; }
body.app-page-user .public-profile-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
body.app-page-user .public-profile-actions .button { min-width: 125px; }

/* Discovery of rooms and dedicated voice/video lobbies */
body.app-page-rooms .room-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
body.app-page-rooms .room-card { min-width: 0; overflow: hidden; border: 1px solid #e5ede7; border-radius: 23px; background: #fff; box-shadow: 0 5px 22px rgba(23,50,31,.04); transition: transform .18s ease, box-shadow .18s ease; }
body.app-page-rooms .room-card:hover { transform: translateY(-3px); box-shadow: var(--n5-shadow-hover); }
body.app-page-rooms .room-cover { position: relative; overflow: hidden; aspect-ratio: 1.32; background: linear-gradient(135deg,#b5f1d0,#b8e8f2,#ffe6b5); }
body.app-page-rooms .room-cover img { width: 100%; height: 100%; object-fit: cover; }
body.app-page-rooms .room-card-body { padding: 15px; }
body.app-page-rooms .room-card-body h2 { color: #25332a; font-size: 15px; font-weight: 950; }
body.app-page-rooms .room-host { color: #859187; font-size: 10px; }
body.app-page-rooms .create-room-panel { margin-top: 28px; padding: clamp(17px,3vw,26px); border: 1px solid #e5ede7; border-radius: 24px; background: #fff; box-shadow: 0 5px 22px rgba(23,50,31,.03); }
body.app-page-rooms .create-room-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
body.app-page-rooms .create-room-form .form-wide { grid-column: 1 / -1; }
body.app-page-rooms .create-room-form > button { justify-self: start; min-width: 190px; }
body.app-nita:not(.app-admin) .voice-lobby-hero { position: relative; overflow: hidden; border: 1px solid #d8eddf; border-radius: 29px; background: radial-gradient(circle at 87% 5%,rgba(255,255,255,.82),transparent 28%),linear-gradient(125deg,#dbffeb,#eafbf2 53%,#e6f5ff); }
body.app-nita:not(.app-admin) .voice-lobby-hero h1 { color: #253b2c; font-size: clamp(27px,4vw,42px); font-weight: 1000; }
body.app-nita:not(.app-admin) .voice-lobby-hero h1 span { color: #119966; }
body.app-nita:not(.app-admin) .voice-lobby-art { border-radius: 32px; background: linear-gradient(145deg,#1fc583,#91eeb5); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 13px 24px rgba(30,160,92,.14); }
body.app-nita:not(.app-admin) .voice-room-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px; }
body.app-nita:not(.app-admin) .voice-room-card { min-width: 0; overflow: hidden; border: 1px solid #e5ede7; border-radius: 23px; background: #fff; box-shadow: 0 5px 22px rgba(23,50,31,.04); transition: transform .18s ease, box-shadow .18s ease; }
body.app-nita:not(.app-admin) .voice-room-card:hover { transform: translateY(-3px); box-shadow: var(--n5-shadow-hover); }
body.app-nita:not(.app-admin) .voice-room-card-art { position: relative; overflow: hidden; aspect-ratio: 1.4; background: linear-gradient(135deg,var(--voice-cover,#a8f0cc),#e5f7df); }
body.app-nita:not(.app-admin) .voice-room-card-photo { width: 100%; height: 100%; object-fit: cover; }
body.app-nita:not(.app-admin) .voice-room-card-body { padding: 15px; }
body.app-nita:not(.app-admin) .voice-room-card-body h2 { color: #28372d; font-size: 15px; font-weight: 950; }
body.app-nita:not(.app-admin) .voice-room-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px; color: #859187; font-size: 10px; }
body.app-nita:not(.app-admin) .voice-lobby-limit { margin-top: 23px; padding: 16px 18px; border: 1px solid #e1ede5; border-radius: 17px; color: #68776d; background: #f8fcf9; font-size: 11px; line-height: 1.9; }

/* Room detail and live stage: protect interaction controls while polishing layout */
body.app-page-room .room-detail-section { max-width: 1100px; }
body.app-page-room .room-detail-cover { position: relative; overflow: hidden; min-height: clamp(160px,28vw,270px); border: 1px solid #dbe9df; border-radius: 27px; background: linear-gradient(125deg,var(--cover,#a8edcb),#e3f4e4); }
body.app-page-room .room-detail-cover-photo { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
body.app-page-room .room-detail-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(275px,.8fr); gap: 20px; margin-top: 20px; align-items: start; }
body.app-page-room .room-detail-main,
body.app-page-room .room-interaction-box,
body.app-page-room .room-info-panel { min-width: 0; padding: clamp(16px,3vw,24px); border: 1px solid #e5ede7; border-radius: 22px; background: #fff; box-shadow: 0 5px 22px rgba(23,50,31,.035); }
body.app-page-room .room-detail-main h1 { color: #25342a; font-size: clamp(24px,4vw,35px); font-weight: 1000; }
body.app-page-room .room-detail-description { color: #718077; font-size: 13px; line-height: 1.9; }
body.app-page-room .room-live-entry-actions { display: flex; flex-wrap: wrap; gap: 9px; margin: 19px 0; }
body.app-page-room .room-live-entry-actions .button { flex: 1 1 190px; }
body.app-page-room .room-interaction-box { margin-top: 16px; }
body.app-page-room .room-member-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f0f3f0; }
body.app-page-room .room-member-row:last-child { border-bottom: 0; }
body.app-page-room .room-chat-messages { min-height: 190px; max-height: 480px; overflow: auto; border: 1px solid #e8eee9; border-radius: 15px; background: #f8fbf9; scroll-behavior: smooth; }
body.app-page-room .room-chat-form { display: flex; align-items: end; gap: 8px; margin-top: 10px; }
body.app-page-room .room-chat-form textarea { flex: 1; min-width: 0; }
body.app-page-voice-room .voice-room-hero,
body.app-page-video-room .voice-room-hero { position: relative; overflow: hidden; border: 1px solid #d7ebdf; border-radius: 28px; background: radial-gradient(circle at 85% 0,rgba(255,255,255,.8),transparent 28%),linear-gradient(125deg,#ddffea,#e8f7ff); }
body.app-page-voice-room .voice-stage-panel,
body.app-page-video-room .voice-stage-panel,
body.app-page-video-room .video-gallery-panel { padding: clamp(15px,3vw,24px); border: 1px solid #e3ece6; border-radius: 24px; background: #fff; box-shadow: 0 7px 25px rgba(22,48,30,.04); }
body.app-page-voice-room .voice-seat-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: clamp(8px,2vw,19px); }
body.app-page-voice-room .voice-seat { min-width: 0; border: 1px solid #e6eee8; border-radius: 19px; background: #fbfdfb; transition: border-color .16s ease, background-color .16s ease; }
body.app-page-voice-room .voice-seat:hover { border-color: #9cdeba; background: #f1fff6; }
body.app-page-voice-room .voice-seat-avatar { width: clamp(43px,7vw,76px); height: clamp(43px,7vw,76px); border: 3px solid #fff; box-shadow: 0 0 0 1px #e1ebe4; }
body.app-page-voice-room .voice-control-panel { border: 1px solid #e2ece5; border-radius: 22px; background: #fff; box-shadow: 0 7px 23px rgba(22,48,30,.04); }
body.app-page-voice-room .voice-control-buttons,
body.app-page-video-room .voice-control-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
body.app-page-voice-room .voice-control-buttons .button,
body.app-page-video-room .voice-control-buttons .button { min-width: 116px; min-height: 48px; border-radius: 16px; }
body.app-page-video-room .video-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
body.app-page-video-room .video-tile,
body.app-page-video-room .video-local-tile { position: relative; min-width: 0; overflow: hidden; aspect-ratio: 16/10; border-radius: 19px; background: #17241c; }
body.app-page-video-room .video-tile video,
body.app-page-video-room .video-local-tile video { width: 100%; height: 100%; object-fit: cover; }
body.app-page-video-room .video-tile-label { position: absolute; right: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 6px 10px; border: 1px solid rgba(255,255,255,.18); border-radius: 99px; color: #fff; background: rgba(10,20,12,.68); font-size: 10px; }

/* Authentication pages: shared card system without changing form names/actions */
body.app-page-login .auth-section,
body.app-page-register .auth-section { min-height: calc(100vh - 150px); display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.88fr); align-items: center; gap: clamp(25px,6vw,78px); max-width: 1080px; margin-inline: auto; }
body.app-page-login .auth-panel,
body.app-page-register .auth-panel { width: 100%; padding: clamp(22px,4vw,38px); border: 1px solid #e5ede7; border-radius: 28px; background: #fff; box-shadow: 0 17px 48px rgba(25,54,34,.075); }
body.app-page-login .auth-panel-heading h1,
body.app-page-register .auth-panel-heading h1 { color: #233229; font-size: clamp(26px,4vw,35px); font-weight: 1000; letter-spacing: -.035em; }
body.app-page-login .auth-panel-heading p,
body.app-page-register .auth-panel-heading p { color: #7b897f; font-size: 12px; line-height: 1.85; }
body.app-page-login .auth-aside,
body.app-page-register .auth-aside { position: relative; overflow: hidden; padding: clamp(24px,4vw,42px); border: 1px solid #d8f0e0; border-radius: 29px; background: radial-gradient(circle at 90% 7%,rgba(255,255,255,.9),transparent 29%),linear-gradient(145deg,#dfffea,#e8f7ff 57%,#fff3ce); }
body.app-page-login .auth-quote { color: #2a533a; font-size: clamp(19px,3vw,28px); font-weight: 900; line-height: 1.65; }
body.app-page-login .auth-forgot-link { color: #0d9d61; font-size: 11px; font-weight: 850; }
body.app-page-login .auth-switch,
body.app-page-register .auth-switch { margin-top: 19px; color: #7a887f; font-size: 11px; text-align: center; }
body.app-page-login .auth-switch a,
body.app-page-register .auth-switch a { color: #0c9a60; font-weight: 950; }
body.app-page-register .auth-feature { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid rgba(89,156,111,.17); color: #3a6549; font-size: 12px; line-height: 1.8; }

/* Remaining utility pages and shared cards */
body.app-page-agent .agent-hero { overflow: hidden; border: 1px solid #d8ede0; border-radius: 28px; background: linear-gradient(125deg,#dfffea,#ecf8ff 55%,#fff3d3); }
body.app-page-agent .agent-overview-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
body.app-page-agent .agent-overview-card { padding: 18px; border: 1px solid #e5ede7; border-radius: 19px; background: #fff; box-shadow: 0 5px 20px rgba(23,50,31,.03); }
body.app-page-agent .agent-apply-panel,
body.app-page-agent .agent-order-form-panel { padding: clamp(17px,3vw,25px); border: 1px solid #e5ede7; border-radius: 22px; background: #fff; box-shadow: 0 5px 20px rgba(23,50,31,.03); }
body.app-page-agent .agent-page .admin-table-wrap { overflow-x: auto; border-radius: 18px; }
body.app-nita:not(.app-admin) .settings-page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
body.app-nita:not(.app-admin) .site-footer { border-top: 1px solid #e6eee8; background: #fff; }
body.app-nita:not(.app-admin) .site-footer p { color: #7a887e; font-size: 11px; line-height: 1.8; }
body.app-nita:not(.app-admin) .footer-copy { color: #98a29a; font-size: 10px; }

/* Floating mobile app navigation + keyboard-safe behavior */
body.app-nita:not(.app-admin) .app-bottom-nav { padding-bottom: calc(7px + env(safe-area-inset-bottom,0px)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body.app-nita:not(.app-admin) .app-nav-item { transition: background-color .16s ease, color .16s ease, transform .16s ease; }
body.app-nita:not(.app-admin) .app-nav-item:active { transform: scale(.96); }
body.app-nita:not(.app-admin) .app-nav-create-menu { max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; }
body.app-nita:not(.app-admin) .app-nav-create-menu a { min-height: 42px; display: flex; align-items: center; }
body.app-nita:not(.app-admin).nita-keyboard-open .app-bottom-nav,
body.app-nita:not(.app-admin).nita-keyboard-open .site-footer { display: none !important; }
body.app-nita:not(.app-admin).nita-keyboard-open { padding-bottom: 8px !important; }

/* Responsive matrix */
@media (max-width: 1020px) {
    body.app-page-gifts .gift-store-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    body.app-page-rooms .room-grid,
    body.app-nita:not(.app-admin) .voice-room-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body.app-page-voice-room .voice-seat-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 760px) {
    body.app-nita:not(.app-admin) .section { padding-top: 20px; padding-bottom: 28px; }
    body.app-nita:not(.app-admin) .wrap { width: calc(100% - 24px); }
    body.app-nita:not(.app-admin) .section-heading { align-items: flex-start; }
    body.app-nita:not(.app-admin) .section-heading :where(h1,h2) { font-size: 21px; }
    body.app-nita:not(.app-admin) .button { min-height: 42px; }
    body.app-page-wallet .wallet-heading { align-items: flex-start; }
    body.app-page-wallet .wallet-balance-card { min-height: 160px; padding: 20px; border-radius: 23px; }
    body.app-page-wallet .wallet-balance-copy :where(strong,.wallet-balance-value) { font-size: 31px; }
    body.app-page-wallet .wallet-coin-art { width: 76px; height: 76px; border-radius: 25px; font-size: 35px; }
    body.app-page-wallet .wallet-section { padding: 15px; border-radius: 19px; }
    body.app-page-wallet .wallet-transaction { grid-template-columns: 39px minmax(0,1fr) auto; gap: 9px; padding: 12px 0; }
    body.app-page-wallet .tx-icon { width: 37px; height: 37px; border-radius: 12px; }
    body.app-page-wallet .tx-amount { font-size: 12px; }
    body.app-page-wallet .received-gift-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    body.app-page-gifts .gift-store-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    body.app-page-gifts .gift-store-card { padding: 10px; border-radius: 17px; }
    body.app-page-gifts .gift-store-art { border-radius: 13px; aspect-ratio: 1; font-size: 43px; }
    body.app-page-gifts .gift-store-card h2 { margin-top: 10px; font-size: 12px; }
    body.app-page-gifts .gift-store-card .button { width: 100%; padding-inline: 8px; font-size: 10px; }
    body.app-page-svip .svip-tier-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    body.app-page-svip .svip-tier-card { padding: 13px; border-radius: 18px; }
    body.app-page-svip .svip-tier-emblem { width: 43px; height: 43px; border-radius: 14px; font-size: 22px; }
    body.app-page-svip .svip-tier-level { font-size: 17px; }
    body.app-page-svip .svip-tier-price { font-size: 24px; }
    body.app-page-svip .svip-tier-card .button { width: 100%; padding-inline: 8px; font-size: 10px; }
    body.app-page-rankings .ranking-list { padding-inline: 12px; border-radius: 18px; }
    body.app-page-rankings .ranking-row { grid-template-columns: 30px 43px minmax(0,1fr) auto; gap: 8px; min-height: 70px; }
    body.app-page-rankings .ranking-number { width: 29px; height: 29px; border-radius: 10px; font-size: 11px; }
    body.app-page-rankings .ranking-avatar { width: 41px; height: 41px; }
    body.app-page-rankings .ranking-person { font-size: 11px; }
    body.app-page-rankings .ranking-score { font-size: 11px; }
    body.app-page-notifications .notification-item { grid-template-columns: 39px minmax(0,1fr); gap: 9px; padding: 12px; border-radius: 16px; }
    body.app-page-notifications .notification-item > :last-child { grid-column: 2; justify-self: start; }
    body.app-page-notifications .notification-icon { width: 38px; height: 38px; border-radius: 13px; font-size: 17px; }
    body.app-page-notifications .notification-content { font-size: 11px; }
    body.app-page-settings .settings-grid { grid-template-columns: minmax(0,1fr); gap: 12px; }
    body.app-page-settings .settings-card,
    body.app-page-settings .web-push-settings-card,
    body.app-page-settings .email-verification-card { padding: 16px; border-radius: 18px; }
    body.app-page-user .public-profile-stats strong { font-size: 18px; }
    body.app-page-rooms .room-grid,
    body.app-nita:not(.app-admin) .voice-room-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
    body.app-page-rooms .room-card { border-radius: 17px; }
    body.app-page-rooms .room-card-body { padding: 11px; }
    body.app-page-rooms .room-card-body h2,
    body.app-nita:not(.app-admin) .voice-room-card-body h2 { font-size: 12px; }
    body.app-page-rooms .create-room-form { grid-template-columns: minmax(0,1fr); }
    body.app-page-rooms .create-room-form .form-wide { grid-column: auto; }
    body.app-page-rooms .create-room-form > button { width: 100%; }
    body.app-page-room .room-detail-grid { grid-template-columns: minmax(0,1fr); }
    body.app-page-room .room-detail-cover { border-radius: 20px; }
    body.app-page-room .room-live-entry-actions .button { flex-basis: 100%; }
    body.app-page-room .room-chat-form { align-items: stretch; }
    body.app-page-room .room-chat-form .button { flex: 0 0 auto; }
    body.app-page-voice-room .voice-seat-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
    body.app-page-voice-room .voice-seat { border-radius: 15px; }
    body.app-page-voice-room .voice-control-buttons .button,
    body.app-page-video-room .voice-control-buttons .button { min-width: calc(50% - 8px); flex: 1 1 calc(50% - 8px); }
    body.app-page-video-room .video-gallery { grid-template-columns: minmax(0,1fr); }
    body.app-page-login .auth-section,
    body.app-page-register .auth-section { min-height: initial; grid-template-columns: minmax(0,1fr); gap: 15px; padding-top: 24px; padding-bottom: 30px; }
    body.app-page-login .auth-panel,
    body.app-page-register .auth-panel { order: 0; padding: 21px; border-radius: 22px; }
    body.app-page-login .auth-aside,
    body.app-page-register .auth-aside { order: 1; padding: 20px; border-radius: 22px; }
    body.app-page-agent .agent-overview-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    body.app-nita:not(.app-admin) .settings-page-heading { align-items: flex-start; }
}
@media (max-width: 390px) {
    body.app-page-svip .svip-tier-grid { grid-template-columns: minmax(0,1fr); }
    body.app-page-rankings .ranking-row { grid-template-columns: 27px 38px minmax(0,1fr) auto; gap: 6px; }
    body.app-page-rankings .ranking-avatar { width: 36px; height: 36px; }
    body.app-page-agent .agent-overview-grid { grid-template-columns: minmax(0,1fr); }
    body.app-page-wallet .wallet-heading { flex-direction: column; }
}
@media (hover: none) {
    body.app-nita:not(.app-admin) .button:hover,
    body.app-page-gifts .gift-store-card:hover,
    body.app-page-rooms .room-card:hover,
    body.app-nita:not(.app-admin) .voice-room-card:hover { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    body.app-nita:not(.app-admin) *,
    body.app-nita:not(.app-admin) *::before,
    body.app-nita:not(.app-admin) *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}
@media (forced-colors: active) {
    .nita-skip-link { border: 2px solid ButtonText; }
    body.app-nita:not(.app-admin) :where(button,a,input,select,textarea):focus-visible { outline: 2px solid Highlight; }
}