/* liza.speaks.english — Кабинет: общие стили для login / student / teacher */
:root{
  --navy:#192c3a;
  --navy-soft:rgba(25,44,58,.08);
  --cream:#f5f3ec;
  --paper:#fbfaf6;
  --wine:#793d45;
  --wine-dark:#5c2e35;
  --wine-tint:rgba(121,61,69,.1);
  --ice:#dfe8e9;
  --taupe:#b9afa2;
  --ink:#262829;
  --muted:#5a6570;
  --line:#dad6cb;
  --ok:#3f7a55;
  --ok-tint:#e7f2ea;
  --warn:#9a6a2b;
  --warn-tint:#f5ecdd;
  --todo:#7c8894;
  --todo-tint:#eceeef;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--navy);
  font:16px/1.6 'Montserrat Alternates',Arial,sans-serif;-webkit-font-smoothing:antialiased;
}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--wine);outline-offset:3px;border-radius:2px;
}
.mono{font-family:'Space Mono',ui-monospace,monospace}
img{max-width:100%}

.shell{max-width:1160px;margin:0 auto;padding:0 6% 80px}

/* top bar */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 6%;border-bottom:1px solid var(--line);background:rgba(245,243,236,.9);
  position:sticky;top:0;z-index:30;backdrop-filter:blur(8px);
}
.brand{text-decoration:none;font-weight:700;font-size:17px;letter-spacing:-.4px;display:flex;align-items:center;gap:8px;color:var(--navy)}
.brand .dot{width:8px;height:8px;border-radius:50%;background:var(--wine);display:inline-block}
.topbar-right{display:flex;align-items:center;gap:16px}
.who{font-size:13.5px;color:var(--muted)}
.who b{color:var(--navy)}
.btn-ghost{
  border:1.5px solid var(--navy);border-radius:99px;padding:8px 16px;font-size:13px;font-weight:600;
  background:none;cursor:pointer;text-decoration:none;color:var(--navy);transition:background .2s,color .2s;
  font-family:inherit;
}
.btn-ghost:hover{background:var(--navy);color:var(--cream)}
.btn-primary{
  border:none;border-radius:99px;padding:11px 22px;font-size:14px;font-weight:700;
  background:var(--wine);color:#fff;cursor:pointer;font-family:inherit;transition:background .2s,transform .2s;
}
.btn-primary:hover{background:var(--wine-dark);transform:translateY(-1px)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-secondary{
  border:1.5px solid var(--line);border-radius:99px;padding:10px 20px;font-size:13.5px;font-weight:600;
  background:#fff;color:var(--navy);cursor:pointer;font-family:inherit;transition:border-color .2s,transform .2s;
}
.btn-secondary:hover{border-color:var(--navy);transform:translateY(-1px)}

/* demo banner */
.demo-banner{
  display:flex;align-items:flex-start;gap:12px;background:var(--warn-tint);
  border:1px solid #e7cf9e;color:#6b4a17;padding:14px 6%;font-size:13.5px;line-height:1.55;
}
.demo-banner strong{display:block;font-size:13.5px;margin-bottom:2px}
.demo-banner svg{flex:none;margin-top:2px}
.demo-banner .txt{max-width:820px}
.live-banner{
  display:flex;align-items:flex-start;gap:12px;background:var(--ok-tint);
  border:1px solid #bcdcc6;color:#2b5b3c;padding:14px 6%;font-size:13.5px;line-height:1.55;
}
.live-banner svg{flex:none;margin-top:2px}

.page-head{padding:44px 0 30px}
.eyebrow{
  text-transform:uppercase;font-size:11.5px;letter-spacing:2.2px;font-weight:700;color:var(--wine);
  margin:0 0 10px;display:flex;align-items:center;gap:8px;
}
h1.page-title{font-size:clamp(26px,3.4vw,38px);font-weight:500;letter-spacing:-1.2px;margin:0 0 8px}
.page-sub{color:var(--muted);font-size:14.5px;margin:0;max-width:60ch}

/* tabs */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 22px}
.tab{
  border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:8px 16px;font-size:13px;
  font-weight:600;cursor:pointer;font-family:inherit;color:var(--muted);transition:all .18s;
}
.tab.active{border-color:var(--navy);background:var(--navy);color:var(--cream)}
.tab:hover:not(.active){border-color:var(--taupe)}

/* status badges */
.badge{
  display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:5px 12px;
  font-size:12px;font-weight:700;letter-spacing:.2px;white-space:nowrap;
}
.badge i{width:6px;height:6px;border-radius:50%;display:inline-block}
.badge.todo{background:var(--todo-tint);color:var(--todo)}
.badge.todo i{background:var(--todo)}
.badge.progress{background:var(--warn-tint);color:var(--warn)}
.badge.progress i{background:var(--warn)}
.badge.done{background:var(--ok-tint);color:var(--ok)}
.badge.done i{background:var(--ok)}

/* assignment list */
.list{display:flex;flex-direction:column;gap:12px}
.item{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:18px 22px;
  cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;text-align:left;
  width:100%;font-family:inherit;
}
.item:hover{transform:translateY(-2px);box-shadow:0 16px 32px -24px rgba(25,44,58,.4);border-color:var(--taupe)}
.item-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.item-title{font-size:15.5px;font-weight:600;letter-spacing:-.2px}
.item-meta{font-size:12.5px;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap}
.item-right{display:flex;align-items:center;gap:14px;flex:none}
.score-pill{font-size:12.5px;font-weight:700;color:var(--navy);background:var(--ice);padding:5px 11px;border-radius:99px}
.empty{padding:50px 20px;text-align:center;color:var(--muted);font-size:14px;background:var(--paper);border:1px dashed var(--line);border-radius:12px}

/* card / panel */
.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:30px 32px;margin-bottom:22px}
.panel h2{font-size:19px;font-weight:600;letter-spacing:-.4px;margin:0 0 6px}
.panel .hint{color:var(--muted);font-size:13.5px;margin:0 0 22px}

/* questions */
.q-block{border-top:1px solid var(--line);padding:24px 0}
.q-block:first-of-type{border-top:none;padding-top:6px}
.q-num{font-size:12px;font-weight:700;color:var(--wine);letter-spacing:.5px;margin-bottom:8px;display:block}
.q-prompt{font-size:16px;font-weight:600;margin:0 0 16px;letter-spacing:-.2px}
.choice{
  display:flex;align-items:center;gap:12px;padding:12px 16px;border:1.5px solid var(--line);
  border-radius:9px;margin-bottom:9px;cursor:pointer;transition:border-color .18s,background .18s;font-size:14.5px;
}
.choice:hover{border-color:var(--taupe)}
.choice input{accent-color:var(--wine);width:17px;height:17px;flex:none}
.choice.correct{border-color:var(--ok);background:var(--ok-tint)}
.choice.incorrect{border-color:#b23b3b;background:#fbe9e9}
textarea,input[type=text],input[type=email],input[type=password]{
  width:100%;border:1.5px solid var(--line);border-radius:9px;padding:12px 14px;font:inherit;
  font-family:'Montserrat Alternates',Arial,sans-serif;color:var(--navy);background:#fff;resize:vertical;
}
textarea:focus,input:focus{border-color:var(--wine)}
label.field-label{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:7px;letter-spacing:.3px;text-transform:uppercase}
.feedback{margin-top:10px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.feedback.ok{color:var(--ok)}
.feedback.no{color:#b23b3b}
.feedback.pending{color:var(--warn)}

.comment-box{
  margin-top:14px;background:var(--ice);border-radius:9px;padding:14px 16px;font-size:13.5px;line-height:1.6;
}
.comment-box b{display:block;margin-bottom:4px;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--navy)}

/* login */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 6%;
  background:radial-gradient(ellipse 800px 500px at 85% -10%, var(--ice) 0%, transparent 60%), var(--cream);
}
.login-card{max-width:480px;width:100%}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:26px 0}
.role-card{
  border:1.5px solid var(--line);border-radius:12px;padding:22px 18px;background:#fff;cursor:pointer;
  text-align:left;font-family:inherit;transition:border-color .2s,transform .2s,box-shadow .2s;
}
.role-card:hover{border-color:var(--wine);transform:translateY(-3px);box-shadow:0 18px 34px -24px rgba(25,44,58,.4)}
.role-card b{display:block;font-size:15px;margin-bottom:6px}
.role-card p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.role-card svg{margin-bottom:12px}

/* teacher: student picker + composer */
.two-col{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:start}
.student-list{display:flex;flex-direction:column;gap:8px}
.student-pill{
  display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:9px;
  border:1.5px solid var(--line);background:#fff;cursor:pointer;font-family:inherit;font-size:13.5px;text-align:left;
  width:100%;transition:border-color .18s,background .18s;
}
.student-pill.active{border-color:var(--navy);background:var(--navy);color:var(--cream)}
.student-pill .count{font-size:11.5px;font-weight:700;background:var(--ice);color:var(--navy);border-radius:99px;padding:2px 8px}
.student-pill.active .count{background:rgba(245,243,236,.2);color:var(--cream)}
.qa-row{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.qa-row select,.qa-row input{flex:1}
.opt-row{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.opt-row input{flex:1}
.remove-x{
  background:none;border:none;color:var(--muted);cursor:pointer;font-size:18px;line-height:1;padding:4px 8px;
}
.remove-x:hover{color:#b23b3b}
.add-line{
  background:none;border:1.5px dashed var(--line);border-radius:9px;padding:10px 14px;font-size:13px;
  font-weight:600;color:var(--muted);cursor:pointer;font-family:inherit;width:100%;text-align:center;
  transition:border-color .2s,color .2s;
}
.add-line:hover{border-color:var(--wine);color:var(--wine)}

@media(max-width:820px){
  .two-col{grid-template-columns:1fr}
  .panel{padding:22px 20px}
  .role-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .topbar{padding:16px 6%}
  .who{display:none}
  .item{flex-direction:column;align-items:flex-start;gap:10px}
  .item-right{width:100%;justify-content:space-between}
}

#manage-form label{display:block;margin:12px 0 6px}#manage-form select{width:100%;padding:10px;font:inherit}#manage-form input[type=checkbox]{width:auto}

/* Shared form sizing also applies to dynamically added fields. */
html{-webkit-text-size-adjust:100%}
.two-col{grid-template-columns:minmax(0,280px) minmax(0,1fr)}
.two-col>*,.topbar>*,.topbar-right,.panel,.q-block,.qa-row>*{min-width:0}
input:not([type=radio]):not([type=checkbox]),select,textarea{box-sizing:border-box;width:100%;max-width:100%;min-width:0;font:inherit;font-size:16px;border:1.5px solid var(--line);border-radius:9px;padding:12px;color:var(--navy);background:white}
input[type=file]{font-size:14px;overflow:hidden}
button{max-width:100%;white-space:normal;overflow-wrap:anywhere;min-height:44px}
input[type=radio],input[type=checkbox]{flex:0 0 18px;width:18px;height:18px}
.opt-row input[type=radio]{flex:0 0 18px}
.item-title,.q-prompt,.comment-box,.student-pill,.panel p,.who{overflow-wrap:anywhere}
.live-banner strong{display:block;margin-bottom:4px}
#import-preview{overflow-wrap:anywhere}#import-destination label{display:block;margin-top:16px}
#manage-form{padding:18px}#manage-toggle{width:100%}
@media(max-width:820px){.two-col{grid-template-columns:minmax(0,1fr)}}
@media(max-width:600px){
 .shell{padding:0 16px 44px}.topbar{position:relative;padding:16px;flex-wrap:wrap;gap:12px}.topbar .brand{font-size:16px}.brand .dot{flex:none}
 .topbar-right{margin-left:auto}.btn-ghost{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px}
 .live-banner,.demo-banner{padding:12px 16px;font-size:13px}.page-head{padding:28px 0 18px}
 .page-title{line-height:1.25}.page-sub{font-size:15px}.panel{padding:20px 16px;border-radius:12px}
 .panel h2{font-size:20px;overflow-wrap:anywhere}.panel>div[style*="display:flex"],.q-block div[style*="display:flex"]{flex-wrap:wrap}
 .panel h2+.badge{margin-top:4px}.tabs{gap:8px;margin:18px 0}.tab{flex:1 1 120px;font-size:14px;padding:10px 12px}
 .item{padding:16px}.item-title{font-size:16px}.item-right{flex-wrap:wrap}.badge{white-space:normal}
 .qa-row{flex-wrap:wrap}.qa-row select{flex:1 1 160px}.choice{padding:13px 12px;font-size:16px;align-items:flex-start;overflow-wrap:anywhere}
 .choice input{margin-top:4px}.q-prompt{line-height:1.6}.comment-box{font-size:15px}
 .login-wrap{min-height:0;align-items:flex-start;padding:32px 20px 50px}.login-card{min-width:0}
 #manage-form label{font-size:15px}#manage-form .hint{font-size:14px}.empty{padding:28px 16px}
 #import-save,#import-check,#save-assignment{width:100%;margin-top:12px}
}
.person-avatar{display:inline-flex;width:44px;height:44px;min-width:44px;align-items:center;justify-content:center;border-radius:50%;overflow:hidden;background:#dce8eb;font-size:28px;text-decoration:none}.person-avatar img{width:100%;height:100%;object-fit:cover}.work-controls{border-top:1px solid #ddd6c8;margin-top:20px;padding-top:18px}.work-controls select,.work-controls textarea{display:block;width:100%;max-width:600px;margin:10px 0;padding:12px;font:inherit;border:1px solid #ddd6c8;border-radius:12px}.work-controls button{margin:6px}