/* PRORIV 1.15.48 — ANIMATION_81 по контракту UI.md.
   Три независимых слоя: задний свет, активные поверхности и тихие эффекты. */
:root{
  --night:#07090F;
  --ground:#121722;
  --line:#293243;
  --ivory:#F4F0E8;
  --dim:#9AA5B6;
  --jade:#66D6AE;
  --ember:#FF8A3D;
  --violet:#75A7FF;
  --pink:#FFB15C;
  --sun:#FFD36A;
  --aqua:#8CC8FF;
  --flow-gold:#FFD05F;
  --flow-blue:#79B8FF;
  --surface:#121722;
  --surface-raised:#171D29;
  --surface-soft:#0D111A;
  --line-bright:#3A4558;
  --shadow-deep:0 18px 44px rgba(0,0,0,.28);
  --shadow-warm:0 12px 30px rgba(255,138,61,.13);
}

html,body{background:#07090F;color:var(--ivory)}
body{
  position:relative;
  background:
    radial-gradient(ellipse at 12% 10%,rgba(255,138,61,.12),transparent 34%),
    radial-gradient(ellipse at 94% 72%,rgba(117,167,255,.09),transparent 35%),
    linear-gradient(160deg,#07090F 0%,#0A0D14 52%,#07090F 100%);
}
body::before,body::after{
  content:"";
  position:fixed;
  z-index:-1;
  pointer-events:none;
  box-sizing:border-box;
}
body::before{
  width:760px;height:410px;left:calc(50% - 585px);top:-245px;
  border:2px solid rgba(255,173,77,.28);border-radius:50%;
  box-shadow:
    0 0 0 7px rgba(255,211,106,.05),
    0 0 0 17px rgba(255,138,61,.08),
    0 0 0 31px rgba(255,211,106,.035),
    0 0 34px rgba(255,138,61,.18);
  transform:rotate(-16deg);
}
body::after{
  width:620px;height:260px;right:calc(50% - 590px);bottom:13%;
  border-top:2px dashed rgba(117,167,255,.52);border-radius:50%;
  filter:drop-shadow(0 0 6px rgba(117,167,255,.32));
  transform:rotate(-34deg);
}
#app{position:relative;background:transparent;color:var(--ivory)}
#app::before{
  content:"";position:fixed;z-index:-1;pointer-events:none;
  width:1px;height:72vh;left:calc(50% + 228px);top:12vh;
  background:linear-gradient(to bottom,transparent,rgba(255,211,106,.22),transparent);
  transform:rotate(17deg);transform-origin:center;
  box-shadow:-11px 0 rgba(255,211,106,.045),-23px 0 rgba(255,211,106,.035);
}

/* Шапка и подпись: тихая приборная линия. */
.top{color:var(--dim);background:transparent}
.brand-mark{
  color:var(--ivory);font-weight:600;text-shadow:0 0 22px rgba(255,138,61,.2);
}
.sig{opacity:.9}
.sig path{stroke:var(--sun);stroke-width:1.25;filter:drop-shadow(0 0 3px rgba(255,138,61,.38))}

h2.sec,.hq{color:var(--ivory);text-shadow:0 7px 28px rgba(0,0,0,.34)}
label{color:var(--dim)}
.hint,.empty,.said{color:var(--dim)}

/* Главный вопрос — крупная тёмная поверхность с одной тёплой дугой. */
#s-now .q{
  color:var(--ivory);
  background:
    radial-gradient(circle at 104% -8%,rgba(255,177,92,.24),transparent 36%),
    linear-gradient(145deg,#171B25 0%,#0F131D 100%);
  border:1px solid var(--line-bright);border-radius:28px;
  box-shadow:var(--shadow-deep),inset 0 1px rgba(255,255,255,.035);
}
#s-now .q::before{color:var(--sun)}
#s-now .q::after{
  width:145px;height:145px;right:-70px;top:-83px;
  border:1px solid rgba(255,211,106,.42);box-shadow:0 0 0 9px rgba(255,138,61,.04);
}
.swipe-row{gap:8px}
.sw{
  min-height:48px;color:var(--dim);background:rgba(18,23,34,.92);
  border:1px solid var(--line);box-shadow:none;
}
.sw:nth-child(1),.sw:nth-child(2),.sw:nth-child(3){color:var(--dim);background:rgba(18,23,34,.92)}
.sw:nth-child(2){color:var(--ivory);border-color:rgba(255,138,61,.58)}
.sw:active{color:var(--night);background:var(--sun);filter:none}

/* Поля и вторичные действия. */
input,textarea,select,
.rotation-editor input,.rotation-editor select,
.task-editor input,.task-editor select,.task-editor textarea{
  color:var(--ivory);background:#0E131C;border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
input::placeholder,textarea::placeholder{color:#727E90;opacity:1}
input:focus,textarea:focus,select:focus,
.rotation-editor input:focus,.rotation-editor select:focus{
  outline:2px solid rgba(117,167,255,.2);outline-offset:1px;border-color:var(--violet);
}
select{color-scheme:dark}
.linkbtn{min-height:44px;color:#B5BECC;font-weight:500}
.linkbtn:active{color:var(--sun)}
.commit,.save{
  color:#0C0D10;background:linear-gradient(105deg,var(--sun),var(--ember));
  border:0;box-shadow:var(--shadow-warm);font-weight:600;
}
.commit:active,.save:active{color:#07090F;background:var(--sun)}

/* План: единый материал вместо случайных пастельных заливок. */
.task-swipe{background:var(--surface)}
.skill-swipe{background:var(--surface-raised)}
.task-swipe,.skill-swipe{box-shadow:0 0 0 1px var(--line)}
.task-swipe.open,.task-swipe.dragging,.skill-swipe.open,.skill-swipe.dragging{background:linear-gradient(to left,#B9363E 0 96px,transparent 96px)}
.task,.entry,.task-card{
  color:var(--ivory);background:var(--surface);border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(0,0,0,.18),inset 0 1px rgba(255,255,255,.025);
}
.task-swipe:nth-child(3n+1) .task-card,
.task-swipe:nth-child(3n+2) .task-card,
.task-swipe:nth-child(3n) .task-card{background:var(--surface)}
.task:nth-child(3n+1),.task:nth-child(3n+2),.task:nth-child(3n),
.entry:nth-child(3n+1),.entry:nth-child(3n+2),.entry:nth-child(3n){background:var(--surface)}
.task .tx,.entry .what{color:var(--ivory)}
.task .skill-tag{color:var(--violet)}
.task .task-repeat,.task .task-note,.entry .when{color:var(--dim)}
.task .acts .linkbtn{
  color:#B8C2D0;background:#0D121A;border:1px solid #252E3D;
}
.task .acts .linkbtn:active{color:var(--sun);background:#161C27;border-color:#56452C}
.entry.unseen::before{background:var(--jade);box-shadow:0 0 9px rgba(102,214,174,.45)}
#addbox,.skill-form,.task-editor,.rotation-editor{
  color:var(--ivory);background:rgba(13,17,26,.94);border:1px solid var(--line);
  box-shadow:0 16px 38px rgba(0,0,0,.22);border-radius:18px;
}
#addbox{padding:14px}
.rotation-prefix{color:var(--dim)}
.rotation-row.current .rotation-prefix{color:var(--sun)}
.rotation-remove{color:var(--dim);background:#0B1018;border:1px solid #252E3D}
.rotation-add{color:var(--aqua)}
.rotation-save{
  color:#080A0E;background:var(--sun);box-shadow:0 0 0 1px rgba(255,211,106,.28),0 8px 24px rgba(255,138,61,.22);
}
.rotation-error{color:#FF9488}
.repeat-menu{background:#0C1119;border-color:var(--line);box-shadow:0 22px 55px rgba(0,0,0,.48)}
.repeat-menu button{color:var(--dim)}
.repeat-menu button.hot,.repeat-menu button:focus-visible{color:#07101D;background:var(--violet)}
.weekday-picker button{color:var(--dim);border-color:var(--line)}
.weekday-picker button[aria-pressed="true"]{color:#07101D;background:var(--violet);border-color:var(--violet)}
.closed-tasks{border-color:var(--line)}
.closed-tasks summary{color:var(--dim)}

/* Сферы: высокая читаемость и тонкая золотая траектория по краю. */
.skill-card{
  color:var(--ivory);background:var(--surface-raised);border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.03);
}
.skill-card::after{
  content:"";position:absolute;pointer-events:none;right:18px;top:17px;width:46px;height:14px;
  border-top:1px solid rgba(255,211,106,.52);border-radius:50%;transform:rotate(-10deg);
}
.skill-card h3{color:var(--ivory)}
.skill-card .direction{color:#C6CCD5}
.skill-card .skill-meta{color:var(--dim)}

/* Ускорение остаётся тем же миром, но тёплая линия становится ярче. */
.light{
  color:var(--ivory);
  background:
    radial-gradient(ellipse at 15% 5%,rgba(255,138,61,.18),transparent 37%),
    radial-gradient(ellipse at 95% 75%,rgba(117,167,255,.08),transparent 34%),
    #07090F;
}
.light #app{background:transparent}
.light .top,.light .top button{color:var(--dim);background:transparent}
.light .top button.on{color:var(--ivory)}
.light .sig path{stroke:var(--ember)}
.st{
  color:var(--ivory);background:var(--surface);border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(0,0,0,.2);
}
.st:nth-child(3n+1),.st:nth-child(3n+2),.st:nth-child(3n){color:var(--ivory);background:var(--surface)}
.st::after{color:var(--ember)}
.st:active{color:var(--night);background:var(--sun)}
.card{
  color:var(--ivory);background:
    radial-gradient(circle at 100% 0,rgba(255,138,61,.17),transparent 35%),
    var(--surface-raised);
  border:1px solid #3A3D42;box-shadow:0 24px 58px rgba(0,0,0,.34);
}
.card::before{color:var(--sun)}
.card .corr{color:#CCD2DC}
.card .act{color:var(--ivory);border-color:var(--ember)}
.opt{
  color:var(--ivory);background:var(--surface);border:1px solid var(--line);
  box-shadow:none;
}
.opt.primary{color:#090B10;background:linear-gradient(105deg,var(--sun),var(--ember));box-shadow:var(--shadow-warm)}
.loading{color:var(--sun)}

/* Нижняя навигация: синяя направляющая и янтарный запуск. */
.nav-dock{
  border:1px solid #30394A;background:rgba(10,14,22,.93);
  box-shadow:0 18px 48px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.light .nav-dock{background:rgba(10,14,22,.93)}
.nav-item{color:#8D99AA}
.nav-item.on{color:var(--aqua);background:rgba(117,167,255,.12)}
.nav-item.on .nav-glyph{text-shadow:0 0 12px rgba(117,167,255,.56)}
.nav-boost{
  color:#090B0F;background:linear-gradient(135deg,var(--sun),var(--ember));
  border-radius:50%;box-shadow:0 10px 28px rgba(255,138,61,.25),inset 0 1px rgba(255,255,255,.35);
  animation:none;
}
.nav-boost::before{display:none}
.nav-boost.on{outline-color:rgba(255,211,106,.22)}

/* Настройки и диагностика. */
.diag{color:var(--dim);background:var(--surface-soft);border-color:var(--line)}
.diag b{color:var(--ivory)}
.diag .good{color:var(--jade)}
.ver{color:#7E899A}
code{color:var(--aqua)}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--aqua);outline-offset:3px;
}

/* Живая световая основа. Большие слои двигаются только transform/opacity. */
body{
  background:
    radial-gradient(ellipse at 10% 5%,rgba(255,75,24,.24),transparent 36%),
    radial-gradient(ellipse at 96% 38%,rgba(255,166,48,.15),transparent 34%),
    radial-gradient(ellipse at 78% 92%,rgba(36,104,255,.14),transparent 38%),
    linear-gradient(155deg,#05060B 0%,#100A0B 43%,#070A12 74%,#030409 100%);
}
body::before{
  width:min(900px,190vw);height:560px;left:50%;top:-285px;
  border:0;border-radius:48%;
  background:
    conic-gradient(from 205deg at 50% 58%,transparent 0 17%,rgba(255,52,20,.2) 23%,rgba(255,147,34,.76) 29%,rgba(255,224,112,.95) 31%,rgba(255,96,22,.4) 35%,transparent 43% 100%),
    radial-gradient(ellipse at 48% 54%,rgba(255,91,20,.62),rgba(255,35,12,.18) 31%,transparent 64%);
  box-shadow:none;filter:blur(18px) saturate(1.35);opacity:.82;
  transform:translate3d(-57%,0,0) rotate(-13deg) scale(.82);
  transform-origin:50% 58%;will-change:transform,opacity;
  animation:fireDrift 14s ease-in-out infinite alternate;
}
body::after{
  width:700px;height:330px;right:calc(50% - 640px);bottom:8%;
  border:0;border-top:3px solid rgba(83,170,255,.72);border-radius:50%;
  box-shadow:0 -5px 18px rgba(38,119,255,.3),0 -18px 52px rgba(31,86,255,.14);
  filter:drop-shadow(0 0 8px rgba(117,190,255,.5));opacity:.8;
  transform:translate3d(0,0,0) rotate(-31deg);transform-origin:center;
  will-change:transform,opacity;animation:routeFloat 11s ease-in-out infinite alternate;
}
#app::before{
  width:3px;height:82vh;left:calc(50% + 190px);top:8vh;
  background:linear-gradient(to bottom,transparent,rgba(255,92,22,.35) 24%,rgba(255,223,112,.9) 48%,rgba(255,118,28,.22) 74%,transparent);
  box-shadow:-10px 0 rgba(255,183,56,.15),-24px 0 rgba(255,92,22,.09),0 0 22px rgba(255,132,28,.38);
  transform:translate3d(0,0,0) rotate(18deg);will-change:transform,opacity;
  animation:goldStream 9s ease-in-out infinite alternate;
}
#app::after{
  content:"";position:fixed;z-index:-1;pointer-events:none;
  width:460px;height:460px;left:calc(50% - 380px);bottom:-250px;border-radius:50%;
  background:
    radial-gradient(circle at 58% 38%,rgba(255,218,94,.72),rgba(255,110,24,.34) 24%,rgba(222,28,12,.13) 48%,transparent 68%),
    conic-gradient(from 20deg,transparent,rgba(255,70,15,.28),transparent 38%);
  filter:blur(20px) saturate(1.4);opacity:.72;
  transform:translate3d(0,0,0) scale(.88);will-change:transform,opacity;
  animation:fireBloom 12s ease-in-out infinite alternate;
}

/* Объём: цветной материал, верхний кант, глубокая тень и внутренний свет. */
.task-card,.entry,.skill-card,.st,.card,#addbox,.skill-form,.task-editor,.rotation-editor,.diag{
  position:relative;overflow:hidden;isolation:isolate;
  border-color:#3B4252;border-top-color:rgba(255,225,173,.34);
  box-shadow:
    0 24px 46px -24px rgba(0,0,0,.95),
    0 13px 28px -18px rgba(255,90,24,.55),
    inset 0 1px 0 rgba(255,245,224,.12),
    inset 0 -18px 34px rgba(0,0,0,.2),
    inset 16px 0 34px rgba(255,92,22,.035);
}
.task,.entry,.task-card,
.task-swipe:nth-child(3n+1) .task-card,.task-swipe:nth-child(3n+2) .task-card,.task-swipe:nth-child(3n) .task-card,
.task:nth-child(3n+1),.task:nth-child(3n+2),.task:nth-child(3n),
.entry:nth-child(3n+1),.entry:nth-child(3n+2),.entry:nth-child(3n){
  background:
    radial-gradient(circle at 110% -10%,rgba(255,143,43,.24),transparent 38%),
    radial-gradient(circle at -8% 112%,rgba(60,104,255,.12),transparent 42%),
    linear-gradient(145deg,#1D202B 0%,#10141D 56%,#0C1018 100%);
}
.skill-card{
  background:
    radial-gradient(circle at 106% 0,rgba(255,74,22,.28),transparent 36%),
    radial-gradient(circle at 0 115%,rgba(41,113,255,.15),transparent 44%),
    linear-gradient(145deg,#22232C,#121722 58%,#0B1018);
}
#addbox,.skill-form,.task-editor,.rotation-editor,.diag{
  background:
    radial-gradient(circle at 96% 0,rgba(255,135,37,.16),transparent 36%),
    linear-gradient(145deg,rgba(29,31,41,.97),rgba(10,14,22,.97));
}
.st,.st:nth-child(3n+1),.st:nth-child(3n+2),.st:nth-child(3n){
  background:
    radial-gradient(circle at 100% 0,rgba(255,116,28,.2),transparent 38%),
    linear-gradient(145deg,#20212A,#111620 64%,#0C1018);
}
.card{
  background:
    radial-gradient(circle at 92% 0,rgba(255,192,67,.32),transparent 34%),
    radial-gradient(circle at 0 100%,rgba(47,111,255,.14),transparent 42%),
    linear-gradient(145deg,#25242A,#141821 58%,#0B0F16);
}
.task-card::after,.entry::after,.skill-card::after,.st::before{
  content:"";position:absolute;pointer-events:none;z-index:0;
  width:34%;height:230%;left:-65%;top:-65%;border:0;border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(255,230,177,.16),rgba(255,121,35,.18),transparent);
  filter:blur(3px);opacity:0;
  transform:translate3d(-150%,0,0) rotate(18deg);will-change:transform,opacity;
  animation:surfaceFlare 9s ease-in-out infinite;
}
.task-swipe:nth-child(2n) .task-card::after,.skill-swipe:nth-child(2n) .skill-card::after{animation-delay:-4.5s}
.task-card>*:not(.task-delete-bg),.entry>*,.skill-card>*,.st>*{position:relative;z-index:1}

/* Малые плашки тоже имеют материал, а не лежат плоско на карточке. */
.sw,.task .acts .linkbtn,.opt{
  border-color:#394255;
  box-shadow:0 9px 18px -13px #000,inset 0 1px rgba(255,255,255,.09),inset 0 -7px 13px rgba(0,0,0,.2);
}
#s-now .sw,.task .acts .linkbtn,.opt:not(.primary){
  background:linear-gradient(160deg,rgba(31,35,47,.96),rgba(9,13,21,.98));
}
.sw:active,.task .acts .linkbtn:active,.opt:active{transform:translateY(1px);box-shadow:inset 0 2px 8px rgba(0,0,0,.35)}

/* Главный фокус горит заметнее, но текст остаётся на плотной поверхности. */
#s-now .q{
  background:
    radial-gradient(circle at 96% -8%,rgba(255,220,105,.46),transparent 31%),
    radial-gradient(circle at -8% 108%,rgba(255,63,18,.28),transparent 42%),
    linear-gradient(145deg,#282329 0%,#151721 48%,#0B1018 100%);
  border-color:rgba(255,177,80,.48);
  box-shadow:0 28px 66px -30px #000,0 16px 42px -24px rgba(255,75,20,.9),inset 0 1px rgba(255,245,218,.2),inset -18px -22px 48px rgba(0,0,0,.2);
}
#s-now .q::after{
  border-color:rgba(255,223,112,.75);box-shadow:0 0 0 9px rgba(255,89,20,.08),0 0 42px rgba(255,118,26,.42);
  transform:translate3d(0,0,0) scale(1);will-change:transform,opacity;
  animation:ringHeat 5.5s ease-in-out infinite alternate;
}
.sig path{stroke-dasharray:36 11;will-change:stroke-dashoffset,opacity;animation:routeDraw 7s linear infinite}

/* Небольшие источники света: действия и навигация. */
.commit,.save,.rotation-save,.opt.primary{
  background:linear-gradient(105deg,#FFD96E 0%,#FF982F 42%,#FF5624 72%,#FFD36A 100%);
  background-size:220% 100%;
  box-shadow:0 14px 34px -16px rgba(255,76,20,.9),0 0 22px rgba(255,142,38,.18),inset 0 1px rgba(255,255,255,.5);
  animation:emberShift 4.8s ease-in-out infinite;
}
.nav-dock{overflow:visible;border-color:#3C465A;background:linear-gradient(180deg,rgba(25,27,36,.95),rgba(7,10,17,.96));box-shadow:0 22px 56px rgba(0,0,0,.62),0 0 32px rgba(25,89,255,.08),inset 0 1px rgba(255,255,255,.09)}
.nav-dock::after{
  content:"";position:absolute;pointer-events:none;left:16%;right:16%;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--aqua),var(--sun),transparent);
  opacity:.7;transform:translate3d(-18%,0,0) scaleX(.62);will-change:transform,opacity;
  animation:navTrace 6s ease-in-out infinite alternate;
}
.nav-item.on{position:relative;isolation:isolate;background:linear-gradient(180deg,rgba(81,155,255,.18),rgba(64,96,255,.07));box-shadow:inset 0 1px rgba(180,218,255,.16),0 8px 20px rgba(26,88,255,.08)}
.nav-item.on::after{
  content:"";position:absolute;pointer-events:none;z-index:-1;left:50%;top:5px;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle,rgba(97,181,255,.42),rgba(49,103,255,.12) 48%,transparent 72%);
  transform:translate3d(-50%,0,0) scale(.82);will-change:transform,opacity;
  animation:bluePulse 3.2s ease-in-out infinite;
}
.nav-boost{
  background:radial-gradient(circle at 34% 26%,#FFF1A6 0 8%,#FFD45E 20%,#FF8B29 54%,#F13D1C 82%,#9B170F 100%);
  box-shadow:0 14px 36px rgba(255,62,19,.44),0 0 28px rgba(255,142,33,.42),inset 0 2px rgba(255,255,255,.55),inset 0 -8px 16px rgba(123,12,6,.28);
  position:relative;isolation:isolate;animation:none;
}
.nav-boost::before{
  content:"";display:block;position:absolute;pointer-events:none;z-index:-1;inset:-5px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,211,88,.58),rgba(255,67,20,.24) 52%,transparent 72%);
  transform:translate3d(0,0,0) scale(.95);will-change:transform,opacity;
  animation:flamePulse 3.4s ease-in-out infinite;
}

@keyframes fireDrift{
  0%{transform:translate3d(-61%,-3%,0) rotate(-17deg) scale(.77);opacity:.65}
  52%{opacity:.92}
  100%{transform:translate3d(-50%,8%,0) rotate(-5deg) scale(.96);opacity:.78}
}
@keyframes fireBloom{
  0%{transform:translate3d(-8%,8%,0) scale(.78);opacity:.48}
  100%{transform:translate3d(12%,-6%,0) scale(1.08);opacity:.82}
}
@keyframes routeFloat{
  0%{transform:translate3d(7%,-5%,0) rotate(-35deg) scale(.94);opacity:.52}
  100%{transform:translate3d(-8%,7%,0) rotate(-27deg) scale(1.04);opacity:.9}
}
@keyframes goldStream{
  0%{transform:translate3d(-18px,-5%,0) rotate(15deg);opacity:.4}
  100%{transform:translate3d(16px,6%,0) rotate(22deg);opacity:.9}
}
@keyframes surfaceFlare{
  0%,64%{transform:translate3d(-170%,0,0) rotate(18deg);opacity:0}
  72%{opacity:.12}
  88%{opacity:.22}
  100%{transform:translate3d(650%,0,0) rotate(18deg);opacity:0}
}
@keyframes ringHeat{
  0%{transform:translate3d(6px,-3px,0) scale(.9);opacity:.55}
  100%{transform:translate3d(-4px,5px,0) scale(1.1);opacity:1}
}
@keyframes routeDraw{to{stroke-dashoffset:-94}}
@keyframes emberShift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes navTrace{0%{transform:translate3d(-24%,0,0) scaleX(.5);opacity:.4}100%{transform:translate3d(24%,0,0) scaleX(.84);opacity:.92}}
@keyframes bluePulse{0%,100%{transform:translate3d(-50%,0,0) scale(.78);opacity:.42}50%{transform:translate3d(-50%,0,0) scale(1.08);opacity:.96}}
@keyframes flamePulse{0%,100%{transform:translate3d(0,0,0) scale(.98)}50%{transform:translate3d(0,-2px,0) scale(1.045)}}

@media (max-width:380px){
  body::before{left:50%;top:-300px}
  body::after{right:calc(50% - 610px)}
  #addbox{padding:12px}
}
@media (prefers-reduced-motion:reduce){
  body::before,body::after,#app::before,#app::after,
  .task-card::after,.entry::after,.skill-card::after,.st::before,#s-now .q::after,
  .sig path,.commit,.save,.rotation-save,.opt.primary,.nav-dock::after,.nav-item.on::after,.nav-boost::before{
    animation:none!important;transition:none!important
  }
}

/* Основа выбранного пользователем варианта A «Живой поток».
   Задний свет, активные поверхности и эффекты остаются независимыми слоями. */
body::before,body::after{z-index:0}
#app{z-index:1}
body{
  background:
    radial-gradient(ellipse at 7% 12%,rgba(188,43,17,.3),transparent 38%),
    radial-gradient(ellipse at 95% 36%,rgba(255,146,35,.16),transparent 34%),
    radial-gradient(ellipse at 86% 92%,rgba(34,96,220,.2),transparent 42%),
    linear-gradient(145deg,#05060B 0%,#10090B 38%,#080B14 70%,#03050A 100%);
}

/* Задний фон: широкое тёплое течение с ярким ядром. */
body::before{
  width:min(980px,220vw);height:360px;left:50%;top:9%;
  border:0;border-radius:50%;
  background:
    repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,231,137,.66) 28px 31px,transparent 33px 53px),
    linear-gradient(180deg,transparent 0 5%,rgba(117,30,14,.16) 14%,rgba(255,73,20,.46) 38%,rgba(255,173,51,.88) 47%,rgba(255,246,194,.98) 50%,var(--flow-gold) 52%,rgba(255,100,24,.62) 58%,rgba(92,20,12,.2) 74%,transparent 94%);
  box-shadow:0 0 44px rgba(255,78,20,.38),0 0 96px rgba(255,150,34,.18);
  filter:none;opacity:.9;
  transform:translate3d(-64%,-10%,0) rotate(-23deg) scale(1);
  transform-origin:center;will-change:transform,opacity;
  animation:liveFlow 12s ease-in-out infinite alternate;
}

/* Самостоятельная холодная трасса — не хвост тёплого потока. */
body::after{
  width:min(920px,205vw);height:8px;left:50%;right:auto;top:74%;bottom:auto;
  border:0;border-radius:0;
  background:repeating-linear-gradient(90deg,transparent 0 28px,var(--flow-blue) 30px 62px,transparent 64px 84px);
  box-shadow:0 0 14px rgba(50,127,255,.62),0 0 36px rgba(35,85,230,.28);
  filter:drop-shadow(0 0 5px rgba(121,184,255,.76));opacity:.82;
  transform:translate3d(-52%,0,0) rotate(-23deg);
  transform-origin:center;will-change:transform,opacity;
  animation:blueRouteFlow 9s ease-in-out infinite alternate;
}

/* Тонкие золотые нити отделены от главной дуги и дают глубину. */
#app::before{
  width:min(1040px,230vw);height:460px;left:50%;top:4%;
  background:repeating-linear-gradient(0deg,transparent 0 19px,rgba(255,208,69,.2) 20px 21px,transparent 22px 37px);
  box-shadow:none;filter:none;opacity:.54;
  transform:translate3d(-57%,0,0) rotate(-23deg);
  transform-origin:center;will-change:transform,opacity;
  animation:goldThreads 16s ease-in-out infinite alternate;
}
#app::after{
  width:520px;height:520px;left:calc(50% - 420px);bottom:-300px;border-radius:50%;
  background:radial-gradient(circle at 58% 34%,rgba(255,220,99,.64),rgba(255,103,24,.28) 25%,rgba(199,29,12,.1) 48%,transparent 69%);
  filter:none;opacity:.58;
  transform:translate3d(0,0,0) scale(.9);will-change:transform,opacity;
  animation:flowBloom 13s ease-in-out infinite alternate;
}

/* Активный интерфейс: плотный графит, тёплый верх и холодная нижняя кромка. */
.task-card,.entry,.skill-card,.st,.card,#addbox,.skill-form,.task-editor,.rotation-editor,.diag{
  border-color:rgba(129,145,174,.32);
  border-top-color:rgba(255,222,164,.38);
  border-bottom-color:rgba(87,139,239,.2);
  box-shadow:
    0 22px 40px -24px rgba(0,0,0,.98),
    0 0 24px rgba(255,91,24,.075),
    inset 0 1px rgba(255,245,220,.14),
    inset 0 -1px rgba(91,146,255,.16),
    inset 0 -20px 34px rgba(0,0,0,.22);
}
.task,.entry,.task-card,
.task-swipe:nth-child(3n+1) .task-card,.task-swipe:nth-child(3n+2) .task-card,.task-swipe:nth-child(3n) .task-card,
.task:nth-child(3n+1),.task:nth-child(3n+2),.task:nth-child(3n),
.entry:nth-child(3n+1),.entry:nth-child(3n+2),.entry:nth-child(3n){
  background:
    radial-gradient(110% 72% at 8% 0,rgba(255,107,31,.14),transparent 53%),
    radial-gradient(90% 65% at 100% 108%,rgba(53,102,218,.105),transparent 58%),
    linear-gradient(158deg,rgba(37,31,34,.98),rgba(13,16,27,.985) 60%,rgba(7,11,21,.99));
}
.skill-card,.st,.st:nth-child(3n+1),.st:nth-child(3n+2),.st:nth-child(3n),.card{
  background:
    radial-gradient(105% 72% at 9% 0,rgba(255,116,34,.16),transparent 53%),
    radial-gradient(90% 60% at 100% 108%,rgba(58,111,232,.11),transparent 60%),
    linear-gradient(158deg,#252127,#111622 61%,#080D17);
}
#addbox,.skill-form,.task-editor,.rotation-editor,.diag{
  background:
    radial-gradient(110% 74% at 8% 0,rgba(255,111,32,.13),transparent 53%),
    linear-gradient(158deg,rgba(36,29,32,.97),rgba(8,13,23,.98));
  border-radius:19px;
}
h2.sec{font-size:30px;line-height:1.05;margin:20px 0 14px}
.task-swipe{margin-bottom:12px;border-radius:21px}
.task-card{border-radius:21px}
.task .acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:12px}
.task .acts .linkbtn{
  min-width:0;min-height:44px;margin:0;padding:0 5px;border-radius:13px;
  color:#D3D7DF;background:linear-gradient(160deg,rgba(34,39,53,.97),rgba(7,11,20,.99));
  border:1px solid rgba(120,146,194,.25);
  box-shadow:0 9px 17px -13px #000,inset 0 1px rgba(255,255,255,.09),inset 0 -8px 14px rgba(0,0,0,.22);
  font-size:8px;letter-spacing:.045em;text-align:center;
}
#addbox{gap:8px;padding:11px;margin-top:14px}
#addbox input{min-height:46px;background:rgba(5,9,17,.82);border-radius:13px}
#addtask{
  min-height:46px;padding:0 17px!important;border:0!important;border-radius:13px!important;
  color:#211008!important;background:linear-gradient(145deg,#FFE98F,#FF9A2D 59%,#FF5A1E)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.62),0 9px 20px rgba(255,78,19,.24)!important;
}

/* Нижняя панель и «Старт» повторяют выбранный эскиз, сохраняя шесть разделов. */
.nav-dock{
  height:76px;padding:7px;border-color:rgba(125,150,196,.3);border-radius:25px;
  background:linear-gradient(180deg,rgba(27,31,44,.96),rgba(6,10,18,.98));
  box-shadow:0 22px 43px rgba(0,0,0,.58),0 0 32px rgba(39,97,220,.1),inset 0 1px rgba(255,255,255,.12),inset 0 -1px rgba(76,126,226,.1);
  backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);
}
.light .nav-dock{background:linear-gradient(180deg,rgba(27,31,44,.96),rgba(6,10,18,.98))}
.nav-item{height:60px;border-radius:17px;color:#9A9FAC}
.nav-item.on{
  color:var(--flow-blue);
  background:linear-gradient(180deg,rgba(65,124,221,.22),rgba(46,78,165,.045));
  box-shadow:inset 0 1px rgba(174,207,255,.18),inset 0 -1px rgba(75,125,229,.12);
}
.nav-boost{
  width:66px;height:66px;margin-top:-23px;border-radius:50%;color:#2A1005;
  background:radial-gradient(circle at 34% 25%,#FFF6C2 0 8%,#FFD864 21%,#FF8B2B 55%,#E63C18 82%,#92130C 100%);
  box-shadow:0 14px 36px rgba(255,60,18,.46),0 0 31px rgba(255,142,34,.46),inset 0 2px rgba(255,255,255,.62),inset 0 -8px 16px rgba(117,10,4,.32);
  animation:none;
}
.nav-boost::before{
  inset:-6px;background:radial-gradient(circle,rgba(255,218,102,.61),rgba(255,71,20,.24) 52%,transparent 72%);
  animation:flamePulse 3.6s ease-in-out infinite;
}

/* Настройки получают тихую подложку: длинный текст не попадает прямо на световой поток. */
#s-set{position:relative;isolation:isolate}
#s-set::before{
  content:"";position:absolute;inset:-10px -10px -28px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,13,.52),rgba(5,8,15,.78) 62%,rgba(5,8,15,.9));
  border:1px solid rgba(255,210,121,.09);border-radius:24px;
}

/* Эффекты не двигают контент и не забирают события. */
#s-now .q{animation:cardRise .7s cubic-bezier(.22,1,.36,1) both}
#s-now .q::after{pointer-events:none}
#newskill,#s-set .linkbtn{min-height:44px;display:flex;align-items:center;justify-content:center}
.sig path{animation:none}
.commit,.save,.rotation-save,.opt.primary,#addtask{animation:none}
@keyframes liveFlow{
  0%{transform:translate3d(-67%,-14%,0) rotate(-25deg) scale(.97);opacity:.76}
  55%{opacity:.96}
  100%{transform:translate3d(-57%,1%,0) rotate(-20deg) scale(1.05);opacity:.88}
}
@keyframes goldThreads{
  0%{transform:translate3d(-60%,-4%,0) rotate(-24deg);opacity:.36}
  100%{transform:translate3d(-53%,6%,0) rotate(-21deg);opacity:.66}
}
@keyframes blueRouteFlow{
  0%{transform:translate3d(-58%,-7%,0) rotate(-25deg) scale(.96);opacity:.52}
  100%{transform:translate3d(-45%,8%,0) rotate(-21deg) scale(1.04);opacity:.94}
}
@keyframes flowBloom{
  0%{transform:translate3d(-8%,8%,0) scale(.82);opacity:.42}
  100%{transform:translate3d(11%,-5%,0) scale(1.07);opacity:.66}
}

@media (max-width:380px){
  body::before{width:235vw;height:330px;left:50%;top:11%}
  body::after{width:215vw;left:50%;top:77%}
  #app::before{width:240vw;height:430px;left:50%;top:6%}
  .task .acts{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  #addtask{padding:0 12px!important}
}
@media (prefers-reduced-motion:reduce){
  body::before,body::after,#app::before,#app::after,
  .task-card::after,.entry::after,.skill-card::after,.st::before,#s-now .q::after,
  .sig path,.nav-dock::after,.nav-item.on::after,.nav-boost::before{
    animation:none!important;transition:none!important
  }
}

/* 1.15.43 · открытый кинематографичный поток заменяет овалы и решётку. */
body::before,body::after,#app::before,#app::after,#s-now .q::after{content:none!important;display:none!important}
#flow-background{
  position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
  touch-action:none;contain:strict;display:block;
  background:transparent;
}
#app{z-index:1}