:root{
  --gold:#f0b51f; --gold-hi:#ffe9a8; --gold-dim:#8a5a00;
  --ink:#07070a; --ink2:#0d0d12; --line:rgba(240,181,31,.22);
  --txt:#efe6d2; --txt-dim:#a49b8a;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--ink); color:var(--txt);
  font-family:"PingFang SC","Noto Serif SC","Songti SC",ui-serif,system-ui,-apple-system,sans-serif;
  min-height:100vh; overflow-x:hidden;
}
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg .halo{
  position:absolute; top:-18vh; right:-22vw; width:78vw; height:78vw; max-width:900px; max-height:900px;
  background:radial-gradient(circle,rgba(240,181,31,.20) 0%,rgba(240,181,31,.07) 38%,transparent 68%);
  filter:blur(6px); animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.bg .grain{position:absolute;inset:0;opacity:.05;
  background-image:radial-gradient(rgba(255,255,255,.5) .5px,transparent .6px);
  background-size:3px 3px;mix-blend-mode:overlay}

.top{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  padding:22px clamp(16px,4vw,54px) 10px;max-width:1280px;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:14px}
.sigil{width:52px;height:52px;flex:0 0 auto;filter:drop-shadow(0 0 12px rgba(240,181,31,.55))}
.sigil svg{width:100%;height:100%;display:block}
.bt h1{margin:0;font-size:22px;letter-spacing:.42em;font-weight:600;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-dim));
  -webkit-background-clip:text;background-clip:text;color:transparent;text-indent:.42em}
.bt p{margin:4px 0 0;font-size:11px;letter-spacing:.3em;color:var(--txt-dim)}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{
  background:transparent;color:var(--txt-dim);border:1px solid var(--line);
  padding:9px 16px;border-radius:999px;font-size:13px;letter-spacing:.14em;cursor:pointer;
  transition:.25s;font-family:inherit
}
.tab:hover{color:var(--gold-hi);border-color:rgba(240,181,31,.5)}
.tab.on{color:#120d02;background:linear-gradient(180deg,var(--gold-hi),var(--gold));
  border-color:transparent;box-shadow:0 0 22px rgba(240,181,31,.45)}

main{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:10px clamp(16px,4vw,54px) 60px}
.intro{margin:26px 0 30px;max-width:640px}
.kicker{font-size:11px;letter-spacing:.42em;color:var(--gold);opacity:.9}
.intro h2{margin:12px 0 10px;font-size:clamp(22px,4.4vw,34px);font-weight:600;letter-spacing:.06em;
  background:linear-gradient(180deg,#fff6dc,var(--gold) 70%,var(--gold-dim));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.intro p{margin:0;color:var(--txt-dim);font-size:14px;line-height:1.9}

.panel{display:none;animation:fade .45s ease both}
.panel.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}
.tile{
  position:relative;border:1px solid var(--line);border-radius:16px;padding:16px 16px 14px;
  background:linear-gradient(160deg,rgba(240,181,31,.07),rgba(10,10,14,.6) 55%);
  cursor:pointer;overflow:hidden;transition:.3s
}
.tile:before{
  content:"";position:absolute;inset:-40% -60% auto auto;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(240,181,31,.35),transparent 65%);opacity:0;transition:.4s
}
.tile:hover{border-color:rgba(240,181,31,.6);transform:translateY(-4px);
  box-shadow:0 16px 40px -20px rgba(240,181,31,.65)}
.tile:hover:before{opacity:1}
.tile .th{display:flex;align-items:center;gap:10px;position:relative}
.tile .ico{width:40px;height:40px;flex:0 0 auto;color:var(--gold);filter:drop-shadow(0 0 8px rgba(240,181,31,.5))}
.tile .ico svg{width:100%;height:100%;display:block}
.tile .nm{font-size:19px;letter-spacing:.2em;font-weight:600;color:var(--gold-hi)}
.tile .lt{font-size:10px;letter-spacing:.28em;color:var(--txt-dim);margin-top:3px}
.tile .sm{margin-top:10px;font-size:12.5px;line-height:1.7;color:var(--txt-dim);position:relative}
.tile .no{position:absolute;right:12px;bottom:8px;font-family:ui-monospace,monospace;font-size:34px;
  color:rgba(240,181,31,.09);letter-spacing:-.02em;pointer-events:none}

.oracle-wrap{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:26px;align-items:start}
@media(max-width:820px){.oracle-wrap{grid-template-columns:1fr}}

.card-frame{
  position:relative;border-radius:20px;padding:2px;
  background:linear-gradient(150deg,rgba(255,233,168,.85),rgba(240,181,31,.25) 40%,rgba(138,90,0,.65));
  box-shadow:0 30px 70px -34px rgba(240,181,31,.75),0 0 0 1px rgba(0,0,0,.6) inset
}
.card-inner{position:relative;border-radius:18px;background:
  radial-gradient(120% 80% at 70% 0%,rgba(240,181,31,.16),transparent 60%),linear-gradient(180deg,#0b0b10,#060608 70%);
  padding:16px;overflow:hidden;min-height:420px;display:flex;flex-direction:column;gap:12px}
.card-art{position:absolute;inset:0;opacity:0;transition:opacity .6s;pointer-events:none}
.card-art.show{opacity:1}
.card-art svg{position:absolute;right:-14%;top:-6%;width:86%;height:86%;opacity:.9}
.card-info{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;gap:12px}
.ci-head{display:flex;align-items:center;gap:12px}
.ci-sigil{width:56px;height:56px;flex:0 0 auto;color:var(--gold);filter:drop-shadow(0 0 14px rgba(240,181,31,.65))}
.ci-sigil svg{width:100%;height:100%;display:block}
.ci-kicker{font-size:10.5px;letter-spacing:.3em;color:var(--txt-dim)}
.ci-title{margin:4px 0 2px;font-size:30px;letter-spacing:.16em;font-weight:700;
  background:linear-gradient(180deg,#fff8e2,var(--gold) 62%,var(--gold-dim));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 26px rgba(240,181,31,.35)}
.ci-latin{margin:0;font-size:11px;letter-spacing:.44em;color:var(--gold);opacity:.8}
.ci-rows{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.ci-rows .row{display:flex;gap:10px;align-items:baseline;font-size:12.5px;line-height:1.7}
.ci-rows .row .tag{flex:0 0 auto;min-width:74px;padding:2px 8px;border-radius:5px;font-size:10.5px;
  letter-spacing:.12em;color:var(--gold);border:1px solid rgba(240,181,31,.35);text-align:center}
.ci-rows .row b{color:var(--txt);font-weight:500;letter-spacing:.04em}
.ci-verdict{margin:12px 0 0;padding-top:12px;border-top:1px dashed rgba(240,181,31,.25);
  font-size:13.5px;line-height:2;color:#d9cfb6;font-style:italic}

.side{display:flex;flex-direction:column;gap:16px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{
  padding:13px 22px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.02);
  color:var(--txt);font-size:14px;letter-spacing:.24em;cursor:pointer;font-family:inherit;transition:.25s
}
.btn:hover{border-color:rgba(240,181,31,.6);color:var(--gold-hi)}
.btn.primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#140f02;border-color:transparent;
  font-weight:700;box-shadow:0 14px 34px -16px rgba(240,181,31,.9)}
.btn.primary:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.55;cursor:wait}
.input-row{display:flex;flex-direction:column;gap:8px}
.input-row input{
  width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:var(--txt);font-size:14px;font-family:inherit;outline:none;transition:.25s
}
.input-row input:focus{border-color:rgba(240,181,31,.6);box-shadow:0 0 0 3px rgba(240,181,31,.12)}
.input-row input::placeholder{color:#6b6455}
.tip{font-size:11.5px;color:#6b6455;letter-spacing:.1em}
.verdict-box{border:1px solid var(--line);border-radius:16px;padding:16px;
  background:linear-gradient(180deg,rgba(240,181,31,.05),rgba(8,8,12,.75));min-height:220px}
.vb-head{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid rgba(240,181,31,.16)}
.vb-head span{font-size:11px;letter-spacing:.42em;color:var(--gold)}
.vb-head em{font-style:normal;font-size:12px;color:var(--txt-dim);letter-spacing:.1em;text-align:right}
.vb-body{font-size:14px;line-height:2.1;color:#ded5bf;white-space:pre-wrap;word-break:break-word}
.vb-body .cur{display:inline-block;width:8px;height:16px;background:var(--gold);vertical-align:-2px;
  animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.modal{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(3,3,5,.86);backdrop-filter:blur(8px)}
.modal.open{display:flex;animation:fade .3s ease both}
.modal-card{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto}
.card-frame.single{width:100%}
.modal-x{position:absolute;right:-6px;top:-6px;z-index:5;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:#0b0b10;color:var(--txt-dim);font-size:15px;cursor:pointer}
.modal-x:hover{color:var(--gold-hi);border-color:rgba(240,181,31,.6)}
.modal-actions{display:flex;justify-content:center;margin-top:16px}
.modal-ai{margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;
  background:rgba(8,8,12,.7);max-height:34vh;overflow:auto}
.modal-ai:empty{display:none}

.cards-back{display:none}

.foot{position:relative;z-index:2;text-align:center;padding:26px 16px 40px;border-top:1px solid rgba(240,181,31,.12)}
.foot p{margin:4px 0;font-size:11.5px;letter-spacing:.24em;color:#5f5949}
.foot .mini{opacity:.6;letter-spacing:.2em;font-size:10px}