/* ==========================================================================
   আমার দিনপঞ্জি — v3
   style.css  |  ১. টোকেন ও রিসেট  ২. লেআউট  ৩. কম্পোনেন্ট  ৪. রেসপনসিভ
   ========================================================================== */

/* ---------- ১. টোকেন ---------- */
:root{
  --paper:#EBEEF2; --surface:#FFFFFF; --surface2:#F5F7F9; --inset:#EDF0F4;
  --ink:#141A23; --ink2:#4B5665; --ink3:#7C8797;
  --line:#DBE0E7; --line2:#C4CBD5;
  --night:#131B2A; --night2:#1D2739; --nightInk:#DBE2EC; --nightInk2:#93A0B4; --nightLine:#2A3548;
  --brass:#8E6A22; --brassBright:#C9A24B; --brassSoft:#EFE6CE;
  --rose:#A3324A; --roseSoft:#F6DFE4;
  --amber:#8E6406; --amberSoft:#F7EBD2;
  --leaf:#2D6A4F; --leafSoft:#DCEDE3;
  --focus:#3F6FA8;
  --r:10px; --r-sm:6px;
  --tap:40px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0C1119; --surface:#141B26; --surface2:#19212E; --inset:#101821;
    --ink:#E2E8F0; --ink2:#A7B2C1; --ink3:#7B8797;
    --line:#26303F; --line2:#364356;
    --night:#0F1724; --night2:#18212F; --nightInk:#DDE4EE; --nightInk2:#8E9BAF; --nightLine:#263145;
    --brass:#C9A24B; --brassBright:#E0BE6E; --brassSoft:#2E2718;
    --rose:#E88097; --roseSoft:#341A21;
    --amber:#D9A94A; --amberSoft:#2E2513;
    --leaf:#69C59A; --leafSoft:#122A20;
    --focus:#7BA6DC;
  }
}
:root[data-theme="dark"]{
  --paper:#0C1119; --surface:#141B26; --surface2:#19212E; --inset:#101821;
  --ink:#E2E8F0; --ink2:#A7B2C1; --ink3:#7B8797;
  --line:#26303F; --line2:#364356;
  --night:#0F1724; --night2:#18212F; --nightInk:#DDE4EE; --nightInk2:#8E9BAF; --nightLine:#263145;
  --brass:#C9A24B; --brassBright:#E0BE6E; --brassSoft:#2E2718;
  --rose:#E88097; --roseSoft:#341A21;
  --amber:#D9A94A; --amberSoft:#2E2513;
  --leaf:#69C59A; --leafSoft:#122A20;
  --focus:#7BA6DC;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper); color:var(--ink);
  font-family:"Hind Siliguri","Noto Sans Bengali",system-ui,sans-serif;
  font-size:15px; line-height:1.55; overflow-wrap:anywhere;
}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit; color:inherit; max-width:100%}
button{cursor:pointer; background:none; border:none; padding:0}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px}
h1,h2,h3{font-family:"Tiro Bangla","Hind Siliguri",serif; font-weight:400; margin:0; letter-spacing:.01em}
[hidden]{display:none !important}

/* ---------- ২. লেআউট ---------- */
.app{display:grid; grid-template-columns:1fr; min-height:100vh; align-items:start}
.rail{
  background:var(--night); color:var(--nightInk);
  padding:16px 16px 20px; border-bottom:1px solid var(--nightLine);
}
main{min-width:0; padding:0 14px 90px; width:100%}
.topbar{
  position:sticky; top:0; z-index:30; background:var(--paper);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:8px 14px; margin:0 -14px 0;
}
.brand{font-family:"Tiro Bangla",serif; font-size:17px; margin-right:auto; white-space:nowrap}
.modeswitch{display:inline-flex; border:1px solid var(--line2); border-radius:99px; overflow:hidden; background:var(--surface)}
.modeswitch button{padding:6px 14px; font-size:13.5px; color:var(--ink2); min-height:34px}
.modeswitch button[aria-pressed="true"]{background:var(--ink); color:var(--surface)}
.iconbtn{
  width:var(--tap); height:34px; min-width:38px; border:1px solid var(--line2); border-radius:var(--r-sm);
  background:var(--surface); color:var(--ink2); display:grid; place-items:center; font-size:15px;
}
.iconbtn:hover{background:var(--surface2); color:var(--ink)}
.iconbtn[aria-pressed="true"]{background:var(--brassSoft); border-color:var(--brass); color:var(--brass)}

/* ---------- রেল: ঘড়ি, তারিখ, নামাজ ---------- */
.clock{display:flex; align-items:baseline; gap:.3em; font-family:"Tiro Bangla",serif; line-height:1}
.clock .d{display:inline-block; width:.62em; text-align:center}
.clock .hm{font-size:clamp(34px,10vw,44px); color:var(--nightInk)}
.clock .sec{font-size:clamp(18px,5vw,22px); color:var(--brassBright)}
.clock .mer{font-size:14px; color:var(--nightInk2); font-family:"Hind Siliguri",sans-serif}
.datestack{margin-top:12px; border-top:1px solid var(--nightLine); padding-top:10px; display:grid; gap:4px}
.datestack div{display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--nightInk2)}
.datestack div b{font-weight:500; color:var(--nightInk); font-family:"Tiro Bangla",serif; font-size:15px; text-align:right}
.plannerday{margin-top:10px; background:var(--night2); border:1px solid var(--nightLine); border-radius:var(--r); padding:9px 12px; font-size:12.5px; color:var(--nightInk2)}
.plannerday b{display:block; color:var(--brassBright); font-size:14px; font-weight:500}
.spine{margin-top:16px; position:relative; padding-left:26px}
.spine:before{content:""; position:absolute; left:7px; top:8px; bottom:8px; width:1px; background:var(--nightLine)}
.spine .prog{position:absolute; left:7px; top:8px; width:1px; background:linear-gradient(var(--brass),var(--brassBright))}
.pr{position:relative; display:flex; justify-content:space-between; align-items:center; gap:8px; padding:5px 0; font-size:14px; color:var(--nightInk2)}
.pr:before{content:""; position:absolute; left:-23px; top:50%; transform:translateY(-50%); width:7px; height:7px; border-radius:50%; background:var(--nightLine)}
.pr.past:before{background:var(--nightInk2)}
.pr.next{color:var(--nightInk)}
.pr.next:before{background:var(--brassBright); box-shadow:0 0 0 3px rgba(201,162,75,.22)}
.pr .t{font-family:"Tiro Bangla",serif; font-size:15px; white-space:nowrap}
.pr.anchor{color:var(--brassBright); font-weight:500}
.pr.anchor:before{width:11px; height:11px; left:-25px; background:transparent; border:2px solid var(--brassBright)}
.pr.anchor .hint{font-size:11px; color:var(--nightInk2); margin-left:6px}
.livenow{margin-top:16px; border-top:1px solid var(--nightLine); padding-top:14px}
.livenow .lbl{font-size:12px; color:var(--nightInk2); margin-bottom:5px}
.livenow .cur{font-family:"Tiro Bangla",serif; font-size:20px; color:var(--nightInk); line-height:1.25}
.livenow .rem{font-size:13px; color:var(--brassBright); margin-top:3px}
.livenow .nxt{margin-top:10px; font-size:13px; color:var(--nightInk2)}
.livenow .nxt b{color:var(--nightInk); font-weight:500}
.barwrap{height:4px; background:var(--nightLine); border-radius:2px; margin-top:9px; overflow:hidden}
.barwrap i{display:block; height:100%; background:var(--brassBright)}
.railbtn{margin-top:14px; width:100%; min-height:var(--tap); border:1px solid var(--nightLine); border-radius:var(--r-sm); font-size:13px; color:var(--nightInk2); background:var(--night2)}
.railbtn:hover{color:var(--nightInk)}

/* ---------- ৩. কম্পোনেন্ট ---------- */
/* উইন্ডো স্ট্যাটাস ব্যানার */
.winbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:12px; padding:10px 12px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface); font-size:13.5px;
}
.winbar .k{display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:99px; font-size:12.5px; white-space:nowrap}
.winbar.ovr{border-color:var(--brass); background:var(--brassSoft)}
.winbar.ovr .k{background:var(--brass); color:#fff}
.winbar.grace{border-color:var(--amber); background:var(--amberSoft)}
.winbar.grace .k{background:var(--amber); color:#fff}
.winbar.run .k{background:var(--leafSoft); color:var(--leaf)}
.winbar.shut .k{background:var(--inset); color:var(--ink3)}
.winbar .msg{flex:1; min-width:160px}
.winbar .cd{font-family:"Tiro Bangla",serif; font-size:15px; white-space:nowrap}

/* সতর্কবার্তা */
.alertbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 12px; margin-top:12px; border:1px solid var(--line); background:var(--surface); border-radius:var(--r); font-size:13.5px}
.pill{display:inline-flex; align-items:center; gap:6px; padding:2px 9px; border-radius:99px; font-size:12.5px}
.pill.od{background:var(--roseSoft); color:var(--rose)}
.pill.ds{background:var(--amberSoft); color:var(--amber)}
.pill.ok{background:var(--leafSoft); color:var(--leaf)}
.sp{flex:1}
.alertlist{border:1px solid var(--line); border-top:none; border-radius:0 0 var(--r) var(--r); background:var(--surface); margin-top:-1px; overflow:hidden}
.alertlist button{display:flex; width:100%; gap:10px; align-items:baseline; flex-wrap:wrap; padding:10px 12px; border-top:1px solid var(--line); text-align:left; font-size:13.5px; min-height:var(--tap)}
.alertlist button:hover{background:var(--surface2)}
.alertlist .w{flex:none; font-size:12px}
.alertlist .where{color:var(--ink3); font-size:12px}

/* ট্যাব */
.tabs{display:flex; gap:2px; border-bottom:1px solid var(--line); margin-top:14px; overflow-x:auto; -webkit-overflow-scrolling:touch}
.tabs button{padding:10px 14px; font-size:14.5px; color:var(--ink2); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; min-height:var(--tap)}
.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--brass); font-weight:500}
.view{display:none; padding-top:16px}
.view.on{display:block}

/* সাধারণ */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px}
.row{display:flex; gap:10px; align-items:center}
.wrap{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.muted{color:var(--ink3)}
.tiny{font-size:12px; color:var(--ink3)}
.sec-h{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:20px 0 10px}
.sec-h h2{font-size:18px}
input[type=text],input[type=time],input[type=date],input[type=number],input[type=color],select,textarea{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:8px 10px; width:100%; min-height:38px;
}
textarea{min-height:64px; resize:vertical; line-height:1.5}
input:disabled,select:disabled,textarea:disabled{background:var(--inset); color:var(--ink3); cursor:not-allowed}
.btn{border:1px solid var(--line2); border-radius:var(--r-sm); padding:8px 13px; font-size:13.5px; background:var(--surface); color:var(--ink2); min-height:var(--tap); display:inline-flex; align-items:center; justify-content:center; gap:6px}
.btn:hover{background:var(--surface2); color:var(--ink)}
.btn.primary{background:var(--ink); border-color:var(--ink); color:var(--surface)}
.btn.ghost{border-color:transparent; color:var(--ink3)}
.btn.ghost:hover{color:var(--ink); background:var(--surface2)}
.btn.danger{color:var(--rose)}
.btn.sm{min-height:32px; padding:4px 10px; font-size:13px}
.btn:disabled{opacity:.45; cursor:not-allowed}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:12px; padding:2px 9px; border-radius:99px; border:1px solid var(--line); color:var(--ink2); background:var(--surface2)}
.dot{width:8px; height:8px; border-radius:50%; flex:none}
.badge{font-size:11.5px; padding:1px 7px; border-radius:99px; white-space:nowrap}
.badge.od{background:var(--roseSoft); color:var(--rose)}
.badge.ds{background:var(--amberSoft); color:var(--amber)}
.badge.dn{background:var(--inset); color:var(--ink3)}
.badge.lock{background:var(--inset); color:var(--ink3)}
.emptynote{padding:24px 14px; text-align:center; color:var(--ink3); font-size:14px}
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%,40%{background:var(--brassSoft)}100%{background:transparent}}
@media (prefers-reduced-motion:reduce){.flash{animation:none; outline:2px solid var(--brass)}}
.chk{width:26px; height:26px; flex:none; border:1.5px solid var(--line2); border-radius:6px; background:var(--surface); display:grid; place-items:center; color:transparent}
.chk[aria-pressed="true"]{background:var(--leaf); border-color:var(--leaf); color:#fff}
.chk:disabled{opacity:.5; cursor:not-allowed}
.chk svg{width:14px; height:14px}

/* অগ্রাধিকার তালিকা */
.prio{border:1px solid var(--brass); border-radius:var(--r); background:var(--surface); padding:12px 14px}
.prio > .lbl{font-size:12.5px; color:var(--brass); margin-bottom:8px}
.priolist{display:flex; flex-wrap:wrap; gap:8px}
.prioitem{display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:99px; padding:5px 6px 5px 12px; background:var(--surface2); max-width:100%}
.prioitem .tx{font-family:"Tiro Bangla",serif; font-size:16px; overflow-wrap:anywhere}
.prioitem.done .tx{text-decoration:line-through; color:var(--ink3)}
.prioitem .x{width:26px; height:26px; border-radius:50%; display:grid; place-items:center; color:var(--ink3); flex:none}
.prioitem .x:hover{background:var(--inset); color:var(--rose)}
.prioadd{display:flex; gap:8px; margin-top:10px}
.prioadd input{flex:1}

/* দিনের ব্লক */
.blocks{border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.blk{display:grid; grid-template-columns:4px auto 26px minmax(0,1fr) auto; gap:0 10px; align-items:start; padding:10px 10px 10px 0; border-top:1px solid var(--line)}
.blk:first-child{border-top:none}
.blk .stripe{align-self:stretch; background:var(--line2); border-radius:0 2px 2px 0}
.blk .tm{font-size:12.5px; color:var(--ink3); line-height:1.35; padding-top:2px; min-width:58px}
.blk .tm b{display:block; color:var(--ink2); font-weight:500; font-size:13.5px}
.blk .bd{min-width:0}
.blk .ttl{font-size:15.5px; display:flex; gap:7px; align-items:center; flex-wrap:wrap}
.blk .det{font-size:13.5px; color:var(--ink2); white-space:pre-wrap; margin-top:2px}
.blk .acts{display:flex; gap:2px; flex-wrap:wrap; justify-content:flex-end}
.blk .acts button{width:32px; height:32px; border-radius:var(--r-sm); color:var(--ink3); display:grid; place-items:center; font-size:15px}
.blk .acts button:hover{background:var(--surface2); color:var(--ink)}
.blk.now{background:var(--brassSoft)}
.blk.now .tm b{color:var(--brass)}
.blk.done .ttl{color:var(--ink3)}
.blk.done .det{text-decoration:line-through; text-decoration-color:var(--line2)}
.blk.prayer{background:var(--inset)}
.nowline{height:0; border-top:1px dashed var(--brass); position:relative}
.nowline span{position:absolute; left:8px; top:-10px; background:var(--surface); color:var(--brass); font-size:11px; padding:0 5px}
.locked{opacity:.72}

/* যেকোনো সময়ের টার্গেট — সময়ের ঘর নেই, তাই ছকের থেকে আলাদা করে চেনা যায় */
.anytime{border:1px dashed var(--line2); border-radius:var(--r); background:var(--surface2); overflow:hidden}
.any{display:grid; grid-template-columns:4px 26px minmax(0,1fr) auto; gap:0 10px; align-items:start; padding:10px 10px 10px 0; border-top:1px dashed var(--line2)}
.any:first-child{border-top:none}
.any .stripe{align-self:stretch; background:var(--line2); border-radius:0 2px 2px 0}
.any .bd{min-width:0}
.any .ttl{font-size:15.5px; display:flex; gap:7px; align-items:center; flex-wrap:wrap}
.any .det{font-size:13.5px; color:var(--ink2); white-space:pre-wrap; margin-top:2px}
.any .acts{display:flex; gap:2px; flex-wrap:wrap; justify-content:flex-end}
.any .acts button{width:32px; height:32px; border-radius:var(--r-sm); color:var(--ink3); display:grid; place-items:center; font-size:15px}
.any .acts button:hover{background:var(--surface); color:var(--ink)}
.any.done .ttl{color:var(--ink3)}
.any.done .ttl .nm{text-decoration:line-through}
.any.done .det{text-decoration:line-through; text-decoration-color:var(--line2)}
.chkrow{display:flex; align-items:center; gap:10px; min-height:var(--tap); font-size:14.5px}
.chkrow input[type=checkbox]{width:22px; height:22px; flex:none; accent-color:var(--leaf)}
.chkrow input[type=checkbox]:disabled{cursor:not-allowed}
.chkrow.off{color:var(--ink3)}

/* সাপ্তাহিক ছক */
.gridwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--r); background:var(--surface)}
table.wk{border-collapse:collapse; width:100%; min-width:720px}
table.wk th,table.wk td{border:1px solid var(--line); padding:0; vertical-align:top}
table.wk thead th{background:var(--surface2); padding:8px 10px; text-align:left; font-weight:500; font-size:13.5px; position:relative; min-width:120px}
table.wk thead th .colact{position:absolute; right:4px; top:4px}
table.wk tbody th{background:var(--surface2); padding:8px 10px; text-align:left; font-weight:400; min-width:112px}
table.wk tbody th .g{font-family:"Tiro Bangla",serif; font-size:15px; display:block}
table.wk tbody th .s{font-size:11.5px; color:var(--ink3); display:block; line-height:1.4}
table.wk tbody tr.today th{background:var(--brassSoft)}
table.wk tbody tr.today th .g{color:var(--brass)}
.cell{display:flex; gap:7px; padding:7px 8px; align-items:flex-start; min-height:54px}
.cell input.t{border:none; background:none; padding:0; font-size:13.5px; min-width:0; min-height:24px}
.cell.done input.t{text-decoration:line-through; color:var(--ink3)}
.cell .more{font-size:13px; color:var(--ink3); flex:none; width:28px; height:28px; border-radius:var(--r-sm)}
.cell .chk{width:22px; height:22px; border-radius:5px}
.cellmeta{display:flex; gap:4px; flex-wrap:wrap; margin-top:3px}

/* লক্ষ্য বাক্স */
.target{display:grid; gap:10px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:14px}
.target .cnt{display:flex; align-items:center; gap:8px; font-family:"Tiro Bangla",serif; font-size:17px; flex-wrap:wrap}
.target .cnt input{width:78px; text-align:center; font-family:"Tiro Bangla",serif; font-size:17px}
.meter{height:6px; background:var(--inset); border-radius:3px; overflow:hidden}
.meter i{display:block; height:100%; background:var(--brass)}
.pct{color:var(--ink3); font-size:13px}

/* ফ্রিফর্ম টার্গেট */
.tgtlist{display:grid; gap:8px}
.tgt{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:10px 12px}
.tgt .bd{flex:1; min-width:0}
.tgt .nm{font-size:15px}
.tgt.done .nm{text-decoration:line-through; color:var(--ink3)}
.tgt .cnt{display:flex; align-items:center; gap:6px; margin-top:6px; font-size:13px; flex-wrap:wrap}
.tgt .cnt input{width:66px; text-align:center; min-height:34px}
.tgtadd{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.tgtadd input[type=text]{flex:1 1 200px}
.tgtadd input[type=number]{width:110px; flex:none}
.histrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding:9px 0; border-top:1px solid var(--line)}
.histrow:first-child{border-top:none}
.histrow .dt{font-family:"Tiro Bangla",serif; font-size:15px; min-width:120px}
.histrow .meter{flex:1 1 140px}

/* মাসিক ক্যালেন্ডার */
.mon{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface)}
.mon .dow{background:var(--surface2); padding:7px 4px; font-size:12px; color:var(--ink2); border-bottom:1px solid var(--line); text-align:center}
.mon .cel{position:relative; min-height:84px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:6px; text-align:left; display:flex; flex-direction:column; gap:3px; width:100%}
.mon .cel:nth-child(7n){border-right:none}
.mon .cel.out{color:var(--ink3); background:var(--inset)}
.mon .cel.today{background:var(--brassSoft)}
.mon .cel .g{font-family:"Tiro Bangla",serif; font-size:16px}
.mon .cel .h{font-size:10.5px; color:var(--ink3)}
.mon .cel .mm{height:4px; background:var(--inset); border-radius:2px; margin-top:auto}
.mon .cel .mm i{display:block; height:100%; background:var(--leaf); border-radius:2px}
.mon .cel .fl{display:flex; gap:3px; flex-wrap:wrap}
.mon .rec{position:absolute; right:3px; top:3px; width:26px; height:26px; border-radius:var(--r-sm); display:grid; place-items:center; font-size:12px; color:var(--brass); background:var(--surface); border:1px solid var(--line)}
.mon .rec:hover{background:var(--brassSoft)}

/* অগ্রগতি */
.stack{display:flex; height:14px; border-radius:4px; overflow:hidden; background:var(--inset)}
.stack i{display:block}
.legend{display:grid; gap:6px; margin-top:12px}
.legend .lg{display:flex; align-items:center; gap:8px; font-size:13.5px; flex-wrap:wrap}
.tmplrow{display:flex; align-items:center; gap:8px; padding:8px 0; border-top:1px solid var(--line); flex-wrap:wrap}
.tmplrow:first-child{border-top:none}
.tmplrow .nm{flex:1 1 140px}
.settings-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* মডাল */
.mask{position:fixed; inset:0; background:rgba(12,17,25,.5); display:flex; align-items:flex-end; justify-content:center; z-index:100}
.modal{background:var(--surface); border:1px solid var(--line); border-radius:14px 14px 0 0; width:100%; max-height:92vh; overflow:auto; display:flex; flex-direction:column}
.modal header{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--surface); z-index:2}
.modal header h3{font-size:18px; flex:1; min-width:0}
.modal .body{padding:16px; display:grid; gap:14px}
.modal footer{display:flex; gap:8px; flex-wrap:wrap; padding:12px 16px; border-top:1px solid var(--line); position:sticky; bottom:0; background:var(--surface)}
.fld{display:grid; gap:5px; min-width:0}
.fld>label{font-size:12.5px; color:var(--ink3)}
.two{display:grid; grid-template-columns:1fr; gap:10px}
.catgrid{display:flex; flex-wrap:wrap; gap:6px}
.catgrid button{border:1px solid var(--line); border-radius:99px; padding:6px 12px; font-size:13px; display:flex; align-items:center; gap:6px; color:var(--ink2); min-height:36px}
.catgrid button[aria-pressed="true"]{border-color:currentColor; background:var(--surface2)}

/* অভ্র প্যানেল */
.avro{position:fixed; right:12px; bottom:12px; left:12px; z-index:120; background:var(--surface); border:1px solid var(--line2); border-radius:12px; box-shadow:0 12px 40px rgba(10,16,26,.3); padding:12px; display:grid; gap:8px}
.avro header{display:flex; align-items:center; gap:8px}
.avro header b{flex:1; font-weight:500; font-size:14px}
.avro textarea{min-height:56px; font-size:15px}
.avro .out{min-height:56px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface2); padding:8px 10px; font-size:17px; font-family:"Tiro Bangla",serif; white-space:pre-wrap}
.avro .hintline{font-size:11.5px; color:var(--ink3)}
.avro .acts{display:flex; gap:8px; flex-wrap:wrap}

/* ম্যানুয়াল */
.manual h4{margin:14px 0 4px; font-size:15px; font-family:"Tiro Bangla",serif; font-weight:500}
.manual p{margin:0 0 8px; font-size:14px; color:var(--ink2)}
.manual ul{margin:0 0 10px; padding-left:20px; font-size:14px; color:var(--ink2)}
.manual li{margin-bottom:4px}
.segmented{display:inline-flex; border:1px solid var(--line2); border-radius:99px; overflow:hidden}
.segmented button{padding:6px 14px; font-size:13.5px; color:var(--ink2); min-height:36px}
.segmented button[aria-pressed="true"]{background:var(--ink); color:var(--surface)}

#toast{position:fixed; left:50%; bottom:80px; transform:translateX(-50%); background:var(--ink); color:var(--surface); padding:10px 16px; border-radius:8px; font-size:14px; z-index:300; max-width:90vw; display:none}

/* ---------- ৪. রেসপনসিভ ---------- */
@media (min-width:560px){
  .two{grid-template-columns:1fr 1fr}
  .mask{align-items:center; padding:16px}
  .modal{border-radius:14px; width:min(560px,100%)}
  .modal.wide{width:min(760px,100%)}
  .avro{left:auto; width:380px}
  .blk{grid-template-columns:4px 64px 26px minmax(0,1fr) auto}
}
@media (min-width:900px){
  body{font-size:15.5px}
  .app{grid-template-columns:300px minmax(0,1fr)}
  .rail{position:sticky; top:0; height:100vh; overflow-y:auto; padding:22px 20px 32px; border-bottom:none; border-right:1px solid var(--nightLine)}
  main{padding:0 26px 80px; max-width:1200px}
  .topbar{margin:0 -26px; padding:10px 26px}
  .mon .cel{min-height:104px}
}
@media (max-width:620px){
  .mon .cel{min-height:72px; padding:4px; gap:2px}
  .mon .cel .h{display:none}
  .mon .rec{width:22px; height:22px; font-size:11px}
  .mon .dow{font-size:11px}
  .blk .tm{min-width:52px}
  .sec-h h2{font-size:17px}
}
@media (max-width:380px){
  .topbar{gap:6px; padding:8px 10px}
  .brand{font-size:15px}
  .modeswitch button{padding:6px 10px; font-size:12.5px}
}
@media print{
  .rail,.topbar,.tabs,.avro,#toast{display:none}
  .view{display:block !important}
}