.lizenztool{
  --lt-accent:#2b4cff;
  --lt-btn-text:#ffffff;
  --lt-border:#d7d7d7;
  --lt-radius:12px;
  --lt-surface: transparent;
  --lt-control-bg: transparent;
  --lt-overlay-bg: #f6f7ff;
  --lt-ctl-h: 42px;
}

.lizenztool *{ box-sizing:border-box; }

.lizenztool__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px){
  .lizenztool__grid{ grid-template-columns: 1fr; }
}

.lt-card{
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  padding: 12px;
  background: var(--lt-surface);
}

.lt-title{ font-weight: 600; margin: 0 0 8px; }
.lt-muted{ opacity: .75; }
.lt-small{ font-size: .9em; }

.lt-hr{
  border: 0;
  border-top: 1px solid var(--lt-border);
  margin: 16px 0;
}

.lt-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items:end; }
.lt-row--top{ align-items:center; }
@media (max-width: 520px){ .lt-row{ grid-template-columns: 1fr; } }

.lt-btnRow{
  display:flex;
  gap:10px;
  margin-top: 10px;
  flex-wrap:wrap;
  align-items:center;
}
.lt-btnRow--actions{ margin-top: 12px; }

.lt-btn{
  padding: 10px 12px;
  border-radius: var(--lt-radius);
  border: 1px solid var(--lt-border);
  background: transparent;
  cursor: pointer;
  line-height: 1;
}
.lt-btnPrimary{
  background: var(--lt-accent);
  color: var(--lt-btn-text);
  border-color: var(--lt-accent);
}
.lt-btn:disabled{ opacity: .5; cursor:not-allowed; }

.lt-dropzone{
  border: 1px dashed var(--lt-border);
  border-radius: var(--lt-radius);
  padding: 12px;
  margin: 8px 0 0;
}
.lt-dropzone.dragover{ border-color: var(--lt-accent); }
.lt-fileInput{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }

.lt-canvasWrap{
  width: 100%;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  overflow: hidden;
}
.lt-canvasWrap canvas{ display:block; width:100%; height:auto; }

.lt-exif{ margin-top: 10px; }
.lt-exif summary{ cursor:pointer; }
#lt-exifOut{
  margin: 8px 0 0;
  padding: 10px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-control-bg);
  max-height: 220px;
  overflow:auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
}

/* Controls */
.lizenztool input[type="text"],
.lizenztool input[type="number"],
.lizenztool input[type="color"],
.lizenztool select{
  width: 100%;
  min-height: var(--lt-ctl-h);
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-control-bg);
  padding: 8px 10px;
  color: inherit;
}
.lizenztool select{
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

.lizenztool input:focus-visible,
.lizenztool select:focus-visible,
.lt-btn:focus-visible,
.lt-dropzone:focus-visible{
  outline: 2px solid var(--lt-accent);
  outline-offset: 2px;
}

/* Range sliders – make them work even if theme overrides */
.lizenztool input[type="range"]{
  width:100%;
  min-height: var(--lt-ctl-h);
  accent-color: var(--lt-accent);
  appearance: auto !important;
  -webkit-appearance: auto !important;
  touch-action: none;
}

/* Switch with forced animation (theme-safe) */
.lt-switch{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.lt-switch input{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.lt-slider{
  width: 44px; height: 26px;
  border: 1px solid var(--lt-border);
  border-radius: 999px;
  position: relative;
  background: transparent;
  transition: border-color 150ms ease, background-color 150ms ease !important;
}
.lt-slider::after{
  content:"";
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--lt-border);
  position:absolute; top:2px; left:2px;
  transform: translate3d(0,0,0);
  will-change: transform;
  transition: transform 150ms ease, background-color 150ms ease !important;
}
.lt-switch input:checked + .lt-slider{ border-color: var(--lt-accent); }
.lt-switch input:checked + .lt-slider::after{
  transform: translate3d(18px,0,0);
  background: var(--lt-accent);
}
.lt-switchLabel{ font-size: .95em; }

.lt-status{
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-control-bg);
  font-size: 12px;
}
.lt-ccInfo{
  margin: 8px 0;
  padding: 10px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-control-bg);
  font-size: 12px;
}
.lt-ccInfo a{ color: var(--lt-accent); }

.lt-hidden{ display:none !important; }

.lt-toast{
  position: fixed;
  right: 14px;
  bottom: 14px;
  padding: 8px 10px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: var(--lt-surface);
  color: inherit;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease;
  z-index: 9999;
  font-size: 12px;
}
.lt-toast.show{ opacity: 1; transform: translateY(0); }

/* overlay */
.lt-overlay{ position:fixed; inset:0; background: rgba(0,0,0,.45); display:none; z-index:10000; }
.lt-overlay.show{ display:block; }
.lt-sheet{
  position:absolute; left:50%; top:10%;
  transform: translateX(-50%);
  width: min(700px, 92vw);
  background: var(--lt-overlay-bg); /* requested: background from chosen color */
  border-radius: var(--lt-radius);
  border: 1px solid var(--lt-border);
  padding: 12px;
}
.lt-sheetHeader{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 8px; }

.lt-chipGrid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
@media (max-width: 520px){ .lt-chipGrid{ grid-template-columns: 1fr; } }
.lt-chip{
  padding: 10px;
  border: 1px solid var(--lt-border);
  border-radius: var(--lt-radius);
  background: transparent;
  cursor:pointer;
  text-align:left;
}
.lt-chip small{ display:block; opacity:.7; margin-top:4px; }