:root{--primary: var(--color-primary);--primary-dark: var(--color-primary-dark);--primary-light: var(--color-primary-light);--accent: #F59E0B;--accent-dark: #D97706;--primary-grad: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-primary) 55%, var(--color-primary-dark) 100%);--primary-grad-soft: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-soft));--accent-grad: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);--surface: #FFFFFF;--surface-raised: #F3F7FF;--surface-deep: #EAF1FC;--bg: #EAF0FB;--bg-dark: #0B1120;--surface-dark: rgba(23, 33, 60, .62);--surface-raised-dark: rgba(34, 47, 82, .55);--surface-deep-dark: rgba(13, 21, 42, .66);--text-primary: #0F172A;--text-secondary: #4A5878;--edge-light: #FFFFFF;--edge-shadow: #A8B8D6;--font-display: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;--font-body: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", ui-monospace, monospace;--bg-page: radial-gradient(ellipse at 18% 0%, #E2ECFF 0%, #EEF3FB 55%, #F7FAFF 100%);--text: var(--text-primary);--text-muted: var(--text-secondary);--radius-lg: 22px;--radius-md: 18px;--radius-sm: 14px;--nav-h: 72px}[data-theme=dark]{--surface: var(--surface-dark);--surface-raised: var(--surface-raised-dark);--surface-deep: var(--surface-deep-dark);--bg: #0B1120;--text-primary: #E8EEFB;--text-secondary: #9FB0CE;--edge-light: rgba(255, 255, 255, .07);--edge-shadow: rgba(0, 0, 0, .5);--bg-page: radial-gradient(ellipse at 15% -5%, #1c2c52 0%, #0d1628 48%, #070b16 100%);--text: #E8EEFB;--text-muted: #9FB0CE}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0}body{font-family:var(--font-body);color:var(--text);background:var(--bg-page);background-attachment:fixed;color-scheme:light dark;min-height:100vh;font-size:15px;line-height:1.5;overscroll-behavior-y:contain;transition:background-color .3s ease}h1,h2,h3,h4,h5{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text);margin:0}a{color:var(--primary);text-decoration:none}.mono{font-family:var(--font-mono)}.muted{color:var(--text-muted)}.accent-text{color:var(--accent)}.card-3d{background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 8px 24px #0f172a14,0 2px 6px #0f172a0d;border:1px solid rgba(255,255,255,.7);transform:translateZ(0);transition:box-shadow .28s ease,transform .28s ease,border-color .28s ease}[data-theme=dark] .card-3d{background:var(--surface);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 14px 34px #0006,inset 0 1px #ffffff12}.card-3d:hover{box-shadow:0 14px 32px var(--color-primary)24,0 4px 10px #0f172a14;transform:translateY(-3px) translateZ(0);border-color:var(--color-primary)2e}[data-theme=dark] .card-3d:hover{box-shadow:0 18px 40px #00000080,inset 0 1px #ffffff17;border-color:var(--color-primary-light)38}.btn-primary-3d,.btn-accent-3d{border:none;border-radius:var(--radius-sm);color:#fff;font-weight:700;font-family:var(--font-body);font-size:15px;padding:12px 24px;transform:translateY(0);transition:transform .12s ease,box-shadow .18s ease,filter .15s ease;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;-webkit-user-select:none;user-select:none}.btn-primary-3d{background:linear-gradient(180deg,var(--color-primary-soft),var(--color-primary) 60%,var(--color-primary-dark));box-shadow:0 6px var(--color-primary-deep),0 8px 16px var(--color-primary)66,inset 0 1px #ffffff40}.btn-accent-3d{background:linear-gradient(180deg,#fbbf24,#f59e0b 60%,#d97706);box-shadow:0 6px #b45309,0 8px 16px #f59e0b66,inset 0 1px #ffffff4d}.btn-primary-3d:hover{box-shadow:0 7px var(--color-primary-deep),0 14px 24px var(--color-primary)73,inset 0 1px #ffffff4d;filter:brightness(1.05)}.btn-accent-3d:hover{box-shadow:0 7px #b45309,0 14px 24px #f59e0b73,inset 0 1px #ffffff59;filter:brightness(1.05)}.btn-primary-3d:active,.btn-accent-3d:active{transform:translateY(4px);box-shadow:0 2px var(--color-primary-deep),0 4px 8px var(--color-primary)4d,inset 0 1px #ffffff26}.btn-accent-3d:active{box-shadow:0 2px #b45309,0 4px 8px #f59e0b4d,inset 0 1px #ffffff26}.btn-primary-3d:disabled,.btn-accent-3d:disabled{filter:grayscale(.5) opacity(.6);cursor:not-allowed;transform:none}.btn-block{width:100%}.btn-ghost{background:transparent;border:none;color:var(--primary);font-weight:700;cursor:pointer;padding:8px 14px;border-radius:12px;transition:background-color .15s ease,transform .1s ease}.btn-ghost:hover{background:var(--surface-deep)}.btn-ghost:active{transform:translateY(1px)}.btn-success-3d{background:linear-gradient(180deg,#34d399,#10b981 60%,#059669);box-shadow:0 6px #047857,0 8px 16px #10b98166,inset 0 1px #ffffff40}.btn-danger-3d{background:linear-gradient(180deg,#fb7185,#ef4444 60%,#dc2626);box-shadow:0 6px #991b1b,0 8px 16px #ef444466,inset 0 1px #ffffff40}.bottom-nav{position:fixed;left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);height:64px;display:flex;align-items:center;justify-content:space-around;padding:0 6px;background:var(--surface);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);border-radius:22px;border:1px solid rgba(255,255,255,.14);box-shadow:0 16px 36px #080c1859;z-index:50}[data-theme=dark] .bottom-nav{border-color:#ffffff14;box-shadow:0 16px 40px #00000080}.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 0;position:relative;color:var(--text-muted);font-size:11px;font-weight:700;font-family:var(--font-body);background:none;border:none;cursor:pointer;transition:color .2s ease,transform .12s ease,background-color .2s ease,box-shadow .2s ease}.nav-tab:active{transform:scale(.93)}.nav-tab.active{color:#fff;background:var(--primary-grad);border-radius:14px;box-shadow:0 4px var(--color-primary-deep),0 6px 14px var(--color-primary)66,inset 0 1px #ffffff40}.nav-tab .nav-icon{position:relative}.input-3d{background:var(--surface-deep);border-radius:var(--radius-sm);border:1.5px solid rgba(148,163,184,.4);box-shadow:inset 3px 3px 8px #94a3b859,inset -2px -2px 6px #fffc;padding:14px 16px;font-size:15px;font-family:var(--font-body);color:var(--text);width:100%;transition:box-shadow .2s ease,border-color .2s ease}[data-theme=dark] .input-3d{border-color:#94a3b840;box-shadow:inset 3px 3px 8px #00000080,inset -2px -2px 6px #ffffff0a}.input-3d:focus{border-color:var(--color-primary);box-shadow:inset 3px 3px 8px #94a3b859,inset -2px -2px 6px #fffc,0 0 0 3px var(--color-primary)26;outline:none}.input-3d::placeholder{color:var(--text-muted);opacity:.8}textarea.input-3d{resize:vertical;min-height:96px}select.input-3d{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}.field-label{font-size:12px;font-weight:700;color:var(--text-muted);margin:0 0 6px 4px;display:block}.field-group{margin-bottom:16px}.faculty-card{border-top:4px solid var(--primary);padding:20px;position:relative}.faculty-card .icon-badge{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark));box-shadow:0 4px var(--color-primary-deep),0 6px 12px var(--color-primary)4d;display:flex;align-items:center;justify-content:center;color:#fff}.category-badge-3d{border-radius:20px;padding:4px 12px;background:linear-gradient(180deg,#fbbf24,#f59e0b);box-shadow:0 3px #d97706,0 4px 8px #f59e0b4d;font-size:11px;font-weight:700;color:#fff;letter-spacing:.04em;display:inline-block}.cat-academic{background:linear-gradient(180deg,var(--color-primary-light),var(--color-primary));box-shadow:0 3px var(--color-primary-deep),0 4px 8px var(--color-primary)4d}.cat-sug{background:linear-gradient(180deg,#a78bfa,#7c3aed);box-shadow:0 3px #6d28d9,0 4px 8px #7c3aed4d}.cat-faculty,.cat-department{background:linear-gradient(180deg,#34d399,#059669);box-shadow:0 3px #047857,0 4px 8px #10b9814d}.cat-scholarships,.cat-internships{background:linear-gradient(180deg,#fbbf24,#f59e0b)}.cat-events{background:linear-gradient(180deg,#fb7185,#ef4444);box-shadow:0 3px #991b1b,0 4px 8px #ef44444d}.file-type-pill{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;color:#fff;flex-shrink:0;box-shadow:0 3px #0000002e,0 5px 10px #0000002e,inset 0 1px #ffffff40}.ft-pdf{background:linear-gradient(180deg,#f87171,#dc2626)}.ft-docx{background:linear-gradient(180deg,var(--color-primary-light),var(--color-primary))}.ft-ppt,.ft-pptx{background:linear-gradient(180deg,#fb923c,#ea580c)}.ft-img{background:linear-gradient(180deg,#34d399,#059669)}.ft-zip{background:linear-gradient(180deg,#a78bfa,#7c3aed)}.ft-default{background:linear-gradient(180deg,#94a3b8,#475569)}.top-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top,0px));background:#ffffffb8;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border-bottom:1px solid rgba(255,255,255,.6);box-shadow:0 6px 22px #0f172a0f}[data-theme=dark] .top-bar{background:#0b11209e;border-bottom:1px solid rgba(255,255,255,.07);box-shadow:0 6px 24px #0000004d}.top-bar-title{font-size:18px;font-weight:800;font-family:var(--font-display)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#0f172a73;display:flex;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease}.modal-3d{width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:var(--surface);backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);border:1px solid rgba(255,255,255,.1);border-radius:28px 28px 0 0;box-shadow:0 -12px 44px #0000004d,inset 0 2px #ffffff1f;padding:20px 20px calc(24px + env(safe-area-inset-bottom,0px));animation:sheetUp .32s cubic-bezier(.32,.72,0,1)}@media (min-width: 700px){.modal-overlay{align-items:center}.modal-3d{border-radius:28px;animation:popIn .28s ease-in-out}}.modal-handle{width:44px;height:5px;border-radius:3px;background:var(--edge-shadow);margin:0 auto 14px}.avatar-3d{border-radius:50%;box-shadow:0 4px 0 var(--edge-shadow),0 6px 16px #00000026,inset 0 -2px 4px #0000001a,0 0 0 3px #ffffffe6;object-fit:cover;background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;flex-shrink:0}.badge-dot{background:linear-gradient(135deg,#f59e0b,#ef4444);border-radius:50%;box-shadow:0 2px #b45309,0 3px 8px #ef444466;border:2px solid #fff}.badge-count{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 2px #b45309,0 3px 8px #ef444466;border:2px solid #fff;position:absolute;top:-4px;right:-4px}.toggle-track{width:52px;height:30px;border-radius:20px;padding:3px;background:var(--surface-deep);box-shadow:inset 3px 3px 6px #94a3b866,inset -2px -2px 5px #ffffffb3;display:inline-flex;align-items:center;cursor:pointer;transition:background .2s ease}[data-theme=dark] .toggle-track{box-shadow:inset 3px 3px 6px #00000080,inset -2px -2px 5px #ffffff0d}.toggle-thumb{width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,#fff,#e2e8f0);box-shadow:0 3px #94a3b880,0 4px 8px #00000026;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}.toggle-track.active{background:var(--surface-raised)}.toggle-track.active .toggle-thumb{transform:translate(22px);background:linear-gradient(180deg,var(--color-primary-light),var(--color-primary));box-shadow:0 3px var(--color-primary-deep),0 4px 8px var(--color-primary)66}.section-divider{height:4px;background:linear-gradient(90deg,transparent,var(--primary-light),transparent);border-radius:2px;box-shadow:0 2px 4px var(--color-primary)33;margin:28px 0}.skeleton-3d{background:linear-gradient(90deg,var(--surface-deep) 25%,var(--surface-raised) 50%,var(--surface-deep) 75%);background-size:200% 100%;animation:shimmer3d 1.5s infinite;border-radius:12px;box-shadow:inset 2px 2px 6px #94a3b84d,inset -1px -1px 4px #ffffffb3}@keyframes shimmer3d{0%{background-position:200% 0}to{background-position:-200% 0}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes sheetUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes scaleIn{0%{transform:scale(0)}to{transform:scale(1)}}@keyframes badgePop{0%{transform:scale(0)}60%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes pillPop{0%{transform:scale(.7)}to{transform:scale(1)}}.update-modal{max-width:430px;width:100%}.update-fab{position:fixed;left:50%;transform:translate(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 74px);z-index:9000;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:999px;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 8px 24px var(--color-primary)73;max-width:calc(100vw - 32px)}.update-fab:active{transform:translate(-50%) scale(.97)}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.edit-media-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.edit-media{position:relative;width:84px;height:84px;border-radius:10px;overflow:hidden;background:#000;flex-shrink:0}.edit-media img,.edit-media video{width:100%;height:100%;object-fit:cover;display:block}.edit-media .rm{position:absolute;top:-6px;right:-6px;width:22px;height:22px;padding:0;font-size:14px;line-height:1;border-radius:50%;background:#ef4444;color:#fff;border:2px solid var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer}@keyframes splashScale{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@keyframes bubbleIn{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes slideInLeft{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes progressFill{0%{width:0%}to{width:100%}}.page-enter{animation:slideInRight .28s ease-in-out}.page-back{animation:slideInLeft .28s ease-in-out}.splash-logo{animation:splashScale .6s cubic-bezier(.34,1.56,.64,1) both}.badge-dot.pop{animation:badgePop .25s cubic-bezier(.34,1.56,.64,1)}.bubble-in{animation:bubbleIn .18s ease-out}.upload-pill-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--color-primary-light),var(--color-primary));animation:progressFill 1.4s ease forwards}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}.app-shell{min-height:100vh;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}.app-shell.with-nav{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}.page{padding:18px 16px;max-width:720px;margin:0 auto}.row{display:flex;align-items:center;gap:10px}.col{display:flex;flex-direction:column}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.center{justify-content:center;align-items:center}.grow{flex:1}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}.p-16{padding:16px}.p-20{padding:20px}.h-scroll{display:flex;gap:14px;overflow-x:auto;padding:4px 16px 16px;scroll-snap-type:x mandatory}.h-scroll>*{scroll-snap-align:start;flex-shrink:0}.h-scroll::-webkit-scrollbar{display:none}.text-center{text-align:center}.error-text{color:#dc2626;font-size:13px;font-weight:600;margin:4px 2px 0}.success-text{color:#059669;font-size:13px;font-weight:600;margin:4px 2px 0}.banner{background:linear-gradient(180deg,#fef3c7,#fde68a);color:#92400e;font-weight:700;font-size:13px;border-radius:14px;padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;box-shadow:0 3px #d97706,0 4px 10px #f59e0b4d}[data-theme=dark] .banner{background:linear-gradient(180deg,#3a2e10,#2a2109);color:#fcd34d;box-shadow:0 3px #92400e,0 4px 10px #0006}.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--surface);border:none;font-weight:700;font-size:13px;color:var(--text-muted);cursor:pointer;box-shadow:0 3px 0 var(--edge-shadow),inset 0 1px #ffffffb3}.pill.active{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;box-shadow:0 3px var(--color-primary-deep)}.stars{color:var(--accent);letter-spacing:2px;font-size:14px}.star-btn{background:none;border:none;cursor:pointer;font-size:20px;color:var(--edge-shadow);padding:0 1px}.star-btn.on{color:var(--accent)}.chat-bubble-sent{background:linear-gradient(180deg,var(--color-primary-soft),var(--color-primary));color:#fff;border-radius:18px 18px 4px;box-shadow:0 4px var(--color-primary-deep),0 6px 12px var(--color-primary)4d,inset 0 1px #fff3;padding:10px 14px;max-width:78%;align-self:flex-end}.chat-bubble-recv{background:var(--surface);color:var(--text);border-radius:18px 18px 18px 4px;box-shadow:0 4px 0 var(--edge-shadow),0 6px 12px #0000000f,inset 0 1px #ffffffb3;padding:10px 14px;max-width:78%;align-self:flex-start}[data-theme=dark] .chat-bubble-recv{box-shadow:0 4px 0 var(--edge-shadow),0 6px 12px #0006,inset 0 1px #ffffff0d}.stat-tile{padding:16px;border-radius:16px;background:var(--surface-raised);box-shadow:inset 2px 2px 6px #94a3b84d,inset -2px -2px 5px #ffffffb3;text-align:center}[data-theme=dark] .stat-tile{box-shadow:inset 2px 2px 6px #00000080,inset -2px -2px 5px #ffffff0a}.stat-num{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--primary)}.quick-tile{width:100%;aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:none;background:var(--surface);border-radius:18px;cursor:pointer;box-shadow:0 5px 0 var(--edge-shadow),inset 0 1px #ffffffb3;color:var(--text);font-weight:700;font-family:var(--font-body)}[data-theme=dark] .quick-tile{box-shadow:0 5px 0 var(--edge-shadow),inset 0 1px #ffffff0a}.quick-tile:active{transform:translateY(3px)}.icon-btn{width:42px;height:42px;border-radius:13px;border:1px solid var(--edge-shadow);background:var(--surface-raised);color:var(--text-muted);box-shadow:0 1px 2px #0f172a0f;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .1s ease}.icon-btn:hover{color:var(--primary);border-color:var(--primary-light)}.icon-btn:active{transform:scale(.93)}.icon-btn.on{color:var(--accent);border-color:var(--accent)}.icon-btn.on:hover{background:#f59e0b1f}.icon-btn.ok{color:#10b981;border-color:#10b981}.icon-btn.ok:hover{background:#10b9811f}.icon-btn.danger{color:#ef4444;border-color:#ef4444}.icon-btn.danger:hover{background:#ef44441f}.icon-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.welcome-banner-accent{border-top:4px solid var(--accent)}.tile-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}.tile-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}.quick-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.quick-nav-item{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px;border:none;background:var(--surface);border-radius:20px;cursor:pointer;box-shadow:0 5px 0 var(--edge-shadow),inset 0 1px #ffffffb3;transition:transform .12s ease,box-shadow .12s ease}[data-theme=dark] .quick-nav-item{box-shadow:0 5px 0 var(--edge-shadow),inset 0 1px #ffffff0a}.quick-nav-item:active{transform:translateY(3px);box-shadow:0 2px 0 var(--edge-shadow)}.quick-nav-icon{width:54px;height:54px;border-radius:16px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 5px #0f172a2e,0 8px 16px #0f172a2e,inset 0 1px #ffffff40}.quick-nav-label{font-size:13px;font-weight:700;color:var(--text);font-family:var(--font-body)}.fab-sheet{animation:sheetUp .32s cubic-bezier(.32,.72,0,1)}.drop-zone{border:2px dashed rgba(148,163,184,.6);border-radius:18px;padding:28px 16px;text-align:center;background:var(--surface-deep);box-shadow:inset 3px 3px 8px #94a3b859,inset -2px -2px 6px #fffc;color:var(--text-muted);font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;width:100%;transition:border-color .2s ease,background-color .2s ease}.drop-zone:hover{border-color:var(--primary-light)}[data-theme=dark] .drop-zone{box-shadow:inset 3px 3px 8px #00000080,inset -2px -2px 6px #ffffff0a}.upload-preview{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--surface-raised);box-shadow:inset 2px 2px 6px #94a3b84d,inset -2px -2px 5px #ffffffb3}[data-theme=dark] .upload-preview{box-shadow:inset 2px 2px 6px #00000080,inset -2px -2px 5px #ffffff0a}.upload-thumb{width:56px;height:56px;border-radius:14px;object-fit:cover;background:var(--surface-deep);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 2px 0 var(--edge-shadow);color:var(--primary)}.full-screen{min-height:100vh;display:flex;flex-direction:column}.auth-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}.empty-state{text-align:center;color:var(--text-muted);padding:40px 16px}.empty-state svg{opacity:.7;margin-bottom:12px}.viewer-shell{width:100%;max-width:960px;height:90vh;background:#0b0e14;border-radius:24px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 -8px #a0b4d64d,0 -12px 40px #00000073;animation:popIn .28s ease-in-out}.viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#111827;color:#e2e8f0;flex-shrink:0}.viewer-title{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.viewer-body{position:relative;flex:1;min-height:0;background:#0b0e14}.viewer-media{width:100%;height:100%;border:none;display:block}.pdf-pages{width:100%;height:100%;overflow-y:auto;padding:8px;box-sizing:border-box;-webkit-overflow-scrolling:touch}.pdf-pages canvas{display:block;margin:0 auto 10px;background:#fff;box-shadow:0 2px 10px #0006}.viewer-center{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.viewer-foot{padding:6px 14px;font-size:11px;background:#111827;color:#94a3b8;flex-shrink:0}.viewer-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#111827;border-top:1px solid rgba(255,255,255,.08);flex-shrink:0}.viewer-actions .va-rating{display:flex;align-items:center;gap:8px;color:#94a3b8;font-size:13px;font-weight:600}@media (max-width: 699px){.viewer-shell{height:94vh;border-radius:20px 20px 0 0}}#root{position:relative;z-index:1}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:url(/logo.webp) center / min(60vmin,460px) no-repeat;opacity:.06;pointer-events:none;z-index:0}.top-banner{position:sticky;top:0;z-index:50}.banner-offline{background:#0f172a;color:#cbd5e1;text-align:center;font-size:12px;padding:7px 10px}.banner-pending{background:#7c2d12;color:#fed7aa;text-align:center;font-size:12px;padding:7px 10px}.toast-host{position:fixed;left:50%;transform:translate(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 84px);z-index:200;display:flex;flex-direction:column;gap:8px;width:calc(100% - 32px);max-width:460px;pointer-events:none}.toast{pointer-events:auto;background:#0f172a;color:#f1f5f9;font-size:13px;font-weight:600;padding:11px 16px;border-radius:14px;text-align:center;box-shadow:0 8px 24px #00000059;animation:toastIn .22s ease-out}.toast-success{background:#065f46;color:#d1fae5}.toast-error{background:#7f1d1d;color:#fee2e2}.toast-warn{background:#7c2d12;color:#fed7aa}.toast-info{background:#1e293b;color:#e2e8f0}@keyframes toastIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.error-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg-page);overflow-y:auto}.error-card{width:100%;max-width:520px;background:var(--surface);border-radius:22px;padding:24px;box-shadow:0 16px 40px #080c184d;border:1px solid rgba(255,255,255,.6)}.error-card h2{font-size:20px;margin-bottom:8px}.error-pre{background:#0b1120;color:#cbd5e1;font-family:var(--font-mono);font-size:12px;line-height:1.5;padding:12px;border-radius:12px;max-height:220px;overflow:auto;white-space:pre-wrap;word-break:break-word;margin:12px 0 16px}.error-card .btn-primary{background:linear-gradient(180deg,var(--color-primary-soft),var(--color-primary) 60%,var(--color-primary-dark));color:#fff;border:none;border-radius:14px;padding:12px 16px;font-weight:700;cursor:pointer;font-family:var(--font-body);font-size:15px;box-shadow:0 5px var(--color-primary-deep),0 8px 16px var(--color-primary)66}.error-card .btn-primary:active{transform:translateY(3px);box-shadow:0 2px var(--color-primary-deep)}.error-card .btn-ghost{color:var(--text-muted)}.health-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--surface-deep);font-size:13px}.health-row:last-child{border-bottom:none}.health-row .k{color:var(--text-muted)}.health-row .v{font-weight:700;font-family:var(--font-mono)}.health-ok{color:#059669}.health-bad{color:#dc2626}.mono-11{font-family:var(--font-mono);font-size:11px;word-break:break-all}.wa-msg{display:flex;margin-bottom:6px;align-items:flex-start}.wa-msg.mine{justify-content:flex-end}.wa-msg.theirs{justify-content:flex-start}.wa-msg .wa-col{display:flex;flex-direction:column;max-width:80%;min-width:0}.wa-msg.mine .wa-col{align-items:flex-end}.wa-msg.theirs .wa-col{align-items:flex-start}.wa-bubble{position:relative;max-width:100%;padding:5px 8px 6px;border-radius:14px;font-size:15px;line-height:1.34;box-shadow:0 1px 1.5px #0f172a33;word-break:break-word;overflow-wrap:anywhere;-webkit-user-select:text;user-select:text}.wa-bubble.mine{background:var(--primary);color:#fff;border-radius:16px 16px 4px}.wa-bubble.theirs{background:var(--surface);color:var(--text);border-radius:16px 16px 16px 4px}[data-theme=dark] .wa-bubble.theirs{box-shadow:0 1px 2px #00000073}.wa-bubble .wa-text{white-space:pre-wrap}.wa-meta{float:right;margin:6px -2px -2px 8px;display:inline-flex;align-items:center;gap:3px;font-size:10.5px;line-height:1;font-variant-numeric:tabular-nums;-webkit-user-select:none;user-select:none}.wa-bubble.mine .wa-meta{color:#ffffffd1}.wa-bubble.theirs .wa-meta{color:var(--text-muted)}.wa-ticks{display:inline-flex;align-items:center}.wa-ticks.seen{color:#53bdeb}.wa-bubble.mine .wa-ticks.seen{color:#7fd3ff}.wa-media{display:block;max-width:min(72vw,320px);border-radius:14px;overflow:hidden;background:var(--surface-deep);box-shadow:0 1px 2px #0f172a33;position:relative;cursor:pointer}.wa-media img,.wa-media video{display:block;width:100%;height:auto}.wa-media .wa-meta{position:absolute;right:8px;bottom:6px;margin:0;padding:2px 6px;border-radius:8px;background:#0000006b;color:#fff!important;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.wa-media .wa-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:56px;height:56px;border-radius:50%;background:#00000080;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 10px #0006}.wa-media .wa-dur{position:absolute;right:8px;bottom:6px;padding:2px 6px;border-radius:8px;background:#0000008c;color:#fff;font-size:11px;font-variant-numeric:tabular-nums}.wa-media .wa-pip{position:absolute;left:8px;top:8px;width:34px;height:34px;border-radius:50%;background:#00000080;color:#fff;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer}.wa-skeleton{width:min(60vw,240px);height:170px;border-radius:14px;background:linear-gradient(90deg,var(--surface-deep) 25%,var(--surface-raised) 50%,var(--surface-deep) 75%);background-size:200% 100%;animation:shimmer3d 1.4s infinite;position:relative}.wa-ring{transform:rotate(-90deg)}.wa-ring-track{stroke:#ffffff59}.wa-ring-fill{stroke:#fff;transition:stroke-dashoffset .2s ease}.wa-reply{display:block;border-left:3px solid var(--accent);border-top-left-radius:8px;border-top-right-radius:8px;padding:4px 8px;margin:0 0 4px;background:#f59e0b29;cursor:pointer}.wa-bubble.mine .wa-reply{background:#ffffff2e;border-left-color:#ffffffb3}.wa-reply .wa-reply-name{font-size:12px;font-weight:800;color:var(--accent)}.wa-bubble.mine .wa-reply .wa-reply-name{color:#fff}.wa-reply .wa-reply-body{font-size:12.5px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}.wa-reply-above{display:flex;align-items:center;gap:8px;max-width:80%;margin:0 0 2px;padding:4px 10px 4px 8px;border-radius:12px;background:var(--surface-raised);box-shadow:0 1px 2px #0f172a1f;cursor:pointer;font-size:12.5px}.wa-msg.mine .wa-reply-above{margin-left:auto}.wa-reply-above .wa-reply-bar{width:3px;align-self:stretch;background:var(--accent);border-radius:2px}.wa-reply-above .wa-reply-name{font-weight:800;color:var(--accent)}.wa-reply-above .wa-reply-body{opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa-reactions{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}.wa-msg.mine .wa-reactions{justify-content:flex-end}.wa-react-chip{display:inline-flex;align-items:center;gap:3px;padding:1px 7px;border-radius:12px;font-size:12px;line-height:1.5;background:var(--surface-raised);border:1px solid var(--edge-shadow);cursor:pointer;box-shadow:0 1px 1px #0f172a14}.wa-react-chip.mine{background:var(--color-primary)1f;border-color:var(--color-primary)66}.wa-react-pop{position:fixed;z-index:120;display:flex;gap:6px;padding:6px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--edge-shadow);box-shadow:0 10px 30px #0000004d;animation:popIn .16s ease-out}.wa-react-pop button{border:none;background:none;cursor:pointer;font-size:24px;line-height:1;padding:2px 3px;border-radius:50%;transition:transform .1s ease}.wa-react-pop button:active{transform:scale(1.3)}.wa-header{display:flex;align-items:center;gap:10px;min-width:0}.wa-header .wa-h-avatar{cursor:pointer}.wa-header .wa-h-text{min-width:0}.wa-header .wa-h-name{font-size:16px;font-weight:800;font-family:var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa-header .wa-h-status{font-size:11.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa-header .wa-h-status.live{color:var(--accent)}.wa-typing{display:inline-flex;gap:3px;align-items:center}.wa-typing span{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;animation:waBounce 1.2s infinite ease-in-out}.wa-typing span:nth-child(2){animation-delay:.18s}.wa-typing span:nth-child(3){animation-delay:.36s}@keyframes waBounce{0%,60%,to{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}.wa-pinned{display:flex;align-items:center;gap:8px;padding:6px 12px;margin:0 10px 8px;border-radius:12px;background:var(--surface-raised);border-left:3px solid var(--accent);font-size:12.5px;cursor:pointer;box-shadow:0 1px 2px #0f172a1a}.wa-pinned .wp-body{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wa-pending{position:relative;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px #0f172a33;max-width:min(60vw,240px)}.wa-pending .wa-pending-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;background:#0f172a6b;color:#fff}.wa-pending .wa-pending-label{font-size:12px;font-weight:700}.wa-pending-cancel{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;background:#00000080;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.wa-forward-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:none;background:var(--surface-raised);border-radius:12px;cursor:pointer;color:var(--text);font-weight:600;font-size:14px}.wa-forward-item:active{transform:scale(.98)}.wa-viewer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:300;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}.wa-viewer-track{display:flex;height:100%;will-change:transform}.wa-viewer-slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative}.wa-viewer-slide img,.wa-viewer-slide video{max-width:100%;max-height:100%;object-fit:contain}.wa-viewer-bar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 10px;background:linear-gradient(180deg,#0009,#0000);color:#fff}.wa-viewer-actions{position:absolute;bottom:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:12px 12px calc(env(safe-area-inset-bottom,0px) + 14px);background:linear-gradient(0deg,#000000a6,#0000)}.wa-viewer-actions button{width:44px;height:44px;border-radius:50%;background:#ffffff24;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.wa-viewer-actions button:active{background:#ffffff47}.wa-viewer-counter{font-size:13px;font-weight:700}.wa-ripple-host{position:relative;overflow:hidden}.wa-ripple{position:absolute;border-radius:50%;background:#ffffff80;transform:scale(0);animation:waRipple .5s ease-out;pointer-events:none}@keyframes waRipple{to{transform:scale(2.4);opacity:0}}.wa-scroll-smooth{scroll-behavior:smooth}.wa-edit-box{width:100%}.wa-img-skeleton{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:14px;background:linear-gradient(90deg,var(--surface-deep) 25%,var(--surface-raised) 50%,var(--surface-deep) 75%);background-size:200% 100%;animation:shimmer3d 1.4s infinite}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:10px}::selection{background:var(--color-primary)38;color:inherit}.btn-soft{border:1px solid var(--edge-shadow);background:var(--surface);color:var(--text);border-radius:14px;padding:12px 16px;font-weight:700;font-family:var(--font-body);font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 2px 0 var(--edge-shadow),inset 0 1px #ffffffb3;transition:transform .1s ease,box-shadow .15s ease,background-color .15s ease}.btn-soft:active{transform:translateY(2px);box-shadow:0 0 0 var(--edge-shadow)}[data-theme=dark] .btn-soft{box-shadow:0 2px 0 var(--edge-shadow),inset 0 1px #ffffff0d}.card{background:var(--surface);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.7);box-shadow:0 8px 24px #0f172a14,0 2px 6px #0f172a0d;padding:18px}[data-theme=dark] .card{border-color:#ffffff17;box-shadow:0 14px 34px #0006,inset 0 1px #ffffff12}.soft-shadow{box-shadow:0 6px 18px #0f172a1a,0 1px 3px #0f172a0f}.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--surface-raised);color:var(--text-muted);border:1px solid var(--edge-shadow);box-shadow:0 1px 2px #0f172a0f}.chip.active{background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark));color:#fff;border-color:transparent;box-shadow:0 3px var(--color-primary-deep)}.chip.primary{background:var(--color-primary)1f;color:var(--primary);border-color:var(--color-primary)4d}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;font-size:11px;font-weight:800;color:#fff;background:linear-gradient(135deg,#f59e0b,#ef4444);box-shadow:0 2px #b45309}.list-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid rgba(255,255,255,.7);box-shadow:0 2px 0 var(--edge-shadow),inset 0 1px #ffffffb3;transition:transform .1s ease,box-shadow .15s ease;cursor:pointer}[data-theme=dark] .list-item{border-color:#ffffff14;box-shadow:0 2px 0 var(--edge-shadow),inset 0 1px #ffffff0a}.list-item:active{transform:scale(.985)}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 4px 12px}.section-head h2,.section-head h3{font-size:18px;font-weight:800;font-family:var(--font-display)}.section-head .sub{font-size:12.5px;color:var(--text-muted);font-weight:600}.hr{height:1px;background:linear-gradient(90deg,transparent,var(--edge-shadow),transparent);border:none;margin:16px 0}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--text-muted);padding:48px 20px}.empty-state .es-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface-raised);box-shadow:inset 2px 2px 6px #94a3b84d,inset -2px -2px 5px #fffc;color:var(--primary);margin-bottom:14px}[data-theme=dark] .empty-state .es-icon{box-shadow:inset 2px 2px 6px #00000080,inset -2px -2px 5px #ffffff0d}.empty-state h3{color:var(--text);margin-bottom:4px}.empty-state p{margin:0;font-size:14px;max-width:320px}.fab-host{position:fixed;right:16px;z-index:45;display:flex;flex-direction:column;align-items:flex-end;gap:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}.fab{width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;background:linear-gradient(180deg,var(--color-primary-soft),var(--color-primary));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px var(--color-primary-deep),0 10px 22px var(--color-primary)73,inset 0 1px #ffffff4d;transition:transform .12s ease,box-shadow .15s ease}.fab:active{transform:translateY(4px);box-shadow:0 2px var(--color-primary-deep),0 4px 8px var(--color-primary)59,inset 0 1px #fff3}.fab.secondary{background:linear-gradient(180deg,#fbbf24,#f59e0b);box-shadow:0 6px #b45309,0 10px 22px #f59e0b66,inset 0 1px #ffffff4d}.fab.secondary:active{box-shadow:0 2px #b45309,0 4px 8px #f59e0b59}.nav-tab.active .nav-icon{animation:pillPop .2s ease}.page{padding:20px 16px}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:#94a3b880;border-radius:999px;border:2px solid transparent;background-clip:content-box}*::-webkit-scrollbar-thumb:hover{background:#64748bb3;background-clip:content-box}.card-3d,.quick-nav-item{animation:fadeUp .34s cubic-bezier(.22,1,.36,1)}.list-item{animation:fadeUp .3s ease}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.ptr-indicator{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none}.ptr-content{will-change:transform}.viewer-toolbar{display:flex;gap:8px;justify-content:center;align-items:center;padding:8px;background:#0b1120;flex-shrink:0}.v-btn{width:42px;height:42px;border-radius:13px;border:none;cursor:pointer;background:#1f2937;color:#e2e8f0;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px #ffffff0f;transition:background-color .15s ease,transform .1s ease,color .15s ease}.v-btn:hover{background:#243044}.v-btn:active{transform:scale(.93)}.v-btn.on{color:#34d399}.v-btn.danger{color:#fca5a5}.v-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.v-zoom{color:#e2e8f0;min-width:52px;text-align:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}.viewer-info{display:flex;align-items:center;gap:8px;padding:8px 14px;background:#111827;color:#94a3b8;font-size:12px;font-weight:600;flex-shrink:0}.pdf-page{width:100%;display:flex;justify-content:center}.pdf-thumbs{display:flex;gap:8px;overflow-x:auto;padding:8px 10px;background:#0b1120;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}.pdf-thumbs::-webkit-scrollbar{height:6px}.pdf-thumb{flex:0 0 auto;border-radius:6px;overflow:hidden;cursor:pointer;border:2px solid transparent;background:#fff;line-height:0;box-shadow:0 2px 6px #00000059}.pdf-thumb:active{transform:scale(.96)}.pdf-thumb:hover{border-color:var(--color-primary)}.vt-sep{width:1px;height:24px;background:#ffffff24;margin:0 2px}.v-btn.sm{width:32px;height:32px;border-radius:10px}.viewer-search{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#0b1120;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}.vs-input{flex:1;min-width:0;background:#111827;color:#e2e8f0;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px 12px;font-size:13px;font-family:var(--font-body);outline:none}.vs-input:focus{border-color:var(--color-primary)}.vs-count{color:#94a3b8;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;min-width:36px;text-align:center}.viewer-pagenav{display:flex;align-items:center;justify-content:center;gap:12px;padding:8px;background:#0b1120;border-top:1px solid rgba(255,255,255,.06);flex-shrink:0}.vn-page{color:#e2e8f0;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;padding:4px 10px;border-radius:10px;background:#111827}.vn-page:active{background:#1f2937}.pdf-native{width:100%;height:100%;display:flex;flex-direction:column;background:#0b0e14}.pdf-native .viewer-media{flex:1;min-height:0}.pdf-native-note{padding:10px 14px;background:#111827;color:#94a3b8;font-size:12px;text-align:center;flex-shrink:0;border-top:1px solid rgba(255,255,255,.06)}.link-btn{background:none;border:none;color:var(--color-primary-light);font-weight:700;cursor:pointer;padding:0 2px;font-size:12px}.pq-hero{display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--radius-lg);cursor:pointer;color:#fff;background:linear-gradient(135deg,var(--color-primary-light),var(--color-primary-dark) 55%,var(--color-primary));box-shadow:0 8px var(--color-primary-deep),0 14px 28px rgba(var(--color-primary-rgb),.35),inset 0 1px #ffffff40;transition:transform .12s ease,box-shadow .15s ease;margin-bottom:16px;animation:fadeUp .34s cubic-bezier(.22,1,.36,1)}.pq-hero:active{transform:translateY(4px);box-shadow:0 3px var(--color-primary-deep),0 6px 12px rgba(var(--color-primary-rgb),.3),inset 0 1px #fff3}.pq-hero-icon{width:52px;height:52px;border-radius:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#ffffff2e;color:#fff;box-shadow:inset 0 1px #ffffff4d}.pq-hero h3{color:#fff;font-size:17px;margin:0}.pq-hero p{color:#ffffffd9;font-size:12.5px;margin:2px 0 0}.pq-hero .pq-arrow{margin-left:auto;color:#ffffffe6}.filter-grid{gap:8px}.notif-prefs{background:var(--surface);border-radius:var(--radius-lg);border:1px solid rgba(255,255,255,.7);box-shadow:0 8px 24px #0f172a14,0 2px 6px #0f172a0d;padding:16px;margin-bottom:4px}[data-theme=dark] .notif-prefs{border-color:#ffffff17;box-shadow:0 14px 34px #0006,inset 0 1px #ffffff12}.notif-pref-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--surface-deep)}.notif-pref-row:last-child{border-bottom:none}.notif-search{display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--surface-deep);border-radius:14px;border:1.5px solid rgba(148,163,184,.4);box-shadow:inset 3px 3px 8px #94a3b859,inset -2px -2px 6px #fffc}[data-theme=dark] .notif-search{border-color:#94a3b840;box-shadow:inset 3px 3px 8px #00000080,inset -2px -2px 6px #ffffff0a}.switch{position:relative;width:50px;height:30px;border-radius:999px;flex:0 0 auto;background:var(--surface-deep);border:none;cursor:pointer;padding:0;box-shadow:inset 3px 3px 6px #94a3b880,inset -2px -2px 5px #fffc;transition:background .2s ease}[data-theme=dark] .switch{box-shadow:inset 3px 3px 6px #00000080,inset -2px -2px 5px #ffffff0d}.switch .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,#fff,#e2e8f0);box-shadow:0 2px 4px #0f172a4d;transition:transform .2s ease,background .2s ease}.switch.on{background:linear-gradient(180deg,var(--color-primary-light),var(--color-primary));box-shadow:0 3px var(--color-primary-deep)}.switch.on .knob{transform:translate(20px);background:#fff}.btn-ghost.danger{color:#ef4444}.btn-ghost.danger:hover{background:#ef44441f}.anon-hero{margin-bottom:12px}.anon-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}.anon-quick{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:12px 6px;border-radius:14px;background:var(--surface);border:1px solid var(--surface-deep);box-shadow:0 3px 0 var(--edge-shadow);font-weight:700;font-size:12px;color:var(--text);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.anon-quick:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge-shadow)}.anon-quick .emoji{font-size:20px}.anon-composer{margin-bottom:12px}.anon-post{margin-bottom:10px}.anon-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0}.anon-image{width:100%;border-radius:12px;margin-top:8px;max-height:360px;object-fit:cover}.anon-actions{gap:6px;margin-top:10px;flex-wrap:wrap}.anon-action{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1px solid var(--surface-deep);background:var(--surface);color:var(--text);font-size:13px;font-weight:600;cursor:pointer}.anon-action.voted{background:var(--accent);color:#fff;border-color:var(--accent)}.anon-action:disabled{opacity:.6;cursor:default}.anon-comments{margin-top:10px;border-top:1px solid var(--surface-deep);padding-top:10px;display:flex;flex-direction:column;gap:8px}.anon-comment{background:var(--surface);border-radius:10px;padding:8px 10px}.poll-opt{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--surface-deep);background:var(--surface);color:var(--text);font-weight:600;cursor:pointer;text-align:left}.poll-opt.chosen{border-color:var(--accent);background:var(--color-primary)14}.poll-opt:disabled{cursor:default}.poll-label{display:inline-flex;align-items:center;gap:6px}.poll-pct{color:var(--muted);font-weight:700}@media (max-width: 480px){.anon-cards{grid-template-columns:repeat(2,1fr)}}.anon-home{display:grid;grid-template-columns:1fr;gap:12px;margin-top:12px}.anon-home-card{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:18px;border-radius:16px;background:var(--surface);border:1px solid var(--surface-deep);box-shadow:0 4px 0 var(--edge-shadow);text-align:left;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.anon-home-card:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge-shadow)}.anon-home-emoji{font-size:30px}.anon-home-card strong{font-size:17px;color:var(--text)}.anon-react{padding:4px 9px;border-radius:999px;border:1px solid var(--surface-deep);background:var(--surface);font-size:13px;cursor:pointer}.anon-react.on{border-color:var(--accent);background:var(--color-primary)1a}.anon-mentions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.anon-avatar{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;color:#fff;font-weight:800;flex-shrink:0;overflow:hidden}

/* News editing and contributor upload usability patch */
.news-edit-btn {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--primary) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 12%, var(--surface));
  color: var(--primary);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.news-edit-btn:active { transform: translateY(1px); }
.media-upload-heading,
.upload-guide {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.media-upload-heading strong,
.upload-guide strong { color: var(--text); font-size: 14px; }
.media-upload-heading span,
.upload-guide span { color: var(--text-muted); font-size: 12px; line-height: 1.45; }
.media-picker,
.upload-file-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 78px;
  padding: 13px 14px;
  border: 1.5px dashed color-mix(in srgb, var(--primary) 55%, var(--surface-deep));
  border-radius: 14px;
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  color: var(--text);
  cursor: pointer;
  box-sizing: border-box;
}
.media-picker:active,
.upload-file-picker:active { background: color-mix(in srgb, var(--primary) 11%, var(--surface)); }
.media-picker input,
.upload-file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.media-picker > span:not(.media-picker-icon),
.upload-file-picker > span:not(.media-picker-icon) {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.media-picker strong,
.upload-file-picker strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.media-picker small,
.upload-file-picker small { color: var(--text-muted); font-size: 11px; line-height: 1.35; }
.media-picker-icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--primary);
  color: white;
  font-size: 23px;
  font-weight: 800;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--primary) 62%, #000);
}
.upload-guide {
  padding: 13px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--surface-deep));
}
.form-step-label {
  margin: 18px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--surface-deep);
  color: var(--primary);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
}
#upload-card > .form-step-label:first-of-type { margin-top: 8px; }
.success-banner {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, #22c55e 13%, var(--surface));
  border: 1px solid color-mix(in srgb, #22c55e 38%, transparent);
  color: #16a34a;
  font-size: 13px;
  font-weight: 700;
}
@media (max-width: 420px) {
  #upload-card { padding: 16px !important; }
  .news-edit-btn { padding: 0 9px; }
}

/* v2.1 — Android-safe editors, complete News form, simplified Anonymous UI */
.modal-overlay {
  z-index: 10000 !important;
  padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)) !important;
  background: rgba(2, 6, 23, .78) !important;
  align-items: center !important;
  overflow: hidden !important;
}
.modal-3d {
  position: relative !important;
  display: block !important;
  width: min(100%, 620px) !important;
  max-height: calc(100dvh - 20px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  opacity: 1 !important;
  visibility: visible !important;
  color: #0f172a !important;
  background: #ffffff !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateZ(0) !important;
  border-radius: 20px !important;
  padding: 18px 16px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
}
[data-theme="dark"] .modal-3d {
  color: #f8fafc !important;
  background: #0f172a !important;
  border-color: rgba(255,255,255,.14) !important;
}
.modal-3d > * { position: relative; z-index: 1; }
.news-scope-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.news-scope-grid .field-group { margin-bottom: 0; }
.news-attachments {
  padding: 12px;
  border: 1px solid var(--surface-deep);
  border-radius: 14px;
  background: var(--surface-raised);
}
.attachment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid var(--surface-deep);
  font-size: 12px;
}
.attachment-row a,
.attachment-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.attachment-picker { margin-top: 10px; min-height: 66px; }
@media (max-width: 520px) {
  .news-scope-grid { grid-template-columns: 1fr; }
  .modal-overlay { padding-left: 6px !important; padding-right: 6px !important; }
  .modal-3d { border-radius: 18px !important; max-height: calc(100dvh - 12px) !important; }
}

/* v25 — native full-screen News editor (does not depend on modal/backdrop rendering) */
.news-editor-page {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  background: #f8fafc;
  color: #0f172a;
}
[data-theme="dark"] .news-editor-page {
  background: #0b1120;
  color: #f8fafc;
}
.news-editor-header {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 62px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 16px rgba(15, 23, 42, .08);
}
[data-theme="dark"] .news-editor-header {
  background: #111827;
  border-bottom-color: rgba(255,255,255,.1);
}
.news-editor-header h2 {
  margin: 0;
  text-align: center;
  font-size: 18px;
}
.news-editor-back {
  width: 42px;
  height: 42px;
  border: 1px solid var(--surface-deep);
  border-radius: 13px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
}
.news-editor-spacer { width: 42px; }
.news-editor-body {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 18px 16px calc(32px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.anonymous-main-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 14px;
}
.anonymous-main-tabs .pill {
  width: 100%;
  min-width: 0;
  justify-content: center;
  padding: 8px 5px;
  font-size: 12px;
}
.anonymous-profile-card {
  max-width: 480px;
  margin: 12px auto 0;
}
@media (max-width: 380px) {
  .anonymous-main-tabs { gap: 4px; }
  .anonymous-main-tabs .pill { font-size: 11px; padding: 7px 3px; }
}

/* v27 — non-blocking update notice; updates auto-apply on app visit/focus */
.modal-overlay:has(.update-modal) {
  align-items: flex-start !important;
  justify-content: center !important;
  padding-top: calc(12px + env(safe-area-inset-top, 0px)) !important;
  background: transparent !important;
  pointer-events: none !important;
}
.update-modal {
  width: calc(100% - 20px) !important;
  max-width: 440px !important;
  max-height: none !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  box-shadow: 0 12px 34px rgba(2, 6, 23, .32) !important;
  pointer-events: auto !important;
}
[data-theme="dark"] .update-modal {
  background: #111827 !important;
  color: #f8fafc !important;
}
/* v28 premium PDF reader, News editor scrolling, Anonymous refinement */
.pdf-reader-screen{position:fixed;inset:0;z-index:30000;background:#080b12;color:#e8eefb;overflow:hidden;animation:pdfReaderIn .25s cubic-bezier(.22,1,.36,1)}
.pdf-reader-shell{position:relative;width:100%;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#11151d}
.pdf-reader-header{position:relative;z-index:12;display:grid;grid-template-columns:44px minmax(0,1fr) 44px 44px;align-items:center;gap:6px;min-height:58px;padding:calc(7px + env(safe-area-inset-top,0px)) 10px 7px;background:#111827e8;border-bottom:1px solid #ffffff12;backdrop-filter:blur(18px)}
.pdf-reader-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:800;color:#f8fafc;padding:0 4px}
.pdf-header-btn{width:40px;height:40px;border:0;border-radius:12px;background:#ffffff0d;color:#f8fafc;font-size:25px;display:flex;align-items:center;justify-content:center;cursor:pointer}.pdf-header-btn.bookmark{font-size:24px;color:#fbbf24}.pdf-header-btn:active{transform:scale(.93);background:#ffffff1f}
.pdf-more-menu{position:absolute;right:10px;top:calc(54px + env(safe-area-inset-top,0px));width:min(260px,calc(100vw - 20px));padding:8px;background:#1e293bf5;border:1px solid #ffffff17;border-radius:16px;box-shadow:0 18px 44px #0009;display:flex;flex-direction:column;gap:2px;z-index:30;animation:popIn .18s ease}.pdf-more-menu button{border:0;background:transparent;color:#e2e8f0;text-align:left;padding:11px 12px;border-radius:10px;font:inherit;font-weight:650;cursor:pointer}.pdf-more-menu button:active{background:#ffffff14}
.pdf-reading-progress{z-index:5;padding:6px 12px 7px;background:#0f172ae6;border-bottom:1px solid #ffffff0d}.pdf-progress-copy{display:flex;align-items:center;gap:10px;color:#cbd5e1;font-size:10.5px}.pdf-progress-copy span:first-child{flex:1}.pdf-progress-copy .estimate{color:#94a3b8}.pdf-progress-track{height:3px;margin-top:5px;background:#334155;border-radius:999px;overflow:hidden}.pdf-progress-track>div{height:100%;background:linear-gradient(90deg,var(--color-primary-soft),var(--color-primary-light));border-radius:inherit;transition:width .25s ease}
.pdf-reader-body{position:relative;flex:1;min-height:0;overflow:hidden;background:#171a21}.pdf-reader-body .pdf-pages{height:100%;padding:5px 4px 110px;scroll-behavior:smooth;overscroll-behavior:contain;background:#20242c}.pdf-reader-body .pdf-page{margin:0 auto 7px;width:max-content;max-width:100%;box-shadow:0 3px 14px #0008}.pdf-reader-body .pdf-page canvas{display:block;max-width:none;transition:filter .2s ease,transform .2s ease}
.pdf-reader-body .pdf-pages.horizontal{display:flex;align-items:flex-start;gap:8px;overflow-x:auto!important;overflow-y:hidden!important;scroll-snap-type:x mandatory;padding:6px 8px 100px}.pdf-pages.horizontal .pdf-page{flex:0 0 auto;scroll-snap-align:center;margin:0}.pdf-pages.vertical{overflow:auto!important}
.pdf-reader-dark .pdf-reader-body .pdf-page canvas{filter:invert(.9) hue-rotate(180deg) contrast(.92)}.pdf-reader-dark .pdf-reader-body,.pdf-reader-dark .pdf-pages{background:#05070b}
.pdf-floating-controls{position:absolute;z-index:20;right:10px;top:50%;transform:translate(18px,-50%) scale(.96);display:grid;grid-template-columns:repeat(2,42px);gap:7px;padding:8px;border-radius:18px;background:#111827e8;border:1px solid #ffffff17;box-shadow:0 14px 34px #0009;backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}.pdf-floating-controls.show{opacity:1;pointer-events:auto;transform:translate(0,-50%) scale(1)}.pdf-floating-controls .v-btn{width:42px;height:42px}
.viewer-search{position:absolute!important;z-index:24;left:8px;right:8px;top:8px;border-radius:14px;box-shadow:0 12px 30px #0008}.pdf-thumbs{position:absolute!important;z-index:18;left:0;top:0;bottom:0;width:112px;background:#0f172af2;overflow-y:auto;padding:10px 7px;box-shadow:8px 0 24px #0008}
.viewer-pagenav{z-index:15;min-height:48px!important;padding:5px 14px calc(5px + env(safe-area-inset-bottom,0px))!important;background:#0f172af2!important;border-top:1px solid #ffffff12!important}.viewer-pagenav .v-btn{width:38px;height:38px}.vn-page{font-weight:800;color:#f8fafc;min-width:90px;text-align:center}
.pdf-rating-footer{display:flex;align-items:center;gap:9px;padding:7px 10px;background:#111827;border-top:1px solid #ffffff0d;overflow-x:auto;white-space:nowrap;color:#cbd5e1;font-size:11px}.pdf-rating-summary{display:flex;align-items:center;gap:5px}.pdf-rating-footer .stars{font-size:12px}.pdf-rating-footer .link-btn{font-size:11px}.pdf-rating-footer .danger{color:#fca5a5}.pdf-review-count{color:#94a3b8}
.pdf-reader-screen .viewer-center{color:#e2e8f0}.pdf-reader-screen .modal-overlay{z-index:31000}.pdf-reader-screen .modal-3d{max-width:430px!important}
@keyframes pdfReaderIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@media(orientation:landscape){.pdf-reader-header{min-height:48px;padding-top:calc(3px + env(safe-area-inset-top,0px));padding-bottom:3px}.pdf-reading-progress{padding-top:3px;padding-bottom:4px}.pdf-floating-controls{grid-template-columns:repeat(4,42px);right:12px}.pdf-reader-body .pdf-pages{padding-bottom:72px}.pdf-rating-footer{display:none}}
.news-editor-page{display:block!important;overflow-y:auto!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch}.news-editor-header{position:sticky!important;top:0}.news-editor-body{overflow:visible!important;min-height:calc(100dvh - 64px)}.news-autosave-note{font-size:11px;text-align:center;margin:6px 0 12px}
.anonymous-main-tabs{position:sticky;top:calc(58px + env(safe-area-inset-top,0px));z-index:12;display:flex!important;gap:3px!important;padding:4px!important;border-radius:14px;background:var(--surface-deep);box-shadow:inset 0 1px 3px #0002;margin-bottom:12px!important}.anonymous-main-tabs .pill{flex:1;box-shadow:none!important;border-radius:11px!important;background:transparent!important;color:var(--text-muted)!important;transition:background .22s ease,color .22s ease,transform .18s ease!important}.anonymous-main-tabs .pill.active{background:var(--surface)!important;color:var(--primary)!important;box-shadow:0 3px 10px #0f172a1f!important;transform:translateY(-1px)}.anon-post{border-radius:18px!important;padding:14px!important;box-shadow:0 5px 18px #0f172a12!important;border:1px solid rgba(148,163,184,.15)!important}.anon-post .anon-avatar{width:38px;height:38px}.anon-actions{margin-top:10px!important;padding-top:8px;border-top:1px solid var(--surface-deep);gap:5px!important}.anon-action{border-radius:999px!important;padding:6px 9px!important}.poll-opt{position:relative!important;overflow:hidden!important;isolation:isolate;min-height:46px!important;border-radius:13px!important}.poll-progress-fill{position:absolute;z-index:-1;inset:0 auto 0 0;background:linear-gradient(90deg,rgba(var(--color-primary-rgb),.18),rgba(var(--color-primary-light-rgb),.1));transition:width .55s cubic-bezier(.22,1,.36,1);border-radius:inherit}.anon-chat-bubble{width:fit-content;max-width:88%;border-radius:18px!important;box-shadow:0 2px 8px #0f172a17!important}.anon-chat-bubble.mine{align-self:flex-end;border-bottom-right-radius:5px!important;background:linear-gradient(145deg,var(--color-primary),var(--color-primary-dark))!important;color:#fff}.anon-chat-bubble.theirs{align-self:flex-start;border-bottom-left-radius:5px!important}.anonymous-profile-card{border-radius:20px!important;box-shadow:0 8px 28px #0f172a18!important}
.anon-chat-status{display:flex;align-items:center;justify-content:space-between;margin:7px 4px 2px;color:#16a34a;font-size:11px;font-weight:700}.anon-chat-status .typing{color:var(--primary);font-style:italic}.anon-chat-thread{min-height:180px;padding:4px 2px 84px}.anon-chat-bubble .u-sub{color:inherit;opacity:.66}.anon-chat-thread .anon-chat-bubble .anon-actions{border-color:rgba(148,163,184,.18)}.anon-chat-video{display:block;width:min(100%,300px);max-height:260px;border-radius:13px;margin-top:7px;background:#000}.anon-chat-audio{display:block;width:min(100%,280px);height:42px;margin-top:7px}.anon-seen{text-align:right;margin-top:4px;font-size:9px;opacity:.7}.anon-pinned-message{position:sticky;top:108px;z-index:8;margin:8px 0;padding:9px 12px;border-left:3px solid var(--accent);border-radius:11px;background:var(--surface);box-shadow:0 4px 14px #0f172a17;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.anon-chat-composer{position:sticky;bottom:calc(4px + env(safe-area-inset-bottom,0px));z-index:15;display:flex;align-items:center;padding:7px;border-radius:18px;background:var(--surface);box-shadow:0 8px 30px #0f172a2b;border:1px solid var(--surface-deep)}.anon-chat-composer .icon-btn{width:35px;height:35px;flex:0 0 35px;font-size:11px}.anon-chat-composer .input-3d{min-width:80px;padding:10px 11px}.anon-media-preview{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:7px 4px;padding:8px 10px;border-radius:11px;background:var(--surface-raised);font-size:11px}.anon-emoji-picker{display:flex;gap:5px;overflow-x:auto;padding:7px;margin:5px 0;border-radius:13px;background:var(--surface)}.anon-emoji-picker button{width:36px;height:36px;flex:0 0 36px;border:0;border-radius:10px;background:var(--surface-raised);font-size:20px}.anon-profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}.anon-profile-stats>div{display:flex;flex-direction:column;align-items:center;padding:10px;border-radius:13px;background:var(--surface-raised)}.anon-profile-stats strong{font-size:20px;color:var(--primary)}.anon-profile-stats span{font-size:11px;color:var(--text-muted)}.anon-profile-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin:0 0 12px}
/* v31 final polish: navigation motion, Admin Assistant, low-end performance */
.bottom-nav{will-change:transform,opacity;animation:bottomNavEnter .28s cubic-bezier(.22,1,.36,1);transition:transform .24s ease,opacity .2s ease,visibility .2s ease}
body:has(.pdf-reader-screen) .bottom-nav,body:has(.news-editor-page) .bottom-nav,body:has(.wa-viewer) .bottom-nav{transform:translateY(calc(100% + 28px));opacity:0;visibility:hidden;pointer-events:none}
@keyframes bottomNavEnter{from{transform:translateY(calc(100% + 24px));opacity:0}to{transform:translateY(0);opacity:1}}
.admin-assistant-prompts{display:flex;gap:7px;overflow-x:auto;padding:3px 1px 10px;scroll-snap-type:x proximity}.admin-assistant-prompts::-webkit-scrollbar{display:none}.admin-assistant-prompts button{flex:0 0 min(245px,76vw);scroll-snap-align:start;padding:10px 12px;border:1px solid color-mix(in srgb,var(--primary) 20%,var(--surface-deep));border-radius:14px;background:color-mix(in srgb,var(--primary) 7%,var(--surface));color:var(--text);font:inherit;font-size:12px;font-weight:700;text-align:left;box-shadow:0 3px 10px #0f172a0d;cursor:pointer}.admin-assistant-prompts button:active{transform:scale(.98)}.admin-assistant-chat{border-radius:20px!important;box-shadow:0 12px 34px #0f172a17!important}.admin-assistant-chat .input-3d{border-radius:16px}
.card-3d,.list-item,.anon-post,.admin-table-wrap{content-visibility:auto;contain-intrinsic-size:auto 120px}.news-editor-body,.pdf-reader-body,.anon-chat-thread{transform:none}img{content-visibility:auto}.skeleton-3d{will-change:background-position}.empty-state{min-height:220px}.error-screen{animation:fadeIn .2s ease}.success-banner{animation:fadeUp .28s cubic-bezier(.22,1,.36,1)}
@media(max-width:420px){.page{padding-left:13px!important;padding-right:13px!important}.card-3d{border-radius:18px}.admin-assistant-chat{padding:13px!important}}
@media(prefers-reduced-motion:reduce){.bottom-nav{animation:none}.admin-assistant-prompts button{transition:none}}
@media(update:slow){.card-3d,.anon-post{box-shadow:0 2px 8px #0f172a12!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
/* v34 — native text behaviour, premium admin, contributor files, chat badge */
html,body,#root,#root *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
input,textarea,[contenteditable="true"],[contenteditable=""],.input-3d,.message-composer,.anon-chat-composer{-webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important}
::selection{background:transparent!important;color:inherit}
input::selection,textarea::selection,[contenteditable]::selection{background:rgba(var(--color-primary-rgb),.26)!important;color:inherit}
.nav-icon{position:relative!important;display:inline-flex!important;align-items:center;justify-content:center;width:24px;height:24px;overflow:visible!important}.chat-nav-badge{top:-8px!important;right:-10px!important;min-width:16px!important;height:16px!important;padding:0 4px!important;border:2px solid var(--surface)!important;font-size:8px!important;line-height:12px!important;z-index:4;animation:chatBadgePop .28s cubic-bezier(.2,1.6,.4,1),chatBadgePulse 2.2s ease-in-out infinite}
.nav-tab.active .chat-nav-badge{border-color:var(--color-primary)!important}
@keyframes chatBadgePop{from{transform:scale(0)}to{transform:scale(1)}}@keyframes chatBadgePulse{0%,80%,100%{box-shadow:0 2px #b45309,0 3px 8px #ef444455}90%{box-shadow:0 2px #b45309,0 0 0 5px #ef444422}}
.admin-shell{background:radial-gradient(circle at 12% 0%,rgba(var(--color-primary-soft-rgb),.11),transparent 32%),var(--bg-page)!important;min-height:100dvh}.admin-main{padding:clamp(14px,2vw,26px)!important}.admin-section-head{padding:4px 2px 12px}.admin-section-head h1{font-size:clamp(22px,3vw,30px)!important;letter-spacing:-.035em}.admin-section-head p{max-width:720px;line-height:1.55;color:var(--text-muted)}.panel,.stat-card,.admin-main .card-3d{border:1px solid rgba(255,255,255,.18)!important;border-radius:20px!important;background:color-mix(in srgb,var(--surface) 88%,transparent)!important;box-shadow:0 12px 32px rgba(15,23,42,.09),inset 0 1px rgba(255,255,255,.16)!important;backdrop-filter:blur(16px) saturate(135%);-webkit-backdrop-filter:blur(16px) saturate(135%)}
.admin-table-wrap{position:relative;border:1px solid color-mix(in srgb,var(--edge-shadow) 45%,transparent);border-radius:18px!important;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 10px 28px rgba(15,23,42,.08);overflow:auto!important;-webkit-overflow-scrolling:touch}.admin-table{width:100%;border-collapse:separate!important;border-spacing:0!important}.admin-table thead{position:sticky;top:0;z-index:5}.admin-table th{position:sticky;top:0;background:color-mix(in srgb,var(--surface) 96%,var(--color-primary) 4%)!important;backdrop-filter:blur(14px);padding:12px 13px!important;font-size:10px!important;text-transform:uppercase;letter-spacing:.055em;color:var(--text-muted);border-bottom:1px solid var(--surface-deep)!important;white-space:nowrap}.admin-table td{padding:12px 13px!important;border-bottom:1px solid color-mix(in srgb,var(--surface-deep) 78%,transparent)!important;vertical-align:middle}.admin-table tbody tr{transition:background .16s ease,transform .12s ease}.admin-table tbody tr:hover{background:color-mix(in srgb,var(--primary) 5%,transparent)}.admin-table tbody tr:active{background:color-mix(in srgb,var(--primary) 9%,transparent)}
.admin-actions .icon-btn,.mini-action{transition:transform .12s ease,box-shadow .16s ease,background .16s ease}.admin-actions .icon-btn:active,.mini-action:active{transform:scale(.93)}.mini-action{border:1px solid color-mix(in srgb,var(--primary) 25%,var(--surface-deep));border-radius:9px;padding:6px 8px;background:color-mix(in srgb,var(--primary) 7%,var(--surface));color:var(--primary);font:inherit;font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap}.mini-action.danger{color:#dc2626;border-color:#ef444444;background:#ef44440c}.file-name-cell{min-width:180px}.file-name-cell strong{display:block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contributor-files-table{max-height:min(56dvh,560px)!important}.contributor-files-table table{min-width:1320px}.file-quick-actions{min-width:230px}.user-activity-cell{display:flex;flex-direction:column;gap:2px;min-width:145px}.user-activity-cell strong{font-size:12px}.user-activity-cell .is-online{color:#16a34a}.user-activity-cell .is-offline{color:var(--text-muted)}.user-activity-cell span,.user-activity-cell small{font-size:10px;color:var(--text-muted)}
.admin-toolbar,.subtabs{border-radius:16px}.subtabs{gap:6px;overflow-x:auto;padding-bottom:4px}.subtabs::-webkit-scrollbar{display:none}.admin-sidebar{background:color-mix(in srgb,var(--surface) 82%,transparent)!important;backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border-right:1px solid rgba(255,255,255,.15)!important}.admin-nav-item{border-radius:12px!important;transition:background .16s ease,transform .12s ease!important}.admin-nav-item:active{transform:scale(.98)}
@media(max-width:760px){.admin-main{padding:12px!important}.admin-table-wrap{border-radius:14px!important}.admin-table th,.admin-table td{padding:10px!important}.panel{border-radius:17px!important}.contributor-files-table{margin-left:-4px;margin-right:-4px;max-height:62dvh!important}}
@media(prefers-reduced-motion:reduce){.chat-nav-badge{animation:none}.admin-table tbody tr,.mini-action{transition:none}}
html body #root input,html body #root textarea,html body #root [contenteditable="true"],html body #root [contenteditable=""],html body #root .input-3d,html body #root .message-composer,html body #root .anon-chat-composer{-webkit-user-select:text!important;user-select:text!important;-webkit-touch-callout:default!important}
/* v36 — anonymous unread badges, poll reminder, voter analytics */
.anonymous-chat-card{overflow:visible!important}.anonymous-card-badge{position:absolute!important;top:-7px!important;right:-7px!important;min-width:20px!important;height:20px!important;padding:0 5px!important;border:2px solid var(--surface)!important;background:linear-gradient(135deg,#fb7185,#ef4444)!important;color:#fff!important;font-size:9px!important;box-shadow:0 4px 12px #ef444466!important;animation:anonBadgePop .28s cubic-bezier(.2,1.6,.4,1)}.anonymous-tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px;margin-left:4px;border-radius:999px;background:#ef4444;color:#fff;font-size:8px;font-weight:900;line-height:1;box-shadow:0 2px 8px #ef444455;animation:anonBadgePop .25s cubic-bezier(.2,1.6,.4,1)}@keyframes anonBadgePop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}
.poll-reminder-overlay{position:fixed;inset:0;z-index:26000;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(2,6,23,.68);backdrop-filter:blur(12px) saturate(120%);-webkit-backdrop-filter:blur(12px) saturate(120%);animation:fadeIn .2s ease}.poll-reminder-card{width:min(100%,460px);max-height:min(88dvh,700px);overflow-y:auto;padding:22px;border-radius:24px;background:var(--surface);color:var(--text);border:1px solid rgba(255,255,255,.18);box-shadow:0 24px 70px rgba(2,6,23,.48),inset 0 1px rgba(255,255,255,.15);animation:pollReminderIn .32s cubic-bezier(.22,1,.36,1)}.poll-reminder-kicker{display:inline-flex;padding:5px 10px;border-radius:999px;background:var(--color-primary)16;color:var(--primary);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.poll-reminder-card h2{margin:12px 0 5px;font-size:22px}.poll-reminder-card h3{margin:0 0 8px;font-size:16px;line-height:1.45}.poll-reminder-description{margin:0 0 14px;color:var(--text-muted);font-size:13px;line-height:1.55}.poll-reminder-options{display:flex;flex-direction:column;gap:8px;margin:14px 0}.poll-reminder-options button{width:100%;display:flex;align-items:center;gap:10px;padding:12px 13px;border-radius:14px;border:1px solid var(--surface-deep);background:var(--surface-raised);color:var(--text);font:inherit;font-weight:700;text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .1s ease}.poll-reminder-options button:active{transform:scale(.985)}.poll-reminder-options button.selected{border-color:var(--primary);background:var(--color-primary)12}.poll-reminder-options .radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--edge-shadow);box-shadow:inset 0 0 0 4px var(--surface);background:transparent}.poll-reminder-options button.selected .radio{border-color:var(--primary);background:var(--primary)}.poll-reminder-actions{display:flex;gap:10px;margin-top:18px}.poll-reminder-actions button{flex:1;border:0;border-radius:14px;padding:12px 14px;font:inherit;font-weight:850;cursor:pointer}.poll-reminder-actions .later{background:var(--surface-deep);color:var(--text-muted)}.poll-reminder-actions .vote{background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary));color:#fff;box-shadow:0 4px 0 var(--color-primary-dark),0 8px 18px var(--color-primary)38}.poll-reminder-actions .vote:disabled{opacity:.45;box-shadow:none}.poll-reminder-actions .vote:active{transform:translateY(2px);box-shadow:0 2px 0 var(--color-primary-dark)}@keyframes pollReminderIn{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
.poll-heading{min-width:0}.poll-heading strong{font-size:14px}.poll-question{font-size:13px;margin-top:3px;color:var(--text)}.poll-voters-panel{display:flex;flex-direction:column;gap:12px}.poll-voter-summary{padding:12px;border-radius:15px;background:var(--surface-raised);border:1px solid var(--surface-deep)}.poll-summary-options{display:grid;gap:7px;margin-top:9px}.poll-summary-options>div>span{display:block;font-size:11px;color:var(--text-muted);margin-bottom:3px}.poll-summary-options>div>div{height:6px;border-radius:999px;background:var(--surface-deep);overflow:hidden}.poll-summary-options i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light));transition:width .4s ease}.poll-voter-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark));color:#fff;font-weight:900}.poll-voters-panel .admin-table{min-width:820px}
@media(max-width:480px){.poll-reminder-overlay{align-items:flex-end;padding:7px}.poll-reminder-card{width:100%;max-height:92dvh;border-radius:24px 24px 14px 14px;padding:19px}.poll-reminder-card h2{font-size:20px}}
@media(prefers-reduced-motion:reduce){.anonymous-card-badge,.anonymous-tab-badge,.poll-reminder-card{animation:none}}
/* v42 — true centered native-style Home poll modal */
body.poll-modal-open{overflow:hidden!important;overscroll-behavior:none!important;touch-action:none!important}
.poll-reminder-overlay{position:fixed!important;inset:0!important;z-index:32000!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:clamp(12px,3vw,24px)!important;overflow:hidden!important;background:rgba(2,6,23,.66)!important;backdrop-filter:blur(14px) saturate(125%)!important;-webkit-backdrop-filter:blur(14px) saturate(125%)!important;animation:pollBackdropIn .2s ease!important;overscroll-behavior:contain}
.poll-reminder-card{position:relative!important;width:min(100%,460px)!important;height:auto!important;max-height:min(82dvh,720px)!important;margin:auto!important;padding:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;border:1px solid rgba(255,255,255,.2)!important;border-radius:24px!important;background:color-mix(in srgb,var(--surface) 94%,transparent)!important;color:var(--text)!important;box-shadow:0 30px 90px rgba(2,6,23,.55),0 10px 30px rgba(2,6,23,.24),inset 0 1px rgba(255,255,255,.2)!important;backdrop-filter:blur(22px) saturate(135%);-webkit-backdrop-filter:blur(22px) saturate(135%);animation:pollDialogIn .3s cubic-bezier(.22,1,.36,1)!important;overscroll-behavior:contain}
.poll-reminder-header{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;flex:0 0 auto;padding:15px 16px 9px;background:color-mix(in srgb,var(--surface) 89%,transparent);border-bottom:1px solid color-mix(in srgb,var(--surface-deep) 72%,transparent)}
.poll-reminder-kicker{margin:0!important;padding:5px 10px!important;border-radius:999px!important;background:rgba(var(--color-primary-rgb),.1)!important;color:var(--primary)!important;font-size:9px!important;font-weight:900!important;text-transform:uppercase;letter-spacing:.07em}
.poll-reminder-close{width:32px;height:32px;flex:0 0 32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--surface-deep);border-radius:10px;background:var(--surface-raised);color:var(--text-muted);font-size:22px;line-height:1;cursor:pointer;transition:transform .1s ease,background .15s ease,color .15s ease}.poll-reminder-close:hover{color:var(--text);background:var(--surface-deep)}.poll-reminder-close:active{transform:scale(.92)}.poll-reminder-close:disabled{opacity:.4}
.poll-reminder-scroll{flex:1 1 auto;min-height:0;padding:15px 18px 8px;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(100,116,139,.32) transparent}.poll-reminder-scroll h2{margin:0 0 6px!important;font-size:clamp(20px,5vw,25px)!important;line-height:1.16;letter-spacing:-.035em}.poll-reminder-scroll h3{margin:0 0 8px!important;font-size:14px!important;line-height:1.5!important;color:var(--text)!important}.poll-reminder-description{margin:0 0 12px!important;font-size:12px!important;line-height:1.55!important;color:var(--text-muted)!important}
.poll-reminder-options{display:flex!important;flex-direction:column!important;gap:7px!important;margin:12px 0 8px!important}.poll-reminder-options button{width:100%!important;min-height:45px!important;display:flex!important;align-items:center!important;gap:10px!important;padding:10px 12px!important;border:1px solid color-mix(in srgb,var(--edge-shadow) 42%,transparent)!important;border-radius:13px!important;background:color-mix(in srgb,var(--surface-raised) 82%,transparent)!important;color:var(--text)!important;font:inherit!important;font-size:12px!important;font-weight:750!important;text-align:left!important;cursor:pointer;transition:transform .1s ease,border-color .16s ease,background .16s ease!important}.poll-reminder-options button:hover{border-color:rgba(var(--color-primary-rgb),.28)!important}.poll-reminder-options button:active{transform:scale(.985)!important}.poll-reminder-options button.selected{border-color:var(--primary)!important;background:rgba(var(--color-primary-rgb),.1)!important;box-shadow:0 0 0 2px rgba(var(--color-primary-rgb),.08)}.poll-reminder-options .radio{width:18px!important;height:18px!important;flex:0 0 18px;border:2px solid var(--edge-shadow)!important;border-radius:50%;background:transparent!important;box-shadow:inset 0 0 0 4px var(--surface)!important}.poll-reminder-options button.selected .radio{border-color:var(--primary)!important;background:var(--primary)!important}
.poll-reminder-actions{position:relative;z-index:3;display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:9px!important;flex:0 0 auto;margin:0!important;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px))!important;background:color-mix(in srgb,var(--surface) 94%,transparent);border-top:1px solid color-mix(in srgb,var(--surface-deep) 75%,transparent)}.poll-reminder-actions button{min-height:43px;border:0!important;border-radius:13px!important;padding:10px 12px!important;font:inherit!important;font-size:12px!important;font-weight:900!important;cursor:pointer;transition:transform .11s ease,filter .15s ease,box-shadow .15s ease}.poll-reminder-actions button:active{transform:translateY(2px)}.poll-reminder-actions .later{background:var(--surface-deep)!important;color:var(--text-muted)!important;box-shadow:none!important}.poll-reminder-actions .vote{background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary) 58%,var(--color-primary-dark))!important;color:#fff!important;box-shadow:0 5px 0 var(--color-primary-deep),0 10px 24px rgba(var(--color-primary-rgb),.3)!important}.poll-reminder-actions .vote:hover{filter:brightness(1.05)}.poll-reminder-actions .vote:active{box-shadow:0 2px 0 var(--color-primary-deep),0 5px 12px rgba(var(--color-primary-rgb),.25)!important}.poll-reminder-actions button:disabled{opacity:.46!important;transform:none!important;box-shadow:none!important}
.poll-vote-success{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:color-mix(in srgb,var(--surface) 94%,rgba(16,185,129,.12));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:pollSuccessIn .24s ease}.poll-vote-success>span{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#34d399,#059669);color:#fff;font-size:36px;font-weight:900;box-shadow:0 12px 30px rgba(16,185,129,.35);animation:pollCheckPop .4s cubic-bezier(.2,1.6,.4,1)}.poll-vote-success strong{font-size:19px}.poll-vote-success small{color:var(--text-muted);font-size:12px}
@keyframes pollBackdropIn{from{opacity:0}to{opacity:1}}@keyframes pollDialogIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}@keyframes pollSuccessIn{from{opacity:0}to{opacity:1}}@keyframes pollCheckPop{from{transform:scale(0) rotate(-20deg)}to{transform:scale(1) rotate(0)}}
[data-theme="dark"] .poll-reminder-card,[data-theme="dark"] .poll-reminder-header,[data-theme="dark"] .poll-reminder-actions{background:rgba(15,23,42,.93)!important;border-color:rgba(148,163,184,.14)!important}
@media(max-width:480px){.poll-reminder-overlay{align-items:center!important;justify-content:center!important;padding:12px!important}.poll-reminder-card{width:100%!important;max-height:82dvh!important;border-radius:22px!important}.poll-reminder-header{padding:13px 14px 8px}.poll-reminder-scroll{padding:13px 15px 7px}.poll-reminder-actions{padding-left:14px!important;padding-right:14px!important}.poll-reminder-actions .later{font-size:11px!important}}
@media(max-height:620px){.poll-reminder-card{max-height:86dvh!important}.poll-reminder-header{padding-top:9px}.poll-reminder-scroll{padding-top:10px}.poll-reminder-options button{min-height:39px!important;padding-top:8px!important;padding-bottom:8px!important}.poll-reminder-actions{padding-top:9px!important;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))!important}}
@media(prefers-reduced-motion:reduce){.poll-reminder-overlay,.poll-reminder-card,.poll-vote-success,.poll-vote-success>span{animation:none!important;transition:none!important}}
body.poll-modal-open .ptr-content{transform:none!important;will-change:auto!important}body.poll-modal-open .page-enter{transform:none!important;animation:none!important}
/* v45 — Android-safe scrolling for News editor and every fixed app surface */
.ptr-content{will-change:auto!important}
body.news-editor-open{overflow:hidden!important;overscroll-behavior:none!important;touch-action:pan-y!important}
body.news-editor-open .ptr-content,
body:has(.pdf-reader-screen) .ptr-content,
body:has(.wa-viewer) .ptr-content,
body:has(.modal-overlay) .ptr-content{transform:none!important;will-change:auto!important}
body.news-editor-open .page-enter,
body:has(.pdf-reader-screen) .page-enter,
body:has(.wa-viewer) .page-enter,
body:has(.modal-overlay) .page-enter{transform:none!important;animation:none!important}
.news-editor-page{display:flex!important;flex-direction:column!important;width:100%!important;height:100vh!important;height:100dvh!important;max-height:100dvh!important;min-height:0!important;overflow:hidden!important;overscroll-behavior:none!important;touch-action:pan-y!important}
.news-editor-header{position:relative!important;top:auto!important;flex:0 0 auto!important}
.news-editor-body{position:relative!important;flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-x:hidden!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-y:contain!important;touch-action:pan-y!important;scrollbar-gutter:stable}
/* v46 — secure email-domain guidance on authentication screens */
.email-security-hint{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin:-7px 0 10px;padding:8px 10px;border:1px solid rgba(245,158,11,.28);border-radius:11px;background:rgba(245,158,11,.09);color:#92400e;font-size:11px;font-weight:700;line-height:1.4}.email-security-hint button{appearance:none;border:0;background:transparent;color:var(--color-primary-dark);padding:0;font:inherit;font-weight:900;text-decoration:underline;text-underline-offset:2px;cursor:pointer}.email-security-hint button:active{transform:scale(.98)}[data-theme="dark"] .email-security-hint{border-color:rgba(251,191,36,.25);background:rgba(245,158,11,.12);color:#fde68a}[data-theme="dark"] .email-security-hint button{color:var(--color-primary-light)}
/* v48 — instant, server-side note search */
.note-fast-search{position:relative;margin:2px 0 16px;padding:12px;border:1px solid color-mix(in srgb,var(--primary) 18%,var(--surface-deep));border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface));box-shadow:0 8px 24px rgba(15,23,42,.07)}.note-fast-search-box{position:relative}.note-fast-search-box .input-3d{width:100%;min-height:48px;padding-left:42px!important;padding-right:42px!important;border-radius:14px!important;background:var(--surface-raised)!important}.note-fast-search-icon{position:absolute;z-index:2;left:14px;top:50%;transform:translateY(-50%);color:var(--primary);font-size:25px;font-weight:900;line-height:1;pointer-events:none}.note-fast-search-clear{position:absolute;z-index:2;right:8px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:0;border-radius:10px;background:var(--surface-deep);color:var(--text-muted);font:inherit;font-size:22px;cursor:pointer}.note-fast-search-clear:active{transform:translateY(-50%) scale(.92)}.note-fast-search-status{margin:7px 3px 0;color:var(--text-muted);font-size:10px}.note-fast-results{margin-top:11px;padding-top:10px;border-top:1px solid var(--surface-deep)}.note-fast-results-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 9px}.note-fast-results-head strong{font-size:11px;color:var(--text)}.note-fast-results-head span{font-size:9px;color:var(--primary);font-weight:800}.note-fast-results .card-3d{animation:none!important}.note-fast-loading{height:48px;display:flex;align-items:center;justify-content:center;gap:5px}.note-fast-loading i{width:7px;height:7px;border-radius:50%;background:var(--primary);animation:noteSearchDot .8s ease-in-out infinite}.note-fast-loading i:nth-child(2){animation-delay:.12s}.note-fast-loading i:nth-child(3){animation-delay:.24s}@keyframes noteSearchDot{0%,100%{opacity:.25;transform:translateY(2px)}50%{opacity:1;transform:translateY(-3px)}}@media(max-width:420px){.note-fast-search{padding:10px;border-radius:16px}.note-fast-results-head span{display:none}}@media(prefers-reduced-motion:reduce){.note-fast-loading i{animation:none}}
/* v51 — flagship premium UI system */
:root{--premium-radius:22px;--premium-shadow:0 16px 42px rgba(15,23,42,.09),0 2px 8px rgba(15,23,42,.05);--premium-border:rgba(148,163,184,.16)}
.page{width:100%;padding:22px clamp(14px,4vw,22px) 28px}.page-enter{animation:premiumPageIn .24s cubic-bezier(.22,1,.36,1)}@keyframes premiumPageIn{from{opacity:.01;transform:translateY(8px)}to{opacity:1;transform:none}}
.card-3d{border:1px solid var(--premium-border)!important;border-radius:var(--premium-radius)!important;box-shadow:var(--premium-shadow)!important;background:color-mix(in srgb,var(--surface) 94%,transparent)!important;backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);animation:premiumCardIn .3s cubic-bezier(.22,1,.36,1) both}.card-3d:active{transform:scale(.988)!important}@keyframes premiumCardIn{from{opacity:0;transform:translateY(7px) scale(.992)}to{opacity:1;transform:none}}
.top-bar{min-height:62px;padding-left:clamp(14px,4vw,22px);padding-right:clamp(14px,4vw,22px);background:color-mix(in srgb,var(--surface) 80%,transparent)!important;border-bottom:1px solid var(--premium-border)!important;box-shadow:0 6px 26px rgba(15,23,42,.055)!important}.top-bar-title{font-size:19px!important;letter-spacing:-.035em}
.input-3d{min-height:46px;border:1px solid var(--premium-border)!important;border-radius:15px!important;background:color-mix(in srgb,var(--surface-raised) 88%,transparent)!important;box-shadow:inset 0 1px 2px rgba(15,23,42,.04)!important;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease!important}.input-3d:focus{border-color:color-mix(in srgb,var(--primary) 56%,transparent)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 12%,transparent)!important;background:var(--surface)!important}
.pill{min-height:38px;border:1px solid var(--premium-border)!important;border-radius:13px!important;box-shadow:none!important;transition:transform .12s ease,background .18s ease,color .18s ease!important}.pill:active{transform:scale(.96)}.pill.active{background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark))!important;box-shadow:0 8px 20px rgba(var(--color-primary-rgb),.22)!important}
.btn-primary-3d,.btn-accent-3d{border-radius:15px!important;box-shadow:0 9px 24px rgba(var(--color-primary-rgb),.24)!important;min-height:45px}.btn-primary-3d:active,.btn-accent-3d:active{transform:scale(.975)!important;box-shadow:0 4px 12px rgba(var(--color-primary-rgb),.18)!important}.btn-ghost{border-radius:13px!important;transition:transform .12s ease,background .16s ease!important}.btn-ghost:active{transform:scale(.97)!important}
.skeleton-3d{position:relative;overflow:hidden;background:color-mix(in srgb,var(--surface-deep) 84%,transparent)!important;animation:none!important}.skeleton-3d::after{content:"";position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:premiumShimmer 1.25s ease-in-out infinite}@keyframes premiumShimmer{to{transform:translateX(110%)}}
.empty-state{min-height:280px;margin:16px 0;padding:46px 22px!important;border:1px dashed color-mix(in srgb,var(--primary) 22%,var(--premium-border));border-radius:26px;background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--primary) 10%,transparent),transparent 48%),color-mix(in srgb,var(--surface) 78%,transparent)}.empty-state .es-icon{width:82px!important;height:82px!important;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 16%,var(--surface)),var(--surface))!important;box-shadow:0 18px 40px rgba(var(--color-primary-rgb),.15)!important}.empty-state h3{font-size:19px!important;letter-spacing:-.03em}.empty-state p{line-height:1.55!important}
.admin-main .card-3d,.admin-main .admin-card,.admin-main section{border-radius:20px}.admin-main table{border-collapse:separate;border-spacing:0}.admin-main th{font-size:10px!important;text-transform:uppercase;letter-spacing:.075em;color:var(--text-muted)}
/* Premium Notifications */
.premium-notifications-page .page{max-width:780px}.premium-notification-hero{position:relative;overflow:hidden;min-height:170px;padding:24px;border-radius:28px;background:linear-gradient(135deg,var(--color-primary-deep) 0%,var(--color-primary-dark) 52%,var(--color-primary) 115%);color:#fff;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;box-shadow:0 24px 60px rgba(var(--color-primary-deep-rgb),.25);isolation:isolate}.premium-notification-hero::before{content:"";position:absolute;right:-55px;top:-90px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,rgba(103,232,249,.42),transparent 66%);z-index:-1}.premium-notification-hero::after{content:"";position:absolute;left:36%;bottom:-95px;width:220px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.32),transparent 67%);z-index:-1}.premium-hero-kicker{font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;color:#a5f3fc}.premium-notification-hero h1{margin:5px 0 6px;color:#fff;font-size:clamp(25px,7vw,34px);letter-spacing:-.05em}.premium-notification-hero p{margin:0;max-width:440px;color:rgba(255,255,255,.76);font-size:12px;line-height:1.55}.premium-hero-orb{position:relative;flex:0 0 58px;width:58px;height:58px;border-radius:19px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px rgba(255,255,255,.22),0 14px 30px rgba(0,0,0,.18);backdrop-filter:blur(16px)}.premium-hero-orb b{position:absolute;right:-5px;top:-6px;min-width:24px;height:24px;padding:0 5px;border-radius:999px;background:#fb7185;border:3px solid var(--color-primary-deep);display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px}
.premium-notification-toolbar{position:sticky;top:62px;z-index:18;margin:14px 0 10px;padding:10px;border:1px solid var(--premium-border);border-radius:20px;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(22px) saturate(140%);box-shadow:0 12px 32px rgba(15,23,42,.08)}.premium-notification-search{display:flex;align-items:center;gap:9px;height:44px;padding:0 11px;border-radius:13px;background:var(--surface-raised);color:var(--text-muted)}.premium-notification-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:13px}.premium-notification-search button{width:28px;height:28px;border:0;border-radius:9px;background:var(--surface-deep);color:var(--text-muted);font-size:19px}.premium-filter-strip{display:flex;gap:6px;margin-top:8px;overflow-x:auto;scrollbar-width:none}.premium-filter-strip::-webkit-scrollbar{display:none}.premium-filter-strip button{flex:0 0 auto;min-height:34px;padding:7px 11px;border:0;border-radius:10px;background:transparent;color:var(--text-muted);font:inherit;font-size:10px;font-weight:850}.premium-filter-strip button.active{background:color-mix(in srgb,var(--primary) 12%,var(--surface));color:var(--primary)}
.premium-inbox-summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 2px 9px;color:var(--text-muted);font-size:11px}.premium-inbox-summary strong{color:var(--text);font-size:14px}.premium-inbox-summary>div{display:flex;gap:4px}.premium-inbox-summary button{border:0;background:transparent;color:var(--primary);padding:6px 7px;font:inherit;font-size:10px;font-weight:850}.premium-notification-settings{margin-bottom:14px;border:1px solid var(--premium-border);border-radius:17px;background:color-mix(in srgb,var(--surface) 82%,transparent)}.premium-notification-settings summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;cursor:pointer}.premium-notification-settings summary::-webkit-details-marker{display:none}.premium-notification-settings summary>span{display:flex;align-items:center;gap:8px}.premium-notification-settings summary strong{font-size:11px}.premium-notification-settings summary small{font-size:9px;color:var(--text-muted)}.premium-preference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:0 10px 10px}.premium-preference-grid>button{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px;border:1px solid var(--premium-border);border-radius:13px;background:var(--surface-raised);color:var(--text);text-align:left}.premium-preference-grid strong,.premium-preference-grid small{display:block}.premium-preference-grid strong{font-size:10px}.premium-preference-grid small{margin-top:2px;font-size:8px;color:var(--text-muted)}.premium-preference-grid i{width:30px;height:18px;padding:2px;border-radius:999px;background:var(--surface-deep);transition:.2s}.premium-preference-grid i b{display:block;width:14px;height:14px;border-radius:50%;background:#94a3b8;transition:.2s}.premium-preference-grid .is-on i{background:rgba(var(--color-primary-rgb),.2)}.premium-preference-grid .is-on i b{transform:translateX(12px);background:var(--primary)}
.premium-group-title{display:flex;align-items:center;gap:8px;margin:18px 3px 8px}.premium-group-title h2{font-size:12px;text-transform:uppercase;letter-spacing:.075em}.premium-group-title span{min-width:23px;height:20px;padding:0 6px;border-radius:999px;background:var(--surface-deep);display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:9px;font-weight:900}.premium-swipe-shell{position:relative;margin-bottom:9px;border-radius:20px;overflow:hidden;animation:premiumNotifIn .3s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--item-index)*22ms)}@keyframes premiumNotifIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}.premium-swipe-track{position:relative;background:linear-gradient(135deg,#ef4444,#be123c)}.premium-swipe-delete{position:absolute;right:0;top:0;bottom:0;width:118px;display:flex;align-items:center;justify-content:center;gap:5px;color:#fff;font-size:10px;font-weight:900}.premium-swipe-content{position:relative;transition:transform .18s cubic-bezier(.22,1,.36,1);touch-action:pan-y;background:var(--surface)}.premium-notification-card{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 18px;align-items:start;gap:12px;padding:14px!important;border-radius:20px!important;overflow:hidden;animation:none!important}.premium-notification-card.is-unread{background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),var(--surface))!important}.premium-notification-accent{position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 6px 6px 0;background:var(--tone,#64748b)}.premium-notification-card.tone-blue{--tone:var(--color-primary-soft)}.premium-notification-card.tone-emerald,.premium-notification-card.tone-green{--tone:#10b981}.premium-notification-card.tone-violet{--tone:#8b5cf6}.premium-notification-card.tone-sky{--tone:#06b6d4}.premium-notification-card.tone-red{--tone:#ef4444}.premium-notification-card.tone-amber{--tone:#f59e0b}.premium-notification-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--tone) 13%,var(--surface));color:var(--tone);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tone) 15%,transparent)}.premium-notification-card.is-unread .premium-notification-icon{background:linear-gradient(145deg,color-mix(in srgb,var(--tone) 78%,#fff),var(--tone));color:#fff;box-shadow:0 9px 22px color-mix(in srgb,var(--tone) 24%,transparent)}.premium-notification-meta{display:flex;justify-content:space-between;gap:8px}.premium-notification-meta span{color:var(--tone);font-size:8px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.premium-notification-meta time{color:var(--text-muted);font-size:8px}.premium-notification-title-row{display:flex;align-items:center;gap:7px;margin:3px 0}.premium-notification-title-row strong{min-width:0;font-size:13px;line-height:1.25}.premium-unread-dot{width:7px;height:7px;flex:0 0 7px;border-radius:50%;background:#fb7185;box-shadow:0 0 0 4px rgba(251,113,133,.13)}.premium-notification-main p{margin:0;color:var(--text-muted);font-size:11px;line-height:1.48;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.premium-notification-card.is-open p{-webkit-line-clamp:unset}.premium-notification-chevron{margin-top:17px;color:var(--text-muted);transition:transform .2s}.premium-notification-card.is-open .premium-notification-chevron{transform:rotate(180deg)}.premium-notification-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px;padding-top:9px;border-top:1px solid var(--premium-border)}.premium-notification-actions .btn-primary-3d{min-height:34px;padding:7px 12px;font-size:9px}.premium-action-secondary,.premium-action-danger{min-height:34px;padding:7px 10px;border:0;border-radius:10px;background:var(--surface-deep);color:var(--text-muted);font:inherit;font-size:9px;font-weight:850}.premium-action-danger{color:#e11d48;background:rgba(244,63,94,.08)}.premium-notification-skeletons{display:flex;flex-direction:column;gap:9px}.premium-list-sentinel{text-align:center;padding:16px;color:var(--text-muted);font-size:10px}
/* Recently viewed compact rail */
.premium-recent-section{margin-top:4px}.premium-recent-heading{display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:10px}.premium-recent-heading span{font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.09em;color:var(--primary)}.premium-recent-heading h3{font-size:18px}.premium-recent-heading button{border:0;background:transparent;color:var(--primary);font:inherit;font-size:10px;font-weight:900}.premium-recent-scroll{display:flex;gap:10px;overflow-x:auto;padding:3px 2px 14px;scroll-snap-type:x mandatory;scrollbar-width:none}.premium-recent-scroll::-webkit-scrollbar{display:none}.premium-recent-card{width:min(78vw,250px);flex:0 0 auto;scroll-snap-align:start;padding:13px!important;cursor:pointer}.premium-recent-top{display:flex;align-items:center;justify-content:space-between}.premium-recent-file{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#fb7185,#dc2626);color:#fff;font-size:9px;font-weight:950;box-shadow:0 8px 18px rgba(220,38,38,.22)}.premium-recent-top button{width:32px;height:32px;border:0;border-radius:10px;background:var(--surface-deep);color:var(--text-muted)}.premium-recent-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:10px 0 7px;font-size:12px;line-height:1.38}.premium-recent-meta{display:flex;gap:6px;align-items:center;min-width:0}.premium-recent-meta b{padding:3px 6px;border-radius:7px;background:rgba(var(--color-primary-rgb),.1);color:var(--primary);font-size:8px}.premium-recent-meta span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-muted);font-size:8px}.premium-recent-time{margin-top:7px;color:var(--text-muted);font-size:8px}.premium-recent-progress{height:4px;margin:8px 0;background:var(--surface-deep);border-radius:999px;overflow:hidden}.premium-recent-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--color-primary-soft),#8b5cf6)}.premium-continue-btn{width:100%;min-height:34px;border:0;border-radius:10px;background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary);font:inherit;font-size:9px;font-weight:900}.premium-recent-empty{min-height:130px;border:1px dashed var(--premium-border);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--text-muted)}.premium-recent-empty strong{color:var(--text);font-size:12px}.premium-recent-empty span{font-size:9px}
/* Basic/legacy screens receive a shared handcrafted finish */
.page>.muted:first-child{line-height:1.55}.page>.col{gap:12px!important}.page>.row.wrap{gap:9px!important}.list-item,.notif-pref-row,.attachment-row{border-color:var(--premium-border)!important}.stat-tile{border:1px solid var(--premium-border);border-radius:18px!important;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface))!important;box-shadow:0 10px 28px rgba(15,23,42,.065)!important}.section-divider{height:1px!important;background:linear-gradient(90deg,transparent,var(--premium-border),transparent)!important;box-shadow:none!important;margin:24px 0!important}
[data-theme=dark] .premium-swipe-content{background:#111827}[data-theme=dark] .premium-notification-toolbar,[data-theme=dark] .premium-notification-settings{background:rgba(15,23,42,.82)}
@media(max-width:520px){.premium-notification-hero{min-height:154px;padding:20px}.premium-preference-grid{grid-template-columns:1fr}.premium-notification-card{grid-template-columns:40px minmax(0,1fr) 15px;gap:10px;padding:12px!important}.premium-notification-icon{width:40px;height:40px}.premium-notification-toolbar{top:58px}.premium-notification-actions{display:grid;grid-template-columns:repeat(3,1fr)}}
@media(prefers-reduced-motion:reduce){.page-enter,.card-3d,.premium-swipe-shell,.skeleton-3d::after{animation:none!important}}
.route-skeleton-shell{width:min(100%,760px);min-height:100vh;margin:0 auto;padding:calc(18px + env(safe-area-inset-top,0px)) 16px 90px}.route-skeleton-header,.route-skeleton-hero,.route-skeleton-card{position:relative;overflow:hidden;background:var(--surface-deep);border-radius:18px}.route-skeleton-header{height:48px;width:62%;margin-bottom:18px}.route-skeleton-hero{height:150px;margin-bottom:14px;border-radius:24px}.route-skeleton-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.route-skeleton-card{height:96px}.route-skeleton-header::after,.route-skeleton-hero::after,.route-skeleton-card::after{content:"";position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:premiumShimmer 1.2s ease infinite}@media(max-width:460px){.route-skeleton-grid{grid-template-columns:1fr}}

/*
 * STUDENT HUB — Senior Design System v1 (PRIVATE REVIEW)
 * Fresh implementation on top of the current production v3.0.0 baseline.
 * No rejected redesign code is reused. No production publish marker.
 */

:root {
  --ds-primary: var(--color-primary);
  --ds-primary-hover: var(--color-primary-deep);
  --ds-primary-active: var(--color-primary-dark);
  --ds-primary-light: var(--color-primary-soft);
  --ds-primary-tint: #dbeafe;
  --ds-success: #10b981;
  --ds-warning: #f59e0b;
  --ds-error: #ef4444;
  --ds-info: var(--color-primary-soft);

  --ds-bg: #ffffff;
  --ds-surface: #f8fafc;
  --ds-surface-raised: #ffffff;
  --ds-surface-strong: #f1f5f9;
  --ds-text: #0f172a;
  --ds-text-secondary: #64748b;
  --ds-border: #e2e8f0;
  --ds-border-strong: #cbd5e1;
  --ds-overlay: rgba(15, 23, 42, .60);

  --ds-space-xs: 4px;
  --ds-space-sm: 8px;
  --ds-space-md: 12px;
  --ds-space-lg: 16px;
  --ds-space-xl: 24px;
  --ds-space-2xl: 32px;
  --ds-space-3xl: 48px;
  --ds-space-4xl: 64px;

  --ds-radius-xs: 4px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 20px;
  --ds-radius-full: 9999px;

  --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --ds-shadow-md: 0 4px 10px rgba(15, 23, 42, .09);
  --ds-shadow-lg: 0 10px 22px rgba(15, 23, 42, .12);
  --ds-shadow-xl: 0 20px 34px rgba(15, 23, 42, .15);
  --ds-shadow-2xl: 0 25px 50px rgba(15, 23, 42, .20);
  --ds-glow-primary: 0 0 0 4px rgba(var(--color-primary-rgb), .18);
  --ds-glow-success: 0 0 20px rgba(16, 185, 129, .30);

  --primary: var(--ds-primary);
  --primary-dark: var(--ds-primary-hover);
  --primary-light: var(--ds-primary-light);
  --accent: var(--ds-primary);
  --accent-dark: var(--ds-primary-hover);
  --primary-grad: linear-gradient(135deg, var(--color-primary-soft), var(--color-primary) 58%, var(--color-primary-deep));
  --primary-grad-soft: linear-gradient(135deg, var(--color-primary-soft), var(--color-primary));
  --accent-grad: linear-gradient(135deg, #fbbf24, #f59e0b);
  --bg: var(--ds-bg);
  --bg-page: var(--ds-bg);
  --surface: var(--ds-surface-raised);
  --surface-raised: var(--ds-surface);
  --surface-deep: var(--ds-surface-strong);
  --text: var(--ds-text);
  --text-primary: var(--ds-text);
  --text-secondary: var(--ds-text-secondary);
  --text-muted: var(--ds-text-secondary);
  --edge-light: var(--ds-border);
  --edge-shadow: var(--ds-border-strong);
  --radius-sm: var(--ds-radius-sm);
  --radius-md: var(--ds-radius-md);
  --radius-lg: var(--ds-radius-lg);
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  color-scheme: light;
}

[data-theme="dark"] {
  --ds-bg: #0f172a;
  --ds-surface: #172033;
  --ds-surface-raised: #1e293b;
  --ds-surface-strong: #334155;
  --ds-text: #f1f5f9;
  --ds-text-secondary: #cbd5e1;
  --ds-border: #334155;
  --ds-border-strong: #475569;
  --ds-overlay: rgba(0, 0, 0, .70);
  --ds-shadow-sm: 0 1px 2px rgba(0, 0, 0, .20);
  --ds-shadow-md: 0 4px 10px rgba(0, 0, 0, .22);
  --ds-shadow-lg: 0 10px 22px rgba(0, 0, 0, .28);
  --ds-shadow-xl: 0 20px 34px rgba(0, 0, 0, .34);
  --ds-shadow-2xl: 0 25px 50px rgba(0, 0, 0, .40);
  --bg: var(--ds-bg);
  --bg-page: var(--ds-bg);
  --surface: var(--ds-surface-raised);
  --surface-raised: var(--ds-surface);
  --surface-deep: var(--ds-surface-strong);
  --text: var(--ds-text);
  --text-primary: var(--ds-text);
  --text-secondary: var(--ds-text-secondary);
  --text-muted: var(--ds-text-secondary);
  --edge-light: var(--ds-border);
  --edge-shadow: var(--ds-border-strong);
  color-scheme: dark;
}

/* Foundation */
html {
  min-width: 320px;
  min-height: 100%;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--ds-bg) !important;
  background-attachment: scroll !important;
  color: var(--ds-text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  transition: background-color 200ms ease-out, color 200ms ease-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--ds-text);
  font-family: var(--font-display);
  letter-spacing: -.01em;
  text-wrap: balance;
}

h1 { font-size: 32px; font-weight: 700; line-height: 40px; }
h2 { font-size: 24px; font-weight: 600; line-height: 32px; }
h3 { font-size: 20px; font-weight: 600; line-height: 28px; }
h4 { font-size: 16px; font-weight: 600; line-height: 24px; }

p { line-height: 1.5; }
a { color: var(--ds-primary); }
.mono { font-family: var(--font-mono); }
.muted { color: var(--ds-text-secondary) !important; }

::selection {
  background: rgba(var(--color-primary-rgb), .28);
  color: var(--ds-text);
}

:where(button, a, input, textarea, select, summary, [role="button"]):focus-visible {
  outline: 2px solid var(--ds-primary-light) !important;
  outline-offset: 3px;
}

/* Keep accidental Android selection disabled while preserving real editors. */
:where(button, .card-3d, .quick-nav-item, .nav-tab, .pill, .list-item) {
  -webkit-user-select: none;
  user-select: none;
}

:where(input, textarea, [contenteditable="true"], .news-article-body, .wa-text) {
  -webkit-user-select: text;
  user-select: text;
}

.page-enter {
  min-height: 100vh;
  background: var(--ds-bg);
}

.page {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding: var(--ds-space-lg) var(--ds-space-lg) calc(92px + env(safe-area-inset-bottom, 0px));
}

/* Cards */
.card-3d,
.list-item,
.notif-prefs {
  background: var(--ds-surface-raised) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-md) !important;
  box-shadow: var(--ds-shadow-md) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out, background-color 200ms ease-out;
}

@media (hover: hover) and (pointer: fine) {
  .card-3d:hover,
  .list-item:hover {
    border-color: var(--ds-primary) !important;
    box-shadow: var(--ds-shadow-lg) !important;
    transform: translateY(-2px);
  }
}

.card-3d:active,
.list-item:active {
  transform: scale(.99);
}

.p-16 { padding: 16px !important; }
.p-20 { padding: 20px !important; }

/* Buttons */
.btn-primary-3d,
.btn-accent-3d,
.btn-success-3d,
.btn-danger-3d {
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--ds-radius-sm);
  box-shadow: var(--ds-shadow-md) !important;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  transform: none;
  transition: background-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out, opacity 150ms ease-out;
}

.btn-primary-3d,
.btn-accent-3d {
  background: var(--ds-primary) !important;
}

.btn-success-3d { background: var(--ds-success) !important; }
.btn-danger-3d { background: var(--ds-error) !important; }

.btn-primary-3d:hover,
.btn-accent-3d:hover { background: var(--ds-primary-hover) !important; }
.btn-primary-3d:active,
.btn-accent-3d:active,
.btn-success-3d:active,
.btn-danger-3d:active { transform: scale(.98); box-shadow: var(--ds-shadow-sm) !important; }

.btn-primary-3d:disabled,
.btn-accent-3d:disabled,
.btn-success-3d:disabled,
.btn-danger-3d:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: none;
}

.btn-ghost {
  min-height: 44px;
  padding: 10px 14px !important;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-primary);
  font-size: 14px !important;
  font-weight: 600;
  line-height: 20px;
  transition: background-color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}

.btn-ghost:hover { background: var(--ds-surface-strong); border-color: var(--ds-border-strong); }
.btn-ghost:active { transform: scale(.98); }
.btn-ghost.danger { color: var(--ds-error); border-color: rgba(239, 68, 68, .32); }

.icon-btn {
  width: 40px !important;
  min-width: 40px;
  height: 40px !important;
  min-height: 40px;
  padding: 0 !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-surface) !important;
  box-shadow: none !important;
  color: var(--ds-text-secondary) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out, border-color 150ms ease-out;
}

.icon-btn:hover { background: var(--ds-surface-strong) !important; color: var(--ds-text) !important; border-color: var(--ds-border-strong) !important; }
.icon-btn:active { transform: scale(.95); }
.icon-btn.on,
.icon-btn.ok { background: var(--ds-primary) !important; border-color: var(--ds-primary) !important; color: #fff !important; }
.icon-btn.danger { color: var(--ds-error) !important; }

/* Repair compact secondary actions while retaining their visual priority. */
button.btn-ghost[style*="font-size: 11px"],
button.btn-ghost[style*="font-size:11px"] {
  min-height: 36px;
  padding: 7px 10px !important;
  font-size: 12px !important;
}

.fab {
  width: 56px;
  height: 56px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-primary) !important;
  box-shadow: var(--ds-shadow-2xl) !important;
  transition: transform 150ms ease-out, background-color 150ms ease-out;
}

.fab:hover { background: var(--ds-primary-hover) !important; transform: scale(1.06); }
.fab:active { transform: scale(.95); }

/* Inputs */
.input-3d,
.vs-input,
.news-comments textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--ds-border-strong) !important;
  border-radius: var(--ds-radius-sm) !important;
  background: var(--ds-surface-raised) !important;
  box-shadow: none !important;
  color: var(--ds-text) !important;
  font-family: var(--font-body);
  font-size: 16px !important;
  line-height: 24px;
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, background-color 200ms ease-out;
}

.input-3d::placeholder,
.vs-input::placeholder { color: var(--ds-text-secondary); opacity: .72; }

.input-3d:focus,
.vs-input:focus,
.news-comments textarea:focus {
  border-color: var(--ds-primary) !important;
  box-shadow: var(--ds-glow-primary) !important;
  outline: 0;
}

.input-3d:disabled,
.vs-input:disabled { opacity: .5; background: var(--ds-surface-strong) !important; }

textarea.input-3d {
  min-height: 100px;
  max-height: 300px;
  padding: 12px 16px;
  resize: vertical;
}

.field-label {
  margin: 0 0 6px;
  color: var(--ds-text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: .5px;
}

.field-group { margin-bottom: 16px; }

.note-fast-search-box,
.notif-search,
.premium-notification-search {
  min-height: 48px;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-full) !important;
  background: var(--ds-surface-strong) !important;
  box-shadow: none !important;
}

.note-fast-search-box .input-3d,
.premium-notification-search input {
  min-height: 46px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Navigation */
.top-bar {
  min-height: 64px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  border-bottom: 1px solid var(--ds-border);
  background: color-mix(in srgb, var(--ds-surface-raised) 94%, transparent) !important;
  box-shadow: var(--ds-shadow-sm) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.top-bar-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: -.01em;
}

.bottom-nav {
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(64px + env(safe-area-inset-bottom, 0px));
  padding: 4px 8px env(safe-area-inset-bottom, 0px);
  border: 0;
  border-top: 1px solid var(--ds-border);
  border-radius: 0;
  background: color-mix(in srgb, var(--ds-surface-raised) 94%, transparent) !important;
  box-shadow: 0 -4px 14px rgba(15, 23, 42, .08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.nav-tab {
  min-width: 0;
  min-height: 48px;
  padding: 5px 2px;
  border: 0;
  border-radius: var(--ds-radius-sm);
  background: transparent;
  color: var(--ds-text-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  transition: color 150ms ease-out, background-color 150ms ease-out, transform 150ms ease-out;
}

.nav-tab.active {
  background: rgba(var(--color-primary-rgb), .12) !important;
  box-shadow: none !important;
  color: var(--ds-primary) !important;
}

.nav-tab:active { transform: scale(.96); }
.nav-tab.active .nav-icon { animation: none; }

.badge-count,
.chat-nav-badge {
  min-width: 18px;
  height: 18px;
  border: 2px solid var(--ds-surface-raised);
  border-radius: var(--ds-radius-full);
  background: var(--ds-error) !important;
  box-shadow: none !important;
  color: #fff;
}

/* Chips, badges and status */
.pill {
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--ds-border-strong) !important;
  border-radius: var(--ds-radius-full) !important;
  background: var(--ds-surface-raised) !important;
  box-shadow: none !important;
  color: var(--ds-text-secondary) !important;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, transform 150ms ease-out;
}

.pill.active {
  border-color: var(--ds-primary) !important;
  background: var(--ds-primary) !important;
  color: #fff !important;
}

.pill:active { transform: scale(.97); }

.category-badge-3d {
  min-height: 26px;
  padding: 4px 12px;
  border: 0;
  border-radius: var(--ds-radius-full);
  box-shadow: none !important;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0;
}

.cat-academic { background: var(--ds-info) !important; }
.cat-sug { background: #7c3aed !important; }
.cat-faculty,
.cat-department { background: var(--ds-success) !important; }
.cat-scholarships,
.cat-internships { background: var(--ds-warning) !important; }
.cat-events { background: var(--ds-error) !important; }

.file-type-pill {
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius-sm);
  box-shadow: none !important;
  font-size: 12px;
}

/* Toggles */
.toggle-track,
.switch {
  width: 50px;
  height: 28px;
  min-height: 28px;
  padding: 2px;
  border: 0;
  border-radius: 14px;
  background: var(--ds-surface-strong) !important;
  box-shadow: inset 0 0 0 1px var(--ds-border-strong) !important;
  transition: background-color 250ms cubic-bezier(.4, 0, .2, 1);
}

.toggle-thumb,
.switch .knob {
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: #fff !important;
  box-shadow: var(--ds-shadow-sm) !important;
  transition: transform 250ms cubic-bezier(.4, 0, .2, 1);
}

.toggle-track.active,
.switch.on { background: var(--ds-success) !important; box-shadow: none !important; }
.toggle-track.active .toggle-thumb,
.switch.on .knob { transform: translateX(22px); }

/* Loading, empty and modal states */
.skeleton-3d,
.route-skeleton-card,
.route-skeleton-hero,
.route-skeleton-header {
  border-radius: var(--ds-radius-md);
  background: linear-gradient(90deg, var(--ds-surface-strong) 25%, var(--ds-surface) 50%, var(--ds-surface-strong) 75%) !important;
  background-size: 200% 100% !important;
  box-shadow: none !important;
  animation: seniorShimmer 2s linear infinite !important;
}

@keyframes seniorShimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

.empty-state {
  min-height: 200px;
  padding: 32px 20px;
  border: 1px dashed var(--ds-border-strong);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  color: var(--ds-text-secondary);
  text-align: center;
}

.empty-state .es-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
  border-radius: var(--ds-radius-full);
  background: rgba(var(--color-primary-rgb), .12);
  box-shadow: none !important;
  color: var(--ds-primary);
}

.empty-state h3 { font-size: 16px !important; font-weight: 600; line-height: 24px; }
.empty-state p { font-size: 14px; line-height: 20px; }

.modal-overlay {
  padding: 16px 8px 0;
  background: var(--ds-overlay);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: seniorFadeIn 200ms ease-out;
}

.modal-3d {
  max-width: 560px;
  max-height: 92dvh;
  padding: 20px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xl) var(--ds-radius-xl) 0 0;
  background: var(--ds-surface-raised) !important;
  box-shadow: var(--ds-shadow-2xl) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: seniorSheetUp 300ms ease-out;
}

.modal-handle {
  width: 44px;
  height: 4px;
  margin-bottom: 16px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-border-strong);
}

@keyframes seniorFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes seniorSheetUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

/* Horizontal rails */
.h-scroll {
  gap: 12px;
  padding-block: 4px 12px;
  scroll-padding-inline: 16px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.h-scroll::-webkit-scrollbar { display: none; }
.h-scroll > * { scroll-snap-align: start; }

.section-divider {
  height: 1px;
  margin: 24px 0;
  background: var(--ds-border);
  box-shadow: none;
}

/* Authentication */
.auth-wrap {
  min-height: 100vh;
  padding: 24px 16px;
  background: var(--ds-bg) !important;
}

.auth-wrap > .card-3d,
.auth-wrap form {
  width: min(100%, 460px);
}

.auth-wrap a {
  min-height: 40px;
  padding-block: 8px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
}

/* Home */
.senior-home-page .page { padding-top: 16px; }

.senior-home-page .welcome-banner-accent {
  position: relative;
  overflow: hidden;
  padding: 20px !important;
  border-color: rgba(var(--color-primary-rgb), .24) !important;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), .14), rgba(var(--color-primary-soft-rgb), .04)) !important;
}

.senior-home-page .welcome-banner-accent::before {
  width: 4px;
  background: var(--ds-primary);
  box-shadow: none;
}

.senior-home-page .welcome-banner-accent .avatar-3d {
  width: 48px !important;
  height: 48px !important;
  border: 2px solid var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-md) !important;
}

.senior-home-page .welcome-banner-accent h2 {
  font-size: 20px !important;
  font-weight: 600;
  line-height: 28px;
}

.senior-home-page .welcome-banner-accent p {
  margin: 3px 0 0;
  font-size: 14px !important;
  line-height: 20px;
}

.senior-home-page .quick-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.senior-home-page .quick-nav-item {
  min-width: 0;
  min-height: 104px;
  padding: 14px 8px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-md);
  color: var(--ds-text);
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
}

.senior-home-page .quick-nav-item:active { transform: scale(.98); box-shadow: var(--ds-shadow-sm); }

.senior-home-page .quick-nav-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--ds-radius-sm);
  box-shadow: none;
}

.senior-home-page .quick-nav-label {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.senior-home-page .row.between.mb-8 {
  min-height: 40px;
  margin: 24px 0 12px;
  padding: 0 !important;
}

.senior-home-page .row.between.mb-8 h3 {
  font-size: 20px !important;
  line-height: 28px;
}

.senior-home-page .h-scroll .card-3d {
  min-width: 280px;
}

/* Study Materials */
.senior-notes-page .note-fast-search { margin-bottom: 16px; }
.senior-notes-page .note-fast-search-box { min-height: 52px; }
.senior-notes-page .note-fast-search-box .input-3d { min-height: 50px; padding-left: 42px; }
.senior-notes-page .note-fast-search-status,
.senior-notes-page .note-fast-results-head { font-size: 14px; line-height: 20px; }

.senior-notes-page .pq-hero {
  min-height: 92px;
  padding: 16px;
  border: 0;
  border-radius: var(--ds-radius-md);
  background: linear-gradient(135deg, #7c3aed, var(--color-primary)) !important;
  box-shadow: var(--ds-shadow-lg) !important;
  transform: none;
}

.senior-notes-page .pq-hero:active { transform: scale(.98); box-shadow: var(--ds-shadow-md) !important; }
.senior-notes-page .pq-hero-icon { width: 52px; height: 52px; border-radius: var(--ds-radius-md); box-shadow: none; }
.senior-notes-page .pq-hero h3 { font-size: 20px; line-height: 28px; }
.senior-notes-page .pq-hero p { font-size: 14px; line-height: 20px; }

.senior-notes-page .field-group .input-3d { min-height: 48px; }
.senior-notes-page .row.wrap { gap: 12px !important; }

.senior-notes-page .faculty-card {
  width: min(74vw, 260px);
  min-height: 160px;
  padding: 16px;
  border-top: 1px solid var(--ds-border) !important;
  background: linear-gradient(145deg, rgba(var(--color-primary-rgb), .12), var(--ds-surface-raised)) !important;
}

.senior-notes-page .faculty-card .icon-badge {
  width: 56px;
  height: 56px;
  border-radius: var(--ds-radius-md);
  box-shadow: none;
}

.senior-notes-page .col > .card-3d,
.senior-notes-page .note-fast-results .card-3d {
  min-height: 92px;
  padding: 16px !important;
}

/* Saved Notes */
.senior-saved-page .page > p:first-child {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
  font-size: 14px !important;
  line-height: 20px;
}

.senior-saved-page .page > .card-3d {
  min-height: 88px;
}

/* Chat Hub */
.senior-chat-hub-page .page > p:first-child {
  margin: 0 0 16px;
  font-size: 14px !important;
  line-height: 20px;
}

.senior-chat-hub-page .page > .col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px !important;
}

.senior-chat-hub-page .page > .col > .card-3d {
  min-height: 158px;
  padding: 16px !important;
  align-items: flex-start;
}

.senior-chat-hub-page .icon-badge {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--ds-radius-md) !important;
  box-shadow: none !important;
}

.senior-chat-hub-page .anonymous-chat-card {
  background: linear-gradient(145deg, rgba(245, 158, 11, .12), var(--ds-surface-raised)) !important;
}

/* Message threads */
.senior-chat-room {
  background: var(--ds-bg) !important;
}

.senior-chat-room .top-bar {
  min-height: 64px;
}

.senior-chat-room .wa-header {
  min-height: 48px;
  gap: 10px;
}

.senior-chat-room .wa-header .wa-h-avatar {
  width: 40px !important;
  height: 40px !important;
}

.senior-chat-room .wa-header .wa-h-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.senior-chat-room .wa-header .wa-h-status {
  font-size: 12px;
  line-height: 18px;
}

.senior-chat-room .wa-msg { max-width: 85%; }

.senior-chat-room .wa-bubble {
  padding: 10px 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
}

.senior-chat-room .wa-bubble.mine {
  border-color: var(--ds-primary);
  background: var(--ds-primary) !important;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.senior-chat-room .wa-bubble.theirs {
  background: var(--ds-surface-strong) !important;
  color: var(--ds-text);
  border-bottom-left-radius: 4px;
}

.senior-chat-room .wa-text {
  font-size: 16px;
  line-height: 24px;
}

.senior-chat-room .wa-meta,
.senior-chat-room .wa-reply,
.senior-chat-room .wa-reply-above {
  font-size: 12px;
  line-height: 18px;
}

.senior-chat-room .wa-react-chip {
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface-raised);
}

/* News feed */
.senior-news-page .feed-scope-bar { margin-bottom: 8px; }
.senior-news-page .feed-scope-bar .h-scroll,
.senior-news-page .page > .h-scroll { gap: 8px; padding: 4px 0 12px !important; }

.senior-news-page .page > .col { gap: 12px !important; }

.senior-news-page .page > .col > .card-3d:not(.empty-state) {
  padding: 16px !important;
  overflow: hidden;
}

.senior-news-page .page > .col > .card-3d h4 {
  margin-bottom: 8px !important;
  font-size: 20px !important;
  font-weight: 600;
  line-height: 28px;
}

.senior-news-page .page > .col > .card-3d > img,
.senior-news-page .page > .col > .card-3d > div[style*="height: 180"] {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto !important;
  max-height: none !important;
  margin: 8px 0 12px !important;
  border-radius: var(--ds-radius-sm) !important;
  object-fit: cover;
}

.senior-news-page .page > .col > .card-3d > p {
  margin: 0;
  font-size: 14px !important;
  line-height: 20px;
}

.senior-news-page .page > .col > .card-3d .row.between.mt-8 {
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--ds-border);
}

/* News detail */
.senior-news-detail-page .page {
  max-width: 820px;
}

.senior-news-detail-page h1 {
  font-size: clamp(28px, 5vw, 40px) !important;
  line-height: 1.2;
}

.senior-news-detail-page img,
.senior-news-detail-page video {
  max-width: 100%;
  border-radius: var(--ds-radius-sm);
}

.senior-news-detail-page .news-article-body,
.senior-news-detail-page .page > p {
  font-size: 16px !important;
  line-height: 1.8;
}

.senior-news-detail-page blockquote {
  margin: 24px 0;
  padding: 12px 16px;
  border-left: 4px solid var(--ds-primary);
  background: var(--ds-surface);
  color: var(--ds-text-secondary);
  font-style: italic;
}

/* Profile */
.senior-profile-page .page,
.senior-user-profile-page .page {
  max-width: 820px;
}

.senior-profile-page .page > .center.col:first-child,
.senior-user-profile-page .page > .center.col:first-child {
  padding: 24px 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), .18), rgba(var(--color-primary-soft-rgb), .04));
}

.senior-profile-page .page > .center.col:first-child .avatar-3d,
.senior-user-profile-page .page > .center.col:first-child .avatar-3d {
  width: 120px !important;
  height: 120px !important;
  border: 3px solid var(--ds-surface-raised);
  box-shadow: var(--ds-shadow-xl) !important;
}

.senior-profile-page .page > .center.col:first-child h2,
.senior-user-profile-page .page > .center.col:first-child h2 {
  margin-top: 12px;
  font-size: 24px !important;
  font-weight: 600;
  line-height: 32px;
}

.senior-profile-page .page > .center.col:first-child .muted,
.senior-user-profile-page .page > .center.col:first-child .muted {
  font-size: 14px !important;
  line-height: 20px;
}

.senior-profile-page .page > .card-3d {
  padding: 16px !important;
}

.senior-profile-page .page > .card-3d .row.between {
  min-height: 48px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ds-border);
}

.senior-profile-page .page > .card-3d .row.between:last-child { border-bottom: 0; }

.senior-profile-page .tile-grid-3 {
  gap: 12px;
}

.senior-profile-page .stat-tile {
  min-height: 108px;
  padding: 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-raised) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.senior-profile-page .stat-num {
  color: var(--ds-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
}

.senior-profile-page .premium-recent-section {
  padding: 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
}

.senior-profile-page .premium-recent-heading h3 { font-size: 20px; line-height: 28px; }
.senior-profile-page .premium-recent-heading span,
.senior-profile-page .premium-recent-meta,
.senior-profile-page .premium-recent-time { font-size: 12px; line-height: 18px; }
.senior-profile-page .premium-recent-title { font-size: 16px; line-height: 24px; }
.senior-profile-page .premium-continue-btn { min-height: 44px; font-size: 14px; }

/* Notifications */
.premium-notifications-page .page { max-width: 900px; }

.premium-notification-hero {
  min-height: 180px;
  padding: 24px;
  border-radius: var(--ds-radius-lg);
  background: linear-gradient(135deg, var(--color-primary-deep), var(--color-primary)) !important;
  box-shadow: var(--ds-shadow-lg) !important;
}

.premium-notification-hero::before,
.premium-notification-hero::after { display: none; }
.premium-hero-kicker { font-size: 12px; line-height: 18px; letter-spacing: .5px; }
.premium-notification-hero h1 { font-size: 32px; line-height: 40px; }
.premium-notification-hero p { max-width: 540px; font-size: 14px; line-height: 20px; }

.premium-hero-orb {
  width: 56px;
  height: 56px;
  border-radius: var(--ds-radius-lg);
  box-shadow: none;
}

.premium-notification-toolbar {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-raised) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.premium-filter-strip { gap: 8px; }
.premium-filter-strip button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface);
  color: var(--ds-text-secondary);
  font-size: 12px;
  line-height: 18px;
}

.premium-filter-strip button.active { border-color: var(--ds-primary); background: var(--ds-primary); color: #fff; }

.premium-inbox-summary { min-height: 48px; }
.premium-inbox-summary button {
  min-height: 40px;
  padding: 8px 10px;
  font-size: 12px;
}

.premium-notification-settings {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-raised) !important;
  box-shadow: none !important;
}

.premium-preference-grid > button {
  min-height: 68px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
}

.premium-notification-card {
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-raised) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.premium-notification-card.is-unread {
  border-color: rgba(var(--color-primary-rgb), .45);
  background: color-mix(in srgb, var(--ds-surface-raised) 92%, var(--ds-primary-tint)) !important;
}

.premium-notification-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius-sm);
  box-shadow: none !important;
}

.premium-notification-meta span,
.premium-notification-meta time { font-size: 12px; line-height: 18px; }
.premium-notification-title-row strong { font-size: 16px; line-height: 24px; }
.premium-notification-main p { font-size: 14px; line-height: 20px; }

.premium-notification-actions button {
  min-height: 40px;
  padding: 8px 12px;
  border-radius: var(--ds-radius-sm);
  font-size: 12px;
}

/* Administration */
.admin-shell { background: var(--ds-bg); }
.admin-main { padding: 24px; }
.admin-section-head { margin-bottom: 24px; }
.admin-section-head h1 { font-size: 32px; line-height: 40px; }
.admin-section-head p { font-size: 14px; line-height: 20px; }

.admin-sidebar {
  border-right: 1px solid var(--ds-border);
  background: var(--ds-surface-raised);
}

.admin-nav-item {
  min-height: 44px;
  border-radius: var(--ds-radius-sm);
  color: var(--ds-text-secondary);
  font-size: 14px;
}

.admin-nav-item.active { background: rgba(var(--color-primary-rgb), .12); color: var(--ds-primary); }

.admin-main .card-3d,
.admin-main .admin-card,
.admin-main section {
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-md) !important;
  background: var(--ds-surface-raised) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}

.admin-toolbar {
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface);
}

.admin-table-wrap {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  background: var(--ds-surface-raised);
}

.admin-table th {
  padding: 12px 16px;
  background: var(--ds-surface);
  color: var(--ds-text-secondary);
  font-size: 12px;
  line-height: 18px;
  letter-spacing: .5px;
}

.admin-table td {
  padding: 14px 16px;
  border-top: 1px solid var(--ds-border);
  font-size: 14px;
  line-height: 20px;
}

.admin-actions .icon-btn { width: 40px !important; height: 40px !important; }

/* Editor and viewer surfaces */
.news-editor-page,
.pdf-native,
.wa-viewer { background: var(--ds-bg) !important; }

.news-editor-header,
.viewer-toolbar,
.viewer-info,
.pdf-thumbs,
.viewer-pagenav,
.viewer-search {
  border-color: var(--ds-border) !important;
  background: var(--ds-surface-raised) !important;
}

.news-editor-body { width: min(100%, 820px); margin-inline: auto; }

.v-btn {
  width: 40px;
  height: 40px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface-strong);
  color: var(--ds-text);
  box-shadow: none;
}

/* Responsive */
@media (min-width: 700px) {
  .page { padding: 24px 24px 104px; }

  .modal-overlay { align-items: center; padding: 24px; }
  .modal-3d { border-radius: var(--ds-radius-xl); }

  .bottom-nav {
    left: 50%;
    right: auto;
    bottom: 12px;
    width: min(720px, calc(100% - 32px));
    height: 64px;
    padding: 4px 8px;
    border: 1px solid var(--ds-border);
    border-radius: var(--ds-radius-lg);
    transform: translateX(-50%);
    box-shadow: var(--ds-shadow-xl) !important;
  }

  .nav-tab { min-width: 80px; }

  .senior-home-page .quick-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .senior-chat-hub-page .page > .col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .premium-preference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .page { padding-inline: 32px; }
  .senior-home-page .quick-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .senior-chat-hub-page .page > .col { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .senior-news-page .page > .col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .senior-news-page .page > .col > .center,
  .senior-news-page .page > .col > .empty-state { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  h1 { font-size: 28px; line-height: 36px; }
  h2 { font-size: 22px; line-height: 30px; }

  .top-bar { padding-inline: 14px; }
  .page { padding-inline: 16px; }

  .senior-chat-hub-page .page > .col { grid-template-columns: 1fr; }
  .senior-chat-hub-page .page > .col > .card-3d { min-height: 118px; }

  .premium-notification-hero { min-height: 168px; padding: 20px; }
  .premium-notification-hero h1 { font-size: 28px; line-height: 36px; }
  .premium-notification-toolbar { padding: 10px; }
  .premium-notification-card { padding: 14px; }

  .senior-profile-page .tile-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .senior-profile-page .stat-tile { min-width: 0; padding: 12px 8px; }
}

/* Motion and low-end Android */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

@media (max-width: 430px), (update: slow) {
  .card-3d,
  .bottom-nav,
  .top-bar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* Review QA refinements: preserve readability and complete touch targets. */
.top-bar button {
  min-width: 40px;
  min-height: 40px;
}

.news-edit-btn {
  min-height: 40px !important;
  padding: 8px 12px !important;
  border-radius: var(--ds-radius-sm) !important;
  font-size: 12px !important;
}

.premium-hero-orb b,
.premium-inbox-summary,
.premium-inbox-summary span,
.premium-notification-settings summary strong,
.premium-notification-settings summary small,
.premium-preference-grid strong,
.premium-preference-grid small,
.premium-group-title span,
.premium-notification-meta span,
.premium-notification-meta time {
  font-size: 12px !important;
  line-height: 18px !important;
}

.premium-recent-file,
.premium-recent-meta b,
.premium-recent-meta span,
.premium-recent-time {
  font-size: 12px !important;
  line-height: 18px !important;
}

.premium-recent-top > button {
  width: 40px !important;
  min-width: 40px;
  height: 40px !important;
  min-height: 40px;
  border-radius: var(--ds-radius-sm);
}

@media (max-width: 480px) {
  .senior-chat-hub-page .page > .col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .senior-chat-hub-page .page > .col > .card-3d {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .senior-chat-hub-page .page > .col > .card-3d > .row {
    min-width: 0;
    flex-direction: column;
    align-items: flex-start !important;
  }

  .senior-chat-hub-page .page > .col > .card-3d .muted {
    margin-top: 5px;
    font-size: 12px !important;
    line-height: 18px;
  }
}

@media (pointer: coarse) {
  .top-bar button,
  .news-edit-btn,
  .premium-inbox-summary button,
  .premium-notification-actions button,
  .premium-recent-top > button,
  button.btn-ghost[style*="font-size: 11px"],
  button.btn-ghost[style*="font-size:11px"] {
    min-height: 44px !important;
  }

  .top-bar button,
  .premium-recent-top > button {
    min-width: 44px !important;
  }

  .auth-wrap a,
  .pill {
    min-height: 48px;
  }
}

.premium-swipe-delete span {
  font-size: 12px !important;
  line-height: 18px;
}

.toggle-track,
.switch {
  position: relative;
}

.toggle-track::before,
.switch::before {
  content: "";
  position: absolute;
  inset: -8px 0;
}

.senior-notes-page .faculty-card .icon-badge {
  background-color: var(--ds-primary) !important;
}

button.btn-ghost[style*="font-size: 11px"],
button.btn-ghost[style*="font-size:11px"] {
  min-height: 40px;
}

.senior-news-detail-page .muted {
  font-size: 14px !important;
  line-height: 20px;
}

/* STUDENT HUB UX & performance refinement v2 — private review only. */

/* 1. Floating unread badges */
.icon-btn,
.nav-icon,
.premium-hero-orb {
  overflow: visible !important;
  position: relative;
}

.icon-btn > .badge-count,
.nav-icon > .badge-count,
.chat-nav-badge,
.premium-hero-orb > b {
  position: absolute !important;
  top: -9px !important;
  right: -11px !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 2px solid var(--ds-surface-raised, var(--surface)) !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f97316, #ef4444) !important;
  box-shadow: 0 4px 10px rgba(239, 68, 68, .34) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-align: center !important;
  z-index: 9 !important;
  transform: none !important;
  pointer-events: none;
}

.nav-tab.active .chat-nav-badge {
  border-color: color-mix(in srgb, var(--ds-primary) 28%, var(--ds-surface-raised)) !important;
}

.ux-badge-bump {
  animation: uxBadgePop .34s cubic-bezier(.2, 1.7, .4, 1), uxBadgePulse 2.4s ease-in-out .35s 2 !important;
}

@keyframes uxBadgePop {
  0% { opacity: 0; transform: scale(.35) translate(-5px, 5px); }
  72% { transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes uxBadgePulse {
  50% { box-shadow: 0 0 0 5px rgba(239, 68, 68, .12), 0 4px 10px rgba(239, 68, 68, .34); }
}

/* 2–6. WhatsApp-style reply gesture and composer */
.wa-msg,
.anon-chat-bubble {
  position: relative;
  transition: transform .22s cubic-bezier(.2, .9, .25, 1), opacity .18s ease-out;
}

.wa-msg::after,
.anon-chat-bubble::after {
  content: "↩";
  position: absolute;
  left: -30px;
  top: 50%;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), .16);
  color: var(--color-primary-light);
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 800;
  opacity: 0;
  transform: translateY(-50%) scale(.72);
  transition: opacity .12s ease, transform .14s ease, background-color .14s ease;
  pointer-events: none;
}

.wa-msg.ux-swiping,
.anon-chat-bubble.ux-swiping {
  transform: translate3d(var(--ux-swipe-x, 0), 0, 0) !important;
  transition: none !important;
  will-change: transform;
}

.wa-msg.ux-swiping::after,
.anon-chat-bubble.ux-swiping::after {
  opacity: .75;
  transform: translateY(-50%) scale(1);
}

.wa-msg.ux-reply-ready::after,
.anon-chat-bubble.ux-reply-ready::after {
  opacity: 1;
  background: var(--ds-primary, var(--color-primary));
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}

.wa-msg.ux-swipe-return,
.anon-chat-bubble.ux-swipe-return {
  transform: translate3d(0, 0, 0) !important;
}

.senior-chat-room {
  min-height: calc(100dvh - var(--oa-banner-h, 0px)) !important;
  height: calc(100dvh - var(--oa-banner-h, 0px)) !important;
  overflow: hidden;
}

.senior-chat-room > .row:last-of-type,
.anon-chat-composer {
  position: sticky;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 18;
  min-height: 68px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 6px !important;
  align-items: flex-end !important;
  border-top: 1px solid var(--ds-border, var(--surface-deep));
  background: color-mix(in srgb, var(--ds-surface-raised, var(--surface)) 96%, transparent) !important;
  box-shadow: 0 -8px 22px rgba(15, 23, 42, .10);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.anon-chat-composer > .field-group,
.senior-chat-room .row.mt-12 > .field-group:has(.ux-chat-textarea) {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}

.senior-chat-room .page > .row.mt-12:has(.ux-chat-textarea) {
  position: sticky;
  bottom: 0;
  z-index: 12;
  align-items: flex-end;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--ds-bg, var(--bg));
}

.ux-chat-textarea,
.senior-chat-room > .row:last-of-type textarea.input-3d,
.anon-chat-composer textarea.input-3d {
  box-sizing: border-box;
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 100px;
  min-height: 54px !important;
  max-height: 148px !important;
  margin: 0;
  padding: 14px 16px !important;
  border-radius: 21px !important;
  font-size: 16px !important;
  line-height: 24px !important;
  resize: none !important;
  overflow-y: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  transition: height .12s ease-out, border-color .16s ease, box-shadow .16s ease !important;
}

.senior-chat-room > .row:last-of-type > .icon-btn,
.anon-chat-composer > .icon-btn,
.anon-chat-composer > label.icon-btn {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  min-height: 40px !important;
  flex: 0 0 40px;
  margin-bottom: 7px;
}

.senior-chat-room > .row:last-of-type > .btn-primary-3d,
.anon-chat-composer > .btn-primary-3d,
.anon-chat-composer > button:last-child {
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  flex: 0 0 48px;
  margin-bottom: 3px;
  padding: 0 !important;
  border-radius: 50% !important;
}

.ux-reply-preview {
  min-height: 52px;
  padding: 8px 12px !important;
  border-left: 4px solid var(--ds-primary, var(--color-primary));
  background: color-mix(in srgb, var(--ds-surface-raised, var(--surface)) 94%, var(--ds-primary-tint, #dbeafe)) !important;
  box-shadow: 0 -4px 16px rgba(15, 23, 42, .06);
  animation: uxReplyIn .18s ease-out;
}

@keyframes uxReplyIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 3. Premium message options sheet; all existing React actions remain intact. */
.ux-message-actions {
  width: min(100%, 520px) !important;
  max-height: min(86dvh, 720px) !important;
  padding: 10px 14px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 26px 26px 0 0 !important;
  background: color-mix(in srgb, var(--ds-surface-raised, var(--surface)) 95%, transparent) !important;
  box-shadow: 0 -22px 60px rgba(2, 6, 23, .42) !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  overflow-y: auto;
}

.ux-message-actions > .muted:first-of-type {
  padding: 5px 4px 10px;
  color: var(--ds-text, var(--text)) !important;
  font-size: 15px !important;
  font-weight: 700;
  text-align: left !important;
}

.ux-message-actions > .col,
.ux-message-actions .col:first-of-type {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px !important;
}

.ux-message-actions .col > button {
  width: 100% !important;
  min-height: 58px;
  padding: 12px !important;
  border: 1px solid var(--ds-border, var(--surface-deep)) !important;
  border-radius: 14px !important;
  background: var(--ds-surface, var(--surface-raised)) !important;
  box-shadow: none !important;
  color: var(--ds-text, var(--text));
  justify-content: flex-start !important;
  font-size: 14px !important;
  font-weight: 600;
  text-align: left;
  transition: background-color .14s ease, border-color .14s ease, transform .12s ease !important;
}

.ux-message-actions .col > button > span {
  justify-content: flex-start;
  gap: 11px !important;
}

.ux-message-actions .col > button:active {
  transform: scale(.97);
  background: var(--ds-surface-strong, var(--surface-deep)) !important;
}

/* 10, 13. Chat polish */
.wa-scroll-smooth {
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.wa-msg {
  margin-block: 3px;
}

.wa-bubble {
  max-width: min(85vw, 620px);
  padding: 10px 13px !important;
  border-radius: 16px !important;
  box-shadow: 0 3px 10px rgba(2, 6, 23, .12) !important;
}

.wa-bubble.mine { border-bottom-right-radius: 5px !important; }
.wa-bubble.theirs { border-bottom-left-radius: 5px !important; }
.wa-text { font-size: 16px !important; line-height: 1.48 !important; }
.wa-meta { margin-left: 7px; font-size: 11px !important; line-height: 16px; opacity: .72; }

.wa-reply-above,
.wa-reply {
  padding: 8px 9px !important;
  border-radius: 10px !important;
  background: rgba(15, 23, 42, .14) !important;
}

.wa-reply-name { font-size: 12px !important; font-weight: 800; }
.wa-reply-body { font-size: 12px !important; line-height: 17px; }

.unread-divider {
  min-height: 30px;
  margin: 15px 0 !important;
  border-radius: 999px;
  color: var(--color-primary-light);
}

.unread-divider span {
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(var(--color-primary-rgb), .14);
  font-size: 11px !important;
}

.wa-typing span {
  animation: uxTyping 1.15s ease-in-out infinite;
}
.wa-typing span:nth-child(2) { animation-delay: .14s; }
.wa-typing span:nth-child(3) { animation-delay: .28s; }
@keyframes uxTyping { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }

.wa-pending { animation: uxMessageSend .2s ease-out; }
@keyframes uxMessageSend { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.anon-chat-bubble {
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(2, 6, 23, .10) !important;
}

.anon-chat-bubble .anon-actions {
  gap: 6px;
}

.anon-chat-bubble .anon-action,
.anon-chat-bubble .anon-react {
  min-height: 36px;
  padding: 7px 10px;
}

/* 9. Existing-data Continue Studying card, rendered from current download history. */
.ux-continue-studying {
  margin-top: 24px;
}

.ux-continue-studying > header {
  min-height: 44px;
  margin-bottom: 10px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.ux-continue-studying > header span {
  display: block;
  color: var(--ds-primary, var(--color-primary));
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ux-continue-studying > header h2 {
  margin-top: 2px;
  font-size: 20px;
  line-height: 28px;
}

.ux-continue-studying > header a {
  min-height: 40px;
  padding: 8px 4px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}

.ux-continue-studying article {
  min-height: 108px;
  padding: 14px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--ds-border, var(--surface-deep));
  border-radius: 14px;
  background: var(--ds-surface-raised, var(--surface));
  box-shadow: var(--ds-shadow-md, 0 4px 10px rgba(15, 23, 42, .09));
}

.ux-file-mark {
  width: 54px;
  height: 70px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fb7185, #dc2626);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.ux-continue-copy { min-width: 0; }
.ux-continue-copy b { color: var(--ds-primary, var(--color-primary)); font-size: 12px; }
.ux-continue-copy h3 { margin: 3px 0; font-size: 16px; line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-continue-copy p,
.ux-continue-copy small { display: block; margin: 0; color: var(--ds-text-secondary, var(--text-muted)); font-size: 12px; line-height: 18px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-resume { min-height: 42px; padding: 9px 13px; border-radius: 9px; background: var(--ds-primary, var(--color-primary)); color: #fff; display: inline-flex; align-items: center; font-size: 13px; font-weight: 800; }

/* 10–20. Consistency, loading, spacing and feedback audit */
.card-3d,
.quick-nav-item,
.list-item,
.pill,
.icon-btn,
.btn-primary-3d,
.btn-ghost,
.nav-tab {
  transition-duration: .14s !important;
  transition-timing-function: ease-out !important;
}

.ux-pressed {
  transform: scale(.975) !important;
  opacity: .88;
}

.senior-home-page .page {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.senior-home-page .welcome-banner-accent { margin-bottom: 22px !important; }
.senior-home-page .quick-nav { margin-bottom: 0; }
.senior-home-page .section-divider { margin: 26px 0 22px; }
.senior-home-page .row.between.mb-8 { margin-top: 0; }

.senior-notes-page .note-fast-search,
.senior-notes-page .pq-hero,
.senior-notes-page .field-group {
  margin-bottom: 16px;
}

.senior-notes-page .faculty-card,
.senior-notes-page .col > .card-3d {
  content-visibility: auto;
  contain-intrinsic-size: auto 150px;
}

.senior-news-page .page > .col > .card-3d {
  content-visibility: auto;
  contain-intrinsic-size: auto 270px;
}

.senior-news-page .page > .col > .card-3d > img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.senior-news-page .icon-btn,
.news-comments .icon-btn {
  border-radius: 10px !important;
}

.senior-profile-page .page > .card-3d {
  margin-top: 12px;
}

.senior-profile-page .page > .card-3d .row.between {
  gap: 14px;
}

.bottom-nav {
  transition: transform .18s ease-out, box-shadow .18s ease-out !important;
}

.nav-tab.active {
  box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb), .16) !important;
}

.nav-tab.active .nav-icon {
  transform: translateY(-1px) scale(1.06);
  transition: transform .18s cubic-bezier(.2, 1.4, .4, 1);
}

.empty-state {
  position: relative;
  overflow: hidden;
  min-height: 200px;
}

.empty-state::before {
  content: "⌁";
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  background: rgba(var(--color-primary-rgb), .11);
  color: var(--ds-primary, var(--color-primary));
  font-size: 30px;
  font-weight: 800;
}

.empty-state:has(.es-icon)::before,
.empty-state:has(svg)::before { display: none; }

.skeleton-3d,
.route-skeleton-card,
.route-skeleton-hero,
.route-skeleton-header,
.wa-skeleton,
.wa-img-skeleton {
  background: linear-gradient(90deg, var(--ds-surface-strong, var(--surface-deep)) 25%, var(--ds-surface, var(--surface-raised)) 50%, var(--ds-surface-strong, var(--surface-deep)) 75%) !important;
  background-size: 220% 100% !important;
  animation: uxSkeleton 1.7s linear infinite !important;
}

@keyframes uxSkeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.page-enter {
  animation: uxPageIn .2s ease-out;
}
@keyframes uxPageIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

@media (max-width: 520px) {
  .ux-message-actions > .col,
  .ux-message-actions .col:first-of-type { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ux-message-actions .col > button { min-height: 56px; padding: 10px !important; }
  .ux-continue-studying article { grid-template-columns: 50px minmax(0, 1fr); }
  .ux-file-mark { width: 50px; height: 66px; }
  .ux-resume { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

@media (max-width: 390px) {
  .ux-message-actions .col > button { font-size: 13px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ux-badge-bump,
  .wa-typing span,
  .wa-pending,
  .page-enter,
  .skeleton-3d,
  .route-skeleton-card,
  .route-skeleton-hero,
  .route-skeleton-header,
  .wa-skeleton,
  .wa-img-skeleton {
    animation: none !important;
  }
  .wa-msg,
  .anon-chat-bubble { transition: none !important; }
}

/* Review feedback v3: list Chat Hub, wider composer, greeting, Notes loading/search, instant repeat opens. */

/* Chat Hub returns to the familiar vertical list while retaining all four destinations. */
.senior-chat-hub-page .page > .col {
  display: flex !important;
  flex-direction: column;
  gap: 10px !important;
}

.senior-chat-hub-page .page > .col > .card-3d {
  width: 100%;
  min-height: 92px !important;
  padding: 14px 16px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.senior-chat-hub-page .page > .col > .card-3d > .row {
  min-width: 0;
  flex-direction: row !important;
  align-items: center !important;
}

.senior-chat-hub-page .page > .col > .card-3d .icon-badge {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px;
}

.senior-chat-hub-page .page > .col > .card-3d .muted {
  margin-top: 2px;
  font-size: 13px !important;
  line-height: 19px;
}

/* A single attachment command keeps every photo/video feature and gives the textarea more width. */
.ux-attachment-original {
  display: none !important;
}

.senior-chat-room > .row:last-of-type {
  gap: 4px !important;
  padding-inline: 7px !important;
}

.senior-chat-room > .row:last-of-type > .icon-btn,
.senior-chat-room > .row:last-of-type > .ux-attach-button {
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  flex-basis: 36px !important;
  margin-bottom: 9px;
}

.ux-attach-button {
  color: var(--ds-primary, var(--color-primary)) !important;
  font-size: 25px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

.ux-chat-textarea,
.senior-chat-room > .row:last-of-type textarea.input-3d,
.anon-chat-composer textarea.input-3d {
  min-height: 56px !important;
  padding-inline: 17px !important;
}

.ux-attachment-overlay {
  position: fixed;
  inset: 0;
  z-index: 50000;
  padding: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(2, 6, 23, .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: uxFadeIn .16s ease-out;
}

.ux-attachment-sheet {
  width: min(100%, 480px);
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px 24px 12px 12px;
  background: color-mix(in srgb, var(--ds-surface-raised, var(--surface)) 96%, transparent);
  box-shadow: 0 -20px 60px rgba(2, 6, 23, .45);
  animation: uxSheetIn .24s cubic-bezier(.2, .9, .25, 1);
}

.ux-attachment-sheet > i {
  display: block;
  width: 42px;
  height: 4px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: var(--ds-border-strong, var(--edge-shadow));
}

.ux-attachment-sheet h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.ux-attachment-sheet > button {
  width: 100%;
  min-height: 60px;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid var(--ds-border, var(--surface-deep));
  border-radius: 13px;
  background: var(--ds-surface, var(--surface-raised));
  color: var(--ds-text, var(--text));
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.ux-attachment-sheet > button > b {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(var(--color-primary-rgb), .13);
  color: var(--ds-primary, var(--color-primary));
  display: grid;
  place-items: center;
  font-size: 20px;
}

.ux-attachment-sheet > button span,
.ux-attachment-sheet > button strong,
.ux-attachment-sheet > button small {
  display: block;
}

.ux-attachment-sheet > button strong { font-size: 15px; }
.ux-attachment-sheet > button small { color: var(--ds-text-secondary, var(--text-muted)); font-size: 12px; }
.ux-attachment-sheet > .ux-attachment-cancel { min-height: 46px; justify-content: center; color: var(--ds-error, #ef4444); }

@keyframes uxFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes uxSheetIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* A warm, time-aware supporting greeting beneath the existing name/faculty greeting. */
.ux-greeting-message {
  margin: 10px 0 0 !important;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--ds-primary) 20%, var(--ds-border));
  color: var(--ds-text, var(--text)) !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 20px;
}

/* Notes search stays available while browsing and provides card-shaped loading feedback. */
.senior-notes-page .note-fast-search {
  position: sticky;
  top: calc(63px + env(safe-area-inset-top, 0px));
  z-index: 24;
  margin: -4px -4px 17px;
  padding: 8px 4px 10px;
  background: color-mix(in srgb, var(--ds-bg, var(--bg)) 95%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.senior-notes-page .note-fast-search-box {
  min-height: 54px;
  border-color: var(--ds-border-strong, var(--edge-shadow)) !important;
  box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(15, 23, 42, .05)) !important;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.senior-notes-page .note-fast-search-box:focus-within {
  border-color: var(--ds-primary, var(--color-primary)) !important;
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), .14), var(--ds-shadow-md) !important;
  transform: translateY(-1px);
}

.note-fast-search-clear {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  border-radius: 50% !important;
}

.note-fast-results {
  max-height: min(64dvh, 560px);
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--ds-border, var(--surface-deep));
  border-radius: 14px;
  background: var(--ds-surface-raised, var(--surface));
  box-shadow: var(--ds-shadow-lg, 0 10px 22px rgba(15, 23, 42, .12));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.note-fast-results-head {
  position: sticky;
  top: -10px;
  z-index: 2;
  padding: 8px 3px 10px;
  background: var(--ds-surface-raised, var(--surface));
}

.note-fast-loading {
  display: grid !important;
  gap: 8px !important;
  padding: 2px 0 !important;
}

.note-fast-loading i {
  display: block !important;
  width: 100% !important;
  height: 76px !important;
  border-radius: 11px !important;
  background: linear-gradient(90deg, var(--ds-surface-strong, var(--surface-deep)) 25%, var(--ds-surface, var(--surface-raised)) 50%, var(--ds-surface-strong, var(--surface-deep)) 75%) !important;
  background-size: 220% 100% !important;
  animation: uxSkeleton 1.5s linear infinite !important;
}

.note-fast-loading i::after { display: none !important; }
.note-fast-results .card-3d { min-height: 92px; }
.note-fast-search-status { margin: 7px 14px 0 !important; font-size: 13px !important; }

/* Rendering containment reduces below-fold work without changing list behaviour. */
.senior-home-page .h-scroll > *,
.senior-notes-page .faculty-card,
.senior-notes-page .col > .card-3d,
.senior-news-page .page > .col > .card-3d,
.senior-profile-page .premium-recent-card {
  contain: layout paint style;
}

@media (max-width: 390px) {
  .senior-chat-room > .row:last-of-type > .icon-btn,
  .senior-chat-room > .row:last-of-type > .ux-attach-button {
    width: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ux-attachment-overlay,
  .ux-attachment-sheet,
  .note-fast-loading i { animation: none !important; }
}

/* Private review v4: STUDENT HUB watermark and time-aware Home greeting. */

body {
  position: relative;
  background: var(--ds-bg, var(--bg)) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('/logo.webp');
  background-repeat: no-repeat;
  background-position: center 46%;
  background-size: min(62vw, 360px) auto;
  opacity: .07;
  filter: saturate(.9);
}

[data-theme="dark"] body::before {
  opacity: .10;
  filter: saturate(.85) brightness(1.25);
}

#root {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

/* Let the global watermark remain visible while cards and bars stay fully readable. */
.page-enter,
.senior-chat-room,
.admin-shell,
.news-editor-page {
  background-color: transparent !important;
  background-image: none !important;
}

.senior-home-page .welcome-banner-accent h2 {
  font-size: clamp(20px, 5.7vw, 25px) !important;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.ux-greeting-message {
  margin-top: 10px !important;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--ds-primary, var(--color-primary)) 22%, var(--ds-border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--ds-primary, var(--color-primary)) 8%, transparent);
  color: var(--ds-text, var(--text)) !important;
  font-size: 13px !important;
  font-weight: 600;
  line-height: 19px;
}

@media (min-width: 760px) {
  body::before {
    background-size: min(34vw, 420px) auto;
  }
}

@media (max-width: 380px) {
  body::before {
    background-size: 70vw auto;
  }

  .senior-home-page .welcome-banner-accent h2 {
    font-size: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before { transition: none !important; }
}

/* Private review v5: WhatsApp-style voice-note waveform and automatic download states. */

.ux-voice-note {
  position: relative;
  width: min(100%, 300px) !important;
  max-width: min(82vw, 300px) !important;
  min-height: 60px;
  padding: 8px 10px !important;
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  overflow: visible;
}

.ux-voice-main {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.ux-download-arrow {
  position: relative;
  z-index: 2;
  font-size: 23px;
  font-weight: 900;
  line-height: 1;
  transform: translateY(-1px);
}

.ux-voice-main > i {
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: 50%;
  background: conic-gradient(var(--color-primary-light) var(--download, 0%), rgba(148, 163, 184, .24) 0);
  -webkit-mask: radial-gradient(circle, transparent 57%, #000 59%);
  mask: radial-gradient(circle, transparent 57%, #000 59%);
  transition: background .14s linear;
}

.ux-voice-note.is-downloading .ux-voice-main {
  animation: uxVoiceDownloadPulse 1.4s ease-in-out infinite;
}

@keyframes uxVoiceDownloadPulse {
  50% { box-shadow: 0 0 0 5px rgba(var(--color-primary-light-rgb), .13); }
}

.ux-voice-wave-wrap {
  min-width: 104px !important;
}

.ux-voice-wave,
.ux-live-wave {
  transform-origin: center;
  overflow: hidden;
}

.ux-voice-wave > span,
.ux-live-wave > span {
  transform-origin: center;
  transition: height .1s ease-out, transform .12s ease-out, background-color .1s linear !important;
}

.ux-voice-note.is-playing .ux-voice-wave > span {
  animation: uxVoicePlaying .72s ease-in-out infinite alternate;
}

.ux-voice-note.is-playing .ux-voice-wave > span:nth-child(3n) { animation-delay: -.18s; }
.ux-voice-note.is-playing .ux-voice-wave > span:nth-child(4n) { animation-delay: -.34s; }
.ux-voice-note.is-playing .ux-voice-wave > span:nth-child(5n) { animation-delay: -.46s; }

@keyframes uxVoicePlaying {
  from { transform: scaleY(.72); opacity: .72; }
  to { transform: scaleY(1); opacity: 1; }
}

.ux-live-wave > span {
  animation: uxRecordingWave .5s ease-in-out infinite alternate;
}
.ux-live-wave > span:nth-child(3n) { animation-delay: -.13s; }
.ux-live-wave > span:nth-child(4n) { animation-delay: -.28s; }
.ux-live-wave > span:nth-child(5n) { animation-delay: -.41s; }

@keyframes uxRecordingWave {
  from { transform: scaleY(.62); opacity: .68; }
  to { transform: scaleY(1.06); opacity: 1; }
}

.ux-download-progress {
  width: 100%;
  height: 3px;
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, .25);
  overflow: hidden;
}

.ux-download-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary-light);
  transition: width .14s linear;
}

.ux-voice-actions {
  align-self: center;
}

.ux-voice-actions > button {
  transition: transform .12s ease-out, background-color .12s ease-out !important;
}
.ux-voice-actions > button:active { transform: scale(.9); }

[data-theme="light"] .ux-voice-note {
  background: rgba(var(--color-primary-rgb), .06) !important;
  border-color: rgba(var(--color-primary-rgb), .14);
}

@media (max-width: 390px) {
  .ux-voice-note {
    max-width: min(86vw, 280px) !important;
    gap: 6px !important;
  }

  .ux-voice-actions {
    gap: 1px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ux-voice-note.is-downloading .ux-voice-main,
  .ux-voice-note.is-playing .ux-voice-wave > span,
  .ux-live-wave > span {
    animation: none !important;
  }
}

/* Private review v6: animated greeting and per-account wallpaper studio. */

body::before {
  background-image: var(--ux-wallpaper-image, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'%3E%3Cg fill='none' stroke='%237d8fa3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 34c8-5 17-5 23 0 6-5 15-5 23 0v20c-8-5-17-5-23 0-6-5-15-5-23 0z'/%3E%3Cpath d='M45 34v20'/%3E%3Cpath d='M152 24l26 9-26 9-26-9z'/%3E%3Cpath d='M178 33v11'/%3E%3Cpath d='M62 112l4 8 9 1-6 7 1 9-8-4-8 4 1-9-6-7 9-1z'/%3E%3Cpath d='M168 108h26v13a13 13 0 0 1-26 0z'/%3E%3Cpath d='M194 110h5a6 6 0 0 1 0 12h-5'/%3E%3Cpath d='M38 196c13-15 29-15 33-2-2 15-19 17-33 2z'/%3E%3Cpath d='M42 194c8-6 17-8 25-6'/%3E%3Cpath d='M148 192l20-20 8 8-20 20-10 2z'/%3E%3Cpath d='M96 62h32a8 8 0 0 1 8 8v12a8 8 0 0 1-8 8h-18l-10 8v-8h-4a8 8 0 0 1-8-8V70a8 8 0 0 1 8-8z'/%3E%3Ccircle cx='216' cy='64' r='9'/%3E%3Cpath d='M212 76h8m-7 4h6'/%3E%3Cpath d='M112 152c3-6 12-6 13 1 1-7 10-7 13-1 2 5-6 10-13 15-7-5-15-10-13-15z'/%3E%3Cpath d='M208 174v-19l16-4v19'/%3E%3Ccircle cx='204' cy='174' r='4'/%3E%3Ccircle cx='220' cy='170' r='4'/%3E%3C/g%3E%3C/svg%3E")) !important;
  background-size: var(--ux-wallpaper-size, 260px 260px) !important;
  background-position: center top !important;
  background-repeat: repeat !important;
  opacity: var(--ux-wallpaper-opacity, .05) !important;
  transition: opacity .28s ease-out, filter .28s ease-out;
}

[data-theme="dark"] body::before {
  opacity: var(--ux-wallpaper-opacity, .06) !important;
}

html[data-ux-wallpaper="preset"] body::before,
html[data-ux-wallpaper="color"] body::before,
html[data-ux-wallpaper="custom"] body::before {
  filter: none !important;
  background-position: center !important;
}

html[data-ux-wallpaper="preset"] body::before,
html[data-ux-wallpaper="custom"] body::before {
  background-size: cover !important;
}

html[data-ux-wallpaper="color"] body::before {
  background-size: 100% 100% !important;
}

.ux-hidden-profile-intro {
  display: none !important;
}

.senior-home-page .welcome-banner-accent h2 {
  margin: 0 !important;
  font-size: clamp(22px, 6vw, 27px) !important;
  line-height: 1.2;
}

.ux-greeting-message {
  margin: 10px 0 0 !important;
  padding: 10px 12px !important;
  color: var(--ds-text, var(--text)) !important;
  font-size: 14px !important;
  font-weight: 600;
  line-height: 20px;
  overflow-wrap: anywhere;
}

.ux-motivational-note {
  min-width: 0;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--ds-primary, var(--color-primary)) 22%, transparent);
  border-radius: 13px;
  background: color-mix(in srgb, var(--ds-primary, var(--color-primary)) 8%, var(--ds-surface, var(--surface-raised)));
  display: flex;
  align-items: flex-start;
  gap: 10px;
  overflow: hidden;
}

.ux-motivational-note > span {
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--ds-primary, var(--color-primary)), #7c3aed);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  box-shadow: 0 7px 18px rgba(var(--color-primary-rgb), .18);
}

.ux-motivational-note > div {
  min-width: 0;
}

.ux-motivational-note small {
  display: block;
  margin-bottom: 2px;
  color: var(--ds-primary, var(--color-primary));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 14px;
  text-transform: uppercase;
}

.ux-motivational-note p {
  margin: 0 !important;
  padding: 0 !important;
  color: var(--ds-text-secondary, var(--text-muted)) !important;
  font-size: 12px !important;
  font-weight: 600;
  line-height: 18px;
  overflow-wrap: anywhere;
}

.ux-motivation-enter {
  transform-origin: left center;
  animation: uxMotivationEnter .62s cubic-bezier(.2, .85, .25, 1) .34s both;
}

.ux-greeting-typing {
  transform-origin: left center;
  animation: uxGreetingType .86s steps(18, end) both;
}

.senior-home-page .welcome-banner-accent h2.ux-greeting-typing::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: .95em;
  margin-left: 4px;
  vertical-align: -.08em;
  border-radius: 2px;
  background: var(--ds-primary-light, var(--color-primary-light));
  animation: uxGreetingCaret .55s steps(1, end) 3;
}

@keyframes uxGreetingType {
  0% { opacity: 0; transform: translateX(-18px); clip-path: inset(0 100% 0 0); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); clip-path: inset(0 0 0 0); }
}

@keyframes uxGreetingCaret {
  50% { opacity: 0; }
}

@keyframes uxMotivationEnter {
  from { opacity: 0; transform: translateX(-12px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* Compact entry inside the existing Edit Profile sheet. */
.ux-wallpaper-setting {
  margin: 4px 0 16px;
  padding: 14px;
  border: 1px solid var(--ds-border, var(--surface-deep));
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--color-primary-rgb), .10), var(--ds-surface, var(--surface-raised)));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ux-wallpaper-setting-copy {
  min-width: 0;
}

.ux-wallpaper-setting-copy > span,
.ux-wallpaper-setting-copy > strong,
.ux-wallpaper-setting-copy > small {
  display: block;
}

.ux-wallpaper-setting-copy > span {
  color: var(--ds-primary, var(--color-primary));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ux-wallpaper-setting-copy > strong {
  margin-top: 3px;
  font-size: 14px;
  line-height: 20px;
}

.ux-wallpaper-setting-copy > small {
  margin-top: 2px;
  color: var(--ds-text-secondary, var(--text-muted));
  font-size: 11px;
  line-height: 16px;
}

.ux-wallpaper-setting > button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 9px 12px;
  border: 0;
  border-radius: 9px;
  background: var(--ds-primary, var(--color-primary));
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

/* Full wallpaper chooser */
.ux-wallpaper-overlay {
  position: fixed;
  inset: 0;
  z-index: 60000;
  padding: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(2, 6, 23, .66);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: uxWallpaperFade .18s ease-out;
}

.ux-wallpaper-picker {
  width: min(100%, 760px);
  max-height: 92dvh;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 26px 26px 12px 12px;
  background: color-mix(in srgb, var(--ds-surface-raised, var(--surface)) 97%, transparent);
  box-shadow: 0 -24px 70px rgba(2, 6, 23, .52);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: uxWallpaperSheet .28s cubic-bezier(.2, .9, .25, 1);
}

.ux-wallpaper-picker > header {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ux-wallpaper-picker > header span {
  display: block;
  color: var(--ds-primary, var(--color-primary));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.ux-wallpaper-picker > header h2 {
  margin: 2px 0 0;
  font-size: 21px;
  line-height: 28px;
}

.ux-wallpaper-close {
  width: 42px;
  height: 42px;
  border: 1px solid var(--ds-border, var(--surface-deep));
  border-radius: 12px;
  background: var(--ds-surface, var(--surface-raised));
  color: var(--ds-text, var(--text));
  font-size: 25px;
}

.ux-wallpaper-picker > nav {
  display: flex;
  gap: 7px;
  margin: 10px 0;
  padding-bottom: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ux-wallpaper-picker > nav > button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid var(--ds-border, var(--surface-deep));
  border-radius: 999px;
  background: var(--ds-surface, var(--surface-raised));
  color: var(--ds-text-secondary, var(--text-muted));
  font-size: 12px;
  font-weight: 700;
}

.ux-wallpaper-picker > nav > button.active {
  border-color: var(--ds-primary, var(--color-primary));
  background: var(--ds-primary, var(--color-primary));
  color: #fff;
}

.ux-wallpaper-picker > nav b {
  margin-left: 4px;
  font-size: 10px;
}

.ux-wallpaper-pane {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ux-wallpaper-pane.active {
  display: block;
}

.ux-wallpaper-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 2px;
}

.ux-wallpaper-grid > button {
  min-width: 0;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 13px;
  background: var(--ds-surface, var(--surface-raised));
  color: var(--ds-text, var(--text));
  text-align: left;
}

.ux-wallpaper-grid > button > i {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 9px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.ux-wallpaper-grid > button > span {
  display: block;
  padding: 6px 3px 2px;
  overflow: hidden;
  color: var(--ds-text-secondary, var(--text-muted));
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ux-wallpaper-grid > button.selected,
.ux-color-grid > button.selected {
  border-color: var(--ds-primary, var(--color-primary));
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .15);
}

.ux-wallpaper-grid > button.selected > span {
  color: var(--ds-primary, var(--color-primary));
}

.ux-color-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 9px;
  padding: 4px;
}

.ux-color-grid > button {
  min-width: 0;
  padding: 4px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: var(--ds-surface, var(--surface-raised));
  color: var(--ds-text-secondary, var(--text-muted));
}

.ux-color-grid > button > i {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 9px;
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.ux-color-grid > button > span {
  display: none;
}

.ux-custom-wallpaper {
  min-height: 300px;
  padding: 22px 16px;
  border: 1px dashed var(--ds-border-strong, var(--edge-shadow));
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.ux-custom-preview {
  width: 88px;
  height: 88px;
  border-radius: 26px;
  background: linear-gradient(135deg, var(--color-primary), #7c3aed, #ec4899);
  box-shadow: 0 12px 28px rgba(var(--color-primary-rgb), .24);
}

.ux-custom-wallpaper h3 {
  margin: 15px 0 5px;
  font-size: 18px;
}

.ux-custom-wallpaper p {
  max-width: 390px;
  margin: 0;
  color: var(--ds-text-secondary, var(--text-muted));
  font-size: 13px;
}

.ux-upload-wallpaper {
  min-height: 46px;
  margin-top: 16px;
  padding: 10px 16px;
  border: 0;
  border-radius: 10px;
  background: var(--ds-primary, var(--color-primary));
  color: #fff;
  font-weight: 800;
}

.ux-wallpaper-picker > footer {
  min-height: 54px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ds-border, var(--surface-deep));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ux-wallpaper-picker > footer span {
  min-width: 0;
  color: var(--ds-text-secondary, var(--text-muted));
  font-size: 11px;
}

.ux-wallpaper-picker > footer b {
  display: block;
  max-width: 240px;
  overflow: hidden;
  color: var(--ds-text, var(--text));
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ux-reset-wallpaper {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid rgba(239, 68, 68, .25);
  border-radius: 9px;
  background: rgba(239, 68, 68, .07);
  color: var(--ds-error, #ef4444);
  font-size: 11px;
  font-weight: 800;
}

@keyframes uxWallpaperFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes uxWallpaperSheet { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (min-width: 700px) {
  .ux-wallpaper-overlay { align-items: center; padding: 20px; }
  .ux-wallpaper-picker { border-radius: 26px; }
  .ux-wallpaper-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ux-color-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
  .ux-wallpaper-setting {
    align-items: flex-start;
    flex-direction: column;
  }

  .ux-wallpaper-setting > button {
    width: 100%;
  }

  .ux-color-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .ux-wallpaper-picker > footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .ux-reset-wallpaper {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ux-greeting-typing,
  .ux-motivation-enter,
  .senior-home-page .welcome-banner-accent h2.ux-greeting-typing::after,
  .ux-wallpaper-overlay,
  .ux-wallpaper-picker {
    animation: none !important;
  }
}
/* Private review v7: wallpaper legibility and compact, clearly aligned chat. */

/* Keep the chosen wallpaper behind the interface instead of competing with it. */
html[data-ux-wallpaper="preset"] #root,
html[data-ux-wallpaper="color"] #root,
html[data-ux-wallpaper="custom"] #root {
  background: color-mix(in srgb, var(--ds-bg, var(--bg)) 16%, transparent);
}

.ux-wallpaper-overlay {
  isolation: isolate;
}

.ux-wallpaper-picker {
  isolation: isolate;
  background: var(--ds-surface-raised, var(--surface)) !important;
}

.ux-wallpaper-pane {
  padding: 3px;
  border-radius: 14px;
  background: var(--ds-surface-raised, var(--surface));
}

.ux-wallpaper-grid > button,
.ux-color-grid > button {
  position: relative;
  z-index: 1;
  background: var(--ds-surface-strong, var(--surface-raised)) !important;
}

.ux-wallpaper-grid > button.selected,
.ux-color-grid > button.selected {
  z-index: 2;
}

/* Full-width message lanes with content-sized bubbles: mine right, theirs left. */
.senior-chat-room .wa-scroll-smooth {
  padding-inline: 9px !important;
}

.senior-chat-room .wa-msg {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  margin-block: 2px 5px;
}

.senior-chat-room .wa-msg.mine {
  justify-content: flex-end !important;
  padding-left: 44px;
}

.senior-chat-room .wa-msg.theirs {
  justify-content: flex-start !important;
  padding-right: 44px;
}

.senior-chat-room .wa-msg .wa-col {
  width: fit-content;
  max-width: min(78%, 440px) !important;
  min-width: 0;
}

.senior-chat-room .wa-msg.mine .wa-col {
  align-items: flex-end !important;
  margin-left: auto;
}

.senior-chat-room .wa-msg.theirs .wa-col {
  align-items: flex-start !important;
  margin-right: auto;
}

.senior-chat-room .wa-bubble {
  width: fit-content;
  max-width: 100% !important;
  padding: 7px 10px !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 7px rgba(2, 6, 23, .12) !important;
}

.senior-chat-room .wa-bubble.mine {
  border-bottom-right-radius: 4px !important;
}

.senior-chat-room .wa-bubble.theirs {
  border-bottom-left-radius: 4px !important;
}

.senior-chat-room .wa-text {
  font-size: 14px !important;
  line-height: 20px !important;
  overflow-wrap: anywhere;
}

.senior-chat-room .wa-meta {
  font-size: 10px !important;
  line-height: 14px !important;
}

.senior-chat-room .wa-reply-above {
  max-width: 100%;
}

/* Voice notes retain waveform/download/actions in a compact WhatsApp-like bar. */
.senior-chat-room .wa-bubble:has(.ux-voice-note) {
  padding: 5px !important;
}

.senior-chat-room .wa-bubble > div:has(> .ux-voice-note) {
  width: min(66vw, 220px);
  min-width: 0 !important;
  max-width: 220px;
}

.ux-voice-note {
  box-sizing: border-box;
  width: min(66vw, 220px) !important;
  min-width: 0 !important;
  max-width: 220px !important;
  min-height: 50px !important;
  padding: 6px 7px !important;
  gap: 5px !important;
  border-radius: 15px !important;
  overflow: visible;
}

.ux-voice-main {
  width: 35px !important;
  min-width: 35px !important;
  height: 35px !important;
  min-height: 35px !important;
}

.ux-download-arrow {
  font-size: 19px !important;
}

.ux-voice-wave-wrap {
  min-width: 58px !important;
}

.ux-voice-wave {
  height: 24px !important;
  gap: 1px !important;
}

.ux-voice-actions {
  gap: 1px !important;
}

.ux-voice-actions > button {
  width: 24px !important;
  min-width: 24px !important;
  height: 24px !important;
  min-height: 24px !important;
}

.ux-voice-note > span:last-child {
  position: absolute;
  right: 7px;
  bottom: -13px;
  padding: 1px 4px;
  border-radius: 6px;
  background: var(--ds-surface-raised, var(--surface));
  font-size: 8px !important;
}

/* The composer remains multiline but no longer expands over most of the thread. */
.senior-chat-room > .row:last-of-type,
.anon-chat-composer {
  min-height: 60px !important;
  padding-top: 6px !important;
}

.ux-chat-textarea,
.senior-chat-room > .row:last-of-type textarea.input-3d,
.anon-chat-composer textarea.input-3d {
  min-height: 48px !important;
  max-height: 116px !important;
  padding: 11px 14px !important;
  border-radius: 18px !important;
  font-size: 15px !important;
  line-height: 21px !important;
}

/* Apply the same clear ownership alignment to anonymous threads. */
.anon-chat-thread .anon-chat-bubble {
  width: fit-content !important;
  max-width: 78% !important;
}

.anon-chat-thread .anon-chat-bubble.mine {
  align-self: flex-end !important;
  margin-left: auto;
}

.anon-chat-thread .anon-chat-bubble.theirs {
  align-self: flex-start !important;
  margin-right: auto;
}

@media (max-width: 390px) {
  .senior-chat-room .wa-scroll-smooth {
    padding-inline: 6px !important;
  }

  .senior-chat-room .wa-msg.mine {
    padding-left: 34px;
  }

  .senior-chat-room .wa-msg.theirs {
    padding-right: 28px;
  }

  .senior-chat-room .wa-msg .wa-col {
    max-width: 82% !important;
  }

  .senior-chat-room .wa-bubble > div:has(> .ux-voice-note),
  .ux-voice-note {
    width: min(67vw, 216px) !important;
    max-width: 216px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    transition: none !important;
  }
}
/* Private review v8: categorized photo wallpapers, adaptive contrast, stable note search. */

/* Keep picker tabs/header/footer above every scrollable wallpaper list. */
.ux-wallpaper-picker > header,
.ux-wallpaper-picker > nav,
.ux-wallpaper-picker > footer {
  position: relative;
  z-index: 30;
  flex: 0 0 auto;
  background: var(--ds-surface-raised, var(--surface));
}

.ux-wallpaper-picker > nav {
  margin: 6px -2px 9px !important;
  padding: 5px 2px 7px !important;
  border-bottom: 1px solid var(--ds-border, var(--surface-deep));
  box-shadow: 0 8px 14px rgba(2, 6, 23, .08);
  overflow-x: auto;
  overflow-y: hidden;
  isolation: isolate;
}

.ux-wallpaper-picker > nav > button {
  position: relative;
  z-index: 31;
}

.ux-wallpaper-pane,
.ux-wallpaper-pane.active {
  position: relative;
  z-index: 1;
  min-height: 0;
  isolation: isolate;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  contain: layout paint;
}

.ux-wallpaper-grid > button,
.ux-color-grid > button,
.ux-wallpaper-grid > button.selected,
.ux-color-grid > button.selected {
  z-index: auto !important;
}

.ux-photo-kinds {
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 5px 2px 9px;
  display: flex;
  gap: 6px;
  background: var(--ds-surface-raised, var(--surface));
}

.ux-photo-kinds > span {
  padding: 6px 10px;
  border: 1px solid var(--ds-border, var(--surface-deep));
  border-radius: 999px;
  color: var(--ds-text-secondary, var(--text-muted));
  font-size: 11px;
  font-weight: 800;
}

.ux-photo-grid > button > i {
  aspect-ratio: 3 / 4;
  background-color: var(--ds-surface-strong, var(--surface-deep)) !important;
}

.ux-photo-grid > button > span {
  min-height: 47px;
  white-space: normal;
}

.ux-photo-grid > button > span > b {
  display: block;
  margin-bottom: 1px;
  color: var(--ds-primary, var(--color-primary));
  font-size: 9px;
  letter-spacing: .055em;
  text-transform: uppercase;
}

html[data-ux-wallpaper="photo"] body::before {
  filter: none !important;
  background-position: center !important;
  background-size: cover !important;
}

/* Wallpaper-aware contrast: light images get dark text/light glass; dark images get the reverse. */
html[data-ux-wallpaper-tone="light"] {
  color-scheme: light;
  --ds-bg: #f1f5f9;
  --bg: #f1f5f9;
  --ds-text: #0f172a;
  --text: #0f172a;
  --ds-text-secondary: #334155;
  --text-muted: #475569;
  --muted: #475569;
  --ds-surface: rgba(255, 255, 255, .88);
  --surface: rgba(255, 255, 255, .88);
  --ds-surface-raised: rgba(255, 255, 255, .94);
  --surface-raised: rgba(255, 255, 255, .94);
  --ds-surface-strong: rgba(241, 245, 249, .96);
  --surface-deep: rgba(203, 213, 225, .72);
  --ds-border: rgba(71, 85, 105, .20);
  --edge-shadow: rgba(71, 85, 105, .24);
  /* overlay components (notes filters, sheets) use their own token names
     with dark fallbacks; define light values so light wallpapers keep them
     readable (fixes "department / semester not visible" on light wallpaper). */
  --card: #ffffff;
  --bg-elev: #ffffff;
  --border: #e2e8f0;
  --oa-solid: #ffffff;
  --oa-solid-2: #f1f5f9;
}

html[data-ux-wallpaper-tone="dark"] {
  color-scheme: dark;
  --ds-bg: #07101f;
  --bg: #07101f;
  --ds-text: #f8fafc;
  --text: #f8fafc;
  --ds-text-secondary: #cbd5e1;
  --text-muted: #cbd5e1;
  --muted: #cbd5e1;
  --ds-surface: rgba(15, 23, 42, .86);
  --surface: rgba(15, 23, 42, .86);
  --ds-surface-raised: rgba(30, 41, 59, .92);
  --surface-raised: rgba(30, 41, 59, .92);
  --ds-surface-strong: rgba(51, 65, 85, .92);
  --surface-deep: rgba(71, 85, 105, .66);
  --ds-border: rgba(203, 213, 225, .18);
  --edge-shadow: rgba(2, 6, 23, .64);
}

html[data-ux-wallpaper="photo"] #root,
html[data-ux-wallpaper-tone="light"] #root,
html[data-ux-wallpaper-tone="dark"] #root {
  background: transparent !important;
}

html[data-ux-wallpaper-tone="light"] body,
html[data-ux-wallpaper-tone="light"] #root,
html[data-ux-wallpaper-tone="light"] input,
html[data-ux-wallpaper-tone="light"] textarea,
html[data-ux-wallpaper-tone="light"] select {
  color: #0f172a;
}

html[data-ux-wallpaper-tone="dark"] body,
html[data-ux-wallpaper-tone="dark"] #root,
html[data-ux-wallpaper-tone="dark"] input,
html[data-ux-wallpaper-tone="dark"] textarea,
html[data-ux-wallpaper-tone="dark"] select {
  color: #f8fafc;
}

html[data-ux-wallpaper-tone] .top-bar,
html[data-ux-wallpaper-tone] .bottom-nav,
html[data-ux-wallpaper-tone] .card-3d,
html[data-ux-wallpaper-tone] .list-item,
html[data-ux-wallpaper-tone] .modal-3d,
html[data-ux-wallpaper-tone] .note-fast-results,
html[data-ux-wallpaper-tone] .note-fast-results-head,
html[data-ux-wallpaper-tone] .note-fast-search,
html[data-ux-wallpaper-tone] .input-3d {
  color: var(--ds-text, var(--text)) !important;
}

html[data-ux-wallpaper-tone] .muted {
  color: var(--ds-text-secondary, var(--text-muted)) !important;
}

/* Stable search states prevent stale cards and content-visibility jumps while typing. */
.senior-notes-page .note-fast-search {
  background: color-mix(in srgb, var(--ds-bg, var(--bg)) 92%, transparent) !important;
}

.note-fast-results {
  position: relative;
  min-height: 220px;
  scrollbar-gutter: stable;
  contain: layout paint;
}

.note-fast-results .card-3d {
  content-visibility: visible !important;
  contain: none !important;
  contain-intrinsic-size: none !important;
}

.note-fast-results > .col {
  opacity: 1;
  transition: opacity .12s ease-out;
}

.ux-note-search-pending .note-fast-results > .col,
.ux-note-search-pending .note-fast-results > .empty-state,
.ux-note-search-pending .note-fast-loading {
  visibility: hidden !important;
  opacity: 0 !important;
}

.ux-note-search-pending .note-fast-results::after {
  content: "Searching notes…";
  position: absolute;
  inset: 56px 10px 10px;
  z-index: 4;
  padding: 18px 14px;
  border: 1px solid var(--ds-border, var(--surface-deep));
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(148, 163, 184, .18) 34%, transparent 50%) 0 0 / 220% 100%,
    var(--ds-surface-strong, var(--surface-deep));
  color: var(--ds-text-secondary, var(--text-muted));
  display: flex;
  align-items: flex-start;
  font-size: 12px;
  font-weight: 800;
  animation: uxSearchStable 1.1s linear infinite;
}

@keyframes uxSearchStable {
  to { background-position: -220% 0, 0 0; }
}

.viewer-shell {
  transform: translateZ(0);
  animation-duration: .18s !important;
}

@media (max-width: 599px) {
  .ux-wallpaper-picker > nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    scrollbar-width: none;
  }

  .ux-wallpaper-picker > nav > button {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding-inline: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ux-note-search-pending .note-fast-results::after {
    animation: none !important;
  }

  .note-fast-results > .col {
    transition: none !important;
  }
}
.news-editor-page.news-editor-page{background-color:color-mix(in srgb,var(--surface) 78%,transparent)!important;-webkit-backdrop-filter:blur(24px) saturate(165%)!important;backdrop-filter:blur(24px) saturate(165%)!important}
[data-theme="dark"] .news-editor-page.news-editor-page{background-color:rgba(11,17,32,.82)!important}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.news-editor-page.news-editor-page{background-color:var(--surface)!important}}
.news-editor-page .news-editor-header{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.wa-msg.is-pending{opacity:.68}
.wa-msg.is-failed .wa-bubble{outline:1px solid #ef4444}
.fab-host.fab-draggable{touch-action:none;transition:none}
.fab-host.fab-draggable.is-dragging .fab{transform:scale(1.08);box-shadow:0 12px 28px rgba(var(--color-primary-rgb),.5)}
.fab.fab-pulse{animation:fabFloat 3.2s ease-in-out infinite}
.fab.fab-pulse::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(var(--color-primary-rgb),.45);animation:fabRing 2.6s ease-out infinite;pointer-events:none}
@keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes fabRing{0%{box-shadow:0 0 0 0 rgba(var(--color-primary-rgb),.45)}70%{box-shadow:0 0 0 16px rgba(var(--color-primary-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--color-primary-rgb),0)}}
@media (prefers-reduced-motion:reduce){.fab.fab-pulse,.fab.fab-pulse::after{animation:none}}

@keyframes omeIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
/* ── Anonymous profile sheet ──────────────────────────────────────────── */
body.oap-open{overflow:hidden}
.oap-root{position:fixed;inset:0;z-index:31000;display:flex;align-items:flex-end;justify-content:center;
 background:rgba(4,8,18,0);backdrop-filter:blur(0px);transition:background .22s,backdrop-filter .22s}
.oap-root.is-in{background:rgba(4,8,18,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.oap-sheet{position:relative;width:100%;max-width:520px;padding:10px 20px calc(24px + env(safe-area-inset-bottom,0px));
 border-radius:28px 28px 0 0;background:var(--surface);color:var(--text);
 box-shadow:0 -18px 50px rgba(0,0,0,.45);transform:translateY(100%);
 transition:transform .28s cubic-bezier(.22,1,.36,1);max-height:88vh;overflow-y:auto}
.oap-root.is-in .oap-sheet{transform:none}
@media(min-width:700px){.oap-root{align-items:center}.oap-sheet{border-radius:26px;transform:translateY(14px) scale(.98)}}
.oap-grip{width:42px;height:5px;border-radius:3px;background:var(--edge-shadow);margin:0 auto 10px}
.oap-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border:none;border-radius:12px;
 display:grid;place-items:center;cursor:pointer;background:var(--surface-deep);color:var(--text)}
.oap-x svg{width:17px;height:17px}
.oap-head{text-align:center;padding:6px 0 2px}
.oap-av{width:84px;height:84px;margin:0 auto;border-radius:50%;display:grid;place-items:center;
 color:#fff;font-size:31px;font-weight:800;overflow:hidden;font-family:var(--font-display);
 box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 2px 0 rgba(255,255,255,.22)}
.oap-av img{width:100%;height:100%;object-fit:cover}
.oap-head h2{margin:12px 0 4px;font-size:21px}
.oap-bio{margin:0;font-size:14px;color:var(--text-muted);line-height:1.5}
.oap-badges{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:14px 0 4px}
.oap-badge{padding:6px 13px;border-radius:999px;font-size:12px;font-weight:700;
 background:linear-gradient(135deg,rgba(var(--color-primary-soft-rgb),.18),rgba(var(--color-primary-rgb),.10));
 border:1px solid rgba(var(--color-primary-light-rgb),.35);color:var(--primary)}
.oap-badge.muted{background:var(--surface-deep);border-color:transparent;color:var(--text-muted)}
.oap-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 6px}
.oap-stats>div{text-align:center;padding:14px 8px;border-radius:16px;background:var(--surface-deep);
 border:1px solid rgba(148,163,184,.14)}
.oap-stats strong{display:block;font-size:22px;font-weight:800;font-family:var(--font-display);
 font-variant-numeric:tabular-nums}
.oap-stats span{font-size:11px;color:var(--text-muted);font-weight:600}
.oap-note{font-size:11.5px;color:var(--text-muted);text-align:center;line-height:1.5;margin:12px 0 0}

/* Tappable alias + swipe-to-reply in anonymous chat */
.anon-name-btn{background:none;border:none;padding:0;font:inherit;font-weight:700;color:inherit;
 cursor:pointer;text-decoration:underline;text-decoration-color:transparent;
 text-underline-offset:3px;transition:text-decoration-color .16s}
.anon-name-btn:active{text-decoration-color:currentColor}
.anon-chat-bubble{position:relative;will-change:transform;touch-action:pan-y}
.anon-chat-bubble::before{content:"";position:absolute;left:-42px;top:50%;width:30px;height:30px;
 margin-top:-15px;border-radius:50%;opacity:0;transform:scale(.6);
 background:var(--primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 17 4 12 9 7'/%3E%3Cpath d='M20 18v-2a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E") center/16px no-repeat;
 transition:opacity .16s,transform .16s}
.anon-chat-bubble.swipe-armed::before{opacity:1;transform:scale(1)}

/* Smooth, momentum scrolling for chat threads */
/* Momentum scrolling. Do NOT set overscroll-behavior or a fixed height on
   .anon-chat-thread: it is an inline column inside the page scroller, and
   containing it there stopped the whole anonymous page from scrolling. */
.wa-scroll,.wa-messages{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;scroll-behavior:smooth}
.senior-anon-page,.anon-page{-webkit-overflow-scrolling:touch}
@media (prefers-reduced-motion:reduce){
  .wa-scroll,.wa-messages{scroll-behavior:auto}
  .anon-chat-bubble{transition:none!important}
}
/* Reply preview above the anonymous composer */
.anon-reply-chip{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;margin-bottom:6px;
 border-radius:12px;background:var(--surface-deep);border:1px solid rgba(148,163,184,.16)}
.arc-bar{width:3px;align-self:stretch;min-height:30px;border-radius:2px;background:var(--primary);flex-shrink:0}
.arc-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.arc-text b{font-size:12px;color:var(--primary);font-weight:800}
.arc-text i{font-size:12px;font-style:normal;color:var(--text-muted);white-space:nowrap;
 overflow:hidden;text-overflow:ellipsis}
.arc-x{width:26px;height:26px;flex-shrink:0;border:none;border-radius:8px;cursor:pointer;
 background:transparent;color:var(--text-muted);font-size:18px;line-height:1}




/* ==========================================================================
   STUDENT HUB v3.2 — UX pass: floating unread badges, wallpaper readability,
   chat font scale, media-editor host. Additive only; no existing rule edited.
   ========================================================================== */

/* --- Floating unread badges (WhatsApp style) ---------------------------- */
/* The hub cards render as .card-3d, which carries `content-visibility:auto`.
   That implies paint containment, so anything positioned outside the border
   box is CLIPPED — this is why the badges stayed inside the card. Both the
   containment and the intrinsic-size hint have to be lifted on cards that
   actually hold a badge, and the badge itself must escape the padding box. */
.senior-chat-hub-page .page > .col > .card-3d,
.card-3d:has(> .badge-count),
.card-3d:has(> .anon-card-badge) {
  content-visibility: visible !important;
  contain: none !important;
  contain-intrinsic-size: none !important;
  overflow: visible !important;
  position: relative;
}

.badge-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 11px;
  background: linear-gradient(135deg, #FB923C, #EF4444);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  border: 2.5px solid var(--bg, #fff);
  box-shadow: 0 3px 10px rgba(239, 68, 68, .45);
  z-index: 3;
  animation: badgePop .34s cubic-bezier(.34, 1.56, .64, 1);
  will-change: transform;
}
.anon-card-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: 11px;
  background: linear-gradient(135deg, #FB923C, #EF4444);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2.5px solid var(--bg, #fff);
  box-shadow: 0 3px 10px rgba(239, 68, 68, .45);
  z-index: 3;
  animation: badgePop .34s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes badgePop {
  0%   { transform: scale(0);   opacity: 0 }
  60%  { transform: scale(1.18); opacity: 1 }
  100% { transform: scale(1) }
}
/* Gentle attention pulse, GPU-only so it stays at 60fps */
.badge-count, .anon-card-badge { animation-fill-mode: both; }

/* --- Chat font size (Settings > Appearance) ----------------------------- */
html[data-chat-font] .wa-bubble,
html[data-chat-font] .anon-chat-bubble {
  font-size: calc(15px * var(--chat-font-scale, 1)) !important;
  line-height: 1.4;
}
/* Conversation list, composer, notifications, news + notes body copy all
   follow the same scale so the setting is genuinely app-wide. */
html[data-chat-font] .wa-reply-body,
html[data-chat-font] .list-item .li-sub,
html[data-chat-font] .conv-preview,
html[data-chat-font] .anon-comment {
  font-size: calc(13.5px * var(--chat-font-scale, 1)) !important;
}
html[data-chat-font] .ux-chat-textarea,
html[data-chat-font] .anon-chat-composer textarea,
html[data-chat-font] .senior-chat-room textarea.input-3d {
  font-size: calc(15px * var(--chat-font-scale, 1)) !important;
  line-height: calc(21px * var(--chat-font-scale, 1)) !important;
}
html[data-chat-font] .ocs-t .n,
html[data-chat-font] .ocs-item .t .n {
  font-size: calc(14.8px * var(--chat-font-scale, 1)) !important;
}
html[data-chat-font] .news-body,
html[data-chat-font] .news-detail-body,
html[data-chat-font] .note-body,
html[data-chat-font] .notif-body {
  font-size: calc(15px * var(--chat-font-scale, 1)) !important;
  line-height: 1.55;
}
/* Accessibility: never let the largest step clip a bubble. */
html[data-chat-font="140"] .wa-bubble { max-width: 92%; }

/* --- Wallpaper readability --------------------------------------------- */
/* When a wallpaper is on, bubbles get a touch more contrast and a soft
   shadow so text stays legible over any photo. */
html[data-chat-wall] .wa-bubble {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22), 0 2px 10px rgba(0, 0, 0, .12);
  backdrop-filter: saturate(1.05);
}
html[data-chat-wall][data-chat-wall-tone="light"] .wa-bubble.theirs {
  background: rgba(255, 255, 255, .95);
  color: #10151f;
}
html[data-chat-wall] .wa-date-chip,
html[data-chat-wall] .unread-divider span {
  background: rgba(10, 14, 22, .58);
  color: #fff;
  border-radius: 999px;
  padding: 3px 11px;
  backdrop-filter: blur(6px);
}
html[data-chat-wall] .top-bar {
  background: rgba(10, 14, 22, .72);
  backdrop-filter: blur(16px) saturate(1.2);
}

/* --- Upload progress on optimistic bubbles ------------------------------ */
.wa-upload-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .28);
  overflow: hidden;
  margin-top: 5px;
}
.wa-upload-bar > i {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: 2px;
  transition: width .22s cubic-bezier(.22, 1, .36, 1);
}

/* --- Motion safety ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .badge-count, .anon-card-badge, .ocs, .owp-sheet, .ome { animation: none !important }
  .ocs-sec, .ocs-item, .owp-bub { animation: none !important }
}

/* ==========================================================================
   STUDENT HUB v3.3 — senior design pass.
   Refinement only: consistent radii, calmer shadows, real press feedback,
   WhatsApp-style composer + reply gesture + hold menu. No feature changes.
   ========================================================================== */

:root {
  --oa-r-sm: 12px;
  --oa-r-md: 16px;
  --oa-r-lg: 20px;
  --oa-r-xl: 26px;
  --oa-r-pill: 999px;
  /* Layered, low-opacity shadows read as depth instead of grey smudge. */
  --oa-sh-1: 0 1px 2px rgba(11, 18, 32, .06), 0 1px 3px rgba(11, 18, 32, .04);
  --oa-sh-2: 0 2px 4px rgba(11, 18, 32, .06), 0 6px 16px rgba(11, 18, 32, .07);
  --oa-sh-3: 0 8px 20px rgba(11, 18, 32, .10), 0 20px 44px rgba(11, 18, 32, .10);
  --oa-blue: var(--color-primary);
  --oa-blue-600: var(--color-primary-dark);
  --oa-ease: cubic-bezier(.22, 1, .36, 1);
  --oa-fast: .16s;
  --oa-med: .24s;
}

/* --- Consistent radii --------------------------------------------------- */
.card-3d, .list-item, .panel, .stat-card, .notif-prefs,
.admin-main .card-3d, .admin-main .admin-card, .admin-main section {
  border-radius: var(--oa-r-lg) !important;
}
.modal-3d { border-radius: var(--oa-r-xl) var(--oa-r-xl) 0 0 !important; }
.input-3d, .field-group input, .field-group textarea, .field-group select {
  border-radius: var(--oa-r-md) !important;
}
.btn-primary-3d, .btn-accent-3d, .link-btn { border-radius: var(--oa-r-md); }

/* --- Calmer shadows ----------------------------------------------------- */
.card-3d { box-shadow: var(--oa-sh-2) !important; }
.card-3d:hover { box-shadow: var(--oa-sh-3) !important; }
.modal-3d { box-shadow: 0 -8px 44px rgba(4, 8, 18, .34) !important; }

/* --- Universal press feedback ------------------------------------------- */
/* Pointer-driven so it fires on touch immediately, unlike :hover. */
button, .icon-btn, .list-item, .card-3d[role="button"], .ocs-row, .owp-i, .ome-tool {
  transition: transform var(--oa-fast) var(--oa-ease),
              box-shadow var(--oa-fast) var(--oa-ease),
              background-color var(--oa-fast) var(--oa-ease),
              opacity var(--oa-fast) var(--oa-ease);
}
.oa-pressed { transform: scale(.965) !important; }
button.oa-pressed, .icon-btn.oa-pressed { filter: brightness(.94); }
.card-3d.oa-pressed, .list-item.oa-pressed {
  transform: scale(.99) !important;
  box-shadow: var(--oa-sh-1) !important;
}
button:focus-visible, .icon-btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--oa-blue);
  outline-offset: 2px;
  border-radius: var(--oa-r-sm);
}
/* Every tappable control clears the 44px accessibility target. */
.icon-btn { min-width: 42px; min-height: 42px; }

/* --- Smooth scrolling everywhere ---------------------------------------- */
.page, .grow, .h-scroll, .admin-tabstrip, .ome-tools, .ome-chips, .owp-tabs, .owp-grid {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.page::-webkit-scrollbar, .grow::-webkit-scrollbar,
.h-scroll::-webkit-scrollbar, .owp-grid::-webkit-scrollbar { width: 0; height: 0; }
.h-scroll, .admin-tabstrip, .ome-tools, .ome-chips, .owp-tabs {
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.h-scroll > * { scroll-snap-align: start; }

/* --- Chat composer: grows upward like WhatsApp -------------------------- */
.senior-chat-room .page > .row.mt-12:has(.ux-chat-textarea),
.anon-chat-composer {
  align-items: flex-end !important;
  gap: 8px;
  padding-top: 10px !important;
}
.ux-chat-textarea,
.senior-chat-room > .row:last-of-type textarea.input-3d,
.anon-chat-composer textarea {
  min-height: 50px !important;
  max-height: 152px !important;
  line-height: 22px !important;
  padding: 14px 17px !important;
  border-radius: var(--oa-r-xl) !important;
  resize: none !important;
  overflow-y: hidden;
  transition: height var(--oa-fast) var(--oa-ease),
              box-shadow var(--oa-fast) var(--oa-ease);
}
.ux-chat-textarea:focus { box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), .16) !important; }
/* Send button stays pinned to the bottom as the box grows. */
.senior-chat-room .page > .row.mt-12:has(.ux-chat-textarea) > button,
.senior-chat-room .page > .row.mt-12:has(.ux-chat-textarea) > .icon-btn {
  align-self: flex-end;
  margin-bottom: 2px;
  flex: none;
}

/* --- Swipe-to-reply cue -------------------------------------------------- */
.wa-msg { position: relative; will-change: transform; }
.oa-reply-cue {
  position: absolute;
  left: -46px;
  top: 50%;
  transform: translateY(-50%) scale(.55);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(120, 130, 150, .2);
  color: var(--text-muted, #64748b);
  opacity: 0;
  pointer-events: none;
  transition: background var(--oa-fast) var(--oa-ease), color var(--oa-fast) var(--oa-ease);
}
.oa-reply-cue.is-ready {
  background: var(--oa-blue);
  color: #fff;
  box-shadow: 0 3px 12px rgba(var(--color-primary-rgb), .45);
}

/* --- Hold menu: premium bottom sheet ------------------------------------ */
.modal-overlay {
  background: rgba(4, 8, 18, .55) !important;
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  animation: oaFade var(--oa-med) var(--oa-ease);
}
@keyframes oaFade { from { opacity: 0 } to { opacity: 1 } }
.modal-3d {
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  border: 1px solid rgba(255, 255, 255, .10);
  will-change: transform;
}
.oa-sheet-in { animation: oaSheet .28s var(--oa-ease); }
@keyframes oaSheet {
  from { transform: translate3d(0, 22px, 0); opacity: .55 }
  to   { transform: none; opacity: 1 }
}
.modal-handle {
  width: 40px; height: 4px; border-radius: 2px;
  background: rgba(140, 150, 170, .45);
  margin: 6px auto 12px !important;
  cursor: grab;
}
/* Action rows inside the sheet */
.modal-3d .row.between.p-12 {
  border-radius: var(--oa-r-md) !important;
  padding: 13px 14px !important;
  margin-bottom: 6px;
  transition: background var(--oa-fast) var(--oa-ease), transform var(--oa-fast) var(--oa-ease);
}
.modal-3d .row.between.p-12:active { transform: scale(.985); }
.modal-3d .row.wrap { gap: 9px !important; padding: 2px 2px 10px; }

/* --- Bubble entrance ----------------------------------------------------- */
.bubble-in { animation: oaBubble .26s var(--oa-ease) backwards; }
@keyframes oaBubble {
  from { opacity: 0; transform: translateY(7px) scale(.985) }
  to   { opacity: 1; transform: none }
}

/* --- Page transitions ---------------------------------------------------- */
.page-enter { animation: oaPage .28s var(--oa-ease); }
@keyframes oaPage {
  from { opacity: 0; transform: translateY(8px) }
  to   { opacity: 1; transform: none }
}

/* --- Typography ---------------------------------------------------------- */
body, .page {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { letter-spacing: -.022em; line-height: 1.22; }
.muted { line-height: 1.45; }

/* --- Trim dead space ----------------------------------------------------- */
.page > :last-child { margin-bottom: 0 !important; }
.col > .card-3d:last-child { margin-bottom: 0; }
.page { padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }

/* --- Skeleton shimmer for perceived speed -------------------------------- */
.oa-skel {
  background: linear-gradient(100deg,
    rgba(140, 150, 170, .10) 30%,
    rgba(140, 150, 170, .20) 50%,
    rgba(140, 150, 170, .10) 70%);
  background-size: 220% 100%;
  animation: oaShim 1.15s ease-in-out infinite;
  border-radius: var(--oa-r-sm);
}
@keyframes oaShim { from { background-position: 180% 0 } to { background-position: -40% 0 } }

@media (prefers-reduced-motion: reduce) {
  .bubble-in, .page-enter, .oa-sheet-in, .modal-overlay, .oa-skel { animation: none !important }
  * { scroll-behavior: auto !important }
}

/* ==========================================================================
   Login feedback — spinner, staged status, actionable errors, retry.
   ========================================================================== */
.login-busy {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  justify-content: center;
}
.login-spin {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .32);
  border-top-color: #fff;
  animation: loginSpin .7s linear infinite;
  flex: none;
}
@keyframes loginSpin { to { transform: rotate(360deg) } }

.login-error {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(239, 68, 68, .1);
  border: 1px solid rgba(239, 68, 68, .3);
  border-radius: var(--oa-r-md, 16px);
  padding: 11px 13px;
  margin-bottom: 12px;
  animation: loginShake .32s cubic-bezier(.36, .07, .19, .97);
}
@keyframes loginShake {
  10%, 90% { transform: translateX(-1px) }
  30%, 70% { transform: translateX(2px) }
  50%      { transform: translateX(-2px) }
}
.login-error-ic {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #EF4444;
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 19px;
  text-align: center;
  flex: none;
  margin-top: 1px;
}
.login-error p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: #EF4444;
  font-weight: 550;
}
.login-retry {
  margin-top: 8px;
  border: none;
  background: #EF4444;
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .16s var(--oa-ease, ease), filter .16s;
}
.login-retry:active { transform: scale(.94); filter: brightness(.92) }

/* ==========================================================================
   Anonymous composer v2 — reply preview above a fixed input row.
   The chip used to sit INSIDE the flex row with width:100%, so it fought the
   textarea for horizontal space and squeezed the input to nothing.
   ========================================================================== */
.anon-chat-composer.anon-composer-v2 {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}
.anon-composer-v2 > .anon-reply-chip {
  width: 100%;
  margin: 0 0 7px !important;
  animation: replyChipIn .22s cubic-bezier(.22, 1, .36, 1);
}
@keyframes replyChipIn {
  from { opacity: 0; transform: translateY(6px); max-height: 0 }
  to   { opacity: 1; transform: none;            max-height: 70px }
}
/* The input row: attachments left, textarea takes all remaining width,
   send button pinned right. Nothing can overlap because each control has an
   explicit flex basis and the textarea is the only flexible child. */
.anon-composer-v2 > .anon-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.anon-composer-v2 .anon-composer-row > .icon-btn,
.anon-composer-v2 .anon-composer-row > label.icon-btn {
  flex: 0 0 38px !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  margin: 0 0 5px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.anon-composer-v2 .anon-composer-row > textarea,
.anon-composer-v2 .anon-composer-row .ux-chat-textarea {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;      /* lets flex actually shrink the box, not the text */
  margin: 0 !important;
  transition: height .14s cubic-bezier(.22, 1, .36, 1);
}
/* Send button always last, always the same size, never overlapped. */
.anon-composer-v2 .anon-composer-row > button:last-child,
.anon-composer-v2 .anon-composer-row > .btn-primary-3d {
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .16s cubic-bezier(.22, 1, .36, 1), opacity .16s;
}
.anon-composer-v2 .anon-composer-row > button:last-child:active { transform: scale(.9) }
.anon-composer-v2 .anon-composer-row > button:last-child:disabled { opacity: .45 }

/* Keyboard: let the sticky composer ride the visual viewport smoothly. */
.anon-chat-composer,
.senior-chat-room .page > .row.mt-12:has(.ux-chat-textarea) {
  transition: transform .2s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

/* ==========================================================================
   v3.3 — scroll performance and app-wide motion.
   ========================================================================== */

/* --- Chat scrolling ------------------------------------------------------ */
/* Each bubble is an independent layout/paint island, so scrolling a long
   thread never forces the browser to re-lay-out the whole list. */
.wa-msg {
  contain: layout paint style;
  content-visibility: auto;
  contain-intrinsic-size: auto 62px;
}
/* The bubble that is mid-swipe must not be clipped by containment. */
.wa-msg:has(.oa-reply-cue) { contain: layout style; }

.senior-chat-room .grow,
.anon-chat-thread {
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: auto;          /* instant during momentum, smooth on demand */
}
/* Media inside bubbles reserves its box before the file arrives, so the
   thread never jumps as images decode. */
.wa-media img,
.wa-media video,
.anon-image {
  content-visibility: auto;
  background: rgba(140, 150, 170, .12);
}

/* --- Motion system ------------------------------------------------------- */
/* One easing curve and three durations used everywhere, so nothing pops. */
:root {
  --oa-in:  cubic-bezier(.22, 1, .36, 1);   /* decelerate — entrances */
  --oa-out: cubic-bezier(.4, 0, 1, 1);      /* accelerate — exits */
  --oa-t1: .16s;
  --oa-t2: .24s;
  --oa-t3: .32s;
}

/* Reaction popup */
.wa-react-pop {
  animation: oaPop .2s var(--oa-in);
  transform-origin: bottom center;
}
@keyframes oaPop {
  from { opacity: 0; transform: scale(.86) translateY(6px) }
  to   { opacity: 1; transform: none }
}
.wa-react-pop > * { animation: oaPopItem .22s var(--oa-in) backwards }
.wa-react-pop > *:nth-child(1) { animation-delay: .02s }
.wa-react-pop > *:nth-child(2) { animation-delay: .04s }
.wa-react-pop > *:nth-child(3) { animation-delay: .06s }
.wa-react-pop > *:nth-child(4) { animation-delay: .08s }
.wa-react-pop > *:nth-child(5) { animation-delay: .10s }
.wa-react-pop > *:nth-child(6) { animation-delay: .12s }
@keyframes oaPopItem {
  from { opacity: 0; transform: scale(.5) }
  to   { opacity: 1; transform: none }
}

/* Media viewer */
.wa-viewer { animation: oaFadeIn var(--oa-t2) var(--oa-in) }
.wa-viewer img, .wa-viewer video { animation: oaZoomIn var(--oa-t3) var(--oa-in) }
@keyframes oaFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes oaZoomIn {
  from { opacity: 0; transform: scale(.92) }
  to   { opacity: 1; transform: none }
}

/* Lists reveal in sequence rather than all at once */
.page .col > .card-3d,
.list-item {
  animation: oaRise var(--oa-t3) var(--oa-in) backwards;
}
.page .col > .card-3d:nth-child(1) { animation-delay: .01s }
.page .col > .card-3d:nth-child(2) { animation-delay: .04s }
.page .col > .card-3d:nth-child(3) { animation-delay: .07s }
.page .col > .card-3d:nth-child(4) { animation-delay: .10s }
.page .col > .card-3d:nth-child(5) { animation-delay: .13s }
.page .col > .card-3d:nth-child(n+6) { animation-delay: .15s }
@keyframes oaRise {
  from { opacity: 0; transform: translateY(9px) }
  to   { opacity: 1; transform: none }
}

/* Profile / avatar */
.wa-h-avatar, .ocs-av, .anon-avatar {
  transition: transform var(--oa-t1) var(--oa-in);
}
.wa-h-avatar:active, .anon-avatar:active { transform: scale(.92) }

/* Bottom nav */
.bottom-nav a, .bottom-nav button, nav.bottom a {
  transition: color var(--oa-t1) var(--oa-in), transform var(--oa-t1) var(--oa-in);
}
.bottom-nav a:active, nav.bottom a:active { transform: scale(.9) }

/* Skeletons while data loads, instead of blank space */
.route-skeleton-card, .route-skeleton-hero, .route-skeleton-header {
  background: linear-gradient(100deg,
    rgba(140,150,170,.10) 30%, rgba(140,150,170,.20) 50%, rgba(140,150,170,.10) 70%);
  background-size: 220% 100%;
  animation: oaShimmer 1.15s ease-in-out infinite;
  border-radius: var(--oa-r-lg, 20px);
}
@keyframes oaShimmer {
  from { background-position: 180% 0 } to { background-position: -40% 0 }
}

@media (prefers-reduced-motion: reduce) {
  .wa-react-pop, .wa-react-pop > *, .wa-viewer, .wa-viewer img, .wa-viewer video,
  .page .col > .card-3d, .list-item, .route-skeleton-card,
  .route-skeleton-hero, .route-skeleton-header { animation: none !important }
}

/* ==========================================================================
   Message delivery status + keyboard-aware composer.
   ========================================================================== */
.wa-ticks { display: inline-flex; align-items: center; margin-left: 4px; vertical-align: middle }
.wa-ticks.sent    { opacity: .62 }
.wa-ticks.seen    { color: var(--color-primary-light); opacity: 1 }
.wa-ticks.failed  {
  color: #FCA5A5; font-weight: 800; font-size: 12px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid currentColor; justify-content: center; line-height: 1;
}
.wa-tick-spin {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid currentColor; border-top-color: transparent;
  opacity: .7; animation: waTick .7s linear infinite; display: block;
}
@keyframes waTick { to { transform: rotate(360deg) } }
.wa-msg.mine .wa-bubble { transition: opacity .18s var(--oa-in, ease) }

/* --- Keyboard-aware composer --------------------------------------------
   The visual viewport shrinks when the on-screen keyboard opens. oa-boot sets
   --oa-kb to the overlap in px; the sticky composer lifts by exactly that, and
   the thread gets matching bottom padding so the newest message stays visible.
*/
.senior-chat-room,
.senior-anon-room { --oa-kb: 0px }

.senior-chat-room .page > .row.mt-12:has(.ux-chat-textarea),
.anon-chat-composer {
  transform: translateY(calc(-1 * var(--oa-kb, 0px)));
  transition: transform .18s cubic-bezier(.22, 1, .36, 1);
}
.senior-chat-room .grow,
.anon-chat-thread {
  padding-bottom: calc(var(--oa-kb, 0px) + 8px);
  transition: padding-bottom .18s cubic-bezier(.22, 1, .36, 1);
  scroll-padding-bottom: calc(var(--oa-kb, 0px) + 16px);
}
@media (prefers-reduced-motion: reduce) {
  .senior-chat-room .page > .row.mt-12:has(.ux-chat-textarea),
  .anon-chat-composer, .senior-chat-room .grow, .anon-chat-thread { transition: none }
  .wa-tick-spin { animation: none }
}

/* --- Delivery ticks: sent / delivered / seen ----------------------------- */
.wa-ticks .wa-tick2 { margin-left: -7px }   /* overlap into a double tick */
.wa-ticks.sent      { opacity: .62 }
.wa-ticks.delivered { opacity: .72 }
.wa-ticks.seen      { color: var(--color-primary-light); opacity: 1 }
.wa-ticks.seen svg  { filter: drop-shadow(0 0 2px rgba(56, 189, 248, .35)) }
.wa-ticks svg { transition: color .18s var(--oa-in, ease), opacity .18s var(--oa-in, ease) }

/* ---- Registration page polish (v3.2) ---- */
.pw-meter{margin:-6px 0 12px}
.pw-meter-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.pw-meter-track{flex:1;height:6px;border-radius:99px;background:var(--surface-raised,#e5e7eb);overflow:hidden}
.pw-meter-fill{height:100%;border-radius:99px;transition:width .25s ease,background .25s ease}
.pw-meter-label{font-size:12px;font-weight:700;min-width:64px;text-align:right}
.pw-reqs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.pw-reqs li{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-muted,#6b7280);transition:color .2s ease}
.pw-reqs li.ok{color:#16A34A}
.pw-tick{font-size:12px;width:12px;display:inline-block;text-align:center}
@media (max-width:360px){.pw-reqs{grid-template-columns:1fr}}

.auth-error{background:rgba(239,68,68,.10);border:1px solid rgba(239,68,68,.35);
  border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.45;margin-top:12px}

.btn-busy{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-spin{width:14px;height:14px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:btn-spin-rot .7s linear infinite}
@keyframes btn-spin-rot{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn-spin{animation-duration:2s}}

/* ---- Notes search stability (v3.2.1) ------------------------------------
   Results stay mounted while a new query is in flight; we only dim them.
   Nothing unmounts, so there is no flicker and no layout jump.            */
.nf-results-list{transition:opacity .18s ease}
.nf-results-list[data-refreshing]{opacity:1}
.note-fast-results{min-height:60px}
.note-fast-results-head{contain:layout}

/* ---- Scrolling: momentum + no dead zones -------------------------------- */
.modal-3d,
.ocs-body,
.anon-chat-thread,
.senior-chat-room .wa-thread{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scroll-behavior:auto;
}
/* touch-action must allow BOTH directions. pan-y alone still lets the browser
   claim the gesture for the page when a child is at its scroll edge. */
.modal-3d{touch-action:pan-y;overscroll-behavior-y:contain}
.oa-sheet-in{will-change:transform}

/* ---- Emoji / mention sheets sit above the keyboard ---------------------- */
.oaemo-ov{padding-bottom:var(--oa-kb,0px)}

/* ---- Notes search: stop result cards re-animating (v3.2.2) ---------------
   The results list is `.page > … > .col.nf-results-list > .card-3d`, so the
   global list-reveal rule `.page .col > .card-3d { animation: oaRise … }`
   matched every result card. React re-renders the list while you type, and
   each render restarts that animation WITH its staggered animation-delay —
   cards fade from 0 opacity again and again. That is the glitching.

   These rules come last in the file and use !important, so they beat every
   earlier animation rule regardless of source order.                        */
.note-fast-results .card-3d,
.note-fast-results .list-item,
.nf-results-list > .card-3d,
.nf-results-list > .list-item,
.page .col.nf-results-list > .card-3d {
  animation: none !important;
  animation-name: none !important;
  animation-delay: 0s !important;
  animation-duration: 0s !important;
  opacity: 1 !important;
  transform: none !important;
}
/* Belt and braces: neutralise the nth-child stagger inside results only. */
.page .col.nf-results-list > .card-3d:nth-child(1),
.page .col.nf-results-list > .card-3d:nth-child(2),
.page .col.nf-results-list > .card-3d:nth-child(3),
.page .col.nf-results-list > .card-3d:nth-child(4),
.page .col.nf-results-list > .card-3d:nth-child(5),
.page .col.nf-results-list > .card-3d:nth-child(n+6) {
  animation-delay: 0s !important;
  animation: none !important;
}
/* The container itself must not fade either. */
.note-fast-results { animation: none !important; }
.nf-results-list { animation: none !important; }

/* ---- Notes search: kill the legacy "pending" blackout (v3.2.3) ------------
   app-experience-v60.js used to add `.ux-note-search-pending` on every
   keystroke. These rules then set `visibility:hidden !important` on the whole
   result list and painted a "Searching notes…" overlay over it, cleared only by
   a later 80 ms timer. Typing therefore hid and re-showed the results
   repeatedly — the reported glitching.

   The script no longer adds the class, but a device running a cached copy of
   the old script still might, so neutralise the rules here as well. React
   already renders a proper loading state and keeps previous results mounted. */
.ux-note-search-pending .note-fast-results > .col,
.ux-note-search-pending .note-fast-results > .empty-state,
.ux-note-search-pending .note-fast-loading,
.ux-note-search-pending .nf-results-list {
  visibility: visible !important;
  opacity: 1 !important;
}
.ux-note-search-pending .note-fast-results::after {
  content: none !important;
  display: none !important;
}
/* No cross-fade on the list either: a transition restarting mid-type reads as
   a flash. Dimming while refreshing is handled by [data-refreshing]. */
.note-fast-results > .col {
  transition: none !important;
  opacity: 1;
}
/* dimming removed: it pulsed on every keystroke and read as flicker */
.nf-results-list[data-refreshing] { opacity: 1; }


/* ---- Notes search: absolutely no opacity animation on results (v3.2.2) ----
   Verified in a real mobile browser: while typing, the list pulsed
   1 -> .55 -> 1 -> .55 because `searchLoading` toggles per keystroke. Cards
   never unmount, so any fade is pure noise. Pin it fully opaque.            */
.nf-results-list,
.nf-results-list[data-refreshing],
.note-fast-results > .col {
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}


/* ==== MERGED from f75b797 (parallel work) ==== */


/* NOTE SEARCH GLITCH FIXES v3.2.2 - prevent flicker, animation restart, overlay */
.note-fast-results,
.nf-results-list { animation: none !important; }
.note-fast-results .card-3d,
.nf-results-list .card-3d { animation: none !important; transition: none !important; }
/* REMOVED in merge: .card-3d { opacity: 0.85 } on [data-refreshing].
   Measured on a Pixel-7 viewport: any opacity change while typing reads as
   flicker (the list pulsed 1 -> .55 -> 1 with the old .55 value). The cards
   never unmount, so no dimming is needed. See tests/qa-notes.mjs. */
.ux-note-search-pending .note-fast-results,
.ux-note-search-pending .nf-results-list { visibility: visible !important; opacity: 1 !important; }
.ux-note-search-pending .note-fast-results::after,
.ux-note-search-pending .nf-results-list::after { content: none !important; display: none !important; }


/* === PROFESSIONAL MODERN ANONYMOUS CHAT v3.2.2 === */
.anon-room, .anon-chat-container, [class*="AnonymousChatRoom"] {
  background: linear-gradient(180deg, #0f172a 0%, #1e2937 100%);
  color: #e2e8f0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.anon-header {
  background: rgba(15,23,42,.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid #334155;
  padding: 12px 16px;
  position: sticky; top: 0; z-index: 10;
}
.anon-header h1, .anon-header .title { font-weight: 700; font-size: 19px; letter-spacing: -.3px; }
.anon-message, .anon-msg, [class*="message-"] {
  background: #1e2937;
  border: 1px solid #334155;
  border-radius: 16px;
  padding: 12px 16px;
  margin: 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  max-width: 82%;
}
.anon-message.self, .anon-msg.own {
  background: var(--color-primary-deep);
  border-color: var(--color-primary-soft);
  margin-left: auto;
  color: #fff;
}
.anon-alias {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 4px;
  letter-spacing: .3px;
}
.anon-input, .anon-composer textarea, .anon-composer input {
  background: #0f172a;
  border: 1px solid #475569;
  color: #e2e8f0;
  border-radius: 999px;
  padding: 12px 18px;
  font-size: 15px;
}
.anon-input:focus, .anon-composer textarea:focus {
  border-color: var(--color-primary-soft);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-soft-rgb),.15);
  outline: none;
}
.anon-send-btn, .anon-btn-primary {
  background: var(--color-primary-soft);
  color: white;
  border-radius: 999px;
  font-weight: 600;
  padding: 10px 22px;
  transition: transform .1s ease, box-shadow .1s;
}
.anon-send-btn:active { transform: scale(.96); }
.anon-list-item {
  border-radius: 12px;
  background: #1e2937;
  border: 1px solid #334155;
  transition: transform .1s, background .1s;
}
.anon-list-item:hover { background: #334155; transform: translateY(-1px); }
.anon-empty { color: #64748b; text-align: center; padding: 40px 20px; }


/* ===== Study Materials: scope tabs + Jumia-style filter bar & sheet ===== */
.oa-mat-tabs{display:flex;gap:0;margin:12px 0 10px;background:var(--card,#161d2b);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:4px}
.oa-mat-tab{flex:1 1 0;min-height:42px;border:0;background:transparent;color:var(--muted,#93a0b4);font-size:14px;font-weight:700;border-radius:9px;cursor:pointer;transition:background .18s,color .18s}
.oa-mat-tab.active{background:var(--primary,#2f6bff);color:#fff}
.oa-filter-bar{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 8px}
.oa-filter-bar::-webkit-scrollbar{display:none}
.oa-chip{flex:0 0 auto;min-height:40px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:var(--card,#161d2b);color:var(--text,#e8edf6);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap}
.oa-chip.on{border-color:var(--primary,#2f6bff);color:var(--primary,#2f6bff)}
.oa-chip.primary{border-color:var(--primary,#2f6bff);color:var(--primary,#2f6bff);font-weight:700}
.oa-chip-caret{font-size:15px;line-height:1}
.oa-sheet-wrap{position:fixed;inset:0;z-index:1200}
.oa-sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px)}
.oa-sheet{position:absolute;left:0;right:0;bottom:0;max-height:85vh;display:flex;flex-direction:column;background:var(--bg-elev,#111827);border-top-left-radius:18px;border-top-right-radius:18px;border-top:1px solid rgba(255,255,255,.1);animation:oaSheetUp .26s cubic-bezier(.4,0,.2,1)}
@keyframes oaSheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.oa-sheet-grip{width:44px;height:4px;border-radius:3px;background:rgba(255,255,255,.22);margin:10px auto 2px}
.oa-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.oa-sheet-head h3{margin:0;font-size:17px;font-weight:800}
.oa-sheet-x{border:0;background:transparent;color:var(--muted,#93a0b4);font-size:26px;line-height:1;padding:0 4px;cursor:pointer}
.oa-sheet-body{padding:16px 18px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;display:flex;flex-direction:column;gap:16px}
.oa-fs{display:flex;flex-direction:column;gap:7px}
.oa-fs-label{font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--muted,#93a0b4);text-transform:uppercase}
.oa-fs select{width:100%}
.oa-sheet-foot{display:flex;gap:10px;padding:12px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.08);background:var(--bg-elev,#111827)}
.oa-sheet-reset{flex:0 0 34%;min-height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:transparent;color:var(--text,#e8edf6);font-weight:700;font-size:14.5px;cursor:pointer}
.oa-sheet-apply{flex:1 1 auto;min-height:48px;border-radius:12px;border:0;background:var(--primary,#2f6bff);color:#fff;font-weight:800;font-size:15px;cursor:pointer}

/* ===== Saved: collections ===== */
.oa-col-bar{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 12px}
.oa-col-bar::-webkit-scrollbar{display:none}
.oa-col-chip{flex:0 0 auto;min-height:38px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:var(--card,#161d2b);color:var(--text,#e8edf6);font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer}
.oa-col-chip.on{border-color:var(--primary,#2f6bff);color:#fff;background:var(--primary,#2f6bff)}
.oa-col-chip.add{border-style:dashed;color:var(--primary,#2f6bff);border-color:var(--primary,#2f6bff);background:transparent}
.oa-col-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-4px 0 12px}
.oa-col-del{border:0;background:transparent;color:var(--danger,#ff6b6b);font-size:12.5px;font-weight:700;cursor:pointer;padding:4px 2px}
.oa-col-del:disabled{opacity:.5}
.oa-addto{margin-top:10px;width:100%;min-height:38px;border-radius:9px;border:1px dashed rgba(255,255,255,.18);background:transparent;color:var(--muted,#93a0b4);font-size:12.5px;font-weight:700;cursor:pointer}
.oa-addto:active{background:rgba(255,255,255,.04)}
.oa-pick{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:46px;padding:0 14px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:var(--card,#161d2b);color:var(--text,#e8edf6);font-size:14px;font-weight:600;cursor:pointer}
.oa-pick.on{border-color:var(--primary,#2f6bff);color:var(--primary,#2f6bff)}
.oa-pick-mark{font-size:15px;font-weight:800}

/* ============================================================
   Anonymous chat — modern messenger redesign (2026-08-04)
   Goal: real chat feel. Bubbles, not cards. Actions on demand.
   ============================================================ */

/* --- thread: tighter, grouped, room for the composer --- */
.anon-chat-thread{gap:2px!important;padding:6px 2px 120px!important}

/* --- bubbles --- */
.anon-chat-thread .anon-chat-bubble,.anon-chat-bubble{
  max-width:82%!important;
  padding:8px 12px 7px!important;
  border-radius:16px!important;
  box-shadow:0 1px 2px rgba(15,23,42,.16)!important;
  border:none!important;
  margin-bottom:2px;
}
.anon-chat-bubble.theirs{
  background:var(--card,#1b2434)!important;
  border-bottom-left-radius:5px!important;
}
.anon-chat-bubble.mine{
  background:linear-gradient(145deg,var(--color-primary),var(--color-primary-dark))!important;
  color:#fff!important;
  border-bottom-right-radius:5px!important;
}
.anon-chat-bubble.mine .u-sub,
.anon-chat-bubble.mine .muted{color:rgba(255,255,255,.72)!important}

/* alias line: small, quiet, colour-coded */
.anon-chat-bubble .anon-alias{
  font-size:12.5px!important;font-weight:700!important;
  margin-bottom:1px;letter-spacing:.01em;
}
.anon-chat-bubble.mine .anon-alias{display:none}   /* you know who you are */

/* --- actions & reactions: hidden until the bubble is tapped --- */
.anon-chat-thread .anon-chat-bubble .anon-actions{
  max-height:0;opacity:0;overflow:hidden;
  margin-top:0!important;padding-top:0!important;border-top:none!important;
  transition:max-height .18s ease,opacity .16s ease,margin-top .18s ease,padding-top .18s ease;
  pointer-events:none;
}
.anon-chat-thread .anon-chat-bubble.oa-open .anon-actions{
  max-height:120px;opacity:1;pointer-events:auto;
  margin-top:8px!important;padding-top:7px!important;
  border-top:1px solid rgba(148,163,184,.18)!important;
}
.anon-chat-bubble .anon-action{
  padding:4px 9px!important;font-size:12px!important;
  background:transparent!important;border-color:rgba(148,163,184,.22)!important;
}
.anon-chat-bubble.mine .anon-action{
  color:#fff!important;border-color:rgba(255,255,255,.28)!important;
}
.anon-chat-bubble .anon-react{
  padding:3px 8px!important;font-size:13px!important;
  background:transparent!important;border-color:rgba(148,163,184,.22)!important;
}
.anon-chat-bubble.mine .anon-react{border-color:rgba(255,255,255,.28)!important}

/* reactions that already have a count stay visible — they are content */
.anon-chat-bubble .anon-react.has-count{
  display:inline-flex!important;
}

/* --- timestamp: inline and subtle --- */
.anon-chat-bubble .u-sub{font-size:11px!important;opacity:.6}

/* --- status bar --- */
.anon-chat-status{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 12px;margin:6px 0 8px;
  border-radius:999px;background:var(--card,#161d2b);
  border:1px solid rgba(148,163,184,.14);
  font-size:12.5px;font-weight:600;color:var(--muted,#93a0b4);
}
.anon-chat-status .typing{color:var(--primary,#2f6bff);font-weight:700}

/* --- pinned --- */
.anon-pinned-message{
  border-left:3px solid var(--primary,#2f6bff);
  background:rgba(47,107,255,.08);
  border-radius:10px;padding:8px 12px;margin-bottom:8px;
  font-size:13px;
}

/* --- composer --- */
.anon-chat-composer{
  border-radius:26px!important;
  padding:6px 6px 6px 14px!important;
  box-shadow:0 6px 24px rgba(15,23,42,.28)!important;
  border:1px solid rgba(148,163,184,.16)!important;
}

/* --- privacy reassurance strip --- */
.anon-privacy-note{
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;margin:0 0 10px;
  border-radius:12px;
  background:rgba(22,163,74,.10);
  border:1px solid rgba(22,163,74,.28);
  color:#4ade80;font-size:12.5px;font-weight:600;line-height:1.35;
}
.anon-privacy-note b{color:#86efac}

/* ===== Support page ===== */
.sup-glyph{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:14px;letter-spacing:.02em;
}
.sup-open{
  flex:0 0 auto;min-height:38px;padding:0 16px;border-radius:10px;
  border:0;background:var(--primary,#2f6bff);color:#fff;
  font-weight:700;font-size:13.5px;cursor:pointer;
}
.sup-open:active{opacity:.85}
.sup-mini{
  min-height:34px;padding:0 12px;border-radius:9px;
  border:1px solid rgba(148,163,184,.22);background:transparent;
  color:var(--text,#e8edf6);font-size:12.5px;font-weight:700;cursor:pointer;
}
.sup-mini.danger{color:var(--danger,#ff6b6b);border-color:rgba(255,107,107,.32)}
.sup-card{transition:opacity .15s ease}

/* ===== Lost & Found ===== */
.lf-tabs{display:flex;gap:0;margin:2px 0 10px;padding:4px;border-radius:14px;
  background:var(--card,#161d2b);border:1px solid rgba(148,163,184,.12)}
.lf-tab{flex:1 1 0;min-height:46px;border:0;background:transparent;cursor:pointer;
  border-radius:11px;font-size:14.5px;font-weight:800;color:var(--muted,#93a0b4);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .18s ease,color .18s ease}
.lf-tab.lost.active{background:linear-gradient(145deg,#f59e0b,#d97706);color:#fff}
.lf-tab.found.active{background:linear-gradient(145deg,#10b981,#059669);color:#fff}
.lf-count{font-size:11.5px;font-weight:800;padding:1px 7px;border-radius:999px;
  background:rgba(255,255,255,.22)}
.lf-tab:not(.active) .lf-count{background:rgba(148,163,184,.18)}
.lf-hint{font-size:12.5px;margin:0 0 10px;line-height:1.4}
.lf-filters{display:grid;grid-template-columns:1fr 42%;gap:8px;margin-bottom:10px}
.lf-filters .input-3d{min-height:44px}

.lf-card{border-left:3px solid transparent}
.lf-card.resolved{opacity:.62}
.lf-chip{font-size:10.5px;font-weight:900;letter-spacing:.06em;padding:3px 8px;border-radius:6px;color:#fff}
.lf-chip.lost{background:#d97706}
.lf-chip.found{background:#059669}
.lf-chip.done{background:#475569}
.lf-cat{font-size:11.5px;font-weight:700;color:var(--muted,#93a0b4);
  padding:2px 8px;border-radius:6px;border:1px solid rgba(148,163,184,.22)}
.lf-title{font-weight:800;font-size:16px;margin-top:6px;line-height:1.3}
.lf-desc{font-size:13.5px;line-height:1.5;margin:8px 0 0;color:var(--text,#e8edf6)}
.lf-media{width:100%;max-height:230px;object-fit:cover;border-radius:12px;margin-top:10px;display:block;background:#0f172a}
.lf-meta{display:flex;flex-direction:column;gap:3px;margin-top:10px;font-size:12.5px;color:var(--muted,#93a0b4)}
.lf-meta b{color:var(--text,#e8edf6);font-weight:700}

.lf-contact{margin-top:12px;padding-top:10px;border-top:1px solid rgba(148,163,184,.16)}
.lf-contact-head{font-size:11.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted,#93a0b4);margin-bottom:6px}
.lf-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;
  padding:0 18px;border-radius:10px;font-size:13.5px;font-weight:800;
  text-decoration:none;color:#fff}
.lf-btn.wa{background:#25D366}
.lf-btn.call{background:var(--primary,#2f6bff)}
.lf-mini{min-height:34px;padding:0 12px;border-radius:9px;border:1px solid rgba(148,163,184,.22);
  background:transparent;color:var(--text,#e8edf6);font-size:12.5px;font-weight:700;cursor:pointer}
.lf-mini.danger{color:var(--danger,#ff6b6b);border-color:rgba(255,107,107,.3)}

.lf-kind-pick{display:flex;gap:8px;margin-bottom:12px}
.lf-kind{flex:1 1 0;min-height:44px;border-radius:11px;cursor:pointer;font-weight:800;font-size:14px;
  border:1px solid rgba(148,163,184,.22);background:transparent;color:var(--muted,#93a0b4)}
.lf-kind.lost.on{background:linear-gradient(145deg,#f59e0b,#d97706);color:#fff;border-color:transparent}
.lf-kind.found.on{background:linear-gradient(145deg,#10b981,#059669);color:#fff;border-color:transparent}
.lf-sep{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted,#93a0b4);margin:14px 0 8px;padding-top:12px;
  border-top:1px solid rgba(148,163,184,.16)}
.lf-preview{width:100%;max-height:180px;object-fit:cover;border-radius:10px;margin-top:8px}

/* ============================================================
   ANONYMOUS — professional redesign to spec (2026-08-04)
   Tokens: bg #0F172A · surface #1E293B · border #334155
           text #F1F5F9 · muted #CBD5E1 · primary var(--color-primary)
   8px grid · 12px cards · 8px buttons · 48px tap targets
   ============================================================ */

/* ---- page shell ---- */
.senior-anon-room .page{padding-bottom:96px}

/* ---- sticky tab navigation ---- */
.anonymous-main-tabs{
  gap:6px!important;padding:5px!important;border-radius:12px!important;
  background:#1E293B!important;border:1px solid #334155;
  box-shadow:0 2px 8px rgba(15,23,42,.28)!important;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.anonymous-main-tabs::-webkit-scrollbar{display:none}
.anonymous-main-tabs .pill{
  flex:1 1 0;min-height:44px;border-radius:8px!important;
  font-size:14px;font-weight:700;letter-spacing:.01em;
  border:0!important;background:transparent!important;color:#CBD5E1!important;
  transition:background .18s ease,color .18s ease,transform .1s ease;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.anonymous-main-tabs .pill:active{transform:scale(.97)}
.anonymous-main-tabs .pill.active{
  background:var(--color-primary)!important;color:#fff!important;
  box-shadow:0 2px 8px rgba(var(--color-primary-rgb),.35)!important;
}
.anonymous-tab-badge{
  font-size:10.5px;font-weight:800;min-width:18px;padding:1px 5px;
  border-radius:999px;background:#EF4444;color:#fff;line-height:1.5;
}

/* ---- post card ---- */
.anon-post{
  background:#1E293B!important;
  border:1px solid #334155!important;
  border-radius:12px!important;
  padding:0!important;                       /* sections own their padding */
  margin-bottom:16px!important;
  box-shadow:0 1px 3px rgba(0,0,0,.28)!important;
  overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.anon-post:hover{
  border-color:#475569!important;
  box-shadow:0 8px 20px rgba(0,0,0,.34)!important;
  transform:translateY(-1px);
}

/* header row */
.anon-post > .row.between:first-child{
  padding:12px 16px;
  border-bottom:1px solid rgba(51,65,85,.45);
  align-items:center;
}
.anon-post .anon-avatar{width:32px;height:32px;font-size:13px}
.anon-post .u-sub{font-size:12px;color:#CBD5E1;opacity:.85}

/* body — any direct child that is not the header / actions / media / comments */
.anon-post > div:not(.row):not(.anon-actions):not(.anon-comments):not(.anon-image){
  padding:12px 16px!important;margin-top:0!important;
  font-size:15px!important;line-height:1.6;color:#F1F5F9;
}
.anon-post > .muted{padding:0 16px 12px!important;margin-top:0!important}
.anon-post .anon-image{
  margin:0;border-radius:0;max-height:320px;
  border-top:1px solid rgba(51,65,85,.45);
  border-bottom:1px solid rgba(51,65,85,.45);
}

/* action row */
.anon-post .anon-actions{
  margin:0!important;padding:8px 12px!important;
  border-top:1px solid rgba(51,65,85,.45)!important;
  gap:8px!important;flex-wrap:nowrap;
}
.anon-post .anon-action{
  flex:1 1 0;min-height:40px;justify-content:center;
  border-radius:8px!important;padding:0 8px!important;
  font-size:12.5px!important;font-weight:700;
  background:transparent!important;border:0!important;color:#CBD5E1!important;
  transition:background .16s ease,color .16s ease,transform .1s ease;
}
.anon-post .anon-action:hover{background:#334155!important;color:#F1F5F9!important}
.anon-post .anon-action:active{transform:scale(.96)}
.anon-post .anon-action.voted{color:#EF4444!important;font-weight:800}
.anon-post .anon-action:disabled{opacity:.45}

/* comments */
.anon-post .anon-comments{
  background:rgba(15,23,42,.5);
  border-top:1px solid rgba(51,65,85,.45);
  padding:12px 16px!important;margin:0!important;
  max-height:320px;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.anon-comment{
  background:rgba(30,41,59,.55);border:1px solid rgba(51,65,85,.4);
  border-radius:8px;padding:8px 12px;margin-bottom:8px;font-size:13.5px;line-height:1.5;
}

/* ---- empty state ---- */
.senior-anon-room .empty-state,
.senior-anon-room .anon-empty{
  background:#1E293B;border:1px dashed #334155;border-radius:12px;
  padding:40px 24px;text-align:center;color:#CBD5E1;
}

/* ---- FAB ---- */
.senior-anon-room .fab{
  width:56px;height:56px;border-radius:50%;
  background:linear-gradient(145deg,var(--color-primary-soft),var(--color-primary))!important;
  box-shadow:0 12px 24px rgba(var(--color-primary-rgb),.36)!important;
  transition:transform .14s ease,box-shadow .2s ease;
}
.senior-anon-room .fab:active{transform:scale(.94)}

/* ---- respect reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .anon-post,.anon-post .anon-action,.anonymous-main-tabs .pill,.senior-anon-room .fab{
    transition:none!important;
  }
  .anon-post:hover{transform:none}
}

/* ---- anonymous page header (spec §1) ---- */
.anon-hero-head{
  display:flex;align-items:center;gap:12px;
  padding:4px 2px 14px;margin-bottom:4px;
}
.anon-hero-badge{
  width:44px;height:44px;flex:0 0 44px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,var(--color-primary-soft),var(--color-primary));color:#fff;
  box-shadow:0 6px 16px rgba(var(--color-primary-rgb),.32);
}
.anon-hero-title{
  margin:0;font-size:20px;font-weight:700;line-height:1.2;color:#F1F5F9;
}
.anon-hero-sub{
  margin:2px 0 0;font-size:12px;font-weight:500;color:#CBD5E1;opacity:.9;
}

/* ===================== Advertising ===================== */
.ad-slot{margin:0 0 16px}
.ad-slot-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.ad-badge{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#F59E0B;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.35);
  padding:2px 8px;border-radius:999px}
.ad-by{font-size:11px;color:var(--muted,#94A3B8)}
.ad-card{display:block;width:100%;text-align:left;padding:0;overflow:hidden;cursor:pointer;
  background:var(--surface,#1E293B);border:1px solid var(--border,#334155);border-radius:12px;
  transition:transform .18s ease,box-shadow .18s ease}
.ad-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.22)}
.ad-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;background:#0b1220}
.ad-media video.ad-img{object-fit:contain}
.ad-body{padding:12px 16px}
.ad-title{font-size:15px;font-weight:600;color:var(--text,#F1F5F9);line-height:1.35}
.ad-text{margin-top:4px;font-size:13px;color:var(--muted,#CBD5E1);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ad-cta{display:inline-block;margin-top:10px;font-size:13px;font-weight:600;color:var(--color-primary)}
.ad-dots{display:flex;justify-content:center;gap:6px;margin-top:8px}
.ad-dot{width:6px;height:6px;border-radius:50%;background:var(--border,#334155)}
.ad-dot.on{background:var(--color-primary)}

/* ---- admin ---- */
.ads-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.ads-h1{font-size:22px;font-weight:700;margin:0}
.ads-sub{margin:4px 0 0;font-size:13px;color:var(--muted,#94A3B8);max-width:520px}
.ads-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-bottom:20px}
.ads-stat{background:var(--surface,#1E293B);border:1px solid var(--border,#334155);border-radius:12px;padding:14px 16px}
.ads-stat-n{font-size:20px;font-weight:700;color:var(--text,#F1F5F9)}
.ads-stat-l{font-size:12px;color:var(--muted,#94A3B8);margin-top:2px}
.ads-tabs{display:flex;gap:8px;overflow-x:auto;margin-bottom:16px;padding-bottom:4px}
.ads-tab{flex:0 0 auto;min-height:36px;padding:0 14px;border-radius:999px;font-size:13px;cursor:pointer;
  background:transparent;color:var(--muted,#94A3B8);border:1px solid var(--border,#334155)}
.ads-tab.on{background:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:600}
.ads-list{display:grid;gap:12px}
.ads-row{display:flex;gap:14px;padding:14px}
.ads-thumb{width:96px;height:72px;flex:0 0 auto;object-fit:cover;border-radius:8px;background:var(--border,#334155)}
.ads-thumb-empty{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted,#94A3B8)}
.ads-main{flex:1 1 auto;min-width:0}
.ads-row-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ads-title{font-size:15px;font-weight:600}
.ads-pill{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px}
.ads-live{color:#10B981;background:rgba(16,185,129,.12)}
.ads-scheduled{color:var(--color-primary);background:rgba(var(--color-primary-rgb),.12)}
.ads-paused{color:#94A3B8;background:rgba(148,163,184,.14)}
.ads-expired{color:#EF4444;background:rgba(239,68,68,.12)}
.ads-body-text{margin-top:4px;font-size:13px;color:var(--muted,#CBD5E1)}
.ads-meta,.ads-nums{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:12px;color:var(--muted,#94A3B8)}
.ads-warn{color:#F59E0B;font-weight:600}
.ads-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ads-btn{min-height:36px;padding:0 14px;border-radius:8px;font-size:13px;cursor:pointer;
  background:transparent;color:var(--text,#F1F5F9);border:1px solid var(--border,#334155)}
.ads-btn:hover{background:rgba(148,163,184,.10)}
.ads-btn-danger{color:#EF4444;border-color:rgba(239,68,68,.4)}
.ads-form{display:grid;gap:8px}
.ads-lab{font-size:12px;font-weight:600;color:var(--muted,#CBD5E1);margin-top:6px}
.ads-lab-group{font-size:13px;color:var(--text,#F1F5F9);margin-top:0}
.ads-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ads-divider{height:1px;background:var(--border,#334155);margin:14px 0 4px}
.ads-preview{width:100%;max-height:160px;object-fit:cover;border-radius:8px;margin-top:6px}
.ads-check{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;cursor:pointer}
.ads-msg{margin:10px 0 0;font-size:13px;color:#F59E0B}
.ads-form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
@media(max-width:520px){
  .ads-two{grid-template-columns:1fr}
  .ads-row{flex-direction:column}
  .ads-thumb{width:100%;height:130px}
}
@media(prefers-reduced-motion:reduce){
  .ad-card{transition:none}
  .ad-card:hover{transform:none}
}

/* --- ad media: tap to enlarge, only the button opens the link --- */
.ad-media{display:block;width:100%;padding:0;border:0;background:transparent;
  cursor:zoom-in;position:relative;line-height:0}
.ad-media .ad-img{pointer-events:none}
.ad-zoom{position:absolute;right:10px;bottom:10px;width:30px;height:30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#F1F5F9;
  background:rgba(15,23,42,.72);border:1px solid rgba(241,245,249,.28);pointer-events:none}
button.ad-cta{display:inline-block;margin-top:10px;padding:9px 16px;min-height:40px;
  font-size:13px;font-weight:600;color:#fff;background:var(--color-primary);border:0;border-radius:8px;
  cursor:pointer;transition:background .15s ease}
button.ad-cta:hover{background:var(--color-primary-dark)}
.ad-card{cursor:default}
.ad-card:hover{transform:none;box-shadow:none}

/* ============================================================
   UI POLISH PASS — 2026-08-05 (Festus design review)
   ============================================================ */

/* ---------- 1. Default background pattern dim ----------
   Only dim the default doodle pattern. Real wallpapers keep their own opacity. */
html[data-ux-wallpaper="default"]{--ux-wallpaper-opacity:.05}
html[data-theme="dark"][data-ux-wallpaper="default"]{--ux-wallpaper-opacity:.06}

/* A chosen wallpaper must be clearly visible. Readability comes from a scrim
   UNDER the content, not from hiding the picture. */
html:not([data-ux-wallpaper="default"]) body::before{opacity:1!important}
html:not([data-ux-wallpaper="default"]) body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(rgba(15,23,42,.58),rgba(15,23,42,.66))}
html[data-ux-wallpaper-tone="light"]:not([data-ux-wallpaper="default"]) body::after{
  background:linear-gradient(rgba(248,250,252,.62),rgba(248,250,252,.70))}

/* text stays readable on top of a photo */
html:not([data-ux-wallpaper="default"]) .card-3d,
html:not([data-ux-wallpaper="default"]) .panel{
  background:color-mix(in srgb,var(--surface) 90%,transparent)!important;
  backdrop-filter:blur(14px) saturate(130%);
  -webkit-backdrop-filter:blur(14px) saturate(130%)}

/* ---------- 2. Horizontal chip rows never clip ---------- */
.feed-scope-bar .h-scroll,
.lf-cat-row,
.owp-cats{
  display:flex;gap:8px;overflow-x:auto;flex-wrap:nowrap;
  scroll-snap-type:none;-webkit-overflow-scrolling:touch;
  padding:4px 2px 8px;scroll-padding-left:2px;scrollbar-width:none}
.feed-scope-bar .h-scroll::-webkit-scrollbar,
.lf-cat-row::-webkit-scrollbar,
.owp-cats::-webkit-scrollbar{display:none}
.feed-scope-bar .pill,
.lf-cat-row .pill,
.owp-cats .owp-cat{flex:0 0 auto;white-space:nowrap}
/* trailing breathing room so the last chip is never flush to the edge */
.feed-scope-bar .h-scroll::after,
.lf-cat-row::after{content:"";flex:0 0 8px}

/* ---------- 3. News card action row: equal buttons ---------- */
.senior-news-page .row.between.mt-8{gap:10px;align-items:center}
.news-edit-btn,
.senior-news-page .card-3d .icon-btn{
  box-sizing:border-box!important;
  width:40px!important;height:40px!important;
  min-width:40px!important;max-width:40px;
  min-height:40px!important;max-height:40px!important;
  line-height:1!important;
  border-radius:14px!important;padding:0!important;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
/* Edit keeps its label but matches the height exactly */
.news-edit-btn{width:auto!important;max-width:none!important;min-width:40px!important;padding:0 12px!important;gap:6px}
.senior-news-page .row.between.mt-8 > .row{gap:8px!important;flex:0 0 auto}
.senior-news-page .card-3d .icon-btn svg{width:16px;height:16px}
/* heart count off the edge */
.senior-news-page .row.between.mt-8 > .row > span:last-child,
.senior-news-page .like-count{margin-right:4px;padding-left:2px;min-width:14px;text-align:left}

/* ---------- 4. Author name on one line with an avatar dot ---------- */
.senior-news-page .row.between.mt-8{flex-wrap:nowrap!important}
.senior-news-page .row.between.mt-8 > .muted:first-child,
.senior-news-page .row.between.mt-8 > span.muted{
  flex:1 1 auto!important;min-width:96px!important;max-width:none!important;
  display:inline-flex!important;align-items:center;gap:7px;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  line-height:1.2;font-size:12.5px}
/* if the row cannot fit the name + 5 buttons, drop the actions to their own line */
@media(max-width:430px){
  .senior-news-page .row.between.mt-8{flex-wrap:wrap!important;row-gap:10px}
  .senior-news-page .row.between.mt-8 > span.muted{flex:1 0 100%!important;max-width:100%!important}
  .senior-news-page .row.between.mt-8 > .row{margin-left:auto}
}
.senior-news-page .row.between.mt-8 > span.muted::before{
  content:"";flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark));
  box-shadow:inset 0 1px rgba(255,255,255,.35)}
.senior-news-page .row.between.mt-8 > .muted:first-child::before{
  content:"";flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark));
  box-shadow:inset 0 1px rgba(255,255,255,.35)}

/* ---------- 5. Space between category badge and title ---------- */
.senior-news-page .card-3d .badge,
.senior-news-page .card-3d .pill-badge{margin-bottom:12px;display:inline-block}
.senior-news-page .card-3d h3,
.senior-news-page .card-3d h2{margin-top:10px}

/* ---------- 6. Consistent radius + shadow + button height ---------- */
:root{
  --oa-radius:18px;
  --oa-radius-sm:14px;
  --oa-shadow:0 10px 30px rgba(15,23,42,.16),0 2px 6px rgba(15,23,42,.08);
  --oa-btn-h:46px}
.card-3d,.panel,.modal-3d,.empty-state,.ad-card,.ads-row{
  border-radius:var(--oa-radius)!important}
.card-3d,.panel,.ad-card,.ads-row{box-shadow:var(--oa-shadow)!important}
.btn-primary-3d,.btn-accent-3d,.btn-ghost,.ads-btn,button.ad-cta,.lf-btn{
  min-height:var(--oa-btn-h);border-radius:var(--oa-radius-sm)!important}
.input-3d,select.input-3d,textarea.input-3d{border-radius:var(--oa-radius-sm)!important}

/* ---------- 7. Motion: 200-300ms everywhere, reduced-motion respected ---------- */
.pill,.ads-tab,.lf-tab,.icon-btn,.news-edit-btn,.ad-card,.card-3d,.owp-item{
  transition:transform .22s cubic-bezier(.22,1,.36,1),
             background-color .22s ease,color .22s ease,
             border-color .22s ease,box-shadow .22s ease,opacity .22s ease}
.pill:active,.ads-tab:active,.lf-tab:active,.icon-btn:active{transform:scale(.96)}
@keyframes oaLikePop{0%{transform:scale(1)}40%{transform:scale(1.28)}100%{transform:scale(1)}}
.like-anim,.icon-btn.liked{animation:oaLikePop .26s cubic-bezier(.22,1,.36,1)}
@keyframes oaFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-enter{animation:oaFadeIn .24s cubic-bezier(.22,1,.36,1) both}

/* ---------- 8. Modals respect gesture-navigation safe area ---------- */
.modal-3d{
  max-height:min(92vh,calc(100dvh - 24px))!important;
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))!important}
.modal-overlay{padding-bottom:env(safe-area-inset-bottom,0px)}

/* ---------- 9. Empty states: bigger art, less wallpaper showing ---------- */
.empty-state{
  background:color-mix(in srgb,var(--surface) 96%,transparent)!important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.es-icon{width:96px!important;height:96px!important;margin-bottom:18px!important}
.es-icon svg{width:42px;height:42px}

/* ---------- 10. Search field with an icon inside ---------- */
.oa-search{position:relative;flex:1 1 auto;min-width:0}
.oa-search .input-3d{padding-left:42px!important}
.oa-search-ico{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:var(--text-muted);pointer-events:none;opacity:.85}

@media(prefers-reduced-motion:reduce){
  .pill,.ads-tab,.lf-tab,.icon-btn,.news-edit-btn,.ad-card,.card-3d,.owp-item,
  .page-enter,.like-anim{transition:none!important;animation:none!important}
}

/* ---------- New Advert: modern upload card + sections ---------- */
.ads-sec{margin:20px 0 4px;font-size:12px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-muted);opacity:.85}
.ads-sec:first-child{margin-top:4px}
.ads-drop{position:relative;display:block;margin-top:6px;cursor:pointer;
  border:1.5px dashed color-mix(in srgb,var(--primary) 38%,var(--premium-border));
  border-radius:var(--oa-radius);background:color-mix(in srgb,var(--primary) 5%,transparent);
  transition:border-color .22s ease,background .22s ease,transform .22s ease}
.ads-drop:hover{border-color:var(--primary);
  background:color-mix(in srgb,var(--primary) 10%,transparent)}
.ads-drop:active{transform:scale(.995)}
.ads-drop-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ads-drop-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:26px 16px;text-align:center;pointer-events:none}
.ads-drop-ico{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#fff;background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark));
  box-shadow:0 6px 16px rgba(var(--color-primary-rgb),.35)}
.ads-drop-t{font-size:14px;font-weight:600;color:var(--text)}
.ads-drop-s{font-size:12px;color:var(--text-muted)}
.ads-prevwrap{position:relative;margin-top:10px;border-radius:var(--oa-radius);overflow:hidden;
  border:1px solid var(--premium-border)}
.ads-prevwrap .ads-preview{display:block;width:100%;max-height:200px;object-fit:cover;margin:0}
.ads-prev-x{position:absolute;top:8px;right:8px;width:32px;height:32px;border-radius:50%;
  border:0;cursor:pointer;color:#fff;background:rgba(15,23,42,.72);font-size:14px;line-height:1}
.ads-prev-x:hover{background:rgba(239,68,68,.9)}
.ads-prev-tag{position:absolute;left:8px;bottom:8px;font-size:11px;padding:3px 8px;
  border-radius:999px;color:#F1F5F9;background:rgba(15,23,42,.72)}
.ads-date{color-scheme:dark}

/* ---------- Lost & Found polish ---------- */
.lf-filters{display:flex;gap:10px;align-items:center;flex-wrap:nowrap}
.lf-filters .oa-search{flex:1 1 auto;min-width:0}
.lf-filters select.input-3d{flex:0 0 auto;width:auto;min-width:148px;
  padding-right:34px!important;text-overflow:ellipsis}
.lf-tabs{position:relative}
.lf-tab{transition:color .24s ease,background .24s ease,transform .24s ease}
.lf-tab:active{transform:scale(.97)}
.lf-empty,.lf-list .empty-state{
  background:color-mix(in srgb,var(--surface) 97%,transparent)!important}

/* ---------- Edit Profile ---------- */
.ep-avatar{position:relative;width:104px;height:104px;cursor:pointer}
.ep-cam{position:absolute;right:-2px;bottom:-2px;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark));
  border:3px solid var(--surface);box-shadow:0 3px 10px rgba(15,23,42,.4);
  transition:transform .22s cubic-bezier(.22,1,.36,1)}
.ep-avatar:active .ep-cam{transform:scale(.92)}
.ep-help{font-size:11.5px;color:var(--text-muted);opacity:.72;text-align:center}
.ep-help-block{display:block;margin-top:-2px;line-height:1.5}
.ep-save{position:sticky;bottom:0;z-index:5;margin:16px -20px -24px;
  padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,var(--surface) 72%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ---------- Admin: comment moderation ---------- */
.cm-filters{display:flex;gap:10px;align-items:center;margin:16px 0;flex-wrap:nowrap}
.cm-filters .oa-search{flex:1 1 auto;min-width:0}
.cm-filters select.input-3d{flex:0 0 auto;width:auto;min-width:150px}
.cm-filters .field-group{margin-bottom:0}
.cm-note{margin:0 0 12px;font-size:13px;color:#F59E0B}
.cm-list{display:grid;gap:12px}
.cm-row{padding:14px}
.cm-row.is-hidden{opacity:.62;border-style:dashed!important}
.cm-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.cm-src{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.cm-anonymous{color:#8B5CF6;background:rgba(139,92,246,.14)}
.cm-news{color:#F59E0B;background:rgba(245,158,11,.14)}
.cm-pill-hidden{font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;
  color:#EF4444;background:rgba(239,68,68,.13)}
.cm-time{margin-left:auto;font-size:12px;color:var(--text-muted)}
.cm-body{font-size:14.5px;line-height:1.5;word-break:break-word}
.cm-meta{display:flex;flex-direction:column;gap:3px;margin-top:9px;font-size:12px;
  color:var(--text-muted)}
.cm-who b{color:var(--text)}
.cm-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}

/* ---------- Admin comments: date filter ---------- */
.cm-dates{display:flex;gap:8px;overflow-x:auto;flex-wrap:nowrap;padding:2px 2px 10px;
  scrollbar-width:none}
.cm-dates::-webkit-scrollbar{display:none}
.cm-date{flex:0 0 auto;white-space:nowrap;min-height:36px;padding:0 14px;border-radius:999px;
  font-size:13px;cursor:pointer;background:transparent;color:var(--text-muted);
  border:1px solid var(--premium-border);
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease}
.cm-date:active{transform:scale(.96)}
.cm-date.on{background:var(--color-primary);border-color:var(--color-primary);color:#fff;font-weight:600}
.cm-range{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;margin:0 0 14px}
.cm-range label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:600;
  color:var(--text-muted)}
.cm-range input{min-width:150px}
.cm-count{margin:0 0 12px;font-size:12.5px;color:var(--text-muted)}

/* ---------- Wallpaper picker: search + clearer selection ---------- */
.ux-wp-search{position:relative;display:flex;align-items:center;margin:0 0 12px}
.ux-wp-search svg{position:absolute;left:14px;width:18px;height:18px;
  color:var(--text-muted);opacity:.85;pointer-events:none}
.ux-wp-search input{width:100%;min-height:46px;padding:0 40px 0 42px;
  font-size:15px;font-family:inherit;color:var(--text);
  background:color-mix(in srgb,var(--surface-raised) 90%,transparent);
  border:1px solid var(--premium-border);border-radius:var(--oa-radius-sm,14px);outline:none;
  transition:border-color .2s ease,box-shadow .2s ease}
.ux-wp-search input:focus{border-color:var(--color-primary-soft);box-shadow:0 0 0 3px rgba(var(--color-primary-soft-rgb),.22)}
.ux-wp-qx{position:absolute;right:8px;width:30px;height:30px;border:0;border-radius:50%;
  cursor:pointer;font-size:17px;line-height:1;color:var(--text-muted);background:transparent}
.ux-wp-qx:hover{background:rgba(148,163,184,.18);color:var(--text)}
.ux-wp-none{margin:14px 2px;font-size:13.5px;color:var(--text-muted);text-align:center}

/* selected wallpaper: clearly marked, with a tick */
.ux-wallpaper-grid > *{position:relative;transition:transform .22s cubic-bezier(.22,1,.36,1),
  box-shadow .22s ease,border-color .22s ease}
.ux-wallpaper-grid > *.selected,
.ux-color-grid > *.selected{
  transform:scale(1.05);z-index:2;
  border-color:var(--color-primary-soft)!important;
  box-shadow:0 0 0 3px rgba(var(--color-primary-soft-rgb),.55),0 0 20px rgba(var(--color-primary-soft-rgb),.45)!important}
.ux-wallpaper-grid > *.selected::after,
.ux-color-grid > *.selected::after{
  content:"";position:absolute;top:6px;right:6px;z-index:3;width:23px;height:23px;
  border-radius:50%;background:var(--color-primary-soft);box-shadow:0 2px 8px rgba(15,23,42,.55);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:14px 14px;background-position:center;background-repeat:no-repeat}

/* the user's own uploaded picture must be visible in the Your photo tab */
.ux-custom-preview{
  width:100%;min-height:170px;margin-bottom:14px;border-radius:var(--oa-radius,18px);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border:1px solid var(--premium-border);
  background-color:color-mix(in srgb,var(--surface-raised) 80%,transparent)}
.ux-custom-preview.is-empty{display:flex;align-items:center;justify-content:center;
  border-style:dashed}
.ux-custom-preview.is-empty::after{content:"No picture chosen yet";
  font-size:13px;color:var(--text-muted)}

/* readable labels over photo thumbnails */
.ux-wallpaper-grid > * span{
  text-shadow:0 1px 3px rgba(15,23,42,.9);font-weight:700}

@media(prefers-reduced-motion:reduce){
  .ux-wallpaper-grid > *,.ux-wallpaper-grid > *.selected{transition:none;transform:none}
}

/* Reset is not destructive — neutral outline, not red.
   (He flagged this earlier and I wrongly said it was already neutral; the
   picker's Reset really was bright red. Corrected.) */
.ux-reset-wallpaper{
  background:transparent!important;
  color:var(--text,#F1F5F9)!important;
  border:1px solid var(--premium-border,rgba(255,255,255,.18))!important;
  box-shadow:none!important;font-weight:600!important;
  min-height:var(--oa-btn-h,46px);border-radius:var(--oa-radius-sm,14px)!important}
.ux-reset-wallpaper:hover{background:rgba(148,163,184,.14)!important}

/* ============================================================
   ANONYMOUS + CHAT SETTINGS REDESIGN — 2026-08-06
   Screenshots showed: flat cards lost against the wallpaper, cramped
   poll rows, tiny link-buttons, low-contrast chat bubbles.
   Everything below is presentation only — no logic touched.
   ============================================================ */

/* ---- shared surface so content never dissolves into the wallpaper ---- */
.senior-anon-room .card-3d,
.senior-anon-room .anon-post,
.senior-anon-room .anonymous-profile-card,
.senior-anon-room .anon-chat-bubble{
  background:color-mix(in srgb,var(--surface) 94%,transparent)!important;
  backdrop-filter:blur(16px) saturate(135%);
  -webkit-backdrop-filter:blur(16px) saturate(135%);
  border:1px solid var(--premium-border)!important;
  border-radius:var(--oa-radius,18px)!important;
  box-shadow:var(--oa-shadow)!important}

/* ---- hero ---- */
.anon-hero-head{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.anon-hero-badge{width:46px;height:46px;border-radius:15px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark));
  box-shadow:0 6px 18px rgba(var(--color-primary-rgb),.42)}
.anon-hero-title{font-size:20px;font-weight:800;letter-spacing:-.2px;line-height:1.2}
.anon-hero-sub{font-size:13px;color:var(--text-muted);margin-top:2px}

/* ---- main tabs: segmented, clear active state ---- */
.anonymous-main-tabs{
  display:flex;gap:4px;padding:5px;margin-bottom:16px;
  background:color-mix(in srgb,var(--surface-deep) 88%,transparent);
  border:1px solid var(--premium-border);border-radius:16px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  overflow-x:auto;scrollbar-width:none}
.anonymous-main-tabs::-webkit-scrollbar{display:none}
.anonymous-main-tabs > button{
  flex:1 1 0;min-width:78px;min-height:42px;padding:0 14px;border:0;cursor:pointer;
  border-radius:12px;font-size:14px;font-weight:600;white-space:nowrap;
  background:transparent;color:var(--text-muted);
  transition:background .22s ease,color .22s ease,transform .18s ease}
.anonymous-main-tabs > button:active{transform:scale(.97)}
.anonymous-main-tabs > button.active,
.anonymous-main-tabs > button[aria-selected="true"]{
  background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary));color:#fff;font-weight:700;
  box-shadow:0 4px 14px rgba(var(--color-primary-rgb),.4)}

/* ---- post card: clear header / body / footer bands ---- */
.anon-post{padding:0!important;overflow:hidden;margin-bottom:14px}
.anon-post > .row:first-child{
  padding:12px 15px;
  border-bottom:1px solid color-mix(in srgb,var(--premium-border) 70%,transparent)}
.anon-post .anon-avatar{width:38px;height:38px;border-radius:50%;flex:0 0 auto;
  border:2px solid color-mix(in srgb,var(--primary) 45%,transparent)}
.anon-post .anon-name-btn{font-size:14.5px;font-weight:700;color:var(--text)}
.anon-post > p,
.anon-post > div:not(.row):not(.anon-comments){padding:14px 15px;font-size:15.5px;line-height:1.55}
.anon-post .anon-image,.anon-post .anon-chat-video{width:100%;display:block;border-radius:0}

/* footer actions: equal, tappable, readable */
.anon-actions{
  display:flex;align-items:center;gap:6px;padding:9px 12px!important;margin:0!important;
  border-top:1px solid color-mix(in srgb,var(--premium-border) 70%,transparent);
  background:color-mix(in srgb,var(--surface-deep) 45%,transparent)}
.anon-action{
  flex:1 1 0;min-height:42px;display:inline-flex;align-items:center;justify-content:center;
  gap:7px;padding:0 10px;border-radius:12px;border:0;cursor:pointer;
  font-size:13.5px;font-weight:600;background:transparent;color:var(--text-muted);
  transition:background .22s ease,color .22s ease,transform .18s ease}
.anon-action:hover{background:rgba(148,163,184,.14);color:var(--text)}
.anon-action:active{transform:scale(.95)}
.anon-action.voted,.anon-action[aria-pressed="true"]{color:#EF4444;font-weight:700}
.anon-post .row > .icon-btn{width:38px!important;height:38px!important;border-radius:12px!important}

/* ---- POLLS: the screenshot was cramped and hard to read ---- */
.poll-opt{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:52px;padding:0 15px;margin-bottom:9px;cursor:pointer;
  border:1px solid var(--premium-border);border-radius:14px;overflow:hidden;
  background:color-mix(in srgb,var(--surface-raised) 65%,transparent);
  transition:border-color .22s ease,transform .18s ease,box-shadow .22s ease}
.poll-opt:active{transform:scale(.99)}
.poll-opt.chosen{border-color:var(--color-primary-soft);box-shadow:0 0 0 2px rgba(var(--color-primary-soft-rgb),.3)}
.poll-progress-fill{
  position:absolute;left:0;top:0;bottom:0;z-index:0;border-radius:13px 0 0 13px;
  background:linear-gradient(90deg,rgba(var(--color-primary-soft-rgb),.42),rgba(var(--color-primary-rgb),.26));
  transition:width .5s cubic-bezier(.22,1,.36,1)}
.poll-label{position:relative;z-index:1;display:flex;align-items:center;gap:7px;
  font-size:15px;font-weight:600;text-align:left}
.poll-pct{position:relative;z-index:1;font-size:13.5px;font-weight:700;
  color:var(--text);white-space:nowrap;opacity:.95}

/* admin poll controls were tiny blue links jammed together */
.senior-anon-room .row.between.mt-8 > .row{
  display:flex;flex-wrap:wrap;gap:8px!important;justify-content:flex-end}
.link-btn{
  min-height:38px;padding:0 13px;border-radius:10px;border:1px solid var(--premium-border);
  background:transparent;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;
  transition:background .22s ease,border-color .22s ease}
.link-btn:hover{background:rgba(148,163,184,.14)}

/* ---- CHAT: bubbles must stand off the wallpaper ---- */
.anon-chat-thread{gap:10px!important;padding-bottom:6px}
.anon-chat-bubble{
  max-width:84%;padding:11px 14px!important;border-radius:18px!important;
  font-size:15px;line-height:1.5;box-shadow:0 3px 12px rgba(15,23,42,.3)!important}
.anon-chat-bubble.mine{
  margin-left:auto;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-dark))!important;
  border-color:transparent!important;color:#fff!important;
  border-bottom-right-radius:6px!important}
.anon-chat-bubble.mine .u-sub,
.anon-chat-bubble.mine .anon-seen{color:rgba(255,255,255,.82)!important}
.anon-chat-bubble.theirs{
  margin-right:auto;border-bottom-left-radius:6px!important}
.anon-chat-bubble .u-sub{font-size:12.5px;font-weight:700}
.anon-seen{font-size:11.5px;opacity:.75}
/* the per-message buttons were floating boxes in the screenshot — hide until tapped */
.anon-chat-bubble .icon-btn,.anon-chat-bubble .anon-react{
  width:34px!important;height:34px!important;border-radius:10px!important;
  opacity:0;pointer-events:none;transition:opacity .22s ease}
.anon-chat-bubble.oa-open .icon-btn,.anon-chat-bubble.oa-open .anon-react,
.anon-chat-bubble:hover .icon-btn,.anon-chat-bubble:hover .anon-react{
  opacity:1;pointer-events:auto}

/* composer */
.anon-chat-composer,.anon-composer{
  position:sticky;bottom:0;z-index:5;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;
  background:color-mix(in srgb,var(--surface) 95%,transparent)!important;
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-top:1px solid var(--premium-border);border-radius:18px 18px 0 0!important}
.anon-composer-row{display:flex;align-items:center;gap:8px}
.anon-composer-row .icon-btn{width:42px!important;height:42px!important;flex:0 0 auto}
.anon-composer-row input,.anon-composer-row textarea{
  flex:1 1 auto;min-height:44px;border-radius:22px!important;padding:11px 16px!important}

.anon-chat-status{display:flex;gap:12px;align-items:center;font-size:12.5px;
  color:var(--text-muted);margin-bottom:10px;padding:0 2px}
.anon-privacy-note{
  display:flex;gap:9px;align-items:flex-start;padding:11px 13px;margin-bottom:14px;
  font-size:12.5px;line-height:1.5;border-radius:13px;
  color:var(--text-muted);
  background:color-mix(in srgb,var(--primary) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--primary) 26%,transparent)}

/* ---- identity page ---- */
.anonymous-profile-card{padding:18px!important}
.anon-profile-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---- CHAT SETTINGS: rows were flat and cramped ---- */
.ocs-sec{margin-bottom:20px}
.ocs-sec-h{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-muted);opacity:.85;margin:0 4px 9px}
.ocs-card{
  background:color-mix(in srgb,var(--surface) 94%,transparent)!important;
  border:1px solid var(--premium-border)!important;
  border-radius:var(--oa-radius,18px)!important;
  box-shadow:var(--oa-shadow)!important;overflow:hidden;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.ocs-item,.ocs-row{
  display:flex;align-items:center;gap:13px;min-height:62px;padding:12px 15px;
  border-bottom:1px solid color-mix(in srgb,var(--premium-border) 60%,transparent);
  transition:background .2s ease}
.ocs-item:last-child,.ocs-row:last-child{border-bottom:0}
.ocs-item:active{background:rgba(148,163,184,.1)}
.ocs-ico{width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:0 3px 10px rgba(15,23,42,.3)}
.ocs-body{flex:1 1 auto;min-width:0}
.ocs-body strong,.ocs-item strong{display:block;font-size:15px;font-weight:600;line-height:1.3}
.ocs-note,.ocs-item small{display:block;font-size:12.5px;color:var(--text-muted);
  margin-top:2px;line-height:1.4}
.ocs-chev{opacity:.5;flex:0 0 auto}
.ocs-empty{padding:26px 16px;text-align:center;font-size:13.5px;color:var(--text-muted)}

@media(prefers-reduced-motion:reduce){
  .anon-action,.anonymous-main-tabs > button,.poll-opt,.poll-progress-fill,
  .anon-chat-bubble .icon-btn{transition:none!important}
}

/* ---- FIX: cards/bubbles were still too transparent over a wallpaper.
     color-mix with a translucent --surface stays translucent. Use solid
     colours driven by the theme instead.                              ---- */
:root{--oa-solid:#1E293B;--oa-solid-2:#243349}
[data-theme="light"]{--oa-solid:#FFFFFF;--oa-solid-2:#F1F5F9}

html:not([data-ux-wallpaper="default"]) .senior-anon-room .anon-post,
html:not([data-ux-wallpaper="default"]) .senior-anon-room .anon-chat-bubble.theirs,
html:not([data-ux-wallpaper="default"]) .senior-anon-room .anonymous-profile-card,
html:not([data-ux-wallpaper="default"]) .senior-anon-room .card-3d,
html:not([data-ux-wallpaper="default"]) .ocs-card,
.senior-anon-room .anon-post,
.senior-anon-room .anon-chat-bubble.theirs,
.senior-anon-room .anonymous-profile-card,
.ocs-card{
  background:var(--oa-solid)!important}

.senior-anon-room .anonymous-main-tabs,
.senior-anon-room .anon-chat-status,
.senior-anon-room .anon-chat-composer,
.senior-anon-room .anon-composer{background:var(--oa-solid)!important}

.senior-anon-room .anon-actions{background:var(--oa-solid-2)!important}
.senior-anon-room .poll-opt{background:var(--oa-solid-2)!important}

/* search field on the chat tab */
.senior-anon-room .field-group input,
.senior-anon-room input[type="search"]{background:var(--oa-solid-2)!important}

/* privacy note keeps its blue tint but must stay readable */
.senior-anon-room .anon-privacy-note{
  background:linear-gradient(var(--oa-solid),var(--oa-solid)) padding-box,
             linear-gradient(rgba(var(--color-primary-rgb),.16),rgba(var(--color-primary-rgb),.16)) padding-box!important;
  color:var(--text)!important}

/* ---------- Comment replies (Anonymous + News) ---------- */
.anon-comments{display:flex;flex-direction:column;gap:10px;padding:12px 15px 14px;
  border-top:1px solid color-mix(in srgb,var(--premium-border) 70%,transparent)}
.anon-thread{display:flex;flex-direction:column;gap:8px}
.anon-comment{padding:10px 12px;border-radius:13px;
  background:var(--oa-solid-2,#243349);border:1px solid var(--premium-border)}
.anon-comment.is-reply{margin-left:20px;position:relative;
  background:color-mix(in srgb,var(--oa-solid-2,#243349) 78%,transparent)}
.anon-comment.is-reply::before{content:"";position:absolute;left:-11px;top:14px;bottom:14px;
  width:2px;border-radius:2px;background:color-mix(in srgb,var(--primary) 45%,transparent)}
.anon-comment-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.anon-comment-head .u-sub{font-size:12.5px;font-weight:700;color:var(--text)}
.anon-reply-to{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;
  color:var(--color-primary-light);background:rgba(var(--color-primary-rgb),.16)}
.anon-comment-body{font-size:14px;line-height:1.5;word-break:break-word}
.anon-comment-reply{margin-top:7px;min-height:32px;padding:0 12px;border-radius:9px;
  border:1px solid var(--premium-border);background:transparent;color:var(--text-muted);
  font-size:12.5px;font-weight:600;cursor:pointer;transition:background .2s ease,color .2s ease}
.anon-comment-reply:hover{background:rgba(148,163,184,.14);color:var(--text)}
.anon-comment-form{margin-top:4px}
.anon-comment-form .anon-reply-chip{display:flex;align-items:center;gap:9px;margin-bottom:8px;
  padding:8px 11px;border-radius:11px;font-size:12.5px;
  background:rgba(var(--color-primary-rgb),.12);border:1px solid rgba(var(--color-primary-rgb),.3)}
.anon-comment-form .arc-bar{width:3px;align-self:stretch;border-radius:2px;background:var(--color-primary-soft);flex:0 0 auto}
.anon-comment-form .arc-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
.anon-comment-form .arc-text b{font-size:12.5px}
.anon-comment-form .arc-text i{font-style:normal;font-size:11.5px;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arc-x{width:28px;height:28px;flex:0 0 auto;border:0;border-radius:50%;cursor:pointer;
  font-size:16px;line-height:1;color:var(--text-muted);background:transparent}
.arc-x:hover{background:rgba(148,163,184,.2);color:var(--text)}

/* ---------- FIX: anonymous chat composer must NOT drift with scroll ----------
   It was position:sticky, so it moved while scrolling. Pin it to the bottom,
   above the nav bar. The on-screen keyboard lifts it via the visual viewport. */
.senior-anon-room .anon-chat-composer,
.senior-anon-room .anon-composer{
  position:fixed!important;
  left:10px;right:10px;
  bottom:calc(64px + env(safe-area-inset-bottom,0px) + 18px)!important;
  z-index:45;margin:0!important;
  border-radius:24px!important;
  box-shadow:0 10px 30px rgba(8,12,24,.45)!important}
/* room for the pinned composer so the last message is never hidden */
.senior-anon-room .anon-chat-thread{
  padding-bottom:calc(64px + env(safe-area-inset-bottom,0px) + 96px)!important}
@supports (height: 100dvh){
  .senior-anon-room .anon-chat-composer,
  .senior-anon-room .anon-composer{position:fixed!important}
}

/* ---------- Lost & Found: "add a picture?" reminder ---------- */
.lfm-wrap{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;
  justify-content:center;padding:16px;background:rgba(2,6,23,.62);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:oaFadeIn .2s ease both}
.lfm-wrap *{pointer-events:auto}
.lfm-card{position:relative;z-index:1;width:100%;max-width:460px;padding:24px 20px calc(20px + env(safe-area-inset-bottom,0px));
  border-radius:22px;text-align:center;background:var(--oa-solid,#1E293B);
  border:1px solid var(--premium-border);box-shadow:0 -12px 44px rgba(0,0,0,.5);
  animation:sheetUp .3s cubic-bezier(.32,.72,0,1) both}
.lfm-ico{width:62px;height:62px;margin:0 auto 14px;border-radius:20px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#F59E0B,#D97706);
  box-shadow:0 8px 22px rgba(245,158,11,.4)}
.lfm-t{margin:0 0 8px;font-size:19px;font-weight:700}
.lfm-s{margin:0 0 20px;font-size:14px;line-height:1.55;color:var(--text-muted)}
.lfm-btns{display:flex;flex-direction:column;gap:10px}
.lfm-primary{min-height:50px;border:0;border-radius:14px;cursor:pointer;
  font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary));
  box-shadow:0 6px 18px rgba(var(--color-primary-rgb),.4)}
.lfm-primary:active{transform:scale(.985)}
.lfm-ghost{min-height:48px;border-radius:14px;cursor:pointer;font-size:14.5px;font-weight:600;
  color:var(--text-muted);background:transparent;border:1px solid var(--premium-border)}
.lfm-ghost:hover{background:rgba(148,163,184,.12);color:var(--text)}
@media(prefers-reduced-motion:reduce){
  .lfm-wrap,.lfm-card{animation:none}
}

/* ============================================================
   TikTok-style comment sheet — list scrolls, box stays pinned
   ============================================================ */
.anon-comments{
  position:fixed!important;left:0;right:0;bottom:0;z-index:1200;
  display:flex!important;flex-direction:column;
  /* --kb is set by JS when the phone keyboard opens */
  height:min(72dvh, calc(100dvh - 120px));
  max-height:calc(100dvh - var(--kb,0px) - 56px);
  padding:0!important;margin:0!important;
  border-radius:20px 20px 0 0!important;
  background:var(--oa-solid,#1E293B)!important;
  border:1px solid var(--premium-border)!important;border-bottom:0!important;
  box-shadow:0 -14px 44px rgba(0,0,0,.55)!important;
  transform:translateY(calc(-1 * var(--kb,0px)));
  transition:transform .18s ease-out;
  animation:sheetUp .28s cubic-bezier(.32,.72,0,1) both}

.anon-csheet-head{
  flex:0 0 auto;position:relative;padding:14px 16px 10px;text-align:center;
  font-size:13.5px;font-weight:700;color:var(--text-muted);
  border-bottom:1px solid color-mix(in srgb,var(--premium-border) 70%,transparent)}
.anon-csheet-head::before{
  content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:38px;height:4px;border-radius:2px;background:rgba(148,163,184,.45)}

/* the ONLY scrolling part */
.anon-clist{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain}
.anon-clist-in{display:flex;flex-direction:column;gap:10px;padding:12px 15px 16px}
.anon-cempty{margin:26px 0;text-align:center;font-size:13.5px;color:var(--text-muted)}

/* pinned composer — never scrolls away */
.anon-comments .anon-comment-form{
  flex:0 0 auto;margin:0!important;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--oa-solid,#1E293B);
  border-top:1px solid var(--premium-border)}
.anon-comments .anon-comment-form .row{gap:8px}
.anon-cbox{flex:1 1 auto;min-height:44px;border-radius:22px!important;
  padding:11px 16px!important;font-size:15px}

/* backdrop so the page behind is obviously inactive */
.anon-comments::before{
  content:"";position:fixed;inset:0 0 100% 0;height:100vh;z-index:-1;
  background:rgba(2,6,23,.55);pointer-events:none}

/* the comment sheet replaces the old inline look */
.anon-post .anon-comments{border-top:0!important}

@media(prefers-reduced-motion:reduce){
  .anon-comments{animation:none;transition:none}
}

/* chat composer also rides above the keyboard */
.senior-anon-room .anon-chat-composer,
.senior-anon-room .anon-composer{
  bottom:calc(64px + env(safe-area-inset-bottom,0px) + 18px + var(--kb,0px))!important;
  transition:bottom .18s ease-out}
/* when the keyboard is up, the nav bar is irrelevant — sit right on the keyboard */
html.kb-open .senior-anon-room .anon-chat-composer,
html.kb-open .senior-anon-room .anon-composer{
  bottom:calc(var(--kb,0px) + 10px)!important}
html.kb-open .bottom-nav{display:none}

/* FIX: .anon-post and .senior-anon-room carry a transform (card animation),
   which makes them the containing block for position:fixed — the comment sheet
   was anchoring to the CARD (320px tall) instead of the screen.
   Kill the transform on the ancestors while a sheet is open. */
.senior-anon-room:has(.anon-comments),
.senior-anon-room:has(.anon-comments) .anon-post{
  transform:none!important;animation:none!important;
  will-change:auto!important;filter:none!important;perspective:none!important}
/* the card that owns the open sheet must not clip it either */
.anon-post:has(.anon-comments){overflow:visible!important;contain:none!important}

/* ---- anonymous CHAT composer: flush to the bottom, exactly like the
       comment sheet's box. Thread scrolls, box never moves. ---- */
.senior-anon-room .anon-chat-composer,
.senior-anon-room .anon-composer{
  left:0!important;right:0!important;
  bottom:var(--kb,0px)!important;
  border-radius:18px 18px 0 0!important;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;
  box-shadow:0 -10px 30px rgba(8,12,24,.5)!important}
html.kb-open .senior-anon-room .anon-chat-composer,
html.kb-open .senior-anon-room .anon-composer{
  bottom:var(--kb,0px)!important;
  padding-bottom:10px!important}
/* the nav bar would sit on top of the box — hide it while the chat box is on screen */
body:has(.anon-chat-composer) .bottom-nav,
body:has(.anon-composer) .bottom-nav{display:none!important}
/* leave room so the newest message is never hidden behind the box */
.senior-anon-room .anon-chat-thread{
  padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}


/* composer is now portalled to <body>, so scope it by its own class */
body > .anon-chat-composer{
  position:fixed!important;left:0!important;right:0!important;
  bottom:var(--kb,0px)!important;z-index:1100;margin:0!important;
  border-radius:18px 18px 0 0!important;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px))!important;
  background:var(--oa-solid,#1E293B)!important;
  border-top:1px solid var(--premium-border)!important;
  box-shadow:0 -10px 30px rgba(8,12,24,.5)!important;
  transition:bottom .18s ease-out}
html.kb-open body > .anon-chat-composer{padding-bottom:10px!important}
body:has(> .anon-chat-composer) .bottom-nav{display:none!important}

/* ============================================================
   Guided tour + Quick guide
   ============================================================ */
.oat-wrap{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:flex-end;
  justify-content:center;padding:14px;background:rgba(2,6,23,.6);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:oaFadeIn .18s ease both}
.oat-wrap.oat-out{opacity:0;transition:opacity .18s ease}
.oat-card{width:100%;max-width:470px;padding:20px 18px calc(18px + env(safe-area-inset-bottom,0px));
  border-radius:22px;background:var(--oa-solid,#1E293B);
  border:1px solid var(--premium-border);box-shadow:0 -14px 44px rgba(0,0,0,.55);
  animation:sheetUp .3s cubic-bezier(.32,.72,0,1) both}
.oat-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.oat-ico{width:46px;height:46px;flex:0 0 auto;border-radius:15px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark));
  box-shadow:0 6px 18px rgba(var(--color-primary-rgb),.4)}
.oat-ico svg{width:24px;height:24px}
.oat-htext{min-width:0}
.oat-htext b{display:block;font-size:17px;font-weight:700}
.oat-htext i{display:block;font-style:normal;font-size:12.5px;color:var(--text-muted);margin-top:1px}
.oat-step{margin:0 0 16px;font-size:14.5px;line-height:1.6}
.oat-list{margin:0 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.oat-list li{font-size:14px;line-height:1.55}
.oat-dots{display:flex;gap:6px;justify-content:center;margin-bottom:16px}
.oat-dot{width:7px;height:7px;border-radius:50%;background:var(--premium-border);
  transition:background .2s ease,width .2s ease}
.oat-dot.on{background:var(--color-primary-soft);width:20px;border-radius:4px}
.oat-btns{display:flex;gap:10px}
.oat-skip,.oat-next{flex:1 1 0;min-height:48px;border-radius:14px;cursor:pointer;
  font-size:15px;font-weight:600}
.oat-skip{background:transparent;color:var(--text-muted);border:1px solid var(--premium-border)}
.oat-skip:hover{background:rgba(148,163,184,.12);color:var(--text)}
.oat-next{border:0;color:#fff;font-weight:700;
  background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary));
  box-shadow:0 6px 18px rgba(var(--color-primary-rgb),.4)}
.oat-off{display:block;width:100%;margin-top:12px;padding:6px;border:0;background:transparent;
  color:var(--text-muted);font-size:12.5px;cursor:pointer;text-decoration:underline}

/* Quick guide card in Profile */
.oaqg{margin:16px 0}
.oaqg-head{display:flex;flex-direction:column;gap:2px;margin:0 4px 10px}
.oaqg-head b{font-size:16px;font-weight:700}
.oaqg-head span{font-size:12.5px;color:var(--text-muted)}
.oaqg-list{display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--oa-radius,18px);border:1px solid var(--premium-border);
  background:var(--oa-solid,#1E293B);box-shadow:var(--oa-shadow)}
.oaqg-item{display:flex;align-items:center;gap:12px;width:100%;min-height:62px;
  padding:11px 14px;border:0;background:transparent;cursor:pointer;text-align:left;
  border-bottom:1px solid color-mix(in srgb,var(--premium-border) 60%,transparent);
  transition:background .2s ease}
.oaqg-item:last-child{border-bottom:0}
.oaqg-item:active{background:rgba(148,163,184,.12)}
.oaqg-ico{width:38px;height:38px;flex:0 0 auto;border-radius:12px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark))}
.oaqg-ico svg{width:20px;height:20px}
.oaqg-t{flex:1 1 auto;min-width:0}
.oaqg-t b{display:block;font-size:14.5px;font-weight:600;color:var(--text)}
.oaqg-t i{display:block;font-style:normal;font-size:12.5px;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oaqg-chev{color:var(--text-muted);font-size:20px;opacity:.6;flex:0 0 auto}
.oaqg-reset{width:100%;margin-top:10px;min-height:44px;border-radius:12px;cursor:pointer;
  background:transparent;color:var(--text-muted);border:1px solid var(--premium-border);
  font-size:13.5px;font-weight:600}
.oaqg-reset:hover{background:rgba(148,163,184,.12);color:var(--text)}
@media(prefers-reduced-motion:reduce){.oat-wrap,.oat-card{animation:none}}

/* ============================================================
   WhatsApp-style input bar — one long rounded pill holding the
   icons and the text, with the send button beside it.
   Used by: anonymous chat, anonymous comments, news comments.
   ============================================================ */
.anon-composer-row{display:flex;align-items:flex-end;gap:8px}

.oa-inbar{
  flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:2px;
  padding:4px 6px 4px 4px;border-radius:26px;
  background:color-mix(in srgb,var(--surface-raised) 92%,transparent);
  border:1px solid var(--premium-border);
  transition:border-color .18s ease,box-shadow .18s ease}
.oa-inbar:focus-within{border-color:var(--color-primary-soft);box-shadow:0 0 0 3px rgba(var(--color-primary-soft-rgb),.18)}

/* icons inside the pill: flat, evenly spaced, no boxes */
.oa-inbar .icon-btn{
  width:38px!important;height:38px!important;min-width:38px;flex:0 0 auto;
  border:0!important;background:transparent!important;box-shadow:none!important;
  border-radius:50%!important;color:var(--text-muted)!important;
  font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .18s ease,color .18s ease}
.oa-inbar .icon-btn:hover{background:rgba(148,163,184,.16)!important;color:var(--text)!important}
.oa-inbar .icon-btn:active{transform:scale(.92)}
.oa-inbar label.icon-btn{cursor:pointer}

/* the text field fills the rest of the pill and grows with the message */
.oa-inbar .anon-cbox,
.oa-inbar .ux-chat-textarea,
.oa-inbar input[type="text"],
.oa-inbar textarea{
  flex:1 1 auto;min-width:0;
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;outline:none!important;
  padding:9px 8px!important;margin:0!important;
  font-size:15.5px;line-height:1.45;resize:none;
  max-height:132px;overflow-y:auto}
.oa-inbar textarea{min-height:38px}

/* send button: round, sits outside the pill */
.oa-send{
  flex:0 0 auto;width:46px!important;height:46px!important;min-width:46px!important;
  padding:0!important;border-radius:50%!important;
  display:flex!important;align-items:center;justify-content:center;
  font-size:14px;font-weight:700}
.oa-send:disabled{opacity:.45}

/* the comment box's Post/Reply is a word, not an icon — let it breathe */
.anon-comment-form .oa-send,
.nd-form .oa-send{width:auto!important;min-width:64px!important;
  border-radius:23px!important;padding:0 16px!important}

/* ---- comment sheet: close button + swipe affordance ---- */
.anon-csheet-head{cursor:grab;touch-action:none;user-select:none}
.anon-csheet-head:active{cursor:grabbing}
.anon-csheet-x{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:0;border-radius:50%;cursor:pointer;
  font-size:19px;line-height:1;color:var(--text-muted);background:transparent}
.anon-csheet-x:hover{background:rgba(148,163,184,.18);color:var(--text)}
.anon-comments{transition:transform .22s cubic-bezier(.32,.72,0,1)}

/* news comment form uses the same pinned treatment */
.nd-form{padding-top:10px}

/* ---- WhatsApp shape (from his screenshot): ONE tall rounded pill,
       emoji on the LEFT, text in the middle, attach/camera on the RIGHT ---- */
.oa-inbar{
  padding:2px 4px 2px 2px!important;
  border-radius:28px!important;
  min-height:52px;
  background:color-mix(in srgb,var(--surface-raised) 96%,transparent)!important}
.oa-inbar .icon-btn{
  width:42px!important;height:42px!important;min-width:42px;
  font-size:20px!important;opacity:.9}
.oa-inbar .anon-cbox,
.oa-inbar .ux-chat-textarea,
.oa-inbar input[type="text"],
.oa-inbar textarea{
  padding:12px 6px!important;font-size:16px!important}
.oa-inbar textarea{min-height:44px}
/* emoji first, then the text, then the rest — WhatsApp order */
.oa-inbar > .icon-btn:first-child{order:0}
.oa-inbar > .anon-cbox,
.oa-inbar > .ux-chat-textarea,
.oa-inbar > input,
.oa-inbar > textarea{order:1}
.oa-inbar > .icon-btn:not(:first-child),
.oa-inbar > label.icon-btn{order:2}
.oa-send{width:52px!important;height:52px!important;min-width:52px!important}
.anon-comment-form .oa-send,
.nd-form .oa-send{height:52px!important;border-radius:26px!important}

/* ---- tour: point at the real feature ---- */
.oat-ring{
  position:fixed;z-index:2147483590;pointer-events:none;border-radius:16px;
  border:2px solid var(--color-primary-soft);
  box-shadow:0 0 0 9999px rgba(2,6,23,.72),0 0 22px rgba(var(--color-primary-soft-rgb),.7)}
.oat-wrap{background:transparent!important;backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important}
.oat-wrap.oat-top{align-items:flex-start}
.oat-card{z-index:2147483601;position:relative}



/* the textarea ships wrapped in .field-group — unwrap it inside the pill */
.oa-inbar > .field-group{
  flex:1 1 auto!important;min-width:0!important;margin:0!important;order:1}
.oa-inbar > .field-group .field-label{display:none!important}
.oa-inbar > .field-group textarea,
.oa-inbar > .field-group input{
  background:transparent!important;border:0!important;box-shadow:none!important;
  border-radius:0!important;outline:none!important;
  padding:12px 6px!important;margin:0!important;font-size:16px!important;
  min-height:44px;max-height:132px;resize:none}
.oa-inbar{align-items:center;height:auto}

/* the pinned composer is ~92px tall — reserve exactly that so the newest
   message sits just above it when the chat opens at the bottom */
.senior-anon-room .anon-chat-thread{
  padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))!important}

/* ---- Lost & Found follow-up prompt ---- */
.lff-wrap{position:fixed;inset:0;z-index:2147483500;display:flex;align-items:flex-end;
  justify-content:center;padding:14px;background:rgba(2,6,23,.62);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  animation:oaFadeIn .2s ease both}
.lff-card{width:100%;max-width:460px;padding:20px 18px calc(16px + env(safe-area-inset-bottom,0px));
  border-radius:22px;background:var(--oa-solid,#1E293B);
  border:1px solid var(--premium-border);box-shadow:0 -14px 44px rgba(0,0,0,.55);
  animation:sheetUp .3s cubic-bezier(.32,.72,0,1) both}
.lff-top{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.lff-img{width:58px;height:58px;flex:0 0 auto;border-radius:14px;object-fit:cover;
  border:1px solid var(--premium-border)}
.lff-ico{width:52px;height:52px;flex:0 0 auto;border-radius:16px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#F59E0B,#D97706)}
.lff-t{min-width:0}
.lff-t b{display:block;font-size:17px;font-weight:700;line-height:1.25}
.lff-t i{display:block;font-style:normal;font-size:13px;color:var(--text-muted);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lff-s{margin:0 0 16px;font-size:13.5px;line-height:1.55;color:var(--text-muted)}
.lff-btns{display:flex;flex-direction:column;gap:9px}
.lff-yes,.lff-no{min-height:50px;border:0;border-radius:14px;cursor:pointer;
  font-size:15px;font-weight:700;color:#fff}
.lff-yes{background:linear-gradient(135deg,#10B981,#059669);
  box-shadow:0 6px 18px rgba(16,185,129,.35)}
.lff-no{background:linear-gradient(135deg,#EF4444,#DC2626);
  box-shadow:0 6px 18px rgba(239,68,68,.32)}
.lff-yes:active,.lff-no:active{transform:scale(.985)}
.lff-later{width:100%;margin-top:11px;padding:8px;border:0;background:transparent;
  color:var(--text-muted);font-size:13px;cursor:pointer;text-decoration:underline}

/* ---- Quick guide: one row in Profile, opening a full page ---- */
.oaqg-row{
  display:flex!important;align-items:center;gap:12px;width:100%;
  min-height:66px;padding:12px 14px;margin:16px 0;cursor:pointer;text-align:left}
.oaqg-ico{width:38px;height:38px;flex:0 0 auto;border-radius:12px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark))}
.oaqg-ico svg{width:20px;height:20px}
.oaqg-ico.sm{width:34px;height:34px;border-radius:11px}
.oaqg-ico.sm svg{width:18px;height:18px}
.oaqg-t{flex:1 1 auto;min-width:0}
.oaqg-t b{display:block;font-size:15px;font-weight:600;color:var(--text)}
.oaqg-t i{display:block;font-style:normal;font-size:12.5px;color:var(--text-muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.oaqg-chev{color:var(--text-muted);font-size:22px;opacity:.6;flex:0 0 auto}

.oaqg-page{position:fixed;inset:0;z-index:2147483400;display:flex;flex-direction:column;
  background:var(--bg,#0F172A);animation:oaFadeIn .18s ease both}
.oaqg-page .oaqg-head{display:flex;align-items:center;gap:10px;flex:0 0 auto;
  padding:calc(12px + env(safe-area-inset-top,0px)) 14px 12px;
  background:var(--oa-solid,#1E293B);border-bottom:1px solid var(--premium-border)}
.oaqg-page .oaqg-head b{font-size:18px;font-weight:700}
.oaqg-back{width:40px;height:40px;flex:0 0 auto;border:0;border-radius:50%;cursor:pointer;
  font-size:26px;line-height:1;color:var(--text);
  background:color-mix(in srgb,var(--surface-raised) 90%,transparent)}
.oaqg-body{flex:1 1 auto;overflow-y:auto;padding:14px 14px calc(24px + env(safe-area-inset-bottom,0px))}
.oaqg-intro{margin:0 0 14px;font-size:13.5px;color:var(--text-muted)}
.oaqg-page .oaqg-item{display:flex;align-items:center;gap:12px;width:100%;min-height:66px;
  padding:12px 14px;margin-bottom:10px;cursor:pointer;text-align:left;
  border-radius:var(--oa-radius,18px);background:var(--oa-solid,#1E293B);
  border:1px solid var(--premium-border);box-shadow:var(--oa-shadow)}
.oaqg-page .oaqg-item:active{transform:scale(.995)}
.oaqg-reset{width:100%;margin-top:6px;min-height:48px;border-radius:14px;cursor:pointer;
  background:transparent;color:var(--text-muted);border:1px solid var(--premium-border);
  font-size:13.5px;font-weight:600}

/* hide the thread for the few frames it takes to land on the newest message,
   so the user never sees it scroll from the top */
.senior-anon-room.oa-chat-settling .anon-chat-thread{visibility:hidden}
.senior-anon-room.oa-chat-settling{scroll-behavior:auto!important}

/* ---- WhatsApp-style "@" jump-to-reply badge ---- */
.oa-atbadge{
  position:fixed;right:14px;z-index:1150;
  bottom:calc(120px + env(safe-area-inset-bottom,0px) + var(--kb,0px));
  width:50px;height:50px;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:21px;font-weight:800;
  background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark));
  box-shadow:0 8px 22px rgba(var(--color-primary-rgb),.5);
  animation:oaFadeIn .2s ease both;transition:bottom .18s ease-out}
.oa-atbadge:active{transform:scale(.94)}
.oa-atn{position:absolute;top:-3px;right:-3px;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;background:#EF4444;color:#fff;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  border:2px solid var(--oa-solid,#1E293B)}
@keyframes oaJump{0%,100%{box-shadow:0 0 0 0 rgba(var(--color-primary-soft-rgb),0)}
  30%{box-shadow:0 0 0 4px rgba(var(--color-primary-soft-rgb),.55)}}
.anon-chat-bubble.oa-jump{animation:oaJump 1.1s ease 2}

/* ---- tour: arrow indicator + page locked while touring ---- */
.oat-arrow{position:fixed;z-index:2147483595;width:0;height:0;pointer-events:none;
  transform:translateX(-50%);filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
  animation:oaArrow 1.1s ease-in-out infinite}
.oat-arrow.down{border-left:13px solid transparent;border-right:13px solid transparent;
  border-top:16px solid var(--color-primary-soft)}
.oat-arrow.up{border-left:13px solid transparent;border-right:13px solid transparent;
  border-bottom:16px solid var(--color-primary-soft)}
@keyframes oaArrow{0%,100%{margin-top:0}50%{margin-top:5px}}
.oat-arrow.up{animation-name:oaArrowUp}
@keyframes oaArrowUp{0%,100%{margin-top:0}50%{margin-top:-5px}}
html.oat-locked,html.oat-locked body{overscroll-behavior:none!important}
@media(prefers-reduced-motion:reduce){.oat-arrow{animation:none}}

/* ---- Saved: label the collections bar so it is findable ---- */
.oa-col-head{display:flex;flex-direction:column;gap:2px;margin:4px 2px 8px}
.oa-col-head b{font-size:15px;font-weight:700;color:var(--text)}
.oa-col-head span{font-size:12.5px;color:var(--text-muted)}

/* ---- Admin: Lost & Found records ---- */
.lfa-row{padding:14px}
.lfa-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.lfa-lost{color:#F59E0B;background:rgba(245,158,11,.14)}
.lfa-found{color:#10B981;background:rgba(16,185,129,.14)}
.lfa-pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.lfa-good{color:#10B981;background:rgba(16,185,129,.14)}
.lfa-bad{color:#EF4444;background:rgba(239,68,68,.13)}
.lfa-wait{color:#F59E0B;background:rgba(245,158,11,.14)}
.lfa-open{color:var(--color-primary-light);background:rgba(var(--color-primary-rgb),.16)}
.lfa-img{width:100%;max-height:190px;object-fit:cover;border-radius:12px;margin-bottom:10px}
.lfa-title{font-size:15.5px;font-weight:700;margin-bottom:4px}

/* the guide card moves to the TOP when the highlighted feature is tall,
   so the thing being explained is never hidden behind it */
.oat-wrap.oat-top{align-items:flex-start!important}
.oat-wrap.oat-top .oat-card{
  margin-top:calc(8px + env(safe-area-inset-top,0px));
  animation:oaFadeIn .24s ease both}

/* When the card sits at the top it shares the screen with a tall feature —
   keep it compact so the highlighted feature is never covered. */
.oat-wrap.oat-top .oat-card{padding:14px 16px 12px}
.oat-wrap.oat-top .oat-head{margin-bottom:8px}
.oat-wrap.oat-top .oat-ico{width:36px;height:36px;border-radius:11px}
.oat-wrap.oat-top .oat-ico svg{width:19px;height:19px}
.oat-wrap.oat-top .oat-htext b{font-size:15px}
.oat-wrap.oat-top .oat-htext i{display:none}
.oat-wrap.oat-top .oat-step{margin-bottom:10px;font-size:14px}
.oat-wrap.oat-top .oat-dots{margin-bottom:10px}
.oat-wrap.oat-top .oat-skip,
.oat-wrap.oat-top .oat-next{min-height:42px;font-size:14px}
.oat-wrap.oat-top .oat-off{margin-top:8px;font-size:12px}
/* ============================================================================
 * FIX: Anonymous chat — constrain message thread to scroll above the composer.
 * The chat composer is portaled to document.body (position fixed at the bottom),
 * so we make the thread a flex:1 internal scroll area with enough bottom padding
 * to clear the fixed composer. New messages therefore always appear ABOVE the box.
 * ========================================================================= */
.senior-anon-room:has(.anon-chat-thread){display:flex;flex-direction:column;height:calc(100dvh - var(--oa-banner-h, 0px));overflow:hidden}
.senior-anon-room:has(.anon-chat-thread) .page{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;max-width:none;width:100%;padding-bottom:0}
.senior-anon-room:has(.anon-chat-thread) .page > div:has(> .anon-chat-thread){flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.senior-anon-room:has(.anon-chat-thread) .anon-chat-thread{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 10px 120px!important}

/* ============================================================================
 * FIX: Floating Action Buttons must stay fixed on scroll.
 * .page-enter{animation:...both} retains transform:matrix() after it finishes,
 * which becomes a containing block that traps position:fixed children (the FABs).
 * With fill-mode none, after the enter animation the transform is cleared, so
 * fixed descendants (fab-host, etc.) escape to the viewport and stay put.
 * ========================================================================= */
.page-enter{animation-fill-mode:none!important}
.page-enter:has(.fab-host){animation-fill-mode:none!important}

/* ============================================================================
 * PROFILE DROPDOWN — modern premium pop menu (STUDENT HUB blue theme).
 * ========================================================================= */
.oa-profile-dd-trigger{position:relative;margin-left:auto}
.oa-profile-dd-trigger.open{background:var(--surface-deep)!important}
.oa-profile-dd-menu{position:fixed;z-index:1300;min-width:218px;padding:6px;border-radius:16px;background:var(--surface);border:1px solid rgba(148,163,184,.25);box-shadow:0 18px 44px rgba(15,23,42,.22),0 4px 12px rgba(15,23,42,.1);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;transition:opacity .18s ease,transform .2s cubic-bezier(.34,1.4,.64,1),visibility .18s}
.oa-profile-dd-menu.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.oa-profile-dd-item{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border:none;background:transparent;color:var(--text-primary);font-size:14px;font-weight:600;font-family:var(--font-body);border-radius:11px;cursor:pointer;text-align:left;transition:background .14s ease}
.oa-profile-dd-item:hover{background:var(--surface-deep)}
.oa-profile-dd-item:active{transform:scale(.98)}
.oa-profile-dd-ico{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark))}
.oa-profile-dd-item:nth-child(3) .oa-profile-dd-ico{background:linear-gradient(135deg,#a78bfa,#7c3aed)}
.oa-profile-dd-item:nth-child(4) .oa-profile-dd-ico{background:linear-gradient(135deg,#34d399,#059669)}
.oa-profile-dd-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
@media (prefers-reduced-motion: reduce){.oa-profile-dd-menu{transition:none;transform:none}}

/* ============================================================================
 * ANONYMOUS CHAT — premium messaging polish (STUDENT HUB blue theme).
 * Improves the chat header, status, privacy note, composer and bubbles for a
 * modern, clean look while keeping every existing action and route intact.
 * ========================================================================= */
.anon-privacy-note{border:1px solid rgba(var(--color-primary-rgb),.16);background:linear-gradient(135deg,rgba(var(--color-primary-rgb),.07),rgba(var(--color-primary-rgb),.02));border-radius:14px;padding:10px 13px;font-size:12.5px;color:var(--text-secondary);margin:4px 2px 8px}
.anon-chat-status{color:#16a34a;font-size:11px;font-weight:700;padding:2px 6px}
.anon-chat-status::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;margin-right:6px;vertical-align:middle;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:oaLive 2.2s ease-out infinite}
@keyframes oaLive{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 6px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.senior-anon-room .anon-chat-composer{background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(148,163,184,.22);box-shadow:0 -4px 20px rgba(15,23,42,.06),0 8px 28px rgba(15,23,42,.1)}
.anon-chat-bubble.mine{background:linear-gradient(150deg,var(--color-primary-soft),var(--color-primary) 60%,var(--color-primary-dark))!important;box-shadow:0 3px 10px rgba(var(--color-primary-rgb),.28)!important}
.anon-chat-bubble.theirs{background:var(--surface)!important;border:1px solid rgba(148,163,184,.16)!important;box-shadow:0 2px 8px rgba(15,23,42,.08)!important}
.anon-chat-bubble{font-size:14.5px;line-height:1.5}
.anon-chat-bubble .u-sub{font-size:10.5px;letter-spacing:.02em}
.anon-reply-chip{background:linear-gradient(135deg,rgba(var(--color-primary-rgb),.1),rgba(var(--color-primary-rgb),.04));border-left:3px solid var(--color-primary);border-radius:10px;padding:8px 12px;margin-bottom:8px}
.anon-reply-chip .arc-text b{color:var(--color-primary)}
.anon-chat-thread .anon-chat-bubble .anon-actions{margin-top:8px}
@media (prefers-reduced-motion: reduce){.anon-chat-status::before{animation:none}}

/* ============================================================================
 * MODERN EXPANDING SEARCH BAR (STUDENT HUB blue theme).
 * Compact circular control expands into a search field; smooth, fast, mobile +
 * desktop friendly. Connects to the real /search route (which auto-runs on ?q=).
 * ========================================================================= */
.oa-search-bar{position:relative;flex:0 0 auto}
.oa-search-bar-btn{transition:background-color .18s ease,transform .12s ease}
.oa-search-bar-btn:hover{background:var(--surface-deep)}
.oa-search-bar-btn:active{transform:scale(.92)}
.oa-search-bar-field{position:absolute;top:50%;right:42px;transform:translateY(-50%);width:0;height:40px;overflow:hidden;opacity:0;visibility:hidden;border-radius:22px;background:var(--surface);border:1.5px solid rgba(var(--color-primary-rgb),.4);box-shadow:0 8px 22px rgba(15,23,42,.16);transition:width .32s cubic-bezier(.34,1.4,.64,1),opacity .2s ease,visibility .2s;z-index:1350;display:flex;align-items:center}
.oa-search-bar-field input{width:100%;min-width:0;height:100%;border:none;background:transparent;color:var(--text-primary);font-family:var(--font-body);font-size:15px;padding:0 14px;outline:none;-webkit-appearance:none}
.oa-search-bar-field input::placeholder{color:var(--text-muted);opacity:.75}
.oa-search-bar.open .oa-search-bar-field{width:min(62vw,320px);opacity:1;visibility:visible}
.oa-search-bar.open .oa-search-bar-btn{color:var(--primary);background:var(--surface-deep)}
.top-bar .oa-search-bar{padding:0 2px}
@media (prefers-reduced-motion: reduce){.oa-search-bar-field,.oa-search-bar-btn{transition:none}}

/* ============================================================================
 * ADMIN SIDEBAR — premium collapse (desktop icon rail, mobile stays a row).
 * Toggles via .oa-admin-collapsed on .admin-shell. Preserves every admin route.
 * ========================================================================= */
.oa-admin-collapse{display:none}
.admin-shell.oa-admin-collapsed{grid-template-columns:74px minmax(0,1fr)}
@media (min-width:900px){
  .oa-admin-collapse{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:11px;border:1px solid rgba(148,163,184,.18);background:rgba(255,255,255,.05);color:#cbd5e1;cursor:pointer;margin:12px auto 4px;transition:background .16s ease,color .16s ease,transform .12s ease}
  .oa-admin-collapse:hover{background:rgba(255,255,255,.12);color:#fff}
  .oa-admin-collapse:active{transform:scale(.94)}
}
.admin-shell.oa-admin-collapsed .admin-sidebar .admin-brand span:last-child,
.admin-shell.oa-admin-collapsed .admin-sidebar .admin-nav-group,
.admin-shell.oa-admin-collapsed .admin-sidebar .admin-nav-item > span:not(:first-child){display:none!important}
.admin-shell.oa-admin-collapsed .admin-sidebar .admin-nav-item .badge,
.admin-shell.oa-admin-collapsed .admin-sidebar .admin-side-foot{opacity:0;width:0;height:0;overflow:hidden;margin:0;padding:0}
.admin-shell.oa-admin-collapsed .admin-sidebar .admin-nav-item{justify-content:center;padding:10px 0}
.admin-shell.oa-admin-collapsed .admin-sidebar .admin-nav-item svg{margin:0}
.admin-shell.oa-admin-collapsed .admin-sidebar{width:74px!important;padding-left:8px!important;padding-right:8px!important;min-width:74px!important}
.admin-shell.oa-admin-collapsed .admin-brand{justify-content:center;padding:6px 0}
@media (prefers-reduced-motion: reduce){.oa-admin-collapse{transition:none}}

/* ============================================================================
 * CHAT SETTINGS DROPDOWN — modern premium pop menu (STUDENT HUB blue theme).
 * ========================================================================= */
.oa-chat-more-btn{position:relative}
.oa-chat-more-btn.open{background:var(--surface-deep)!important}
.oa-chat-more-menu{position:fixed;z-index:1300;min-width:200px;padding:6px;border-radius:16px;background:var(--surface);border:1px solid rgba(148,163,184,.25);box-shadow:0 18px 44px rgba(15,23,42,.22),0 4px 12px rgba(15,23,42,.1);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);opacity:0;visibility:hidden;transform:translateY(-8px) scale(.97);transform-origin:top right;transition:opacity .18s ease,transform .2s cubic-bezier(.34,1.4,.64,1),visibility .18s}
.oa-chat-more-menu.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.oa-chat-more-item{display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border:none;background:transparent;color:var(--text-primary);font-size:14px;font-weight:600;font-family:var(--font-body);border-radius:11px;cursor:pointer;text-align:left;transition:background .14s ease}
.oa-chat-more-item:hover{background:var(--surface-deep)}
.oa-chat-more-item:active{transform:scale(.98)}
.oa-chat-more-ico{width:30px;height:30px;flex:0 0 30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark))}
.oa-chat-more-item:nth-child(2) .oa-chat-more-ico{background:linear-gradient(135deg,#34d399,#059669)}
.oa-chat-more-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px}
@media (prefers-reduced-motion: reduce){.oa-chat-more-menu{transition:none;transform:none}}

/* ============================================================================
 * PREMIUM LIQUID NAVIGATION — a real sliding indicator, STUDENT HUB blue.
 * A single cohesive design that overrides the legacy nav rules so the bar is a
 * floating frosted pill with a soft raised indicator that slides between tabs
 * (driven by oa-navbar.js). Routing + badges are preserved. The nav still hides
 * on keyboard-open / viewer / editor screens via the existing (more-specific)
 * body:has(...) / html.kb-open rules.
 * ========================================================================= */
.bottom-nav{position:fixed!important;left:50%!important;right:auto!important;bottom:calc(env(safe-area-inset-bottom,0px) + 12px)!important;width:min(680px,calc(100% - 24px))!important;height:66px!important;padding:6px 8px!important;align-items:center!important;justify-content:space-around!important;gap:2px!important;border-radius:24px!important;border:1px solid rgba(var(--color-primary-rgb),.16)!important;background:color-mix(in srgb,var(--surface) 86%,transparent)!important;backdrop-filter:blur(22px) saturate(170%)!important;-webkit-backdrop-filter:blur(22px) saturate(170%)!important;box-shadow:var(--oa-sh-3)!important;overflow:visible!important;z-index:60!important;animation:none!important;transform:translateX(-50%)}
.bottom-nav.oa-nav-hidden{transform:translateY(calc(100% + 30px)) translateX(-50%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:transform .26s var(--oa-ease),opacity .2s ease,visibility .2s!important}
.oa-nav-indicator{position:absolute!important;top:6px!important;bottom:6px!important;left:8px!important;border-radius:18px!important;background:linear-gradient(135deg,rgba(var(--color-primary-soft-rgb),.20),rgba(var(--color-primary-rgb),.10))!important;border:1px solid rgba(var(--color-primary-rgb),.16)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 18px rgba(var(--color-primary-rgb),.18)!important;transition:transform .42s var(--oa-ease),width .42s var(--oa-ease)!important;pointer-events:none!important;z-index:0!important;will-change:transform,width}
.bottom-nav .nav-tab{flex:1 1 0!important;position:relative!important;z-index:1!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;padding:6px 2px!important;background:transparent!important;border:none!important;box-shadow:none!important;border-radius:0!important;color:var(--text-muted)!important;font-size:10.5px!important;font-weight:600!important;font-family:var(--font-body)!important;min-width:0!important;min-height:0!important;cursor:pointer!important;transition:color .22s var(--oa-ease)!important;transform:none!important}
.bottom-nav .nav-tab:active{transform:scale(.94)!important}
.bottom-nav .nav-tab .nav-icon{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:26px!important;height:26px!important;overflow:visible!important;transition:transform .3s var(--oa-ease)!important}
.bottom-nav .nav-tab .nav-icon::after{display:none!important;content:""!important}
.bottom-nav .nav-tab.active{color:var(--ds-primary)!important;background:transparent!important;box-shadow:none!important}
.bottom-nav .nav-tab.active .nav-icon{transform:translateY(-1px) scale(1.1)!important}
.bottom-nav .nav-tab > span:last-child{line-height:1;letter-spacing:.01em;transition:color .22s var(--oa-ease)!important}
.bottom-nav .nav-tab.active > span:last-child{color:var(--ds-primary)!important;font-weight:700}
.bottom-nav .nav-tab .chat-nav-badge{border-color:color-mix(in srgb,var(--ds-primary) 30%,var(--ds-surface-raised))!important}
@media (prefers-reduced-motion: reduce){.oa-nav-indicator,.bottom-nav .nav-tab .nav-icon,.bottom-nav .nav-tab{transition:none!important}}



/* ============================================================================
 * NOTES FILTER SIDEBAR — responsive right-side drawer with a clean filter icon.
 * Converts the Notes filter bottom sheet into a premium right sidebar. A clean
 * funnel icon sits at the top of the Notes page; tapping it opens the drawer,
 * which slides in from the right with a smooth reveal. Reuses the existing
 * real filter controls (Level/Semester/Faculty/Department/Course/Year) and the
 * existing Reset/Show-materials actions — nothing functional is replaced.
 * Scoped to the Notes page (.oa-filter-sheet).
 * ========================================================================= */
.senior-notes-page .oa-filter-bar,.oa-filter-bar{position:sticky;top:calc(56px + env(safe-area-inset-top,0px));z-index:9;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:4px 2px 8px;margin:0 -2px}
.oa-note-filter-ico{flex:0 0 auto;width:44px;height:44px;border-radius:14px;border:none;background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark));color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease,filter .16s ease;box-shadow:0 4px 12px rgba(var(--color-primary-rgb),.45);z-index:5}
.oa-note-filter-ico:hover{background:linear-gradient(135deg,rgba(var(--color-primary-rgb),.16),rgba(var(--color-primary-rgb),.06))}
.oa-note-filter-ico:active{transform:scale(.94)}
.oa-note-filter-ico 
/* Left-side drawer for the existing filter sheet (stable, no conflicting animation) */
.senior-notes-page .oa-sheet-wrap{display:flex;justify-content:flex-start;align-items:stretch}
.senior-notes-page .oa-sheet{animation:none!important;position:absolute!important;left:0!important;right:auto!important;top:0!important;bottom:0!important;max-height:100%!important;width:min(320px,88vw)!important;height:100%!important;border-radius:0 20px 20px 0!important;border-right:1px solid rgba(var(--color-primary-rgb),.16)!important;border-top:none!important;transform:translateX(-100%);transition:transform .3s var(--oa-ease)!important;box-shadow:18px 0 44px rgba(15,23,42,.28)!important}
.senior-notes-page .oa-sheet-in{animation:none!important;will-change:auto!important}
.senior-notes-page .oa-sheet-backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(2,6,23,.55)}
.senior-notes-page .oa-sheet-wrap.oa-open .oa-sheet{transform:translateX(0)!important}
.senior-notes-page .oa-sheet-grip{display:none!important}
.senior-notes-page .oa-sheet-head{padding:18px 18px 14px!important;border-bottom:1px solid rgba(var(--color-primary-rgb),.12)!important}
.senior-notes-page .oa-sheet-head h3{font-size:16px!important;font-weight:800;letter-spacing:-.01em}
.senior-notes-page .oa-sheet-body{padding:16px 18px 20px!important;flex:1 1 auto;overflow-y:auto}
.senior-notes-page .oa-sheet-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom))!important}
.senior-notes-page .oa-sheet-x{width:34px;height:34px;border-radius:11px;border:1px solid rgba(148,163,184,.18);background:var(--surface-deep);color:var(--text);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer}

.senior-notes-page .oa-sheet, .senior-notes-page .oa-sheet-in{animation:none!important}
@media (prefers-reduced-motion: reduce){.senior-notes-page .oa-sheet{transition:none!important}}

body.oa-notes-sidebar-open{overflow:hidden!important}
body.oa-notes-sidebar-open .senior-notes-page .oa-sheet{transform:translateX(0)!important}

/* ============================================================================
 * NOTES FILTER SIDEBAR — cool "content emerges from the filter" animation.
 * Springy drawer entrance with a soft overshoot, then the filter controls
 * cascade in one-by-one (staggered fade + rise + pop) — like results coming
 * out of the filter. The filter icon pulses on open. Respects reduced motion.
 * ========================================================================= */
.senior-notes-page .oa-sheet-wrap.oa-open .oa-sheet{transition:transform .42s cubic-bezier(.34,1.4,.48,1)!important}
@keyframes oaFdRise{0%{opacity:0;transform:translateX(-18px)}60%{opacity:1;transform:translateX(3px)}100%{opacity:1;transform:translateX(0)}}
.senior-notes-page.oa-notes-anim .oa-sheet-head,
.senior-notes-page.oa-notes-anim .oa-fs,
.senior-notes-page.oa-notes-anim .oa-sheet-foot{opacity:0;animation:oaFdRise .42s cubic-bezier(.22,1,.36,1) forwards}
.senior-notes-page.oa-notes-anim .oa-sheet-head{animation-delay:.06s}
.senior-notes-page.oa-notes-anim .oa-fs:nth-of-type(1){animation-delay:.14s}
.senior-notes-page.oa-notes-anim .oa-fs:nth-of-type(2){animation-delay:.20s}
.senior-notes-page.oa-notes-anim .oa-fs:nth-of-type(3){animation-delay:.26s}
.senior-notes-page.oa-notes-anim .oa-fs:nth-of-type(4){animation-delay:.32s}
.senior-notes-page.oa-notes-anim .oa-fs:nth-of-type(5){animation-delay:.38s}
.senior-notes-page.oa-notes-anim .oa-fs:nth-of-type(6){animation-delay:.44s}
.senior-notes-page.oa-notes-anim .oa-sheet-foot{animation-delay:.50s}
.oa-note-filter-ico.oa-open-pulse{animation:oaIcoPulse .5s var(--oa-ease)}
@keyframes oaIcoPulse{0%{transform:scale(1)}40%{transform:scale(1.16)}100%{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.senior-notes-page.oa-notes-anim .oa-sheet-head,.senior-notes-page.oa-notes-anim .oa-fs,.senior-notes-page.oa-notes-anim .oa-sheet-foot,.oa-note-filter-ico.oa-open-pulse{animation:none!important;opacity:1!important}}

/* FIX: keep the last anonymous chat message clear of the composer.
   A later generic rule (.anon-chat-thread{gap:10px!important;padding-bottom:6px})
   overrode the 120px clearance, so the newest message could hide under the
   fixed composer. This scoped rule (higher specificity) restores the clearance. */
.senior-anon-room:has(.anon-chat-thread) .anon-chat-thread{overflow-y:auto;padding:12px 10px 120px!important}

/* ============================================================================
 * ANONYMOUS CHAT FOCUS — clean dedicated chat screen.
 * When .oa-chat-mode is present (chat tab active), hide the feed hero + tabs
 * and make the conversation fill the screen. Privacy/status info is compacted
 * so it doesn't crowd the thread. Feed tabs are unchanged when not in chat.
 * ========================================================================= */
.senior-anon-room.oa-chat-mode .anon-hero-head,
.senior-anon-room.oa-chat-mode .anonymous-main-tabs,
.senior-anon-room.oa-chat-mode .anon-privacy-note,
.senior-anon-room.oa-chat-mode .anon-chat-status,
.senior-anon-room.oa-chat-mode .anon-pinned-message{display:none!important}
.senior-anon-room.oa-chat-mode{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.senior-anon-room.oa-chat-mode .page{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
.senior-anon-room.oa-chat-mode .anon-chat-thread{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 10px 170px!important}
.senior-anon-room.oa-chat-mode .anon-chat-composer{flex:0 0 auto;margin:4px 10px calc(8px + env(safe-area-inset-bottom,0px));width:auto}
@media (prefers-reduced-motion: reduce){.senior-anon-room.oa-chat-mode .anon-chat-thread,.oa-chat-mode .anon-chat-composer{transition:none!important}}

/* ============================================================================
 * MODERN MESSAGE COMPOSER — cleaner, more professional input area.
 * Applies to anonymous + direct chat composers: frosted surface, tighter
 * spacing, a clear circular send button, and a cleaner reply preview chip.
 * Preserves all existing attachments/media/emoji functionality.
 * ========================================================================= */
.anon-chat-composer{background:color-mix(in srgb,var(--surface) 88%,transparent)!important;backdrop-filter:blur(18px) saturate(150%)!important;-webkit-backdrop-filter:blur(18px) saturate(150%)!important;border:1px solid rgba(var(--color-primary-rgb),.18)!important;box-shadow:0 8px 28px rgba(15,23,42,.12)!important;border-radius:22px!important}
.anon-composer-row .icon-btn{width:38px;height:38px;border-radius:12px;background:transparent;color:var(--text-secondary);transition:background .15s ease,color .15s ease}
.anon-composer-row .icon-btn:active{transform:scale(.92)}
.anon-reply-chip{background:linear-gradient(135deg,rgba(var(--color-primary-rgb),.12),rgba(var(--color-primary-rgb),.04))!important;border-left:3px solid var(--color-primary)!important;border-radius:12px!important;padding:8px 12px!important;margin-bottom:8px!important}
.anon-reply-chip .arc-text b{color:var(--color-primary)!important}
.anon-reply-chip .arc-x{width:26px;height:26px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;background:rgba(148,163,184,.15);color:var(--text-secondary);border:none;cursor:pointer}
/* Clear circular send action */
.anon-composer-row > button:last-child{width:42px;height:42px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark));color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(var(--color-primary-rgb),.35);cursor:pointer;transition:transform .12s ease,box-shadow .15s ease}
.anon-composer-row > button:last-child:active{transform:scale(.92)}
@media (prefers-reduced-motion: reduce){.anon-chat-composer,.anon-reply-chip{transition:none!important}}



/* ============================================================================
 * ANONYMOUS CHAT — clean compact search.
 * The anonymous chat search is styled as a neat, unobtrusive pill that sits
 * above the thread without crowding it. Keeps the existing search behavior.
 * ========================================================================= */
.senior-anon-room .input-3d[placeholder*="Search chat"],
.senior-anon-room input[placeholder*="Search chat"]{border-radius:20px!important;min-height:42px;background:var(--oa-solid-2)!important;border:1px solid rgba(148,163,184,.18)!important;box-shadow:none!important;font-size:14px}
.senior-anon-room.oa-chat-mode .page > div:first-child{max-width:100%}
.senior-anon-room.oa-chat-mode .anon-chat-thread{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 10px 170px!important}

/* ============================================================================
 * ANONYMOUS CHAT — jump-to-bottom button.
 * A floating round button that appears above the composer when the user
 * scrolls up; tapping returns to the latest messages instantly.
 * ========================================================================= */


/* ===== Anonymous Private Chat: dedicated modern chat screen ===== */
.oa-pchat{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.oa-pchat .page{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:0!important;max-width:none;width:100%}
.oa-pchat .page > .col{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px 10px 170px!important;gap:6px}
.oa-pchat .page > .col > .card-3d{display:block;width:auto;max-width:82%;border-radius:16px;padding:8px 12px;margin:3px 0;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.oa-pchat .page > .col > .card-3d.oa-pchat-mine{margin-left:auto;background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark))!important;color:#fff;border-top-right-radius:4px;border-bottom-right-radius:16px}
.oa-pchat .page > .col > .card-3d:not(.oa-pchat-mine){margin-right:auto;background:var(--surface);border-top-left-radius:4px;border-bottom-left-radius:16px}
.oa-pchat .page > .col > .card-3d.oa-pchat-mine .u-sub{color:#dbeafe}
.oa-pchat .page > .col > .card-3d .u-sub{opacity:.8;font-size:11px}
.oa-pchat .page > .col > .card-3d > .row > span{font-size:12.5px}
.oa-pchat .page > .row.mt-12{flex:0 0 auto;margin:0!important;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));display:flex;align-items:flex-end;gap:8px;background:var(--surface-raised);border-top:1px solid rgba(148,163,184,.15)}
.oa-pchat .page > .row.mt-12 .ux-chat-textarea{flex:1;border-radius:20px;padding:10px 14px;background:var(--surface);border:1px solid rgba(148,163,184,.25);color:inherit;font-size:15px;line-height:1.4;max-height:110px;resize:none;outline:none;min-width:0}
.oa-pchat .page > .row.mt-12 button{width:42px;height:42px;flex:0 0 auto;border-radius:50%;background:linear-gradient(135deg,var(--color-primary-soft),var(--color-primary-dark));border:none;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(var(--color-primary-rgb),.4)}

/* =========================================================================
 * STUDENT HUB COHESIVE CHAT + NOTES DESIGN SYSTEM (applied over existing DOM)
 * Unifies Anonymous / Private / Direct chat and modernizes Notes.
 * Content & state layer untouched.
 * ========================================================================= */

/* ---- Shared modern chat surface (all chat types) ---- */
.senior-chat-room.oa-pchat,
.senior-anon-room.oa-chat-mode {
  background: var(--surface);
}
.senior-chat-room.oa-pchat .page > .row.mt-12,
.oa-chat-mode .anon-chat-composer {
  border-radius: 22px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
  box-shadow: 0 -4px 20px rgba(2,8,23,.12);
}

/* ---- Notes: clean modern card grid ---- */
.senior-notes-page .card-3d {
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: 0 2px 10px rgba(2,8,23,.06);
  transition: transform .14s ease, box-shadow .14s ease;
}
.senior-notes-page .card-3d:active { transform: scale(.985); }

/* ---- Notes: fast-search + filter bar as a single clean surface ---- */
.senior-notes-page .note-fast-search-box {
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.22);
  background: var(--surface-raised);
}
.senior-notes-page .oa-filter-bar {
  gap: 8px;
  scrollbar-width: none;
}
.senior-notes-page .oa-filter-bar::-webkit-scrollbar { display: none; }

/* Direct chat: keep the reaction emoji pill out of the way (above the composer)
   so it doesn't cover/blur the middle of the conversation. */
.wa-react-pop{top:auto!important;bottom:calc(96px + env(safe-area-inset-bottom,0px))!important;left:50%!important;transform:translateX(-50%)!important}

/* Direct/Department chat down-arrow (jump to latest), matches the anon arrow */

/* COMPLETELY remove the emoji reaction popup (+ its blur/overlay) in direct chat */
.wa-react-pop{display:none!important}
.modal-overlay:has(.wa-react-pop){display:none!important}

/* ============================================================================
 * MIDNIGHT NAVY × ELECTRIC BLUE × SLATE — dark premium theme.
 * Appended override: remaps both token systems (legacy + --ds-*) for the dark
 * theme to a deep-navy palette. Surfaces stay navy/slate; blue is reserved for
 * primary actions, active states and unread indicators. Anonymous (wallpaper)
 * surfaces keep a glass translucency so the wallpaper stays visible.
 * ========================================================================== */
:root { --primary-light: var(--color-primary-soft); --primary-hover: var(--color-primary-soft); }

[data-theme="dark"] {
  /* legacy tokens */
  --bg: #0B1220;
  --bg-dark: #0B1220;
  --surface: #111C2E;
  --surface-raised: #17243A;
  --surface-deep: #0B1220;
  --text: #F8FAFC;
  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #94A3B8;
  --primary-light: var(--color-primary-soft);
  --edge-light: rgba(255, 255, 255, .06);
  --edge-shadow: rgba(0, 0, 0, .45);
  --bg-page: radial-gradient(ellipse at 15% -5%, #15233f 0%, #0b1220 52%, #060a12 100%);

  /* senior design tokens */
  --ds-bg: #0B1220;
  --ds-surface: #111C2E;
  --ds-surface-raised: #17243A;
  --ds-surface-strong: #17243A;
  --ds-text: #F8FAFC;
  --ds-text-secondary: #94A3B8;
  --ds-border: #263653;
  --ds-border-strong: #33415E;
  --ds-primary: var(--color-primary);
  --ds-primary-hover: var(--color-primary-soft);
  --ds-primary-light: var(--color-primary-soft);
  --ds-primary-active: var(--color-primary-dark);
  --ds-primary-tint: rgba(var(--color-primary-rgb), .16);
  --ds-success: #22C55E;
  --ds-warning: #F59E0B;
  --ds-error: #EF4444;
  --ds-info: var(--color-primary-soft);
}

/* Anonymous / wallpaper glass — keep translucency, align hue to deep navy */
html[data-ux-wallpaper-tone="dark"] {
  --ds-bg: #0B1220;
  --ds-surface: rgba(11, 18, 32, .78);
  --ds-surface-raised: rgba(17, 28, 46, .86);
  --ds-surface-strong: rgba(23, 36, 58, .88);
  --ds-border: rgba(148, 163, 184, .20);
}

/* Chat bubbles — mine = electric blue, theirs = elevated navy, timestamp slate */
[data-theme="dark"] .wa-bubble.mine,
[data-theme="dark"] .senior-chat-room .wa-bubble.mine { background: var(--color-primary) !important; color: #fff !important; }
[data-theme="dark"] .wa-bubble.theirs,
[data-theme="dark"] .senior-chat-room .wa-bubble.theirs { background: #17243A !important; color: #F8FAFC !important; }
[data-theme="dark"] .wa-bubble.theirs .wa-meta,
[data-theme="dark"] .senior-chat-room .wa-bubble.theirs .wa-meta { color: #94A3B8 !important; }

/* Cards / list items / panels sit at the SURFACE level (#111C2E), while chat
   bubbles and other elevated elements use the raised level (#17243A). */
[data-theme="dark"] .card-3d,
[data-theme="dark"] .list-item,
[data-theme="dark"] .notif-prefs,
[data-theme="dark"] .panel,
[data-theme="dark"] .stat-card {
  background: var(--ds-surface, #111C2E) !important;
}

/* ============================================================================
 * 4-COLOR SYSTEM — Blue + White + Black + Slate.
 * The user wants a restrained palette: ONE accent (Electric Blue var(--color-primary)),
 * black/white text depending on theme, and slate gray for secondary/borders.
 * Removes all other hues (green/red/amber/purple/pink/indigo), all gradients,
 * and the "3D ledge" box-shadows that read as triangles behind icons/circles.
 * ========================================================================== */

/* --- 1. Collapse every accent token into blue / slate ---------------------- */
:root {
  --accent: var(--color-primary);
  --accent-dark: var(--color-primary);
  --accent-grad: var(--color-primary);
  --primary-grad: var(--color-primary);
  --primary-grad-soft: var(--color-primary);
  --primary-light: var(--color-primary-soft);
}
[data-theme="dark"] {
  --accent: var(--color-primary-soft);
  --accent-dark: var(--color-primary);
  --accent-grad: var(--color-primary);
  --primary-grad: var(--color-primary);
  --primary-grad-soft: var(--color-primary);
  --ds-success: var(--color-primary);
  --ds-warning: #94A3B8;
  --ds-error: var(--color-primary);
  --ds-info: var(--color-primary);
  --ds-glow-primary: 0 0 0 4px rgba(var(--color-primary-rgb), .18);
  --ds-glow-success: 0 0 0 4px rgba(var(--color-primary-rgb), .18);
}
:root:not([data-theme="dark"]) {
  --ds-success: var(--color-primary);
  --ds-warning: #64748B;
  --ds-error: var(--color-primary);
  --ds-info: var(--color-primary);
}

/* --- 2. Kill gradients → solid blue (or slate for neutral/neutralized) ----- */
.btn-primary-3d, .btn-accent-3d, .btn-success-3d, .btn-danger-3d,
.icon-badge, .fab, .fab.secondary, .pq-hero,
.category-badge-3d, .file-type-pill {
  background: var(--color-primary) !important;
}
.btn-accent-3d, .btn-success-3d, .btn-danger-3d { background: var(--color-primary) !important; }

/* category badges + file-type pills become a single slate tone */
.cat-academic, .cat-sug, .cat-faculty, .cat-department,
.cat-scholarships, .cat-internships, .cat-events {
  background: var(--color-primary) !important;
}
.ft-pdf, .ft-docx, .ft-ppt, .ft-pptx, .ft-img, .ft-zip, .ft-default {
  background: #64748B !important;
}

/* chat-hub icon badges → single blue */
.senior-chat-hub-page .icon-badge { background: var(--color-primary) !important; }

/* --- 3. Remove the 3D ledge ("triangle" under icons/circles) --------------- */
.btn-primary-3d, .btn-accent-3d, .btn-success-3d, .btn-danger-3d,
.icon-badge, .fab, .fab.secondary, .pq-hero,
.category-badge-3d, .file-type-pill {
  box-shadow: none !important;
}
.btn-primary-3d:active, .btn-accent-3d:active, .btn-success-3d:active,
.btn-danger-3d:active, .fab:active, .fab.secondary:active, .pq-hero:active {
  box-shadow: none !important;
  transform: scale(.97);
}
.anon-quick, .poll-opt, .anon-home-card {
  box-shadow: none !important;
}
.anon-quick:active, .poll-opt:active { transform: scale(.97); }
.switch.on { box-shadow: none !important; }
.chip.primary, .pill { box-shadow: none !important; }

/* --- 4. Icons single colour (driven by currentColor; neutralize colored) --- */
.icon-badge { color: #fff !important; }
.stars { color: var(--color-primary) !important; }

/* ============================================================================
 * HOME — LOST & FOUND SECTION (single-feature home).
 * Professional card list matching the blue/slate system: LOST = filled blue,
 * FOUND = slate. Restrained, well-spaced, touch-friendly.
 * ========================================================================== */
.senior-home-page .oa-hlf {
  margin: 0 0 20px;
  animation: fadeUp .3s ease;
}
.oa-hlf-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.oa-hlf-titles h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.oa-hlf-count { display: block; font-size: 12px; color: var(--text-muted, #94A3B8); margin-top: 2px; }
.oa-hlf-actions { display: flex; gap: 8px; flex-shrink: 0; }
.oa-hlf-report,
.oa-hlf-all {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-size: 13px; font-weight: 700;
  border-radius: 999px; padding: 8px 14px; cursor: pointer;
  border: 1px solid transparent; transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.oa-hlf-report { background: var(--color-primary); color: #fff; }
.oa-hlf-report:active { background: var(--color-primary-deep); }
.oa-hlf-all { background: transparent; color: var(--text-secondary, #64748B); border-color: var(--border, #E5E7EB); }
.oa-hlf-all:active { color: var(--color-primary); border-color: var(--color-primary); }
.oa-hlf-all svg { width: 15px; height: 15px; }

.oa-hlf-list { display: flex; flex-direction: column; gap: 8px; }
.oa-hlf-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; padding: 13px 14px;
  background: var(--surface-raised, #fff); color: var(--text, #0F172A);
  border: 1px solid var(--border, #E5E7EB); border-radius: 14px;
  cursor: pointer; transition: transform .12s ease, border-color .16s ease;
}
.oa-hlf-item:active { transform: scale(.99); border-color: var(--color-primary); }
.oa-hlf-item > svg { width: 16px; height: 16px; color: var(--text-secondary, #94A3B8); flex-shrink: 0; }

.oa-hlf-badge {
  flex-shrink: 0; width: 52px; text-align: center;
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  padding: 4px 0; border-radius: 8px; color: #fff;
}
.oa-hlf-badge.lost { background: var(--color-primary); }
.oa-hlf-badge.found { background: #64748B; }

.oa-hlf-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oa-hlf-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa-hlf-desc { font-size: 12.5px; color: var(--text-secondary, #64748B); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oa-hlf-meta { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--text-secondary, #94A3B8); margin-top: 3px; }
.oa-hlf-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.oa-hlf-meta svg { width: 12px; height: 12px; }
.oa-hlf-status { color: var(--color-primary); font-weight: 700; }
.oa-hlf-status.done { color: #64748B; }

.oa-hlf-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 28px 16px; text-align: center;
  background: var(--surface-raised, #fff); border: 1px dashed var(--border, #E5E7EB); border-radius: 14px;
}
.oa-hlf-empty-ico { width: 44px; height: 44px; border-radius: 50%; background: rgba(var(--color-primary-rgb),.1); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.oa-hlf-empty b { font-size: 14px; }
.oa-hlf-empty span:last-child { font-size: 12.5px; color: var(--text-secondary, #94A3B8); max-width: 260px; }

.oa-hlf-skel { height: 58px; border-radius: 14px; background: var(--surface-raised, #fff); opacity: .6; animation: oaHlfPulse 1.2s ease-in-out infinite; }
@keyframes oaHlfPulse { 0%, 100% { opacity: .45; } 50% { opacity: .8; } }

/* dark theme: keep surfaces on the navy scale */
[data-theme="dark"] .oa-hlf-item,
[data-theme="dark"] .oa-hlf-empty,
[data-theme="dark"] .oa-hlf-skel { background: var(--ds-surface-raised, #17243A); border-color: var(--ds-border, #263653); }
[data-theme="dark"] .oa-hlf-all { border-color: var(--ds-border, #263653); color: var(--ds-text-secondary, #94A3B8); }
[data-theme="dark"] .oa-hlf-badge.found { background: #475569; }

/* ============================================================================
 * EXPANDING SEARCH — clean full-width slide-down (mobile-friendly).
 * Replaces the old width-animation that invaded the screen on small viewports.
 * ========================================================================== */
.oa-search-bar-field {
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
  left: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  transform: translateY(-16px) !important;
  width: auto !important;
  height: 50px !important;
  border-radius: 25px !important;
  background: var(--surface, #fff) !important;
  border: 1.5px solid rgba(var(--color-primary-rgb), .45) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .30) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 0 8px 0 16px !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  overflow: hidden !important;
  transition: opacity .22s ease, transform .3s cubic-bezier(.22, 1, .36, 1), visibility .22s !important;
  z-index: 2000 !important;
}
body.oa-search-open .oa-search-bar-field {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
.oa-search-bar-field input {
  width: 100% !important; min-width: 0 !important; height: 100% !important;
  border: none !important; background: transparent !important;
  color: var(--text-primary) !important; font-family: var(--font-body) !important;
  font-size: 15px !important; padding: 0 !important; outline: none !important; -webkit-appearance: none !important;
}
.oa-search-bar-field input::placeholder { color: var(--text-muted) !important; opacity: .75 !important; }
.oa-search-bar-ico { color: var(--text-muted) !important; display: flex !important; flex: 0 0 auto !important; }
.oa-search-bar-ico svg { width: 18px; height: 18px; }
.oa-search-bar-close {
  flex: 0 0 auto !important; width: 34px !important; height: 34px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  border: none !important; border-radius: 50% !important;
  background: var(--surface-deep) !important; color: var(--text-muted) !important; cursor: pointer !important;
}
.oa-search-bar-close svg { width: 15px; height: 15px; }
.oa-search-bar-backdrop {
  position: fixed !important; inset: 0 !important;
  background: rgba(11, 18, 32, .45) !important;
  -webkit-backdrop-filter: blur(2px) !important; backdrop-filter: blur(2px) !important;
  opacity: 0 !important; pointer-events: none !important;
  transition: opacity .22s ease !important; z-index: 1900 !important;
}
body.oa-search-open .oa-search-bar-backdrop { opacity: 1 !important; pointer-events: auto !important; }

/* ============================================================================
 * HOME — Continue reading + Lost & Found comments.
 * ========================================================================== */
.senior-home-page .oa-home-sections { display: flex; flex-direction: column; gap: 4px; }

.oa-cont { margin: 0 0 14px; }
.oa-cont-root { margin-top: 2px; }
.oa-cont-card {
  display: flex; align-items: center; gap: 12px; width: 100%;
  text-align: left; padding: 13px 14px;
  background: var(--surface-raised, #fff); color: var(--text, #0F172A);
  border: 1px solid var(--border, #E5E7EB); border-radius: 14px;
  cursor: pointer; transition: transform .12s ease, border-color .16s ease;
}
.oa-cont-card:active { transform: scale(.99); border-color: var(--color-primary); }
.oa-cont-card > svg { width: 16px; height: 16px; color: var(--text-secondary, #94A3B8); flex-shrink: 0; }
.oa-cont-ico {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px;
  background: rgba(var(--color-primary-rgb), .12); color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.oa-cont-ico svg { width: 20px; height: 20px; }
.oa-cont-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.oa-cont-kicker { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--color-primary); text-transform: uppercase; }
.oa-cont-title { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa-cont-sub { font-size: 12px; color: var(--text-secondary, #64748B); }
.oa-cont-empty { font-size: 12.5px; color: var(--text-secondary, #94A3B8); padding: 4px 2px; }

/* Lost & Found: item is now a wrapper with a row + expandable comments */
.oa-hlf-item { flex-direction: column; gap: 0; padding: 0; }
.oa-hlf-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; }
.oa-hlf-comment-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  min-width: 34px; height: 34px; padding: 0 10px;
  border: 1px solid var(--border, #E5E7EB); border-radius: 999px;
  background: transparent; color: var(--text-secondary, #64748B);
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.oa-hlf-comment-btn:active { color: var(--color-primary); border-color: var(--color-primary); }
.oa-hlf-comment-btn svg { width: 16px; height: 16px; }

.oa-hlf-comments-slot { display: none; border-top: 1px solid var(--border, #E5E7EB); padding: 10px 14px; }
.oa-hlf-comments-slot.open { display: block; }
.oa-hlf-comments { display: flex; flex-direction: column; gap: 8px; }
.oa-lfc { display: flex; flex-direction: column; gap: 1px; padding: 8px 11px; border-radius: 10px; background: var(--surface, #fff); }
.oa-lfc-body { font-size: 13px; color: var(--text, #0F172A); white-space: pre-wrap; word-break: break-word; }
.oa-lfc-time { font-size: 11px; color: var(--text-secondary, #94A3B8); }
.oa-lfc-none { font-size: 12.5px; color: var(--text-secondary, #94A3B8); }
.oa-lfc-form { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.oa-lfc-form input {
  flex: 1 1 auto; min-width: 0; height: 40px;
  border: 1px solid var(--border, #E5E7EB); border-radius: 12px;
  background: var(--surface, #fff); color: var(--text, #0F172A);
  padding: 0 12px; font-size: 14px; font-family: var(--font-body); outline: none;
}
.oa-lfc-form input:focus { border-color: var(--color-primary); }
.oa-lfc-send {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-primary); color: #fff; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.oa-lfc-send:active { background: var(--color-primary-deep); }
.oa-lfc-send svg { width: 17px; height: 17px; }

/* dark */
[data-theme="dark"] .oa-cont-card,
[data-theme="dark"] .oa-lfc { background: var(--ds-surface-raised, #17243A); border-color: var(--ds-border, #263653); }
[data-theme="dark"] .oa-lfc-form input { background: var(--ds-surface, #111C2E); border-color: var(--ds-border, #263653); color: var(--ds-text, #F8FAFC); }
[data-theme="dark"] .oa-hlf-comment-btn { border-color: var(--ds-border, #263653); color: var(--ds-text-secondary, #94A3B8); }



/* ============================================================================
 * Continue reading — clean note card (home) + reading-history sheet.
 * ========================================================================== */
.oa-note-card {
  display: flex; align-items: center; gap: 13px; width: 100%;
  text-align: left; padding: 14px 15px;
  background: var(--surface-raised, #fff); color: var(--text, #0F172A);
  border: 1px solid var(--border, #E5E7EB); border-radius: 15px;
  cursor: pointer; transition: transform .12s ease, border-color .16s ease, box-shadow .16s ease;
}
.oa-note-card:active { transform: scale(.99); border-color: var(--color-primary); }
.oa-note-file {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-deep)); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.oa-note-file svg { width: 21px; height: 21px; }
.oa-note-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.oa-note-title { font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa-note-sub { font-size: 11.5px; color: var(--text-secondary, #64748B); }
.oa-note-progress { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.oa-note-bar { flex: 1 1 auto; height: 5px; border-radius: 3px; background: var(--surface-deep, #E5E7EB); overflow: hidden; }
.oa-note-fill { display: block; height: 100%; background: var(--color-primary); border-radius: 3px; }
.oa-note-pct { flex: 0 0 auto; font-size: 11.5px; font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.oa-note-resume {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; font-weight: 700; color: var(--color-primary);
}
.oa-note-resume svg { width: 14px; height: 14px; }
.oa-cont-empty { font-size: 12.5px; color: var(--text-secondary, #94A3B8); padding: 6px 2px; }

/* Reading history — a real dedicated page (matches Lost & Found's top-bar + page). */
.oa-hist-page {
  position: fixed; inset: 0; z-index: 6000;
  display: flex; flex-direction: column;
  background: var(--bg-page, #EAF0FB) !important;
  background-color: var(--ds-bg, #ffffff) !important;
  color: var(--ds-text, #0F172A);
  width: 100vw; height: 100dvh;
  animation: oaHistFade .16s ease;
}
@keyframes oaHistFade { from { opacity: 0; } to { opacity: 1; } }
.oa-hist-topbar {
  position: relative !important;
  flex: 0 0 auto !important;
}
.oa-hist-back { width: 40px; height: 40px; }
.oa-hist-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 14px 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
.oa-hist-loading, .oa-hist-empty { font-size: 13px; color: var(--ds-text-secondary, #64748B); text-align: center; padding: 30px 0; }

/* filter: book icon top-right + dropdown */
.oa-hist-filter-wrap { position: relative; flex: 0 0 auto; }
.oa-hist-filter-btn { width: 40px; height: 40px; }
.oa-hist-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 7000;
  min-width: 172px; padding: 6px;
  background: var(--surface-raised, #fff);
  border: 1px solid var(--ds-border, #E5E7EB); border-radius: 14px;
  box-shadow: 0 12px 30px rgba(15,23,42,.18);
  display: flex; flex-direction: column; gap: 2px;
  /* hidden until the book filter is tapped */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px) scale(.97);
  transform-origin: top right;
  transition: opacity .18s ease, transform .22s cubic-bezier(.34,1.4,.64,1), visibility .18s;
}
.oa-hist-menu.open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1);
}
.oa-hist-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border: none; border-radius: 9px; background: transparent;
  color: var(--ds-text, #0F172A); font-size: 14px; font-weight: 600; text-align: left; cursor: pointer;
  transition: background .14s ease;
}
.oa-hist-menu-item:hover { background: var(--surface-deep, #EAF1FC); }
.oa-hist-menu-item.on { color: var(--color-primary); font-weight: 700; }

.oa-hist-day {
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ds-text-secondary, #94A3B8); margin: 14px 0 8px;
}
.oa-hist-day:first-child { margin-top: 0; }

.oa-hist-note {
  display: flex; align-items: center; gap: 10px; width: 100%;
  text-align: left; padding: 10px 12px; margin-bottom: 8px;
  background: var(--surface-raised, #F8FAFC); color: var(--ds-text, #0F172A);
  border: 1px solid var(--ds-border, #E5E7EB); border-radius: 12px;
  cursor: pointer; transition: transform .1s ease, border-color .14s ease;
}
.oa-hist-note:active { transform: scale(.98); border-color: var(--color-primary); }
.oa-hist-note-ico { flex-shrink: 0; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: rgba(var(--color-primary-rgb),.10); color: var(--color-primary); }
.oa-hist-note-ico svg { width: 15px; height: 15px; }
.oa-hist-note-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.oa-hist-note-title { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oa-hist-note-sub { font-size: 10.5px; color: var(--ds-text-secondary, #64748B); }
.oa-hist-bar { width: 100%; height: 3px; border-radius: 2px; background: var(--surface-deep, #E5E7EB); overflow: hidden; margin-top: 3px; }
.oa-hist-fill { display: block; height: 100%; background: var(--color-primary); border-radius: 2px; }
.oa-hist-pct { flex: 0 0 auto; font-size: 11px; font-weight: 800; color: var(--color-primary); font-variant-numeric: tabular-nums; }

/* dark theme (auto via variables + explicit override) */
[data-theme="dark"] .oa-hist-page { background-color: #0B1220 !important; color: #F8FAFC; }
[data-theme="dark"] .oa-hist-note { background: #17243A; border-color: #263653; color: #F8FAFC; }
[data-theme="dark"] .oa-hist-menu { background: #17243A; border-color: #263653; }
[data-theme="dark"] .oa-hist-menu-item { color: #F8FAFC; }
[data-theme="dark"] .oa-hist-menu-item:hover { background: #263653; }
[data-theme="dark"] .oa-hist-note-sub { color: #94A3B8; }
[data-theme="dark"] .oa-hist-bar { background: #334155; }
[data-theme="dark"] .oa-note-bar { background: #334155; }

/* ============================================================================
 * PDF READER — horizontal (book) mode: one full page per view, snap-to-start,
 * no overlap between pages, full height (no top/bottom clipping).
 * ========================================================================== */
.pdf-reader-body .pdf-pages.horizontal {
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  scroll-snap-type: x mandatory !important;
  scroll-behavior: smooth;
}
.pdf-pages.horizontal .pdf-page {
  flex: 0 0 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.pdf-pages.horizontal .pdf-page canvas {
  height: 100% !important;
  width: auto !important;
  max-height: 100% !important;
  max-width: 100% !important;
  object-fit: contain;
}
/* vertical mode: pages fill width, comfortable reading */
.pdf-reader-body .pdf-pages.vertical .pdf-page { width: 100% !important; }
/* bigger reading area */
.pdf-reader-body .pdf-pages { padding-bottom: 56px !important; }





/* ============================================================================
 * WALLPAPER-DRIVEN THEME — when a wallpaper is chosen, the tone adapts the
 * whole app automatically, so the manual dark/light toggle is hidden.
 * ========================================================================== */
html[data-ux-wallpaper]:not([data-ux-wallpaper="default"]) button[aria-label="Toggle theme"] {
  display: none !important;
}

/* ============================================================================
 * SPLASH LOGO — crisp, metallic, premium. Subtle settle + idle float, no
 * rotation and no opacity fade (which made the logo look blurred/washed out).
 * ========================================================================== */
.oa-splash-logo {
  width: 200px;
  height: 200px;
  object-fit: contain;
  display: block;
  /* Logo only, no card or glow behind it. A single soft dark shadow gives a
     subtle lift without any colored halo. */
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .28));
  animation: oaSplashSettle .7s cubic-bezier(.22, 1, .36, 1) both,
             oaSplashFloat 4.5s ease-in-out .9s infinite;
  transform-origin: 50% 50%;
  will-change: transform;
}
@keyframes oaSplashSettle {
  0%   { transform: scale(.9); }
  100% { transform: scale(1); }
}
@keyframes oaSplashFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (max-width: 380px) {
  .oa-splash-logo { width: 168px; height: 168px; }
}
@media (prefers-reduced-motion: reduce) {
  .oa-splash-logo { animation: none; }
}

/* ============================================================================
 * AI-SLOP CLEANUP — remove generic gradient heroes / decorative orbs while
 * keeping the blue brand. Targeted refinements only.
 * ========================================================================== */

/* Notifications hero: purple/indigo/teal gradient + floating orbs → clean blue */
.premium-notification-hero {
  background: var(--color-primary-deep) !important; /* solid brand dark-blue */
  box-shadow: none !important;
}
.premium-notification-hero::before,
.premium-notification-hero::after {
  display: none !important; /* remove decorative floating orbs */
}
.premium-hero-orb {
  background: rgba(255,255,255,.14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Past-questions hero (Notes): purple gradient → solid brand blue */
.pq-hero {
  background: var(--color-primary) !important;
  box-shadow: none !important;
}

/* Welcome banner: keep the accent strip but drop any gradient it may carry */
.welcome-banner-accent {
  background: var(--surface, #fff) !important;
}

/* ============================================================================
 * AI-SLOP CLEANUP — unify the per-type notification accent colours to the
 * single brand blue (icons + labels already differentiate each type).
 * ========================================================================== */
.premium-notification-card.tone-emerald,
.premium-notification-card.tone-green,
.premium-notification-card.tone-violet,
.premium-notification-card.tone-sky,
.premium-notification-card.tone-red,
.premium-notification-card.tone-amber { --tone: var(--color-primary); }
.tone-violet, .tone-sky, .tone-emerald, .tone-amber, .tone-red { --tone: var(--color-primary); }

/* ============================================================================
 * AI-SLOP CLEANUP — trim excess glassmorphism.
 * Cards/panels/admin surfaces are ~90%+ opaque, so backdrop blur is invisible
 * and only costs performance. Keep blur ONLY on genuinely floating surfaces
 * (top-bar, bottom-nav, modals, dropdowns) that sit over content/wallpaper.
 * ========================================================================== */
[data-theme="dark"] .card-3d {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.panel, .stat-card, .admin-main .card-3d,
.admin-sidebar, .admin-table, .admin-table-wrap {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ============================================================================
 * AI-SLOP CLEANUP — admin panel.
 * The Admin Assistant page used purple/indigo/teal/pink gradients + a floating
 * orb as an "AI" signal. Unified to the blue brand + neutral surfaces, orb
 * removed. Admin shell radial glow toned down.
 * ========================================================================== */
.admin-shell {
  background: #080d18 !important; /* flat navy, no radial glow */
}
.admin-assistant-chat,
.admin-assistant-page .card-3d {
  background: var(--surface, #111c2e) !important;
  border-color: var(--ds-border, #263653) !important;
  box-shadow: none !important;
}
.admin-assistant-chat::before {
  display: none !important; /* remove decorative floating orb */
}
.admin-assistant-prompts button {
  --prompt: var(--color-primary) !important;
  background: var(--surface-raised, #17243a) !important;
  box-shadow: none !important;
}

/* ============================================================================
 * CHAT COMPOSER — stable, professional layout.
 * The composer keeps the SAME controls (emoji, +, input, mic, send) whether
 * composing, recording a voice note, or previewing media.
 * ========================================================================== */
.chat-composer > .icon-btn,
.chat-composer > .wa-ripple-host {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
.chat-composer .ux-chat-textarea {
  min-height: 44px;
  max-height: 120px;
  resize: none;
}

/* Recording pill — sits in place of the text box while recording */
.ux-rec-pill {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-radius: 22px;
  background: var(--surface-raised, #f1f5f9);
  border: 1px solid var(--ds-border, #e2e8f0);
}
.ux-rec-dot {
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb),.22);
  animation: oaRecPulse 1s infinite;
}
.ux-rec-time {
  font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
@keyframes oaRecPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb),.22); }
  50%      { box-shadow: 0 0 0 7px rgba(var(--color-primary-rgb),.08); }
}

/* Attachment sheet (photo / video) */
.ux-attach-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ux-attach-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border: 1px solid var(--ds-border, #e2e8f0);
  border-radius: 14px;
  background: var(--surface-raised, #f8fafc);
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease;
}
.ux-attach-opt:active { transform: scale(.97); border-color: var(--color-primary); }
.ux-attach-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(var(--color-primary-rgb), .14);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
}
.ux-attach-icon svg { width: 24px; height: 24px; }
[data-theme="dark"] .ux-attach-icon {
  background: rgba(var(--color-primary-soft-rgb), .18);
  color: var(--color-primary-light);
}
.ux-attach-opt strong { font-size: 14px; color: var(--ds-text, #0f172a); }
.ux-attach-opt small { font-size: 11.5px; color: var(--ds-text-secondary, #64748b); text-align: center; }

/* dark */
[data-theme="dark"] .ux-rec-pill { background: #17243A; border-color: #263653; }
[data-theme="dark"] .ux-attach-opt { background: #17243A; border-color: #263653; }
[data-theme="dark"] .ux-attach-opt strong { color: #F8FAFC; }
[data-theme="dark"] .ux-attach-opt small { color: #94A3B8; }

/* ============================================================================
 * Theme-adaptive overlay tokens + readable collection chips.
 * --card/--bg-elev/--border were never defined in the base themes, so the
 * Notes filter chips, collection chips and the filter sheet always fell back
 * to their DARK fallbacks (#161d2b/#111827) — unreadable dark-on-dark in the
 * light theme. Define them per theme so every chip adapts, and make the
 * "+ New collection" chip clearly legible in both themes.
 * ========================================================================== */
:root {
  --card: #ffffff;
  --bg-elev: #ffffff;
  --border: #e2e8f0;
}
[data-theme="dark"] {
  --card: #17243A;
  --bg-elev: #17243A;
  --border: #263653;
}
.oa-col-chip.add {
  border-style: dashed !important;
  color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  background: rgba(var(--color-primary-rgb), .08) !important;
}
[data-theme="dark"] .oa-col-chip.add {
  color: var(--color-primary-light) !important;
  border-color: var(--color-primary-light) !important;
  background: rgba(var(--color-primary-soft-rgb), .16) !important;
}

/* ============================================================================
 * News feed — category tabs first, scope hidden behind a filter icon.
 * "All / School / Discussion" sit at the top; "All Faculties / My Faculty /
 * My Department" collapse into a filter button that expands with a clean
 * fade/rise animation (native <details>, no JS).
 * ========================================================================== */
.oa-news-cats { display: flex; gap: 8px; overflow-x: auto; }
.oa-news-cats::-webkit-scrollbar { display: none; }
.oa-scope-filter { position: relative; display: inline-block; }
.oa-scope-filter-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface-raised, #fff);
  color: var(--text);
  font-size: 13.5px; font-weight: 600;
  cursor: pointer; list-style: none; user-select: none;
}
.oa-scope-filter-btn::-webkit-details-marker { display: none; }
.oa-scope-filter-btn .oa-scope-caret { transition: transform .2s ease; opacity: .6; }
.oa-scope-filter[open] .oa-scope-caret { transform: rotate(180deg); }
.oa-scope-menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 220px;
  background: var(--bg-elev, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .16);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  animation: oaScopeIn .18s cubic-bezier(.22, 1, .36, 1);
}
@keyframes oaScopeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.oa-scope-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 10px; border: none;
  background: transparent; color: var(--text);
  font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer;
}
.oa-scope-opt:hover { background: rgba(148, 163, 184, .12); }
.oa-scope-opt.active { color: var(--primary, var(--color-primary)); background: color-mix(in srgb, var(--primary, var(--color-primary)) 10%, transparent); }


/* ============================================================================
 * NEWS FEED — professional layout.
 * Clear hierarchy: category → date → title → image → preview → author.
 * Images are prominent full-width with a fixed aspect ratio; text-only posts
 * collapse to a short preview with a "Read more" action (no empty media area).
 * ========================================================================== */
.oa-news-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px !important;
}

.oa-news-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.oa-news-meta .muted { line-height: 1; }

.oa-news-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.2px;
  margin: 1px 0 0;
  color: var(--text);
}

/* prominent, full-width media with a consistent aspect ratio */
.oa-news-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
  background: #0b1220;
  display: block;
  margin: 3px 0 1px;
}
.oa-news-media.oa-news-video {
  object-fit: contain;
  background: #0b1220;
}

.oa-news-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  white-space: pre-wrap;
}

.oa-news-readmore {
  align-self: flex-start;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--primary, var(--color-primary));
  margin-top: 1px;
  cursor: pointer;
}

.oa-news-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 3px;
}
/* ============================================================================
 * Anonymous CHAT composer — identical to the direct/department composer.
 * Replicates the direct composer's computed container (color-mix surface-
 * raised 96% + subtle top shadow + blur) and its 48px send button. Scoped
 * to .anon-chat-composer.anon-composer-v2 (NOT the comment sheets).
 * ========================================================================== */

/* container: flat bar, matching .senior-chat-room > .row:last-of-type */
body > .anon-chat-composer.anon-composer-v2,
.senior-anon-room .anon-chat-composer.anon-composer-v2,
.anon-chat-composer.anon-composer-v2 {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: var(--kb, 0px) !important;
  z-index: 1100;
  margin: 0 !important;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
  gap: 6px !important;
  align-items: flex-end !important;
  background: color-mix(in srgb, var(--ds-surface-raised, var(--surface)) 96%, transparent) !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: 0 -8px 22px rgba(15, 23, 42, .10) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* input row: simple flex, gap matching direct */
.anon-chat-composer.anon-composer-v2 > .anon-composer-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

/* icons: bordered, same as direct */
.anon-chat-composer.anon-composer-v2 .anon-composer-row > .icon-btn,
.anon-chat-composer.anon-composer-v2 .anon-composer-row > label.icon-btn {
  flex: 0 0 36px;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  margin: 0 0 5px !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-sm, 8px) !important;
  background: var(--ds-surface) !important;
  box-shadow: none !important;
  color: var(--ds-text-secondary) !important;
}
.anon-chat-composer.anon-composer-v2 .anon-composer-row > .icon-btn:hover,
.anon-chat-composer.anon-composer-v2 .anon-composer-row > label.icon-btn:hover {
  background: var(--ds-surface-strong) !important;
  color: var(--ds-text) !important;
  border-color: var(--ds-border-strong) !important;
}
@media (max-width: 390px) {
  .anon-chat-composer.anon-composer-v2 .anon-composer-row > .icon-btn,
  .anon-chat-composer.anon-composer-v2 .anon-composer-row > label.icon-btn {
    width: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
  }
}

/* textarea: pill matching direct (26px radius, surface-raised bg) */
.anon-chat-composer.anon-composer-v2 .anon-composer-row > textarea,
.anon-chat-composer.anon-composer-v2 .anon-composer-row > .ux-chat-textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 50px !important;
  max-height: 152px !important;
  line-height: 22px !important;
  padding: 14px 17px !important;
  border-radius: var(--oa-r-xl, 26px) !important;
  background: var(--ds-surface-raised, #17243A) !important;
  border: 1px solid var(--ds-border-strong) !important;
  resize: none !important;
}

/* circular solid-blue send — match direct's 48px button */
.anon-chat-composer.anon-composer-v2 .anon-composer-row > .btn-primary-3d {
  flex: 0 0 48px;
  width: 48px !important;
  min-width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 0 3px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: var(--color-primary) !important;
  box-shadow: 0 2px 10px rgba(var(--color-primary-rgb), .32) !important;
}


/* ============================================================================
 * PROFILE ⋮ MENU — clean bottom sheet with sub-views.
 * ========================================================================== */
.oa-pm-backdrop { position: fixed; inset: 0; z-index: 1200; background: rgba(4,8,18,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: flex-end; justify-content: center; animation: oaPmFade .18s ease; }
@keyframes oaPmFade { from { opacity: 0 } to { opacity: 1 } }
.oa-pm-sheet { width: 100%; max-width: 560px; max-height: 88vh; display: flex; flex-direction: column; background: var(--surface); color: var(--text); border-radius: 22px 22px 0 0; padding: 0 0 calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 44px rgba(3,6,14,.42); animation: oaPmUp .26s cubic-bezier(.32,.72,0,1); }
@keyframes oaPmUp { from { transform: translateY(100%) } to { transform: translateY(0) } }
.oa-pm-grip { width: 36px; height: 4px; border-radius: 2px; background: var(--text-muted); opacity: .4; margin: 10px auto 8px; flex: none; }
.oa-pm-head { display: flex; align-items: center; gap: 8px; padding: 0 12px 10px; flex: none; border-bottom: 1px solid var(--surface-deep); }
.oa-pm-head b { flex: 1; font-size: 16px; font-weight: 800; letter-spacing: -.2px; }
.oa-pm-list { display: flex; flex-direction: column; padding: 8px; overflow-y: auto; }
.oa-pm-item { display: flex; align-items: center; gap: 13px; width: 100%; border: none; background: transparent; color: var(--text); font-family: inherit; font-size: 15px; font-weight: 600; text-align: left; padding: 12px 14px; border-radius: 14px; cursor: pointer; transition: background .14s ease; }
.oa-pm-item:active { background: rgba(148,163,184,.14); }
.oa-pm-item-ico { width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); flex: none; }
.oa-pm-item-ico svg { width: 20px; height: 20px; }
.oa-pm-item > span:nth-child(2) { flex: 1; }
.oa-pm-chev { opacity: .4; flex: none; display: flex; }
.oa-pm-chev svg { width: 18px; height: 18px; }
.oa-pm-danger .oa-pm-item-ico { background: rgba(239,68,68,.12); color: #ef4444; }
.oa-pm-danger > span:nth-child(2) { color: #ef4444; }
.oa-pm-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.oa-pm-body .row { align-items: center; }
.oa-pm-sep { height: 1px; background: var(--surface-deep); margin: 4px 0; }
.oa-pm-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 16px calc(10px + env(safe-area-inset-bottom,0px)); }
.oa-pm-scroll-title { font-size: 17px; font-weight: 800; letter-spacing: -.2px; margin-bottom: 12px; }
.oa-pm-block { margin-bottom: 15px; }
.oa-pm-block h3 { font-size: 14.5px; font-weight: 800; margin: 0 0 3px; color: var(--text); }
.oa-pm-block p { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
@media (prefers-reduced-motion: reduce) { .oa-pm-backdrop, .oa-pm-sheet { animation: none !important; } }

/* ============================================================================
 * THEME SYSTEM — 5 accent palettes via a centralized token set.
 * data-accent: ocean (default) | emerald | purple | graphite | amber
 * All app color tokens map to --color-*; switching the accent re-skins every
 * blue element (buttons, nav, badges, bubbles, links, focus, inputs).
 * ========================================================================== */
:root {
  --color-primary: #2563EB;
  --color-primary-rgb: 37,99,235;
  --color-primary-soft: #3B82F6;
  --color-primary-soft-rgb: 59,130,246;
  --color-primary-dark: #1D4ED8;
  --color-primary-dark-rgb: 29,78,216;
  --color-primary-deep: #1E40AF;
  --color-primary-deep-rgb: 30,64,175;
  --color-primary-light: #60A5FA;
  --color-primary-light-rgb: 96,165,250;
}
html[data-accent="emerald"] {
  --color-primary: #0E9F6E;
  --color-primary-rgb: 14,159,110;
  --color-primary-soft: #10B981;
  --color-primary-soft-rgb: 16,185,129;
  --color-primary-dark: #047857;
  --color-primary-dark-rgb: 4,120,87;
  --color-primary-deep: #065F46;
  --color-primary-deep-rgb: 6,95,70;
  --color-primary-light: #34D399;
  --color-primary-light-rgb: 52,211,153;
}
html[data-accent="purple"] {
  --color-primary: #7C3AED;
  --color-primary-rgb: 124,58,237;
  --color-primary-soft: #8B5CF6;
  --color-primary-soft-rgb: 139,92,246;
  --color-primary-dark: #6D28D9;
  --color-primary-dark-rgb: 109,40,217;
  --color-primary-deep: #5B21B6;
  --color-primary-deep-rgb: 91,33,182;
  --color-primary-light: #A78BFA;
  --color-primary-light-rgb: 167,139,250;
}
html[data-accent="graphite"] {
  --color-primary: #475569;
  --color-primary-rgb: 71,85,105;
  --color-primary-soft: #64748B;
  --color-primary-soft-rgb: 100,116,139;
  --color-primary-dark: #334155;
  --color-primary-dark-rgb: 51,65,85;
  --color-primary-deep: #1E293B;
  --color-primary-deep-rgb: 30,41,59;
  --color-primary-light: #94A3B8;
  --color-primary-light-rgb: 148,163,184;
}
html[data-accent="amber"] {
  --color-primary: #D97706;
  --color-primary-rgb: 217,119,6;
  --color-primary-soft: #F59E0B;
  --color-primary-soft-rgb: 245,158,11;
  --color-primary-dark: #B45309;
  --color-primary-dark-rgb: 180,83,9;
  --color-primary-deep: #92400E;
  --color-primary-deep-rgb: 146,64,14;
  --color-primary-light: #FBBF24;
  --color-primary-light-rgb: 251,191,36;
}

/* Map the app's existing color tokens onto the centralized accent. */
:root,
html[data-theme="dark"],
html[data-theme="light"] {
  --primary: var(--color-primary);
  --primary-dark: var(--color-primary-dark);
  --primary-light: var(--color-primary-light);
  --accent: var(--color-primary);
  --accent-dark: var(--color-primary-dark);
  --primary-grad: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-primary) 55%, var(--color-primary-dark) 100%);
  --primary-grad-soft: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-soft));
  --accent-grad: linear-gradient(135deg, var(--color-primary-soft) 0%, var(--color-primary) 100%);
  --ds-primary: var(--color-primary);
  --ds-primary-hover: var(--color-primary-soft);
  --ds-primary-active: var(--color-primary-dark);
  --ds-primary-light: var(--color-primary-soft);
  --ds-primary-tint: color-mix(in srgb, var(--color-primary) 12%, transparent);
  --oa-blue: var(--color-primary);
  --oa-blue-600: var(--color-primary-dark);
  --tone: var(--color-primary);
}

/* Theme picker (Profile menu "Edit theme") */
.oa-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.oa-theme-card {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  padding: 12px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1.5px solid var(--ds-border, rgba(148,163,184,.18));
  background: var(--surface-raised, var(--surface));
  color: var(--text);
  font-family: inherit;
  transition: border-color .15s ease, transform .12s ease;
}
.oa-theme-card:active { transform: scale(.98); }
.oa-theme-card.on { border-color: var(--color-primary); }
.oa-theme-swatch {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 40px; border-radius: 10px; color: #fff; font-size: 12px; font-weight: 800;
}
.oa-theme-name { font-size: 13.5px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 6px; }
.oa-theme-check { width: 18px; height: 18px; border-radius: 50%; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; }
.oa-theme-hint { font-size: 11.5px; color: var(--text-secondary); line-height: 1.4; }

@media (prefers-reduced-motion: reduce) { .oa-theme-card { transition: none; } }

/* Settings toggle rows (icon + label + switch) */
.oa-pm-toggle { cursor: default; }
.oa-pm-toggle:active { background: transparent; }
.oa-pm-toggle .toggle-track { flex: none; margin-left: 4px; }

/* ============================================================================
 * Profile menu: lock the page behind + stop scroll chaining.
 * The sheet's internal scroll areas must not drag the profile page behind
 * them. Lock body scroll while the menu is open, and contain overscroll so
 * momentum scroll stops at the sheet's own edges.
 * ========================================================================== */
body:has(.oa-pm-backdrop) { overflow: hidden; }
.oa-pm-sheet,
.oa-pm-list,
.oa-pm-body,
.oa-pm-scroll {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.oa-pm-body,
.oa-pm-scroll,
.oa-pm-list {
  touch-action: pan-y;
}

/* ============================================================================
 * Animated app splash — a student walking into the STUDENT HUB gate (no sound).
 * ========================================================================== */
.oa-splash{position:fixed;inset:0;overflow:hidden;background:#0a1322;z-index:2147483000}
.oa-splash-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.92}
.oa-splash-vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,19,34,.15) 0%,rgba(10,19,34,0) 40%,rgba(10,19,34,.55) 100%)}
.oa-splash-walker{position:absolute;left:50%;bottom:26%;width:110px;height:150px;margin-left:-55px;transform-origin:center bottom;animation:oaSplashWalkIn 1.9s cubic-bezier(.3,.7,.2,1) forwards}
.oa-splash-walker svg{width:100%;height:100%;overflow:visible}
.oa-splash-walker .oa-leg-front{animation:oaSplashLegFront 1s ease-in-out infinite;transform-origin:56px 102px}
.oa-splash-walker .oa-leg-back{animation:oaSplashLegBack 1s ease-in-out infinite;transform-origin:56px 102px}
.oa-splash-walker .oa-arm{animation:oaSplashArm 1s ease-in-out infinite;transform-origin:42px 52px}
.oa-splash-content{position:absolute;left:0;right:0;bottom:9%;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2}
.oa-splash-content .oa-splash-logo{width:64px;height:64px;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.oa-splash-name{font-family:var(--font-display);font-size:17px;font-weight:800;color:#f8fafc;letter-spacing:.01em}
.oa-splash-status{font-size:12.5px;color:#94a3b8;display:flex;align-items:center;gap:7px}
.oa-splash-dot{width:6px;height:6px;border-radius:50%;background:var(--color-primary);animation:oaSplashPulse 1.1s ease-in-out infinite}
@keyframes oaSplashWalkIn{
  0%{transform:translateX(-46vw) translateY(0);opacity:0}
  12%{opacity:1}
  45%{transform:translateX(-3vw) translateY(-8px)}
  70%{transform:translateX(0) translateY(0)}
  82%{transform:translateX(0) translateY(-4px)}
  100%{transform:translateX(0) translateY(0);opacity:1}
}
@keyframes oaSplashLegFront{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-14deg)}}
@keyframes oaSplashLegBack{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes oaSplashArm{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}
@keyframes oaSplashPulse{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}

/* ============================================================================
 * SPLASH REDESIGN — clean brand logo, no box/glow/filter, minimal hold screen.
 * (Overrides earlier .oa-splash-logo rules that added drop-shadow + float.)
 * ========================================================================== */
.oa-splash-logo{
  width:88px !important;
  height:88px !important;
  object-fit:contain !important;
  filter:none !important;
  animation:none !important;
  display:block !important;
}
.oa-splash-min{
  position:fixed;inset:0;
  background:#0a1322;
  z-index:2147483000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
.oa-splash-min .oa-splash-status{font-size:12.5px;color:#7c93b8;display:flex;align-items:center;gap:7px}
.oa-splash-min .oa-splash-dot{width:6px;height:6px;border-radius:50%;background:var(--color-primary);animation:oaSplashPulse 1.1s ease-in-out infinite}

/* Skeletons only appear when loading is genuinely slow (>280ms). Cached
   screens render before that, so navigating feels instant (WhatsApp-style)
   instead of flashing placeholder cards for a few frames. */
.skeleton-3d{opacity:0;animation:oa-skel-reveal .01s linear .28s forwards!important}
@keyframes oa-skel-reveal{to{opacity:1}}