/* ========== OSNOVA ========== */
:root{
  --bg:#0a0c14;
  --bg-2:#0f1320;
  --panel:#121829;
  --line:#232b40;
  --line-soft:#1a2135;
  --ink:#eef1f8;
  --muted:#8b93a8;
  --dim:#5a637a;
  --accent:#6ea8ff;
  --accent-2:#a98cff;
  --gold:#e8c46a;
  --good:#7fd6a3;
  --warn:#f0b76a;
  --bad:#e88a8a;
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  padding:0;
  overflow:hidden;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  min-height:100dvh;
  display:grid;
  grid-template-rows:auto 1fr auto auto auto;
  position:relative;
}

/* nežno ozadje */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 15% 10%, #1a2547 0%, transparent 45%),
    radial-gradient(circle at 85% 90%, #241a3d 0%, transparent 50%),
    var(--bg);
  pointer-events:none;
}

/* ========== HEADER ========== */
.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 20px;
  border-bottom:1px solid var(--line-soft);
  background:#0a0c1499;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  position:relative;
  z-index:5;
}

.brand{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.22em;
  color:var(--gold);
}

.top-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.step-label{
  font-size:.68rem;
  letter-spacing:.16em;
  color:var(--muted);
  text-transform:uppercase;
}

.step-label b{
  color:var(--ink);
  font-weight:700;
}

.lang{
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  border-radius:999px;
  padding:4px 10px;
  cursor:pointer;
  font:inherit;
  font-size:.72rem;
  letter-spacing:.1em;
  transition:border-color .2s, color .2s;
}
.lang:hover{border-color:var(--accent);color:var(--accent)}

/* ========== MAIN ========== */
main#app{
  position:relative;
  z-index:1;
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding:clamp(16px,3vh,40px) clamp(16px,4vw,48px);
}

.screen{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);
  align-items:center;
  max-width:1180px;
  width:100%;
  margin:0 auto;
  animation:fadeSlide .5s cubic-bezier(.2,.9,.3,1);
}

@keyframes fadeSlide{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

.copy{
  max-height:100%;
  overflow:auto;
  padding-right:8px;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
.copy::-webkit-scrollbar{width:6px}
.copy::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:14px;
}
.eyebrow::before{
  content:'';
  width:24px;
  height:1px;
  background:var(--accent);
  opacity:.6;
}

h1{
  font-size:clamp(1.6rem,3.6vw,2.6rem);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  color:var(--ink);
}

.lead{
  font-size:clamp(1rem,1.6vw,1.15rem);
  line-height:1.5;
  color:var(--ink);
  opacity:.92;
  margin:0 0 .8em;
}

.detail{
  font-size:.95rem;
  line-height:1.65;
  color:var(--muted);
  border-left:2px solid var(--accent);
  padding:6px 0 6px 16px;
  margin:0 0 1em;
}

.detail strong{color:var(--ink);font-weight:600}

.question{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line-soft);
}
.question label{
  display:block;
  font-size:.85rem;
  color:var(--ink);
  margin-bottom:8px;
  font-weight:500;
}
.question textarea{
  width:100%;
  min-height:52px;
  max-height:90px;
  resize:vertical;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px 12px;
  color:var(--ink);
  font:inherit;
  font-size:.92rem;
  transition:border-color .2s;
}
.question textarea:focus{
  outline:none;
  border-color:var(--accent);
}
.save{
  margin-top:8px;
  font-size:.78rem;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  font:inherit;
  transition:all .2s;
}
.save:hover{border-color:var(--accent);color:var(--accent)}
.save.saved{border-color:var(--good);color:var(--good)}

/* ========== SIDE / VIZUAL ========== */
.side{
  display:grid;
  place-items:center;
  align-content:center;
  gap:16px;
  min-width:0;
}

.visual{
  width:min(100%,380px);
  aspect-ratio:1/1;
  border:1px solid var(--line);
  border-radius:24px;
  background:linear-gradient(180deg,var(--panel) 0%,#0a0e18 100%);
  display:grid;
  place-items:center;
  overflow:hidden;
  position:relative;
  box-shadow:0 20px 60px #0006;
}

.visual img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.symbol{
  width:70%;
  height:70%;
}
.symbol svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.symbol svg *{
  fill:none;
  stroke:var(--accent);
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.symbol svg .gold{stroke:var(--gold)}
.symbol svg .violet{stroke:var(--accent-2)}
.symbol svg .dot{fill:var(--accent);stroke:none}
.symbol svg text{
  fill:var(--ink);
  stroke:none;
  font:600 9px -apple-system,Arial,sans-serif;
  letter-spacing:.16em;
}

.caption{
  font-size:.82rem;
  color:var(--dim);
  text-align:center;
  max-width:340px;
  font-style:italic;
}

/* ========== KONTROLE ========== */
.controls{
  display:flex;
  gap:10px;
  align-items:center;
  padding:14px 20px;
  border-top:1px solid var(--line-soft);
  background:#0a0c1499;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  position:relative;
  z-index:5;
  flex-wrap:wrap;
}

.spacer{flex:1}

.btn{
  border-radius:999px;
  padding:10px 18px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  font:inherit;
  font-size:.88rem;
  font-weight:500;
  transition:all .2s;
  white-space:nowrap;
}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{
  background:var(--accent);
  border-color:var(--accent);
  color:#0a0c14;
  font-weight:700;
}
.btn.primary:hover{background:#87b8ff;border-color:#87b8ff}
.btn:disabled{opacity:.3;cursor:not-allowed}

/* ========== PROGRESS ========== */
.progress{
  height:2px;
  background:var(--line-soft);
  position:relative;
  z-index:5;
}
.progress span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .5s cubic-bezier(.2,.9,.3,1);
  width:0;
}

/* ========== FOOTER ========== */
.bottom{
  padding:14px 20px 16px;
  border-top:1px solid var(--line-soft);
  background:#0a0c1499;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  position:relative;
  z-index:5;
}

.note{
  margin:0 0 10px;
  font-size:.76rem;
  color:var(--dim);
  line-height:1.5;
  max-width:820px;
}

.links{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  align-items:center;
}

.links a,
.foot-btn{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  text-decoration:none;
  background:transparent;
  border:0;
  cursor:pointer;
  padding:2px 0;
  font-family:inherit;
  transition:color .2s;
  position:relative;
}
.links a:hover,
.foot-btn:hover{color:var(--accent)}

.links a[data-soon]::after{
  content:'· kmalu';
  font-size:.62rem;
  color:var(--dim);
  margin-left:4px;
  letter-spacing:.05em;
  text-transform:none;
  font-weight:400;
}

/* ========== PANEL (modal) ========== */
.backdrop{
  position:fixed;
  inset:0;
  background:#0009;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:grid;
  place-items:center;
  padding:20px;
  z-index:100;
  animation:fadeIn .25s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.panel{
  max-width:560px;
  width:100%;
  max-height:85dvh;
  overflow:auto;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:20px;
  padding:28px;
  position:relative;
  animation:pop .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{
  from{transform:scale(.95);opacity:0}
  to{transform:scale(1);opacity:1}
}

.panel .eyebrow{margin-bottom:8px}
.panel h2{
  font-size:1.3rem;
  font-weight:600;
  margin:.2em 0 .6em;
  color:var(--ink);
}
.panel p{
  color:var(--muted);
  line-height:1.65;
  font-size:.94rem;
}
.panel .close{
  position:absolute;
  top:10px;
  right:14px;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
  padding:0 4px;
  transition:color .2s;
}
.panel .close:hover{color:var(--ink)}

.panel .actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}

.panel .opt{
  display:block;
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
  border-radius:10px;
  padding:12px 14px;
  font:inherit;
  font-size:.9rem;
  cursor:pointer;
  margin-bottom:8px;
  transition:all .2s;
}
.panel .opt:hover{border-color:var(--accent);background:#6ea8ff0d}

/* ========== STATUS ========== */
.status-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:middle;
}
.status-ready{background:var(--good)}
.status-wip{background:var(--warn)}
.status-soon{background:var(--dim)}
.status-off{background:var(--bad)}

/* ========== MOBILNO ========== */
@media(max-width:760px){
  .top{padding:11px 14px}
  .brand{font-size:.66rem;letter-spacing:.18em}
  .step-label{font-size:.6rem}
  .lang{font-size:.66rem;padding:3px 8px}

  main#app{padding:12px 14px}

  .screen{
    grid-template-columns:1fr;
    grid-template-rows:auto 1fr;
    gap:14px;
    align-items:stretch;
  }
  .side{order:-1;align-content:start;gap:10px}
  .visual{width:min(100%,220px);margin:0 auto}
  .symbol{width:74%;height:74%}
  .caption{display:none}

  h1{font-size:clamp(1.4rem,6.5vw,1.9rem);margin-bottom:.4em}
  .lead{font-size:.98rem;margin-bottom:.6em}
  .detail{font-size:.86rem;line-height:1.5;padding:5px 0 5px 12px;margin-bottom:.7em}

  .question{margin-top:14px;padding-top:12px}
  .question label{font-size:.78rem;margin-bottom:6px}
  .question textarea{min-height:42px;max-height:60px;font-size:.85rem;padding:8px 10px}
  .save{font-size:.72rem;padding:6px 12px}

  .controls{padding:10px 14px;gap:6px}
  .btn{padding:9px 14px;font-size:.8rem}
  .controls .btn.primary{width:100%;order:5;margin-top:4px}
  .spacer{display:none}

  .bottom{padding:11px 14px 13px}
  .note{font-size:.7rem;line-height:1.45;margin-bottom:8px}
  .links{gap:5px 12px}
  .links a,.foot-btn{font-size:.66rem;letter-spacing:.13em}
  .links a[data-soon]::after{font-size:.58rem}
}

@media(max-width:380px){
  .brand{font-size:.62rem}
  .btn{font-size:.74rem;padding:8px 12px}
  h1{font-size:1.35rem}
}