:root{--nav-active:#fbbf24;--nav-inactive:#6b7280;--bg-color:#0a0a0a;--card-shadow:0 8px 24px rgba(0,0,0,0.5);--nav-shadow:0 -4px 20px rgba(0,0,0,0.8);--header-shadow:0 4px 12px rgba(0,0,0,0.5)}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:system-ui,-apple-system,sans-serif;background-color:var(--bg-color);color:#fff;overflow-x:hidden}
.app-container{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;animation:fadeIn .4s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.top-header{position:fixed;top:0;left:0;width:100%;height:60px;background:#000;display:flex;justify-content:center;align-items:center;box-shadow:var(--header-shadow);z-index:999;border-bottom:1px solid #1f1f1f}
.brand-logo{height:40px;width:auto;object-fit:contain}
.content-area{flex:1;padding:76px 16px 100px 16px;width:100%;max-width:600px;margin:0 auto}
#cards-container{display:flex;flex-direction:column;gap:16px}
.page-placeholder{display:flex;flex-direction:column;justify-content:center;align-items:center;height:60vh;color:#6b7280;text-align:center}
.page-placeholder i{font-size:48px;margin-bottom:16px;color:#374151}
.card{position:relative;width:100%;aspect-ratio:2.85/1;border-radius:18px;display:flex;align-items:center;padding:0 20px;color:#fff;overflow:hidden;box-shadow:var(--card-shadow);transition:transform .2s,box-shadow .2s;cursor:pointer}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.7)}
.card-icon{font-size:32px;width:50px;display:flex;justify-content:flex-start;align-items:center;z-index:1}
.card-text{flex:1;display:flex;flex-direction:column;justify-content:center;z-index:1}
.card-text h2{font-size:20px;font-weight:800;letter-spacing:.5px;margin-bottom:2px}
.card-text p{font-size:13px;font-weight:500;opacity:.9;letter-spacing:.3px}
.card-action{display:flex;justify-content:flex-end;align-items:center;z-index:1}
.circle-arrow{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;justify-content:center;align-items:center;font-size:16px}
.bottom-nav{position:fixed;bottom:0;left:0;width:100%;height:72px;background-color:#111;border-radius:24px 24px 0 0;display:flex;justify-content:space-between;align-items:center;padding:0 8px;box-shadow:var(--nav-shadow);z-index:1000;border-top:1px solid #1f1f1f}
.nav-item{flex:1;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;color:var(--nav-inactive);font-size:10px;font-weight:700;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}
.nav-item i{font-size:20px;transition:transform .3s}
.nav-item.active{color:var(--nav-active)}
.nav-item.active i{transform:translateY(-2px)}
.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple-effect .6s linear;pointer-events:none;z-index:0}
.ripple-white{background-color:rgba(255,255,255,.3)}
.ripple-dark{background-color:rgba(251,191,36,.15)}
@keyframes ripple-effect{to{transform:scale(4);opacity:0}}