/* ============================================
   FlowHub - Base / Reset / Common Styles
   ============================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{font-size:16px;-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}

body{font-family:var(--font-sans);font-size:var(--text-base);line-height:var(--leading-normal);color:var(--text-primary);background-color:var(--color-bg-primary);min-height:100vh;overflow-x:hidden}

body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse 600px 400px at 10% 20%,rgba(99,102,241,0.05) 0%,transparent 70%),radial-gradient(ellipse 500px 500px at 80% 80%,rgba(59,130,246,0.04) 0%,transparent 70%),radial-gradient(ellipse 400px 300px at 50% 50%,rgba(139,92,246,0.03) 0%,transparent 70%);pointer-events:none;z-index:-1}

h1,h2,h3,h4,h5,h6{font-weight:var(--weight-semibold);line-height:var(--leading-tight);color:var(--text-primary)}
h1{font-size:var(--text-4xl)}
h2{font-size:var(--text-3xl)}
h3{font-size:var(--text-2xl)}
h4{font-size:var(--text-xl)}
h5{font-size:var(--text-lg)}
h6{font-size:var(--text-md)}

p{color:var(--text-secondary);line-height:var(--leading-relaxed)}

a{color:var(--color-accent);text-decoration:none;transition:color var(--transition-fast)}
a:hover{color:var(--color-accent-hover)}

img,svg{display:block;max-width:100%}
ul,ol{list-style:none}

button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;border:none;outline:none;background:none}
button{cursor:pointer}

table{border-collapse:collapse;width:100%}

hr{border:none;border-top:1px solid var(--divider);margin:var(--space-lg) 0}

code,pre{font-family:var(--font-mono)}
code{font-size:var(--text-sm);padding:2px 6px;background:var(--glass-bg-lighter);border-radius:var(--radius-sm);color:var(--color-accent-hover)}
pre{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-md);overflow-x:auto}
pre code{background:none;padding:0}

::selection{background:var(--color-accent-muted);color:var(--text-primary)}
::placeholder{color:var(--text-muted)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

.container{width:100%;max-width:var(--container-max);margin:0 auto;padding:0 var(--space-lg)}

.text-center{text-align:center}
.text-left{text-align:left}
.text-right{text-align:right}

.text-primary{color:var(--text-primary)}
.text-secondary{color:var(--text-secondary)}
.text-muted{color:var(--text-muted)}
.text-accent{color:var(--color-accent)}
.text-success{color:var(--color-success)}
.text-danger{color:var(--color-danger)}
.text-warning{color:var(--color-warning)}
.text-info{color:var(--color-info)}

.font-medium{font-weight:var(--weight-medium)}
.font-semibold{font-weight:var(--weight-semibold)}
.font-bold{font-weight:var(--weight-bold)}

.text-xs{font-size:var(--text-xs)}
.text-sm{font-size:var(--text-sm)}
.text-base{font-size:var(--text-base)}
.text-md{font-size:var(--text-md)}
.text-lg{font-size:var(--text-lg)}
.text-xl{font-size:var(--text-xl)}

.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-1{flex:1}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.gap-xs{gap:var(--space-xs)}
.gap-sm{gap:var(--space-sm)}
.gap-md{gap:var(--space-md)}
.gap-lg{gap:var(--space-lg)}
.gap-xl{gap:var(--space-xl)}

.grid{display:grid}

.mt-xs{margin-top:var(--space-xs)}
.mt-sm{margin-top:var(--space-sm)}
.mt-md{margin-top:var(--space-md)}
.mt-lg{margin-top:var(--space-lg)}
.mt-xl{margin-top:var(--space-xl)}
.mb-xs{margin-bottom:var(--space-xs)}
.mb-sm{margin-bottom:var(--space-sm)}
.mb-md{margin-bottom:var(--space-md)}
.mb-lg{margin-bottom:var(--space-lg)}
.mb-xl{margin-bottom:var(--space-xl)}

.p-sm{padding:var(--space-sm)}
.p-md{padding:var(--space-md)}
.p-lg{padding:var(--space-lg)}
.p-xl{padding:var(--space-xl)}

.px-sm{padding-left:var(--space-sm);padding-right:var(--space-sm)}
.px-md{padding-left:var(--space-md);padding-right:var(--space-md)}
.px-lg{padding-left:var(--space-lg);padding-right:var(--space-lg)}

.py-sm{padding-top:var(--space-sm);padding-bottom:var(--space-sm)}
.py-md{padding-top:var(--space-md);padding-bottom:var(--space-md)}
.py-lg{padding-top:var(--space-lg);padding-bottom:var(--space-lg)}

.hidden{display:none !important}
.block{display:block}
.inline{display:inline}
.inline-block{display:inline-block}

.overflow-hidden{overflow:hidden}
.overflow-auto{overflow:auto}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.w-full{width:100%}
.h-full{height:100%}

.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.sticky{position:sticky}

.rounded-sm{border-radius:var(--radius-sm)}
.rounded-md{border-radius:var(--radius-md)}
.rounded-lg{border-radius:var(--radius-lg)}
.rounded-xl{border-radius:var(--radius-xl)}
.rounded-full{border-radius:var(--radius-full)}

.transition{transition:all var(--transition-normal)}
.transition-fast{transition:all var(--transition-fast)}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

.animate-fade-in{animation:fadeIn 0.3s ease-out}
.animate-fade-in-up{animation:fadeInUp 0.3s ease-out}
.animate-fade-in-down{animation:fadeInDown 0.3s ease-out}
.animate-scale-in{animation:scaleIn 0.25s ease-out}
.animate-spin{animation:spin 1s linear infinite}
.animate-pulse{animation:pulse 2s ease-in-out infinite}

.skeleton{background:linear-gradient(90deg,var(--glass-bg-light) 25%,var(--glass-bg-lighter) 50%,var(--glass-bg-light) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm)}

.divider{width:100%;height:1px;background:var(--divider);margin:var(--space-md) 0}

@media(max-width:768px){:root{--content-padding:var(--space-md)}.container{padding:0 var(--space-md)}.hide-mobile{display:none !important}}
@media(min-width:769px){.hide-desktop{display:none !important}}