/* 2026-09-04: keep workbench controls and the embedded editor in one dark visual system. */
.unified-composer-shell .smart-ratio-menu,
.smart-ratio-menu{
  border:1px solid rgba(53,196,224,.34)!important;
  background:linear-gradient(155deg,rgba(6,28,46,.99),rgba(3,17,30,.99))!important;
  color:#eaf8ff!important;
  box-shadow:0 22px 60px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.08)!important;
}
.smart-ratio-menu .setting-block{
  border-color:rgba(115,185,218,.15)!important;
  background:rgba(255,255,255,.025)!important;
}
.smart-ratio-menu .setting-block>label,
.unified-composer-shell .smart-ratio-menu label,
.unified-composer-shell .smart-ratio-menu small,
.unified-composer-shell .smart-ratio-menu input,
.unified-composer-shell .smart-ratio-menu .dimension-input i,
.unified-composer-shell .smart-ratio-menu .print-spec-hint,
.unified-composer-shell .smart-ratio-menu #sizePanel,
.unified-composer-shell .smart-ratio-menu #sizePanel *{color:#dff4ff!important;text-shadow:none!important}
.unified-composer-shell .smart-ratio-menu #ratioChoices{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.unified-composer-shell .smart-ratio-menu #ratioChoices button{
  border-color:rgba(112,177,207,.22)!important;
  background:rgba(255,255,255,.055)!important;
  color:#dcecf4!important;
  box-shadow:none!important;
}
.unified-composer-shell .smart-ratio-menu #ratioChoices button:hover{
  border-color:rgba(42,211,224,.62)!important;background:rgba(22,143,171,.2)!important;color:#fff!important;
}
.unified-composer-shell .smart-ratio-menu #ratioChoices button.active{
  border-color:#20d1dc!important;background:linear-gradient(135deg,#1179d5,#11b8bc)!important;color:#fff!important;
}
.smart-ratio-menu .dimension-input{border-color:rgba(113,183,214,.24)!important;background:rgba(255,255,255,.06)!important}
.smart-ratio-menu .dimension-input input{color:#fff!important;background:transparent!important}

.inline-template-editor{
  border-color:rgba(57,189,221,.24)!important;
  background:#03111e!important;
  box-shadow:0 24px 72px rgba(0,0,0,.34)!important;
}
.inline-editor-bar{
  border-color:rgba(113,181,211,.16)!important;
  background:linear-gradient(110deg,#071b2c,#09263a 62%,#07314a)!important;
}
.inline-editor-bar>div:first-child::before{background:linear-gradient(#20c8db,#3288ff)!important}
.inline-editor-bar span{color:#69dfea!important}
.inline-editor-bar h3{color:#f1f9ff!important}
.inline-editor-actions button{
  border-color:rgba(126,184,211,.2)!important;background:rgba(255,255,255,.055)!important;color:#dcecf4!important;
}
.inline-editor-actions button:hover{border-color:#2cc9da!important;background:rgba(27,149,174,.16)!important;color:#fff!important}
.inline-editor-actions button.primary{border-color:transparent!important;background:linear-gradient(135deg,#126cd4,#10b9bd)!important;color:#fff!important}
.inline-editor-frame,.inline-editor-frame iframe{background:#03111e!important}

.result-actions>.result-download-button{
  display:flex!important;width:100%!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
  min-height:48px!important;margin:0 0 9px!important;padding:9px 14px!important;border:0!important;border-radius:10px!important;
  background:linear-gradient(135deg,#146ed8,#0eb8ba)!important;color:#fff!important;text-align:left!important;cursor:pointer!important;
  box-shadow:0 8px 20px rgba(10,132,184,.2)!important;
}
.result-actions>.result-download-button span{display:grid!important;gap:2px!important;color:#fff!important}
.result-actions>.result-download-button b{color:#fff!important;font-size:13px!important}
.result-actions>.result-download-button small{color:rgba(255,255,255,.8)!important;font-size:9px!important}
.result-actions>.result-download-button i{color:#fff!important;font-size:18px!important;font-style:normal!important}

/* Design history belongs to the same dark glass workspace as the template library. */
html body.workspace-readable .design-records{
  border:1px solid rgba(112,183,214,.12)!important;
  background:linear-gradient(145deg,rgba(4,24,39,.82),rgba(5,18,32,.9))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 18px 44px rgba(0,0,0,.18)!important;
}
html body.workspace-readable .design-records-head button{
  border:1px solid rgba(74,202,218,.3)!important;
  background:rgba(11,55,77,.78)!important;
  color:#dff8ff!important;
  box-shadow:inset 0 1px rgba(255,255,255,.07)!important;
}
html body.workspace-readable .design-records-head button:hover{
  border-color:rgba(70,226,224,.58)!important;background:rgba(13,91,112,.88)!important;color:#fff!important;
}
html body.workspace-readable .design-record-strip{
  border:1px solid rgba(116,187,216,.11)!important;
  background:rgba(1,13,24,.58)!important;
  color:#dceef7!important;
  scrollbar-color:rgba(40,177,201,.42) rgba(2,16,27,.34)!important;
}
html body.workspace-readable .design-record-card{
  border:1px solid rgba(106,184,214,.2)!important;
  background:linear-gradient(155deg,rgba(12,43,62,.96),rgba(5,24,39,.98))!important;
  color:#e9f8ff!important;
  box-shadow:0 7px 18px rgba(0,0,0,.2)!important;
}
html body.workspace-readable .design-record-card:hover{
  border-color:rgba(56,218,221,.5)!important;background:linear-gradient(155deg,rgba(15,68,89,.98),rgba(7,34,51,.98))!important;
}
html body.workspace-readable .design-record-card img{
  background:rgba(0,10,19,.72)!important;object-fit:contain!important;
}
html body.workspace-readable .design-record-card span{
  border-top:1px solid rgba(112,184,213,.12)!important;background:rgba(5,24,38,.94)!important;color:#d8edf7!important;
}

@media(max-width:560px){.unified-composer-shell .smart-ratio-menu #ratioChoices{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* The template browser is a complete catalogue. Legacy readability rules only
   kept the first desktop row visible, which made a 100-item category look like
   it contained 4-7 items. Keep every rendered card visible at every width. */
html body.workspace-readable #templateGallery .template-browser .template-section.category-filtered:not(.template-search-results) .template-grid>.template-card:nth-child(n){
  display:block!important;
}
html body.workspace-readable #templateGallery .template-browser .template-section.category-filtered .template-grid{
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  grid-auto-flow:row!important;
}

/* Refined account bar: one coherent dark-glass control group with clear hierarchy. */
@media(min-width:761px){
  html body.workspace-readable .studio-stage>.topbar{
    position:relative!important;
    isolation:isolate!important;
    display:flex!important;
    align-items:center!important;
    min-height:76px!important;
    height:76px!important;
    padding:0 clamp(18px,1.7vw,30px)!important;
    gap:12px!important;
    border:0!important;
    border-bottom:1px solid rgba(80,188,221,.18)!important;
    border-radius:0 0 18px 18px!important;
    background:
      radial-gradient(460px circle at 10% -80%,rgba(19,132,222,.22),transparent 70%),
      linear-gradient(112deg,rgba(3,19,33,.97),rgba(7,38,60,.95) 56%,rgba(4,27,44,.97))!important;
    box-shadow:0 14px 34px rgba(0,9,18,.25),inset 0 1px rgba(255,255,255,.055)!important;
    -webkit-backdrop-filter:blur(24px) saturate(145%)!important;
    backdrop-filter:blur(24px) saturate(145%)!important;
  }
  html body.workspace-readable .studio-stage>.topbar::before{
    content:""!important;
    position:absolute!important;
    left:30px!important;
    right:30px!important;
    bottom:0!important;
    height:1px!important;
    background:linear-gradient(90deg,#168ee7,rgba(30,211,205,.9) 13%,rgba(30,211,205,0) 43%,rgba(30,211,205,0))!important;
    opacity:.72!important;
    pointer-events:none!important;
  }
  html body.workspace-readable .topbar .brand{
    flex:0 0 auto!important;
    min-width:206px!important;
    width:auto!important;
    height:58px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
  html body.workspace-readable .topbar .brand .crealink-wordmark{
    width:188px!important;
    height:56px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  html body.workspace-readable .topbar .brand .crealink-wordmark>img{
    filter:drop-shadow(0 7px 16px rgba(0,143,221,.2))!important;
  }
  html body.workspace-readable .topbar .topbar-links{
    display:flex!important;
    align-items:center!important;
    margin-left:auto!important;
  }
  html body.workspace-readable .topbar .topbar-links button,
  html body.workspace-readable .topbar .account-stat,
  html body.workspace-readable .topbar .top-actions>button{
    position:relative!important;
    min-height:44px!important;
    height:44px!important;
    border:1px solid rgba(110,186,220,.16)!important;
    border-radius:12px!important;
    background:linear-gradient(145deg,rgba(20,57,82,.82),rgba(8,31,51,.9))!important;
    color:#eaf7ff!important;
    box-shadow:inset 0 1px rgba(255,255,255,.055),0 7px 18px rgba(0,8,17,.13)!important;
    -webkit-backdrop-filter:blur(14px) saturate(130%)!important;
    backdrop-filter:blur(14px) saturate(130%)!important;
    transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
  }
  html body.workspace-readable .topbar .topbar-links button{
    display:inline-flex!important;
    align-items:center!important;
    gap:7px!important;
    padding:0 14px!important;
    font-size:11px!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }
  html body.workspace-readable .topbar .topbar-links button::before{
    content:"↓"!important;
    display:grid!important;
    place-items:center!important;
    width:19px!important;
    height:19px!important;
    border-radius:6px!important;
    background:rgba(41,189,216,.13)!important;
    color:#7fe8ed!important;
    font-size:13px!important;
    line-height:1!important;
  }
  html body.workspace-readable .topbar .top-actions{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    flex:0 0 auto!important;
    gap:7px!important;
    min-width:0!important;
  }
  html body.workspace-readable .topbar #installAppBtn{display:none!important}
  html body.workspace-readable .topbar .member-summary{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    min-width:0!important;
  }
  html body.workspace-readable .topbar .account-stat{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:8px!important;
    min-width:106px!important;
    padding:5px 10px!important;
  }
  html body.workspace-readable .topbar .credit-stat{min-width:98px!important}
  html body.workspace-readable .topbar .stat-dot{
    display:grid!important;
    place-items:center!important;
    flex:0 0 26px!important;
    width:26px!important;
    height:26px!important;
    border:1px solid rgba(102,225,232,.2)!important;
    border-radius:9px!important;
    background:linear-gradient(145deg,rgba(23,124,182,.38),rgba(16,174,169,.2))!important;
    color:#a8f6f2!important;
    font-size:10px!important;
    font-weight:900!important;
  }
  html body.workspace-readable .topbar .stat-copy{
    display:grid!important;
    align-items:center!important;
    gap:2px!important;
    min-width:0!important;
    text-align:left!important;
  }
  html body.workspace-readable .topbar .stat-copy small{
    display:block!important;
    color:#7899ac!important;
    font-size:8px!important;
    font-weight:700!important;
    line-height:1!important;
  }
  html body.workspace-readable .topbar .stat-copy b{
    max-width:76px!important;
    overflow:hidden!important;
    color:#edfaff!important;
    font-size:11px!important;
    font-weight:850!important;
    line-height:1.1!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  html body.workspace-readable .topbar .top-actions>button{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 13px!important;
    font-size:10px!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }
  html body.workspace-readable .topbar .recharge-top-btn{
    border-color:rgba(61,216,213,.26)!important;
    background:linear-gradient(145deg,rgba(13,100,132,.8),rgba(8,54,77,.92))!important;
    color:#bdfaf5!important;
  }
  html body.workspace-readable .topbar #accountBtn,
  html body.workspace-readable .topbar .account{
    border:0!important;
    background:linear-gradient(125deg,#137bdd,#12bdb6)!important;
    color:#fff!important;
    box-shadow:0 8px 22px rgba(12,139,193,.3),inset 0 1px rgba(255,255,255,.18)!important;
  }
  html body.workspace-readable .topbar :is(.topbar-links button,.account-stat,.top-actions>button):hover,
  html body.workspace-readable .topbar :is(.topbar-links button,.account-stat,.top-actions>button):focus-visible{
    z-index:2!important;
    transform:translateY(-2px)!important;
    border-color:rgba(86,226,229,.45)!important;
    background-color:rgba(19,74,99,.96)!important;
    box-shadow:0 11px 25px rgba(0,8,17,.22),inset 0 1px rgba(255,255,255,.09)!important;
  }
}

@media(min-width:761px) and (max-width:1180px){
  html body.workspace-readable .studio-stage>.topbar{padding:0 14px!important;gap:7px!important}
  html body.workspace-readable .topbar .brand{min-width:134px!important}
  html body.workspace-readable .topbar .brand .crealink-wordmark{width:130px!important;height:46px!important}
  html body.workspace-readable .topbar .topbar-links button{width:42px!important;padding:0!important;font-size:0!important;justify-content:center!important}
  html body.workspace-readable .topbar .topbar-links button::before{font-size:13px!important}
  html body.workspace-readable .topbar .account-stat,
  html body.workspace-readable .topbar .credit-stat{width:64px!important;min-width:64px!important;padding:5px 7px!important}
  html body.workspace-readable .topbar .stat-dot{display:none!important}
  html body.workspace-readable .topbar .stat-copy small{display:none!important}
  html body.workspace-readable .topbar .stat-copy b{max-width:50px!important;font-size:10px!important}
  html body.workspace-readable .topbar .top-actions{gap:5px!important}
  html body.workspace-readable .topbar .top-actions>button{padding:0 7px!important}
  html body.workspace-readable .topbar .recharge-top-btn{width:56px!important;font-size:9px!important}
  html body.workspace-readable .topbar #logoutTopBtn{width:46px!important;padding:0!important;font-size:0!important}
  html body.workspace-readable .topbar #logoutTopBtn::after{content:"切换"!important;font-size:9px!important}
  html body.workspace-readable .topbar #accountBtn{width:52px!important;padding:0!important;font-size:9px!important}
}

@media(max-width:760px){
  html body.workspace-readable .studio-stage>.topbar{
    border-bottom:1px solid rgba(73,190,220,.18)!important;
    background:linear-gradient(155deg,rgba(3,21,35,.98),rgba(6,43,65,.97))!important;
    box-shadow:0 12px 28px rgba(0,9,18,.24)!important;
  }
  html body.workspace-readable .topbar .brand,
  html body.workspace-readable .topbar .brand .crealink-wordmark{background:transparent!important;border:0!important;box-shadow:none!important}
  html body.workspace-readable .topbar .topbar-links button,
  html body.workspace-readable .topbar .account-stat,
  html body.workspace-readable .topbar .top-actions>button{
    border-color:rgba(101,184,218,.18)!important;
    background:rgba(13,46,68,.92)!important;
    color:#edfaff!important;
    box-shadow:inset 0 1px rgba(255,255,255,.05)!important;
  }
  html body.workspace-readable .topbar .stat-copy b{color:#f1fbff!important}
  html body.workspace-readable .topbar .stat-copy small{color:#7f9fb2!important}
  html body.workspace-readable .topbar #accountBtn,
  html body.workspace-readable .topbar .account{background:linear-gradient(125deg,#137bdd,#12bdb6)!important;color:#fff!important}
}

/* Sidebar brand placement: the logo owns the former sidebar heading position. */
html body.workspace-readable .app-shell>.lime-workbench .hero-copy>.sidebar-brand{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  min-width:0!important;
  height:58px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body.workspace-readable .app-shell>.lime-workbench .hero-copy>.sidebar-brand .crealink-wordmark{
  width:198px!important;
  height:58px!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html body.workspace-readable .app-shell>.lime-workbench .hero-copy>.sidebar-brand .crealink-wordmark>img{
  filter:drop-shadow(0 7px 16px rgba(0,143,221,.24))!important;
}
html body.workspace-readable .studio-stage>.topbar>.topbar-links{
  margin-left:auto!important;
}

@media(max-width:760px){
  html body.workspace-readable .app-shell>.lime-workbench .hero-copy>.sidebar-brand{
    height:52px!important;
  }
  html body.workspace-readable .app-shell>.lime-workbench .hero-copy>.sidebar-brand .crealink-wordmark{
    width:176px!important;
    height:52px!important;
  }
}