.css-light-dark-generator{min-height:auto;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:2rem;color:#fff}.generator-header{text-align:center;margin-bottom:2rem}.generator-header h1{font-size:2.5rem;margin-bottom:.5rem;background:linear-gradient(135deg,#f39c12,#e74c3c,#9b59b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.generator-header p{color:#a0a0a0;font-size:1.1rem}.generator-content{display:grid;grid-template-columns:420px 1fr;gap:var(--tool-content-gap, 2rem);max-width:var(--tool-container-max-width, 1600px);margin:0 auto}.config-panel{background:#ffffff14;border-radius:12px;padding:1.5rem;border:2px solid rgba(255,255,255,.25);max-height:none;overflow-y:auto}.config-section{margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}.config-section:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.config-section h3{font-size:1.15rem;font-weight:700;color:var(--gray-900);margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid var(--primary);letter-spacing:.03em}.presets-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}.preset-btn{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border:2px solid rgba(255,255,255,.35);border-radius:8px;background:#ffffff14;cursor:pointer;transition:all .2s;color:#fff}.preset-btn:hover{background:#ffffff26;border-color:#f39c12}.preset-preview{display:flex;width:30px;height:20px;border:2px solid #d1d5db;border-radius:4px;overflow:hidden}.preset-light,.preset-dark{flex:1}.preset-name{font-size:.8rem}.color-pairs-list{display:flex;flex-direction:column;gap:1rem}.color-pair-item{background:#ffffff14;border-radius:8px;padding:1rem;border:2px solid rgba(255,255,255,.25)}.pair-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.pair-name-input{background:#ffffff26;border:2px solid rgba(255,255,255,.35);border-radius:4px;padding:.4rem .6rem;color:#fff;font-size:.875rem;flex:1;margin-right:.5rem}.remove-pair-btn{background:none;border:none;color:#e74c3c;font-size:1.3rem;cursor:pointer;padding:0 .25rem;line-height:1}.property-select{width:100%;padding:.5rem;border:2px solid rgba(255,255,255,.35);border-radius:6px;background:#ffffff26;color:#fff;font-size:.85rem;margin-bottom:.75rem}.property-select option{background:#1a1a2e;color:#fff}.pair-colors{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.pair-color label{display:block;font-size:.75rem;color:#888;margin-bottom:.25rem}.pair-color.light label{color:#f39c12}.pair-color.dark label{color:#9b59b6}.color-input-row{display:flex;gap:.4rem}.color-input-row input[type=color]{width:36px;height:32px;border:none;border-radius:4px;cursor:pointer;padding:0}.color-text-input{flex:1;padding:.4rem;border:2px solid rgba(255,255,255,.35);border-radius:4px;background:#ffffff26;color:#fff;font-family:monospace;font-size:.8rem}.add-pair-btn{width:100%;padding:.75rem;background:#f39c1233;border:1px dashed #f39c12;border-radius:8px;color:#f39c12;cursor:pointer;transition:all .2s;margin-top:.5rem}.add-pair-btn:hover{background:#f39c124d}.save-btn{width:100%;padding:.75rem;background:linear-gradient(135deg,#f39c12,#e74c3c);border:none;border-radius:8px;color:#fff;font-weight:500;cursor:pointer;transition:transform .2s}.save-btn:hover{transform:translateY(-2px)}.saved-configs{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}.saved-config-item{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;background:#ffffff26;border-radius:6px}.saved-config-name{cursor:pointer;color:#f39c12}.saved-config-name:hover{text-decoration:underline}.delete-btn{background:none;border:none;color:#e74c3c;font-size:1.2rem;cursor:pointer;padding:0 .25rem}.preview-panel{display:flex;flex-direction:column;gap:1.5rem}.preview-section,.code-output{background:#ffffff14;border-radius:12px;padding:1.5rem;border:2px solid rgba(255,255,255,.25)}.preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.preview-header h3{font-size:1rem;color:#f39c12;text-transform:uppercase;letter-spacing:.5px;margin:0}.mode-toggle{display:flex;gap:.5rem}.mode-btn{padding:.5rem 1rem;border:2px solid rgba(255,255,255,.35);border-radius:6px;background:#ffffff14;color:#ccc;cursor:pointer;transition:all .2s}.mode-btn.active{background:linear-gradient(135deg,#f39c12,#e74c3c);border-color:transparent;color:#fff}.preview-container{border:2px solid #d1d5db;border-radius:12px;padding:1.5rem;background:#f9fafb;transition:all .3s ease;box-shadow:0 1px 3px #0000001a}.preview-card{border:2px solid #d1d5db;border-radius:8px;padding:1.5rem;background:#f9fafb;margin-bottom:1.5rem;box-shadow:0 1px 3px #0000001a}.preview-card h4{margin:0 0 .75rem;font-size:1.1rem}.preview-card p{margin:0 0 1rem;font-size:.875rem;line-height:1.6;opacity:.8}.preview-card button{border:none;padding:.6rem 1.2rem;border-radius:6px;color:#fff;font-weight:500;cursor:pointer}.color-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem}.swatch-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background:#8080801a;border-radius:6px}.swatch-color{width:24px;height:24px;border-radius:4px;border:1px solid rgba(128,128,128,.3)}.swatch-name{font-size:.75rem;flex:1}.swatch-value{font-size:.7rem;opacity:.7;font-family:monospace}.side-by-side{margin-top:1.5rem}.side-by-side h4{font-size:.875rem;color:#ccc;margin-bottom:.75rem}.comparison-row{display:flex;border-radius:8px;overflow:hidden}.comparison-half{flex:1;padding:1.5rem;text-align:center}.mode-label{display:block;font-size:.75rem;opacity:.7;margin-bottom:.5rem}.sample-text{font-size:1.1rem;font-weight:500}.output-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.output-header h3{font-size:1rem;color:#f39c12;text-transform:uppercase;letter-spacing:.5px;margin:0}.copy-btn{padding:.5rem 1rem;background:linear-gradient(135deg,#f39c12,#e74c3c);border:none;border-radius:6px;color:#fff;font-weight:500;cursor:pointer;transition:transform .2s}.copy-btn:hover{transform:translateY(-2px)}.css-code{background:#0000004d;padding:1rem;border-radius:8px;overflow-x:auto;font-family:Fira Code,monospace;font-size:.85rem;line-height:1.6;max-height:500px;overflow-y:auto}.reference-section{max-width:var(--tool-container-max-width, 1600px);margin:3rem auto 0}.reference-section h2{font-size:1.5rem;margin-bottom:1.5rem;color:#f39c12}.reference-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}.reference-card{background:#ffffff14;border-radius:12px;padding:1.5rem;border:2px solid rgba(255,255,255,.25)}.reference-card h3{font-size:1rem;color:#e74c3c;margin-bottom:1rem}.reference-card pre{background:#0000004d;padding:1rem;border-radius:8px;overflow-x:auto;font-family:Fira Code,monospace;font-size:.8rem;line-height:1.6}.reference-card ul{list-style:none;padding:0;margin:0}.reference-card li{padding:.4rem 0;color:#ccc;border-bottom:1px solid rgba(255,255,255,.05)}.reference-card li:last-child{border-bottom:none}.reference-card li strong{color:#f39c12}.reference-card code{background:#f39c1233;padding:.15rem .4rem;border-radius:3px;font-family:Fira Code,monospace;font-size:.85em;color:#f39c12}.support-note{font-size:.8rem;color:#f39c12;margin-top:.5rem}@media (max-width: 1023px){.generator-content{grid-template-columns:1fr}.config-panel{max-height:none}}@media (max-width: 640px){.css-light-dark-generator{padding:1rem}.generator-header h1{font-size:1.75rem}.presets-grid,.pair-colors{grid-template-columns:1fr}.comparison-row{flex-direction:column}.reference-grid{grid-template-columns:1fr}}