/* ===== SETTINGS PAGE STYLES ===== */
.st-wrap{min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--font-heading);padding:0}
.st-header{padding:2rem 2rem 1.5rem;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100;background:var(--bg);backdrop-filter:blur(20px)}
.st-title{font-size:2rem;font-weight:700;margin-bottom:0.25rem;background:linear-gradient(135deg,var(--accent),var(--green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.st-subtitle{color:var(--text-2);font-size:0.85rem;margin-bottom:1rem}
.st-search{position:relative;max-width:400px;margin-bottom:1rem}
.st-search-input{width:100%;padding:0.6rem 1rem 0.6rem 2.5rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:0.85rem;outline:none;transition:border-color 0.2s}
.st-search-input:focus{border-color:var(--accent)}
.st-search-icon{position:absolute;left:0.8rem;top:50%;transform:translateY(-50%);font-size:0.9rem;opacity:0.5}
.st-actions{display:flex;gap:0.5rem;flex-wrap:wrap}
.st-btn{padding:0.45rem 1rem;border-radius:8px;font-size:0.78rem;font-weight:600;border:1px solid var(--border);background:var(--surface);color:var(--text-2);cursor:pointer;transition:all 0.2s}
.st-btn:hover{border-color:var(--accent);color:var(--text)}
.st-btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.st-btn-primary:hover{opacity:0.9}
.st-btn-action{background:rgba(255,82,82,0.1);color:#ff5252;border-color:rgba(255,82,82,0.2)}
.st-btn-action:hover{background:rgba(255,82,82,0.2)}

/* Layout */
.st-layout{display:flex;min-height:calc(100vh - 160px)}
.st-sidebar{width:220px;flex-shrink:0;border-right:1px solid var(--border);padding:1rem 0;position:sticky;top:160px;height:calc(100vh - 160px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.st-sidebar::-webkit-scrollbar{width:4px}
.st-sidebar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
.st-nav-item{display:flex;align-items:center;gap:0.6rem;width:100%;padding:0.55rem 1.2rem;border:none;background:none;color:var(--text-2);font-size:0.8rem;font-family:inherit;cursor:pointer;text-align:left;transition:all 0.15s;border-left:2px solid transparent}
.st-nav-item:hover{color:var(--text);background:rgba(108,99,255,0.04)}
.st-nav-item.active{color:var(--accent);border-left-color:var(--accent);background:rgba(108,99,255,0.06)}
.st-nav-icon{font-size:1rem;width:1.4rem;text-align:center}
.st-nav-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.st-main{flex:1;padding:1.5rem 2rem 3rem;max-width:900px}
.st-cat-title{font-size:1.3rem;font-weight:700;margin:1.5rem 0 1rem;display:flex;align-items:center;gap:0.5rem;color:var(--text)}
.st-cat-icon{font-size:1.1rem}
.st-section{margin-bottom:1.5rem}
.st-section-title{font-size:0.75rem;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.75rem;padding-bottom:0.4rem;border-bottom:1px solid var(--border)}
.st-settings-grid{display:grid;gap:0.6rem}

/* Setting Item */
.st-item{display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0.8rem;border-radius:8px;transition:background 0.15s;gap:1rem}
.st-item:hover{background:rgba(108,99,255,0.03)}
.st-label{font-size:0.82rem;color:var(--text);white-space:nowrap;min-width:0;flex-shrink:0}

/* Toggle */
.st-toggle-wrap{position:relative;flex-shrink:0}
.st-toggle{opacity:0;position:absolute;width:0;height:0}
.st-toggle-track{display:block;width:38px;height:20px;border-radius:10px;background:var(--surface);border:1px solid var(--border);cursor:pointer;transition:all 0.25s cubic-bezier(0.16,1,0.3,1);position:relative}
.st-toggle-track::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:var(--text-3);top:2px;left:2px;transition:all 0.25s cubic-bezier(0.16,1,0.3,1)}
.st-toggle:checked+.st-toggle-track{background:var(--accent);border-color:var(--accent)}
.st-toggle:checked+.st-toggle-track::after{transform:translateX(18px);background:#fff}

/* Select */
.st-select{padding:0.4rem 0.7rem;border-radius:6px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:0.78rem;font-family:inherit;outline:none;cursor:pointer;min-width:120px;transition:border-color 0.2s}
.st-select:focus{border-color:var(--accent)}
.st-select option{background:var(--bg);color:var(--text)}

/* Range */
.st-range-wrap{display:flex;align-items:center;gap:0.6rem;min-width:180px;flex-shrink:0}
.st-range{flex:1;-webkit-appearance:none;appearance:none;height:4px;border-radius:2px;background:var(--border);outline:none;cursor:pointer}
.st-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg);box-shadow:0 0 6px rgba(108,99,255,0.3)}
.st-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:2px solid var(--bg)}
.st-range-val{font-size:0.72rem;color:var(--text-2);font-family:var(--font-mono);min-width:36px;text-align:right}

/* Color */
.st-color-wrap{display:flex;align-items:center;gap:0.5rem;flex-shrink:0}
.st-color{width:28px;height:28px;border:none;border-radius:6px;cursor:pointer;background:none;padding:0}
.st-color::-webkit-color-swatch-wrapper{padding:0}
.st-color::-webkit-color-swatch{border:1px solid var(--border);border-radius:5px}
.st-color-val{font-size:0.72rem;color:var(--text-3);font-family:var(--font-mono)}

/* Text */
.st-text{padding:0.4rem 0.7rem;border-radius:6px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:0.78rem;font-family:inherit;outline:none;width:200px;transition:border-color 0.2s}
.st-text:focus{border-color:var(--accent)}

/* Textarea */
.st-textarea{padding:0.5rem 0.7rem;border-radius:6px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:0.75rem;font-family:var(--font-mono);outline:none;width:100%;resize:vertical;min-height:60px;transition:border-color 0.2s}
.st-textarea:focus{border-color:var(--accent)}

/* Mobile */
@media(max-width:768px){
  .st-layout{flex-direction:column}
  .st-sidebar{width:100%;height:auto;position:static;border-right:none;border-bottom:1px solid var(--border);display:flex;overflow-x:auto;overflow-y:hidden;padding:0.5rem;gap:0.25rem}
  .st-nav-item{border-left:none;border-bottom:2px solid transparent;padding:0.5rem 0.8rem;white-space:nowrap}
  .st-nav-item.active{border-bottom-color:var(--accent);border-left-color:transparent}
  .st-main{padding:1rem}
  .st-item{flex-direction:column;align-items:flex-start;gap:0.4rem}
  .st-text{width:100%}
  .st-range-wrap{min-width:0;width:100%}
  .st-header{padding:1.2rem 1rem}
  .st-title{font-size:1.5rem}
}