@charset "UTF-8";
/* Holo Card Studio — Werkstatt-Oberfläche im Viewer-Look. */

:root{
  --bg:#07090e;--bg-soft:#0d1017;--panel:#10131b;--panel-2:#141824;
  --line:#ffffff14;--line-soft:#ffffff0d;
  --gold:#d8bd85;--gold-dim:#a98f5f;
  --ink:#efe7d7;--ink-soft:#b7b3ab;--muted:#7c8088;--bad:#e6a3a3;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1200px 700px at 50% -10%,#161a24 0%,transparent 60%),var(--bg);
  color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.grain{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.04;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

main{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:0 clamp(16px,4vw,40px) 64px}

.site-head{display:flex;align-items:center;gap:20px;padding:26px 0 20px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink);margin-right:auto}
.seal{width:36px;height:42px;display:grid;place-items:center;border:1px solid var(--gold-dim);border-radius:3px;
  color:var(--gold);font:600 22px var(--serif);transform:rotate(-4deg)}
.brand-name{font:600 13px/1 var(--sans);letter-spacing:.26em}
.brand-name small{display:block;margin-top:6px;font:400 15px/1 var(--serif);letter-spacing:.12em;color:var(--ink-soft);text-transform:none}
.ghost-link{font:inherit;font-size:11px;letter-spacing:.06em;color:var(--ink-soft);background:none;border:0;cursor:pointer;padding:8px 2px}
.ghost-link:hover{color:var(--gold)}

.card{
  margin:26px 0;padding:clamp(20px,3vw,32px);
  background:linear-gradient(180deg,var(--panel) 0%,var(--bg-soft) 100%);
  border:1px solid var(--line);border-radius:12px;
}
#login{max-width:440px}

.eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.eyebrow .mark{width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg)}
h2{font:400 clamp(22px,3vw,30px)/1.2 var(--serif);letter-spacing:.06em;margin:0 0 14px;color:var(--ink)}
.hint{font-size:12px;line-height:1.8;color:var(--muted);margin:12px 0}
.hint em{color:var(--ink-soft);font-style:normal}
.opt{color:var(--muted);font-weight:400;letter-spacing:0;font-size:10px}

form{display:block}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.grid.layers{grid-template-columns:repeat(4,minmax(0,1fr))}
label{display:grid;gap:.45rem;font-size:11px;letter-spacing:.06em;color:var(--ink-soft);min-width:0}
input,textarea{
  font:inherit;font-size:13px;padding:.62rem .7rem;border-radius:8px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink);
  box-sizing:border-box;max-width:100%;min-width:0;
}
input:focus,textarea:focus{outline:none;border-color:var(--gold)}
input[type=file]{padding:.45rem;font-size:11px;color:var(--muted)}
input[type=file]::file-selector-button{
  font:inherit;font-size:11px;margin-right:10px;padding:.4rem .7rem;border-radius:6px;
  border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);cursor:pointer;
}
input[type=file]::file-selector-button:hover{border-color:var(--gold);color:var(--gold)}
textarea{min-height:4.5rem;resize:vertical}

.btn{
  font:inherit;font-size:12px;letter-spacing:.08em;margin-top:18px;padding:12px 22px;cursor:pointer;
  border:1px solid var(--line);border-radius:8px;background:var(--bg-soft);color:var(--ink);
  transition:border-color .2s,background .2s,color .2s;
}
.btn:hover{border-color:var(--gold)}
.btn--gold{background:var(--gold);color:#1a160d;border-color:var(--gold);font-weight:600}
.btn--gold:hover{background:#e6cf9c}

.prep-sliders{display:grid;grid-template-columns:1fr 1fr auto;gap:20px;align-items:center;margin-top:18px}
.prep-sliders label{font-size:10px}
.prep-sliders output{float:right;font:400 10px var(--serif);color:var(--gold)}
.prep-sliders input[type=range]{width:100%;accent-color:var(--gold);height:20px;padding:0}
.prep-sliders .check{display:flex;align-items:center;gap:8px;font-size:11px;white-space:nowrap}
.prep-sliders .check input{width:15px;height:15px;accent-color:var(--gold)}

#prep-result{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
.prep-previews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.prep-previews figure{margin:0;text-align:center}
.prep-previews img{
  width:100%;aspect-ratio:2/3;object-fit:cover;border:1px solid var(--line);border-radius:8px;
  background:repeating-conic-gradient(#1b2130 0% 25%,#141a26 0% 50%) 50%/16px 16px;
}
.prep-previews figcaption{margin-top:7px;font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}

#login-error,#form-status,#prep-status{min-height:1.3em;font-size:12px;margin:12px 0 0;color:var(--ink-soft)}
#login-error{color:var(--bad)}
.is-error{color:var(--bad)!important}
.is-ok{color:var(--gold)!important}

#cards article{
  display:flex;gap:.9rem;align-items:center;flex-wrap:wrap;
  padding:1rem 0;border-top:1px solid var(--line-soft);
}
#cards article:first-child{border-top:0}
#cards strong{font:400 15px var(--serif);letter-spacing:.03em}
#cards span{color:var(--muted);font-size:11px;flex:1;min-width:120px}
#cards a{color:var(--gold);text-decoration:none;font-size:11px;letter-spacing:.04em;border-bottom:1px solid transparent}
#cards a:hover{border-color:var(--gold)}
#cards p{color:var(--muted);font-size:12px}

@media(max-width:760px){
  .grid.layers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prep-sliders{grid-template-columns:1fr}
  .prep-previews{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){.grid.layers{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}