/* ============================================================
   Laser Engrave Generator — Frontend Styles
   ============================================================ */

.leg-wrap {
    --leg-bg:         #1a1a1a;
    --leg-surface:    #242424;
    --leg-border:     #3a3a3a;
    --leg-accent:     #ff6b00;
    --leg-accent-alt: #ff9a40;
    --leg-text:       #e8e8e8;
    --leg-muted:      #888;
    --leg-success:    #4caf50;
    --leg-error:      #f44336;
    --leg-radius:     10px;
    --leg-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    font-family: var(--leg-font);
    background:  var(--leg-bg);
    border:      1px solid var(--leg-border);
    border-radius: var(--leg-radius);
    padding:     28px 32px 32px;
    max-width:   680px;
    margin:      0 auto 2em;
    color:       var(--leg-text);
    box-shadow:  0 4px 24px rgba(0,0,0,.45);
}

/* ── Tabs ──────────────────────────────────────────────────── */
.leg-tabs {
    display:       flex;
    border-bottom: 2px solid var(--leg-border);
    margin-bottom: 24px;
    gap:           4px;
}

.leg-tab {
    background:    transparent;
    border:        none;
    color:         var(--leg-muted);
    cursor:        pointer;
    font-size:     .92em;
    font-weight:   600;
    padding:       10px 18px;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    border-radius: var(--leg-radius) var(--leg-radius) 0 0;
    transition:    color .2s, border-color .2s;
}

.leg-tab:hover              { color: var(--leg-text); }
.leg-tab--active            { color: var(--leg-accent); border-bottom-color: var(--leg-accent); }

/* ── Panels ────────────────────────────────────────────────── */
.leg-panel        { display: none; }
.leg-panel--active{ display: block; }

/* ── Fields ────────────────────────────────────────────────── */
.leg-field {
    display:       flex;
    flex-direction: column;
    gap:           6px;
    flex:          1;
}

.leg-row {
    display:   flex;
    gap:       16px;
    flex-wrap: wrap;
    margin:    16px 0;
}

.leg-label {
    font-size:   .82em;
    font-weight: 700;
    color:       var(--leg-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}

.leg-textarea,
.leg-select {
    background:  var(--leg-surface);
    border:      1px solid var(--leg-border);
    border-radius: 6px;
    color:       var(--leg-text);
    font-family: var(--leg-font);
    font-size:   .95em;
    padding:     10px 12px;
    resize:      vertical;
    transition:  border-color .2s;
    width:       100%;
    box-sizing:  border-box;
}

.leg-textarea:focus,
.leg-select:focus {
    outline:      none;
    border-color: var(--leg-accent);
    box-shadow:   0 0 0 3px rgba(255,107,0,.18);
}

.leg-hint {
    font-size: .8em;
    color:     var(--leg-muted);
    margin:    0;
}

/* ── Toggle checkbox ───────────────────────────────────────── */
.leg-field--checkbox { justify-content: flex-end; }

.leg-toggle {
    display:     flex;
    align-items: center;
    gap:         10px;
    cursor:      pointer;
    font-size:   .88em;
    user-select: none;
}
.leg-toggle input          { display: none; }
.leg-toggle__track {
    width:         40px;
    height:        22px;
    background:    var(--leg-border);
    border-radius: 11px;
    position:      relative;
    flex-shrink:   0;
    transition:    background .2s;
}
.leg-toggle__track::after {
    content:       '';
    position:      absolute;
    width:         16px;
    height:        16px;
    background:    #fff;
    border-radius: 50%;
    top:           3px;
    left:          3px;
    transition:    transform .2s;
}
.leg-toggle input:checked + .leg-toggle__track               { background: var(--leg-accent); }
.leg-toggle input:checked + .leg-toggle__track::after        { transform: translateX(18px); }
.leg-toggle__label em                                        { color: var(--leg-muted); }

/* ── Drop-zone ─────────────────────────────────────────────── */
.leg-dropzone {
    border:        2px dashed var(--leg-border);
    border-radius: var(--leg-radius);
    background:    var(--leg-surface);
    cursor:        pointer;
    min-height:    160px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    border-color .2s, background .2s;
    overflow:      hidden;
    position:      relative;
    margin-bottom: 4px;
}
.leg-dropzone:hover,
.leg-dropzone--over {
    border-color: var(--leg-accent);
    background:   #2d2010;
}

.leg-dropzone__inner {
    text-align: center;
    padding:    24px;
    pointer-events: none;
}
.leg-dropzone__icon  { font-size: 2.2em; display: block; margin-bottom: 8px; }
.leg-dropzone__text  { margin: 0 0 6px; font-size: .95em; line-height: 1.5; }
.leg-dropzone__hint  { margin: 0; font-size: .78em; color: var(--leg-muted); }

.leg-dropzone__preview {
    width:      100%;
    max-height: 300px;
    object-fit: contain;
    display:    block;
}

/* ── Buttons ───────────────────────────────────────────────── */
.leg-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    border:        none;
    border-radius: 7px;
    cursor:        pointer;
    font-family:   var(--leg-font);
    font-size:     .95em;
    font-weight:   700;
    padding:       12px 24px;
    transition:    background .2s, transform .1s, opacity .2s;
    text-decoration: none;
}

.leg-btn--primary {
    background: var(--leg-accent);
    color:      #fff;
    margin-top: 4px;
}
.leg-btn--primary:hover:not(:disabled) {
    background: var(--leg-accent-alt);
    transform:  translateY(-1px);
}
.leg-btn--primary:disabled {
    opacity: .45;
    cursor:  not-allowed;
}

.leg-btn--secondary {
    background: var(--leg-surface);
    border:     1px solid var(--leg-border);
    color:      var(--leg-text);
}
.leg-btn--secondary:hover { background: var(--leg-border); }

.leg-btn--download {
    background: var(--leg-success);
    color:      #fff;
}
.leg-btn--download:hover { background: #43a047; transform: translateY(-1px); }

/* ── Progress ──────────────────────────────────────────────── */
.leg-progress {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    padding:        32px 0;
}

.leg-spinner {
    width:  44px;
    height: 44px;
    border: 4px solid var(--leg-border);
    border-top-color: var(--leg-accent);
    border-radius: 50%;
    animation: leg-spin 0.8s linear infinite;
}

@keyframes leg-spin { to { transform: rotate(360deg); } }

.leg-progress__msg {
    color:     var(--leg-muted);
    font-size: .9em;
    margin:    0;
}

/* ── Error ─────────────────────────────────────────────────── */
.leg-error {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    background:    rgba(244,67,54,.12);
    border:        1px solid rgba(244,67,54,.35);
    border-radius: 7px;
    color:         #ff8a80;
    font-size:     .9em;
    margin-top:    16px;
    padding:       14px 16px;
}
.leg-error__icon { font-size: 1.2em; flex-shrink: 0; }

/* ── Result ────────────────────────────────────────────────── */
.leg-result {
    margin-top:  24px;
    border-top:  1px solid var(--leg-border);
    padding-top: 24px;
}

.leg-result__title {
    font-size:    1.05em;
    font-weight:  700;
    margin:       0 0 16px;
    color:        var(--leg-success);
}

.leg-result__preview-wrap {
    background:   repeating-conic-gradient(#2a2a2a 0% 25%, #222 0% 50%) 0 0 / 20px 20px;
    border:       1px solid var(--leg-border);
    border-radius: var(--leg-radius);
    max-height:   420px;
    overflow:     hidden;
    display:      flex;
    align-items:  center;
    justify-content: center;
    margin-bottom: 16px;
}

.leg-result__img {
    display:    block;
    max-width:  100%;
    max-height: 420px;
    object-fit: contain;
}

.leg-result__actions {
    display:   flex;
    gap:       12px;
    flex-wrap: wrap;
}

.leg-result__info {
    font-size:  .78em;
    color:      var(--leg-muted);
    margin:     12px 0 0;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 520px) {
    .leg-wrap              { padding: 20px 16px 24px; }
    .leg-row               { flex-direction: column; }
    .leg-tab               { padding: 8px 12px; font-size: .82em; }
    .leg-field--checkbox   { justify-content: flex-start; }
}

/* ── Style Cards ───────────────────────────────────────────── */
.leg-style-cards {
    display:   flex;
    gap:       10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.leg-style-card {
    flex:          1 1 160px;
    border:        2px solid var(--leg-border);
    border-radius: var(--leg-radius);
    background:    var(--leg-surface);
    cursor:        pointer;
    display:       flex;
    flex-direction: column;
    gap:           4px;
    padding:       14px 14px 12px;
    transition:    border-color .18s, background .18s;
    user-select:   none;
}

.leg-style-card:hover {
    border-color: var(--leg-accent-alt);
    background:   #2a1f10;
}

.leg-style-card--active {
    border-color: var(--leg-accent);
    background:   #2d1e0a;
    box-shadow:   0 0 0 3px rgba(255,107,0,.15);
}

.leg-style-card__icon  { font-size: 1.4em; line-height: 1; }
.leg-style-card__title { font-weight: 700; font-size: .92em; color: var(--leg-text); }
.leg-style-card__desc  { font-size: .78em; color: var(--leg-muted); line-height: 1.4; }

/* ── Range Slider ──────────────────────────────────────────── */
.leg-slider-wrap {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-top:  4px;
}

.leg-slider-hint {
    font-size:  .75em;
    color:      var(--leg-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.leg-slider {
    -webkit-appearance: none;
    appearance:  none;
    flex:        1;
    height:      6px;
    background:  var(--leg-border);
    border-radius: 3px;
    outline:     none;
    cursor:      pointer;
}

.leg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:        20px;
    height:       20px;
    border-radius: 50%;
    background:   var(--leg-accent);
    cursor:       pointer;
    transition:   background .15s, transform .1s;
}
.leg-slider::-moz-range-thumb {
    width:        20px;
    height:       20px;
    border:       none;
    border-radius: 50%;
    background:   var(--leg-accent);
    cursor:       pointer;
}
.leg-slider:hover::-webkit-slider-thumb { background: var(--leg-accent-alt); transform: scale(1.15); }

.leg-thickness-val {
    display:      inline-block;
    background:   var(--leg-accent);
    color:        #fff;
    font-size:    .72em;
    font-weight:  700;
    border-radius: 4px;
    padding:      1px 6px;
    min-width:    18px;
    text-align:   center;
}

@media (max-width: 520px) {
    .leg-style-cards { flex-direction: column; }
}