.color-picker-workspace{
  border:1px solid rgba(37,99,235,.18);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(239,248,255,.92));
  box-shadow:0 18px 46px rgba(15,23,42,.08);
  overflow:hidden
}
.color-picker-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr)
}
.color-picker-panel{min-width:0}
.color-picker-source-panel{border-right:1px solid rgba(37,99,235,.13)}
.color-picker-panel-header{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:0 16px;
  border-bottom:1px solid rgba(37,99,235,.12);
  background:rgba(248,251,255,.9);
  color:#102a43;
  font-weight:850
}
.color-picker-panel-header>span{display:flex;align-items:center;gap:9px}
.color-picker-panel-header i{color:#0ea5e9}
.color-picker-panel button,
.color-picker-footer button{
  border:1px solid rgba(37,99,235,.18);
  border-radius:6px;
  background:#eef7ff;
  color:#1765d8;
  font-weight:800;
  cursor:pointer
}
.color-picker-panel button:disabled{opacity:.5;cursor:not-allowed}
.color-picker-panel-header button{padding:8px 11px}
.color-picker-drop{
  display:flex;
  min-height:150px;
  margin:16px;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(37,99,235,.38);
  border-radius:9px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(239,248,255,.78));
  text-align:center;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease
}
.color-picker-drop:hover,
.color-picker-drop.is-dragging{
  border-color:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.1);
  transform:translateY(-1px)
}
.color-picker-drop input{display:none}
.color-picker-drop>[data-color-drop-empty]{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:7px;
  color:#526b86
}
.color-picker-drop>[data-color-drop-empty] i{font-size:32px;color:#2563eb}
.color-picker-drop>[data-color-drop-empty] strong{font-size:17px;color:#102a43}
.color-picker-file-ready{
  width:100%;
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding:12px;
  text-align:left
}
.color-picker-file-ready[hidden],
.color-picker-toolbar[hidden],
.color-picker-stage[hidden],
.color-picker-recommendations[hidden],
.palette-export-actions[hidden],
.average-color-row[hidden]{display:none!important}
.color-picker-file-ready img{
  width:96px;
  height:82px;
  object-fit:contain;
  border:1px solid rgba(37,99,235,.14);
  border-radius:7px;
  background:repeating-conic-gradient(#edf2f7 0 25%,#fff 0 50%) 50%/18px 18px
}
.color-picker-file-ready strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#102a43
}
.color-picker-file-ready span{
  display:block;
  margin-top:5px;
  color:#526b86;
  font-size:12px;
  font-weight:750
}
.color-picker-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  align-items:end;
  gap:12px;
  margin:0 16px 14px;
  padding:12px;
  border:1px solid rgba(37,99,235,.13);
  border-radius:8px;
  background:rgba(255,255,255,.78)
}
.color-picker-zoom-control,
.color-picker-sample-control{display:flex;align-items:center;gap:8px;min-width:0}
.color-picker-zoom-control label,
.color-picker-sample-control label{font-size:12px;font-weight:850;color:#31526f}
.color-picker-zoom-control input[type=range]{min-width:100px;flex:1;accent-color:#2563eb}
.color-picker-zoom-control input[type=number]{
  width:66px;
  min-height:38px;
  border:1px solid rgba(37,99,235,.18);
  border-radius:6px;
  padding:6px 8px;
  background:#fff;
  color:#102a43;
  font-weight:800
}
.color-picker-sample-control select{
  min-height:38px;
  border:1px solid rgba(37,99,235,.18);
  border-radius:6px;
  padding:6px 9px;
  background:#fff;
  color:#102a43;
  font-weight:800
}
.color-picker-toolbar>button{min-height:38px;padding:8px 11px}
.color-picker-stage{
  position:relative;
  margin:0 16px 16px;
  min-height:410px;
  border:1px solid rgba(37,99,235,.15);
  border-radius:9px;
  background:#0f172a;
  overflow:hidden
}
.color-picker-canvas-scroll{
  width:100%;
  height:100%;
  min-height:410px;
  max-height:650px;
  overflow:auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px
}
.color-picker-canvas-scroll canvas{
  display:block;
  max-width:none;
  cursor:crosshair;
  image-rendering:auto;
  box-shadow:0 10px 32px rgba(0,0,0,.32);
  background:repeating-conic-gradient(#cbd5e1 0 25%,#fff 0 50%) 50%/20px 20px
}
.color-picker-magnifier{
  position:absolute;
  z-index:4;
  right:14px;
  top:14px;
  width:148px;
  padding:7px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:8px;
  background:rgba(15,23,42,.92);
  color:#fff;
  box-shadow:0 14px 34px rgba(0,0,0,.28);
  pointer-events:none
}
.color-picker-magnifier canvas{
  display:block;
  width:132px;
  height:132px;
  border-radius:5px;
  background:#fff;
  image-rendering:pixelated
}
.color-picker-magnifier span{
  display:block;
  margin-top:6px;
  text-align:center;
  font-size:11px;
  font-weight:800
}
.color-picker-empty-preview{
  min-height:410px;
  margin:0 16px 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  border:1px dashed rgba(37,99,235,.22);
  border-radius:9px;
  color:#526b86;
  text-align:center
}
.color-picker-empty-preview i{font-size:44px;color:#2563eb}
.color-picker-empty-preview b{color:#102a43}
.color-picker-empty-preview span{font-size:13px;font-weight:700}
.color-picker-result-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px
}
.picked-color-card{
  display:grid;
  grid-template-columns:100px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:14px;
  border:1px solid rgba(37,99,235,.14);
  border-radius:9px;
  background:rgba(255,255,255,.82)
}
.picked-color-swatch{
  width:100px;
  height:100px;
  border:1px solid rgba(15,23,42,.16);
  border-radius:8px;
  background:#000
}
.picked-color-summary span,
.picked-color-summary small{display:block;color:#526b86;font-weight:750}
.picked-color-summary strong{
  display:block;
  margin:5px 0;
  color:#102a43;
  font-size:28px;
  letter-spacing:.02em
}
.picked-color-summary small{font-size:12px}
.color-value-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px
}
.color-value-grid button{
  min-width:0;
  min-height:58px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:10px;
  background:rgba(255,255,255,.84);
  text-align:left
}
.color-value-grid button span{font-size:11px;color:#526b86}
.color-value-grid button b{
  overflow:hidden;
  color:#102a43;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap
}
.color-section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px;
  color:#102a43;
  font-weight:850
}
.color-section-heading>button{padding:6px 9px}
.picked-history-section,
.palette-analysis-section{
  padding:13px;
  border:1px solid rgba(37,99,235,.13);
  border-radius:9px;
  background:rgba(255,255,255,.72)
}
.picked-history{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.picked-history p{
  margin:0;
  color:#64748b;
  font-size:12px;
  font-weight:700
}
.picked-history button{
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  background:#fff;
  color:#102a43
}
.picked-history button i{
  width:18px;
  height:18px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:4px
}
.palette-count-control{display:flex;align-items:center;gap:7px}
.palette-count-control label{font-size:11px;color:#526b86}
.palette-count-control input[type=range]{width:82px;accent-color:#2563eb}
.palette-count-control input[type=number]{
  width:54px;
  min-height:34px;
  border:1px solid rgba(37,99,235,.18);
  border-radius:6px;
  padding:5px 7px;
  background:#fff;
  color:#102a43;
  font-weight:800
}
.palette-analyze-button{
  width:100%;
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:9px 12px;
  background:linear-gradient(135deg,#0ea5e9,#2563eb)!important;
  color:#fff!important
}
.palette-analysis-status{
  margin-top:9px;
  color:#526b86;
  font-size:12px;
  font-weight:750
}
.palette-analysis-status.is-error{color:#b42318}
.average-color-row{
  margin-top:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:#31526f;
  font-size:12px;
  font-weight:800
}
.average-color-row button{
  min-width:130px;
  min-height:36px;
  padding:7px 10px;
  text-align:center
}
.dominant-palette{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:11px
}
.dominant-palette button{
  min-width:0;
  padding:0;
  overflow:hidden;
  background:#fff;
  color:#102a43
}
.dominant-palette button i{
  display:block;
  height:54px;
  border-bottom:1px solid rgba(15,23,42,.1)
}
.dominant-palette button b,
.dominant-palette button span{
  display:block;
  padding:0 6px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.dominant-palette button b{margin-top:6px;font-size:11px}
.dominant-palette button span{margin:3px 0 7px;color:#64748b;font-size:10px}
.palette-export-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:11px
}
.palette-export-actions button{padding:8px 10px}
.color-picker-recommendations{
  padding:13px;
  border:1px solid rgba(14,165,233,.2);
  border-radius:9px;
  background:linear-gradient(135deg,rgba(236,254,255,.88),rgba(239,246,255,.9))
}
.color-picker-recommendations>div:first-child{
  display:flex;
  flex-direction:column;
  gap:4px;
  color:#31526f;
  font-size:12px
}
.color-picker-recommendations strong{color:#102a43}
.color-picker-recommendation-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px
}
.color-picker-recommendation-actions a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border:1px solid rgba(37,99,235,.18);
  border-radius:6px;
  background:#fff;
  color:#1765d8;
  font-size:12px;
  font-weight:850;
  text-decoration:none
}
.color-picker-recommendation-actions a.is-loading{opacity:.58;pointer-events:none}
.color-picker-footer{
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 16px;
  border-top:1px solid rgba(37,99,235,.13);
  background:rgba(255,255,255,.75);
  color:#45627f;
  font-weight:800
}
.color-picker-footer-note{font-size:12px;text-align:right}

body.theme-dark .color-picker-workspace{
  border-color:rgba(96,165,250,.22);
  background:linear-gradient(135deg,rgba(15,23,42,.97),rgba(17,24,39,.94));
  box-shadow:none
}
body.theme-dark .color-picker-source-panel,
body.theme-dark .color-picker-panel-header,
body.theme-dark .color-picker-footer{border-color:rgba(148,163,184,.17)}
body.theme-dark .color-picker-panel-header,
body.theme-dark .color-picker-footer{background:rgba(15,23,42,.74);color:#f8fafc}
body.theme-dark .color-picker-drop,
body.theme-dark .color-picker-toolbar,
body.theme-dark .picked-color-card,
body.theme-dark .picked-history-section,
body.theme-dark .palette-analysis-section,
body.theme-dark .color-picker-recommendations{
  background:rgba(15,23,42,.68);
  border-color:rgba(148,163,184,.2)
}
body.theme-dark .color-picker-drop>[data-color-drop-empty] strong,
body.theme-dark .color-picker-file-ready strong,
body.theme-dark .color-picker-empty-preview b,
body.theme-dark .picked-color-summary strong,
body.theme-dark .color-value-grid button b,
body.theme-dark .color-section-heading,
body.theme-dark .color-picker-recommendations strong{color:#f8fafc}
body.theme-dark .color-value-grid button,
body.theme-dark .picked-history button,
body.theme-dark .dominant-palette button,
body.theme-dark .color-picker-recommendation-actions a,
body.theme-dark .average-color-row button,
body.theme-dark .color-picker-zoom-control input[type=number],
body.theme-dark .color-picker-sample-control select,
body.theme-dark .palette-count-control input[type=number]{
  background:#0f172a;
  border-color:rgba(148,163,184,.2);
  color:#f8fafc
}
body.theme-dark .picked-color-summary span,
body.theme-dark .picked-color-summary small,
body.theme-dark .color-value-grid button span,
body.theme-dark .color-picker-file-ready span,
body.theme-dark .palette-analysis-status,
body.theme-dark .average-color-row,
body.theme-dark .color-picker-recommendations>div:first-child{color:#cbd5e1}

@media(max-width:1100px){
  .color-picker-grid{grid-template-columns:1fr}
  .color-picker-source-panel{border-right:0;border-bottom:1px solid rgba(37,99,235,.13)}
}
@media(max-width:680px){
  .color-picker-drop{min-height:130px;margin:12px}
  .color-picker-toolbar{grid-template-columns:1fr;margin:0 12px 12px}
  .color-picker-zoom-control{display:grid;grid-template-columns:auto minmax(0,1fr) 62px auto}
  .color-picker-stage{margin:0 12px 12px;min-height:330px}
  .color-picker-canvas-scroll{min-height:330px;padding:10px}
  .color-picker-empty-preview{min-height:300px;margin:0 12px 12px}
  .picked-color-card{grid-template-columns:76px minmax(0,1fr)}
  .picked-color-swatch{width:76px;height:76px}
  .picked-color-summary strong{font-size:22px}
  .color-value-grid{grid-template-columns:1fr}
  .dominant-palette{grid-template-columns:repeat(2,minmax(0,1fr))}
  .color-section-heading{align-items:flex-start;flex-direction:column}
  .palette-count-control{width:100%}
  .palette-count-control input[type=range]{flex:1}
  .color-picker-footer{align-items:flex-start;flex-direction:column}
  .color-picker-footer-note{text-align:left}
  .color-picker-magnifier{width:116px}
  .color-picker-magnifier canvas{width:100px;height:100px}
}