/* ===========================================
   Kon Utilities - Complete Inline Style Replacements
   Total patterns covered: 219
   =========================================== */

/* ===========================================
   SCROLL LOCK (lightbox body scroll prevention)
   Uses a CSS class instead of inline style because
   Unpoly's replaceState clears inline body.style.overflow.
   =========================================== */
body.kon-scroll-lock { overflow: hidden !important; }

/* ===========================================
   TEXT COLORS (with !important to override konFS14)
   =========================================== */
.text-grey { color: grey !important; }
.text-darkgrey { color: darkgrey !important; }
.text-dimgrey { color: dimgrey !important; }
.text-lightgrey { color: lightgrey !important; }
.text-dark-333 { color: #333 !important; }
.text-666 { color: #666 !important; }
.text-888 { color: #888 !important; }
.text-999 { color: #999 !important; }
.text-aaa { color: #aaaaaa !important; }
.text-ccc { color: #ccc !important; }
.text-856404 { color: #856404 !important; }  /* Bootstrap warning dark */
.text-721c24 { color: #721c24 !important; }  /* Bootstrap danger dark */
.text-155724 { color: #155724 !important; }  /* Bootstrap success dark */
.text-0c5460 { color: #0c5460 !important; }  /* Bootstrap info dark */
.text-198754 { color: #198754 !important; }  /* Bootstrap 5 success */
.text-cf0015 { color: #cf0015 !important; }  /* Konversed brand red */
.text-6c757d { color: #6c757d !important; }  /* Bootstrap secondary */
/* Note: Use Bootstrap .text-primary, .text-danger, .text-success, .text-warning where appropriate */

/* ===========================================
   FONT SIZES
   =========================================== */
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-18 { font-size: 18px; }
.fs-20 { font-size: 20px; }
.fs-24 { font-size: 24px; }
.fs-32 { font-size: 32px; }
.fs-0-85rem { font-size: 0.85rem; }
.fs-0-85em { font-size: 0.85em; }
.fs-1-2rem { font-size: 1.2rem; }
.fs-1-25rem { font-size: 1.25rem; }
.fs-1-5rem { font-size: 1.5rem; }
.fs-1-8rem { font-size: 1.8rem; }
.fs-2rem { font-size: 2rem; }
.fs-2-5rem { font-size: 2.5rem; }
.fs-3rem { font-size: 3rem; }

/* ===========================================
   COMPOSITE TEXT STYLES (color + size + weight)
   =========================================== */

/* --- Icon styles (size + color) --- */
.icon-grey-lg { font-size: 18px; color: grey !important; }
.icon-grey-sm { font-size: 14px; color: grey !important; }
.icon-danger-lg { font-size: 18px; color: #dc3545 !important; }
.icon-warning-lg { font-size: 18px; color: #856404 !important; }
.icon-success-lg { font-size: 18px; color: #28a745 !important; }
.icon-info-lg { font-size: 18px; color: #0c5460 !important; }
.icon-dark-lg { font-size: 18px; color: #333 !important; }
.icon-black-lg { font-size: 20px; color: black !important; }

/* --- Subtext styles (small muted text) --- */
.subtext-grey { color: grey !important; font-size: 12px; }
.subtext-666 { color: #666 !important; font-size: 12px; }
.subtext-999 { color: #999 !important; font-size: 12px; }
.subtext-333 { color: #333 !important; font-size: 12px; }
.subtext-dark-13 { color: #333 !important; font-size: 13px; }
.subtext-grey-11 { color: grey !important; font-size: 11px; }
.subtext-999-11 { color: #999 !important; font-size: 11px; }
.subtext-999-13 { color: #999 !important; font-size: 13px; }
.subtext-666-11 { color: #666 !important; font-size: 11px; }
.subtext-666-13 { color: #666 !important; font-size: 13px; }

/* --- Label styles --- */
.label-grey-upper { color: grey !important; font-size: 11px; text-transform: uppercase; }

/* --- Heading styles --- */
.heading-dark { color: #333 !important; font-size: 16px; font-weight: 500; }
.heading-dark-14 { color: #333 !important; font-size: 14px; font-weight: 500; }
.heading-dark-lg { color: #333 !important; font-size: 24px; }
.heading-dark-lg-medium { color: #333 !important; font-size: 24px; font-weight: 500; }
.heading-dark-md { color: #333 !important; font-size: 18px; }
.heading-grey-16 { color: grey !important; font-size: 16px; }
.heading-999-16 { color: #999 !important; font-size: 16px; }

/* --- Text with weight --- */
.text-dark-medium { color: #333 !important; font-weight: 500; }
.text-dark-semibold { color: #333 !important; font-weight: 600; }
.text-grey-semibold { color: grey !important; font-weight: 600; }
.text-666-semibold { color: #666 !important; font-weight: 600; }
.text-6c757d-semibold { color: #6c757d !important; font-weight: 600; }
.text-danger-semibold { color: #dc3545 !important; font-weight: 600; }
.text-success-semibold { color: #28a745 !important; font-weight: 600; }
.text-warning-semibold { color: #ffc107 !important; font-weight: 600; }
.text-primary-semibold { color: #0d6efd !important; font-weight: 600; }
.text-155724-semibold { color: #155724 !important; font-weight: 600; }

/* --- Placeholder/empty state icons --- */
.placeholder-icon { font-size: 3rem; color: #ccc !important; }
.placeholder-icon-sm { font-size: 2rem; color: #ccc !important; }
.placeholder-icon-999 { font-size: 1.5rem; color: #999 !important; }
.placeholder-icon-6c757d { font-size: 2.5rem; color: #6c757d !important; }
.placeholder-icon-cf0015 { font-size: 2rem; color: #cf0015 !important; }
.placeholder-icon-danger { font-size: 1.5rem; color: #dc3545 !important; }

/* --- Misc text combinations --- */
.text-darkgrey-italic { color: darkgrey !important; font-style: italic; }
.text-danger-12 { color: #dc3545 !important; font-size: 12px; }
.text-warning-12 { color: #ffc107 !important; font-size: 12px; }
.text-1-25rem-666 { font-size: 1.25rem; color: #666 !important; }
.text-success-32-semibold { font-size: 32px; color: #28a745 !important; font-weight: 600; }

/* ===========================================
   DIMENSIONS
   =========================================== */

/* --- Widths --- */
.w-28px { width: 28px; }
.w-40px { width: 40px; }
.w-48px { width: 48px; }
.w-50px { width: 50px; }
.w-60px { width: 60px; }
.w-64px { width: 64px; }
.w-80px { width: 80px; }
.w-120px { width: 120px; }
.w-300px { width: 300px; }
.w-auto { width: auto; }

/* --- Heights --- */
.h-4px { height: 4px; }
.h-8px { height: 8px; }
.h-18px { height: 18px; }
.h-28px { height: 28px; }
.h-40px { height: 40px; }
.h-45px { height: 45px; }
.h-48px { height: 48px; }
.h-50px { height: 50px; }
.h-60px { height: 60px; }
.h-64px { height: 64px; }
.h-80px { height: 80px; }
.h-100px { height: 100px; }
.h-120px { height: 120px; }
.h-150px { height: 150px; }
.h-200px { height: 200px; }
.h-300px { height: 300px; }
.h-400px { height: 400px; }
.h-500px { height: 500px; }

/* --- Viewport Heights --- */
.h-60vh { height: 60vh; }

/* --- Max Widths --- */
.max-w-100 { max-width: 100px; }
.max-w-150 { max-width: 150px; }
.max-w-180 { max-width: 180px; }
.max-w-200 { max-width: 200px; }
.max-w-250 { max-width: 250px; }
.max-w-300 { max-width: 300px; }
.max-w-350 { max-width: 350px; }
.max-w-400 { max-width: 400px; }
.max-w-600 { max-width: 600px; }

/* --- Max Heights --- */
.max-h-60 { max-height: 60px; }
.max-h-80 { max-height: 80px; }
.max-h-150 { max-height: 150px; }
.max-h-200 { max-height: 200px; }
.max-h-300 { max-height: 300px; }
.max-h-400 { max-height: 400px; }
.max-h-480 { max-height: 480px; }

/* --- Min Widths --- */
.min-w-100 { min-width: 100px; }
.min-w-180 { min-width: 180px; }
.min-w-200 { min-width: 200px; }
.min-w-220 { min-width: 220px; }

/* --- Min Heights --- */
.min-h-200 { min-height: 200px; }

/* ===========================================
   THUMBNAILS (width + height + object-fit)
   =========================================== */
.thumb-28 { width: 28px; height: 28px; }
.thumb-40 { width: 40px; height: 40px; object-fit: cover; }
.thumb-48 { width: 48px; height: 48px; object-fit: cover; }
.thumb-50 { width: 50px; height: 50px; object-fit: cover; }
.thumb-60 { width: 60px; height: 60px; object-fit: cover; }
.thumb-64 { width: 64px; height: 64px; }
.thumb-80 { width: 80px; height: 80px; object-fit: cover; }
.thumb-100 { width: 100px; height: 100px; object-fit: cover; }
.thumb-120 { width: 120px; height: 120px; object-fit: cover; }
.thumb-120-80 { width: 120px; height: 80px; object-fit: cover; }
.thumb-80-60 { width: 80px; height: 60px; object-fit: cover; }
.thumb-60-45 { width: 60px; height: 45px; object-fit: cover; }
.thumb-300 { width: 300px; height: 300px; }

/* ===========================================
   OBJECT FIT & DISPLAY
   =========================================== */
.obj-cover { object-fit: cover; }
.obj-contain { object-fit: contain; }
.obj-cover-70 { object-fit: cover; opacity: 0.7; }
/* Note: Use Bootstrap .d-none, .d-block where appropriate */

/* ===========================================
   CURSOR
   =========================================== */
.cursor-pointer { cursor: pointer; }
.cursor-crosshair { cursor: crosshair; }
.cursor-grab { cursor: grab; }

/* ===========================================
   BORDERS
   =========================================== */
.border-top-eee { border-top: 1px solid #eee; }
.border-bottom-dee2e6 { border-bottom: 1px solid #dee2e6; }
.border-ddd { border: 1px solid #ddd; }
.border-dee2e6 { border: 1px solid #dee2e6; }
.border-left-danger { border-left: 4px solid #dc3545; }
.border-left-warning { border-left: 4px solid #ffc107; }
.border-left-success { border-left: 4px solid #28a745; }
.border-left-info { border-left: 4px solid #17a2b8; }
.border-color-danger { border-color: #dc3545 !important; }

/* ===========================================
   BACKGROUNDS
   =========================================== */
.bg-f0f0f0 { background-color: #f0f0f0; }
.bg-f5f5f5 { background-color: #f5f5f5; }
.bg-f8f9fa { background-color: #f8f9fa; }  /* Same as Bootstrap .bg-light */
.bg-e9ecef { background-color: #e9ecef; }
.bg-fff3cd { background-color: #fff3cd; }  /* Bootstrap warning light */
.bg-f8d7da { background-color: #f8d7da; }  /* Bootstrap danger light */
.bg-1a1a1a { background-color: #1a1a1a; }
.bg-black { background: #000; }

/* ===========================================
   BUTTON STATES
   =========================================== */
.btn-disabled-grey {
  color: dimgrey !important;
  border-color: #dddddd !important;
  background-color: #dddddd !important;
}
.btn-danger-solid {
  color: #fff !important;
  border-color: #dc3545 !important;
  background-color: #dc3545 !important;
}
.btn-warning-solid {
  color: #fff !important;
  border-color: #ffc107 !important;
  background-color: #ffc107 !important;
}
.btn-danger-outline {
  color: #dc3545 !important;
  border-color: #dc3545 !important;
  background-color: #fff !important;
}
.btn-danger-border-only {
  border-color: #dc3545 !important;
}

/* ===========================================
   ALERTS (background + border combos)
   =========================================== */
.alert-warning-bordered {
  background-color: #fff3cd;
  border-left: 4px solid #ffc107;
}
.alert-danger-bordered {
  background-color: #f8d7da;
  border-left: 4px solid #dc3545;
}

/* ===========================================
   OVERLAY & POSITIONING
   =========================================== */
.overlay-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.overlay-icon {
  font-size: 2rem;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.overlay-icon-positioned {
  font-size: 2rem;
  color: rgba(255,255,255,0.9);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.cover-full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===========================================
   OPACITY
   =========================================== */
.opacity-70 { opacity: 0.7; }
.opacity-90 { opacity: 0.9; }

/* ===========================================
   PROGRESS BARS
   =========================================== */
.progress-bar-container {
  height: 4px;
  background-color: #e9ecef;
  width: 100%;
}
.progress-bar-brand {
  height: 4px;
  background-color: #cf0015;
}

/* ===========================================
   CIRCULAR PLACEHOLDERS
   =========================================== */
.circle-placeholder {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.circle-placeholder-grey {
  background-color: #f0f0f0;
  border-radius: 50%;
  margin: 0 auto;
}
.circle-placeholder-danger {
  background-color: #f8d7da;
  border-radius: 50%;
  margin: 0 auto;
}
.circle-placeholder-brand {
  background-color: #cf0015;
  border-radius: 50%;
  color: white;
}
.circle-placeholder-success {
  background-color: #28a745;
  border-radius: 50%;
  color: white;
}
.circle-placeholder-disabled {
  background-color: #dddddd;
  border-radius: 50%;
  color: dimgrey;
}

/* ===========================================
   MISC UTILITIES
   =========================================== */
.visibility-hidden { visibility: hidden; }
.whitespace-pre-wrap { white-space: pre-wrap; word-break: break-word; }
.word-break-all { word-break: break-all; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }
.vertical-align-bottom { vertical-align: text-bottom; margin-right: 6px; }
/* Note: Use Bootstrap .font-monospace for monospace font */

/* ===========================================
   TERMINAL PANEL UTILITIES (global-admin)
   =========================================== */
.btn-warning-cf6000 {
  background: #cf6000;
  border-color: #cf6000;
  color: #fff;
}
.terminal-hints-text {
  font-size: 10px;
  color: #888 !important;
  margin-top: 8px;
  line-height: 1.4;
}

/* ===========================================
   ADDITIONAL COMPOSITE STYLES
   =========================================== */

/* Heading variants */
.heading-grey-16 { font-size: 16px; color: grey !important; }
.heading-grey-18 { font-size: 18px; color: grey !important; }
.heading-warning-18 { font-size: 18px; color: #856404 !important; }
.heading-danger-18 { font-size: 18px; color: #dc3545 !important; }

/* Code block backgrounds */
.code-block-bg { background-color: #f5f5f5; word-break: break-all; }
.code-block-bg-dark { background-color: #f5f5f5; color: #333 !important; }

/* QR code border */
.border-qr { border: 1px solid #ddd; }

/* Input max widths */
.max-w-code { max-width: 200px; }

/* Modal headings */
.modal-heading-black { font-size: 20px !important; color: black !important; }

/* Cropper container */
.cropper-container-box { width: 300px; height: 300px; background: #f0f0f0; }

/* Button danger outline (text and border red, no background) */
.btn-danger-outline-border { color: #dc3545 !important; border-color: #dc3545 !important; }

/* Heading dark variants */
.heading-dark-16 { font-size: 16px; color: #333 !important; }

/* ===========================================
   PERCENTAGE WIDTHS (for progress bars)
   Use with JavaScript: 
   element.className = element.className.replace(/\bpct-\d+\b/, 'pct-' + Math.round(percent));
   =========================================== */
.pct-0 { width: 0%; }
.pct-1 { width: 1%; }
.pct-2 { width: 2%; }
.pct-3 { width: 3%; }
.pct-4 { width: 4%; }
.pct-5 { width: 5%; }
.pct-6 { width: 6%; }
.pct-7 { width: 7%; }
.pct-8 { width: 8%; }
.pct-9 { width: 9%; }
.pct-10 { width: 10%; }
.pct-11 { width: 11%; }
.pct-12 { width: 12%; }
.pct-13 { width: 13%; }
.pct-14 { width: 14%; }
.pct-15 { width: 15%; }
.pct-16 { width: 16%; }
.pct-17 { width: 17%; }
.pct-18 { width: 18%; }
.pct-19 { width: 19%; }
.pct-20 { width: 20%; }
.pct-21 { width: 21%; }
.pct-22 { width: 22%; }
.pct-23 { width: 23%; }
.pct-24 { width: 24%; }
.pct-25 { width: 25%; }
.pct-26 { width: 26%; }
.pct-27 { width: 27%; }
.pct-28 { width: 28%; }
.pct-29 { width: 29%; }
.pct-30 { width: 30%; }
.pct-31 { width: 31%; }
.pct-32 { width: 32%; }
.pct-33 { width: 33%; }
.pct-34 { width: 34%; }
.pct-35 { width: 35%; }
.pct-36 { width: 36%; }
.pct-37 { width: 37%; }
.pct-38 { width: 38%; }
.pct-39 { width: 39%; }
.pct-40 { width: 40%; }
.pct-41 { width: 41%; }
.pct-42 { width: 42%; }
.pct-43 { width: 43%; }
.pct-44 { width: 44%; }
.pct-45 { width: 45%; }
.pct-46 { width: 46%; }
.pct-47 { width: 47%; }
.pct-48 { width: 48%; }
.pct-49 { width: 49%; }
.pct-50 { width: 50%; }
.pct-51 { width: 51%; }
.pct-52 { width: 52%; }
.pct-53 { width: 53%; }
.pct-54 { width: 54%; }
.pct-55 { width: 55%; }
.pct-56 { width: 56%; }
.pct-57 { width: 57%; }
.pct-58 { width: 58%; }
.pct-59 { width: 59%; }
.pct-60 { width: 60%; }
.pct-61 { width: 61%; }
.pct-62 { width: 62%; }
.pct-63 { width: 63%; }
.pct-64 { width: 64%; }
.pct-65 { width: 65%; }
.pct-66 { width: 66%; }
.pct-67 { width: 67%; }
.pct-68 { width: 68%; }
.pct-69 { width: 69%; }
.pct-70 { width: 70%; }
.pct-71 { width: 71%; }
.pct-72 { width: 72%; }
.pct-73 { width: 73%; }
.pct-74 { width: 74%; }
.pct-75 { width: 75%; }
.pct-76 { width: 76%; }
.pct-77 { width: 77%; }
.pct-78 { width: 78%; }
.pct-79 { width: 79%; }
.pct-80 { width: 80%; }
.pct-81 { width: 81%; }
.pct-82 { width: 82%; }
.pct-83 { width: 83%; }
.pct-84 { width: 84%; }
.pct-85 { width: 85%; }
.pct-86 { width: 86%; }
.pct-87 { width: 87%; }
.pct-88 { width: 88%; }
.pct-89 { width: 89%; }
.pct-90 { width: 90%; }
.pct-91 { width: 91%; }
.pct-92 { width: 92%; }
.pct-93 { width: 93%; }
.pct-94 { width: 94%; }
.pct-95 { width: 95%; }
.pct-96 { width: 96%; }
.pct-97 { width: 97%; }
.pct-98 { width: 98%; }
.pct-99 { width: 99%; }
.pct-100 { width: 100%; }

/* ===========================================
   PADDING-TOP PERCENTAGES (for aspect ratios)
   Use in templates: class="pt-pct-{{ printf "%.0f" (divByFloat 100 .Ratio) }}"
   =========================================== */
.pt-pct-0 { padding-top: 0%; }
.pt-pct-1 { padding-top: 1%; }
.pt-pct-2 { padding-top: 2%; }
.pt-pct-3 { padding-top: 3%; }
.pt-pct-4 { padding-top: 4%; }
.pt-pct-5 { padding-top: 5%; }
.pt-pct-6 { padding-top: 6%; }
.pt-pct-7 { padding-top: 7%; }
.pt-pct-8 { padding-top: 8%; }
.pt-pct-9 { padding-top: 9%; }
.pt-pct-10 { padding-top: 10%; }
.pt-pct-11 { padding-top: 11%; }
.pt-pct-12 { padding-top: 12%; }
.pt-pct-13 { padding-top: 13%; }
.pt-pct-14 { padding-top: 14%; }
.pt-pct-15 { padding-top: 15%; }
.pt-pct-16 { padding-top: 16%; }
.pt-pct-17 { padding-top: 17%; }
.pt-pct-18 { padding-top: 18%; }
.pt-pct-19 { padding-top: 19%; }
.pt-pct-20 { padding-top: 20%; }
.pt-pct-21 { padding-top: 21%; }
.pt-pct-22 { padding-top: 22%; }
.pt-pct-23 { padding-top: 23%; }
.pt-pct-24 { padding-top: 24%; }
.pt-pct-25 { padding-top: 25%; }
.pt-pct-26 { padding-top: 26%; }
.pt-pct-27 { padding-top: 27%; }
.pt-pct-28 { padding-top: 28%; }
.pt-pct-29 { padding-top: 29%; }
.pt-pct-30 { padding-top: 30%; }
.pt-pct-31 { padding-top: 31%; }
.pt-pct-32 { padding-top: 32%; }
.pt-pct-33 { padding-top: 33%; }
.pt-pct-34 { padding-top: 34%; }
.pt-pct-35 { padding-top: 35%; }
.pt-pct-36 { padding-top: 36%; }
.pt-pct-37 { padding-top: 37%; }
.pt-pct-38 { padding-top: 38%; }
.pt-pct-39 { padding-top: 39%; }
.pt-pct-40 { padding-top: 40%; }
.pt-pct-41 { padding-top: 41%; }
.pt-pct-42 { padding-top: 42%; }
.pt-pct-43 { padding-top: 43%; }
.pt-pct-44 { padding-top: 44%; }
.pt-pct-45 { padding-top: 45%; }
.pt-pct-46 { padding-top: 46%; }
.pt-pct-47 { padding-top: 47%; }
.pt-pct-48 { padding-top: 48%; }
.pt-pct-49 { padding-top: 49%; }
.pt-pct-50 { padding-top: 50%; }
.pt-pct-51 { padding-top: 51%; }
.pt-pct-52 { padding-top: 52%; }
.pt-pct-53 { padding-top: 53%; }
.pt-pct-54 { padding-top: 54%; }
.pt-pct-55 { padding-top: 55%; }
.pt-pct-56 { padding-top: 56%; }
.pt-pct-57 { padding-top: 57%; }
.pt-pct-58 { padding-top: 58%; }
.pt-pct-59 { padding-top: 59%; }
.pt-pct-60 { padding-top: 60%; }
.pt-pct-61 { padding-top: 61%; }
.pt-pct-62 { padding-top: 62%; }
.pt-pct-63 { padding-top: 63%; }
.pt-pct-64 { padding-top: 64%; }
.pt-pct-65 { padding-top: 65%; }
.pt-pct-66 { padding-top: 66%; }
.pt-pct-67 { padding-top: 67%; }
.pt-pct-68 { padding-top: 68%; }
.pt-pct-69 { padding-top: 69%; }
.pt-pct-70 { padding-top: 70%; }
.pt-pct-71 { padding-top: 71%; }
.pt-pct-72 { padding-top: 72%; }
.pt-pct-73 { padding-top: 73%; }
.pt-pct-74 { padding-top: 74%; }
.pt-pct-75 { padding-top: 75%; }
.pt-pct-76 { padding-top: 76%; }
.pt-pct-77 { padding-top: 77%; }
.pt-pct-78 { padding-top: 78%; }
.pt-pct-79 { padding-top: 79%; }
.pt-pct-80 { padding-top: 80%; }
.pt-pct-81 { padding-top: 81%; }
.pt-pct-82 { padding-top: 82%; }
.pt-pct-83 { padding-top: 83%; }
.pt-pct-84 { padding-top: 84%; }
.pt-pct-85 { padding-top: 85%; }
.pt-pct-86 { padding-top: 86%; }
.pt-pct-87 { padding-top: 87%; }
.pt-pct-88 { padding-top: 88%; }
.pt-pct-89 { padding-top: 89%; }
.pt-pct-90 { padding-top: 90%; }
.pt-pct-91 { padding-top: 91%; }
.pt-pct-92 { padding-top: 92%; }
.pt-pct-93 { padding-top: 93%; }
.pt-pct-94 { padding-top: 94%; }
.pt-pct-95 { padding-top: 95%; }
.pt-pct-96 { padding-top: 96%; }
.pt-pct-97 { padding-top: 97%; }
.pt-pct-98 { padding-top: 98%; }
.pt-pct-99 { padding-top: 99%; }
.pt-pct-100 { padding-top: 100%; }

/* ===========================================
   KONVERSED BRAND COLORS (for usage bars)
   =========================================== */
.bg-konversed-red { background-color: #cf0015; }
.bg-konversed-light { background-color: #fff5f5; }
.border-konversed-red { border-color: #cf0015; }

/* ===========================================
   PLAN CARD STATES
   =========================================== */
.plan-card-current {
    border: 1px solid #cf0015;
    background-color: #fff5f5;
}
.plan-card-other {
    border: 1px solid #dee2e6;
    background-color: #fafafa;
}

/* ===========================================
   AUDIO BUFFER BAR
   =========================================== */
.audio-buffer-bar {
    background: rgba(0,0,0,0.2);
    pointer-events: none;
}

/* ===========================================
   FORM LABEL/TEXT STYLES (account-admin)
   =========================================== */
.form-control-kon { color: #333 !important; text-align: left !important; }
.form-label-kon { color: #333; font-weight: 500; }
.form-check-label-kon { color: #333; }
.form-text-kon { color: #666; font-size: 12px; }

/* ===========================================
   UPLOAD ZONE (file upload areas)
   =========================================== */
.upload-zone {
    border: 2px dashed #dee2e6;
    padding: 2rem;
    text-align: center;
    background-color: #fafafa;
    cursor: pointer;
}
.upload-zone:hover { border-color: #cf0015; }
.upload-zone.dragover { border-color: #cf0015; background-color: #fff5f5; }

/* ===========================================
   IMAGE PREVIEW STYLES
   =========================================== */
.preview-image { max-width: 200px; max-height: 200px; object-fit: contain; }
.current-image { max-width: 150px; max-height: 150px; object-fit: contain; border: 1px solid #dee2e6; }

/* ===========================================
   BRANDING CARD STYLES (setup wizard)
   =========================================== */
.branding-card { border: 1px solid #dee2e6; margin-bottom: 1rem; }
.branding-card:hover { border-color: #cf0015; }
.branding-complete { border-left: 4px solid #28a745; }
.branding-incomplete { border-left: 4px solid #ffc107; }
.branding-thumb { width: 80px; height: 80px; object-fit: cover; background-color: #f5f5f5; }
.branding-color-swatch { width: 80px; height: 80px; border: 1px solid #dee2e6; }
.branding-thumb-small { width: 40px; height: 40px; }

/* ===========================================
   GALLERY SLOT STYLES (image gallery)
   =========================================== */
.gallery-slot {
    border: 2px dashed #dee2e6;
    padding: 1rem;
    text-align: center;
    background-color: #fafafa;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.gallery-slot:hover { border-color: #cf0015; }
.gallery-slot.has-image { border-style: solid; background-color: #fff; }
.gallery-image { max-width: 100%; max-height: 150px; object-fit: contain; margin-bottom: 0.5rem; }
.gallery-slot-number {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

/* ===========================================
   COLOR PICKER GRID
   =========================================== */
.color-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 10px; }
.color-option { width: 60px; height: 40px; border: 2px solid transparent; cursor: pointer; }
.color-option:hover { border-color: #333; }
.color-option.selected { border-color: #cf0015; box-shadow: 0 0 0 2px #cf0015; }

/* ===========================================
   SETUP SECTION STYLES (wizard hub)
   =========================================== */
.setup-section { border: 1px solid #dee2e6; margin-bottom: 1rem; background-color: #fff; }
.setup-section:hover { border-color: #cf0015; }
.setup-row {
    display: flex;
    align-items: center;
    padding: 1rem;
}
.setup-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    background-color: #f5f5f5;
    margin-right: 1rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}
.section-complete { border-left: 4px solid #28a745; }
.section-incomplete { border-left: 4px solid #ffc107; }

/* ===========================================
   COLOR PICKER STYLES
   =========================================== */
.color-preview { width: 100px; height: 100px; border-radius: 4px; }
.color-input-wrapper { display: flex; align-items: center; gap: 1rem; }
.preset-colors { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.preset-color { width: 40px; height: 40px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; }
.preset-color:hover { border-color: #333; }
.preset-color.selected { border-color: #cf0015; }
.preset-red { background-color: #cf0015; }
.preset-blue { background-color: #007bff; }
.preset-green { background-color: #28a745; }
.preset-yellow { background-color: #ffc107; }
.preset-purple { background-color: #6f42c1; }
.preset-orange { background-color: #fd7e14; }
.preset-teal { background-color: #20c997; }
.preset-pink { background-color: #e83e8c; }
.preset-cyan { background-color: #17a2b8; }
.preset-dark { background-color: #343a40; }

/* ===========================================
   SETUP WIZARD LAYOUT STYLES
   =========================================== */
.setup-section-header { padding: 1rem; border-bottom: 1px solid #dee2e6; }
.setup-row:last-child { border-bottom: none; }
.setup-row:hover { background-color: #fafafa; }
.setup-thumb img { width: 100%; height: 100%; object-fit: cover; }
.setup-thumb-color { width: 48px; height: 48px; border-radius: 8px; border: 1px solid #dee2e6; }
.setup-thumb-gallery { display: flex; gap: 2px; }
.setup-thumb-gallery-item { width: 15px; height: 48px; background-color: #f5f5f5; overflow: hidden; }
.setup-thumb-gallery-item:first-child { border-radius: 8px 0 0 8px; }
.setup-thumb-gallery-item:last-child { border-radius: 0 8px 8px 0; }
.setup-thumb-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.setup-content { flex-grow: 1; min-width: 0; }
.setup-label { font-size: 14px; color: #333; font-weight: 500; margin-bottom: 2px; }
.setup-value { font-size: 12px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.setup-value-missing { color: #999; font-style: italic; }
.setup-status { flex-shrink: 0; margin-left: 0.5rem; margin-right: 0.5rem; }
.setup-action { flex-shrink: 0; }
.setup-action a { font-size: 13px; color: #cf0015; text-decoration: none; }
.setup-action a:hover { text-decoration: underline; }
.section-progress { font-size: 12px; color: #666; }
.section-progress.section-complete { color: #198754; border-left: 0; }