.palette-wrapper{max-width:1000px}.feature-card{border:none;border-radius:12px;box-shadow:0 2px 12px #00000014;overflow:hidden}.feature-card .card-header{background:var(--bi-surface-2);border-bottom:1px solid var(--bi-border);font-weight:600;padding:12px 16px}.color-input-wrapper{display:flex;gap:8px}.color-input-wrapper .form-control-color{width:50px;height:38px;padding:2px;border-radius:6px;cursor:pointer}.color-input-wrapper .form-control:not(.form-control-color){flex:1}.quick-colors{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.quick-label{font-size:13px;color:var(--bi-text-muted);font-weight:500}.quick-color-list{display:flex;flex-wrap:wrap;gap:6px}.quick-color-item{width:28px;height:28px;border-radius:6px;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:transform .2s,box-shadow .2s}.quick-color-item:hover{transform:scale(1.1);box-shadow:0 4px 8px #00000026}.main-palette-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.palette-card{aspect-ratio:1;border-radius:12px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden;box-shadow:0 2px 8px #0000001a}.palette-card:hover{transform:translateY(-4px);box-shadow:0 8px 20px #00000026;z-index:10}.palette-card .percent-label{font-size:11px;font-weight:600;opacity:.9;margin-bottom:4px}.palette-card .hex-label{font-size:10px;font-family:Consolas,monospace;opacity:.85}.shade-palette-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px}.shade-item{flex:1;min-width:60px;height:80px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 6px #0000001a}.shade-item:hover{transform:translateY(-3px);box-shadow:0 6px 15px #00000026}.shade-item .shade-percent{font-size:11px;font-weight:600}.shade-item .shade-hex{font-size:9px;font-family:Consolas,monospace;margin-top:2px}.complementary-row,.analogous-row,.triadic-row{display:flex;gap:10px;flex-wrap:wrap}.scheme-item{flex:1;min-width:80px;height:70px;border-radius:10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;box-shadow:0 2px 6px #0000001a}.scheme-item:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 6px 15px #00000026}.scheme-item .scheme-name{font-size:11px;font-weight:600;margin-bottom:2px}.scheme-item .scheme-hex{font-size:10px;font-family:Consolas,monospace}.history-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px}.history-item{display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .2s}.history-item:hover{transform:translateY(-2px)}.history-color{width:100%;aspect-ratio:1;border-radius:8px;box-shadow:0 2px 6px #0000001a}.history-hex{font-size:10px;font-family:Consolas,monospace;color:var(--bi-text-muted);margin-top:4px}@media (max-width: 768px){.main-palette-grid{grid-template-columns:repeat(4,1fr);gap:8px}.palette-card{padding:8px}.palette-card .percent-label{font-size:10px}.palette-card .hex-label{font-size:9px}.complementary-row,.analogous-row,.triadic-row{gap:8px}.scheme-item{min-width:70px;height:60px}}@media (max-width: 576px){.main-palette-grid{grid-template-columns:repeat(3,1fr)}}.btn-group .btn.active{background-color:#6c757d;color:#fff;border-color:#6c757d}html[data-theme=dark] .feature-card{border:1px solid var(--bi-border);box-shadow:none}