styles.css

:root{color-scheme:dark;--bg:#0c1215;--card:#141c21;--card2:#1b252a;--line:#344047;--text:#ecf0ed;--muted:#a9b5b3;--gold:#d4ae6a;--blue:#8ebbc7;--green:#a6d2ad;--red:#ef9a93;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);min-height:100vh}.ambient{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 12% -10%,#41616738,transparent 42%),radial-gradient(circle at 90% 14%,#604a2e30,transparent 34%),linear-gradient(#0c1215,#101618)}.shell{width:min(1180px,calc(100% - 40px));margin-inline:auto}.site-header{display:flex;align-items:center;gap:12px;padding:24px 0;border-bottom:1px solid #ffffff17}.brand-mark{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--gold);border-radius:9px;color:var(--gold);font-family:Georgia,serif;font-weight:700}.brand-copy{display:flex;flex-direction:column;gap:2px;letter-spacing:.12em;font-size:12px}.brand-copy span{color:var(--gold);font-size:10px;letter-spacing:.27em}.local-badge{margin-left:auto;color:var(--green);font-size:12px;border:1px solid #5f8d6859;border-radius:100px;padding:8px 12px}.hero{padding:64px 0 38px;max-width:760px}.eyebrow{margin:0 0 12px;color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.22em}.hero h1{font-family:Georgia,serif;font-size:clamp(38px,5vw,62px);line-height:1.08;letter-spacing:-.035em;margin:0 0 20px;font-weight:500}.hero p:last-child{font-size:16px;line-height:1.65;color:var(--muted);margin:0}.card{background:linear-gradient(145deg,#192228,#11191d);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 70px #00000022}.import-card{padding:28px}.section-heading,.workspace-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.section-heading h2,.workspace-top h2{font-family:Georgia,serif;font-size:29px;font-weight:500;margin:0 0 22px}.pill{border:1px solid var(--line);background:#ffffff08;border-radius:100px;padding:7px 12px;color:var(--muted);font-size:12px}.pill.good{color:var(--green);border-color:#668c6d}.import-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.drop-zone{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:225px;border:1px dashed #637c80;border-radius:12px;background:#20303647;cursor:pointer;transition:.2s}.drop-zone:hover,.drop-zone.dragging{border-color:var(--gold);background:#d4ae6a13}.drop-zone input{display:none}.drop-zone small{color:var(--muted);margin-top:7px}.upload-icon{font-size:32px;color:var(--gold);margin-bottom:10px}.paste-zone{display:flex;flex-direction:column;gap:9px}.paste-zone label,.field-label{font-size:13px;color:var(--muted);font-weight:600}textarea,input,select{font:inherit;color:var(--text);background:#0c1418;border:1px solid #425058;border-radius:8px;outline:none}textarea:focus,input:focus,select:focus{border-color:var(--gold)}textarea{width:100%;padding:12px;resize:vertical;min-height:108px}input,select{padding:9px 11px}input[type=checkbox]{accent-color:var(--gold);width:17px;height:17px}input[type=number]{width:140px}.button{border:1px solid transparent;border-radius:8px;padding:11px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.15s}.button:hover{filter:brightness(1.13)}.button:disabled{opacity:.5;cursor:wait}.primary{background:var(--gold);color:#172022}.secondary{color:var(--text);border-color:#566872;background:#243239}.danger{color:var(--red);border-color:#875751;background:transparent}.message{font-size:13px;color:var(--muted);margin:18px 0 0;min-height:20px}.message.error{color:var(--red)}.message.success{color:var(--green)}.workspace{padding:48px 0 36px}.workspace-top h2{margin-bottom:4px}.muted,.footnote{color:var(--muted);font-size:13px;line-height:1.6}.export-actions{display:flex;gap:10px;flex-wrap:wrap}.editor-layout{display:grid;grid-template-columns:215px 1fr;gap:20px;margin-top:24px;align-items:start}.tabs{display:flex;flex-direction:column;gap:6px}.tab{text-align:left;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);padding:13px 14px;font:inherit;font-size:13px;font-weight:650;cursor:pointer}.tab:hover{background:#ffffff0d;color:var(--text)}.tab.active{background:#d4ae6a18;border-color:#d4ae6a55;color:var(--gold)}.panel{padding:26px;min-height:470px}.panel-header{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:22px}.panel-header h3{font-family:Georgia,serif;font-size:27px;font-weight:500;margin:0 0 7px}.panel-header p{font-size:13px;line-height:1.6;color:var(--muted);margin:0}.toolbar{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:20px}.field{display:flex;flex-direction:column;gap:7px}.field>label{font-size:12px;color:var(--muted);font-weight:700}.field.grow{flex:1}.field.grow input{width:100%}.grid-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.check-row,.rank-row{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 12px;border:1px solid #35434a;border-radius:8px;background:#1b262b}.check-row span,.rank-row span{flex:1;overflow-wrap:anywhere;font-size:13px}.check-row small,.rank-row small{color:var(--muted);font-size:11px}.rank-row input{width:100px}.stack{display:flex;flex-direction:column;gap:9px}.subheading{font-size:14px;color:var(--gold);font-weight:700;margin:24px 0 12px}.hint{font-size:12px;line-height:1.6;color:var(--muted)}.inline-form{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}.inline-form input{min-width:180px;flex:1}.inline-form button{white-space:nowrap}.tag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--blue)}.raw-editor{height:440px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;line-height:1.55}.small-button{padding:6px 10px;font-size:11px}.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.stat-grid .field input{width:100%}.footer{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #ffffff17;padding:24px 0 35px;color:#809092;font-size:11px}.footnote{margin-top:20px}code{color:#e9c489;font-size:.9em} [hidden]{display:none!important}
@media(max-width:640px){
  .support-banner-top{justify-content:space-between;gap:7px;padding-inline:11px;font-size:10px}
  .support-banner-bottom{align-items:flex-start;flex-wrap:wrap;gap:13px;padding:17px}
  .support-emblem{width:36px;height:36px}
  .support-copy{flex-basis:calc(100% - 52px)}
  .support-button{width:100%;justify-content:center}
}
.item-list{max-height:390px;overflow:auto;padding-right:5px}
.language-switch{display:flex;align-items:center;gap:8px;color:var(--gold)}.language-switch svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.language-switch select{min-width:100px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.picker-with-icon{display:flex;align-items:center;gap:8px}.picker-with-icon select{min-width:155px}.game-icon{width:32px;height:32px;flex:none;border-radius:4px;object-fit:cover;border:1px solid #6b7580}.item-row small{white-space:nowrap}.item-row .game-icon{width:30px;height:30px}.item-row.uncollected .game-icon{filter:grayscale(1);opacity:.5}
.atlas-icon{display:inline-block;background-image:url("./assets/icons/game-atlas.png");background-repeat:no-repeat}.check-row .game-icon,.check-row .codex-icon,.rank-row .game-icon,.rank-row .codex-icon{flex:none}
.talent-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}.talent-stat{display:flex;flex-direction:column;gap:4px;background:#2030366b;border:1px solid var(--line);border-radius:9px;padding:13px 15px}.talent-stat small{color:var(--muted);font-size:12px}.talent-stat strong{font-size:24px;font-weight:650;font-variant-numeric:tabular-nums}.talent-xp{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-bottom:18px}.talent-xp progress{width:100%;height:9px;accent-color:var(--gold)}.talent-warning{color:var(--red)}
.codex-icon{position:relative;width:32px;height:32px;flex:none}.codex-icon .game-icon:last-child{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-color:var(--gold)}
.talent-xp-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 22px}.talent-xp-metrics>div{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#0d171b}.talent-xp-metrics small{color:var(--muted);font-size:11px}.talent-xp-metrics strong{font-size:15px;font-variant-numeric:tabular-nums}.talent-trees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.talent-tree{min-width:0;padding:12px;border:1px solid var(--line);border-radius:11px;background:#101a1e}.talent-tree-heading{display:flex;align-items:center;gap:9px;margin-bottom:11px;border-bottom:1px solid var(--line);padding-bottom:10px}.talent-tree-heading h4{margin:0;flex:1;font-size:15px}.talent-tree-heading small{color:var(--gold)}.talent-node{display:grid;grid-template-columns:36px minmax(0,1fr) 54px;align-items:center;gap:8px;min-height:64px;margin-bottom:7px;padding:7px;border:1px solid #35434a;border-radius:8px;background:#1b262b}.talent-node.selected{border-color:#9e7b44}.talent-node .game-icon{width:36px;height:36px}.talent-copy{display:flex;flex-direction:column;gap:3px;min-width:0}.talent-copy strong{font-size:12px;line-height:1.3}.talent-description{color:var(--muted);font-size:10px;line-height:1.35}.talent-description summary{cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;list-style:none}.talent-description summary::-webkit-details-marker{display:none}.talent-description[open] summary{display:block}.talent-node input{width:54px;padding:6px 4px;text-align:center;font-size:13px}
.achievement-total{color:var(--gold);font-size:14px;font-weight:700}.achievement-card{align-items:flex-start;min-height:76px}.achievement-card .game-icon{width:38px;height:38px}.achievement-card input{margin-top:10px}.achievement-copy{display:flex;flex-direction:column;gap:4px;min-width:0}.achievement-copy strong{font-size:13px}.achievement-copy small{font-size:11px;line-height:1.35}.achievement-copy .achievement-date{color:var(--gold)}.achievement-card:not(.earned) .game-icon{filter:grayscale(1);opacity:.55}
.codex-class-section{margin:22px 0}.codex-class-heading{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}.codex-class-heading strong{flex:1}.codex-class-heading small{color:var(--gold)}
.collection-summary{font-size:13px;color:var(--muted);margin:0 0 12px}.collection-scroll{overflow-x:auto;padding-bottom:8px}.collection-grid{display:grid;align-items:stretch;gap:4px;min-width:max-content}.collection-corner,.collection-slot{display:flex;align-items:end;justify-content:center;padding:0 2px 5px;color:var(--muted);font-size:10px;text-align:center;line-height:1.1}.collection-set{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:5px 8px;border:1px solid #4b4332;border-radius:7px;background:#171c1c}.collection-set strong{font-size:13px}.collection-set small{font-size:10px;color:var(--muted);line-height:1.2}.collection-set.tier-2 strong{color:#6ab5f0}.collection-set.tier-3 strong{color:#c68cf3}.collection-set.tier-4 strong{color:#e9a850}.collection-set.tier-5 strong{color:#b394de}.collection-cell{position:relative;display:grid;place-items:center;width:54px;height:54px;padding:3px;border:1px solid #627076;border-radius:6px;background:#091014;cursor:pointer}.collection-cell:hover{border-color:var(--gold)}.collection-cell .game-icon{width:46px;height:46px}.collection-cell.uncollected .game-icon{filter:grayscale(1) brightness(.45);opacity:.7}.collection-cell input{position:absolute;right:1px;bottom:1px;width:15px;height:15px;margin:0;cursor:pointer}.collection-cell.tier-5.uncollected:after{content:"?";position:absolute;top:5px;left:18px;color:#d7c397;font-family:Georgia,serif;font-size:27px;line-height:1;pointer-events:none}.equipped-mark{position:absolute;right:-3px;top:-4px;border-radius:100px;background:var(--gold);color:#111;padding:1px 4px;font-size:9px;font-weight:800}
.collection-set.tier-7 strong{color:#c68cf3}
@media(max-width:1100px){.talent-trees{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.talent-trees,.talent-xp-metrics{grid-template-columns:1fr}.achievement-list{grid-template-columns:1fr}}
@media(max-width:800px){.editor-layout{grid-template-columns:1fr}.tabs{flex-direction:row;overflow-x:auto;padding-bottom:4px}.tab{flex:0 0 auto}.workspace-top{flex-direction:column}.import-grid{grid-template-columns:1fr}.drop-zone{min-height:170px}}@media(max-width:540px){.shell{width:min(100% - 24px,1180px)}.site-header{padding:18px 0}.brand-copy{font-size:10px}.local-badge{display:none}.hero{padding:40px 0 30px}.import-card,.panel{padding:18px}.grid-list,.stat-grid{grid-template-columns:1fr}.section-heading{align-items:flex-start}.pill{font-size:10px}.export-actions .button{flex:1}.footer{flex-direction:column}}

:root{
  color-scheme:dark;
  --bg:#090d16;
  --card:#111927;
  --card2:#172234;
  --line:#596071;
  --text:#f0e7ce;
  --muted:#b7b09f;
  --gold:#d8b66c;
  --blue:#92b8d5;
  --green:#9fca9b;
  --red:#e58b7c;
  font-family:Georgia,"Palatino Linotype",serif;
  background:var(--bg);
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(ellipse at 50% 5%,#27354c 0,transparent 46%),
    linear-gradient(180deg,#0d1421 0,#090d16 65%,#0d111a 100%);
  color:var(--text);
  font-family:Georgia,"Palatino Linotype",serif;
}
.ambient{
  background:
    radial-gradient(ellipse at 50% 0%,#8c6b3520,transparent 52%),
    radial-gradient(ellipse at 0% 40%,#29395440,transparent 44%),
    radial-gradient(ellipse at 100% 38%,#402b3850,transparent 42%),
    repeating-linear-gradient(115deg,#ffffff03 0 1px,transparent 1px 5px),
    linear-gradient(#0b111c,#090d16);
}
.shell{width:min(1240px,calc(100% - 48px))}
.site-header{
  position:relative;
  padding:22px 4px;
  border-bottom:1px solid #b08a4d75;
  box-shadow:0 1px 0 #f1d89912;
}
.site-header:after{
  position:absolute;
  right:0;
  bottom:-2px;
  left:0;
  height:3px;
  background:linear-gradient(90deg,transparent,#9c7a43,#e5ce92,#9c7a43,transparent);
  content:"";
  opacity:.65;
}
.brand-mark{
  position:relative;
  width:48px;
  height:48px;
  border:1px solid #e0bf76;
  border-radius:50%;
  background:radial-gradient(circle,#493a24 0,#171c28 70%);
  box-shadow:0 0 0 3px #151b26,0 0 0 4px #82683d,0 0 24px #d4ae6a38,inset 0 0 12px #d4ae6a30;
  color:#f1d899;
  font-size:17px;
  text-shadow:0 1px 8px #f4d18c80;
}
.brand-mark:after{
  position:absolute;
  inset:4px;
  border:1px solid #d5b87570;
  border-radius:50%;
  content:"";
}
.brand-copy{gap:4px;color:#f1e4c4;font-family:Georgia,"Palatino Linotype",serif}
.brand-copy strong{font-size:14px;letter-spacing:.16em}
.brand-copy span{color:#d7b76f;font-family:ui-sans-serif,system-ui,sans-serif;font-size:9px;letter-spacing:.24em}
.local-badge{
  border:1px solid #708b6b80;
  background:#101a1bba;
  color:#b5d09a;
  font-family:ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.02em;
}
.language-switch{color:#e2c47d}
.language-switch select{min-width:108px}
.hero{
  position:relative;
  max-width:860px;
  padding:68px 0 42px;
}
.hero:after{
  display:block;
  width:min(440px,80%);
  height:1px;
  margin-top:28px;
  background:linear-gradient(90deg,#d4ae6a,transparent);
  content:"";
}
.eyebrow{
  color:#d5b466;
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:10px;
  letter-spacing:.28em;
  text-shadow:0 0 14px #c6934840;
}
.hero h1,.section-heading h2,.workspace-top h2,.panel-header h3{
  color:#f3e7c7;
  font-family:Georgia,"Palatino Linotype",serif;
  text-shadow:0 2px 14px #000b;
}
.hero h1{font-size:clamp(42px,5.5vw,68px);letter-spacing:-.025em}
.hero p:last-child{max-width:680px;color:#c1baa9;font-size:16px;line-height:1.75}
.card{
  position:relative;
  overflow:hidden;
  border:1px solid #756342;
  border-radius:12px;
  background:linear-gradient(145deg,#172131f5,#101725f8 58%,#121a27f5);
  box-shadow:0 22px 68px #0009,inset 0 1px 0 #f7dfa126,inset 0 0 0 3px #080d1675;
}
.card:before{
  position:absolute;
  inset:5px;
  z-index:0;
  border:1px solid #d7b76b23;
  border-radius:8px;
  content:"";
  pointer-events:none;
}
.import-card,.panel{padding:30px}
.import-card>*,.panel>*{position:relative}
.section-heading,.workspace-top{align-items:center}
.section-heading h2,.workspace-top h2{font-size:30px}
.pill{
  border:1px solid #81704e;
  border-radius:4px;
  background:#121a27;
  color:#c8bea8;
  font-family:ui-sans-serif,system-ui,sans-serif;
}
.pill.good{border-color:#6e9a73;color:#b9dca4}
.drop-zone{
  position:relative;
  overflow:hidden;
  min-height:225px;
  border:1px dashed #b39459;
  border-radius:7px;
  background:
    radial-gradient(ellipse at center,#a47e3820,transparent 72%),
    linear-gradient(145deg,#182131,#111824);
  box-shadow:inset 0 0 35px #0005;
}
.drop-zone:after{
  position:absolute;
  inset:8px;
  border:1px solid #d4ae6a25;
  content:"";
  pointer-events:none;
}
.drop-zone:hover,.drop-zone.dragging{border-color:#f0d48d;background-color:#362c1c}
.drop-zone strong{font-size:17px;color:#eee0bd}
.drop-zone small,.paste-zone label,.field>label{color:#c6bda8}
.upload-icon{font-size:38px;color:#e0bf76;text-shadow:0 0 20px #d4ae6a80}
.paste-zone{padding:3px}
textarea,input,select{
  border:1px solid #566177;
  border-radius:5px;
  background:#0b111b;
  color:#f2e7cb;
  font-family:ui-sans-serif,system-ui,sans-serif;
  box-shadow:inset 0 2px 8px #0006;
}
textarea:focus,input:focus,select:focus{
  border-color:#e0bf76;
  box-shadow:0 0 0 2px #d4ae6a2b,inset 0 2px 8px #0006;
}
input[type=checkbox]{accent-color:#d6b66e}
button,.tab{font-family:ui-sans-serif,system-ui,sans-serif}
.button{
  border-radius:5px;
  letter-spacing:.015em;
  box-shadow:0 2px 0 #0006,inset 0 1px 0 #ffffff17;
}
.button:hover{filter:brightness(1.13);transform:translateY(-1px)}
.primary{
  border-color:#edcf82;
  background:linear-gradient(#e9cf8d,#b38a45);
  color:#211a10;
  text-shadow:0 1px #fff5;
}
.secondary{border-color:#6a7485;background:linear-gradient(#273448,#1a2535);color:#e9dfc6}
.danger{border-color:#91615b;color:#f0a197}
.message,.muted,.footnote{font-family:ui-sans-serif,system-ui,sans-serif}
.message.success{color:#b9dca4}
.message.error{color:#ffaaa0}
.workspace{padding-top:46px}
.workspace-top{padding:0 4px 16px}
.workspace-top h2{font-size:34px}
.workspace-top .muted{color:#afa995}
.editor-layout{grid-template-columns:205px minmax(0,1fr);gap:18px;margin-top:12px}
.tabs{
  position:sticky;
  top:18px;
  padding:8px;
  border:1px solid #62543b;
  border-radius:8px;
  background:linear-gradient(155deg,#151e2cf5,#101722f5);
  box-shadow:0 12px 30px #0005,inset 0 0 0 2px #080d1675;
}
.tab{
  position:relative;
  border:1px solid transparent;
  border-radius:4px;
  color:#b9b29f;
  font-size:12px;
  letter-spacing:.015em;
}
.tab:hover{background:#d4ae6a0d;color:#f2e6c6}
.tab.active{
  border-color:#9c7c49;
  background:linear-gradient(90deg,#70582c55,#d4ae6a12);
  color:#f0d38b;
  box-shadow:inset 3px 0 #d9b866,inset 0 1px #f4dfa326;
}
.panel{min-width:0}
.panel-header{
  border-bottom:1px solid #796541;
  box-shadow:0 1px 0 #ffffff0a;
}
.panel-header h3{font-size:29px}
.panel-header p{color:#b8b19f;font-family:ui-sans-serif,system-ui,sans-serif}
.toolbar{gap:14px}
.grid-list{gap:9px}
.check-row,.rank-row{
  border:1px solid #465267;
  border-radius:5px;
  background:linear-gradient(120deg,#1b2635,#151f2c);
  box-shadow:inset 0 1px 0 #ffffff0a;
}
.check-row:hover,.rank-row:hover{border-color:#987c4c;background:#202b39}
.check-row span,.rank-row span{color:#eee4ca}
.check-row small,.rank-row small{color:#b5ad99;font-family:ui-sans-serif,system-ui,sans-serif}
.subheading{color:#e0c278;font-family:ui-sans-serif,system-ui,sans-serif;letter-spacing:.035em}
.hint{color:#b7b09f;font-family:ui-sans-serif,system-ui,sans-serif}
.tag{color:#a7c4dc}
.footer{
  border-top:1px solid #79654175;
  color:#a59d89;
  font-family:ui-sans-serif,system-ui,sans-serif;
}
.game-icon{border-color:#95845f;box-shadow:0 1px 5px #0009}
.item-row.uncollected .game-icon{filter:grayscale(1) brightness(.5)}
.talent-xp-metrics>div,.talent-tree{
  border-color:#4b5669;
  background:linear-gradient(145deg,#172232,#111a28);
}
.talent-tree-heading{border-color:#65583f}
.talent-tree-heading h4{color:#e9dfc5}
.talent-tree-heading small{color:#e0c278}
.talent-node{
  border-color:#465267;
  background:linear-gradient(120deg,#1b2635,#151f2c);
}
.talent-node.selected{border-color:#c49b58;box-shadow:0 0 12px #bd94442b}
.talent-xp-metrics small,.talent-stat small{color:#b8b09e}
.talent-stat{
  border-color:#67583d;
  background:linear-gradient(145deg,#1b2635,#111a27);
}
.talent-xp{color:#bbb39f}
.achievement-total,.achievement-date{color:#e0c278}
.collection-set{border-color:#746344;background:linear-gradient(135deg,#202a38,#151d2a)}
.collection-set strong{color:#e9dfc7}
.collection-set small{font-family:ui-sans-serif,system-ui,sans-serif}
.collection-set.tier-2 strong{color:#7dc4f2}
.collection-set.tier-3 strong{color:#cd9bf5}
.collection-set.tier-4 strong{color:#f0bc63}
.collection-set.tier-5 strong{color:#c4a4ef}
.collection-set.tier-7 strong{color:#d2a4ff;text-shadow:0 0 12px #a366ed55}
.collection-cell{border-color:#606b7c;background:#0a1019;box-shadow:0 2px 6px #0008,inset 0 0 0 1px #ffffff0a}
.collection-cell:hover{border-color:#e4c478;box-shadow:0 0 12px #ddb96040}
.collection-cell.tier-5.uncollected:after{color:#e3c781}
.item-list{scrollbar-color:#9c7c49 #101722;scrollbar-width:thin}
::selection{background:#9e7a3d;color:#fff4d8}
:focus-visible{outline:2px solid #e3c679;outline-offset:2px}
@media(max-width:800px){
  .tabs{position:static}
  .editor-layout{gap:12px}
}
@media(max-width:640px){
  .shell{width:min(100% - 28px,1240px)}
  .site-header{gap:10px;padding:17px 0}
  .brand-mark{width:42px;height:42px}
  .brand-copy strong{font-size:11px}
  .brand-copy span{font-size:8px;letter-spacing:.15em}
  .local-badge{display:none}
  .language-switch{margin-left:auto}
  .hero{padding:44px 0 30px}
  .hero h1{font-size:clamp(38px,11vw,56px)}
  .import-card,.panel{padding:20px}
  .workspace{padding-top:34px}
  .workspace-top h2{font-size:29px}
  .section-heading{align-items:flex-start}
  .tabs{padding:5px}
  .tab{padding:10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none!important;animation:none!important}
}

.hero-selection-panel{
  margin-bottom:22px;
  padding:16px 18px;
  border:1px solid #d4ae6a66;
  border-radius:11px;
  background:linear-gradient(125deg,#d4ae6a12,#20303688 62%,#11191d);
  box-shadow:inset 0 1px 0 #f7dfa126;
}
.hero-selection-heading{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:13px;
}
.hero-selection-heading strong{
  color:#f0d48f;
  font-family:Georgia,"Palatino Linotype",serif;
  font-size:17px;
}
.hero-selection-heading small,.perk-card-copy small{
  color:var(--muted);
  font-size:12px;
}
.hero-selection-controls{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.hero-selection-controls .field{min-width:0}
.hero-selection-controls .field select{width:100%}
.hero-selection-controls .picker-with-icon select{flex:1}
.hero-selection-controls .field:last-child>label{color:#e0c278}
.perk-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.perk-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) 78px;
  align-items:center;
  gap:12px;
  min-width:0;
  padding:12px 14px;
  border:1px solid #756342;
  border-radius:9px;
  background:linear-gradient(135deg,#202b39,#151d23);
}
.perk-card-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.perk-card-copy strong{color:#eee4ca;font-size:13px;overflow-wrap:anywhere}
.perk-card input{width:100%;text-align:center}
.perk-rank-warning{grid-column:1/-1;color:var(--red);font-size:11px}
@media(max-width:640px){
  .hero-selection-controls,.perk-grid{grid-template-columns:1fr}
  .hero-selection-heading{align-items:flex-start;flex-direction:column;gap:4px}
}

/* A brighter field-journal direction, distinct from the original dark armory. */
:root{
  color-scheme:light;
  --bg:#17241b;
  --card:#ead9af;
  --card2:#ddc99a;
  --line:#967b4b;
  --text:#30281b;
  --muted:#66583e;
  --gold:#a96d22;
  --blue:#335d77;
  --green:#45683d;
  --red:#9c4438;
  font-family:Georgia,"Palatino Linotype",serif;
  background:#17241b;
}
body{
  color:#32291a;
  background:
    radial-gradient(ellipse at 50% 10%,#526441 0,transparent 52%),
    radial-gradient(ellipse at 8% 72%,#283e2c 0,transparent 44%),
    radial-gradient(ellipse at 95% 78%,#273b2b 0,transparent 42%),
    linear-gradient(135deg,#18251c,#253627 48%,#17231a);
}
.ambient{
  background:
    radial-gradient(ellipse at 50% 2%,#c4a66a1c,transparent 55%),
    repeating-linear-gradient(35deg,#f3e5bf05 0 1px,transparent 1px 5px),
    linear-gradient(180deg,#1d2c21,#17231a);
}
.shell{width:min(1320px,calc(100% - 56px))}
.site-header{
  padding:17px 0;
  border-bottom:1px solid #c9a763;
  box-shadow:0 1px 0 #09130b;
}
.site-header:after{height:1px;background:linear-gradient(90deg,transparent,#e6ce93,transparent);opacity:.8}
.brand-mark{
  width:42px;height:42px;
  border:2px solid #d5b875;
  background:radial-gradient(circle,#405138,#18231b 72%);
  box-shadow:0 0 0 3px #1c2a20,0 0 0 4px #a67b36;
  color:#f0d48b;
}
.brand-mark:after{border-color:#d5b87588}
.brand-copy{color:#f2e6c6}
.brand-copy span{color:#d8b66c}
.local-badge{border-color:#88976a;background:#263529;color:#d4dbb4}
.hero{
  max-width:none;
  padding:45px 0 30px;
}
.hero:after{display:none}
.hero h1{max-width:900px;font-size:clamp(38px,5vw,58px);letter-spacing:-.02em}
.hero p:last-child{max-width:760px;color:#e0d4b8;font-size:15px}
.eyebrow{color:#e0c278}
.import-card,.panel{
  overflow:visible;
  border:1px solid #8e713f;
  border-radius:3px;
  background:
    radial-gradient(ellipse at 20% 0%,#fff5d366,transparent 48%),
    repeating-linear-gradient(0deg,#735a2a08 0 1px,transparent 1px 4px),
    linear-gradient(135deg,#f0e2bd,#e6d3a8 52%,#deca9b);
  box-shadow:0 22px 55px #08130b80,inset 0 0 0 4px #f4e8c9,inset 0 0 0 5px #b3955c;
}
.card:before{display:none}
.import-card,.panel{padding:30px}
.section-heading h2,.workspace-top h2,.panel-header h3,.hero h1{
  color:#352a19;
  text-shadow:0 1px #fff3d4a8;
}
.section-heading h2,.workspace-top h2{font-size:30px}
.pill{border-color:#a38b5d;background:#f2e5c7;color:#665331}
.pill.good{border-color:#789161;color:#3e6539}
.import-grid{gap:22px}
.drop-zone{
  border:1px dashed #9f7d3e;
  border-radius:3px;
  background:
    radial-gradient(ellipse at center,#fff9e355,transparent 74%),
    linear-gradient(135deg,#e7d4a8,#dcc493);
  box-shadow:inset 0 0 0 5px #f1e4c4,inset 0 0 0 6px #b49a65;
}
.drop-zone:after{inset:13px;border-color:#9677434d}
.drop-zone strong{color:#3f321f}
.drop-zone small,.paste-zone label,.field>label{color:#665539}
.upload-icon{color:#8e6323;text-shadow:none}
.paste-zone{padding:3px}
textarea,input,select{
  border:1px solid #9c8558;
  border-radius:3px;
  background:#f7edd5;
  color:#352a1b;
  box-shadow:inset 0 1px 3px #513c1d26;
}
textarea:focus,input:focus,select:focus{
  border-color:#a56f27;
  box-shadow:0 0 0 2px #a56f2726,inset 0 1px 3px #513c1d20;
}
input[type=checkbox]{accent-color:#577345}
.button{
  border-radius:3px;
  box-shadow:0 2px 0 #66451e55,inset 0 1px 0 #fff7;
}
.button:hover{transform:translateY(-1px);filter:brightness(1.04)}
.primary{
  border-color:#a17635;
  background:linear-gradient(#ddc27d,#b5883d);
  color:#2e2517;
  text-shadow:none;
}
.secondary{border-color:#71805d;background:linear-gradient(#526a4c,#354a36);color:#f5ebd1}
.danger{border-color:#a06652;color:#8f4033}
.message,.muted,.footnote{color:#55482f}
.message.success{color:#42623a}
.message.error{color:#913a31}
.workspace{padding-top:34px}
.workspace-top{
  align-items:end;
  padding:17px 22px;
  border:1px solid #bca46f;
  border-bottom:0;
  background:linear-gradient(90deg,#203428,#31472e 50%,#203428);
  box-shadow:0 8px 18px #09140b60;
}
.workspace-top h2{color:#f0e2bd;text-shadow:0 2px #10190f}
.workspace-top .muted{color:#d0c29f}
.editor-layout{grid-template-columns:230px minmax(0,1fr);gap:0;margin-top:0}
.tabs{
  position:sticky;
  top:18px;
  gap:4px;
  padding:12px 10px;
  border:1px solid #947747;
  border-right:0;
  border-radius:3px 0 0 3px;
  background:linear-gradient(180deg,#23372a,#1a2a20);
  box-shadow:0 12px 26px #09140b55;
}
.tab{
  border:1px solid transparent;
  border-radius:2px;
  color:#d5c7a6;
  font-family:Georgia,"Palatino Linotype",serif;
  font-size:14px;
}
.tab:hover{background:#e2c67b19;color:#fff0ca}
.tab.active{
  border-color:#aa8849;
  background:linear-gradient(90deg,#ddc27a2c,#ddc27a0b);
  color:#f0d38b;
  box-shadow:inset 3px 0 #e1bf6d;
}
.panel{
  min-height:470px;
  border-radius:0 3px 3px 0;
  box-shadow:0 16px 38px #09130b70,inset 0 0 0 4px #f4e8c9,inset 0 0 0 5px #b3955c;
}
.panel-header{border-color:#a48b5a;box-shadow:0 1px 0 #fff5}
.panel-header h3{font-size:29px}
.panel-header p{color:#66583e}
.toolbar{gap:14px}
.grid-list{gap:9px}
.check-row,.rank-row{
  border:1px solid #b49c6a;
  border-radius:3px;
  background:linear-gradient(120deg,#f3e6c8,#ead9b3);
  box-shadow:inset 0 1px #fff9;
}
.check-row:hover,.rank-row:hover{border-color:#9c752e;background:#f7ebd1}
.check-row span,.rank-row span{color:#382d1d}
.check-row small,.rank-row small{color:#6e5d3b}
.subheading{color:#6c5428}
.hint{color:#65583e}
.tag{color:#315c6d}
.footer{border-color:#bd9c5e;color:#dbcfb1}
.game-icon{border-color:#8f7748;box-shadow:0 1px 4px #39290e40}
.item-row.uncollected .game-icon{filter:grayscale(1) brightness(.66)}
.talent-xp-metrics>div,.talent-tree{
  border-color:#b39b6a;
  background:linear-gradient(145deg,#f1e3c2,#e7d4ac);
}
.talent-tree-heading{border-color:#b29a66}
.talent-tree-heading h4{color:#40311e}
.talent-tree-heading small{color:#795c28}
.talent-node{
  border-color:#b7a16f;
  background:linear-gradient(120deg,#f6e9ca,#ead9b3);
}
.talent-node.selected{border-color:#a17635;box-shadow:0 0 10px #9f752a35}
.talent-copy strong{color:#382d1d}
.talent-description{color:#63563d}
.talent-xp-metrics small,.talent-stat small{color:#6a5a3d}
.talent-stat{
  border-color:#a9905c;
  background:linear-gradient(145deg,#f3e5c5,#e6d2a8);
}
.talent-stat strong{color:#3e3020}
.talent-xp{color:#63563d}
.achievement-total,.achievement-date{color:#735723}
.achievement-copy strong{color:#352c1d}
.achievement-copy small{color:#61553e}
.collection-set{border-color:#a88e59;background:linear-gradient(135deg,#f0e2bf,#e4d0a6)}
.collection-set strong{color:#3e301e}
.collection-set small{color:#6c5a39}
.collection-set.tier-2 strong{color:#316783}
.collection-set.tier-3 strong{color:#75529b}
.collection-set.tier-4 strong{color:#935c1e}
.collection-set.tier-5 strong{color:#684b91}
.collection-set.tier-7 strong{color:#8053a0;text-shadow:none}
.collection-cell{border-color:#927b50;background:#d9c596;box-shadow:0 2px 4px #55432338,inset 0 0 0 1px #fff6}
.collection-cell:hover{border-color:#a17635;box-shadow:0 0 10px #956b2d45}
.collection-cell.tier-5.uncollected:after{color:#795e27}
.item-list{scrollbar-color:#9a7840 #e1d0aa;scrollbar-width:thin}
::selection{background:#87956a;color:#fff8e4}
:focus-visible{outline:2px solid #8c682e;outline-offset:2px}
@media(max-width:800px){
  .tabs{position:static;border-right:1px solid #947747;border-radius:3px}
  .editor-layout{gap:12px}
  .workspace-top{border-bottom:1px solid #bca46f}
  .panel{border-radius:3px}
}
@media(max-width:640px){
  .shell{width:min(100% - 28px,1320px)}
  .site-header{padding:15px 0}
  .brand-mark{width:38px;height:38px}
  .hero{padding:35px 0 25px}
  .hero h1{font-size:clamp(36px,10vw,52px)}
  .import-card,.panel{padding:20px}
  .workspace-top{padding:16px}
  .section-heading h2,.workspace-top h2{font-size:26px}
  .tabs{padding:6px}
  .tab{font-size:12px;padding:10px}
}

/* Riftbound: an original, high-contrast expedition dashboard. */
:root{
  color-scheme:dark;
  --bg:#0e1020;
  --card:#191a30;
  --card2:#20213a;
  --line:#363753;
  --text:#f2efff;
  --muted:#a9a8c4;
  --gold:#a5ffd7;
  --blue:#92a4ff;
  --green:#77edbc;
  --red:#ff927f;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
body{
  color:var(--text);
  background:
    radial-gradient(ellipse at 82% 4%,#7b54dc27,transparent 34%),
    radial-gradient(ellipse at 8% 18%,#35d9b21c,transparent 32%),
    linear-gradient(155deg,#111326,#0e1020 52%,#111329);
}
.ambient{
  background:
    radial-gradient(ellipse at 78% 6%,#ae79ff18,transparent 35%),
    radial-gradient(ellipse at 11% 22%,#4ee6be14,transparent 36%),
    repeating-linear-gradient(130deg,#ffffff03 0 1px,transparent 1px 7px),
    linear-gradient(155deg,#111326,#0e1020 52%,#111329);
}
.shell{width:min(1280px,calc(100% - 48px))}
.site-header{
  border:0;
  border-bottom:1px solid #444563;
  box-shadow:0 1px 0 #ffffff08;
}
.site-header:after{height:2px;background:linear-gradient(90deg,transparent,#52edc2,#9b72ff,#ff957c,transparent);opacity:.85}
.brand-mark{
  border:1px solid #70f4ce;
  border-radius:14px 14px 14px 4px;
  background:linear-gradient(145deg,#2c3155,#15251f);
  box-shadow:0 0 0 4px #191a30,0 0 26px #4de3c344,inset 0 0 16px #71f6cd20;
  color:#a5ffd7;
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:15px;
  letter-spacing:-.08em;
}
.brand-mark:after{inset:5px;border:1px solid #a5ffd733;border-radius:10px 10px 10px 2px}
.brand-copy{gap:4px;color:#f2efff;font-family:ui-sans-serif,system-ui,sans-serif}
.brand-copy strong{font-size:13px;font-weight:850;letter-spacing:.13em}
.brand-copy span{color:#8df2d2;font-size:9px;letter-spacing:.2em}
.brand-byline{display:flex;align-items:center;gap:9px}
.brand-byline a{color:#c6b6ff;font-size:9px;font-weight:700;letter-spacing:.08em;text-decoration:none}
.brand-byline a:hover,.brand-byline a:focus-visible{color:#fff;text-decoration:underline}
.support-banner{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  overflow:hidden;
  border:1px solid #6a5a9a88;
  color:#e9e4ff;
  background:
    radial-gradient(ellipse at 12% 50%,#a587ff24,transparent 35%),
    linear-gradient(105deg,#201d3d,#17252c 58%,#23203b);
}
.support-banner:before{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(120deg,#ffffff06 0 1px,transparent 1px 9px);
  content:"";
  pointer-events:none;
}
.support-banner>*{position:relative}
.support-banner-top{
  justify-content:center;
  min-height:38px;
  margin-top:10px;
  padding:6px 14px;
  border-radius:999px;
  font-size:11px;
  letter-spacing:.025em;
}
.support-spark{color:#a5ffd7;font-size:15px;text-shadow:0 0 12px #8df2d2}
.support-banner-top a{
  color:#c8b7ff;
  font-weight:800;
  text-decoration:none;
}
.support-banner a:hover,.support-banner a:focus-visible{color:#fff;text-decoration:underline}
.support-banner-bottom{
  justify-content:space-between;
  gap:22px;
  margin-top:26px;
  padding:20px 24px;
  border-radius:16px 4px 16px 4px;
  box-shadow:0 18px 50px #08091566,inset 0 1px #ffffff12;
}
.support-emblem{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border:1px solid #80e9c588;
  border-radius:13px 4px 13px 4px;
  color:#a5ffd7;
  background:linear-gradient(145deg,#293554,#18352f);
  box-shadow:0 0 22px #4de3c322,inset 0 0 15px #71f6cd18;
  font-size:21px;
}
.support-copy{display:flex;flex:1;flex-direction:column;gap:4px}
.support-copy strong{color:#fff;font-size:14px;letter-spacing:.025em}
.support-copy span{max-width:680px;color:#b9b6d2;font-size:12px;line-height:1.55}
.support-button{
  display:inline-flex;
  flex:none;
  align-items:center;
  gap:9px;
  padding:11px 16px;
  border:1px solid #82eac488;
  border-radius:9px;
  color:#a5ffd7;
  background:#19342f;
  box-shadow:0 0 18px #4de3c318;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
  transition:transform .16s ease,background .16s ease;
}
.support-button:hover{transform:translateY(-2px);background:#22483f}
.local-badge{
  border:1px solid #3c685f;
  background:#172a2b;
  color:#a5ffd7;
  font-family:ui-sans-serif,system-ui,sans-serif;
}
.language-switch{color:#a5ffd7}
.hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  max-width:none;
  margin:34px 0 24px;
  padding:44px 48px 40px;
  border:1px solid #3a3b5c;
  border-radius:22px 4px 22px 4px;
  background:
    radial-gradient(ellipse at 88% 40%,#9368ff28,transparent 34%),
    radial-gradient(ellipse at 70% 100%,#45e9c51a,transparent 46%),
    linear-gradient(115deg,#1a1c35,#17182c 60%,#202039);
  box-shadow:0 24px 70px #08091580,inset 0 1px #ffffff12;
}
.hero:before{
  position:absolute;
  z-index:-1;
  top:-110px;
  right:5%;
  width:390px;
  aspect-ratio:1;
  border:1px solid #9a7cff2b;
  border-radius:50%;
  background:radial-gradient(circle,#9a7cff14 0 1px,transparent 2px);
  background-size:15px 15px;
  box-shadow:0 0 0 26px #9a7cff08,0 0 0 54px #9a7cff06,0 0 100px #9a7cff17;
  content:"";
  pointer-events:none;
}
.hero:after{
  position:absolute;
  right:calc(5% + 154px);
  top:calc(50% - 10px);
  z-index:-1;
  display:block;
  width:20px;
  height:20px;
  margin:0;
  border:1px solid #a5ffd777;
  border-radius:5px;
  background:#a5ffd733;
  box-shadow:0 0 35px #8b75ff99;
  content:"";
  transform:rotate(45deg);
}
.hero .eyebrow{color:#8ef4d4}
.hero h1{
  max-width:790px;
  margin-bottom:13px;
  color:#f4f1ff;
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:clamp(42px,6.3vw,74px);
  font-weight:850;
  letter-spacing:-.07em;
  line-height:1;
  text-shadow:0 5px 35px #a37aff25;
}
.hero p:last-child{max-width:620px;color:#bbb9d4;font-family:ui-sans-serif,system-ui,sans-serif}
.card,.import-card,.panel{
  border:1px solid #3b3c5a;
  border-radius:16px;
  background:linear-gradient(145deg,#1a1b32f5,#151629f8);
  box-shadow:0 20px 58px #07081378,inset 0 1px #ffffff0c;
}
.card:before{display:none}
.import-card,.panel{padding:28px}
.section-heading h2,.workspace-top h2,.panel-header h3{
  color:#f2efff;
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-weight:750;
  letter-spacing:-.04em;
  text-shadow:none;
}
.section-heading h2,.workspace-top h2{font-size:28px}
.pill{
  border:1px solid #454662;
  border-radius:100px;
  background:#20213a;
  color:#b8b7d2;
  font-family:ui-sans-serif,system-ui,sans-serif;
}
.pill.good{border-color:#397260;color:#8ef4c9}
.drop-zone{
  position:relative;
  overflow:hidden;
  border:1px dashed #5d8c83;
  border-radius:12px;
  background:linear-gradient(145deg,#1b2635,#17252c);
  box-shadow:inset 0 0 40px #4de3c20b;
}
.drop-zone:after{
  position:absolute;
  inset:10px;
  border:1px solid #9ffff014;
  border-radius:8px;
  content:"";
  pointer-events:none;
}
.drop-zone:hover,.drop-zone.dragging{border-color:#8ef4d4;background:#193331}
.drop-zone strong{color:#f2efff;font-family:ui-sans-serif,system-ui,sans-serif}
.drop-zone small,.paste-zone label,.field>label{color:#b6b5d0;font-family:ui-sans-serif,system-ui,sans-serif}
.upload-icon{color:#8ef4d4;text-shadow:0 0 22px #4de3c280}
textarea,input,select{
  border:1px solid #444560;
  border-radius:8px;
  background:#101121;
  color:#f2efff;
  font-family:ui-sans-serif,system-ui,sans-serif;
  box-shadow:inset 0 2px 8px #0005;
}
textarea:focus,input:focus,select:focus{
  border-color:#64e8c1;
  box-shadow:0 0 0 3px #4de3c21c,inset 0 2px 8px #0005;
}
input[type=checkbox]{accent-color:#68ecc3}
.button{
  border-radius:8px;
  font-family:ui-sans-serif,system-ui,sans-serif;
  box-shadow:0 3px 0 #090a16,inset 0 1px #ffffff16;
}
.button:hover{transform:translateY(-1px);filter:brightness(1.12)}
.primary{
  border-color:#9cffe0;
  background:linear-gradient(135deg,#9bffda,#52cfb4);
  color:#11251f;
}
.secondary{border-color:#4b4d70;background:linear-gradient(135deg,#292a49,#20213a);color:#e6e4ff}
.danger{border-color:#744553;color:#ff9e9c}
.message,.muted,.footnote{color:#aaa9c4;font-family:ui-sans-serif,system-ui,sans-serif}
.message.success{color:#8ef4c9}
.message.error{color:#ff9e9c}
.workspace{padding-top:35px}
.workspace-top{
  align-items:end;
  padding:0 4px 20px;
}
.workspace-top h2{font-size:34px}
.workspace-top .muted{color:#aaa9c4}
.editor-layout{display:flex;flex-direction:column;gap:12px;margin-top:0}
.tabs{
  position:static;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
  padding:7px;
  border:1px solid #3d3e5b;
  border-radius:12px;
  background:#151629;
  box-shadow:0 8px 26px #08091570,inset 0 1px #ffffff0c;
}
.tab{
  text-align:center;
  border:1px solid transparent;
  border-radius:8px;
  color:#aaa9c4;
  font-family:ui-sans-serif,system-ui,sans-serif;
  font-size:12px;
}
.tab:hover{background:#ffffff08;color:#f2efff}
.tab.active{
  border-color:#3b7768;
  background:linear-gradient(135deg,#4de3c21a,#9270ff17);
  color:#9cffe0;
  box-shadow:inset 0 0 20px #4de3c20c;
}
.panel{min-width:0}
.panel-header{
  border-bottom:1px solid #41425f;
  box-shadow:0 1px #ffffff08;
}
.panel-header h3{font-size:27px}
.panel-header p{color:#aaa9c4;font-family:ui-sans-serif,system-ui,sans-serif}
.grid-list{gap:9px}
.check-row,.rank-row{
  border:1px solid #383a58;
  border-radius:9px;
  background:linear-gradient(120deg,#20213a,#191a30);
  box-shadow:inset 0 1px #ffffff08;
}
.check-row:hover,.rank-row:hover{border-color:#5b6387;background:#252641}
.check-row span,.rank-row span{color:#e8e6fb}
.check-row small,.rank-row small{color:#aaa9c4;font-family:ui-sans-serif,system-ui,sans-serif}
.subheading{color:#91f0d0;font-family:ui-sans-serif,system-ui,sans-serif}
.hint{color:#aaa9c4;font-family:ui-sans-serif,system-ui,sans-serif}
.tag{color:#aeb8ff}
.footer{border-color:#3b3c5a;color:#8585a5;font-family:ui-sans-serif,system-ui,sans-serif}
.game-icon{border-color:#575978;box-shadow:0 2px 7px #0007}
.talent-xp-metrics>div,.talent-tree{
  border-color:#3b3c5a;
  background:linear-gradient(145deg,#1c1d34,#151629);
}
.talent-tree-heading{border-color:#41425f}
.talent-tree-heading h4{color:#e8e6fb}
.talent-tree-heading small{color:#91f0d0}
.talent-node{
  border-color:#3c3e5a;
  background:linear-gradient(120deg,#20213a,#191a30);
}
.talent-node.selected{border-color:#6edfc0;box-shadow:0 0 15px #4de3c21c}
.talent-copy strong{color:#f2efff}
.talent-description{color:#aaa9c4}
.talent-xp-metrics small,.talent-stat small{color:#aaa9c4}
.talent-stat{
  border-color:#444560;
  background:linear-gradient(145deg,#20213a,#17182d);
}
.talent-stat strong{color:#f2efff}
.talent-xp{color:#aaa9c4}
.achievement-total,.achievement-date{color:#91f0d0}
.achievement-copy strong{color:#f2efff}
.achievement-copy small{color:#aaa9c4}
.collection-set{border-color:#454662;background:linear-gradient(135deg,#242540,#191a30)}
.collection-set strong{color:#e8e6fb}
.collection-set small{color:#aaa9c4}
.collection-set.tier-2 strong{color:#88d8ff}
.collection-set.tier-3 strong{color:#c19aff}
.collection-set.tier-4 strong{color:#ffbe72}
.collection-set.tier-5 strong{color:#b69cff}
.collection-set.tier-7 strong{color:#e0a4ff;text-shadow:0 0 12px #a366ed55}
.collection-cell{border-color:#505271;background:#101121;box-shadow:0 2px 6px #0008,inset 0 0 0 1px #ffffff0a}
.collection-cell:hover{border-color:#8ef4d4;box-shadow:0 0 14px #4de3c233}
.collection-cell.tier-5.uncollected:after{color:#a5ffd7}
.item-list{scrollbar-color:#55577d #141528;scrollbar-width:thin}
::selection{background:#59d8b8;color:#101121}
:focus-visible{outline:2px solid #8ef4d4;outline-offset:3px}
@media(max-width:800px){
  .tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:640px){
  .shell{width:min(100% - 28px,1280px)}
  .site-header{padding:16px 0}
  .brand-mark{width:39px;height:39px}
  .brand-copy strong{font-size:11px}
  .brand-copy span{font-size:8px;letter-spacing:.12em}
  .local-badge{display:none}
  .hero{margin:22px 0 17px;padding:32px 22px;border-radius:16px 3px}
  .hero:before{right:-170px;opacity:.6}
  .hero:after{right:60px;opacity:.7}
  .hero h1{font-size:clamp(40px,11vw,60px)}
  .import-card,.panel{padding:20px}
  .workspace{padding-top:25px}
  .workspace-top{align-items:flex-start;flex-direction:column}
  .workspace-top h2{font-size:29px}
  .tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tab{text-align:left}
  .section-heading{align-items:flex-start}
}

.heroic-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:28px 0 12px;
}
.heroic-heading .subheading{margin:0 0 5px}
.heroic-heading .hint{margin:0}
.heroic-zone-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.heroic-zone-row{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 10px;
  border:1px solid #383a58;
  border-radius:9px;
  background:linear-gradient(120deg,#20213a,#191a30);
}
.heroic-zone-row>span{
  overflow:hidden;
  color:#e8e6fb;
  font:650 12px ui-sans-serif,system-ui,sans-serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.heroic-zone-row select{
  width:142px;
  min-width:0;
  flex:none;
  padding:7px 8px;
  border:1px solid #444560;
  border-radius:7px;
  background:#141528;
  color:#e8e6fb;
  font:600 11px ui-sans-serif,system-ui,sans-serif;
}
.bulk-editor-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:12px 0 16px;
  padding:12px 14px;
  border:1px solid #3b3c5a;
  border-radius:10px;
  background:linear-gradient(115deg,#20213a,#191a30);
}
.bulk-editor-copy{display:flex;min-width:0;flex-direction:column;gap:4px}
.bulk-editor-copy strong{color:#e8e6fb;font:700 12px ui-sans-serif,system-ui,sans-serif}
.bulk-editor-copy small{color:#aaa9c4;font:500 11px/1.4 ui-sans-serif,system-ui,sans-serif}
@media(max-width:640px){
  .heroic-heading{align-items:flex-start;flex-direction:column}
  .heroic-zone-list{grid-template-columns:minmax(0,1fr)}
  .heroic-zone-row select{width:148px}
}
@media(max-width:520px){
  .bulk-editor-action{align-items:flex-start;flex-direction:column}
}
.zone-bulk-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:16px 0 22px;
  padding:12px 14px;
  border:1px solid #3b3c5a;
  border-radius:10px;
  background:linear-gradient(115deg,#20213a,#191a30);
}
.zone-bulk-copy{display:flex;min-width:0;flex-direction:column;gap:4px}
.zone-bulk-copy strong{color:#e8e6fb;font:700 12px ui-sans-serif,system-ui,sans-serif}
.zone-bulk-copy small{color:#aaa9c4;font:500 11px/1.4 ui-sans-serif,system-ui,sans-serif}
@media(max-width:520px){
  .zone-bulk-actions{align-items:flex-start;flex-direction:column}
}

.workspace-top{
  align-items:center;
  padding:0 2px 18px;
  border:0;
  background:transparent;
  box-shadow:none;
}
.workspace-top h2{
  margin:0;
  color:#f2efff;
  font-size:30px;
  font-weight:750;
  letter-spacing:-.045em;
  text-shadow:none;
}
.workspace-top .eyebrow{margin-bottom:5px}
.workspace-top #save-summary{
  display:inline-flex;
  width:fit-content;
  margin:7px 0 0;
  padding:5px 10px;
  border:1px solid #383a58;
  border-radius:999px;
  background:#191a30;
  color:#aaa9c4;
  font-size:11px;
  line-height:1.35;
  letter-spacing:.01em;
}
.marks-editor input{width:128px;flex:none}

.import-card{
  position:relative;
  overflow:hidden;
  padding:clamp(22px,3vw,38px);
  border-color:#424365;
  background:
    radial-gradient(ellipse at 2% 5%,#725ec01a,transparent 36%),
    linear-gradient(145deg,#191a32f7,#131528fa);
}
.import-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:25px;
}
.import-heading-copy{max-width:680px}
.import-heading .eyebrow{margin-bottom:9px;color:#8ef4d4}
.import-heading h2{
  margin:0;
  color:#f2efff;
  font:750 clamp(25px,3vw,36px)/1.08 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.045em;
}
.import-heading-copy>p:last-child{
  margin:10px 0 0;
  color:#aaa9c4;
  font:13px/1.6 ui-sans-serif,system-ui,sans-serif;
}
.import-heading .pill{flex:none;margin-top:3px}
.import-experience{
  display:grid;
  grid-template-columns:minmax(220px,.8fr) minmax(0,1.35fr);
  gap:clamp(20px,3vw,36px);
}
.import-art{
  position:relative;
  display:flex;
  min-height:340px;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
  padding:25px;
  border:1px solid #625c91;
  border-radius:13px;
  background:
    radial-gradient(ellipse at 50% 32%,#8f78ff33,transparent 46%),
    radial-gradient(ellipse at 12% 100%,#3ad9b622,transparent 55%),
    linear-gradient(150deg,#282644,#18192f 65%,#14232c);
  box-shadow:inset 0 1px #ffffff12,0 12px 30px #08091855;
}
.import-art:before,.import-art:after{
  position:absolute;
  right:-72px;
  top:-90px;
  width:260px;
  aspect-ratio:1;
  border:1px solid #a69aff25;
  border-radius:50%;
  content:"";
  box-shadow:0 0 0 18px #a69aff08,0 0 0 38px #a69aff06,0 0 0 64px #a69aff04;
}
.import-art:after{
  right:auto;
  top:auto;
  bottom:-185px;
  left:-145px;
  width:290px;
  border-color:#63e4bd24;
  box-shadow:0 0 0 18px #63e4bd08,0 0 0 40px #63e4bd06;
}
.import-art-stars{
  position:absolute;
  inset:0;
  opacity:.45;
  background-image:radial-gradient(#d5d0ff 1px,transparent 1.5px),radial-gradient(#88f2dd 1px,transparent 1.5px);
  background-position:19px 24px,69px 54px;
  background-size:87px 83px,113px 97px;
  mask-image:linear-gradient(180deg,#000,transparent 82%);
}
.import-seal{
  position:relative;
  z-index:1;
  display:grid;
  width:92px;
  aspect-ratio:1;
  place-items:center;
  align-self:center;
  margin:15px 0 0;
  border:1px solid #b5a8ff91;
  border-radius:50%;
  background:radial-gradient(circle,#514c7d,#292747 66%,#1d1d35);
  box-shadow:0 0 0 8px #a296ff0c,0 0 32px #8f78ff45,inset 0 0 22px #a69aff2e;
}
.import-seal:before,.import-seal:after{
  position:absolute;
  inset:-10px;
  border:1px dashed #88e9d45c;
  border-radius:50%;
  content:"";
  animation:seal-orbit 36s linear infinite;
}
.import-seal:after{
  inset:-19px;
  border-color:#b9aaff38;
  animation-direction:reverse;
  animation-duration:54s;
}
.import-seal svg{width:57px;stroke:#d8d1ff;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}
.import-art-copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px}
.import-art-copy>span,.import-art-copy small{
  color:#a9a5cc;
  font:750 9px/1.4 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.16em;
}
.import-art-copy strong{
  color:#f2efff;
  font:760 clamp(24px,2.4vw,32px)/1.05 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.045em;
}
.import-art-copy small{margin-top:5px;color:#83e5cd;font-size:8px}
.import-art-spark{
  position:absolute;
  z-index:1;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#d8d1ff;
  box-shadow:0 0 12px 3px #a69aff88;
}
.spark-one{top:22%;left:18%}.spark-two{top:44%;right:14%;width:3px;height:3px}.spark-three{top:59%;left:27%;width:2px;height:2px}
.import-options{display:flex;min-width:0;flex-direction:column;gap:18px}
.import-option-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#f2efff;
  font:700 13px ui-sans-serif,system-ui,sans-serif;
}
.import-option-heading span+span{color:#7d7e9f;font-size:9px;letter-spacing:.13em}
.drop-zone{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) auto;
  grid-template-areas:"icon copy browse" "hints hints hints";
  justify-content:initial;
  align-items:center;
  gap:12px 15px;
  min-height:132px;
  padding:22px;
  border-color:#5c7281;
  border-radius:11px;
  background:linear-gradient(120deg,#1d293b,#192633 65%,#192e33);
  text-align:left;
  box-shadow:inset 0 0 35px #4de3c20a;
}
.drop-zone:after{inset:8px;border-color:#a5ffd710;border-radius:7px}
.drop-zone:hover,.drop-zone.dragging{
  border-color:#8ef4d4;
  background:linear-gradient(120deg,#223149,#1c3038 75%,#1b3938);
  box-shadow:inset 0 0 42px #4de3c21a,0 0 24px #4de3c20d;
}
.drop-zone>span{position:relative;z-index:1}
.drop-zone .upload-icon{
  grid-area:icon;
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  margin:0;
  border:1px solid #64e8c145;
  border-radius:12px;
  background:#4de3c214;
}
.upload-icon svg{width:23px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.drop-copy{grid-area:copy;display:flex;min-width:0;flex-direction:column;gap:5px}
.drop-zone .drop-copy strong{font-size:14px}
.drop-zone .drop-copy small{margin:0;color:#a6a6c1;font-size:11px}
.browse-button{
  grid-area:browse;
  padding:9px 13px;
  border:1px solid #4d826f;
  border-radius:7px;
  background:#4de3c216;
  color:#a5ffd7;
  font:700 11px ui-sans-serif,system-ui,sans-serif;
  white-space:nowrap;
}
.file-hints{grid-area:hints;display:flex;align-items:center;gap:7px}
.file-hints span{
  padding:4px 7px;
  border:1px solid #41435f;
  border-radius:5px;
  background:#12142680;
  color:#9e9fba;
  font:750 8px ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.08em;
}
.file-hints span:last-child{margin-left:auto;border-color:transparent;background:transparent;color:#777995}
.import-options .paste-zone{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:9px 12px;
  padding:0;
}
.paste-zone label{grid-column:1/-1;color:#c1bfd7;font-size:11px}
.import-options textarea{
  min-height:74px;
  max-height:150px;
  padding:10px 11px;
  font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
}
.import-options .button{min-height:40px;padding:9px 13px;font-size:11px;white-space:nowrap}
.import-card .message{margin-top:17px}
@keyframes seal-orbit{to{transform:rotate(360deg)}}
@media(max-width:820px){
  .import-experience{grid-template-columns:minmax(170px,.72fr) minmax(0,1.3fr);gap:20px}
  .import-art{min-height:330px;padding:20px}
  .drop-zone{grid-template-columns:42px minmax(0,1fr);grid-template-areas:"icon copy" "browse browse" "hints hints";gap:10px 12px;padding:19px}
  .browse-button{justify-self:start}
}
@media(max-width:640px){
  .import-card{padding:20px}
  .import-heading{flex-direction:column;gap:13px;margin-bottom:19px}
  .import-heading .pill{margin:0}
  .import-heading h2{font-size:28px}
  .import-experience{grid-template-columns:1fr;gap:19px}
  .import-art{min-height:190px;padding:20px;flex-direction:row;align-items:center}
  .import-seal{width:76px;flex:none;order:2;margin:0 8px 0 0}
  .import-seal svg{width:48px}
  .import-art-copy{flex:1}
  .import-art-copy strong{font-size:25px}
  .import-art-copy>span{font-size:8px}
  .import-art-copy small{font-size:7px}
  .import-options{gap:13px}
  .drop-zone{grid-template-columns:42px minmax(0,1fr) auto;grid-template-areas:"icon copy browse" "hints hints hints";min-height:120px;padding:17px 14px;gap:9px}
  .drop-zone .upload-icon{width:40px;height:40px}
  .drop-zone .drop-copy strong{font-size:12px}
  .drop-zone .drop-copy small{font-size:10px}
  .browse-button{justify-self:auto;padding:8px 10px;font-size:10px}
  .file-hints span{padding:4px 6px;font-size:7px}
  .import-options .paste-zone{grid-template-columns:1fr}
  .paste-zone label{grid-column:auto}
  .import-options .button{width:100%}
}
@media(prefers-reduced-motion:reduce){
  .import-seal:before,.import-seal:after{animation:none}
}

.achievement-group-title{
  margin:27px 0 11px;
  color:#9daed0;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.achievement-list{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
  gap:7px;
}
.achievement-card{
  min-height:0;
  gap:10px;
  padding:12px;
  border-color:#303245;
  border-radius:9px;
  background:#1a1c25;
  box-shadow:none;
}
.achievement-card:hover{
  border-color:#4b5067;
  background:#1e202b;
}
.achievement-card input{
  flex:none;
  width:15px;
  height:15px;
  margin:2px 0 0;
}
.achievement-copy{gap:5px}
.achievement-title{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}
.achievement-title>strong{flex:0 1 auto}
.achievement-copy .achievement-title strong{
  color:#e7ebf5;
  font-size:13px;
  font-weight:600;
  line-height:1.35;
}
.achievement-title>.achievement-points{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:22px;
  padding:2px 6px;
  border-radius:999px;
  background:#433c2b;
  color:#f1bf53;
  font:750 10px/1.2 ui-sans-serif,system-ui,sans-serif;
}
.achievement-copy small{
  color:#9ea9c2;
  font-size:11px;
  line-height:1.45;
}
.achievement-copy .achievement-reward{
  color:#efb842;
}
.achievement-card.earned{
  border-color:#3a6659;
  background:#1b2828;
}
.achievement-card.earned .achievement-copy .achievement-title strong{color:#f3f4fb}
@media(max-width:900px){
  .achievement-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:580px){
  .achievement-list{grid-template-columns:minmax(0,1fr)}
}

.save-profile{justify-content:initial}
.profile-placeholder{
  position:relative;
  z-index:1;
  display:flex;
  height:100%;
  min-height:288px;
  flex-direction:column;
  justify-content:space-between;
}
.profile-placeholder .import-seal{margin-top:24px}
.profile-placeholder .import-art-copy strong{max-width:290px}
.profile-content{
  position:relative;
  z-index:1;
  display:flex;
  width:100%;
  height:100%;
  min-height:288px;
  flex-direction:column;
  justify-content:space-between;
  gap:12px;
}
.profile-illustration{
  position:relative;
  display:grid;
  height:126px;
  flex:none;
  place-items:center;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 54%,#9783ff20,transparent 58%);
}
.profile-map-orbit{
  position:absolute;
  width:104px;
  aspect-ratio:1;
  border:1px dashed #a69aff65;
  border-radius:50%;
  box-shadow:0 0 0 9px #a69aff0a,0 0 0 20px #a69aff07;
  transform:rotate(25deg) scaleY(.67);
}
.profile-map-orbit-inner{width:77px;border-style:solid;border-color:#80e7d375;transform:rotate(-25deg) scaleY(.67)}
.profile-map-marker{
  position:relative;
  display:grid;
  width:57px;
  aspect-ratio:1;
  place-items:center;
  border:1px solid #c1b4ff99;
  border-radius:19px 5px 19px 5px;
  background:linear-gradient(145deg,#514a7d,#24263e);
  box-shadow:0 0 30px #8f78ff40,inset 0 1px #ffffff26;
  color:#e4dcff;
  font:800 16px ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.08em;
  transform:rotate(45deg);
}
.profile-map-marker>span{transform:rotate(-45deg)}
.profile-map-star{
  position:absolute;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#d8d1ff;
  box-shadow:0 0 12px 3px #a69aff88;
}
.profile-map-star-one{top:22%;left:19%}.profile-map-star-two{right:18%;bottom:23%;width:3px;height:3px}
.profile-name{display:flex;min-width:0;flex-direction:column;gap:5px}
.profile-kicker,.profile-stat>span{
  color:#a9a5cc;
  font:750 9px/1.35 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.profile-name>strong{
  overflow-wrap:anywhere;
  color:#f2efff;
  font:780 clamp(23px,2.4vw,31px)/1.04 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.05em;
}
.profile-stats{
  display:grid;
  grid-template-columns:minmax(76px,.7fr) minmax(0,1.3fr);
  gap:8px;
}
.profile-stat{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:5px;
  padding:10px 11px;
  border:1px solid #ffffff12;
  border-radius:8px;
  background:#10122270;
}
.profile-stat>strong{
  overflow-wrap:anywhere;
  color:#f0d48b;
  font:750 18px/1 ui-sans-serif,system-ui,sans-serif;
}
.profile-stat.profile-achievements{justify-content:center;gap:8px}
.profile-achievements-heading{display:flex;align-items:center;justify-content:space-between;gap:6px}
.profile-achievements-heading>span{color:#a9a5cc;font:750 8px/1.3 ui-sans-serif,system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.profile-achievements-heading>strong{color:#f0d48b;font:750 12px ui-sans-serif,system-ui,sans-serif;white-space:nowrap}
.profile-achievement-track{height:5px;overflow:hidden;border-radius:99px;background:#0b0c19}
.profile-achievement-track>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#51d7b4,#9d8aff);box-shadow:0 0 10px #69e5c777}
.profile-footnote{
  color:#83e5cd;
  font:750 8px ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.14em;
}
@media(max-width:640px){
  .profile-placeholder{min-height:145px;flex-direction:row;align-items:center;gap:16px}
  .profile-placeholder .import-seal{width:64px;flex:none;order:2;margin:0 5px 0 0}
  .profile-placeholder .import-seal svg{width:40px}
  .profile-placeholder .import-art-copy{flex:1}
  .profile-placeholder .import-art-copy strong{font-size:21px}
  .profile-content{min-height:190px;gap:12px}
  .profile-illustration{height:96px}
  .profile-map-marker{width:48px}
  .profile-map-orbit{width:86px}
  .profile-map-orbit-inner{width:65px}
  .profile-name>strong{font-size:23px}
  .profile-stat{padding:8px 9px}
  .profile-stat>strong{font-size:16px}
}
@media(max-width:640px){
  .workspace-top{align-items:flex-start;padding:0 2px 15px}
  .workspace-top h2{font-size:27px}
}

.collection-overview{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(150px,1.3fr);
  gap:4px 20px;
  align-items:center;
  margin:4px 0 14px;
  padding:13px 15px;
  border:1px solid #3b3d5a;
  border-radius:10px;
  background:linear-gradient(110deg,#1d2039,#17192e);
}
.collection-overview-copy{display:flex;flex-direction:column;gap:4px}
.collection-overview-copy strong{color:#f2efff;font-size:15px}
.collection-overview-copy span{color:#a9a8c4;font-size:11px}
.collection-progress{
  grid-column:1/-1;
  height:7px;
  overflow:hidden;
  border-radius:20px;
  background:#0f1120;
  box-shadow:inset 0 1px 3px #0008;
}
.collection-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#41c79e,#8b91ff);
  box-shadow:0 0 12px #63e4bd5c;
}
.collection-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.collection-actions .button{padding:9px 12px;font-size:11px}
.collection-summary{margin:8px 0;color:#a9a8c4;font:11px/1.5 ui-sans-serif,system-ui,sans-serif}
.collection-toolbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:8px;
}
.collection-filters{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border:1px solid #363852;
  border-radius:9px;
  background:#121426;
}
.collection-filters .button{
  padding:7px 12px;
  border-color:transparent;
  background:transparent;
  color:#a9a8c4;
  box-shadow:none;
  font-size:11px;
}
.collection-filters .button:hover{background:#ffffff0b;transform:none}
.collection-filters .button.active{
  border-color:#3c7768;
  background:#4de3c21a;
  color:#9cffe0;
}
.gear-collection-grid{
  display:grid;
  align-items:stretch;
  gap:4px;
  min-width:max-content;
}
.gear-grid-corner,.gear-grid-slot{
  display:flex;
  align-items:end;
  justify-content:center;
  padding:0 4px 7px;
  color:#a9a8c4;
  font:700 10px/1.25 ui-sans-serif,system-ui,sans-serif;
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.gear-grid-corner{justify-content:flex-start;padding-left:9px}
.gear-collection-set{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
  min-width:0;
  padding:7px 9px;
  border:1px solid #393b58;
  border-radius:8px;
  background:linear-gradient(130deg,#20213a,#191a30);
}
.gear-collection-set strong{font-size:12px}
.gear-collection-set small{
  overflow:hidden;
  color:#9594b1;
  font:10px/1.25 ui-sans-serif,system-ui,sans-serif;
  text-overflow:ellipsis;
}
.gear-collection-set.tier-2 strong{color:#88d8ff}
.gear-collection-set.tier-3 strong{color:#c19aff}
.gear-collection-set.tier-4 strong{color:#ffbe72}
.gear-collection-set.tier-5 strong{color:#b69cff}
.gear-collection-set.tier-7 strong{color:#e0a4ff}
.gear-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:0;
  min-height:68px;
  padding:6px 4px;
  border:1px dashed #4a4b67;
  border-radius:7px;
  background:linear-gradient(145deg,#1d1e35,#17182c);
  color:#c7c5df;
  cursor:pointer;
  font:inherit;
  text-align:center;
  transition:border-color .15s,background .15s,transform .15s,box-shadow .15s;
}
.gear-tile:hover{
  z-index:1;
  border-color:#a5ffd7;
  background:#202944;
  box-shadow:0 0 14px #4de3c222;
  transform:translateY(-1px);
}
.gear-tile:focus-visible{outline-offset:1px}
.gear-tile .game-icon{width:26px;height:26px}
.gear-tile-name{
  max-width:100%;
  overflow:hidden;
  color:#e4e1f7;
  font-size:10px;
  font-weight:650;
  line-height:1.15;
  text-overflow:ellipsis;
}
.gear-tile-status{
  color:#9695b2;
  font:9px/1.15 ui-sans-serif,system-ui,sans-serif;
}
.gear-tile.collected{
  border:1px dashed #39b987;
  background:linear-gradient(145deg,#16362e,#142a29);
  color:#8ef4c9;
}
.gear-tile.collected .gear-tile-name,.gear-tile.collected .gear-tile-status{color:#8ef4c9}
.gear-tile.collected:hover{border-color:#9cffe0;background:#1a493b}
.gear-tile-equipped{
  position:absolute;
  top:3px;
  right:4px;
  display:grid;
  width:15px;
  height:15px;
  place-items:center;
  border-radius:50%;
  background:#ddc27a;
  color:#17182c;
  font:800 9px ui-sans-serif,system-ui,sans-serif;
}
.gear-tile-equipped.equipped{
  background:#5fbf8f !important;
  color:#00e06a !important;
  box-shadow:0 0 6px #00e06a44 !important;
  position:absolute !important;
  top:3px !important;
  right:4px !important;
  display:grid !important;
  width:15px !important;
  height:15px !important;
  place-items:center !important;
  border-radius:50% !important;
  font:800 9px ui-sans-serif,system-ui,sans-serif !important;
}
.gear-tile-empty{min-height:1px}
.gear-tile.filtered-out{visibility:hidden;pointer-events:none}
.equipment-loadout{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.equipment-loadout-row{
  display:grid;
  grid-template-columns:minmax(115px,.8fr) minmax(0,1.5fr) minmax(86px,.55fr);
  align-items:center;
  gap:9px;
  min-width:0;
  padding:10px;
  border:1px solid #3b3c5a;
  border-radius:11px;
  background:linear-gradient(120deg,#1d2039,#171a2c);
}
.equipment-loadout-slot{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.equipment-loadout-slot strong{
  overflow-wrap:anywhere;
  color:#e7e4f8;
  font-size:11px;
}
.equipment-loadout-row select{
  width:100%;
  min-width:0;
  min-height:38px;
  padding:8px;
  font-size:11px;
}
.equipment-loadout-row select:disabled{opacity:.55}
.equipment-loadout-actions{display:flex;justify-content:flex-end;margin-top:12px}
.equipment-loadout-actions .button{min-height:39px}
.equipment-set-actions{
  display:flex;
  align-items:flex-end;
  gap:10px;
  margin:12px 0;
}
.equipment-set-actions .field{min-width:170px}
.equipment-set-actions select{min-height:39px}
.equipment-set-actions .button{min-height:39px}
#panel-body,.panel{min-width:0;max-width:100%}
.collection-scroll{min-width:0;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain}
@media(max-width:640px){
  .collection-overview{grid-template-columns:1fr;padding:12px}
  .collection-actions{display:grid;grid-template-columns:1fr}
  .collection-actions .button{width:100%;text-align:left}
  .collection-summary{font-size:10px}
  .gear-collection-grid{grid-template-columns:minmax(120px,1.2fr) repeat(10,minmax(78px,1fr))!important}
  .gear-collection-set{padding:6px}
  .gear-tile{min-height:64px}
  .equipment-loadout{grid-template-columns:1fr}
  .equipment-loadout-row{grid-template-columns:minmax(95px,.75fr) minmax(0,1.4fr) minmax(78px,.55fr);gap:7px;padding:8px}
  .equipment-set-actions{align-items:stretch;flex-direction:column}
  .equipment-set-actions .field{min-width:0}
  .equipment-set-actions>.button{width:100%}
}

.workspace{padding-top:clamp(24px,3.2vw,42px)}
.workspace-top{
  position:relative;
  isolation:isolate;
  gap:20px;
  overflow:hidden;
  margin-bottom:16px;
  padding:19px 21px;
  border:1px solid #444565;
  border-radius:15px;
  background:
    radial-gradient(ellipse at 2% 0%,#4de3c219,transparent 36%),
    radial-gradient(ellipse at 100% 100%,#9270ff17,transparent 42%),
    linear-gradient(120deg,#1b1c34,#151629 70%);
  box-shadow:0 12px 32px #08091555,inset 0 1px #ffffff12;
}
.workspace-top:after{
  position:absolute;
  z-index:-1;
  top:-90px;
  right:24%;
  width:210px;
  height:210px;
  border:1px solid #a69aff12;
  border-radius:50%;
  box-shadow:0 0 0 18px #a69aff06,0 0 0 38px #a69aff04;
  content:"";
  pointer-events:none;
}
.workspace-top>div:first-child,.workspace-top .export-actions{position:relative;z-index:1}
.workspace-top .eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:8px;
  color:#9dffe0;
  font-size:10px;
  letter-spacing:.24em;
}
.workspace-top .eyebrow:before{
  width:18px;
  height:1px;
  background:linear-gradient(90deg,#8ef4d4,transparent);
  content:"";
}
.workspace-top h2{
  font-size:clamp(27px,3vw,35px);
  letter-spacing:-.05em;
  text-shadow:0 2px 18px #8f78ff24;
}
.workspace-top #save-summary{
  align-items:center;
  gap:8px;
  margin-top:9px;
  padding:5px 10px 5px 8px;
  border-color:#4b4d70;
  background:#101121a8;
  box-shadow:inset 0 1px #ffffff0a;
  color:#c0bfd9;
  font-size:10px;
  font-variant-numeric:tabular-nums;
}
.workspace-top #save-summary:before{
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:#72edc7;
  box-shadow:0 0 10px #72edc7a6;
  content:"";
}
.workspace-top .export-actions{gap:9px}
.workspace-top .export-actions .button{
  min-height:42px;
  padding-inline:17px;
  border-radius:9px;
  font-size:12px;
}
.editor-layout{align-items:stretch;gap:14px}
.tabs{
  width:100%;
  gap:6px;
  padding:7px;
  border-color:#41425f;
  border-radius:13px;
  background:linear-gradient(110deg,#17182d,#121323);
  box-shadow:0 9px 24px #08091566,inset 0 1px #ffffff0a;
  grid-template-columns:repeat(9,minmax(0,1fr));
}
.tab{
  position:relative;
  min-width:0;
  min-height:43px;
  overflow:hidden;
  padding:10px 12px;
  border-color:transparent;
  border-radius:9px;
  color:#b3b1cf;
  font-size:11px;
  font-weight:700;
  transition:background .18s,border-color .18s,color .18s,box-shadow .18s,transform .18s;
}
.tab:hover{
  border-color:#55567866;
  background:linear-gradient(135deg,#ffffff0b,#a69aff09);
  color:#f2efff;
  transform:translateY(-1px);
}
.tab.active{
  border-color:#4b8e7c;
  background:linear-gradient(115deg,#203b3a,#24243f 82%);
  color:#a5ffe0;
  box-shadow:inset 0 1px #ffffff18,0 3px 12px #08091555,0 0 20px #4de3c20b;
}
.tab.active:after{
  position:absolute;
  right:18%;
  bottom:-1px;
  left:18%;
  height:2px;
  border-radius:2px 2px 0 0;
  background:linear-gradient(90deg,transparent,#8ef4d4,transparent);
  box-shadow:0 0 10px #4de3c2a8;
  content:"";
}
.panel{
  overflow:hidden;
  border-color:#393a58;
  border-radius:15px;
  background:
    radial-gradient(ellipse at 0 0,#7162b20a,transparent 42%),
    linear-gradient(145deg,#191a30,#141528 72%);
  box-shadow:0 18px 44px #08091555,inset 0 1px #ffffff0a;
}
.panel-header{
  border-color:#41425f;
  box-shadow:0 1px #ffffff08;
}
.panel-header h3{
  display:flex;
  align-items:center;
  gap:11px;
  color:#f3f1ff;
  font:750 24px/1.2 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.035em;
}
.panel-header h3:before{
  width:3px;
  height:22px;
  flex:none;
  border-radius:3px;
  background:linear-gradient(180deg,#9bffda,#8b79ef);
  box-shadow:0 0 12px #8ef4d44d;
  content:"";
}
.panel-header p{max-width:760px;line-height:1.55}
.subheading{
  letter-spacing:.04em;
  text-shadow:0 0 18px #4de3c215;
}
.message.success{
  text-shadow:0 0 14px #4de3c22b;
}
@media(max-width:800px){
  .tabs{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:640px){
  .workspace{padding-top:25px}
  .workspace-top{
    align-items:flex-start;
    flex-direction:column;
    gap:15px;
    padding:17px;
  }
  .workspace-top .export-actions{width:100%}
  .workspace-top .export-actions .button{flex:1}
  .tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:6px}
  .tab{min-height:41px;text-align:left}
  .panel{padding:18px}
  .panel-header h3{font-size:22px}
}
.achievement-card .achievement-date-input{
  width:fit-content;
  max-width:100%;
  min-height:30px;
  margin-top:3px;
  padding:4px 7px;
  border:1px solid #3c5a53;
  border-radius:6px;
  background:#111b1b;
  color:#a5ffe0;
  color-scheme:dark;
  font:500 11px/1.2 ui-sans-serif,system-ui,sans-serif;
}
.achievement-card .achievement-date-input:focus-visible{
  border-color:#76dfbf;
  outline:2px solid #76dfbf55;
  outline-offset:2px;
}
.achievement-filters{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(150px,.32fr);
  gap:12px;
  margin:12px 0 18px;
}
.achievement-card[hidden],.achievement-group-title[hidden],.achievement-no-results[hidden],#undo-bulk[hidden]{display:none!important}
.achievement-toggle{
  display:flex;
  flex:1;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  cursor:pointer;
}
.achievement-card .achievement-toggle input[type="checkbox"]{
  flex:none;
  width:15px;
  height:15px;
  margin:2px 0 0;
}
.achievement-card .achievement-date-input{
  flex:none;
  align-self:center;
  margin:0;
}
@media(max-width:640px){
  .achievement-filters{grid-template-columns:1fr}
  .achievement-card{flex-wrap:wrap}
  .achievement-card .achievement-date-input{margin-left:25px}
}
.heroic-heading{
  align-items:center;
  margin:12px 0 10px;
  padding:12px 14px;
  border:1px solid #3b3c5a;
  border-radius:10px;
  background:linear-gradient(115deg,#20213a,#191a30);
}
.heroic-heading .subheading{margin:0 0 4px}
.heroic-heading .hint{margin:0}
.heroic-heading .subheading,.heroic-bulk-action .bulk-editor-copy strong{
  color:#91f0d0;
  font:700 12px ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.04em;
}
.heroic-heading>.button,.bulk-editor-action>.button{flex:none}
@media(max-width:640px){
  .heroic-heading,.bulk-editor-action{
    align-items:flex-start;
    flex-direction:column;
  }
  .heroic-heading>.button,.bulk-editor-action>.button{width:100%}
}
.achievement-score-action{align-items:flex-end}
.achievement-score-action .bulk-editor-copy{align-self:center}
.achievement-score-controls{
  display:flex;
  align-items:flex-end;
  gap:9px;
  flex:none;
}
.achievement-score-controls .field{width:130px}
.achievement-score-controls .field>label{
  margin-bottom:5px;
  color:#aaa9c4;
  font:600 10px ui-sans-serif,system-ui,sans-serif;
}
.achievement-score-controls input{min-height:39px}
.achievement-score-controls .button{min-height:39px}
@media(max-width:640px){
  .achievement-score-action{align-items:stretch}
  .achievement-score-action .bulk-editor-copy{align-self:auto}
  .achievement-score-controls{width:100%;align-items:flex-end}
  .achievement-score-controls .field{flex:1}
  .achievement-score-controls>.button{width:auto}
}
.save-location-guide{
  margin:0 0 24px;
  padding:15px 17px;
  border:1px solid #41425f;
  background:
    radial-gradient(ellipse at 20% 0%,#7162b21a,transparent 48%),
    linear-gradient(135deg,#20213a,#191a30 52%,#17182b);
  color:#f2efff;
  box-shadow:inset 0 1px #ffffff0a,0 8px 22px #08091544;
}
.save-location-guide summary{
  color:#a5ffd7;
  font-size:14px;
  font-weight:750;
  cursor:pointer;
}
.save-location-guide summary:focus-visible{
  outline:2px solid #a5ffd7;
  outline-offset:4px;
}
.save-location-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.save-location{
  min-width:0;
  padding:12px;
  border:1px solid #41425f;
  background:linear-gradient(120deg,#252641,#1b1c33);
  color:#f2efff;
  box-shadow:inset 0 1px #ffffff0a;
}
.save-location h3{
  margin:0 0 7px;
  color:#c6b6ff;
  font-size:12px;
}
.save-location code{
  display:block;
  overflow-wrap:anywhere;
  padding:7px 8px;
  border:1px solid #4b8e7c;
  background:linear-gradient(135deg,#203b3a,#24243f);
  color:#a5ffd7;
  font-size:11px;
}
.save-location p{
  margin:8px 0 0;
  color:#c3c0dd;
  font-size:11px;
  line-height:1.55;
}
.save-location-tip{
  margin:14px 0 0;
  padding:10px 12px;
  border:1px solid #4b8e7c;
  border-left:4px solid #a5ffd7;
  background:linear-gradient(100deg,#203b3a,#191a30);
  color:#e4e0fa;
  font-size:12px;
  font-weight:700;
  line-height:1.55;
}
@media(max-width:760px){
  .save-location-grid{grid-template-columns:1fr}
}

.hero-selection-panel{
  border-color:#4b4d70;
  background:
    radial-gradient(ellipse at 18% 0%,#7662c522,transparent 52%),
    linear-gradient(125deg,#20213a,#191a30 62%,#17182b);
  box-shadow:inset 0 1px #ffffff0a,0 6px 16px #07081355;
}
.hero-selection-heading strong{color:#a5ffd7}
.hero-selection-heading small,.perk-card-copy small{color:#a9a8c4}
.hero-selection-controls .field:last-child>label{color:#c6b6ff}
.hero-selection-controls .field:last-child select{border-color:#5e6189}
.perk-card{
  border-color:#414362;
  border-radius:8px;
  background:linear-gradient(120deg,#20213a,#191a30);
  box-shadow:inset 0 1px #ffffff0a;
}
.perk-card-copy strong{color:#f2efff}
.perk-rank-warning{color:#ff927f}

.class-choice-grid{
  display:grid;
  grid-template-columns:repeat(9,minmax(0,1fr));
  gap:8px;
  margin-bottom:18px;
}
.class-choice{
  display:flex;
  min-width:0;
  min-height:82px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px 4px;
  border:1px solid #414362;
  border-radius:4px;
  background:linear-gradient(145deg,#252641,#1b1c33);
  color:#f2efff;
  cursor:pointer;
  font:700 12px/1.2 Georgia,"Palatino Linotype",serif;
  transition:background .15s,border-color .15s,transform .15s;
}
.class-choice:hover{border-color:#69dcb9;background:#2a2b49;transform:translateY(-1px)}
.class-choice.active{
  border:2px solid #a5ffd7;
  background:linear-gradient(145deg,#24463f,#253350);
  box-shadow:inset 0 0 0 2px #a5ffd71a,0 2px 8px #00000040;
  color:#d9fff0;
}
.class-choice:focus-visible{outline:2px solid #a5ffd7;outline-offset:2px}
.class-choice .game-icon{width:42px;height:42px;border-color:#565879}
.hero-selection-panel select{
  border-color:#5e6189;
  background:#111322;
  color:#f2efff;
}
.hero-selection-controls{grid-template-columns:minmax(0,340px)}
.hero-bulk-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 0 20px;
  padding:12px 14px;
  border:1px solid #414362;
  background:linear-gradient(115deg,#20213a,#191a30);
}
.hero-bulk-actions .hint{margin:0;color:#a9a8c4}
.gear-global-actions{
  display:flex;
  justify-content:flex-start;
  margin:-7px 0 18px;
}
.gear-collection-set{
  border-color:#414362;
  background:linear-gradient(135deg,#20213a,#191a30);
  color:#f2efff;
}
.gear-collection-set small{color:#a9a8c4}
.gear-collection-set.tier-2 strong{color:#8ddcf4}
.gear-collection-set.tier-3 strong{color:#c7a6ff}
.gear-collection-set.tier-4 strong{color:#f0c77d}
.gear-collection-set.tier-5 strong{color:#c7a6ff}
.gear-collection-set.tier-7 strong{color:#c7a6ff}
.gear-grid-corner,.gear-grid-slot{color:#a9a8c4}
.gear-tile{
  border-color:#414362;
  background:linear-gradient(145deg,#252641,#1b1c33);
  color:#f2efff;
}
.gear-tile:hover{
  border-color:#69dcb9;
  background:#2a2b49;
  box-shadow:0 3px 10px #00000030;
}
.gear-tile-name{color:#f2efff}
.gear-tile-status{color:#a9a8c4}
.gear-tile.collected{
  border-color:#4c9079;
  background:linear-gradient(145deg,#203c38,#1a2d32);
  color:#a5ffd7;
}
.gear-tile.collected .gear-tile-name,.gear-tile.collected .gear-tile-status{color:#a5ffd7}
.gear-tile.collected:hover{border-color:#72e6c2;background:#254b43}
.equipment-loadout-row{
  border-color:#414362;
  background:linear-gradient(120deg,#20213a,#191a30);
}
.equipment-loadout-slot strong{color:#f2efff}
.equipment-loadout-slot small{color:#a9a8c4}

@media(max-width:900px){
  .class-choice-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(max-width:640px){
  .class-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero-bulk-actions{align-items:stretch;flex-direction:column}
  .gear-global-actions .button{width:100%}
}