/* ============================================================ Олимпиада KG — профессиональная тема (светлая / тёмная) Акцент: индиго. Светлая тема — основная. Тема переключается атрибутом data-theme на . ============================================================ */ /* ---------- СВЕТЛАЯ ТЕМА (по умолчанию) ---------- */ :root{ --accent:#3B5BDB; --accent-hover:#2F4BC4; --accent-soft:#E8ECFB; --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#F8FAFC; --hover:#F1F4F8; --border:#E4E8EF; --border-strong:#D2D8E2; --text:#1B2330; --muted:#6B7480; --heading:#0F1722; --shadow:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08); --shadow-lg:0 10px 30px rgba(16,24,40,.12); --sidebar:#FFFFFF; --topbar:#FFFFFF; --green:#0E9F6E; --green-soft:#E3F5EE; --blue:#2563EB; --blue-soft:#E5EDFD; --orange:#D97706;--orange-soft:#FBEEDB; --red:#DC2626; --red-soft:#FBE6E6; --gold:#B8860B; --gold-soft:#F7EFD6; --silver:#6B7280;--silver-soft:#ECEEF1; --bronze:#B45309;--bronze-soft:#F6E7D6; --grid-line:rgba(16,24,40,.08); --tick:#6B7480; --radius:12px; --radius-sm:9px; } /* ---------- ТЁМНАЯ ТЕМА ---------- */ [data-theme="dark"]{ --accent:#6C8CFF; --accent-hover:#5B7CFA; --accent-soft:#1E2740; --bg:#0F141A; --surface:#161C24; --surface-2:#1B222C; --hover:#1F2630; --border:#262E3A; --border-strong:#323C4A; --text:#E6EDF3; --muted:#94A0AE; --heading:#F2F6FB; --shadow:none; --shadow-lg:0 12px 32px rgba(0,0,0,.45); --sidebar:#12161D; --topbar:#12161D; --green:#34D399; --green-soft:#10261F; --blue:#60A5FA; --blue-soft:#13243B; --orange:#FBBF24;--orange-soft:#2A2310; --red:#F87171; --red-soft:#2B1517; --gold:#FFD34D; --gold-soft:#2A2410; --silver:#C0C6CF;--silver-soft:#21262E; --bronze:#D98A4B;--bronze-soft:#271A10; --grid-line:rgba(255,255,255,.07); --tick:#94A0AE; } *{box-sizing:border-box;margin:0;padding:0} html,body{height:100%} body{font-family:'Inter','Segoe UI',system-ui,Roboto,sans-serif;background:var(--bg); color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased} a{color:inherit;text-decoration:none} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:6px} ::-webkit-scrollbar-track{background:transparent} /* ---------- Раскладка ---------- */ .layout{display:flex;min-height:100vh} .sidebar{width:256px;background:var(--sidebar);border-right:1px solid var(--border); display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:20} .brand{padding:20px 20px 14px;display:flex;align-items:center;gap:11px} .brand .mark{width:38px;height:38px;border-radius:10px;background:var(--accent); display:grid;place-items:center;color:#fff;font-size:20px;flex:none} .brand .logo{font-size:15.5px;font-weight:700;color:var(--heading);letter-spacing:.2px} .brand .sub{font-size:11.5px;color:var(--muted)} .sidebar hr{border:none;border-top:1px solid var(--border);margin:6px 16px} .nav{display:flex;flex-direction:column;gap:2px;padding:8px 12px;overflow-y:auto} .nav .group{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted); padding:12px 14px 6px;font-weight:700} .nav a{display:flex;align-items:center;gap:12px;padding:10px 13px;border-radius:9px; color:var(--muted);font-weight:600;font-size:13.5px;transition:.13s;position:relative} .nav a .ic{font-size:17px;width:20px;text-align:center} .nav a:hover{background:var(--hover);color:var(--text)} .nav a.active{background:var(--accent-soft);color:var(--accent)} .nav a.active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px; border-radius:3px;background:var(--accent)} .sidebar .bottom{margin-top:auto;padding:14px 16px 18px} .user-chip{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--border); border-radius:10px;background:var(--surface-2);margin-bottom:10px} .user-chip .av{width:32px;height:32px;border-radius:8px;display:grid;place-items:center; color:#fff;font-size:15px;flex:none} .user-chip .nm{font-size:13px;font-weight:600;color:var(--text);line-height:1.2} .user-chip .rl{font-size:11px;color:var(--muted)} .content{margin-left:256px;flex:1;width:calc(100% - 256px);display:flex;flex-direction:column} .topbar{height:62px;background:var(--topbar);border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:15} .topbar .crumb{font-size:13px;color:var(--muted)} .topbar .crumb b{color:var(--text);font-weight:600} .topbar .tools{display:flex;align-items:center;gap:10px} .main{padding:26px 28px;flex:1} /* Переключатель темы */ .theme-toggle{width:40px;height:40px;border-radius:10px;border:1px solid var(--border); background:var(--surface);cursor:pointer;display:grid;place-items:center;font-size:18px; transition:.13s;color:var(--text)} .theme-toggle:hover{background:var(--hover);border-color:var(--border-strong)} /* ---------- Заголовки страниц ---------- */ .page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;flex-wrap:wrap;gap:12px} .page-head h1{font-size:23px;font-weight:700;color:var(--heading);letter-spacing:-.2px} .page-head .desc{color:var(--muted);font-size:13.5px;margin-top:3px} /* ---------- Карточки и сетки ---------- */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:18px;box-shadow:var(--shadow)} .card h3{font-size:14.5px;margin-bottom:14px;font-weight:700;color:var(--heading)} .grid{display:grid;gap:18px} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} .cols-5{grid-template-columns:repeat(5,1fr)} @media(max-width:1200px){.cols-5{grid-template-columns:repeat(3,1fr)}} @media(max-width:1080px){.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}} @media(max-width:780px){.cols-2,.cols-3,.cols-4,.cols-5{grid-template-columns:1fr} .sidebar{display:none}.content{margin-left:0;width:100%}} /* ---------- KPI ---------- */ .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:17px 18px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow)} .kpi .ic{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font-size:22px; background:var(--accent-soft);flex:none} .kpi .val{font-size:26px;font-weight:700;line-height:1;color:var(--heading)} .kpi .lbl{font-size:12.5px;color:var(--muted);margin-top:5px} /* ---------- Таблицы ---------- */ .table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); overflow:hidden;box-shadow:var(--shadow)} table{width:100%;border-collapse:collapse} th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted); padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface-2);font-weight:700} td{padding:12px 16px;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--text)} tbody tr{transition:.1s} tbody tr:hover{background:var(--hover)} tbody tr:last-child td{border-bottom:none} .clickable{cursor:pointer} /* ---------- Бейджи / медали ---------- */ .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:7px;font-size:12px;font-weight:600} .badge-green{background:var(--green-soft);color:var(--green)} .badge-blue{background:var(--blue-soft);color:var(--blue)} .badge-orange{background:var(--orange-soft);color:var(--orange)} .badge-red{background:var(--red-soft);color:var(--red)} .badge-gold{background:var(--gold-soft);color:var(--gold)} .badge-silver{background:var(--silver-soft);color:var(--silver)} .badge-bronze{background:var(--bronze-soft);color:var(--bronze)} .badge-accent{background:var(--accent-soft);color:var(--accent)} .badge-muted{background:var(--surface-2);color:var(--muted)} /* ---------- Кнопки ---------- */ .btn{display:inline-flex;align-items:center;gap:8px;border:1px solid transparent;cursor:pointer; font-weight:600;font-size:13.5px;padding:9px 16px;border-radius:var(--radius-sm);transition:.13s; font-family:inherit;white-space:nowrap} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-hover)} .btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border-strong)} .btn-ghost:hover{background:var(--hover)} .btn-danger{background:transparent;color:var(--red);border-color:var(--red)} .btn-danger:hover{background:var(--red);color:#fff} .btn-sm{padding:6px 12px;font-size:12.5px} .btn[disabled]{opacity:.5;cursor:not-allowed} /* ---------- Формы / фильтры ---------- */ .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center} input,select,textarea{background:var(--surface);border:1px solid var(--border-strong);color:var(--text); padding:9px 12px;border-radius:var(--radius-sm);font-size:13.5px;font-family:inherit;outline:none;transition:.12s} input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} input::placeholder{color:var(--muted)} label{font-size:12px;color:var(--muted);display:block;margin-bottom:5px;font-weight:600} .form-row{margin-bottom:14px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} /* ---------- Модальные окна ---------- */ .modal-bg{position:fixed;inset:0;background:rgba(16,24,40,.45);display:none;align-items:center; justify-content:center;z-index:60;backdrop-filter:blur(2px)} .modal-bg.open{display:flex} .modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); width:min(560px,92vw);max-height:90vh;overflow:auto;box-shadow:var(--shadow-lg)} .modal-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center} .modal-head h3{font-size:16.5px;color:var(--heading)} .modal-body{padding:22px} .modal-foot{padding:16px 22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:10px} .x{cursor:pointer;color:var(--muted);font-size:22px;line-height:1;background:none;border:none} .x:hover{color:var(--text)} /* ---------- Флэш ---------- */ .flash{padding:11px 16px;border-radius:var(--radius-sm);margin-bottom:14px;font-weight:600;font-size:13.5px; border:1px solid transparent} .flash-success{background:var(--green-soft);color:var(--green);border-color:var(--green)} .flash-error{background:var(--red-soft);color:var(--red);border-color:var(--red)} .flash-info{background:var(--blue-soft);color:var(--blue);border-color:var(--blue)} /* ---------- Логин ---------- */ .login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px; background:radial-gradient(900px 500px at 50% -5%,var(--accent-soft),transparent),var(--bg)} .login-card{width:430px;max-width:94vw;background:var(--surface);border:1px solid var(--border); border-radius:16px;overflow:hidden;box-shadow:var(--shadow-lg)} .login-top{padding:30px 32px 22px;text-align:center;border-bottom:1px solid var(--border)} .login-top .mark{width:56px;height:56px;border-radius:14px;background:var(--accent);margin:0 auto 12px; display:grid;place-items:center;color:#fff;font-size:28px} .login-top h2{color:var(--heading);font-size:20px;font-weight:700} .login-top p{color:var(--muted);font-size:13px;margin-top:3px} .login-body{padding:26px 32px 30px} .login-body h3{margin-bottom:16px;font-size:15px;color:var(--heading)} .quick-title{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted); font-weight:700;margin:20px 0 10px;display:flex;align-items:center;gap:10px} .quick-title::after{content:"";flex:1;height:1px;background:var(--border)} .quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .quick-btn{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--border-strong); border-radius:10px;background:var(--surface);cursor:pointer;text-align:left;transition:.13s;font-family:inherit} .quick-btn:hover{border-color:var(--accent);background:var(--accent-soft)} .quick-btn .qic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font-size:15px;flex:none} .quick-btn .qnm{font-size:13px;font-weight:700;color:var(--text)} .quick-btn .qcr{font-size:11px;color:var(--muted)} /* ---------- Прочее ---------- */ .muted{color:var(--muted)} .text-right{text-align:right} .mt{margin-top:18px} .row-actions{display:flex;gap:8px;align-items:center} .empty{padding:42px;text-align:center;color:var(--muted)} .chart-box{position:relative;height:280px} .list-side{display:flex;flex-direction:column;gap:6px;max-height:72vh;overflow:auto;padding-right:4px} .list-item{padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:var(--surface); cursor:pointer;transition:.12s} .list-item:hover{background:var(--hover)} .list-item.active{border-color:var(--accent);background:var(--accent-soft)} .list-item .t{font-weight:600;color:var(--text);font-size:13.5px} .list-item .m{font-size:12px;color:var(--muted);margin-top:2px}