*{box-sizing:border-box} :root{ --bg:#fff; --text:#1f1f1f; --card:#fff; --muted:#666; --muted2:#6b6b6b; --border:#eee; --ghostBorder:#e8e8e8; --inputBorder:#e4e4e4; --pill:#f7f7f7; --pillHover:#f1f1f1; --navBg:rgba(255,255,255,.92); } /* Optional dark mode (toggle ready). Add class="dark" to later. */ html.dark{ --bg:#0b0f17; --text:#e5e7eb; --card:#0f1623; --muted:#9ca3af; --muted2:#9ca3af; --border:#1f2937; --ghostBorder:#253248; --inputBorder:#253248; --pill:#121a2a; --pillHover:#182237; --navBg:rgba(11,15,23,.90); } body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto;background:var(--bg);color:var(--text)} .container{max-width:1200px;margin:0 auto;padding:24px} .nav{position:sticky;top:0;z-index:30;background:var(--navBg);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)} .nav-inner{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .brand{font-weight:900;font-size:26px;color:#ff385c;text-decoration:none;letter-spacing:.2px} .search{flex:1;min-width:220px} .search input{width:100%;padding:12px 18px;border:1px solid var(--inputBorder);border-radius:999px;box-shadow:0 6px 20px rgba(0,0,0,.05);background:var(--card);color:var(--text)} .nav-links{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .btn{border:0;border-radius:999px;padding:11px 18px;background:linear-gradient(90deg,#ff385c,#ff5a5f);color:#fff;text-decoration:none;display:inline-block;font-weight:700;box-shadow:0 8px 20px rgba(255,56,92,.25)} .ghost-btn{border:1px solid var(--ghostBorder);border-radius:999px;padding:10px 14px;text-decoration:none;color:var(--text);background:var(--card);display:inline-block} .hero{padding:44px 0 22px} .hero h1{font-size:42px;line-height:1.08;margin:0 0 8px} .hero p{color:var(--muted2)} .org-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:18px;align-items:end;padding:34px 0 22px;border-bottom:1px solid var(--border);margin-bottom:20px} .org-hero h1{font-size:38px;line-height:1.08;margin:0 0 8px} .org-hero p{color:var(--muted2);margin:0} .org-search{max-width:none;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:0 10px 24px rgba(0,0,0,.06)} .tenant-hub{display:grid;grid-template-columns:1.2fr repeat(4,minmax(130px,1fr));gap:12px;align-items:stretch;margin:8px 0 18px} .tenant-panel{border:1px solid var(--border);border-radius:16px;background:var(--card);padding:14px;box-shadow:0 10px 22px rgba(0,0,0,.05)} .tenant-panel h2,.tenant-panel h3{margin:0 0 6px} .tenant-panel.metric strong{display:block;font-size:24px;margin-bottom:2px} .tenant-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px} .card{border:1px solid #ededed;border-radius:22px;overflow:hidden;background:var(--card);box-shadow:0 12px 30px rgba(0,0,0,.06);transition:transform .2s ease,box-shadow .2s ease} .card:hover{transform:translateY(-3px);box-shadow:0 16px 36px rgba(0,0,0,.1)} .card-media{height:220px;background:#f2f2f2;display:block;width:100%;object-fit:cover} .card-body{padding:14px 14px 16px} .muted{color:var(--muted)} .muted-sm{color:var(--muted);font-size:13px} .rating-row{display:flex;align-items:center;gap:8px;margin:6px 0}.stars{letter-spacing:1px;color:#f59e0b;font-size:15px} .form{max-width:620px;display:grid;gap:10px} .form input,.form textarea,.form select{padding:11px;border:1px solid #ddd;border-radius:12px;background:var(--card);color:var(--text)} .gallery{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px} .gallery img{width:100%;height:220px;object-fit:cover;border-radius:16px} .section{margin:26px 0;padding:20px;border:1px solid var(--border);border-radius:18px;background:var(--card)} .badge{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--pill);font-size:12px;color:var(--text);border:1px solid var(--ghostBorder)} /* Pills (filters / sort) */ .pillbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:10px 0 14px} .pill{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;border:1px solid #ececec;background:var(--pill);color:var(--text);text-decoration:none;font-weight:700;font-size:13px;line-height:1} .pill:hover{background:var(--pillHover)} .pill.active{background:#111;border-color:#111;color:#fff} .pill small{font-weight:700;opacity:.85} /* Listing pro */ .listing-topbar{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:8px} .listing-anchors{display:flex;gap:18px;border-bottom:1px solid #eee;padding:10px 0 12px;margin:8px 0 16px} .listing-anchors a{text-decoration:none;color:#333;font-weight:600} .listing-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start} .listing-block{border-bottom:1px solid #f0f0f0;padding-bottom:18px;margin-bottom:18px} .listing-aside{position:sticky;top:92px} .price-card{border:1px solid var(--ghostBorder);border-radius:18px;padding:16px;box-shadow:0 10px 30px rgba(0,0,0,.08);background:var(--card);color:var(--text)} .price-main{font-size:28px;font-weight:800;line-height:1.1} .price-main span{font-size:15px;font-weight:500;color:#666} .price-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0} .price-grid label{font-size:12px;color:#6b6b6b;display:grid;gap:6px} .price-grid input{padding:10px;border:1px solid #ddd;border-radius:10px} .quote-line{padding:10px 12px;border:1px solid #eee;border-radius:12px;background:#fafafa;font-size:14px} .price-actions{display:grid;gap:8px;margin-top:10px} /* Mobile-first hardening */ @media (max-width: 900px){ .container{padding:18px} .hero h1{font-size:34px} .org-hero{grid-template-columns:1fr} .tenant-hub{grid-template-columns:1fr 1fr} .tenant-panel.intro{grid-column:1/-1} .gallery{grid-template-columns:1fr 1fr} .listing-layout{grid-template-columns:1fr} .listing-aside{position:static} } .menu-wrap{position:relative} .menu-avatar{border:1px solid var(--ghostBorder);background:var(--card);color:var(--text);border-radius:999px;width:42px;height:42px;cursor:pointer;display:grid;place-items:center;overflow:hidden} .menu-avatar-img{width:100%;height:100%;object-fit:cover;display:block} .menu-avatar-initials{font-size:13px;font-weight:800;color:#b4234d;background:#ffe9ee;width:100%;height:100%;display:grid;place-items:center} html.dark .menu-avatar-initials{color:#ff6b81;background:rgba(255,56,92,.16)} .menu-dropdown{position:absolute;right:0;top:48px;min-width:180px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.12);padding:8px;display:none} .menu-dropdown.open{display:block} .menu-dropdown a{display:block;padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--text)} .menu-dropdown a:hover{background:var(--pillHover)} .auth-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:center;justify-content:center;padding:16px;z-index:300} .auth-modal.open{display:flex} .auth-card{width:min(94vw,420px);background:var(--card);color:var(--text);border-radius:16px;padding:16px;border:1px solid var(--border);box-shadow:0 20px 40px rgba(0,0,0,.2)} .auth-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .close-x{ appearance:none; -webkit-appearance:none; width:30px; height:30px; border:1px solid var(--ghostBorder); border-radius:999px; background:var(--card); color:var(--muted); display:grid; place-items:center; cursor:pointer; line-height:1; padding:0; } .close-x:hover{background:var(--pillHover);color:var(--text)} .close-x:focus-visible{outline:2px solid #ff385c;outline-offset:2px} /* Modal loading overlay */ .modal-wrap{position:relative} .modal-loading{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(255,255,255,.86);backdrop-filter:blur(2px);border-radius:12px;z-index:5} html.dark .modal-loading{background:rgba(0,0,0,.55)} .modal-loading.open{display:flex} .modal-loading-card{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:14px;padding:12px 14px;box-shadow:0 14px 30px rgba(0,0,0,.10);text-align:center;max-width:320px} .spinner{width:18px;height:18px;border-radius:999px;border:2px solid #e7e7e7;border-top-color:#ff385c;display:inline-block;animation:spin .9s linear infinite;margin-right:8px;vertical-align:-3px} @keyframes spin{to{transform:rotate(360deg)}} .auth-option{width:100%;text-align:left;border:1px solid var(--border);background:var(--card);color:var(--text);padding:12px;border-radius:12px;margin:8px 0;cursor:pointer} .auth-option:hover{background:var(--pillHover)} .password-field{position:relative;display:block;width:100%} .form .password-field input{ width:100%; min-height:44px; padding:11px 50px 11px 12px; line-height:20px; } .form .password-field input:focus{ border-color:#0071c2; box-shadow:0 0 0 3px rgba(0,113,194,.14); outline:0; } .password-field .password-toggle{ appearance:none; -webkit-appearance:none; position:absolute; right:8px; top:50%; transform:translateY(-50%); width:34px; height:34px; min-width:34px; min-height:34px; margin:0; padding:0; border:0; border-radius:999px; background:transparent; color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:none; line-height:1; } .password-field .password-toggle:hover{background:var(--pillHover);color:var(--text)} .password-field .password-toggle:active{transform:translateY(-50%) scale(.96)} .password-field .password-toggle:focus-visible{outline:2px solid #ff385c;outline-offset:2px} .password-field .password-toggle svg{ width:19px; height:19px; display:block; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; } .password-field .password-toggle .password-eye-off{display:none} .password-field .password-toggle.is-visible .password-eye{display:none} .password-field .password-toggle.is-visible .password-eye-off{display:block} @media (max-width: 640px){ .container{padding:14px} .brand{font-size:22px} .nav-inner{gap:10px} .search{order:3;flex-basis:100%;min-width:100%} .nav-links{margin-left:auto} .hero{padding:22px 0 12px} .hero h1{font-size:28px} .org-hero h1{font-size:28px} .tenant-hub{grid-template-columns:1fr} .grid{grid-template-columns:1fr;gap:14px} .card{border-radius:16px} .card-media{height:210px} .gallery{grid-template-columns:1fr} .gallery img{height:190px} .btn{padding:10px 14px;font-size:14px} .ghost-btn{padding:9px 12px;font-size:14px} .section{padding:14px;margin:16px 0;border-radius:14px} /* Cards: reduce button saturation + keep actions legible */ .card-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px} .card-actions .primary-action{grid-column:1/-1;justify-content:center;text-align:center} .card-actions .details-action{grid-column:1/-1;justify-content:center;text-align:center} #globalOpsAlert,#obAlertToast,#indexPayAlert{ left:12px !important; right:12px !important; max-width:none !important; width:auto !important; top:122px !important; } } /* Desktop default for card actions */ .card-actions{display:flex;gap:8px;flex-wrap:wrap} /* Dark-mode hardening for inline-styled ops alert */ html.dark #globalOpsAlert{background:var(--card) !important;border-color:rgba(255,56,92,.35) !important;color:var(--text) !important} html.dark #globalOpsAlert span{color:var(--muted) !important}