/* ===== Blocks base ===== */
.block{
  position:relative;
  width:100%;
  border-radius:var(--blk-radius, 22px) !important;
  border-style:solid;
  border-color:var(--blk-bc, rgba(255,255,255,.10)) !important;
  border-width:var(--blk-bw, 1px) !important;
  overflow:hidden;
  margin:var(--blk-margin, 10px) 0;
  min-height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#2A2A2A;
  box-shadow:var(--blk-shadow-css, none) !important;
  transform-origin:center;
}

#main.shadow-on .block{
  box-shadow:var(--blk-shadow-css, 0 10px 30px rgba(0,0,0,.28));
}

.block .bgimg{
  position:absolute;
  inset:0;
  background-size:var(--blk-img-fit);
  background-repeat:no-repeat;
  background-position:center;
  transform:scale(1.05);
  filter:blur(8px);
  opacity:var(--blk-img-opacity);
  z-index:0;
}

.block .shade{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.20), rgba(0,0,0,.42));
  z-index:1;
}

.title{
  position:relative;
  z-index:2;
  padding:18px 14px;
  font-weight:900;
  font-size:20px;
  line-height:1.15;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  transform-origin:center;
}

.blk-actions{
  position:absolute;
  top:10px;
  right:10px;
  z-index:4;
  display:flex;
  gap:8px;
  transform-origin:center;
}

.iconbtn{
  width:34px;
  height:34px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35);
  display:grid;
  place-items:center;
  cursor:pointer;
}

.addblock{
  cursor:pointer;
  background:rgba(255,255,255,.04);
}

.plus{
  font-size:34px;
  font-weight:900;
  opacity:.7;
}

/* ===== Layouts 1..10 ===== */
.layout-1 .block{border-radius:22px}

.layout-2 .block{
  border-radius:28px;
  padding:10px;
}
.layout-2 .block:before{
  content:"";
  position:absolute;
  inset:12px;
  border-radius:18px;
  background:rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
  z-index:1;
}
.layout-2 .title{z-index:2}

.layout-3 .block{
  margin:16px 0;
  border-radius:18px;
}

/* 4 */
.layout-4{
  padding-left:0 !important;
  padding-right:0 !important;
}
.layout-4 .block{
  width:calc(100% - 16px);
  margin-left:8px;
  margin-right:8px;
  border-radius:26px;
  min-height:160px;
}

.layout-5 .block{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.14);
}

.layout-6 .block{
  border-radius:16px;
  border-color:rgba(255,255,255,.08);
}

/* 7 */
.layout-7{
  padding-left:0 !important;
  padding-right:0 !important;
}
.layout-7 .block{
  margin:0 !important;
}

/* 8 */
.layout-8{
  padding-left:0 !important;
  padding-right:0 !important;
}
.layout-8 .block{
  margin:0 !important;
  min-height:150px;
}
.layout-8 .block + .block{
  border-top:1px solid rgba(255,255,255,.08);
}

/* 9 */
.layout-9{
  padding-left:0 !important;
  padding-right:0 !important;
}
.layout-9 .block{
  margin:0 !important;
  width:100%;
}

/* 10 */
.layout-10{
  padding-left:0 !important;
  padding-right:0 !important;
}
.layout-10 .block{
  border-radius:var(--l10-radius) !important;
  margin-top:var(--l10-gap) !important;
  margin-bottom:var(--l10-gap) !important;
  border-width:var(--blk-bw);
}

/* ===== Extra per-layout ===== */
#main.use-extra .block{
  width:var(--blk-width);
  min-height:var(--blk-minh);
  transform:rotate(var(--blk-rot));
}

#main.use-extra .block .title,
#main.use-extra .block .blk-actions{
  transform:rotate(calc(var(--blk-rot) * -1));
}

/* ===== Preview in create/edit ===== */
.previewWrap{
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
  margin-bottom:12px;
}

.previewBlock{
  position:relative;
  width:100%;
  height:140px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.previewBlock .bgimg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transform:scale(1.05);
  filter:blur(8px);
  opacity:.88;
  z-index:0;
}

.previewBlock .shade{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.22), rgba(0,0,0,.38));
  z-index:1;
}

.previewBlock .ptitle{
  position:relative;
  z-index:2;
  font-weight:900;
  font-size:18px;
  text-align:center;
  padding:0 14px;
  line-height:1.15;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  opacity:.95;
}

.block-dot{
  position:absolute;
  left:10px;
  top:10px;
  z-index:6;
  width:15px;
  height:15px;
  border-radius:999px;
  background:#ffffff;
  pointer-events:none;
}

.block-top-left-tools{
  position:absolute;
  left:10px;
  top:10px;
  z-index:7;
  display:flex;
  align-items:center;
  gap:8px;
}

.block-top-left-tools .block-dot{
  position:static;
  left:auto;
  top:auto;
  margin:0;
}

.block-public-toggle{
  transform:scale(.92);
  transform-origin:left center;
}