/* Задачи в библиотеке */
#app.lib-wide { max-width:1120px }
#g-list[hidden], #g-bank[hidden], #g-q[hidden], #g-about[hidden] { display:none }
#g-kinds { flex-wrap:wrap }
.lb-hero { position:relative; display:grid; grid-template-columns:1fr auto; gap:12px 16px; align-items:center; padding:24px 26px; border-radius:18px; color:#fff; background:radial-gradient(120% 160% at 90% -20%, #6d8cff 0, transparent 55%), linear-gradient(135deg, #1e2a5a, #33257a) }
.lb-hero h2 { margin:0; font-size:28px; letter-spacing:-.01em } .lb-hero p { margin:2px 0 0; color:#cdd5f5; font-size:14px }
.lb-hero input { grid-column:1 / -1; padding:14px 16px; border:0; border-radius:12px; font-size:16px; color:#1b1f2a; box-shadow:0 6px 20px rgba(10,14,40,.28) }
.lb-new { padding:10px 16px; border:0; border-radius:10px; background:#fff; color:#2b2f6b; font:inherit; font-weight:600; cursor:pointer } .lb-new:hover { background:#e9edff }
.lb-secs { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:10px; margin-top:14px }
.lb-sec { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; text-align:left; padding:12px 14px; border:1px solid var(--line); border-radius:14px; background:#fff; font:inherit; color:var(--ink); cursor:pointer; transition:border-color .12s, box-shadow .12s, transform .12s }
.lb-sec:hover { transform:translateY(-1px); box-shadow:0 6px 16px rgba(27,31,42,.08) } .lb-sec.on { border-color:var(--c); box-shadow:0 0 0 1px var(--c) inset }
.lb-ic { grid-row:span 2; width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:10px; font-size:19px; color:#fff; background:var(--c) } .lb-sec b { font-size:14px; line-height:1.2 } .lb-sec i { font-style:normal; font-size:12px; color:var(--muted) }
.lb-bar { display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; margin:16px 0 4px }
.lb-pills { display:flex; flex-wrap:wrap; gap:6px } .lb-pills button { padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; font:inherit; font-size:14px; color:var(--ink); cursor:pointer } .lb-pills button.on { background:var(--ink); border-color:var(--ink); color:#fff } .lb-pills i { font-style:normal; opacity:.6; font-size:12px }
.lb-seg { display:flex; padding:3px; border-radius:10px; background:#e9ecf3 } .lb-seg button { padding:6px 11px; border:0; border-radius:8px; background:none; font:inherit; font-size:13px; color:var(--muted); cursor:pointer } .lb-seg button.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(27,31,42,.12) }
.lb-g { margin-top:20px } .lb-g h3 { margin:0 0 8px; font-size:15px; font-weight:600 } .lb-g h3 i { font-style:normal; font-weight:400; color:var(--muted); font-size:13px }
.lb-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)); gap:10px }
.lb-c { position:relative; display:flex; flex-direction:column; gap:8px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:#fff; transition:box-shadow .12s, border-color .12s } .lb-c:hover { border-color:#c9d3ea; box-shadow:0 6px 18px rgba(27,31,42,.07) }
.lb-text { font-size:16px; line-height:1.45; padding-right:40px } .lb-text p { margin:0 0 .4em } .lb-text p:last-child { margin:0 } .lb-img { max-width:100%; max-height:170px; border-radius:8px; align-self:flex-start }
.lb-name { font-size:13px; color:var(--muted) } .lb-tag { align-self:flex-start; padding:2px 8px; border-radius:6px; background:#eef2ff; color:#2f4fb8; font-size:12px; font-weight:600 }
.lb-ex { display:flex; flex-direction:column; gap:2px; font-size:15px; padding-right:40px } .lb-ex p { margin:0 }
.lb-lv { position:absolute; top:16px; right:14px; display:flex; gap:3px } .lb-lv i { width:7px; height:7px; border-radius:50%; background:#dde2ec } .lb-lv i.on { background:#2f6df6 }
.lb-acts { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:auto } .lb-go { padding:7px 12px; border:0; border-radius:9px; background:#eef2ff; color:#2f4fb8; font:inherit; font-size:14px; font-weight:500; cursor:pointer } .lb-go:hover { background:#dfe6ff }
.lb-ans { padding:7px 10px; border:1px solid var(--line); border-radius:9px; background:#fff; font:inherit; font-size:13px; color:var(--muted); cursor:pointer } .lb-ans.shown { color:var(--ok); border-color:transparent; background:#ecfdf3; font-weight:600 }
.lb-more { display:block; margin:10px auto 0; padding:8px 16px; border:1px solid var(--line); border-radius:10px; background:#fff; font:inherit; font-size:14px; cursor:pointer } .lb-empty { margin-top:24px; padding:40px; text-align:center; border:1px dashed var(--line); border-radius:14px }
@media (max-width:760px) { .lb-hero { padding:18px; grid-template-columns:1fr } .lb-new { justify-self:start } .lb-grid { grid-template-columns:minmax(0, 1fr) } .lb-secs { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) } .lb-sec { padding:10px; column-gap:8px } .lb-sec b { font-size:13px; min-width:0; overflow-wrap:anywhere } .lb-ic { width:32px; height:32px; font-size:16px } .lb-seg { overflow-x:auto; max-width:100% } }
/* Редактор задачи */
.te-wrap { position:fixed; inset:0; z-index:55; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(13,18,32,.55) }
.te { display:flex; flex-direction:column; width:100%; max-width:1080px; max-height:92vh; border-radius:16px; background:#fff; overflow:hidden } .te-h { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line) } .te-h b { font-size:17px } .te-x { border:0; background:none; font-size:17px; cursor:pointer }
.te-b { flex:1; display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); min-height:0 } .te-f { overflow:auto; padding:6px 18px 16px } .te-f label { margin:12px 0 5px } .te-f input, .te-f select, .te-f textarea { width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:10px; font:inherit; box-sizing:border-box; background:#fff } .te-f textarea { font-family:ui-monospace, Menlo, Consolas, monospace; font-size:14px; resize:vertical }
.te-row { display:grid; grid-template-columns:1fr 1fr; gap:10px } .te-pal { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px } .te-pal button, .te-tool { padding:4px 8px; border:1px solid var(--line); border-radius:7px; background:#f8f9fb; font:inherit; font-size:12px; cursor:pointer } .te-tools { display:flex; gap:6px; margin-top:6px } .te-tool { padding:6px 10px }
.te-seg { display:flex; padding:3px; border-radius:10px; background:#e9ecf3 } .te-seg button { flex:1; padding:7px; border:0; border-radius:8px; background:none; font:inherit; font-size:13px; color:var(--muted); cursor:pointer } .te-seg button.on { background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(27,31,42,.12) }
.te-ch { display:flex; gap:6px; align-items:center; margin-bottom:5px } .te-ch input[type=radio] { width:auto; flex:none } .te-ch button { border:0; background:none; cursor:pointer; color:var(--muted) }
.te-p { padding:16px 18px; overflow:auto; background:#f4f6fb; border-left:1px solid var(--line) } .te-p h4 { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted) } .te-pv { border-radius:12px; overflow:hidden; box-shadow:0 4px 16px rgba(27,31,42,.1) }
.te-foot { display:flex; gap:8px; justify-content:space-between; align-items:center; padding:12px 18px; border-top:1px solid var(--line) } .te-foot .btn { width:auto; margin:0; padding:10px 22px } .te-foot .err { margin:0 } .te-del { border:0; background:none; color:var(--bad); font:inherit; cursor:pointer }
@media (max-width:820px) { .te-b { grid-template-columns:minmax(0, 1fr); overflow:auto } .te-f, .te-p { overflow:visible } .te-wrap { padding:0 } .te { max-height:100vh; height:100vh; border-radius:0 } }
.lib-card.lib-open { padding:0; border:0; background:none } .lib-card.lib-open > h1 { display:none } .lib-card.lib-open #g-kinds { max-width:420px }
.te-pv .pg { display:block; min-height:0; padding:5cqw } .te-pv .sld.view .b-task { font-size:4.6cqw; padding:3cqw 3.6cqw 3cqw 8cqw; gap:2cqw } .te-pv .sld.view .b-task::before { left:3cqw; top:3cqw }
.lb-branch { align-self:flex-start; width:max-content; margin-bottom:12px }
.lb-drafts { margin:0 0 12px 8px }
.be-topics { max-height:220px; overflow:auto; padding:6px 8px; border:1px solid var(--line, #dfe3ec); border-radius:10px }
.be-sec summary { cursor:pointer; font-weight:600; padding:3px 0 } .be-t { display:flex; align-items:center; gap:6px; padding:2px 0 2px 8px; font-weight:400 }
.be-h { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 0; font-size:13px; border-top:1px solid var(--line, #dfe3ec) }
.be-h button { border:0; background:none; color:#2f6df6; font:inherit; cursor:pointer; padding:0 }
.lb-c[data-card] { cursor:pointer } .lb-c[data-card]:hover { box-shadow:0 2px 12px rgba(30,50,90,.12) } .lb-c[data-card]:focus-visible { outline:2px solid #2f6df6 }
.be-view { max-width:640px } .be-view .te-b { display:block }
.be-pics { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 } .be-pic { position:relative } .be-pic img { display:block; max-height:96px; max-width:150px; border-radius:8px; border:1px solid var(--line, #dfe3ec) }
.be-pic button { position:absolute; top:2px; right:2px; width:22px; height:22px; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:#fff; cursor:pointer } .be-add { align-self:flex-start; margin-bottom:8px; padding:5px 10px; border:1px solid var(--line, #dfe3ec); border-radius:8px; background:#fff; font:inherit; cursor:pointer }