:root{
  --cream:#fffaf2;
  --paper:#fffdf9;
  --lav:#e9ddff;
  --lav-2:#d8c7f5;
  --lav-dark:#6f578e;
  --peach:#ffd9de;
  --pink:#f7bfd0;
  --mint:#dff4e8;
  --blue:#dfeeff;
  --gold:#e8bf68;
  --silver:#cbd5e2;
  --ink:#4a3d58;
  --muted:#8a7c99;
  --line:rgba(96,74,122,.14);
  --shadow:0 18px 50px rgba(91,69,120,.12);
  --shadow2:0 10px 24px rgba(91,69,120,.10);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{
  font-family:"Microsoft YaHei","PingFang SC",Inter,system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,218,230,.85), transparent 22%),
    radial-gradient(circle at 86% 8%, rgba(224,235,255,.90), transparent 24%),
    radial-gradient(circle at 10% 90%, rgba(222,246,234,.85), transparent 24%),
    linear-gradient(145deg,#fffaf3 0%,#fbf8ff 50%,#f6fbff 100%);
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.32;
  background-image:
    radial-gradient(circle at 10px 10px, rgba(113,86,145,.07) 1px, transparent 1.4px);
  background-size:26px 26px;
  z-index:-2;
}
a{text-decoration:none;color:inherit}
.hidden{display:none!important}

.page{
  width:min(1240px,calc(100% - 28px));
  margin:0 auto;
  padding:24px 0 70px;
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;
}
.brand{
  display:flex;align-items:center;gap:14px;
}
.brand-seal{
  width:58px;height:58px;
  display:grid;place-items:center;
  border-radius:20px;
  background:linear-gradient(145deg,#fffdf9,#efe5ff);
  border:1px solid rgba(111,87,142,.12);
  box-shadow:var(--shadow2);
  position:relative;
}
.brand-seal::before{
  content:"✦";
  font-size:25px;color:#8b6aa8;
}
.brand-seal::after{
  content:"";
  position:absolute;inset:7px;
  border:1px dashed rgba(111,87,142,.18);
  border-radius:15px;
}
.brand h1{margin:0;font-size:23px;letter-spacing:.02em}
.brand p{margin:4px 0 0;color:var(--muted);font-size:12px}
.status-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;
  background:rgba(255,255,255,.75);
  border:1px solid var(--line);
  color:var(--muted);font-size:12px;
  box-shadow:var(--shadow2);
}
.status-dot{width:8px;height:8px;border-radius:999px;background:#8abf9d;box-shadow:0 0 0 4px rgba(138,191,157,.14)}

.hero{
  position:relative;
  overflow:hidden;
  border-radius:30px;
  padding:28px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.62), transparent 17%),
    radial-gradient(circle at 83% 20%, rgba(255,255,255,.54), transparent 16%),
    linear-gradient(135deg,rgba(255,229,238,.90),rgba(237,231,255,.92));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow);
}
.hero::before,
.hero::after{
  position:absolute;
  color:rgba(117,88,152,.14);
  font-size:90px;
  line-height:1;
}
.hero::before{content:"☾";right:5%;top:16px;transform:rotate(-10deg)}
.hero::after{content:"✦";left:4%;bottom:8px;transform:rotate(12deg)}
.hero-grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.15fr .85fr;gap:24px;align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 13px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid rgba(111,87,142,.11);
  font-size:11px;letter-spacing:.16em;color:#9a76b6;font-weight:800;
}
.hero h2{
  margin:14px 0 10px;
  font-size:clamp(32px,5.2vw,56px);
  line-height:1.05;
}
.hero p{
  margin:0;max-width:650px;
  color:var(--muted);
  line-height:1.85;font-size:14px;
}
.hero-art{
  min-height:260px;
  display:grid;place-items:center;
  position:relative;
}
.plush-orbit{
  position:relative;
  width:260px;height:260px;
}
.orbit-ring{
  position:absolute;inset:28px;border-radius:999px;
  border:2px dashed rgba(111,87,142,.18);
}
.orbit-ring::before,.orbit-ring::after{
  content:"";
  position:absolute;width:28px;height:28px;border-radius:999px;
  background:#fff;
  border:1px solid rgba(111,87,142,.10);
  box-shadow:var(--shadow2);
}
.orbit-ring::before{left:-13px;top:44%}
.orbit-ring::after{right:-13px;top:28%}
.plush-moon{
  position:absolute;left:62px;top:52px;width:136px;height:136px;border-radius:999px;
  background:linear-gradient(145deg,#fff9d9,#f1d48d);
  box-shadow:inset -12px -12px 20px rgba(180,145,69,.10),var(--shadow2);
  border:1px solid rgba(197,157,77,.18);
}
.plush-moon::after{
  content:"";position:absolute;right:-9px;top:10px;width:110px;height:110px;border-radius:999px;
  background:linear-gradient(145deg,#f3e8ff,#e5d5fb);
  border-left:1px solid rgba(111,87,142,.07);
}
.plush-star{
  position:absolute;
  color:#fff5bf;
  text-shadow:0 4px 10px rgba(111,87,142,.16);
}
.s1{left:24px;top:32px;font-size:42px}
.s2{right:17px;top:55px;font-size:29px}
.s3{right:48px;bottom:21px;font-size:36px}
.s4{left:26px;bottom:34px;font-size:25px}
.ribbon{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
  min-width:175px;text-align:center;
  padding:11px 18px;
  border-radius:16px 16px 22px 22px;
  background:linear-gradient(145deg,#b99bd6,#8d6daf);
  color:#fff;font-weight:900;font-size:13px;
  box-shadow:var(--shadow2);
}
.ribbon::before,.ribbon::after{
  content:"";position:absolute;bottom:-13px;width:35px;height:28px;background:#8d6daf;z-index:-1;
}
.ribbon::before{left:6px;clip-path:polygon(0 0,100% 0,72% 100%,0 72%)}
.ribbon::after{right:6px;clip-path:polygon(0 0,100% 0,100% 72%,28% 100%)}

.grid{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px;
}
.panel{
  position:relative;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(255,255,255,.9);
  border-radius:26px;
  padding:21px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(15px);
}
.panel::before{
  content:"";position:absolute;inset:9px;border-radius:19px;
  border:1px dashed rgba(111,87,142,.10);
  pointer-events:none;
}
.panel h3{
  position:relative;z-index:1;
  margin:0 0 6px;font-size:19px;
}
.sub{
  position:relative;z-index:1;
  color:var(--muted);font-size:12px;line-height:1.65;margin-bottom:12px;
}
.form-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.full{grid-column:1/-1}
label{display:block;font-size:12px;color:var(--muted);margin:6px 0 6px;font-weight:700}
input,textarea,select{
  width:100%;
  border:1px solid rgba(111,87,142,.15);
  border-radius:14px;
  padding:12px 13px;
  font:inherit;color:var(--ink);
  background:#fff;
  outline:none;
}
textarea{min-height:92px;resize:vertical}
input:focus,textarea:focus,select:focus{
  border-color:rgba(111,87,142,.36);
  box-shadow:0 0 0 4px rgba(111,87,142,.08);
}
.actions{position:relative;z-index:1;display:flex;gap:8px;flex-wrap:wrap}
button,.btn{
  border:0;
  border-radius:14px;
  padding:11px 15px;
  font:inherit;font-weight:900;
  cursor:pointer;
  background:linear-gradient(145deg,#8b6bac,#6f578e);
  color:#fff;
  box-shadow:0 10px 20px rgba(90,67,121,.16);
  transition:.2s ease;
}
button:hover,.btn:hover{transform:translateY(-2px)}
button.alt,.btn.alt{
  background:#fff;color:var(--ink);
  border:1px solid rgba(111,87,142,.14);
  box-shadow:none;
}
button.red,.btn.red{background:linear-gradient(145deg,#d17c99,#b75f7e)}
button:disabled{opacity:.48;cursor:not-allowed;transform:none}
.notice{position:relative;z-index:1;color:var(--muted);font-size:12px;line-height:1.7;margin-top:10px}

.section-title{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;
}
.counter{
  padding:7px 11px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:11px;color:var(--muted);
}
.list{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
.card-item{
  display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:center;
  padding:12px;border-radius:18px;background:#fff;border:1px solid rgba(111,87,142,.09);
}
.card-symbol{
  width:62px;height:72px;
  border-radius:12px;
  display:grid;place-items:center;
  border:1px solid rgba(111,87,142,.10);
  font-size:25px;
  background:linear-gradient(145deg,#fff8fb,#eee5ff);
}
.card-symbol.silver{background:linear-gradient(145deg,#f7fbff,#e3eaf1)}
.card-symbol.gold{background:linear-gradient(145deg,#fff9e2,#f2d48a)}
.card-symbol.rainbow{background:linear-gradient(145deg,#ffe9f2,#e7e9ff 45%,#e8f8ee)}
.card-main b{display:block;font-size:14px}
.card-main p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.65}
.badge{
  display:inline-flex;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:900;margin-left:6px
}
.badge.silver{background:#edf1f5;color:#667687}
.badge.gold{background:#ffe9af;color:#7d5d17}
.badge.rainbow{background:linear-gradient(90deg,#ffe2ec,#e2e6ff,#dff5e8);color:#6e587f}

.link-card{
  padding:14px;border-radius:20px;background:#fff;border:1px solid rgba(111,87,142,.09);
}
.link-top{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;
}
.link-main b{display:block;font-size:15px}
.link-main small{display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:4px}
.code{font-family:Consolas,monospace;font-size:10px!important;word-break:break-all}
.result-zone{
  margin-top:12px;padding-top:12px;border-top:1px dashed rgba(111,87,142,.14);
}
.result-head{
  display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px;
}
.result-head b{font-size:12px}
.result-head span{font-size:10px;color:var(--muted)}
.result-list{display:flex;flex-direction:column;gap:7px}
.result-row{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:9px 10px;border-radius:13px;background:#fbf9fd;border:1px solid rgba(111,87,142,.07);
}
.result-left{display:flex;align-items:center;gap:9px;min-width:0}
.result-num{
  width:28px;height:28px;border-radius:10px;background:#eee7f8;color:#70588d;
  display:grid;place-items:center;font-size:11px;font-weight:900;flex:0 0 auto
}
.result-name{min-width:0}
.result-name b{display:block;font-size:11px}
.result-name small{display:block;margin-top:2px;font-size:9px;color:var(--muted)}
.result-badge{padding:4px 8px;border-radius:999px;font-size:9px;font-weight:900;flex:0 0 auto}
.result-badge.silver{background:#edf1f5;color:#667687}
.result-badge.gold{background:#ffe7aa;color:#7c5b16}
.result-badge.rainbow{background:linear-gradient(90deg,#ffe2ec,#e3e7ff,#def5e8);color:#6e587f}
.pending{
  padding:9px 10px;border-radius:13px;background:#fbf9fd;border:1px dashed rgba(111,87,142,.12);
  color:var(--muted);font-size:10px
}
.details-toggle{display:flex;justify-content:flex-end;margin-top:9px}
.details-panel{
  margin-top:9px;padding:11px;border-radius:14px;
  background:linear-gradient(145deg,#fffdfb,#f8f5fd);
  border:1px solid rgba(111,87,142,.08)
}
.details-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:7px}
.details-head b{font-size:11px}
.details-head span{font-size:9px;color:var(--muted)}
.detail-item{
  padding:9px 10px;border-radius:12px;background:#fff;border:1px solid rgba(111,87,142,.06);margin-top:6px
}
.detail-item b{display:block;font-size:11px}
.detail-item p{margin:4px 0 0;color:var(--muted);font-size:10px;line-height:1.65;white-space:pre-wrap;word-break:break-word}

/* draw page */
.draw-page{
  width:min(1260px,calc(100% - 28px));
  margin:0 auto;padding:22px 0 70px;
}
.draw-shell{
  position:relative;
  border-radius:32px;
  padding:24px;
  background:
    radial-gradient(circle at 10% 12%,rgba(255,255,255,.62),transparent 16%),
    radial-gradient(circle at 88% 12%,rgba(255,255,255,.48),transparent 16%),
    linear-gradient(145deg,rgba(255,235,242,.88),rgba(235,232,255,.90));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.draw-shell::before,.draw-shell::after{
  position:absolute;color:rgba(111,87,142,.10);font-size:110px;line-height:1;pointer-events:none
}
.draw-shell::before{content:"☾";left:1%;top:16%}
.draw-shell::after{content:"✦";right:2%;bottom:5%}
.draw-inner{position:relative;z-index:1}
.draw-hero{text-align:center;padding:12px 0 16px}
.draw-hero h2{margin:12px 0 8px;font-size:clamp(34px,5.6vw,58px);line-height:1.04}
.draw-hero p{margin:0 auto;max-width:720px;color:var(--muted);font-size:13px;line-height:1.8}
.stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.stat{
  min-width:145px;padding:11px 14px;text-align:center;border-radius:17px;
  background:rgba(255,255,255,.80);border:1px solid rgba(111,87,142,.09);box-shadow:var(--shadow2)
}
.stat b{display:block;font-size:22px}
.stat span{display:block;margin-top:3px;font-size:10px;color:var(--muted)}
.cards{
  max-width:970px;margin:0 auto;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;
}
.tarot{
  position:relative;
  min-height:520px;
  padding:8px;
  background:linear-gradient(145deg,#f4e8ff,#e9daf8);
  border:1px solid rgba(255,255,255,.9);
  clip-path:polygon(6% 0,94% 0,100% 6%,100% 94%,94% 100%,6% 100%,0 94%,0 6%);
  box-shadow:0 18px 28px rgba(85,63,112,.16);
  cursor:pointer;
  transition:.22s ease;
}
.tarot:hover{transform:translateY(-7px)}
.tarot.disabled{pointer-events:none}
.tarot.fade{opacity:.34}
.tarot.selected{transform:translateY(-8px) scale(1.02)}
.tarot-inner{
  min-height:504px;height:100%;
  padding:12px;
  background:linear-gradient(180deg,#fffdf9,#fff 28%,#fffafd);
  clip-path:polygon(5% 0,95% 0,100% 5%,100% 95%,95% 100%,5% 100%,0 95%,0 5%);
  border:1px solid rgba(111,87,142,.11);
  position:relative;overflow:hidden;
}
.tarot-inner::before{
  content:"";position:absolute;inset:9px;
  clip-path:polygon(4% 0,96% 0,100% 4%,100% 96%,96% 100%,4% 100%,0 96%,0 4%);
  border:1px dashed rgba(111,87,142,.12);pointer-events:none
}
.tarot.silver .tarot-inner{background:linear-gradient(180deg,#f8fbff,#fff 28%,#fbfcff)}
.tarot.gold .tarot-inner{background:linear-gradient(180deg,#fff8e3,#fff 28%,#fffdf6)}
.tarot.rainbow .tarot-inner{background:linear-gradient(180deg,#fff0f6,#fff 28%,#f8fffb)}
.tarot-head{
  position:relative;z-index:1;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.16em;color:#8c72a6;font-weight:900;
}
.roman{
  padding:5px 8px;border-radius:999px;background:#f1eafa;border:1px solid rgba(111,87,142,.10)
}
.tarot-face{
  position:relative;z-index:1;
  height:340px;margin:10px 0 12px;
  background:
    radial-gradient(circle at 50% 25%,rgba(255,255,255,.40),transparent 22%),
    linear-gradient(145deg,#dfc8f1,#c9aee3 54%,#b894d2);
  clip-path:polygon(4% 0,96% 0,100% 4%,100% 96%,96% 100%,4% 100%,0 96%,0 4%);
  border:1px solid rgba(111,87,142,.15);
  overflow:hidden;
}
.tarot-face::before{
  content:"";
  position:absolute;inset:10px;
  background:
    radial-gradient(circle,#fff8 1.2px,transparent 1.8px) 0 0/22px 22px;
  opacity:.36;
}
.tarot-face::after{
  content:"✦";
  position:absolute;
  left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:82px;
  color:#fff1ae;
  text-shadow:0 8px 20px rgba(111,87,142,.20);
}
.tarot-face .moon{
  position:absolute;left:18%;top:18%;font-size:32px;color:#fff5ca;text-shadow:0 6px 12px rgba(111,87,142,.16)
}
.tarot-face .star-a,.tarot-face .star-b{
  position:absolute;color:#fff4c3;text-shadow:0 6px 12px rgba(111,87,142,.16)
}
.star-a{right:18%;top:15%;font-size:24px}
.star-b{left:20%;bottom:16%;font-size:20px}
.tarot-title{
  position:relative;z-index:1;
  text-align:center;font-size:21px;font-weight:900;line-height:1.25
}
.tarot-tier{
  position:relative;z-index:1;
  width:max-content;margin:8px auto 0;
  padding:6px 13px;border-radius:999px;
  font-size:10px;font-weight:900;
  border:1px solid rgba(111,87,142,.09)
}
.tarot-tier.silver{background:#edf1f5;color:#677789}
.tarot-tier.gold{background:#ffe8ad;color:#7c5a16}
.tarot-tier.rainbow{background:linear-gradient(90deg,#ffe1eb,#e3e7ff,#def5e8);color:#6e587f}
.tarot-hint{position:relative;z-index:1;text-align:center;margin-top:10px;color:var(--muted);font-size:10px}
.card-back .tarot-face::after{content:"☾";font-size:90px}
.card-back .tarot-title{font-size:19px}
.card-back .tarot-tier,.card-back .tarot-hint{display:none}

.draw-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}
.draw-btn{min-width:220px;padding:14px 22px;border-radius:16px}
.msg{text-align:center;min-height:24px;margin-top:13px;color:var(--muted);font-size:12px}
.result-card{
  max-width:760px;margin:20px auto 0;
  border-radius:24px;padding:20px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--shadow);
}
.result-card h3{margin:0 0 6px;text-align:center;font-size:25px}
.result-card .final-desc{text-align:center;color:var(--muted);font-size:12px;line-height:1.7}
.result-summary{
  display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:stretch;margin-top:16px
}
.result-mini{
  min-height:210px;
  clip-path:polygon(7% 0,93% 0,100% 7%,100% 93%,93% 100%,7% 100%,0 93%,0 7%);
  background:linear-gradient(145deg,#eadcff,#d6c2ef);
  padding:8px;
}
.result-mini-inner{
  height:100%;
  clip-path:polygon(6% 0,94% 0,100% 6%,100% 94%,94% 100%,6% 100%,0 94%,0 6%);
  background:#fffdf9;
  padding:10px;
}
.result-mini-face{
  height:135px;
  clip-path:polygon(5% 0,95% 0,100% 5%,100% 95%,95% 100%,5% 100%,0 95%,0 5%);
  background:
    radial-gradient(circle,#fff8 1px,transparent 1.8px) 0 0/18px 18px,
    linear-gradient(145deg,#dfc8f1,#b894d2);
  display:grid;place-items:center;
  font-size:52px;color:#fff1ad
}
.result-mini-title{text-align:center;font-weight:900;font-size:15px;margin-top:8px}
.result-info{display:flex;flex-direction:column;justify-content:center}
.result-info .label{font-size:10px;letter-spacing:.16em;color:#9a76b6;font-weight:900}
.result-info h4{font-size:27px;margin:6px 0 8px}
.result-info p{margin:0;color:var(--muted);font-size:12px;line-height:1.75}
.meta{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:13px
}
.meta div{
  padding:9px 10px;border-radius:12px;background:#fff;border:1px solid rgba(111,87,142,.08)
}
.meta span{display:block;color:var(--muted);font-size:9px;margin-bottom:3px}
.meta b{font-size:11px}
.stage-foot{text-align:center;color:var(--muted);font-size:10px;margin-top:14px}

@keyframes pop{
  from{opacity:0;transform:translateY(16px) scale(.97)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.reveal{animation:pop .32s ease both}
.reveal:nth-child(2){animation-delay:.05s}
.reveal:nth-child(3){animation-delay:.10s}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr;max-width:390px}
}
@media(max-width:650px){
  .page,.draw-page{width:min(100% - 16px,1240px);padding-top:14px}
  .topbar{align-items:flex-start}
  .hero,.draw-shell{padding:17px}
  .hero h2,.draw-hero h2{font-size:36px}
  .form-grid{grid-template-columns:1fr}.full{grid-column:auto}
  .card-item{grid-template-columns:54px 1fr}
  .card-symbol{width:54px;height:64px}
  .link-top{grid-template-columns:1fr}
  .result-summary{grid-template-columns:1fr}
  .result-mini{max-width:210px;margin:0 auto}
  .meta{grid-template-columns:1fr}
}


/* V14 enhancement tier UI */
.tier-preview{
  position:relative;z-index:1;
  margin-top:12px;
  padding:13px;
  border-radius:16px;
  background:linear-gradient(145deg,#fffdfb,#f8f5fd);
  border:1px solid rgba(111,87,142,.09);
}
.tier-preview-top{
  display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:8px
}
.tier-preview-top b{font-size:13px}
.tier-pill{
  padding:5px 10px;border-radius:999px;font-size:10px;font-weight:900
}
.tier-pill.normal{background:#edf1f5;color:#667687}
.tier-pill.advanced{background:#ffe8ad;color:#7c5a16}
.tier-pill.mutation{background:linear-gradient(90deg,#ffe1eb,#e3e7ff,#def5e8);color:#6e587f}
.tier-pill.ascension{background:linear-gradient(90deg,#ead9ff,#ffddeb,#fff0b9);color:#704e88}
.tier-preview p{margin:0;color:var(--muted);font-size:11px;line-height:1.7}
.tier-probs{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:9px
}
.prob-chip{
  padding:5px 8px;border-radius:10px;background:#fff;border:1px solid rgba(111,87,142,.08);
  font-size:10px;color:var(--muted)
}
.link-tier{
  display:inline-flex;margin-left:6px;padding:3px 8px;border-radius:999px;font-size:9px;font-weight:900;
  vertical-align:1px
}
.link-tier.normal{background:#edf1f5;color:#667687}
.link-tier.advanced{background:#ffe8ad;color:#7c5a16}
.link-tier.mutation{background:linear-gradient(90deg,#ffe1eb,#e3e7ff,#def5e8);color:#6e587f}
.link-tier.ascension{background:linear-gradient(90deg,#ead9ff,#ffddeb,#fff0b9);color:#704e88}


/* V15 card document management */
.doc-box{
  position:relative;z-index:1;
  margin-top:12px;padding:14px;border-radius:17px;
  background:linear-gradient(145deg,#fffdfb,#f8f5fd);
  border:1px solid rgba(111,87,142,.09);
}
.doc-format{
  font-family:Consolas,"Microsoft YaHei",monospace;
  background:#fff;border:1px solid rgba(111,87,142,.08);
  border-radius:13px;padding:11px 12px;font-size:11px;
  line-height:1.8;color:#6f5a82;white-space:pre-wrap;
}
.doc-status{margin-top:9px;color:var(--muted);font-size:11px;line-height:1.65}
.doc-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.file-input-hidden{display:none}


/* V16 drawn card rule text */
.tarot{
  min-height:610px;
}
.tarot-inner{
  min-height:594px;
  display:flex;
  flex-direction:column;
}
.tarot-face{
  height:245px;
  flex:0 0 245px;
}
.tarot-title{
  margin-top:2px;
}
.tarot-rule{
  position:relative;
  z-index:1;
  margin:12px 3px 0;
  padding:11px 12px;
  border-radius:13px;
  background:rgba(255,255,255,.84);
  border:1px solid rgba(111,87,142,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  text-align:left;
}
.tarot-rule-label{
  font-size:9px;
  letter-spacing:.14em;
  color:#9877b1;
  font-weight:900;
  margin-bottom:5px;
}
.tarot-rule-text{
  font-size:12px;
  line-height:1.68;
  color:#554662;
  white-space:pre-wrap;
  word-break:break-word;
  max-height:118px;
  overflow:auto;
  scrollbar-width:thin;
}
.tarot-hint{
  margin-top:auto;
  padding-top:10px;
}
.card-back .tarot-rule{display:none}

.result-mini{
  min-height:260px;
}
.result-mini-rule{
  margin-top:8px;
  padding:8px 9px;
  border-radius:10px;
  background:#fbf9fd;
  border:1px solid rgba(111,87,142,.08);
  color:#62536f;
  font-size:9px;
  line-height:1.55;
  text-align:left;
  max-height:82px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-word;
}
.tarot.selected{
  opacity:1!important;
  filter:none;
}
@media(max-width:900px){
  .tarot{min-height:585px}
  .tarot-inner{min-height:569px}
}

/* V19: editable, persistent color probabilities. */
.probability-panel{grid-column:1/-1}
.settings-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;position:relative;z-index:1;margin-top:16px}
.settings-row{border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-width:0;background:rgba(255,255,255,.55)}
.settings-row legend{padding:0 8px;font-weight:800;color:var(--lav-dark)}
.settings-row label{font-size:12px;min-width:0}
.settings-row input{width:100%;min-width:0;padding:10px 8px}
#settingsStatus{font-size:13px;color:var(--lav-dark)}
@media(max-width:900px){.settings-form{grid-template-columns:1fr}}
@media(max-width:450px){.settings-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid>.panel,.card-main,.link-main{min-width:0;overflow-wrap:anywhere}
@media(max-width:900px){.grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){.topbar{flex-direction:column}.brand h1{font-size:20px}.panel{padding:17px}}