/* StudyFlow – Nông Trại Chăm Chỉ · Kawaii Pastel
   Nguyên tắc: nền kem, khối bo tròn, bóng "nút bấm nổi", chữ tím than đậm để đọc rõ; màu pastel dùng cho nền và nhấn, không dùng cho chữ nhỏ. */
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/nunito-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/nunito-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#fff7f1; --card:#ffffff; --ink:#4a3b5c; --ink2:#6d5b80; --line:#f1e2ea; --soft:#fff0f6;
  --pink:#ffc2d9; --pink2:#ff8fb8; --pink3:#e5568b;
  --mint:#c4f0dc; --mint2:#6fd3a5; --mint3:#2f9e74;
  --lemon:#fff1a8; --lemon2:#f5cf3d; --sky:#c6e6ff; --sky2:#7bbcf0; --lav:#e3d8ff; --lav2:#a58af0; --peach:#ffd9bf;
  --r:22px; --r2:14px;
  --shadow:0 5px 0 rgba(120,90,140,.10),0 14px 30px rgba(120,90,140,.10);
  --pop:0 4px 0 rgba(74,59,92,.16);
  --sky-a:#bfe7ff; --sky-b:#fff0f6;
  --tabs-h:64px; --top-h:58px;
}
:root[data-tod="dusk"]{--sky-a:#ffc9b5;--sky-b:#e3c9ff}
:root[data-tod="night"]{--sky-a:#5b66ad;--sky-b:#b7a6e6}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%;margin:0}
body{font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);background:var(--bg);
  background-image:radial-gradient(circle at 1px 1px,rgba(255,143,184,.18) 1.5px,transparent 0);background-size:26px 26px;
  font-size:16px;line-height:1.5;overflow:hidden;overscroll-behavior:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--lav2);outline-offset:2px;border-radius:10px}
[hidden]{display:none!important}
h1,h2,h3{margin:0;line-height:1.2}
h1{font-size:1.6rem;font-weight:900} h2{font-size:1.2rem;font-weight:800} h3{font-size:1.02rem;font-weight:800}
p{margin:0}
.muted{color:var(--ink2)} .tiny{font-size:.82rem} .center{text-align:center}
.stack{display:flex;flex-direction:column;gap:12px} .stack-s{display:flex;flex-direction:column;gap:6px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .row.end{justify-content:flex-end} .row.between{justify-content:space-between} .grow{flex:1;min-width:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- khung chính ---------- */
#app{display:grid;grid-template-columns:248px 1fr;height:100vh;height:100dvh}
#side{display:flex;flex-direction:column;gap:14px;padding:18px 14px;background:rgba(255,255,255,.7);border-right:2px dashed var(--line);overflow:auto}
#col{display:flex;flex-direction:column;min-width:0;min-height:0}
#top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--top-h);padding:8px 16px;background:rgba(255,247,241,.88);backdrop-filter:blur(8px);border-bottom:2px solid var(--line);position:relative;z-index:5}
#main{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;outline:none}
.brand{display:flex;align-items:center;gap:10px} .brand b{display:block;font-weight:900} .brand small{color:var(--ink2);font-weight:700}
.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--pink);box-shadow:var(--pop);font-size:1.4rem}
.brand-m{display:none} .brand-m .logo{width:34px;height:34px;font-size:1.1rem;border-radius:11px}
.side-foot{margin-top:auto;text-align:center;color:var(--ink2)}
#navSide,#tabs{display:flex}
#navSide{flex-direction:column;gap:6px}
.nav{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;border-radius:16px;background:transparent;text-align:left;font-weight:800;position:relative}
.nav .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:var(--soft);font-size:1.25rem;flex:none}
.nav small{display:block;font-weight:700;color:var(--ink2);font-size:.74rem;margin-top:-2px}
.nav:hover{background:var(--soft)}
.nav[aria-current="page"]{background:var(--pink);box-shadow:var(--pop)}
.nav[aria-current="page"] .ic{background:#fff}
.nav[aria-disabled="true"]{opacity:.5}
.nav .lockic{margin-left:auto}
#tabs{display:none}

.view{padding:18px 16px 28px;max-width:1100px;margin:0 auto;animation:rise .28s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.view.farmview{max-width:none;padding:0;margin:0;display:flex;flex-direction:column;height:100%;animation:none}
.pagehead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.pagehead .big{font-size:2rem}
.pagehead p{color:var(--ink2)}

/* ---------- hud ---------- */
.hud{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#fff;border:2px solid var(--line);font-weight:800;box-shadow:0 3px 0 rgba(120,90,140,.08);white-space:nowrap}
.pill.coin{background:var(--lemon);border-color:#f4e083}
.pill.water{background:var(--sky);border-color:#a9d3f2}
.pill.fert{background:var(--mint);border-color:#a3dcc2}
button.pill{padding:5px 12px}
.lvbox{display:flex;flex-direction:column;gap:2px;min-width:92px}
.lvbox .t{font-size:.72rem;font-weight:800;color:var(--ink2);display:flex;justify-content:space-between;gap:6px}
.avatar{width:38px;height:38px;border-radius:50%;border:3px solid #fff;background:var(--lav);box-shadow:var(--pop);font-size:1.15rem;display:grid;place-items:center;padding:0}

/* ---------- thành phần ---------- */
.card{background:var(--card);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);border:2px solid #fff}
.card.pink{background:var(--soft)} .card.mint{background:#ecfbf4} .card.sky{background:#eef7ff} .card.lav{background:#f5f0ff} .card.lemon{background:#fffbe0}
.card>h2,.card>.chead{margin-bottom:10px}
.chead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.grid{display:grid;gap:14px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 18px;border-radius:999px;border:2px solid rgba(74,59,92,.14);background:#fff;font-weight:800;box-shadow:var(--pop);transition:transform .08s,box-shadow .08s,filter .15s;text-decoration:none;color:var(--ink)}
.btn:hover{filter:brightness(1.03)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(74,59,92,.16)}
.btn.primary{background:var(--pink2);border-color:#f06a9c}
.btn.mint{background:var(--mint2);border-color:#43b88a}
.btn.lav{background:var(--lav2);border-color:#8465e0;color:#fff}
.btn.lemon{background:var(--lemon);border-color:#f0d86a}
.btn.sky{background:var(--sky)}
.btn.ghost{background:transparent;box-shadow:none;border-color:var(--line)}
.btn.danger{background:#ffd3d3;border-color:#f09a9a}
.btn.sm{min-height:36px;padding:4px 14px;font-size:.92rem}
.btn.big{min-height:54px;font-size:1.1rem;padding:10px 26px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;filter:grayscale(.3)}
.linkbtn{border:0;background:none;color:var(--lav2);font-weight:800;text-decoration:underline;padding:6px;min-height:36px}
.x{border:0;background:var(--soft);width:38px;height:38px;border-radius:50%;font-size:1rem;font-weight:900}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--soft);border:2px solid var(--line);font-weight:700;font-size:.9rem;min-height:34px}
button.chip[aria-pressed="true"],.chip.on{background:var(--pink);border-color:var(--pink2)}
.chip.mint{background:var(--mint);border-color:#a3dcc2} .chip.lemon{background:var(--lemon);border-color:#f0d86a} .chip.red{background:#ffd9d9;border-color:#f3a7a7} .chip.sky{background:var(--sky);border-color:#a9d3f2} .chip.lav{background:var(--lav);border-color:#cbbaf6}
.seg{display:inline-flex;background:var(--soft);padding:4px;border-radius:999px;gap:2px;border:2px solid var(--line);flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:6px 14px;border-radius:999px;font-weight:800;min-height:36px;color:var(--ink2)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--pop)}
.field{display:flex;flex-direction:column;gap:4px;font-weight:800;font-size:.9rem}
.field>span{color:var(--ink2)}
input[type=text],input[type=date],input[type=time],input[type=url],input[type=number],input[type=search],select,textarea,#loginName{width:100%;min-height:44px;padding:8px 14px;border-radius:14px;border:2px solid var(--line);background:#fff;font-weight:600;outline:none}
textarea{resize:vertical;line-height:1.55}
input:focus,select:focus,textarea:focus{border-color:var(--pink2);box-shadow:0 0 0 4px rgba(255,143,184,.2)}
.bar{height:12px;border-radius:99px;background:var(--line);overflow:hidden}
.bar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--pink2),#ffb27a);transition:width .5s ease}
.bar.mint>i{background:linear-gradient(90deg,var(--mint2),#9be3c2)} .bar.sky>i{background:linear-gradient(90deg,var(--sky2),#a8d8ff)} .bar.lav>i{background:linear-gradient(90deg,var(--lav2),#c8b6ff)}
.bar.slim{height:8px}
.empty{padding:22px 12px;text-align:center;color:var(--ink2)} .empty .em{font-size:2.2rem;display:block;margin-bottom:6px}
.stat{padding:14px;border-radius:18px;background:#fff;box-shadow:var(--shadow);border:2px solid #fff;display:flex;flex-direction:column;gap:6px}
.stat .n{font-size:1.7rem;font-weight:900;line-height:1} .stat .l{color:var(--ink2);font-weight:700;font-size:.85rem}
.note{padding:10px 14px;border-radius:14px;background:var(--lemon);font-weight:700;font-size:.92rem}
.note.lav{background:var(--lav)} .note.mint{background:var(--mint)} .note.pink{background:var(--pink)}

/* ---------- đăng nhập ---------- */
#login{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;overflow:auto;background:linear-gradient(180deg,var(--sky-a),var(--sky-b))}
.login-card{width:min(440px,100%);background:#fff;border-radius:30px;padding:26px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px;text-align:center;border:3px solid #fff}
.mascot{font-size:3.4rem;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}
#loginForm{display:flex;flex-direction:column;gap:12px;text-align:left}
#loginList{justify-content:center}

/* ---------- Home ---------- */
.hello{display:flex;align-items:center;gap:14px;padding:18px;border-radius:26px;background:linear-gradient(135deg,var(--pink),var(--lav));box-shadow:var(--shadow)}
.hello .mascot{font-size:2.6rem}
.hello h1{font-size:1.45rem}
.quest{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:var(--soft)}
.quest.done{background:var(--mint)} .quest .q{flex:1;min-width:0;font-weight:800}
.quest .ck{width:26px;height:26px;border-radius:50%;border:3px solid var(--pink2);display:grid;place-items:center;font-size:.8rem;background:#fff;flex:none}
.quest.done .ck{background:var(--mint2);border-color:var(--mint3);color:#fff}
.week{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:6px}
.week .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;min-width:0}
.week .col i{display:block;width:100%;max-width:34px;border-radius:10px 10px 4px 4px;background:var(--pink);min-height:4px;transition:height .5s}
.week .col.today i{background:var(--pink2)} .week .col span{font-size:.72rem;font-weight:800;color:var(--ink2)} .week .col b{font-size:.72rem}
.minifarm{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;max-width:260px}
.minifarm div{aspect-ratio:1;border-radius:14px;background:#e9cfae;display:grid;place-items:center;font-size:1.6rem;border:2px solid #fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.06)}
.minifarm div.lock{background:#cfe9b8;opacity:.8;font-size:1rem}
.minifarm div.ripe{background:var(--lemon);animation:pulse 1.4s infinite}
@keyframes pulse{50%{transform:scale(1.05)}}

/* ---------- Focus ---------- */
.focus-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;align-items:start}
.ring{position:relative;width:min(300px,78vw);aspect-ratio:1;margin:6px auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring .trk{stroke:var(--line)} .ring .prg{stroke:var(--pink2);transition:stroke-dashoffset .4s linear}
.ring.brk .prg{stroke:var(--mint2)}
.ring .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.ring .time{font-size:clamp(2.6rem,12vw,3.6rem);font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:1px}
.ring .ph{font-weight:800;color:var(--ink2)}
.stepper{display:inline-flex;align-items:center;gap:6px}
.stepper button{width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:#fff;font-weight:900;font-size:1.2rem}
.stepper b{min-width:64px;text-align:center;font-size:1.15rem}
.plantpick{display:flex;gap:8px;flex-wrap:wrap}
.tip{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:16px;background:var(--mint)}
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
.switch input{width:46px;height:28px;appearance:none;-webkit-appearance:none;border-radius:99px;background:var(--line);position:relative;cursor:pointer;transition:background .2s;flex:none;border:0}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 0 rgba(0,0,0,.12);transition:transform .2s}
.switch input:checked{background:var(--mint2)} .switch input:checked::after{transform:translateX(18px)}

/* ---------- Planner ---------- */
.plan-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:14px;align-items:start}
.addform{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.addform .wide{grid-column:1/-1}
.todo{display:flex;align-items:center;gap:10px;padding:10px;border-radius:16px;background:#fff;border:2px solid var(--line)}
.todo+.todo{margin-top:8px}
.todo .ck{width:32px;height:32px;border-radius:50%;border:3px solid var(--pink2);background:#fff;flex:none;display:grid;place-items:center;font-weight:900;color:#fff;padding:0}
.todo.done .ck{background:var(--mint2);border-color:var(--mint3)}
.todo.done .t{text-decoration:line-through;color:var(--ink2)}
.todo .t{font-weight:800;overflow-wrap:anywhere} .todo .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.todo .del{border:0;background:transparent;color:var(--ink2);width:36px;height:36px;border-radius:50%;flex:none}
.todo .del:hover{background:var(--soft)}
.daytabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.daytabs button{flex:1;min-width:48px;min-height:44px;border:2px solid var(--line);border-radius:14px;background:#fff;font-weight:800}
.daytabs button[aria-pressed="true"]{background:var(--sky);border-color:var(--sky2)} .daytabs button.today{box-shadow:inset 0 -4px 0 var(--pink2)}
.slot{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;border-left:8px solid var(--c,var(--pink2));background:#fff;border-top:2px solid var(--line);border-right:2px solid var(--line);border-bottom:2px solid var(--line)}
.slot+.slot{margin-top:8px}
.slot .tm{font-variant-numeric:tabular-nums;font-weight:800;min-width:92px;color:var(--ink2)}
.slot[data-c="0"]{--c:var(--pink2)} .slot[data-c="1"]{--c:var(--mint2)} .slot[data-c="2"]{--c:var(--sky2)} .slot[data-c="3"]{--c:var(--lav2)} .slot[data-c="4"]{--c:var(--lemon2)}
.slot.now{box-shadow:0 0 0 3px var(--lemon)}

/* ---------- AI Guide ---------- */
details.lesson{background:#fff;border-radius:18px;border:2px solid var(--line);overflow:hidden}
details.lesson+details.lesson{margin-top:10px}
details.lesson summary{display:flex;gap:12px;align-items:center;padding:14px 16px;font-weight:900;cursor:pointer;list-style:none;min-height:56px}
details.lesson summary::-webkit-details-marker{display:none}
details.lesson summary .ic{font-size:1.5rem}
details.lesson summary::after{content:"＋";margin-left:auto;color:var(--pink3);font-size:1.3rem}
details.lesson[open] summary::after{content:"－"} details.lesson[open] summary{background:var(--soft)}
.lesson .body{padding:6px 18px 18px;display:flex;flex-direction:column;gap:12px}
.lesson ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pair>div{padding:12px;border-radius:14px;font-size:.95rem} .pair .bad{background:#ffe3e3} .pair .good{background:var(--mint)}
.pair b{display:block;margin-bottom:4px}
.promptbox{padding:12px;border-radius:14px;background:var(--lav);display:flex;flex-direction:column;gap:8px}
.promptbox code{white-space:pre-wrap;font-family:inherit;font-weight:600}
.quizopt{display:block;width:100%;text-align:left;padding:12px 14px;border-radius:14px;border:2px solid var(--line);background:#fff;font-weight:700;min-height:48px}
.quizopt+.quizopt{margin-top:8px}
.quizopt.right{background:var(--mint);border-color:var(--mint2)} .quizopt.wrong{background:#ffe3e3;border-color:#f3a7a7}
.meter{display:flex;gap:6px} .meter i{flex:1;height:10px;border-radius:99px;background:var(--line)} .meter i.on{background:var(--mint2)}

/* ---------- Notebook ---------- */
.nb{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;align-items:start}
.nlist{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow:auto;padding:2px}
.nitem{width:100%;text-align:left;padding:10px 12px;border-radius:14px;border:2px solid var(--line);background:#fff}
.nitem[aria-current="true"]{background:var(--pink);border-color:var(--pink2)}
.nitem b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nitem small{color:var(--ink2);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nb .back{display:none}
.doc{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#fff;border:2px solid var(--line)}
.doc+.doc{margin-top:8px} .doc .ic{font-size:1.4rem}
.doc a{font-weight:800;color:var(--ink);overflow-wrap:anywhere}

/* ---------- Nông trại ---------- */
#stage{position:relative;flex:1;min-height:260px;background:linear-gradient(180deg,var(--sky-a),var(--sky-b));overflow:hidden;touch-action:none}
:root[data-tod="night"] #stage{background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.9) 0 2px,transparent 3px),radial-gradient(circle at 70% 12%,rgba(255,255,255,.8) 0 2px,transparent 3px),radial-gradient(circle at 85% 30%,rgba(255,255,255,.7) 0 1.5px,transparent 2.5px),radial-gradient(circle at 40% 8%,rgba(255,255,255,.8) 0 1.5px,transparent 2.5px),linear-gradient(180deg,var(--sky-a),var(--sky-b))}
#c{position:absolute;inset:0;width:100%;height:100%;display:block}
#labels,#floats{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#labels>*{pointer-events:auto;position:absolute;left:0;top:0;will-change:transform}
#labels.hide,.hide{display:none!important}
.wlabel{border:2px solid #fff;background:rgba(255,255,255,.92);border-radius:999px;padding:3px 12px;font-weight:900;font-size:.82rem;box-shadow:var(--pop);white-space:nowrap;min-height:30px}
.wlabel.who{background:var(--lemon)}
.plabel{border:2px solid #fff;background:rgba(255,255,255,.88);border-radius:999px;padding:2px 10px;font-weight:900;font-size:.78rem;box-shadow:var(--pop);white-space:nowrap;min-height:28px;min-width:30px}
.plabel.lock{background:rgba(255,255,255,.7)} .plabel.empty{background:rgba(255,194,217,.9);font-size:1rem;padding:0 9px}
.plabel.ripe{background:var(--lemon);animation:hop 1s infinite} .plabel.wet{background:var(--sky)}
@keyframes hop{50%{margin-top:-6px}}
.float{position:fixed;z-index:70;transform:translate(-50%,-50%);font-weight:900;font-size:1.25rem;color:#fff;text-shadow:0 2px 0 var(--ink),0 0 8px rgba(0,0,0,.25);animation:floatup 1.4s ease-out forwards;pointer-events:none;white-space:nowrap}
@keyframes floatup{to{transform:translate(-50%,-90px);opacity:0}}
#plain{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:14px;overflow:auto}
.plain-grid{display:grid;grid-template-columns:repeat(3,minmax(0,92px));gap:10px}
.plain-grid button{aspect-ratio:1;border-radius:18px;border:3px solid #fff;background:#e9cfae;font-size:1.7rem;box-shadow:var(--pop);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;font-size:.8rem}
.plain-grid button .e{font-size:1.9rem}
.plain-grid button.lock{background:#cfe9b8}
.plain-grid button.ripe{background:var(--lemon)}
#farmPanel{background:#fff;border-top:3px solid var(--pink);padding:10px 14px 12px;max-height:46%;overflow:auto;flex:none}
.farmbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
.farmbar .hint{width:100%;text-align:center;color:var(--ink2);font-size:.82rem;font-weight:700}
.shopgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.shopitem{display:flex;flex-direction:column;gap:6px;padding:12px;border-radius:18px;background:#fff;border:2px solid var(--line);text-align:center}
.shopitem .e{font-size:2.2rem}
.shopitem.locked{opacity:.6;background:var(--soft)}
.invrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:var(--soft)}
.invrow+.invrow{margin-top:6px} .invrow .e{font-size:1.6rem}
.slots{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.outfits{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.oitem{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:16px;border:2px solid var(--line);background:#fff;text-align:center;font-weight:800;font-size:.84rem;min-height:104px}
.oitem .sw{width:38px;height:38px;border-radius:50%;border:3px solid #fff;box-shadow:var(--pop);display:grid;place-items:center;font-size:1.1rem}
.oitem.eq{background:var(--pink);border-color:var(--pink2)} .oitem.lock{opacity:.6;background:var(--soft)}
.oitem small{font-weight:700;color:var(--ink2)}

/* ---------- hộp thoại ---------- */
#sheetWrap{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center}
.scrim{position:absolute;inset:0;background:rgba(74,59,92,.45);opacity:0;transition:opacity .2s}
#sheetWrap.on .scrim{opacity:1}
.sheet{position:relative;width:min(620px,100%);max-height:88dvh;max-height:88vh;display:flex;flex-direction:column;background:var(--bg);border-radius:28px 28px 0 0;box-shadow:0 -10px 40px rgba(74,59,92,.25);transform:translateY(30px);opacity:0;transition:transform .22s,opacity .22s;padding-bottom:env(safe-area-inset-bottom)}
#sheetWrap.on .sheet{transform:none;opacity:1}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px 8px}
.sheet-body{padding:6px 18px 20px;overflow:auto}
#toasts{position:fixed;left:0;right:0;top:calc(var(--top-h) + 8px);z-index:60;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 12px}
.toast{background:#fff;border:2px solid var(--pink);border-radius:18px;padding:9px 16px;font-weight:800;box-shadow:var(--shadow);max-width:min(460px,100%);animation:rise .25s both;transition:opacity .3s,transform .3s}
.toast.good{border-color:var(--mint2)} .toast.bad{border-color:#f3a7a7;background:#fff4f4} .toast.out{opacity:0;transform:translateY(-8px)}

/* ---------- responsive ---------- */
@media (max-width:860px){
  #app{grid-template-columns:1fr}
  #side{display:none}
  .brand-m{display:flex}
  #tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;height:calc(var(--tabs-h) + env(safe-area-inset-bottom));padding:6px 4px env(safe-area-inset-bottom);background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-top:2px solid var(--line);justify-content:space-around}
  #col{padding-bottom:calc(var(--tabs-h) + env(safe-area-inset-bottom))}
  #tabs .nav{flex-direction:column;gap:0;padding:4px 2px;justify-content:center;align-items:center;font-size:.64rem;text-align:center;flex:1;min-width:0;border-radius:14px;line-height:1.15}
  #tabs .nav .ic{width:34px;height:30px;font-size:1.15rem;background:transparent}
  #tabs .nav small,#tabs .nav .lockic{display:none}
  #tabs .nav[aria-current="page"]{background:var(--pink)}
  #tabs .nav[aria-current="page"] .ic{background:transparent}
  #tabs .nav[aria-disabled="true"] .ic::after{content:"🔒";font-size:.6rem;position:absolute;top:2px;right:8px}
  .focus-wrap,.plan-wrap{grid-template-columns:1fr}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nb{grid-template-columns:1fr} .nb .ed{display:none} .nb.editing .lst{display:none} .nb.editing .ed{display:block} .nb .back{display:inline-flex}
  .nlist{max-height:none}
  #top{padding:6px 12px}
  .pill{padding:4px 10px;font-size:.92rem}
  .lvbox{min-width:78px}
  .brand-m b{font-size:.92rem}
  #farmPanel{max-height:50%}
}
.coin-ic{display:inline-block;width:1.05em;height:1.05em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6b0,#f7cb3b 55%,#dc9d12);box-shadow:inset 0 0 0 .13em #f0b429,0 1px 0 rgba(0,0,0,.18);vertical-align:-.15em}
@media (max-width:480px){
  .g2{grid-template-columns:1fr} .pair{grid-template-columns:1fr} .addform{grid-template-columns:1fr}
  .view{padding:14px 14px 24px}
  .brand-m b{display:none}
  .hud{gap:6px}
  .hud{flex-wrap:nowrap}
  .lvbox{min-width:50px}.lvbox .t span:last-child{display:none}
  .pill{padding:3px 8px;font-size:.85rem}
  .seg button{padding:6px 10px;font-size:.88rem}
  .avatar{width:34px;height:34px;flex:none}
  .plabel{font-size:.7rem;padding:0 6px;min-height:24px;min-width:24px}
  .wlabel{font-size:.74rem;padding:2px 9px;min-height:26px}
  .farmbar{gap:6px}
  .farmbar .btn{padding:6px 12px;min-height:40px;font-size:.88rem}
  #farmPanel{padding:8px 10px 10px}
}
@media (min-width:720px){
  #sheetWrap{align-items:center}
  .sheet{border-radius:28px;max-height:84vh}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}