:root{
  --page-gold:#d9aa3f;
  --page-gold2:#ffe09a;
  --page-line:rgba(217,170,63,.40);
  --text:#fff7dc;
  --muted:#bbaa7b;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:Inter,Arial,Helvetica,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 24% 14%,rgba(217,170,63,.13),transparent 28%),
    radial-gradient(circle at 78% 58%,rgba(120,22,10,.18),transparent 36%),
    linear-gradient(135deg,#020202,#0b0c0f 48%,#020202);
  overflow:hidden;
}
button,input,textarea{font:inherit}
button{cursor:pointer}
.forge-app{
  height:100dvh;
  min-height:560px;
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
}
.cockpit{
  min-height:0;
  padding:10px 10px 18px;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(20,17,10,.97),rgba(3,3,4,.99)),
    repeating-linear-gradient(90deg,transparent 0 24px,rgba(217,170,63,.025) 24px 25px);
  border-right:1px solid var(--page-line);
}
.cockpit-brand{
  height:56px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border:1px solid rgba(217,170,63,.24);
  border-radius:15px;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.015));
}
.cockpit-brand img{width:41px;height:41px;object-fit:cover;border-radius:50%;box-shadow:0 0 18px rgba(217,170,63,.18)}
.cockpit-brand p,.chamber-head p{margin:0;color:var(--page-gold2);text-transform:uppercase;letter-spacing:.16em;font-size:8px;font-weight:900}
h1,h2,h3,h4,p{margin-top:0}
h1,h2,h3,h4{text-transform:uppercase;margin-bottom:0}
h1{font-size:19px;letter-spacing:.08em;color:var(--page-gold)}
h2{font-size:12px;letter-spacing:.12em;color:var(--page-gold)}
h4{font-size:10px;letter-spacing:.15em;color:var(--accent);margin-bottom:5px}
.status-strip{
  height:25px;
  margin:7px 0;
  padding:0 9px;
  display:flex;
  align-items:center;
  gap:7px;
  border-radius:999px;
  border:1px solid rgba(217,170,63,.23);
  background:rgba(0,0,0,.34);
  color:#e6d1a0;
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.11em;
}
.status-strip b{margin-left:auto;color:var(--page-gold2)}
.status-dot{width:8px;height:8px;border-radius:50%;background:#4dff8c;box-shadow:0 0 10px #4dff8c}
.status-strip.working .status-dot{background:#ffd85a;box-shadow:0 0 10px #ffd85a}
.status-strip.error .status-dot{background:#ff5555;box-shadow:0 0 10px #ff5555}
.controls{
  min-height:0;
  height:calc(100% - 95px);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
  gap:7px;
  padding-bottom:4px;
}
.control-bank{
  min-height:0;
  padding:9px;
  border:1px solid rgba(217,170,63,.22);
  border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  box-shadow:inset 0 0 22px rgba(217,170,63,.022);
}
.back-bank{overflow:hidden}
.bank-heading{display:flex;align-items:center;justify-content:space-between}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:7px}
label{display:block;margin-top:6px;color:#ded0a5;font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.09em}
.label-with-meta{position:relative}
.label-with-meta>span{position:absolute;right:0;top:0;color:#8f825d;font-size:8px;letter-spacing:.04em}
input,textarea{
  width:100%;
  margin-top:4px;
  padding:7px 8px;
  border:1px solid rgba(217,170,63,.28);
  border-radius:9px;
  outline:0;
  color:#fff;
  background:#070708;
  font-size:12px;
}
input:focus,textarea:focus{border-color:var(--page-gold2);box-shadow:0 0 0 2px rgba(217,170,63,.09)}
textarea{min-height:42px;max-height:52px;resize:none;line-height:1.25}
.upload-pad input{display:none}
.upload-pad span{
  display:block;
  padding:9px;
  border-radius:10px;
  text-align:center;
  color:#090909;
  font-weight:1000;
  background:linear-gradient(135deg,#8a5d17,#f1ca62,#835714);
}
.text-button{border:0;background:transparent;color:#9c8b5d;padding:0;font-size:8px;text-transform:uppercase;font-weight:900;letter-spacing:.08em}
.text-button:not(:disabled):hover{color:var(--page-gold2)}
.text-button:disabled{opacity:.35;cursor:default}
.advanced{margin-top:7px;padding:6px 7px;border:1px solid rgba(217,170,63,.17);border-radius:10px;background:rgba(0,0,0,.22)}
.advanced summary{cursor:pointer;color:var(--page-gold2);font-size:9px;text-transform:uppercase;letter-spacing:.11em;font-weight:900}
.range-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:6px}
.range-grid label{font-size:8px}
.range-grid input{padding:0;height:18px;accent-color:var(--page-gold)}
.theme-row{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:6px}
.theme,.view-controls button,.export-actions button,.generate-button{
  border:1px solid rgba(217,170,63,.33);
  border-radius:10px;
  padding:8px;
  background:linear-gradient(180deg,#1a1a1c,#080809);
  color:#f4d88d;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.055em;
  font-size:9px;
}
.theme:hover,.theme.active,.view-controls button:hover,.view-controls button.active,.export-actions button:hover{
  color:#080808;
  background:linear-gradient(135deg,#7d5415,#eac45b,#7f5415);
}
.generate-button{width:100%;margin-top:7px;color:#080808;background:linear-gradient(135deg,#7d5415,#f2ce68,#7d5415)}
.display-chamber{
  min-width:0;
  height:100dvh;
  min-height:560px;
  overflow:hidden;
  display:grid;
  grid-template-rows:60px minmax(0,1fr) 46px;
  gap:8px;
  padding:10px 14px;
}
.chamber-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:8px 12px;
  border:1px solid rgba(217,170,63,.21);
  border-radius:16px;
  background:rgba(0,0,0,.28);
}
.chamber-head h2{margin:2px 0 0;color:#fff;font-size:23px;letter-spacing:.12em}
.view-controls{display:flex;gap:6px}
.card-slot{
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  padding:2px;
  background:radial-gradient(ellipse at center,rgba(217,170,63,.11),transparent 54%);
}
.card-slot.front-mode #previewBackHost,.card-slot.back-mode #previewFrontHost{display:none}
.preview-host{width:250px;height:350px;flex:0 0 250px}
.export-dock{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 10px;
  border:1px solid rgba(217,170,63,.19);
  border-radius:15px;
  background:rgba(0,0,0,.30);
}
.export-quality{color:#9c8b60;font-size:8px;text-transform:uppercase;letter-spacing:.12em;font-weight:900}
.export-quality b{color:#f2d174}
.export-actions{display:flex;gap:7px}
.export-actions button:disabled{opacity:.45;cursor:not-allowed}

/* Fixed logical card. Never tied to viewport dimensions. */
.psi-card{
  --accent:#d9aa3f;
  --accent2:#ffe09a;
  --bed:rgba(115,18,8,.42);
  --crest-filter:saturate(1.15) contrast(1.08);
  --metal-a:#714a0f;
  --metal-b:#ffe07a;
  --metal-c:#6a440f;
  --last-size:44px;
  --first-spacing:.40em;
  --back-name-size:19px;
  width:250px;
  height:350px;
  position:relative;
  overflow:hidden;
  border:2px solid color-mix(in srgb,var(--accent) 65%,transparent);
  border-radius:16px;
  background:#050505;
  color:#fff;
  box-shadow:0 22px 58px rgba(0,0,0,.72),0 0 0 1px rgba(255,230,150,.12) inset,0 0 32px color-mix(in srgb,var(--accent) 16%,transparent);
}
.psi-card.theme-fire{--accent:#ff9828;--accent2:#ffd7a0;--bed:rgba(165,24,5,.52);--crest-filter:saturate(1.35) contrast(1.12);--metal-a:#7f3210;--metal-b:#ffd07a;--metal-c:#6c1e0b}
.psi-card.theme-platinum{--accent:#cbd2dc;--accent2:#ffffff;--bed:rgba(36,49,70,.42);--crest-filter:grayscale(.72) brightness(1.02) contrast(1.1);--metal-a:#50545c;--metal-b:#f0f2f5;--metal-c:#4a4e55}
.psi-card.theme-onyx{--accent:#9d8350;--accent2:#d8c28c;--bed:rgba(28,24,18,.48);--crest-filter:grayscale(.35) brightness(.72) sepia(.35);--metal-a:#393125;--metal-b:#c4aa70;--metal-c:#2c271f}
.psi-card::before{content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--accent2) 55%,transparent);border-radius:12px;z-index:15;pointer-events:none}
.edge-glow{position:absolute;inset:0;background:linear-gradient(125deg,transparent 34%,rgba(255,255,255,.12) 48%,color-mix(in srgb,var(--accent2) 18%,transparent) 52%,transparent 66%);opacity:.18;z-index:13;pointer-events:none}
.grain{position:absolute;inset:0;background:radial-gradient(circle at 14% 16%,color-mix(in srgb,var(--accent2) 13%,transparent),transparent 8%),repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 1px,transparent 1px 5px);mix-blend-mode:screen;opacity:.55;pointer-events:none;z-index:12}
.front-card{background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--accent2) 24%,transparent),transparent 28%),radial-gradient(circle at 50% 95%,var(--bed),transparent 39%),linear-gradient(160deg,#090909,#010101 58%,#120805)}
.crest-bg{position:absolute;inset:-45px -66px 52px;background:url("assets/psi-founder-crest.png") center/cover no-repeat;opacity:.43;filter:var(--crest-filter);z-index:1}
.brand{position:absolute;top:17px;left:17px;z-index:20}
.psi-logo{font-family:Georgia,serif;font-size:31px;line-height:.84;color:var(--accent2);font-weight:1000;text-shadow:0 2px 0 color-mix(in srgb,var(--accent) 55%,#000),0 0 13px color-mix(in srgb,var(--accent) 35%,transparent)}
.brand span{display:block;margin-top:5px;max-width:96px;color:var(--accent2);font-size:7px;line-height:1.22;letter-spacing:.14em;text-transform:uppercase;font-weight:900}
.series-seal{position:absolute;top:18px;right:18px;width:70px;height:74px;z-index:20;border:1px solid color-mix(in srgb,var(--accent2) 70%,transparent);border-radius:8px 8px 16px 16px;background:linear-gradient(180deg,rgba(10,10,10,.91),color-mix(in srgb,var(--accent) 25%,rgba(0,0,0,.76)));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 0 14px color-mix(in srgb,var(--accent) 14%,transparent),inset 0 0 12px rgba(255,230,150,.05)}
.series-seal strong{font-family:Georgia,serif;text-transform:uppercase;color:var(--accent2);font-size:11px;line-height:1.02}
.series-seal span{margin-top:4px;font-size:6px;letter-spacing:.07em;text-transform:uppercase;color:var(--accent2)}
.student-cutout{position:absolute;z-index:6;left:50%;bottom:92px;width:78%;height:56%;transform:translateX(-50%);overflow:hidden;border-radius:15px}
.student-cutout img{display:none;position:absolute;left:50%;top:50%;width:100%;height:100%;object-fit:cover;object-position:center;transform-origin:center;filter:contrast(1.06) saturate(1.05);mask-image:linear-gradient(#000 76%,transparent 100%);-webkit-mask-image:linear-gradient(#000 76%,transparent 100%)}
.photo-empty{height:100%;display:flex;align-items:center;justify-content:center;border:1px dashed color-mix(in srgb,var(--accent) 25%,transparent);border-radius:14px;color:color-mix(in srgb,var(--accent2) 48%,transparent);font-size:13px;font-weight:900;text-align:center;letter-spacing:.13em;text-transform:uppercase}
.name-lockup{position:absolute;left:14px;right:14px;bottom:77px;z-index:21;text-align:center}
.first-name{display:block;color:#fff2bf;font-size:15px;font-weight:1000;letter-spacing:var(--first-spacing);text-shadow:0 2px 10px #000;white-space:nowrap}
.last-name{display:block;font-family:Georgia,serif;font-size:var(--last-size);line-height:.9;color:var(--accent2);text-shadow:0 2px 0 color-mix(in srgb,var(--accent) 45%,#000),0 0 16px color-mix(in srgb,var(--accent2) 28%,transparent),0 9px 14px #000;white-space:nowrap}
.nickname-bar{position:absolute;left:45px;right:45px;bottom:54px;z-index:22;text-align:center;padding:5px 6px;border-top:1px solid color-mix(in srgb,var(--accent2) 60%,transparent);border-bottom:1px solid color-mix(in srgb,var(--accent2) 60%,transparent);color:var(--accent2);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 10%,transparent),transparent);font-size:8px;font-weight:1000;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.signature-plaque{position:absolute;left:24px;right:24px;bottom:16px;height:35px;z-index:22;display:flex;align-items:center;justify-content:center;flex-direction:column;border:1px solid var(--accent2);border-radius:8px;background:linear-gradient(120deg,var(--metal-a),var(--metal-b),var(--metal-c));color:#120b02;box-shadow:inset 0 0 9px rgba(255,255,255,.16)}
.signature-name{font-family:"Brush Script MT","Segoe Script",cursive;font-size:18px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%}
.signature-plaque small{font-size:6px;font-weight:1000;letter-spacing:.14em;text-transform:uppercase}
.back-card{background:radial-gradient(circle at 88% 38%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 30%),linear-gradient(160deg,#090909,#020202)}
.back-watermark{position:absolute;right:-65px;top:62px;width:230px;height:230px;background:url("assets/psi-founder-crest.png") center/contain no-repeat;opacity:.075;filter:var(--crest-filter);z-index:1}
.back-title,.back-panel,.back-footer-clean{position:relative;z-index:5}
.back-title{margin:17px 18px 10px;display:grid;grid-template-columns:38px minmax(0,1fr);gap:9px;align-items:center;padding-bottom:9px;border-bottom:1px solid color-mix(in srgb,var(--accent) 34%,transparent);overflow:hidden}
.back-psi-chip{width:38px;height:38px;border-radius:9px;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;color:var(--accent2);font-weight:1000;font-size:17px;background:rgba(0,0,0,.38)}
.back-name-block{min-width:0}
.back-title h3{margin:0;font-family:Georgia,serif;font-size:var(--back-name-size);line-height:.94;color:var(--accent2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.back-title p{margin:4px 0 0;color:var(--accent2);font-size:7px;letter-spacing:.10em;text-transform:uppercase;font-weight:900;white-space:nowrap}
.back-panel{margin:0 18px 10px;padding:0 0 10px;border-bottom:1px solid color-mix(in srgb,var(--accent) 25%,transparent)}
.back-panel p{margin:0;color:#f4f1e7;font-size:9px;line-height:1.33}
.achievements{display:grid;grid-template-columns:1fr 1fr;gap:5px 8px}
.achievement{min-height:18px;display:flex;align-items:center;gap:5px;color:var(--accent2);text-transform:uppercase;letter-spacing:.055em;font-size:7px;font-weight:900;line-height:1.15}
.achievement::before{content:"◆";font-size:6px;color:var(--accent)}
.goal-panel{margin-bottom:0;padding-bottom:9px}
.goal-panel strong{display:block;color:#fff;font-size:12px;font-weight:600;line-height:1.15}
.back-footer-clean{margin:6px 18px 0;height:30px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 9px;border:1px solid color-mix(in srgb,var(--accent) 27%,transparent);border-radius:9px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 9%,transparent),rgba(0,0,0,.20),color-mix(in srgb,var(--accent) 7%,transparent));color:var(--accent2);text-transform:uppercase;font-size:7px;letter-spacing:.10em;font-weight:900}
.back-footer-clean b{font-family:Georgia,serif;letter-spacing:.08em}
.export-studio{position:fixed;left:-10000px;top:0;width:250px;height:auto;pointer-events:none;opacity:1}
.export-studio>div{width:250px;height:350px;margin:0 0 20px}

@media (min-width:981px) and (max-height:700px){
  .cockpit-brand{height:50px}.cockpit-brand img{width:36px;height:36px}.status-strip{height:22px;margin:5px 0}.controls{height:calc(100% - 82px);gap:5px}.control-bank{padding:7px}.control-bank label{margin-top:4px}input,textarea{padding:6px 7px}textarea{min-height:36px;max-height:42px}.advanced{margin-top:5px;padding:5px 6px}.generate-button{margin-top:5px;padding:7px}.display-chamber{grid-template-rows:54px minmax(0,1fr) 42px;padding:8px 12px}.chamber-head h2{font-size:20px}
}
@media (max-width:980px){
  body{overflow:auto}
  .forge-app{height:auto;min-height:100vh;display:block}
  .cockpit{height:auto;overflow:visible;border-right:0;border-bottom:1px solid var(--page-line);padding-bottom:16px}
  .controls{height:auto;display:block}.control-bank{margin-top:8px}.back-bank{overflow:visible}
  .display-chamber{height:auto;min-height:100vh;overflow:visible;display:block;padding:12px}
  .chamber-head{min-height:60px;flex-direction:column;align-items:flex-start;gap:10px}
  .card-slot{min-height:390px;padding:20px 0;flex-direction:column}
  .preview-host{width:250px;height:350px;flex-basis:auto}
  #bothBtn{display:none}.card-slot.both-mode #previewBackHost{display:none}
  .export-dock{position:sticky;bottom:8px;z-index:30;margin-top:8px;backdrop-filter:blur(10px)}
  .export-quality{display:none}
}
@media (max-width:520px){
  .grid-2{grid-template-columns:1fr 1fr}.theme-row{grid-template-columns:repeat(4,1fr)}.range-grid{grid-template-columns:1fr}.range-grid input{height:22px}.export-dock{justify-content:center}.export-actions{width:100%}.export-actions button{flex:1}
}