/*
  World-Class UI — “Отремонтируй-Просто”
  Goal: premium fintech-grade dark UI, mobile-first, no business-logic changes.
  Only CSS + safe visual helpers.
*/

:root{
  /* Premium light UI (clean, trustworthy, “big-tech” feel) */
  --visual-viewport-height: 100dvh;
  --keyboard-inset: 0px;
  --keyboard-safe-gap: 0px;
  --fixed-header-offset: 0px;
  --bg: #F7F8FA;
  --bg-2: #F2F4F7;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;
  --surface-3: #FFFFFF;
  --text: #0B1220;
  --muted: rgba(15,23,42,.62);
  --border: rgba(15,23,42,.10);
  --border-2: rgba(15,23,42,.06);

  /* Accent (Sber-green-ish, but premium) */
  --accent: #21A038;
  --accent-2: #1A8B30;
  --accent-soft: rgba(30,155,75,.10);
  --ring: rgba(30,155,75,.18);

  /* Semantic */
  --danger: #DC2626;
  --warning: #F59E0B;
  --info: #2563EB;
  --success: #16A34A;

  /* Canonical component tokens */
  --btn-radius: 999px;
  --btn-shadow: 0 10px 24px rgba(15,23,42,.08);
  --btn-shadow-hover: 0 14px 30px rgba(15,23,42,.12);
  --btn-border: rgba(15,23,42,.10);
  --btn-bg: rgba(255,255,255,.96);
  --btn-text: rgba(15,23,42,.92);
  --btn-ghost-bg: rgba(255,255,255,.72);
  --btn-danger-bg: linear-gradient(180deg, rgba(255,239,239,1), rgba(255,232,232,1));
  --btn-danger-border: rgba(239,68,68,.22);
  --btn-danger-text: #8a1c1c;
  --badge-bg: rgba(15,23,42,.04);
  --badge-border: rgba(15,23,42,.08);
  --badge-text: rgba(15,23,42,.86);

  /* Shape / Shadow */
  --radius: 22px;
  --radius-sm: 16px;
  --radius-xs: 14px;

  --shadow: 0 18px 60px rgba(15, 23, 42, .14);
  --shadow-soft: 0 14px 36px rgba(15, 23, 42, .10);

  /* Layout */
  --container: 980px;
  --topbar-h: 64px;
  --bottom-nav-h: 74px;

  /* Shared shell primitives */
  --shell-topbar-h: var(--topbar-h);
  --shell-header-spacer-h: var(--shell-topbar-h);
  --shell-topbar-pad-x: 16px;
  --shell-topbar-gap: 12px;
  --shell-topbar-title-gap: 10px;
  --shell-topbar-title-padding-y: 0px;
  --shell-topbar-title-padding-x: 0px;
  --shell-topbar-title-radius: 0px;
  --shell-topbar-title-bg: transparent;
  --shell-topbar-title-border-width: 0px;
  --shell-topbar-title-border: transparent;
  --shell-topbar-title-shadow: none;
  --shell-topbar-actions-gap: 8px;
  --shell-brand-logo-h: 40px;
  --shell-brand-name-size: 15px;
  --shell-brand-name-size-mobile: 14px;
  --shell-brand-name-weight: 900;
  --shell-brand-name-letter-spacing: -0.02em;
  --shell-brand-name-color: rgba(15,23,42,.92);
  --shell-topbar-btn-h: 42px;
  --shell-topbar-btn-pad-x: 12px;
  --shell-topbar-btn-radius: 14px;
  --shell-topbar-icon-size: 42px;
  --shell-topbar-icon-radius: 14px;
  --shell-container-top-gap: 0px;
  --shell-container-padding-bottom-compact: 0px;
  --shell-container-padding-bottom-nav: 86px;
  --shell-container-margin-bottom-compact: 10px;
  --shell-container-margin-bottom-nav: calc(var(--bottom-nav-h) + 18px);
  --shell-page-context-display: flex;
  --shell-page-context-gap: 14px;
  --shell-page-context-margin-block-start: 12px;
  --shell-page-context-margin-block-end: 14px;
  --shell-page-context-padding-y: 10px;
  --shell-page-context-padding-x: 12px;
  --shell-page-context-radius: 18px;
  --shell-page-context-border: rgba(15,23,42,.08);
  --shell-page-context-bg: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  --shell-page-context-shadow: 0 12px 28px rgba(15,23,42,.05);
  --shell-page-context-main-gap: 12px;
  --shell-page-context-back-padding-y: 8px;
  --shell-page-context-back-padding-x: 12px;
  --shell-page-context-title-size: 15px;
  --shell-page-context-title-weight: 800;
  --shell-page-context-title-letter-spacing: -0.02em;
  --shell-page-context-title-max: min(56vw, 680px);
  --shell-page-context-tools-gap: 8px;
  --shell-page-context-back-border: rgba(15,23,42,.08);
  --shell-page-context-back-bg: #fff;
  --shell-page-context-back-weight: 700;
  --shell-page-context-tools-pill-bg: rgba(33,160,56,.08);
  --shell-page-context-tools-pill-border: rgba(33,160,56,.16);
  --shell-page-context-tools-pill-color: var(--text);
  --shell-fixed-header-blur: blur(12px);
  --shell-fixed-header-bg: rgba(255,255,255,.92);
  --shell-fixed-header-border: var(--border-2);
  --shell-fixed-header-shadow: none;
  --shell-brand-logo-filter: drop-shadow(0 10px 18px rgba(15,23,42,.10));
  --shell-fixed-logo-filter: drop-shadow(0 10px 18px rgba(15,23,42,.10));
  --shell-fixed-control-bg: #fff;
  --shell-fixed-control-border: var(--border);
  --shell-fixed-control-color: var(--text);
  --shell-fixed-control-bg-hover: rgba(15,23,42,.03);
  --shell-fixed-control-border-hover: rgba(15,23,42,.12);
  --shell-fixed-control-color-hover: var(--text);
  --shell-notification-top: calc(env(safe-area-inset-top, 0px) + 76px);
  --shell-notification-top-mobile: calc(env(safe-area-inset-top, 0px) + 72px);

  /* Motion */
  --motion-fast: .14s;
  --motion-dialog: .18s;
  --motion-ease: cubic-bezier(.2,.8,.2,1);
  --motion-dialog-offset: 8px;

  color-scheme: light;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ scroll-padding-top: calc(var(--fixed-header-offset) + env(safe-area-inset-top, 0px) + 12px); }

@supports not (height: 100dvh){
  :root{ --visual-viewport-height: 100vh; }
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.keyboard-safe-surface{
  min-height: var(--visual-viewport-height);
}
body.has-fixed-header-shell{
  padding-top: var(--shell-header-spacer-h);
}
body.keyboard-safe-surface input,
body.keyboard-safe-surface select,
body.keyboard-safe-surface textarea,
body.keyboard-safe-surface .support-field input,
body.keyboard-safe-surface .support-field select,
body.keyboard-safe-surface .support-field textarea{
  scroll-margin-top: calc(var(--fixed-header-offset) + env(safe-area-inset-top, 0px) + 18px);
  scroll-margin-bottom: calc(max(18px, env(safe-area-inset-bottom, 0px)) + var(--keyboard-safe-gap));
}
@media (max-width: 760px){
  body.viewport-shell-auth .container,
  body.viewport-shell-form .container{
    padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + var(--keyboard-safe-gap)));
  }
}

/* Links */
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: none; }

/* Container */
.container{
  width: min(92vw, var(--container));
  margin: 18px auto calc(var(--bottom-nav-h) + 18px);
}

body.app-shell-auth{
  --shell-topbar-h:62px;
  --shell-header-spacer-h:62px;
  --shell-topbar-pad-x:16px;
  --shell-topbar-gap:10px;
  --shell-topbar-title-gap:10px;
  --shell-topbar-actions-gap:7px;
  --shell-brand-logo-h:34px;
  --shell-brand-name-size:15px;
  --shell-brand-name-weight:820;
  --shell-brand-name-letter-spacing:-.018em;
  --shell-brand-name-color:rgba(15,23,42,.88);
  --shell-topbar-btn-h:38px;
  --shell-topbar-btn-pad-x:12px;
  --shell-topbar-btn-radius:12px;
  --shell-topbar-icon-size:38px;
  --shell-topbar-icon-radius:12px;
  --shell-container-top-gap:10px;
  --shell-page-context-margin-block-start:6px;
  --shell-page-context-margin-block-end:10px;
  --shell-page-context-padding-y:8px;
  --shell-page-context-padding-x:10px;
  --shell-page-context-radius:16px;
  --shell-page-context-border:rgba(15,23,42,.07);
  --shell-page-context-bg:rgba(255,255,255,.94);
  --shell-page-context-shadow:0 8px 22px rgba(15,23,42,.035);
  --shell-page-context-main-gap:8px;
  --shell-page-context-back-padding-y:7px;
  --shell-page-context-back-padding-x:10px;
  --shell-page-context-back-weight:650;
  --shell-page-context-back-bg:rgba(248,250,252,.92);
  --shell-page-context-back-border:rgba(15,23,42,.08);
  --shell-page-context-title-size:14.5px;
  --shell-page-context-title-weight:720;
  --shell-page-context-title-letter-spacing:-.012em;
  --shell-page-context-title-max:min(66vw, 720px);
  --shell-page-context-tools-gap:6px;
  --shell-page-context-tools-pill-bg:rgba(248,250,252,.90);
  --shell-page-context-tools-pill-border:rgba(15,23,42,.08);
  --shell-page-context-tools-pill-color:rgba(15,23,42,.74);
  --shell-fixed-header-blur:blur(8px);
  --shell-fixed-header-bg:rgba(255,255,255,.95);
  --shell-fixed-header-border:rgba(15,23,42,.05);
  --shell-fixed-logo-filter:drop-shadow(0 2px 6px rgba(15,23,42,.05));
  --shell-fixed-control-bg:rgba(248,250,252,.90);
  --shell-fixed-control-border:rgba(15,23,42,.08);
  --shell-fixed-control-color:rgba(15,23,42,.78);
  --shell-fixed-control-bg-hover:#fff;
  --shell-fixed-control-border-hover:rgba(15,23,42,.10);
  --shell-fixed-control-color-hover:#0f172a;
  --shell-notification-top:calc(env(safe-area-inset-top, 0px) + 68px);
  --shell-notification-top-mobile:calc(env(safe-area-inset-top, 0px) + 60px);
}

body.app-shell-public{
  --shell-topbar-h:68px;
  --shell-topbar-min-h:68px;
  --shell-topbar-height:68px;
  --shell-topbar-pad-x:18px;
  --shell-topbar-gap:14px;
  --shell-topbar-title-gap:12px;
  --shell-topbar-actions-gap:10px;
  --shell-brand-logo-h:46px;
  --shell-brand-logo-filter:drop-shadow(0 8px 18px rgba(15,23,42,.10));
  --shell-brand-name-size:17px;
  --shell-brand-name-weight:900;
  --shell-brand-name-letter-spacing:-.025em;
  --shell-container-top-gap:14px;
}

header.is-entry-auth-header{
  --shell-topbar-h:76px;
  --shell-topbar-min-h:76px;
  --shell-topbar-height:76px;
  --shell-topbar-gap:12px;
  --shell-topbar-title-gap:14px;
  --shell-topbar-title-padding-y:8px;
  --shell-topbar-title-padding-x:12px;
  --shell-topbar-title-radius:20px;
  --shell-topbar-title-bg:linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,247,.96));
  --shell-topbar-title-border-width:1px;
  --shell-topbar-title-border:rgba(46,212,122,.14);
  --shell-topbar-title-shadow:0 10px 22px rgba(15,23,42,.05);
  --shell-brand-logo-h:60px;
  --shell-brand-logo-filter:drop-shadow(0 10px 22px rgba(15,23,42,.12));
  --shell-brand-name-size:19px;
  --shell-brand-name-letter-spacing:-.03em;
}

.container--compact,
.container--with-nav{
  margin-top: var(--shell-container-top-gap);
}

.container--compact{
  padding-bottom: var(--shell-container-padding-bottom-compact);
  margin-bottom: var(--shell-container-margin-bottom-compact);
}

.container--with-nav{
  padding-bottom: var(--shell-container-padding-bottom-nav);
  margin-bottom: var(--shell-container-margin-bottom-nav);
}

.page-context-bar{
  display: var(--shell-page-context-display);
  align-items:center;
  justify-content:space-between;
  gap:var(--shell-page-context-gap);
  margin: var(--shell-page-context-margin-block-start) 0 var(--shell-page-context-margin-block-end);
  padding: var(--shell-page-context-padding-y) var(--shell-page-context-padding-x);
  border:1px solid var(--shell-page-context-border);
  border-radius:var(--shell-page-context-radius);
  background:var(--shell-page-context-bg);
  box-shadow:var(--shell-page-context-shadow);
}

.page-context-main{display:flex;align-items:center;gap:var(--shell-page-context-main-gap);min-width:0;}
.page-context-back{display:inline-flex;align-items:center;gap:6px;padding:var(--shell-page-context-back-padding-y) var(--shell-page-context-back-padding-x);border-radius:999px;border:1px solid var(--shell-page-context-back-border);background:var(--shell-page-context-back-bg);color:inherit;text-decoration:none;font-weight:var(--shell-page-context-back-weight);white-space:nowrap;}
.page-context-copy{min-width:0;}
.page-context-label{font-size:12px;line-height:1.2;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.page-context-title{font-size:var(--shell-page-context-title-size);line-height:1.35;font-weight:var(--shell-page-context-title-weight);letter-spacing:var(--shell-page-context-title-letter-spacing);color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:var(--shell-page-context-title-max);}
.page-context-chip{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:var(--shell-page-context-tools-pill-bg);border:1px solid var(--shell-page-context-tools-pill-border);text-decoration:none;font-weight:700;color:var(--shell-page-context-tools-pill-color);white-space:nowrap;}
.page-context-tools{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--shell-page-context-tools-gap);margin-left:auto;}
.page-context-tools .pill{background:var(--shell-page-context-tools-pill-bg);border-color:var(--shell-page-context-tools-pill-border);color:var(--shell-page-context-tools-pill-color);box-shadow:none;}

@media (max-width: 820px){
  .page-context-bar{flex-direction:column;align-items:stretch;}
  .page-context-main{width:100%;}
  .page-context-title{white-space:normal;max-width:none;}
}

/* Typography */
h1,h2,h3{ letter-spacing:-0.02em; margin:0 0 10px; }
.small-muted,.muted{ color: var(--muted); font-size: 13px; line-height: 1.45; }
.page-title{ font-size: 20px; font-weight: 800; letter-spacing:-0.02em; margin: 0 0 12px; }

/* Topbar / Header */
header{
  position: static;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,.94);
  border-bottom: 1px solid var(--border-2);
}
header.is-fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  backdrop-filter: var(--shell-fixed-header-blur);
  background: var(--shell-fixed-header-bg);
  border-bottom-color: var(--shell-fixed-header-border);
  box-shadow: var(--shell-fixed-header-shadow);
}

header.is-fixed .brand-logo-img{
  filter: var(--shell-fixed-logo-filter);
}

header.is-fixed :is(.topbar-btn, .topbar-icon-btn){
  border-color: var(--shell-fixed-control-border);
  background: var(--shell-fixed-control-bg);
  color: var(--shell-fixed-control-color);
}

header.is-fixed :is(.topbar-btn, .topbar-icon-btn):hover{
  background: var(--shell-fixed-control-bg-hover);
  border-color: var(--shell-fixed-control-border-hover);
  color: var(--shell-fixed-control-color-hover);
  transform:none;
}

.header-spacer{ height: var(--shell-header-spacer-h); }

.topbar{ display:flex; justify-content:center; }
.topbar-inner{
  min-height: var(--shell-topbar-min-h, var(--shell-topbar-h));
  height: var(--shell-topbar-height, var(--shell-topbar-h));
  width: min(92vw, var(--container));
  padding: 0 var(--shell-topbar-pad-x);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--shell-topbar-gap);
}

.brand-logo{ display:inline-flex; align-items:center; gap:10px; }
.brand-name{
  display:inline-flex;
  align-items:center;
  font-weight: var(--shell-brand-name-weight);
  letter-spacing: var(--shell-brand-name-letter-spacing);
  text-decoration: none;
  color: var(--shell-brand-name-color);
  font-size: var(--shell-brand-name-size);
  line-height: 1;
}
@media (max-width: 420px){
  .brand-name{ font-size: var(--shell-brand-name-size-mobile, var(--shell-brand-name-size)); }
}

@media (max-width: 760px){
  :root{
    --shell-container-margin-bottom-compact:14px;
    --shell-container-margin-bottom-nav:calc(var(--bottom-nav-h) + 14px);
    --shell-brand-logo-filter-mobile:drop-shadow(0 8px 18px rgba(15,23,42,.12));
  }

  body.has-fixed-header-shell{
    padding-top: var(--shell-header-spacer-h-mobile, var(--shell-header-spacer-h));
  }

  body.app-shell-auth{
    --bottom-nav-h:70px;
    --shell-topbar-h:56px;
    --shell-header-spacer-h:56px;
    --shell-topbar-h-mobile:56px;
    --shell-header-spacer-h-mobile:56px;
    --shell-topbar-pad-x:12px;
    --shell-topbar-pad-x-mobile:12px;
    --shell-topbar-gap:8px;
    --shell-topbar-gap-mobile:8px;
    --shell-topbar-actions-gap:7px;
    --shell-topbar-actions-gap-mobile:7px;
    --shell-brand-logo-h:28px;
    --shell-brand-logo-h-mobile:28px;
    --shell-brand-name-size:13.5px;
    --shell-brand-name-size-mobile:13.5px;
    --shell-topbar-btn-h:34px;
    --shell-topbar-btn-pad-x:10px;
    --shell-topbar-btn-pad-x-mobile:10px;
    --shell-topbar-btn-radius:11px;
    --shell-topbar-icon-size:34px;
    --shell-topbar-icon-size-mobile:34px;
    --shell-topbar-icon-radius:11px;
    --shell-container-top-gap:6px;
    --shell-container-margin-bottom-nav:calc(var(--bottom-nav-h) + 12px);
    --shell-container-margin-bottom-compact:12px;
    --shell-page-context-margin-block-start:5px;
    --shell-page-context-margin-block-end:9px;
    --shell-page-context-padding-y:8px;
    --shell-page-context-padding-x:9px;
    --shell-page-context-title-size:14px;
    --shell-page-context-title-max:none;
  }

  body.app-shell-auth .page-context-bar{
    display:none;
  }

  body.app-shell-public{
    --shell-topbar-h:72px;
    --shell-topbar-min-h:72px;
    --shell-topbar-height:72px;
    --shell-topbar-pad-x:14px;
    --shell-topbar-pad-x-mobile:14px;
    --shell-topbar-gap:10px;
    --shell-topbar-gap-mobile:10px;
    --shell-brand-logo-h:38px;
    --shell-brand-logo-h-mobile:38px;
    --shell-brand-name-size:15px;
    --shell-brand-name-size-mobile:15px;
    --shell-topbar-btn-h:40px;
    --shell-topbar-btn-pad-x:14px;
    --shell-topbar-btn-pad-x-mobile:14px;
    --shell-topbar-btn-radius:12px;
    --shell-topbar-icon-size:40px;
    --shell-topbar-icon-size-mobile:40px;
    --shell-topbar-icon-radius:12px;
    --shell-container-top-gap:10px;
  }

  header.is-entry-auth-header{
    --shell-topbar-min-h:82px;
    --shell-topbar-height:auto;
    --shell-brand-logo-h:52px;
    --shell-brand-logo-h-mobile:52px;
    --shell-brand-name-size:17px;
    --shell-brand-name-size-mobile:17px;
    --shell-topbar-title-gap:12px;
    --shell-topbar-title-padding-x:10px;
    --shell-topbar-title-radius:18px;
  }

  header.is-entry-auth-header .topbar-inner{
    padding-top:10px;
    padding-bottom:10px;
  }
}

@media (max-width:760px){
  .bottom-nav{
    padding:8px 8px calc(env(safe-area-inset-bottom) + 8px);
  }

  .bn-item{
    gap:4px;
    padding:6px 4px;
    border-radius:14px;
  }

  .bn-ic{
    width:22px;
    height:22px;
  }

  .bn-ic svg{
    width:20px;
    height:20px;
  }

  .bn-tx{
    font-size:10px;
  }
}

@media (max-width:900px){
  .notification-center{
    right:12px;
    left:12px;
    width:auto;
    top:var(--shell-notification-top-mobile, calc(env(safe-area-inset-top, 0px) + 72px));
  }
}

@media (max-width: 620px){
  header.is-auth-form-header .topbar-inner{
    height:auto;
    min-height:84px;
    padding-top:12px;
    padding-bottom:12px;
    align-items:flex-start;
    flex-wrap:wrap;
    row-gap:8px;
  }

  header.is-auth-form-header .topbar-title{
    width:100%;
    flex:1 1 100%;
  }

  header.is-auth-form-header .topbar-actions{
    width:100%;
    justify-content:flex-end;
  }

  header.is-auth-form-header .brand-name{
    max-width:none;
  }

  header.is-entry-auth-header .topbar-inner{
    min-height:88px;
    row-gap:10px;
  }
}

@media (max-width: 420px){
  body.app-shell-public{
    --shell-brand-logo-h:36px;
    --shell-brand-logo-h-mobile:36px;
    --shell-brand-name-size:14.5px;
    --shell-brand-name-size-mobile:14.5px;
  }
}

.brand-logo-img{
  height: var(--shell-brand-logo-h);
  width: auto;
  display:block;
  filter: var(--shell-brand-logo-filter-mobile, var(--shell-brand-logo-filter));
}

.topbar-actions{ display:flex; align-items:center; gap:var(--shell-topbar-actions-gap); flex-shrink:0; }
.topbar-title{display:flex;align-items:center;gap:var(--shell-topbar-title-gap);min-width:0;flex:1 1 auto;padding:var(--shell-topbar-title-padding-y) var(--shell-topbar-title-padding-x);border-radius:var(--shell-topbar-title-radius);border:var(--shell-topbar-title-border-width) solid var(--shell-topbar-title-border);background:var(--shell-topbar-title-bg);box-shadow:var(--shell-topbar-title-shadow);}
.brand-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-icon-btn{appearance:none;border:1px solid var(--border);background:#fff;color:var(--text);width:var(--shell-topbar-icon-size);height:var(--shell-topbar-icon-size);border-radius:var(--shell-topbar-icon-radius);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;flex:0 0 auto;box-shadow:none;transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;}
.topbar-icon-btn svg{width:20px;height:20px;}
.topbar-icon-btn:hover{background:rgba(15,23,42,.03);border-color:rgba(15,23,42,.12);}
.topbar-icon-btn:active{transform: translateY(1px) scale(.99);}

.topbar-btn{
  appearance:none;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  min-height: var(--shell-topbar-btn-h);
  padding: 0 var(--shell-topbar-btn-pad-x);
  border-radius: var(--shell-topbar-btn-radius);
  font-weight: 650;
  cursor:pointer;
  box-shadow:none;
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.topbar-btn:hover{
  background: rgba(15,23,42,.03);
  border-color: rgba(15,23,42,.12);
  box-shadow:none;
}
.topbar-btn:active{ transform: translateY(1px) scale(.99); }
.topbar-btn{text-decoration:none;}

.topbar-btn--muted{
  background:rgba(15,23,42,.04);
  border-color:rgba(15,23,42,.08);
  color:#0f172a;
}

.topbar-notifications-btn{position:relative;}

.notification-center{position:fixed;top:var(--shell-notification-top, calc(env(safe-area-inset-top, 0px) + 76px));right:16px;width:min(420px, calc(100vw - 24px));max-height:min(76vh, 720px);overflow:hidden;border-radius:24px;border:1px solid rgba(15,23,42,.09);background:rgba(255,255,255,.98);box-shadow:0 22px 64px rgba(15,23,42,.22);backdrop-filter:blur(16px);z-index:1200;}
.notification-center__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 16px 12px;border-bottom:1px solid rgba(15,23,42,.06);}
.notification-center__kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.notification-center__title{font-size:20px;font-weight:800;color:var(--text);}
.notification-center__meta{padding:0 18px 10px;}
.notification-center__list{padding:0 10px 10px;max-height:60vh;overflow:auto;display:grid;gap:10px;}
.notification-center__empty{padding:20px 12px;color:var(--muted);line-height:1.5;}
.notification-center__item{position:relative;border:1px solid rgba(15,23,42,.10);border-radius:16px;background:rgba(248,250,252,.9);padding:14px;display:grid;gap:10px;}
.notification-center__item.is-unread{border-color:rgba(15,23,42,.10);box-shadow:inset 3px 0 0 rgba(15,23,42,.18);}
.notification-center__open{text-decoration:none;color:inherit;display:grid;gap:8px;}
.notification-center__item-head{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;}
.notification-center__item-title{font-weight:800;line-height:1.35;}
.notification-center__item-date{font-size:12px;color:var(--muted);white-space:nowrap;}
.notification-center__item-body{font-size:14px;line-height:1.5;color:var(--text-soft);}
.notification-center__item-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;}
.notification-center__mark,.notification-center__details{font-size:13px;font-weight:700;}
.topbar-notifications-btn[aria-expanded="true"]{background:rgba(15,23,42,.05);color:#0f172a;border-color:rgba(15,23,42,.10);}

/* Cards */
body.viewport-shell-home .container.container--compact,
body.viewport-shell-auth .container.container--compact{
  margin-bottom:4px;
}

@media (max-width:760px){
  body.viewport-shell-home .container.container--compact,
  body.viewport-shell-auth .container.container--compact{
    margin-bottom:2px;
  }
}

.card{
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 18px;
}
.card + .card{ margin-top: 14px; }
.order-card-highlight{
  border-color: rgba(33,160,56,.28);
  box-shadow: 0 0 0 2px rgba(33,160,56,.10), var(--shadow-soft);
  background: linear-gradient(180deg, rgba(33,160,56,.04), rgba(255,255,255,.98));
}
.city-autocomplete-results{max-height: 280px; overflow:auto;}


.divider{ height:1px; background: var(--border-2); margin: 12px 0; }

/* Buttons */
button{ font-family: inherit; }
.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-outline,
.btn-ghost,
.btn-solid-primary,
.ghost,
.topbar-btn,
.modal-close,
.notification-center__mark,
.notification-center__details{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  min-height: 42px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--btn-radius);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-decoration:none;
  cursor:pointer;
  box-shadow: var(--btn-shadow);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease, color .12s ease, opacity .12s ease;
}
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-success:active,
.btn-danger:active,
.btn-outline:active,
.btn-ghost:active,
.btn-solid-primary:active,
.ghost:active,
.topbar-btn:active,
.modal-close:active,
.notification-center__mark:active,
.notification-center__details:active{ transform: translateY(1px) scale(.99); }

:is(.btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-outline, .btn-ghost, .btn-solid-primary, .ghost, .topbar-btn, .modal-close, .notification-center__mark, .notification-center__details):focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring), var(--btn-shadow-hover);
}

.btn,
.btn-secondary,
.topbar-btn,
.modal-close,
.notification-center__mark,
.notification-center__details{
  background: var(--btn-bg);
  color: var(--btn-text);
  border-color: var(--btn-border);
}

.btn-outline{
  background: #fff;
  color: var(--accent-2);
  border-color: rgba(30,155,75,.18);
}

.btn-ghost,
.ghost{
  background: var(--btn-ghost-bg);
  color: var(--btn-text);
  border-color: rgba(15,23,42,.06);
  box-shadow: none;
}

.btn-primary,
.btn.primary,
.btn-solid-primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #ffffff;
  border-color: var(--accent-2);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}

.btn-success{
  background: rgba(240,253,244,.96);
  color: #166534;
  border-color: rgba(34,197,94,.24);
  box-shadow: 0 10px 22px rgba(15,23,42,.07);
}

.btn-danger{
  background: var(--btn-danger-bg);
  color: var(--btn-danger-text);
  border-color: var(--btn-danger-border);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}
.btn-danger:hover{
  transform: translateY(-1px);
  border-color: rgba(239,68,68,.28);
  box-shadow: 0 14px 28px rgba(15,23,42,.10);
}
.btn-danger:active{
  transform: translateY(1px) scale(.99);
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
}
.btn-danger:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(239,68,68,.14), 0 14px 28px rgba(15,23,42,.10);
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover,
.btn-ghost:hover,
.btn-solid-primary:hover,
.ghost:hover,
.btn-success:hover,
.topbar-btn:hover,
.modal-close:hover,
.notification-center__mark:hover,
.notification-center__details:hover{
  transform: translateY(-1px);
  box-shadow: var(--btn-shadow-hover);
}

.btn:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-outline):not(.btn-ghost):not(.btn-solid-primary):hover,
.btn-secondary:hover,
.topbar-btn:hover,
.modal-close:hover,
.notification-center__mark:hover,
.notification-center__details:hover{
  background: #ffffff;
  border-color: rgba(15,23,42,.14);
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn.primary:hover,
.btn-solid-primary:hover{
  background: linear-gradient(180deg, rgba(33,160,56,.98), rgba(26,139,48,1));
  border-color: rgba(21,128,61,.94);
  box-shadow: 0 14px 28px rgba(15,23,42,.10);
}

.btn-primary:active,
.btn.btn-primary:active,
.btn.primary:active,
.btn-solid-primary:active{
  background: linear-gradient(180deg, rgba(29,145,50,.98), rgba(22,120,44,1));
  border-color: rgba(21,128,61,.96);
  box-shadow: 0 8px 18px rgba(15,23,42,.09);
}

.btn-primary:focus-visible,
.btn.btn-primary:focus-visible,
.btn.primary:focus-visible,
.btn-solid-primary:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(33,160,56,.16), 0 14px 28px rgba(15,23,42,.10);
}

.topbar-btn{
  min-height: 42px;
  padding: 10px 12px;
  border-radius: 14px;
  font-weight:650;
  box-shadow:none;
}

.topbar-btn:hover{
  box-shadow:none;
}

.topbar-btn:focus-visible,
.topbar-icon-btn:focus-visible{
  outline:none;
  box-shadow:none;
}

.modal-close{
  min-height: 40px;
  padding: 0;
  box-shadow: none;
}

.notification-center__mark,
.notification-center__details{
  min-height: 0;
  padding: 8px 12px;
  box-shadow: none;
}

.btn-outline:hover{
  background: rgba(33,160,56,.06);
  border-color: rgba(30,155,75,.24);
}

.btn-ghost:hover,
.ghost:hover{
  background: rgba(255,255,255,.94);
  border-color: rgba(15,23,42,.08);
  box-shadow: none;
}

.btn-success:hover{
  background: rgba(236,253,245,.98);
  border-color: rgba(34,197,94,.30);
}

:is(.btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-outline, .btn-ghost, .btn-solid-primary, .ghost, .topbar-btn, .modal-close, .notification-center__mark, .notification-center__details)[disabled],
:is(.btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-outline, .btn-ghost, .btn-solid-primary, .ghost, .topbar-btn, .modal-close, .notification-center__mark, .notification-center__details).is-disabled{
  opacity: .52;
  cursor: not-allowed;
  pointer-events: none;
  transform: none !important;
  box-shadow: none !important;
  filter: saturate(.65);
}

/* Button rows */
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.btn-row > *{flex:0 0 auto;}

/* Chips / pills */
.pill,
.chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 8px;
  min-height: 36px;
  padding: 9px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--btn-border);
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
  font-size: 13px;
  font-weight: 700;
  color: var(--btn-text);
  transition: transform .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease, color .12s ease, opacity .12s ease;
}
.pill:hover,
.chip:hover{
  background: #fff;
  border-color: rgba(15,23,42,.14);
  transform: translateY(-1px);
}
.pill.primary,
.chip.primary{
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-color: var(--accent-2);
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(15,23,42,.09);
}
.pill.primary:hover,
.chip.primary:hover{
  background: linear-gradient(180deg, rgba(33,160,56,.98), rgba(26,139,48,1));
  border-color: var(--accent-2);
  box-shadow: 0 12px 24px rgba(15,23,42,.10);
}
:is(.pill, .chip)[disabled],
:is(.pill, .chip).is-disabled{
  opacity: .52;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none !important;
}
.chip{ padding: 8px 12px; }

/* Forms */
label{ display:block; font-weight: 800; margin: 0 0 6px; }
input, select, textarea{
  width:100%;
  background: #ffffff;
  color: var(--text);
  border: 1px solid rgba(15,23,42,.12);
  border-radius: var(--radius-xs);
  padding: 12px 14px;
  outline: none;
  transition: box-shadow .12s ease, border-color .12s ease, background .12s ease;
}
input::placeholder, textarea::placeholder{ color: rgba(154,164,178,.75); }
input:focus, select:focus, textarea:focus{
  border-color: rgba(30,155,75,.55);
  box-shadow: 0 0 0 4px var(--ring);
  background: #ffffff;
}
textarea{ min-height: 100px; resize: vertical; }

/* Fix for iOS zoom: keep at least 16px */
@media (max-width: 520px){
  input, select, textarea{ font-size: 16px; }
}

/* Tables */
table{ width:100%; border-collapse: collapse; }
th, td{
  padding: 12px 10px;
  border-bottom: 1px solid var(--border-2);
  vertical-align: top;
}
th{ color: rgba(15,23,42,.66); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
tr:hover td{ background: rgba(15,23,42,.025); }

/* Badges / status: one canonical vocabulary lives here.
   Legacy ok/warn/bad aliases are grouped into the same selectors so they do not form a second visual branch. */
.badge,
.status-pill,
.status-chip{
  --status-border: var(--badge-border);
  --status-bg: var(--badge-bg);
  --status-text: var(--badge-text);
  --tone-success-border: rgba(34,197,94,.24);
  --tone-success-bg: rgba(33,160,56,.10);
  --tone-success-text: #166534;
  --tone-warning-border: rgba(245,158,11,.22);
  --tone-warning-bg: rgba(245,158,11,.11);
  --tone-warning-text: #92400e;
  --tone-danger-border: rgba(239,68,68,.20);
  --tone-danger-bg: rgba(239,68,68,.10);
  --tone-danger-text: #991b1b;
  --tone-info-border: rgba(37,99,235,.18);
  --tone-info-bg: rgba(37,99,235,.08);
  --tone-info-text: #1d4ed8;
  --tone-neutral-border: rgba(15,23,42,.12);
  --tone-neutral-bg: rgba(15,23,42,.05);
  --tone-neutral-text: #334155;
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid var(--status-border);
  background: var(--status-bg);
  color: var(--status-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.badge.success,
.status-success{
  --status-border: var(--tone-success-border);
  --status-bg: var(--tone-success-bg);
  --status-text: var(--tone-success-text);
}
.badge.warning,
.status-warning{
  --status-border: var(--tone-warning-border);
  --status-bg: var(--tone-warning-bg);
  --status-text: var(--tone-warning-text);
}
.badge.danger,
.status-danger{
  --status-border: var(--tone-danger-border);
  --status-bg: var(--tone-danger-bg);
  --status-text: var(--tone-danger-text);
}
.badge.info,
.status-info{
  --status-border: var(--tone-info-border);
  --status-bg: var(--tone-info-bg);
  --status-text: var(--tone-info-text);
}
.badge.neutral,
.status-neutral{
  --status-border: var(--tone-neutral-border);
  --status-bg: var(--tone-neutral-bg);
  --status-text: var(--tone-neutral-text);
}
/* Legacy aliases intentionally removed from the visual layer.
   Use canonical names: success / warning / danger / info / neutral. */

/* Alerts (if present) */
.alert{
  border: 1px solid var(--border);
  background: rgba(255,255,255,.05);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.alert.success{ border-color: rgba(34,197,94,.28); background: rgba(34,197,94,.10); }
.alert.danger{ border-color: rgba(255,77,79,.28); background: rgba(255,77,79,.10); }

/* Bottom navigation */
.bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bottom-nav-h);
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(var(--bn-cols, 4), 1fr);
  background: rgba(255,255,255,.92);
  border-top: 1px solid var(--border-2);
  backdrop-filter: blur(14px);
  padding: 10px 10px calc(env(safe-area-inset-bottom) + 10px);
}

.bn-item{
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 16px;
  padding: 8px 6px;
  color: rgba(15,23,42,.72);
  transition: background .12s ease, transform .12s ease, color .12s ease;
}
.bn-item:hover{ background: rgba(15,23,42,.04); }
.bn-item:active{ transform: translateY(1px) scale(.99); }

.bn-ic{
  width: 24px;
  height: 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(15,23,42,.62);
}
.bn-ic svg{ width: 22px; height: 22px; }
.bn-tx{ font-size: 11px; font-weight: 900; letter-spacing: .01em; }

/* Active state (set by JS below; safe if absent) */
.bn-item.is-active{
  background: rgba(30,155,75,.10);
  border: 1px solid rgba(30,155,75,.22);
  color: rgba(15,23,42,.92);
}

.bn-item.is-active .bn-ic{ color: rgba(16,185,129,.98); }

/* Modal */
.modal-overlay{
  position: fixed;
  inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  background: rgba(0,0,0,.58);
  z-index: 1000;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--motion-dialog) var(--motion-ease), visibility 0s linear var(--motion-dialog);
}
.modal-overlay[aria-hidden="false"],
.modal-overlay.is-opening,
.modal-overlay.is-closing{
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.modal-overlay[aria-hidden="false"],
.modal-overlay.is-opening{
  opacity: 1;
}
.modal-overlay.is-closing{
  opacity: 0;
}
.modal{
  width: min(560px, 100%);
  max-width: 100%;
  max-height: calc(100dvh - max(36px, (env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 36px)));
  margin: auto;
  border-radius: 22px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  transform: translateY(var(--motion-dialog-offset)) scale(.985);
  opacity: .99;
  transition: transform var(--motion-dialog) var(--motion-ease), opacity var(--motion-dialog) var(--motion-ease);
}
.modal-overlay[aria-hidden="false"] > .modal,
.modal-overlay.is-opening > .modal{
  transform: translateY(0) scale(1);
  opacity: 1;
}
.modal-overlay.is-closing > .modal{
  transform: translateY(6px) scale(.992);
  opacity: .98;
}
.modal-sheet{
  transform: translateY(12px);
}
.modal-overlay[aria-hidden="false"] > .modal-sheet,
.modal-overlay.is-opening > .modal-sheet{
  transform: translateY(0);
}
.modal-overlay.is-closing > .modal-sheet{
  transform: translateY(10px);
}
.modal-header{
  padding: 14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border-2);
  flex: 0 0 auto;
}
.modal-title{ font-weight: 950; letter-spacing:-0.02em; }
.modal-body{
  padding: 16px;
  color: rgba(15,23,42,.86);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-footer{
  padding: 14px 16px;
  border-top: 1px solid var(--border-2);
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  flex: 0 0 auto;
}

.ios-steps{
  margin: 0;
  padding-left: 18px;
  line-height: 1.5;
}
.ios-steps li{ margin: 8px 0; }

.modal-close{
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  font-size: 18px;
  line-height: 38px;
  text-align:center;
}

@media (max-width: 640px){
  .modal-overlay{
    align-items:flex-start;
    padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
  }
  .modal{
    width: 100%;
    max-height: calc(100dvh - max(24px, (env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 24px)));
    border-radius: 20px;
  }
  .modal-footer{
    position: sticky;
    bottom: 0;
    background: #ffffff;
  }
}

/* Small floating sheet (faultSheet) */
#faultSheet{
  background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.99)) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  color: #0f172a !important;
}
#faultSheet input{
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}

/* Images inside content */
img{ max-width: 100%; height: auto; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; transition:none !important; animation:none !important; }
  .modal,
  .modal-sheet{ transform:none !important; }
}

/* Light mode fallback (optional): if user forces light theme */
@media (prefers-color-scheme: light){
  :root{ color-scheme: light; }
  /* keep the same premium light design */
}

/* Utility links */
.link{ color: var(--accent); font-weight: 900; }
.link:hover{ text-decoration: underline; }

/* Simple top nav (legacy views/layout.php) */
.nav{display:flex;gap:12px;align-items:center;justify-content:center;padding:14px 12px;border-bottom:1px solid var(--border-2);}
.nav a{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--border);font-weight:900;}
.nav a:hover{background:rgba(255,255,255,.08);}




/* Final polish pass micro-utilities */
.gap-14{gap:14px !important;}
.actions-end-between{justify-content:space-between !important;}


/* Core accent cleanup: keep brand green as accent, remove glow-heavy haze */
:root{
  --accent-soft: rgba(30,155,75,.06);
  --ring: rgba(37,99,235,.14);
  --btn-shadow: 0 8px 18px rgba(15,23,42,.07);
  --btn-shadow-hover: 0 12px 24px rgba(15,23,42,.10);
}
.order-card-highlight{
  border-color: rgba(15,23,42,.10);
  box-shadow: 0 14px 28px rgba(15,23,42,.06);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
}
.btn-primary{
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
}


/* Narrow auth surface contract */
.visual-auth-shell--client .auth-shell--client,
.visual-auth-shell--login .auth-shell--login,
.visual-auth-shell--master .auth-shell--master{max-width:780px;margin:0 auto;display:grid;gap:14px;padding:24px 26px;background:#fff;opacity:1;filter:none;}
.visual-auth-shell--client .auth-form--client,.visual-auth-shell--login .auth-form--login,.visual-auth-shell--master .auth-form--master{display:grid;gap:14px;opacity:1;filter:none;}
.visual-auth-shell--client .auth-form--client button,.visual-auth-shell--login .auth-form--login button,.visual-auth-shell--master .auth-form--master button{margin-top:4px;justify-self:start;min-width:220px;}
.visual-auth-shell--client .auth-shell--client .subtle-card,.visual-auth-shell--login .auth-shell--login .subtle-card,.visual-auth-shell--master .auth-shell--master .subtle-card,.visual-auth-shell--client .legal-consent-card,.visual-auth-shell--login .legal-consent-card,.visual-auth-shell--master .legal-consent-card{padding:16px 18px;background:#fff;border-color:rgba(15,23,42,.08);opacity:1;filter:none;}
.visual-auth-shell--client .auth-shell--client .muted,.visual-auth-shell--login .auth-shell--login .muted,.visual-auth-shell--master .auth-shell--master .muted{color:rgba(15,23,42,.7);}
.visual-auth-shell--client .auth-form--client input,.visual-auth-shell--client .auth-form--client textarea,.visual-auth-shell--client .auth-form--client select,.visual-auth-shell--login .auth-form--login input,.visual-auth-shell--login .auth-form--login textarea,.visual-auth-shell--login .auth-form--login select,.visual-auth-shell--master .auth-form--master input,.visual-auth-shell--master .auth-form--master textarea,.visual-auth-shell--master .auth-form--master select{background:#fff;color:rgba(15,23,42,.94);border-color:rgba(15,23,42,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.72);}
.visual-auth-shell--client .visual-surface--hero::before,.visual-auth-shell--login .visual-surface--hero::before{background:linear-gradient(180deg, rgba(255,255,255,.985), rgba(247,249,252,.96));}
.visual-auth-shell--master .visual-surface--hero::before{display:none;background:none;}
.visual-auth-shell--master .auth-shell--master{position:relative;z-index:1;background:linear-gradient(180deg, rgba(255,255,255,.992), rgba(249,250,251,.985));border-color:rgba(15,23,42,.08);box-shadow:0 16px 34px rgba(15,23,42,.055);}
@media (max-width:760px){.visual-auth-shell--client .auth-shell--client,.visual-auth-shell--login .auth-shell--login,.visual-auth-shell--master .auth-shell--master{padding:18px 18px;}.visual-auth-shell--client .auth-form--client button,.visual-auth-shell--login .auth-form--login button,.visual-auth-shell--master .auth-form--master button{width:100%;justify-self:stretch;}}

/* Motion safety: keep hover motion off touch/coarse pointers */
@media (hover: none), (pointer: coarse){
  .topbar-icon-btn:hover,
  .topbar-btn:hover,
  .btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-success:hover,
  .btn-danger:hover,
  .btn-outline:hover,
  .btn-ghost:hover,
  .btn-solid-primary:hover,
  .ghost:hover,
  .modal-close:hover,
  .notification-center__mark:hover,
  .notification-center__details:hover,
  .pill:hover,
  .chip:hover,
  .bn-item:hover{
    transform: none;
  }
}