/*
 * Shared responsive geometry for every HTML surface.
 * Content styles stay local; shell geometry and control dimensions do not.
 */
:root{
  --rc-rail:248px;
  --rc-public-max:1760px;
  --rc-control:44px;
  --rc-control-sm:40px;
  --rc-page-pad:clamp(18px,2.2vw,48px);
  --rc-shell-gap:clamp(18px,2.4vw,48px);
}

html,
body{
  min-width:320px;
  overflow-x:hidden;
}

body{
  font-family:var(--ds-font-sans);
}

button,
a,
input,
select,
textarea{
  font-family:var(--ds-font-sans);
}

body[data-release] button,
body[data-release] input,
body[data-release] select,
body[data-release] textarea,
body[data-release] [role="button"],
body.public-page button,
body.public-page input,
body.public-page select,
body.public-page textarea,
body.public-page [role="button"]{
  box-sizing:border-box;
}

body[data-release] button,
body[data-release] [role="button"],
body.public-page button,
body.public-page [role="button"]{
  min-height:var(--rc-control);
}

body[data-release] :is(
  .account-theme-toggle,
  .locale-switcher__trigger,
  .rail-theme-switch,
  .rail-community-bonus,
  .usage-market-zoom button,
  .usage-market-period button,
  .usage-chart-settings-popover button
){
  min-height:var(--rc-control-sm);
}

body.public-page :is(
  .theme-toggle button,
  .bulb-theme__cap,
  .bulb-theme__glass
){
  min-height:0;
}

body.public-page :is(
  input:not([type="hidden"]):not([type="range"]),
  select,
  textarea
){
  min-height:var(--rc-control);
  box-sizing:border-box;
}

body[data-page="landing"] .native-command-line code{
  min-width:0;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal;
}

/* App and admin use one stable desktop coordinate system. */
@media(min-width:961px){
  body[data-release]{
    padding-bottom:0!important;
  }

  body[data-release] .app-shell{
    min-width:0;
    padding-top:0!important;
  }

  body[data-release] .app-shell>.rail{
    position:fixed!important;
    z-index:70!important;
    inset:0 auto 0 0!important;
    width:var(--rc-rail)!important;
    height:100dvh!important;
    min-width:0!important;
    padding:20px 14px 14px!important;
    border:0!important;
    border-right:1px solid var(--ds-border)!important;
    border-radius:0!important;
    background:var(--ds-surface-default)!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    transform:none!important;
  }

  body[data-release] .app-shell>.rail .brand{
    min-height:58px!important;
    padding:2px 8px 16px!important;
    border-bottom:1px solid var(--ds-border-soft)!important;
  }

  body[data-release] .app-shell>.rail .rail-navigation-surface{
    display:flex!important;
    min-height:0!important;
    flex:1 1 auto!important;
    flex-direction:column!important;
  }

  body[data-release] .app-shell>.rail .rail-nav{
    min-height:0!important;
    flex:1 1 auto!important;
    margin-top:16px!important;
    gap:4px!important;
    overflow-y:auto!important;
  }

  body[data-release] .app-shell>.rail .rail-foot{
    position:fixed!important;
    z-index:75!important;
    top:12px!important;
    right:var(--rc-page-pad)!important;
    bottom:auto!important;
    left:auto!important;
    width:auto!important;
    height:52px!important;
    min-height:52px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:8px!important;
  }

  body[data-release] .app-shell>.rail .rail-foot .rail-utilities{
    order:1!important;
  }

  body[data-release] .app-shell>.rail .rail-foot .notification-bell{
    order:2!important;
    width:44px!important;
    height:44px!important;
    min-height:44px!important;
    flex:0 0 44px!important;
  }

  body[data-release] .app-shell>.rail .rail-foot .identity-button{
    order:3!important;
    width:auto!important;
    max-width:220px!important;
    min-height:44px!important;
    height:44px!important;
  }

  body[data-release] .app-shell>.app-topbar{
    position:fixed!important;
    z-index:69!important;
    top:0!important;
    right:0!important;
    left:var(--rc-rail)!important;
    width:auto!important;
    height:76px!important;
    min-height:76px!important;
    padding:0 var(--rc-page-pad)!important;
    border:0!important;
    border-bottom:1px solid var(--ds-border-soft)!important;
    border-radius:0!important;
    background:color-mix(in srgb,var(--ds-background) 92%,transparent)!important;
    box-shadow:none!important;
    backdrop-filter:blur(18px)!important;
  }

  body[data-release] .app-shell>.app-topbar .topbar-nav{
    min-width:0!important;
    margin:0 280px 0 0!important;
    justify-content:flex-start!important;
    gap:4px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }

  body[data-release] .app-shell>.app-topbar .topbar-nav::-webkit-scrollbar{
    display:none!important;
  }

  body[data-release] .app-shell>.app-topbar .topbar-quick-link,
  body[data-release] .app-shell>.app-topbar .topbar-more-trigger{
    min-height:44px!important;
    padding-inline:12px!important;
    border-radius:10px!important;
  }

  body[data-release] .app-shell>.workspace{
    width:calc(100% - var(--rc-rail))!important;
    max-width:none!important;
    min-width:0!important;
    margin:0 0 0 var(--rc-rail)!important;
    padding:96px var(--rc-page-pad) 96px!important;
  }

  body[data-release] .app-shell>.workspace>.route-view{
    width:100%;
    min-width:0;
  }

  body[data-release] .app-shell>.workspace .workspace-head{
    min-height:64px;
    margin-bottom:28px;
    gap:18px;
  }

  body[data-release] .app-shell>.workspace .workspace-head h1{
    max-width:100%;
    font-size:clamp(32px,3.2vw,52px);
    line-height:1.02;
    letter-spacing:0;
  }

  body[data-release] .app-shell>.workspace .workspace-actions{
    flex-wrap:wrap;
    gap:8px;
  }
}

/* One control rhythm across app, admin, public and special pages. */
:is(body[data-release],body.public-page) :is(
  .button,
  .public-login,
  .public-button,
  .public-status-link,
  .status-refresh,
  .status-home,
  .family-button,
  .icon-button,
  .client-button,
  .mobile-link,
  [role="button"]
){
  min-height:var(--rc-control);
  border-radius:var(--ds-radius-control);
}

body[data-release] :is(.button,.public-login,.public-button,.status-refresh,.status-home,.family-button){
  padding-inline:16px;
  font-size:14px;
  line-height:1.2;
}

body[data-release] :is(.icon-button,[aria-label="Закрыть"],[aria-label="Обновить уведомления"]){
  width:var(--rc-control);
  min-width:var(--rc-control);
  padding:0;
}

body[data-release] :is(.button,.icon-button,.client-button,.mobile-link,[role="button"]):focus-visible,
body.public-page :is(.public-login,.public-button,.status-refresh,.status-home,.public-menu-button,[role="button"]):focus-visible{
  outline:2px solid var(--ds-focus-ring);
  outline-offset:3px;
}

body[data-release] :is(
  .field input,
  .field select,
  .field textarea,
  .dialog-fields input,
  .dialog-fields select,
  .dialog-fields textarea,
  .settings-form input,
  .settings-form select,
  .settings-form textarea,
  .promo-form input,
  .chat-toolbar select,
  .topup-form input,
  .topup-form select
){
  min-height:var(--rc-control);
  border-radius:var(--ds-radius-control);
}

body[data-release] :is(.field textarea,.dialog-fields textarea,.settings-form textarea){
  min-height:112px;
  padding-block:12px;
}

body[data-release] :is(.filters,.summary-strip,.data-table,.cabinet-panel,.key-row,.profile-card,.settings-section,.status-board,.support-link,.integration-doc,.chat-layout,.app-dialog .dialog-card){
  min-width:0;
}

body[data-release] :is(
  [role="tablist"],
  .tabs,
  .tab-list,
  .segmented,
  .personalization-segmented,
  .model-provider-tabs,
  .docs-ecosystem-tabs,
  .docs-ecosystem-model-tabs,
  .auth-tabs
){
  min-width:0;
  overflow-x:auto;
  scrollbar-width:thin;
}

body[data-release] :is([role="tablist"] [role="tab"],.tabs button,.tab-list button,.segmented button,.personalization-segmented button,.model-provider-tabs button,.auth-tabs button){
  min-height:var(--rc-control-sm);
  white-space:nowrap;
}

body.public-page :is(.public-topbar,.legal-page .site-header,.status-topbar){
  width:min(calc(100% - 48px),var(--rc-public-max));
}

body.public-page :is(.public-topbar,.legal-page .site-header,.status-topbar){
  min-height:68px;
}

body.public-page :is(.public-nav a,.desktop-nav a){
  min-height:var(--rc-control-sm);
  white-space:nowrap;
}

body.public-page :is(.public-login,.public-button,.status-home,.status-refresh,.legal-page .button){
  min-height:var(--rc-control);
  padding-inline:16px;
}

body.public-page .public-error-main{
  width:min(calc(100% - 48px),var(--rc-public-max));
}

body.public-page .public-docs-page .wrap,
body.public-page .legal-page .legal-shell,
body.public-page .status-dashboard,
body.public-page .how-shell{
  width:min(calc(100% - 48px),var(--rc-public-max));
}

body[data-page="landing"] .shell{
  width:min(calc(100% - 48px),var(--rc-public-max));
}

body[data-page="landing"] .hero{
  padding-right:max(24px,calc((100vw - var(--rc-public-max)) / 2));
  padding-left:max(24px,calc((100vw - var(--rc-public-max)) / 2));
}

body[data-page="landing"] .hero-stage{
  right:max(24px,calc((100vw - var(--rc-public-max)) / 2));
  width:min(48vw,760px);
}

body[data-page="landing"] .topbar{
  width:min(calc(100% - 48px),var(--rc-public-max));
}

@media(min-width:1600px){
  body[data-release] .app-shell>.workspace{
    padding-inline:clamp(32px,2.5vw,64px)!important;
  }

  body[data-release] .app-shell>.workspace .cabinet-metrics{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  body[data-release] .app-shell>.workspace .metric-row{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  body[data-release] .app-shell>.workspace .filters{
    grid-template-columns:minmax(220px,1.4fr) repeat(3,minmax(150px,.8fr)) auto;
  }
}

@media(max-width:1180px) and (min-width:961px){
  :root{
    --rc-rail:224px;
  }

  body[data-release] .app-shell>.rail{
    padding-inline:12px!important;
  }

  body[data-release] .app-shell>.workspace{
    padding-inline:24px!important;
  }

  body[data-release] .app-shell>.app-topbar{
    padding-inline:24px!important;
  }

  body[data-release] .app-shell>.app-topbar .topbar-nav{
    margin-right:230px!important;
  }

  body[data-release] .app-shell>.workspace .workspace-head{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  body[data-release] .app-shell>.workspace .workspace-actions{
    width:100%;
    justify-content:flex-start;
  }

  body[data-release] .app-shell>.workspace .cabinet-metrics,
  body[data-release] .app-shell>.workspace .metric-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-release] .app-shell>.workspace .cabinet-grid,
  body[data-release] .app-shell>.workspace .overview-lead{
    grid-template-columns:1fr;
  }

  body[data-release] .app-shell>.workspace .filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-release] .app-shell>.workspace .filter-actions{
    grid-column:1/-1;
    justify-content:flex-start;
  }
}

@media(max-width:960px){
  body[data-release]{
    padding-bottom:calc(84px + env(safe-area-inset-bottom))!important;
  }

  body[data-release] .app-shell{
    padding-top:76px!important;
  }

  body[data-release] .app-shell>.app-topbar{
    display:none!important;
  }

  body[data-release] .app-shell>.rail{
    position:fixed!important;
    z-index:70!important;
    top:8px!important;
    right:10px!important;
    bottom:auto!important;
    left:10px!important;
    width:auto!important;
    height:60px!important;
    min-height:60px!important;
    padding:7px 10px!important;
    border:1px solid var(--ds-border)!important;
    border-radius:var(--ds-radius-shell)!important;
    background:color-mix(in srgb,var(--ds-surface-default) 94%,transparent)!important;
    box-shadow:var(--ds-shadow-soft)!important;
    backdrop-filter:blur(18px)!important;
  }

  body[data-release] .app-shell>.rail>.brand{
    display:flex!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    flex:1 1 auto!important;
    padding:0 4px!important;
    border:0!important;
  }

  body[data-release] .app-shell>.rail>.brand .brand-mark{
    width:32px!important;
    height:32px!important;
  }

  body[data-release] .app-shell>.rail>.brand .brand-copy{
    min-width:0!important;
  }

  body[data-release] .app-shell>.rail .rail-navigation-surface{
    display:none!important;
  }

  body[data-release] .app-shell>.rail .rail-foot{
    position:static!important;
    display:grid!important;
    width:140px!important;
    height:44px!important;
    min-height:44px!important;
    flex:0 0 140px!important;
    grid-template-columns:44px 44px 44px!important;
    gap:4px!important;
    align-items:center!important;
  }

  body[data-release] .app-shell>.rail .rail-foot .rail-utilities{
    display:none!important;
  }

  body[data-release] .app-shell>.rail .rail-foot .notification-bell,
  body[data-release] .app-shell>.rail .rail-foot .identity-button{
    width:44px!important;
    height:44px!important;
    min-height:44px!important;
    max-width:44px!important;
    padding:0!important;
    border-radius:var(--ds-radius-control)!important;
  }

  body[data-release] .app-shell>.rail .rail-foot .identity-button{
    display:grid!important;
    grid-template-columns:44px!important;
    border:1px solid var(--ds-border)!important;
    background:var(--ds-surface-raised-default)!important;
  }

  body[data-release] .app-shell>.rail .rail-foot .identity-button>span:nth-child(2),
  body[data-release] .app-shell>.rail .rail-foot .identity-chevron{
    display:none!important;
  }

  body[data-release] .app-shell>.rail .rail-foot .identity-button .avatar{
    width:34px!important;
    height:34px!important;
    margin:auto!important;
  }

  body[data-release] .app-shell>.workspace{
    width:100%!important;
    min-height:calc(100dvh - 76px)!important;
    margin:0!important;
    padding:24px 20px calc(112px + env(safe-area-inset-bottom))!important;
  }

  body[data-release] .app-shell>.workspace .workspace-head{
    min-height:56px;
    margin-bottom:24px;
    align-items:flex-start;
    flex-wrap:wrap;
  }

  body[data-release] .app-shell>.workspace .workspace-head h1{
    font-size:clamp(30px,7vw,42px);
  }

  body[data-release] .app-shell>.workspace .workspace-actions{
    width:100%;
    justify-content:flex-start;
  }

  body[data-release] .app-shell>.mobile-nav{
    display:grid!important;
    right:12px!important;
    bottom:calc(10px + env(safe-area-inset-bottom))!important;
    left:12px!important;
    min-height:68px!important;
    padding:5px!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    border:1px solid var(--ds-border)!important;
    border-radius:var(--ds-radius-shell)!important;
    background:color-mix(in srgb,var(--ds-surface-default) 94%,transparent)!important;
    box-shadow:var(--ds-shadow-soft)!important;
    backdrop-filter:blur(18px)!important;
  }

  body[data-release] .app-shell>.workspace :is(.cabinet-metrics,.metric-row){
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-release] .app-shell>.workspace :is(.cabinet-grid,.overview-lead,.profile-layout,.support-status,.ledger-head,.referral-hero){
    grid-template-columns:1fr;
  }

  body[data-release] .app-shell>.workspace .filters{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-release] .app-shell>.workspace .filter-actions{
    grid-column:1/-1;
    justify-content:flex-start;
  }
}

@media(max-width:620px){
  body[data-release] .app-shell>.workspace{
    padding-inline:12px!important;
  }

  body[data-release] .app-shell>.workspace .workspace-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-release] .app-shell>.workspace .workspace-actions .button{
    width:100%;
  }

  body[data-release] .app-shell>.workspace :is(.cabinet-metrics,.metric-row,.filters,.summary-strip){
    grid-template-columns:1fr;
  }

  body[data-release] .app-shell>.workspace .filter-actions{
    grid-column:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-release] .app-shell>.workspace .filter-actions .button{
    width:100%;
  }

  body[data-release] .app-shell>.workspace .section-label{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  body[data-release] .app-shell>.workspace .section-label>*{
    max-width:100%;
  }

  body[data-release] .app-shell>.workspace :is(.data-table,.table-scroll){
    max-width:100%;
    overflow-x:auto;
  }

  body[data-release] .app-shell>.workspace .data-table{
    border-radius:var(--ds-radius-control);
  }

  body.public-page :is(.public-topbar,.legal-page .site-header,.status-topbar,.public-error-main,.public-docs-page .wrap,.legal-page .legal-shell,.status-dashboard,.how-shell),
  body[data-page="landing"] .shell{
    width:calc(100% - 24px);
  }

  body[data-page="landing"] .hero{
    padding-right:12px;
    padding-left:12px;
  }

  body[data-page="landing"] .hero-stage{
    right:12px;
    width:calc(100% - 24px);
  }
}

@media(max-width:380px){
  body[data-release] .app-shell>.rail{
    padding-inline:7px!important;
  }

  body[data-release] .app-shell>.rail>.brand .brand-copy{
    display:none!important;
  }

  body[data-release] .app-shell>.rail .rail-foot{
    width:92px!important;
    flex-basis:92px!important;
    grid-template-columns:44px 44px!important;
  }

  body[data-release] .app-shell>.rail .rail-foot .notification-bell{
    display:none!important;
  }

  body[data-release] .app-shell>.workspace{
    padding-inline:10px!important;
  }

  body[data-release] .app-shell>.workspace .workspace-actions{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  body[data-release] *,
  body[data-release] *::before,
  body[data-release] *::after,
  body.public-page *,
  body.public-page *::before,
  body.public-page *::after{
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
  }
}