/* ============================================================
   SheriaPal SPV1.6: modern layer (loaded last)
   Clean white cards, soft shadows, pill buttons, golden-yellow actions.
   ============================================================ */

:root:not([data-theme]), [data-theme="light"] {
  --bg: #f5f6fa; --surface: #ffffff; --surface2: #f2f3f7; --surface3: #e6e8ef; --border: #e4e6ed;
  --text: #141824; --text2: #4a5060; --text3: #767c8c;
  --gold: #9a6c00; --gold2: #b07d00; --gold-dim: #8a6a1a;
  --cta: #f4b400; --cta-hover: #ffc425; --cta-ink: #1c1503;
  --accent: #fff5d6; --tint: #fffaeb; --msg-user-bg: #fff1c4; --msg-user-border: #f3dc8f;
  --green: #0f8a5f; --green-bg: #e3f6ee; --red: #c62828; --red-bg: #fde8e8;
  --radius: 14px; --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .07);
  --shadow-lg: 0 24px 60px rgba(16, 24, 40, .16);
  --logo: #141824; --logo-pal: #c08a00;
}
[data-theme="dark"] {
  --bg: #0d1118; --surface: #161b25; --surface2: #1d2330; --surface3: #262d3c; --border: #262d3b;
  --text: #eef0f5; --text2: #b3b9c7; --text3: #8a91a2;
  --gold: #f4c542; --gold2: #ffd466; --gold-dim: #c9a33a;
  --cta: #f4b400; --cta-hover: #ffc425; --cta-ink: #1c1503;
  --accent: #2b2512; --tint: #211d10; --msg-user-bg: #3a3112; --msg-user-border: #574a1a;
  --radius: 14px; --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 8px 24px rgba(0, 0, 0, .35); --shadow-lg: 0 24px 60px rgba(0, 0, 0, .5);
  --logo: #ffffff; --logo-pal: #f4c542;
}

/* Sans headings (logo keeps the serif) */
h1, h2, h3, .modal h2, .sit-title, .lp-hero h1, .ch-name { font-family: var(--font-ui); letter-spacing: -0.02em; }
h1 { font-weight: 800; } h2, h3 { font-weight: 700; }

/* ── Buttons: one golden pill style everywhere ─────────── */
.lp-btn, .btn-primary, .auth-btn, .input-area button, .docs-form button[type="submit"], .answer-actions button.primary,
.ui-dialog .ui-actions button.ok, .btn-sm.gold, .sp-btn {
  border-radius: 999px !important; font-weight: 700; transition: background .15s, transform .1s, box-shadow .15s;
}
.lp-btn-primary, .btn-primary, .auth-btn, .input-area button, .answer-actions button.primary, .ui-dialog .ui-actions button.ok, .btn-sm.gold, .sp-btn {
  background: var(--cta) !important; color: var(--cta-ink) !important; border-color: var(--cta) !important;
  box-shadow: 0 6px 16px rgba(244, 180, 0, .28);
}
.lp-btn-primary:hover, .btn-primary:hover, .auth-btn:hover, .input-area button:hover, .sp-btn:hover { background: var(--cta-hover) !important; }
.lp-btn:active, .btn-primary:active, .auth-btn:active, .sp-btn:active { transform: translateY(1px); }
.lp-btn-outline { border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.btn-secondary { border-radius: 999px !important; }
.sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; padding: 13px 22px; font-size: 15px; cursor: pointer; text-decoration: none !important; }
.sp-btn.block { width: 100%; }
.sp-btn.ghost { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border) !important; box-shadow: none; }
.sp-btn.ghost:hover { background: var(--surface2) !important; }
.sp-btn:disabled { opacity: .55; cursor: default; }

/* ── Surfaces ──────────────────────────────────────────── */
.modal { border-radius: var(--radius-lg) !important; border: none !important; box-shadow: var(--shadow-lg); }
.modal-overlay { background: rgba(15, 18, 28, .55) !important; backdrop-filter: blur(3px); }
.form-group input, .form-group select, .form-group textarea, .modal input, .modal select, .modal textarea {
  border-radius: 12px !important; min-height: 46px;
}
.modal textarea { min-height: 90px; }

/* ── App shell ─────────────────────────────────────────── */
.sidebar { border-right: 1px solid var(--border); }
.sidebar-brand { border-bottom: none; text-align: left; padding: 22px 22px 10px; }
.sidebar-brand .logo { font-family: var(--font-serif); }
.nav { padding: 8px 12px; }
.nav-btn { border-radius: 12px; padding: 11px 14px; font-weight: 500; }
.nav-btn.active { background: var(--accent); color: var(--gold); font-weight: 700; }
.sidebar-chat-history { border-top: 1px solid var(--border); }
.sch-item { border-radius: 10px; }
.sch-item.active { background: var(--accent); }
.topbar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 10px 20px; }
.topbar .status-dot { display: none; }
.topbar h2 { font-size: 17px; font-weight: 800; }
.topbar .user-badge { border-radius: 999px; }
.lang-toggle, .app-theme-toggle, .notif-btn { border-radius: 999px !important; }

/* Chat */
.chat-header { background: var(--surface); border-bottom: 1px solid var(--border); }
.msg.user .bubble { background: var(--msg-user-bg); border: 1px solid var(--msg-user-border); border-radius: 20px 20px 6px 20px; }
.msg.bot .bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 6px 20px 20px 20px; padding: 14px 18px; box-shadow: var(--shadow-sm); }
.input-area { border-top: none; background: transparent; padding: 10px 20px 16px; gap: 0; position: relative; }
.input-area input { border-radius: 999px !important; background: var(--surface) !important; border: 1px solid var(--border) !important;
  padding: 15px 120px 15px 20px !important; font-size: 15px !important; box-shadow: var(--shadow); min-height: 54px; }
.input-area input:focus { border-color: var(--cta) !important; box-shadow: 0 0 0 4px rgba(244, 180, 0, .18), var(--shadow); }
.input-area button { position: absolute; right: 27px; top: 17px; bottom: 23px; padding: 0 18px !important; box-shadow: none; }
@media (max-width: 760px) { .input-area { padding: 8px 10px 12px; } .input-area button { right: 16px; top: 14px; bottom: 19px; } }
.sit { border-radius: 18px !important; box-shadow: var(--shadow-sm); border-color: var(--border) !important; background: var(--surface) !important; }
.sit:hover { box-shadow: var(--shadow); border-color: var(--cta) !important; }

/* Cards in views */
.booking-card, .adv-card, .lp-reg-card, .docs-card, .stat-card, .admin-card { border-radius: 18px !important; box-shadow: var(--shadow-sm); }

/* ── Plan pill in the top bar ──────────────────────────── */
.plan-pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface);
  border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--text2); cursor: pointer; white-space: nowrap; }
.plan-pill b { color: var(--text); }
.plan-pill .go { background: var(--cta); color: var(--cta-ink); border-radius: 999px; padding: 4px 10px; font-weight: 700; }
.plan-pill:hover { border-color: var(--cta); }
@media (max-width: 760px) { .plan-pill .label { display: none; } .topbar .user-badge > span:not(.avatar) { display: none; } }

/* ── Plans (app view, sheet and landing) ───────────────── */
.plans-wrap { padding: 24px; overflow-y: auto; flex: 1; }
.plans-inner { max-width: 1120px; margin: 0 auto; }
.plans-head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin-bottom: 6px; }
.plans-head p { color: var(--text2); margin-bottom: 22px; max-width: 60ch; }
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .plan-grid { grid-template-columns: minmax(0, 1fr); } }
.plan-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 20px 20px;
  display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-sm); }
.plan-card.popular { border: 2px solid var(--cta); box-shadow: 0 14px 40px rgba(244, 180, 0, .18); }
.plan-card.current { outline: 3px solid var(--green); outline-offset: -1px; }
.plan-badge { position: absolute; top: -12px; left: 20px; background: var(--cta); color: var(--cta-ink); font-size: 11.5px; font-weight: 800;
  padding: 4px 12px; border-radius: 999px; letter-spacing: .02em; }
.plan-card.current .plan-badge { background: var(--green); color: #fff; }
.plan-name { font-size: 15px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--gold); }
.plan-price { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text); }
.plan-price small { font-size: 14px; font-weight: 600; color: var(--text3); letter-spacing: 0; }
.plan-tag { font-size: 13.5px; color: var(--text2); min-height: 2.6em; }
.plan-feats { list-style: none; display: flex; flex-direction: column; gap: 9px; font-size: 14px; flex: 1; margin: 0; padding: 0; }
.plan-feats li { display: flex; gap: 9px; align-items: flex-start; }
.plan-feats li svg.ic { width: 18px; height: 18px; color: var(--green); margin-top: 1px; }
.plan-feats li.off { color: var(--text3); }
.plan-feats li.off svg.ic { color: var(--text3); }
.plan-note { font-size: 12.5px; color: var(--text3); text-align: center; }

.info-box { display: flex; gap: 14px; align-items: flex-start; background: var(--tint); border: 1px solid var(--msg-user-border); border-radius: 18px; padding: 16px 18px; font-size: 14px; color: var(--text); }
.info-box .ib-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--surface); display: grid; place-items: center; color: var(--gold); flex-shrink: 0; box-shadow: var(--shadow-sm); }
.info-box small { display: block; color: var(--text3); margin-top: 4px; font-size: 12.5px; }

/* Usage meters */
.usage-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 22px; box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 18px; align-items: center; }
@media (max-width: 820px) { .usage-card { grid-template-columns: minmax(0, 1fr); } }
.usage-plan .k { font-size: 12px; color: var(--text3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.usage-plan .v { font-size: 22px; font-weight: 800; }
.usage-plan .s { font-size: 13px; color: var(--text2); }
.meter .k { display: flex; justify-content: space-between; font-size: 13px; color: var(--text2); margin-bottom: 6px; gap: 8px; }
.meter .k b { color: var(--text); }
.meter .bar { height: 8px; border-radius: 99px; background: var(--surface2); overflow: hidden; }
.meter .bar i { display: block; height: 100%; background: var(--cta); border-radius: 99px; }
.meter.full .bar i { background: var(--red); }

/* Bottom sheet (phones) / dialog (desktop) */
.sheet-overlay { position: fixed; inset: 0; background: rgba(15, 18, 28, .55); backdrop-filter: blur(3px); z-index: 300; display: none; align-items: flex-end; justify-content: center; }
.sheet-overlay.open { display: flex; }
.sheet { background: var(--bg); width: 100%; max-width: 1080px; max-height: 92vh; overflow-y: auto; border-radius: 26px 26px 0 0; padding: 14px 20px 24px; box-shadow: var(--shadow-lg); animation: sheetUp .25s ease; }
@media (min-width: 761px) { .sheet-overlay { align-items: center; } .sheet { border-radius: 26px; padding: 26px; width: 94%; } }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-grip { width: 44px; height: 5px; border-radius: 9px; background: var(--surface3); margin: 0 auto 12px; }
@media (min-width: 761px) { .sheet-grip { display: none; } }
.sheet-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.sheet-top h2 { font-size: 22px; }
.sheet-top p { color: var(--text2); font-size: 14px; margin-top: 4px; }
.sheet-x { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--surface2); color: var(--text2); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.sheet.narrow { max-width: 480px; }

/* Pay step */
.pay-steps { counter-reset: s; list-style: none; padding: 0; margin: 14px 0; display: flex; flex-direction: column; gap: 10px; }
.pay-steps li { counter-increment: s; display: flex; gap: 12px; font-size: 14px; align-items: flex-start; }
.pay-steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--gold); font-weight: 800; font-size: 13px; display: grid; place-items: center; flex-shrink: 0; }
.pay-amount { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; }
.pay-amount b { font-size: 22px; }
.pending-box { background: var(--accent); border-radius: 18px; padding: 16px 18px; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 18px; font-size: 14px; }
.pending-box svg.ic { width: 22px; height: 22px; color: var(--gold); }

/* Lock card (Atelier, bookings) */
.lock-card { max-width: 560px; margin: 30px auto; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 24px; box-shadow: var(--shadow); }
.lock-card .lk { width: 56px; height: 56px; border-radius: 18px; background: var(--accent); color: var(--gold); display: grid; place-items: center; margin: 0 auto 14px; }
.lock-card .lk svg.ic { width: 26px; height: 26px; }
.lock-card h3 { font-size: 20px; margin-bottom: 6px; }
.lock-card p { color: var(--text2); margin-bottom: 18px; }

/* Inline "limit reached" card in the chat */
.limit-card { background: var(--surface); border: 1px solid var(--msg-user-border); border-radius: 20px; padding: 16px 18px; box-shadow: var(--shadow); max-width: 560px; }
.limit-card p { margin: 0 0 12px; font-size: 14.5px; }
.limit-card .row { display: flex; gap: 8px; flex-wrap: wrap; }

.prio-tag { font-size: 11px; font-weight: 800; color: var(--cta-ink); background: var(--cta); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }

/* ── Landing ───────────────────────────────────────────── */
.landing { background: var(--bg); }
.lp-nav { background: rgba(255, 255, 255, .86); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
[data-theme="dark"] .lp-nav { background: rgba(13, 17, 24, .86); }
.lp-nav.scrolled { border-bottom-color: var(--border); box-shadow: none; }
.lp-nav-links .lp-btn { padding: 9px 18px; }
.lp-logo { font-family: var(--font-serif); }

.hero2 { padding: 104px 20px 40px; }
.hero2-in { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: center; }
@media (max-width: 900px) { .hero2 { padding: 88px 16px 24px; } .hero2-in { grid-template-columns: minmax(0, 1fr); gap: 26px; } }
.hero2 h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.02; letter-spacing: -0.035em; margin: 0 0 16px; }
.hero2 h1 em { font-style: normal; color: var(--logo-pal); }
.hero2 .lead { font-size: clamp(1.02rem, 1.6vw, 1.18rem); color: var(--text2); max-width: 48ch; margin-bottom: 22px; }
.hero2-cta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.hero2-note { margin-top: 14px; font-size: 13.5px; color: var(--text3); display: flex; gap: 14px; flex-wrap: wrap; }
.hero2-note span { display: inline-flex; gap: 6px; align-items: center; }
.hero2-note svg.ic { color: var(--green); }

.try-card { background: var(--surface); border-radius: 28px; box-shadow: var(--shadow-lg); padding: 18px; border: 1px solid var(--border); }
.try-head { display: flex; align-items: center; gap: 10px; padding: 2px 4px 14px; border-bottom: 1px solid var(--border); }
.try-av { width: 38px; height: 38px; border-radius: 50%; background: #141824; color: var(--cta); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.try-head b { display: block; font-size: 15px; }
.try-head small { color: var(--text3); font-size: 12px; }
.try-head .free { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--green); background: var(--green-bg); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.try-body { padding: 14px 2px 4px; display: flex; flex-direction: column; gap: 10px; }
.try-bubble { background: var(--surface2); border-radius: 6px 18px 18px 18px; padding: 11px 14px; font-size: 14px; max-width: 92%; }
.try-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.try-chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 8px 13px; font-size: 13px; cursor: pointer; color: var(--text); text-align: left; }
.try-chip:hover { border-color: var(--cta); background: var(--tint); }
.try-input { display: flex; align-items: center; gap: 8px; margin-top: 12px; background: var(--surface2); border-radius: 999px; padding: 6px 6px 6px 16px; border: 1px solid var(--border); }
.try-input input { flex: 1; border: none; background: transparent; font-size: 15px; color: var(--text); outline: none; min-width: 0; padding: 8px 0; }
.try-input button { width: 44px; height: 44px; border-radius: 50%; border: none; background: var(--cta); color: var(--cta-ink); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.try-input button svg.ic { width: 20px; height: 20px; }

.lp-block { padding: 64px 20px; }
.lp-block.alt { background: var(--surface); }
.lp-in { max-width: 1120px; margin: 0 auto; }
.lp-h { text-align: center; margin-bottom: 30px; }
.lp-h .eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.lp-h h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin-top: 6px; letter-spacing: -0.03em; }
.lp-h p { color: var(--text2); margin: 8px auto 0; max-width: 56ch; }

.steps { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; position: relative; padding-bottom: 28px; }
.step:not(:last-child)::before { content: ""; position: absolute; left: 31px; top: 64px; bottom: 0; width: 2px; background: var(--msg-user-border); }
.step .ring { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--msg-user-border); background: var(--surface); display: grid; place-items: center; color: var(--gold); box-shadow: 0 0 0 6px var(--tint); }
.step .ring svg.ic { width: 26px; height: 26px; }
.step .n { font-size: 13px; font-weight: 800; letter-spacing: .06em; color: var(--gold); text-transform: uppercase; margin-top: 6px; }
.step h3 { font-size: 19px; margin: 4px 0 4px; }
.step p { color: var(--text2); font-size: 15px; margin: 0; }

.areas { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.area { display: inline-flex; gap: 8px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 10px 16px; font-size: 14.5px; font-weight: 600; box-shadow: var(--shadow-sm); cursor: pointer; color: var(--text); }
.area svg.ic { color: var(--gold); }
.area:hover { border-color: var(--cta); }

/* Guest chat sheet */
.gchat { display: flex; flex-direction: column; height: min(86vh, 760px); max-width: 760px; padding: 0 !important; overflow: hidden; }
@media (max-width: 760px) { .gchat { height: 94vh; } }
.gchat-top { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.gchat-top .meta { flex: 1; min-width: 0; }
.gchat-top b { display: block; }
.gchat-top small { color: var(--text3); font-size: 12px; }
.gchat-left { font-size: 12px; font-weight: 700; background: var(--accent); color: var(--gold); padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.gchat-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.gmsg { max-width: 88%; font-size: 14.5px; line-height: 1.6; }
.gmsg.user { align-self: flex-end; background: var(--msg-user-bg); border: 1px solid var(--msg-user-border); border-radius: 20px 20px 6px 20px; padding: 10px 14px; }
.gmsg.bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 6px 20px 20px 20px; padding: 12px 16px; box-shadow: var(--shadow-sm); }
.gmsg.bot p { margin: 0 0 8px; } .gmsg.bot p:last-child { margin: 0; }
.gmsg.bot ul, .gmsg.bot ol { margin: 0 0 8px 20px; }
.gsrc { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; font-size: 12px; color: var(--text3); }
.gsrc a.c { text-decoration: none; }
.gsrc span.c, .gsrc a.c { display: inline-flex; gap: 5px; align-items: center; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font-weight: 600; color: var(--text); }
.gtyping { align-self: flex-start; color: var(--text3); font-size: 13px; padding: 4px 6px; }
.gchat-foot { padding: 10px 12px 14px; background: var(--bg); }
.gchat-foot .try-input { margin: 0; background: var(--surface); box-shadow: var(--shadow); }
.gchat-foot small { display: block; text-align: center; font-size: 11.5px; color: var(--text3); margin-top: 8px; }
.gate { align-self: stretch; background: var(--surface); border: 2px solid var(--cta); border-radius: 22px; padding: 18px; text-align: center; box-shadow: var(--shadow); }
.gate h3 { font-size: 18px; margin-bottom: 4px; }
.gate p { color: var(--text2); font-size: 14px; margin: 0 0 14px; }
.gate .row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* Admin: plans tab */
.ap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; }
.ap-box { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 16px; }
.ap-box h4 { font-size: 14px; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.ap-box label { display: block; font-size: 12.5px; color: var(--text2); margin: 8px 0 4px; font-weight: 600; }
.ap-box input, .ap-box select, .ap-box textarea { width: 100%; border: 1px solid var(--border); background: var(--surface2); color: var(--text); border-radius: 10px; padding: 9px 11px; font-size: 14px; }
.ap-box textarea { min-height: 70px; resize: vertical; }
.ap-kpi { font-size: 26px; font-weight: 800; }
.ap-kpi small { font-size: 12.5px; font-weight: 600; color: var(--text3); display: block; }
.toggle { display: flex !important; align-items: center; gap: 10px; cursor: pointer; font-size: 14px !important; color: var(--text) !important; }
.toggle input { width: 42px !important; height: 24px; appearance: none; -webkit-appearance: none; background: var(--surface3) !important; border-radius: 99px !important; position: relative; cursor: pointer; padding: 0 !important; border: none !important; flex-shrink: 0; transition: background .15s; }
.toggle input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.toggle input:checked { background: var(--green) !important; }
.toggle input:checked::after { left: 21px; }
.ap-table { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--surface); border-radius: 16px; overflow: hidden; border: 1px solid var(--border); }
.ap-table th, .ap-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.ap-table th { font-size: 12px; color: var(--text3); text-transform: uppercase; letter-spacing: .04em; background: var(--surface2); }
.ap-scroll { overflow-x: auto; margin-bottom: 18px; }
.st { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; background: var(--surface2); color: var(--text2); }
.st.pending { background: var(--accent); color: var(--gold); } .st.active { background: var(--green-bg); color: var(--green); } .st.rejected { background: var(--red-bg); color: var(--red); }
.ap-plan-row td input { width: 80px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; background: var(--surface2); color: var(--text); }
.ap-plan-row td input.w { width: 100%; min-width: 160px; }
.ap-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.ap-actions button { border-radius: 999px; padding: 6px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.ap-actions button.ok { background: var(--green); border-color: var(--green); color: #fff; }
.ap-actions button.no { color: var(--red); }

@media (max-width: 900px) { .topbar { padding-left: 62px; } }
.gchat-top small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-grid { grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)) !important; }
.plan-price { white-space: nowrap; font-size: clamp(28px, 2.6vw, 34px); }
.sheet .form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--text2); margin: 10px 0 6px; }
.sheet input, .sheet select, .sheet textarea { width: 100%; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 12px; padding: 12px 14px; font-size: 15px; min-height: 48px; outline: none; }
.sheet input:focus { border-color: var(--cta); box-shadow: 0 0 0 4px rgba(244, 180, 0, .18); }
.sheet #payRef::placeholder { text-transform: none; letter-spacing: 0; }

/* Directory and booking picker in the new style */
.advocate-card { border-radius: 20px !important; box-shadow: var(--shadow-sm); border-color: var(--border) !important; background: var(--surface) !important; }
.advocate-card:hover { box-shadow: var(--shadow); }
.advocate-card .info .rate { font-size: 12.5px; color: var(--text3); font-weight: 600; }
.advocate-card .book-btn { background: var(--cta); color: var(--cta-ink); border-radius: 999px; padding: 12px; font-size: 14px; display: inline-flex; gap: 8px; align-items: center; justify-content: center; }
.advocate-card .book-btn:hover { background: var(--cta-hover); }
.advocate-card .book-btn:disabled { background: var(--surface2); color: var(--text3); }
.slot-day, .slot-time { border-radius: 14px !important; }
.slot-day.on, .slot-time.on { background: var(--cta) !important; border-color: var(--cta) !important; color: var(--cta-ink) !important; }
.bk-fee { border-radius: 14px; }
.adv-filter-bar input, .adv-filter-bar select { border-radius: 999px !important; padding-left: 16px !important; }
.booking-card .bc-actions button, .booking-card .bc-actions a.join-btn { border-radius: 999px !important; padding: 8px 14px !important; }
.booking-card .bc-actions .approve-btn { background: var(--cta) !important; color: var(--cta-ink) !important; border-color: var(--cta) !important; }
.booking-card .bc-actions a.join-btn { background: var(--green) !important; }
.bk-tabs button, .bk-filter button { border-radius: 999px !important; }
.admin-tabs button { border-radius: 999px !important; }
.admin-stat { border-radius: 18px !important; }
.radio-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; padding: 10px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.radio-row input { margin-top: 3px; accent-color: #c08a00; width: 18px; height: 18px; flex-shrink: 0; }
.radio-row:has(input:checked) { border-color: var(--cta); background: var(--tint); }

/* English | Kiswahili switch */
.lang-seg { display: inline-flex; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; flex-shrink: 0; }
.lang-seg button { border: none; background: transparent; color: var(--text2); font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.lang-seg button.on { background: var(--cta); color: var(--cta-ink); box-shadow: 0 2px 6px rgba(244, 180, 0, .3); }
.lang-seg .short { display: none; }
@media (max-width: 560px) { .lang-seg .full { display: none; } .lang-seg .short { display: inline; } .lang-seg button { padding: 6px 10px; } }
.chat-header .ch-info { flex: 1; min-width: 0; }
.try-head .free { margin-left: 0; display: inline-block; margin-top: 3px; }
.gchat-top small#gLeft { color: var(--gold); font-weight: 700; }

/* SPV1.8.1: "Asked about a lot right now" tiles */
.sit-trend-h { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-size: 14px; font-weight: 700; color: var(--text2, #4a5060); }
.sit-trend-h svg.ic { width: 16px; height: 16px; color: var(--cta, #f4b400); }
.sit.sit-trend { border-style: dashed !important; }
.sit.sit-trend .sit-icon { background: color-mix(in srgb, var(--cta, #f4b400) 18%, transparent); }

/* SPV1.8.2: guidance under an answer */
.answer-actions { flex-wrap: wrap; }
.answer-actions .aa-hint { flex-basis: 100%; display: flex; gap: 6px; align-items: flex-start; margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text3, #6a7080); }
.answer-actions .aa-hint svg.ic { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.ghint { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--text3, #6a7080); }
.ghint svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 2px; }
.ghint a { color: inherit; text-decoration: underline; }

/* SPV1.8.2: practice-area filter chips (front-page registry and Wakili Directory) */
.area-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.area-chips.app { padding: 0 24px 12px; margin: 0; }
.area-chips button { border: 1px solid var(--border); background: var(--surface); color: var(--text2); border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.area-chips button:hover { border-color: var(--cta, #f4b400); }
.area-chips button.on { background: var(--cta, #f4b400); border-color: var(--cta, #f4b400); color: #1c1503; }

/* SPV1.8.2: scheduled jobs set-up */
.cron-steps { margin: 6px 0 0 18px; padding: 0; font-size: 13px; line-height: 1.5; color: var(--text2); }
.cron-steps li { margin-bottom: 10px; }
.cron-steps small { display: block; color: var(--text3); font-size: 12px; margin-top: 4px; }
.cron-code { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.cron-code code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 12px; }
.site-warn { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--red, #b3261e) 10%, transparent); color: var(--text); font-size: 12.5px; line-height: 1.45; }
.site-warn svg.ic { width: 14px; height: 14px; color: var(--red, #b3261e); vertical-align: -2px; }
.site-warn .btn-sm { margin-top: 6px; display: inline-block; }

/* SPV1.9: paid services */
.bk-pay { border: 1px solid var(--cta, #f4b400); background: color-mix(in srgb, var(--cta, #f4b400) 9%, var(--surface)); border-radius: 16px; padding: 14px 16px; margin: 6px 0 14px; }
.bk-pay h4 { margin: 0 0 6px; font-size: 15px; display: flex; gap: 8px; align-items: center; }
.bk-pay ol { margin: 0 0 10px 18px; padding: 0; font-size: 13px; line-height: 1.5; color: var(--text2); }
.bk-pay .bk-pay-note { font-size: 12px; color: var(--text3); margin: 2px 0 0; }
.af-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .af-row2 { grid-template-columns: 1fr; } }
.opt { font-weight: 400; color: var(--text3); }
.doc-steps { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.doc-steps span { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--surface2); color: var(--text3); }
.doc-steps span.on { background: var(--cta, #f4b400); color: #1c1503; }
.doc-steps span.done { background: color-mix(in srgb, var(--green, #1f6b3a) 15%, transparent); color: var(--text); }
.doc-req-list { display: flex; flex-direction: column; gap: 10px; }
.doc-req { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 14px 16px; }
.doc-req.delivered { border-left: 4px solid var(--green, #1f6b3a); }
.doc-req.in_progress { border-left: 4px solid var(--cta, #f4b400); }
.dr-meta { font-size: 12.5px; color: var(--text3); margin-top: 4px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dr-meta svg.ic { width: 13px; height: 13px; }
.dr-details { font-size: 13.5px; color: var(--text2); margin-top: 6px; white-space: pre-wrap; max-height: 9.5em; overflow: auto; }
.doc-work { margin-top: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 18px; }

/* SPV1.9: 3-step sign-up */
.ob-steps { display: flex; gap: 6px; margin: 0 0 16px; }
.ob-steps i { flex: 1; height: 5px; border-radius: 99px; background: var(--surface2); }
.ob-steps i.on { background: var(--cta, #f4b400); }
.ob-label { font-size: 12.5px; color: var(--text3); margin: -8px 0 12px; }
.ob-who { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ob-who button { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 14px; padding: 12px; cursor: pointer; font: inherit; color: var(--text); }
.ob-who button b { display: block; font-size: 14px; }
.ob-who button span { font-size: 12px; color: var(--text3); }
.ob-who button.on { border-color: var(--cta, #f4b400); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cta, #f4b400) 35%, transparent); }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ob-chips button { border: 1px solid var(--border); background: var(--surface); color: var(--text2); border-radius: 999px; padding: 7px 12px; font: 600 13px/1.2 inherit; cursor: pointer; font-family: inherit; }
.ob-chips button.on { background: var(--cta, #f4b400); border-color: var(--cta, #f4b400); color: #1c1503; }
.ob-nav { display: flex; gap: 10px; margin-top: 14px; }
.ob-nav button { flex: 1; }
.ob-done { text-align: center; padding: 8px 0; }
.ob-done .lk { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 10px; background: color-mix(in srgb, var(--green, #1f6b3a) 15%, transparent); }
.ob-nav .btn-secondary { border: 1px solid var(--border) !important; background: var(--surface) !important; box-shadow: none !important; border-radius: 8px; font-weight: 600; }

/* SPV1.9.1: a section of the law in a pop-up */
.gsrc button.c { display: inline-flex; gap: 5px; align-items: center; background: var(--surface2); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; font: 600 12px/1.4 inherit; font-family: inherit; color: var(--text); cursor: pointer; }
.gsrc button.c:hover { border-color: var(--cta, #f4b400); }
.ui-dialog:has(.secpop) { max-width: 680px; width: calc(100vw - 32px); }
.secpop-doc { font-size: 12.5px; color: var(--text3); margin: -4px 0 10px; }
.secpop-body { max-height: 55vh; overflow: auto; padding: 4px 4px 4px 0; font-family: var(--font-serif, Georgia, serif); font-size: 15.5px; line-height: 1.65; color: var(--text); }
.secpop-body .lp { margin: 0 0 10px; }
.secpop-body .lv1 { padding-left: 0; }
.secpop-body .lv2 { padding-left: 26px; }
.secpop-body .lv3 { padding-left: 52px; }
.secpop-body .lp-n { font-weight: 700; margin-right: 6px; color: var(--text2); }
.secpop-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 6px; }
.secpop-actions .sp-btn { padding: 9px 16px; font-size: 14px; text-decoration: none; }
.secpop-meta { font-size: 12px; color: var(--text3); margin: 6px 0 0; }
.gnosave { display: flex; gap: 8px; align-items: flex-start; margin: 0 16px; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--cta, #f4b400) 14%, var(--surface)); font-size: 12.5px; line-height: 1.45; color: var(--text2); }
.gnosave svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }
.gnosave a { color: var(--text); font-weight: 700; }

/* SPV1.9.1: confirm your email */
.verify-bar { display: flex; gap: 10px; align-items: center; padding: 10px 20px; background: color-mix(in srgb, var(--cta, #f4b400) 18%, var(--surface)); border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text); }
.verify-bar svg.ic { width: 16px; height: 16px; flex-shrink: 0; }
.verify-bar span { flex: 1; }
.verify-bar button { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 14px; font: 600 13px/1.2 inherit; font-family: inherit; cursor: pointer; color: var(--text); white-space: nowrap; }
@media (max-width: 640px) { .verify-bar { flex-wrap: wrap; } }

/* SPV1.9.2: advocates matched to the question */
.ghint .gadv { background: none; border: none; padding: 0; font: inherit; color: var(--text); text-decoration: underline; cursor: pointer; }
.reg-note { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--cta, #f4b400) 15%, var(--surface)); border: 1px solid var(--cta, #f4b400); font-size: 14px; }
.reg-note svg.ic { width: 18px; height: 18px; }
.reg-note span { flex: 1; min-width: 220px; }
.reg-note a { color: var(--text); font-weight: 700; }
.reg-note button { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 6px 12px; font: 600 13px/1.2 inherit; font-family: inherit; cursor: pointer; color: var(--text); }
#registry.reg-flash .lp-registry-grid { animation: regflash 1.6s ease; }
@keyframes regflash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cta, #f4b400) 60%, transparent); } 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--cta, #f4b400) 25%, transparent); } 100% { box-shadow: none; } }

/* SPV1.9.4: visit counter */
.visit-count { display: inline-block; font-size: 12px; color: var(--text3); font-variant-numeric: tabular-nums; }