/* base/bundle.css */
body {
font-family: var(--font-primary);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'cv11' 1, 'ss01' 1;
text-rendering: optimizeLegibility;
font-variant-numeric: tabular-nums;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: var(--font-bold);
line-height: var(--leading-tight);
color: var(--text-primary);
margin-bottom: var(--space-4);
}
h1 {
font-size: var(--text-4xl);
letter-spacing: var(--tracking-tighter);
}
h2 {
font-size: var(--text-3xl);
letter-spacing: var(--tracking-tighter);
}
h3 {
font-size: var(--text-2xl);
letter-spacing: var(--tracking-tight);
}
h4 {
font-size: var(--text-xl);
letter-spacing: var(--tracking-tight);
}
h5 {
font-size: var(--text-lg);
letter-spacing: var(--tracking-tight);
}
h6 {
font-size: var(--text-base);
}
p {
margin-bottom: var(--space-4);
line-height: var(--leading-relaxed);
}
a {
color: var(--flowayz-teal);
text-decoration: none;
transition: color 0.25s ease;
}
a:hover {
color: var(--accent, var(--flowayz-coral));
}
.prose a, a.link-underline {
position: relative;
}
.prose a::after, a.link-underline::after {
content: '';
position: absolute;
bottom: -1px;
inset-inline-start: 0;
width: 0;
height: 1px;
background: currentColor;
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.prose a:hover::after, a.link-underline:hover::after {
width: 100%;
}
strong, b {
font-weight: var(--font-bold);
color: var(--text-primary);
}
em, i {
font-style: italic;
}
small {
font-size: var(--text-sm);
color: var(--text-secondary);
}
blockquote {
border-inline-start: 4px solid var(--flowayz-teal);
padding-inline-start: var(--space-4);
margin: var(--space-5) 0;
font-style: italic;
color: var(--text-secondary);
}
code {
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
font-size: var(--text-sm);
background: var(--bg-tertiary);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
color: var(--flowayz-teal);
}
pre {
background: var(--bg-tertiary);
padding: var(--space-4);
border-radius: var(--radius-md);
overflow-x: auto;
margin: var(--space-5) 0;
}
pre code {
background: transparent;
padding: 0;
color: inherit;
}
ul, ol {
margin-bottom: var(--space-4);
padding-inline-start: var(--space-5);
}
li {
margin-bottom: var(--space-2);
line-height: var(--leading-relaxed);
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
hr {
border: none;
border-top: 1px solid var(--border-default);
margin: var(--space-6) 0;
}
.container-flowayz {
max-width: 1280px;
margin: 0 auto;
padding-inline-start: var(--space-4);
padding-inline-end: var(--space-4);
}
@media (min-width: 768px) {
.container-flowayz {
padding-inline-start: var(--space-6);
padding-inline-end: var(--space-6);
}
}
@media (max-width: 640px) {
h1 {
font-size: var(--text-3xl);
}
h2 {
font-size: var(--text-2xl);
}
h3 {
font-size: var(--text-xl);
}
.container-flowayz {
padding-inline-start: var(--space-3);
padding-inline-end: var(--space-3);
}
}
@keyframes wave-flow {
0%, 100% {
transform: translateY(0) scaleY(1);
opacity: 0.6;
}
50% {
transform: translateY(-20px) scaleY(1.2);
opacity: 1;
}
}
@keyframes wave-horizontal {
0% {
transform: translateX(calc(var(--dir, 1) * -100%));
}
100% {
transform: translateX(calc(var(--dir, 1) * 100%));
}
}
.animate-wave {
animation: wave-flow 2s ease-in-out infinite;
}
.animate-wave:nth-child(2) {
animation-delay: 0.2s;
}
.animate-wave:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes pulse-glow {
0%, 100% {
box-shadow: 0 0 0 0 rgba(255, 123, 84, 0.4);
transform: scale(1);
}
50% {
box-shadow: 0 0 20px 10px rgba(255, 123, 84, 0);
transform: scale(1.05);
}
}
@keyframes gradient-x {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.animate-gradient-x {
animation: gradient-x 3s ease infinite;
background-size: 200% 100%;
}
@keyframes blob {
0%, 100% {
transform: translate(0, 0) scale(1);
}
33% {
transform: translate(30px, -50px) scale(1.1);
}
66% {
transform: translate(-20px, 20px) scale(0.9);
}
}
.animate-blob {
animation: blob 7s infinite;
}
.animation-delay-2000 {
animation-delay: 2s;
}
.animation-delay-4000 {
animation-delay: 4s;
}
@keyframes pulse-slow {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.9;
transform: scale(1.05);
}
}
.animate-pulse-slow {
animation: pulse-slow 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
transform: scale(0);
animation: ripple-animation 0.6s ease-out;
pointer-events: none;
}
@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}
@keyframes float {
0%, 100% {
transform: translateY(0) translateX(0);
}
33% {
transform: translateY(-20px) translateX(calc(var(--dir, 1) * 10px));
}
66% {
transform: translateY(10px) translateX(calc(var(--dir, 1) * -10px));
}
}
.animate-float {
animation: float 6s ease-in-out infinite;
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-up {
opacity: 0;
animation: fade-in-up 0.6s ease-out forwards;
}
.animate-fade-in {
opacity: 0;
animation: fade-in 0.6s ease-out forwards;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes pulse-scale {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.animate-pulse-scale {
animation: pulse-scale 2s ease-in-out infinite;
}
@keyframes progress {
from {
width: 0%;
}
to {
width: 100%;
}
}
.animate-progress {
animation: progress 2s ease-out infinite;
}
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease-out;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
@keyframes pulse-border {
0%, 100% {
border-color: var(--flowayz-coral);
border-width: 2px;
}
50% {
border-color: var(--flowayz-teal);
border-width: 3px;
}
}
.pulse-icon {
animation: pulse-glow 2s ease-in-out infinite;
}
.pulse-border {
animation: pulse-border 1.5s ease-in-out infinite;
}
@keyframes ripple {
0% {
transform: scale(0);
opacity: 0.6;
}
100% {
transform: scale(4);
opacity: 0;
}
}
.ripple-effect {
position: relative;
overflow: hidden;
}
.ripple-effect::after {
content: "";
position: absolute;
top: 50%;
inset-inline-start: 50%;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
pointer-events: none;
}
.ripple-effect:active::after {
animation: ripple 0.6s ease-out;
}
@keyframes scale-up-card {
from {
transform: scale(1);
box-shadow: var(--shadow-md);
}
to {
transform: scale(1.05);
box-shadow: var(--shadow-lg);
}
}
.hover-scale:hover {
animation: scale-up-card 0.3s ease-out forwards;
}
@keyframes slide-in-modal {
from {
transform: translateY(-50%) scale(0.9);
opacity: 0;
}
to {
transform: translateY(0) scale(1);
opacity: 1;
}
}
.modal-animate {
animation: slide-in-modal 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fade-in-up 0.5s ease-out;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-loading {
animation: rotate 1s linear infinite;
}
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
.shimmer {
background: linear-gradient(
90deg,
var(--flowayz-gray-100) 0%,
var(--flowayz-gray-200) 50%,
var(--flowayz-gray-100) 100%
);
background-size: 1000px 100%;
animation: shimmer 2s infinite;
}
@keyframes skeleton-pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@keyframes skeleton-shimmer {
0% {
transform: translateX(calc(var(--dir, 1) * -100%));
}
100% {
transform: translateX(calc(var(--dir, 1) * 100%));
}
}
.skeleton-card,
.skeleton-list,
.skeleton-message,
.skeleton-table {
position: relative;
overflow: hidden;
}
.skeleton-line,
.skeleton-avatar,
.skeleton-image,
.skeleton-icon,
.skeleton-badge,
.skeleton-cell {
position: relative;
overflow: hidden;
}
.skeleton-line::after,
.skeleton-avatar::after,
.skeleton-image::after,
.skeleton-icon::after,
.skeleton-badge::after,
.skeleton-cell::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.15) 50%,
transparent 100%
);
animation: skeleton-shimmer 1.5s infinite;
}
[data-mode="dark"] .skeleton-line::after,
[data-mode="dark"] .skeleton-avatar::after,
[data-mode="dark"] .skeleton-image::after,
[data-mode="dark"] .skeleton-icon::after,
[data-mode="dark"] .skeleton-badge::after,
[data-mode="dark"] .skeleton-cell::after {
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.08) 50%,
transparent 100%
);
}
.skeleton-message .typing-dot {
animation: typing-dot-bounce 1.4s ease-in-out infinite;
}
@keyframes typing-dot-bounce {
0%, 60%, 100% {
transform: translateY(0);
}
30% {
transform: translateY(-4px);
}
}
@keyframes bounce-gentle {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.bounce-gentle {
animation: bounce-gentle 2s ease-in-out infinite;
}
@keyframes progress-wave {
0% {
background-position: 0% 0%;
}
100% {
background-position: 200% 0%;
}
}
.progress-wave {
background: linear-gradient(
90deg,
var(--flowayz-coral) 0%,
var(--flowayz-teal) 50%,
var(--flowayz-coral) 100%
);
background-size: 200% 100%;
animation: progress-wave 2s ease-in-out infinite;
}
@keyframes glow-text {
0%, 100% {
text-shadow: 0 0 10px rgba(255, 123, 84, 0.3);
}
50% {
text-shadow: 0 0 20px rgba(255, 123, 84, 0.6), 0 0 30px rgba(255, 123, 84, 0.4);
}
}
.glow-text {
animation: glow-text 2s ease-in-out infinite;
}
@keyframes border-dance {
0%, 100% {
border-color: var(--flowayz-teal);
transform: rotate(0deg);
}
50% {
border-color: var(--flowayz-coral);
transform: rotate(180deg);
}
}
.dropzone-active {
animation: border-dance 1s linear infinite;
}
.animate-once {
animation-iteration-count: 1 !important;
}
.animate-delay-1 {
animation-delay: 0.1s;
}
.animate-delay-2 {
animation-delay: 0.2s;
}
.animate-delay-3 {
animation-delay: 0.3s;
}
.animate-delay-4 {
animation-delay: 0.4s;
}
.animate-slow {
animation-duration: 2s;
}
.animate-fast {
animation-duration: 0.5s;
}
.hover-lift {
transition: all var(--transition-base);
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.smooth-fade {
transition: opacity var(--transition-slow);
}
.smooth-fade.hidden {
opacity: 0;
pointer-events: none;
}
@keyframes scale-bounce {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
@keyframes bounce-subtle {
0%, 100% {
transform: scale(1);
}
30% {
transform: scale(1.15);
}
60% {
transform: scale(0.95);
}
}
.animate-bounce-subtle {
animation: bounce-subtle 0.6s ease-in-out;
}
@keyframes ripple-click {
0% {
transform: scale(0);
opacity: 0.6;
}
100% {
transform: scale(4);
opacity: 0;
}
}
.ripple-click {
position: relative;
overflow: hidden;
}
.ripple-click::before {
content: '';
position: absolute;
top: 50%;
inset-inline-start: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.ripple-click:active::before {
width: 300px;
height: 300px;
animation: ripple-click 0.6s ease-out;
}
.smooth-scale {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.smooth-scale:hover {
transform: scale(1.02);
}
.smooth-scale:active {
transform: scale(0.98);
}
@keyframes scale-bounce {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
50% {
transform: scale(0.95);
}
70% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
.scale-bounce {
animation: scale-bounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes draw-line {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
.draw-svg-line {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: draw-line 2s ease-out forwards;
}
@keyframes typing-dot {
0%, 60%, 100% {
transform: translateY(0);
opacity: 0.5;
}
30% {
transform: translateY(-10px);
opacity: 1;
}
}
.typing-indicator span {
display: inline-block;
width: 8px;
height: 8px;
margin: 0 2px;
background: var(--flowayz-coral);
border-radius: 50%;
animation: typing-dot 1.4s infinite;
}
.typing-indicator span:nth-child(2) {
animation-delay: 0.2s;
}
.typing-indicator span:nth-child(3) {
animation-delay: 0.4s;
}
@keyframes toast-slide-in {
from {
transform: translateX(calc(var(--dir, 1) * 400px));
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes toast-slide-out {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(calc(var(--dir, 1) * 400px));
opacity: 0;
}
}
.toast {
transform: translateX(calc(var(--dir, 1) * 400px));
opacity: 0;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.toast-show {
animation: toast-slide-in 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}
.toast-hide {
animation: toast-slide-out 0.3s ease-in forwards;
}
@keyframes streaming-cursor {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.streaming-cursor {
animation: streaming-cursor 1s infinite;
display: inline-block;
width: 2px;
height: 1em;
background: currentColor;
vertical-align: text-bottom;
margin-inline-start: 1px;
}
@keyframes message-appear {
from {
opacity: 0;
transform: translateY(10px) scale(0.95);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.message-appear {
animation: message-appear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes optimistic-message {
0% {
opacity: 0.7;
transform: translateY(5px);
}
50% {
opacity: 0.8;
transform: translateY(0);
}
100% {
opacity: 0.7;
}
}
.optimistic-message {
animation: optimistic-message 0.2s ease-out;
}
@keyframes connection-pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
}
50% {
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
}
}
.connection-status-online {
animation: connection-pulse 2s infinite;
}
@keyframes fade-out-quick {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.9);
}
}
.fade-out-quick {
animation: fade-out-quick 0.2s ease-out forwards;
}
.ai-thinking-avatar {
position: relative;
width: 40px;
height: 40px;
flex-shrink: 0;
}
.ai-thinking-avatar .avatar-ring {
position: absolute;
inset: -4px;
border-radius: 50%;
background: conic-gradient(
from 0deg,
var(--accent, #8B5CF6),
#EC4899,
#F59E0B,
var(--accent, #8B5CF6)
);
animation: avatar-ring-spin 2s linear infinite;
opacity: 0.8;
}
.ai-thinking-avatar .avatar-ring::before {
content: '';
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--bg-surface);
}
.ai-thinking-avatar .avatar-core {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(135deg, #8B5CF6 0%, #6366F1 100%);
color: white;
z-index: 1;
animation: avatar-pulse 1.5s ease-in-out infinite;
}
@keyframes avatar-ring-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes avatar-pulse {
0%, 100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 20px 5px rgba(139, 92, 246, 0.2);
}
}
.ai-thinking-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.ai-thinking-text {
font-size: 1rem;
font-weight: 500;
}
.thinking-dots span {
animation: thinking-dot-bounce 1.4s ease-in-out infinite;
display: inline-block;
}
.thinking-dots span:nth-child(1) { animation-delay: 0s; }
.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes thinking-dot-bounce {
0%, 60%, 100% {
transform: translateY(0);
}
30% {
transform: translateY(-4px);
}
}
.ai-wave-container {
display: flex;
align-items: center;
justify-content: flex-start;
height: 32px;
padding: 8px 0;
}
.ai-wave {
display: flex;
align-items: center;
gap: 3px;
height: 100%;
}
.ai-wave span {
display: block;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--accent, #8B5CF6), #EC4899);
border-radius: 4px;
animation: ai-wave-bar 1.2s ease-in-out infinite;
}
.ai-wave span:nth-child(1) { animation-delay: 0s; height: 60%; }
.ai-wave span:nth-child(2) { animation-delay: 0.1s; height: 100%; }
.ai-wave span:nth-child(3) { animation-delay: 0.2s; height: 80%; }
.ai-wave span:nth-child(4) { animation-delay: 0.3s; height: 100%; }
.ai-wave span:nth-child(5) { animation-delay: 0.4s; height: 60%; }
@keyframes ai-wave-bar {
0%, 100% {
transform: scaleY(0.5);
opacity: 0.5;
}
50% {
transform: scaleY(1);
opacity: 1;
}
}
.ai-status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 2px 8px;
border-radius: 9999px;
background: var(--accent-10, rgba(139, 92, 246, 0.1));
color: var(--accent, #8B5CF6);
font-size: 0.75rem;
font-weight: 500;
}
.ai-status-badge .status-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent, #8B5CF6);
animation: status-dot-pulse 1.5s ease-in-out infinite;
}
@keyframes status-dot-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.3);
opacity: 0.7;
}
}
.sending-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
}
.sending-dots {
display: inline-flex;
gap: 2px;
}
.sending-dots span {
width: 4px;
height: 4px;
border-radius: 50%;
background: currentColor;
opacity: 0.6;
animation: sending-dot 1.2s ease-in-out infinite;
}
.sending-dots span:nth-child(1) { animation-delay: 0s; }
.sending-dots span:nth-child(2) { animation-delay: 0.2s; }
.sending-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes sending-dot {
0%, 100% {
transform: scale(1);
opacity: 0.4;
}
50% {
transform: scale(1.2);
opacity: 1;
}
}
.ai-response-placeholder {
animation: placeholder-fade-in 0.3s ease-out;
}
@keyframes placeholder-fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.ai-placeholder-avatar {
position: relative;
}
.ai-placeholder-pulse {
position: absolute;
inset: 0;
border-radius: 50%;
background: inherit;
animation: placeholder-pulse 1.5s ease-in-out infinite;
}
@keyframes placeholder-pulse {
0%, 100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.15);
opacity: 0.7;
}
}
.ai-thinking-text {
background: linear-gradient(90deg,
var(--text-secondary) 0%,
var(--text-primary) 50%,
var(--text-secondary) 100%
);
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: thinking-shimmer 2s ease-in-out infinite;
}
@keyframes thinking-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.ai-thinking-dots {
display: inline-flex;
align-items: center;
gap: 3px;
}
.ai-thinking-dots .dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: linear-gradient(135deg, #8B5CF6, #EC4899);
animation: thinking-dot-jump 1.4s ease-in-out infinite;
}
.ai-thinking-dots .dot:nth-child(1) { animation-delay: 0s; }
.ai-thinking-dots .dot:nth-child(2) { animation-delay: 0.15s; }
.ai-thinking-dots .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinking-dot-jump {
0%, 60%, 100% {
transform: translateY(0) scale(1);
opacity: 0.5;
}
30% {
transform: translateY(-6px) scale(1.2);
opacity: 1;
}
}
@keyframes ping-slow {
0% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.1);
opacity: 0.2;
}
100% {
transform: scale(1);
opacity: 0.5;
}
}
.animate-ping-slow {
animation: ping-slow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin-slow {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin-slow {
animation: spin-slow 3s linear infinite;
}
@keyframes spin-reverse {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
.animate-spin-reverse {
animation: spin-reverse 2s linear infinite;
}
.animate-pulse-glow {
animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes gradient-shift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
.animate-gradient-shift {
background-size: 200% 200%;
animation: gradient-shift 4s ease infinite;
}
@keyframes fade-cycle {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.6;
}
}
.animate-fade-cycle {
animation: fade-cycle 2s ease-in-out infinite;
}
@keyframes particle-float {
0%, 100% {
transform: translateY(0) translateX(0) scale(1);
opacity: 0;
}
10% {
opacity: 0.8;
}
90% {
opacity: 0.8;
}
50% {
transform: translateY(-100px) translateX(calc(var(--dir, 1) * 20px)) scale(0.5);
}
}
.particle {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent, #FF7B54), #8B5CF6);
animation: particle-float 4s ease-in-out infinite;
opacity: 0;
}
.particle-1 {
inset-inline-start: 10%;
bottom: 20%;
animation-delay: 0s;
}
.particle-2 {
inset-inline-start: 30%;
bottom: 30%;
animation-delay: 0.8s;
width: 6px;
height: 6px;
}
.particle-3 {
inset-inline-end: 20%;
bottom: 25%;
animation-delay: 1.6s;
width: 10px;
height: 10px;
}
.particle-4 {
inset-inline-end: 35%;
bottom: 15%;
animation-delay: 2.4s;
width: 5px;
height: 5px;
}
.particle-5 {
inset-inline-start: 50%;
bottom: 35%;
animation-delay: 3.2s;
width: 7px;
height: 7px;
}
@keyframes highlight-section {
0%, 100% {
background-color: transparent;
}
50% {
background-color: var(--accent-10, rgba(255, 123, 84, 0.1));
}
}
.highlight-section {
animation: highlight-section 2s ease-in-out;
transition: background-color 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.shimmer,
.animate-wave,
.typing-indicator span,
.ai-wave span,
.sending-dots span,
.ai-thinking-dots .dot {
animation: none !important;
opacity: 1 !important;
}
.animate-float,
.animate-blob,
.hover-lift:hover {
transform: none !important;
animation: none !important;
}
.smooth-scale:hover,
.hover-scale:hover {
transform: none !important;
animation: none !important;
}
}
:root {
--dop-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dop-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
--dop-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
--dop-snappy: cubic-bezier(0.19, 1, 0.22, 1);
--dop-stagger-base: 60ms;
}
[data-animations="subtle"] .dop-stagger,
[data-animations="ultra"] .dop-stagger {
opacity: 0;
transform: translateY(12px);
animation: dop-fade-up 0.5s var(--dop-smooth) forwards;
}
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(1),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(1) { animation-delay: calc(var(--dop-stagger-base) * 0); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(2),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(2) { animation-delay: calc(var(--dop-stagger-base) * 1); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(3),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(3) { animation-delay: calc(var(--dop-stagger-base) * 2); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(4),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(4) { animation-delay: calc(var(--dop-stagger-base) * 3); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(5),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(5) { animation-delay: calc(var(--dop-stagger-base) * 4); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(6),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(6) { animation-delay: calc(var(--dop-stagger-base) * 5); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(7),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(7) { animation-delay: calc(var(--dop-stagger-base) * 6); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(8),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(8) { animation-delay: calc(var(--dop-stagger-base) * 7); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(9),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(9) { animation-delay: calc(var(--dop-stagger-base) * 8); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(10),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(10) { animation-delay: calc(var(--dop-stagger-base) * 9); }
[data-animations="subtle"] .dop-stagger-parent > .dop-stagger:nth-child(n+11),
[data-animations="ultra"] .dop-stagger-parent > .dop-stagger:nth-child(n+11) { animation-delay: calc(var(--dop-stagger-base) * 10); }
@keyframes dop-fade-up {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
[data-animations="subtle"] .card {
transition: transform 0.25s var(--dop-smooth), box-shadow 0.25s var(--dop-smooth), border-color 0.25s ease;
}
[data-animations="subtle"] .card:hover {
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}
[data-animations="subtle"] .card:has(form):hover,
[data-animations="subtle"] .card:has(.form-input):hover,
[data-animations="subtle"] .card:has(.form-textarea):hover,
[data-animations="subtle"] form .card:hover {
transform: none;
box-shadow: none;
}
[data-animations="ultra"] .card {
transition: transform 0.3s var(--dop-spring), box-shadow 0.3s var(--dop-spring), border-color 0.3s ease;
}
[data-animations="ultra"] .card:hover {
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.1),
0 0 20px color-mix(in srgb, var(--accent) 20%, transparent);
}
[data-animations="ultra"] .card:has(form):hover,
[data-animations="ultra"] .card:has(.form-input):hover,
[data-animations="ultra"] .card:has(.form-textarea):hover,
[data-animations="ultra"] form .card:hover {
transform: none;
box-shadow:
0 0 0 1px var(--accent-20, rgba(56, 178, 172, 0.2)),
0 0 20px var(--accent-10, rgba(56, 178, 172, 0.1)),
0 0 40px var(--accent-5, rgba(56, 178, 172, 0.05));
border-color: var(--accent-20, rgba(56, 178, 172, 0.2));
}
[data-animations="ultra"] .dop-tilt {
transition: transform 0.15s ease-out;
transform-style: preserve-3d;
}
[data-animations="subtle"] .btn {
transition: transform 0.3s var(--dop-spring), box-shadow 0.3s var(--dop-spring), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
[data-animations="subtle"] .btn:hover {
transform: translateY(-1px);
}
[data-animations="subtle"] .btn:active {
transform: scale(0.97);
transition-duration: 0.1s;
}
[data-animations="ultra"] .btn {
transition: transform 0.4s var(--dop-bounce), box-shadow 0.4s var(--dop-bounce), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
position: relative;
overflow: hidden;
}
[data-animations="ultra"] .btn:hover {
transform: translateY(-2px);
box-shadow:
0 4px 15px rgba(0, 0, 0, 0.1),
0 0 15px color-mix(in srgb, var(--accent) 15%, transparent);
}
[data-animations="ultra"] .btn:active {
transform: scale(0.94);
transition-duration: 0.15s;
}
[data-animations="ultra"] .btn::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.3) 0%, transparent 60%);
opacity: 0;
transform: scale(0);
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
pointer-events: none;
}
[data-animations="ultra"] .btn:active::after {
opacity: 1;
transform: scale(2.5);
transition-duration: 0.1s, 0s;
}
[data-animations="subtle"] .dop-success,
[data-animations="ultra"] .dop-success {
animation: dop-success-pulse 0.6s var(--dop-spring);
}
@keyframes dop-success-pulse {
0% { transform: scale(1); }
40% { transform: scale(1.1); }
100% { transform: scale(1); }
}
[data-animations="subtle"] .form-input:focus,
[data-animations="subtle"] input:focus,
[data-animations="subtle"] textarea:focus,
[data-animations="subtle"] select:focus {
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
[data-animations="ultra"] .form-input:focus,
[data-animations="ultra"] input:focus,
[data-animations="ultra"] textarea:focus,
[data-animations="ultra"] select:focus {
animation: dop-focus-glow 2s ease-in-out infinite;
}
@keyframes dop-focus-glow {
0%, 100% {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
50% {
box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 30%, transparent),
0 0 15px color-mix(in srgb, var(--accent) 10%, transparent);
}
}
[data-animations="subtle"] .sidebar .sidebar-link {
transition: background-color 0.2s ease, border-color 0.2s ease;
}
[data-animations="subtle"] .sidebar .sidebar-link:hover {
background-color: color-mix(in srgb, var(--accent) 5%, transparent);
}
[data-animations="ultra"] .sidebar .sidebar-link {
position: relative;
overflow: hidden;
transition: color 0.2s ease;
}
[data-animations="ultra"] .sidebar .sidebar-link::before {
content: '';
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--accent) 8%, transparent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s var(--dop-snappy);
pointer-events: none;
z-index: 0;
}
[data-animations="ultra"] .sidebar .sidebar-link:hover::before {
transform: scaleX(1);
}
[data-animations="ultra"] .sidebar .sidebar-link > * {
position: relative;
z-index: 1;
}
[data-animations="ultra"] .sidebar .badge,
[data-animations="ultra"] .sidebar [data-badge] {
animation: dop-badge-pulse 2s ease-in-out infinite;
}
@keyframes dop-badge-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
[data-animations="subtle"] .flash-message {
animation: dop-toast-in 0.5s var(--dop-spring) forwards;
}
[data-animations="ultra"] .flash-message {
animation: dop-toast-in 0.5s var(--dop-spring) forwards;
}
[data-animations="ultra"] .flash-message .flash-message-icon {
animation: dop-icon-bounce 0.6s var(--dop-bounce) 0.2s both;
}
@keyframes dop-toast-in {
from {
opacity: 0;
transform: translateX(calc(var(--dir, 1) * 100%)) scale(0.95);
}
to {
opacity: 1;
transform: translateX(0) scale(1);
}
}
@keyframes dop-icon-bounce {
0% { transform: scale(0.5) rotate(-10deg); }
60% { transform: scale(1.2) rotate(5deg); }
100% { transform: scale(1) rotate(0deg); }
}
[data-animations="ultra"] .flash-message:nth-child(2) { animation-delay: 50ms; }
[data-animations="ultra"] .flash-message:nth-child(3) { animation-delay: 100ms; }
[data-animations="subtle"] .dop-counter,
[data-animations="ultra"] .dop-counter {
display: inline-block;
}
[data-animations="subtle"] .dop-skeleton-reveal,
[data-animations="ultra"] .dop-skeleton-reveal {
animation: dop-reveal 0.4s var(--dop-smooth) forwards;
}
@keyframes dop-reveal {
from {
opacity: 0;
transform: scale(0.98);
}
to {
opacity: 1;
transform: scale(1);
}
}
.dop-celebration-container {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 9999;
overflow: hidden;
}
.dop-confetti {
position: absolute;
width: 8px;
height: 8px;
border-radius: 2px;
animation: dop-confetti-fall linear forwards;
}
@keyframes dop-confetti-fall {
0% {
transform: translateY(-10px) rotate(0deg) scale(1);
opacity: 1;
}
80% {
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(720deg) scale(0.5);
opacity: 0;
}
}
.dop-sparkle {
position: absolute;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
animation: dop-sparkle 0.8s var(--dop-spring) forwards;
}
@keyframes dop-sparkle {
0% {
transform: scale(0) rotate(0deg);
opacity: 1;
}
50% {
transform: scale(1.5) rotate(180deg);
opacity: 1;
}
100% {
transform: scale(0) rotate(360deg);
opacity: 0;
}
}
[data-animations="ultra"] .dop-success-ring {
animation: dop-success-ring 0.8s var(--dop-smooth) forwards;
}
@keyframes dop-success-ring {
0% {
transform: scale(0.5);
opacity: 1;
box-shadow: 0 0 0 0 var(--accent);
}
100% {
transform: scale(1);
opacity: 0;
box-shadow: 0 0 0 30px transparent;
}
}
.dop-page-exit {
animation: dop-fade-out 0.15s ease forwards;
}
.dop-page-enter {
animation: dop-fade-up 0.3s var(--dop-spring) forwards;
}
@keyframes dop-fade-out {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 0;
transform: translateY(-8px);
}
}
::view-transition-old(main-content) {
animation: dop-morph-out 0.2s var(--dop-smooth);
}
::view-transition-new(main-content) {
animation: dop-morph-in 0.3s var(--dop-spring);
}
::view-transition-old(sidebar) {
animation: none;
}
::view-transition-new(sidebar) {
animation: none;
}
::view-transition-old(header) {
animation: none;
}
::view-transition-new(header) {
animation: none;
}
@keyframes dop-morph-out {
from {
opacity: 1;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(0.98);
}
}
@keyframes dop-morph-in {
from {
opacity: 0;
transform: scale(1.02);
}
to {
opacity: 1;
transform: scale(1);
}
}
[data-animations="off"] .dop-stagger,
[data-animations="off"] .dop-counter,
[data-animations="off"] .dop-tilt,
[data-animations="off"] .dop-skeleton-reveal {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
[data-animations="off"] .card,
[data-animations="off"] .btn {
transition-duration: 0.01ms !important;
}
[data-animations="off"] .flash-message {
animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
.dop-stagger,
.dop-counter,
.dop-tilt,
.dop-skeleton-reveal,
.flash-message,
.dop-confetti,
.dop-sparkle {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* layouts/bundle.css */
.global-header {
position: fixed;
top: 0;
inset-inline-start: 0;
inset-inline-end: 0;
z-index: 50;
height: var(--header-height, 88px);
min-height: var(--header-height, 88px);
max-height: var(--header-height, 88px);
background: var(--bg-surface);
border-bottom: 1px solid var(--border-default);
transition: transform 0.3s ease-out;
overflow: visible;
}
.global-header.header-hidden {
transform: translateY(-100%);
}
.header-content {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
width: 100%;
height: 100%;
padding: 0 1rem;
}
.header-content > * {
flex-shrink: 0;
}
@media (min-width: 1024px) {
.header-content {
padding: 0 1.5rem;
}
}
.desktop-header-actions {
display: none !important;
}
@media (min-width: 768px) {
.desktop-header-actions {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 0.5rem !important;
}
}
.header-logo {
height: 28px;
width: auto;
transition: transform 0.2s ease;
}
.header-logo:hover {
transform: scale(1.03);
}
.header-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 0.5rem;
color: var(--text-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: all 0.15s ease;
}
.mobile-hamburger {
display: flex;
}
@media (min-width: 1024px) {
.mobile-hamburger {
display: none !important;
}
}
.header-icon-btn:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
}
.header-icon-btn:focus {
outline: none;
box-shadow: 0 0 0 2px var(--accent);
}
:root {
--sidebar-collapsed-width: 60px;
--sidebar-transition: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
--sidebar-label-transition: 0.18s ease;
}
.sidebar {
background: var(--sidebar-bg);
border-inline-end: 1px solid var(--sidebar-border);
position: relative;
width: var(--sidebar-width);
overflow: hidden;
}
@media (max-width: 1023px) {
.sidebar {
transform: translateX(calc(var(--dir, 1) * -100%));
transition: transform var(--sidebar-transition);
width: var(--sidebar-width);
}
.sidebar.open {
transform: translateX(0);
}
.sidebar-collapse-btn {
display: none !important;
}
.sidebar.collapsed {
width: var(--sidebar-width);
}
}
.sidebar-overlay {
position: fixed;
inset: 0;
top: 56px;
background: rgba(26, 60, 107, 0.8);
backdrop-filter: blur(4px);
z-index: 30;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.sidebar-overlay.open {
opacity: 1;
pointer-events: auto;
}
@media (min-width: 1024px) {
.sidebar {
transform: none !important;
transition: width var(--sidebar-transition);
}
.sidebar.collapsed {
width: var(--sidebar-collapsed-width);
}
.sidebar .sidebar-label,
.sidebar .sidebar-badge {
transition: opacity var(--sidebar-label-transition),
transform var(--sidebar-label-transition),
width var(--sidebar-label-transition);
white-space: nowrap;
overflow: hidden;
}
.sidebar.collapsed .sidebar-label {
opacity: 0;
transform: translateX(calc(var(--dir, 1) * -8px));
width: 0;
min-width: 0;
pointer-events: none;
}
.sidebar.collapsed .sidebar-badge {
opacity: 0;
width: 0;
min-width: 0;
padding: 0;
margin: 0;
overflow: hidden;
pointer-events: none;
}
.sidebar .sidebar-section-label,
.sidebar .sidebar-section-title {
transition: opacity 0.15s ease, height 0.15s ease, padding 0.15s ease, margin 0.15s ease;
overflow: hidden;
}
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .sidebar-section-title {
opacity: 0;
height: 0;
padding-top: 0;
padding-bottom: 0;
margin-top: 0;
margin-bottom: 0;
pointer-events: none;
}
.sidebar.collapsed .sidebar-section-toggle {
display: none;
}
.sidebar .sidebar-divider {
transition: margin 0.15s ease;
}
.sidebar.collapsed .sidebar-divider {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.sidebar.collapsed .sidebar-link {
justify-content: center;
padding: 0.5rem;
gap: 0;
}
.sidebar.collapsed nav {
padding-inline-start: 0.5rem;
padding-inline-end: 0.5rem;
}
.sidebar .sidebar-user-details {
transition: opacity var(--sidebar-label-transition),
width var(--sidebar-label-transition);
overflow: hidden;
}
.sidebar.collapsed .sidebar-user-details {
opacity: 0;
width: 0;
min-width: 0;
pointer-events: none;
}
.sidebar.collapsed .sidebar-user-trigger {
justify-content: center;
padding: 0.375rem;
gap: 0;
}
.sidebar.collapsed .sidebar-user-avatar {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
font-size: 0.75rem;
}
.sidebar.collapsed .sidebar-bottom-section {
padding: 0.5rem;
}
.sidebar.collapsed .sidebar-bottom-section .dropdown-menu {
inset-inline-start: 0.5rem;
inset-inline-end: auto;
min-width: 220px;
}
.sidebar.collapsed [data-controller="collapsible-menu"] > button {
display: none;
}
.sidebar.collapsed [data-controller="collapsible-menu"] [data-collapsible-menu-target="submenu"] {
display: block !important;
height: auto !important;
opacity: 1 !important;
overflow: visible !important;
}
.sidebar.collapsed .sidebar-org-switcher .sidebar-label {
opacity: 0;
width: 0;
}
.sidebar.collapsed .sidebar-org-switcher button {
justify-content: center;
padding: 0.375rem;
}
.sidebar.collapsed .sidebar-collapse-row {
justify-content: flex-start;
}
.sidebar-collapse-btn svg {
transition: transform var(--sidebar-transition);
}
.sidebar.collapsed .sidebar-collapse-btn svg {
transform: rotate(180deg);
}
.sidebar.collapsed .sidebar-settings-header-content {
opacity: 0;
width: 0;
overflow: hidden;
transition: opacity var(--sidebar-label-transition), width var(--sidebar-label-transition);
}
.sidebar.collapsed .coach-sidebar-header-text {
opacity: 0;
width: 0;
overflow: hidden;
transition: opacity var(--sidebar-label-transition), width var(--sidebar-label-transition);
}
.sidebar.collapsed .coach-sidebar-edit-btn {
display: none;
}
.sidebar.collapsed .coach-all-conversations-text,
.sidebar.collapsed .coach-all-conversations-badge {
opacity: 0;
width: 0;
overflow: hidden;
}
.sidebar.collapsed .coach-theme-grid {
grid-template-columns: 1fr;
gap: 0.25rem;
}
.sidebar.collapsed .coach-theme-grid span {
display: none;
}
.sidebar.collapsed .coach-theme-grid .coach-mini-icon {
padding: 0.25rem;
}
.sidebar.collapsed .coach-new-conv-text {
display: none;
}
.sidebar.collapsed .coach-new-conv-btn {
padding: 0.5rem;
}
.sidebar.collapsed .session-pill-title,
.sidebar.collapsed .session-pill-time,
.sidebar.collapsed .session-pill-pin,
.sidebar.collapsed .session-pill-actions {
display: none;
}
.sidebar.collapsed .session-pill-link {
justify-content: center;
padding: 0.375rem;
}
.sidebar.collapsed .session-pill-dot {
margin: 0;
}
.sidebar.collapsed .coach-empty-state p,
.sidebar.collapsed .coach-empty-state form {
display: none;
}
.sidebar.collapsed .sidebar-group-label {
opacity: 0;
height: 0;
padding: 0;
margin: 0;
overflow: hidden;
}
.sidebar.collapsed .coach-sidebar-section {
padding: 0.375rem;
}
.sidebar.collapsed .session-pill-title,
.sidebar.collapsed .session-pill-time,
.sidebar.collapsed .session-pill-pin,
.sidebar.collapsed .session-pill-actions {
display: none;
}
.sidebar.collapsed .session-pill-link {
justify-content: center;
padding: 0.375rem;
position: relative;
}
.sidebar.collapsed .session-pill-dot {
margin: 0;
}
.sidebar.collapsed .coach-session-title,
.sidebar.collapsed .coach-session-time,
.sidebar.collapsed .coach-session-star,
.sidebar.collapsed .coach-session-actions,
.sidebar.collapsed .session-provider-badge,
.sidebar.collapsed .session-content {
display: none;
}
.sidebar.collapsed .coach-session-item .session-item-link {
justify-content: center;
padding: 0.375rem;
}
.sidebar.collapsed .coach-session-dot {
margin: 0;
}
.sidebar.collapsed [data-controller="coach-sidebar-search"] {
display: none;
}
.sidebar.collapsed .session-pill-link[data-tooltip] {
position: relative;
}
.sidebar.collapsed .session-pill-link[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
inset-inline-start: calc(100% + 14px);
top: 50%;
transform: translateY(-50%) translateX(calc(var(--dir, 1) * -4px));
background: var(--bg-surface);
color: var(--text-primary);
border: 1px solid var(--border-default);
padding: 0.375rem 0.625rem;
border-radius: 0.5rem;
font-size: 0.75rem;
white-space: nowrap;
box-shadow: 0 4px 12px rgb(0 0 0 / 0.12);
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
z-index: 60;
}
.sidebar.collapsed .session-pill:hover .session-pill-link[data-tooltip]::after {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
}
.sidebar-link {
display: flex;
align-items: center;
width: 100%;
gap: 0.625rem;
padding: 0.5rem 0.6875rem;
border-radius: 0.625rem;
color: var(--nav-item-color);
font-size: 0.875rem;
font-weight: 500;
transition: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
text-decoration: none;
position: relative;
white-space: nowrap;
overflow: hidden;
}
@media (max-width: 640px) {
.sidebar-link {
font-size: 1rem;
min-height: 44px;
padding: 0.625rem 0.75rem;
}
}
.sidebar-link:hover {
background: var(--nav-item-hover-bg);
color: var(--nav-item-hover-color);
}
.sidebar-link.active {
background: var(--nav-item-active-bg);
color: var(--nav-item-active-color);
font-weight: 600;
}
.sidebar-link svg {
flex-shrink: 0;
transition: color 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-link:hover svg {
transform: scale(1.08);
}
.sidebar-link-group {
display: flex;
align-items: center;
gap: 0;
}
.sidebar-link-group .sidebar-link {
flex: 1;
min-width: 0;
}
.sidebar-view-all {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 0.375rem;
color: var(--nav-item-color);
opacity: 0;
transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
flex-shrink: 0;
}
.sidebar-link-group:hover .sidebar-view-all {
opacity: 0.6;
}
.sidebar-view-all:hover {
opacity: 1 !important;
background: var(--nav-item-hover-bg);
color: var(--nav-item-hover-color);
}
html[data-sidebar-collapsed] .sidebar .sidebar-view-all {
display: none;
}
.sidebar-sublink {
padding-inline-start: 2.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 0.875rem;
opacity: 0.9;
}
.sidebar-sublink svg {
width: 1rem;
height: 1rem;
}
.sidebar-section-label {
padding: 0.25rem 0.75rem;
}
.sidebar-section-toggle {
width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.375rem 0.75rem;
cursor: pointer;
background: transparent;
border: none;
border-radius: 0.375rem;
transition: all 0.15s ease;
text-align: start;
}
.sidebar-section-toggle::after {
content: '‹';
font-size: 0.65rem;
line-height: 1;
color: var(--text-tertiary);
opacity: 0;
transition: opacity 0.15s ease, transform 0.2s ease;
transform: rotate(-90deg);
}
.sidebar-section-toggle.collapsed::after {
transform: rotate(0deg);
}
.sidebar-section-toggle:hover::after {
opacity: 1;
}
.sidebar-section-toggle:hover {
background: rgba(255, 255, 255, 0.04);
}
.sidebar-section-toggle:hover .sidebar-section-label {
color: var(--text-secondary) !important;
}
.sidebar-divider {
margin: 0.375rem 0;
}
.sidebar nav {
padding-top: 0.5rem;
}
.sidebar-collapse-btn {
width: 28px;
height: 28px;
border-radius: 0.375rem;
border: 1px solid var(--border-default);
background: var(--bg-surface);
color: var(--text-secondary);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.15s ease;
flex-shrink: 0;
}
.sidebar-collapse-btn:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
border-color: var(--text-tertiary);
}
.sidebar-collapse-row {
padding-inline-start: 4px;
}
.sidebar.collapsed .sidebar-collapse-row,
html[data-sidebar-collapsed] .sidebar .sidebar-collapse-row {
padding-inline-start: 8px;
}
.sidebar-collapse-btn {
position: relative;
overflow: hidden;
isolation: isolate;
}
.sidebar-collapse-btn::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(circle at center, var(--accent) 0%, transparent 72%);
opacity: 0;
transform: scale(0.35);
pointer-events: none;
}
.sidebar-collapse-btn::after {
content: '';
position: absolute;
top: -60%;
bottom: -60%;
inset-inline-start: -40%;
width: 40%;
background: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
opacity: 0;
transform: translateX(calc(var(--dir, 1) * -160%)) skewX(-18deg);
pointer-events: none;
}
.sidebar-collapse-btn.is-toggling {
will-change: box-shadow;
animation: sidebar-collapse-halo 0.62s var(--dop-snappy, cubic-bezier(0.19, 1, 0.22, 1));
border-color: var(--accent);
color: var(--accent);
}
.sidebar-collapse-btn.is-toggling::before {
will-change: transform, opacity;
animation: sidebar-collapse-ripple 0.52s var(--dop-snappy, cubic-bezier(0.19, 1, 0.22, 1));
}
.sidebar-collapse-btn.is-toggling::after {
will-change: transform, opacity;
animation: sidebar-collapse-sheen 0.6s 0.06s var(--dop-smooth, cubic-bezier(0.25, 0.1, 0.25, 1));
}
@keyframes sidebar-collapse-ripple {
0%   { transform: scale(0.3);  opacity: 0.55; }
60%  {                         opacity: 0.22; }
100% { transform: scale(1.05); opacity: 0; }
}
@keyframes sidebar-collapse-sheen {
0%   { transform: translateX(calc(var(--dir, 1) * -160%)) skewX(-18deg); opacity: 0; }
22%  {                                             opacity: 0.75; }
100% { transform: translateX(calc(var(--dir, 1) * 320%))  skewX(-18deg); opacity: 0; }
}
@keyframes sidebar-collapse-halo {
0%   { box-shadow: 0 0 0 0 var(--accent-30); }
55%  { box-shadow: 0 0 0 7px var(--accent-10); }
100% { box-shadow: 0 0 0 12px transparent; }
}
.sidebar-collapse-btn svg {
transition: transform 0.46s var(--dop-spring, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.sidebar-collapse-btn:hover {
border-color: var(--accent);
color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-10), 0 4px 14px var(--accent-20);
}
.sidebar-collapse-btn:active {
transform: scale(0.86);
transition-duration: 70ms;
}
.sidebar-collapse-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
.sidebar-collapse-btn svg {
transition-duration: 0.01ms;
}
.sidebar-collapse-btn.is-toggling,
.sidebar-collapse-btn.is-toggling::before,
.sidebar-collapse-btn.is-toggling::after {
animation: none;
}
.sidebar-collapse-btn:active {
transform: none;
}
}
.sidebar-content-wrap {
position: relative;
display: flex;
flex-direction: column;
flex: 1 1 auto;
height: 100%;
min-height: 0;
overflow: hidden;
}
.sidebar-customize-entry {
width: 100%;
background: transparent;
border: 0;
font-family: inherit;
text-align: start;
cursor: pointer;
}
.sidebar-customize-entry:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
}
.sidebar-customize-entry.is-active {
background: var(--accent-10);
color: var(--accent);
}
.sidebar.collapsed .sidebar-customize-entry-wrap,
html[data-sidebar-collapsed] .sidebar .sidebar-customize-entry-wrap,
.sidebar.collapsed .sidebar-hide-collapsed,
html[data-sidebar-collapsed] .sidebar .sidebar-hide-collapsed,
.sidebar.collapsed .sidebar-edit-banner,
html[data-sidebar-collapsed] .sidebar .sidebar-edit-banner {
display: none !important;
}
.sidebar-edit-banner {
display: none;
}
.sidebar-editing .sidebar-edit-banner {
display: block;
margin-bottom: 0.5rem;
padding: 0.625rem 0.75rem;
border-radius: 0.5rem;
background: var(--accent-10);
border: 1px solid var(--accent);
}
.sidebar-edit-banner__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.sidebar-edit-banner__title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--accent);
}
.sidebar-edit-banner__done {
flex-shrink: 0;
min-height: 28px;
padding: 0.25rem 0.625rem;
border-radius: 0.375rem;
border: 1px solid var(--accent);
background: var(--accent);
color: var(--accent-contrast);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
transition: box-shadow 0.15s ease;
}
.sidebar-edit-banner__done:hover {
box-shadow: 0 0 0 3px var(--accent-10);
}
.sidebar-edit-banner__hint {
margin-top: 0.25rem;
font-size: 0.6875rem;
line-height: 1.35;
color: var(--text-secondary);
}
.sidebar-edit-banner__actions {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-top: 0.5rem;
}
.sidebar-edit-action {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
min-height: 32px;
padding: 0.3125rem 0.5rem;
border-radius: 0.375rem;
border: 1px solid transparent;
background: transparent;
color: var(--text-primary);
font-size: 0.75rem;
font-weight: 500;
text-align: start;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.sidebar-edit-action:hover {
background: var(--bg-surface);
border-color: var(--border-default);
}
.sidebar-edit-action svg {
width: 14px;
height: 14px;
flex-shrink: 0;
color: var(--text-secondary);
}
.sidebar-editing .sidebar-link {
cursor: grab;
}
.sidebar-editing .sidebar-link:active {
cursor: grabbing;
}
.sidebar-editing .sortable-ghost {
opacity: 0.3;
background: var(--accent-10);
border-radius: 0.375rem;
}
.sidebar-editing .sortable-drag {
opacity: 0.9;
background: var(--sidebar-bg);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-radius: 0.375rem;
}
.sidebar-edit-toggle-btn {
position: absolute;
inset-inline-end: 4px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
min-width: 24px;
min-height: 24px;
padding: 3px;
border: 0;
border-radius: 4px;
background: transparent;
color: var(--text-tertiary);
cursor: pointer;
z-index: 2;
transition: color 0.15s ease, background-color 0.15s ease;
}
.sidebar-edit-toggle-btn[data-visible="true"] {
color: var(--accent);
}
.sidebar-edit-toggle-btn:hover {
background: var(--accent-10);
}
.sidebar-catalog-panel {
position: absolute;
inset: 0;
z-index: 50;
background: var(--sidebar-bg);
overflow-y: auto;
transform: translateX(calc(var(--dir, 1) * -100%));
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-catalog-panel.open {
transform: translateX(0);
}
.sidebar-catalog-panel button:hover {
background: var(--bg-surface-hover);
}
@media (pointer: coarse) {
.sidebar-edit-action,
.sidebar-edit-banner__done,
.sidebar-customize-entry {
min-height: 44px;
}
.sidebar-edit-toggle-btn {
min-width: 44px;
min-height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
.sidebar-catalog-panel {
transition: none;
}
}
[data-animations="off"] .sidebar-catalog-panel {
transition: none;
}
.sidebar-preset-chip {
display: inline-flex;
align-items: center;
gap: 0.3rem;
max-width: 100%;
min-height: 36px;
padding: 0.3rem 0.6rem;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
border-radius: 9999px;
border: 1px solid var(--border-default);
background: var(--bg-surface);
color: var(--text-primary);
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.sidebar-preset-chip:hover {
background: var(--accent-10);
border-color: var(--accent);
}
.sidebar-preset-chip .truncate {
max-width: 9rem;
}
.sidebar-preset-chip--add {
border-style: dashed;
color: var(--text-secondary);
}
.workspace-undo-bar {
display: flex;
align-items: center;
gap: 0.75rem;
max-width: 24rem;
padding: 0.75rem 1rem;
border-radius: 0.5rem;
background: var(--bg-surface);
border: 1px solid var(--border-default);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.workspace-undo-bar__label {
flex: 1;
font-size: 0.8125rem;
color: var(--text-primary);
}
.workspace-undo-bar__action {
flex-shrink: 0;
min-height: 32px;
padding: 0.25rem 0.6rem;
border: 0;
border-radius: 0.375rem;
background: var(--accent);
color: var(--accent-contrast);
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
}
.workspace-undo-bar__action:hover {
background: var(--accent-hover);
}
.header-space-switcher-wrap {
position: relative;
display: flex;
align-items: center;
flex-shrink: 0;
}
.header-space-badge {
display: inline-flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.375rem;
padding: 0.25rem 0.625rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
color: var(--text-secondary);
cursor: pointer;
transition: all 0.15s ease;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
line-height: 1;
}
html:not(.dark) .header-space-badge {
background: var(--bg-surface-hover);
border-color: var(--border-default);
}
.header-space-badge:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.2);
color: var(--text-primary);
}
html:not(.dark) .header-space-badge:hover {
background: var(--border-default);
border-color: var(--border-default);
}
.header-space-dot {
display: block;
width: 0.5rem;
height: 0.5rem;
min-width: 0.5rem;
border-radius: 50%;
flex-shrink: 0;
}
.header-space-name {
max-width: 10rem;
overflow: hidden;
text-overflow: ellipsis;
}
.header-space-switcher-wrap .dropdown-menu > form {
display: block;
}
.header-space-switcher-wrap .dropdown-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
html[data-sidebar-collapsed] .sidebar {
width: var(--sidebar-collapsed-width, 60px);
}
html[data-sidebar-collapsed] .sidebar .sidebar-label,
html[data-sidebar-collapsed] .sidebar .sidebar-section-label,
html[data-sidebar-collapsed] .sidebar .sidebar-section-title,
html[data-sidebar-collapsed] .sidebar .sidebar-user-details {
opacity: 0;
width: 0;
min-width: 0;
overflow: hidden;
pointer-events: none;
}
html[data-sidebar-collapsed] .sidebar .sidebar-badge {
opacity: 0;
width: 0;
min-width: 0;
padding: 0;
margin: 0;
overflow: hidden;
pointer-events: none;
}
html[data-sidebar-collapsed] .sidebar .sidebar-link {
justify-content: center;
padding: 0.5rem;
gap: 0;
}
html[data-sidebar-collapsed] .sidebar nav {
padding-inline-start: 0.5rem;
padding-inline-end: 0.5rem;
}
html[data-sidebar-collapsed] .sidebar .sidebar-section-toggle {
display: none;
}
html[data-sidebar-collapsed] .sidebar .sidebar-collapse-row {
justify-content: flex-start;
}
html[data-sidebar-collapsed] .sidebar .sidebar-collapse-btn svg {
transform: rotate(180deg);
}
html[data-sidebar-collapsed] .sidebar .sidebar-divider {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
html[data-sidebar-collapsed] .sidebar .sidebar-view-all {
display: none;
}
html[data-sidebar-collapsed] .sidebar [data-controller="collapsible-menu"] > button {
display: none;
}
html[data-sidebar-collapsed] .sidebar [data-controller="collapsible-menu"] [data-collapsible-menu-target="submenu"] {
display: block !important;
height: auto !important;
opacity: 1 !important;
overflow: visible !important;
}
html[data-sidebar-collapsed] .sidebar .sidebar-bottom-section {
padding: 0.5rem;
}
html[data-sidebar-collapsed] .sidebar .sidebar-user-trigger {
justify-content: center;
padding: 0.375rem;
gap: 0;
}
html[data-sidebar-collapsed] .sidebar .sidebar-user-avatar {
width: 32px;
height: 32px;
min-width: 32px;
min-height: 32px;
font-size: 0.75rem;
}
.sidebar-bottom-section .dropdown-menu {
top: auto;
transform-origin: bottom center;
}
.sidebar-bottom-section .dropdown-menu:not(.open) {
transform: translateY(8px) scale(0.98);
}
.sidebar-bottom-section .dropdown-menu.open {
transform: translateY(0) scale(1);
}
.sidebar-user-avatar {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.875rem;
font-weight: 600;
line-height: 1;
transition: all var(--sidebar-label-transition);
}
.sidebar-back-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem;
border-radius: 0.5rem;
color: var(--text-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: all 0.15s ease;
}
.sidebar-back-btn:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
}
.sidebar-context-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
color: var(--text-secondary);
font-size: 0.9375rem;
font-weight: 500;
border-inline-start: 3px solid transparent;
margin-inline-start: 0.25rem;
transition: all 0.15s ease;
text-decoration: none;
}
.sidebar-context-link:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
}
.sidebar-context-link.active {
background: var(--accent-10, rgba(56, 178, 172, 0.1));
color: var(--accent);
border-inline-start-color: var(--accent);
font-weight: 600;
}
.sidebar-group-label {
padding: 0.5rem 0.75rem 0.25rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-tertiary);
}
.session-pill {
position: relative;
margin: 1px 0;
border-radius: 999px;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.session-pill:hover {
background: var(--bg-surface-hover);
}
.session-pill.active {
background: var(--accent-10, rgba(139, 92, 246, 0.1));
}
.session-pill.pinned {
background: rgba(245, 158, 11, 0.04);
}
.session-pill-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.625rem;
text-decoration: none;
min-width: 0;
}
.session-pill-dot {
width: 7px;
height: 7px;
min-width: 7px;
border-radius: 50%;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.session-pill:hover .session-pill-dot {
transform: scale(1.3);
}
.session-pill-title {
flex: 1;
min-width: 0;
font-size: 0.8125rem;
font-weight: 400;
color: var(--text-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.4;
transition: color 0.15s ease;
}
.session-pill:hover .session-pill-title {
color: var(--text-primary);
}
.session-pill.active .session-pill-title {
color: var(--accent);
font-weight: 500;
}
.session-pill-pin {
flex-shrink: 0;
color: #f59e0b;
line-height: 0;
opacity: 0.7;
}
.session-pill-time {
flex-shrink: 0;
font-size: 0.6875rem;
color: var(--text-tertiary);
opacity: 0;
transition: opacity 0.15s ease;
letter-spacing: -0.01em;
}
.session-pill:hover .session-pill-time {
opacity: 1;
}
.session-pill-actions {
position: absolute;
inset-inline-end: 0.25rem;
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 1px;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
background: var(--bg-surface-hover);
border-radius: 999px;
padding: 2px;
z-index: 2;
}
.session-pill:hover .session-pill-actions {
opacity: 1;
pointer-events: auto;
}
.session-pill-btn {
width: 22px;
height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--text-tertiary);
cursor: pointer;
transition: all 0.15s ease;
padding: 0;
}
.session-pill-btn:hover {
background: var(--bg-surface);
color: var(--text-primary);
}
.session-pill-btn.active {
color: #f59e0b;
}
.session-pill-btn.active svg {
fill: #f59e0b;
}
.session-pill-btn.active:hover {
color: #d97706;
background: rgba(245, 158, 11, 0.1);
}
.session-pill-btn.archive:hover {
color: #ef4444;
background: rgba(239, 68, 68, 0.1);
}
.confirm-popup {
position: fixed;
z-index: 10000;
animation: confirmPopupIn 0.15s ease-out;
}
.confirm-popup.closing {
animation: confirmPopupOut 0.15s ease-out forwards;
}
@keyframes confirmPopupIn {
from {
opacity: 0;
transform: scale(0.95) translateY(-5px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
@keyframes confirmPopupOut {
from {
opacity: 1;
transform: scale(1) translateY(0);
}
to {
opacity: 0;
transform: scale(0.95) translateY(-5px);
}
}
.confirm-popup-content {
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: 0.75rem;
padding: 1rem;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 4px 10px rgba(0, 0, 0, 0.1);
min-width: 200px;
max-width: 280px;
}
.confirm-popup-message {
font-size: 0.9375rem;
font-weight: 500;
color: var(--text-primary);
margin: 0 0 0.875rem 0;
text-align: center;
}
.confirm-popup-actions {
display: flex;
gap: 0.5rem;
justify-content: center;
}
.confirm-popup-btn {
padding: 0.5rem 1rem;
border-radius: 0.5rem;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
border: none;
}
.confirm-popup-btn-cancel {
background: var(--bg-surface-hover);
color: var(--text-secondary);
}
.confirm-popup-btn-cancel:hover {
background: var(--border-default);
color: var(--text-primary);
}
.confirm-popup-btn-confirm {
background: var(--color-red);
color: white;
}
.confirm-popup-btn-confirm:hover {
background: var(--color-red);
filter: brightness(0.9);
}
html.dark .sidebar .badge-accent,
[data-theme="dark"] .sidebar .badge-accent,
[data-mode="dark"] .sidebar .badge-accent {
background-color: var(--accent);
color: var(--accent-contrast);
font-weight: 700;
}
@media (prefers-reduced-motion: reduce) {
.sidebar,
.sidebar .sidebar-label,
.sidebar .sidebar-badge,
.sidebar .sidebar-section-label,
.sidebar .sidebar-section-title,
.sidebar .sidebar-divider,
.sidebar .sidebar-link,
.sidebar .sidebar-user-details,
.sidebar .sidebar-user-avatar,
.sidebar-collapse-btn svg,
.sidebar .sidebar-link::after {
transition-duration: 0.01ms !important;
}
}
[data-animations="off"] .sidebar,
[data-animations="off"] .sidebar .sidebar-label,
[data-animations="off"] .sidebar .sidebar-badge,
[data-animations="off"] .sidebar .sidebar-section-label,
[data-animations="off"] .sidebar .sidebar-section-title,
[data-animations="off"] .sidebar .sidebar-divider,
[data-animations="off"] .sidebar .sidebar-link,
[data-animations="off"] .sidebar .sidebar-user-details,
[data-animations="off"] .sidebar .sidebar-user-avatar,
[data-animations="off"] .sidebar-collapse-btn svg,
[data-animations="off"] .sidebar .sidebar-link::after {
transition-duration: 0.01ms !important;
}
.landing-footer {
margin-top: 0;
width: 100%;
}
.landing-footer__bg {
background:
linear-gradient(
135deg,
#0f172a 0%,
#1e293b 40%,
#1a2744 70%,
#0f172a 100%
);
}
html:not(.dark):not([data-mode="dark"]) .landing-footer__bg {
background:
linear-gradient(
135deg,
#0d1b2a 0%,
#1a3050 35%,
#1e3a5f 60%,
#0d1b2a 100%
);
}
.landing-footer__link {
color: rgba(255, 255, 255, 0.5);
font-size: 0.875rem;
line-height: 1.5;
transition: color 0.2s ease, transform 0.2s ease;
display: inline-block;
text-decoration: none;
}
.landing-footer__link:hover {
color: rgba(255, 255, 255, 0.9);
transform: translateX(calc(var(--dir, 1) * 3px));
}
.mobile-user-menu {
position: absolute;
inset-inline-end: 1rem;
top: calc(100% + 0.5rem);
min-width: 280px;
max-width: calc(100vw - 2rem);
background: var(--bg-surface);
border: 1px solid var(--border-default);
border-radius: 0.75rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
z-index: 60;
overflow: hidden;
}
html.dark .mobile-user-menu,
[data-mode="dark"] .mobile-user-menu {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.mobile-user-menu-header {
padding: 1rem;
border-bottom: 1px solid var(--border-default);
background: var(--bg-surface-hover);
}
.mobile-user-menu-header .user-name {
font-size: 1rem;
font-weight: 600;
color: var(--text-primary);
}
.mobile-user-menu-header .user-email {
font-size: 0.875rem;
color: var(--text-secondary);
margin-top: 0.125rem;
}
.mobile-user-menu-body {
padding: 0.5rem;
}
.mobile-user-menu-item {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.75rem 0.875rem;
border-radius: 0.5rem;
color: var(--text-secondary);
font-size: 0.9375rem;
font-weight: 500;
background: transparent;
border: none;
cursor: pointer;
transition: all 0.15s ease;
text-decoration: none;
text-align: start;
}
.mobile-user-menu-item:hover {
background: var(--bg-surface-hover);
color: var(--text-primary);
}
.mobile-user-menu-item svg {
width: 1.25rem;
height: 1.25rem;
flex-shrink: 0;
}
.mobile-user-menu-item.danger {
color: #DC2626;
}
.mobile-user-menu-item.danger:hover {
background: rgba(220, 38, 38, 0.1);
color: #DC2626;
}
.mobile-user-menu-divider {
height: 1px;
background: var(--border-default);
margin: 0.5rem 0;
}
.user-avatar-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--accent-gradient);
color: var(--accent-contrast);
font-size: 0.9375rem;
font-weight: 700;
font-family: var(--font-heading);
border: none;
cursor: pointer;
transition: box-shadow 0.15s ease;
}
.user-avatar-btn:hover {
box-shadow: 0 6px 18px -6px hsla(var(--accent-h), var(--accent-s), var(--accent-l), .65);
}
.user-avatar-btn:focus {
outline: none;
box-shadow: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--accent);
}
@supports (height: 100dvh) {
.app-shell {
height: calc(100dvh - 56px) !important;
}
}
@media (max-width: 639px) {
.dashboard-block-stats .card.card-flat,
.dashboard-block-stats .card.card-premium {
padding: 0.75rem;
}
}
html, body {
overflow-x: hidden;
max-width: 100vw;
}
.main-content {
max-width: 100%;
overflow-x: hidden;
}
@media (max-width: 1023px) {
.sidebar {
max-width: 85vw;
}
.card {
max-width: 100%;
word-break: break-word;
}
.filter-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.filter-tabs::-webkit-scrollbar {
display: none;
}
.content-padding {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
}
.page-title {
font-size: 1.625rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
@media (min-width: 1024px) {
.page-title {
font-size: 2rem;
}
}
.page-header {
padding: 1.25rem 1rem;
}
@media (min-width: 1024px) {
.page-header {
padding: 1.5rem 1.5rem;
}
}
@media (min-width: 1280px) {
.page-header {
padding: 1.5rem 2rem;
}
}
@media (max-width: 640px) {
.btn,
button[type="submit"],
button[type="button"],
a.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost,
.btn-accent {
min-height: 44px;
min-width: 44px;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.btn-sm {
min-height: 44px;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.form-input,
.form-textarea,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select {
min-height: 44px;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
textarea.form-textarea {
min-height: 88px;
}
input[type="checkbox"],
input[type="radio"] {
min-width: 24px;
min-height: 24px;
}
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
min-height: 44px;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
padding: 0.5rem;
margin: -0.5rem;
}
a:not(.btn) {
min-height: 44px;
display: inline-flex;
align-items: center;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
button:has(svg:only-child),
a:has(svg:only-child) {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem;
}
.dropdown-trigger,
[data-action*="click->modal#"],
[data-action*="click->dropdown#"] {
min-height: 44px;
min-width: 44px;
padding: 0.625rem;
}
.tab,
[role="tab"],
button[role="tab"] {
min-height: 44px;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.pagination button,
.pagination a {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.modal-close,
.alert-close,
.flash-message-close,
button[aria-label*="Close"],
button[aria-label*="Fermer"] {
min-width: 44px;
min-height: 44px;
padding: 0.625rem;
}
.card-action,
.list-item-action {
min-height: 44px;
padding: 0.625rem;
}
.fab {
min-width: 56px;
min-height: 56px;
}
.btn + .btn,
button + button,
a.btn + a.btn {
margin-inline-start: 0.5rem;
}
.btn-group-vertical .btn,
.btn-group-vertical button {
margin-bottom: 0.5rem;
}
input[type="file"] + label,
label:has(input[type="file"]) {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 0.625rem 1rem;
}
input[type="range"] {
min-height: 44px;
cursor: pointer;
}
.toggle,
.switch,
[role="switch"] {
min-height: 44px;
min-width: 44px;
}
}
@media (min-width: 641px) and (max-width: 1024px) {
.btn-sm,
button.btn-sm {
min-height: 40px;
}
input[type="checkbox"],
input[type="radio"] {
min-width: 20px;
min-height: 20px;
}
}
@media (max-width: 640px) {
*:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.bg-flowayz-navy *:focus-visible,
.bg-accent *:focus-visible,
[data-mode="dark"] *:focus-visible {
outline-color: rgba(255, 255, 255, 0.8);
}
}
aside.sidebar[data-sidebar-tone] {
background: var(--sidebar-bg);
transition: background 0.35s ease;
}
.sidebar[data-sidebar-tone="dark"] {
--text-primary: #F8FAFC;
--text-secondary: rgba(248, 250, 252, 0.74);
--text-tertiary: rgba(248, 250, 252, 0.48);
--border-default: rgba(255, 255, 255, 0.10);
--border-light: rgba(255, 255, 255, 0.06);
--bg-surface: rgba(255, 255, 255, 0.05);
--bg-surface-hover: rgba(255, 255, 255, 0.08);
--sidebar-border: rgba(255, 255, 255, 0.08);
--sidebar-header-border: rgba(255, 255, 255, 0.08);
--sidebar-scrollbar-thumb: rgba(255, 255, 255, 0.18);
--sidebar-toggle-bg: rgba(255, 255, 255, 0.08);
--sidebar-toggle-color: #F8FAFC;
--logo-text-color: #F8FAFC;
--nav-item-color: rgba(248, 250, 252, 0.74);
--nav-item-hover-bg: rgba(255, 255, 255, 0.07);
--nav-item-hover-color: #FFFFFF;
color: #F8FAFC;
}
.sidebar[data-sidebar-tone="light"] {
--text-primary: #0F172A;
--text-secondary: rgba(15, 23, 42, 0.72);
--text-tertiary: rgba(15, 23, 42, 0.46);
--border-default: rgba(15, 23, 42, 0.10);
--border-light: rgba(15, 23, 42, 0.06);
--bg-surface: rgba(255, 255, 255, 0.55);
--bg-surface-hover: rgba(15, 23, 42, 0.06);
--sidebar-border: rgba(15, 23, 42, 0.09);
--sidebar-header-border: rgba(15, 23, 42, 0.09);
--sidebar-scrollbar-thumb: rgba(15, 23, 42, 0.20);
--sidebar-toggle-bg: rgba(15, 23, 42, 0.06);
--sidebar-toggle-color: #0F172A;
--logo-text-color: #0F172A;
--nav-item-color: rgba(15, 23, 42, 0.72);
--nav-item-hover-bg: rgba(15, 23, 42, 0.06);
--nav-item-hover-color: #0F172A;
color: #0F172A;
}
.sidebar[data-sidebar-tone].sidebar-editing .sortable-drag {
background: var(--sidebar-bg-solid);
}
/* layouts/responsive.css */
@supports (height: 100dvh) {
html body .app-shell {
height: calc(100dvh - 56px);
}
}
@media (max-width: 639px) {
.dashboard-block-stats .card.card-flat,
.dashboard-block-stats .card.card-premium {
padding: 0.75rem;
}
}
html, body {
overflow-x: hidden;
}
.main-content {
max-width: 100%;
overflow-x: hidden;
}
@media (max-width: 1023px) {
#sidebar-nav {
width: 0 !important;
flex: 0 0 0 !important;
overflow: visible !important;
}
aside.sidebar.open {
display: flex !important;
position: fixed !important;
top: 56px;
inset-inline-start: 0;
bottom: 0;
z-index: 50;
max-width: 85vw;
width: var(--sidebar-width, 240px);
pointer-events: auto;
}
.app-shell {
display: flex;
flex-direction: row;
}
.app-shell > nav + div,
.app-shell > aside + div,
.app-shell > div[class*="flex-1"] {
width: 100%;
max-width: 100vw;
flex: 1 1 100%;
margin-inline-start: 0;
}
.card {
max-width: 100%;
word-break: break-word;
}
.filter-tabs {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.filter-tabs::-webkit-scrollbar {
display: none;
}
.content-padding {
padding-inline-start: 1rem;
padding-inline-end: 1rem;
}
main#main-content,
body .main-content {
width: 100%;
max-width: 100vw;
padding-inline-start: 0.75rem;
padding-inline-end: 0.75rem;
}
main#main-content > div,
body .main-content > div {
max-width: 100%;
}
#dashboard-blocks .dashboard-grid,
.dashboard-grid {
width: 100%;
max-width: 100vw;
grid-template-columns: 1fr;
}
[data-dashboard-customizer-target="block"] {
max-width: 100% !important;
width: 100% !important;
grid-column: span 1 !important;
}
body #main-content,
body .main-content {
margin-inline-start: 0;
margin-inline-end: 0;
padding-inline-start: 0.75rem;
padding-inline-end: 0.75rem;
text-align: start;
width: 100vw;
max-width: 100vw;
min-width: 100vw;
box-sizing: border-box;
}
body #main-content > *,
body .main-content > * {
margin-inline-start: 0;
margin-inline-end: 0;
max-width: 100%;
}
.dashboard-block,
[data-dashboard-customizer-target="block"] {
width: 100% !important;
max-width: 100% !important;
min-width: 100% !important;
box-sizing: border-box !important;
}
}
.page-title {
font-size: 1.625rem;
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
}
@media (min-width: 1024px) {
.page-title {
font-size: 2rem;
}
}
.page-header {
padding: 1.25rem 1rem;
}
@media (min-width: 1024px) {
.page-header {
padding: 1.5rem 1.5rem;
}
}
@media (min-width: 1280px) {
.page-header {
padding: 1.5rem 2rem;
}
}
@media (max-width: 640px) {
.btn,
button[type="submit"],
button[type="button"],
a.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost,
.btn-accent {
min-height: 44px;
min-width: 44px;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
.btn-sm {
min-height: 44px;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.form-input,
.form-textarea,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
textarea,
select {
min-height: 44px;
padding-top: 0.625rem;
padding-bottom: 0.625rem;
}
textarea.form-textarea {
min-height: 88px;
}
input[type="checkbox"],
input[type="radio"] {
min-width: 24px;
min-height: 24px;
}
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
min-height: 44px;
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
padding: 0.5rem;
margin: -0.5rem;
}
a:not(.btn) {
min-height: 44px;
display: inline-flex;
align-items: center;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
button:has(svg:only-child),
a:has(svg:only-child) {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem;
}
.dropdown-trigger,
[data-action*="click->modal#"],
[data-action*="click->dropdown#"] {
min-height: 44px;
min-width: 44px;
padding: 0.625rem;
}
.tab,
[role="tab"],
button[role="tab"] {
min-height: 44px;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
.pagination button,
.pagination a {
min-width: 44px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.modal-close,
.alert-close,
.flash-message-close,
button[aria-label*="Close"],
button[aria-label*="Fermer"] {
min-width: 44px;
min-height: 44px;
padding: 0.625rem;
}
.card-action,
.list-item-action {
min-height: 44px;
padding: 0.625rem;
}
.fab {
min-width: 56px;
min-height: 56px;
}
.btn + .btn,
button + button,
a.btn + a.btn {
margin-inline-start: 0.5rem;
}
.btn-group-vertical .btn,
.btn-group-vertical button {
margin-bottom: 0.5rem;
}
input[type="file"] + label,
label:has(input[type="file"]) {
min-height: 44px;
display: inline-flex;
align-items: center;
padding: 0.625rem 1rem;
}
input[type="range"] {
min-height: 44px;
cursor: pointer;
}
.toggle,
.switch,
[role="switch"] {
min-height: 44px;
min-width: 44px;
}
}
@media (min-width: 640px) and (max-width: 1024px) {
.btn-sm,
button.btn-sm {
min-height: 40px;
}
input[type="checkbox"],
input[type="radio"] {
min-width: 20px;
min-height: 20px;
}
}
@media (max-width: 640px) {
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
font-size: 16px;
}
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.modal-bottom-sheet,
.fixed-bottom-bar {
padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
}
@media (max-width: 640px) {
*:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
}
.bg-flowayz-navy *:focus-visible,
.bg-accent *:focus-visible,
[data-mode="dark"] *:focus-visible {
outline-color: rgba(255, 255, 255, 0.8);
}
}
@media (max-width: 640px) {
.card-title,
.card h3,
.card h2,
[data-dashboard-customizer-target="block"] h3,
[data-dashboard-customizer-target="block"] h2 {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card p.text-secondary,
[data-dashboard-customizer-target="block"] p.text-secondary {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
[data-dashboard-customizer-target="block"] h2 {
font-size: 1rem !important;
}
[data-dashboard-customizer-target="block"] h3 {
font-size: 0.875rem !important;
}
[data-dashboard-customizer-target="block"] .text-sm {
font-size: 0.75rem !important;
}
[data-dashboard-customizer-target="block"] .card-title {
font-size: 0.875rem !important;
line-height: 1.3;
}
.badge,
[data-dashboard-customizer-target="block"] .badge {
font-size: 0.625rem !important;
padding: 0.125rem 0.375rem;
white-space: nowrap;
}
[data-dashboard-customizer-target="block"] .flex-1 {
min-width: 0;
overflow: hidden;
}
[data-dashboard-customizer-target="block"] a,
[data-dashboard-customizer-target="block"] span {
max-width: 100%;
}
.dashboard-block-stats .text-2xl,
.dashboard-block-stats .text-3xl {
font-size: 1.25rem !important;
}
[data-dashboard-customizer-target="block"] .card {
padding: 0.75rem;
}
.block-header-bar {
padding: 0.5rem 0.75rem;
}
.block-header-title {
font-size: 0.75rem;
}
#getting-started-checklist h3,
#getting-started-checklist p {
overflow: hidden;
text-overflow: ellipsis;
}
.card-icon + div .badge {
max-width: 80px;
overflow: hidden;
text-overflow: ellipsis;
}
.mobile-truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.dop-stagger h1 {
font-size: 1.25rem !important;
}
.welcome-hero h2 {
font-size: 1.125rem !important;
}
.welcome-hero p {
font-size: 0.75rem !important;
}
}
/* utilities/responsive_grids.css */
.grid-auto-2 {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
.grid-auto-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.grid-auto-3 {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
.grid-auto-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.grid-auto-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.grid-auto-4 {
display: grid;
grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
.grid-auto-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.grid-auto-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid-auto-stats {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1024px) {
.grid-auto-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* utilities/mobile_safety.css */
@media (hover: none) and (pointer: coarse) {
.card:hover,
.card-flat:hover,
.card-premium:hover,
.card-selected:hover,
.selection-card:hover,
.hover-lift:hover,
.btn:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover,
.btn-ghost:hover,
.btn-coral:hover,
.btn-accent:hover {
transform: none !important;
}
.hover-lift:hover {
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
}
}
.safe-area-bottom {
padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.safe-area-top {
padding-top: max(1rem, env(safe-area-inset-top));
}
.safe-area-x {
padding-inline-start: max(1rem, env(safe-area-inset-left));
padding-inline-end: max(1rem, env(safe-area-inset-right));
}
.sticky-bottom-safe {
position: sticky;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.sticky-top-safe {
position: sticky;
top: max(1rem, env(safe-area-inset-top));
}
@media (pointer: coarse) {
.btn-sm {
min-height: 40px;
}
.btn-xs {
min-height: 36px;
}
}
@media (max-width: 639px) {
[class*="w-["][class*="px]"] {
max-width: 100%;
}
}
@media (max-width: 1023px) {
input[type="submit"],
button[type="submit"],
textarea {
font-size: max(1em, 16px);
}
}
/* utilities/responsive_table.css */
.responsive-table-wrap {
position: relative;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background:
linear-gradient(to right, var(--bg-surface, #fff) 30%, rgba(255, 255, 255, 0)) left center / 20px 100% no-repeat local,
linear-gradient(to left,  var(--bg-surface, #fff) 30%, rgba(255, 255, 255, 0)) right center / 20px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)) left center / 14px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.12), rgba(15, 23, 42, 0)) right center / 14px 100% no-repeat scroll;
background-color: var(--bg-surface, #fff);
}
.responsive-table-wrap:focus-visible {
outline: 2px solid var(--accent, #FF7B54);
outline-offset: 2px;
border-radius: 8px;
}
.responsive-table-wrap > table {
min-width: 100%;
}
[data-mode="dark"] .responsive-table-wrap,
.dark .responsive-table-wrap {
background:
linear-gradient(to right, var(--bg-surface) 30%, rgba(15, 23, 42, 0)) left center / 20px 100% no-repeat local,
linear-gradient(to left,  var(--bg-surface) 30%, rgba(15, 23, 42, 0)) right center / 20px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)) left center / 14px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)) right center / 14px 100% no-repeat scroll;
background-color: var(--bg-surface);
}
@media (max-width: 767.98px) {
table.table-stack,
table.table-stack > thead,
table.table-stack > tbody,
table.table-stack > thead > tr,
table.table-stack > tbody > tr,
table.table-stack th,
table.table-stack td {
display: block;
width: 100%;
}
table.table-stack > thead {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
table.table-stack > tbody > tr {
margin-bottom: 0.75rem;
border: 1px solid var(--border-default, #e2e8f0);
border-radius: 12px;
padding: 0.75rem 1rem;
background: var(--bg-surface, #fff);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
table.table-stack > tbody > tr > td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
padding: 0.375rem 0;
border: none;
text-align: end;
}
table.table-stack > tbody > tr > td::before {
content: attr(data-label);
font-weight: 500;
color: var(--text-secondary, #64748b);
text-align: start;
margin-inline-end: auto;
}
table.table-stack > tbody > tr > td:first-child {
font-weight: 600;
color: var(--text-primary);
border-bottom: 1px solid var(--border-light, #f1f5f9);
padding-bottom: 0.5rem;
margin-bottom: 0.25rem;
}
table.table-stack > tbody > tr > td:first-child::before {
display: none;
}
table.table-stack > tbody > tr > td:first-child {
text-align: start;
justify-content: flex-start;
}
}
/* components/bottom_sheet.css */
.bs-backdrop {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.5);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.25s ease;
z-index: 1040;
pointer-events: auto;
}
.bs-backdrop--visible {
opacity: 1;
}
.bs-sheet {
position: fixed;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: 0;
z-index: 1050;
background: var(--bg-surface, #ffffff);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
transform: translateY(100%);
transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
display: flex;
flex-direction: column;
padding-bottom: env(safe-area-inset-bottom, 0);
max-height: 90dvh;
max-height: 90vh;
}
.bs-sheet[hidden] {
display: none !important;
}
.bs-sheet--open {
transform: translateY(0);
}
.bs-sheet--peek {
max-height: 25dvh;
max-height: 25vh;
}
.bs-sheet--half {
max-height: 55dvh;
max-height: 55vh;
}
.bs-sheet--full {
max-height: 90dvh;
max-height: 90vh;
}
.bs-handle {
display: flex;
justify-content: center;
align-items: center;
padding: 0.75rem 0 0.5rem;
cursor: grab;
touch-action: none;
user-select: none;
}
.bs-handle::before {
content: "";
display: block;
width: 40px;
height: 4px;
border-radius: 4px;
background: var(--text-tertiary, #cbd5e1);
}
.bs-handle:active {
cursor: grabbing;
}
.bs-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.5rem 1.25rem 0.75rem;
border-bottom: 1px solid var(--border-light, #f1f5f9);
}
.bs-title {
font-size: 1.0625rem;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.bs-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--bg-surface-hover, #f8fafc);
border: none;
color: var(--text-secondary);
cursor: pointer;
transition: background 0.15s;
}
.bs-close:hover,
.bs-close:focus-visible {
background: var(--border-default, #e2e8f0);
outline: none;
}
.bs-content {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 1rem 1.25rem 1.5rem;
}
.bs-footer {
border-top: 1px solid var(--border-light, #f1f5f9);
padding: 0.875rem 1.25rem;
background: var(--bg-surface);
padding-bottom: max(0.875rem, env(safe-area-inset-bottom));
}
body.bs-scroll-lock {
overflow: hidden;
position: fixed;
width: 100%;
}
@media (min-width: 1024px) {
.bs-sheet--desktop-modal {
inset-inline-start: 50%;
inset-inline-end: auto;
bottom: 50%;
transform: translate(-50%, 50%) scale(0.95);
width: min(90vw, 560px);
max-height: 80vh;
border-radius: 16px;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
opacity: 0;
}
.bs-sheet--desktop-modal.bs-sheet--open {
transform: translate(-50%, 50%) scale(1);
opacity: 1;
}
.bs-sheet--desktop-modal .bs-handle {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.bs-sheet,
.bs-backdrop,
.bs-sheet--desktop-modal {
transition: none !important;
}
}
/* components/sticky_cta.css */
.sticky-bottom-cta {
position: fixed;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: 0;
z-index: 7000;
padding: 0.75rem 1rem;
padding-bottom: max(0.75rem, calc(env(safe-area-inset-bottom, 0) + 0.75rem));
background: var(--bg-surface, #ffffff);
border-top: 1px solid var(--border-default, #e2e8f0);
box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08);
transform: translateY(calc(100% + env(safe-area-inset-bottom, 0)));
opacity: 0;
pointer-events: none;
transition: transform 240ms cubic-bezier(0.32, 0.72, 0, 1),
opacity 200ms ease;
will-change: transform;
}
.sticky-bottom-cta.is-visible {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.sticky-bottom-cta__inner {
display: flex;
align-items: center;
gap: 0.75rem;
max-width: 480px;
margin: 0 auto;
}
.sticky-bottom-cta .btn {
flex: 1;
min-height: 48px;
font-weight: 600;
}
.sticky-bottom-cta__hint {
font-size: 0.75rem;
color: var(--text-tertiary);
text-align: center;
margin-top: 0.25rem;
display: block;
}
@media (min-width: 1024px) {
.sticky-bottom-cta {
display: none;
}
}
.mobile-bnav-wrapper ~ .sticky-bottom-cta,
.mobile-bnav-wrapper + .sticky-bottom-cta {
bottom: calc(64px + env(safe-area-inset-bottom, 0));
padding-bottom: 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
.sticky-bottom-cta { transition: none; }
}
/* utilities/scrollable_tabs.css */
.tabs-scrollable {
display: flex;
gap: 0.25rem;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scroll-padding-inline: 1rem;
scrollbar-width: none;
-ms-overflow-style: none;
background:
linear-gradient(to right, var(--bg-surface, #fff) 30%, rgba(255, 255, 255, 0)) left center / 16px 100% no-repeat local,
linear-gradient(to left,  var(--bg-surface, #fff) 30%, rgba(255, 255, 255, 0)) right center / 16px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0)) left center / 12px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.10), rgba(15, 23, 42, 0)) right center / 12px 100% no-repeat scroll;
background-color: var(--bg-surface, #fff);
}
.tabs-scrollable::-webkit-scrollbar {
display: none;
}
.tabs-scrollable > * {
flex: 0 0 auto;
scroll-snap-align: start;
}
[data-mode="dark"] .tabs-scrollable,
.dark .tabs-scrollable {
background:
linear-gradient(to right, var(--bg-surface) 30%, rgba(15, 23, 42, 0)) left center / 16px 100% no-repeat local,
linear-gradient(to left,  var(--bg-surface) 30%, rgba(15, 23, 42, 0)) right center / 16px 100% no-repeat local,
radial-gradient(farthest-side at 0 50%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)) left center / 12px 100% no-repeat scroll,
radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)) right center / 12px 100% no-repeat scroll;
background-color: var(--bg-surface);
}
@media (min-width: 768px) {
.tabs-scrollable {
overflow-x: visible;
background: none;
scroll-snap-type: none;
}
}
/* utilities/view_transitions.css */
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 220ms;
animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
::view-transition-old(root) {
animation-name: fz-fade-out;
}
::view-transition-new(root) {
animation-name: fz-fade-in;
}
::view-transition-old(header),
::view-transition-new(header) {
animation: none;
mix-blend-mode: normal;
}
::view-transition-old(sidebar),
::view-transition-new(sidebar) {
animation: none;
}
::view-transition-old(page-title) {
animation: fz-fade-out 160ms ease-out;
}
::view-transition-new(page-title) {
animation: fz-fade-in 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes fz-fade-in {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes fz-fade-out {
from { opacity: 1; transform: translateY(0); }
to   { opacity: 0; transform: translateY(-4px); }
}
@keyframes fz-slide-in-left {
from { transform: translateX(calc(var(--dir, 1) * -14px)); opacity: 0; }
to   { transform: translateX(0); opacity: 1; }
}
@keyframes fz-slide-out-left {
from { transform: translateX(0); opacity: 1; }
to   { transform: translateX(calc(var(--dir, 1) * -14px)); opacity: 0; }
}
.turbo-progress-bar {
height: 3px;
background: linear-gradient(90deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, white 30%) 100%);
box-shadow: 0 0 10px var(--accent-40, rgba(255,123,84,0.4)),
0 0 4px var(--accent-20, rgba(255,123,84,0.2));
opacity: 1 !important;
}
turbo-frame.fz-frame-animate {
display: block;
transition: opacity 180ms cubic-bezier(0.22, 1, 0.36, 1);
}
turbo-frame.fz-frame-animate[busy] {
opacity: 0.55;
}
turbo-frame.fz-frame-animate[complete]:not([busy]) > :first-child {
animation: fz-fade-in 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root),
::view-transition-old(sidebar),
::view-transition-new(sidebar),
::view-transition-old(main-content),
::view-transition-new(main-content),
::view-transition-old(page-title),
::view-transition-new(page-title) {
animation: none !important;
}
turbo-frame.fz-frame-animate,
turbo-frame.fz-frame-animate[busy] {
transition: none;
opacity: 1;
}
turbo-frame.fz-frame-animate[complete]:not([busy]) > :first-child {
animation: none;
}
}
html[data-animations="off"] ::view-transition-old(root),
html[data-animations="off"] ::view-transition-new(root),
html[data-animations="off"] ::view-transition-old(main-content),
html[data-animations="off"] ::view-transition-new(main-content),
html[data-animations="off"] ::view-transition-old(page-title),
html[data-animations="off"] ::view-transition-new(page-title) {
animation: none;
}
/* components/pull_to_refresh.css */
.ptr-indicator {
position: fixed;
top: 56px;
inset-inline-start: 50%;
transform: translate(-50%, -100%);
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bg-surface);
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
border: 1px solid var(--border-default);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-secondary);
z-index: 60;
pointer-events: none;
opacity: 0;
}
.ptr-indicator svg {
width: 22px;
height: 22px;
transition: transform 0.2s ease;
}
.ptr-indicator.ptr-ready {
background: var(--accent);
color: var(--accent-contrast);
border-color: var(--accent);
}
.ptr-indicator.ptr-ready svg {
transform: rotate(180deg);
}
body.ptr-active {
user-select: none;
-webkit-user-select: none;
}
@media (min-width: 1024px) {
.ptr-indicator {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.ptr-indicator,
.ptr-indicator svg {
transition: none;
}
}
/* flowayz.css */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: var(--density-y) calc(var(--density-x) + 4px);
font-family: var(--font-body, var(--font-primary));
font-weight: 600;
font-size: 14px;
letter-spacing: -0.005em;
white-space: nowrap;
border-radius: var(--r-md);
border: 1px solid transparent;
cursor: pointer;
user-select: none;
transition:
background var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(0.5px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.btn--primary {
background: var(--accent);
color: var(--accent-contrast);
box-shadow: var(--shadow-accent);
}
.btn--primary:hover { filter: brightness(0.96); }
[data-gradient="on"] .btn--primary {
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong, var(--accent-hover)) 100%);
}
.btn--secondary {
background: var(--bg-surface);
color: var(--text-primary);
border-color: var(--border-default, var(--border-handoff));
}
.btn--secondary:hover {
background: var(--bg-hover);
border-color: var(--border-strong, var(--border-strong-handoff));
}
.btn--ghost {
background: transparent;
color: var(--text-primary);
border-color: transparent;
}
.btn--ghost:hover { background: var(--bg-hover); }
.btn--soft {
background: var(--accent-soft);
color: var(--accent);
}
.btn--soft:hover { filter: brightness(0.97); }
.btn--danger {
background: var(--danger, #EF4444);
color: var(--text-inverse, #FFFFFF);
}
.btn--danger:hover { filter: brightness(0.95); }
.btn--link {
background: transparent;
color: var(--accent);
border-color: transparent;
text-decoration: underline;
text-underline-offset: 4px;
padding: 0;
}
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--lg { padding: 14px 22px; font-size: 15px; border-radius: var(--r-md); }
.btn--xl { padding: 18px 28px; font-size: 16px; border-radius: var(--r-md); }
.btn--icon { padding: 8px; width: 36px; height: 36px; }
.btn__icon { width: 18px; height: 18px; flex-shrink: 0; }
.btn[aria-busy="true"] .btn__label { opacity: 0.5; }
.btn[aria-busy="true"],
.btn-loading {
position: relative;
overflow: hidden;
cursor: progress;
pointer-events: none;
}
.btn[aria-busy="true"]::after,
.btn-loading::after {
content: "";
position: absolute;
inset-inline-start: 0;
bottom: 0;
height: 2px;
width: 30%;
background: linear-gradient(90deg, transparent, currentColor, transparent);
opacity: 0.85;
animation: fz-btn-loading-shimmer 1.2s linear infinite;
pointer-events: none;
}
@keyframes fz-btn-loading-shimmer {
from { transform: translateX(calc(var(--dir, 1) * -100%)); }
to   { transform: translateX(calc(var(--dir, 1) * 330%)); }
}
@media (prefers-reduced-motion: reduce) {
.btn[aria-busy="true"]::after,
.btn-loading::after { animation: none !important; opacity: 0.4; width: 100%; }
}
[data-animations="off"] .btn[aria-busy="true"]::after,
[data-animations="off"] .btn-loading::after { animation: none !important; }
.fz-card {
background: var(--bg-surface);
border: 1px solid var(--border-default, var(--border-handoff));
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.fz-card:hover {
border-color: var(--border-strong, var(--border-strong-handoff));
box-shadow: var(--shadow-md);
}
.fz-card--flat     { box-shadow: none; }
.fz-card--elevated { box-shadow: var(--shadow-md); }
.fz-card--glow     { box-shadow: 0 0 0 1px var(--accent), 0 12px 24px -12px var(--accent); }
.fz-card--accent   { background: var(--accent-soft); border-color: var(--accent); }
.fz-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 16px 16px 0 16px;
}
.fz-card__title { font-weight: 600; font-size: 16px; color: var(--text-primary); margin: 0; }
.fz-card__meta  { font-size: 12px; color: var(--text-muted, var(--text-muted-handoff)); }
.fz-card__body  { padding: 16px; }
.fz-card__foot  { padding: 0 16px 16px 16px; display: flex; gap: 8px; justify-content: flex-end; }
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field__label {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary, var(--text-secondary-handoff));
letter-spacing: -0.005em;
}
.field__input,
.field__textarea,
.field__select {
width: 100%;
padding: 10px 14px;
background: var(--bg-input);
color: var(--text-primary);
border: 1px solid var(--border-default, var(--border-handoff));
border-radius: var(--r-md);
font: 400 15px var(--font-body, var(--font-primary));
outline: none;
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field__textarea { min-height: 96px; resize: vertical; }
.field__input:focus,
.field__textarea:focus,
.field__select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
}
.field__input::placeholder,
.field__textarea::placeholder { color: var(--text-muted, var(--text-muted-handoff)); }
.field__hint  { font-size: 12px; color: var(--text-muted, var(--text-muted-handoff)); }
.field__error { font-size: 12px; color: var(--danger, #EF4444); }
.fz-pill {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.01em;
border-radius: var(--r-pill);
background: var(--bg-muted);
color: var(--text-secondary, var(--text-secondary-handoff));
border: 1px solid var(--border-faint);
white-space: nowrap;
}
.fz-pill--neutral {  }
.fz-pill--accent  { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.fz-pill--success { background: var(--success-soft, rgba(34,197,94,0.14)); color: var(--success, #16A34A); border-color: transparent; }
.fz-pill--warning { background: var(--warning-soft, rgba(245,158,11,0.14)); color: var(--warning, #F59E0B); border-color: transparent; }
.fz-pill--danger  { background: var(--danger-soft, rgba(239,68,68,0.14)); color: var(--danger, #EF4444); border-color: transparent; }
.fz-pill--solid   { background: var(--accent); color: var(--accent-contrast); border-color: transparent; }
.fz-pill--outline { background: transparent; border-color: var(--border-strong, var(--border-strong-handoff)); }
.fz-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; background: currentColor; }
.fz-sidebar {
width: 260px;
background: var(--bg-sidebar);
border-inline-end: 1px solid var(--border-faint);
display: flex;
flex-direction: column;
flex-shrink: 0;
height: 100vh;
position: sticky;
top: 0;
transition: width var(--dur) var(--ease-out);
}
[data-density="compact"] .fz-sidebar { width: 220px; }
.fz-sidebar[data-collapsed="true"] { width: 64px; }
.fz-sidebar[data-collapsed="true"] .fz-sidebar__label,
.fz-sidebar[data-collapsed="true"] .fz-sidebar__brand-name { display: none; }
[data-gradient="on"] .fz-sidebar {
background: linear-gradient(180deg,
var(--bg-sidebar) 0%,
var(--bg-sidebar) 50%,
color-mix(in oklch, var(--accent) 8%, var(--bg-sidebar)) 100%);
}
.fz-sidebar__brand {
padding: 20px 16px;
display: flex; align-items: center; gap: 10px;
border-bottom: 1px solid var(--border-faint);
}
.fz-sidebar__nav {
display: flex; flex-direction: column;
gap: 2px;
padding: 12px 8px;
flex: 1; overflow-y: auto;
}
.fz-sidebar__link {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
border-radius: var(--r-md);
color: var(--text-secondary, var(--text-secondary-handoff));
font-size: 14px; font-weight: 500;
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
position: relative;
}
.fz-sidebar__link:hover {
background: var(--bg-hover);
color: var(--text-primary);
}
.fz-sidebar__link[aria-current="page"],
.fz-sidebar__link.is-active {
background: var(--accent-soft);
color: var(--accent);
}
.fz-sidebar__link[aria-current="page"]::before,
.fz-sidebar__link.is-active::before {
content: "";
position: absolute;
inset-inline-start: 0; top: 8px; bottom: 8px;
width: 4px;
border-radius: 0 4px 4px 0;
background: var(--accent);
}
.fz-sidebar__icon { width: 20px; height: 20px; flex-shrink: 0; }
.fz-sidebar__bottom {
padding: 12px 16px;
border-top: 1px solid var(--border-faint);
display: flex; flex-direction: column; gap: 8px;
}
.fz-topbar {
height: 56px;
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
padding: 0 24px;
position: sticky; top: 0;
z-index: 30;
border-bottom: 1px solid var(--border-faint);
backdrop-filter: blur(12px);
background: color-mix(in oklch, var(--bg-canvas) 80%, transparent);
}
.fz-topbar__left,
.fz-topbar__right { display: flex; align-items: center; gap: 12px; }
.fz-topbar__center { flex: 1; max-width: 480px; }
.fz-modal-overlay {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
z-index: 100;
display: flex; align-items: center; justify-content: center;
padding: 24px;
}
.fz-modal {
background: var(--bg-elev);
border-radius: var(--r-xl);
box-shadow: var(--shadow-lg);
max-width: 560px;
width: 100%;
max-height: 85vh;
overflow-y: auto;
border: 1px solid var(--border-faint);
}
.fz-modal--lg { max-width: 720px; }
.fz-modal--xl { max-width: 920px; }
.fz-modal__head {
padding: 20px 24px;
display: flex; align-items: center; justify-content: space-between;
border-bottom: 1px solid var(--border-faint);
}
.fz-modal__title { font-weight: 600; font-size: 18px; color: var(--text-primary); margin: 0; }
.fz-modal__body { padding: 24px; }
.fz-modal__foot {
padding: 16px 24px;
display: flex; gap: 8px; justify-content: flex-end;
border-top: 1px solid var(--border-faint);
}
.fz-toast {
position: fixed;
bottom: 24px; inset-inline-end: 24px;
background: var(--bg-elev);
color: var(--text-primary);
padding: 12px 16px;
border-radius: var(--r-md);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-faint);
display: flex; align-items: center; gap: 10px;
z-index: 200;
max-width: 420px;
animation: fz-toast-in calc(200ms * var(--motion-mult)) var(--ease-out);
}
.fz-toast--info    { border-inline-start: 3px solid var(--info, #3B82F6); }
.fz-toast--success { border-inline-start: 3px solid var(--success, #16A34A); }
.fz-toast--warning { border-inline-start: 3px solid var(--warning, #F59E0B); }
.fz-toast--danger  { border-inline-start: 3px solid var(--danger, #EF4444); }
@keyframes fz-toast-in {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: translateY(0); }
}
@media (max-width: 640px) {
.fz-toast { inset-inline-start: 24px; inset-inline-end: 24px; bottom: 80px; max-width: none; }
}
.fz-skeleton {
background: linear-gradient(90deg,
var(--bg-muted) 0%,
color-mix(in oklch, var(--bg-muted) 60%, white) 50%,
var(--bg-muted) 100%);
background-size: 200% 100%;
animation: fz-shimmer calc(1.5s / max(var(--motion-mult), 0.001)) linear infinite;
border-radius: var(--r-sm);
}
.fz-skeleton--text  { height: 1em; margin: 4px 0; }
.fz-skeleton--block { width: 100%; }
@keyframes fz-shimmer {
from { background-position: 200% 0; }
to   { background-position: -200% 0; }
}
.fz-cursor-blink::after {
content: "▌";
display: inline-block;
margin-inline-start: 2px;
color: var(--accent);
animation: fz-blink 1.2s step-end infinite;
}
@keyframes fz-blink { 50% { opacity: 0; } }
.fz-reveal {
animation: fz-fade-up calc(450ms * var(--motion-mult)) var(--ease-out) both;
}
.fz-reveal[data-i] { animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes fz-fade-up {
from { opacity: 0; transform: translateY(8px); }
to   { opacity: 1; transform: translateY(0); }
}
.fz-empty {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 64px 24px;
text-align: center;
gap: 16px;
}
.fz-empty__icon {
width: 48px; height: 48px;
color: var(--text-muted, var(--text-muted-handoff));
margin-bottom: 8px;
}
.fz-empty__title {
font-size: 18px; font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.fz-empty__sub {
font-size: 14px;
color: var(--text-secondary, var(--text-secondary-handoff));
max-width: 320px;
margin: 0;
}
.fz-h-display {
font-family: var(--font-display, 'Fraunces', serif);
font-weight: 600;
letter-spacing: -0.03em;
line-height: 1.05;
}
.fz-h-display--italic { font-style: italic; }
.fz-h-display-md {
font-family: var(--font-display, 'Fraunces', serif);
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.1;
}
.fz-h-mono {
font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-weight: 500;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.fz-container        { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.fz-container--wide  { max-width: 1400px; }
.fz-container--narrow{ max-width: 720px; }
.fz-grid    { display: grid; gap: 24px; }
.fz-grid--3 { grid-template-columns: repeat(3, 1fr); }
.fz-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 768px) {
.fz-grid--3, .fz-grid--4 { grid-template-columns: 1fr; }
}
.fz-stack > * + * { margin-top: var(--gap, 16px); }
.fz-stack--sm { --gap: 8px; }
.fz-stack--md { --gap: 16px; }
.fz-stack--lg { --gap: 32px; }
.fz-focusable:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
.fz-reveal,
.fz-toast,
.fz-cursor-blink::after { animation: none !important; }
}
.deal-detail-note {
background: var(--bg-surface-hover);
border-inline-start: 3px solid var(--accent);
border-radius: 8px;
padding: 10px 12px;
line-height: 1.5;
}
.deal-detail-note p {
margin: 0;
}
.deal-detail-note p + p {
margin-top: 4px;
}
.deal-detail-note strong {
color: var(--text-primary);
font-weight: 600;
}
/* flowayz_app_shell.css */
.sidebar-link.active {
background: var(--accent-gradient) !important;
color: var(--accent-contrast) !important;
box-shadow: 0 8px 20px -8px hsla(var(--accent-h), var(--accent-s), var(--accent-l), .55);
}
.sidebar-link.active .sidebar-badge,
.sidebar-link.active .badge-accent {
background: rgba(0, 0, 0, .18) !important;
color: var(--accent-contrast) !important;
}
.sidebar-link:hover:not(.active) {
background: var(--bg-hover) !important;
color: var(--text-primary) !important;
}
.header-icon-btn.active {
background: var(--accent-soft);
color: var(--accent);
border-radius: var(--r-md, 10px);
position: relative;
}
.header-icon-btn.active::after {
content: "";
position: absolute;
bottom: -8px;
left: 50%;
width: 4px;
height: 4px;
border-radius: 50%;
background: var(--accent);
transform: translateX(-50%);
}
.fz-cmdk-hint {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
font-size: 11px;
font-weight: 500;
color: var(--text-muted, var(--text-muted-handoff));
background: var(--bg-muted);
border: 1px solid var(--border-faint);
border-radius: var(--r-md, 10px);
cursor: pointer;
transition: all var(--dur-fast, 150ms) var(--ease-out, ease);
user-select: none;
}
.fz-cmdk-hint:hover {
color: var(--text-primary);
border-color: var(--border-strong, var(--border-strong-handoff));
}
.fz-cmdk-hint kbd {
font-family: var(--font-mono, monospace);
font-size: 10px;
padding: 1px 5px;
background: var(--bg-surface);
border: 1px solid var(--border-default, var(--border-handoff));
border-radius: 4px;
font-weight: 600;
letter-spacing: 0;
line-height: 1;
}
@media (max-width: 768px) {
.fz-cmdk-hint .fz-cmdk-hint__label { display: none; }
}
.command-palette__hint-footer {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
padding: 8px 16px;
border-top: 1px solid var(--border-faint);
font-size: 11px;
color: var(--text-muted, var(--text-muted-handoff));
background: var(--bg-muted);
}
.command-palette__hint-footer kbd {
font-family: var(--font-mono, monospace);
font-size: 10px;
padding: 1px 5px;
background: var(--bg-surface);
border: 1px solid var(--border-default, var(--border-handoff));
border-radius: 4px;
font-weight: 600;
margin: 0 2px;
}
main.turbo-leaving {
opacity: 0.96;
transition: opacity 70ms ease-out;
}
main.turbo-arriving {
animation: fz-turbo-arrive 200ms cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes fz-turbo-arrive {
from { opacity: 0.94; transform: translate3d(0, 3px, 0); }
to   { opacity: 1;    transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
main.turbo-leaving,
main.turbo-arriving {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* flowayz_override.css */
@keyframes fz-form-fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
textarea:focus,
select:focus,
input[type="file"]:focus-visible + label {
outline: none;
}
label[class*="cursor-pointer"],
button,
a[class*="btn"],
input[type="radio"] + div {
transition-property: color, background-color, border-color, box-shadow, opacity, transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 200ms;
}
input[type="radio"]:checked + div {
animation: scale-bounce 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
@keyframes scale-bounce {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
input[type="radio"]:checked ~ span {
animation: pulse-subtle 0.5s ease-out;
}
@keyframes pulse-subtle {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.8;
}
}
@keyframes shimmer {
0% {
background-position: -1000px 0;
}
100% {
background-position: 1000px 0;
}
}
nav[aria-label="Breadcrumb"] svg {
transition: transform 0.2s ease;
}
nav[aria-label="Breadcrumb"] a:hover svg {
transform: scale(1.2);
}
button[type="submit"]:active {
position: relative;
overflow: hidden;
}
[data-request-form-target="charCount"] {
transition: color 0.3s ease;
}
.fz-form-fade-in {
animation: fz-form-fade-in 0.3s ease-out forwards;
}
*:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: 0.5rem;
}
input[type="radio"]:focus-visible {
outline: none;
}
button,
a,
label[class*="cursor-pointer"],
[class*="transition-all"] {
transition-property: all;
transition-duration: 300ms;
}
html.dark .badge-teal,
[data-theme="dark"] .badge-teal,
[data-mode="dark"] .badge-teal {
background: color-mix(in srgb, var(--flowayz-teal) 15%, var(--bg-primary)) !important;
color: var(--flowayz-teal) !important;
border: 1px solid color-mix(in srgb, var(--flowayz-teal) 35%, transparent) !important;
}
html.dark .badge-accent,
[data-theme="dark"] .badge-accent,
[data-mode="dark"] .badge-accent {
background: var(--accent) !important;
color: var(--accent-contrast, #fff) !important;
font-weight: 700 !important;
}
.btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn),
.btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn),
.btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn),
.auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn) {
position: relative;
overflow: hidden;
border-radius: 12px !important;
border: 1px solid var(--accent-edge, transparent) !important;
background: var(--accent-gradient, var(--accent)) !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.28),
0 8px 22px -8px var(--accent),
0 2px 6px -2px rgba(15, 23, 42, 0.18) !important;
transition:
box-shadow 0.22s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)),
transform 0.22s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1)),
background 0.2s ease !important;
}
.btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn):hover,
.btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn):hover,
.btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn):hover,
.auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn):hover {
background: var(--accent-gradient-hover, var(--accent-hover)) !important;
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.32),
0 12px 30px -8px var(--accent),
0 3px 10px -2px rgba(15, 23, 42, 0.22) !important;
}
.btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn):active,
.btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn):active,
.btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn):active,
.auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn):active {
transform: translateY(0);
box-shadow:
inset 0 2px 5px rgba(15, 23, 42, 0.20),
0 4px 12px -6px var(--accent) !important;
}
.btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn)::before,
.btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn)::before,
.btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn)::before,
.auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn)::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
transform: translateX(calc(var(--dir, 1) * -130%));
pointer-events: none;
}
.btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn) > *,
.btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn) > *,
.btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn) > *,
.auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn) > * {
position: relative;
z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
.btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn)::before,
.btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn)::before,
.btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn)::before,
.auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn)::before {
transition: transform 0.75s var(--ease-out-premium, cubic-bezier(0.22, 1, 0.36, 1));
}
.btn-primary:not(.vt-founder-cta):not(.vt-final-cta-btn):hover::before,
.btn-accent:not(.vt-founder-cta):not(.vt-final-cta-btn):hover::before,
.btn--primary:not(.vt-founder-cta):not(.vt-final-cta-btn):hover::before,
.auth-cta:not(.vt-founder-cta):not(.vt-final-cta-btn):hover::before {
transform: translateX(calc(var(--dir, 1) * 130%));
}
}