/* ── Castle Cannon — Global Styles ─────────────────────────────────────────
   Тёмная тема по умолчанию (Кибер). Цвета управляются через JS-темы.
   Responsive: iPhone SE → Phone → Tablet → Desktop
   Touch targets ≥ 48px. Safe areas: notch / home bar.
   ─────────────────────────────────────────────────────────────────────── */

/* ── Design tokens (defaults = Cyber тема) ── */
:root {
  --accent:        #00d4ff;
  --accent2:       #7b2fff;
  --text:          #c8e0ff;
  --dark:          #e8f4ff;
  --shadow:        rgba(0,212,255,0.25);
  --card-bg:       rgba(10,20,50,0.85);
  --input-border:  #1a3a6a;
  --input-bg:      rgba(5,15,40,0.9);
  --tab-active:    #00d4ff;
  --stat-bg:       rgba(0,40,80,0.6);

  /* неизменные токены */
  --mint:          #00e676;
  --mint-dark:     #00b050;
  --danger:        #ff3355;
  --white:         #ffffff;

  --radius:    16px;
  --radius-sm: 10px;

  --space-xs: clamp(.25rem, 1vw, .4rem);
  --space-sm: clamp(.5rem,  2vw, .75rem);
  --space-md: clamp(.75rem, 3vw, 1.25rem);
  --space-lg: clamp(1rem,   4vw, 2rem);
}

/* ── Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: 'Nunito', 'Helvetica Neue', Arial, sans-serif;
  background: linear-gradient(135deg, #0a0a1a 0%, #0d1b3e 50%, #0a0a1a 100%);
  min-height: 100dvh;
  min-height: 100vh;
  color: var(--text);
  -webkit-overflow-scrolling: touch;
}

/* ── Typography ── */
h1 { font-size: clamp(1.4rem,5vw,2.4rem);  color: var(--dark); line-height:1.2; }
h2 { font-size: clamp(1.1rem,4vw,1.8rem);  color: var(--dark); line-height:1.3; }
h3 { font-size: clamp(1rem,3vw,1.3rem);    color: var(--dark); }
p  { line-height:1.5; font-size:clamp(.875rem,2.5vw,1rem); }

/* ── Card — glassmorphism ── */
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 4px 32px var(--shadow), 0 0 0 1px rgba(255,255,255,.06);
  padding: var(--space-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08);
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: .5rem;
  padding: .75rem 1.5rem;
  border: none;
  border-radius: 50px;
  font-family: inherit;
  font-size: clamp(.875rem,2.5vw,1rem);
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  text-decoration: none;
  white-space: nowrap;
  min-height: 48px; min-width: 48px;
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
  position: relative;
  overflow: hidden;
}
.btn:active { transform: scale(.95); }

@media (hover: hover) {
  .btn-primary:hover   { transform: translateY(-2px); box-shadow: 0 8px 24px var(--shadow); }
  .btn-secondary:hover { transform: translateY(-2px); opacity: .9; }
  .btn-ghost:hover     { background: rgba(255,255,255,.1); }
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #fff;
  box-shadow: 0 4px 18px var(--shadow);
}
/* shimmer on primary btn */
.btn-primary::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,.15) 50%, transparent 80%);
  transform: translateX(-100%);
  transition: transform .5s ease;
}
@media (hover: hover) {
  .btn-primary:hover::after { transform: translateX(100%); }
}

.btn-secondary {
  background: rgba(255,255,255,.08);
  color: var(--accent);
  border: 1px solid var(--accent);
  box-shadow: 0 0 12px var(--shadow);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.2);
}
.btn-danger { background: linear-gradient(135deg, #ff3355, #cc0033); color:#fff; }
.btn-full   { width: 100%; }

/* ── Inputs ── */
.input-group { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.9rem; }
.input-group label { font-weight:700; font-size:.9rem; color:var(--text); opacity:.8; }

.input-field {
  padding: .75rem 1rem;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 16px;
  color: var(--dark);
  background: var(--input-bg);
  transition: border-color .2s, box-shadow .2s;
  min-height: 48px;
  width: 100%;
  -webkit-appearance: none; appearance: none;
}
.input-field::placeholder { color: rgba(200,224,255,.35); }
.input-field:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--shadow);
}

/* ── Select ── */
select.input-field {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300d4ff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* ── Tabs ── */
.tabs {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 1.25rem;
}
.tab-btn {
  flex: 1;
  padding: .65rem .5rem;
  background: none; border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: clamp(.85rem,2.5vw,.95rem);
  font-weight: 700;
  color: var(--text); opacity: .45;
  transition: opacity .2s, color .2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  min-height: 48px;
  touch-action: manipulation;
}
.tab-btn.active {
  opacity: 1;
  border-color: var(--tab-active);
  color: var(--tab-active);
}

/* ── Notification ── */
.notif {
  padding: .7rem 1rem;
  border-radius: var(--radius-sm);
  font-size: .875rem; font-weight: 600;
  display: none; margin-bottom: .75rem;
  border: 1px solid transparent;
}
.notif.error   {
  background: rgba(255,50,80,.15);
  color: #ff8899;
  border-color: rgba(255,50,80,.3);
  display: block;
}
.notif.success {
  background: rgba(0,230,118,.12);
  color: #80ffbb;
  border-color: rgba(0,230,118,.25);
  display: block;
}

/* ── Loader spinner ── */
.loader {
  display: inline-block;
  width: 1.2rem; height: 1.2rem;
  border: 3px solid rgba(255,255,255,.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Animated background ── */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(ellipse at 15% 20%, var(--shadow) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 80%, rgba(123,47,255,.15) 0%, transparent 50%);
  will-change: transform;
}

/* ── Animated starfield ── */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 40%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 20%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 35%, rgba(255,255,255,.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 75%, rgba(255,255,255,.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 85%, rgba(255,255,255,.4) 0%, transparent 100%),
    radial-gradient(2px 2px at 45% 50%, var(--accent) 0%, transparent 100%),
    radial-gradient(2px 2px at 65% 10%, var(--accent2) 0%, transparent 100%);
  opacity: .5;
}

/* ── Page center ── */
.page-center {
  position: relative; z-index: 1;
  min-height: 100dvh; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: max(1.5rem, env(safe-area-inset-top))
           max(1.5rem, env(safe-area-inset-right))
           max(1.5rem, env(safe-area-inset-bottom))
           max(1.5rem, env(safe-area-inset-left));
}

/* ── Logo ── */
.logo { text-align: center; margin-bottom: 1.25rem; }
.logo-icon { font-size: clamp(2rem,8vw,3rem); display: block; margin-bottom: .25rem; }
.logo h1 span { color: var(--accent); }
.logo p { font-size: clamp(.75rem,2.5vw,.9rem); opacity: .7; }

/* ── Avatar ── */
.avatar {
  width:  clamp(2rem,6vw,2.5rem);
  height: clamp(2rem,6vw,2.5rem);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800;
  font-size: clamp(.8rem,2.5vw,1rem);
  flex-shrink: 0;
  box-shadow: 0 0 12px var(--shadow);
}

/* ── Divider ── */
.divider {
  display: flex; align-items: center; gap: .75rem;
  margin: .75rem 0; color: rgba(200,224,255,.35); font-size: .85rem;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(255,255,255,.1);
}

/* ── Glow text ── */
.glow { text-shadow: 0 0 20px var(--accent), 0 0 40px var(--accent2); }

/* ── Badge ── */
.badge {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 50px;
  font-size: .72rem; font-weight: 700;
  background: rgba(255,255,255,.1);
  color: var(--accent);
  border: 1px solid var(--accent);
}

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.04); }
::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 10px;
  opacity: .5;
}

/* ═══════════════════════════════════
   RESPONSIVE BREAKPOINTS
   ═══════════════════════════════════ */

/* xs < 360px */
@media (max-width: 359px) {
  html { font-size: 14px; }
  .card { padding: 1rem; border-radius: 12px; }
  .btn  { font-size: .8rem; padding: .6rem 1rem; }
}

/* sm phones */
@media (max-width: 480px) {
  .card { padding: 1.1rem; }
  .btn  { font-size: .875rem; padding: .65rem 1.1rem; }
  .logo-icon { font-size: 2.2rem; }
}

/* landscape phone */
@media (max-height: 500px) and (orientation: landscape) {
  .page-center { align-items: flex-start; padding-top: .75rem; padding-bottom: .75rem; }
  .logo { margin-bottom: .5rem; }
  .logo-icon { font-size: 1.5rem; }
  .input-group { margin-bottom: .5rem; }
}

/* tablet and up */
@media (min-width: 768px) {
  .card { padding: 2rem; }
}

/* desktop */
@media (min-width: 1024px) {
  html { font-size: 17px; }
}