/* shared-ui.css - Splash + Hamburger + Modern Components */
*{box-sizing:border-box;margin:0;padding:0;}
body{background:#0a0a1a;color:#fff;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;overflow-x:hidden;}

/* ===== SPLASH ===== */
.fsn-splash{position:fixed;inset:0;background:#0a0a1a;z-index:99999;display:flex;align-items:center;justify-content:center;}
.fsn-splash-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(249,115,22,0.2)0%,transparent 70%);animation:splashPulse 2s ease-in-out infinite;}
@keyframes splashPulse{0%,100%{transform:scale(1);opacity:0.8;}50%{transform:scale(1.2);opacity:1;}}
.fsn-splash-inner{position:relative;text-align:center;animation:splashIn 800ms cubic-bezier(0.16,1,0.3,1);}
@keyframes splashIn{from{opacity:0;transform:translateY(20px) scale(0.9);}to{opacity:1;transform:translateY(0) scale(1);}}
.fsn-splash-logo{width:120px;height:120px;border-radius:28px;margin:0 auto 24px;box-shadow:0 0 60px rgba(249,115,22,0.5);animation:logoFloat 2s ease-in-out infinite;}
@keyframes logoFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.fsn-splash-title{font-size:32px;font-weight:800;letter-spacing:-0.03em;background:linear-gradient(135deg,#f97316,#ec4899);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px;}
.fsn-splash-sub{font-size:14px;color:rgba(255,255,255,0.5);margin-bottom:24px;}
.fsn-splash-loader{width:32px;height:32px;margin:0 auto;border:3px solid rgba(249,115,22,0.2);border-top-color:#f97316;border-radius:50%;animation:spin 600ms linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.fsn-splash.fadeout{animation:fadeOut 400ms ease-out forwards;}
@keyframes fadeOut{to{opacity:0;pointer-events:none;}}

/* ===== HAMBURGER ===== */
.fsn-burger{position:fixed;top:16px;left:16px;z-index:1000;width:42px;height:42px;border-radius:12px;background:rgba(0,0,0,0.6);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;}
.fsn-burger svg{width:22px;height:22px;}
.fsn-burger:active{transform:scale(0.95);}

.fsn-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:9998;opacity:0;pointer-events:none;transition:opacity 300ms ease;}
.fsn-drawer-overlay.open{opacity:1;pointer-events:auto;}

.fsn-drawer{position:fixed;top:0;left:0;bottom:0;width:300px;max-width:85vw;background:linear-gradient(180deg,#0d1117 0%,#16213e 100%);z-index:9999;transform:translateX(-100%);transition:transform 300ms cubic-bezier(0.16,1,0.3,1);overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,20px);}
.fsn-drawer.open{transform:translateX(0);}

.fsn-drawer-header{padding:20px;border-bottom:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;gap:12px;}
.fsn-drawer-header img{width:44px;height:44px;border-radius:12px;}
.fsn-drawer-header-text h3{font-size:16px;font-weight:700;margin-bottom:2px;}
.fsn-drawer-header-text p{font-size:12px;color:rgba(255,255,255,0.5);}

.fsn-drawer-section{padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.fsn-drawer-section-title{font-size:11px;font-weight:600;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:0.05em;padding:8px 20px;}

.fsn-drawer-item{display:flex;align-items:center;gap:12px;padding:12px 20px;color:rgba(255,255,255,0.85);text-decoration:none;cursor:pointer;transition:background 200ms ease;border:none;background:transparent;width:100%;font-family:inherit;font-size:15px;text-align:left;}
.fsn-drawer-item:hover{background:rgba(255,255,255,0.05);}
.fsn-drawer-item.active{background:rgba(249,115,22,0.1);color:#f97316;border-left:3px solid #f97316;padding-left:17px;}
.fsn-drawer-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:18px;}
.fsn-drawer-arrow{margin-left:auto;color:rgba(255,255,255,0.3);}

.fsn-drawer-search{padding:12px 20px;}
.fsn-drawer-search input{width:100%;padding:10px 14px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:10px;color:#fff;font-size:13px;font-family:inherit;}
.fsn-drawer-search input:focus{outline:none;border-color:#f97316;}
.fsn-drawer-search input::placeholder{color:rgba(255,255,255,0.3);}

/* ===== 3D FEATURE CARDS ===== */
.fsn-3d-icon{width:80px;height:80px;border-radius:20px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.fsn-3d-icon::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.2)0%,transparent 50%);}
.fsn-3d-icon::after{content:'';position:absolute;bottom:-20px;left:-20px;width:80px;height:80px;background:radial-gradient(circle,rgba(255,255,255,0.15)0%,transparent 70%);}
.fsn-3d-icon svg{width:50px;height:50px;filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3));position:relative;z-index:1;}

/* ===== GRADIENTS ===== */
.gr-orange{background:linear-gradient(135deg,#f97316,#ec4899);}
.gr-blue{background:linear-gradient(135deg,#3b82f6,#06b6d4);}
.gr-purple{background:linear-gradient(135deg,#a855f7,#ec4899);}
.gr-green{background:linear-gradient(135deg,#16a34a,#06b6d4);}
.gr-yellow{background:linear-gradient(135deg,#eab308,#f59e0b);}
.gr-red{background:linear-gradient(135deg,#dc2626,#f97316);}

/* ===== BUTTONS ===== */
.btn-grad{padding:16px 32px;background:linear-gradient(135deg,#f97316,#ec4899);color:white;border:none;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 8px 24px rgba(249,115,22,0.4);transition:transform 200ms ease;font-family:inherit;}
.btn-grad:active{transform:scale(0.97);}
.btn-glass{padding:16px 32px;background:rgba(255,255,255,0.08);color:white;border:1px solid rgba(255,255,255,0.15);border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);font-family:inherit;}
