/* ZIBADIS Design System — Dark Gold — asr-whisper */
* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(circle at 20% 0%,  rgba(201,162,61,.15), transparent 28%),
    radial-gradient(circle at 80% 0%,  rgba(180,122,50,.10), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(44,101,255,.07), transparent 32%),
    linear-gradient(180deg, #050607 0%, #07090b 52%, #050607 100%);
  color: #f4eee0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.5;
}

.shell { width: min(860px, calc(100% - 32px)); margin: 32px auto; }

.hero {
  border: 1px solid rgba(255,255,255,.095);
  background: linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  padding: 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,.48);
  backdrop-filter: blur(20px);
}

.eyebrow { color: #c9a23d; letter-spacing: .22em; text-transform: uppercase; font-size: 11px; font-weight: 600; }
h1 { margin: 6px 0; font-size: clamp(28px, 4.4vw, 52px); font-weight: 300; letter-spacing: .1em; text-transform: uppercase; color: #f4eee0; }
.sub { color: #9c9588; max-width: 720px; margin: 0; font-size: .9rem; }

.panel {
  margin: 18px 0;
  border: 1px solid rgba(255,255,255,.095);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,.32);
}

.field-label { display: block; color: #9c9588; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }

.dropzone {
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.02);
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.dropzone:hover, .dropzone.is-dragover { border-color: rgba(201,162,61,.5); background: rgba(201,162,61,.055); }
.dropzone input { display: none; }
.dropzone .dz-hint { color: #6f6a61; font-size: .78rem; margin-top: 6px; }
.dropzone .dz-filename { color: #ead28b; font-size: .88rem; margin-top: 8px; word-break: break-all; }

button.primary {
  border: 1px solid rgba(201,162,61,.36);
  background: linear-gradient(135deg, rgba(201,162,61,.22), rgba(180,122,50,.18));
  color: #f4eee0;
  padding: 12px 20px;
  cursor: pointer;
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: border-color .2s, background .2s;
  margin-top: 16px;
}
button.primary:hover { border-color: rgba(234,210,139,.5); background: linear-gradient(135deg, rgba(201,162,61,.32), rgba(180,122,50,.28)); }
button.primary:disabled { opacity: .5; cursor: wait; }

.result-box {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.025);
  min-height: 60px;
  white-space: pre-wrap;
  font-size: .92rem;
  color: #f4eee0;
  line-height: 1.7;
}
.result-box.is-empty { color: #6f6a61; }
.result-meta { color: #9c9588; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; }

.status-line { margin-top: 12px; font-size: .8rem; letter-spacing: .04em; }
.status-line.is-error { color: #ef9b8d; }
.status-line.is-ok { color: #83dba9; }

.z-island-nav{position:sticky;top:0;z-index:999;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.09);background:rgba(5,6,7,.96);backdrop-filter:blur(18px);gap:12px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.z-brand{display:flex;align-items:center;gap:9px;min-width:0;overflow:hidden}
.z-mark{width:18px;height:18px;background:linear-gradient(135deg,#c9a23d,#b47a32);flex-shrink:0;display:inline-block}
.z-os{font-size:.67rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(244,238,224,.45);white-space:nowrap}
.z-sep{color:rgba(255,255,255,.18);padding:0 2px}
.z-app-name{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:#c9a23d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.z-back{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,238,224,.38);text-decoration:none;border:1px solid rgba(255,255,255,.08);padding:5px 12px;transition:.2s;white-space:nowrap;flex-shrink:0;font-family:inherit}
.z-back:hover{color:#c9a23d;border-color:rgba(201,162,61,.32)}
.z-island-footer{border-top:1px solid rgba(255,255,255,.07);padding:12px 18px;display:flex;justify-content:space-between;align-items:center;font-size:.65rem;letter-spacing:.1em;color:rgba(244,238,224,.24);text-transform:uppercase;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}

@media (max-width: 720px) {
  .hero { padding: 20px; }
  .panel { padding: 16px; }
}