/* v2218ui — one neat mobile size system on top of the existing dark-neon style (colours and brand unchanged).
   Active only under html.ml-ui2 (set by ui2.js when GET /users/{id}/ui-prefs says ui_v2: test bot while UI_V2=test).
   Tokens: primary button 52px / radius 16; secondary 46px / radius 14, outlined; back = compact 40px pill top-left;
   switch 51x31; list rows >= 56px, padding 16px; body 15–16px, captions 13px; touch targets >= 40–44px. */

/* ---------- «Личное пространство» subpages: one frame instead of card-in-card ---------- */
html.ml-ui2 #profile.ml-space-panel-open .hero.ml-space-shell{min-height:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
html.ml-ui2 #profile .ml-live-panel{position:relative;margin-top:2px;padding:0 0 8px;border:0!important;border-radius:0;background:none;box-shadow:none}
html.ml-ui2 #profile .ml-live-panel.ml-ui2-hasback{padding-top:52px}
html.ml-ui2 #profile .ml-live-panel > h2{margin:0 0 8px;font-size:26px;line-height:1.2;letter-spacing:-.01em}
html.ml-ui2 #profile .ml-live-panel .ml-flow{margin-top:0}
html.ml-ui2 #profile .ml-live-panel .ml-flow > p:first-of-type,html.ml-ui2 #profile .ml-live-panel #ml-priv-intro{font-size:15px!important;line-height:1.45!important;margin:0 0 14px!important}

/* ---------- Back: compact pill top-left (Telegram BackButton does the same, see ui2.js) ---------- */
html.ml-ui2 #profile .ml-live-panel .ml-settings-back{position:absolute;top:0;left:0;margin:0;width:auto;display:block}
html.ml-ui2 .ml-settings-back{margin:0 0 12px}
html.ml-ui2 .ml-settings-back .ml-btn.ghost,html.ml-ui2 #ml-space-back-btn{
  display:inline-flex;align-items:center;gap:6px;width:auto;height:40px;min-width:0;padding:0 16px 0 12px;border-radius:999px;
  font-size:15px;font-weight:600;line-height:1;color:#fff;background:rgba(24,24,40,.72);border:1px solid #2A2A3A;box-shadow:none}
html.ml-ui2 .ml-settings-back .ml-btn.ghost:active,html.ml-ui2 #ml-space-back-btn:active{transform:scale(.97)}
html[data-theme="light"].ml-ui2 #profile .ml-settings-back .ml-btn.ghost,html[data-theme="light"].ml-ui2 #ml-space-back-btn{
  color:var(--text);background:rgba(255,255,255,.92);border-color:rgba(24,22,40,.14)}

/* ---------- Buttons ---------- */
html.ml-ui2 .ml-btn{height:52px;border-radius:16px;font-size:16px}
html.ml-ui2 .ml-btn.ghost,html.ml-ui2 .ml-btn.secondary{height:46px;border-radius:14px;font-size:15px}
html.ml-ui2 .ml-flow-actions{gap:10px;margin-top:16px}
html.ml-ui2 .ml-home-btn{min-height:52px;padding:0 18px;border-radius:16px}
html.ml-ui2 .ml-home-btn.ghost{min-height:46px;border-radius:14px;font-size:15px}
html.ml-ui2 .ml-compat-btn.lg,html.ml-ui2 .ml-space-quest .ml-compat-btn.lg{height:52px;border-radius:16px}
html.ml-ui2 .ml-compat-btn.lg.ghost{height:46px;border-radius:14px;font-size:15px}
html.ml-ui2 .ml-card-btn{height:52px;border-radius:16px}
html.ml-ui2 .ml-quest-primary{height:52px;border-radius:16px}
html.ml-ui2 .ml-quest-secondary{height:46px;border-radius:14px;font-size:15px}
html.ml-ui2 .ml-onb-btn,html.ml-ui2 .ml-ob-btn,html.ml-ui2 .ml-kids-btn{height:52px;border-radius:16px}
html.ml-ui2 .mlp20-btn{height:52px}
html.ml-ui2 .mlp20-btn.is-ghost{height:46px}
html.ml-ui2 .ml-option{min-height:56px;padding:12px 16px}

/* ---------- Lists ---------- */
html.ml-ui2 .ml-settings-list{gap:8px;margin-top:2px}
html.ml-ui2 .ml-settings-row{align-items:center;min-height:56px;padding:10px 14px 10px 16px;border-radius:16px}
html.ml-ui2 .ml-settings-row-title{font-size:16px;line-height:1.25;margin:0 0 2px}
html.ml-ui2 .ml-settings-row-meta{font-size:13px;line-height:1.35}
html.ml-ui2 .ml-settings-chevron{margin-top:0;font-size:20px}
html.ml-ui2 .ml-settings-toggle-list{gap:8px;margin-top:0}
html.ml-ui2 .ml-settings-toggle{min-height:56px;padding:8px 12px 8px 16px;border-radius:16px;gap:12px}
html.ml-ui2 .ml-settings-toggle > label:not(.ml-settings-switch){flex:1 1 auto;min-width:0;font-size:16px;line-height:1.3}
html.ml-ui2 .ml-settings-toggle select{flex:0 1 auto;min-width:0;width:auto;max-width:56%;height:40px;padding:0 10px;border-radius:12px;font-size:15px}
html.ml-ui2 .ml-ui2-sub{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:var(--muted)}

/* ---------- Switch 51x31 (was stretched to ~115–140px on «Уведомления») ---------- */
html.ml-ui2 .ml-settings-switch,html.ml-ui2 label.ml-settings-switch{position:relative;flex:0 0 51px!important;width:51px!important;height:31px!important;min-width:51px;padding:0;margin:0}
html.ml-ui2 .ml-settings-switch span{position:absolute;inset:0;border-radius:999px}
html.ml-ui2 .ml-settings-switch span::after{top:2px;left:2px;width:25px;height:25px;box-shadow:0 1px 3px rgba(0,0,0,.3)}
html.ml-ui2 .ml-settings-switch input:checked + span::after{transform:translateX(20px)}
html.ml-ui2 .ml-settings-switch input:focus-visible + span{outline:2px solid #8A5CFF;outline-offset:2px}
html.ml-ui2 .ml-settings-switch input:disabled + span{opacity:.5;cursor:default}

/* ---------- Notes and messages: plain captions, no dashed boxes ---------- */
html.ml-ui2 .ml-settings-note{margin:12px 2px 0;padding:0;border:0;border-radius:0;font-size:13px;line-height:1.45;color:var(--muted)}
html.ml-ui2 .ml-ui2-saved{min-height:18px;margin:10px 2px 0;font-size:13px;line-height:1.4;color:#7EE2B0;opacity:0;transition:opacity .2s ease}
html.ml-ui2 .ml-ui2-saved.is-on{opacity:1}
html.ml-ui2 .ml-ui2-saved.is-err{color:#FF8FA8}
html[data-theme="light"].ml-ui2 .ml-ui2-saved{color:#1E9E62}
html[data-theme="light"].ml-ui2 .ml-ui2-saved.is-err{color:#C0304F}

/* ---------- «Аккаунт»: name + @username only (internal data only for owners after 7 taps on the title) ---------- */
html.ml-ui2 .ml-ui2-group{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);overflow:hidden}
html.ml-ui2 .ml-ui2-item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:10px 16px}
html.ml-ui2 .ml-ui2-item + .ml-ui2-item{border-top:1px solid var(--line)}
html.ml-ui2 .ml-ui2-item span{color:var(--muted);font-size:15px}
html.ml-ui2 .ml-ui2-item b{font-size:16px;font-weight:560;color:var(--text);text-align:right;overflow-wrap:anywhere}
html.ml-ui2 .ml-ui2-debug{margin-top:14px}
html.ml-ui2 .ml-ui2-debug-h{margin:0 2px 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
html.ml-ui2 .ml-ui2-debug .ml-ui2-item b{font-size:13px;font-weight:500;font-family:ui-monospace,Menlo,monospace}
html.ml-ui2 .ml-profile-meta p{font-size:15px}

/* ---------- Forms on the light subpages ---------- */
html.ml-ui2 #profile .ml-form{gap:14px}
html.ml-ui2 #profile .ml-form input,html.ml-ui2 #profile .ml-form select{height:48px;padding:0 14px;border-radius:14px;font-size:16px}
html.ml-ui2 #profile .ml-form textarea{padding:12px 14px;border-radius:14px;font-size:16px}
html.ml-ui2 #profile .ml-form label{font-size:13px}

/* ---------- Floating heart: content never ends under it ---------- */
html.ml-ui2 .app{padding-bottom:calc(120px + env(safe-area-inset-bottom))}

@media (max-width:360px){
  html.ml-ui2 #profile .ml-live-panel > h2{font-size:24px}
  html.ml-ui2 .ml-settings-toggle select{max-width:52%;font-size:14px}
}

/* ---------- Telegram Desktop / wide windows: questionnaire column instead of 700px-wide options ---------- */
@media (min-width:640px){
  html.ml-ui2 #ml-quest-root.ml-quest-open{background:#0B0B12}
  html.ml-ui2 #ml-quest-root .ml-quest-screen{left:0;right:0;max-width:560px;margin:0 auto}
  html.ml-ui2 #profile .ml-live-panel{max-width:600px}
}