:root{--teal:#0f766e;--teal-dark:#115e59;--accent:#ff4961;--bg:#eef3f3;--card:#fff;--text:#16302e;--muted:#64748b;--border:#dbe7e6}
*{box-sizing:border-box}body{margin:0;font-family:"Hind Siliguri",system-ui,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--teal)}button{cursor:pointer;font-family:inherit}
.topbar{position:sticky;top:0;z-index:20;background:var(--teal);color:#fff;display:flex;align-items:center;gap:12px;padding:10px 16px}
.logo{font-weight:800;font-size:20px}.logo small{display:block;font-size:11px;opacity:.85;font-weight:400}
.spacer{flex:1}.pill{background:#fff;color:var(--teal-dark);border:0;border-radius:999px;padding:7px 14px;font-weight:700}
.pill.accent{background:var(--accent);color:#fff}
.layout{display:flex;min-height:calc(100vh - 56px)}
.sidebar{width:260px;background:#fff;border-right:1px solid var(--border);padding:12px;position:sticky;top:56px;height:calc(100vh - 56px);overflow:auto}
.sidebar h3{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:18px 8px 6px}
.sidebar a{display:block;padding:8px 10px;border-radius:8px;color:var(--text);text-decoration:none}
.sidebar a:hover,.sidebar a.active{background:#e6f4f2;color:var(--teal-dark);font-weight:700}
.main{flex:1;padding:20px;max-width:1100px}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.stat{font-size:28px;font-weight:800}.muted{color:var(--muted);font-size:14px}
.notice{background:#fef3c7;border:1px solid #fde68a;border-radius:10px;padding:10px 12px}
.closed{background:#fee2e2;border:1px solid #fecaca;border-radius:10px;padding:10px 12px;color:#991b1b;font-weight:700}
label{display:block;font-size:14px;margin:10px 0 4px;font-weight:600}
input,select,textarea{width:100%;padding:10px;border:1px solid var(--border);border-radius:9px;font-family:inherit}
textarea{min-height:90px}
.btn{background:var(--teal);color:#fff;border:0;border-radius:9px;padding:10px 16px;font-weight:700}
.btn.accent{background:var(--accent)} .btn.ghost{background:#fff;color:var(--teal);border:1px solid var(--teal)}
.opt{display:inline-block;border:1px solid var(--border);border-radius:10px;padding:8px 12px;margin:4px;cursor:pointer;background:#fff}
.opt.sel{border-color:var(--accent);background:#fff1f2;font-weight:700}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{border-bottom:1px solid var(--border);padding:8px;text-align:left}
.modal-back{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.modal-back.open{display:flex}.modal{background:#fff;border-radius:14px;padding:20px;max-width:560px;width:100%;max-height:90vh;overflow:auto}
.swatch{width:32px;height:32px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #ccc;display:inline-block;margin:3px;cursor:pointer}
body.dark{background:#0f172a;color:#e2e8f0}body.dark .card,body.dark .sidebar{background:#1e293b;color:#e2e8f0;border-color:#334155}body.dark .sidebar a{color:#e2e8f0}body.dark input,body.dark select,body.dark textarea{background:#0f172a;color:#e2e8f0;border-color:#334155}body.dark .modal{background:#1e293b;color:#e2e8f0}
@media(max-width:800px){.sidebar{position:fixed;left:-280px;z-index:40;top:56px;transition:.2s}.sidebar.open{left:0}.main{padding:12px}}

.sidebar a{display:flex;align-items:center;gap:10px}
.card-ico{font-size:28px;margin-bottom:6px}
.main{width:100%}
.card{overflow-x:auto}
table{min-width:520px}
.topbar{flex-wrap:wrap}
@media(max-width:800px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.logo{font-size:17px}.pill{padding:6px 10px;font-size:13px}table{font-size:13px}input,select,textarea{font-size:16px}}
@media(max-width:520px){.grid{grid-template-columns:1fr}.main{padding:10px}.card{padding:12px}.topbar{gap:8px;padding:8px 10px}.logo{font-size:16px}.sidebar{width:270px}}

.ico{width:24px;height:24px;min-width:24px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#334155;font-size:0}
.ico svg{width:22px;height:22px}
.sidebar a.active .ico{color:var(--teal-dark)}
.sidebar a{padding:9px 10px}
.card-ico{display:inline-flex;align-items:center;justify-content:center;color:#fff}
.card-ico svg{width:28px;height:28px}
.svc-card{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.04)}
.svc-head{color:#fff;padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.svc-head b{font-size:16px}
.svc-body{display:flex;justify-content:space-between;gap:8px;padding:12px 14px;font-size:14px}
.svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
body.dark .ico{color:#e2e8f0}
body.dark .sidebar a.active .ico{color:#5eead4}
@media(max-width:800px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.svc-grid{grid-template-columns:1fr}}
/* Dashboard service-card header icons: large white, reference-matching.
   Bug fixed: the header icon was nested as .card-ico > .ico, and .ico set
   color:#334155 (dark) and 22px, overriding .card-ico's white/28px intent.
   These higher-specificity rules force white + large size on coloured headers only.
   Sidebar icons (.ico, 22px) and white-background cards are NOT changed. */
.svc-head{padding:22px 12px 20px;gap:10px}
.svc-head .card-ico{color:#fff}
.svc-head .card-ico .ico{width:56px;height:56px;min-width:56px;color:#fff}
.svc-head .card-ico .ico svg{width:52px;height:52px;stroke:#fff;stroke-width:2.2}
body.dark .svc-head .card-ico,body.dark .svc-head .card-ico .ico,body.dark .svc-head .card-ico .ico svg{color:#fff;stroke:#fff}
@media(max-width:520px){.svc-head{padding:20px 12px 18px}.svc-head .card-ico .ico{width:44px;height:44px;min-width:44px}.svc-head .card-ico .ico svg{width:42px;height:42px}}

/* Orders Logs — reference design, scoped so it does NOT inherit the
   large 52px dashboard service-card icons. Heading icons stay small/dark,
   status circles stay moderate (34px circle, ~19px white glyph). */
.orders-logs{display:flex;flex-direction:column;gap:20px}
.ol-section{min-width:0}
.ol-head{display:flex;align-items:center;gap:9px;margin:0 0 10px;font-size:17px;line-height:1.3}
.ol-head .ico{width:24px;height:24px;min-width:24px;color:#1f2937}
.ol-head .ico svg{width:22px;height:22px;stroke:currentColor}
body.dark .ol-head .ico{color:#e2e8f0}
.ol-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ol-tile{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border-radius:12px;border:1px solid;min-height:56px}
.ol-circle{width:34px;height:34px;min-width:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.ol-circle svg{width:19px;height:19px}
.ol-label{flex:1;min-width:0;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-count{font-weight:800;font-size:16px}
.ol-pending{background:#fff7ed;border-color:#fdba74;color:#ea580c}
.ol-pending .ol-circle{background:#f97316}
.ol-received{background:#eff6ff;border-color:#93c5fd;color:#2563eb}
.ol-received .ol-circle{background:#3b82f6}
.ol-completed{background:#f0fdf4;border-color:#86efac;color:#16a34a}
.ol-completed .ol-circle{background:#22c55e}
.ol-refunded{background:#fef2f2;border-color:#fca5a5;color:#dc2626}
.ol-refunded .ol-circle{background:#ef4444}
body.dark .ol-pending{background:#431407;border-color:#9a3412;color:#fdba74}
body.dark .ol-received{background:#172554;border-color:#1d4ed8;color:#93c5fd}
body.dark .ol-completed{background:#052e16;border-color:#15803d;color:#86efac}
body.dark .ol-refunded{background:#450a0a;border-color:#991b1b;color:#fca5a5}
@media(max-width:520px){.ol-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ol-tile{padding:8px 10px;gap:8px;min-height:52px}.ol-circle{width:32px;height:32px;min-width:32px}.ol-circle svg{width:18px;height:18px}.ol-label{font-size:14px}.ol-count{font-size:15px}.ol-head{font-size:16px}}

/* Quick Access — reference design: white card, teal lightning heading,
   2x2 white tiles with light border, icon on top, label below.
   Tile icon/label colours match: recharge teal, chat green,
   report orange, profile blue. Compact, NOT oversized. */
.qa-card{padding:18px}
.qa-head{display:flex;align-items:center;gap:8px;color:#0f766e;font-size:19px;margin:0 0 16px}
.qa-bolt{display:inline-flex;width:26px;height:26px}
.qa-bolt svg{width:26px;height:26px}
.qa-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.qa-tile{display:flex;flex-direction:column;align-items:center;gap:10px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px 10px 18px;text-decoration:none;color:inherit;cursor:pointer;font-family:inherit;font-size:inherit}
.qa-tile:hover{border-color:#cbd5e1}
.qa-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px}
.qa-icon svg{width:38px;height:38px}
.qa-dollar{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:#0f766e;color:#fff;border-radius:8px;font-size:22px;font-weight:800}
.qa-label{font-size:17px;font-weight:700}
.qa-recharge .qa-label{color:#0f766e}
.qa-chat .qa-label{color:#22c55e}
.qa-report .qa-label{color:#f59e0b}
.qa-profile .qa-label{color:#0284c7}
body.dark .qa-tile{background:#1e293b;border-color:#334155}
@media(max-width:520px){.qa-grid{gap:10px}.qa-tile{padding:16px 8px 14px}.qa-icon{width:36px;height:36px}.qa-icon svg{width:34px;height:34px}.qa-label{font-size:16px}}

/* Homepage top redesign — reference style, scoped to new classes only.
   Old dashboard cards (52px white), Orders Logs (.ol-* 34px) and
   Quick Access (.qa-*) are NOT touched by these rules. */
.topbar-new{background:#fff;color:#16302e;box-shadow:0 1px 0 #e2e8f0}
.menu-btn{background:#e6f4f2;color:#0f766e;border:0;border-radius:12px;padding:9px 14px;font-weight:800;font-size:15px}
.logo-new{display:flex;align-items:center;gap:10px;min-width:0}
.logo-mark{width:44px;height:44px;min-width:44px;display:inline-flex}
.logo-mark svg{width:44px;height:44px}
.logo-text{font-weight:800;font-size:20px;line-height:1.1}
.logo-text small{display:block;font-size:12px;color:#0f766e;font-weight:600}
.dark-pill{background:#064e3b;color:#fff;border:0;border-radius:999px;padding:8px 12px;font-weight:700;display:inline-flex;align-items:center;gap:8px}
.dark-pill .moon{font-size:16px}
.dark-pill .switch{width:36px;height:20px;border-radius:999px;background:rgba(255,255,255,.25);display:inline-flex;align-items:center;padding:2px}
.dark-pill .knob{width:16px;height:16px;border-radius:50%;background:#fff;transition:.2s}
body.dark .dark-pill .knob{transform:translateX(16px)}
body.dark .topbar-new{background:#0f172a;color:#e2e8f0;box-shadow:0 1px 0 #334155}
body.dark .menu-btn{background:#134e4a;color:#5eead4}
body.dark .logo-text small{color:#5eead4}
.profile-card{background:linear-gradient(135deg,#047857 0%,#065f46 55%,#064e3b 100%);color:#fff;border-radius:22px;padding:22px;margin-bottom:16px;box-shadow:0 8px 24px rgba(6,95,70,.25);overflow:hidden}
.profile-row{display:flex;align-items:center;gap:14px;min-width:0}
.avatar-ph{width:72px;height:72px;min-width:72px;border-radius:18px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);display:inline-flex;align-items:center;justify-content:center}
.avatar-ph svg{width:42px;height:42px}
.profile-info{flex:1;min-width:0}
.profile-name{font-size:22px;line-height:1.3}
.verified-pill{display:inline-block;background:#22c55e;color:#fff;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:700;margin-left:8px;white-space:nowrap}
.profile-uid{color:rgba(255,255,255,.88);margin-top:4px;font-size:15px}
.qr-btn{width:52px;height:52px;min-width:52px;border-radius:14px;background:transparent;border:1px solid rgba(255,255,255,.45);display:inline-flex;align-items:center;justify-content:center}
.qr-btn svg{width:30px;height:30px}
.profile-divider{border:0;border-top:1px solid rgba(255,255,255,.28);margin:18px 0}
.bal-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.bal-label{color:rgba(255,255,255,.88);font-size:15px}
.bal-amount{font-size:42px;font-weight:800;line-height:1.15}
.recharge-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;color:#064e3b;border-radius:999px;padding:10px 18px;font-weight:800;text-decoration:none;white-space:nowrap}
.recharge-plus{width:26px;height:26px;border-radius:50%;background:#16a34a;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1}
.wa-card{display:flex;align-items:center;gap:14px;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:18px;padding:16px;margin-bottom:16px;text-decoration:none;color:#16302e;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.wa-icon{width:56px;height:56px;min-width:56px;border-radius:16px;background:#22c55e;display:inline-flex;align-items:center;justify-content:center}
.wa-icon svg{width:34px;height:34px}
.wa-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.wa-text b{font-size:18px}
.wa-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#22c55e;margin-left:4px}
.wa-sub{color:#475569;font-size:14px}
.wa-arrow{width:44px;height:44px;min-width:44px;border-radius:50%;background:#fff;color:#0f766e;display:inline-flex;align-items:center;justify-content:center;font-size:22px;border:1px solid #e2e8f0}
body.dark .wa-card{background:#052e16;border-color:#166534;color:#e2e8f0}
body.dark .wa-sub{color:#a7f3d0}
body.dark .wa-arrow{background:#1e293b;border-color:#334155;color:#5eead4}
.need-head{display:flex;align-items:center;gap:10px;margin:0 2px 12px}
.need-dot{width:12px;height:12px;min-width:12px;border-radius:50%;background:#16a34a}
.need-head h3{flex:1;min-width:0;margin:0;font-size:20px;line-height:1.3}
.all-services{background:transparent;border:0;color:#0f766e;font-weight:800;font-size:15px;white-space:nowrap;cursor:pointer}
body.dark .all-services{color:#5eead4}
@media(max-width:520px){
 .topbar-new{gap:8px;padding:8px 10px}
 .menu-btn{padding:8px 10px}
 .logo-mark,.logo-mark svg{width:38px;height:38px}
 .logo-text{font-size:17px}
 .dark-pill{padding:7px 10px;font-size:13px}
 .profile-card{padding:18px 16px;border-radius:18px}
 .avatar-ph{width:60px;height:60px;min-width:60px;border-radius:14px}
 .avatar-ph svg{width:34px;height:34px}
 .profile-name{font-size:19px}
 .qr-btn{width:46px;height:46px;min-width:46px}
 .bal-amount{font-size:34px}
 .recharge-pill{width:100%;justify-content:center}
 .wa-card{padding:14px;gap:10px}
 .wa-icon{width:50px;height:50px;min-width:50px}
 .need-head h3{font-size:18px}
}

/* Single-row header fix: the dark-mode toggle already lives in the top
   header row (right side, after .spacer) — there is NO second header row
   in the markup. On narrow screens the old .topbar{flex-wrap:wrap} let
   the pill wrap onto a second row, leaving a white band above the
   profile card. These rules force one row at every width, compact the
   pill on small screens, and collapse the old 56px header offset to the
   real header height so the profile card sits directly under it. */
.topbar-new{flex-wrap:nowrap}
.topbar-new .spacer{flex:1 1 auto;min-width:0}
.logo-new{flex-shrink:1;min-width:0}
.logo-text{white-space:nowrap}
.dark-pill{flex-shrink:0;min-height:44px}
.layout{min-height:calc(100vh - 64px)}
.sidebar{top:64px;height:calc(100vh - 64px)}
@media(max-width:520px){
 .topbar-new{flex-wrap:nowrap;gap:8px;padding:8px 10px}
 .menu-btn{flex-shrink:0;padding:8px 10px;font-size:14px}
 .logo-mark,.logo-mark svg{width:36px;height:36px}
 .logo-text{font-size:16px}
 .dark-pill{flex-shrink:0;gap:6px;padding:7px 8px;font-size:13px}
 .layout{min-height:calc(100vh - 60px)}
 .sidebar{top:60px;height:calc(100vh - 60px)}
}
@media(max-width:400px){
 /* Very narrow screens only: icon-only menu button and moon+switch
    pill (label hidden) so the row never wraps or overlaps the logo.
    The button keeps aria-label="মেনু" and the pill keeps its full
    toggle behaviour; the label returns at wider widths. */
 .topbar-new{gap:6px;padding:8px 8px}
 .menu-btn{padding:8px 10px}
 .menu-btn span{display:none}
 .logo-mark,.logo-mark svg{width:34px;height:34px}
 .logo-text{font-size:16px}
 .logo-text small{font-size:11px}
 #darkLabel{display:none}
 .dark-pill{padding:8px 10px}
}

/* Profile card — narrower sideways, NOT shorter.
   User feedback: too much empty space inside, especially on the right.
   Only horizontal dimensions shrink: side padding, row gap, card max-width,
   Verified pill and UID font. Vertical padding, name, avatar, balance
   amount and recharge button are deliberately unchanged. */
.profile-card{max-width:780px;margin-left:auto;margin-right:auto;padding-left:18px;padding-right:18px}
.profile-row{gap:10px}
.verified-pill{font-size:12px;padding:3px 8px}
.profile-uid{font-size:13px;white-space:nowrap}
.bal-row{gap:12px}
@media(max-width:800px){
 .profile-card{max-width:680px}
}
@media(max-width:520px){
 .profile-card{max-width:none;margin-left:6px;margin-right:6px;padding-left:14px;padding-right:14px}
 .profile-row{gap:8px}
 .verified-pill{font-size:11px;padding:2px 7px}
 .profile-uid{font-size:12px}
}

/* Compact profile card + smaller dark toggle (user-marked screenshot).
   Profile info must fit in a tighter top area, balance follows at once,
   recharge follows at once, and the next section moves up. Nothing is
   clipped: balance amount and recharge button stay fully visible, and
   recharge stays at least 44px tall. Dark toggle stays in the single
   top header row, right side, only smaller. */
.profile-card{padding-top:14px;padding-bottom:14px;margin-bottom:10px}
.profile-row{gap:10px}
.avatar-ph{width:64px;height:64px;min-width:64px;border-radius:16px}
.avatar-ph svg{width:36px;height:36px}
.profile-name{font-size:20px;line-height:1.25}
.profile-uid{margin-top:2px}
.qr-btn{width:46px;height:46px;min-width:46px;border-radius:12px}
.qr-btn svg{width:26px;height:26px}
.profile-divider{margin:10px 0}
.bal-row{gap:10px}
.bal-label{font-size:13px}
.bal-amount{font-size:36px;line-height:1.1}
.recharge-pill{padding:9px 16px;min-height:44px}
.recharge-plus{width:24px;height:24px;font-size:18px}
.wa-card{margin-top:0}
.main>*:first-child{margin-top:0}
/* Smaller dark-mode toggle, still in the single top row on the right. */
.dark-pill{padding:6px 10px;font-size:12px;gap:6px;min-height:40px}
.dark-pill .moon{font-size:14px}
.dark-pill .switch{width:30px;height:18px}
.dark-pill .knob{width:14px;height:14px}
body.dark .dark-pill .knob{transform:translateX(12px)}
@media(max-width:520px){
 .profile-card{padding-top:12px;padding-bottom:12px;margin-bottom:8px}
 .avatar-ph{width:56px;height:56px;min-width:56px;border-radius:13px}
 .avatar-ph svg{width:32px;height:32px}
 .profile-name{font-size:18px}
 .qr-btn{width:42px;height:42px;min-width:42px}
 .qr-btn svg{width:24px;height:24px}
 .profile-divider{margin:8px 0}
 .bal-label{font-size:12px}
 .bal-amount{font-size:30px}
 .recharge-pill{min-height:44px}
 .dark-pill{padding:6px 8px;font-size:12px;min-height:40px}
}
@media(max-width:400px){
 .dark-pill{padding:6px 8px}
}

/* Tiny header dark-mode switch — user-supplied markup, as small as possible.
   Visual switch: 34px wide x 19px tall on desktop AND mobile (no larger on
   mobile). The old dark-pill (text + padding) is gone from the markup, so
   the switch is far smaller than the previous 30x18px track + pill.
   Part 1 is the sliding knob; parts 2-11 are collapsed at this tiny size
   for legibility (structure kept in markup). Track colour changes with
   state and with light/dark header, so the switch stays visible in both. */
.topbar-new label.switch{display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer;padding:7px 5px;margin:0;line-height:0}
.topbar-new .switch__input{position:absolute;opacity:0;width:1px;height:1px;overflow:hidden}
.topbar-new .switch__icon{position:relative;display:inline-block;width:34px;height:19px;min-width:34px;border-radius:999px;background:#064e3b;transition:background .2s;overflow:hidden}
.topbar-new .switch__icon-part{position:absolute;display:block;pointer-events:none}
.topbar-new .switch__icon-part--1{left:2px;top:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:transform .2s}
.topbar-new .switch__icon-part--2,.topbar-new .switch__icon-part--3,.topbar-new .switch__icon-part--4,.topbar-new .switch__icon-part--5,.topbar-new .switch__icon-part--6,.topbar-new .switch__icon-part--7,.topbar-new .switch__icon-part--8,.topbar-new .switch__icon-part--9,.topbar-new .switch__icon-part--10,.topbar-new .switch__icon-part--11{width:0;height:0;opacity:0}
.topbar-new .switch__input:checked + .switch__icon{background:#0f766e}
.topbar-new .switch__input:checked + .switch__icon .switch__icon-part--1{transform:translateX(15px)}
.topbar-new .switch__input:focus-visible + .switch__icon{outline:2px solid #0f766e;outline-offset:2px}
.topbar-new .switch__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.dark .topbar-new .switch__icon{background:#334155}
body.dark .topbar-new .switch__input:checked + .switch__icon{background:#14b8a6}
body.dark .topbar-new .switch__input:focus-visible + .switch__icon{outline-color:#5eead4}

/* Profile photo upload — local-only (no server). Homepage avatar and
   Profile-page preview share .avatar-ph; a saved photo fills the box
   (object-fit:cover, never stretched) instead of the generic icon. */
.avatar-ph{overflow:hidden}
.avatar-ph.avatar-photo{padding:0}
.avatar-ph img{width:100%;height:100%;object-fit:cover;display:block}
.photo-upload{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-bottom:6px}
.photo-preview{width:96px;height:96px;min-width:96px;border-radius:18px}
.photo-preview svg{width:52px;height:52px}
.photo-preview img{width:100%;height:100%;object-fit:cover;display:block}
.photo-upload-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start;flex:1;min-width:200px}
.photo-upload-actions label.btn{display:inline-block}
.photo-upload-actions .btn{margin:0}
.photo-upload-actions p{margin:2px 0}
.btn:disabled{opacity:.5;cursor:not-allowed}
body.dark .photo-upload-actions .btn.ghost{background:#1e293b;color:#5eead4;border-color:#334155}
@media(max-width:520px){.photo-preview{width:80px;height:80px;min-width:80px}.photo-preview svg{width:44px;height:44px}}

/* BUG FIX — Logout visibility (desktop + mobile).
   Cause: the sidebar was one long scrollable list and Logout was its
   very last item, so it sat below the fold on desktop and was effectively
   unreachable in the mobile drawer. Fix: the sidebar is now a flex
   column — the nav list scrolls in its own area (.sidebar-scroll) and a
   pinned Logout footer (.sidebar-logout, same #/logout action as the
   list item) always stays visible at the sidebar/drawer bottom.
   Works with the existing fixed mobile drawer and sticky desktop sidebar. */
.sidebar{display:flex;flex-direction:column;overflow:hidden}
.sidebar-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
.sidebar-logout{flex:none;border-top:1px solid var(--border);padding:10px 0 2px;background:transparent}
.sidebar-logout a{font-weight:700;color:#b91c1c}
.sidebar-logout a:hover{background:#fef2f2;color:#991b1b}
body.dark .sidebar-logout{border-top-color:#334155}
body.dark .sidebar-logout a{color:#fca5a5}
body.dark .sidebar-logout a:hover{background:#450a0a;color:#fecaca}