/* Плавные переходы и три вида оформления. Вид выбирается в «Настройках» и запоминается в браузере. */

/* Переход между страницами: старая тает, новая проявляется (Chrome, Edge, Safari 18+). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .18s ease-in both; }
::view-transition-new(root) { animation: vt-in .28s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }

/* Блоки страницы появляются по очереди. */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
main > *, #content-main > *, .actions > .action, .tiles > .box { animation: rise .4s cubic-bezier(.2, .7, .2, 1) both; }
main > :nth-child(2), .actions > :nth-child(2), .tiles > :nth-child(2) { animation-delay: .04s; }
main > :nth-child(3), .actions > :nth-child(3), .tiles > :nth-child(3) { animation-delay: .08s; }
main > :nth-child(4), .actions > :nth-child(4), .tiles > :nth-child(4) { animation-delay: .12s; }
main > :nth-child(5), .actions > :nth-child(5), .tiles > :nth-child(5) { animation-delay: .16s; }
main > :nth-child(n+6), .actions > :nth-child(n+6), .tiles > :nth-child(n+6) { animation-delay: .2s; }

/* Отклик на наведение и нажатие. */
.action, .box, .btn, .periods a, .gh-tabs a, tbody td, .gh-back, .gh-user button { transition: background-color .15s, border-color .15s, transform .15s, box-shadow .2s; }
.action:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .7); }
.action:active, .btn:active { transform: scale(.97); }
.action:hover .ic { transform: scale(1.08) rotate(-4deg); }
.action .ic { transition: transform .2s; }
.gh-tabs a.on { animation: tab-on .3s ease; }
@keyframes tab-on { from { border-bottom-color: transparent; } }
.tile .value { animation: rise .5s .1s both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; transition: none !important; }
}

/* ---------- Вид «Стекло»: мягкое цветное сияние за полупрозрачными карточками ---------- */
html[data-style="glass"] body {
  background:
    radial-gradient(900px 600px at 8% -10%, rgba(247, 129, 102, .20), transparent 60%),
    radial-gradient(800px 600px at 100% 10%, rgba(68, 147, 248, .18), transparent 60%),
    radial-gradient(900px 700px at 50% 120%, rgba(163, 113, 247, .16), transparent 60%),
    #0b0f17 fixed;
}
html[data-style="glass"] .gh-top { background: rgba(1, 4, 9, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: sticky; top: 0; z-index: 20; }
html[data-style="glass"] .box, html[data-style="glass"] .action, html[data-style="glass"] #content-main .module,
html[data-style="glass"] .inline-group, html[data-style="glass"] .submit-row {
  background: rgba(22, 28, 38, .55) !important; border-color: rgba(255, 255, 255, .09) !important;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px;
}
html[data-style="glass"] .box > h2 { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .07); border-radius: 14px 14px 0 0; }
html[data-style="glass"] .action:hover { border-color: rgba(247, 129, 102, .6) !important; box-shadow: 0 10px 30px -10px rgba(247, 129, 102, .35); }
html[data-style="glass"] .btn.primary { background: linear-gradient(135deg, #2ea043, #1f883d); }
html[data-style="glass"] .periods a.on { background: linear-gradient(135deg, #4493f8, #a371f7); }

/* ---------- Вид «Бенто»: крупные плитки, больше воздуха, тёплый акцент цвета логотипа ---------- */
html[data-style="bento"] { --gh-bg: #0e0f13; --gh-card: #17191f; --gh-subtle: #1f2229; --gh-line: #2a2e37; --gh-line-soft: #22252c; --gh-link: #ff9b7a; }
html[data-style="bento"] body { background: var(--gh-bg); }
html[data-style="bento"] main { gap: 20px; }
html[data-style="bento"] .box, html[data-style="bento"] .action { border-radius: 18px; border-color: transparent; box-shadow: inset 0 0 0 1px var(--gh-line); }
html[data-style="bento"] .box > h2 { background: transparent; border-bottom-color: var(--gh-line-soft); border-radius: 18px 18px 0 0; font-size: 15px; padding: 16px 20px; }
html[data-style="bento"] .action { padding: 18px 20px; }
html[data-style="bento"] .action .ic { border-radius: 12px; background: linear-gradient(135deg, rgba(247, 129, 102, .22), rgba(247, 129, 102, .06)); border-color: rgba(247, 129, 102, .3); }
html[data-style="bento"] .action:hover { box-shadow: inset 0 0 0 1px #f78166, 0 12px 30px -14px rgba(247, 129, 102, .5); }
html[data-style="bento"] .tile .value { font-size: 30px; letter-spacing: -.02em; }
html[data-style="bento"] .head h1 { font-size: 26px; letter-spacing: -.02em; background: linear-gradient(90deg, #fff, #ffb59e); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-style="bento"] .btn { border-radius: 999px; padding: 6px 16px; }
html[data-style="bento"] .btn.primary { background: #f78166; color: #1a0f0b; border-color: transparent; }
html[data-style="bento"] .btn.primary:hover { background: #ff9b7a; }
html[data-style="bento"] .periods { border-radius: 999px; }
html[data-style="bento"] .periods a.on { background: #f78166; color: #1a0f0b; }
html[data-style="bento"] .gh-tabs a.on { border-bottom-color: #f78166; }
html[data-style="bento"] #content-main .module, html[data-style="bento"] .inline-group, html[data-style="bento"] .submit-row { border-radius: 18px; }

/* ---------- Вид «Неоклассика»: глубокий синий, золото, заголовки с засечками ---------- */
html[data-style="neo"] { --gh-bg: #0c1120; --gh-top: #080c18; --gh-card: #121a2e; --gh-subtle: #18213a; --gh-line: #2b3654; --gh-line-soft: #1e2742; --gh-fg: #efe9dc; --gh-muted: #9a9fb0; --gh-link: #d8b56a; --gh-active: #c9a45c; }
html[data-style="neo"] body { background: radial-gradient(1200px 500px at 50% -200px, #1a2443, transparent 70%), var(--gh-bg); }
html[data-style="neo"] .head h1, html[data-style="neo"] .section-title, html[data-style="neo"] .box > h2, html[data-style="neo"] #content h1, html[data-style="neo"] .gh-brand {
  font-family: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif; letter-spacing: .01em; }
html[data-style="neo"] .head h1 { font-size: 28px; font-weight: 600; }
html[data-style="neo"] .section-title { font-size: 19px; font-weight: 600; color: #e6d3a3; }
html[data-style="neo"] .section-title::after { content: ""; display: block; width: 48px; height: 1px; margin-top: 6px; background: linear-gradient(90deg, #c9a45c, transparent); }
html[data-style="neo"] .gh-logo { background: linear-gradient(135deg, #e6c983, #a9853f); color: #0c1120; }
html[data-style="neo"] .box, html[data-style="neo"] .action, html[data-style="neo"] #content-main .module, html[data-style="neo"] .inline-group, html[data-style="neo"] .submit-row {
  background: #121a2e !important; border-color: #2b3654 !important; border-radius: 4px; box-shadow: 0 1px 0 rgba(201, 164, 92, .08) inset; }
html[data-style="neo"] .box > h2, html[data-style="neo"] .module h2, html[data-style="neo"] .inline-group h2 { background: transparent !important; border-bottom: 1px solid rgba(201, 164, 92, .35); color: #e6d3a3 !important; font-size: 16px; }
html[data-style="neo"] .action .ic { background: transparent; border-color: rgba(201, 164, 92, .5); color: #e6c983; border-radius: 50%; }
html[data-style="neo"] .action:hover { border-color: #c9a45c !important; box-shadow: 0 10px 28px -16px rgba(201, 164, 92, .55); }
html[data-style="neo"] .btn.primary, html[data-style="neo"] .periods a.on, html[data-style="neo"] .submit-row input[type=submit] { background: linear-gradient(135deg, #e6c983, #b08b43) !important; color: #0c1120 !important; border-color: transparent; }
html[data-style="neo"] .gh-tabs a.on { border-bottom-color: #c9a45c; }
html[data-style="neo"] .gh-tabs a.cta span { color: #e6c983; }
html[data-style="neo"] .gh-tabs a.cta svg { stroke: #e6c983; }
html[data-style="neo"] .tile .value { font-family: Georgia, serif; font-weight: 500; }

/* ---------- Вид «Аврора»: полупрозрачная рабочая зона, за ней медленно плывёт цветной фон ---------- */
html[data-style="aurora"] body { background: #070a12; }
html[data-style="aurora"] body::before, html[data-style="aurora"] body::after {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .55; }
html[data-style="aurora"] body::before {
  background:
    radial-gradient(35% 40% at 20% 30%, #f78166, transparent 70%),
    radial-gradient(30% 35% at 75% 20%, #4493f8, transparent 70%),
    radial-gradient(35% 40% at 60% 80%, #a371f7, transparent 70%);
  animation: aurora-a 28s ease-in-out infinite alternate; }
html[data-style="aurora"] body::after {
  background:
    radial-gradient(25% 30% at 80% 70%, #3fb950, transparent 70%),
    radial-gradient(25% 30% at 30% 85%, #d29922, transparent 70%);
  opacity: .35; animation: aurora-b 36s ease-in-out infinite alternate; }
@keyframes aurora-a { 0% { transform: translate(0, 0) rotate(0) scale(1); } 50% { transform: translate(6%, -4%) rotate(20deg) scale(1.1); } 100% { transform: translate(-5%, 5%) rotate(-15deg) scale(1.05); } }
@keyframes aurora-b { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-8%, -6%) scale(1.2); } }
html[data-style="aurora"] .gh-top { background: rgba(5, 8, 15, .45); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); position: sticky; top: 0; z-index: 20; border-bottom-color: rgba(255, 255, 255, .08); }
html[data-style="aurora"] #container, html[data-style="aurora"] .main, html[data-style="aurora"] #content, html[data-style="aurora"] #nav-sidebar { background: transparent !important; }
html[data-style="aurora"] .box, html[data-style="aurora"] .action, html[data-style="aurora"] #content-main .module, html[data-style="aurora"] .inline-group,
html[data-style="aurora"] .submit-row, html[data-style="aurora"] #nav-sidebar .module, html[data-style="aurora"] #changelist-filter {
  background: rgba(13, 17, 26, .42) !important; border-color: rgba(255, 255, 255, .10) !important;
  backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-radius: 16px; }
html[data-style="aurora"] .box > h2, html[data-style="aurora"] .module h2, html[data-style="aurora"] .inline-group h2 { background: rgba(255, 255, 255, .04) !important; border-color: rgba(255, 255, 255, .08); }
html[data-style="aurora"] tbody tr:hover td { background: rgba(255, 255, 255, .05); }
html[data-style="aurora"] .action:hover { border-color: rgba(255, 255, 255, .35) !important; box-shadow: 0 12px 34px -14px rgba(68, 147, 248, .5); }
html[data-style="aurora"] .periods a { background: rgba(255, 255, 255, .04); }
html[data-style="aurora"] .periods a.on, html[data-style="aurora"] .btn.primary { background: linear-gradient(135deg, #f78166, #a371f7); border-color: transparent; color: #fff; }

/* Выбор вида в «Настройках». */
.styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.styles button { text-align: left; font: inherit; color: var(--gh-fg); cursor: pointer; padding: 0; border-radius: 12px; border: 2px solid var(--gh-line); background: var(--gh-card); overflow: hidden; transition: border-color .15s, transform .15s; }
.styles button:hover { transform: translateY(-2px); }
.styles button.on { border-color: #f78166; }
.styles .sw { height: 70px; }
.styles b, .styles small { display: block; padding: 0 12px; }
.styles b { padding-top: 10px; }
.styles small { color: var(--gh-muted); font-size: 12px; padding-bottom: 12px; }
.styles .sw-aurora { background: radial-gradient(circle at 25% 35%, #f78166aa, transparent 50%), radial-gradient(circle at 75% 30%, #4493f8aa, transparent 50%), radial-gradient(circle at 55% 90%, #a371f7aa, transparent 55%), #070a12; background-size: 160% 160%; animation: sw-move 6s ease-in-out infinite alternate; }
@keyframes sw-move { to { background-position: 100% 100%; } }