/* base.css */

/* ============================================================
   RESET
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  background-color:var(--bg);
  color:var(--text-main);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  height:100vh;height:100dvh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.app-header,.app-footer{flex-shrink:0}

/* ============================================================
   NUMBER INPUT — скрытие нативных стрелок (без стиля)
   ============================================================ */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}
input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}

/* ============================================================
   BACKGROUNDS
   ============================================================ */
.bg-layer{
  position:fixed;
  inset:0;
  z-index:-2;
  overflow:hidden;
  pointer-events:none;
}
.bg-obsidian{
  background-color:#050505;
  background-image:radial-gradient(circle at 50% 50%,#1a1a1f 0%,#000 80%);
}
.bg-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  z-index:0;
}
.shine-canvas{
  position:absolute;
  top:-50%;
  left:-100%;
  width:60%;
  height:200%;
  transform:rotate(15deg);
  animation:metalShine 10s infinite linear;
  animation-delay:-5s;
  pointer-events:none;
  z-index:1;
  will-change:left;
}
.bg-glow-ambient{
  position:fixed;
  top:50%;
  left:30%;
  transform:translate(-50%,-50%);
  width:700px;
  height:700px;
  background:radial-gradient(circle,var(--neon-glow) 0%,transparent 60%);
  filter:blur(140px);
  z-index:-1;
  opacity:.28;
  pointer-events:none;
}

/* ============================================================
   UTILITY
   ============================================================ */
.mobile-only{display:none !important}
.desktop-only{display:flex}

/* ============================================================
   HEADER
   ============================================================ */
.app-header{display:flex;align-items:center;gap:24px;max-width:1800px;width:100%;margin:0 auto;padding:22px 20px 18px}
.header-line{flex:1;height:1px;background:linear-gradient(to right,transparent,rgba(var(--neon-rgb),.35),rgba(var(--neon-rgb),.5))}
.header-line:last-child{background:linear-gradient(to left,transparent,rgba(var(--neon-rgb),.35),rgba(var(--neon-rgb),.5))}
.header-brand{text-align:center;flex-shrink:0}
.status-badge{display:inline-flex;align-items:center;gap:10px;padding:4px 0;color:var(--neon);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;margin-bottom:8px}
.status-badge::before{content:'';display:block;width:5px;height:5px;background:var(--neon);border-radius:50%;box-shadow:0 0 10px var(--neon);animation:pulse 2s infinite ease-in-out}
h1{font-size:clamp(24px,2.6vw,32px);font-weight:300;letter-spacing:-.03em;line-height:1.1;text-shadow:0 4px 20px rgba(0,0,0,.9),0 0 40px rgba(0,0,0,.8);white-space:nowrap}
h1 span{font-weight:600;color:var(--neon);text-shadow:0 0 20px var(--neon-glow),0 0 40px var(--neon)}

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer{padding:14px 20px;text-align:center;font-size:11.5px;color:#475569;border-top:1px solid rgba(255,255,255,.05)}
.app-footer a{color:#64748b;text-decoration:none;transition:color .2s}
.app-footer a:hover{color:var(--text-main)}