.sidebar .tab span.badge {
  flex: none;
}

#wfFontWeight option,
#wfFontStyle option {
  color: #000;
}

/* Case converter */
.case-op-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
  align-items: stretch;
  justify-content: flex-start
}

.case-op-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  background: linear-gradient(145deg, var(--neu-bg-primary, #e7ecf3), var(--neu-bg-secondary, #d9e0ea));
  border: 1px solid rgba(255, 255, 255, .75);
  color: var(--neu-text, #1f2937);
  box-shadow: 8px 8px 16px var(--neu-shadow-dark, #bcc4d0), -8px -8px 16px var(--neu-shadow-light, #fff);
  transition: transform .2s ease, box-shadow .2s ease;
}

.case-op-btn:hover {
  transform: translateY(-2px);
  box-shadow: 12px 12px 22px var(--neu-shadow-dark, #bcc4d0), -12px -12px 22px var(--neu-shadow-light, #fff);
}

.case-op-btn:active {
  transform: translateY(0);
  box-shadow: inset 3px 3px 7px rgba(188, 196, 208, .65), inset -3px -3px 7px rgba(255, 255, 255, .92);
}

.case-op-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 800;
  flex-shrink: 0;
  letter-spacing: -0.5px;
  background: linear-gradient(145deg, #efe8ff, #dddff8);
  color: var(--neu-accent, #7c3aed);
  box-shadow: inset 2px 2px 5px rgba(188, 196, 208, .55), inset -2px -2px 5px rgba(255, 255, 255, .88);
}

/* Word count + Lorem */
.wc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  margin: 25px 0 0;
}

.wc-stat {
  background: rgb(255 255 255 / 26%);
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 12px;
  padding: 12px 14px;
  text-align: center;
}

.wc-stat.wc-stat-wide {
  grid-column: 1/-1
}

.wc-stat .wc-val {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1.2;
  color: #626262
}

.wc-stat .wc-label {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px
}

.pxrem-preset-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.pxrem-preset-btns .button {
  padding: 8px 14px;
  min-height: 40px;
  font-size: 13px
}

.pxrem-result {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
  border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: inset 4px 4px 10px var(--neu-shadow-dark), inset -4px -4px 10px var(--neu-shadow-light);
}

.pxrem-result-val {
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1.2;
  color: #626262
}

.pxrem-result-formula {
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted)
}

.pxrem-ref-title {
  margin: 20px 0 10px;
  font-size: 1rem;
  font-weight: 700
}

.pxrem-ref {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px
}

.pxrem-ref th,
.pxrem-ref td {
  padding: 10px 12px;
  border: 1px solid rgba(184, 196, 208, .38);
  text-align: left
}

.pxrem-ref th {
  background: #e7ddff;
  font-weight: 700
}

.pxrem-ref tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .35)
}

#pxremBatch {
  padding: 16px 18px
}

#pxremBatchOut {
  padding: 16px 18px
}

.lorem-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  margin-top: 8px
}

.lorem-check input {
  width: auto;
  margin: 0
}

/* Site layout wrapper */
.site-wrap {
  display: block;
  width: 100%;
  max-width: min(1680px, 100%);
  margin: 0 auto;
  padding: 0 max(10px, env(safe-area-inset-left)) 0 max(10px, env(safe-area-inset-right));
  box-sizing: border-box;
}

.site-wrap>main#main-content {
  display: block;
  width: 100%;
  min-width: 0;
  padding: clamp(10px, 2vw, 20px) 0 clamp(20px, 3vw, 28px);
  box-sizing: border-box;
}

.site-wrap .site-bottom {
  max-width: min(1180px, 96%);
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#format-tab textarea,
#encoders-tab textarea,
#case-tab textarea,
#wordcount-tab textarea,
#lorem-tab textarea {
  padding: 20px 15px;
}

input#videoURL::placeholder {
  color: #fff;
  opacity: 1;
}

input#videoURL::-moz-placeholder {
  color: #fff;
  opacity: 1;
}

input#videoURL:-ms-input-placeholder {
  color: #fff;
}

input#videoURL::-ms-input-placeholder {
  color: #fff;
}

:root {
  --violet: #8b5cf6;
  --magenta: #ec4899;
  --cyan: #06b6d4;
  --indigo: #4338ca;
  --yellow: #facc15;
  --glass: rgba(255, 255, 255, .10);
  --stroke: rgba(255, 255, 255, .18);
  --text: #eef2ff;
  --muted: #dbeafe;
  --grad-hero: conic-gradient(from 90deg, var(--indigo), var(--violet), var(--magenta), var(--cyan), var(--indigo));
  --grad-ui: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
}

* {
  box-sizing: border-box
}

html,
body {
  scroll-behavior: smooth
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: 'Outfit', system-ui, sans-serif;
  color: var(--text);
  overflow-x: clip;
  min-width: 0;
}

img,
video,
canvas,
svg,
iframe {
  max-width: 100%;
  height: auto
}

h1,
h2,
h3 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .3px
}

@keyframes swirl {
  0% {
    transform: rotate(0)
  }

  100% {
    transform: rotate(360deg)
  }
}

header {
  text-align: center;
  padding: clamp(28px, 5vw, 60px) clamp(12px, 3vw, 20px) clamp(16px, 3vw, 28px)
}

header h1 {
  margin: 0;
  font-size: clamp(1.35rem, 4.2vw, 2.35rem);
  letter-spacing: .4px;
  background: linear-gradient(90deg, #fff, var(--muted));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 3px 8px rgba(236, 72, 153, .35);
  line-height: 1.25;
  word-wrap: break-word
}

header p {
  max-width: min(760px, 100%);
  margin: auto;
  color: var(--muted);
  opacity: .9;
  padding: 0 clamp(4px, 2vw, 12px)
}

main {
  display: flex;
  justify-content: center;
  padding: clamp(12px, 2vw, 24px)
}

.site-wrap>main#main-content {
  display: block;
  width: 100%;
  min-width: 0;
  padding: clamp(10px, 2vw, 20px) 0 clamp(20px, 3vw, 28px);
  box-sizing: border-box;
}

.shell {
  width: 100%;
  max-width: min(1180px, 96%);
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  border: 1px solid var(--stroke);
  border-radius: 22px;
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 35px rgba(17, 24, 39, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* Tabs */
.tabs {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  background: rgba(255, 255, 255, .06);
  border-bottom: 1px solid var(--stroke)
}

.tab {
  background: transparent;
  color: var(--text);
  padding: 16px;
  border: 0;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: .25s;
  font-size: 14px
}

.tab:hover {
  background: rgba(255, 255, 255, .07)
}

.tab.active {
  background: rgba(255, 255, 255, .10);
  box-shadow: inset 0 -3px 0 var(--cyan)
}

.panel {
  display: none;
  padding: 28px;
  animation: fadeIn .6s ease
}

.panel.active {
  display: block
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(15px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

/* Cards & Controls */
.glass {
  background: var(--glass);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 10px 28px rgba(6, 182, 212, .12), inset 0 1px 0 rgba(255, 255, 255, .05)
}

.grid {
  display: grid;
  gap: 18px
}

.grid.two {
  grid-template-columns: 1fr 1fr
}

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

  .tabs {
    grid-template-columns: repeat(3, 1fr)
  }
}

label {
  display: block;
  margin: 10px 0 6px;
  font-weight: 600;
  color: #e5e7eb
}

input,
select {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  padding: 12px;
  font-size: 15px
}

.range-value {
  margin-left: 8px;
  font-weight: 700;
  color: #fff
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
  padding: 13px 16px;
  transition: .2s
}

.button {
  background: linear-gradient(90deg, #fff, #dbeafe);
  color: #111
}

.button.primary {
  background: var(--grad-ui);
  color: #fff;
  box-shadow: 0 10px 30px rgba(139, 92, 246, .35)
}

.button.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(236, 72, 153, .35)
}

.drop {
  border: 2px dashed rgba(255, 255, 255, .35);
  border-radius: 16px;
  padding: 28px;
  text-align: center;
  cursor: pointer;
  transition: .3s
}

.drop:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(6, 182, 212, .9)
}

.drop i {
  font-size: 40px;
  color: #fdfcff;
  margin-bottom: 10px;
  text-shadow: 0 4px 20px rgba(139, 92, 246, .45);
  display: inline-block;
  min-width: 1em;
  min-height: 1em;
  line-height: 1
}

.info {
  margin-top: 10px;
  font-size: 14px;
  color: #e5e7eb
}

.preview img {
  max-width: 100%;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35)
}

.upscale-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 8px
}

.upscale-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 12px
}

.upscale-card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  margin-top: 8px;
  display: block
}

h3 {
  font-size: 1.25em;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px
}

h3 i {
  transition: transform .25s ease
}

h3:hover i {
  transform: scale(1.2) rotate(-3deg)
}

.progress {
  height: 12px;
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--stroke)
}

.progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--grad-ui);
  animation: barflow 2.2s linear infinite;
  background-size: 200% 100%
}

@keyframes barflow {
  0% {
    background-position: 0 0
  }

  100% {
    background-position: 200% 0
  }
}

/* Collage Maker Styles */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin: 20px 0
}

.template-card {
  background: var(--glass);
  border: 2px solid var(--stroke);
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  transition: .3s;
  position: relative;
  overflow: hidden
}

.template-card:hover {
  transform: translateY(-4px);
  border-color: var(--cyan);
  box-shadow: 0 12px 32px rgba(6, 182, 212, .25)
}

.template-card.selected {
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, .3)
}

.template-preview {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, rgba(139, 92, 246, .2), rgba(6, 182, 212, .2));
  border-radius: 10px;
  margin-bottom: 10px;
  display: grid;
  gap: 3px;
  padding: 8px
}

.template-name {
  text-align: center;
  font-weight: 600;
  font-size: 13px
}

.collage-canvas-wrapper {
  margin: 20px 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--glass);
  border: 1px solid var(--stroke);
  position: relative
}

#collageCanvas {
  display: block;
  width: 100%;
  border-radius: 14px;
  background: #1a1a2e
}

/* HTML Table Creator */
.table-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 14px;
  margin: 18px 0
}

.table-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 12px;
  margin-top: 16px
}

.table-wrap {
  margin-top: 18px;
  overflow: auto;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, .05)
}

#editableTable {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
  background: rgba(11, 16, 38, .45)
}

#editableTable th,
#editableTable td {
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 12px;
  color: var(--text);
  vertical-align: top;
  min-width: 120px
}

#editableTable th {
  background: rgba(139, 92, 246, .18);
  font-weight: 700
}

#editableTable td[contenteditable="true"],
#editableTable th[contenteditable="true"] {
  outline: none
}

#tableOutput {
  width: 100%;
  min-height: 240px;
  resize: vertical;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  color: var(--text);
  padding: 14px;
  font-size: 14px;
  line-height: 1.5
}

.table-muted {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px
}

/* Video Converter & Compressor */
.video-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 14px;
  margin: 18px 0
}

.video-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 14px
}

.video-meta .meta-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 12px
}

.video-meta .meta-label {
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin-bottom: 4px
}

.video-meta .meta-value {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  word-break: break-word
}

.video-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
  margin-top: 16px
}

.video-processing-box {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .12)
}

.video-note {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px;
  line-height: 1.5
}

/* Video / bundle download status */
.download-status {
  margin-top: 14px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.download-status__row {
  display: flex;
  align-items: flex-start;
  gap: 14px
}

.download-status__icon {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-top: 2px;
}

.download-status__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.download-status__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.download-status__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.35;
  margin: 0
}

.download-status__detail {
  display: block;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  word-break: break-word;
}

.download-status__detail b {
  color: var(--muted);
  font-weight: 600
}

.download-status__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.download-status__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  color: var(--muted);
}

.download-status__chip i {
  font-size: 11px;
  opacity: .85
}

.download-status__file {
  display: block;
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-all;
  color: var(--muted);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
}

.download-status__progress {
  margin-top: 12px;
  margin-bottom: 0
}

.download-status__progress.progress--determinate span,
.download-overlay__progress-bar span {
  animation: none;
  background: var(--grad-ui);
  background-size: 100% 100%
}

.download-status__percent {
  flex-shrink: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1;
  padding: 5px 11px;
  border-radius: 999px;
  color: #ede9fe;
  background: rgba(237, 233, 254, .12);
  border: 1px solid rgba(237, 233, 254, .18);
}

.download-overlay__percent {
  margin: 0 0 10px;
  font-size: 28px;
  font-weight: 800;
  color: #ede9fe !important;
  letter-spacing: .03em;
}

.download-overlay__progress-bar {
  margin-top: 0
}

.download-overlay__progress-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--grad-ui);
  transition: width .35s ease;
  border-radius: 999px;
}

.download-status--idle .download-status__icon {
  color: #94a3b8
}

.download-status--working {
  border-color: rgba(139, 92, 246, .55);
  background: rgba(139, 92, 246, .12);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .15) inset;
}

.download-status--working .download-status__icon {
  color: #c4b5fd
}

.download-status--working .download-status__title {
  color: #ede9fe
}

.download-status--working .download-status__percent {
  color: #c4b5fd;
  background: rgba(196, 181, 253, .12);
  border-color: rgba(196, 181, 253, .22);
}

.download-status--success {
  border-color: rgba(0, 179, 65, .32);
  background: linear-gradient(145deg, rgba(0, 179, 65, .1) 0%, rgba(0, 179, 65, .04) 100%);
  box-shadow: 0 8px 24px rgba(0, 179, 65, .08);
}

.download-status--success .download-status__icon {
  color: #00b341 !important;
  background: rgba(0, 179, 65, .14);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  font-size: 18px;
}

.download-status--success .download-status__title {
  color: #00b341 !important
}

.download-status--success .download-status__percent {
  color: #00b341 !important;
  background: rgba(0, 179, 65, .12);
  border-color: rgba(0, 179, 65, .22);
}

.download-status--success .download-status__detail {
  color: var(--muted)
}

.download-status--success .download-status__file {
  background: rgba(255, 255, 255, .55);
  border-color: rgba(0, 179, 65, .18);
  color: #334155;
}

.download-status--success .download-status__chip {
  background: rgba(0, 179, 65, .1);
  border-color: rgba(0, 179, 65, .18);
  color: #047857;
}

.download-status--error {
  border-color: rgba(248, 113, 113, .45);
  background: rgba(248, 113, 113, .1);
}

.download-status--error .download-status__icon {
  color: #f87171
}

.download-status--error .download-status__title {
  color: #f87171
}

.download-status--error .download-status__detail {
  color: #f87171
}

button.is-loading {
  pointer-events: none;
  opacity: .85
}

.button.is-loading .fa-download {
  display: none
}

/* Loader ring */
.loader-ring {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid rgba(196, 181, 253, .25);
  border-top-color: #c4b5fd;
  animation: loaderSpin .75s linear infinite;
  flex-shrink: 0;
}

.loader-ring--lg {
  width: 52px;
  height: 52px;
  border-width: 4px;
  border-color: rgba(196, 181, 253, .2);
  border-top-color: #a78bfa
}

@keyframes loaderSpin {
  to {
    transform: rotate(360deg)
  }
}

.download-status--working .download-status__icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px
}

/* Full-screen download overlay */
body.download-overlay-open {
  overflow: hidden
}

.download-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 10, 24, .72);
  backdrop-filter: blur(6px);
  animation: overlayFadeIn .25s ease;
}

.download-overlay[hidden] {
  display: none !important
}

@keyframes overlayFadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.download-overlay__card {
  width: min(420px, 100%);
  padding: 28px 26px;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(145deg, rgba(30, 27, 60, .96), rgba(18, 16, 38, .98));
  border: 1px solid rgba(139, 92, 246, .45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.download-overlay__card .loader-ring {
  margin: 0 auto 18px
}

.download-overlay__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: #fff !important
}

.download-overlay__detail {
  margin: 0 0 16px;
  font-size: 14px;
  color: #cbd5e1 !important;
  line-height: 1.45;
  min-height: 1.45em
}

.download-overlay__card .progress {
  margin-top: 4px
}

footer {
  text-align: left;
  padding: 0;
  color: var(--muted);
  font-size: 14px
}

footer.site-footer {
  text-align: left
}

footer a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dotted rgba(255, 255, 255, .6)
}

footer a:hover {
  border-bottom-color: #fff
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 12px 18px;
  background: #4338ca;
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

.site-footer {
  text-align: left;
  max-width: none;
  margin: 0;
  padding: 0;
}

.site-bottom {
  width: 100%;
  max-width: 80%;
  margin: 40px auto 0;
  padding: 0 24px;
  box-sizing: border-box;
}

.site-footer h2 {
  font-size: 1.15rem;
  margin: 0 0 14px;
  color: var(--text);
}

.site-footer__tools {
  margin-bottom: 0;
  padding: 22px 24px 24px;
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
}

.site-footer__categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 20px 28px;
  margin-top: 4px;
}

.site-footer__cat h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-footer__cat .site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  grid-template-columns: unset;
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  column-gap: 2.5rem;
  row-gap: 0.35rem;
  justify-content: start;
  align-items: start;
}

.site-footer__links li {
  margin: 0;
  min-width: 0
}

.site-footer__links a {
  display: block;
  padding: 4px 0;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 0;
  line-height: 1.45;
  font-size: 14px;
  white-space: normal;
  word-break: break-word;
}

.site-footer__links a:hover {
  color: #fff
}

.site-footer__faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  align-items: start;
  padding-top: 28px;
}

.site-footer__faq>h2 {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}

.site-footer__faq details {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--stroke);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
}

.site-footer__faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4
}

.site-footer__faq p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 14px
}

.site-footer__copy {
  text-align: center;
  margin-top: 28px;
  padding-top: 20px;
  padding-bottom: 5px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  color: var(--muted);
}

.seo-guide {
  text-align: left;
  max-width: none;
  margin: 0 0 36px;
  padding: 0;
}

.seo-guide h2 {
  font-size: 1.2rem;
  margin: 0 0 18px;
  color: var(--text);
}

.seo-guide__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.seo-guide article {
  padding: 16px 18px;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  height: 100%;
}

.seo-guide h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.seo-guide h3 a {
  color: var(--text);
  text-decoration: none;
}

.seo-guide h3 a:hover {
  color: var(--cyan, #06b6d4)
}

.seo-guide p,
.seo-guide__note {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 14px;
}

.seo-guide__note {
  margin-top: 20px;
  max-width: 920px;
  line-height: 1.65;
}

.seo-guide__note a {
  text-decoration: underline;
  text-underline-offset: 2px
}

.legal-page {
  min-height: 100vh
}

.legal-page__header {
  max-width: 800px;
  margin: 0 auto;
  padding: 28px 24px 0;
}

.legal-page__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  text-decoration: none;
}

.legal-page__brand img {
  border-radius: 8px
}

.seo-page {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 20px auto 64px;
  padding: 32px 36px 36px;
  line-height: 1.65;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  border: 1px solid var(--stroke);
  border-radius: 22px;
  box-shadow: 0 10px 35px rgba(17, 24, 39, .12);
}

.seo-page h1 {
  font-size: 1.75rem;
  margin: 0 0 8px
}

.seo-page__meta {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--muted)
}

.seo-page h2 {
  font-size: 1.08rem;
  margin: 26px 0 8px
}

.seo-page p {
  margin: 0 0 14px;
  color: var(--muted)
}

.seo-page a {
  color: var(--text)
}

.seo-page__back {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12)
}

.tool-landing-page {
  min-height: 100vh
}

.tool-landing__header {
  max-width: 800px;
  margin: 0 auto;
  padding: 28px 24px 0;
}

.tool-landing__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  text-decoration: none;
}

.tool-landing__brand img {
  border-radius: 8px
}

.tool-landing {
  display: block;
  max-width: 800px;
  margin: 16px auto 64px;
  padding: 32px 36px 36px;
  line-height: 1.65;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  border: 1px solid var(--stroke);
  border-radius: 22px;
  box-shadow: 0 10px 35px rgba(17, 24, 39, .12);
}

.tool-landing h1 {
  font-size: 1.75rem;
  margin: 0 0 14px
}

.tool-landing__crumb {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 14px
}

.tool-landing__crumb a {
  color: var(--muted);
  text-decoration: none
}

.tool-landing__crumb a:hover {
  color: var(--text)
}

.tool-landing__body p {
  margin: 0 0 14px;
  color: var(--muted)
}

.tool-landing__features {
  margin: 12px 0 0;
  padding-left: 20px;
  color: var(--muted);
  font-size: 14px
}

.tool-landing__features li {
  margin-bottom: 6px
}

.tool-landing__cta-wrap {
  margin-top: 24px
}

.tool-landing__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 14px;
  font-weight: 700;
  text-decoration: none;
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
  color: #fff;
  box-shadow: 8px 8px 18px rgba(124, 58, 237, .25);
}

.tool-landing__cta:hover {
  filter: brightness(1.05)
}

.tool-landing__all {
  margin-top: 22px;
  font-size: 14px;
  color: var(--muted)
}

.tool-landing__all a {
  color: var(--muted)
}

.tool-landing__related {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(148, 163, 184, .2)
}

.tool-landing__related h2 {
  font-size: 1.1rem;
  margin: 0 0 12px
}

.tool-landing__related ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55
}

.tool-landing__related li {
  margin-bottom: 10px
}

.tool-landing__related a {
  color: #7c3aed;
  text-decoration: none;
  font-weight: 600
}

.tool-landing__related a:hover {
  text-decoration: underline
}

.share-bar-host {
  margin: 12px 0 4px
}

.share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(124, 58, 237, .08);
  border: 1px solid rgba(124, 58, 237, .15);
}

.share-bar__heading {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin-right: 4px
}

.share-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  transition: transform .15s ease, filter .15s ease;
}

.share-bar__btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px)
}

.share-bar__btn--wa {
  background: #25d366
}

.share-bar__btn--fb {
  background: #1877f2
}

.share-bar__btn--tw {
  background: #0f1419
}

.share-bar__btn--tg {
  background: #229ed9
}

.share-bar__btn--li {
  background: #0a66c2
}

.share-bar__btn--copy {
  background: #64748b
}

.share-bar__btn i {
  font-size: 14px
}

@media(max-width:640px) {
  .share-bar__label {
    display: none
  }

  .share-bar__btn {
    padding: 9px 11px
  }

  .share-bar__heading {
    width: 100%;
    margin-bottom: 2px
  }
}

@media(max-width:1100px) {
  .seo-guide__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(min-width:720px) {
  .site-footer__links {
    grid-template-columns: repeat(3, max-content);
    column-gap: 2.25rem
  }
}

@media(min-width:1024px) {
  .site-footer__links {
    grid-template-columns: repeat(4, max-content);
    column-gap: 2rem
  }
}

@media(max-width:900px) {
  .site-footer__faq {
    grid-template-columns: 1fr
  }

  .site-bottom,
  .site-footer {
    padding-left: 16px;
    padding-right: 16px
  }

  .site-footer__tools {
    padding: 18px 16px 20px
  }
}

@media(max-width:640px) {
  .seo-guide__grid {
    grid-template-columns: 1fr
  }

  .site-footer__links {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 2px
  }

  .seo-page {
    padding: 24px 20px 28px;
    margin-bottom: 40px
  }

  .seo-multilang__grid {
    grid-template-columns: 1fr
  }
}

.seo-multilang {
  margin: 28px 0 0;
  padding: 22px 20px;
  border-radius: 14px;
  background: rgba(124, 58, 237, .06);
  border: 1px solid rgba(124, 58, 237, .12);
}

.seo-multilang h2 {
  font-size: 1.15rem;
  margin: 0 0 16px
}

.seo-multilang h2,
.seo-multilang h3 {
  font-size: 1rem;
  margin: 0 0 8px;
  color: var(--text)
}

.seo-multilang p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted)
}

.seo-multilang__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.seo-multilang--tool {
  margin-top: 20px;
  padding: 16px
}

.seo-multilang--tool .seo-multilang__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr))
}

[lang="ur"] {
  font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
  line-height: 1.7
}

[lang="hi"] {
  font-family: 'Noto Sans Devanagari', system-ui, sans-serif
}

.scroll-top-btn {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 60;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, #7c3aed, #06b6d4);
  box-shadow: 0 8px 22px rgba(124, 58, 237, .35);
  transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}

.scroll-top-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(124, 58, 237, .42);
}

.scroll-top-btn:focus-visible {
  outline: 3px solid rgba(6, 182, 212, .45);
  outline-offset: 2px;
}

/* Totally hide native file inputs */
input[type="file"] {
  display: none !important;
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -1
}

.age-inputs {
  display: flex;
  gap: 6px;
  align-items: center;
}

.age-inputs select {
  flex: 1;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  outline: none;
  cursor: pointer;
  transition: all .25s ease;
}

.age-inputs select:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 8px rgba(6, 182, 212, .35);
}

.calendar-input {
  width: 100%;
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  outline: none;
}

.calendar-input::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.age-inputs option {
  color: #000;
}

.code-box {
  margin-top: 10px;
  background: rgba(15, 23, 42, .8);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 10px 12px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, .6) inset;
}

/* WebFont Generator mini-styles (scoped with wf-*) */
#wfFontList .wf-font-item {
  background: rgba(15, 23, 42, .8);
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, .5);
  padding: 10px 12px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wf-font-main {
  flex: 1;
  padding-right: 10px;
}

.wf-font-name {
  font-weight: 600;
  font-size: 0.98rem;
}

.wf-font-meta {
  font-size: 0.78rem;
  color: #cbd5f5;
  opacity: .9;
  margin-top: 2px;
}

.wf-remove-btn {
  border: 0;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.8rem;
  background: rgba(248, 113, 113, .1);
  color: #fecaca;
}

.wf-remove-btn:hover {
  background: rgba(248, 113, 113, .25);
}

.wf-checkbox-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
}

#wfUploadArea.dragover {
  background: rgba(34, 197, 94, .12);
  border-color: rgba(34, 197, 94, .9);
}

/* ====== Layout: Sidebar + Content ====== */
.shell {
  width: 100%;
  max-width: min(1180px, 96%);
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .03));
  border: 1px solid var(--stroke);
  border-radius: 22px;
  backdrop-filter: blur(18px);
  box-shadow: 0 10px 35px rgba(17, 24, 39, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  position: relative;
}

.shell.shell--mega {
  display: block;
  grid-template-columns: unset;
}

/* Sidebar */
.sidebar {
  background: rgb(38 33 64);
  border-right: 1px solid var(--stroke);
  padding: 16px;
}

.sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  margin-bottom: 12px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand i {
  font-size: 18px;
  color: #fff;
  text-shadow: 0 4px 18px rgba(139, 92, 246, .45);
}

.brand-title {
  font-weight: 800;
  letter-spacing: .2px
}

.brand-sub {
  font-size: 12px;
  color: var(--muted);
  opacity: .9;
  margin-top: 2px
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 12px;
  flex: 1 1 auto;
  min-height: 0;
}

.sidebar-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.sidebar-group:first-of-type {
  margin-top: 4px;
  padding-top: 0;
  border-top: 0;
}

.sidebar-group__label {
  margin: 0 6px 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .85;
}

@media (min-width:901px) {
  .sidebar {
    display: flex;
    flex-direction: column;
    max-height: calc(100dvh - 48px);
    position: sticky;
    top: 12px;
  }

  .sidebar-nav {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-right: 4px;
    scrollbar-width: thin;
  }
}

/* Re-style your existing .tab buttons for vertical nav */
.sidebar .tab {
  position: relative;
  isolation: isolate;
  width: 100%;
  background: linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .03));
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
  font-size: 14px;
  box-shadow:
    8px 8px 18px rgba(8, 10, 26, .42),
    -6px -6px 16px rgba(255, 255, 255, .045),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

.sidebar-nav .tab .badge {
  color: #fff !important;
}

.sidebar .tab::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0));
  opacity: .7;
  z-index: -1;
}

.sidebar .tab::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
  transition: .22s ease;
}

.sidebar .tab i {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    6px 6px 14px rgba(6, 10, 25, .28);
}

.sidebar .tab span {
  flex: 1;
  text-align: left
}

.sidebar .tab:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(103, 232, 249, .42);
  background: linear-gradient(145deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
  box-shadow:
    0 16px 28px rgba(6, 182, 212, .14),
    10px 10px 22px rgba(8, 10, 26, .44),
    -6px -6px 16px rgba(255, 255, 255, .05),
    inset 0 1px 0 rgba(255, 255, 255, .10);
}

.sidebar .tab.active {
  color: #ffffff;
  border-color: rgba(255, 255, 255, .18);
  background: linear-gradient(135deg, rgba(139, 92, 246, .34), rgba(34, 211, 238, .24) 58%, rgba(236, 72, 153, .20));
  box-shadow:
    0 18px 34px rgba(34, 211, 238, .18),
    12px 12px 24px rgba(9, 10, 26, .45),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 20px rgba(255, 255, 255, .03);
}

.sidebar .tab.active i {
  background: linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08));
  border-color: rgba(255, 255, 255, .24);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 10px 18px rgba(34, 211, 238, .18);
}

/* Content area */
.content {
  padding: 18px;
}

.panel {
  display: none;
  padding: 0;
  /* content wrapper already has padding */
  animation: fadeIn .6s ease;
}

.panel.active {
  display: block
}

/* ====== Mobile topbar + overlay ====== */
.topbar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  background: rgba(255, 255, 255, .06);
  border-bottom: 1px solid var(--stroke);
}

.topbar-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
}

.topbar-title i {
  color: #fff;
  text-shadow: 0 4px 18px rgba(139, 92, 246, .45);
}

.icon-btn {
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  transition: .2s;
}

.icon-btn:hover {
  background: rgba(255, 255, 255, .12)
}

.close-btn {
  display: none
}

/* Overlay hidden by default */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 50;
}

/* ====== Responsive behavior ====== */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .topbar {
    display: flex;
  }

  /* Sidebar becomes off-canvas (use left, not transform — transform breaks iOS scroll) */
  .sidebar {
    position: fixed;
    top: 0;
    left: calc(-1 * min(290px, 88vw));
    height: 100vh;
    height: 100dvh;
    width: min(290px, 88vw);
    max-width: 88vw;
    z-index: 60;
    transform: none;
    transition: left .25s ease;
    border-right: 1px solid var(--stroke);
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-sizing: border-box;
  }

  .sidebar.open {
    left: 0
  }

  .sidebar-head {
    flex-shrink: 0;
  }

  .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0));
    scrollbar-width: thin;
    scrollbar-color: rgba(124, 58, 237, .35) transparent;
  }

  .sidebar-nav::-webkit-scrollbar {
    width: 6px
  }

  .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(124, 58, 237, .35);
    border-radius: 999px;
  }

  body.sidebar-open {
    overflow: hidden
  }

  .close-btn {
    display: inline-flex
  }

  .topbar>.icon-btn,
  .topbar>.icon-btn i {
    color: #7c3aed;
  }

  .content {
    padding: 16px;
  }
}

/* ===== Sidebar Icon Enhancements ===== */
.sidebar .tab i {
  font-size: 16px;
  color: #e5e7eb;
  transition: transform .25s ease, color .25s ease, box-shadow .25s ease;
}

/* Active icon glow */
.sidebar .tab.active i {
  color: #ffffff;
  text-shadow:
    0 0 8px rgba(255, 255, 255, .38),
    0 0 18px rgba(34, 211, 238, .28);
}

/* Hover icon animation */
.sidebar .tab:hover i {
  transform: scale(1.08) rotate(-3deg);
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    0 10px 18px rgba(103, 232, 249, .12);
}

/* Small icon badge (optional) */
.tab .badge {
  margin-left: auto;
  background: linear-gradient(90deg, #ec4899, #8b5cf6);
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
}

@media (max-width:900px) {
  .sidebar .tab span {
    white-space: nowrap;
  }
}

/* ------------------------------
   Premium UI Enhancements (2026)
------------------------------ */
:root {
  --radius-outer: 24px;
  --radius-inner: 18px;
  --shadow-xl: 0 18px 60px rgba(0, 0, 0, .35);
  --shadow-lg: 0 14px 38px rgba(17, 24, 39, .38);
  --ring: 0 0 0 3px rgba(6, 182, 212, .18), 0 0 0 1px rgba(255, 255, 255, .18) inset;
}

.shell {
  border-radius: var(--radius-outer);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .06);
  position: relative;
}

.shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 300px at 20% 0%, rgba(255, 255, 255, .08), transparent 60%);
  opacity: .9;
  pointer-events: none;
}

.tabs {
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(18px);
}

.tab {
  letter-spacing: .25px;
}

.tab.active {
  box-shadow: inset 0 -3px 0 rgba(6, 182, 212, .95), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.panel {
  padding: 30px;
}

.glass {
  border-radius: var(--radius-inner);
  box-shadow: 0 18px 46px rgba(6, 182, 212, .10), inset 0 1px 0 rgba(255, 255, 255, .06);
}

input,
select,
textarea {
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(6, 182, 212, .70);
  box-shadow: var(--ring);
}

.button {
  border-radius: 14px;
}

.button.primary {
  box-shadow: 0 16px 42px rgba(139, 92, 246, .32);
}

.button.primary:active {
  transform: translateY(0);
  filter: saturate(105%);
}

.drop {
  border-radius: var(--radius-inner);
}

.preview img {
  border-radius: 18px;
  box-shadow: var(--shadow-xl);
}

small,
.info {
  opacity: .92
}


/* ===== Translator (Premium) ===== */
.tl-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin: 14px 0 18px;
  flex-wrap: wrap;
}

.tl-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  min-width: 0;
  flex: 1 1 160px;
  max-width: 100%;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 10px 25px rgba(2, 6, 23, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: .22s ease;
}

.tl-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(6, 182, 212, .7);
  box-shadow: 0 18px 45px rgba(6, 182, 212, .18), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.tl-pill:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, .35), 0 18px 45px rgba(6, 182, 212, .18), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.tl-label {
  font-weight: 800;
  color: #fff;
}

.tl-swap {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(2, 6, 23, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: .22s ease;
}

.tl-swap:hover {
  transform: translateY(-1px) rotate(2deg);
  border-color: rgba(236, 72, 153, .7);
  box-shadow: 0 18px 45px rgba(236, 72, 153, .18), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.tl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

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

  .tl-pill {
    min-width: 0
  }
}

.tl-panel {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(2, 6, 23, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
}

.tl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .04);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.tl-small {
  color: #e5e7eb;
  font-weight: 800;
  opacity: .9
}

.tl-actions {
  display: flex;
  gap: 8px
}

.tl-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  transition: .2s;
}

.tl-icon:hover {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(6, 182, 212, .7);
  transform: translateY(-1px);
}

.tl-text {
  width: 100%;
  min-height: 260px;
  resize: vertical;
  border: 0;
  border-radius: 0;
  padding: 16px;
  background: transparent;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
  outline: none;
}

.tl-text::placeholder {
  color: rgba(255, 255, 255, .75)
}

.tl-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .04);
}

.tl-hint {
  color: #dbeafe;
  opacity: .85;
  font-size: 13px
}

.tl-count {
  color: #fff;
  opacity: .85;
  font-size: 13px;
  font-weight: 800
}

.tl-status {
  color: #000;
  opacity: .9;
  font-size: 13px;
  font-weight: 800
}

.glass #translateBtn i {
  color: #fff !important;
}

/* Modal */
.tl-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: radial-gradient(circle at top, rgba(59, 130, 246, .10), transparent 34%), rgba(7, 12, 23, .70);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 9999;
  opacity: 0;
  transition: opacity .22s ease;
}

.tl-modal.show {
  display: flex;
  opacity: 1;
}

.tl-modal-card {
  width: min(1020px, 100%);
  max-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: linear-gradient(145deg, rgba(22, 28, 43, .98), rgba(11, 16, 27, .98));
  box-shadow: 20px 20px 50px rgba(0, 0, 0, .38), -18px -18px 38px rgba(255, 255, 255, .035), inset 1px 1px 0 rgba(255, 255, 255, .05), inset -1px -1px 0 rgba(0, 0, 0, .26);
  animation: tlPop .24s ease;
}

.tl-modal-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 27px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 18%, transparent 82%, rgba(255, 255, 255, .025));
}

.tl-cols {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
}

.tl-scroll {
  max-height: none;
  height: 320px;
  overflow: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(99, 102, 241, .45) transparent;
}

.tl-scroll::-webkit-scrollbar {
  width: 9px;
}

.tl-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.tl-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(34, 211, 238, .35), rgba(99, 102, 241, .30));
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

@keyframes tlPop {
  from {
    transform: translateY(10px) scale(.985);
    opacity: .82
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1
  }
}

@media (max-width: 720px) {
  .tl-modal {
    padding: 12px;
  }

  .tl-modal-card {
    max-height: calc(100vh - 24px);
    border-radius: 24px;
  }

  .tl-modal-card::before {
    border-radius: 23px;
  }

  .tl-cols {
    grid-template-columns: 1fr;
  }

  .tl-divider {
    display: none;
  }

  .tl-scroll {
    height: 32vh;
  }

  .tl-col+.tl-col {
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
}

.tl-modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
}

.tl-modal-title {
  font-weight: 900;
  letter-spacing: .2px;
  font-size: 18px;
  color: #f8fbff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}

.tl-close {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(145deg, rgba(24, 31, 47, .98), rgba(13, 18, 30, .98));
  color: #fff;
  cursor: pointer;
  box-shadow: 8px 8px 18px rgba(0, 0, 0, .28), -7px -7px 16px rgba(255, 255, 255, .03), inset 1px 1px 0 rgba(255, 255, 255, .05), inset -1px -1px 0 rgba(0, 0, 0, .24);
  transition: .2s ease;
}

.tl-close:hover {
  transform: translateY(-1px);
  border-color: rgba(236, 72, 153, .45);
  box-shadow: 10px 12px 26px rgba(236, 72, 153, .15), -7px -7px 16px rgba(255, 255, 255, .03), inset 1px 1px 0 rgba(255, 255, 255, .05), inset -1px -1px 0 rgba(0, 0, 0, .24);
}

.tl-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .015);
}

.tl-search i {
  opacity: .92;
  color: #cfe7ff;
}

.tl-search input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(145deg, rgba(15, 21, 34, .95), rgba(23, 30, 46, .95));
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: inset 6px 6px 14px rgba(0, 0, 0, .28), inset -5px -5px 12px rgba(255, 255, 255, .025), 0 1px 0 rgba(255, 255, 255, .02);
  outline: none;
}

.tl-search input:focus {
  border-color: rgba(34, 211, 238, .40);
  box-shadow: inset 6px 6px 14px rgba(0, 0, 0, .28), inset -5px -5px 12px rgba(255, 255, 255, .025), 0 0 0 3px rgba(34, 211, 238, .10);
}

.tl-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .10), transparent);
}

.tl-col {
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .018), rgba(255, 255, 255, .008));
}

.tl-sub {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .9px;
  text-transform: uppercase;
  color: #cde8ff;
  opacity: .95;
  margin: 2px 0 12px;
}

.tl-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tl-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .04);
  background: linear-gradient(145deg, rgba(22, 29, 43, .96), rgba(12, 17, 28, .96));
  box-shadow: 8px 8px 18px rgba(0, 0, 0, .24), -6px -6px 14px rgba(255, 255, 255, .025), inset 1px 1px 0 rgba(255, 255, 255, .03), inset -1px -1px 0 rgba(0, 0, 0, .20);
  transition: .18s ease;
}

.tl-item:hover {
  transform: translateY(-1px) scale(1.01);
  border-color: rgba(34, 211, 238, .26);
  box-shadow: 12px 14px 28px rgba(8, 145, 178, .12), -6px -6px 14px rgba(255, 255, 255, .03), inset 1px 1px 0 rgba(255, 255, 255, .04), inset -1px -1px 0 rgba(0, 0, 0, .20);
}

.tl-item.active {
  border-color: rgba(34, 211, 238, .58);
  background: linear-gradient(145deg, rgba(16, 35, 48, .96), rgba(14, 22, 38, .98));
  box-shadow: 0 0 0 1px rgba(34, 211, 238, .10), 16px 18px 32px rgba(34, 211, 238, .12), -6px -6px 14px rgba(255, 255, 255, .03), inset 0 0 0 1px rgba(255, 255, 255, .02);
}

.tl-item span {
  font-weight: 800;
  color: #f8fbff;
}

.tl-item small {
  opacity: .82;
  font-weight: 800;
  color: #99a7bb;
  letter-spacing: .2px;
}

body.tl-modal-open {
  overflow: hidden;
}


textarea#bundleUrls::placeholder {
  color: #fff;
  opacity: 1;
}

textarea#bundleUrls::-moz-placeholder {
  color: #fff;
  opacity: 1;
}

textarea#bundleUrls:-ms-input-placeholder {
  color: #fff;
}

textarea#bundleUrls::-ms-input-placeholder {
  color: #fff;
}


input#qrText::placeholder {
  color: #fff;
  opacity: 1;
}

input#qrText::-moz-placeholder {
  color: #fff;
  opacity: 1;
}

input#qrText:-ms-input-placeholder {
  color: #fff;
}

input#qrText::-ms-input-placeholder {
  color: #fff;
}


input#wfFontFamilyName::placeholder {
  color: #fff;
  opacity: 1;
}

input#wfFontFamilyName::-moz-placeholder {
  color: #fff;
  opacity: 1;
}

input#wfFontFamilyName:-ms-input-placeholder {
  color: #fff;
}

input#wfFontFamilyName::-ms-input-placeholder {
  color: #fff;
}

#video-tab .drop {
  margin-bottom: 20px;
}

.video-tool-grid option {
  color: #000;
}


/* ===== Neuromorphic UI Override ===== */
:root {
  --neu-bg-primary: #e7ecf3;
  --neu-bg-secondary: #d9e0ea;
  --neu-surface: #e4e9f1;
  --neu-surface-2: #dde4ee;
  --neu-shadow-dark: #bcc4d0;
  --neu-shadow-light: #ffffff;
  --neu-text: #1f2937;
  --neu-muted: #5b6678;
  --neu-accent: #7c3aed;
  --neu-accent-2: #8b5cf6;
  --neu-cyan: #14b8a6;
  --glass: rgba(228, 233, 241, .78);
  --stroke: rgba(255, 255, 255, .68);
  --text: var(--neu-text);
  --muted: var(--neu-muted);
  --grad-ui: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
}

html,
body {}

body {
  color: var(--neu-text) !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  background: linear-gradient(145deg, #f9f9f9, #dfe1e3) !important;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  filter: brightness(0);
  opacity: 1;
  cursor: pointer;
}

body::after {
  display: none !important;
}

/* Hero is styled by site-hero.css — keep values in sync to avoid CLS between async sheets */
header.site-hero {
  padding: clamp(16px, 2.4vw, 30px) clamp(10px, 2vw, 18px) clamp(10px, 1.6vw, 18px) !important;
}

header.site-hero h1 {
  font-size: clamp(1.55rem, calc(1.2rem + 2.4vw), 2.6rem) !important;
  margin: 0 !important;
}

main {
  padding: 4px 0 clamp(16px, 3vw, 28px) !important;
}

.shell {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  box-shadow: 18px 18px 36px var(--neu-shadow-dark), -18px -18px 36px var(--neu-shadow-light) !important;
  backdrop-filter: none !important;
}

.shell::before {
  display: none !important;
}

.topbar {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .65) !important;
}

.topbar-title,
.brand-title,
.sidebar .tab span,
.sidebar .tab,
.tab,
h3,
label,
.meta-value,
.tl-small,
.tl-label,
.table-muted,
.info,
p,
small,
footer {
  color: var(--neu-text) !important;
}

.brand-sub,
.info,
.table-muted,
.tl-hint,
.tl-count,
.meta-label,
header p,
footer {
  color: var(--neu-muted) !important;
}

.sidebar {
  background: linear-gradient(160deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  border-right: 1px solid rgba(255, 255, 255, .65) !important;
}

.sidebar-group__label {
  color: var(--neu-muted) !important;
}

.sidebar-head {
  border-bottom: 1px solid rgba(255, 255, 255, .72) !important;
}

.brand i,
.topbar-title i {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary));
  box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light);
  color: var(--neu-accent) !important;
  text-shadow: none !important;
}

.icon-btn,
.sidebar .tab,
.button,
.case-op-btn,
.tl-swap,
.tl-icon,
.wf-remove-btn,
.template-card,
.drop,
.glass,
.tl-panel,
.tl-pill,
.collage-canvas-wrapper,
.table-wrap,
.video-meta .meta-card,
.code-box {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  border: 1px solid rgba(255, 255, 255, .75) !important;
  box-shadow: 8px 8px 16px var(--neu-shadow-dark), -8px -8px 16px var(--neu-shadow-light) !important;
}

.glass,
.tl-panel,
.table-wrap,
.collage-canvas-wrapper,
.code-box {
  padding: 24px !important;
}

.sidebar .tab {
  justify-content: flex-start;
  border-radius: 16px !important;
}

.sidebar .tab:hover,
.icon-btn:hover,
.button:hover,
.case-op-btn:hover,
.tl-pill:hover,
.drop:hover,
.template-card:hover,
.tl-icon:hover,
.wf-remove-btn:hover {
  transform: translateY(-2px);
  box-shadow: 12px 12px 22px var(--neu-shadow-dark), -12px -12px 22px var(--neu-shadow-light) !important;
}

.sidebar .tab.active,
.template-card.selected {
  background: linear-gradient(145deg, #efe8ff, #dddff8) !important;
  box-shadow: inset 3px 3px 7px rgba(255, 255, 255, .95), inset -3px -3px 7px rgba(188, 196, 208, .7), 10px 10px 22px var(--neu-shadow-dark), -10px -10px 22px var(--neu-shadow-light) !important;
  border-color: rgba(124, 58, 237, .18) !important;
}

.sidebar .tab.active i {
  color: var(--neu-accent) !important;
  text-shadow: none !important;
}

.sidebar .tab i,
h3 i,
.drop i {
  color: var(--neu-accent) !important;
  text-shadow: none !important;
}

.tab .badge {
  background: linear-gradient(135deg, var(--neu-accent), var(--neu-cyan)) !important;
  box-shadow: none !important;
}

input,
select,
textarea,
#tableOutput,
.tl-text,
.calendar-input,
.age-inputs select {
  background: linear-gradient(145deg, var(--neu-surface-2), var(--neu-surface)) !important;
  color: var(--neu-text) !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  box-shadow: inset 4px 4px 8px rgba(188, 196, 208, .7), inset -4px -4px 8px rgba(255, 255, 255, .9) !important;
}

input::placeholder,
textarea::placeholder,
#videoURL::placeholder {
  color: #7b8798 !important;
  opacity: 1 !important;
}

input#videoURL::-moz-placeholder {
  color: #7b8798 !important;
  opacity: 1 !important;
}

input#videoURL:-ms-input-placeholder,
input#videoURL::-ms-input-placeholder {
  color: #7b8798 !important;
}

input:focus,
select:focus,
textarea:focus,
#tableOutput:focus,
.tl-text:focus,
.calendar-input:focus,
.age-inputs select:focus {
  box-shadow: inset 3px 3px 7px rgba(188, 196, 208, .62), inset -3px -3px 7px rgba(255, 255, 255, .95), 0 0 0 3px rgba(124, 58, 237, .14) !important;
  border-color: rgba(124, 58, 237, .3) !important;
}

.button {
  color: var(--neu-text) !important;
  font-weight: 700 !important;
}

.button.primary {
  color: #fff !important;
  background: linear-gradient(135deg, var(--neu-accent), var(--neu-accent-2)) !important;
  border: 0 !important;
  box-shadow: 12px 12px 24px rgba(172, 180, 190, .55), -8px -8px 18px rgba(255, 255, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .18) !important;
}

.button.primary:hover {
  box-shadow: 14px 14px 26px rgba(172, 180, 190, .62), -8px -8px 18px rgba(255, 255, 255, .9) !important;
}

.progress {
  background: linear-gradient(145deg, var(--neu-surface-2), var(--neu-surface)) !important;
  border: 1px solid rgba(255, 255, 255, .85) !important;
  box-shadow: inset 4px 4px 8px rgba(188, 196, 208, .7), inset -4px -4px 8px rgba(255, 255, 255, .92) !important;
}

.progress span {
  background: linear-gradient(135deg, var(--neu-accent), var(--neu-cyan)) !important;
}

#editableTable {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  color: var(--neu-text) !important;
}

#editableTable th {
  background: #e7ddff !important;
  color: var(--neu-text) !important;
}

#editableTable td,
#editableTable th {
  border: 1px solid rgba(184, 196, 208, .38) !important;
  color: var(--neu-text) !important;
}

.tl-head,
.tl-foot {
  background: transparent !important;
  border-color: rgba(184, 196, 208, .38) !important;
}

#wfFontList .wf-font-item {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  box-shadow: 6px 6px 14px var(--neu-shadow-dark), -6px -6px 14px var(--neu-shadow-light) !important;
}

.wf-font-meta {
  color: var(--neu-muted) !important;
}

.wf-remove-btn {
  color: #b91c1c !important;
}

.video-tool-grid option,
.age-inputs option,
#wfFontWeight option,
#wfFontStyle option {
  color: #111827 !important;
  background: #fff !important;
}

.preview img {
  border-radius: 20px !important;
  box-shadow: 12px 12px 24px var(--neu-shadow-dark), -12px -12px 24px var(--neu-shadow-light) !important;
}

#collageCanvas {
  background: #dce3ed !important;
}

footer a {
  color: var(--neu-accent) !important;
  border-bottom-color: rgba(124, 58, 237, .35) !important;
}

.site-bottom {
  max-width: min(1180px, 96%) !important;
}

.site-footer__tools {
  border: 1px solid rgba(255, 255, 255, .72) !important;
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  box-shadow: 6px 6px 14px var(--neu-shadow-dark), -6px -6px 14px var(--neu-shadow-light) !important;
}

.site-footer__tools {
  border-bottom: 0 !important;
}

.site-footer__links a {
  color: var(--neu-muted) !important;
  border-bottom: 0 !important;
}

.site-footer__links a:hover {
  color: var(--neu-accent) !important;
}

.site-footer h2,
.site-footer summary {
  color: var(--neu-text) !important;
}

.site-footer__faq p,
.site-footer__copy {
  color: var(--neu-muted) !important;
}

.site-footer__faq details,
.seo-guide article {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  box-shadow: 6px 6px 14px var(--neu-shadow-dark), -6px -6px 14px var(--neu-shadow-light) !important;
}

.site-footer__copy {
  border-top-color: rgba(188, 196, 208, .55) !important;
}

.seo-guide h2,
.seo-guide h3 a {
  color: var(--neu-text) !important;
}

.seo-guide p,
.seo-guide__note {
  color: var(--neu-muted) !important;
}

.seo-guide h3 a:hover {
  color: var(--neu-accent) !important;
}

.legal-page__brand {
  color: var(--neu-text) !important;
}

.seo-page {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  box-shadow: 12px 12px 24px var(--neu-shadow-dark), -12px -12px 24px var(--neu-shadow-light) !important;
}

.seo-page {
  color: var(--neu-text) !important;
}

.seo-page p,
.seo-page__meta {
  color: var(--neu-muted) !important;
}

.seo-page a {
  color: var(--neu-accent) !important;
}

.seo-page__back {
  border-top-color: rgba(188, 196, 208, .55) !important;
}

.tool-landing-page {
  color: var(--neu-text) !important;
}

.tool-landing {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  box-shadow: 12px 12px 24px var(--neu-shadow-dark), -12px -12px 24px var(--neu-shadow-light) !important;
}

.tool-landing h1,
.tool-landing__brand {
  color: var(--neu-text) !important;
}

.tool-landing__body p,
.tool-landing__crumb,
.tool-landing__features,
.tool-landing__all {
  color: var(--neu-muted) !important;
}

.tool-landing__crumb a,
.tool-landing__all a {
  color: var(--neu-muted) !important;
}

.tool-landing__cta {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6) !important;
  color: #fff !important;
}

.scroll-top-btn {
  background: linear-gradient(145deg, var(--neu-bg-primary), var(--neu-bg-secondary)) !important;
  color: var(--neu-accent) !important;
  border: 1px solid rgba(255, 255, 255, .75) !important;
  box-shadow: 8px 8px 18px var(--neu-shadow-dark), -8px -8px 18px var(--neu-shadow-light) !important;
}

@media (max-width:900px) {
  .sidebar {
    box-shadow: 18px 0 34px rgba(188, 196, 208, .6) !important;
    left: calc(-1 * min(290px, 88vw)) !important;
    width: min(290px, 88vw) !important;
    max-width: 88vw !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    height: 100dvh !important;
  }

  .sidebar.open {
    left: 0 !important
  }

  .sidebar-head {
    flex-shrink: 0 !important
  }

  .sidebar-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  .glass,
  .tl-panel,
  .table-wrap,
  .collage-canvas-wrapper,
  .code-box {
    padding: 18px !important;
  }

  header h1 {
    font-size: 1.8rem !important;
  }

  .topbar>.icon-btn,
  .topbar>.icon-btn i {
    color: #7c3aed !important;
  }
}

#ageResult div {
  color: #000 !important;
}

#translate-tab i {
  color: #000 !important;
}

/* Holiday Calendar */
.hc-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  margin: 20px 0 8px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14)
}

.hc-toolbar label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--muted)
}

.hc-toolbar__range,
.hc-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end
}

.hc-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto
}

.hc-layout {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px
}

.hc-side {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.hc-panel {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: 16px 18px
}

.hc-panel h4 {
  margin: 0 0 12px;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px
}

.hc-panel label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin: 10px 0 6px;
  color: var(--muted)
}

.hc-panel input[type="text"],
.hc-panel input[type="number"],
.hc-panel select {
  width: 100%
}

.hc-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px
}

.hc-panel__head h4 {
  margin: 0
}

.hc-report-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap
}

.hc-hijri-inputs {
  display: grid;
  grid-template-columns: 1fr 1.4fr 72px;
  gap: 8px
}

.hc-convert-result {
  margin-top: 14px
}

.hc-convert-out {
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
  line-height: 1.55
}

.hc-convert-arrow {
  text-align: center;
  opacity: .7;
  margin: 6px 0
}

.hc-convert-detail {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px
}

.hc-err {
  color: #f87171
}

.hc-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 520px;
  overflow: auto;
  padding-right: 4px
}

.hc-card {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  transition: transform .15s ease
}

.hc-card:hover {
  transform: translateY(-1px)
}

.hc-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px
}

.hc-card__title {
  margin: 0;
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  min-width: 0
}

.hc-card__dates {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted)
}

.hc-card__dates i {
  width: 18px;
  text-align: center;
  margin-right: 4px;
  opacity: .85
}

.hc-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em
}

.hc-badge--public {
  background: #dbeafe;
  color: #1e40af
}

.hc-badge--religious {
  background: #ede9fe;
  color: #5b21b6
}

.hc-badge--custom {
  background: #ffedd5;
  color: #9a3412
}

.hc-badge--gregorian {
  background: #d1fae5;
  color: #047857
}

.hc-badge--hijri {
  background: #fef9c3;
  color: #a16207
}

.hc-remove {
  margin-left: auto;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(248, 113, 113, .4);
  background: rgba(248, 113, 113, .12);
  color: #f87171;
  cursor: pointer;
  font-size: 18px;
  line-height: 1
}

.hc-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 8px
}

.hc-stat {
  text-align: center;
  padding: 12px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .1)
}

.hc-stat__val {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.2
}

.hc-stat__label {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px
}

.hc-range-summary {
  font-size: 13px;
  line-height: 1.55;
  margin-top: 14px;
  color: var(--muted)
}

.hc-range-summary p {
  margin: 4px 0
}

.hc-month-breakdown {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, .1)
}

.hc-month-breakdown h5 {
  margin: 0 0 8px;
  font-size: 13px
}

.hc-month-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
  color: var(--muted)
}

.hc-note {
  font-size: 12px;
  margin: 0 0 12px
}

.hc-empty {
  padding: 24px;
  text-align: center
}

@media (max-width:900px) {
  .hc-layout {
    grid-template-columns: 1fr
  }

  .hc-toolbar__actions {
    margin-left: 0;
    width: 100%
  }

  .hc-hijri-inputs {
    grid-template-columns: 1fr
  }
}

/* Collage Studio (Canva-style editor) */
.collage-editor-wrap {
  padding: 20px !important
}

.collage-editor__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px
}

.collage-editor__header h3 {
  margin: 0 0 6px
}

.collage-editor__header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.collage-editor__workspace {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr minmax(200px, 240px);
  gap: 14px;
  align-items: start
}

.collage-editor__sidebar {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: 14px;
  max-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  min-height: 0
}

.collage-editor__sidebar--props h4 {
  margin: 0 0 12px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px
}

.collage-editor__sidebar--props label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin: 12px 0 6px;
  color: var(--muted)
}

.collage-editor__sidebar--props input[type="range"] {
  width: 100%
}

.collage-editor__sidebar--props input[type="color"],
.collage-editor__sidebar--props select {
  width: 100%
}

.collage-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px
}

.collage-sidebar__head h4 {
  margin: 0;
  font-size: 14px
}

.collage-tpl-count {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap
}

.collage-search {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  color: inherit;
  font-size: 13px
}

.collage-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
  max-height: 120px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch
}

.collage-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: inherit;
  cursor: pointer;
  transition: .15s
}

.collage-cat-btn em {
  font-style: normal;
  opacity: .65;
  font-weight: 600
}

.collage-cat-btn.active {
  background: linear-gradient(135deg, rgba(124, 58, 237, .35), rgba(34, 211, 238, .25));
  border-color: rgba(124, 58, 237, .35)
}

.collage-template-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  max-height: min(42vh, 360px)
}

.collage-load-more {
  grid-column: 1/-1;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  border: 1px dashed rgba(124, 58, 237, .45);
  background: rgba(124, 58, 237, .08);
  color: inherit;
  margin-top: 4px
}

.collage-load-more:hover {
  background: rgba(124, 58, 237, .14)
}

.collage-tpl-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px;
  border-radius: 12px;
  cursor: pointer;
  border: 2px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  color: inherit;
  text-align: left;
  transition: .15s
}

.collage-tpl-card:hover {
  border-color: rgba(124, 58, 237, .4);
  transform: translateY(-1px)
}

.collage-tpl-card.selected {
  border-color: rgba(124, 58, 237, .75);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, .2)
}

.collage-tpl-card.previewing:not(.selected) {
  border-color: rgba(34, 211, 238, .55);
  box-shadow: 0 0 0 2px rgba(34, 211, 238, .15)
}

.collage-preview-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(124, 58, 237, .1);
  border: 1px solid rgba(124, 58, 237, .25)
}

.collage-preview-bar[hidden] {
  display: none !important
}

.collage-preview-bar__thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(124, 58, 237, .15), rgba(34, 211, 238, .12))
}

.collage-preview-bar__thumb .collage-tpl-cell {
  border-radius: 2px
}

.collage-preview-bar__info {
  flex: 1;
  min-width: 140px
}

.collage-preview-bar__info strong {
  display: block;
  font-size: 14px
}

.collage-preview-bar__info span {
  font-size: 12px;
  color: var(--muted)
}

.collage-live-preview-wrap {
  margin-bottom: 10px
}

.collage-live-preview-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .04em
}

.collage-live-preview {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  background: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: inset 0 1px 8px rgba(15, 23, 42, .06)
}

.collage-frame-tools {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12)
}

.collage-frame-tools h5 {
  margin: 0 0 10px;
  font-size: 13px
}

.collage-frame-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0
}

.collage-frame-grid label {
  font-size: 11px !important;
  margin: 0 !important
}

.collage-frame-grid input {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px
}

.collage-frame-grid-label {
  font-size: 11px;
  color: var(--muted);
  margin: 10px 0 4px
}

.collage-frame-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 8px
}

.collage-frame-btn {
  width: 100%;
  padding: 8px 10px !important;
  font-size: 11px !important;
  justify-content: center
}

.collage-frame-btn--hint {
  margin-top: 8px;
  opacity: .9
}

.collage-tpl-preview {
  position: relative;
  aspect-ratio: 1;
  padding: 5px;
  background: linear-gradient(135deg, rgba(124, 58, 237, .12), rgba(34, 211, 238, .1));
  border-radius: 8px;
  margin-bottom: 6px
}

.collage-tpl-cell {
  position: absolute;
  box-sizing: border-box;
  background: rgba(124, 58, 237, .32);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, .25)
}

.collage-tpl-name {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  display: block
}

.collage-tpl-meta {
  font-size: 9px;
  color: var(--muted);
  margin-top: 2px;
  text-transform: capitalize
}

.collage-editor__center {
  min-width: 0
}

.collage-canvas-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px
}

.collage-canvas-toolbar label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600
}

.collage-slot-hint {
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600
}

.collage-toolbar-btn {
  padding: 8px 10px !important;
  min-width: auto;
  width: auto !important;
  flex: 0 0 auto
}

.collage-canvas-wrapper--studio {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, .2);
  box-shadow: inset 0 2px 12px rgba(15, 23, 42, .08);
  transition: box-shadow .2s
}

.collage-canvas-wrapper--studio.dragover {
  box-shadow: 0 0 0 3px rgba(124, 58, 237, .35)
}

#collageCanvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(62vh, 720px);
  cursor: grab;
  touch-action: none
}

#collageCanvas:active {
  cursor: grabbing
}

.collage-canvas-hint {
  font-size: 12px;
  margin: 10px 0 8px
}

.collage-pool-label {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px
}

.collage-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(255, 255, 255, .15)
}

.collage-pool-thumb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .2);
  cursor: grab
}

.collage-pool-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.collage-pool-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0
}

.collage-status {
  margin-top: 8px;
  min-height: 1.2em
}

.collage-status--err {
  color: #f87171
}

@media (max-width:1100px) {
  .collage-editor__workspace {
    grid-template-columns: 1fr
  }

  .collage-editor__sidebar {
    max-height: none
  }

  .collage-template-grid {
    max-height: 280px
  }

  .collage-editor__sidebar--templates {
    order: 2
  }

  .collage-editor__center {
    order: 1
  }

  .collage-editor__sidebar--props {
    order: 3
  }
}

@media (max-width:600px) {
  .collage-editor__header-actions {
    width: 100%
  }

  .collage-editor__header-actions .button {
    flex: 1;
    justify-content: center
  }

  .collage-template-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

/* ===== Complete responsive layout ===== */
@media (max-width:900px) {
  html {
    -webkit-text-size-adjust: 100%
  }

  body {
    overflow-x: hidden
  }

  main {
    padding: 10px 12px 28px !important
  }

  header.site-hero {
    padding: 22px 14px 10px !important;
    text-align: left;
  }

  header:not(.site-hero) h1 {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: clamp(1.2rem, 4.8vw, 1.75rem) !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
  }

  header:not(.site-hero) h1 i {
    flex-shrink: 0;
    margin-top: .12em;
    font-size: .9em;
  }

  header:not(.site-hero) p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-top: 8px !important;
  }

  .shell {
    max-width: 100% !important;
    width: 100%;
    min-height: 0 !important;
    border-radius: 18px !important;
  }

  .site-bottom {
    max-width: 100% !important;
    width: 100%;
    margin-top: 24px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .content {
    padding: 12px !important;
    min-width: 0;
    overflow-x: hidden;
  }

  .panel {
    padding: 0 !important
  }

  .glass,
  .tl-panel,
  .table-wrap,
  .collage-canvas-wrapper,
  .code-box {
    padding: 16px !important
  }

  .topbar {
    padding: 12px;
    padding-top: max(12px, env(safe-area-inset-top));
    gap: 8px;
    min-height: 56px;
  }

  .topbar-title {
    flex: 1;
    min-width: 0;
    font-size: .95rem;
  }

  .topbar-title span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .brand i,
  .topbar-title i {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
    flex-shrink: 0;
  }

  .icon-btn {
    padding: 8px 10px;
    flex-shrink: 0;
  }

  .sidebar .tab {
    font-size: 13px;
    padding: 9px 12px;
  }

  .sidebar .tab i {
    width: 34px;
    height: 34px;
    min-width: 34px;
    font-size: 14px;
  }

  .sidebar-head .icon-btn,
  .sidebar-head .icon-btn i {
    color: #7c3aed !important;
  }

  .template-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
  }

  .video-tool-grid,
  .table-controls,
  .table-actions,
  .video-actions {
    grid-template-columns: 1fr;
  }

  .video-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .wc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .case-op-btn {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
    font-size: 12px;
    padding: 9px 10px;
  }

  .grid.two {
    gap: 12px
  }

  .grid.two .button {
    width: 100%
  }

  h3 {
    font-size: 1.1rem;
    flex-wrap: wrap;
  }

  .drop {
    padding: 20px 14px
  }

  .drop i {
    font-size: 32px
  }

  .scroll-top-btn {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    width: 42px;
    height: 42px;
  }

  .tool-landing {
    margin: 12px 0 40px;
    padding: 22px 18px;
    max-width: 100%;
  }

  .legal-page__header,
  .tool-landing__header {
    padding: 20px 14px 0;
  }

  .seo-page {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .download-overlay {
    padding: 16px
  }

  .download-overlay__card {
    width: 100%;
    max-width: min(420px, 100%);
    padding: 20px 18px;
  }
}

@media (max-width:640px) {
  main {
    padding: 8px 10px 24px !important
  }

  header {
    padding: 18px 12px 8px !important
  }

  header h1 {
    font-size: 1.2rem !important
  }

  .content {
    padding: 10px !important
  }

  .glass,
  .tl-panel,
  .table-wrap,
  .collage-canvas-wrapper,
  .code-box {
    padding: 14px !important
  }

  .site-footer__tools {
    padding: 16px 14px 18px !important
  }

  .site-footer__faq {
    padding-top: 20px
  }

  .wc-stats {
    grid-template-columns: 1fr
  }

  .video-meta {
    grid-template-columns: 1fr
  }

  .case-op-btn {
    flex: 1 1 100%
  }

  .case-op-grid {
    gap: 8px
  }

  .age-inputs {
    flex-wrap: wrap
  }

  .age-inputs select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }

  .tl-foot {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .tl-foot .button {
    width: 100%
  }

  .download-status__row {
    flex-direction: column;
    gap: 10px
  }

  .seo-page,
  .tool-landing {
    padding: 20px 16px;
    margin-left: 0;
    margin-right: 0;
    border-radius: 16px;
  }

  .tool-landing h1 {
    font-size: 1.35rem
  }

  .hc-toolbar {
    padding: 12px
  }

  .hc-toolbar__range,
  .hc-toolbar__filters {
    width: 100%
  }

  .button {
    padding: 12px 14px;
    font-size: 14px;
  }
}

@media (max-width:480px) {
  .shell {
    border-radius: 14px !important
  }

  .topbar {
    padding: 10px
  }

  .topbar-title span {
    font-size: .88rem
  }

  .brand-title {
    font-size: .95rem
  }

  .brand-sub {
    font-size: 11px
  }

  .sidebar-head {
    padding: 8px 6px 10px
  }

  .sidebar {
    padding: 12px !important
  }

  input,
  select,
  textarea {
    font-size: 16px
  }

  .template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .tab .badge {
    font-size: 9px;
    padding: 2px 6px
  }
}

/* ===== Responsive system — phones, tablets, desktop ===== */
.site-wrap>header {
  text-align: center;
  padding-left: clamp(10px, 3vw, 20px);
  padding-right: clamp(10px, 3vw, 20px);
}

.share-bar-host {
  max-width: min(760px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.share-bar {
  justify-content: center;
}

.content {
  min-width: 0;
  overflow-x: clip;
}

.panel,
.glass,
.tl-panel,
.code-box,
.table-wrap {
  max-width: 100%;
  min-width: 0;
}

textarea,
code,
pre {
  max-width: 100%
}

#qrCanvas,
#qr canvas,
.qr-wrap canvas {
  max-width: 100% !important;
  height: auto !important
}

.wf-font-list,
.wf-preview-area {
  max-width: 100%;
  overflow-x: auto
}

#wfFontList .wf-font-item {
  flex-wrap: wrap;
  gap: 8px
}

.upscale-preview {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr))
}

.seo-multilang article {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word
}

[lang="ur"] {
  overflow-wrap: anywhere
}

@media (max-width:1200px) {

  .shell,
  .site-bottom {
    max-width: 100% !important
  }

  .site-wrap {
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right))
  }

  .shell {
    grid-template-columns: minmax(200px, 230px) minmax(0, 1fr)
  }
}

@media (max-width:1100px) {
  .shell {
    grid-template-columns: minmax(188px, 210px) minmax(0, 1fr)
  }

  .seo-guide__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .seo-multilang__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .seo-multilang__grid article:first-child {
    grid-column: 1/-1
  }
}

@media (max-width:900px) {
  .site-wrap>main#main-content {
    padding: 0 0 20px !important;
  }

  main#main-content {
    display: block !important;
    padding: 0 10px 20px !important;
  }

  .shell {
    max-width: 100% !important;
    width: 100%;
    border-radius: 18px !important;
  }

  .site-bottom {
    max-width: 100% !important;
    width: 100%;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }

  .share-bar-host {
    max-width: 100%
  }

  .share-bar {
    justify-content: flex-start;
    padding: 10px;
    border-radius: 14px;
  }

  .seo-multilang__grid {
    grid-template-columns: 1fr
  }

  .seo-multilang--tool .seo-multilang__grid {
    grid-template-columns: 1fr
  }

  .overlay {
    display: none;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .overlay.is-visible {
    display: block
  }

  .tl-modal {
    padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom))
  }

  .tl-modal-card {
    width: 100%;
    max-height: calc(100dvh - 24px);
    border-radius: 20px;
  }

  .hc-toolbar {
    padding: 12px
  }

  .hc-toolbar__range,
  .hc-toolbar__filters {
    width: 100%
  }

  .hc-toolbar__actions .button {
    flex: 1 1 auto;
    min-width: 0
  }

  .wf-step,
  .wf-actions {
    flex-direction: column;
    align-items: stretch
  }

  .wf-actions .button {
    width: 100%
  }
}

@media (max-width:640px) {
  header {
    text-align: left
  }

  header:not(.site-hero) p {
    padding: 0
  }

  .site-wrap {
    padding-left: max(6px, env(safe-area-inset-left));
    padding-right: max(6px, env(safe-area-inset-right))
  }

  .grid.two {
    gap: 10px
  }

  .button,
  .case-op-btn,
  .tl-pill {
    min-height: 44px
  }

  .drop {
    padding: 18px 12px
  }

  .table-wrap {
    -webkit-overflow-scrolling: touch
  }

  #editableTable {
    min-width: 520px
  }

  .video-tool-grid,
  .video-actions,
  .table-actions {
    gap: 10px
  }

  .tl-bar {
    gap: 8px
  }

  .tl-pill {
    min-width: 0;
    flex: 1 1 calc(50% - 4px);
    padding: 10px 12px
  }

  .tl-swap {
    flex-shrink: 0
  }

  .seo-guide h2 {
    font-size: 1.15rem
  }

  .seo-multilang {
    padding: 16px 14px
  }

  .tool-landing__related ul {
    padding-left: 16px
  }

  .legal-page,
  .tool-landing-page {
    overflow-x: clip
  }
}

@media (max-width:480px) {
  .shell {
    border-radius: 14px !important
  }

  .content {
    padding: 10px !important
  }

  .sidebar .tab {
    padding: 8px 10px;
    gap: 8px;
    border-radius: 14px;
  }

  .sidebar .tab span:not(.badge) {
    font-size: 12px;
    white-space: normal;
    line-height: 1.25;
  }

  .share-bar__btn {
    flex: 1 1 calc(33.333% - 6px);
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .share-bar__btn--copy {
    flex: 1 1 100%
  }

  .upscale-preview {
    grid-template-columns: 1fr
  }

  .template-grid {
    grid-template-columns: 1fr 1fr
  }

  .hc-stat__val {
    font-size: 1.15rem
  }
}

@media (max-width:360px) {
  header h1 {
    font-size: 1.1rem !important
  }

  .topbar-title span {
    font-size: .82rem
  }

  .brand-title {
    font-size: .88rem
  }
}

/* Universal PDF Compressor File List */
.uni-file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
}

.uni-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.uni-file-item__info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.uni-file-item__info i {
  color: #ef4444;
  font-size: 18px;
  flex-shrink: 0;
}

.uni-file-item__name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.uni-file-item__meta {
  font-size: 11px;
  opacity: 0.75;
  white-space: nowrap;
}

.uni-file-item__status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  flex-shrink: 0;
}

.uni-file-item__badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 11px;
  line-height: 1.2;
}

.uni-file-item__badge--pending {
  background: rgba(148, 163, 184, 0.2);
  color: #94a3b8;
}

.uni-file-item__badge--working {
  background: rgba(59, 130, 246, 0.25);
  color: #60a5fa;
}

.uni-file-item__badge--done {
  background: rgba(34, 197, 94, 0.25);
  color: #4ade80;
}

.uni-file-item__badge--error {
  background: rgba(239, 68, 68, 0.25);
  color: #f87171;
}

.uni-file-item__dl {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--grad-ui, #6366f1);
  color: #fff !important;
  font-size: 12px;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 0.15s ease;
}

.uni-file-item__dl:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
}
.site-footer__faq details.faq-enhanced{overflow:clip;transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease}.site-footer__faq details.faq-enhanced:hover,.site-footer__faq details.faq-enhanced[open]{background:rgba(255,255,255,.055)!important;border-color:rgba(169,156,255,.38)!important}.site-footer__faq details.faq-enhanced summary{position:relative;display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:28px;padding-right:3px;list-style:none;user-select:none}.site-footer__faq details.faq-enhanced summary::-webkit-details-marker{display:none}.site-footer__faq details.faq-enhanced summary::after{content:"";flex:0 0 auto;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;opacity:.72;transform:rotate(45deg) translate(-2px,-2px);transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .2s ease}.site-footer__faq details.faq-enhanced[open] summary::after{opacity:1;transform:rotate(225deg) translate(-1px,-1px)}.site-footer__faq details.faq-enhanced summary:focus-visible{outline:2px solid #a99cff;outline-offset:5px;border-radius:4px}.site-footer__faq details.faq-enhanced[open] p{animation:faq-content-in .28s cubic-bezier(.2,.8,.2,1) both}@keyframes faq-content-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.site-footer__faq details.faq-enhanced,.site-footer__faq details.faq-enhanced summary::after{transition:none}.site-footer__faq details.faq-enhanced[open] p{animation:none}}
/* Visual video trimmer */
.trim-editor{margin:4px 0 18px;padding:16px;border:1px solid rgba(255,255,255,.14);border-radius:16px;background:rgba(8,15,29,.5)}
.trim-preview{display:block;width:100%;max-height:460px;min-height:220px;border-radius:12px;background:#000}
.trim-summary,.trim-legend{display:flex;justify-content:space-between;gap:12px;margin:12px 0 8px;color:var(--muted);font-variant-numeric:tabular-nums}.trim-summary strong{color:var(--text)}
.trim-track{position:relative;height:92px;overflow:hidden;border-radius:10px;background:linear-gradient(135deg,#334155,#0f172a);touch-action:none}.trim-selection{position:absolute;top:0;bottom:0;left:0;width:100%;border:3px solid #facc15;border-left-width:10px;border-right-width:10px;background:rgba(250,204,21,.18);box-shadow:-1000px 0 0 1000px rgba(2,6,23,.72),1000px 0 0 1000px rgba(2,6,23,.72);pointer-events:none}.trim-playhead{position:absolute;z-index:2;top:0;bottom:0;left:0;width:2px;background:#fff;pointer-events:none}
.trim-range{position:absolute;z-index:4;inset:0;width:100%;height:100%;margin:0;opacity:.01;cursor:ew-resize}.trim-range::-webkit-slider-thumb{width:34px;height:92px;appearance:none;pointer-events:auto}.trim-range::-moz-range-thumb{width:34px;height:92px;pointer-events:auto}#videoTrimStartRange{z-index:5}
.trim-legend{font-size:12px}@media(max-width:700px){.trim-preview{min-height:160px}.trim-track{height:72px}}
.trim-track canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.trim-range{appearance:none;-webkit-appearance:none;background:transparent;pointer-events:none;opacity:1}.trim-range::-webkit-slider-runnable-track{height:100%;background:transparent}.trim-range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:92px;border:0;border-radius:5px;background:#facc15;box-shadow:0 0 0 1px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.35);pointer-events:auto}.trim-range::-moz-range-track{height:100%;background:transparent}.trim-range::-moz-range-thumb{width:18px;height:92px;border:0;border-radius:5px;background:#facc15;pointer-events:auto}
.trim-editor,.trim-editor label,.trim-editor span{color:#e5edf9}.trim-editor .trim-summary,.trim-editor .trim-legend{color:#cbd5e1!important}.trim-editor .trim-summary strong{color:#fff!important}.trim-editor .trim-legend span{color:#cbd5e1!important;opacity:1}
.trim-thumbnails{position:absolute;inset:0;display:flex;overflow:hidden;background:#111827}.trim-thumbnails img{display:block;height:100%;min-width:0;flex:1 1 8.333%;object-fit:cover}.trim-thumbnails__loading{display:grid!important;place-items:center;width:100%;color:#dbeafe!important;font-weight:700;background:linear-gradient(110deg,#111827 20%,#1e293b 40%,#111827 60%);background-size:200% 100%;animation:trim-loading 1.4s linear infinite}@keyframes trim-loading{to{background-position:-200% 0}}
/* Reference-style filmstrip timeline */
.trim-track{height:128px!important;border-radius:0!important;background:#17171d!important;overflow:visible!important;padding-top:0}
.trim-ruler{position:absolute;z-index:1;top:0;left:0;right:0;height:36px;border-bottom:1px solid rgba(255,255,255,.08);background:repeating-linear-gradient(90deg,transparent 0,transparent 20px,rgba(255,255,255,.15) 21px,transparent 22px),linear-gradient(#25252d,#202027)}
.trim-thumbnails{top:46px!important;bottom:16px!important;left:4%!important;right:4%!important;border-radius:6px;background:#22242b!important}
.trim-thumbnails img:first-of-type{border-radius:6px 0 0 6px}.trim-thumbnails img:last-of-type{border-radius:0 6px 6px 0}
.trim-selection{top:44px!important;bottom:14px!important;height:auto!important;border:3px solid #ffd21c!important;border-left-width:11px!important;border-right-width:11px!important;border-radius:6px;background:rgba(255,210,28,.06)!important;box-shadow:-1000px 0 0 1000px rgba(9,10,15,.64),1000px 0 0 1000px rgba(9,10,15,.64)!important}
.trim-selection:after{content:"↔";position:absolute;right:-25px;top:50%;color:#fff;font-size:28px;font-weight:900;text-shadow:0 2px 3px #000;transform:translateY(-50%)}
.trim-playhead{top:34px!important;bottom:8px!important;background:#fff!important;z-index:7!important}.trim-playhead:before{content:"✂";position:absolute;top:-31px;left:50%;color:#fff;font-size:23px;line-height:1;text-shadow:0 2px 3px #000;transform:translateX(-50%)}
.trim-time-badge{position:absolute;z-index:8;top:3px;left:0;min-width:72px;padding:5px 9px;border-radius:7px;background:#ffd21c;color:#111!important;font-size:12px;font-weight:800;text-align:center;font-variant-numeric:tabular-nums;transform:translateX(-50%);pointer-events:none}
.trim-delete{position:absolute;z-index:8;top:61px;left:2%;width:31px;height:31px;padding:0;border:0;border-radius:6px;background:rgba(110,110,110,.85);color:#fff;cursor:pointer;transform:translateX(-50%)}.trim-delete:hover{background:#dc2626}.trim-delete[hidden]{display:none}
.trim-range{top:36px!important;height:84px!important}.trim-range::-webkit-slider-thumb{height:70px!important;background:#ffd21c!important}.trim-range::-moz-range-thumb{height:70px!important;background:#ffd21c!important}
@media(max-width:700px){.trim-track{height:112px!important}.trim-thumbnails{top:42px!important;bottom:12px!important}.trim-selection{top:40px!important;bottom:10px!important}.trim-range{top:32px!important;height:74px!important}}
/* Overlay state hardening: hidden unless explicitly active */
.download-overlay{display:none!important}.download-overlay.is-visible{display:flex!important}.download-overlay[hidden]{display:none!important}
/* Keep trim shading strictly inside the timeline */
.trim-track{overflow:hidden!important;isolation:isolate}
.trim-selection{clip-path:inset(-4px -1000px -4px -1000px)}
/* Keep excluded-area shading visible, but confined to the timeline */
.trim-selection{clip-path:none!important;box-shadow:-1000px 0 0 1000px rgba(9,10,15,.64),1000px 0 0 1000px rgba(9,10,15,.64)!important}
.trim-track{overflow:hidden!important}
/* Hide solid yellow range bars; selection edges remain draggable */
.trim-range::-webkit-slider-thumb{background:transparent!important;box-shadow:none!important;border:0!important}
.trim-range::-moz-range-thumb{background:transparent!important;box-shadow:none!important;border:0!important}
/* Dedicated visible start and end separators */
.trim-separator{position:absolute;z-index:8;top:44px;bottom:14px;width:10px;border-radius:5px;background:#ffd21c;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 3px 10px rgba(0,0,0,.3);pointer-events:none}
.trim-separator--start{left:0}.trim-separator--end{left:100%;transform:translateX(-100%)}
@media(max-width:700px){.trim-separator{top:40px;bottom:10px}}
/* Strong selected-range highlight */
.trim-selection{background:linear-gradient(180deg,rgba(255,221,64,.34),rgba(250,180,20,.24))!important;border-color:#ffd21c!important;outline:1px solid rgba(255,244,170,.75);outline-offset:-4px}
.trim-selection:before{content:"SELECTED";position:absolute;left:50%;top:50%;padding:4px 8px;border-radius:6px;background:rgba(17,24,39,.72);color:#fff;font-size:10px;font-weight:800;letter-spacing:.08em;transform:translate(-50%,-50%);text-shadow:0 1px 2px #000;pointer-events:none}
/* Ensure selected range is unmistakably visible above the filmstrip */
.trim-selection{z-index:6!important;background:rgba(250,204,21,.52)!important;border:3px solid #ffe033!important;border-left-width:11px!important;border-right-width:11px!important;outline:2px solid rgba(255,255,210,.9)!important;outline-offset:-5px!important;box-shadow:-1000px 0 0 1000px rgba(3,7,18,.76),1000px 0 0 1000px rgba(3,7,18,.76),inset 0 0 22px rgba(255,235,80,.35)!important}
.trim-selection:before{z-index:1;background:#111827!important;color:#fff!important;border:1px solid rgba(255,255,255,.5)}
/* Keep excluded thumbnails visible on both sides */
.trim-selection{background:rgba(250,204,21,.32)!important;box-shadow:-1000px 0 0 1000px rgba(3,7,18,.48),1000px 0 0 1000px rgba(3,7,18,.48),inset 0 0 18px rgba(255,235,80,.3)!important}
.trim-thumbnails{background:linear-gradient(90deg,#202938,#111827)!important}.trim-thumbnails img{filter:brightness(.95) saturate(.9);opacity:1!important}
/* Remove inherited form borders from invisible trim controls */
.trim-range,.trim-range:hover,.trim-range:focus,.trim-range:focus-visible{border:0!important;outline:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;background:transparent!important}
/* Keep selected video frames visible at all times */
.trim-selection,.trim-selection:hover{background:rgba(250,204,21,.06)!important;box-shadow:-1000px 0 0 1000px rgba(3,7,18,.48),1000px 0 0 1000px rgba(3,7,18,.48)!important;outline:0!important}
.trim-selection:before{background:rgba(15,23,42,.88)!important}
/* Force filmstrip repaint without requiring pointer hover */
.trim-thumbnails{z-index:1;contain:layout paint;will-change:contents;transform:translateZ(0)}
.trim-thumbnails img{position:relative;z-index:1;backface-visibility:hidden;transform:translateZ(0);animation:trim-thumb-repaint .12s both}
.trim-thumbnails.has-frames{background:transparent!important}
@keyframes trim-thumb-repaint{from{opacity:.98;transform:translateZ(0) scale(1.001)}to{opacity:1;transform:translateZ(0) scale(1)}}
/* Selection is already indicated by its yellow border and handles. */
.trim-selection:before{display:none!important;content:none!important}
/* Delicate selection frame: handles provide the strong start/end markers. */
.trim-selection{border:2px solid #ffd21c!important;border-left-width:2px!important;border-right-width:2px!important;outline:0!important;box-shadow:-1000px 0 0 1000px rgba(3,7,18,.48),1000px 0 0 1000px rgba(3,7,18,.48)!important}
.trim-separator{width:8px;box-shadow:0 1px 4px rgba(0,0,0,.28)}
#videoToolProgress.is-processing{overflow:hidden;background:rgba(124,92,255,.18)}
#videoToolProgress.is-processing span{width:38%!important;animation:video-trim-working 1.25s ease-in-out infinite}
#videoToolProgress.is-downloading span{transition:width .18s linear}
@keyframes video-trim-working{0%{transform:translateX(-115%)}100%{transform:translateX(285%)}}
/* Multiple saved trim sections */
.trim-saved-sections{position:absolute;z-index:5;inset:0;pointer-events:none}
.trim-saved-section,.trim-removed-gap{position:absolute;top:44px;bottom:14px}
.trim-saved-section{border:2px solid #ffe45c;border-radius:5px;background:rgba(250,204,21,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.38)}
.trim-removed-gap{background:rgba(3,7,18,.58)}
.trim-track.has-saved-sections .trim-selection{box-shadow:none!important}
.trim-section-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:12px}
.trim-section-controls .button{width:auto;min-height:38px;padding:9px 13px}
.trim-clear-sections{background:rgba(148,163,184,.18)!important}
.trim-sections-summary{color:#cbd5e1;font-size:13px;font-weight:650}
.trim-sections-list{display:grid;gap:7px;margin-top:9px}
.trim-section-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border:1px solid rgba(255,226,82,.3);border-radius:9px;background:rgba(15,23,42,.72);color:#e5edf9;font-variant-numeric:tabular-nums}
.trim-section-item small{color:#aebbd0}.trim-section-remove{display:inline-flex;align-items:center;justify-content:center;line-height:1;flex:0 0 28px;width:28px;height:28px;padding:0;border:1px solid rgba(255,255,255,.14);border-radius:7px;background:rgba(239,68,68,.18);color:#fecaca;font-size:20px;cursor:pointer}.trim-section-remove:hover{background:#dc2626;color:#fff}.trim-section-remove i{display:block;line-height:1;margin:0;transform:translateY(0)}
(max-width:700px){.trim-saved-section,.trim-removed-gap{top:40px;bottom:10px}.trim-section-controls .button{flex:1 1 auto}.trim-sections-summary{flex-basis:100%}}