/* Журнал курса Миры: спокойный тёмный кабинет, крупные клетки — журнал
   открывают с телефона в аудитории. */
:root{
  --bg:#0f1116; --panel:#171a22; --panel-2:#1f2330; --line:#2b3040;
  --text:#eceff4; --dim:#98a0b3; --accent:#8bc7ff; --ok:#7bd88f;
  --warn:#e6b45c; --bad:#f2788c; --radius:12px;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--text); font:16px/1.5 "Segoe UI",system-ui,sans-serif; -webkit-text-size-adjust:100%}
h1,h2,h3{margin:0; font-weight:600}
h2{font-size:18px; margin-bottom:10px}
p{margin:0}
a{color:var(--accent)}
code{background:var(--panel-2); border:1px solid var(--line); border-radius:5px; padding:1px 7px; font-family:"Cascadia Mono",Consolas,ui-monospace,monospace; font-size:14px; letter-spacing:.08em}
button{background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:8px 14px; cursor:pointer; font:inherit; font-size:15px; touch-action:manipulation}
button:hover{border-color:var(--accent)}
button:disabled{opacity:.45; cursor:default}
button.primary{background:var(--accent); color:#0b1220; border-color:var(--accent); font-weight:600}
button.danger{border-color:rgba(242,120,140,.5); color:var(--bad)}
button.ghost{background:transparent; border-color:transparent; color:var(--dim); padding:4px 8px; font-size:14px}
button.ghost:hover{color:var(--text)}
button.mini{padding:3px 9px; font-size:13px}
input,select,textarea{background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:9px; padding:8px 11px; font:inherit; font-size:15px; min-width:0}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:none; border-color:var(--accent)}
.hidden{display:none !important}
.muted{color:var(--dim)}
.small{font-size:13px}
.ok{color:var(--ok)}
.warn{color:var(--warn)}
.top{display:flex; justify-content:space-between; align-items:center; padding:12px 20px; border-bottom:1px solid var(--line); gap:12px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:10px}
.brand .logo{width:36px; height:36px; border-radius:10px; background:var(--accent); color:#0b1220; display:grid; place-items:center; font-weight:700; font-size:20px}
.brand .sub{display:block; font-size:12px; color:var(--dim)}
.who{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--dim)}
main{max-width:1180px; margin:0 auto; padding:18px 20px 60px; display:grid; gap:16px}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px}
.head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap}
.row{display:flex; gap:8px; margin-top:10px; align-items:center}
.row.wrap{flex-wrap:wrap}
.row input{flex:1 1 140px}
.row select{flex:0 1 auto}
.pill{font-size:12px; padding:2px 9px; border-radius:20px; border:1px solid var(--accent); color:var(--accent); text-transform:uppercase; letter-spacing:.05em}
.cur-title{font-size:18px; display:flex; gap:8px; align-items:center}
.cur-meta{color:var(--dim); margin:6px 0 10px}
.cur-meta b{color:var(--text); font-size:18px}
.recent{margin-top:10px; font-size:14px; color:var(--dim); display:grid; gap:2px}
.recent b{color:var(--text)}
.table-wrap{overflow-x:auto; margin-top:8px}
table{border-collapse:collapse; width:100%; font-size:14px}
th,td{padding:7px 9px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap}
th{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); font-weight:500}
table.att th.s{writing-mode:vertical-rl; transform:rotate(180deg); text-align:left; max-height:140px; padding:8px 4px; white-space:normal; line-height:1.15; font-size:11px}
table.att th.s.open{color:var(--ok)}
table.att td.c{text-align:center; cursor:pointer; user-select:none; width:34px}
table.att td.c:hover{background:var(--panel-2)}
table.att td.c.y{color:var(--ok); font-weight:700}
table.att td.c.n{color:#3a4050}
table.att td.tot,table.att th.tot{text-align:right; color:var(--dim)}
table.att td.name{position:sticky; left:0; background:var(--panel); font-weight:500}
.work{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-top:10px; background:var(--panel-2)}
.work .w-head{display:flex; justify-content:space-between; gap:10px; align-items:baseline; flex-wrap:wrap}
.work .w-title{font-weight:600; font-size:16px}
.work .w-title .st{font-size:12px; font-weight:400; margin-left:8px; color:var(--dim)}
.work .w-title .st.acc{color:var(--ok)}
.work .subs{margin-top:8px; display:grid; gap:4px; font-size:14px}
.work .sub{display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:4px 0; border-top:1px solid var(--line)}
.work .sub .n{font-weight:500; min-width:160px}
.work .sub .t{color:var(--dim); flex:1 1 200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:420px}
.work .sub .g{color:var(--warn); font-weight:600}
.work .sub input{width:70px; padding:3px 7px; font-size:13px}
.work .missing{color:var(--dim); font-size:13px; margin-top:6px}
table.list td.edit{cursor:text}
table.list td.edit:hover{background:var(--panel-2)}
.me h2{font-size:24px}
.open-box{margin-top:12px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:12px; border:1px solid var(--ok); border-radius:10px}
.me-list{display:grid; gap:4px; font-size:15px}
.me-list .i{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
.me-list .i .d{color:var(--dim); font-size:13px}
.me-list form{display:flex; gap:6px; width:100%; margin-top:4px}
.me-list form input{flex:1}
.modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:grid; place-items:center; z-index:10; padding:16px}
.modal-box{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:grid; gap:10px; justify-items:center; max-width:360px}
.modal-box img{width:280px; height:280px; background:#fff; border-radius:8px; padding:8px}
.modal-box .small{word-break:break-all; text-align:center}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:10px 16px; z-index:20; font-size:14px}
.toast.bad{border-color:var(--bad); color:var(--bad)}
@media (max-width:820px){
  .grid-2{grid-template-columns:1fr}
  main{padding:12px 12px 50px}
  .panel{padding:14px}
  .row input{flex-basis:100%}
  .row.wrap select{flex:1 1 45%}
}

/* ——— чат с Мирой ——— */
.fab{position:fixed; right:20px; bottom:20px; z-index:15; background:var(--accent); color:#0b1220; border-color:var(--accent); font-weight:600; border-radius:24px; padding:10px 18px; box-shadow:0 6px 24px rgba(0,0,0,.4)}
.chat{position:fixed; right:20px; bottom:20px; width:min(420px,calc(100vw - 24px)); height:min(600px,calc(100vh - 40px)); z-index:16; background:var(--panel); border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.5)}
.chat-head{display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--line)}
.chat-head .small{flex:1}
.chat-log{flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; font-size:15px}
.msg{max-width:88%; padding:8px 12px; border-radius:12px; line-height:1.45; white-space:pre-wrap; word-break:break-word}
.msg.user{align-self:flex-end; background:var(--accent); color:#0b1220; border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start; background:var(--panel-2); border-bottom-left-radius:4px}
.msg.bot code{font-size:13px}
.msg.think{color:var(--dim); font-style:italic}
.chat-form{display:flex; gap:6px; padding:10px; border-top:1px solid var(--line)}
.chat-form input{flex:1}
@media (max-width:600px){ .chat{right:6px; bottom:6px; height:calc(100vh - 12px)} .fab{right:12px; bottom:12px} }

/* ——— содержание дисциплины ——— */
.syl-body{margin-top:8px}
.syl-body details{border-top:1px solid var(--line); padding:8px 0}
.syl-body summary{cursor:pointer; font-weight:600; list-style:none; display:flex; gap:8px; align-items:baseline}
.syl-body summary::before{content:"›"; color:var(--accent); font-size:18px; line-height:1}
.syl-body details[open] summary::before{transform:rotate(90deg)}
.syl-body p{margin:8px 0 0 18px; color:var(--dim); font-size:15px; line-height:1.55; max-width:72ch}

/* ——— тесты ——— */
.timer{font-variant-numeric:tabular-nums; font-weight:700; font-size:22px; color:var(--ok)}
.timer.low{color:var(--bad)}
.questions{display:grid; gap:14px; margin-top:10px}
.qn{border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--panel-2)}
.qn .qt{font-weight:600; margin-bottom:8px}
.qn .qt small{color:var(--dim); font-weight:400; margin-right:6px}
.qn label{display:flex; gap:10px; align-items:flex-start; padding:6px 8px; border-radius:8px; cursor:pointer}
.qn label:hover{background:var(--panel)}
.qn input{margin-top:4px}
.qn.ok{border-color:var(--ok)} .qn.bad{border-color:var(--bad)}
.qn label.right{color:var(--ok)} .qn label.wrong{color:var(--bad)}
.result{margin-top:12px; font-size:18px}
.result b{font-size:26px}