/* Copyright © 2026 Умники и умницы */
:root{
  --bg:#ffffff;
  --surface:#F7F7F3;
  --surface-2:#FBFBF9;
  --border:#E5E3DA;
  --border-soft:#EFEEE8;
  --ink:#181A1B;
  --ink-soft:#666A6E;
  --ink-faint:#9A9D9F;
  --accent:#1F5C4A;
  --accent-dark:#123A2E;
  --accent-soft:#E7F1EC;
  --gold:#B8862B;
  --gold-soft:#FBF1DD;
  --gold-line:#E8CE93;
  --danger:#B3402B;
  --danger-soft:#FBEAE5;
  --radius-lg:12px;
  --radius-md:8px;
  --radius-sm:6px;
  --radius-pill:24px;
  --shadow-soft:0 4px 24px rgba(20,20,25,0.07);
  --shadow-modal:0 24px 64px rgba(15,15,20,0.28);
  --dock-height:78px;
  --scale-factor:1;
}


@media (min-width:1920px){
  :root{
    --scale-factor:1.35;
    --radius-lg:16px;
    --radius-md:11px;
    --radius-sm:8px;
    --radius-pill:32px;
  }
}

@media (min-width:2560px){
  :root{
    --scale-factor:1.65;
    --radius-lg:20px;
    --radius-md:13px;
    --radius-sm:10px;
    --radius-pill:40px;
  }
}

@media (min-width:3440px){
  :root{
    --scale-factor:2;
    --radius-lg:24px;
    --radius-md:16px;
    --radius-sm:12px;
    --radius-pill:48px;
  }
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;font-size:100%;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:#ffffff;
  color:var(--ink);
  font-family:'Montserrat', sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
  min-height:100%;
}
/* Базовый font-size 16px на мобиле, масштабируем только на крупных экранах */
@media (min-width:1024px){ html{ font-size:112%; } }
@media (min-width:1440px){ html{ font-size:125%; } }
@media (min-width:1920px){ html{ font-size:150%; } }
h1,h2,h3,.display{font-family:'Montserrat', sans-serif;}
a{color:inherit;}
button{font-family:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
::selection{background:var(--gold-soft);}
svg{display:inline-block;vertical-align:middle;flex-shrink:0;}


*{scrollbar-width:thin;scrollbar-color:var(--accent) var(--surface);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:var(--surface);}
::-webkit-scrollbar-thumb{background:var(--accent);border-radius:6px;border:2px solid var(--surface);}
::-webkit-scrollbar-thumb:hover{background:var(--accent-dark);}


@keyframes fadeInUp{from{opacity:0;transform:translateY(15px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeOutDown{from{opacity:1;transform:translateY(0);}to{opacity:0;transform:translateY(-8px);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes fadeOut{from{opacity:1;}to{opacity:0;}}
@keyframes slideUp{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes slideDown{from{transform:translateY(0);opacity:1;}to{transform:translateY(24px);opacity:0;}}
@keyframes popIn{from{transform:scale(0.9);opacity:0;}to{transform:scale(1);opacity:1;}}
@keyframes shake{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(2px);}30%,50%,70%{transform:translateX(-4px);}40%,60%{transform:translateX(4px);}}
@keyframes shimmer{0%{background-position:-1000px 0;}100%{background-position:1000px 0;}}
@keyframes floatUp{0%{transform:translateY(0px);}50%{transform:translateY(-12px);}100%{transform:translateY(0px);}}
@keyframes pulse{0%, 100%{transform:scale(1);}50%{transform:scale(1.05);}}
@keyframes confetti{0%{transform:translateY(0) rotate(0deg);opacity:1;}100%{transform:translateY(600px) rotate(720deg);opacity:0;}}
@media (prefers-reduced-motion: reduce){*{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}}

.content.enter{animation:fadeInUp 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;}
.content.exit{animation:fadeOutDown 0.15s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;}


.skeleton{background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%);background-size:1000px 100%;animation:shimmer 1.5s infinite linear;border-radius:8px;}
.skeleton-text{height:14px;margin-bottom:8px;border-radius:4px;}
.skeleton-title{height:24px;width:60%;margin-bottom:16px;border-radius:6px;}
.skeleton-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:12px;padding:20px;margin-bottom:16px;}
.skeleton-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%);background-size:1000px 100%;animation:shimmer 1.5s infinite linear;}
.skeleton-block{background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 50%,var(--surface) 100%);background-size:1000px 100%;animation:shimmer 1.5s infinite linear;border-radius:8px;height:100px;}
.skeleton-row{display:flex;gap:12px;margin-bottom:12px;align-items:center;}
@media (prefers-reduced-motion: reduce){*{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}}

.content.enter{animation:fadeInUp 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;}
.content.exit{animation:fadeOutDown 0.15s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;}
.rebus-banner, .stat-card, table.data-table tbody tr, .modal-card{transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);}


.page{min-height:100%;width:100%;max-width:100vw;overflow-x:hidden;background:#ffffff;}
.frame{width:100%;max-width:100%;min-height:100%;background:#ffffff;display:flex;flex-direction:column;}
.app-shell{display:flex;flex-direction:column;min-height:100vh;width:100%;max-width:100vw;}
.main-col{display:flex;flex-direction:column;flex:1;min-width:0;width:100%;}


.login-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:36px 28px;min-height:100vh;}
.login-badge{
  width:76px;height:76px;border-radius:20px;background:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:22px;
  box-shadow:0 10px 24px rgba(18,58,46,0.25);overflow:hidden;position:relative;animation:popIn .35s ease;
}
.login-badge svg{width:34px;height:34px;}
.login-title{font-size:27px;font-weight:700;margin:0 0 6px;text-align:center;letter-spacing:-0.01em;}
.login-sub{color:var(--ink-soft);font-size:14.5px;text-align:center;margin:0 0 32px;max-width:320px;line-height:1.5;}
.login-card{width:100%;max-width:340px;}
.spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--accent);animation:spin .7s linear infinite;margin:0 auto 14px;}
@keyframes spin{to{transform:rotate(360deg);}}
.inline-loading{padding:40px 20px;text-align:center;color:var(--ink-soft);font-size:13.5px;}


.welcome-screen{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;
  background:linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;animation:fadeIn 0.3s ease;
}
.welcome-animation{
  width:160px;height:160px;margin-bottom:32px;position:relative;
  animation:floatUp 3s ease-in-out infinite;
}
.welcome-emoji{
  font-size:120px;line-height:1;display:block;text-align:center;
  animation:pulse 2s ease-in-out infinite;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.15));
}
.welcome-title{
  font-size:32px;font-weight:700;color:#fff;margin:0 0 12px;
  text-align:center;letter-spacing:-0.02em;animation:slideUp 0.5s ease 0.2s both;
}
.welcome-subtitle{
  font-size:16px;color:rgba(255,255,255,0.85);margin:0 0 32px;
  text-align:center;max-width:400px;line-height:1.5;
  animation:slideUp 0.5s ease 0.3s both;
}
.welcome-office{
  background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);
  padding:16px 28px;border-radius:999px;color:#fff;font-size:15px;
  font-weight:600;animation:slideUp 0.5s ease 0.4s both;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
}
.confetti-piece{
  position:absolute;width:10px;height:10px;
  animation:confetti 3s ease-out forwards;
  opacity:0;
}


.goodbye-screen{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;
  background:linear-gradient(135deg, var(--accent-dark) 0%, var(--accent) 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:40px 20px;animation:fadeIn 0.3s ease;
}
.goodbye-animation{
  width:160px;height:160px;margin-bottom:32px;position:relative;
  animation:floatUp 3s ease-in-out infinite;
}
.goodbye-emoji{
  font-size:120px;line-height:1;display:block;text-align:center;
  animation:wave 1.5s ease-in-out infinite;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.15));
  transform-origin:70% 70%;
}
.goodbye-title{
  font-size:32px;font-weight:700;color:#fff;margin:0 0 12px;
  text-align:center;letter-spacing:-0.02em;animation:slideUp 0.5s ease 0.2s both;
}
.goodbye-subtitle{
  font-size:16px;color:rgba(255,255,255,0.85);margin:0 0 32px;
  text-align:center;max-width:400px;line-height:1.5;
  animation:slideUp 0.5s ease 0.3s both;
}
.goodbye-office{
  background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);
  padding:16px 28px;border-radius:999px;color:#fff;font-size:15px;
  font-weight:600;animation:slideUp 0.5s ease 0.4s both;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
}
@keyframes wave{
  0%, 100%{transform:rotate(0deg);}
  10%, 30%, 50%, 70%, 90%{transform:rotate(14deg);}
  20%, 40%, 60%, 80%{transform:rotate(-8deg);}
}


.topbar-brand{display:flex;align-items:center;gap:12px;}
.topbar-brand-badge{width:40px;height:40px;border-radius:12px;background:var(--accent-dark);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;}
.topbar-brand-badge svg{width:22px;height:22px;}
.topbar-brand-text{display:flex;flex-direction:column;gap:2px;}
.topbar-brand-name{font-size:14px;font-weight:700;color:var(--ink);line-height:1.2;}
.topbar-brand-office{font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:4px;}
.topbar-brand-office svg{width:13px;height:13px;}


.field{margin-bottom:16px;}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;text-transform:uppercase;letter-spacing:0.04em;}
.field input[type=text], .field input[type=password], .field select, .field textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:15px;font-family:inherit;color:var(--ink);background:#fff;transition:border-color .15s, box-shadow .15s;
}
.field textarea{resize:vertical;min-height:70px;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.field-hint{font-size:12px;color:var(--ink-faint);margin-top:5px;}
.field-row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));}
.field-row .field{margin-bottom:16px;}
.checkbox-row{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);margin-bottom:16px;}
.checkbox-row input{width:16px;height:16px;accent-color:var(--accent);}
.checkbox-list .checkbox-row{margin-bottom:0;}
.checkbox-list .checkbox-row:hover{background:var(--surface);}
.checkbox-list .checkbox-row input{cursor:pointer;}
.checkbox-list .checkbox-row span{cursor:pointer;user-select:none;}
.radio-group{display:flex;gap:8px;margin-bottom:4px;}
.radio-pill{flex:1;}
.radio-pill input{display:none;}
.radio-pill span{
  display:block;text-align:center;padding:10px 6px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:13px;font-weight:500;color:var(--ink-soft);cursor:pointer;transition:all .15s;
}
.radio-pill input:checked + span{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark);font-weight:600;}
.hidden{display:none !important;}

.field select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23666A6E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:38px;
}


.csel{position:relative;}
.csel-native{position:absolute;inset:0;opacity:0;pointer-events:none;width:100%;height:100%;}
.csel-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;
  padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:15px;font-family:inherit;color:var(--ink);background:#fff;cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.csel-trigger-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.csel-trigger svg{width:15px;height:15px;color:var(--ink-faint);flex-shrink:0;transition:transform .15s ease;}
.csel.open .csel-trigger svg{transform:rotate(180deg);}
.csel-trigger:hover{border-color:var(--ink-faint);}
.csel.open .csel-trigger{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.csel-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;
  background:#fff;border:1.5px solid var(--border-soft);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-soft);max-height:240px;overflow-y:auto;padding:5px;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .13s ease, transform .13s ease;
}
.csel.open .csel-menu{opacity:1;visibility:visible;transform:translateY(0);}
.csel.csel-position-up .csel-menu{
  top:auto;bottom:calc(100% + 6px);transform:translateY(4px);
}
.csel.csel-position-up.open .csel-menu{transform:translateY(0);}
.csel-option{
  padding:9px 11px;border-radius:var(--radius-sm);font-size:14px;color:var(--ink);cursor:pointer;transition:background .12s;
}
.csel-option:hover{background:var(--surface);}
.csel-option.selected{background:var(--accent-soft);color:var(--accent-dark);font-weight:600;}



.cdt{position:relative;}
.cdt-trigger svg:first-child{width:15px;height:15px;color:var(--accent);margin-right:2px;vertical-align:-2px;}
.cdt-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:31;width:280px;max-width:calc(100vw - 40px);
  background:#fff;border:1.5px solid var(--border-soft);border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft);padding:14px;
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .13s ease, transform .13s ease;
}
.cdt.open .cdt-menu{opacity:1;visibility:visible;transform:translateY(0);}
.cdt.cdt-position-up .cdt-menu{
  top:auto;bottom:calc(100% + 6px);transform:translateY(4px);
}
.cdt.cdt-position-up.open .cdt-menu{transform:translateY(0);}

.field-row .field:nth-child(2) .cdt-menu{left:auto;right:0;}
.cdt.open .cdt-trigger{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.cdt-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cdt-cal-month-label{font-size:13.5px;font-weight:700;color:var(--ink);text-transform:capitalize;}
.cdt-cal-head .icon-btn{width:28px;height:28px;}
.cdt-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;color:var(--ink-faint);font-weight:600;margin-bottom:4px;}
.cdt-cal-body{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:12px;}
.cdt-day-cell{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:none;background:none;
  border-radius:var(--radius-sm);font-size:13px;color:var(--ink);cursor:pointer;transition:background .12s;
}
.cdt-day-cell.empty{cursor:default;}
.cdt-day-cell:not(.empty):hover{background:var(--surface);}
.cdt-day-cell.today{color:var(--accent-dark);font-weight:700;}
.cdt-day-cell.selected{background:var(--accent);color:#fff;font-weight:700;}
.cdt-time-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.cdt-time-field label{display:block;font-size:11px;font-weight:600;color:var(--ink-soft);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em;}
.cdt-time-field .csel-trigger{padding:9px 12px;font-size:14px;}
.cdt-time-field .csel-menu{max-height:180px;}
.cdt-done{width:100%;}
.cdt-quick-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
.cdt-quick-row .btn{width:100%;}

.dropzone{
  position:relative;border:2px dashed var(--border);border-radius:var(--radius-md);padding:22px 14px;
  text-align:center;cursor:pointer;transition:all .15s;background:var(--surface);
}
.dropzone.drag-over{border-color:var(--accent);background:var(--accent-soft);}
.dropzone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.dropzone-icon{color:var(--ink-faint);margin:0 auto 8px;width:26px;height:26px;}
.dropzone-text{font-size:13px;color:var(--ink-soft);line-height:1.5;}
.dropzone-link{color:var(--accent-dark);font-weight:650;text-decoration:underline;}


.ai-gen{border:1.5px solid var(--border-soft);border-radius:var(--radius-md);padding:14px;background:var(--surface);}
.ai-gen > label{display:flex;align-items:center;gap:6px;}
.ai-gen > label svg{width:16px;height:16px;color:var(--gold);}
.ai-gen textarea{min-height:58px;resize:vertical;}
.ai-gen-row{display:flex;gap:8px;align-items:flex-end;margin-top:8px;}
.ai-gen-count{width:104px;flex:0 0 auto;}
.ai-gen-count label{font-size:12px;color:var(--ink-soft);margin-bottom:4px;display:block;}
.ai-gen-row .btn{flex:1;}
.ai-note{
  display:flex;gap:8px;margin-top:10px;padding:10px 12px;border-radius:var(--radius-sm);
  background:var(--danger-soft);color:var(--danger);font-size:12.5px;line-height:1.5;
}
.ai-note svg{width:16px;height:16px;flex:0 0 auto;margin-top:1px;}
.ai-cand-loading{
  display:flex;align-items:center;gap:8px;margin-top:12px;padding:14px;border-radius:var(--radius-sm);
  background:#fff;border:1px dashed var(--border);font-size:13px;color:var(--ink-soft);
}
.ai-cand-loading svg{width:16px;height:16px;color:var(--gold);animation:aiPulse 1.1s ease-in-out infinite;}
@keyframes aiPulse{0%,100%{opacity:.35;transform:scale(.9);}50%{opacity:1;transform:scale(1.1);}}
.ai-cand-head{font-size:12.5px;font-weight:650;color:var(--ink-soft);margin:14px 0 8px;}
.ai-cand-grid{display:grid;grid-template-columns:1fr;gap:10px;}
@media (min-width:560px){.ai-cand-grid{grid-template-columns:1fr 1fr;}}
.ai-cand{
  background:#fff;border:1.5px solid var(--border);border-radius:var(--radius-md);padding:12px;
  display:flex;flex-direction:column;gap:6px;
}
.ai-cand.picked{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.ai-cand-img{
  width:100%;height:140px;object-fit:contain;border-radius:var(--radius-sm);
  background:var(--surface);display:block;
}
.ai-cand-img-fail{
  display:flex;align-items:center;justify-content:center;color:var(--ink-faint);
  border:1px dashed var(--border);
}
.ai-cand-img-fail svg{width:22px;height:22px;}
.ai-cand-text{font-size:17px;font-weight:750;letter-spacing:.4px;word-break:break-word;}
.ai-cand-answer{font-size:13px;color:var(--ink-soft);}
.ai-cand-expl{font-size:12px;color:var(--ink-faint);line-height:1.45;}
.ai-cand-actions{display:flex;gap:6px;margin-top:auto;padding-top:4px;}
.ai-cand-actions .btn{flex:1;}
.ai-cand-regen{flex:0 0 auto !important;width:40px;padding:0;}
.ai-cand-regen svg{width:16px;height:16px;}


.search-row{position:relative;margin-bottom:14px;}
.search-row svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-faint);width:16px;height:16px;}
.search-row input{
  width:100%;padding:10px 14px 10px 38px;border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:14px;font-family:inherit;background:#fff;transition:border-color .15s;
}
.search-row input:focus{border-color:var(--accent);}

.filter-pill-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.filter-pill{
  padding:7px 14px;border-radius:999px;border:1.5px solid var(--border);background:#fff;
  font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;
  transition:all .3s cubic-bezier(.2,.9,.25,1);
  font-family:inherit;
}
.filter-pill:hover{border-color:var(--ink-faint);transform:translateY(-1px);}
.filter-pill.active{background:var(--accent-dark);border-color:var(--accent-dark);color:#fff;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 18px;border-radius:var(--radius-sm);border:1.5px solid transparent;
  font-size:14.5px;font-weight:600;cursor:pointer;transition:transform .1s, opacity .15s, background .15s, box-shadow .15s;
  font-family:inherit;
}
.btn:active{transform:scale(0.96);}
.btn svg{width:16px;height:16px;flex-shrink:0;}
.btn-primary{background:var(--accent-dark);color:#fff;}
.btn-primary:hover{background:var(--accent);box-shadow:0 4px 12px rgba(18,58,46,0.25);}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--border);}
.btn-secondary:hover{border-color:var(--ink-faint);}
.btn-gold{background:var(--gold);color:#fff;}
.btn-gold:hover{opacity:0.9;}
.btn-danger{background:#fff;color:var(--danger);border-color:var(--danger-soft);}
.btn-danger:hover{background:var(--danger-soft);}
.btn-danger-solid{background:var(--danger);color:#fff;}
.btn-ghost{background:transparent;color:var(--ink-soft);border-color:transparent;}
.btn-ghost:hover{background:var(--surface);}
.btn-block{width:100%;}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:6px;}
.btn:disabled{opacity:0.45;cursor:not-allowed;}

.form-error{background:var(--danger-soft);color:var(--danger);font-size:13.5px;padding:10px 13px;border-radius:var(--radius-sm);margin-bottom:14px;}


.topbar{
  position:static;background:#fff;
  border-bottom:1px solid var(--border-soft);padding:16px clamp(16px, 4vw, 32px);display:flex;align-items:center;justify-content:space-between;gap:10px;
  max-width:100%;box-sizing:border-box;
}
.topbar-id{display:flex;flex-direction:column;min-width:0;}
.topbar-name{font-size:15px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-office{font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:4px;}
.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.topbar-winner{display:none;}
.points-chip{
  display:flex;align-items:center;gap:6px;background:var(--gold-soft);border:1px solid var(--gold-line);
  color:#8A651E;padding:7px 12px 7px 10px;border-radius:var(--radius-pill);font-family:'Montserrat',sans-serif;font-weight:600;font-size:13.5px;
}
.points-chip svg{width:15px;height:15px;color:var(--gold);}
.icon-btn{
  width:36px;height:36px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;color:var(--ink-soft);cursor:pointer;flex-shrink:0;transition:all .15s;
}
.icon-btn:hover{background:var(--surface);color:var(--danger);border-color:var(--danger-soft);}
.icon-btn svg{width:17px;height:17px;}


.winner-banner{background:linear-gradient(135deg, #B8862B 0%, #8A651E 100%);border-radius:var(--radius-lg);padding:18px 20px;color:#fff;margin-bottom:18px;}
.winner-banner-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;opacity:0.85;margin-bottom:6px;}
.winner-banner-name{font-size:20px;font-weight:700;margin-bottom:4px;}
.winner-banner-meta{font-size:13px;opacity:0.9;}
.winner-banner-btn{background:#fff;color:#8A651E;margin-top:12px;font-size:12px;padding:8px 14px;}
.topbar-winner{display:none;}

.content{flex:1;padding:18px clamp(16px, 4vw, 32px);position:relative;padding-bottom:90px;max-width:100%;box-sizing:border-box;}
.admin-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;gap:10px;}
.admin-eyebrow{font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--gold);font-weight:700;margin:0 0 4px;}


.mob-menu-btn{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:47;
  height:48px;padding:0 22px;border-radius:10px;
  background:var(--accent);
  box-shadow:0 4px 16px rgba(18,58,46,0.30);
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:9px;
  color:#fff;
  white-space:nowrap;
  transition:box-shadow .15s, background .15s;
}
.mob-menu-btn:active{background:var(--accent-dark);box-shadow:0 2px 8px rgba(18,58,46,0.25);}
.mob-menu-btn svg{width:19px;height:19px;flex-shrink:0;}
.mob-menu-btn-label{font-size:14px;font-weight:700;letter-spacing:0.01em;}
.mob-icon-closed{display:flex;align-items:center;gap:9px;}
.mob-icon-open{display:none;align-items:center;gap:9px;}
.mob-menu-btn.open{background:var(--accent-dark);}
.mob-menu-btn.open .mob-icon-closed{display:none;}
.mob-menu-btn.open .mob-icon-open{display:flex;}

.mob-menu-overlay{
  position:fixed;inset:0;z-index:48;
  background:rgba(15,20,18,0.45);
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
.mob-menu-overlay.visible{opacity:1;pointer-events:auto;}

.mob-menu-drawer{
  position:fixed;bottom:0;left:0;right:0;z-index:49;
  background:var(--surface);
  border-radius:20px 20px 0 0;
  box-shadow:0 -8px 40px rgba(15,20,18,0.18);
  padding:12px 16px 0;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.2,.9,.25,1);
}
.mob-menu-drawer.open{transform:translateY(0);}

.mob-menu-handle{
  width:40px;height:4px;border-radius:2px;
  background:var(--border);
  margin:0 auto 16px;
}
.mob-menu-section-label{
  font-size:11px;font-weight:700;letter-spacing:0.07em;
  text-transform:uppercase;color:var(--ink-faint);
  padding:0 4px;margin-bottom:6px;margin-top:4px;
}
.mob-menu-items{display:flex;flex-direction:column;gap:2px;}
.mob-menu-item{
  display:flex;align-items:center;gap:14px;
  padding:13px 12px;border-radius:var(--radius-md);
  color:var(--ink-soft);font-size:15px;font-weight:600;
  cursor:pointer;border:none;background:transparent;
  text-align:left;width:100%;
  transition:background .15s, color .15s;
}
.mob-menu-item svg{width:20px;height:20px;flex-shrink:0;color:var(--ink-faint);transition:color .15s;}
.mob-menu-item:hover{background:var(--surface-2);color:var(--ink);}
.mob-menu-item:hover svg{color:var(--ink-soft);}
.mob-menu-item.active{background:var(--accent-soft);color:var(--accent-dark);}
.mob-menu-item.active svg{color:var(--accent-dark);}
.mob-menu-item.logout{color:var(--danger);}
.mob-menu-item.logout svg{color:var(--danger);}
.mob-menu-item.logout:hover{background:var(--danger-soft);}

.mob-menu-divider{height:1px;background:var(--border-soft);margin:8px 0;}
.mob-menu-user{
  display:flex;align-items:center;gap:12px;
  padding:12px 12px 14px;
}
.mob-menu-avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--accent-dark);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:16px;font-weight:700;flex-shrink:0;
}
.mob-menu-user-info{flex:1;min-width:0;}
.mob-menu-user-name{font-size:14px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mob-menu-user-office{font-size:12px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mob-menu-safe-area{height:env(safe-area-inset-bottom, 16px);min-height:16px;}

.mob-menu-scroll-hint{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11px;font-weight:600;color:var(--ink-faint);
  letter-spacing:0.04em;text-transform:uppercase;
  margin-bottom:12px;
}
.mob-menu-scroll-hint svg{opacity:0.5;}

.mob-menu-scroll-hint svg:last-child{transform:rotate(90deg);}
.mob-menu-scroll-hint svg:first-child{transform:rotate(90deg);}


.logout-overlay{
  position:fixed;inset:0;z-index:999;
  background:linear-gradient(145deg, var(--accent-dark) 0%, #0d2b22 100%);
  opacity:0;pointer-events:none;
  transition:opacity .4s ease;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
}
.logout-overlay.visible{opacity:1;}
.logout-wave{
  font-size:88px;line-height:1;
  opacity:0;transform:translateY(20px);
  transition:opacity .4s ease .2s, transform .4s ease .2s;
  transform-origin:70% 80%;
  display:inline-block;
}
.logout-overlay.visible .logout-wave{
  opacity:1;transform:translateY(0);
  animation:wave-hand 1s ease .6s 3;
}
@keyframes wave-hand{
  0%{transform:rotate(0deg);}
  15%{transform:rotate(18deg);}
  30%{transform:rotate(-10deg);}
  45%{transform:rotate(16deg);}
  60%{transform:rotate(-6deg);}
  75%{transform:rotate(12deg);}
  100%{transform:rotate(0deg);}
}
.logout-overlay-title{
  color:#fff;
  font-size:32px;font-weight:800;
  margin-top:24px;letter-spacing:-0.02em;
  opacity:0;transform:translateY(12px);
  transition:opacity .4s ease .3s, transform .4s ease .3s;
}
.logout-overlay.visible .logout-overlay-title{opacity:1;transform:translateY(0);}
.logout-overlay-text{
  color:rgba(255,255,255,0.55);
  font-size:15px;font-weight:500;
  margin-top:8px;
  opacity:0;transform:translateY(8px);
  transition:opacity .35s ease .45s, transform .35s ease .45s;
}
.logout-overlay.visible .logout-overlay-text{opacity:1;transform:translateY(0);}



.dock-outer{
  position:fixed;bottom:0;left:0;right:0;
  display:flex;align-items:center;justify-content:center;
  padding:14px 16px 18px;pointer-events:none;z-index:6;
}
.dock{
  pointer-events:auto;display:flex;gap:2px;background:var(--accent-dark);border-radius:var(--radius-lg);
  padding:6px;box-shadow:0 14px 30px rgba(18,58,46,0.28);width:max-content;max-width:90%;
  overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  scrollbar-width:none;-ms-overflow-style:none;
}
.dock::-webkit-scrollbar{display:none;}
.dock-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 14px;border-radius:var(--radius-md);
  color:rgba(255,255,255,0.55);cursor:pointer;transition:all .18s;background:transparent;border:none;position:relative;flex-shrink:0;
}
.dock-item svg{width:19px;height:19px;transition:transform .15s;}
.dock-item span{font-size:10.5px;font-weight:600;letter-spacing:0.01em;white-space:nowrap;}
.dock-item.active{background:var(--gold);color:#fff;}
.dock-item:not(.active):hover{color:rgba(255,255,255,0.85);}
.dock-item:active svg{transform:scale(0.82);}

.dock-scroll-arrow{
  pointer-events:none;position:absolute;
  display:flex;align-items:center;gap:4px;
  color:var(--gold);
  opacity:0;visibility:hidden;transition:all .2s;z-index:7;
  font-size:11px;font-weight:600;letter-spacing:0.02em;
  bottom:calc(100% + 6px);
}
.dock-scroll-arrow.visible{opacity:1;visibility:visible;}
.dock-scroll-arrow svg{width:14px;height:14px;}
.dock-arrow-left{left:5%;}
.dock-arrow-right{right:5%;}

@media(min-width:601px){
  .dock-scroll-arrow{display:none;}
}


.content{padding-bottom:calc(70px + 18px);}



.sidebar{display:none;}
.sidebar-brand{display:flex;align-items:center;gap:10px;margin-bottom:26px;padding:0 6px;position:relative;}
.sidebar-brand-badge{width:36px;height:36px;border-radius:10px;background:var(--accent-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .3s ease;}
.sidebar-brand-badge svg{width:20px;height:20px;}
.sidebar-brand-text{font-weight:700;font-size:14.5px;line-height:1.25;transition:opacity .3s ease;flex:1;}
.sidebar-nav{display:flex;flex-direction:column;gap:3px;flex:1;}
.sidebar-item{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;color:var(--ink-soft);
  cursor:pointer;font-size:14px;font-weight:600;border:none;background:transparent;text-align:left;width:100%;position:relative;transition:all .15s;
}
.sidebar-item svg{width:18px;height:18px;flex-shrink:0;}
.sidebar-item span{transition:opacity .3s ease, width .3s ease;}
.sidebar-item:hover{background:var(--surface-2);color:var(--ink);}
.sidebar-item.active{background:var(--accent-dark);color:#fff;}
.sidebar-footer{border-top:1px solid var(--border-soft);padding-top:14px;margin-top:10px;}
.sidebar-stats{display:flex;flex-direction:column;gap:8px;margin-bottom:12px;}
.sidebar-stats .points-chip{width:100%;justify-content:flex-start;box-sizing:border-box;}
.sidebar-toggle-collapse{
  width:28px;height:28px;border-radius:8px;
  background:#fff;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;color:var(--ink-soft);flex-shrink:0;
}
.sidebar-toggle-collapse:hover{background:var(--surface-2);border-color:var(--ink-faint);}
.sidebar-toggle-collapse svg{width:16px;height:16px;}
.sidebar-toggle-expand{
  display:none;width:36px;height:36px;border-radius:10px;
  background:var(--accent-dark);border:none;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;color:#fff;flex-shrink:0;
}
.sidebar-toggle-expand:hover{background:var(--accent);transform:scale(1.05);}
.sidebar-toggle-expand svg{width:20px;height:20px;}
.sidebar.collapsed .sidebar-label{opacity:0;width:0;overflow:hidden;}
.sidebar.collapsed .sidebar-brand-text{opacity:0;width:0;overflow:hidden;}
.sidebar.collapsed .sidebar-brand-badge{opacity:0;width:0;overflow:hidden;padding:0;margin:0;}
.sidebar.collapsed .sidebar-toggle-collapse{display:none;}
.sidebar.collapsed .sidebar-toggle-expand{display:flex;}

.sidebar-item{position:relative;}
.sidebar-item-tooltip{
  position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:var(--accent-dark);color:#fff;padding:6px 12px;border-radius:8px;
  font-size:13px;white-space:nowrap;pointer-events:none;z-index:200;
  opacity:0;transition:opacity .15s ease;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.sidebar.collapsed .sidebar-item:hover .sidebar-item-tooltip{opacity:1;}


.rebus-banner{
  position:relative;background:linear-gradient(150deg, #1F5C4A 0%, #123A2E 100%);
  border-radius:var(--radius-lg);padding:clamp(18px, 4vw, 24px) clamp(16px, 3vw, 22px);color:#ffffff;overflow:hidden;margin-bottom:18px;
  cursor:pointer;border:1px solid var(--border);text-align:left;width:100%;box-sizing:border-box;
}
.rebus-banner:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(31,92,74,0.15);}
.rebus-banner::before{
  content:"";position:absolute;top:-40px;right:-40px;width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.10) 0%, transparent 70%);
}
.rebus-banner::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background-image:radial-gradient(circle, rgba(255,255,255,0.5) 2.5px, transparent 2.6px);
  background-size:14px 14px;background-position:6px 3px;opacity:0.14;
}
.banner-week-badge{
  display:inline-flex;align-items:center;gap:6px;background:var(--gold);color:#fff;font-size:11px;font-weight:700;
  padding:5px 11px;border-radius:var(--radius-pill);letter-spacing:0.03em;text-transform:uppercase;margin-bottom:14px;
}
.banner-title{font-size:clamp(18px, 4vw, 22px);font-weight:700;margin:0 0 6px;letter-spacing:-0.01em;color:#ffffff;}
.banner-sub{font-size:clamp(12.5px, 2.5vw, 13.5px);color:rgba(255,255,255,0.85);margin:0 0 16px;line-height:1.5;}
.banner-meta-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.banner-progress-txt{font-family:'Montserrat',sans-serif;font-size:12.5px;color:rgba(255,255,255,0.75);display:flex;align-items:center;gap:6px;}
.banner-cta{
  display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--accent-dark);font-weight:650;
  font-size:13.5px;padding:9px 15px;border-radius:var(--radius-pill);
}
.banner-countdown{font-size:11px;color:rgba(255,255,255,0.6);margin-top:12px;font-family:'Montserrat',sans-serif;}

/* Events banner - такой же цвет как у winner-banner */
.events-banner{
  background:linear-gradient(135deg, #B8862B 0%, #8A651E 100%);
}
.events-banner:hover{box-shadow:0 12px 28px rgba(184,134,43,0.25);}


.stat-row{display:grid;grid-template-columns:repeat(auto-fit, minmax(min(100%, 90px), 1fr));gap:10px;margin-bottom:20px;}
.stat-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:14px 12px;text-align:center;}
.stat-value{font-family:'Montserrat',sans-serif;font-size:clamp(18px, 4vw, 20px);font-weight:600;color:var(--accent-dark);}
.stat-label{font-size:clamp(10px, 2vw, 11px);color:var(--ink-soft);margin-top:3px;line-height:1.3;}


.records-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px, 100%), 1fr));gap:10px;max-width:100%;}
.record-card{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:14px 12px;text-align:center;transition:transform .15s ease, box-shadow .15s ease;min-width:0;}
.record-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);}
.record-icon{font-size:clamp(24px, 5vw, 28px);margin-bottom:6px;}
.record-value{font-family:'Montserrat',sans-serif;font-size:clamp(16px, 3.5vw, 18px);font-weight:650;color:var(--accent-dark);margin-bottom:3px;}
.record-label{font-size:clamp(10px, 2vw, 11px);color:var(--ink-soft);line-height:1.3;}


.section{margin-bottom:26px;}
.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px;}
.section-title{font-size:16.5px;font-weight:700;margin:0;display:flex;align-items:center;gap:8px;}
.section-title svg{width:18px;height:18px;color:var(--accent);}
.section-note{font-size:12.5px;color:var(--ink-soft);margin:-6px 0 12px;line-height:1.5;}
.info-banner{
  display:flex;gap:9px;align-items:flex-start;background:var(--gold-soft);border:1px solid var(--gold-line);color:#8A651E;font-size:12.5px;
  padding:10px 13px;border-radius:var(--radius-sm);margin-bottom:14px;line-height:1.5;
}
.info-banner svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;}

.focus-condition-card{background:linear-gradient(135deg, #1F5C4A 0%, #123A2E 100%);border-radius:var(--radius-lg);padding:18px 20px;color:#fff;margin-bottom:20px;margin-top:18px;}
.focus-condition-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.04em;opacity:0.9;}
.focus-condition-head svg{width:18px;height:18px;}
.focus-condition-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.focus-condition-list li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.5;}
.focus-condition-list li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;border-radius:50%;background:#fff;opacity:0.85;}


.table-wrap{border:1px solid var(--border-soft);border-radius:var(--radius-md);overflow-x:auto;overflow-y:hidden;background:#fff;-webkit-overflow-scrolling:touch;max-width:100%;}
table.data-table{width:100%;min-width:100%;border-collapse:collapse;font-size:clamp(12px, 2vw, 13.5px);}
table.data-table thead th{
  background:var(--surface);text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:0.05em;
  color:var(--ink-soft);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--border-soft);white-space:nowrap;
}
table.data-table tbody td{padding:11px 12px;border-bottom:1px solid var(--border-soft);vertical-align:middle;}
table.data-table tbody tr:last-child td{border-bottom:none;}
table.data-table tbody tr:hover{background:var(--surface-2);}
.cell-strong{font-weight:600;}
.cell-soft{color:var(--ink-soft);font-size:12.5px;}
.row-actions{display:flex;gap:6px;justify-content:flex-end;}
.table-empty{padding:34px 20px;text-align:center;color:var(--ink-faint);font-size:13.5px;}


.drag-table tbody tr[draggable="true"]{cursor:grab;}
.drag-table tbody tr.row-dragging{opacity:0.4;background:var(--surface-2);}
.drag-handle-cell{width:28px;color:var(--ink-faint);}
.drag-handle-cell svg{width:16px;height:16px;display:block;}


.rebus-drag-table tbody tr[draggable="true"]{cursor:grab;}
.rebus-drag-table tbody tr.row-dragging{opacity:0.4;background:var(--surface-2);}
.rebus-drag-table .drag-handle{width:32px;color:var(--ink-faint);cursor:grab;padding:8px;}
.rebus-drag-table .drag-handle svg{width:18px;height:18px;display:block;}

.badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:650;padding:4px 9px;border-radius:var(--radius-sm);white-space:nowrap;}
.badge-gold{background:var(--gold-soft);color:#8A651E;}
.badge-green{background:var(--accent-soft);color:var(--accent-dark);}
.badge-red{background:var(--danger-soft);color:var(--danger);}
.badge-neutral{background:var(--surface);color:var(--ink-soft);border:1px solid var(--border-soft);}

.rank-cell{display:flex;align-items:center;gap:6px;font-family:'Montserrat',sans-serif;font-weight:600;}
.rank-change{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0;}
.rank-change svg{width:16px;height:16px;}
.rank-up{color:#22c55e;}
.rank-down{color:#ef4444;}
.rank-neutral{color:#94a3b8;}
.rank-badge{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rank-badge svg{width:13px;height:13px;}
.rank-1{background:#F6E3A8;color:#8A651E;}
.rank-2{background:#E4E4E4;color:#6b6b6b;}
.rank-3{background:#E9CBAE;color:#8a5a30;}

.lb-toggle{display:flex;gap:6px;margin-bottom:14px;}
.lb-toggle button{
  flex:1;padding:9px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:#fff;
  font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:all .15s;
}
.lb-toggle button.active{background:var(--accent-dark);color:#fff;border-color:var(--accent-dark);}


.lb-period{display:inline-flex;gap:3px;padding:3px;background:var(--surface);border-radius:var(--radius-pill);margin-bottom:14px;}
.lb-period button{
  display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius-pill);border:none;background:transparent;
  font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:all .15s;
}
.lb-period button svg{width:14px;height:14px;}
.lb-period button.active{background:#fff;color:var(--accent-dark);box-shadow:var(--shadow-soft);}


.step-row-wrap{overflow-x:auto;margin-bottom:22px;}
.step-row-wrap::-webkit-scrollbar{display:none;}
.step-row-wrap{scrollbar-width:none;-ms-overflow-style:none;}
.step-row{display:flex;gap:8px;flex-wrap:nowrap;min-width:min-content;}
.step-square{
  width:clamp(38px, 8vw, 42px);height:clamp(38px, 8vw, 42px);border-radius:var(--radius-sm);border:1.5px solid var(--border);background:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:clamp(13px, 2.5vw, 14px);color:var(--ink-soft);cursor:pointer;
  transition:all .15s;flex-shrink:0;
}
.step-square:hover{border-color:var(--ink-faint);}
.step-square.solved{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark);}
.step-square.current{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);color:var(--ink);}
.step-square svg{width:16px;height:16px;}
.solve-card{
  border:1.5px solid var(--border);border-radius:var(--radius-lg);padding:clamp(20px, 5vw, 32px) clamp(16px, 4vw, 24px);text-align:center;background:#fff;
  position:relative;overflow:hidden;max-width:100%;box-sizing:border-box;
  transition:opacity 0.3s ease, transform 0.3s ease;
}
.solve-card-text{font-size:clamp(24px, 6vw, 34px);font-weight:800;letter-spacing:0.02em;margin-bottom:22px;color:var(--ink);word-break:break-word;}
.solve-card-img-wrap{margin-bottom:22px;max-width:100%;}
.solve-card-img{
  max-width:100%;max-height:min(400px, 50vh);border-radius:var(--radius-md);
  object-fit:contain;background:var(--surface);display:block;margin-left:auto;margin-right:auto;
  box-shadow:0 4px 20px rgba(0,0,0,0.08);border:1px solid var(--border-soft);
  image-rendering:high-quality;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;
  -ms-interpolation-mode:nearest-neighbor;
}
.image-error{
  padding:20px;background:var(--danger-soft);color:var(--danger);border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;
}
.image-error svg{width:18px;height:18px;}
.solve-input-row{display:flex;flex-direction:column;gap:10px;max-width:380px;margin:0 auto;}
.solve-input-row input{flex:1;padding:12px 15px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:15px;text-align:center;font-family:'Montserrat', sans-serif;transition:border-color .3s ease, box-shadow .3s ease;}
.solve-input-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);}
.auto-advance-message{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 15px;background:var(--accent-soft);color:var(--accent-dark);border-radius:var(--radius-sm);font-size:14px;font-weight:600;}
.auto-advance-message svg{width:18px;height:18px;flex-shrink:0;}
@media (min-width:640px){
  .solve-input-row{flex-direction:row;}
}
.solve-solved-tag{display:flex;align-items:center;justify-content:center;gap:9px;color:var(--accent-dark);font-weight:700;font-size:16px;margin-bottom:18px;}
.solve-solved-tag svg{width:20px;height:20px;background:var(--accent);color:#fff;border-radius:50%;padding:4px;}
.solve-answer-display{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:18px;padding:12px 16px;background:var(--surface);border:1px solid var(--border);border-radius:8px;}
.solve-answer-label{color:var(--ink-soft);font-size:14px;}
.solve-answer-value{color:var(--accent-dark);font-weight:700;font-size:16px;}
.solve-solved-sub{color:var(--ink-soft);font-size:13px;margin-top:-12px;margin-bottom:18px;}
.solve-card.shake{animation:shake .35s;}
.solve-complete{padding:20px 0;}
.solve-complete svg{width:44px;height:44px;color:var(--gold);margin:0 auto 14px;}


#modal-root{position:fixed;inset:0;z-index:50;pointer-events:none;}
.modal-overlay{
  position:absolute;inset:0;background:rgba(15,17,18,0.5);backdrop-filter:blur(2px);
  display:flex;align-items:flex-end;justify-content:center;pointer-events:auto;animation:fadeIn .18s ease;
  padding:20px;overflow-y:auto;
}
.modal-overlay.exit{animation:fadeOut .2s ease forwards;}
.modal-overlay.exit .modal-card{animation:slideDown .2s cubic-bezier(.55,.085,.68,.53) forwards;}
@media (min-height:640px){.modal-overlay{align-items:center;}}
.modal-card{
  background:#fff;width:100%;max-width:min(720px, 90vw);max-height:calc(100vh - 80px);display:flex;flex-direction:column;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-modal);animation:slideUp .22s cubic-bezier(.2,.9,.25,1);
  margin:auto;overflow:hidden;
}
@media (min-height:640px){.modal-card{border-radius:var(--radius-lg);max-height:calc(90vh - 40px);}}
@media (min-width:1200px){.modal-card{max-width:min(900px, 85vw);}}

.modal-card-wide{max-width:min(1400px, 92vw);}
@media (min-width:700px){.modal-card-wide{width:92vw;}}
@media (min-height:640px){.modal-card-wide{max-height:90vh;height:90vh;}}

.modal-card > form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;overflow:hidden;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border-soft);flex-shrink:0;}
.modal-title{font-size:17px;font-weight:700;margin:0;}
.modal-body{padding:18px 20px;overflow-y:auto;overflow-x:hidden;flex:1 1 auto;min-height:0;}
.modal-footer{padding:14px 20px 20px;display:flex;gap:10px;border-top:1px solid var(--border-soft);flex-shrink:0;position:sticky;bottom:0;background:#fff;z-index:10;}
.modal-footer .btn{flex:1;}

.confirm-icon{width:46px;height:46px;border-radius:var(--radius-md);background:var(--danger-soft);color:var(--danger);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.confirm-icon svg{width:22px;height:22px;}
.confirm-text{font-size:14.5px;color:var(--ink-soft);line-height:1.55;}
.confirm-text b{color:var(--ink);}


.member-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--border-soft);}
.member-row:last-child{border-bottom:none;}
.member-row-name{flex:1;font-size:13.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.member-row select{flex-shrink:0;width:150px;padding:7px 28px 7px 9px;font-size:12.5px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background-position:right 8px center;}
.add-member-row{display:flex;gap:8px;margin-top:10px;}
.add-member-row select{flex:1;}


#toast-container{position:fixed;top:16px;left:0;right:0;z-index:70;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 16px;}
.toast{
  pointer-events:auto;max-width:480px;width:100%;display:flex;align-items:center;gap:10px;
  background:#20221F;color:#fff;padding:13px 14px;border-radius:var(--radius-md);box-shadow:0 12px 28px rgba(0,0,0,0.22);
  transform:translateY(-16px);opacity:0;transition:transform .28s cubic-bezier(.2,.9,.25,1), opacity .28s;
}
.toast.show{transform:translateY(0);opacity:1;}
.toast.hide{transform:translateY(-10px);opacity:0;}
.toast-icon{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.toast-icon svg{width:14px;height:14px;}
.toast-success .toast-icon{background:var(--accent);color:#fff;}
.toast-error .toast-icon{background:var(--danger);color:#fff;}
.toast-info .toast-icon{background:var(--gold);color:#fff;}
.toast-msg{font-size:13.5px;font-weight:500;line-height:1.4;flex:1;}
.toast-close{background:none;border:none;color:rgba(255,255,255,0.55);cursor:pointer;padding:2px;flex-shrink:0;}
.toast-close svg{width:14px;height:14px;}


.empty-state{padding:40px 20px;text-align:center;}
.empty-state svg{width:34px;height:34px;color:var(--ink-faint);margin:0 auto 10px;}
.empty-state-title{font-weight:700;font-size:14.5px;margin-bottom:4px;}
.empty-state-sub{font-size:12.5px;color:var(--ink-soft);}


@media (min-width:1200px){
  .app-shell{flex-direction:row;}
  .sidebar{
    display:flex;flex-direction:column;width:250px;flex-shrink:0;background:var(--surface);
    border-right:1px solid var(--border-soft);padding:22px 14px;height:100vh;position:fixed;top:0;left:0;
    transition:width .3s cubic-bezier(.2,.9,.25,1);overflow-y:auto;overflow-x:hidden;z-index:10;
  }
  .main-col{margin-left:250px;transition:margin-left .3s cubic-bezier(.2,.9,.25,1);}
  .sidebar.collapsed{width:68px;padding:22px 8px;}
  .sidebar.collapsed .sidebar-item{justify-content:center;padding:10px;gap:0;}
  .sidebar.collapsed .sidebar-stats{display:none;}
  .sidebar.collapsed .sidebar-brand{justify-content:center;}
  .sidebar.collapsed ~ .main-col{margin-left:68px;}
  .mob-menu-btn{display:none;}
  .mob-menu-overlay{display:none;}
  .mob-menu-drawer{display:none;}
  .dock-outer{display:none;}
  .content{padding-bottom:18px;}
  .topbar{padding:18px clamp(24px, 5vw, 48px);}
  .topbar-brand{display:none;}
  .content{padding:28px clamp(24px, 5vw, 48px) 40px;max-width:min(1400px, 90%);width:100%;margin:0 auto;box-sizing:border-box;}
  .login-wrap{padding:60px;}

  .home-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start;}
  .home-grid .section{margin-bottom:20px;}
  .home-grid > div > *:last-child{margin-bottom:0;}
  .stat-row{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);}
  .rebus-banner{margin-bottom:20px;}
  .banner-daily{margin-top:16px;}
  .progress-widget{margin-bottom:20px;}

  
  .topbar-right{display:none;}
  .winner-banner-mobile-only{display:none;}
  .topbar-winner{display:flex;flex:1;min-width:0;}
  .winner-banner-topbar{
    margin-bottom:0;flex:1;min-width:0;padding:10px 18px;
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  }
  .winner-banner-topbar .winner-banner-label{margin-bottom:0;flex-shrink:0;}
  .winner-banner-topbar .winner-banner-name{font-size:14.5px;margin-bottom:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .winner-banner-topbar .winner-banner-meta{font-size:12.5px;opacity:0.85;white-space:nowrap;}
  .winner-banner-topbar .winner-banner-btn{margin-top:0;padding:6px 12px;font-size:11.5px;flex-shrink:0;white-space:nowrap;}
}


@media (min-width:1920px){
  .content{max-width:min(1600px, 85%);}
}

@media (min-width:2560px){
  .content{max-width:min(1800px, 80%);}
  .sidebar{width:300px;}
  .main-col{margin-left:300px;transition:margin-left .3s cubic-bezier(.2,.9,.25,1);}
  .sidebar.collapsed{width:85px;}
  .sidebar.collapsed ~ .main-col{margin-left:85px;}
}


:root{
  --flame:#E8622C;
  --flame-soft:#FCE9E0;
  --bronze:#B5732F;
  --bronze-soft:#F5E7D8;
  --silver:#7C8590;
  --silver-soft:#EEF0F2;
}


.streak-chip{background:var(--flame-soft);border-color:#F3C7AE;color:#A8451B;}
.streak-chip svg{color:var(--flame);}
.mini-tag{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:var(--radius-pill);background:var(--surface);color:var(--ink-soft);border:1px solid var(--border-soft);vertical-align:middle;}
.mini-tag.streak-bronze{background:var(--bronze-soft);color:var(--bronze);border-color:#E7CBA6;}
.mini-tag.streak-silver{background:var(--silver-soft);color:#565E67;border-color:#D8DCE1;}
.mini-tag.streak-gold{background:var(--gold-soft);color:#8A651E;border-color:var(--gold-line);}


.banner-daily{background:linear-gradient(150deg, #3A2E12 0%, var(--gold) 130%);margin-top:12px;}
.banner-daily .banner-cta{color:#5c4413;}


.progress-widget{margin-bottom:20px;}
.progress-bar-wrap{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:14px 16px;}
.progress-bar-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:650;color:var(--ink-soft);margin-bottom:9px;}
.progress-bar-track{height:9px;border-radius:6px;background:var(--border-soft);overflow:hidden;}
.progress-bar-fill{height:100%;border-radius:6px;background:linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 100%);transition:width .5s cubic-bezier(.2,.9,.25,1);}
.progress-circle-wrap{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:14px 16px;}
.progress-ring{transform:rotate(-90deg);flex-shrink:0;}
.progress-ring-bg{fill:none;stroke:var(--border-soft);stroke-width:7;}
.progress-ring-fg{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .6s cubic-bezier(.2,.9,.25,1);}
.progress-circle-label{display:flex;flex-direction:column;}
.progress-pct{font-family:'Montserrat',sans-serif;font-weight:700;font-size:18px;color:var(--accent-dark);}
.progress-sub{font-size:11.5px;color:var(--ink-soft);}


.wheel-card{background:linear-gradient(150deg, #FFF8EE 0%, var(--gold-soft) 100%);border:1px solid var(--gold-line);border-radius:var(--radius-lg);padding:18px 18px 20px;}
.wheel-card .section-title{margin-bottom:2px;}
.wheel-done-note{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--accent-dark);background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:10px 12px;}
.wheel-done-note svg{width:16px;height:16px;color:var(--accent);}
.wheel-modal-card .modal-body{padding-bottom:26px;}
.wheel-wrap{position:relative;width:220px;height:220px;margin:6px auto 0;}
.wheel-pointer{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-size:22px;color:var(--gold);z-index:2;filter:drop-shadow(0 2px 2px rgba(0,0,0,0.25));}
.wheel-svg{border-radius:50%;box-shadow:0 8px 28px rgba(0,0,0,0.18);transform:rotate(0deg);}
.wheel-result{min-height:30px;margin-top:16px;}
.wheel-result-prize{display:inline-flex;align-items:center;gap:7px;background:var(--accent-soft);color:var(--accent-dark);font-weight:700;font-size:14px;padding:9px 16px;border-radius:var(--radius-pill);animation:popIn .3s ease;}
.wheel-result-prize svg{width:16px;height:16px;}


.wheel-page-main{text-align:center;margin-top:24px;}
/* Колесо: адаптивный размер через CSS переменную */
.wheel-wrap-large{
  position:relative;
  width:min(400px, calc(100vw - 48px));
  height:min(400px, calc(100vw - 48px));
  margin:0 auto;
}
.wheel-svg-large{
  width:100%;height:100%;
  border-radius:50%;box-shadow:0 12px 40px rgba(0,0,0,0.2);transform:rotate(0deg);
}
.wheel-page-result{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:32px 24px;text-align:center;margin-top:24px;}
.wheel-page-spin-result{min-height:40px;margin-top:24px;}
.wheel-page-prize-won{animation:popIn .4s ease;}
.wheel-result-icon{width:56px;height:56px;margin:0 auto 12px;background:var(--accent-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent-dark);}
.wheel-result-icon svg{width:28px;height:28px;}
.wheel-result-label{font-size:13px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:8px;}
.wheel-result-prize-big{font-size:24px;font-weight:700;color:var(--ink);margin-bottom:12px;}
.wheel-result-note{font-size:14px;color:var(--ink-soft);line-height:1.5;max-width:420px;margin:0 auto;}

@media(max-width:560px){
  .wheel-wrap-large{width:320px;height:320px;}
  .wheel-svg-large{width:320px;height:320px;}
  .wheel-pointer-large{font-size:30px;}
  .wheel-result-prize-big{font-size:20px;}
}


.random-event-banner{
  background:linear-gradient(135deg,#FF6B35 0%,#F7931E 100%);color:#fff;border-radius:var(--radius-md);
  padding:18px 20px;margin-bottom:14px;display:flex;align-items:center;gap:16px;
  box-shadow:0 6px 20px rgba(255,107,53,0.25);animation:slideIn .4s ease;
}
.random-event-icon{
  width:48px;height:48px;background:rgba(255,255,255,0.2);border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.random-event-icon svg{width:26px;height:26px;}
.random-event-content{flex:1;}
.random-event-title{font-size:16px;font-weight:700;margin-bottom:4px;}
.random-event-desc{font-size:13px;opacity:0.95;margin-bottom:6px;line-height:1.4;}
.random-event-time{font-size:12px;opacity:0.9;display:flex;align-items:center;gap:5px;}
.random-event-time svg{width:13px;height:13px;}

@media(max-width:560px){
  .random-event-banner{padding:14px 16px;}
  .random-event-icon{width:40px;height:40px;}
  .random-event-icon svg{width:22px;height:22px;}
  .random-event-title{font-size:14px;}
  .random-event-desc{font-size:12px;}
}


.activity-feed{display:flex;flex-direction:column;gap:2px;}
.activity-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--border-soft);}
.activity-row:last-child{border-bottom:none;}
.activity-icon{width:26px;height:26px;border-radius:50%;background:var(--surface);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.activity-icon svg{width:13px;height:13px;}
.activity-text{flex:1;font-size:12.5px;color:var(--ink);line-height:1.4;min-width:0;}
.activity-time{font-size:10.5px;color:var(--ink-faint);white-space:nowrap;flex-shrink:0;}


.lb-period{display:flex;gap:4px;margin-bottom:14px;background:var(--surface);padding:4px;border-radius:var(--radius-pill);width:fit-content;}
.lb-period button{
  display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-pill);border:none;background:transparent;
  font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:all .15s;
}
.lb-period button svg{width:14px;height:14px;flex-shrink:0;}
.lb-period button.active{background:#fff;color:var(--accent-dark);box-shadow:var(--shadow-soft);}


.solve-tabs{margin-bottom:18px;}

/* Контейнер для страниц событий и выбора режима - выравнивание по левому краю на десктопе */
.events-page-container{max-width:100%;margin:0;}
@media(max-width:720px){
  .events-page-container{max-width:720px;margin:0 auto;}
}

.rebus-mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:900px;margin:0 auto;justify-items:center;}
/* На десктопе для events-page-container - выравнивание по левому краю */
.events-page-container .rebus-mode-grid{margin:0;justify-items:stretch;}
.rebus-mode-card{
  text-align:center;background:#fff;border:2px solid var(--border);border-radius:var(--radius-md);padding:28px 20px;
  cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;width:100%;
}
.rebus-mode-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.08);}
.rebus-mode-icon{
  width:64px;height:64px;background:var(--accent-soft);border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--accent-dark);margin-bottom:16px;
}
.rebus-mode-icon svg{width:32px;height:32px;}
.rebus-mode-title{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:8px;}
.rebus-mode-desc{font-size:13px;color:var(--ink-soft);line-height:1.5;max-width:280px;}

@media(max-width:720px){
  .rebus-mode-grid{grid-template-columns:1fr;}
}


.tournament-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px, 100%), 1fr));gap:16px;margin-bottom:12px;max-width:100%;}
@media (min-width:768px){
  .tournament-grid{grid-template-columns:repeat(auto-fill,minmax(min(320px, 100%), 1fr));gap:20px;}
}
.tournament-card{
  text-align:left;background:linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;cursor:pointer;
  transition:border-color .2s ease;display:flex;flex-direction:column;gap:10px;
  position:relative;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.tournament-card:not(.disabled):hover{
  border-color:var(--accent);
}
.tournament-card.disabled{cursor:default;opacity:0.5;filter:grayscale(0.6);}
.tournament-card-theme{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--gold);display:inline-flex;align-items:center;gap:6px;
  background:var(--gold-soft);padding:5px 11px;border-radius:var(--radius-pill);
  width:fit-content;
}
.tournament-card-name{font-size:18px;font-weight:700;line-height:1.25;color:var(--ink);margin-top:2px;}
.tournament-card-dates{font-size:12.5px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;margin-top:2px;}
.tournament-card-count{
  font-size:13.5px;color:var(--accent-dark);font-weight:650;
  background:var(--accent-soft);padding:7px 13px;border-radius:var(--radius-sm);
  width:fit-content;margin-top:6px;
}
.tournament-header{
  background:linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border-radius:var(--radius-lg);padding:20px;border:1px solid var(--border-soft);
}


.hint-reveal-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px;}
.hint-chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-dark);font-size:12.5px;font-weight:650;padding:6px 12px;border-radius:var(--radius-pill);}
.hint-chip svg{width:14px;height:14px;}
.hint-buttons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px;}
.solve-answer-hint{text-align:center;font-size:12px;color:var(--ink-soft);margin-top:6px;margin-bottom:4px;}
.solve-card{position:relative;overflow:hidden;}
.solve-card.pop-success{animation:cardPop .6s ease;}
@keyframes cardPop{0%{box-shadow:0 0 0 0 rgba(31,92,74,0.35);}50%{box-shadow:0 0 0 14px rgba(31,92,74,0);}100%{box-shadow:0 0 0 0 rgba(31,92,74,0);}}
.points-pop{
  position:absolute;top:14px;right:20px;font-family:'Montserrat',sans-serif;font-weight:800;font-size:20px;
  color:var(--accent);animation:pointsFloat 1.05s ease forwards;pointer-events:none;
}
@keyframes pointsFloat{0%{opacity:0;transform:translateY(6px) scale(0.8);}25%{opacity:1;transform:translateY(-6px) scale(1.05);}100%{opacity:0;transform:translateY(-34px) scale(1);}}


.rebus-avg-rating{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:12px;font-size:13px;}
.rebus-avg-rating .rating-stars-view svg{width:18px;height:18px;}
.rebus-difficulty-label{font-size:13px;color:var(--ink-soft);font-weight:500;}
.rebus-difficulty-badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:0.02em;}
.rebus-difficulty-badge.diff-1{background:#E7F1EC;color:#1F5C4A;}
.rebus-difficulty-badge.diff-2{background:#FFF8E1;color:#B8862B;}
.rebus-difficulty-badge.diff-3{background:#FFE5D9;color:#D97741;}
.rebus-difficulty-badge.diff-4{background:#FFE0E6;color:#B3402B;}
.rebus-difficulty-badge.diff-5{background:#F3E5FF;color:#7C3AED;}
.rating-separator{width:1px;height:18px;background:var(--border);margin:0 4px;}


.achievement-button-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));gap:8px;max-height:280px;overflow-y:auto;padding:8px;border:1.5px solid var(--border);border-radius:var(--radius-sm);}
.achievement-toggle-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;transition:all 0.15s ease;text-align:center;}
.achievement-toggle-btn:hover{background:var(--surface-2);border-color:var(--accent);}
.achievement-toggle-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.achievement-toggle-btn .achievement-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;}
.achievement-toggle-btn .achievement-icon svg{width:20px;height:20px;}
.achievement-toggle-btn.active .achievement-icon svg{stroke:#fff;color:#fff;}
.achievement-toggle-btn .achievement-title{font-size:12px;font-weight:500;line-height:1.3;}
.achievement-toggle-btn .achievement-requirement{font-size:10px;opacity:0.7;line-height:1.2;margin-top:2px;}

.rebus-button-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:8px;max-height:280px;overflow-y:auto;padding:8px;border:1.5px solid var(--border);border-radius:var(--radius-sm);}
.rebus-toggle-btn{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer;transition:all 0.15s ease;text-align:left;}
.rebus-toggle-btn:hover{background:var(--surface-2);border-color:var(--accent);}
.rebus-toggle-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.rebus-toggle-btn .rebus-preview{font-size:13px;font-weight:500;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rebus-toggle-btn .rebus-answer{font-size:11px;opacity:0.7;line-height:1.2;}


.rating-block{margin:0;}
.rating-stars{display:flex;gap:6px;justify-content:center;margin-bottom:12px;}
.star-btn{background:none;border:none;padding:2px;cursor:pointer;color:var(--border);transition:color .15s ease, transform .15s ease;}
.star-btn svg{width:26px;height:26px;}
.star-btn.active{color:var(--gold);}
.star-btn:hover{transform:scale(1.12);}
.rating-actions{display:flex;gap:10px;}
.rating-actions .btn{flex:1;transition:flex .28s cubic-bezier(.2,.9,.25,1);}
.rating-actions.split .btn-secondary{flex:0 0 calc(50% - 5px);}
.rating-actions.split .btn-primary{flex:1;animation:ratingSubmitIn .28s ease;}
@keyframes ratingSubmitIn{0%{opacity:0;transform:translateX(8px);}100%{opacity:1;transform:translateX(0);}}
.rating-comment-input{width:100%;min-height:64px;padding:10px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;resize:vertical;margin-bottom:10px;font-family:inherit;animation:ratingSubmitIn .25s ease;}
.rating-done{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--accent-dark);font-weight:600;font-size:14px;margin:14px 0;}
.rating-stars-view{display:inline-flex;gap:2px;}
.rating-stars-view svg{width:16px;height:16px;}
.rating-comment-view{font-weight:400;color:var(--ink-soft);font-size:13px;margin-top:4px;text-align:center;max-width:320px;}


.table-input{width:100%;padding:7px 9px;border:1.5px solid var(--border);border-radius:6px;font-size:13.5px;}


.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden;}
.confetti-piece{
  position:absolute;top:-12px;width:8px;height:14px;opacity:0.9;border-radius:2px;
  animation-name:confettiFall;animation-timing-function:cubic-bezier(.3,.6,.6,1);animation-fill-mode:forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(-10px) rotate(0deg);opacity:1;}
  100%{transform:translateY(105vh) rotate(340deg);opacity:0.15;}
}


.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px, 100%), 1fr));gap:12px;max-width:100%;}
.collection-card{background:#fff;border:1.5px solid var(--border-soft);border-radius:var(--radius-md);padding:14px;transition:all .15s;min-width:0;}
.collection-card:hover{border-color:var(--accent);box-shadow:var(--shadow-soft);}
.collection-card-text{font-size:clamp(14px, 2.8vw, 15px);font-weight:700;margin-bottom:4px;display:flex;align-items:center;gap:6px;word-break:break-word;}
.collection-card-text svg{width:14px;height:14px;color:var(--ink-faint);}
.collection-card-answer{color:var(--accent-dark);font-size:13px;font-weight:650;margin-bottom:6px;}
.collection-card-meta, .collection-card-date{font-size:11px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;}
.collection-card-meta svg{width:12px;height:12px;}
.collection-card-date{margin-top:2px;color:var(--ink-faint);}


.achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(170px, 100%), 1fr));gap:12px;max-width:100%;}
.achievement-card{
  background:var(--surface);border:1.5px solid var(--border-soft);border-radius:var(--radius-md);padding:16px 14px;
  text-align:center;opacity:0.55;filter:grayscale(0.6);transition:all .15s;min-width:0;
}
.achievement-card.earned{opacity:1;filter:none;background:#fff;border-color:var(--gold-line);box-shadow:0 4px 14px rgba(184,134,43,0.12);}
.achievement-icon{width:34px;height:34px;margin:0 auto 8px;color:var(--gold);}
.achievement-icon svg{width:100%;height:100%;}
.achievement-title{font-weight:700;font-size:13.5px;margin-bottom:3px;}
.achievement-desc{font-size:11px;color:var(--ink-soft);line-height:1.4;margin-bottom:10px;min-height:28px;}
.achievement-badge{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--accent-dark);}
.achievement-badge svg{width:12px;height:12px;}
.achievement-badge.locked{color:var(--ink-faint);}
.achievement-difficulty{
  display:inline-flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:700;
  padding:2px 8px;border-radius:999px;margin-bottom:8px;letter-spacing:.2px;
}
.achievement-difficulty.diff-1{background:var(--border-soft);color:var(--ink-faint);}
.achievement-difficulty.diff-2{background:var(--accent-soft);color:var(--accent-dark);}
.achievement-difficulty.diff-3{background:#E8F0FB;color:#2B5C99;}
.achievement-difficulty.diff-4{background:var(--danger-soft);color:var(--danger);}
.achievement-difficulty.diff-5{background:linear-gradient(135deg,var(--gold-soft),#F1E4FB);color:#6B3FA0;}


.settings-grid{display:grid;grid-template-columns:1fr;gap:10px;}
.toggle-card{
  display:flex;align-items:flex-start;gap:12px;background:var(--surface);border:1.5px solid var(--border-soft);
  border-radius:var(--radius-md);padding:13px 14px;margin-bottom:0;cursor:pointer;transition:all .15s;
}
.toggle-card:hover{border-color:var(--ink-faint);}
.toggle-card input{margin-top:3px;width:16px;height:16px;accent-color:var(--accent);flex-shrink:0;}
.toggle-card span{font-size:13px;line-height:1.45;}
@media (min-width:640px){.settings-grid{grid-template-columns:1fr 1fr;}}


.section{position:relative;}
.tournament-card, .collection-card, .achievement-card, .toggle-card, .wheel-card, .step-square, .dock-item{
  will-change:transform;
}
.banner-daily::before{
  content:"";position:absolute;top:-30px;left:-30px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,0.14) 0%, transparent 70%);
}


.chart-wrap{
  display:flex;
  align-items:flex-end;
  gap:12px;
  padding:24px 16px 16px;
  background:var(--surface);
  border-radius:var(--radius-md);
  min-height:200px;
}
.chart-bar-col{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
.chart-bar{
  width:100%;
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
  border-radius:6px 6px 0 0;
  transition:all .3s ease;
  min-height:5%;
}
.chart-bar-col:hover .chart-bar{
  background:linear-gradient(180deg, var(--gold) 0%, var(--gold-line) 100%);
  transform:translateY(-4px);
}
.chart-bar-label{
  font-size:11px;
  color:var(--ink-soft);
  text-align:center;
  font-weight:600;
}
.auto-advance-message{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  background:var(--accent-soft);
  border-radius:var(--radius-md);
  color:var(--accent-dark);
  font-size:13.5px;
  font-weight:600;
  animation:fadeIn .3s ease;
}
.auto-advance-message svg{
  width:18px;
  height:18px;
  color:var(--accent);
}


/* ══════════════════════════════════════════════════════════════
   МОБИЛЬНАЯ АДАПТАЦИЯ — улучшения для экранов до 600px
   ══════════════════════════════════════════════════════════════ */

/* Запрет зума через тач уже выставлен в meta viewport.
   Дополнительно блокируем двойной тап у интерактивных элементов */
button, a, input, select, textarea {
  touch-action: manipulation;
}

@media (max-width: 600px) {

  /* ── Общий контент ── */
  .content {
    padding: 14px 12px;
    padding-bottom: calc(var(--dock-height) + 22px);
  }
  .content-inner { max-width: 100%; }

  /* ── Логин ── */
  .login-wrap { padding: 28px 16px; }
  .login-title { font-size: 22px; }
  .login-sub { font-size: 13px; }
  .login-card { max-width: 100%; }

  /* ── Топбар ── */
  .topbar { padding: 12px 14px; gap: 8px; }
  .topbar-brand-name { font-size: 13px; }
  .topbar-brand-office { font-size: 11px; }
  .topbar-right { gap: 6px; }
  .points-chip { font-size: 12px; padding: 6px 9px 6px 8px; }
  .points-chip svg { width: 13px; height: 13px; }

  /* ── Шапка секции ── */
  .section-title { font-size: 14.5px; }
  .admin-eyebrow { font-size: 10.5px; }
  .admin-title-row { flex-wrap: wrap; gap: 8px; }
  .admin-title-row .btn { width: 100%; }

  /* ── Баннер победителя ── */
  .winner-banner { padding: 14px 16px; }
  .winner-banner-name { font-size: 17px; }
  .winner-banner-meta { font-size: 12px; }

  /* ── Баннер ребуса ── */
  .banner-title { font-size: 17px; }
  .banner-sub { font-size: 12px; }
  .banner-cta { font-size: 12.5px; padding: 8px 13px; }

  /* ── Карточка решения ── */
  .solve-card { padding: 18px 14px; }
  .solve-card-text { font-size: clamp(20px, 8vw, 30px); }
  .solve-card-img { max-height: 40vh; }
  .solve-input-row { max-width: 100%; }
  .solve-input-row input { font-size: 16px; /* предотвращает зум в iOS */ }

  /* ── Степпер ── */
  .step-row-wrap { margin-bottom: 16px; }
  .step-square {
    width: clamp(34px, 8.5vw, 40px);
    height: clamp(34px, 8.5vw, 40px);
    font-size: 12px;
  }

  /* ── Режимы ребусов ── */
  .rebus-mode-grid { grid-template-columns: 1fr; gap: 10px; }
  .rebus-mode-card { padding: 20px 16px; flex-direction: row; text-align: left; gap: 16px; }
  .rebus-mode-icon { width: 48px; height: 48px; margin: 0; flex-shrink: 0; }
  .rebus-mode-icon svg { width: 24px; height: 24px; }
  .rebus-mode-title { font-size: 15px; margin-bottom: 4px; }
  .rebus-mode-desc { font-size: 12px; max-width: 100%; }

  /* ── Таблица ── */
  .table-wrap { border-radius: var(--radius-sm); }
  table.data-table { font-size: 12px; }
  table.data-table thead th { padding: 8px 10px; font-size: 9.5px; }
  table.data-table tbody td { padding: 9px 10px; }
  .row-actions { gap: 4px; }
  .row-actions .btn-sm { padding: 5px 8px; font-size: 11.5px; }
  .row-actions .icon-btn { width: 30px; height: 30px; }

  /* ── Фильтры ── */
  .filter-pill-row { gap: 6px; }
  .filter-pill { padding: 6px 11px; font-size: 12px; }

  /* ── Кнопки ── */
  .btn { font-size: 13.5px; padding: 11px 14px; }
  .btn-sm { padding: 7px 10px; font-size: 12px; }
  .field-row { grid-template-columns: 1fr; }

  /* ── Поля формы — 16px чтобы iOS не делал зум ── */
  .field input[type=text],
  .field input[type=password],
  .field select,
  .field textarea,
  .csel-trigger,
  .search-row input { font-size: 16px; }

  /* ── Модальное окно ── */
  .modal-card {
    max-width: 100%;
    max-height: 92dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .modal-header { padding: 14px 16px; }
  .modal-title { font-size: 15px; }
  .modal-body { padding: 14px 16px; }
  .modal-footer { padding: 12px 16px 16px; }
  .modal-footer .btn { font-size: 13.5px; }

  /* ── Статистика ── */
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-value { font-size: clamp(16px, 4vw, 20px); }
  .stat-label { font-size: 10px; }

  /* ── Рекорды ── */
  .records-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* ── Колесо на странице ── */
  .wheel-wrap-large {
    width: min(320px, calc(100vw - 32px));
    height: min(320px, calc(100vw - 32px));
  }
  .wheel-pointer-large { font-size: 28px; }
  .wheel-result-prize-big { font-size: 18px; }
  .wheel-page-result { padding: 20px 16px; }

  /* ── Достижения ── */
  .achievements-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .achievement-card { padding: 12px 10px; }
  .achievement-title { font-size: 12px; }
  .achievement-desc { font-size: 10px; min-height: auto; }

  /* ── Коллекция ── */
  .collection-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }

  /* ── Турниры ── */
  .tournament-card { padding: 18px 16px; }
  .tournament-card-name { font-size: 16px; }

  /* ── Лидерборд период ── */
  .lb-period button { padding: 7px 10px; font-size: 12px; }

  /* ── Тосты ── */
  #toast-container { padding: 0 10px; }
  .toast { font-size: 13px; padding: 11px 12px; }

  /* ── Экран приветствия ── */
  .welcome-title { font-size: 24px; }
  .welcome-subtitle { font-size: 14px; }
  .welcome-animation { width: 120px; height: 120px; margin-bottom: 20px; }
  .welcome-emoji { font-size: 88px; }

  /* ── Поиск ── */
  .search-row input { padding: 10px 12px 10px 36px; font-size: 16px; }

  /* ── Отключаем hover-эффекты на тач-устройствах (нет hover) ── */
  .stat-card:hover { transform: none; box-shadow: none; }
  .rebus-banner:hover { transform: none; box-shadow: none; }
  .record-card:hover { transform: none; box-shadow: none; }
  .collection-card:hover { box-shadow: none; }
  .tournament-card:not(.disabled):hover { border-color: var(--border); }
}

/* Дополнительно для очень маленьких экранов (< 380px, iPhone SE и т.п.) */
@media (max-width: 380px) {
  .content { padding: 10px 10px; }
  .topbar { padding: 10px 12px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .achievements-grid { grid-template-columns: 1fr 1fr; }
  .collection-grid { grid-template-columns: 1fr 1fr; }
  .records-grid { grid-template-columns: 1fr 1fr; }
  .btn { padding: 10px 12px; font-size: 13px; }
  .dock-item { padding: 8px 10px; }
  .dock-item span { font-size: 9.5px; }
  .dock-item svg { width: 17px; height: 17px; }
}

/* iOS safe area для dock и modal */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .dock-outer {
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }
  .content {
    padding-bottom: calc(var(--dock-height) + 14px + env(safe-area-inset-bottom));
  }
  @media (min-width: 1200px) {
    .content { padding-bottom: 40px; }
  }
  .modal-footer {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  .mob-menu-safe-area {
    height: env(safe-area-inset-bottom, 16px);
    min-height: 16px;
  }
}

/* Streak column: desktop full text, mobile icon only */
.streak-desktop-col{white-space:nowrap;}
@media(max-width:640px){.streak-desktop-col{display:none !important;}}
.streak-mobile-tag{display:inline-flex;}
@media(min-width:641px){.streak-mobile-tag{display:none !important;}}

/* Solve page timer */
.solve-timer-badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--ink-soft);background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-pill);padding:3px 11px;margin-bottom:10px;}
.solve-timer-badge svg{width:13px;height:13px;color:var(--ink-soft);}

/* Admin panel blocks */
.admin-panel-block{padding:0;margin-bottom:28px;}

/* Bulk edit floating panel */
.admin-block-title{margin:0 0 14px 0;font-size:17px;font-weight:700;color:var(--ink);}

/* Mobile-only элементы (скрыты на десктопе) */
.mobile-only { display: inline-flex; }
@media (min-width: 768px) {
  .mobile-only { display: none !important; }
}

/* Focus week back button positioning */
.focus-back-mobile {
  display: block;
  margin-bottom: 16px;
}
@media (min-width: 768px) {
  .focus-back-mobile { display: none; }
}

.focus-back-desktop {
  display: none;
}
@media (min-width: 768px) {
  .focus-back-desktop { display: inline-flex; }
}

/* Events preview card on home page */
.event-preview-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  transition: all 0.2s;
}

.event-preview-item:hover {
  border-color: var(--accent);
  background: #fff;
}

.event-preview-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold-soft);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.event-preview-icon svg {
  width: 20px;
  height: 20px;
}

.event-preview-content {
  flex: 1;
  min-width: 0;
}

.event-preview-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}

.event-preview-date {
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 4px;
}

.event-preview-date svg {
  width: 12px;
  height: 12px;
}