:root{--bg:#f5f7fb;--surface:#fff;--text:#101828;--muted:#667085;--line:#e4e7ec;--primary:#0e6655;--primary2:#14866f;--success:#168f62;--warning:#d97706;--danger:#d92d20;--shadow:0 16px 42px rgba(16,24,40,.07);--shadow-sm:0 4px 14px rgba(16,24,40,.055);--radius:20px;--shell:1280px} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Pretendard,"Noto Sans KR",system-ui,sans-serif;color:var(--text);background:var(--bg);line-height:1.55}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.shell{width:min(calc(100% - 36px),var(--shell));margin:auto}.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(228,231,236,.9)}.header-inner{min-height:70px;display:flex;align-items:center;gap:26px}.brand{display:flex;align-items:center;gap:10px;font-weight:850;font-size:21px;white-space:nowrap}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--primary);color:#fff}.nav{display:flex;align-items:center;gap:6px;flex:1}.nav a{padding:9px 11px;border-radius:10px;font-size:14px;color:#475467}.nav a:hover,.nav a.active{background:#eef8f5;color:var(--primary);font-weight:700}.header-actions{display:flex;align-items:center;gap:8px}.language-select,.button{min-height:40px;border-radius:11px;border:1px solid var(--line);background:#fff;padding:0 12px}.button{cursor:pointer;font-weight:750}.button.primary{background:var(--primary);border-color:var(--primary);color:#fff}.button.primary:hover{background:var(--primary2)}.button.soft{background:#eef8f5;color:var(--primary);border-color:#d3eee6}.mobile-toggle{display:none}.hero{padding:86px 0 60px;text-align:center;background:radial-gradient(circle at 50% 10%,#dff4ee,transparent 38%)}.eyebrow{display:inline-flex;padding:7px 11px;border-radius:999px;background:#eef8f5;color:var(--primary);font-weight:800;font-size:13px}.hero h1{font-size:clamp(44px,7vw,78px);line-height:1.02;letter-spacing:-.055em;margin:22px auto 18px;max-width:900px}.hero p{font-size:19px;color:var(--muted);max-width:700px;margin:0 auto}.hero-actions{display:flex;justify-content:center;gap:10px;margin-top:30px}.hero-actions .button{padding:0 20px;min-height:48px}.hero-grid{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}.card h3,.card h2{margin:0 0 8px}.card p{color:var(--muted);margin:0}.section{padding:68px 0}.section-heading{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:24px}.section-heading h1,.section-heading h2{font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-.04em;margin:0}.section-heading p{max-width:620px;color:var(--muted);margin:8px 0 0}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.feature-card .icon{font-size:26px;margin-bottom:14px}.page-hero{padding:48px 0 24px}.page-hero h1{font-size:44px;letter-spacing:-.04em;margin:0 0 8px}.page-hero p{color:var(--muted);max-width:720px}.workspace{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.88fr);gap:18px;padding-bottom:70px}.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}.panel-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.panel-heading h2{margin:0}.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:grid;gap:7px}.field.full{grid-column:1/-1}.field span{font-size:13px;font-weight:750;color:#344054}.field input,.field select{width:100%;min-height:46px;border:1px solid #d0d5dd;border-radius:12px;padding:0 13px;background:#fff}.field input:focus,.field select:focus{outline:3px solid #dff4ee;border-color:var(--primary)}.divider{height:1px;background:var(--line);margin:22px 0}.metric-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.metric{padding:17px;border-radius:16px;background:#f8fafc;border:1px solid var(--line)}.metric span{display:block;color:var(--muted);font-size:13px}.metric strong{display:block;font-size:25px;margin-top:5px;letter-spacing:-.03em}.metric.primary{background:#eef8f5;border-color:#cde9e0}.action-list{display:grid;gap:12px}.action{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:16px;border:1px solid var(--line);border-radius:16px}.priority{width:10px;height:42px;border-radius:10px;background:var(--warning)}.priority.danger{background:var(--danger)}.priority.success{background:var(--success)}.action h3{margin:0;font-size:16px}.action p{margin:3px 0 0;color:var(--muted);font-size:14px}.progress{height:12px;border-radius:999px;background:#eaecf0;overflow:hidden}.progress>span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),#37b58f)}.timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:18px}.timeline div{padding:14px 10px;text-align:center;border-radius:14px;background:#f8fafc;border:1px solid var(--line)}.timeline strong{display:block}.timeline small{color:var(--muted)}.placeholder{min-height:300px;display:grid;place-items:center;text-align:center}.placeholder .icon{font-size:44px}.site-footer{border-top:1px solid var(--line);padding:30px 0;background:#fff}.footer-inner{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:14px}.notice{padding:13px 15px;border-radius:13px;background:#fffaeb;color:#7a2e0e;border:1px solid #fedf89;font-size:13px}.toast{position:fixed;right:20px;bottom:20px;z-index:50;background:#101828;color:#fff;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}.hidden{display:none!important} @media(max-width:900px){.nav{display:none;position:absolute;left:18px;right:18px;top:65px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav.open{display:flex}.mobile-toggle{display:inline-flex}.language-select{max-width:110px}.workspace,.hero-grid,.feature-grid{grid-template-columns:1fr}.header-inner{gap:10px}.header-actions{margin-left:auto}.header-actions .login-link{display:none}.hero{padding-top:62px}.timeline{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.shell{width:min(calc(100% - 24px),var(--shell))}.header-inner{min-height:62px}.brand{font-size:18px}.brand-mark{width:31px;height:31px}.hero h1{font-size:45px}.hero-actions{flex-direction:column}.hero-actions .button{display:grid;place-items:center}.field-grid,.metric-grid{grid-template-columns:1fr}.page-hero h1{font-size:36px}.panel{padding:18px}.section{padding:48px 0}.footer-inner{display:grid;gap:8px}.language-select{width:92px;padding:0 7px}} /* Authentication */ .modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(16,24,40,.56);backdrop-filter:blur(7px)} .auth-modal{position:relative;width:min(100%,430px);background:#fff;border:1px solid var(--line);border-radius:26px;padding:30px;box-shadow:0 30px 90px rgba(16,24,40,.28)} .auth-modal h2{font-size:30px;letter-spacing:-.035em;margin:15px 0 5px}.auth-subtitle{color:var(--muted);margin:0 0 22px}.modal-close{position:absolute;right:18px;top:16px;border:0;background:#f2f4f7;width:38px;height:38px;border-radius:50%;font-size:24px;cursor:pointer}.auth-modal form{display:grid;gap:14px}.auth-submit{width:100%;min-height:48px;margin-top:3px}.text-button{display:block;width:100%;margin-top:16px;border:0;background:transparent;color:var(--primary);font-weight:800;cursor:pointer}.auth-message{margin-top:14px;padding:12px 13px;border-radius:12px;font-size:14px}.auth-message.error{background:#fef3f2;color:#b42318;border:1px solid #fecdca}.auth-message.success{background:#ecfdf3;color:#027a48;border:1px solid #abefc6}.account-section{padding-top:10px}.account-auth-panel{display:grid;place-items:center;text-align:center;min-height:265px}.auth-state-icon{display:grid;place-items:center;margin:0 auto 14px;width:54px;height:54px;border-radius:17px;background:#eef8f5;color:var(--primary);font-size:27px;font-weight:900}.account-auth-panel h2{font-size:25px;margin:8px 0}.account-auth-panel p{color:var(--muted);max-width:430px}.account-buttons{display:flex;justify-content:center;gap:9px;margin-top:17px}.account-email{font-weight:750;color:var(--text)!important}.status-pill{display:inline-flex;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:800}.status-pill.success{background:#ecfdf3;color:#027a48}.field-help{font-size:13px;color:var(--muted);margin-top:16px}.toast[data-type="error"]{background:#b42318} @media(max-width:600px){.auth-modal{padding:24px 19px}.account-buttons{flex-direction:column}.account-buttons .button{width:100%}} .profile-save-status{margin-top:14px;font-size:.9rem;color:var(--muted)} .profile-save-status[data-type="success"]{color:#08755f} .profile-save-status[data-type="error"]{color:#b42318} /* Phase 2: My Business */ .business-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr);gap:18px;padding-bottom:70px}.business-side{display:grid;align-content:start;gap:18px}.section-copy{margin:5px 0 0;color:var(--muted);font-size:14px}.form-section h3{margin:0 0 15px}.compact-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.channel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.check-card{position:relative;display:flex;align-items:center;justify-content:center;min-height:46px;border:1px solid #d0d5dd;border-radius:12px;background:#fff;cursor:pointer;font-size:13px;font-weight:750;text-align:center;padding:8px}.check-card input{position:absolute;opacity:0}.check-card:has(input:checked){border-color:var(--primary);background:#eef8f5;color:var(--primary);box-shadow:0 0 0 2px #dff4ee}.input-suffix{display:grid;grid-template-columns:1fr auto;align-items:center;border:1px solid #d0d5dd;border-radius:12px;overflow:hidden;background:#fff}.input-suffix input{border:0!important;border-radius:0!important}.input-suffix b{padding-right:13px;color:var(--muted)}.business-form-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:24px}.business-form-footer .profile-save-status{margin:0}.business-summary-brand{display:flex;align-items:center;gap:14px;padding:17px;border-radius:16px;background:#f8fafc;border:1px solid var(--line);margin-bottom:14px}.business-summary-brand strong,.business-summary-brand span{display:block}.business-summary-brand span{color:var(--muted);font-size:13px}.brand-avatar{display:grid;place-items:center;width:48px;height:48px;border-radius:15px;background:var(--primary);color:#fff;font-size:22px;font-weight:900}.next-card p{color:var(--muted)}.full-button{display:grid;place-items:center;width:100%;margin-top:16px}.button:disabled{opacity:.55;cursor:not-allowed} @media(max-width:1000px){.business-layout{grid-template-columns:1fr}.business-side{grid-template-columns:repeat(2,1fr)}.compact-fields{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:700px){.business-side{grid-template-columns:1fr}.channel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-fields{grid-template-columns:1fr}.business-form-footer{align-items:stretch;flex-direction:column}.business-form-footer .button{width:100%}} /* Phase 3: Products */ .product-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.products-layout{display:grid;grid-template-columns:minmax(360px,.78fr) minmax(0,1.22fr);gap:18px;padding-bottom:70px}.product-list{display:grid;gap:12px}.product-card{border:1px solid var(--line);border-radius:18px;padding:18px;background:#fff}.product-card-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.product-card-head strong,.product-card-head span{display:block}.product-card-head strong{font-size:18px}.product-card-head span{font-size:13px;color:var(--muted);margin-top:3px}.product-card-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:15px 0}.product-card-metrics div{padding:11px;border:1px solid var(--line);border-radius:12px;background:#f8fafc}.product-card-metrics span,.product-card-metrics b{display:block}.product-card-metrics span{font-size:12px;color:var(--muted)}.product-card-metrics b{margin-top:4px}.product-card-actions{display:flex;flex-wrap:wrap;gap:8px}.danger-button{color:var(--danger);border-color:#fecdca;background:#fff}.product-empty{min-height:260px;display:grid;place-items:center;align-content:center;text-align:center;color:var(--muted)}.product-empty span{font-size:45px}.form-actions{display:flex;gap:8px} @media(max-width:1050px){.products-layout{grid-template-columns:1fr}.product-summary-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:650px){.product-summary-grid{grid-template-columns:1fr 1fr}.product-card-metrics{grid-template-columns:repeat(2,1fr)}.product-card-actions .button{flex:1}.form-actions{width:100%}.form-actions .button{flex:1}} .active-product-control{display:flex;align-items:center;gap:8px;padding:5px 7px;border:1px solid var(--line,#dbe2ea);border-radius:12px;background:#fff;max-width:260px}.active-product-label{font-size:11px;font-weight:800;color:#64748b;white-space:nowrap}.active-product-control select{border:0;background:transparent;font-weight:800;min-width:105px;max-width:160px;outline:none}.active-product-control.has-active{background:#eefaf6;border-color:#b9e3d6}.active-context-card{display:flex;align-items:center;gap:14px;margin-top:-12px;margin-bottom:20px;padding:14px 18px;border:1px solid #dbe7e3;border-radius:16px;background:#f5fbf9}.active-context-card span{font-size:13px;color:#64748b}.active-context-card strong{font-size:16px}.active-context-card .button{margin-left:auto}.product-context-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px;margin-bottom:34px}@media(max-width:980px){.active-product-label{display:none}.active-product-control{max-width:170px}.active-product-control select{max-width:145px}.header-actions{gap:6px}}@media(max-width:720px){.active-product-control{order:-1;width:100%;max-width:none}.active-product-control select{max-width:none;width:100%}.active-context-card{flex-wrap:wrap}.active-context-card .button{margin-left:0;width:100%}.product-context-metrics{grid-template-columns:1fr}} #activeProductSlot:empty{display:none}#activeProductSlot{display:flex;align-items:center}.header-actions{flex-wrap:nowrap}.strategy-context-clean{font-size:16px;font-weight:700} /* Phase 6: commercial polish */ body{background:linear-gradient(180deg,#f7f9fc 0,#f3f6fa 100%);min-height:100vh} .site-header{background:rgba(255,255,255,.94);box-shadow:0 1px 0 rgba(16,24,40,.04)} .header-inner{min-height:72px;gap:22px}.brand{position:relative}.brand-edition{font-size:9px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#98a2b3;margin-left:-4px;margin-top:3px}.nav{gap:2px}.nav a{padding:9px 9px;font-size:13.5px;white-space:nowrap}.nav a.active{box-shadow:inset 0 0 0 1px #d9eee7} .language-select,.button,.active-product-control{box-shadow:var(--shadow-sm)}.account-button{border-color:#d0d5dd}.account-button:hover{border-color:#98a2b3;background:#f9fafb} .page-hero--compact{padding-top:52px;padding-bottom:22px}.page-hero--compact h1{font-size:clamp(36px,4vw,52px)}.page-hero--compact p{font-size:16px} .panel,.card{box-shadow:var(--shadow-sm);border-color:#e2e8f0}.panel{padding:26px}.panel-heading{border-bottom:1px solid #edf0f4;padding-bottom:17px;margin-bottom:20px}.panel-heading h2{font-size:22px;letter-spacing:-.025em} .field span{font-size:12.5px;color:#475467}.field input,.field select{min-height:48px;border-color:#d8dee8;transition:border .15s,box-shadow .15s,background .15s}.field input:hover,.field select:hover{border-color:#aeb8c7}.field input:focus,.field select:focus{box-shadow:0 0 0 4px rgba(14,102,85,.10);outline:none;background:#fff} .metric{background:#fafbfc;border-color:#e5e9f0;padding:18px}.metric strong{font-variant-numeric:tabular-nums}.metric.primary{background:linear-gradient(145deg,#eefaf6,#f7fcfa);border-color:#cde9e0}.result-metrics .metric{min-height:108px;display:flex;flex-direction:column;justify-content:center}.result-metrics .metric.full{grid-column:1/-1} .button{transition:transform .12s,box-shadow .12s,background .12s,border .12s}.button:hover{transform:translateY(-1px)}.button.primary{box-shadow:0 8px 18px rgba(14,102,85,.18)}.button.primary:hover{box-shadow:0 10px 24px rgba(14,102,85,.22)} .active-context-card{background:linear-gradient(90deg,#f2faf7,#fbfdfc);border-color:#cfe7df;box-shadow:var(--shadow-sm)}.active-context-card strong{font-size:17px}.active-product-control{min-height:42px;border-color:#d6e5e0}.active-product-control.has-active{background:#f0faf7} .live-badge{gap:7px}.live-dot{width:7px;height:7px;border-radius:50%;background:#12b76a;box-shadow:0 0 0 5px rgba(18,183,106,.12)}.compliance-notice{line-height:1.5;background:#fff9eb;border-color:#f8d98b} .product-summary-grid .metric{min-height:94px}.product-card{box-shadow:var(--shadow-sm);transition:transform .15s,border-color .15s,box-shadow .15s}.product-card:hover{transform:translateY(-2px);border-color:#cbd5e1;box-shadow:0 12px 28px rgba(16,24,40,.09)}.product-card-head strong{font-size:19px}.products-layout>.panel:first-child{position:sticky;top:92px;align-self:start} .strategy-grid{align-items:stretch}.strategy-card{position:relative;min-height:290px;display:flex;flex-direction:column}.strategy-card p{flex:1}.strategy-card--recommended{border:2px solid #84cdb8!important;background:linear-gradient(180deg,#fff 0,#f4fbf8 100%);transform:translateY(-6px)}.strategy-card--recommended:before{content:'★';position:absolute;right:18px;top:17px;color:#0e6655;font-size:18px} .decision-grid .decision-card{min-height:220px;display:flex;flex-direction:column}.decision-grid .decision-card h2{font-size:22px;line-height:1.35;flex:1}.decision-grid .button{align-self:flex-start;margin-top:16px} .site-footer{margin-top:20px;background:rgba(255,255,255,.9)}.footer-inner strong{color:#344054} .calculator-empty-price #margin{color:#98a2b3} @media(max-width:1120px){.brand-edition{display:none}.nav a{padding:8px 7px;font-size:13px}.header-inner{gap:13px}.active-product-control{max-width:210px}.language-select{max-width:105px}} @media(max-width:900px){.products-layout>.panel:first-child{position:static}.strategy-card--recommended{transform:none}.header-inner{min-height:66px}} /* Phase 7 — commercial product workspace */ .product-page-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.hero-quick-actions{display:flex;gap:10px;flex-wrap:wrap}.hero-quick-actions .button{display:inline-flex;align-items:center;gap:7px}.product-summary-grid--six{grid-template-columns:repeat(6,minmax(0,1fr))}.products-layout--commercial{grid-template-columns:minmax(380px,.72fr) minmax(0,1.28fr);align-items:start}.product-form--grouped{padding:0;overflow:hidden}.product-form-heading{padding:24px 24px 20px;margin:0;border-bottom:1px solid var(--line)}.panel-kicker{display:block;margin-bottom:6px;font-size:11px;font-weight:850;letter-spacing:.1em;color:var(--primary)}.compact-button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.form-section{padding:22px 24px;border-bottom:1px solid var(--line)}.form-section--last{border-bottom:0}.form-section-heading{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}.form-section-heading h3{margin:0 0 3px;font-size:15px}.form-section-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.45}.form-section-icon{display:grid;place-items:center;flex:0 0 30px;height:30px;border-radius:9px;background:#eef8f5;color:var(--primary);font-size:11px;font-weight:850}.product-form-footer{padding:18px 24px 22px;background:#fbfcfd;border-top:1px solid var(--line)}.product-workspace-column{display:grid;gap:18px;min-width:0}.product-list-panel--compact{min-height:auto}.count-badge{display:grid;place-items:center;min-width:34px;height:34px;padding:0 10px;border-radius:999px;background:#eef8f5;color:var(--primary);font-size:13px;font-weight:850}.product-card--commercial{padding:20px}.product-title-block{display:flex;align-items:center;gap:12px}.product-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,#e7f7f2,#f7fbfa);border:1px solid #cfe7df;color:var(--primary);font-weight:900}.product-card-head strong{font-size:18px}.status-pill.loss{background:#fff4f3;color:#b42318;border-color:#fecdca}.product-card-metrics--six{grid-template-columns:repeat(6,minmax(0,1fr))}.product-card-metrics--six div{min-width:0}.product-card-metrics--six b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.product-card-actions--commercial .button{display:inline-flex;align-items:center;gap:6px}.product-empty--commercial{min-height:220px;border:1px dashed #d6dde7;border-radius:16px;background:#fbfcfd}.product-empty--commercial strong{margin-top:10px;color:var(--text)}.product-empty--commercial p{margin:5px 0 0}.workspace-support-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.insight-panel,.quick-actions-panel{padding:20px;box-shadow:var(--shadow-sm)}.support-panel-heading{display:flex;gap:11px;align-items:flex-start;margin-bottom:16px}.support-panel-heading h3{margin:0 0 4px;font-size:16px}.support-panel-heading p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}.support-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:#eef8f5;color:var(--primary);font-weight:850}.insight-state{display:flex;gap:11px;align-items:flex-start;padding:14px;border-radius:14px;background:#f7faf9;border:1px solid var(--line)}.insight-state strong{display:block;font-size:14px}.insight-state p{margin:4px 0 0;color:var(--muted);font-size:12px;line-height:1.5}.insight-dot{flex:0 0 9px;height:9px;margin-top:5px;border-radius:50%;background:var(--success)}.insight-state--warning .insight-dot{background:var(--warning)}.insight-state--danger .insight-dot{background:var(--danger)}.quick-action-list{display:grid;gap:8px}.quick-action-link{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 13px;border:1px solid var(--line);border-radius:12px;background:#fbfcfd;transition:.15s}.quick-action-link:hover{border-color:#b9d9cf;background:#f4faf8;transform:translateY(-1px)}.quick-action-link span{font-size:12px;color:var(--muted)}.quick-action-link b{font-size:12px;color:var(--primary)} @media(max-width:1250px){.product-summary-grid--six{grid-template-columns:repeat(3,1fr)}.product-card-metrics--six{grid-template-columns:repeat(3,1fr)}} @media(max-width:1050px){.products-layout--commercial{grid-template-columns:1fr}.product-page-hero{align-items:flex-start}.products-layout>.panel:first-child{position:static}.product-form--grouped{order:1}.product-workspace-column{order:2}} @media(max-width:720px){.product-page-hero{display:block}.hero-quick-actions{margin-top:18px}.hero-quick-actions .button{flex:1;justify-content:center}.product-summary-grid--six{grid-template-columns:repeat(2,1fr)}.workspace-support-grid{grid-template-columns:1fr}.product-card-metrics--six{grid-template-columns:repeat(2,1fr)}.form-section,.product-form-heading,.product-form-footer{padding-left:18px;padding-right:18px}} /* Google-style product-name autocomplete */ .product-search-field{position:relative;z-index:35} .product-search-box{position:relative;display:flex;align-items:center} .product-search-box input{width:100%;min-height:52px;padding-left:3rem!important;padding-right:3rem!important;border-radius:16px!important;background:#fff;transition:border-color .15s ease,box-shadow .15s ease} .product-search-box input:focus{border-color:#9dbab1!important;box-shadow:0 0 0 4px rgba(16,119,92,.08)!important} .product-search-icon{position:absolute;left:1rem;z-index:2;width:1.2rem;height:1.2rem;color:#657084;pointer-events:none} .product-search-icon::before{content:"";position:absolute;width:.62rem;height:.62rem;border:2px solid currentColor;border-radius:50%;left:.05rem;top:.05rem} .product-search-icon::after{content:"";position:absolute;width:.45rem;height:2px;background:currentColor;transform:rotate(45deg);left:.68rem;top:.78rem;border-radius:2px} .product-search-clear{position:absolute;right:.7rem;width:2rem;height:2rem;border:0;border-radius:999px;background:transparent;color:#59635f;font-size:1.45rem;line-height:1;cursor:pointer} .product-search-clear:hover{background:#eef3f1} .product-suggestion-panel{position:absolute;top:78px;left:0;right:0;z-index:100;background:#fff;border:1px solid #dfe5e2;border-radius:22px;box-shadow:0 18px 52px rgba(20,35,30,.18);padding:.55rem 0;max-height:510px;overflow:auto} .product-suggestion-item{width:100%;display:grid;grid-template-columns:2.1rem minmax(0,1fr) auto;gap:.55rem;align-items:center;min-height:47px;padding:.6rem 1rem;border:0;background:#fff;text-align:left;font:inherit;color:#202124;cursor:pointer} .product-suggestion-item:hover,.product-suggestion-item.active{background:#f1f3f4} .product-suggestion-item .suggestion-name{font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .product-suggestion-item .suggestion-name strong{font-weight:800;color:#111827} .product-suggestion-item small{font-size:.7rem;color:#08775f;background:#e6f6f0;border-radius:999px;padding:.2rem .48rem;white-space:nowrap} .suggestion-search-icon{position:relative;width:1.15rem;height:1.15rem;color:#66716d;display:block} .suggestion-search-icon::before{content:"";position:absolute;width:.54rem;height:.54rem;border:2px solid currentColor;border-radius:50%;left:.03rem;top:.03rem} .suggestion-search-icon::after{content:"";position:absolute;width:.42rem;height:2px;background:currentColor;transform:rotate(45deg);left:.61rem;top:.68rem;border-radius:2px} .popular-products-block{margin-top:.8rem;padding:.85rem;border:1px solid #e2ebe8;border-radius:14px;background:#f8fbfa} .popular-products-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:.65rem} .popular-products-heading span{font-size:.82rem;font-weight:850}.popular-products-heading small{font-size:.7rem;color:#77837f} .popular-product-chips{display:flex;gap:.45rem;flex-wrap:wrap} .popular-product-chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid #d9e6e1;background:#fff;border-radius:999px;padding:.48rem .7rem;font:inherit;font-size:.78rem;cursor:pointer;color:#34413c} .popular-product-chip:hover{border-color:#7fc9b5;background:#edf8f4;color:#076c57} .popular-product-chip span{display:grid;place-items:center;min-width:1.15rem;height:1.15rem;border-radius:50%;background:#edf4f1;color:#08775f;font-size:.66rem;font-weight:900} @media(max-width:700px){.product-suggestion-panel{top:75px;left:-.2rem;right:-.2rem;border-radius:18px;max-height:420px}.product-suggestion-item{min-height:45px;padding:.58rem .85rem}.popular-products-block{padding:.7rem}} /* Phase 10 — Modern horizontal commercial workspace */ :root{--shell:1480px;--radius:18px;--shadow:0 18px 48px rgba(15,23,42,.065);--shadow-sm:0 8px 24px rgba(15,23,42,.05)} body{background:linear-gradient(180deg,#f8fafc 0,#f4f7fa 52%,#f7f9fb 100%)} .site-header{background:rgba(255,255,255,.94);border-bottom:1px solid rgba(15,23,42,.07);box-shadow:0 1px 0 rgba(255,255,255,.65)} .header-inner{min-height:64px;gap:20px} .brand{font-size:20px;letter-spacing:-.025em}.brand-mark{width:32px;height:32px;border-radius:10px}.brand-edition{font-size:.58rem;letter-spacing:.14em;color:#98a2b3} .nav{gap:2px;white-space:nowrap}.nav a{padding:8px 9px;font-size:.86rem;font-weight:650;color:#475467}.nav a.active{background:#ecf8f4;color:#08745e} .header-actions{gap:10px;min-width:0}.language-select{height:38px;min-width:126px;border-radius:10px;padding:0 34px 0 12px;background-color:#fff;border-color:#dfe4ea} .account-text-link{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 5px;border:0;background:transparent;color:#1d2939;font-weight:750;white-space:nowrap;line-height:1;writing-mode:horizontal-tb;text-orientation:mixed;border-radius:8px} .account-text-link:hover{color:var(--primary);background:transparent} #activeProductSlot{min-width:0}.active-product-control{max-width:220px} .product-page-hero{padding-top:44px;padding-bottom:26px}.product-page-hero h1{font-size:clamp(2rem,3.2vw,3.25rem);letter-spacing:-.055em} .product-summary-grid--six{gap:12px}.metric{min-height:94px;border-radius:16px;padding:18px 20px;background:rgba(255,255,255,.88)} .products-layout--commercial{grid-template-columns:minmax(520px, .86fr) minmax(660px,1.14fr);gap:18px;align-items:start} .product-form--grouped{position:relative;top:auto;max-height:none;overflow:visible;border-radius:20px} .product-workspace-column{min-width:0}.product-list-panel--compact{min-height:480px} .form-section{padding:24px 26px}.product-form-heading{padding:24px 26px}.form-section-heading{margin-bottom:18px}.field-grid{gap:15px 14px}.compact-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.compact-fields .field.full{grid-column:1/-1} .product-search-box{height:52px;border-radius:14px}.product-search-box input{font-size:1rem} .product-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.product-card{margin:0;min-width:0} .workspace-support-grid{grid-template-columns:1fr 1fr;gap:16px} /* Premium Google-like product intelligence dropdown */ .product-search-field{position:relative;z-index:18} .product-suggestion-panel{left:0;right:auto;width:min(680px,calc(100vw - 54px));top:79px;max-height:570px;border:1px solid rgba(15,23,42,.09);border-radius:22px;padding:10px;background:rgba(255,255,255,.985);box-shadow:0 26px 80px rgba(15,23,42,.18),0 4px 14px rgba(15,23,42,.06);backdrop-filter:blur(22px)} .suggestion-section{padding:6px 4px 4px}.suggestion-section+.suggestion-section{border-top:1px solid #eef1f4;margin-top:7px;padding-top:12px}.suggestion-section-title{display:flex;align-items:center;justify-content:space-between;padding:0 12px 8px;color:#667085;font-size:.73rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.suggestion-section-title small{font-size:.68rem;font-weight:650;letter-spacing:0;text-transform:none;color:#98a2b3} .product-suggestion-item{width:100%;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:58px;padding:8px 12px;border:0;border-radius:13px;background:transparent;text-align:left;cursor:pointer;color:#182230} .product-suggestion-item:hover,.product-suggestion-item.active{background:#f2f7f5} .suggestion-product-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#edf7f4;color:#08775f;font-size:1.05rem;font-weight:800} .suggestion-copy{min-width:0}.suggestion-name{display:block;font-size:.95rem;font-weight:760;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.suggestion-name strong{color:#08775f;font-weight:900}.suggestion-meta{display:flex;align-items:center;gap:7px;margin-top:2px;color:#7b8492;font-size:.73rem}.suggestion-badge{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:#fff4e6;color:#b54708;font-size:.66rem;font-weight:800;white-space:nowrap}.suggestion-badge.ai{background:#f1ecff;color:#6941c6}.suggestion-badge.mine{background:#eaf8f1;color:#08775f}.suggestion-arrow{color:#98a2b3;font-size:1rem} .product-search-box.is-open{border-color:#79cbb8;box-shadow:0 0 0 4px rgba(20,134,111,.11)} .popular-products-block{margin-top:14px;border-radius:14px;background:#f7faf9;border:1px solid #e8f0ed} @media(max-width:1260px){.nav a{padding:8px 6px;font-size:.8rem}.products-layout--commercial{grid-template-columns:minmax(430px,.9fr) minmax(520px,1.1fr)}.product-list{grid-template-columns:1fr}.active-product-control{max-width:180px}} @media(max-width:980px){.products-layout--commercial{grid-template-columns:1fr}.product-list{grid-template-columns:repeat(2,minmax(0,1fr))}.product-suggestion-panel{width:min(680px,calc(100vw - 64px))}.header-inner{flex-wrap:wrap;padding:9px 0}.nav{order:3;width:100%;overflow:auto}.header-actions{margin-left:auto}} @media(max-width:700px){.product-list{grid-template-columns:1fr}.compact-fields{grid-template-columns:1fr 1fr}.workspace-support-grid{grid-template-columns:1fr}.product-suggestion-panel{top:76px;left:-4px;right:auto;width:calc(100vw - 32px);border-radius:18px}.product-suggestion-item{grid-template-columns:36px minmax(0,1fr) auto}.suggestion-product-icon{width:34px;height:34px}.language-select{min-width:104px}.account-text-link{height:36px}} /* Phase 11 — compact header controls + persistent light/dark theme */ :root{ --header-bg:rgba(255,255,255,.94); --field-bg:#fff; --soft-bg:#f8fafc; --soft-primary:#eef8f5; --overlay-bg:rgba(255,255,255,.985); --body-gradient:linear-gradient(180deg,#f8fafc 0,#f4f7fa 52%,#f7f9fb 100%); --focus-ring:rgba(20,134,111,.11); } html[data-theme="dark"]{ --bg:#0b1118; --surface:#121a24; --text:#eef4f7; --muted:#9aa8b6; --line:#263342; --primary:#35c49a; --primary2:#45d8ac; --success:#48d597; --warning:#f5aa42; --danger:#ff756b; --shadow:0 18px 48px rgba(0,0,0,.28); --shadow-sm:0 8px 24px rgba(0,0,0,.22); --header-bg:rgba(11,17,24,.92); --field-bg:#101923; --soft-bg:#151f2b; --soft-primary:#12332d; --overlay-bg:rgba(16,25,35,.985); --body-gradient:linear-gradient(180deg,#0b1118 0,#0d151e 52%,#0b121a 100%); --focus-ring:rgba(53,196,154,.17); } body{background:var(--body-gradient);transition:background .2s ease,color .2s ease} .site-header{background:var(--header-bg);border-color:var(--line);transition:background .2s ease,border-color .2s ease} .header-inner{gap:18px;flex-wrap:nowrap} .header-actions{gap:8px;flex:0 0 auto;white-space:nowrap} #activeProductSlot{flex:0 1 232px;min-width:170px}.active-product-control{width:100%;max-width:232px} .compact-language-select{width:104px!important;min-width:104px!important;max-width:104px!important;height:36px!important;min-height:36px!important;padding:0 29px 0 10px!important;font-size:13px!important;border-radius:10px!important} .theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;min-width:38px;padding:0 9px;border:1px solid var(--line);border-radius:10px;background:var(--field-bg);color:var(--text);cursor:pointer;font:inherit;font-size:12px;font-weight:800;transition:.16s ease} .theme-toggle:hover{border-color:#7fc9b5;transform:translateY(-1px)} .theme-toggle-icon{font-size:16px;line-height:1}.theme-toggle-label{display:none} .account-text-link{height:36px;padding:0 4px;color:var(--text)} .language-select,.button,.field input,.field select,.product-search-box input,.check-card{background:var(--field-bg);color:var(--text);border-color:var(--line)} .panel,.card,.metric,.product-card,.product-list-panel,.product-form--grouped,.workspace-support-card,.auth-modal,.account-auth-panel,.business-side .panel{background:var(--surface);border-color:var(--line)} .metric,.timeline div,.product-card-metric,.portfolio-insight,.quick-action,.empty-state{background:var(--soft-bg)} .nav a{color:var(--muted)}.nav a:hover,.nav a.active{background:var(--soft-primary);color:var(--primary)} .site-footer{background:var(--surface);border-color:var(--line)} .divider,.suggestion-section+.suggestion-section{background:var(--line);border-color:var(--line)} .product-suggestion-panel{background:var(--overlay-bg);border-color:var(--line)} .product-suggestion-item{color:var(--text)} .product-suggestion-item:hover,.product-suggestion-item.active{background:var(--soft-bg)} .popular-products-block{background:var(--soft-bg);border-color:var(--line)} .popular-product-chip{background:var(--field-bg);border-color:var(--line);color:var(--text)} .notice{background:color-mix(in srgb,var(--warning) 13%,var(--surface));color:var(--text);border-color:color-mix(in srgb,var(--warning) 45%,var(--line))} html[data-theme="dark"] .hero{background:radial-gradient(circle at 50% 10%,rgba(53,196,154,.13),transparent 40%)} html[data-theme="dark"] .brand-mark{color:#072019} html[data-theme="dark"] .button.soft,html[data-theme="dark"] .eyebrow{background:var(--soft-primary);border-color:#245447;color:#7ce3c4} html[data-theme="dark"] .field input:focus,html[data-theme="dark"] .field select:focus{outline-color:var(--focus-ring);border-color:var(--primary)} html[data-theme="dark"] input::placeholder{color:#718092} html[data-theme="dark"] select{color-scheme:dark} html[data-theme="dark"] .suggestion-badge{background:#402d16;color:#ffc06a} html[data-theme="dark"] .suggestion-badge.ai{background:#30264c;color:#c8b4ff} html[data-theme="dark"] .suggestion-badge.mine{background:#15372e;color:#70dfbd} @media(max-width:1320px){ .header-inner{gap:12px}.nav a{padding:8px 6px;font-size:.79rem} #activeProductSlot{flex-basis:195px;min-width:150px}.active-product-control{max-width:195px} .compact-language-select{width:92px!important;min-width:92px!important;max-width:92px!important} } @media(max-width:1080px){ .header-inner{flex-wrap:wrap;padding:8px 0}.nav{order:3;width:100%;overflow-x:auto} .header-actions{margin-left:auto}.theme-toggle-label{display:none} } @media(max-width:700px){ #activeProductSlot{display:none}.compact-language-select{width:82px!important;min-width:82px!important;max-width:82px!important;padding-left:8px!important} .theme-toggle{padding:0;width:36px}.account-text-link{padding:0 2px} } /* Phase 12 — dark-mode surface consistency fix */ html[data-theme="dark"] .product-empty--commercial, html[data-theme="dark"] .product-empty, html[data-theme="dark"] .empty-state, html[data-theme="dark"] .placeholder, html[data-theme="dark"] .product-form-footer, html[data-theme="dark"] .quick-action-link, html[data-theme="dark"] .insight-state, html[data-theme="dark"] .product-card-metrics div, html[data-theme="dark"] .product-card-metric, html[data-theme="dark"] .business-summary-brand, html[data-theme="dark"] .active-product-control, html[data-theme="dark"] .active-context-card, html[data-theme="dark"] .danger-button, html[data-theme="dark"] .check-card, html[data-theme="dark"] .input-suffix, html[data-theme="dark"] .auth-modal, html[data-theme="dark"] .nav, html[data-theme="dark"] .metric.primary { background:#151f2b !important; color:var(--text) !important; border-color:#2a3949 !important; } html[data-theme="dark"] .product-empty--commercial { background:linear-gradient(180deg,#151f2b 0%,#121b26 100%) !important; border-color:#344558 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.025); } html[data-theme="dark"] .product-empty--commercial strong, html[data-theme="dark"] .product-empty--commercial h3, html[data-theme="dark"] .product-empty strong, html[data-theme="dark"] .empty-state strong { color:#eef4f7 !important; } html[data-theme="dark"] .product-empty--commercial p, html[data-theme="dark"] .product-empty p, html[data-theme="dark"] .empty-state p { color:#9aa8b6 !important; } html[data-theme="dark"] .product-empty--commercial span, html[data-theme="dark"] .product-empty span, html[data-theme="dark"] .empty-state .icon { color:#8292a5 !important; filter:none !important; } html[data-theme="dark"] .quick-action-link:hover { background:#1a2734 !important; border-color:#3b7868 !important; } html[data-theme="dark"] .insight-state { background:#141f29 !important; } html[data-theme="dark"] .product-form-footer { background:#101923 !important; } html[data-theme="dark"] .metric.primary { background:linear-gradient(145deg,#15372f,#17252d) !important; border-color:#2f6558 !important; } html[data-theme="dark"] .metric.primary strong { color:#74dfbf !important; } html[data-theme="dark"] .danger-button { background:#21191d !important; border-color:#704047 !important; color:#ff9188 !important; } html[data-theme="dark"] .count-badge, html[data-theme="dark"] .form-section-icon, html[data-theme="dark"] .support-icon { background:#17342e !important; color:#77e1c2 !important; border-color:#285b4f !important; } html[data-theme="dark"] .status-pill.loss { background:#2b1b20 !important; color:#ff958d !important; border-color:#704047 !important; } /* Phase 13 — Seller OS navy dark system + polished interaction states */ html[data-theme="dark"]{ --bg:#07111d; --surface:#0d1926; --surface-elevated:#111f2e; --surface-muted:#0a1622; --text:#f3f7fb; --muted:#91a3b7; --line:#223448; --primary:#43d6a8; --primary2:#66e3bd; --success:#45d59f; --warning:#f1b65a; --danger:#ff7b76; --header-bg:rgba(6,15,25,.94); --field-bg:#0b1723; --soft-bg:#101d2b; --soft-primary:#0d2d29; --overlay-bg:rgba(9,20,31,.985); --body-gradient:radial-gradient(circle at 50% -18%,rgba(34,89,118,.20),transparent 42%),linear-gradient(180deg,#07111d 0%,#091522 48%,#07111d 100%); --focus-ring:rgba(67,214,168,.18); --shadow:0 22px 64px rgba(0,0,0,.34); --shadow-sm:0 10px 32px rgba(0,0,0,.26); } html[data-theme="dark"] body{background:var(--body-gradient);background-attachment:fixed} html[data-theme="dark"] .site-header{background:var(--header-bg);box-shadow:0 1px 0 rgba(255,255,255,.025)} html[data-theme="dark"] .panel, html[data-theme="dark"] .card, html[data-theme="dark"] .metric, html[data-theme="dark"] .product-card, html[data-theme="dark"] .product-list-panel, html[data-theme="dark"] .product-form--grouped, html[data-theme="dark"] .workspace-support-card, html[data-theme="dark"] .insight-panel, html[data-theme="dark"] .quick-actions-panel{ background:linear-gradient(180deg,#0f1b28 0%,#0c1824 100%) !important; border-color:#22364a !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 12px 38px rgba(0,0,0,.16); } html[data-theme="dark"] .metric{background:linear-gradient(180deg,#111e2c,#0e1a27)!important} html[data-theme="dark"] .metric.primary{background:linear-gradient(145deg,#102b29,#11202b)!important;border-color:#315d54!important} html[data-theme="dark"] .product-empty--commercial, html[data-theme="dark"] .product-empty, html[data-theme="dark"] .empty-state, html[data-theme="dark"] .placeholder{ background:linear-gradient(180deg,#0d1a27 0%,#0a1622 100%) !important; border-color:#294056 !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.018) !important; } html[data-theme="dark"] .quick-action-link, html[data-theme="dark"] .product-card-metric, html[data-theme="dark"] .product-card-metrics div, html[data-theme="dark"] .portfolio-insight, html[data-theme="dark"] .insight-state, html[data-theme="dark"] .popular-products-block, html[data-theme="dark"] .product-form-footer, html[data-theme="dark"] .business-summary-brand, html[data-theme="dark"] .active-context-card{ background:#0b1723 !important; border-color:#22384c !important; } html[data-theme="dark"] .field input, html[data-theme="dark"] .field select, html[data-theme="dark"] .product-search-box, html[data-theme="dark"] .product-search-box input, html[data-theme="dark"] .language-select, html[data-theme="dark"] .compact-language-select, html[data-theme="dark"] .active-product-control, html[data-theme="dark"] .theme-toggle{ background:#0a1622 !important; border-color:#253b50 !important; color:#eef5f9 !important; } html[data-theme="dark"] .field input:hover, html[data-theme="dark"] .field select:hover, html[data-theme="dark"] .product-search-box:hover, html[data-theme="dark"] .language-select:hover, html[data-theme="dark"] .active-product-control:hover{border-color:#36536c!important} html[data-theme="dark"] .field input:focus, html[data-theme="dark"] .field select:focus, html[data-theme="dark"] .product-search-box:focus-within{border-color:#46cfa6!important;box-shadow:0 0 0 4px rgba(67,214,168,.10)!important} html[data-theme="dark"] .product-suggestion-panel{ background:linear-gradient(180deg,#101e2c 0%,#0c1824 100%)!important; border-color:#2a4258!important; box-shadow:0 28px 70px rgba(0,0,0,.48)!important; } html[data-theme="dark"] .suggestion-section-title{color:#8ea3b7} html[data-theme="dark"] .product-suggestion-item:hover, html[data-theme="dark"] .product-suggestion-item.active{background:#152638!important} html[data-theme="dark"] .suggestion-product-icon{background:#122635!important;border-color:#2a4b5e!important;color:#6be0bc!important} html[data-theme="dark"] .suggestion-arrow{color:#678096} html[data-theme="dark"] .popular-product-chip{background:#0e1a27!important;border-color:#263d52!important} html[data-theme="dark"] .popular-product-chip:hover{background:#142536!important;border-color:#3c6a67!important;transform:translateY(-1px)} html[data-theme="dark"] .button.primary{background:linear-gradient(135deg,#27bb8e,#52d9ae);box-shadow:0 10px 24px rgba(39,187,142,.18)} html[data-theme="dark"] .button.primary:hover{filter:brightness(1.06);transform:translateY(-1px)} html[data-theme="dark"] .button.soft{background:#0d2928!important;border-color:#285c52!important;color:#75e2c2!important} html[data-theme="dark"] .button.soft:hover{background:#123630!important;border-color:#3a7a6a!important} html[data-theme="dark"] .quick-action-link:hover{background:#122638!important;border-color:#3c6a67!important} html[data-theme="dark"] .count-badge{background:#e9f7f2!important;color:#08755b!important;border-color:#c9ebdf!important} html[data-theme="dark"] .recent-search-note{color:#8ea3b7} html[data-theme="dark"] .recent-clear-button{color:#69d9b8} /* Recent searches and professional search affordances */ .suggestion-section-title-actions{display:flex;align-items:center;gap:10px} .recent-clear-button{border:0;background:transparent;padding:0;color:var(--primary);font:inherit;font-size:.72rem;font-weight:800;cursor:pointer} .recent-clear-button:hover{text-decoration:underline} .search-shortcut-hint{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 7px;border:1px solid var(--line);border-radius:7px;color:var(--muted);font-size:.7rem;font-weight:800;background:var(--soft-bg)} .product-search-box:focus-within .search-shortcut-hint{display:none} /* Phase 14 dashboard, validation and history */ .dashboard-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.dashboard-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:18px}.metric-card{padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}.metric-card span,.metric-card small{display:block;color:var(--muted)}.metric-card strong{display:block;font-size:1.65rem;margin:8px 0}.metric-card small{font-size:.78rem}.dashboard-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;margin-bottom:48px}.dashboard-priority{grid-row:span 1}.priority-list,.history-list{display:grid;gap:10px}.priority-item,.history-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);text-decoration:none;color:inherit}.priority-item>span{width:9px;height:9px;border-radius:50%;flex:none}.priority-item--danger>span{background:#ef4444}.priority-item--warning>span{background:#f59e0b}.priority-item--success>span{background:#34d399}.priority-item div{flex:1}.priority-item p,.history-row span,.history-row small{display:block;color:var(--muted);font-size:.82rem;margin-top:3px}.history-row>div:last-child{text-align:right}.best-product-card{display:grid;gap:18px}.best-product-head{display:flex;align-items:center;gap:12px}.best-product-head>span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--primary-soft);color:var(--primary);font-weight:800}.best-product-head small{display:block;color:var(--muted);margin-top:4px}.best-product-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.best-product-metrics div{padding:12px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px}.best-product-metrics span{display:block;color:var(--muted);font-size:.78rem}.best-product-metrics b{display:block;margin-top:5px}.quick-action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.quick-action-grid a{padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);color:inherit;text-decoration:none}.quick-action-grid span{display:block;color:var(--muted);font-size:.82rem;margin-top:5px}.dashboard-empty{padding:24px;border:1px dashed var(--border);border-radius:14px;color:var(--muted);text-align:center;background:var(--surface-2)}.calculation-history-panel{margin-top:18px;margin-bottom:48px}.calculator-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.form-status[data-type="error"],#productStatus[data-type="error"]{color:#ef4444}.form-status[data-type="success"],#productStatus[data-type="success"]{color:#34d399} @media(max-width:1100px){.dashboard-kpis{grid-template-columns:repeat(3,1fr)}.dashboard-grid{grid-template-columns:1fr}} @media(max-width:680px){.dashboard-hero{display:block}.dashboard-hero .hero-actions{margin-top:18px}.dashboard-kpis{grid-template-columns:repeat(2,1fr)}.best-product-metrics,.quick-action-grid{grid-template-columns:1fr}.calculator-actions{grid-template-columns:1fr}} /* Phase 15 — public landing page for guests, command center for members */ .home-auth-pending #guestHome,.home-auth-pending #memberHome{display:none!important} .guest-home{overflow:hidden}.landing-hero{min-height:690px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(540px,1.15fr);align-items:center;gap:64px;padding-top:72px;padding-bottom:74px}.landing-copy h1{font-size:clamp(3.1rem,5.5vw,5.8rem);line-height:.98;letter-spacing:-.065em;margin:18px 0 24px;max-width:760px}.landing-copy h1 em{font-style:normal;color:var(--primary)}.landing-copy>p{font-size:1.13rem;line-height:1.75;color:var(--muted);max-width:650px}.landing-actions{display:flex;gap:12px;align-items:center;margin-top:32px}.landing-actions .button{min-height:48px;padding:0 22px}.landing-trust-row{display:flex;flex-wrap:wrap;gap:10px 18px;margin-top:24px;color:var(--muted);font-size:.82rem}.landing-visual{position:relative;min-width:0}.landing-preview-glow{position:absolute;inset:6% 8%;background:radial-gradient(circle,rgba(53,196,154,.27),transparent 68%);filter:blur(42px)}.landing-preview-frame{position:relative;border:1px solid color-mix(in srgb,var(--line) 75%,transparent);background:var(--surface);border-radius:24px;padding:10px;box-shadow:0 40px 110px rgba(0,0,0,.32);transform:perspective(1600px) rotateY(-5deg) rotateX(1deg);overflow:hidden}.landing-preview-frame img{display:block;width:100%;height:auto;border-radius:14px}.preview-window-bar{height:38px;display:flex;align-items:center;gap:7px;padding:0 10px;color:var(--muted);font-size:.72rem}.preview-window-bar i{width:8px;height:8px;border-radius:50%;background:#425367}.preview-window-bar i:first-child{background:#ff746c}.preview-window-bar i:nth-child(2){background:#f6bd5a}.preview-window-bar i:nth-child(3){background:#45ce91}.preview-window-bar span{margin-left:6px}.landing-proof{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:90px}.landing-proof article{padding:20px 22px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,transparent);border-radius:18px}.landing-proof strong,.landing-proof span{display:block}.landing-proof span{color:var(--muted);font-size:.84rem;margin-top:7px}.landing-section{padding-top:38px;padding-bottom:96px}.landing-section-heading{max-width:780px;margin-bottom:36px}.landing-section-heading h2,.landing-product-story h2,.landing-cta h2{font-size:clamp(2.2rem,4vw,4rem);line-height:1.08;letter-spacing:-.045em;margin:16px 0}.landing-section-heading p,.landing-cta p{color:var(--muted);font-size:1rem}.landing-feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.landing-feature-grid article{min-height:230px;padding:26px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 78%,var(--bg)));transition:.2s ease}.landing-feature-grid article:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--primary) 48%,var(--line))}.feature-number{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--soft-primary);color:var(--primary);font-size:.78rem;font-weight:900}.landing-feature-grid h3{font-size:1.25rem;margin:34px 0 10px}.landing-feature-grid p{color:var(--muted);line-height:1.65}.landing-product-story{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;padding-bottom:96px}.story-panel,.story-score-card{border:1px solid var(--line);border-radius:26px;background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--surface) 75%,var(--bg)));padding:38px}.story-steps{display:grid;gap:12px;margin-top:30px}.story-steps>div{display:flex;align-items:center;gap:15px;padding:16px;border:1px solid var(--line);border-radius:15px;background:var(--soft-bg)}.story-steps b{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--soft-primary);color:var(--primary)}.story-steps strong,.story-steps small{display:block}.story-steps small{color:var(--muted);margin-top:4px}.story-score-card{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.story-score-card>span{color:var(--muted);font-size:.75rem;font-weight:900;letter-spacing:.12em}.story-score-card>strong{font-size:1.45rem;margin:12px 0 18px}.score-ring{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;align-content:center;background:conic-gradient(var(--primary) 0 86%,var(--soft-bg) 86% 100%);position:relative}.score-ring:before{content:"";position:absolute;inset:12px;border-radius:50%;background:var(--surface)}.score-ring b,.score-ring small{position:relative}.score-ring b{font-size:3rem}.score-ring small{color:var(--muted)}.story-score-card ul{list-style:none;padding:0;margin:24px 0 0;text-align:left;display:grid;gap:9px;color:var(--muted)}.story-score-card li:before{content:"✓";color:var(--primary);font-weight:900;margin-right:9px}.landing-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:42px;padding-bottom:42px;margin-bottom:72px;border:1px solid color-mix(in srgb,var(--primary) 36%,var(--line));border-radius:28px;background:radial-gradient(circle at 80% 0,rgba(53,196,154,.15),transparent 40%),var(--surface)}.landing-cta h2{font-size:clamp(2rem,3.3vw,3.2rem);margin-bottom:10px}.landing-cta .button{min-width:190px;min-height:50px}.home-is-guest .site-footer{margin-top:0} html[data-theme="light"] .landing-preview-frame{box-shadow:0 35px 90px rgba(32,55,73,.18)} @media(max-width:1100px){.landing-hero{grid-template-columns:1fr;min-height:auto;gap:44px}.landing-copy{padding-top:26px}.landing-preview-frame{transform:none}.landing-feature-grid{grid-template-columns:repeat(2,1fr)}.landing-product-story{grid-template-columns:1fr}.landing-proof{grid-template-columns:1fr 1fr}} @media(max-width:700px){.landing-hero{padding-top:46px}.landing-copy h1{font-size:3.1rem}.landing-actions{align-items:stretch;flex-direction:column}.landing-actions .button{width:100%}.landing-proof,.landing-feature-grid{grid-template-columns:1fr}.landing-product-story{padding-bottom:64px}.story-panel,.story-score-card{padding:26px}.landing-cta{display:block;padding:28px}.landing-cta .button{width:100%;margin-top:20px}.landing-preview-frame{border-radius:16px;padding:6px}.preview-window-bar{height:30px}} /* Phase 16 — desktop sidebar navigation + wider active product selector */ :root{--sidebar-width:236px;--topbar-height:68px} body{padding-left:var(--sidebar-width)} .site-header{left:var(--sidebar-width);right:0;width:auto;min-height:var(--topbar-height)} .topbar-inner{min-height:var(--topbar-height);display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:0 22px} .mobile-brand{display:none}.mobile-toggle{display:none} .site-sidebar{position:fixed;z-index:45;inset:0 auto 0 0;width:var(--sidebar-width);display:flex;flex-direction:column;padding:18px 14px 16px;background:var(--surface);border-right:1px solid var(--line);box-shadow:10px 0 34px rgba(15,23,42,.04);transition:transform .22s ease,background .2s ease,border-color .2s ease} .sidebar-brand{min-height:48px;padding:3px 8px 17px;border-bottom:1px solid var(--line);font-size:20px} .sidebar-nav{display:flex!important;flex:1;flex-direction:column;align-items:stretch;gap:5px;margin-top:18px;overflow-y:auto} .sidebar-nav a{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:9px 12px!important;border-radius:12px;font-size:14px!important;font-weight:680;color:var(--muted);transition:background .16s ease,color .16s ease,transform .16s ease} .sidebar-nav a:hover{transform:translateX(2px)} .sidebar-nav a.active{background:var(--soft-primary);color:var(--primary);font-weight:820} .nav-icon{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:9px;background:var(--soft-bg);border:1px solid var(--line);font-size:14px;line-height:1} .sidebar-nav a.active .nav-icon{background:color-mix(in srgb,var(--primary) 16%,var(--surface));border-color:color-mix(in srgb,var(--primary) 38%,var(--line));color:var(--primary)} .sidebar-foot{display:flex;align-items:center;gap:9px;padding:13px 10px 2px;color:var(--muted);font-size:11px;font-weight:750;letter-spacing:.04em;text-transform:uppercase;border-top:1px solid var(--line)} .sidebar-status-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent)} #activeProductSlot{flex:0 1 330px;min-width:270px}.active-product-control{width:100%;max-width:330px!important;min-width:270px} .active-product-control select{min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden} .header-actions{margin-left:auto;max-width:100%} .site-footer{margin-left:0} html[data-theme="dark"] .site-sidebar{box-shadow:10px 0 34px rgba(0,0,0,.2)} html[data-theme="dark"] .nav-icon{background:#111d2a;border-color:#27384b} @media(max-width:1180px){ :root{--sidebar-width:210px} #activeProductSlot{flex-basis:290px;min-width:230px}.active-product-control{max-width:290px!important;min-width:230px} .compact-language-select{width:88px!important;min-width:88px!important;max-width:88px!important} } @media(max-width:900px){ body{padding-left:0} .site-header{left:0;width:100%} .topbar-inner{justify-content:space-between;padding:0 16px} .mobile-brand{display:flex;font-size:18px}.mobile-brand .brand-mark{width:32px;height:32px} .mobile-toggle{display:inline-flex;order:-1;width:38px;min-width:38px;height:38px;padding:0;align-items:center;justify-content:center} .site-sidebar{transform:translateX(-102%);width:min(286px,86vw);padding-top:16px;box-shadow:18px 0 50px rgba(0,0,0,.22)} .site-sidebar.open{transform:translateX(0)} #activeProductSlot{flex-basis:250px;min-width:190px}.active-product-control{max-width:250px!important;min-width:190px} .header-actions{gap:6px}.account-text-link{display:none} } @media(max-width:620px){ .mobile-brand span:not(.brand-mark){display:none} #activeProductSlot{flex:1 1 auto;min-width:0}.active-product-control{min-width:0;max-width:220px!important} .compact-language-select{width:76px!important;min-width:76px!important;max-width:76px!important} .topbar-inner{gap:7px;padding:0 10px} } /* Phase 17 — reveal-on-hover navigation, full active-product label, premium shell */ :root{ --sidebar-expanded:252px; --sidebar-peek:12px; --topbar-height:72px; } /* The navigation lives off-canvas on desktop and reveals itself from the left edge. */ body{padding-left:0} .site-header{ left:0; right:0; width:100%; min-height:var(--topbar-height); background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(22px) saturate(1.35); -webkit-backdrop-filter:blur(22px) saturate(1.35); border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent); box-shadow:0 10px 35px rgba(15,23,42,.035); } .topbar-inner{ min-height:var(--topbar-height); gap:10px; padding:0 clamp(18px,2.4vw,34px); } .mobile-brand{margin-right:auto} .header-actions{gap:9px} .site-sidebar{ width:var(--sidebar-expanded); padding:18px 14px 16px; transform:translateX(calc(-100% + var(--sidebar-peek))); transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s ease,background .2s ease,border-color .2s ease; box-shadow:none; will-change:transform; } .site-sidebar::after{ content:""; position:absolute; top:0; right:0; width:var(--sidebar-peek); height:100%; background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 38%,transparent),color-mix(in srgb,var(--primary) 8%,transparent)); opacity:.24; transition:opacity .2s ease,width .2s ease; } .site-sidebar::before{ content:""; position:absolute; right:2px; top:50%; width:3px; height:62px; border-radius:999px; background:color-mix(in srgb,var(--primary) 58%,var(--line)); opacity:.52; transform:translateY(-50%); transition:opacity .2s ease,transform .2s ease; } .site-sidebar:hover, .site-sidebar:focus-within{ transform:translateX(0); box-shadow:24px 0 70px rgba(15,23,42,.16); } .site-sidebar:hover::after, .site-sidebar:focus-within::after{opacity:0;width:0} .site-sidebar:hover::before, .site-sidebar:focus-within::before{opacity:0;transform:translate(8px,-50%)} .sidebar-brand{border-radius:14px;margin:0 2px;padding-left:10px} .sidebar-nav{padding:4px 2px 0} .sidebar-nav a{ min-height:46px; border:1px solid transparent; border-radius:13px; letter-spacing:-.01em; } .sidebar-nav a:hover{ transform:translateX(3px); color:var(--text); background:color-mix(in srgb,var(--surface-2) 82%,var(--primary) 4%); border-color:color-mix(in srgb,var(--line) 78%,transparent); } .sidebar-nav a.active{ background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 13%,var(--surface)),color-mix(in srgb,var(--primary) 7%,var(--surface-2))); border-color:color-mix(in srgb,var(--primary) 30%,var(--line)); box-shadow:inset 3px 0 0 var(--primary),0 8px 22px rgba(15,118,94,.08); } .nav-icon{width:30px;height:30px;border-radius:10px} /* Active product selector: make the complete empty-state sentence readable. */ #activeProductSlot{flex:0 1 410px;min-width:340px} .active-product-control{ width:100%; min-width:340px; max-width:410px!important; min-height:44px; padding:5px 9px 5px 12px; gap:10px; border-radius:14px; border-color:color-mix(in srgb,var(--line) 86%,transparent); background:color-mix(in srgb,var(--surface) 94%,transparent); box-shadow:0 8px 24px rgba(15,23,42,.055),inset 0 1px 0 rgba(255,255,255,.58); } .active-product-label{font-size:10px;letter-spacing:.02em;text-transform:uppercase;flex:0 0 auto} .active-product-control select{ flex:1 1 auto; width:100%; min-width:230px; max-width:none!important; padding-right:28px; text-overflow:clip; overflow:visible; font-size:14px; letter-spacing:-.015em; } .compact-language-select{ width:96px!important; min-width:96px!important; max-width:96px!important; height:42px; border-radius:13px; } .theme-toggle{width:42px;height:42px;border-radius:13px} .account-text-link{padding:8px 3px;font-weight:780} /* Premium visual rhythm for the public landing page and member surfaces. */ .guest-home{background: radial-gradient(circle at 76% 12%,color-mix(in srgb,var(--primary) 9%,transparent),transparent 31%), linear-gradient(180deg,color-mix(in srgb,var(--bg) 98%,#fff),var(--bg)); } .landing-hero{padding-top:clamp(64px,7vw,96px)} .landing-copy h1{letter-spacing:-.062em;text-wrap:balance} .landing-preview-frame{ border-color:color-mix(in srgb,var(--line) 80%,transparent); box-shadow:0 35px 85px rgba(15,23,42,.16),0 3px 10px rgba(15,23,42,.08),inset 0 1px 0 rgba(255,255,255,.74); } .landing-proof article,.panel,.metric-card{ border-color:color-mix(in srgb,var(--line) 86%,transparent); } .button,.language-select,.theme-toggle,.active-product-control{ transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease; } .button:hover{transform:translateY(-1px)} .button.primary:hover{box-shadow:0 12px 28px rgba(15,118,94,.2)} html[data-theme="dark"] .site-header{ background:color-mix(in srgb,#07111d 90%,transparent); box-shadow:0 10px 35px rgba(0,0,0,.15); } html[data-theme="dark"] .site-sidebar:hover, html[data-theme="dark"] .site-sidebar:focus-within{box-shadow:26px 0 76px rgba(0,0,0,.42)} html[data-theme="dark"] .active-product-control{ background:linear-gradient(180deg,#111f2e,#0d1925)!important; border-color:#294158!important; box-shadow:0 12px 32px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.035)!important; } html[data-theme="dark"] .sidebar-nav a:hover{background:#132334;border-color:#294158} html[data-theme="dark"] .sidebar-nav a.active{ background:linear-gradient(135deg,rgba(47,211,158,.15),rgba(20,38,54,.96)); border-color:rgba(47,211,158,.26); } @media(max-width:1320px){ #activeProductSlot{flex-basis:360px;min-width:300px} .active-product-control{min-width:300px;max-width:360px!important} .active-product-control select{min-width:198px} } @media(max-width:1080px){ #activeProductSlot{flex-basis:315px;min-width:270px} .active-product-control{min-width:270px;max-width:315px!important} .active-product-control select{min-width:180px;font-size:13px} } @media(max-width:900px){ .site-sidebar{transform:translateX(-102%);width:min(286px,86vw)} .site-sidebar::before,.site-sidebar::after{display:none} .site-sidebar.open{transform:translateX(0)} #activeProductSlot{flex-basis:260px;min-width:205px} .active-product-control{min-width:205px;max-width:260px!important} .active-product-control select{min-width:130px;text-overflow:ellipsis;overflow:hidden} } @media(max-width:620px){ #activeProductSlot{min-width:0;flex:1 1 auto} .active-product-control{min-width:0;max-width:none!important} .active-product-label{display:none} .active-product-control select{min-width:0} .compact-language-select{width:78px!important;min-width:78px!important;max-width:78px!important} } /* Phase 18 — true edge-trigger sidebar, cache-safe header and premium spacing */ :root{ --sidebar-expanded:264px; --sidebar-trigger-width:16px; } body{padding-left:0!important} .site-header{left:0!important;width:100%!important} .site-header .nav{display:none!important} .sidebar-trigger{ position:fixed; z-index:46; inset:var(--topbar-height) auto 0 0; width:var(--sidebar-trigger-width); cursor:default; background:transparent; } .sidebar-trigger span{ position:absolute; left:4px; top:50%; width:3px; height:74px; border-radius:999px; transform:translateY(-50%); background:color-mix(in srgb,var(--primary) 52%,var(--line)); opacity:.24; transition:opacity .18s ease,transform .18s ease,box-shadow .18s ease; } .sidebar-trigger:hover span{ opacity:.78; transform:translate(2px,-50%); box-shadow:0 0 0 6px color-mix(in srgb,var(--primary) 8%,transparent); } .site-sidebar{ width:var(--sidebar-expanded)!important; transform:translateX(calc(-100% - 8px))!important; visibility:hidden; pointer-events:none; opacity:0; box-shadow:24px 0 72px rgba(15,23,42,.16)!important; transition:transform .26s cubic-bezier(.22,1,.36,1),opacity .2s ease,visibility 0s linear .26s!important; } .site-sidebar::before,.site-sidebar::after{display:none!important} .site-sidebar.hover-open, .site-sidebar:focus-within{ transform:translateX(0)!important; visibility:visible; pointer-events:auto; opacity:1; transition-delay:0s!important; } /* Full active-product sentence without clipping. */ #activeProductSlot{flex:0 0 430px!important;min-width:430px!important} .active-product-control{ width:430px!important; min-width:430px!important; max-width:430px!important; overflow:visible!important; } .active-product-control select{ min-width:292px!important; max-width:none!important; overflow:visible!important; text-overflow:clip!important; white-space:nowrap!important; } /* More commercial landing proportions. */ .landing-hero{ min-height:auto!important; padding-top:clamp(58px,6vw,84px)!important; padding-bottom:52px!important; align-items:center!important; gap:clamp(42px,6vw,88px)!important; } .landing-copy h1{ font-size:clamp(52px,5.5vw,76px)!important; line-height:.98!important; max-width:720px; } .landing-copy p{max-width:650px;font-size:18px;line-height:1.75} .landing-visual{transform:translateY(4px)} .landing-preview-frame{border-radius:24px!important;overflow:hidden} .landing-proof{margin-top:0!important} @media(max-width:1320px){ #activeProductSlot{flex-basis:380px!important;min-width:380px!important} .active-product-control{width:380px!important;min-width:380px!important;max-width:380px!important} .active-product-control select{min-width:242px!important} } @media(max-width:1120px){ #activeProductSlot{flex-basis:330px!important;min-width:330px!important} .active-product-control{width:330px!important;min-width:330px!important;max-width:330px!important} .active-product-control select{min-width:196px!important;font-size:13px} } @media(max-width:900px){ .sidebar-trigger{display:none} .site-sidebar{ width:min(286px,86vw)!important; transform:translateX(-104%)!important; visibility:visible; pointer-events:auto; opacity:1; } .site-sidebar.open{transform:translateX(0)!important} #activeProductSlot{flex:1 1 250px!important;min-width:220px!important} .active-product-control{width:100%!important;min-width:220px!important;max-width:none!important} .active-product-control select{min-width:132px!important;overflow:hidden!important;text-overflow:ellipsis!important} } @media(max-width:680px){ #activeProductSlot{min-width:0!important} .active-product-control{min-width:0!important} .active-product-label{display:none!important} .active-product-control select{min-width:0!important} } /* Phase 19 — persistent brand rail, hover-expand navigation */ :root{ --brand-rail-width:76px; --brand-rail-expanded:272px; } body{padding-left:var(--brand-rail-width)!important} .site-header{left:var(--brand-rail-width)!important;width:calc(100% - var(--brand-rail-width))!important} .mobile-brand{display:none!important} .sidebar-trigger{display:none!important} .site-sidebar.brand-rail{ position:fixed!important; inset:0 auto 0 0!important; z-index:60!important; width:var(--brand-rail-width)!important; height:100vh!important; padding:14px 10px!important; transform:none!important; visibility:visible!important; pointer-events:auto!important; opacity:1!important; overflow:hidden!important; background:color-mix(in srgb,var(--surface) 96%,transparent)!important; border-right:1px solid var(--line)!important; box-shadow:8px 0 28px rgba(15,23,42,.06)!important; backdrop-filter:blur(18px) saturate(145%)!important; transition:width .25s cubic-bezier(.22,1,.36,1),box-shadow .2s ease!important; } .site-sidebar.brand-rail:hover, .site-sidebar.brand-rail:focus-within, .site-sidebar.brand-rail.hover-open{ width:var(--brand-rail-expanded)!important; box-shadow:20px 0 54px rgba(15,23,42,.14)!important; } .sidebar-brand{ height:48px!important; min-height:48px!important; padding:4px 6px!important; margin:0 0 12px!important; gap:11px!important; overflow:hidden!important; white-space:nowrap!important; } .sidebar-brand .brand-mark{flex:0 0 38px!important;width:38px!important;height:38px!important} .sidebar-brand > span:not(.brand-mark), .sidebar-brand .brand-edition{ opacity:0; transform:translateX(-5px); transition:opacity .16s ease,transform .2s ease; } .site-sidebar:hover .sidebar-brand > span:not(.brand-mark), .site-sidebar:hover .sidebar-brand .brand-edition, .site-sidebar:focus-within .sidebar-brand > span:not(.brand-mark), .site-sidebar:focus-within .sidebar-brand .brand-edition{ opacity:1;transform:none; } .sidebar-nav{margin-top:6px!important;gap:6px!important;overflow:hidden!important} .sidebar-nav a{ min-height:48px!important; padding:7px 9px!important; border:1px solid transparent; white-space:nowrap!important; overflow:hidden!important; } .sidebar-nav .nav-icon{flex:0 0 38px!important;width:38px!important;height:38px!important} .sidebar-nav a > span:last-child{ opacity:0; transform:translateX(-5px); transition:opacity .15s ease,transform .2s ease; } .site-sidebar:hover .sidebar-nav a > span:last-child, .site-sidebar:focus-within .sidebar-nav a > span:last-child{ opacity:1;transform:none; } .sidebar-foot{overflow:hidden!important;white-space:nowrap!important;padding-inline:9px!important} .sidebar-foot span:last-child{opacity:0;transition:opacity .15s ease} .site-sidebar:hover .sidebar-foot span:last-child, .site-sidebar:focus-within .sidebar-foot span:last-child{opacity:1} /* Header controls: no clipping, still compact. */ .topbar-inner{max-width:none!important;padding-inline:18px!important;gap:14px!important} .header-actions{margin-left:auto!important;min-width:0!important} #activeProductSlot{flex:0 1 430px!important;min-width:360px!important;max-width:480px!important} .active-product-control{width:100%!important;min-width:360px!important;max-width:480px!important;display:flex!important} .active-product-control select{flex:1 1 auto!important;min-width:245px!important;max-width:none!important;text-overflow:clip!important} .compact-language-select{flex:0 0 94px!important;width:94px!important;min-width:94px!important} /* Premium polish */ .card,.dashboard-panel,.product-workspace-card,.landing-proof-card{box-shadow:0 12px 32px rgba(15,23,42,.055)} .button,.theme-toggle,.active-product-control,.compact-language-select{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease} .button:hover{transform:translateY(-1px)} html[data-theme="dark"] .site-sidebar.brand-rail{background:rgba(9,20,32,.96)!important;box-shadow:10px 0 36px rgba(0,0,0,.24)!important} html[data-theme="dark"] .site-sidebar.brand-rail:hover{box-shadow:24px 0 68px rgba(0,0,0,.42)!important} @media(max-width:1100px){ #activeProductSlot{min-width:300px!important;max-width:390px!important} .active-product-control{min-width:300px!important;max-width:390px!important} .active-product-control select{min-width:180px!important} } @media(max-width:900px){ body{padding-left:0!important} .site-header{left:0!important;width:100%!important} .mobile-brand{display:flex!important} .site-sidebar.brand-rail{ width:min(286px,86vw)!important; transform:translateX(-104%)!important; padding:16px 12px!important; } .site-sidebar.brand-rail.open{transform:translateX(0)!important} .sidebar-brand > span:not(.brand-mark),.sidebar-brand .brand-edition, .sidebar-nav a > span:last-child,.sidebar-foot span:last-child{opacity:1!important;transform:none!important} #activeProductSlot{min-width:220px!important;max-width:none!important} .active-product-control{min-width:220px!important;max-width:none!important} } @media(max-width:620px){ #activeProductSlot{min-width:0!important} .active-product-control{min-width:0!important} .active-product-control select{min-width:0!important;text-overflow:ellipsis!important} } \n\n/* Phase 20 — Region Engine 2.0, Global Switch and Dashboard 2.0 */\n.global-profile-control{display:flex;align-items:center;gap:6px;height:42px;padding:0 8px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent)}\n.global-profile-control>span{font-size:15px}.global-profile-control select{width:92px;min-width:92px;border:0;background:transparent;color:var(--text);font:inherit;font-size:12px;font-weight:750;outline:none;padding:0 18px 0 0}\n.dashboard-brief-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.8fr);gap:18px;margin-bottom:18px}.ai-business-brief{display:flex;align-items:center;gap:18px;padding:24px;background:linear-gradient(135deg,color-mix(in srgb,var(--primary) 12%,var(--surface)),var(--surface))}.brief-icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:var(--primary);color:#fff;font-size:24px;box-shadow:0 14px 30px color-mix(in srgb,var(--primary) 30%,transparent)}.ai-business-brief>div:nth-child(2){flex:1}.ai-business-brief h2{margin:4px 0 7px}.ai-business-brief p{margin:0;color:var(--muted);line-height:1.6}.goal-progress-card{padding:22px}.goal-progress-card .panel-heading strong{font-size:28px;color:var(--primary)}.goal-progress-track{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin:18px 0 12px}.goal-progress-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),#5eead4);border-radius:inherit;transition:width .65s cubic-bezier(.22,1,.36,1)}.goal-progress-meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px}.dashboard-analytics-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.8fr);gap:18px;margin-bottom:18px}.dashboard-chart-panel,.dashboard-activity-panel{padding:22px}.chart-caption{font-size:12px;color:var(--muted)}.mini-bar-chart{height:250px;display:flex;align-items:flex-end;gap:14px;padding-top:30px}.bar-item{flex:1;min-width:42px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:8px}.bar-track{height:170px;width:min(46px,75%);display:flex;align-items:flex-end;border-radius:12px;background:var(--surface-2);overflow:hidden}.bar-track span{width:100%;display:block;background:linear-gradient(180deg,#5eead4,var(--primary));border-radius:10px 10px 4px 4px}.bar-track span.negative{background:linear-gradient(180deg,#fb7185,#e11d48)}.bar-value{font-size:11px;font-weight:750;color:var(--muted);white-space:nowrap}.bar-item small{max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}.activity-timeline{display:grid;gap:2px}.activity-item{position:relative;display:grid;grid-template-columns:18px 1fr;gap:10px;padding:10px 0}.activity-item>span{width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 12%,transparent)}.activity-item:not(:last-child)::after{content:'';position:absolute;left:4px;top:25px;bottom:-4px;width:1px;background:var(--line)}.activity-item strong{font-size:13px}.activity-item p{margin:3px 0;color:var(--muted);font-size:12px}.activity-item small{color:var(--muted);font-size:10px}\nhtml[dir="rtl"] .site-sidebar.brand-rail{left:auto!important;right:0!important;border-right:0!important;border-left:1px solid var(--line)!important}html[dir="rtl"] body{padding-left:0!important;padding-right:var(--brand-rail-width)!important}html[dir="rtl"] .site-header{left:0!important;right:var(--brand-rail-width)!important;width:calc(100% - var(--brand-rail-width))!important}html[dir="rtl"] .header-actions{margin-left:0!important;margin-right:auto!important}\n@media(max-width:1180px){.global-profile-control select{width:72px;min-width:72px}.dashboard-brief-grid,.dashboard-analytics-grid{grid-template-columns:1fr}}\n@media(max-width:900px){.global-profile-control{display:none}.dashboard-brief-grid,.dashboard-analytics-grid{grid-template-columns:1fr}.mini-bar-chart{overflow-x:auto}.ai-business-brief{align-items:flex-start;flex-wrap:wrap}html[dir="rtl"] body{padding-right:0!important}html[dir="rtl"] .site-header{right:0!important;width:100%!important}}\n /* Phase 21 — clarity, premium visual system and data visualization */ :root{ --page-max:1500px; --shadow-xs:0 1px 2px rgba(15,23,42,.04); --shadow-sm:0 8px 24px rgba(15,23,42,.06); --shadow-md:0 18px 54px rgba(15,23,42,.09); --radius-xl:24px; } body{background:radial-gradient(circle at 72% 8%,color-mix(in srgb,var(--primary) 6%,transparent),transparent 28%),var(--bg)} .shell{width:min(var(--page-max),calc(100% - 48px));margin-inline:auto} .site-header{background:color-mix(in srgb,var(--surface) 88%,transparent)!important;backdrop-filter:blur(22px) saturate(155%)!important;border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent)!important;box-shadow:0 1px 0 rgba(255,255,255,.35),0 8px 32px rgba(15,23,42,.035)!important} .topbar-inner{min-height:72px!important} .header-actions{gap:10px!important} .active-product-control,.global-profile-control,.compact-language-select,.theme-toggle{height:44px!important;border-radius:14px!important;box-shadow:var(--shadow-xs)!important} #activeProductSlot{flex-basis:470px!important;max-width:520px!important} .active-product-control{max-width:520px!important}.active-product-control select{font-weight:780!important} .site-sidebar.brand-rail{box-shadow:10px 0 40px rgba(15,23,42,.07)!important} .sidebar-nav a{border-radius:14px!important}.sidebar-nav a.active{background:color-mix(in srgb,var(--primary) 10%,var(--surface))!important;border-color:color-mix(in srgb,var(--primary) 22%,var(--line))!important} .guest-home{overflow:hidden} .landing-hero{min-height:720px;padding-block:76px 54px;grid-template-columns:minmax(420px,.78fr) minmax(620px,1.22fr);gap:64px;align-items:center} .landing-copy{max-width:590px} .landing-copy h1{font-size:clamp(52px,5.2vw,82px)!important;line-height:.98!important;letter-spacing:-.062em!important;margin:22px 0 26px!important;text-wrap:balance} .landing-copy h1 em{font-style:normal;color:var(--primary)} .landing-copy>p{font-size:18px!important;line-height:1.82!important;max-width:570px!important;color:var(--muted)!important} .eyebrow{letter-spacing:.045em!important;font-size:12px!important} .landing-actions{margin-top:30px!important}.landing-actions .button{min-height:52px;padding-inline:24px;border-radius:15px;font-size:15px;font-weight:820} .landing-actions .primary{box-shadow:0 14px 30px color-mix(in srgb,var(--primary) 24%,transparent)} .landing-trust-row{margin-top:20px!important;gap:18px!important;font-size:12px!important} .landing-visual{position:relative;min-width:0} .landing-preview-glow{position:absolute;inset:10% 2% 0 4%;background:radial-gradient(circle,color-mix(in srgb,var(--primary) 22%,transparent),transparent 66%);filter:blur(38px);opacity:.8} .product-preview-shell{position:relative;border:1px solid color-mix(in srgb,var(--line) 78%,transparent);border-radius:28px;background:var(--surface);box-shadow:0 34px 90px rgba(15,23,42,.16),0 0 0 1px rgba(255,255,255,.45) inset;overflow:hidden;transform:perspective(1400px) rotateY(-2deg) rotateX(1deg);transform-origin:center} .product-preview-topbar{height:52px;display:flex;align-items:center;gap:12px;padding:0 18px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,var(--surface-2));font-size:12px}.product-preview-topbar strong{flex:1}.product-preview-topbar>span{padding:5px 9px;border-radius:999px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);font-weight:750} .preview-window-dots{display:flex;gap:6px}.preview-window-dots i{width:8px;height:8px;border-radius:50%;background:#fb7185}.preview-window-dots i:nth-child(2){background:#fbbf24}.preview-window-dots i:nth-child(3){background:#34d399} .product-preview-body{display:grid;grid-template-columns:52px 1fr;min-height:520px;background:color-mix(in srgb,var(--bg) 55%,var(--surface))} .preview-rail{padding:13px 8px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--surface)}.preview-rail b,.preview-rail span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:12px}.preview-rail b{background:var(--primary);color:#fff}.preview-rail span{color:var(--muted);border:1px solid transparent}.preview-rail span.active{background:color-mix(in srgb,var(--primary) 11%,transparent);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 24%,var(--line))} .preview-dashboard{padding:22px;min-width:0}.preview-dashboard-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.preview-dashboard-head small{font-size:8px;color:var(--primary);font-weight:850;letter-spacing:.08em}.preview-dashboard-head h3{font-size:24px;margin:5px 0 0;letter-spacing:-.04em}.preview-dashboard-head button{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 10px;font-size:9px;color:var(--muted)} .preview-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.preview-kpis article{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-xs)}.preview-kpis span{display:block;color:var(--muted);font-size:9px}.preview-kpis strong{display:block;font-size:17px;margin:8px 0 5px;letter-spacing:-.04em}.preview-kpis small{font-size:8px;color:var(--muted)}.preview-kpis .up{color:#0d9c6e} .preview-grid-main{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(190px,.75fr);gap:10px;margin-top:10px}.preview-chart-card,.preview-top-card,.preview-grid-bottom article{border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:14px}.preview-card-head{display:flex;justify-content:space-between;align-items:center;font-size:9px}.preview-card-head span{color:var(--muted)}.preview-chart-card svg{display:block;width:100%;height:155px;margin-top:5px}.preview-chart-card .grid line{stroke:var(--line);stroke-width:1}.preview-chart-card .area{fill:url(#previewArea)}.preview-chart-card .line{fill:none;stroke:var(--primary);stroke-width:3;stroke-linecap:round}.preview-chart-card .points circle{fill:var(--surface);stroke:var(--primary);stroke-width:3}.preview-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:8px;padding:0 8px} .preview-top-card ol{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:8px}.preview-top-card li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}.preview-top-card li:last-child{border:0}.preview-top-card li>b{width:20px;height:20px;border-radius:7px;display:grid;place-items:center;background:var(--surface-2);font-size:8px}.preview-top-card li span{font-size:9px;font-weight:760}.preview-top-card li small{display:block;color:var(--muted);font-size:7px;margin-top:2px}.preview-top-card li>strong{font-size:9px} .preview-grid-bottom{display:grid;grid-template-columns:1.45fr .75fr;gap:10px;margin-top:10px}.preview-grid-bottom small{display:block;color:var(--primary);font-size:8px;font-weight:850;margin-bottom:7px}.preview-grid-bottom strong{font-size:9px;line-height:1.5}.preview-grid-bottom em{font-style:normal;color:#ef4444;font-size:15px} .landing-proof{grid-template-columns:repeat(4,1fr)!important;gap:14px!important;margin-top:0!important}.landing-proof article{display:flex!important;align-items:center;gap:14px;padding:20px!important;border-radius:18px!important;background:color-mix(in srgb,var(--surface) 96%,transparent)!important;box-shadow:var(--shadow-sm)!important}.landing-proof i{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 10%,var(--surface));color:var(--primary);font-style:normal;font-weight:850;font-size:18px;flex:0 0 auto}.landing-proof strong{font-size:14px}.landing-proof span{font-size:11px;line-height:1.5} .landing-section{padding-block:120px!important}.landing-section-heading h2{font-size:clamp(38px,4vw,58px)!important;letter-spacing:-.055em!important}.landing-feature-grid article{border-radius:22px!important;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.landing-feature-grid article:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:color-mix(in srgb,var(--primary) 24%,var(--line))} .member-home{padding-bottom:80px}.dashboard-hero{padding-top:54px!important}.dashboard-kpis{gap:14px!important}.metric-card{border-radius:19px!important;padding:20px!important;box-shadow:var(--shadow-sm)!important}.metric-card strong{font-size:28px!important}.panel{border-radius:22px!important;box-shadow:var(--shadow-sm)!important} .dashboard-overview-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.65fr);gap:18px;margin-bottom:18px}.dashboard-trend-panel,.dashboard-health-panel{padding:22px}.chart-period-tabs{display:flex;gap:4px;padding:3px;background:var(--surface-2);border-radius:10px}.chart-period-tabs button{border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;font-weight:750;padding:7px 9px;border-radius:8px}.chart-period-tabs button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-xs)} .trend-chart{height:300px;position:relative}.trend-chart svg{width:100%;height:100%;display:block}.trend-grid line{stroke:var(--line);stroke-width:1}.trend-area{fill:url(#trendGradient)}.trend-line{fill:none;stroke:var(--primary);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}.trend-line-secondary{fill:none;stroke:color-mix(in srgb,var(--primary) 35%,var(--muted));stroke-width:2;stroke-dasharray:5 6}.trend-point{fill:var(--surface);stroke:var(--primary);stroke-width:3}.trend-labels{display:flex;justify-content:space-between;margin-top:-20px;padding:0 12px;color:var(--muted);font-size:10px}.trend-tooltip{position:absolute;transform:translate(-50%,-100%);background:var(--text);color:var(--surface);padding:7px 9px;border-radius:9px;font-size:10px;pointer-events:none;white-space:nowrap;opacity:0;transition:opacity .15s ease}.trend-tooltip.show{opacity:1} .health-chart-wrap{display:grid;grid-template-columns:170px 1fr;align-items:center;gap:22px;min-height:260px}.health-donut{width:164px;height:164px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--primary) 0 0,#f59e0b 0 0,#ef4444 0 0,var(--surface-2) 0 100%)}.health-donut::after{content:'';position:absolute;inset:24px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}.health-donut span{position:relative;z-index:1;text-align:center}.health-donut strong{display:block;font-size:30px}.health-donut small{color:var(--muted)}.health-legend{display:grid;gap:13px}.health-legend div{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center}.health-legend i{width:9px;height:9px;border-radius:50%}.health-legend span{font-size:12px;color:var(--muted)}.health-legend strong{font-size:13px} html[data-theme="dark"] .product-preview-shell{box-shadow:0 38px 100px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.05) inset} html[data-theme="dark"] .site-header{box-shadow:0 1px 0 rgba(255,255,255,.025),0 14px 35px rgba(0,0,0,.18)!important} @media(max-width:1280px){.landing-hero{grid-template-columns:minmax(390px,.85fr) minmax(520px,1.15fr);gap:34px}.preview-dashboard{padding:15px}.product-preview-body{min-height:480px}.landing-proof{grid-template-columns:repeat(2,1fr)!important}} @media(max-width:1050px){.landing-hero{grid-template-columns:1fr;min-height:auto;padding-top:70px}.landing-copy{max-width:760px}.landing-copy h1{font-size:clamp(52px,8vw,76px)!important}.landing-visual{max-width:900px}.product-preview-shell{transform:none}.dashboard-overview-grid{grid-template-columns:1fr}} @media(max-width:760px){.shell{width:min(100% - 28px,var(--page-max))}.landing-hero{padding-top:46px}.landing-copy h1{font-size:clamp(43px,13vw,62px)!important}.product-preview-body{grid-template-columns:38px 1fr}.preview-rail{padding-inline:4px}.preview-rail b,.preview-rail span{width:28px;height:28px}.preview-dashboard{padding:10px}.preview-kpis{grid-template-columns:repeat(2,1fr)}.preview-grid-main{grid-template-columns:1fr}.preview-top-card{display:none}.preview-grid-bottom{grid-template-columns:1fr}.landing-proof{grid-template-columns:1fr!important}.health-chart-wrap{grid-template-columns:1fr;justify-items:center}.health-legend{width:100%}} /* Phase 22 — commercial release candidate */ :root{--shadow-premium:0 24px 70px rgba(15,23,42,.10);--shadow-soft:0 10px 34px rgba(15,23,42,.07)} body{letter-spacing:-.012em}.site-header{box-shadow:0 1px 0 var(--border),0 12px 35px rgba(15,23,42,.035)} .topbar-inner{padding-inline:clamp(76px,7vw,112px) 28px}.header-actions{gap:9px}.active-product-control{min-width:340px!important;max-width:420px!important}.global-profile-control{min-width:170px}.compact-language-select{width:92px!important;min-width:92px!important} .notification-wrap{position:relative}.notification-button{position:relative;width:42px;height:42px;border:1px solid var(--border);border-radius:13px;background:var(--surface);color:var(--text);font-size:21px;cursor:pointer;transition:.18s ease}.notification-button:hover{transform:translateY(-1px);box-shadow:var(--shadow-soft);border-color:color-mix(in srgb,var(--primary) 45%,var(--border))}.notification-button b{position:absolute;right:-5px;top:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#ef4444;color:#fff;font:700 11px/19px system-ui;text-align:center}.notification-popover{position:absolute;z-index:120;right:0;top:52px;width:min(390px,calc(100vw - 24px));background:color-mix(in srgb,var(--surface) 96%,transparent);backdrop-filter:blur(22px);border:1px solid var(--border);border-radius:20px;box-shadow:0 26px 80px rgba(15,23,42,.2);overflow:hidden}.notification-head{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;border-bottom:1px solid var(--border)}.notification-head strong{display:block}.notification-head small{color:var(--muted)}.notification-head a{font-size:13px;color:var(--primary);font-weight:800}.notification-list{padding:8px}.notification-item{display:grid;grid-template-columns:10px 1fr auto;gap:12px;align-items:center;padding:13px;border-radius:14px;color:var(--text);text-decoration:none}.notification-item:hover{background:var(--surface-2)}.notification-item i{width:9px;height:9px;border-radius:50%;background:#f59e0b}.notification-item.danger i{background:#ef4444}.notification-item span strong,.notification-item span small{display:block}.notification-item span small{margin-top:3px;color:var(--muted);font-size:12px}.notification-item>b{color:var(--muted)}.notification-empty{padding:28px 16px;text-align:center;color:var(--muted)}.notification-success{color:var(--primary)} .brand-rail{width:72px;transition:width .24s cubic-bezier(.2,.8,.2,1),box-shadow .2s}.brand-rail.hover-open{width:244px;box-shadow:22px 0 65px rgba(15,23,42,.14)}.sidebar-brand{height:78px}.sidebar-upgrade{opacity:0;pointer-events:none;margin:auto 12px 10px;padding:14px;border:1px solid var(--border);border-radius:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 11%,var(--surface)),var(--surface));transition:opacity .14s}.brand-rail.hover-open .sidebar-upgrade{opacity:1;pointer-events:auto}.sidebar-upgrade span{font-size:10px;font-weight:900;color:var(--primary)}.sidebar-upgrade strong,.sidebar-upgrade small{display:block}.sidebar-upgrade strong{margin-top:5px;font-size:13px}.sidebar-upgrade small{margin:4px 0 10px;color:var(--muted);font-size:11px;line-height:1.45}.sidebar-upgrade a{font-size:12px;color:var(--primary);font-weight:800} .floating-create{position:fixed;z-index:80;right:28px;bottom:26px;width:56px;height:56px;border-radius:20px;background:linear-gradient(135deg,var(--primary),#22c99a);color:#fff;text-decoration:none;display:grid;place-items:center;font:300 34px/1 system-ui;box-shadow:0 18px 38px color-mix(in srgb,var(--primary) 35%,transparent);transition:.2s}.floating-create:hover{transform:translateY(-3px) scale(1.03)} .panel,.metric-card,.landing-proof article,.landing-feature-grid article{box-shadow:var(--shadow-soft)}.panel:hover,.metric-card:hover{border-color:color-mix(in srgb,var(--primary) 25%,var(--border))}.dashboard-hero{padding-bottom:20px}.command-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.command-strip>a{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:17px;background:var(--surface);color:var(--text);text-decoration:none;box-shadow:var(--shadow-soft);transition:.18s}.command-strip>a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 40%,var(--border))}.command-strip i{width:42px;height:42px;border-radius:13px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;font-style:normal;font-weight:900}.command-strip strong,.command-strip small{display:block}.command-strip small{margin-top:3px;color:var(--muted);font-size:12px}.command-strip b{color:var(--primary)}.dashboard-kpis{grid-template-columns:repeat(6,minmax(0,1fr))}.metric-card strong{font-size:clamp(22px,2vw,31px)}.dashboard-overview-grid{grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr)}.quick-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .simulator-layout{display:grid;grid-template-columns:minmax(310px,390px) minmax(0,1fr);gap:20px;align-items:start;padding-bottom:80px}.simulator-controls{position:sticky;top:92px}.simulator-product{padding:14px 16px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2);margin-bottom:20px}.simulator-product span,.simulator-product strong{display:block}.simulator-product span{font-size:12px;color:var(--muted);margin-bottom:4px}.range-field{display:block;padding:18px 0;border-top:1px solid var(--border)}.range-field>span{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.range-field output{font-weight:900;color:var(--primary)}.range-field input[type=range]{width:100%;accent-color:var(--primary)}.range-field input[type=number]{width:100%;margin-top:10px}.scenario-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.scenario-presets button,.chart-period-tabs button{border:1px solid var(--border);border-radius:10px;padding:9px;background:var(--surface);color:var(--muted);cursor:pointer}.scenario-presets button.active,.scenario-presets button:hover,.chart-period-tabs button.active{background:var(--primary-soft);color:var(--primary);border-color:color-mix(in srgb,var(--primary) 35%,var(--border));font-weight:800}.live-pill{font-size:11px;font-weight:900;color:var(--primary);background:var(--primary-soft);padding:7px 9px;border-radius:999px}.sim-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}.sim-kpis article{padding:18px;border:1px solid var(--border);border-radius:17px;background:var(--surface);box-shadow:var(--shadow-soft)}.sim-kpis span,.sim-kpis strong,.sim-kpis small{display:block}.sim-kpis span{font-size:12px;color:var(--muted)}.sim-kpis strong{margin:8px 0;font-size:24px}.sim-kpis small{font-size:12px;color:var(--muted)}.simulator-chart-panel{min-height:390px}.sim-profit-curve{position:relative;height:300px}.sim-profit-curve svg{width:100%;height:260px;overflow:visible}.curve-grid line{stroke:var(--border);stroke-width:1}.curve-area{fill:color-mix(in srgb,var(--primary) 16%,transparent)}.curve-line{fill:none;stroke:var(--primary);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.sim-profit-curve circle{fill:var(--surface);stroke:var(--primary);stroke-width:3}.curve-axis{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.simulator-bottom-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:18px;margin-top:18px}.simulator-bottom-grid p{color:var(--muted);line-height:1.8}.scenario-compare>div{display:flex;justify-content:space-between;padding:12px 0;border-top:1px solid var(--border)}.scenario-compare .positive{color:var(--primary)}.scenario-compare .negative{color:#ef4444} @media(max-width:1180px){.dashboard-kpis{grid-template-columns:repeat(3,1fr)}.command-strip{grid-template-columns:repeat(2,1fr)}.sim-kpis{grid-template-columns:repeat(2,1fr)}} @media(max-width:820px){.topbar-inner{padding-inline:14px}.active-product-control{min-width:0!important;max-width:none!important}.global-profile-control{display:none}.command-strip{grid-template-columns:1fr 1fr}.simulator-layout{grid-template-columns:1fr}.simulator-controls{position:static}.simulator-bottom-grid{grid-template-columns:1fr}.floating-create{right:16px;bottom:16px}.dashboard-kpis{grid-template-columns:1fr 1fr}} @media(max-width:560px){.command-strip,.sim-kpis,.dashboard-kpis{grid-template-columns:1fr}.notification-popover{position:fixed;right:12px;top:72px}.compact-language-select{display:none!important}} [data-theme=dark] .notification-popover{box-shadow:0 28px 85px rgba(0,0,0,.5)} /* Phase 23 · launch readiness */ .bulk-status{min-height:24px;margin-top:-10px;margin-bottom:10px;font-size:13px;color:var(--muted)} .bulk-status[data-type="success"]{color:var(--success,#0a8f68)}.bulk-status[data-type="error"]{color:#dc3f45} .page-loading{padding:110px 28px;color:var(--muted);font-weight:700} .detail-kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-bottom:20px} .detail-kpis article{border:1px solid var(--border);background:var(--surface);border-radius:18px;padding:20px;box-shadow:var(--shadow-sm)} .detail-kpis span{display:block;color:var(--muted);font-size:12px;margin-bottom:10px}.detail-kpis strong{font-size:22px;letter-spacing:-.03em} .detail-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr);gap:18px;padding-bottom:70px}.detail-timeline-panel{grid-row:span 2}.detail-decision-card{align-self:start} .detail-line-chart svg{width:100%;min-height:270px}.detail-line-chart .grid line{stroke:var(--border);stroke-width:1}.detail-line-chart .line{fill:none;stroke:#18a87b;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.detail-line-chart circle{fill:var(--surface);stroke:#18a87b;stroke-width:4}.detail-chart-axis{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px;overflow:hidden} .detail-cost-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-cost-grid div{border:1px solid var(--border);border-radius:14px;padding:14px;background:var(--surface-2)}.detail-cost-grid span{display:block;color:var(--muted);font-size:12px;margin-bottom:7px}.detail-cost-grid strong{font-size:16px} .detail-timeline article{position:relative;padding-left:25px;margin-bottom:19px}.detail-timeline article>i{position:absolute;left:3px;top:4px;width:10px;height:10px;border-radius:50%;background:#19b987;box-shadow:0 0 0 5px rgba(25,185,135,.12)}.detail-timeline article:after{content:"";position:absolute;left:7px;top:19px;bottom:-20px;border-left:1px solid var(--border)}.detail-timeline article:last-child:after{display:none}.detail-timeline p{margin:5px 0;color:var(--muted)}.detail-timeline time{font-size:11px;color:var(--muted)} .report-sheet{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:34px;margin-bottom:70px;box-shadow:var(--shadow-md)}.report-heading{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:24px;border-bottom:1px solid var(--border)}.report-heading span{font-weight:800;color:#118462}.report-heading h2{font-size:30px;margin:8px 0}.report-heading small{display:block;color:var(--muted);margin-bottom:5px}.report-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:24px 0}.report-kpis article{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:18px}.report-kpis span{display:block;color:var(--muted);font-size:12px;margin-bottom:9px}.report-kpis strong{font-size:19px}.report-table-wrap{overflow:auto}.report-table{width:100%;border-collapse:collapse}.report-table th,.report-table td{text-align:left;padding:14px;border-bottom:1px solid var(--border);white-space:nowrap}.report-table th{font-size:12px;color:var(--muted);background:var(--surface-2)}.report-note{margin-top:26px;padding:18px;border-radius:15px;background:rgba(24,168,123,.08);border:1px solid rgba(24,168,123,.2)}.report-note p{margin:7px 0 0;color:var(--muted);line-height:1.65} @media(max-width:1100px){.detail-kpis{grid-template-columns:repeat(3,1fr)}.detail-grid{grid-template-columns:1fr}.detail-timeline-panel{grid-row:auto}.report-kpis{grid-template-columns:repeat(2,1fr)}} @media(max-width:680px){.detail-kpis{grid-template-columns:repeat(2,1fr)}.detail-kpis article{padding:15px}.report-sheet{padding:18px;border-radius:16px}.report-heading{display:block}.report-kpis{grid-template-columns:1fr 1fr}.hero-quick-actions{flex-wrap:wrap}} @media print{.site-header,.site-sidebar,.floating-create,.no-print{display:none!important}body{background:#fff!important;color:#111!important}.report-sheet{box-shadow:none;border:0;margin:0;padding:0}.report-table th{color:#333}.report-note{background:#f5f5f5}.report-sheet *{color:#111!important}} /* Phase 24 — global platform coverage */ .platform-coverage{margin-top:34px;padding:34px;border:1px solid var(--border);border-radius:28px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface) 96%,#ffffff 4%),color-mix(in srgb,var(--surface-2) 94%,#0fa77a 6%));box-shadow:0 24px 70px rgba(24,39,55,.08);position:relative;overflow:hidden} .platform-coverage:before{content:"";position:absolute;width:360px;height:360px;border-radius:50%;right:-140px;top:-220px;background:rgba(30,181,132,.12);filter:blur(28px);pointer-events:none} .platform-coverage-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;position:relative;z-index:1}.platform-coverage-head h2{font-size:clamp(28px,3vw,44px);margin:10px 0 12px;letter-spacing:-.04em}.platform-coverage-head p{max-width:720px;color:var(--muted);font-size:16px;line-height:1.8;margin:0}.platform-coverage-stats{display:grid;grid-template-columns:repeat(3,minmax(92px,1fr));gap:10px;min-width:330px}.platform-coverage-stats article{padding:17px 15px;border:1px solid var(--border);border-radius:18px;background:color-mix(in srgb,var(--surface) 90%,transparent);text-align:center}.platform-coverage-stats strong{display:block;font-size:25px;line-height:1;color:var(--primary);margin-bottom:8px}.platform-coverage-stats span{font-size:12px;color:var(--muted)} .platform-cloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;padding-top:26px;border-top:1px solid var(--border);position:relative;z-index:1}.platform-chip{display:inline-flex;align-items:center;min-height:38px;padding:0 15px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--text);font-size:13px;font-weight:700;box-shadow:0 6px 18px rgba(22,38,54,.04);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.platform-chip:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--primary) 46%,var(--border));box-shadow:0 12px 25px rgba(14,116,86,.11)}.platform-chip.featured{color:var(--primary);background:color-mix(in srgb,var(--primary) 8%,var(--surface));border-color:color-mix(in srgb,var(--primary) 30%,var(--border))}.platform-note{display:flex;align-items:flex-start;gap:12px;margin-top:24px;padding:15px 18px;border-radius:17px;background:color-mix(in srgb,var(--primary) 7%,var(--surface));border:1px solid color-mix(in srgb,var(--primary) 18%,var(--border));position:relative;z-index:1}.platform-note>span{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;background:var(--primary);color:white;font-weight:900;flex:0 0 auto}.platform-note p{margin:0;color:var(--muted);line-height:1.55}.platform-note strong{color:var(--text)} [data-theme="dark"] .platform-coverage{box-shadow:0 26px 80px rgba(0,0,0,.28)} @media(max-width:900px){.platform-coverage{padding:24px}.platform-coverage-head{display:block}.platform-coverage-stats{min-width:0;margin-top:22px}.platform-chip{font-size:12px;padding-inline:12px}} @media(max-width:560px){.platform-coverage-stats{grid-template-columns:repeat(3,1fr)}.platform-coverage-stats article{padding:13px 8px}.platform-coverage-stats strong{font-size:21px}.platform-cloud{gap:7px}.platform-chip{min-height:34px}} /* Phase 25: public beta growth */ .beta-announcement{max-width:1440px;margin:18px auto 0;padding:10px 18px;border:1px solid color-mix(in srgb,var(--primary) 25%,var(--border));background:color-mix(in srgb,var(--primary) 7%,var(--surface));border-radius:14px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:13px}.beta-announcement button{border:0;background:transparent;color:var(--primary);font-weight:800;cursor:pointer}.beta-pill{display:inline-flex;align-items:center;justify-content:center;padding:5px 9px;border-radius:999px;background:var(--primary);color:#fff;font-size:10px;font-weight:900;letter-spacing:.12em}.beta-roadmap{padding-top:44px;padding-bottom:44px}.beta-roadmap-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:20px}.beta-roadmap-head h2{font-size:clamp(26px,3vw,42px);margin:8px 0}.beta-roadmap-head p{max-width:700px;color:var(--muted)}.roadmap-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.roadmap-card{padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--surface);display:flex;gap:14px;min-height:170px;transition:.2s ease}.roadmap-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}.roadmap-card>span{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--surface-2);font-weight:900}.roadmap-card small{display:block;color:var(--muted);font-weight:800;margin-bottom:8px}.roadmap-card strong{font-size:17px}.roadmap-card p{font-size:13px;color:var(--muted);line-height:1.6}.roadmap-card.done>span,.roadmap-card.active>span{background:color-mix(in srgb,var(--primary) 16%,var(--surface));color:var(--primary)}.beta-member-bar{margin-top:14px;padding:14px 16px;border-radius:16px;border:1px solid color-mix(in srgb,var(--primary) 26%,var(--border));background:linear-gradient(110deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),var(--surface));display:flex;align-items:center;justify-content:space-between;gap:16px}.beta-member-bar>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.beta-member-bar small{color:var(--muted)}.onboarding-checklist{margin-top:16px;padding:20px;border:1px solid var(--border);border-radius:20px;background:var(--surface)}.onboarding-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.onboarding-items a{display:flex;align-items:center;gap:12px;padding:15px;border:1px solid var(--border);border-radius:15px;color:inherit;text-decoration:none;background:var(--surface-2)}.onboarding-items a i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--surface);font-style:normal;font-weight:900}.onboarding-items a span{flex:1;display:grid;gap:3px}.onboarding-items a small{color:var(--muted)}.onboarding-items a.complete{border-color:color-mix(in srgb,var(--primary) 50%,var(--border));background:color-mix(in srgb,var(--primary) 8%,var(--surface))}.onboarding-items a.complete i{background:var(--primary);color:white;font-size:0}.onboarding-items a.complete i:after{content:'✓';font-size:15px}.feedback-floating{position:fixed;right:22px;bottom:86px;z-index:60;border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border));background:var(--surface);color:var(--text);border-radius:999px;padding:10px 14px;display:flex;align-items:center;gap:8px;box-shadow:0 14px 35px rgba(10,25,42,.18);cursor:pointer}.feedback-floating span{color:var(--primary)}.feedback-modal-backdrop{position:fixed;inset:0;z-index:1000;background:rgba(5,12,22,.62);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}.feedback-modal-backdrop[hidden]{display:none}.feedback-modal{width:min(560px,100%);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:24px;padding:26px;box-shadow:0 28px 80px rgba(0,0,0,.35);position:relative}.feedback-modal h2{font-size:28px;margin:14px 0 8px}.feedback-modal>p{color:var(--muted);margin-bottom:18px}.feedback-close{position:absolute;right:18px;top:15px;border:0;background:transparent;color:var(--muted);font-size:28px;cursor:pointer}.feedback-modal form{display:grid;gap:14px}.feedback-modal label{display:grid;gap:7px;font-weight:750}.feedback-modal textarea{resize:vertical}.feedback-actions{display:flex;justify-content:flex-end;gap:10px}.form-message{min-height:20px;font-size:13px}.form-message.success{color:var(--primary)}.form-message.error{color:#e25b62}.modal-open{overflow:hidden}@media(max-width:900px){.roadmap-grid{grid-template-columns:1fr 1fr}.onboarding-items{grid-template-columns:1fr}.beta-roadmap-head,.beta-member-bar{align-items:flex-start;flex-direction:column}.feedback-floating b{display:none}}@media(max-width:600px){.roadmap-grid{grid-template-columns:1fr}.beta-announcement{margin:10px 12px 0;justify-content:flex-start;flex-wrap:wrap}.feedback-floating{right:16px;bottom:76px;width:46px;height:46px;padding:0;justify-content:center}} /* Phase 27 — stable multilingual layout. Arabic text is RTL without mirroring the application shell. */ html[data-text-direction="__disabled_rtl__"] body{direction:ltr!important;padding-left:var(--brand-rail-width)!important;padding-right:0!important} html[data-text-direction="__disabled_rtl__"] .site-sidebar.brand-rail{left:0!important;right:auto!important;border-right:1px solid var(--line)!important;border-left:0!important} html[data-text-direction="__disabled_rtl__"] .site-header{left:var(--brand-rail-width)!important;right:0!important;width:calc(100% - var(--brand-rail-width))!important} html[data-text-direction="__disabled_rtl__"] .header-actions{margin-left:auto!important;margin-right:0!important} html[data-text-direction="__disabled_rtl__"] [data-i18n],html[data-text-direction="__disabled_rtl__"] [data-i18n-placeholder],html[data-text-direction="__disabled_rtl__"] .landing-copy,html[data-text-direction="__disabled_rtl__"] .beta-announcement,html[data-text-direction="__disabled_rtl__"] .landing-proof article,html[data-text-direction="__disabled_rtl__"] .platform-coverage,html[data-text-direction="__disabled_rtl__"] .beta-roadmap,html[data-text-direction="__disabled_rtl__"] .feedback-modal,html[data-text-direction="__disabled_rtl__"] .panel,html[data-text-direction="__disabled_rtl__"] .metric-card,html[data-text-direction="__disabled_rtl__"] .form-section{direction:rtl;text-align:right} html[data-text-direction="__disabled_rtl__"] input,html[data-text-direction="__disabled_rtl__"] textarea{direction:rtl;text-align:right} html[data-text-direction="__disabled_rtl__"] select{direction:ltr;text-align:left} html[data-text-direction="__disabled_rtl__"] .landing-actions,html[data-text-direction="__disabled_rtl__"] .landing-trust-row,html[data-text-direction="__disabled_rtl__"] .header-actions,html[data-text-direction="__disabled_rtl__"] .product-preview-shell,html[data-text-direction="__disabled_rtl__"] .preview-dashboard,html[data-text-direction="__disabled_rtl__"] .chart-period-tabs{direction:ltr} html[data-text-direction="__disabled_rtl__"] .landing-copy h1,html[data-text-direction="__disabled_rtl__"] .landing-copy>p{max-width:720px} @media(max-width:900px){html[data-text-direction="__disabled_rtl__"] body{padding-left:0!important}html[data-text-direction="__disabled_rtl__"] .site-header{left:0!important;width:100%!important}} /* Phase 63 localization resilience */ :where(button,.btn,.chip,.badge,.nav-link,.sidebar a,label,h1,h2,h3,p,td,th){overflow-wrap:anywhere;} :where(button,.btn,.chip,.badge){white-space:normal;line-height:1.25;min-width:0;} select{max-width:100%;text-overflow:ellipsis;} [data-i18n]{min-width:0;} /* Phase 64 localization resilience */ html[lang="pl"] :where(button,.button,.nav-link,.chip,.badge,th,td){overflow-wrap:anywhere;hyphens:auto;} /* Phase 65: release hardening, translated text resilience and market research */ button,a,.button,.nav a,.field span,.panel-heading h2{overflow-wrap:anywhere} .button{white-space:normal;min-height:42px} .language-select{max-width:min(210px,34vw)} .market-status{margin-top:12px;padding:11px 13px;border-radius:12px;background:var(--surface-2,#f4f6f8);font-size:.9rem} .market-status.error{border:1px solid rgba(220,38,38,.35)} .market-status.success{border:1px solid rgba(16,185,129,.35)} .market-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px} .market-summary>div{padding:13px;border:1px solid var(--line,rgba(120,130,150,.22));border-radius:14px;background:var(--surface-2,rgba(127,127,127,.06))} .market-summary span{display:block;font-size:.78rem;opacity:.68;margin-bottom:4px}.market-summary strong{font-size:1.05rem} .market-results{display:grid;gap:10px}.market-empty{padding:34px 18px;text-align:center;opacity:.68} .market-result-card{display:grid;grid-template-columns:58px minmax(0,1fr) auto 32px;align-items:center;gap:12px;padding:11px;border:1px solid var(--line,rgba(120,130,150,.22));border-radius:15px} .market-result-card img,.market-result-image{width:58px;height:58px;object-fit:contain;border-radius:11px;background:var(--surface-2,rgba(127,127,127,.08));display:grid;place-items:center} .market-result-body{min-width:0}.market-result-body strong,.market-result-body span{display:block}.market-result-body strong{white-space:normal}.market-result-body span{font-size:.8rem;opacity:.65;margin-top:4px}.market-result-card>a{text-decoration:none;font-size:1.15rem} .legal-page{max-width:860px}.legal-page h2{margin-top:28px}.legal-page p,.legal-page li{line-height:1.75}.footer-links{display:flex;gap:14px;flex-wrap:wrap}.footer-links a{font-size:.82rem;opacity:.72;text-decoration:none} @media(max-width:720px){.market-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.market-result-card{grid-template-columns:48px minmax(0,1fr) auto}.market-result-card img,.market-result-image{width:48px;height:48px}.market-result-card>a{grid-column:3}} /* Phase 66 — commercial-grade market intelligence */ .market-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;padding-block:42px 26px} .market-hero>div:first-child{max-width:760px}.market-hero .eyebrow{color:var(--primary);font-weight:850;text-transform:uppercase} .market-hero h1{font-size:clamp(34px,4vw,58px);letter-spacing:-.045em;margin:10px 0}.market-hero p{font-size:16px;line-height:1.7;color:var(--muted);max-width:680px} .market-hero-badge{display:flex;align-items:center;gap:12px;padding:15px 17px;border:1px solid color-mix(in srgb,var(--primary) 24%,var(--line));border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--primary) 7%,var(--surface)),var(--surface));box-shadow:var(--shadow-xs);min-width:260px} .market-hero-badge>span{color:#10b981;font-size:12px;filter:drop-shadow(0 0 7px rgba(16,185,129,.65))}.market-hero-badge div{display:grid;gap:3px}.market-hero-badge strong{font-size:13px}.market-hero-badge small{font-size:11px;color:var(--muted);line-height:1.35} .market-control-panel,.market-results-panel{border-radius:22px!important;box-shadow:0 20px 50px rgba(15,23,42,.06)} .market-control-panel .panel-heading,.market-results-panel .panel-heading{align-items:center}.panel-kicker{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--primary);font-weight:900;margin-bottom:5px} .market-quota,.market-source-pill{padding:7px 10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font-size:11px;color:var(--muted);font-weight:760} .market-action-row{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap}.market-action-row>span{font-size:11px;color:var(--muted);max-width:360px;line-height:1.45}.market-research-cta{min-width:200px;position:relative}.market-research-cta.is-loading{padding-left:44px}.market-research-cta.is-loading:before{content:'';position:absolute;left:18px;width:16px;height:16px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:market-spin .7s linear infinite}@keyframes market-spin{to{transform:rotate(360deg)}} .market-status{display:flex;align-items:center;gap:9px}.market-status.loading:before,.market-status.success:before,.market-status.error:before{content:'•';font-size:20px}.market-status.loading:before{color:#f59e0b}.market-status.success:before{color:#10b981}.market-status.error:before{color:#ef4444} .market-summary>div{position:relative;overflow:hidden}.market-summary>div:after{content:'';position:absolute;inset:auto -18px -28px auto;width:70px;height:70px;border-radius:50%;background:color-mix(in srgb,var(--primary) 8%,transparent)} .market-result-card{grid-template-columns:30px 58px minmax(0,1fr) auto 34px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.market-result-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 35%,var(--line));box-shadow:0 12px 30px rgba(15,23,42,.08)} .market-rank{width:26px;height:26px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center;font-size:11px;font-weight:850;color:var(--muted)}.market-open-link{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary)} .market-empty-state{min-height:280px;display:grid;place-items:center;align-content:center;text-align:center;gap:8px;padding:40px}.market-empty-state strong{font-size:16px}.market-empty-state span{font-size:13px;color:var(--muted);max-width:440px;line-height:1.55}.market-empty-icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 9%,var(--surface));color:var(--primary);font-size:28px;margin-bottom:5px} @media(max-width:800px){.market-hero{align-items:flex-start;flex-direction:column}.market-hero-badge{width:100%}.market-result-card{grid-template-columns:26px 48px minmax(0,1fr) auto}.market-result-card>a{grid-column:4}.market-source-pill,.market-quota{max-width:45%;text-align:right}.market-summary{grid-template-columns:1fr 1fr}} @media(max-width:520px){.market-summary{grid-template-columns:1fr}.market-result-card{grid-template-columns:24px 42px minmax(0,1fr)}.market-result-card>b{grid-column:3}.market-result-card>a{grid-column:3;justify-self:end;margin-top:-34px}.market-rank{width:22px;height:22px}.market-action-row{align-items:stretch;flex-direction:column}.market-research-cta{width:100%}} /* Phase 68 — AI Profit Simulator */ .profit-hero{align-items:center}.profit-layout{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:24px;padding-bottom:56px}.profit-input-panel{position:sticky;top:92px;height:max-content}.profit-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.profit-form-grid label{display:flex;flex-direction:column;gap:7px;font-size:.84rem;color:var(--muted)}.profit-form-grid label:first-child,.profit-form-grid label:nth-child(2),.profit-form-grid label:last-child{grid-column:1/-1}.profit-form-grid input,.profit-form-grid select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2,var(--surface));color:var(--text);padding:0 12px}.profit-form-grid input[type=range]{padding:0;min-height:26px}.profit-form-grid output{font-weight:800;color:var(--text)}.profit-form-actions{display:flex;gap:10px;margin-top:18px}.profit-form-actions .wide{flex:1}.profit-results{display:grid;gap:20px;min-width:0}.profit-score-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.profit-score-grid article{padding:20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,var(--surface),var(--surface-2,var(--surface)));box-shadow:var(--shadow-sm)}.profit-score-grid span{display:block;color:var(--muted);font-size:.82rem}.profit-score-grid strong{display:block;margin:8px 0 4px;font-size:1.62rem;letter-spacing:-.04em}.profit-score-grid small{color:var(--muted)}.profit-score-grid .hero-score{background:linear-gradient(145deg,rgba(91,94,255,.18),rgba(0,194,168,.10));border-color:rgba(91,94,255,.3)}.profit-chart-grid,.profit-insight-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.profit-svg-wrap{min-height:230px;color:var(--primary,#635bff);overflow:hidden}.profit-svg-wrap svg{width:100%;height:auto;display:block}.chart-axis{stroke:var(--line);stroke-width:1}.chart-line{fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.profit-advice-list{display:grid;gap:10px;margin-top:16px}.advice-item{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--surface-2,var(--surface))}.advice-item i{width:9px;height:9px;border-radius:50%;margin-top:6px;background:#6b7280}.advice-item.good i{background:#10b981}.advice-item.warn i{background:#f59e0b}.advice-item.danger i{background:#ef4444}.advice-item.focus i{background:#6366f1}.risk-bars{display:grid;gap:16px;margin-top:18px}.risk-bars>div>span{display:flex;justify-content:space-between;font-size:.86rem}.risk-bars em{display:block;height:9px;background:var(--surface-3,rgba(120,120,140,.15));border-radius:999px;overflow:hidden;margin-top:7px}.risk-bars i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#10b981,#f59e0b,#ef4444)}.scenario-table-wrap{overflow:auto}.scenario-table{width:100%;border-collapse:collapse}.scenario-table th,.scenario-table td{padding:13px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}.scenario-table th{font-size:.76rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.score-chip{display:inline-flex;padding:4px 8px;border-radius:999px;background:rgba(99,102,241,.12);color:var(--primary,#6366f1);font-weight:800}.form-status{min-height:20px;margin:10px 0 0;color:var(--muted)} @media(max-width:1180px){.profit-layout{grid-template-columns:1fr}.profit-input-panel{position:static}.profit-score-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:760px){.profit-form-grid,.profit-chart-grid,.profit-insight-grid,.profit-score-grid{grid-template-columns:1fr}.profit-form-grid label{grid-column:1/-1}.profit-form-actions{flex-direction:column}.profit-layout{gap:16px}.profit-score-grid strong{font-size:1.45rem}} /* Phase 69: AI Coach, decision command center, goal planner */ .coach-summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.coach-score-card strong{font-size:42px}.coach-score-track{height:10px;background:var(--surface-2,#eef2f7);border-radius:999px;overflow:hidden;margin:16px 0 10px}.coach-score-track span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),#22c55e);border-radius:inherit}.coach-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.75fr);gap:20px;align-items:start}.coach-actions,.decision-recommendations{display:grid;gap:12px}.coach-action,.decision-rec{display:grid;grid-template-columns:38px 1fr auto;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--border);border-radius:18px;background:var(--card);text-decoration:none;color:inherit;transition:.18s}.coach-action:hover,.decision-rec:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.coach-action>span,.decision-rec>span{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--surface-2);font-weight:800}.coach-action p,.decision-rec p{margin:5px 0 0;color:var(--muted)}.coach-action--danger,.decision-rec--danger{border-color:rgba(239,68,68,.35)}.coach-action--warning,.decision-rec--warning{border-color:rgba(245,158,11,.38)}.coach-action--success,.decision-rec--success{border-color:rgba(34,197,94,.35)}.coach-product-list{display:grid;gap:10px}.coach-product{display:grid;grid-template-columns:minmax(160px,1fr) repeat(2,minmax(110px,.5fr)) 36px;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);border-radius:16px;background:var(--card)}.coach-product small,.coach-product span{display:block;color:var(--muted);font-size:12px}.coach-product .negative{color:#ef4444}.decision-command{padding-bottom:48px}.decision-risk-grid,.goal-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:18px}.goal-plan-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.decision-risk-grid strong,.goal-plan-grid strong{display:block;font-size:28px;margin-top:8px}.goal-advice{margin-top:16px}.report-ai-summary{margin:22px 0;padding:20px;border-radius:18px;background:linear-gradient(135deg,rgba(79,70,229,.09),rgba(16,185,129,.08));border:1px solid var(--border)}.report-ai-summary h3{margin:6px 0 8px}.report-ai-summary p{margin:0;color:var(--muted);line-height:1.65} @media(max-width:900px){.coach-summary-grid,.decision-risk-grid{grid-template-columns:1fr}.coach-layout{grid-template-columns:1fr}.goal-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.coach-product{grid-template-columns:1fr 1fr}.coach-product>a{display:none}} @media(max-width:560px){.goal-plan-grid{grid-template-columns:1fr}.coach-product{grid-template-columns:1fr}.coach-action,.decision-rec{grid-template-columns:32px 1fr}.coach-action>b,.decision-rec>b{display:none}} /* Phase 70 release hardening */ .skip-link{position:fixed;left:12px;top:12px;z-index:10000;transform:translateY(-160%);padding:.75rem 1rem;border-radius:.75rem;background:var(--surface,#fff);color:var(--text,#111);box-shadow:0 10px 30px rgba(0,0,0,.18);font-weight:700} .skip-link:focus{transform:translateY(0)} :where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid color-mix(in srgb,var(--brand,#5b6cff) 70%,white);outline-offset:3px} .global-error-toast{position:fixed;right:20px;bottom:20px;z-index:10000;max-width:min(420px,calc(100vw - 40px));padding:14px 16px;border-radius:14px;background:var(--surface,#fff);color:var(--text,#111);border:1px solid rgba(239,68,68,.35);box-shadow:0 18px 60px rgba(0,0,0,.22);font-weight:650;line-height:1.45} .global-error-toast[hidden]{display:none} .report-table td{overflow-wrap:anywhere;word-break:break-word} @media(max-width:640px){.global-error-toast{right:12px;bottom:12px;max-width:calc(100vw - 24px)}.report-table{min-width:760px}} /* Phase 71: connectivity and system readiness */ .connectivity-banner{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:1200;max-width:min(92vw,720px);padding:12px 18px;border:1px solid #f59e0b66;border-radius:14px;background:#291b05;color:#fff7d6;box-shadow:0 16px 50px #0005;font-weight:700;text-align:center}.system-check-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start;padding-bottom:56px}.system-score-card,.system-help-card,.system-check-list{border:1px solid var(--line);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-soft)}.system-score-card{padding:24px;position:sticky;top:92px}.system-score-card span{display:block;color:var(--muted);font-weight:700}.system-score-card strong{display:block;font-size:48px;line-height:1.1;margin:10px 0}.system-score-card p{margin:0;color:var(--muted)}.system-check-list{padding:8px}.system-check-row{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:14px;align-items:center;padding:17px 16px;border-bottom:1px solid var(--line)}.system-check-row:last-child{border-bottom:0}.system-check-row p{margin:5px 0 0;color:var(--muted);overflow-wrap:anywhere}.system-check-row>b{font-size:12px;text-transform:uppercase;letter-spacing:.06em}.system-check-dot{width:12px;height:12px;border-radius:999px;background:#94a3b8}.system-check-row--ok .system-check-dot{background:#10b981;box-shadow:0 0 0 5px #10b98120}.system-check-row--warning .system-check-dot{background:#f59e0b;box-shadow:0 0 0 5px #f59e0b20}.system-check-row--error .system-check-dot{background:#ef4444;box-shadow:0 0 0 5px #ef444420}.system-check-row--ok>b{color:#059669}.system-check-row--warning>b{color:#d97706}.system-check-row--error>b{color:#dc2626}.system-help-card{grid-column:2;padding:22px}.system-help-card h2{margin-top:0}.system-check-loading{padding:28px;color:var(--muted);text-align:center}@media(max-width:820px){.system-check-layout{grid-template-columns:1fr}.system-score-card{position:static}.system-help-card{grid-column:auto}.system-check-row{grid-template-columns:12px minmax(0,1fr)}.system-check-row>b{grid-column:2}} /* Phase 72: explicit data-state feedback */ .dashboard-data-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 18px;padding:15px 17px;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)} .dashboard-data-notice strong{display:block;margin-bottom:4px}.dashboard-data-notice p{margin:0;color:var(--muted)} .dashboard-data-notice--warning{border-color:rgba(245,158,11,.38);background:rgba(245,158,11,.08)} .dashboard-data-notice--error{border-color:rgba(239,68,68,.38);background:rgba(239,68,68,.08)} .dashboard-data-notice--auth{border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.08)} .dashboard-empty--error,.dashboard-empty--auth{display:grid;justify-items:start;gap:8px;text-align:left} @media(max-width:640px){.dashboard-data-notice{align-items:flex-start;flex-direction:column}.dashboard-data-notice .button{width:100%}} /* Phase 77: explicit authenticated-data states */ .decision-data-state{margin:14px 0;padding:18px 20px;border:1px solid var(--line,#d9e1ec);border-radius:16px;background:var(--surface,#fff);display:grid;gap:8px;overflow-wrap:anywhere} .decision-data-state[hidden]{display:none} .decision-data-state.warning{border-color:#d9a441;background:color-mix(in srgb,#d9a441 9%,var(--surface,#fff))} .decision-data-state.error{border-color:#d35d6e;background:color-mix(in srgb,#d35d6e 8%,var(--surface,#fff))} .decision-data-state p{margin:0;color:var(--muted,#64748b)} .decision-data-state .button{justify-self:start;margin-top:4px} @media(max-width:560px){.decision-data-state{padding:15px}.decision-data-state .button{width:100%;justify-content:center}} /* Phase 80 release-candidate hardening */ .modal-open{overflow:hidden} .report-state,.decision-disclosure,.market-data-disclaimer{border:1px solid var(--line,rgba(127,127,127,.25));border-radius:16px;padding:16px 18px;margin-bottom:18px;background:var(--card,#fff)} .report-state p,.decision-disclosure p,.market-data-disclaimer p{margin:6px 0 0;color:var(--muted,#64748b);line-height:1.6} .report-state--error{border-color:rgba(220,38,38,.35)}.report-state--loading{opacity:.85}.report-state .button{margin-top:12px} .hero-actions button:disabled{opacity:.45;cursor:not-allowed} .decision-disclosure{margin-top:16px}.market-data-disclaimer{margin-bottom:14px;font-size:.92rem} @media(max-width:640px){.report-state,.decision-disclosure,.market-data-disclaimer{border-radius:14px;padding:14px}}