/* =======================================================================================
   REPORTER — styles2.css (DARK ONLY, FULLY REFACTORED)
   ======================================================================================= */
/* ===== 1) Imports ===== */
@import url("./variables.css") layer(tokens);
@import url("./background.css");
@import url("./buttons.css");

/* ===== 2) Reset / base ===== */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; font-synthesis-weight:none; }
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1000px 700px at 50% -10%, #0e1a32, transparent 70%),
    var(--bg);
  font:400 16px/1.55 system-ui,-apple-system,"Inter","Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:inherit; text-decoration:none; }
img,svg,video{ max-width:100%; height:auto; display:block; }
code,kbd,samp{ font-family:var(--mono); }
.container{ width:min(1200px,100%); margin-inline:auto; padding-inline:var(--pad-x); }

/* =======================================================================================
   3) Topbar
   ======================================================================================= */
.topbar{
  position:sticky; top:0; z-index:50; height:var(--topbar-h);
  background: rgba(9,14,26,.75);
  border-bottom:var(--bd);
  backdrop-filter: blur(8px);
}
.topbar-wrap{
  height:100%; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-inline:var(--pad-x);
}
.brand{ font-weight:900; letter-spacing:.02em; display:inline-flex; align-items:center; gap:10px; }
.brand::after{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--accent-2);
  box-shadow:0 0 14px color-mix(in oklab, var(--accent-2) 80%, transparent);
}
.nav{ display:flex; gap:18px; align-items:center; }
.nav a{
  opacity:.9; padding:10px 12px; border-radius:12px; border:1px solid transparent;
  transition:color var(--t-mid), border-color var(--t-mid), transform var(--t-mid), opacity var(--t-mid);
}
.nav a:hover{ opacity:1; border-color:var(--line); }
.nav a.active{ border-color:color-mix(in oklab, var(--accent-2) 35%, var(--line)); }
.nav-toggle,.nav-burger{ display:none; }

@media (max-width:860px){
  .nav-burger{
    display:grid; place-items:center; width:42px; height:42px; border-radius:12px; cursor:pointer;
    border:var(--bd); background:rgba(255,255,255,.03);
  }
  .nav{
    position:absolute; left:0; right:0; top:var(--topbar-h);
    display:grid; gap:8px; padding:12px var(--pad-x);
    background:rgba(9,14,26,.85); border-bottom:var(--bd);
    backdrop-filter:blur(8px);
    transform-origin:top; transform:scaleY(0); opacity:0; pointer-events:none;
  }
  .nav-toggle:checked ~ .nav{ transform:scaleY(1); opacity:1; pointer-events:auto; }
}


/* =======================================================================================
   5) Typography
   ======================================================================================= */
.eyebrow{
  display:inline-block; padding:6px 10px; border-radius:var(--r-pill);
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  background:var(--glass-weak); border:var(--bd);
}
.title{
  margin:.25rem 0 .2rem; font-weight:900; letter-spacing:-.01em;
  font-size: clamp(30px,4.8vw,46px); line-height:1.06;
}
.title .accent{
  background: var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 8px 24px rgba(124,58,237,.22);
}
.sub{ margin:.35rem 0 0; color:var(--muted); }
.sublead{ margin:.2rem 0 0; color:var(--muted); font-size: clamp(14px,1.6vw,16px); }

/* =======================================================================================
   6) Hero sections
   ======================================================================================= */

.page-title-wrap{ margin-top: clamp(40px, 14vh, 160px); text-align:center; display:grid; gap:12px; justify-items:center; }
.page-title{
  margin:.2rem 0 .15rem; font-weight:900; letter-spacing:-.02em;
  font-size:clamp(44px,8.5vw,92px); line-height:1.02;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 12px 40px rgba(124,58,237,.28);
}
.page-lead{ max-width:72ch; color:var(--muted); font-size:clamp(16px,2vw,20px); }
.page-cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }


/* =======================================================================================
   7) Cards
   ======================================================================================= */
/* Shared base for glass & surface */
.card-glass, .card-surface{
  position:relative;
  border-radius:var(--r-lg);
  border:var(--bd);
  box-shadow:var(--sh-card);
  transition:transform var(--t-slow), box-shadow var(--t-slow), border-color var(--t-slow);
}
.card-glass{ padding:clamp(20px,2.2vw,28px); background:var(--glass-strong); }
.card-surface{
  padding: clamp(16px, 1.8vw, 22px);
  background: var(--glass);
  display:flex; flex-direction:column; gap:10px;
}
.card-glass:hover,
.card-surface:hover{
  transform:translateY(-2px);
  border-color:color-mix(in oklab, var(--accent-2) 28%, var(--line));
  box-shadow:var(--sh-card-hover);
}
.card-glass.wide{ width:min(1180px,100%); margin-inline:auto; border-radius:22px; }

/* Landing cards row */
.cards-row{
  margin-top:clamp(28px,7vh,60px);
  display:grid; gap:clamp(14px,2vw,22px);
  grid-template-columns: repeat(3, minmax(320px,1fr));
  width:100%; align-items:stretch;
}
.cards-row > :is(.card-neo, .card-glass, .card-surface){ display:flex; flex-direction:column; min-height:260px; }
.cards-row > :is(.card-neo, .card-glass, .card-surface) .card-foot-note{ margin-top:auto; }
@media (max-width:1000px){ .cards-row{ grid-template-columns:1fr; } }

/* Small card bits */
.card-head{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.card-tag{
  display:inline-block; padding:4px 10px; border-radius:var(--r-pill);
  font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--muted);
  background:var(--glass-weak); border:var(--bd);
}
.card-title{ margin:0; font-size:22px; font-weight:900; letter-spacing:.005em; }
.card-foot-note{ margin-top:12px; }

/* Lists inside cards */
.legend-list,.bullets{ margin:.5rem 0 0; padding-left:18px; color:var(--muted); }
.legend-list li + li,.bullets li + li{ margin-top:6px; }
code.mono{ font-size:12.5px; padding:2px 6px; border-radius:8px; border:var(--bd); background:rgba(255,255,255,.04); }

/* Status/Badge/Chip – unified base */
.badge, .chip, .status, .chip-today{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:var(--r-pill);
  font-weight:800; font-size:12px;
  border:var(--bd); background:rgba(255,255,255,.04); color:var(--text);
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset;
}
.status.sm{ padding:6px 10px; }
.status.ok, .chip.ok, .chip-today.ok{   border-color:color-mix(in oklab,var(--ok)   55%, var(--line)); background: color-mix(in oklab, var(--ok) 18%, transparent); }
.status.fail, .chip.fail{ border-color:color-mix(in oklab,var(--fail) 55%, var(--line)); background: color-mix(in oklab, var(--fail) 18%, transparent); }
.status.skip, .chip.skip, .chip-today.zero{ border-color:color-mix(in oklab,var(--skip) 55%, var(--line)); background: color-mix(in oklab, var(--skip) 16%, transparent); }
.badge-web{     border-color:color-mix(in oklab,#60a5fa 45%, var(--line)); }
.badge-e2e{     border-color:color-mix(in oklab,#a78bfa 45%, var(--line)); }
.badge-private{ border-color:color-mix(in oklab,#ef4444 45%, var(--line)); }
.badge-link{    border-color:color-mix(in oklab,#f59e0b 45%, var(--line)); }
.badge-public{  border-color:color-mix(in oklab,#22c55e 45%, var(--line)); }

/* =======================================================================================
   8) Admin – Projects list (toolbar, KPI, table)
   ======================================================================================= */
.header-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:12px; }

.admin-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:14px;
  padding:10px; border-radius:14px;
  background: var(--glass);
  border:var(--bd);
}
@media (max-width:800px){ .admin-toolbar{ flex-direction:column; align-items:stretch; } }

.search{ position:relative; flex:1 1 auto; display:flex; align-items:center; gap:8px; }
.search input{
  width:100%; padding:12px 14px; border-radius:12px; border:var(--bd);
  background: rgba(255,255,255,.03); color:var(--text); font:inherit;
  transition:border-color var(--t-mid), box-shadow var(--t-mid), background var(--t-mid);
}
.search input::placeholder{ color: color-mix(in oklab, var(--muted) 70%, white); }
.search input:focus{
  outline:2px solid var(--focus); outline-offset:2px;
  border-color: color-mix(in oklab, var(--accent-2) 35%, var(--line));
  background: rgba(255,255,255,.045);
  box-shadow: 0 0 0 3px rgba(34,211,238,.12);
}

/* KPI mini-cards */
.kpis{ margin-top:12px; display:grid; gap:12px; grid-template-columns: repeat(3, minmax(160px,1fr)); }
@media (max-width:900px){ .kpis{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .kpis{ grid-template-columns: 1fr; } }
.kpi{
  border:var(--bd); border-radius:14px;
  background: var(--glass);
  padding:12px 14px; box-shadow: var(--sh-soft-inset);
  display:grid; gap:4px; align-content:start;
}
.kpi .kpi-label{ color:var(--muted); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.kpi .kpi-value{ font-weight:900; font-size:20px; letter-spacing:.01em; }

/* Table */
.table-wrap{
  width:100%; overflow:auto; border-radius:16px; border:var(--bd);
  background: var(--glass);
  box-shadow: var(--sh-soft-inset); margin-top:14px;
}
.table{ width:100%; border-collapse:separate; border-spacing:0; font-size:15px; }
.table.nice thead th{
  position:sticky; top:0; z-index:1; text-align:left; padding:12px 14px;
  background: rgba(11,17,34,.86); border-bottom:var(--bd);
  backdrop-filter:blur(6px); font-weight:800; letter-spacing:.02em;
}
.table.nice tbody td{ padding:12px 14px; vertical-align:middle; border-top:1px solid rgba(255,255,255,.06); }
.table.nice tbody tr:nth-child(even){ background:rgba(255,255,255,.02); }
.table.nice tbody tr{ transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.table.nice tbody tr:hover{ background: rgba(34,211,238,.06); box-shadow: inset 3px 0 0 color-mix(in oklab, var(--accent-2) 50%, transparent); }

/* Cells */
.cell-name .name{ font-weight:800; }
.cell-name .desc{ color:var(--muted); font-size:13px; margin-top:4px; max-width:520px; }
.cell-date{ font-family:var(--mono); white-space:nowrap; }
.cell-logo .logo{
  width:42px; height:42px; object-fit:cover; border-radius:10px;
  background: rgba(255,255,255,.06); border:var(--bd);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}
.cell-logo .logo.placeholder{
  display:grid; place-items:center; color:var(--muted); font-weight:800;
  width:42px; height:42px; border-radius:10px; border:var(--bd); background: rgba(255,255,255,.04);
}

/* Misc */
.col-actions{ width:1%; white-space:nowrap; }
.actions{ display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.empty{ padding:18px; margin-top:14px; text-align:center; border:1px dashed var(--line); border-radius:16px; color:var(--muted); }

/* =======================================================================================
   9) Forms / Flash
   ======================================================================================= */
.form{ display:grid; gap:16px; }
.form-row{ display:flex; flex-direction:column; gap:8px; }
.form-row label{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }

.input{
  width:100%; min-height:46px; padding:10px 12px; border-radius:12px; font:inherit; color:var(--text);
  background: var(--glass-weak);
  border:var(--bd); box-shadow: var(--sh-soft-inset);
  transition: border-color var(--t-mid), box-shadow var(--t-mid);
}
.input::placeholder{ color: color-mix(in oklab, var(--muted) 70%, transparent); }
.input:focus{
  outline:2px solid var(--focus); outline-offset:2px;
  border-color: color-mix(in oklab, var(--accent-2) 35%, var(--line));
  box-shadow: 0 0 0 3px rgba(34,211,238,.12);
}

/* jednotný vzhled vstupů přes :is */
.form :is(input[type="text"], input[type="password"], input[type="email"], input[type="file"], select, textarea){
  width:100%; min-height:46px; padding:10px 12px; border-radius:12px; font:inherit; color:var(--text);
  background: var(--glass-weak);
  border:var(--bd); box-shadow: var(--sh-soft-inset);
  transition: border-color var(--t-mid), box-shadow var(--t-mid), background var(--t-mid);
}
.form textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.form select{ cursor:pointer; }
.form :is(input, select, textarea):hover{ background: color-mix(in oklab, var(--surface) 92%, transparent); }
.form :is(input, select, textarea):focus{
  outline:2px solid var(--focus); outline-offset:2px;
  border-color: color-mix(in oklab, var(--accent-2) 35%, var(--line));
  box-shadow: 0 0 0 3px rgba(34,211,238,.12);
}

/* File input */
.form input[type="file"]{ padding:8px 12px; }
.form input[type="file"]::file-selector-button{
  margin-right:10px; padding:8px 12px; cursor:pointer;
  border-radius:10px; border:var(--bd);
  background:rgba(255,255,255,.04); color:var(--text);
  transition: border-color var(--t-mid), transform var(--t-mid);
}
.form input[type="file"]::file-selector-button:hover{
  border-color: color-mix(in oklab, var(--accent-2) 40%, var(--line));
  transform: translateY(-1px);
}

/* Flash */
.flash{
  margin:10px 0 8px; padding:10px 12px; border-radius:12px;
  border:var(--bd); background: rgba(255,255,255,.04); color: var(--text);
}
.flash.success{ border-color: color-mix(in oklab, var(--ok) 45%, var(--line)); box-shadow: inset 0 1px 0 rgba(34,197,94,.15); }
.flash.error{   border-color: color-mix(in oklab, var(--fail) 45%, var(--line)); box-shadow: inset 0 1px 0 rgba(239,68,68,.15); }

/* Eye toggle */
.input-wrap{ position:relative; }
.input-wrap .eye-btn{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  border:var(--bd); border-radius:10px; background:rgba(255,255,255,.04);
  font:inherit; font-size:12px; padding:4px 8px; color:var(--muted); cursor:pointer;
}
.input-wrap .eye-btn:hover{ border-color: color-mix(in oklab, var(--accent-2) 35%, var(--line)); color: var(--text); }

/* =======================================================================================
   10) Project detail (public)
   ======================================================================================= */
.project-head{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:18px 20px; border:var(--bd);
  border-radius:16px; background:var(--glass-strong);
  box-shadow:0 14px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
  margin-bottom: clamp(22px, 3vw, 36px);
}
.project-meta{ display:flex; align-items:center; gap:14px; }
.project-logo{
  width:48px; height:48px; border-radius:12px; object-fit:cover;
  border:var(--bd); background:rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.project-logo.placeholder{ display:grid; place-items:center; font-weight:900; color:var(--muted); }
.project-title{
  margin:.1rem 0 2px; font-weight:900; letter-spacing:-.01em; font-size: clamp(26px, 4.5vw, 40px);
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 8px 26px rgba(124,58,237,.20);
}
.project-sub{ margin:0; color:var(--muted); }

/* Sections & sequences (public) */
.grid-sections{ margin-top: 16px; display:grid; grid-template-columns: repeat(auto-fill, minmax(320px,1fr)); gap: clamp(12px, 2vw, 18px); }
.card-sub{ margin:0; color:var(--muted); font-size:14px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pill{
  display:inline-block; padding:8px 12px; border-radius:var(--r-pill);
  border:var(--bd); background: rgba(255,255,255,.03);
  font-weight:700; font-size:13px; transition: transform var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.pill:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--accent-2) 30%, var(--line)); background: rgba(255,255,255,.05); }
.card-empty{ color:var(--muted); padding: 10px 0; border-radius: 10px; }

/* Row list */
.seq-list{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.seq-item{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:14px;
  padding:12px 12px 12px 14px; border:var(--bd); border-radius:12px;
  background: rgba(255,255,255,.03); transition: transform var(--t-mid), border-color var(--t-mid), background-color var(--t-mid), box-shadow var(--t-mid);
}
.seq-item:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--accent-2) 26%, var(--line));
  background: rgba(255,255,255,.045); box-shadow: 0 10px 26px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.05);
}
.seq-main{ display:flex; gap:10px; align-items:flex-start; min-width:0; }
.seq-dot{ flex:0 0 10px; height:10px; border-radius:50%; background: radial-gradient(circle at 40% 40%, #8b5cf6 0%, #06b6d4 90%); margin-top:6px; box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset; }
.seq-text{ min-width:0; }
.seq-name{ font-weight:800; line-height:1.25; }
.seq-desc{ margin:2px 0 0; color:var(--muted); font-size:13.5px; line-height:1.5; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; }

/* Grid of “seq cards” */
.seq-grid{ display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items:stretch; }
.seq-card{
  border:var(--bd); border-radius:14px; padding:12px;
  background: var(--glass-weak);
  box-shadow: var(--sh-soft-inset);
  transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
  display:flex; flex-direction:column; gap:10px; align-content:start; min-height:120px;
}
.seq-card:hover{ transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent-2) 30%, var(--line)); box-shadow: 0 14px 26px rgba(0,0,0,.28); }
.seq-title{ font-weight:800; line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height: calc(1.25em * 2); }
.seq-title::before{
  content:""; display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:1px;
  background: radial-gradient(circle at 30% 30%, #34d399 0%, #22d3ee 100%); box-shadow: 0 0 10px rgba(34,211,238,.6);
}
.seq-desc{ color:var(--muted); font-size:14px; margin:0; line-height:1.4; display:-webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow:hidden; min-height: calc(1.4em * 2); }

@media (max-width:720px){
  .seq-item{ grid-template-columns: 1fr; }
  .btn-cta{ justify-self:start; }
}

/* =======================================================================================
   11) Admin – Suites & Sequences
   ======================================================================================= */
.grid-cards{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: clamp(14px, 2vw, 18px);
}
.suite-card{
  border:var(--bd);
  border-radius:16px;
  background: var(--glass);
  box-shadow: 0 14px 28px rgba(0,0,0,.26), var(--sh-soft-inset);
  padding: clamp(14px,1.8vw,18px);
  transition: transform var(--t-mid) ease, border-color var(--t-mid) ease, box-shadow var(--t-mid) ease;
}
.suite-card:hover{
  transform: translateY(-1px);
  border-color: color-mix(in oklab, var(--accent-2) 28%, var(--line));
  box-shadow: 0 18px 36px rgba(0,0,0,.32);
}
.suite-card__head{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:10px;
}
.suite-chip{
  font-size:11px; padding:4px 8px; border-radius:var(--r-pill); border:var(--bd);
  background:rgba(255,255,255,.04); color:var(--muted); font-weight:800; letter-spacing:.06em;
}
.suite-chip.thin{ opacity:.9; font-weight:700; }
.suite-title{ margin:.2rem 0 0; font-size:20px; font-weight:900; letter-spacing:.005em; line-height:1.2; }

.child-grid{ display:grid; gap:12px; grid-template-columns: 1fr; }
.child-card{
  border:var(--bd); border-radius:14px; background: var(--glass-weak);
  box-shadow: var(--sh-soft-inset); transition: transform var(--t-mid) ease, border-color var(--t-mid) ease, box-shadow var(--t-mid) ease;
  padding: 12px; display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "head   meta"
    "desc   meta"
    "drop   drop"
    "acts   acts";
  gap: 8px 12px; align-content:start;
}
.child-card:hover{ transform: translateY(-1px); border-color: color-mix(in oklab, var(--accent-2) 30%, var(--line)); box-shadow: 0 12px 26px rgba(0,0,0,.24); }
.child-head{ grid-area: head; display:flex; align-items:center; gap:8px; }
.child-title{ font-weight:800; }
.child-desc{ grid-area: desc; color:var(--muted); font-size:14px; margin:0; }
.child-meta{ grid-area: meta; justify-self:end; align-self:start; }
.child-actions{ grid-area: acts; display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.quick-upload{ grid-area: drop; }

/* Meta badge */
.badge.dim{
  padding:5px 10px; color:var(--muted);
  font-weight:700; font-size:12px; letter-spacing:.03em;
}
.badge.dim b{ color:var(--text); font-family:var(--mono); }

/* Drop-zone */
.dropzone{
  position:relative; border-radius:12px;
  padding:14px; text-align:center; cursor:pointer;
  border:2px dashed color-mix(in oklab, var(--accent-2) 26%, var(--line));
  background: rgba(255,255,255,.03);
  transition: border-color var(--t-mid), background-color var(--t-mid), box-shadow var(--t-mid), transform var(--t-fast);
  outline:none;
}
.dropzone:hover{ transform: translateY(-1px); }
.dropzone:focus-visible{
  box-shadow: 0 0 0 3px rgba(34,211,238,.12);
  border-color: color-mix(in oklab, var(--accent-2) 50%, var(--line));
}
.dropzone.is-dragover{
  background: rgba(34,211,238,.08);
  border-color: color-mix(in oklab, var(--accent-2) 70%, var(--line));
  box-shadow: 0 12px 28px rgba(6,182,212,.22);
}
.dz-icon{
  width:34px; height:34px; margin:0 auto 6px; border-radius:10px;
  display:grid; place-items:center;
  background: radial-gradient(circle at 30% 30%, #8b5cf6 0%, #06b6d4 90%);
  color:#041a16; font-weight:900;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.dz-title{ font-weight:900; }
.dz-sub{ color:var(--muted); font-size:12.5px; }

@media (max-width: 720px){
  .child-card{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "meta"
      "desc"
      "drop"
      "acts";
  }
  .child-meta{ justify-self:start; }
}

/* =======================================================================================
   12) Access/Login cards
   ======================================================================================= */
.card-glass.access,
.card-glass.auth{
  width:min(560px,100%);
  border-radius:20px;
  padding:clamp(22px, 2.2vw, 28px);
}
.card-glass :is(.eyebrow,.title,.sub){ margin-top:0; }
.card-glass .eyebrow{ margin-bottom:6px; }
.card-glass .sub{ color:var(--muted); }

/* =======================================================================================
   13) Utilities
   ======================================================================================= */
.text-muted{ color:var(--muted); }
.small{ font-size:13px; }
.mono{ font-family:var(--mono); }
.ellip{ max-width: 100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* =======================================================================================
   14) ADMIN — Create/Edit forms & extras
   ======================================================================================= */
.card-glass.narrow{ width:min(880px,100%); }
.form{ display:grid; gap:16px; margin-top:18px; }
.form-row{ display:flex; flex-direction:column; gap:8px; }
.form-row label{ font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }

.card-glass.wide .sub code{
  display:inline-block; padding:2px 6px; border-radius:8px;
  border:var(--bd); background:rgba(255,255,255,.04);
  font: 600 12.5px var(--mono);
}
.form.grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.form.grid-2 .span-2{ grid-column: 1 / -1; }
@media (max-width: 900px){ .form.grid-2{ grid-template-columns:1fr; } }

.checkbox{ display:flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.checkbox input[type="checkbox"]{
  appearance:none; width:18px; height:18px; border-radius:6px;
  border:var(--bd); background:rgba(255,255,255,.03);
  display:grid; place-content:center; transition:border-color var(--t-mid), background-color var(--t-mid);
}
.checkbox input[type="checkbox"]:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
  border-color: color-mix(in oklab, var(--accent-2) 35%, var(--line));
}
.checkbox input[type="checkbox"]:checked{
  background: linear-gradient(180deg,#2df6c6,#15e0be);
  border-color: transparent;
}
.checkbox span{ color:var(--text); }

.logo.preview{
  width:48px; height:48px; object-fit:cover; border-radius:10px;
  border:var(--bd); background:rgba(255,255,255,.06);
  box-shadow: var(--sh-soft-inset);
}
.logo.preview.placeholder{ display:grid; place-items:center; color:var(--muted); font-weight:800; }
.form #logo + .hint{ margin-top:6px; }
.form.grid-2 .cta-row{ margin-top: 6px; }

.card-glass.wide form[action*="projects_delete"]{
  margin-top:14px; padding-top:12px;
  border-top:1px dashed var(--line);
  display:flex; justify-content:flex-end;
}
.card-glass.wide form[action*="projects_delete"] .btn{ border-color:rgba(255,107,107,.45); color:#ff9f9f; }
.card-glass.wide form[action*="projects_delete"] .btn:hover{ color:#fff; border-color:#ff6b6b; }

.cell-logo .logo{ width:48px; height:48px; border-radius:10px; }


/* ===== ADMIN — Sady v3 (tiles) ===== */
.admin-suites .card-glass.wide{ width:min(1600px, 100%); border-radius:20px; overflow:hidden; }
.admin-suites .board-sections{ display:grid; gap:18px; grid-template-columns: repeat(1, minmax(0,1fr)); align-items:start; }
@media (min-width: 1100px){ .admin-suites .board-sections{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1500px){ .admin-suites .board-sections{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1880px){ .admin-suites .board-sections{ grid-template-columns: repeat(4, minmax(0,1fr)); } }

.admin-suites .suite-card{ min-width:0; border:var(--bd); border-radius:16px; background: var(--glass); box-shadow: 0 14px 28px rgba(0,0,0,.26), var(--sh-soft-inset); padding:16px; }
.admin-suites .suite-card__head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:8px; min-width:0; }
.admin-suites .suite-hgroup{ min-width:0; }
.admin-suites .suite-title{ margin:.25rem 0 0; font-size:20px; font-weight:900; letter-spacing:.005em; line-height:1.2; }
.admin-suites .suite-desc{ margin:4px 0 12px; color:var(--muted); }

.admin-suites .tiles{ display:grid; gap:12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items:stretch; min-width:0; }
.admin-suites .tile{
  min-width:0; border:var(--bd); border-radius:14px; background: var(--glass-weak);
  box-shadow: var(--sh-soft-inset); display:flex; flex-direction:column; gap:10px; padding:12px;
}
.admin-suites .tile-head{ display:flex; align-items:center; gap:8px; min-width:0; }
.admin-suites .tile-title{ font-weight:800; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-suites .tile-desc{ color:var(--muted); margin:0; }

/* Dropzóna v tiles */
.admin-suites .dropzone{ width:100%; min-height:120px; }
.admin-suites .dropzone:hover{ transform: translateY(-1px); }
.admin-suites .dropzone.is-dragover{ background: rgba(34,211,238,.08); border-color: color-mix(in oklab, var(--accent-2) 70%, var(--line)); box-shadow: 0 12px 28px rgba(6,182,212,.22); }
.admin-suites .dz-icon{ width:34px; height:34px; margin:0 auto 6px; border-radius:10px; display:grid; place-items:center; background: radial-gradient(circle at 30% 30%, #8b5cf6 0%, #06b6d4 90%); color:#041a16; font-weight:900; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.admin-suites .dz-title{ font-weight:900; }
.admin-suites .dz-sub{ color:var(--muted); font-size:12.5px; }

.admin-suites .tile-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.admin-suites .badge.dim{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-suites .tile-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.admin-suites .admin-meta{ display:flex; align-items:center; gap:14px; min-width:0; }
.admin-suites .admin-meta .meta-text{ min-width:0; }

/* =======================================================================================
   16) Runs list
   ======================================================================================= */
.runs-page{ padding: clamp(16px,1.8vw,22px); }

.runs-toolbar{
  margin: 8px 0 12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.runs-toolbar input[type="search"]{
  width:min(420px,100%);
  padding:10px 12px; border-radius:12px; border:var(--bd);
  background: rgba(255,255,255,.03); color:var(--text); font:inherit;
}
.runs-toolbar input[type="search"]::placeholder{ color:color-mix(in oklab, var(--muted) 70%, white); }
.runs-toolbar input[type="search"]:focus{
  outline:2px solid var(--focus); outline-offset:2px;
  border-color: color-mix(in oklab, var(--accent-2) 35%, var(--line));
  box-shadow: 0 0 0 3px rgba(34,211,238,.12);
}

/* tabulka běhů – kompaktnější */
.runs-table{ font-size:15px; }
.runs-table thead th{ white-space:nowrap; }
.runs-table tbody tr{ transition: background var(--t-fast), box-shadow var(--t-fast); }
.runs-table tbody tr:hover{
  background: rgba(34,211,238,.06);
  box-shadow: inset 3px 0 0 color-mix(in oklab, var(--accent-2) 50%, transparent);
}

/* buňky & souhrn */
.cell-file code{ display:block; }
.run-chips{ margin-top:6px; display:flex; flex-wrap:wrap; gap:6px; }

.runs-table .ellip{ max-width: 520px; }
.runs-table .cell-file .ellip{ max-width: 380px; }

.runs-table .cell-stats .stats{ display:grid; gap:6px; }
.runs-table .statsbar{
  height:8px; border-radius:var(--r-pill);
  background:
    linear-gradient(to right,
      var(--ok,  #22c55e) 0%,
      var(--ok,  #22c55e) calc(var(--okp) * 1%),
      var(--fail,#ef4444) calc(var(--okp) * 1%),
      var(--fail,#ef4444) calc((var(--okp) + var(--failp)) * 1%),
      var(--skip,#94a3b8) calc((var(--okp) + var(--failp)) * 1%),
      var(--skip,#94a3b8) 100%
    );
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.runs-table .statsline{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  font-size:13px; color:var(--muted);
}
.runs-table .statsline .ok   { color: color-mix(in oklab, var(--ok)   80%, white); }
.runs-table .statsline .fail { color: color-mix(in oklab, var(--fail) 80%, white); }
.runs-table .statsline .skip { color: color-mix(in oklab, var(--skip) 80%, white); }
.runs-table .statsline .dur  { margin-left:auto; opacity:.9; }

/* Overview cards & mini-list */
.overview-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; margin-bottom:18px; }
@media (max-width: 980px){ .overview-grid{ grid-template-columns: 1fr; } }
.mini-list{ margin:6px 0 0; padding-left:18px; color:var(--muted); }
.mini-list li + li{ margin-top:4px; }

/* Shrnovací bar */
.summarybar{
  height:10px; border-radius:var(--r-pill);
  background:
    linear-gradient(to right,
      #22c55e 0%,
      #22c55e calc(var(--okp) * 1%),
      #ef4444 calc(var(--okp) * 1%),
      #ef4444 calc((var(--okp) + var(--failp)) * 1%),
      #94a3b8 calc((var(--okp) + var(--failp)) * 1%),
      #94a3b8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09);
}
.stats{ display:grid; gap:8px; }
.statsline{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.statsline .chip{ padding:6px 10px; }
.statsline :is(.ok,.fail,.skip){ color:inherit; }

/* Report groups */
.report-groups{ display:grid; gap:14px; }
.rg-card details{ border:var(--bd); border-radius:14px; background:rgba(255,255,255,.03); }
.rg-card details > summary { cursor: pointer; user-select: none; list-style: none; }
.rg-card details > summary::-webkit-details-marker { display: none; }

.rg-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:12px 14px; border-radius:12px;
  border:var(--bd); background:rgba(255,255,255,.03);
}
.rg-title{ display:flex; align-items:center; gap:8px; font-weight:900; }
.rg-caret{ display:inline-block; width:10px; transform:rotate(0deg); transition:transform var(--t-mid); }
.rg-card details[open] .rg-caret{ transform:rotate(90deg); }

.rg-meta{ display:flex; gap:8px; flex-wrap:wrap; }
.rg-bar{ padding:0 14px 10px; }

/* CSV button */
.btn-file{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:12px;
  font-weight:800;
  background:rgba(255,255,255,.04);
  border:var(--bd);
  box-shadow: var(--sh-soft-inset);
  transition: transform var(--t-mid), box-shadow var(--t-mid), background var(--t-mid), border-color var(--t-mid), color var(--t-mid);
}
.btn-file .ic{ font:inherit; line-height:1; }
.btn-file:hover{
  transform:translateY(-1px);
  color:#06221c;
  background:linear-gradient(180deg,#2df6c6,#15e0be);
  border-color:transparent;
  box-shadow:0 12px 28px rgba(45,246,198,.24), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Colored table rows in report */
.table.report tbody tr{ transition: background var(--t-fast), border-color var(--t-fast); border-left:3px solid transparent; }
.table.report tbody tr:hover{ background: rgba(255,255,255,.02); }
.table.report tbody tr.is-ok{   border-left-color: color-mix(in oklab, #22c55e 60%, var(--line)); background: rgba(34,197,94,.05); }
.table.report tbody tr.is-fail{ border-left-color: color-mix(in oklab, #ef4444 60%, var(--line)); background: rgba(239,68,68,.06); }
.table.report tbody tr.is-skip{ border-left-color: color-mix(in oklab, #94a3b8 60%, var(--line)); background: rgba(148,163,184,.06); }

.cell-status .status.tag{ padding:6px 10px; }

/* layout bits */
.th-status{ width:1%; white-space:nowrap; }
.th-right, .cell-num{ text-align:right; white-space:nowrap; }
.cell-test{ width:60%; }

/* =======================================================================================
   17) Project page (public)
   ======================================================================================= */
.project-page .project-wrap{ width: min(1600px, 100%); margin-inline: auto; display: grid; gap: 16px; }
.sections-grid{ display: grid; gap: 16px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 1100px){ .sections-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1500px){ .sections-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.section-card{ display: grid; gap: 10px; align-content: start; background: var(--glass); border: var(--bd); box-shadow: 0 14px 32px rgba(0,0,0,.30), var(--sh-soft-inset); }
.section-card:hover{
  border-color: color-mix(in oklab, var(--accent-2) 26%, var(--line));
  box-shadow: 0 18px 40px rgba(0,0,0,.36),
              0 0 0 1px color-mix(in oklab, var(--accent-2) 14%, transparent) inset,
              inset 0 1px 0 rgba(255,255,255,.05);
}
.section-head{ display: grid; gap: 6px; }
.section-title{
  margin: .1rem 0 0; font-weight: 900; letter-spacing: -.01em; font-size: clamp(20px, 3vw, 26px);
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 6px 18px rgba(124,58,237,.18);
}
.section-desc{ margin: 0; color: var(--muted); }
.section-card .seq-grid{ margin-top: 6px; }
.section-card .seq-card{ min-height: 120px; }
.project-card{ padding: clamp(18px, 2.2vw, 24px); }
.seq-desc{ line-height: 1.5; }

/* =======================================================================================
   18) Tree table
   ======================================================================================= */
.tree-table .group-row { background: rgba(255,255,255,.02); font-weight: 800; }
.tree-table .group-row:hover { background: rgba(34,211,238,.06); box-shadow: inset 3px 0 0 color-mix(in oklab, var(--accent-2) 40%, transparent); }
.tree-table .group-toggle{
  appearance:none; border:var(--bd); background:rgba(255,255,255,.04);
  color:var(--text); font:inherit; font-weight:900; line-height:1;
  width:28px; height:28px; border-radius:8px; margin-right:8px; cursor:pointer;
}
.tree-table .child-row .child-name{ display:flex; align-items:center; gap:10px; }
.tree-table .child-row .dot{
  width:8px; height:8px; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, #8b5cf6 0%, #06b6d4 90%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.05) inset;
}
.tree-table .empty-note td{ font-style:italic; }

/* =======================================================================================
   19) Neon cards (visual variants)
   ======================================================================================= */
.card-glow{
  position: relative;
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  border-color: color-mix(in oklab, var(--accent-2) 14%, var(--line));
  box-shadow:
    0 18px 48px rgba(0,0,0,.38),
    0 0 0 1px color-mix(in oklab, var(--accent-2) 12%, transparent) inset,
    inset 0 1px 0 rgba(255,255,255,.05);
  overflow: hidden;
}
.card-glow::before{
  content:""; position:absolute; inset:-1px; border-radius: inherit;
  background:
    radial-gradient(800px 200px at 10% -10%, color-mix(in oklab, var(--accent-2) 14%, transparent), transparent 60%),
    radial-gradient(600px 160px at 110% 110%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%);
  pointer-events:none; filter: saturate(1.05); opacity:.9;
}
.card-glow:hover{
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--accent-2) 26%, var(--line));
  box-shadow:
    0 24px 60px rgba(0,0,0,.44),
    0 0 0 1px color-mix(in oklab, var(--accent-2) 18%, transparent) inset,
    inset 0 1px 0 rgba(255,255,255,.06);
}

/* Icons in titles */
.card-title{ display:flex; align-items:center; gap:10px; }
.ic-dot,.ic-grid,.ic-lock{
  width:22px; height:22px; border-radius:8px; flex:0 0 22px;
  background: radial-gradient(circle at 30% 30%, #8b5cf6 0%, #06b6d4 95%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 18px rgba(124,58,237,.28);
}
.ic-grid::after, .ic-lock::after{
  content:""; display:block; width:100%; height:100%; border-radius:8px;
  mask-size: cover; -webkit-mask-size: cover; background: rgba(0,0,0,.0);
}
.ic-grid{ position:relative; }
.ic-grid::after{
  -webkit-mask-image:
    radial-gradient(circle 3px at 25% 30%, #000 98%, transparent 100%),
    radial-gradient(circle 3px at 75% 30%, #000 98%, transparent 100%),
    radial-gradient(circle 3px at 25% 70%, #000 98%, transparent 100%),
    radial-gradient(circle 3px at 75% 70%, #000 98%, transparent 100%);
  background: color-mix(in oklab, #000 82%, transparent);
  opacity:.55;
}
.ic-lock{ position:relative; }
.ic-lock::after{
  -webkit-mask-image:
    radial-gradient(8px 7px at 50% 40%, #000 99%, transparent 100%),
    linear-gradient(#000 0 0);
  -webkit-mask-size: 18px 14px, 12px 9px;
  -webkit-mask-position: 50% 42%, 50% 70%;
  -webkit-mask-repeat: no-repeat;
  background: color-mix(in oklab, #000 82%, transparent);
  opacity:.55;
}

/* Soft bars */
.softbar{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; filter: saturate(1.1); }
.softnote{
  margin-top:12px; padding:8px 10px; border-radius:10px;
  border:1px solid color-mix(in oklab, var(--accent-2) 24%, var(--line));
  background: var(--glass-chip);
  box-shadow: var(--sh-soft-inset);
}
.card-glow .btn-chip{
  border-color: color-mix(in oklab, var(--accent-2) 55%, var(--line));
  filter: saturate(1.05);
}
.card-glow .btn-chip:hover{
  background: linear-gradient(180deg,#2df6c6,#15e0be);
  color:#041a16; border-color: transparent;
  box-shadow: 0 12px 26px rgba(45,246,198,.24), inset 0 1px 0 rgba(255,255,255,.35);
}

/* Pulse accent */
@keyframes pulseGlow{
  0%,100%{ filter: brightness(1) saturate(1); transform: translateZ(0); }
  50%{ filter: brightness(1.08) saturate(1.08); }
}
.card-glow :is(.ic-dot,.ic-grid,.ic-lock){
  animation: pulseGlow var(--dur, 1.5s) ease-in-out infinite;
  animation-delay: var(--stagger, .32s);
}

/* === Cards: NEON (harder outline variant) === */
.card-neo{
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  border: var(--bd-neo);
  box-shadow:
    0 22px 60px rgba(0,0,0,.45),
    0 0 0 1px color-mix(in oklab, var(--accent-2) 18%, transparent) inset,
    inset 0 1px 0 rgba(255,255,255,.06);
  transform-style: preserve-3d;
  overflow: hidden; position: relative;
}
.card-neo::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background: var(--grad);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.55; pointer-events:none; filter: saturate(1.2);
}
.card-neo::after{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:65%;
  background:
    radial-gradient(60% 100% at 80% -20%, color-mix(in oklab, var(--accent-2) 26%, transparent), transparent 60%),
    linear-gradient(105deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 40%);
  opacity:.45; pointer-events:none; transform: translateZ(0); mix-blend-mode: screen;
}
.card-neo:hover{
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--accent-2) 36%, var(--line));
  box-shadow:
    0 30px 72px rgba(0,0,0,.52),
    0 0 0 1px color-mix(in oklab, var(--accent-2) 22%, transparent) inset,
    0 0 28px color-mix(in oklab, var(--accent-2) 24%, transparent);
}
.card-neo .card-head{ margin-bottom: 12px; }
.card-neo .card-tag{
  border-color: color-mix(in oklab, var(--accent-2) 36%, var(--line));
  background: color-mix(in oklab, var(--surface) 78%, transparent);
  text-shadow: 0 0 18px color-mix(in oklab, var(--accent-2) 20%, transparent);
}
.card-neo .card-title{
  background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 10px 34px rgba(124,58,237,.30);
  letter-spacing: -.01em;
}
.card-neo :is(.legend-list,.bullets,p){ color: color-mix(in oklab, var(--text) 90%, #cfe8ff); }
.card-neo .softbar{
  margin-top:12px; display:flex; gap:8px; flex-wrap:wrap;
  background: color-mix(in oklab, var(--surface) 76%, transparent);
  border:1px solid color-mix(in oklab, var(--accent-2) 30%, var(--line));
  border-radius: 12px; padding:8px 10px;
  box-shadow: var(--sh-soft-inset);
}
.card-neo .softnote{
  border-color: color-mix(in oklab, var(--accent-2) 30%, var(--line));
  background: color-mix(in oklab, var(--surface) 76%, transparent);
}
.card-neo :is(.chip,.status){
  border-color: color-mix(in oklab, var(--accent-2) 40%, var(--line));
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 0 20px rgba(34,211,238,.12);
}
.card-neo :is(.status.ok){   border-color: color-mix(in oklab, var(--ok)   55%, var(--line)); }
.card-neo :is(.status.fail){ border-color: color-mix(in oklab, var(--fail) 55%, var(--line)); }
.card-neo :is(.status.skip){ border-color: color-mix(in oklab, var(--skip) 55%, var(--line)); }
.card-neo .btn-chip{
  border-color: color-mix(in oklab, var(--accent-2) 60%, var(--line));
  background: color-mix(in oklab, var(--surface) 70%, transparent);
}
.card-neo .btn-chip:hover{
  color:#041a16; background:linear-gradient(180deg,#2df6c6,#15e0be);
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(45,246,198,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.card-neo[data-hue="green"]  { filter: hue-rotate(-20deg) saturate(1.08); }
.card-neo[data-hue="cyan"]   { filter: hue-rotate(0deg)    saturate(1.10); }
.card-neo[data-hue="violet"] { filter: hue-rotate(22deg)    saturate(1.10); }


/* vyřízni oblast pod kartou */
.card-glass{
  position:relative;
  z-index:1;
}


/* =======================================================================================
   20) Project page v3 — sidebar + slab sections + row sequences (grid shield)
   ======================================================================================= */

/* Scéna (bez mřížky) + grid pod obsahem */
.project-hero{
  --scene-bg:
    radial-gradient(1200px 620px at 65% -15%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(1000px 560px at 10% 100%, color-mix(in oklab, var(--accent-2) 18%, transparent), transparent 62%),
    linear-gradient(180deg, #0a1120 0%, #0d1630 52%, #0b1428 100%);
  position: relative; isolation: isolate; background: var(--scene-bg);
}
.project-hero > .board-layout{ position:relative; z-index:1; }

/* Shield: obsah nikdy nepropustí mřížku, ale zůstává glass */


/* ===== Layout: pevný sidebar + pružný board, bez překryvů ===== */
.board-layout{
  display:grid; gap:16px; align-items:start;
  grid-template-columns: 404px minmax(0,1fr);
  /* tento minmax a min-width níže eliminují všechny přesahy */
}
.board-layout > *{ min-width:0; }

/* Sidebar (žádný přesah, sticky) */
.side-index{
  position:sticky; top:calc(var(--topbar-h) + 12px);
  align-self:start; display:grid; gap:12px; min-width:0; z-index:1;
}
.side-card{
  padding:14px; border:var(--bd); border-radius:16px;
  background:var(--glass); box-shadow:var(--sh-soft-inset);
}
.side-title{
  margin:0 0 8px; font-weight:900; letter-spacing:.01em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 6px 18px rgba(124,58,237,.18);
}
.kv-pair{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; }
.kv-label{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.kv-value{ font:800 12.5px var(--mono); }

/* Index sekcí */
.index-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.idx-link{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-radius:12px; border:var(--bd);
  background:var(--glass-weak); text-decoration:none;
  transition: transform var(--t-mid), border-color var(--t-mid), background var(--t-mid), box-shadow var(--t-mid);
}
.idx-link:hover{
  transform:translateY(-1px);
  border-color:color-mix(in oklab, var(--accent-2) 30%, var(--line));
  box-shadow:0 10px 24px rgba(0,0,0,.24);
  background:color-mix(in oklab, var(--surface) 92%, transparent);
}
.idx-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.idx-dot{
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 40% 40%, #8b5cf6 0%, #06b6d4 90%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.06) inset;
}
.idx-name{ font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.idx-count{
  display:inline-grid; place-items:center; min-width:36px; padding:4px 8px;
  border-radius:10px; border:var(--bd);
  background:rgba(255,255,255,.04); font:800 12px var(--mono); color:var(--muted);
}

/* ===== Pravý board ===== */
.board{ display:grid; gap:16px; min-width:0; }

/* Slab: velká přehledná karta sekce */
.section-slab{
  padding:18px; border-radius:18px; border:var(--bd);
  background:var(--glass); box-shadow:var(--sh-soft-inset);
}
.slab-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-bottom:10px;
}
.slab-title{
  margin:0; font-weight:900; letter-spacing:.005em; font-size:22px;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 8px 20px rgba(124,58,237,.20);
}
.slab-meta{ display:flex; gap:8px; flex-wrap:wrap; }
.slab-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:12px; font-weight:800; font-size:12px;
  border:var(--bd); background:rgba(255,255,255,.04); color:var(--text);
}

/* Seznam sekvencí jako řádky */
.seq-rows{ margin:6px 0 0; border-top:1px dashed var(--line-weak); }
.seq-row{
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:12px;
  padding:12px 6px; border-bottom:1px solid rgba(255,255,255,.06);
}
.seq-row:last-child{ border-bottom:none; }
.seq-main{ display:flex; gap:10px; align-items:flex-start; min-width:0; }
.seq-dot{ width:8px; height:8px; border-radius:50%; margin-top:6px;
  background: radial-gradient(circle at 40% 40%, #8b5cf6 0%, #06b6d4 90%); box-shadow:0 0 0 2px rgba(255,255,255,.06) inset; }
.seq-name{ font-weight:800; line-height:1.25; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seq-desc{ margin:2px 0 0; color:var(--muted); font-size:13.5px; line-height:1.45; }

.seq-actions .btn{ padding:8px 12px; border-radius:10px; }

/* Kotvy a zvýraznění cíle (bez JS) */
.section-title, .slab-title{ scroll-margin-top: calc(var(--topbar-h) + 16px); }
.section-slab:target{ outline:2px solid color-mix(in oklab, var(--accent-2) 36%, transparent); outline-offset:2px; }

/* Responsivita */
@media (max-width:1100px){
  .board-layout{ grid-template-columns: 1fr; }
  .side-index{ position:static; }
}

/* =======================================================================================
   21) Auth/Login page — aurora scene + grid (around), centered card with shield
   ======================================================================================= */

.hero-login{
  /* Scéna bez mřížky, použije ji i shield karty */
  --scene-bg:
    radial-gradient(1200px 620px at 65% -15%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%),
    radial-gradient(1000px 560px at 10% 100%, color-mix(in oklab, var(--accent-2) 18%, transparent), transparent 62%),
    linear-gradient(180deg, #0a1120 0%, #0d1630 52%, #0b1428 100%);

  position: relative;
  isolation: isolate;

  /* plátno + centrování obsahu */
  min-height: calc(100svh - var(--topbar-h));
  display: grid;
  place-items: center;
  padding: clamp(22px,4vw,42px) var(--pad-x) clamp(44px,7vh,84px);

  background: var(--scene-bg);
}

/* Obsah nad mřížkou */
.hero-login > .auth{ position: relative; z-index: 1; }


/* Mírně větší max šířka a vycentrované texty v loginu (volitelné) */
.card-glass.auth{ width: min(600px, 100%); text-align: left; }
@media (max-width: 520px){
  .card-glass.auth{ width: 100%; }
}

/* === Project header — compact strip ===================================== */
.project-header{
  padding:14px 16px;
  border-radius:14px;
  border:var(--bd);
  background:var(--glass);
  box-shadow:var(--sh-soft-inset);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
}
.project-header .hgroup{ display:flex; align-items:center; gap:12px; min-width:0; }
.project-header .logo{
  width:44px; height:44px; border-radius:10px; object-fit:cover;
  border:var(--bd); background:rgba(255,255,255,.04); box-shadow:var(--sh-soft-inset);
}
.project-header .logo.placeholder{ display:grid; place-items:center; font-weight:900; color:var(--muted); }

.project-header .title{
  margin:.1rem 0 2px; font-weight:900; letter-spacing:-.01em;
  font-size:clamp(24px,3.6vw,32px);
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 6px 18px rgba(124,58,237,.20);
}
.project-header .sub{ margin:0; color:var(--muted); font-size:14px; }

.project-header .meta{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.project-header .chip{ padding:6px 10px; border-radius:12px; border:var(--bd); background:rgba(255,255,255,.04); font-weight:800; font-size:12px; }

/* === Sekce: popis pod názvem ===================================== */
.slab-head{
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items:start;
}
.slab-titlebox{ min-width:0; }
.slab-desc{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
@media (max-width:720px){
  .slab-head{ grid-template-columns: 1fr; }
  .slab-meta{ justify-self:start; }
}

/* Dropzone – kompaktní varianta pro řádek */
.dropzone.small{
  display:inline-flex; align-items:center; gap:10px;
  width:auto; min-height:0; padding:8px 10px; border-radius:10px;
  /* zachová se původní dashed border i hover/dragover efekty */
}
.dropzone.small .dz-icon{
  width:22px; height:22px; border-radius:8px;
  display:grid; place-items:center; font-weight:900;
}
.dropzone.small .dz-title{ font-weight:900; font-size:12.5px; line-height:1; }
.dropzone.small .dz-sub{ display:none; } /* v kompaktní verzi schováme podtitul

/* === Seq row: 2 řádky (info+akce nahoře, upload dole) =================== */
/* === Seq row: akce nahoře vpravo, upload hned pod nimi ============== */
.seq-row{
  display:grid;
  grid-template-columns: 1fr auto;             /* obsah | akce */
  grid-template-areas:
    "main acts"
    "main upload";                             /* upload sedí hned pod akcemi */
  align-items:start;
  gap: 4px 12px;                               /* menší svislá mezera */
  padding: 12px 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.seq-row:last-child{ border-bottom:none; }

.seq-main{   grid-area: main;  display:flex; gap:10px; align-items:flex-start; min-width:0; }
.seq-actions{grid-area: acts;  display:flex; gap:6px;  align-items:center; justify-content:flex-end; }
.seq-upload{ grid-area: upload; justify-self:end; margin-top:0; }

/* kompaktní dropzona – menší a úzká */
.dropzone.compact{
  display:flex; align-items:center; gap:10px;
  width: clamp(240px, 32vw, 420px);
  min-height: 52px; padding:10px 12px; border-radius:12px;
}
.dropzone.compact .dz-icon{ width:24px; height:24px; border-radius:8px; }
.dropzone.compact .dz-title{ font-weight:900; font-size:13px; }
.dropzone.compact .dz-sub{ color:var(--muted); font-size:12px; }

.quick-upload .qu-file{
  position:absolute;
  width:0.1px; height:0.1px;
  opacity:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path: inset(50%);
  white-space:nowrap; pointer-events:none;
}

/* ===== Reporty (runs) — kompaktní tabulka ===== */
.runs-table.compact thead th,
.runs-table.compact tbody td{
  padding:10px 12px;               /* menší svislá mezera */
}

.runs-table.compact .cell-name .file{
  font-weight:900;
  font-size:15px;                  /* soubor = hlavní nadpis řádku */
  letter-spacing:.01em;
}

.runs-table.compact .cell-name .meta-line{
  margin-top:2px;
  font-size:12px;                  /* menší doplněk pod souborem */
  color:var(--muted);
}

.runs-table.compact code.mono{ font-size:12px; }

.runs-table.compact .stats{ gap:6px; }
.runs-table.compact .statsbar{ height:7px; border-radius:999px; }
.runs-table.compact .statsline{ font-size:12.5px; }

.runs-table.compact .cell-date{ font-size:12.5px; }

.runs-table.compact .actions .btn{
  padding:6px 8px;                 /* menší akční tlačítka */
  font-size:12px;
  border-radius:8px;
}

/* lepší rozložení sloupců */
.runs-table.compact{ table-layout: auto; }
.runs-table.compact thead th:first-child{ width:50%; }  /* Soubor/Běh = půlka řádku */
.runs-table.compact thead th:nth-child(2){ width:auto; }/* Souhrn roztáhne zbytek */
.runs-table.compact thead th:nth-child(3){ white-space:nowrap; } /* Datum */
.runs-table.compact thead th:nth-child(4){ width:1%; white-space:nowrap; } /* Akce */

/* =======================================================================================
   21) PDF Reader (glass + shield)
   ======================================================================================= */
.pdf-toolbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:10px; border-bottom:var(--bd);
  background: var(--glass); box-shadow: var(--sh-soft-inset);
}
.pdf-toolbar .spacer{ flex:1 1 auto; }
.pdf-toolbar .meta{
  display:flex; align-items:center; gap:10px; font: 700 12px var(--mono); color:var(--muted);
  padding:6px 10px; border:var(--bd); border-radius:10px; background:rgba(255,255,255,.04);
}
.pdf-btn{ padding:8px 10px; border-radius:10px; }
.pdf-btn[disabled]{ opacity:.5; pointer-events:none; }

.pdf-canvas-wrap{
  position:relative; background:rgba(255,255,255,.02);
  max-height: calc(100svh - 240px);
  overflow:auto;
}
.pdf-page{
  display:grid; place-items:center;
  padding:18px; /* příjemný okraj kolem PDF */
}
.pdf-page canvas{
  box-shadow: 0 18px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.035);
  border-radius: 12px; background:#fff;
}

/* vstupy v toolbaru */
.pdf-toolbar input[type="number"]{
  width:80px; padding:8px 10px; border-radius:10px; border:var(--bd);
  background:rgba(255,255,255,.04); color:var(--text); font:inherit;
}
.pdf-toolbar .btn-group{ display:flex; gap:6px; align-items:center; }

/* malé verze tlačítek, ale v našem stylu */
.btn.btn-ghost.btn-xs, .btn.btn-primary.btn-xs{
  padding:6px 10px; font-size:12px; border-radius:10px;
}

/* Responsivita */
@media (max-width: 780px){
  .pdf-toolbar{ gap:6px; }
  .pdf-toolbar .meta{ display:none; }
}