:root {
  --bg:#FAFAF7;--surface:#FFF;--sf2:#F4F3EF;--bd:#E8E6DF;--bd2:#D0CEC6;
  --terra:#E8704A;--tl:#FDF0EB;--td:#C9572F;
  --green:#4CAF82;--gl:#EAF7F1;
  --blue:#4A90D9;--bl:#EAF2FB;
  --yel:#F5C842;--yl:#FEF9E7;
  --pur:#9B72CF;--pl:#F3EDFB;
  --red:#E05C5C;--rl:#FDECEC;
  --t:#2C2A25;--t2:#6B6760;--t3:#A8A49C;
  --r:16px;--rs:10px;
  --s0:0 2px 12px rgba(44,42,37,.08);--s1:0 4px 24px rgba(44,42,37,.13);--s2:0 8px 40px rgba(44,42,37,.18);
  --fw:'Fraunces',serif;--fb:'Nunito',sans-serif;--fm:'DM Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fb);background:var(--bg);color:var(--t);min-height:100vh;display:flex;overflow:hidden;-webkit-font-smoothing:antialiased}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:3px}

/* SIDEBAR */
#sb{width:256px;background:var(--surface);border-right:1px solid var(--bd);display:flex;flex-direction:column;height:100vh;overflow-y:auto;flex-shrink:0;transition:left .25s ease}
.logo-a{padding:20px 17px 16px;border-bottom:1px solid var(--bd)}
.logo-r{display:flex;align-items:center;gap:10px}
.logo-ic{width:36px;height:36px;background:linear-gradient(135deg,var(--terra),#F59E6A);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 2px 8px rgba(232,112,74,.35);flex-shrink:0}
.logo-tx{font-family:var(--fw);font-size:21px;font-weight:700;letter-spacing:-.4px}
.logo-su{font-size:11px;color:var(--t3);font-family:var(--fm);margin-top:2px}
.fam-s{padding:11px 11px 9px;border-bottom:1px solid var(--bd)}
.slbl{font-size:10px;color:var(--t3);font-family:var(--fm);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:7px}
.fam-chips{display:flex;flex-wrap:wrap;gap:5px}
.fchip{display:flex;align-items:center;gap:5px;padding:4px 9px 4px 4px;border-radius:20px;background:var(--sf2);border:1.5px solid transparent;cursor:pointer;font-size:12px;font-weight:700;transition:all .15s}
.fchip:hover{border-color:var(--bd2)}
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;flex-shrink:0}
.ni{display:flex;align-items:center;gap:10px;padding:8px 12px;margin:1px 7px;border-radius:var(--rs);cursor:pointer;font-size:13.5px;font-weight:700;color:var(--t2);transition:all .15s}
.ni:hover{background:var(--sf2);color:var(--t)}
.ni.on{background:var(--tl);color:var(--terra)}
.nbadge{margin-left:auto;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px;font-family:var(--fm)}
.cit{display:flex;align-items:center;gap:7px;padding:6px 12px;margin:0 7px;border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--t2);transition:all .15s}
.cit:hover{background:var(--sf2)}
.cdot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.sb-bot{margin-top:auto;padding:12px;border-top:1px solid var(--bd)}
.stk{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--yl);border-radius:var(--rs);font-size:12px;font-weight:700;color:#92400E;border:1px solid #FDE68A}

/* MAIN */
#main{flex:1;display:flex;flex-direction:column;overflow:hidden;height:100vh}
#topbar{display:flex;align-items:center;gap:10px;padding:12px 22px;border-bottom:1px solid var(--bd);background:var(--surface);flex-shrink:0}
#topbar h2{font-family:var(--fw);font-size:20px;font-weight:500;flex:1;letter-spacing:-.3px}
#content{flex:1;overflow-y:auto;padding:22px}
.view{display:none}.view.on{display:block}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 15px;border-radius:var(--rs);font-size:13px;font-weight:700;cursor:pointer;border:none;transition:all .15s;font-family:var(--fb);white-space:nowrap}
.bp{background:var(--terra);color:#fff;box-shadow:0 2px 8px rgba(232,112,74,.3)}.bp:hover{background:var(--td);transform:translateY(-1px)}
.bg{background:transparent;color:var(--t2);border:1.5px solid var(--bd2)}.bg:hover{background:var(--sf2);color:var(--t)}
.bgr{background:var(--green);color:#fff}.bgr:hover{background:#3D9E6F}
.bbl{background:var(--blue);color:#fff}.bbl:hover{background:#3A7BC4}
.bsm{padding:5px 11px;font-size:12px}
.bdn{color:var(--red);border:1.5px solid var(--red);background:transparent}.bdn:hover{background:var(--rl)}

/* CARD */
.card{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--s0)}
.chdr{padding:13px 17px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;font-size:13.5px;font-weight:700}
.cbdy{padding:14px 17px}

/* DASHBOARD */
.dg{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.c2{grid-column:span 2}
.gbanner{background:linear-gradient(135deg,#FDF6F3 0%,#FEF9E7 50%,#EAF7F1 100%);border:1px solid var(--bd);border-radius:var(--r);padding:20px 22px;margin-bottom:18px;position:relative;overflow:hidden}
.gbanner::after{content:'🏠';position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:52px;opacity:.12;pointer-events:none}
/* ── ACTIVITY FEED ── */
.feed-card{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;margin-bottom:18px;box-shadow:var(--s0)}
.feed-hdr{padding:12px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700}
.feed-list{max-height:340px;overflow-y:auto}
.feed-item{padding:7px 14px;border-bottom:1px solid var(--bd);display:flex;gap:10px;align-items:center;transition:background .15s;min-height:36px}
.feed-item:last-child{border-bottom:none}
.feed-item:hover{background:var(--sf2)}
.feed-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:11px;flex-shrink:0}
.feed-body{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.feed-main{font-size:12px;color:var(--t);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.feed-main strong{font-weight:700}
.feed-sub{display:flex;align-items:center;gap:5px;flex-shrink:0}
.feed-pts{display:inline-flex;align-items:center;gap:2px;background:var(--yl);color:#92400E;border-radius:10px;padding:1px 6px;font-size:10px;font-weight:700;white-space:nowrap}
.feed-time{font-size:10px;color:var(--t3);font-family:var(--fm);white-space:nowrap;flex-shrink:0}
.feed-react-btn{border:1.5px solid var(--bd2);background:var(--surface);border-radius:14px;padding:2px 7px;font-size:12px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:2px;font-family:var(--fb)}
.feed-react-btn:hover{border-color:var(--terra);background:var(--tl)}
.feed-react-btn.mine{border-color:var(--terra);background:var(--tl)}
.feed-react-cnt{font-size:10px;font-weight:700;color:var(--t2)}
.feed-how{font-size:11px;color:var(--t3);font-style:italic;white-space:nowrap}
.feed-empty{padding:24px;text-align:center;color:var(--t3);font-size:13px}
/* ── LOGIN LANG SELECTOR ── */
.lang-sel{display:flex;gap:8px;justify-content:center;margin-bottom:16px}
.lang-btn-sel{padding:7px 18px;border-radius:20px;border:2px solid var(--bd);background:#fff;font-size:13px;font-weight:700;cursor:pointer;transition:all .15s;font-family:'Nunito',sans-serif}
.lang-btn-sel.active{border-color:#E8704A;background:#FDF0EB;color:#E8704A}
.gtitle{font-family:var(--fw);font-size:24px;font-weight:500;font-style:italic;margin-bottom:4px}
.gsub{font-size:13px;color:var(--t2);font-weight:600}
.tpills{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}
.tpill{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;transition:all .15s}
.tpill:hover{transform:translateY(-1px);box-shadow:var(--s0)}

/* CAROUSEL */
.cwr{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;margin-bottom:18px;box-shadow:var(--s0)}
.ctabs{display:flex;border-bottom:1px solid var(--bd)}
.ctab{flex:1;padding:11px 14px;border:none;background:none;cursor:pointer;font-family:var(--fb);font-size:11.5px;font-weight:700;color:var(--t3);border-bottom:2.5px solid transparent;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:5px}
.ctab.on{color:var(--terra);border-bottom-color:var(--terra)}
.ctab:hover:not(.on){color:var(--t2);background:var(--sf2)}
.cdots{display:flex;align-items:center;gap:5px;padding:0 14px}
.cdot2{width:6px;height:6px;border-radius:50%;background:var(--bd2);cursor:pointer;transition:all .2s}
.cdot2.on{background:var(--terra);width:16px;border-radius:3px}
#ctrack{display:flex;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.cslide{min-width:100%;flex-shrink:0}
.pgrid{padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:11px}
.pcard{background:var(--sf2);border-radius:var(--rs);padding:13px;cursor:pointer;transition:all .15s;border:1px solid transparent}
.pcard:hover{background:var(--surface);box-shadow:var(--s0);border-color:var(--bd)}
.phdr{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.pnm{font-size:13px;font-weight:800;flex:1}
.pcnt{font-size:11px;font-family:var(--fm);color:var(--t3)}
.ptr{height:7px;background:var(--bd);border-radius:4px;overflow:hidden}
.pfl{height:100%;border-radius:4px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.pft{display:flex;justify-content:space-between;margin-top:6px;font-size:10.5px;color:var(--t3)}
.bwrap{padding:18px}
.brow{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.blbl{width:95px;font-size:12px;color:var(--t2);font-weight:700;text-align:right;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bout{flex:1;height:23px;background:var(--sf2);border-radius:6px;overflow:hidden;position:relative}
.bin{height:100%;border-radius:6px;display:flex;align-items:center;padding-left:9px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.bval{font-size:11px;font-family:var(--fm);color:#fff;font-weight:600}
.bnum{width:26px;font-size:11px;font-family:var(--fm);color:var(--t3);text-align:right;flex-shrink:0}

/* TASKS */
.tlist{display:flex;flex-direction:column;gap:7px}
.titem{display:flex;align-items:center;gap:11px;padding:11px 15px;background:var(--surface);border:1px solid var(--bd);border-radius:var(--rs);cursor:pointer;transition:all .15s;box-shadow:var(--s0)}
.titem:hover{border-color:var(--terra);transform:translateY(-1px);box-shadow:var(--s1)}
.titem.done{opacity:.5}
.chkb{width:22px;height:22px;border-radius:50%;border:2px solid var(--bd2);background:var(--sf2);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;transition:all .15s;color:transparent}
.chkb.on{background:var(--green);border-color:var(--green);color:#fff}
.chkb:hover:not(.on){border-color:var(--green);background:var(--gl)}
.tinfo{flex:1;min-width:0}
.ttl{font-size:13.5px;font-weight:700;color:var(--t);margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ttl.sk{text-decoration:line-through;color:var(--t3)}
.tmeta{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--t3);flex-wrap:wrap}
.ctag{padding:2px 7px;border-radius:5px;font-size:11px;font-weight:700}
.dlbl{font-family:var(--fm);font-size:11px}.dlbl.late{color:var(--red)}.dlbl.soon{color:#D97706}
.trgt{display:flex;align-items:center;gap:6px;flex-shrink:0}
.pdot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ptsbdg{font-size:11px;font-weight:800;color:var(--yel);font-family:var(--fm);background:var(--yl);padding:2px 7px;border-radius:5px}
.hbdg{font-size:10px;font-weight:700;color:var(--pur);background:var(--pl);padding:2px 7px;border-radius:5px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* FILTER */
.fbar{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.fc{padding:5px 11px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;border:1.5px solid var(--bd2);background:var(--surface);color:var(--t2);transition:all .15s}
.fc.on{border-color:var(--terra);background:var(--tl);color:var(--terra)}
.fc:hover:not(.on){background:var(--sf2)}

/* SHOPPING */
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:15px}
.scard{background:var(--surface);border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--s0);transition:all .15s}
.scard:hover{box-shadow:var(--s1);transform:translateY(-2px)}
.shdr{padding:13px 15px 10px;display:flex;align-items:center;gap:9px;border-bottom:1px solid var(--bd)}
.sicon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.snm{font-size:14px;font-weight:800;flex:1}
.scnt{font-size:11px;font-family:var(--fm)}
.sitms{padding:7px;max-height:230px;overflow-y:auto}
.si{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;transition:background .15s;cursor:pointer}
.si:hover{background:var(--sf2)}
.sichk{width:18px;height:18px;border-radius:4px;border:2px solid var(--bd2);display:flex;align-items:center;justify-content:center;font-size:10px;transition:all .15s;flex-shrink:0}
.sichk.on{background:var(--green);border-color:var(--green);color:#fff}
.sinm{flex:1;font-size:13px;font-weight:700}.sinm.sk{text-decoration:line-through;color:var(--t3)}
.siqty{font-size:11px;color:var(--t3);font-family:var(--fm);flex-shrink:0}
.sarow{padding:7px;border-top:1px solid var(--bd);display:flex;gap:6px}
.sainp{flex:1;border:1.5px solid var(--bd);border-radius:8px;padding:6px 10px;font-size:13px;font-family:var(--fb);font-weight:600;color:var(--t);background:var(--sf2);transition:border-color .15s}
.sainp:focus{outline:none;border-color:var(--green);background:var(--surface)}
.sabtn{width:32px;height:32px;border-radius:8px;background:var(--green);color:#fff;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1}
.sabtn:hover{background:#3D9E6F}

/* FRIST */
.frit{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--bd)}
.frit:last-child{border-bottom:none}
.fdbox{width:44px;height:44px;background:var(--sf2);border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--bd)}
.fday{font-size:17px;font-weight:800;line-height:1;font-family:var(--fm)}
.fmon{font-size:9px;color:var(--t3);text-transform:uppercase;font-weight:700}
.finf{flex:1}
.ftit{font-size:13.5px;font-weight:700;margin-bottom:2px}
.fcat{font-size:12px;color:var(--t3)}
.fbdg{font-family:var(--fm);font-size:11px;padding:3px 9px;border-radius:6px;font-weight:700;flex-shrink:0}
.fbdg.late{background:var(--rl);color:var(--red)}.fbdg.soon{background:var(--yl);color:#92400E}.fbdg.ok{background:var(--gl);color:#166534}

/* KANBAN */
.kbb{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.kbc{background:var(--sf2);border:1px solid var(--bd);border-radius:var(--r)}
.kbch{padding:11px 13px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800}
.kbcn{margin-left:auto;font-size:11px;color:var(--t3);font-family:var(--fm)}
.kbcs{padding:8px;display:flex;flex-direction:column;gap:6px}
.kbcard{background:var(--surface);border:1px solid var(--bd);border-radius:var(--rs);padding:11px;cursor:pointer;transition:all .15s;box-shadow:var(--s0)}
.kbcard:hover{border-color:var(--terra);transform:translateY(-1px);box-shadow:var(--s1)}
.kbct{font-size:13px;font-weight:700;margin-bottom:7px;line-height:1.4}
.kbcm{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t3)}

/* AUCTION */
.abanner{background:linear-gradient(135deg,var(--bl),var(--pl));border:1.5px solid var(--blue);border-radius:var(--r);padding:16px 20px;margin-bottom:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.aicon{font-size:32px}
.ainf{flex:1}
.atitle{font-family:var(--fw);font-size:18px;font-weight:600;margin-bottom:3px}
.asub{font-size:13px;color:var(--t2)}
.agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.acard{background:var(--surface);border:1.5px solid var(--bd);border-radius:var(--r);overflow:hidden;box-shadow:var(--s0);transition:all .15s}
.acard:hover{box-shadow:var(--s1);transform:translateY(-2px)}
.acard.claimed{border-color:var(--green);opacity:.7}
.acbody{padding:14px}
.actit{font-size:14px;font-weight:700;margin-bottom:6px}
.acmeta{font-size:12px;color:var(--t3);margin-bottom:10px}
.acpts{font-size:20px;font-weight:800;font-family:var(--fm);color:var(--yel);margin-bottom:10px}
.acfoot{padding:10px 14px;border-top:1px solid var(--bd);background:var(--sf2);display:flex;align-items:center;gap:8px}

/* POINTS */
.ptsbanner{background:linear-gradient(135deg,var(--yl),#FEF3C7);border:1px solid #FDE68A;border-radius:var(--r);padding:16px 20px;display:flex;align-items:center;gap:16px;margin-bottom:15px;flex-wrap:wrap}
.ptot{font-family:var(--fw);font-size:36px;font-weight:700;color:#92400E;line-height:1}
.plbl{font-size:12px;color:#A16207;font-weight:700}
.ppgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:9px;flex:1}
.ppchip{background:#fff;border-radius:9px;padding:10px;text-align:center;border:1px solid #FDE68A}
.ppnm{font-size:11px;font-weight:700;color:var(--t2);margin-bottom:3px}
.ppsc{font-size:20px;font-weight:800;font-family:var(--fm)}

/* EMPTY */
.empty{text-align:center;padding:38px 20px;color:var(--t3)}
.ei{font-size:38px;margin-bottom:10px}
.et{font-size:14px;font-weight:700;color:var(--t2);margin-bottom:5px}

/* MODAL */
.mov{display:none;position:fixed;inset:0;background:rgba(44,42,37,.55);backdrop-filter:blur(4px);z-index:1000;align-items:center;justify-content:center}
.mov.open{display:flex}
.mbox{background:var(--surface);border:1px solid var(--bd);border-radius:20px;width:590px;max-width:95vw;max-height:90vh;overflow-y:auto;padding:26px;box-shadow:var(--s2);animation:su .22s cubic-bezier(.4,0,.2,1)}
@keyframes su{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
.mtitle{font-family:var(--fw);font-size:21px;font-weight:500;margin-bottom:18px}
.mftr{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;padding-top:15px;border-top:1px solid var(--bd)}
.fg{margin-bottom:13px}
.fl{display:block;font-size:10.5px;color:var(--t3);margin-bottom:5px;font-family:var(--fm);text-transform:uppercase;letter-spacing:.5px;font-weight:500}
.fl .req{color:var(--red);margin-left:2px}
.fi,.fs,.fta{width:100%;background:var(--sf2);border:1.5px solid var(--bd);border-radius:var(--rs);padding:8px 11px;color:var(--t);font-size:13.5px;font-family:var(--fb);font-weight:600;transition:border-color .15s,background .15s}
.fi:focus,.fs:focus,.fta:focus{outline:none;border-color:var(--terra);background:var(--surface)}
.fi.err{border-color:var(--red)!important}
.fs option{background:var(--surface)}.fta{min-height:65px;resize:vertical}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.fsec{border-top:1px solid var(--bd);margin-top:14px;padding-top:13px}
.fsectit,.fsec-title{font-size:10.5px;color:var(--t3);font-family:var(--fm);text-transform:uppercase;letter-spacing:1px;margin-bottom:9px;font-weight:500}
.ferr{font-size:11px;color:var(--red);margin-top:3px;display:none}

/* ASSIGNEE */
.apick{display:flex;gap:7px;flex-wrap:wrap}
.abtn{display:flex;align-items:center;gap:6px;padding:5px 11px 5px 5px;border-radius:20px;border:2px solid var(--bd);background:var(--sf2);cursor:pointer;font-size:12px;font-weight:700;font-family:var(--fb);color:var(--t2);transition:all .15s}
.abtn.on{background:var(--surface)}

/* RECUR */
.rcchips{display:flex;gap:6px;flex-wrap:wrap}
.rc{padding:5px 11px;border-radius:20px;border:1.5px solid var(--bd2);background:var(--sf2);cursor:pointer;font-size:12px;font-weight:700;font-family:var(--fb);color:var(--t2);transition:all .15s}
.rc.on{border-color:var(--blue);background:var(--bl);color:var(--blue)}

/* SUBTASKS */
.slist{display:flex;flex-direction:column;gap:5px;margin-bottom:7px}
.sitem{display:flex;align-items:center;gap:7px;padding:6px 9px;background:var(--sf2);border-radius:8px;border:1px solid var(--bd)}
.schk{width:15px;height:15px;accent-color:var(--green);cursor:pointer;flex-shrink:0}
.stxt{flex:1;font-size:13px;border:none;background:transparent;color:var(--t);font-family:var(--fb);font-weight:600}
.stxt:focus{outline:none}
.stxt.sk{text-decoration:line-through;color:var(--t3)}
.sdel{background:none;border:none;color:var(--t3);cursor:pointer;font-size:14px;padding:0 2px}
.sdel:hover{color:var(--red)}
.sadd{display:flex;align-items:center;gap:6px;padding:6px 9px;color:var(--t3);font-size:12px;cursor:pointer;border-radius:8px;border:1.5px dashed var(--bd2);background:none;width:100%;font-family:var(--fb);font-weight:700;transition:all .15s}
.sadd:hover{color:var(--terra);border-color:var(--terra)}

/* AI PANEL */
.aipanel{background:linear-gradient(135deg,var(--bl),var(--pl));border:1.5px solid var(--blue);border-radius:var(--rs);padding:14px;margin-top:10px}
.aiptit{font-size:12px;font-weight:800;color:var(--blue);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.aisug{display:flex;align-items:center;gap:8px;padding:7px 9px;background:rgba(255,255,255,.7);border-radius:7px;margin-bottom:5px;cursor:pointer;transition:all .15s;font-size:13px;font-weight:600;border-left:3px solid transparent}
.aisug:hover{background:#fff;transform:translateX(2px)}
.aisug.on{background:#fff;border-left-color:var(--blue)}
.aiload{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--blue);font-weight:600;padding:8px 0}
.aidot{width:6px;height:6px;border-radius:50%;background:var(--blue);animation:blink 1.2s infinite}
.aidot:nth-child(2){animation-delay:.2s}.aidot:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* HELP */
.helppanel{background:var(--pl);border:1.5px solid var(--pur);border-radius:var(--rs);padding:12px;margin-top:8px}
.helptit{font-size:12px;font-weight:800;color:var(--pur);margin-bottom:8px;display:flex;align-items:center;gap:5px}

/* TOAST */
#toast{position:fixed;bottom:26px;right:22px;background:var(--t);color:#fff;border-radius:var(--rs);padding:11px 17px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px;transform:translateY(60px);opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:9000;box-shadow:var(--s2)}
#toast.show{transform:translateY(0);opacity:1}

/* EMOJI/COLOR PICKERS */
.emopt{cursor:pointer;font-size:24px;padding:5px;border-radius:7px;border:2px solid var(--bd);background:var(--sf2);transition:all .15s;display:inline-block}
.emopt:hover,.emopt.on{border-color:var(--terra);background:var(--tl)}
.csw{width:28px;height:28px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:all .15s;flex-shrink:0}
.csw.on{border-color:#333;transform:scale(1.15)}

/* MOBILE */
#hbg{display:none;background:none;border:none;font-size:22px;cursor:pointer;padding:4px 8px;border-radius:8px;color:var(--t)}
#hbg:hover{background:var(--sf2)}
#sbov{display:none;position:fixed;inset:0;background:rgba(44,42,37,.5);z-index:800}
#sbov.open{display:block}
#mobnav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--surface);border-top:1px solid var(--bd);z-index:500;padding:6px 0 max(6px,env(safe-area-inset-bottom));box-shadow:0 -2px 16px rgba(44,42,37,.08)}
.mni{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 10px;cursor:pointer;color:var(--t3);font-size:10px;font-weight:700;font-family:var(--fm);border:none;background:none;border-radius:9px;min-width:50px;transition:all .15s}
.mni .mi{font-size:21px}.mni.on{color:var(--terra)}
.mnrow{display:flex;justify-content:space-around}

@media(max-width:900px){
  #sb{position:fixed;left:-266px;top:0;bottom:0;width:266px;z-index:900;transition:left .25s ease}
  #sb.open{left:0;box-shadow:var(--s2)}
  #hbg{display:flex;align-items:center}
  #mobnav{display:block}
  #content{padding-bottom:78px}
  .dg{grid-template-columns:1fr}.c2{grid-column:span 1}
  .kbb{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr 1fr}
  .mbox{border-radius:20px 20px 0 0;align-self:flex-end;max-height:88vh}
  .mov{align-items:flex-end}
  .frow{grid-template-columns:1fr}
  .agrid{grid-template-columns:1fr}
}
@media(max-width:540px){
  #content{padding:13px 11px 78px}
  .pgrid{grid-template-columns:1fr}
  .sgrid{grid-template-columns:1fr}
  .gtitle{font-size:20px}
}