/*
 * custom-stylesheet.css
 * Samrossy Hotel & Suites — Customer Portal Styles
 * Generated from samrossy-customer.js v3.0.0
 * Loaded dynamically by injectCSS() in samrossy-customer.js
 */

/* ── KEYFRAME ANIMATIONS ──────────────────────────────────────────────────── */
@keyframes sC-fi  { from{opacity:0} to{opacity:1} }
@keyframes sC-su  { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
@keyframes sC-pop { 0%{opacity:0;transform:scale(.86)} 65%{transform:scale(1.04)} 100%{opacity:1;transform:scale(1)} }
@keyframes sC-shk { 0%,100%{transform:translateX(0)} 22%,66%{transform:translateX(-8px)} 44%,88%{transform:translateX(8px)} }
@keyframes sC-sp  { to{transform:rotate(360deg)} }
@keyframes sC-stmp{ 0%{transform:scale(0)rotate(-22deg);opacity:0} 65%{transform:scale(1.28)rotate(4deg)} 100%{transform:scale(1)rotate(0);opacity:1} }
@keyframes sC-ti  { from{opacity:0;transform:translateY(16px)scale(.92)} to{opacity:1;transform:translateY(0)scale(1)} }
@keyframes sC-to  { from{opacity:1} to{opacity:0;transform:translateY(8px)} }
@keyframes sC-tg  { from{opacity:0;transform:scale(0)} to{opacity:1;transform:scale(1)} }
@keyframes sC-pulse { 0%,100%{box-shadow:0 0 17px rgba(232,185,35,.4)} 50%{box-shadow:0 0 30px rgba(232,185,35,.7)} }
@keyframes sC-confetti { 0%{transform:translateY(-20px)rotate(0deg);opacity:1} 100%{transform:translateY(120px)rotate(720deg);opacity:0} }

/* ── LIGHT MODE OVERRIDES ─────────────────────────────────────────────────── */
.sC-sh.sC-light { background: linear-gradient(155deg,#f5f0e8 0%,#fffdf5 45%,#f9f5ec 75%,#fdf8ef 100%) !important; }
.sC-sh.sC-light .sC-bar { background: rgba(232,185,35,.12) !important; border-bottom-color: rgba(139,99,16,.2) !important; }
.sC-sh.sC-light .sC-bar__logo { color: #5a3e00 !important; }
.sC-sh.sC-light .sC-bar__greet { color: rgba(90,62,0,.6) !important; }
.sC-sh.sC-light .sC-bar__x { background: rgba(139,99,16,.07) !important; border-color: rgba(139,99,16,.2) !important; color: #8B6310 !important; }
.sC-sh.sC-light .sC-sb { background: rgba(232,185,35,.07) !important; border-right-color: rgba(139,99,16,.15) !important; }
.sC-sh.sC-light .sC-av-nm { color: #2d1a00 !important; }
.sC-sh.sC-light .sC-av-tag,
.sC-sh.sC-light .sC-av-st { color: rgba(90,62,0,.55) !important; }
.sC-sh.sC-light .sC-ni { color: rgba(45,26,0,.4) !important; }
.sC-sh.sC-light .sC-ni:hover { color: rgba(45,26,0,.75) !important; background: rgba(232,185,35,.08) !important; }
.sC-sh.sC-light .sC-ni.on { color: #5a3e00 !important; background: rgba(232,185,35,.15) !important; border-left-color: #8B6310 !important; }
.sC-sh.sC-light .sC-logout { color: rgba(180,30,30,.5) !important; border-top-color: rgba(139,99,16,.12) !important; }
.sC-sh.sC-light .sC-logout:hover { color: #CC1A1A !important; background: rgba(204,26,26,.06) !important; }
.sC-sh.sC-light .sC-con { background: transparent !important; }
.sC-sh.sC-light .sC-pt { color: #1a0d00 !important; }
.sC-sh.sC-light .sC-ps { color: rgba(45,26,0,.5) !important; }
.sC-sh.sC-light .sC-inp,
.sC-sh.sC-light .sC-sel,
.sC-sh.sC-light .sC-ta { background: rgba(255,250,240,.92) !important; border-color: rgba(139,99,16,.22) !important; color: #1a0d00 !important; }
.sC-sh.sC-light .sC-inp::placeholder { color: rgba(45,26,0,.28) !important; }
.sC-sh.sC-light .sC-inp:focus,
.sC-sh.sC-light .sC-sel:focus,
.sC-sh.sC-light .sC-ta:focus { border-color: rgba(139,99,16,.55) !important; }
.sC-sh.sC-light .sC-sel option { background: #fffdf5 !important; color: #1a0d00 !important; }
.sC-sh.sC-light .sC-lbl { color: rgba(90,62,0,.55) !important; }
.sC-sh.sC-light .sC-dc { background: rgba(232,185,35,.07) !important; border-color: rgba(139,99,16,.15) !important; }
.sC-sh.sC-light .sC-dc:hover { background: rgba(232,185,35,.14) !important; border-color: rgba(139,99,16,.3) !important; }
.sC-sh.sC-light .sC-dc__l,
.sC-sh.sC-light .sC-dc__s { color: rgba(45,26,0,.45) !important; }
.sC-sh.sC-light .sC-wb { background: rgba(232,185,35,.08) !important; border-color: rgba(139,99,16,.2) !important; }
.sC-sh.sC-light .sC-wb__t { color: rgba(45,26,0,.6) !important; }
.sC-sh.sC-light .sC-bkc { background: rgba(255,250,240,.9) !important; border-color: rgba(139,99,16,.15) !important; }
.sC-sh.sC-light .sC-bkc__hd { background: rgba(232,185,35,.06) !important; border-bottom-color: rgba(139,99,16,.1) !important; }
.sC-sh.sC-light .sC-bkc__type { color: #1a0d00 !important; }
.sC-sh.sC-light .sC-bkc__pin { color: rgba(90,62,0,.5) !important; }
.sC-sh.sC-light .sC-bkrow__l { color: rgba(45,26,0,.35) !important; }
.sC-sh.sC-light .sC-bkrow__v { color: #1a0d00 !important; }
.sC-sh.sC-light .sC-bkc__ft { border-top-color: rgba(139,99,16,.1) !important; }
.sC-sh.sC-light .sC-bkc__ft-timer { color: rgba(45,26,0,.5) !important; }
.sC-sh.sC-light .sC-ntc { background: rgba(255,250,240,.9) !important; border-color: rgba(139,99,16,.13) !important; }
.sC-sh.sC-light .sC-ntc.unread { background: rgba(232,185,35,.08) !important; }
.sC-sh.sC-light .sC-ntc__title { color: #1a0d00 !important; }
.sC-sh.sC-light .sC-ntc__msg { color: rgba(45,26,0,.6) !important; white-space: pre-wrap; word-break: break-word; }
.sC-sh.sC-light .sC-ntc__dt { color: rgba(45,26,0,.35) !important; }
.sC-sh.sC-light .sC-pr__l { color: rgba(90,62,0,.5) !important; }
.sC-sh.sC-light .sC-pr__v { color: #1a0d00 !important; }
.sC-sh.sC-light .sC-lc { background: linear-gradient(140deg,#fdf5e0,#fffae8,#fdf0cc,#fef8e0) !important; border-color: rgba(139,99,16,.3) !important; }
.sC-sh.sC-light .sC-lt { color: #5a3e00 !important; }
.sC-sh.sC-light .sC-ls { color: rgba(45,26,0,.45) !important; }
.sC-sh.sC-light .sC-ltot { color: rgba(45,26,0,.45) !important; }
.sC-sh.sC-light .sC-ri { background: rgba(255,250,240,.9) !important; border-color: rgba(139,99,16,.12) !important; }
.sC-sh.sC-light .sC-ri__note { color: rgba(45,26,0,.55) !important; }
.sC-sh.sC-light .sC-ri__date { color: rgba(45,26,0,.35) !important; }
.sC-sh.sC-light .sC-fbi { background: rgba(255,250,240,.9) !important; border-color: rgba(139,99,16,.12) !important; }
.sC-sh.sC-light .sC-fbi__sub { color: #1a0d00 !important; }
.sC-sh.sC-light .sC-fbi__msg { color: rgba(45,26,0,.6) !important; }
.sC-sh.sC-light .sC-gc { background: rgba(255,250,240,.85) !important; border-color: rgba(139,99,16,.14) !important; }
.sC-sh.sC-light .sC-gc:hover { background: rgba(232,185,35,.1) !important; }
.sC-sh.sC-light .sC-gc__d { color: rgba(45,26,0,.45) !important; }
.sC-sh.sC-light .sC-ga { background: rgba(255,250,240,.85) !important; border-color: rgba(139,99,16,.14) !important; }
.sC-sh.sC-light .sC-gtt,
.sC-sh.sC-light .sC-gfb { color: rgba(45,26,0,.7) !important; }
.sC-sh.sC-light .sC-cin-card { background: rgba(255,250,240,.92) !important; border-color: rgba(139,99,16,.14) !important; }
.sC-sh.sC-light .sC-cin-title { color: #1a0d00 !important; }
.sC-sh.sC-light .sC-cin-meta { color: rgba(45,26,0,.45) !important; }
.sC-sh.sC-light .sC-cin-notice { background: rgba(232,185,35,.06) !important; border-color: rgba(139,99,16,.18) !important; color: rgba(45,26,0,.65) !important; }
.sC-sh.sC-light .sC-cin-g { background: rgba(255,250,240,.85) !important; border-color: rgba(139,99,16,.18) !important; color: rgba(45,26,0,.4) !important; }
.sC-sh.sC-light .sC-cin-g.on { background: rgba(232,185,35,.12) !important; border-color: #8B6310 !important; color: #5a3e00 !important; }
.sC-sh.sC-light .sC-tab { background: rgba(255,250,240,.85) !important; border-color: rgba(139,99,16,.18) !important; color: rgba(45,26,0,.4) !important; }
.sC-sh.sC-light .sC-tab.on { background: rgba(232,185,35,.12) !important; border-color: #8B6310 !important; color: #5a3e00 !important; }
.sC-sh.sC-light .sC-nt-f { background: rgba(255,250,240,.85) !important; border-color: rgba(139,99,16,.18) !important; color: rgba(45,26,0,.4) !important; }
.sC-sh.sC-light .sC-nt-f.on { background: rgba(232,185,35,.12) !important; border-color: #8B6310 !important; color: #5a3e00 !important; }
.sC-sh.sC-light .sC-acct { background: rgba(255,250,240,.92) !important; border-color: rgba(139,99,16,.18) !important; }
.sC-sh.sC-light .sC-acct__title { color: rgba(90,62,0,.6) !important; }
.sC-sh.sC-light .sC-acct-row__l { color: rgba(45,26,0,.4) !important; }
.sC-sh.sC-light .sC-acct-row__v { color: #1a0d00 !important; }
.sC-sh.sC-light .sC-confirm-box { background: rgba(255,250,240,.9) !important; border-color: rgba(139,99,16,.18) !important; color: rgba(45,26,0,.7) !important; }
.sC-sh.sC-light .sC-confirm-box strong { color: #1a0d00 !important; }

/* ── DARK/LIGHT THEME TOGGLE ──────────────────────────────────────────────── */
.sC-mode-toggle { display: flex; align-items: center; gap: .56rem; padding: .72rem 1rem; background: rgba(232,185,35,.05); border: 1.5px solid rgba(232,185,35,.18); cursor: pointer; font-family: "Montserrat",sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .1em; color: #E8B923; transition: all .18s; user-select: none; margin-bottom: 1rem; }
.sC-mode-toggle:hover { background: rgba(232,185,35,.1); border-color: rgba(232,185,35,.34); }
.sC-mode-toggle__track { width: 36px; height: 20px; border-radius: 10px; background: rgba(2,0,0,.5); border: 1.5px solid rgba(232,185,35,.3); position: relative; flex-shrink: 0; transition: background .2s; }
.sC-mode-toggle__track.on { background: rgba(232,185,35,.2); border-color: #E8B923; }
.sC-mode-toggle__thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #E8B923; transition: left .2s; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.sC-mode-toggle__track.on .sC-mode-toggle__thumb { left: 16px; }

/* ── OVERLAY ──────────────────────────────────────────────────────────────── */
.sC-ov { position: fixed; inset: 0; z-index: 1300000; background: rgba(4,1,0,.96); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); display: none; align-items: flex-start; justify-content: center; padding: max(env(safe-area-inset-top,0px),.4rem) .4rem .8rem; overflow-y: auto; animation: sC-fi .2s ease both; }
.sC-ov.on { display: flex; }

/* ── SHELL ────────────────────────────────────────────────────────────────── */
.sC-sh { width: 100%; max-width: 900px; min-height: min(96vh,810px); display: flex; flex-direction: column; background: linear-gradient(155deg,#130700 0%,#210b02 45%,#170800 75%,#1d0b01 100%); border: 1.5px solid rgba(232,185,35,.17); box-shadow: 0 0 0 1px rgba(232,185,35,.04) inset,0 55px 130px rgba(2,0,0,.93); animation: sC-su .34s cubic-bezier(.2,.7,.35,1) both; flex-shrink: 0; margin: auto 0; overflow: hidden; position: relative; }
.sC-sh::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(232,185,35,.5) 50%,transparent); z-index: 1; pointer-events: none; }

/* ── TOPBAR ───────────────────────────────────────────────────────────────── */
.sC-bar { display: flex; align-items: center; gap: .6rem; padding: .65rem 1rem; background: rgba(2,0,0,.74); border-bottom: 1px solid rgba(232,185,35,.11); flex-shrink: 0; position: relative; z-index: 2; }
.sC-bar__logo { flex: 1; display: flex; align-items: center; gap: .44rem; font-family: "Playfair Display",Georgia,serif; font-size: .82rem; font-weight: 700; color: #E8B923; letter-spacing: .07em; text-transform: uppercase; }
.sC-bar__ico { width: 26px; height: 26px; flex-shrink: 0; background: linear-gradient(135deg,#8B6310,#E8B923); display: flex; align-items: center; justify-content: center; font-size: .72rem; }
.sC-bar__greet { font-family: "Montserrat",sans-serif; font-size: .55rem; font-weight: 600; color: rgba(232,185,35,.6); letter-spacing: .04em; max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sC-bar__x { width: 28px; height: 28px; flex-shrink: 0; background: rgba(232,185,35,.06); border: 1.5px solid rgba(232,185,35,.17); color: #E8B923; font-size: .88rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .18s; }
.sC-bar__x:hover { background: rgba(204,26,26,.22); border-color: #CC1A1A; color: #CC1A1A; }

/* ── LAYOUT ───────────────────────────────────────────────────────────────── */
.sC-lay { display: flex; flex: 1; min-height: 0; overflow: hidden; }

/* ── SIDEBAR ──────────────────────────────────────────────────────────────── */
.sC-sb { width: 192px; flex-shrink: 0; background: rgba(2,0,0,.54); border-right: 1px solid rgba(232,185,35,.09); display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.sC-sb::-webkit-scrollbar { width: 3px; }
.sC-sb::-webkit-scrollbar-thumb { background: rgba(232,185,35,.2); }
.sC-av-blk { padding: 1.1rem .88rem .72rem; border-bottom: 1px solid rgba(232,185,35,.07); text-align: center; }
.sC-av { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg,#7a4e0a,#E8B923); display: flex; align-items: center; justify-content: center; font-family: "Playfair Display",Georgia,serif; font-size: 1.25rem; font-weight: 700; color: #150600; margin: 0 auto .43rem; border: 2.5px solid rgba(232,185,35,.23); box-shadow: 0 0 18px rgba(232,185,35,.1); }
.sC-av-nm { font-family: "Playfair Display",Georgia,serif; font-size: .76rem; font-weight: 700; color: #FDF6EC; line-height: 1.3; word-break: break-word; }
.sC-av-tag { font-family: "Montserrat",sans-serif; font-size: .43rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(232,185,35,.34); margin-top: .15rem; }
.sC-av-st { margin-top: .36rem; font-family: "Montserrat",sans-serif; font-size: .55rem; color: rgba(232,185,35,.5); letter-spacing: .05em; }
.sC-nav { padding: .36rem 0; flex: 1; display: flex; flex-direction: column; }
.sC-ni { display: flex; align-items: center; gap: .48rem; padding: .57rem .86rem; cursor: pointer; font-family: "Montserrat",sans-serif; font-size: .57rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(253,246,236,.29); border-left: 2.5px solid transparent; transition: color .15s,background .15s,border-color .15s; }
.sC-ni:hover { color: rgba(253,246,236,.66); background: rgba(232,185,35,.04); }
.sC-ni.on { color: #E8B923; background: rgba(232,185,35,.07); border-left-color: #E8B923; }
.sC-ni__ico { font-size: .8rem; width: 17px; text-align: center; flex-shrink: 0; }
.sC-logout { display: flex; align-items: center; gap: .48rem; padding: .58rem .86rem; cursor: pointer; margin-top: auto; font-family: "Montserrat",sans-serif; font-size: .57rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: rgba(204,26,26,.5); border-top: 1px solid rgba(232,185,35,.07); transition: color .15s,background .15s; }
.sC-logout:hover { color: #CC1A1A; background: rgba(204,26,26,.06); }

/* ── CONTENT AREA ─────────────────────────────────────────────────────────── */
.sC-con { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 1.25rem 1.35rem 2.5rem; min-width: 0; scroll-behavior: smooth; }
.sC-con::-webkit-scrollbar { width: 4px; }
.sC-con::-webkit-scrollbar-thumb { background: rgba(232,185,35,.14); }
.sC-pt { font-family: "Playfair Display",Georgia,serif; font-size: 1.28rem; font-weight: 700; color: #FDF6EC; margin-bottom: .2rem; letter-spacing: .02em; }
.sC-ps { font-family: "Cormorant Garamond",Georgia,serif; font-size: .88rem; font-style: italic; color: rgba(253,246,236,.32); margin-bottom: 1.12rem; line-height: 1.4; }

/* ── AUTH ─────────────────────────────────────────────────────────────────── */
.sC-auth { max-width: 418px; margin: 0 auto; padding: .4rem 0 1.5rem; }
.sC-hero { text-align: center; margin-bottom: 1.35rem; padding: 1.12rem; background: linear-gradient(135deg,rgba(232,185,35,.05),rgba(184,134,11,.03)); border: 1px solid rgba(232,185,35,.1); }
.sC-hero__ico { width: 54px; height: 54px; margin: 0 auto .58rem; background: linear-gradient(135deg,#8B6310,#E8B923); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; }
.sC-hero__t { font-family: "Playfair Display",Georgia,serif; font-size: 1.36rem; font-weight: 700; color: #FDF6EC; }
.sC-hero__s { font-family: "Cormorant Garamond",Georgia,serif; font-size: .9rem; font-style: italic; color: rgba(253,246,236,.32); margin-top: .17rem; }

/* ── FORMS ────────────────────────────────────────────────────────────────── */
.sC-fld { margin-bottom: .78rem; }
.sC-fg { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.sC-lbl { display: block; font-family: "Montserrat",sans-serif; font-size: .47rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(232,185,35,.44); margin-bottom: .28rem; }
.sC-inp,.sC-sel,.sC-ta { width: 100%; box-sizing: border-box; background: rgba(2,0,0,.7); border: 1.5px solid rgba(232,185,35,.16); color: #FDF6EC; font-family: "Montserrat",sans-serif; font-size: .78rem; padding: .62rem .86rem; outline: none; transition: border-color .17s,box-shadow .17s; -webkit-appearance: none; appearance: none; border-radius: 0; }
.sC-inp::placeholder { color: rgba(253,246,236,.16); font-weight: 400; }
.sC-inp:focus,.sC-sel:focus,.sC-ta:focus { border-color: rgba(232,185,35,.6); box-shadow: 0 0 0 3px rgba(232,185,35,.08); }
.sC-inp.err,.sC-sel.err,.sC-ta.err { border-color: #CC1A1A; animation: sC-shk .38s ease; }
.sC-sel { cursor: pointer; }
.sC-sel option { background: #1d0800; color: #FDF6EC; }
.sC-ta { resize: vertical; min-height: 88px; line-height: 1.55; }
.sC-pw { position: relative; }
.sC-eye { position: absolute; right: .68rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: rgba(232,185,35,.36); font-size: .85rem; padding: .2rem; transition: color .15s; line-height: 1; }
.sC-eye:hover { color: #E8B923; }

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */
.sC-btn { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; padding: .7rem 1.1rem; font-family: "Montserrat",sans-serif; font-size: .57rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; background: linear-gradient(135deg,#8B6310,#E8B923); color: #150600; border: none; cursor: pointer; transition: box-shadow .2s,transform .2s; width: 100%; }
.sC-btn:hover:not(:disabled) { box-shadow: 0 6px 22px rgba(232,185,35,.25); transform: translateY(-1px); }
.sC-btn:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.sC-btn--r { background: linear-gradient(135deg,#8B0E0E,#CC1A1A); color: #FDF6EC; }
.sC-btn--r:hover:not(:disabled) { box-shadow: 0 6px 22px rgba(204,26,26,.25); }
.sC-btn--g { background: transparent; color: rgba(232,185,35,.66); border: 1.5px solid rgba(232,185,35,.19); }
.sC-btn--g:hover:not(:disabled) { border-color: rgba(232,185,35,.46); color: #E8B923; background: rgba(232,185,35,.05); box-shadow: none; }
.sC-btn--sm { width: auto; padding: .4rem .86rem; font-size: .51rem; }
.sC-btn--il { width: auto; }

/* ── FEEDBACK / ERROR / INFO ──────────────────────────────────────────────── */
.sC-err { font-family: "Montserrat",sans-serif; font-size: .59rem; color: #E05555; min-height: .85em; margin-top: .33rem; line-height: 1.4; }
.sC-ok { padding: .6rem .86rem; margin-bottom: .72rem; background: rgba(76,175,80,.07); border: 1px solid rgba(76,175,80,.2); font-family: "Montserrat",sans-serif; font-size: .63rem; color: #4CAF50; line-height: 1.5; }
.sC-inf { padding: .6rem .86rem; margin-bottom: .72rem; background: rgba(232,185,35,.06); border: 1px solid rgba(232,185,35,.16); font-family: "Montserrat",sans-serif; font-size: .63rem; color: rgba(232,185,35,.76); line-height: 1.5; }
.sC-sw { text-align: center; margin-top: .92rem; font-family: "Montserrat",sans-serif; font-size: .6rem; color: rgba(253,246,236,.25); }
.sC-sw a { color: #E8B923; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.sC-hr { height: 1px; background: linear-gradient(90deg,transparent,rgba(232,185,35,.13),transparent); margin: .82rem 0; }

/* ── SPINNER / LOADING ────────────────────────────────────────────────────── */
.sC-spin { width: 13px; height: 13px; border: 2px solid rgba(21,6,0,.35); border-top-color: #150600; border-radius: 50%; animation: sC-sp .55s linear infinite; display: none; flex-shrink: 0; }
.sC-spin--lg { width: 20px; height: 20px; border-width: 2.5px; border-color: rgba(232,185,35,.13); border-top-color: #E8B923; }
.sC-load { display: flex; align-items: center; justify-content: center; gap: .7rem; padding: 3rem 1rem; font-family: "Montserrat",sans-serif; font-size: .63rem; color: rgba(253,246,236,.27); }
.sC-empty { text-align: center; padding: 3rem 1.5rem; }
.sC-empty__i { font-size: 2.2rem; opacity: .25; margin-bottom: .52rem; }
.sC-empty__t { font-family: "Playfair Display",Georgia,serif; font-size: .95rem; color: rgba(253,246,236,.21); font-style: italic; margin-bottom: .26rem; }
.sC-empty__s { font-family: "Montserrat",sans-serif; font-size: .59rem; color: rgba(253,246,236,.15); line-height: 1.5; }

/* ── DASHBOARD CARDS ──────────────────────────────────────────────────────── */
.sC-dg { display: grid; grid-template-columns: repeat(auto-fill,minmax(162px,1fr)); gap: .76rem; margin-bottom: 1.18rem; }
.sC-dc { padding: .92rem .98rem .85rem; background: rgba(2,0,0,.55); border: 1px solid rgba(232,185,35,.11); cursor: pointer; transition: border-color .17s,background .17s,transform .18s; position: relative; overflow: hidden; }
.sC-dc::after { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg,rgba(232,185,35,.03),transparent 60%); pointer-events: none; }
.sC-dc:hover { border-color: rgba(232,185,35,.32); background: rgba(232,185,35,.04); transform: translateY(-2px); }
.sC-dc__i { font-size: 1.42rem; margin-bottom: .34rem; }
.sC-dc__v { font-family: "Playfair Display",Georgia,serif; font-size: 1.62rem; font-weight: 700; color: #E8B923; line-height: 1; margin-bottom: .18rem; }
.sC-dc__l { font-family: "Montserrat",sans-serif; font-size: .46rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(253,246,236,.29); margin-bottom: .15rem; }
.sC-dc__s { font-family: "Montserrat",sans-serif; font-size: .55rem; color: rgba(253,246,236,.34); line-height: 1.4; }
.sC-wb { padding: .83rem 1.02rem; margin-bottom: 1.02rem; background: linear-gradient(135deg,rgba(232,185,35,.06),rgba(184,134,11,.03)); border: 1px solid rgba(232,185,35,.12); border-left: 3px solid #E8B923; display: flex; align-items: center; gap: .7rem; }
.sC-wb__t { font-family: "Cormorant Garamond",Georgia,serif; font-size: .9rem; font-style: italic; color: rgba(253,246,236,.5); line-height: 1.5; flex: 1; }

/* ── BOOKING CARDS ────────────────────────────────────────────────────────── */
.sC-bkl { display: flex; flex-direction: column; gap: .7rem; }
.sC-bkc { background: rgba(2,0,0,.52); border: 1px solid rgba(232,185,35,.11); overflow: hidden; transition: border-color .17s; }
.sC-bkc:hover { border-color: rgba(232,185,35,.26); }
.sC-bkc__hd { padding: .7rem .96rem .6rem; background: rgba(232,185,35,.04); border-bottom: 1px solid rgba(232,185,35,.07); display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: .4rem; }
.sC-bkc__type { font-family: "Playfair Display",Georgia,serif; font-size: .93rem; font-weight: 700; color: #FDF6EC; }
.sC-bkc__pin { font-family: "Montserrat",sans-serif; font-size: .48rem; font-weight: 600; letter-spacing: .13em; color: rgba(232,185,35,.46); margin-top: .08rem; }
.sC-bkc__bd { padding: .7rem .96rem; display: grid; grid-template-columns: 1fr 1fr; gap: .33rem .86rem; }
.sC-bkrow { display: flex; flex-direction: column; gap: .07rem; }
.sC-bkrow--full { grid-column: 1/-1; }
.sC-bkrow__l { font-family: "Montserrat",sans-serif; font-size: .42rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(253,246,236,.25); }
.sC-bkrow__v { font-family: "Montserrat",sans-serif; font-size: .69rem; font-weight: 600; color: #FDF6EC; word-break: break-word; }
.sC-bkrow__v--gold { color: #E8B923; }
.sC-bkrow__v--red { color: #CC1A1A; }
.sC-bkrow__v--green { color: #4CAF50; }

/* ── BOOKING CANCEL FOOTER ────────────────────────────────────────────────── */
.sC-bkc__ft { padding: .52rem .96rem .72rem; border-top: 1px solid rgba(232,185,35,.07); display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.sC-bkc__ft-timer { font-family: "Montserrat",sans-serif; font-size: .5rem; color: rgba(253,246,236,.28); letter-spacing: .05em; line-height: 1.4; }
.sC-bkc__ft-timer strong { color: rgba(232,185,35,.6); }
.sC-bkc__ft-msg { font-family: "Montserrat",sans-serif; font-size: .5rem; color: rgba(204,26,26,.46); letter-spacing: .04em; line-height: 1.4; }
.sC-btn--cancel { background: transparent; color: rgba(204,26,26,.66); border: 1.5px solid rgba(204,26,26,.28); font-family: "Montserrat",sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; padding: .34rem .82rem; cursor: pointer; transition: all .17s; display: inline-flex; align-items: center; gap: .3rem; width: auto; }
.sC-btn--cancel:hover:not(:disabled) { border-color: #CC1A1A; color: #CC1A1A; background: rgba(204,26,26,.07); }
.sC-btn--cancel:disabled { opacity: .32; cursor: not-allowed; }

/* ── STATUS CHIPS ─────────────────────────────────────────────────────────── */
.sC-chip { display: inline-flex; align-items: center; padding: .18rem .56rem; font-family: "Montserrat",sans-serif; font-size: .46rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border: 1px solid; flex-shrink: 0; }
.sC-chip--green { color: #4CAF50; border-color: rgba(76,175,80,.32); background: rgba(76,175,80,.08); }
.sC-chip--gold { color: #E8B923; border-color: rgba(232,185,35,.32); background: rgba(232,185,35,.08); }
.sC-chip--red { color: #CC1A1A; border-color: rgba(204,26,26,.32); background: rgba(204,26,26,.08); }
.sC-chip--grey { color: #999; border-color: rgba(153,153,153,.25); background: rgba(153,153,153,.05); }

/* ── CHECK-IN BANNER ──────────────────────────────────────────────────────── */
.sC-cib { padding: .78rem .96rem; margin-bottom: .86rem; font-family: "Montserrat",sans-serif; font-size: .63rem; font-weight: 600; border: 1px solid; line-height: 1.5; }
.sC-cib.ci { color: #4CAF50; border-color: rgba(76,175,80,.26); background: rgba(76,175,80,.06); }
.sC-cib.pd { color: rgba(232,185,35,.77); border-color: rgba(232,185,35,.2); background: rgba(232,185,35,.05); }
.sC-cib.ex { color: #CC1A1A; border-color: rgba(204,26,26,.26); background: rgba(204,26,26,.06); }

/* ── LOYALTY CARD ─────────────────────────────────────────────────────────── */
.sC-lc { background: linear-gradient(140deg,#1c0a01 0%,#290f03 40%,#170600 70%,#2c1404 100%); border: 1.5px solid rgba(232,185,35,.26); padding: 1.22rem 1.32rem 1.02rem; margin-bottom: 1.02rem; position: relative; overflow: hidden; }
.sC-lc::before { content: ""; position: absolute; top: -35px; right: -35px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle,rgba(232,185,35,.08),transparent 65%); pointer-events: none; }
.sC-lc::after { content: "★ SAMROSSY HOTEL & SUITES ★"; position: absolute; bottom: .52rem; right: .82rem; font-family: "Montserrat",sans-serif; font-size: .36rem; letter-spacing: .24em; color: rgba(232,185,35,.14); pointer-events: none; }
.sC-lt { font-family: "Playfair Display",Georgia,serif; font-size: 1rem; font-weight: 700; color: #E8B923; margin-bottom: .1rem; }
.sC-ls { font-family: "Cormorant Garamond",Georgia,serif; font-size: .82rem; font-style: italic; color: rgba(253,246,236,.31); margin-bottom: .85rem; }
.sC-stmps { display: grid; grid-template-columns: repeat(5,1fr); gap: .42rem; margin-bottom: .7rem; }
.sC-stmp { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; border: 1.5px solid rgba(232,185,35,.16); background: rgba(2,0,0,.52); }
.sC-stmp.on { border-color: rgba(232,185,35,.56); background: linear-gradient(135deg,rgba(139,99,16,.22),rgba(232,185,35,.16)); animation: sC-stmp .43s cubic-bezier(.34,1.56,.64,1) both; }
.sC-lpw { margin-bottom: .56rem; }
.sC-lpl { font-family: "Montserrat",sans-serif; font-size: .54rem; color: rgba(253,246,236,.35); margin-bottom: .28rem; display: flex; justify-content: space-between; }
.sC-lpb { height: 4px; background: rgba(232,185,35,.1); overflow: hidden; }
.sC-lpf { height: 100%; background: linear-gradient(90deg,#8B6310,#E8B923); transition: width .7s ease; }
.sC-ltot { font-family: "Montserrat",sans-serif; font-size: .56rem; color: rgba(253,246,236,.28); }
.sC-ltot strong { color: #E8B923; }
.sC-ri { padding: .66rem .86rem; background: rgba(2,0,0,.43); border: 1px solid rgba(232,185,35,.1); margin-bottom: .36rem; display: flex; align-items: center; justify-content: space-between; gap: .52rem; }
.sC-ri__l { display: flex; flex-direction: column; gap: .07rem; }
.sC-ri__type { font-family: "Montserrat",sans-serif; font-size: .56rem; font-weight: 700; color: #E8B923; letter-spacing: .07em; }
.sC-ri__note { font-family: "Montserrat",sans-serif; font-size: .6rem; color: rgba(253,246,236,.38); line-height: 1.4; }
.sC-ri__date { font-family: "Montserrat",sans-serif; font-size: .48rem; color: rgba(253,246,236,.22); flex-shrink: 0; }

/* ── TABS ─────────────────────────────────────────────────────────────────── */
.sC-tabs { display: flex; gap: .36rem; margin-bottom: .9rem; flex-wrap: wrap; }
.sC-tab { padding: .34rem .86rem; cursor: pointer; font-family: "Montserrat",sans-serif; font-size: .51rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(2,0,0,.54); border: 1.5px solid rgba(232,185,35,.14); color: rgba(253,246,236,.27); transition: all .15s; }
.sC-tab:hover:not(.on) { border-color: rgba(232,185,35,.32); color: rgba(253,246,236,.56); }
.sC-tab.on { background: rgba(232,185,35,.08); border-color: rgba(232,185,35,.42); color: #E8B923; }

/* ── FEEDBACK ─────────────────────────────────────────────────────────────── */
.sC-fbl { display: flex; flex-direction: column; gap: .5rem; }
.sC-fbi { padding: .76rem .86rem; background: rgba(2,0,0,.47); border: 1px solid rgba(232,185,35,.09); }
.sC-fbi__hd { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .26rem; margin-bottom: .3rem; }
.sC-fbi__type { font-family: "Montserrat",sans-serif; font-size: .46rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.sC-fbi__type--c { color: #E05555; }
.sC-fbi__type--r { color: #4CAF50; }
.sC-fbi__type--l { color: #E8B923; }
.sC-fbi__type--g { color: rgba(253,246,236,.46); }
.sC-fbi__sub { font-family: "Montserrat",sans-serif; font-size: .68rem; font-weight: 700; color: #FDF6EC; margin-bottom: .16rem; }
.sC-fbi__msg { font-family: "Montserrat",sans-serif; font-size: .63rem; color: rgba(253,246,236,.46); line-height: 1.5; }
.sC-fbi__dt { font-family: "Montserrat",sans-serif; font-size: .48rem; color: rgba(253,246,236,.2); }
.sC-fbs { font-family: "Montserrat",sans-serif; font-size: .46rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .13rem .48rem; border: 1px solid; }
.sC-fbs--p { color: rgba(232,185,35,.66); border-color: rgba(232,185,35,.23); background: rgba(232,185,35,.06); }
.sC-fbs--r { color: #4CAF50; border-color: rgba(76,175,80,.26); background: rgba(76,175,80,.06); }

/* ── PROFILE ──────────────────────────────────────────────────────────────── */
.sC-pg { display: grid; grid-template-columns: 1fr 1fr; gap: .56rem .86rem; margin-bottom: .92rem; }
.sC-pr { display: flex; flex-direction: column; gap: .09rem; }
.sC-pr--full { grid-column: 1/-1; }
.sC-pr__l { font-family: "Montserrat",sans-serif; font-size: .42rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(232,185,35,.36); }
.sC-pr__v { font-family: "Montserrat",sans-serif; font-size: .72rem; font-weight: 600; color: #FDF6EC; word-break: break-word; line-height: 1.4; }
.sC-dz { padding: .76rem .96rem; background: rgba(204,26,26,.05); border: 1px solid rgba(204,26,26,.16); margin-top: 1.12rem; }
.sC-dz__t { font-family: "Montserrat",sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(204,26,26,.66); margin-bottom: .56rem; }

/* ── BOOKING WIZARD (IN-PORTAL) ───────────────────────────────────────────── */
.sC-bwiz { max-width: 560px; margin: 0 auto; }
.sC-bwiz-steps { display: flex; gap: 0; margin-bottom: 1.2rem; border: 1px solid rgba(232,185,35,.14); overflow: hidden; }
.sC-bwiz-step { flex: 1; padding: .45rem .3rem; text-align: center; font-family: "Montserrat",sans-serif; font-size: .44rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(253,246,236,.25); border-right: 1px solid rgba(232,185,35,.1); background: rgba(2,0,0,.5); cursor: default; transition: color .15s,background .15s; }
.sC-bwiz-step:last-child { border-right: none; }
.sC-bwiz-step.on { color: #E8B923; background: rgba(232,185,35,.08); }
.sC-bwiz-step.done { color: rgba(76,175,80,.8); background: rgba(76,175,80,.05); }
.sC-room-sel { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1rem; }
.sC-room-opt { padding: .88rem 1rem; border: 1.5px solid rgba(232,185,35,.14); background: rgba(2,0,0,.55); cursor: pointer; transition: border-color .17s,background .17s; display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.sC-room-opt:hover { border-color: rgba(232,185,35,.38); background: rgba(232,185,35,.04); }
.sC-room-opt.on { border-color: #E8B923; background: rgba(232,185,35,.07); }
.sC-room-opt__nm { font-family: "Playfair Display",Georgia,serif; font-size: .97rem; font-weight: 700; color: #FDF6EC; margin-bottom: .12rem; }
.sC-room-opt__ft { font-family: "Montserrat",sans-serif; font-size: .5rem; color: rgba(253,246,236,.32); line-height: 1.5; }
.sC-room-opt__pr { font-family: "Playfair Display",Georgia,serif; font-size: 1.1rem; font-weight: 700; color: #E8B923; flex-shrink: 0; }
.sC-acct { background: rgba(2,0,0,.6); border: 1px solid rgba(232,185,35,.18); padding: .88rem 1rem; margin-bottom: .9rem; }
.sC-acct__title { font-family: "Montserrat",sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: rgba(232,185,35,.5); margin-bottom: .62rem; }
.sC-acct-row { display: flex; justify-content: space-between; align-items: center; padding: .26rem 0; border-bottom: 1px solid rgba(232,185,35,.06); gap: .5rem; }
.sC-acct-row:last-child { border-bottom: none; }
.sC-acct-row__l { font-family: "Montserrat",sans-serif; font-size: .5rem; color: rgba(253,246,236,.3); letter-spacing: .06em; }
.sC-acct-row__v { font-family: "Montserrat",sans-serif; font-size: .66rem; font-weight: 700; color: #FDF6EC; word-break: break-all; text-align: right; }
.sC-acct-row__v--gold { color: #E8B923; font-family: "Playfair Display",Georgia,serif; font-size: .9rem; }
.sC-ref-box { background: rgba(2,0,0,.7); border: 1px dashed rgba(232,185,35,.28); padding: .56rem .86rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .8rem; }
.sC-ref-code { font-family: "Playfair Display",Georgia,serif; font-size: 1.05rem; font-weight: 700; letter-spacing: .12em; color: #E8B923; }
.sC-cdown { display: flex; align-items: center; justify-content: space-between; padding: .52rem .86rem; background: rgba(2,0,0,.5); border: 1px solid rgba(232,185,35,.12); margin-bottom: .8rem; }
.sC-cdown__lbl { font-family: "Montserrat",sans-serif; font-size: .52rem; color: rgba(253,246,236,.38); letter-spacing: .06em; }
.sC-cdown__val { font-family: "Playfair Display",Georgia,serif; font-size: 1.1rem; font-weight: 700; color: #E8B923; }
.sC-cdown__exp { font-family: "Montserrat",sans-serif; font-size: .58rem; color: #CC1A1A; font-weight: 600; }
.sC-upload { border: 2px dashed rgba(232,185,35,.22); padding: 1.2rem; text-align: center; cursor: pointer; transition: border-color .17s; margin-bottom: .8rem; }
.sC-upload:hover { border-color: rgba(232,185,35,.5); }
.sC-upload__i { font-size: 1.6rem; margin-bottom: .35rem; }
.sC-upload__t { font-family: "Montserrat",sans-serif; font-size: .6rem; color: rgba(253,246,236,.38); line-height: 1.5; }
.sC-upv { display: none; align-items: center; gap: .52rem; padding: .52rem .86rem; background: rgba(232,185,35,.06); border: 1px solid rgba(232,185,35,.18); margin-bottom: .8rem; }
.sC-upv.on { display: flex; }
.sC-upv__nm { font-family: "Montserrat",sans-serif; font-size: .62rem; color: #E8B923; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sC-upv__rm { background: none; border: none; color: rgba(204,26,26,.6); cursor: pointer; font-size: .8rem; padding: .15rem; }
.sC-confirm-box { background: rgba(2,0,0,.6); border: 1px solid rgba(232,185,35,.14); padding: .92rem 1rem; margin-bottom: 1rem; font-family: "Montserrat",sans-serif; font-size: .64rem; line-height: 1.8; color: rgba(253,246,236,.55); }
.sC-confirm-box strong { color: #FDF6EC; }
.sC-success-screen { text-align: center; padding: 1.5rem .5rem; }
.sC-success-screen__i { font-size: 3rem; margin-bottom: .6rem; }
.sC-success-screen__t { font-family: "Playfair Display",Georgia,serif; font-size: 1.28rem; font-weight: 700; color: #4CAF50; margin-bottom: .4rem; }
.sC-success-screen__s { font-family: "Montserrat",sans-serif; font-size: .65rem; color: rgba(253,246,236,.45); line-height: 1.6; margin-bottom: 1rem; }
.sC-pin-disp { font-family: "Playfair Display",Georgia,serif; font-size: 2rem; font-weight: 700; color: #E8B923; background: rgba(232,185,35,.06); border: 1.5px solid rgba(232,185,35,.3); display: inline-block; padding: .4rem 1.4rem; letter-spacing: .12em; margin-bottom: .8rem; }
.sC-ref-disp { font-family: "Montserrat",sans-serif; font-size: .65rem; font-weight: 700; color: #FDF6EC; background: rgba(2,0,0,.6); border: 1px dashed rgba(232,185,35,.3); display: inline-block; padding: .3rem 1rem; margin-bottom: 1rem; word-break: break-all; }
.sC-ptype-opts { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .9rem; }
.sC-ptype-opt { display: flex; align-items: flex-start; gap: .62rem; padding: .72rem .86rem; border: 1.5px solid rgba(232,185,35,.13); background: rgba(2,0,0,.52); cursor: pointer; transition: border-color .17s,background .17s; }
.sC-ptype-opt:hover { border-color: rgba(232,185,35,.34); background: rgba(232,185,35,.04); }
.sC-ptype-opt.on { border-color: #E8B923; background: rgba(232,185,35,.07); }
.sC-ptype-opt__ico { font-size: 1.1rem; flex-shrink: 0; margin-top: .05rem; }
.sC-ptype-opt__title { font-family: "Montserrat",sans-serif; font-size: .6rem; font-weight: 700; color: #FDF6EC; margin-bottom: .08rem; }
.sC-ptype-opt__desc { font-family: "Montserrat",sans-serif; font-size: .53rem; color: rgba(253,246,236,.35); line-height: 1.4; }
.sC-notice { padding: .62rem .86rem; margin-bottom: .72rem; border: 1px solid; border-radius: 0; font-family: "Montserrat",sans-serif; font-size: .62rem; line-height: 1.6; }
.sC-notice--warn { background: rgba(255,248,225,.05); border-color: rgba(240,192,64,.3); color: rgba(232,185,35,.8); }
.sC-notice--green { background: rgba(76,175,80,.05); border-color: rgba(76,175,80,.3); color: rgba(76,175,80,.9); }
.sC-notice--info { background: rgba(232,185,35,.05); border-color: rgba(232,185,35,.2); color: rgba(253,246,236,.55); }

/* ── GAMES ────────────────────────────────────────────────────────────────── */
.sC-gsel { display: grid; grid-template-columns: repeat(auto-fill,minmax(188px,1fr)); gap: .8rem; margin-bottom: 1.02rem; }
.sC-gc { padding: 1.02rem .98rem; background: rgba(2,0,0,.54); border: 1px solid rgba(232,185,35,.12); cursor: pointer; text-align: center; transition: border-color .17s,background .17s,transform .2s; }
.sC-gc:hover { border-color: rgba(232,185,35,.38); background: rgba(232,185,35,.05); transform: translateY(-3px); }
.sC-gc.on { border-color: #E8B923; background: rgba(232,185,35,.07); }
.sC-gc__i { font-size: 2rem; margin-bottom: .46rem; }
.sC-gc__n { font-family: "Playfair Display",Georgia,serif; font-size: .9rem; font-weight: 700; color: #E8B923; margin-bottom: .2rem; }
.sC-gc__d { font-family: "Montserrat",sans-serif; font-size: .56rem; color: rgba(253,246,236,.28); line-height: 1.4; }
.sC-ga { background: rgba(2,0,0,.58); border: 1px solid rgba(232,185,35,.12); padding: 1.02rem; animation: sC-fi .2s ease both; }
.sC-ghd { display: flex; align-items: center; gap: .66rem; margin-bottom: .92rem; flex-wrap: wrap; }
.sC-gtt { font-family: "Playfair Display",Georgia,serif; font-size: .97rem; font-weight: 700; color: #FDF6EC; flex: 1; }
.sC-gsc { font-family: "Montserrat",sans-serif; font-size: .58rem; font-weight: 700; letter-spacing: .1em; color: #E8B923; }
.sC-gbk { font-family: "Montserrat",sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(253,246,236,.32); cursor: pointer; padding: .25rem .56rem; border: 1px solid rgba(232,185,35,.14); transition: color .15s,border-color .15s; }
.sC-gbk:hover { color: #E8B923; border-color: rgba(232,185,35,.36); }

/* ── NUMBER QUEST (GAME) ──────────────────────────────────────────────────── */
.sC-gdisp { font-family: "Playfair Display",Georgia,serif; font-size: 2.9rem; font-weight: 700; color: #E8B923; text-align: center; margin: .62rem 0; letter-spacing: .1em; line-height: 1; }
.sC-gfb { text-align: center; font-family: "Montserrat",sans-serif; font-size: .67rem; color: rgba(253,246,236,.44); min-height: 1em; margin-bottom: .72rem; line-height: 1.5; }
.sC-gbar { display: flex; gap: .5rem; align-items: stretch; max-width: 305px; margin: 0 auto; }
.sC-gbubs { display: flex; flex-wrap: wrap; gap: .26rem; justify-content: center; margin-top: .62rem; max-width: 325px; margin-left: auto; margin-right: auto; }
.sC-bub { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: "Montserrat",sans-serif; font-size: .48rem; font-weight: 700; border: 1.5px solid; }
.sC-bub--h { border-color: rgba(204,26,26,.37); color: #CC1A1A; background: rgba(204,26,26,.07); }
.sC-bub--l { border-color: rgba(76,175,80,.37); color: #4CAF50; background: rgba(76,175,80,.07); }
.sC-bub--w { border-color: rgba(232,185,35,.56); color: #E8B923; background: rgba(232,185,35,.13); }
.sC-glvl { display: flex; gap: .4rem; margin-bottom: .7rem; justify-content: center; }
.sC-glvl-btn { padding: .28rem .72rem; font-family: "Montserrat",sans-serif; font-size: .48rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border: 1.5px solid rgba(232,185,35,.2); background: rgba(2,0,0,.5); color: rgba(232,185,35,.5); cursor: pointer; transition: all .15s; }
.sC-glvl-btn.on { border-color: #E8B923; background: rgba(232,185,35,.1); color: #E8B923; }
.sC-ghint-btn { display: block; margin: .5rem auto 0; font-family: "Montserrat",sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(232,185,35,.4); background: none; border: 1px solid rgba(232,185,35,.15); padding: .22rem .66rem; cursor: pointer; transition: color .15s,border-color .15s; }
.sC-ghint-btn:hover { color: #E8B923; border-color: rgba(232,185,35,.38); }
.sC-ghint-btn:disabled { opacity: .3; cursor: not-allowed; }

/* ── MEMORY MATCH (GAME) ──────────────────────────────────────────────────── */
.sC-mg { display: grid; grid-template-columns: repeat(4,1fr); gap: .48rem; max-width: 325px; margin: 0 auto; }
.sC-mg--6 { grid-template-columns: repeat(6,1fr); max-width: 430px; }
.sC-mc { aspect-ratio: 1; border: 2px solid rgba(232,185,35,.17); background: rgba(2,0,0,.66); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.48rem; user-select: none; transition: border-color .14s,background .14s,transform .15s; }
.sC-mc:hover:not(.mt) { transform: scale(1.05); }
.sC-mc.fd { font-size: 0; }
.sC-mc.fu { border-color: rgba(232,185,35,.42); background: rgba(232,185,35,.07); }
.sC-mc.mt { border-color: rgba(76,175,80,.5); background: rgba(76,175,80,.1); cursor: default; transform: none; }
.sC-combo { text-align: center; font-family: "Montserrat",sans-serif; font-size: .56rem; color: rgba(232,185,35,.6); margin-bottom: .5rem; min-height: .8em; font-weight: 700; }
.sC-mem-lvl { display: flex; gap: .4rem; margin-bottom: .7rem; justify-content: center; }

/* ── QUICK TAP (GAME) ─────────────────────────────────────────────────────── */
.sC-ta-ar { position: relative; height: 225px; background: rgba(2,0,0,.7); border: 1px solid rgba(232,185,35,.1); overflow: hidden; margin-bottom: .7rem; }
.sC-tgt { position: absolute; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg,#8B6310,#E8B923); display: flex; align-items: center; justify-content: center; font-size: 1.12rem; cursor: pointer; animation: sC-tg .22s cubic-bezier(.34,1.56,.64,1) both,sC-pulse 1.2s ease-in-out infinite; transition: transform .1s; }
.sC-tgt:active { transform: scale(.82); }
.sC-tgt--bonus { background: linear-gradient(135deg,#8B0E0E,#CC1A1A); animation: sC-tg .22s cubic-bezier(.34,1.56,.64,1) both; }
.sC-tgt--penalty { background: linear-gradient(135deg,#1a3a1a,#2d6a2d); animation: sC-tg .22s cubic-bezier(.34,1.56,.64,1) both; }
.sC-tb { height: 4px; background: rgba(232,185,35,.1); overflow: hidden; margin-bottom: .5rem; }
.sC-tbf { height: 100%; background: linear-gradient(90deg,#CC1A1A,#E8B923); transition: width 1s linear; }
.sC-combo-flash { text-align: center; font-family: "Playfair Display",Georgia,serif; font-size: .82rem; color: #E8B923; font-weight: 700; min-height: 1.2em; margin-bottom: .3rem; letter-spacing: .06em; }
.sC-tap-stats { display: flex; justify-content: center; gap: 1.2rem; margin-bottom: .5rem; }
.sC-tap-stat { text-align: center; }
.sC-tap-stat__v { font-family: "Playfair Display",Georgia,serif; font-size: 1.28rem; font-weight: 700; color: #E8B923; }
.sC-tap-stat__l { font-family: "Montserrat",sans-serif; font-size: .42rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(253,246,236,.28); }

/* ── WORD SCRAMBLE (GAME) ─────────────────────────────────────────────────── */
.sC-wd { font-family: "Playfair Display",Georgia,serif; font-size: 1.9rem; font-weight: 700; color: #E8B923; text-align: center; margin: .62rem 0; letter-spacing: .22em; }
.sC-wh { text-align: center; font-family: "Cormorant Garamond",Georgia,serif; font-size: .88rem; font-style: italic; color: rgba(253,246,236,.36); margin-bottom: .72rem; min-height: 1em; }
.sC-wr { display: flex; gap: .5rem; max-width: 325px; margin: 0 auto; }
.sC-wcat { text-align: center; font-family: "Montserrat",sans-serif; font-size: .46rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(232,185,35,.3); margin-bottom: .3rem; }
.sC-wstreak { display: flex; gap: .3rem; justify-content: center; margin-bottom: .5rem; }
.sC-wdot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(232,185,35,.2); background: rgba(2,0,0,.5); }
.sC-wdot.on { background: #E8B923; border-color: #E8B923; }
.sC-wdot.mx { background: #CC1A1A; border-color: #CC1A1A; }
.sC-wskip-note { text-align: center; font-family: "Montserrat",sans-serif; font-size: .5rem; color: rgba(253,246,236,.22); margin-top: .3rem; }

/* ── NOTIFICATION BADGE ───────────────────────────────────────────────────── */
.sC-ni-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: #CC1A1A; color: #fff; font-family: "Montserrat",sans-serif; font-size: .38rem; font-weight: 700; line-height: 1; margin-left: auto; flex-shrink: 0; }

/* ── NOTIFICATION LIST ────────────────────────────────────────────────────── */
.sC-ntl { display: flex; flex-direction: column; gap: .48rem; }
.sC-ntc { padding: .78rem .92rem; background: rgba(2,0,0,.52); border: 1px solid rgba(232,185,35,.11); border-left: 3px solid rgba(232,185,35,.3); transition: border-color .15s,background .15s; position: relative; }
.sC-ntc.unread { border-left-color: #E8B923; background: rgba(232,185,35,.04); }
.sC-ntc.sys { border-left-color: rgba(76,175,80,.6); }
.sC-ntc.bday { border-left-color: #E8B923; background: rgba(232,185,35,.07); }
.sC-ntc__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.sC-ntc__ico { font-size: .95rem; flex-shrink: 0; margin-top: .05rem; }
.sC-ntc__title { font-family: "Playfair Display",Georgia,serif; font-size: .82rem; font-weight: 700; color: #FDF6EC; flex: 1; line-height: 1.3; }
.sC-ntc__dt { font-family: "Montserrat",sans-serif; font-size: .44rem; color: rgba(253,246,236,.22); flex-shrink: 0; white-space: nowrap; }
.sC-ntc__msg { font-family: "Montserrat",sans-serif; font-size: .62rem; color: rgba(253,246,236,.45); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.sC-ntc__unread-dot { position: absolute; top: .72rem; right: .72rem; width: 6px; height: 6px; border-radius: 50%; background: #E8B923; }
.sC-ntc__foot { display: flex; align-items: center; justify-content: flex-end; margin-top: .52rem; padding-top: .38rem; border-top: 1px solid rgba(232,185,35,.07); }
.sC-ntc__del { background: none; border: 1px solid rgba(204,26,26,.25); color: rgba(204,26,26,.5); font-family: "Montserrat",sans-serif; font-size: .44rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .18rem .52rem; cursor: pointer; transition: color .15s,border-color .15s,background .15s; display: inline-flex; align-items: center; gap: .25rem; }
.sC-ntc__del:hover { border-color: #CC1A1A; color: #CC1A1A; background: rgba(204,26,26,.06); }
.sC-ntc__del:disabled { opacity: .35; cursor: not-allowed; }
.sC-nt-filter { display: flex; gap: .34rem; margin-bottom: .82rem; flex-wrap: wrap; }
.sC-nt-f { padding: .28rem .72rem; cursor: pointer; font-family: "Montserrat",sans-serif; font-size: .48rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(2,0,0,.54); border: 1.5px solid rgba(232,185,35,.13); color: rgba(253,246,236,.27); transition: all .15s; }
.sC-nt-f:hover:not(.on) { border-color: rgba(232,185,35,.3); color: rgba(253,246,236,.5); }
.sC-nt-f.on { background: rgba(232,185,35,.08); border-color: rgba(232,185,35,.42); color: #E8B923; }

/* ── BIRTHDAY CELEBRATION OVERLAY ────────────────────────────────────────── */
.sC-bday-ov { position: fixed; inset: 0; z-index: 9999997; background: rgba(2,0,0,.93); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: sC-fi .25s ease both; }
.sC-bday-box { background: linear-gradient(155deg,#180800,#2a1003,#1a0a00); border: 2px solid rgba(232,185,35,.35); box-shadow: 0 0 60px rgba(232,185,35,.15),0 55px 130px rgba(2,0,0,.9); max-width: 400px; width: 100%; padding: 2rem 1.6rem 1.6rem; text-align: center; position: relative; overflow: hidden; animation: sC-pop .4s cubic-bezier(.34,1.56,.64,1) both; }
.sC-bday-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(232,185,35,.7) 50%,transparent); }
.sC-bday-ico { font-size: 3.4rem; margin-bottom: .7rem; display: block; animation: sC-stmp .6s cubic-bezier(.34,1.56,.64,1) both; }
.sC-bday-title { font-family: "Playfair Display",Georgia,serif; font-size: 1.46rem; font-weight: 700; color: #E8B923; margin-bottom: .38rem; line-height: 1.2; }
.sC-bday-sub { font-family: "Cormorant Garamond",Georgia,serif; font-size: 1rem; font-style: italic; color: rgba(253,246,236,.55); margin-bottom: 1.2rem; line-height: 1.5; }
.sC-bday-msg { font-family: "Montserrat",sans-serif; font-size: .63rem; color: rgba(253,246,236,.38); line-height: 1.7; margin-bottom: 1.2rem; }
.sC-confetti-piece { position: absolute; width: 8px; height: 8px; border-radius: 2px; animation: sC-confetti 2.2s ease-in forwards; }

/* ── PROFILE PICTURE / COMPLETION ────────────────────────────────────────── */
.sC-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.sC-prof-bar { padding: .5rem .72rem; margin-bottom: .72rem; font-family: "Montserrat",sans-serif; font-size: .58rem; line-height: 1.5; }

/* ── CINEMA ───────────────────────────────────────────────────────────────── */
.sC-cin-search { display: flex; gap: .5rem; margin-bottom: 1rem; }
.sC-cin-search .sC-inp { flex: 1; }
.sC-cin-genres { display: flex; gap: .36rem; flex-wrap: wrap; margin-bottom: .9rem; }
.sC-cin-g { padding: .26rem .72rem; cursor: pointer; font-family: "Montserrat",sans-serif; font-size: .48rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(2,0,0,.54); border: 1.5px solid rgba(232,185,35,.13); color: rgba(253,246,236,.27); transition: all .15s; }
.sC-cin-g:hover:not(.on) { border-color: rgba(232,185,35,.3); color: rgba(253,246,236,.5); }
.sC-cin-g.on { background: rgba(232,185,35,.08); border-color: rgba(232,185,35,.42); color: #E8B923; }
.sC-cin-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(138px,1fr)); gap: .72rem; margin-bottom: 1rem; }
.sC-cin-card { background: rgba(2,0,0,.62); border: 1px solid rgba(232,185,35,.1); cursor: pointer; transition: border-color .17s,transform .2s,box-shadow .2s; overflow: hidden; position: relative; }
.sC-cin-card:hover { border-color: rgba(232,185,35,.38); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(2,0,0,.6); }
.sC-cin-poster { width: 100%; aspect-ratio: 2/3; object-fit: cover; display: block; background: rgba(21,6,0,.8); }
.sC-cin-poster-ph { width: 100%; aspect-ratio: 2/3; background: linear-gradient(135deg,rgba(21,6,0,.9),rgba(40,12,2,.9)); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: rgba(232,185,35,.2); }
.sC-cin-info { padding: .52rem .56rem .6rem; }
.sC-cin-title { font-family: "Playfair Display",Georgia,serif; font-size: .72rem; font-weight: 700; color: #FDF6EC; line-height: 1.3; margin-bottom: .2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sC-cin-meta { font-family: "Montserrat",sans-serif; font-size: .46rem; color: rgba(253,246,236,.3); letter-spacing: .04em; }
.sC-cin-rating { position: absolute; top: .42rem; right: .42rem; background: rgba(2,0,0,.85); border: 1px solid rgba(232,185,35,.28); padding: .13rem .36rem; font-family: "Montserrat",sans-serif; font-size: .44rem; font-weight: 700; color: #E8B923; letter-spacing: .04em; }
.sC-cin-player { position: relative; background: #000; border: 1px solid rgba(232,185,35,.18); margin-bottom: .8rem; }
.sC-cin-player__hd { display: flex; align-items: center; gap: .6rem; padding: .62rem .86rem; background: rgba(2,0,0,.85); border-bottom: 1px solid rgba(232,185,35,.1); flex-wrap: wrap; }
.sC-cin-player__title { font-family: "Playfair Display",Georgia,serif; font-size: .9rem; font-weight: 700; color: #FDF6EC; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sC-cin-player__back { font-family: "Montserrat",sans-serif; font-size: .5rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(253,246,236,.35); cursor: pointer; padding: .25rem .56rem; border: 1px solid rgba(232,185,35,.14); transition: color .15s,border-color .15s; flex-shrink: 0; background: none; }
.sC-cin-player__back:hover { color: #E8B923; border-color: rgba(232,185,35,.36); }
.sC-cin-frame { width: 100%; aspect-ratio: 16/9; border: none; display: block; background: #000; }
.sC-cin-alts { padding: .6rem .86rem; background: rgba(2,0,0,.6); border-top: 1px solid rgba(232,185,35,.07); font-family: "Montserrat",sans-serif; font-size: .52rem; color: rgba(253,246,236,.3); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sC-cin-src-btn { padding: .2rem .56rem; cursor: pointer; border: 1px solid rgba(232,185,35,.2); background: rgba(232,185,35,.05); color: rgba(232,185,35,.6); font-family: "Montserrat",sans-serif; font-size: .48rem; font-weight: 700; letter-spacing: .08em; transition: all .15s; }
.sC-cin-src-btn.on { border-color: #E8B923; background: rgba(232,185,35,.1); color: #E8B923; }
.sC-cin-src-btn:hover:not(.on) { border-color: rgba(232,185,35,.4); color: rgba(232,185,35,.8); }
.sC-cin-notice { padding: .58rem .86rem; font-family: "Montserrat",sans-serif; font-size: .58rem; color: rgba(253,246,236,.38); background: rgba(232,185,35,.04); border: 1px solid rgba(232,185,35,.12); margin-bottom: .8rem; line-height: 1.6; }

/* ── TOAST ────────────────────────────────────────────────────────────────── */
.sC-tr { position: fixed; bottom: 1.3rem; left: 50%; transform: translateX(-50%); z-index: 9999999; display: flex; flex-direction: column; align-items: center; gap: .3rem; pointer-events: none; width: max-content; max-width: min(372px,92vw); }
.sC-t { display: flex; align-items: center; gap: .56rem; padding: .62rem .98rem; width: 100%; background: linear-gradient(135deg,#170700,#260f03); border-left: 3px solid #E8B923; box-shadow: 0 10px 28px rgba(2,0,0,.65); font-family: "Montserrat",sans-serif; font-size: .63rem; color: #FDF6EC; pointer-events: auto; animation: sC-ti .27s cubic-bezier(.34,1.56,.64,1) both; }
.sC-t.err { border-left-color: #CC1A1A; }
.sC-t.ok { border-left-color: #4CAF50; }
.sC-t.out { animation: sC-to .22s ease both; }

/* ── CONFIRM DIALOG ───────────────────────────────────────────────────────── */
.sC-do { position: fixed; inset: 0; z-index: 9999998; background: rgba(2,0,0,.92); backdrop-filter: blur(12px); display: none; align-items: center; justify-content: center; padding: 1rem; animation: sC-fi .17s ease both; }
.sC-do.on { display: flex; }
.sC-db { background: linear-gradient(155deg,#1a0700,#280f02); border: 1.5px solid rgba(232,185,35,.2); box-shadow: 0 38px 95px rgba(2,0,0,.84),0 0 0 1px rgba(232,185,35,.05) inset; padding: 1.62rem 1.42rem 1.22rem; max-width: 372px; width: 100%; animation: sC-pop .3s cubic-bezier(.34,1.56,.64,1) both; position: relative; }
.sC-db::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg,transparent,rgba(232,185,35,.4),transparent); }
.sC-di { font-size: 2.05rem; text-align: center; margin-bottom: .56rem; }
.sC-dtt { font-family: "Playfair Display",Georgia,serif; font-size: 1.06rem; font-weight: 700; color: #FDF6EC; text-align: center; margin-bottom: .34rem; }
.sC-dm { font-family: "Montserrat",sans-serif; font-size: .63rem; color: rgba(253,246,236,.4); text-align: center; line-height: 1.6; margin-bottom: 1.02rem; }
.sC-dbs { display: flex; gap: .53rem; }
.sC-dbtn { flex: 1; padding: .6rem; cursor: pointer; border: none; font-family: "Montserrat",sans-serif; font-size: .54rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; transition: all .17s; }
.sC-dbtn--c { background: rgba(232,185,35,.07); border: 1.5px solid rgba(232,185,35,.18); color: rgba(253,246,236,.46); }
.sC-dbtn--c:hover { border-color: rgba(232,185,35,.46); color: #FDF6EC; }
.sC-dbtn--ok { background: linear-gradient(135deg,#8B0E0E,#CC1A1A); color: #FDF6EC; }
.sC-dbtn--ok:hover { box-shadow: 0 4px 16px rgba(204,26,26,.28); }
.sC-dbtn--gold { background: linear-gradient(135deg,#8B6310,#E8B923); color: #150600; }
.sC-dbtn--gold:hover { box-shadow: 0 4px 16px rgba(232,185,35,.24); }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */
@media (max-width: 620px) {
  .sC-lay { flex-direction: column; }
  .sC-sb { width: 100%; flex-direction: row; border-right: none; border-bottom: 1px solid rgba(232,185,35,.09); flex-shrink: 0; overflow-x: auto; overflow-y: hidden; }
  .sC-sb::-webkit-scrollbar { height: 3px; width: 0; }
  .sC-av-blk { display: none; }
  .sC-nav { flex-direction: row; padding: 0; flex: 1; overflow-x: auto; }
  .sC-ni { flex-direction: column; gap: .15rem; padding: .48rem .66rem; font-size: .41rem; letter-spacing: .05em; border-left: none; border-bottom: 2.5px solid transparent; white-space: nowrap; flex-shrink: 0; }
  .sC-ni.on { border-bottom-color: #E8B923; border-left: none; }
  .sC-ni__ico { font-size: .85rem; width: auto; }
  .sC-logout { flex-direction: column; gap: .15rem; padding: .48rem .66rem; font-size: .41rem; border-top: none; border-left: 1px solid rgba(232,185,35,.08); margin-top: 0; flex-shrink: 0; }
  .sC-con { padding: .85rem .82rem 1.72rem; }
  .sC-pg { grid-template-columns: 1fr; }
  .sC-fg { grid-template-columns: 1fr; }
  .sC-bkc__bd { grid-template-columns: 1fr; }
  .sC-dg { grid-template-columns: repeat(2,1fr); }
  .sC-sh { min-height: 96vh; }
}

@media (max-width: 375px) {
  .sC-dg { grid-template-columns: 1fr 1fr; }
  .sC-stmps { gap: .26rem; }
  .sC-dbs { flex-direction: column; }
  .sC-gdisp { font-size: 2.3rem; }
}