/* Пульт роликов: стили по макету B (design/_src/style.css) */
:root{
  --ink:#0f0f14; --ink2:#52525b; --ink3:#8a8a94; --line:#ececf1; --bg:#ffffff; --soft:#f5f5f7; --soft2:#fafafb;
  --page:#f6f6f8;
  --accent:#5855ff; --accent2:#8b5cf6; --accent-soft:#f0f0ff; --accent-ink:#4a42e6;
  --danger:#dc2626; --danger-soft:#fdeceb;
  --r-card:20px; --r-big:28px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.4}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
.h{font-family:Onest,Inter,sans-serif;font-weight:800;letter-spacing:-.035em;line-height:1.02}
.muted{color:var(--ink2)}
.ico{width:20px;height:20px;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;border-radius:999px;font:600 16px Inter, system-ui, sans-serif;border:0;white-space:nowrap;cursor:pointer;text-decoration:none}
.btn-main{color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 10px 28px rgba(88,85,255,.32),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-line{background:#fff;color:var(--ink);border:1.5px solid var(--accent)}
.btn-soft{background:var(--soft);color:var(--ink)}
.btn-sm{height:40px;padding:0 18px;font-size:14px}
.btn:focus-visible,.in:focus-visible,a:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}

.logo{display:flex;align-items:center;gap:10px;font:800 22px Onest, system-ui, sans-serif;letter-spacing:-.03em;text-decoration:none}
.logo i{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center}
.ava{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font:700 14px Inter, system-ui, sans-serif;color:#fff;background:#f59e0b}

/* статусы */
.st{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font:600 13px Inter, system-ui, sans-serif;white-space:nowrap}
.st:before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st-wait{background:#f3f4f6;color:#4b5563}
.st-edit{background:#eef0ff;color:#4a42e6}
.st-check{background:#fff1dc;color:#b45309}
.st-fix{background:#fde7f0;color:#be185d}
.st-ready{background:#e3f7ec;color:#15803d}
.st-plan{background:#f1ebff;color:#6d28d9}
.st-pub{background:#111;color:#fff}
.st-err{background:var(--danger-soft);color:var(--danger)}
.fmt{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;font:600 12px Inter, system-ui, sans-serif;background:var(--soft);color:var(--ink2)}
.fmt.sh{background:#fff0f0;color:#dc2626}
.thumb{position:relative;border-radius:14px;overflow:hidden;background:#ddd}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.78);color:#fff;font:600 12px Inter, system-ui, sans-serif;padding:3px 7px;border-radius:6px}
.bar{height:6px;border-radius:9px;background:#e7e7f3;overflow:hidden}
.bar b{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:9px}

/* вход */
.login{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.login-hero{position:relative;margin:20px;border-radius:32px;background:radial-gradient(120% 100% at 20% 0%,#7c78ff,#5855ff 45%,#4a42e6);color:#fff;padding:56px;overflow:hidden}
.login-hero .logo i{background:rgba(255,255,255,.2)}
.login-hero h1{font-size:60px;margin-top:70px;max-width:560px}
.login-hero ul{list-style:none;margin-top:30px;display:flex;flex-direction:column;gap:14px}
.login-hero li{font:600 19px Inter, system-ui, sans-serif;display:flex;align-items:center;gap:12px;color:rgba(255,255,255,.95)}
.login-hero li span{width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:20px}
.login-hero img{position:absolute;right:30px;bottom:-30px;width:330px}
.login-hero .glow{position:absolute;right:-80px;bottom:-120px;width:520px;height:520px;border-radius:50%;background:radial-gradient(rgba(255,255,255,.22),transparent 65%)}
.login-side{display:grid;place-items:center;padding:24px 16px}
.login-form{width:100%;max-width:440px}
.login-form h2{font-size:44px;margin-bottom:10px}
.login-form .sub{color:var(--ink2);font-size:17px;margin-bottom:34px}
.lb{font:600 14.5px Inter, system-ui, sans-serif;margin-bottom:8px;display:block}
.in{width:100%;height:58px;border:1.5px solid var(--line);border-radius:16px;padding:0 18px;font-size:16.5px;margin-bottom:20px;background:#fff;outline:none}
.in:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.pw{position:relative}
.pw .eye{position:absolute;right:12px;top:14px;border:0;background:none;color:var(--ink3);cursor:pointer;padding:2px}
.login-form .btn{width:100%;height:60px;font-size:18px;margin-top:8px}
.hlp{margin-top:26px;text-align:center;color:var(--ink3);font-size:14.5px}
.err{background:var(--danger-soft);color:var(--danger);border-radius:14px;padding:12px 16px;margin-bottom:20px;font-weight:600}
@media (max-width:900px){
  .login{grid-template-columns:1fr}
  .login-hero{margin:12px;padding:28px;min-height:auto}
  .login-hero h1{font-size:34px;margin-top:28px}
  .login-hero ul,.login-hero img,.login-hero .glow{display:none}
  .login-form h2{font-size:34px}
}
.pw-form{max-width:440px;padding:24px}
.ok{background:#e3f7ec;color:#15803d;border-radius:14px;padding:12px 16px;margin-bottom:20px;font-weight:600}
.inline-form{display:inline-block;margin-left:12px}