/* QILIN AGENT — theme tokens.
 *
 * The page keeps the same DOM as the previous launch; only the visual language
 * changes. Everything here is consumed by index.html.
 *
 * Qilin (麒麟) = the Chinese chimera of good omen: dragon scales, deer antlers,
 * ox hooves, and a body wreathed in auspicious clouds (祥云). Palette therefore
 * leans on imperial silk: deep indigo night over jade, with vermilion and gold
 * seals. Dark theme, unlike the previous cream one.
 */
:root{
  --night:#0B1020;      /* base — indigo night sky */
  --night2:#141B33;     /* raised surface */
  --night3:#1E2846;     /* borders / hairlines */
  --jade:#3FB98A;       /* qilin jade body */
  --jade2:#2A8B66;
  --jade-dim:#1B5C45;
  --verm:#E4572E;       /* vermilion seal */
  --verm2:#B93F1E;
  --gold:#E8B84B;       /* imperial gold */
  --gold2:#B98A2A;
  --cloud:#7C8BC7;      /* auspicious cloud accent */
  --paper:#EDE6D6;      /* text — undyed silk */
  --paper2:#A9A28E;     /* muted text */
  --ok:#4CC38A;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Noto Sans SC","PingFang SC","Microsoft YaHei",monospace;
  --serif:"Noto Serif SC","Songti SC",Georgia,serif;
}

/* ---------- landscape: 祥云 drifting across a night sky ---------- */
.clouds{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;opacity:.5}
.cloud{position:absolute;width:220px;height:76px;border-radius:50%;
  background:radial-gradient(ellipse at 40% 50%,rgba(124,139,199,.30),rgba(124,139,199,0) 70%);
  filter:blur(10px);animation:drift 34s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(63,185,138,.20),rgba(63,185,138,0) 70%)}
.cloud::before{width:110px;height:110px;left:38px;top:-34px}
.cloud::after{width:86px;height:86px;left:120px;top:-20px}
.cloud:nth-child(1){top:12%;left:-22%;animation-duration:38s;animation-delay:0s}
.cloud:nth-child(2){top:38%;left:-30%;animation-duration:46s;animation-delay:6s;transform:scale(1.3)}
.cloud:nth-child(3){top:64%;left:-24%;animation-duration:41s;animation-delay:12s;transform:scale(.85)}
.cloud:nth-child(4){top:82%;left:-28%;animation-duration:52s;animation-delay:3s;transform:scale(1.1)}
@keyframes drift{0%{transform:translateX(0)}100%{transform:translateX(150vw)}}

/* a faint gold horizon glow behind the hero */
.aura{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(760px 380px at 50% -6%,rgba(232,184,75,.13),transparent 62%),
    radial-gradient(620px 340px at 88% 8%,rgba(63,185,138,.10),transparent 58%),
    radial-gradient(700px 400px at 6% 22%,rgba(228,87,46,.07),transparent 60%)}

/* ---------- scale texture (dragon scales) for cards ---------- */
.scales{position:relative;overflow:hidden}
.scales::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.055;
  background-image:
    radial-gradient(circle at 50% 0,transparent 58%,var(--jade) 59%,transparent 62%),
    radial-gradient(circle at 0 50%,transparent 58%,var(--jade) 59%,transparent 62%);
  background-size:26px 26px;background-position:0 0,13px 13px}

/* ---------- seal (印章) ---------- */
.seal{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:7px;flex:0 0 auto;
  background:linear-gradient(160deg,var(--verm),var(--verm2));
  color:#FFF3E2;font-family:var(--serif);font-weight:800;font-size:19px;
  box-shadow:0 4px 12px rgba(228,87,46,.34),inset 0 -2px 0 rgba(0,0,0,.18)}
.seal.sm{width:30px;height:30px;font-size:15px;border-radius:6px}
.seal.gold{background:linear-gradient(160deg,var(--gold),var(--gold2));color:#221703;
  box-shadow:0 4px 12px rgba(232,184,75,.30),inset 0 -2px 0 rgba(0,0,0,.16)}
.seal.jade{background:linear-gradient(160deg,var(--jade),var(--jade2));color:#04170F;
  box-shadow:0 4px 12px rgba(63,185,138,.30),inset 0 -2px 0 rgba(0,0,0,.16)}

/* ---------- ornamental rule: 回纹 (meander) ---------- */
.meander{height:12px;margin:26px 0;border-radius:6px;opacity:.75;
  background:
    repeating-linear-gradient(90deg,
      var(--night3) 0 4px, var(--gold2) 4px 6px, var(--night3) 6px 14px, var(--jade2) 14px 16px);
  background-size:32px 12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}

@media (prefers-reduced-motion:reduce){
  .cloud{animation:none}
}