/* ═══════════════════════════════════════════════════
   Repertory — Javed IT Solution
   ═══════════════════════════════════════════════════ */

:root{
  --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --f-m:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --ac:#0066FF; --ac2:#00A6E0; --gold:#B7791F;
  --r-s:8px; --r:12px; --r-l:16px; --r-x:22px;
  --sp:clamp(.9rem,3vw,1.75rem);
  --wrap:1180px;
  --tr:.2s cubic-bezier(.4,0,.2,1);
}

/* ── LIGHT (default) ── */
:root,[data-theme="light"]{
  --bg:#F7F8FA; --srf:#FFFFFF; --srf2:#F1F3F7; --srf3:#E9ECF2;
  --bd:#E3E7ED; --bd2:#CFD5DF;
  --tx:#14171C; --tx2:#59616E; --tx3:#8A93A1;
  --sh:0 1px 2px rgba(20,23,28,.04),0 4px 14px rgba(20,23,28,.05);
  --sh2:0 20px 56px rgba(20,23,28,.16);
  --glass:rgba(255,255,255,.82);
  --mark:rgba(0,102,255,.14);
}
[data-theme="dark"]{
  --bg:#0C0E12; --srf:#14171C; --srf2:#1A1E25; --srf3:#232830;
  --bd:#242932; --bd2:#333A45;
  --tx:#ECEFF4; --tx2:#A0A9B6; --tx3:#6B7484;
  --ac:#4D91FF; --ac2:#38C6F4; --gold:#E0B44C;
  --sh:0 1px 2px rgba(0,0,0,.4),0 4px 16px rgba(0,0,0,.32);
  --sh2:0 24px 64px rgba(0,0,0,.5);
  --glass:rgba(20,23,28,.82);
  --mark:rgba(77,145,255,.22);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
:where(svg){width:1em;height:1em;flex:0 0 auto}

html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--f);background:var(--bg);color:var(--tx);
  font-size:15px;line-height:1.6;min-height:100svh;
  display:flex;flex-direction:column;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  transition:background var(--tr),color var(--tr);
}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
::selection{background:var(--mark)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:99px;border:3px solid var(--bg)}
*::-webkit-scrollbar-thumb:hover{background:var(--tx3)}

/* ── HEADER ── */
.hd{
  position:sticky;top:0;z-index:50;
  background:var(--glass);backdrop-filter:blur(16px) saturate(1.7);
  -webkit-backdrop-filter:blur(16px) saturate(1.7);
  border-bottom:1px solid var(--bd);
}
.hd__in{
  max-width:var(--wrap);margin-inline:auto;padding:.85rem var(--sp);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.hd__id{display:flex;align-items:center;gap:.7rem;min-width:0;flex:1}

/* segmented section nav */
.seg{display:flex;gap:.2rem;background:var(--srf2);border:1px solid var(--bd);border-radius:11px;padding:.2rem;flex:0 0 auto}
.seg__b{
  padding:.4rem .8rem;border:0;border-radius:8px;background:transparent;
  color:var(--tx2);font-size:.845rem;font-weight:550;cursor:pointer;transition:var(--tr);
  white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;
}
.seg__b:hover{color:var(--tx)}
.seg__b.is-on{background:var(--srf);color:var(--tx);box-shadow:var(--sh)}
.seg__b .cnt{background:var(--ac);color:#fff}
.seg__b.is-on .cnt{background:var(--ac);color:#fff}
.hd__id>div{min-width:0}
.hd__mk{width:26px;height:26px;color:var(--ac);flex:0 0 auto}
.hd__id h1{font-size:1.02rem;font-weight:650;letter-spacing:-.015em;line-height:1.25}
.hd__id p{
  font-size:.775rem;color:var(--tx3);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ico{
  display:grid;place-items:center;width:36px;height:36px;flex:0 0 auto;
  border:1px solid var(--bd);border-radius:10px;background:var(--srf);
  color:var(--tx2);cursor:pointer;transition:var(--tr);
}
.ico svg{width:17px;height:17px}
.ico:hover{color:var(--tx);border-color:var(--bd2);background:var(--srf2)}
.ico__l{display:none}
[data-theme="dark"] .ico__d{display:none}
[data-theme="dark"] .ico__l{display:block}

/* ── LAYOUT ── */
.wrap{flex:1;width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 var(--sp) 2.5rem}

.bar{
  position:sticky;top:61px;z-index:40;
  padding:clamp(.8rem,2vw,1.1rem) 0 .7rem;
  background:linear-gradient(var(--bg) 78%,transparent);
  display:grid;gap:.6rem;
}
.search{position:relative;display:flex;align-items:center}
.search>svg{position:absolute;left:.95rem;width:17px;height:17px;color:var(--tx3);pointer-events:none}
.search input{
  width:100%;padding:.78rem 2.8rem;border-radius:var(--r-l);
  background:var(--srf);border:1px solid var(--bd);outline:none;
  transition:var(--tr);box-shadow:var(--sh);
}
.search input::placeholder{color:var(--tx3)}
.search input:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(0,102,255,.12)}
.search input::-webkit-search-cancel-button{display:none}
.search__x{
  position:absolute;right:.6rem;display:grid;place-items:center;
  width:28px;height:28px;border:0;border-radius:8px;
  background:var(--srf2);color:var(--tx2);cursor:pointer;transition:var(--tr);
}
.search__x svg{width:14px;height:14px}
.search__x:hover{background:var(--srf3);color:var(--tx)}

.tabs{display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  padding:.44rem .9rem;border-radius:9px;border:1px solid var(--bd);
  background:var(--srf);color:var(--tx2);font-size:.855rem;font-weight:550;
  cursor:pointer;transition:var(--tr);white-space:nowrap;
  display:inline-flex;align-items:center;gap:.4rem;
}
.tab svg{width:14px;height:14px}
.tab:hover{color:var(--tx);border-color:var(--bd2)}
.tab.is-on{background:var(--ac);border-color:var(--ac);color:#fff}
.tab--an{margin-inline-start:auto}
.cnt{
  font-family:var(--f-m);font-size:.72rem;font-weight:600;
  min-width:1.5em;padding:.05rem .32rem;border-radius:5px;
  background:var(--srf3);color:var(--tx2);
}
.tab--an:hover .cnt{background:var(--srf2)}

.crumb{
  display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;
  font-size:.83rem;color:var(--tx3);padding:0 0 .7rem;
}
.crumb button{
  background:none;border:0;color:var(--ac);cursor:pointer;
  font-weight:550;display:inline-flex;align-items:center;gap:.3rem;padding:0;
}
.crumb button:hover{text-decoration:underline}
.crumb svg{width:12px;height:12px}
.crumb strong{color:var(--tx);font-weight:600}

/* ── CHIP GRID ── */
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.45rem}
.chip{
  display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;
  padding:.62rem .8rem;background:var(--srf);border:1px solid var(--bd);
  border-radius:var(--r);cursor:pointer;text-align:start;transition:var(--tr);
}
.chip:hover{border-color:var(--ac);box-shadow:var(--sh)}
.chip b{font-size:.875rem;font-weight:550;line-height:1.35;min-width:0}
.chip span{font-family:var(--f-m);font-size:.7rem;color:var(--tx3);flex:0 0 auto}

/* ── ROWS ── */
.list{display:grid;gap:.3rem}
.row{background:var(--srf);border:1px solid var(--bd);border-radius:var(--r);transition:var(--tr)}
.row:hover{border-color:var(--bd2)}
.row.is-open{border-color:var(--ac)}
.row__hd{display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem;cursor:pointer}
.row__ar{color:var(--tx3);transition:transform var(--tr);display:grid;place-items:center}
.row__ar svg{width:14px;height:14px}
.row.is-open .row__ar{transform:rotate(90deg);color:var(--ac)}
.row__n{
  font-family:var(--f-m);font-size:.7rem;color:var(--tx3);
  min-width:2.6ch;text-align:end;flex:0 0 auto;
}
.row__t{flex:1;font-size:.88rem;line-height:1.45;min-width:0}
.row__t i{font-style:normal;color:var(--tx3)}
.row__p{font-family:var(--f-m);font-size:.7rem;color:var(--tx3);white-space:nowrap;flex:0 0 auto}
.row__add{
  display:grid;place-items:center;width:27px;height:27px;flex:0 0 auto;
  border:1px solid var(--bd);border-radius:7px;background:transparent;
  color:var(--tx3);cursor:pointer;transition:var(--tr);
}
.row__add svg{width:13px;height:13px}
.row__add:hover{border-color:var(--ac);color:var(--ac)}
.row__add.is-in{background:var(--ac);border-color:var(--ac);color:#fff}
.row__bo{
  padding:.55rem .7rem .65rem 2.1rem;border-top:1px solid var(--bd);
  display:flex;flex-wrap:wrap;gap:.2rem .5rem;
}
.rem{
  font-size:.83rem;color:var(--tx2);cursor:pointer;
  border-bottom:1px solid transparent;transition:var(--tr);
}
.rem:hover{color:var(--ac);border-bottom-color:var(--ac)}
.rem--hi{color:var(--gold);font-weight:650}
mark{background:var(--mark);color:inherit;border-radius:3px;padding:0 .1em}

.empty{text-align:center;padding:clamp(2.5rem,8vw,4rem) 1rem;color:var(--tx3)}
.empty svg{width:34px;height:34px;margin-bottom:.5rem;opacity:.45}
.empty p{font-size:.87rem}
.skl{
  height:44px;border-radius:var(--r);margin-bottom:.3rem;
  background:linear-gradient(90deg,var(--srf),var(--srf2),var(--srf));
  background-size:200% 100%;animation:sk 1.4s infinite;
}
@keyframes sk{to{background-position:-200% 0}}

/* ── PAGE LOOKUP ── */
#pg{padding-inline:2.8rem 1rem}
#pg::-webkit-outer-spin-button,#pg::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#pg{-moz-appearance:textfield;appearance:textfield}

/* ── FOOTER ── */
.ft{
  padding:1.4rem var(--sp) 1.8rem;text-align:center;
  border-top:1px solid var(--bd);display:grid;gap:.3rem;
  font-size:.78rem;color:var(--tx3);
}
.ft a{color:var(--tx2);font-weight:550;border-bottom:1px solid var(--bd2);transition:var(--tr)}
.ft a:hover{color:var(--ac);border-bottom-color:var(--ac)}

/* ── MODAL ── */
.modal{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:var(--sp)}
.modal__bd{position:absolute;inset:0;background:rgba(12,14,18,.45);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal__pn{
  position:relative;width:min(680px,100%);max-height:min(85svh,780px);
  background:var(--srf);border:1px solid var(--bd);border-radius:var(--r-x);
  box-shadow:var(--sh2);display:flex;flex-direction:column;overflow:hidden;
  animation:pop .24s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}}
.modal__hd{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 1.1rem;border-bottom:1px solid var(--bd);
}
.modal__hd h2{font-size:.98rem;font-weight:650;letter-spacing:-.01em}
.modal__bo{
  padding:.9rem 1.1rem 1.2rem;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;flex:1;
}
.an__pick{display:grid;gap:.3rem;margin-bottom:1rem}
.an__pick .row{background:var(--srf2)}
.an__x{background:none;border:0;color:var(--tx3);cursor:pointer;padding:.25rem;display:grid;place-items:center}
.an__x svg{width:13px;height:13px}
.an__x:hover{color:#D93F5B}
.an__hd{
  font-size:.72rem;font-weight:600;color:var(--tx3);
  text-transform:uppercase;letter-spacing:.05em;margin-bottom:.4rem;
}
.an__t{width:100%;border-collapse:collapse;font-size:.85rem}
.an__t th{
  text-align:start;font-size:.68rem;color:var(--tx3);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;
  padding:.3rem .45rem;border-bottom:1px solid var(--bd);
}
.an__t td{padding:.36rem .45rem;border-bottom:1px solid var(--bd)}
.an__t tr:last-child td{border-bottom:0}
.an__r{font-weight:600}
.an__bw{background:var(--srf3);border-radius:99px;height:5px;width:100%}
.an__b{height:5px;border-radius:99px;background:var(--ac);min-width:5px}

.toast{
  position:fixed;left:50%;bottom:1.4rem;translate:-50% 0;z-index:100;
  background:var(--tx);color:var(--bg);border-radius:99px;
  padding:.5rem 1.05rem;font-size:.82rem;font-weight:500;
  box-shadow:var(--sh2);animation:pop .2s;
}

/* ── RESPONSIVE ── */
@media (max-width:640px){
  body{font-size:14.5px}
  .bar{top:57px}
  .hd__in{padding:.7rem var(--sp)}
  .hd__mk{width:23px;height:23px}
  .chips{grid-template-columns:repeat(2,1fr)}
  .row__p{display:none}
  .row__bo{padding-inline-start:.85rem}
  .tab--an{margin-inline-start:0}
}
@media (max-width:380px){
  .chips{grid-template-columns:repeat(2,1fr);gap:.35rem}
  .chip{padding:.5rem .6rem;flex-direction:column;align-items:flex-start;gap:.05rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* ── MONOGRAPH ── */
.mono{background:var(--srf);border:1px solid var(--bd);border-radius:var(--r-l);padding:clamp(1rem,2.6vw,1.6rem)}
.mono__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem .8rem;padding-bottom:.7rem;border-bottom:1px solid var(--bd);margin-bottom:.9rem}
.mono__h h2{font-size:clamp(1.05rem,2.6vw,1.3rem);font-weight:650;letter-spacing:-.015em}
.mono__c{font-size:.86rem;color:var(--tx2)}
.mono__ab{font-family:var(--f-m);font-size:.72rem;color:var(--tx3);margin-inline-start:auto}
.mono__i{font-size:.9rem;color:var(--tx2);line-height:1.72;margin-bottom:1rem}
.mono__s{display:grid;gap:.5rem}
.msec{border:1px solid var(--bd);border-radius:var(--r);overflow:hidden;background:var(--srf)}
.msec__h{
  display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;cursor:pointer;
  font-size:.83rem;font-weight:600;color:var(--tx);background:var(--srf2);
}
.msec__h svg{width:13px;height:13px;color:var(--tx3);transition:transform var(--tr)}
.msec.is-open .msec__h svg{transform:rotate(90deg);color:var(--ac)}
.msec__b{padding:.6rem .7rem .7rem;font-size:.865rem;color:var(--tx2);line-height:1.7}
.mono__act{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem;padding-top:.9rem;border-top:1px solid var(--bd)}

.btn{
  display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;
  border:1px solid var(--bd);border-radius:9px;background:var(--srf);color:var(--tx2);
  font-size:.83rem;font-weight:550;cursor:pointer;transition:var(--tr);
}
.btn svg{width:14px;height:14px}
.btn:hover{border-color:var(--ac);color:var(--ac)}
.btn--p{background:var(--ac);border-color:var(--ac);color:#fff}
.btn--p:hover{background:var(--ac);color:#fff;filter:brightness(1.08)}

/* remedy chip grid — frequency সহ */
.chip__x{display:flex;flex-direction:column;align-items:flex-start;gap:.05rem}
.chip__sub{font-size:.72rem;color:var(--tx3);font-weight:400}

/* analysis */
.an__act{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.an__r{font-weight:600;cursor:pointer}
.an__r:hover{color:var(--ac);text-decoration:underline}
.an__link{cursor:pointer}
.an__link:hover{color:var(--ac)}

/* modal body sections reuse */
.modal__bo .mono{border:0;padding:0;background:transparent}

@media (max-width:900px){
  .hd__in{flex-wrap:wrap;row-gap:.55rem}
  .seg{order:3;width:100%;justify-content:space-between}
  .seg__b{flex:1;justify-content:center;padding-inline:.4rem}
  .hd__id{flex:1 1 auto}
}
@media (max-width:640px){
  .bar{top:auto;position:static}
  .hd{position:static}
  .mono__ab{margin-inline-start:0;width:100%}
}