/* SIAMORA member area – responsive desktop redesign (web 2026.10.30-5).
   ≤620 phone (bottom nav, unchanged) · 621–1099 tablet (icon sidebar) · ≥1100 full sidebar · ≥1440 right rail. */
#online .content-wrap{min-width:0}
#online .rail,#online .side-promos .side-app small{display:block}
#online .rail{display:none}
html,body{overflow-x:hidden}
#online img,#online video{max-width:100%}

/* ---------- Sidebar (no dead space, clear nav, Gold + App CTA) ---------- */
@media(min-width:621px){
 #online .sidebar{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;gap:14px}
 #online .sidebar .nav{gap:4px;margin-top:6px}
 #online .sidebar .nav a{min-height:46px;padding:10px 14px;font-size:15px;border-radius:12px}
 #online .sidebar .nav a:hover{background:#2a1d17;color:#f4eddf}
 #online .sidebar .nav a.active{background:linear-gradient(90deg,#3a2716,#24180f);color:#f6e2a6;border-color:#b88b4677}
 #online .sidebar .nav a:focus-visible,#online .side-app:focus-visible,#online .premium-box a:focus-visible{outline:2px solid #e3bf79;outline-offset:2px}
 #online .side-promos{margin-top:14px;display:grid;gap:10px}
 #online .side-user{margin-top:auto}
 #online .side-app{display:flex;gap:10px;align-items:center;min-height:52px;padding:10px 12px;border-radius:12px;border:1px solid #b88b4677;background:#1b1411;color:#f4eddf;text-decoration:none}
 #online .side-app:hover{border-color:#e3bf79;background:#241912}
 #online .side-app>span:first-child{font-size:22px}
 #online .side-app b{display:block;font-size:13.5px}
 #online .side-app small{color:#b9ae9b;font-size:11.5px}
 #online .premium-box{margin-top:0;padding:14px}
 #online .premium-box b{margin:6px 0 4px;letter-spacing:.06em}
 #online .premium-box p{margin:0 0 4px;font-size:12.5px}
 #online .premium-box .premium-prices{color:#f6e2a6;font-weight:600;margin:0}
 #online .premium-box a{display:inline-block;margin-top:8px;min-height:24px}
 #online .premium-box.is-gold{border-color:#e3bf79}
 #online .premium-box.is-gold p{color:#f6e2a6}
 #online .side-user{min-height:48px}
 #online .siamora-version{font-size:11px!important;line-height:1.35!important}
 #online .brand-row{flex-wrap:wrap;row-gap:2px}
}
/* Tablet: collapsed icon sidebar */
@media(min-width:621px) and (max-width:1099px){
 #online .app{grid-template-columns:88px minmax(0,1fr)}
 #online .sidebar{padding:16px 8px;align-items:stretch}
 #online .brand-row{justify-content:center;font-size:0}
 #online .brand-row img{width:42px;height:42px}
 #online .brand-row .siamora-version,#online .sidebar .siamora-version-row,#online .sidebar .siamora-version{display:none!important}
 #online .sidebar .nav a{flex-direction:column;gap:4px;padding:8px 2px;font-size:11px;text-align:center;justify-content:center;min-height:60px}
 #online .side-app{flex-direction:column;justify-content:center;text-align:center;padding:8px 4px;gap:2px}
 #online .side-app b{font-size:10.5px;line-height:1.2}#online .side-app small{display:none!important}
 #online .premium-box{padding:10px 6px;text-align:center}
 #online .premium-box p,#online .premium-box .premium-prices{display:none}
 #online .premium-box b{font-size:10.5px;letter-spacing:.02em}
 #online .premium-box a{font-size:0;margin:0}#online .premium-box a::after{content:'♛';font-size:20px;color:#e3bf79}
 #online .side-user{justify-content:center}#online .side-user div{display:none}
 #online .topbar{padding:0 20px}
}
/* ---------- Content width + right rail ---------- */
@media(min-width:621px){
 #online .content{max-width:1480px;padding:26px clamp(18px,2.4vw,40px) 64px;margin:0 auto;box-sizing:border-box}
 #online .content .love-hero{max-width:none}
}
@media(min-width:1440px){
 #online .content-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:0 8px;max-width:1860px;margin:0 auto;align-items:start}
 #online .content-wrap>.content{max-width:none;width:100%}
 #online .rail{display:grid;gap:16px;position:sticky;top:84px;padding:26px 28px 40px 0;max-height:calc(100vh - 84px);overflow-y:auto;scrollbar-width:thin}
}
#online .rail-card{position:relative;border-radius:18px;padding:18px;border:1px solid #b88b4666;background:linear-gradient(160deg,#241913,#150f0c);box-shadow:0 10px 28px #0006;color:#f4eddf;text-align:center}
#online .rail-card h3{margin:2px 0 6px;font:22px Georgia,serif;color:#f6e2a6}
#online .rail-card .small{color:#c2b09b;margin:4px 0}
#online .rail-crown{font-size:28px;color:#e3bf79}
#online .rail-gold{background:radial-gradient(ellipse at 85% 0,#9a263140,transparent 65%),linear-gradient(150deg,#3a2816,#1d1410)}
#online .rail-gold.is-active{border-color:#e3bf79}
#online .rail-prices{list-style:none;margin:10px 0 4px;padding:0;display:grid;gap:8px}
#online .rail-prices a{display:flex;justify-content:center;align-items:center;min-height:44px;border-radius:12px;border:1px solid #b88b46;background:#140e0b;color:#f6e2a6;font-weight:600;text-decoration:none}
#online .rail-prices a:hover,#online .rail-prices a:focus-visible{background:#2a1d14;border-color:#f6e2a6;outline:none}
#online .rail-actions{display:grid;gap:8px;margin-top:10px}
#online .rail-actions .button,#online .rail-app .button{display:flex;justify-content:center;align-items:center;min-height:44px}
#online .rail-actions .text-link{color:#e3bf79;font-size:13px;min-height:32px;display:flex;align-items:center;justify-content:center}
#online .rail-qr{display:block;width:132px;height:132px;margin:10px auto 2px;border-radius:12px;border:4px solid #f6e2a6;background:#f6e2a6}
#online .rail-note{color:#9b8f84;display:block;margin-top:6px}
/* ---------- Slim, dismissible app banner ---------- */
#online .promo-banner{display:flex;align-items:center;gap:12px;padding:8px 10px 8px 14px;margin:0 0 16px;border-radius:14px;border:1px solid #b88b4666;background:linear-gradient(90deg,#2a1c14,#1a120e);color:#f4eddf}
#online .promo-banner p{margin:0;flex:1;min-width:0;font-size:13.5px;line-height:1.4}
#online .promo-banner p span{color:#c2b09b}
#online .promo-banner-ico{font-size:22px}
#online .promo-banner-cta{white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
#online .promo-x{width:44px;height:44px;flex:none;border-radius:50%;border:1px solid #5c4628;background:transparent;color:#c2b09b;cursor:pointer;font-size:16px}
#online .promo-x:hover{color:#f6e2a6;border-color:#e3bf79}
@media(min-width:1440px){#online .promo-banner{display:none}} /* the rail already shows the app card */
@media(max-width:620px){#online .promo-banner{margin:0 0 12px;padding:6px 6px 6px 10px;gap:8px}#online .promo-banner p span{display:none}#online .promo-banner-ico{display:none}}
/* ---------- Filter bar ---------- */
@media(min-width:621px){
 #online .tf-toolbar{gap:10px 12px;padding:12px;border:1px solid #4a362266;border-radius:18px;background:#16100dcc}
 #online .tf-toolbar .tf-search{flex:1 1 260px;min-width:220px}
 #online .tf-toolbar select,#online .tf-toolbar input,#online .tf-toolbar button{min-height:44px}
 #online .tf-view button{min-width:44px;min-height:44px}
}
/* ---------- Profile grid: smooth 3–6 columns, 3:4 photos ---------- */
@media(min-width:621px){
 #online .tf-grid:not(.list){grid-template-columns:repeat(auto-fill,minmax(188px,1fr));gap:16px}
}
@media(min-width:1600px){#online .tf-grid:not(.list){grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:18px}}
#online .tf-photo{aspect-ratio:3/4}
#online [data-profile-photo]>img{object-fit:cover}
#online .tf-card:focus-within{border-color:#d9ba7c}
#online .tf-quick button{min-width:44px;min-height:44px}
@media(max-width:620px){#online .tf-quick button{width:44px!important;height:44px!important}}
/* Placeholder for profiles without photo */
#online .tf-photo .photo-monogram:not(img){inset:auto;left:50%;top:40%;transform:translate(-50%,-50%);width:44%;aspect-ratio:1;border-radius:50%;border:2px solid #d9ba7c88;background:radial-gradient(circle at 50% 35%,#7a2a32,#2a1612);box-shadow:0 0 0 8px #d9ba7c14,0 12px 30px #0008;font-size:clamp(30px,3.4vw,52px);opacity:1}
#online .tf-photo:has(.photo-monogram:not(img)){background:radial-gradient(circle at 50% 30%,#4a1820,#160f0c 72%),repeating-linear-gradient(45deg,#ffffff05 0 8px,transparent 8px 16px)}
/* In-feed promo tiles */
#online .tf-promo{display:flex;align-items:stretch;border-color:#b88b46;background:radial-gradient(ellipse at 80% 0,#9a263133,transparent 60%),linear-gradient(160deg,#2c1e14,#150f0c)}
#online .tf-promo:hover{transform:none}
#online .tf-promo-body{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;text-align:center;padding:20px 16px;width:100%;box-sizing:border-box;min-height:100%}
#online .tf-grid:not(.list) .tf-promo-body{aspect-ratio:3/4;height:auto}
#online .tf-promo h3{margin:0;font:20px/1.2 Georgia,serif;color:#f6e2a6}
#online .tf-promo p{margin:0;font-size:13px;color:#c2b09b;line-height:1.45}
#online .tf-promo small{color:#9b8f84}
#online .tf-promo .button{min-height:44px;display:inline-flex;align-items:center}
#online .tf-promo-ico{font-size:34px;color:#e3bf79}
#online .tf-grid.list .tf-promo-body{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;text-align:left;aspect-ratio:auto}
@media(max-width:620px){#online .tf-promo-body{padding:12px 8px;gap:6px}#online .tf-promo h3{font-size:16px}#online .tf-promo p{font-size:12px}}
/* Swipe hint */
#online .swipe-promo{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;text-align:center;margin:14px auto 0;padding:12px 14px;border-radius:14px;border:1px solid #b88b4666;background:#1d1410;max-width:440px}
#online .swipe-promo p{margin:0;font-size:13.5px;color:#f4eddf}
#online .swipe-promo .button{min-height:44px;display:inline-flex;align-items:center}
/* Native Android app: never advertise the app inside the app */
body.siamora-native-app #online .side-app,body.siamora-native-app #online .rail-app,body.siamora-native-app #online .tf-promo-app,body.siamora-native-app #online .promo-banner{display:none!important}
/* Phone landscape: keep content usable */
@media(max-height:500px) and (min-width:621px){#online .sidebar{padding-top:8px;padding-bottom:8px;gap:8px}#online .sidebar .nav a{min-height:44px;padding:4px 2px}#online .side-user,#online .premium-box{display:none}#online .topbar{height:56px}}
@media(prefers-reduced-motion:reduce){#online .tf-card,#online .side-app{transition:none}}
/* Touch targets ≥44 px */
#online .topbar select,#online .auth-language select{min-height:44px;min-width:56px}
#online .app-gold-entry{min-height:44px;display:inline-flex;align-items:center}
#online .top-avatar{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center}
#online .top-avatar span{width:40px;height:40px}
#online #tf-reset,#online .text-button{min-height:44px}
#online .premium-box a,#online .rail-actions .text-link{min-height:44px;display:inline-flex;align-items:center}
#online .brand-row{min-height:44px}
@media(min-width:621px) and (max-width:1099px){#online .premium-box a{min-width:44px;justify-content:center}}