@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;900&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  --bg:            #0A0A0B;
  --card:          #14141A;
  --border:        #2A2A33;
  --gold:          #C9A961;
  --gold-lt:       #e4c97e;
  --gold-dim:      rgba(201,169,97,.12);
  --burgundy:      #8B2E3F;
  --burg-lt:       #a83850;
  --text:          #F0EDE8;
  --text-sub:      #9B97A8;
  --text-muted:    #5C5868;
  --radius:        16px;
  --radius-sm:     10px;
  --shadow-card:   0 2px 20px rgba(0,0,0,.35);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }

/* ── Animations ────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0);    }
}
@keyframes spin {
  to { transform:rotate(360deg); }
}
@keyframes pulseRing {
  0%   { transform:scale(.85); opacity:.8; }
  100% { transform:scale(1.5);  opacity:0;  }
}
@keyframes popIn {
  0%   { transform:scale(.75); opacity:0; }
  65%  { transform:scale(1.04);            }
  100% { transform:scale(1);   opacity:1; }
}

.fade-up { animation: fadeUp .5s ease both; }

/* ── Base ──────────────────────────────────────────────── */
body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 60% 40% at 15%   0%, rgba(201,169,97,.05) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 100%, rgba(139, 46,63,.05) 0%, transparent 60%);
  color: var(--text);
  font-family: 'Manrope', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  padding-bottom: 80px;
}

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  text-align: center;
  padding: 56px 24px 44px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,rgba(201,169,97,.06) 0%,transparent 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: fadeUp .5s ease both;
}
.site-header::before {
  content:'';
  position:absolute;
  top:-80px; left:50%;
  transform:translateX(-50%);
  width:340px; height:340px;
  background:radial-gradient(circle,rgba(201,169,97,.07) 0%,transparent 70%);
  pointer-events:none;
}
.site-logo {
  width:80px; height:80px;
  object-fit:contain;
  margin-bottom:18px;
  filter:drop-shadow(0 0 18px rgba(201,169,97,.45));
}
.site-header h1 {
  font-family:'Unbounded',sans-serif;
  font-size:clamp(1.1rem,3vw,1.55rem);
  font-weight:700;
  letter-spacing:.14em;
  color:var(--gold);
  text-shadow:0 0 28px rgba(201,169,97,.3);
}
.site-header p {
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-top:6px;
}

/* ── Page / Form ─────────────────────────────────────────── */
.page {
  max-width:820px;
  margin:0 auto;
  padding:36px 20px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:26px 28px;
  box-shadow:var(--shadow-card);
  transition:border-color .2s;
}
.card:hover { border-color:rgba(201,169,97,.18); }

.card-title {
  font-family:'Unbounded',sans-serif;
  font-size:.65rem;
  font-weight:700;
  letter-spacing:.16em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  gap:10px;
}
.card-title::after {
  content:'';
  flex:1;
  height:1px;
  background:linear-gradient(90deg,rgba(201,169,97,.3),transparent);
}

/* ── Field grids ─────────────────────────────────────────── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.col-full { grid-column:1/-1; }

.field { display:flex; flex-direction:column; gap:5px; }

.field label {
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.req { color:var(--gold); }

/* ── Inputs ───────────────────────────────────────────────── */
.plain-input,
.input-wrap input {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  color:var(--text);
  font-family:'Manrope',sans-serif;
  font-size:.94rem;
  font-weight:500;
  padding:10px 14px;
  outline:none;
  width:100%;
  transition:border-color .18s, box-shadow .18s;
  appearance:textfield;
  -moz-appearance:textfield;
}
.input-wrap input { padding:10px 40px 10px 14px; }

.plain-input:focus,
.input-wrap input:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(201,169,97,.15);
}
.plain-input::placeholder,
.input-wrap input::placeholder { color:var(--text-muted); opacity:.5; }

.input-wrap input::-webkit-outer-spin-button,
.input-wrap input::-webkit-inner-spin-button { -webkit-appearance:none; }

input[type="date"] { color-scheme:dark; }

.input-wrap {
  position:relative;
  display:flex;
  align-items:center;
}
.unit {
  position:absolute;
  right:12px;
  font-size:.78rem;
  font-weight:600;
  color:var(--text-muted);
  pointer-events:none;
  user-select:none;
}

/* ── Decomposition table ─────────────────────────────────── */
.decomp {
  display:flex;
  flex-direction:column;
  gap:3px;
}
.decomp-head {
  display:grid;
  grid-template-columns:1fr 118px 148px;
  gap:10px;
  padding:0 12px 10px;
  border-bottom:1px solid var(--border);
  margin-bottom:4px;
}
.decomp-head span {
  font-size:.65rem;
  font-weight:600;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.decomp-head span:not(:first-child) { text-align:center; }

.decomp-row {
  display:grid;
  grid-template-columns:1fr 118px 148px;
  gap:10px;
  align-items:center;
  padding:9px 12px;
  border-radius:var(--radius-sm);
  background:rgba(255,255,255,.015);
  border:1px solid transparent;
  transition:background .15s, border-color .15s;
}
.decomp-row:hover {
  background:rgba(201,169,97,.04);
  border-color:rgba(201,169,97,.1);
}
.decomp-row.sum-only .cat-label { grid-column:1/3; }

.decomp-row .input-wrap input {
  padding:7px 32px 7px 10px;
  font-size:.86rem;
  text-align:right;
}
.decomp-row .unit { right:9px; font-size:.72rem; }

.cat-label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:.86rem;
  color:var(--text-sub);
}
.cat-label .em {
  font-size:1rem;
  width:22px;
  text-align:center;
  flex-shrink:0;
}

/* ── Submit button ───────────────────────────────────────── */
.submit-wrap {
  display:flex;
  justify-content:center;
  padding-top:6px;
}
.submit-btn {
  background:linear-gradient(135deg,var(--gold) 0%,var(--burgundy) 100%);
  color:#fff;
  border:none;
  border-radius:var(--radius-sm);
  font-family:'Unbounded',sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  padding:18px 52px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:13px;
  position:relative;
  overflow:hidden;
  transition:box-shadow .25s, filter .2s, transform .1s;
}
.submit-btn::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 60%);
  opacity:0;
  transition:opacity .2s;
}
.submit-btn:hover::before { opacity:1; }
.submit-btn:hover {
  box-shadow:0 0 36px rgba(201,169,97,.4), 0 0 10px rgba(139,46,63,.3);
  filter:brightness(1.07);
}
.submit-btn:active:not(:disabled) { transform:scale(.98); }
.submit-btn:disabled { opacity:.55; cursor:not-allowed; }
.submit-btn svg { width:18px; height:18px; flex-shrink:0; }

/* ── Loader overlay ──────────────────────────────────────── */
.loader-overlay {
  position:fixed;
  inset:0;
  background:rgba(10,10,11,.82);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:22px;
  z-index:100;
}
.loader-ring {
  position:relative;
  width:62px;
  height:62px;
}
.loader-ring::before {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid rgba(201,169,97,.15);
  animation:pulseRing 1.4s ease-out infinite;
}
.loader-ring::after {
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:3px solid transparent;
  border-top-color:var(--gold);
  animation:spin .75s linear infinite;
}
.loader-text {
  font-family:'Unbounded',sans-serif;
  font-size:.65rem;
  letter-spacing:.12em;
  color:var(--gold);
  opacity:.85;
}

/* ── Success modal ───────────────────────────────────────── */
.modal-overlay {
  position:fixed;
  inset:0;
  background:rgba(10,10,11,.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:200;
  padding:20px;
}
.modal-box {
  background:var(--card);
  border:1px solid rgba(201,169,97,.28);
  border-radius:var(--radius);
  padding:48px 40px;
  text-align:center;
  max-width:420px;
  width:100%;
  animation:popIn .38s ease both;
  box-shadow:0 0 64px rgba(201,169,97,.09);
}
.modal-icon {
  width:64px; height:64px;
  background:linear-gradient(135deg,var(--gold),var(--burgundy));
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 20px;
  font-size:26px;
}
.modal-title {
  font-family:'Unbounded',sans-serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--gold);
  margin-bottom:10px;
}
.modal-body {
  font-size:.88rem;
  color:var(--text-sub);
  line-height:1.8;
}
.modal-email { color:var(--text); font-weight:600; }
/* Telegram status in modal */
.modal-tg-status {
  margin-top:14px;
  font-size:.8rem;
  font-weight:500;
  line-height:1.5;
  padding:9px 14px;
  border-radius:8px;
  text-align:left;
}
.modal-tg-status.tg-sent {
  background:rgba(34,197,94,.09);
  border:1px solid rgba(34,197,94,.25);
  color:#4ade80;
}
.modal-tg-status.tg-fail {
  background:rgba(201,169,97,.09);
  border:1px solid rgba(201,169,97,.25);
  color:var(--gold);
}

/* Modal action row */
.modal-actions {
  margin-top:24px;
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.modal-download {
  background:rgba(201,169,97,.07);
  border:1px solid rgba(201,169,97,.2);
  border-radius:var(--radius-sm);
  color:var(--gold);
  font-family:'Manrope',sans-serif;
  font-size:.86rem;
  font-weight:600;
  padding:10px 22px;
  cursor:pointer;
  transition:background .18s, border-color .18s;
}
.modal-download:hover:not(:disabled) {
  background:rgba(201,169,97,.15);
  border-color:var(--gold);
}
.modal-download:disabled { opacity:.5; cursor:not-allowed; }

.modal-close {
  background:rgba(201,169,97,.08);
  border:1px solid rgba(201,169,97,.22);
  border-radius:var(--radius-sm);
  color:var(--gold);
  font-family:'Manrope',sans-serif;
  font-size:.88rem;
  font-weight:600;
  padding:10px 36px;
  cursor:pointer;
  transition:background .18s, border-color .18s;
}
.modal-close:hover {
  background:rgba(201,169,97,.16);
  border-color:var(--gold);
}

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%);
  border-radius:var(--radius-sm);
  font-size:.88rem;
  font-weight:500;
  padding:13px 24px;
  z-index:300;
  white-space:nowrap;
  max-width:90vw;
  text-align:center;
}
.toast--error {
  background:rgba(239,68,68,.11);
  border:1px solid rgba(239,68,68,.32);
  color:#ff6b6b;
}
.toast--success {
  background:rgba(34,197,94,.1);
  border:1px solid rgba(34,197,94,.28);
  color:#4ade80;
}
.toast--warn {
  background:rgba(201,169,97,.1);
  border:1px solid rgba(201,169,97,.28);
  color:var(--gold);
}

/* ── Confetti canvas ─────────────────────────────────────── */
#confettiCanvas {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:190;
  width:100%;
  height:100%;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:620px) {
  .grid-2, .grid-3 { grid-template-columns:1fr; }

  .card { padding:20px 18px; }

  .decomp-head,
  .decomp-row {
    grid-template-columns:1fr 100px 120px;
    gap:7px;
  }
  .decomp-head { display:none; }
  .decomp-row { grid-template-columns:1fr 1fr; }
  .decomp-row .cat-label { grid-column:1/-1; }
  .decomp-row.sum-only .cat-label { grid-column:1/-1; }

  .submit-btn { width:100%; justify-content:center; padding:16px 24px; }
}