/* NAS Share — tokeny wizualne
   Paleta: stal (obudowa serwera) + bursztyn (dioda aktywności dysku) */

:root {
  --steel-900: #12161c;
  --steel-850: #161b22;
  --steel-800: #1a2027;
  --steel-700: #252d37;
  --steel-600: #333d4a;
  --steel-500: #5a6779;
  --ice: #d9e2ec;
  --ice-dim: #94a3b4;
  --amber: #f2a73b;
  --amber-deep: #6b4a17;
  --jade: #4fc3a1;
  --rust: #e0644f;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gap: 1.5rem;
  --radius: 3px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--steel-900);
  color: var(--ice);
  font-family: var(--display);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body::before {
  /* delikatna siatka jak na rysunku technicznym */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--steel-800) 1px, transparent 1px),
    linear-gradient(90deg, var(--steel-800) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: .35;
  z-index: 0;
}

.wrap { position: relative; z-index: 1; }

a { color: var(--amber); }

/* --- etykiety i typografia -------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--steel-500);
}

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: .4rem 0 0;
  overflow-wrap: anywhere;
}

.mono { font-family: var(--mono); font-size: .82rem; }

/* --- kontrolki --------------------------------------------------------- */
label {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--steel-500);
  margin-bottom: .35rem;
}

input[type=text], input[type=password], input[type=number], select {
  width: 100%;
  padding: .6rem .7rem;
  background: var(--steel-900);
  border: 1px solid var(--steel-700);
  border-radius: var(--radius);
  color: var(--ice);
  font-family: var(--mono);
  font-size: .85rem;
}

input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.2rem;
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  background: var(--amber);
  color: var(--steel-900);
  font-family: var(--display);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .02em;
  cursor: pointer;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
.btn:hover { filter: brightness(1.12); }
.btn:active { transform: translateY(1px); }

.btn.ghost {
  background: transparent;
  color: var(--ice);
  border-color: var(--steel-600);
}
.btn.ghost:hover { border-color: var(--amber); color: var(--amber); filter: none; }

.btn.danger { background: transparent; border-color: var(--steel-600); color: var(--ice-dim); }
.btn.danger:hover { border-color: var(--rust); color: var(--rust); filter: none; }

.panel {
  background: var(--steel-850);
  border: 1px solid var(--steel-700);
  border-radius: var(--radius);
  padding: var(--gap);
}

.err {
  border-left: 3px solid var(--rust);
  background: rgba(224, 100, 79, .09);
  padding: .6rem .8rem;
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--ice);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}


/* ==========================================================================
   Tło serwerowni i kanał transferu — wspólne dla strony pobierania
   i strony powitalnej.
   ========================================================================== */
  /* siatka techniczna ustępuje miejsca ścianie szaf */
  body::before { content: none; }

  .dc { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .dc svg { width: 100%; height: 100%; display: block; }
  .dc .veil {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 90% 70% at 50% 42%,
        rgba(18,22,28,.97) 0%, rgba(18,22,28,.93) 38%,
        rgba(18,22,28,.74) 72%, rgba(18,22,28,.48) 100%);
  }
  .dc .dc-led {
    opacity: .1;
    filter: drop-shadow(0 0 4px currentColor);
    animation: blink var(--t) infinite;
    animation-delay: var(--d);
  }
  @keyframes blink {
    0%, 44% { opacity: .1 }
    48%, 54% { opacity: .95 }
    58%, 100% { opacity: .1 }
  }
  @media (prefers-reduced-motion: reduce) {
    .dc .dc-led { animation: none; opacity: .45; }
  }


  /* ---- SYGNATURA: kanał transferu ---------------------------------- */
  .channel {
    display: flex;
    align-items: center;
    gap: clamp(.5rem, 2vw, 1.1rem);
    margin: clamp(2.5rem, 7vw, 4rem) 0 1rem;
    color: var(--steel-600);
  }
  .folder { flex: 0 0 auto; width: clamp(56px, 13vw, 88px); height: auto; }
  .folder .outline { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: round; }
  .folder .load { fill: currentColor; opacity: 0; transition: opacity .5s ease; }
  .folder.src { color: var(--steel-500); }
  .folder.src .load { opacity: .16; }
  .folder.dst { color: var(--steel-600); transition: color .5s ease; }
  .channel.done .folder.dst { color: var(--jade); }
  .channel.done .folder.dst .load { opacity: .18; }

  .blocks {
    flex: 1 1 auto;
    display: flex;
    gap: 2px;
    height: clamp(26px, 6vw, 34px);
    padding: 3px;
    border: 1px solid var(--steel-700);
    border-radius: var(--radius);
    background: var(--steel-850);
  }
  .blocks i {
    flex: 1 1 0;
    border-radius: 1px;
    background: var(--steel-800);
    box-shadow: inset 0 0 0 1px var(--steel-700);
    transition: background .12s linear, box-shadow .12s linear;
  }
  .blocks i.on {
    background: var(--amber);
    box-shadow: inset 0 0 0 1px var(--amber), 0 0 7px rgba(242,167,59,.4);
  }
  .blocks i.head { animation: flick .55s steps(2, end) infinite; }
  .channel.done .blocks i.on {
    background: var(--jade);
    box-shadow: inset 0 0 0 1px var(--jade), 0 0 6px rgba(79,195,161,.35);
  }
  @keyframes flick { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

  .readout {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--steel-500);
    font-family: var(--mono);
    font-size: .76rem;
    letter-spacing: .06em;
    min-height: 1.4em;
  }
  .readout .state { color: var(--ice-dim); }
  .channel.done ~ .readout .state { color: var(--jade); }


/* Kanał jako komunikat o błędzie — ta sama sygnatura niesie też złe wieści. */
.channel.fail .blocks i.on {
  background: var(--rust);
  box-shadow: inset 0 0 0 1px var(--rust), 0 0 7px rgba(224, 100, 79, .4);
}
.channel.fail .folder.dst { color: var(--rust); }
.channel.fail .folder.dst .load { opacity: .18; }
.channel.fail ~ .readout .state { color: var(--rust); }