/* ЛКШ · рейтинг — тёмная тема. Ванильный CSS, без фреймворков. */

:root{
  --a1:#ff9a3d;
  --a2:#ff3d77;
  --bg:#000;
  --panel:#0a0a0c;
  --panel-2:#0e0e12;
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.05);
  --sep:rgba(255,255,255,.14);
  --txt:#fff;
  --txt-2:rgba(255,255,255,.55);
  --txt-3:rgba(255,255,255,.4);
  --hl:#15151b;
  --green:rgba(74,222,140,.5);
  --green-br:rgba(74,222,140,.55);
}

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:var(--bg);
  color:var(--txt);
  font-family:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:var(--a1); text-decoration:none; }
a:hover{ color:var(--a2); }
::selection{ background:rgba(255,154,61,.28); }
input{ font-family:inherit; }
input::placeholder{ color:rgba(255,255,255,.4); }
::-webkit-scrollbar{ height:10px; width:10px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

@keyframes floaty{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-34px,28px) scale(1.06);} }
@keyframes fadeup{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

.page{ min-height:100vh; position:relative; overflow:hidden; }
.glow{
  position:absolute; top:-190px; right:-150px; width:660px; height:660px; border-radius:50%;
  background:radial-gradient(circle at 34% 34%, var(--a1), transparent 60%),
             radial-gradient(circle at 66% 62%, var(--a2), transparent 62%);
  filter:blur(95px); opacity:.32; pointer-events:none; animation:floaty 17s ease-in-out infinite;
}
.wrap{
  position:relative; z-index:1; max-width:1280px; margin:0 auto;
  padding:clamp(20px,4vw,44px) clamp(16px,4vw,40px) 96px;
}

/* ---- topbar ---- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-bottom:clamp(24px,4vw,44px);
}
.brand{ display:flex; align-items:center; gap:14px; }
.logo{
  width:46px; height:46px; border-radius:14px;
  background:linear-gradient(135deg,var(--a1),var(--a2));
  display:flex; align-items:center; justify-content:center;
  font-family:'Unbounded',sans-serif; font-weight:800; font-size:18px; color:#0a0a0c;
}
.brand-name{ font-family:'Unbounded',sans-serif; font-weight:700; font-size:16px; letter-spacing:-.01em; }
.search{
  display:flex; align-items:center; gap:10px; background:var(--panel-2);
  border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:11px 16px;
  flex:0 1 340px; min-width:min(340px,100%);
}
.search svg{ flex-shrink:0; }
.search input{ background:none; border:none; outline:none; color:#fff; font-size:14px; width:100%; }

/* ---- title / meta ---- */
.h1{
  font-family:'Unbounded',sans-serif; font-weight:800;
  font-size:clamp(30px,6.4vw,54px); line-height:1.02; letter-spacing:-.02em; margin:0;
  animation:fadeup .4s ease;
}
.meta-row{ display:flex; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.source{
  display:inline-flex; align-items:center; gap:7px; background:var(--panel-2);
  border:1px solid rgba(255,255,255,.09); padding:6px 12px; border-radius:999px;
  font-size:13.5px; color:var(--txt-2);
}
.dot{ width:7px; height:7px; border-radius:50%; }
.dot.green{ background:#5ef2a0; } .dot.blue{ background:#38d0ff; } .dot.red{ background:#ff5c7a; }
.updated{ font-size:13px; color:var(--txt-3); }

.controls{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:22px 0; }
.tabs{ display:inline-flex; background:var(--panel-2); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:4px; }
.tab{
  padding:9px 18px; border-radius:11px; border:none; cursor:pointer; font-size:14px;
  font-family:inherit; font-weight:600; background:transparent; color:var(--txt-2);
  transition:color .15s ease;
}
.tab:hover{ color:#fff; }
.tab.active{ background:linear-gradient(90deg,var(--a1),var(--a2)); color:#0a0a0c; font-weight:700; }
.materials{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:-8px 0 18px; }
.materials>span{ color:var(--txt-3); font-size:12px; margin-right:2px; }
.materials a{ padding:7px 10px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); color:var(--txt-2); font-size:12px; }
.materials a:hover{ color:#fff; border-color:rgba(255,154,61,.45); }

/* ---- panel + tables ---- */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.scroll{ overflow-x:auto; }
table{ border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; }
thead tr{ background:var(--panel-2); }
th{ font-weight:600; color:var(--txt-2); font-size:12px; letter-spacing:.02em; }
.gh{ color:rgba(255,255,255,.72); font-weight:600; font-size:12.5px; padding:13px 10px 5px; text-align:center; }
.gh a{ color:inherit; text-decoration:none; }
.gh a:hover{ color:var(--a1); }
.material-link{ display:inline-flex; align-items:center; gap:5px; }
.material-link span{ color:var(--a1); font-size:10px; transform:translateY(-1px); }
.sub{ color:rgba(255,255,255,.36); font-size:11.5px; font-weight:500; padding:0 8px 11px; text-align:center; }
.sub.sigma{ color:var(--txt-2); font-size:12px; font-weight:600; padding:0 10px 11px; }
.task-link{ display:flex; align-items:center; justify-content:center; min-width:24px; min-height:24px; color:inherit; border-radius:7px; }
.task-link:hover{ color:#fff; background:rgba(255,154,61,.14); }
tbody tr{ border-top:1px solid var(--line-soft); }
tbody tr:hover td{ background:var(--hl); }
tbody tr:hover .sticky-rank,
tbody tr:hover .sticky-name{ background:var(--hl); }

.sticky-rank, .sticky-name{ position:sticky; z-index:3; background:var(--panel); }
.sticky-rank{ left:0; width:64px; }
.sticky-name{ left:64px; border-right:1px solid var(--line); }
thead .sticky-rank, thead .sticky-name{ z-index:5; background:var(--panel-2); }

td{ padding:14px 10px; text-align:center; }
td.score{ color:rgba(255,255,255,.6); font-size:13.5px; border-left:1px solid rgba(255,255,255,.03); }
td.sigma{ color:#fff; font-weight:600; font-size:13.5px; background:rgba(255,255,255,.02); }
th.head-rank{ padding:16px; text-align:center; }
th.head-name{ padding:16px 14px; text-align:left; }
th.head-total{ padding:16px 18px; text-align:right; border-left:1px solid var(--line); }
td.cell-rank{ padding:14px 16px; }
td.cell-name{ padding:14px 14px; text-align:left; white-space:nowrap; }
.name-main{ font-weight:600; font-size:14.5px; }
.name-sub{ font-size:12px; color:var(--txt-3); margin-top:2px; }
td.cell-total{ padding:14px 18px; text-align:right; border-left:1px solid var(--line-soft); min-width:120px; }
.total-num{ font-weight:700; font-size:15px; white-space:nowrap; }
.bar-track{ height:3px; border-radius:2px; background:rgba(255,255,255,.08); margin-top:7px; overflow:hidden; }
.bar-fill{ height:100%; border-radius:2px; background:linear-gradient(90deg,var(--a1),var(--a2)); }

/* rank pill */
.rank{
  display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:30px;
  padding:0 8px; border-radius:9px; font-weight:700; font-size:13px; flex-shrink:0;
  background:rgba(255,255,255,.06); color:var(--txt-2);
}
.rank.r-gold{ background:rgba(255,207,92,.16); color:#ffcf5c; }
.rank.r-silver{ background:rgba(207,212,222,.14); color:#cfd4de; }
.rank.r-bronze{ background:rgba(224,165,107,.16); color:#e0a56b; }

/* math table */
.gh.sep, td.sep{ border-left:1px solid var(--sep); }
.sub.sep{ border-left:1px solid var(--sep); }
td.cell-math-name{ padding:12px 14px; text-align:left; white-space:nowrap; font-weight:600; font-size:14.5px; }
td.cell-math-total{ padding:12px 16px; text-align:right; }
.tot-grad{
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:16px;
  background:linear-gradient(90deg,var(--a1),var(--a2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
td.cell{ padding:6px 6px; width:36px; text-align:center; }
.cell-task-link{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin:0 auto; border-radius:8px; }
.cell-task-link:hover{ background:rgba(255,154,61,.15); box-shadow:inset 0 0 0 1px rgba(255,154,61,.35); }
.tile{ display:block; width:24px; height:24px; margin:0 auto; border-radius:7px; background:var(--green); border:1px solid var(--green-br); }
.tile.reviewed{ background:rgba(74,222,140,.6); border-color:rgba(120,255,180,.75); }
.empty{ display:flex; align-items:center; justify-content:center; height:30px; }
.empty span{ width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.16); }

/* ---- mobile cards ---- */
.cards{ display:flex; flex-direction:column; gap:12px; }
.card{ background:#0b0b0e; border:1px solid var(--line); border-radius:16px; padding:16px; animation:fadeup .35s ease; }
.card.top{ border-color:rgba(255,207,92,.28); }
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.card-id{ display:flex; align-items:center; gap:12px; min-width:0; }
.card-name{ font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-login{ font-size:12px; color:var(--txt-3); margin-top:1px; }
.card-total{ text-align:right; flex-shrink:0; }
.card-total b{
  font-family:'Unbounded',sans-serif; font-weight:700; font-size:19px;
  background:linear-gradient(90deg,var(--a1),var(--a2));
  -webkit-background-clip:text; background-clip:text; color:transparent; display:block;
}
.card-total small{ font-size:11px; color:var(--txt-3); }
.card-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px; }
.stat{ background:rgba(255,255,255,.03); border-radius:11px; padding:9px 8px; text-align:center; }
.stat-k{ font-size:10.5px; color:rgba(255,255,255,.45); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stat-v{ font-weight:600; font-size:13.5px; }
.card-bar{ margin:13px 0; }
.tilegrid{ display:flex; flex-wrap:wrap; gap:4px; margin-top:14px; }
.tilegrid .t{ width:13px; height:13px; border-radius:4px; }
.tilegrid .t.on{ background:rgba(74,222,140,.7); }
.tilegrid .t.off{ background:rgba(255,255,255,.07); }

.empty-state{ text-align:center; color:var(--txt-3); padding:70px 0; font-size:15px; }
.err{ color:#ff8098; }

@media (max-width:759px){
  .wrap{ padding:18px 14px 56px; }
  .topbar{ align-items:stretch; margin-bottom:28px; }
  .brand{ flex:1 0 auto; }
  .search{ flex:1 0 100%; min-width:0; }
  .h1{ font-size:30px; }
  .controls{ margin:18px 0; }
  .tabs{ width:100%; }
  .tab{ flex:1; }
  .materials{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; margin-top:-6px; }
  .materials>span,.materials a{ flex:0 0 auto; }
  .card-stats{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}