/* DornBox Liquid Glass v1 — universal skin. Shared design contract: DESIGN_SYSTEM.md */
:root{
  --glass-surface:rgba(255,255,255,.56);
  --glass-surface-strong:rgba(255,255,255,.73);
  --glass-surface-soft:rgba(255,255,255,.34);
  --glass-edge:rgba(255,255,255,.88);
  --glass-edge-soft:rgba(255,255,255,.58);
  --glass-ink:#20232a;
  --glass-muted:#5b6370;
  --glass-shadow:0 18px 56px rgba(37,45,77,.095),inset 0 1px 0 rgba(255,255,255,.95);
  --glass-shadow-hover:0 25px 70px rgba(38,47,76,.16),inset 0 1px 0 rgba(255,255,255,.98);
  --glass-blur:blur(22px) saturate(165%);
  --glass-ease:cubic-bezier(.22,1,.36,1);
  --glass-ease-press:cubic-bezier(.2,.8,.2,1);
  --glass-fast:175ms;
  --glass-normal:320ms;
  --glass-slow:560ms;
}
/* A slow ambient field is visible THROUGH glass — not an opaque gradient pasted onto cards. */
html{background:#e9ecf4}
body{
  color:var(--glass-ink);
  background:linear-gradient(132deg,#e8ecf8 0%,#f7f6fb 40%,#e9f2f6 78%,#f5eaf3 100%);
  background-attachment:fixed;
  isolation:isolate;
}
body::before,body::after{
  content:"";position:fixed;inset:-18%;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 31% 36% at 20% 22%,rgba(143,172,244,.30),transparent 82%),
    radial-gradient(ellipse 37% 36% at 78% 35%,rgba(210,167,225,.21),transparent 78%),
    radial-gradient(ellipse 33% 38% at 46% 82%,rgba(138,218,210,.24),transparent 77%);
}
body::before{animation:glass-atmosphere 22s ease-in-out infinite alternate}
body::after{
  opacity:.58;
  background:radial-gradient(ellipse 28% 35% at 76% 70%,rgba(155,187,243,.22),transparent 80%),
    radial-gradient(ellipse 34% 38% at 19% 60%,rgba(255,255,255,.48),transparent 80%);
  animation:glass-atmosphere 31s ease-in-out infinite alternate-reverse;
}
body > *{position:relative;z-index:1}
/* All screens sit on the same optical field. */
.auth-screen,.hello-screen,.setup-screen,.workspace{background:transparent}
.glass-panel,
.auth-card,.hello-content,.hello-bottom,.setup-topline,.setup-heading,.marketplace-row,
.setup-actions,.workspace-hero,.workspace-card,.workspace-note,.dialog-panel{
  background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.04) 70%),var(--glass-surface);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
}
.auth-card,.marketplace-row,.workspace-card,.dialog-panel,.setup-heading,.hello-content{
  position:relative;
  overflow:hidden;
}
.auth-card::before,.marketplace-row::before,.workspace-card::before,.dialog-panel::before,
.setup-heading::before,.hello-content::before{
  content:"";position:absolute;pointer-events:none;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent 3%,rgba(255,255,255,1) 36%,rgba(255,255,255,.7) 70%,transparent);
}
.auth-card,.workspace-card,.marketplace-row,.dialog-panel,.setup-heading,.hello-content{
  isolation:isolate;
}
.auth-card{border-radius:30px;box-shadow:var(--glass-shadow);animation:glass-arrive var(--glass-slow) var(--glass-ease) both}
.auth-brand,.setup-brand,.hello-brand{
  color:#252932;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
}
.auth-brand{
  margin:0 auto;width:max-content;padding:10px 17px;border:1px solid var(--glass-edge);
  border-radius:999px;background:var(--glass-surface);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:0 9px 32px rgba(50,58,92,.07);
}
.brand-symbol{
  border:1px solid rgba(255,255,255,.58);
  background:linear-gradient(140deg,rgba(68,76,94,.91),rgba(24,28,40,.87));
  box-shadow:inset 0 1px 1px #ffffff70,0 5px 13px #39415318;
}
.field input,.tsd-glass-input{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 2px #ffffff88,0 1px 5px #27334c0b;
  -webkit-backdrop-filter:blur(14px) saturate(145%);backdrop-filter:blur(14px) saturate(145%);
  transition:box-shadow var(--glass-fast),background var(--glass-fast),border-color var(--glass-fast),transform var(--glass-fast);
}
.field input:focus{background:rgba(255,255,255,.84);box-shadow:0 0 0 4px rgba(53,119,237,.15),inset 0 1px 1px #fff;border-color:#719fe6}
.field input:active{transform:scale(.998)}
.button,.close-button,.quiet-button,.nav-link,.card-link,.text-button{
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--glass-fast) var(--glass-ease-press),background var(--glass-normal),box-shadow var(--glass-normal),color var(--glass-fast),border-color var(--glass-normal),opacity var(--glass-fast);
}
.button,.button.secondary,.button.primary,.close-button,.quiet-button,.nav-link{
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 5px 19px rgba(36,47,74,.10);
  -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
}
.button.primary{
  color:white;
  background:linear-gradient(145deg,rgba(72,82,106,.90),rgba(29,33,45,.95));
  border-color:rgba(255,255,255,.42);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 9px 23px rgba(34,40,61,.16);
}
.button.primary:hover:not(:disabled){background:linear-gradient(145deg,rgba(91,103,130,.96),rgba(35,41,56,.97));box-shadow:0 11px 28px rgba(28,42,66,.25)}
.button.secondary,.quiet-button,.close-button{background:rgba(255,255,255,.43);color:#29303a}
.button.secondary:hover:not(:disabled),.quiet-button:hover:not(:disabled),.close-button:hover:not(:disabled){background:rgba(255,255,255,.79)}
.button:active:not(:disabled),.close-button:active:not(:disabled),.quiet-button:active:not(:disabled),.nav-link:active:not(:disabled){
  transform:scale(.965);box-shadow:inset 0 2px 8px rgba(33,45,65,.12),0 2px 10px #22335b11;
}
.button:disabled{filter:saturate(.75)}
.button.is-loading::after{
  content:"";position:absolute;right:13px;top:calc(50% - 7px);
  width:14px;height:14px;border:2px solid rgba(255,255,255,.32);border-top-color:white;
  border-radius:50%;animation:glass-spin .75s linear infinite;
}
.button.secondary.is-loading::after{border-top-color:#3a5369}
.button::before,.nav-link::before,.quiet-button::before{
  content:"";pointer-events:none;position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.24) 48%,transparent 73%);
  transform:translateX(-125%);
  transition:transform 650ms var(--glass-ease);
}
@media(hover:hover) and (pointer:fine){
 .button:hover::before,.nav-link:hover::before,.quiet-button:hover::before{transform:translateX(125%)}
}
.hello-screen{min-height:100svh;overflow:hidden}
.hello-brand{
  left:50%;right:auto;transform:translateX(-50%);
  padding:11px 25px;background:var(--glass-surface);
  border:1px solid var(--glass-edge);border-radius:999px;
  box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
}
.hello-content{
  border-radius:48px;padding:clamp(38px,7vw,76px) clamp(32px,7vw,92px);
  max-width:820px;animation:glass-arrive 680ms var(--glass-ease) both;
}
.hello-screen h1{color:#1f2530;text-shadow:0 1px 1px #ffffffd0;animation:glass-hello 1050ms var(--glass-ease) both}
.hello-subtitle{color:var(--glass-muted)}
.hello-bottom{
  display:flex;flex-direction:column;align-items:center;
  left:50%;right:auto;transform:translateX(-50%);
  width:min(440px,calc(100% - 36px));
  padding:19px 23px 14px;border-radius:27px;
}
.hello-bottom .button{box-shadow:0 7px 18px #2f384e26}
.setup-topline{
  border-radius:22px;padding:12px 18px;
  display:flex;align-items:center;justify-content:space-between;
}
.setup-heading{border-radius:30px;padding:34px 36px;margin:50px 0 24px}
.marketplace-list{gap:13px}
.marketplace-row{
  border-radius:23px;
  background:linear-gradient(145deg,rgba(255,255,255,.36),rgba(255,255,255,.06)),var(--glass-surface);
  transition:transform var(--glass-normal) var(--glass-ease),
    box-shadow var(--glass-normal),border-color var(--glass-normal),background var(--glass-normal);
  animation:glass-arrive var(--glass-slow) var(--glass-ease) both;
}
.marketplace-row:nth-child(2){animation-delay:85ms}
.marketplace-row:nth-child(3){animation-delay:160ms}
.marketplace-row::after,.workspace-card::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(350px circle at var(--glass-pointer-x,50%) var(--glass-pointer-y,15%),rgba(255,255,255,.55),transparent 65%);
  opacity:0;transition:opacity var(--glass-normal);
}
@media(hover:hover) and (pointer:fine){
 .marketplace-row:hover,.workspace-card:hover{transform:translateY(-3px);box-shadow:var(--glass-shadow-hover);border-color:white}
 .marketplace-row:hover::after,.workspace-card:hover::after{opacity:1}
}
.market-logo{
  border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.50),0 5px 17px rgba(53,62,88,.08);
  -webkit-backdrop-filter:blur(11px);backdrop-filter:blur(11px);
  transition:transform var(--glass-normal) var(--glass-ease);
}
.marketplace-row:hover .market-logo{transform:scale(1.055) rotate(-2deg)}
.ozon-logo{background:linear-gradient(145deg,rgba(230,238,255,.86),rgba(255,255,255,.52));color:#1158e6}
.wb-logo{background:linear-gradient(145deg,rgba(120,32,207,.84),rgba(215,67,169,.72));color:#fff}
.yandex-logo{background:linear-gradient(145deg,rgba(255,211,214,.72),rgba(255,255,255,.64));color:#d93442}
.connection-status.connected{color:#147b59}
.connection-status.connected::before{content:"";display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#32b47a;box-shadow:0 0 0 3px #2ead7320}
.setup-actions{border-radius:20px;padding:15px;display:flex;align-items:center;background:var(--glass-surface-soft)}
.setup-feedback.info{color:#1f8460}
.setup-footnote{padding-left:4px}
.site-header{
  background:linear-gradient(125deg,rgba(255,255,255,.69),rgba(255,255,255,.38));
  border-bottom:1px solid rgba(255,255,255,.87);
  -webkit-backdrop-filter:blur(24px) saturate(190%);
  backdrop-filter:blur(24px) saturate(190%);
  box-shadow:0 6px 24px #3746610c;
  animation:glass-header-in var(--glass-normal) var(--glass-ease) both;
}
.top-nav,.header-account{
  padding:5px;
  border:1px solid rgba(255,255,255,.78);
  background:rgba(255,255,255,.33);border-radius:15px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.nav-link{background:transparent;border-color:transparent;box-shadow:none;border-radius:10px}
.nav-link.active,.nav-link:hover{color:#25303d;background:rgba(255,255,255,.76);box-shadow:0 2px 10px rgba(42,54,82,.08),inset 0 1px #fff}
.header-account{padding:4px 7px 4px 13px}
.quiet-button{border-radius:9px;padding:8px 12px}
.workspace-hero{border-radius:30px;padding:42px 45px}
.workspace-grid{margin-top:22px}
.workspace-card{
  background:linear-gradient(145deg,rgba(255,255,255,.28),rgba(255,255,255,.04)),var(--glass-surface);
  animation:glass-arrive var(--glass-slow) var(--glass-ease) both;
  transition:transform var(--glass-normal) var(--glass-ease),box-shadow var(--glass-normal),border-color var(--glass-normal);
}
.workspace-card:nth-child(2){animation-delay:100ms}
.card-icon{
  background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(222,232,252,.38));
  border:1px solid rgba(255,255,255,.86);
  box-shadow:inset 0 1px #fff,0 5px 16px rgba(42,53,79,.08);
  -webkit-backdrop-filter:blur(13px);backdrop-filter:blur(13px);
}
.workspace-note{display:inline-block;border-radius:14px;padding:13px 17px;margin-top:25px;color:#637083;font-size:12px}
.dialog-layer{z-index:50}
.dialog-backdrop{background:rgba(20,28,46,.29);-webkit-backdrop-filter:blur(13px) saturate(120%);backdrop-filter:blur(13px) saturate(120%);animation:glass-backdrop 250ms ease-out both}
.dialog-panel{
  background:linear-gradient(150deg,rgba(255,255,255,.54),rgba(255,255,255,.16)),rgba(250,252,255,.68);
  border:1px solid rgba(255,255,255,.98);
  box-shadow:0 34px 85px rgba(23,32,60,.22),inset 0 1px 0 white;
  -webkit-backdrop-filter:blur(30px) saturate(185%);
  backdrop-filter:blur(30px) saturate(185%);
  animation:glass-dialog-in 390ms var(--glass-ease) both;
}
.close-button{color:#49515d;background:rgba(255,255,255,.55)}
/* Visual feedback on interactions, with a tiny number of listeners in motion.js. */
.glass-tap{animation:glass-tap-feedback 360ms var(--glass-ease) both}
.glass-reveal{animation:glass-arrive var(--glass-slow) var(--glass-ease) both}
:focus-visible{outline:3px solid rgba(20,111,235,.75);outline-offset:3px}
@keyframes glass-atmosphere{0%{transform:translate3d(-2%,0,0) scale(1)}100%{transform:translate3d(2%,2%,0) scale(1.04)}}
@keyframes glass-arrive{0%{opacity:0;transform:translate3d(0,17px,0) scale(.987)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes glass-hello{0%{opacity:0;transform:translate3d(0,20px,0) scale(.96);filter:blur(5px)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes glass-header-in{from{opacity:.5;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes glass-backdrop{from{opacity:0}to{opacity:1}}
@keyframes glass-dialog-in{from{opacity:0;transform:translateY(18px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes glass-tap-feedback{0%{box-shadow:0 0 0 0 rgba(82,128,204,.18)}70%{box-shadow:0 0 0 7px rgba(82,128,204,0)}100%{box-shadow:none}}
@keyframes glass-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){
 :root{--glass-blur:blur(15px) saturate(155%);--glass-shadow:0 9px 33px rgba(37,45,77,.09),inset 0 1px 0 rgba(255,255,255,.9)}
 .site-header{-webkit-backdrop-filter:blur(17px) saturate(170%);backdrop-filter:blur(17px) saturate(170%)}
 .setup-topline{border-radius:18px;padding:10px 12px}
 .setup-heading{padding:25px 20px;border-radius:23px;margin:38px 0 19px}
 .marketplace-row{border-radius:19px;padding:18px 14px}
 .workspace-hero{padding:28px 23px;border-radius:24px}
 .workspace-card{border-radius:20px}
 .hello-content{border-radius:33px;padding:45px 23px}
 .hello-bottom{bottom:calc(25px + env(safe-area-inset-bottom))}
 .auth-card{border-radius:25px}
 .top-nav{padding:2px;gap:0}
 .header-account{background:transparent;border:0;padding:0;box-shadow:none}
 .dialog-panel{border-radius:22px;-webkit-backdrop-filter:blur(19px);backdrop-filter:blur(19px)}
}
@media(max-width:420px){
 .hello-content{padding:38px 18px}
 .hello-screen h1{font-size:clamp(70px,22vw,88px)}
 .setup-actions{padding:12px}
 .workspace-wrap{padding-top:30px}
}
@media(hover:none),(pointer:coarse){
 .marketplace-row:hover,.workspace-card:hover{transform:none;box-shadow:var(--glass-shadow)}
 .marketplace-row:hover .market-logo{transform:none}
 .marketplace-row::after,.workspace-card::after{display:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
 .auth-card,.hello-content,.hello-bottom,.setup-topline,.setup-heading,.marketplace-row,.setup-actions,.workspace-hero,.workspace-card,.workspace-note,.dialog-panel,.site-header,.field input,.top-nav,.auth-brand,.hello-brand,.button{
   background-color:rgba(247,249,253,.96)!important;
 }
 .button.primary{background:linear-gradient(145deg,#4a5262,#222733)!important;color:white}
}
@media(forced-colors:active){
 .auth-card,.hello-content,.marketplace-row,.workspace-card,.dialog-panel{border:1px solid CanvasText;background:Canvas;box-shadow:none}
 .button,.field input{border:1px solid ButtonText}
}
@media(prefers-reduced-motion:reduce){
 body::before,body::after{animation:none!important}
 .auth-card,.hello-content,.hello-screen h1,.marketplace-row,.workspace-card,.site-header,.dialog-panel,.dialog-backdrop{animation:none!important}
 .glass-tap,.glass-reveal,.button.is-loading::after{animation:none!important}
 .button::before,.nav-link::before,.quiet-button::before{display:none!important}
 *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}
}

/* Page transitions are triggered only on navigation, never on a render loop. */
.glass-stage-enter{animation:glass-stage-in 460ms var(--glass-ease) both}
@keyframes glass-stage-in{from{opacity:.66;transform:translate3d(0,10px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media(prefers-reduced-motion:reduce){.glass-stage-enter{animation:none!important}}