:root{--bg-color: #f8fafc;--bg-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);--card-bg: rgba(255, 255, 255, .85);--card-border: rgba(15, 23, 42, .08);--text-primary: #1e293b;--text-secondary: #475569;--text-muted: #94a3b8;--primary-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #06b6d4 100%);--accent-cyan: #06b6d4;--accent-indigo: #4f46e5;--accent-purple: #7c3aed;--sos-color: #ef4444;--sos-bg: rgba(239, 68, 68, .1);--share-color: #10b981;--share-bg: rgba(16, 185, 129, .1);--glass-bg: rgba(255, 255, 255, .85);--glass-border: rgba(15, 23, 42, .08);--glass-shadow: 0 8px 32px 0 rgba(148, 163, 184, .15);--font-family: "Plus Jakarta Sans", "Outfit", sans-serif;--transition-speed: .3s}[data-theme=dark]{--bg-color: #0b0f19;--bg-gradient: linear-gradient(135deg, #0b0f19 0%, #111827 100%);--card-bg: rgba(17, 24, 39, .7);--card-border: rgba(255, 255, 255, .08);--text-primary: #f3f4f6;--text-secondary: #9ca3af;--text-muted: #6b7280;--glass-bg: rgba(17, 24, 39, .75);--glass-border: rgba(255, 255, 255, .08);--glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--sos-bg: rgba(239, 68, 68, .15);--share-bg: rgba(16, 185, 129, .15)}html{overscroll-behavior-y:none}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-family);background:var(--bg-gradient);color:var(--text-primary);min-height:100vh;overflow-x:hidden;line-height:1.5;transition:background-color .3s,color .3s;overscroll-behavior-y:none;-webkit-overflow-scrolling:touch}.app-container{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background-color:var(--bg-color);position:relative;box-shadow:0 0 40px #00000080;padding-bottom:72px}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:10px}h1,h2,h3,h4,h5,h6{font-weight:700;letter-spacing:-.02em}a{text-decoration:none;color:inherit}.header{position:sticky;top:0;z-index:100;background:var(--glass-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--glass-border);padding:12px 16px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--glass-shadow)}.header-top{display:flex;justify-content:space-between;align-items:center}.logo{font-size:1.25rem;font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:6px}.header-actions{display:flex;align-items:center;gap:12px}.icon-btn{background:#ffffff0d;border:1px solid var(--card-border);color:var(--text-primary);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:transform .1s ease}.icon-btn:active{transform:scale(.92)}.notification-badge{position:absolute;top:2px;right:2px;width:8px;height:8px;background-color:var(--sos-color);border-radius:50%;border:1px solid var(--bg-color)}.search-bar{display:flex;align-items:center;background:#ffffff0d;border:1px solid var(--card-border);border-radius:20px;padding:8px 14px;gap:8px}.search-bar input{background:transparent;border:none;color:var(--text-primary);flex:1;font-family:var(--font-family);font-size:.9rem;outline:none}.search-bar input::placeholder{color:var(--text-muted)}.categories-slider{display:flex;overflow-x:auto;gap:8px;padding:4px 16px 12px;scrollbar-width:none}.categories-slider::-webkit-scrollbar{display:none}.category-pill{flex-shrink:0;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:20px;font-size:.85rem;font-weight:600;background:#ffffff0d;border:1px solid var(--card-border);color:var(--text-secondary);cursor:pointer;transition:all .2s ease}.category-pill.active{background:var(--primary-gradient);border-color:transparent;color:#fff;box-shadow:0 4px 12px #4f46e54d}.bottom-nav{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;background:var(--glass-bg);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-top:1px solid var(--glass-border);display:flex;justify-content:space-around;padding:8px 0 calc(8px + env(safe-area-inset-bottom,0px));z-index:100;box-shadow:var(--glass-shadow)}.nav-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.75rem;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:color .2s ease;flex:1}.nav-item.active{color:var(--accent-cyan)}.nav-item span{font-size:.7rem}.feed-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:16px}.glass-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:16px;overflow:hidden;box-shadow:0 4px 12px #00000026}.product-card{display:flex;flex-direction:column;height:100%}.product-card-img-wrapper{position:relative;width:100%;padding-top:100%;background:#ffffff05;overflow:hidden}.product-card-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.verified-badge{position:absolute;top:8px;left:8px;background:#0b0f19d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid var(--accent-cyan);color:var(--accent-cyan);padding:2px 6px;border-radius:6px;font-size:.65rem;font-weight:700;display:flex;align-items:center;gap:3px}.product-card-info{padding:12px;display:flex;flex-direction:column;gap:6px;flex-grow:1}.product-card-title{font-size:.85rem;font-weight:600;color:var(--text-primary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;height:2.6em}.product-card-price{font-size:1rem;font-weight:800;background:linear-gradient(135deg,#06b6d4,#4f46e5);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.product-card-meta{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;color:var(--text-secondary);margin-top:auto;border-top:1px solid rgba(255,255,255,.05);padding-top:6px}.sos-banner{background:var(--sos-bg);border:1px solid rgba(239,68,68,.3);border-radius:12px;padding:12px;margin:16px;display:flex;align-items:center;gap:12px;position:relative;overflow:hidden}.sos-banner:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--sos-color)}.sos-content{flex:1}.sos-title{font-size:.9rem;font-weight:700;color:#ef4444;margin-bottom:2px;display:flex;align-items:center;gap:6px}.sos-desc{font-size:.8rem;color:var(--text-primary)}.sos-room{font-size:.7rem;font-weight:600;color:var(--text-secondary)}.section-title-wrapper{display:flex;justify-content:space-between;align-items:center;padding:0 16px;margin-top:8px}.section-title{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:6px}.borrowing-list{display:flex;flex-direction:column;gap:8px;padding:12px 16px}.share-card{display:flex;align-items:center;justify-content:space-between;padding:12px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:12px}.share-info{display:flex;flex-direction:column;gap:4px}.share-title{font-size:.85rem;font-weight:600;color:var(--text-primary)}.share-meta{font-size:.75rem;color:var(--text-secondary)}.share-badge{font-size:.7rem;padding:2px 8px;border-radius:20px;font-weight:600}.share-badge.available{background:var(--share-bg);color:var(--share-color);border:1px solid rgba(16,185,129,.2)}.share-badge.borrowed{background:#ffffff0d;color:var(--text-muted);border:1px solid var(--card-border)}.form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}.form-group label{font-size:.85rem;font-weight:600;color:var(--text-secondary)}.form-control{background:#ffffff08;border:1px solid var(--card-border);border-radius:10px;padding:12px;color:var(--text-primary);font-family:var(--font-family);outline:none;font-size:.9rem;transition:border-color .2s ease}.form-control:focus{border-color:var(--accent-cyan)}select.form-control{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px}.btn{background:var(--primary-gradient);border:none;color:#fff;padding:12px 24px;border-radius:10px;font-weight:700;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .1s ease,box-shadow .2s ease}.btn:active{transform:scale(.96)}.btn-secondary{background:#ffffff0d;border:1px solid var(--card-border);color:var(--text-primary)}.btn-danger{background:var(--sos-color)}.btn-sm{padding:6px 12px;font-size:.8rem;border-radius:6px}.image-uploader{border:2px dashed var(--card-border);border-radius:12px;padding:24px;text-align:center;cursor:pointer;background:#ffffff03;transition:border-color var(--transition-speed)}.image-uploader:hover{border-color:var(--accent-cyan)}.image-previews{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.preview-thumb{position:relative;width:100%;padding-top:100%;border-radius:6px;overflow:hidden}.preview-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.preview-thumb-remove{position:absolute;top:2px;right:2px;background:#0009;color:#fff;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;border:none}.chat-container{display:flex;flex-direction:column;height:calc(100vh - 140px)}.chat-product-banner{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#ffffff08;border-bottom:1px solid var(--card-border)}.chat-product-img{width:40px;height:40px;object-fit:cover;border-radius:6px}.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}.chat-bubble{max-width:75%;padding:10px 14px;border-radius:16px;font-size:.9rem;position:relative;word-break:break-word}.chat-bubble.sent{align-self:flex-end;background:var(--accent-indigo);color:#fff;border-bottom-right-radius:4px}.chat-bubble.received{align-self:flex-start;background:#ffffff12;color:var(--text-primary);border-bottom-left-radius:4px}.chat-bubble-meta{font-size:.65rem;color:#ffffff80;margin-top:4px;text-align:right}.chat-bubble.received .chat-bubble-meta{color:var(--text-muted)}.chat-input-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--glass-bg);border-top:1px solid var(--glass-border)}.chat-input-bar input{flex:1;background:#ffffff0d;border:1px solid var(--card-border);border-radius:20px;padding:8px 16px;color:var(--text-primary);outline:none;font-family:var(--font-family);font-size:.9rem}.product-details{padding-bottom:80px}.details-image-slider{position:relative;width:100%;padding-top:75%;background:#0003}.details-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.details-content{padding:20px 16px;display:flex;flex-direction:column;gap:16px}.details-price{font-size:1.5rem;font-weight:800;color:var(--accent-cyan)}.details-title{font-size:1.2rem;font-weight:700}.details-meta-row{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--text-secondary)}.details-section-title{font-size:.95rem;font-weight:700;border-bottom:1px solid rgba(255,255,255,.05);padding-bottom:6px;margin-bottom:8px}.details-description{font-size:.9rem;color:var(--text-secondary);line-height:1.6}.seller-box{display:flex;align-items:center;justify-content:space-between;padding:12px;background:#ffffff05;border:1px solid var(--card-border);border-radius:12px}.seller-info{display:flex;align-items:center;gap:12px}.seller-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover}.details-action-bar{position:fixed;bottom:0;left:50%;transform:translate(-50%);width:100%;max-width:480px;background:var(--glass-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--glass-border);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(3,1fr);gap:8px;z-index:110}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:flex-end;justify-content:center}.bottom-sheet{background:var(--bg-color);width:100%;max-width:480px;border-top-left-radius:24px;border-top-right-radius:24px;border:1px solid var(--glass-border);border-bottom:none;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));max-height:85vh;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 -8px 32px #00000080;animation:slideUp .3s cubic-bezier(.16,1,.3,1)}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.bottom-sheet-handle{width:40px;height:4px;background:var(--text-muted);border-radius:2px;margin:-12px auto 16px}.bottom-sheet-title{font-size:1.1rem;font-weight:700;margin-bottom:16px;text-align:center}.toast-container{position:fixed;top:24px;left:50%;transform:translate(-50%);z-index:2000;display:flex;flex-direction:column;gap:8px;width:calc(100% - 32px);max-width:380px}.toast{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:12px 16px;border-radius:12px;color:var(--text-primary);font-size:.85rem;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:var(--glass-shadow);border-left:4px solid var(--accent-cyan);animation:slideIn .3s cubic-bezier(.16,1,.3,1)}.toast.success{border-left-color:var(--share-color)}.toast.error{border-left-color:var(--sos-color)}.toast.info{border-left-color:var(--accent-indigo)}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.auth-page{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:radial-gradient(circle at 10% 20%,rgba(79,70,229,.12) 0%,transparent 45%),radial-gradient(circle at 90% 80%,rgba(6,182,212,.12) 0%,transparent 45%),linear-gradient(180deg,#f8fafc8c,#e2e8f0d9),url(/vision_apartment_banner.png) no-repeat center center;background-size:cover;background-position:center;transition:background var(--transition-speed)}.auth-logo-section{margin-bottom:24px;z-index:2}.auth-logo{font-size:2.2rem;font-weight:800;background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-top:8px}.auth-card{width:100%;max-width:420px;background:#ffffffb3;border:1px solid rgba(15,23,42,.08);border-radius:24px;padding:28px 24px;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 20px 40px #94a3b826;z-index:2;color:var(--text-primary);transition:all var(--transition-speed)}.auth-input-wrapper{display:flex;align-items:center;background:#0f172a0a;border:1px solid rgba(15,23,42,.08);border-radius:12px;padding:0 16px;height:50px;transition:all .2s ease}.auth-input-wrapper:focus-within{background:#ffffffe6;border-color:var(--accent-cyan);box-shadow:0 0 0 3px #06b6d426}.auth-input-wrapper input{border:none!important;background:none!important;flex:1;height:100%!important;color:var(--text-primary)!important;font-size:.95rem;padding-left:12px!important;outline:none!important;box-shadow:none!important}.auth-input-wrapper input::placeholder{color:var(--text-muted)}.auth-input-wrapper svg{color:var(--text-secondary);transition:color .2s ease}.auth-input-wrapper:focus-within svg{color:var(--accent-cyan)}.social-login-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;height:48px;border-radius:12px;font-weight:600;font-size:.9rem;cursor:pointer;border:1px solid rgba(15,23,42,.08);background:#0f172a08;color:var(--text-primary);margin-bottom:12px;transition:all .2s ease}.social-login-btn:hover{background:#0f172a0f;border-color:#0f172a26}.social-login-btn:active{background:#0f172a17;transform:scale(.98)}.divider{display:flex;align-items:center;text-align:center;color:var(--text-muted);font-size:.75rem;margin:16px 0}.divider:before,.divider:after{content:"";flex:1;border-bottom:1px solid rgba(15,23,42,.08)}.divider:not(:empty):before{margin-right:.5em}.divider:not(:empty):after{margin-left:.5em}[data-theme=dark] .auth-page{background:radial-gradient(circle at 10% 20%,rgba(79,70,229,.25) 0%,transparent 45%),radial-gradient(circle at 90% 80%,rgba(6,182,212,.25) 0%,transparent 45%),linear-gradient(180deg,#0b0f1966,#0b0f19cc),url(/vision_apartment_banner.png) no-repeat center center;background-size:cover;background-position:center}[data-theme=dark] .auth-card{background:#1e293b73;border:1px solid rgba(255,255,255,.16);box-shadow:0 20px 40px #00000059;color:#f3f4f6}[data-theme=dark] .auth-input-wrapper{background:#ffffff0f;border:1px solid rgba(255,255,255,.12)}[data-theme=dark] .auth-input-wrapper:focus-within{background:#ffffff1a;box-shadow:0 0 0 3px #06b6d433}[data-theme=dark] .auth-input-wrapper input{color:#fff!important}[data-theme=dark] .auth-input-wrapper input::placeholder{color:#ffffff73}[data-theme=dark] .auth-input-wrapper svg{color:#fff9}[data-theme=dark] .social-login-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.12);color:#fff}[data-theme=dark] .social-login-btn:hover{background:#ffffff17;border-color:#fff3}[data-theme=dark] .social-login-btn:active{background:#ffffff1f}[data-theme=dark] .divider{color:#fff6}[data-theme=dark] .divider:before,[data-theme=dark] .divider:after{border-bottom:1px solid rgba(255,255,255,.12)}
