/* Кабинет /saas/ — оформление в стиле лендинга (emerald, светлая тема, Montserrat/Inter, 4px). */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root {
  --emerald: #16B364; --emerald-dk: #0E8C4C;
  --ink: #0F172A; --slate: #475569; --line: #E5E9F0;
  --paper: #FFFFFF; --paper-2: #F8FAFC; --radius: 4px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', -apple-system, Segoe UI, Roboto, sans-serif; background: var(--paper-2); color: var(--ink); }
.topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; background: var(--paper); border-bottom: 1px solid var(--line); }
.brand { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 20px; color: var(--emerald); letter-spacing: -.01em; }
.user-box { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.container { max-width: 880px; margin: 28px auto; padding: 0 16px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.auth { max-width: 380px; margin: 60px auto; }
.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tab { flex: 1; padding: 10px; border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius); cursor: pointer; font-weight: 600; font-family: inherit; color: var(--slate); }
.tab.active { background: var(--emerald); color: #fff; border-color: var(--emerald); }
.form { display: flex; flex-direction: column; gap: 12px; }
.form input, .form-inline input, .form-inline select { padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; font-family: inherit; background: var(--paper); color: var(--ink); }
.form input:focus, .form-inline input:focus, .form-inline select:focus { outline: none; border-color: var(--emerald); box-shadow: 0 0 0 3px rgba(22,179,100,.12); }
.btn { padding: 11px 16px; background: var(--emerald); color: #fff; border: none; border-radius: var(--radius); font-weight: 700; font-family: inherit; cursor: pointer; }
.btn:hover { background: var(--emerald-dk); }
.btn-ghost { background: transparent; border: 1px solid var(--line); border-radius: var(--radius); padding: 7px 12px; cursor: pointer; font-family: inherit; color: var(--slate); }
.btn-ghost:hover { border-color: var(--emerald); color: var(--emerald); }
.msg { margin-top: 12px; font-size: 13px; min-height: 18px; }
.msg.error { color: #c0392b; }
.msg.ok { color: var(--emerald-dk); }
.hidden { display: none !important; }
.banner { padding: 14px 18px; border-radius: var(--radius); margin-bottom: 22px; font-weight: 600; }
.banner.trial { background: #FFF6E0; color: #8A6D1A; }
.banner.active { background: #E6F7EE; color: var(--emerald-dk); }
.banner.locked { background: #FDECEA; color: #C0392B; }
.block { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 20px; }
.block h2 { margin: 0 0 14px; font-size: 16px; font-family: 'Montserrat', sans-serif; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: var(--paper-2); border: 1px solid var(--line); border-radius: 20px; padding: 6px 14px; font-size: 13px; }
.chip.on { background: #E6F7EE; color: var(--emerald-dk); border-color: transparent; }
.tariffs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.tariff { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.tariff h3 { margin: 0 0 6px; font-family: 'Montserrat', sans-serif; }
.tariff .price { font-size: 22px; font-weight: 700; margin: 8px 0; font-family: 'Montserrat', sans-serif; color: var(--emerald-dk); }
.tariff ul { padding-left: 18px; margin: 8px 0; font-size: 13px; color: var(--slate); }
.form-inline { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.cabinets { display: flex; flex-direction: column; gap: 8px; }
.cab-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--paper-2); border: 1px solid var(--line); border-radius: var(--radius); font-size: 14px; }