/* Темы оформления: цвета и фоны. Подключается только у пользователей, выбравших тему или свой акцентный цвет; «Классика» — app.css без изменений. */
html[data-look] body{background-repeat:no-repeat;background-attachment:fixed;background-size:cover;background-position:center bottom}
html[data-look] .card,html[data-look] table,html[data-look] .filters{backdrop-filter:none}

/* Океан */
html[data-look=ocean]{--brand:#0b86a6;--brand-dark:#086a84;--brand-10:rgba(11,134,166,.10);--brand-20:rgba(11,134,166,.20);--side:linear-gradient(180deg,#0a5a73 0%,#0b86a6 100%);--bg:#eaf4f7}
html[data-look=ocean] body{background-image:url(../img/themes/ocean.svg)}
html[data-theme=dark][data-look=ocean]{--bg:#061418;--side:linear-gradient(180deg,#06303d 0%,#0a4658 100%)}

/* Закат */
html[data-look=sunset]{--brand:#e8590c;--brand-dark:#b8470a;--brand-10:rgba(232,89,12,.10);--brand-20:rgba(232,89,12,.20);--side:linear-gradient(180deg,#8f2a4f 0%,#e8590c 100%);--bg:#fbf1ea}
html[data-look=sunset] body{background-image:url(../img/themes/sunset.svg)}
html[data-theme=dark][data-look=sunset]{--bg:#1a0e0a;--side:linear-gradient(180deg,#4a1730 0%,#7a3008 100%)}

/* Лес */
html[data-look=forest]{--brand:#2b8a3e;--brand-dark:#206a2f;--brand-10:rgba(43,138,62,.10);--brand-20:rgba(43,138,62,.20);--side:linear-gradient(180deg,#1b5e2b 0%,#2b8a3e 100%);--bg:#edf5ee}
html[data-look=forest] body{background-image:url(../img/themes/forest.svg)}
html[data-theme=dark][data-look=forest]{--bg:#08130b;--side:linear-gradient(180deg,#0f3318 0%,#1b5e2b 100%)}

/* 3D-сетка */
html[data-look=grid3d]{--brand:#0a5bd6;--brand-dark:#0846a8;--brand-10:rgba(10,91,214,.10);--brand-20:rgba(10,91,214,.20);--side:linear-gradient(180deg,#0a1e4a 0%,#0a3a8f 100%);--bg:#eef2fa}
html[data-look=grid3d] body{background-image:url(../img/themes/grid3d.svg)}
html[data-theme=dark][data-look=grid3d]{--bg:#050a18;--side:linear-gradient(180deg,#050f2a 0%,#0a2260 100%)}

/* Активный пункт меню на цветном боковом меню остаётся белым */
html[data-look] .sidebar nav a.active{background:#fff;color:var(--brand)}

/* Выбор оформления в профиле */
.looks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin:8px 0 14px}
.look-card{display:block;border:2px solid var(--line);border-radius:10px;padding:0;margin:0;cursor:pointer;overflow:hidden;background:var(--card);font-weight:400;transition:border-color .15s,box-shadow .15s}
.look-card:hover{border-color:var(--brand)}.look-card input{position:absolute;opacity:0;pointer-events:none}
.look-card.on{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-20)}
.look-card .sw{height:64px;display:flex}.look-card .sw i{flex:0 0 34%}.look-card .sw b{flex:1;background-size:cover;background-position:center}
.look-card .t{padding:8px 10px;font-size:13px}.look-card .t b{display:block;font-weight:700;color:var(--head)}.look-card .t span{color:var(--muted);font-size:12px}
.accents{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 10px}
.accents button[data-c]{width:30px;height:30px;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.accents button[data-c].on{box-shadow:0 0 0 3px var(--brand-20),0 0 0 1px var(--brand)}
.accents input[type=color]{width:38px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:none}

/* ───────── Темы 1.21.0: «Стекло» (в стиле Apple), «Аврора», «Контраст», «Пастель», «Графит». Меняют не только цвета, но и форму: шрифт, скругления, плотность. ───────── */

/* У «Стекла» и «Пастели» в светлом режиме меню светлое, а базовые правила меню рассчитаны на белый текст по цветному фону */
html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .sidebar .brand img{content:url(../img/logo.png)}
html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .sidebar .cab,html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .sidebar nav .sep,html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .sidebar .side-user span,html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .sidebar .version a{color:var(--muted)}
html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .sidebar nav .nav-group>summary:hover,html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .sidebar nav .nav-group.current:not([open])>summary{color:var(--head)}
html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .sidebar nav a:not(.active):not(.attn):hover{background:rgba(0,0,0,.05)}
html[data-look=pastel]:not([data-theme=dark]) .sidebar nav a.attn:not(.attn-warn):not(.active){color:#fff}
html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .sidebar .side-user{border-top-color:var(--line)}
html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .sidebar .side-user a{color:var(--brand)!important}
html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .sidebar .side-user .btn.secondary,html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .sidebar .theme-btn{background:rgba(0,0,0,.06);color:var(--text);border-color:transparent}
html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .sidebar .side-user .btn.secondary:hover,html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .sidebar .theme-btn:hover{background:rgba(0,0,0,.1);color:var(--text)}
html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .menu-btn,html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .mode-btn-top{border-color:var(--g4);color:var(--text)}
html:is([data-look=glass]:not([data-menu=color]),[data-look=pastel]):not([data-theme=dark]) .nav-group:not([open]):has(a.attn)>summary::before{box-shadow:none}

/* Стекло: в духе macOS. Системный шрифт, полупрозрачное меню, тонкие линии, кнопки-пилюли, переключатели сегментами */
html[data-look=glass]{--brand:#0073ff;--brand-dark:#005fd6;--brand-10:rgba(0,115,255,.08);--brand-20:rgba(0,115,255,.2);--bg:#f5f5f7;--card:#fff;--text:#1d1d1f;--head:#1d1d1f;--muted:#6e6e73;--line:#e5e5ea;--g3:#a1a1a6;--g4:#d2d2d7;--g5:#ececf0;--radius:14px;--shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.04);--side:rgba(255,255,255,.55);--side-text:#1d1d1f;--seg:#e3e3e8;--seg-on:#fff}
html[data-theme=dark][data-look=glass]{--brand:#0a84ff;--brand-dark:#3d9bff;--brand-10:rgba(10,132,255,.14);--brand-20:rgba(10,132,255,.3);--bg:#000;--card:#1c1c1e;--text:#f5f5f7;--head:#f5f5f7;--muted:#98989d;--line:#2c2c2e;--g3:#636366;--g4:#3a3a3c;--g5:#2c2c2e;--shadow:none;--side:rgba(28,28,30,.7);--side-text:#f5f5f7;--seg:#2c2c2e;--seg-on:#636366}
html[data-look=glass] body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;line-height:1.47;letter-spacing:-.006em;-webkit-font-smoothing:antialiased;
  background-image:radial-gradient(900px 520px at -8% -12%,color-mix(in srgb,var(--brand) 15%,transparent),transparent 62%),radial-gradient(760px 480px at -4% 108%,color-mix(in srgb,var(--brand) 9%,transparent),transparent 60%)}
html[data-theme=dark][data-look=glass] body{background-image:radial-gradient(900px 520px at -8% -12%,color-mix(in srgb,var(--brand) 26%,transparent),transparent 62%),radial-gradient(760px 480px at -4% 108%,color-mix(in srgb,var(--brand) 14%,transparent),transparent 60%)}
/* Настройки «Стекла»: фон страницы (ровный или свой градиент) и цветное меню (синее как раньше, в цвет акцента, градиент) */
html[data-look=glass][data-bg=plain] body{background-image:none}
html[data-look=glass][data-bg=gradient] body{background-image:linear-gradient(135deg,color-mix(in srgb,var(--bg-from) 20%,var(--bg)),color-mix(in srgb,var(--bg-to) 20%,var(--bg)))}
html[data-theme=dark][data-look=glass][data-bg=gradient] body{background-image:linear-gradient(135deg,color-mix(in srgb,var(--bg-from) 32%,var(--bg)),color-mix(in srgb,var(--bg-to) 32%,var(--bg)))}
/* Рисунок на фоне: svg служит маской, поэтому красится в акцентный цвет; в тёмной теме цвет светлее */
html[data-look=glass][data-art] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--brand);-webkit-mask-size:cover;-webkit-mask-position:center bottom;-webkit-mask-repeat:no-repeat;mask-size:cover;mask-position:center bottom;mask-repeat:no-repeat}
html[data-theme=dark][data-look=glass][data-art] body::before{background:color-mix(in srgb,var(--brand) 70%,#fff)}
html[data-look=glass][data-art=grid3d] body::before{-webkit-mask-image:url(../img/themes/grid3d.svg);mask-image:url(../img/themes/grid3d.svg)}
html[data-look=glass][data-art=mesh] body::before{-webkit-mask-image:url(../img/themes/mesh.svg);mask-image:url(../img/themes/mesh.svg)}
html[data-look=glass][data-art=surface] body::before{-webkit-mask-image:url(../img/themes/surface.svg);mask-image:url(../img/themes/surface.svg)}
html[data-look=glass][data-art=contour] body::before{-webkit-mask-image:url(../img/themes/contour.svg);mask-image:url(../img/themes/contour.svg)}
html[data-look=glass][data-art=points] body::before{-webkit-mask-image:url(../img/themes/points.svg);mask-image:url(../img/themes/points.svg)}
html[data-look=glass][data-art=hex] body::before{-webkit-mask-image:url(../img/themes/hex.svg);mask-image:url(../img/themes/hex.svg)}
html[data-look=glass][data-art=ocean] body::before{-webkit-mask-image:url(../img/themes/ocean.svg);mask-image:url(../img/themes/ocean.svg)}
html[data-look=glass][data-art=forest] body::before{-webkit-mask-image:url(../img/themes/forest.svg);mask-image:url(../img/themes/forest.svg)}
html[data-look=glass] .guest{background:transparent}html[data-look=glass] .guest .brand-tri{display:none}
html[data-look=glass][data-menu=color] .sidebar{border-right-color:transparent}
html[data-theme=dark][data-look=glass][data-menu=color] .sidebar{box-shadow:inset 0 0 0 100vmax rgba(0,0,0,.32)}
html[data-look=glass] h1{font-size:28px;font-weight:700;letter-spacing:-.022em}html[data-look=glass] h2{font-size:19px;font-weight:600;letter-spacing:-.015em}html[data-look=glass] h3{font-size:15px;font-weight:600}
html[data-look=glass] .sidebar{-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border-right:1px solid rgba(0,0,0,.08)}
html[data-theme=dark][data-look=glass] .sidebar{border-right-color:rgba(255,255,255,.1)}
html[data-look=glass] .sidebar .cab,html[data-look=glass] .sidebar nav .sep{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600}
html[data-look=glass] .sidebar nav a{padding:7px 10px;border-radius:8px}
html[data-look=glass] .sidebar nav a.active{background:var(--brand);color:#fff;font-weight:500}
html[data-theme=dark][data-look=glass] .sidebar nav a:not(.active):not(.attn):hover{background:rgba(255,255,255,.08)}
/* Пункты, требующие внимания: как в почте macOS — спокойная строка и цветной счётчик вместо залитой мигающей плашки */
html[data-look=glass] .sidebar nav a.attn{background:transparent;animation:none;color:var(--side-text);font-weight:400;box-shadow:none}
html[data-look=glass] .sidebar nav a.attn:not(.active):hover{background:rgba(0,0,0,.05)}html[data-theme=dark][data-look=glass] .sidebar nav a.attn:not(.active):hover{background:rgba(255,255,255,.08)}
html[data-look=glass] .sidebar nav a.attn .nav-count{color:#fff;font-weight:600}
html[data-look=glass] .sidebar nav a.attn-danger .nav-count{background:#ff3b30}html[data-look=glass] .sidebar nav a.attn-warn .nav-count{background:#ff9f0a}html[data-look=glass] .sidebar nav a.attn-ok .nav-count{background:#34c759}html[data-look=glass] .sidebar nav a.attn-violet .nav-count{background:#af52de}
html[data-look=glass] .sidebar nav a.attn.active{background:var(--brand);color:#fff;font-weight:500}
html[data-look=glass] .sidebar nav a.attn.active .nav-count{background:#fff;color:var(--brand)}
html[data-look=glass] .sidebar .side-user .btn.secondary,html[data-look=glass] .sidebar .theme-btn{background:var(--seg);border-color:transparent;color:var(--text)}
html[data-look=glass] .card,html[data-look=glass] .filters,html[data-look=glass] .stat,html[data-look=glass] table,html[data-look=glass] .tree,html[data-look=glass] .cardlist .item{border-color:transparent}
html[data-theme=dark][data-look=glass] .card,html[data-theme=dark][data-look=glass] .filters,html[data-theme=dark][data-look=glass] .stat,html[data-theme=dark][data-look=glass] table,html[data-theme=dark][data-look=glass] .tree{border-color:var(--line)}
html[data-look=glass] .card{padding:20px 22px}
html[data-look=glass] .stat::after,html[data-look=glass] .brand-tri{display:none}
html[data-look=glass] .stat b{font-weight:600;letter-spacing:-.022em}html[data-look=glass] .stat span,html[data-look=glass] .hint,html[data-look=glass] .topbar,html[data-look=glass] dl.kv dt{font-weight:400}
html[data-look=glass] a.stat:hover{border-color:transparent;box-shadow:0 2px 4px rgba(0,0,0,.05),0 12px 28px rgba(0,0,0,.09)}
html[data-look=glass] th{background:transparent;color:var(--muted);text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500}
html[data-look=glass] tbody tr:hover td,html[data-look=glass] tr:hover td{background:rgba(0,0,0,.025)}html[data-theme=dark][data-look=glass] tr:hover td{background:rgba(255,255,255,.04)}
html[data-look=glass] input,html[data-look=glass] select,html[data-look=glass] textarea{border-radius:10px}
html[data-look=glass] input:focus,html[data-look=glass] select:focus,html[data-look=glass] textarea:focus{box-shadow:0 0 0 4px var(--brand-20)}
html[data-look=glass] .btn{border-radius:980px;padding:8px 16px}html[data-look=glass] .btn.sm{padding:5px 12px}
html[data-look=glass] .btn.secondary,html[data-look=glass] .theme-btn{background:var(--seg);border-color:transparent;color:var(--text)}
html[data-look=glass] .btn.secondary:hover{background:var(--g4);border-color:transparent;color:var(--text)}
html[data-look=glass] .theme-btn{border-radius:980px}
html[data-look=glass] .alert{border:0;border-radius:12px;box-shadow:inset 3px 0 0 var(--ok),var(--shadow)}html[data-look=glass] .alert.err{box-shadow:inset 3px 0 0 var(--danger),var(--shadow)}html[data-look=glass] .alert.warn{box-shadow:inset 3px 0 0 var(--brand)}
html[data-look=glass] .pagination li a,html[data-look=glass] .pagination li span{border-color:transparent;border-radius:980px}
/* Сегментированные переключатели: периоды показателей и вкладки */
html[data-look=glass] .periods>a{border:0;border-radius:7px;padding:6px 14px;background:transparent;margin:0}
html[data-look=glass] .periods{gap:0;row-gap:8px}html[data-look=glass] .periods>a:first-of-type{margin-left:0}
html[data-look=glass] .periods>a,html[data-look=glass] .tabs a{background:var(--seg);border-radius:0;color:var(--text);font-size:13px;font-weight:500;box-shadow:inset 0 0 0 2px var(--seg)}
html[data-look=glass] .periods>a:first-of-type,html[data-look=glass] .tabs a:first-child{border-radius:9px 0 0 9px}html[data-look=glass] .periods>a:last-of-type,html[data-look=glass] .tabs a:last-child{border-radius:0 9px 9px 0}
html[data-look=glass] .periods>a.on,html[data-look=glass] .tabs a.on{background:var(--seg-on);color:var(--head);border-radius:8px;box-shadow:inset 0 0 0 2px var(--seg),0 1px 3px rgba(0,0,0,.14)}
html[data-look=glass] .periods>a:hover,html[data-look=glass] .tabs a:hover{color:var(--head);border-color:transparent}
html[data-look=glass] .tabs{border:0;gap:0;display:inline-flex;margin:-4px 0 16px}html[data-look=glass] .tabs a{padding:6px 16px;border:0;margin:0}
html[data-look=glass] .bar i{border-radius:5px 5px 0 0}

/* Аврора: матовое стекло поверх мягкого сияния */
html[data-look=aurora]{--brand:#6d5efc;--brand-dark:#5646e6;--brand-10:rgba(109,94,252,.10);--brand-20:rgba(109,94,252,.22);--bg:#eef0fb;--card:rgba(255,255,255,.68);--text:#2a2d4a;--head:#17193a;--muted:#676b8f;--line:rgba(120,124,180,.2);--g4:rgba(120,124,180,.38);--radius:16px;--shadow:0 10px 30px rgba(60,58,150,.10);--side:linear-gradient(180deg,#4338ca 0%,#7c3aed 55%,#c026d3 100%)}
html[data-theme=dark][data-look=aurora]{--brand:#9488ff;--brand-dark:#b0a7ff;--brand-10:rgba(148,136,255,.14);--brand-20:rgba(148,136,255,.3);--bg:#0b1020;--card:rgba(24,28,52,.62);--text:#dfe2ff;--head:#fff;--muted:#9da3d0;--line:rgba(255,255,255,.1);--g4:rgba(255,255,255,.2);--shadow:0 10px 30px rgba(0,0,0,.35);--side:linear-gradient(180deg,#1e1b4b 0%,#3b1d72 55%,#5b1670 100%)}
html[data-look=aurora] body{background-image:radial-gradient(at 14% 6%,#c7d2fe 0,transparent 46%),radial-gradient(at 90% 10%,#fbcfe8 0,transparent 42%),radial-gradient(at 72% 94%,#a7f3d0 0,transparent 44%),radial-gradient(at 6% 90%,#bae6fd 0,transparent 40%)}
html[data-theme=dark][data-look=aurora] body{background-image:radial-gradient(at 14% 6%,#312e81 0,transparent 46%),radial-gradient(at 90% 10%,#701a75 0,transparent 42%),radial-gradient(at 72% 94%,#065f46 0,transparent 44%),radial-gradient(at 6% 90%,#0c4a6e 0,transparent 40%)}
html[data-look=aurora] .card,html[data-look=aurora] .filters,html[data-look=aurora] .stat,html[data-look=aurora] table,html[data-look=aurora] .tree{-webkit-backdrop-filter:blur(18px) saturate(160%);backdrop-filter:blur(18px) saturate(160%);border-color:rgba(255,255,255,.75)}
html[data-theme=dark][data-look=aurora] .card,html[data-theme=dark][data-look=aurora] .filters,html[data-theme=dark][data-look=aurora] .stat,html[data-theme=dark][data-look=aurora] table,html[data-theme=dark][data-look=aurora] .tree{border-color:rgba(255,255,255,.1)}
html[data-look=aurora] input,html[data-look=aurora] select,html[data-look=aurora] textarea{background:rgba(255,255,255,.86);border-radius:10px}
html[data-theme=dark][data-look=aurora] input,html[data-theme=dark][data-look=aurora] select,html[data-theme=dark][data-look=aurora] textarea{background:rgba(10,12,30,.6)}
html[data-look=aurora] .btn{border-radius:10px}html[data-look=aurora] .btn:not(.secondary):not(.danger):not(.ok){background:linear-gradient(135deg,#6d5efc,#a855f7);border-color:transparent}
html[data-look=aurora] .btn:not(.secondary):not(.danger):not(.ok):hover{background:linear-gradient(135deg,#5646e6,#9333ea)}
html[data-look=aurora] .btn.secondary{background:rgba(255,255,255,.7)}html[data-theme=dark][data-look=aurora] .btn.secondary{background:rgba(255,255,255,.08);color:var(--text)}
html[data-look=aurora] .stat::after,html[data-look=aurora] .brand-tri{display:none}
html[data-look=aurora] th{background:var(--brand-10)}

/* Контраст: чёрное и белое, жёсткие рамки и тени, один жёлтый маркер */
html[data-look=contrast]{--brand:#111;--brand-dark:#000;--brand-10:rgba(0,0,0,.05);--brand-20:#ffe600;--bg:#fafafa;--card:#fff;--text:#111;--head:#000;--muted:#555;--line:#111;--g4:#111;--g5:#eee;--radius:0;--shadow:4px 4px 0 #111;--side:#111;--side-text:#fff;--mark:#ffe600}
html[data-theme=dark][data-look=contrast]{--brand:#fff;--brand-dark:#ffe600;--brand-10:rgba(255,255,255,.07);--brand-20:#ffe600;--bg:#0a0a0a;--card:#0a0a0a;--text:#f2f2f2;--head:#fff;--muted:#b0b0b0;--line:#f2f2f2;--g4:#f2f2f2;--g5:#222;--shadow:4px 4px 0 #f2f2f2;--side:#000;--side-text:#fff}
html[data-look=contrast] h1{font-weight:900;letter-spacing:-.03em;font-size:28px}html[data-look=contrast] h2{font-weight:900}
html[data-look=contrast] a{text-decoration:underline;text-underline-offset:2px}html[data-look=contrast] .sidebar a,html[data-look=contrast] a.btn,html[data-look=contrast] a.stat,html[data-look=contrast] .tabs a,html[data-look=contrast] .periods a{text-decoration:none}
html[data-look=contrast] .card,html[data-look=contrast] .filters,html[data-look=contrast] .stat,html[data-look=contrast] table,html[data-look=contrast] .tree{border-width:1.5px}
html[data-look=contrast] th{background:var(--line);color:var(--card);font-weight:700}
html[data-look=contrast] th,html[data-look=contrast] td{border-bottom-color:rgba(128,128,128,.35)}
html[data-look=contrast] tbody tr:hover td,html[data-look=contrast] tr:hover td{background:var(--mark);color:#111}html[data-look=contrast] tr:hover td a{color:#111}
html[data-look=contrast] input,html[data-look=contrast] select,html[data-look=contrast] textarea{border-radius:0;border-width:1.5px}
html[data-look=contrast] input:focus,html[data-look=contrast] select:focus,html[data-look=contrast] textarea:focus{box-shadow:3px 3px 0 var(--mark);border-color:var(--line)}
html[data-look=contrast] .btn{border-radius:0;font-weight:700;border-width:1.5px;box-shadow:3px 3px 0 var(--mark);color:var(--card)}
html[data-look=contrast] .btn:hover{background:var(--mark);border-color:var(--line);color:#111;box-shadow:3px 3px 0 var(--line)}
html[data-look=contrast] .btn.secondary{background:var(--card);color:var(--text);border-color:var(--line);box-shadow:none}html[data-look=contrast] .btn.secondary:hover{background:var(--mark);color:#111}
html[data-look=contrast] .btn.danger,html[data-look=contrast] .btn.ok{color:#fff}
html[data-look=contrast] .sidebar nav a{border-radius:0}html[data-look=contrast] .sidebar nav a.active{background:var(--mark);color:#111;font-weight:700}
html[data-look=contrast] .sidebar .side-user .btn.secondary,html[data-look=contrast] .sidebar .theme-btn{box-shadow:none;border-radius:0}
html[data-look=contrast] .stat::after{background:var(--mark)}html[data-look=contrast] .brand-tri{background:var(--mark)}
html[data-look=contrast] .badge,html[data-look=contrast] .alert,html[data-look=contrast] .pagination li a,html[data-look=contrast] .pagination li span{border-radius:0}
html[data-look=contrast] .periods>a{border-radius:0;border-width:1.5px}html[data-look=contrast] .periods>a.on,html[data-look=contrast] .tabs a.on{background:var(--mark);color:#111;border-color:var(--line)}
html[data-look=contrast] .bar i{background:var(--line);border-radius:0;opacity:1}html[data-look=contrast] .bar:hover i{background:var(--mark)}

/* Пастель: мягкие лиловые тона, крупные скругления */
html[data-look=pastel]{--brand:#7c5cff;--brand-dark:#6344e8;--brand-10:rgba(124,92,255,.09);--brand-20:rgba(124,92,255,.2);--bg:#faf7ff;--card:#fff;--text:#3b3355;--head:#2a2342;--muted:#7d7796;--line:#ece6fb;--g4:#d9d0f5;--g5:#f1ecff;--radius:18px;--shadow:0 6px 20px rgba(124,92,255,.08);--side:#f1ecff;--side-text:#3b3355}
html[data-theme=dark][data-look=pastel]{--brand:#a48bff;--brand-dark:#bba8ff;--brand-10:rgba(164,139,255,.14);--brand-20:rgba(164,139,255,.3);--bg:#1a1626;--card:#241f35;--text:#e6e0fa;--head:#fff;--muted:#a59fc0;--line:#352e4d;--g4:#4a4168;--g5:#2c2640;--shadow:0 6px 20px rgba(0,0,0,.3);--side:#1f1a30;--side-text:#e6e0fa}
html[data-look=pastel] body{background-image:radial-gradient(700px 420px at 100% 0,#ffe4ec 0,transparent 60%),radial-gradient(640px 420px at 30% 100%,#dcfce7 0,transparent 58%)}
html[data-theme=dark][data-look=pastel] body{background-image:radial-gradient(700px 420px at 100% 0,#3b1d4a 0,transparent 60%),radial-gradient(640px 420px at 30% 100%,#143329 0,transparent 58%)}
html[data-look=pastel] .sidebar nav a{border-radius:12px}
html[data-look=pastel] .sidebar nav a.active{background:#fff;color:var(--brand);box-shadow:0 2px 8px rgba(124,92,255,.16)}
html[data-theme=dark][data-look=pastel] .sidebar nav a.active{background:var(--brand);color:#1a1626;box-shadow:none}
html[data-look=pastel] input,html[data-look=pastel] select,html[data-look=pastel] textarea{border-radius:12px}html[data-look=pastel] .btn{border-radius:14px}
html[data-look=pastel] .btn.secondary{background:var(--g5);border-color:transparent;color:var(--text)}
html[data-look=pastel] th{background:var(--g5);text-transform:none;letter-spacing:0;font-size:12.5px;color:var(--muted)}
html[data-look=pastel] .stat::after,html[data-look=pastel] .brand-tri{display:none}
html[data-look=pastel] .alert{border-radius:14px}

/* Графит: плотный рабочий вид для больших таблиц */
html[data-look=graphite]{--brand:#0e9f8e;--brand-dark:#0b8576;--brand-10:rgba(14,159,142,.10);--brand-20:rgba(14,159,142,.22);--bg:#eef0f2;--card:#fff;--text:#252a31;--head:#14181d;--muted:#6b7480;--line:#dde1e6;--g4:#c5cbd3;--radius:6px;--shadow:none;--side:#1f2329;--side-text:#d5dae1}
html[data-theme=dark][data-look=graphite]{--brand:#2dd4bf;--brand-dark:#5eead4;--brand-10:rgba(45,212,191,.12);--brand-20:rgba(45,212,191,.26);--bg:#0f1115;--card:#171a1f;--text:#d5dae1;--head:#fff;--muted:#8a94a3;--line:#262b33;--g4:#39404b;--g5:#20242b;--side:#0b0d10;--side-text:#c5cbd3}
html[data-look=graphite] body{font-size:13px;line-height:1.45}
html[data-look=graphite] h1{font-size:20px;margin-bottom:14px}html[data-look=graphite] h2{font-size:14px;margin:20px 0 8px}
html[data-look=graphite] .content{padding:20px 24px 64px}
html[data-look=graphite] .card,html[data-look=graphite] .filters{padding:12px 14px;margin-bottom:12px}
html[data-look=graphite] table{font-size:12.5px}html[data-look=graphite] th,html[data-look=graphite] td{padding:6px 10px}
html[data-look=graphite] th{background:var(--bg);font-size:11px}
html[data-look=graphite] input,html[data-look=graphite] select,html[data-look=graphite] textarea{padding:6px 9px;border-radius:4px}
html[data-look=graphite] .btn{padding:7px 12px;border-radius:4px}html[data-look=graphite] .btn.sm{padding:4px 9px}
html[data-theme=dark][data-look=graphite] .btn:not(.secondary):not(.danger):not(.ok){color:#0f1115}
html[data-look=graphite] .sidebar nav a{padding:6px 10px;font-size:13px;border-radius:4px}
html[data-look=graphite] .sidebar nav a.active{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 3px 0 0 var(--brand)}
html[data-look=graphite] .stat{padding:10px 12px}html[data-look=graphite] .stat b{font-size:22px}
html[data-look=graphite] .stat::after,html[data-look=graphite] .brand-tri{display:none}
/* На чёрном и графитовом меню чёрная часть логотипа не видна: берём полностью белый */
html[data-look=contrast] .sidebar .brand img,html[data-look=graphite] .sidebar .brand img{content:url(../img/logo-white.png)}
/* «Стекло» с цветным меню: выделение и кнопки белым по цвету */
html[data-look=glass][data-menu=color] .sidebar nav a.active,html[data-look=glass][data-menu=color] .sidebar nav a.attn.active{background:rgba(255,255,255,.26);color:#fff}
html[data-look=glass][data-menu=color] .sidebar nav a:not(.active):hover,html[data-look=glass][data-menu=color] .sidebar nav a.attn:not(.active):hover{background:rgba(255,255,255,.14)}
html[data-look=glass][data-menu=color] .sidebar nav a.attn.active .nav-count{background:#fff;color:#1d1d1f}
html[data-look=glass][data-menu=color] .sidebar .side-user .btn.secondary,html[data-look=glass][data-menu=color] .sidebar .theme-btn{background:rgba(255,255,255,.18);color:#fff}
html[data-look=glass][data-menu=color] .sidebar .side-user .btn.secondary:hover,html[data-look=glass][data-menu=color] .sidebar .theme-btn:hover{background:rgba(255,255,255,.28);color:#fff}
/* Форма оформления в профиле: варианты меню и фона, цвета градиента */
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--g4);border-radius:999px;cursor:pointer;font-weight:400;margin:0;font-size:13px}
.chip input{position:absolute;opacity:0;pointer-events:none}.chip:has(input:checked){border-color:var(--brand);background:var(--brand-10);color:var(--brand);font-weight:500}.chip:has(input:focus-visible){box-shadow:0 0 0 3px var(--brand-20)}
.chip.art{flex-direction:column;align-items:stretch;gap:4px;padding:5px 5px 6px;border-radius:10px;font-size:12px;text-align:center}.chip.art i{display:block;width:84px;height:50px;border-radius:6px;background:#eef2fa center bottom/cover no-repeat}
.grad{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}.grad[hidden]{display:none}
.grad input[type=color]{width:38px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:none}
.grad-sw{width:44px;height:30px;border-radius:8px;border:2px solid var(--card);box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.look-card .t .badge{font-size:10.5px;padding:1px 7px;vertical-align:1px}
/* Тёмный режим тем: цветные цифры на плитках светлее, чтобы читались на тёмной карточке */
html[data-theme=dark][data-look] .stat.attn-ok b{color:#30d158}html[data-theme=dark][data-look] .stat.attn-warn b{color:#ffb340}html[data-theme=dark][data-look] .stat.attn-violet b{color:#bf5af2}html[data-theme=dark][data-look] .stat.attn b{color:#ff6961}