/* «Налаштування» — не таблиця+панель: вкладки .views (styles.css) зверху, нижче
   прокручуваний стовпець карток max-width ~760px (960px на «Команді» — там таблиця
   з колонкою дій). Токени/класи з styles.css скрізь, де можливо; тут — лише
   композиція та власні класи з префіксом .settings-. */

.settings-scroll{flex:1;min-height:0;overflow:auto;background:var(--bg)}
.settings-wrap{max-width:760px;margin:0 auto;padding:24px 20px 64px;display:flex;flex-direction:column;gap:16px}
.settings-wrap.wide{max-width:960px}

.settings-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px}
.settings-card h3{margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--ink)}
.settings-hint{margin:8px 0 0;font-size:11.5px;color:var(--faint);line-height:1.5;max-width:520px}
.settings-note{margin:10px 0 0;font-size:12px;color:var(--muted)}
.settings-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.settings-field{width:140px}

/* segmented control — мова / тема */
.settings-seg{display:inline-flex;border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden}
.settings-seg button{height:30px;padding:0 16px;border:0;border-right:1px solid var(--line-2);background:transparent;color:var(--muted);font-size:12.5px;font-weight:500}
.settings-seg button:last-child{border-right:0}
.settings-seg button:hover:not(:disabled){background:var(--panel-3);color:var(--ink)}
.settings-seg button.on{background:var(--accent);color:var(--on-accent)}
.settings-seg button:disabled{cursor:default}
.settings-seg button:disabled:not(.on){opacity:.5}
.settings-seg button.on:disabled{opacity:.7}

/* profile row */
.settings-profile{display:flex;align-items:center;gap:12px}
.settings-profile .who{min-width:0}
.settings-profile .who b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
.settings-profile .who span{font-size:11.5px;color:var(--muted)}
.settings-profile .btn{margin-left:auto;flex:none}

/* tables reuse the global table/thead/tbody rules from styles.css; only layout tweaks here */
.settings-table-wrap{overflow-x:auto}
.settings-table-wrap table{table-layout:auto}
.settings-table-wrap tbody tr{cursor:default}
.settings-actions{white-space:nowrap}
.settings-actions .btn{margin-right:6px}
.settings-actions .btn:last-child{margin-right:0}
.settings-mark{text-align:center;width:100px}
.settings-mark .i{color:var(--lime-ink)}
.settings-grp td{height:26px;padding:0 8px;background:var(--panel-2);color:var(--faint);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:600}