/* ThresholdIQ Styles Fonts loaded via Google Fonts CDN (see index.html ) */ :root { /* ── Brand accent — deep teal ── */ --a: #0d9488; --a-h: #0f766e; --a-2: #14b8a6; --a-dim: #f0fdfa; --a-border: #99f6e4; --a-glow: rgba(13,148,136,.1); --a-text: #134e4a; /* ── Sidebar — crisp white ── */ --sb: #ffffff; --sb-surf: #f8fafc; --sb-hover: #f1f5f9; --sb-border:#e8ecf2; --sb-text: #0f172a; --sb-text2: #334155; --sb-text3: #64748b; --sb-text4: #94a3b8; /* ── Main canvas — cool slate ── */ --bg: #f1f5f9; --surf: #ffffff; --surf2: #f8fafc; --surf3: #f1f5f9; --border: #e2e8f0; --border2: #cbd5e1; /* ── Text ── */ --fg: #0f172a; --fg2: #1e293b; --fg3: #475569; --fg4: #94a3b8; --fg5: #cbd5e1; /* ── Semantic ── */ --green: #059669; --green-dim: #ecfdf5; --green-border: #6ee7b7; --amber: #d97706; --amber-dim: #fffbeb; --amber-border: #fde68a; --orange: #ea580c; --orange-dim:#fff7ed; --orange-border:#fed7aa; --red: #dc2626; --red-dim: #fef2f2; --red-border: #fca5a5; --violet: #7c3aed; --violet-dim:#f5f3ff; --violet-border:#c4b5fd; /* ── Compat aliases ── */ --sky:var(--a);--sky-2:var(--a-h);--sky-dim:var(--a-dim);--sky-border:var(--a-border); --cyan:var(--a);--cyan-glow:var(--a-dim);--border-cyan:var(--a-border); --ind:var(--a);--ind2:var(--a-h);--ind-dim:var(--a-dim);--ind-border:var(--a-border); --surf-2:var(--surf2);--surf-3:var(--surf3); --red-glow:var(--red-dim);--amber-glow:var(--amber-dim); --orange-glow:var(--orange-dim);--green-glow:var(--green-dim);--violet-glow:var(--violet-dim); --sb-border2:#d4d9e4;--sb-text3-val:#64748b; /* ── Typography (self-hosted — falls back to system fonts) ── */ --ui: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, 'Courier New', monospace; --display: 'Figtree', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* ── Geometry ── */ --r-xs:3px; --r-sm:7px; --r-md:10px; --r-lg:14px; --r-xl:20px; /* ── Shadows ── */ --sh-xs: 0 1px 2px rgba(15,23,42,.05); --sh-sm: 0 1px 3px rgba(15,23,42,.06),0 2px 10px rgba(15,23,42,.04); --sh-md: 0 4px 14px rgba(15,23,42,.08),0 1px 4px rgba(15,23,42,.05); --sh-lg: 0 20px 60px rgba(15,23,42,.13),0 8px 20px rgba(15,23,42,.06); --sh-ring: 0 0 0 3px var(--a-glow); --sh-inset:inset 0 1px 0 rgba(255,255,255,.6); --trans: all .14s cubic-bezier(.4,0,.2,1); --shadow-sm:var(--sh-sm);--shadow-md:var(--sh-md);--shadow-lg:var(--sh-lg); } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html{height:100%;overflow-x:hidden;} body{ min-height:100%; overflow-y:auto; overflow-x:hidden; background:var(--bg); max-width:100vw; width:100%; } body::-webkit-scrollbar{width:6px;} body::-webkit-scrollbar-track{background:transparent;} body::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;} body{font-family:var(--ui);color:var(--fg);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;background:var(--bg);} ::-webkit-scrollbar{width:5px;height:6px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;} ::-webkit-scrollbar-thumb:hover{background:var(--fg4);} button{cursor:pointer;border:none;background:none;font-family:var(--ui);} input,select,textarea{font-family:var(--ui);} /* ══════ HEADER ══════════════════════════════════════════════ */ header{ display:flex; align-items:center; height:56px; background:var(--surf); border-bottom:1px solid var(--border); box-shadow:0 1px 0 rgba(15,23,42,.04); position:sticky; top:0; z-index:100; flex-wrap:wrap; min-height:56px; } .header-brand{ display:flex;align-items:center;gap:11px; padding:0 20px;height:100%;flex-shrink:0; border-right:1px solid var(--border);text-decoration:none; } .brand-link{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; } .brand-mark{ width:34px;height:34px;border-radius:10px;flex-shrink:0; background:linear-gradient(140deg,#2dd4bf 0%,#0d9488 45%,#0f766e 100%); display:flex;align-items:center;justify-content:center; box-shadow:0 0 0 1px rgba(13,148,136,.25),0 3px 12px rgba(13,148,136,.25),var(--sh-inset); } .brand-mark svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;} .brand-name{font-size:.97rem;font-weight:900;color:var(--fg);letter-spacing:-.03em;line-height:1;} .brand-name em{color:var(--a);font-style:normal;} .brand-tag{font-family:var(--mono);font-size:.48rem;color:var(--fg4);letter-spacing:.14em;text-transform:uppercase;margin-top:2px;} .header-status{ display:flex;align-items:center;gap:9px;padding:0 22px;flex:1; font-family:var(--mono);font-size:.62rem;color:var(--fg4); min-width:0; } .pulse{width:7px;height:7px;border-radius:50%;background:var(--fg5);transition:background .4s;flex-shrink:0;} .pulse.active{background:var(--green);box-shadow:0 0 0 3px rgba(5,150,105,.15);animation:pulseAnim 2s ease-in-out infinite;} .pulse.warn{background:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.15);animation:pulseAnim 1.2s ease-in-out infinite;} @keyframes pulseAnim{0%,100%{opacity:1}50%{opacity:.4}} #status-text{color:var(--fg3);font-weight:600;transition:color .3s;letter-spacing:.06em;text-transform:uppercase;font-size:.61rem;} .header-right{ display:flex; align-items:center; gap:10px; padding:0 20px; border-left:1px solid var(--border); flex-wrap:wrap; } .usage-pill{font-family:var(--mono);font-size:.6rem;color:var(--fg4);background:var(--surf2);border:1px solid var(--border);padding:5px 13px;border-radius:99px;letter-spacing:.02em;} .btn-upgrade{ font-size:.73rem;font-weight:700;letter-spacing:.01em; background:linear-gradient(135deg,#2dd4bf 0%,var(--a) 55%);color:#fff; padding:7px 17px;border-radius:var(--r-md); box-shadow:0 1px 3px rgba(13,148,136,.3),0 4px 12px rgba(13,148,136,.2); transition:var(--trans); } .btn-upgrade:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 3px 8px rgba(13,148,136,.35),0 8px 20px rgba(13,148,136,.22);} .btn-manage{ font-size:.73rem;font-weight:700;letter-spacing:.01em; background:#fff;color:#0d9488;border:1px solid #0d9488; padding:7px 16px;border-radius:var(--r-md); transition:var(--trans);cursor:pointer; display:none;align-items:center;gap:5px; } .btn-manage:hover{background:#0d9488;color:#fff;} .btn-logout{ padding:7px 10px; background:transparent; border:1px solid var(--border); color:var(--text-muted); border-radius:var(--r-md); cursor:pointer; transition:var(--trans); display:flex;align-items:center; } .btn-logout:hover{ background:rgba(239,68,68,0.1); border-color:#ef4444; color:#ef4444; } .pro-badge{ display:none;align-items:center;gap:5px; font-family:var(--mono);font-size:.59rem;font-weight:700;letter-spacing:.08em; background:var(--a-dim);border:1px solid var(--a-border); color:var(--a-h);padding:4px 12px;border-radius:99px; } .pro-badge.visible{display:flex;} /* ══════ SHELL ═══════════════════════════════════════════════ */ .app-shell{ display:grid; grid-template-columns:310px 1fr; min-height:calc(100vh - 56px); max-width:100vw; overflow-x:hidden; } /* ══════ SIDEBAR ═════════════════════════════════════════════ */ .sidebar{ display:flex;flex-direction:column; background:var(--sb);border-right:1px solid var(--sb-border); overflow:hidden; position:sticky;top:0;height:calc(100vh - 56px);align-self:start; max-width:100%; } .sidebar-scroll{flex:1;overflow-y:auto;overflow-x:hidden;} .sidebar-scroll::-webkit-scrollbar{width:3px;} .sidebar-scroll::-webkit-scrollbar-thumb{background:var(--sb-border);} /* ── Profiles ── */ .profiles-panel{padding:14px 16px;border-bottom:1px solid var(--sb-border);} .profiles-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;} .profiles-title{font-size:.61rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sb-text4);display:flex;align-items:center;gap:7px;} .profiles-title .pro-only{font-size:.5rem;background:var(--a-dim);border:1px solid var(--a-border);color:var(--a-h);padding:1px 6px;border-radius:3px;font-weight:800;letter-spacing:.05em;} .btn-save-profile{font-size:.63rem;font-weight:600;background:var(--sb-surf);border:1px solid var(--sb-border);color:var(--sb-text3);padding:4px 10px;border-radius:var(--r-sm);transition:var(--trans);box-shadow:var(--sh-xs);} .btn-save-profile:hover:not(:disabled){border-color:var(--a-border);color:var(--a);background:var(--a-dim);} .btn-save-profile:disabled{opacity:.38;cursor:not-allowed;} .profiles-list{display:flex;flex-direction:column;gap:4px;max-height:120px;overflow-y:auto;} .profile-item{display:flex;align-items:center;gap:8px;padding:7px 10px;background:var(--surf2);border:1px solid var(--sb-border);border-radius:var(--r-sm);cursor:pointer;transition:var(--trans);box-shadow:var(--sh-xs);} .profile-item:hover{border-color:var(--a-border);background:var(--a-dim);} .profile-item.active-profile{border-color:var(--a);background:var(--a-dim);box-shadow:0 0 0 2px var(--a-glow);} .profile-icon{font-size:.85rem;flex-shrink:0;} .profile-meta{flex:1;overflow:hidden;} .profile-name{font-size:.72rem;font-weight:700;color:var(--sb-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .profile-item.active-profile .profile-name{color:var(--a-h);} .profile-detail{font-size:.57rem;color:var(--sb-text4);font-family:var(--mono);margin-top:1px;} .profile-del{width:20px;height:20px;border-radius:4px;flex-shrink:0;font-size:.68rem;color:var(--sb-text4);display:flex;align-items:center;justify-content:center;transition:var(--trans);} .profile-del:hover{background:var(--red-dim);color:var(--red);} .profile-locked-msg{font-size:.66rem;color:var(--sb-text4);font-family:var(--mono);text-align:center;padding:10px;background:var(--surf3);border:1.5px dashed var(--sb-border);border-radius:var(--r-sm);line-height:1.65;} /* ── Steps ── */ .step-block{border-bottom:1px solid var(--sb-border);} .step-head{ display:flex;align-items:center;gap:11px; padding:13px 16px;cursor:pointer;transition:background .12s;user-select:none; } .step-head:hover{background:var(--sb-hover);} .step-num{ width:23px;height:23px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:.6rem;font-weight:700; border:2px solid var(--sb-border);color:var(--sb-text4);transition:var(--trans); } .step-num.done{ background:var(--green);border-color:var(--green);color:#fff;font-size:.74rem; } .step-num.active{ background:var(--a);border-color:var(--a);color:#fff; box-shadow:0 0 0 3px var(--a-glow); } .step-label{font-size:.78rem;font-weight:700;color:var(--sb-text4);transition:color .14s;flex:1;letter-spacing:-.01em;} .step-label.active{color:var(--sb-text);} .step-label.done{color:var(--sb-text2);} .step-chevron{font-size:.6rem;color:var(--sb-text4);transition:transform .2s;} .step-chevron.open{transform:rotate(180deg);} .step-body{display:none;padding:4px 16px 18px;} .step-body.open{display:block;} /* ── Drop zone ── */ .drop-zone{ border:2px dashed var(--sb-border);border-radius:var(--r-lg); padding:24px 16px;text-align:center;cursor:pointer; background:var(--surf);transition:var(--trans);position:relative; box-shadow:var(--sh-xs); } .drop-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;} .drop-zone:hover,.drop-zone.over{ border-color:var(--a);background:var(--a-dim); box-shadow:0 0 0 3px var(--a-glow); } .dz-icon{font-size:1.8rem;margin-bottom:9px;display:block;} .dz-title{font-size:.81rem;font-weight:700;color:var(--sb-text);margin-bottom:4px;} .dz-sub{font-size:.66rem;color:var(--sb-text3);} .dz-sub strong{color:var(--sb-text2);font-weight:700;} .file-info{ display:none;align-items:center;gap:10px;margin-top:10px; padding:10px 13px;background:var(--a-dim); border:1px solid var(--a-border);border-radius:var(--r-sm); box-shadow:var(--sh-xs); } .file-info.visible{display:flex;} .file-icon{font-size:1rem;flex-shrink:0;} .file-meta{flex:1;overflow:hidden;min-width:0;} .file-name{font-size:.75rem;font-weight:700;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .file-rows{font-size:.6rem;color:var(--a-h);font-family:var(--mono);margin-top:1px;} .file-clear{width:22px;height:22px;border-radius:5px;flex-shrink:0;font-size:.7rem;color:var(--fg4);display:flex;align-items:center;justify-content:center;transition:var(--trans);} .file-clear:hover{background:var(--red-dim);color:var(--red);} /* ── Size settings ── */ .size-settings{ margin-top:10px;padding:11px 13px; background:var(--surf2);border:1px solid var(--sb-border); border-radius:var(--r-sm);box-shadow:var(--sh-xs); } .size-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:8px;} .size-row:last-child{margin-bottom:0;} .size-label{font-size:.61rem;font-weight:700;color:var(--sb-text3)!important;min-width:34px;} .size-input{ width:52px;font-family:var(--mono);font-size:.7rem; background:var(--surf);border:1.5px solid var(--sb-border); color:var(--fg);padding:4px 7px;border-radius:5px; outline:none;text-align:center;transition:var(--trans); } .size-input:focus{border-color:var(--a);box-shadow:var(--sh-ring);} .size-hint{font-size:.59rem;color:var(--sb-text4);font-family:var(--mono);} .size-mode-row{display:flex;gap:3px;} .size-mode-btn{ font-size:.59rem;font-weight:700;padding:4px 9px; background:var(--surf);color:var(--sb-text3); border:1.5px solid var(--sb-border);border-radius:5px;cursor:pointer;transition:var(--trans); } .size-mode-btn.active{background:var(--a);color:#fff;border-color:var(--a);box-shadow:0 1px 4px rgba(13,148,136,.3);} .size-mode-btn:hover:not(.active){border-color:var(--a-border);color:var(--a);} .size-warning{display:none;margin-top:8px;padding:8px 10px;background:var(--amber-dim);border:1px solid var(--amber-border);border-radius:5px;font-size:.66rem;color:var(--amber);line-height:1.55;} .size-warning.show{display:block;} .size-error{display:none;margin-top:8px;padding:8px 10px;background:var(--red-dim);border:1px solid var(--red-border);border-radius:5px;font-size:.66rem;color:var(--red);line-height:1.55;} .size-error.show{display:block;} .btn-sample{ width:100%;margin-top:10px;font-size:.7rem;font-weight:600; color:var(--a-h);border:1.5px dashed var(--a-border); background:var(--a-dim);padding:8px;border-radius:var(--r-sm); transition:var(--trans);text-align:center; } .btn-sample:hover{background:#ccfbf1;border-style:solid;border-color:var(--a);} /* ── Mapper ── */ .mapper-section{margin-bottom:4px;} .mapper-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;} .mapper-section-title{ display:flex;align-items:center;gap:6px; font-size:.61rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sb-text3)!important; } .mapper-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;} .mapper-dot.dim{background:#7c3aed;} .mapper-dot.fact{background:var(--a);} .mapper-hint{font-size:.56rem;font-weight:500;text-transform:none;letter-spacing:0;color:var(--sb-text4);} .mapper-add-btn{ font-size:.63rem;font-weight:700; background:var(--surf);border:1.5px solid var(--sb-border); color:var(--sb-text3);padding:3px 10px;border-radius:5px;transition:var(--trans);box-shadow:var(--sh-xs); } .mapper-add-btn:hover:not(:disabled){border-color:var(--a-border);color:var(--a);background:var(--a-dim);} .mapper-add-btn:disabled{opacity:.35;cursor:not-allowed;} .mapper-list{display:flex;flex-direction:column;gap:5px;} .mapper-row{display:flex;align-items:center;gap:6px;animation:slideIn .13s ease forwards;} @keyframes slideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} @keyframes fadeSlide{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} .mapper-row-badge{ font-family:var(--mono);font-size:.52rem;font-weight:700;letter-spacing:.05em; padding:2px 6px;border-radius:4px;flex-shrink:0;min-width:34px;text-align:center; } .mapper-row-badge.dim{background:#f5f3ff;color:#7c3aed;border:1px solid #ddd6fe;} .mapper-row-badge.fact{background:var(--a-dim);color:var(--a-h);border:1px solid var(--a-border);} .mapper-row select{ flex:1;font-family:var(--ui);font-size:.72rem;font-weight:600; background:var(--surf);border:1.5px solid var(--sb-border); color:var(--fg);padding:6px 24px 6px 9px;border-radius:6px; outline:none;cursor:pointer;transition:var(--trans);-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' fill='none'%3E%3Cpath d='M1 1l3.5 4L8 1' stroke='%2394a3b8' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 7px center;box-shadow:var(--sh-xs); min-width:0; } .mapper-row select:hover{border-color:var(--border2);} .mapper-row select:focus{border-color:var(--a);box-shadow:var(--sh-ring);} .mapper-row select option{background:#fff;color:var(--fg);} .mapper-row-del{ width:26px;height:26px;flex-shrink:0;border-radius:6px; display:flex;align-items:center;justify-content:center; font-size:.74rem;color:var(--sb-text3);transition:var(--trans); border:1.5px solid var(--sb-border);background:var(--surf);box-shadow:var(--sh-xs); } .mapper-row-del:hover{background:var(--red-dim);color:var(--red);border-color:var(--red-border);} .mapper-empty{ font-size:.67rem;color:var(--sb-text4);font-family:var(--mono); padding:10px;text-align:center; border:1.5px dashed var(--sb-border);border-radius:var(--r-sm);background:var(--surf2); } .mapper-divider{height:1px;background:var(--sb-border);margin:13px 0;} /* ── Agg chips ── */ .fact-row-wrap{display:flex;flex-direction:column;gap:5px;animation:fadeSlide .13s ease forwards;} .fact-agg-row{display:flex;align-items:flex-start;gap:6px;} .fact-agg-row .mapper-row-badge{margin-top:6px;} .fact-fields{flex:1;display:flex;flex-direction:column;gap:5px;} .fact-col-row{display:flex;align-items:center;gap:6px;} .fact-agg-sel-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding-left:1px;} .agg-chip{ font-family:var(--mono);font-size:.56rem;font-weight:600;letter-spacing:.03em; padding:3px 8px;border-radius:4px;cursor:pointer; border:1.5px solid var(--sb-border);background:var(--surf); color:var(--sb-text3);transition:var(--trans);user-select:none;box-shadow:var(--sh-xs); } .agg-chip:hover:not(.pro-locked){border-color:var(--a-border);color:var(--a);background:var(--a-dim);} .agg-chip.selected{background:var(--a);border-color:var(--a);color:#fff;box-shadow:0 1px 6px rgba(13,148,136,.35);} .agg-chip.pro-locked{opacity:.4;cursor:pointer;} .agg-chip.pro-locked::after{content:' 🔒';font-size:.44rem;} /* ── Apply mapping ── */ #btn-apply-mapping,.btn-apply{ width:100%;font-size:.76rem;font-weight:700; background:var(--a-dim);border:1.5px solid var(--a-border); color:var(--a-h);padding:9px;border-radius:var(--r-sm); transition:var(--trans);margin-top:12px;box-shadow:var(--sh-xs); } #btn-apply-mapping:hover:not(:disabled),.btn-apply:hover:not(:disabled){ background:var(--a);color:#fff;border-color:var(--a); box-shadow:0 2px 8px rgba(13,148,136,.3); } #btn-apply-mapping:disabled,.btn-apply:disabled{opacity:.35;cursor:not-allowed;} /* ── Rule cards ── */ .rules-list{display:flex;flex-direction:column;gap:10px;} .rule-card{ background:var(--surf);border:1.5px solid var(--sb-border); border-radius:var(--r-md);padding:12px 13px; animation:fadeSlide .14s ease forwards;box-shadow:var(--sh-sm); position:relative;overflow:hidden; width:100%;box-sizing:border-box; } .rule-card::before{ content:'';position:absolute;top:0;left:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--a),#2dd4bf); border-radius:0 0 0 var(--r-md); } .rule-header{display:flex;flex-direction:column;gap:6px;margin-bottom:11px;} .rule-header-row1{display:flex;align-items:center;gap:6px;} .rule-header-row2{display:flex;align-items:center;gap:6px;} .rule-metric-sel{ flex:1;font-family:var(--ui);font-size:.72rem;font-weight:600; background:var(--surf2);border:1.5px solid var(--sb-border); color:var(--fg);padding:6px 9px;border-radius:6px; outline:none;cursor:pointer;transition:var(--trans);-webkit-appearance:none;box-shadow:var(--sh-xs); min-width:0; } .rule-dir-sel{ flex:1;font-family:var(--ui);font-size:.71rem;font-weight:600; background:var(--surf2);border:1.5px solid var(--sb-border); color:var(--fg);padding:6px 9px;border-radius:6px; outline:none;cursor:pointer;transition:var(--trans);-webkit-appearance:none;box-shadow:var(--sh-xs); min-width:0; } .rule-metric-sel:focus,.rule-dir-sel:focus{border-color:var(--a);box-shadow:var(--sh-ring);} .rule-metric-sel option,.rule-dir-sel option{background:#fff;color:var(--fg);} .rule-del{ width:28px;height:28px;border-radius:6px;flex-shrink:0; font-size:.76rem;color:var(--red); display:flex;align-items:center;justify-content:center;transition:var(--trans); border:1.5px solid var(--red-border);background:var(--red-dim);box-shadow:var(--sh-xs); } .rule-del:hover{background:var(--red);color:#fff;border-color:var(--red);} .rule-levels{display:flex;flex-direction:column;gap:7px;box-sizing:border-box;} .rule-level{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;} .lvl-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .lvl-dot.warn{background:var(--amber);box-shadow:0 0 0 2px rgba(217,119,6,.18);} .lvl-dot.crit{background:var(--orange);box-shadow:0 0 0 2px rgba(234,88,12,.18);} .lvl-dot.emrg{background:var(--red);box-shadow:0 0 0 2px rgba(220,38,38,.18);} .lvl-label{font-size:.61rem;font-weight:700;color:var(--fg3);width:68px;flex-shrink:0;text-transform:uppercase;letter-spacing:.05em;} .lvl-input{ flex:1 1 auto;font-family:var(--mono);font-size:.72rem; background:var(--surf2);border:1.5px solid var(--sb-border); color:var(--fg);padding:5px 9px;border-radius:6px; outline:none;transition:var(--trans);box-shadow:var(--sh-xs); min-width:60px; box-sizing:border-box; } .lvl-input:focus{border-color:var(--a);box-shadow:var(--sh-ring);} .lvl-input::placeholder{color:var(--fg4);} /* ── Add rule / Run buttons ── */ .btn-add-rule,#btn-add-rule{ width:100%;font-size:.73rem;font-weight:700; background:var(--surf2);border:1.5px dashed var(--sb-border); color:var(--sb-text3);padding:9px 14px;border-radius:var(--r-sm); transition:var(--trans);margin-top:8px; display:flex;align-items:center;justify-content:center;gap:6px; } .btn-add-rule:hover:not(:disabled),#btn-add-rule:hover:not(:disabled){ border-color:var(--a-border);color:var(--a);background:var(--a-dim);border-style:solid; } .btn-add-rule:disabled,#btn-add-rule:disabled{opacity:.35;cursor:not-allowed;} .btn-run,#btn-run{ width:100%;font-size:.82rem;font-weight:800;letter-spacing:.02em; background:linear-gradient(135deg,#2dd4bf 0%,#0d9488 50%,#0f766e 100%); color:#fff;padding:13px 14px;border-radius:var(--r-md); transition:var(--trans); box-shadow:0 1px 3px rgba(13,148,136,.35),0 4px 16px rgba(13,148,136,.22),var(--sh-inset); position:relative;overflow:hidden; } .btn-run::before,#btn-run::before{ content:'';position:absolute;inset:0; background:linear-gradient(to bottom,rgba(255,255,255,.14),rgba(255,255,255,0)); pointer-events:none; } .btn-run:hover:not(:disabled),#btn-run:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 2px 6px rgba(13,148,136,.4),0 8px 24px rgba(13,148,136,.3); } .btn-run:active:not(:disabled),#btn-run:active:not(:disabled){transform:translateY(0);} .btn-run:disabled,#btn-run:disabled{opacity:.4;cursor:not-allowed;} .btn-run:disabled,#btn-run:disabled{animation:none !important;} /* ── Attention glow: pulses after file drop to draw user to click ── */ @keyframes runGlow { 0% { box-shadow: 0 0 8px rgba(45,212,191,0.4), 0 0 20px rgba(13,148,136,0.2); transform: scale(1); } 50% { box-shadow: 0 0 20px rgba(45,212,191,0.7), 0 0 40px rgba(13,148,136,0.4), 0 0 60px rgba(13,148,136,0.15); transform: scale(1.02); } 100% { box-shadow: 0 0 8px rgba(45,212,191,0.4), 0 0 20px rgba(13,148,136,0.2); transform: scale(1); } } .btn-run.glow-attention,#btn-run.glow-attention { animation: runGlow 1.8s ease-in-out infinite; border: 1.5px solid rgba(45,212,191,0.6); } .run-hint{font-family:var(--mono);font-size:.57rem;color:var(--sb-text4);text-align:center;margin-top:6px;letter-spacing:.05em;} .sidebar-footer{ padding:14px 16px 16px;border-top:1px solid var(--sb-border); background:linear-gradient(to bottom,var(--sb),#f8fafb); } .sidebar-footer-text{font-size:.57rem;color:var(--sb-text4);font-family:var(--mono);text-align:center;margin-top:5px;} /* ══════ MAIN CONTENT ════════════════════════════════════════ */ .main-content{ display:flex; flex-direction:column; background:var(--bg); overflow:visible; min-width:0; max-width:100%; } /* ── KPI Strip ── */ .kpi-strip{ display:grid;grid-template-columns:repeat(5,1fr); background:var(--surf);border-bottom:1px solid var(--border); box-shadow:0 1px 0 rgba(15,23,42,.03);flex-shrink:0; overflow-x:auto; } .kpi,.kpi-card{ padding:14px 18px 16px;border-right:1px solid var(--border); cursor:default;transition:background .13s;position:relative;overflow:hidden; min-width:120px; } .kpi:last-child,.kpi-card:last-child{border-right:none;} .kpi:hover,.kpi-card:hover{background:var(--surf2);} .kpi-label{ font-family:var(--mono);font-size:.62rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--fg3);margin-bottom:7px; } .kpi-value,.kpi-val{ font-size:2rem;font-weight:900;color:var(--fg); line-height:1;letter-spacing:-.05em;transition:color .4s; font-variant-numeric:tabular-nums; } .kpi-sub{font-size:.65rem;color:var(--fg4);font-family:var(--mono);margin-top:6px;font-weight:600;} .kpi-accent{ position:absolute;bottom:0;left:0;right:0;height:3px; transform:scaleX(0);transform-origin:left; transition:transform .9s cubic-bezier(.4,0,.2,1); } .kpi-accent.cyan {background:linear-gradient(90deg,var(--a),#2dd4bf);} .kpi-accent.amber {background:linear-gradient(90deg,var(--amber),#fbbf24);} .kpi-accent.orange{background:linear-gradient(90deg,var(--orange),#fb923c);} .kpi-accent.red {background:linear-gradient(90deg,var(--red),#f87171);} .kpi-accent.green {background:linear-gradient(90deg,var(--green),#34d399);} .c-cyan {color:var(--a)!important;} .c-amber {color:var(--amber)!important;} .c-orange{color:var(--orange)!important;} .c-red {color:var(--red)!important;} .c-green {color:var(--green)!important;} /* ── Tab Bar ── */ .tab-bar{ display:flex;border-bottom:2px solid var(--border); background:var(--surf);flex-shrink:0;padding:0 8px; gap:4px; overflow-x:auto; -webkit-overflow-scrolling:touch; } .tab-btn{ font-size:.88rem;font-weight:800;color:var(--fg3); padding:14px 20px;border-bottom:3px solid transparent; transition:all .2s ease;white-space:nowrap; flex-shrink:0; border-radius:6px 6px 0 0; letter-spacing:.01em; position:relative; } .tab-btn:hover{color:var(--fg1);background:var(--surf2);} .tab-btn.active{ color:var(--a-h); border-bottom-color:var(--a); background:linear-gradient(180deg, var(--surf2) 0%, var(--surf) 100%); box-shadow:inset 0 -3px 0 var(--a); } /* ── Panes ── */ .tab-area{flex:1;overflow:visible;position:relative;} .pane{display:none;height:auto;overflow:visible;padding:20px;} .pane.active{display:flex;flex-direction:column;gap:16px;} /* Empty states */ .empty-state{ flex:1;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:16px;text-align:center;padding:60px 40px; } .es-icon{ width:66px;height:66px;border-radius:18px; background:linear-gradient(145deg,var(--a-dim),#ccfbf1); border:1.5px solid var(--a-border); display:flex;align-items:center;justify-content:center; font-size:1.7rem;box-shadow:var(--sh-sm); } .es-title{font-size:1.05rem;font-weight:800;color:var(--fg2);letter-spacing:-.025em;} .es-sub{font-size:.76rem;color:var(--fg4);line-height:1.8;max-width:300px;} /* ── Cards ── */ .card{ background:var(--surf);border:1px solid var(--border); border-radius:var(--r-lg);padding:18px 20px; box-shadow:var(--sh-sm);flex-shrink:0; max-width:100%; overflow:hidden; } .card-title{ font-family:var(--mono);font-size:.59rem;font-weight:600; letter-spacing:.11em;text-transform:uppercase;color:var(--fg4); margin-bottom:16px;display:flex;align-items:center;gap:8px; word-break:break-word; overflow-wrap:break-word; } .card-title::before{ content:'';display:inline-block;width:3px;height:13px; background:linear-gradient(180deg,var(--a),#2dd4bf); border-radius:2px; flex-shrink:0; } /* ══════ CHART SCROLL + SCRUBBER ═════════════════════════════ */ .chart-scroll-outer{ position:relative;overflow:hidden; border:1px solid var(--border);border-radius:var(--r-md); background:var(--surf2); max-width:100%; } .chart-scroll-inner{ overflow-x:auto;overflow-y:hidden; scroll-behavior:smooth; max-width:100%; } /* Beautiful custom scrollbar for chart */ .chart-scroll-inner::-webkit-scrollbar{height:10px;} .chart-scroll-inner::-webkit-scrollbar-track{ background:var(--surf3); border-top:1px solid var(--border); margin:0; } .chart-scroll-inner::-webkit-scrollbar-thumb{ background:linear-gradient(90deg,var(--a),#2dd4bf); border-radius:5px; border:2px solid var(--surf3); cursor:grab; } .chart-scroll-inner::-webkit-scrollbar-thumb:hover{ background:linear-gradient(90deg,var(--a-h),var(--a)); } .chart-scroll-inner::-webkit-scrollbar-thumb:active{ cursor:grabbing; } .chart-scroll-inner::-webkit-scrollbar-button{display:none;} .chart-canvas-wrap{height:248px;position:relative;max-width:100%;} .chart-density-wrap{height:88px;position:relative;max-width:100%;} /* ── Scrubber (range slider) ── */ .chart-scrubber-row{ display:flex;align-items:center;gap:12px; padding:10px 14px 9px; border-top:1px solid var(--border); background:linear-gradient(to bottom,var(--surf2),var(--surf3)); } .chart-scrubber-label{ font-family:var(--mono);font-size:.57rem;color:var(--fg4); white-space:nowrap;font-weight:600;letter-spacing:.04em; background:var(--surf);border:1px solid var(--border); padding:3px 8px;border-radius:4px;box-shadow:var(--sh-xs); min-width:52px;text-align:center; } .chart-scrubber{ flex:1;-webkit-appearance:none;appearance:none; height:6px;border-radius:3px;outline:none;cursor:pointer; background:var(--border2); background-image:linear-gradient(var(--a),var(--a)); background-repeat:no-repeat;background-size:0% 100%; transition:background-size .1s; min-width:100px; } .chart-scrubber::-webkit-slider-thumb{ -webkit-appearance:none; width:20px;height:20px;border-radius:50%; background:var(--surf); border:2.5px solid var(--a); box-shadow:0 1px 6px rgba(13,148,136,.35),0 0 0 3px var(--a-glow); cursor:grab;transition:transform .13s,box-shadow .13s; } .chart-scrubber::-webkit-slider-thumb:hover{ background:var(--a-dim); transform:scale(1.2); box-shadow:0 2px 10px rgba(13,148,136,.45),0 0 0 5px var(--a-glow); } .chart-scrubber::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.1);} .chart-scrubber::-moz-range-thumb{ width:18px;height:18px;border-radius:50%; background:var(--surf);border:2.5px solid var(--a);cursor:grab; } .chart-window-badge{ position:absolute;top:8px;right:10px;z-index:5; font-family:var(--mono);font-size:.56rem;font-weight:700; background:rgba(255,255,255,.95);border:1px solid var(--border); color:var(--fg3);padding:3px 10px;border-radius:99px; backdrop-filter:blur(4px);pointer-events:none; box-shadow:var(--sh-xs);letter-spacing:.04em; } /* ══════ ALERT LOG ═══════════════════════════════════════════ */ .log-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border);} .log-stat{font-family:var(--mono);font-size:.72rem;color:var(--fg3);margin-right:auto;font-weight:600;} .log-stat strong{color:var(--fg1);font-weight:800;} .filter-sel{ font-family:var(--ui);font-size:.78rem;font-weight:700; background:var(--surf);border:1.5px solid var(--border); color:var(--fg2);padding:8px 12px;border-radius:var(--r-sm); outline:none;cursor:pointer;transition:var(--trans);box-shadow:var(--sh-xs); } .filter-sel:focus{border-color:var(--a);box-shadow:var(--sh-ring);} .filter-sel option{background:#fff;} .export-bar{display:flex;gap:5px;align-items:center;margin-left:auto;flex-wrap:wrap;} .btn-export-csv,.btn-export-pdf{font-size:.72rem;font-weight:800;padding:8px 15px;border-radius:var(--r-sm);transition:var(--trans);display:flex;align-items:center;gap:5px;box-shadow:var(--sh-xs);} .btn-export-csv{background:var(--green-dim);border:1.5px solid var(--green-border);color:var(--green);} .btn-export-csv:hover{background:#d1fae5;border-color:var(--green);} .btn-export-pdf{background:var(--red-dim);border:1.5px solid var(--red-border);color:var(--red);} .btn-export-pdf:hover{background:#fee2e2;border-color:var(--red);} .btn-export-locked,.btn-export{ font-size:.66rem;font-weight:700; background:var(--a-dim);border:1.5px solid var(--a-border); color:var(--a-h);padding:6px 13px;border-radius:var(--r-sm); transition:var(--trans);box-shadow:var(--sh-xs); } .btn-export-locked:hover{background:#ccfbf1;} /* ── Alert table ── */ /* ── Alert table wrapper ── */ .table-wrapper { width: 100%; overflow-x: auto; max-width: 100%; } /* ── Alert table ── */ .data-table{ width:100%; border-collapse:separate; border-spacing:0; /* Don't use display:block on tables! */ table-layout:auto; } .data-table th{ font-family:var(--mono);font-size:.66rem;font-weight:800; letter-spacing:.09em;text-transform:uppercase;color:var(--fg3); padding:12px 14px;text-align:left; background:var(--surf2);border-bottom:2px solid var(--border); position:sticky;top:0;z-index:10;white-space:nowrap; } .data-table td{ font-family:var(--mono);font-size:.74rem;color:var(--fg2); padding:11px 14px;border-bottom:1px solid var(--border); transition:background .1s;white-space:nowrap; } .data-table tr:last-child td{border-bottom:none;} .data-table tr:hover td{background:var(--a-dim);} .data-table td.val{color:var(--fg);font-weight:800;} .data-table td.dim{color:#7c3aed;font-weight:700;} /* ── Severity badges ── */ .sev-badge{ display:inline-flex;align-items:center;gap:5px; font-family:var(--mono);font-size:.62rem;font-weight:800; letter-spacing:.06em;text-transform:uppercase; padding:3px 10px;border-radius:99px; } .sev-badge::before{content:'';width:5px;height:5px;border-radius:50%;flex-shrink:0;} .sev-badge.EMERGENCY{background:var(--red-dim);color:var(--red);border:1px solid var(--red-border);} .sev-badge.EMERGENCY::before{background:var(--red);box-shadow:0 0 0 2px rgba(220,38,38,.2);} .sev-badge.CRITICAL{background:var(--orange-dim);color:var(--orange);border:1px solid var(--orange-border);} .sev-badge.CRITICAL::before{background:var(--orange);} .sev-badge.WARNING{background:var(--amber-dim);color:var(--amber);border:1px solid var(--amber-border);} .sev-badge.WARNING::before{background:var(--amber);} /* ── Charts ── */ .dist-grid,.sens-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;} .chart-wrap{position:relative;max-width:100%;overflow:hidden;} .legend-list{display:flex;flex-direction:column;gap:7px;margin-top:4px;} .legend-item{display:flex;align-items:center;gap:8px;} .legend-swatch{width:9px;height:9px;border-radius:3px;flex-shrink:0;} .legend-name{font-size:.72rem;color:var(--fg2);flex:1;font-weight:600;} .legend-count{font-family:var(--mono);font-size:.7rem;color:var(--fg);font-weight:700;} .hbar-list{display:flex;flex-direction:column;gap:8px;} .hbar-row{display:flex;align-items:center;gap:10px;} .hbar-name{font-size:.61rem;color:var(--fg4);width:84px;text-align:right;flex-shrink:0;font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .hbar-track{flex:1;height:10px;background:var(--surf3);border-radius:99px;overflow:hidden;border:1px solid var(--border);} .hbar-fill{height:100%;border-radius:99px;transition:width 1s cubic-bezier(.4,0,.2,1);width:0;} .hbar-val{font-family:var(--mono);font-size:.63rem;color:var(--fg);font-weight:700;width:28px;text-align:right;} .peak-list{display:flex;flex-direction:column;gap:5px;} .peak-item{ display:flex;align-items:center;gap:10px;padding:9px 13px; background:var(--surf2);border:1px solid var(--border); border-radius:var(--r-sm);transition:var(--trans); } .peak-item:hover{background:var(--a-dim);border-color:var(--a-border);} .peak-time{font-family:var(--mono);font-size:.66rem;color:var(--a-h);width:46px;flex-shrink:0;font-weight:700;} .peak-bar-wrap{flex:1;height:4px;background:var(--border);border-radius:2px;overflow:hidden;} .peak-bar{height:100%;background:linear-gradient(90deg,var(--a),#2dd4bf);border-radius:2px;transition:width 1s;} .peak-meta{font-family:var(--mono);font-size:.6rem;color:var(--fg4);text-align:right;white-space:nowrap;} .peak-count{font-size:.72rem;font-weight:800;color:var(--fg);} /* ── Measure switcher ── */ .measure-switcher{ display:flex;align-items:center;gap:6px;flex-wrap:wrap; padding:10px 16px 0;flex-shrink:0; } .measure-switcher-label{ font-family:var(--mono);font-size:.56rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--fg4); margin-right:4px;white-space:nowrap; } .measure-pill{ font-family:var(--mono);font-size:.72rem;font-weight:700; padding:7px 14px;border-radius:99px;cursor:pointer; border:1.5px solid var(--border);background:var(--surf2); color:var(--fg2);transition:var(--trans);white-space:nowrap; box-shadow:var(--sh-xs);max-width:200px; overflow:hidden;text-overflow:ellipsis; } .measure-pill:hover{border-color:var(--a-border);color:var(--a);background:var(--a-dim);} .measure-pill.active{ background:var(--a);border-color:var(--a);color:#fff; box-shadow:0 1px 6px rgba(13,148,136,.35); } .measure-pill .pill-badge{ display:inline-block;margin-left:5px; font-size:.52rem;background:rgba(255,255,255,.25); padding:1px 5px;border-radius:99px;vertical-align:middle; } .measure-pill:not(.active) .pill-badge{ background:var(--surf3);color:var(--fg4); } /* ══════ VERTICAL LEGEND PANEL ═══════════════════════════════ */ #chart-legend-panel{ scrollbar-width:thin; scrollbar-color:var(--border) transparent; max-width:200px; } #chart-legend-panel::-webkit-scrollbar{width:4px;} #chart-legend-panel::-webkit-scrollbar-track{background:transparent;} #chart-legend-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;} #chart-legend-panel > div{transition:opacity .15s;} #chart-legend-panel > div:hover{background:var(--surf3);border-radius:4px;} /* ══════ TOAST ═══════════════════════════════════════════════ */ #toast{ position:fixed;bottom:20px;right:20px;z-index:9999; display:flex;align-items:center;gap:10px; background:var(--fg);color:#fff; font-family:var(--mono);font-size:.7rem;font-weight:500; padding:11px 16px;border-radius:var(--r-lg); box-shadow:var(--sh-lg); transform:translateY(10px);opacity:0;pointer-events:none; transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .22s; max-width:340px;border-left:3px solid var(--green); } #toast.show{transform:translateY(0);opacity:1;} #toast.warn{border-left-color:var(--amber);} #toast.err{border-left-color:var(--red);} .toast-icon{font-size:.85rem;flex-shrink:0;} /* ══════ MODALS ══════════════════════════════════════════════ */ /* Modal Overlay */ .pricing-modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(12px); z-index: 10000; overflow-y: auto; padding: 20px 16px; animation: fadeIn 0.3s ease-out; } .pricing-modal-overlay.active { display: flex; align-items: center; justify-content: center; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* ══════ MODALS ══════════════════════════════════════════════ */ .overlay{ position:fixed;inset:0;z-index:500; background:rgba(15,23,42,.38);backdrop-filter:blur(8px); display:none;align-items:center;justify-content:center; padding: 24px; overflow-y:auto; } .overlay.active{display: flex;} .modal{ background:var(--surf);border:1px solid var(--border); border-radius:var(--r-xl);padding:36px; max-width:460px;width:92%;margin: 0 auto; box-shadow:var(--sh-lg); transform:scale(.96) translateY(12px); transition:transform .26s cubic-bezier(.34,1.56,.64,1); max-height:90vh; overflow-y:auto; } .overlay.active .modal{transform:scale(1) translateY(0);} .modal-eyebrow{ font-family:var(--mono);font-size:.57rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase; color:var(--a);margin-bottom:10px; display:flex;align-items:center;gap:9px; } .modal-eyebrow::before{content:'';display:inline-block;width:20px;height:2px;background:var(--a);border-radius:1px;} .modal h2{font-size:1.65rem;font-weight:900;line-height:1.2;margin-bottom:8px;color:var(--fg);letter-spacing:-.04em;} .modal h2 em{color:var(--a);font-style:normal;} .modal-desc{font-size:.79rem;color:var(--fg3);line-height:1.75;margin-bottom:18px;} .modal-price{font-size:2.2rem;font-weight:900;color:var(--fg);margin-bottom:18px;letter-spacing:-.05em;} .modal-price sub{font-size:.9rem;font-weight:500;color:var(--fg4);} .feature-list{list-style:none;margin-bottom:24px;display:flex;flex-direction:column;gap:7px;} .feature-list li{display:flex;align-items:flex-start;gap:9px;font-size:.79rem;color:var(--fg2);} .feature-list li::before{content:'✓';color:var(--green);font-size:.7rem;font-weight:800;margin-top:2px;flex-shrink:0;} .feature-list-muted li{color:var(--fg4)!important;opacity:.65;} .feature-list-muted li::before{content:'◦';color:var(--fg4);} .modal-actions{display:flex;gap:10px;flex-wrap:wrap;} .modal-cta{ flex:1;font-size:.85rem;font-weight:800; background:linear-gradient(135deg,#2dd4bf,var(--a)); color:#fff;padding:13px;border-radius:var(--r-md); box-shadow:0 4px 16px rgba(13,148,136,.3);transition:var(--trans); min-width:120px; } .modal-cta:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(13,148,136,.4);} .modal-dismiss{ font-size:.76rem;font-weight:600;color:var(--fg4); background:var(--surf2);border:1.5px solid var(--border); padding:13px 18px;border-radius:var(--r-md);transition:var(--trans); } .modal-dismiss:hover{color:var(--fg3);border-color:var(--border2);} .paywall-section-label{ font-family:var(--mono);font-size:.57rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase; color:var(--green);margin:14px 0 6px;display:flex;align-items:center;gap:6px; } /* Modal Container */ .pricing-modal-premium { background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-radius: 24px; max-width: 720px; width: 95%; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); position: relative; animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); max-height:90vh; overflow-y:auto; margin:auto; } @keyframes slideUp { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Close Button */ .pricing-modal-close { position: absolute; top: 24px; right: 24px; width: 40px; height: 40px; border-radius: 50%; border: none; background: rgba(100, 116, 139, 0.1); color: #64748b; font-size: 20px; cursor: pointer; transition: all 0.2s; z-index: 10; } .pricing-modal-close:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; transform: rotate(90deg); } /* Header */ .pricing-premium-header { text-align: center; padding: 28px 24px 20px; background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%); border-radius: 24px 24px 0 0; position: relative; overflow: hidden; } .pricing-premium-header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); animation: shimmer 3s infinite; } @keyframes shimmer { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, 20px); } } .pricing-premium-badge { display: inline-block; padding: 8px 16px; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; color: white; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 16px; position: relative; } .pricing-premium-title { font-size: 2.5rem; font-weight: 900; color: white; margin: 0 0 12px 0; letter-spacing: -0.02em; position: relative; } .gradient-text { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .pricing-premium-subtitle { font-size: 1.1rem; color: rgba(255, 255, 255, 0.9); margin: 0; font-weight: 500; position: relative; } /* Tier Tabs */ .pricing-tier-tabs { display: flex; gap: 0; padding: 0; background: #f1f5f9; border-bottom: 2px solid #e2e8f0; flex-wrap:wrap; } .pricing-tier-tab { flex: 1; padding: 20px 16px; background: transparent; border: none; color: #64748b; font-size: 1rem; font-weight: 700; cursor: pointer; transition: all 0.3s; position: relative; text-transform: uppercase; letter-spacing: 0.05em; min-width:100px; } .pricing-tier-tab:hover { background: rgba(13, 148, 136, 0.05); color: #0d9488; } .pricing-tier-tab.active { background: white; color: #0d9488; } .pricing-tier-tab.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: #0d9488; } .pricing-tier-tab.recommended { background: linear-gradient(135deg, rgba(13, 148, 136, 0.1) 0%, rgba(8, 145, 178, 0.1) 100%); } .tab-badge { display: inline-block; margin-left: 8px; padding: 2px 8px; background: #0d9488; color: white; border-radius: 10px; font-size: 0.65rem; font-weight: 800; } /* Tier Panels */ .pricing-tier-panels { padding: 0; min-height: auto; } .pricing-tier-panel { display: none; animation: fadeInPanel 0.4s ease-out; } .pricing-tier-panel.active { display: block; } @keyframes fadeInPanel { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .pricing-panel-content { display: grid; grid-template-columns: 300px 1fr; gap: 0; } /* Left Panel */ .pricing-panel-left { padding: 28px 24px; background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%); border-right: 1px solid #e2e8f0; } .pricing-tier-name { font-size: 1.5rem; font-weight: 800; color: #0f172a; margin-bottom: 16px; } .pricing-tier-price { margin-bottom: 16px; } .price-amount { font-size: 2.8rem; font-weight: 900; color: #0d9488; letter-spacing: -0.03em; line-height: 1; } .price-period { font-size: 1rem; color: #64748b; font-weight: 500; } .pricing-tier-desc { font-size: 1rem; color: #475569; margin-bottom: 32px; line-height: 1.6; } .pricing-tier-status { margin-bottom: 24px; } .status-badge { display: inline-block; padding: 10px 20px; border-radius: 12px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; } .status-current { background: #f1f5f9; color: #64748b; } .status-available { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; } .status-popular { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: white; } .status-pro { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; } /* Action Button */ .pricing-action-btn { width: 100%; padding: 18px 32px; font-size: 1.1rem; font-weight: 700; border-radius: 12px; border: none; cursor: pointer; transition: all 0.3s; text-transform: none; letter-spacing: 0; margin-bottom: 16px; } .pricing-btn-disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; } .pricing-btn-basic { background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); color: white; box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3); } .pricing-btn-basic:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13, 148, 136, 0.4); } .pricing-btn-standard { background: linear-gradient(135deg, #0d9488 0%, #0891b2 100%); color: white; box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3); } .pricing-btn-standard:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(13, 148, 136, 0.4); } .pricing-btn-pro { background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: white; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); } .pricing-btn-pro:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.4); } .pricing-value-prop { text-align: center; font-size: 0.9rem; color: #64748b; padding: 16px; background: rgba(13, 148, 136, 0.05); border-radius: 8px; } .pricing-value-prop strong { color: #0d9488; font-weight: 700; } /* Right Panel */ .pricing-panel-right { padding: 28px 24px; background: white; } .pricing-features-title { font-size: 0.9rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 20px; } .pricing-features-list { list-style: none; padding: 0; margin: 0; } .pricing-features-list li { padding: 12px 0; font-size: 0.95rem; line-height: 1.6; border-bottom: 1px solid #f1f5f9; } .pricing-features-list li:last-child { border-bottom: none; } .feature-included { color: #0f172a; } .feature-included strong { color: #0d9488; font-weight: 700; } .feature-excluded { color: #94a3b8; } .feature-coming { color: #94a3b8; font-style: italic; } /* Coming Soon Section */ .pricing-coming-soon { margin-top: 32px; padding-top: 32px; border-top: 1px solid #e2e8f0; } .coming-soon-label { display: inline-block; padding: 6px 12px; background: rgba(100, 116, 139, 0.1); color: #64748b; border-radius: 6px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; margin-bottom: 16px; } /* Footer */ .pricing-modal-footer { padding: 20px 24px; background: #f8fafc; border-top: 1px solid #e2e8f0; text-align: center; border-radius: 0 0 24px 24px; } .pricing-footer-info { font-size: 0.9rem; color: #64748b; margin: 8px 0; } .pricing-not-now { display: inline-block; margin-top: 16px; color: #64748b; text-decoration: none; font-size: 0.9rem; font-weight: 600; transition: color 0.2s } .pricing-not-now:hover { color: #0d9488; } @keyframes spin{to{transform:rotate(360deg)}} .checkout-success{display:none;flex-direction:column;align-items:center;gap:12px;} .checkout-check{ width:54px;height:54px;border-radius:50%; background:var(--green-dim);border:2px solid var(--green-border); display:flex;align-items:center;justify-content:center;font-size:1.4rem; } .save-profile-modal{max-width:380px;padding:32px;} .save-profile-modal h2{font-size:1.25rem;font-weight:900;margin-bottom:5px;letter-spacing:-.03em;} .save-profile-modal p{font-size:.78rem;color:var(--fg3);margin-bottom:18px;} .profile-name-input{ width:100%;font-family:var(--ui);font-size:.84rem;font-weight:600; background:var(--surf2);border:1.5px solid var(--border2); color:var(--fg);padding:10px 12px;border-radius:var(--r-sm); outline:none;margin-bottom:14px;transition:var(--trans); } .profile-name-input:focus{border-color:var(--a);box-shadow:var(--sh-ring);} .profile-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px;} .profile-tag{font-size:.61rem;font-family:var(--mono);padding:3px 8px;border-radius:4px;background:var(--surf3);border:1px solid var(--border);color:var(--fg4);} .xl-modal{max-width:720px;width:96%;} .xl-sheet-list{display:flex;flex-direction:column;gap:5px;max-height:150px;overflow-y:auto;} .xl-sheet-opt{ display:flex;align-items:center;gap:10px;padding:8px 12px; border-radius:var(--r-sm);border:1.5px solid var(--border); background:var(--surf2);cursor:pointer;transition:var(--trans);user-select:none;box-shadow:var(--sh-xs); } .xl-sheet-opt:hover{border-color:var(--a-border);background:var(--a-dim);} .xl-sheet-opt.selected{border-color:var(--a);background:var(--a-dim);box-shadow:0 0 0 2px var(--a-glow);} .xl-sheet-opt input{display:none;} .xl-sheet-name{font-size:.76rem;font-weight:700;flex:1;color:var(--fg2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .xl-sheet-opt.selected .xl-sheet-name{color:var(--a-h);} .xl-sheet-meta{font-family:var(--mono);font-size:.6rem;color:var(--fg4);white-space:nowrap;} /* ── Worker overlay ── */ .worker-overlay{ position:fixed;inset:0;z-index:800; background:rgba(15,23,42,.35);backdrop-filter:blur(8px); display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none;transition:opacity .2s; } .worker-overlay.active{opacity:1;pointer-events:all;} .worker-card{ background:var(--surf);border:1px solid var(--border); border-radius:var(--r-xl);padding:28px 32px;width:360px; box-shadow:var(--sh-lg);display:flex;flex-direction:column;gap:14px; max-width:90vw; } .worker-title{font-size:.88rem;font-weight:800;color:var(--fg);display:flex;align-items:center;gap:10px;letter-spacing:-.02em;} .worker-spinner{width:16px;height:16px;flex-shrink:0;border-radius:50%;border:2px solid var(--border2);border-top-color:var(--a);animation:spin .65s linear infinite;} .worker-phase{font-family:var(--mono);font-size:.68rem;color:var(--fg4);min-height:1em;} .worker-track{height:6px;background:var(--surf3);border-radius:3px;overflow:hidden;border:1px solid var(--border);} .worker-bar{height:100%;border-radius:3px;width:0%;background:linear-gradient(90deg,var(--a),#2dd4bf);transition:width .22s ease;} .worker-stats{display:flex;gap:18px;flex-wrap:wrap;} .wstat{display:flex;flex-direction:column;gap:2px;} .wstat-val{font-size:.8rem;font-weight:800;color:var(--fg);font-variant-numeric:tabular-nums;} .wstat-lbl{font-size:.55rem;color:var(--fg4);font-family:var(--mono);text-transform:uppercase;letter-spacing:.09em;} .worker-cancel{font-family:var(--mono);font-size:.68rem;color:var(--fg4);text-align:center;cursor:pointer;transition:color .13s;} .worker-cancel:hover{color:var(--red);} /* ── Utility ── */ .divider{width:100%;height:1px;background:var(--border);margin:4px 0;} .tag{display:inline-block;font-size:.56rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:4px;font-family:var(--mono);} .tag.new{background:var(--violet-dim);color:#7c3aed;border:1px solid var(--violet-border);} /* ══════ CONSENT & LANDING PAGE MANAGEMENT ═══════════════════ */ /* Hide main app when consent is pending */ body.consent-pending header, body.consent-pending .app-shell, body.consent-pending .kpi-strip, body.consent-pending .tab-bar { display: none !important; } /* ══════ CONSENT GATE (full-screen blocking modal) ══════════ */ .consent-gate { position: fixed; inset: 0; z-index: 9999; background: rgba(10,15,28,.97); display: flex; align-items: center; justify-content: center; padding: 24px; transition: opacity .3s ease; } .consent-card { background: var(--surf); border: 1.5px solid var(--border); border-radius: 16px; padding: 40px 48px; max-width: 520px; width: 100%; box-shadow: 0 32px 80px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.3); animation: consentSlideUp .35s cubic-bezier(.34,1.56,.64,1) both; } @keyframes consentSlideUp { from { transform: translateY(28px) scale(.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .consent-title { font-size: 1.5rem; font-weight: 900; color: var(--fg); margin-bottom: 20px; text-align: center; letter-spacing: -.03em; } .consent-text { font-size: .92rem; line-height: 1.7; color: var(--fg2); margin-bottom: 16px; text-align: left; } .consent-text strong { color: var(--fg); font-weight: 700; } .consent-buttons { display: flex; gap: 12px; margin-top: 28px; margin-bottom: 24px; flex-wrap:wrap; } .btn-consent-accept, .btn-consent-decline { flex: 1; padding: 14px 24px; border-radius: 10px; font-family: var(--ui); font-size: .92rem; font-weight: 700; cursor: pointer; transition: all .2s; border: 1.5px solid; min-width:120px; } .btn-consent-accept { background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%); color: #fff; border-color: transparent; box-shadow: 0 6px 20px rgba(13,148,136,.35); } .btn-consent-accept:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,148,136,.45); } .btn-consent-decline { background: transparent; color: var(--fg3); border-color: var(--border); } .btn-consent-decline:hover { background: var(--surf2); color: var(--fg); border-color: var(--fg4); } .consent-footer { text-align: center; font-size: .75rem; color: var(--fg4); margin-top: 8px; } .consent-footer a { color: var(--a); text-decoration: none; font-weight: 600; } .consent-footer a:hover { text-decoration: underline; } .consent-modal { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 40px 40px 32px; max-width: 500px; width: 100%; box-shadow: 0 32px 80px rgba(0,0,0,.45), 0 8px 24px rgba(0,0,0,.3); display: flex; flex-direction: column; align-items: center; text-align: center; animation: consentSlideUp .35s cubic-bezier(.34,1.56,.64,1) both; } .consent-modal-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; } .consent-brand-mark { width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0; background: linear-gradient(140deg,#2dd4bf 0%,#0d9488 45%,#0f766e 100%); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 1px rgba(13,148,136,.25), 0 4px 14px rgba(13,148,136,.3); } .consent-brand-mark svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .consent-brand-name { font-size: 1.1rem; font-weight: 900; color: var(--fg); letter-spacing: -.03em; } .consent-brand-name em { color: var(--a); font-style: normal; } .consent-modal-icon { font-size: 2.4rem; margin-bottom: 12px; line-height: 1; } .consent-modal-title { font-size: 1.55rem; font-weight: 900; color: var(--fg); letter-spacing: -.04em; margin-bottom: 10px; line-height: 1.2; } .consent-modal-desc { font-size: .83rem; color: var(--fg3); line-height: 1.7; margin-bottom: 22px; max-width: 380px; } .consent-modal-desc strong { color: var(--fg2); } .consent-facts { background: var(--surf2); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; margin-bottom: 18px; width: 100%; display: flex; flex-direction: column; gap: 10px; text-align: left; } .consent-fact { display: flex; align-items: flex-start; gap: 10px; font-size: .78rem; color: var(--fg3); line-height: 1.55; } .consent-fact-icon { font-size: .95rem; flex-shrink: 0; margin-top: 1px; } .consent-fact strong { color: var(--fg2); } .consent-modal-links { display: flex; align-items: center; gap: 8px; font-size: .71rem; color: var(--fg4); margin-bottom: 22px; flex-wrap:wrap; justify-content:center; } .consent-modal-links a { color: var(--a); text-decoration: none; font-weight: 600; } .consent-modal-links a:hover { text-decoration: underline; } .consent-modal-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; } .consent-btn-accept { width: 100%; font-family: var(--ui); font-size: .88rem; font-weight: 800; background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 55%); color: #fff; padding: 14px 20px; border-radius: var(--r-md); border: none; cursor: pointer; box-shadow: 0 4px 16px rgba(13,148,136,.35), 0 1px 3px rgba(13,148,136,.25); transition: var(--trans); letter-spacing: .01em; } .consent-btn-accept:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(13,148,136,.45); } .consent-btn-accept:active { transform: translateY(0); } .consent-btn-decline { width: 100%; font-family: var(--ui); font-size: .78rem; font-weight: 600; background: var(--surf2); color: var(--fg4); padding: 12px 20px; border-radius: var(--r-md); border: 1.5px solid var(--border2); cursor: pointer; transition: var(--trans); } .consent-btn-decline:hover { color: var(--fg3); border-color: var(--fg4); background: var(--surf3); } .consent-modal-note { font-size: .67rem; color: var(--fg4); line-height: 1.6; margin-top: 16px; max-width: 400px; } /* ══════ LANDING PAGE ════════════════════════════════════════ */ .landing-page { position: fixed; inset: 0; z-index: 5000; background: var(--bg); overflow-y: auto; overflow-x: hidden; opacity: 0; pointer-events: none; transition: opacity .4s ease; } .landing-page.show { opacity: 1; pointer-events: all; } .landing-container { max-width: 1100px; margin: 0 auto; padding: 0 32px; text-align: center; } /* Hero Section */ .landing-hero { min-height: 90vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100px 0 140px; background: linear-gradient(180deg, var(--surf) 0%, var(--surf2) 100%); position: relative; } .landing-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 30%, rgba(13,148,136,.08) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(45,212,191,.06) 0%, transparent 50%); pointer-events: none; } .landing-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 56px; z-index: 1; } .landing-brand-name { font-size: 1.8rem; font-weight: 900; letter-spacing: -.04em; color: var(--fg); } .landing-brand-name em { color: var(--a); font-style: normal; } .landing-headline { font-size: 3.8rem; font-weight: 900; line-height: 1.1; letter-spacing: -.05em; color: var(--fg); text-align: center; margin: 0 auto 28px auto; z-index: 1; max-width: 950px; } .landing-subhead { font-size: 1.2rem; line-height: 1.7; color: var(--fg3); text-align: center; margin: 0 auto 56px auto; z-index: 1; max-width: 720px; } .landing-cta { display: inline-flex; align-items: center; gap: 12px; font-size: 1.1rem; font-weight: 800; background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%); color: #fff; padding: 20px 40px; border-radius: 12px; border: none; cursor: pointer; box-shadow: 0 8px 24px rgba(13,148,136,.4), 0 2px 8px rgba(13,148,136,.25); transition: all .25s cubic-bezier(.4,0,.2,1); font-family: var(--ui); z-index: 1; text-decoration: none; } .landing-cta:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(13,148,136,.5), 0 4px 12px rgba(13,148,136,.3); } .landing-cta svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2.5; } /* Purpose Section (OAuth clarity + UX improvement) */ .landing-purpose { padding: 80px 0 100px; background: linear-gradient(180deg, var(--surf2) 0%, var(--surf) 100%); } .landing-purpose .landing-container { max-width: 820px; margin: 0 auto; text-align: center; } .landing-purpose p { font-size: 1.1rem; line-height: 1.8; color: var(--fg3); } .landing-cta-large { font-size: 1.2rem; padding: 22px 48px; } /* Features Section */ .landing-features { padding: 100px 0; background: var(--surf); } .landing-section-title { font-size: 2.2rem; font-weight: 900; text-align: center; color: var(--fg); margin-bottom: 64px; letter-spacing: -.04em; } .landing-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 48px; max-width: 1000px; margin: 0 auto; } .landing-feature { text-align: center; } .landing-feature-icon { font-size: 3rem; margin-bottom: 20px; display: inline-block; } .landing-feature h4, .landing-feature-title { font-size: 1.15rem; font-weight: 800; color: var(--fg); margin-bottom: 12px; letter-spacing: -.02em; } .landing-feature p, .landing-feature-desc { font-size: .9rem; line-height: 1.7; color: var(--fg3); } /* Highlights Section */ .landing-highlights { padding: 100px 0; background: var(--surf2); } .landing-highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; max-width: 1000px; margin: 0 auto; } .landing-highlight { background: var(--surf); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; box-shadow: var(--sh-sm); transition: var(--trans); } .landing-highlight:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--a-border); } .landing-highlight-badge, .landing-highlight-icon { width: 56px; height: 56px; background: var(--a-dim); border: 1px solid var(--a-border); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; font-size: 1.7rem; margin-bottom: 18px; } .landing-highlight h5, .landing-highlight-title { font-size: 1.05rem; font-weight: 800; color: var(--fg); margin-bottom: 10px; letter-spacing: -.02em; } .landing-highlight p, .landing-highlight-desc { font-size: .85rem; line-height: 1.7; color: var(--fg3); } /* Final CTA Section */ .landing-final-cta { padding: 120px 0; background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); text-align: center; } .landing-final-title { font-size: 2.8rem; font-weight: 900; color: #fff; margin-bottom: 16px; letter-spacing: -.04em; } .landing-final-subtitle { font-size: 1.15rem; color: rgba(255,255,255,.9); margin-bottom: 48px; } .landing-final-cta .landing-cta { background: #fff; color: #0d9488; box-shadow: 0 8px 28px rgba(0,0,0,.25); font-size: 1.2rem; padding: 22px 48px; } .landing-final-cta .landing-cta:hover { background: #f8fafc; box-shadow: 0 12px 36px rgba(0,0,0,.3); transform: translateY(-3px); } /* Landing Footer */ .landing-footer { padding: 48px 0; background: var(--fg); color: rgba(255,255,255,.6); text-align: center; } .landing-footer p { font-size: .8rem; margin-bottom: 12px; } .landing-footer a { color: rgba(255,255,255,.8); text-decoration: none; transition: color .2s; } .landing-footer a:hover { color: #2dd4bf; } .landing-footer-links { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: .75rem; } .landing-footer-links span { color: rgba(255,255,255,.3); } /* ══════ SITE FOOTER ═════════════════════════════════════════ */ .site-footer{ display:flex;align-items:center;justify-content:center; flex-wrap:wrap;gap:6px; padding:16px 24px; border-top:1px solid var(--border); background:var(--surf2); font-size:.65rem;color:var(--fg4); font-family:var(--mono); } .site-footer a{color:var(--fg4);text-decoration:none;transition:color .13s;} .site-footer a:hover{color:var(--a);} .site-footer-sep{color:var(--border2);} /* ══════ BETTER SCROLLBARS ══════════════════════════ */ * { scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.5) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: rgba(241, 245, 249, 0.4); border-radius: 5px; } *::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.6); border-radius: 5px; border: 2px solid transparent; background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.8); background-clip: padding-box; } *::-webkit-scrollbar-thumb:active { background: rgba(71, 85, 105, 0.9); background-clip: padding-box; } /* Specific scrollbar for sidebar */ .sidebar-scroll::-webkit-scrollbar { width: 8px; } .sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(13, 148, 136, 0.3); border-radius: 4px; } .sidebar-scroll::-webkit-scrollbar-thumb:hover { background: rgba(13, 148, 136, 0.5); } .sidebar-scroll::-webkit-scrollbar-thumb:active { background: rgba(13, 148, 136, 0.7); } /* ── Dimension Filter Dropdown (Collapsible) ────────────────────────────── */ .dimension-filter-dropdown { position: relative; z-index: 100; } #dimension-filter-toggle:hover { border-color: var(--a-border); background: var(--a-dim); } #dimension-filter-panel { position: absolute; top: 100%; left: 0; z-index: 101; animation: slideDown 0.2s ease-out; max-width:90vw; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } #dimension-filter-select { scrollbar-width: thin; scrollbar-color: var(--a) var(--surf); } #dimension-filter-select::-webkit-scrollbar { width: 8px; } #dimension-filter-select::-webkit-scrollbar-track { background: var(--surf); border-radius: 4px; } #dimension-filter-select::-webkit-scrollbar-thumb { background: var(--a); border-radius: 4px; } #dimension-filter-select::-webkit-scrollbar-thumb:hover { background: var(--a-h); } #dimension-filter-select option { padding: 6px 8px; border-radius: 3px; margin: 2px; } #dimension-filter-select option:checked { background: linear-gradient(0deg, var(--a) 0%, var(--a) 100%); color: white; font-weight: 600; } #dimension-filter-select option:hover { background: var(--a-dim); } #dimension-filter-panel button:hover { background: var(--a-dim); border-color: var(--a-border); color: var(--a); } /* ── Responsive Chart Sizing ────────────────────────────────────────────── */ .chart-scroll-outer { width: 100%; overflow-x: auto; overflow-y: hidden; } .chart-scroll-inner { min-width: 100%; width: 100%; } .chart-canvas-wrap { width: 100%; min-width: 100%; } #chart-main { width: 100% !important; height: auto !important; } /* ── Demo Video Section ──────────────────────────────────────────────────── */ .landing-demo-section { padding: 80px 20px; background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); position: relative; overflow: hidden; } .landing-demo-section::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(13, 148, 136, 0.05) 0%, transparent 70%); animation: rotate 30s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .landing-demo-subtitle { text-align: center; font-size: 1.1rem; color: #94a3b8; margin: -10px auto 40px; max-width: 600px; } .demo-video-container { position: relative; max-width: 900px; margin: 0 auto 40px; z-index: 1; } .demo-video-placeholder { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1e293b 0%, #334155 100%); border-radius: 12px; border: 2px solid rgba(13, 148, 136, 0.2); display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); } .demo-placeholder-content { text-align: center; padding: 40px; } .demo-placeholder-content h4 { font-size: 1.5rem; color: #f1f5f9; margin: 20px 0 10px; font-weight: 700; } .demo-placeholder-content p { color: #94a3b8; font-size: 1rem; margin-bottom: 24px; } .demo-cta-btn { background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); color: white; border: none; padding: 12px 28px; border-radius: 8px; font-family: var(--mono); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3); } .demo-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(13, 148, 136, 0.4); } .demo-video-wrapper { position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); border: 2px solid rgba(13, 148, 136, 0.2); max-width:100%; } .demo-video-player { width: 100%; height: auto; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); border: 2px solid rgba(13, 148, 136, 0.2); } .demo-quick-steps { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 40px; position: relative; z-index: 1; } .demo-step { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: rgba(30, 41, 59, 0.6); border: 1px solid rgba(13, 148, 136, 0.3); border-radius: 8px; backdrop-filter: blur(10px); } .demo-step-num { width: 28px; height: 28px; background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-weight: 700; font-size: 0.85rem; flex-shrink: 0; } .demo-step-text { color: #f1f5f9; font-family: var(--mono); font-size: 0.85rem; font-weight: 600; white-space: nowrap; } /* ══════════════════════════════════════════════════════════════════════════════ MODAL & OVERLAY VISIBILITY FIXES - Hide by default, show when active ══════════════════════════════════════════════════════════════════════════════ */ /* Hide modals/overlays by default */ #xl-inspector, #excel-import-overlay, #checkout-overlay, #stripe-connecting, #email-overlay, #email-report-section, #email-modal, .excel-inspector, .email-report-overlay { display: none !important; } /* Show when explicitly activated */ #xl-inspector.active, #xl-inspector.show, #excel-import-overlay.active, #excel-import-overlay.show, #checkout-overlay.active, #stripe-connecting.active, #email-overlay.active, #email-report-modal.show, #email-report-section.active, #email-report-section.show, #email-modal.active, #email-modal.show, .excel-inspector.active, .email-report-overlay.active { display: block !important; } /* Flexbox modals when active */ #xl-inspector.active.flex, #excel-import-overlay.active.flex, #checkout-overlay.active.flex, #email-overlay.active.flex { display: flex !important; } /* ══════════════════════════════════════════════════════════════════════════════ RESPONSIVE BREAKPOINTS - TABLET & MOBILE ══════════════════════════════════════════════════════════════════════════════ */ /* ══════ TABLET (1024px and below) ══════ */ @media(max-width:1024px){ .app-shell{grid-template-columns:1fr;} .sidebar{ max-height:50vh; position:static; height:auto; border-right:none; border-bottom:1px solid var(--sb-border); } .main-content{width:100%;} .kpi-strip{ grid-template-columns:repeat(3,1fr); overflow-x:auto; -webkit-overflow-scrolling:touch; } .dist-grid,.sens-grid{grid-template-columns:1fr;} #chart-legend-panel{ max-height:200px; max-width:none!important; min-width:0!important; width:100%; } .card{padding:14px 16px;} .pricing-panel-content{grid-template-columns:1fr;} .pricing-panel-left{border-right:none;border-bottom:1px solid #e2e8f0;} header{min-height:auto;gap:10px;} .header-right{gap:6px;} .btn-upgrade,.btn-manage,.btn-logout{font-size:.7rem;padding:6px 10px;} .pro-badge,.usage-pill{font-size:.58rem;padding:4px 8px;} } /* ══════ MOBILE (768px and below) ══════ */ @media (max-width: 768px) { /* Header */ header{ flex-direction:column; align-items:stretch; height:auto; padding:12px 16px; } .header-brand{ border-right:none; border-bottom:1px solid var(--border); padding:0 0 12px 0; } .header-status{ padding:12px 0; border-bottom:1px solid var(--border); } .header-right{ border-left:none; padding:12px 0 0 0; justify-content:flex-start; } /* Sidebar */ .sidebar{max-height:40vh;} /* KPI Strip */ .kpi-strip{ display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch; } .kpi{min-width:140px;flex-shrink:0;} /* Tabs */ .tab-bar{overflow-x:auto;} .tab-btn{font-size:.7rem;padding:12px 14px;} /* Panes */ .pane{padding:16px;} /* Cards & Charts */ .card{padding:12px 14px;} .card-title{font-size:.55rem;} .chart-scroll-outer{max-width:100%;} .chart-canvas-wrap{height:200px;} /* Pricing Modal */ .pricing-modal-premium{ width:98%; padding:20px 16px; max-height:95vh; } .pricing-premium-title{font-size:2rem;} .pricing-tier-tabs{flex-direction:column;} .pricing-tier-tab{ padding:16px; font-size:.85rem; } .pricing-panel-left, .pricing-panel-right{padding:20px 16px;} .price-amount{font-size:2.4rem;} /* Tables */ .data-table{ font-size:.65rem; display:block; overflow-x:auto; } .data-table th{font-size:.55rem;padding:8px 10px;} .data-table td{font-size:.65rem;padding:7px 10px;} /* Export Bar */ .export-bar{ width:100%; justify-content:flex-start; margin-left:0; margin-top:8px; } .btn-export-csv,.btn-export-pdf,.btn-export{ font-size:.6rem; padding:5px 10px; } /* Measure Switcher */ .measure-switcher{padding:8px 12px 0;} .measure-pill{ font-size:.6rem; padding:4px 9px; max-width:140px; } /* Modals */ .modal{ width:95%; padding:24px 20px; max-height:85vh; } .modal h2{font-size:1.3rem;} .modal-desc{font-size:.76rem;} .modal-price{font-size:1.8rem;} /* Consent */ .consent-card{ padding:32px 24px; max-width:95%; } .consent-title{font-size:1.3rem;} .consent-text{font-size:.85rem;} .consent-buttons{flex-direction:column;} .btn-consent-accept, .btn-consent-decline{width:100%;} /* Landing Page */ .landing-hero{ min-height:auto; padding:60px 0 80px; } .landing-headline{ font-size:2.2rem; margin-bottom:20px; } .landing-subhead{ font-size:1rem; margin-bottom:36px; } .landing-cta{ font-size:1rem; padding:16px 32px; } .landing-section-title{font-size:1.8rem;} .landing-final-title{font-size:2.2rem;} .landing-final-subtitle{font-size:1rem;} .landing-feature-grid{grid-template-columns:1fr;gap:36px;} .landing-highlight-grid{grid-template-columns:1fr;} .landing-container{padding:0 20px;} /* Demo Section */ .landing-demo-section{padding:60px 20px;} .demo-placeholder-content h4{font-size:1.2rem;} .demo-placeholder-content p{font-size:.9rem;} .demo-quick-steps{gap:15px;} .demo-step{padding:10px 16px;} .demo-step-num{width:24px;height:24px;font-size:.75rem;} .demo-step-text{font-size:.75rem;} } /* ══════ SMALL MOBILE (480px and below) ══════ */ @media (max-width: 480px) { /* Header */ .brand-name{font-size:.85rem;} .brand-mark{width:28px;height:28px;} .brand-mark svg{width:14px;height:14px;} .header-status{font-size:.58rem;} #status-text{font-size:.56rem;} .usage-pill{display:none;} .btn-upgrade,.btn-manage{ font-size:.65rem; padding:5px 8px; } /* Sidebar */ .sidebar{max-height:35vh;} .step-label{font-size:.72rem;} .step-num{width:20px;height:20px;font-size:.55rem;} .btn-run,#btn-run{font-size:.75rem;padding:11px 12px;} .run-hint{font-size:.54rem;} /* KPI Strip */ .kpi-label{font-size:.52rem;} .kpi-value,.kpi-val{font-size:1.5rem;} .kpi-sub{font-size:.56rem;} /* Tabs */ .tab-btn{font-size:.68rem;padding:11px 12px;} /* Cards */ .card{padding:10px 12px;} .card-title{font-size:.52rem;} .empty-state{padding:40px 20px;} .es-icon{width:54px;height:54px;font-size:1.4rem;} .es-title{font-size:.95rem;} .es-sub{font-size:.72rem;} /* Charts */ .chart-canvas-wrap{height:180px;} .chart-density-wrap{height:70px;} .measure-switcher-label{font-size:.52rem;} .measure-pill{font-size:.58rem;padding:4px 8px;max-width:120px;} /* Tables */ .log-controls{gap:6px;} .log-stat{font-size:.6rem;} .filter-sel{font-size:.66rem;padding:5px 8px;} .data-table th{font-size:.52rem;padding:7px 8px;} .data-table td{font-size:.62rem;padding:6px 8px;} .sev-badge{font-size:.54rem;padding:2px 8px;} /* Pricing Modal */ .pricing-modal-premium{width:100%;border-radius:16px;} .pricing-modal-close{width:36px;height:36px;top:16px;right:16px;} .pricing-premium-title{font-size:1.6rem;} .pricing-premium-subtitle{font-size:.95rem;} .pricing-tier-tab{ font-size:.75rem; padding:14px 12px; } .tab-badge{font-size:.6rem;padding:1px 6px;} .pricing-panel-left, .pricing-panel-right{padding:20px 16px;} .pricing-tier-name{font-size:1.3rem;} .price-amount{font-size:2.2rem;} .pricing-action-btn{ font-size:1rem; padding:16px 24px; } .pricing-features-list li{font-size:.88rem;padding:10px 0;} /* Modals */ .modal{ width:98%; padding:20px 16px; } .modal h2{font-size:1.2rem;} .modal-desc{font-size:.74rem;} .modal-price{font-size:1.6rem;} .feature-list li{font-size:.74rem;} .modal-cta{font-size:.78rem;padding:11px;} .modal-dismiss{font-size:.72rem;padding:11px 14px;} /* Worker Overlay */ .worker-card{ width:95%; padding:20px 16px; } .worker-title{font-size:.82rem;} .worker-phase{font-size:.64rem;} /* Consent */ .consent-card{padding:24px 20px;} .consent-title{font-size:1.2rem;} .consent-text{font-size:.82rem;} .btn-consent-accept, .btn-consent-decline{ font-size:.85rem; padding:12px 20px; } .consent-modal{padding:32px 24px;} .consent-brand-mark{width:32px;height:32px;} .consent-brand-name{font-size:1rem;} .consent-modal-title{font-size:1.3rem;} .consent-modal-desc{font-size:.78rem;} .consent-fact{font-size:.74rem;} .consent-btn-accept{font-size:.82rem;padding:12px 18px;} .consent-btn-decline{font-size:.74rem;padding:10px 18px;} /* Landing Page */ .landing-headline{font-size:1.8rem;} .landing-subhead{font-size:.92rem;} .landing-cta{ font-size:.9rem; padding:14px 28px; } .landing-brand-name{font-size:1.5rem;} .landing-section-title{font-size:1.5rem;margin-bottom:48px;} .landing-feature-icon{font-size:2.5rem;} .landing-feature h4{font-size:1rem;} .landing-feature p{font-size:.85rem;} .landing-highlight-badge{width:48px;height:48px;font-size:1.4rem;} .landing-highlight h5{font-size:.95rem;} .landing-highlight p{font-size:.82rem;} .landing-final-title{font-size:1.8rem;} .landing-final-subtitle{font-size:.95rem;} .landing-final-cta .landing-cta{ font-size:1rem; padding:18px 36px; } /* Demo Section */ .landing-demo-subtitle{font-size:.95rem;} .demo-placeholder-content{padding:24px;} .demo-placeholder-content h4{font-size:1.1rem;} .demo-placeholder-content p{font-size:.85rem;} .demo-cta-btn{ font-size:.82rem; padding:10px 22px; } .demo-step{ padding:8px 14px; flex-direction:column; text-align:center; } .demo-step-num{width:22px;height:22px;font-size:.7rem;} .demo-step-text{font-size:.7rem;white-space:normal;} /* Site Footer */ .site-footer{ font-size:.6rem; padding:12px 16px; } /* Mapper & Rules */ .mapper-row select{font-size:.68rem;padding:5px 20px 5px 8px;} .mapper-row-badge{font-size:.5rem;min-width:30px;} .agg-chip{font-size:.54rem;padding:2px 7px;} .rule-card{padding:10px 11px;} .rule-metric-sel, .rule-dir-sel{font-size:.68rem;padding:5px 8px;} .lvl-label{font-size:.58rem;width:60px;} .lvl-input{font-size:.68rem;padding:4px 8px;min-width:50px;} /* Profile Items */ .profile-item{padding:6px 9px;} .profile-name{font-size:.68rem;} .profile-detail{font-size:.54rem;} /* Size Settings */ .size-input{width:48px;font-size:.66rem;padding:3px 6px;} .size-label{font-size:.58rem;} .size-hint{font-size:.56rem;} /* Chart Elements */ .hbar-name{width:70px;font-size:.58rem;} .hbar-val{font-size:.6rem;width:24px;} .peak-time{width:40px;font-size:.62rem;} .peak-meta{font-size:.58rem;} .peak-count{font-size:.68rem;} /* Toast */ #toast{ bottom:16px; right:16px; left:16px; max-width:none; font-size:.66rem; padding:10px 14px; } } /* ══════ LANDSCAPE MOBILE (max-height: 500px) ══════ */ @media (max-height: 500px) and (orientation: landscape) { .landing-hero{padding:40px 0 60px;} .landing-headline{font-size:2rem;margin-bottom:16px;} .landing-subhead{font-size:1rem;margin-bottom:32px;} .consent-gate{padding:16px;} .consent-card{padding:24px;} .consent-modal{padding:24px;} .modal{max-height:95vh;overflow-y:auto;} .pricing-modal-premium{max-height:95vh;} } /* ══════ PRINT STYLES ══════ */ @media print { header, .sidebar, .tab-bar, .btn-upgrade, .btn-manage, .btn-logout, .export-bar, #toast, .modal, .overlay, .worker-overlay, .consent-gate, .landing-page { display: none !important; } body { background: white; color: black; } .main-content { max-width: 100%; } .card { page-break-inside: avoid; border: 1px solid #ddd; } .data-table { page-break-inside: avoid; } } /* ══════ REDUCED MOTION ══════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ══════ HIGH CONTRAST MODE ══════ */ @media (prefers-contrast: high) { :root { --border: #000; --border2: #000; --sb-border: #000; } .card, .modal, .sidebar, header { border-width: 2px; } button { border-width: 2px; } } /* ══════ DARK MODE PREPARATION (Optional - commented out) ══════ */ /* @media (prefers-color-scheme: dark) { :root { --bg: #0f172a; --surf: #1e293b; --surf2: #334155; --surf3: #475569; --border: #334155; --border2: #475569; --fg: #f1f5f9; --fg2: #e2e8f0; --fg3: #cbd5e1; --fg4: #94a3b8; --fg5: #64748b; --sb: #1e293b; --sb-surf: #334155; --sb-hover: #475569; --sb-border: #334155; --sb-text: #f1f5f9; --sb-text2: #e2e8f0; --sb-text3: #cbd5e1; --sb-text4: #94a3b8; } } */ /* ══════════════════════════════════════════════════════════════════════════════ SEO CONTENT SECTION - Add this to the end of your styles.css file ══════════════════════════════════════════════════════════════════════════════ */ /* ══════ SEO CONTENT SECTION ═════════════════════════════════ */ .seo-content-section { padding: 80px 0; background: var(--surf); } .seo-container { max-width: 1100px; margin: 0 auto; padding: 0 32px; } .seo-intro { text-align: center; margin-bottom: 64px; } .seo-intro p { font-size: 1.15rem; line-height: 1.8; color: var(--fg2); max-width: 900px; margin: 0 auto; } .seo-grid { display: grid; grid-template-columns: 1fr; gap: 48px; margin-bottom: 64px; } .seo-feature { display: flex; flex-direction: column; gap: 20px; } .seo-feature-icon { font-size: 2.5rem; line-height: 1; } .seo-feature h3 { font-size: 1.6rem; font-weight: 800; color: var(--fg); letter-spacing: -.03em; margin-bottom: 12px; } .seo-feature p { font-size: 1rem; line-height: 1.85; color: var(--fg3); margin-bottom: 16px; } .seo-feature p strong { color: var(--fg2); font-weight: 700; } .seo-cta-box { background: linear-gradient(135deg, var(--a-dim) 0%, #ccfbf1 100%); border: 2px solid var(--a-border); border-radius: var(--r-xl); padding: 48px 40px; text-align: center; box-shadow: var(--sh-md); margin-bottom: 64px; } .seo-cta-box h3 { font-size: 2rem; font-weight: 900; color: var(--fg); letter-spacing: -.04em; margin-bottom: 16px; } .seo-cta-box p { font-size: 1.05rem; line-height: 1.7; color: var(--fg3); margin-bottom: 32px; max-width: 700px; margin-left: auto; margin-right: auto; } .seo-cta-button { display: inline-flex; align-items: center; gap: 12px; font-size: 1.1rem; font-weight: 800; background: linear-gradient(135deg, #2dd4bf 0%, #0d9488 100%); color: #fff; padding: 18px 40px; border-radius: 12px; border: none; cursor: pointer; box-shadow: 0 6px 20px rgba(13,148,136,.35); transition: all .25s cubic-bezier(.4,0,.2,1); font-family: var(--ui); } .seo-cta-button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(13,148,136,.45); } .seo-use-cases { background: var(--surf2); border-radius: var(--r-xl); padding: 40px; border: 1px solid var(--border); } .seo-use-cases h3 { font-size: 1.6rem; font-weight: 800; color: var(--fg); letter-spacing: -.03em; margin-bottom: 28px; text-align: center; } .seo-use-cases ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; max-width: 900px; margin: 0 auto; } .seo-use-cases li { font-size: .98rem; line-height: 1.75; color: var(--fg3); padding-left: 32px; position: relative; } .seo-use-cases li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-size: 1.2rem; font-weight: 800; } .seo-use-cases li strong { color: var(--fg); font-weight: 700; } /* ══════ SEO SECTION - MOBILE RESPONSIVE ═════════════════════ */ @media (max-width: 768px) { .seo-content-section { padding: 60px 0; } .seo-intro p { font-size: 1rem; } .seo-feature h3 { font-size: 1.3rem; } .seo-feature p { font-size: .92rem; } .seo-cta-box { padding: 36px 24px; } .seo-cta-box h3 { font-size: 1.6rem; } .seo-use-cases { padding: 32px 24px; } .seo-use-cases h3 { font-size: 1.4rem; } } /* ══════════════════════════════════════════════════════════════ END OF SEO SECTION STYLES ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ BLOG POST IMAGE STYLES - Prevents Overflow ══════════════════════════════════════════════════════════════ */ /* Blog post container */ .blog-post, .blog-content, article { max-width: 900px; margin: 0 auto; padding: 40px 20px; overflow-x: hidden; /* Critical: prevents horizontal scroll */ } /* All images in blog posts */ .blog-post img, .blog-content img, article img { max-width: 100%; height: auto; display: block; margin: 24px auto; border-radius: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } /* Screenshot placeholders */ .screenshot-placeholder { margin: 32px 0; max-width: 100%; overflow: hidden; border-radius: 12px; box-shadow: 0 4px 20px rgba(15, 23, 42, 0.1); border: 1px solid #e2e8f0; background: #f8fafc; } .screenshot-image { width: 100%; max-width: 100%; height: auto; display: block; object-fit: contain; } /* Figure elements (if you use
tags) */ figure { margin: 32px 0; max-width: 100%; } figure img { width: 100%; height: auto; display: block; } figcaption { text-align: center; margin-top: 12px; font-size: 0.85rem; color: #64748b; font-style: italic; } /* Responsive images on mobile */ @media (max-width: 768px) { .blog-post, .blog-content, article { padding: 20px 16px; } .screenshot-placeholder { margin: 24px -16px; /* Full-width on mobile */ border-radius: 0; } .blog-post img, .blog-content img, article img { margin: 20px -16px; /* Full-width images */ border-radius: 0; } } /* Prevent any container overflow */ * { box-sizing: border-box; } img { max-width: 100%; height: auto; } .cta-micro { margin-top: 20px; font-size: 13px; color: var(--text-muted); position: relative; z-index: 1; } .cta-card:hover { border-color: var(--a-bright); box-shadow: 0 12px 36px rgba(13,148,136,0.18); } .step-desc { margin-top: 4px; } .step:hover .step-number { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(13,148,136,0.45); } @media (max-width: 640px) { .steps-grid::before { display: none; } } .feature-card:hover { border-color: var(--a-bright); } .feature-desc { color: rgba(241,245,249,0.85); /* slightly brighter */ } .feature-icon svg { width: 26px; height: 26px; } .footer-note { text-align: center; color: var(--text-muted); font-size: 14px; margin-bottom: 16px; }