:root{--bg-body:#ffffff;--text-main:#0f172a;--accent-gold:#D4AF37;--accent-black:#000000;--muted:#64748b}
body{font-family:'Inter',sans-serif;background:var(--bg-body);color:var(--text-main);-webkit-tap-highlight-color:transparent;margin:0}

/* TYPOGRAPHY */
.brand-logo { display: flex; align-items: center; justify-content: center; line-height: 1; }
.brand-serif { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 500; letter-spacing: -0.03em; }
.brand-sans { font-family: 'Inter', sans-serif; font-weight: 900; letter-spacing: -0.05em; margin-left: -0.15em; }

/* ANIMATIONS & UTILS */
.fade-in{animation:fadeIn .6s cubic-bezier(.16,1,.3,1) forwards;opacity:0;transform:translateY(10px)}@keyframes fadeIn{to{opacity:1;transform:translateY(0)}}
.slide-up{animation:slideUp .3s ease-out forwards;transform:translateY(100%)}@keyframes slideUp{to{transform:translateY(0)}}
.screen{display:none;min-height:100vh;flex-direction:column}.screen.active{display:flex}.app-container{max-width:600px;margin:0 auto;width:100%;position:relative}
.no-scrollbar::-webkit-scrollbar {display: none;} .no-scrollbar {-ms-overflow-style: none; scrollbar-width: none;}

/* INPUTS & BUTTONS */
.input-clean{width:100%;padding:16px;background:#F8FAFC;border:1px solid #E2E8F0;border-radius:12px;font-size:15px;outline:none;transition:all .2s}
.input-clean:focus{background:white;border-color:var(--accent-black);box-shadow:0 4px 12px rgba(0,0,0,.05)}

.btn-black{background:var(--accent-black);color:white;padding:16px;border-radius:12px;font-weight:600;width:100%;letter-spacing:.5px;box-shadow:0 4px 20px rgba(0,0,0,.1);border:none;display:flex;align-items:center;justify-content:center;gap:8px;transition:all 0.2s}
.btn-black:active{transform:scale(.98)}
.btn-black:disabled{opacity:0.7;cursor:not-allowed}

.btn-outline{background:transparent;border:1px solid #E2E8F0;color:var(--text-main);padding:14px;border-radius:12px;font-weight:600;width:100%;display:flex;align-items:center;justify-content:center}

/* LOADING SPINNER */
.spinner {animation: rotate 2s linear infinite; z-index: 2; width: 20px; height: 20px;}
.spinner .path {stroke: #ffffff; stroke-linecap: round; animation: dash 1.5s ease-in-out infinite;}
@keyframes rotate {100% {transform: rotate(360deg);}}
@keyframes dash {0% {stroke-dasharray: 1, 150; stroke-dashoffset: 0;} 50% {stroke-dasharray: 90, 150; stroke-dashoffset: -35;} 100% {stroke-dasharray: 90, 150; stroke-dashoffset: -124;}}

/* CHIPS & CARDS */
.chip{padding:8px 18px;border-radius:100px;font-size:13px;font-weight:600;background:#F1F5F9;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .2s;border:1px solid transparent}
.chip.active{background:var(--accent-black);color:white;border-color:black}
.card-feed{padding:20px;border-bottom:1px solid #F1F5F9;position:relative}
.stat-card{background:white;padding:16px;border-radius:12px;border:1px solid #f3f4f6;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.upload-btn{border:1px dashed #d1d5db;border-radius:12px;padding:12px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);font-weight:700;cursor:pointer;background:#f9fafb;transition:all .2s}.upload-btn:hover{background:#f3f4f6;border-color:#000;color:#000}
.urgency-btn{padding:10px;border-radius:8px;font-weight:600;background:#F8FAFC;border:1px solid #E2E8F0;color:var(--muted);cursor:pointer;transition:all .2s}.urgency-btn.active{background:var(--accent-black);color:white;border-color:black}

/* MODALS */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;display:none;align-items:flex-end;justify-content:center;backdrop-filter:blur(4px)}.overlay.show{display:flex}
.overlay-center{align-items:center}
.sheet-bottom{background:white;width:100%;max-width:600px;border-top-left-radius:24px;border-top-right-radius:24px;max-height:85vh;display:flex;flex-direction:column}
.modal-box{background:white;width:90%;max-width:350px;border-radius:20px;padding:24px;box-shadow:0 20px 40px rgba(0,0,0,0.2);text-align:center}

/* PREMIUM TOAST NOTIFICATION */
#toast-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 9999; width: 90%; max-width: 400px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); color: #000; padding: 16px; border-radius: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border: 1px solid rgba(0,0,0,0.05); display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; pointer-events: auto; }
.toast.error { border-left: 4px solid #ef4444; }
.toast.success { border-left: 4px solid #000; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fadeOut { to { opacity: 0; transform: translateY(-10px); } }

/* UTILS */
.date-divider{display:flex;align-items:center;justify-content:center;margin:24px 0;position:relative}.date-divider::before{content:'';position:absolute;left:20px;right:20px;height:1px;background:#F1F5F9;z-index:0}.date-divider span{background:#FAFAFA;padding:4px 16px;z-index:1;color:#94a3b8;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;border-radius:20px}
.system-gold{background:linear-gradient(180deg,#fffaf0,#fff7e6);border:1px solid rgba(212,175,55,.18);padding:16px;border-radius:12px;margin-bottom:12px}
.aspect-portrait{aspect-ratio:4/5;object-fit:cover}
.hidden-by-default{display:none}
.carousel-wrap{position:relative}
.carousel-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.5);color:white;width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;cursor:pointer}
.carousel-left{left:8px}.carousel-right{right:8px}
.carousel-indicator{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,0.6);color:white;padding:4px 8px;border-radius:999px;font-size:12px}
.notif-banner{background:#FFFBEB;border:1px solid #FEF3C7;padding:12px;border-radius:8px;margin-bottom:12px}

/* BADGES */
.badge-gold{color:var(--accent-gold)}.badge-green{color:#16A34A}.badge-black{color:#000}.badge-purple{color:#7C3AED}