/* ============================================================
   CSS Gradient Generator — Plugin Styles
   Aesthetic: Dark precision tool · refined · developer-grade
   ============================================================ */

/* ── Reset & Base ─────────────────────────────────────────── */
.cgg-app *,
.cgg-app *::before,
.cgg-app *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.cgg-app {
    --bg:        #0b0b10;
    --surface:   #111118;
    --surface2:  #18181f;
    --surface3:  #1e1e28;
    --border:    rgba(255,255,255,0.07);
    --border2:   rgba(255,255,255,0.12);
    --text:      #dddde8;
    --text2:     #8888a8;
    --accent:    #7c6ef5;
    --accent-h:  #9d92f7;
    --success:   #3ecf8e;
    --danger:    #f87171;
    --warn:      #fbbf24;
    --radius:    10px;
    --radius-lg: 18px;
    --mono:      'JetBrains Mono', 'Courier New', monospace;
    --sans:      'Space Grotesk', system-ui, sans-serif;

    font-family:     var(--sans);
    background:      var(--bg);
    color:           var(--text);
    border-radius:   var(--radius-lg);
    overflow:        hidden;
    max-width:       100%;
    margin:          32px auto;
    box-shadow:      0 32px 96px rgba(0,0,0,0.6), 0 0 0 1px var(--border);
    position:        relative;
}

/* ── Header ───────────────────────────────────────────────── */
.cgg-header {
    display:        flex;
    align-items:    center;
    justify-content: space-between;
    padding:        18px 28px;
    background:     var(--surface);
    border-bottom:  1px solid var(--border);
}

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

.cgg-logo-icon {
    width:          34px;
    height:         34px;
    border-radius:  8px;
    background:     linear-gradient(135deg, #7c6ef5, #60a5fa, #34d399);
    flex-shrink:    0;
}

.cgg-title {
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: 0.01em;
    color:          var(--text);
}

.cgg-subtitle {
    font-size:  0.72rem;
    color:      var(--text2);
    margin-top: 1px;
    font-weight: 400;
}

.cgg-header-right {
    display:    flex;
    align-items: center;
    gap:         10px;
}

.cgg-lang-btn {
    background:    var(--surface3);
    border:        1px solid var(--border2);
    color:         var(--text);
    font-family:   var(--sans);
    font-size:     0.78rem;
    font-weight:   600;
    padding:       6px 14px;
    border-radius: 20px;
    cursor:        pointer;
    transition:    all 0.2s;
    letter-spacing: 0.05em;
}

.cgg-lang-btn:hover {
    border-color: var(--accent);
    color:        var(--accent-h);
}

/* ── Layout ───────────────────────────────────────────────── */
.cgg-body {
    display: grid;
    grid-template-columns: 1fr 230px;
    min-height: 520px;
}

.cgg-main {
    padding:      24px 28px;
    border-right: 1px solid var(--border);
    display:      flex;
    flex-direction: column;
    gap:          22px;
}

.cgg-sidebar {
    padding:        0;
    display:        flex;
    flex-direction: column;
    background:     var(--surface);
    overflow:       hidden;
}

/* ── Preview ──────────────────────────────────────────────── */
.cgg-preview-wrap {
    position:      relative;
    border-radius: var(--radius);
    overflow:      hidden;
    border:        1px solid var(--border);
}

.cgg-preview {
    width:       100%;
    height:      200px;
    transition:  background 0.25s ease;
}

.cgg-preview-overlay {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    10px 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    font-size:  0.7rem;
    color:      rgba(255,255,255,0.6);
    font-family: var(--mono);
    pointer-events: none;
    white-space: nowrap;
    overflow:   hidden;
    text-overflow: ellipsis;
}

/* ── Type Selector ────────────────────────────────────────── */
.cgg-type-group {
    display:  flex;
    gap:      6px;
    background: var(--surface2);
    padding:  4px;
    border-radius: var(--radius);
    border:   1px solid var(--border);
}

.cgg-type-btn {
    flex:          1;
    padding:       8px 4px;
    background:    transparent;
    border:        none;
    border-radius: 7px;
    color:         var(--text2);
    font-family:   var(--sans);
    font-size:     0.82rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    all 0.2s;
    display:       flex;
    align-items:   center;
    justify-content: center;
    gap:           6px;
}

.cgg-type-btn:hover {
    color: var(--text);
    background: var(--surface3);
}

.cgg-type-btn.active {
    background:  var(--accent);
    color:       #fff;
    box-shadow:  0 2px 12px rgba(124,110,245,0.4);
}

/* ── Direction Controls ───────────────────────────────────── */
.cgg-direction-wrap {
    display:    flex;
    align-items: center;
    gap:         20px;
}

.cgg-angle-dial {
    width:      72px;
    height:     72px;
    border-radius: 50%;
    background: var(--surface2);
    border:     2px solid var(--border2);
    cursor:     pointer;
    position:   relative;
    flex-shrink: 0;
    transition: border-color 0.2s;
}

.cgg-angle-dial:hover {
    border-color: var(--accent);
}

.cgg-angle-dial-needle {
    position:     absolute;
    top:          50%;
    left:         50%;
    width:        3px;
    height:       28px;
    background:   linear-gradient(to top, var(--accent), transparent);
    border-radius: 3px;
    transform-origin: bottom center;
    margin-left:  -1.5px;
    margin-top:   -28px;
    transition:   transform 0.05s;
}

.cgg-angle-dial-center {
    position:  absolute;
    top:       50%;
    left:      50%;
    width:     8px;
    height:    8px;
    background: var(--accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.cgg-angle-info {
    flex: 1;
}

.cgg-angle-label {
    font-size:  0.7rem;
    color:      var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}

.cgg-angle-value {
    font-family: var(--mono);
    font-size:   1.5rem;
    font-weight: 500;
    color:       var(--text);
    line-height: 1;
}

.cgg-angle-unit {
    font-size: 0.8rem;
    color:     var(--text2);
}

.cgg-direction-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 10px;
}

.cgg-dir-btn {
    width:      32px;
    height:     32px;
    background: var(--surface2);
    border:     1px solid var(--border);
    border-radius: 6px;
    cursor:     pointer;
    display:    flex;
    align-items: center;
    justify-content: center;
    font-size:  1rem;
    transition: all 0.15s;
    color:      var(--text);
}

.cgg-dir-btn:hover,
.cgg-dir-btn.active {
    background:  var(--surface3);
    border-color: var(--accent);
}

/* Radial / Conic controls */
.cgg-radial-controls,
.cgg-conic-controls {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cgg-select-row {
    display:    flex;
    align-items: center;
    gap:         10px;
}

.cgg-field-label {
    font-size:  0.72rem;
    color:      var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    min-width:  62px;
}

.cgg-select {
    flex:         1;
    background:   var(--surface2);
    border:       1px solid var(--border2);
    color:        var(--text);
    font-family:  var(--sans);
    font-size:    0.82rem;
    padding:      7px 10px;
    border-radius: 7px;
    cursor:       pointer;
    appearance:   none;
    outline:      none;
    transition:   border-color 0.2s;
}

.cgg-select:focus {
    border-color: var(--accent);
}

.cgg-slider-row {
    display:    flex;
    align-items: center;
    gap:         10px;
}

.cgg-slider {
    -webkit-appearance: none;
    flex:        1;
    height:      4px;
    background:  var(--surface3);
    border-radius: 4px;
    outline:     none;
    cursor:      pointer;
}

.cgg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:        16px;
    height:       16px;
    border-radius: 50%;
    background:   var(--accent);
    cursor:       pointer;
    box-shadow:   0 0 0 3px rgba(124,110,245,0.25);
    transition:   box-shadow 0.15s;
}

.cgg-slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 5px rgba(124,110,245,0.3);
}

.cgg-slider-value {
    font-family: var(--mono);
    font-size:   0.78rem;
    color:       var(--text);
    min-width:   38px;
    text-align:  right;
}

/* ── Color Stops ──────────────────────────────────────────── */
.cgg-section-title {
    font-size:      0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--text2);
    margin-bottom:  10px;
    font-weight:    600;
}

.cgg-stops-bar {
    height:        12px;
    border-radius: 6px;
    margin-bottom: 14px;
    cursor:        pointer;
    position:      relative;
    border:        1px solid var(--border);
    overflow:      visible;
}

.cgg-stops-bar-handle {
    position:     absolute;
    top:          50%;
    width:        18px;
    height:       18px;
    border-radius: 50%;
    border:       2px solid #fff;
    transform:    translate(-50%, -50%);
    cursor:       grab;
    box-shadow:   0 2px 8px rgba(0,0,0,0.4);
    z-index:      2;
    transition:   box-shadow 0.15s, transform 0.1s;
}

.cgg-stops-bar-handle:hover,
.cgg-stops-bar-handle.active {
    box-shadow: 0 2px 12px rgba(0,0,0,0.6);
    transform:  translate(-50%, -50%) scale(1.15);
}

.cgg-stop-list {
    display:        flex;
    flex-direction: column;
    gap:            8px;
    max-height:     200px;
    overflow-y:     auto;
    padding-right:  4px;
}

.cgg-stop-list::-webkit-scrollbar { width: 4px; }
.cgg-stop-list::-webkit-scrollbar-track { background: transparent; }
.cgg-stop-list::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 4px; }

.cgg-stop-item {
    display:        flex;
    align-items:    center;
    gap:            10px;
    background:     var(--surface2);
    border:         1px solid var(--border);
    border-radius:  var(--radius);
    padding:        8px 12px;
    transition:     border-color 0.15s;
    animation:      cgg-slide-in 0.18s ease;
}

.cgg-stop-item:hover {
    border-color: var(--border2);
}

@keyframes cgg-slide-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

.cgg-stop-color-wrap {
    position:      relative;
    width:         32px;
    height:        32px;
    border-radius: 7px;
    overflow:      hidden;
    flex-shrink:   0;
    cursor:        pointer;
    border:        1px solid var(--border2);
}

.cgg-stop-color-input {
    position: absolute;
    inset:    -4px;
    width:    calc(100% + 8px);
    height:   calc(100% + 8px);
    opacity:  0;
    cursor:   pointer;
    border:   none;
    padding:  0;
}

.cgg-stop-color-preview {
    width:   100%;
    height:  100%;
    pointer-events: none;
}

.cgg-stop-position-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

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

.cgg-stop-pos-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:  13px;
    height: 13px;
    border-radius: 50%;
    background:   var(--accent);
    cursor:       pointer;
}

.cgg-stop-pos-val {
    font-family: var(--mono);
    font-size:   0.72rem;
    color:       var(--text2);
    min-width:   30px;
    text-align:  right;
}

.cgg-stop-hex {
    font-family: var(--mono);
    font-size:   0.72rem;
    color:       var(--text2);
    min-width:   56px;
    text-transform: uppercase;
}

.cgg-stop-remove {
    background: transparent;
    border:     none;
    color:      var(--text2);
    cursor:     pointer;
    font-size:  1rem;
    line-height: 1;
    padding:    2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.cgg-stop-remove:hover {
    color:      var(--danger);
    background: rgba(248,113,113,0.1);
}

.cgg-add-stop-btn {
    width:        100%;
    margin-top:   10px;
    padding:      9px;
    background:   transparent;
    border:       1px dashed var(--border2);
    border-radius: var(--radius);
    color:        var(--text2);
    font-family:  var(--sans);
    font-size:    0.82rem;
    cursor:       pointer;
    transition:   all 0.2s;
    display:      flex;
    align-items:  center;
    justify-content: center;
    gap:          6px;
}

.cgg-add-stop-btn:hover {
    border-color: var(--accent);
    color:        var(--accent-h);
    background:   rgba(124,110,245,0.05);
}

/* ── CSS Output ───────────────────────────────────────────── */
.cgg-output-wrap {
    background:    var(--surface2);
    border:        1px solid var(--border);
    border-radius: var(--radius);
    overflow:      hidden;
}

.cgg-output-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px 12px;
    background:      var(--surface3);
    border-bottom:   1px solid var(--border);
}

.cgg-output-label {
    font-size:      0.68rem;
    color:          var(--text2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight:    600;
}

.cgg-output-actions {
    display: flex;
    gap:     6px;
}

.cgg-copy-btn,
.cgg-export-btn {
    padding:      5px 12px;
    border-radius: 6px;
    font-family:  var(--sans);
    font-size:    0.75rem;
    font-weight:  600;
    cursor:       pointer;
    transition:   all 0.2s;
    border:       none;
}

.cgg-copy-btn {
    background: var(--accent);
    color:      #fff;
}

.cgg-copy-btn:hover {
    background: var(--accent-h);
    box-shadow: 0 2px 12px rgba(124,110,245,0.4);
}

.cgg-copy-btn.copied {
    background: var(--success);
}

.cgg-export-btn {
    background: var(--surface);
    color:      var(--text);
    border:     1px solid var(--border2);
}

.cgg-export-btn:hover {
    border-color: var(--warn);
    color:        var(--warn);
}

.cgg-css-code {
    padding:     14px 16px;
    font-family: var(--mono);
    font-size:   0.78rem;
    color:       var(--text);
    line-height: 1.7;
    white-space: pre-wrap;
    word-break:  break-all;
    max-height:  110px;
    overflow-y:  auto;
    user-select: text;
}

.cgg-css-code::-webkit-scrollbar { width: 4px; }
.cgg-css-code::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 4px; }

/* ── Sidebar Tabs ─────────────────────────────────────────── */
.cgg-sidebar-tabs {
    display:    flex;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}

.cgg-tab-btn {
    flex:          1;
    padding:       12px 4px;
    background:    transparent;
    border:        none;
    border-bottom: 2px solid transparent;
    color:         var(--text2);
    font-family:   var(--sans);
    font-size:     0.78rem;
    font-weight:   600;
    cursor:        pointer;
    transition:    all 0.2s;
    text-align:    center;
}

.cgg-tab-btn:hover {
    color: var(--text);
}

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

.cgg-tab-panel {
    display:  none;
    flex:     1;
    overflow-y: auto;
    padding:  16px;
}

.cgg-tab-panel.active {
    display: block;
}

.cgg-tab-panel::-webkit-scrollbar { width: 4px; }
.cgg-tab-panel::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 4px; }

/* ── Presets Grid ─────────────────────────────────────────── */
.cgg-presets-grid,
.cgg-history-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   8px;
}

.cgg-preset-item,
.cgg-history-item {
    aspect-ratio: 1;
    border-radius: 8px;
    cursor:        pointer;
    border:        2px solid transparent;
    transition:    all 0.2s;
    position:      relative;
    overflow:      hidden;
}

.cgg-preset-item:hover,
.cgg-history-item:hover {
    border-color: var(--accent);
    transform:    scale(1.04);
    box-shadow:   0 4px 16px rgba(0,0,0,0.4);
}

.cgg-preset-name {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    padding:    4px 6px;
    background: rgba(0,0,0,0.55);
    font-size:  0.6rem;
    font-weight: 600;
    color:      rgba(255,255,255,0.85);
    text-align: center;
    white-space: nowrap;
    overflow:   hidden;
    text-overflow: ellipsis;
    opacity:    0;
    transition: opacity 0.15s;
}

.cgg-preset-item:hover .cgg-preset-name {
    opacity: 1;
}

.cgg-history-del {
    position:   absolute;
    top:        4px;
    right:      4px;
    width:      20px;
    height:     20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border:     none;
    color:      #fff;
    font-size:  0.75rem;
    cursor:     pointer;
    display:    flex;
    align-items: center;
    justify-content: center;
    opacity:    0;
    transition: opacity 0.15s;
}

.cgg-history-item:hover .cgg-history-del {
    opacity: 1;
}

.cgg-empty-state {
    grid-column: 1 / -1;
    padding:     24px 0;
    text-align:  center;
    font-size:   0.8rem;
    color:       var(--text2);
}

/* ── Footer ───────────────────────────────────────────────── */
.cgg-footer {
    padding:     14px 28px;
    background:  var(--surface);
    border-top:  1px solid var(--border);
    display:     flex;
    align-items: center;
    gap:         14px;
    flex-wrap:   wrap;
}

.cgg-history-save-btn {
    padding:      8px 20px;
    background:   transparent;
    border:       1px solid var(--border2);
    border-radius: 8px;
    color:        var(--text);
    font-family:  var(--sans);
    font-size:    0.82rem;
    font-weight:  600;
    cursor:       pointer;
    transition:   all 0.2s;
    display:      flex;
    align-items:  center;
    gap:          6px;
}

.cgg-history-save-btn:hover {
    border-color: var(--success);
    color:        var(--success);
}

.cgg-history-save-btn.saved {
    border-color: var(--success);
    color:        var(--success);
}

.cgg-footer-hint {
    font-size:  0.75rem;
    color:      var(--text2);
    flex: 1;
    text-align: right;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 680px) {
    .cgg-body {
        grid-template-columns: 1fr;
    }

    .cgg-sidebar {
        border-top:  1px solid var(--border);
        border-left: none;
        min-height:  280px;
    }

    .cgg-main {
        padding: 18px 16px;
    }

    .cgg-angle-value {
        font-size: 1.2rem;
    }
}

/* ── Tooltip ──────────────────────────────────────────────── */
[data-tip] {
    position: relative;
}

[data-tip]:hover::after {
    content:       attr(data-tip);
    position:      absolute;
    bottom:        calc(100% + 6px);
    left:          50%;
    transform:     translateX(-50%);
    background:    #222230;
    color:         var(--text);
    font-size:     0.7rem;
    padding:       4px 10px;
    border-radius: 5px;
    white-space:   nowrap;
    z-index:       999;
    pointer-events: none;
    border:        1px solid var(--border2);
}