/* makoff.pl — wspólny arkusz stylów (strona główna PL/EN + lista aplikacji PL/EN).
   Zmiana tutaj = zmiana widoczna na wszystkich czterech stronach. */

:root{
  /* ciemny motyw (domyślny) — niemal czysta czerń, stonowany tekst, przygaszone akcenty: ma wyglądać jak konsola, nie jak "dark mode" aplikacji */
  --ink:#09090b;
  --panel:#111113;
  --panel-2:#17171a;
  --paper:#d6d9de;
  --amber:#d1963a;
  --moss:#7a9270;
  --rust:#a0481f;
  --wire:#242428;
  --muted:#84878d;
  --radius:4px;
  --mono:"JetBrains Mono", ui-monospace, monospace;
  --sans:"IBM Plex Sans", system-ui, -apple-system, sans-serif;

  /* kolor tekstu na jasnym przycisku (amber) — zawsze ciemny, niezależny od motywu */
  --amber-ink:#0a0a0b;
  /* amber/moss jako kolor TEKSTU muszą być ciemniejsze na jasnym tle niż jako wypełnienie przycisku/kropki */
  --amber-text:#d1963a;
  --moss-text:#7a9270;
  /* paleta monogramów aplikacji (apps.php) */
  --pal-0:#d1963a;
  --pal-1:#7a9270;
  --pal-2:#5f7e91;
  --pal-3:#7a6d96;
  --pal-4:#b3714a;

  --glow-opacity:.4;
  --shadow-ambient:0 8px 24px rgba(0,0,0,.45);
  --wire-hover:#38383e;
}

/* Jasny motyw — czysta biel, chłodniejsze/stonowane akcenty. Te dwa bloki (wymuszony przełącznikiem
   i automatyczny wg systemu) muszą zostać zsynchronizowane. */
:root[data-theme="light"]{
  --ink:#f6f7f8;
  --panel:#ffffff;
  --panel-2:#f1f2f4;
  --paper:#16181d;
  --wire:#e4e5e8;
  --muted:#6b6e76;
  --amber-text:#8c6422;
  --moss-text:#3f6636;
  --pal-0:#8c6422;
  --pal-1:#3f6636;
  --pal-2:#3a5568;
  --pal-3:#5c4d78;
  --pal-4:#8a5234;
  --glow-opacity:.16;
  --shadow-ambient:0 8px 24px rgba(22,24,29,.1);
  --wire-hover:#c7c9ce;
}

@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --ink:#f6f7f8;
    --panel:#ffffff;
    --panel-2:#f1f2f4;
    --paper:#16181d;
    --wire:#e4e5e8;
    --muted:#6b6e76;
    --amber-text:#8c6422;
    --moss-text:#3f6636;
    --pal-0:#8c6422;
    --pal-1:#3f6636;
    --pal-2:#3a5568;
    --pal-3:#5c4d78;
    --pal-4:#8a5234;
    --glow-opacity:.16;
    --shadow-ambient:0 8px 24px rgba(22,24,29,.1);
    --wire-hover:#c7c9ce;
  }
}

*{ box-sizing:border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  line-height:1.55;
  overflow-x:hidden;
}

body{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:32px 16px 64px;
}

a{ color:var(--amber-text); text-decoration:none; }
a:hover, a:focus-visible{ text-decoration:underline; }
a:focus-visible, button:focus-visible{
  outline:2px solid var(--amber);
  outline-offset:2px;
}

/* -- ambient glow w tle -- */
.glow{
  position:fixed;
  z-index:0;
  width:50vmax;
  height:50vmax;
  border-radius:50%;
  filter:blur(70px);
  pointer-events:none;
  opacity:var(--glow-opacity);
  will-change:transform;
}
.glow-a{
  top:-16vmax;
  left:-14vmax;
  background:radial-gradient(circle, rgba(209,150,58,.22), transparent 70%);
  animation:drift-a 26s ease-in-out infinite;
}
.glow-b{
  bottom:-18vmax;
  right:-16vmax;
  background:radial-gradient(circle, rgba(122,146,112,.18), transparent 70%);
  animation:drift-b 32s ease-in-out infinite;
}

@keyframes drift-a{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(4vmax,3vmax); }
}
@keyframes drift-b{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(-3vmax,-4vmax); }
}

.frame{ position:relative; z-index:1; width:100%; max-width:760px; }

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:13px;
  color:var(--muted);
  padding-bottom:10px;
  margin-bottom:18px;
  border-bottom:1px solid var(--wire);
}

.topbar .dot{
  display:inline-block;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--moss);
  margin-right:6px;
  box-shadow:0 0 0 0 rgba(122,146,112,.5);
  animation:pulse 2.6s ease-in-out infinite;
}

@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(122,146,112,.45); }
  50%{ box-shadow:0 0 0 4px rgba(138,161,126,0); }
}

.topbar .lang{ font-family:var(--mono); font-size:12px; color:var(--muted); }
.topbar .lang a{ color:var(--muted); }
.topbar .lang a.active{ color:var(--amber-text); pointer-events:none; text-decoration:none; }
.topbar .lang a:hover{ color:var(--amber-text); }

.back{
  display:inline-block;
  font-family:var(--mono);
  font-size:13px;
  color:var(--muted);
  margin-bottom:18px;
}
.back:hover{ color:var(--amber-text); }

.panel{
  position:relative;
  background:var(--panel);
  border:1px solid var(--wire);
  border-radius:var(--radius);
  padding:32px clamp(20px,4vw,40px);
  animation:fade-up .5s ease-out both;
  overflow:hidden;
}

.panel::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, var(--amber), var(--moss) 60%, transparent);
}

@keyframes fade-up{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

.prompt{ font-family:var(--mono); font-size:13px; color:var(--moss-text); margin:0 0 6px; }

h1{
  font-family:var(--mono);
  font-weight:700;
  font-size:clamp(28px,5vw,38px);
  margin:0 0 4px;
  color:var(--paper);
}

.role{ font-family:var(--mono); font-size:15px; color:var(--amber-text); margin:0 0 18px; }
.lede{ color:var(--paper); max-width:56ch; margin:0 0 8px; }

.cursor{
  display:inline-block;
  width:8px; height:1em;
  background:var(--amber);
  vertical-align:text-bottom;
  animation:blink 1s step-end infinite;
  margin-left:2px;
}

@keyframes blink{ 50%{ opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .cursor, .topbar .dot, .status-dot.live, .glow, .panel, .rack-unit, .app{ animation:none !important; }
}

section{ margin-top:34px; }

.section-label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:10px;
}

.section-label::after{ content:""; flex:1; height:1px; background:var(--wire); }

.rack{
  display:flex;
  flex-direction:column;
  border:1px solid var(--wire);
  border-radius:var(--radius);
  overflow:hidden;
}

.rack-unit{
  display:grid;
  grid-template-columns:32px 1fr auto;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:var(--panel-2);
  border-bottom:1px solid var(--wire);
  font-family:var(--mono);
  font-size:13px;
  opacity:0;
  animation:fade-up .45s ease-out both;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.rack-unit:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(209,150,58,.08);
  border-color:var(--wire-hover);
}

.rack-unit:last-child{ border-bottom:none; }
.rack-unit .u{ color:var(--muted); font-size:11px; }
.rack-unit .name{ color:var(--paper); font-weight:500; }

.rack-unit .desc{
  display:block;
  color:var(--muted);
  font-family:var(--sans);
  font-size:12.5px;
  margin-top:2px;
}

.desc-link{ color:var(--amber-text); font-family:var(--mono); font-size:11.5px; }

.status{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
}

.status-dot{ width:6px; height:6px; border-radius:50%; }
.status-dot.live{ background:var(--moss); animation:pulse 2.6s ease-in-out infinite; }
.status-dot.dev{ background:var(--rust); }
.status.live{ color:var(--moss-text); }
.status.dev{ color:var(--rust); }

.tags{ display:flex; flex-wrap:wrap; gap:8px; }

.tag{
  font-family:var(--mono);
  font-size:12px;
  color:var(--paper);
  background:var(--panel-2);
  border:1px solid var(--wire);
  border-radius:var(--radius);
  padding:5px 10px;
  transition:transform .15s ease, border-color .15s ease, color .15s ease;
}

.tag:hover{
  transform:translateY(-1px);
  border-color:var(--amber);
  color:var(--amber-text);
}

.contact{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  font-family:var(--mono);
  font-size:14px;
}

.contact a{ color:var(--paper); }
.contact a:hover{ color:var(--amber-text); }

footer{
  position:relative;
  z-index:1;
  max-width:760px;
  width:100%;
  margin-top:24px;
  padding-top:14px;
  border-top:1px solid var(--wire);
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}

/* -- lista aplikacji (apps.php) -- */
.apps{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.app{
  background:var(--panel-2);
  border:1px solid var(--wire);
  border-radius:var(--radius);
  padding:14px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px 16px;
  opacity:0;
  animation:fade-up .45s ease-out both;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.app:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(209,150,58,.08);
  border-color:var(--wire-hover);
}

.app-badge{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.app-index{
  font-family:var(--mono);
  font-size:11px;
  color:var(--muted);
  width:22px;
  text-align:right;
}

.app-avatar{
  width:34px;
  height:34px;
  flex-shrink:0;
  border-radius:6px;
  border:1px solid currentColor;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
}

.app-avatar.pal-0{ color:var(--pal-0); background:color-mix(in srgb, var(--pal-0) 16%, transparent); }
.app-avatar.pal-1{ color:var(--pal-1); background:color-mix(in srgb, var(--pal-1) 16%, transparent); }
.app-avatar.pal-2{ color:var(--pal-2); background:color-mix(in srgb, var(--pal-2) 16%, transparent); }
.app-avatar.pal-3{ color:var(--pal-3); background:color-mix(in srgb, var(--pal-3) 16%, transparent); }
.app-avatar.pal-4{ color:var(--pal-4); background:color-mix(in srgb, var(--pal-4) 16%, transparent); }

.app-info{
  display:block;
  flex:1 1 320px;
  max-width:480px;
}

.app-name{
  font-family:var(--mono);
  font-size:14px;
  color:var(--paper);
  font-weight:500;
}

.app-desc{
  display:block;
  font-family:var(--sans);
  font-size:12.5px;
  line-height:1.55;
  color:var(--muted);
  margin-top:4px;
}

.app-desc a{ color:var(--amber-text); text-decoration:underline; }
.app-desc a:hover{ color:var(--paper); }

.app-note{
  display:block;
  font-family:var(--sans);
  font-size:12px;
  color:var(--muted);
  margin-top:3px;
}

.app-note a{ color:var(--muted); text-decoration:underline; }
.app-note a:hover{ color:var(--amber-text); }

.app-buttons{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-left:auto;
}

.platform-btn{
  font-family:var(--mono);
  font-size:12px;
  color:var(--amber-ink);
  background:var(--amber);
  border-radius:var(--radius);
  padding:6px 12px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:172px;
  white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.platform-btn:hover{
  text-decoration:none;
  transform:translateY(-1px);
  background:#dba65a;
  box-shadow:0 4px 14px rgba(209,150,58,.3);
}

.pf-label{ display:inline-flex; align-items:center; gap:6px; flex-shrink:0; }
.pf-meta{ display:inline-flex; align-items:center; gap:4px; flex-shrink:0; }

.platform-btn .icon{ display:inline-flex; color:var(--amber-ink); opacity:.8; }
.platform-btn .sz{ color:var(--amber-ink); opacity:.65; font-size:10.5px; }
.platform-btn .dl{ color:var(--amber-ink); opacity:.65; font-size:10.5px; }

.empty{ color:var(--muted); font-family:var(--mono); font-size:13px; }

/* -- interaktywny terminal (sekcja "shell") -- */
.term{
  border:1px solid var(--wire);
  border-radius:var(--radius);
  background:var(--panel-2);
  overflow:hidden;
}

.term-log{
  max-height:260px;
  overflow-y:auto;
  padding:14px 16px 4px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.term-line{
  margin:0;
  font-family:var(--mono);
  font-size:12.5px;
  color:var(--paper);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.term-line.echo{ color:var(--moss-text); }
.term-line.muted{ color:var(--muted); }
.term-line.warn{ color:var(--rust); }
.term-line a{ color:var(--amber-text); text-decoration:underline; }

.term-input-row{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-top:1px solid var(--wire);
}

.term-prompt{ font-family:var(--mono); font-size:13px; color:var(--moss-text); }

.term-input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:var(--paper);
  font-family:var(--mono);
  font-size:13px;
  caret-color:var(--amber);
}

.term-input::placeholder{ color:var(--muted); }

/* -- przełącznik motywu (jasny / ciemny / systemowy) -- */
.theme-switch{ position:relative; display:inline-block; }

.theme-btn{
  background:none;
  border:none;
  padding:0 2px;
  margin:0;
  color:var(--muted);
  font-family:var(--mono);
  font-size:13px;
  line-height:1;
  cursor:pointer;
}
.theme-btn:hover{ color:var(--amber-text); }

.theme-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:20;
  display:flex;
  flex-direction:column;
  min-width:116px;
  padding:4px;
  background:var(--panel-2);
  border:1px solid var(--wire);
  border-radius:var(--radius);
  box-shadow:var(--shadow-ambient);
}

.theme-menu[hidden]{ display:none; }

.theme-option{
  display:block;
  width:100%;
  background:none;
  border:none;
  text-align:left;
  padding:6px 10px;
  border-radius:3px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--paper);
  cursor:pointer;
}

.theme-option:hover, .theme-option:focus-visible{ background:var(--wire); }
.theme-option.active{ color:var(--amber-text); }
.theme-option.active::before{ content:"› "; }