/* SHELLEH RIDE portal — brand colours from the logo (deep navy + white "S"). */
:root {
  --navy-950:#010a1f; --navy-900:#021641; --navy-800:#0a2463; --navy-700:#13328a;
  --accent:#3d7bff; --accent-2:#22d3ee; --accent-soft:rgba(61,123,255,.12);
  --bg:#f2f5fb; --bg-2:#e8eef9; --card:#ffffff; --ink:#0b1530; --muted:#64708a; --line:#e3e8f2;
  --good:#10b981; --warn:#f59e0b; --bad:#ef4444;
  --shadow:0 1px 2px rgba(2,22,65,.06), 0 8px 24px rgba(2,22,65,.06);
  --shadow-lift:0 2px 4px rgba(2,22,65,.08), 0 18px 40px rgba(2,22,65,.14);
  --radius:16px; --side:250px;
  --grad:linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --grad-navy:linear-gradient(160deg, #0a2463 0%, #021641 55%, #010a1f 100%);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#040b1f; --bg-2:#071431; --card:#0b1733; --ink:#e8eefc; --muted:#8d9ab8; --line:#1a2950;
          --accent-soft:rgba(61,123,255,.18);
          --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
          --shadow-lift:0 2px 6px rgba(0,0,0,.35), 0 20px 44px rgba(0,0,0,.45); }
}
* { box-sizing:border-box; }
html, body { overflow-x:hidden; }
body { margin:0; font-family:system-ui, "Segoe UI", Tahoma, "Noto Sans Arabic", sans-serif; background:var(--bg);
       color:var(--ink); -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
::selection { background:var(--accent); color:#fff; }

/* ---------------------------------------------------------------- layout */
.shell { display:flex; min-height:100vh; }
.side { position:fixed; inset-block:0; inset-inline-start:0; width:var(--side); background:var(--grad-navy); color:#dbe5ff;
        display:flex; flex-direction:column; padding:22px 14px; z-index:20; overflow:hidden; }
.side::before { content:""; position:absolute; width:340px; height:340px; inset-block-start:-120px; inset-inline-end:-160px;
                background:radial-gradient(circle, rgba(61,123,255,.35), transparent 65%); animation:drift 14s ease-in-out infinite alternate; }
.side::after { content:""; position:absolute; width:260px; height:260px; inset-block-end:-90px; inset-inline-start:-120px;
               background:radial-gradient(circle, rgba(34,211,238,.22), transparent 65%); animation:drift 18s ease-in-out infinite alternate-reverse; }
.brand { position:relative; display:flex; align-items:center; gap:12px; padding:4px 10px 22px; color:#fff; text-decoration:none; }
.brand img { width:42px; height:42px; filter:drop-shadow(0 4px 12px rgba(61,123,255,.6)); animation:float 6s ease-in-out infinite; }
.brand b { font-size:17px; letter-spacing:.06em; }
.brand small { display:block; font-size:11px; color:#8fa6dd; letter-spacing:.02em; font-weight:500; }
.nav { position:relative; display:flex; flex-direction:column; gap:3px; }
.nav a { display:flex; align-items:center; gap:12px; color:#c3d0f2; text-decoration:none; padding:10px 12px;
         border-radius:12px; font-size:14.5px; transition:background .25s, color .25s, transform .25s; }
.nav a svg { width:19px; height:19px; flex:none; opacity:.85; }
.nav a:hover { background:rgba(255,255,255,.07); color:#fff; transform:translateX(calc(var(--dir, 1) * -3px)); }
.nav a.on { background:rgba(61,123,255,.22); color:#fff; box-shadow:inset 0 0 0 1px rgba(120,160,255,.35), 0 6px 20px rgba(61,123,255,.25); }
.nav a.on svg { opacity:1; color:var(--accent-2); }
.nav .sep { height:1px; background:rgba(255,255,255,.08); margin:10px 6px; }
.nav .badge { margin-inline-start:auto; background:var(--bad); color:#fff; font-size:11px; padding:1px 7px; border-radius:99px; }
.me { position:relative; margin-top:auto; display:flex; align-items:center; gap:10px; padding:12px; border-radius:14px;
      background:rgba(255,255,255,.06); font-size:13px; }
.me .av { width:34px; height:34px; border-radius:50%; background:var(--grad); display:grid; place-items:center;
          color:#fff; font-weight:700; text-transform:uppercase; }
.me small { display:block; color:#8fa6dd; }
.main { flex:1; margin-inline-start:var(--side); min-width:0; }
.top { display:none; }
main { max-width:1180px; margin:0 auto; padding:28px 28px 60px; }

/* phones: sidebar becomes a slide-in drawer */
#nav-toggle { display:none; }
@media (max-width: 900px) {
  .main { margin-inline-start:0; }
  .top { display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:15;
         padding:10px 16px; background:var(--grad-navy); color:#fff; }
  .top .brand { padding:0; } .top .brand img { width:32px; height:32px; }
  .top label { cursor:pointer; padding:6px; border-radius:10px; display:grid; }
  .top label svg { width:24px; height:24px; color:#fff; }
  .side { transform:translateX(calc(var(--dir, 1) * 100%)); transition:transform .35s cubic-bezier(.2,.8,.2,1); width:270px;
          box-shadow:0 0 60px rgba(0,0,0,.4); }
  #nav-toggle:checked ~ .side { transform:none; }
  .scrim { position:fixed; inset:0; background:rgba(1,10,31,.5); backdrop-filter:blur(2px); opacity:0; pointer-events:none;
           transition:opacity .3s; z-index:18; }
  #nav-toggle:checked ~ .scrim { opacity:1; pointer-events:auto; }
  main { padding:18px 16px 50px; }
}
[dir="ltr"] { --dir:-1; }

/* ---------------------------------------------------------------- headings */
h1 { font-size:24px; margin:0 0 18px; font-weight:800; letter-spacing:-.01em; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
h2 { font-size:16px; margin:30px 0 12px; font-weight:700; color:var(--ink); }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.page-head h1 { margin:0; }
.sub { color:var(--muted); font-size:14px; margin:-12px 0 18px; }
.live { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--good); font-weight:600;
        background:rgba(16,185,129,.1); padding:5px 11px; border-radius:99px; }
.live i { width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 rgba(16,185,129,.6); animation:pulse 1.8s infinite; }

/* ---------------------------------------------------------------- cards */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
        transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.kpi { position:relative; overflow:hidden; }
.kpi:hover, .lift:hover { transform:translateY(-4px); box-shadow:var(--shadow-lift); }
.kpi .ic { width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); margin-bottom:12px; }
.kpi .ic svg { width:20px; height:20px; }
.kpi .l { color:var(--muted); font-size:13px; font-weight:500; }
.kpi .n { font-size:28px; font-weight:800; margin-top:4px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.kpi::after { content:""; position:absolute; inset-block-start:-40px; inset-inline-end:-40px; width:110px; height:110px; border-radius:50%;
              background:var(--accent-soft); transition:transform .5s; }
.kpi:hover::after { transform:scale(1.4); }
.kpi.money { background:var(--grad-navy); color:#fff; border-color:transparent; }
.kpi.money .l { color:#9fb4e6; } .kpi.money .ic { background:rgba(255,255,255,.12); color:var(--accent-2); }
.kpi.money::after { background:rgba(61,123,255,.25); }
.kpi.alert .ic { background:rgba(245,158,11,.14); color:var(--warn); }
.kpi.hot { border-color:rgba(245,158,11,.45); }

/* ---------------------------------------------------------------- tables */
.tbl { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
table { border-collapse:collapse; width:100%; font-size:14px; }
th, td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:start; white-space:nowrap; }
th { color:var(--muted); font-weight:600; font-size:12.5px; background:var(--bg-2); position:sticky; top:0; letter-spacing:.02em; }
tr:last-child td { border-bottom:none; }
tbody tr, table tr { transition:background .2s; }
table tr:hover td { background:var(--accent-soft); }
td a { color:var(--accent); text-decoration:none; font-weight:600; }
td a:hover { text-decoration:underline; }

/* ---------------------------------------------------------------- tags & colours */
.tag { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:99px; font-size:12px; font-weight:600;
       background:var(--bg-2); color:var(--muted); }
.tag::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.8; }
.tag.ACTIVE, .tag.RESOLVED { color:var(--good); background:rgba(16,185,129,.12); }
.tag.PENDING_APPROVAL, .tag.OPEN, .tag.IN_PROGRESS { color:var(--warn); background:rgba(245,158,11,.13); }
.tag.REJECTED, .tag.SUSPENDED { color:var(--bad); background:rgba(239,68,68,.12); }
.tag.NEW { color:var(--accent); background:var(--accent-soft); }
.ACTIVE { color:var(--good); } .PENDING_APPROVAL { color:var(--warn); }
.REJECTED, .SUSPENDED { color:var(--bad); }
.neg { color:var(--bad); font-weight:600; } .pos { color:var(--good); font-weight:600; }
.muted { color:var(--muted); font-size:13px; }

/* ---------------------------------------------------------------- chart */
.bars { display:flex; align-items:flex-end; gap:8px; height:190px; padding-top:10px; }
.bar { flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:6px; font-size:11px; color:var(--muted); height:100%; justify-content:flex-end; }
.bar i { display:block; width:100%; max-width:34px; border-radius:9px 9px 4px 4px; min-height:3px; background:var(--grad);
         transform-origin:bottom; animation:grow .9s cubic-bezier(.2,.8,.2,1) both; box-shadow:0 6px 16px rgba(61,123,255,.25); }
.bar:hover i { filter:brightness(1.15); }
.bar b { font-size:11px; color:var(--ink); }
@media (max-width: 520px) {
  .bars { gap:3px; height:160px; } .bar { font-size:9px; }
  .bar:nth-child(even) span { visibility:hidden; }
}
.meter { height:8px; background:var(--bg-2); border-radius:99px; overflow:hidden; min-width:90px; }
.meter i { display:block; height:100%; background:var(--grad); border-radius:99px; transform-origin:left; animation:growx 1s cubic-bezier(.2,.8,.2,1) both; }
[dir="rtl"] .meter i { transform-origin:right; }

/* ---------------------------------------------------------------- forms */
form.filters { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
input, select, button, textarea { font:inherit; padding:10px 13px; border-radius:11px; border:1px solid var(--line);
                                  background:var(--card); color:var(--ink); transition:border-color .2s, box-shadow .2s, transform .15s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft); }
form.filters input { flex:1; min-width:200px; }
button { position:relative; overflow:hidden; background:var(--grad); color:#fff; border:none; cursor:pointer; font-weight:700;
         box-shadow:0 6px 18px rgba(61,123,255,.3); }
button::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
                transform:translateX(-120%); transition:transform .7s; }
button:hover::after { transform:translateX(120%); }
button:hover { transform:translateY(-1px); } button:active { transform:translateY(1px) scale(.98); }
button.secondary { background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:none; }
button.danger { background:linear-gradient(135deg, #ef4444, #f97316); box-shadow:0 6px 18px rgba(239,68,68,.3); }
.form { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:12px 16px; }
.form label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); font-weight:500; }
.form label.check { flex-direction:row; align-items:center; gap:9px; color:var(--ink); }
.form label.check input { width:18px; height:18px; accent-color:var(--accent); }
.form .wide { grid-column:1/-1; }
.actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
form.inline { display:inline; }

/* ---------------------------------------------------------------- misc */
.flash, .error { padding:13px 16px; border-radius:13px; margin-bottom:16px; font-weight:600; display:flex; gap:10px; align-items:center;
                 animation:toast .5s cubic-bezier(.2,.8,.2,1) both; }
.flash { background:rgba(16,185,129,.12); color:var(--good); border:1px solid rgba(16,185,129,.3); }
.error { background:rgba(239,68,68,.1); color:var(--bad); border:1px solid rgba(239,68,68,.3); }
.split { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:16px; }
dl.kv { display:grid; grid-template-columns:max-content 1fr; gap:9px 16px; margin:0; font-size:14px; }
dl.kv dt { color:var(--muted); } dl.kv dd { margin:0; overflow-wrap:anywhere; font-weight:500; }
code.pw { font-size:20px; background:var(--bg-2); padding:8px 14px; border-radius:10px; user-select:all; letter-spacing:.04em; }
.center { max-width:480px; margin:70px auto; text-align:center; }
.hero { position:relative; overflow:hidden; border-radius:22px; padding:26px 28px; margin-bottom:22px; color:#fff;
        background:var(--grad-navy); box-shadow:var(--shadow-lift); }
.hero h1 { color:#fff; margin:0 0 6px; }
.hero p { margin:0; color:#a9bce8; }
.hero .mark { position:absolute; inset-inline-end:18px; inset-block-start:50%; width:150px; height:150px; margin-top:-75px;
              opacity:.14; animation:float 7s ease-in-out infinite; }
.hero::before { content:""; position:absolute; width:420px; height:420px; inset-block-start:-200px; inset-inline-start:-120px;
                background:radial-gradient(circle, rgba(61,123,255,.45), transparent 60%); animation:drift 12s ease-in-out infinite alternate; }
.hero > * { position:relative; }
.hero .live { background:rgba(16,185,129,.18); }

/* entrance animation: everything rises in, one after another */
.rise > * { animation:rise .6s cubic-bezier(.2,.8,.2,1) both; }
.rise > *:nth-child(2) { animation-delay:.05s } .rise > *:nth-child(3) { animation-delay:.1s }
.rise > *:nth-child(4) { animation-delay:.15s } .rise > *:nth-child(5) { animation-delay:.2s }
.rise > *:nth-child(6) { animation-delay:.25s } .rise > *:nth-child(7) { animation-delay:.3s }
.rise > *:nth-child(8) { animation-delay:.35s } .rise > *:nth-child(9) { animation-delay:.4s }
.rise > *:nth-child(n+10) { animation-delay:.45s }

@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes grow { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes growx { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes float { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-7px) rotate(-2deg); } }
@keyframes drift { from { transform:translate(0,0) scale(1); } to { transform:translate(40px,30px) scale(1.15); } }
@keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(16,185,129,.6); } 70% { box-shadow:0 0 0 9px rgba(16,185,129,0); } 100% { box-shadow:0 0 0 0 rgba(16,185,129,0); } }
@keyframes toast { from { opacity:0; transform:translateY(-10px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------------------------------------------------------------- login */
.auth { min-height:100vh; display:grid; place-items:center; padding:24px 16px; position:relative; overflow:hidden;
        background:radial-gradient(1200px 600px at 80% -10%, #13328a 0%, transparent 60%),
                   radial-gradient(900px 500px at -10% 110%, #0e4a7a 0%, transparent 60%), var(--navy-950); }
.auth .blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; animation:drift 16s ease-in-out infinite alternate; }
.auth .b1 { width:420px; height:420px; background:#3d7bff; inset-block-start:-140px; inset-inline-start:-120px; }
.auth .b2 { width:360px; height:360px; background:#22d3ee; inset-block-end:-140px; inset-inline-end:-100px; animation-duration:20s; opacity:.35; }
.auth .road { position:absolute; inset:0; background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 46px);
              animation:road 6s linear infinite; }
@keyframes road { to { background-position:200px 0; } }
.auth-card { position:relative; width:100%; max-width:400px; padding:34px 28px 26px; border-radius:24px; color:#fff;
             background:rgba(10,24,62,.55); border:1px solid rgba(140,170,255,.18); backdrop-filter:blur(18px);
             box-shadow:0 30px 80px rgba(0,0,0,.45); animation:rise .8s cubic-bezier(.2,.8,.2,1) both; text-align:center; }
.auth-card .logo { width:86px; height:86px; margin:0 auto 14px; display:block; filter:drop-shadow(0 10px 26px rgba(61,123,255,.7));
                   animation:float 5s ease-in-out infinite; }
.auth-card h1 { justify-content:center; color:#fff; font-size:22px; letter-spacing:.08em; margin:0 0 4px; }
.auth-card p { color:#9fb4e6; margin:0 0 22px; font-size:14px; }
.auth-card .form { text-align:start; grid-template-columns:1fr; }
.auth-card label { color:#b8c7ee; }
.auth-card input { background:rgba(255,255,255,.06); border-color:rgba(160,185,255,.22); color:#fff; padding:12px 14px; }
.auth-card input:focus { border-color:var(--accent-2); box-shadow:0 0 0 4px rgba(34,211,238,.18); }
.auth-card button { padding:13px; font-size:15px; }
.auth-card .muted { color:#8fa6dd; margin-top:16px; }
.auth-card .error { text-align:start; }
.lang { position:absolute; inset-block-start:16px; inset-inline-end:16px; color:#c3d0f2; font-size:13px; text-decoration:none;
        padding:6px 12px; border:1px solid rgba(160,185,255,.25); border-radius:99px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* documents, avatars, small headings */
img.doc { display:block; max-width:100%; max-height:280px; border-radius:12px; border:1px solid var(--line); margin:6px 0 14px;
          box-shadow:var(--shadow); transition:transform .3s; cursor:zoom-in; }
img.doc:hover { transform:scale(1.02); }
.av-lg { width:42px; height:42px; border-radius:50%; background:var(--grad); display:grid; place-items:center; color:#fff;
         font-weight:800; text-transform:uppercase; font-size:18px; flex:none; }
h3 { font-size:15px; margin:18px 0 10px; }
textarea { width:100%; resize:vertical; }

/* icon sizes inside buttons, headings and messages */
button svg { width:17px; height:17px; vertical-align:-3px; margin-inline-end:4px; }
h1 > svg { width:26px; height:26px; color:var(--accent); flex:none; }
.flash svg, .error svg { width:20px; height:20px; flex:none; }

/* phones: each area row becomes a small card (name on top, then price, active, save) */
@media (max-width: 600px) {
  table.stack tr:first-child { display:none; }
  table.stack tr { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px; border-bottom:1px solid var(--line); }
  table.stack td { border:none; padding:0; white-space:normal; }
  table.stack td:first-child { color:var(--muted); width:24px; }
  table.stack td:nth-child(2) { flex:1 1 70%; }
  table.stack td:nth-child(2) input { width:100%; }
  table.stack td:nth-child(3) { flex:1 1 40%; }
  table.stack td:nth-child(3) input { width:100% !important; }
  table.stack td:nth-child(4) { flex:1 1 100%; }
  table.stack td:nth-child(4) input { width:100% !important; }
}

/* approvals: one card per person */
.cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; margin-bottom:22px; }
.approval-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; font-size:16px; }
.approval .actions { align-items:center; }
form.inline.grow { display:flex; gap:8px; flex:1 1 100%; }
form.inline.grow input { flex:1; min-width:0; }
a.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border-radius:12px; font-weight:700;
  text-decoration:none; background:var(--card); color:var(--ink); border:1px solid var(--line); }
@media (max-width: 600px) { .cards { grid-template-columns:1fr; } }

/* chat */
.chat-list { padding:6px; }
.chat-row { display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; color:inherit; text-decoration:none; }
.chat-row:hover { background:var(--accent-soft); }
.chat-row .who { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.chat-row .who small { color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-row.unread .who b { color:var(--accent); }
.chat-row .meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; color:var(--muted); }
.chat-row .av, .chat-head .av { width:40px; height:40px; flex:none; border-radius:50%; background:var(--grad); color:#fff;
  display:grid; place-items:center; font-weight:700; }
.badge { background:var(--bad); color:#fff; font-size:11px; padding:1px 7px; border-radius:99px; font-weight:700; }
.chat-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.chat-head .who { flex:1; display:flex; flex-direction:column; gap:3px; font-size:16px; }
.chat-head .back { font-size:30px; text-decoration:none; line-height:1; padding:0 4px; }
[dir=rtl] .chat-head .back { transform:scaleX(-1); }
.chat { display:flex; flex-direction:column; gap:8px; height:min(60vh, 560px); overflow-y:auto; padding:14px; }
.chat .empty { margin:auto; text-align:center; }
.bubble { max-width:78%; padding:9px 13px; border-radius:16px; line-height:1.5; animation:pop .2s ease-out; }
.bubble .text { white-space:pre-wrap; overflow-wrap:anywhere; }
.bubble .when { font-size:11px; opacity:.7; margin-top:3px; }
.bubble.mine { align-self:flex-end; background:var(--grad); color:#fff; border-end-end-radius:4px; }
.bubble.theirs { align-self:flex-start; background:var(--accent-soft); border-end-start-radius:4px; }
@keyframes pop { from { transform:scale(.96); opacity:0; } to { transform:none; opacity:1; } }
.chat-send { display:flex; gap:10px; align-items:flex-end; margin-top:12px; }
.chat-send textarea { flex:1; min-height:48px; }
@media (max-width: 600px) { .chat { height:58vh; } .bubble { max-width:88%; } }
a.btn svg { width:17px; height:17px; }

/* every number on the overview opens its page */
a.card.kpi.link { text-decoration:none; color:inherit; cursor:pointer; transition:transform .15s, border-color .2s, box-shadow .2s; }
a.card.kpi.link:hover { transform:translateY(-2px); border-color:var(--accent); }
a.card.kpi.link:active { transform:scale(.98); }
.tabs { display:flex; gap:8px; margin:0 0 12px; flex-wrap:wrap; }
.tabs a { padding:8px 14px; border-radius:99px; border:1px solid var(--line); background:var(--card); color:var(--ink);
  text-decoration:none; font-weight:600; font-size:14px; }
.tabs a.on { background:var(--grad); color:#fff; border-color:transparent; }
.bubble .who-line { font-size:11px; font-weight:700; opacity:.8; margin-bottom:2px; }
.bubble.driver { align-self:flex-start; background:rgba(16,185,129,.14); border-end-start-radius:4px; }
.chat.three .bubble.theirs { align-self:flex-end; border-end-end-radius:4px; border-end-start-radius:16px; }
.chat.three .bubble.mine { align-self:center; max-width:86%; background:linear-gradient(135deg, #f59e0b, #f97316); }