:root{--bg:var(--az-glass);--card:var(--az-glass);--stroke:var(--az-accent);--shadow:var(--az-glass-shadow);--shadow2:var(--az-glass-shadow);--glow:var(--az-accent);--accent:var(--az-accent);--text:var(--az-text);--muted:var(--az-muted);--sidebar-open: 250px;--sidebar-closed: 50px;--content-pad: 14px;--radius: 22px;--radius-sm: 18px}
*{box-sizing: border-box}
html, body{margin: 0;padding: 0;height: 100%;background:var(--az-bg);color:var(--az-text);font-family:var(--az-font)}
body{overflow-x: hidden;overflow-y: auto}
.page-wrap{min-height: 100vh;width: 100%;padding: 14px;display: flex;justify-content: center}
.inner{width: 100%;max-width: 1400px;padding-left: calc(var(--content-pad) + var(--sidebar-closed));padding-right: var(--content-pad)}
body.sidebar-open .inner{padding-left: calc(var(--content-pad) + var(--sidebar-open))}
body.sidebar-closed .inner{padding-left: calc(var(--content-pad) + var(--sidebar-closed))}
.page-title{text-align: center;margin: 14px 0;font-size: clamp(20px, 2.4vw, 28px);font-weight: 900}
.subnote{text-align: center;margin: -6px auto 14px auto;max-width: 900px;color:var(--az-text);font-size: 13px;line-height: 1.4}
.hero{width: 100%;border-radius:var(--az-r-card);background:var(--az-glass);border:1px solid var(--az-glass-edge);box-shadow:var(--az-glass-shadow);backdrop-filter: blur(12px);overflow: hidden;padding: 20px 24px;display: flex;flex-direction: column;gap: 16px}
.hero-top{display: flex;align-items: center;gap: 14px;flex-wrap: wrap}
.hero-avatar{width: 56px;height: 56px;border-radius:var(--az-r-card);border:1px solid var(--az-glass-edge);background:var(--az-glass);overflow: hidden;flex-shrink: 0;box-shadow:var(--az-glass-shadow);transition: transform .22s ease}
.hero:hover .hero-avatar{transform: scale(1.04)}
.hero-avatar img{width: 100%;height: 100%;object-fit: contain;display: block;padding: 3px}
.hero-identity{flex: 1;min-width: 0}
.hero-name{font-size: clamp(18px, 2vw, 24px);font-weight: 900;line-height: 1.2;margin: 0 0 3px 0}
.hero-plan{display: inline-flex;align-items: center;gap: 5px;padding: 3px 10px;border-radius:var(--az-r-card);font-size: 10.5px;font-weight: 700;color:var(--az-text);background:var(--az-glass);border:1px solid var(--az-glass-edge);letter-spacing: 0.3px}
.hero-plan i{font-size: 10px}
.hero-back{color:var(--az-text);text-decoration: none;padding: 8px 14px;border-radius:var(--az-r-card);border:1px solid var(--az-glass-edge);background:var(--az-glass);font-weight: 700;font-size: 12.5px;display: inline-flex;align-items: center;gap: 7px;transition: .15s ease;flex-shrink: 0}
.hero-back:hover{background:var(--az-glass);border-color:var(--az-glass-edge);color:var(--az-text);transform: translateY(-1px)}
.hero-info{display: grid;grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));gap: 8px}
.hero-info-item{display: flex;align-items: center;gap: 10px;padding: 10px 12px;border-radius:var(--az-r-card);border:1px solid var(--az-glass-edge);background:var(--az-glass);transition: border-color .2s ease}
.hero-info-item:hover{border-color:var(--az-glass-edge)}
.hero-info-item i{color:var(--az-text);width: 16px;text-align: center;font-size: 13px;flex-shrink: 0}
.hero-info-label{font-size: 9.5px;font-weight: 700;color:var(--az-muted);text-transform: uppercase;letter-spacing: 0.3px}
.hero-info-value{font-size: 13px;font-weight: 800;color:var(--az-text);word-break: break-word}
.hero-desc{font-size: 13px;color:var(--az-text);line-height: 1.55;padding: 10px 12px;border-radius:var(--az-r-card);border:1px solid var(--az-glass-edge);background:var(--az-glass)}
.hero-desc-title{font-size: 11px;font-weight: 800;color:var(--az-text);margin-bottom: 6px;display: flex;align-items: center;gap: 7px}
.hero-desc-title i{color:var(--az-text);font-size: 12px}
.tabs{margin-top: 14px;position: sticky;top: 0;z-index: 5;background:var(--az-glass);padding: 10px 0;border-top:1px solid var(--az-glass-edge);border-bottom:1px solid var(--az-glass-edge);backdrop-filter: blur(6px)}
.tabbar{display: flex;justify-content: center;gap: 10px;flex-wrap: wrap;padding: 0 6px}
.tabbtn{cursor: pointer;border:1px solid var(--az-glass-edge);background:var(--az-glass);color:var(--az-text);padding: 10px 14px;border-radius:var(--az-r-control);font-size: 13px;display: inline-flex;align-items: center;gap: 10px;transition: .15s ease;font-weight: 900}
.tabbtn i{color:var(--az-text)}
.tabbtn:hover{transform: translateY(-1px);border-color:var(--az-glass-edge)}
.tabbtn.active{background:var(--az-glass);border-color:var(--az-glass-edge);box-shadow:var(--az-glass-shadow)}
.section{display: none;margin-top: 10px}
.section.active{display: block}
.section-title{text-align: center;font-size: 16px;font-weight: 900;margin: 14px 0 12px 0}
.grid{display: grid;gap: 16px;padding-bottom: 20px;grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));align-items: stretch}
@media (min-width: 1200px){.grid.projects-grid{grid-template-columns: repeat(3, minmax(0, 1fr))}}
.card{border-radius:var(--az-r-card);background:var(--az-glass);border:1px solid var(--az-glass-edge);box-shadow:var(--az-glass-shadow);overflow: hidden;transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;position: relative;display: flex;flex-direction: column;height: 100%}
.card:hover{transform: translateY(-6px);border-color:var(--az-glass-edge);box-shadow:var(--az-glass-shadow)}
.card-cover{width: 100%;aspect-ratio: 16/10;overflow: hidden;background:var(--az-glass);border-bottom:1px solid var(--az-glass-edge);flex-shrink: 0;position: relative}
.card-slide{position: absolute;inset: 0;opacity: 0;transition: opacity 0.6s ease;z-index: 0}
.card-slide.active{opacity: 1;z-index: 1}
.card-slide img{width: 100%;height: 100%;object-fit: cover;display: block;filter: brightness(0.85) saturate(0.92);transition: filter .3s ease}
.card:hover .card-slide img{filter: brightness(0.95) saturate(1.05)}
.card-nav{position: absolute;top: 50%;transform: translateY(-50%);width: 26px;height: 26px;border-radius: 50%;background:var(--az-glass);border:1px solid var(--az-glass-edge);color:var(--az-text);display: flex;align-items: center;justify-content: center;font-size: 10px;cursor: pointer;z-index: 4;opacity: 0;transition: opacity .2s ease, background .15s ease, transform .15s ease;backdrop-filter: blur(6px)}
.card:hover .card-nav{opacity: 1}
.card-nav:hover{background:var(--az-glass);border-color:var(--az-glass-edge);transform: translateY(-50%) scale(1.1)}
.card-nav.prev{left: 8px}
.card-nav.next{right: 8px}
.card-photo-counter{position: absolute;bottom: 8px;left: 50%;transform: translateX(-50%);padding: 3px 8px;border-radius:var(--az-r-card);background:var(--az-glass);backdrop-filter: blur(6px);font-size: 10px;font-weight: 700;color:var(--az-text);z-index: 3;letter-spacing: 0.5px;opacity: 0;transition: opacity .2s ease}
.card:hover .card-photo-counter{opacity: 1}
.card-cover-overlay{position: absolute;inset: 0;background:rgb(5 12 18 / .58);pointer-events: none;z-index: 2}
.card-status-badge{position: absolute;top: 10px;left: 10px;padding: 4px 10px;border-radius:var(--az-r-control);font-size: 10.5px;font-weight: 800;color:var(--az-text);background:var(--az-glass);backdrop-filter: blur(8px);letter-spacing: 0.2px;z-index: 3}
.card-installment-badge{position: absolute;top: 10px;right: 10px;padding: 4px 10px;border-radius:var(--az-r-control);font-size: 10.5px;font-weight: 800;color:var(--az-text);background:var(--az-glass);backdrop-filter: blur(8px);letter-spacing: 0.2px;z-index: 3}
.card-price-overlay{position: absolute;bottom: 10px;left: 10px;right: 10px;display: flex;justify-content: space-between;align-items: flex-end;z-index: 3}
.card-price-tag{font-size: 18px;font-weight: 900;color:var(--az-accent);text-shadow:none;line-height: 1.1}
.card-price-tag small{font-size: 11px;font-weight: 700;color:var(--az-muted)}
.card .innerc{padding: 14px;display: flex;flex-direction: column;flex: 1;gap: 0}
.card .t{font-weight: 900;font-size: 15px;margin: 0 0 4px 0;line-height: 1.25;word-break: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;color:var(--az-text)}
.card-location{display: flex;align-items: center;gap: 6px;font-size: 12px;color:var(--az-text);margin-bottom: 10px}
.card-location i{color:var(--az-text);width: 13px;font-size: 11px;flex-shrink: 0}
.card-params{display: grid;grid-template-columns: 1fr 1fr;gap: 6px;margin-bottom: 10px}
.card-param{border:1px solid var(--az-glass-edge);background:var(--az-glass);border-radius:var(--az-r-card);padding: 7px 9px}
.card-param-label{font-size: 9px;font-weight: 800;color:var(--az-muted);text-transform: uppercase;letter-spacing: 0.3px;margin-bottom: 2px}
.card-param-value{font-size: 12px;font-weight: 800;color:var(--az-text);line-height: 1.2}
.card-desc{border:1px solid var(--az-glass-edge);background:var(--az-glass);border-radius:var(--az-r-card);padding: 8px 10px;font-size: 12px;color:var(--az-text);line-height: 1.5;max-height: 72px;overflow-y: auto;margin-bottom: 10px;scrollbar-width: thin;scrollbar-color:var(--az-line) transparent}
.card-desc::-webkit-scrollbar{width: 4px}
.card-desc::-webkit-scrollbar-track{background: transparent}
.card-desc::-webkit-scrollbar-thumb{background:var(--az-glass);border-radius:var(--az-r-card)}
.card-actions{display: flex;gap: 10px;margin-top: auto;padding-top: 6px}
.btn{width: 100%;text-align: center;text-decoration: none;color:var(--az-text);padding: 11px 14px;border-radius:var(--az-r-control);font-size: 13px;font-weight: 900;border:1px solid var(--az-glass-edge);background:var(--az-action);transition: .18s ease;display: inline-flex;justify-content: center;align-items: center;gap: 8px}
.btn:hover{transform: translateY(-1px);border-color:var(--az-glass-edge);background:var(--az-action)}
.story-section-wrap{margin-top: 4px;margin-bottom: 26px}
.stories-wrapper{display: flex;flex-wrap: wrap;gap: 1rem;padding: 4px 0 1rem 0;justify-content: flex-start}
.story-entry{display: flex;flex-direction: column;align-items: center;position: relative}
.story-item{width: 80px;height: 80px;border-radius: 50%;position: relative;cursor: pointer;flex-shrink: 0;transition: transform .18s ease, box-shadow .18s ease;box-shadow:var(--az-glass-shadow);overflow: visible}
.story-item:hover{transform: translateY(-3px) scale(1.02);box-shadow:var(--az-glass-shadow)}
.story-image{width: 100%;height: 100%;object-fit: cover;border-radius: 50%;display: block;border:1px solid var(--az-glass-edge)}
.owner-icon{position: absolute;bottom: 0;right: 0;width: 24px;height: 24px;border-radius: 50%;border:1px solid var(--az-glass-edge);object-fit: cover;background:var(--az-glass);box-sizing: border-box;transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease}
.story-item:hover .owner-icon{transform: scale(1.06);box-shadow:var(--az-glass-shadow)}
.story-name{width: 80px;margin-top: 6px;font-size: 11px;color:var(--az-text);text-align: center;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
.story-tip{width: auto}
.story-tip::after{bottom: calc(100% + 10px);white-space: nowrap}
.hover-tip-wrap{position: relative;display: block;width: auto}
.hover-tip-wrap::after{content: attr(data-tooltip);position: absolute;left: 50%;bottom: calc(100% + 12px);transform: translateX(-50%) translateY(2px);background:var(--az-accent-soft);color:var(--az-text);border:1px solid var(--az-glass-edge);border-radius:var(--az-r-card);padding: 9px 12px;font-size: 12px;font-weight: 800;line-height: 1.2;white-space: nowrap;box-shadow:var(--az-glass-shadow);opacity: 0;visibility: hidden;pointer-events: none;z-index: 30;transition: opacity .08s ease, transform .08s ease, visibility .08s ease;max-width: min(92vw, 420px);overflow: hidden;text-overflow: ellipsis}
.hover-tip-wrap::before{content: "";position: absolute;left: 50%;bottom: calc(100% + 6px);transform: translateX(-50%) translateY(2px);border-left:1px solid var(--az-glass-edge);border-right:1px solid var(--az-glass-edge);border-top:1px solid var(--az-glass-edge);opacity: 0;visibility: hidden;pointer-events: none;z-index: 29;transition: opacity .08s ease, transform .08s ease, visibility .08s ease}
.hover-tip-wrap:hover::after,
.hover-tip-wrap:hover::before{opacity: 1;visibility: visible;transform: translateX(-50%) translateY(0)}
.posts-container{display: flex;flex-wrap: wrap;justify-content: center;gap: 15px}
.post-item{width: 280px;border-radius:var(--az-r-card);box-shadow:var(--az-glass-shadow);margin: 15px;padding: 15px;background:var(--az-glass);color:var(--az-text);position: relative;overflow: hidden;display: flex;flex-direction: column;align-items: center;justify-content: space-between;text-align: center;transition: transform .3s ease, box-shadow .3s ease}
.post-item:hover{transform: translateY(-5px);box-shadow:var(--az-glass-shadow)}
.post-link, .story-link{width: 100%;color: inherit;text-decoration: none;display: flex;flex-direction: column;align-items: center}
.image-container{position: relative;width: 100%;height: 160px;margin-bottom: 12px}
.image-container img{border-radius:var(--az-r-card);width: 100%;height: 100%;object-fit: cover}
.details-section{width: 100%;display: flex;flex-direction: column;gap: 8px;font-size: 14px;text-align: left}
.details-section p{margin: 0;display: flex;align-items: flex-start}
.details-section i{margin-right: 10px;color:var(--az-text);width: 20px;text-align: center;margin-top: 2px;flex-shrink: 0}
.post-actions{width: 100%;display: flex;justify-content: flex-start;margin-top: 10px;gap: 20px;flex-wrap: wrap}
.action-group{display: flex;align-items: center;gap: 5px}
.action-btn{cursor: pointer;font-size: 18px;color:var(--az-text);transition: color .3s}
.action-btn:hover{color:var(--az-text)}
.like-btn.liked{color:var(--az-text)}
.like-count, .comment-count{font-size: 14px;color:var(--az-text);margin-left: 5px}
.notice{width: min(900px, 100%);margin: 0 auto;padding: 12px 14px;border-radius:var(--az-r-card);border:1px solid var(--az-glass-edge);background:var(--az-glass);color:var(--az-text);font-size: 13px;font-weight: 800;text-align: center}
.share-modal{display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background:var(--az-glass);z-index: 1000;justify-content: center;align-items: center}
.share-modal-content{background:var(--az-glass);padding: 20px;border-radius:var(--az-r-card);display: flex;flex-direction: column;align-items: center;gap: 20px}
.share-option{font-size: 30px;color:var(--az-text);text-decoration: none;transition: transform .3s}
.share-option:hover{transform: scale(1.1)}
.post-details-modal{display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background:var(--az-glass);z-index: 1000;justify-content: center;align-items: center}
.post-details-modal-content{background:var(--az-glass);width: 90%;max-width: 600px;max-height: 80%;overflow-y: auto;padding: 20px;border-radius:var(--az-r-card);box-shadow:var(--az-glass-shadow);position: relative}
.modal-close{position: absolute;top: 15px;right: 20px;font-size: 28px;color:var(--az-text);background:var(--az-glass);width: 35px;height: 35px;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: background .2s;z-index: 10}
.modal-close:hover{background:var(--az-glass)}
.post-details h2{text-align: center;margin-bottom: 20px}
.gallery{display: flex;flex-direction: column;align-items: center;margin-bottom: 20px}
.main-image{width: 100%;max-height: 400px;object-fit: cover;border-radius:var(--az-r-card);margin-bottom: 15px}
.thumbnails{display: flex;gap: 10px;overflow-x: auto;width: 100%;padding: 10px 0}
.thumbnails img{width: 80px;height: 80px;object-fit: cover;cursor: pointer;border-radius:var(--az-r-card);border:1px solid var(--az-glass-edge)}
.thumbnails img.active{border:1px solid var(--az-glass-edge)}
.full-details{width: 100%;display: flex;flex-direction: row;gap: 20px;font-size: 16px;text-align: left}
.info-group{flex: 1;display: flex;flex-direction: column;gap: 10px}
.info-group p{margin: 0;display: flex;align-items: center}
.info-group i{margin-right: 10px;color:var(--az-text);width: 20px;text-align: center}
.description{margin-top: 20px;font-size: 16px;text-align: left;width: 33%}
.description p{margin: 0;display: flex;align-items: flex-start}
.description i{margin-right: 10px;color:var(--az-muted);width: 20px;text-align: center;margin-top: 4px}
.modal-post-actions{display: flex;justify-content: flex-start;margin-top: 20px;gap: 20px;width: 100%}
.comments-section{margin-top: 20px}
.comments-header{font-size: 18px;margin-bottom: 10px}
.comment{border-bottom:1px solid var(--az-glass-edge);padding: 10px 0;display: flex;flex-direction: column}
.comment-header{display: flex;align-items: center}
.comment-avatar{width: 30px;height: 30px;border-radius: 50%;margin-right: 10px}
.comment-author{font-weight: bold}
.comment-text{margin-top: 5px}
.comment-actions{margin-top: 5px;display: flex;gap: 10px}
.comment-actions button{background:var(--az-action);border: none;color:var(--az-text);cursor: pointer;padding: 5px 10px;border-radius:var(--az-r-control)}
.comment-form{display: flex;gap: 10px;margin-top: 20px}
.comment-form textarea{flex: 1;background:var(--az-glass);color:var(--az-text);border: none;padding: 10px;border-radius:var(--az-r-control)}
.comment-form button{background:var(--az-action);color:var(--az-text);padding: 5px 10px;border: none;border-radius:var(--az-r-control);cursor: pointer}
#story-modal{display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background:var(--az-glass);z-index: 1000;justify-content: center;align-items: center}
#story-modal.active{display: flex}
.story-container{position: relative;width: 400px;height: 600px;background:var(--az-glass);border-radius:var(--az-r-card);overflow: hidden}
.story-close{position: absolute;top: 15px;right: 20px;font-size: 28px;color:var(--az-text);background:var(--az-glass);width: 35px;height: 35px;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: background .2s;z-index: 10}
.story-close:hover{background:var(--az-glass)}
.story-owner{position: absolute;top: 20px;left: 20px;display: flex;align-items: center;z-index: 10}
#story-owner-icon{width: 32px;height: 32px;border-radius: 50%;margin-right: 10px;object-fit: cover;border:1px solid var(--az-glass-edge);box-sizing: border-box;background:var(--az-glass)}
#story-owner-name{color:var(--az-text);font-weight: bold}
.story-image-container{width: 100%;height: 100%;position: relative}
#story-image{width: 100%;height: 100%;object-fit: cover}
.progress-bar{position: absolute;top: 10px;left: 10px;right: 10px;height: 3px;background:var(--az-glass)}
#progress{height: 100%;background:var(--az-glass);width: 0%;transition: width linear}
.story-nav-area{position: absolute;top: 0;bottom: 0;width: 50%;z-index: 10}
.left{left: 0}
.right{right: 0}
@media (max-width: 900px){.inner{padding-left: var(--content-pad) !important;padding-right: var(--content-pad)}
.page-wrap{padding: 12px}
.hero{padding: 16px}
.hero-info{grid-template-columns: 1fr 1fr}}
@media (max-width: 600px){.hero-top{gap: 10px}
.hero-avatar{width: 44px;height: 44px;border-radius:var(--az-r-card)}
.hero-info{grid-template-columns: 1fr}
.hero-back{width: 100%;justify-content: center}
.post-item{width: calc(50% - 30px)}
.post-details-modal-content{padding: 10px}
.full-details{flex-direction: column}
.description{width: 100%}
.comment-form{flex-direction: column}
.story-container{width: 90%;height: 80%;max-width: 350px;max-height: 600px}
.card-params{grid-template-columns: 1fr 1fr}}
@media (max-width: 420px){.post-item{width: 100%;margin: 0}
.tabbtn{width: 100%;justify-content: center}
.stories-wrapper{justify-content: center}
.hover-tip-wrap::after{max-width: 88vw;white-space: normal;text-align: center}}