:root{
  --ink:        #0b0a08;     /* deep warm near-black ground */
  --ink-2:      #14100b;
  --panel:      #1b1710;     /* warm panel */
  --panel-edge: #3a3320;
  --cream:      #f3e7c8;     /* parchment text */
  --cream-dim:  #c8b992;
  --muted:      #948763;
  --gold:       #f0b93e;     /* luminous marigold */
  --gold-bright:#ffd868;
  --gold-deep:  #b57e1f;
  --ember:      #ff7a33;     /* live lamp-flame orange */
  --ember-soft: #ff9c5a;
  --jade:       #34c9a6;
  --lapis:      #66b0e0;     /* brighter secondary jewel */
  --line:       rgba(240,185,62,.24);
  --line-soft:  rgba(240,185,62,.14);
  --shadow:     0 30px 80px -30px rgba(0,0,0,.85);
  --ease:       cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; }
body{
  background:
    radial-gradient(90% 60% at 50% -8%, rgba(255,122,51,.16) 0%, transparent 55%) fixed,
    radial-gradient(120% 80% at 50% -10%, #241a10 0%, var(--ink) 48%) fixed,
    var(--ink);
  color:var(--cream);
  font-family:"Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  min-height:100vh; overflow-x:hidden;
  padding-bottom:env(safe-area-inset-bottom);
}

/* ---- atmosphere ---- */
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.glow{
  position:fixed; top:-24vh; left:50%; transform:translateX(-50%);
  width:86vw; height:64vh; z-index:0; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(255,122,51,.20), transparent 62%),
    radial-gradient(closest-side, rgba(240,185,62,.18), transparent 72%);
  filter:blur(10px); animation:flicker 6s ease-in-out infinite;
}
@keyframes flicker{ 0%,100%{ opacity:1; } 45%{ opacity:.82; } 70%{ opacity:.93; } }

main{ position:relative; z-index:2; max-width:720px; margin:0 auto; padding:0 18px 56px; }

/* ---- app bar ---- */
.appbar{
  position:sticky; top:0; z-index:8;
  display:grid; grid-template-columns:44px 1fr auto auto; align-items:center; gap:8px;
  padding:calc(8px + env(safe-area-inset-top)) 14px 8px;
  background:linear-gradient(180deg, rgba(11,10,8,.94) 70%, transparent);
  backdrop-filter:blur(8px);
}
.ab-btn{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:rgba(240,185,62,.05); color:var(--cream-dim);
  border-radius:12px; cursor:pointer; transition:.2s; font-size:15px; line-height:1;
}
.ab-btn:hover{ color:var(--gold); border-color:rgba(240,185,62,.5); }
.ab-btn.back{ font-size:26px; }
.ab-btn.lang{ font-family:"Amiri",serif; font-size:14px; color:var(--gold); width:auto; padding:0 12px; justify-self:end; }
.brand{ justify-self:center; background:none; border:0; cursor:pointer; padding:6px 10px; }
.brand-mark{
  font-family:"Amiri",serif; font-weight:700; font-size:26px; letter-spacing:.02em;
  background:linear-gradient(180deg,#fff1c4,var(--gold) 55%,var(--ember));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 1px 8px rgba(255,122,51,.3));
}
/* the big hero folds away once you leave home */
body.deep .hero{ display:none; }

/* ---- hero (home) ---- */
.hero{ text-align:center; padding:22px 18px 6px; }
.ornament{ font-family:"Amiri",serif; font-size:30px; color:var(--ember); line-height:1;
  text-shadow:0 0 18px rgba(255,122,51,.5); animation:rise .9s var(--ease) both; }
.wordmark{ margin:6px 0 4px; line-height:1; }
.wordmark .ar{
  display:block; font-family:"Amiri",serif; font-weight:700;
  font-size:clamp(44px,12vw,72px); letter-spacing:.01em;
  background:linear-gradient(180deg,#fff1c4 0%,var(--gold-bright) 34%,var(--gold) 62%,var(--ember) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 2px 18px rgba(255,122,51,.35)); animation:rise .9s .05s var(--ease) both;
}
.wordmark .en{
  display:block; font-family:"Fraunces",serif; font-style:italic; font-weight:400;
  font-size:clamp(14px,4vw,18px); color:var(--cream-dim); letter-spacing:.32em;
  text-transform:uppercase; margin-top:10px; animation:rise .9s .12s var(--ease) both;
}
.tagline{ font-family:"Fraunces",serif; font-style:italic; color:var(--muted);
  font-size:15px; margin:14px auto 0; max-width:34ch; animation:rise .9s .2s var(--ease) both; }

/* ---- search ---- */
.searchbar{ position:sticky; top:56px; z-index:6; padding:14px 0 12px;
  background:linear-gradient(180deg, var(--ink) 70%, transparent); }
.search{
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg,#1c2014,#14170e);
  border:1px solid var(--line); border-radius:16px; padding:13px 15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), var(--shadow);
  transition:border-color .3s, box-shadow .3s;
}
.search:focus-within{ border-color:rgba(240,185,62,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 4px rgba(240,185,62,.08), var(--shadow); }
.search-glyph{ color:var(--gold); font-size:20px; }
#q{ flex:1; background:transparent; border:0; outline:0; color:var(--cream);
  font-family:"Amiri",serif; font-size:23px; min-width:0; }
#q::placeholder{ color:var(--muted); font-size:19px; }
#q::-webkit-search-cancel-button{ display:none; }
.q-clear{ flex:none; width:28px; height:28px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-soft); background:transparent; color:var(--muted);
  font-size:12px; transition:.2s; }
.q-clear:hover{ color:var(--gold); border-color:var(--line); }

/* segmented mode switch with a sliding highlight */
.modeseg{ position:relative; display:grid; grid-template-columns:repeat(2,1fr);
  margin:12px auto 0; max-width:400px;
  background:rgba(20,23,14,.72); border:1px solid var(--line); border-radius:13px; padding:4px; }
.seg-glow{ position:absolute; top:4px; bottom:4px; inset-inline-start:4px; width:calc((100% - 8px)/2);
  border-radius:10px; background:linear-gradient(180deg,#33351f,#23261a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 4px 14px -6px rgba(255,122,51,.4);
  transition:transform .32s var(--ease); }
.modeseg button{ position:relative; z-index:1; border:0; background:transparent; cursor:pointer;
  padding:9px 6px; font-family:"Hanken Grotesk",sans-serif; font-size:14px; font-weight:600;
  color:var(--cream-dim); transition:color .2s; }
.modeseg button.on{ color:var(--gold-bright); }
.modeseg button:not(.on):hover{ color:var(--gold); }
.mode-hint{ text-align:center; color:var(--muted); font-family:"Fraunces",serif; font-style:italic;
  font-size:13px; margin:9px 4px 0; min-height:1.2em; transition:opacity .2s; }

/* scope row: sources + names */
.scope{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:14px; margin:12px auto 0; }
.scope-group{ display:inline-flex; align-items:center; gap:7px; }
.scope-lab{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.src-chip{ display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:1px solid var(--line); background:rgba(20,23,14,.7); border-radius:999px;
  padding:6px 14px 6px 11px; font-family:"Hanken Grotesk",sans-serif; font-size:12.5px;
  color:var(--muted); transition:.2s; }
.src-chip::before{ content:""; width:13px; height:13px; border-radius:4px;
  border:1.5px solid var(--muted); transition:.2s; }
.src-chip.on{ color:var(--gold-bright); border-color:rgba(240,185,62,.45); }
.src-chip.on::before{ background:var(--gold); border-color:var(--gold); box-shadow:inset 0 0 0 2px var(--ink); }
.src-chip:hover{ color:var(--gold); }
.scope-group.names button{ border:1px solid var(--line); background:rgba(20,23,14,.7); cursor:pointer;
  border-radius:8px; padding:5px 11px; font-family:"Hanken Grotesk",sans-serif; font-size:11.5px;
  color:var(--cream-dim); transition:.2s; }
.scope-group.names button.on{ background:linear-gradient(180deg,#2a2c1d,#20231a);
  color:var(--gold-bright); border-color:rgba(240,185,62,.4); }
.scope-group.names button:not(.on):hover{ color:var(--gold); }
.scope-group.names[hidden]{ display:none; }

/* ---- breadcrumb / context ---- */
.crumb{ padding:14px 2px 0; margin:6px 0 -2px; animation:rise .4s var(--ease) both; text-align:start; }
.crumb-kicker{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.crumb-main{ font-family:"Fraunces",serif; font-style:italic; font-size:22px; color:var(--cream);
  line-height:1.3; margin:3px 0; }
.crumb-main b{ font-family:"Amiri",serif; font-style:normal; font-weight:700; color:var(--gold-bright);
  letter-spacing:.1em; unicode-bidi:isolate; font-size:25px; }
.crumb-sub{ font-family:"Fraunces",serif; font-style:italic; color:var(--cream-dim); font-size:13px; }

/* ---- results / passage cards ---- */
.results{ display:flex; flex-direction:column; gap:18px; margin-top:18px; }
.ayah{ position:relative;
  background:linear-gradient(180deg, rgba(38,42,26,.55), rgba(18,21,13,.7));
  border:1px solid var(--panel-edge); border-radius:18px; padding:20px 20px 14px;
  box-shadow:var(--shadow); animation:rise .55s var(--ease) both; }
.ayah.src-bukhari{ border-color:rgba(91,134,179,.28); }
.ayah .top{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.src-badge{ font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; font-family:"Hanken Grotesk",sans-serif; }
.src-badge.quran{ color:var(--gold); border:1px solid rgba(240,185,62,.4); background:rgba(240,185,62,.07); }
.src-badge.bukhari{ color:var(--lapis); border:1px solid rgba(91,134,179,.4); background:rgba(91,134,179,.08); }
.surah-chip{ font-family:"Fraunces",serif; font-style:italic; color:var(--cream-dim); font-size:14px; }
.surah-chip small{ color:var(--muted); font-style:normal; font-family:"Hanken Grotesk";
  font-size:11px; letter-spacing:.08em; }
.open-verse{ cursor:pointer; border-radius:8px; padding:3px 8px; margin:-3px -4px;
  display:inline-flex; align-items:center; gap:6px; transition:.15s; }
.open-verse::before{ content:"❋"; color:var(--muted); font-size:12px; transition:.15s; }
.open-verse:hover{ color:var(--gold-bright); background:rgba(240,185,62,.1); }
.open-verse:hover::before{ color:var(--gold); }
.score{ margin-inline-start:auto; color:var(--lapis); font-size:13px; font-variant-numeric:tabular-nums;
  font-family:"Amiri",serif; }

.verse{ font-family:"Amiri",serif; font-size:29px; line-height:2.3; color:var(--cream);
  text-align:right; direction:rtl; margin:0; }
.verse .end{ color:var(--gold); font-size:.7em; margin:0 .15em; opacity:.85; }
.trans{ margin:14px 0 0; color:var(--cream-dim); font-family:"Fraunces",serif;
  font-size:15px; line-height:1.6; border-top:1px dashed var(--line); padding-top:12px; }
body.ar .trans{ display:none; }

.ayah.is-source{ border-color:rgba(91,134,179,.45);
  box-shadow:inset 0 0 0 1px rgba(91,134,179,.12), var(--shadow); }

/* verse footer actions */
.verse-foot{ display:flex; justify-content:flex-end; margin-top:12px; }
.sim-link{ display:inline-flex; align-items:center; gap:6px;
  border:1px solid rgba(91,134,179,.4); background:rgba(91,134,179,.08);
  color:var(--lapis); border-radius:999px; padding:6px 15px; font-size:13px;
  font-family:"Fraunces",serif; font-style:italic; cursor:pointer; transition:.25s; }
.sim-link:hover{ background:rgba(91,134,179,.18); transform:translateY(-1px); }

/* interactive words */
.word{ cursor:pointer; padding:0 .04em; border-radius:6px; position:relative;
  transition:color .2s, background .2s; touch-action:manipulation; }
.punct{ color:var(--cream); }
.word::after{ content:""; position:absolute; left:8%; right:8%; bottom:.30em; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.30; transform:scaleX(.7); transform-origin:center;
  transition:transform .25s var(--ease), opacity .25s; }
.word:hover{ color:var(--gold-bright); }
.word:hover::after, .word:active::after{ transform:scaleX(1); opacity:1; }
.word:active, .word.expanded{ color:var(--gold-bright); background:rgba(240,185,62,.14); }
.word.match{ color:var(--ember-soft); text-shadow:0 0 14px rgba(255,122,51,.3); }
.word.match::after{ transform:scaleX(1); opacity:1;
  background:linear-gradient(90deg,transparent,var(--ember),transparent); }

/* per-source section headers (similar view) */
.src-section{ font-family:"Fraunces",serif; font-style:italic; color:var(--gold);
  font-size:15px; margin:22px 4px 2px; text-align:start; display:flex; align-items:center; gap:10px; }
.src-section::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--line), transparent); }
.rooted-note{ text-align:center; font-family:"Hanken Grotesk",sans-serif; font-size:13px;
  color:var(--cream-dim); margin:-4px 0 6px; }
.rooted-note b{ font-family:"Amiri",serif; font-size:17px; color:var(--gold-bright); unicode-bidi:isolate; }

/* ayah-by-ayah stepper */
.verse-nav{ display:flex; justify-content:space-between; gap:12px; margin-top:16px;
  animation:rise .5s var(--ease) both; }
.vstep{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:"Amiri",serif; font-size:19px; color:var(--gold);
  background:linear-gradient(180deg, rgba(240,185,62,.12), rgba(255,122,51,.06));
  border:1px solid var(--line); border-radius:12px; padding:11px 16px; cursor:pointer; transition:.18s; }
.vstep:hover:not([disabled]){ color:var(--gold-bright); border-color:rgba(255,122,51,.5); transform:translateY(-1px); }
.vstep[disabled]{ opacity:.25; cursor:default; }

/* ---- onboarding / empty ---- */
.onboard{ padding:26px 6px 40px; animation:rise .8s .2s var(--ease) both; }
.onboard-lead{ text-align:center; font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted); margin:0 0 16px; }
.onboard-modes{ display:flex; flex-direction:column; gap:10px; max-width:460px; margin:0 auto; }
.omode{ display:flex; align-items:center; gap:14px; width:100%; text-align:start; cursor:pointer;
  background:linear-gradient(180deg, rgba(38,42,26,.5), rgba(18,21,13,.6));
  border:1px solid var(--panel-edge); border-radius:14px; padding:14px 16px;
  transition:border-color .2s, transform .12s; }
.omode:hover{ border-color:rgba(240,185,62,.45); transform:translateY(-1px); }
.omode .omk{ flex:none; width:38px; height:38px; display:grid; place-items:center; border-radius:50%;
  border:1px solid var(--line); color:var(--gold); font-family:"Amiri",serif; font-size:20px;
  background:radial-gradient(circle at 50% 35%, rgba(240,185,62,.16), transparent 70%); }
.omode .omt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.omode .omt b{ font-family:"Hanken Grotesk",sans-serif; font-weight:600; font-size:15.5px; color:var(--cream); }
.omode .omt small{ font-family:"Fraunces",serif; font-style:italic; font-size:12.5px; color:var(--muted); }
.omode .omgo{ margin-inline-start:auto; color:var(--muted); font-size:20px; }
.seeds{ text-align:center; color:var(--muted); font-family:"Fraunces",serif; font-style:italic;
  font-size:14px; margin-top:22px; }
.seed{ color:var(--gold); font-family:"Amiri",serif; font-style:normal; cursor:pointer;
  border-bottom:1px dotted var(--line); }
.seed:hover{ color:var(--gold-bright); }

/* ---- word detail bottom sheet ---- */
.scrim{ position:fixed; inset:0; z-index:20; background:rgba(4,5,3,.62);
  backdrop-filter:blur(3px); animation:fade .3s ease both; }
.scrim[hidden]{ display:none; }
.sheet{ position:fixed; left:0; right:0; bottom:0; z-index:21; max-height:88vh;
  background:linear-gradient(180deg,#1a1d12,#0f1109);
  border-top:1px solid rgba(240,185,62,.3); border-radius:22px 22px 0 0;
  box-shadow:0 -30px 80px -20px rgba(0,0,0,.9);
  display:flex; flex-direction:column; animation:slideup .42s var(--ease) both;
  padding-bottom:env(safe-area-inset-bottom); }
.sheet[hidden]{ display:none; }
@media(min-width:680px){ .sheet{ left:50%; transform:translateX(-50%); max-width:560px; bottom:16px; border-radius:22px; } }
.sheet-grip{ width:42px; height:4px; border-radius:4px; background:var(--panel-edge); margin:10px auto 2px; }
.ws-head{ text-align:center; padding:8px 18px 16px; border-bottom:1px solid var(--line); }
.ws-kicker{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.ws-word{ font-family:"Amiri",serif; font-weight:700; font-size:40px; color:var(--gold-bright);
  line-height:1.2; direction:rtl; }
.ws-meta{ display:inline-flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap; justify-content:center; }
.ws-root{ display:inline-flex; align-items:baseline; gap:7px; cursor:pointer;
  background:rgba(20,23,14,.6); border:1px solid var(--line); border-radius:10px; padding:5px 11px;
  unicode-bidi:isolate; transition:.15s; }
.ws-root small{ font-family:"Hanken Grotesk",sans-serif; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }
.ws-root b{ font-family:"Amiri",serif; font-weight:700; font-size:19px; color:var(--gold); letter-spacing:.08em; }
.ws-root:hover{ border-color:rgba(240,185,62,.5); }
.ws-gloss{ font-family:"Fraunces",serif; font-style:italic; font-size:15px; color:var(--lapis);
  direction:ltr; unicode-bidi:isolate; }
.ws-scroll{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 16px 20px; }
.ws-load{ text-align:center; font-family:"Fraunces",serif; font-style:italic; color:var(--muted); padding:26px; }
.ws-load::after{ content:"···"; animation:dots 1.2s steps(3,end) infinite; }

/* primary actions */
.ws-actions{ display:flex; gap:8px; padding:14px 0 4px; }
.ws-act{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--line); background:linear-gradient(180deg, rgba(240,185,62,.1), rgba(255,122,51,.05));
  color:var(--gold); border-radius:12px; padding:11px 12px; cursor:pointer; transition:.18s;
  font-family:"Hanken Grotesk",sans-serif; font-size:13.5px; font-weight:600; }
.ws-act:hover{ color:var(--gold-bright); border-color:rgba(255,122,51,.5); transform:translateY(-1px); }
.ws-act .ic{ font-size:16px; }

/* chip tiers */
.ws-sec{ margin-top:16px; }
.ws-sec-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; }
.ws-sec-head span{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.ws-see{ background:none; border:0; color:var(--gold); font-size:12.5px; cursor:pointer;
  font-family:"Hanken Grotesk",sans-serif; white-space:nowrap; }
.ws-see:hover{ color:var(--gold-bright); }
.ws-chips{ display:flex; flex-wrap:wrap; gap:7px; direction:rtl; }
.wchip{ font-family:"Amiri",serif; font-size:18px; color:var(--cream); line-height:1.2;
  background:rgba(20,23,14,.72); border:1px solid var(--line); border-radius:999px;
  padding:5px 13px; cursor:pointer; transition:.15s; display:inline-flex; align-items:baseline; gap:6px; }
.wchip:hover{ border-color:rgba(240,185,62,.5); color:var(--gold-bright); transform:translateY(-1px); }
.wchip i{ font-family:"Fraunces",serif; font-style:italic; font-size:11px; color:var(--muted); }
.ws-sec-same .ws-sec-head span{ color:var(--gold); }
.ws-sec-same .wchip{ border-color:rgba(240,185,62,.4); background:rgba(240,185,62,.08); color:var(--gold-bright); }
.ws-sec-same .wchip:hover{ border-color:rgba(240,185,62,.7); }

/* Siwar block inside the sheet */
.ws-siwar:not(:empty){ margin-top:16px; border-top:1px solid var(--line); padding-top:6px; }
.siwar-sec{ margin:10px 0 0; padding:12px 14px; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(180deg, rgba(240,185,62,.05), rgba(18,21,13,.35)); }
.siwar-head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.siwar-badge{ font-family:"Amiri",serif; font-size:16px; color:var(--gold-bright);
  border:1px solid var(--line); border-radius:999px; padding:1px 10px; flex:none; }
.siwar-by{ font-family:"Fraunces",serif; font-style:italic; font-size:11.5px; color:var(--muted); }
.siwar-defs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.siwar-defs li{ display:flex; flex-direction:column; gap:2px; }
.siwar-lemma{ font-family:"Amiri",serif; font-size:19px; color:var(--gold-bright); line-height:1.3; }
.siwar-def{ font-family:"Amiri",serif; font-size:15.5px; color:var(--cream); line-height:1.55; }

/* ---- loading ---- */
.loading{ text-align:center; color:var(--muted); font-family:"Fraunces",serif; font-style:italic; padding:30px; }
.loading::after{ content:"·"; animation:dots 1.2s steps(4,end) infinite; }

@keyframes rise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes slideup{ from{ transform:translateY(100%); } to{ transform:none; } }
@media(min-width:680px){ @keyframes slideup{ from{ transform:translate(-50%,100%);} to{ transform:translateX(-50%);} } }
@keyframes dots{ 0%{ content:"·";} 33%{content:"··";} 66%{content:"···";} }
@media(prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } }

/* ---- content library ---- */
.ab-btn.lib{ font-size:19px; justify-self:end; }
.lib-panel{ padding-bottom:calc(18px + env(safe-area-inset-bottom)); }
.lib-head{ padding:4px 4px 10px; }
.lib-title{ font-family:"Fraunces",serif; font-size:20px; color:var(--gold-bright);
  display:flex; flex-direction:column; gap:3px; }
.lib-title small{ font-family:"Fraunces",serif; font-style:italic; font-size:13px; color:var(--muted); }
.lib-list{ display:flex; flex-direction:column; gap:10px; }
.lib-row{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  border:1px solid var(--line-soft); border-radius:14px; padding:13px 15px;
  background:rgba(240,185,62,.04); }
.lib-name{ font-size:16px; color:var(--cream); }
.lib-sub{ font-size:12px; color:var(--muted); margin-top:3px; }
.lib-btn{ flex:none; border-radius:11px; padding:9px 15px; cursor:pointer; font-size:13.5px;
  font-family:"Hanken Grotesk",sans-serif; font-weight:600; transition:.2s; }
.lib-btn.install{ border:1px solid var(--gold-deep);
  background:linear-gradient(180deg,#33351f,#23261a); color:var(--gold-bright); }
.lib-btn.install:hover{ border-color:var(--gold); }
.lib-btn.install:disabled{ opacity:.6; cursor:default; }
.lib-btn.remove{ border:1px solid var(--line-soft); background:transparent; color:var(--muted); }
.lib-btn.remove:hover{ color:var(--gold); border-color:var(--line); }
.lib-inc{ flex:none; font-size:12.5px; color:var(--gold); font-style:italic;
  font-family:"Fraunces",serif; padding:0 6px; }