/* LocalNN constructor — warm editorial brand skin (cohesive with index.css / marshrut / catalog).
   Tokens, type scale, shadows and motion inherited verbatim from the site. Self-hosted woff2
   (font-src 'self'); Bebas has no Cyrillic, so Cyrillic display falls to Inter (the /marshrut
   pattern), Bebas is reserved for Latin accents (coordinates, capsule number). The canvas print
   pipeline (constructor.js) is untouched — this file is skin only. */

/* ---------- self-hosted fonts (CSP: font-src 'self') ---------- */
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/constructor/fonts/inter-300-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:300;font-display:swap;src:url('/assets/constructor/fonts/inter-300-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/constructor/fonts/inter-400-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/constructor/fonts/inter-400-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/constructor/fonts/inter-500-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/constructor/fonts/inter-500-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/constructor/fonts/inter-600-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/constructor/fonts/inter-600-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/constructor/fonts/jbmono-400-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/constructor/fonts/jbmono-400-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/constructor/fonts/jbmono-500-cyr.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/constructor/fonts/jbmono-500-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/constructor/fonts/bebas-400-lat.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- tokens (inherited from index.css) ---------- */
:root{
  --color-beige:#E8DED1; --color-beige-light:#F2EDE6; --color-beige-dark:#D5C9B8;
  --color-black:#1A1A1A; --color-black-soft:#2D2D2D;
  --color-red:#DA291C; --color-red-hover:#C1231A;
  --color-white:#FAFAF8; --color-gray:#8A8579; --color-gray-light:#B5AFA6;

  --ground:var(--color-beige-light); --surface:var(--color-white); --surface-sunken:var(--color-beige);
  --ink:var(--color-black); --ink-soft:var(--color-black-soft); --ink-muted:var(--color-gray);
  --accent:var(--color-red); --accent-hover:var(--color-red-hover); --accent-ink:var(--color-white);
  --line:rgba(26,26,26,0.08); --line-strong:rgba(26,26,26,0.18); --tint:rgba(26,26,26,0.04);
  --accent-tint:rgba(218,41,28,0.08);

  --font-display:'Bebas Neue',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --space-xs:0.5rem; --space-sm:1rem; --space-md:1.5rem; --space-lg:2.5rem; --space-xl:4rem;
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-pill:999px;

  --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.76,0,0.24,1);
  --ease-spring:cubic-bezier(0.22,1,0.36,1);
  --dur-micro:160ms; --dur-state:260ms; --dur-modal:380ms;
  --duration-normal:400ms; --rule-soft:rgba(33,31,28,0.07);   /* for the shared header/footer, copied from index.css */

  --shadow-card:0 1px 0 rgba(26,26,26,0.04);
  --shadow-card-hover:0 24px 56px rgba(26,26,26,0.1),0 8px 18px rgba(26,26,26,0.05);
  --shadow-float:0 6px 18px rgba(26,26,26,0.14),0 2px 5px rgba(26,26,26,0.08);
  --shadow-stage:0 20px 50px rgba(26,26,26,0.08),0 6px 16px rgba(26,26,26,0.04);
  --shadow-cta:0 6px 18px rgba(218,41,28,0.22),0 2px 6px rgba(218,41,28,0.12);
  --shadow-cta-hover:0 14px 30px rgba(218,41,28,0.34),0 4px 10px rgba(218,41,28,0.18);
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html,body{margin:0;}
body{
  background:var(--ground); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-text-size-adjust:100%;
  padding-top:3.5rem;   /* clear the fixed site header */
  padding-bottom:env(safe-area-inset-bottom);
}

/* focus ring — a designed object, present everywhere for keyboard */
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm);}
:focus:not(:focus-visible){outline:none;}

/* ---------- shared site header + footer ----------
   Copied from index.css onto the constructor's own tokens + self-hosted fonts (same
   Inter / Bebas / JetBrains families), so the chrome matches the site 1:1 without pulling
   index.css (its bare-element rules would leak into the editor) or Google Fonts — the
   strict CSP (font-src 'self', script-src 'self') stays intact; the burger toggles from
   constructor.js. */
.container{width:100%; max-width:1200px; margin:0 auto; padding:0 var(--space-md);}
.header{position:fixed; top:0; left:0; right:0; z-index:1000; padding:1rem 0;
  transition:background 0.4s var(--ease-spring), -webkit-backdrop-filter 0.4s var(--ease-spring), backdrop-filter 0.4s var(--ease-spring), padding 0.32s var(--ease-spring);}
.header.scrolled{padding:0.75rem 0; background:rgba(242,237,230,0.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--rule-soft);}
.header .container{display:flex; align-items:center; justify-content:space-between;}
.logo{display:inline-flex; align-items:center; position:relative;}
.logo img{height:1.5rem; width:auto; display:block;}
.nav-links{display:flex; align-items:center; gap:var(--space-md);}
.nav-links a{font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--color-black-soft); position:relative; padding:0.375rem 0; text-decoration:none; transition:color 0.22s var(--ease-out);}
.nav-links a::after{content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:var(--color-red); transform:scaleX(0); transform-origin:right; transition:transform 0.4s var(--ease-spring);}
.nav-links a:hover{color:var(--color-black);}
.nav-links a:hover::after{transform:scaleX(1); transform-origin:left;}
.burger{display:none; flex-direction:column; gap:5px; width:28px; cursor:pointer; z-index:1001; background:none; border:0; padding:0;}
.burger span{width:100%; height:2px; background:var(--color-black); transition:all var(--duration-normal) var(--ease-out); transform-origin:center;}
.burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.active span:nth-child(2){opacity:0; transform:scaleX(0);}
.burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{position:fixed; inset:0; background:var(--color-beige-light); z-index:999; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:var(--space-md); padding:5.5rem 1.5rem 2.5rem; overflow-y:auto; opacity:0; pointer-events:none; transition:opacity var(--duration-normal) var(--ease-out);}
.mobile-menu.active{opacity:1; pointer-events:auto;}
.mobile-menu a{font-family:var(--font-display); font-size:1.875rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--color-black); text-decoration:none; opacity:0; transform:translateY(20px); transition:all var(--duration-normal) var(--ease-out);}
.mobile-menu.active a{opacity:1; transform:translateY(0);}
.mobile-menu.active a:nth-child(1){transition-delay:100ms;} .mobile-menu.active a:nth-child(2){transition-delay:150ms;}
.mobile-menu.active a:nth-child(3){transition-delay:200ms;} .mobile-menu.active a:nth-child(4){transition-delay:250ms;}
.mobile-menu.active a:nth-child(5){transition-delay:300ms;} .mobile-menu.active a:nth-child(6){transition-delay:350ms;}
.mobile-menu.active a:nth-child(7){transition-delay:400ms;} .mobile-menu.active a:nth-child(8){transition-delay:450ms;}
.mobile-menu.active a:nth-child(9){transition-delay:500ms;}
.mobile-menu a:hover{color:var(--color-red);}
.footer{background:var(--color-black); color:var(--color-beige-dark); padding:var(--space-xl) 0 var(--space-lg); border-top:1px solid rgba(232,222,209,0.08); margin-top:var(--space-xl);}
.footer .container{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:var(--space-lg);}
.footer-brand .logo{margin-bottom:var(--space-sm); display:inline-flex;}
.footer-brand .logo img{height:2rem;}
.footer-brand p{font-size:0.875rem; line-height:1.7; color:var(--color-gray); max-width:280px;}
.footer-column h4{font-family:var(--font-mono); font-size:0.625rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--color-gray); margin-bottom:var(--space-sm); position:relative; padding-left:1.5rem; display:inline-block;}
.footer-column h4::before{content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:18px; height:1px; background:var(--color-red); opacity:0.5;}
.footer-column a{display:block; width:fit-content; font-size:0.875rem; color:var(--color-beige-dark); text-decoration:none; padding:0.3125rem 0; transition:color 0.22s var(--ease-out), transform 0.32s var(--ease-spring);}
.footer-column a:hover{color:var(--color-beige-light); transform:translateX(4px);}
.footer-bottom{margin-top:var(--space-xl); padding-top:var(--space-md); border-top:1px solid rgba(232,222,209,0.08); display:flex; align-items:center; justify-content:space-between;}
.footer-bottom .mono{font-family:var(--font-mono); font-size:0.625rem; font-variant-numeric:tabular-nums; color:var(--color-gray);}
.footer-legal{grid-column:1 / -1; margin-top:var(--space-md); padding-top:var(--space-md); border-top:1px solid rgba(232,222,209,0.08); display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem;}
.footer-legal a{font-family:var(--font-mono); font-size:0.625rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--color-gray); text-decoration:none; transition:color 0.22s var(--ease-out);}
.footer-legal a:hover{color:var(--color-beige-light);}
@media (min-width:1025px){
  .footer .container:last-child{display:flex; align-items:center; justify-content:space-between; gap:var(--space-md) var(--space-lg); margin-top:var(--space-xl); padding-top:var(--space-md); border-top:1px solid rgba(232,222,209,0.08);}
  .footer .container:last-child .footer-bottom{margin-top:0; padding-top:0; border-top:none; justify-content:flex-start; gap:var(--space-lg);}
  .footer .container:last-child .footer-legal{margin-top:0; padding-top:0; border-top:none;}
}
@media (max-width:768px){
  .nav-links{display:none;}
  .burger{display:flex;}
  .footer .container{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column; gap:var(--space-sm); text-align:left; align-items:flex-start;}
}

/* ---------- shared: eyebrow + tick ---------- */
.ct-eyebrow{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--font-mono); font-size:0.6875rem; font-weight:500;
  text-transform:uppercase; letter-spacing:0.16em; color:var(--ink-muted); margin:0;
}
.ct-eyebrow::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none;}

/* ---------- header ---------- */
.ct-top{max-width:1200px; margin:0 auto; padding:var(--space-lg) var(--space-md) var(--space-xs);}
.ct-top h1{
  font-family:var(--font-body); font-weight:600; letter-spacing:-0.01em; line-height:1.05;
  font-size:clamp(1.9rem,4.6vw,3.1rem); color:var(--ink); margin:0.5rem 0 0.6rem; text-transform:none;
}
.ct-badge{
  display:inline-block; vertical-align:middle; margin-left:0.55rem; white-space:nowrap;
  font-family:var(--font-mono); font-size:0.625rem; font-weight:500; text-transform:uppercase;
  letter-spacing:0.16em; color:var(--accent); border:1px solid rgba(218,41,28,0.22);
  border-radius:var(--radius-pill); padding:0.2rem 0.6rem;
}
.ct-sub{margin:0; color:var(--ink-soft); font-weight:300; font-size:0.95rem; line-height:1.55; max-width:60ch;}

/* ---------- layout ---------- */
.ct-main{
  max-width:1200px; margin:0 auto; display:grid; gap:var(--space-md);
  padding:var(--space-md) var(--space-md) var(--space-xl); grid-template-columns:minmax(0,1fr);
}
@media (min-width:1024px){
  .ct-main{grid-template-columns:minmax(0,1fr) 400px; gap:var(--space-lg); align-items:start;}
}
.ct-stage,.ct-panel{min-width:0;}   /* allow grid/flex children to shrink so content wraps, never overflows x */
#stage,#panel-slots,.ct-field,.ct-chips,textarea{min-width:0; max-width:100%;}

/* ---------- stage ---------- */
.ct-stage{
  position:relative; padding:0;
  display:flex; flex-direction:column; align-items:center; gap:var(--space-xs);
}
.ct-canvas{position:relative; width:100%; max-width:540px; margin-inline:auto;}
#stage{width:100%; height:auto; touch-action:none; border-radius:var(--radius-md); display:block;}
@media (min-width:1024px){
  /* PC: lux Anthropic frame around the canvas (paper surface, not the old sunken brown) + canvas fills the column */
  .ct-stage{
    position:sticky; top:var(--space-md);
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--radius-lg); padding:var(--space-lg);
    box-shadow:var(--shadow-stage);
  }
  .ct-canvas{max-width:none;}
}


/* FAB +template — the primary "start here" affordance: dark fill so it reads first on beige
   (red stays reserved for the single order CTA), plus a one-time attention pulse on load. */
.ct-fab{
  position:absolute; left:var(--space-md); top:var(--space-md); z-index:3;
  display:inline-flex; align-items:center; gap:0.5rem; overflow:hidden;
  background:var(--color-black); color:var(--color-beige-light); border:1px solid var(--color-black);
  border-radius:var(--radius-pill); padding:0.62rem 1.15rem 0.62rem 0.95rem;
  font-family:var(--font-body); font-weight:600; font-size:0.8125rem; text-transform:uppercase;
  letter-spacing:0.08em; cursor:pointer; box-shadow:var(--shadow-float);
  animation:ctFabHint 1.5s var(--ease-spring) 1s 2;
  transition:transform var(--dur-micro) var(--ease-spring), box-shadow var(--dur-micro) var(--ease-spring), background var(--dur-micro) var(--ease-spring);
}
.ct-fab svg{width:16px; height:16px; flex:none;}
.ct-fab::after{
  content:''; position:absolute; inset:0; transform:translateX(-120%);
  background:linear-gradient(120deg,transparent,rgba(255,255,255,0.35),transparent);
}
.ct-fab:hover{background:var(--color-black-soft); transform:translateY(-2px); box-shadow:var(--shadow-card-hover);}
.ct-fab:hover::after{transition:transform 0.6s var(--ease-out); transform:translateX(120%);}
.ct-fab:active{transform:translateY(0);}
@keyframes ctFabHint{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}

/* base toggle — sliding pill (wow #2) */
.ct-base{
  position:absolute; left:50%; top:var(--space-md); transform:translateX(-50%); z-index:3;
  display:inline-flex; padding:4px; gap:0; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-pill); box-shadow:var(--shadow-card);
}
.ct-base::before{
  content:''; position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px);
  border-radius:var(--radius-pill); background:var(--color-black); box-shadow:var(--shadow-float);
  transition:transform var(--dur-state) var(--ease-spring);
}
.ct-base:has(>button:last-of-type[aria-pressed="true"])::before{transform:translateX(100%);}
.ct-base button{
  position:relative; z-index:1; flex:1 1 0; text-align:center; border:0; background:transparent;
  color:var(--ink-muted); border-radius:var(--radius-pill); padding:0.45rem 0.85rem;
  font-family:var(--font-mono); font-size:0.6875rem; font-weight:500; text-transform:uppercase;
  letter-spacing:0.06em; cursor:pointer; white-space:nowrap;
  transition:color var(--dur-state) var(--ease-spring);
}
.ct-base button[aria-pressed="true"]{color:var(--color-beige-light);}

/* zoom controls — anchored to the canvas corner (so they never sit on the foot row) */
.ct-zoom{
  position:absolute; right:0.6rem; bottom:0.6rem; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:0.4rem;
}
.ct-zoom button{
  width:44px; height:44px; border-radius:50%; border:1px solid var(--line);
  background:rgba(250,250,248,0.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--ink); display:grid; place-content:center; cursor:pointer; box-shadow:var(--shadow-float);
  transition:transform var(--dur-micro) var(--ease-spring), box-shadow var(--dur-micro) var(--ease-spring);
}
.ct-zoom button svg{width:18px; height:18px;}
.ct-zoom button:hover{transform:translateY(-2px); box-shadow:var(--shadow-card-hover);}
.ct-zoom button:active{transform:scale(0.96);}
.ct-zoom button:disabled{opacity:0.4; cursor:not-allowed; transform:none; box-shadow:var(--shadow-float);}
.ct-zoom-val{
  font-family:var(--font-mono); font-size:0.625rem; color:var(--ink-muted);
  font-variant-numeric:tabular-nums; letter-spacing:0.04em; min-width:4ch; text-align:center;
}

/* ---------- panel ---------- */
.ct-panel{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-md); box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:var(--space-md);
}
#panel-slots{display:flex; flex-direction:column; gap:var(--space-md);}

.ct-field{display:flex; flex-direction:column; gap:var(--space-xs);}
.ct-field>label:not(.ct-sublabel):not(.ct-inline):not(.ct-check){
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--font-mono); font-size:0.6875rem; font-weight:500; text-transform:uppercase;
  letter-spacing:0.14em; color:var(--ink-muted);
}
.ct-field>label:not(.ct-sublabel):not(.ct-inline):not(.ct-check)::before{
  content:''; width:0.85rem; height:2px; background:var(--accent); flex:none;
}
.ct-sublabel{font-family:var(--font-body); font-weight:300; font-size:0.75rem; color:var(--ink-muted); margin-top:0.3rem;}

/* ---------- text inputs ---------- */
textarea,
input[type="text"],input[type="tel"],input[type="email"],input[type="date"]{
  width:100%; background:var(--surface); color:var(--ink); border:1px solid var(--line-strong);
  border-radius:var(--radius-md); padding:0.7rem 0.85rem; font-family:var(--font-body); font-size:0.9375rem;
  line-height:1.45; resize:vertical; min-height:44px;
  transition:border-color var(--dur-micro) var(--ease-spring), background var(--dur-micro) var(--ease-spring),
             box-shadow var(--dur-micro) var(--ease-spring);
}
textarea{min-height:3.2rem;}
input[type="date"]{color-scheme:light;}
textarea::placeholder,input::placeholder{color:var(--ink-muted); opacity:0.8;}
textarea:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="email"]:focus,input[type="date"]:focus{
  outline:none; border-color:var(--accent); background:var(--color-white);
  box-shadow:0 0 0 3px rgba(218,41,28,0.12);
}
/* validation: only after interaction, red hairline (not a fill) */
.ct-checkout input:user-invalid{border-color:var(--accent); box-shadow:0 0 0 3px rgba(218,41,28,0.1);}

/* ---------- chips / swatches / presets ---------- */
.ct-chips{display:flex; flex-wrap:wrap; gap:var(--space-xs);}
.ct-chip{
  position:relative; min-height:36px; border:1px solid var(--line-strong); background:var(--surface);
  color:var(--ink); border-radius:var(--radius-sm); padding:0.45rem 0.85rem;
  font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.06em; cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-spring), background var(--dur-micro) var(--ease-spring),
             border-color var(--dur-micro) var(--ease-spring), color var(--dur-micro) var(--ease-spring);
}
.ct-chip:hover{background:var(--tint); border-color:rgba(26,26,26,0.28); transform:translateY(-1px);}
.ct-chip:active{transform:scale(0.97);}
/* sold-out size (zero blank stock for the current colour) */
.ct-chip.is-out{opacity:0.4; text-decoration:line-through; cursor:not-allowed;}
.ct-chip.is-out:hover{transform:none; background:var(--surface); border-color:var(--line-strong);}
.ct-chip[aria-pressed="true"]{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
  transform:translateY(0); animation:ctChipPop var(--dur-micro) var(--ease-spring);
}
@keyframes ctChipPop{from{transform:scale(0.94);}to{transform:scale(1);}}

.ct-chip.swatch{width:32px; height:32px; min-height:32px; padding:0; border-radius:50%; border:1px solid var(--line-strong);}
.ct-chip.swatch:hover{transform:translateY(-1px) scale(1.05); background:initial;}
.ct-chip.swatch[aria-pressed="true"]{
  background:initial; border-color:var(--surface);
  box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--accent);   /* clean circular ring + gap (follows border-radius, never clipped uneven) */
  transform:translateY(-1px);
}
/* custom-color swatch: rainbow conic (set inline in JS) = "open OS palette"; wraps a hidden native color input */
.ct-swatch-custom{position:relative; overflow:hidden;}
.ct-swatch-custom input[type="color"]{position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; padding:0; margin:0; cursor:pointer;}

.ct-presets{display:flex; flex-wrap:wrap; gap:var(--space-xs);}
.ct-preset{
  border:1px solid var(--line); background:var(--surface); color:var(--ink-muted);
  border-radius:var(--radius-sm); padding:0.28rem 0.6rem; font-family:var(--font-body);
  font-size:0.75rem; cursor:pointer;
  transition:transform var(--dur-micro) var(--ease-spring), background var(--dur-micro) var(--ease-spring),
             color var(--dur-micro) var(--ease-spring), border-color var(--dur-micro);
}
.ct-preset:hover{background:var(--tint); color:var(--ink); border-color:var(--line-strong); transform:translateY(-1px);}
.ct-preset:active{transform:scale(0.97);}

/* collapsed presets — present but folded, indicated by the summary */
.ct-presets-det{margin-top:0.15rem;}
.ct-presets-det > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:0.4rem;
  font-family:var(--font-mono); font-size:0.625rem; font-weight:500; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--ink-muted); padding:0.2rem 0;
  transition:color var(--dur-micro) var(--ease-spring);
}
.ct-presets-det > summary::-webkit-details-marker{display:none;}
.ct-presets-det > summary::before{content:'\203A'; display:inline-block; font-size:0.85rem; line-height:1; transition:transform var(--dur-micro) var(--ease-spring);}   /* chevron › */
.ct-presets-det[open] > summary::before{transform:rotate(90deg);}
.ct-presets-det > summary:hover{color:var(--accent);}
.ct-presets-det .ct-presets{margin-top:0.5rem;}

/* ---------- range (photo zoom) ---------- */
.ct-row{display:flex; align-items:center; gap:var(--space-sm);}
.ct-inline{font-family:var(--font-mono); font-size:0.6875rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-muted); white-space:nowrap;}
.ct-range{display:flex; align-items:center; gap:var(--space-sm); flex:1;}
input[type="range"]{
  flex:1; appearance:none; -webkit-appearance:none; height:6px; border-radius:var(--radius-pill);
  background:linear-gradient(to right, var(--accent) calc(var(--range-p,0)*1%), var(--surface-sunken) calc(var(--range-p,0)*1%));
  cursor:pointer; margin:0.6rem 0;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--color-white);
  border:1px solid var(--line-strong); box-shadow:var(--shadow-float);
  transition:transform var(--dur-micro) var(--ease-spring);
}
input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.15);}
input[type="range"]::-moz-range-track{height:6px; border-radius:999px; background:var(--surface-sunken);}
input[type="range"]::-moz-range-progress{height:6px; border-radius:999px; background:var(--accent);}
input[type="range"]::-moz-range-thumb{width:18px; height:18px; border:1px solid var(--line-strong); border-radius:50%; background:var(--color-white); box-shadow:var(--shadow-float);}
.ct-range-val{font-family:var(--font-mono); font-size:0.75rem; color:var(--ink-muted); font-variant-numeric:tabular-nums; min-width:3.2ch; text-align:right;}

/* ---------- file dropzone ---------- */
.ct-drop{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:0.5rem; text-align:center; min-height:96px; padding:var(--space-md);
  background:var(--surface); border:1.5px dashed var(--line-strong); border-radius:var(--radius-md);
  color:var(--ink-muted); cursor:pointer;
  transition:background var(--dur-micro) var(--ease-spring), border-color var(--dur-micro) var(--ease-spring);
}
.ct-drop:hover,.ct-drop.drag{background:var(--tint); border-color:var(--accent); color:var(--ink);}
.ct-drop input[type="file"]{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;}
.ct-drop svg{width:26px; height:26px; color:var(--ink-muted);}
.ct-drop-text{font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.06em; text-transform:uppercase;}
.ct-drop.ct-drop--filled{flex-direction:row; gap:0.85rem; justify-content:flex-start; min-height:auto; text-align:left; border-style:solid;}
.ct-drop-thumb{width:48px; height:48px; flex:none; border-radius:var(--radius-sm); object-fit:cover; border:1px solid var(--line); display:block;}
.ct-drop-name{font-family:var(--font-body); font-size:0.8125rem; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;}
.ct-drop-replace{font-family:var(--font-mono); font-size:0.625rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--accent);}

/* ---------- checkbox / toggle ---------- */
.ct-check{
  display:flex; align-items:flex-start; gap:0.6rem; font-family:var(--font-body); font-size:0.875rem;
  color:var(--ink); line-height:1.45; cursor:pointer;
}
.ct-check a{color:var(--accent); text-decoration:none; position:relative;}
.ct-check a::after{content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-micro) var(--ease-spring);}
.ct-check a:hover::after{transform:scaleX(1);}
.ct-check input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; flex:none; width:20px; height:20px; margin:1px 0 0;
  border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface);
  display:grid; place-content:center; cursor:pointer;
  transition:background var(--dur-micro) var(--ease-spring), border-color var(--dur-micro) var(--ease-spring);
}
.ct-check input[type="checkbox"]::after{
  content:''; width:5px; height:10px; border:solid var(--accent-ink); border-width:0 2px 2px 0;
  margin-top:-2px; transform:rotate(45deg) scale(0); transform-origin:center;
  transition:transform var(--dur-micro) var(--ease-spring);
}
.ct-check input[type="checkbox"]:checked{background:var(--accent); border-color:var(--accent);}
.ct-check input[type="checkbox"]:checked::after{transform:rotate(45deg) scale(1);}

/* ---------- buttons ---------- */
.ct-export{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem; width:100%;
  font-family:var(--font-body); font-weight:600; font-size:0.875rem; text-transform:uppercase;
  letter-spacing:0.08em; border-radius:var(--radius-sm); padding:0.95rem 1.5rem; cursor:pointer; border:1px solid transparent;
  transition:transform var(--dur-micro) var(--ease-spring), box-shadow var(--dur-micro) var(--ease-spring),
             background var(--dur-micro) var(--ease-spring), color var(--dur-micro) var(--ease-spring);
}
/* primary — the single red CTA */
.ct-export{position:relative; overflow:hidden; background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-cta);}
.ct-export .ct-arrow{transition:transform var(--dur-micro) var(--ease-spring);}
.ct-export::after{content:''; position:absolute; inset:0; transform:translateX(-120%); background:linear-gradient(120deg,transparent,rgba(255,255,255,0.35),transparent);}
.ct-export:hover:not(:disabled){background:var(--accent-hover); transform:translateY(-2px); box-shadow:var(--shadow-cta-hover);}
.ct-export:hover:not(:disabled)::after{transition:transform 0.6s var(--ease-out); transform:translateX(120%);}
.ct-export:hover:not(:disabled) .ct-arrow{transform:translateX(3px);}
.ct-export:active:not(:disabled){transform:translateY(0);}
.ct-export:disabled{opacity:0.5; cursor:default; box-shadow:none;}
.ct-export:disabled::after{display:none;}

/* trust micro-copy under the CTA + ghost reset link */
.ct-trust{
  list-style:none; margin:0; padding:0.85rem var(--space-md);
  display:flex; flex-direction:column; gap:0.6rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card);
}
.ct-trust-item{
  display:flex; align-items:center; gap:0.65rem;
  font-family:var(--font-body); font-size:0.8125rem; font-weight:400; color:var(--ink); line-height:1.3;
}
.ct-trust-item svg{
  flex:none; box-sizing:border-box; width:30px; height:30px; padding:6px; border-radius:50%;
  color:var(--accent); background:rgba(218,41,28,0.10);
}
.ct-trust-badge{
  font-family:var(--font-body); font-weight:600; font-size:0.8125rem;
  color:var(--accent-ink); background:var(--accent);
  padding:0.06rem 0.5rem; border-radius:var(--radius-pill); white-space:nowrap;
  box-shadow:0 1px 4px rgba(218,41,28,0.28);
}
@media (prefers-reduced-motion:no-preference){
  .ct-trust-badge{animation:ctTrustPulse 2.6s var(--ease-spring) 0.7s 2;}
  @keyframes ctTrustPulse{
    0%,100%{box-shadow:0 1px 4px rgba(218,41,28,0.28), 0 0 0 0 rgba(218,41,28,0);}
    50%{box-shadow:0 1px 4px rgba(218,41,28,0.28), 0 0 0 5px rgba(218,41,28,0.16);}
  }
}
.ct-reset{align-self:center; background:none; border:0; padding:0.35rem 0.5rem; cursor:pointer;
  font-family:var(--font-mono); font-size:0.625rem; text-transform:uppercase; letter-spacing:0.1em; color:var(--ink-muted);
  transition:color var(--dur-micro) var(--ease-spring);}
.ct-reset:hover{color:var(--accent);}

/* ---------- status ---------- */
.ct-status{
  display:flex; align-items:center; gap:0.4rem; margin:0; min-height:1.25rem;
  font-family:var(--font-mono); font-size:0.75rem; letter-spacing:0.02em; color:var(--ink-muted);
}
.ct-status:not(:empty){animation:ctStatusIn var(--dur-fast,200ms) var(--ease-spring);}
@keyframes ctStatusIn{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:none;}}
.ct-status.err{color:var(--accent);}
.ct-status.ok{color:var(--ink);}
.ct-status.err::before,.ct-status.ok::before{content:''; width:14px; height:14px; flex:none; background-color:currentColor; -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat;}
.ct-status.err::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v4M12 17h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3E%3C/svg%3E");}
.ct-status.ok::before{color:var(--accent); -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");}

/* ---------- modal (native dialog) ---------- */
.ct-menu{
  border:0; padding:0; margin:0; max-width:100vw; max-height:100dvh; width:100%; height:100%;
  background:transparent; color:var(--ink); overflow:hidden;
}
.ct-menu[open]{display:flex; align-items:flex-end; justify-content:center;}
@media (min-width:700px){.ct-menu[open]{align-items:center;}}
.ct-menu::backdrop{background:rgba(26,26,26,0.4); -webkit-backdrop-filter:blur(6px) saturate(1.1); backdrop-filter:blur(6px) saturate(1.1);}
/* non-interactive containers never show a focus ring (showModal focuses the dialog); real controls keep theirs */
.ct-menu:focus,.ct-menu:focus-visible,.ct-menu-card:focus,.ct-menu-card:focus-visible{outline:none;}
.ct-menu-card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0; width:100%; max-width:560px;
  padding:var(--space-md) var(--space-md) calc(var(--space-md) + env(safe-area-inset-bottom));
  max-height:88dvh; overflow:auto; box-shadow:var(--shadow-card-hover);
}
@media (min-width:700px){.ct-menu-card{border-radius:var(--radius-lg); max-height:84vh;}}
/* mobile drag-handle */
.ct-menu-card::before{content:''; display:block; width:36px; height:4px; border-radius:var(--radius-pill); background:var(--line-strong); margin:0 auto var(--space-sm);}
@media (min-width:700px){.ct-menu-card::before{display:none;}}
.ct-menu-head{display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); margin-bottom:var(--space-md);}
.ct-menu-head h2{font-family:var(--font-body); font-weight:600; letter-spacing:-0.01em; text-transform:none; font-size:1.25rem; margin:0;}
.ct-menu-head button{
  width:36px; height:36px; flex:none; border:0; border-radius:50%; background:transparent;
  color:var(--ink-muted); display:grid; place-content:center; cursor:pointer;
  transition:background var(--dur-micro) var(--ease-spring), color var(--dur-micro);
}
.ct-menu-head button svg{width:18px; height:18px;}
.ct-menu-head button:hover{background:var(--tint); color:var(--ink);}
.ct-menu-list{display:grid; gap:var(--space-sm); grid-template-columns:1fr;}
@media (min-width:560px){.ct-menu-list{grid-template-columns:1fr 1fr;}}

.ct-tpl{
  text-align:left; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-md);
  padding:var(--space-sm); cursor:pointer; color:var(--ink); display:flex; flex-direction:column; gap:0.25rem;
  transition:transform var(--dur-state) var(--ease-spring), box-shadow var(--dur-state) var(--ease-spring),
             border-color var(--dur-state) var(--ease-spring), background var(--dur-state) var(--ease-spring);
}
.ct-tpl:hover{transform:translateY(-4px); box-shadow:var(--shadow-card-hover);}
.ct-tpl:active{transform:translateY(-1px);}
.ct-tpl.on{border-color:var(--accent); background:var(--accent-tint); box-shadow:0 0 0 1px var(--accent);}
.ct-tpl strong{font-family:var(--font-body); font-weight:600; font-size:0.95rem;}
.ct-tpl span{font-family:var(--font-body); font-weight:300; font-size:0.8125rem; color:var(--ink-muted);}

/* checkout form */
.ct-checkout form{display:flex; flex-direction:column; gap:var(--space-md);}

/* manufacturing term — prominent one-liner at the top of the checkout */
.ct-term{
  display:flex; align-items:center; gap:0.7rem;
  padding:0.75rem 1rem; border:1px solid var(--line); border-radius:var(--radius-md);
  background:var(--surface); box-shadow:var(--shadow-card);
}
.ct-term svg{flex:none; box-sizing:border-box; width:30px; height:30px; padding:6px; border-radius:50%; color:var(--accent); background:rgba(218,41,28,0.10);}
.ct-term-label{font-family:var(--font-mono); font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em; color:var(--ink-muted);}
.ct-term-value{margin-left:auto; font-family:var(--font-body); font-weight:600; font-size:1.2rem; color:var(--ink); letter-spacing:-0.01em; white-space:nowrap;}
/* paid add-on price accent on its checkbox */
.ct-addon .ct-addon-price{font-weight:600; color:var(--accent); white-space:nowrap;}

/* live blank-stock note under the size chips («осталось N шт.» / «нет в наличии») */
.ct-stock-note{margin:0; font-family:var(--font-mono); font-size:0.6875rem; letter-spacing:0.04em; color:var(--accent);}

/* size guide (checkout): item measurements so the client can pick S/M vs L/XL */
.ct-sizes{display:flex; flex-direction:column; gap:0.45rem; margin-top:0.5rem; padding-top:0.55rem; border-top:1px solid var(--line);}
.ct-sizes-row{display:flex; flex-wrap:wrap; align-items:baseline; gap:0.25rem 0.7rem; font-size:0.8125rem; color:var(--ink);}
.ct-sizes-row b{font-weight:600; min-width:2.6rem;}
.ct-sizes-row span{color:var(--ink-soft);}
.ct-sizes-row .ct-sizes-m{flex-basis:100%; font-family:var(--font-mono); font-size:0.6875rem; color:var(--ink-muted); font-variant-numeric:tabular-nums;}
.ct-sizes-hint{margin:0.1rem 0 0; font-size:0.75rem; font-weight:300; color:var(--ink-muted); line-height:1.5;}

/* ---------- entrance + reveal motion ---------- */
@keyframes ctRise{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:none;}}
.ct-top{animation:ctRise var(--dur-state) var(--ease-spring) both;}
.ct-stage{animation:ctRise var(--dur-state) var(--ease-spring) 60ms both;}
.ct-panel{animation:ctRise var(--dur-state) var(--ease-spring) 120ms both;}
/* dialog entrance (progressive enhancement via @starting-style) */
.ct-menu-card{transition:opacity var(--dur-modal) var(--ease-spring), transform var(--dur-modal) var(--ease-spring);}
@starting-style{.ct-menu[open] .ct-menu-card{opacity:0; transform:translateY(16px) scale(0.97);}}
.ct-menu::backdrop{transition:opacity var(--dur-modal) var(--ease-out);}
@starting-style{.ct-menu[open]::backdrop{opacity:0;}}

/* ---------- responsive ---------- */
@media (max-width:768px){html{overflow-x:clip;}}
/* mobile: every style row (effects, fonts, colors, sizes, delivery, decor) stays on one line, scrolls horizontally */
@media (max-width:768px){
  .ct-chips{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:5px 4px; scroll-snap-type:x proximity;}
  .ct-chips::-webkit-scrollbar{display:none;}
  .ct-chips > *{flex:0 0 auto; scroll-snap-align:start;}
}
@media (max-width:560px){
  /* the FAB (left) and the centred base toggle collide below ~506px — pin the toggle right */
  .ct-base{left:auto; right:var(--space-md); transform:none;}
}
@media (max-width:480px){
  .ct-top,.ct-main{padding-left:1rem; padding-right:1rem;}
  .ct-base{right:var(--space-sm);}
  .ct-base button{padding:0.4rem 0.65rem; letter-spacing:0.03em;}
  .ct-fab{left:var(--space-sm); padding:0.5rem 0.8rem; font-size:0.75rem;}
}

/* ---------- mobile live mini-preview (JS-gated ≤768px, shows the макет) ---------- */
/* position:fixed (not sticky): out of flow → reserves zero layout space (no reflow/gap when the
   panel rebuilds on template-switch or the box expands) and pinned to the viewport → never scrolls
   away. Appended to <body>, so no transformed ancestor can capture it; the IntersectionObserver
   toggles visibility — shown while the settings panel holds the upper viewport, hidden otherwise. */
.ct-mini-wrap{
  position:fixed; z-index:50;
  top:calc(3.75rem + env(safe-area-inset-top,0px));   /* clear the fixed site header */
  right:calc(var(--space-sm) + env(safe-area-inset-right,0px));
  pointer-events:none;
}
.ct-mini{
  position:relative; pointer-events:auto;
  width:min(78vw,320px); max-width:88px;   /* width is the expanded target; max-width clamps + animates the size */
  padding:5px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-md); box-shadow:var(--shadow-float); overflow:hidden;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(0.94);
  transition:opacity var(--dur-modal) var(--ease-spring), transform var(--dur-modal) var(--ease-spring),
             max-width var(--dur-state) var(--ease-spring), box-shadow var(--dur-state) var(--ease-spring);
  will-change:transform, opacity;
}
.ct-mini-wrap.is-revealed .ct-mini{opacity:1; visibility:visible; transform:none;}
.ct-mini.is-expanded{max-width:min(78vw,320px); box-shadow:var(--shadow-card-hover);}
.ct-mini-canvas{display:block; width:100%; height:auto; border-radius:calc(var(--radius-md) - 4px); background:#e9e7e2;}
.ct-mini-tap{position:absolute; inset:0; z-index:1; border:0; padding:0; background:transparent; cursor:pointer;}
.ct-mini-close{
  position:absolute; top:6px; right:6px; z-index:2; width:30px; height:30px;
  border:1px solid var(--line); border-radius:50%; background:rgba(250,250,248,0.92);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:var(--ink);
  display:none; place-content:center; cursor:pointer; box-shadow:var(--shadow-float);
  transition:transform var(--dur-micro) var(--ease-spring);
}
.ct-mini.is-expanded .ct-mini-close{display:grid;}
.ct-mini-close:active{transform:scale(0.94);}
.ct-mini-close svg{width:16px; height:16px;}
.ct-mini-badge{
  position:absolute; left:6px; bottom:6px; z-index:1; pointer-events:none;
  font-family:var(--font-mono); font-size:0.5rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink); background:rgba(250,250,248,0.85); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border-radius:var(--radius-pill); padding:0.15rem 0.45rem; opacity:0;
  transition:opacity var(--dur-state) var(--ease-spring);
}
.ct-mini.is-expanded .ct-mini-badge{opacity:1;}
/* belt-and-suspenders: never show on desktop even if the node leaks past the JS gate */
@media (min-width:769px){.ct-mini-wrap{display:none;}}
@media (prefers-reduced-motion:reduce){.ct-mini{transform:none !important;}}

/* ---------- touch ---------- */
@media (hover:none){
  .ct-fab,.ct-zoom button,.ct-base{opacity:1;}
  .ct-chip:hover{transform:none;}
}

/* ---------- reduced motion — total ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.001ms !important; animation-delay:0ms !important;
    animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;
  }
}