.layout{min-height:100vh;display:flex;flex-direction:column}.navbar{position:fixed;top:20px;left:50%;transform:translate(-50%);width:80%;max-width:1200px;background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:50px;padding:12px 24px;box-shadow:0 4px 20px #0000001a;z-index:1000;transition:all .3s ease}.navbar:hover{box-shadow:0 6px 30px #00000026}.navbar-content{display:flex;align-items:center;justify-content:space-between;gap:20px}.navbar-logo{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:20px;font-weight:700;color:var(--color-coral);transition:transform .3s ease}.navbar-logo:hover{transform:scale(1.05)}.navbar-logo img{width:32px;height:32px;object-fit:contain}.navbar-items{display:flex;align-items:center;gap:8px;flex:1;justify-content:center}.navbar-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;border:none;background:transparent;cursor:pointer;border-radius:var(--radius-md);transition:all .3s ease;position:relative;min-width:70px}.navbar-item:hover{background:var(--color-ocean-light);transform:translateY(-2px)}.navbar-item.active{background:linear-gradient(135deg,var(--color-coral-light),var(--color-ocean-light));color:var(--color-coral-dark)}.navbar-icon{font-size:24px;line-height:1}.navbar-label{font-size:12px;font-weight:500}.navbar-badge{position:absolute;top:4px;right:8px;width:8px;height:8px;background:var(--color-error);border-radius:50%;border:2px solid white}.navbar-user{display:flex;align-items:center}.navbar-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;cursor:pointer;border:2px solid var(--color-coral);transition:all .3s ease}.navbar-avatar:hover{transform:scale(1.1);box-shadow:0 0 0 3px #ffb4a24d}.layout-main{flex:1;margin-top:100px;padding:20px;max-width:1200px;width:100%;margin-left:auto;margin-right:auto}@media (max-width: 768px){.navbar{top:auto;bottom:20px;width:90%;border-radius:30px;padding:10px 16px}.navbar-content{gap:8px}.navbar-logo{display:none}.navbar-items{gap:4px;flex:1}.navbar-item{min-width:60px;padding:6px 12px}.navbar-icon{font-size:20px}.navbar-label{font-size:11px}.navbar-user{display:none}.layout-main{margin-top:0;margin-bottom:100px;padding:16px}}.beach-container{padding:20px;max-width:1400px;margin:0 auto}.beach-header{margin-bottom:24px}.beach-header h1{font-size:24px;color:var(--color-coral-dark);font-weight:600}.beach-loading{text-align:center;padding:60px 20px;color:var(--color-gray-dark);font-size:16px}.beach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px}.beach-card{aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-white);box-shadow:var(--shadow-sm);cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column}.beach-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.beach-card-header{display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--color-gray-light)}.beach-card-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--color-coral-light)}.beach-card-author{flex:1;min-width:0}.beach-card-username{font-size:13px;font-weight:500;color:var(--color-black);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.beach-card-time{font-size:11px;color:var(--color-gray-dark);margin-top:2px}.access-badge{font-size:10px;padding:2px 6px;border-radius:4px;white-space:nowrap}.beach-card-media{flex:1;overflow:hidden;background:var(--color-gray-light)}.beach-card-image{width:100%;height:100%;object-fit:cover}.beach-card-content{padding:12px;font-size:13px;color:var(--color-gray-dark);line-height:1.5;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.beach-card-stats{display:flex;align-items:center;gap:16px;padding:12px;border-top:1px solid var(--color-gray-light);font-size:12px;color:var(--color-gray-dark)}.beach-card-like{cursor:pointer;transition:color .3s ease;-webkit-user-select:none;user-select:none}.beach-card-like:hover,.beach-card-like.liked{color:var(--color-coral)}.beach-load-more{text-align:center;padding:20px}.beach-load-more button{padding:12px 32px;background:var(--color-coral);color:#fff;border:none;border-radius:var(--radius-md);font-size:14px;cursor:pointer;transition:all .3s ease}.beach-load-more button:hover:not(:disabled){background:var(--color-coral-dark);transform:translateY(-2px)}.beach-load-more button:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 1200px){.beach-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width: 768px){.beach-grid{grid-template-columns:repeat(2,1fr);gap:12px}.beach-card-header{padding:10px}.beach-card-avatar{width:32px;height:32px}.beach-card-username{font-size:12px}.beach-card-time{font-size:10px}}.island-container{padding:20px;max-width:1200px;margin:0 auto}.island-header{text-align:center;margin-bottom:40px}.island-header h1{font-size:32px;color:var(--color-coral-dark);margin-bottom:8px;font-weight:600}.island-header p{font-size:16px;color:var(--color-gray-dark)}.island-map{position:relative;width:100%;aspect-ratio:1;max-width:800px;margin:0 auto 40px;background:linear-gradient(135deg,var(--color-ocean-light) 0%,var(--color-sand-light) 100%);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden}.island-background{position:absolute;width:100%;height:100%;opacity:.3}.island-svg{width:100%;height:100%}.building{position:absolute;transform:translate(-50%,-50%);cursor:pointer;transition:all .3s ease;text-align:center;z-index:10}.building:hover{transform:translate(-50%,-50%) scale(1.1);z-index:20}.building-icon{font-size:48px;margin-bottom:8px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.2));animation:float 3s ease-in-out infinite}.building:nth-child(2) .building-icon{animation-delay:0s}.building:nth-child(3) .building-icon{animation-delay:.6s}.building:nth-child(4) .building-icon{animation-delay:1.2s}.building:nth-child(5) .building-icon{animation-delay:1.8s}.building:nth-child(6) .building-icon{animation-delay:2.4s}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.building-name{font-size:14px;font-weight:600;color:var(--color-black);background:#ffffffe6;padding:4px 8px;border-radius:var(--radius-sm);white-space:nowrap;box-shadow:var(--shadow-sm);margin-top:4px}.building-lock{position:absolute;top:-8px;right:-8px;font-size:20px;background:var(--color-error);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.building.accessible .building-icon{filter:drop-shadow(0 2px 8px rgba(255,180,162,.4))}.building.locked{opacity:.6}.building.locked .building-icon{filter:grayscale(.5)}.island-legend{display:flex;justify-content:center;gap:32px;padding:20px;background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);max-width:400px;margin:0 auto}.legend-item{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--color-gray-dark)}.legend-icon{font-size:24px}.legend-icon.locked{filter:grayscale(.5)}@media (max-width: 768px){.island-map{max-width:100%}.building-icon{font-size:36px}.building-name{font-size:12px;padding:3px 6px}.island-legend{flex-direction:column;gap:16px}}.post-create-container{max-width:800px;margin:0 auto;padding:20px}.post-create-error{text-align:center;padding:60px 20px;background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.post-create-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid var(--color-gray-light)}.post-create-header h2{font-size:20px;color:var(--color-coral-dark);font-weight:600}.header-actions{display:flex;align-items:center;gap:16px}.btn-cancel{padding:8px 16px;background:transparent;border:1px solid var(--color-gray);border-radius:var(--radius-md);color:var(--color-gray-dark);cursor:pointer;transition:all .3s ease}.btn-cancel:hover{border-color:var(--color-coral);color:var(--color-coral)}.btn-submit{padding:8px 24px;background:var(--color-coral);border:none;border-radius:var(--radius-md);color:#fff;cursor:pointer;font-weight:500;transition:all .3s ease}.btn-submit:hover:not(:disabled){background:var(--color-coral-dark);transform:translateY(-2px)}.btn-submit:disabled{opacity:.6;cursor:not-allowed}.schedule-toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--color-gray-dark);cursor:pointer}.post-create-form{background:var(--color-white);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}.post-settings{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--color-gray-light)}.setting-group{display:flex;gap:24px;margin-bottom:16px}.setting-group label{display:flex;align-items:center;gap:6px;font-size:14px;cursor:pointer}.price-setting,.schedule-setting{margin-top:16px}.price-setting label,.schedule-setting label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--color-black)}.content-type{display:flex;gap:12px;margin-bottom:20px}.type-btn{padding:10px 20px;background:var(--color-gray-light);border:2px solid transparent;border-radius:var(--radius-md);cursor:pointer;font-size:14px;transition:all .3s ease}.type-btn:hover{background:var(--color-ocean-light)}.type-btn.active{background:var(--color-coral-light);border-color:var(--color-coral);color:var(--color-coral-dark)}.topic-input{margin-bottom:20px}.topic-input label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--color-black)}.content-input{margin-bottom:20px}.content-textarea{width:100%;padding:16px;border:2px solid var(--color-gray);border-radius:var(--radius-md);font-size:14px;font-family:inherit;resize:vertical;min-height:150px;transition:all .3s ease}.content-textarea:focus{outline:none;border-color:var(--color-coral);box-shadow:0 0 0 3px #ffb4a21a}.media-upload{margin-top:20px}.upload-label{display:inline-block;cursor:pointer}.upload-button{display:inline-block;padding:12px 24px;background:var(--color-ocean-light);color:var(--color-ocean-dark);border-radius:var(--radius-md);font-size:14px;transition:all .3s ease}.upload-button:hover{background:var(--color-ocean);color:#fff}.media-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;margin-top:16px}.media-item{position:relative;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;background:var(--color-gray-light)}.media-preview-image,.media-preview-video{width:100%;height:100%;object-fit:cover}.media-remove{position:absolute;top:4px;right:4px;width:24px;height:24px;background:#0009;color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.media-remove:hover{background:#f00c}@media (max-width: 768px){.post-create-header{flex-direction:column;align-items:flex-start;gap:12px}.header-actions{width:100%;justify-content:space-between}.setting-group{flex-direction:column;gap:12px}.content-type{flex-direction:column}.type-btn{width:100%}}.chat-container{max-width:1400px;margin:0 auto;padding:20px;height:calc(100vh - 140px);display:flex;flex-direction:column}.chat-header{margin-bottom:20px}.chat-header h1{font-size:24px;color:var(--color-coral-dark);font-weight:600}.chat-error{text-align:center;padding:60px 20px;color:var(--color-gray-dark);font-size:16px}.chat-layout{display:flex;gap:20px;flex:1;min-height:0}.chat-sidebar{width:300px;background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden}.chat-tabs{display:flex;border-bottom:2px solid var(--color-gray-light)}.tab-item{flex:1;padding:12px;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;font-size:14px;color:var(--color-gray-dark);transition:all .3s ease}.tab-item:hover{background:var(--color-ocean-light)}.tab-item.active{color:var(--color-coral);border-bottom-color:var(--color-coral);background:var(--color-coral-light)}.chat-list,.notification-list{flex:1;overflow-y:auto;padding:8px}.empty-list{text-align:center;padding:40px 20px;color:var(--color-gray-dark);font-size:14px}.chat-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius-md);cursor:pointer;transition:all .3s ease;margin-bottom:4px}.chat-item:hover{background:var(--color-ocean-light)}.chat-item-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--color-coral-light)}.chat-item-info{flex:1;min-width:0}.chat-item-name{font-size:14px;font-weight:500;color:var(--color-black);margin-bottom:4px}.chat-item-preview{font-size:12px;color:var(--color-gray-dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-item-badge{background:var(--color-error);color:#fff;font-size:12px;padding:2px 6px;border-radius:10px;min-width:18px;text-align:center}.notification-item{display:flex;gap:12px;padding:12px;border-radius:var(--radius-md);margin-bottom:8px;background:var(--color-gray-light);transition:all .3s ease}.notification-item:hover{background:var(--color-ocean-light)}.notification-icon{font-size:24px}.notification-content{flex:1}.notification-title{font-size:14px;font-weight:500;color:var(--color-black);margin-bottom:4px}.notification-text{font-size:13px;color:var(--color-gray-dark);margin-bottom:4px;line-height:1.5}.notification-time{font-size:11px;color:var(--color-gray)}.service-info{padding:24px;text-align:center}.service-avatar{font-size:64px;margin-bottom:12px}.service-name{font-size:18px;font-weight:600;color:var(--color-black);margin-bottom:8px}.service-status{font-size:14px;padding:4px 12px;border-radius:20px;display:inline-block;margin-bottom:16px}.service-status.online{background:var(--color-success);color:#fff}.service-desc{font-size:14px;color:var(--color-gray-dark);line-height:1.6}.chat-main{flex:1;background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;overflow:hidden}.chat-placeholder{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--color-gray-dark)}.placeholder-icon{font-size:64px;margin-bottom:16px}.placeholder-text{font-size:16px}.chat-window{flex:1;display:flex;flex-direction:column;min-height:0}.chat-window-header{padding:16px 20px;border-bottom:1px solid var(--color-gray-light)}.chat-target{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500;color:var(--color-black)}.chat-target-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--color-coral-light)}.status-indicator{font-size:12px;padding:2px 8px;border-radius:12px}.status-indicator.online{background:var(--color-success);color:#fff}.chat-messages{flex:1;overflow-y:auto;padding:20px;background:var(--color-gray-light)}.system-message{text-align:center;font-size:12px;color:var(--color-gray-dark);margin-bottom:16px;padding:8px;background:#ffffff80;border-radius:var(--radius-sm)}.empty-messages{text-align:center;color:var(--color-gray-dark);padding:40px}.chat-input-area{padding:16px;border-top:1px solid var(--color-gray-light);background:var(--color-white)}.chat-input-tools{display:flex;gap:8px;margin-bottom:8px}.tool-btn{width:32px;height:32px;background:var(--color-gray-light);border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:16px;transition:all .3s ease}.tool-btn:hover{background:var(--color-ocean-light)}.chat-input{width:100%;padding:12px;border:2px solid var(--color-gray);border-radius:var(--radius-md);font-size:14px;font-family:inherit;resize:none;margin-bottom:8px;transition:all .3s ease}.chat-input:focus{outline:none;border-color:var(--color-coral);box-shadow:0 0 0 3px #ffb4a21a}.chat-send-btn{width:100%;padding:10px;background:var(--color-coral);color:#fff;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease}.chat-send-btn:hover:not(:disabled){background:var(--color-coral-dark);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.chat-send-btn:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 768px){.chat-layout{flex-direction:column}.chat-sidebar{width:100%;max-height:300px}.chat-container{height:auto;min-height:calc(100vh - 140px)}}.profile-container{max-width:1200px;margin:0 auto;padding:20px}.profile-error{text-align:center;padding:60px 20px;color:var(--color-gray-dark);font-size:16px}.profile-card{background:var(--color-white);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);margin-bottom:24px}.profile-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px;padding-bottom:20px;border-bottom:2px solid var(--color-gray-light)}.profile-avatar-section{display:flex;align-items:center;gap:20px}.profile-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--color-coral);box-shadow:var(--shadow-md)}.profile-info{flex:1}.profile-island-name{font-size:24px;color:var(--color-coral-dark);margin-bottom:8px;font-weight:600}.profile-membership{display:flex;align-items:center;gap:8px}.membership-badge{font-size:14px;color:var(--color-coral-dark);background:var(--color-coral-light);padding:4px 12px;border-radius:20px}.btn-edit{padding:10px 20px;background:var(--color-ocean);color:#fff;border:none;border-radius:var(--radius-md);font-size:14px;cursor:pointer;transition:all .3s ease}.btn-edit:hover{background:var(--color-ocean-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.profile-stats{display:flex;gap:40px;justify-content:center}.stat-item{text-align:center;cursor:pointer;transition:all .3s ease;padding:12px;border-radius:var(--radius-md)}.stat-item:hover{background:var(--color-ocean-light);transform:translateY(-2px)}.stat-value{font-size:28px;font-weight:700;color:var(--color-coral);margin-bottom:4px}.stat-label{font-size:14px;color:var(--color-gray-dark)}.profile-actions{background:var(--color-white);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);margin-bottom:24px}.actions-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}.actions-row:last-child{margin-bottom:0}.action-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:var(--color-gray-light);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all .3s ease}.action-btn:hover{background:var(--color-ocean-light);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.action-btn.primary{background:linear-gradient(135deg,var(--color-coral-light),var(--color-ocean-light));grid-column:span 4}.action-btn.primary:hover{background:linear-gradient(135deg,var(--color-coral),var(--color-ocean));color:#fff}.action-icon{font-size:32px}.action-label{font-size:13px;color:var(--color-black);font-weight:500}.action-btn.primary .action-label{font-size:16px;font-weight:600}.profile-posts-section{background:var(--color-white);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--color-gray-light)}.section-header h3{font-size:20px;color:var(--color-coral-dark);font-weight:600}.btn-create-post{padding:8px 16px;background:var(--color-coral);color:#fff;border:none;border-radius:var(--radius-md);font-size:14px;cursor:pointer;transition:all .3s ease}.btn-create-post:hover{background:var(--color-coral-dark);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.loading{text-align:center;padding:40px;color:var(--color-gray-dark)}.empty-posts{text-align:center;padding:60px 20px}.empty-posts p{font-size:16px;color:var(--color-gray-dark);margin-bottom:20px}.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.post-thumbnail{position:relative;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;transition:all .3s ease;background:var(--color-gray-light)}.post-thumbnail:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}.thumbnail-image{width:100%;height:100%;object-fit:cover}.thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px;background:var(--color-ocean-light)}.thumbnail-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.6),transparent);padding:8px;display:flex;gap:12px;font-size:12px;color:#fff;opacity:0;transition:opacity .3s ease}.post-thumbnail:hover .thumbnail-overlay{opacity:1}@media (max-width: 768px){.profile-header{flex-direction:column;gap:16px}.btn-edit{width:100%}.profile-stats{gap:20px}.stat-value{font-size:24px}.actions-row{grid-template-columns:repeat(2,1fr)}.action-btn.primary{grid-column:span 2}.posts-grid{grid-template-columns:repeat(2,1fr)}}.auth-container{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,var(--color-ocean-light) 0%,var(--color-sand-light) 100%)}.auth-card{width:100%;max-width:420px;background:var(--color-white);border-radius:var(--radius-xl);padding:40px;box-shadow:var(--shadow-lg);animation:fadeIn .5s ease-out}.auth-header{text-align:center;margin-bottom:32px}.auth-logo{width:80px;height:80px;margin-bottom:16px;object-fit:contain}.auth-header h1{font-size:28px;color:var(--color-coral-dark);margin-bottom:8px}.auth-header p{color:var(--color-gray-dark);font-size:14px}.auth-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-size:14px;font-weight:500;color:var(--color-black)}.form-actions{display:flex;justify-content:flex-end}.forgot-link{font-size:13px;color:var(--color-coral);text-decoration:none;transition:color .3s ease}.forgot-link:hover{color:var(--color-coral-dark)}.auth-error{padding:12px;background:var(--color-error);color:#fff;border-radius:var(--radius-md);font-size:13px;text-align:center}.auth-success{padding:12px;background:var(--color-success);color:#fff;border-radius:var(--radius-md);font-size:13px;text-align:center}.auth-footer{text-align:center;font-size:14px;color:var(--color-gray-dark)}.auth-link{color:var(--color-coral);text-decoration:none;font-weight:500;margin:0 4px;transition:color .3s ease}.auth-link:hover{color:var(--color-coral-dark);text-decoration:underline}.auth-agreement{text-align:center;font-size:12px;color:var(--color-gray-dark);margin-top:16px;line-height:1.6}@media (max-width: 768px){.auth-card{padding:32px 24px}.auth-header h1{font-size:24px}}.post-detail-container{max-width:900px;margin:0 auto;padding:20px}.post-detail-loading,.post-detail-error{text-align:center;padding:60px 20px;color:var(--color-gray-dark);font-size:16px}.post-detail-error{display:flex;flex-direction:column;align-items:center;gap:16px}.btn-back{margin-bottom:20px;padding:8px 16px;background:var(--color-gray-light);border:none;border-radius:var(--radius-md);cursor:pointer;font-size:14px;color:var(--color-gray-dark);transition:all .3s ease}.btn-back:hover{background:var(--color-ocean-light);color:var(--color-ocean-dark)}.post-detail-card{background:var(--color-white);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);margin-bottom:24px}.post-detail-header{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--color-gray-light)}.post-detail-avatar{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--color-coral-light)}.post-detail-author{flex:1}.post-detail-username{font-size:16px;font-weight:600;color:var(--color-black);margin-bottom:4px}.post-detail-time{font-size:12px;color:var(--color-gray-dark)}.access-badge{font-size:12px;padding:4px 8px;border-radius:4px}.access-badge.member{background:var(--color-coral-light);color:var(--color-coral-dark)}.access-badge.paid{background:var(--color-ocean-light);color:var(--color-ocean-dark)}.post-detail-content{font-size:16px;line-height:1.8;color:var(--color-black);margin-bottom:20px;white-space:pre-wrap;word-wrap:break-word}.post-detail-media{margin-bottom:20px}.media-item{width:100%;max-height:600px;object-fit:contain;border-radius:var(--radius-md);margin-bottom:12px}.post-detail-topics{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.topic-tag{font-size:13px;color:var(--color-coral);background:var(--color-coral-light);padding:4px 10px;border-radius:20px}.post-detail-stats{display:flex;align-items:center;gap:24px;padding-top:16px;border-top:1px solid var(--color-gray-light)}.stat-btn{background:none;border:none;font-size:16px;cursor:pointer;transition:all .3s ease;color:var(--color-gray-dark)}.stat-btn:hover,.stat-btn.liked{color:var(--color-coral)}.stat-item{font-size:16px;color:var(--color-gray-dark)}.post-detail-comments{background:var(--color-white);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)}.post-detail-comments h3{font-size:18px;color:var(--color-coral-dark);margin-bottom:20px;font-weight:600}.comment-input{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--color-gray-light)}.comment-textarea{width:100%;padding:12px;border:2px solid var(--color-gray);border-radius:var(--radius-md);font-size:14px;font-family:inherit;resize:vertical;margin-bottom:12px;transition:all .3s ease}.comment-textarea:focus{outline:none;border-color:var(--color-coral);box-shadow:0 0 0 3px #ffb4a21a}.btn-comment{padding:8px 20px;background:var(--color-coral);color:#fff;border:none;border-radius:var(--radius-md);font-size:14px;cursor:pointer;transition:all .3s ease}.btn-comment:hover{background:var(--color-coral-dark);transform:translateY(-2px);box-shadow:var(--shadow-sm)}.comments-list{display:flex;flex-direction:column;gap:16px}.no-comments{text-align:center;padding:40px;color:var(--color-gray-dark)}.comment-item{display:flex;gap:12px}.comment-avatar{width:36px;height:36px;border-radius:50%;object-fit:cover;border:2px solid var(--color-coral-light)}.comment-content{flex:1}.comment-author{font-size:14px;font-weight:600;color:var(--color-black);margin-bottom:4px}.comment-text{font-size:14px;color:var(--color-gray-dark);line-height:1.6;margin-bottom:4px}.comment-time{font-size:12px;color:var(--color-gray)}.btn-primary,.btn-secondary{padding:10px 20px;border:none;border-radius:var(--radius-md);font-size:14px;cursor:pointer;transition:all .3s ease}.btn-primary{background:var(--color-coral);color:#fff}.btn-primary:hover{background:var(--color-coral-dark)}.btn-secondary{background:var(--color-gray-light);color:var(--color-gray-dark)}.btn-secondary:hover{background:var(--color-gray)}@media (max-width: 768px){.post-detail-header{flex-wrap:wrap}.post-detail-stats{flex-wrap:wrap;gap:16px}}.membership-container{max-width:1200px;margin:0 auto;padding:20px}.membership-header{text-align:center;margin-bottom:40px}.membership-header h1{font-size:28px;color:var(--color-coral-dark);margin-bottom:16px;font-weight:600}.current-membership{font-size:16px;color:var(--color-gray-dark)}.current-membership strong{color:var(--color-coral);font-size:18px}.expire-date{margin-left:12px;font-size:14px;color:var(--color-gray-dark)}.plans-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:40px}.plan-card{background:var(--color-white);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);transition:all .3s ease;position:relative;display:flex;flex-direction:column}.plan-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.plan-card.current{border:2px solid var(--color-coral);background:linear-gradient(135deg,var(--color-coral-light),var(--color-white))}.discount-badge{position:absolute;top:-12px;right:20px;background:var(--color-error);color:#fff;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;box-shadow:var(--shadow-sm)}.plan-header{margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid var(--color-gray-light)}.plan-header h3{font-size:20px;color:var(--color-coral-dark);margin-bottom:12px;font-weight:600}.plan-price{display:flex;align-items:baseline;gap:8px}.price{font-size:32px;font-weight:700;color:var(--color-coral)}.original-price{font-size:18px;color:var(--color-gray);text-decoration:line-through}.duration{font-size:14px;color:var(--color-gray-dark)}.plan-features{flex:1;margin-bottom:24px}.plan-features h4{font-size:14px;color:var(--color-black);margin-bottom:12px;font-weight:500}.plan-features ul{list-style:none;padding:0;margin:0}.plan-features li{font-size:13px;color:var(--color-gray-dark);margin-bottom:8px;line-height:1.6}.more-features{color:var(--color-coral);font-weight:500}.plan-button{width:100%;padding:12px 24px;background:var(--color-coral);color:#fff;border:none;border-radius:var(--radius-md);font-size:16px;font-weight:500;cursor:pointer;transition:all .3s ease}.plan-button:hover:not(:disabled){background:var(--color-coral-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.plan-button:disabled{opacity:.6;cursor:not-allowed}.plan-button.current{background:var(--color-gray);cursor:default}.faq-section{text-align:center;padding:40px 20px;background:var(--color-white);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.faq-section h2{font-size:20px;color:var(--color-coral-dark);margin-bottom:16px}.faq-link{color:var(--color-coral);text-decoration:none;font-size:16px;transition:color .3s ease}.faq-link:hover{color:var(--color-coral-dark);text-decoration:underline}@media (max-width: 768px){.plans-grid{grid-template-columns:1fr}.membership-header h1{font-size:24px}}.document-container{padding:20px;max-width:900px;margin:0 auto}.document-content{background:var(--color-white);border-radius:var(--radius-lg);padding:40px;box-shadow:var(--shadow-md)}.document-text{white-space:pre-wrap;word-wrap:break-word;font-size:14px;line-height:1.8;color:var(--color-black);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,sans-serif}@media (max-width: 768px){.document-content{padding:24px}}*{margin:0;padding:0;box-sizing:border-box}:root{--color-sand-light: #F5E6D3;--color-sand: #E8D5C4;--color-sand-dark: #D4C4B0;--color-ocean-light: #E6F3FF;--color-ocean: #B8D9F0;--color-ocean-dark: #7FB3D3;--color-coral-light: #FFE5D9;--color-coral: #FFB4A2;--color-coral-dark: #FF8C69;--color-white: #FFFFFF;--color-gray-light: #F5F5F5;--color-gray: #CCCCCC;--color-gray-dark: #666666;--color-black: #333333;--color-primary: var(--color-coral);--color-secondary: var(--color-ocean);--color-success: #52C41A;--color-warning: #FAAD14;--color-error: #FF4D4F;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .1);--shadow-md: 0 4px 8px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 16px rgba(0, 0, 0, .2)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;background:linear-gradient(135deg,var(--color-ocean-light) 0%,var(--color-sand-light) 100%);min-height:100vh;color:var(--color-black);line-height:1.6}#root{min-height:100vh}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-gray-light);border-radius:4px}::-webkit-scrollbar-thumb{background:var(--color-coral);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-coral-dark)}@keyframes wave{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease-out}.btn{padding:10px 20px;border:none;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn-primary{background:var(--color-coral);color:var(--color-white)}.btn-primary:hover{background:var(--color-coral-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--color-ocean);color:var(--color-white)}.btn-secondary:hover{background:var(--color-ocean-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}.card{background:var(--color-white);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm);transition:all .3s ease}.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.input{width:100%;padding:12px 16px;border:2px solid var(--color-gray);border-radius:var(--radius-md);font-size:14px;transition:all .3s ease;background:var(--color-white)}.input:focus{outline:none;border-color:var(--color-coral);box-shadow:0 0 0 3px #ffb4a21a}@media (max-width: 768px){.card{padding:16px}.btn{padding:8px 16px;font-size:13px}}