/* ===== Base / Typography ===== */
html {
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
html,
body {
height: 100%;
}
/* 1) Base */
body {
margin: 0;
font: 16px/1.55 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
color: #222;
background: #fafafa;
/* fallback for pages without results wrapper */
}
:root {
--container-max: 1440px;
}
.container-narrow {
width: min(98vw, var(--container-max));
margin-inline: auto;
padding-left: clamp(12px, 2vw, 24px);
padding-right: clamp(12px, 2vw, 24px);
}
@media (min-width: 1920px) {
:root {
--container-max: 1680px;
}
}
/* ************************************************************/
/* ===== home.html ===== START ==== */
/* ===== HOME (single source of truth) — DARK AURORA + RAYS ===== */
/* Global page scope */
body.home-page {
position: relative;
overflow-x: hidden;
background: radial-gradient(1200px 800px at 50% -10%, #0b0f1a 0%, #05070d 55%, #04060b 100%);
}
/* ===== home.html — AOS mobile fallback ===== */
@media (max-width: 768px) {
body.home-page [data-aos] {
opacity: 1 !important;
transform: none !important;
}
}
/* Animated rays & glows (behind content) */
body.home-page.aurora-rays::before,
body.home-page.aurora-rays--loud::before,
body.home-page.aurora-rays::after,
body.home-page.aurora-rays--loud::after {
content: "";
position: fixed;
inset: -25%;
z-index: -1;
pointer-events: none;
}
body.home-page.aurora-rays::before,
body.home-page.aurora-rays--loud::before {
background:
repeating-conic-gradient(from 10deg at 50% 40%, rgba(88, 28, 135, .14) 0 6deg, transparent 12deg),
repeating-conic-gradient(from 200deg at 60% 30%, rgba(37, 99, 235, .12) 0 5deg, transparent 12deg);
filter: blur(18px) saturate(115%);
animation: rays-spin 60s linear infinite;
}
body.home-page.aurora-rays::after,
body.home-page.aurora-rays--loud::after {
background:
radial-gradient(45% 38% at 18% 18%, rgba(124, 58, 237, .25) 0%, transparent 60%),
radial-gradient(42% 35% at 82% 26%, rgba(59, 130, 246, .22) 0%, transparent 62%),
radial-gradient(48% 42% at 60% 80%, rgba(30, 27, 75, .30) 0%, transparent 65%);
filter: blur(34px) saturate(115%);
animation: glow-drift 28s ease-in-out infinite alternate;
}
body.home-page.aurora-rays--loud::before {
filter: blur(16px) saturate(125%);
animation-duration: 42s;
}
body.home-page.aurora-rays--loud::after {
filter: blur(32px) saturate(125%);
animation-duration: 20s;
}
@keyframes rays-spin {
to {
transform: rotate(360deg);
}
}
@keyframes glow-drift {
0% {
transform: translate3d(-2%, -1%, 0) scale(1.02);
}
50% {
transform: translate3d(2%, 1%, 0) scale(1.06);
}
100% {
transform: translate3d(-1%, 2%, 0) scale(1.03);
}
}
@media (prefers-reduced-motion: reduce) {
body.home-page.aurora-rays::before,
body.home-page.aurora-rays--loud::before,
body.home-page.aurora-rays::after,
body.home-page.aurora-rays--loud::after {
animation: none !important;
}
}
/* Make app sections transparent on home */
body.home-page .upper,
body.home-page .middle,
body.home-page .lower {
background: transparent !important;
margin: 0;
padding: 0;
}
/* ---- Shared width cap for home wrappers ---- */
:root {
--container-max: 1440px;
}
/* already in your file; OK to keep once */
body.home-page .hero-inner,
body.home-page .features-section>.features-header,
body.home-page .features-section>.features-grid,
body.home-page .footer-grid,
body.home-page .section-divider {
max-width: min(98vw, var(--container-max));
margin-left: auto;
margin-right: auto;
padding-left: clamp(12px, 2vw, 24px);
padding-right: clamp(12px, 2vw, 24px);
}
/* ---------- HERO ---------- */
body.home-page .home-hero {
padding: clamp(20px, 4.5vw, 48px) 0;
}
body.home-page .hero-inner {
display: grid;
gap: 24px;
grid-template-columns: 1.15fr 1fr;
align-items: stretch;
}
@media (max-width: 900px) {
body.home-page .hero-inner {
grid-template-columns: 1fr;
}
}
body.home-page .hero-card,
body.home-page .video-card,
body.home-page .feature-card {
background: #0f1220;
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 16px;
box-shadow: 0 10px 28px rgba(2, 6, 23, .55);
}
body.home-page .hero-card,
body.home-page .video-card {
min-height: clamp(300px, 28vw, 380px);
}
body.home-page .hero-card {
padding: clamp(18px, 3vw, 28px);
display: flex;
flex-direction: column;
}
body.home-page .hero-title {
font-size: clamp(1.8rem, 2.2vw + 1rem, 2.6rem);
margin: 0 0 8px;
line-height: 1.1;
background: linear-gradient(90deg, #e2e8f0 0%, #a78bfa 40%, #6366f1 75%, #7c3aed 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% auto;
}
@media (prefers-reduced-motion: no-preference) {
body.home-page .hero-title {
animation: home-title-pan 10s linear infinite;
}
@keyframes home-title-pan {
to {
background-position: 200% center;
}
}
}
body.home-page .hero-sub {
color: #cbd5e1;
margin: 0 0 14px;
}
body.home-page .cta-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
body.home-page .hero-points {
margin: 14px 0 0;
padding-left: 1.1rem;
color: #a7b0c0;
}
/* Small badge above the title */
body.home-page .hero-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(99, 102, 241, .12);
color: #c7d2fe;
border: 1px solid rgba(99, 102, 241, .25);
padding: 4px 10px;
border-radius: 999px;
font-weight: 600;
font-size: .9rem;
box-shadow: 0 2px 6px rgba(2, 6, 23, .35);
margin: 2px 0 10px;
}
/* ---------- VIDEO ---------- */
body.home-page .video-card {
padding: clamp(14px, 2.5vw, 22px);
text-align: center;
animation: card-pulse 6s ease-in-out infinite;
}
@keyframes card-pulse {
0%,
100% {
box-shadow: 0 10px 28px rgba(2, 6, 23, .55);
}
50% {
box-shadow: 0 18px 46px rgba(88, 28, 135, .35);
}
}
body.home-page .video-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(99, 102, 241, .18);
color: #c7d2fe;
border: 1px solid rgba(99, 102, 241, .32);
padding: 6px 12px;
border-radius: 999px;
font-weight: 600;
font-size: .9rem;
box-shadow: 0 3px 8px rgba(2, 6, 23, .45);
margin: 2px 0 12px;
}
body.home-page .video-frame {
position: relative;
width: 100%;
aspect-ratio: 16/9;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, .22);
box-shadow: 0 12px 28px rgba(2, 6, 23, .65);
background: #0b1220;
transform: translateZ(0);
}
body.home-page .video-frame>video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
body.home-page .video-frame.video-frame--tinted::after {
content: "";
position: absolute;
inset: 0;
border-radius: 12px;
background: linear-gradient(to top, rgba(2, 6, 23, .55), rgba(2, 6, 23, 0) 45%);
pointer-events: none;
transition: opacity .2s ease;
}
body.home-page .video-card:hover .video-frame {
transform: scale(1.008);
box-shadow: 0 20px 48px rgba(2, 6, 23, .85);
}
body.home-page .video-card:hover .video-frame.video-frame--tinted::after {
opacity: .35;
}
/* Animated gradient ring around the video */
body.home-page .video-frame::before {
content: "";
position: absolute;
inset: -10px;
padding: 10px;
border-radius: 16px;
background: conic-gradient(from 0deg, #7c3aed, #6366f1, #0ea5e9, #7c3aed);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .35;
pointer-events: none;
filter: saturate(120%);
z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
body.home-page .video-frame::before {
animation: ring-rotate 8s linear infinite;
}
@keyframes ring-rotate {
to {
transform: rotate(360deg);
}
}
}
/* ---------- DIVIDER ---------- */
body.home-page .section-divider {
position: relative;
height: 12px;
border-radius: 999px;
overflow: hidden;
background: linear-gradient(90deg, rgba(99, 102, 241, .20), rgba(96, 165, 250, .20));
filter: blur(6px);
margin: 10px auto 8px;
}
body.home-page .section-divider::after {
content: "";
position: absolute;
inset: 0;
width: 40%;
background: linear-gradient(90deg, transparent, rgba(99, 102, 241, .45), rgba(96, 165, 250, .45), transparent);
transform: translateX(-50%);
}
@media (prefers-reduced-motion: no-preference) {
body.home-page .section-divider::after {
animation: divider-sweep 6s ease-in-out infinite;
}
@keyframes divider-sweep {
0% {
transform: translateX(-50%);
}
50% {
transform: translateX(110%);
}
100% {
transform: translateX(-50%);
}
}
}
/* ---------- FEATURES ---------- */
body.home-page .features-section {
position: relative;
padding-top: clamp(24px, 4vw, 40px);
padding-bottom: clamp(48px, 6vw, 72px);
background: linear-gradient(180deg, rgba(4, 6, 11, 0) 0%, rgba(9, 12, 20, .55) 100%);
}
body.home-page .features-section::before {
content: "";
position: absolute;
inset: -50px 0 auto 0;
height: 200px;
background:
radial-gradient(900px 320px at 18% 0%, rgba(124, 58, 237, .12), transparent 60%),
radial-gradient(900px 320px at 82% 0%, rgba(59, 130, 246, .12), transparent 60%);
filter: blur(10px);
pointer-events: none;
}
body.home-page .features-header {
text-align: center;
margin-bottom: 12px;
}
body.home-page .section-title {
font-size: clamp(1.4rem, 1.2vw + 1rem, 2rem);
margin: 0;
color: #e2e8f0;
}
body.home-page .section-sub {
color: #a7b0c0;
margin: 6px 0 0;
}
body.home-page .features-grid {
width: 100%;
display: grid;
gap: clamp(14px, 1.2vw, 20px);
grid-template-columns: repeat(3, minmax(0, 1fr));
justify-content: center;
}
@media (max-width: 1100px) {
body.home-page .features-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 576px) {
body.home-page .features-grid {
grid-template-columns: minmax(0, 1fr);
}
}
body.home-page .feature-card {
position: relative;
padding: 16px;
transition: transform .18s, box-shadow .18s;
}
body.home-page .feature-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 36px rgba(2, 6, 23, .7);
}
body.home-page .feature-card::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
border-radius: 16px 0 0 16px;
background: linear-gradient(180deg, #6366f1, #7c3aed);
opacity: 0;
transition: opacity .18s;
}
body.home-page .feature-card:hover::before {
opacity: 1;
}
body.home-page .feature-icon {
width: 42px;
height: 42px;
border-radius: 12px;
display: grid;
place-items: center;
background: linear-gradient(135deg, rgba(99, 102, 241, .18), rgba(30, 27, 75, .18));
box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .18);
color: #c7d2fe;
font-size: 1.2rem;
}
body.home-page .feature-card h3 {
margin: 8px 0 6px;
font-size: 1.1rem;
color: #e5e7eb;
}
body.home-page .feature-card p {
margin: 0;
color: #a7b0c0;
}
/* ---------- FOOTER ---------- */
body.home-page .home-footer {
padding: clamp(22px, 4vw, 48px) 0;
margin-top: clamp(12px, 2.5vw, 24px);
}
body.home-page .footer-grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width:900px) {
body.home-page .footer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width:576px) {
body.home-page .footer-grid {
grid-template-columns: 1fr;
}
}
body.home-page .home-footer h3 {
margin: 0 0 6px;
color: #e2e8f0;
}
body.home-page .use-case-list {
margin: 0;
padding-left: 1.1rem;
color: #a7b0c0;
}
body.home-page .footer-copy {
text-align: center;
color: #94a3b8;
margin-top: 6px;
}
/* ===== PATCH: make auth CTAs obvious, align video header, trim heights ===== */
/* Prominent hero buttons */
body.home-page .auth-cta {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin: 8px 0 14px;
}
body.home-page .btn-lg {
font-size: 1rem;
padding: .7rem 1.1rem;
border-radius: 12px;
}
/* If the links are still plain anchors somewhere, force-upgrade them */
body.home-page .hero-card a[href*="login"],
body.home-page .hero-card a[href*="register"],
body.home-page .hero-card a[href*="create"] {
display: inline-block;
text-decoration: none;
font-weight: 600;
border-radius: 12px;
padding: .65rem 1rem;
}
body.home-page .hero-card a[href*="login"] {
background: #4f46e5;
color: #fff;
box-shadow: 0 10px 22px rgba(79, 70, 229, .35);
}
body.home-page .hero-card a[href*="login"]:hover {
background: #4338ca;
transform: translateY(-1px);
}
body.home-page .hero-card a[href*="register"],
body.home-page .hero-card a[href*="create"] {
border: 1px solid rgba(148, 163, 184, .25);
color: #e5e7eb;
background: #0b1020;
}
body.home-page .hero-card a[href*="register"]:hover,
body.home-page .hero-card a[href*="create"]:hover {
background: #0f1426;
}
/* Video badge becomes a slim, full-width header bar */
body.home-page .video-header,
body.home-page .video-badge {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: .55rem .9rem;
margin-bottom: 8px;
background: rgba(26, 29, 44, .92);
color: #e5e7eb;
font-weight: 600;
border: 1px solid rgba(148, 163, 184, .22);
border-radius: 12px 12px 0 0;
box-shadow: 0 6px 14px rgba(2, 6, 23, .45);
}
/* Match the video to that header width by removing its top radius */
body.home-page .video-frame {
border-radius: 0 0 12px 12px;
border: 1px solid rgba(148, 163, 184, .18);
box-shadow: 0 12px 28px rgba(2, 6, 23, .65);
}
/* Animated ring kept, but slim */
body.home-page .video-frame::before {
inset: -1px;
padding: 1px;
border-radius: 13px;
opacity: .28;
}
/* Subtle time text in the header */
body.home-page .video-header .time,
body.home-page .video-badge .time {
opacity: .8;
font-variant-numeric: tabular-nums;
}
/* Trim hero/video card heights a touch more on desktop */
@media (min-width: 901px) {
body.home-page .hero-card,
body.home-page .video-card {
min-height: clamp(240px, 24vw, 320px) !important;
padding: clamp(14px, 1.6vw, 22px);
}
}
/* Center the Key Features grid and remove accidental height cap */
body.home-page .features-grid {
max-height: none !important;
/* remove prior cap */
justify-items: stretch;
align-items: start;
margin-left: auto;
margin-right: auto;
/* ensure it’s centered in the wrapper */
}
/* Slightly reduce vertical space under features */
body.home-page .features-section {
padding-bottom: clamp(40px, 5vw, 56px);
}
/* Keep headers easy to spot on dark background */
body.home-page .section-title {
color: #e5e7eb;
}
body.home-page .video-caption {
color: #cbd5e1;
}
/* ===== home.html ===== End ==== */
/* ************************************************************/
/* ===== Login.html ===== START ==== */
/* ===== LOGIN PAGE — FINAL OVERRIDES (place at end of mobile.css) ===== */
/* If you still want to suppress horizontal scrollbars only on the pages with big background effects, scope it */
body.home-page,
body.login-page {
overflow-x: clip;
/* modern, better than hidden; or use hidden if you need wider support */
/* overflow-x: hidden; */
}
/* 1) On the login page, neutralize site wrappers so they don't skew centering */
body.login-page .container,
body.login-page .container-narrow {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* 2) Symmetric, safe-area-aware gutters */
body.login-page {
--pad-l: max(18px, 6vw, env(safe-area-inset-left));
--pad-r: max(18px, 6vw, env(safe-area-inset-right));
}
body.login-page .auth-wrap {
min-height: calc(100dvh - 120px);
display: grid;
place-items: center;
/* block padding only; left/right use our variables */
padding-block: clamp(24px, 6vw, 48px);
padding-left: var(--pad-l);
padding-right: var(--pad-r);
}
/* 3) Card sizing: viewport minus gutters (can’t overflow) */
body.login-page .auth-card {
box-sizing: border-box;
width: clamp(300px,
calc(100vw - var(--pad-l) - var(--pad-r)),
600px);
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 16px;
box-shadow: 0 14px 36px rgba(2, 6, 23, .55);
backdrop-filter: saturate(110%) blur(.5px);
padding: clamp(20px, 3.2vw, 32px);
}
/* Extra headroom on very large monitors */
@media (min-width: 1440px) {
body.login-page .auth-card {
width: 640px;
}
}
/* Super-narrow phones still safe */
@media (max-width: 360px) {
body.login-page .auth-card {
width: calc(100vw - var(--pad-l) - var(--pad-r));
}
}
/* 4) Type scale: comfortable on desktop, not huge on phones */
body.login-page .auth-card {
font-size: clamp(16px, 1.05vw + .3rem, 18.5px);
}
body.login-page .auth-title {
margin: 0 0 12px;
text-align: center;
color: black;
font-size: clamp(1.6rem, 1.1vw + 1.2rem, 2rem);
}
/* Fields */
body.login-page .field {
margin-top: 12px;
}
body.login-page .field .label {
color: #000;
}
body.login-page .label {
display: inline-block;
margin: 8px 0 6px;
color: #cbd5e1;
font-weight: 600;
font-size: clamp(.95rem, .7vw + .78rem, 1.05rem);
}
body.login-page .input {
width: 100%;
padding: clamp(.65rem, 1vw, .85rem) .95rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, .25);
background: black;
color: #e5e7eb;
outline: none;
font-size: clamp(1rem, .9vw + .8rem, 1.1rem);
}
body.login-page .input:focus {
box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}
body.login-page .actions {
margin-top: 16px;
}
body.login-page .btn-primary.btn-block {
width: 100%;
border-radius: 12px;
padding: .85rem 1rem;
font-size: clamp(1rem, .9vw + .8rem, 1.125rem);
}
/* “Create account” line: readable & clearly tappable */
body.login-page .auth-switch {
margin-top: 16px;
text-align: center;
color: #a7b0c0;
font-size: clamp(.98rem, .85vw + .78rem, 1.12rem);
line-height: 1.4;
}
body.login-page .auth-switch a {
color: #c7d2fe !important;
font-weight: 600;
text-decoration: none;
border-bottom: 1px dashed rgba(199, 210, 254, .55);
padding-bottom: 1px;
}
body.login-page .auth-switch a:hover {
border-bottom-style: solid;
}
/* ===== Login.html ===== END ==== */
/* ************************************************************/
/* ===== register.html ===== Start ==== */
/* ===== Register.html — scoped to ===== */
@layer register {
/* Page scope + optional animated background (mirrors login-page pattern) */
body.register-page {
position: relative;
overflow-x: hidden;
}
@keyframes reg-rays-spin {
to {
transform: rotate(360deg);
}
}
@keyframes reg-glow-drift {
0% {
transform: translate3d(-2%, -1%, 0) scale(1.02);
}
50% {
transform: translate3d(2%, 1%, 0) scale(1.06);
}
100% {
transform: translate3d(-1%, 2%, 0) scale(1.03);
}
}
@media (prefers-reduced-motion: reduce) {
body.register-page.aurora-rays::before,
body.register-page.aurora-rays--loud::before,
body.register-page.aurora-rays::after,
body.register-page.aurora-rays--loud::after {
animation: none !important;
}
}
/* Make site shells transparent only on register */
body.register-page .upper,
body.register-page .middle,
body.register-page .lower {
background: transparent !important;
margin: 0;
padding: 0;
}
/* Layout: safe-area-aware centering with symmetric gutters */
body.register-page {
--pad-l: max(18px, 6vw, env(safe-area-inset-left));
--pad-r: max(18px, 6vw, env(safe-area-inset-right));
}
body.register-page .auth-wrap {
min-height: calc(100dvh - 120px);
display: grid;
place-items: center;
padding-block: clamp(24px, 6vw, 48px);
padding-left: var(--pad-l);
padding-right: var(--pad-r);
}
/* Card sizing: viewport minus gutters (prevents overflow on phones) */
body.register-page .auth-card {
box-sizing: border-box;
width: clamp(300px, calc(100vw - var(--pad-l) - var(--pad-r)), 640px);
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 16px;
box-shadow: 0 14px 36px rgba(2, 6, 23, .55);
backdrop-filter: saturate(110%) blur(.5px);
padding: clamp(20px, 3.2vw, 32px);
font-size: clamp(16px, 1.05vw + .3rem, 18.5px);
/* base scale for contents */
}
@media (min-width: 1440px) {
body.register-page .auth-card {
width: 700px;
}
}
@media (max-width: 360px) {
body.register-page .auth-card {
width: calc(100vw - var(--pad-l) - var(--pad-r));
}
}
.register-page .auth-title {
margin: 0 0 12px;
text-align: center;
color: black;
font-size: clamp(1.6rem, 1.1vw + 1.2rem, 2rem);
}
/* Fields */
.register-page .field {
margin-top: 12px;
}
.register-page .label {
display: inline-block;
margin: 8px 0 6px;
color: #cbd5e1;
font-weight: 600;
font-size: clamp(.95rem, .7vw + .78rem, 1.05rem);
}
.register-page .input {
width: 100%;
padding: clamp(.65rem, 1vw, .85rem) .95rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, .25);
background: #0b1020;
color: #e5e7eb;
outline: none;
font-size: clamp(1rem, .9vw + .8rem, 1.1rem);
}
.register-page .input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}
.register-page .error {
margin-top: 6px;
color: #fecaca;
font-size: .875rem;
}
/* Actions */
.register-page .actions {
margin-top: 16px;
}
.register-page .btn-primary.btn-block {
width: 100%;
border-radius: 12px;
padding: .85rem 1rem;
font-size: clamp(1rem, .9vw + .8rem, 1.125rem);
}
/* “Already have an account?” link */
.register-page .auth-switch {
margin-top: 16px;
text-align: center;
font-size: clamp(.98rem, .85vw + .78rem, 1.12rem);
line-height: 1.4;
}
.register-page .auth-switch a {
color: #c7d2fe !important;
font-weight: 600;
text-decoration: none;
border-bottom: 1px dashed rgba(199, 210, 254, .55);
padding-bottom: 1px;
}
.register-page .auth-switch a:hover {
border-bottom-style: solid;
}
}
/* ===== REGISTER PAGE — FINAL FIXES ===== */
/* Neutralize site wrappers only on register */
body.register-page .container,
body.register-page .container-narrow {
width: 100% !important;
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Symmetric, safe-area-aware gutters (prevents the right-side “fold”) */
body.register-page {
overflow-x: hidden;
/* safety */
--reg-pad-l: max(16px, 5vw, env(safe-area-inset-left));
--reg-pad-r: max(16px, 5vw, env(safe-area-inset-right));
}
body.register-page .auth-wrap {
padding-block: clamp(20px, 6vw, 44px);
padding-left: var(--reg-pad-l);
padding-right: var(--reg-pad-r);
}
/* Card width = viewport minus gutters (can’t overflow on phones) */
body.register-page .auth-card {
box-sizing: border-box;
width: min(640px, calc(100vw - var(--reg-pad-l) - var(--reg-pad-r)));
}
/* Super-narrow phones still safe */
@media (max-width: 380px) {
body.register-page .auth-card {
width: calc(100vw - var(--reg-pad-l) - var(--reg-pad-r));
}
}
/* -------- Compact vertical rhythm (shorter form) -------- */
body.register-page .auth-card {
padding: clamp(16px, 2.6vw, 28px);
}
body.register-page .field {
margin-top: clamp(8px, 1.6vh, 12px);
}
body.register-page .label {
margin: 4px 0 4px;
font-size: clamp(.95rem, .7vw + .78rem, 1.05rem);
}
/* Inputs/selects a bit shorter */
body.register-page .input {
padding: clamp(.55rem, .8vw, .8rem) .9rem;
border-radius: 10px;
font-size: clamp(1rem, .9vw + .78rem, 1.08rem);
}
/* Button slightly shorter too */
body.register-page .btn-primary.btn-block {
padding: .75rem 1rem;
border-radius: 12px;
font-size: clamp(1rem, .9vw + .78rem, 1.1rem);
}
/* Compact the helper line */
body.register-page .auth-switch {
margin-top: 14px;
font-size: clamp(.98rem, .85vw + .78rem, 1.07rem);
}
/* ===== Register page: desktop-only compaction ===== */
@media (min-width: 1200px) {
body.register-page .auth-card {
padding: 22px;
/* was ~32px max */
}
body.register-page .auth-title {
margin-bottom: 10px;
font-size: clamp(1.4rem, 0.9vw + 1.1rem, 1.8rem);
}
body.register-page .field {
margin-top: 10px;
/* was 12–16px */
}
body.register-page .label {
margin: 6px 0 4px;
font-size: 0.95rem;
line-height: 1.2;
}
body.register-page .input,
body.register-page select.input,
body.register-page textarea.input {
padding: 0.6rem 0.9rem;
/* keep ≥44px touch area */
border-radius: 10px;
}
body.register-page .btn-primary.btn-block {
padding: 0.8rem 1rem;
border-radius: 10px;
font-size: 1.05rem;
}
body.register-page .auth-switch {
margin-top: 12px;
}
}
@media (min-width: 1200px) {
body.register-page .form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 18px;
}
body.register-page .form-grid .field {
margin-top: 10px;
}
/* Make wide rows (passwords, button, helper) span both columns */
body.register-page .form-grid .field--full {
grid-column: 1 / -1;
}
}
/* Register: put Password + Confirm in one row on desktop only */
@media (min-width: 1200px) {
body.register-page .form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 18px;
row-gap: 14px;
}
/* Default each row to span both columns */
body.register-page .form-grid .field,
body.register-page .form-grid .actions,
body.register-page .form-grid .auth-switch {
grid-column: 1 / -1;
}
/* Half-width helpers for side-by-side fields */
body.register-page .form-grid .field--half {
grid-column: auto;
/* occupy one column */
}
/* Keep the Sign up button on its own full row */
body.register-page .form-grid .actions {
margin-top: 4px;
/* a touch of breathing room */
}
}
/* make inputs light */
/* Auth pages: force light inputs + dark labels */
.auth-page .ta-form input,
.auth-page .ta-form textarea,
.auth-page .ta-form select,
.auth-page .ta-form .form-control,
.auth-page .ta-form .form-select {
background: #fff !important;
color: #111827 !important;
border: 1px solid var(--border) !important;
}
.auth-page .ta-form label,
.auth-page .ta-form .form-label {
color: #111827 !important;
}
.auth-page .ta-form input::placeholder,
.auth-page .ta-form textarea::placeholder {
color: #6B7280 !important;
}
/* Safari/Chrome autofill */
.auth-page .ta-form input:-webkit-autofill {
-webkit-text-fill-color: #111827;
-webkit-box-shadow: 0 0 0 1000px #fff inset;
}
/* Force light controls on auth pages */
body.auth-page .ta-form input,
body.auth-page .ta-form textarea,
body.auth-page .ta-form select,
body.auth-page .ta-form .form-control,
body.auth-page .ta-form .form-select {
background: #fff !important;
color: #111827 !important;
border: 1px solid var(--border) !important;
}
body.auth-page .ta-form label,
body.auth-page .ta-form .form-label { color: #111827 !important; }
/* ===== register.html ===== End ==== */
/* ************************************************************/
/* ================= AUTH (login + register) ================= */
body.auth-page {
--auth-pad-inline: max(18px, 6vw, env(safe-area-inset-left), env(safe-area-inset-right));
overflow-x: hidden;
}
/* neutralize any site wrappers only on auth pages */
.auth-page .upper,
.auth-page .middle,
.auth-page .lower {
background: transparent !important;
margin: 0;
padding: 0;
}
/* center the card, safe-area aware */
.auth-page .auth-wrap {
min-height: calc(100dvh - 120px);
display: grid;
place-items: center;
padding-block: clamp(24px, 6vw, 48px);
padding-inline: var(--auth-pad-inline);
}
/* card */
.auth-page .auth-card {
box-sizing: border-box;
width: min(700px, calc(100vw - 2 * var(--auth-pad-inline)));
background: var(--surface);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: 0 14px 36px rgba(2, 6, 23, .08);
padding: clamp(20px, 3.2vw, 32px);
}
/* title */
.auth-page .auth-title {
margin: 0 0 12px;
text-align: center;
color: #111827;
font-size: clamp(1.6rem, 1.1vw + 1.2rem, 2rem);
}
/* fields */
.auth-page .field { margin-top: 12px; }
.auth-page .label,
.auth-page .form-label { color: #111827; }
/* light inputs (covers custom .input and Bootstrap-style controls) */
.auth-page .input,
.auth-page .form-control,
.auth-page .form-select,
.auth-page select.input,
.auth-page textarea.input {
width: 100%;
background: #fff;
color: #111827;
border: 1px solid var(--border);
border-radius: 12px;
padding: clamp(.6rem, 1vw, .85rem) .95rem;
}
.auth-page .input::placeholder,
.auth-page .form-control::placeholder { color: #6B7280; }
.auth-page .input:focus,
.auth-page .form-control:focus,
.auth-page .form-select:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, .2);
outline: 0;
}
/* autofill */
.auth-page input:-webkit-autofill {
-webkit-text-fill-color: #111827;
-webkit-box-shadow: 0 0 0 1000px #fff inset;
}
/* actions */
.auth-page .actions { margin-top: 16px; }
.auth-page .btn-primary.btn-block {
width: 100%;
border-radius: 12px;
padding: .85rem 1rem;
font-size: clamp(1rem, .9vw + .8rem, 1.125rem);
}
/* ================= REGISTER-ONLY layout tweaks ================= */
@media (min-width: 1200px) {
.register-page .form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 18px;
row-gap: 14px;
}
.register-page .field--full { grid-column: 1 / -1; }
}
/* Auth pages: make submit buttons blue again */
.auth-page .btn-primary,
.auth-page .ta-form [type="submit"] {
background: linear-gradient(180deg, #3b82f6, #2563eb) !important;
border-color: #1e40af !important;
color: #fff !important;
}
.auth-page .btn-primary:hover,
.auth-page .ta-form [type="submit"]:hover {
background: linear-gradient(180deg, #2563eb, #1d4ed8) !important;
border-color: #1e3a8a !important;
}
.auth-page .btn-primary:focus,
.auth-page .ta-form [type="submit"]:focus {
box-shadow: 0 0 0 3px rgba(37, 99, 235, .25) !important;
outline: 0;
}
/* ===== results.html ===== START ==== */
.results-page {
--results-bg: linear-gradient(180deg, #f7fbff 0%, #eef3ff 100%);
background: var(--results-bg);
}
/* Optional solid variant when you don't want the gradient */
.results-page.solid {
--results-bg: #f4f6f8;
}
/* Scalable headings on mobile */
h1 {
font-size: clamp(1.4rem, 2.5vw + 1rem, 2rem);
}
h2 {
font-size: clamp(1.2rem, 2vw + .8rem, 1.6rem);
}
h3 {
font-size: clamp(1.05rem, 1.5vw + .7rem, 1.3rem);
}
@media (max-width: 576px) {
.container {
padding-left: .75rem;
padding-right: .75rem;
}
}
/* Prevent long tokens from breaking layout */
.summary-block,
.card,
table,
.badge,
.label,
.chip {
overflow-wrap: anywhere;
word-break: break-word;
}
/* ===== Media scales down ===== */
img,
video,
canvas,
svg,
iframe {
max-width: 100%;
height: auto;
display: block;
}
.summary-block .summary-meta {
text-align: right;
font-size: .85rem;
color: #64748b;
margin: -4px 0 8px;
}
.centered-buttons {
text-align: center;
margin-top: .5rem;
}
/* already present earlier */
.hidden-chunk {
display: none;
}
/* ===== Tables: horizontal scroll on small screens ===== */
.table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-responsive>table {
min-width: 600px;
}
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
padding: .5rem .75rem;
}
@media (max-width: 576px) {
.table-sm th,
.table-sm td {
padding: .35rem .5rem;
}
}
/* Specific data tables */
.emotion-combined-table th,
.emotion-combined-table td,
.absa-table th,
.absa-table td {
padding: .5rem .75rem;
}
@media (max-width: 576px) {
.emotion-combined-table th,
.emotion-combined-table td,
.absa-table th,
.absa-table td {
padding: .35rem .5rem;
}
}
.scroll-x {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ===== Results page normalization (scoped) ===== */
.results-page .top-button-bar,
.results-page .bottom-button-bar,
.results-page .result-section,
.results-page .charts,
.results-page .summary-block {
margin-top: 16px;
margin-bottom: 16px;
}
.results-page h2 {
margin: 0 0 12px;
}
.results-page h3 {
margin: 8px 0 8px;
}
.results-page button,
.results-page select,
.results-page a.button-like {
font-size: 14px;
padding: 8px 12px;
border-radius: 8px;
}
/* Charts grid */
.results-page .charts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
.results-page .chart-wrap {
max-width: 100%;
margin: 0 auto;
}
/* Make data tables readable */
.results-page .emotion-combined-table,
.results-page .absa-table {
font-size: 0.95rem;
}
.results-page .emotion-combined-table th,
.results-page .absa-table th {
font-weight: 600;
}
/* Normalize inner container */
.results-page .container {
background: transparent;
box-shadow: none;
padding: 0;
max-width: none;
}
/* ===== Charts (single, consolidated set) ===== */
.chart-wrap {
position: relative;
width: 100%;
aspect-ratio: 16/9;
margin: 0 auto;
}
@media (max-width: 576px) {
.chart-wrap {
aspect-ratio: 4/3;
}
}
/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 1) {
.chart-wrap::before {
content: "";
float: left;
padding-top: 56.25%;
}
.chart-wrap::after {
content: "";
display: block;
clear: both;
}
}
/* Support IMG/SVG/CANVAS and Plotly DIV (.chart) */
.chart-wrap>img,
.chart-wrap>svg,
.chart-wrap>canvas,
.chart-wrap>.chart {
position: absolute;
inset: 0;
width: 100% !important;
height: 100% !important;
object-fit: contain;
display: block;
}
/* Optional desktop cap so charts don’t look huge */
.section-card .chart-wrap {
max-width: 900px;
}
/* Global, responsive chart padding */
:root {
/* 8px on tiny screens → scales with viewport → capped at 24px */
--chart-pad: clamp(8px, 2.5vmin, 24px);
}
/* Word Cloud: same size as other charts + responsive inner padding */
.section-card .chart-wrap.wordcloud {
max-width: 900px;
aspect-ratio: 16/9;
--wc-pad: var(--chart-pad);
}
@media (max-width:576px) {
.section-card .chart-wrap.wordcloud {
aspect-ratio: 4/3;
}
}
.section-card .chart-wrap.wordcloud>img {
position: absolute;
inset: var(--wc-pad) !important;
width: calc(100% - (var(--wc-pad) * 2)) !important;
height: calc(100% - (var(--wc-pad) * 2)) !important;
object-fit: contain;
}
/* Per-chart ratios */
.chart-wrap.radar {
aspect-ratio: 1/1;
}
/* ===== Sentiment Scores (compact card) ===== */
.section-card h3,
.section-title {
text-align: center;
}
/* unify title centering */
.section-card .chart-wrap.scores {
/* override tall chart defaults */
aspect-ratio: auto;
/* collapse height */
min-height: 0;
height: auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 12px;
}
.section-card .scores-table {
border-collapse: collapse;
width: auto;
margin: 0;
}
.section-card .scores-table th {
text-align: left;
font-weight: 600;
padding: 2px 12px 2px 0;
white-space: nowrap;
}
.section-card .scores-table td {
text-align: right;
padding: 2px 0;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-variant-numeric: tabular-nums;
}
@media (max-width:640px) {
.section-card .scores-table th {
padding-right: 8px;
}
.section-card .scores-table td {
padding: 1px 0;
}
}
/* ===== Results page background + cards ===== */
.section-card {
background: #fff;
border: 1px solid #e7ecf3;
border-radius: 14px;
box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
padding: 18px;
margin: 18px auto;
background-color: snow;
}
/* Chart container inside cards */
.section-card .chart-wrap {
background: #fff;
border: 1px solid #e7ecf3;
border-radius: 12px;
padding: 10px;
margin-inline: auto;
}
/* Table zebra and header tint */
.table-responsive>table thead th {
background: #f8fafc;
}
.table-responsive>table tbody tr:nth-child(even) {
background: #fcfdfd;
}
a.btn,
.btn {
display: inline-block;
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: .5rem .8rem;
text-decoration: none;
color: #111;
background: #fff;
}
.btn-primary {
background: #2563eb;
color: #fff;
}
.btn-primary:hover {
background: #1e40af;
}
.btn-secondary {
background: #e2e8f0;
color: #111;
}
.btn-secondary:hover {
background: #cbd5e1;
}
/* ===== Full Summary table ===== START ==== */
/* ===== Full Summary table ===== START ==== */
/* ===== Full Summary table ===== START ==== */
/* Legend under the table title */
.table-legend {
margin: 6px 0 10px;
padding: 6px 10px;
font-size: 1.2rem;
color: #475569;
/* muted slate */
background: #f8fafc;
/* soft tint */
border: 1px solid #cbd5e1;
border-left: 3px solid #cbd5e1;
border-right: 3px solid #cbd5e1;
border-radius: 8px;
}
.table-legend strong {
color: goldenrod;
/* accent for the keys */
font-weight: 700;
}
/* Base table sizing */
#sentence-report-table {
table-layout: fixed;
/* honor colgroup widths, wrap long text */
width: 100%;
font-size: 0.92rem;
line-height: 1.32;
}
#sentence-report-table th,
#sentence-report-table td {
border: 1px solid #ddd;
padding: 6px;
/* one value only (was 6px vs 8px) */
text-align: left;
vertical-align: top;
overflow-wrap: anywhere;
/* wrap long tokens */
word-break: normal;
}
/* Header: compact, grey, non-wrapping, sticky */
#sentence-report-table thead th {
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
font-size: 0.90rem;
background: #f2f4f7;
font-weight: 700;
position: sticky;
top: 0;
z-index: 3;
}
/* Numeric columns: right-aligned, tabular digits */
#sentence-report-table .num {
text-align: right;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* Mobile tweaks (ONE block) */
@media (max-width: 576px) {
#sentence-report-table {
font-size: 0.88rem;
}
#sentence-report-table .num {
font-size: 0.85rem;
}
/* give Sentence more room; keep key metrics readable */
#sentence-report-table colgroup col:nth-child(1) {
width: 58% !important;
}
/* Sentence */
#sentence-report-table colgroup col:nth-child(3) {
width: 10% !important;
}
/* Class */
#sentence-report-table colgroup col:nth-child(4) {
width: 8% !important;
}
/* Score */
#sentence-report-table colgroup col:nth-child(10) {
width: 12% !important;
}
/* Rec */
}
/* Download controls (keep once globally—remove here if already defined elsewhere) */
.download-btn {
display: inline-flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
}
.download-btn select {
appearance: none;
background: #fff;
color: #111;
border: 1px solid #cbd5e1;
min-width: 140px;
border-radius: 8px;
padding: .45rem .6rem;
}
.download-btn button {
background: #2563eb;
color: #fff;
border: 0;
border-radius: 8px;
padding: .5rem .8rem;
cursor: pointer;
}
.download-btn button:hover {
background: #1e40af;
}
/* ===== Full Summary table ===== END ==== */
/* ************************************************************/
/* ===== portfolio.html ===== Start ==== */
/* ===== portfolio.html (scoped) ===== */
@layer portfolio {
body.portfolio-page {
/* soft neutral background */
background:
radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, .05), transparent 60%),
radial-gradient(1200px 600px at 90% -20%, rgba(16, 185, 129, .05), transparent 60%),
linear-gradient(180deg, #f7fbff 0%, #eef3ff 100%);
}
/* use shared width cap */
body.portfolio-page .portfolio-wrap {
max-width: min(98vw, var(--container-max));
margin-inline: auto;
padding-inline: clamp(12px, 2vw, 24px);
padding-block: clamp(12px, 2vw, 20px);
}
body.portfolio-page .portfolio-header {
display: grid;
gap: 10px;
margin-bottom: 10px;
}
body.portfolio-page .portfolio-title {
margin: 0;
font-size: clamp(1.4rem, 1.2vw + 1rem, 2rem);
}
body.portfolio-page .portfolio-search {
width: 100%;
max-width: 560px;
padding: .65rem .9rem;
border-radius: 10px;
border: 1px solid #cbd5e1;
background: #fff;
font: inherit;
}
body.portfolio-page .portfolio-search:focus {
outline: none;
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, .2);
}
body.portfolio-page .portfolio-section {
margin: 14px 0 18px;
}
/* card look, independent from other card styles */
body.portfolio-page .portfolio-card {
background: #fff;
border: 1px solid #e7ecf3;
border-radius: 14px;
box-shadow: 0 10px 28px rgba(16, 24, 40, .08);
padding: 16px;
}
body.portfolio-page .portfolio-h2 {
margin: 0 0 8px;
font-size: clamp(1.1rem, .9vw + .9rem, 1.4rem);
}
/* lists */
body.portfolio-page .portfolio-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 10px;
}
body.portfolio-page .portfolio-list-item {
padding: 10px 12px;
border: 1px solid #e7ecf3;
border-radius: 10px;
background: #fcfdff;
}
/* table (with horizontal scroll on small screens) */
body.portfolio-page .table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
body.portfolio-page .portfolio-table {
width: 100%;
min-width: 680px;
/* keeps columns readable on small screens */
border-collapse: collapse;
}
body.portfolio-page .portfolio-table th,
body.portfolio-page .portfolio-table td {
padding: .6rem .75rem;
border: 1px solid #e7ecf3;
text-align: left;
}
body.portfolio-page .portfolio-table thead th {
background: #f8fafc;
font-weight: 600;
}
/* status colors (orders) */
body.portfolio-page .status.cancelled {
color: #e11d48;
}
/* red */
body.portfolio-page .status.shipped {
color: #2563eb;
}
/* blue */
body.portfolio-page .status.delivered {
color: #16a34a;
}
/* green */
body.portfolio-page .status.returned {
color: #ea580c;
}
/* orange */
body.portfolio-page .status.replaced {
color: #7e22ce;
}
/* purple */
/* pagination */
body.portfolio-page .pagination {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
body.portfolio-page .pagination .pg-btn {
border: 1px solid #cbd5e1;
background: #fff;
padding: .45rem .8rem;
border-radius: 8px;
cursor: pointer;
}
body.portfolio-page .pagination .pg-btn:disabled {
opacity: .45;
cursor: not-allowed;
}
body.portfolio-page .pagination .pg-label {
color: #475569;
font-size: .95rem;
}
body.portfolio-page .portfolio-empty {
color: #64748b;
margin: 6px 0 16px;
}
}
/* ===== portfolio.html ===== END ==== */
/* ************************************************************/
/* ===== create_crm_contact.html ===== Start ==== */
/* ===== create_crm_contact.html (scoped) ===== */
@layer crm {
/* page background */
body.crm-page {
background:
radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, .05), transparent 60%),
radial-gradient(1200px 600px at 90% -20%, rgba(16, 185, 129, .05), transparent 60%),
linear-gradient(180deg, #f7fbff 0%, #eef3ff 100%);
}
/* safe, symmetric gutters (also respects iOS safe areas) */
body.crm-page {
--pad-l: max(16px, 4vw, env(safe-area-inset-left));
--pad-r: max(16px, 4vw, env(safe-area-inset-right));
}
body.crm-page .crm-wrap {
min-height: calc(100dvh - 120px);
/* leaves room for navbar/footer */
display: grid;
place-items: center;
padding-block: clamp(20px, 5vw, 48px);
padding-left: var(--pad-l);
padding-right: var(--pad-r);
}
body.crm-page .crm-card {
width: clamp(320px, 96vw, 760px);
background: rgba(15, 18, 32, .92);
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 16px;
box-shadow: 0 14px 36px rgba(2, 6, 23, .55);
backdrop-filter: saturate(110%) blur(.5px);
padding: clamp(18px, 3vw, 28px);
color: #e5e7eb;
}
body.crm-page .crm-title {
margin: 0 0 12px;
text-align: center;
font-size: clamp(1.4rem, 1.1vw + 1.1rem, 1.9rem);
}
/* two-column on wide screens, single-column on phones */
body.crm-page .crm-grid {
display: grid;
gap: 14px;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
body.crm-page .crm-grid {
grid-template-columns: 1fr 1fr;
}
}
body.crm-page .field {
margin-top: 4px;
}
body.crm-page .label {
display: inline-block;
margin: 4px 0 6px;
color: #cbd5e1;
font-weight: 600;
font-size: clamp(.95rem, .5vw + .8rem, 1.05rem);
}
body.crm-page .input {
width: 100%;
padding: .7rem .9rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, .25);
background: #0b1020;
color: #e5e7eb;
font-size: clamp(1rem, .7vw + .85rem, 1.1rem);
outline: none;
}
body.crm-page .input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}
body.crm-page .error {
margin-top: 6px;
color: #fecaca;
font-size: .875rem;
}
body.crm-page .actions {
margin-top: 16px;
grid-column: 1/-1;
/* full row under the grid */
}
body.crm-page .btn-primary.btn-block {
width: 100%;
border-radius: 12px;
padding: .9rem 1rem;
font-weight: 700;
font-size: clamp(1rem, .8vw + .85rem, 1.1rem);
background: #4f46e5;
color: #fff;
border: 0;
box-shadow: 0 10px 22px rgba(79, 70, 229, .35);
cursor: pointer;
}
body.crm-page .btn-primary.btn-block:hover {
background: #4338ca;
}
}
/* ===== create_crm_contact.html ===== End ==== */
/* ************************************************************/
/* ===== create_crm_dashboard.html ===== Start ==== */
/* ===== CRM dashboard (scoped) ===== */
@layer crm {
body.crm-dash-page {
overflow-x: clip;
--pad-l: max(16px, 5vw, env(safe-area-inset-left));
--pad-r: max(16px, 5vw, env(safe-area-inset-right));
}
/* ignore _base wrappers for this page only */
body.crm-dash-page .container,
body.crm-dash-page .container-narrow {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.crm-dash-page .crm-dash-wrap {
min-height: calc(100dvh - 120px);
display: flex;
justify-content: center;
padding-block: clamp(16px, 4vw, 32px);
padding-left: var(--pad-l);
padding-right: var(--pad-r);
}
body.crm-dash-page .crm-card {
box-sizing: border-box;
width: clamp(320px, calc(100vw - var(--pad-l) - var(--pad-r)), 900px);
background: rgba(15, 18, 32, .92);
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 16px;
box-shadow: 0 14px 36px rgba(2, 6, 23, .55);
backdrop-filter: saturate(110%) blur(.5px);
padding: clamp(16px, 2.4vw, 28px);
}
body.crm-dash-page .form-title {
margin: 0 0 12px;
color: #e5e7eb;
font-size: clamp(1.6rem, 1.1vw + 1rem, 2rem);
}
body.crm-dash-page .muted {
color: #a7b0c0;
margin: 0 0 8px;
}
/* quick-action buttons */
body.crm-dash-page .crm-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
margin: 8px 0 20px;
}
body.crm-dash-page .btn-primary,
body.crm-dash-page .btn-ghost {
display: inline-block;
text-align: center;
text-decoration: none;
padding: .75rem 1rem;
border-radius: 12px;
font-weight: 700;
}
body.crm-dash-page .btn-primary {
background: #2563eb;
color: #fff;
}
body.crm-dash-page .btn-primary:hover {
background: #1e40af;
}
body.crm-dash-page .btn-ghost {
background: #0b1020;
color: #e5e7eb;
border: 1px solid rgba(148, 163, 184, .25);
}
body.crm-dash-page .btn-ghost:hover {
background: #0f1426;
}
/* dropdown (optional) */
body.crm-dash-page .dropdown {
position: relative;
display: inline-block;
width: 100%;
}
body.crm-dash-page .dropbtn {
width: 100%;
padding: .7rem 1rem;
border-radius: 12px;
cursor: pointer;
border: 1px solid rgba(148, 163, 184, .25);
background: #0b1020;
color: #e5e7eb;
font-weight: 700;
}
body.crm-dash-page .dropdown-content {
display: none;
position: absolute;
left: 0;
right: 0;
margin-top: 8px;
background: #0f1220;
border: 1px solid rgba(148, 163, 184, .2);
border-radius: 12px;
box-shadow: 0 10px 28px rgba(2, 6, 23, .55);
z-index: 10;
}
body.crm-dash-page .dropdown-content a {
display: block;
padding: .7rem 1rem;
color: #e5e7eb;
text-decoration: none;
}
body.crm-dash-page .dropdown-content a:hover {
background: #0b1020;
}
body.crm-dash-page .dropdown:hover .dropdown-content,
body.crm-dash-page .dropdown:focus-within .dropdown-content {
display: block;
background-color: white;
}
body.crm-dash-page .crm-card {
min-height: 0 !important;
}
.crm-dash-page .muted{
font-weight: bold;
}
.crm-dash-page .form-title{
font-weight: bold;
}
/* mobile: keep the menu within the card, no overflow */
@media (max-width: 480px) {
body.crm-dash-page .dropdown-content {
position: static;
box-shadow: none;
}
}
}
/* ===== create_crm_dashboard.html ===== End ==== */
/* ===== create_crm_deal.html ===== Start ==== */
@layer crmDeal {
/* page background + safe gutters */
body.crm-deal-page {
--pad-l: max(16px, 5vw, env(safe-area-inset-left));
--pad-r: max(16px, 5vw, env(safe-area-inset-right));
background:
radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, .06), transparent 60%),
radial-gradient(1200px 600px at 90% -20%, rgba(16, 185, 129, .06), transparent 60%),
linear-gradient(180deg, #f7fbff 0%, #eef3ff 100%);
}
.crm-form-wrap {
min-height: calc(100dvh - 120px);
display: grid;
place-items: center;
padding-block: clamp(24px, 6vw, 56px);
padding-left: var(--pad-l);
padding-right: var(--pad-r);
}
.crm-form-card {
width: clamp(340px, 96vw, 760px);
background: rgba(15, 18, 32, .92);
color: #e5e7eb;
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 18px;
box-shadow: 0 14px 36px rgba(2, 6, 23, .55);
backdrop-filter: saturate(110%) blur(.5px);
padding: clamp(20px, 3vw, 32px);
}
.crm-form-title {
margin: 0 0 6px;
text-align: center;
font-size: clamp(1.5rem, 1.2vw + 1.2rem, 2rem);
}
.crm-form-sub {
margin: 0 0 16px;
text-align: center;
color: #a7b0c0;
font-size: clamp(.98rem, .6vw + .8rem, 1.05rem);
}
.field {
margin-top: 14px;
}
.label {
display: inline-block;
margin-bottom: 6px;
color: #cbd5e1;
font-weight: 600;
font-size: clamp(.95rem, .6vw + .78rem, 1.05rem);
}
.input {
width: 100%;
padding: .7rem .9rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, .25);
background: #0b1020;
color: #e5e7eb;
outline: none;
font-size: clamp(1rem, .8vw + .8rem, 1.1rem);
}
.input:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}
/* Multi-select gets a bit taller by default */
select[multiple].input {
min-height: 8rem;
}
.help {
margin-top: 6px;
font-size: .9rem;
color: #94a3b8;
}
/* 2-column layout for wider screens */
.grid-2 {
display: grid;
gap: 12px;
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.grid-2 {
grid-template-columns: 1fr 1fr;
}
}
.actions {
margin-top: 18px;
}
.btn-primary.btn-block {
width: 100%;
background: #4f46e5;
color: #fff;
border: 0;
border-radius: 12px;
padding: .9rem 1rem;
font-weight: 700;
font-size: clamp(1rem, .9vw + .8rem, 1.125rem);
cursor: pointer;
box-shadow: 0 10px 22px rgba(79, 70, 229, .35);
transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn-primary.btn-block:hover {
background: #4338ca;
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(79, 70, 229, .45);
}
}
/* CRM light theme — override any old dark styles */
.crm-page .surface-card {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
box-shadow: 0 6px 20px rgba(0,0,0,.05) !important;
}
/* labels + inputs inside CRM cards */
.crm-page .surface-card .label,
.crm-page .surface-card .form-label,
.crm-page .crm-form-title { color:#111827 !important; }
.crm-page .form-title { color:#111827 !important; }
.crm-page .crm-title { color:#111827 !important; }
.crm-page .surface-card .input,
.crm-page .surface-card .form-control,
.crm-page .surface-card .form-select,
.crm-page .surface-card select,
.crm-page .surface-card textarea {
background:#fff !important;
color:#111827 !important;
border:1px solid var(--border) !important;
}
/* ===== create_crm_deal.html ===== End ==== */
/* ************************************************************/
/* ===== hubspot_contacts.html ===== Start ==== */
/* ===== hubspot_contacts.html (scoped) ===== */
@layer hubspotContacts {
body.hubspot-contacts-page {
--pad-l: max(12px, 2vw, env(safe-area-inset-left));
--pad-r: max(12px, 2vw, env(safe-area-inset-right));
background:
radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, .06), transparent 60%),
radial-gradient(1200px 600px at 90% -20%, rgba(16, 185, 129, .06), transparent 60%),
linear-gradient(180deg, #f7fbff 0%, #eef3ff 100%);
}
.contacts-wrap {
min-height: calc(100dvh - 120px);
padding-block: clamp(18px, 4vw, 36px);
padding-left: var(--pad-l);
padding-right: var(--pad-r);
display: grid;
place-items: start center;
}
.contacts-card {
width: clamp(340px, 96vw, 1100px);
background: #fff;
border: 1px solid #e7ecf3;
border-radius: 14px;
box-shadow: 0 10px 28px rgba(16, 24, 40, .08);
padding: clamp(14px, 2.2vw, 22px);
}
.contacts-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.contacts-header h1 {
margin: 0;
font-size: clamp(1.2rem, 1.2vw + 1rem, 1.8rem);
}
#contact-search {
width: min(320px, 100%);
padding: .55rem .8rem;
border-radius: 10px;
border: 1px solid #cbd5e1;
background: #fff;
color: #111;
outline: none;
font-size: 1rem;
}
#contact-search:focus {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .18);
}
.table-responsive {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.contacts-table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
font-size: 0.96rem;
}
.contacts-table th,
.contacts-table td {
padding: .55rem .75rem;
border: 1px solid #e7ecf3;
text-align: left;
vertical-align: top;
overflow-wrap: anywhere;
}
.contacts-table thead th {
position: sticky;
top: 0;
z-index: 1;
background: #f8fafc;
font-weight: 700;
white-space: nowrap;
}
.contacts-table tbody tr:nth-child(even) {
background: #fcfdfd;
}
.contacts-table a {
color: #2563eb;
text-decoration: none;
font-weight: 600;
}
.contacts-table a:hover {
text-decoration: underline;
}
@media (max-width: 576px) {
.contacts-card {
padding: 12px;
}
.contacts-table {
font-size: .94rem;
}
}
}
/* Shared surface card for all pages (CRM, forms, etc.) */
.surface-card,
.ta-form {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px;
box-shadow: 0 6px 20px rgba(0,0,0,.05);
}
/* Ensure light fields inside cards */
.surface-card input,
.surface-card select,
.surface-card textarea,
.surface-card .form-control,
.surface-card .form-select {
background: #fff;
color: #111827;
border: 1px solid var(--border);
}
.surface-card label,
.surface-card .form-label { color: #111827; }
/* Make CRM cards use the shared white surface */
.crm-card.surface-card {
background: var(--surface) !important;
border: 1px solid var(--border) !important;
box-shadow: 0 6px 20px rgba(0,0,0,.05) !important;
}
/* ===== hubspot_contacts.html ===== End ==== */
/* ************************************************************/
/* ===== hubspot_contact_details.html ===== Start ==== */
/* ===== hubspot_contact_details (scoped) ===== */
@layer hubspotContactDetails {
body.hubspot-contact-details-page {
--pad-l: max(12px, 2vw, env(safe-area-inset-left));
--pad-r: max(12px, 2vw, env(safe-area-inset-right));
background:
radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, .06), transparent 60%),
radial-gradient(1200px 600px at 90% -20%, rgba(16, 185, 129, .06), transparent 60%),
linear-gradient(180deg, #f7fbff 0%, #eef3ff 100%);
}
.contact-details-wrap {
min-height: calc(100dvh - 120px);
padding-block: clamp(18px, 4vw, 36px);
padding-left: var(--pad-l);
padding-right: var(--pad-r);
display: grid;
place-items: start center;
}
.contact-card {
width: clamp(340px, 96vw, 900px);
background: #fff;
border: 1px solid #e7ecf3;
border-radius: 14px;
box-shadow: 0 10px 28px rgba(16, 24, 40, .08);
padding: clamp(16px, 2.2vw, 24px);
}
.contact-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.contact-card__header h1 {
margin: 0;
font-size: clamp(1.2rem, 1.2vw + 1rem, 1.8rem);
}
.back-link {
display: inline-flex;
align-items: center;
gap: 8px;
text-decoration: none;
background: #fff;
color: #111;
border: 1px solid #cbd5e1;
border-radius: 10px;
padding: .5rem .8rem;
font-weight: 600;
}
.back-link:hover {
background: #f8fafc;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(12px, 2vw, 18px);
margin-top: 8px;
}
@media (max-width: 700px) {
.contact-grid {
grid-template-columns: 1fr;
}
}
.field {
background: #fcfdfd;
border: 1px solid #e7ecf3;
border-radius: 10px;
padding: 10px 12px;
}
.label {
font-size: .85rem;
color: #64748b;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .02em;
margin-bottom: 4px;
}
.value {
font-size: 1rem;
color: #0f172a;
overflow-wrap: anywhere;
}
}
/* ===== hubspot_contact_details.html ===== End ==== */
/* ************************************************************/
/* ==== Common for all CRM forms: ==== Start ==== */
/* ===== CRM forms (contact & deal) ===== */
@layer crm {
/* page scope + safe-area gutters */
body.crm-form-page {
position: relative;
overflow-x: clip;
/* only here; don't use globally */
--pad-l: max(16px, 5vw, env(safe-area-inset-left));
--pad-r: max(16px, 5vw, env(safe-area-inset-right));
}
/* ignore _base wrappers on CRM forms */
body.crm-form-page .container,
body.crm-form-page .container-narrow {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* center the form area with symmetric gutters */
body.crm-form-page .crm-form-wrap {
min-height: calc(100dvh - 120px);
display: flex;
justify-content: center;
padding-block: clamp(16px, 4vw, 32px);
padding-left: var(--pad-l);
padding-right: var(--pad-r);
}
/* the card itself */
body.crm-form-page .crm-card {
box-sizing: border-box;
width: clamp(320px, calc(100vw - var(--pad-l) - var(--pad-r)), 880px);
background: rgba(15, 18, 32, .92);
border: 1px solid rgba(148, 163, 184, .18);
border-radius: 16px;
box-shadow: 0 14px 36px rgba(2, 6, 23, .55);
backdrop-filter: saturate(110%) blur(.5px);
padding: clamp(16px, 2.4vw, 28px);
}
body.crm-form-page .form-title {
margin: 0 0 12px;
font-size: clamp(1.5rem, 1.1vw + 1rem, 2rem);
color: #e5e7eb;
}
/* fields */
body.crm-form-page .field {
margin-top: 12px;
}
body.crm-form-page .label {
display: block;
margin: 6px 0 6px;
color: #cbd5e1;
font-weight: 700;
letter-spacing: .02em;
font-size: clamp(.95rem, .7vw + .78rem, 1.05rem);
}
body.crm-form-page .input,
body.crm-form-page select,
body.crm-form-page textarea,
/* fallback if WTForms fields didn't get class="input" */
body.crm-form-page input[type="text"],
body.crm-form-page input[type="email"],
body.crm-form-page input[type="tel"],
body.crm-form-page input[type="number"] {
width: 100%;
min-width: 0;
/* prevents overflow on mobile */
padding: .8rem 1rem;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, .25);
background: #0b1020;
color: #e5e7eb;
font-size: clamp(1rem, .9vw + .8rem, 1.1rem);
outline: none;
}
body.crm-form-page .input:focus,
body.crm-form-page select:focus,
body.crm-form-page textarea:focus {
border-color: #6366f1;
box-shadow: 0 0 0 3px rgba(99, 102, 241, .25);
}
body.crm-form-page .actions {
margin-top: 16px;
}
body.crm-form-page .btn-primary {
display: block;
width: 100%;
border: 0;
border-radius: 12px;
padding: .9rem 1rem;
background: #2563eb;
color: #fff;
font-weight: 700;
cursor: pointer;
}
body.crm-form-page .btn-primary:hover {
background: #1e40af;
}
/* desktop tightening */
@media (min-width: 1200px) {
body.crm-form-page .crm-card {
padding: 24px 28px;
}
body.crm-form-page .field {
margin-top: 10px;
}
}
}
/* ===== CRM PAGES – unified look (scoped) ===== */
body.crm-page {
/* palette – local to CRM only */
--crm-card: #1f2532;
/* card panels */
--crm-surface: #121a2a;
/* inputs */
--crm-border: rgba(148, 163, 184, .22);
--crm-text: #e5e7eb;
--crm-muted: #a7b0c0;
--crm-primary: #2563eb;
--crm-primary-600: #1d4ed8;
--crm-primary-700: #1e40af;
}
/* Card panels */
body.crm-page .crm-card {
background: var(--crm-card);
border: 1px solid var(--crm-border);
border-radius: 16px;
box-shadow: 0 18px 44px rgba(2, 6, 23, .35);
color: var(--crm-text);
}
/* Headings/labels */
body.crm-page .crm-title {
color: var(--crm-text);
}
body.crm-page .crm-sub {
color: var(--crm-muted);
}
body.crm-page .label {
color: var(--crm-muted);
font-weight: 700;
}
/* Inputs (much nicer than pure black) */
body.crm-page input[type="text"],
body.crm-page input[type="email"],
body.crm-page input[type="tel"],
body.crm-page input[type="number"],
body.crm-page input[type="password"],
body.crm-page select,
body.crm-page textarea {
background: var(--crm-surface);
color: var(--crm-text);
border: 1px solid var(--crm-border);
border-radius: 12px;
padding: .75rem .9rem;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02);
outline: none;
}
body.crm-page input::placeholder,
body.crm-page textarea::placeholder {
color: #9aa7bf;
}
/* Focus state */
body.crm-page input:focus,
body.crm-page select:focus,
body.crm-page textarea:focus {
border-color: var(--crm-primary-600);
box-shadow: 0 0 0 3px rgba(37, 99, 235, .28);
}
/* Multi-select box (Create Deal) */
body.crm-page select[multiple] {
min-height: 10rem;
padding: .65rem;
border-radius: 12px;
}
/* Primary / Secondary buttons (unify everywhere in CRM) */
body.crm-page .btn-primary,
body.crm-page a.btn-primary,
body.crm-page button[type="submit"] {
background: linear-gradient(180deg, var(--crm-primary), var(--crm-primary-700));
color: #fff !important;
border: 1px solid rgba(59, 130, 246, .45);
border-radius: 12px;
padding: .8rem 1.1rem;
font-weight: 700;
box-shadow: 0 10px 28px rgba(37, 99, 235, .35);
}
body.crm-page .btn-primary:hover,
body.crm-page a.btn-primary:hover,
body.crm-page button[type="submit"]:hover {
filter: brightness(1.05);
box-shadow: 0 14px 34px rgba(37, 99, 235, .45);
}
body.crm-page .btn-secondary,
body.crm-page a.btn-secondary {
background: transparent;
color: var(--crm-text) !important;
border: 1px solid var(--crm-border);
border-radius: 12px;
padding: .8rem 1.1rem;
}
body.crm-page .btn-secondary:hover {
background: rgba(255, 255, 255, .04);
}
/* Make the dashboard “quick” buttons consistent */
body.crm-page .crm-quick .btn,
body.crm-page .crm-actions .btn {
min-width: 240px;
text-align: center;
}
/* Optional: lighten input chips inside white field groups */
body.crm-page .field-group {
background: #ffffff;
border-radius: 12px;
}
body.crm-page .field-group .field {
background: transparent;
}
/* ===== CRM Dashboard layout (scoped) ===== */
body.crm-page .crm-dash-wrap {
padding-block: clamp(20px, 4vw, 40px);
padding-inline: max(16px, 5vw, env(safe-area-inset-left), env(safe-area-inset-right));
}
body.crm-page .crm-card {
max-width: 1100px;
margin: 0 auto;
}
/* Titles to match CRM theme */
body.crm-page .form-title {
color: var(--crm-text);
margin: 0 0 8px;
}
body.crm-page .muted {
color: var(--crm-muted);
margin: 0 0 10px;
}
/* Action row */
body.crm-page .crm-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 12px 0 8px;
}
body.crm-page .crm-actions .btn-primary,
body.crm-page .crm-actions .btn-secondary {
min-width: 240px;
text-align: center;
}
/* If you keep `btn-ghost`, alias it to secondary */
body.crm-page .btn-ghost {
background: transparent;
color: var(--crm-text) !important;
border: 1px solid var(--crm-border);
border-radius: 12px;
padding: .8rem 1.1rem;
}
body.crm-page .btn-ghost:hover {
background: rgba(255, 255, 255, .04);
}
/* Optional: simple dropdown styling to match */
body.crm-page .dropdown {
position: relative;
margin-top: 8px;
}
body.crm-page .dropbtn {
background: transparent;
color: var(--crm-text);
border: 1px solid var(--crm-border);
border-radius: 12px;
padding: .7rem 1rem;
}
body.crm-page .dropdown-content {
position: absolute;
display: none;
z-index: 10;
min-width: 240px;
margin-top: 8px;
background: var(--crm-card);
border: 1px solid var(--crm-border);
border-radius: 12px;
background-color: white;
}
body.crm-page .dropdown:hover .dropdown-content {
display: block;
}
body.crm-page .dropdown-content a {
display: block;
padding: .7rem .9rem;
text-decoration: none;
}
body.crm-page .dropdown-content a:hover {
background: rgba(255, 255, 255, .06);
}
/* === CRM Dashboard refinements (scoped) === */
/* Make the third button use the same blue fill when it's in the actions row */
body.crm-page .crm-actions .btn-secondary {
background: linear-gradient(180deg, var(--crm-primary), var(--crm-primary-700));
color: #fff !important;
border: 1px solid rgba(59, 130, 246, .45);
border-radius: 12px;
padding: .8rem 1.1rem;
box-shadow: 0 10px 28px rgba(37, 99, 235, .35);
}
body.crm-page .crm-actions .btn-secondary:hover {
filter: brightness(1.05);
box-shadow: 0 14px 34px rgba(37, 99, 235, .45);
}
/* Tighten the dashboard card so it doesn’t look “full-height” */
body.crm-dash-page .crm-card {
max-width: 1100px;
/* already centering on large screens */
margin: 0 auto;
padding-block: clamp(16px, 2.2vw, 22px);
/* less vertical padding */
min-height: auto !important;
/* cancel any inherited min-height */
height: auto !important;
}
/* Slightly reduce the outer section’s vertical padding too */
body.crm-dash-page .crm-dash-wrap {
padding-block: clamp(12px, 2.5vw, 24px);
}
/* === CRM Dashboard fixes (scoped) === */
/* 1) Make the card size to its content (no stretching) */
body.crm-dash-page .crm-dash-wrap {
display: grid;
/* avoid any accidental flex stretching */
align-content: start;
padding-block: clamp(12px, 2.5vw, 24px);
/* slightly tighter outer padding */
min-height: 0 !important;
}
body.crm-dash-page .crm-card {
justify-self: center;
align-self: start;
/* do not fill container height */
height: auto !important;
min-height: 0 !important;
/* cancel any inherited min-height */
padding-block: clamp(14px, 2vw, 20px);
/* reduce vertical padding in the card */
}
/* 2) Make “Download CRM Contacts” match the blue buttons */
body.crm-dash-page .crm-actions .btn-secondary {
background: linear-gradient(180deg, var(--crm-primary), var(--crm-primary-700)) !important;
color: #fff !important;
border: 1px solid rgba(59, 130, 246, .45) !important;
box-shadow: 0 10px 28px rgba(37, 99, 235, .35);
border-radius: 12px;
padding: .8rem 1.1rem;
}
body.crm-dash-page .crm-actions .btn-secondary:hover {
filter: brightness(1.05);
box-shadow: 0 14px 34px rgba(37, 99, 235, .45);
}
/* ==== Common for all CRM forms: ==== End ==== */
/* ************************************************************/
/* ==== sentimentanalysis.html: ==== Start ==== */
/* ============================================
Sentiment Analysis — consolidated styles
Scope everything to: body.page-sentimentanalysis
============================================ */
/* ================================
Sentiment Analysis – consolidated
Scope: body.page-sentimentanalysis
================================ */
.page-sentimentanalysis {
overflow-x: hidden;
}
/* Layout container */
.page-sentimentanalysis .container {
width: 100%;
max-width: 980px;
margin: 20px auto;
padding: 0 16px;
box-sizing: border-box;
font-size: small;
}
/* Heading above platforms */
.page-sentimentanalysis .input-source-heading,
.page-sentimentanalysis #platform-section>.section-label {
margin: 12px 0 8px;
}
@media (min-width:992px) {
.page-sentimentanalysis .input-source-heading,
.page-sentimentanalysis #platform-section>.section-label {
text-align: left;
}
}
/* ---- Platform radios: supports BOTH markups ---- */
/* A) Preferred markup: