/* ===== NUCLEORA 500 UI IMPROVEMENTS ===== */
/* Comprehensive UI overhaul for better UX */

/* === NAVIGATION (1-50) === */
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);padding:8px 0}
.breadcrumb-sep::after{content:'›';margin:0 4px;opacity:0.5}
.app-header{position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);background:rgba(15,23,42,0.9)}
.rail{transition:width 0.25s cubic-bezier(0.4,0,0.2,1),flex-basis 0.25s cubic-bezier(0.4,0,0.2,1)}
.rail-item{position:relative;transition:all 0.15s ease}
.rail-item.active{background:rgba(20,184,166,0.15)}
.rail-item.active::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--acc);border-radius:0 2px 2px 0}
.nav-group{border-left:1px solid var(--line);margin-left:16px;padding-left:12px}
.quick-jump-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.8);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh}
.quick-jump-box{width:90%;max-width:600px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.recent-items{max-height:240px;overflow-y:auto}
.recent-item{padding:10px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background 0.15s}
.recent-item:hover{background:var(--bg-surface)}
.starred-item::after{content:'★';color:#F59E0B;margin-left:8px}
.nav-search{position:relative}.nav-search input{width:100%;padding:10px 16px 10px 40px;background:var(--bg-surface);border:1px solid var(--line);border-radius:8px}
.nav-search::before{content:'🔍';position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:0.5}

/* === LAYOUT (51-100) === */
.grid{display:grid;gap:var(--sp-4,16px)}
.grid-cols-1{grid-template-columns:1fr}
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.grid-cols-4{grid-template-columns:repeat(4,1fr)}
.grid-cols-5{grid-template-columns:repeat(5,1fr)}
.grid-cols-6{grid-template-columns:repeat(6,1fr)}
@media(max-width:1280px){.lg\:grid-cols-4{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1024px){.md\:grid-cols-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.sm\:grid-cols-2,.md\:grid-cols-3,.lg\:grid-cols-4{grid-template-columns:1fr}}
.masonry{columns:3;column-gap:16px}
.masonry-item{break-inside:avoid;margin-bottom:16px}
.split-pane{display:flex;height:100%}
.split-pane-left,.split-pane-right{flex:1;overflow:auto}
.split-handle{width:8px;background:var(--line);cursor:col-resize;transition:background 0.2s;flex-shrink:0}
.split-handle:hover,.split-handle:active{background:var(--acc)}
.fab{position:fixed;bottom:24px;right:24px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--acc),#0891B2);color:white;border:none;cursor:pointer;box-shadow:0 4px 20px rgba(20,184,166,0.4);transition:all 0.2s;display:flex;align-items:center;justify-content:center;font-size:24px;z-index:50}
.fab:hover{transform:scale(1.1);box-shadow:0 6px 28px rgba(20,184,166,0.5)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;transition:all 0.2s}
.card:hover{border-color:var(--acc);box-shadow:0 8px 32px rgba(0,0,0,0.2)}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.card-title{font-size:16px;font-weight:600}
.card-body{flex:1}
.card-footer{margin-top:16px;padding-top:12px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px}
.skeleton{background:linear-gradient(90deg,var(--panel) 0%,var(--panel2) 50%,var(--panel) 100%);background-size:200% 100%;animation:skeleton-wave 1.5s ease-in-out infinite;border-radius:4px}
@keyframes skeleton-wave{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-text{height:16px;margin-bottom:8px}
.skeleton-title{height:24px;width:60%;margin-bottom:16px}
.skeleton-avatar{width:48px;height:48px;border-radius:50%}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 32px;text-align:center}
.empty-state-icon{font-size:72px;margin-bottom:24px;opacity:0.3}
.empty-state-title{font-size:20px;font-weight:600;margin-bottom:8px}
.empty-state-desc{color:var(--muted);max-width:400px;margin-bottom:24px}
table{width:100%;border-collapse:collapse}
thead{position:sticky;top:0;background:var(--panel);z-index:10}
th{text-align:left;padding:12px 16px;font-size:11px;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);border-bottom:2px solid var(--line)}
td{padding:14px 16px;border-bottom:1px solid var(--line)}
tr:hover{background:rgba(255,255,255,0.02)}
.table-responsive{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* === FORMS (101-150) === */
.form-group{margin-bottom:20px}
.form-label{display:block;font-size:13px;font-weight:500;margin-bottom:6px;color:var(--text)}
.form-hint{font-size:11px;color:var(--muted);margin-top:4px}
.form-input,.form-select,.form-textarea{width:100%;padding:10px 14px;background:var(--bg-surface);border:1px solid var(--line);border-radius:8px;color:var(--text);font-size:14px;transition:all 0.15s}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(20,184,166,0.15)}
.form-input.error,.form-select.error{border-color:var(--red)}
.form-input.success,.form-select.success{border-color:var(--green)}
.form-floating{position:relative}
.form-floating .form-input{padding-top:24px;padding-bottom:8px}
.form-floating .form-label{position:absolute;top:50%;left:14px;transform:translateY(-50%);transition:all 0.15s;pointer-events:none;color:var(--muted)}
.form-floating .form-input:focus+.form-label,.form-floating .form-input:not(:placeholder-shown)+.form-label{top:10px;font-size:10px;color:var(--acc)}
.input-icon{position:relative}
.input-icon .form-input{padding-left:42px}
.input-icon .icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted)}
.input-addon{display:flex}
.input-addon .form-input{border-radius:8px 0 0 8px}
.input-addon .addon{padding:10px 14px;background:var(--line);border:1px solid var(--line);border-left:none;border-radius:0 8px 8px 0;color:var(--muted)}
.char-counter{position:absolute;bottom:8px;right:12px;font-size:10px;color:var(--muted)}
.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;opacity:0.5}
.password-toggle:hover{opacity:1}
.password-strength{height:4px;background:var(--line);border-radius:2px;margin-top:8px;overflow:hidden}
.password-strength-fill{height:100%;transition:all 0.3s}
.strength-weak{width:33%;background:var(--red)}
.strength-medium{width:66%;background:var(--orange)}
.strength-strong{width:100%;background:var(--green)}
.select-custom{position:relative}
.select-custom select{appearance:none;padding-right:40px}
.select-custom::after{content:'▼';position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--muted);pointer-events:none}
.multi-select{position:relative}
.multi-select-tags{display:flex;flex-wrap:wrap;gap:6px;padding:8px;min-height:44px;background:var(--bg-surface);border:1px solid var(--line);border-radius:8px}
.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;background:var(--acc);color:white;border-radius:14px;font-size:12px}
.tag-remove{cursor:pointer;opacity:0.7;font-size:14px}
.tag-remove:hover{opacity:1}
.checkbox-group,.radio-group{display:flex;flex-direction:column;gap:10px}
.checkbox-label,.radio-label{display:flex;align-items:center;gap:10px;cursor:pointer}
.checkbox-custom,.radio-custom{appearance:none;width:20px;height:20px;border:2px solid var(--line);border-radius:4px;cursor:pointer;transition:all 0.15s;flex-shrink:0}
.radio-custom{border-radius:50%}
.checkbox-custom:checked{background:var(--acc);border-color:var(--acc)}
.checkbox-custom:checked::before{content:'✓';color:white;display:flex;justify-content:center;font-size:12px}
.radio-custom:checked{border-color:var(--acc);border-width:6px}
.toggle-switch{position:relative;width:48px;height:26px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--line);border-radius:13px;cursor:pointer;transition:all 0.2s}
.toggle-slider::before{content:'';position:absolute;width:20px;height:20px;left:3px;bottom:3px;background:white;border-radius:50%;transition:all 0.2s}
.toggle-switch input:checked+.toggle-slider{background:var(--acc)}
.toggle-switch input:checked+.toggle-slider::before{transform:translateX(22px)}
.range-slider{width:100%;height:6px;background:var(--line);border-radius:3px;appearance:none}
.range-slider::-webkit-slider-thumb{appearance:none;width:18px;height:18px;background:var(--acc);border-radius:50%;cursor:pointer}
.dropzone{border:2px dashed var(--line);border-radius:12px;padding:40px;text-align:center;transition:all 0.2s;cursor:pointer}
.dropzone:hover,.dropzone.dragover{border-color:var(--acc);background:rgba(20,184,166,0.05)}
.dropzone-icon{font-size:48px;margin-bottom:16px;opacity:0.5}

/* === VISUALIZATION (151-200) === */
.seq-viewer{font-family:'SF Mono',ui-monospace,monospace;font-size:13px;line-height:1.8;letter-spacing:1px}
.seq-viewer .highlight{background:rgba(20,184,166,0.25);border-radius:2px;padding:1px 0}
.seq-viewer .selection{background:rgba(59,130,246,0.3)}
.codon{display:inline-block;padding:2px;border-radius:2px}
.codon-A{color:#22C55E}.codon-T{color:#EF4444}.codon-G{color:#F59E0B}.codon-C{color:#3B82F6}
.annotation-track{height:28px;margin:4px 0;position:relative;background:var(--bg-surface);border-radius:4px}
.annotation-feature{position:absolute;height:100%;border-radius:4px;display:flex;align-items:center;padding:0 8px;font-size:11px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feature-cds{background:linear-gradient(135deg,#3B82F6,#1D4ED8)}
.feature-promoter{background:linear-gradient(135deg,#22C55E,#15803D)}
.feature-terminator{background:linear-gradient(135deg,#EF4444,#B91C1C)}
.feature-utr{background:linear-gradient(135deg,#F59E0B,#D97706)}
.feature-misc{background:linear-gradient(135deg,#8B5CF6,#6D28D9)}
.gc-heatmap{display:flex;height:24px;border-radius:4px;overflow:hidden}
.gc-cell{flex:1;transition:all 0.2s}
.gc-low{background:#3B82F6}
.gc-mid{background:#22C55E}
.gc-high{background:#EF4444}
.struct-viewer{font-family:monospace;white-space:pre}
.struct-pair{color:var(--acc)}
.struct-unpaired{color:var(--muted)}
.struct-helix{color:#EF4444}
.struct-loop{color:#3B82F6}
.alignment-viewer{overflow-x:auto}
.alignment-row{display:flex;font-family:monospace;font-size:12px}
.alignment-name{width:140px;flex-shrink:0;padding-right:16px;text-align:right;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.alignment-seq{white-space:pre;letter-spacing:1px}
.alignment-match{background:rgba(34,197,94,0.2)}
.alignment-mismatch{background:rgba(239,68,68,0.2)}
.alignment-gap{color:var(--muted)}
.tree-viewer{padding:16px}
.tree-node{position:relative;padding-left:28px;margin:8px 0}
.tree-node::before{content:'';position:absolute;left:8px;top:0;bottom:50%;width:16px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.tree-label{padding:4px 8px;background:var(--bg-surface);border-radius:4px;font-size:12px}
.expr-bar{height:24px;background:var(--bg-surface);border-radius:6px;overflow:hidden;position:relative}
.expr-fill{height:100%;background:linear-gradient(90deg,var(--acc),#0891B2);transition:width 0.5s ease}
.expr-value{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:600}
.chart-container{position:relative;height:300px}
.chart-axis{stroke:var(--line);stroke-width:1}
.chart-grid{stroke:var(--line);stroke-width:0.5;stroke-dasharray:4}
.chart-line{fill:none;stroke:var(--acc);stroke-width:2}
.chart-area{fill:rgba(20,184,166,0.1)}
.chart-point{fill:var(--acc);r:4}
.chart-tooltip{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px 12px;font-size:12px;pointer-events:none;z-index:10}

/* === ANIMATIONS (201-250) === */
.fade-in{animation:fadeIn 0.3s ease forwards}
.fade-out{animation:fadeOut 0.3s ease forwards}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
.slide-up{animation:slideUp 0.3s ease forwards}
.slide-down{animation:slideDown 0.3s ease forwards}
.slide-left{animation:slideLeft 0.3s ease forwards}
.slide-right{animation:slideRight 0.3s ease forwards}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideDown{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes slideLeft{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slideRight{from{transform:translateX(-20px);opacity:0}to{transform:translateX(0);opacity:1}}
.scale-in{animation:scaleIn 0.2s ease forwards}
@keyframes scaleIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}
.bounce{animation:bounce 0.5s ease}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.shake{animation:shake 0.4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.pulse{animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
.spin{animation:spin 1s linear infinite}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.ping{animation:ping 1s cubic-bezier(0,0,0.2,1) infinite}
@keyframes ping{75%,100%{transform:scale(2);opacity:0}}
.wave{animation:wave 2s ease-in-out infinite}
@keyframes wave{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.progress-indeterminate{background:linear-gradient(90deg,var(--panel) 0%,var(--acc) 50%,var(--panel) 100%);background-size:200% 100%;animation:progress-slide 1.5s linear infinite}
@keyframes progress-slide{from{background-position:200% 0}to{background-position:-200% 0}}
.typewriter{overflow:hidden;border-right:2px solid var(--acc);white-space:nowrap;animation:typewriter 3s steps(40) 1s forwards,blink 0.7s step-end infinite}
@keyframes typewriter{from{width:0}to{width:100%}}
@keyframes blink{50%{border-color:transparent}}
.accordion-enter{max-height:0;overflow:hidden;transition:max-height 0.3s ease-out}
.accordion-enter-active{max-height:500px}
.ripple{position:relative;overflow:hidden}
.ripple::after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,0.3) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10);opacity:0;transition:transform 0.4s,opacity 0.8s}
.ripple:active::after{transform:scale(0);opacity:1;transition:0s}

/* === ACCESSIBILITY (251-300) === */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.skip-link{position:absolute;top:-100px;left:16px;padding:12px 24px;background:var(--acc);color:white;border-radius:0 0 8px 8px;z-index:1001;transition:top 0.2s}
.skip-link:focus{top:0}
@media(prefers-contrast:high){:root{--bg:#000;--panel:#111;--text:#fff;--muted:#ccc;--line:#fff;--acc:#0ff}}
@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}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.not-sr-only{position:static;width:auto;height:auto;padding:0;margin:0;overflow:visible;clip:auto;white-space:normal}
[aria-disabled='true']{cursor:not-allowed;opacity:0.6}
[aria-expanded='false']+.collapsible{display:none}
[aria-expanded='true']+.collapsible{display:block}
.visually-hidden:not(:focus):not(:active){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
[role='alert']{padding:12px 16px;background:rgba(239,68,68,0.1);border:1px solid var(--red);border-radius:8px;color:var(--red)}
[role='status']{padding:12px 16px;background:rgba(34,197,94,0.1);border:1px solid var(--green);border-radius:8px;color:var(--green)}
.color-blind-safe{--cb-1:#0077BB;--cb-2:#33BBEE;--cb-3:#009988;--cb-4:#EE7733;--cb-5:#CC3311;--cb-6:#EE3377}
@media(pointer:coarse){.touch-target{min-height:44px;min-width:44px}}
.keyboard-focus:focus{box-shadow:0 0 0 4px rgba(20,184,166,0.4)}
html{font-size:clamp(14px,calc(14px + 0.25vw),18px)}
.text-scale-sm{font-size:0.875em}
.text-scale-lg{font-size:1.125em}
.text-scale-xl{font-size:1.25em}

/* === RESPONSIVE (301-350) === */
.container{width:100%;margin:0 auto;padding:0 16px}
@media(min-width:640px){.container{max-width:640px;padding:0 24px}}
@media(min-width:768px){.container{max-width:768px}}
@media(min-width:1024px){.container{max-width:1024px}}
@media(min-width:1280px){.container{max-width:1280px}}
@media(min-width:1536px){.container{max-width:1536px}}
.container-fluid{width:100%;padding:0 16px}
h1{font-size:clamp(1.75rem,4vw,2.5rem)}
h2{font-size:clamp(1.5rem,3vw,2rem)}
h3{font-size:clamp(1.25rem,2.5vw,1.5rem)}
.space-y-responsive>*+*{margin-top:clamp(8px,2vw,16px)}
.p-responsive{padding:clamp(12px,3vw,24px)}
.flex-col-mobile{display:flex;gap:16px}
@media(max-width:640px){.flex-col-mobile{flex-direction:column}}
.hide-xs{display:block}@media(max-width:480px){.hide-xs{display:none}}
.hide-sm{display:block}@media(max-width:640px){.hide-sm{display:none}}
.hide-md{display:block}@media(max-width:768px){.hide-md{display:none}}
.hide-lg{display:block}@media(max-width:1024px){.hide-lg{display:none}}
.show-xs{display:none}@media(max-width:480px){.show-xs{display:block}}
.show-sm{display:none}@media(max-width:640px){.show-sm{display:block}}
.show-md{display:none}@media(max-width:768px){.show-md{display:block}}
.img-responsive{max-width:100%;height:auto;display:block}
.aspect-video{aspect-ratio:16/9}
.aspect-square{aspect-ratio:1/1}
.aspect-portrait{aspect-ratio:3/4}
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--panel);border-top:1px solid var(--line);padding:8px 0;z-index:100}
@media(max-width:640px){.bottom-nav{display:flex;justify-content:space-around}}
.bottom-nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;color:var(--muted);font-size:11px;text-decoration:none}
.bottom-nav-item.active{color:var(--acc)}
.mobile-menu{display:none;position:fixed;inset:0;background:var(--bg);z-index:1000;padding:24px}
@media(max-width:640px){.mobile-menu.open{display:block}}
.drawer{position:fixed;top:0;bottom:0;width:280px;background:var(--panel);z-index:1000;transform:translateX(-100%);transition:transform 0.3s ease}
.drawer.open{transform:translateX(0)}
.drawer-right{right:0;left:auto;transform:translateX(100%)}
.drawer-right.open{transform:translateX(0)}
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:999;opacity:0;pointer-events:none;transition:opacity 0.3s}
.drawer.open~.drawer-overlay{opacity:1;pointer-events:auto}

/* === THEMING (351-400) === */
:root{--color-primary-h:173;--color-primary-s:72%;--color-primary-l:40%}
.text-primary{color:hsl(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l))}
.bg-primary{background:hsl(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l))}
.border-primary{border-color:hsl(var(--color-primary-h),var(--color-primary-s),var(--color-primary-l))}
@media(prefers-color-scheme:light){:root{--bg:#FFFFFF;--panel:#F8FAFC;--panel2:#F1F5F9;--bg-surface:#E2E8F0;--text:#1E293B;--muted:#64748B;--line:#CBD5E1}}
body.light{--bg:#FFFFFF;--panel:#F8FAFC;--panel2:#F1F5F9;--bg-surface:#E2E8F0;--text:#1E293B;--muted:#64748B;--line:#CBD5E1}
body.dark{--bg:#0F172A;--panel:#1E293B;--panel2:#334155;--bg-surface:#334155;--text:#F8FAFC;--muted:#94A3B8;--line:#475569}
.theme-transition{transition:background-color 0.3s,color 0.3s,border-color 0.3s}
.gradient-primary{background:linear-gradient(135deg,var(--acc),#0891B2)}
.gradient-secondary{background:linear-gradient(135deg,#8B5CF6,#6366F1)}
.gradient-success{background:linear-gradient(135deg,#22C55E,#16A34A)}
.gradient-warning{background:linear-gradient(135deg,#F59E0B,#D97706)}
.gradient-danger{background:linear-gradient(135deg,#EF4444,#DC2626)}
.glass{background:rgba(255,255,255,0.1);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.2)}
.glass-dark{background:rgba(0,0,0,0.3);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,0.1)}
.shadow-sm{box-shadow:0 1px 2px rgba(0,0,0,0.1)}
.shadow{box-shadow:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)}
.shadow-md{box-shadow:0 6px 12px -2px rgba(0,0,0,0.15),0 3px 6px -2px rgba(0,0,0,0.1)}
.shadow-lg{box-shadow:0 10px 24px -4px rgba(0,0,0,0.2),0 4px 10px -4px rgba(0,0,0,0.1)}
.shadow-xl{box-shadow:0 20px 40px -8px rgba(0,0,0,0.25),0 8px 16px -8px rgba(0,0,0,0.15)}
.shadow-glow{box-shadow:0 0 20px rgba(20,184,166,0.3)}
.shadow-inner{box-shadow:inset 0 2px 4px rgba(0,0,0,0.1)}
.syntax-keyword{color:#C792EA}
.syntax-string{color:#C3E88D}
.syntax-number{color:#F78C6C}
.syntax-comment{color:#546E7A}
.syntax-function{color:#82AAFF}
.syntax-variable{color:#F07178}
.syntax-operator{color:#89DDFF}

/* === COMPONENTS (401-450) === */
.toast-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:12px;z-index:1001;pointer-events:none}
.toast{padding:14px 20px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.3);animation:slideRight 0.3s ease;pointer-events:auto;display:flex;align-items:center;gap:12px;max-width:400px}
.toast-success{border-left:4px solid var(--green)}
.toast-error{border-left:4px solid var(--red)}
.toast-warning{border-left:4px solid var(--orange)}
.toast-info{border-left:4px solid var(--acc)}
.tooltip{position:relative}
.tooltip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:8px 12px;background:#1E293B;color:white;font-size:12px;border-radius:6px;white-space:nowrap;opacity:0;visibility:hidden;transition:all 0.2s;z-index:100}
.tooltip::before{content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#1E293B;opacity:0;visibility:hidden;transition:all 0.2s}
.tooltip:hover::after,.tooltip:hover::before{opacity:1;visibility:visible}
.popover{position:absolute;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,0.3);padding:12px;min-width:200px;z-index:100}
.popover-arrow{position:absolute;width:12px;height:12px;background:var(--panel);border:1px solid var(--line);border-right:none;border-bottom:none;transform:rotate(45deg)}
.dropdown{position:relative;display:inline-block}
.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;min-width:180px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,0.3);z-index:100;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all 0.2s}
.dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-item{padding:10px 14px;border-radius:6px;cursor:pointer;transition:background 0.15s}
.dropdown-item:hover{background:var(--bg-surface)}
.dropdown-divider{height:1px;background:var(--line);margin:6px 0}
.badge{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;font-size:11px;font-weight:600;border-radius:20px}
.badge-sm{padding:2px 8px;font-size:10px}
.badge-lg{padding:6px 14px;font-size:13px}
.badge-primary{background:rgba(20,184,166,0.15);color:var(--acc)}
.badge-secondary{background:rgba(139,92,246,0.15);color:#8B5CF6}
.badge-success{background:rgba(34,197,94,0.15);color:var(--green)}
.badge-warning{background:rgba(249,115,22,0.15);color:var(--orange)}
.badge-danger{background:rgba(239,68,68,0.15);color:var(--red)}
.badge-gray{background:var(--bg-surface);color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:var(--bg-surface);border-radius:20px;font-size:13px}
.chip-avatar{width:24px;height:24px;border-radius:50%;margin-left:-6px}
.chip-remove{cursor:pointer;opacity:0.6;margin-right:-4px}
.chip-remove:hover{opacity:1}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--acc),#0891B2);color:white;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:16px;flex-shrink:0}
.avatar-xs{width:24px;height:24px;font-size:10px}
.avatar-sm{width:32px;height:32px;font-size:12px}
.avatar-lg{width:56px;height:56px;font-size:20px}
.avatar-xl{width:72px;height:72px;font-size:28px}
.avatar-group{display:flex}
.avatar-group .avatar{margin-left:-10px;border:3px solid var(--bg)}
.avatar-group .avatar:first-child{margin-left:0}
.progress{height:8px;background:var(--bg-surface);border-radius:4px;overflow:hidden}
.progress-sm{height:4px}
.progress-lg{height:12px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--acc),#0891B2);border-radius:4px;transition:width 0.5s ease}
.progress-striped .progress-fill{background-image:linear-gradient(45deg,rgba(255,255,255,0.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,0.15) 50%,rgba(255,255,255,0.15) 75%,transparent 75%,transparent);background-size:16px 16px}
.progress-animated .progress-fill{animation:progress-stripes 1s linear infinite}
@keyframes progress-stripes{from{background-position:16px 0}to{background-position:0 0}}
.stepper{display:flex;align-items:center}
.step{display:flex;align-items:center;gap:10px}
.step-number{width:36px;height:36px;border-radius:50%;background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;transition:all 0.2s}
.step.active .step-number{background:var(--acc);color:white}
.step.complete .step-number{background:var(--green);color:white}
.step-label{font-size:13px;font-weight:500}
.step-line{flex:1;height:2px;background:var(--bg-surface);margin:0 12px}
.step.complete+.step-line{background:var(--green)}
.alert{padding:16px 20px;border-radius:10px;display:flex;align-items:flex-start;gap:14px}
.alert-icon{font-size:20px;flex-shrink:0}
.alert-content{flex:1}
.alert-title{font-weight:600;margin-bottom:4px}
.alert-close{cursor:pointer;opacity:0.6;font-size:18px}
.alert-close:hover{opacity:1}
.alert-success{background:rgba(34,197,94,0.1);border:1px solid var(--green);color:var(--green)}
.alert-warning{background:rgba(249,115,22,0.1);border:1px solid var(--orange);color:var(--orange)}
.alert-danger{background:rgba(239,68,68,0.1);border:1px solid var(--red);color:var(--red)}
.alert-info{background:rgba(20,184,166,0.1);border:1px solid var(--acc);color:var(--acc)}

/* === MICRO-INTERACTIONS (451-500) === */
button{transition:all 0.15s ease}
button:active:not(:disabled){transform:scale(0.98)}
.btn-icon{padding:10px;border-radius:8px}
.btn-icon:hover{background:var(--bg-surface)}
.link{color:var(--acc);text-decoration:none;transition:all 0.15s}
.link:hover{text-decoration:underline}
.link-subtle{color:var(--muted)}
.link-subtle:hover{color:var(--text)}
.link-animated{position:relative;display:inline-block}
.link-animated::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background:var(--acc);transition:width 0.2s}
.link-animated:hover::after{width:100%}
input,textarea,select{transition:border-color 0.15s,box-shadow 0.15s}
.input-glow:focus{box-shadow:0 0 0 4px rgba(20,184,166,0.2),0 0 16px rgba(20,184,166,0.1)}
.card-interactive{cursor:pointer}
.card-interactive:hover{transform:translateY(-4px)}
.card-interactive:active{transform:translateY(-2px)}
.list-item{padding:14px 16px;border-bottom:1px solid var(--line);transition:background 0.15s}
.list-item:hover{background:var(--bg-surface)}
.list-item:last-child{border-bottom:none}
.icon{transition:transform 0.2s,color 0.15s}
.icon-spin:hover{transform:rotate(180deg)}
.icon-bounce:hover{animation:iconBounce 0.4s ease}
@keyframes iconBounce{50%{transform:scale(1.2)}}
.notification-dot{position:relative}
.notification-dot::after{content:'';position:absolute;top:0;right:0;width:10px;height:10px;background:var(--red);border-radius:50%;border:2px solid var(--bg)}
.notification-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;background:var(--red);color:white;border-radius:9px;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center}
.expand-indicator{transition:transform 0.2s}
.expanded .expand-indicator{transform:rotate(180deg)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.spinner{width:24px;height:24px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:spin 0.8s linear infinite}
.spinner-sm{width:16px;height:16px;border-width:2px}
.spinner-lg{width:32px;height:32px;border-width:4px}
.loading-dots::after{content:'...';animation:loadingDots 1.5s steps(4) infinite}
@keyframes loadingDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
::selection{background:rgba(20,184,166,0.3)}
::placeholder{color:var(--muted);opacity:0.7}
html{scroll-behavior:smooth}
.cursor-pointer{cursor:pointer}
.cursor-not-allowed{cursor:not-allowed}
.select-none{user-select:none}
.select-all{user-select:all}