/* ============================================================================
   UpWolf — „Den" design language (produktový vizuální styl)
   Prefixované tokeny (--uw-*) a komponenty (.uw-*), aby šly bezpečně nasadit
   i vedle app.css. Krémové plochy, oranžový signal akcent, serif jen na akcenty.
   ========================================================================== */
:root{
  --uw-paper:#F4EEE2;      /* pozadí stránky */
  --uw-paper-2:#EFE7D6;    /* alternativní plocha / metrické dlaždice */
  --uw-surface:#FFFFFF;    /* karty */
  --uw-ink:#1B1814;        /* hlavní text */
  --uw-ink-soft:#3A342B;
  --uw-muted:#6B6253;      /* sekundární text */
  --uw-faint:#8A7E68;      /* popisky/hinty */
  --uw-line:#E0D6C2;       /* linky / okraje */
  --uw-line-soft:#E8DFCC;

  --uw-signal:#FF6A2B;     /* hlavní akce + akcent */
  --uw-signal-ink:#2A1102; /* text na oranžové */
  --uw-signal-deep:#D8541F;/* oranžová na text (kickery) */
  --uw-signal-soft:rgba(255,106,43,.12);

  --uw-charcoal:#1B1814;   /* tmavý akcent (např. app shell, sekundární tlačítko) */
  --uw-moon:#C9912F;       /* měsíční detail */

  --uw-live-bg:#BFF0D8;   --uw-live-ink:#0F6E45;
  --uw-warn-bg:#FBE6C2;   --uw-warn-ink:#8A5A12;
  --uw-bad-bg:#F7D2CE;    --uw-bad-ink:#A3382C;
  --uw-idle-bg:#E7DECC;   --uw-idle-ink:#6B6253;

  --uw-r:14px; --uw-r-lg:18px; --uw-r-sm:10px;
  --uw-shadow:0 14px 34px rgba(74,46,12,.10);
  --uw-disp:'Space Grotesk',-apple-system,system-ui,sans-serif;
  --uw-serif:'Fraunces',Georgia,serif;
  --uw-body:'Inter',-apple-system,system-ui,sans-serif;
}

/* základ plochy (na <body class="uw"> nebo wrapper) */
.uw{font-family:var(--uw-body);color:var(--uw-ink);background:var(--uw-paper);line-height:1.5;-webkit-font-smoothing:antialiased}
.uw *{box-sizing:border-box} /* aby width:100% + padding nepřetékalo buňky */
.uw ::selection{background:var(--uw-signal-soft)}
/* jemné zrno — „nedigitální" pocit i ve světlém */
.uw-grain::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.04;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.uw h1,.uw h2,.uw h3,.uw-disp{font-family:var(--uw-disp);font-weight:700;letter-spacing:-.025em;line-height:1.08;color:var(--uw-ink)}
.uw-kicker{font-family:var(--uw-serif);font-style:italic;font-weight:600;color:var(--uw-signal-deep)}
.uw-muted{color:var(--uw-muted)}
.uw-faint{color:var(--uw-faint)}

/* ---- tlačítka ---- */
.uw-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--uw-disp);font-weight:600;font-size:14px;
  padding:11px 18px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .14s,box-shadow .14s,background .14s,border-color .14s;text-decoration:none}
.uw-btn--primary{background:var(--uw-signal);color:var(--uw-signal-ink);box-shadow:0 6px 0 #C44A12}
.uw-btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 0 #C44A12}
.uw-btn--primary:active{transform:translateY(3px);box-shadow:0 3px 0 #C44A12}
.uw-btn--ghost{background:var(--uw-surface);color:var(--uw-ink);border-color:var(--uw-line)}
.uw-btn--ghost:hover{border-color:var(--uw-signal);color:var(--uw-signal-deep)}
.uw-btn--dark{background:var(--uw-charcoal);color:var(--uw-paper)}
.uw-btn--dark:hover{transform:translateY(-2px)}
.uw-btn--sm{padding:8px 14px;font-size:13px}

/* ---- karty ---- */
.uw-card{background:var(--uw-surface);border:1px solid var(--uw-line-soft);border-radius:var(--uw-r-lg);padding:18px 20px;box-shadow:var(--uw-shadow)}
.uw-card--flat{box-shadow:none}

/* ---- metrické dlaždice ---- */
.uw-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.uw-tile{background:var(--uw-paper-2);border-radius:var(--uw-r);padding:12px 14px}
.uw-tile .l{font-size:12px;color:var(--uw-faint)}
.uw-tile .n{font-family:var(--uw-disp);font-weight:700;font-size:24px;letter-spacing:-.02em;margin-top:3px}
.uw-tile .d{font-size:12px;margin-top:3px}
.uw-up{color:var(--uw-live-ink)} .uw-down{color:var(--uw-bad-ink)}

/* ---- stavové pilulky ---- */
.uw-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;border-radius:999px;padding:3px 10px;font-family:var(--uw-disp)}
.uw-pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.uw-pill--live{background:var(--uw-live-bg);color:var(--uw-live-ink)}
.uw-pill--review{background:var(--uw-warn-bg);color:var(--uw-warn-ink)}
.uw-pill--failed{background:var(--uw-bad-bg);color:var(--uw-bad-ink)}
.uw-pill--idle{background:var(--uw-idle-bg);color:var(--uw-idle-ink)}

/* ---- kredit chip ---- */
.uw-credit{display:inline-flex;align-items:center;gap:8px;background:var(--uw-charcoal);color:var(--uw-paper);
  border-radius:999px;padding:7px 14px;font-family:var(--uw-disp);font-weight:600;font-size:13px}
.uw-credit b{color:var(--uw-moon)}

/* ---- formuláře ---- */
.uw-label{display:block;font-size:12.5px;font-weight:600;color:var(--uw-muted);margin:0 0 6px;font-family:var(--uw-disp)}
.uw-field{display:block;width:100%;max-width:100%;background:var(--uw-surface);border:1px solid var(--uw-line);border-radius:var(--uw-r-sm);
  padding:10px 12px;font-size:14px;line-height:1.4;color:var(--uw-ink);font-family:var(--uw-body);outline:none;transition:border-color .14s,box-shadow .14s}
.uw-field:focus{border-color:var(--uw-signal);box-shadow:0 0 0 3px var(--uw-signal-soft)}
/* select: vlastní šipka (nativní bývá nacpaná u kraje), místo na ni vpravo */
select.uw-field{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:38px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6253' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
textarea.uw-field{min-height:90px;resize:vertical}
.uw-seg{display:inline-flex;background:var(--uw-paper-2);border-radius:999px;padding:3px;gap:3px}
.uw-seg input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.uw-seg label{font-family:var(--uw-disp);font-weight:600;font-size:13px;color:var(--uw-muted);
  padding:7px 16px;border-radius:999px;cursor:pointer;transition:background .12s,color .12s;white-space:nowrap}
.uw-seg label:hover{color:var(--uw-ink)}
.uw-seg input:checked + label{background:var(--uw-surface);color:var(--uw-ink);box-shadow:0 1px 3px rgba(74,46,12,.12)}
.uw-seg input:focus-visible + label{box-shadow:0 0 0 3px var(--uw-signal-soft)}

/* ---- mini sloupcový graf ---- */
.uw-bars{display:flex;align-items:flex-end;gap:5px;height:60px}
.uw-bars i{flex:1;background:var(--uw-line);border-radius:3px 3px 0 0;display:block}
.uw-bars i.hot{background:var(--uw-signal)}

/* ---- prázdný stav ---- */
.uw-empty{text-align:center;padding:36px 20px;border:1.5px dashed var(--uw-line);border-radius:var(--uw-r-lg);background:var(--uw-paper-2)}
.uw-empty .em{font-family:var(--uw-serif);font-style:italic;font-size:19px;color:var(--uw-ink)}
.uw-empty p{color:var(--uw-muted);font-size:14px;margin:6px 0 16px}

/* ---- vlčí značka (měsíc + hlava) ---- */
.uw-mark{width:30px;height:30px;flex:none}
.uw-mark .moon{fill:none;stroke:var(--uw-moon);stroke-width:1.4}
.uw-mark .wolf{fill:var(--uw-ink)} .uw-mark .eye{fill:var(--uw-paper)}