/* Общая тема учёта часов: шапка, карточки, таблицы, формы. По умолчанию светлая; [data-theme="dark"] на переключает на тёмную (ставится инлайн-скриптом до отрисовки, чтобы не было "мигания"). */ :root { --bg: #f4f6f5; --surface: #ffffff; --border: #dde3e0; --text: #1b1f1d; --muted: #6b7570; --accent: #0e9b74; --accent-soft: #e3f7f0; --danger: #c0392b; --danger-soft: #fdecea; --warn: #a66a12; --surface-glass: rgba(255, 255, 255, .78); /* Шкала «теплокарты» календаря — 0 (нет смены) .. 4 (максимум за месяц). */ --heat-0: var(--border); --heat-1: #c8ecdf; --heat-2: #8ad9bc; --heat-3: #3fbd8f; --heat-4: #0e9b74; } :root[data-theme="dark"] { --bg: #0b0b0b; --surface: #141414; --border: #242424; --text: #e5e5e5; --muted: #8a8a8a; --accent: #2dd4a7; --accent-soft: #16352c; --danger: #e5534b; --danger-soft: #3a1a17; --warn: #e5b34b; --surface-glass: rgba(20, 20, 20, .72); --heat-0: var(--border); --heat-1: #113328; --heat-2: #1a5440; --heat-3: #227a5c; --heat-4: #2dd4a7; } :root[data-theme="dark"] button { background: #1c1c1c; color: #fff; } :root[data-theme="dark"] button:hover { background: #262626; border-color: #3a3a3a; } :root[data-theme="dark"] .btn-primary { color: #eafff7; } :root[data-theme="dark"] .btn-danger { color: #ffecea; } #top-menu > .theme-toggle { font-size: 17px; line-height: 1; } * { box-sizing: border-box; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; background: var(--bg); color: var(--text); } a { text-decoration: none; color: inherit; } #header { background: var(--surface-glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .header_holder { width: 96%; max-width: 1100px; margin: 0 auto; padding: 11px 0; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .logo-link { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.2px; color: var(--text); white-space: nowrap; transition: color .2s; } .logo-link svg { color: var(--accent); flex: none; } .logo-link:hover { color: var(--accent); } #top-menu { display: flex; align-items: center; gap: 3px; margin-left: auto; flex-wrap: wrap; } #top-menu > a, #top-menu > button { color: var(--text); background: none; border: 1px solid transparent; font-size: 14px; font-family: inherit; padding: 8px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: color .15s, background .15s; } #top-menu > a:hover, #top-menu > button:hover, #top-menu > a.current { color: var(--accent); background: var(--accent-soft); } #top-menu > a.current { font-weight: 700; } .nav-divider { width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex: none; } .user-pill { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); white-space: nowrap; } .user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; } .who { font-size: 13px; color: var(--text); font-weight: 600; } #content { width: 96%; max-width: 1100px; margin: 18px auto 40px; } h1 { font-size: 20px; font-weight: 400; color: var(--accent); margin: 0 0 14px; } h2 { font-size: 16px; font-weight: 400; color: var(--text); margin: 0 0 10px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px; margin-bottom: 16px; box-shadow: 0 1px 2px rgba(20, 30, 25, .04); } .row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; } .field { display: flex; flex-direction: column; gap: 5px; } label { font-size: 13px; color: var(--muted); } input, select, textarea { height: 42px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 15px; font-family: inherit; outline: none; } input:focus, select:focus, textarea:focus { border-color: var(--accent); } button { height: 42px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--border); background: #f0f2f1; color: var(--text); font-size: 15px; font-family: inherit; cursor: pointer; transition: background .2s, border-color .2s; } button:hover { background: #e6e9e7; border-color: #c9d1cd; } button:disabled { opacity: .5; cursor: default; } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: #0c8462; border-color: #0c8462; } .btn-danger { background: var(--danger-soft); border-color: #f2c2bc; color: var(--danger); } .btn-danger:hover { background: #faddd9; } .btn-small { height: 32px; padding: 0 10px; font-size: 13px; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; } th { color: var(--muted); font-weight: 400; } tr:hover td { background: var(--accent-soft); } .muted { color: var(--muted); } .accent { color: var(--accent); } .warn { color: var(--warn); } .err { color: var(--danger); } .right { text-align: right; } .nowrap { white-space: nowrap; } .tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); color: var(--muted); } .tag-open { border-color: var(--accent); color: var(--accent); } .tag-admin { border-color: var(--warn); color: var(--warn); } .tag-off { border-color: var(--danger); color: var(--danger); } .msg { margin-top: 10px; font-size: 14px; min-height: 18px; } .table-wrap { overflow-x: auto; } /* Модалка с QR-кодом (приглашения в админке, привязка Telegram в профиле). */ #qrOverlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 100; align-items: center; justify-content: center; padding: 16px; } .qr-box { background: var(--surface); border-radius: 16px; padding: 20px; text-align: center; max-width: 300px; } .qr-white { background: #fff; border-radius: 10px; padding: 14px; display: inline-block; } .qr-white img { width: 240px; height: 240px; display: block; } @media (max-width: 600px) { .header_holder { padding: 10px 0; } .logo-link { font-size: 18px; } #content { margin-top: 12px; } .card { padding: 14px; } }