:root {
  --bg:#e9eded;
  --paper:#f4f6f5;
  --ink:#45445d;
  --muted:#77778a;
  --faint:#a2a3af;
  --violet:#706b98;
  --violet2:#8982ae;
  --cyan:#83bfc2;
  --line:rgba(72,70,96,.18);
  --panel:rgba(246,248,247,.82);
  --r10:rgba(112,105,157,.14);
  --success:#527e72;
  --danger:#a45e68;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}

body{
  color:var(--ink);
  font-family:"Segoe UI","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
  background:
    radial-gradient(circle at 15% 5%,rgba(255,255,255,.98),transparent 28%),
    radial-gradient(circle at 90% 65%,rgba(181,205,205,.42),transparent 30%),
    linear-gradient(135deg,#f1f3f2,#e3e8e8);
  overflow-x:hidden;
}

body:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.35;
  background-image:linear-gradient(rgba(65,65,85,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(65,65,85,.025) 1px,transparent 1px);
  background-size:24px 24px;
}

button,input,summary{font:inherit}
a{color:#625e8b}

.world-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.bg-grid{
  position:absolute;width:85vw;height:85vw;right:-27vw;top:5vh;transform:rotate(45deg);opacity:.18;
  background:linear-gradient(90deg,transparent 49.7%,rgba(86,83,116,.5) 50%,transparent 50.3%),linear-gradient(0deg,transparent 49.7%,rgba(86,83,116,.5) 50%,transparent 50.3%);
  background-size:54px 54px
}
.bg-diamond{position:absolute;border:1px solid rgba(90,87,118,.2);transform:rotate(45deg)}
.bg-diamond-a{width:320px;height:320px;left:-180px;top:34%}
.bg-diamond-b{width:480px;height:480px;right:-230px;bottom:-150px}
.bg-line{position:absolute;height:1px;background:linear-gradient(90deg,transparent,rgba(80,78,108,.35),transparent);transform:rotate(-32deg)}
.bg-line-a{width:720px;right:-180px;top:30%}
.bg-line-b{width:520px;left:-190px;bottom:19%;transform:rotate(24deg)}
.bg-orbit{position:absolute;width:410px;height:410px;right:-160px;top:18%;border:1px solid rgba(83,80,111,.14);border-radius:50%}

.topbar{
  width:100%;min-height:70px;padding:12px clamp(18px,5vw,72px);
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid rgba(70,69,92,.13);background:rgba(245,247,246,.62);
  backdrop-filter:blur(14px)
}
.brand-block{display:flex;align-items:center;gap:13px}
.brand-mark{position:relative;width:32px;height:32px;transform:rotate(45deg)}
.brand-mark i{position:absolute;width:10px;height:10px;background:var(--violet)}
.brand-mark i:nth-child(1){left:0;top:11px;opacity:.55}
.brand-mark i:nth-child(2){left:11px;top:0;opacity:.85}
.brand-mark i:nth-child(3){left:11px;top:11px;background:var(--cyan)}
.brand-title{font-size:13px;font-weight:800;letter-spacing:.18em}
.brand-subtitle{margin-top:3px;color:var(--faint);font-size:8px;letter-spacing:.18em}
.top-status,.hero-kicker,.privacy-strip,.footer{letter-spacing:.14em;font-family:"Segoe UI",sans-serif}
.top-status{display:flex;gap:8px;align-items:center;color:var(--faint);font-size:9px}
.status-dot{width:7px;height:7px;border-radius:50%;background:#7ea89d;box-shadow:0 0 0 3px rgba(126,168,157,.13)}

.container{position:relative;width:min(1040px,calc(100% - 32px));margin:auto;padding:52px 0 38px}
.hero{text-align:center;margin-bottom:34px}
.hero-kicker{color:var(--violet);font-size:9px;font-weight:700;margin-bottom:12px}
h1{font-size:clamp(32px,6vw,58px);line-height:1;font-weight:300;letter-spacing:.04em;color:#45445e;text-shadow:0 2px 0 rgba(255,255,255,.55)}
.subtitle{max-width:680px;margin:17px auto 0;color:var(--muted);font-size:13px;line-height:1.8}
.hero-rule{width:min(300px,80%);margin:21px auto 0;display:flex;align-items:center;gap:10px;color:var(--violet);opacity:.7}
.hero-rule span{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(92,88,125,.35))}
.hero-rule span:last-child{background:linear-gradient(90deg,rgba(92,88,125,.35),transparent)}
.hero-rule b{font-size:10px;font-weight:400}

.guide-details{
  position:relative;margin-bottom:18px;border:1px solid var(--line);background:rgba(245,247,246,.68);
  box-shadow:0 8px 30px rgba(60,60,80,.055);
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);overflow:hidden
}
.guide-details summary{
  min-height:58px;padding:0 18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center
}
.guide-details summary::-webkit-details-marker{display:none}
.summary-left{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700}
.summary-index{color:var(--violet);font:10px Consolas,monospace;letter-spacing:.12em}
.summary-arrow{color:var(--violet);font-size:18px;font-weight:300;transition:transform .25s}
.guide-details[open] .summary-arrow{transform:rotate(45deg)}
.guide-content{padding:4px 22px 23px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.75}
.guide-content h4{margin:14px 0 6px;color:var(--ink);font-size:12px}
.guide-content ol,.guide-content ul{margin-left:18px}
.guide-content li{margin-bottom:4px}
.guide-content code{padding:2px 6px;color:#555271;background:rgba(106,101,147,.1);border:1px solid rgba(106,101,147,.12);font:11px Consolas,monospace}
.guide-content a{text-decoration:none}
.guide-content a:hover{text-decoration:underline}

/* ---------- Yurisaki 导出码面板 ---------- */

.yurisaki-panel{
  position:relative;
  margin-bottom:18px;
  overflow:hidden;

  border:1px solid var(--line);

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.72),
      rgba(221,226,226,.62)
    );

  box-shadow:0 18px 45px rgba(55,55,76,.09);

  clip-path:polygon(
    0 0,
    calc(100% - 28px) 0,
    100% 28px,
    100% 100%,
    28px 100%,
    0 calc(100% - 28px)
  );
}

.yurisaki-panel:before{
  content:"";
  position:absolute;
  inset:9px;
  pointer-events:none;

  border:1px solid rgba(255,255,255,.62);

  clip-path:polygon(
    0 0,
    calc(100% - 18px) 0,
    100% 18px,
    100% 100%,
    18px 100%,
    0 calc(100% - 18px)
  );
}

.yurisaki-panel .panel-corner{
  z-index:2;
}

.yurisaki-header{
  position:relative;
  z-index:3;

  min-height:66px;
  padding:0 22px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:1px solid var(--line);
}

.yurisaki-kicker{
  margin-bottom:5px;

  color:var(--violet);

  font:700 8px "Segoe UI",sans-serif;

  letter-spacing:.18em;
}

.yurisaki-title{
  color:var(--ink);

  font-size:14px;
  font-weight:800;
  letter-spacing:.07em;
}

.yurisaki-mark{
  color:var(--cyan);
  font-size:12px;
  opacity:.75;
}

.yurisaki-body{
  position:relative;
  z-index:3;

  padding:18px 22px 21px;
}

.yurisaki-description{
  margin-bottom:13px;

  color:var(--muted);

  font-size:11px;
  line-height:1.7;
}

.yurisaki-description strong{
  color:var(--ink);
  font-weight:800;
}

.yurisaki-input-row{
  display:flex;
  gap:10px;
  align-items:stretch;
}

.yurisaki-input{
  flex:1;
  min-width:0;

  height:43px;
  padding:0 15px;

  color:#55536e;

  background:rgba(248,249,248,.78);

  border:1px solid rgba(72,70,98,.2);

  outline:none;

  font:12px Consolas,"SF Mono",monospace;

  letter-spacing:.16em;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
}

.yurisaki-input::placeholder{
  color:#aaa9b5;
  letter-spacing:.08em;
}

.yurisaki-input:hover{
  border-color:rgba(92,87,128,.35);
}

.yurisaki-input:focus{
  border-color:rgba(92,87,128,.58);

  background:rgba(255,255,255,.9);

  box-shadow:
    0 0 0 3px rgba(112,105,157,.08);
}

.yurisaki-btn{
  flex:0 0 auto;

  min-width:145px;
  height:43px;
  padding:0 15px 0 20px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;

  color:#fff;

  background:
    linear-gradient(
      90deg,
      #676282,
      #77709d
    );

  border:0;

  clip-path:polygon(
    0 0,
    calc(100% - 11px) 0,
    100% 11px,
    100% 100%,
    0 100%
  );

  cursor:pointer;

  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;

  transition:
    transform .18s ease,
    opacity .18s ease,
    box-shadow .18s ease;
}

.yurisaki-btn b{
  color:#cde8e7;
  font-size:16px;
  font-weight:300;
}

.yurisaki-btn:hover{
  transform:translateY(-1px);

  box-shadow:
    0 8px 20px rgba(79,75,112,.18);
}

.yurisaki-btn:disabled{
  cursor:wait;
  opacity:.65;
  transform:none;
}

.yurisaki-btn.loading{
  cursor:wait;
}

.yurisaki-status{
  display:none;

  margin-top:10px;
  padding:9px 12px;

  font:10px/1.6 Consolas,"SF Mono",monospace;

  border-left:2px solid var(--violet);

  background:rgba(102,97,143,.055);

  color:#77768a;
}

.yurisaki-status.error{
  color:var(--danger);

  border-left-color:var(--danger);

  background:rgba(164,94,104,.055);
}

.yurisaki-status.success{
  color:var(--success);

  border-left-color:var(--success);

  background:rgba(82,126,114,.055);
}

#dropZone{
  position:relative;min-height:310px;display:grid;place-items:center;overflow:hidden;cursor:pointer;
  border:1px solid rgba(72,70,98,.22);
  background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(221,226,226,.62));
  box-shadow:0 18px 45px rgba(55,55,76,.11);
  clip-path:polygon(0 0,calc(100% - 42px) 0,100% 42px,100% 100%,42px 100%,0 calc(100% - 42px));
  transition:.25s ease
}
#dropZone:before{
  content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.72);
  clip-path:polygon(0 0,calc(100% - 25px) 0,100% 25px,100% 100%,25px 100%,0 calc(100% - 25px))
}
#dropZone:after{
  content:"DROP ZONE";position:absolute;right:26px;top:18px;color:rgba(80,78,107,.34);
  font:700 8px Consolas,monospace;letter-spacing:.18em
}
#dropZone:hover,#dropZone.dragover{transform:translateY(-2px);border-color:rgba(92,87,128,.46);box-shadow:0 24px 55px rgba(55,55,76,.15)}
#dropZone.dragover{background:linear-gradient(135deg,rgba(255,255,255,.82),rgba(211,225,225,.72))}
#fileInput{display:none}

.panel-corner{position:absolute;width:44px;height:44px;opacity:.7}
.corner-tl{top:0;left:0;border-top:2px solid var(--violet);border-left:2px solid var(--violet)}
.corner-tr{top:0;right:0;border-top:2px solid var(--cyan);border-right:2px solid var(--cyan)}
.corner-bl{bottom:0;left:0;border-bottom:2px solid var(--cyan);border-left:2px solid var(--cyan)}
.corner-br{bottom:0;right:0;border-bottom:2px solid var(--violet);border-right:2px solid var(--violet)}
.upload-content{position:relative;z-index:2;text-align:center;padding:44px 20px}
.section-code{margin-bottom:8px;color:var(--violet);font-size:8px;font-weight:800}
.drop-icon{display:block;font-size:32px;opacity:.7;margin-bottom:6px}
.drop-title{color:#4d4c67;font-size:clamp(18px,3.5vw,28px);font-weight:800;letter-spacing:.08em}
.file-button{
  display:inline-flex;align-items:center;justify-content:space-between;gap:28px;min-width:145px;padding:10px 14px 10px 20px;
  color:#fff;background:linear-gradient(90deg,#676282,#77709d);clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);
  font-size:11px;font-weight:700;letter-spacing:.08em
}
.file-button b{color:#cde8e7;font-size:16px;font-weight:300}
.upload-decor{position:absolute;inset:0;pointer-events:none}
.upload-diamond{position:absolute;width:120px;height:120px;right:11%;bottom:-55px;transform:rotate(45deg);border:1px solid rgba(81,79,109,.16)}
.upload-cross{position:absolute;width:54px;height:54px;left:9%;top:19%;opacity:.38;background:linear-gradient(90deg,transparent 48%,var(--violet) 49% 51%,transparent 52%),linear-gradient(0deg,transparent 48%,var(--violet) 49% 51%,transparent 52%)}
.upload-ring{position:absolute;width:155px;height:155px;left:-76px;bottom:-70px;border:1px solid rgba(95,91,128,.18);border-radius:50%}

#errorMsg{display:none;margin-top:18px;padding:13px 16px;color:var(--danger);background:rgba(250,239,241,.82);border:1px solid rgba(164,94,104,.3);font-size:12px}
#resultSection{display:none;margin-top:22px}

.result-card,.calc-card,.table-card{
  position:relative;margin-bottom:18px;border:1px solid var(--line);background:rgba(245,247,246,.83);
  box-shadow:0 18px 45px rgba(55,55,76,.11);overflow:hidden
}
.result-card{min-height:250px;padding:35px 28px 30px;text-align:center;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%)}
.result-card:before{content:"RESULT / 01";position:absolute;left:22px;top:18px;color:var(--faint);font:700 8px Consolas,monospace;letter-spacing:.16em}
.result-card:after{content:"";position:absolute;width:190px;height:190px;right:-72px;top:-72px;border:1px solid rgba(83,79,115,.18);transform:rotate(45deg)}
.result-label{color:var(--violet);font-size:10px;font-weight:800;letter-spacing:.25em}
.result-value{margin-top:5px;color:#4f4d68;font-size:clamp(66px,12vw,112px);line-height:.98;font-weight:200;text-shadow:0 4px 12px rgba(69,67,94,.11)}
.result-sub{margin-top:12px;color:var(--faint);font:10px Consolas,monospace}

.calc-card{padding:22px;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)}
.calc-title,.table-header{color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.09em}
.calc-title{display:flex;align-items:center;gap:10px;padding-bottom:13px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.calc-title:before{content:"◆";color:var(--violet);font-size:8px}
.calc-row{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(70,69,92,.08);font-size:11px}
.calc-row .k{color:var(--muted)}
.calc-row .v{color:#55536e;font:11px Consolas,monospace}
.calc-row .v.accent{color:var(--violet);font-weight:800}
.formula{margin-top:15px;padding:13px 15px;color:#77768a;background:rgba(102,97,143,.055);border-left:2px solid rgba(102,97,143,.38);font:10px/1.8 Consolas,monospace;overflow-wrap:anywhere}
.formula span{color:#5e5a85!important;font-weight:700}

.table-card{clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,0 100%)}
.table-header{min-height:58px;padding:0 19px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.table-header .badge{padding:5px 9px;color:#625e82;background:rgba(107,101,147,.09);border:1px solid rgba(107,101,147,.14);font:8px Consolas,monospace}
.table-wrap{max-height:560px;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:11px}
thead th{position:sticky;top:0;z-index:2;padding:10px;color:#78778a;background:rgba(232,235,234,.96);border-bottom:1px solid var(--line);text-align:left;font-size:8px;font-weight:800;letter-spacing:.08em}
tbody td{padding:10px;color:#59586c;border-bottom:1px solid rgba(70,69,92,.07)}
tbody tr:hover{background:rgba(255,255,255,.55)}
tbody tr.r10-row{background:var(--r10)}
tbody tr.r10-row:hover{background:rgba(112,105,157,.19)}
.mono{font-family:Consolas,"SF Mono",monospace}
.diff-tag{display:inline-block;min-width:39px;padding:3px 5px;text-align:center;color:#fff;border-radius:1px;font-size:8px;font-weight:800;letter-spacing:.05em}
.diff-0{background:#5e9fbd}.diff-1{background:#6aa276}.diff-2{background:#8d76a7}.diff-3{background:#ad6970}.diff-4{background:#6f6a91}.diff-inscribed{background:#566a9a}
.clear-yes{color:var(--success);font-weight:800}.clear-no{color:#a0a0ad}
.legend{min-height:43px;padding:0 18px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;color:#888797;border-top:1px solid var(--line);font-size:9px}
.legend-item{display:flex;align-items:center;gap:6px}.legend-dot{width:8px;height:8px;transform:rotate(45deg)}.legend-dot.r10{background:rgba(112,105,157,.55)}.legend-dot.b30{background:rgba(120,120,130,.18)}
.btn-row{display:flex;justify-content:center;gap:10px;margin:20px 0 8px}
.btn{min-width:130px;padding:11px 20px;border:0;cursor:pointer;font-size:10px;font-weight:800;letter-spacing:.1em;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);transition:.18s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{color:#fff;background:linear-gradient(90deg,#666180,#78729d);box-shadow:0 8px 20px rgba(79,75,112,.18)}
.btn-secondary{color:#65637a;background:rgba(247,248,247,.7);border:1px solid rgba(82,80,107,.2)}

.footer{width:100%;min-height:48px;display:flex;justify-content:center;align-items:center;gap:9px;color:rgba(70,69,92,.43);border-top:1px solid rgba(70,69,92,.1);font-size:7px}

@media(max-width:720px){
  .topbar{padding-inline:16px}.top-status{display:none}.container{width:calc(100% - 22px);padding-top:35px}
  #dropZone{min-height:275px}#dropZone:after{display:none}.drop-title{font-size:18px}.drop-hint{font-size:9px}
  .table-wrap{overflow-x:auto}table{min-width:760px}.result-card{min-height:220px}.result-value{font-size:72px}
  .yurisaki-input-row{
      flex-direction:column;
    }

    .yurisaki-input{
      width:100%;
      flex:none;
    }

    .yurisaki-btn{
      width:100%;
      flex:none;
    }
}

@media(max-width:440px){
  .brand-subtitle{font-size:7px}.brand-title{font-size:11px}h1{font-size:34px}.subtitle{font-size:11px}
  .btn-row{flex-direction:column}.btn{width:100%}.privacy-strip{font-size:6px}
}

.site-footer {
  margin-top: 32px;
  padding: 18px 0 24px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.site-footer span {
  margin: 0 8px;
  color: #aaa;
}

.site-footer a {
  color: #777;
  text-decoration: none;
  transition: color 0.2s ease;
}

.site-footer a:hover {
  color: #6b5b95;
}