body.post-page{
  margin:0;
  background:var(--color-secondary);
  color:var(--color-text);
  display:flex;
}

.post-shell{
  width: 100%;
  margin:0 auto;
  padding:clamp(28px,4vw,72px);
}

.post-snippet{
  padding:0 clamp(16px,5vw,64px);
}

.post-header{
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:left;
}

.title{
  font-size:clamp(34px,4vw,64px);
  margin:0;
  line-height:1.1;
  font-family: "Intro Rust","Display Light", "Display Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
}
.post-header .intro{
  margin:0;
  max-width:62ch;
  color:var(--color-text);
  font-size:clamp(16px,1.9vw,18px);
  line-height:1.6;
}

.section-label{
  margin:24px 0 10px;
  font-family: "Display Bold";
  letter-spacing:.18em;
  font-weight:700;
  font-size:12px;
  color:var(--color-primary-strong);
}

.tabs{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:8px;
  padding:8px;
  border-radius:var(--radius-interactive);
  border: 1px solid var(--color-border-soft);
  background:var(--color-card-bg);
  margin-bottom:24px;

  overflow:hidden;
}
.tab{
  position:relative;
  min-width:0;
  appearance:none;
  border:none;
  background:transparent;
  border-radius:var(--radius-interactive);
  padding:18px clamp(14px,2.8vw,26px);
  font-weight:850;
  letter-spacing:.14em;
  font-family: "Display Bold";
  font-size:clamp(10px,1.3vw,12px);
  text-align:center;
  color:color-mix(in srgb,var(--color-text) 75%,var(--color-secondary));
  cursor:pointer;
  transition:color .25s ease, letter-spacing .25s ease, transform .25s ease;
  z-index:2;
}
.tab:hover{
  color:var(--color-text);
}
.tab.is-active{
  color:#fff;
  letter-spacing:.18em;
}
.tab:focus-visible{
  outline:3px solid color-mix(in srgb,var(--color-secondary) 35%,var(--color-primary));
  outline-offset:3px;
}
.tab-slider{
  position:absolute;
  top:8px;
  bottom:8px;
  width:calc((100% - 8px)/2);
  border-radius:var(--radius-interactive);
  background:var(--color-primary);

  z-index:1;
  transition:transform .4s cubic-bezier(.6,.05,.25,1), width .4s cubic-bezier(.6,.05,.25,1);
  transform:translate3d(0,0,0);
  left:0;
}

@media (max-width: 720px), (max-aspect-ratio: 3/2){
  .tabs{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:6px;
    border-radius:20px;
    gap:6px;
  }
  .tab{
    padding:16px 10px;
    font-size:12px;
    letter-spacing:.2em;
  }
  .tab.is-active{
    color:var(--color-text);
  }
  .tab-slider{
    top:auto;
    height:5px;
    bottom:12px;
    border-radius:20px;
    box-shadow:0 6px 20px rgba(0,0,0,.25);
    max-width:none;
  }
}
@media (max-width: 480px), (max-aspect-ratio: 3/4){
  .tabs{
    padding:8px 8px 14px;
    gap:8px;
    border-radius:20px;
  }
  .tab{
    padding:14px 8px;
    font-size:11px;
    letter-spacing:.24em;
  }
  .tab.is-active{
    color:var(--color-text);
  }
  .tab-slider{
    bottom:11px;
    max-width:none;
  }
}

.panel{
  display:none;
  margin-top:18px;
  padding:clamp(24px,3vw,32px) 0 0;
  border-radius:0;
  border:0;
  border-top:0;
  background:transparent;
  box-shadow:none;
}
.panel.is-active{
  display:block;
  animation:fadeUp .4s ease;
}

/* ===== Form fields ===== */
.form{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.row{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.row label,
#tab-inspiration .card-head{
  font-size:13px;
  letter-spacing:.08em;
  font-family: "Display Bold";
  font-weight:700;
  color:var(--color-primary-strong);
}
.row input,
.row textarea{
  border-radius:20px;
  border:1px solid rgba(38, 59, 70, 0.25);
  background:#fff;
  padding:12px 16px;
  font:inherit;
  color:inherit;
  box-shadow:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.row input:focus,
.row textarea:focus{
  outline:2px solid var(--color-primary);
  box-shadow:var(--shadow-sm);
}
.row textarea{min-height:120px;resize:vertical;}
.tag-suggestions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:-2px 0 4px;
}
.tag-suggestions__label{
  font-size:12px;
  font-weight:800;
  font-family: "Display Light";
  letter-spacing:.08em;
  color:var(--color-text);
}
.tag-suggestion{
  border:none;
  background:var(--color-border-soft);
  border-radius:999px;
  padding:6px 10px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  color:var(--color-text);
  transition:transform .15s ease, background .15s ease;
}
.tag-suggestion:hover{
  transform:translateY(-1px);
  background: var(--color-border);
}
.tag-suggestion:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}
.asset-box{
  border:0;
  background:transparent;
  border-radius:0;
  padding:0;
  box-shadow:none;
  position:relative;
  overflow:visible;
  margin-top:32px;
}
.asset-box::before{
  content:none;
}
.asset-header{
  display:flex;
  gap:18px;
  align-items:flex-start;
  justify-content:space-between;
  flex-wrap:wrap;
}
.asset-title{
  margin:2px 0 4px;
  font-size:20px;
  letter-spacing:-0.01em;
}
.asset-kicker{
  font-family: "Display Bold";
  letter-spacing:.16em;
  font-weight:800;
  color:var(--color-primary-strong);
  margin:0;
  font-size:11px;
}
.asset-copy{
  margin:0;
  color:color-mix(in srgb,var(--color-text) 80%,var(--color-text));
  max-width:62ch;
}
.asset-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  min-width:0;
}
.asset-hint{
  font-size:12px;
  color:var(--color-text);
  white-space:nowrap;
}
.asset-autofill{
  display:none;
  white-space:nowrap;
}
.asset-autofill.is-visible{
  display:inline-flex;
}
.asset-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px;
  margin-top:12px;
}
.asset-drop{
  border:1px dashed var(--color-border-soft);
  background:linear-gradient(135deg, color-mix(in srgb,var(--color-card-bg) 92%,#fff), color-mix(in srgb,var(--color-primary) 6%, var(--color-card-bg)));
  border-radius:14px;
  min-height:170px;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}
.asset-drop:hover{
  border-color:var(--color-primary);
  box-shadow:var(--shadow-sm);
}
.asset-drop.dragover{
  border-color:var(--color-primary);
  background:color-mix(in srgb,var(--color-primary) 8%, var(--color-card-bg));
}
.asset-drop.is-uploading{
  opacity:.7;
  pointer-events:none;
}
.asset-drop__inner{
  width:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  justify-content:center;
  max-width:360px;
  margin:0 auto;
}
.asset-drop__icon{
  width:46px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--color-primary);
  background:color-mix(in srgb,var(--color-primary) 16%, var(--color-card-bg));
  box-shadow:var(--shadow-sm);
}
.asset-drop__icon svg{
  width:22px;
  height:22px;
}
.asset-drop__title{
  margin:0;
  font-weight:800;
  font-size:16px;
  letter-spacing:-0.01em;
}
.asset-detected{
  display:inline-flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-start;
  font-size:11px;
  font-weight:700;
  color:var(--color-text);
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--color-border-soft);
  background:color-mix(in srgb,var(--color-card-bg) 92%,#fff);
}
.asset-list{
  border: 1px solid var(--color-border-soft);
  border-radius:14px;
  background:color-mix(in srgb,var(--color-card-bg) 96%,#fff);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:160px;
}
.asset-item{
  border: 1px solid var(--color-border-soft);
  border-radius:12px;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
  background:color-mix(in srgb,var(--color-card-bg) 94%,#fff);
}
.asset-item__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.asset-path{
  font-weight:800;
  word-break:break-all;
}
.asset-status{
  font-size:12px;
  font-weight:800;
  padding:4px 8px;
  border-radius:999px;
  background:color-mix(in srgb,var(--color-text-bg) 60%,#fff);
}
.asset-status--ok{
  background:color-mix(in srgb,var(--color-primary) 18%, var(--color-card-bg));
  color:var(--color-primary);
}
.asset-status--warn{
  background:color-mix(in srgb,var(--color-accent) 14%, var(--color-card-bg));
  color:var(--color-accent);
}
.asset-url{
  font-family:Menlo,Consolas,monospace;
  font-size:12px;
  color:var(--color-text);
  word-break:break-all;
}
.asset-footnote{
  margin:10px 2px 0;
  color:var(--color-text);
  font-size:12px;
}
.card-preview{
  margin-top:16px;
  border: 1px solid var(--color-border-soft);
  background:var(--color-secondary);
  border-radius:20px;
  padding:20px;
  position:relative;
  overflow:hidden;
}
.card-preview::before{
  content:"";
  position:absolute;
  inset:-40% auto auto -10%;
  height:140%;
  width:60%;
  background:radial-gradient(circle at 20% 30%, color-mix(in srgb,var(--color-secondary) 22%, transparent) 0%, transparent 60%);
  pointer-events:none;
  opacity:.3;
}
.card-preview__header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.card-preview__titles{
  min-width:0;
}
.card-preview__kicker{
  font-family: "Display Bold";
  letter-spacing:.16em;
  font-weight:800;
  color:var(--color-primary-strong);
  margin:0;
  font-size:11px;
}
.card-preview__title{
  margin:2px 0 4px;
  font-size:20px;
  letter-spacing:-0.01em;
}
.card-preview__copy{
  margin:0;
  color:color-mix(in srgb,var(--color-text) 80%,var(--color-text));
  max-width:62ch;
}
.card-preview__zoom{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  font-family: "Intro Rust";
  color:var(--color-text);
  flex-wrap:wrap;
}
.card-preview__zoom-label{
  font-size:11px;
}
.card-preview__zoom input[type="range"]{
  width:160px;
  accent-color:var(--color-primary);
  cursor:pointer;
}
.card-preview__zoom-value{
  min-width:42px;
  text-align:right;
  font-size:12px;
}
.card-preview__stage{
  margin-top:16px;
  display:flex;
  justify-content:center;
}
.card-preview__card{
  width:min(420px, 100%);
  cursor:default;
}
.card-preview__card.post-card:hover,
.card-preview__card.post-card:focus-visible{
  transform:none;
}
.card-preview__media{
  aspect-ratio:4 / 3;
}
.card-preview__frame{
  width:100%;
  height:100%;
  border:0;
  background:#fff;
  display:block;
  pointer-events:none;
  user-select:none;
}
.card-preview__footnote{
  margin:10px 2px 0;
  color:var(--color-text);
  font-size:12px;
}
.title-limit-hint{
  font-size:12px;
  font-weight:800;
  color:var(--color-accent);
  margin-top:4px;
  display:none;
}
.row-license .license-fields{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
}
.row-license label{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.row-license label .info-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:inherit;
}
.row-license label .info-link:hover{
  color:inherit;
}
.row-license label .info-icon{
  width:16px;
  height:16px;
  display:block;
  background-color:currentColor;
  -webkit-mask:url("/assets/icons/info.svg") center / contain no-repeat;
  mask:url("/assets/icons/info.svg") center / contain no-repeat;
}
.row-license .license-select-wrap,
.row-license .license-file-input{
  flex:1;
  min-width:220px;
}

.row-license .license-select-wrap select{
  appearance:none;
  width:100%;
}
.license-select-wrap{
  position:relative;
  color: #fff;
}

.license-select-wrap::after{
  content:"";
  position:absolute;
  top:50%;
  right:18px;
  width:14px;
  height:14px;
  transform:translateY(-50%);
  background-color: currentColor;
  -webkit-mask: url("/assets/icons/miniarrow.svg") center / contain no-repeat;
  mask: url("/assets/icons/miniarrow.svg") center / contain no-repeat;
  pointer-events:none;
}
.license-file-input{
  padding:10px 16px;
  cursor:pointer;

}
.license-file-input::file-selector-button{
  border:none;
  border-radius:999px;
  padding:10px 18px;
  margin-right:12px;
  font-weight:700;
  font-family: "Display Light", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  background:var(--color-primary);
  color:#fff;
  cursor:pointer;
  transition: background .25s ease;
}
.license-file-input::file-selector-button:hover{
  background:var(--color-primary-strong);
}
.license-note{
  margin:4px 0 0;
  font-size:.9rem;
  color:var(--color-text);
}
.liscense-select{
  background:var(--color-primary);
  padding: 20px;
  border-radius: var(--radius-interactive);
  font-family: "Intro rust", system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  color:#fff;
  border:none;
  cursor:pointer;
}
.liscense-select:hover{
  border-color: var(--color-primary-strong);
}
/* ===== Preview ===== */
.preview-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:6px;
  margin-bottom:24px;
  
}
.preview-wrap .sub{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--color-text);
  font-family: "Display Bold";
  letter-spacing:.1em;
}
.preview{
  width:100%;
  height:360px;
  border: 1px solid var(--color-border-soft);
  border-radius:20px;
  background-color: #ffffff;
}

/* ===== Snippet code tabs ===== */
.code-tabs{
  margin-top:18px;
  border-radius:20px;
  border: 1px solid var(--color-border-soft);
  background:var(--color-secondary);
  padding: 20px;
}
.code-tabs__header{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:8px;
  align-items:center;
}
.code-tab{
  position:relative;
  appearance:none;
  border:none;
  background:transparent;
  border-radius:20px;
  padding:14px 16px;
  font-weight:800;
  letter-spacing:.08em;
  font-family: "Display Bold";
  font-size:12px;
  line-height:1.2;
  min-width:0;
  word-break:break-word;
  text-align:center;
  color:color-mix(in srgb,var(--color-text) 72%,var(--color-secondary));
  cursor:pointer;
  z-index:2;
  transition:color .2s ease, letter-spacing .2s ease;
}
.code-tab:hover{color:var(--color-primary);}
.code-tab.is-active{
  color:#fff;
  letter-spacing:.12em;
}
.code-tab:focus-visible{
  outline:3px solid color-mix(in srgb,var(--color-secondary) 40%,var(--color-primary));
  outline-offset:3px;
}
.code-tab-slider{
  position:absolute;
  top:2px;
  bottom:2px;
  left:2px;
  width:calc((100% - 16px)/3);
  display:block;
  border-radius:20px;
  background:var(--color-primary);
  transform:translate3d(0,0,0);
  transition:transform .35s cubic-bezier(.6,.05,.25,1), width .35s cubic-bezier(.6,.05,.25,1), left .35s cubic-bezier(.6,.05,.25,1), right .35s cubic-bezier(.6,.05,.25,1);
}
@media (max-width: 720px), (max-aspect-ratio: 3/2){
  .code-tabs{
    padding:16px;
  }
  .code-tabs__header{
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:stretch;
  }
  .code-tab{
    display:block;
    width:100%;
    text-align:left;
    padding:12px 14px;
    font-size:12px;
    letter-spacing:.04em;
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--color-text) 16%, transparent);
    background:#fff;
  }
  .code-tab.is-active{
    letter-spacing:.06em;
    background:var(--color-primary);
    border-color:transparent;
    color:#fff;
  }
  .code-tab-slider{
    display:none;
  }
}
@media (max-width: 480px){
  .code-tabs{
    padding:12px;
  }
  .code-tab{
    padding:10px 12px;
    font-size:11px;
    letter-spacing:.03em;
    border-radius:14px;
  }
  .code-tabs__header{
    align-items:stretch;
  }
}
.code-panel{
  display:none;
  margin-top:14px;
}
.code-panel.is-active{display:block;}

.grid3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}
@media (max-width:960px){
  .grid3{grid-template-columns:1fr;}
}
.grid2{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:8px;
}
@media (max-width:960px){
  .grid2{grid-template-columns:1fr;}
}

.card{
  border:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:none;
}
.card-head{
  padding:0;
  font-weight:700;
  letter-spacing:.08em;
  font-family: "Display Bold";
  font-size:12px;
  color:var(--color-primary);
}
.editor-shell{
  position:relative;
  border-radius:20px;
  border:1px solid var(--color-border-soft);
  background:color-mix(in srgb,var(--color-card-bg) 92%,#fff);
  padding:6px;
  overflow:hidden;
}
.monaco-host{
  width:100%;
  min-height:320px;
  height:360px;
  border-radius:20px;
  overflow:hidden;
}
.code{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  padding:0;
  margin:0;
  opacity:0;
  pointer-events:none;
  resize:none;
  background:transparent;
}
.codespace{
  font-family: "Intro Rust", "Display Light", "Display Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
  font-weight:700;
  color:var(--color-text);
  font-size:clamp(14px,1.2vw,16px);
}
.codespacedescr{
  font-size:9px;
color:var(--color-text);
}
.drop{
  position:relative;
  border-radius:20px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.drop::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:20px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, border-color .25s ease;
}
.drop.dragover{
  border-color:var(--color-primary);
  box-shadow:0 12px 30px rgba(38,59,70,.22);
  transform:translateY(-2px);
   border:2px dashed color-mix(in srgb,var(--color-border) 70%,var(--color-text));
}
.drop.dragover::after{
  border-color:var(--color-primary);
  opacity:1;
}

/* ===== Actions ===== */
.actions{
  margin-top:12px;
  display:flex;
  justify-content:center;
}

/* ===== Inspiration specific ===== */
#tab-inspiration .grid3{
  grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);
  gap:clamp(16px,2.5vw,28px);
  align-items:stretch;
}
@media (max-width:1040px){
  #tab-inspiration .grid3{grid-template-columns:1fr;}
  .inspo-tips-card{display:none;}
}

#tab-inspiration .card{
  background:transparent;
  border:none;
  box-shadow:none;
}
#tab-inspiration .card-head{
  text-align:left;
  margin:0;
  padding:0;
}

.inspo-drop{
  position:relative;
  border:none;
  border-radius:0;
  background:transparent;
  min-height:0;
  cursor:default;
  overflow:visible;
  transition:border-color .3s ease, box-shadow .3s ease;
  padding:0;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.inspo-drop.inspo-drop--image .inspo-drop-body{
  cursor:pointer;
}
.inspo-drop.inspo-drop--figma .inspo-drop-body::before{
  display:none;
}
.inspo-drop-body{
  position:relative;
  border:none;
  border-radius:20px;
  background:var(--color-card-bg);
  min-height:320px;
  overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
  padding:clamp(18px,2.8vw,28px);
  box-sizing:border-box;
}
.inspo-drop-body::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:20px;
  border:2px dashed color-mix(in srgb,var(--color-border) 65%,var(--color-secondary));
  pointer-events:none;
  transition:border-color .3s ease, transform .3s ease;
}
.inspo-drop.dragover .inspo-drop-body{
  border-color:var(--color-primary);
}
.inspo-drop.dragover .inspo-drop-body::before{
  border-color:var(--color-primary);
  transform:scale(.99);
}
.inspo-source-tabs{
  position:relative;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  padding:8px;
  border-radius:20px;
  border:1px solid color-mix(in srgb,var(--color-border-soft) 82%,#fff);
  background:color-mix(in srgb,var(--color-card-bg) 95%,#fff);
  margin-bottom:8px;
  overflow:hidden;
}
.inspo-source-tab{
  position:relative;
  appearance:none;
  border:none;
  background:transparent;
  border-radius:20px;
  padding:12px 14px;
  font-weight:800;
  letter-spacing:.08em;
  font-family:"Display Bold";
  font-size:12px;
  color:color-mix(in srgb,var(--color-text) 72%,var(--color-secondary));
  cursor:pointer;
  transition:color .2s ease, letter-spacing .2s ease;
  z-index:2;
}
.inspo-source-tab:hover{
  color:var(--color-primary);
}
.inspo-source-tab.is-active{
  color:#fff;
  letter-spacing:.12em;
}
.inspo-source-tab:focus-visible{
  outline:3px solid color-mix(in srgb,var(--color-secondary) 40%,var(--color-primary));
  outline-offset:3px;
}
.inspo-source-tab-slider{
  position:absolute;
  top:8px;
  bottom:8px;
  left:8px;
  width:calc((100% - 24px)/2);
  border-radius:20px;
  background:var(--color-primary);
  transform:translate3d(0,0,0);
  transition:transform .35s cubic-bezier(.6,.05,.25,1), width .35s cubic-bezier(.6,.05,.25,1);
  z-index:1;
}
.inspo-source-panel{
  display:none;
}
.inspo-source-panel.is-active{
  display:block;
}

.inspo-zone{
  position:relative;
  padding:clamp(18px,3vw,30px);
  text-align:left;
  max-width:none;
  margin-inline:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:18px;
  color:color-mix(in srgb,var(--color-text) 90%,#fff);
}
.inspo-zone--image{
  padding-top:clamp(22px,3.3vw,32px);
}
.inspo-zone--figma{
  padding-top:clamp(18px,2.5vw,26px);
}
.inspo-figma-field{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.inspo-figma-label{
  font-size:12px;
  letter-spacing:.08em;
  font-family:"Display Bold";
  color:var(--color-primary-strong);
}
.inspo-figma-field input{
  border-radius:14px;
  border:1px solid rgba(38,59,70,.2);
  background:#fff;
  color:var(--color-text);
  padding:12px 14px;
  font:inherit;
}
.inspo-figma-field input:focus-visible{
  outline:2px solid var(--color-primary);
  outline-offset:2px;
}
.inspo-figma-help{
  margin:0;
  font-size:12px;
  color:color-mix(in srgb,var(--color-text) 72%,var(--color-secondary));
}
.inspo-zone::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:20px;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
}
.inspo-drop:hover .inspo-zone::before{
  opacity:.08;
}
.inspo-text small{
  display:block;
  margin-top:10px;
  font-size:.92em;
  color:color-mix(in srgb,var(--color-text) 50%,var(--color-secondary));
  font-weight:500;
  letter-spacing:.02em;
}
@media (max-width:820px){
  .inspo-zone{
    text-align:center;
    align-items:center;
  }
  .inspo-zone::after{
    letter-spacing:.14em;
  }
}
@media (max-width: 720px), (max-aspect-ratio: 3/2){
  .inspo-source-tabs{
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .inspo-source-tab{
    width:100%;
    text-align:left;
    border-radius:16px;
    border:1px solid color-mix(in srgb,var(--color-text) 16%, transparent);
    background:#fff;
  }
  .inspo-source-tab.is-active{
    background:var(--color-primary);
    border-color:transparent;
  }
  .inspo-source-tab-slider{
    display:none;
  }
}
@media (max-width:600px){
  .inspo-drop-body{
    border-radius:20px;
    min-height:0;
  }
  .inspo-drop-body::before{
    inset:6px;
  }
  .inspo-zone{
    padding:30px 18px 42px;
  }
  .inspo-zone::after{
    font-size:11px;
  }
}

.inspo-empty{
  width:100%;
  margin:12px 0 0;
  padding:18px;
  border:none;
  font-weight:700;
  font-size:clamp(18px,1.9vw,22px);
  line-height:1.5;
  color:var(--color-text);
  width:100%;
}
.inspo-empty--figma{
  margin-top:4px;
  font-size:14px;
  font-weight:700;
  padding:12px 8px 0;
}
.inspo-hint{
  margin:10px 0 14px;
  font-size:12px;
  letter-spacing:.12em;
  font-family: "Display Bold";
  color:color-mix(in srgb,var(--color-text) 60%,var(--color-secondary));
  font-weight:700;
  justify-content: center;
  display: flex;
}
.inspo-previews{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-top:16px;
}
.inspo-previews.inspo-previews--figma{
  display:flex;
  justify-content:center;
}
.inspo-previews.inspo-previews--figma .inspo-thumb-card--figma{
  width:min(560px,100%);
}
@media (max-width:900px){
  .inspo-previews{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .inspo-previews{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
}
@media (max-width:420px){
  .inspo-previews{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;}
}
.inspo-thumb-card{
  position:relative;
  border-radius:20px;
  border:1px solid color-mix(in srgb,var(--color-border) 80%,var(--color-text));
  background:var(--color-secondary);
  overflow:hidden;
  aspect-ratio:3/4;
  cursor:grab;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.inspo-thumb-card:active{cursor:grabbing;}
.inspo-thumb-card > img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.inspo-thumb-card--figma{
  cursor:default;
  aspect-ratio:16/10;
  min-height:220px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.22), transparent 52%),
    linear-gradient(135deg, #0f1720 0%, #1b2d3d 52%, #2c4051 100%);
}
.inspo-figma-thumb{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.inspo-figma-embed{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:none;
  background:#fff;
}
.inspo-figma-meta{
  position:absolute;
  left:10px;
  right:10px;
  bottom:10px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:12px;
  background:rgba(15,23,32,.72);
  box-shadow:0 8px 18px rgba(0,0,0,.25);
  backdrop-filter:blur(4px);
}
.inspo-figma-meta img{
  width:18px;
  height:18px;
  flex:0 0 auto;
  object-fit:contain;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.32));
}
.inspo-figma-meta a{
  color:#eaf5ff;
  font-size:12px;
  text-decoration:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  font-family:"Display Bold";
}
.inspo-figma-meta a:hover{
  text-decoration:underline;
}
.inspo-thumb-card.drag-target{
  border-color:var(--color-accent);
  box-shadow:0 12px 25px rgba(15,18,20,.35);
}
.inspo-thumb-remove{
  position:absolute;
  top:10px;
  right:10px;
  width:34px;
  height:34px;
  border:none;
  border-radius:20px;
  background:color-mix(in srgb,var(--color-secondary) 85%,#000);
  background-image:url("/assets/icons/cross.svg");
  background-repeat:no-repeat;
  background-position:center;
  background-size:16px;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  transition:filter .2s ease,transform .2s ease;
}
.inspo-thumb-remove:hover{
  filter:brightness(1.1);
  transform:scale(1.05);
}
.inspo-thumb-remove:focus-visible{
  outline:2px solid color-mix(in srgb,var(--color-accent) 60%,var(--color-secondary));
  outline-offset:2px;
}
.inspo-cover-badge{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:6px 12px;
  border-radius:20px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  font-family: "Display Bold";
}
.inspo-order-badge{
  position:absolute;
  left:12px;
  top:12px;
  padding:5px 10px;
  border-radius:12px;
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:11px;
  font-weight:700;
}
.hidden{display:none;}

.seo-note{
  padding:clamp(20px,2vw,28px);
  border-radius:8px;
  border:1px solid var(--color-border-soft);
  border-right:5px solid var(--color-accent);
  background:#f3f3f3;
  color:var(--color-text);
  font-weight:500;
  line-height:1.6;
}
.seo-note-2{
  padding:clamp(20px,2vw,28px);
  border-radius:8px;
  border:1px solid var(--color-border-soft);
  border-right:5px solid var(--color-primary);
  background:#f3f3f3;
  color:var(--color-text);
  font-weight:500;
  line-height:1.6;
}
.seo-note-3{
  padding:clamp(20px,2vw,28px);
  border-radius:8px;
  border:1px solid var(--color-border-soft);
  border-right:5px solid var(--color-btn);
  background:#f3f3f3;
  color:var(--color-text);
  font-weight:500;
  line-height:1.6;
}
.seo-note-4{
  padding:clamp(20px,2vw,28px);
  border-radius:8px;
  border:1px solid var(--color-border-soft);
  border-right:5px solid var(--color-text);
  background:#f3f3f3;
  color:var(--color-text);
  font-weight:500;
  line-height:1.6;
}
/* ===== Animations & media ===== */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}

@media (max-width: 720px){
  .post-shell{
    padding:22px 18px 36px;
  }
  .post-snippet{
    padding:0;
  }
  .title{
    font-size:clamp(28px,9vw,40px);
  }
  .post-header .intro{
    font-size:clamp(14px,4vw,16px);
  }
  .section-label{
    margin:18px 0 8px;
  }
  .form{
    gap:16px;
  }
  .row{
    gap:6px;
  }
  .row label,
  #tab-inspiration .card-head{
    font-size:11px;
    letter-spacing:.12em;
  }
  .row input,
  .row textarea{
    padding:10px 12px;
  }
  .row-license .license-fields{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .row-license .license-select-wrap,
  .row-license .license-file-input{
    min-width:0;
    width:100%;
  }
  .license-file-input{
    padding:10px 12px;
  }
  .preview{
    height:clamp(220px,42vh,300px);
    border-radius:16px;
  }
  .code-tabs{
    padding:16px;
    border-radius:12px;
  }
  .code-panel{
    margin-top:12px;
  }
  .monaco-host{
    height:clamp(240px,46vh,320px);
    min-height:220px;
  }
  .asset-box{
    padding:0;
    border-radius:0;
    margin-top:24px;
  }
  .asset-header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .asset-actions{
    align-items:flex-start;
    width:100%;
  }
  .asset-hint{
    white-space:normal;
  }
  .asset-grid{
    grid-template-columns:1fr;
  }
  .asset-drop{
    min-height:140px;
  }
  .asset-list{
    min-height:120px;
  }
  #tab-inspiration .grid3{
    gap:16px;
  }
  .inspo-drop-body{
    min-height:240px;
    padding:18px;
  }
  .inspo-previews{
    gap:12px;
  }
  .actions{
    justify-content:stretch;
  }
}

@media (max-width: 540px){
  .post-shell{
    padding:20px 16px 32px;
  }
}

@media (max-width: 520px){
  .post-shell{
    padding:18px 14px 28px;
  }
}

@media (max-width: 480px){
  .tabs{
    grid-template-columns:1fr;
    padding:10px;
  }
  .tab{
    text-align:left;
    padding:14px 14px;
    letter-spacing:.12em;
  }
  .tab-slider{
    display:none;
  }
  .tab.is-active{
    background:var(--color-primary);
    color:#fff;
  }
  .code-tab{
    text-align:center;
    padding:12px 14px;
    font-size:11px;
    letter-spacing:.05em;
  }
  .inspo-source-tab{
    border-radius:14px;
  }
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
}