/* ===== Theme tokens ===== */
:root{
  --brand-teal:#117e77; --brand-deep:#0b3b3a; --brand-gold:#e3b34b; --brand-orange:#d96a2b; --brand-cream:#f5e7c6;

  --bg: radial-gradient(900px 600px at -10% -10%, rgba(245,231,198,0.75) 0%, transparent 60%),
        radial-gradient(900px 600px at 110% 0%, rgba(17,126,119,0.12) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff, #f8fafc);

  --panel: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248,250,252,0.9));
  --glass: rgba(255,255,255,0.65); 
  --glass-strong: rgba(255,255,255,0.86);

  --text:#0f172a; --muted:#64748b; --accent:var(--brand-teal);
  --border:1px solid rgba(2,6,23,0.08);
  --shadow:0 10px 30px rgba(2,6,23,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  --radius:18px;

  --ok:#16a34a; --danger:#ef4444;
}

[data-theme="dark"]{
  --bg:radial-gradient(1200px 800px at 20% -10%, rgba(17,126,119,0.35) 0%, transparent 60%),
       radial-gradient(1000px 800px at 120% 10%, rgba(227,179,75,0.15) 0%, transparent 60%),
       linear-gradient(180deg, #0b1217, #0b1217);
  --panel:linear-gradient(180deg, #18222b, #0f1720);
  --glass:rgba(255,255,255,0.08);
  --glass-strong:rgba(255,255,255,0.14);
  --text:#e5e7eb; --muted:#9ca3af;
  --border:1px solid rgba(255,255,255,0.15);
  --shadow:0 10px 30px rgba(0,0,0,0.4), inset 0 1px 1px rgba(255,255,255,0.06);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:15px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;
  color:var(--text);
  background-image:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
[hidden]{display:none !important}

/* ===== Layout ===== */
.container{max-width:1200px;margin:0 auto;padding:24px}
.grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px}
@media (max-width:980px){ .grid{grid-template-columns:1fr} }

/* ===== Header (shared) ===== */
header.nav{
  backdrop-filter:blur(14px) saturate(140%);
  background:var(--glass);
  border:var(--border);
  box-shadow:var(--shadow);
  border-radius:22px;
  padding:10px 14px;
  margin:12px;
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  position:sticky;top:12px;z-index:50
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.logo-img{width:34px;height:34px;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,0.08)}
.logo-text{font-weight:800;letter-spacing:.3px;font-size:18px}
.nav-links{display:flex;gap:10px;align-items:center}
.link-btn{display:inline-block;padding:10px 14px;border-radius:999px;border:var(--border);background:var(--glass);box-shadow:var(--shadow);color:var(--text)}
.link-btn:hover{background:var(--glass-strong)}
.nav-actions{display:flex;gap:8px;align-items:center}
.icon-btn{background:var(--glass);border:var(--border);border-radius:14px;padding:10px 12px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;box-shadow:var(--shadow);color:var(--text)}
.icon-btn:hover{background:var(--glass-strong)}
.badge{display:inline-block;min-width:22px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.6);border:var(--border);text-align:center}
.user-name{margin-left:4px;color:var(--muted);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.hamburger{display:none;border:var(--border);background:var(--glass);border-radius:12px;padding:10px;box-shadow:var(--shadow)}
.hamburger span{display:block;width:20px;height:2px;background:currentColor;margin:4px 0}
.mobile-menu{display:none;position:absolute;left:12px;right:12px;top:64px;background:var(--glass);border:var(--border);box-shadow:var(--shadow);border-radius:16px;padding:12px}
.mobile-menu.open{display:block}
.mobile-menu a{display:block;padding:12px 14px;border-radius:12px}
.mobile-menu a:hover{background:var(--glass-strong)}

@media (max-width:900px){
  header.nav .nav-links{display:none !important}
  header.nav .hamburger{display:inline-block !important}
}

/* ===== Breadcrumbs ===== */
.breadcrumbs{margin:16px 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.breadcrumbs a{color:var(--muted);padding:6px 10px;background:var(--glass);border:var(--border);border-radius:999px}
.breadcrumbs .current{color:var(--text);background:transparent;padding:0;box-shadow:none;border:none}

/* ===== Cards & Panels ===== */
.card{background:var(--glass);border:var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
.form{padding:14px}
.form h2{margin:0 0 8px 0;font-size:18px}

/* ===== Forms ===== */
.row-1{display:grid;grid-template-columns:1fr;gap:10px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:700px){ .row{grid-template-columns:1fr} }

.field{display:grid;gap:6px}
.label{font-size:12px;color:var(--muted)}
input,select,textarea{
  padding:12px 14px;border-radius:12px;border:var(--border);
  background:var(--glass);color:var(--text);box-shadow:var(--shadow)
}
input::placeholder,textarea::placeholder{color:#94a3b8}
.hint{font-size:12px;color:var(--muted)}
.error{font-size:12px;color:var(--danger)}
.success{font-size:12px;color:var(--ok)}

button{font:inherit}
.primary{border-radius:14px;border:var(--border);background:linear-gradient(135deg, rgba(17,126,119,.95), rgba(11,59,58,.95));padding:14px 18px;font-weight:800;cursor:pointer;color:#fff}
.secondary{border-radius:14px;border:var(--border);background:var(--glass);padding:12px 16px;cursor:pointer;color:var(--text)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ===== Side column ===== */
.side{padding:14px;position:sticky;top:84px}
.side h3{margin:0 0 8px 0;font-size:16px}
.side .box{padding:12px;border:var(--border);border-radius:12px;background:var(--glass)}
.side .tip .hint{display:block;line-height:1.45}

/* ===== OTP ===== */
.otp-container{display:grid;gap:10px;align-items:center;justify-items:center;text-align:center;padding:24px}

/* ===== Captcha ===== */
.captcha{padding:12px;border:var(--border);border-radius:12px;background:var(--glass);font:600 20px ui-monospace,monospace;letter-spacing:8px;text-align:center;user-select:none}

/* ===== Footer ===== */
footer{margin-top:24px;padding:24px;color:var(--muted);text-align:center}
.footer-links{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px;justify-content:center}
.footer-links a{display:inline-block;padding:8px 12px;border-radius:999px;background:var(--glass);border:var(--border);box-shadow:var(--shadow)}
.footer-links a:hover{background:var(--glass-strong)}
.footer-copy{opacity:.8}

/* ===== Accessibility helpers ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== Page background for dark theme (optional) ===== */
html[data-theme="dark"] body{background:#0b1217}

sudo tee -a /var/www/dapita.store/html/css/auth.css >/dev/null <<'CSS'

/* === Header responsive fixes === */
header.nav{overflow:hidden}
header.nav .brand, header.nav .nav-links, header.nav .nav-actions{min-width:0}

/* 1) Раньше показываем бургер, чтобы было куда убирать лишнее */
@media (max-width:1280px){
  header.nav .hamburger{display:inline-block !important;}
  header.nav #nav-username{display:none;} /* экономим место */
}

/* 2) На средних ширинах убираем auth-ссылки из шапки (они есть в mobileMenu) */
@media (max-width:1180px){
  header.nav #nav-register,
  header.nav #nav-login,
  header.nav #nav-account,
  header.nav #nav-logout{display:none;}
}

/* 3) На ещё меньших ширинах прячем основной набор ссылок и оставляем только бургер */
@media (max-width:980px){
  header.nav .nav-links{display:none !important;}
  header.nav .hamburger{display:inline-block !important;}
}

/* 4) Мелкие экраны — чуть уменьшаем интервалы, чтобы не расползалось */
@media (max-width:420px){
  header.nav{padding:8px 10px; gap:8px}
  header.nav .icon-btn, header.nav .link-btn{padding:8px 10px}
}
CSS
/* === fixes: mobile menu look/visibility === */
header.nav{ overflow:visible; } /* чтобы меню не резалось по границе хедера */
.mobile-menu{
  background: var(--glass-strong); /* плотнее фон */
  backdrop-filter: blur(14px) saturate(140%);
}
/* === fix: captcha alignment on desktop === */
.captcha{
  display:flex; align-items:center; justify-content:center;
  min-width: 180px; /* держим ширину, чтобы не прыгало */
  font-variant-numeric: tabular-nums;
  letter-spacing: .5ch; /* ровнее интервал */
  line-height: 1;
}
@media (max-width:700px){
  .captcha{ min-width: 150px; }
}
/* === FIX: captcha alignment (desktop) === */
.captcha{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:200px !important;
  min-height:44px !important;
  padding:12px 16px !important;
  font:600 22px ui-monospace,monospace !important;
  letter-spacing:0.6ch !important;
  line-height:1 !important;
}

/* === FIX: mobile menu background & visibility === */
header.nav{ overflow:visible !important; }
header.nav .mobile-menu{
  background:rgba(255,255,255,0.92) !important;
  backdrop-filter:blur(14px) saturate(140%) !important;
  border:1px solid rgba(2,6,23,0.08) !important;
}
[data-theme="dark"] header.nav .mobile-menu{
  background:rgba(16,20,27,0.92) !important;
  border:1px solid rgba(255,255,255,0.15) !important;
}
/* === shared footer === */
.site-footer{margin-top:24px; padding:24px; color:var(--muted); text-align:center;}
.footer-links{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px; justify-content:center;}
.footer-links a{display:inline-block; padding:8px 12px; border-radius:999px; text-decoration:none; color:var(--text); background: var(--glass); border: var(--border); box-shadow: var(--shadow);}
.footer-links a:hover{background: var(--glass-strong)}
.footer-copy{opacity:.8}

/* enforce burger visibility when open */
.mobile-menu{ display:none; position:absolute; z-index:9999; left:12px; right:12px; top:64px; }
.mobile-menu.open{ display:block !important; }

/* dark theme base (чтобы точно видно было переключение) */
html[data-theme="dark"] body{ background:#0b1217 !important; color:#e5e7eb !important; }


.mobile-menu{display:none; position:absolute; z-index:9999; left:12px; right:12px; top:64px;}
.mobile-menu.open{display:block !important;}

html[data-theme="dark"] body{ background:#0b1217 !important; color:#e5e7eb !important; }