/* ---------- Общие переменные и фон для всех страниц karpech.ru ---------- */
:root{
  --bg-0:#07070a;
  --bg-1:#0d0e13;
  --ink:#f3f4f7;
  --ink-dim:#9aa0ac;
  --ink-faint:#5b606c;
  --glass:rgba(255,255,255,0.055);
  --glass-strong:rgba(255,255,255,0.09);
  --stroke:rgba(255,255,255,0.11);
  --stroke-strong:rgba(255,255,255,0.22);
  --accent:#3a8dff;
  --accent-2:#7c5cff;
  --accent-3:#34e0d8;
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,"Segoe UI",sans-serif;
  background:radial-gradient(ellipse 120% 90% at 50% -10%, #14151d 0%, var(--bg-0) 55%);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Ambient aurora field ---------- */
.aurora{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}
.orb{
  position:absolute; border-radius:50%; filter:blur(70px);
  opacity:.55; will-change:transform;
}

@keyframes float1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(4%,6%) scale(1.08); }
}
@keyframes float2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-6%,4%) scale(1.05); }
}
@keyframes float3{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(5%,-5%) scale(1.1); }
}

@keyframes rise{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion:reduce){
  .orb{ animation:none !important; }
}

/* ---------- Единый выпадающий список статусов ---------- */
.status-picker{ position:relative; display:inline-flex; font-size:12px; --status-color:var(--ink-faint); }
.status-picker[data-status="wip"]{ --status-color:#ffb454; }
.status-picker[data-status="live"]{ --status-color:#34e0a0; }
.status-picker[data-status="done"]{ --status-color:var(--accent-3); }
.status-picker-trigger{
  display:flex; align-items:center; gap:7px; min-height:30px;
  padding:5px 8px; border:1px solid transparent; border-radius:9px;
  background:transparent; color:var(--ink-dim); font:inherit; cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease);
}
.status-picker-trigger:hover,.status-picker.open .status-picker-trigger{ color:var(--ink); background:rgba(255,255,255,.07); border-color:var(--stroke); }
.status-picker-trigger:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.status-picker-dot{ width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--status-color); box-shadow:0 0 8px color-mix(in srgb,var(--status-color) 70%,transparent); }
.status-picker-chevron{ margin-left:1px; color:var(--ink-faint); font-size:14px; line-height:1; transform:translateY(-1px); transition:transform .2s var(--ease); }
.status-picker.open .status-picker-chevron{ transform:rotate(180deg) translateY(1px); }
.status-picker-menu{
  position:absolute; left:0; bottom:calc(100% + 8px); z-index:90;
  width:168px; padding:6px; border:1px solid var(--stroke-strong); border-radius:14px;
  background:rgba(17,18,25,.96); box-shadow:0 18px 48px rgba(0,0,0,.48),0 1px 0 rgba(255,255,255,.1) inset;
  backdrop-filter:blur(24px) saturate(160%); opacity:0; visibility:hidden;
  transform:translateY(7px) scale(.97); transform-origin:bottom left;
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
.status-picker.open .status-picker-menu{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.status-picker-option{
  width:100%; display:grid; grid-template-columns:8px 1fr 16px; align-items:center; gap:10px;
  padding:9px 10px; border:0; border-radius:9px; background:transparent;
  color:var(--ink-dim); font:inherit; text-align:left; cursor:pointer;
}
.status-picker-option:hover,.status-picker-option:focus-visible{ outline:0; color:var(--ink); background:rgba(255,255,255,.07); }
.status-picker-option[data-status="idea"]{ --status-color:var(--ink-faint); }
.status-picker-option[data-status="wip"]{ --status-color:#ffb454; }
.status-picker-option[data-status="live"]{ --status-color:#34e0a0; }
.status-picker-option[data-status="done"]{ --status-color:var(--accent-3); }
.status-picker-check{ color:var(--accent-3); opacity:0; }
.status-picker-option.selected .status-picker-check{ opacity:1; }
.status-picker.loading{ opacity:.6; }