/* ── Satori Catalog v4.0 ──────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  --navy:    #0A1628;
  --gold:    #C9A84C;
  --gold-lt: #e8c97a;
  --cream:   #FDF8F0;
  --white:   #ffffff;
  --teal:    #0D9488;
  --g1:      #f5f3ee;
  --g2:      #e8e3d8;
  --g3:      #b8b2a4;
  --g4:      #6b6560;
  --g5:      #3a3530;
  --shadow:  0 2px 16px rgba(10,22,40,0.09);
  --shadow-lg: 0 12px 48px rgba(10,22,40,0.20);
  --radius:  10px;
  --radius-lg: 16px;
}

/* ── Base ── */
.sc-wrap * { box-sizing: border-box; }
.sc-wrap { font-family: 'DM Sans', sans-serif; color: var(--navy); background: var(--cream); }

/* ── Login ── */
.sc-login-wrap {
  display: flex; justify-content: center; align-items: center;
  min-height: 60vh; padding: 40px 20px; background: var(--cream);
}
.sc-login-box {
  background: var(--white); border: 1px solid var(--g2);
  border-radius: var(--radius-lg); padding: 52px 44px;
  width: 100%; max-width: 400px; box-shadow: var(--shadow-lg); text-align: center;
}
.sc-login-ornament { display:block; font-size:1.8rem; color:var(--gold); margin-bottom:12px; letter-spacing:4px; }
.sc-login-box h2 { font-family:'Playfair Display',serif; font-size:1.9rem; color:var(--navy); margin:0 0 6px; }
.sc-login-box > p { color:var(--g4); font-size:.85rem; margin-bottom:28px; }
.sc-error { background:#fef2f2; border:1px solid #fecaca; color:#b91c1c; padding:10px 14px; border-radius:8px; font-size:.85rem; margin-bottom:16px; }
.sc-login-form .sc-field { text-align:left; margin-bottom:16px; }
.sc-login-form .sc-field label { display:block; font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--g4); margin-bottom:6px; }
.sc-login-form input[type=text],
.sc-login-form input[type=password] {
  width:100%; padding:11px 14px; border:1.5px solid var(--g2);
  border-radius:8px; font-size:.95rem; font-family:'DM Sans',sans-serif;
  transition:border-color .2s;
}
.sc-login-form input:focus { outline:none; border-color:var(--gold); }
.sc-btn-login {
  width:100%; padding:13px; background:var(--navy); color:var(--white);
  border:none; border-radius:8px; font-size:.95rem; font-weight:600;
  font-family:'DM Sans',sans-serif; cursor:pointer; transition:background .2s, transform .1s;
  margin-top:4px;
}
.sc-btn-login:hover { background:var(--g5); }
.sc-btn-login:active { transform:scale(.98); }
.sc-login-footer { font-size:.82rem; color:var(--g4); margin-top:20px; }
.sc-login-footer a { color:var(--teal); }

/* ── Top Bar ── */
.sc-topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 0; margin-bottom:4px; border-bottom:1px solid var(--g2);
}
.sc-topbar-left { display:flex; align-items:center; gap:12px; font-size:.88rem; }
.sc-welcome strong { color:var(--navy); }
.sc-pipe { color:var(--g3); }
.sc-count-badge { color:var(--g4); }
.sc-logout { font-size:.82rem; color:var(--g4); text-decoration:none; border:1px solid var(--g2); padding:5px 12px; border-radius:20px; transition:all .2s; }
.sc-logout:hover { border-color:var(--navy); color:var(--navy); }

/* ── Controls ── */
.sc-controls {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:16px 0 12px;
}
.sc-search-wrap {
  position:relative; flex:1; min-width:200px;
}
.sc-search-wrap svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--g3); pointer-events:none; }
.sc-search {
  width:100%; padding:9px 12px 9px 36px; border:1.5px solid var(--g2);
  border-radius:8px; font-size:.9rem; font-family:'DM Sans',sans-serif; background:var(--white);
  transition:border-color .2s;
}
.sc-search:focus { outline:none; border-color:var(--gold); }
.sc-select {
  padding:9px 14px; border:1.5px solid var(--g2); border-radius:8px;
  font-size:.88rem; font-family:'DM Sans',sans-serif; background:var(--white); cursor:pointer;
  transition:border-color .2s;
}
.sc-select:focus { outline:none; border-color:var(--gold); }
.sc-results { font-size:.82rem; color:var(--g4); margin-left:auto; white-space:nowrap; }

/* ── Tabs ── */
.sc-tabs { display:flex; gap:6px; margin-bottom:20px; flex-wrap:wrap; }
.sc-tab {
  padding:7px 16px; border:1.5px solid var(--g2); border-radius:20px;
  font-size:.85rem; font-family:'DM Sans',sans-serif; background:var(--white);
  cursor:pointer; color:var(--g4); transition:all .2s;
}
.sc-tab span { font-size:.78rem; background:var(--g1); padding:1px 7px; border-radius:10px; margin-left:5px; }
.sc-tab:hover { border-color:var(--g3); color:var(--navy); }
.sc-tab.active { background:var(--navy); color:var(--white); border-color:var(--navy); }
.sc-tab.active span { background:rgba(255,255,255,.18); color:var(--white); }

/* ── Grid ── */
.sc-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:16px;
}
.sc-card {
  background:var(--white); border:1.5px solid var(--g2); border-radius:var(--radius);
  overflow:hidden; cursor:pointer; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.sc-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--gold); }
.sc-card-img { aspect-ratio:1; overflow:hidden; background:var(--g1); }
.sc-card-img img { width:100%; height:100%; object-fit:contain; padding:8px; transition:transform .3s; }
.sc-card:hover .sc-card-img img { transform:scale(1.04); }
.sc-no-img { height:100%; display:flex; align-items:center; justify-content:center; color:var(--g3); font-size:2rem; }
.sc-card-body { padding:12px 12px 14px; }
.sc-card-num { font-size:.75rem; font-weight:600; letter-spacing:.08em; color:var(--gold); text-transform:uppercase; margin-bottom:3px; }
.sc-card-name { font-family:'Playfair Display',serif; font-size:.92rem; color:var(--navy); margin-bottom:6px; line-height:1.3; }
.sc-card-meta { font-size:.75rem; color:var(--g3); margin-bottom:6px; }
.sc-card-tags { display:flex; gap:5px; flex-wrap:wrap; }
.sc-tag { font-size:.7rem; padding:2px 8px; border-radius:10px; }
.sc-tag-cat { background:var(--g1); color:var(--g4); }
.sc-tag-colors { background:#ecfdf5; color:#065f46; }

/* ── Empty State ── */
.sc-empty { text-align:center; padding:80px 20px; color:var(--g4); }
.sc-empty-icon { font-size:3rem; color:var(--g2); margin-bottom:16px; }
.sc-empty h3 { font-family:'Playfair Display',serif; font-size:1.4rem; color:var(--navy); margin-bottom:8px; }

/* ── Lightbox ── */
.sc-lb {
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.sc-lb.open { opacity:1; pointer-events:all; }
.sc-lb-overlay { position:absolute; inset:0; background:rgba(10,22,40,.82); backdrop-filter:blur(4px); }
.sc-lb-shell {
  position:relative; background:var(--white);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  width:96vw; max-width:1100px; height:88vh;
  overflow:hidden; display:flex; flex-direction:column;
  transform:translateY(16px) scale(.97); transition:transform .25s;
}
.sc-lb.open .sc-lb-shell { transform:none; }

.sc-lb-close {
  position:absolute; top:14px; right:16px; z-index:10;
  background:var(--g1); border:none; width:32px; height:32px; border-radius:50%;
  font-size:1rem; cursor:pointer; color:var(--g4); transition:background .2s, color .2s;
}
.sc-lb-close:hover { background:var(--navy); color:white; }

.sc-lb-nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  background:white; border:1.5px solid var(--g2); border-radius:50%;
  width:40px; height:40px; font-size:1.3rem; cursor:pointer; color:var(--navy);
  display:flex; align-items:center; justify-content:center;
  transition:all .2s; box-shadow:var(--shadow);
}
.sc-lb-prev { left:14px; }
.sc-lb-next { right:14px; }
.sc-lb-nav:hover { background:var(--navy); color:white; border-color:var(--navy); }
.sc-lb-nav:disabled { opacity:.3; pointer-events:none; }

.sc-lb-inner {
  display:grid; grid-template-columns:1fr 420px;
  overflow:hidden; flex:1; min-height:0;
}

/* Left panel */
.sc-lb-left {
  background:var(--g1); padding:28px;
  display:flex; flex-direction:column; align-items:center;
  border-right:1px solid var(--g2);
  overflow:hidden;
}
.sc-lb-img-wrap {
  position:relative; flex:1; width:100%; display:flex; align-items:center; justify-content:center;
  min-height:0;
}
.sc-lb-canvas {
  max-width:100%; max-height:100%; object-fit:contain;
  border-radius:8px; box-shadow:var(--shadow);
  display:none;
}
.sc-lb-img {
  max-width:100%; max-height:340px; object-fit:contain;
  border-radius:8px; box-shadow:var(--shadow);
}
.sc-lb-spinner {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(245,243,238,.8); border-radius:8px;
  display:none;
}
.sc-spinner-ring {
  width:36px; height:36px; border:3px solid var(--g2);
  border-top-color:var(--gold); border-radius:50%;
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

.sc-lb-img-actions {
  display:flex; gap:8px; margin-top:16px;
}
.sc-action-btn {
  padding:7px 16px; background:var(--white); border:1.5px solid var(--g2);
  border-radius:8px; font-size:.82rem; font-family:'DM Sans',sans-serif;
  cursor:pointer; color:var(--g4); transition:all .2s;
}
.sc-action-btn:hover { border-color:var(--navy); color:var(--navy); }
.sc-action-dl { border-color:var(--teal); color:var(--teal); }
.sc-action-dl:hover { background:var(--teal); color:white; }

/* Right panel */
.sc-lb-right {
  overflow-y:auto; padding:24px 22px;
  display:flex; flex-direction:column; gap:16px;
}
.sc-lb-header { border-bottom:1px solid var(--g2); padding-bottom:14px; }
.sc-lb-num { font-size:.78rem; font-weight:600; letter-spacing:.1em; color:var(--gold); text-transform:uppercase; margin-bottom:6px; }
.sc-lb-title { font-family:'Playfair Display',serif; font-size:1.3rem; color:var(--navy); line-height:1.3; }

.sc-lb-details { display:flex; flex-direction:column; gap:7px; }
.sc-lb-detail { display:flex; justify-content:space-between; align-items:baseline; font-size:.86rem; gap:12px; }
.sc-lb-label { color:var(--g4); font-size:.76rem; letter-spacing:.04em; text-transform:uppercase; flex-shrink:0; }
.sc-lb-val { color:var(--navy); text-align:right; }

/* ── Color Customizer Panel ── */
.sc-cp {
  background:var(--g1); border-radius:var(--radius); padding:16px;
  border:1px solid var(--g2); position:relative;
  flex:1; display:flex; flex-direction:column; min-height:500px;
  overflow:hidden;
}
.sc-cp-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.sc-cp-title { font-size:.82rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--navy); }
.sc-cp-hint { font-size:.75rem; color:var(--g4); }

.sc-cp-loading { display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--g4); padding:6px 0; }
.sc-spinner-sm {
  width:16px; height:16px; border:2px solid var(--g2); border-top-color:var(--gold);
  border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0;
}

/* Color Slots */
.sc-cp-slots { display:flex; flex-wrap:wrap; gap:8px; overflow-y:auto; flex:1; align-content:flex-start; padding-bottom:4px; }
.sc-slot {
  display:flex; align-items:center; gap:8px; padding:7px 10px;
  background:white; border:1.5px solid var(--g2); border-radius:8px;
  cursor:pointer; transition:all .2s; min-width:120px;
}
.sc-slot:hover { border-color:var(--gold); box-shadow:0 2px 8px rgba(201,168,76,.2); }
.sc-slot.active { border-color:var(--gold); background:#fffbf0; }
.sc-slot-swatch {
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  border:2px solid rgba(0,0,0,.12); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5);
}
.sc-slot-info { flex:1; min-width:0; }
.sc-slot-num { font-size:.68rem; color:var(--g4); }
.sc-slot-name { font-size:.78rem; color:var(--navy); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Thread Picker — overlays the color customizer panel */
.sc-thread-picker {
  position:absolute; inset:0; background:white; border-radius:var(--radius);
  border:2px solid var(--gold); box-shadow:var(--shadow-lg); z-index:10;
  display:flex; flex-direction:column; overflow:hidden;
}
.sc-tp-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-bottom:1px solid var(--g2); background:var(--g1);
}
.sc-tp-header span { font-size:.82rem; font-weight:600; color:var(--navy); }
.sc-tp-close { background:none; border:none; cursor:pointer; color:var(--g4); font-size:1rem; padding:0; transition:color .2s; }
.sc-tp-close:hover { color:var(--navy); }
.sc-tp-search-wrap { padding:10px 12px; border-bottom:1px solid var(--g2); }
.sc-tp-search {
  width:100%; padding:7px 12px; border:1.5px solid var(--g2); border-radius:6px;
  font-size:.85rem; font-family:'DM Sans',sans-serif;
}
.sc-tp-search:focus { outline:none; border-color:var(--gold); }
.sc-tp-groups { flex:1; overflow-y:auto; padding:8px; min-height:0; }
.sc-tp-group-label { font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--g4); padding:6px 4px 4px; }
.sc-tp-swatches { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:8px; }
.sc-thread-swatch {
  width:36px; height:36px; border-radius:50%; cursor:pointer;
  border:2px solid rgba(0,0,0,.1); transition:transform .15s, box-shadow .15s;
  position:relative;
}
.sc-thread-swatch:hover { transform:scale(1.2); box-shadow:0 2px 8px rgba(0,0,0,.25); z-index:1; }
.sc-thread-swatch[title]:hover::after {
  content:attr(title); position:absolute; bottom:calc(100% + 4px); left:50%;
  transform:translateX(-50%); background:var(--navy); color:white;
  font-size:.68rem; padding:3px 7px; border-radius:4px; white-space:nowrap;
  pointer-events:none; font-family:'DM Sans',sans-serif;
}

/* ── Responsive ── */
@media (max-width: 700px) {
  .sc-lb-inner { grid-template-columns:1fr; }
  .sc-lb-left { max-height:50vh; }
  .sc-lb-right { max-height:50vh; }
  .sc-grid { grid-template-columns:repeat(auto-fill, minmax(140px,1fr)); }
}