/* ============================================================
   Zawaya AI — Hotel Dashboard
   Agency-grade design system | v2.0 | 2026-04-10
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Cairo:wght@400;500;600;700;800&display=swap');

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Backgrounds — synced with chatbot identity */
  --bg:           #080f14;
  --bg-card:      #0f1c28;
  --bg-raised:    #14253a;
  --bg-input:     #0d1923;
  --bg-hover:     #16273a;
  --bg-hdr:       rgba(8,15,20,0.97);
  --bg-sidebar:   #0a131c;

  /* Borders */
  --border:       rgba(255,255,255,0.07);
  --border-md:    rgba(255,255,255,0.11);
  --border-brand: rgba(94,201,160,0.22);

  /* Text */
  --tx-1:  #dce8f0;
  --tx-2:  #4e7080;
  --tx-3:  #2b3f50;
  --tx-inv:#080f14;

  /* Brand */
  --brand:      #5ec9a0;
  --brand-d:    #3ead86;
  --brand-dim:  rgba(94,201,160,0.08);
  --brand-glow: rgba(94,201,160,0.18);

  /* Semantic */
  --blue:   #3b82f6; --blue-bg:  rgba(59,130,246,0.09);
  --amber:  #f59e0b; --amber-bg: rgba(245,158,11,0.09);
  --red:    #ef4444; --red-bg:   rgba(239,68,68,0.09);
  --purple: #a855f7; --purple-bg:rgba(168,85,247,0.09);

  /* Dimensions */
  --hdr:    60px;
  --radius: 10px;
  --r-sm:   6px;
  --r-lg:   14px;

  /* Animation */
  --ease:  cubic-bezier(0.4,0,0.2,1);
  --t:     0.18s;

  /* Fonts */
  --font:    'Sora', 'Segoe UI', system-ui, sans-serif;
  --font-ar: 'Cairo', 'Sora', system-ui, sans-serif;
}

/* ── LIGHT MODE ─────────────────────────────────────────── */
html.light {
  --bg:        #f1f5f9;
  --bg-card:   #ffffff;
  --bg-raised: #f8fafc;
  --bg-input:  #f1f5f9;
  --bg-hover:  #f0f4f8;
  --bg-hdr:    rgba(248,250,252,0.97);
  --bg-sidebar:#ffffff;
  --border:    #e2e8f0;
  --border-md: #cbd5e1;
  --border-brand: rgba(94,201,160,0.3);
  --tx-1:  #0f2232;
  --tx-2:  #475569;
  --tx-3:  #94a3b8;
  --tx-inv:#ffffff;
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:13.5px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--tx-1);min-height:100vh;overflow-x:hidden;transition:background var(--t) var(--ease),color var(--t) var(--ease)}
html[dir="rtl"] body{font-family:var(--font-ar)}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
::-webkit-scrollbar{width:3px;height:3px}
::-webkit-scrollbar-thumb{background:var(--border-md);border-radius:3px}
::-webkit-scrollbar-track{background:transparent}
::placeholder{color:var(--tx-3)}

/* ── LOGIN ──────────────────────────────────────────────── */
#login-screen{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg);z-index:2000;
}
#login-screen::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 60% at 20% 50%, rgba(94,201,160,0.055) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 30%, rgba(59,130,246,0.04) 0%, transparent 60%);
  pointer-events:none;
}
.login-wrap{
  position:relative;
  width:400px;max-width:94vw;
}
.login-brand-row{
  display:flex;align-items:center;gap:10px;
  margin-bottom:36px;justify-content:center;
}
.login-mark{
  width:38px;height:38px;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 24px var(--brand-glow);
  flex-shrink:0;
}
.login-mark svg{width:20px;height:20px;color:#fff}
.login-logo-img{width:28px;height:28px;object-fit:contain;filter:brightness(0) invert(1)}
.login-name{font-size:1.15rem;font-weight:800;color:var(--tx-1);letter-spacing:-0.03em}
.login-name em{font-style:normal;color:var(--brand)}
.login-card{
  background:var(--bg-card);
  border:1px solid var(--border-md);
  border-radius:var(--r-lg);
  padding:32px;
}
.login-heading{font-size:1.2rem;font-weight:700;margin-bottom:4px;color:var(--tx-1)}
.login-sub{font-size:0.8rem;color:var(--tx-2);margin-bottom:28px}
.login-error{
  background:var(--red-bg);border:1px solid rgba(239,68,68,0.22);
  border-radius:var(--r-sm);padding:9px 12px;
  font-size:0.78rem;color:var(--red);margin-bottom:14px;display:none;
}
.login-error.show{display:block}
.login-hint{
  margin-top:18px;padding:10px 12px;
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r-sm);font-size:0.74rem;color:var(--tx-3);
  font-family:monospace;letter-spacing:0.02em;text-align:center;
}
.login-foot{
  display:flex;justify-content:center;gap:8px;margin-top:16px;
}

/* ── APP SHELL ──────────────────────────────────────────── */
#app{display:none}
#app.visible{display:block}

/* ── HEADER ─────────────────────────────────────────────── */
#top-header{
  position:fixed;top:0;left:0;right:0;
  height:var(--hdr);
  background:var(--bg-hdr);
  border-bottom:1px solid var(--border);
  z-index:200;
  display:flex;align-items:center;
  padding:0 20px;gap:14px;
  backdrop-filter:blur(16px);
}
.hdr-logo{
  display:flex;align-items:center;gap:9px;
  flex-shrink:0;min-width:0;
}
.hdr-logo img{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.hdr-logo-fallback{
  width:30px;height:30px;
  background:linear-gradient(135deg,var(--brand),var(--brand-d));
  border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.hdr-logo-fallback svg{width:16px;height:16px;color:#fff}
.hdr-brand{font-size:0.92rem;font-weight:800;color:var(--tx-1);letter-spacing:-0.03em;white-space:nowrap}
.hdr-brand em{font-style:normal;color:var(--brand)}
.hdr-divider{width:1px;height:24px;background:var(--border);flex-shrink:0}

/* Nav scroll wrapper */
.hdr-nav-wrap{
  flex:1;min-width:0;overflow-x:auto;
  display:flex;align-items:center;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-block:6px; /* room for absolute-positioned .nav-badge overflow */
  margin-block:-6px;
}
.hdr-nav-wrap::-webkit-scrollbar{display:none}
#header-nav{
  display:flex;align-items:center;gap:2px;
  white-space:nowrap;min-width:min-content;
}
.nav-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:var(--r-sm);
  border:none;background:none;
  font-family:inherit;font-size:0.8rem;font-weight:500;
  color:var(--tx-2);cursor:pointer;
  transition:all var(--t) var(--ease);white-space:nowrap;
}
.nav-btn svg{width:14px;height:14px;flex-shrink:0;opacity:0.75}
.nav-btn:hover{background:var(--brand-dim);color:var(--tx-1)}
.nav-btn.active{
  background:var(--brand-dim);
  color:var(--brand);font-weight:600;
}
.nav-btn.active svg{opacity:1}
.nav-btn{position:relative}
.nav-badge{
  position:absolute;top:-4px;right:-4px;
  min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;font-size:0.62rem;font-weight:800;
  background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  line-height:1;border:1.5px solid var(--bg);
  pointer-events:none;
}

/* Header actions */
.hdr-actions{
  display:flex;align-items:center;gap:6px;flex-shrink:0;
}
.hdr-act{
  width:34px;height:34px;border-radius:var(--r-sm);
  border:1px solid var(--border);background:var(--bg-card);
  color:var(--tx-2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t) var(--ease);position:relative;
}
.hdr-act:hover{border-color:var(--brand-border);color:var(--brand);background:var(--brand-dim)}
.hdr-act svg{width:15px;height:15px}
.hdr-act.text-btn{
  width:auto;padding:0 10px;font-size:0.75rem;font-weight:700;
  font-family:inherit;
}
.notif-pip{
  position:absolute;top:6px;right:6px;
  width:6px;height:6px;border-radius:50%;
  background:var(--red);border:1.5px solid var(--bg);
}
.hdr-act.ringing .notif-pip{animation:ring 2s var(--ease) infinite}
@keyframes ring{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}

.user-chip{
  display:flex;align-items:center;gap:8px;
  padding:4px 10px 4px 4px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:30px;cursor:pointer;
  transition:border-color var(--t) var(--ease);
  flex-shrink:0;
}
.user-chip:hover{border-color:var(--border-brand)}
.user-chip:focus-visible{outline:2px solid var(--brand-glow);outline-offset:2px}
.user-chip[aria-expanded="true"] #user-chip-caret{transform:rotate(180deg)}

/* عناصر قائمة الحساب (الإعدادات / تسجيل الخروج) */
.acct-mi{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 11px;border:0;border-radius:9px;
  background:transparent;color:var(--tx-1);
  font-family:inherit;font-size:0.82rem;font-weight:600;
  cursor:pointer;text-align:start;
  transition:background var(--t) var(--ease),color var(--t) var(--ease);
}
.acct-mi svg{width:15px;height:15px;flex:none;opacity:.75}
.acct-mi:hover{background:var(--bg-raised)}
.acct-mi-danger{color:#f87171}
.acct-mi-danger:hover{background:rgba(248,113,113,0.10)}
/* اللوجو ينقل إلى «نظرة عامة» — نُظهر أنه قابل للضغط */
.hdr-logo{cursor:pointer}
.hdr-logo:focus-visible{outline:2px solid var(--brand-glow);outline-offset:3px;border-radius:8px}
.user-av{
  width:26px;height:26px;border-radius:50%;
  background:var(--brand-dim);border:1.5px solid var(--brand-glow);
  display:flex;align-items:center;justify-content:center;
  font-size:0.65rem;font-weight:800;color:var(--brand);
}
.user-nm{font-size:0.75rem;font-weight:600;color:var(--tx-1)}
.user-rl{font-size:0.64rem;color:var(--tx-3)}

/* ── MAIN CONTENT ───────────────────────────────────────── */
#main-content{
  margin-top:var(--hdr);
  padding:22px;
  min-height:calc(100vh - var(--hdr));
}

/* ── PANEL ──────────────────────────────────────────────── */
.panel{display:none;animation:fadeUp 0.22s var(--ease)}
.panel.active{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.ph{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.ph-l h1{font-size:1.22rem;font-weight:800;color:var(--tx-1);letter-spacing:-0.03em}
.ph-l p{font-size:0.77rem;color:var(--tx-2);margin-top:2px}
.ph-r{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* ── CARD ───────────────────────────────────────────────── */
.card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  transition:background var(--t),border-color var(--t);
}
.card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.card-title{font-size:0.83rem;font-weight:700;color:var(--tx-1)}
.card-sub{font-size:0.72rem;color:var(--tx-2);margin-top:1px}

/* ── KPI GRID ───────────────────────────────────────────── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.kpi-grid-6{grid-template-columns:repeat(6,1fr)}
.kpi{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:18px 16px;
  position:relative;overflow:hidden;
}
.kpi::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--brand) 0%,transparent 100%);
}
.kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kpi-lbl{font-size:0.72rem;font-weight:600;color:var(--tx-2);letter-spacing:0.02em}
.kpi-ico{
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:var(--brand-dim);color:var(--brand);
}
.kpi-ico svg{width:14px;height:14px}
.kpi-val{font-size:1.75rem;font-weight:800;letter-spacing:-0.04em;color:var(--tx-1);line-height:1}
.kpi-chg{
  display:inline-flex;align-items:center;gap:3px;
  margin-top:8px;font-size:0.7rem;font-weight:700;
  padding:2px 8px;border-radius:20px;
}
.kpi-chg svg{width:10px;height:10px}
.kpi-chg.up{background:rgba(94,201,160,0.1);color:var(--brand)}
.kpi-chg.dn{background:var(--red-bg);color:var(--red)}

/* ── LAYOUT HELPERS ─────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.g12{display:grid;grid-template-columns:1fr 2fr;gap:14px}
.g21{display:grid;grid-template-columns:2fr 1fr;gap:14px}
.mb3{margin-bottom:14px}
.mb4{margin-bottom:18px}
.mt3{margin-top:14px}
.mt4{margin-top:18px}
.flex{display:flex}
.fxa{display:flex;align-items:center}
.fxb{display:flex;align-items:center;justify-content:space-between}
.gap2{gap:8px}
.gap3{gap:12px}
.wrap{flex-wrap:wrap}

/* ── CHARTS ─────────────────────────────────────────────── */
.ch-wrap{position:relative;height:200px}
.ch-wrap.tall{height:260px}
.trange{display:flex;gap:3px}
.tr-btn{
  padding:3px 9px;border-radius:4px;
  font-size:0.7rem;font-weight:700;
  border:1px solid var(--border);
  background:none;color:var(--tx-2);cursor:pointer;
  transition:all var(--t);font-family:inherit;
}
.tr-btn:hover,.tr-btn.active{background:var(--brand);border-color:var(--brand);color:#fff}

/* ── TABLES ─────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{
  padding:9px 13px;text-align:start;
  font-size:0.67rem;font-weight:700;color:var(--tx-3);
  text-transform:uppercase;letter-spacing:0.07em;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
tbody td{
  padding:10px 13px;font-size:0.81rem;color:var(--tx-1);
  border-bottom:1px solid var(--border);vertical-align:middle;
}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:background var(--t)}
tbody tr:hover{background:var(--bg-hover)}

/* ── BADGES ─────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:4px;
  font-size:0.67rem;font-weight:700;white-space:nowrap;letter-spacing:0.02em;
}
.badge::before{content:'';width:4px;height:4px;border-radius:50%;background:currentColor;flex-shrink:0}
.b-new{background:var(--blue-bg);color:var(--blue)}
.b-prog{background:var(--amber-bg);color:var(--amber)}
.b-done{background:rgba(94,201,160,0.1);color:var(--brand)}
.b-warn{background:var(--red-bg);color:var(--red)}
.b-off{background:rgba(78,112,128,0.1);color:var(--tx-2)}
.b-on{background:rgba(94,201,160,0.1);color:var(--brand)}
.b-super{background:var(--purple-bg);color:var(--purple)}
.b-admin{background:var(--blue-bg);color:var(--blue)}
.b-staff{background:var(--amber-bg);color:var(--amber)}
.b-svc{background:rgba(94,201,160,0.1);color:var(--brand)}
.b-starter{background:var(--blue-bg);color:var(--blue)}
.b-pro{background:var(--purple-bg);color:var(--purple)}
.b-enterprise{background:rgba(94,201,160,0.1);color:var(--brand)}

/* ── FORMS ──────────────────────────────────────────────── */
.fg{margin-bottom:14px}
.fl{display:block;font-size:0.7rem;font-weight:700;color:var(--tx-2);margin-bottom:5px;letter-spacing:0.03em}
.fi,.fs,.ft{
  width:100%;padding:8px 12px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--tx-1);
  font-family:inherit;font-size:0.82rem;
  transition:border var(--t),box-shadow var(--t);outline:none;
}
.fi:focus,.fs:focus,.ft:focus{
  border-color:var(--brand-glow);
  box-shadow:0 0 0 2px rgba(94,201,160,0.07);
}
.fs{appearance:none;cursor:pointer}
.ft{resize:vertical;min-height:88px;line-height:1.5}
.fr{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.char-ct{font-size:0.7rem;color:var(--tx-3);text-align:end;margin-top:3px}
.fi[type="color"]{padding:4px 6px;height:34px;cursor:pointer}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:var(--r-sm);
  font-family:inherit;font-size:0.8rem;font-weight:700;
  cursor:pointer;border:none;
  transition:all var(--t) var(--ease);white-space:nowrap;
  line-height:1;
}
.btn svg{width:13px;height:13px;flex-shrink:0}
.btn-p{background:var(--brand);color:#fff}
.btn-p:hover{background:var(--brand-d);box-shadow:0 3px 12px var(--brand-glow)}
.btn-s{background:var(--bg-card);border:1px solid var(--border-md);color:var(--tx-1)}
.btn-s:hover{border-color:var(--brand-glow);background:var(--brand-dim);color:var(--brand)}
.btn-d{background:var(--red-bg);border:1px solid rgba(239,68,68,0.2);color:var(--red)}
.btn-d:hover{background:var(--red);color:#fff;border-color:var(--red)}
.btn-g{background:none;color:var(--tx-2);border:none}
.btn-g:hover{background:var(--brand-dim);color:var(--brand)}
.btn-sm{padding:5px 11px;font-size:0.73rem}
.btn-xs{padding:3px 9px;font-size:0.68rem}
.btn:disabled{opacity:0.45;cursor:not-allowed}

/* ── SEARCH ─────────────────────────────────────────────── */
.search{
  display:flex;align-items:center;gap:7px;
  background:var(--bg-input);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:7px 12px;
  transition:all var(--t);
}
.search:focus-within{border-color:var(--brand-glow)}
.search svg{width:13px;height:13px;color:var(--tx-3);flex-shrink:0}
.search input{
  background:none;border:none;outline:none;
  color:var(--tx-1);font-family:inherit;font-size:0.8rem;width:180px;
}

/* ── TOGGLE SWITCH ──────────────────────────────────────── */
.tog{position:relative;width:36px;height:20px;display:inline-block;cursor:pointer;flex-shrink:0}
.tog input{opacity:0;width:0;height:0;position:absolute}
.tog-track{
  position:absolute;inset:0;
  background:var(--border-md);border-radius:20px;
  transition:background var(--t);border:1px solid var(--border);
}
.tog input:checked ~ .tog-track{background:var(--brand);border-color:var(--brand)}
.tog-thumb{
  position:absolute;top:3px;left:3px;
  width:12px;height:12px;background:#fff;border-radius:50%;
  transition:left var(--t);box-shadow:0 1px 3px rgba(0,0,0,0.3);
  pointer-events:none;
}
.tog input:checked ~ .tog-track .tog-thumb{left:calc(100% - 15px)}
html[dir="rtl"] .tog-thumb{left:auto;right:3px}
html[dir="rtl"] .tog input:checked ~ .tog-track .tog-thumb{right:calc(100% - 15px)}

/* ── MODALS ─────────────────────────────────────────────── */
.overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.65);
  z-index:500;display:none;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);
}
.overlay.open{display:flex;animation:fadeUp 0.18s var(--ease)}
.modal{
  background:var(--bg-card);border:1px solid var(--border-md);
  border-radius:var(--r-lg);padding:24px;
  width:480px;max-width:96vw;max-height:90vh;overflow-y:auto;
  box-shadow:0 24px 64px rgba(0,0,0,0.55);
}
.modal.sm{width:360px}
.m-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.m-title{font-size:0.95rem;font-weight:800;color:var(--tx-1)}
.m-close{background:none;border:none;cursor:pointer;color:var(--tx-3);padding:3px;transition:color var(--t)}
.m-close:hover{color:var(--tx-1)}
.m-close svg{width:18px;height:18px}
.m-ft{
  display:flex;gap:8px;justify-content:flex-end;
  margin-top:20px;padding-top:16px;border-top:1px solid var(--border);
}
.confirm-ico{
  width:48px;height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--red-bg);color:var(--red);margin:0 auto 14px;
}
.confirm-ico svg{width:24px;height:24px}
.confirm-body{text-align:center;margin-bottom:20px}
.confirm-body h3{font-size:0.95rem;font-weight:800;margin-bottom:5px}
.confirm-body p{font-size:0.78rem;color:var(--tx-2)}
.confirm-btns{display:flex;gap:8px}
.confirm-btns .btn{flex:1;justify-content:center}

/* ── DRAWER ─────────────────────────────────────────────── */
.drw-ovl{position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:300;display:none}
.drw-ovl.open{display:block}
.drw{
  position:fixed;top:var(--hdr);right:0;bottom:0;
  width:380px;max-width:92vw;
  background:var(--bg-card);border-left:1px solid var(--border-md);
  z-index:301;padding:20px;overflow-y:auto;
  transform:translateX(110%);
  transition:transform 0.28s var(--ease);
}
html[dir="rtl"] .drw{right:auto;left:0;border-left:none;border-right:1px solid var(--border-md);transform:translateX(-110%)}
.drw.open{transform:translateX(0)}
html[dir="rtl"] .drw.open{transform:translateX(0)}
.drw-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.drw-title{font-size:0.9rem;font-weight:800}
.drw-close{background:none;border:none;cursor:pointer;color:var(--tx-3);padding:3px;transition:color var(--t)}
.drw-close:hover{color:var(--tx-1)}
.drw-close svg{width:18px;height:18px}

/* ── TOAST ──────────────────────────────────────────────── */
#toast-box{
  position:fixed;top:72px;right:18px;z-index:2000;
  display:flex;flex-direction:column;gap:6px;pointer-events:none;
}
html[dir="rtl"] #toast-box{right:auto;left:18px}
.toast{
  display:flex;align-items:center;gap:9px;
  background:var(--bg-raised);border:1px solid var(--border-md);
  border-radius:var(--radius);padding:11px 14px;
  min-width:240px;max-width:340px;
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  pointer-events:all;animation:fadeUp 0.25s var(--ease);
}
.toast.out{animation:fadeOut 0.25s var(--ease) forwards}
.toast svg{width:15px;height:15px;flex-shrink:0}
.toast span{font-size:0.79rem;color:var(--tx-1)}
.toast.ok{border-inline-start:2px solid var(--brand)}.toast.ok svg{color:var(--brand)}
.toast.err{border-inline-start:2px solid var(--red)}.toast.err svg{color:var(--red)}
.toast.info{border-inline-start:2px solid var(--blue)}.toast.info svg{color:var(--blue)}
@keyframes fadeOut{to{opacity:0;transform:translateX(12px)}}

/* ── SKELETON ───────────────────────────────────────────── */
.skel{
  background:linear-gradient(90deg,var(--bg-card) 25%,var(--bg-raised) 50%,var(--bg-card) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-row{padding:10px 13px;display:flex;flex-direction:column;gap:8px}
.skel-line{height:11px}
.skel-w80{width:80%}.skel-w55{width:55%}.skel-w35{width:35%}

/* ── EMPTY STATE ────────────────────────────────────────── */
.empty{text-align:center;padding:44px 20px;color:var(--tx-3)}
.empty svg{width:40px;height:40px;margin-bottom:12px;opacity:0.3}
.empty h3{font-size:0.85rem;font-weight:700;color:var(--tx-2);margin-bottom:4px}
.empty p{font-size:0.75rem}

/* ── SPINNER ────────────────────────────────────────────── */
.spin{width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--brand);border-radius:50%;animation:rotate 0.65s linear infinite;flex-shrink:0}
@keyframes rotate{to{transform:rotate(360deg)}}
.spin-center{display:flex;justify-content:center;padding:36px}

/* ── TABS (top bar style) ───────────────────────────────── */
.tabs{display:flex;gap:2px;background:var(--bg-input);border-radius:var(--r-sm);padding:3px;margin-bottom:18px}
.tab{
  flex:1;padding:7px 14px;border-radius:4px;border:none;background:none;
  font-family:inherit;font-size:0.78rem;font-weight:500;
  color:var(--tx-2);cursor:pointer;transition:all var(--t);text-align:center;white-space:nowrap;
}
.tab.active{background:var(--bg-card);color:var(--brand);font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,0.12)}
.tp{display:none}.tp.active{display:block;animation:fadeUp 0.18s var(--ease)}

/* ── SETTINGS LAYOUT ────────────────────────────────────── */
.settings-wrap{display:grid;grid-template-columns:200px 1fr;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--bg-card)}
.settings-nav{border-inline-end:1px solid var(--border);padding:8px}
.settings-body{padding:24px}
.s-nav-item{
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;border-radius:var(--r-sm);
  font-size:0.8rem;font-weight:500;color:var(--tx-2);
  cursor:pointer;transition:all var(--t);border:none;background:none;
  width:100%;text-align:start;font-family:inherit;
}
.s-nav-item svg{width:14px;height:14px;flex-shrink:0;opacity:0.7}
.s-nav-item:hover{background:var(--bg-hover);color:var(--tx-1)}
.s-nav-item.active{background:var(--brand-dim);color:var(--brand);font-weight:700}
.s-nav-item.active svg{opacity:1}
.s-nav-sep{height:1px;background:var(--border);margin:6px 0}
.s-section{display:none}.s-section.active{display:block}
.s-section h2{font-size:0.9rem;font-weight:800;color:var(--tx-1);margin-bottom:4px}
.s-section .desc{font-size:0.77rem;color:var(--tx-2);margin-bottom:22px}

/* ── SERVICE TOGGLE ROW ──────────────────────────────────── */
.svc-grid{display:flex;flex-direction:column;gap:1px}
.svc-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;border-radius:var(--r-sm);
  transition:background var(--t);
}
.svc-row:hover{background:var(--bg-raised)}
.svc-row-l{display:flex;align-items:center;gap:10px}
.svc-icon{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.svc-icon svg{width:15px;height:15px}
.svc-nm{font-size:0.82rem;font-weight:600;color:var(--tx-1)}
.svc-desc{font-size:0.71rem;color:var(--tx-2);margin-top:1px}

/* ── CATEGORY CHIP GRID ─────────────────────────────────── */
.cat-chips{display:flex;flex-wrap:wrap;gap:7px}
.cat-chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border-radius:5px;
  border:1px solid var(--border);background:var(--bg-input);
  font-size:0.74rem;font-weight:600;color:var(--tx-2);
  cursor:pointer;transition:all var(--t);
}
.cat-chip svg{width:12px;height:12px}
.cat-chip.on{background:var(--brand-dim);border-color:var(--brand-glow);color:var(--brand)}
.cat-chip:hover{border-color:var(--border-md)}

/* ── CHATBOT MENU CONTROL ───────────────────────────────── */
.menu-items{display:flex;flex-direction:column;gap:6px}
.menu-item-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 13px;background:var(--bg-raised);
  border:1px solid var(--border);border-radius:var(--r-sm);
  cursor:grab;
}
.menu-item-row .drag-handle{color:var(--tx-3);cursor:grab}
.menu-item-row .drag-handle svg{width:13px;height:13px}
.menu-item-row .menu-item-label{flex:1;font-size:0.81rem;font-weight:600;color:var(--tx-1)}
.menu-item-row .menu-item-sub{font-size:0.71rem;color:var(--tx-2)}

/* ── SUBSCRIPTION / BILLING ─────────────────────────────── */
.plan-card{
  background:linear-gradient(135deg,var(--brand-dim) 0%,rgba(59,130,246,0.05) 100%);
  border:1px solid var(--border-brand);border-radius:var(--r-lg);
  padding:22px;margin-bottom:16px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
}
.plan-info{}
.plan-name{font-size:1.1rem;font-weight:800;color:var(--tx-1);letter-spacing:-0.02em}
.plan-meta{font-size:0.75rem;color:var(--tx-2);margin-top:3px}
.plan-price{text-align:end}
.plan-amt{font-size:1.4rem;font-weight:800;color:var(--tx-1);letter-spacing:-0.03em}
.plan-cycle{font-size:0.72rem;color:var(--tx-2)}

.usage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.usage-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.usage-lbl{font-size:0.7rem;font-weight:700;color:var(--tx-2);letter-spacing:0.03em;margin-bottom:8px}
.usage-vals{display:flex;justify-content:space-between;margin-bottom:6px}
.usage-used{font-size:0.88rem;font-weight:800;color:var(--tx-1)}
.usage-max{font-size:0.75rem;color:var(--tx-3)}
.usage-bar{height:5px;background:var(--bg-raised);border-radius:3px;overflow:hidden}
.usage-fill{height:100%;border-radius:3px;background:var(--brand);transition:width 0.5s var(--ease)}
.usage-fill.warn{background:var(--amber)}
.usage-fill.danger{background:var(--red)}
.usage-pct{font-size:0.68rem;color:var(--tx-3);margin-top:4px}

.bulk-section h3{font-size:0.88rem;font-weight:800;color:var(--tx-1);margin-bottom:4px}
.bulk-desc{font-size:0.76rem;color:var(--tx-2);margin-bottom:14px}
.bulk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bulk-card{
  border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;cursor:pointer;
  transition:all var(--t);background:var(--bg-card);
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;gap:6px;
}
.bulk-card:hover{border-color:var(--brand-glow);background:var(--brand-dim)}
.bulk-card.popular{border-color:var(--brand)}
.bulk-pop-badge{
  position:absolute;top:0;right:0;
  background:var(--brand);color:#fff;
  font-size:0.62rem;font-weight:800;
  padding:3px 9px;border-radius:0 var(--radius) 0 6px;
  letter-spacing:0.04em;
}
html[dir="rtl"] .bulk-pop-badge{right:auto;left:0;border-radius:var(--radius) 0 6px 0}
.bulk-requests{font-size:1.1rem;font-weight:800;color:var(--tx-1);letter-spacing:-0.02em}
.bulk-price{font-size:1.6rem;font-weight:800;color:var(--brand);letter-spacing:-0.04em}
.bulk-per{font-size:0.7rem;color:var(--tx-3)}
.bulk-btn{margin-top:8px}

.billing-tbl{margin-top:16px}
.billing-tbl h3{font-size:0.84rem;font-weight:800;color:var(--tx-1);margin-bottom:12px}

/* ── REQUESTS LIST ──────────────────────────────────────── */
.req-list{display:flex;flex-direction:column;gap:6px}
.req-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r-sm);cursor:pointer;
  transition:all var(--t);
}
.req-item:hover{border-color:var(--border-brand);background:var(--brand-dim)}
.req-item.esc{border-color:rgba(239,68,68,0.3)}
.req-ico{
  width:30px;height:30px;border-radius:8px;
  background:var(--brand-dim);color:var(--brand);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.req-ico svg{width:14px;height:14px}
.req-body{flex:1;min-width:0}
.req-name{font-size:0.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.req-meta{font-size:0.69rem;color:var(--tx-3);margin-top:1px}
.req-r{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}

/* ── DETAIL DRAWER ──────────────────────────────────────── */
.d-block{margin-bottom:14px}
.d-lbl{font-size:0.66rem;font-weight:700;color:var(--tx-3);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:3px}
.d-val{font-size:0.82rem;color:var(--tx-1)}
.note-chip{
  padding:8px 10px;background:var(--bg-raised);border-radius:var(--r-sm);
  margin-bottom:6px;font-size:0.76rem;color:var(--tx-2);
  border-inline-start:2px solid var(--brand);line-height:1.4;
}

/* ── HOTEL SETUP ─────────────────────────────────────────── */
.hotel-wrap{display:grid;grid-template-columns:220px 1fr;gap:0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--bg-card);box-shadow:0 4px 24px rgba(0,0,0,0.18)}
.hotel-nav{max-height:calc(100vh - 140px);overflow-y:auto;border-inline-end:1px solid var(--border);padding:0 8px 10px;background:var(--bg-sidebar)}

/* Nav identity card */
.hn-identity{display:flex;align-items:center;gap:10px;padding:16px 10px 14px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.hn-id-avatar{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,#5ec9a0,#3aa87e);
  border:none;
  color:#080f14;font-weight:800;font-size:0.85rem;letter-spacing:.03em;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(94,201,160,0.4);
}
.hn-id-info{min-width:0}
.hn-id-name{font-size:0.85rem;font-weight:700;color:var(--tx-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.hn-id-badge{display:inline-flex;margin-top:4px;font-size:0.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);background:var(--brand-dim);border-radius:4px;padding:1px 6px}

/* Section page header */
.sec-pg-hdr{display:flex;align-items:center;gap:14px;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--border)}
.sec-acc{width:3px;height:38px;border-radius:3px;flex-shrink:0}
.sec-pg-hdr h2{font-size:1.05rem;font-weight:800;color:var(--tx-1);margin:0 0 4px}
.sec-pg-hdr p{font-size:0.73rem;color:var(--tx-2);margin:0;line-height:1.45}
.h-nav-section{
  font-size:0.6rem;font-weight:800;color:var(--tx-3);
  text-transform:uppercase;letter-spacing:0.1em;
  padding:14px 8px 5px;
}
.h-nav-section:first-child{padding-top:6px}
.h-nav-btn{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 12px;border-radius:10px;
  border:none;background:none;font-family:inherit;
  font-size:0.8rem;font-weight:500;color:var(--tx-2);
  cursor:pointer;transition:all 0.2s var(--ease);text-align:start;
  margin-bottom:2px;position:relative;
}
.h-nav-btn svg{width:15px;height:15px;flex-shrink:0;opacity:0.6;transition:all var(--t)}
.h-nav-btn:hover{background:var(--bg-hover);color:var(--tx-1);transform:translateX(2px)}
html[dir="rtl"] .h-nav-btn:hover{transform:translateX(-2px)}
.h-nav-btn:hover svg{opacity:0.95}
.h-nav-btn.active{
  background:linear-gradient(135deg,rgba(94,201,160,0.15),rgba(94,201,160,0.05));
  color:var(--brand);font-weight:700;
  box-shadow:inset 3px 0 0 var(--brand),0 2px 8px rgba(94,201,160,0.1);
}
.h-nav-btn.active svg{opacity:1}
html[dir="rtl"] .h-nav-btn.active{box-shadow:inset -3px 0 0 var(--brand),0 2px 8px rgba(94,201,160,0.1)}

.hotel-body{padding:28px 30px;overflow-y:auto;max-height:calc(100vh - 140px)}
.h-sec{display:none}
.h-sec.active{display:block;animation:fadeUp 0.16s var(--ease)}

/* Section header with icon */
.hs-hdr{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hs-hdr-ico{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hs-hdr-ico svg{width:18px;height:18px}
.hs-hdr h2{font-size:1rem;font-weight:800;color:var(--tx-1);margin:0 0 2px}
.hs-hdr .desc{font-size:0.75rem;color:var(--tx-2);margin:0}

/* Content card */
.hs-card{background:var(--bg-raised);border:1px solid var(--border);border-radius:14px;padding:20px;transition:all 0.25s var(--ease);}
.hs-card:hover{border-color:var(--border-md);}
.hs-card-title{font-size:0.85rem;font-weight:700;color:var(--tx-1);margin-bottom:14px;letter-spacing:.2px;display:flex;align-items:center;gap:8px;}
.hs-card-title::before{content:'';width:3px;height:14px;background:linear-gradient(180deg,#5ec9a0,#3aa87e);border-radius:2px;}
.hs-card-desc{font-size:0.73rem;color:var(--tx-2);margin-bottom:10px;margin-top:-4px}
.hs-card-toolbar{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.hs-card-toolbar .hs-card-title{margin-bottom:0}
.hs-actions{display:flex;align-items:center;gap:10px;padding-top:4px}

/* Quick replies */
.qr-list{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.qr-item{display:flex;align-items:center;gap:8px}
.qr-item-fields{display:flex;gap:8px;flex:1}
.qr-fi{height:34px;font-size:0.78rem!important;padding:0 10px!important}
.qr-del-btn{
  width:30px;height:30px;border-radius:6px;border:1px solid var(--border);
  background:transparent;color:var(--tx-3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;
}
.qr-del-btn:hover{background:var(--red-bg);color:var(--red);border-color:rgba(239,68,68,0.3)}

/* Embed & Link */
.embed-grid{display:grid;grid-template-columns:1fr 210px;gap:16px;align-items:start}
.link-copy-row{display:flex;gap:8px;align-items:center;margin-top:8px}
.link-field{font-size:0.74rem!important;color:var(--tx-2)!important}
.embed-channel-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.embed-channel-btn{
  display:inline-flex;align-items:center;gap:5px;padding:5px 10px;
  background:var(--bg-card);border:1px solid var(--border);border-radius:6px;
  font-size:0.72rem;font-weight:600;color:var(--tx-2);text-decoration:none;transition:all .15s;
}
.embed-channel-btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-dim)}
.embed-channel-btn svg{width:12px;height:12px}
.embed-btn-row{display:flex;gap:8px}
.qr-display{display:flex;justify-content:center;padding:8px 0}
.qr-box{display:flex;flex-direction:column;align-items:center;gap:6px}
.qr-svg{width:110px;height:110px}
.qr-url{font-size:0.63rem;color:var(--tx-3);letter-spacing:.3px;text-align:center;word-break:break-all}
.code-block{background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);padding:14px 16px;margin-top:12px;overflow-x:auto}
.code-block pre{margin:0;font-size:0.72rem;color:var(--brand);font-family:'Fira Code','Courier New',monospace;white-space:pre;line-height:1.6}

/* ── SERVICE CARDS ──────────────────────────────────────── */
.svc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.svc-card{
  padding:16px;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--bg-card);transition:all var(--t);
}
.svc-card.new-flash{animation:flash 2s var(--ease)}
@keyframes flash{0%,100%{border-color:var(--border)}40%{border-color:var(--brand);background:var(--brand-dim)}}
.sc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.sc-room{font-size:0.9rem;font-weight:800;color:var(--brand)}
.sc-type{font-size:0.79rem;color:var(--tx-2);margin-bottom:12px}
.sc-time{font-size:0.69rem;color:var(--tx-3)}

/* ── OFFERS ─────────────────────────────────────────────── */
.offers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.offer-card{
  padding:16px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--bg-card);
}
.offer-card.expired{opacity:0.5}
.offer-title{font-size:0.85rem;font-weight:700;margin-bottom:4px}
.offer-desc{font-size:0.75rem;color:var(--tx-2);margin-bottom:12px;line-height:1.4}
.offer-foot{display:flex;align-items:center;justify-content:space-between}
.offer-exp{font-size:0.68rem;color:var(--tx-3)}

/* ── WELCOME PREVIEW ────────────────────────────────────── */
.welcome-prev{
  margin-top:14px;padding:14px;
  background:var(--brand-dim);border:1px solid var(--border-brand);
  border-radius:var(--r-sm);font-size:0.82rem;color:var(--tx-1);line-height:1.55;
}
.prev-lbl{font-size:0.67rem;font-weight:700;color:var(--brand);margin-bottom:6px}

/* ── ACTIVITY LOG ───────────────────────────────────────── */
.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filter-row .fs{width:auto;min-width:130px}
.filter-row .fi{width:auto;min-width:130px}
.pagination{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:14px;border-top:1px solid var(--border);flex-wrap:wrap;gap:8px}
.pg-info{font-size:0.72rem;color:var(--tx-3)}
.pg-btns{display:flex;gap:3px}
.pg-btn{min-width:28px;height:28px;border-radius:4px;border:1px solid var(--border);background:var(--bg-card);color:var(--tx-2);cursor:pointer;font-size:0.74rem;font-family:inherit;display:flex;align-items:center;justify-content:center;padding:0 5px;transition:all var(--t)}
.pg-btn.active{background:var(--brand);border-color:var(--brand);color:#fff}
.pg-btn:hover:not(.active){border-color:var(--border-brand);color:var(--brand)}

/* ── LEGEND ─────────────────────────────────────────────── */
.legend{display:flex;flex-direction:column;gap:7px;margin-top:12px}
.leg-item{display:flex;align-items:center;gap:7px;font-size:0.74rem}
.leg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.leg-label{flex:1;color:var(--tx-2)}
.leg-val{font-weight:700;color:var(--tx-1)}

/* ── STAT SUMMARY BAR ───────────────────────────────────── */
.stat-bar{display:flex;gap:0;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.stat-bar-item{flex:1;text-align:center}
.stat-bar-item+.stat-bar-item{border-inline-start:1px solid var(--border)}
.sb-lbl{font-size:0.67rem;color:var(--tx-3)}
.sb-val{font-size:1rem;font-weight:800;color:var(--tx-1)}

/* ── WIFI SECTION ───────────────────────────────────────── */
.wifi-layout{display:grid;grid-template-columns:1fr 260px;gap:16px;align-items:start}
@media(max-width:900px){.wifi-layout{grid-template-columns:1fr}}

/* Password input with show/hide toggle */
.pwd-toggle{
  position:absolute;right:0;bottom:0;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;
  cursor:pointer;color:var(--tx-3);transition:color var(--t);
}
.pwd-toggle:hover{color:var(--brand)}
.pwd-toggle svg{width:15px;height:15px}

/* WiFi preview bubble */
.wifi-preview-card{
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:16px;
}
.wpc-label{font-size:0.65rem;font-weight:800;text-transform:uppercase;letter-spacing:0.08em;color:var(--tx-3);margin-bottom:12px}
.wpc-bubble{
  background:var(--bg-card);border:1px solid var(--border-brand);
  border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;
}
.wpc-ico{
  width:36px;height:36px;background:var(--brand-dim);border-radius:8px;
  display:flex;align-items:center;justify-content:center;margin-bottom:2px;
}
.wpc-ico svg{width:18px;height:18px;color:var(--brand)}
.wpc-title{font-size:0.85rem;font-weight:700;color:var(--tx-1)}
.wpc-row{display:flex;flex-direction:column;gap:2px}
.wpc-key{font-size:0.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--tx-3)}
.wpc-val{font-size:0.78rem;color:var(--brand);font-family:'Fira Code','Courier New',monospace;font-weight:600;word-break:break-all}
.wpc-notes{font-size:0.72rem;color:var(--tx-2);line-height:1.45;margin-top:4px;font-style:italic}

/* ── CHECK-IN / CHECK-OUT SECTION ───────────────────────── */
.time-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.time-grid{grid-template-columns:1fr}}
.time-input-wrap{display:flex;flex-direction:column;gap:4px}
.time-hint{font-size:0.67rem;color:var(--tx-3);margin-top:2px}
.policy-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.policy-grid{grid-template-columns:1fr}}
.toggle-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r-sm);
}
.toggle-row-lbl{font-size:0.78rem;font-weight:500;color:var(--tx-1)}
.toggle-row-desc{font-size:0.68rem;color:var(--tx-2);margin-top:1px}

/* ── REQUESTS PANEL ─────────────────────────────────────── */
.req-summary-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.req-stat-card{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:var(--r-lg);
  border:1px solid var(--border);background:var(--bg-card);
  transition:transform var(--t);min-width:0;overflow:visible;
}
.req-stat-card>div:last-child{min-width:0;flex:1}
.req-stat-card:hover{transform:translateY(-1px)}
.rsq-ico{
  width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.rsq-ico svg{width:16px;height:16px}
.rsq-val{font-size:1.5rem;font-weight:800;color:var(--tx-1);line-height:1.2}
.rsq-lbl{font-size:0.67rem;color:var(--tx-2);margin-top:3px;white-space:normal;word-break:break-word;max-width:100px}
.rsq-red  .rsq-ico{background:var(--red-bg);color:var(--red)}
.rsq-amber.rsq-ico,.rsq-amber .rsq-ico{background:var(--amber-bg);color:var(--amber)}
.rsq-blue .rsq-ico{background:var(--blue-bg);color:var(--blue)}
.rsq-green .rsq-ico{background:var(--brand-dim);color:var(--brand)}
.rsq-red  .rsq-val{color:var(--red)}
.rsq-amber .rsq-val{color:var(--amber)}
.rsq-blue .rsq-val{color:var(--blue)}
.rsq-green .rsq-val{color:var(--brand)}

/* Request card and tabs */
.req-card{padding:0;overflow:hidden}
.req-tabs{
  display:flex;gap:0;padding:0 16px;
  border-bottom:1px solid var(--border);background:var(--bg-card);
  overflow-x:auto;
}
.rtab{
  display:inline-flex;align-items:center;gap:6px;
  padding:14px 16px;border:none;background:none;
  font-family:inherit;font-size:0.78rem;font-weight:500;color:var(--tx-2);
  cursor:pointer;white-space:nowrap;position:relative;transition:color var(--t);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.rtab svg{width:13px;height:13px;opacity:0.6;transition:opacity var(--t)}
.rtab:hover{color:var(--tx-1)}
.rtab.active{color:var(--brand);font-weight:700;border-bottom-color:var(--brand)}
.rtab.active svg{opacity:1}
.rtab-cnt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--red-bg);color:var(--red);
  border-radius:9px;font-size:0.62rem;font-weight:800;
}
.rtab.active .rtab-cnt{background:var(--brand-dim);color:var(--brand)}

/* Request list items */
.req-list{display:flex;flex-direction:column;gap:0;padding:8px 16px 16px}
.req-item2{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 12px;border-radius:var(--r-sm);
  cursor:pointer;transition:background var(--t);
  border-left:3px solid transparent;margin-bottom:4px;
  background:var(--bg-raised);border:1px solid var(--border);
}
.req-item2:hover{background:var(--bg-hover);border-color:var(--border-md)}
.ritem-new{border-left-color:var(--amber)}
.ritem-esc{border-left-color:var(--red);background:rgba(239,68,68,0.03)}
.ritem-done{border-left-color:var(--brand);opacity:0.7}
.ri2-avatar{
  width:34px;height:34px;border-radius:8px;
  background:var(--bg-card);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:0.78rem;font-weight:800;color:var(--tx-2);flex-shrink:0;
}
.ritem-esc .ri2-avatar{background:var(--red-bg);color:var(--red);border-color:rgba(239,68,68,0.2)}
.ritem-new .ri2-avatar{background:var(--amber-bg);color:var(--amber);border-color:rgba(245,158,11,0.2)}
.ritem-done .ri2-avatar{background:var(--brand-dim);color:var(--brand);border-color:var(--border-brand)}
.ri2-body{flex:1;min-width:0}
.ri2-top{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.ri2-cat{font-size:0.82rem;font-weight:700;color:var(--tx-1)}
.ri2-esc{font-size:0.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--red);background:var(--red-bg);border-radius:4px;padding:1px 6px}
.ri2-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:0.71rem;color:var(--tx-2)}
.ri2-meta span{display:inline-flex;align-items:center;gap:3px}

/* Operations tab header */
.ops-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid var(--border);margin-bottom:4px}
.ops-title{font-size:0.85rem;font-weight:700;color:var(--tx-1)}
.ops-sub{font-size:0.72rem;color:var(--tx-2);margin-top:2px}

/* RTL: flip priority border to the right side */
html[dir="rtl"] .req-item2{border-left:1px solid var(--border);border-right:3px solid transparent}
html[dir="rtl"] .ritem-new{border-right-color:var(--amber);border-left-color:transparent}
html[dir="rtl"] .ritem-esc{border-right-color:var(--red);border-left-color:transparent}
html[dir="rtl"] .ritem-done{border-right-color:var(--brand);border-left-color:transparent}

@media(max-width:900px){.req-summary-bar{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.req-summary-bar{grid-template-columns:1fr}}

/* ── RESPONSIVENESS ─────────────────────────────────────── */
@media(max-width:1200px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .kpi-grid-6{grid-template-columns:repeat(3,1fr)}
  .g12,.g21{grid-template-columns:1fr}
  .g2{grid-template-columns:1fr}
  .usage-grid{grid-template-columns:1fr 1fr}
  .bulk-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  #main-content{padding:14px}
  .settings-wrap,.hotel-wrap{grid-template-columns:1fr}
  .settings-nav,.hotel-nav{border-inline-end:none;border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;gap:2px;padding:6px}
  .s-nav-item,.h-nav-btn{width:auto;padding:6px 10px}
  .g3{grid-template-columns:1fr 1fr}
  .kpi-grid-6{grid-template-columns:repeat(2,1fr)}
  .usage-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .kpi-grid,.kpi-grid-6{grid-template-columns:1fr 1fr}
  .fr,.g3,.bulk-grid{grid-template-columns:1fr}
  .hdr-brand{display:none}
  .user-nm,.user-rl{display:none}
}

/* ── PRINT ──────────────────────────────────────────────── */
@media print{
  body{background:#fff!important;color:#000!important}
  #top-header,.no-print,#notif-pip{display:none!important}
  #app{display:block!important}
  #main-content{padding:0!important}
  .panel{display:block!important}
  .card{border:1px solid #ddd!important;background:#fff!important;box-shadow:none!important;break-inside:avoid}
  .kpi{border:1px solid #ddd!important;background:#f9f9f9!important;break-inside:avoid}
  .kpi-val{color:#111!important}
  .kpi-lbl,.card-title,.sb-lbl{color:#555!important}
  .ch-wrap{break-inside:avoid}
  .g3,.g2,.g21{break-inside:avoid}
  @page{margin:1.5cm;size:A4}
}

/* ── FLEXIBLE CHART LAYOUT ──────────────────────────────── */
.ov-charts-wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start}
.ov-chart-item{min-width:0}
.ov-chart-item .card{height:100%}
.ov-chart-lg  {flex:2 1 400px}
.ov-chart-md  {flex:1.5 1 280px}
.ov-chart-sm  {flex:1 1 220px}
.ov-chart-full{flex:1 0 100%}
@media(max-width:900px){
  .ov-chart-lg,.ov-chart-md{flex:1 1 100%}
  .ov-chart-sm{flex:1 1 48%}
}
@media(max-width:540px){
  .ov-chart-sm{flex:1 1 100%}
}

/* ── KPI CLICKABLE ──────────────────────────────────────── */
.kpi-clickable{cursor:pointer;transition:transform 0.15s,box-shadow 0.15s}
.kpi-clickable:hover{transform:translateY(-2px);box-shadow:0 6px 24px rgba(0,0,0,0.25)}
.kpi-sub{font-size:0.72rem;color:var(--tx-3);margin-top:3px}
.kpi-detail-hint{font-size:0.69rem;color:var(--brand);margin-top:8px;opacity:0;transition:opacity 0.15s}
.kpi-clickable:hover .kpi-detail-hint{opacity:1}

/* ── CUSTOMIZE MODAL ────────────────────────────────────── */
.modal-customize{width:520px}
.cust-group{margin-bottom:18px}
.cust-group-title{font-size:0.72rem;font-weight:700;color:var(--tx-3);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.cust-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;cursor:pointer;transition:background 0.15s}
.cust-item:hover{background:var(--bg-raised)}
.cust-chk{width:16px;height:16px;accent-color:var(--brand);cursor:pointer;flex-shrink:0}
.cust-lbl{font-size:0.85rem;color:var(--tx-1)}

/* ── DETAIL MODAL ───────────────────────────────────────── */
.modal-wide{width:680px}
.wdt-summary{font-size:0.85rem;color:var(--tx-2);background:var(--bg-raised);border-radius:8px;padding:12px 14px;margin-bottom:4px;line-height:1.6}

/* ── PMS INTEGRATION ────────────────────────────────────── */
.int-block{
  padding:16px;border:1px solid var(--border);border-radius:var(--r-sm);
  margin-bottom:12px;background:var(--bg-raised);
}
.int-block-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.int-block-title{font-size:0.88rem;font-weight:700;color:var(--tx-1);margin-bottom:2px}
.int-block-sub{font-size:0.75rem;color:var(--tx-2)}

.pms-status-badge{
  flex-shrink:0;padding:3px 10px;border-radius:20px;font-size:0.7rem;font-weight:700;
  background:var(--bg-card);color:var(--tx-2);border:1px solid var(--border);
  white-space:nowrap;
}
.pms-status-badge.connected{
  background:rgba(94,201,160,0.12);color:var(--brand);border-color:rgba(94,201,160,0.3);
}

.pms-last-sync{
  display:flex;align-items:center;gap:6px;margin-top:10px;
  font-size:0.72rem;color:var(--tx-2);
}

.pms-tag{
  display:inline-block;margin-inline-start:6px;
  padding:1px 6px;border-radius:4px;font-size:0.62rem;font-weight:800;
  background:rgba(59,130,246,0.15);color:#3b82f6;border:1px solid rgba(59,130,246,0.25);
  vertical-align:middle;letter-spacing:0.04em;
}

@keyframes spin{to{transform:rotate(360deg)}}
.spinning #sync-ico,.spinning-ico{animation:spin 0.8s linear infinite;transform-origin:center}

/* ── Guest Filter / Sort Bar ── */
.guest-filter-bar{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:10px;margin-bottom:12px;
}
.gfb-filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.gfb-chip{
  display:flex;align-items:center;gap:5px;
  padding:5px 12px;border-radius:20px;border:1px solid var(--border);
  background:transparent;color:var(--tx-2);font-size:0.76rem;font-weight:600;
  cursor:pointer;transition:all .15s;white-space:nowrap;
}
.gfb-chip:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-dim)}
.gfb-chip.active{background:var(--brand-dim);border-color:rgba(94,201,160,0.4);color:var(--brand)}
.gfb-sort{display:flex;align-items:center;gap:6px}
.sortable{cursor:pointer;user-select:none;transition:color .15s}
.sortable:hover{color:var(--brand)}
.sortable.sort-active{color:var(--brand)}
/* Sort arrow spans (SVG injected by JS) */
.sa,.sort-arrow{display:inline-flex;align-items:center;margin-left:3px;vertical-align:middle}
/* Count badge on filter chips */
.gfc-cnt{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 4px;
  background:var(--bg-raised);border-radius:9px;
  font-size:0.66rem;font-weight:700;color:var(--tx-2);
  transition:background .15s,color .15s;
}
.gfb-chip.active .gfc-cnt{background:rgba(94,201,160,0.18);color:var(--brand)}
/* Result info in toolbar */
.gfb-result-info{font-size:0.74rem;color:var(--tx-2);white-space:nowrap}
.gfb-ri-count{font-weight:700;color:var(--tx-1)}
.gfb-ri-filter{color:var(--brand);font-weight:600;text-transform:capitalize}
.guest-table-foot{
  display:flex;align-items:center;justify-content:flex-end;
  padding:10px 14px 4px;border-top:1px solid var(--border);
}

/* ── GUEST PANEL REDESIGN ─────────────────────────────── */
.guest-stats-row{display:flex;gap:12px;flex-wrap:wrap}
.guest-stat-card{
  display:flex;align-items:center;gap:12px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 18px;
  flex:1 1 160px;transition:all 0.15s;
}
.guest-stat-card:hover{border-color:var(--brand);transform:translateY(-1px)}
.gsc-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.gsc-ico svg{width:18px;height:18px}
.gsc-val{font-size:1.5rem;font-weight:800;color:var(--tx-1);line-height:1}
.gsc-lbl{font-size:0.72rem;color:var(--tx-2);margin-top:2px}

/* ── GUEST TOOLBAR ───────────────────────────────────── */
.guest-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.guest-toolbar-left{flex-shrink:0}
.guest-toolbar-center{flex:1;display:flex;justify-content:center}
.guest-toolbar-right{flex-shrink:0}

/* ── GUEST TABLE ─────────────────────────────────────── */
.guests-table thead th{
  position:sticky;top:0;z-index:5;
  background:var(--bg-card);
  border-bottom:1px solid var(--border-md);
}
.guests-table tr.guest-row{transition:background 0.12s;border-bottom:1px solid var(--border)}
.guests-table tbody tr:nth-child(even).guest-row{background:rgba(255,255,255,0.012)}
.guests-table tr.guest-row:hover{background:var(--bg-hover)!important}
.room-pill{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;padding:4px 10px;
  background:var(--bg-raised);border:1px solid var(--border);
  border-radius:8px;font-weight:700;font-size:0.88rem;color:var(--tx-1);
  letter-spacing:.5px;
}
.guest-cell{display:flex;align-items:center;gap:10px}
.guest-avatar{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:0.73rem;font-weight:700;flex-shrink:0;
}
.guest-name{font-weight:600;font-size:0.88rem;color:var(--tx-1)}
.guest-booking{font-size:0.72rem;margin-top:1px;font-family:monospace;color:var(--tx-2)}
/* Stay cell */
.stay-cell{display:flex;flex-direction:column;gap:3px}
.stay-dates{font-size:0.81rem;color:var(--tx-1);display:flex;align-items:center;gap:4px;white-space:nowrap}
.stay-arr{color:var(--tx-3);font-size:0.72rem;flex-shrink:0}
.stay-nights{
  display:inline-flex;align-items:center;
  font-size:0.67rem;font-weight:700;color:var(--tx-2);
  background:var(--bg-raised);border-radius:4px;
  padding:1px 5px;width:fit-content;letter-spacing:.4px;
}
/* Message usage v2 */
.msg-usage2{min-width:110px}
.mu2-header{font-size:0.78rem;margin-bottom:4px}
.mu2-used{font-weight:700;color:var(--tx-1)}
.mu2-of{color:var(--tx-3);font-size:0.74rem}
.mu2-bar-row{display:flex;align-items:center;gap:6px}
.mu2-bar{flex:1}
.mu2-pct{font-size:0.7rem;font-weight:700;color:var(--tx-2);white-space:nowrap;min-width:28px;text-align:right}
.mu2-pct.warn{color:var(--amber)}
.mu2-pct.danger{color:var(--red)}

/* ── ACTION MENU ─────────────────────────────────────── */
.act-menu-wrap{position:relative}
.act-menu-btn{
  width:32px;height:32px;border-radius:8px;border:none;
  background:transparent;color:var(--tx-3);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.15s,color 0.15s;
}
.act-menu-btn:hover{background:var(--bg-raised);color:var(--tx-1)}
.act-menu{
  position:absolute;right:0;top:calc(100% + 4px);z-index:200;
  background:var(--bg-card);border:1px solid var(--border-md);
  border-radius:10px;padding:6px;min-width:150px;
  box-shadow:0 8px 32px rgba(0,0,0,0.35);
  display:none;
}
.act-menu.open{display:block;animation:fadeUp 0.12s ease}
.act-item{
  display:flex;align-items:center;gap:8px;
  padding:7px 10px;border-radius:6px;cursor:pointer;
  font-size:0.82rem;color:var(--tx-1);transition:background 0.12s;
  white-space:nowrap;
}
.act-item:hover{background:var(--bg-raised)}
.act-item.danger{color:var(--red)}
.act-item.danger:hover{background:var(--red-bg)}
.act-sep{height:1px;background:var(--border);margin:4px 0}

/* ── Contact Cards ── */
.contact-cards{display:flex;gap:12px;flex-wrap:wrap}
.contact-card{
  display:flex;align-items:center;gap:14px;flex:1;min-width:180px;
  padding:14px 16px;border-radius:var(--r-sm);border:1px solid var(--border);
  background:var(--surface-2);text-decoration:none;color:var(--tx-1);
  transition:border-color .2s,background .2s;
}
.contact-card:hover{border-color:var(--brand);background:var(--brand-dim)}
.contact-card-ico{
  width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--brand-dim);color:var(--brand);flex-shrink:0;
}
.contact-card-title{font-size:0.8rem;font-weight:600;margin-bottom:2px}
.contact-card-val{font-size:0.72rem;color:var(--tx-2)}

/* ── PRINT ──────────────────────────────────────────────── */
@media print{
  #top-header,.no-print,.ph-r{display:none!important}
  #main-content{margin:0;padding:0}
  .card{break-inside:avoid;border:1px solid #ddd!important;background:#fff!important}
  body{background:#fff!important;color:#000!important}
  .panel{display:block!important}
}

/* ── UTILITY ────────────────────────────────────────────── */
.c-brand{color:var(--brand)}
.c-muted{color:var(--tx-2)}
.c-red{color:var(--red)}
.fw-7{font-weight:700}.fw-8{font-weight:800}
.fs-sm{font-size:0.77rem}.fs-xs{font-size:0.69rem}
.w-full{width:100%}
.dn{display:none!important}
.ta-c{text-align:center}
.ac-row{display:flex;align-items:center;gap:5px}
.mt2{margin-top:8px}

/* ── MINIMALIST REFINEMENTS ──────────────────────────────── */

/* KPI: left accent stripe (RTL-safe) instead of top bar */
.kpi::before{
  top:0;left:0;right:auto;bottom:0;
  width:3px;height:100%;
  border-radius:var(--radius) 0 0 var(--radius);
  background:var(--brand);
}
html[dir="rtl"] .kpi::before{left:auto;right:0;border-radius:0 var(--radius) var(--radius) 0}
.kpi:nth-child(1)::before{background:var(--brand)}
.kpi:nth-child(2)::before{background:var(--blue)}
.kpi:nth-child(3)::before{background:var(--amber)}
.kpi:nth-child(4)::before{background:var(--purple)}

/* Card: subtle hover — no lift transform */
.card{
  transition:background var(--t),border-color var(--t),box-shadow var(--t);
}
.card:hover{
  border-color:var(--border-md);
  box-shadow:0 2px 16px rgba(0,0,0,0.14);
}

/* Header: minimal shadow */
#top-header{
  box-shadow:0 1px 0 var(--border);
}

/* Nav active: clean pill, no inset ring */
.nav-btn.active{
  background:var(--brand-dim);
  color:var(--brand);
  font-weight:700;
  box-shadow:none;
}

/* Panel header: clean type, no decorative bar */
.ph-l h1{
  padding-inline-start:0;
  font-size:1.15rem;
}
.ph-l h1::before{
  display:none;
}

/* h-nav-btn.active defined in Hotel Setup section above */

.s-nav-item.active{
  background:var(--brand-dim);color:var(--brand);font-weight:700;
  box-shadow:inset 2px 0 0 var(--brand);
}
html[dir="rtl"] .s-nav-item.active{box-shadow:inset -2px 0 0 var(--brand)}

/* Table row hover: minimal tint */
tbody tr:hover{background:rgba(94,201,160,0.03)}

/* Btn-p: flat solid, no gradient */
.btn-p{
  background:var(--brand);
  box-shadow:none;
}
.btn-p:hover{
  background:var(--brand-d);
  box-shadow:0 2px 10px rgba(94,201,160,0.25);
  transform:none;
}

/* Food/svc card: no lift */
.food-card:hover{
  transform:none;
  border-color:var(--border-brand);
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}

/* ── FOOD MENU ───────────────────────────────────────────── */
.food-cats{
  display:flex;gap:6px;flex-wrap:wrap;
  margin-bottom:16px;
}
.food-cat-btn{
  padding:5px 14px;border-radius:20px;
  border:1px solid var(--border-md);
  background:transparent;color:var(--tx-2);
  font-size:0.74rem;font-weight:600;
  cursor:pointer;font-family:inherit;
  transition:all var(--t);
}
.food-cat-btn:hover{border-color:var(--brand);color:var(--brand)}
.food-cat-btn.active{
  background:var(--brand-dim);border-color:var(--brand);
  color:var(--brand);
}

.food-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(175px,1fr));
  gap:12px;
}
.food-card{
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  display:flex;flex-direction:column;gap:8px;
  position:relative;
  transition:all var(--t);
  cursor:default;
}
.food-card:hover{
  border-color:var(--border-brand);
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
  transform:translateY(-1px);
}
.food-card.unavail{opacity:0.55}
.food-emoji{
  font-size:1.6rem;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-input);border-radius:10px;
  flex-shrink:0;
}
.food-name{
  font-size:0.84rem;font-weight:700;
  color:var(--tx-1);line-height:1.3;
}
.food-cat-tag{
  display:inline-block;
  font-size:0.67rem;font-weight:600;
  background:var(--bg-input);color:var(--tx-2);
  border-radius:4px;padding:1px 7px;
  width:fit-content;
  text-transform:capitalize;
}
/* ── Saudi Riyal Icon ─────────────────────────────── */
.sar-ico{
  display:inline-block;width:0.82em;height:0.9em;
  vertical-align:-0.08em;flex-shrink:0;
  overflow:visible;
}
.sar-price{
  display:inline-flex;align-items:center;gap:1px;
}
/* ── Food & Service Prices ────────────────────────── */
.food-price{
  display:inline-flex;align-items:center;gap:2px;
  font-size:1rem;font-weight:800;
  color:var(--brand);letter-spacing:-0.02em;
}
.food-price.free{color:var(--tx-2);font-size:0.78rem}
.food-card-foot{
  display:flex;align-items:center;
  justify-content:space-between;
  margin-top:4px;padding-top:10px;
  border-top:1px solid var(--border);
}
.food-avail-lbl{font-size:0.69rem;color:var(--tx-3)}

/* ── SERVICE ITEM ROWS (Room Svc / Spa / Transport) ──────── */
.svc-item-list{display:flex;flex-direction:column;gap:8px}
.svc-item-row{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;
  background:var(--bg-raised);
  border:1px solid var(--border);
  border-radius:var(--radius);
  transition:all var(--t);
}
.svc-item-row:hover{
  border-color:var(--border-md);
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.svc-item-row.unavail{opacity:0.55}
.svc-item-emoji{
  font-size:1.5rem;
  width:44px;height:44px;
  flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-input);border-radius:10px;
}
.svc-item-body{flex:1;min-width:0}
.svc-item-name{font-size:0.84rem;font-weight:700;color:var(--tx-1)}
.svc-item-meta{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:3px;
}
.svc-item-tag{
  font-size:0.69rem;color:var(--tx-3);
  display:flex;align-items:center;gap:3px;
}
.svc-item-tag svg{width:10px;height:10px}
.svc-item-price{
  display:inline-flex;align-items:center;gap:2px;
  font-size:0.9rem;font-weight:800;
  color:var(--brand);white-space:nowrap;
  flex-shrink:0;
}
.svc-item-price.free{color:var(--tx-2);font-size:0.76rem;font-weight:600}
.svc-item-actions{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}

/* ── ↕️ أزرار ترتيب العرض (المرافق وخدمات الغرف) ───────────────
   سهمان مرصوفان رأسياً في خانة ضيّقة: الترتيب فعل متكرّر، فكلّ ضغطة
   يجب أن تُصيب هدفها من أول مرة ومن دون أن تزحزح بقية الصفّ. الأسهم
   منطقية لا اتجاهية (أعلى/أسفل) فلا تُقلب في RTL. */
.ord-cell{
  display:inline-flex;flex-direction:column;gap:2px;flex-shrink:0;
}
.ord-btn{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:18px;padding:0;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--tx-2);
  cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t);
}
.ord-btn svg{width:12px;height:12px}
.ord-btn:hover:not(:disabled){
  background:var(--brand-dim);border-color:var(--brand-glow);color:var(--brand);
}
.ord-btn:disabled{opacity:0.3;cursor:default}
.ord-td{width:1%;white-space:nowrap;vertical-align:middle}

/* ── RESPONSIVE extras ───────────────────────────────────── */
@media(max-width:900px){
  .food-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))}
}
@media(max-width:640px){
  .food-grid{grid-template-columns:1fr 1fr}
}

/* ── RTL-safe overrides (added by audit fix) ─────────────────
   The dashboard renders both LTR (English) and RTL (Arabic). Many
   utility classes still use physical `margin-left/right` which doesn't
   flip on dir change. These rules patch the most visible offenders so
   Arabic mode mirrors correctly without touching the existing styles. */
[dir="rtl"] .btn,
[dir="rtl"] .ml-1, [dir="rtl"] .ml-2, [dir="rtl"] .ml-3, [dir="rtl"] .ml-4 {
  margin-left: 0;
}
[dir="rtl"] .mr-1, [dir="rtl"] .mr-2, [dir="rtl"] .mr-3, [dir="rtl"] .mr-4 {
  margin-right: 0;
}
.ml-1 { margin-inline-start: 4px; }
.ml-2 { margin-inline-start: 8px; }
.ml-3 { margin-inline-start: 12px; }
.ml-4 { margin-inline-start: 16px; }
.mr-1 { margin-inline-end: 4px; }
.mr-2 { margin-inline-end: 8px; }
.mr-3 { margin-inline-end: 12px; }
.mr-4 { margin-inline-end: 16px; }
/* ════ Users & Account — Account management page ════ */
.btn-danger{background:var(--red);color:#fff;border:1px solid var(--red)}
.btn-danger:hover{background:#dc2626;border-color:#dc2626}

.int-block-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.int-block-sub{font-size:.72rem;color:var(--tx-2);margin-top:2px}

/* Password strength meter */
.pwd-strength{display:flex;align-items:center;gap:10px}
.pwd-strength-bar{flex:1;height:5px;border-radius:3px;background:var(--bg-input);overflow:hidden}
.pwd-strength-fill{height:100%;width:0;border-radius:3px;transition:width .25s,background .25s}
.pwd-strength-label{font-size:.7rem;font-weight:600;min-width:54px;text-align:right}

/* 2FA block */
.twofa-row{display:flex;align-items:center;gap:14px}
.twofa-ico{width:38px;height:38px;border-radius:10px;background:var(--brand-dim);color:var(--brand);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.twofa-title{font-size:.82rem;font-weight:600;color:var(--tx-1)}
.twofa-desc{font-size:.72rem;color:var(--tx-2);margin-top:1px}
.twofa-steps{display:flex;flex-direction:column;gap:12px}
.twofa-step{display:flex;align-items:flex-start;gap:10px;font-size:.78rem;color:var(--tx-1);line-height:1.5}
.twofa-step-n{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--brand-dim);color:var(--brand);font-size:.7rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.twofa-qr{display:flex;justify-content:center;padding:14px;background:#fff;border-radius:12px;margin:2px auto;width:fit-content}
.twofa-code-input{text-align:center;letter-spacing:.4em;font-size:1.1rem;font-weight:600}

/* Team search */
.team-search{position:relative;display:flex;align-items:center}
.team-search svg{position:absolute;inset-inline-start:12px;color:var(--tx-2);pointer-events:none}
.team-search-input{padding-inline-start:34px}

/* Team member row */
.tm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:var(--r-sm,10px);margin-bottom:8px;padding:11px 14px;transition:border-color .2s,background .2s}
.tm-row:hover{border-color:var(--border-md);background:var(--bg-hover)}
.tm-l{display:flex;align-items:center;gap:11px;min-width:0}
.tm-avatar{width:34px;height:34px;border-radius:9px;background:var(--brand-dim);color:var(--brand);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;flex-shrink:0}
.tm-info{min-width:0}
.tm-name{font-size:.82rem;font-weight:600;color:var(--tx-1);display:flex;align-items:center;gap:7px}
.tm-you{font-size:.62rem;font-weight:600;color:var(--brand);background:var(--brand-dim);padding:1px 6px;border-radius:5px}
.tm-email{font-size:.72rem;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-meta{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tm-lastlogin{font-size:.68rem;color:var(--tx-2);white-space:nowrap}
.tm-actions{display:flex;align-items:center;gap:4px}
.tm-act{width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--tx-2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s}
.tm-act:hover{background:var(--bg-input);color:var(--tx-1);border-color:var(--border-md)}
.tm-act.danger:hover{background:var(--red-bg);color:var(--red);border-color:rgba(239,68,68,0.3)}
.tm-act:disabled{opacity:.3;cursor:not-allowed}
.tm-empty{text-align:center;padding:24px;color:var(--tx-2);font-size:.78rem}

/* Invite note + delete warning */
.inv-note{font-size:.72rem;color:var(--tx-2);line-height:1.5;background:var(--bg-input);border-radius:9px;padding:10px 12px;margin-top:4px}
.del-warn{display:flex;align-items:flex-start;gap:11px;font-size:.8rem;color:var(--tx-1);line-height:1.55;background:var(--red-bg);border:1px solid rgba(239,68,68,0.2);border-radius:10px;padding:13px 14px}
.del-warn svg{color:var(--red);flex-shrink:0;margin-top:1px}

/* Role badges (extend existing) */
.b-manager{background:var(--blue-bg);color:var(--blue)}
.b-staff{background:rgba(78,112,128,0.12);color:var(--tx-1)}
.b-pending{background:var(--amber-bg);color:var(--amber)}

/* Password field with show/hide eye button */
.pwd-wrap{position:relative;display:flex;align-items:center}
.pwd-wrap .fi{width:100%;padding-inline-end:42px}
.pwd-eye{position:absolute;inset-inline-end:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:7px;color:var(--tx-2);cursor:pointer;transition:color .15s,background .15s;padding:0}
.pwd-eye:hover{color:var(--tx-1);background:var(--bg-input)}
.pwd-eye.on{color:var(--brand)}

/* 2FA shield badge + locked badge in team list */
.tm-2fa{display:inline-flex;align-items:center;justify-content:center;color:var(--brand);margin-inline-start:6px;vertical-align:middle}
.tm-2fa svg{display:block}
.b-locked{background:var(--red-bg);color:var(--red)}

/* ════ Activity Log — pro controls ════ */
.log-th.sortable{cursor:pointer;user-select:none;position:relative}
.log-th.sortable:hover{color:var(--tx-1)}
.log-th.sortable::after{content:'⇅';opacity:.3;margin-inline-start:5px;font-size:.8em}
.log-th.sortable.sorted[data-dir="asc"]::after{content:'↑';opacity:1;color:var(--brand)}
.log-th.sortable.sorted[data-dir="desc"]::after{content:'↓';opacity:1;color:var(--brand)}
.log-cols-menu{position:absolute;z-index:50;background:var(--surface-1,#0f1c28);border:1px solid var(--border-md,rgba(255,255,255,0.12));border-radius:10px;padding:8px;margin-top:4px;box-shadow:0 12px 32px rgba(0,0,0,0.4);min-width:160px}
.log-cols-menu label{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:.8rem;color:var(--tx-1);cursor:pointer;border-radius:6px}
.log-cols-menu label:hover{background:var(--bg-hover,rgba(255,255,255,0.04))}
.log-cols-menu input[type=checkbox]{accent-color:var(--brand)}

/* ════ 🔔 Notification system ════ */
.notif-wrap{position:relative}
/* Fixed badge — no more squished number */
.notif-badge{
  position:absolute;top:-3px;inset-inline-end:-3px;
  min-width:17px;height:17px;padding:0 4px;
  display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:700;line-height:1;
  color:#fff;background:var(--red,#ef4444);
  border:2px solid var(--bg,#0a1420);border-radius:999px;
  box-sizing:border-box;
}
.hdr-act.has-unread{color:var(--brand)}
/* Dropdown panel */
.notif-panel{
  position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:200;
  width:360px;max-width:90vw;max-height:480px;display:flex;flex-direction:column;
  background:var(--surface-1,#0f1c28);border:1px solid var(--border-md,rgba(255,255,255,0.12));
  border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,0.5);overflow:hidden;
}
.notif-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border-sm,rgba(255,255,255,0.07));font-weight:700;font-size:.9rem;color:var(--tx-1);flex:0 0 auto}
.notif-readall{background:none;border:none;color:var(--brand);font-size:.72rem;cursor:pointer;font-weight:600}
.notif-readall:hover{text-decoration:underline}
.notif-list{overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:0;max-height:340px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.notif-empty{padding:34px 16px;text-align:center;color:var(--tx-2);font-size:.82rem}
.notif-item{display:flex;gap:11px;padding:12px 16px;border-bottom:1px solid var(--border-sm,rgba(255,255,255,0.05));cursor:pointer;transition:background .15s;align-items:flex-start}
.notif-item:hover{background:var(--bg-hover,rgba(255,255,255,0.04))}
.notif-item.overdue{background:rgba(239,68,68,0.06)}
.ni-icon{flex-shrink:0;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.ni-request .ni-icon{background:rgba(52,211,153,0.13);color:#34d399}
.ni-complaint .ni-icon{background:rgba(251,146,60,0.13);color:#fb923c}
.ni-body{flex:1;min-width:0}
.ni-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ni-title{font-weight:600;font-size:.82rem;color:var(--tx-1)}
.ni-prio{font-size:.6rem;font-weight:700;color:#ef4444;background:rgba(239,68,68,0.13);padding:1px 6px;border-radius:5px}
.ni-chat{font-size:.6rem;color:var(--tx-2);background:var(--bg-input,rgba(255,255,255,0.05));padding:1px 6px;border-radius:5px}
.ni-sub{font-size:.72rem;color:var(--tx-2);margin-top:2px}
.ni-detail{font-size:.72rem;color:var(--tx-2);margin-top:3px;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ni-time{flex-shrink:0;font-size:.66rem;color:var(--tx-2);white-space:nowrap}
.ni-time.overdue{color:#ef4444;font-weight:700}
.notif-foot{padding:10px 16px;border-top:1px solid var(--border-sm,rgba(255,255,255,0.07));text-align:center;flex:0 0 auto}
.notif-foot button{background:none;border:none;color:var(--brand);font-size:.78rem;cursor:pointer;font-weight:600}
.notif-foot button:hover{text-decoration:underline}
/* Row highlight when deep-linked from a notification */
@keyframes rowFlash{0%,100%{background:transparent}25%,75%{background:rgba(52,211,153,0.18)}}
.row-flash{animation:rowFlash 2.4s ease}

/* ════ Preferences & Privacy sections ════ */
.pref-block{border:1px solid var(--border-sm,rgba(255,255,255,0.08));border-radius:12px;padding:16px 18px;margin-bottom:16px}
.pref-block-h{font-weight:700;font-size:.9rem;color:var(--tx-1);margin-bottom:12px}
.pref-note{font-size:.74rem;color:var(--tx-2);margin-bottom:14px;line-height:1.5;padding:8px 11px;background:var(--bg-input,rgba(255,255,255,0.03));border-radius:8px}
.pref-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--border-sm,rgba(255,255,255,0.05))}
.pref-row:first-of-type{border-top:none}
.pref-info{flex:1;min-width:0}
.pref-label{font-size:.84rem;font-weight:600;color:var(--tx-1)}
.pref-hint{font-size:.72rem;color:var(--tx-2);margin-top:2px}
/* Toggle switch */
.switch{position:relative;display:inline-block;width:42px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.switch-slider{position:absolute;cursor:pointer;inset:0;background:var(--bg-input,rgba(255,255,255,0.12));border-radius:24px;transition:.2s}
.switch-slider::before{content:'';position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .switch-slider{background:var(--brand)}
.switch input:checked + .switch-slider::before{transform:translateX(18px)}
.switch.disabled{opacity:.45;cursor:not-allowed}
.switch.disabled .switch-slider{cursor:not-allowed}
/* Segmented control */
.seg{display:inline-flex;background:var(--bg-input,rgba(255,255,255,0.06));border-radius:9px;padding:3px;gap:2px}
.seg-btn{background:none;border:none;padding:6px 14px;border-radius:7px;font-size:.78rem;color:var(--tx-2);cursor:pointer;transition:.15s;font-weight:600}
.seg-btn.active{background:var(--brand);color:#04101a}
.seg-btn:not(.active):hover{color:var(--tx-1)}
/* Privacy actions */
.priv-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.btn-danger{background:var(--red-bg,rgba(239,68,68,0.12));color:var(--red,#ef4444);border:1px solid rgba(239,68,68,0.3)}
.btn-danger:hover{background:rgba(239,68,68,0.2)}
/* Compact density */
body.compact .tbl-wrap td,body.compact .tbl-wrap th{padding-top:6px;padding-bottom:6px}
body.compact .tm-row{padding-top:8px;padding-bottom:8px}

/* ════ 🔔 Notification read/unread + types (pro) ════ */
.notif-divider{display:flex;align-items:center;justify-content:space-between;padding:8px 16px 5px;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-3,rgba(255,255,255,0.4));background:var(--bg,#0a1420);position:sticky;top:0;z-index:1}
.notif-divider .nd-count{background:var(--brand);color:#04101a;border-radius:10px;padding:1px 7px;font-size:.62rem}
/* Unread item: accent bar + tinted background */
.notif-item{position:relative;display:flex;gap:11px;padding:12px 16px 12px;border-bottom:1px solid var(--border-sm,rgba(255,255,255,0.05));cursor:pointer;transition:background .15s;align-items:flex-start}
.notif-item.is-new{background:rgba(52,211,153,0.05)}
.notif-item.is-new::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--brand)}
.notif-item:hover{background:var(--bg-hover,rgba(255,255,255,0.05))}
.notif-item.overdue.is-new::before{background:#ef4444}
/* Type label colors */
.ni-type{font-size:.7rem;font-weight:700;letter-spacing:.01em}
.ni-request .ni-type{color:#34d399}
.ni-complaint .ni-type{color:#fb923c}
.ni-suggestion .ni-type{color:#a855f7}
.ni-request .ni-icon{background:rgba(52,211,153,0.13);color:#34d399}
.ni-complaint .ni-icon{background:rgba(251,146,60,0.13);color:#fb923c}
.ni-suggestion .ni-icon{background:rgba(168,85,247,0.13);color:#a855f7}
.ni-title2{font-size:.8rem;font-weight:600;color:var(--tx-1);margin-top:2px}
.ni-overdue{font-size:.58rem;font-weight:700;color:#ef4444;background:rgba(239,68,68,0.13);padding:1px 6px;border-radius:5px}
/* Right meta: unread dot + time */
.ni-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.ni-dot{width:8px;height:8px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(52,211,153,0.18)}

/* ════ 🔔 Notification v2 — summary chips + richer cards ════ */
.notif-summary{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;border-bottom:1px solid var(--border-sm,rgba(255,255,255,0.06));background:var(--bg,#0a1420);flex:0 0 auto}
.nsum-chip{font-size:.68rem;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid var(--border-sm,rgba(255,255,255,0.12));background:transparent;color:var(--tx-2);cursor:pointer;transition:.15s;white-space:nowrap}
.nsum-chip:hover{color:var(--tx-1);border-color:var(--border-md,rgba(255,255,255,0.25))}
.nsum-chip.active{background:var(--brand);color:#04101a;border-color:var(--brand)}
.nsum-overdue{color:#ef4444;border-color:rgba(239,68,68,0.4)}
.nsum-overdue.active{background:#ef4444;color:#fff;border-color:#ef4444}
/* Type tag inside card */
.ni-type-tag{font-size:.6rem;font-weight:700;padding:2px 7px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em;flex-shrink:0}
.ni-type-tag.ni-request{background:rgba(52,211,153,0.14);color:#34d399}
.ni-type-tag.ni-complaint{background:rgba(251,146,60,0.14);color:#fb923c}
.ni-type-tag.ni-suggestion{background:rgba(168,85,247,0.14);color:#a855f7}
.ni-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ni-title2{font-size:.82rem;font-weight:600;color:var(--tx-1)}
.ni-sub{font-size:.72rem;color:var(--tx-2);margin-top:4px;display:flex;align-items:center;gap:4px}
.ni-sub strong{color:var(--tx-1);font-weight:700}
/* Critical (>1h) gets a stronger red treatment */
.notif-item.critical{background:rgba(239,68,68,0.09)}
.notif-item.critical.is-new::before{background:#ef4444;width:4px}
.ni-overdue.crit{background:#ef4444;color:#fff;animation:critPulse 2s infinite}
.ni-time.crit{color:#ef4444;font-weight:800}
@keyframes critPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ════ 🔔 Notification v3 — delivery time + status ════ */
/* سطر واحد فقط: البطاقة تنبيه لا تذكرة — التفاصيل الكاملة تُفتح بالنقر. */
.ni-detail{font-size:.72rem;color:var(--tx-2);margin-top:4px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.ni-delivery{font-size:.7rem;color:var(--tx-2);margin-top:4px;display:flex;align-items:center;gap:4px}
.ni-delivery strong{color:var(--brand);font-weight:700}
.ni-statusrow{margin-top:6px}
.ni-status{font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:6px;display:inline-block}
.ni-status-wait{background:rgba(148,163,184,0.15);color:#94a3b8}
.ni-status-prog{background:rgba(59,130,246,0.15);color:#3b82f6}

/* 🔔 Visible scrollbar for the notification list */
.notif-list{scrollbar-width:thin;scrollbar-color:var(--border-md,rgba(255,255,255,0.25)) transparent}
.notif-list::-webkit-scrollbar{width:8px}
.notif-list::-webkit-scrollbar-track{background:transparent}
.notif-list::-webkit-scrollbar-thumb{background:var(--border-md,rgba(255,255,255,0.22));border-radius:4px}
.notif-list::-webkit-scrollbar-thumb:hover{background:var(--border-md,rgba(255,255,255,0.4))}

/* ════ 💬 Message Wallet card ════ */
.wallet-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin:14px 0 18px}
.wallet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.wallet-title{font-weight:700;font-size:.95rem;color:var(--tx-1)}
.wallet-remaining{font-size:.85rem;color:var(--tx-2)}
.wallet-remaining #wallet-remaining-num{font-size:1.5rem;font-weight:800;color:var(--brand);vertical-align:-2px}
.wallet-bar{height:10px;background:var(--bg-input,rgba(255,255,255,0.08));border-radius:6px;overflow:hidden;margin-bottom:14px}
.wallet-bar-fill{height:100%;border-radius:6px;transition:width .5s ease,background .3s}
.wallet-stats{display:flex;gap:10px}
.wallet-stat{flex:1;text-align:center;background:var(--bg-input,rgba(255,255,255,0.03));border-radius:10px;padding:10px 6px}
.ws-num{font-size:1.15rem;font-weight:800;color:var(--tx-1)}
.ws-lbl{font-size:.68rem;color:var(--tx-2);margin-top:2px}
.wallet-low{display:flex;align-items:center;gap:7px;margin-top:12px;padding:8px 12px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:9px;color:#ef4444;font-size:.78rem;font-weight:600}
.wallet-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

/* 💬 Wallet renew note + read-only field note */
.wallet-renew{margin-top:12px;font-size:.72rem;color:var(--tx-3,rgba(255,255,255,0.5));text-align:center}
.fl-note{font-size:.7rem;color:var(--tx-3,rgba(255,255,255,0.5));margin-top:5px}
.fi:disabled{opacity:.6;cursor:not-allowed}