/* ==========================================================================
   Fonts – lokal mitliefern (woff2 in dieses Verzeichnis). Fehlen sie, greift
   der System-Fallback. Kein externer CDN-Call -> volle Souveränität.
   ========================================================================== */
@font-face { font-family:"Inter";        src:url("Inter-Variable.woff2") format("woff2-variations");        font-weight:100 900; font-display:swap; }
@font-face { font-family:"Newsreader";    src:url("Newsreader-Variable.woff2") format("woff2-variations");    font-weight:200 800; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("JetBrainsMono-Variable.woff2") format("woff2-variations"); font-weight:100 800; font-display:swap; }

/* ==========================================================================
   QUBE66 – Design Tokens (V3, Variant A / Dark)
   ========================================================================== */
:root {
  --bg:          #08090B;
  --bg-elev:     #101317;
  --bg-card:     #141821;

  --line:        rgba(242,238,230,0.08);
  --line-strong: rgba(242,238,230,0.18);
  --line-bright: rgba(242,238,230,0.35);

  --ink:         #F2EEE6;
  --ink-bright:  #FFFFFF;
  --ink-dim:     #A09D96;
  --ink-muted:   #8B8983;

  --lead:        #008DCC;  /* KI  – führt die Palette */
  --lead-glow:   rgba(0,141,204,0.45);
  --base:        #54A491;  /* Security – Fundament */
  --base-glow:   rgba(84,164,145,0.45);
  --accent:      #F1B400;  /* Bauhaus-Akzent */
  --it:          #9BA7B8;  /* Steel */
  --danger:      #FF3B30;

  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif:   "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius:      14px;
}

/* ==========================================================================
   1 = Basic Style
   ========================================================================== */
body {
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv11","ss01","ss03";
}

/* Atmosphäre: zwei Radial-Glows (Lead/Base) */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  background-image:
    radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--lead) 9%, transparent), transparent 45%),
    radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--base) 8%, transparent), transparent 50%);
}
/* Film-Grain */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 2;
  opacity: 0.3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

#content {
  position: relative;
  z-index: 3;
  padding: 2em;
  max-width: 56em;
  margin: 0 auto;
}

h1 a {
  display: block;
  background: url(logo-qube66.svg) no-repeat;
  background-size: 100% 100%;
  text-indent: -9999px;
  width: 194px;
  height: 185px;
  margin: 1.2em auto 0.3em;
  position: relative;
}

h2 {
  text-align: center;
  color: var(--ink);
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

fieldset {
  border: 1.5px dashed var(--line-strong);
  padding: 1.5em;
  margin: 0 auto;
  border-radius: var(--radius);
  background: var(--bg-card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  width: 20em;
  min-height: 15em;
  min-width: 30em;
  position: relative;
}

legend {
  padding: 0.45em 1.1em;
  background: var(--bg-elev);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.8em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  min-width: 8em;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
}

table a { color: var(--lead); }
table a:hover, table a:focus { text-decoration: none; color: var(--ink-bright); }

input[type="submit"] {
  background: var(--lead);
  border: 0;
  padding: 14px 26px;
  font-family: var(--font-display);
  font-size: 0.95em;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #fff;
  border-radius: 100px;
  cursor: pointer;
  margin: 12px 10px;
  box-shadow: 0 0 0 1px var(--lead), 0 8px 28px var(--lead-glow);
  transition: transform 0.22s cubic-bezier(.22,.61,.36,1), box-shadow 0.22s ease, filter 0.22s ease;
}
input[type="submit"]:hover,
input[type="submit"]:focus {
  transform: scale(1.045);
  filter: brightness(1.08);
  outline: none;
}
input[type="submit"]:active { transform: scale(1.01); }

select,
input[type="text"],
input[type="password"] {
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  color: var(--ink);
  padding: 9px 11px;
  font-family: var(--font-display);
  font-size: 1em;
  border-radius: 8px;
}
select:focus,
input[type="text"]:focus,
input[type="password"]:focus {
  outline: none;
  border-color: var(--lead);
  box-shadow: 0 0 0 3px var(--lead-glow);
}
select { width: 100%; }

.inner { margin-top: 3em; }

#upload fieldset {
  background: url(upload.svg) no-repeat center;
  background-size: 120px auto;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
#upload fieldset:hover {
  border-color: var(--lead);
  box-shadow: 0 0 60px -20px var(--lead-glow);
}
#upload > form { text-align: center; }
#upload p { margin: 0; }

#file_select {
  position: relative;
  width: 100%;
  height: 16em;
  cursor: pointer;
  opacity: 0;
}
  #upload.file-selected #file_select { opacity: 1; height: 2em; }
  #upload.file-selected fieldset {
    background-image: none;
    border-style: solid;
    border-color: var(--base);
    box-shadow: 0 0 60px -20px var(--base-glow);
  }

/* ==========================================================================
   2 = Copyright
   ========================================================================== */
#copyright {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.72em;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin: 3.5em auto 1.5em;
}
#copyright a { color: var(--it); text-decoration: none; }
#copyright a:hover, #copyright a:focus { text-decoration: underline; color: var(--lead); }

/* ==========================================================================
   3 = Options
   ========================================================================== */
#options { color: var(--ink); position: relative; z-index: 10; width: 100%; height: 90%; }
#options tr { height: 2.7em; }
#option_table tr:first-child { width: 100%; height: 100%; }
#options input[type="submit"] { position: relative; margin: 1em auto; }

/* ==========================================================================
   4 = Upload
   ========================================================================== */
#upload_finished, #uploading, .message, .info, .error { text-align: center; color: var(--ink); }

#upload_finished > p:nth-child(1) { color: var(--base); font-weight: 700; font-size: 1.1em; }
#upload_finished div p:nth-child(1) { font-weight: 700; color: var(--ink-dim); }
#upload_finished a { text-decoration: none; color: var(--lead); word-break: break-all; }
#uploading a { font-weight: 700; text-decoration: none; color: var(--lead); }

#uploaded_percentage {
  font-size: 2.4em;
  font-weight: 700;
  color: var(--lead);
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

#upload_finished a:hover, #uploading a:hover,
#upload_finished a:focus, #uploading a:focus { text-decoration: underline; color: var(--ink-bright); }

.message, .error { color: var(--danger); font-style: normal; font-weight: 700; }

#upload_link_email { margin-left: 10px; }
#upload_image_email {
  padding-left: 26px;
  padding-bottom: 15px;
  background: url(email.svg) no-repeat left center;
  background-size: 20px auto;
}

/* ==========================================================================
   5 = Terms of service
   ========================================================================== */
textarea[readonly="readonly"] {
  border: 1px solid var(--line-strong);
  color: var(--ink);
  font-family: var(--font-display);
  background: var(--bg-card);
  border-radius: 10px;
  padding: 1em;
  margin: auto;
  display: block;
}
textarea[readonly="readonly"] + p,
textarea[readonly="readonly"] + p + p { text-align: center; color: var(--ink); }
textarea[readonly="readonly"] + p a,
textarea[readonly="readonly"] + p + p a { font-weight: 700; text-decoration: none; color: var(--lead); }
textarea[readonly="readonly"] + p a:hover,
textarea[readonly="readonly"] + p + p a:hover,
textarea[readonly="readonly"] + p a:focus,
textarea[readonly="readonly"] + p + p a:focus { text-decoration: underline; }

/* ==========================================================================
   6 = Install
   ========================================================================== */
#install fieldset, #install + fieldset { width: auto; max-width: 50em; border: 1.5px dashed var(--line-strong); }
#install table, #install + fieldset table { width: 100%; border-collapse: collapse; }
#install td, #install + fieldset td { padding: 0.6em 1em; border-bottom: 0; }
#install td:empty { width: 13.1em; }
#install table form:nth-child(odd), #install + fieldset tr:nth-child(odd) { background: var(--bg-elev); }
#install fieldset > form { margin-top: 2em; text-align: center; }
#install form { display: table; width: 100%; }
#install td:last-child { text-align: left; }
#install .info { width: 19em; }
#install input[type="submit"] { min-width: 10.5em; }
#install + fieldset table { font-size: 0.9em; }
#install + fieldset td:first-child input[type="submit"] {
  background: none; padding: 0; color: var(--lead); font-weight: 700; box-shadow: none;
}
#install + fieldset td:first-child input[type="submit"]:hover,
#install + fieldset td:first-child input[type="submit"]:focus { text-decoration: underline; background: none; transform: none; }

/* ==========================================================================
   7 = Admin
   ========================================================================== */
#admin fieldset, #admin + fieldset { width: auto; max-width: 60em; border: 1.5px dashed var(--line-strong); }
#admin table, #admin + fieldset table { width: 100%; border-collapse: collapse; border-bottom: 1px solid var(--line-strong); }
#admin td, #admin + fieldset td { padding: 0.6em 1em; border: 1px solid var(--line); border-bottom: 0; }
#admin td:empty { width: 13.1em; }
#admin table form:nth-child(odd), #admin + fieldset tr:nth-child(odd) { background: var(--bg-elev); }
#admin fieldset > form { margin-top: 2em; text-align: center; }
#admin form { display: table; width: 100%; }
#admin td:last-child { text-align: left; }
#admin .info { width: 19em; }
#admin input[type="submit"] { min-width: 10.5em; }
#admin + fieldset table { font-size: 0.9em; }
#admin + fieldset td:first-child input[type="submit"] {
  background: none; padding: 0; color: var(--lead); font-weight: 700; box-shadow: none;
}
#admin + fieldset td:first-child input[type="submit"]:hover,
#admin + fieldset td:first-child input[type="submit"]:focus { text-decoration: underline; background: none; transform: none; }

/* ==========================================================================
   8 = Download page
   ========================================================================== */
#self_destruct {
  font-weight: 700;
  color: var(--danger);
  background-image: url('self-destruct.svg');
  background-size: 32px 32px;
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
}