:root{
  --bg:#040608;
  --bg-2:#0a1118;
  --bg-3:#111924;
  --panel:rgba(8,12,20,.68);
  --panel-2:rgba(10,16,27,.88);
  --soft:rgba(255,255,255,.045);
  --soft-2:rgba(255,255,255,.08);
  --line:rgba(255,255,255,.085);
  --line-2:rgba(107,148,255,.20);
  --text:#edf4ff;
  --muted:#8d9fbc;
  --accent:#4e7fff;
  --accent-2:#6ba5ff;
  --accent-3:#7fe5ff;
  --shadow:0 30px 80px rgba(0,0,0,.48);
  --shadow-soft:0 16px 36px rgba(0,0,0,.28);
  --radius:28px;
  --radius-sm:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 15% 8%, rgba(255,185,87,.12), transparent 22%),
    radial-gradient(circle at 82% 12%, rgba(103,210,255,.10), transparent 20%),
    radial-gradient(circle at 50% 100%, rgba(255,120,87,.08), transparent 26%),
    linear-gradient(180deg, #0b1116 0%, #060a0f 38%, #040608 100%);
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer;border:0}
select,input{outline:none}
::selection{background:rgba(98,156,255,.35);color:#fff}

.bg,.fx-orbs,.cursor-glow{position:fixed;inset:0;pointer-events:none}
.bg-base{
  background:
    radial-gradient(circle at 18% 12%, rgba(82,127,255,.18), transparent 24%),
    radial-gradient(circle at 85% 20%, rgba(127,229,255,.08), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 30%);
  animation:baseShift 18s ease-in-out infinite alternate;
}
.bg-logo{
  background:url('../assets/logo.webp') center center/900px auto no-repeat;
  opacity:.085;
  filter:drop-shadow(0 0 50px rgba(90,140,255,.22)) saturate(1.1);
  animation:logoFloat 12s ease-in-out infinite;
}
.bg-vignette{background:radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.54) 100%)}
.bg-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:72px 72px;
  opacity:.18;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 88%);
  animation:gridMove 24s linear infinite;
}
.bg-noise{
  opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode:soft-light;
}
.fx-orbs{overflow:hidden;z-index:0}
.fx-orbs span{
  position:absolute;display:block;border-radius:50%;
  background:radial-gradient(circle, rgba(122,174,255,.34), rgba(122,174,255,.08) 40%, transparent 70%);
  filter:blur(2px);
  animation:orbMove linear infinite;
  opacity:.22;
}
.cursor-glow{
  width:360px;height:360px;left:-180px;top:-180px;z-index:0;
  border-radius:50%;opacity:.24;
  background:radial-gradient(circle, rgba(96,147,255,.28), rgba(127,229,255,.10) 34%, transparent 70%);
  filter:blur(22px);
  transition:transform .14s ease-out;
}

.app-shell{position:relative;z-index:1;padding:24px 18px 112px}
.app{width:min(1520px,100%);margin:0 auto}

.topbar,.card,.credit{
  backdrop-filter:blur(22px) saturate(1.12);
  -webkit-backdrop-filter:blur(22px) saturate(1.12);
}
.topbar{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:18px 22px;margin-bottom:20px;border-radius:32px;
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.02));
  border:1px solid var(--line);box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  animation:enterTop .8s cubic-bezier(.22,.8,.22,1);
}
.topbar::before,.card::before,.credit::before,.glass-shine::after{
  content:'';position:absolute;pointer-events:none;
}
.topbar::before,.card::before,.credit::before{
  inset:0;border-radius:inherit;
  background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 18%, transparent 82%, rgba(255,255,255,.025));
}
.glass-shine::after{
  top:-20%;left:-30%;width:40%;height:140%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  transform:skewX(-16deg);
  animation:shineSweep 9s ease-in-out infinite;
}
.brand{display:flex;align-items:center;gap:15px}
.brand-logo{
  width:64px;height:64px;object-fit:cover;border-radius:20px;border:1px solid rgba(255,255,255,.10);
  box-shadow:0 12px 34px rgba(63,103,220,.38),0 0 30px rgba(104,154,255,.18);
  animation:logoPulse 6s ease-in-out infinite;
}
.brand h1{margin:0;font-size:1.35rem;font-weight:900;letter-spacing:.01em}
.brand p{margin:3px 0 0;color:var(--muted);font-size:.96rem}
.nav{display:flex;gap:10px;padding:7px;border-radius:20px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.nav-btn{
  position:relative;overflow:hidden;
  color:#dce8ff;padding:12px 18px;border-radius:15px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  border:1px solid transparent;
  transition:transform .24s ease, background .24s ease, box-shadow .24s ease, border-color .24s ease, color .24s ease;
}
.nav-btn::after,.primary-btn::after,.switch-btn::after,.state-btn::after,.flag-chip::after,.fact-delete::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(120deg, transparent 25%, rgba(255,255,255,.18) 50%, transparent 75%);
  transform:translateX(-120%);
  transition:transform .7s ease;
}
.nav-btn:hover,.primary-btn:hover,.switch-btn:hover,.state-btn:hover,.flag-chip:hover,.fact-delete:hover{transform:translateY(-2px)}
.nav-btn:hover::after,.primary-btn:hover::after,.switch-btn:hover::after,.state-btn:hover::after,.flag-chip:hover::after,.fact-delete:hover::after{transform:translateX(120%)}
.nav-btn.active{
  color:#fff;border-color:rgba(118,159,255,.28);
  background:linear-gradient(180deg, rgba(93,133,255,.38), rgba(93,133,255,.14));
  box-shadow:0 14px 28px rgba(77,125,255,.18), inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(124,170,255,.08);
}
.nav-btn.active::before{content:'';position:absolute;left:14px;right:14px;bottom:6px;height:3px;border-radius:999px;background:linear-gradient(90deg, transparent, var(--accent-3), transparent)}

.view{display:none}
.view.active{display:block;animation:fadeUp .45s ease}
.card{
  position:relative;overflow:hidden;border-radius:var(--radius);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(10,16,28,.82), rgba(6,10,18,.92));
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.section-head h2{margin:0;font-size:1.04rem;font-weight:800;letter-spacing:.01em}
.badge{
  padding:8px 12px;border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
  color:#deebff;font-size:.84rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}

.grid-calc{display:grid;grid-template-columns:1.32fr .96fr;gap:18px}
.add-card{grid-column:1/-1;padding:20px}
.facts-card{padding:20px}
.result-card{padding:20px;position:sticky;top:18px;height:fit-content}
.form-row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.field{display:grid;gap:8px}
.field-sm{min-width:220px}
.field.grow{flex:1 1 460px}
.field label{font-size:.88rem;color:var(--muted);padding-left:4px}
.select-wrap{position:relative}
.select-wrap::after{
  content:'';position:absolute;right:16px;top:50%;width:10px;height:10px;margin-top:-7px;
  border-right:2px solid rgba(255,255,255,.7);border-bottom:2px solid rgba(255,255,255,.7);
  transform:rotate(45deg);pointer-events:none;transition:transform .22s ease, opacity .22s ease;
}
.select-wrap:focus-within::after{transform:translateY(2px) rotate(225deg);opacity:1}
select,input{
  width:100%;appearance:none;-webkit-appearance:none;
  color:var(--text);background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)),
    rgba(10,14,22,.94);
  border:1px solid rgba(255,255,255,.10);border-radius:18px;
  padding:15px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-soft);
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
  color-scheme:dark;
}
select:hover,input:hover{border-color:rgba(255,255,255,.16)}
select:focus,input:focus{
  border-color:rgba(118,159,255,.45);
  box-shadow:0 0 0 5px rgba(78,127,255,.14), inset 0 1px 0 rgba(255,255,255,.08), 0 16px 38px rgba(0,0,0,.34);
  transform:translateY(-1px);
}
select option{background:#09111b;color:#eef4ff}

.primary-btn,.switch-btn,.state-btn,.flag-chip,.fact-delete{
  position:relative;overflow:hidden;border-radius:18px;
  border:1px solid rgba(255,255,255,.11);color:#f4f8ff;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.primary-btn{
  min-width:156px;padding:15px 22px;font-weight:800;
  background:linear-gradient(180deg, rgba(94,136,255,.45), rgba(72,111,255,.18));
  box-shadow:0 18px 34px rgba(72,113,255,.24), inset 0 1px 0 rgba(255,255,255,.14);
}
.primary-btn:hover{box-shadow:0 24px 44px rgba(72,113,255,.32), inset 0 1px 0 rgba(255,255,255,.16)}
.primary-btn:active{transform:translateY(0)}

.quick-actions{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.switch-btn{
  padding:12px 16px;font-weight:700;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}
.switch-btn.active,.state-btn.active,.flag-chip.active{
  border-color:rgba(118,159,255,.34);
  background:linear-gradient(180deg, rgba(93,133,255,.34), rgba(93,133,255,.12));
  box-shadow:0 14px 30px rgba(77,125,255,.20), inset 0 1px 0 rgba(255,255,255,.12);
}

.result-boxes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.result-box{
  position:relative;padding:18px;border-radius:22px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
}
.result-box::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(126,235,255,.14), transparent 36%);pointer-events:none}
.result-box.wide{grid-column:1/-1}
.result-box span{display:block;color:var(--muted);font-size:.84rem;margin-bottom:8px}
.result-box strong{display:block;font-size:1.28rem;line-height:1.12}
.summary{
  display:grid;gap:10px;padding:12px;border-radius:22px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  min-height:88px;
}
.summary-item{padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);animation:cardPop .35s ease}
.summary-top{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;color:#dbe7ff;margin-bottom:6px}
.summary-top span{color:var(--muted);text-transform:capitalize}
.summary-title{font-weight:700;margin-bottom:4px}
.summary-text{color:var(--muted);font-size:.93rem}

.fact-list{display:grid;gap:14px}
.fact-list.empty{
  padding:22px;border-radius:24px;border:1px dashed rgba(255,255,255,.11);
  color:var(--muted);background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
}
.fact-item{
  position:relative;padding:16px;border-radius:24px;border:1px solid rgba(255,255,255,.09);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);overflow:hidden;animation:cardPop .35s ease;
}
.fact-item::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(78,127,255,.16), transparent 36%);pointer-events:none}
.fact-top{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:14px}
.fact-name{font-weight:800;font-size:1rem;margin-bottom:5px}
.fact-cat{font-size:.86rem;color:var(--muted)}
.fact-delete{
  width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-size:1.22rem;line-height:1;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.fact-controls{display:grid;gap:14px}
.control-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:8px}
.state-row,.flag-row{display:flex;gap:10px;flex-wrap:wrap}
.state-btn,.flag-chip{padding:11px 14px;background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));font-weight:700}

.grid-book{display:grid;grid-template-columns:380px minmax(0,1fr);gap:18px}
.toc-card,.content-card{padding:18px}
.toc-card{position:sticky;top:18px;height:calc(100vh - 148px);display:flex;flex-direction:column}
.sticky{position:sticky;top:0;z-index:3;padding-bottom:10px;background:linear-gradient(180deg, rgba(8,12,20,.96), rgba(8,12,20,.82), transparent)}
.search-wrap{margin-bottom:14px}
.toc{display:grid;gap:14px;overflow:auto;padding-right:6px}
.toc-group{display:grid;gap:8px;padding:14px;border-radius:22px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);animation:cardPop .35s ease}
.toc-title{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:#d7e6ff}
.toc-link{
  position:relative;padding:12px 14px 12px 16px;border-radius:16px;color:#eef5ff;
  background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.018));border:1px solid rgba(255,255,255,.06);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.toc-link::before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:999px;background:linear-gradient(180deg, var(--accent-2), transparent);opacity:.75}
.toc-link:hover{transform:translateX(4px);border-color:rgba(118,159,255,.24);box-shadow:0 14px 24px rgba(0,0,0,.2)}
.book-meta{margin-bottom:14px;color:var(--muted);font-size:.94rem}
.book-meta strong{color:#fff;font-size:1rem}
.book-content{display:grid;gap:16px}
.doc-block{
  position:relative;padding:20px 22px;border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);box-shadow:var(--shadow-soft);overflow:hidden;animation:cardPop .4s ease;
}
.doc-block::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right, rgba(127,229,255,.10), transparent 34%);pointer-events:none}
.doc-group{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;color:#d5e6ff;margin-bottom:8px}
.doc-block h3{margin:0 0 12px;font-size:1.18rem;line-height:1.25}
.doc-block p,.doc-block li{margin:0 0 10px;color:#dfe9f8;line-height:1.72}
.doc-block ul{margin:0 0 10px 18px;padding:0;display:grid;gap:8px}
mark{padding:.12em .33em;border-radius:8px;background:rgba(102,170,255,.20);color:#fff;box-shadow:0 0 0 1px rgba(102,170,255,.14)}

.credit{
  position:fixed;left:18px;bottom:18px;z-index:4;
  display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:999px;
  background:linear-gradient(180deg, rgba(12,18,29,.82), rgba(8,12,20,.9));border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.06);animation:enterUp .9s cubic-bezier(.22,.8,.22,1);
}
.credit img{width:38px;height:38px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.12);box-shadow:0 0 0 3px rgba(77,125,255,.14)}
.credit span{font-weight:700;color:#eef4ff}

.reveal{animation:fadeUp .65s cubic-bezier(.22,.8,.22,1) both}
.delay-1{animation-delay:.08s}
.delay-2{animation-delay:.16s}
.pulse-in{animation:cardPop .55s cubic-bezier(.22,.8,.22,1) both}
.magnetic{will-change:transform}

@keyframes enterTop{from{opacity:0;transform:translateY(-18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes enterUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes cardPop{0%{opacity:0;transform:translateY(14px) scale(.98)}65%{opacity:1;transform:translateY(-2px) scale(1.01)}100%{opacity:1;transform:none}}
@keyframes shineSweep{0%,18%{transform:translateX(-130%) skewX(-16deg)}34%,100%{transform:translateX(330%) skewX(-16deg)}}
@keyframes logoPulse{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.025)}}
@keyframes logoSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes logoFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.02)}}
@keyframes gridMove{from{transform:translateY(0)}to{transform:translateY(72px)}}
@keyframes orbMove{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(50px,-80px,0) scale(1.08)}100%{transform:translate3d(-40px,-160px,0) scale(.96)}}
@keyframes baseShift{0%{transform:scale(1)}100%{transform:scale(1.04)}}

@media (max-width: 1180px){
  .grid-calc,.grid-book{grid-template-columns:1fr}
  .result-card,.toc-card{position:relative;top:auto;height:auto}
}
@media (max-width: 740px){
  .app-shell{padding:14px 12px 104px}
  .topbar,.card{border-radius:24px}
  .brand-logo{width:56px;height:56px}
  .form-row{flex-direction:column;align-items:stretch}
  .field-sm,.field.grow{min-width:0;flex:1 1 auto}
  .primary-btn{width:100%}
  .result-boxes{grid-template-columns:1fr}
  .nav{width:100%}
  .nav-btn{flex:1}
  .credit{left:12px;right:12px;justify-content:center}
}

.gate{
  position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,191,99,.14), transparent 24%),
    radial-gradient(circle at 80% 16%, rgba(110,216,255,.14), transparent 22%),
    linear-gradient(180deg, rgba(8,14,19,.74), rgba(2,5,12,.92));
  backdrop-filter:blur(18px);
}
.gate.hidden{opacity:0;pointer-events:none;transition:opacity .35s ease}
.gate-card{
  width:min(92vw,500px);padding:30px;border-radius:36px;position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(12,18,28,.92), rgba(8,12,20,.97));
  box-shadow:0 34px 90px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,255,255,.08);
  animation:cardPop .5s ease;
}
.gate-logo{width:86px;height:86px;border-radius:50%;display:block;margin:0 auto 18px;box-shadow:0 14px 44px rgba(255,180,87,.18), 0 8px 36px rgba(91,143,255,.24);animation:logoSpin 20s linear infinite}
.gate-card h1{margin:0 0 8px;text-align:center;font-size:1.6rem}
.gate-card p{margin:0 0 18px;text-align:center;color:var(--muted)}
.gate-form{display:grid;grid-template-columns:1fr 120px;gap:12px}
.gate-error{min-height:24px;padding-top:10px;color:#ff9797;text-align:center;font-size:.92rem}

.search-add-grid{display:grid;grid-template-columns:1.15fr 240px minmax(360px,1fr) 160px;gap:12px;align-items:end}
.field-search{grid-column:1/2}
.add-card input,.search-wrap input,.gate input{
  background:linear-gradient(180deg, rgba(17,28,49,.95), rgba(10,16,29,.96));
}
.add-card select{
  background:linear-gradient(180deg, rgba(17,28,49,.95), rgba(10,16,29,.96));
}
.template-card{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.template-head{margin-bottom:12px}
.copy-btn{
  position:relative;overflow:hidden;border-radius:16px;padding:11px 16px;border:1px solid rgba(130,170,255,.22);
  background:linear-gradient(180deg, rgba(92,133,255,.30), rgba(92,133,255,.10));color:#f4f7ff;font-weight:700;
  box-shadow:0 16px 34px rgba(73,114,255,.18), inset 0 1px 0 rgba(255,255,255,.12);
}
.discord-template{
  margin:0;padding:16px 18px;white-space:pre-wrap;word-break:break-word;font:600 .9rem/1.65 Inter,sans-serif;
  border-radius:22px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(7,14,28,.98), rgba(4,8,18,.96));
  color:#eaf2ff;box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.04);
}
.book-meta{margin-bottom:16px;color:var(--muted)}
.book-content{display:grid;gap:16px}
.doc-block{
  padding:20px;border-radius:24px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);animation:cardPop .35s ease;
}
.doc-group{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(97,145,255,.12);border:1px solid rgba(97,145,255,.18);color:#dce9ff;font-size:.8rem;margin-bottom:12px}
.doc-block h3{margin:0 0 12px;font-size:1.12rem}
.doc-block p,.doc-block li{color:#d9e6fb;line-height:1.7}
.toc{display:grid;gap:14px;max-height:calc(100vh - 260px);overflow:auto;padding-right:4px}
.toc-group{display:grid;gap:8px}
.toc-title{font-size:.82rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);padding:6px 4px}
.toc-link{
  display:block;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:#eef4ff;text-decoration:none;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.toc-link:hover{transform:translateX(4px);border-color:rgba(130,170,255,.22);background:linear-gradient(180deg, rgba(91,138,255,.22), rgba(91,138,255,.08));box-shadow:0 12px 28px rgba(54,98,210,.16)}

@media (max-width: 1200px){
  .search-add-grid{grid-template-columns:1fr 1fr;}
  .field-search,.field.grow,.field.field-sm,.search-add-grid > button{grid-column:auto}
}
@media (max-width: 980px){
  .grid-calc{grid-template-columns:1fr}
  .result-card{position:static}
  .grid-book{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .search-add-grid,.gate-form{grid-template-columns:1fr}
  .topbar{padding:16px}
  .brand-logo{width:56px;height:56px}
}


.summary-mix{
  padding:12px 14px;
  border-radius:18px;
  color:#dbe7ff;
  font-size:.88rem;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(104,135,255,.16), rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.18);
  animation:cardPop .35s ease;
}

.nav-btn,.copy-btn,.state-btn,.flag-chip,.switch-btn,.fact-delete,.primary-btn{
  backdrop-filter: blur(16px);
}

.nav-btn::before,.copy-btn::before,.state-btn::before,.flag-chip::before,.switch-btn::before,.primary-btn::before{
  content:'';
  position:absolute;
  inset:-1px;
  background:linear-gradient(120deg, transparent 10%, rgba(255,255,255,.16) 35%, transparent 60%);
  transform:translateX(-120%);
  opacity:.7;
  pointer-events:none;
}

.nav-btn:hover::before,.copy-btn:hover::before,.state-btn:hover::before,.flag-chip:hover::before,.switch-btn:hover::before,.primary-btn:hover::before{
  animation:shineSweep .95s ease;
}

.fact-item:hover,.result-box:hover,.card:hover{
  transform:translateY(-2px);
  box-shadow:0 22px 48px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
}

@keyframes shineSweep{
  from{transform:translateX(-120%)}
  to{transform:translateX(140%)}
}


.brand-logo{animation:logoSpin 18s linear infinite !important;}
.gate-form input,.select-wrap select,.search-wrap input,.field input{
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
}
.gate-form input:focus,.select-wrap select:focus,.search-wrap input:focus,.field input:focus{
  border-color:rgba(255,191,99,.38);
  box-shadow:0 0 0 4px rgba(255,191,99,.10), 0 18px 30px rgba(0,0,0,.25);
  transform:translateY(-1px);
}
.select-wrap{position:relative}
.select-wrap::after{
  content:'⌄';position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:#d9e8ff;font-size:18px;pointer-events:none;opacity:.9;transition:transform .2s ease, opacity .2s ease;
}
.select-wrap:focus-within::after{transform:translateY(-50%) rotate(180deg);opacity:1}
select{appearance:none;-webkit-appearance:none;padding-right:44px !important}
.nav-btn,.primary-btn,.switch-btn,.copy-btn,.state-btn,.flag-chip,.fact-delete,.toc-link,.doc-block,.card,.result-box,.gate-card,.credit{transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, opacity .22s ease}
.card,.result-box,.fact-item,.doc-block{animation-duration:.55s}
.summary-item,.toc-group,.toc-link,.doc-block,.result-box,.fact-item{animation:cardPop .45s cubic-bezier(.22,.8,.22,1) both}


/* v27 refinements */
body{
  background:
    radial-gradient(circle at 14% 8%, rgba(255,166,79,.16), transparent 20%),
    radial-gradient(circle at 86% 14%, rgba(117,196,255,.12), transparent 20%),
    radial-gradient(circle at 50% 110%, rgba(255,126,94,.10), transparent 26%),
    linear-gradient(180deg, #070b10 0%, #05080c 36%, #030508 100%);
}
.bg-logo{
  background:url('../assets/logo-circle.png') center center/760px auto no-repeat;
  opacity:.07;
}
.brand-logo{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
  animation:brandSpin 12s linear infinite;
  filter:drop-shadow(0 0 18px rgba(115,172,255,.35));
  background:transparent;
}
@keyframes brandSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.brand{align-items:center}
.brand-logo-wrap{border-radius:50%;overflow:hidden}
.gate-logo{
  width:92px;
  height:92px;
  border-radius:50%;
  object-fit:cover;
  animation:gateSpin 14s linear infinite;
  box-shadow:0 0 30px rgba(111,172,255,.18);
}
@keyframes gateSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.gate-card{
  background:linear-gradient(180deg, rgba(11,16,24,.95), rgba(8,12,20,.9));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.gate-form{gap:12px}
#gateInput{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
}
#gateInput::placeholder{color:rgba(232,240,255,.42)}
#gateBtn{
  position:relative;
  overflow:hidden;
  min-width:118px;
  background:linear-gradient(135deg, rgba(255,172,94,.95), rgba(255,128,94,.95));
  color:#111826;
  font-weight:800;
  border-radius:16px;
  box-shadow:0 14px 36px rgba(255,128,94,.28), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
#gateBtn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 18px 42px rgba(255,128,94,.36), inset 0 1px 0 rgba(255,255,255,.45)}
#gateBtn:active{transform:translateY(0) scale(.99)}
#gateBtn::after{
  content:'';
  position:absolute;inset:-120% auto auto -40%;
  width:55%;height:280%;
  transform:rotate(20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  animation:btnShine 3.2s linear infinite;
}
@keyframes btnShine{0%{left:-60%}100%{left:135%}}
.search-stack{position:relative}
.suggest-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;right:0;
  z-index:40;
  max-height:280px;
  overflow:auto;
  padding:8px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(10,15,23,.96), rgba(7,10,17,.98));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(18px);
  animation:suggestIn .18s ease;
}
.suggest-menu.hidden{display:none}
@keyframes suggestIn{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.suggest-item{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  text-align:left;
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
.suggest-item:hover{
  transform:translateX(4px);
  background:rgba(255,255,255,.045);
  border-color:rgba(116,169,255,.24);
}
.suggest-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.suggest-id{font-weight:800;letter-spacing:.01em}
.suggest-title{color:#dfe9fb;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px}
.suggest-cat{
  flex:0 0 auto;
  font-size:.78rem;
  font-weight:700;
  color:#d7e3ff;
  padding:8px 10px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(95,138,255,.26), rgba(127,229,255,.16));
  border:1px solid rgba(115,170,255,.18);
}
select{
  appearance:none;
}
.select-wrap select,
.field input{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.select-wrap select:hover,
.field input:hover,
.select-wrap select:focus,
.field input:focus{
  border-color:rgba(117,170,255,.28);
  box-shadow:0 0 0 4px rgba(90,140,255,.10), inset 0 1px 0 rgba(255,255,255,.06);
}
.select-wrap::after{
  border-color: rgba(220,230,255,.8) transparent transparent transparent;
}


/* v36 option field */
.option-field.hidden{display:none!important}
.option-hint{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);font-size:12px;color:rgba(255,255,255,.75);margin-top:8px}
.fact-variant{margin-top:4px;font-size:12px;color:rgba(255,255,255,.72)}


/* v37 logic build + visible search dropdown */
.view,
.grid-calc,
.search-add-grid,
.add-card,
.field,
.field-search,
.search-stack,
.card,
.template-card {
  overflow: visible !important;
}

.grid-calc{
  position: relative;
}

.add-card{
  position: relative !important;
  z-index: 200 !important;
}

.facts-card,
.result-card,
.toc-card,
.content-card{
  position: relative !important;
  z-index: 1 !important;
}

.search-stack{
  position: relative !important;
  z-index: 300 !important;
}

.suggest-menu{
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
}


/* v40 remove overtreding heading gap */
#optionLabel[style*="display: none"]{
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}


/* v42 hide overtreding menu */
.option-field.hidden{
  display:none !important;
}


/* ===== v45 ocean wave theme ===== */
html, body{
  background:#04111c !important;
}

body{
  isolation:isolate;
}

#oceanVideo{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-4;
  filter:saturate(1.05) contrast(1.02) brightness(.55);
  pointer-events:none;
}

.ocean-overlay{
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(1,8,16,.52) 0%, rgba(3,12,22,.28) 22%, rgba(3,14,24,.12) 48%, rgba(2,11,20,.46) 100%),
    radial-gradient(90rem 50rem at 50% -10%, rgba(64,162,220,.14), transparent 60%),
    radial-gradient(50rem 30rem at 50% 110%, rgba(255,255,255,.06), transparent 40%);
  backdrop-filter: blur(1.5px);
}

.ocean-foam{
  position:fixed;
  left:-12%;
  width:124%;
  pointer-events:none;
  z-index:-2;
  opacity:.20;
  filter: blur(14px);
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 12% 48%, rgba(255,255,255,.95) 0 7%, transparent 8%),
    radial-gradient(circle at 22% 44%, rgba(255,255,255,.9) 0 6%, transparent 7%),
    radial-gradient(circle at 37% 51%, rgba(255,255,255,.92) 0 6%, transparent 7%),
    radial-gradient(circle at 56% 45%, rgba(255,255,255,.88) 0 7%, transparent 8%),
    radial-gradient(circle at 71% 50%, rgba(255,255,255,.92) 0 7%, transparent 8%),
    radial-gradient(circle at 86% 46%, rgba(255,255,255,.9) 0 6%, transparent 7%),
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0));
  border-radius: 999px;
}
.ocean-foam-a{
  bottom: 11vh;
  height: 12vh;
  animation: foamSlamA 8.5s ease-in-out infinite;
}
.ocean-foam-b{
  bottom: 3vh;
  height: 10vh;
  opacity:.14;
  animation: foamSlamB 10s ease-in-out infinite;
}

@keyframes foamSlamA{
  0%,100%{ transform:translateY(14px) scaleX(1); opacity:.08; }
  18%{ transform:translateY(2px) scaleX(1.03); opacity:.12; }
  36%{ transform:translateY(-10px) scaleX(1.06); opacity:.22; }
  50%{ transform:translateY(-18px) scaleX(1.10); opacity:.30; }
  62%{ transform:translateY(-8px) scaleX(1.04); opacity:.18; }
  80%{ transform:translateY(8px) scaleX(1); opacity:.10; }
}
@keyframes foamSlamB{
  0%,100%{ transform:translateY(18px) scaleX(1); opacity:.06; }
  28%{ transform:translateY(6px) scaleX(1.02); opacity:.10; }
  48%{ transform:translateY(-8px) scaleX(1.07); opacity:.18; }
  58%{ transform:translateY(-14px) scaleX(1.09); opacity:.22; }
  74%{ transform:translateY(4px) scaleX(1.01); opacity:.09; }
}

/* panels/cards */
.sidebar,
.sidebar-card,
.card,
.panel,
.content-card,
.toc-card,
.result-card,
.facts-card,
.template-card,
.add-card,
.reader-card{
  background:
    linear-gradient(180deg, rgba(7,20,34,.70), rgba(6,18,31,.60)) !important;
  border-color: rgba(138,195,235,.16) !important;
  box-shadow:
    0 18px 60px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px rgba(92,150,198,.04) !important;
  backdrop-filter: blur(16px) saturate(1.05);
  position:relative;
  overflow:hidden;
}
.sidebar::after,
.sidebar-card::after,
.card::after,
.panel::after,
.content-card::after,
.toc-card::after,
.result-card::after,
.facts-card::after,
.template-card::after,
.add-card::after,
.reader-card::after{
  content:"";
  position:absolute;
  inset:auto -20% 8% -20%;
  height:48%;
  pointer-events:none;
  background:
    linear-gradient(90deg,
      transparent 0%,
      rgba(255,255,255,.04) 24%,
      rgba(116,211,255,.08) 42%,
      rgba(255,255,255,.05) 58%,
      transparent 100%);
  transform: translateX(-65%) skewX(-18deg);
  animation: cardWaveSweep 9s ease-in-out infinite;
}
@keyframes cardWaveSweep{
  0%,100%{ transform: translateX(-75%) skewX(-18deg); opacity:.0; }
  18%{ opacity:.0; }
  32%{ opacity:.45; }
  52%{ transform: translateX(72%) skewX(-18deg); opacity:.2; }
  72%{ opacity:0; }
}

/* keep logo still and clean */
.logo,
.brand-orb,
.brand-logo,
.brand-mark,
.logo-spin-wrap{
  animation:none !important;
  transform:none !important;
  border-radius:999px !important;
  overflow:hidden !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.28), 0 0 22px rgba(120,190,255,.12);
}
.logo img,
.brand-orb img,
.brand-logo img,
.brand-mark img,
.logo-spin-wrap img{
  animation:none !important;
  transform:none !important;
}

/* inputs and controls */
input,
select,
textarea,
.search-input,
.article-select,
.option-select{
  background: linear-gradient(180deg, rgba(8,20,34,.88), rgba(8,20,34,.76)) !important;
  border-color: rgba(118,179,223,.18) !important;
  color: #eef7ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 0 0 1px rgba(0,0,0,.04);
}
input::placeholder,
textarea::placeholder{
  color: rgba(227,240,255,.52) !important;
}
input:focus,
select:focus,
textarea:focus{
  border-color: rgba(121,208,255,.44) !important;
  box-shadow: 0 0 0 4px rgba(52,145,199,.14), 0 8px 22px rgba(0,0,0,.22) !important;
}

/* better buttons */
button,
.btn,
.tab-btn,
.action-btn{
  background:
    linear-gradient(180deg, rgba(11,31,50,.96), rgba(8,24,42,.92)) !important;
  border-color: rgba(135,194,235,.18) !important;
  color:#eef7ff !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
button:hover,
.btn:hover,
.tab-btn:hover,
.action-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(146,213,255,.32) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.32), 0 0 18px rgba(84,160,210,.14);
}

/* search dropdown */
.suggest-menu,
.search-dropdown,
#dropdown,
#searchResults,
#articleDropdown{
  background: linear-gradient(180deg, rgba(5,18,31,.96), rgba(6,18,31,.92)) !important;
  border: 1px solid rgba(130,193,235,.16) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.44), 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(18px);
}
.suggest-item,
.dropdown-item,
.item{
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.suggest-item:hover,
.dropdown-item:hover,
.item:hover{
  transform: translateX(4px);
  background: rgba(73,146,196,.14) !important;
}

/* subtle page motion */
.main-shell,
.page-shell,
.content-shell{
  animation: oceanBreath 8s ease-in-out infinite;
}
@keyframes oceanBreath{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-1px); }
}


/* ===== v49 performance optimization ===== */
html, body{
  background:#07131d !important;
}

#oceanVideo,
#bgVideo{
  filter: brightness(.62) !important;
  will-change: auto !important;
}

.no-video #oceanVideo,
.no-video #bgVideo{
  display:none !important;
}

html.no-video body,
html.low-power body{
  background:
    radial-gradient(70rem 40rem at 50% -10%, rgba(57,141,188,.18), transparent 60%),
    linear-gradient(180deg, #08141f 0%, #0a1d2d 45%, #0b2233 100%) !important;
}

.ocean-overlay{
  backdrop-filter: none !important;
}

body::before{
  backdrop-filter: none !important;
}

body::after{
  opacity:.10 !important;
  animation: shoreWave 16s ease-in-out infinite !important;
  filter: blur(8px) !important;
}

.card,
.panel,
.sidebar,
.sidebar-card,
.content-card,
.toc-card,
.reader-card,
.result-card,
.facts-card,
.template-card,
.add-card,
.doc-card{
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
}

.card::after,
.panel::after,
.sidebar-card::after,
.result-card::after,
.facts-card::after,
.add-card::after{
  animation: cardSweep 24s linear infinite !important;
  opacity:.18 !important;
}

.logo,
.brand-logo,
.brand-orb,
.brand-mark,
.logo-spin-wrap{
  animation: floatLogo 8s ease-in-out infinite !important;
}

button,
.btn,
.action-btn,
.tab-btn,
.suggest-item,
.dropdown-item,
.item,
input,
select,
textarea{
  transition:
    transform .12s ease,
    border-color .12s ease,
    background .12s ease,
    box-shadow .12s ease !important;
}

html.low-power *,
html.low-power *::before,
html.low-power *::after{
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

html.low-power body::after,
html.low-power .card::after,
html.low-power .panel::after,
html.low-power .sidebar-card::after,
html.low-power .result-card::after,
html.low-power .facts-card::after,
html.low-power .add-card::after{
  display:none !important;
}

html.low-power .card,
html.low-power .panel,
html.low-power .sidebar,
html.low-power .sidebar-card,
html.low-power .content-card,
html.low-power .toc-card,
html.low-power .reader-card,
html.low-power .result-card,
html.low-power .facts-card,
html.low-power .template-card,
html.low-power .add-card,
html.low-power .doc-card{
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: linear-gradient(180deg, rgba(8,18,30,.88), rgba(10,22,36,.94)) !important;
}

html.low-power .logo,
html.low-power .brand-logo,
html.low-power .brand-orb,
html.low-power .brand-mark,
html.low-power .logo-spin-wrap{
  animation:none !important;
}