/* PBS 0.7.0: DS-style application chrome and resolution-aware wallpaper library. */

.pbs-app {
  grid-template-rows: 198px minmax(0, 1fr) 30px;
}

.topbar.ds-topbar {
  min-width: 0;
  display: grid;
  grid-template-rows: 48px 32px 60px 58px;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid #32363b;
  background: #151515;
  box-shadow: 0 9px 32px rgba(0, 0, 0, .5);
  z-index: 40;
}

.ds-title-row,
.ds-menu-row,
.ds-action-row,
.ds-build-row {
  min-width: 0;
  display: flex;
  align-items: center;
}

.ds-title-row {
  gap: 14px;
  padding: 4px 12px;
  background: linear-gradient(180deg, #191919, #131313);
  border-bottom: 1px solid #2b2e31;
}

.ds-title-row .brand {
  min-width: 205px;
  height: 40px;
  gap: 8px;
}

.ds-title-row .brand img {
  width: 112px;
  height: 38px;
}

.ds-title-row .brand-copy strong {
  font-size: 16px;
}

.ds-title-row .brand-copy small {
  margin-top: 4px;
  font-size: 8px;
}

.ds-product-subtitle {
  min-width: 220px;
  color: #e5e5e5;
  font-size: 13px;
  white-space: nowrap;
}

.ds-title-row .top-field {
  flex-direction: row;
  align-items: center;
  gap: 7px;
}

.ds-title-row .top-field > span,
.ds-title-row .custom-resolution label > span {
  font-size: 9px;
}

.ds-title-row .top-field input,
.ds-title-row .top-field select,
.ds-title-row .custom-resolution input {
  height: 32px;
  border-radius: 3px;
  background: #202020;
  border-color: #474b50;
}

.ds-title-row .project-field {
  width: clamp(180px, 16vw, 300px);
}

.ds-title-row .profile-field {
  width: clamp(205px, 20vw, 330px);
}

.ds-title-row .custom-resolution {
  height: 36px;
  padding: 0;
  align-items: center;
}

.ds-title-row .custom-resolution label {
  width: 65px;
}

.ds-title-row .custom-resolution input {
  width: 65px;
}

.ds-title-row .resolution-by {
  padding: 0;
}

.ds-preview-button {
  margin-left: auto;
  min-height: 30px;
  padding: 5px 13px;
}

.ds-menu-row {
  gap: 0;
  padding: 0 10px;
  background: #2a2a2a;
  border-bottom: 1px solid #45484c;
}

.ds-menu-button {
  min-height: 30px;
  padding: 4px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f0f0f0;
  font-weight: 500;
  font-size: 12px;
}

.ds-menu-button:hover,
.ds-menu-button.active {
  background: #3a3d41 !important;
  border-color: transparent !important;
}

.ds-action-row {
  gap: 8px;
  padding: 6px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #2b2b2b;
  border-bottom: 1px solid #44484c;
  scrollbar-width: thin;
}

.ds-action-group {
  display: flex;
  align-items: stretch;
  gap: 7px;
  padding-right: 8px;
  border-right: 1px solid #474a4e;
  flex: 0 0 auto;
}

.ds-action-group:last-child {
  border-right: 0;
}

.ds-action-row button {
  min-height: 46px;
  min-width: 54px;
  padding: 6px 10px;
  border-radius: 4px;
  border-color: #555a60;
  background: linear-gradient(180deg, #3a3a3a, #272727);
  font-size: 12px;
  line-height: 1.08;
  white-space: nowrap;
}

.ds-action-row button:hover:not(:disabled) {
  background: linear-gradient(180deg, #4a4d51, #303338);
  border-color: #777d84;
}

.ds-action-row .community-button {
  min-width: 174px;
  color: #fff;
  border-color: #45b765;
  background: linear-gradient(180deg, #169947, #087c35);
  font-weight: 900;
  letter-spacing: .04em;
}

.ds-action-row .danger-button {
  color: #ff6262;
  border-color: #7d4141;
}

.ds-action-row .toggle.active {
  border-color: #14c980;
  color: #3dffa5;
  box-shadow: inset 0 0 0 1px rgba(20, 201, 128, .2);
}

.ds-zoom-group {
  align-items: center;
}

.ds-zoom-group button {
  min-width: 38px;
}

.ds-zoom-range {
  width: 140px;
  accent-color: #52cf75;
}

.ds-zoom-percent {
  min-width: 48px;
  color: #f5f5f5;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.ds-hidden-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.ds-build-row {
  justify-content: center;
  padding: 7px 12px;
  background: #131313;
  border-bottom: 1px solid #35383b;
}

.ds-build-button {
  min-width: 250px;
  min-height: 48px;
  border-color: #31bd58;
  background: linear-gradient(180deg, #15983a, #0b7c2e);
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .05em;
}

.ds-build-button:hover:not(:disabled) {
  border-color: #5fe57f;
  background: linear-gradient(180deg, #1cac49, #0b8832);
}

.designer {
  grid-template-rows: 34px minmax(0, 1fr);
}

.designer-toolbar {
  min-height: 34px;
  padding: 4px 10px;
}

.designer-left {
  display: none;
}

.canvas-readout {
  width: 100%;
  justify-content: space-between;
}

.dashboard-canvas {
  isolation: isolate;
}

.pbs-canvas-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  pointer-events: none;
}

.dashboard-canvas.grid-on {
  background-image: none;
}

.dashboard-canvas.grid-on::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(103, 123, 145, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 123, 145, .12) 1px, transparent 1px),
    linear-gradient(rgba(103, 123, 145, .19) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 123, 145, .19) 1px, transparent 1px);
  background-size:
    var(--grid-size) var(--grid-size),
    var(--grid-size) var(--grid-size),
    calc(var(--grid-size) * 5) calc(var(--grid-size) * 5),
    calc(var(--grid-size) * 5) calc(var(--grid-size) * 5);
}

.widget-layer {
  z-index: 2;
}

.empty-canvas-message {
  z-index: 3;
}

.dashboard-widget.pbs-widget-locked {
  pointer-events: none;
}

.dashboard-widget.pbs-widget-locked::after {
  content: "LOCKED";
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 2px 5px;
  border-radius: 3px;
  background: rgba(8, 10, 13, .78);
  color: #ffc45b;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
}

.ds-menu-popover {
  position: fixed;
  z-index: 120;
  min-width: 196px;
  padding: 6px;
  border: 1px solid #555b61;
  border-radius: 4px;
  background: #242629;
  box-shadow: 0 16px 35px rgba(0, 0, 0, .55);
}

.ds-menu-popover[hidden] {
  display: none;
}

.ds-menu-popover button,
.ds-menu-popover a {
  width: 100%;
  min-height: 31px;
  display: flex;
  align-items: center;
  padding: 5px 9px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: #f1f1f1;
  text-align: left;
  text-decoration: none;
  font-size: 12px;
  font-weight: 550;
}

.ds-menu-popover button:hover,
.ds-menu-popover a:hover {
  background: #3a3e42;
}

.wallpaper-modal {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(8px);
}

.wallpaper-modal[hidden] {
  display: none;
}

.wallpaper-dialog {
  width: min(1180px, 96vw);
  max-height: 90vh;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #535a61;
  border-radius: 9px;
  background: linear-gradient(180deg, #202326, #14171a);
  box-shadow: 0 32px 90px rgba(0, 0, 0, .78);
}

.wallpaper-dialog-header,
.wallpaper-dialog-controls,
.wallpaper-dialog-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  border-bottom: 1px solid #3c4146;
}

.wallpaper-dialog-header {
  justify-content: space-between;
}

.wallpaper-dialog-header h2 {
  margin: 0;
  font-size: 17px;
  letter-spacing: .04em;
}

.wallpaper-dialog-header p {
  margin: 4px 0 0;
  color: #9ca6af;
  font-size: 11px;
}

.wallpaper-dialog-controls label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #bac2ca;
  font-size: 11px;
  font-weight: 750;
}

.wallpaper-dialog-controls select {
  height: 34px;
  min-width: 180px;
  border: 1px solid #4b5259;
  border-radius: 4px;
  background: #111417;
  color: #f1f3f4;
  padding: 0 9px;
}

.wallpaper-library-grid {
  min-height: 0;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(230px, 1fr));
  gap: 13px;
  padding: 15px;
}

.wallpaper-card {
  display: grid;
  grid-template-rows: 145px auto;
  overflow: hidden;
  padding: 0;
  border: 1px solid #3d454c;
  border-radius: 7px;
  background: #101316;
  text-align: left;
}

.wallpaper-card:hover,
.wallpaper-card.selected {
  border-color: #ff932e;
  box-shadow: 0 0 0 1px rgba(255, 147, 46, .3), 0 12px 28px rgba(0, 0, 0, .4);
}

.wallpaper-card-preview {
  background-position: center;
  background-size: cover;
  border-bottom: 1px solid #33383d;
}

.wallpaper-card-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 11px;
}

.wallpaper-card-copy strong {
  font-size: 12px;
}

.wallpaper-card-copy small {
  color: #909ba5;
  font-size: 10px;
  line-height: 1.35;
}

.wallpaper-dialog-footer {
  justify-content: flex-end;
  border-top: 1px solid #3c4146;
  border-bottom: 0;
}

.wallpaper-dialog-footer .primary {
  min-width: 170px;
}

.pbs-preview-mode .workspace {
  grid-template-columns: minmax(0, 1fr) !important;
}

.pbs-preview-mode .toolbox,
.pbs-preview-mode .layers-sidebar,
.pbs-preview-mode .inspector,
.pbs-preview-mode .designer-toolbar,
.pbs-preview-mode .statusbar,
.pbs-preview-mode .ds-menu-row,
.pbs-preview-mode .ds-action-row,
.pbs-preview-mode .ds-build-row,
.pbs-preview-mode .ds-title-row .top-field,
.pbs-preview-mode .ds-title-row .custom-resolution,
.pbs-preview-mode .ds-product-subtitle {
  display: none !important;
}

.pbs-preview-mode .pbs-app {
  grid-template-rows: 48px minmax(0, 1fr);
}

.pbs-preview-mode .topbar.ds-topbar {
  grid-template-rows: 48px;
}

@media (max-width: 1350px) {
  .ds-product-subtitle {
    display: none;
  }

  .ds-title-row .brand {
    min-width: 170px;
  }

  .wallpaper-library-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 900px) {
  .wallpaper-library-grid {
    grid-template-columns: 1fr;
  }
}


/* Context help bubbles for Pitboard Studio top controls. */
.pbs-topbar-tooltip{
  position:fixed;
  z-index:2147483500;
  max-width:320px;
  padding:9px 11px;
  border:1px solid #596570;
  border-radius:7px;
  background:rgba(11,15,20,.97);
  color:#f2f5f7;
  box-shadow:0 12px 32px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.04);
  font-size:11px;
  font-weight:650;
  line-height:1.38;
  letter-spacing:.01em;
  pointer-events:none;
  white-space:normal;
}
.pbs-topbar-tooltip[hidden]{display:none!important}


/* Tablet topbar compaction. */
html.pbs-tablet-ui .topbar.ds-topbar{
  width:100%!important;
  min-width:0!important;
  grid-template-rows:44px 30px 54px 52px;
}

html.pbs-tablet-ui .ds-title-row{
  gap:7px;
  padding:3px 7px;
  overflow-x:auto;
  overflow-y:hidden;
}

html.pbs-tablet-ui .ds-title-row .brand{
  min-width:140px;
}

html.pbs-tablet-ui .ds-title-row .brand img{
  width:88px;
}

html.pbs-tablet-ui .ds-product-subtitle{
  display:none!important;
}

html.pbs-tablet-ui .ds-title-row .project-field{
  width:150px;
  min-width:135px;
}

html.pbs-tablet-ui .ds-title-row .profile-field{
  width:190px;
  min-width:170px;
}

html.pbs-tablet-ui .ds-action-row{
  gap:5px;
  padding:4px 6px;
}

html.pbs-tablet-ui .ds-action-group{
  gap:5px;
  padding-right:5px;
}

html.pbs-tablet-ui .ds-action-row button{
  min-height:42px;
  min-width:48px;
  padding:5px 7px;
  font-size:10px;
}

html.pbs-tablet-ui .ds-build-row{
  padding:5px 8px;
}

html.pbs-tablet-ui .ds-build-button{
  min-height:42px;
}


/* Explicit horizontal ribbon scroller.
   Arrows overlay the ribbon edges so Firefox cannot push either control off-screen. */
.ds-action-scroll-shell{
  position:relative;
  min-width:0;
  width:100%;
  height:100%;
  display:block;
  background:#2b2b2b;
  border-bottom:1px solid #44484c;
  overflow:hidden;
}
.ds-action-scroll-shell:not(.has-overflow) .ds-action-scroll-button{
  visibility:hidden;
  opacity:0!important;
  pointer-events:none;
}
.ds-action-scroll-shell .ds-action-row{
  min-width:0;
  width:100%;
  height:100%;
  padding-left:58px!important;
  padding-right:58px!important;
  border-bottom:0;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:#ff9838 #1d2023;
}
.ds-action-scroll-button{
  position:absolute!important;
  z-index:20!important;
  top:0!important;
  bottom:0!important;
  width:52px!important;
  min-width:52px!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0;
  border-radius:0;
  background:linear-gradient(180deg,#a95614,#6c330b)!important;
  color:#fff3df!important;
  font-size:24px!important;
  font-weight:950;
  line-height:1;
  text-shadow:0 1px 2px #000;
  box-shadow:0 0 18px rgba(0,0,0,.72);
}
.ds-action-scroll-button.left{
  left:0!important;
  right:auto!important;
  border-right:2px solid #e58a31!important;
}
.ds-action-scroll-button.right{
  right:0!important;
  left:auto!important;
  border-left:2px solid #e58a31!important;
}
.ds-action-scroll-button:not(:disabled){
  opacity:1!important;
  background:linear-gradient(180deg,#b96319,#783b0d)!important;
  color:#fff!important;
  box-shadow:0 0 0 1px rgba(255,153,61,.34),0 0 20px rgba(255,128,30,.28);
}
.ds-action-scroll-button:disabled{
  opacity:.68!important;
  color:#cfb28e!important;
  background:linear-gradient(180deg,#3b3d40,#26282b)!important;
}
.ds-action-scroll-shell.can-scroll-left::before,
.ds-action-scroll-shell.can-scroll-right::after{
  content:"";
  position:absolute;
  z-index:15;
  top:0;
  bottom:0;
  width:38px;
  pointer-events:none;
}
.ds-action-scroll-shell.can-scroll-left::before{
  left:52px;
  background:linear-gradient(90deg,rgba(0,0,0,.82),transparent);
}
.ds-action-scroll-shell.can-scroll-right::after{
  right:52px;
  background:linear-gradient(270deg,rgba(0,0,0,.82),transparent);
}
html.pbs-tablet-ui .ds-action-scroll-shell .ds-action-row{
  padding-left:64px!important;
  padding-right:64px!important;
}
html.pbs-tablet-ui .ds-action-scroll-button{
  width:58px!important;
  min-width:58px!important;
  font-size:27px!important;
}
html.pbs-tablet-ui .ds-action-scroll-button.left{
  left:0!important;
}
html.pbs-tablet-ui .ds-action-scroll-button.right{
  right:0!important;
}
html.pbs-tablet-ui .ds-action-scroll-shell.can-scroll-left::before{
  left:58px;
}
html.pbs-tablet-ui .ds-action-scroll-shell.can-scroll-right::after{
  right:58px;
}



/* Wallpaper library category accordion. */
.wallpaper-library-grid{
  display:flex!important;
  flex-direction:column;
  gap:10px;
  padding:13px!important;
}
.wallpaper-group{
  flex:0 0 auto;
  overflow:hidden;
  border:1px solid #394149;
  border-radius:8px;
  background:#0f1317;
}
.wallpaper-group-heading,
.wallpaper-subgroup-heading{
  width:100%;
  min-height:42px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:0;
  border-radius:0;
  background:linear-gradient(180deg,#242a30,#171c21);
  color:#f0f3f5;
  text-align:left;
  font-size:13px;
  font-weight:900;
  letter-spacing:.035em;
}
.wallpaper-group-heading small,
.wallpaper-subgroup-heading small{
  min-width:28px;
  padding:2px 7px;
  border:1px solid #46515a;
  border-radius:999px;
  background:#101419;
  color:#9daab5;
  text-align:center;
  font-size:9px;
}
.wallpaper-group-heading i,
.wallpaper-subgroup-heading i{
  color:#ff9838;
  font-size:17px;
  font-style:normal;
  transition:transform .18s ease;
}
.wallpaper-group.collapsed>.wallpaper-group-body{display:none}
.wallpaper-group.collapsed>.wallpaper-group-heading i{transform:rotate(-90deg)}
.wallpaper-group-body{padding:10px}
.wallpaper-group-grid,
.wallpaper-subgroup-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(230px,1fr));
  gap:13px;
}
.wallpaper-subgroup{
  margin-top:9px;
  overflow:hidden;
  border:1px solid #30373d;
  border-radius:7px;
}
.wallpaper-subgroup:first-child{margin-top:0}
.wallpaper-subgroup-heading{
  min-height:36px;
  background:#161c21;
  font-size:11px;
}
.wallpaper-subgroup-grid{padding:10px}
.wallpaper-subgroup.collapsed>.wallpaper-subgroup-grid{display:none}
.wallpaper-subgroup.collapsed>.wallpaper-subgroup-heading i{transform:rotate(-90deg)}
.wallpaper-card-preview{position:relative}
.wallpaper-card-badge{
  position:absolute;
  top:7px;
  right:7px;
  padding:3px 7px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  background:rgba(4,8,12,.82);
  color:#eaf5ff;
  box-shadow:0 3px 10px rgba(0,0,0,.45);
  font-size:8px;
  font-weight:950;
  letter-spacing:.075em;
}
.wallpaper-card-badge.animated{border-color:#36bfff;color:#8de8ff}
.wallpaper-card-badge.photo{border-color:#f0a14b;color:#ffd39b}
@media(max-width:1350px){
  .wallpaper-group-grid,.wallpaper-subgroup-grid{grid-template-columns:repeat(2,minmax(220px,1fr))}
}
@media(max-width:900px){
  .wallpaper-group-grid,.wallpaper-subgroup-grid{grid-template-columns:1fr}
}