*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #1a1a2e;
  --surface: #16213e;
  --deep:    #0f3460;
  --accent:  #e94560;
  --green:   #38a169;
  --blue:    #3182ce;
  --text:    #eee;
  --muted:   #a0aec0;
  --dim:     #718096;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}
body:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  filter: brightness(0.3) blur(0px); 
  z-index: -1; 
}
.hidden { display: none !important; }

/* ══════════════════════════════════════════
   AUTH SCREEN
══════════════════════════════════════════ */
#auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative; /* обязательно для ::before */
  z-index: 1; /* форма выше overlay */
}

#auth-screen::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  filter: brightness(0.6) blur(0px); 
  z-index: -1; 
}

/* чтобы форма явно выделялась */
#auth-screen form {
  background: rgba(255, 255, 255, 0.95); /* почти белая форма */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
        
.auth-box {
  background: var(--surface);
  border-radius: 24px;
  padding: 32px 24px 28px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-logo  { font-size: 2.8rem; text-align: center; }
.auth-title { font-size: 1.35rem; font-weight: 800; text-align: center; }

/* Tabs */
.auth-tabs {
  display: flex;
  background: var(--deep);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}
.auth-tab {
  flex: 1;
  padding: 9px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.auth-tab.active { background: var(--accent); color: #fff; }

.auth-form { display: flex; flex-direction: column; gap: 10px; }

.auth-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--deep);
  border: 2px solid var(--deep);
  border-radius: 12px;
  color: #fff;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}
.auth-input:focus { border-color: var(--accent); }

.auth-error   { background: #742a2a; color: #fc8181; border-radius: 10px; padding: 10px 14px; font-size: 0.84rem; text-align: center; }
.auth-success { background: #1c4532; color: #68d391; border-radius: 10px; padding: 10px 14px; font-size: 0.84rem; text-align: center; }

.auth-hint { font-size: 0.75rem; color: var(--dim); text-align: center; }

.btn-full { width: 100%; padding: 13px; font-size: 0.95rem; border-radius: 12px; margin-top: 2px; }

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
header {
  background: linear-gradient(135deg, var(--surface), var(--deep));
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(0,0,0,0.4);
  position: sticky; top: 0; z-index: 100;
  gap: 8px;
}
header h1 { font-size: 1rem; font-weight: 800; white-space: nowrap; }
.header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

#total-display {
  background: var(--accent);
  border-radius: 20px;
  padding: 5px 12px;
  font-weight: 700;
  font-size: 0.88rem;
  white-space: nowrap;
}
#grand-total { font-size: 1rem; }

.user-badge {
  display: flex; align-items: center; gap: 4px;
  background: var(--deep);
  border-radius: 20px;
  padding: 4px 8px 4px 12px;
}
#user-name-display { font-size: 0.8rem; font-weight: 700; color: #68D391; }
.btn-icon {
  background: none; border: none; cursor: pointer;
  font-size: 0.95rem; color: var(--dim); padding: 2px 4px; line-height: 1;
  transition: color 0.2s;
}
.btn-icon:hover { color: #fc8181; }

/* ══════════════════════════════════════════
   MAIN / SECTIONS
══════════════════════════════════════════ */
#app-screen { padding-bottom: 40px; }
main { padding: 12px; max-width: 500px; margin: 0 auto; }

section, .history-section {
  background: var(--surface);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
section h2 { font-size: 0.86rem; color: var(--muted); margin-bottom: 10px; text-align: center; }

/* TRAINING PANEL */
.training-panel { display: flex; flex-direction: column; gap: 10px; }
.field-label { display: block; font-size: 0.77rem; color: var(--muted); margin-bottom: 5px; }

.training-panel select {
  width: 100%;
  padding: 10px 32px 10px 12px;
  background: var(--deep);
  border: 2px solid var(--deep);
  border-radius: 10px;
  color: #fff;
  font-size: 0.9rem;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='%23a0aec0'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
  cursor: pointer; outline: none;
}
.training-panel select:focus { border-color: var(--accent); }

.training-active-row {
  background: var(--deep); border-radius: 10px; padding: 9px 12px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.training-label { font-size: 0.77rem; color: var(--muted); }
.active-date    { font-weight: 700; font-size: 0.9rem; color: #68d391; }
.sync-badge     { font-size: 0.7rem; background: #1c4532; color: #68D391; border-radius: 8px; padding: 2px 8px; margin-left: auto; }

.training-btns { display: flex; gap: 8px; }
.btn-new  { flex:1; background: linear-gradient(135deg,#2d7d46,var(--green)); color:#fff; padding:11px; border:none; border-radius:10px; font-size:0.86rem; font-weight:700; cursor:pointer; }
.btn-new:hover{
    background-color:green;
}
.btn-sync { flex:1; background: linear-gradient(135deg,#2b6cb0,var(--blue));  color:#fff; padding:11px; border:none; border-radius:10px; font-size:0.86rem; font-weight:700; cursor:pointer; }
.btn-new:active, .btn-sync:active { opacity:0.82; transform:scale(0.97); }

/* VIEW */
#view-section { border: 2px solid #1e3a5f; }
.view-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.view-header h2 { margin:0; font-size:1rem; color:#eee; }
.total-badge { background:var(--accent); border-radius:12px; padding:4px 12px; font-weight:700; font-size:0.8rem; }
.btn-danger { width:100%; margin-top:12px; padding:10px; background:#742a2a; color:#fc8181; border:none; border-radius:10px; font-size:0.86rem; font-weight:700; cursor:pointer; }
.btn-cancel { width:100%; margin-top:12px; padding:10px; background:#0f3460; color:#a0aec0; border:none; border-radius:10px; font-size:0.86rem; font-weight:700; cursor:pointer; }

.btn-danger:active { opacity:0.8; }

/* TARGET */
.target-wrapper { display:flex; justify-content:center; margin:6px 0; }
#targetCanvas   { border-radius:50%; cursor:crosshair; max-width:100%; touch-action:none; }
#hit-zone-label { text-align:center; margin-top:6px; font-size:0.8rem; color:var(--muted); min-height:18px; }

/* SET */
.set-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.set-header h2 { margin:0; font-size:0.98rem; color:#eee; }
#set-sum-display { background:var(--deep); border-radius:10px; padding:4px 10px; font-weight:700; font-size:0.86rem; }
#arrows-container { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }

.arrow-cell {
  background:var(--deep); border-radius:10px; height:64px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; border:2px solid transparent;
  transition:transform 0.1s,border-color 0.2s; user-select:none;
}
.arrow-cell:active { transform:scale(0.95); }
.arrow-cell.active { border-color:var(--accent); }
.arrow-num   { font-size:0.58rem; color:var(--dim); margin-bottom:2px; }
.arrow-score { font-size:1.45rem; font-weight:800; line-height:1; }
.arrow-cell.zone-yellow .arrow-score { color:#F6E05E; }
.arrow-cell.zone-red    .arrow-score { color:#FC8181; }
.arrow-cell.zone-blue   .arrow-score { color:#63B3ED; }
.arrow-cell.zone-black  .arrow-score { color:#A0AEC0; }
.arrow-cell.zone-white  .arrow-score { color:#E2E8F0; }
.arrow-cell.zone-miss   .arrow-score,
.arrow-cell.empty       .arrow-score  { color:#4A5568; }
.arrow-dot { width:7px; height:7px; border-radius:50%; margin-top:3px; }
.arrow-cell.zone-yellow .arrow-dot { background:#F6E05E; }
.arrow-cell.zone-red    .arrow-dot { background:#FC8181; }
.arrow-cell.zone-blue   .arrow-dot { background:#63B3ED; }
.arrow-cell.zone-black  .arrow-dot { background:#718096; }
.arrow-cell.zone-white  .arrow-dot { background:#E2E8F0; }
.arrow-cell.empty       .arrow-dot { background:transparent; }

.set-controls { display:flex; gap:8px; }
.btn { flex:1; padding:11px; border:none; border-radius:10px; font-size:0.86rem; font-weight:700; cursor:pointer; transition:opacity 0.2s,transform 0.1s; }
.btn:active { transform:scale(0.97); }
.btn-primary   { background:var(--accent); color:#fff;transition: ease 0.3s; }
.btn-primary:hover{
    background-color: #9d132a;
    transition: ease 0.3s;
}

.btn-print {
  background: #2b6cb0;
  color: #fff;
}
.btn-print:hover { background: #2c5282; }


.btn-secondary { background:var(--deep);   color:var(--muted); }



/* HISTORY */
.history-set { background:var(--deep); border-radius:10px; padding:10px; margin-bottom:8px; }
.history-set-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:7px; }
.history-set-title { font-weight:700; font-size:0.86rem; }
.history-set-sum { background:var(--bg); border-radius:8px; padding:2px 9px; font-weight:700; font-size:0.8rem; color:var(--accent); }
.history-arrows { display:flex; gap:5px; flex-wrap:wrap; }
.history-arrow {
  width:34px; height:34px; border-radius:27px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.9rem; background:var(--surface);
}
.hist-yellow { color:#F6E05E; border:2px solid #F6E05E33; }
.hist-red    { color:#FC8181; border:2px solid #FC818133; }
.hist-blue   { color:#63B3ED; border:2px solid #63B3ED33; }
.hist-black  { color:#A0AEC0; border:2px solid #A0AEC033; }
.hist-white  { color:#E2E8F0; border:2px solid #E2E8F033; }
.hist-miss   { color:#4A5568; border:2px solid #4A556833; }
#sets-history:empty::after,
#view-sets-container:empty::after {
  content:'Нет завершённых сетов';
  display:block; text-align:center; color:#4A5568; font-size:0.82rem; padding:8px 0;
}

/* ══════════════════════════════════════════
   MODALS
══════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.78);
  display:flex; align-items:center; justify-content:center;
  z-index:999;
}
.modal {
  background:var(--surface); border-radius:18px; padding:24px 20px;
  width:300px; max-width:92vw;
  box-shadow:0 10px 40px rgba(0,0,0,0.5); text-align:center;
  display:flex; flex-direction:column; gap:10px;
}
.modal h3 { font-size:1rem; }
.modal-hint { font-size:0.82rem; color:var(--muted); }
.modal-section-title { font-size:0.8rem; font-weight:700; color:var(--muted); text-align:left; }
.modal-hr { border:none; border-top:1px solid var(--deep); }
.modal input[type="number"],
.modal input[type="date"] {
  width:100%; padding:11px; border-radius:9px;
  border:2px solid var(--deep); background:var(--deep); color:#fff;
  font-size:1.05rem; text-align:center; outline:none;
  -webkit-appearance:none;
}
.modal input[type="date"] { font-size:0.92rem; }
.modal input:focus { border-color:var(--accent); }
.modal-btns { display:flex; gap:8px; }
.modal-btn {
  padding: 10px 14px;
  font-size: 0.9rem;
  border-radius: 10px;
  flex: 1; /* если хочешь равные кнопки */
}

.modal-btn.cancel {
  background: var(--deep);
  color: var(--muted);
}

/* TOAST */
#toast {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(60px);
  background:#2d3748; color:#fff;
  padding:10px 20px; border-radius:20px;
  font-size:0.86rem; font-weight:600;
  box-shadow:0 4px 20px rgba(0,0,0,0.4);
  transition:transform 0.3s ease; z-index:9999;
  pointer-events:none; white-space:nowrap;
}
#toast.show { transform:translateX(-50%) translateY(0); }

/* LOADER */
.loader-overlay {
  position:fixed; inset:0; background:rgba(26,26,46,0.85);
  display:flex; align-items:center; justify-content:center; z-index:9998;
}
.spinner {
  width:40px; height:40px; border:4px solid var(--deep);
  border-top-color:var(--accent); border-radius:50%;
  animation:spin 0.7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════
   VIEW TARGET — мишень в просмотре прошлой тренировки
═══════════════════════════════════════════════ */
.view-target-block {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.view-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--deep);
  border-radius: 8px;
  padding: 3px 10px;
}

.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}