/* /app redesign (2026-10-12, js/app-redesign.js). Presentation only.
   Loaded after tool-studio.css, right before ui-polish.css (which must stay the last stylesheet).
   1 tools strip   2 "All tools" menu   3 announcements   4 Process details   5 older tabs   6 how-it-works bars
   7 phones and tablets. */

:root{--arx-cyan:#1fc9f1;--arx-violet:#8a7dff;--arx-line:rgba(110,170,255,.18);--arx-muted:rgba(214,229,250,.66);
  --arx-panel:linear-gradient(180deg,rgba(14,26,60,.98),rgba(5,10,28,.99));--arx-grad:linear-gradient(135deg,#1fc9f1,#8a7dff)}

/* ---------- 1. tools strip: five main tools with a subtitle, the open secondary tool, ALL TOOLS, Guide */
html body.site-v2.page-tools .top-chrome #nav>.nav-cluster{display:none!important}
html body.site-v2.page-tools .top-chrome #nav>button:not(.arx-primary):not(.arx-all):not(.arx-guide-btn):not(.active),
html body.site-v2.page-tools .top-chrome #nav>.nav-group:not(:has(.is-current)){display:none!important}
#nav .arx-all,#nav .arx-guide-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;white-space:nowrap;cursor:pointer;font-family:Montserrat,system-ui,sans-serif}
.arx-all__chev{width:8px;height:8px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.arx-all[aria-expanded=true] .arx-all__chev{transform:rotate(-135deg);margin-top:3px}
.arx-guide-btn__icon{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1.5px solid currentColor;font:800 11px/1 Montserrat,system-ui,sans-serif}

@media (min-width:901px){
  html body.site-v2.page-tools .top-chrome #nav{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;
    gap:8px!important;overflow:visible!important;min-height:0!important;padding:10px 0!important;width:100%!important;min-width:0!important;max-width:100%!important;overflow-x:clip!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary{display:grid!important;grid-template-columns:auto auto;grid-template-rows:auto auto;
    column-gap:10px!important;row-gap:2px;align-items:center;align-content:center;justify-content:start;text-align:left;
    min-height:54px!important;padding:6px 16px 6px 12px!important;border-radius:14px!important;
    color:#fff!important;font:700 14px/1.15 Montserrat,system-ui,sans-serif!important;
    background:rgba(255,255,255,.035)!important;box-shadow:inset 0 0 0 1px var(--arx-line)!important;white-space:nowrap}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary:hover{background:rgba(31,201,241,.08)!important;box-shadow:inset 0 0 0 1px rgba(111,227,255,.38)!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary.active{background:linear-gradient(135deg,rgba(31,201,241,.24),rgba(138,125,255,.2))!important;
    box-shadow:inset 0 0 0 1px rgba(111,227,255,.62),0 8px 22px rgba(31,201,241,.14)!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary::before{display:block!important;grid-row:1/3;width:24px!important;height:24px!important;margin:0!important;
    color:#7fe9ff}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary.active::before{color:#fff!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary::after,
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary.active::after{content:attr(data-arx-sub)!important;display:block!important;position:static!important;
    grid-column:2;width:auto!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important;
    transform:none!important;opacity:1!important;color:rgba(214,229,250,.62)!important;font:500 11.5px/1.2 Montserrat,system-ui,sans-serif!important;letter-spacing:0!important;
    text-transform:none!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary.active::after{color:rgba(232,244,255,.86)!important}
  /* the open secondary tool: a chip after the main tools */
  html body.site-v2.page-tools .top-chrome #nav>button.active:not(.arx-primary):not(.arx-all):not(.arx-guide-btn),
  html body.site-v2.page-tools .top-chrome #nav>.nav-group:has(.is-current) .nav-group__trigger{min-height:44px!important;padding:0 14px!important;border-radius:12px!important;
    color:#fff!important;background:linear-gradient(135deg,rgba(31,201,241,.18),rgba(138,125,255,.14))!important;box-shadow:inset 0 0 0 1px rgba(111,227,255,.5)!important}
  html body.site-v2.page-tools .top-chrome #nav>button.active:not(.arx-primary):not(.arx-all):not(.arx-guide-btn){margin-left:6px!important}
  html body.site-v2.page-tools .top-chrome #nav>button.active:not(.arx-primary)::before,
  html body.site-v2.page-tools .top-chrome #nav>.nav-group:has(.is-current) .nav-group__trigger::before{display:block!important;width:18px!important;height:18px!important}
  /* ALL TOOLS: the brand gradient, impossible to miss */
  html body.site-v2.page-tools .top-chrome #nav>button.arx-all{margin-left:auto!important;min-height:48px!important;padding:0 20px!important;border:0!important;border-radius:14px!important;
    color:#04121c!important;background:var(--arx-grad)!important;box-shadow:0 10px 26px rgba(31,201,241,.28)!important;
    font:800 13px/1 Montserrat,system-ui,sans-serif!important;letter-spacing:.06em!important;text-transform:uppercase!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-all:hover,
  html body.site-v2.page-tools .top-chrome #nav>button.arx-all[aria-expanded=true]{filter:brightness(1.08);box-shadow:0 14px 32px rgba(31,201,241,.38)!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-guide-btn{min-height:48px!important;padding:0 14px!important;border-radius:14px!important;
    color:#dff6ff!important;background:rgba(255,255,255,.04)!important;box-shadow:inset 0 0 0 1px var(--arx-line)!important;font:700 13px/1 Montserrat,system-ui,sans-serif!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-guide-btn:hover{background:rgba(255,255,255,.09)!important;color:#fff!important}
  html body.site-v2.page-tools .top-chrome #nav>button:is(.arx-all,.arx-guide-btn)::before,
  html body.site-v2.page-tools .top-chrome #nav>button:is(.arx-all,.arx-guide-btn)::after{display:none!important}
}
  /* order: main tools, the open secondary tool, ALL TOOLS, Guide (the chip's DOM place is among the hidden buttons) */
@media (min-width:901px){
  html body.site-v2.page-tools .top-chrome #nav>*{order:20}
  html body.site-v2.page-tools .top-chrome #nav>button.active:not(.arx-primary):not(.arx-all):not(.arx-guide-btn),
  html body.site-v2.page-tools .top-chrome #nav>.nav-group:has(.is-current){order:10;font-size:13px!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-all{order:30}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-guide-btn{order:31}
}
/* main tools in this order everywhere (their DOM places differ) */
html body.site-v2.page-tools .top-chrome #nav>button[data-tab=process]{order:1}
html body.site-v2.page-tools .top-chrome #nav>button[data-tab=builder]{order:2}
html body.site-v2.page-tools .top-chrome #nav>button[data-tab=workshop]{order:3}
html body.site-v2.page-tools .top-chrome #nav>button[data-tab=infobox]{order:4}
html body.site-v2.page-tools .top-chrome #nav>button[data-tab=letters]{order:5}
html body.site-v2.page-tools .top-chrome #nav>button[data-tab=download]{order:6}
html body.site-v2.page-tools .top-chrome #nav>button[data-tab=gifopt]{order:7}
/* One grid with the site header (owner 2026-10-12, "по сетке"): the strip and the page content use the header's
   inset, so the first tool sits under the logo and the last button under the header's right edge. */
@media (min-width:901px){
  html body.site-v2.page-tools .top-chrome-inner{width:auto!important;max-width:none!important;margin:0!important;
    padding-left:var(--head-inset)!important;padding-right:var(--head-inset)!important;box-sizing:border-box!important}
  html body.site-v2.page-tools .shell>.main{width:auto!important;max-width:none!important;margin-left:var(--head-inset)!important;margin-right:var(--head-inset)!important}
}
/* the Rows and squares header repeats what the how-it-works bar says */
#tab-workshop .wsx-head__text{display:none!important}
@media (min-width:1241px){
  #tab-workshop .wsx-head{grid-template-columns:minmax(0,1fr) auto!important}
  #tab-workshop .wsx-type{display:flex;width:100%;min-width:0}
  #tab-workshop .wsx-type__btn{flex:1 1 0;min-width:0}
}
/* narrower computers: subtitles go first, then the Guide label */
/* Fitting (js/app-redesign.js fitStrip): the strip measures itself and steps down until it fits one row:
   1 no subtitles, 2 no Guide label, 3 tighter buttons, 4 no icons on the main tools, 5 two rows. */
@media (min-width:901px){
  html body.site-v2.page-tools .top-chrome #nav.arx-fit-1>button.arx-primary::after,
  html body.site-v2.page-tools .top-chrome #nav.arx-fit-1>button.arx-primary.active::after{display:none!important}
  html body.site-v2.page-tools .top-chrome #nav.arx-fit-1>button.arx-primary{min-height:46px!important;padding:0 14px 0 11px!important}
  html body.site-v2.page-tools .top-chrome #nav.arx-fit-1>button.arx-primary::before{grid-row:1!important;width:20px!important;height:20px!important}
  html body.site-v2.page-tools .top-chrome #nav.arx-fit-2>button.arx-guide-btn .arx-guide-btn__text{display:none}
  html body.site-v2.page-tools .top-chrome #nav.arx-fit-3{gap:6px!important}
  html body.site-v2.page-tools .top-chrome #nav.arx-fit-3>button.arx-primary{padding:0 10px!important;font-size:13px!important;column-gap:7px!important}
  html body.site-v2.page-tools .top-chrome #nav.arx-fit-3>button.arx-all{padding:0 14px!important;letter-spacing:.02em!important}
  html body.site-v2.page-tools .top-chrome #nav.arx-fit-3>button.active:not(.arx-primary):not(.arx-all):not(.arx-guide-btn){padding:0 10px!important;margin-left:0!important}
  html body.site-v2.page-tools .top-chrome #nav.arx-fit-4>button.arx-primary::before{display:none!important}
  html body.site-v2.page-tools .top-chrome #nav.arx-fit-5>button.arx-guide-btn{display:none!important}
  html body.site-v2.page-tools .top-chrome #nav.arx-fit-6{flex-wrap:wrap!important;row-gap:8px!important}
}

/* ---------- 2. "All tools" menu (round 5): a compact drop-down under the button with a search on top and four short
   columns; a bottom sheet on phones. */
body.arx-cat-open{overflow:hidden}
.arx-cat{position:fixed;inset:0;z-index:1200;font-family:Montserrat,system-ui,sans-serif}
.arx-cat__backdrop{position:absolute;inset:0;background:rgba(2,5,14,.35);opacity:0;transition:opacity .14s ease}
.arx-cat.is-open .arx-cat__backdrop{opacity:1}
.arx-cat__dialog{position:absolute;display:grid;grid-template-rows:auto minmax(0,1fr) auto;border:1px solid rgba(111,227,255,.28);border-radius:18px;
  background:linear-gradient(180deg,#0e1a3c,#060c22);box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.3);color:#e9f3ff;
  opacity:0;transform:translateY(-6px);transition:opacity .14s ease,transform .14s ease}
.arx-cat.is-open .arx-cat__dialog{opacity:1;transform:none}
/* a small arrow pointing at the button */
.arx-cat__dialog::after{content:"";position:absolute;top:-7px;left:calc(var(--arx-arrow,90%) - 7px);width:12px;height:12px;transform:rotate(45deg);
  border-top:1px solid rgba(111,227,255,.28);border-left:1px solid rgba(111,227,255,.28);background:#0e1a3c}
.arx-cat__head{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;border-bottom:1px solid var(--arx-line)}
.arx-cat__search{flex:1;display:flex;align-items:center;gap:12px;min-height:50px;padding:0 14px;border:1px solid var(--arx-line);border-radius:12px;background:rgba(4,10,26,.7);cursor:text}
.arx-cat__search:focus-within{border-color:rgba(127,233,255,.32);background:rgba(8,16,38,.85)}
html body .arx-cat .arx-cat__dialog .arx-cat__search input:is(:focus,:focus-visible){border:0!important;box-shadow:none!important;outline:none!important}
.arx-cat__search svg{flex:none;width:18px;height:18px;color:#7fe9ff}
html body .arx-cat__search input{flex:1;min-width:0;height:44px;margin:0;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:none!important;color:#fff;font:600 15px/1 Montserrat,system-ui,sans-serif}
.arx-cat__search input::placeholder{color:rgba(214,229,250,.5);font-weight:500}
.arx-cat__close{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--arx-line);border-radius:12px;background:rgba(255,255,255,.04);
  color:#e9f3ff;font:400 24px/1 system-ui,sans-serif;cursor:pointer}
.arx-cat__close:hover{background:rgba(255,255,255,.1)}
.arx-cat__body{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 14px;padding:14px 14px 10px;overflow:auto;overscroll-behavior:contain}
.arx-cat__body.is-searching{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.arx-cat__body.is-searching .arx-group{display:contents}
.arx-cat__body.is-searching .arx-group__title{display:none}
.arx-group{display:grid;align-content:start;gap:2px;min-width:0}
.arx-group[hidden]{display:none!important}
.arx-group__title{margin:4px 8px 6px;color:#7fe9ff;font:800 11px/1.2 Montserrat,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.arx-tool{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:9px 10px;border:1px solid transparent;border-radius:12px;background:transparent;
  color:inherit;text-align:left;cursor:pointer;transition:background .12s,border-color .12s}
.arx-tool[hidden]{display:none!important}
.arx-tool:hover,.arx-tool:focus-visible{background:rgba(31,201,241,.1);border-color:rgba(111,227,255,.3);outline:none}
.arx-tool.is-current{background:linear-gradient(135deg,rgba(31,201,241,.18),rgba(138,125,255,.14));border-color:rgba(111,227,255,.5)}
.arx-tool__icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,rgba(31,201,241,.2),rgba(138,125,255,.24));box-shadow:inset 0 0 0 1px rgba(127,233,255,.22)}
.arx-tool__icon::after{content:"";width:18px;height:18px;background:linear-gradient(135deg,#7fe9ff,#c4b8ff);
  -webkit-mask:var(--arx-icon) center/contain no-repeat;mask:var(--arx-icon) center/contain no-repeat}
.arx-tool__body{display:grid;gap:2px;min-width:0}
.arx-tool__name{display:flex;align-items:center;gap:6px;min-width:0}
.arx-tool__label{overflow:hidden;color:#fff;font:700 14.5px/1.25 Montserrat,system-ui,sans-serif;white-space:nowrap;text-overflow:ellipsis}
.arx-tool__hint{display:flex;align-items:center;gap:5px;min-width:0;color:var(--arx-muted);font:500 12px/1.35 Montserrat,system-ui,sans-serif;white-space:nowrap}
.arx-tool__hint-text{overflow:hidden;text-overflow:ellipsis;min-width:0}
.arx-tag{flex:none;display:inline-flex;align-items:center;height:16px;padding:0 6px;border-radius:8px;font:800 9px/1 Montserrat,system-ui,sans-serif;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.arx-tag--pro{background:linear-gradient(135deg,#ffe1a3,#ffc457);color:#2a1a00}
.arx-tag--beta{background:rgba(138,125,255,.22);color:#d6ceff}
.arx-tag--week{background:rgba(95,242,181,.14);color:#9ff5cf;text-transform:none;letter-spacing:0}
.arx-cat__empty{grid-column:1/-1;margin:18px 8px;color:var(--arx-muted);font:600 13.5px/1.4 Montserrat,system-ui,sans-serif;text-align:center}
.arx-cat__foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:12px 22px 14px;border-top:1px solid var(--arx-line)}
.arx-cat__link{min-height:32px;padding:0;border:0;background:none;color:#bff3ff;font:700 12.5px/1 Montserrat,system-ui,sans-serif;cursor:pointer}
.arx-cat__link:hover,.arx-cat__link:focus-visible{color:#fff;text-decoration:underline;outline:none}
.arx-cat__keys{margin-left:auto;color:rgba(214,229,250,.45);font:600 11.5px/1 Montserrat,system-ui,sans-serif}
@media (max-width:1180px){.arx-cat__body{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.arx-cat__dialog,.arx-cat__backdrop,.arx-tool{transition:none}}

/* ---------- 3. announcements: a slim line under the page title */
html body.site-v2.page-tools .ss-notices.arx-notices{position:static!important;inset:auto!important;display:grid;gap:6px;width:auto!important;
  max-width:none;margin:0 0 14px!important;pointer-events:auto;z-index:auto}
html body.site-v2.page-tools .ss-notices.arx-notices[hidden]{display:none!important}
html body.site-v2.page-tools .ss-notices.arx-notices>.ss-notice{grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;
  gap:10px!important;padding:8px 8px 8px 14px!important;border:1px solid var(--arx-line)!important;border-left:3px solid var(--arx-cyan)!important;
  border-radius:12px!important;background:rgba(10,20,46,.72)!important;box-shadow:none!important;backdrop-filter:none!important}
html body.site-v2.page-tools .ss-notices.arx-notices>.ss-notice[data-level=success]{border-left-color:#62e5a1!important}
html body.site-v2.page-tools .ss-notices.arx-notices>.ss-notice[data-level=warning]{border-left-color:#ffc857!important}
html body.site-v2.page-tools .ss-notices.arx-notices .ss-notice__signal{margin:0!important}
html body.site-v2.page-tools .ss-notices.arx-notices .ss-notice>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0}
html body.site-v2.page-tools .ss-notices.arx-notices .ss-notice strong{display:inline!important;font-size:12px!important;letter-spacing:.04em;text-transform:uppercase;color:#bff3ff}
html body.site-v2.page-tools .ss-notices.arx-notices .ss-notice p{margin:0!important;color:#d6e5f7!important;font-size:13px!important;line-height:1.45!important}
html body.site-v2.page-tools .ss-notices.arx-notices .ss-notice button{width:32px!important;height:32px!important;border-radius:9px!important}

/* ---------- 4. Process details */
html body.site-v2.page-tools #tab-process .pon-reopen{justify-self:start!important;align-self:start;width:auto!important;max-width:100%;
  min-height:34px;padding:0 14px 0 10px!important;border-radius:999px!important}
#processFilesCard.arx-done h2 .editor-step{position:relative;color:transparent!important;background:rgba(95,242,181,.16)!important;border-color:rgba(95,242,181,.6)!important}
#processFilesCard.arx-done h2 .editor-step::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#7ff5c4;font-weight:800}
html body.site-v2.page-tools #tab-process .process-link{border-color:var(--arx-line)!important;background:rgba(255,255,255,.025)!important;box-shadow:none!important}
html body.site-v2.page-tools #tab-process .process-link button[type=submit]{background:rgba(31,201,241,.14)!important;color:#dff6ff!important;
  border:1px solid rgba(111,227,255,.4)!important;box-shadow:none!important}
html body.site-v2.page-tools #tab-process .process-link button[type=submit]:hover:not(:disabled){background:rgba(31,201,241,.24)!important}
@media (min-width:561px){
  html body.site-v2.page-tools #processFilesCard:not(.arx-done) .asset-library-open,
  html body.site-v2.page-tools #processFilesCard:not(.arx-done) .process-sample{display:inline-flex!important;width:calc(50% - 5px)!important;
    vertical-align:top;justify-content:center;align-items:center;margin-top:10px!important}
  html body.site-v2.page-tools #processFilesCard .process-sample{margin-left:6px!important}
}
html body.site-v2.page-tools #tab-process #btnRun:not(:disabled),
html body.site-v2.page-tools #processDockRun:not(:disabled){border:0!important;background:var(--arx-grad)!important;color:#041019!important;
  box-shadow:0 12px 30px rgba(31,201,241,.25)!important}
html body.site-v2.page-tools #tab-process #btnRun:not(:disabled):hover{box-shadow:0 16px 36px rgba(31,201,241,.34)!important;filter:brightness(1.05)}
html body.site-v2.page-tools #tab-process #btnRun:disabled{cursor:not-allowed}
.arx-run-hint{display:flex;align-items:center;gap:8px;margin:10px 0 0;color:var(--arx-muted);font:500 12.5px/1.45 Montserrat,system-ui,sans-serif}
.arx-run-hint::before{content:"1";display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;
  border:1px solid rgba(111,227,255,.45);color:#7fe9ff;font:800 11px/1 Montserrat,system-ui,sans-serif}
.arx-run-hint[hidden]{display:none}
@media (max-width:760px){
  html body.site-v2.page-tools #wmPreviewCard #processRotationPanel:not([hidden]){display:flex!important;flex-direction:column!important;align-items:stretch!important;
    gap:10px!important;height:auto!important;min-height:0!important;margin-top:12px!important}
  html body.site-v2.page-tools #processRotationPanel .process-rotation__identity{flex:none!important;flex-wrap:wrap;min-width:0;max-width:100%}
  html body.site-v2.page-tools #processRotationPanel .process-rotation__identity strong{max-width:100%}
  html body.site-v2.page-tools #processRotationPanel .process-rotation__controls{display:flex!important;flex-wrap:wrap!important;gap:6px!important;min-width:0}
  html body.site-v2.page-tools #processRotationPanel .process-rotation__controls>*{flex:1 1 auto!important;min-width:0;min-height:40px}
}

/* ---------- 5. older tabs in the same look */
html body.site-v2.page-tools :is(#tab-doctor,#tab-design-ai) .insight-run,
html body.site-v2.page-tools #tab-dna #dnaAnalyze,
html body.site-v2.page-tools #tab-da #daLogin,
html body.site-v2.page-tools #tab-steam #steamExtensionAction,
html body.site-v2.page-tools #tab-preview #btnPv,
html body.site-v2.page-tools #tab-projects .btn[data-open-tool="builder"],
html body.site-v2.page-tools #tab-projects .tux-signin,
html body.site-v2.page-tools #tab-about .btn[data-tu-open="process"],
html body.site-v2.page-tools #tab-about #btnUnlock{border:0!important;background:var(--arx-grad)!important;color:#041019!important;
  box-shadow:0 10px 26px rgba(31,201,241,.22)!important}
html body.site-v2.page-tools :is(#tab-doctor,#tab-design-ai) .insight-run:hover:not(:disabled),
html body.site-v2.page-tools #tab-dna #dnaAnalyze:hover:not(:disabled),
html body.site-v2.page-tools #tab-da #daLogin:hover,
html body.site-v2.page-tools #tab-steam #steamExtensionAction:hover,
html body.site-v2.page-tools #tab-projects .btn[data-open-tool="builder"]:hover,
html body.site-v2.page-tools #tab-about .btn[data-tu-open="process"]:hover{filter:brightness(1.06);box-shadow:0 14px 32px rgba(31,201,241,.3)!important}
html body.site-v2.page-tools .tab>.fl-note{display:inline-flex!important;width:auto!important;max-width:100%;padding:8px 14px!important;border-radius:999px!important}
html body.site-v2.page-tools :is(#tab-doctor,#tab-design-ai) .insight-tool__intro>p[data-insight]{font-size:14px!important;line-height:1.6!important;color:var(--arx-muted)!important}

/* ---------- 6. how-it-works bars (Design, Rows and squares) */
.arx-flow{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,2fr);align-items:center;gap:14px 22px;margin:0 0 16px;padding:14px 16px;
  border:1px solid var(--arx-line);border-radius:18px;background:linear-gradient(135deg,rgba(31,201,241,.07),rgba(138,125,255,.07));
  font-family:Montserrat,system-ui,sans-serif;color:#e9f3ff}
.arx-flow__intro{display:grid;gap:4px;min-width:0}
.arx-flow__intro b{font:800 15px/1.3 Montserrat,system-ui,sans-serif;color:#fff}
.arx-flow__intro span{color:var(--arx-muted);font:500 12.5px/1.5 Montserrat,system-ui,sans-serif}
.arx-flow__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.arx-flow__step{min-width:0}
.arx-flow__btn{display:flex;align-items:center;gap:10px;width:100%;height:100%;min-height:58px;padding:10px 12px;border:1px solid var(--arx-line);border-radius:14px;
  background:rgba(4,10,26,.55);color:inherit;text-align:left;font:inherit}
button.arx-flow__btn{cursor:pointer}
button.arx-flow__btn:hover{border-color:rgba(111,227,255,.45);background:rgba(31,201,241,.08)}
.arx-flow__n{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(111,227,255,.5);color:#7fe9ff;
  font:800 13px/1 Montserrat,system-ui,sans-serif}
.arx-flow__text{display:grid;gap:2px;min-width:0}
.arx-flow__text b{font:700 13.5px/1.25 Montserrat,system-ui,sans-serif;color:#fff}
.arx-flow__text small{color:var(--arx-muted);font:500 11.5px/1.35 Montserrat,system-ui,sans-serif}
.arx-flow__step[data-state=current] .arx-flow__btn{border-color:rgba(111,227,255,.6);background:linear-gradient(135deg,rgba(31,201,241,.16),rgba(138,125,255,.12))}
.arx-flow__step[data-state=current] .arx-flow__n,.arx-flow__step[data-state=next] .arx-flow__n{border:0;background:var(--arx-grad);color:#041019}
.arx-flow__step[data-state=done] .arx-flow__n{position:relative;color:transparent;border-color:rgba(95,242,181,.6);background:rgba(95,242,181,.14)}
.arx-flow__step[data-state=done] .arx-flow__n::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#7ff5c4}
.arx-flow__step[data-state=todo] .arx-flow__btn{opacity:.75}
@media (max-width:1100px){.arx-flow{grid-template-columns:1fr}}
@media (max-width:640px){.arx-flow__steps{grid-template-columns:1fr}.arx-flow__btn{min-height:48px}}

/* ---------- 7. phones and tablets: a 4 x 2 grid (seven main tools + ALL TOOLS); the open tool on its own row */
@media (max-width:900px){
  html body.site-v2.page-tools .top-chrome{position:relative!important;top:auto!important;left:auto!important;right:auto!important}
  html body.site-v2.page-tools .top-chrome #nav{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px!important;overflow:visible!important;
    padding:8px 0 10px!important;min-height:0!important}
  html body.site-v2.page-tools .top-chrome-inner::after{display:none!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-guide-btn{display:none!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary,
  html body.site-v2.page-tools .top-chrome #nav>button.arx-all{min-width:0!important;min-height:52px!important;padding:6px!important;border-radius:12px!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;
    white-space:normal!important;text-align:center!important;line-height:1.15!important;font:700 12px/1.15 Montserrat,system-ui,sans-serif!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary{color:#fff!important;background:rgba(255,255,255,.04)!important;box-shadow:inset 0 0 0 1px var(--arx-line)!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary.active{background:linear-gradient(135deg,rgba(31,201,241,.24),rgba(138,125,255,.2))!important;
    box-shadow:inset 0 0 0 1px rgba(111,227,255,.55)!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary::before{display:block!important;width:18px!important;height:18px!important;margin:0!important;color:#7fe9ff}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary::after{display:none!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-all{color:#04121c!important;background:var(--arx-grad)!important;border:0!important;
    box-shadow:0 8px 20px rgba(31,201,241,.25)!important;font-weight:800!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-all .arx-all__chev{display:none}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-all::before,
  html body.site-v2.page-tools .top-chrome #nav>button.arx-all::after{display:none!important}
  html body.site-v2.page-tools .top-chrome #nav>button.active:not(.arx-primary):not(.arx-all):not(.arx-guide-btn),
  html body.site-v2.page-tools .top-chrome #nav>.nav-group:has(.is-current){grid-column:1/-1;order:10}
  html body.site-v2.page-tools .top-chrome #nav>button.active:not(.arx-primary):not(.arx-all):not(.arx-guide-btn),
  html body.site-v2.page-tools .top-chrome #nav>.nav-group:has(.is-current) .nav-group__trigger{width:100%;min-height:42px!important;justify-content:center!important;
    border-radius:12px!important;color:#fff!important;background:linear-gradient(135deg,rgba(31,201,241,.2),rgba(138,125,255,.16))!important;
    box-shadow:inset 0 0 0 1px rgba(111,227,255,.45)!important}
  .arx-cat__dialog{left:0!important;right:0;top:auto!important;bottom:0;width:100%!important;max-height:calc(100dvh - 40px)!important;border-radius:20px 20px 0 0;transform:translateY(20px)}
  .arx-cat__dialog::after{display:none}
  .arx-cat__body{grid-template-columns:1fr;padding-bottom:10px}
  .arx-cat__foot{padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .arx-cat__keys{display:none}
  .arx-tool{min-height:56px}
}

/* ALL TOOLS is always the last cell; phone labels fit their cell (long Russian words). */
html body.site-v2.page-tools .top-chrome #nav>button.arx-all{order:30}
@media (max-width:900px){
  html body.site-v2.page-tools .top-chrome #nav{gap:5px!important}
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary,
  html body.site-v2.page-tools .top-chrome #nav>button.arx-all{font-size:11px!important;letter-spacing:-.01em!important;padding:6px 2px!important}
}
@media (min-width:601px) and (max-width:900px){
  html body.site-v2.page-tools .top-chrome #nav>button.arx-primary,
  html body.site-v2.page-tools .top-chrome #nav>button.arx-all{font-size:12.5px!important}
}
@media (max-width:400px){html body.site-v2.page-tools .top-chrome #nav>button:is(.arx-all,[data-tab=gifopt]){font-size:10px!important}}
/* Profile tab: the embedded profile editor (an iframe with its own three columns) needs the full width it had before
   the grid change, or its right column is cut off (owner screenshot 2026-10-12). */
@media (min-width:901px){
  html body.site-v2.page-tools .shell>.main:has(#tab-preview.active){margin-left:16px!important;margin-right:16px!important}
}
/* Avatars without a picture show the site icon (owner 2026-10-12); js/app-redesign.js swaps in the visitor's own. */
body .pon-demo__avatar{background:var(--sm-avatar,url('/static/img/favicon/favicon-512.png')) center/cover no-repeat!important}
#tab-dna #dnaAvatarFallback{font-size:0!important;background:var(--sm-avatar,url('/static/img/favicon/favicon-512.png')) center/cover no-repeat!important}

/* ---------- 8. what the strip hides (2026-10-15, owner: "people must see there is much more than the strip").
   ALL TOOLS says "12 more tools", a second line cycles through their names (js/app-redesign.js tick) and three round
   icons of those tools overlap in front of the text. Round 2: the separate icon row under the strip was removed (owner:
   overloaded). Until the menu is opened once the button breathes softly (.arx-all--hint). */
.arx-all__text{display:grid;justify-items:start;min-width:0;text-align:left}
.arx-all__label{font:inherit;white-space:nowrap}
.arx-all__tick{display:block;width:0;min-width:100%;height:14px;overflow:hidden}
.arx-all__tick>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 11px/14px Montserrat,system-ui,sans-serif;letter-spacing:0;text-transform:none;opacity:.78}
@media (min-width:901px){
  html body.site-v2.page-tools .top-chrome #nav>button.arx-all{min-height:50px!important;padding:0 16px 0 18px!important;gap:11px!important;
    font:800 14px/1.15 Montserrat,system-ui,sans-serif!important;letter-spacing:0!important;text-transform:none!important}
  html body.site-v2.page-tools .top-chrome #nav.arx-fit-3>button.arx-all{padding:0 12px!important}
}
@media (max-width:900px){
  .arx-all__text{justify-items:center;text-align:center}
  .arx-all__label{white-space:normal}
  .arx-all__tick{display:none}
}

.arx-all__short{display:none}
@media (max-width:900px){.arx-all__long{display:none}.arx-all__short{display:inline}}
/* tight strips (fit 3+): the short "12 more" label, no ticker, before anything wraps */
@media (min-width:901px){
  html body.site-v2.page-tools .top-chrome #nav:is(.arx-short-all,.arx-fit-3,.arx-fit-4,.arx-fit-5,.arx-fit-6) .arx-all__long,
  html body.site-v2.page-tools .top-chrome #nav:is(.arx-short-all,.arx-fit-3,.arx-fit-4,.arx-fit-5,.arx-fit-6) .arx-all__tick{display:none}
  html body.site-v2.page-tools .top-chrome #nav:is(.arx-short-all,.arx-fit-3,.arx-fit-4,.arx-fit-5,.arx-fit-6) .arx-all__short{display:inline}
}
.arx-all__stack{display:flex;flex:none;align-items:center;padding-left:7px}
.arx-all__stack i{position:relative;display:block;width:24px;height:24px;margin-left:-7px;border-radius:50%;background:#071431;
  box-shadow:0 0 0 2px rgba(255,255,255,.7)}
.arx-all__stack i:nth-child(2){opacity:.9}
.arx-all__stack i:nth-child(3){opacity:.75}
.arx-all__stack i::after{content:"";position:absolute;inset:5px;background:linear-gradient(135deg,#7fe9ff,#c6beff);
  -webkit-mask:var(--arx-icon) center/contain no-repeat;mask:var(--arx-icon) center/contain no-repeat}
@media (max-width:900px){
  .arx-all__stack{padding-left:5px}
  .arx-all__stack i{width:18px;height:18px;margin-left:-5px}
  .arx-all__stack i::after{inset:3.5px}
}
html body.site-v2.page-tools .top-chrome #nav>button.arx-all.arx-all--hint{animation:arx-hint 2.6s ease-in-out infinite}
@keyframes arx-hint{0%,100%{box-shadow:0 10px 26px rgba(31,201,241,.28),0 0 0 0 rgba(127,233,255,.45)}
  50%{box-shadow:0 10px 26px rgba(31,201,241,.28),0 0 0 7px rgba(127,233,255,0)}}
@media (prefers-reduced-motion:reduce){html body.site-v2.page-tools .top-chrome #nav>button.arx-all.arx-all--hint{animation:none}}
/* extra tools that join the strip when there is room (js/app-redesign.js EXTRA): right after the main ones */
html body.site-v2.page-tools .top-chrome #nav>button.arx-extra[data-tab=upscale]{order:8}
html body.site-v2.page-tools .top-chrome #nav>button.arx-extra[data-tab=convert]{order:9}

/* Strip icons for the tools that had none (shown as the open-tool chip); same pictures as the All tools menu. */
.page-tools .top-chrome .nav button[data-tab="dna"],.top-chrome .nav button[data-tab="dna"]{--tool-icon:url('/static/img/tool-icons/check.svg?v=1')}
.page-tools .top-chrome .nav button[data-tab="projects"],.top-chrome .nav button[data-tab="projects"]{--tool-icon:url('/static/img/tool-icons/design.svg?v=1')}