/* Дизайн-код StudyAI: Inter, токены UI Kit, оболочка как в приложении. Только светлая тема. */
:root{
  --black:#08090B; --black-500:#08090B94; --black-400:#08090B66; --black-300:#08090B1A; --black-200:#08090B14;
  --black-100:#08090B0A; --black-80:#08090B08; --white:#FFFFFF;
  --blue:#0A7CFF; --blue-800:#0872EC; --blue-200:#0A7CFF14; --blue-300:#0A7CFF2E;
  --red:#E53E3E; --red-200:#C72E2E; --green:#21BE19; --green-200:#18AF10; --orange:#FF8B00; --coral:#FB4C4F;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.45;color:var(--black);background:var(--white)}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--blue-800)}
h1{font-size:24px;font-weight:600;line-height:1.2;margin:0 0 20px}
h2{font-size:18px;font-weight:500;margin:0 0 12px}
h3{font-size:14px;font-weight:500;color:var(--black-500);margin:0 0 8px}
p{margin:0 0 12px}
.muted{color:var(--black-500)}
.small{font-size:12px}
.right{text-align:right}
.nowrap{white-space:nowrap}

.side{position:fixed;left:0;top:0;bottom:0;width:250px;background:var(--black-80);padding:20px 12px;display:flex;flex-direction:column;overflow-y:auto}
.brand{font-size:16px;font-weight:600;padding:4px 16px 20px}
.nav a,.nav button{display:flex;align-items:center;gap:12px;height:46px;padding:0 16px;border-radius:28px;color:var(--black);font:400 14px Inter,sans-serif;border:0;background:none;width:100%;cursor:pointer;text-align:left}
.nav a span:first-of-type,.nav button span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav a:hover,.nav button:hover{background:var(--black-100);color:var(--black)}
.nav a.on{background:var(--black-200);font-weight:500}
.nav.foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--black-200)}
.nav.foot a,.nav.foot button{height:38px;color:var(--black-500)}
.nav.foot a.on{color:var(--black)}
.ico{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.badge{background:var(--blue);color:var(--white);border-radius:28px;padding:1px 8px;font-size:12px;font-weight:500}
.main{margin-left:250px;padding:28px 32px 60px;max-width:1500px}
.auth{max-width:400px;margin:8vh auto;padding:0 16px}
.auth .card{padding:28px}

.flash{background:var(--blue-200);border:1px solid var(--blue-300);border-radius:12px;padding:12px 16px;margin-bottom:20px}
.card{border:1px solid var(--black-200);border-radius:16px;padding:20px;margin-bottom:20px;background:var(--white)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row.end{align-items:flex-end}
.between{justify-content:space-between}
.stack>*+*{margin-top:12px}
.mt{margin-top:20px}
.mb0{margin-bottom:0}

label{display:block;font-size:12px;font-weight:500;color:var(--black-500);margin-bottom:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=url],input[type=file],select,textarea{
  width:100%;font:400 14px Inter,sans-serif;color:var(--black);background:var(--white);border:1px solid var(--black-300);border-radius:12px;padding:10px 12px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--blue)}
textarea{min-height:90px;resize:vertical}
.f{flex:1;min-width:160px}
.f.s{flex:0 0 150px;min-width:120px}
.check{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:400;color:var(--black);margin:0}
.check input{width:16px;height:16px}

.btn{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 18px;border-radius:28px;border:0;background:var(--blue);color:var(--white);font:500 14px Inter,sans-serif;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--blue-800);color:var(--white)}
.btn.ghost{background:var(--black-100);color:var(--black)}
.btn.ghost:hover{background:var(--black-200);color:var(--black)}
.btn.danger{background:var(--white);color:var(--red-200);border:1px solid var(--black-300)}
.btn.danger:hover{background:var(--red-200);color:var(--white)}
.btn.sm{height:32px;padding:0 12px;font-size:12px}
.inline{display:inline}

table{width:100%;border-collapse:collapse}
th{font-size:12px;font-weight:500;color:var(--black-500);text-align:left;padding:8px 12px;border-bottom:1px solid var(--black-200)}
td{padding:10px 12px;border-bottom:1px solid var(--black-100);vertical-align:top}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.scroll{overflow-x:auto}

.tag{display:inline-block;border-radius:28px;padding:2px 10px;font-size:12px;font-weight:500;background:var(--black-100);color:var(--black);white-space:nowrap}
.tag.blue{background:var(--blue-200);color:var(--blue-800)}
.tag.green{background:#21BE1924;color:#0E7A08}
.tag.red{background:#E53E3E1F;color:var(--red-200)}
.tag.orange{background:#FF8B0024;color:#9A5400}
.late{color:var(--red-200);font-weight:500}

.tabs{display:flex;gap:8px;margin-bottom:20px}
.tabs a{height:36px;display:inline-flex;align-items:center;padding:0 16px;border-radius:28px;color:var(--black);background:var(--black-100)}
.tabs a.on{background:var(--black);color:var(--white)}

.kanban{display:grid;grid-template-columns:repeat(5,minmax(200px,1fr));gap:12px;align-items:start}
.kcol{background:var(--black-80);border-radius:16px;padding:12px;min-height:200px}
.kcol.over{outline:2px dashed var(--blue)}
.kcol h3{display:flex;justify-content:space-between;padding:0 4px}
.kcard{display:block;background:var(--white);border:1px solid var(--black-200);border-radius:12px;padding:12px;margin-bottom:8px;color:var(--black);cursor:grab}
.kcard:hover{border-color:var(--blue);color:var(--black)}
.kcard .t{font-weight:500;margin-bottom:6px}

.editor{min-height:420px;font-size:15px;line-height:1.6}
.toolbar{display:flex;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.prose{font-size:15px;line-height:1.6}
.prose h2{font-size:20px;font-weight:600;margin:20px 0 8px}
.prose h3,.prose h4{font-size:16px;font-weight:600;color:var(--black);margin:16px 0 8px}
.prose blockquote{margin:12px 0;padding:8px 16px;border-left:3px solid var(--black-300);color:var(--black-500)}
.comment{border-bottom:1px solid var(--black-100);padding:12px 0}
.comment:last-of-type{border-bottom:0}
.linkbox{font-family:ui-monospace,Consolas,monospace;font-size:12px;background:var(--black-80);border-radius:12px;padding:10px 12px;word-break:break-all}
.stat{font-size:24px;font-weight:600}
.bar{height:8px;border-radius:28px;background:var(--black-100);overflow:hidden;min-width:80px}
.bar i{display:block;height:100%;background:var(--blue)}
.w0{width:0}.w10{width:10%}.w20{width:20%}.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w90{width:90%}.w100{width:100%}
details summary{cursor:pointer;color:var(--blue);margin-bottom:12px}

.head{margin-bottom:20px}
.head h1{margin:0}
.filters select,.filters input[type=text]{width:auto;min-width:150px;height:40px;padding:0 12px}
.filters .search{min-width:260px}
.chips{margin-bottom:16px}
.chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:28px;background:var(--blue-200);color:var(--blue-800);font-weight:500}
.chip b{background:var(--blue);color:var(--white);border-radius:28px;padding:0 8px;font-size:12px}
.kcol .empty{padding:4px;margin:0}
.add{margin-bottom:12px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fact{font-size:16px;font-weight:500;margin:4px 0}
ul.plain{margin:0;padding-left:18px}
ul.plain li{margin-bottom:6px}
.doc{max-width:860px}
.prose table{margin:12px 0;font-size:14px}
.prose th,.prose td{border:1px solid var(--black-200)}

@media (max-width:900px){
  .facts{grid-template-columns:1fr}
  .side{position:static;width:auto;height:auto}
  .main{margin-left:0;padding:16px}
  .grid2,.grid3{grid-template-columns:1fr}
  .kanban{grid-template-columns:1fr}
}
td.num,th.num{white-space:nowrap}
.filters select{max-width:220px}
.kanban{overflow-x:auto;grid-template-columns:repeat(5,minmax(190px,1fr))}
@media (max-width:900px){.kanban{grid-template-columns:1fr}}

.cta{margin:0 4px 16px;height:44px}
.nav a.on{background:var(--blue-200);color:var(--blue-800);font-weight:500}
.nav a.on:hover{background:var(--blue-300);color:var(--blue-800)}
.nav a:not(.on) .ico{color:var(--black-500)}
.nav .badge{flex:0 0 auto;background:var(--coral)}
.nav.foot .badge{background:var(--blue)}
.nav.foot a.on{background:var(--black-100);color:var(--black)}

.filters input[type=date]{width:auto;height:40px;padding:0 10px}
[hidden]{display:none!important}
th.sort{cursor:pointer;user-select:none}
th.sort:hover{color:var(--black)}
th.sort[data-dir=asc]::after{content:" ↑";color:var(--blue)}
th.sort[data-dir=desc]::after{content:" ↓";color:var(--blue)}

.nav a.prime{background:var(--blue-200);color:var(--blue-800);font-weight:600;font-size:15px;height:52px;margin-bottom:10px}
.nav a.prime .ico{color:var(--blue-800)}
.nav a.prime:hover{background:var(--blue-300);color:var(--blue-800)}
.nav a.prime.on,.nav a.prime.on:hover{background:var(--blue);color:var(--white)}
.nav a.prime.on .ico{color:var(--white)}
.nav a.prime .badge{background:var(--white);color:var(--blue-800)}
.nav a.on:not(.prime){background:var(--black-200);color:var(--black)}
.brand{line-height:1.25}
.brand span{color:var(--blue)}

.brand{display:block;padding:4px 16px 20px;color:var(--black)}
.brand img{display:block}
.brand span{display:block;margin-top:6px;font-size:12px;font-weight:500;color:var(--black-500)}
tr.d1 td:first-child{padding-left:36px}
tr.d2 td:first-child{padding-left:60px}
tr.d3 td:first-child{padding-left:84px}
tr.hub td:first-child a{font-weight:600}
td.small .tag{margin-bottom:4px}

.tw{display:inline-block;width:24px;height:24px;margin-right:6px;vertical-align:middle;border:0;background:none;padding:0}
button.tw{cursor:pointer;border-radius:8px;background:var(--black-100);position:relative}
button.tw:hover{background:var(--blue-200)}
button.tw::before{content:"";position:absolute;left:9px;top:7px;border:5px solid transparent;border-left-color:var(--black);border-right:0}
button.tw[aria-expanded=true]::before{left:7px;top:9px;border:5px solid transparent;border-top-color:var(--blue);border-bottom:0}
td .sub{margin-left:30px}
tr.hub td:first-child a{font-weight:500}
.brand{padding:6px 16px 18px;margin-bottom:14px;border-bottom:1px solid var(--black-200)}
.brand span{margin-top:10px;font-size:15px;font-weight:600;color:var(--black);letter-spacing:-.01em}
.brand:hover{color:var(--black)}

.slides{max-width:1100px}
.slides img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--black-200);margin-bottom:16px;background:var(--black-80)}
.doc{padding:32px 40px}
.doc h2{font-size:22px;font-weight:600;margin:36px 0 12px;padding-left:14px;border-left:4px solid var(--blue)}
.doc h2:first-child{margin-top:0;border:0;padding:0;font-size:26px}
.doc h3{font-size:17px;margin:24px 0 8px}
.doc h4{font-size:15px;color:var(--black-500);text-transform:uppercase;letter-spacing:.04em;margin:20px 0 6px}
.doc blockquote{border:0;background:var(--blue-200);border-radius:12px;color:var(--black);padding:12px 16px}
.doc code{background:var(--black-100);border-radius:6px;padding:1px 6px;font-size:13px}
.doc li{margin-bottom:6px}
.doc table{border-radius:12px;overflow:hidden}
.doc th{background:var(--black-80);color:var(--black)}

.stat-tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.stat-tabs a{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border-radius:16px;background:var(--black-80);color:var(--black);border:1px solid transparent}
.stat-tabs a span{font-size:13px;color:var(--black-500)}
.stat-tabs a b{font-size:24px;font-weight:600;line-height:1.1}
.stat-tabs a:hover{border-color:var(--black-300);color:var(--black)}
.stat-tabs a.on{background:var(--blue);color:var(--white)}
.stat-tabs a.on span{color:#FFFFFFD6}
.fbar{margin-bottom:12px}
.tlist{border:1px solid var(--black-200);border-radius:16px;overflow:hidden}
.thead,.trow summary{display:grid;grid-template-columns:minmax(260px,1fr) 150px 110px 150px 110px 36px;gap:12px;align-items:center;padding:12px 16px}
.tlist.root .thead,.tlist.root .trow summary{grid-template-columns:minmax(240px,1fr) 140px 150px 100px 150px 110px 36px}
.thead{font-size:12px;font-weight:500;color:var(--black-500);background:var(--black-80);padding-top:8px;padding-bottom:8px}
.trow{border-top:1px solid var(--black-100)}
.trow summary{list-style:none;cursor:pointer;color:var(--black);margin:0}
.trow summary::-webkit-details-marker{display:none}
.trow summary:hover{background:var(--black-80)}
.trow[open] summary{background:var(--blue-200)}
.trow.late summary{box-shadow:inset 3px 0 0 var(--red)}
.tt a{font-weight:500;color:var(--black);display:block}
.tt a:hover{color:var(--blue)}
.tt .small{display:block;margin-top:2px}
.pf{display:flex;align-items:center;gap:8px}
.pf img{border-radius:5px}
.pf i{width:20px;height:20px;border-radius:5px;background:var(--black-200);font-style:normal;font-size:11px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.more{width:28px;height:28px;border-radius:8px;background:var(--black-100);position:relative}
.more::before{content:"";position:absolute;left:9px;top:11px;border:5px solid transparent;border-top-color:var(--black);border-bottom:0}
.trow[open] .more::before{top:10px;border:5px solid transparent;border-bottom-color:var(--blue);border-top:0}
.quick{padding:16px;background:var(--white);border-top:1px solid var(--blue-300)}
.quick>*+*{margin-top:12px}
.tlist .empty{padding:20px 16px;margin:0}
@media (max-width:1000px){.stat-tabs{grid-template-columns:repeat(2,1fr)}.thead{display:none}.trow summary,.tlist.root .trow summary{grid-template-columns:1fr 1fr}}

.stat-tabs a{background:var(--white);border:1px solid var(--black-300)}
.stat-tabs a span{font-size:14px;font-weight:500;color:var(--black);display:flex;align-items:center;gap:8px}
.stat-tabs a span i{width:10px;height:10px;border-radius:50%;background:var(--black-400);flex:0 0 10px}
.stat-tabs .st-doing i{background:var(--blue)}
.stat-tabs .st-review i{background:var(--orange)}
.stat-tabs .st-published i{background:var(--green)}
.stat-tabs .st-paid i{background:var(--black)}
.stat-tabs a b{font-size:28px}
.stat-tabs a:hover{border-color:var(--blue)}
.stat-tabs a.on{background:var(--blue);border-color:var(--blue);color:var(--white)}
.stat-tabs a.on span{color:var(--white)}
.stat-tabs a.on span i{background:var(--white)}
.thead a{color:var(--black-500)}
.thead a:hover{color:var(--black)}
.thead a.on{color:var(--blue-800)}
.more{width:auto;height:30px;padding:0 26px 0 12px;display:inline-flex;align-items:center;font-size:12px;font-weight:500;color:var(--blue-800);background:var(--blue-200);border-radius:28px}
.more::before{left:auto;right:10px;top:13px;border-top-color:var(--blue-800)}
.trow[open] .more::before{top:11px;right:10px}
.thead,.trow summary{grid-template-columns:minmax(260px,1fr) 150px 110px 150px 110px 96px}
.tlist.root .thead,.tlist.root .trow summary{grid-template-columns:minmax(240px,1fr) 140px 150px 100px 150px 110px 96px}
.qgrid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:24px}
.qtext{min-height:340px;font-size:15px;line-height:1.6}
.quick .f.wide{flex:1 1 100%}
button.link{border:0;background:none;color:var(--blue);cursor:pointer;font:inherit;padding:0}
@media (max-width:1000px){.qgrid{grid-template-columns:1fr}}

.tedit{flex-wrap:nowrap;gap:8px}
.tedit input[type=number]{width:72px;padding:6px 8px;height:32px}
.tedit input[type=text]{flex:1;min-width:0;padding:6px 8px;height:32px}
.warnbox{background:#FF8B0024;color:#7A4300;border-radius:12px;padding:10px 14px;font-size:13px}

.nav a .ico{width:28px;height:28px;flex:0 0 28px;padding:4px;border-radius:9px}
.nav a.prime .ico,.nav.foot .ico{width:20px;height:20px;flex:0 0 20px;padding:0;border-radius:0}
.nav a.c-topics .ico{background:#FF8B0026;color:#B25F00}
.nav a.c-money .ico{background:#21BE1926;color:#0E7A08}
.nav a.c-guide .ico{background:var(--blue-200);color:var(--blue-800)}
.nav a.c-topics.on:not(.prime){background:#FF8B001F;color:#7A4300}
.nav a.c-money.on:not(.prime){background:#21BE191F;color:#0B5F06}
.nav a.c-guide.on:not(.prime){background:var(--blue-200);color:var(--blue-800)}

.banner{position:sticky;bottom:16px;margin-top:40px;max-width:760px;border-radius:16px;overflow:hidden;border:1px solid var(--black-200);background:var(--white);box-shadow:0 8px 28px #08090B1F}
.banner img{display:block;width:100%;height:auto;max-height:180px;object-fit:cover}
.banner button{position:absolute;top:8px;right:8px;height:28px;padding:0 12px;border:0;border-radius:28px;background:#08090BB8;color:var(--white);font:500 12px Inter,sans-serif;cursor:pointer}
.banner button:hover{background:var(--black)}
main.main{min-height:100vh;display:flex;flex-direction:column}
main.main>*{flex:0 0 auto}
main.main>.banner{margin-top:auto;position:sticky;bottom:16px;max-width:640px;align-self:flex-start;width:100%}
main.main>.banner::before{content:"";display:block}
.banner{margin-top:40px}
.banner img{max-height:none;object-fit:contain}
main.main>.spacer{flex:1 0 40px}
@media (max-width:900px){main.main{min-height:0}main.main>.banner{position:static}}
main.main>.banner{position:static}
.stat-tabs{grid-template-columns:repeat(6,1fr)}
.stat-tabs .st-ready i{background:#7A5AF8}
@media (max-width:1000px){.stat-tabs{grid-template-columns:repeat(2,1fr)}}
main.main>.banner{position:relative}

.bn{position:relative;max-width:640px;width:100%;align-self:flex-start;border-radius:16px;overflow:hidden;border:1px solid var(--black-200);background:var(--white)}
.bn-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.bn-track::-webkit-scrollbar{display:none}
.bn-slide{flex:0 0 100%;scroll-snap-align:start;display:block;aspect-ratio:640/200;color:var(--white)}
.bn-slide img{display:block;width:100%;height:100%;object-fit:cover}
.bn-text{background:var(--black);position:relative}
.bn-text:nth-child(odd){background:var(--blue)}
.bn-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:24px 64px 24px 32px}
.bn-in strong{font-size:24px;font-weight:600;line-height:1.15}
.bn-in span{font-size:14px;line-height:1.4;opacity:.86;max-width:440px}
.bn-in em{font-style:normal;font-size:13px;font-weight:500;margin-top:4px}
.bn-slide:hover{color:var(--white)}
.bn-nav{position:absolute;top:50%;width:32px;height:32px;margin-top:-16px;border:0;border-radius:50%;background:#FFFFFFD6;cursor:pointer}
.bn-nav::before{content:"";position:absolute;top:11px;border:5px solid transparent}
.bn-prev{left:8px}.bn-prev::before{left:8px;border-right-color:var(--black)}
.bn-next{right:8px}.bn-next::before{left:14px;border-left-color:var(--black)}
.bn-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;justify-content:center;gap:6px;pointer-events:none}
.bn-dots i{width:6px;height:6px;border-radius:50%;background:#FFFFFF80}
.bn-dots i.on{background:var(--white);width:18px;border-radius:6px}
.bn-close{position:absolute;top:8px;right:8px;height:26px;padding:0 10px;border:0;border-radius:28px;background:#08090BB8;color:var(--white);font:500 12px Inter,sans-serif;cursor:pointer}
.ft{display:flex;gap:40px;flex-wrap:wrap;margin-top:28px;padding-top:20px;border-top:1px solid var(--black-200)}
.ft h4{font-size:12px;font-weight:500;color:var(--black-500);margin:0 0 8px}
.ft a{display:block;color:var(--black);font-size:13px;margin-bottom:6px}
.ft a:hover{color:var(--blue)}
.ft{gap:8px 32px;align-items:center;padding-top:14px;margin-top:20px}
.ft div{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ft h4{margin:0}
.ft a{display:inline;margin:0}

/* баннеры: во всю ширину, по два в ряд, в стиле баннера блога */
.bn{max-width:none;align-self:stretch;border:0;border-radius:0;overflow:visible;background:none}
.bn-track{gap:12px;border-radius:16px}
.bn-slide{flex:0 0 calc(50% - 6px);border-radius:16px;overflow:hidden;position:relative;aspect-ratio:640/200}
.bn-text,.bn-text:nth-child(odd){background:linear-gradient(105deg,#0A7CFF 0%,#0872EC 55%,#2A8FFF 100%)}
.bn-text::before{content:"";position:absolute;right:-60px;top:-80px;width:320px;height:320px;border-radius:50%;background:#FFFFFF14}
.bn-text::after{content:"";position:absolute;right:120px;bottom:-140px;width:260px;height:260px;border-radius:50%;background:#FFFFFF0F}
.bn-in{z-index:1;padding:20px 44% 20px 28px;gap:6px;justify-content:center}
.bn-logo{filter:brightness(0) invert(1);margin-bottom:6px;width:87px;height:24px;object-fit:contain}
.bn-in strong{font-family:Unbounded,Inter,sans-serif;font-size:clamp(16px,1.9vw,26px);font-weight:600;line-height:1.12;letter-spacing:-.01em}
.bn-in span{font-size:13px;line-height:1.35;opacity:.92;max-width:none}
.bn-in em{align-self:flex-start;margin-top:6px;height:30px;padding:0 14px;border-radius:28px;background:var(--white);color:var(--blue-800);display:inline-flex;align-items:center;font-size:13px;font-weight:600}
.bn-art{position:absolute;right:4%;bottom:0;height:96%;width:auto;z-index:1}
.bn-close{top:8px;right:8px}
.bn-dots{display:none}
.bn-back{align-self:flex-start;height:32px;padding:0 14px;border:1px solid var(--black-300);border-radius:28px;background:var(--white);color:var(--black-500);font:500 12px Inter,sans-serif;cursor:pointer}
.bn-back:hover{color:var(--black);border-color:var(--black)}
@media (max-width:1100px){.bn-slide{flex-basis:100%}}
.bn-slide .bn-logo{width:87px;height:24px;object-fit:contain}
.bn-slide .bn-art{width:auto;height:96%;object-fit:contain}
.bn-nav{top:auto;bottom:10px;margin:0;width:28px;height:28px}
.bn-nav::before{top:9px}
.bn-prev{left:auto;right:46px}.bn-prev::before{left:6px}
.bn-next{right:12px}.bn-next::before{left:12px}

.ft a{display:inline-flex;align-items:center;gap:6px}
.ft a img{border-radius:4px}

/* движение в баннерах: знак StudyAI, плавающие круги, лёгкий сдвиг картинки */
.bn-spark{position:absolute;z-index:1;right:9%;top:50%;width:110px;height:140px;margin-top:-70px;background:url(/static/logo.svg) left center/510px 140px no-repeat;filter:brightness(0) invert(1);animation:bn-pulse 5s ease-in-out infinite}
.bn-spark.s2{right:27%;top:26%;width:40px;height:51px;margin:0;background-size:186px 51px;opacity:.55;animation:bn-pulse 4s ease-in-out -1.5s infinite}
.bn-spark.s3{right:5%;top:68%;width:28px;height:36px;margin:0;background-size:131px 36px;opacity:.4;animation:bn-pulse 6s ease-in-out -3s infinite}
.bn-text::before{animation:bn-drift 14s ease-in-out infinite alternate}
.bn-text::after{animation:bn-drift 18s ease-in-out -6s infinite alternate-reverse}
.bn-art{animation:bn-float 7s ease-in-out infinite alternate}
.bn-in em::after{content:"→";margin-left:6px;display:inline-block;animation:bn-nudge 2.4s ease-in-out infinite}
@keyframes bn-pulse{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(8deg)}}
@keyframes bn-drift{from{transform:translate(0,0)}to{transform:translate(-36px,28px)}}
@keyframes bn-float{from{transform:translateY(4px)}to{transform:translateY(-2px)}}
@keyframes bn-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
@media (prefers-reduced-motion:reduce){.bn-spark,.bn-text::before,.bn-text::after,.bn-art,.bn-in em::after{animation:none}}

/* кнопки и точки баннеров — поверх содержимого слайдов */
.bn-nav,.bn-close{z-index:4}
.bn-dots{display:flex;position:static;justify-content:center;gap:6px;margin-top:8px;pointer-events:none}
.bn-dots i{width:8px;height:8px;border-radius:50%;background:var(--black-300)}
.bn-dots i.on{background:var(--blue);width:8px;border-radius:50%}
.bn-nav{bottom:26px}

.trow.ro summary{cursor:default}
.more.ro{padding:0 12px;background:var(--black-100);color:var(--black)}
.more.ro::before{display:none}

/* название в шапке меню: фирменный Unbounded с синим акцентом */
.brand .brand-name{display:inline-flex;align-items:baseline;margin-top:12px;font-family:Unbounded,Inter,sans-serif;font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1;color:var(--black);padding:7px 12px 8px;border-radius:10px;background:linear-gradient(105deg,var(--blue-200),#0A7CFF05)}
.brand .brand-name i{font-style:normal;color:var(--blue);margin:0 1px}
.brand .brand-name::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);margin-left:7px;align-self:center}

/* шкала 1–5 и подсказка «?» */
.sc{display:inline-flex;gap:3px;vertical-align:middle;margin-right:6px}
.sc i{width:10px;height:10px;border-radius:50%;background:var(--black-200)}
.sc i.on{background:var(--blue)}
.hint{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--black-200);color:var(--black-500);font-size:11px;font-weight:600;cursor:help;vertical-align:middle}
.hint:hover,.hint:focus{background:var(--blue);color:var(--white);outline:none}
.hint:hover::after,.hint:focus::after{content:attr(data-tip);position:absolute;left:0;top:22px;z-index:20;width:300px;padding:10px 12px;border-radius:12px;background:var(--black);color:var(--white);font-size:12px;font-weight:400;line-height:1.4;text-align:left;white-space:normal;box-shadow:0 8px 24px #08090B40}

.tnew{margin-top:12px}
.tnew>summary.btn{display:inline-flex;list-style:none;color:var(--white);margin-bottom:12px}
.tnew>summary.btn::-webkit-details-marker{display:none}

/* непрочитанное: заметная метка и подложка */
.tag.coral{background:var(--coral);color:var(--white)}
.comment.new{background:#FB4C4F0F;border-radius:10px;padding-left:10px;padding-right:10px;box-shadow:inset 3px 0 0 var(--coral)}