/* палитра и типографика — как у вьюера полиграмм */
:root{
  --bg:#eef1f6; --panel:#ffffff; --panel2:#f5f7fb; --line:#d5dbe6;
  /* --mut затемнён до #5f6b7d: серый на панели #f5f7fb теперь 5.04:1 (>=4.5) */
  --ink:#1b2330; --mut:#5f6b7d; --acc:#2563eb; --err:#b91c1c; --ok:#047857;
  /* тени: «высота над листом» — карточки чуть приподняты, всплывающее парит */
  --shadow-card:0 1px 2px rgba(27,35,48,.04),0 3px 12px rgba(27,35,48,.05);
  --shadow-float:0 10px 30px rgba(20,30,50,.18);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);
  font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
header{display:flex;align-items:baseline;gap:16px;padding:10px 20px;
  background:var(--panel);border-bottom:1px solid var(--line)}
header h1{font-size:16px;margin:0;font-weight:700}
header .sub{color:var(--mut);font-size:12px}
header nav{margin-left:auto;display:flex;align-items:baseline;gap:16px}
header nav a{color:var(--ink);text-decoration:none;font-weight:600}
header nav a:hover{color:var(--acc)}
form.inline{display:inline;margin:0}
button.linklike{background:none;border:0;padding:0;color:var(--mut);cursor:pointer;
  font:inherit;font-weight:600}
button.linklike:hover{color:var(--acc)}
main{max-width:880px;margin:28px auto;padding:0 20px}
main.narrow{max-width:430px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  padding:20px;margin-bottom:16px;box-shadow:var(--shadow-card)}
/* card h2 — основной заголовок страницы: заметно крупнее тела (19 vs 14 ≈ 1.36),
   и крупнее бренд-марки в шапке (16), чтобы у страницы был явный фокус */
.card h2{margin:0 0 16px;font-size:19px;letter-spacing:-.01em}
label{display:block;margin:12px 0 4px;color:var(--mut);font-size:12px;font-weight:600}
input[type=text],input[type=email],input[type=password],textarea,select{
  width:100%;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:7px;padding:8px 10px;font:inherit}
input:focus,textarea:focus{outline:2px solid #bfd3f7;border-color:var(--acc)}
button.primary{margin-top:16px;background:var(--acc);color:#fff;border:0;border-radius:7px;
  padding:9px 18px;font:inherit;font-weight:600;cursor:pointer}
button.primary:hover{background:#1d4fc4}
button.primary:disabled{background:#9db4e0;cursor:default}
button.ghost{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:7px;
  padding:8px 14px;font:inherit;cursor:pointer}
button.ghost:hover{border-color:var(--acc);color:var(--acc)}
button.danger:hover{border-color:var(--err);color:var(--err)}
/* алерты — контейнерный радиус 10 (как карточки), единый bottom-ритм 16 */
.error{background:#fdecec;border:1px solid #f3c1c1;color:var(--err);border-radius:10px;
  padding:10px 12px;margin-bottom:16px;font-size:13px}
.success{background:#e8f7f0;border:1px solid #bfe6d5;color:var(--ok);border-radius:10px;
  padding:10px 12px;margin-bottom:16px;font-size:13px}
.info{background:#eef3fb;border:1px solid #cfe0f4;color:#2f5da8;border-radius:10px;
  padding:10px 12px;margin-bottom:16px;font-size:13px}

/* прогресс загрузки */
.uprog{margin-bottom:16px}
.uprog-label{font-size:13px;color:var(--acc);margin-bottom:6px}
.uprog-track{height:8px;border-radius:999px;background:#e6edf6;overflow:hidden}
.uprog-fill{height:100%;width:0;border-radius:999px;background:var(--acc);
  transition:width .25s ease;
  background-image:linear-gradient(90deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.45) 50%,rgba(255,255,255,0) 80%);
  background-size:34px 100%;animation:up-shimmer .9s linear infinite}
@keyframes up-shimmer{to{background-position:34px 0}}

/* появление и удаление карточки */
.pcard.appear{animation:card-in .28s ease both}
@keyframes card-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pcard.removing{animation:card-out .32s ease forwards;overflow:hidden;pointer-events:none}
@keyframes card-out{
  from{opacity:1;transform:none;max-height:360px}
  to{opacity:0;transform:translateX(28px);max-height:0;
     margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}
}

/* плавный уход страницы при открытии полиграммы */
body{transition:opacity .17s ease}
body.leaving{opacity:0}

@media (prefers-reduced-motion:reduce){
  .uprog-fill{animation:none}
  .pcard.appear,.pcard.removing{animation:none}
  body{transition:none}
}

.mut{color:var(--mut)} .small{font-size:12px}
a{color:var(--acc)}
.formfoot{margin-top:16px;font-size:13px;color:var(--mut)}

.captcha-row{display:flex;gap:12px;align-items:center;margin-top:4px}
.captcha-row img{border:1px solid var(--line);border-radius:7px;height:56px}
.captcha-row input{width:130px}

/* recovery-ключ */
.rkey{font:600 20px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1px;
  background:var(--panel2);border:1px dashed var(--acc);border-radius:10px;
  padding:16px;text-align:center;margin:16px 0;user-select:all}
.warn{background:#fdf3da;border:1px solid #ecd9a0;border-radius:10px;padding:10px 12px;
  font-size:13px;margin-bottom:16px}
.checkline{display:flex;gap:8px;align-items:flex-start;margin-top:12px;font-size:13px;
  color:var(--ink)}
.checkline input{margin-top:2px;accent-color:var(--acc)}

/* список файлов */
.upload-zone{border:2px dashed var(--line);border-radius:10px;padding:26px;text-align:center;
  color:var(--mut);background:var(--panel);cursor:pointer;transition:border-color .15s}
.upload-zone:hover,.upload-zone.drag{border-color:var(--acc);color:var(--acc)}
.upload-zone input{display:none}
#upstatus{margin:10px 0}
.fmt{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;padding:2px 7px;border-radius:5px;background:var(--panel2);
  border:1px solid var(--line);color:var(--mut)}
.title-link{font-weight:600;color:var(--ink);text-decoration:none}
.title-link:hover{color:var(--acc)}
.badge{display:inline-block;min-width:18px;text-align:center;font-size:10.5px;font-weight:700;
  background:#ede4f6;color:#7e3ba0;border-radius:999px;padding:1px 6px}
.empty{padding:40px 24px;text-align:center;color:var(--mut)}

/* список полиграмм — карточки */
.plist{display:flex;flex-direction:column;gap:12px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow-card);padding:16px 18px;display:flex;gap:18px;align-items:flex-start}
.pmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.phead{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ptitle{font-size:17px;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.ptitle:hover{color:var(--acc)}
.pexam{color:var(--mut);font-size:13px}
.pexam b{color:var(--ink);font-weight:600}
.pmeta{display:flex;flex-wrap:wrap;gap:3px 14px;color:var(--mut);font-size:12.5px;
  font-variant-numeric:tabular-nums;margin-top:1px}
.pmeta b{color:var(--ink);font-weight:600}
.pnote{display:flex;gap:8px;align-items:baseline;font-size:13px;min-width:0;margin-top:3px}
.pnote .lbl{color:var(--mut);flex:none}
.pnote .txt{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pnote .open{flex:none;white-space:nowrap;cursor:pointer}
.pnote.add{color:var(--mut)} .pnote.add .open{color:var(--mut)}
.pnote.add .open:hover{color:var(--acc)}
.pactions{display:flex;flex-direction:column;gap:6px;flex:none;width:118px}
.pactions button{width:100%}
.iconbtn{background:none;border:0;padding:3px 5px;color:var(--mut);cursor:pointer;
  font-size:13px;line-height:1;border-radius:6px}
.iconbtn:hover{color:var(--acc);background:var(--panel2)}
.rename-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.rename-input{font-size:17px;font-weight:600;border:1px solid var(--acc);border-radius:7px;
  padding:3px 8px;width:min(360px,58vw)}
.rename-input:focus{outline:2px solid #bfd3f7}

/* модалка заметки */
dialog.notemodal{border:1px solid var(--line);border-radius:12px;padding:0;max-width:580px;
  width:calc(100vw - 32px);box-shadow:var(--shadow-float);color:var(--ink);background:var(--panel)}
dialog.notemodal::backdrop{background:rgba(20,30,50,.34)}
.notemodal .mhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:15px 18px;border-bottom:1px solid var(--line)}
.notemodal .mhead h3{margin:0;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notemodal .mhead .sub{color:var(--mut);font-size:12px;flex:none}
.notemodal .mbody{padding:16px 18px}
.notemodal textarea{min-height:230px;resize:vertical}
.notemodal .mfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:12px 18px;border-top:1px solid var(--line)}
.notemodal .mfoot .state{font-size:12px;color:var(--mut)}
.notemodal .mfoot .btns{display:flex;gap:8px}

@media (max-width:680px){
  .pcard{flex-direction:column;gap:12px}
  .pactions{width:100%;flex-direction:row;flex-wrap:wrap}
  .pactions button{width:auto;flex:1}
}