/* ============================================================
   Тема. Светлая по умолчанию, тёмная — [data-theme="dark"]
   ============================================================ */
:root{
  --bg:#EEF2F8; --surface-primary:#FFFFFF; --surface-secondary:#F2F6FB;
  --line:rgba(11,28,59,0.10); --line-strong:rgba(11,28,59,0.20);
  --text-primary:#0B1C3B; --text-secondary:#5F6B7D; --text-disabled:#9AA3B2;
  --accent:#1E6FE0; --accent-2:#0EA98F;
  --shadow:0 10px 30px rgba(11,28,59,0.10);
  --glow1:rgba(30,111,224,0.14); --glow2:rgba(14,169,143,0.10);
  --rank-gold:#E6A817; --rank-silver:#9AA6B4; --rank-bronze:#C17A3F;
  --rank-gold-ink:#3A2A00; --rank-silver-ink:#26303B; --rank-bronze-ink:#2E1400;
  --focus:rgba(30,111,224,0.22);
  --cd-bg:#E4E9F1;
  --surface-light-blue:#E6EFFC;
  --on-accent:#FFFFFF; --on-accent-dim:rgba(255,255,255,0.85);
  --status-success:#1D9E75; --status-success-soft:#E0F5F0;
  --status-error:#D64545; --status-error-soft:#FBECEC;
  --ach-milestone:#0EA98F; --ach-streak:#E4572E; --ach-distance:#E6A817; --ach-multisport:#1E6FE0;
  --ach-weekend:#7F77DD; --ach-recognition:#D4537E; --ach-supporter:#D85A30; --ach-uptime:#159A8C;
  --ach-locked:#C6CDD8;
  /* Дисциплины на графике — оттенки --accent (ходьба темнее, велосипед светлее) */
  --sport-walk:var(--accent); --sport-run:color-mix(in srgb, var(--accent) 62%, #fff); --sport-bike:color-mix(in srgb, var(--accent) 32%, #fff);
  --scrim-primary:rgba(0,0,0,0.85); --scrim-secondary:rgba(0,0,0,0.62);
  --ctrl:rgba(0,0,0,0.4); --ctrl-hover:rgba(0,0,0,0.65);
  --glass:rgba(255,255,255,0.12); --glass-hover:rgba(255,255,255,0.24); --glass-border:rgba(255,255,255,0.4);
  --radius:6px;
}
[data-theme="dark"]{
  --bg:#030B1D; --surface-primary:#0B1C3B; --surface-secondary:#10254A;
  --line:rgba(255,255,255,0.10); --line-strong:rgba(255,255,255,0.22);
  --text-primary:#EAF1FB; --text-secondary:#8FA3BF; --text-disabled:#7E8CA3;
  --accent:#2E9BFF; --accent-2:#00E7C2;
  --shadow:0 10px 30px rgba(0,0,0,0.40);
  --glow1:rgba(46,155,255,0.18); --glow2:rgba(0,231,194,0.10);
  --rank-gold:#F5C043; --rank-silver:#C7D0DB; --rank-bronze:#D98A4B;
  --focus:rgba(46,155,255,0.30);
  --cd-bg:#0C1E40;
  --surface-light-blue:#12305C;
  --status-success:#35C495; --status-success-soft:#133A4B;
  --status-error:#E85D5D; --status-error-soft:#2E2640;
  --ach-locked:#3A4A66;
  /* --on-accent, --text-disabled, палитра достижений, инки медалей, scrim/glass/ctrl наследуются из :root */
}
input, select, textarea{accent-color:var(--accent);}
input:focus, select:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus);}

*{box-sizing:border-box;}
body{
  margin:0; color:var(--text-primary);
  background:
    radial-gradient(1100px 480px at 82% -12%, var(--glow1), transparent 60%),
    radial-gradient(800px 460px at -5% 0%, var(--glow2), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  font-family:"Geologica",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5; -webkit-font-smoothing:antialiased; min-height:100vh;
}
a{color:inherit;}
button{font:inherit;}
h1,h2{margin:0; font-weight:800;}

.wrap{max-width:960px; margin:0 auto; padding:28px 20px 40px;}
.center{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.card{background:var(--surface-primary); border:1px solid var(--line); border-radius:12px; padding:28px; width:100%; box-shadow:var(--shadow);}
.muted{color:var(--text-secondary); margin:0;}
.big{font-size:28px; font-weight:900; margin:6px 0 0;}

/* --- Кнопки --- */
.btn{background:var(--surface-secondary); color:var(--text-primary); border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; cursor:pointer; font-weight:700; text-decoration:none; display:inline-block;}
.btn:hover{border-color:var(--line-strong);}
.icon-btn{border:none; background:transparent; color:var(--text-secondary); padding:4px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;}
.add-plus svg{display:block;}
.primary{background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); border-radius:var(--radius); padding:11px 14px; cursor:pointer; font-weight:800; width:100%; text-align:center;}
.primary:hover{filter:brightness(1.06);}
.primary:disabled{opacity:.6; cursor:default;}
/* Поле пароля с кнопкой показа */
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:42px;}
.pw-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:transparent; border:none; color:var(--text-secondary); cursor:pointer; padding:0;}
.pw-toggle:hover{color:var(--accent);}
.pw-toggle svg{width:20px; height:20px; display:block;}
.pw-toggle .eye-off{display:none;}
.pw-toggle.on .eye{display:none;}
.pw-toggle.on .eye-off{display:block;}
.primary.is-loading{position:relative; color:transparent !important;}
.primary.is-loading::after{content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; border:2px solid rgba(255,255,255,0.5); border-top-color:var(--on-accent); border-radius:50%; animation:sc-spin .6s linear infinite;}
@keyframes sc-spin{to{transform:rotate(360deg);}}

/* --- Шапка --- */
.topbar{display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:nowrap; gap:16px; margin-bottom:22px;}
.title-wrap{min-width:0;}
.kicker{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--accent-2); font-weight:700; margin:0 0 8px;}
.title-wrap h1{font-family:"Climate Crisis",sans-serif; font-size:38px; line-height:1.03; font-weight:400; text-transform:uppercase;}
.title-wrap h1 a{text-decoration:none;}
.period{margin:8px 0 0; font-size:14px; color:var(--text-secondary); font-weight:600;}

/* --- Обратный отсчёт блоками --- */
.countdown{display:flex; gap:10px; margin:0 0 26px; flex-wrap:wrap;}
.cd{background:var(--cd-bg); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; min-width:74px; text-align:center;}
.cd b{display:block; font-size:28px; font-weight:900; line-height:1;}
.cd span{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-secondary);}
.countdown .cd-lead{flex:0 0 100%; margin:0 0 4px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-secondary); font-weight:700;}

/* --- График активности (страница участника) --- */
.chart-card{position:relative; margin:0 0 26px;}
.chart-svg{display:block; width:100%; height:auto;}
.chart-svg .grid{stroke:var(--line); stroke-width:1;}
.chart-svg .ylab, .chart-svg .xlab{fill:var(--text-secondary); font-size:10px; font-family:inherit;}
.chart-svg .hit{cursor:pointer;}
.chart-svg .col-hl{fill:var(--text-primary); opacity:0; pointer-events:none;}
.chart-svg .col-hl.on{opacity:0.05;}
.chart-legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:8px;}
.chart-legend .lg{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); font-weight:600;}
.chart-legend .lg i{width:10px; height:10px; border-radius:2px; display:inline-block;}
.chart-tip{position:absolute; z-index:5; pointer-events:none; min-width:132px; background:var(--surface-primary); border:1px solid var(--line); box-shadow:var(--shadow); border-radius:8px; padding:8px 10px; font-size:12px; color:var(--text-primary); transform:translate(-50%, -100%);}
.chart-tip[hidden]{display:none;}
.chart-tip .tip-date{font-weight:800; margin-bottom:6px;}
.chart-tip .tip-row{display:flex; align-items:center; gap:6px; margin:2px 0;}
.chart-tip .tip-row i{width:8px; height:8px; border-radius:2px; flex:0 0 auto;}
.chart-tip .tip-row b{margin-left:auto; font-weight:700; padding-left:12px;}
.chart-tip .tip-total{display:flex; margin-top:6px; padding-top:6px; border-top:1px solid var(--line); font-weight:700;}
.chart-tip .tip-total b{margin-left:auto; padding-left:12px;}
.chart-tip .tip-empty{color:var(--text-secondary);}

/* --- Аватар и меню --- */
.avatar{border-radius:50%; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-weight:800; color:var(--on-accent); background:var(--accent); width:30px; height:30px; font-size:12px;}
.usermenu{position:relative; flex:0 0 auto;}
.avatar-btn{border:none; background:transparent; padding:0; cursor:pointer; border-radius:50%;}
.avatar-btn:hover .avatar{box-shadow:0 0 0 3px var(--line);}
.menu{position:absolute; right:0; top:52px; background:var(--surface-primary); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); min-width:210px; padding:6px; z-index:60;}
.menu-item{display:block; width:100%; text-align:left; border:none; background:transparent; padding:10px 12px; border-radius:6px; color:var(--text-primary); cursor:pointer; text-decoration:none; white-space:nowrap; font-weight:600; font-size:14px;}
.menu-item:hover{background:var(--surface-secondary);}
.menu-sep{height:0; border-top:1px solid var(--line); margin:6px 4px;}

/* --- Плитки статистики --- */
.stats{display:flex; flex-wrap:wrap; gap:14px; margin-bottom:22px;}
.stat{background:var(--surface-primary); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; position:relative; overflow:hidden; box-shadow:var(--shadow);}
.stat::after{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent);}
.stat .muted{text-transform:uppercase; letter-spacing:.14em; font-weight:700;}
.stat-add{cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:var(--accent); border:1px solid var(--accent); color:var(--on-accent); text-align:center; text-decoration:none; font:inherit;}
.stat-add::after{display:none;}
.stat-add .add-plus{font-size:26px; font-weight:900; line-height:1;}
.stat-add .add-label{font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:.02em;}
.stat-add:hover:not(:disabled){filter:brightness(1.06);}
.stat-add:disabled{opacity:1; cursor:not-allowed; background:var(--surface-secondary); border-color:var(--line); color:var(--text-disabled);}
/* Плитка «Новое» — фото последней активности (диплинк на просмотр) */
.stats .stat{min-height:112px; flex:1 1 160px; min-width:160px; max-width:calc(25% - 11px);}
/* Планшет/мобилка — максимум половина блока */
@media (max-width:900px){ .stats .stat{max-width:calc(50% - 7px);} }
/* Телефоны — чуть уже поля и gap, чтобы две плитки по 160px вставали в ряд */
@media (max-width:560px){
  .wrap{padding-left:16px; padding-right:16px;}
  .stats{gap:10px;}
  .stats .stat{max-width:calc(50% - 5px);}
}
.stat-photo{display:flex; flex-direction:column; text-decoration:none;}
.stat-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.stat-photo::after{content:""; position:absolute; inset:0; width:auto; z-index:1; background:linear-gradient(90deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0) 75%); transition:opacity .2s ease;}
.stat-photo > p{position:relative; z-index:2; transition:opacity .2s ease;}
.stat-photo .muted{color:var(--on-accent-dim);}
.stat-photo .big{color:var(--on-accent);}
.stat-photo .big span{font-size:15px; font-weight:700;}
.stat-photo .stat-photo-name{margin:4px 0 0; color:var(--on-accent); font-weight:700; font-size:14px;}
.stat-photo:hover::after{opacity:0;}
.stat-photo:hover > p{opacity:0;}

/* --- Тулбар и вкладки --- */
.toolbar{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:14px;}
.tabs{display:inline-flex; background:var(--surface-primary); border:1px solid var(--line); border-radius:999px; padding:4px; gap:2px; box-shadow:var(--shadow);}
.tab{border:none; background:transparent; color:var(--text-secondary); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:12px; padding:8px 16px; border-radius:999px; cursor:pointer; text-decoration:none;}
.tab:hover{color:var(--text-primary);}
.tab[aria-selected="true"]{background:var(--accent); color:var(--on-accent);}

/* --- Таблица --- */
.table-card{background:var(--surface-primary); border:1px solid var(--line); border-radius:10px; overflow:visible; box-shadow:var(--shadow);}
table{width:100%; border-collapse:collapse; font-size:14px;}
th,td{padding:12px 14px;}
th.num,td.num{text-align:right;}
thead tr{background:var(--surface-secondary);}
thead th{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); font-weight:700; text-align:left; border-bottom:1px solid var(--line);}
th[data-sort]{cursor:pointer;}
th[data-sort]:hover{color:var(--text-primary);}
tbody tr{border-top:1px solid var(--line);}
tbody td{color:var(--text-primary);}
tr.clickable{cursor:pointer;}
tr.clickable:hover{background:var(--surface-secondary);}
/* Активная колонка рейтинга (по выбранной вкладке) выделяется шрифтом:
   значения — самым жирным весом (в app.js), заголовок — основным цветом
   и повышенным весом, чтобы колонка чётко читалась как выбранная. */
thead th.col-active{color:var(--text-primary); font-weight:800;}

.place{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; font-weight:800; font-size:13px; color:var(--text-secondary); background:transparent;}
.place-1{background:var(--rank-gold); color:var(--rank-gold-ink);}
.place-2{background:var(--rank-silver); color:var(--rank-silver-ink);}
.place-3{background:var(--rank-bronze); color:var(--rank-bronze-ink);}

.profile-head{display:flex; align-items:center; gap:14px; margin-bottom:20px;}
.profile-head > div{min-width:0;}
.profile-head h1{overflow-wrap:anywhere;}

/* --- Нотификация --- */
.notification{background:var(--surface-primary); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; margin-bottom:18px; font-size:14px; box-shadow:var(--shadow); display:flex; align-items:flex-start; gap:10px;}
.notification > span:not(.notification-icon){min-width:0; overflow-wrap:anywhere;}
.notification-icon{flex:0 0 auto; display:inline-flex; line-height:0;}
.notification-icon svg{display:block; width:20px; height:20px;}
.notification-info{background:var(--surface-secondary);}
.notification-info .notification-icon{color:var(--accent);}
.notification-success{background:var(--status-success-soft);}
.notification-success .notification-icon{color:var(--status-success);}
.notification-error{background:var(--status-error-soft);}
.notification-error .notification-icon{color:var(--status-error);}
/* Всплывающее поведение: вне контента, сверху по центру, 40px от края экрана */
.notification-toast{position:fixed; top:40px; left:50%; z-index:1000; width:max-content; max-width:min(520px, calc(100vw - 32px)); margin:0; transform:translateX(-50%) translateY(-12px); opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease;}
.notification-toast.is-visible{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.notification .icon-btn{flex:0 0 auto; margin-left:auto; margin-top:-2px;}

/* --- Модалка --- */
.overlay{position:fixed; inset:0; background:var(--scrim-secondary); display:flex; align-items:center; justify-content:center; padding:20px; z-index:90;}
.modal{background:var(--surface-primary); border:1px solid var(--line); border-radius:12px; width:100%; max-width:420px; padding:24px; max-height:90vh; overflow:auto; box-shadow:var(--shadow);}
.modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.modal-head h1{font-size:20px; font-weight:800; text-transform:uppercase; letter-spacing:.01em;}
.field{margin-bottom:16px;}
.field label{display:block; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); font-weight:700; margin-bottom:7px;}
.field input,.field select{width:100%; padding:11px 12px; font:inherit; color:var(--text-primary); background:var(--surface-secondary); border:1px solid var(--line); border-radius:var(--radius);}

/* Поле даты: убираем нативный шеврон, рисуем свою иконку календаря справа.
   Работает одинаково на десктопе и мобильных (iOS/Android). */
.field input[type="date"]{
  -webkit-appearance:none; appearance:none;
  position:relative;
  padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235F6B7D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M4 11h16'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px 18px;
}
/* Тёмная тема: та же иконка цветом --text-secondary (#8FA3BF) */
[data-theme="dark"] .field input[type="date"]{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238FA3BF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M4 11h16'/%3E%3C/svg%3E");
}
/* Нативный индикатор делаем невидимым и растягиваем на всё поле — тап открывает календарь */
.field input[type="date"]::-webkit-calendar-picker-indicator{
  position:absolute; inset:0; width:auto; height:auto; opacity:0; cursor:pointer;
}
/* iOS: значение по левому краю и без схлопывания высоты */
.field input[type="date"]::-webkit-date-and-time-value{text-align:left; min-height:1.3em;}
.modal .tabs{display:flex; width:100%; box-shadow:none;}
.modal .tab{flex:1; text-align:center;}
.drop{position:relative; width:80px; height:80px; border:1px dashed var(--line-strong); border-radius:8px; color:var(--text-secondary); cursor:pointer; background:var(--surface-secondary); overflow:hidden; display:block;}
.drop:hover{color:var(--accent); border-color:var(--accent);}
.drop img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.drop svg{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); display:block;}
.hint{font-size:12px; color:var(--text-secondary); margin:0 0 8px;}
.gallery{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.thumb{position:relative; width:80px; height:80px; border-radius:8px; overflow:hidden;}
.thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.thumb .rm{position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%; background:var(--text-primary); color:var(--on-accent); border:2px solid var(--surface-primary); cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; padding:0;}
.strip{display:flex; gap:8px; align-items:center; flex-wrap:nowrap; overflow-x:auto;}
.strip .t{flex:0 0 auto; position:relative; width:52px; height:52px; border-radius:8px; overflow:hidden; cursor:pointer; border:1px solid transparent;}
.strip .t:hover{border-color:var(--accent);}
.strip .t img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.strip .t.tracker{display:flex; align-items:center; justify-content:center; background:var(--surface-secondary); border:1px solid var(--line); color:var(--accent);}
.strip .t.tracker:hover{border-color:var(--accent);}
.edit-btn{width:52px; height:52px; display:flex; align-items:center; justify-content:center; background:transparent; border:1px solid transparent; border-radius:8px; color:var(--accent); cursor:pointer;}
.edit-btn:hover{border-color:var(--accent);}
/* Меню действий по записи (три точки) */
.row-menu{position:relative; display:inline-block;}
.row-menu .menu{position:absolute; right:0; top:calc(100% + 6px); min-width:180px; padding:6px; text-align:left;
  background:var(--surface-primary); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); display:none; z-index:60;}
.row-menu.open .menu{display:block;}
.row-menu.open .edit-btn{border-color:var(--accent);}
.row-menu .menu-item{display:block; width:100%; text-align:left; background:transparent; border:none; padding:9px 12px; border-radius:6px; font:inherit; font-size:14px; color:var(--text-primary); cursor:pointer;}
.row-menu .menu-item:hover{background:var(--surface-secondary);}
.row-menu .menu-item.danger{color:var(--status-error);}
.row-menu .menu-item.danger:hover{background:var(--status-error-soft);}
.row-menu .menu-sep{height:1px; background:var(--line); margin:6px 4px;}
/* Заблокированный пользователь в админке — вторичным цветом */
tr.u-blocked td, tr.u-blocked td a{color:var(--text-secondary);}

/* Лента последних достижений (главная) */
.ach-feed{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:0 0 22px;}
.ach-feed .lbl{width:100%; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); font-weight:700; margin-bottom:2px;}
.ach-chip{display:inline-flex; align-items:center; gap:8px; background:var(--surface-primary); border:1px solid var(--line); border-radius:999px; padding:5px 14px 5px 5px; font-size:13px; font-weight:600; text-decoration:none; color:var(--text-primary);}
.ach-chip:hover{border-color:var(--accent);}
.ach-chip .ci{flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--c); color:var(--on-accent); display:flex; align-items:center; justify-content:center;}
.ach-chip .ci svg{width:15px; height:15px; display:block;}

/* Достижения — бейджи в форме щита */
.ach-grid{display:flex; gap:22px; flex-wrap:wrap; margin:0 0 26px;}
.ach-badge{width:92px; text-align:center;}
.ach-shield{position:relative; width:68px; height:68px; margin:0 auto 8px; color:var(--c);}
.ach-shield .sh{position:absolute; inset:0; width:100%; height:100%; display:block;}
.ach-shield .ic{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-bottom:6px; transform:translateY(4px); color:var(--on-accent);}
.ach-shield .ic svg{width:26px; height:26px; display:block;}
.ach-name{font-weight:800; font-size:12px; line-height:1.2;}
.ach-badge.locked .ach-shield{color:var(--ach-locked);}
.ach-badge.locked .ach-shield .ic{color:var(--bg);}
.ach-badge.locked .ach-name{color:var(--text-disabled);}
.ach-badge{cursor:pointer;}
.ach-hidden{display:none;}
.ach-more{display:inline-block; margin:-14px 0 26px; background:none; border:none; padding:0; font:inherit; font-size:13px; font-weight:700; color:var(--accent); cursor:pointer; text-decoration:underline;}
.ach-more:hover{opacity:.8;}
/* Модалка достижения */
.ach-modal-card{position:relative;}
.am-close{position:absolute; top:10px; right:12px; border:none; background:transparent; color:var(--text-secondary); cursor:pointer; padding:4px; display:inline-flex;}
.ach-big{position:relative; width:96px; height:96px; margin:2px auto 14px; color:var(--c);}
.ach-big .sh{position:absolute; inset:0; width:100%; height:100%; display:block;}
.ach-big .ic{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-bottom:8px; transform:translateY(5px); color:var(--on-accent);}
.ach-big .ic svg{width:40px; height:40px; display:block;}
.ach-big.locked{color:var(--ach-locked);}
.ach-big.locked .ic{color:var(--bg);}
.am-status{display:inline-block; font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px;}
.am-status.got{background:var(--status-success-soft); color:var(--status-success);}
.am-status.lock{background:var(--surface-secondary); color:var(--text-secondary);}
/* Щит в карточке празднования достижения */
.celebrate-badge.celebrate-shield{background:transparent;}
.cel-shield{position:relative; display:inline-flex; width:64px; height:64px;}
.cel-shield .sh{width:100%; height:100%; display:block;}
.cel-shield .cel-ic{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-bottom:6px; transform:translateY(4px); color:var(--on-accent);}
.cel-shield .cel-ic svg{width:28px; height:28px; display:block;}
.like-btn{display:inline-flex; align-items:center; gap:5px; background:transparent; border:none; padding:4px 6px; border-radius:6px; color:var(--text-secondary); font:inherit; font-size:14px; cursor:pointer; white-space:nowrap;}
.like-btn svg{width:16px; height:16px; display:block;}
.like-btn:hover{color:var(--accent);}
.like-btn.liked{color:var(--accent);}
.like-btn[disabled]{cursor:default;}
.like-btn[disabled]:hover{color:var(--text-secondary);}
.like-count:empty{display:none;}
.err{color:var(--status-error); font-size:13px;}

/* --- Лайтбокс --- */
.lightbox{position:fixed; inset:0; background:var(--scrim-primary); display:flex; align-items:center; justify-content:center; z-index:100; padding-bottom:144px;}
.lightbox img{max-width:90vw; max-height:calc(100vh - 176px); border-radius:8px; box-shadow:0 0 24px rgba(0,0,0,0.35); transition:opacity .2s;}
.lightbox img.loading{opacity:0;}
/* Спиннер загрузки — по центру кадра (с учётом нижней полосы padding-bottom:144px), пока грузится картинка */
.lb-spinner{position:absolute; top:calc(50% - 72px); left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border:3px solid rgba(255,255,255,0.25); border-top-color:#fff; border-radius:50%; animation:lb-spin .8s linear infinite; display:none; pointer-events:none; z-index:101;}
.lb-spinner.on{display:block;}
@keyframes lb-spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@media(prefers-reduced-motion:reduce){ .lb-spinner{animation-duration:1.6s;} }
.lb-btn{position:absolute; background:var(--ctrl); color:var(--on-accent); border:none; border-radius:50%; width:44px; height:44px; font-size:22px; display:flex; align-items:center; justify-content:center; cursor:pointer;}
.lb-btn:hover{background:var(--ctrl-hover);}
.lb-btn svg{width:22px; height:22px; display:block;}
.lb-close{top:16px; right:16px;}
.lb-report{top:16px; left:16px;}
.lb-edit{top:16px; left:70px;}
.lb-edit.lb-edit-solo{left:16px;}
.lb-prev{left:16px; top:50%; transform:translateY(-50%);}
.lb-next{right:16px; top:50%; transform:translateY(-50%);}
.lb-bar{position:absolute; left:0; right:0; bottom:20px; display:flex; flex-direction:column; align-items:center; gap:10px; padding:0 16px;}
.lb-dots{display:flex; gap:7px; justify-content:center;}
.lb-dots span{width:7px; height:7px; border-radius:50%; background:var(--glass-border); transition:background .15s;}
.lb-dots span.on{background:var(--on-accent);}
.lb-caption{color:var(--on-accent); font-size:14px; font-weight:600; text-align:center; text-shadow:0 1px 3px rgba(0,0,0,0.7); margin:16px 0;}
.lb-like-btn{display:inline-flex; align-items:center; gap:8px; background:var(--glass); color:var(--on-accent); border:1px solid var(--glass-border); border-radius:999px; padding:8px 18px; font-weight:700; font-size:13px; cursor:pointer;}
.lb-like-btn svg{width:18px; height:18px; display:block;}
.lb-like-btn:hover{background:var(--glass-hover);}
.lb-like-btn[disabled]{cursor:default;}
.lb-like-btn[disabled]:hover{background:var(--glass);}
.lb-like-btn.liked{background:var(--status-success); border-color:var(--status-success);}
.lb-like-btn[disabled]{cursor:default;}
.lb-like-count:empty{display:none;}
@media(max-width:560px){
  .lb-prev, .lb-next{display:none;}
}

/* --- Празднование --- */
.celebrate{position:fixed; inset:0; z-index:200; pointer-events:none; display:none; opacity:1; transition:opacity .5s ease;}
.celebrate canvas{position:absolute; inset:0; width:100%; height:100%;}
.celebrate-card{position:absolute; top:38%; left:50%; transform:translate(-50%,-50%); background:var(--surface-primary); border:1px solid var(--line); border-radius:12px; padding:24px 28px; text-align:center; max-width:280px; box-shadow:var(--shadow);}
.celebrate-badge{width:64px; height:64px; border-radius:50%; background:var(--status-success); color:var(--on-accent); display:flex; align-items:center; justify-content:center; margin:0 auto 12px;}
.celebrate-badge svg{width:34px; height:34px;}
.celebrate-title{margin:0; font-size:18px; font-weight:800;}
.celebrate-sub{margin:6px 0 0; font-size:14px; color:var(--text-secondary);}
.celebrate-sub:empty{display:none;}

/* --- Переключатель тем --- */
.theme-switch{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line);}
.theme-switch span{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-secondary); font-weight:700;}

/* Таблица записей участника (десктоп) */
.records tbody tr:hover{background:var(--surface-secondary);}
@media (min-width:561px){
  .records th:nth-child(1), .records th:nth-child(2), .records th:nth-child(3),
  .records td:nth-child(1), .records td:nth-child(2), .records td:nth-child(3){width:1%; white-space:nowrap; padding-right:10px;}
  .records th:nth-child(4), .records td:nth-child(4){width:auto; text-align:left; padding-left:40px;}
  .records th:nth-child(5), .records td:nth-child(5){width:1%; white-space:nowrap; padding-right:10px;}
  .records th:nth-child(6), .records td:nth-child(6){width:1%; text-align:right;}
}

@media (max-width:560px){
  .title-wrap h1{font-size:28px;}
  table{font-size:12px;}
  /* Показываем только колонку выбранной категории (по селектору).
     Активную колонку помечает классом .col-active app.js при перерисовке. */
  #page-board th.num, #page-board td.num{display:none;}
  #page-board th.num.col-active, #page-board td.num.col-active{display:table-cell;}

  /* Записи участника: дата · активность · км в строку, фото — под текстом */
  .records thead{display:none;}
  .records tbody tr{display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:12px 14px; border-top:1px solid var(--line);}
  .records tbody tr:first-child{border-top:none;}
  .records td{border:none; padding:0; font-size:14px; line-height:1.2;}
  .records td.c-date{order:1; flex-basis:100%;} /* дата — отдельной первой строкой */
  .records td.c-act{order:2; font-weight:700;}
  .records td.c-km{order:3; text-align:left;}
  .records td.c-km::before{content:"· "; color:var(--text-secondary);}
  .records td.c-km::after{content:" км"; color:inherit;} /* единица — только на мобильном */
  .records td.c-likes{order:4; margin-left:8px;}
  .records td.c-likes .like-btn{padding:0; gap:5px;}
  .records td.c-likes .like-btn svg{width:16px; height:16px;}
  .records td.c-edit{order:5; margin-left:auto;}
  .records td.c-photos{order:6; flex-basis:100%; margin-top:10px;}
  .records .strip .t{width:64px; height:64px;}
  .records .edit-btn{width:40px; height:40px;}
}

/* --- Справка (help.php) --- */
.help-toc{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px;}
.help-toc a{display:inline-block; background:var(--surface-secondary); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13px; font-weight:700; text-decoration:none;}
.help-toc a:hover{border-color:var(--line-strong);}
.help-section{background:var(--surface-primary); border:1px solid var(--line); border-radius:12px; padding:24px 26px; box-shadow:var(--shadow); margin-bottom:18px; scroll-margin-top:16px;}
.help-section h2{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-2); font-weight:800; margin:0 0 14px;}
.help-section h3{font-size:16px; font-weight:800; margin:22px 0 8px;}
.help-section p{margin:0 0 12px; font-size:15px;}
.help-section ol, .help-section ul{margin:0 0 12px; padding-left:22px; font-size:15px;}
.help-section li{margin-bottom:6px;}
.help-section .muted{font-size:14px;}
.help-tip{background:var(--surface-light-blue); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; font-size:14px; margin:0 0 12px;}
.help-warn{background:var(--status-error-soft); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; font-size:14px; margin:0 0 12px;}
.ui{display:inline-block; background:var(--surface-secondary); border:1px solid var(--line-strong); border-radius:6px; padding:1px 8px; font-size:13px; font-weight:700; white-space:nowrap;}

/* ============================================================
   SEC-005 — страница «Статистика» (копирование в Excel/Teams)
   ============================================================ */
.stats-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px;}
.btn-copy{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 14px;
  background:var(--surface-primary); color:var(--text-primary); border:1px solid var(--line);
  border-radius:999px; cursor:pointer; font:inherit; font-weight:700; font-size:12px;
  text-transform:uppercase; letter-spacing:.04em;}
.btn-copy:hover{border-color:var(--line-strong);}

/* Строки рейтинга кликабельны — открывают журнал участника */
#t-board tbody tr.clickable{cursor:pointer;}
#t-board tbody tr.clickable:hover{background:var(--surface-secondary);}
#t-board tbody tr.is-current{background:var(--surface-light-blue);}

/* Календарь выбора диапазона (вкладка «Выбрать») */
.range-cal{background:var(--surface-primary); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; width:280px; margin:-8px 0 24px;}
.rc-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.rc-title{font-weight:700; font-size:14px;}
.rc-nav{width:32px; height:32px; border:none; background:transparent; cursor:pointer;
  color:var(--text-secondary); border-radius:var(--radius); font:inherit; font-size:16px; line-height:1;}
.rc-nav:hover{background:var(--surface-secondary); color:var(--text-primary);}
.rc-grid{display:grid; grid-template-columns:repeat(7,32px); gap:2px 0; justify-content:center;}
.rc-wd{font-size:11px; color:var(--text-secondary); text-transform:uppercase; text-align:center; line-height:24px;}
.rc-day{width:32px; height:32px; border:none; background:transparent; border-radius:999px;
  cursor:pointer; font:inherit; font-size:13px; color:var(--text-primary); padding:0;}
.rc-day:hover{background:var(--surface-secondary);}
.rc-day.in-range{background:var(--surface-light-blue); border-radius:0;}
.rc-day.edge{background:var(--accent); color:var(--on-accent); border-radius:999px;}
.rc-day.edge-start.has-end{border-radius:999px 0 0 999px;}
.rc-day.edge-end.has-end{border-radius:0 999px 999px 0;}
.rc-day.today{box-shadow:inset 0 0 0 1px var(--line-strong);}
.rc-empty{width:32px; height:32px;}
.rc-foot{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; min-height:24px;}
.rc-label{font-size:13px; color:var(--text-secondary);}
.rc-reset{border:none; background:transparent; cursor:pointer; font:inherit; font-size:13px;
  color:var(--accent); padding:0;}

/* ============================================================
   SEC-006 — табы администрирования
   ============================================================ */
.admin-tabs{display:flex; gap:4px; flex-wrap:wrap; margin:0 0 24px; border-bottom:1px solid var(--line);}
.admin-tab{border:none; background:transparent; color:var(--text-secondary); font:inherit; font-weight:700;
  font-size:14px; padding:10px 16px; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
.admin-tab:hover{color:var(--text-primary);}
.admin-tab[aria-selected="true"]{color:var(--accent); border-bottom-color:var(--accent);}
.admin-tab.link{margin-left:auto; color:var(--text-secondary); border-bottom-color:transparent; text-decoration:none;}
.admin-tab.link:hover{color:var(--accent);}
.admin-pane{display:none;}
.admin-pane.active{display:block;}

/* ============================================================
   Нижнее меню основных разделов (partials/footer.php)
   ============================================================ */
.footnav{margin-top:32px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; justify-content:flex-start; align-items:center; flex-wrap:wrap;
  column-gap:24px; row-gap:8px; min-height:48px;}
.footnav a{text-decoration:none; color:var(--text-secondary); font-weight:600; font-size:14px;}
.footnav a:hover{color:var(--text-primary); text-decoration:underline;}
.footnav a.is-active{color:var(--accent);}

/* Сворачивание рейтинга: в свёрнутом виде показываем первые 15 строк */
#lb-card.collapsed tbody tr:nth-child(n+16){display:none;}
.lb-more{margin-top:16px; text-align:center;}

/* ============================================================
   Лента активности (тизер на главной, index.php)
   Квадратные плитки-обложки; лайк — в лайтбоксе, на плитке только счётчик.
   ============================================================ */
.feed{margin-top:32px;}
.feed-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px;}
.feed-head h2{font-size:18px; margin:0;}
.feed-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px;}
.sqc{position:relative; display:block; aspect-ratio:1 / 1; border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow); cursor:zoom-in; text-decoration:none; color:#fff;}
.sqc img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.sqc::after{content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0) 55%);}
.sqc .ov{position:absolute; left:12px; right:12px; bottom:10px; z-index:2; display:block;}
.sqc .ov .n{display:block; font-weight:700; font-size:14px; line-height:1.2;}
.sqc .ov .m{display:block; font-size:11px; opacity:.9; margin-top:2px;}
.sqc .ov .mini{display:inline-block; width:12px; height:12px; vertical-align:-2px;}
.sqc .ov .mini svg{width:12px; height:12px; display:block;}