/* ==========================================================
   PANEL ADMIN CSS — Capital Stone B2B
   Standalone • No framework dependency
   Accent: #8b6508 (gold)  |  Font: DM Sans
   ========================================================== */

/* --- RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1c1917; background: #f5f5f4; line-height: 1.5; -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
ul { list-style: none; }

/* --- CSS VARIABLES --- */
:root {
  --accent-50: #fdf8eb;  --accent-100: #f9eabd;  --accent-200: #f0d48a;
  --accent-300: #d4a94a;  --accent-400: #b8892a;  --accent-500: #8b6508;
  --accent-600: #735306;  --accent-700: #5a4105;  --accent-800: #422f04;
  --accent-900: #2a1e02;
  --stone-50: #fafaf9;   --stone-100: #f5f5f4;  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;  --stone-400: #a8a29e;  --stone-500: #78716c;
  --stone-600: #57534e;  --stone-700: #44403c;  --stone-800: #292524;
  --stone-900: #1c1917;  --stone-950: #0f0e0d;
  --sidebar-w: 272px;
  --navbar-h: 60px;
  --radius-sm: 6px;  --radius-md: 10px;  --radius-lg: 14px;  --radius-xl: 16px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);
  --transition: 0.2s ease;
}

/* --- LAYOUT --- */
.layout { display: flex; min-height: 100vh; }
.layout-main {
  flex: 1;
  margin-left: var(--sidebar-w);
  padding-top: var(--navbar-h);
  min-height: 100vh;
  transition: margin-left 0.3s ease;
}
@media (max-width: 1023px) {
  .layout-main { margin-left: 0; }
}

/* ===========================
   SIDEBAR
   =========================== */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: var(--stone-950);
  z-index: 100;
  display: flex; flex-direction: column;
  transition: transform 0.3s ease;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 99;
}
.sidebar-overlay.visible { display: block; }

/* Sidebar header */
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: var(--navbar-h);
  border-bottom: 1px solid rgba(255,255,255,0.06); flex-shrink: 0;
}
.sidebar-logo { display: flex; align-items: center; gap: 12px; }
.sidebar-logo-icon {
  width: 34px; height: 34px; border-radius: 9px;
  background: linear-gradient(135deg, #d4a94a, var(--accent-600));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(139,101,8,0.35);
}
.sidebar-logo-icon span { color: #fff; font-weight: 800; font-size: 13px; letter-spacing: -0.5px; }
.sidebar-logo-text { line-height: 1.2; }
.sidebar-logo-text .brand { color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -0.3px; }
.sidebar-logo-text .sub { color: var(--accent-300); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.sidebar-close-btn {
  display: none; background: none; border: none; color: var(--stone-500);
  cursor: pointer; padding: 6px; border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.sidebar-close-btn:hover { color: var(--stone-300); background: rgba(255,255,255,0.05); }
@media (max-width: 1023px) { .sidebar-close-btn { display: flex; } }

/* Sidebar nav */
.sidebar-nav {
  flex: 1; overflow-y: auto; padding: 20px 12px;
  scrollbar-width: thin; scrollbar-color: var(--stone-700) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--stone-700); border-radius: 9px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }

.sidebar-section { margin-bottom: 24px; }
.sidebar-section-label {
  padding: 0 12px; margin-bottom: 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--stone-600);
}
.sidebar-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 500; color: #9a9490;
  transition: all 0.15s ease; cursor: pointer;
}
.sidebar-link:hover { color: #e7e5e4; background: rgba(255,255,255,0.04); }
.sidebar-link.active {
  color: #fbbf24; background: rgba(251,191,36,0.07);
}
.sidebar-link.active svg { color: #f59e0b; stroke: #f59e0b; }
.sidebar-link svg {
  width: 18px; height: 18px; flex-shrink: 0; stroke-width: 1.8;
  fill: none; stroke: currentColor;
}

/* Sidebar footer */
.sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.sidebar-footer p { font-size: 11px; color: var(--stone-600); }
.sidebar-footer span { color: var(--accent-300); }

/* ===========================
   NAVBAR
   =========================== */
.navbar {
  position: fixed; top: 0; right: 0; left: var(--sidebar-w);
  height: var(--navbar-h);
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--stone-200);
  z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px;
  transition: left 0.3s ease;
}
@media (max-width: 1023px) { .navbar { left: 0; } }

.navbar-left { display: flex; align-items: center; gap: 12px; }
.navbar-burger {
  display: none; background: none; border: none; color: var(--stone-500);
  cursor: pointer; padding: 8px; border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.navbar-burger:hover { background: var(--stone-100); color: var(--stone-700); }
@media (max-width: 1023px) { .navbar-burger { display: flex; } }
.navbar-burger svg { width: 20px; height: 20px; }

.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.breadcrumb a { color: var(--stone-400); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--accent-500); }
.breadcrumb svg { width: 14px; height: 14px; color: var(--stone-300); stroke: currentColor; fill: none; }
.breadcrumb .current { color: var(--stone-700); font-weight: 600; }

.navbar-right { display: flex; align-items: center; gap: 6px; }
.navbar-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-md);
  background: none; border: none; color: var(--stone-400);
  cursor: pointer; transition: all var(--transition); position: relative;
}
.navbar-icon-btn:hover { background: var(--stone-100); color: var(--stone-600); }
.navbar-icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.navbar-dot {
  position: absolute; top: 7px; right: 7px; width: 7px; height: 7px;
  border-radius: 50%; background: #f59e0b; border: 2px solid #fff;
}

/* Profile dropdown */
.navbar-profile { position: relative; margin-left: 4px; }
.navbar-profile-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px 5px 5px; border-radius: var(--radius-md);
  background: none; border: none; cursor: pointer; transition: all var(--transition);
}
.navbar-profile-btn:hover { background: var(--stone-50); }
.navbar-profile-avatar {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, #d4a94a, var(--accent-700));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(139,101,8,0.25);
}
.navbar-profile-avatar span { color: #fff; font-weight: 700; font-size: 12px; }
.navbar-profile-name { font-size: 13.5px; font-weight: 600; color: var(--stone-600); }
.navbar-profile-chevron { width: 14px; height: 14px; fill: none; stroke: var(--stone-400); stroke-width: 2; }

.navbar-dropdown {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  width: 210px; background: #fff; border: 1px solid var(--stone-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 6px 0; z-index: 200;
}
.navbar-dropdown.open { display: block; }
.navbar-dropdown a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px; font-size: 13.5px; color: var(--stone-600);
  transition: all 0.1s;
}
.navbar-dropdown a:hover { background: var(--accent-50); color: var(--accent-700); }
.navbar-dropdown a svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.navbar-dropdown .divider { height: 1px; background: var(--stone-100); margin: 4px 0; }
.navbar-dropdown a.danger { color: #dc2626; }
.navbar-dropdown a.danger:hover { background: #fef2f2; }

/* ===========================
   PAGE CONTENT
   =========================== */
.page-wrap { max-width: 880px; margin: 0 auto; padding: 32px 24px 48px; }
@media (max-width: 640px) { .page-wrap { padding: 20px 16px 36px; } }

.page-title { font-size: 24px; font-weight: 700; color: var(--stone-900); letter-spacing: -0.5px; }
.page-subtitle { font-size: 14px; color: var(--stone-500); margin-top: 4px; }

/* ===========================
   CARDS
   =========================== */
.card {
  background: #fff; border: 1px solid var(--stone-200);
  border-radius: var(--radius-xl); padding: 28px 28px;
  box-shadow: var(--shadow-sm); margin-bottom: 20px;
}
@media (max-width: 640px) { .card { padding: 20px 16px; } }

.card-section-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px; margin-bottom: 22px;
  border-bottom: 1.5px solid var(--stone-100);
}
.card-section-icon {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.card-section-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.card-section-icon.gold   { background: var(--accent-50); color: var(--accent-500); }
.card-section-icon.blue   { background: #eff6ff; color: #3b82f6; }
.card-section-icon.purple { background: #faf5ff; color: #a855f7; }
.card-section-icon.pink   { background: #fdf2f8; color: #ec4899; }
.card-section-icon.green  { background: #ecfdf5; color: #10b981; }
.card-section-title { font-size: 15px; font-weight: 700; color: var(--stone-900); letter-spacing: -0.3px; }

/* ===========================
   FORM ELEMENTS
   =========================== */
.form-group { margin-bottom: 18px; }
.form-group:last-child { margin-bottom: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.form-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--stone-700); margin-bottom: 6px;
}
.form-label .hint { font-weight: 400; color: var(--stone-400); font-size: 12px; }

.form-input {
  width: 100%; padding: 10px 14px; font-size: 14px;
  color: var(--stone-900); background: #fff;
  border: 1.5px solid var(--stone-300); border-radius: var(--radius-md);
  outline: none; transition: all var(--transition);
}
.form-input::placeholder { color: var(--stone-400); }
.form-input:hover { border-color: var(--stone-400); }
.form-input:focus { border-color: var(--accent-400); box-shadow: 0 0 0 3px rgba(139,101,8,0.1); }
.form-input.is-error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.08); }
.form-input.is-success { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,0.08); }
.form-input[disabled] {
  background: var(--stone-50); color: var(--stone-400); cursor: not-allowed;
}

textarea.form-input { resize: vertical; min-height: 100px; }
select.form-input { cursor: pointer; }

.form-file-input {
  width: 100%; padding: 9px 12px; font-size: 13px;
  background: var(--stone-50); border: 1.5px dashed var(--stone-300);
  border-radius: var(--radius-md); cursor: pointer;
  transition: all var(--transition); color: var(--stone-600);
}
.form-file-input:hover { border-color: var(--accent-400); background: var(--accent-50); }
.form-file-input::-webkit-file-upload-button {
  background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
  color: #fff; border: none; padding: 6px 16px; border-radius: 6px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; margin-right: 12px; transition: all 0.15s;
}
.form-file-input::-webkit-file-upload-button:hover {
  background: linear-gradient(135deg, var(--accent-400), var(--accent-600));
}
.form-file-input::file-selector-button {
  background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
  color: #fff; border: none; padding: 6px 16px; border-radius: 6px;
  font-family: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; margin-right: 12px; transition: all 0.15s;
}
.form-file-input::file-selector-button:hover {
  background: linear-gradient(135deg, var(--accent-400), var(--accent-600));
}

.form-hint-msg {
  font-size: 13px; font-weight: 600; margin-top: 6px;
  display: flex; align-items: center; gap: 6px;
}
.form-hint-msg svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; }
.form-hint-msg.error { color: #dc2626; }
.form-hint-msg.success { color: #16a34a; }
.form-hint-msg.loading { color: var(--stone-400); }

/* ===========================
   BUTTONS
   =========================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-weight: 600; border: none; cursor: pointer;
  border-radius: var(--radius-md); transition: all var(--transition);
  text-decoration: none;
}
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.btn-primary {
  padding: 11px 28px; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, var(--accent-500), var(--accent-700));
  box-shadow: 0 2px 8px rgba(139,101,8,0.3);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-400), var(--accent-600));
  box-shadow: 0 4px 16px rgba(139,101,8,0.35); transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-secondary {
  padding: 10px 20px; font-size: 13.5px; color: var(--stone-600);
  background: var(--stone-50); border: 1.5px solid var(--stone-200);
}
.btn-secondary:hover { background: var(--stone-200); border-color: var(--stone-300); color: var(--stone-800); }

.btn-success {
  padding: 8px 16px; font-size: 13px; color: #fff; background: #16a34a;
}
.btn-success:hover { background: #15803d; }
.btn-success:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-sm { padding: 7px 14px; font-size: 12px; }

/* ===========================
   STATUS / ALERT
   =========================== */
.alert-success {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 20px; background: #f0fdf4; border: 1px solid #bbf7d0;
  border-radius: var(--radius-lg); color: #166534; font-size: 14px; font-weight: 500;
  margin-top: 16px;
}
.alert-success svg { width: 20px; height: 20px; flex-shrink: 0; stroke: #22c55e; fill: none; stroke-width: 2; }

/* ===========================
   SIZE-PRICE TABLE
   =========================== */
.price-table {
  width: 100%; max-width: 500px;
  border-collapse: separate; border-spacing: 0;
  border: 1.5px solid var(--stone-200); border-radius: var(--radius-md);
  overflow: hidden;
}
.price-table thead th {
  background: var(--stone-50); padding: 10px 14px;
  font-size: 11px; font-weight: 700; color: var(--stone-600);
  text-transform: uppercase; letter-spacing: 0.6px;
  border-bottom: 1.5px solid var(--stone-200); text-align: left;
}
.price-table td {
  padding: 8px 14px; border-bottom: 1px solid var(--stone-100); font-size: 14px;
}
.price-table tr:last-child td { border-bottom: none; }
.price-table .size-name { font-weight: 700; color: var(--stone-900); }
.price-table .form-input { padding: 7px 12px; }

.fill-all-row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; }
.fill-all-row .form-input { max-width: 150px; }

/* ===========================
   IMAGE PREVIEW / DROPZONE
   =========================== */
#imagePreviewZone {
  border: 2px dashed var(--stone-300); border-radius: var(--radius-lg);
  padding: 20px; min-height: 150px; background: var(--stone-50);
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start;
  align-content: flex-start;
  transition: all var(--transition); cursor: pointer; position: relative;
}
#imagePreviewZone.drag-over { border-color: var(--accent-400); background: var(--accent-50); }
#imagePreviewZone.has-images { cursor: default; }
.drop-hint {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; color: var(--stone-400); font-size: 14px; padding: 24px 0;
  pointer-events: none;
}
.drop-hint svg { margin-bottom: 10px; width: 40px; height: 40px; stroke: var(--stone-300); fill: none; stroke-width: 1.5; }
.drop-hint small { color: var(--stone-400); margin-top: 4px; font-size: 12px; }

.img-card {
  position: relative; width: 130px !important; max-width: 130px !important;
  flex: 0 0 130px !important; border-radius: var(--radius-md);
  border: 2px solid var(--stone-200); overflow: hidden; background: #fff;
  cursor: grab; user-select: none; transition: all var(--transition);
}
.img-card:active { cursor: grabbing; }
.img-card.is-front { border-color: var(--accent-400); box-shadow: 0 0 0 2px rgba(139,101,8,0.15); }
.img-card.drag-ghost { opacity: 0.35; }
.img-card img { width: 100%; height: 100px; object-fit: cover; display: block; }
.img-card-footer {
  padding: 5px 8px; font-size: 11px;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--stone-50); color: var(--stone-500); font-weight: 600;
}
.img-card-footer .front-badge {
  font-size: 9px; background: var(--accent-500); color: #fff;
  padding: 1px 7px; border-radius: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px;
}
.img-card .remove-btn {
  position: absolute; top: 4px; right: 4px; width: 22px; height: 22px;
  border-radius: 50%; background: rgba(0,0,0,0.5); color: #fff;
  border: none; font-size: 15px; line-height: 20px; text-align: center;
  cursor: pointer; opacity: 0; transition: opacity 0.15s;
}
.img-card:hover .remove-btn { opacity: 1; }

/* ===========================
   COLOR CHECKER
   =========================== */
#colorResultsCard { display: none; margin-top: 14px; }
#colorResultsCard.visible { display: block; }
.color-results { display: flex; flex-direction: column; gap: 8px; }
.color-result-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: var(--radius-md); border: 1.5px solid var(--stone-200);
  animation: colorSlideIn 0.3s ease forwards; opacity: 0; background: #fff;
}
@keyframes colorSlideIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
.color-result-ok { background: #f0fdf4; border-color: #bbf7d0; }
.color-result-err { background: #fef2f2; border-color: #fecaca; }
.clr-swatch { width:38px;height:38px;border-radius:8px;flex-shrink:0;border:2px solid rgba(0,0,0,0.06);box-shadow:0 1px 3px rgba(0,0,0,0.06);}
.clr-swatch-duo { width:38px;height:38px;border-radius:8px;flex-shrink:0;border:2px solid rgba(0,0,0,0.06);box-shadow:0 1px 3px rgba(0,0,0,0.06);position:relative;overflow:hidden;}
.clr-swatch-duo .half-left,.clr-swatch-duo .half-right {position:absolute;top:0;width:100%;height:100%;}
.clr-swatch-duo .half-left {clip-path:polygon(0 0,100% 0,0 100%);}
.clr-swatch-duo .half-right {clip-path:polygon(100% 0,100% 100%,0 100%);}
.clr-swatch-multi {width:38px;height:38px;border-radius:8px;flex-shrink:0;border:2px solid rgba(0,0,0,0.06);display:flex;overflow:hidden;}
.clr-swatch-multi .stripe {flex:1;height:100%;}
.clr-info { flex:1;min-width:0; }
.clr-name { font-weight:600;font-size:13.5px;margin-bottom:2px; }
.color-result-ok .clr-name { color:#16a34a; }
.color-result-err .clr-name { color:#dc2626;text-decoration:wavy underline #dc2626;text-underline-offset:3px; }
.clr-detail { font-size:12px;color:var(--stone-500); }
.clr-suggestion { color:#16a34a;font-weight:600;cursor:pointer;border-bottom:1px dashed #16a34a;padding:1px 3px;border-radius:3px;transition:all 0.15s; }
.clr-suggestion:hover { color:#fff;background:rgba(22,163,74,0.8);border-color:transparent; }
.clr-err-part { color:#dc2626;font-weight:600;font-size:12px; }
.clr-no-match { color:var(--stone-400);font-style:italic;font-size:12px; }
.clr-hex-codes { display:flex;flex-direction:column;gap:3px;flex-shrink:0; }
.clr-hex-code { font-family:'DM Mono',monospace;font-size:11px;padding:3px 8px;background:var(--stone-50);border-radius:var(--radius-sm);color:var(--stone-500);display:flex;align-items:center;gap:5px;cursor:pointer;border:1px solid transparent;transition:all 0.15s; }
.clr-hex-code:hover { background:var(--stone-200);border-color:var(--accent-400);color:var(--stone-700); }
.clr-hex-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,0.06); }
.clr-badges { display:flex;gap:4px;flex-shrink:0; }
.clr-badge { font-size:10px;padding:2px 7px;border-radius:20px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px; }
.clr-badge-ok { background:rgba(22,163,74,0.1);color:#16a34a; }
.clr-badge-err { background:rgba(220,38,38,0.1);color:#dc2626; }
.clr-badge-duo { background:rgba(139,101,8,0.1);color:var(--accent-500); }
.clr-count-info { display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1.5px solid var(--stone-100);font-size:13px;color:var(--stone-500); }
.clr-count-ok { color:#16a34a!important;font-weight:600; }
.clr-count-err { color:#dc2626!important;font-weight:600; }
.clr-flash { animation:clrFlash 0.6s ease; }
@keyframes clrFlash { 0%{box-shadow:0 0 0 3px rgba(22,163,74,0.3)} 100%{box-shadow:0 0 0 3px transparent} }
.clr-save-status { font-size:12px;margin-top:6px;font-weight:600; }
.clr-save-status.success { color:#16a34a; }
.clr-save-status.error { color:#dc2626; }

/* ===========================
   AUTOCOMPLETE
   =========================== */
.autocomplete-wrap { position: relative; }
.autocomplete-dropdown {
  position:absolute;top:100%;left:0;right:0;z-index:200;
  background:#fff;border:1.5px solid var(--stone-300);border-top:none;
  border-radius:0 0 var(--radius-md) var(--radius-md);
  max-height:220px;overflow-y:auto;display:none;box-shadow:var(--shadow-lg);
}
.autocomplete-dropdown.open { display:block; }
.autocomplete-dropdown .ac-item { padding:9px 14px;cursor:pointer;font-size:13.5px;color:var(--stone-700);transition:background 0.1s; }
.autocomplete-dropdown .ac-item:hover,.autocomplete-dropdown .ac-item.ac-active { background:var(--accent-50);color:var(--accent-700); }
.autocomplete-dropdown .ac-item mark { background:#fef08a;padding:0 1px;border-radius:2px; }
.autocomplete-dropdown .ac-no-results { padding:10px 14px;color:var(--stone-400);font-size:13px;font-style:italic; }

/* ===========================
   CKEditor overrides
   =========================== */
.cke_chrome { border: 1.5px solid var(--stone-300) !important; border-radius: var(--radius-md) !important; overflow: hidden; }
.cke_top { border-bottom: 1.5px solid var(--stone-200) !important; background: var(--stone-50) !important; }
.cke_bottom { background: var(--stone-50) !important; border-top: 1px solid var(--stone-200) !important; }

/* ===========================
   FORM FOOTER / ACTIONS
   =========================== */
.form-actions {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 24px; margin-top: 8px;
}
@media (max-width: 480px) {
  .form-actions { flex-direction: column-reverse; gap: 12px; }
  .form-actions .btn { width: 100%; }
}

/* ===========================
   RESPONSIVE COLOR ITEMS
   =========================== */
@media (max-width: 640px) {
  .color-result-item { flex-wrap: wrap; }
  .clr-hex-codes { flex-direction: row; }
  .img-card { width: 100px; }
  .img-card img { height: 75px; }
}