/* GENERATED by social_app/tools/make_css.py from mockups/make_social_v3.py. Do not edit by hand. */
@font-face{font-family:'Baloo 2';font-weight:700;font-display:swap;src:url('../fonts/baloo-2-700-latin.woff2') format('woff2')}
@font-face{font-family:'Baloo 2';font-weight:800;font-display:swap;src:url('../fonts/baloo-2-800-latin.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:400;font-display:swap;src:url('../fonts/hanken-grotesk-400-latin.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:500 600;font-display:swap;src:url('../fonts/hanken-grotesk-500-latin.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-weight:700 800;font-display:swap;src:url('../fonts/hanken-grotesk-700-latin.woff2') format('woff2')}
@font-face{font-family:'Noto Sans Arabic';font-weight:500;font-display:swap;src:url('../fonts/noto-sans-arabic-500-arabic.woff2') format('woff2')}
@font-face{font-family:'Noto Sans Arabic';font-weight:700 800;font-display:swap;src:url('../fonts/noto-sans-arabic-700-arabic.woff2') format('woff2')}
@font-face{font-family:'Material Icons Round';font-style:normal;font-weight:400;font-display:block;src:url('../vendor/material-icons-round-1.13.14.woff2') format('woff2')}
:root{--bg:#FBF6ED;--surface:#FFFFFF;--ink:#232C4E;--ink2:#4B5168;--muted:#757D9C;--line:#EAE2D0;--sh:0 8px 20px -4px rgba(35,44,78,.07);
--lapis:#2E4FE3;--lapis-ink:#2E4FE3;--mist:#EAF1FF;--gold:#F5B82E;--gold-text:#B47F08;--lemon:#FCF0CE;
--faience:#2EB8A6;--faience-ink:#1F9A8A;--mint:#E5F6F2;--terra:#E2725B;--terra-ink:#B4402B;--blush:#FBE3DC;--sand:#F6EBD7;--sand-dk:#E3D2AE;
--side:#2A2140;--side-ink:#CBBFE8;--scrim:rgba(35,44,78,.45);--page:#ECE5D8;--paper:#FFFDF8;
--gg:#1A73E8;--tt:#111111;--ig:#D6297A;--yt:#E62117;--fb:#1877F2;--xx:#111111;--sc:#F7D100;--th:#111111;
--fb-f:'Baloo 2','Noto Sans Arabic',sans-serif;--fh:'Hanken Grotesk',sans-serif}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0F1426;--surface:#1C2440;--ink:#EDEAE1;--ink2:#C9CBD6;--muted:#9AA2BE;--line:#2E3858;--sh:none;--lapis:#4A68F2;--lapis-ink:#8FA4FF;--mist:#1F2B57;--gold-text:#F2C14E;--lemon:#3A3118;--faience:#2FBFAC;--faience-ink:#4FD6C3;--mint:#133A39;--terra:#EE8670;--terra-ink:#FF9C86;--blush:#3D2229;--sand:#2A2D42;--sand-dk:#3A3F58;--side:#120D1F;--page:#070A14;--paper:#141A30;--tt:#3A3A3A;--xx:#3A3A3A;--th:#3A3A3A}}
:root[data-theme="dark"]{--bg:#0F1426;--surface:#1C2440;--ink:#EDEAE1;--ink2:#C9CBD6;--muted:#9AA2BE;--line:#2E3858;--sh:none;--lapis:#4A68F2;--lapis-ink:#8FA4FF;--mist:#1F2B57;--gold-text:#F2C14E;--lemon:#3A3118;--faience:#2FBFAC;--faience-ink:#4FD6C3;--mint:#133A39;--terra:#EE8670;--terra-ink:#FF9C86;--blush:#3D2229;--sand:#2A2D42;--sand-dk:#3A3F58;--side:#120D1F;--page:#070A14;--paper:#141A30;--tt:#3A3A3A;--xx:#3A3A3A;--th:#3A3A3A}
*{margin:0;padding:0;box-sizing:border-box}
.mi{font-family:'Material Icons Round';font-weight:normal;font-style:normal;font-size:20px;line-height:1;display:inline-block;direction:ltr;-webkit-font-smoothing:antialiased;flex-shrink:0}
a{color:inherit;text-decoration:none}
/* app shell */
.app{display:flex;min-height:100vh;background:var(--bg);position:relative}
.side{width:224px;flex-shrink:0;background:var(--side);color:var(--side-ink);padding:18px 12px;display:flex;flex-direction:column;gap:2px}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 16px}
.logo{width:34px;height:34px;border-radius:11px;background:var(--terra);display:flex;align-items:center;justify-content:center;color:#fff}
.logo .mi{font-size:22px}
.brand b{font:800 19px/1 var(--fb-f);color:#fff;display:block}.brand small{font:600 11px var(--fh);color:var(--side-ink)}
.nv{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:12px;font:600 13.5px var(--fh)}
.nv .mi{font-size:19px}
.nv.on{background:rgba(255,255,255,.12);color:#fff}
.nv .ct{margin-left:auto;background:var(--terra);color:#fff;font:700 11px var(--fh);border-radius:9px;padding:2px 7px}
.nv .ct.y{background:var(--gold);color:#232C4E}
.ngrp{font:700 10.5px var(--fh);letter-spacing:.8px;color:rgba(203,191,232,.55);padding:14px 10px 4px}
.me{margin-top:auto;display:flex;gap:10px;align-items:center;padding:12px 8px 0;border-top:1.5px solid rgba(255,255,255,.08)}
.me b{color:#fff;font:700 13px var(--fh);display:block}.me small{font:500 11.5px var(--fh)}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:16px 24px;border-bottom:1.5px solid var(--line);background:var(--surface)}
.top h2{font:800 22px/1.2 var(--fb-f)}
.crumb{font:600 12.5px var(--fh);color:var(--muted);display:flex;gap:6px;align-items:center}
.srch{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:8px 12px;width:260px;color:var(--muted);font:500 13px var(--fh)}
.bell{position:relative;width:40px;height:40px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center}
.bell .ct{position:absolute;top:-6px;right:-6px;border:2px solid var(--surface);background:var(--terra);color:#fff;font:700 10.5px/1 var(--fh);border-radius:9px;padding:3px 6px}
.seg{display:flex;background:var(--bg);border:1.5px solid var(--line);border-radius:12px;padding:3px}
.seg>span{font:700 12.5px var(--fh);padding:6px 11px;border-radius:9px;color:var(--muted);display:flex;gap:5px;align-items:center;white-space:nowrap}
.seg>span.on{background:var(--surface);color:var(--ink);box-shadow:var(--sh)}
.body{padding:20px 24px 28px;display:flex;flex-direction:column;gap:16px}
.g{display:grid;gap:16px}
.c2{grid-template-columns:1fr 1fr}.c3{grid-template-columns:repeat(3,1fr)}.c21{grid-template-columns:2fr 1fr}.c12{grid-template-columns:1fr 2fr}.c4{grid-template-columns:repeat(4,1fr)}.c5{grid-template-columns:repeat(5,1fr)}
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:20px;box-shadow:var(--sh);padding:16px 18px;min-width:0}
.ch{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.ch h3{font:800 16px/1.2 var(--fb-f)}
.ch .r{margin-left:auto;font:600 12px var(--fh);color:var(--muted);display:flex;gap:8px;align-items:center}
.lnk{color:var(--lapis-ink);font:700 12.5px var(--fh)}
.kpi .l{font:700 11.5px/1.3 var(--fh);color:var(--muted);letter-spacing:.3px}
.kpi .v{font:800 30px/1.1 var(--fb-f);margin-top:6px}
.kpi .d{font:600 12px var(--fh);margin-top:4px;color:var(--muted);display:flex;gap:4px;align-items:center}
.up{color:var(--faience-ink)!important}.dn{color:var(--terra-ink)!important}
.pill{display:inline-flex;align-items:center;gap:4px;font:700 11.5px/1 var(--fh);border-radius:8px;padding:5px 8px;white-space:nowrap}
.pill .mi{font-size:14px}
.p-l{background:var(--mist);color:var(--lapis-ink)}.p-g{background:var(--mint);color:var(--faience-ink)}.p-y{background:var(--lemon);color:var(--gold-text)}.p-r{background:var(--blush);color:var(--terra-ink)}.p-n{background:var(--sand);color:var(--ink2)}
.av{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:800 12.5px var(--fb-f);color:#fff;flex-shrink:0}
.av.s{width:24px;height:24px;font-size:10.5px}
.btn{display:inline-flex;align-items:center;gap:6px;font:700 13px var(--fh);border-radius:12px;padding:9px 14px;white-space:nowrap;border:1.5px solid transparent}
.btn .mi{font-size:17px}
.btn.sm{padding:6px 10px;font-size:12px;border-radius:10px}
.b1{background:var(--lapis);color:#fff}.b2{background:var(--surface);border-color:var(--line);color:var(--ink)}.b3{background:var(--gold);color:#232C4E}.bd{background:var(--surface);border-color:var(--line);color:var(--terra-ink)}.bg{background:var(--faience);color:#fff}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font:700 11.5px var(--fh);color:var(--muted);letter-spacing:.3px;padding:9px 10px;border-bottom:1.5px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
tr:last-child td{border-bottom:none}
td .sub{font-size:12px;color:var(--muted)}
.who{display:flex;align-items:center;gap:10px}
.who b{font-weight:700;display:block}
.num{text-align:right;font-variant-numeric:tabular-nums}
th.num{text-align:right}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:700 12.5px var(--fh);border:1.5px solid var(--line);background:var(--surface);border-radius:20px;padding:6px 12px;display:flex;gap:6px;align-items:center;color:var(--ink2);white-space:nowrap}
.chip b{font-weight:700;color:var(--muted)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}.chip.on b{color:var(--side-ink)}
.tabs{display:flex;gap:4px;border-bottom:1.5px solid var(--line);padding:0 24px;background:var(--surface)}
.tabs>span{font:700 13.5px var(--fh);color:var(--muted);padding:11px 12px;border-bottom:3px solid transparent;margin-bottom:-1.5px;display:inline-flex;gap:7px;align-items:center}
.tabs>span.on{color:var(--lapis-ink);border-color:var(--lapis)}
.tabs .ct{background:var(--sand);color:var(--ink2);font:700 11px/1 var(--fh);border-radius:9px;padding:3px 7px}
.li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.li:last-child{border-bottom:none}
.ico{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ico .mi{font-size:19px}
.i-l{background:var(--mist);color:var(--lapis-ink)}.i-g{background:var(--mint);color:var(--faience-ink)}.i-y{background:var(--lemon);color:var(--gold-text)}.i-r{background:var(--blush);color:var(--terra-ink)}.i-n{background:var(--sand);color:var(--ink2)}
.t1{font:700 13.5px/1.3 var(--fh)}.t2{font:500 12px/1.35 var(--fh);color:var(--muted)}
.grow{flex:1;min-width:0}
.pbar{height:8px;border-radius:5px;background:var(--sand);overflow:hidden}
.pbar i{display:block;height:100%;border-radius:5px;background:var(--lapis)}
.ar{font-family:'Noto Sans Arabic','Baloo 2',sans-serif;direction:rtl;unicode-bidi:isolate}
svg text{font-family:var(--fh)}
.box{border:1.5px dashed var(--sand-dk);border-radius:14px;padding:12px;font-size:12.5px;color:var(--muted)}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font:700 13px var(--fh)}
.fld .hint{font:500 11.5px var(--fh);color:var(--muted)}
.inp{background:var(--sand);border:1.5px solid transparent;border-radius:14px;padding:11px 14px;font:500 14px var(--fh);color:var(--ink);display:flex;align-items:center;gap:8px}
.inp.f{border-color:var(--lapis);background:var(--surface)}
.inp.ph{color:var(--muted)}
.inp .mi{font-size:18px;color:var(--muted)}
.otp{display:flex;gap:8px}
.otp i{width:44px;height:52px;border-radius:12px;background:var(--sand);display:flex;align-items:center;justify-content:center;font:800 22px var(--fb-f);font-style:normal}
.otp i.f{background:var(--surface);border:2px solid var(--lapis)}
.scrim{position:absolute;inset:0;background:var(--scrim);display:flex;align-items:flex-start;justify-content:center;padding-top:60px;z-index:5}
.dlg{background:var(--surface);border-radius:22px;padding:22px;width:560px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 60px rgba(0,0,0,.3)}
.dlg h3{font:800 20px/1.2 var(--fb-f);display:flex;align-items:center;gap:8px}
.mob{width:318px;border-radius:30px;overflow:hidden;border:1.5px solid var(--line);background:var(--bg);box-shadow:0 20px 50px -10px rgba(0,0,0,.25);flex-shrink:0;display:flex;flex-direction:column;min-height:700px}
.mob .mtop{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--surface);border-bottom:1.5px solid var(--line)}
.mob .mtop h2{font:800 20px var(--fb-f)}
.mob .mbody{padding:14px;display:flex;flex-direction:column;gap:12px;flex:1}
.mob .bnav{display:flex;justify-content:space-around;padding:8px 6px 14px;background:var(--side);color:var(--side-ink)}
.mob .bnav>span{display:flex;flex-direction:column;align-items:center;gap:2px;font:600 10.5px var(--fh);position:relative;padding:4px 8px;border-radius:12px}
.mob .bnav>span.on{background:rgba(255,255,255,.12);color:#fff}
.mob .bnav .ct{position:absolute;top:-2px;right:2px;background:var(--terra);color:#fff;font:700 10px/1 var(--fh);border-radius:8px;padding:2px 5px}
.phones{display:flex;gap:18px;overflow:auto;padding:6px 4px 24px}
.sw{width:38px;height:22px;border-radius:11px;background:var(--sand-dk);position:relative;flex-shrink:0;display:inline-block}
.sw::after{content:"";position:absolute;width:16px;height:16px;border-radius:8px;background:#fff;top:3px;left:3px}
.sw.on{background:var(--faience)}.sw.on::after{left:19px}
.setrow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:none}
/* social additions */
.pf{width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;font:800 9.5px/1 var(--fh);color:#fff;flex-shrink:0;letter-spacing:-.2px}
.pf.lg{width:40px;height:40px;border-radius:12px;font-size:14px}
.pf.tt{background:var(--tt)}.pf.ig{background:linear-gradient(135deg,#F9A13A,#D6297A 55%,#7A3AD1)}.pf.yt{background:var(--yt)}.pf.fb{background:var(--fb)}.pf.xx{background:var(--xx)}.pf.sc{background:var(--sc);color:#111}.pf.th{background:var(--th)}.pf.gg{background:var(--gg)}
.pfs{display:inline-flex;gap:3px}
.idea{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh);position:relative}
.idea h4{font:800 16px/1.25 var(--fb-f)}
.idea .hook{font:500 13px/1.45 var(--fh);color:var(--ink2);border-left:3px solid var(--gold);padding-left:9px}
.idea .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.idea .ft{display:flex;align-items:center;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.vote{display:inline-flex;flex-direction:column;align-items:center;border:1.5px solid var(--line);border-radius:12px;padding:4px 9px;font:800 13px/1 var(--fb-f);gap:1px}
.vote .mi{font-size:18px;color:var(--muted)}
.vote.on{background:var(--mist);border-color:var(--lapis);color:var(--lapis-ink)}.vote.on .mi{color:var(--lapis-ink)}
.word{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 8px;background:var(--mint);color:var(--faience-ink);border-radius:12px;padding:6px 10px;font:600 12.5px var(--fh)}
.word .ar{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
.word .mi{font-size:17px}
.hov{position:absolute;top:10px;right:10px;display:flex;gap:4px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:3px;box-shadow:var(--sh)}
.hov>span{font:700 11.5px var(--fh);padding:5px 8px;border-radius:8px;display:flex;gap:4px;align-items:center}
.hov>span .mi{font-size:15px}
.kan{display:flex;gap:12px;padding:16px 24px 24px;overflow-x:auto}
.kcol{background:var(--sand);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:8px;width:236px;flex-shrink:0}
.kcol h4{font:800 13.5px var(--fb-f);display:flex;gap:6px;padding:2px 4px;align-items:center}
.kcol h4 small{color:var(--muted);font-family:var(--fh);font-weight:700;margin-left:auto}
.kcol .who2{font:600 11px var(--fh);color:var(--muted);padding:0 4px;margin-top:-6px}
.kc{background:var(--surface);border-radius:12px;padding:10px 12px;border:1.5px solid var(--line);display:flex;flex-direction:column;gap:7px}
.kc .t1{font-size:13px}
.kc .ln{display:flex;align-items:center;gap:6px;font:600 11.5px var(--fh);color:var(--muted)}
.kc.amb{border-left:4px solid var(--gold)}.kc.red{border-left:4px solid var(--terra)}
.kc.drag{transform:rotate(-2deg);box-shadow:0 18px 30px -10px rgba(0,0,0,.35);border-color:var(--lapis)}
.kc .mini{height:5px;border-radius:3px;background:var(--sand);overflow:hidden}.kc .mini i{display:block;height:100%;background:var(--faience)}
.ghost{border:2px dashed var(--lapis);border-radius:12px;height:62px;background:var(--mist)}
.cal{flex:1;min-width:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1.5px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.cal .dh{font:700 11.5px var(--fh);color:var(--muted);padding:8px 10px;border-bottom:1.5px solid var(--line);background:var(--bg)}
.cal .d{min-height:118px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px;display:flex;flex-direction:column;gap:4px}
.cal .d:nth-child(7n){border-right:none}
.cal .d .dn2{font:700 12px var(--fh);color:var(--muted)}
.cal .d.out .dn2{opacity:.4}
.cal .d.today{background:var(--mist)}.cal .d.today .dn2{color:var(--lapis-ink)}
.ev{display:flex;align-items:center;gap:5px;font:600 11px/1.2 var(--fh);background:var(--bg);border-radius:7px;padding:4px 5px;border:1px solid var(--line);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ev .pf{width:16px;height:16px;border-radius:5px;font-size:7.5px}
.ev.done{opacity:.6}
.ev.gap{background:transparent;border:1.5px dashed var(--sand-dk);color:var(--muted)}
.ev>.mi{font-size:13px;color:var(--muted)}.ev.vid>.mi{color:var(--lapis-ink)}
.ev.miss{background:var(--blush);color:var(--terra-ink);border-color:transparent}.ev.miss>.mi{color:var(--terra-ink)}
.ev.pre{opacity:.45}
.startmk{font:700 10.5px var(--fh);color:var(--faience-ink);background:var(--mint);border-radius:6px;padding:3px 5px}
.grp{font:700 10.5px var(--fh);letter-spacing:.7px;color:var(--muted);padding:12px 16px 4px}
.wsteps{display:flex;gap:6px;flex-wrap:wrap}.wsteps span{font:700 11.5px var(--fh);border-radius:8px;padding:5px 9px;background:var(--sand);color:var(--muted)}
.wsteps span.done{background:var(--mint);color:var(--faience-ink)}.wsteps span.now{background:var(--gold);color:#232C4E}
.drop{border:2px dashed var(--sand-dk);border-radius:16px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--muted);font:600 13px var(--fh)}
.drop>.mi{font-size:34px;color:var(--lapis-ink)}
.ring.off svg circle{stroke:var(--sand)}
.hol{font:700 10.5px var(--fh);color:var(--gold-text);background:var(--lemon);border-radius:6px;padding:3px 5px}
.steps{display:flex;align-items:center;gap:0;overflow:hidden;background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:12px 14px}
.st{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1;min-width:0;position:relative}
.st i{width:24px;height:24px;border-radius:12px;background:var(--sand);display:flex;align-items:center;justify-content:center;font:800 11px var(--fh);font-style:normal;color:var(--muted);z-index:1}
.st>span{font:700 10.5px/1.2 var(--fh);color:var(--muted);text-align:center}
.st.done i{background:var(--faience);color:#fff}.st.done>span{color:var(--ink2)}
.st.now i{background:var(--gold);color:#232C4E;box-shadow:0 0 0 4px var(--lemon)}.st.now>span{color:var(--ink)}
.st::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2.5px;background:var(--sand)}
.st:first-child::before{display:none}
.st.done::before,.st.now::before{background:var(--faience)}
.hookbig{font:800 22px/1.3 var(--fb-f);background:var(--lemon);border-radius:16px;padding:14px 16px;color:var(--ink)}
.hookbig small{display:block;font:700 11px var(--fh);color:var(--gold-text);letter-spacing:.5px;margin-bottom:4px}
.scr td{white-space:normal;vertical-align:top}
.scr .ar{font-size:17px;font-weight:700;white-space:nowrap}
.fn.n .row .lb{width:118px}.fn.n .row .vv{width:46px}
.ckb{width:18px;height:18px;border-radius:5px;background:var(--surface);border:1.5px solid var(--line);display:inline-flex;align-items:center;justify-content:center}.ckb.on{background:var(--lapis);border-color:var(--lapis);color:#fff}.ckb .mi{font-size:14px}
.stlb{width:120px;flex-shrink:0;white-space:nowrap}
.ok{color:var(--faience-ink)}.bad{color:var(--terra-ink)}
.thumb{border-radius:12px;background:linear-gradient(160deg,#E2725B,#2A2140);color:#fff;display:flex;align-items:flex-end;padding:8px;font:700 11px/1.25 var(--fh);position:relative;overflow:hidden;flex-shrink:0}
.thumb .mi{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:28px;opacity:.9}
.thumb.v2{background:linear-gradient(160deg,#2E4FE3,#232C4E)}.thumb.v3{background:linear-gradient(160deg,#2EB8A6,#1B3B4E)}.thumb.v4{background:linear-gradient(160deg,#F5B82E,#B4402B)}
.file{display:flex;align-items:center;gap:10px;padding:8px;border:1.5px solid var(--line);border-radius:12px}
.bub{max-width:88%;border-radius:14px;padding:8px 11px;font-size:13px;line-height:18.5px;background:var(--sand)}
.bub.me2{background:var(--mist);margin-left:auto}
.ts{background:var(--ink);color:var(--bg);font:800 11px var(--fh);border-radius:6px;padding:1px 6px;margin-right:4px}
.meta{font:500 11px var(--fh);color:var(--muted);margin-top:3px}
.ring{position:relative;width:74px;height:74px}
.ring svg{transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 17px var(--fb-f)}
.ringl{font:700 12px var(--fh);color:var(--ink2);text-align:center;margin-top:6px;display:flex;gap:5px;justify-content:center;align-items:center}
.heat{display:grid;grid-template-columns:40px repeat(8,1fr);gap:3px;font:600 10.5px var(--fh);color:var(--muted);align-items:center}
.heat i{display:block;height:22px;border-radius:5px;background:var(--lapis)}
.fn{display:flex;flex-direction:column;gap:8px}
.fn .row{display:flex;align-items:center;gap:10px;font-size:13px}
.fn .row .lb{width:170px;color:var(--ink2);font-weight:600;display:flex;gap:6px;align-items:center}
.fn .row .bx{flex:1;height:28px;background:var(--sand);border-radius:8px;overflow:hidden}
.fn .row .bx i{display:block;height:100%;background:var(--lapis);border-radius:8px}
.fn .row .vv{width:120px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.fn .row .vv small{color:var(--muted);font-weight:600}
.acc{display:flex;flex-direction:column;gap:12px}
.acc .hd{display:flex;align-items:center;gap:12px}
.live{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--fh);border-radius:20px;padding:5px 10px;background:var(--mint);color:var(--faience-ink)}
.live i{width:8px;height:8px;border-radius:4px;background:var(--faience)}
.live.wait{background:var(--lemon);color:var(--gold-text)}.live.wait i{background:var(--gold)}
.live.off{background:var(--sand);color:var(--ink2)}.live.off i{background:var(--muted)}
.gets{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--ink2)}
.gets div{display:flex;gap:6px;align-items:center}.gets .mi{font-size:16px}
.swatch{height:64px;border-radius:12px;display:flex;align-items:flex-end;padding:7px;font:700 11px var(--fh);color:#fff}
.qr{width:120px;height:120px;border-radius:12px;background:
 repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px),repeating-linear-gradient(0deg,var(--ink) 0 6px,transparent 6px 12px);opacity:.85;border:8px solid var(--surface);outline:1.5px solid var(--line)}
.spark{display:block}
.upl{background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:8px}
.found{background:var(--mist);border:1.5px solid var(--lapis);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px}