/* Страницы вне основного приложения: вход и настройки. Токены — из дизайна CRM. */
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#F3F5F4}
body{font-family:'Golos Text',system-ui,sans-serif;color:#182123;font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased}
button,input,select{font-family:inherit;font-size:14px;transition:background-color .16s ease,border-color .16s ease,color .16s ease,opacity .16s ease}
h1,h2{margin:0;font-weight:600}
[hidden]{display:none !important}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border:1px solid #D0D8D5;border-radius:8px;background:#fff;color:#182123;font-weight:500;cursor:pointer;white-space:nowrap}
.btn:hover{background:#F1F4F3}
.btn:disabled{opacity:.6;cursor:default}
.btn-primary{border-color:#287D40;background:#287D40;color:#fff}
.btn-primary:hover{background:#216B36}
.btn-wide{width:100%;height:40px}
.btn-small{height:30px;padding:0 10px;font-size:13px}

.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field>span{font-size:12px;color:#5C686B}
.field input,.field select{width:100%;height:38px;padding:0 10px;border:1px solid #D0D8D5;border-radius:8px;background:#fff;color:#182123;outline:none}
.field input:focus,.field select:focus{border-color:#287D40}
.form-error{padding:8px 10px;border-radius:8px;background:#FBECEA;color:#A8382B;font-size:13px}
.form-ok{padding:8px 10px;border-radius:8px;background:#E7F3EA;color:#1E6634;font-size:13px}

.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px}
.login-card{width:100%;max-width:380px;padding:28px;border-radius:14px;background:#fff;animation:msPop .24s cubic-bezier(.2,.8,.2,1)}
.login-brand{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.login-card h1{margin:22px 0 16px;font-size:20px}
.login-card form{display:flex;flex-direction:column;gap:12px}
.login-card .btn-wide{margin-top:4px}
.login-hint{margin:16px 0 0;font-size:12.5px;color:#5C686B;text-align:center}

.set-head{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;height:60px;padding:0 24px;background:#fff;border-bottom:1px solid #E3E8E6}
.set-brand{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:700}
.set-title{flex:1;min-width:0;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-back{color:#182123;text-decoration:none}
.set-main{max-width:1040px;margin:0 auto;padding:20px 24px 48px;display:flex;flex-direction:column;gap:16px;animation:msIn .28s ease}
.tabs{display:inline-flex;align-self:flex-start;flex-wrap:wrap;padding:3px;gap:2px;background:#EBEFED;border-radius:9px}
.tabs button{height:30px;padding:0 12px;border:none;border-radius:7px;background:transparent;color:#5C686B;font-size:13px;font-weight:500;cursor:pointer}
.tabs button[aria-selected="true"]{background:#fff;color:#182123}
.card{padding:18px;border-radius:12px;background:#fff}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.card-head h2{font-size:15px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{padding:8px 10px;background:#FAFBFA;color:#5C686B;font-size:12px;font-weight:400;text-align:left;white-space:nowrap}
td{padding:9px 10px;border-top:1px solid #EEF1F0;vertical-align:middle}
td.actions{text-align:right;white-space:nowrap}
.muted{color:#5C686B}
.pill{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;background:#E7F3EA;color:#1E6634;font-size:12px;font-weight:500}
.pill.off{background:#EEF1F0;color:#4A5659}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.form-actions{display:flex;gap:8px;margin-top:14px}
.stack{display:flex;flex-direction:column;gap:12px;max-width:380px}
.plan-grid{display:grid;grid-template-columns:110px minmax(120px,1fr) minmax(120px,1fr);gap:8px 12px;align-items:center;max-width:560px}
.plan-grid .head{font-size:12px;color:#5C686B}
.plan-grid input{width:100%;height:34px;padding:0 10px;border:1px solid #D0D8D5;border-radius:8px;outline:none;text-align:right}
.plan-grid input:focus{border-color:#287D40}
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(24,33,35,.42);animation:msFade .18s ease}
.modal{width:100%;max-width:560px;max-height:calc(100vh - 32px);overflow-y:auto;padding:20px;border-radius:14px;background:#fff;animation:msPop .24s cubic-bezier(.2,.8,.2,1)}
.modal h2{margin-bottom:14px;font-size:16px}
.modal .form-error{margin-top:12px}
.toast{position:fixed;left:50%;bottom:24px;z-index:40;padding:10px 16px;border-radius:10px;background:#182123;color:#fff;font-size:13.5px;transform:translateX(-50%);animation:msRiseC .2s ease}

@keyframes msFade{from{opacity:0}to{opacity:1}}
@keyframes msPop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes msIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes msRiseC{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important}}
@media (max-width:640px){.set-head{padding:0 16px}.set-main{padding:16px}.set-brand span{display:none}}