/* HOLZCOM Quiz Engine — Premium Control UI
   Canon: shkaf.holzcom-mebel.ru + kitchen.holzcom-mebel.ru
*/
:root{
  /* Brand tone: warm, confident, production-premium */
  --bg-main:#070A12;
  --bg-card:rgba(255,255,255,.055);
  --bg-elevated:rgba(255,255,255,.075);

  --fg:#EAF0FF;
  --fg-muted:rgba(234,240,255,.78);
  --muted:rgba(234,240,255,.58);

  --border-muted:rgba(255,255,255,.10);
  --border-subtle:rgba(255,255,255,.08);
  --border-accent:rgba(63,170,120,.26);

  /* One accent (no rainbow). Slightly warmer green than neon. */
  --accent:#3FAA78;
  --accent-muted:rgba(63,170,120,.14);

  --danger:#FF4D4D;
  --warn:#FFCC66;

  --shadow-soft: 0 12px 40px rgba(0,0,0,.40);
  --shadow-elevated: 0 22px 80px rgba(0,0,0,.55);

  --blur: 18px;

  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:12px;

  --t-fast:180ms;
  --t-med:220ms;

  --font: ui-sans-serif, system-ui, -apple-system, "Inter", "SF Pro Display", "SF Pro Text", Segoe UI, Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Backward-compatible aliases (avoid regressions) */
  --bg0:var(--bg-main);
  --bg1:#0B1220;
  --bg2:#0E1A2E;

  --fg2:var(--fg-muted);
  --line:var(--border-muted);

  --card:var(--bg-card);
  --card2:var(--bg-elevated);
  --glass:rgba(10,16,30,.55);

  --shadow: var(--shadow-elevated);
  --shadowSm: var(--shadow-soft);

  --r-lg:var(--radius-lg);
  --r-md:var(--radius-md);
  --r-sm:var(--radius-sm);
}


*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.5 var(--font);
  color:var(--fg);
  background:
    radial-gradient(1200px 900px at 18% 12%, rgba(63,170,120,.14), transparent 58%),
    radial-gradient(1000px 760px at 82% 18%, rgba(255,204,102,.08), transparent 56%),
    radial-gradient(1200px 900px at 70% 92%, rgba(20,184,166,.06), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg2));
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none}
a:hover{color:var(--fg)}
.mono{font-family:var(--mono)}

.hz-wrap{
  width:min(1240px, calc(100% - 48px));
  margin:0 auto;
  padding:28px 0 92px;
}

.hz-topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  background: rgba(6,10,18,.55);
  border-bottom: 1px solid var(--line);
}
.hz-topbar__inner{
  width:min(1240px, calc(100% - 48px));
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
  padding:14px 0;
}

.hz-brand{display:flex; align-items:center; gap:12px; min-width: 190px;}
.hz-brand__mark{
  width:12px;height:12px;border-radius:4px;
  background: linear-gradient(135deg, rgba(63,170,120,1), rgba(63,170,120,.25));
  box-shadow: 0 0 0 6px rgba(63,170,120,.08), 0 0 30px rgba(63,170,120,.20);
}
.hz-brand__name{font-weight:700; letter-spacing:.08em; font-size:12px; opacity:.92}
.hz-brand__sub{font-size:12px; color:var(--muted); margin-top:2px}

.hz-tabs{display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center}
.hz-tab{
  padding:8px 12px;
  border-radius: 999px;
  color: var(--fg2);
  transition: transform var(--t-fast) ease, background var(--t-fast) ease, color var(--t-fast) ease;
  background: transparent;
}
.hz-tab:hover{background: rgba(255,255,255,.06); color: var(--fg);}
.hz-tab.is-active{
  background: rgba(63,170,120,.10);
  color: var(--fg);
  box-shadow: inset 0 0 0 1px rgba(63,170,120,.25);
}

.hz-topbar__right{display:flex; gap:12px; align-items:center; min-width: 190px; justify-content:flex-end;}
.hz-ghost{
  padding:8px 12px; border-radius:999px;
  color: var(--fg2);
}
.hz-ghost:hover{background: rgba(255,255,255,.06); color: var(--fg)}

.hz-pill{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:999px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  color: var(--fg2);
}
.hz-pill:hover{color:var(--fg); background: rgba(255,255,255,.08);}
.hz-pill.is-active{box-shadow: inset 0 0 0 1px rgba(63,170,120,.28); background: rgba(63,170,120,.10); color: var(--fg);}
.hz-dot{width:8px;height:8px;border-radius:99px;background: rgba(63,170,120,.85); box-shadow: 0 0 16px rgba(63,170,120,.35);}

.hz-pagehead{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-top:18px;}
.hz-h1{font-size:22px; font-weight:650; letter-spacing:.01em}
.hz-sub{margin-top:6px; color: var(--muted); max-width: 760px;}

.hz-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:flex-end;}

.hz-card{
  background: var(--card);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  box-shadow: var(--shadowSm);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

.hz-btn{
  height:40px;
  padding:0 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--fg);
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  cursor:pointer;
  transition: transform var(--t-fast) ease, background var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.hz-btn:hover{ background: rgba(255,255,255,.10);}
.hz-btn:active{}
.hz-btn--primary{
  background: linear-gradient(135deg, rgba(63,170,120,.95), rgba(63,170,120,.28));
  border: 1px solid rgba(63,170,120,.28);
  color: #04110B;
  box-shadow: 0 18px 60px rgba(63,170,120,.12);
}
.hz-btn--primary:hover{box-shadow: 0 22px 70px rgba(63,170,120,.18);}

.hz-input{
  height:40px;
  padding:0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--fg);
  outline:none;
  transition: box-shadow var(--t-fast) ease, border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.hz-input:focus{
  border-color: rgba(63,170,120,.35);
  box-shadow: 0 0 0 6px rgba(63,170,120,.10);
  background: rgba(255,255,255,.08);
}
.hz-input--search{width:320px; padding-left:38px;}

.hz-search{position:relative}
.hz-search__ico{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color: var(--muted);
  pointer-events:none;
}

.hz-kpi{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}
.hz-kpi__item{
  padding:14px 16px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.hz-kpi__label{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted);}
.hz-kpi__value{margin-top:6px; font-size:22px; font-weight:650;}

.hz-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:18px;
}

/* --- Git-like diff viewer (Apply pack) --- */
.hzGitDiff{
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.hzGitDiffHdr{
  padding:10px 12px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.hzGitDiffHdrTitle{font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:11px; color: var(--fg2);}
.hzGitDiffBlock{padding:10px 12px; border-bottom: 1px solid rgba(255,255,255,.06);} 
.hzGitDiffBlock:last-child{border-bottom:none;}
.hzGitDiffLine{display:flex; gap:10px; align-items:flex-start; padding:2px 0;}
.hzGitDiffPrefix{width:14px; flex:0 0 14px; opacity:.9;}
.hzGitDiffText{white-space:pre-wrap; word-break:break-word; color: var(--fg);} 
.hzGitDiffText.is-faint{color: rgba(234,240,255,.78);} 
.hzGitDiffLine.is-add .hzGitDiffPrefix{color: rgba(63,170,120,.95);} 
.hzGitDiffLine.is-del .hzGitDiffPrefix{color: rgba(255,77,77,.92);} 
.hzGitDiffLine.is-meta .hzGitDiffPrefix{color: rgba(255,204,102,.85);} 
.hzGitDiffStepTitle{display:flex; gap:10px; align-items:center; padding:0 0 6px;}
.hzGitDiffBadge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:2px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .04em;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
}
.hzGitDiffBadge.is-added{border-color: rgba(63,170,120,.28); background: rgba(63,170,120,.10); color: var(--fg);} 
.hzGitDiffBadge.is-removed{border-color: rgba(255,77,77,.28); background: rgba(255,77,77,.10); color: var(--fg);} 
.hzGitDiffBadge.is-modified{border-color: rgba(255,204,102,.28); background: rgba(255,204,102,.10); color: var(--fg);} 
.hzGitDiffStepId{color: var(--fg); opacity:.95;}

.hz-quiz{padding:18px; position:relative; overflow:hidden;
  transition: transform var(--t-med) ease, box-shadow var(--t-med) ease, border-color var(--t-med) ease, background var(--t-med) ease;
}
.hz-quiz:hover{
  border-color: rgba(63,170,120,.20);
  background: rgba(255,255,255,.07);
  box-shadow: var(--shadow);
}
.hz-quiz__head{display:flex; align-items:center; gap:10px;}
.hz-quiz__id{color: rgba(63,170,120,.85); font-size:12px;}
.hz-quiz__title{margin-top:10px; font-size:16px; font-weight:650;}
.hz-quiz__meta{margin-top:10px; display:flex; gap:8px; flex-wrap:wrap;}
.hz-chip{
  display:inline-flex; align-items:center; gap:8px;
  height:26px; padding:0 10px;
  border-radius: 999px;
  font-size:12px;
  color: var(--fg2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
}
.hz-tags{margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; min-height:34px;}
.hz-tag{
  display:inline-flex; align-items:center;
  height:26px; padding:0 10px;
  border-radius: 999px;
  font-size:12px;
  color: var(--fg2);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  transition: background var(--t-fast) ease, transform var(--t-fast) ease, color var(--t-fast) ease;
}
.hz-tag:hover{background: rgba(255,255,255,.10); color: var(--fg);}
.hz-tag--more{cursor:default; opacity:.85}
.hz-tag--more:hover{transform:none; background: rgba(255,255,255,.05); color: var(--fg2);}

.hz-status{width:10px;height:10px;border-radius:99px}
.hz-status.is-on{background: rgba(63,170,120,.90); box-shadow: 0 0 16px rgba(63,170,120,.35);}
.hz-status.is-off{background: rgba(255,255,255,.20); box-shadow: none;}

.hz-quiz__foot{margin-top:14px; display:flex; align-items:flex-end; justify-content:space-between; gap:10px;}
.hz-metrics{display:flex; gap:12px; flex-wrap:wrap;}
.hz-metric{display:flex; flex-direction:column; gap:2px; min-width:84px;}
.hz-metric span{font-size:11px; color: var(--muted); letter-spacing:.06em; text-transform:uppercase;}
.hz-metric b{font-size:14px; font-weight:650;}

.hz-quiz__actions{display:flex; gap:8px; opacity:0; transition: opacity var(--t-fast) ease, transform var(--t-fast) ease;}
.hz-quiz:hover .hz-quiz__actions{opacity:1;}
.hz-icoBtn{
  width:34px;height:34px;border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--fg);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: transform var(--t-fast) ease, background var(--t-fast) ease;
}
.hz-icoBtn:hover{ background: rgba(255,255,255,.10);}
.hz-icoBtn:active{}
form{margin:0}

.hz-empty{
  margin-top:18px;
  padding:24px;
  border-radius: var(--r-lg);
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
}
.hz-empty__title{font-size:16px; font-weight:650;}
.hz-empty__sub{margin-top:8px; color: var(--muted);}

/* Alerts */
.hz-alert{
  padding:12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--fg);
}
.hz-alert--danger{border-color: rgba(255,77,77,.28); background: rgba(255,77,77,.10);}

/* Login */
.hz-login{min-height:100vh}
.hz-login__bg{
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(1200px 900px at 20% 10%, rgba(63,170,120,.20), transparent 60%),
    radial-gradient(900px 700px at 80% 20%, rgba(99,102,241,.20), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1) 40%, var(--bg2));
}
.hz-login__wrap{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:32px 20px;
}
.hz-login__card{
  width:min(460px, 100%);
  padding:22px;
  border-radius: 26px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}
.hz-login__title{margin-top:12px; font-size:22px; font-weight:650;}
.hz-login__sub{margin-top:6px; color: var(--muted);}
.hz-form{margin-top:14px; display:flex; flex-direction:column; gap:10px;}
.hz-label{font-size:12px; color: var(--fg2); margin-top:8px;}
.hz-login__meta{margin-top:14px; display:flex; gap:8px; flex-wrap:wrap; opacity:.95;}
@media (max-width: 980px){
  .hz-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
  .hz-kpi{grid-template-columns: repeat(2, minmax(0,1fr));}
  .hz-tabs{display:none;}
}
@media (max-width: 640px){
  .hz-wrap{width:calc(100% - 28px);}
  .hz-grid{grid-template-columns: 1fr;}
  .hz-input--search{width: 240px;}
}


/* Tabular numbers for all numeric UI */
.hz-tabular, .mono{font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;}