* { margin:0; padding:0; box-sizing:border-box; font-family:'Inter','Segoe UI',sans-serif; -webkit-tap-highlight-color:transparent; }

:root {
   --bg:#07050f;
   --glass:rgba(25,18,45,0.6);
   --glass-border:rgba(168,85,247,0.2);
   --accent:#a855f7;
   --accent-2:#7c3aed;
   --text:#fff;
   --text-dim:#b6a8d8;
   --radius:20px;
   --nav-height:72px;
}

html, body {
   background:var(--bg);
   color:var(--text);
   min-height:100vh;
   overflow-x:hidden;
   font-size:14px;
   position:relative;
   -webkit-font-smoothing:antialiased;
}

body { padding-bottom:calc(var(--nav-height) + 20px); }

/* BG */
.bg-layer { position:fixed; inset:0; z-index:-3; overflow:hidden; pointer-events:none; }
.bg-grid {
   position:absolute; inset:0;
   background-image:
      linear-gradient(rgba(168,85,247,0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(168,85,247,0.07) 1px, transparent 1px);
   background-size:32px 32px;
   animation: gridMove 20s linear infinite;
}
@keyframes gridMove {
   from { background-position:0 0; }
   to { background-position:32px 32px; }
}
.bg-glow {
   position:absolute;
   width:450px; height:450px;
   border-radius:50%;
   filter:blur(140px);
   animation: glowFloat 12s ease-in-out infinite;
}
.glow-1 { top:-150px; left:-100px; background:rgba(168,85,247,0.4); }
.glow-2 { bottom:-150px; right:-100px; background:rgba(59,130,246,0.3); animation-delay:-4s; }
.glow-3 { top:40%; left:50%; background:rgba(236,72,153,0.2); animation-delay:-8s; }
@keyframes glowFloat {
   0%,100% { transform: translate(0,0) scale(1); }
   33% { transform: translate(40px,-30px) scale(1.1); }
   66% { transform: translate(-30px,20px) scale(0.95); }
}

/* ===== AUTH ===== */
.auth-page { display:flex; flex-direction:column; min-height:100vh; }
.auth-banner {
   position:relative;
   width:100%;
   overflow:hidden;
   flex-shrink:0;
}
.auth-banner img {
   width:100%;
   height:200px;
   object-fit:cover;
   display:block;
}
.banner-fade {
   position:absolute;
   inset:0;
   background:linear-gradient(180deg, transparent 0%, rgba(7,5,15,0.7) 70%, var(--bg) 100%);
}
.auth-wrap {
   flex:1;
   display:flex;
   align-items:flex-start;
   justify-content:center;
   padding:0 20px 40px;
   margin-top:-60px;
   position:relative;
   z-index:2;
}
.auth-card {
   width:100%;
   max-width:420px;
   padding:26px 22px;
   text-align:center;
}
.auth-logo { margin-bottom:20px; }
.auth-logo .logo-icon {
   font-size:36px;
   color:var(--accent);
   filter:drop-shadow(0 0 15px var(--accent));
   margin-bottom:8px;
}
.auth-logo h1 { font-size:19px; font-weight:800; letter-spacing:0.5px; }
.auth-logo p { font-size:11px; color:var(--text-dim); margin-top:2px; }

.auth-tabs {
   display:flex;
   gap:5px;
   background:rgba(255,255,255,0.04);
   border:1px solid var(--glass-border);
   border-radius:14px;
   padding:4px;
   margin-bottom:18px;
}
.tab-btn {
   flex:1;
   padding:10px 8px;
   border:none;
   background:transparent;
   color:var(--text-dim);
   font-weight:600;
   font-size:12.5px;
   border-radius:10px;
   cursor:pointer;
   transition:0.3s;
   display:flex; align-items:center; justify-content:center; gap:6px;
}
.tab-btn.active {
   background:linear-gradient(135deg, var(--accent), var(--accent-2));
   color:#fff;
   box-shadow:0 4px 15px rgba(168,85,247,0.4);
}
.tab-content { display:none; }
.tab-content.active { display:block; animation:fadeUp 0.35s ease; }
@keyframes fadeUp {
   from { opacity:0; transform:translateY(12px); }
   to { opacity:1; transform:translateY(0); }
}

.input-group {
   display:flex; align-items:center; gap:12px;
   background:rgba(255,255,255,0.04);
   border:1px solid var(--glass-border);
   border-radius:14px;
   padding:12px 14px;
   margin-bottom:10px;
   transition:0.3s;
}
.input-group:focus-within {
   border-color:var(--accent);
   box-shadow:0 0 0 3px rgba(168,85,247,0.15);
}
.input-group i { color:var(--text-dim); font-size:13px; width:16px; text-align:center; }
.input-group input {
   flex:1;
   background:transparent;
   border:none;
   outline:none;
   color:#fff;
   font-size:13.5px;
}
.input-group input::placeholder { color:var(--text-dim); }

.btn-primary {
   width:100%;
   padding:13px;
   border:none;
   border-radius:14px;
   background:linear-gradient(135deg, var(--accent), var(--accent-2));
   color:#fff;
   font-size:13.5px;
   font-weight:700;
   cursor:pointer;
   transition:0.3s;
   display:flex; align-items:center; justify-content:center; gap:8px;
   margin-top:6px;
}
.btn-primary:active { transform:scale(0.97); }
.btn-primary:disabled { opacity:0.6; cursor:not-allowed; }

.btn-google {
   width:100%;
   padding:12px;
   border:1px solid rgba(255,255,255,0.15);
   background:rgba(255,255,255,0.05);
   border-radius:14px;
   color:#fff;
   font-size:13px;
   font-weight:600;
   cursor:pointer;
   transition:0.3s;
   display:flex;
   align-items:center;
   justify-content:center;
   gap:10px;
}
.btn-google:hover { background:rgba(255,255,255,0.1); }
.btn-google:active { transform:scale(0.97); }

.divider {
   display:flex;
   align-items:center;
   gap:10px;
   margin:16px 0;
   color:var(--text-dim);
   font-size:10.5px;
   letter-spacing:1px;
}
.divider::before,
.divider::after {
   content:'';
   flex:1;
   height:1px;
   background:rgba(255,255,255,0.08);
}
.auth-footer {
   margin-top:18px;
   font-size:10px;
   color:var(--text-dim);
   letter-spacing:0.5px;
}

/* ===== APP ===== */
.app-page { padding-top:0; }

.app-header {
   position:sticky;
   top:0;
   z-index:40;
   display:flex;
   align-items:center;
   justify-content:space-between;
   padding:12px 16px;
   margin:10px 12px 0;
   border-radius:18px;
}
.header-user { display:flex; align-items:center; gap:10px; }
.avatar-mini {
   width:38px; height:38px;
   border-radius:50%;
   background:linear-gradient(135deg, var(--accent), var(--accent-2));
   display:flex; align-items:center; justify-content:center;
   font-weight:700;
   font-size:15px;
   box-shadow:0 0 15px rgba(168,85,247,0.5);
}
.header-user h5 { font-size:13px; font-weight:700; }
.header-user span { font-size:10px; color:var(--text-dim); }
.header-actions { display:flex; gap:6px; }
.icon-btn {
   width:38px; height:38px;
   border-radius:12px;
   background:rgba(255,255,255,0.05);
   border:1px solid var(--glass-border);
   color:#fff;
   cursor:pointer;
   font-size:14px;
   transition:0.25s;
}
.icon-btn:active { transform:scale(0.9); }
.icon-btn:hover { background:rgba(168,85,247,0.2); }

.app-content {
   padding:16px 12px 20px;
   min-height:calc(100vh - 200px);
}

/* ===== BOTTOM NAV ===== */
.bottom-nav {
   position:fixed;
   left:10px; right:10px;
   bottom:10px;
   height:var(--nav-height);
   display:flex;
   align-items:center;
   justify-content:space-around;
   padding:0 4px;
   z-index:50;
   border-radius:22px;
}
.bottom-nav .nav-item {
   flex:1;
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:center;
   gap:3px;
   color:var(--text-dim);
   font-size:9px;
   background:transparent;
   border:none;
   cursor:pointer;
   padding:8px 2px;
   border-radius:14px;
   transition:0.3s cubic-bezier(0.34,1.56,0.64,1);
   position:relative;
   font-family:inherit;
}
.bottom-nav .nav-item i {
   font-size:16px;
   transition:0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.bottom-nav .nav-item.active {
   color:#fff;
   transform:translateY(-5px);
}
.bottom-nav .nav-item.active i {
   font-size:20px;
   filter:drop-shadow(0 0 10px var(--accent));
   color:var(--accent);
}
.bottom-nav .nav-item.active::before {
   content:'';
   position:absolute;
   top:-2px;
   width:24px; height:3px;
   border-radius:3px;
   background:var(--accent);
   box-shadow:0 0 10px var(--accent);
}