:root {
    --bg: #eef3f8;
    --surface: #ffffff;
    --surface-2: #f8fafc;
    --ink: #0b1220;
    --muted: #64748b;
    --muted-2: #94a3b8;
    --line: #e2e8f0;
    --primary: #155EEF;
    --primary-2: #0B4BD3;
    --primary-soft: #EAF1FF;
    --success: #0f9f6e;
    --warning: #d97706;
    --danger: #dc2626;
    --dark: #07111f;
    --nav: #08111f;
    --nav-2: #0f1b2d;
    --shadow-sm: 0 10px 30px rgba(15, 23, 42, .06);
    --shadow: 0 22px 70px rgba(15, 23, 42, .10);
    --radius: 22px;
    --radius-sm: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

img, svg { max-width: 100%; }

.btn {
    border-radius: 14px;
    font-weight: 800;
    letter-spacing: -.01em;
    padding: .72rem 1.05rem;
}

.btn-sm { padding: .47rem .76rem; border-radius: 12px; }

.btn-primary {
    background: linear-gradient(135deg, var(--primary), #3478ff);
    border: 0;
    box-shadow: 0 12px 28px rgba(21, 94, 239, .22);
}

.btn-primary:hover { background: linear-gradient(135deg, var(--primary-2), var(--primary)); transform: translateY(-1px); }

.btn-outline-primary { border-color: rgba(21,94,239,.28); color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); }
.btn-outline-dark { border-color: #cbd5e1; color: #0f172a; }
.btn-outline-dark:hover { background: #0f172a; border-color: #0f172a; }

.form-label {
    font-size: .86rem;
    font-weight: 800;
    color: #334155;
    margin-bottom: .45rem;
}

.form-control,
.form-select {
    border-radius: 15px;
    border-color: var(--line);
    padding: .82rem .95rem;
    background-color: #fff;
    color: #0f172a;
}

.form-control-lg,
.form-select-lg { min-height: 54px; font-size: 1rem; }

.form-control:focus,
.form-select:focus {
    border-color: rgba(21, 94, 239, .7);
    box-shadow: 0 0 0 4px rgba(21, 94, 239, .11);
}

.form-text { color: var(--muted); }

.alert {
    border: 0;
    border-radius: 18px;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
}

.alert-danger { background: #fef2f2; color: #991b1b; }
.alert-success { background: #ecfdf5; color: #065f46; }

/* Auth */
.auth-body {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 8%, rgba(21, 94, 239, .16), transparent 34%),
        radial-gradient(circle at 82% 12%, rgba(14, 165, 233, .13), transparent 30%),
        linear-gradient(180deg, #f8fafc, #eef3f8);
}

.auth-wrap { min-height: 100vh; }

.auth-brand-panel {
    position: relative;
    overflow: hidden;
    color: #fff;
    align-items: center;
    padding: clamp(48px, 7vw, 86px);
    background:
        linear-gradient(140deg, rgba(5, 13, 26, .97), rgba(14, 28, 52, .92)),
        radial-gradient(circle at 10% 10%, rgba(21, 94, 239, .45), transparent 30%);
}

.auth-brand-panel::before,
.auth-brand-panel::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 999px;
}

.auth-brand-panel::before {
    width: 470px;
    height: 470px;
    right: -180px;
    top: -120px;
    background: radial-gradient(circle, rgba(21,94,239,.55), transparent 68%);
}

.auth-brand-panel::after {
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .55;
}

.auth-brand-content { position: relative; z-index: 1; max-width: 640px; }

.brand-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid rgba(255,255,255,.16);
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    font-size: 13px;
    color: #dbeafe;
    backdrop-filter: blur(12px);
}

.brand-badge::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 5px rgba(34,197,94,.18);
}

.auth-brand-title {
    margin-top: 28px;
    font-size: clamp(42px, 5.5vw, 70px);
    line-height: .98;
    letter-spacing: -2.4px;
    font-weight: 950;
}

.auth-brand-text {
    color: #cbd5e1;
    font-size: 18px;
    line-height: 1.75;
    max-width: 580px;
    margin-top: 22px;
}

.auth-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
    margin-top: 34px;
}

.auth-feature {
    border: 1px solid rgba(255,255,255,.13);
    background: rgba(255,255,255,.07);
    border-radius: 20px;
    padding: 16px;
    backdrop-filter: blur(14px);
}

.auth-feature strong { display: block; color: #fff; font-size: 15px; margin-bottom: 4px; }
.auth-feature span { color: #cbd5e1; font-size: 13px; }

.auth-card-shell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.auth-card {
    width: 100%;
    max-width: 490px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: 30px;
    padding: clamp(28px, 4vw, 42px);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
}

.auth-logo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
}

.logo-tile,
.logo-mark {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--primary), #3b82f6);
    color: #fff;
    font-weight: 950;
    box-shadow: 0 14px 32px rgba(21, 94, 239, .26);
}

.auth-logo-row strong { display: block; letter-spacing: -.03em; }
.auth-logo-row small { display: block; color: var(--muted); font-weight: 700; }

.otp-input {
    letter-spacing: 10px;
    font-size: 30px;
    font-weight: 950;
}

/* Dashboard */
.dashboard-body { background: #eef3f8; }

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 292px minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 6%, rgba(21,94,239,.26), transparent 28%),
        linear-gradient(180deg, var(--nav), var(--nav-2));
    border-right: 1px solid rgba(255,255,255,.06);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 6px 22px;
    border-bottom: 1px solid rgba(255,255,255,.09);
}

.sidebar-brand strong { display: block; color: #fff; letter-spacing: -.03em; }
.sidebar-brand small { display: block; color: #8ea0b8; font-weight: 700; }

.sidebar-nav {
    display: grid;
    gap: 7px;
    margin-top: 20px;
}

.sidebar-section {
    margin: 22px 8px 7px;
    color: #7f90aa;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #c7d2e3;
    padding: 12px 13px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 750;
    transition: .16s ease;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background: rgba(255,255,255,.09);
    color: #fff;
    transform: translateX(2px);
}

.nav-icon {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.08);
    font-size: 14px;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 18px;
}

.sidebar-mini-card {
    border: 1px solid rgba(255,255,255,.09);
    background: rgba(255,255,255,.06);
    border-radius: 22px;
    padding: 16px;
}

.sidebar-mini-card strong { display: block; font-size: 14px; }
.sidebar-mini-card span { color: #9fb0c6; font-size: 12px; line-height: 1.5; }

.main-content { min-width: 0; }

.topbar {
    height: 82px;
    background: rgba(255,255,255,.84);
    border-bottom: 1px solid rgba(226,232,240,.82);
    padding: 0 34px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 20;
    backdrop-filter: blur(20px);
}

.topbar-title small { display: block; color: var(--muted); font-weight: 750; }
.topbar-title h5 { margin: 2px 0 0; font-weight: 950; letter-spacing: -.03em; }

.topbar-actions { display: flex; align-items: center; gap: 12px; }

.role-pill,
.status-badge,
.soft-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: #1e40af;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
}

.status-badge::before,
.role-pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.status-quote_requested { background: #eff6ff; color: #1d4ed8; }
.status-sent_to_suppliers { background: #fff7ed; color: #c2410c; }
.status-supplier_quotes_received { background: #fef9c3; color: #a16207; }
.status-customer_approved { background: #ecfdf5; color: #047857; }
.status-order_created { background: #f0fdf4; color: #15803d; }
.status-rejected, .status-cancelled { background: #fef2f2; color: #b91c1c; }

.content-area { padding: 32px 34px 44px; }

.page-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-end;
    margin-bottom: 24px;
}

.page-kicker {
    color: var(--primary);
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.page-heading h1 {
    font-size: clamp(28px, 3vw, 38px);
    font-weight: 950;
    margin: 0;
    letter-spacing: -1.2px;
}

.page-heading p { color: var(--muted); margin: 7px 0 0; max-width: 700px; }

.hero-panel,
.content-card,
.metric-card,
.table-card,
.panel-card {
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.hero-panel {
    position: relative;
    overflow: hidden;
    padding: 30px;
    background:
        radial-gradient(circle at 85% 18%, rgba(21,94,239,.16), transparent 28%),
        linear-gradient(135deg, #ffffff, #f8fbff);
}

.hero-panel::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    right: -80px;
    bottom: -120px;
    background: radial-gradient(circle, rgba(21,94,239,.20), transparent 70%);
}

.hero-panel > * { position: relative; z-index: 1; }

.content-card,
.panel-card { padding: 26px; }

.metric-card {
    padding: 24px;
    overflow: hidden;
    position: relative;
}

.metric-card::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: -50px;
    top: -50px;
    border-radius: 999px;
    background: rgba(21,94,239,.08);
}

.metric-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-size: 13px;
    font-weight: 850;
    margin-bottom: 12px;
}

.metric-value {
    display: block;
    font-size: 38px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -1px;
}

.metric-hint { display: block; color: var(--muted-2); font-size: 12px; margin-top: 10px; }

.table-card { overflow: hidden; }
.table { --bs-table-bg: transparent; }
.table thead th {
    background: #f8fafc;
    color: #475569;
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--line);
}
.table td,
.table th { padding: 16px 18px; vertical-align: middle; }
.table tbody tr:hover { background: #f8fbff; }

.empty-state {
    text-align: center;
    padding: 52px 20px;
    color: var(--muted);
}
.empty-state-icon {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 28px;
    margin-bottom: 14px;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.detail-grid div,
.info-tile {
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
    background: linear-gradient(180deg, #fff, #f8fafc);
}

.detail-grid span,
.info-tile span {
    display: block;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

.detail-grid strong,
.info-tile strong { font-size: 16px; font-weight: 950; }

.file-row,
.quote-offer-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}
.file-row:last-child,
.quote-offer-row:last-child { border-bottom: 0; }
.file-row small,
.quote-offer-row small { display: block; color: var(--muted); margin-top: 2px; }

.timeline { display: grid; gap: 14px; }
.timeline-item {
    position: relative;
    padding: 14px 16px 14px 22px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 18px;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 14px;
    bottom: 14px;
    width: 4px;
    border-radius: 999px;
    background: var(--primary);
}
.timeline-item p { margin: 4px 0; color: var(--muted); }
.timeline-item small { color: #64748b; font-weight: 700; }

.upload-zone {
    border: 1.5px dashed #b7c6dc;
    border-radius: 22px;
    background:
        linear-gradient(180deg, #ffffff, #f8fbff);
    padding: 24px;
    transition: .18s ease;
}
.upload-zone:hover { border-color: var(--primary); background: #f8fbff; }
.upload-zone .form-control { background: transparent; }

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
.section-title h5 { margin: 0; font-weight: 950; letter-spacing: -.03em; }
.section-title p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }

.price-text { font-size: 22px; font-weight: 950; letter-spacing: -.04em; }

@media (max-width: 1100px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; border-right: 0; }
    .sidebar-nav { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .sidebar-footer { display: none; }
    .topbar { position: static; }
}

@media (max-width: 767px) {
    .auth-card-shell { padding: 18px; }
    .auth-feature-grid { grid-template-columns: 1fr; }
    .sidebar { padding: 16px; }
    .sidebar-nav { grid-template-columns: 1fr; }
    .topbar { height: auto; padding: 18px; align-items: flex-start; gap: 14px; flex-direction: column; }
    .topbar-actions { width: 100%; justify-content: space-between; }
    .content-area { padding: 20px 16px 34px; }
    .page-heading { align-items: flex-start; flex-direction: column; }
    .detail-grid { grid-template-columns: 1fr; }
    .auth-card { border-radius: 24px; }
}

/* V3 landing + registration + CAD preview refinements */
.landing-body { background: #f8fafc; color: #0f172a; }
.landing-nav { position: sticky; top: 0; z-index: 20; background: rgba(248,250,252,.92); backdrop-filter: blur(18px); border-bottom: 1px solid #e2e8f0; }
.brand-mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: -.03em; }
.brand-icon, .logo-tile, .logo-mark { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg,#1d4ed8,#0f172a); color: #fff; font-weight: 900; }
.register-menu { width: 310px; border: 1px solid #e2e8f0; border-radius: 18px; padding: 10px; box-shadow: 0 24px 70px rgba(15,23,42,.16); }
.register-menu-item { border-radius: 14px; padding: 14px; white-space: normal; }
.register-menu-item strong { display: block; }
.register-menu-item small { display: block; color: #64748b; margin-top: 2px; }
.hero-section { padding: 92px 0 70px; background: radial-gradient(circle at 15% 5%, #dbeafe 0, transparent 38%), radial-gradient(circle at 90% 10%, #e0e7ff 0, transparent 34%), #f8fafc; }
.eyebrow { display: inline-flex; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #1d4ed8; margin-bottom: 16px; }
.hero-section h1 { font-size: clamp(42px, 6vw, 76px); line-height: .95; font-weight: 950; letter-spacing: -.07em; max-width: 880px; }
.hero-lead { color: #475569; font-size: 19px; line-height: 1.75; max-width: 720px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 34px; max-width: 560px; }
.hero-stats div { background: #fff; border: 1px solid #e2e8f0; border-radius: 18px; padding: 16px; box-shadow: 0 20px 50px rgba(15,23,42,.06); }
.hero-stats strong { display: block; font-size: 24px; font-weight: 950; }
.hero-stats span { display: block; color: #64748b; font-size: 13px; }
.hero-panel { background: rgba(255,255,255,.86); border: 1px solid #e2e8f0; border-radius: 30px; padding: 22px; box-shadow: 0 30px 90px rgba(15,23,42,.12); }
.hero-panel-head { display: flex; gap: 8px; margin-bottom: 18px; }
.dot { width: 11px; height: 11px; border-radius: 999px; background: #cbd5e1; }
.dot.active { background: #1d4ed8; }
.quote-simulator { background: #0f172a; border-radius: 22px; padding: 22px; color: #fff; }
.sim-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.sim-row:last-child { border-bottom: 0; }
.sim-row span { color: #94a3b8; }
.sim-row em { color: #bfdbfe; font-style: normal; font-weight: 700; }
.mini-timeline { margin-top: 16px; display: grid; gap: 10px; }
.mini-timeline div { position: relative; padding-left: 24px; color: #64748b; font-weight: 700; }
.mini-timeline div:before { content: ''; position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 999px; background: #cbd5e1; }
.mini-timeline .done:before { background: #16a34a; }
.landing-section { padding: 76px 0; }
.landing-section.soft { background: #eef2ff; }
.section-heading { text-align: center; max-width: 760px; margin: 0 auto 34px; }
.section-heading span { color: #1d4ed8; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; }
.section-heading h2 { margin-top: 8px; font-size: clamp(30px, 4vw, 48px); font-weight: 950; letter-spacing: -.05em; }
.service-card, .process-grid div { height: 100%; background: #fff; border: 1px solid #e2e8f0; border-radius: 24px; padding: 26px; box-shadow: 0 24px 60px rgba(15,23,42,.06); }
.service-icon { width: 44px; height: 44px; border-radius: 16px; background: #dbeafe; color: #1d4ed8; display: flex; align-items: center; justify-content: center; font-weight: 950; margin-bottom: 16px; }
.service-card h5, .process-grid h5 { font-weight: 900; }
.service-card p, .process-grid p { color: #64748b; margin-bottom: 0; }
.process-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
.process-grid b { width: 38px; height: 38px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: #1d4ed8; color: #fff; margin-bottom: 14px; }
.security-banner { background: linear-gradient(135deg,#0f172a,#1d4ed8); color: #fff; border-radius: 32px; padding: 42px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.security-banner p { color: #dbeafe; max-width: 780px; }
.auth-title { font-weight: 950; letter-spacing: -.05em; margin-bottom: 10px; }
.auth-subtitle { color: #64748b; margin-bottom: 24px; }
.auth-kicker { color: #1d4ed8; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; margin-bottom: 8px; }
.choice-grid { display: grid; gap: 14px; }
.choice-card { border: 1px solid #e2e8f0; border-radius: 20px; padding: 20px; color: inherit; text-decoration: none; background: #fff; transition: .2s ease; }
.choice-card:hover { transform: translateY(-2px); box-shadow: 0 20px 50px rgba(15,23,42,.1); }
.choice-card.featured { border-color: #bfdbfe; background: #eff6ff; }
.choice-card span { color: #1d4ed8; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.choice-card strong { display: block; font-size: 18px; margin: 5px 0; }
.choice-card small { color: #64748b; }
.auth-switch { margin-top: 24px; text-align: center; color: #64748b; }
.auth-switch a { font-weight: 800; }
.wizard-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wizard-steps span { border-radius: 999px; padding: 8px 10px; background: #f1f5f9; color: #64748b; font-size: 12px; text-align: center; font-weight: 800; }
.wizard-steps .active { background: #dbeafe; color: #1d4ed8; }
.form-section-title { font-weight: 900; color: #0f172a; margin-bottom: 12px; }
.document-upload-grid { display: grid; gap: 12px; }
.doc-upload-card { border: 1px dashed #cbd5e1; background: #f8fafc; border-radius: 18px; padding: 16px; }
.doc-upload-card label { display: block; font-weight: 800; margin-bottom: 8px; }
.doc-upload-card small { display: block; color: #64748b; margin-top: 6px; }
.countdown-card { border: 1px solid #bfdbfe; background: #eff6ff; border-radius: 20px; padding: 18px; display: flex; align-items: center; justify-content: space-between; }
.countdown-card span { color: #1d4ed8; font-weight: 800; }
.countdown-card strong { font-size: 28px; font-weight: 950; letter-spacing: -.04em; }
.status-pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 7px 12px; font-size: 12px; font-weight: 900; background: #f1f5f9; color: #334155; }
.status-approved { background: #dcfce7; color: #166534; }
.status-under_review, .status-pending_documents { background: #dbeafe; color: #1d4ed8; }
.status-revision_required { background: #fef3c7; color: #92400e; }
.status-rejected, .status-suspended { background: #fee2e2; color: #991b1b; }
.warning-card { background: #fffbeb; border-color: #fde68a; }
.small-metric { font-size: 20px !important; line-height: 1.25; }
.modern-table td small { display:block; color:#64748b; margin-top:2px; }
.sticky-card { position: sticky; top: 24px; }
.file-row-stack { display: block !important; }
.file-row-main { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.preview-note { margin-top: 10px; padding: 10px 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; color: #64748b; font-size: 12px; }
.cad-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(15,23,42,.7); padding: 24px; }
.cad-modal-panel { max-width: 1080px; margin: 2vh auto; background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 100px rgba(0,0,0,.28); }
.cad-modal-head { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid #e2e8f0; }
.cad-modal-head button { border: 0; background: #f1f5f9; width: 36px; height: 36px; border-radius: 12px; font-size: 24px; line-height: 1; }
.cad-preview-canvas { height: 560px; width: 100%; background: #f8fafc; display: flex; align-items: center; justify-content: center; }
.cad-preview-canvas canvas { display: block; width: 100%; height: 100%; }
.cad-help { border-top: 1px solid #e2e8f0; padding: 12px 18px; color: #64748b; font-size: 13px; }
.cad-preview-error { color: #991b1b; background: #fee2e2; border-radius: 14px; padding: 16px; }
@media (max-width: 992px) {
    .process-grid { grid-template-columns: 1fr 1fr; }
    .security-banner { flex-direction: column; align-items: flex-start; }
    .hero-stats { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .process-grid, .wizard-steps { grid-template-columns: 1fr; }
    .hero-section h1 { font-size: 40px; }
    .file-row-main { flex-direction: column; align-items: flex-start; }
    .cad-modal { padding: 10px; }
    .cad-preview-canvas { height: 420px; }
}
.page-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin-bottom:24px; }
.page-head h1 { font-weight:950; letter-spacing:-.05em; margin-bottom:6px; }
.page-head p { color:#64748b; margin-bottom:0; }
.page-kicker { color:#1d4ed8; font-weight:900; letter-spacing:.12em; text-transform:uppercase; font-size:12px; }
@media (max-width: 768px) { .page-head { flex-direction:column; } }

.option-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.check-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    transition: all .18s ease;
}

.check-card:hover {
    border-color: rgba(29, 78, 216, .45);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .08);
}

.check-card input {
    margin-top: 5px;
}

.check-card strong,
.check-card small {
    display: block;
}

.check-card small {
    color: var(--muted);
    margin-top: 3px;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-list span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 8px 12px;
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
    font-weight: 700;
    font-size: 13px;
}

.profile-dl {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px 18px;
    margin: 0;
}

.profile-dl dt {
    color: var(--muted);
    font-weight: 700;
}

.profile-dl dd {
    margin: 0;
}

.json-preview {
    background: #0f172a;
    color: #dbeafe;
    border-radius: 16px;
    padding: 18px;
    min-height: 240px;
    white-space: pre-wrap;
    font-size: 13px;
}

.user-inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
    min-width: 280px;
}

.cad-loading,
.cad-preview-error {
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-weight: 700;
}

@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* V5 corporate horizontal navigation */
.horizontal-shell { background: #eef3f8; }
.corp-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(22px);
    border-bottom: 1px solid rgba(226,232,240,.95);
    box-shadow: 0 12px 36px rgba(15, 23, 42, .05);
}
.corp-header-inner {
    max-width: 1480px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 22px;
}
.corp-brand { display:flex; align-items:center; gap:12px; min-width:220px; color:var(--dark); }
.corp-brand strong { display:block; font-weight:950; letter-spacing:-.04em; }
.corp-brand small { display:block; font-size:12px; color:var(--muted); font-weight:800; margin-top:-2px; }
.corp-nav { display:flex; align-items:center; gap:6px; flex:1; overflow-x:auto; padding-bottom:2px; }
.corp-nav a,
.notification-button {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:10px 13px;
    border-radius:999px;
    color:#334155;
    font-size:13px;
    font-weight:850;
    white-space:nowrap;
    transition:.16s ease;
}
.corp-nav a:hover,
.corp-nav a.active,
.notification-button:hover {
    background:#0f172a;
    color:#fff;
}
.nav-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    padding:0 7px;
    border-radius:999px;
    background:#ef4444;
    color:#fff;
    font-size:11px;
    font-weight:950;
    line-height:1;
}
.corp-actions { display:flex; align-items:center; gap:10px; }
.profile-button {
    display:grid;
    grid-template-columns:34px auto;
    grid-template-rows:auto auto;
    column-gap:9px;
    align-items:center;
    color:var(--dark);
    min-width:150px;
}
.profile-button > span { grid-row:1/3; width:34px; height:34px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#dbeafe; color:#1d4ed8; font-weight:950; }
.profile-button strong { font-size:13px; font-weight:900; line-height:1.1; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-button small { color:var(--muted); font-size:11px; font-weight:800; }
.corp-main { max-width:1480px; margin:0 auto; padding:28px 24px 40px; }
.corp-footer { max-width:1480px; margin:0 auto 24px; padding:0 24px; color:var(--muted); font-size:12px; font-weight:750; }
.check-card { position:relative; }
.check-card input { position:absolute; opacity:0; pointer-events:none; }
.check-card span { width:100%; }
.check-card:has(input:checked) {
    border-color:#16a34a;
    background:linear-gradient(180deg, #ecfdf5, #ffffff);
    box-shadow:0 14px 34px rgba(22, 163, 74, .14);
}
.check-card:has(input:checked)::after {
    content:"Seçildi";
    position:absolute;
    right:12px;
    top:12px;
    background:#16a34a;
    color:#fff;
    border-radius:999px;
    padding:4px 9px;
    font-size:11px;
    font-weight:950;
}
.settings-toggle-list { display:grid; gap:10px; }
.setting-toggle { display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid var(--border); border-radius:16px; padding:13px 14px; cursor:pointer; background:#fff; }
.setting-toggle span { font-weight:850; color:#334155; }
.setting-toggle input { width:18px; height:18px; accent-color:#16a34a; order:2; }
.notification-list { display:grid; gap:12px; }
.notification-item { display:flex; gap:12px; padding:16px; border:1px solid var(--border); border-radius:18px; background:#fff; }
.notification-item.is-unread { border-color:#93c5fd; background:#eff6ff; }
.notification-dot { width:10px; height:10px; border-radius:999px; background:#94a3b8; margin-top:7px; flex:0 0 auto; }
.notification-item.is-unread .notification-dot { background:#1d4ed8; }
.notification-main { flex:1; min-width:0; }
.notification-main p { margin:5px 0 10px; color:var(--muted); }
.friendly-change-table td, .friendly-change-table th { vertical-align:top; }
.change-value-old { background:#fff7ed; border:1px solid #fed7aa; border-radius:12px; padding:9px; }
.change-value-new { background:#ecfdf5; border:1px solid #bbf7d0; border-radius:12px; padding:9px; }
@media (max-width: 1100px) {
    .corp-header-inner { flex-wrap:wrap; }
    .corp-brand { min-width:auto; }
    .corp-nav { order:3; width:100%; }
    .corp-actions { margin-left:auto; }
}
@media (max-width: 640px) {
    .corp-actions { width:100%; justify-content:space-between; }
    .profile-button { min-width:auto; }
    .profile-button strong, .profile-button small { display:none; }
    .corp-main { padding:20px 14px 32px; }
}
.check-card.is-selected {
    border-color:#16a34a;
    background:linear-gradient(180deg, #ecfdf5, #ffffff);
    box-shadow:0 14px 34px rgba(22, 163, 74, .14);
}
.check-card.is-selected::after {
    content:"Seçildi";
    position:absolute;
    right:12px;
    top:12px;
    background:#16a34a;
    color:#fff;
    border-radius:999px;
    padding:4px 9px;
    font-size:11px;
    font-weight:950;
}

/* V6 premium responsive navigation and UX refinements */
.premium-shell { background: #f5f7fb; color: #172033; }
.premium-header { background: rgba(255,255,255,.92); border-bottom: 1px solid #e6eaf2; backdrop-filter: blur(18px); box-shadow: 0 16px 40px rgba(15,23,42,.06); }
.premium-navbar { min-height: 84px; padding: 0; }
.premium-navbar-container { max-width: 1600px; padding: 0 28px; }
.premium-brand { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: #111827; min-width: 255px; }
.premium-brand img { width: 46px; height: 46px; object-fit: contain; border-radius: 14px; background: #fff; border: 1px solid #e5e7eb; }
.premium-logo-mark { width: 46px; height: 46px; border-radius: 16px; display: inline-grid; place-items: center; color: #fff; font-weight: 950; background: linear-gradient(135deg,#0f172a,#2563eb); box-shadow: 0 14px 30px rgba(37,99,235,.28); }
.premium-brand strong { display: block; font-weight: 900; letter-spacing: -.04em; line-height: 1; font-size: 17px; }
.premium-brand small { display: block; color: #64748b; font-weight: 800; font-size: 12px; margin-top: 3px; }
.premium-nav { gap: 5px; align-items: center; }
.premium-nav .nav-link { color: #334155; font-weight: 850; font-size: 14px; padding: 12px 16px !important; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; }
.premium-nav .nav-link:hover { color: #0f172a; background: #f1f5f9; }
.premium-nav .nav-link.active { background: #0f172a; color: #fff; box-shadow: 0 14px 28px rgba(15,23,42,.18); }
.premium-dropdown { border: 1px solid #e2e8f0; border-radius: 18px; padding: 10px; box-shadow: 0 22px 60px rgba(15,23,42,.16); min-width: 260px; }
.premium-dropdown .dropdown-item { border-radius: 12px; padding: 11px 13px; font-weight: 750; color: #334155; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.premium-dropdown .dropdown-item:hover { background: #eff6ff; color: #1d4ed8; }
.premium-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 950; box-shadow: 0 10px 24px rgba(239,68,68,.22); }
.premium-actions { display: flex; align-items: center; gap: 12px; }
.wallet-chip { display: inline-flex; align-items: center; gap: 9px; background: #ecfdf5; color: #065f46; border: 1px solid #bbf7d0; border-radius: 999px; padding: 8px 12px; font-weight: 900; white-space: nowrap; }
.wallet-chip span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #047857; }
.profile-chip { border: 1px solid #e2e8f0; background: #fff; border-radius: 18px; min-height: 52px; display: grid; grid-template-columns: 36px auto; grid-template-rows: 18px 16px; align-items: center; column-gap: 10px; padding: 8px 12px; color: #0f172a; box-shadow: 0 10px 24px rgba(15,23,42,.05); text-align: left; }
.profile-chip span { grid-row: 1/3; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #1d4ed8; background: #dbeafe; font-weight: 950; }
.profile-chip b { font-size: 13px; line-height: 1; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-chip small { color: #64748b; font-size: 11px; font-weight: 800; }
.premium-toggler { width: 46px; height: 42px; border: 1px solid #e2e8f0; border-radius: 14px; display: inline-flex; flex-direction: column; gap: 5px; justify-content: center; align-items: center; }
.premium-toggler span { width: 20px; height: 2px; background: #0f172a; border-radius: 2px; }
.premium-main { max-width: 1600px; margin: 0 auto; padding: 30px 28px 18px; }
.premium-content { max-width: 100%; }
.premium-footer { max-width: 1600px; margin: 0 auto; padding: 8px 28px 28px; color: #94a3b8; font-size: 12px; }
.premium-page-head, .page-heading { background: linear-gradient(135deg,#ffffff,#f8fafc); border: 1px solid #e2e8f0; border-radius: 26px; padding: 26px; margin-bottom: 24px; box-shadow: 0 16px 44px rgba(15,23,42,.06); }
.premium-table thead th { color: #64748b; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.status-pill { display: inline-flex; align-items: center; padding: 6px 10px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-weight: 850; font-size: 12px; }
.status-pill.soft { background: #f1f5f9; color: #334155; }
.order-flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.order-flow > div { border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 20px; padding: 16px; }
.order-flow span { display: block; color: #64748b; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.order-flow strong { display: block; margin-top: 6px; font-weight: 950; color: #0f172a; }
.option-grid-card input:checked + .option-card, .select-card input:checked + span, .select-card input:checked + div { background: #dcfce7 !important; border-color: #22c55e !important; color: #14532d !important; box-shadow: 0 14px 30px rgba(34,197,94,.15); }
.verification-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 18px; }
.verification-step { border: 1px solid #e2e8f0; border-radius: 18px; padding: 14px; background: #fff; font-weight: 850; color: #64748b; }
.verification-step.active { background: #0f172a; color: #fff; border-color: #0f172a; }
.verification-step.done { background: #dcfce7; color: #14532d; border-color: #22c55e; }
@media (max-width: 1199px) {
  .premium-navbar-container { padding: 16px; }
  .premium-brand { min-width: auto; }
  .premium-nav { align-items: stretch; gap: 8px; }
  .premium-nav .nav-link { display: flex; justify-content: space-between; border-radius: 14px; background: #f8fafc; }
  .premium-actions { align-items: stretch; flex-direction: column; }
  .wallet-chip, .profile-chip { width: 100%; justify-content: center; }
}
@media (max-width: 768px) {
  .premium-main { padding: 18px 14px; }
  .premium-footer { padding: 0 14px 20px; }
  .premium-page-head, .page-heading { padding: 20px; border-radius: 20px; }
  .order-flow, .verification-steps { grid-template-columns: 1fr; }
  .premium-brand span:not(.premium-logo-mark) small { display:none; }
  .premium-brand strong { font-size: 15px; }
}

/* ===================== V7 UI/UX enhancements ===================== */
.v7-heading h1 { letter-spacing: -.045em; }
.quote-command-panel {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border-radius: 30px;
    background: radial-gradient(circle at top left, rgba(37,99,235,.16), transparent 36%), linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid rgba(148,163,184,.35);
    box-shadow: 0 22px 55px rgba(15,23,42,.07);
}
.quote-command-panel h2 { margin: 12px 0 6px; font-size: 30px; font-weight: 900; letter-spacing: -.05em; color: #0f172a; }
.quote-command-panel p { max-width: 760px; color: #64748b; margin: 0; }
.quote-metrics { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 10px; min-width: 380px; }
.quote-metrics div { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 16px; }
.quote-metrics span { display: block; color: #64748b; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.quote-metrics strong { display: block; margin-top: 4px; color: #0f172a; font-weight: 900; }
.v7-offer-row { border: 1px solid #e2e8f0; border-radius: 22px; padding: 18px; margin-bottom: 12px; background: #fff; }
.v7-offer-row.alt-offer { background: linear-gradient(135deg, #f8fafc, #ecfeff); }
.offer-pill { display: inline-flex; margin-bottom: 8px; padding: 5px 10px; border-radius: 999px; background: #dbeafe; color: #1d4ed8; font-size: 12px; font-weight: 800; }
.offer-pill.alt { background: #dcfce7; color: #15803d; }
.chat-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.chat-toolbar .form-control { max-width: 360px; }
.chat-status-dot { width: 10px; height: 10px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 6px rgba(34,197,94,.12); }
.quote-chat { min-height: 360px; max-height: 520px; overflow-y: auto; padding: 18px; border-radius: 26px; background: linear-gradient(180deg, #f8fafc, #eef2ff); border: 1px solid #e2e8f0; }
.chat-empty { color: #64748b; text-align: center; padding: 80px 20px; }
.chat-message { display: flex; margin-bottom: 14px; }
.chat-message.mine { justify-content: flex-end; }
.chat-bubble { width: min(72%, 620px); padding: 14px 16px; border-radius: 20px; background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 10px 28px rgba(15,23,42,.06); }
.chat-message.mine .chat-bubble { background: #0f172a; color: #fff; border-color: #0f172a; }
.chat-message.type-system .chat-bubble,
.chat-message.type-revision .chat-bubble,
.chat-message.type-file .chat-bubble,
.chat-message.type-offer .chat-bubble { background: #fffbeb; color: #713f12; border-color: #fde68a; }
.chat-meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 12px; }
.chat-meta strong { font-weight: 900; }
.chat-meta span { opacity: .7; }
.chat-bubble p { margin: 0; line-height: 1.55; }
.chat-compose { display: grid; grid-template-columns: 1fr auto; gap: 12px; margin-top: 14px; }
.chat-compose textarea { border-radius: 20px; }
.revision-box, .version-upload { display: grid; gap: 10px; }
.revision-item { border: 1px solid #e2e8f0; border-radius: 18px; padding: 14px; background: #fff; margin-bottom: 10px; }
.revision-item p { color: #64748b; margin: 6px 0; }
.revision-item small { color: #94a3b8; }
.nda-card { border-color: #bbf7d0; background: linear-gradient(135deg, #f0fdf4, #fff); }
.v7-file-row { background: #fff; border-radius: 20px; }
.quality-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #e2e8f0; }
.quality-row:last-child { border-bottom: 0; }
.quality-row strong { display: block; font-weight: 900; color: #0f172a; }
.quality-row small { display: block; color: #64748b; }
.quality-row span { width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: #dcfce7; color: #15803d; font-weight: 900; }
.production-step-grid { display: grid; gap: 12px; }
.production-step { display: flex; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 18px; background: #fff; }
.production-step strong { display: block; color: #0f172a; }
.production-step small { color: #64748b; }
.production-step .step-status { padding: 6px 10px; border-radius: 999px; background: #e2e8f0; font-size: 12px; font-weight: 800; }
.production-step.status-completed .step-status { background: #dcfce7; color: #15803d; }
.production-step.status-active .step-status { background: #dbeafe; color: #1d4ed8; }
.production-step.status-blocked .step-status { background: #fee2e2; color: #b91c1c; }
@media (max-width: 991px) {
    .quote-command-panel { flex-direction: column; }
    .quote-metrics { min-width: 0; grid-template-columns: 1fr; }
    .chat-compose { grid-template-columns: 1fr; }
    .chat-bubble { width: 92%; }
}

/* ===================== V8 compact professional UI ===================== */
.premium-header { border-bottom: 1px solid rgba(226,232,240,.95); box-shadow: 0 10px 34px rgba(15,23,42,.05); }
.premium-navbar { min-height: 72px; }
.premium-navbar-container { padding: 10px 22px; }
.premium-brand { min-width: 230px; }
.premium-logo-mark, .premium-brand img { width: 40px; height: 40px; border-radius: 14px; }
.premium-nav { gap: 4px; }
.premium-nav .nav-link { font-size: 13px; padding: 10px 13px !important; border-radius: 14px; }
.premium-actions { gap: 8px; }
.profile-chip { min-height: 46px; border-radius: 15px; }
.wallet-chip { padding: 7px 10px; }
.premium-main { padding: 18px 20px 10px; }
.content-area { padding: 0; }
.page-head, .page-heading, .premium-page-head, .compact-head { padding: 18px 20px; margin-bottom: 14px; border-radius: 20px; align-items: center; }
.page-head h1, .page-heading h1 { font-size: clamp(22px, 2vw, 30px); }
.page-head p, .page-heading p { font-size: 14px; }
.content-card, .panel-card { padding: 16px; border-radius: 18px; }
.compact-card { padding: 16px !important; border-radius: 18px !important; }
.metric-card { padding: 16px; border-radius: 18px; }
.metric-value { font-size: 28px; }
.table td, .table th { padding: 10px 12px; }
.table-card, .compact-table-card { border-radius: 18px; }
.section-title { margin-bottom: 12px; }
.section-title h5 { font-size: 16px; }
.section-title p { font-size: 12px; }
.form-control, .form-select { padding: .62rem .78rem; border-radius: 12px; }
.btn { padding: .56rem .86rem; border-radius: 12px; }
.btn-sm { padding: .38rem .62rem; border-radius: 10px; }
.detail-grid { gap: 9px; }
.detail-grid div, .info-tile { padding: 11px 12px; border-radius: 14px; }
.detail-grid strong, .info-tile strong { font-size: 14px; }
.compact-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v8-screen-grid { display: grid; grid-template-columns: minmax(360px, 1.15fr) minmax(300px, .85fr); gap: 14px; }
.v8-dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.compact-layout { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 14px; align-items: start; }
.v8-dense-form .form-label { margin-top: 6px; margin-bottom: 4px; font-size: 12px; }
.v8-offer-card { border: 1px solid #e2e8f0; border-radius: 18px; padding: 14px; background: #fff; margin-bottom: 10px; box-shadow: 0 10px 28px rgba(15,23,42,.045); }
.v8-offer-card.muted-offer { background: #f8fafc; }
.v8-offer-main { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.v8-offer-main strong { display:block; font-size: 15px; }
.v8-offer-main small { display:block; color:#64748b; margin-top:3px; }
.v8-suboffers { margin-top: 12px; border-top: 1px dashed #cbd5e1; padding-top: 10px; display: grid; gap: 8px; }
.suboffer-title { font-size: 12px; font-weight: 900; color:#64748b; text-transform: uppercase; letter-spacing:.05em; }
.v8-suboffer-row { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 10px; border:1px solid #dbeafe; background:#f8fbff; border-radius:14px; }
.v8-suboffer-row strong { font-size: 13px; display:block; }
.v8-suboffer-row small { display:block; color:#64748b; font-size:12px; }
.v8-suboffer-row b { white-space:nowrap; }
.support-chat-window { min-height: 340px; max-height: 560px; overflow-y: auto; border:1px solid #e2e8f0; background: linear-gradient(180deg,#f8fafc,#eef2ff); border-radius: 20px; padding: 14px; }
.support-message { display:flex; margin-bottom: 12px; }
.support-message.mine { justify-content: flex-end; }
.support-bubble { width:min(78%,680px); background:#fff; border:1px solid #e2e8f0; border-radius: 18px; padding:12px 14px; box-shadow:0 10px 24px rgba(15,23,42,.05); }
.support-message.mine .support-bubble { background:#0f172a; color:#fff; border-color:#0f172a; }
.support-bubble p { margin:0; line-height:1.55; }
.v8-message-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:14px; }
.message-audit-row { display:block; color:inherit; border:1px solid #e2e8f0; border-radius:14px; padding:10px 12px; margin-bottom:8px; background:#fff; }
.message-audit-row:hover { background:#f8fbff; border-color:#bfdbfe; }
.message-audit-row strong, .message-audit-row span, .message-audit-row small { display:block; }
.message-audit-row span { color:#475569; font-size:13px; margin-top:3px; }
.message-audit-row small { color:#94a3b8; font-size:12px; margin-top:2px; }
.status-pill { text-transform:none; letter-spacing:0; }
.status-waiting_support, .status-waiting_user, .status-open { background:#dbeafe; color:#1d4ed8; }
.status-answered { background:#ecfdf5; color:#047857; }
.status-closed { background:#f1f5f9; color:#334155; }
.status-urgent, .status-high { background:#fee2e2; color:#991b1b; }
.status-normal { background:#eef2ff; color:#3730a3; }
.status-low { background:#f1f5f9; color:#475569; }
.status-pending, .status-waiting_payment { background:#fff7ed; color:#c2410c; }
.status-paid, .status-active, .status-completed, .status-delivered, .status-ready, .status-done { background:#dcfce7; color:#166534; }
.status-processing, .status-preparing, .status-shipped, .status-viewed, .status-quoted { background:#dbeafe; color:#1d4ed8; }
.status-failed, .status-blocked, .status-rejected, .status-cancelled { background:#fee2e2; color:#991b1b; }
@media (max-width: 1199px) {
  .compact-layout, .v8-screen-grid, .v8-dashboard-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .premium-navbar-container { padding: 10px 12px; }
  .premium-main { padding: 12px; }
  .v8-offer-main, .v8-suboffer-row { flex-direction: column; align-items: flex-start; }
  .support-bubble { width: 94%; }
  .v8-message-grid, .compact-detail-grid { grid-template-columns: 1fr; }
}

.support-admin-layout { grid-template-columns: 1fr !important; }

/* V8.2 compact professional list/filter screens */
.pro-filter-bar {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 14px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.045);
}
.pro-filter-bar .form-label {
    font-size: 12px;
    font-weight: 800;
    color: #64748b;
    margin-bottom: 5px;
}
.pro-filter-bar .form-control,
.pro-filter-bar .form-select {
    min-height: 40px;
    border-radius: 12px;
    font-size: 14px;
}
.one-screen-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    box-shadow: 0 16px 44px rgba(15, 23, 42, 0.06);
    overflow: hidden;
}
.compact-scroll-table {
    max-height: calc(100vh - 285px);
    overflow: auto;
}
.dense-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
    padding: 10px 12px;
    white-space: nowrap;
}
.dense-table tbody td {
    padding: 10px 12px;
    vertical-align: middle;
    font-size: 13px;
}
.dense-table tbody tr:hover {
    background: #f8fafc;
}
.compact-head {
    margin-bottom: 14px;
}
.compact-head h1 {
    font-size: clamp(22px, 2.4vw, 30px);
    margin-bottom: 4px;
}
.compact-head p {
    margin-bottom: 0;
    color: #64748b;
}
.compact-empty {
    padding: 28px !important;
}
.soft-pill.good {
    background: #dcfce7;
    color: #166534;
}
.soft-pill.danger {
    background: #fee2e2;
    color: #991b1b;
}
@media (max-width: 991px) {
    .compact-scroll-table { max-height: none; }
    .one-screen-panel { border-radius: 16px; }
    .dense-table thead th { position: static; }
}

/* V8.3 Compact Workspace Preview */
.btn-xs {
    padding: .28rem .5rem;
    border-radius: 9px;
    font-size: .72rem;
    font-weight: 850;
    line-height: 1.2;
}

.compact-workspace {
    --compact-gap: 10px;
    --compact-radius: 14px;
    --compact-pad: 12px;
}

.compact-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fff, #f8fbff);
    border: 1px solid #e3eaf4;
    border-radius: 18px;
    box-shadow: 0 10px 24px rgba(15,23,42,.045);
}

.compact-title-block h1 {
    font-size: clamp(20px, 2vw, 28px);
    margin: 2px 0 6px;
    letter-spacing: -.04em;
    line-height: 1.05;
}

.compact-meta-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.compact-meta-line > span:not(.status-badge) {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: .76rem;
    font-weight: 800;
}

.compact-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.compact-alert { margin-bottom: 10px; padding: 10px 12px; border-radius: 14px; }

.compact-kpi-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.compact-kpi-strip > div {
    min-width: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 10px 11px;
    box-shadow: 0 6px 18px rgba(15,23,42,.035);
}

.compact-kpi-strip span,
.compact-section-head p,
.mini-file-row small,
.mini-offer-info small,
.compact-row-item small,
.compact-timeline-item small,
.mini-suboffer-row small {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 750;
}

.compact-kpi-strip strong {
    display: block;
    color: #0f172a;
    font-size: .86rem;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.compact-shell-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 10px;
    align-items: start;
}

.compact-main-panel { min-width: 0; }
.compact-side-panel { min-width: 0; position: sticky; top: 88px; }

.content-card.compact-card,
.compact-panel,
.compact-sticky-card {
    padding: 12px;
    border-radius: 16px;
    border-color: #e0e7f0;
    box-shadow: 0 8px 22px rgba(15,23,42,.04);
}

.compact-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.compact-section-head h5,
.compact-sticky-card h5 {
    margin: 0;
    font-size: .98rem;
    font-weight: 950;
    letter-spacing: -.03em;
}

.compact-section-head p { margin: 2px 0 0; }
.compact-count {
    min-width: 28px;
    padding: 4px 9px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    text-align: center;
    font-weight: 950;
    font-size: .75rem;
}

.compact-scroll-area.offer-scroll { max-height: 270px; overflow: auto; padding-right: 2px; }
.compact-side-scroll { max-height: 220px; overflow: auto; padding-right: 2px; }
.compact-side-scroll.small-scroll { max-height: 145px; }
.compact-list-scroll { max-height: 220px; overflow: auto; padding-right: 2px; }
.compact-timeline-scroll { max-height: 260px; overflow: auto; padding-right: 2px; }

.mini-offer-card {
    border: 1px solid #dce7f5;
    background: linear-gradient(180deg, #fff, #fbfdff);
    border-radius: 14px;
    padding: 9px;
    margin-bottom: 8px;
}

.mini-offer-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.mini-offer-info { min-width: 0; }
.mini-offer-info strong {
    display: block;
    font-size: .95rem;
    font-weight: 950;
    margin: 2px 0;
}
.mini-offer-info small { margin-top: 2px; }
.mini-offer-price { min-width: 122px; text-align: right; }
.mini-offer-price > strong {
    display: block;
    font-size: .98rem;
    font-weight: 950;
    color: #0f172a;
    margin-bottom: 5px;
}

.mini-collapse-btn {
    border: 0;
    background: transparent;
    color: #2563eb;
    font-size: .74rem;
    font-weight: 900;
    padding: 5px 0;
}

.mini-suboffers {
    border-top: 1px dashed #d8e3f0;
    margin-top: 8px;
    padding-top: 6px;
}

.mini-suboffer-row,
.mini-file-row,
.compact-row-item,
.compact-timeline-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 8px;
    border: 1px solid #e6eef8;
    background: #f8fbff;
    border-radius: 12px;
    margin-top: 6px;
}

.mini-suboffer-row > span,
.mini-file-row > div:first-child,
.compact-row-item > div { min-width: 0; }
.mini-suboffer-row b,
.mini-suboffer-row strong { white-space: nowrap; font-size: .84rem; }

.compact-tabs {
    gap: 6px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 8px;
    margin-bottom: 8px;
}

.compact-tabs .nav-link {
    border-radius: 999px;
    padding: .42rem .8rem;
    font-size: .78rem;
    font-weight: 900;
    color: #475569;
}
.compact-tabs .nav-link.active {
    background: #0f172a;
    color: #fff;
}

.compact-tab-content { min-height: 275px; }
.compact-chat-wrap { min-height: 0; }
.compact-chat-toolbar { padding: 0; margin-bottom: 7px; }
.compact-quote-chat,
.support-chat-window.compact-chat-window {
    min-height: 190px;
    height: 225px;
    max-height: 225px;
    overflow: auto;
    border-radius: 14px;
}
.compact-compose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    margin-top: 8px;
    align-items: stretch;
}
.compact-compose textarea { min-height: 54px; }
.compact-compose button { min-width: 76px; }

.compact-inline-form {
    display: grid;
    grid-template-columns: minmax(160px, 220px) minmax(0, 1fr) auto;
    gap: 8px;
}
.compact-row-item { display: block; }
.compact-row-item p { margin: 4px 0 0; color: #475569; font-size: .82rem; }
.compact-timeline-item { display: grid; grid-template-columns: 160px minmax(0, 1fr) 145px; align-items: center; }
.compact-timeline-item strong { font-size: .83rem; }
.compact-timeline-item span { color: #475569; font-size: .82rem; }
.compact-description {
    min-height: 220px;
    max-height: 260px;
    overflow: auto;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #f8fafc;
    color: #475569;
    font-weight: 650;
}

.mini-file-row { align-items: center; }
.mini-file-row strong {
    display: block;
    font-size: .82rem;
    font-weight: 900;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 205px;
}
.mini-file-actions { display: flex; gap: 4px; flex-wrap: nowrap; }
.compact-upload { display: grid; gap: 6px; }
.compact-dense-form { display: grid; gap: 7px; }
.compact-dense-form textarea { resize: vertical; min-height: 48px; }
.compact-quality { padding: 7px 0; border-bottom: 1px solid #e2e8f0; }
.compact-quality:last-child { border-bottom: 0; }

/* V8.3 compact orders/support/admin detail */
.compact-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 10px;
    align-items: start;
}
.compact-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.mini-status-tile {
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
}
.mini-status-tile span { display:block; color:#64748b; font-size:.72rem; font-weight:850; }
.mini-status-tile strong { display:block; margin-top:2px; font-size:.9rem; font-weight:950; }
.compact-split-tabs .tab-content { min-height: 330px; }
.compact-production-grid {
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap:8px;
    max-height: 320px;
    overflow:auto;
}
.compact-action-stack { display:grid; gap:10px; }
.compact-action-stack .content-card { margin:0 !important; }
.compact-support-grid {
    display:grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap:10px;
    align-items:start;
}
.compact-admin-user-grid {
    display:grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap:10px;
    align-items:start;
}
.compact-admin-mini-tables {
    display:grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap:10px;
}
.compact-admin-mini-tables .table-responsive { max-height: 230px; overflow:auto; }
.compact-message-audit { max-height: 250px; overflow:auto; }

@media (max-width: 1400px) {
    .compact-kpi-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .compact-shell-grid { grid-template-columns: minmax(0, 1fr) 330px; }
}

@media (max-width: 1199px) {
    .compact-shell-grid,
    .compact-detail-layout,
    .compact-support-grid,
    .compact-admin-user-grid { grid-template-columns: 1fr; }
    .compact-side-panel { position: static; }
    .compact-side-scroll { max-height: none; }
    .compact-topbar { align-items:flex-start; flex-direction:column; }
}

@media (max-width: 768px) {
    .compact-kpi-strip,
    .compact-card-grid,
    .compact-production-grid,
    .compact-admin-mini-tables { grid-template-columns: 1fr; }
    .compact-inline-form { grid-template-columns: 1fr; }
    .compact-timeline-item { grid-template-columns: 1fr; }
    .compact-compose { grid-template-columns: 1fr; }
    .mini-offer-main { flex-direction:column; }
    .mini-offer-price { text-align:left; }
}