:root{--bg:#f4f3ff;--surf:#fff;--surf2:#eeecfc;--tx:#1d1b3a;--mut:#6f6c93;--bd:#e1def5;--ac:#6c5ce7;--ac2:#e056c4;--sh:0 8px 30px rgba(80,60,200,.12);color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#12112a;--surf:#1c1b3a;--surf2:#262450;--tx:#f0eeff;--mut:#9b98c4;--bd:#33316a;--sh:0 8px 30px rgba(0,0,0,.4);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#12112a;--surf:#1c1b3a;--surf2:#262450;--tx:#f0eeff;--mut:#9b98c4;--bd:#33316a;--sh:0 8px 30px rgba(0,0,0,.4);color-scheme:dark}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;min-height:100vh;
background-image:radial-gradient(600px 300px at 90% -5%,rgba(224,86,196,.18),transparent),radial-gradient(600px 400px at 0 0,rgba(108,92,231,.2),transparent);background-attachment:fixed}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0}
.app{display:grid;grid-template-columns:290px 1fr;gap:22px;max-width:1280px;margin:0 auto;padding:22px}
.side{background:var(--surf);border:1px solid var(--bd);border-radius:26px;padding:20px;box-shadow:var(--sh);position:sticky;top:22px;align-self:start;max-height:calc(100vh - 44px);display:flex;flex-direction:column}
.logo{display:flex;align-items:center;gap:12px;font-weight:800;font-size:20px;margin-bottom:18px}
.logo i{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--ac),var(--ac2));display:grid;place-items:center;font-style:normal;font-size:22px;box-shadow:0 6px 18px rgba(108,92,231,.45)}
.logo span{flex:1}
.ico{background:var(--surf2);border-radius:12px;width:38px;height:38px;font-size:17px}
.slist{overflow:auto;display:flex;flex-direction:column;gap:6px;flex:1;margin:0 -4px;padding:4px}
.sub{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:16px;background:transparent;text-align:left;width:100%;border:2px solid transparent;transition:.15s}
.sub:hover{background:var(--surf2)}
.sub.on{background:var(--surf2);border-color:var(--c,var(--ac))}
.sub.drop{border-color:var(--c,var(--ac));background:var(--surf2);transform:scale(1.02)}
.sub .e{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;background:color-mix(in srgb,var(--c,var(--ac)) 22%,transparent)}
.sub b{flex:1;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub small{color:var(--mut);font-weight:600;background:var(--bg);padding:2px 9px;border-radius:99px}
.btn{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff;padding:12px 18px;border-radius:14px;font-weight:700;box-shadow:0 6px 18px rgba(108,92,231,.35);transition:.15s}
.btn:hover{transform:translateY(-2px)}
.btn.g{background:var(--surf2);color:var(--tx);box-shadow:none}
.side .btn{margin-top:14px;width:100%}
main{min-width:0}
.top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:18px}
h1{margin:0;font-size:30px;font-weight:800;display:flex;align-items:center;gap:12px}
.tools{display:flex;gap:10px;flex-wrap:wrap}
.in{background:var(--surf);border:1px solid var(--bd);border-radius:14px;padding:11px 14px;outline:none;min-width:0}
.in:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(108,92,231,.2)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.st{background:var(--surf);border:1px solid var(--bd);border-radius:20px;padding:16px 18px;box-shadow:var(--sh)}
.st small{color:var(--mut);font-weight:600}
.st b{display:block;font-size:26px;font-weight:800;margin-top:2px}
.dz{border:2.5px dashed var(--bd);border-radius:24px;padding:26px;text-align:center;background:var(--surf);margin-bottom:20px;transition:.15s}
.dz.over{border-color:var(--ac);background:var(--surf2);transform:scale(1.01)}
.dz .big{font-size:38px}
.dz p{margin:6px 0 14px;color:var(--mut)}
.dz .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.card{background:var(--surf);border:1px solid var(--bd);border-radius:22px;padding:16px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:10px;transition:.15s;border-top:5px solid var(--c,var(--ac))}
.card:hover{transform:translateY(-4px)}
.thumb{height:110px;border-radius:14px;background:color-mix(in srgb,var(--c,var(--ac)) 16%,var(--surf2));display:grid;place-items:center;font-size:42px;overflow:hidden;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover}
.card h3{margin:0;font-size:15px;word-break:break-word;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{color:var(--mut);font-size:12.5px;display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}
.tag{font-size:12px;font-weight:700;padding:3px 10px;border-radius:99px;background:color-mix(in srgb,var(--c,var(--ac)) 20%,transparent);align-self:flex-start}
.acts{display:flex;gap:6px;margin-top:auto}
.acts button{flex:1;background:var(--surf2);border-radius:11px;padding:8px 0;font-size:15px}
.acts button:hover{background:var(--ac);color:#fff}
.acts .del:hover{background:#e5484d}
.banner{background:var(--surf2);border:1px solid var(--bd);border-radius:16px;padding:12px 16px;margin-bottom:16px;font-weight:600;display:none}.by{color:var(--mut);font-size:12.5px}.bar{height:6px;border-radius:9px;background:var(--surf2);overflow:hidden;margin-top:10px;display:none}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ac),var(--ac2));transition:.2s}.role{font-size:13px;font-weight:800;padding:5px 12px;border-radius:99px;background:var(--surf2);white-space:nowrap}.role.adm{background:linear-gradient(135deg,var(--ac),var(--ac2));color:#fff}
.urow{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--bd);flex-wrap:wrap}.urow>div{min-width:0;word-break:break-word}.urow .in{padding:8px 10px}.urow .ico{width:38px;height:38px}.urow .btn{padding:8px 12px;font-size:13px;box-shadow:none}.empty{text-align:center;color:var(--mut);padding:50px 10px;grid-column:1/-1}
.empty .big{font-size:50px}
dialog{border:1px solid var(--bd);border-radius:24px;background:var(--surf);color:var(--tx);padding:24px;box-shadow:var(--sh);width:min(440px,92vw);max-height:92vh}
dialog::backdrop{background:rgba(10,8,30,.55);backdrop-filter:blur(4px)}
dialog.wide{width:min(900px,95vw)}
dialog h2{margin:0 0 16px}
.f{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-weight:600;font-size:14px}
.pick{display:flex;flex-wrap:wrap;gap:8px}
.pick button{width:40px;height:40px;border-radius:12px;background:var(--surf2);font-size:20px;border:2px solid transparent}
.pick button.on{border-color:var(--ac)}
.pick.col button{width:34px;height:34px;border-radius:99px;background:var(--c)}
.pick.col button.on{border-color:var(--tx)}
.dact{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.prev{display:grid;place-items:center;min-height:200px;max-height:70vh;overflow:auto}
.prev img,.prev video{max-width:100%;max-height:68vh;border-radius:14px}
.prev pre{white-space:pre-wrap;word-break:break-word;width:100%;margin:0;background:var(--surf2);padding:16px;border-radius:14px;font-size:13px}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,120px);background:var(--tx);color:var(--bg);padding:12px 20px;border-radius:14px;font-weight:600;transition:.3s;z-index:99;max-width:90vw}
#toast.show{transform:translate(-50%,0)}
html,body{overflow-x:hidden}body{min-height:100dvh}
@media (min-width:1500px){.app{max-width:1500px}.grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}

.acts a{flex:1;text-align:center;background:var(--surf2);border-radius:11px;padding:8px 0;font-size:15px;text-decoration:none;color:inherit;display:grid;place-items:center}
.acts a:hover{background:var(--ac);color:#fff}
.err{color:#e5484d;font-weight:600;min-height:20px;margin:0 0 8px}
.tools .btn,.top .btn{white-space:nowrap}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.grid-2{grid-template-columns:1fr}}

textarea.in{width:100%;min-height:84px;resize:vertical;font:inherit}
.result{background:var(--surf2);border-radius:16px;padding:14px 18px;max-height:44vh;overflow:auto;margin:10px 0;line-height:1.55}
.md h4{margin:14px 0 6px;font-size:16px}.md h4:first-child{margin-top:0}.md p{margin:6px 0}.md ul,.md ol{margin:6px 0;padding-left:22px}.md li{margin:3px 0}.md code{background:var(--bg);padding:1px 6px;border-radius:6px}
#aiBar{margin:0 0 10px}


/* ================= Мобильная адаптация ================= */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body:has(dialog[open]){overflow:hidden}
input[type=search]{-webkit-appearance:none;appearance:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
.sub b,.card h3{min-width:0}
@media (hover:none){.card:hover,.btn:hover{transform:none}.sub:hover{background:transparent}.sub.on:hover,.sub.drop:hover{background:var(--surf2)}}

/* планшеты и телефоны */
@media (max-width:820px){
 .app{grid-template-columns:1fr;gap:12px;padding:10px max(10px,env(safe-area-inset-right)) 16px max(10px,env(safe-area-inset-left))}
 .side{position:static;max-height:none;padding:12px;border-radius:20px;display:block}
 .logo{margin-bottom:10px;font-size:19px}.logo i{width:38px;height:38px;font-size:20px}

 /* СПИСОК ПРЕДМЕТОВ — ВЕРТИКАЛЬНО */
 .slist{
   display:block;          /* вертикальный список, не горизонтальная лента */
   overflow:visible;       /* без горизонтальной прокрутки */
   max-height:none;
   margin:0;
   padding:0;
 }
 .sub{
   display:flex;
   width:100%;
   margin:0 0 6px;
   padding:11px 12px;
   gap:12px;
   border-radius:16px;
   background:var(--surf2);
 }
 .sub .e{width:38px;height:38px;font-size:19px;border-radius:12px;flex:none}
 .sub b{font-size:15px;max-width:none;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .sub small{flex:none}

 .side .btn{margin-top:6px;width:100%;padding:10px}
 .top{gap:10px;align-items:center}
 h1{font-size:22px;flex:1;min-width:0;overflow-wrap:anywhere}
 .tools{width:100%}.tools .in{flex:1 1 140px}
 .stats{grid-template-columns:repeat(3,1fr);gap:8px}
 .st{padding:10px 12px;border-radius:16px}.st small{font-size:12px}.st b{font-size:19px}
 .dz{padding:16px;border-radius:20px}.dz .big{font-size:30px}.dz p{font-size:14px;margin:4px 0 12px}
 .dz .row{flex-direction:column;align-items:stretch}
 .btn,.in,.ico{min-height:44px}
 input,select,textarea,.in{font-size:16px} /* без авто-зума в iOS */
 .dact{flex-wrap:wrap}.dact .btn{flex:1 1 120px}
 .dact #sDel,.dact #pwBtn{margin:0;flex-basis:100%;order:3}
 .pick button{width:44px;height:44px}.pick.col button{width:40px;height:40px}
}

/* телефоны */
@media (max-width:620px){
 .tools{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 .tools #q,.tools #sort{grid-column:1/-1}
 .tools .btn{width:100%;padding:10px 8px}
}
@media (max-width:520px){
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .card{padding:12px;border-radius:18px;gap:8px}
 .thumb{height:76px;font-size:32px;border-radius:12px}
 .card h3{font-size:14px}.meta{font-size:12px}.tag{font-size:11px}
 .acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(38px,1fr));gap:6px}
 .acts button,.acts a{min-height:40px;padding:0}
 h1{font-size:20px}
 dialog,dialog.wide{width:100%;max-width:100%;margin:auto 0 0;border-radius:24px 24px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));max-height:92dvh}
 .grid-2{grid-template-columns:1fr}
 .urow{align-items:stretch}.urow>span{width:100%}.urow .in{flex:1}
 .result{max-height:38dvh}
 #toast{width:calc(100% - 24px);text-align:center}
}
@media (max-width:340px){.grid{grid-template-columns:1fr}.stats{grid-template-columns:1fr 1fr}}
/* телефон в горизонтальном положении */
@media (max-height:480px) and (orientation:landscape){dialog,dialog.wide{max-height:96dvh}.result{max-height:30dvh}}