robgomezsir/smart-click-segmentation-plugin

1/* CSS Custom Properties for theming */2:root {3    --primary-500: #0ea5e9;4    --primary-600: #0284c7;5    --secondary-500: #d946ef;6    --secondary-600: #c026d3;7    --bg-light: #f9fafb;8    --bg-dark: #111827;9    --text-light: #1f2937;10    --text-dark: #f9fafb;11}12 13/* Global Styles */14* {15    margin: 0;16    padding: 0;17    box-sizing: border-box;18}19 20html {21    scroll-behavior: smooth;22}23 24body {25    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;26    line-height: 1.6;27    overflow-x: hidden;28}29 30/* Custom Scrollbar */31::-webkit-scrollbar {32    width: 8px;33}34 35::-webkit-scrollbar-track {36    background: var(--bg-light);37}38 39.dark ::-webkit-scrollbar-track {40    background: var(--bg-dark);41}42 43::-webkit-scrollbar-thumb {44    background: linear-gradient(180deg, var(--primary-500), var(--secondary-500));45    border-radius: 4px;46}47 48::-webkit-scrollbar-thumb:hover {49    background: linear-gradient(180deg, var(--primary-600), var(--secondary-600));50}51 52/* Glass Morphism */53.glass {54    background: rgba(255, 255, 255, 0.1);55    backdrop-filter: blur(10px);56    -webkit-backdrop-filter: blur(10px);57    border: 1px solid rgba(255, 255, 255, 0.2);58}59 60.dark .glass {61    background: rgba(0, 0, 0, 0.3);62    border: 1px solid rgba(255, 255, 255, 0.1);63}64 65/* Gradient Text */66.gradient-text {67    background: linear-gradient(135deg, var(--primary-500), var(--secondary-500));68    -webkit-background-clip: text;69    -webkit-text-fill-color: transparent;70    background-clip: text;71}72 73/* Animated Background */74.animated-bg {75    background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);76    background-size: 400% 400%;77    animation: gradient 15s ease infinite;78}79 80@keyframes gradient {81    0% { background-position: 0% 50%; }82    50% { background-position: 100% 50%; }83    100% { background-position: 0% 50%; }84}85 86/* Selection Highlight */87::selection {88    background: var(--primary-500);89    color: white;90}91 92/* Focus States */93*:focus-visible {94    outline: 2px solid var(--primary-500);95    outline-offset: 2px;96}97 98/* Image Hover Effects */99.img-hover-zoom {100    overflow: hidden;101}102 103.img-hover-zoom img {104    transition: transform 0.5s ease;105}106 107.img-hover-zoom:hover img {108    transform: scale(1.1);109}110 111/* Card Hover Effects */112.card-hover {113    transition: all 0.3s ease;114}115 116.card-hover:hover {117    transform: translateY(-8px);118    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.15);119}120 121/* Button Ripple Effect */122.btn-ripple {123    position: relative;124    overflow: hidden;125}126 127.btn-ripple::after {128    content: '';129    position: absolute;130    top: 50%;131    left: 50%;132    width: 0;133    height: 0;134    background: rgba(255, 255, 255, 0.3);135    border-radius: 50%;136    transform: translate(-50%, -50%);137    transition: width 0.6s, height 0.6s;138}139 140.btn-ripple:active::after {141    width: 300px;142    height: 300px;143}144 145/* Loading Animation */146@keyframes spin {147    to { transform: rotate(360deg); }148}149 150.loading {151    display: inline-block;152    width: 20px;153    height: 20px;154    border: 2px solid transparent;155    border-top-color: currentColor;156    border-radius: 50%;157    animation: spin 0.8s linear infinite;158}159 160/* Code Block Styling */161pre {162    background: #1e1e1e;163    border-radius: 8px;164    padding: 1rem;165    overflow-x: auto;166}167 168code {169    font-family: 'Fira Code', 'Consolas', monospace;170    font-size: 0.9rem;171    line-height: 1.5;172}173 174/* Syntax Highlighting */175.token-keyword { color: #c586c0; }176.token-string { color: #ce9178; }177.token-comment { color: #6a9955; }178.token-function { color: #dcdcaa; }179.token-number { color: #b5cea8; }