:root { --bd:#ddd; --bg:#fff; --muted:#f2f2f2; --txt:#222; }
body { margin:0; color:var(--txt); background:#fafafa; }
.container { margin: 24px auto; max-width: 960px; padding: 0 16px; }
.tab-headers {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:18px;
}
.tab-btn {
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  min-width:0;
  padding:7px 12px;
  background:transparent;
  border:1px solid rgba(0,0,0,0.22);
  border-radius:var(--button-radius, 6px);
  text-decoration:none;
  color:#333;
  font-size:0.9rem;
  font-weight:400;
  font-family:inherit;
  line-height:1.35;
  transition: background 0.15s ease, transform 0.15s ease;
}
.tab-btn:not(.active):hover { background:rgba(0,0,0,0.07); border-color:rgba(0,0,0,0.22); transform:translateY(-1px); }
.tab-btn.active {
  background:#333;
  border-color:#333;
  color:#fff;
}
.tab-content {
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:var(--site-radius, 8px);
  padding:16px;
}
.tab-content > :where(form, div, section):not(.message):not(.include-missing) {
  box-sizing:border-box;
  max-width:1000px;
  margin-left:auto;
  margin-right:auto;
}
.tab-content :where(h1, h2, h3):not(.nf-title h3):not(.product-title):not(.cart-product-name) {
  text-align:center;
}
.include-missing { padding:16px; border:1px dashed #caa; background:#fff6f6; border-radius:var(--site-radius, 8px); color:#8b2b2b; }
.include-missing code { background:#fff; border:1px solid #ecc; padding:2px 6px; border-radius:var(--site-radius, 4px); }
.tabs {
  box-sizing:border-box;
  width:min(100%, 1080px);
  margin:0 auto;
  padding:30px;
}

.form-row-upload {
  border: 3px solid #eee;
  border-radius: var(--site-radius, 12px);
  padding: 10px;
  margin-bottom: 25px;
  margin-right: 15px;
  display: inline-block;
  vertical-align: top;
  width: 20vw;
}

.code-example {
  background: #1e1e1e;
  color: #ddd;
  padding: 12px 16px 0px;
  border-radius: var(--site-radius, 8px);
  font-family: "Fira Code", Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-x: auto;
  margin-top: 6px;
  margin-bottom: 14px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.25);
}

.code-example .tag { color: #7db5e2; }
.code-example .text { color: #ce9178; }
.code-example .attr      { color: #85af71 }
.code-example .attr-eq   { color: #08f538; }
.code-example .attr-val  { color: #85af71; }

.code-note {
  font-size: 0.85rem;
  color: #ddd;
  margin: 4px 0 14px 0;
  font-style: italic;
}


.custom-file {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.upload-file-control {
  overflow: visible;
}

.custom-file input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}

.custom-file-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #fff;
  border-radius: var(--button-radius, 6px);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  min-height: 5vh;
  min-width: 12vh;
  padding: 6px 10px;
  white-space: nowrap;
}

.custom-file-label:hover {
  background-color: #45a049;
  transform: translateY(-1px);
}

.upload-file-button {
  height: 5vh;
  min-height: 5vh;
  min-width: 18vh;
  padding: 6px 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  text-transform: none;
}

.admin-file-picker {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 4px 0 16px;
  overflow: visible;
}

.admin-file-picker-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 10px;
  border: 1px solid var(--element-border, rgba(0,0,0,0.16));
  border-radius: var(--site-radius, 8px);
  background: var(--element-panel-bg, rgba(0,0,0,0.04));
  box-sizing: border-box;
}

.admin-file-name {
  color: var(--element-text, #333);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 0.92rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(52vw, 360px);
}

@media (max-width: 768px) {
  .tabs { padding: 20px 10px 30px;}
  .form-row-upload { width: 90%;}
  .tab-headers {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(100%, 560px);
    gap: 6px;
    margin: 0 auto 12px;
  }
  .tab-btn {
    width: 100%;
    min-height: 34px;
    font-size: 0.78rem;
    padding: 6px 9px;
  }
}