/* Base theme + shared UI components (auth pages, cards, buttons, fields). */
:root {
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
    --sal: env(safe-area-inset-left, 0px);
    --sar: env(safe-area-inset-right, 0px);
}
[x-cloak] { display: none !important; }
:root, [data-theme="sanctum-dark"] {
    --bg:#07060b; --bg-elev:#0e0c14; --bg-elev2:#17141f;
    --text:#e6e1e8; --text-dim:#9a92a8;
    --accent:#7c3aed; --accent-2:#db2777;
    --border:#241f30; --own:#2a1548; --danger:#ef4444;
}
[data-theme="dark"] {
    --bg:#050505; --bg-elev:#0c0c0c; --bg-elev2:#161616;
    --text:#ececec; --text-dim:#8f8f8f;
    --accent:#7c3aed; --accent-2:#db2777;
    --border:#222222; --own:#2a1548; --danger:#f28b82;
}
[data-theme="dark"], [data-theme="sanctum-dark"] { color-scheme: dark; }
[data-theme="light"] {
    --bg:#f4f5f8; --bg-elev:#ffffff; --bg-elev2:#eef0f5;
    --text:#1c1f27; --text-dim:#5b6472;
    --accent:#7c3aed; --accent-2:#db2777;
    --border:#dde1ea; --own:#e7ddff; --danger:#dc2626;
}
* { box-sizing:border-box; }
html,body { height:100%; margin:0; }
html { font-size:15px; background:var(--bg); }
body {
    display:flex; flex-direction:column;
    position:fixed; top:0; left:0; right:0; width:100%;
    height:var(--shell-height, 100dvh); max-height:var(--shell-height, 100dvh);
    overflow:hidden;
    background:var(--bg); color:var(--text);
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;
}
.sa-probe {
    position:fixed; left:0; top:0; width:0; height:0; overflow:hidden; visibility:hidden; pointer-events:none;
    padding-top:env(safe-area-inset-top, 0px);
    padding-right:env(safe-area-inset-right, 0px);
    padding-bottom:env(safe-area-inset-bottom, 0px);
    padding-left:env(safe-area-inset-left, 0px);
}
/* Insets are applied as padding on the app, not as painted header/footer bands.
   A dedicated top strip reads as a black header after login on the home-screen app. */
.os-chrome { flex:none; height:0; min-height:0; overflow:hidden; background:transparent; }
.os-chrome-top, .os-chrome-bottom { height:0; min-height:0; }
.shell-main { flex:1 1 auto; min-height:0; min-width:0; position:relative; overflow:hidden; display:flex; flex-direction:column; }
a { color:var(--accent); }
.brand { display:flex; align-items:center; gap:.6rem; font-weight:700; }
.brand img { width:34px; height:34px; border-radius:8px; }
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
    background:linear-gradient(135deg,var(--accent),var(--accent-2));
    color:#fff; border:0; border-radius:10px; padding:.7rem 1rem;
    font-weight:600; cursor:pointer; text-decoration:none; font-size:.95rem;
}
.btn:hover { filter:brightness(1.08); }
.btn-ghost { background:var(--bg-elev2); color:var(--text); }
.field { margin-bottom:1rem; }
.field label { display:block; font-size:.85rem; color:var(--text-dim); margin-bottom:.35rem; }
.field input {
    width:100%; padding:.7rem .8rem; border-radius:10px;
    border:1px solid var(--border); background:var(--bg-elev2); color:var(--text); font-size:1rem;
}
.field input:focus { outline:2px solid var(--accent); border-color:transparent; }
.flash { background:var(--bg-elev2); border:1px solid var(--border); color:#10b981; border-radius:10px; padding:.65rem .85rem; margin-bottom:1rem; font-size:.9rem; }
.auth-wrap { min-height:100%; display:grid; place-items:center; padding:1.2rem; padding-top:max(1.2rem, var(--sat)); padding-bottom:max(1.2rem, var(--sab)); }
.card {
    width:100%; max-width:400px; background:var(--bg-elev);
    border:1px solid var(--border); border-radius:16px; padding:1.6rem;
    box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.card h1 { font-size:1.35rem; margin:.4rem 0 1.2rem; text-align:center; }
.theme-switch { display:flex; gap:.4rem; justify-content:center; margin-top:1rem; }
.theme-switch button {
    border:1px solid var(--border); background:var(--bg-elev2); color:var(--text-dim);
    border-radius:20px; padding:.3rem .7rem; font-size:.78rem; cursor:pointer;
}
.theme-switch button.active { color:#fff; background:linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent; }
.muted { color:var(--text-dim); }
.center { text-align:center; }

.pwa-help-card ol { margin:.6rem 0 0; padding-left:1.15rem; color:var(--text); font-size:.95rem; line-height:1.5; }
.pwa-help-card li { margin:.4rem 0; }

.hidden-file { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.theme-choices { display:flex; gap:.5rem; flex-wrap:wrap; }
.theme-choice { display:flex; align-items:center; gap:.4rem; background:var(--bg-elev2); border:1px solid var(--border); border-radius:10px; padding:.45rem .8rem; cursor:pointer; }
.shell-main:has(.fb-page) { overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.fb-page {
    flex:0 0 auto; width:100%; max-width:none; margin:0;
    padding:0;
}
.fb-page-inner {
    width:100%; max-width:980px; margin:0 auto;
    padding:0 1rem max(2.8rem, calc(var(--sab) + 1.4rem));
}
.fb-top {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: .75rem;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: .65rem max(1.1rem, var(--sal));
    padding-top: max(.65rem, var(--sat));
    padding-right: max(1.1rem, var(--sar));
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
}
.fb-top-start { flex:1 1 0; min-width:0; display:flex; align-items:center; }
.fb-top-tools { flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:.4rem; }
.fb-top .brand {
    position: absolute; left: 50%; transform: translateX(-50%);
    z-index: 1; color: inherit; text-decoration: none;
    font-size: .95rem; white-space: nowrap; pointer-events: auto;
}
.fb-top .brand img { width: 26px; height: 26px; }
.fb-top .btn-ghost {
    background: color-mix(in srgb, var(--bg-elev2) 72%, transparent);
}
.fb-back-short { display: none; }
.fb-icon-btn {
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    background:var(--bg-elev2); border:1px solid var(--border); color:var(--text);
    border-radius:10px; min-width:40px; min-height:40px; padding:.28rem .55rem;
    cursor:pointer; font-size:1.2rem; line-height:1;
}
.fb-icon-btn:hover { filter:brightness(1.08); }
.fb-badge {
    position:absolute; top:-5px; right:-5px; background:var(--danger); color:#fff;
    font-size:.6rem; min-width:15px; height:15px; border-radius:8px;
    display:grid; place-items:center; padding:0 3px;
}
.fb-notif-wrap, .fb-pm-tool { position:relative; }
.fb-notif-panel {
    position:absolute; top:calc(100% + .4rem); right:0; width:300px; max-width:82vw;
    background:var(--bg-elev); border:1px solid var(--border); border-radius:12px;
    box-shadow:0 16px 44px rgba(0,0,0,.5); z-index:80; overflow:hidden;
}
.fb-notif-head { display:flex; align-items:center; justify-content:space-between; padding:.6rem .8rem; border-bottom:1px solid var(--border); }
.fb-mini { background:transparent; border:0; color:var(--accent); font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; padding:0; }
.fb-notif-list { max-height:340px; overflow-y:auto; }
.fb-notif-item {
    display:flex; gap:.55rem; align-items:flex-start; width:100%; text-align:left;
    padding:.55rem .8rem; cursor:pointer; border:0; border-bottom:1px solid var(--border);
    background:transparent; color:inherit; font:inherit;
}
.fb-notif-item:hover { background:var(--bg-elev2); }
.fb-notif-item.unread { background:color-mix(in srgb, var(--accent) 12%, transparent); }
.fb-notif-ico { font-size:1rem; line-height:1.3; flex:none; }
.fb-notif-body { min-width:0; display:flex; flex-direction:column; }
.fb-notif-text { font-size:.85rem; }
.fb-notif-time { font-size:.7rem; color:var(--text-dim); margin-top:.1rem; }
@media (max-width: 720px) {
    .fb-top { gap: .4rem; }
    .fb-top .brand { font-size: .82rem; }
    .fb-top-tools { gap: .25rem; }
    .fb-top .fb-icon-btn {
        min-width: 30px;
        min-height: 30px;
        padding: .15rem .3rem;
        font-size: .95rem;
        border-radius: 8px;
    }
    .fb-top .fb-back {
        font-size: .72rem;
        padding: .28rem .45rem;
        border-radius: 8px;
        white-space: nowrap;
    }
    .fb-back-long { display: none; }
    .fb-back-short { display: inline; }
}
@media (max-width: 520px) {
    .fb-top .brand img { display: none; }
}
.fb-cover { min-height:180px; border-radius:16px 16px 0 0; background:#2a163f center/cover no-repeat; position:relative; z-index:1; }
.fb-cover-form { position:absolute; right:12px; top:12px; z-index:6; }
.fb-cover-btn { position:relative; overflow:hidden; cursor:pointer; }
.fb-file-hit { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:0; }
.fb-identity { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 16px; padding:0 16px 12px; margin-top:-52px; position:relative; z-index:2; }
.fb-av, .fb-av-wrap label.fb-av { width:128px; height:128px; border-radius:50%; overflow:hidden; background:var(--bg-elev2); display:grid; place-items:center; font-size:2.6rem; font-weight:700; color:var(--accent); border:4px solid var(--bg); cursor:pointer; position:relative; }
.fb-av img { width:100%; height:100%; object-fit:cover; }
.fb-who { flex:1 1 180px; min-width:0; }
.fb-who h1 { display:flex; align-items:center; gap:.5rem; margin:0 0 .2rem; font-size:1.55rem; }
.fb-who .pbadge { width:26px; height:26px; }

.profile-verified-check {
    display:inline-flex;
    width:21px;
    height:21px;
    margin-left:2px;
    color:#1688f8;
    vertical-align:-3px;
    filter:drop-shadow(0 0 5px rgba(22,136,248,.42));
    flex:none;
}

.profile-verified-check svg {
    display:block;
    width:100%;
    height:100%;
    overflow:visible;
}

.profile-verified-check circle {
    fill:currentColor;
    stroke:rgba(255,255,255,.92);
    stroke-width:1;
}

.profile-verified-check path {
    fill:none;
    stroke:#fff;
    stroke-width:2.35;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.fb-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-left:auto; padding-bottom:.4rem; }
.fb-actions .btn.is-liked { border-color: var(--accent); color: var(--accent); }
.fb-tabs { display:flex; gap:.2rem; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:.2rem .4rem; margin-bottom:1rem; }
.fb-tabs button { background:transparent; border:0; color:var(--text-dim); padding:.7rem 1rem; cursor:pointer; border-bottom:3px solid transparent; font-weight:700; }
.fb-tabs button.on { color:var(--text); border-bottom-color:var(--accent); }
.fb-cols { display:flex; align-items:flex-start; gap:1rem; }
.fb-side { width:300px; flex:0 0 300px; }
.fb-feed { flex:1; min-width:0; }
.fb-box { background:var(--bg-elev); border:1px solid var(--border); border-radius:14px; padding:1rem; margin-bottom:1rem; }
.fb-box > h2, .fb-box > h3 { font-size:.85rem; margin:0 0 .6rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:.05em; }
.fb-bio-wrap { margin: 0 0 1rem; }
.fb-bio { margin: 0; padding: .8rem .95rem; border-left: 3px solid var(--accent); background: var(--bg-elev2); border-radius: 0 12px 12px 0; font-style: italic; font-size: .9rem; line-height: 1.55; color: var(--text); }
.fb-bio p { margin: 0 0 .8rem; }
.fb-bio p:last-child { margin: 0; }
.fb-bio.is-clamped { max-height: 8.4em; overflow: hidden; }
.fb-bio-toggle { display: inline-block; margin-top: .45rem; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; }
.fb-intro-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.fb-intro-row { display: flex; align-items: center; gap: .55rem; padding: 0; font-size: .9rem; color: var(--text); line-height: 1.3; }
.fb-intro-ico { width: 1.15rem; flex: none; text-align: center; opacity: .8; }
.fb-intro-flag { width: 18px; height: 12px; object-fit: cover; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px var(--border); }
.fb-lvl { display:block; height:6px; border-radius:99px; background:var(--bg-elev2); overflow:hidden; margin:.1rem 0 .2rem; }
.fb-lvl-fill { display:block; height:100%; background:linear-gradient(90deg,#a78bfa,#7c3aed); }
.fb-info-link { border:0; background:none; padding:0; font:inherit; font-weight:700; font-size:.88rem; color:var(--accent); cursor:pointer; text-align:left; }
.fb-info-link:hover { text-decoration:underline; }
.progress-guide { margin-top:.15rem; }
.progress-guide-intro { margin:0 0 1rem; font-size:.9rem; color:var(--text-dim); line-height:1.45; }
.progress-guide-sec { margin:0 0 1.15rem; }
.progress-guide-sec:last-child { margin-bottom:0; }
.progress-guide-sec h3 { font-size:.95rem; margin:0 0 .35rem; color:var(--text); text-transform:none; letter-spacing:0; }
.progress-guide-lead { margin:0 0 .45rem; font-size:.86rem; color:var(--text-dim); line-height:1.45; }
.progress-guide-sec ul { margin:0; padding-left:1.15rem; }
.progress-guide-sec li { margin:0 0 .38rem; font-size:.88rem; line-height:1.45; }
.ach-grid { display:flex; flex-wrap:wrap; gap:.45rem; }
.ach-badge { position:relative; width:42px; height:42px; }
.ach-img { width:42px; height:42px; display:block; }
.ach-num { position:absolute; right:-2px; bottom:-2px; width:18px; height:18px; }
.fb-whois { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.fb-whois-lead { margin: -.35rem 0 .75rem; font-size: .78rem; }
.fb-whois-dl { margin: 0 0 .85rem; display: flex; flex-direction: column; gap: .45rem; }
.fb-whois-dl > div { display: grid; grid-template-columns: 6.2rem 1fr; gap: .4rem; align-items: start; font-size: .82rem; }
.fb-whois-dl dt { margin: 0; color: var(--text-dim); font-weight: 600; }
.fb-whois-dl dd { margin: 0; min-width: 0; word-break: break-word; }
.fb-whois-dl code { font-size: .8rem; }
.fb-whois-ua { font-size: .75rem; color: var(--text-dim); }
.fb-whois-copy { margin-left: .35rem; padding: .05rem .4rem; font-size: .7rem; font-weight: 700; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-elev2); color: var(--text); cursor: pointer; }
.fb-whois-same { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; }
.fb-whois-same a { font-weight: 700; color: inherit; }
.fb-whois-empty { margin: 0; font-size: .82rem; }
.fb-friend-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.fb-friend-grid-lg { grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); }
.fb-friend-tile { color:inherit; text-decoration:none; min-width:0; }
.fb-friend-tile img, .fb-friend-letter { width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; display:grid; place-items:center; background:var(--bg-elev2); }
.fb-friend-tile span { display:block; font-size:.75rem; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-input { width:100%; margin:0 0 .6rem; padding:.7rem .8rem; border-radius:10px; border:1px solid var(--border); background:var(--bg-elev2); color:var(--text); font-family:inherit; font-size:1rem; }
.fb-composer-bar { display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap; }
.fb-file-names { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-post { padding: 0; overflow: visible; }
.fb-post.is-target { box-shadow: 0 0 0 2px var(--accent); }
.fb-post-head { display:flex; gap:10px; align-items:center; padding:12px 14px 8px; }
.fb-post-meta { min-width:0; flex:1; }
.fb-post-delete { margin-left:auto; }
.fb-post-av { width:40px; height:40px; border-radius:50%; overflow:hidden; background:var(--bg-elev2); display:grid; place-items:center; font-weight:700; color:var(--accent); flex:none; }
.fb-post-av-sm { width:32px; height:32px; font-size:.85rem; }
.fb-post-av img { width:100%; height:100%; object-fit:cover; }
.fb-post-name { font-weight:700; }
.fb-post-main { padding:0 14px 12px; }
.fb-post-title { margin:.35rem 0 .35rem; font-size:1.15rem; text-transform:none; letter-spacing:0; color:var(--text); }
.fb-post-body { white-space:pre-wrap; line-height:1.45; }
.fb-embed { margin-top:.75rem; border:1px solid var(--border); border-radius:12px; padding:10px 12px 12px; background:var(--bg); }
.fb-embed-head { display:flex; gap:8px; align-items:center; margin-bottom:.45rem; }
.fb-embed-name { font-weight:700; font-size:.95rem; }
.fb-post-foot { border-top:1px solid var(--border); }
.fb-post-stats { display:flex; justify-content:space-between; align-items:center; gap:.75rem; padding:8px 14px; font-size:.85rem; color:var(--text-dim); min-height:1.2rem; }
.fb-react-summary { display:flex; align-items:center; gap:4px; }
.fb-react-chip { font-size:1rem; }
.fb-stat-link { background:none; border:0; color:var(--text-dim); cursor:pointer; font:inherit; padding:0; }
.fb-stat-link:hover { text-decoration:underline; }
.fb-post-actions { display:flex; flex-wrap:wrap; border-top:1px solid var(--border); }
.fb-post-actions > .fb-post-action, .fb-like-wrap { flex:1 1 4.6rem; min-width:0; }
.fb-like-wrap { position:relative; }
.fb-post-action { width:100%; background:transparent; border:0; color:var(--text-dim); cursor:pointer; font:inherit; font-weight:700; padding:.7rem .3rem; border-radius:0; font-size:.82rem; }
.fb-post-action:hover, .fb-post-action.on { background:var(--bg-elev2); color:var(--text); }
.fb-post-action:disabled { opacity:.55; cursor:wait; }
.fb-chat-picker { display:none; position:absolute; right:6px; top:calc(100% + 6px); bottom:auto; min-width:11rem; max-height:14rem; overflow-y:auto; flex-direction:column; padding:6px; background:var(--bg-elev); border:1px solid var(--border); border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.35); z-index:30; }
.fb-chat-picker.is-open { display:flex; }
.fb-chat-pick { width:100%; text-align:left; background:transparent; border:0; color:var(--text); cursor:pointer; font:inherit; font-size:.85rem; padding:.45rem .6rem; border-radius:8px; }
.fb-chat-pick:hover { background:var(--bg-elev2); }
.fb-react-picker { position:absolute; left:8px; top:calc(100% + 6px); bottom:auto; display:flex; gap:4px; padding:6px; background:var(--bg-elev); border:1px solid var(--border); border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.35); z-index:8; }
.fb-react-pick { width:36px; height:36px; border:0; background:transparent; border-radius:50%; cursor:pointer; font-size:1.25rem; line-height:1; }
.fb-react-pick:hover, .fb-react-pick.on { background:var(--bg-elev2); transform:scale(1.12); }
.fb-media { margin-top:.7rem; display:grid; gap:8px; }
.fb-media img, .fb-media video { width:100%; max-height:420px; object-fit:cover; border-radius:10px; background:#000; }
.fb-comments { padding:10px 14px 14px; display:flex; flex-direction:column; gap:.45rem; border-top:1px solid var(--border); }
.fb-comment { display:flex; align-items:flex-start; gap:.45rem; font-size:.9rem; line-height:1.4; }
.fb-comment-name { font-weight:700; flex:none; }
.fb-comment-body { flex:1; min-width:0; white-space:pre-wrap; }
.fb-comment-form { display:flex; gap:.45rem; align-items:flex-start; }
.fb-comment-form .fb-input { margin:0; flex:1; }
.fb-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--bg-elev2); border:1px solid var(--border); color:var(--text); padding:.7rem 1.1rem; border-radius:999px; z-index:80; box-shadow:0 8px 24px rgba(0,0,0,.4); }
.fb-pm { position:fixed; inset:0; z-index:70; display:none; place-items:center; padding:1rem; }
.fb-pm.is-open { display:grid; }
.fb-pm-bg { position:absolute; inset:0; background:rgba(0,0,0,.55); }
.fb-pm-card { position:relative; width:100%; max-width:440px; height:min(560px, 82vh); background:var(--bg-elev); border:1px solid var(--border); border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.55); display:flex; flex-direction:column; overflow:hidden; }
.fb-pm-head { display:flex; align-items:center; gap:.6rem; padding:.85rem 1rem; border-bottom:1px solid var(--border); }
.fb-pm-who { display:flex; align-items:center; gap:.55rem; flex:1; min-width:0; }
.fb-pm-who strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-pm-id { min-width:0; flex:1; }
.fb-pm-rank { display:flex; align-items:center; gap:.3rem; margin-top:.12rem; font-size:.75rem; color:var(--text-dim); }
.fb-pm-rank .pbadge { width:16px; height:16px; }
.fb-pm-av, .fb-pm-b-av { width:32px; height:32px; border-radius:50%; background:var(--bg-elev2); display:grid; place-items:center; font-weight:700; color:var(--accent); flex:none; overflow:hidden; font-size:.85rem; text-decoration:none; color:var(--accent); }
.fb-pm-av-hit { display:grid; width:100%; height:100%; place-items:center; text-decoration:none; color:inherit; }
.fb-pm-av img, .fb-pm-b-av img { width:100%; height:100%; object-fit:cover; display:block; }
.fb-pm-x, .fb-pm-back { background:transparent; border:0; color:var(--text-dim); font-size:1.05rem; cursor:pointer; }
.fb-pm-x:hover, .fb-pm-back:hover { color:var(--text); }
.fb-pm-head > strong { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-pm-list { flex:1; overflow-y:auto; padding:.4rem; min-height:0; }
.fb-pm-convo {
    display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
    background:transparent; border:0; color:inherit; padding:.6rem; border-radius:10px;
    cursor:pointer; font-family:inherit;
}
.fb-pm-convo:hover { background:var(--bg-elev2); }
.fb-pm-convo .fb-pm-av { width:42px; height:42px; font-size:.95rem; }
.fb-pm-convo-main { flex:1; min-width:0; display:flex; flex-direction:column; }
.fb-pm-convo-name { font-weight:600; }
.fb-pm-convo-last { font-size:.82rem; color:var(--text-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-pm-unread { background:var(--accent); color:#fff; font-size:.7rem; min-width:18px; height:18px; border-radius:9px; display:grid; place-items:center; padding:0 5px; flex:none; }
.fb-pm-thread { flex:1; display:flex; flex-direction:column; min-height:0; }
.fb-pm-msgs { flex:1; overflow-y:auto; padding:.8rem; display:flex; flex-direction:column; gap:.4rem; min-height:0; }
.fb-pm-bubble { max-width:86%; align-self:flex-start; display:flex; align-items:flex-end; gap:.45rem; }
.fb-pm-bubble.mine { align-self:flex-end; flex-direction:row-reverse; }
.fb-pm-b-main { min-width:0; }
.fb-pm-b-body { background:var(--bg-elev2); border:1px solid var(--border); border-radius:12px; padding:.45rem .7rem; word-break:break-word; }
.fb-pm-bubble.mine .fb-pm-b-body { background:var(--own); }
.fb-pm-b-time { font-size:.66rem; color:var(--text-dim); margin-top:.15rem; }
.fb-pm-bubble.mine .fb-pm-b-time { text-align:right; }
.fb-pm-composer { display:flex; gap:.5rem; padding:.7rem; border-top:1px solid var(--border); }
.fb-pm-composer input { flex:1; padding:.6rem .8rem; border-radius:12px; border:1px solid var(--border); background:var(--bg-elev2); color:var(--text); font-size:.95rem; }
.fb-pm-composer input:focus { outline:2px solid var(--accent); border-color:transparent; }
.fb-pm-composer .btn { padding:.6rem 1rem; }
.fb-settings .field { margin-bottom:.85rem; }
.fb-settings textarea, .fb-settings input:not([type=radio]) { width:100%; padding:.7rem .8rem; border-radius:10px; border:1px solid var(--border); background:var(--bg-elev2); color:var(--text); font-family:inherit; }
@media (max-width: 720px) {
    .fb-cols { flex-direction:column; }
    .fb-side { width:100%; flex:none; }
}

/* SANCTUM 2026 DESKTOP LOGIN */
.sanctum-login {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    min-height:100%;
    padding:clamp(1rem, 3vw, 3rem);
    background:
        radial-gradient(120% 80% at 50% -20%,
            rgba(124,58,237,.45), transparent 55%),
        radial-gradient(90% 60% at 100% 10%,
            rgba(219,39,119,.18), transparent 50%),
        radial-gradient(70% 50% at 0% 50%,
            rgba(91,33,182,.28), transparent 52%),
        radial-gradient(100% 70% at 50% 110%,
            rgba(124,58,237,.28), transparent 58%),
        linear-gradient(185deg,#12081c 0%,#0a0612 35%,#06040a 100%);
}

.sanctum-login-grid,
.sanctum-login-aurora {
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:-1;
}

.sanctum-login-grid {
    opacity:.34;
    background-image:
        linear-gradient(rgba(196,181,253,.28) 1px,transparent 1px),
        linear-gradient(90deg,rgba(167,139,250,.22) 1px,transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(to bottom,#000,transparent 78%);
}

.sanctum-login-aurora {
    inset:-55% -35% auto;
    height:115%;
    filter:blur(55px);
    opacity:.72;
    background:conic-gradient(
        from 210deg,
        transparent,
        rgba(124,58,237,.32),
        rgba(244,114,182,.16),
        transparent,
        rgba(219,39,119,.26),
        transparent,
        rgba(167,139,250,.30),
        rgba(34,211,238,.10),
        transparent
    );
    animation:sanctum-login-drift 18s ease-in-out infinite alternate;
}

@keyframes sanctum-login-drift {
    from { transform:translate3d(-2%,0,0) rotate(-3deg) scale(1); }
    to { transform:translate3d(3%,2%,0) rotate(3deg) scale(1.06); }
}

.sanctum-login-shell {
    width:min(1180px,100%);
    min-height:min(760px,calc(100vh - 6rem));
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(390px,.72fr);
    border:1px solid rgba(196,181,253,.18);
    border-radius:30px;
    overflow:hidden;
    box-shadow:
        0 40px 100px rgba(0,0,0,.55),
        0 0 90px rgba(124,58,237,.12);
    background:rgba(9,5,16,.68);
    backdrop-filter:blur(22px);
}

.sanctum-login-intro {
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    padding:clamp(2rem,5vw,4.75rem);
    border-right:1px solid rgba(196,181,253,.14);
    background:
        linear-gradient(145deg,rgba(68,28,118,.38),rgba(13,7,25,.86) 54%),
        radial-gradient(circle at 15% 10%,rgba(219,39,119,.18),transparent 35%);
}

.sanctum-login-brand {
    display:inline-flex;
    align-items:center;
    gap:.8rem;
    width:max-content;
    color:#fff;
    font-size:1.1rem;
    font-weight:800;
    text-decoration:none;
}

.sanctum-login-brand img {
    width:42px;
    height:42px;
    object-fit:contain;
    filter:drop-shadow(0 0 16px rgba(192,132,252,.38));
}

.sanctum-login-copy {
    max-width:620px;
    margin:4rem 0;
}

.sanctum-login-kicker {
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    padding:.52rem .8rem;
    border:1px solid rgba(196,181,253,.28);
    border-radius:999px;
    color:#ddd6fe;
    background:rgba(76,29,149,.22);
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.sanctum-login-kicker span {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#34d399;
    box-shadow:0 0 12px #34d399;
}

.sanctum-login-copy h1 {
    margin:1.35rem 0 1rem;
    max-width:650px;
    color:#fff;
    font-size:clamp(2.7rem,5vw,5.2rem);
    line-height:.96;
    letter-spacing:-.055em;
}

.sanctum-login-copy h1 strong {
    display:block;
    color:transparent;
    background:linear-gradient(95deg,#c4b5fd,#f472b6 62%,#fb7185);
    -webkit-background-clip:text;
    background-clip:text;
}

.sanctum-login-copy > p {
    max-width:570px;
    margin:0;
    color:rgba(237,233,254,.74);
    font-size:clamp(1rem,1.4vw,1.15rem);
    line-height:1.75;
}

.sanctum-login-features {
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    margin-top:1.65rem;
}

.sanctum-login-features span {
    padding:.48rem .7rem;
    border:1px solid rgba(196,181,253,.15);
    border-radius:9px;
    color:#ddd6fe;
    background:rgba(255,255,255,.035);
    font-size:.76rem;
    font-weight:700;
}

.sanctum-login-note {
    margin:0;
    color:rgba(221,214,254,.48);
    font-size:.76rem;
    letter-spacing:.04em;
}

.sanctum-login-panel {
    display:grid;
    place-items:center;
    padding:clamp(1.35rem,3vw,3rem);
    background:
        linear-gradient(155deg,rgba(24,13,39,.78),rgba(7,5,12,.92));
}

.sanctum-login-card.card {
    width:100%;
    max-width:430px;
    padding:0;
    border:0;
    box-shadow:none;
    background:transparent;
}

.sanctum-login-cardhead {
    display:flex;
    align-items:center;
    gap:.85rem;
    margin-bottom:1.55rem;
}

.sanctum-login-cardhead img {
    display:none;
    width:42px;
    height:42px;
    object-fit:contain;
}

.sanctum-login-cardhead span {
    display:block;
    margin-bottom:.2rem;
    color:#a78bfa;
    font-size:.68rem;
    font-weight:800;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.sanctum-login-cardhead h2 {
    margin:0;
    color:#fff;
    font-size:2rem;
    letter-spacing:-.035em;
}

.sanctum-login .field {
    margin-bottom:1rem;
}

.sanctum-login .field > label,
.sanctum-login-labelrow label {
    display:block;
    margin-bottom:.45rem;
    color:#ede9fe;
    font-size:.78rem;
    font-weight:750;
}

.sanctum-login-labelrow {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
}

.sanctum-login-labelrow a {
    margin-bottom:.45rem;
    color:#c4b5fd;
    font-size:.75rem;
    text-decoration:none;
}

.sanctum-login input[type="text"],
.sanctum-login input[type="password"],
.sanctum-login input:not([type]) {
    min-height:50px;
    border:1px solid rgba(196,181,253,.17);
    border-radius:13px;
    color:#fff;
    background:rgba(255,255,255,.045);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}

.sanctum-login input:focus {
    border-color:rgba(167,139,250,.72);
    background:rgba(255,255,255,.065);
    box-shadow:0 0 0 4px rgba(124,58,237,.15);
    outline:none;
}

.sanctum-login-remember {
    display:flex;
    align-items:center;
    gap:.55rem;
    width:max-content;
    margin:.15rem 0 1.15rem;
    color:rgba(237,233,254,.64);
    font-size:.78rem;
}

.sanctum-login-remember input {
    accent-color:#8b5cf6;
}

.sanctum-login-submit,
.sanctum-login-guestbtn {
    width:100%;
    min-height:50px;
    border-radius:13px;
    font-weight:850;
    letter-spacing:.02em;
}

.sanctum-login-submit {
    background:linear-gradient(110deg,#7c3aed,#a855f7 52%,#db2777);
    box-shadow:0 14px 35px rgba(124,58,237,.28);
}

.sanctum-login-register,
.sanctum-login-guestnote {
    text-align:center;
    color:rgba(237,233,254,.55);
}

.sanctum-login-register {
    margin:1rem 0 0;
    font-size:.8rem;
}

.sanctum-login-register a {
    color:#c4b5fd;
    font-weight:800;
}

.sanctum-login-divider {
    display:flex;
    align-items:center;
    gap:.65rem;
    margin:1.15rem 0 .85rem;
}

.sanctum-login-divider span {
    flex:1;
    height:1px;
    background:rgba(196,181,253,.13);
}

.sanctum-login-divider small {
    color:rgba(237,233,254,.38);
    font-size:.66rem;
    font-weight:750;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.sanctum-login-guestnote {
    margin:.55rem 0 0;
    font-size:.7rem;
    line-height:1.45;
}

.sanctum-login-themes {
    margin-top:1rem;
}

@media (max-width: 820px) {
    .sanctum-login {
        align-items:start;
        overflow:auto;
        padding:max(1rem,var(--sat)) 1rem max(1rem,var(--sab));
    }

    .sanctum-login-shell {
        display:block;
        width:min(470px,100%);
        min-height:0;
        border-radius:22px;
    }

    .sanctum-login-intro {
        display:none;
    }

    .sanctum-login-panel {
        padding:1.25rem;
    }

    .sanctum-login-cardhead img {
        display:block;
    }
}

@media (max-width: 480px) {
    .sanctum-login {
        padding-left:.7rem;
        padding-right:.7rem;
    }

    .sanctum-login-shell {
        border-radius:18px;
    }

    .sanctum-login-panel {
        padding:1.1rem;
    }

    .sanctum-login-cardhead {
        margin-bottom:1.2rem;
    }

    .sanctum-login-cardhead h2 {
        font-size:1.65rem;
    }

    .sanctum-login-grid {
        opacity:.20;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sanctum-login-aurora {
        animation:none;
    }
}

/* MANDATORY COOKIE POLICY GATE */
.sanctum-cookie-page {
    overflow:auto;
}

.sanctum-cookie-shell {
    width:min(720px,100%);
    margin:auto;
    padding:clamp(1.5rem,4vw,3rem);
    border:1px solid rgba(196,181,253,.20);
    border-radius:26px;
    color:#ede9fe;
    background:
        linear-gradient(155deg,rgba(32,17,52,.92),rgba(8,5,15,.96));
    box-shadow:
        0 35px 90px rgba(0,0,0,.56),
        0 0 70px rgba(124,58,237,.13);
    backdrop-filter:blur(24px);
}

.sanctum-cookie-head {
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1.2rem;
}

.sanctum-cookie-head img {
    width:52px;
    height:52px;
    object-fit:contain;
}

.sanctum-cookie-head span {
    display:block;
    margin-bottom:.2rem;
    color:#a78bfa;
    font-size:.7rem;
    font-weight:850;
    letter-spacing:.14em;
    text-transform:uppercase;
}

.sanctum-cookie-head h1 {
    margin:0;
    color:#fff;
    font-size:clamp(1.8rem,4vw,2.6rem);
    letter-spacing:-.04em;
}

.sanctum-cookie-lead {
    margin:0 0 1.25rem;
    color:rgba(237,233,254,.76);
    line-height:1.65;
}

.sanctum-cookie-details {
    display:grid;
    gap:.7rem;
}

.sanctum-cookie-details article {
    padding:1rem;
    border:1px solid rgba(196,181,253,.13);
    border-radius:14px;
    background:rgba(255,255,255,.035);
}

.sanctum-cookie-details strong {
    color:#fff;
    font-size:.85rem;
}

.sanctum-cookie-details p {
    margin:.35rem 0 0;
    color:rgba(237,233,254,.60);
    font-size:.78rem;
    line-height:1.55;
}

.sanctum-cookie-disclosure {
    margin:1rem 0;
    color:rgba(237,233,254,.52);
    font-size:.75rem;
    line-height:1.55;
}

.sanctum-cookie-check {
    display:flex;
    align-items:flex-start;
    gap:.75rem;
    padding:1rem;
    border:1px solid rgba(167,139,250,.24);
    border-radius:14px;
    color:#ede9fe;
    background:rgba(124,58,237,.10);
    font-size:.82rem;
    line-height:1.5;
}

.sanctum-cookie-check input {
    flex:0 0 auto;
    margin-top:.18rem;
    accent-color:#8b5cf6;
}

.sanctum-cookie-enter {
    width:100%;
    min-height:52px;
    margin-top:1rem;
    border-radius:14px;
    background:linear-gradient(110deg,#7c3aed,#a855f7 52%,#db2777);
}

.sanctum-cookie-enter:disabled {
    cursor:not-allowed;
    opacity:.42;
    filter:grayscale(.3);
}

.sanctum-cookie-warning,
.sanctum-cookie-error {
    margin:.8rem 0 0;
    color:#fecaca;
    font-size:.78rem;
    line-height:1.5;
}

.sanctum-cookie-logout {
    margin-top:.85rem;
    text-align:center;
}

.sanctum-cookie-logout button {
    border:0;
    color:rgba(237,233,254,.52);
    background:transparent;
    font-size:.75rem;
    cursor:pointer;
}

.sanctum-cookie-logout button:hover {
    color:#fff;
}

@media (max-width:600px) {
    .sanctum-cookie-shell {
        padding:1.25rem;
        border-radius:20px;
    }
}