html { -webkit-tap-highlight-color: transparent; }
body { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.page-shell { max-width: 480px; margin: 0 auto; min-height: 100vh; }
.card { background: #fff; border: 1px solid rgba(226,232,240,.9); border-radius: 1.75rem; box-shadow: 0 18px 45px rgba(15, 23, 42, .08); }
.dark .card { background: #0f172a; border-color: #1e293b; }
.input { width: 100%; border-radius: 1.25rem; border: 1px solid #e2e8f0; padding: .85rem 1rem; background: #fff; outline: none; }
.input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 12%, transparent); }
.dark .input { background: #020617; border-color: #1e293b; color: #fff; }
.label { display: block; margin-bottom: .4rem; font-size: .8rem; font-weight: 800; color: #64748b; }
.btn-primary { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:1.25rem; background:var(--color-primary); color:#fff; font-weight:900; padding:.9rem 1.2rem; box-shadow:0 12px 30px color-mix(in srgb, var(--color-primary) 28%, transparent); }
.btn-soft { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:1.25rem; background:color-mix(in srgb, var(--color-primary) 10%, white); color:var(--color-primary); font-weight:900; padding:.85rem 1rem; }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:.35rem .65rem; font-size:.72rem; font-weight:900; }
.bottom-nav { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(92vw, 460px); height: 76px; background: rgba(255,255,255,.92); backdrop-filter: blur(18px); border: 1px solid rgba(226,232,240,.9); border-radius: 2rem; box-shadow: 0 20px 45px rgba(15,23,42,.15); display:flex; align-items:center; justify-content:space-around; z-index:50; }
.dark .bottom-nav { background: rgba(15,23,42,.9); border-color:#1e293b; }
.bottom-nav-item { color:#94a3b8; font-size:.67rem; font-weight:800; display:flex; flex-direction:column; align-items:center; gap:.25rem; min-width:56px; }
.bottom-nav-item svg { width:22px; height:22px; }
.bottom-nav-item.active { color: var(--color-primary); }
.bottom-nav-add { margin-top:-38px; width:64px; height:64px; border-radius:24px; background:var(--color-primary); color:white; display:grid; place-items:center; box-shadow:0 18px 35px color-mix(in srgb, var(--color-primary) 35%, transparent); border:6px solid #fff; }
.dark .bottom-nav-add { border-color:#0f172a; }
.bottom-nav-add svg { width:30px; height:30px; }
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 80; width:min(92vw,440px); border-radius:1.25rem; padding:.9rem 1rem; font-size:.88rem; font-weight:800; box-shadow:0 16px 38px rgba(15,23,42,.16); }
.toast-success { background:#ecfdf5; color:#047857; }
.toast-error { background:#fef2f2; color:#b91c1c; }
.toast-warning { background:#fffbeb; color:#b45309; }
.admin-link { display:block; padding:.8rem 1rem; border-radius:1rem; color:#475569; }
.admin-link.active, .admin-link:hover { background: color-mix(in srgb, var(--color-primary) 10%, white); color: var(--color-primary); }
.phone-mockup { width: 290px; min-height: 580px; border-radius: 3rem; border: 10px solid #0f172a; background: #f8fafc; box-shadow: 0 30px 80px rgba(15,23,42,.25); overflow:hidden; }
@media (max-width: 640px) { .phone-mockup { width: 250px; min-height: 520px; } }