/* Squirrel Wisdom — DARK · FIRE · SQUIRREL (строгий без засечек) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');

/* Палитра */
:root{
  --bg-charcoal:#0B0B0C;
  --bg-umber:#1A1410;
  --fire-ember:#FF7A1A;
  --fire-warm:#FFCE73;
  --accent-gold:#D4AF37;
  --text-80:#E9E1D3;
  --text-60:#B8B1A8;
  --text-40:#6D655E;
  --squirrel-orange:#F08A24;
  --ring:0 0 0 2px rgba(212,175,55,.45), 0 0 22px rgba(255,122,26,.32);
}

*{box-sizing:border-box}
html{min-height:100%}

body{
  margin:0; padding:24px 12px; min-height:100vh;
  font:400 16px/1.5 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text-80);
  display:flex; justify-content:center; align-items:flex-start;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(255,122,26,.14), transparent 60%),
    linear-gradient(180deg,#070706 0%, #0A0908 35%, #0B0B0C 100%),
    url('../abooks_background.png') repeat;
  background-size:auto, auto, 128px 128px;
  position:relative;
}

/* Виньетка + искры */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(80% 60% at 50% -10%, rgba(255,122,26,.08), transparent 60%),
    radial-gradient(110% 90% at 50% 120%, rgba(0,0,0,.88), transparent 40%);
  mix-blend-mode:screen;
}
body::before{
  content:""; position:fixed; inset:-200px -40px 0 -40px; pointer-events:none; z-index:1;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,206,115,.75) 0 2px, transparent 2.6px),
    radial-gradient(circle at 50% 50%, rgba(255,122,26,.65) 0 1.6px, transparent 2.2px);
  background-size: 140px 220px, 90px 160px;
  opacity:.26; animation:embers-rise 26s linear infinite;
}
@keyframes embers-rise{ to{ background-position:0 -900px, 0 -700px } }

h1{
  color:var(--accent-gold);
  text-align:center;
  font:800 26px/1.15 "Inter",sans-serif;
  margin:0 0 14px;
  text-shadow:0 2px 16px rgba(255,122,26,.20);
  position:relative;
}
h1::after{
  /* «хвост» белки под заголовком */
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-10px; height:3px; width:min(320px, 70%); border-radius:999px;
  background:linear-gradient(90deg, transparent 0%,
    rgba(255,206,115,.55) 25%, var(--squirrel-orange) 50%,
    rgba(255,206,115,.55) 75%, transparent 100%);
  box-shadow:0 0 18px rgba(255,122,26,.28);
}

.container{
  position:relative; z-index:2;
  max-width:500px; width:100%;
  background:
    linear-gradient(180deg, rgba(52,36,28,.96) 0%, rgba(28,22,19,.95) 100%),
    radial-gradient(600px 260px at 30% -10%, rgba(255,206,115,.10), transparent 70%);
  padding:22px 20px; border-radius:16px;
  border:1px solid rgba(212,175,55,.70);
  box-shadow:
    0 0 0 1px rgba(255,122,26,.20) inset,
    0 26px 64px rgba(0,0,0,.65),
    0 0 54px rgba(255,122,26,.20);
}

/* Вкладки (обязательные / необязательные поля) */
.tabs{
  display:flex; gap:8px; margin:0 0 16px;
}
.tab-btn{
  flex:1; padding:10px 12px; border-radius:10px; cursor:pointer;
  border:1px solid rgba(212,175,55,.40);
  background:#151211; color:var(--text-60);
  font:800 12px "Inter",sans-serif; text-align:center;
  transition:transform .12s, box-shadow .2s, background .2s, color .2s, border-color .2s;
}
.tab-btn:hover{ transform:translateY(-1px); border-color:var(--accent-gold) }
.tab-btn.active{
  background:var(--squirrel-orange); border-color:var(--squirrel-orange); color:#1A120B;
  box-shadow:var(--ring);
}
.tab-panel.hidden{ display:none }

/* Формы */
label, select, input{
  display:block; width:100%;
  margin:0 0 14px; color:var(--text-60);
  font:600 12px/1.2 "Inter",sans-serif;
}
input, select{
  padding:12px 14px; border-radius:12px;
  background:#151211; color:var(--text-80);
  border:1px solid rgba(212,175,55,.60);
  font:600 14px "Inter",sans-serif; outline:none;
  transition:box-shadow .2s,border-color .2s,background .2s;
}
input::placeholder{ color:rgba(233,225,211,.55) }
input:focus, select:focus{
  border-color:var(--accent-gold);
  box-shadow:var(--ring);
  background:#13100E;
}

/* Кнопки */
button{
  padding:12px 16px; border-radius:12px; cursor:pointer;
  border:1px solid rgba(212,175,55,.65);
  background:#161310; color:var(--text-80);
  font:800 13px "Inter",sans-serif; text-shadow:none;
  transition:transform .12s, box-shadow .2s, filter .2s;
}
button:hover{ transform:translateY(-1px); box-shadow:var(--ring) }
button.yellow{ background:var(--squirrel-orange); border-color:var(--squirrel-orange); color:#1A120B }
button.yellow:hover{ filter:brightness(1.06) }

/* Верхние кнопки (если есть) */
.top-buttons{ position:absolute; top:20px; right:20px }
.top-buttons button{ margin-left:10px }

/* Сообщения */
.error-message, .success-message{
  margin-bottom:14px; font-weight:800; text-align:center; font-size:12px;
}
.error-message{ color:#FF5A5A }
.success-message{ color:var(--fire-warm) }

/* Мобильность */
@media (max-width:520px){
  .container{ margin:0 12px; padding:18px 14px }
  h1{ font-size:22px }
}