*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --sky-50: #f0f9ff; --sky-100: #e0f2fe; --sky-200: #bae6fd;
      --sky-300: #7dd3fc; --sky-400: #38bdf8; --sky-500: #0EA5E9;
      --sky-600: #0284c7; --sky-700: #0369a1;
      --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
      --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b;
      --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a;
      --emerald-50: #ecfdf5; --emerald-500: #10b981; --emerald-600: #059669;
      --amber-50: #fffbeb; --amber-400: #fbbf24; --amber-500: #f59e0b;
      --rose-50: #fff1f2; --rose-500: #f43f5e;
      --violet-50: #f5f3ff; --violet-500: #8b5cf6; --violet-600: #7c3aed;
      --orange-50: #fff7ed; --orange-500: #f97316; --orange-600: #ea580c;
    }

    body { font-family: 'Lexend', sans-serif; background: var(--slate-50); color: var(--slate-800); line-height: 1.5; min-height: 100vh; }

    /* Auth Gate */
    .auth-gate { position: fixed; inset: 0; z-index: 9999; background: var(--slate-50); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
    .auth-gate.hidden { display: none; }
    .auth-logo { display: flex; gap: 2px; font-size: 32px; font-weight: 700; letter-spacing: -0.5px; }
    .auth-logo span:nth-child(1){color:#0EA5E9} .auth-logo span:nth-child(2){color:#f43f5e}
    .auth-logo span:nth-child(3){color:#f59e0b} .auth-logo span:nth-child(4){color:#0EA5E9}
    .auth-logo span:nth-child(5){color:#10b981} .auth-logo span:nth-child(6){color:#0EA5E9}
    .auth-logo span:nth-child(7){color:#f43f5e}
    .auth-subtitle { font-size: 14px; color: var(--slate-500); font-weight: 500; }
    .auth-error { font-size: 12px; color: var(--rose-500); font-weight: 500; display: none; max-width: 300px; text-align: center; line-height: 1.5; }
    .auth-error.show { display: block; }
    .auth-input { padding: 10px 14px; border: 1.5px solid var(--slate-200); border-radius: 9px; font-family: 'Lexend', sans-serif; font-size: 14px; font-weight: 500; color: var(--slate-800); text-align: center; width: 220px; transition: border-color 0.15s; }
    .auth-input:focus { outline: none; border-color: var(--sky-500); }
    .auth-input::placeholder { color: var(--slate-400); font-weight: 400; }
    .auth-btn { padding: 10px 28px; background: var(--sky-500); color: white; border: none; border-radius: 9px; font-family: 'Lexend', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
    .auth-btn:hover { background: var(--sky-600); }

    /* Header */
    .app-header {
      background: white; border-bottom: 1px solid var(--slate-200);
      padding: 14px 28px; display: flex; align-items: center; gap: 14px;
      position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 4px rgba(0,0,0,.04);
    }
    .logo { display: flex; gap: 1px; font-size: 19px; font-weight: 700; letter-spacing: -0.3px; flex-shrink: 0; }
    .logo span:nth-child(1){color:#0EA5E9} .logo span:nth-child(2){color:#f43f5e}
    .logo span:nth-child(3){color:#f59e0b} .logo span:nth-child(4){color:#0EA5E9}
    .logo span:nth-child(5){color:#10b981} .logo span:nth-child(6){color:#0EA5E9}
    .logo span:nth-child(7){color:#f43f5e}
    .header-sep { width: 1px; height: 18px; background: var(--slate-200); }
    .header-title { font-size: 14px; font-weight: 600; color: var(--slate-600); }
    .header-spacer { flex: 1; }
    .currency-toggle { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
    .currency-toggle label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-400); }
    .currency-select { padding: 4px 8px; border: 1.5px solid var(--slate-200); border-radius: 6px; font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 600; color: var(--slate-700); background: white; cursor: pointer; }
    .currency-select:focus { outline: none; border-color: var(--sky-500); }
    .user-badge { display:flex; align-items:center; flex-shrink:0; cursor:pointer; }
    .user-badge-name { font-size:11px; font-weight:600; color:var(--slate-500); border-bottom:1px dashed transparent; transition:all .12s; }
    .user-badge:hover .user-badge-name { color:var(--slate-700); border-bottom-color:var(--slate-400); }
    .user-badge-input { display:none; font-family:'Lexend',sans-serif; font-size:11px; font-weight:600; width:80px; padding:2px 6px; border:1.5px solid var(--sky-400); border-radius:4px; outline:none; color:var(--slate-700); background:white; }
    .user-badge-name:empty::after { content:'Set name'; color:var(--slate-400); font-style:italic; }

    /* Layout */
    .builder { display: grid; grid-template-columns: 1fr 540px; min-height: calc(100vh - 53px); }

    /* Left: Package Catalog */
    .catalog-col { padding: 20px 24px 48px; overflow-y: auto; border-right: 1px solid var(--slate-200); }
    .catalog-col > .section-title { font-size: 16px; font-weight: 700; color: var(--slate-800); margin-bottom: 16px; }

    /* Pathway Section */
    .pathway-section { margin-bottom: 28px; }
    .pathway-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid var(--slate-200); cursor: pointer; user-select: none; }
    .pathway-header:hover { opacity: 0.85; }
    .pathway-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
    .pathway-chevron { font-size: 10px; color: var(--slate-400); transition: transform 0.2s; flex-shrink: 0; }
    .pathway-section.collapsed .pathway-chevron { transform: rotate(-90deg); }
    .pathway-header h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-700); }
    .pathway-desc { font-size: 10.5px; color: var(--slate-400); font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: auto; }
    .pathway-body { transition: all 0.2s; }
    .pathway-section.collapsed .pathway-body { display: none; }
    .pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }

    /* Package Card */
    .pkg-card { background: white; border: 1.5px solid var(--slate-200); border-radius: 12px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.15s, box-shadow 0.15s; height: 100%; }
    .pkg-card:hover { border-color: var(--sky-300); box-shadow: 0 2px 8px rgba(14,165,233,.08); }
    .pkg-card.in-quote { border-color: var(--sky-400); background: var(--sky-50); }
    .pkg-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
    .pkg-name { font-size: 13px; font-weight: 700; color: var(--slate-800); line-height: 1.3; }
    .pkg-subtitle { font-size: 10.5px; color: var(--slate-500); font-weight: 500; }
    .pkg-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
    .pkg-desc { font-size: 10.5px; color: var(--slate-500); line-height: 1.4; }
    .pkg-price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
    .pkg-price { font-size: 14px; font-weight: 800; color: var(--sky-700); }
    .pkg-price-note { font-size: 9.5px; color: var(--slate-400); }
    .pkg-components { font-size: 10px; color: var(--slate-400); line-height: 1.5; }
    .pkg-add-btn { margin-top: auto; padding: 7px 0; width: 100%; background: var(--sky-500); color: white; border: none; border-radius: 8px; font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
    .pkg-add-btn:hover { background: var(--sky-600); }
    .pkg-card.in-quote .pkg-add-btn { background: var(--emerald-500); }
    .pkg-card.in-quote .pkg-add-btn:hover { background: var(--emerald-600); }

    /* Inline Config Panel */
    .pkg-config { margin-top: 8px; padding: 12px; background: var(--slate-50); border: 1.5px solid var(--sky-200); border-radius: 10px; display: flex; flex-direction: column; gap: 10px; }
    .pkg-config-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .pkg-config-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-500); min-width: 70px; }
    .config-select { padding: 5px 8px; border: 1.5px solid var(--slate-200); border-radius: 7px; font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 600; color: var(--slate-700); background: white; cursor: pointer; flex: 1; }
    .config-select:focus { outline: none; border-color: var(--sky-500); }

    /* Delivery pills */
    .delivery-pills { display: flex; gap: 4px; flex: 1; }
    .delivery-pill { padding: 5px 12px; border: 1.5px solid var(--slate-200); border-radius: 20px; font-family: 'Lexend', sans-serif; font-size: 10px; font-weight: 600; color: var(--slate-600); background: white; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .delivery-pill:hover { border-color: var(--sky-300); }
    .delivery-pill.active { background: var(--sky-500); color: white; border-color: var(--sky-500); }
    .delivery-pill .pill-cost { font-size: 9px; font-weight: 500; opacity: 0.8; margin-left: 3px; }

    .config-participants { width: 60px; padding: 5px 8px; border: 1.5px solid var(--slate-200); border-radius: 7px; font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 700; color: var(--slate-800); text-align: center; -moz-appearance: textfield; }
    .config-participants::-webkit-inner-spin-button, .config-participants::-webkit-outer-spin-button { -webkit-appearance: none; }
    .config-participants:focus { outline: none; border-color: var(--sky-500); }

    .config-confirm-btn { padding: 8px 0; width: 100%; background: var(--emerald-500); color: white; border: none; border-radius: 8px; font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; transition: background 0.15s; }
    .config-confirm-btn:hover { background: var(--emerald-600); }

    /* Per-session config rows */
    .session-config-rows { display: flex; flex-direction: column; gap: 6px; }
    .session-config-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: white; border: 1px solid var(--slate-200); border-radius: 8px; }
    .session-config-label { font-size: 10px; font-weight: 700; color: var(--slate-500); min-width: 62px; flex-shrink: 0; }
    .session-hours-input { width: 52px; padding: 4px 6px; border: 1.5px solid var(--slate-200); border-radius: 6px; font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 700; color: var(--slate-800); text-align: center; -moz-appearance: textfield; }
    .session-hours-input::-webkit-inner-spin-button, .session-hours-input::-webkit-outer-spin-button { -webkit-appearance: none; }
    .session-hours-input:focus { outline: none; border-color: var(--sky-500); }
    .session-hours-unit { font-size: 9.5px; color: var(--slate-400); font-weight: 600; flex-shrink: 0; }
    .config-total-hours { width: 52px; padding: 5px 8px; border: 1.5px solid var(--slate-200); border-radius: 7px; font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 700; color: var(--slate-800); text-align: center; -moz-appearance: textfield; }
    .config-total-hours::-webkit-inner-spin-button, .config-total-hours::-webkit-outer-spin-button { -webkit-appearance: none; }
    .config-total-hours:focus { outline: none; border-color: var(--sky-500); }
    .num-sessions-input { width: 52px; padding: 5px 8px; border: 1.5px solid var(--slate-200); border-radius: 7px; font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 700; color: var(--slate-800); text-align: center; -moz-appearance: textfield; }
    .num-sessions-input::-webkit-inner-spin-button, .num-sessions-input::-webkit-outer-spin-button { -webkit-appearance: none; }
    .num-sessions-input:focus { outline: none; border-color: var(--sky-500); }

    /* Compact delivery pills for per-session use */
    .delivery-pills-sm { display: flex; gap: 3px; flex: 1; }
    .delivery-pill-sm { padding: 3px 8px; border: 1.5px solid var(--slate-200); border-radius: 14px; font-family: 'Lexend', sans-serif; font-size: 9px; font-weight: 600; color: var(--slate-500); background: white; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .delivery-pill-sm:hover { border-color: var(--sky-300); }
    .delivery-pill-sm.active { background: var(--sky-500); color: white; border-color: var(--sky-500); }

    /* Session rows in builder (right panel) */
    .builder-session-row { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: var(--slate-50); border-radius: 7px; }
    .builder-session-label { font-size: 10px; font-weight: 700; color: var(--slate-500); min-width: 58px; flex-shrink: 0; }
    .builder-session-hours { width: 46px; padding: 3px 5px; border: 1.5px solid var(--slate-200); border-radius: 5px; font-family: 'Lexend', sans-serif; font-size: 10px; font-weight: 700; color: var(--slate-800); text-align: center; -moz-appearance: textfield; }
    .builder-session-hours::-webkit-inner-spin-button, .builder-session-hours::-webkit-outer-spin-button { -webkit-appearance: none; }
    .builder-session-hours:focus { outline: none; border-color: var(--sky-500); }
    .builder-session-info { font-size: 9.5px; color: var(--slate-400); margin-left: auto; flex-shrink: 0; }

    /* Add-on cards */
    .addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
    .addon-card { background: white; border: 1.5px solid var(--slate-200); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; transition: border-color 0.15s; cursor: pointer; }
    .addon-card:hover { border-color: var(--sky-300); }
    .addon-card.in-quote { border-color: var(--sky-400); background: var(--sky-50); }
    .addon-name { font-size: 11px; font-weight: 600; color: var(--slate-700); }
    .addon-price { font-size: 10px; font-weight: 700; color: var(--sky-600); }
    .addon-add { font-size: 10px; font-weight: 600; color: var(--sky-500); margin-top: 2px; }

    /* Software License Cards */
    .sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
    .sw-card { background: white; border: 1.5px solid var(--slate-200); border-radius: 11px; padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 6px; transition: border-color 0.15s, box-shadow 0.15s; height: 100%; }
    .sw-card:hover { border-color: var(--card-color, var(--violet-500)); box-shadow: 0 2px 8px color-mix(in srgb, var(--card-color, #8b5cf6) 12%, transparent); }
    .sw-card-name { font-size: 13px; font-weight: 700; color: var(--slate-800); }
    .sw-card-tagline { font-size: 10.5px; color: var(--slate-500); line-height: 1.35; }
    .sw-card-price { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 20px; align-self: flex-start; }
    .sw-card-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
    .sw-card-row label { font-size: 10px; font-weight: 600; color: var(--slate-500); }
    .sw-count-input { width: 80px; padding: 4px 8px; border: 1.5px solid var(--slate-200); border-radius: 6px; font-family: 'Lexend', sans-serif; font-size: 12px; font-weight: 700; color: var(--slate-800); text-align: right; -moz-appearance: textfield; }
    .sw-count-input::-webkit-inner-spin-button, .sw-count-input::-webkit-outer-spin-button { -webkit-appearance: none; }
    .sw-count-input:focus { outline: none; border-color: var(--card-color, var(--violet-500)); }
    .sw-card-computed { font-size: 10px; font-weight: 700; color: var(--emerald-600); margin-left: auto; }
    .sw-add-btn { margin-top: auto; padding: 7px 0; width: 100%; background: var(--card-color, var(--violet-500)); color: var(--card-btn-text, white); border: none; border-radius: 8px; font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
    .sw-add-btn:hover { filter: brightness(0.9); }

    /* Right: Quote Panel */
    .quote-col { background: white; position: sticky; top: 53px; height: calc(100vh - 53px); align-self: start; display: flex; flex-direction: column; }
    .quote-col-inner { flex: 1; overflow-y: scroll; padding: 20px 20px 28px; box-sizing: border-box; }

    /* Quote Tabs */
    .quote-tabs-wrap { display:flex; align-items:stretch; background:var(--slate-50); border-bottom:1.5px solid var(--slate-200); }
    .library-tab-btn { display:flex; align-items:center; gap:4px; padding:6px 12px; font-family:'Lexend',sans-serif; font-size:11px; font-weight:600; color:var(--sky-600); background:var(--sky-50); border:1.5px solid var(--sky-200); border-radius:6px; cursor:pointer; white-space:nowrap; margin:4px 8px 4px 4px; flex-shrink:0; transition:all .12s; order:-1; }
    .library-tab-btn:hover { background:var(--sky-100); border-color:var(--sky-400); }
    .quote-tabs { display: flex; align-items: stretch; background: var(--slate-50); flex-shrink: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; flex:1; min-width:0; }
    .quote-tabs::-webkit-scrollbar { height: 3px; }
    .quote-tabs::-webkit-scrollbar-thumb { background: var(--slate-300); border-radius: 2px; }
    .quote-tab { display: flex; align-items: center; gap: 5px; padding: 7px 10px 6px; font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 500; color: var(--slate-500); background: var(--slate-100); border: none; border-right: 1px solid var(--slate-200); cursor: pointer; white-space: nowrap; transition: all 0.12s; max-width: 160px; flex-shrink: 0; border-top: 2px solid transparent; }
    .quote-tab:hover { background: var(--slate-50); color: var(--slate-700); }
    .quote-tab.active { background: white; color: var(--slate-800); font-weight: 600; border-top-color: var(--sky-500); border-bottom: 1.5px solid white; margin-bottom: -1.5px; }
    .quote-tab-name { overflow: hidden; text-overflow: ellipsis; max-width: 110px; }
    .quote-tab-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
    .quote-tab-dot.unsaved { background:var(--rose-500); }
    .quote-tab-dot.saved { background:var(--emerald-500); }
    .quote-tab-dot.modified { background:var(--amber-500); }
    .quote-tab-dot.shared { background:var(--sky-400); }

    .save-status-badge { display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:4px 10px; border-radius:6px; }
    .save-status-badge.unsaved { color:var(--rose-500); background:var(--rose-50); }
    .save-status-badge.saved { color:var(--emerald-600); background:var(--emerald-50); }
    .save-status-badge.modified { color:var(--amber-500); background:var(--amber-50); }
    .save-status-badge.shared { color:var(--sky-600); background:var(--sky-50); }
    .save-status-dot { width:7px; height:7px; border-radius:50%; }
    .save-status-dot.unsaved { background:var(--rose-500); }
    .save-status-dot.saved { background:var(--emerald-500); }
    .save-status-dot.modified { background:var(--amber-500); }
    .save-status-dot.shared { background:var(--sky-400); }
    .quote-tab-close { width: 14px; height: 14px; border: none; background: none; color: var(--slate-400); font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; border-radius: 3px; line-height: 1; flex-shrink: 0; transition: all 0.1s; }
    .quote-tab-close:hover { color: var(--rose-500); background: var(--rose-50); }
    .quote-tab-new { display: flex; align-items: center; gap: 3px; padding: 7px 12px 6px; font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 600; color: var(--sky-500); background: none; border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all 0.12s; }
    .quote-tab-new:hover { color: var(--sky-600); background: var(--sky-50); }
    .quote-col-inner > * + * { margin-top: 14px; }
    .q-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--slate-400); margin-bottom: 6px; }
    .partner-input { width: 100%; padding: 9px 12px; border: 1.5px solid var(--slate-200); border-radius: 9px; font-family: 'Lexend', sans-serif; font-size: 13px; font-weight: 500; color: var(--slate-800); transition: border-color 0.15s; }
    .partner-input:focus { outline: none; border-color: var(--sky-500); }
    .partner-input::placeholder { color: var(--slate-400); font-weight: 400; }

    /* Rate Editor */
    .rate-editor { background: var(--slate-50); border: 1.5px solid var(--slate-200); border-radius: 9px; overflow: hidden; }
    .rate-editor-toggle { width: 100%; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; background: none; border: none; cursor: pointer; font-family: 'Lexend', sans-serif; }
    .rate-editor-toggle:hover { background: var(--slate-100); }
    .rate-editor-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; color: var(--slate-400); }
    .rate-editor-status { font-size: 10px; color: var(--slate-400); }
    .rate-editor-body { display: none; padding: 0 12px 10px; }
    .rate-editor.open .rate-editor-body { display: flex; gap: 8px; flex-wrap: wrap; }
    .rate-field { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 80px; }
    .rate-field label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-500); }
    .rate-input { padding: 5px 8px; border: 1.5px solid var(--slate-200); border-radius: 6px; font-family: 'Lexend', sans-serif; font-size: 12px; font-weight: 700; color: var(--slate-800); text-align: right; -moz-appearance: textfield; width: 100%; }
    .rate-input::-webkit-inner-spin-button, .rate-input::-webkit-outer-spin-button { -webkit-appearance: none; }
    .rate-input:focus { outline: none; border-color: var(--sky-500); }
    .rate-reset { font-size: 9px; font-weight: 600; color: var(--sky-600); background: none; border: none; cursor: pointer; font-family: 'Lexend', sans-serif; padding: 2px 6px; border-radius: 4px; align-self: flex-end; margin-top: 2px; }
    .rate-reset:hover { background: var(--sky-50); }

    /* Quote Package Section */
    .quote-packages { display: flex; flex-direction: column; gap: 10px; min-height: 60px; }
    .empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 32px 16px; border: 2px dashed var(--slate-200); border-radius: 10px; color: var(--slate-400); font-size: 12px; text-align: center; gap: 6px; }
    .empty-icon { font-size: 24px; opacity: 0.4; }

    .qpkg { border: 1.5px solid var(--slate-200); border-radius: 10px; overflow: hidden; transition: border-color 0.15s; }
    .qpkg-header { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--slate-50); cursor: pointer; border-bottom: 1px solid var(--slate-100); transition: background 0.15s; }
    .qpkg-header:hover { background: var(--slate-100); }
    .qpkg.expanded .qpkg-header { background: var(--sky-50); border-bottom-color: var(--sky-100); }
    .qpkg-chevron { font-size: 10px; color: var(--slate-400); transition: transform 0.2s; flex-shrink: 0; }
    .qpkg.expanded .qpkg-chevron { transform: rotate(90deg); }
    .qpkg-name { flex: 1; font-size: 12px; font-weight: 700; color: var(--slate-800); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .qpkg-name-input { flex: 1; font-size: 12px; font-weight: 700; color: var(--slate-800); min-width: 0; border: 1px solid transparent; border-radius: 4px; padding: 1px 4px; background: transparent; font-family: 'Lexend', sans-serif; cursor: text; }
    .qpkg-name-input:hover { border-color: var(--slate-300); background: var(--slate-50); }
    .qpkg-name-input:focus { outline: none; border-color: var(--sky-500); background: white; }
    .qpkg-total { font-size: 12px; font-weight: 800; color: var(--sky-700); flex-shrink: 0; }
    .qpkg-delete { width: 20px; height: 20px; border: none; background: none; color: var(--slate-300); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; flex-shrink: 0; border-radius: 4px; transition: all 0.1s; line-height: 1; }
    .qpkg-delete:hover { color: var(--rose-500); background: var(--rose-50); }
    .qpkg-body { display: none; padding: 10px 12px; flex-direction: column; gap: 5px; }
    .qpkg.expanded .qpkg-body { display: flex; }

    .delivery-badge { font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; padding: 1px 6px; border-radius: 10px; margin-left: 4px; }
    .delivery-badge.virtual { background: var(--emerald-50); color: var(--emerald-600); }
    .delivery-badge.local { background: var(--amber-50); color: #92400e; }
    .delivery-badge.travel { background: var(--orange-50); color: var(--orange-600); }

    .session-info { font-size: 10px; color: var(--slate-500); font-weight: 500; padding: 4px 8px; background: var(--slate-50); border-radius: 6px; margin-bottom: 2px; }

    /* Participants row */
    .participants-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--amber-50); border: 1px solid var(--amber-400); border-radius: 7px; font-size: 10.5px; color: #78350f; margin-bottom: 4px; }
    .participants-row label { font-weight: 600; flex-shrink: 0; }
    .participants-input { width: 56px; padding: 3px 6px; border: 1px solid var(--amber-400); border-radius: 5px; font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 700; color: var(--slate-800); text-align: center; background: white; -moz-appearance: textfield; }
    .participants-input::-webkit-inner-spin-button, .participants-input::-webkit-outer-spin-button { -webkit-appearance: none; }
    .participants-input:focus { outline: none; border-color: var(--sky-500); }
    .facilitator-input { width: 40px; padding: 3px 4px; border: 1px solid var(--amber-400); border-radius: 5px; font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 700; color: var(--slate-800); text-align: center; background: white; -moz-appearance: textfield; }
    .facilitator-input::-webkit-inner-spin-button, .facilitator-input::-webkit-outer-spin-button { -webkit-appearance: none; }
    .facilitator-input:focus { outline: none; border-color: var(--sky-500); }
    .facilitator-count { font-weight: 700; flex-shrink: 0; font-size: 11px; }

    /* Component section header */
    .comp-section-header { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--slate-400); margin: 8px 0 3px 2px; }
    .comp-section-header:first-child { margin-top: 0; }

    /* Component line */
    .comp-line { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: var(--slate-50); border-radius: 7px; }
    .comp-line.support { background: var(--emerald-50); }
    .comp-line.travel-line { background: var(--orange-50); }
    .comp-info { flex: 1; min-width: 0; }
    .comp-name { font-size: 11px; font-weight: 600; color: var(--slate-700); }
    .comp-name-input { font-size: 11px; font-weight: 600; color: var(--slate-700); border: 1px solid transparent; border-radius: 4px; padding: 1px 4px; background: transparent; font-family: 'Lexend', sans-serif; cursor: text; min-width: 0; max-width: 100%; }
    .comp-name-input:hover { border-color: var(--slate-300); background: var(--slate-50); }
    .comp-name-input:focus { outline: none; border-color: var(--sky-500); background: white; }
    .comp-name-input::placeholder { color: var(--slate-400); font-style: italic; font-weight: 400; }
    .comp-name .support-tag { font-size: 8.5px; font-weight: 700; color: var(--emerald-600); text-transform: uppercase; letter-spacing: 0.5px; margin-left: 4px; }
    .comp-name .scale-tag { font-size: 8.5px; font-weight: 700; color: var(--orange-600); text-transform: uppercase; letter-spacing: 0.5px; margin-left: 4px; }
    .comp-name .auto-tag { font-size: 8.5px; font-weight: 700; color: var(--violet-600); text-transform: uppercase; letter-spacing: 0.5px; margin-left: 4px; }
    .comp-qty { display: flex; align-items: center; gap: 3px; }
    .comp-qty-btn { width: 18px; height: 18px; border: 1.5px solid var(--slate-300); border-radius: 4px; background: white; color: var(--slate-600); font-size: 12px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; transition: all 0.1s; flex-shrink: 0; padding: 0; }
    .comp-qty-btn:hover { border-color: var(--sky-500); color: var(--sky-600); }
    .comp-qty-input { width: 40px; text-align: center; padding: 2px; border: 1.5px solid var(--slate-200); border-radius: 4px; font-family: 'Lexend', sans-serif; font-size: 10.5px; font-weight: 700; color: var(--slate-800); -moz-appearance: textfield; }
    .comp-qty-input::-webkit-inner-spin-button, .comp-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
    .comp-qty-input:focus { outline: none; border-color: var(--sky-500); }
    .comp-unit { font-size: 9.5px; font-weight: 600; color: var(--slate-400); }
    .comp-total { font-size: 11px; font-weight: 700; color: var(--slate-800); text-align: right; flex-shrink: 0; min-width: 50px; }

    /* Pathway discount */
    .pathway-discount-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 8px; background: var(--emerald-50); border: 1px solid var(--emerald-500); border-radius: 7px; font-size: 11px; }
    .pathway-discount-row.inactive { background: var(--slate-50); border-color: var(--slate-200); }
    .pathway-discount-row.inactive .pathway-discount-label { color: var(--slate-400); }
    .pathway-discount-label { font-weight: 600; color: var(--emerald-600); }
    .pathway-discount-value { font-weight: 800; color: var(--emerald-600); min-width: 60px; text-align: right; }

    /* Addon line in quote */
    .addon-line { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: var(--slate-50); border-radius: 7px; }

    /* Software license line in quote */
    .license-line { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--lic-bg, var(--violet-50)); border: 1px solid var(--lic-color, var(--violet-500)); border-radius: 8px; }
    .license-line .comp-info { flex: 1; }
    .license-line .license-name { font-size: 11px; font-weight: 700; color: var(--lic-text, var(--violet-600)); display: flex; align-items: center; gap: 4px; }
    .license-line .license-name-input { font-family: 'Lexend', sans-serif; font-size: 10px; font-weight: 500; color: var(--slate-600); background: white; border: 1px solid var(--lic-color, var(--violet-300)); border-radius: 4px; padding: 1px 5px; width: 120px; outline: none; }
    .license-line .license-name-input:focus { border-color: var(--sky-500); }
    .license-line .license-name-input::placeholder { color: var(--slate-400); font-style: italic; }
    .license-line .license-detail { font-size: 9.5px; color: var(--slate-500); }
    .license-line .license-price { font-size: 12px; font-weight: 800; color: var(--lic-text, var(--violet-600)); flex-shrink: 0; }

    /* Totals */
    .totals-section { border-top: 1.5px solid var(--slate-100); padding-top: 14px; display: flex; flex-direction: column; gap: 9px; }
    .t-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
    .t-label { color: var(--slate-500); font-weight: 500; }
    .t-value { font-weight: 700; color: var(--slate-800); }
    .discount-row { display: flex; align-items: center; gap: 7px; }
    .disc-label { font-size: 12px; font-weight: 500; color: var(--slate-500); flex-shrink: 0; }
    .disc-inputs { display: flex; gap: 4px; flex: 1; }
    .disc-num { flex: 1; padding: 6px 9px; border: 1.5px solid var(--slate-200); border-radius: 7px; font-family: 'Lexend', sans-serif; font-size: 12px; font-weight: 600; color: var(--slate-800); min-width: 0; }
    .disc-num:focus { outline: none; border-color: var(--sky-500); }
    .disc-name { flex: 2; padding: 6px 9px; border: 1.5px solid var(--slate-200); border-radius: 7px; font-family: 'Lexend', sans-serif; font-size: 12px; font-weight: 500; color: var(--slate-800); min-width: 0; }
    .disc-name:focus { outline: none; border-color: var(--sky-500); }
    .disc-name::placeholder { color: var(--slate-400); font-weight: 400; }
    .disc-type { padding: 6px 8px; border: 1.5px solid var(--slate-200); border-radius: 7px; font-family: 'Lexend', sans-serif; font-size: 12px; font-weight: 600; color: var(--slate-700); background: white; cursor: pointer; }
    .disc-amt { font-size: 12px; font-weight: 700; color: var(--emerald-600); flex-shrink: 0; min-width: 48px; text-align: right; }
    .total-final { background: var(--slate-900); padding: 11px 14px; border-radius: 10px; display: flex; justify-content: space-between; align-items: center; }
    .total-final .t-label { color: rgba(255,255,255,0.65); font-size: 12px; }
    .total-final .t-value { color: white; font-size: 18px; font-weight: 800; }
    .savings-note { text-align: center; font-size: 10.5px; color: var(--emerald-600); font-weight: 600; display: none; }
    .savings-note.show { display: block; }
    .funder-row { display: flex; align-items: center; gap: 7px; }
    .oop-final { background: var(--sky-700); }

    /* Insights */
    .insights-section { border-top: 1.5px solid var(--slate-100); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
    .insight-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; }
    .insight-label { color: var(--slate-500); font-weight: 500; display: flex; align-items: center; gap: 4px; }
    .insight-value { font-weight: 700; color: var(--sky-700); }
    .insight-input { width: 72px; padding: 4px 7px; border: 1.5px solid var(--slate-200); border-radius: 6px; font-family: 'Lexend', sans-serif; font-size: 11px; font-weight: 600; color: var(--slate-800); text-align: right; -moz-appearance: textfield; }
    .insight-input::-webkit-inner-spin-button, .insight-input::-webkit-outer-spin-button { -webkit-appearance: none; }
    .insight-input:focus { outline: none; border-color: var(--sky-500); }

    /* Actions */
    .actions { display: flex; flex-direction: column; gap: 7px; }
    .copy-row { display: flex; gap: 6px; }
    .btn-copy { flex: 1; padding: 11px; background: var(--sky-500); color: white; border: none; border-radius: 9px; font-family: 'Lexend', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
    .btn-copy:hover { background: var(--sky-600); }
    .btn-copy.copied { background: var(--emerald-500); }
    .btn-copy-md { padding: 11px 14px; background: var(--slate-700); color: white; border: none; border-radius: 9px; font-family: 'Lexend', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s; white-space: nowrap; }
    .btn-copy-md:hover { background: var(--slate-800); }
    .btn-copy-md.copied { background: var(--emerald-500); }
    .btn-clear { width: 100%; padding: 8px; background: transparent; color: var(--slate-400); border: 1.5px solid var(--slate-200); border-radius: 9px; font-family: 'Lexend', sans-serif; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
    .btn-clear:hover { color: var(--rose-500); border-color: var(--rose-500); background: var(--rose-50); }
    .footnote { font-size: 10px; color: var(--slate-400); line-height: 1.5; padding-top: 8px; border-top: 1px solid var(--slate-100); }

    /* Toast */
    .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--slate-900); color: white; padding: 9px 20px; border-radius: 40px; font-size: 13px; font-weight: 600; transition: transform 0.3s cubic-bezier(.34,1.56,.64,1); z-index: 1000; white-space: nowrap; pointer-events: none; }
    .toast.show { transform: translateX(-50%) translateY(0); }

    @media (max-width: 768px) {
      .builder { grid-template-columns: 1fr; }
      .quote-col { position: static; height: auto; align-self: auto; }
      .quote-col-inner { height: auto; overflow-y: visible; }
    }
    @media (min-width: 769px) and (max-width: 1100px) {
      .builder { grid-template-columns: 1fr 460px; }
    }
    /* Tab Bar */
    .tab-bar { display: flex; gap: 0; background: white; border-bottom: 1px solid var(--slate-200); padding: 0 28px; }
    .tab-btn { padding: 10px 20px; font-family: 'Lexend', sans-serif; font-size: 12px; font-weight: 600; color: var(--slate-500); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.15s; }
    .tab-btn:hover { color: var(--slate-700); }
    .tab-btn.active { color: var(--sky-600); border-bottom-color: var(--sky-500); }

    /* Confirm Modal */
    .confirm-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:2000; align-items:center; justify-content:center; }
    .confirm-overlay.open { display:flex; }
    .confirm-modal { background:white; border-radius:12px; padding:24px; max-width:420px; width:90vw; box-shadow:0 20px 60px rgba(0,0,0,.2); }
    .confirm-message { font-family:'Lexend',sans-serif; font-size:14px; color:var(--slate-700); line-height:1.5; margin-bottom:20px; white-space:pre-line; }
    .confirm-actions { display:flex; justify-content:flex-end; gap:8px; }
    .confirm-btn { font-family:'Lexend',sans-serif; font-size:13px; font-weight:600; padding:8px 18px; border-radius:8px; border:none; cursor:pointer; transition:all .12s; }
    .confirm-btn.cancel { background:var(--slate-100); color:var(--slate-600); }
    .confirm-btn.cancel:hover { background:var(--slate-200); }
    .confirm-btn.ok { background:var(--sky-500); color:white; }
    .confirm-btn.ok:hover { background:var(--sky-600); }
    .confirm-btn.danger { background:var(--rose-500); color:white; }
    .confirm-btn.danger:hover { background:var(--rose-600); }

    /* Library Modal */
    .library-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; align-items:center; justify-content:center; }
    .library-overlay.open { display:flex; }
    .library-modal { background:white; border-radius:14px; width:90vw; max-width:680px; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.2); }
    .library-header { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--slate-200); }
    .library-header h2 { font-size:16px; font-weight:700; color:var(--slate-800); margin:0; }
    .library-tabs { display:flex; gap:2px; background:var(--slate-100); border-radius:6px; padding:2px; margin:0 auto 0 16px; }
    .library-tab { font-family:'Lexend',sans-serif; font-size:11px; font-weight:600; padding:4px 12px; border:none; border-radius:5px; background:none; color:var(--slate-500); cursor:pointer; transition:all .12s; }
    .library-tab:hover { color:var(--slate-700); }
    .library-tab.active { background:white; color:var(--slate-800); box-shadow:0 1px 3px rgba(0,0,0,.08); }
    .library-rebuild { font-family:'Lexend',sans-serif; font-size:10px; font-weight:500; color:var(--slate-400); background:none; border:1px solid var(--slate-200); border-radius:5px; padding:3px 8px; cursor:pointer; transition:all .12s; margin-left:auto; }
    .library-rebuild:hover { color:var(--slate-600); border-color:var(--slate-400); }
    .library-close { background:none; border:none; font-size:22px; color:var(--slate-400); cursor:pointer; padding:0 4px; line-height:1; }
    .library-close:hover { color:var(--slate-700); }
    .library-body { overflow-y:auto; padding:16px 24px; flex:1; }
    .library-loading { text-align:center; color:var(--slate-400); padding:40px 0; font-size:13px; }
    .library-empty { text-align:center; color:var(--slate-400); padding:40px 0; font-size:13px; }
    .library-filter-bar { display:flex; align-items:center; gap:10px; padding:10px 24px; border-bottom:1px solid var(--slate-100); }
    .library-filter-toggle { display:flex; gap:2px; background:var(--slate-100); border-radius:6px; padding:2px; flex-shrink:0; }
    .library-filter-btn { font-family:'Lexend',sans-serif; font-size:11px; font-weight:600; padding:4px 12px; border:none; border-radius:5px; background:none; color:var(--slate-500); cursor:pointer; transition:all .12s; }
    .library-filter-btn:hover { color:var(--slate-700); }
    .library-filter-btn.active { background:white; color:var(--slate-800); box-shadow:0 1px 3px rgba(0,0,0,.08); }
    .library-search { flex:1; font-family:'Lexend',sans-serif; font-size:12px; padding:6px 10px; border:1.5px solid var(--slate-200); border-radius:6px; outline:none; color:var(--slate-700); transition:border-color .12s; }
    .library-search:focus { border-color:var(--sky-400); }
    .library-search::placeholder { color:var(--slate-400); }
    .lib-name-display { cursor:pointer; border-bottom:1px dashed transparent; transition:border-color .12s; }
    .library-filter-btn.active .lib-name-display:hover { border-bottom-color:var(--slate-400); }
    .lib-name-input { display:none; font-family:'Lexend',sans-serif; font-size:11px; font-weight:600; width:72px; padding:1px 4px; border:1.5px solid var(--sky-400); border-radius:4px; outline:none; color:var(--slate-800); background:white; }
    .save-attribution { font-size:11px; color:var(--slate-400); margin-left:4px; white-space:nowrap; }
    .library-card { display:flex; align-items:center; gap:14px; padding:12px 16px; border:1.5px solid var(--slate-200); border-radius:10px; margin-bottom:8px; cursor:pointer; transition:all .12s; }
    .library-card:hover { border-color:var(--sky-400); box-shadow:0 2px 8px rgba(14,165,233,.1); }
    .library-card-info { flex:1; min-width:0; }
    .library-card-name { font-size:14px; font-weight:600; color:var(--slate-800); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .library-card-meta { font-size:11px; color:var(--slate-400); margin-top:2px; }
    .library-card-actions { display:flex; gap:6px; flex-shrink:0; }
    .library-card-btn { font-family:'Lexend',sans-serif; font-size:11px; font-weight:600; padding:5px 10px; border-radius:6px; border:1.5px solid var(--slate-200); background:white; color:var(--slate-600); cursor:pointer; transition:all .12s; }
    .library-card-btn:hover { border-color:var(--sky-400); color:var(--sky-600); }
    .library-card-btn.remix:hover { border-color:var(--amber-400); color:var(--amber-500); }
    .library-card-btn.danger:hover { border-color:#f87171; color:#dc2626; }
    .btn-save-inline { font-family:'Lexend',sans-serif; font-size:11px; font-weight:600; padding:6px 10px; border-radius:7px; border:1.5px solid var(--sky-200); background:var(--sky-50); color:var(--sky-600); cursor:pointer; transition:all .12s; display:flex; align-items:center; gap:4px; white-space:nowrap; }
    .btn-save-inline:hover { background:var(--sky-500); color:white; border-color:var(--sky-500); }
    .btn-save-inline:hover svg { stroke:white; }
    .btn-library-save { font-family:'Lexend',sans-serif; font-size:12px; font-weight:600; padding:8px 14px; border-radius:8px; border:none; background:var(--sky-500); color:white; cursor:pointer; transition:all .12s; }
    .btn-library-save:hover { background:var(--sky-600); }
    .btn-library-save:disabled { opacity:.5; cursor:not-allowed; }

    /* Cowork Skills */
    .skills-view { background: var(--slate-50); min-height: calc(100vh - 95px); }
    .skills-category { margin-bottom: 32px; }
    .skills-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .skill-card { background: white; border: 1.5px solid var(--slate-200); border-radius: 10px; padding: 18px 20px; transition: all 0.15s; }
    .skill-card:hover { border-color: var(--sky-300); box-shadow: 0 4px 12px rgba(14,165,233,.08); }
    .skill-card-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
    .skill-name { font-size: 14px; font-weight: 700; color: var(--sky-600); font-family: 'Lexend', monospace; white-space: nowrap; }
    .skill-oneliner { font-size: 12px; font-weight: 600; color: var(--slate-700); }
    .skill-desc { font-size: 12px; color: var(--slate-500); line-height: 1.6; margin-bottom: 10px; }
    .skill-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
    .skill-examples-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-400); }
    .skill-examples code { font-family: 'Lexend', monospace; font-size: 11px; font-weight: 500; color: var(--violet-600); background: var(--violet-50); padding: 3px 8px; border-radius: 5px; white-space: nowrap; }

    /* Skills Subtab Bar */
    .skills-subtab-bar { display: flex; gap: 4px; background: var(--slate-200); border-radius: 10px; padding: 3px; margin-bottom: 20px; width: fit-content; }
    .skills-subtab-btn { font-family: 'Lexend', sans-serif; font-size: 13px; font-weight: 500; color: var(--slate-500); background: transparent; border: none; border-radius: 8px; padding: 7px 18px; cursor: pointer; transition: all 0.15s; white-space: nowrap; }
    .skills-subtab-btn:hover { color: var(--slate-700); }
    .skills-subtab-btn.active { background: white; color: var(--slate-800); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
    .skills-subtab-content { display: none; }
    .skills-subtab-content.active { display: block; }

    /* Resource Cards (Getting Started / Power Users) */
    .resource-section { margin-bottom: 28px; }
    .resource-section-header { display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; user-select: none; border-bottom: 2px solid var(--slate-200); margin-bottom: 14px; }
    .resource-section-header:hover { opacity: 0.8; }
    .resource-section-header h3 { font-size: 14px; font-weight: 700; color: var(--slate-800); margin: 0; }
    .resource-section-header p { font-size: 11px; color: var(--slate-500); margin: 2px 0 0; }
    .resource-section-chevron { font-size: 12px; color: var(--slate-400); transition: transform 0.2s; flex-shrink: 0; }
    .resource-section.collapsed .resource-section-chevron { transform: rotate(-90deg); }
    .resource-section.collapsed .resource-section-body { display: none; }
    .resource-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .resource-card { background: white; border: 1.5px solid var(--slate-200); border-radius: 10px; padding: 18px 20px; transition: all 0.15s; }
    .resource-card:hover { border-color: var(--sky-300); box-shadow: 0 4px 12px rgba(14,165,233,.08); }
    .resource-card-title { font-size: 14px; font-weight: 700; color: var(--slate-800); margin-bottom: 4px; }
    .resource-card-source { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-400); margin-bottom: 6px; }
    .resource-card-desc { font-size: 12px; color: var(--slate-500); line-height: 1.6; margin-bottom: 10px; }
    .resource-card-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--sky-600); text-decoration: none; transition: color 0.15s; }
    .resource-card-link:hover { color: var(--sky-700); }
    .resource-card-tag { display: inline-block; font-size: 10px; font-weight: 600; color: var(--emerald-600); background: var(--emerald-50); padding: 2px 8px; border-radius: 5px; margin-right: 4px; }
    .resource-card-tag.purple { color: var(--violet-600); background: var(--violet-50); }
    .resource-card-tag.amber { color: #92400e; background: #fffbeb; }
    .resource-card-tag.rose { color: #9f1239; background: #fff1f2; }
    .resource-card-tag.code { color: #0e7490; background: #ecfeff; border: 1px solid #cffafe; }
    .resource-card-tag.cowork { color: #7c3aed; background: #f5f3ff; border: 1px solid #ede9fe; }
    .resource-card.idea { background: var(--slate-50); border-style: dashed; border-color: var(--slate-300); }
    .resource-card.idea:hover { border-color: var(--slate-400); box-shadow: none; }
    .resource-card-tag.idea-tag { color: var(--slate-500); background: white; border: 1px solid var(--slate-200); }

    @media (max-width: 768px) {
      .skills-grid { grid-template-columns: 1fr; }
      .resource-grid { grid-template-columns: 1fr; }
      .skills-subtab-bar { width: 100%; }
      .skills-subtab-btn { flex: 1; text-align: center; padding: 7px 10px; font-size: 12px; }
    }

    /* ─── Field Guide ────────────────────────────────────────────────────── */
    .fieldguide-view { background: var(--slate-50); min-height: calc(100vh - 95px); }

    /* Pipeline Progress Bar */
    .fg-pipeline { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 28px; padding: 20px 12px; background: white; border: 1.5px solid var(--slate-200); border-radius: 12px; }
    .fg-pipeline-step { display: flex; align-items: center; gap: 0; cursor: pointer; }
    .fg-pipeline-node { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 10px; border-radius: 10px; transition: all 0.15s; min-width: 138px; box-sizing: border-box; }
    .fg-pipeline-node:hover { background: var(--sky-50); }
    .fg-pipeline-node.active { background: var(--sky-50); }
    .fg-pipeline-num { width: 32px; height: 32px; border-radius: 50%; background: var(--slate-100); color: var(--slate-600); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all 0.15s; border: 2px solid var(--slate-300); }
    .fg-pipeline-node:hover .fg-pipeline-num,
    .fg-pipeline-node.active .fg-pipeline-num { background: var(--sky-500); color: white; border-color: var(--sky-500); }
    .fg-pipeline-label { font-size: 11px; font-weight: 600; color: var(--slate-500); white-space: nowrap; transition: color 0.15s; }
    .fg-pipeline-node:hover .fg-pipeline-label,
    .fg-pipeline-node.active .fg-pipeline-label { color: var(--sky-700); }
    .fg-pipeline-arrow { width: 28px; height: 2px; background: var(--slate-300); position: relative; flex-shrink: 0; }
    .fg-pipeline-arrow::after { content: ''; position: absolute; right: -7px; top: 50%; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid var(--slate-400); transform: translateY(-50%); }
    .fg-pipeline-fork { width: 40px; height: 152px; flex-shrink: 0; }
    .fg-pipeline-parallel { display: flex; flex-direction: column; gap: 8px; }

    /* Brand-colored pipeline nodes in the Guide — match the Sales Pipeline slide visual */
    #fg-pip-inquiry .fg-pipeline-num,
    #fg-pip-outreach .fg-pipeline-num,
    #fg-pip-discovery .fg-pipeline-num,
    #fg-pip-scoping .fg-pipeline-num,
    #fg-pip-approvals .fg-pipeline-num {
      background: #01B1E2; color: white; border-color: #01B1E2;
    }
    #fg-pip-contract .fg-pipeline-num {
      background: #FFC600; color: #122134; border-color: #FFC600;
    }
    #fg-pip-kickoff .fg-pipeline-num {
      background: #00CD72; color: white; border-color: #00CD72;
    }
    /* Keep hover/active states consistent with each node's brand color */
    #fg-pip-inquiry .fg-pipeline-node:hover .fg-pipeline-num,
    #fg-pip-outreach .fg-pipeline-node:hover .fg-pipeline-num,
    #fg-pip-discovery .fg-pipeline-node:hover .fg-pipeline-num,
    #fg-pip-scoping .fg-pipeline-node:hover .fg-pipeline-num,
    #fg-pip-approvals .fg-pipeline-node:hover .fg-pipeline-num { background: #0095c2; border-color: #0095c2; }
    #fg-pip-contract .fg-pipeline-node:hover .fg-pipeline-num { background: #e6b200; border-color: #e6b200; }
    #fg-pip-kickoff .fg-pipeline-node:hover .fg-pipeline-num { background: #00b865; border-color: #00b865; }

    /* ─── Sales Pipeline View (pipelineView) ─────────────────────────────── */
    .pipeline-view { background: var(--slate-50); min-height: calc(100vh - 95px); }

    .plv-node {
      position: relative;
      flex-shrink: 0;
      width: 160px;
      min-height: 160px;
      background: white;
      border: 2.5px solid #01B1E2;
      border-radius: 16px;
      padding: 20px 14px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      box-shadow: 0 4px 12px rgba(1, 177, 226, 0.08);
    }
    .plv-node.plv-gold { border-color: #FFC600; box-shadow: 0 4px 12px rgba(255, 198, 0, 0.12); }
    .plv-node.plv-green { border-color: #00CD72; box-shadow: 0 4px 12px rgba(0, 205, 114, 0.1); }

    .plv-badge {
      position: absolute;
      top: -16px;
      left: 50%;
      transform: translateX(-50%);
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #01B1E2;
      color: white;
      font-size: 16px;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 3px solid white;
      box-shadow: 0 2px 8px rgba(1, 177, 226, 0.3);
    }
    .plv-node.plv-gold .plv-badge { background: #FFC600; color: #122134; box-shadow: 0 2px 8px rgba(255, 198, 0, 0.35); }
    .plv-node.plv-green .plv-badge { background: #00CD72; box-shadow: 0 2px 8px rgba(0, 205, 114, 0.3); }

    .plv-title {
      margin-top: 14px;
      font-size: 14px;
      font-weight: 700;
      color: var(--slate-800);
      line-height: 1.25;
      letter-spacing: -0.2px;
    }
    .plv-desc {
      margin-top: 8px;
      font-size: 11px;
      color: var(--slate-500);
      line-height: 1.4;
    }

    .plv-track-label {
      display: inline-block;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 10px;
      margin-top: 8px;
    }

    .plv-arrow {
      width: 28px;
      height: 3px;
      background: var(--slate-300);
      position: relative;
      flex-shrink: 0;
    }
    .plv-arrow::after {
      content: '';
      position: absolute;
      right: -7px;
      top: 50%;
      width: 0; height: 0;
      border-top: 6px solid transparent;
      border-bottom: 6px solid transparent;
      border-left: 9px solid var(--slate-400);
      transform: translateY(-50%);
    }

    .plv-fork-wrap {
      width: 60px;
      height: 300px;
      flex-shrink: 0;
    }

    .plv-parallel {
      display: flex;
      flex-direction: column;
      gap: 24px;
      position: relative;
      flex-shrink: 0;
    }

    @media (max-width: 1000px) {
      .plv-node { width: 140px; min-height: 150px; padding: 18px 12px 14px; }
      .plv-title { font-size: 13px; }
      .plv-desc { font-size: 10px; }
    }
    @media (max-width: 900px) {
      .plv-fork-wrap { display: none; }
      .plv-parallel { flex-direction: row; gap: 12px; margin-top: 24px; width: 100%; justify-content: center; }
    }
    .fg-parallel-stages { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; align-items: start; }
    @media (max-width: 900px) { .fg-parallel-stages { grid-template-columns: 1fr; } }

    /* Stage Accordion */
    .fg-stage { background: white; border: 1.5px solid var(--slate-200); border-radius: 12px; margin-bottom: 12px; overflow: hidden; transition: border-color 0.15s; }
    .fg-stage:hover { border-color: var(--slate-300); }
    .fg-stage.open { border-color: var(--sky-300); }
    .fg-stage-header { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; user-select: none; }
    .fg-stage-header:hover { background: var(--slate-50); }
    .fg-stage-num { width: 32px; height: 32px; border-radius: 50%; background: var(--slate-100); color: var(--slate-600); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.15s; }
    .fg-stage.open .fg-stage-num { background: var(--sky-500); color: white; }
    .fg-stage-title { font-size: 15px; font-weight: 700; color: var(--slate-800); }
    .fg-stage-subtitle { font-size: 12px; color: var(--slate-500); font-style: italic; margin-top: 2px; }
    .fg-stage-chevron { margin-left: auto; font-size: 14px; color: var(--slate-400); transition: transform 0.2s; flex-shrink: 0; }
    .fg-stage.open .fg-stage-chevron { transform: rotate(180deg); color: var(--sky-500); }
    .fg-stage-body { display: none; padding: 0 20px 20px; border-top: 1px solid var(--slate-100); }
    .fg-stage.open .fg-stage-body { display: block; }

    /* Stage Body Content */
    .fg-section { margin-top: 16px; }
    .fg-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-400); margin-bottom: 8px; }
    .fg-body-text { font-size: 13px; color: var(--slate-600); line-height: 1.7; margin-bottom: 12px; }

    /* Checklist */
    .fg-checklist { list-style: none; padding: 0; margin: 0 0 12px; }
    .fg-checklist li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; font-size: 13px; color: var(--slate-700); line-height: 1.5; border-radius: 8px; }
    .fg-checklist li:nth-child(odd) { background: var(--slate-50); }
    .fg-checklist-num { width: 22px; height: 22px; border-radius: 50%; background: var(--sky-100); color: var(--sky-700); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }

    /* Automation callout */
    .fg-auto { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 8px; margin-bottom: 12px; font-size: 12px; line-height: 1.6; }
    .fg-auto.auto { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
    .fg-auto.manual { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
    .fg-auto-icon { flex-shrink: 0; font-size: 14px; margin-top: 1px; }
    .fg-auto strong { font-weight: 700; }

    /* Best practices */
    .fg-practices { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px 14px; }
    .fg-practices-title { font-size: 12px; font-weight: 700; color: #166534; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
    .fg-practices ul { list-style: disc; padding-left: 18px; margin: 0; }
    .fg-practices li { font-size: 12px; color: #14532d; line-height: 1.6; }

    /* HubSpot update box */
    .fg-hubspot { display: flex; align-items: flex-start; gap: 10px; background: #fff4f0; border: 1px solid #ffb89a; border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; font-size: 12px; color: #9a3412; line-height: 1.6; }
    .fg-hubspot strong { color: #ff7a59; font-weight: 700; }

    /* Question/talk track table */
    .fg-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 12px; border: 1px solid var(--slate-200); border-radius: 8px; overflow: hidden; }
    .fg-table th { background: var(--slate-100); padding: 8px 12px; text-align: left; font-weight: 700; color: var(--slate-600); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
    .fg-table td { padding: 8px 12px; border-top: 1px solid var(--slate-100); color: var(--slate-700); vertical-align: top; line-height: 1.5; }
    .fg-table tr:hover td { background: var(--slate-50); }

    /* Tip callout */
    .fg-tip { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--sky-50); border: 1px solid var(--sky-200); border-radius: 8px; margin-bottom: 12px; font-size: 12px; color: var(--sky-800); line-height: 1.6; }

    /* Renewal callout */
    .fg-renewal { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: #f0fdfa; border: 1px solid #99f6e4; border-radius: 8px; margin-bottom: 16px; font-size: 12px; color: #134e4a; line-height: 1.6; }
    .fg-renewal strong { color: #0f766e; font-weight: 700; }

    /* Stage Appendix (collapsible deep-dive) */
    .fg-appendix { background: var(--slate-50); border: 1.5px solid var(--slate-200); border-radius: 10px; margin-top: 16px; overflow: hidden; }
    .fg-appendix-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; user-select: none; }
    .fg-appendix-header:hover { background: var(--slate-100); }
    .fg-appendix-header h4 { font-size: 13px; font-weight: 700; color: var(--slate-600); margin: 0; }
    .fg-appendix-header span.fg-appendix-hint { font-size: 11px; color: var(--slate-400); font-weight: 400; }
    .fg-appendix-chevron { margin-left: auto; font-size: 12px; color: var(--slate-400); transition: transform 0.2s; }
    .fg-appendix.open .fg-appendix-chevron { transform: rotate(180deg); }
    .fg-appendix-body { display: none; padding: 0 16px 16px; border-top: 1px solid var(--slate-200); }
    .fg-appendix.open .fg-appendix-body { display: block; }

    /* Collapsible reference box (HubSpot Quick Reference) */
    .fg-matrix { margin-top: 24px; background: white; border: 1.5px solid var(--slate-200); border-radius: 12px; overflow: hidden; }
    .fg-matrix-header { padding: 16px 20px; border-bottom: 1px solid var(--slate-200); cursor: pointer; display: flex; align-items: center; gap: 12px; user-select: none; }
    .fg-matrix-header:hover { background: var(--slate-50); }
    .fg-matrix-header h3 { font-size: 15px; font-weight: 700; color: var(--slate-800); }
    .fg-matrix-body { display: none; padding: 0 20px 20px; }
    .fg-matrix.open .fg-matrix-body { display: block; }
    .fg-matrix.open .fg-matrix-chevron { transform: rotate(180deg); }
    .fg-matrix-chevron { margin-left: auto; font-size: 14px; color: var(--slate-400); transition: transform 0.2s; }

    @media (max-width: 768px) {
      .fg-pipeline { flex-wrap: wrap; gap: 4px; padding: 12px; }
      .fg-pipeline-arrow { width: 16px; }
      .fg-pipeline-node { padding: 6px 8px; min-width: 96px; }
      .fg-pipeline-label { font-size: 10px; }
      .fg-pipeline-num { width: 26px; height: 26px; font-size: 11px; border-width: 1.5px; }
      .fg-pipeline-fork { height: 120px; }
    }

    /* Pricing Sheet */
    .pricing-view { background: var(--slate-50); min-height: calc(100vh - 95px); }
    .pricing-table { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--slate-200); border-radius: 10px; overflow: hidden; margin-bottom: 20px; font-size: 12px; }
    .pricing-table th { background: var(--slate-100); padding: 10px 14px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slate-600); border-bottom: 1px solid var(--slate-200); }
    .pricing-table td { padding: 8px 14px; border-bottom: 1px solid var(--slate-100); color: var(--slate-700); }
    .pricing-table tr:last-child td { border-bottom: none; }
    .pricing-table tr.section-header td { background: var(--sky-50); font-weight: 700; color: var(--sky-700); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; padding: 8px 14px; }

    /* Resource copy links */
    .res-link-row { display:flex; align-items:center; gap:6px; margin-top:4px; }
    .res-link-url { font-size:10px; color:var(--slate-400); word-break:break-all; line-height:1.3; font-weight:400; }
    .res-copy-btn { flex-shrink:0; background:none; border:1px solid var(--slate-200); border-radius:4px; padding:2px 5px; cursor:pointer; font-size:11px; color:var(--slate-400); line-height:1; transition:all 0.15s; }
    .res-copy-btn:hover { border-color:var(--sky-400); color:var(--sky-500); background:var(--sky-50); }
    .res-copy-btn.copied { border-color:var(--emerald-500); color:var(--emerald-500); }

    /* This Week at Playlab (Win Wire) */
    .tw-card { background: linear-gradient(135deg, var(--amber-50), var(--rose-50)); border: 1.5px solid var(--amber-400); border-radius: 14px; padding: 18px 22px 16px; margin-bottom: 20px; box-shadow: 0 1px 3px rgba(245,158,11,.10); }
    .tw-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; gap: 12px; flex-wrap: wrap; }
    .tw-title { font-size: 15px; font-weight: 700; color: var(--slate-800); display: inline-flex; align-items: center; gap: 8px; }
    .tw-emoji { font-size: 18px; line-height: 1; }
    .tw-updated { font-size: 11px; color: var(--slate-500); font-weight: 500; }
    .tw-celebrations { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; }
    .tw-win { background: white; border: 1.5px solid var(--amber-400); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; transition: transform 0.15s, box-shadow 0.15s; }
    .tw-win:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(245,158,11,.15); }
    .tw-win-lp { font-size: 14px; font-weight: 700; color: var(--slate-800); line-height: 1.2; }
    .tw-win-org { font-size: 12px; font-weight: 600; color: var(--slate-700); line-height: 1.3; }
    .tw-win-work { font-size: 11.5px; color: var(--slate-500); line-height: 1.4; font-weight: 500; }
    .tw-win-amount { font-size: 13px; font-weight: 700; color: var(--emerald-600); margin-top: 2px; }
    .tw-metrics { display: flex; flex-wrap: wrap; gap: 18px; padding-top: 12px; border-top: 1px dashed var(--amber-400); font-size: 12px; color: var(--slate-600); font-weight: 500; }
    .tw-metric { display: inline-flex; align-items: baseline; gap: 6px; }
    .tw-metric-label { color: var(--slate-500); font-size: 11px; font-weight: 500; }
    .tw-metric-value { color: var(--slate-800); font-weight: 700; font-size: 13px; }
    .tw-metric-pct { color: var(--emerald-600); font-weight: 700; }
    .tw-metric-pct.behind { color: var(--amber-500); }
    .tw-metrics-only { border-top: none; padding-top: 0; }