:root { --bg: #0e0f11; --bg2: #141518; --bg3: #1a1c20; --bg4: #21242a; --border: rgba(255, 255, 255, 0.07); --border2: rgba(255, 255, 255, 0.12); --text: #e8e9ec; --text2: #7f8390; --text3: #4a4f5a; --green: #2dd87a; --green-dim: rgba(45, 216, 122, 0.12); --amber: #f0a733; --amber-dim: rgba(240, 167, 51, 0.12); --red: #f05050; --red-dim: rgba(240, 80, 80, 0.1); --blue: #5b9cf6; --blue-dim: rgba(91, 156, 246, 0.12); --mono: ui-monospace, "SF Mono", Menlo, monospace; --sans: system-ui, -apple-system, "Segoe UI", sans-serif; } /* Светлая тема: data-theme="light" на */ [data-theme="light"] { --bg: #fafbfc; --bg2: #ffffff; --bg3: #f1f3f5; --bg4: #e7eaee; --border: rgba(0, 0, 0, 0.07); --border2: rgba(0, 0, 0, 0.14); --text: #1a1d22; --text2: #5b6270; --text3: #9aa0aa; --green: #1da55c; --green-dim: rgba(29, 165, 92, 0.12); --amber: #c97a07; --amber-dim: rgba(201, 122, 7, 0.12); --red: #d63a3a; --red-dim: rgba(214, 58, 58, 0.10); --blue: #2566c9; --blue-dim: rgba(37, 102, 201, 0.12); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 14px; } a { color: var(--blue); text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border: 1px solid var(--border2); background: var(--bg3); color: var(--text); border-radius: 4px; font-size: 13px; transition: all 0.15s; } .btn:hover { background: var(--bg4); } .btn-primary { background: var(--green); color: #fff; border-color: var(--green); } .btn-primary:hover { background: #25b566; } [data-theme="light"] .btn-primary { color: #fff; } .btn-danger { color: var(--red); border-color: var(--red-dim); } .btn-danger:hover { background: var(--red-dim); } /* Переключатель темы — маленькая кнопка-иконка */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 4px; color: var(--text2); cursor: pointer; transition: all 0.15s; padding: 0; } .theme-toggle:hover { background: var(--bg4); color: var(--text); } .theme-toggle svg { width: 16px; height: 16px; } dialog { background: var(--bg2); color: var(--text); border: 1px solid var(--border2); border-radius: 8px; padding: 24px; max-width: 500px; width: 90%; margin: auto; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); } dialog::backdrop { background: rgba(0, 0, 0, 0.7); } [data-theme="light"] dialog::backdrop { background: rgba(0, 0, 0, 0.4); } dialog h3 { font-size: 16px; margin-bottom: 16px; } dialog label { display: block; margin-bottom: 10px; font-size: 12px; color: var(--text2); } dialog input, dialog select { width: 100%; margin-top: 4px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border2); border-radius: 4px; color: var(--text); font-size: 13px; } .dialog-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }