/* MBSM Shortener Master CSS */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:"Inter",-apple-system,sans-serif;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#fff;min-height:100vh;}
.wrapper{min-height:100vh;display:flex;flex-direction:column;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
.main-header{background:rgba(0,0,0,0.3);backdrop-filter:blur(10px);padding:15px 0;position:sticky;top:0;z-index:100;}
.main-header .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:15px;}
.logo a{display:flex;align-items:center;gap:10px;text-decoration:none;}
.logo-img{height:40px;}
.logo-text{font-size:1.5rem;font-weight:800;color:#fff;}
.logo-text span{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.byline{font-size:0.7rem;color:#94a3b8;}
.main-nav{display:flex;gap:25px;}
.main-nav a{color:#e2e8f0;text-decoration:none;transition:color 0.3s;}
.main-nav a:hover{color:#667eea;}
.main-content{flex:1;padding:40px 0;}
.hero-section{text-align:center;padding:60px 0;}
.hero-section h1{font-size:clamp(2rem,5vw,3.5rem);margin-bottom:20px;}
.gradient{background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.hero-subtitle{font-size:1.2rem;color:#94a3b8;margin-bottom:40px;}
.shortener-form{display:flex;gap:15px;max-width:700px;margin:0 auto;flex-wrap:wrap;}
.url-input,.custom-input{flex:1;padding:16px 20px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:12px;color:#fff;font-size:16px;}
.btn-primary,.btn-secondary{padding:16px 24px;border:none;border-radius:12px;font-weight:700;cursor:pointer;}
.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;}
.btn-secondary{background:rgba(255,255,255,0.1);color:#fff;}
.result-area{max-width:700px;margin:20px auto;padding:20px;background:rgba(255,255,255,0.1);border-radius:16px;display:none;}
.success-result{text-align:center;}
.short-url{display:flex;gap:10px;justify-content:center;margin-top:15px;flex-wrap:wrap;}
.copy-btn,.qr-btn{padding:8px 16px;border:none;border-radius:8px;cursor:pointer;}
.copy-btn{background:#10b981;color:#fff;}
.qr-btn{background:#8b5cf6;color:#fff;}
.stats-section{padding:40px 0;}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;}
.stat-card{background:rgba(255,255,255,0.05);padding:30px;text-align:center;border-radius:20px;}
.stat-number{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.stat-label{margin-top:10px;color:#94a3b8;}
.features-section{padding:60px 0;}
.section-title{text-align:center;font-size:2rem;margin-bottom:40px;}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;}
.feature{background:rgba(255,255,255,0.05);padding:30px;text-align:center;border-radius:20px;transition:transform 0.3s;}
.feature:hover{transform:translateY(-5px);}
.feature-icon{font-size:3rem;margin-bottom:15px;}
.main-footer{background:rgba(0,0,0,0.5);padding:50px 0 20px;margin-top:auto;}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:40px;margin-bottom:40px;}
.footer-col h4{margin-bottom:15px;color:#667eea;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:8px;}
.footer-col a{color:#94a3b8;text-decoration:none;transition:color 0.3s;}
.footer-col a:hover{color:#667eea;}
.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid rgba(255,255,255,0.05);color:#64748b;font-size:0.85rem;}
@media (max-width:768px){.main-header .container{flex-direction:column;text-align:center;}.shortener-form{flex-direction:column;}.stats-grid{grid-template-columns:repeat(2,1fr);}.features-grid{grid-template-columns:1fr;}}