/* =============================================
   NEUMORPHIC THEME — rangadostawcy.online
   Based on DESIGN SYSTEM v2.1 — Fixed: mobile, spacing, perf
   Removed: Tailwind CDN (350KB JS saved)
   ============================================= */

:root {
    --blue-900: #0f2942; --blue-800: #1e3a5f; --blue-700: #1e40af;
    --blue-600: #2563eb; --blue-500: #3b82f6; --blue-400: #60a5fa;
    --blue-100: #dbeafe; --blue-50: #eff6ff;
    --gray-900: #0f172a; --gray-800: #1e293b; --gray-700: #334155;
    --gray-600: #475569; --gray-500: #64748b; --gray-400: #94a3b8;
    --gray-300: #cbd5e1; --gray-200: #e2e8f0; --gray-100: #f1f5f9; --gray-50: #f8fafc;
    --success: #059669; --success-light: #ecfdf5;
    --warning: #d97706; --warning-light: #fffbeb;
    --danger: #dc2626; --danger-light: #fef2f2;
    --teal-700: #0f766e; --teal-600: #0d9488; --teal-50: #f0fdfa;
    --amber-700: #b45309; --amber-600: #d97706; --amber-50: #fffbeb;
    --indigo-700: #4338ca; --indigo-600: #4f46e5; --indigo-500: #6366f1; --indigo-50: #eef2ff;
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.05);
    --shadow-md: 0 4px 12px rgba(15,23,42,0.08), 0 1px 3px rgba(15,23,42,0.04);
    --shadow-lg: 0 8px 24px rgba(15,23,42,0.1);
    --shadow-focus: 0 0 0 3px rgba(37,99,235,0.18);
    --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
    /* Neumorphic tokens */
    --neu-shadow-raised: 6px 6px 12px #b8bec7, -6px -6px 12px #ffffff;
    --neu-shadow-raised-sm: 3px 3px 6px #b8bec7, -3px -3px 6px #ffffff;
    --neu-shadow-inset: inset 3px 3px 6px #b8bec7, inset -3px -3px 6px #ffffff;
    --neu-shadow-pressed: inset 2px 2px 5px #b8bec7, inset -2px -2px 5px #ffffff;
    --neu-bg: #e0e5ec;
    --neu-bg-gradient: linear-gradient(145deg, #e8eef4, #d8e2eb);
    /* Spacing scale */
    --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px;
    --sp-6: 14px; --sp-7: 16px; --sp-8: 20px; --sp-9: 24px; --sp-10: 32px;
    /* Legacy compat */
    --primary: #2563eb; --primary-dark: #1d4ed8;
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
* { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }

body { 
    background: #e0e5ec;
    color: var(--gray-800); 
    min-height: 100vh;
    font-size: 15px;
    line-height: 1.5;
}

/* ==== UTILITY CLASSES (replaces Tailwind CDN) ==== */
.flex { display: flex; }
.flex-1 { flex: 1 1 0%; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: 1fr; }
.space-y-3 > * + * { margin-top: 12px; }
.text-center { text-align: center; }
.text-white { color: white; }
.rounded-sm { border-radius: 4px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.w-5 { width: 20px; }
.h-3\.5, .h-3-5 { height: 14px; }
.overflow-x-auto { overflow-x: auto; }
.hidden { display: none; }

/* Responsive grid */
@media (min-width: 640px) {
    .sm\:flex-row { flex-direction: row; }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
}

/* Flag colors for lang switcher */
.bg-red-500 { background-color: #ef4444; }
.bg-blue-500 { background-color: #3b82f6; }
.bg-gray-800 { background-color: #1e293b; }
.bg-indigo-600 { background-color: #4f46e5; }

/* Dynamic status colors (from JS) */
.bg-green-100 { background-color: var(--success-light) !important; }
.text-green-700 { color: var(--success) !important; }
.bg-yellow-100 { background-color: var(--warning-light) !important; }
.text-yellow-700 { color: var(--warning) !important; }
.bg-red-100 { background-color: var(--danger-light) !important; }
.text-red-700 { color: var(--danger) !important; }
.bg-blue-100 { background-color: var(--blue-100) !important; }
.text-blue-800 { color: var(--blue-800) !important; }

/* ==== ICON SIZE TOKENS ==== */
.icon-2xs { font-size: 0.55rem; }
.icon-xs  { font-size: 0.65rem; }
.icon-sm  { font-size: 0.72rem; }
.icon-md  { font-size: 0.82rem; }
.icon-lg  { font-size: 1.1rem; }
.icon-xl  { font-size: 1.3rem; }
.icon-2xl { font-size: 1.5rem; }

/* ==== EXTENDED UTILITY CLASSES ==== */
.d-none   { display: none; }
.d-flex   { display: flex; }
.d-block  { display: block; }
.d-inline-flex { display: inline-flex; }
.text-success { color: #059669; }
.text-blue { color: var(--blue-600); }
.fs-xs    { font-size: 0.72rem; }
.fs-sm    { font-size: 0.82rem; }
.fs-md    { font-size: 0.88rem; }
.gap-1    { gap: 4px; }
.mb-1     { margin-bottom: 4px; }
.mb-2     { margin-bottom: 8px; }
/* ==== TOPBAR ==== */
.topbar { background: var(--blue-900); position: sticky; top: 0; z-index: 100; }
#editingAnalysisBanner { position: sticky; top: 54px; z-index: 95; }
.has-editing-banner .workflow-nav { top: calc(54px + var(--banner-h, 36px)); }
.has-editing-banner [data-section] { scroll-margin-top: calc(54px + var(--banner-h, 36px) + 60px); }
.topbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; height: 54px; display: flex; align-items: center; justify-content: space-between; }
.topbar-brand { display: flex; align-items: center; gap: 10px; color: white; font-weight: 600; font-size: 0.95rem; }
.topbar-brand .logo-icon { width: 32px; height: 32px; background: linear-gradient(135deg, var(--blue-500), var(--blue-400)); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.topbar-actions { display: flex; align-items: center; gap: 2px; }
.topbar-btn { background: transparent; border: none; color: rgba(255,255,255,0.6); padding: 8px 10px; border-radius: var(--radius-sm); font-size: 0.82rem; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 5px; font-family: inherit; }
.topbar-btn:hover { background: rgba(255,255,255,0.1); color: white; }
.topbar-divider { width: 1px; height: 22px; background: rgba(255,255,255,0.1); margin: 0 6px; }
.server-status { font-size: 0.72rem; padding: 3px 9px; border-radius: 10px; font-weight: 500; }
.server-status.loaded { background: rgba(5,150,105,0.2); color: #6ee7b7; }
.server-status.none { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.4); }

/* ==== LANG ==== */
.lang-switcher { position: relative; }
.lang-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--neu-bg-gradient); border-radius: var(--radius-md); box-shadow: var(--neu-shadow-raised); min-width: 150px; z-index: 1000; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all 0.2s; }
.lang-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-option { padding: 10px 14px; cursor: pointer; transition: background 0.15s; display: flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--gray-700); }
.lang-option:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.lang-option:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.lang-option:hover { background: var(--gray-100); }
.lang-option.active { background: var(--blue-50); color: var(--blue-700); font-weight: 500; }

/* ==== WORKFLOW NAV ==== */
.workflow-nav { 
    max-width: none; margin: 0; padding: 0;
    position: sticky; top: 54px; z-index: 90;
    background: var(--blue-900);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.workflow-steps { 
    display: flex; align-items: center; gap: 0; 
    max-width: 1280px; margin: 0 auto; padding: 0 1.5rem;
    overflow-x: auto; -webkit-overflow-scrolling: touch; 
}
.workflow-step { display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-radius: 0; font-size: 0.82rem; font-weight: 500; color: rgba(255,255,255,0.75); white-space: nowrap; cursor: pointer; transition: all 0.15s; text-decoration: none; border-bottom: 2px solid transparent; }
.workflow-step:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.04); }
.workflow-step .step-num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; border: 2px solid rgba(255,255,255,0.5); color: rgba(255,255,255,0.7); flex-shrink: 0; transition: all 0.2s; }
.workflow-step.active { color: white; border-bottom-color: var(--blue-400); background: rgba(255,255,255,0.06); }
.workflow-step.active .step-num { background: var(--blue-500); border-color: var(--blue-400); color: white; box-shadow: 0 0 0 3px rgba(96,165,250,0.2); }
.workflow-step.visited .step-num { border-color: #34d399; color: #34d399; }
.workflow-step.visited:not(.active) { color: rgba(255,255,255,0.85); }
.workflow-connector { width: 20px; height: 1.5px; background: rgba(255,255,255,0.15); flex-shrink: 0; transition: background 0.3s; }
.workflow-connector.done { background: #34d399; }

/* ==== MAIN LAYOUT ==== */
.main-container { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1.5rem 3rem; }

/* ==== SECTION CARDS — more separation ==== */
.section-card { 
    background: var(--neu-bg-gradient); 
    border: none; 
    border-radius: var(--radius-xl); 
    margin-bottom: 1.5rem;
    overflow: hidden; 
    box-shadow: var(--neu-shadow-raised); 
    transition: box-shadow 0.2s;
    scroll-margin-top: 110px; /* topbar(54) + workflow-nav(~44) + gap(12) */
}
.section-card:hover { box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff; }

/* Colored top accent per section — corporate navy-blue monochrome */
#section-spec { border-top: 4px solid var(--blue-600); }
#section-suppliers { border-top: 4px solid var(--teal-600); }
#section-criteria { border-top: 4px solid var(--amber-600); }
#section-offers { border-top: 4px solid var(--indigo-600); }

.section-header { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.5rem; border-bottom: 1px solid var(--gray-200); flex-wrap: wrap; gap: 0.5rem; }

/* Header backgrounds — subtle blue-gray tints (corporate), stronger on mobile via media query */
#section-spec > .section-header { background: linear-gradient(145deg, #e8eef4, #dce4ed); }
#section-suppliers > .section-header { background: linear-gradient(145deg, #e2f2ef, #d6ece8); }
#section-criteria > .section-header { background: linear-gradient(145deg, #f0ebe0, #e8e2d8); }
#section-offers > .section-header { background: linear-gradient(145deg, #e6e4f3, #dddaf0); }
.section-title-group { display: flex; align-items: center; gap: 12px; }
.section-icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 0.95rem; flex-shrink: 0; box-shadow: var(--neu-shadow-raised-sm); }
.section-icon.blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; box-shadow: 0 2px 8px rgba(37,99,235,0.25); }
.section-icon.teal { background: linear-gradient(135deg, #0d9488, #0f766e); color: #fff; box-shadow: 0 2px 8px rgba(13,148,136,0.25); }
.section-icon.slate { background: linear-gradient(135deg, #4338ca, #3730a3); color: #fff; box-shadow: 0 2px 8px rgba(67,56,202,0.25); }
.section-icon.amber { background: linear-gradient(135deg, #d97706, #b45309); color: #fff; box-shadow: 0 2px 8px rgba(217,119,6,0.25); }
.section-icon.indigo { background: linear-gradient(135deg, #4f46e5, #4338ca); color: #fff; box-shadow: 0 2px 8px rgba(79,70,229,0.25); }
.section-icon.purple {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    color: #fff;
    box-shadow: 0 2px 8px rgba(109,40,217,0.25);
}
.section-title { font-size: 1.22rem; font-weight: 700; color: var(--gray-800); letter-spacing: -0.01em; }
.section-subtitle { font-size: 0.8rem; color: var(--gray-600); margin-top: 2px; }
.section-body { padding: 1.5rem; }
.section-body-flush { padding: 0; }

/* ==== FORM ELEMENTS — bigger touch targets ==== */
.form-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-700); margin-bottom: 6px; }

.form-input, .input-modern { 
    width: 100%; 
    padding: 10px 14px;  /* bigger */
    border: none; 
    border-radius: var(--radius-md); 
    font-size: 16px; /* CRITICAL: 16px prevents iOS zoom on focus */
    color: var(--gray-800); 
    background: var(--neu-bg);
    box-shadow: var(--neu-shadow-inset); 
    transition: box-shadow 0.15s; 
    font-family: inherit;
    min-height: 44px; /* iOS touch target */
    box-sizing: border-box;
}
.form-input:hover, .input-modern:hover { box-shadow: inset 2px 2px 4px #b8bec7, inset -2px -2px 4px #ffffff; }
.form-input:focus, .input-modern:focus { outline: none; box-shadow: var(--neu-shadow-inset), 0 0 0 2px rgba(59,130,246,0.3); }
.form-input::placeholder, .input-modern::placeholder { color: var(--gray-500); }

.form-select { 
    padding: 10px 14px; 
    border: none;
    box-shadow: var(--neu-shadow-inset); 
    border-radius: var(--radius-md); 
    font-size: 16px; /* prevents iOS zoom */
    color: var(--gray-800); 
    background: var(--neu-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; 
    appearance: none; 
    padding-right: 36px; 
    transition: box-shadow 0.15s; 
    cursor: pointer; 
    font-family: inherit; 
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
}
.form-select:hover { box-shadow: inset 2px 2px 4px #b8bec7, inset -2px -2px 4px #ffffff; }
.form-select:focus { outline: none; box-shadow: var(--neu-shadow-inset), 0 0 0 2px rgba(59,130,246,0.3); }

/* ==== BUTTONS — bigger touch targets ==== */
.btn { 
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; 
    padding: 10px 18px; 
    border-radius: var(--radius-md); 
    font-size: 0.88rem; font-weight: 500; font-family: inherit; 
    cursor: pointer; transition: all 0.15s; border: none; white-space: nowrap;
    min-height: 44px; /* touch target */
}
.btn-primary { background: linear-gradient(135deg, var(--blue-600), var(--blue-700)); color: #fff; box-shadow: var(--neu-shadow-raised-sm), 0 2px 8px rgba(37,99,235,0.3); font-weight: 600; }
.btn-primary:hover { background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); color: #fff; box-shadow: var(--neu-shadow-raised), 0 4px 12px rgba(37,99,235,0.35); }
.btn-secondary { background: var(--neu-bg-gradient); color: var(--gray-700); border: none; box-shadow: var(--neu-shadow-raised-sm); }
.btn-secondary:hover { box-shadow: 4px 4px 8px #b8bec7, -4px -4px 8px #ffffff; }
.btn-primary:active, .btn-secondary:active { box-shadow: var(--neu-shadow-pressed); transform: scale(0.98); }
.btn-outline { background: transparent; color: var(--blue-600); border: 1.5px solid var(--blue-200); }
.btn-outline:hover { background: var(--blue-50); border-color: var(--blue-400); }
.btn-sm { padding: 8px 14px; font-size: 0.84rem; }
.btn-lg { padding: 13px 30px; font-size: 0.95rem; font-weight: 600; }
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37,99,235,0.35); }

/* --- Composable button system (btn--*) --- */
.btn--primary { background: linear-gradient(135deg, var(--blue-600), var(--blue-700)); color: #fff; box-shadow: var(--neu-shadow-raised-sm), 0 2px 8px rgba(37,99,235,0.3); font-weight: 600; }
.btn--primary:hover { background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); color: #fff; box-shadow: var(--neu-shadow-raised), 0 4px 12px rgba(37,99,235,0.35); }
.btn--secondary { background: var(--neu-bg-gradient); color: var(--gray-700); border: none; box-shadow: var(--neu-shadow-raised-sm); }
.btn--secondary:hover { box-shadow: 4px 4px 8px #b8bec7, -4px -4px 8px #ffffff; color: var(--gray-800); }
.btn--success { background: var(--neu-bg-gradient); color: #059669; box-shadow: var(--neu-shadow-raised-sm); font-weight: 600; }
.btn--success:hover { background: #059669; color: white; box-shadow: var(--neu-shadow-raised); }
.btn--danger { background: var(--neu-bg-gradient); color: var(--danger); box-shadow: var(--neu-shadow-raised-sm); font-weight: 600; }
.btn--danger:hover { color: #dc2626; box-shadow: var(--neu-shadow-raised); }
.btn--outline { background: transparent; color: var(--blue-600); border: 1.5px solid var(--blue-200); }
.btn--outline:hover { background: var(--blue-50); border-color: var(--blue-400); }
.btn--ghost { background: none; border: none; color: var(--gray-400); padding: 4px; min-height: auto; }
.btn--ghost:hover { color: var(--gray-600); }
.btn--sm { padding: 6px 14px; font-size: 0.82rem; min-height: 36px; }
.btn--lg { padding: 13px 30px; font-size: 0.95rem; font-weight: 600; }
.btn--full { width: 100%; }
.btn--icon { width: 32px; height: 32px; padding: 0; min-height: 32px; border-radius: var(--radius-md); font-size: 0.78rem; }
.btn--primary:active, .btn--secondary:active, .btn--success:active, .btn--danger:active, .btn--outline:active { box-shadow: var(--neu-shadow-pressed); transform: scale(0.98); }

.btn-primary-compat { background: linear-gradient(135deg, var(--blue-600), var(--blue-700)); color: #fff; transition: all 0.2s; display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600; border: none; cursor: pointer; min-height: 44px; box-shadow: var(--neu-shadow-raised-sm), 0 2px 8px rgba(37,99,235,0.3); }
.btn-primary-compat:hover { box-shadow: var(--neu-shadow-raised), 0 4px 12px rgba(37,99,235,0.35); color: #fff; background: linear-gradient(135deg, var(--blue-500), var(--blue-600)); }

/* ==== HINT BOXES ==== */
.hint-box { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); font-size: 0.88rem; line-height: 1.55; }
.hint-box.info { background: var(--blue-50); color: var(--blue-800); border: 1px solid var(--blue-100); }
.hint-box.warning { background: var(--warning-light); color: #92400e; border: 1px solid #fde68a; }
.hint-box .hint-icon { flex-shrink: 0; margin-top: 2px; }

/* ==== BADGE / TEMPLATE ==== */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 10px; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-blue { background: var(--blue-100); color: var(--blue-700); }
.badge-gray { background: var(--gray-100); color: var(--gray-500); }
.template-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; background: var(--blue-50); color: var(--blue-600); border-radius: 10px; font-size: 0.72rem; font-weight: 500; }

/* ==== TABLE ==== */
/* Wiersze jako jednolite paski neumorficzne (bez szachownicy per komórka) */
.table-modern { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.table-modern th { background: linear-gradient(145deg, #e4ecf6, #dae4f0); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--blue-800); padding: 12px 16px; text-align: left; border-bottom: none; box-shadow: inset 1px 1px 2px rgba(255,255,255,0.6), inset -1px -1px 2px rgba(184,190,199,0.15); }
.table-modern thead tr th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.table-modern thead tr th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.table-modern td { padding: 12px 16px; font-size: 0.9rem; border-bottom: none; background: #edf2f8; box-shadow: none; border-top: 1px solid rgba(255,255,255,0.85); border-bottom: 1px solid rgba(184,190,199,0.12); }
.table-modern tbody tr td:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-left: 1px solid rgba(255,255,255,0.85); }
.table-modern tbody tr td:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; border-right: 1px solid rgba(184,190,199,0.12); }
.table-modern tbody tr { filter: drop-shadow(2px 2px 4px rgba(166,180,200,0.3)); transition: filter 0.15s; }
.table-modern tbody tr:hover { filter: drop-shadow(3px 3px 6px rgba(150,170,195,0.4)); }
.table-modern tbody tr:hover td { background: rgba(219,234,254,0.55); }

/* ==== PROGRESS ==== */
.progress-bar { height: 6px; background: var(--gray-200); border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--blue-500); border-radius: 3px; transition: width 0.4s ease; }

/* ==== DETAILS ==== */
details summary::-webkit-details-marker { display: none; }
details summary { cursor: pointer; user-select: none; }
details[open] summary { color: var(--blue-600); }

/* ==== PRODUCT HERO INPUT ==== */
.product-hero {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(135deg, var(--blue-50) 0%, #e8f0fe 100%);
    border: 1.5px solid var(--blue-200);
    border-left: 4px solid var(--blue-600);
    border-radius: var(--radius-lg);
}
.product-hero-icon {
    width: 38px; height: 38px; flex-shrink: 0; margin-top: 22px;
    background: var(--neu-bg-gradient); border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--blue-600); box-shadow: var(--neu-shadow-raised-sm); font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
.product-hero-field { flex: 1; min-width: 0; }
.product-hero-input {
    font-size: 1.05rem !important; font-weight: 500 !important;
    padding: 12px 16px !important;
    border: 1.5px solid var(--blue-200) !important;
    background: white !important;
}
.product-hero-input:focus {
    border-color: var(--blue-500) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15), 0 2px 8px rgba(37,99,235,0.1) !important;
}
.product-hero-input::placeholder { font-weight: 400; font-size: 0.92rem; }

/* ==== NIP HERO INPUT ==== */
.nip-hero {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1.5px solid #a7f3d0;
    border-left: 4px solid var(--success);
    border-radius: var(--radius-lg);
}
.nip-hero-icon {
    width: 38px; height: 38px; flex-shrink: 0; margin-top: 22px;
    background: var(--neu-bg-gradient); border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: #059669; box-shadow: var(--neu-shadow-raised-sm); font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(5,150,105,0.25);
}
.nip-hero-field { flex: 1; min-width: 0; }
.nip-hero-input { font-size: 1.05rem !important; font-weight: 500 !important; letter-spacing: 0.5px; }

/* ==== NAME HERO (international layout) ==== */
.name-hero {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 18px 20px;
    background: linear-gradient(135deg, var(--blue-50) 0%, #e8f0fe 100%);
    border: 1.5px solid var(--blue-200);
    border-left: 4px solid var(--blue-600);
    border-radius: var(--radius-lg);
}
.name-hero-icon {
    width: 38px; height: 38px; flex-shrink: 0; margin-top: 22px;
    background: var(--neu-bg-gradient); border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--blue-600); box-shadow: var(--neu-shadow-raised-sm); font-size: 0.9rem;
    box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
.name-hero-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* ==== SUPPLIER FORM HINT ==== */
.supplier-form-hint { font-size: 0.78rem; color: var(--gray-400); margin-top: 6px; }
.supplier-form-hint i { margin-right: 4px; font-size: 0.65rem; }

/* ==== SUPPLIER MANUAL DETAILS ==== */
.supplier-details { 
    background: var(--gray-50); border: 1px solid var(--gray-200); 
    border-radius: var(--radius-md); padding: 0; 
}
.supplier-details-summary {
    display: flex; align-items: center; gap: 8px; padding: 10px 16px;
    cursor: pointer; user-select: none; list-style: none;
}
.supplier-details-summary::-webkit-details-marker { display: none; }
.supplier-details-summary:hover { background: var(--gray-100); border-radius: var(--radius-md); }
.supplier-chevron { font-size: 0.6rem; color: var(--gray-400); margin-left: auto; transition: transform 0.2s; }
.supplier-details[open] .supplier-chevron { transform: rotate(180deg); }
.supplier-details[open] { padding: 0 16px 16px; }
.supplier-details[open] .supplier-details-summary { padding: 10px 0; }

/* ==== EMPTY STATE ==== */
.empty-state {
    text-align: center; padding: 2.5rem 1.5rem;
    color: var(--gray-400); font-size: 0.85rem;
}
.empty-state-icon { 
    width: 52px; height: 52px; margin: 0 auto 12px;
    background: var(--gray-100); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: var(--gray-300);
}
.empty-state-title { font-weight: 600; color: var(--gray-500); font-size: 0.9rem; margin-bottom: 4px; }
.empty-state-hint { font-size: 0.82rem; color: var(--gray-400); line-height: 1.5; }

/* ==== WORKFLOW COUNTER BADGES ==== */
.step-counter {
    font-size: 0.6rem; font-weight: 700; 
    background: rgba(96,165,250,0.25); color: var(--blue-400);
    padding: 1px 6px; border-radius: 8px; margin-left: 4px;
    display: none; /* shown by JS */
}
.workflow-step.active .step-counter { background: rgba(255,255,255,0.2); color: white; }

/* ==== AI PANEL ==== */
.ai-panel { background: linear-gradient(135deg, var(--gray-50), var(--blue-50)); border: 1px solid var(--blue-100); border-radius: var(--radius-lg); padding: 1.25rem; }
.ai-profile-check { display:flex; align-items:center; gap:8px; padding:8px 12px; min-height:40px; background:var(--neu-bg-gradient); border:none; border-radius:var(--radius-sm); cursor:pointer; font-size:0.85rem; font-family:inherit; font-weight:500; color:var(--gray-700); transition:all 0.15s; user-select:none; line-height:1.4; box-shadow:var(--neu-shadow-raised-sm); }
.ai-profile-check:hover { border-color:var(--blue-300); background:var(--blue-50); }
.ai-profile-check:has(input:checked) { border-color:var(--blue-400); background:linear-gradient(135deg,var(--blue-50),#e0ecff); box-shadow:0 0 0 1px var(--blue-200); }
.ai-profile-check input { accent-color:var(--blue-600); width:16px; height:16px; cursor:pointer; flex-shrink:0; }
.ai-profile-check .area-emoji { font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif; font-size:1rem; line-height:1; flex-shrink:0; }
.ai-profile-check .area-label { font-family:inherit; font-size:0.85rem; font-weight:500; }
#aiProfileDetails summary::-webkit-details-marker { display:none; }
#aiProfileDetails summary { list-style:none; }
#aiProfileDetails[open] summary .fa-chevron-down { transform:rotate(180deg); }
.ai-panel-header { display: flex; align-items: center; gap: 10px; margin-bottom: 0.75rem; }
.ai-panel-header > div:nth-child(3),
.ai-panel-header > div:nth-child(4) { text-align: right; }
.ai-icon { width: 30px; height: 30px; background: var(--blue-600); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: white; font-size: 0.75rem; }

/* ==== SUPPLIER CARD HOVER ==== */
.group:hover .delete-btn { opacity: 1 !important; }

/* ==== ANIMATIONS ==== */
.fade-in { animation: fadeIn 0.35s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ==== LOADING ==== */
.loading-overlay { position: fixed; inset: 0; background: #e0e5ec; display: flex; align-items: center; justify-content: center; z-index: 9999; transition: opacity 0.25s; }
.loading-spinner { width: 36px; height: 36px; border: 3px solid var(--gray-200); border-top-color: var(--blue-600); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes auction-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ==== SCROLLBAR ==== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* ========================================
   RESPONSIVE — MOBILE FIRST FIXES
   ======================================== */
@media (max-width: 768px) {
    body { font-size: 15px; background: #dde3ec; }
    .topbar-inner { padding: 0 12px; height: 50px; }
    .topbar-actions .topbar-btn span { display: none; }
    .topbar-brand { font-size: 0.88rem; gap: 8px; }
    
    .main-container { padding: 0.75rem 0.6rem 2rem; }
    .section-card { margin-bottom: 1.35rem; border-radius: var(--radius-lg); box-shadow: var(--neu-shadow-raised); }
    .section-header { padding: 1rem; border-bottom-width: 2px; }
    /* Stronger header tints on mobile for card distinction */
    #section-spec > .section-header { background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%); }
    #section-suppliers > .section-header { background: linear-gradient(135deg, #ccfbf1 0%, #f0fdfa 100%); }
    #section-criteria > .section-header { background: linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%); }
    #section-offers > .section-header { background: linear-gradient(135deg, #e0e7ff 0%, #eef2ff 100%); }
    .section-body { padding: 1rem; }
    .section-title { font-size: 1.12rem; }
    .section-subtitle { font-size: 0.78rem; }
    
    /* Bigger form elements on mobile */
    .form-input, .input-modern { padding: 12px 14px; font-size: 16px; min-height: 48px; }
    .form-select { padding: 12px 14px; font-size: 16px; min-height: 48px; }
    .form-label { font-size: 0.85rem; margin-bottom: 6px; }
    .btn { padding: 12px 18px; font-size: 0.9rem; min-height: 48px; }
    .btn-sm { padding: 10px 14px; font-size: 0.86rem; min-height: 44px; }
    
    .hint-box { font-size: 0.88rem; padding: 12px 14px; }
    
    .workflow-nav { padding: 0; top: 50px; }
    .workflow-steps { padding: 0 0.5rem; }
    .workflow-step span:not(.step-num):not(.step-counter) { font-size: 0.72rem; }
    .workflow-step { padding: 10px 10px; gap: 5px; font-size: 0.75rem; }
    
    /* AI panel */
    .ai-panel { padding: 1rem; }
    
    /* Product hero - compact on mobile */
    .product-hero { padding: 14px; gap: 10px; }
    .product-hero-icon { width: 32px; height: 32px; margin-top: 20px; font-size: 0.78rem; }
    .product-hero-input { font-size: 16px !important; }
    /* NIP hero - compact on mobile */
    .nip-hero { padding: 14px; gap: 10px; }
    .nip-hero-icon { width: 32px; height: 32px; margin-top: 20px; font-size: 0.78rem; }
    .nip-hero-input { font-size: 16px !important; }
    /* Name hero - compact on mobile */
    .name-hero { padding: 14px; gap: 10px; }
    .name-hero-icon { width: 32px; height: 32px; margin-top: 20px; font-size: 0.78rem; }
    .ai-panel-header { 
        flex-wrap: wrap; gap: 8px;
    }
    /* Row 1: icon + title take full width */
    .ai-panel-header > .ai-icon { width: 26px; height: 26px; font-size: 0.7rem; flex-shrink: 0; }
    .ai-panel-header > div:nth-child(2) { flex: 1 1 calc(100% - 44px); min-width: 0; }
    
    /* Row 2: tier + slider side by side, each 50% */
    .ai-panel-header > div:nth-child(3),
    .ai-panel-header > div:nth-child(4) {
        flex: 1 1 calc(50% - 8px);
        min-width: 120px;
        text-align: left !important;
    }
    .ai-panel-header > div:nth-child(3) select { width: 100%; min-width: 0; }
    
    #aiTierInfo { font-size: 0.72rem; padding: 6px 10px; }
    
    /* Knockout form — stack on mobile */
    #knockoutList > div { flex-wrap: wrap; }
    #knockoutList > div > div:first-child { flex: 1 1 100%; }

    /* Scenarios and Templates lists — stack rows */
    #scenariosList > div { flex-wrap: wrap; }
    #templatesList > div { flex-wrap: wrap; }
    #templatesList > div > div:first-child { flex: 1 1 100%; min-width: 0; }

    /* Scenario tabs — smooth horizontal scroll */
    #offersTable > div:first-child {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #offersTable > div:first-child::-webkit-scrollbar { display: none; }

    /* Offers table inputs — compact but readable */
    #offersTable input.form-input {
        width: 85px !important;
        padding: 8px !important;
        font-size: 16px !important; /* prevents iOS zoom */
        min-height: 44px !important;
    }
    /* Ukryj mniej ważne znaczniki w komórkach ofert na mobile */
    .offer-cell-gap { display: none; }
    .offer-cell-copied { display: none; }
    .offer-cell-override { font-size: 0 !important; overflow: hidden; width: 16px; height: 16px; }
    .offer-cell-override::before { content: '⚠️'; font-size: 0.6rem; }

    /* Tabele — mniejsze spacingi i lżejsze cienie na mobile */
    .table-modern { border-spacing: 0 3px; }
    .table-modern tbody tr { filter: none; border-bottom: 1px solid var(--gray-200); }
    .table-modern tbody tr:hover { filter: none; }

    /* Results table — reduce padding */
    #results .table-modern td { padding: 8px 10px; font-size: 0.82rem; }
    #results .table-modern th { padding: 8px 10px; }
    /* Zamień progress bar na etykietę % na mobile */
    #results .progress-bar { display: none; }
    #results .result-bar-wrap { display: none !important; }
    #results .result-out-of { display: none !important; }
    #results .result-pct-mobile { display: block !important; }

    /* Sensitivity panel */
    #sensitivityPanel { margin: 0 !important; border-radius: 0 !important; }
    .sensitivity-sliders { grid-template-columns: 1fr !important; }

    /* Knockout inputs — bigger touch targets */
    #knockoutList input { font-size: 16px !important; min-height: 44px !important; }
    #knockoutList button { min-height: 44px !important; min-width: 44px !important; }

    /* All icon-only buttons — ensure 44px touch targets */
    button:has(> .fa-trash),
    button:has(> .fa-file-export) {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

@media (max-width: 480px) {
    .topbar-divider { display: none; }
    .topbar-brand .app-title { display: none; }
    .main-container { padding: 0.5rem 0.4rem 2rem; }
    .section-card { margin-bottom: 1.15rem; border-radius: var(--radius-md); }
    .section-header { flex-direction: column; align-items: flex-start; gap: 8px; padding: 0.85rem 0.85rem; }
    
    /* Product hero - icon hidden on narrow */
    .product-hero-icon { display: none; }
    .product-hero { border-left-width: 4px; }
    /* NIP hero - icon hidden on narrow */
    .nip-hero-icon { display: none; }
    .nip-hero { border-left-width: 4px; }
    /* Name hero - icon hidden on narrow */
    .name-hero-icon { display: none; }
    .name-hero { border-left-width: 4px; }
    
    /* AI panel: full stack on narrow screens */
    .ai-panel-header { gap: 6px; }
    .ai-panel-header > div:nth-child(3),
    .ai-panel-header > div:nth-child(4) {
        flex: 1 1 100%;
        min-width: 0;
    }
    #aiQualityTier { font-size: 16px; min-height: 44px; width: 100%; }
    #aiWebSearchLimit { width: 100%; height: 28px; }
    #aiTierInfo { font-size: 0.7rem; }
    #aiDiscoverBtn { width: 100%; }
    #aiLastCost { font-size: 0.7rem; }

    /* Workflow nav — ukryj etykiety na wąskich ekranach */
    .workflow-step span:not(.step-num):not(.step-counter) { display: none; }

    /* Templates header — icon-only on very small screens */
    .btn-sm span[data-i18n="templates.exportAllBtn"],
    .btn-sm span[data-i18n="templates.importBtn"] { display: none; }

    /* Scenarios — stack name and description vertically */
    #scenariosList > div {
        flex-direction: column;
        align-items: stretch;
    }
    #scenariosList > div > div[style*="width:24px"] {
        align-self: flex-start;
    }
    #scenariosList input[type="text"] {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Knockout inputs full width */
    #knockoutList input[type="text"],
    #knockoutList input[type="number"] {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* Desktop: more breathing room */
@media (min-width: 769px) {
    .section-card { margin-bottom: 2rem; }
}

/* ============================================
   MOBILE FIXES — Baza dostawców, AI Discovery,
   Picker modal, formularze, tabele
   ============================================ */
@media (max-width: 768px) {
    /* --- DB main tabs --- */
    .db-main-tab { padding: 10px 12px; font-size: 0.82rem; gap: 5px; border-radius: 10px; }
    .db-main-tab i { font-size: 0.75rem; }
    .db-main-tab .tab-badge { font-size: 0.68rem; padding: 1px 5px; }
    .db-tabs-row { padding: 10px 1rem; gap: 6px; }

    /* --- DB toolbar: stack search + filters + buttons --- */
    .db-toolbar { padding: 10px; gap: 8px; }
    .db-search { min-width: 0 !important; flex: 1 1 100% !important; font-size: 16px !important; padding: 10px 12px; min-height: 44px; }
    .db-filter { flex: 1 1 calc(50% - 4px) !important; min-width: 0 !important; font-size: 16px !important; padding: 10px 12px; min-height: 44px; }
    .db-toolbar > button { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 10px 12px !important; font-size: 0.78rem !important; min-height: 44px; }
    .db-toolbar > button > span { font-size: 0.72rem; }

    /* --- DB table: hide category + date columns, compact --- */
    .db-table-wrap table th:nth-child(2),
    .db-table-wrap table td:nth-child(2),
    .db-table-wrap table th:nth-child(5),
    .db-table-wrap table td:nth-child(5) { display: none; }
    .db-table-wrap table td { padding: 10px 8px; font-size: 0.82rem; }
    .db-table-wrap table th { padding: 8px; font-size: 0.78rem; }

    /* --- Supplier detail tabs: horizontal scroll --- */
    .stab-bar { width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .stab-bar::-webkit-scrollbar { display: none; }
    .stab-btn { padding: 7px 10px; font-size: 0.76rem; min-height: 38px; }
    .stab-btn i { margin-right: 2px; }

    /* --- Supplier detail: field cards smaller grid --- */
    .db-row-details div[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; }

    /* --- Edit mode: fields stack --- */
    .db-row-details input, .db-row-details select, .db-row-details textarea { font-size: 16px !important; min-height: 44px; }
    .db-row-details button { min-height: 44px; }

    /* --- Manual add form --- */
    #dbAddForm { padding: 12px 14px !important; }
    #dbAddForm div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    #dbAddForm .form-input { font-size: 16px !important; min-height: 44px; }
    #dbAddForm button { min-height: 44px; }

    /* --- AI Discovery standalone panel --- */
    #dbAiPanel { padding: 12px 14px !important; }
    #dbAiPanel div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    #dbAiPanel .form-input, #dbAiPanel input, #dbAiPanel select { font-size: 16px !important; min-height: 44px; }
    #dbAiPanel button { min-height: 44px; }

    /* --- AI categories checkboxes grid --- */
    #dbAiPanel details div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .db-ai-category { width: 18px; height: 18px; }

    /* --- Prompt preview --- */
    #dbAiPromptPreview { padding: 10px !important; }
    #dbAiPromptText { font-size: 13px !important; min-height: 100px; }

    /* --- AI Discovery results: stack card content + buttons vertically --- */
    #aiDiscoverResults div[style*="flex-wrap:wrap"],
    #dbAiResults div[style*="flex-wrap:wrap"] {
        flex-direction: column !important;
    }
    /* Buttons full-width in discovery results */
    #aiDiscoverResults div[style*="min-width:140px"],
    #aiDiscoverResults div[style*="flex-shrink:0"] {
        min-width: 100% !important; width: 100%;
    }
    #aiDiscoverResults button,
    #dbAiResults button { width: 100%; min-height: 44px; }

    /* --- DB Picker modal: full-screen on mobile --- */
    #dbPickerOverlay > div {
        max-width: 100% !important;
        max-height: 100vh !important;
        height: 100%;
        border-radius: 0 !important;
    }
    #dbPickerOverlay input[type="text"] { font-size: 16px !important; min-height: 44px; }
    #dbPickerOverlay select { font-size: 16px !important; min-height: 44px; }
    /* Picker footer: stack buttons */
    #dbPickerOverlay > div > div:last-child {
        flex-direction: column !important; gap: 8px !important;
    }
    #dbPickerOverlay > div > div:last-child > div { width: 100%; }
    #dbPickerAddBtn { width: 100% !important; min-height: 48px !important; font-size: 0.9rem !important; }

    /* --- Analysis cards: better touch targets --- */
    .analysis-card { padding: 12px !important; gap: 10px !important; }
    .analysis-card div[data-actions] button { min-height: 36px; min-width: 36px; }
    .analysis-card div[data-namebadge] { font-size: 0.86rem !important; }

    /* --- Enrich results inside supplier cards --- */
    div[data-ai-result] div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

    /* --- RFQ panel --- */
    div[id^="rfqPanel"] { padding: 10px !important; }
    div[id^="rfqPanel"] input,
    div[id^="rfqPanel"] select { font-size: 16px !important; }

    /* --- Analysis filter buttons --- */
    .analyses-filter-btn { padding: 6px 10px !important; font-size: 0.78rem !important; min-height: 36px; }

    /* --- Prevent iOS zoom on ALL inputs in DB sections --- */
    #dbTabSuppliers input,
    #dbTabSuppliers select,
    #dbTabSuppliers textarea,
    #dbTabAnalyses input,
    #dbTabAnalyses select,
    #dbTabDocuments input { font-size: 16px !important; }

    /* --- Auth modal --- */
    .auth-modal { margin: 0.5rem; max-height: 90vh; overflow-y: auto; }
}

@media (max-width: 480px) {
    /* --- DB main tabs: icon-only --- */
    .db-main-tab span:not(.tab-badge) { display: none; }
    .db-main-tab { padding: 10px 14px; border-radius: 10px; }

    /* --- DB toolbar: ukryj tekst przycisków na wąskich ekranach --- */
    .db-toolbar > button > span { display: none; }

    /* --- DB table: also hide location --- */
    .db-table-wrap table th:nth-child(3),
    .db-table-wrap table td:nth-child(3) { display: none; }

    /* --- Supplier field cards: single column --- */
    .db-row-details div[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

    /* --- AI panels: buttons full-width, stack vertically --- */
    #dbAiPanel button, #dbAddForm button { width: 100%; }

    /* --- Supplier table: enlarge touch targets --- */
    .db-table-wrap table tr { min-height: 48px; }
    .db-table-wrap table td:first-child strong { font-size: 0.88rem; }

    /* --- Analysis card: fully stacked --- */
    .analysis-card { flex-direction: column !important; align-items: stretch !important; }
    .analysis-card div[data-actions] { justify-content: flex-start; }

    /* --- Enrich scoring grid: single column --- */
    div[data-ai-result] div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

    /* --- DB supplier detail: edit/delete buttons stack --- */
    .db-row-details div[style*="display:flex"][style*="gap:8px"][style*="border-top"] {
        flex-direction: column;
    }
    .db-row-details div[style*="border-top"] button { width: 100%; min-height: 44px; }

    /* --- Admin panel: grid stack, modal limits --- */
    #adminCreateModal > div, #adminQrModal > div { width: 95%; padding: 20px; }
    #adminCreateModal input, #adminCreateModal select { font-size: 16px !important; }
    #dbTabAdmin div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .admin-company-inner { flex-direction: column; align-items: flex-start; }
    .perm-icon { width: 24px; font-size: 0.9rem; }
}

/* ==== COMPAT: classes used by JS modules ==== */
.glass { background: white; }
.card-hover {}

/* ============================================
   MODE SWITCHER — Kalkulator / Baza dostawców
   ============================================ */
/* Kalkulator button is styled via .topbar-calc-btn */
.topbar-calc-btn { background: rgba(255,255,255,0.15); color: white; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; border: 1px solid rgba(255,255,255,0.2); }
.topbar-calc-btn:hover { background: rgba(255,255,255,0.25); }
@media (max-width: 600px) { .topbar-calc-btn span { display: none; } }

/* ============================================
   AUTH BUTTON — przycisk logowania/usera
   ============================================ */
.auth-btn { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.75); padding: 5px 11px; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: all 0.15s; font-family: inherit; display: flex; align-items: center; gap: 6px; }
.auth-btn:hover { background: rgba(255,255,255,0.1); color: white; border-color: rgba(255,255,255,0.35); }
.auth-btn.logged-in { border-color: #6ee7b7; color: white; background: rgba(110,231,183,0.15); }
.auth-btn.logged-in:hover { background: rgba(110,231,183,0.25); }

/* ============================================
   HAMBURGER MENU
   ============================================ */
.hamburger-wrap { position: relative; }
.hamburger-btn { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.75); padding: 5px 11px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 500; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px; transition: all 0.15s; }
.hamburger-btn:hover { background: rgba(255,255,255,0.1); color: white; border-color: rgba(255,255,255,0.35); }
.hamburger-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--neu-bg-gradient); border-radius: var(--radius-md); box-shadow: var(--neu-shadow-raised); min-width: 200px; z-index: 500; overflow: hidden; overflow-y: auto; max-height: 80vh; border: none; }
.hamburger-dropdown.open { display: block; }
.hamburger-item { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 0.87rem; color: var(--gray-700); cursor: pointer; border: none; background: transparent; width: 100%; text-align: left; font-family: inherit; transition: background 0.1s; }
.hamburger-item:hover { background: var(--gray-50); color: var(--blue-700); }
.hamburger-item i { width: 16px; text-align: center; color: var(--gray-400); }
.hamburger-item:hover i { color: var(--blue-500); }
.hamburger-sep { height: 1px; background: var(--gray-100); margin: 4px 0; }
.analyses-filter-btn { padding:5px 13px;border:none;background:#edf2f8;border-radius:20px;font-size:0.8rem;font-weight:500;color:var(--gray-600);cursor:pointer;font-family:inherit;transition:all 0.15s;border-top:1px solid rgba(255,255,255,0.85);filter:drop-shadow(1px 1px 2px rgba(166,180,200,0.25)); }
.analyses-filter-btn:hover { color:var(--blue-600);filter:drop-shadow(2px 2px 3px rgba(150,170,195,0.35)); }
.analyses-filter-btn.active { background:var(--blue-50);color:var(--blue-700);font-weight:600;box-shadow:var(--neu-shadow-inset);filter:none;border-top:none; }
.analysis-card { background:#edf2f8;border:none;border-radius:var(--radius-md);padding:14px 16px;margin-bottom:2px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;transition:filter 0.15s;box-shadow:none;border-top:1px solid rgba(255,255,255,0.85);border-left:1px solid rgba(255,255,255,0.85);border-right:1px solid rgba(184,190,199,0.12);border-bottom:1px solid rgba(184,190,199,0.12);filter:drop-shadow(2px 2px 4px rgba(166,180,200,0.3)); }
.analysis-card:hover { filter:drop-shadow(3px 3px 6px rgba(150,170,195,0.4));background:rgba(219,234,254,0.55); }
.analysis-card.draft { border-left:3px solid #f59e0b; }
.analysis-card.completed { border-left:3px solid #10b981; }
/* Override inline-styled Load/Wczytaj button */
.analysis-card div[data-actions] button:first-child {
    background: #e4ecf6 !important;
    color: var(--blue-700) !important;
    box-shadow: none;
    border: 1px solid rgba(255,255,255,0.7);
    filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.3));
}
.analysis-card div[data-actions] button:first-child:hover {
    filter: drop-shadow(2px 2px 3px rgba(150,170,195,0.4));
}
.analysis-card div[data-actions] button:first-child:active {
    box-shadow: var(--neu-shadow-pressed) !important;
    filter: none;
}

/* ============================================
   AUTH MODAL
   ============================================ */
.auth-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; padding: 1rem; }
.auth-overlay.open { display: flex; }
.auth-modal { background: var(--neu-bg-gradient); border-radius: var(--radius-xl); box-shadow: var(--neu-shadow-raised); width: 100%; max-width: 400px; overflow: hidden; }
.auth-modal-header { background: linear-gradient(135deg, var(--blue-800), var(--blue-900)); padding: 1.5rem; color: white; }
.auth-modal-title { font-size: 1.1rem; font-weight: 600; margin-bottom: 4px; }
.auth-modal-subtitle { font-size: 0.82rem; color: rgba(255,255,255,0.65); }
.auth-modal-body { padding: 1.5rem; }
.auth-step { display: none; }
.auth-step.active { display: block; }
.auth-input { width: 100%; padding: 11px 14px; border: none; border-radius: var(--radius-md); font-size: 0.95rem; font-family: inherit; outline: none; transition: box-shadow 0.15s; box-sizing: border-box; background: var(--neu-bg); box-shadow: var(--neu-shadow-inset); }
.auth-input:focus { border-color: var(--blue-500); }
.auth-input.error { border-color: #ef4444; }
.auth-btn-primary { width: 100%; padding: 11px; background: var(--blue-600); color: white; border: none; border-radius: var(--radius-md); font-size: 0.92rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; margin-top: 1rem; }
.auth-btn-primary:hover { background: var(--blue-700); }
.auth-btn-primary:disabled { background: var(--gray-300); cursor: not-allowed; }
.auth-btn-secondary { background: transparent; border: none; color: var(--blue-600); font-size: 0.82rem; cursor: pointer; font-family: inherit; padding: 4px 0; text-decoration: underline; }
.auth-error { color: #ef4444; font-size: 0.82rem; margin-top: 6px; min-height: 18px; }
.auth-info { color: var(--gray-500); font-size: 0.82rem; margin-top: 6px; }
.auth-pin-hint { font-size: 0.78rem; color: var(--gray-400); margin-top: 4px; }
.auth-close { float: right; background: transparent; border: none; color: rgba(255,255,255,0.6); font-size: 1.2rem; cursor: pointer; line-height: 1; padding: 0; }
.auth-close:hover { color: white; }
.auth-divider { text-align: center; margin: 1rem 0; position: relative; }
.auth-divider::before { content: ''; position: absolute; left: 0; top: 50%; width: 100%; height: 1px; background: var(--gray-200); }
.auth-divider span { background: white; padding: 0 8px; font-size: 0.78rem; color: var(--gray-400); position: relative; }
.user-info-box { background: var(--gray-50); border-radius: var(--radius-md); padding: 1rem; margin-bottom: 1rem; }

/* Profile section in auth modal */
.profile-section { text-align: center; margin-bottom: 1.2rem; }
.profile-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(145deg, var(--blue-500), var(--blue-700)); color: white; font-size: 1.3rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; box-shadow: 0 4px 12px rgba(59,130,246,0.25); }
.profile-phone { font-size: .85rem; color: var(--gray-500); font-weight: 500; }
.profile-company { font-size: .82rem; color: var(--gray-400); margin-top: 2px; }
.profile-form { display: flex; flex-direction: column; gap: 4px; }
.profile-label { font-size: .78rem; font-weight: 600; color: var(--gray-500); text-transform: uppercase; letter-spacing: .03em; margin-top: 8px; }
.profile-msg { font-size: .82rem; min-height: 1.2em; text-align: center; margin-top: 6px; transition: color .2s; }
.profile-msg.success { color: #10b981; }
.profile-msg.error { color: #ef4444; }
.profile-sep { height: 1px; background: linear-gradient(90deg, transparent, var(--gray-300), transparent); margin: 1rem 0 .5rem; }
.user-info-phone { font-weight: 600; color: var(--gray-800); font-size: 0.95rem; }
.user-info-plan { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; background: var(--blue-100); color: var(--blue-700); }

/* ============================================
   BAZA DOSTAWCÓW — panel
   ============================================ */
#db-panel { display: none; }
#db-panel.active { display: block; }
.db-toolbar { display: flex; gap: 10px; margin-bottom: 1.25rem; flex-wrap: wrap; align-items: center; }
.db-search { flex: 1; min-width: 200px; padding: 9px 14px; border: 1.5px solid var(--gray-200); border-radius: var(--radius-md); font-size: 0.88rem; font-family: inherit; outline: none; }
.db-search:focus { border-color: var(--blue-400); }
.db-filter { padding: 9px 12px; border: none; border-radius: var(--radius-md); font-size: 0.85rem; font-family: inherit; background: var(--neu-bg); cursor: pointer; outline: none; box-shadow: var(--neu-shadow-pressed); transition: box-shadow 0.15s; }
.db-filter:focus { box-shadow: var(--neu-shadow-pressed), 0 0 0 2px rgba(59,130,246,0.3); }
.db-empty { text-align: center; padding: 3rem 1rem; color: var(--gray-400); }
.db-empty i { font-size: 2.5rem; margin-bottom: 0.75rem; display: block; }
.db-table-wrap { overflow-x: auto; background: linear-gradient(145deg, #eff4fa, #e8eff7); border-radius: var(--radius-md); box-shadow: inset 1px 1px 3px rgba(184,190,199,0.15), inset -1px -1px 3px rgba(255,255,255,0.5); padding: 10px; }
.db-status-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 0.72rem; font-weight: 600; }
.db-status-new        { background: #dbeafe; color: #1d4ed8; }
.db-status-contacted  { background: #fef9c3; color: #854d0e; }
.db-status-offer_received { background: #d1fae5; color: #065f46; }
.db-status-rejected   { background: #fee2e2; color: #991b1b; }
.db-status-selected   { background: #ede9fe; color: #5b21b6; }
.db-row-details { display: none; background: var(--neu-bg); padding: 1rem 1.5rem; border-top: none; box-shadow: var(--neu-shadow-inset); }
.db-row-details.open { display: block; }
.db-detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.db-detail-item label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; color: var(--gray-500); display: block; margin-bottom: 3px; }
.db-detail-item span { font-size: 0.87rem; color: var(--gray-700); }
.db-notes-input { width: 100%; padding: 8px 10px; border: none; border-radius: var(--radius-sm); font-size: 0.85rem; font-family: inherit; resize: vertical; min-height: 60px; box-sizing: border-box; background: var(--neu-bg); box-shadow: var(--neu-shadow-inset); }
.db-save-btn { margin-top: 6px; padding: 6px 14px; background: #e4ecf6; color: #059669; border: none; border-radius: var(--radius-sm); font-size: 0.82rem; cursor: pointer; font-family: inherit; border-top: 1px solid rgba(255,255,255,0.7); filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.25)); font-weight: 600; transition: filter 0.15s; }
.db-save-btn:hover { filter: drop-shadow(2px 2px 3px rgba(150,170,195,0.35)); }
/* Toolbar i filtry */
.db-toolbar { display: flex; gap: 10px; margin-bottom: 1.25rem; flex-wrap: wrap; align-items: center; padding: 12px 14px; background: #edf2f8; border: none; border-radius: var(--radius-md); border-top: 1px solid rgba(255,255,255,0.85); border-bottom: 1px solid rgba(184,190,199,0.12); filter: drop-shadow(2px 2px 4px rgba(166,180,200,0.3)); }
.db-search { flex: 1; min-width: 200px; padding: 8px 13px; border: none; border-radius: var(--radius-sm); font-size: 0.88rem; font-family: inherit; outline: none; background: var(--neu-bg); box-shadow: var(--neu-shadow-inset); }
.db-search:focus { box-shadow: var(--neu-shadow-inset), 0 0 0 2px rgba(59,130,246,0.3); }
.db-filter { padding: 8px 12px; border: none; border-radius: var(--radius-sm); font-size: 0.85rem; font-family: inherit; background: var(--neu-bg); box-shadow: var(--neu-shadow-inset); cursor: pointer; outline: none; color: var(--gray-700); font-weight: 500; }
.db-filter:focus { border-color: var(--blue-500); }
/* Górne zakładki sekcji DB */
.db-main-tab { padding: 10px 18px; border: none; background: #edf2f8; border-radius: 12px; font-size: 0.875rem; cursor: pointer; font-family: inherit; font-weight: 500; color: var(--gray-500); transition: all 0.2s; display: flex; align-items: center; gap: 7px; border-top: 1px solid rgba(255,255,255,0.85); filter: drop-shadow(2px 2px 3px rgba(166,180,200,0.3)); }
.db-main-tab:hover { color: var(--blue-600); filter: drop-shadow(3px 3px 5px rgba(150,170,195,0.4)); }
.db-main-tab.active { color: var(--blue-700); font-weight: 700; background: #e4ecf6; box-shadow: inset 2px 2px 5px rgba(163,177,198,0.4), inset -2px -2px 5px rgba(255,255,255,0.7); filter: none; border-top: none; }
.db-main-tab .tab-badge { background: #e4ecf6; color: var(--blue-700); border-radius: 10px; padding: 1px 7px; font-size: 0.72rem; font-weight: 700; filter: drop-shadow(1px 1px 1px rgba(166,180,200,0.2)); }
.db-main-tab.active .tab-badge { background: var(--blue-600); color: white; filter: none; }
/* Wewnętrzne zakładki karty dostawcy */
.stab-bar { display: flex; gap: 4px; background: var(--neu-bg); border-radius: var(--radius-sm); padding: 3px; margin-bottom: 14px; width: fit-content; box-shadow: var(--neu-shadow-inset); }
.stab-btn { padding: 5px 14px; background: transparent; border: none; border-radius: 5px; font-size: 0.8rem; font-weight: 500; color: var(--gray-500); cursor: pointer; font-family: inherit; transition: all 0.15s; white-space: nowrap; }
.stab-btn:hover { color: var(--gray-700); background: linear-gradient(145deg, #e8eef4, #d8e2eb); }
.stab-btn.active { background: #edf2f8; color: var(--blue-700); font-weight: 700; border-top: 1px solid rgba(255,255,255,0.85); filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.25)); }
.stab-btn .stab-badge { background: var(--blue-600); color: white; border-radius: 8px; padding: 0px 5px; font-size: 0.68rem; font-weight: 700; margin-left: 4px; vertical-align: middle; }

/* Tab icon colors — subtle differentiation */
.stab-btn[data-tab="data"] i { color: #3b82f6; }
.stab-btn[data-tab="history"] i { color: #8b5cf6; }
.stab-btn[data-tab="analyses"] i { color: #f59e0b; }
.stab-btn[data-tab="notes"] i { color: #10b981; }
.stab-btn[data-tab="contacts"] i { color: #6366f1; }
.stab-btn[data-tab="tags"] i { color: #ec4899; }
.stab-btn[data-tab="enrich"] i { color: #06b6d4; }
.stab-btn[data-tab="docs"] i { color: #f97316; }
.stab-btn.active i { color: var(--blue-700); }

/* ============ FAB ============ */
#fabSave {
    position: fixed; bottom: 24px; right: 24px; z-index: 9000;
    background: linear-gradient(135deg, #2563eb, #1d4ed8); color: white; border: none;
    border-radius: 16px; padding: 12px 22px; font-size: 0.88rem; font-weight: 700;
    font-family: inherit; cursor: pointer; box-shadow: 0 4px 16px rgba(37,99,235,0.4);
    transition: all 0.3s ease; display: flex; align-items: center; gap: 8px;
}
#fabSave.fab-hidden {
    transform: translateY(80px); opacity: 0; pointer-events: none; display: none;
}
#fabSave.fab-visible {
    transform: translateY(0); opacity: 1; pointer-events: auto; display: flex !important;
}
#fabSave:hover {
    box-shadow: 0 6px 24px rgba(37,99,235,0.5); transform: translateY(-2px);
}
#fabSave:active { transform: translateY(0); }
@media (max-width:768px) {
    #fabSave { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; right: 16px; padding: 14px 20px; font-size: 0.85rem; border-radius: 14px; }
}
@media (max-width:480px) {
    #fabSave { bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; right: 12px; left: 12px; justify-content: center; border-radius: 14px; }
}

/* ============================================
   PHASE 2 — Extracted inline styles
   ============================================ */

/* --- Topbar: Company Switcher --- */
.company-switcher { position: relative; }
.company-switcher-btn {
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px; padding: 5px 12px; color: white; font-size: 0.78rem;
    font-weight: 600; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 6px; max-width: 200px;
}
.company-switcher-btn:hover { background: rgba(255,255,255,0.18); }
.company-switcher-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-switcher-dropdown {
    position: absolute; top: calc(100% + 4px); right: 0; background: white;
    border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    min-width: 260px; max-height: 320px; overflow-y: auto; z-index: 200;
}
.company-switcher-header {
    padding: 10px 14px; border-bottom: 1px solid #e5e7eb; font-size: 0.75rem;
    font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.5px;
}

/* --- Topbar: Icons (small decorative) --- */
.icon-xs { font-size: 0.5rem; opacity: 0.5; }
.icon-sm { font-size: 0.7rem; opacity: 0.7; }
.icon-chevron-lang { font-size: 0.55rem; opacity: 0.5; margin-left: 2px; }

/* --- Topbar: Language flags --- */
.lang-flag {
    font-size: 0.55rem; font-weight: 700; display: inline-flex;
    width: 20px; height: 14px; border-radius: 3px;
    align-items: center; justify-content: center;
}
.lang-flag-pl { color: white; background: #dc2626; }
.lang-flag-en { color: white; background: #3b82f6; }
.lang-flag-de { color: white; background: #1e293b; }
.lang-flag-fr { color: white; background: #4f46e5; }

/* --- Topbar: Menu items --- */
.menu-item-new { color: var(--blue-700); font-weight: 600; }
.menu-item-new i { color: var(--blue-600); }
.menu-sep-sm { margin: 4px 0; }
.menu-draft-badge {
    display: none; margin-left: 4px; background: #f59e0b; color: white;
    border-radius: 10px; padding: 1px 7px; font-size: 0.72rem; font-weight: 700;
}
.icon-pdf { color: #dc2626; }
.icon-admin { color: #2563eb; }

/* --- Loading overlay --- */
.loading-spinner-wrap { margin: 0 auto 12px; }
.loading-text { color: var(--gray-500); font-size: 0.88rem; }

/* --- Form: Labels --- */
.form-label-sm {
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    color: var(--gray-500); display: block; margin-bottom: 4px; letter-spacing: 0.04em;
}
.form-label-md {
    display: block; font-size: 0.82rem; font-weight: 600;
    color: var(--gray-600); margin-bottom: 4px;
}
.form-label-ai {
    font-size: 0.75rem; font-weight: 600; color: var(--blue-700);
    margin-bottom: 4px; display: block;
}
.form-label-ai-secondary {
    font-size: 0.75rem; font-weight: 600; color: var(--gray-500);
    margin-bottom: 4px; display: block;
}

/* --- Form: Inputs --- */
.input-full { width: 100%; box-sizing: border-box; }
.input-flex { flex: 1; min-width: 160px; box-sizing: border-box; }
.input-styled {
    width: 100%; padding: 10px 12px; border: none;
    border-radius: 8px; font-size: 0.9rem; font-family: inherit; box-sizing: border-box;
    background: var(--neu-bg); box-shadow: var(--neu-shadow-pressed); outline: none; transition: box-shadow 0.15s;
}
.input-styled:focus { box-shadow: var(--neu-shadow-pressed), 0 0 0 2px rgba(59,130,246,0.3); }
.checkbox-accent { accent-color: var(--blue-600); }

/* --- Form: Grid --- */
.form-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px; margin-bottom: 12px;
}
.form-grid-2col {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px;
}
.col-full { grid-column: 1 / -1; }

/* --- Buttons: Toolbar --- */
.btn-success-sm {
    padding: 6px 14px; background: var(--neu-bg-gradient); color: #059669; border: none;
    border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600;
    cursor: pointer; font-family: inherit; white-space: nowrap; box-shadow: var(--neu-shadow-raised-sm);
}
.btn-primary-sm {
    padding: 6px 14px; background: var(--neu-bg-gradient); color: var(--blue-700);
    border: none; border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600;
    cursor: pointer; font-family: inherit; white-space: nowrap; box-shadow: var(--neu-shadow-raised-sm);
}
.btn-save-sm {
    padding: 7px 18px; background: var(--neu-bg-gradient); color: #059669; border: none;
    border-radius: var(--radius-md); font-size: 0.84rem; font-weight: 600;
    cursor: pointer; font-family: inherit; box-shadow: var(--neu-shadow-raised-sm);
}
.btn-cancel-sm {
    padding: 7px 14px; background: var(--neu-bg-gradient); color: var(--gray-500);
    border: none; border-radius: var(--radius-md);
    font-size: 0.84rem; cursor: pointer; font-family: inherit;
    box-shadow: var(--neu-shadow-raised-sm); transition: all 0.15s;
}
.btn-cancel-sm:hover { box-shadow: var(--neu-shadow-raised); color: var(--gray-700); }
.btn-lookup-sm {
    padding: 7px 16px; background: var(--neu-bg-gradient); color: #059669; border: none;
    border-radius: var(--radius-md); font-size: 0.84rem; font-weight: 600;
    cursor: pointer; font-family: inherit; white-space: nowrap; box-shadow: var(--neu-shadow-raised-sm);
}
.btn-secondary-md {
    padding: 10px 20px; background: var(--neu-bg-gradient); border: none;
    border-radius: 8px; font-size: 0.88rem; cursor: pointer; font-family: inherit;
    box-shadow: var(--neu-shadow-raised-sm); transition: all 0.15s;
}
.btn-secondary-md:hover { box-shadow: var(--neu-shadow-raised); }
.btn-close-bare {
    background: none; border: none; font-size: 1.2rem; cursor: pointer;
    color: var(--gray-400); padding: 4px;
}

/* --- Prompt preview / editable textarea --- */
.prompt-preview-box {
    margin-top: 14px; padding: 14px 16px;
    background: var(--neu-bg-gradient);
    border: none; border-radius: var(--radius-md);
    box-shadow: var(--neu-shadow-inset);
}
.prompt-preview-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 10px; flex-wrap: wrap;
}
.prompt-label-text {
    display: flex; align-items: center; gap: 4px;
    font-size: 0.8rem; font-weight: 600; color: var(--gray-600);
}
.text-mono-sm {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem; color: var(--gray-400);
}
.textarea-code {
    width: 100%; min-height: 180px;
    padding: 12px 14px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.8rem; line-height: 1.55;
    color: var(--gray-700);
    background: var(--neu-bg);
    border: none; border-radius: var(--radius-sm);
    box-shadow: var(--neu-shadow-pressed);
    resize: vertical;
    box-sizing: border-box;
}
.textarea-code:focus {
    outline: none;
    box-shadow: var(--neu-shadow-pressed), 0 0 0 2px rgba(37,99,235,0.25);
}

/* --- Panel: Add form container --- */
.panel-add-form {
    margin: 0 0 14px; padding: 16px 20px;
    background: var(--neu-bg-gradient);
    border: none; border-radius: var(--radius-lg);
    box-shadow: var(--neu-shadow-inset);
}
.panel-ai-form {
    margin: 0 0 14px; padding: 16px 20px;
    background: var(--neu-bg-gradient);
    border: none; border-radius: var(--radius-lg);
    box-shadow: var(--neu-shadow-inset);
}

/* --- Panel: Header with icon --- */
.panel-form-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.panel-form-icon {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.panel-form-icon i { color: white; font-size: 0.8rem; }
.panel-form-icon.green { background: var(--success); }
.panel-form-icon.blue { background: var(--blue-600); }
.panel-form-title { font-weight: 600; font-size: 0.92rem; color: var(--gray-800); }
.panel-form-hint { font-size: 0.78rem; color: var(--gray-500); }

/* --- Panel: NIP lookup --- */
.nip-lookup-bar {
    margin-bottom: 14px; padding: 12px 16px; background: var(--neu-bg-gradient);
    border: none; border-radius: var(--radius-md);
    box-shadow: var(--neu-shadow-raised-sm);
}
.nip-lookup-label {
    font-size: 0.76rem; font-weight: 600; text-transform: uppercase;
    color: var(--gray-500); margin-bottom: 6px;
}
.nip-lookup-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nip-lookup-status { margin-top: 8px; font-size: 0.8rem; }

/* --- DB Panel tabs row (neumorphic) --- */
.db-tabs-row {
    display: flex; gap: 8px; padding: 12px 1.5rem; flex-wrap: wrap;
    background: linear-gradient(145deg, #e8eef4, #d8e2eb);
    border-bottom: 1px solid rgba(0,0,0,0.04);
}

/* --- AI category checkboxes --- */
.ai-category-option {
    display: flex; align-items: center; gap: 6px; font-size: 0.8rem;
    color: var(--gray-700); cursor: pointer; padding: 4px 7px;
    background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 5px;
}
.ai-category-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px;
}
.ai-category-hint { font-size: 0.75rem; color: var(--gray-500); margin-bottom: 10px; line-height: 1.4; }
.ai-category-wrap {
    margin-top: 8px; padding: 10px 12px; background: transparent;
    border: none; border-radius: var(--radius-md);
}
.ai-always-badge {
    margin-left: auto; font-size: 0.6rem; 
    background: var(--neu-bg-gradient); box-shadow: inset 1px 1px 2px #b8bec7, inset -1px -1px 2px #ffffff;
    color: var(--blue-600); padding: 2px 6px; border-radius: 6px; font-weight: 600;
}

/* --- Details/summary --- */
.details-toggle {
    cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--gray-600);
    padding: 4px 0; display: flex; align-items: center; gap: 6px;
    list-style: none; user-select: none;
}
.details-toggle::-webkit-details-marker { display: none; }

/* --- Misc spacing --- */
.mr-4 { margin-right: 4px; }
.mr-5 { margin-right: 5px; }
.mr-6 { margin-right: 6px; }
.mb-12 { margin-bottom: 12px; }
.mb-14 { margin-bottom: 14px; }
.flex-1 { flex: 1; }
.gap-8 { display: flex; gap: 8px; }

/* --- Icon colors --- */
.icon-success { color: var(--success); font-size: 0.7rem; }
.icon-blue-sm { color: var(--blue-500); font-size: 0.7rem; }
.icon-gray-sm { color: var(--gray-400); font-size: 0.6rem; }
.icon-muted-sm { color: var(--gray-500); font-size: 0.7rem; }
.text-muted-sm { font-size: 0.75rem; color: var(--gray-400); }
.text-hint { font-size: 0.78rem; color: var(--gray-500); }

/* --- Section title inline --- */
.section-title-inline { margin: 0; font-size: 1.05rem; color: var(--gray-800); }
.section-title-md { margin: 0; font-size: 1rem; color: var(--gray-700); }

/* --- Admin panel --- */
/* === ADMIN PANEL — Neumorphic === */
.admin-padding { padding: 16px 0; }
.admin-section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
.admin-section-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--gray-700); }
.admin-section-title i { margin-right: 6px; color: #2563eb; }
.admin-btn-blue {
    padding: 8px 16px; background: #e4ecf6; color: var(--blue-600); border: none;
    border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600;
    cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px;
    border-top: 1px solid rgba(255,255,255,0.7); box-shadow: none;
    filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.3)); transition: filter 0.15s;
}
.admin-btn-blue:hover { filter: drop-shadow(2px 2px 4px rgba(150,170,195,0.4)); }
.admin-btn-blue:active { box-shadow: var(--neu-shadow-pressed); filter: none; }
.admin-btn-blue-md {
    padding: 9px 18px; background: #e4ecf6; color: var(--blue-600); border: none;
    border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 600;
    cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 6px;
    border-top: 1px solid rgba(255,255,255,0.7); box-shadow: none;
    filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.3)); transition: filter 0.15s;
}
.admin-btn-blue-md:hover { filter: drop-shadow(2px 2px 4px rgba(150,170,195,0.4)); }
.admin-btn-blue-md:active { box-shadow: var(--neu-shadow-pressed); filter: none; }
.spinner-center { text-align: center; padding: 1rem; color: var(--gray-400); }
.spinner-center-lg { text-align: center; padding: 2rem; color: var(--gray-400); }
.admin-divider { border-bottom: none; margin: 24px 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(184,190,199,0.45), transparent); border-radius: 1px; }

/* --- Demo generator --- */
.demo-gen-section { background: #f4f7fb; border-radius: var(--radius-lg); padding: 16px 18px; }
.demo-gen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.demo-gen-field label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--gray-600); margin-bottom: 4px; }
.demo-gen-field select, .demo-gen-field input[type="range"] { width: 100%; }
.demo-gen-checkbox { display: flex; align-items: flex-end; }
.demo-gen-checkbox label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 0.85rem; margin-bottom: 0; }
.demo-gen-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--blue-600); }
.demo-gen-slider { -webkit-appearance: none; height: 6px; border-radius: 3px; background: #dce3ed; outline: none; }
.demo-gen-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--blue-600); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.2); }
@media (max-width: 480px) { .demo-gen-grid { grid-template-columns: 1fr; } }

/* --- Company info card --- */
.admin-company-card {
    background: #edf2f8; border: none;
    border-radius: var(--radius-lg); padding: 20px; margin-bottom: 24px;
    border-top: 1px solid rgba(255,255,255,0.85); border-left: 1px solid rgba(255,255,255,0.85);
    border-right: 1px solid rgba(184,190,199,0.12); border-bottom: 1px solid rgba(184,190,199,0.12);
    filter: drop-shadow(2px 2px 4px rgba(166,180,200,0.3));
}
.admin-company-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.admin-company-icon {
    width: 48px; height: 48px; background: linear-gradient(135deg, #2563eb, #1d4ed8); border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 1.2rem; flex-shrink: 0;
    filter: drop-shadow(2px 2px 4px rgba(37,99,235,0.3));
}
.admin-company-info { flex: 1; min-width: 200px; }
.admin-company-name { font-weight: 700; font-size: 1.1rem; color: var(--blue-800); }
.admin-company-stats { font-size: 0.82rem; color: #6d28d9; margin-top: 2px; }

/* --- Supplier Auctions Portal --- */
.sa-filters {
    display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; align-items: center;
}
.sa-filter-btn {
    padding: 6px 14px; background: #edf2f8; color: var(--gray-600); border: none;
    border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    border-top: 1px solid rgba(255,255,255,0.7);
    filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.3)); transition: filter 0.15s, background 0.15s;
}
.sa-filter-btn:hover { filter: drop-shadow(2px 2px 4px rgba(150,170,195,0.4)); }
.sa-filter-btn.active { background: #e0ecff; color: var(--blue-600); box-shadow: var(--neu-shadow-pressed); filter: none; }
.sa-refresh-btn { margin-left: auto; padding: 6px 10px; }
.sa-list { display: flex; flex-direction: column; gap: 14px; }
.sa-card {
    background: #edf2f8; border-radius: var(--radius-lg); overflow: hidden;
    border-top: 1px solid rgba(255,255,255,0.85); border-left: 1px solid rgba(255,255,255,0.85);
    border-right: 1px solid rgba(184,190,199,0.12); border-bottom: 1px solid rgba(184,190,199,0.12);
    filter: drop-shadow(2px 2px 4px rgba(166,180,200,0.3)); transition: filter 0.15s;
}
.sa-card:hover { filter: drop-shadow(3px 3px 6px rgba(150,170,195,0.4)); }
.sa-card-active { border-left: 3px solid var(--success); }
.sa-card-header { padding: 14px 16px 8px; }
.sa-card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sa-card-name { font-weight: 700; font-size: 0.95rem; color: var(--gray-800); }
.sa-card-scenario { font-size: 0.78rem; color: var(--gray-400); margin-top: 2px; }
.sa-status-badge {
    padding: 3px 10px; border-radius: 8px; font-size: 0.72rem; font-weight: 600;
    white-space: nowrap; display: inline-flex; align-items: center; gap: 4px;
    filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.25));
}
.sa-card-body { padding: 0 16px 14px; }
.sa-card-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px 16px; margin-bottom: 10px;
}
.sa-card-info { display: flex; flex-direction: column; }
.sa-label { font-size: 0.7rem; color: var(--gray-400); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; }
.sa-value { font-size: 0.88rem; color: var(--gray-700); font-weight: 500; }
.sa-value-highlight { color: var(--blue-600); font-weight: 700; }
.sa-card-dates {
    display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.78rem; color: var(--gray-500);
    padding-top: 8px; border-top: 1px solid rgba(184,190,199,0.15);
}
.sa-card-actions { padding: 0 16px 14px; }
.sa-enter-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 20px; background: linear-gradient(135deg, #059669, #047857);
    color: white; border: none; border-radius: var(--radius-md);
    font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: none;
    filter: drop-shadow(2px 2px 4px rgba(5,150,105,0.3)); transition: filter 0.15s;
}
.sa-enter-btn:hover { filter: drop-shadow(3px 3px 6px rgba(5,150,105,0.4)); color: white; }
@media (max-width: 480px) {
    .sa-card-grid { grid-template-columns: 1fr 1fr; }
    .sa-card-dates { flex-direction: column; gap: 4px; }
}

/* --- Admin users table --- */
.admin-users-table-wrap {
    background: #edf2f8; border-radius: var(--radius-lg); overflow-x: auto;
    border-top: 1px solid rgba(255,255,255,0.85); border-left: 1px solid rgba(255,255,255,0.85);
    border-right: 1px solid rgba(184,190,199,0.12); border-bottom: 1px solid rgba(184,190,199,0.12);
    filter: drop-shadow(2px 2px 4px rgba(166,180,200,0.3));
}
.admin-users-table {
    width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.admin-users-table thead th {
    text-align: left; padding: 10px 14px; font-size: 0.75rem; font-weight: 700;
    color: var(--gray-500); text-transform: uppercase; letter-spacing: 0.03em;
    border-bottom: 2px solid rgba(184,190,199,0.25); white-space: nowrap;
}
.admin-users-table tbody td {
    padding: 10px 14px; border-bottom: 1px solid rgba(184,190,199,0.15);
    vertical-align: middle;
}
.admin-users-table tbody tr:last-child td { border-bottom: none; }
.admin-users-table tbody tr:hover { background: rgba(37,99,235,0.04); }
.admin-users-table tbody tr.admin-user-me { background: rgba(37,99,235,0.06); }
.admin-btn-icon {
    width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
    border: none; background: #e4ecf6; border-radius: var(--radius-md); cursor: pointer;
    color: #2563eb; font-size: 0.78rem;
    border-top: 1px solid rgba(255,255,255,0.7);
    filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.3)); transition: filter 0.15s;
}
.admin-btn-icon:hover { filter: drop-shadow(2px 2px 4px rgba(150,170,195,0.4)); }
.admin-btn-icon:active { box-shadow: var(--neu-shadow-pressed); filter: none; }
.admin-edit-user-info {
    background: #f4f7fb; border-radius: var(--radius-md); padding: 12px 14px; margin-bottom: 16px;
    font-size: 0.88rem; color: var(--gray-700);
}
.admin-edit-info-row { padding: 3px 0; }
.admin-edit-info-row i { width: 18px; text-align: center; color: var(--gray-400); }
.admin-user-phone-sub { display: none; font-size: 0.75rem; color: var(--gray-400); margin-top: 1px; }
.admin-user-name-cell { min-width: 100px; }

@media (max-width: 480px) {
    .admin-col-phone { display: none; }
    .admin-col-login { display: none; }
    .admin-user-phone-sub { display: block; }
    .admin-users-table thead th { padding: 8px 10px; font-size: 0.7rem; }
    .admin-users-table tbody td { padding: 8px 10px; }
}

/* --- Modal base --- */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 10000; align-items: center; justify-content: center;
}
.modal-box {
    background: var(--neu-bg, #e0e5ec); border-radius: 16px; padding: 28px; max-width: 480px;
    width: 90%; max-height: 90vh; overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
@media (max-width: 480px) {
    .modal-box { padding: 18px; max-width: 100%; width: 94%; border-radius: 12px; }
    .modal-field-grid { grid-template-columns: 1fr !important; gap: 10px; }
}
.modal-header-row {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.modal-title { margin: 0; font-size: 1.05rem; color: var(--gray-800); }
.modal-title i { color: #2563eb; margin-right: 6px; }

/* --- Modal form controls --- */
.modal-field { margin-bottom: 14px; }
.modal-field-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px;
}

/* --- Permission checkboxes in modal --- */
.perm-options { display: flex; flex-direction: column; gap: 8px; }
.perm-option {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px;
    background: #edf2f8; border: 1.5px solid transparent; border-radius: 8px;
    cursor: pointer; font-size: 0.88rem;
    border-top: 1px solid rgba(255,255,255,0.85); border-bottom: 1px solid rgba(184,190,199,0.15);
    filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.25));
    transition: border-color 0.15s, background 0.15s;
}
.perm-option:has(input:checked) {
    background: #e0ecff; border-color: var(--blue-400);
    box-shadow: var(--neu-shadow-pressed); filter: none;
}
.perm-option.warn {
    box-shadow: var(--neu-shadow-pressed); filter: none;
}
.perm-option.warn:has(input:checked) {
    background: #fef3c7; border-color: #f59e0b;
}
.perm-icon { width: 20px; text-align: center; font-size: 0.85rem; }
.perm-icon.blue { color: #2563eb; }
.perm-icon.green { color: #059669; }
.perm-icon.orange { color: #ea580c; }
.perm-desc { font-size: 0.75rem; color: var(--gray-500); }

/* --- Filter bar --- */
.filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.filter-label { font-size: 0.8rem; color: var(--gray-500); font-weight: 500; }

/* --- DB empty text --- */
.db-empty-title { font-weight: 600; margin-bottom: 4px; }
.db-empty-hint { font-size: 0.85rem; }
.docs-padding { padding: 8px 0; }

/* --- QR Modal --- */
.qr-modal-box {
    background: var(--neu-bg, #e0e5ec); border-radius: 16px; padding: 28px; max-width: 420px;
    width: 90%; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.qr-label { font-size: 0.88rem; color: var(--gray-500); margin-bottom: 12px; }
.qr-canvas {
    display: inline-block; padding: 16px; background: white;
    border: none; border-radius: 12px; margin-bottom: 16px;
    box-shadow: var(--neu-shadow-raised-sm);
}
.qr-link { font-size: 0.78rem; color: var(--gray-400); word-break: break-all; margin-bottom: 8px; }
.qr-short-code {
    font-size: 1.4rem; font-weight: 700; color: #2563eb; letter-spacing: 4px;
    margin-bottom: 16px; font-family: monospace;
}
.qr-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.btn-copy-link {
    padding: 8px 16px; background: var(--neu-bg-gradient); border: none;
    border-radius: 8px; font-size: 0.82rem; cursor: pointer;
    font-family: inherit; color: #1d4ed8; font-weight: 600;
    box-shadow: var(--neu-shadow-raised-sm); transition: all 0.15s;
}
.btn-copy-link:hover { box-shadow: var(--neu-shadow-raised); }
.btn-download-qr {
    padding: 8px 16px; background: var(--neu-bg-gradient); border: none;
    border-radius: 8px; font-size: 0.82rem; cursor: pointer;
    font-family: inherit; color: #059669; font-weight: 600;
    box-shadow: var(--neu-shadow-raised-sm); transition: all 0.15s;
}
.btn-download-qr:hover { box-shadow: var(--neu-shadow-raised); }

/* --- Create company modal submit --- */
.btn-submit-blue {
    padding: 10px 20px; background: var(--gradient-primary); color: white; border: none;
    border-radius: var(--radius-md); font-size: 0.88rem; font-weight: 600;
    cursor: pointer; font-family: inherit;
    box-shadow: var(--neu-shadow-raised-sm); transition: box-shadow 0.15s;
}
.btn-submit-blue:hover { box-shadow: var(--neu-shadow-raised); }

/* --- Misc missing --- */
.mb-24 { margin-bottom: 24px; }
.select-styled {
    width: 100%; padding: 10px 12px; border: none;
    border-radius: 8px; font-size: 0.9rem; font-family: inherit;
    box-sizing: border-box; background: var(--neu-bg);
    box-shadow: var(--neu-shadow-pressed); outline: none; transition: box-shadow 0.15s;
}
.select-styled:focus { box-shadow: var(--neu-shadow-pressed), 0 0 0 2px rgba(59,130,246,0.3); }

/* ============================================
   PHASE 2b — Calculator sections (spec, suppliers, criteria, results)
   ============================================ */

/* --- Product hero label --- */
.label-product-hero {
    font-weight: 600; font-size: 0.88rem; color: var(--blue-800); margin-bottom: 6px;
}

/* --- Box containers --- */
.box-muted-lg {
    background: var(--gray-50); border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg); padding: 1rem 1.25rem;
}
.box-muted-md {
    margin-top: 8px; padding: 14px 16px; 
    background: rgba(224,229,236,0.3);
    border: none; border-radius: var(--radius-md);
}

/* --- Icon variants --- */
.icon-blue-md { color: var(--blue-500); font-size: 0.88rem; }
.icon-amber-sm { color: var(--amber-500); font-size: 0.7rem; }
.icon-white-sm { color: white; font-size: 0.75rem; }
.icon-btn-xs { font-size: 0.65rem; }
.icon-search-blue { color: var(--blue-500); font-size: 0.8rem; flex-shrink: 0; }
.icon-info-blue { color: var(--blue-400); flex-shrink: 0; }
.icon-info-red { color: #f87171; flex-shrink: 0; }
.icon-chevron-toggle { color: var(--gray-400); font-size: 0.7rem; transition: transform 0.2s; }
.icon-chevron-end { font-size: 0.6rem; color: var(--gray-400); margin-left: auto; }
.icon-chevron-end-blue { margin-left: auto; font-size: 0.7rem; color: var(--blue-400); }

/* --- Panel/section title text --- */
.panel-title-text { font-weight: 600; font-size: 0.9rem; color: var(--gray-800); }
.panel-title-text-lg { font-weight: 600; font-size: 0.95rem; color: var(--gray-800); }
.text-description { font-size: 0.84rem; color: var(--gray-500); margin-bottom: 0.75rem; }
.text-hint-md { font-size: 0.8rem; color: var(--gray-500); }
.text-empty-state { font-size: 0.82rem; color: var(--gray-400); padding: 4px 0; font-style: italic; }
.text-details-label { font-size: 0.82rem; color: var(--gray-500); }
.text-cost-estimate { font-size: 0.68rem; color: var(--gray-400); margin-top: 2px; }
.text-sensitivity-hint { font-size: 0.74rem; font-weight: 400; color: var(--gray-500); }
.text-separator { color: var(--gray-300); }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-settings-ref {
    font-size: 0.75rem; color: var(--gray-400);
    display: flex; align-items: center; gap: 4px;
}
.text-sync-hint { font-size: 0.72rem; color: var(--blue-500); white-space: nowrap; }

/* --- Labels --- */
.label-tiny {
    font-size: 0.72rem; font-weight: 500; color: var(--gray-400);
    display: block; margin-bottom: 3px;
}
.label-discover {
    margin-bottom: 3px; font-size: 0.74rem; color: var(--blue-700);
}

/* --- Inputs / selects --- */
.input-unit { max-width: 160px; }
.input-nip { flex: 1; max-width: 240px; }
.input-discover-subject { background: var(--neu-bg); border-color: transparent; font-weight: 500; box-shadow: var(--neu-shadow-pressed); }
.select-compact { min-height: 36px; padding: 6px 32px 6px 10px; font-size: 0.82rem; width: auto; }
.range-slider-sm { width: 90px; cursor: pointer; }
.range-value {
    font-size: 0.82rem; font-weight: 600; color: var(--blue-700);
    min-width: 18px; text-align: center;
}

/* --- Flex utilities --- */
.flex-end-wrap { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.flex-center-gap-6 { display: flex; align-items: center; gap: 6px; }
.flex-col-gap-10 { display: flex; flex-direction: column; gap: 10px; }
.flex-title-group { flex: 1; min-width: 120px; }
.flex-selectall { margin-top: 8px; display: flex; gap: 8px; font-size: 0.75rem; }
.flex-wrap { flex-wrap: wrap; }
.items-stretch { align-items: stretch; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; }
.mb-10 { margin-bottom: 10px; }
.panel-row { display: flex; align-items: center; gap: 8px; }
.mb-10 { margin-bottom: 10px; }

/* --- AI panels --- */
.ai-panel-blue {
    border: 1px solid var(--blue-200);
    background: linear-gradient(135deg, var(--blue-50), #eef2ff);
}
.ai-panel-blue-light {
    border: 1px solid var(--blue-100);
    background: linear-gradient(135deg, var(--blue-50), #f0f4ff);
}
.ai-icon-sm { width: 28px; height: 28px; font-size: 0.7rem; }
.ai-tier-info {
    flex: 1; min-width: 200px; padding: 7px 10px;
    border-radius: var(--radius-sm); font-size: 0.78rem; line-height: 1.4;
    background: var(--neu-bg-gradient); color: var(--blue-800); border: none;
    box-shadow: var(--neu-shadow-raised-sm);
}
.ai-cost-box {
    margin-top: 8px; padding: 6px 12px;
    background: var(--gray-50); border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm); font-size: 0.74rem;
    color: var(--gray-500); font-family: 'DM Sans', sans-serif;
}
.ai-profile-grid {
    margin-top: 12px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px;
}
.panel-summary {
    display: flex; align-items: center; gap: 8px;
    cursor: pointer; user-select: none;
}

/* --- AI Discover: search bar & categories --- */
.discover-search-bar {
    margin-bottom: 14px; padding: 10px 14px;
    background: var(--blue-50); border: 1px solid var(--blue-100);
    border-radius: var(--radius-md);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.discover-search-field { flex: 1; min-width: 180px; }
.discover-cat-label {
    display: flex; align-items: center; gap: 7px; font-size: 0.82rem;
    color: var(--gray-700); cursor: pointer; padding: 8px 12px;
    background: var(--neu-bg-gradient); border: none; border-radius: var(--radius-sm);
    box-shadow: var(--neu-shadow-raised-sm);
    transition: all 0.15s; user-select: none; font-weight: 500; min-height: 40px;
}
.discover-cat-label:hover {
    box-shadow: var(--neu-shadow-raised);
    color: var(--blue-700);
}
.discover-cat-label:has(input:checked) {
    box-shadow: var(--neu-shadow-pressed);
    color: var(--blue-700);
    font-weight: 600;
}
.discover-cat-label:has(input:disabled) {
    opacity: 0.85;
}
.discover-cat-label input[type="checkbox"] {
    accent-color: var(--blue-600); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;
}

/* --- Buttons --- */
.btn-text-link {
    background: none; border: none; cursor: pointer; color: var(--blue-600);
    font-family: inherit; font-size: inherit; padding: 2px 0;
}
.btn-panel-action { white-space: nowrap; flex-shrink: 0; }
.btn-danger { background: var(--danger); color: white; }
.btn-db-picker {
    background: var(--blue-50); color: var(--blue-700);
    border: 1px solid var(--blue-200);
}
.btn-dark { background: var(--gray-800); color: white; }
.btn-sensitivity-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 12px 24px; background: var(--blue-50);
    border: 2px dashed var(--blue-300); border-radius: var(--radius-lg);
    cursor: pointer; font-family: inherit; font-size: 0.9rem;
    color: var(--blue-700); font-weight: 600; transition: all 0.2s;
    width: 100%; justify-content: center; max-width: 480px;
}
.btn-sensitivity-cta:hover {
    background: var(--blue-100); border-style: solid;
}

/* --- Card panels (Scenarios, Knockout, Templates) --- */
.card-panel {
    border-radius: var(--radius-lg); overflow: hidden;
}
.card-panel-blue { border: 1px solid var(--blue-200); }
.card-panel-red { border: 1px solid #fca5a5; }

.card-panel-head {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 16px; flex-wrap: wrap;
}
.card-panel-head-blue { background: linear-gradient(135deg, var(--blue-50), #eef4ff); }
.card-panel-head-red { background: linear-gradient(135deg, #fff5f5, #fef2f2); }

.card-panel-body {
    padding: 12px 16px; background: var(--neu-bg-gradient);
    display: flex; flex-direction: column; gap: 8px;
}

.card-panel-foot {
    padding: 8px 16px; font-size: 0.75rem; color: var(--gray-500);
    display: flex; align-items: center; gap: 6px;
}
.card-panel-foot-blue { background: #f0f7ff; border-top: 1px solid var(--blue-100); }
.card-panel-foot-red { background: #fff8f8; border-top: 1px solid #fca5a5; }

.card-icon-box {
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.card-icon-box-md { width: 34px; height: 34px; }
.bg-blue-gradient { background: linear-gradient(135deg, var(--blue-800), var(--blue-600)); }
.bg-blue-600 { background: var(--blue-600); }
.bg-danger { background: var(--danger); }

/* ============================================
   PHASE 2c — Remaining static HTML inline styles
   ============================================ */

/* --- Analyses toolbar --- */
.analyses-toolbar {
    display: flex; align-items: center; gap: 8px;
    padding: 14px 0 12px; flex-wrap: wrap; justify-content: space-between;
}

/* --- New analysis button --- */
.btn-new-analysis {
    padding: 8px 18px;
    background: var(--neu-bg-gradient);
    color: var(--blue-700); border: none; border-radius: var(--radius-md);
    font-size: 0.88rem; font-weight: 700; cursor: pointer; font-family: inherit;
    display: flex; align-items: center; gap: 6px;
    box-shadow: var(--neu-shadow-raised-sm); transition: all 0.15s;
}
.btn-new-analysis:hover {
    box-shadow: var(--neu-shadow-raised);
    color: var(--blue-800);
}
.btn-new-analysis:active {
    box-shadow: var(--neu-shadow-pressed);
}

/* --- Utility: spacing & alignment --- */
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; }
.justify-end { justify-content: flex-end; }

/* ============================================
   PHASE 2d — JS template inline styles → CSS
   ============================================ */

/* --- Icon margins (mr-X) --- */
.mr-2 { margin-right: 2px; }
.mr-3 { margin-right: 3px; }
.mr-5 { margin-right: 5px; }
.mr-6 { margin-right: 6px; }
.ml-6 { margin-left: 6px; }

/* --- Icon sizes --- */
.icon-xxs { font-size: 0.6rem; }
.icon-xs-sm { font-size: 0.7rem; }
.icon-xs-md { font-size: 0.72rem; }

/* --- Font utilities --- */
.fw-600 { font-weight: 600; }
.fs-075 { font-size: 0.75rem; }
.fs-08 { font-size: 0.8rem; }
.fs-082 { font-size: 0.82rem; }
.fs-085 { font-size: 0.85rem; }
.mb-4 { margin-bottom: 4px; }
.mb-14 { margin-bottom: 14px; }
.mt-8 { margin-top: 8px; }
.w-full { width: 100%; }

/* --- Link/icon colors --- */
.link-blue { color: var(--blue-600); }
.icon-ok { color: #16a34a; }
.icon-err { color: #dc2626; }
.icon-blue { color: var(--blue-600); }
.icon-blue-400 { color: var(--blue-400); }
.text-muted { color: var(--gray-400); }

/* --- State/loading centers --- */
.state-center { text-align: center; padding: 1.5rem; color: var(--gray-400); }
.state-center-sm { text-align: center; padding: 20px; color: var(--gray-400); }
.state-center-lg { text-align: center; padding: 3rem 1rem; color: var(--gray-400); }
.state-error { color: var(--danger); }
.state-error-inline { color: var(--danger); font-size: 0.85rem; padding: 12px 0; }
.panel-loading-state { color: var(--gray-400); font-size: 0.85rem; text-align: center; padding: 20px 0; }

/* --- NIP lookup text --- */
.text-nip-ok { color: #16a34a; font-weight: 600; }
.text-nip-err { color: #dc2626; }

/* --- DB table cells --- */
.cursor-pointer { cursor: pointer; }
.td-category { font-size: 0.82rem; color: var(--gray-600); }
.td-location { font-size: 0.85rem; }
.td-date { white-space: nowrap; font-size: 0.82rem; }
.p-0 { padding: 0; }
.icon-chevron-row { color: var(--gray-300); font-size: 0.75rem; transition: transform 0.2s; }
.icon-chevron-sm { color: var(--gray-300); font-size: 0.7rem; }

/* --- Status/role badges --- */
.badge-status { padding: 3px 10px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; }
.badge-winner { padding: 3px 8px; border-radius: 8px; font-size: 0.72rem; font-weight: 600; background: var(--neu-bg-gradient); color: #065f46; box-shadow: var(--neu-shadow-raised-sm); }
.badge-draft { padding: 3px 10px; border-radius: 10px; font-size: 0.75rem; font-weight: 600; background: #fef3c7; color: #92400e; }
.badge-shared { padding: 2px 8px; border-radius: 8px; font-size: 0.7rem; font-weight: 600; background: #dbeafe; color: #1d4ed8; }
.badge-mini { font-size: 0.68rem; padding: 1px 6px; background: var(--gray-100); border-radius: 8px; color: var(--gray-500); }
.badge-mini.badge-in-analysis { background: #dcfce7; color: #16a34a; font-weight: 600; }
.badge-cert { padding: 2px 8px; background: var(--success-light); color: var(--success); border-radius: 8px; font-size: 0.75rem; font-weight: 500; }
.badge-enrich { padding: 2px 8px; border-radius: 8px; font-size: 0.78rem; font-weight: 500; }
.role-badge { padding: 2px 8px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.25)); }
.role-admin { background: linear-gradient(145deg, #fef3c7, #fde68a); color: #92400e; }
.role-buyer { background: linear-gradient(145deg, #dbeafe, #bfdbfe); color: #1e40af; }
.role-user { background: linear-gradient(145deg, #f1f5f9, #e2e8f0); color: #475569; }
.role-superadmin { background: linear-gradient(145deg, #fce7f3, #fbcfe8); color: #9d174d; }
.role-supplier { background: linear-gradient(145deg, #d1fae5, #a7f3d0); color: #065f46; }
.inv-status { padding: 3px 10px; border-radius: 8px; font-size: 0.72rem; font-weight: 600; filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.25)); }
.inv-active { background: linear-gradient(145deg, #d1fae5, #a7f3d0); color: #065f46; }
.inv-expired { background: linear-gradient(145deg, #fee2e2, #fecaca); color: #991b1b; }
.inv-used { background: linear-gradient(145deg, #fef3c7, #fde68a); color: #92400e; }
.inv-inactive { background: #edf2f8; color: var(--gray-500); }

/* --- Supplier detail cards --- */
.detail-field-card { min-width: 180px; flex: 1; background: #edf2f8; border: none; border-radius: var(--radius-md); padding: 12px 14px; border-top: 1px solid rgba(255,255,255,0.85); border-bottom: 1px solid rgba(184,190,199,0.12); filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.25)); transition: filter 0.15s; }
.detail-field-card:hover { filter: drop-shadow(2px 2px 4px rgba(150,170,195,0.35)); }
.detail-field-label { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--blue-400); margin-bottom: 5px; }
.detail-field-value { font-size: 0.88rem; color: var(--gray-800); word-break: break-word; font-weight: 500; }
.detail-field-value a { color: var(--blue-600); text-decoration: none; }
.detail-field-value a:hover { text-decoration: underline; }
.text-nodata { color: var(--gray-400); font-size: 0.85rem; }

/* --- Stat cards --- */
.stat-card { flex: 1; min-width: 100px; border-radius: var(--radius-md); padding: 12px 16px; text-align: center; background: #edf2f8; border-top: 1px solid rgba(255,255,255,0.85); border-bottom: 1px solid rgba(184,190,199,0.12); filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.25)); }
.stat-card-blue { }
.stat-card-green { }
.stat-card-red { }
.stat-card-amber { }
.stat-value { font-size: 1.6rem; font-weight: 700; }
.stat-value-blue { color: var(--blue-700); }
.stat-value-green { color: #065f46; }
.stat-value-red { color: #991b1b; }
.stat-value-amber { color: #92400e; }
.stat-label { font-size: 0.75rem; font-weight: 500; }
.stat-label-blue { color: var(--blue-600); }
.stat-label-green { color: #065f46; }
.stat-label-red { color: #991b1b; }
.stat-label-amber { color: #92400e; }

/* --- Win rate bar --- */
.winrate-track { flex: 1; background: var(--gray-100); border-radius: 4px; height: 6px; overflow: hidden; }
.winrate-value { font-size: 0.8rem; font-weight: 700; color: var(--gray-700); min-width: 36px; }
.text-muted-xs { font-size: 0.75rem; color: var(--gray-400); }
.text-best-rank { font-size: 0.8rem; color: var(--gray-500); }
.text-stats-hint { font-size: 0.78rem; margin-top: 4px; }

/* --- DB edit form --- */
.input-db-sm { width: 100%; box-sizing: border-box; padding: 7px 10px; border: none; border-radius: var(--radius-sm); font-size: 0.85rem; font-family: inherit; background: var(--neu-bg); box-shadow: var(--neu-shadow-pressed); outline: none; transition: box-shadow 0.15s; }
.input-db-sm:focus { box-shadow: var(--neu-shadow-pressed), 0 0 0 2px rgba(59,130,246,0.3); }
.input-db-resizable { resize: vertical; }
.btn-db-edit { padding: 6px 16px; background: #e4ecf6; color: var(--blue-700); border: none; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 4px; border-top: 1px solid rgba(255,255,255,0.7); filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.3)); transition: filter 0.15s; }
.btn-db-edit:hover { filter: drop-shadow(2px 2px 4px rgba(150,170,195,0.4)); color: var(--blue-800); }
.btn-db-edit:active { box-shadow: var(--neu-shadow-pressed); filter: none; }
.btn-db-delete { padding: 6px 14px; background: #e4ecf6; color: var(--danger); border: none; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 4px; border-top: 1px solid rgba(255,255,255,0.7); filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.3)); transition: filter 0.15s; }
.btn-db-delete:hover { filter: drop-shadow(2px 2px 4px rgba(150,170,195,0.4)); color: #dc2626; }
.btn-db-delete:active { box-shadow: var(--neu-shadow-pressed); }

/* Supplier notes */
.snote-item { padding: 8px 12px; background: linear-gradient(145deg, #e8eef4, #dfe7ef); border: none; border-radius: var(--radius-sm); margin-bottom: 5px; box-shadow: 2px 2px 5px rgba(184,190,199,0.25), -2px -2px 5px rgba(255,255,255,0.6); }

/* Voice recording */
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: #dc2626; animation: recPulse 1s infinite; flex-shrink: 0; }
@keyframes recPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.snote-item audio { display: block; height: 28px; max-width: 280px; }

/* Supplier contacts */
.scontact-card { padding: 8px 12px; background: linear-gradient(145deg, #e8eef4, #dfe7ef); border: none; border-radius: var(--radius-sm); margin-bottom: 5px; box-shadow: 2px 2px 5px rgba(184,190,199,0.25), -2px -2px 5px rgba(255,255,255,0.6); }

/* Supplier tag chips */
.stag-chip { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 20px; font-size: .8rem; font-weight: 600; font-family: inherit; cursor: pointer; border: 2px solid var(--tag-color); background: linear-gradient(145deg, #edf2f7, #e3eaf2); color: var(--tag-color); transition: all .2s; box-shadow: 2px 2px 4px rgba(184,190,199,0.2), -2px -2px 4px rgba(255,255,255,0.5); }
.stag-chip:hover { background: linear-gradient(145deg, #e3eaf2, #d9e2ec); box-shadow: 1px 1px 3px rgba(184,190,199,0.3), -1px -1px 3px rgba(255,255,255,0.5); }
.stag-chip.active { background: var(--tag-color); color: white; border-color: var(--tag-color); box-shadow: inset 2px 2px 4px rgba(0,0,0,0.15), inset -1px -1px 3px rgba(255,255,255,0.1); }

/* Neumorphic inputs for supplier panels */
.sneu-input { padding: 8px 12px; border: none; border-radius: var(--radius-sm); font-size: .83rem; font-family: inherit; background: var(--neu-bg); box-shadow: var(--neu-shadow-inset); outline: none; transition: box-shadow .15s; box-sizing: border-box; }
.sneu-input:focus { box-shadow: var(--neu-shadow-inset), 0 0 0 2px rgba(59,130,246,0.3); }
.sneu-input::placeholder { color: var(--gray-400); }
textarea.sneu-input { resize: vertical; min-height: 42px; }

/* Neumorphic action buttons for supplier panels */
.sneu-btn { padding: 8px 16px; border: none; border-radius: var(--radius-sm); font-size: .84rem; font-weight: 600; font-family: inherit; cursor: pointer; background: var(--neu-bg-gradient); box-shadow: 3px 3px 6px rgba(184,190,199,0.35), -3px -3px 6px rgba(255,255,255,0.8); color: var(--blue-700); transition: all .15s; display: inline-flex; align-items: center; gap: 5px; }
.sneu-btn:hover { box-shadow: 2px 2px 4px rgba(184,190,199,0.35), -2px -2px 4px rgba(255,255,255,0.8); }
.sneu-btn:active { box-shadow: var(--neu-shadow-inset); }

/* Round mic button */
.sneu-btn-mic { width: 38px; height: 38px; border-radius: 50%; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--gray-500); font-size: .9rem; }
.sneu-btn-mic:hover { color: #dc2626; }
.sneu-btn-mic.recording { width: 38px; height: 38px; border-radius: 50%; background: #dc2626 !important; color: white !important; box-shadow: 0 0 0 4px rgba(220,38,38,0.2); animation: recPulseBtn 1.5s infinite; }
@keyframes recPulseBtn { 0%, 100% { box-shadow: 0 0 0 4px rgba(220,38,38,0.2); } 50% { box-shadow: 0 0 0 8px rgba(220,38,38,0.1); } }
.sneu-btn-primary { background: var(--blue-600); color: white; box-shadow: 2px 2px 5px rgba(37,99,235,0.3), -2px -2px 5px rgba(255,255,255,0.1); }
.sneu-btn-primary:hover { background: var(--blue-700); }

/* Neumorphic form container */
.sneu-form-box { padding: 14px; background: linear-gradient(145deg, #dce4ed, #d2dbe5); border: none; border-radius: var(--radius-md); box-shadow: inset 2px 2px 5px rgba(184,190,199,0.3), inset -2px -2px 5px rgba(255,255,255,0.5); }

/* Neumorphic section divider */
.sneu-divider { border-top: none; height: 2px; background: linear-gradient(90deg, transparent, rgba(184,190,199,0.3), transparent); margin: 12px 0; }

/* Neumorphic small action buttons (override injected docs-btn-sm) */
.docs-btn-sm { padding: 5px 10px; border: none; border-radius: var(--radius-sm); background: #e4ecf6; font-size: .75rem; font-weight: 500; cursor: pointer; font-family: inherit; color: var(--gray-600); transition: filter .15s; border-top: 1px solid rgba(255,255,255,0.7); filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.25)); }
.docs-btn-sm:hover { color: var(--blue-600); filter: drop-shadow(2px 2px 3px rgba(150,170,195,0.35)); }
.docs-btn-sm.danger:hover { color: #dc2626; }
.btn-db-save { padding: 6px 18px; background: var(--success); color: white; border: none; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 4px; box-shadow: 2px 2px 5px rgba(16,185,129,0.3), -2px -2px 5px rgba(255,255,255,0.1); transition: all 0.15s; }
.btn-db-save:hover { background: #059669; box-shadow: 1px 1px 3px rgba(16,185,129,0.3); }
.btn-db-cancel { padding: 6px 14px; background: #e4ecf6; color: var(--gray-500); border: none; border-radius: var(--radius-sm); font-size: 0.82rem; cursor: pointer; font-family: inherit; border-top: 1px solid rgba(255,255,255,0.7); filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.25)); transition: filter 0.15s; }
.btn-db-cancel:hover { filter: drop-shadow(2px 2px 3px rgba(150,170,195,0.35)); color: var(--gray-700); }

/* --- DB Picker modal --- */
.picker-title { font-weight: 700; font-size: 1rem; color: var(--gray-800); }
.picker-subtitle { font-size: 0.78rem; color: var(--gray-500); }
.btn-close-lg { font-size: 1.3rem; padding: 4px 8px; line-height: 1; }
.picker-search-wrap { flex: 1; position: relative; }
.picker-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--gray-400); font-size: 0.75rem; }
.input-picker-search { width: 100%; box-sizing: border-box; padding: 8px 10px 8px 30px; border: none; border-radius: var(--radius-md); font-size: 0.85rem; font-family: inherit; background: var(--neu-bg); box-shadow: var(--neu-shadow-pressed); outline: none; transition: box-shadow 0.15s; }
.input-picker-search:focus { box-shadow: var(--neu-shadow-pressed), 0 0 0 2px rgba(59,130,246,0.3); }
.select-picker-cat { padding: 8px 10px; border: none; border-radius: var(--radius-md); font-size: 0.82rem; font-family: inherit; background: var(--neu-bg); box-shadow: var(--neu-shadow-pressed); color: var(--gray-700); outline: none; }
.picker-list { flex: 1; overflow-y: auto; padding: 8px 12px; min-height: 200px; max-height: 55vh; }
.picker-count { font-size: 0.8rem; font-weight: 600; color: var(--blue-600); }
.btn-picker-cancel { padding: 7px 14px; background: var(--neu-bg-gradient); color: var(--gray-500); border: none; border-radius: var(--radius-md); font-size: 0.84rem; cursor: pointer; font-family: inherit; box-shadow: var(--neu-shadow-raised-sm); transition: all 0.15s; }
.btn-picker-cancel:hover { box-shadow: var(--neu-shadow-raised); color: var(--gray-700); }
.btn-picker-add { padding: 7px 18px; background: var(--neu-bg-gradient); color: var(--blue-700); border: none; border-radius: var(--radius-md); font-size: 0.84rem; font-weight: 600; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 4px; box-shadow: var(--neu-shadow-raised-sm); transition: all 0.15s; }
.btn-picker-add:hover { box-shadow: var(--neu-shadow-raised); }
.btn-picker-add[disabled] { opacity: 0.5; cursor: not-allowed; }
.picker-checkbox { accent-color: var(--blue-600); flex-shrink: 0; width: 16px; height: 16px; }
.picker-item-name { font-weight: 600; font-size: 0.9rem; color: var(--gray-800); }

/* --- Enrich panel --- */
.enrich-row { padding: 8px 10px; background: var(--neu-bg-gradient); border-radius: var(--radius-sm); box-shadow: var(--neu-shadow-raised-sm); }
.enrich-data-text { color: var(--gray-600); font-size: 0.78rem; line-height: 1.4; }
.enrich-header-box { padding: 14px; background: var(--neu-bg-gradient); border-radius: var(--radius-md); border: none; text-align: left; box-shadow: var(--neu-shadow-inset); }
.btn-enrich-refresh { padding: 4px 12px; background: var(--neu-bg-gradient); color: var(--blue-600); border: none; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 4px; white-space: nowrap; box-shadow: var(--neu-shadow-raised-sm); transition: all 0.15s; }
.btn-enrich-refresh:hover { box-shadow: var(--neu-shadow-raised); }
.enrich-date-tag { font-size: 0.7rem; color: var(--gray-400); margin-left: 4px; }
.enrich-missing-tag { font-size: 0.72rem; color: var(--gray-400); font-style: italic; margin-left: 4px; }
.enrich-last-update { font-size: 0.72rem; font-weight: 400; color: var(--gray-400); }
.enrich-profile-text { color: var(--gray-700); margin-bottom: 10px; font-size: 0.85rem; line-height: 1.5; }
.enrich-detail-text { color: var(--gray-500); margin-top: 4px; font-size: 0.78rem; }
.enrich-summary { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--blue-100); color: var(--gray-600); font-style: italic; font-size: 0.8rem; line-height: 1.4; }

/* --- Company switcher --- */
.company-empty { padding: 12px 14px; color: #9ca3af; font-size: 0.82rem; }
.company-nip { font-size: 0.7rem; color: #9ca3af; }
.company-check { color: #2563eb; font-size: 0.75rem; }

/* --- Analysis list --- */
.analysis-history-row { display:flex; align-items:center; gap:12px; padding:10px 14px; background:#edf2f8; border:none; border-radius:var(--radius-md); cursor:pointer; transition:filter 0.15s; border-top:1px solid rgba(255,255,255,0.85); border-bottom:1px solid rgba(184,190,199,0.12); filter:drop-shadow(2px 2px 4px rgba(166,180,200,0.3)); }
.analysis-history-row:hover { filter:drop-shadow(3px 3px 6px rgba(150,170,195,0.4)); }
.analysis-history-row.winner { border-left:3px solid #f59e0b; }
.flex-card-content { flex: 1; min-width: 200px; }
.flex-card-content-sm { flex: 1; min-width: 150px; }
.flex-min-0 { flex: 1; min-width: 0; }
.flex-1 { flex: 1; }
.text-ellipsis-title { font-weight: 600; font-size: 0.88rem; color: var(--gray-800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.analysis-name { font-weight: 600; color: var(--gray-800); font-size: 0.92rem; }
.analysis-meta-sub { font-size: 0.75rem; color: var(--gray-400); margin-top: 2px; }
.analysis-meta { font-size: 0.8rem; color: var(--gray-400); margin-top: 3px; }
.empty-title { font-size: 0.9rem; margin-bottom: 4px; }
.empty-analyses-hint { font-size: 0.85rem; color: var(--gray-400); margin-bottom: 12px; }
.text-winner { font-size: 0.8rem; color: #16a34a; margin-top: 4px; }

/* --- Analysis banner buttons --- */
.banner-readonly-text { font-size: 0.78rem; color: #0369a1; }
.banner-name-editable { cursor: pointer; text-decoration: underline dotted; }
.banner-name-input { font-weight: 600; font-size: 0.92rem; padding: 3px 8px; border: 1px solid var(--blue-400); border-radius: 4px; font-family: inherit; width: 100%; box-sizing: border-box; }
.banner-name-input-sm { padding: 2px 7px; border: 1px solid #d97706; border-radius: 4px; font-size: 0.82rem; font-family: inherit; font-weight: 600; }
.btn-banner-edit { padding: 2px 12px; border: 1px solid #0369a1; background: #0284c7; color: white; border-radius: 4px; font-size: 0.78rem; cursor: pointer; font-family: inherit; font-weight: 600; }
.btn-banner-back { padding: 2px 8px; border: none; background: var(--neu-bg-gradient); border-radius: 4px; font-size: 0.78rem; cursor: pointer; font-family: inherit; color: #075985; box-shadow: var(--neu-shadow-raised-sm); }
.btn-banner-back-amber { padding: 2px 8px; border: none; background: var(--neu-bg-gradient); border-radius: 4px; font-size: 0.78rem; cursor: pointer; font-family: inherit; color: #92400e; box-shadow: var(--neu-shadow-raised-sm); }
.btn-banner-name-save { padding: 2px 8px; border: none; background: #d97706; color: white; border-radius: 4px; font-size: 0.78rem; cursor: pointer; font-family: inherit; }
.btn-banner-name-cancel { padding: 2px 6px; border: none; background: var(--neu-bg-gradient); color: #92400e; border-radius: 4px; font-size: 0.78rem; cursor: pointer; font-family: inherit; box-shadow: var(--neu-shadow-raised-sm); }
.btn-banner-save-disabled { padding: 2px 12px; border: 1px solid #d97706; background: #f59e0b; color: white; border-radius: 4px; font-size: 0.78rem; font-weight: 600; cursor: default; font-family: inherit; opacity: 0.4; }
.btn-banner-save { padding: 5px 12px; background: var(--neu-bg-gradient); color: #059669; border: none; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; box-shadow: var(--neu-shadow-raised-sm); transition: all 0.15s; }
.btn-banner-save:hover { box-shadow: var(--neu-shadow-raised); }
.btn-banner-cancel { padding: 5px 10px; background: var(--neu-bg-gradient); color: var(--gray-500); border: none; border-radius: var(--radius-sm); font-size: 0.82rem; cursor: pointer; font-family: inherit; box-shadow: var(--neu-shadow-raised-sm); transition: all 0.15s; }
.btn-banner-cancel:hover { box-shadow: var(--neu-shadow-raised); color: var(--gray-700); }

/* --- Auth extra --- */
.bg-red-500 { background: #ef4444; }
.text-center { text-align: center; }

/* ============================================
   PHASE 2e — External JS template classes
   ============================================ */

/* --- Icon margins (new) --- */
.mr-8 { margin-right: 8px; }
.mt-2 { margin-top: 2px; }
.mt-3 { margin-top: 3px; }
.mt-5 { margin-top: 5px; }
.mt-6 { margin-top: 6px; }
.mt-14 { margin-top: 14px; }
.mb-6 { margin-bottom: 6px; }
.mb-12 { margin-bottom: 12px; }
.flex-shrink-0 { flex-shrink: 0; }
.text-danger { color: var(--danger); }
.flex-min-0 { flex: 1; min-width: 0; }
.fs-072 { font-size: 0.72rem; }
.fs-09 { font-size: 0.9rem; }
.gap-10 { gap: 10px; }
.p-8 { padding: 8px; }
.w-50 { width: 50px; }
.w-120 { width: 120px; }
.pos-relative { position: relative; }
.flex-min-120 { flex: 1; min-width: 120px; }
.flex-min-140 { flex: 1; min-width: 140px; }
.flex-min-160 { flex: 1; min-width: 160px; }
.flex-min-180 { flex: 1; min-width: 180px; }
.text-white { color: white; }
.text-amber { color: #d97706; }
.fw-normal { font-weight: 400; }

/* --- Common utilities --- */
.overflow-x-touch { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.p-10-16 { padding: 10px 16px; }
.input-touch { padding: 10px 14px; font-size: 16px; }
.text-empty-italic { font-size: 0.82rem; color: var(--gray-400); padding: 8px 0; font-style: italic; }
.btn-icon-ghost { background: none; border: none; cursor: pointer; color: var(--gray-400); padding: 2px 4px; font-size: 0.8rem; }
.scroll-70vh { max-height: 70vh; overflow-y: auto; }
.modal-subtitle { margin: 0 0 16px; font-size: 0.85rem; color: #64748b; }
.section-title-md { font-weight: 600; font-size: 0.95rem; color: var(--gray-800); }
.text-title-sm { font-size: 0.88rem; font-weight: 600; color: var(--gray-800); }
.text-normal-muted { font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--gray-400); }
.text-muted-sm { font-size: 0.8rem; color: var(--gray-400); }
.text-muted-500 { font-size: 0.82rem; color: var(--gray-500); font-weight: 500; }

/* --- Table headers --- */
.th-center-blue { padding: 8px 12px; text-align: center; font-weight: 700; color: var(--blue-800); border-bottom: 2px solid var(--blue-200); }
.th-left-blue { padding: 8px 12px; text-align: left; font-weight: 700; color: var(--blue-800); border-bottom: 2px solid var(--blue-200); }
.th-title-blue { font-weight: 700; font-size: 0.9rem; color: var(--blue-800); }
.td-center-danger { padding: 8px 12px; text-align: center; background: var(--danger-light); }
.td-nowrap { white-space: nowrap; padding: 6px 10px; }

/* --- Badges --- */
.badge-blue-pill { padding: 2px 10px; background: var(--blue-100); color: var(--blue-700); border-radius: 10px; font-size: 0.75rem; font-weight: 600; }
.badge-danger-pill { padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.badge-danger-sm { font-size: 0.72rem; background: var(--danger); color: white; padding: 2px 7px; border-radius: 5px; font-weight: 600; }

/* --- Info/warning boxes --- */
.info-box-blue { margin-top: 12px; padding: 10px 14px; background: #f8faff; border: 1px solid #dbeafe; border-radius: var(--radius-md); }
.info-box-blue-light { padding: 10px 14px; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius-md); }
.bg-danger-light { background: var(--danger-light); }
.p-8-12 { padding: 8px 12px; }
.card-body-white { padding: 16px 18px; background: var(--neu-bg-gradient); }

/* --- Scenarios --- */
.scenario-row { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--neu-bg-gradient); border: none; border-radius: var(--radius-md); flex-wrap: wrap; box-shadow: var(--neu-shadow-raised-sm); }
.scenario-num { width: 24px; height: 24px; background: var(--blue-600); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; color: white; flex-shrink: 0; }
.input-scenario-name { flex: 1; min-width: 100px; padding: 10px; border: none; border-radius: var(--radius-sm); font-size: 16px; font-family: inherit; color: var(--gray-800); background: var(--neu-bg); box-shadow: var(--neu-shadow-pressed); outline: none; }
.input-scenario-name:focus { box-shadow: var(--neu-shadow-pressed), 0 0 0 2px rgba(59,130,246,0.3); }
.input-scenario-desc { flex: 2; min-width: 100px; padding: 10px; border: none; border-radius: var(--radius-sm); font-size: 16px; font-family: inherit; color: var(--gray-600); background: var(--neu-bg); box-shadow: var(--neu-shadow-pressed); outline: none; }
.input-scenario-desc:focus { box-shadow: var(--neu-shadow-pressed), 0 0 0 2px rgba(59,130,246,0.3); }
.btn-scenario-delete { background: var(--neu-bg-gradient); border: none; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 0.8rem; color: var(--gray-400); cursor: pointer; font-family: inherit; transition: all 0.15s; flex-shrink: 0; min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; box-shadow: var(--neu-shadow-raised-sm); }
.btn-scenario-delete:hover { color: var(--danger); box-shadow: var(--neu-shadow-raised); }
.scen-tab-desc { font-size: 0.68rem; color: var(--gray-400); font-weight: 400; white-space: normal; line-height: 1.3; max-width: 200px; }
.scen-tab-content { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.scenario-tabs-bar { display: flex; border-bottom: 2px solid var(--gray-200); overflow-x: auto; margin-bottom: 0; }
.scenario-subtabs-bar { display: flex; gap: 2px; padding: 0 16px; background: var(--gray-50, #f9fafb); border-bottom: 1px solid var(--gray-200); overflow-x: auto; }
.scenario-subtab-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; border: none; border-bottom: 2px solid transparent; background: transparent; color: var(--gray-500); font-weight: 500; font-size: 0.78rem; cursor: pointer; font-family: inherit; transition: all 0.15s; white-space: nowrap; }
.scenario-subtab-btn:hover { color: var(--blue-600); background: var(--blue-50, #eff6ff); }
.scenario-subtab-btn--active { border-bottom-color: var(--blue-500); color: var(--blue-700); font-weight: 700; background: white; }

/* --- Documents --- */
.docs-container { max-width: 680px; }
.docs-upload-icon { font-size: 1.5rem; color: var(--gray-400); margin-bottom: 8px; display: block; }
.docs-upload-title { font-size: .875rem; font-weight: 600; color: var(--gray-600); }
.docs-upload-hint { font-size: .75rem; color: var(--gray-400); margin-top: 4px; }
.docs-checkbox { width: 16px; height: 16px; cursor: pointer; }
.docs-empty-icon { display: block; font-size: 1.5rem; margin-bottom: 6px; }
.btn-upload { padding: 8px 18px; background: #e4ecf6; color: var(--blue-700); border: none; border-radius: var(--radius-sm); font-size: .85rem; font-weight: 600; cursor: pointer; font-family: inherit; border-top: 1px solid rgba(255,255,255,0.7); filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.3)); transition: filter .15s; }
.btn-upload:hover { filter: drop-shadow(2px 2px 4px rgba(150,170,195,0.4)); }

/* --- Core (knockout modal) --- */
.modal-body-scroll { padding: 24px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.ko-summary-box { font-size: 0.9rem; color: #334155; line-height: 1.6; margin-bottom: 24px; padding: 14px 16px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; }
.btn-close-modal { background: none; border: none; cursor: pointer; color: #94a3b8; font-size: 1.2rem; padding: 4px 8px; border-radius: 6px; transition: all 0.15s; }
.ko-result-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 0.82rem; }

/* --- Extras --- */
.table-collapse { width: 100%; border-collapse: collapse; }
.fs-084 { font-size: 0.84rem; }
.range-full { width: 100%; accent-color: var(--blue-600); cursor: pointer; }
.sensitivity-num-input {
    width: 48px; padding: 4px 6px; text-align: center;
    font-size: 0.82rem; font-weight: 600; color: var(--blue-800);
    border: none; border-radius: var(--radius-sm);
    background: var(--neu-bg); font-family: inherit;
    box-shadow: var(--neu-shadow-pressed);
    -moz-appearance: textfield;
}
.sensitivity-num-input::-webkit-outer-spin-button,
.sensitivity-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sensitivity-num-input:focus { outline: none; box-shadow: var(--neu-shadow-pressed), 0 0 0 2px rgba(59,130,246,0.3); }
.label-sm-bold { font-size: 0.8rem; color: var(--gray-600); font-weight: 600; }
.text-muted-mb { font-size: 0.78rem; color: #6b7280; margin-bottom: 12px; }
.text-muted-xs-500 { font-size: 0.75rem; color: var(--gray-500); }
.btn-outline-blue { padding: 6px 12px; background: var(--neu-bg-gradient); border: none; border-radius: var(--radius-sm); font-size: 0.78rem; color: var(--blue-800); cursor: pointer; font-family: inherit; font-weight: 600; transition: all 0.15s; box-shadow: var(--neu-shadow-raised-sm); }
.btn-outline-blue:hover { box-shadow: var(--neu-shadow-raised); }
.textarea-warning { width: 100%; min-height: 80px; padding: 10px 12px; border: 1px solid #fcd34d; border-radius: var(--radius-sm); font-size: 0.88rem; font-family: inherit; color: var(--gray-800); resize: vertical; background: #fffbeb; outline: none; box-sizing: border-box; }
.input-sm-90 { width: 90px; padding: 7px 10px; font-size: 0.84rem; }
.input-sm-70 { width: 70px; padding: 7px 10px; font-size: 0.84rem; }
.input-sm-full { width: 100%; padding: 7px 10px; font-size: 0.84rem; }
.select-sm-auto { padding: 7px 10px; font-size: 0.82rem; width: auto; min-height: 38px; }

/* --- UI (renderer) --- */
.title-lg { font-weight: 700; font-size: 1rem; color: var(--gray-800); }
.progress-bar-track { height: 3px; background: var(--gray-200); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.ai-highlight-bg { padding: 10px 16px; background: linear-gradient(135deg, #f5f0ff, #faf5ff); }
.criteria-hints { margin-top: 6px; padding-left: 2px; font-size: 0.82rem; color: var(--gray-600); line-height: 1.6; }

/* --- Criterion card --- */
.criterion-card {
    background: var(--neu-bg-gradient); border: none; border-radius: var(--radius-lg);
    padding: 14px 16px; box-shadow: var(--neu-shadow-raised-sm);
    transition: box-shadow 0.15s; margin-bottom: 10px;
}
.criterion-card:hover { box-shadow: var(--neu-shadow-raised); }
.criterion-fields {
    display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
}
.criterion-col-name { flex: 2; min-width: 0; }
.criterion-col-unit { flex: 1; min-width: 0; }
.criterion-col-weight { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.criterion-col-direction { flex: 1.5; min-width: 0; }
.criterion-input { font-size: 0.88rem !important; }
.criterion-weight-input { width: 65px; text-align: center; }
.criterion-pct { font-size: 0.82rem; color: var(--gray-500); font-weight: 500; }
.criterion-delete-btn {
    color: var(--gray-300); background: none; border: none; cursor: pointer;
    padding: 6px; flex-shrink: 0; transition: color 0.15s; font-size: 0.85rem;
}
.criterion-delete-btn:hover { color: var(--danger); }

@media (max-width: 768px) {
    .criterion-card { padding: 12px; }
    .criterion-fields { flex-wrap: wrap; gap: 8px; }
    .criterion-col-name { flex: 1 1 100%; }
    .criterion-col-unit { flex: 1 1 calc(50% - 4px); }
    .criterion-col-weight { flex: 0 0 auto; }
    .criterion-col-direction { flex: 1 1 calc(50% - 40px); }
    .criterion-input { font-size: 16px !important; min-height: 44px; }
    .criterion-weight-input { width: 60px; }
    .criterion-delete-btn { position: absolute; top: 8px; right: 8px; }
    .criterion-card { position: relative; padding-right: 32px; }
}
.mt-5r { margin-top: 1.25rem; }
.select-direction { width: 140px; flex-shrink: 0; padding: 6px 10px; font-size: 0.82rem; }
.input-field-md { width: 100%; padding: 7px 11px; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); font-size: 0.87rem; font-family: inherit; box-sizing: border-box; }
.input-weight-touch { width: 70px; padding: 10px 14px; font-size: 16px; text-align: center; }
.input-negotiation { width: 90px; padding: 4px 7px; font-size: 0.75rem; border: none; border-radius: 4px; background: var(--neu-bg); color: var(--blue-700); font-family: inherit; outline: none; box-shadow: var(--neu-shadow-pressed); transition: box-shadow 0.15s; }
.input-negotiation:focus { box-shadow: var(--neu-shadow-pressed), 0 0 0 2px rgba(59,130,246,0.3); }
.btn-primary-md { padding: 7px 14px; background: var(--neu-bg-gradient); color: var(--blue-700); border: none; border-radius: var(--radius-sm); font-size: 0.87rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-primary-md:hover { background: var(--blue-700); }

/* --- RFQ --- */
.label-uppercase-xs { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gray-400); margin-bottom: 6px; }
.text-danger-xs { color: #dc2626; font-size: 0.7rem; }
.checkbox-amber-xs { accent-color: #d97706; width: 13px; height: 13px; }
.text-success-title { font-weight: 700; font-size: 0.95rem; color: #14532d; }
.table-bordered-rounded { width: 100%; border-collapse: collapse; border: 1px solid var(--gray-200); border-radius: var(--radius-md); overflow: hidden; }
.success-banner { padding: 16px 20px; background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1px solid #86efac; border-radius: var(--radius-md); }
.empty-dashed { padding: 12px; background: var(--gray-50); border: 1px dashed var(--gray-200); border-radius: var(--radius-md); font-size: 0.82rem; color: var(--gray-500); text-align: center; }
.summary-row-label { padding: 10px 14px; border-bottom: 1px solid var(--gray-100); font-weight: 600; font-size: 0.95rem; text-align: right; }
.summary-row-value { padding: 10px 14px; border-bottom: 1px solid var(--gray-100); color: var(--gray-600); font-size: 0.85rem; width: 50%; }
.text-hint-sm { margin-top: 8px; font-size: 0.78rem; color: var(--gray-500); }
.warning-box { margin-top: 16px; padding: 12px 14px; background: #fefce8; border: 1px solid #fde68a; border-radius: var(--radius-md); }
.rfq-footer-note { margin-top: 16px; padding: 10px 14px; background: var(--gray-50); border-radius: var(--radius-md); font-size: 0.8rem; color: var(--gray-400); text-align: center; }
.rfq-note-box { margin-top: 12px; padding: 10px 12px; background: var(--gray-50); border-radius: var(--radius-md); font-size: 0.78rem; color: var(--gray-500); }
.rfq-summary-box { margin-bottom: 14px; padding: 10px 12px; background: var(--gray-50); border-radius: var(--radius-md); }

/* --- AI module --- */
.input-ai-prompt { width: 100%; box-sizing: border-box; padding: 8px 12px; border: none; border-radius: 8px; font-size: 0.9rem; font-family: inherit; margin-bottom: 16px; background: var(--neu-bg); box-shadow: var(--neu-shadow-pressed); outline: none; transition: box-shadow 0.15s; }
.input-ai-prompt:focus { box-shadow: var(--neu-shadow-pressed), 0 0 0 2px rgba(59,130,246,0.3); }
.btn-ai-primary { padding: 8px 18px; background: #2563eb; color: white; border: none; border-radius: 8px; font-size: 0.88rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.btn-ai-primary:hover { background: #1d4ed8; }
.btn-ai-cancel { padding: 8px 18px; background: var(--neu-bg-gradient); color: #64748b; border: none; border-radius: 8px; font-size: 0.88rem; cursor: pointer; font-family: inherit; transition: all 0.15s; box-shadow: var(--neu-shadow-raised-sm); }
.btn-ai-cancel:hover { box-shadow: var(--neu-shadow-raised); color: var(--gray-700); }
.btn-ai-cancel-sm { padding: 8px 16px; background: var(--neu-bg-gradient); color: #64748b; border: none; border-radius: 8px; font-size: 0.85rem; cursor: pointer; font-family: inherit; transition: all 0.15s; box-shadow: var(--neu-shadow-raised-sm); }
.btn-ai-cancel-sm:hover { box-shadow: var(--neu-shadow-raised); color: var(--gray-700); }
.btn-ai-amber { padding: 8px 20px; background: #92400e; color: white; border: none; border-radius: var(--radius-md); font-size: 0.85rem; font-weight: 500; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.btn-ai-amber:hover { background: #78350f; }
.btn-ai-blue-sm { padding: 8px 16px; background: var(--neu-bg-gradient); color: var(--blue-700); border: none; border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600; cursor: pointer; font-family: inherit; white-space: nowrap; align-self: flex-start; transition: all 0.15s; }
.btn-ai-blue-sm:hover { background: var(--blue-600); color: white; }
.btn-ai-danger { padding: 6px 16px; background: var(--danger); color: white; border: none; border-radius: var(--radius-md); font-size: 0.82rem; cursor: pointer; font-family: inherit; transition: all 0.15s; }
.btn-ai-danger:hover { background: #b91c1c; }
.btn-ai-outline-blue { padding: 6px 14px; background: var(--neu-bg-gradient); color: var(--blue-600); border: none; border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 500; cursor: pointer; font-family: inherit; white-space: nowrap; width: 100%; transition: all 0.15s; box-shadow: var(--neu-shadow-raised-sm); }
.btn-ai-outline-blue:not(:disabled):hover { box-shadow: var(--neu-shadow-raised); color: var(--blue-700); }
.btn-ai-success { padding: 6px 14px; background: var(--neu-bg-gradient); color: #059669; border: none; border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 500; cursor: pointer; font-family: inherit; white-space: nowrap; width: 100%; transition: all 0.15s; }
.btn-ai-success:hover { background: #059669; color: white; }
.btn-ai-blue-full { padding: 6px 14px; background: var(--neu-bg-gradient); color: var(--blue-700); border: none; border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 500; cursor: pointer; font-family: inherit; white-space: nowrap; width: 100%; transition: all 0.15s; }
.btn-ai-blue-full:hover { background: var(--blue-600); color: white; }
.btn-ai-outline-xs { padding: 4px 12px; background: var(--neu-bg-gradient); color: var(--blue-600); border: none; border-radius: var(--radius-sm); font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s; box-shadow: var(--neu-shadow-raised-sm); }
.btn-ai-outline-xs:not(:disabled):hover { box-shadow: var(--neu-shadow-raised); }
.btn-ai-ghost:hover { color: var(--blue-600) !important; background: var(--blue-50) !important; }
.ai-warning-box { padding: 20px; background: var(--warning-light); border: 1px solid #fde68a; border-radius: var(--radius-md); }
.ai-prompt-preview { padding: 10px 12px; background: rgba(255,255,255,0.6); border-radius: var(--radius-sm); font-size: 0.8rem; color: var(--gray-600); margin-bottom: 14px; font-family: 'JetBrains Mono', monospace; }
.ai-dialog-title { margin: 0 0 8px; font-size: 1rem; color: #1e293b; }
.ai-dialog-subtitle { margin: 0 0 16px; font-size: 0.8rem; color: #94a3b8; }
.ai-tip-box { margin-top: 8px; padding: 7px 10px; background: var(--blue-50); border-radius: var(--radius-sm); border-left: 3px solid var(--blue-400); font-size: 0.78rem; color: var(--blue-800); line-height: 1.5; }

/* --- FAZA 0: Strip container padding on mobile for max content width --- */
@media (max-width: 768px) {
    /* DB panel: thin horizontal padding */
    #db-panel.main-container {
        padding: 0 6px !important;
    }
    /* Section card inside DB: slim, keep subtle shadow */
    #db-panel > .section-card {
        margin: 0 !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--neu-shadow-raised-sm) !important;
    }
    /* Section header: hide on mobile — bottom nav replaces it */
    #db-panel .section-header {
        display: none;
    }
    /* Section body: slim padding */
    #db-panel .section-body {
        padding: 6px 8px !important;
    }
    /* DB toolbar: compact */
    #db-panel .db-toolbar {
        margin: 0 0 6px; border-radius: var(--radius-sm);
        padding: 8px;
    }
}

/* --- Hide FAB save on mobile — sticky banner handles saving --- */
@media (max-width: 768px) {
    #fabSave, #fabSave.fab-visible { display: none !important; }
}

/* ============================================================
   MOBILE NEUMORPHIC OVERHAUL
   ============================================================ */

/* --- FAZA A: Slim topbar on mobile --- */
@media (max-width: 768px) {
    /* Hide lang-switcher on mobile — moved to hamburger */
    .lang-switcher { display: none !important; }
    
    /* Company switcher: compact on mobile */
    .company-switcher-btn { max-width: 120px; }
    .company-switcher-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    
    /* Company switcher dropdown: full-width on mobile */
    .company-switcher-dropdown {
        position: fixed !important;
        top: 50px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 50px - 80px);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
        z-index: 300 !important;
    }
    
    /* Auth button: icon-only on mobile */
    .auth-btn span { display: none; }
    .auth-btn { padding: 6px 8px; border-radius: 8px; }
    
    /* Calc button: just icon */
    .topbar-calc-btn span { display: none !important; }
    .topbar-calc-btn { padding: 6px 8px; }
    
    /* Hamburger: icon-only */  
    .hamburger-btn span { display: none; }
    .hamburger-btn { padding: 6px 8px; border-radius: 8px; }
    
    /* Prevent topbar overflow */
    .topbar-inner { overflow: hidden; }
    .topbar-actions { gap: 4px; flex-shrink: 0; overflow: visible; }
    .topbar-brand { min-width: 0; overflow: hidden; }
    .topbar-brand .app-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    
    /* Hamburger dropdown: full-width on mobile */
    .hamburger-dropdown {
        position: fixed !important;
        top: 50px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-height: calc(100vh - 50px - 80px);
        overflow-y: auto;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
    }
    .hamburger-item { padding: 14px 20px; font-size: 0.92rem; min-height: 48px; }
    .hamburger-item i { width: 20px; font-size: 0.9rem; }
    .hamburger-sep { margin: 6px 16px; }
}

/* --- FAZA A: Neumorphic workflow stepper on mobile --- */

/* Editing analysis banner: sticky on mobile */
@media (max-width: 768px) {
    #editingAnalysisBanner {
        position: sticky !important;
        top: 50px;
        z-index: 95;
        padding: 6px 10px !important;
        font-size: 0.78rem !important;
        flex-wrap: wrap;
        gap: 6px !important;
    }
    /* When banner is visible, push workflow stepper below it */
    .has-editing-banner .workflow-nav {
        top: calc(50px + var(--banner-h, 40px)) !important;
    }
    .has-editing-banner [data-section] {
        scroll-margin-top: calc(50px + var(--banner-h, 40px) + 60px);
    }
}
@media (max-width: 768px) {
    .workflow-nav {
        background: var(--neu-bg) !important;
        padding: 0 !important;
        position: sticky !important;
        top: 50px;
        z-index: 90;
        border-bottom: none;
    }
    .workflow-steps {
        background: var(--neu-bg);
        box-shadow: var(--neu-shadow-inset);
        border-radius: var(--radius-lg);
        margin: 6px 12px;
        padding: 6px 8px !important;
        justify-content: center;
        gap: 0;
    }
    .workflow-step {
        padding: 6px 8px !important;
        border-bottom: none !important;
        background: transparent !important;
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .workflow-step .step-num {
        width: 32px; height: 32px;
        background: var(--neu-bg);
        box-shadow: 2px 2px 4px #b8bec7, -2px -2px 4px #ffffff;
        border: none !important;
        color: var(--gray-400);
        font-size: 0.75rem;
    }
    .workflow-step.active .step-num {
        background: linear-gradient(145deg, #4a8af5, #2563eb) !important;
        box-shadow: 2px 2px 4px #b8bec7, -2px -2px 4px #ffffff !important;
        color: white !important;
    }
    .workflow-step.visited .step-num {
        border: 2px solid #34d399 !important;
        color: #059669;
    }
    .workflow-connector {
        width: 16px !important;
        height: 2px;
        background: var(--gray-300) !important;
        margin: 0 2px;
    }
    .workflow-connector.done {
        background: #34d399 !important;
    }
    /* Fix scroll offset since workflow is no longer sticky */
    .section-card {
        scroll-margin-top: 110px !important;
    }
}

/* --- FAZA B: Bottom Navigation Bar --- */
#mobileBottomNav {
    display: none;
}
@media (max-width: 768px) {
    #mobileBottomNav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: var(--blue-900);
        padding: 0 0 env(safe-area-inset-bottom, 0px);
        z-index: 200;
        border-top: 1px solid rgba(255,255,255,0.08);
        
        /* Horizontal scroll */
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    #mobileBottomNav::-webkit-scrollbar { display: none; }
    
    .bnav-item {
        display: flex; flex-direction: column; align-items: center;
        justify-content: center;
        gap: 3px; color: rgba(255,255,255,0.45);
        font-size: 0.7rem; font-weight: 500;
        padding: 10px 4px 8px;
        cursor: pointer; transition: all 0.15s;
        position: relative; border: none; background: transparent;
        font-family: inherit;
        -webkit-tap-highlight-color: transparent;
        
        /* Each button = 25% width (4 visible) */
        min-width: 25%;
        flex: 0 0 25%;
        scroll-snap-align: start;
    }
    .bnav-item i { font-size: 1.35rem; margin-bottom: 2px; }
    .bnav-item.active { color: white; background: rgba(255,255,255,0.06); }
    .bnav-item.active i {
        background: rgba(96,165,250,0.25);
        border-radius: 14px; padding: 4px 16px;
        color: #60a5fa;
    }
    .bnav-badge {
        position: absolute; top: 4px; right: calc(50% - 24px);
        background: #ef4444; color: white;
        border-radius: 10px; padding: 1px 5px;
        font-size: 0.55rem; font-weight: 700;
        min-width: 16px; text-align: center;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    
    /* Scroll hint: subtle gradient on right edge */
    #mobileBottomNav::after {
        content: '';
        position: sticky; right: 0; top: 0;
        min-width: 20px; height: 100%;
        background: linear-gradient(90deg, transparent, var(--blue-900));
        pointer-events: none;
        flex-shrink: 0;
    }
    
    /* Hide DB tabs on mobile — replaced by bottom nav */
    .db-tabs-row { display: none !important; }
    
    /* Add bottom padding for fixed nav */
    body { padding-bottom: 80px; }
    
    /* FAB for adding supplier */
    #fabAddSupplier {
        position: fixed;
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
        right: 16px;
        width: 52px; height: 52px;
        border-radius: 50%; border: none;
        background: linear-gradient(145deg, #4a8af5, #2563eb);
        color: white; font-size: 1.2rem;
        box-shadow: 4px 4px 8px rgba(0,0,0,0.15), -2px -2px 6px rgba(255,255,255,0.1);
        display: none; /* shown by JS when on suppliers tab */
        align-items: center; justify-content: center;
        cursor: pointer; z-index: 150;
        -webkit-tap-highlight-color: transparent;
    }
    #fabAddSupplier.visible { display: flex; }
    
    /* Hide the toolbar "add" and "AI" buttons on mobile — replaced by FAB */
    .db-toolbar > .btn-success-sm,
    .db-toolbar > .btn-primary-sm { display: none !important; }
}

/* --- FAZA C: Supplier card view on mobile --- */
@media (max-width: 768px) {
    .mobile-supplier-card {
        margin: 0 2px 6px;
        padding: 12px 10px;
        background: #edf2f8;
        border-radius: var(--radius-md);
        border-top: 1px solid rgba(255,255,255,0.85);
        border-left: 1px solid rgba(255,255,255,0.85);
        border-right: 1px solid rgba(184,190,199,0.12);
        border-bottom: 1px solid rgba(184,190,199,0.12);
        filter: drop-shadow(2px 2px 4px rgba(166,180,200,0.3));
        transition: filter 0.15s;
    }
    .mobile-supplier-card:active {
        filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.2));
    }
    .mobile-card-top {
        display: flex; justify-content: space-between; align-items: flex-start;
        margin-bottom: 6px;
    }
    .mobile-card-name { font-weight: 700; font-size: 0.9rem; color: var(--gray-800); }
    .mobile-card-nip { font-size: 0.7rem; color: var(--gray-400); margin-top: 1px; }
    .mobile-card-details {
        display: flex; gap: 12px; font-size: 0.78rem; color: var(--gray-600);
        flex-wrap: wrap;
    }
    .mobile-card-detail { display: flex; align-items: center; gap: 4px; }
    .mobile-card-detail i { font-size: 0.7rem; width: 14px; text-align: center; }
    .mobile-card-actions {
        display: flex; gap: 8px; margin-top: 8px; padding-top: 8px;
        border-top: 1px solid rgba(184,190,199,0.2);
    }
    .mobile-card-action {
        flex: 1; padding: 9px 8px; border: none; border-radius: var(--radius-md);
        background: #e4ecf6;
        border-top: 1px solid rgba(255,255,255,0.7);
        filter: drop-shadow(1px 1px 2px rgba(166,180,200,0.3));
        font-size: 0.76rem; font-weight: 600; color: var(--gray-600);
        display: flex; align-items: center; justify-content: center; gap: 4px;
        cursor: pointer; font-family: inherit;
        -webkit-tap-highlight-color: transparent;
        transition: filter 0.15s;
    }
    .mobile-card-action:active {
        box-shadow: var(--neu-shadow-pressed); filter: none;
    }
    .mobile-card-action.primary {
        background: linear-gradient(145deg, #4a8af5, #2563eb);
        color: white;
        filter: drop-shadow(2px 2px 4px rgba(37,99,235,0.3));
    }

    /* --- Detail panel inside mobile card — compact --- */
    .mobile-supplier-card .db-row-details {
        padding: 8px 0 0 !important;
        margin-top: 8px;
        box-shadow: none !important;
        background: transparent !important;
        border-top: 1px solid rgba(184,190,199,0.2);
    }

    /* Stab tabs: full-width, scroll, compact */
    .mobile-supplier-card .stab-bar {
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 2px;
        margin-bottom: 8px;
        gap: 2px;
    }
    .mobile-supplier-card .stab-bar::-webkit-scrollbar { display: none; }
    .mobile-supplier-card .stab-btn {
        padding: 6px 10px;
        font-size: 0.72rem;
        min-height: 34px;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .mobile-supplier-card .stab-btn i { margin-right: 3px; }

    /* Field grid: single column, compact cards */
    .mobile-supplier-card div[style*="grid-template-columns"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        padding: 4px 0 8px !important;
    }
    .mobile-supplier-card .detail-field-card {
        min-width: 0 !important;
        padding: 6px 10px;
        border-radius: 6px;
    }
    .mobile-supplier-card .detail-field-label {
        font-size: 0.62rem;
        margin-bottom: 2px;
    }
    .mobile-supplier-card .detail-field-value {
        font-size: 0.82rem;
    }

    /* Action buttons inside detail: full-width stack */
    .mobile-supplier-card div[style*="border-top:1px solid"] {
        flex-direction: column !important;
        gap: 6px !important;
        padding-top: 8px !important;
    }
    .mobile-supplier-card div[style*="border-top"] button {
        width: 100%;
        min-height: 44px;
    }
}

/* Hamburger mobile-only items */
.hamburger-mobile-only { display: none !important; }
@media (max-width: 768px) {
    .hamburger-mobile-only { display: flex !important; }
}

/* ═══════════════════════════════════════════════════
   REORGANIZED UI — Toolbar, Panels, Settings Bar
   Uses neumorphic design tokens from :root
   ═══════════════════════════════════════════════════ */

/* ─── AI Settings compact bar ─── */
.ai-settings-bar {
    padding: 0 20px;
    background: #edf2f8;
    border-bottom: 1px solid rgba(184,190,199,0.2);
}
.ai-settings-bar-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    flex-wrap: wrap;
    font-size: 0.78rem;
}
.ai-settings-bar-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: var(--blue-600);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ai-settings-bar-group {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-settings-bar-field-label {
    font-size: 0.72rem;
    color: var(--gray-500);
    font-weight: 500;
}
.ai-settings-bar-select {
    font-size: 0.78rem;
    padding: 3px 8px;
    border: none;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.5);
    color: var(--gray-700);
    cursor: pointer;
    box-shadow: var(--neu-shadow-pressed);
}
.ai-settings-bar-select:focus {
    outline: none;
    box-shadow: var(--neu-shadow-pressed), var(--shadow-focus);
}
.ai-settings-bar-val {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--blue-600);
    min-width: 16px;
    text-align: center;
}
.ai-settings-bar-cost {
    font-size: 0.7rem;
    color: var(--gray-400);
}
.ai-settings-bar-tier-info {
    display: none;
}
.range-slider-xs {
    -webkit-appearance: none;
    appearance: none;
    width: 70px;
    height: 4px;
    border-radius: 2px;
    background: rgba(184,190,199,0.4);
    box-shadow: inset 1px 1px 2px #b8bec7;
    outline: none;
    cursor: pointer;
}
.range-slider-xs::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--neu-bg-gradient);
    cursor: pointer;
    box-shadow: var(--neu-shadow-raised-sm);
    border: 2px solid var(--blue-400);
}
.range-slider-xs::-webkit-slider-thumb:hover {
    box-shadow: var(--neu-shadow-raised);
    border-color: var(--blue-500);
}

/* ─── Supplier toolbar — 3 neumorphic buttons ─── */
.supplier-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.stoolbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    border: none;
    background: var(--neu-bg-gradient);
    color: var(--gray-700);
    font-size: 0.84rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: var(--neu-shadow-raised-sm);
    min-height: 42px;
}
.stoolbar-btn:hover {
    color: var(--blue-700);
    box-shadow: var(--neu-shadow-raised);
}
.stoolbar-btn:active {
    box-shadow: var(--neu-shadow-pressed);
    transform: scale(0.98);
}
.stoolbar-btn i { font-size: 0.75rem; }
.stoolbar-btn-active {
    box-shadow: var(--neu-shadow-pressed);
    color: var(--blue-700);
    font-weight: 600;
}
.stoolbar-btn-ai {
    color: var(--blue-600);
}
.stoolbar-btn-ai:hover { color: var(--blue-800); }
.stoolbar-btn-db {
    color: var(--success);
}
.stoolbar-btn-db:hover { color: #047857; }

/* ─── Toggle panels (neumorphic inset) ─── */
.supplier-panel {
    background: var(--neu-bg-gradient);
    border: none;
    border-radius: var(--radius-lg);
    padding: 18px;
    margin-bottom: 16px;
    box-shadow: var(--neu-shadow-inset);
    animation: panelSlideIn 0.2s ease-out;
}
@keyframes panelSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.supplier-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--gray-700);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(184,190,199,0.3);
}
.supplier-panel-header-ai {
    color: var(--blue-700);
}
.supplier-panel-close {
    margin-left: auto;
    background: var(--neu-bg-gradient);
    border: none;
    color: var(--gray-400);
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
    box-shadow: var(--neu-shadow-raised-sm);
}
.supplier-panel-close:hover {
    color: var(--gray-700);
    box-shadow: var(--neu-shadow-raised);
}
.supplier-panel-close:active {
    box-shadow: var(--neu-shadow-pressed);
}

/* ─── Spec templates — discreet collapsible ─── */
.spec-templates-collapsible {
    border: none;
    border-radius: var(--radius-md);
    background: var(--neu-bg-gradient);
    box-shadow: var(--neu-shadow-raised-sm);
    padding: 0;
}
.spec-templates-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}
.spec-templates-summary::-webkit-details-marker { display: none; }
.spec-templates-collapsible[open] .spec-templates-summary {
    border-bottom: 1px solid rgba(184,190,199,0.25);
}
.spec-templates-collapsible[open] .spec-templates-summary i:last-child {
    transform: rotate(180deg);
}
.spec-templates-collapsible[open] {
    box-shadow: var(--neu-shadow-inset);
}
.spec-templates-collapsible > div { padding: 0 14px; }

/* ─── Criteria subsections — unified collapsible (knockout, scenarios, templates) ─── */
.criteria-collapsible {
    border: none;
    border-radius: var(--radius-lg);
    background: var(--neu-bg-gradient);
    box-shadow: var(--neu-shadow-raised-sm);
    padding: 0;
    transition: box-shadow 0.2s;
}
.criteria-collapsible-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    min-height: 52px;
    box-sizing: border-box;
}
.criteria-collapsible-summary::-webkit-details-marker { display: none; }
.criteria-collapsible-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--gray-700);
    white-space: nowrap;
}
.criteria-collapsible-subtitle {
    font-size: 0.75rem;
    color: var(--gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.criteria-collapsible-count {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--blue-100);
    color: var(--blue-700);
}
.criteria-collapsible-action {
    flex-shrink: 0;
    min-width: 150px;
    text-align: center;
    justify-content: center;
}
.criteria-collapsible-chevron {
    font-size: 0.6rem;
    color: var(--gray-400);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.criteria-collapsible[open] {
    box-shadow: var(--neu-shadow-inset);
}
.criteria-collapsible[open] .criteria-collapsible-summary {
    border-bottom: 1px solid rgba(184,190,199,0.25);
}
.criteria-collapsible[open] .criteria-collapsible-chevron {
    transform: rotate(180deg);
}
.criteria-collapsible-body {
    padding: 14px 16px;
}
.criteria-collapsible-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--gray-600);
}
.criteria-collapsible-hint-red {
    background: rgba(220,38,38,0.08);
    border: 1px solid rgba(220,38,38,0.12);
    color: #7f1d1d;
}
.criteria-collapsible-hint-blue {
    background: rgba(59,130,246,0.08);
    border: 1px solid rgba(59,130,246,0.12);
    color: #1e3a5f;
}
/* Red accent for knockout */
.criteria-collapsible-red .criteria-collapsible-title { color: var(--gray-700); }
.criteria-collapsible-red .btn-danger { 
    background: var(--danger); color: white; border: none; 
    box-shadow: 2px 2px 4px rgba(220,38,38,0.2), -1px -1px 3px rgba(255,255,255,0.6);
}
.criteria-collapsible-red .btn-danger:hover { 
    box-shadow: 3px 3px 6px rgba(220,38,38,0.3), -2px -2px 4px rgba(255,255,255,0.7); 
}
.criteria-collapsible-red .btn-danger:active { 
    box-shadow: inset 2px 2px 4px rgba(180,20,20,0.3); transform: scale(0.98); 
}
/* Muted for templates */
.criteria-collapsible-muted .criteria-collapsible-title { color: var(--gray-500); }

@media (max-width: 768px) {
    .criteria-collapsible-subtitle { font-size: 0.7rem; max-width: 180px; }
    .criteria-collapsible-summary { padding: 10px 12px; gap: 6px; }
    .criteria-collapsible-action { min-width: 0; }
    .criteria-collapsible-action span { display: none; }
    .criteria-collapsible-body { padding: 12px; }
}
@media (max-width: 480px) {
    .criteria-collapsible-subtitle { display: none; }
}

/* ─── AI Profile collapsible in Discovery panel ─── */
.ai-profile-collapsible {
    border: none;
    border-radius: var(--radius-md);
    background: var(--neu-bg-gradient);
    box-shadow: var(--neu-shadow-raised-sm);
    padding: 0;
}
.ai-profile-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--blue-600);
}
.ai-profile-summary::-webkit-details-marker { display: none; }
.ai-profile-collapsible[open] .ai-profile-summary {
    border-bottom: 1px solid rgba(184,190,199,0.25);
}
.ai-profile-collapsible[open] .ai-profile-summary i:last-child {
    transform: rotate(180deg);
}
.ai-profile-collapsible[open] {
    box-shadow: var(--neu-shadow-inset);
}
.ai-profile-collapsible .ai-profile-grid {
    padding: 10px 14px 6px;
}
.ai-profile-collapsible .flex-selectall {
    padding: 0 14px 10px;
}

/* ─── Enrich result — collapsible preview (neumorphic) ─── */
.enrich-details {
    margin-top: 8px;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.enrich-details > summary {
    list-style: none;
}
.enrich-details > summary::-webkit-details-marker { display: none; }
.enrich-collapsed-preview {
    margin: 0;
    padding: 10px 14px;
    background: var(--neu-bg-gradient);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s;
    box-shadow: var(--neu-shadow-raised-sm);
}
.enrich-collapsed-preview:hover {
    box-shadow: var(--neu-shadow-raised);
}
.enrich-collapsed-preview:hover .enrich-collapsed-preview-expand {
    color: var(--blue-600);
}
.enrich-collapsed-preview-icon {
    font-size: 0.8rem;
    color: var(--blue-500);
}
.enrich-collapsed-preview-text {
    font-size: 0.82rem;
    color: var(--blue-700);
    font-weight: 600;
}
.enrich-collapsed-preview-teaser {
    font-size: 0.75rem;
    color: var(--gray-400);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}
.enrich-collapsed-preview-score {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
}
.enrich-collapsed-preview-expand {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--gray-400);
    white-space: nowrap;
    transition: color 0.15s;
}
.enrich-collapsed-preview-expand i {
    font-size: 0.6rem;
    transition: transform 0.2s;
}
.enrich-details[open] .enrich-collapsed-preview {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: var(--neu-shadow-pressed);
}
.enrich-details[open] .enrich-collapsed-preview-expand i {
    transform: rotate(180deg);
}
.enrich-details[open] .enrich-collapsed-preview-expand span {
    display: none;
}

/* ─── Context badge (etykieta pozycji / rundy) ─── */
.context-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 10px;
    font-size: 0.75rem; font-weight: 600;
    margin-top: 4px;
}
.context-badge-item {
    background: var(--blue-100); color: var(--blue-700);
    border: 1px solid #bfdbfe;
}
.context-badge-round {
    background: #e0e7ff; color: #4338ca;
    border: 1px solid #c7d2fe;
}

/* ─── Discovery NIP required field ─── */
.discover-nip-required {
    padding: 8px 10px;
    background: var(--neu-bg-gradient);
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--neu-shadow-inset);
}

/* ─── Mobile responsive ─── */
@media (max-width: 768px) {
    .ai-settings-bar { padding: 0 12px; }
    .ai-settings-bar-inner { gap: 8px; padding: 6px 0; }
    .ai-settings-bar-tier-info { display: none; }
    .supplier-toolbar { gap: 6px; }
    .stoolbar-btn {
        padding: 8px 10px;
        font-size: 0.78rem;
        flex: 1;
        justify-content: center;
        min-height: 40px;
    }
    .stoolbar-btn span { display: none; }
    .stoolbar-btn i { font-size: 0.88rem; }
    .supplier-panel { padding: 12px; }
    .enrich-collapsed-preview span:nth-child(3) { display: none; }
}
@media (min-width: 769px) {
    .stoolbar-btn span { display: inline; }
}

/* ============================================
   PHASE 3 — Visual refresh: panel separators & panel classes
   ============================================ */

/* --- Separatory paneli wynikowych --- */
#aggregateScorePanel > div { margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--gray-200); }
#aggregateScorePanel > div:first-child { margin-top: 0; padding-top: 0; border-top: none; }
#decisionPanel > div { margin-top: 20px; padding-top: 20px; border-top: 2px solid var(--gray-200); }
#decisionPanel > div:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* --- Sensitivity panel --- */
.panel-sensitivity-head {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    background: linear-gradient(135deg, #e5ecf5, #f0f4fa); flex-wrap: wrap;
}
.panel-sensitivity-empty {
    border: 2px solid var(--blue-200); border-radius: var(--radius-lg);
    padding: 18px 22px; background: var(--blue-50);
    display: flex; align-items: center; gap: 14px;
}

/* --- Aggregate panel --- */
.panel-aggregate-head {
    display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    background: linear-gradient(135deg, #e5ecf5, #f0f4fa); flex-wrap: wrap;
}
.panel-aggregate-empty {
    border: 2px solid var(--blue-200); border-radius: var(--radius-lg);
    padding: 18px 22px; background: var(--blue-50);
    display: flex; align-items: center; gap: 14px;
}

/* --- Decision panel --- */
.panel-decision-head {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: linear-gradient(135deg, var(--blue-50), #eef4ff); flex-wrap: wrap;
}
.panel-decision-head--deviation {
    display: flex; align-items: center; gap: 10px; padding: 12px 16px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7); flex-wrap: wrap;
}
.panel-decision-border {
    border: 1px solid var(--blue-200); border-radius: var(--radius-lg); overflow: clip; margin-top: 20px;
}
.panel-decision-border--deviation {
    border: 1px solid #fcd34d; border-radius: var(--radius-lg); overflow: clip; margin-top: 20px;
}

/* --- Wspólna ikona w headerze paneli --- */
.panel-icon-box {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--blue-800), var(--blue-600));
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.panel-icon-box--indigo {
    background: linear-gradient(135deg, #4338ca, #6366f1);
}
.panel-icon-box--amber {
    background: linear-gradient(135deg, #d97706, #f59e0b);
}
.panel-icon-box--sm { width: 32px; height: 32px; }

/* --- Przycisk zamknięcia paneli (X) --- */
.panel-close-btn {
    background: none; border: none; cursor: pointer;
    color: var(--gray-300); padding: 4px;
    transition: color 0.15s;
}
.panel-close-btn:hover { color: var(--blue-800); }

/* --- CTA aggregate gradient --- */
.bg-indigo-gradient { background: linear-gradient(135deg, #4338ca, #6366f1); }

/* --- Mobile: czytelniejsze labele formularzy --- */
@media (max-width: 480px) {
    .form-label-sm { font-size: 0.8rem; }
}