/* الدائرة — shared UI kit (ui.css). Loaded after circle.css. Calibri, Latin digits. 2026-10-16: navy SAL primary, quiet indigo, frosted rail. */
:root {
  --c-weekly:#2a5fc4; --c-series:#6d4fc9; --c-once:#0d7a72; --c-quick:#a8590c;
  --f-light:#15803d; --f-same:#64748b; --f-heavy:#b45309;
  --r-up:#15803d; --r-same:#64748b; --r-down:#b91c1c;
  --s-scheduled:#94a3b8; --s-waiting:#f59e0b; --s-live:#16a34a; --s-done:#1a3f8f; --s-cancelled:#9ca3af;
  --surface:#fff; --glass:rgba(255,255,255,.86); --input-bg:#fff; --shadow:0 10px 30px rgba(20,33,61,.05);
  --rail-w:56px; --rail-bg:rgba(255,255,255,.55); --rail-line:#d9e6ff;
  --panel-w:min(420px,92vw);
}
.ci-ic { display:inline-block; vertical-align:-.2em; flex:none; }

/* ===== dark-mode tokens (page surfaces switch via variables only) =====
   page #0e1829 (= #0f1923 blended with the night #0b1230), surface #162232, primary accent #5b9aff, filled buttons #2f5fc8 (white text 5.8:1), gold stays #f0b429 */
@media (prefers-color-scheme: dark) {
  :root { --page:#0e1829; --card:#162232; --ink:#e8ecf8; --body:#c3cce3; --dim:#a3aec8; --line:rgba(217,230,255,.14); --line2:rgba(217,230,255,.1);
    --blue:#5b9aff; --navy:#5b9aff; --navy-h:#2a55b8; --primary:#2f5fc8; --indigo:#8fb4ff; --violet:#a78bfa; --sky:#7ab6e8;
    --surface:#162232; --glass:rgba(22,34,50,.84); --input-bg:rgba(255,255,255,.06); --shadow:0 8px 24px rgba(0,0,0,.35);
    --rail-bg:rgba(14,24,41,.78); --rail-line:rgba(217,230,255,.12); --good-bg:rgba(21,128,61,.22); --warn-bg:rgba(180,83,9,.22); --bad-bg:rgba(185,28,28,.22);
    --c-weekly:#7aa2ff; --c-series:#b4a1fa; --c-once:#2dd4bf; --c-quick:#fbbf24; }
  html, body { background:var(--page); }
  .top { border-bottom-color:var(--line); }
  .top .back { background:rgba(255,255,255,.05); color:var(--blue); border-color:var(--line); }
  .pill { background:rgba(91,154,255,.16); } .pill.gray { background:rgba(255,255,255,.08); }
  .members li, .scale button, .tags button { background:var(--card); }
  .tags button.on { background:rgba(91,154,255,.2); color:var(--blue); border-color:var(--blue); }
  .dot { background:rgba(255,255,255,.12); }
  .btn { box-shadow:0 6px 18px rgba(47,95,200,.3); } .btn:hover { background:var(--navy-h); }
}
/* surfaces that circle.css hardcodes to #fff → re-bind to variables (light values identical) */
.btn.secondary, .btn.danger { background:var(--surface); }
input, select, textarea { background:var(--input-bg); color:var(--ink); }
.card { box-shadow:var(--shadow); }

/* ===== glass card (frosted, hairline border) ===== */
.card-glass { background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:16px; padding:22px; box-shadow:var(--shadow); }

/* ===== status dots ===== */
.dot-s { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--s-scheduled); vertical-align:middle; margin-inline-end:6px; flex:none; position:relative; }
.dot-s.scheduled { background:var(--s-scheduled); } .dot-s.waiting { background:var(--s-waiting); } .dot-s.done { background:var(--s-done); } .dot-s.cancelled { background:var(--s-cancelled); }
.dot-s.live { background:var(--s-live); box-shadow:0 0 0 0 rgba(22,163,74,.6); animation:dotPulse 1.6s ease-out infinite; }
@keyframes dotPulse { 0% { box-shadow:0 0 0 0 rgba(22,163,74,.55); } 70% { box-shadow:0 0 0 8px rgba(22,163,74,0); } 100% { box-shadow:0 0 0 0 rgba(22,163,74,0); } }

/* ===== mode colors ===== */
.mode-weekly { --mode:var(--c-weekly); } .mode-series { --mode:var(--c-series); } .mode-once { --mode:var(--c-once); } .mode-quick { --mode:var(--c-quick); }
.mode-weekly, .mode-series, .mode-once, .mode-quick { color:var(--mode); }
.mode-bar { border-inline-start:4px solid var(--mode, var(--c-once)); color:inherit; }
.mode-pill { display:inline-flex; align-items:center; gap:4px; border-radius:999px; padding:3px 11px; font-size:14px; font-weight:700; background:color-mix(in srgb, var(--mode, var(--c-once)) 12%, transparent); color:var(--mode, var(--c-once)); }

/* ===== avatars ===== */
.avatar { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--av,#64748b); color:#14213d; text-shadow:none; font-weight:700; font-size:14px; line-height:1; flex:none; border:2px solid var(--surface); user-select:none; }
.avatar.more { background:var(--dim); color:#fff; font-size:14px; direction:ltr; }
.avatars { display:inline-flex; align-items:center; direction:rtl; }
.avatars > * { margin-inline-end:-8px; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.avatars > *:last-child { margin-inline-end:0; }

/* ===== chips ===== */
.chip { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font:inherit; font-size:15px; cursor:pointer; transition:background .15s, border-color .15s, color .15s; }
.chip.on { background:color-mix(in srgb, var(--blue) 12%, var(--surface)); border-color:var(--blue); color:var(--blue); font-weight:700; }
.chip:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.chip.sm { min-height:34px; padding:4px 12px; font-size:14px; }

/* ===== pulse ring (primary button halo) — indigo glow ===== */
.pulse-ring { position:relative; }
.pulse-ring::after { content:''; position:absolute; inset:-3px; border-radius:inherit; border:2px solid var(--indigo); opacity:0; animation:haloPulse 2s ease-out infinite; pointer-events:none; }
@keyframes haloPulse { 0% { transform:scale(.96); opacity:.7; } 70% { transform:scale(1.14); opacity:0; } 100% { transform:scale(1.14); opacity:0; } }

/* ===== toast ===== */
.toast { position:fixed; inset-inline:0; bottom:calc(20px + env(safe-area-inset-bottom,0px)); margin:0 auto; width:max-content; max-width:min(92vw,420px); display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; background:#14213d; color:#fff; font-size:15px; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,.25); z-index:1200; opacity:0; transform:translateY(16px); transition:opacity .2s, transform .2s; pointer-events:none; direction:rtl; }
.toast.show { opacity:1; transform:none; }
.toast.ok { background:var(--f-light); } .toast.warn { background:var(--f-heavy); }
body.has-rail .toast { bottom:calc(20px + env(safe-area-inset-bottom,0px)); }
@media (max-width:479px) { body.has-rail .toast { bottom:calc(76px + env(safe-area-inset-bottom,0px)); } }

/* ===== rail (vertical, RIGHT edge in RTL = inline-start; mirrors to left in LTR) — frosted glass ===== */
.rail { position:fixed; top:0; bottom:0; inset-inline-start:0; width:var(--rail-w); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:12px 0; background:var(--rail-bg); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-inline-end:1px solid var(--rail-line); box-shadow:inset -1px 0 0 rgba(255,255,255,.6); z-index:900; }
body.has-rail main, body.has-rail .top, body.has-rail .foot { padding-inline-start:calc(16px + var(--rail-w)); }
body.night .rail { background:rgba(11,18,48,.7); border-color:rgba(255,255,255,.1); box-shadow:none; }
.rail-b { position:relative; width:44px; height:44px; border-radius:12px; border:0; background:transparent; color:var(--dim); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font:inherit; transition:background .15s, color .15s, transform .15s; }
.rail-b:hover { background:color-mix(in srgb, var(--blue) 8%, transparent); color:var(--navy); }
.rail-b:active { transform:scale(.94); }
.rail-b.active { background:var(--rb, var(--primary)); color:#fff; box-shadow:0 5px 16px color-mix(in srgb, var(--rb, var(--primary)) 35%, transparent); }
.rail-b.active::before { content:''; position:absolute; inset-inline-start:-6px; top:12px; bottom:12px; width:3px; border-radius:3px; background:var(--rb, var(--primary)); }
.rail-b:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.rail-b .rail-l { position:absolute; inset-inline-start:calc(100% + 10px); top:50%; transform:translateY(-50%); background:#14213d; color:#fff; font-size:14px; font-weight:700; line-height:1.2; padding:6px 10px; border-radius:8px; white-space:nowrap; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .12s; z-index:1; box-shadow:0 6px 18px rgba(0,0,0,.2); }
.rail-b:hover .rail-l, .rail-b:focus-visible .rail-l { opacity:1; visibility:visible; }
.rail-sp { flex:1; min-height:8px; }
.rail-b.util { width:36px; height:36px; color:var(--dim); } .rail-b.util .rail-badge { top:3px; inset-inline-end:3px; }
.rail-more { display:flex; flex-direction:column; gap:6px; }
.rail-more-b { display:flex; align-items:center; gap:12px; min-height:48px; padding:8px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); font:inherit; font-size:16px; cursor:pointer; text-align:start; position:relative; }
.rail-more-b .ci-ic { color:var(--rb, var(--blue)); } .rail-more-b.util { color:var(--dim); } .rail-more-b.util .ci-ic { color:var(--dim); }
.rail-more-b .rail-badge { position:static; margin-inline-start:auto; }
.rail-more-b:hover { background:color-mix(in srgb, var(--blue) 8%, var(--surface)); }
.rail-badge { position:absolute; top:6px; inset-inline-end:6px; width:9px; height:9px; border-radius:50%; background:var(--rb, #ef4444); border:2px solid var(--surface); }
.rail-b.active .rail-badge { border-color:#fff; }
@media (max-width:479px) {
  .rail, .rail.bottom { top:auto; bottom:0; inset-inline:0; width:auto; height:auto; flex-direction:row; justify-content:space-around; gap:0; padding:6px 8px; padding-bottom:calc(6px + env(safe-area-inset-bottom,0px)); border:0; border-top:1px solid var(--rail-line); box-shadow:none; }
  body.has-rail main, body.has-rail .top, body.has-rail .foot { padding-inline-start:16px; }
  body.has-rail main { padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
  body.has-rail .foot { display:none; }
  .rail-b { width:auto; min-width:56px; height:auto; min-height:52px; flex:1 1 0; max-width:96px; border-radius:12px; flex-direction:column; gap:2px; padding:4px 2px 3px; }
  .rail-b.active::before { inset-inline:12px; top:-6px; bottom:auto; width:auto; height:3px; }
  .rail-b .rail-l { position:static; transform:none; opacity:1; visibility:visible; background:transparent; color:inherit; font-size:14px; font-weight:700; padding:0; box-shadow:none; max-width:100%; overflow:hidden; text-overflow:ellipsis; line-height:1.15; }
  .rail-b.util { width:auto; min-width:48px; height:auto; min-height:52px; flex:0 1 auto; }
  .rail-b.util .rail-badge { top:6px; inset-inline-end:6px; }
  .rail-sp { display:none; }
  .rail-badge { top:4px; inset-inline-end:calc(50% - 14px); }
  .rail-b.active .rail-badge { border-color:var(--rb, var(--primary)); background:#fff; }
}
/* phones ≤768: 16px fields → no iOS auto-zoom on focus */
@media (max-width:768px) { input, select, textarea { font-size:16px; } }
/* class hook for tests / JS: force bottom bar */
.rail.bottom { top:auto; bottom:0; inset-inline:0; width:auto; height:auto; flex-direction:row; justify-content:space-around; gap:0; padding:6px 8px; border:0; border-top:1px solid var(--rail-line); }

/* ===== side panel (LEFT edge in RTL = inline-end, opposite the rail; mirrors in LTR) ===== */
.panel-backdrop { position:fixed; inset:0; background:rgba(20,33,61,.45); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); z-index:1000; animation:fadeIn .2s ease both; }
.panel-backdrop.out { animation:fadeOut .2s ease both; }
.panel { position:fixed; top:0; bottom:0; inset-inline-end:0; width:var(--panel-w); background:var(--surface); color:var(--ink); z-index:1001; display:flex; flex-direction:column; box-shadow:0 0 40px rgba(0,0,0,.25); border-inline-start:1px solid var(--line); animation:panelIn .2s ease both; padding-bottom:env(safe-area-inset-bottom,0px); outline:0; }
.panel.out { animation:panelOut .2s ease both; }
.panel-h { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); }
.panel-ic { color:var(--blue); display:inline-flex; }
.panel-t { font-size:20px; font-weight:700; flex:1; margin:0; }
.panel-x { width:44px; height:44px; border-radius:50%; border:0; background:transparent; color:var(--dim); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.panel-x:hover { background:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink); }
.panel-b { flex:1; overflow:auto; padding:16px; display:flex; flex-direction:column; gap:12px; }
body.has-panel { overflow:hidden; position:fixed; inset-inline:0; width:100%; } /* iOS: fixed body + restored scrollY (ui.js) stops background scroll */
@keyframes panelIn { from { transform:translateX(calc(-100% * var(--dir,1))); opacity:.6; } to { transform:none; opacity:1; } }
@keyframes panelOut { from { transform:none; opacity:1; } to { transform:translateX(calc(-100% * var(--dir,1))); opacity:.6; } }
[dir="ltr"] .panel { --dir:-1; } /* RTL: slides in from the left (-100%); LTR: from the right */
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
@media (max-width:479px) { .panel { width:100vw; border:0; } }

/* ===== view transitions ===== */
.view-enter { animation:viewIn .2s ease both; }
@keyframes viewIn { from { transform:translateY(6px); } to { opacity:1; transform:none; } }

/* ===== flip number (countdown) ===== */
.flip { display:inline-block; animation:flipNum .3s ease; }
@keyframes flipNum { 0% { transform:rotateX(90deg); opacity:0; } 50% { transform:rotateX(-20deg); opacity:1; } 100% { transform:none; } }

/* ===== celebrate (8/8) — indigo/navy glow ===== */
.celebrate { animation:celebrateGlow 1.2s ease-out; }
@keyframes celebrateGlow { 0% { box-shadow:0 0 0 0 rgba(99,102,241,.6); filter:brightness(1); } 30% { box-shadow:0 0 0 14px rgba(99,102,241,0), 0 0 40px rgba(60,120,255,.5); filter:brightness(1.15); } 100% { box-shadow:0 0 0 0 rgba(99,102,241,0); filter:brightness(1); } }

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .panel, .panel.out, .panel-backdrop, .panel-backdrop.out, .view-enter, .flip, .celebrate, .pulse-ring::after, .dot-s.live, .rail-b, .rail-b .rail-l, .rail-badge, .toast, .chip { animation:none !important; transition:none !important; }
  .rail-b:active { transform:none !important; }
  .pulse-ring::after { display:none; }
}

/* ===== header: 44px targets ===== */
.top .brand, .top .back { min-height:44px; display:inline-flex; align-items:center; }
.top .back { min-width:44px; justify-content:center; }

/* ===== 2026-10-16: rail labels ALWAYS visible under the icon on tablet/desktop (≥480px); rail widens to 72px ===== */
@media (min-width:480px) {
  :root { --rail-w:76px; }
  .rail { gap:4px; padding:10px 0; }
  .rail-b { width:70px; height:auto; min-height:56px; flex-direction:column; gap:3px; padding:6px 1px 5px; border-radius:12px; }
  .rail-b .rail-l { position:static; transform:none; opacity:1; visibility:visible; background:transparent; color:inherit; font-size:14px; font-weight:700; padding:0; box-shadow:none; max-width:100%; overflow:hidden; text-overflow:ellipsis; line-height:1.15; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-align:center; }
  .rail-b.active::before { top:10px; bottom:10px; }
  .rail-b.util { width:70px; height:auto; min-height:52px; }
  .rail-b.util .rail-l { font-size:13px; font-weight:600; }
  .rail-badge { top:5px; inset-inline-end:calc(50% - 16px); }
}

/* ===== fix50-home: home / new-circle / circle page / nav ===== */
/* 45: no washed-out fade on load — slide only, content fully opaque */
.view-enter { animation:viewSlide .18s ease-out both; }
@keyframes viewSlide { from { transform:translateY(6px); } to { transform:none; } }
.skel { display:flex; flex-direction:column; gap:14px; max-width:620px; margin:24px auto; }
.skel-b { display:block; height:18px; border-radius:10px; background:linear-gradient(90deg, var(--line2) 0%, var(--line) 50%, var(--line2) 100%); background-size:200% 100%; animation:skelMove 1.2s linear infinite; }
.skel-h { height:180px; border-radius:16px; } .skel-s { width:60%; }
@keyframes skelMove { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce) { .skel-b { animation:none; } .view-enter { animation:none; } }
/* 44: logged-out intro */
.intro3 { max-width:420px; margin:24px auto 0; } .intro3 h2 { margin-bottom:10px; }
.intro3-l { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:8px; }
.intro3-l li { display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.intro3-l li > b { flex:none; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--navy); color:#fff; font-size:16px; }
.intro3-l strong { display:block; color:var(--ink); }
/* 21/30: circle type = radio cards (single choice) */
.seg { border:0; padding:0; margin:0; } .seg legend { font-weight:700; margin-bottom:8px; font-size:16px; }
.seg-row { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
.seg-o { position:relative; display:flex; flex-direction:column; gap:2px; padding:12px 12px 12px 12px; padding-inline-start:38px; border:2px solid var(--line); border-radius:14px; background:var(--surface,#fff); cursor:pointer; min-height:64px; }
.seg-o input { position:absolute; opacity:0; width:1px; height:1px; }
.seg-o .seg-dot { position:absolute; inset-inline-start:12px; top:14px; width:18px; height:18px; border-radius:50%; border:2px solid var(--dim); background:var(--surface,#fff); }
.seg-o.on { border-color:var(--navy); background:var(--soft,#eaf1ff); } .seg-o.on .seg-dot { border-color:var(--navy); box-shadow:inset 0 0 0 4px var(--surface,#fff); background:var(--navy); }
.seg-o:has(input:focus-visible) { outline:3px solid var(--indigo); outline-offset:2px; }
.seg-o b { font-size:16px; color:var(--ink); } .seg-o small { font-size:13px; color:var(--dim); line-height:1.3; }
@media (max-width:479px) { .seg-row { grid-template-columns:1fr; } .seg-o { min-height:52px; } }
.nprev { background:var(--soft,#eef2ff); border-radius:12px; padding:10px 14px; } .nprev:empty { display:none; }
.nprev ul { list-style:none; margin-top:4px; display:flex; flex-direction:column; gap:2px; font-size:15px; }
.notice.warn { border:1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
/* 46: past sessions */
.past-l { list-style:none; display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.past-l li { display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line2); padding-bottom:8px; }
.past-d { flex:none; min-width:58px; } .past-t { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.35; } .past-t b { font-weight:600; overflow-wrap:anywhere; }
.past-l .pill { text-decoration:none; min-height:32px; display:inline-flex; align-items:center; }
.past .skel { margin:8px 0; } .past .skel-h { height:40px; }
/* 27/42: danger zone */
.danger-zone { margin-top:16px; padding:14px; border:1px solid color-mix(in srgb, var(--bad) 35%, transparent); border-radius:14px; display:flex; flex-direction:column; gap:10px; }
.danger-zone h3 { color:var(--bad); font-size:17px; }
/* 49: full circle names on cards (wrap to 2 lines) */
.hrow-t b, .ccard-t b, .hero .hero-c b { white-space:normal !important; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
/* 40: bottom-bar labels — one short line */
@media (max-width:479px) { .rail-b .rail-l { -webkit-line-clamp:1 !important; white-space:nowrap !important; font-size:13px !important; } }
/* 47: dark mode contrast */
@media (prefers-color-scheme: dark) {
  .hero, .card.hero { border-color:rgba(143,180,255,.45); }
  .hero::before, .hero h1::after, .hero .hero-c::after { background:rgba(240,180,41,.7); box-shadow:none; }
  .card.hero.near, .card.hero.soon { background:color-mix(in srgb, var(--mode,var(--blue)) 8%, var(--surface)); }
  .pill { color:#dbe6ff; } .pill.gray { color:#e2e8f0; } .pill.info { color:#bfdbfe; }
  .pill.warn { background:rgba(245,158,11,.18); color:#fde68a; }
  .chips button { color:var(--ink); } .chips button.on { background:rgba(91,154,255,.22); color:#dbe6ff; border-color:#8fb4ff; }
  .banner-top { background:rgba(91,154,255,.14) !important; border-color:rgba(143,180,255,.3) !important; color:var(--ink); }
  .seg-o { background:var(--card); } .seg-o.on { background:rgba(91,154,255,.16); border-color:#8fb4ff; } .seg-o.on .seg-dot { background:#8fb4ff; border-color:#8fb4ff; box-shadow:inset 0 0 0 4px var(--card); } .seg-o .seg-dot { background:var(--card); }
  .nprev { background:rgba(91,154,255,.1); }
  .intro3-l li > b { background:#2f5fc8; }
  .danger-zone h3 { color:#fca5a5; }
}
.chead h1 { white-space:normal !important; overflow-wrap:anywhere; }

/* 2026-10-17: panels open as a centered window (not a side drawer) */
.panel, .panel-fb { inset:0 !important; margin:auto !important; transform:none; width:min(560px, calc(100vw - 32px)) !important; height:fit-content; max-height:min(86vh, 760px); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.panel { animation:panelPop .18s ease-out both; }
.panel.out { animation:panelPopOut .15s ease-in both; }
@keyframes panelPop { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes panelPopOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(8px) scale(.97); } }
@media (max-width:479px) { .panel, .panel-fb { width:calc(100vw - 24px) !important; max-height:calc(100dvh - 32px); border:1px solid var(--line); border-radius:16px; } }
/* WhatsApp as secondary button: green outline, readable */
.btn.secondary.wa { background:var(--surface,#fff); color:#128C4A; border:1.5px solid #128C4A; box-shadow:none; }
.panel .panel-b, .panel-fb .panel-fb-b { min-height:0; }