:root {
  color-scheme: light;
  --bg: #f3f9ff;
  --panel: rgba(255,255,255,.76);
  --panel-soft: rgba(234,246,255,.72);
  --text: #08214a;
  --muted: #5a6f91;
  --line: rgba(166,211,255,.68);
  --blue: #0867ff;
  --blue-2: #10a8ff;
  --blue-3: #003a94;
  --glass: rgba(255,255,255,.56);
  --glass-strong: rgba(255,255,255,.82);
  --shadow: 0 30px 90px rgba(8, 103, 255, 0.18);
  --shadow-soft: 0 18px 54px rgba(15, 80, 180, 0.12);
  --glow: 0 0 0 1px rgba(255,255,255,.72), 0 22px 70px rgba(8,103,255,.16);
  --radius: 24px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #061427;
  --panel: rgba(11, 31, 61, .74);
  --panel-soft: rgba(14, 42, 82, .68);
  --text: #edf6ff;
  --muted: #a9bfdd;
  --line: #1c4272;
  --blue: #4f9bff;
  --blue-2: #00c8ff;
  --blue-3: #8fc6ff;
  --shadow: 0 18px 50px rgba(0, 16, 41, 0.42);
  --shadow-soft: 0 8px 26px rgba(0, 8, 22, 0.3);
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: linear-gradient(120deg, #f8fcff 0%, #eaf6ff 44%, #f7fbff 100%); color: var(--text); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(8,103,255,.12), transparent 22%, rgba(16,168,255,.14) 46%, transparent 68%, rgba(8,103,255,.08)), linear-gradient(180deg, rgba(255,255,255,.56), transparent); z-index: -1; }
button, input, select, textarea { font: inherit; }
.app { display: grid; grid-template-columns: 280px 1fr; min-height: 100vh; gap: 0; }
.sidebar { position: sticky; top: 0; height: calc(100vh - 28px); margin: 14px 0 14px 14px; padding: 22px; display:flex; flex-direction:column; min-height:0; overflow:hidden; font-weight:600; background: linear-gradient(160deg, rgba(255,255,255,.72), rgba(235,247,255,.42)); backdrop-filter: blur(34px) saturate(1.55); border: 1px solid rgba(190, 224, 255, .82); border-radius: 32px; box-shadow: var(--glow); }
[data-theme="dark"] .sidebar { background: linear-gradient(180deg, #092044, #061427); }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 16px; background: linear-gradient(135deg, var(--blue), var(--blue-2)); color: #fff; font-weight: 900; box-shadow: 0 18px 42px rgba(8,103,255,.28), inset 0 1px 0 rgba(255,255,255,.45); }
.brand h1 { font-size: 1.1rem; margin: 0; letter-spacing: 0; }
.brand p { margin: 2px 0 0; color: var(--muted); font-size: .82rem; }
.nav { display: grid; gap: 7px; overflow-y:auto; overflow-x:hidden; min-height:0; padding:2px 2px 14px; scrollbar-width:thin; scrollbar-color:rgba(8,103,255,.38) transparent; }
.nav::-webkit-scrollbar { width:8px; }
.nav::-webkit-scrollbar-thumb { background:rgba(8,103,255,.32); border-radius:999px; }
.nav button { display: flex; align-items: center; gap: 11px; width: 100%; border: 0; border-radius: 16px; padding: 12px 13px; color: var(--muted); background: transparent; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.nav button:hover, .nav button.active { color: var(--blue-3); background: linear-gradient(135deg, rgba(255,255,255,.82), rgba(8,103,255,.12)); transform: translateX(3px) scale(1.01); box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 12px 30px rgba(8,103,255,.12); }
[data-theme="dark"] .nav button:hover, [data-theme="dark"] .nav button.active { color: #fff; background: rgba(79, 155, 255, .16); }
.icon { width: 20px; height: 20px; flex: 0 0 20px; }
.nav .icon { width:20px; height:20px; flex-basis:20px; padding:0; color:var(--blue); background:transparent; box-shadow:none; }
.nav button.active .icon, .nav button:hover .icon { color:var(--blue-3); background:transparent; }
.main { min-width: 0; padding: 24px; background: radial-gradient(circle at 80% 0%, rgba(21, 167, 255, .22), transparent 32%), radial-gradient(circle at 12% 75%, rgba(8, 103, 255, .10), transparent 28%), linear-gradient(180deg, rgba(255,255,255,.25), transparent); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.btn.mobile-menu { display: none; }
.search-wrap { position: relative; flex: 1; max-width: 650px; }
.search-box { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(183,218,255,.88); background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(239,248,255,.5)); backdrop-filter: blur(26px) saturate(1.4); border-radius: 999px; padding: 12px 18px; box-shadow: var(--glow); }
.search-box input { border: 0; outline: 0; width: 100%; color: var(--text); background: transparent; }
.search-results { position: absolute; z-index: 20; top: 52px; left: 0; right: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.search-result { padding: 13px 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.search-result:last-child { border-bottom: 0; }
.search-result:hover { background: var(--panel-soft); }
.page { animation: fadeUp .32s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.eyebrow { color: var(--blue); font-weight: 800; text-transform: uppercase; font-size: .72rem; letter-spacing: .08em; margin: 0 0 5px; }
h2 { margin: 0; font-size: clamp(1.65rem, 3vw, 2.4rem); }
.page-head p, .subtle { color: var(--muted); margin: 6px 0 0; }
.grid { display: grid; gap: 16px; }
.grid.kpi { grid-template-columns: repeat(5, minmax(150px, 1fr)); }
.grid.two { grid-template-columns: 1.35fr .85fr; }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uw-card { background: linear-gradient(145deg, var(--glass-strong), var(--glass)); backdrop-filter: blur(28px) saturate(1.45); border: 1px solid rgba(190, 224, 255, .82); border-radius: var(--radius); padding: 18px; box-shadow: var(--glow); }
[data-theme="dark"] .uw-card { background: rgba(11, 31, 61, .82); }
.gradient-card { position: relative; overflow: hidden; color: #fff; background: linear-gradient(135deg, #053ea3, #087bff 52%, #18c7ff); border: 0; }
.gradient-card::after { content: ""; position: absolute; inset: auto -40px -70px auto; width: 150px; height: 150px; border-radius: 50%; border: 28px solid rgba(255,255,255,.18); }
.kpi-label { font-size: .82rem; opacity: .85; }
.kpi-value { font-size: 2rem; font-weight: 900; margin-top: 7px; }
.btn { border: 0; border-radius: 14px; padding: 10px 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: .2s ease; white-space: nowrap; }
.btn .icon { width:18px; height:18px; flex-basis:18px; display:block; }
.btn.primary { color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: 0 10px 25px rgba(8, 103, 255, .24); }
.btn.secondary { color: var(--blue-3); background: var(--panel-soft); border: 1px solid var(--line); }
.btn.ghost { color: var(--muted); background: transparent; }
.btn.danger { color: #fff; background: linear-gradient(135deg, #0f5ccf, #052d72); }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none; filter:saturate(.7); }
.btn:hover { transform: translateY(-1px); }
.login-shell { min-height:100vh; display:grid; place-items:center; padding:24px; background:radial-gradient(circle at 70% 15%, rgba(16,168,255,.24), transparent 30%), linear-gradient(120deg,#f8fcff,#eaf6ff); }
.login-card { width:min(460px,100%); display:grid; gap:14px; padding:28px; border-radius:30px; background:linear-gradient(145deg, var(--glass-strong), var(--glass)); border:1px solid rgba(190,224,255,.86); box-shadow:var(--glow); backdrop-filter:blur(30px) saturate(1.45); }
.login-brand { margin-bottom:4px; }
.remember-row { display:flex; align-items:center; gap:9px; color:var(--muted); font-weight:800; }
.permission-grid { display:grid; gap:8px; padding:10px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.54); }
.permission-row { display:grid; grid-template-columns:minmax(150px,1fr) repeat(5,minmax(80px,.55fr)); gap:8px; align-items:center; padding:8px; border-radius:14px; background:rgba(255,255,255,.58); }
.permission-check { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.82rem; font-weight:800; }
.hero-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px; margin-bottom: 16px; border-radius: 30px; color: #fff; background: linear-gradient(125deg, #043b9e, #087bff 48%, #15c5ff); box-shadow: 0 28px 80px rgba(8, 103, 255, .25), inset 0 1px 0 rgba(255,255,255,.28); overflow: hidden; position: relative; }
.hero-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.22), transparent 24%, rgba(255,255,255,.12) 54%, transparent 72%); pointer-events: none; }
.hero-panel h2 { color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); }
.hero-panel p { color: rgba(255,255,255,.86); }
.hero-metrics { display: grid; grid-template-columns: repeat(3, minmax(120px, 1fr)); gap: 10px; z-index: 1; }
.stat-pill { padding: 14px; border-radius: 18px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.24); backdrop-filter: blur(12px); }
.stat-pill span { display: block; font-size: .78rem; opacity: .84; }
.stat-pill strong { display: block; margin-top: 4px; font-size: 1.1rem; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.toolbar input, .toolbar select, .form-field input, .form-field select, .form-field textarea { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 13px; padding: 11px 12px; outline: 0; width: 100%; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; }
table { width: 100%; border-collapse: collapse; min-width: 780px; }
th, td { padding: 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; cursor: pointer; background: var(--panel-soft); }
td strong { display: block; }
.chip { display: inline-flex; border-radius: 999px; padding: 5px 10px; font-size: .78rem; font-weight: 800; color: var(--blue-3); background: rgba(8, 103, 255, .12); }
.status-Won { color: #005bbb; background: #dbeeff; }
.status-Lost { color: #083a73; background: #c8ddf8; }
.status-Pending, .priority-High, .priority-Critical { color: #fff; background: linear-gradient(135deg, #0648bd, #0aa7ff); }
.chart { display: flex; align-items: end; gap: 12px; height: 210px; padding-top: 16px; }
.bar { flex: 1; min-width: 32px; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, var(--blue-2), var(--blue)); display: flex; align-items: end; justify-content: center; color: #fff; font-weight: 800; padding-bottom: 8px; }
.bar-labels { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; color: var(--muted); font-size: .78rem; text-align: center; }
.pipeline-metrics { display:grid; grid-template-columns:repeat(5,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.pipeline { display: grid; grid-template-columns: repeat(6, minmax(230px, 1fr)); gap: 12px; overflow-x: auto; padding: 4px 2px 12px; }
.pipeline-column { min-height: 520px; background: linear-gradient(160deg, rgba(255,255,255,.55), rgba(232,246,255,.28)); backdrop-filter: blur(28px) saturate(1.35); border: 1px solid rgba(183,218,255,.82); border-radius: 24px; padding: 11px; box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 20px 60px rgba(8,103,255,.10); }
.pipeline-column h3 { display: flex; justify-content: space-between; margin: 2px 2px 12px; font-size: .95rem; }
.deal-card { background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(241,249,255,.54)); backdrop-filter: blur(24px) saturate(1.38); border: 1px solid rgba(191, 222, 255, .9); border-radius: 20px; padding: 14px; margin-bottom: 10px; box-shadow: 0 16px 44px rgba(8, 103, 255, .12), inset 0 1px 0 rgba(255,255,255,.72); cursor: grab; transition: transform .2s ease, box-shadow .2s ease, border .2s ease; }
.deal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.pipeline-card-head { display:flex; justify-content:space-between; gap:10px; align-items:start; margin-bottom:12px; }
.compact-pipeline-card { padding:11px; border-radius:16px; margin-bottom:8px; }
.compact-pipeline-card .pipeline-card-head { margin-bottom:8px; }
.compact-pipeline-card strong { font-size:.92rem; line-height:1.2; }
.compact-pipeline-card .subtle { font-size:.78rem; line-height:1.25; margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.compact-card-meta { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:.76rem; font-weight:800; }
.compact-card-meta span { display:inline-flex; align-items:center; gap:5px; min-width:0; }
.compact-card-meta .icon { width:15px; height:15px; flex-basis:15px; }
.pipeline-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:10px 0; }
.icon-detail { display:grid; grid-template-columns:20px 1fr; gap:8px; align-items:start; min-width:0; padding:8px; border-radius:14px; background:rgba(8,103,255,.06); border:1px solid rgba(166,211,255,.42); }
.icon-detail span { display:block; color:var(--muted); font-size:.72rem; font-weight:800; }
.icon-detail strong { display:block; font-size:.82rem; overflow-wrap:anywhere; }
.timeline { position: relative; display: grid; gap: 12px; }
.timeline-item { display: grid; grid-template-columns: 20px 1fr; gap: 12px; }
.dot { width: 12px; height: 12px; margin-top: 6px; border-radius: 50%; background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: 0 0 0 6px rgba(8,103,255,.12); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.form-field { display: grid; gap: 6px; color: var(--muted); font-weight: 700; font-size: .86rem; }
.form-label { display:inline-flex; align-items:center; gap:7px; }
.form-label .icon { width:16px; height:16px; flex-basis:16px; color:var(--blue); }
.form-field small { color: var(--blue-3); }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea { border-color: var(--blue-3); box-shadow: 0 0 0 3px rgba(8,103,255,.12); }
.product-editor { grid-column:1/-1; }
.product-form-list, .product-list { display:grid; gap:10px; }
.product-form-row { display:grid; grid-template-columns:64px minmax(240px,1.7fr) minmax(92px,.55fr) minmax(110px,.7fr) auto; gap:10px; align-items:end; padding:10px; border:1px solid rgba(183,218,255,.72); border-radius:18px; background:linear-gradient(145deg, rgba(255,255,255,.74), rgba(231,246,255,.46)); backdrop-filter:blur(18px) saturate(1.25); box-shadow:inset 0 1px 0 rgba(255,255,255,.72); }
.product-form-row label { display:grid; gap:6px; color:var(--muted); font-size:.78rem; font-weight:800; }
.product-picker-field { position:relative; }
.product-picker-field > span { display:inline-flex; align-items:center; gap:6px; }
.product-form-row input { width:100%; }
.product-picker-preview { width:58px; height:58px; align-self:center; display:grid; place-items:center; border-radius:16px; background:rgba(255,255,255,.72); border:1px solid rgba(183,218,255,.82); overflow:hidden; }
.product-thumb { width:100%; height:100%; object-fit:cover; border-radius:14px; }
.product-thumb.empty { display:grid; place-items:center; color:var(--blue); background:linear-gradient(145deg, rgba(255,255,255,.8), rgba(224,243,255,.65)); }
.product-picker-results { position:absolute; z-index:40; top:calc(100% + 8px); left:0; right:0; display:grid; gap:8px; padding:10px; border:1px solid rgba(183,218,255,.88); border-radius:18px; background:linear-gradient(145deg, rgba(255,255,255,.92), rgba(235,247,255,.82)); backdrop-filter:blur(24px) saturate(1.35); box-shadow:0 24px 70px rgba(8,103,255,.18); }
.product-picker-results.hidden { display:none; }
.product-picker-option { display:grid; grid-template-columns:42px 1fr; gap:10px; align-items:center; width:100%; padding:8px; border:1px solid rgba(183,218,255,.62); border-radius:14px; color:var(--text); background:rgba(255,255,255,.64); text-align:left; cursor:pointer; transition:.18s ease; }
.product-picker-option:hover { transform:translateY(-1px); border-color:var(--blue); background:rgba(235,247,255,.95); }
.product-picker-option .product-thumb { width:42px; height:42px; }
.product-picker-copy { display:grid; gap:2px; min-width:0; }
.product-picker-copy strong { font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product-picker-copy small { color:var(--muted); font-size:.76rem; }
.modal-overlay { position: fixed; inset: 0; background: rgba(3, 14, 34, .48); display: grid; place-items: center; z-index: 100; padding: 18px; }
.modal { width: min(780px, 100%); max-height: 90vh; overflow: auto; background: var(--panel); border-radius: 22px; padding: 18px; box-shadow: var(--shadow); border: 1px solid var(--line); }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.profile { display: grid; grid-template-columns: .8fr 1.2fr; gap: 16px; }
.customer-hero { display:flex; justify-content:space-between; gap:14px; align-items:start; padding:18px; border-radius:20px; background:linear-gradient(135deg, rgba(8,103,255,.13), rgba(16,168,255,.08)); border:1px solid var(--line); margin-bottom:14px; }
.profile-email { color: var(--blue-3); font-weight: 800; margin: 8px 0 0; }
.profile-tabs { display:flex; gap:8px; flex-wrap:wrap; margin: 12px 0; }
.profile-tabs span { padding:8px 11px; border-radius:999px; color:var(--blue-3); background:rgba(8,103,255,.1); font-weight:800; font-size:.78rem; }
.profile-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.metric-panel strong { display:block; margin-top:4px; font-size:1.2rem; }
.inner-card { box-shadow:none; margin:14px 0; }
.custom-field-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
.builder-shell, .quote-studio-shell { display:grid; grid-template-columns: minmax(430px, 520px) minmax(0, 1fr); gap:16px; align-items:start; }
.builder-shell > .uw-card:nth-child(2) { grid-column:1; }
.builder-shell > .uw-card:nth-child(3) { grid-column:2; grid-row:1 / span 2; }
.builder-customer-list, .template-grid, .section-designer { display:grid; gap:10px; margin:12px 0; }
.customer-picker { display:grid; gap:4px; width:100%; text-align:left; border:1px solid rgba(183,218,255,.84); border-radius:18px; padding:13px 14px; color:var(--text); background:rgba(255,255,255,.58); backdrop-filter:blur(18px); cursor:pointer; transition:.2s ease; }
.compact-customer-list .customer-picker { grid-template-columns:22px 1fr; align-items:start; padding:10px 12px; border-radius:14px; }
.customer-picker span { color:var(--muted); font-size:.84rem; }
.customer-picker:hover, .customer-picker.active { transform:translateY(-1px); color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-2)); box-shadow:0 18px 45px rgba(8,103,255,.18); }
.customer-picker:hover span, .customer-picker.active span { color:rgba(255,255,255,.84); }
.template-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.template-card, .layout-section { border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.72); color:var(--text); padding:14px; text-align:left; cursor:pointer; transition:.2s ease; }
.template-card.active, .layout-section:hover { border-color:var(--blue); box-shadow:0 10px 28px rgba(8,103,255,.12); transform:translateY(-1px); }
.template-card span, .layout-section span { display:block; color:var(--muted); font-size:.82rem; margin-top:4px; }
.preview-card { position:sticky; top:18px; }
.quotation-document { background:#fff; color:#0a1f44; border-radius:22px; padding:28px; border:1px solid #d7e7fb; box-shadow:0 24px 70px rgba(8,103,255,.16); }
.quote-studio-shell .preview-card { grid-column:2; grid-row:1; }
.quote-config-panel { min-height: calc(100vh - 170px); overflow:visible; }
.studio-step-title { display:flex; align-items:center; gap:9px; margin:10px 0; }
.studio-step-title h3 { margin:0; }
.auto-product-card { display:grid; gap:4px; padding:12px; border-radius:16px; background:rgba(8,103,255,.08); border:1px solid rgba(166,211,255,.58); margin-bottom:12px; }
.auto-product-card span { color:var(--muted); font-weight:800; font-size:.84rem; }
.quote-preview-toolbar { display:flex; justify-content:space-between; gap:12px; align-items:start; margin-bottom:14px; }
.quotation-preview-surface { overflow:auto; }
.quote-hero { display:flex; align-items:center; gap:16px; padding:18px; border-radius:20px; color:#fff; background:linear-gradient(135deg,#0648bd,#0aa7ff); margin-bottom:16px; }
.quote-hero h2 { color:#fff; margin:0; }
.quote-kicker { margin:0 0 4px; opacity:.84; font-weight:900; letter-spacing:.08em; font-size:.74rem; }
.quote-logo, .quote-logo-mark { width:70px; height:70px; border-radius:16px; background:#fff; color:#0867ff; display:grid; place-items:center; font-weight:900; object-fit:contain; padding:6px; }
.quote-party-grid, .quote-total-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.quote-panel { border:1px solid #d7e7fb; border-radius:16px; padding:14px; margin:12px 0; background:#fff; }
.quote-row { display:grid; grid-template-columns:130px 1fr; gap:10px; padding:5px 0; }
.quote-row span { color:#587098; font-weight:800; font-size:.82rem; }
.quote-row.grand { color:#0648bd; font-size:1.12rem; border-top:1px solid #d7e7fb; margin-top:6px; padding-top:10px; }
.quote-items { min-width:0; width:100%; border-collapse:collapse; }
.quote-items th, .quote-items td { padding:11px; border-bottom:1px solid #d7e7fb; text-align:left; }
.quote-items th { background:#f4f9ff; }
.quote-product { display:flex; align-items:center; gap:10px; }
.quote-product-thumb { width:42px; height:42px; object-fit:contain; border-radius:10px; background:#fff; border:1px solid #d7e7fb; }
.quote-signoff { display:flex; justify-content:flex-end; align-items:end; gap:14px; min-height:80px; }
.quote-signature { max-width:160px; max-height:70px; object-fit:contain; }
.quote-signature-line { width:180px; border-bottom:2px solid #0a1f44; height:46px; }
.quote-showcase { break-before:page; page-break-before:always; margin-top:28px; min-height:980px; }
.quote-showcase h3 { font-size:28px; margin:0 0 18px; }
.showcase-grid { display:grid; gap:16px; }
.quote-showcase.single .showcase-grid { grid-template-columns:1fr; }
.quote-showcase.grid .showcase-grid { grid-template-columns:1fr 1fr; }
.quote-showcase.dense .showcase-grid { grid-template-columns:repeat(3,1fr); }
.showcase-card { border:1px solid #d7e7fb; border-radius:20px; padding:16px; background:#fff; }
.quote-showcase.single .showcase-card { display:grid; grid-template-columns:1.25fr .75fr; gap:20px; align-items:center; }
.showcase-card img { width:100%; height:300px; object-fit:contain; border-radius:16px; background:#fff; border:1px solid #eef5ff; }
.quote-showcase.single .showcase-card img { height:520px; }
.quote-showcase.dense .showcase-card img { height:185px; }
.showcase-card h4 { margin:12px 0 6px; font-size:20px; }
.quote-showcase.single .showcase-card h4 { font-size:28px; }
.showcase-card p { margin:0 0 7px; color:#587098; line-height:1.45; }
.showcase-price { color:#0648bd!important; font-weight:900; font-size:16px; }
.print-frame { position:fixed; right:0; bottom:0; width:0; height:0; border:0; visibility:hidden; }
.quote-header { display:flex; align-items:center; gap:16px; padding:18px; border-radius:18px; color:#fff; background:linear-gradient(135deg,#0648bd,#0aa7ff); margin-bottom:16px; }
.quote-header img { width:72px; max-height:72px; object-fit:contain; background:#fff; border-radius:12px; padding:6px; }
.quote-block, .quote-summary { border:1px solid #d7e7fb; border-radius:16px; padding:14px; margin:12px 0; }
.quote-logo-block { display:flex; align-items:center; gap:14px; }
.quote-logo-block img { width:86px; max-height:86px; object-fit:contain; border:1px solid #d7e7fb; border-radius:14px; padding:8px; }
.quote-block > div { display:grid; grid-template-columns: 150px 1fr; gap:10px; margin:6px 0; }
.quotation-document .table-wrap table { min-width: 0; }
.quotation-document .table-wrap { overflow-x: visible; }
.quote-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; background:#f4f9ff; }
.signature-area { display:flex; justify-content:flex-end; align-items:end; min-height:90px; gap:14px; }
.signature-area img { max-width:160px; max-height:70px; object-fit:contain; }
.signature-line { width:180px; border-bottom:2px solid #0a1f44; height:46px; }
.market { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.market-card { min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; }
.empty-state { text-align: center; padding: 42px 20px; color: var(--muted); }
.empty-orbit { width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; margin: 0 auto 12px; color: #fff; font-weight: 900; background: linear-gradient(135deg, var(--blue), var(--blue-2)); }
.skeleton-line { height: 18px; border-radius: 999px; background: linear-gradient(90deg, var(--panel-soft), var(--line), var(--panel-soft)); animation: pulse 1.3s infinite; }
.skeleton-stack { display: grid; gap: 12px; }
@keyframes pulse { 50% { opacity: .45; } }
.toast { position: fixed; right: 20px; bottom: 20px; padding: 13px 16px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: var(--shadow); z-index: 200; }
.mini-track { height: 9px; border-radius: 999px; background: var(--panel-soft); overflow: hidden; border: 1px solid var(--line); }
.mini-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--blue-2)); }
.heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; }
.heat-cell { min-height: 86px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--blue), var(--blue-2)); }
.heat-cell small { color: rgba(255,255,255,.8); }
.notification-row { display: grid; grid-template-columns: 22px 1fr auto; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel-soft); }
.field-board { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.field-group { min-height:240px; }
.field-group-head { display:flex; justify-content:space-between; gap:12px; align-items:start; margin-bottom:12px; }
.field-stack { display:grid; gap:10px; }
.field-card { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:14px; border-radius:18px; border:1px solid rgba(183,218,255,.84); background:rgba(255,255,255,.62); backdrop-filter:blur(18px); box-shadow:0 12px 28px rgba(8,103,255,.08); transition:.2s ease; cursor:grab; }
.field-card:hover { transform:translateY(-2px); box-shadow:0 20px 45px rgba(8,103,255,.13); }
.field-meta { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.field-value-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px; }
.field-value { padding:12px; border-radius:16px; background:rgba(255,255,255,.56); border:1px solid var(--line); }
.glass-strip { margin-top:16px; }
.gmail-list { display:grid; gap:12px; }
.gmail-card { padding:14px; border-radius:18px; border:1px solid var(--line); background:rgba(255,255,255,.66); box-shadow:0 12px 30px rgba(8,103,255,.08); }
.gmail-card .gmail-card { padding:0; border:0; background:transparent; box-shadow:none; }
.approval-card { transition: transform .28s ease, background .28s ease, border-color .28s ease, opacity .28s ease; }
.approval-card.completed { background:rgba(242,246,250,.88); border-color:rgba(175,190,205,.75); transform:scale(.995); }
.approval-card.completed::after { content:"Completed"; display:inline-flex; margin-top:10px; padding:6px 10px; border-radius:999px; color:#37526f; background:rgba(117,139,162,.16); font-weight:900; }
.approval-card.ignored { background:rgba(255,244,236,.88); border-color:rgba(255,161,107,.55); transform:scale(.992); }
.approval-card.ignored::after { content:"Ignored"; display:inline-flex; margin-top:10px; padding:6px 10px; border-radius:999px; color:#9a4b16; background:rgba(255,138,68,.18); font-weight:900; }
.ai-summary-panel { display:grid; grid-template-columns:24px 1fr; gap:10px; padding:12px; border-radius:16px; background:rgba(8,103,255,.07); border:1px solid rgba(166,211,255,.5); margin:10px 0; }
.ai-summary-panel p { margin:.25rem 0 0; }
.gmail-card-head { display:flex; justify-content:space-between; align-items:start; gap:12px; }
.gmail-meta { display:grid; gap:8px; margin-top:10px; color:var(--muted); font-size:.85rem; }
.gmail-meta span { display:flex; gap:8px; align-items:center; }
.gmail-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.gmail-summary.compact { grid-template-columns:repeat(2,minmax(0,1fr)); margin:12px 0; }
.gmail-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.source-badge { display:inline-flex; align-items:center; gap:6px; margin-right:8px; padding:4px 8px; border-radius:999px; border:1px solid rgba(24,117,255,.18); background:rgba(255,255,255,.6); color:#0b4aa2; font-size:12px; font-weight:800; vertical-align:middle; }
.source-badge .icon { width:14px; height:14px; }
.source-badge.whatsapp { color:#0b7a43; border-color:rgba(20,184,111,.24); background:rgba(231,255,242,.74); }
.source-badge.gmail { color:#0b4aa2; }
.channel-picker { display:flex; gap:12px; flex-wrap:wrap; padding:10px; border:1px solid rgba(154,203,255,.58); border-radius:18px; background:rgba(255,255,255,.58); }
.channel-picker label { display:inline-flex; gap:8px; align-items:center; font-weight:700; }
.whatsapp-qr { display:flex; gap:16px; align-items:center; margin:14px 0; padding:14px; border-radius:20px; background:rgba(255,255,255,.68); border:1px solid rgba(154,203,255,.58); }
.whatsapp-qr img { width:180px; height:180px; border-radius:16px; background:#fff; padding:10px; box-shadow:0 18px 40px rgba(10,69,150,.14); }
.whatsapp-qr.compact img { width:120px; height:120px; }
.warning { color:#a14400; font-weight:700; }
.whatsapp-status-panel { margin:14px 0; padding:14px; border-radius:20px; border:1px solid rgba(154,203,255,.58); background:rgba(255,255,255,.52); }
.whatsapp-status-panel h4 { display:flex; gap:8px; align-items:center; margin:0 0 12px; }
.diagnostic-list { display:grid; gap:8px; margin-top:12px; }
.diagnostic-row { display:grid; grid-template-columns: 150px 1fr auto; gap:10px; align-items:center; padding:8px 10px; border-radius:14px; background:rgba(240,248,255,.72); border:1px solid rgba(154,203,255,.38); }
.diagnostic-row small { color:var(--muted); white-space:nowrap; }
.gmail-analysis-grid, .gmail-mini-status { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:12px; }
.gmail-settings-card { grid-column:1/-1; }
.gmail-detail { display:grid; gap:14px; }
.gmail-detail-head { display:flex; gap:12px; align-items:center; }
.gmail-message-body { border:1px solid var(--line); border-radius:16px; padding:14px; background:rgba(255,255,255,.72); line-height:1.55; white-space:pre-wrap; }
.rich-editor { min-height:150px; border:1px solid var(--line); border-radius:18px; padding:14px; background:rgba(255,255,255,.78); outline:none; line-height:1.55; }
.rich-editor:focus { border-color:var(--blue); box-shadow:0 0 0 4px rgba(8,103,255,.12); }
.attachment-list { display:flex; flex-wrap:wrap; gap:8px; }
.thread-list { display:grid; gap:10px; max-height:320px; overflow:auto; padding-right:4px; }
.thread-message { border:1px solid var(--line); border-radius:18px; padding:12px; background:rgba(255,255,255,.68); }
.thread-message.me { margin-left:34px; background:linear-gradient(135deg,rgba(8,103,255,.12),rgba(10,167,255,.16)); border-color:rgba(8,103,255,.25); }
.product-cell { display:flex; align-items:center; gap:12px; }
.product-thumb { width:54px; height:54px; border-radius:14px; object-fit:cover; border:1px solid var(--line); background:rgba(255,255,255,.7); flex:0 0 auto; }
.product-thumb.empty { display:grid; place-items:center; color:var(--blue); }
.product-image-preview { min-height:120px; border:1px dashed var(--line); border-radius:18px; display:grid; place-items:center; background:rgba(255,255,255,.55); overflow:hidden; }
.product-image-preview img { max-width:100%; max-height:180px; object-fit:contain; }
.quote-attach-row { display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.66); }

@media (max-width: 1180px) {
  .grid.kpi { grid-template-columns: repeat(3, minmax(160px, 1fr)); }
  .grid.two, .profile { grid-template-columns: 1fr; }
  .field-board { grid-template-columns:1fr; }
  .gmail-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gmail-analysis-grid, .gmail-mini-status { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pipeline-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .builder-shell, .quote-studio-shell { grid-template-columns:1fr; }
  .quote-studio-shell .preview-card { grid-column:auto; grid-row:auto; }
  .builder-shell > .uw-card:nth-child(2), .builder-shell > .uw-card:nth-child(3) { grid-column:auto; grid-row:auto; }
  .profile-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .market { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-panel { align-items: flex-start; flex-direction: column; }
  .hero-metrics { width: 100%; }
}

@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 80; transform: translateX(-100%); transition: .25s ease; width: 280px; }
  .sidebar.open { transform: translateX(0); }
  .btn.mobile-menu { display: inline-flex; }
  .topbar { align-items: stretch; flex-direction: column; }
  .search-wrap { max-width: none; }
  .grid.kpi, .grid.three, .market, .form-grid { grid-template-columns: 1fr; }
  .profile-fields, .template-grid { grid-template-columns:1fr; }
  .quote-party-grid, .quote-total-grid { grid-template-columns:1fr; }
  .field-value-grid { grid-template-columns:1fr; }
  .gmail-summary, .gmail-summary.compact, .gmail-analysis-grid, .gmail-mini-status { grid-template-columns:1fr; }
  .hero-metrics, .heatmap { grid-template-columns: 1fr; }
  .pipeline-metrics { grid-template-columns:1fr; }
  .main { padding: 16px; }
  .page-head { flex-direction: column; }
}

@media print {
  body { background:#fff; }
  .sidebar, .topbar, .page-head, .builder-shell > .uw-card:not(.preview-card), .preview-card .btn { display:none !important; }
  .app, .main, .page, .builder-shell, .quote-studio-shell { display:block; padding:0; margin:0; }
  .preview-card, .quotation-document { position:static; box-shadow:none; border:0; border-radius:0; }
  .print-body { margin:0; background:#fff; }
}
  --glass: rgba(11,31,61,.5);
  --glass-strong: rgba(11,31,61,.86);