/* ========================================   Apple-Style Design System - PromptAI v2   ======================================== */:root {    --color-bg:#f5f5f7;--color-surface:#fff;--color-text:#1d1d1f;--color-text-secondary:#6e6e73;--color-text-tertiary:#aeaeb2;    --color-border:#d2d2d7;--color-border-light:#e8e8ed;--color-primary:#0071e3;--color-primary-hover:#0077ed;    --color-success:#34c759;--color-error:#ff3b30;--color-warning:#ff9500;    --space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;    --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;    --shadow-sm:0 1px 3px rgba(0,0,0,.06);--shadow-md:0 4px 14px rgba(0,0,0,.08);--shadow-lg:0 8px 30px rgba(0,0,0,.12);    --transition-fast:150ms cubic-bezier(.4,0,.2,1);--transition-normal:250ms cubic-bezier(.4,0,.2,1);    --font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;}*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;margin:0!important;padding:0!important;background:#fff}body{font-family:var(--font-family);color:var(--color-text);background:#fff;line-height:0;min-height:100vh;margin:0!important;padding:0!important;overflow-x:hidden}a{color:inherit;text-decoration:none}.app{min-height:100vh;display:flex;flex-direction:column;margin:0;padding:0;background:var(--color-bg);line-height:1.5}.main{flex:1;max-width:680px;margin:0 auto;padding:var(--space-3xl) var(--space-lg);width:100%}/* Header */.header{position:sticky;top:0;z-index:100;margin:0;padding:0;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:0.5px solid rgba(0,0,0,.08)}.header-content{max-width:1100px;margin:0 auto;padding:0 var(--space-lg);height:52px;display:flex;align-items:center}.logo{display:flex;align-items:center;gap:var(--space-sm)}.logo-icon{width:32px;height:32px;background:linear-gradient(135deg,#7928ca,#ff0080);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:#fff}.logo-text{font-size:18px;font-weight:600;letter-spacing:-.02em}.nav{display:flex;gap:var(--space-lg);align-items:center;margin-left:auto}.nav-link{font-size:14px;color:var(--color-text-secondary);font-weight:500;transition:color var(--transition-fast)}.nav-link:hover,.nav-link.active{color:var(--color-text)}.nav-user{font-size:13px;color:var(--color-text-secondary);padding:4px 12px;background:var(--color-bg);border-radius:var(--radius-full)}/* Hero */.hero{text-align:center;margin-bottom:var(--space-2xl)}.hero-title{font-size:42px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-bottom:var(--space-sm)}.gradient-text{background:linear-gradient(135deg,#7928ca,#ff0080);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-subtitle{font-size:17px;color:var(--color-text-secondary)}/* Style Grid */.style-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-lg)}.style-card{background:var(--color-surface);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-sm);transition:all var(--transition-normal);cursor:pointer;border:1px solid var(--color-border-light)}.style-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}.style-cover{height:180px;overflow:hidden;background:var(--color-bg)}.style-cover img{width:100%;height:100%;object-fit:cover}.style-cover-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--color-text-tertiary);background:linear-gradient(135deg,#f0f0f5,#e8e8ed)}.style-info{padding:var(--space-md)}.style-title{font-size:16px;font-weight:600;margin-bottom:4px}.style-desc{font-size:13px;color:var(--color-text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}/* Upload */.upload-section{display:flex;flex-direction:column;gap:var(--space-lg)}.upload-area{position:relative;background:var(--color-surface);border:2px dashed var(--color-border);border-radius:var(--radius-xl);padding:var(--space-3xl) var(--space-xl);text-align:center;cursor:pointer;transition:all var(--transition-normal);overflow:hidden}.upload-area:hover{border-color:var(--color-primary);background:rgba(0,113,227,.02)}.upload-area.drag-over{border-color:var(--color-primary);background:rgba(0,113,227,.04);transform:scale(1.01)}.upload-area.has-image{border-style:solid;border-color:var(--color-border-light);padding:var(--space-md);cursor:default}.upload-content{display:flex;flex-direction:column;align-items:center;gap:var(--space-md)}.upload-icon{width:80px;height:80px;background:var(--color-bg);border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);transition:all var(--transition-normal)}.upload-area:hover .upload-icon{background:rgba(0,113,227,.08);color:var(--color-primary);transform:translateY(-2px)}.upload-text{font-size:16px;font-weight:500}.upload-link{color:var(--color-primary);font-weight:500}.upload-hint{font-size:14px;color:var(--color-text-tertiary)}.preview-container{position:relative;width:100%;max-height:400px;border-radius:var(--radius-md);overflow:hidden}.preview-image{width:100%;height:auto;max-height:400px;object-fit:contain;border-radius:var(--radius-md)}.remove-btn{position:absolute;top:var(--space-sm);right:var(--space-sm);width:32px;height:32px;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);border:none;border-radius:var(--radius-full);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.remove-btn:hover{background:rgba(0,0,0,.8);transform:scale(1.1)}/* Buttons */.generate-btn{width:100%;height:52px;background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-full);font-size:16px;font-weight:600;font-family:var(--font-family);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.generate-btn:hover:not(:disabled){background:var(--color-primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,113,227,.3)}.generate-btn:disabled{background:var(--color-text-tertiary);cursor:not-allowed}.generate-btn.loading{background:var(--color-text-tertiary);cursor:not-allowed}.btn-loading{display:flex;align-items:center;gap:var(--space-sm)}.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.save-btn{height:48px;padding:0 var(--space-xl);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-full);font-size:15px;font-weight:600;font-family:var(--font-family);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.save-btn:hover{background:var(--color-primary-hover)}/* Result */.result-section{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-lg);box-shadow:var(--shadow-md);animation:fadeInUp .4s cubic-bezier(.4,0,.2,1)}@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.result-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.result-title{font-size:16px;font-weight:600}.result-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--space-md)}.result-image-item{border-radius:var(--radius-md);overflow:hidden;background:var(--color-bg);border:1px solid var(--color-border-light)}.result-image-item img{width:100%;height:auto;display:block}/* Toast */.toast{position:fixed;bottom:var(--space-xl);left:50%;transform:translateX(-50%) translateY(100px);background:var(--color-text);color:#fff;padding:var(--space-md) var(--space-xl);border-radius:var(--radius-full);font-size:14px;font-weight:500;box-shadow:var(--shadow-lg);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:1000;white-space:nowrap}.toast.show{transform:translateX(-50%) translateY(0)}/* Footer */.footer{text-align:center;padding:var(--space-xl) var(--space-lg);color:var(--color-text-tertiary);font-size:14px}/* Auth */.auth-tabs{display:flex;gap:var(--space-sm);margin-bottom:var(--space-lg);background:var(--color-bg);border-radius:var(--radius-full);padding:4px}.auth-tab{flex:1;padding:10px;border:none;background:transparent;border-radius:var(--radius-full);font-size:14px;font-weight:500;font-family:var(--font-family);cursor:pointer;transition:all var(--transition-fast);color:var(--color-text-secondary)}.auth-tab.active{background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm)}/* Tabs */.tab-bar,.admin-tabs{display:flex;gap:var(--space-sm);margin-bottom:var(--space-lg);flex-wrap:wrap}.tab{padding:8px 16px;border:1px solid var(--color-border-light);background:var(--color-surface);border-radius:var(--radius-full);font-size:13px;font-weight:500;font-family:var(--font-family);cursor:pointer;transition:all var(--transition-fast);color:var(--color-text-secondary)}.tab.active{background:var(--color-text);color:#fff;border-color:var(--color-text)}.tab:hover:not(.active){background:var(--color-bg)}/* Image Grid */.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-md)}.image-card{background:var(--color-surface);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light)}.image-card img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.image-card-info{padding:var(--space-sm) var(--space-md);display:flex;justify-content:space-between;align-items:center}.image-card-style{font-size:12px;font-weight:500;color:var(--color-primary)}.image-card-time{font-size:12px;color:var(--color-text-tertiary)}/* Order Card */.order-card{display:flex;gap:var(--space-md);padding:var(--space-md);background:var(--color-surface);border-radius:var(--radius-lg);border:1px solid var(--color-border-light);margin-bottom:var(--space-md);transition:all var(--transition-fast);cursor:pointer}.order-card:hover{box-shadow:var(--shadow-md);border-color:transparent}.order-card-img{width:80px;height:80px;border-radius:var(--radius-md);overflow:hidden;flex-shrink:0;background:var(--color-bg)}.order-card-img img{width:100%;height:100%;object-fit:cover}.order-card-info{flex:1;min-width:0}.order-card-title{font-size:15px;font-weight:600;margin-bottom:4px}.order-card-status{font-size:12px;font-weight:500}.order-card-stage{font-size:13px;color:var(--color-text-secondary);margin-top:2px}.order-card-time{font-size:12px;color:var(--color-text-tertiary);margin-top:4px}.status-badge{display:inline-block;padding:2px 8px;border-radius:var(--radius-full);font-size:12px;font-weight:500}.status-admin{background:rgba(121,40,202,.1);color:#7928ca}.status-user{background:rgba(0,113,227,.1);color:var(--color-primary)}.status-pending{background:rgba(255,149,0,.1);color:#ff9500}.status-processing{background:rgba(0,113,227,.1);color:var(--color-primary)}.status-completed{background:rgba(52,199,89,.1);color:#34c759}.status-cancelled{background:rgba(255,59,48,.1);color:#ff3b30}.user-dropdown-item{padding:8px 14px;font-size:13px;cursor:pointer;transition:background var(--transition-fast);white-space:nowrap}.user-dropdown-item:hover{background:var(--color-bg)}.user-dropdown-item.danger{color:var(--color-error)}.user-dropdown-item.disabled{color:var(--color-text-tertiary);cursor:default}.status-generated{background:#e2e3e5;color:#383d41}.status-ordered{background:#cce5ff;color:#004085}/* Timeline */.progress-timeline{position:relative;padding-left:28px}.timeline-item{position:relative;padding-bottom:var(--space-lg)}.timeline-item:last-child{padding-bottom:0}.timeline-item::before{content:'';position:absolute;left:11px;top:24px;bottom:0;width:2px;background:var(--color-border-light)}.timeline-item:last-child::before{display:none}.timeline-item.done::before{background:var(--color-success)}.timeline-dot{position:absolute;left:0;top:2px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-size:14px}.timeline-content{padding-left:8px}.timeline-title{font-size:15px;font-weight:600}.timeline-note{font-size:13px;color:var(--color-text-secondary);margin-top:2px}.timeline-time{font-size:12px;color:var(--color-text-tertiary);margin-top:4px}/* Admin */.card{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-xl);box-shadow:var(--shadow-sm);margin-bottom:var(--space-lg)}.card-title{font-size:18px;font-weight:600;margin-bottom:var(--space-lg)}.admin-header{margin-bottom:var(--space-2xl)}.admin-title{font-size:32px;font-weight:700;letter-spacing:-.03em;margin-bottom:var(--space-sm)}.admin-subtitle{font-size:18px;color:var(--color-text-secondary)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-md)}.stat-card{background:var(--color-surface);border-radius:var(--radius-xl);padding:var(--space-xl);text-align:center;box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light);transition:all var(--transition-fast)}.stat-card.clickable{cursor:pointer}.stat-card.clickable:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.stat-card.clickable.active{border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(0,113,227,.15)}.stat-num{font-size:36px;font-weight:700;letter-spacing:-.02em;background:linear-gradient(135deg,#7928ca,#ff0080);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-label{font-size:14px;color:var(--color-text-secondary);margin-top:4px}.admin-list{display:flex;flex-direction:column;gap:var(--space-sm)}.admin-list-item{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md);background:var(--color-bg);border-radius:var(--radius-md);border:1px solid var(--color-border-light);transition:all var(--transition-fast)}.admin-list-item:hover{border-color:var(--color-border)}.admin-list-info{display:flex;flex-direction:column;gap:2px;min-width:0}.admin-list-info strong{font-size:14px}.admin-list-actions{display:flex;gap:var(--space-sm);flex-shrink:0}/* Form */.form-group{margin-bottom:var(--space-lg)}.form-group:last-child{margin-bottom:0}.form-label{display:block;font-size:14px;font-weight:500;margin-bottom:var(--space-sm)}.form-input,.form-textarea,.form-select{width:100%;height:48px;padding:0 var(--space-md);background:var(--color-bg);border:1px solid var(--color-border-light);border-radius:var(--radius-full);font-size:15px;font-family:var(--font-family);color:var(--color-text);transition:all var(--transition-fast);outline:none}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(0,113,227,.1)}.form-textarea{height:auto;min-height:80px;padding:var(--space-md);resize:vertical;line-height:1.6}.form-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2386868b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}.form-hint{font-size:12px;color:var(--color-text-tertiary);margin-top:var(--space-xs)}.input-with-toggle{position:relative}.input-with-toggle .form-input{padding-right:44px}.toggle-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:36px;height:36px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--color-text-tertiary);cursor:pointer;display:flex;align-items:center;justify-content:center}.toggle-btn:hover{color:var(--color-text-secondary);background:var(--color-border-light)}.icon-btn{width:32px;height:32px;background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-sm);color:var(--color-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);font-size:14px}.icon-btn:hover{background:var(--color-border-light);color:var(--color-text)}.icon-btn.danger:hover{background:var(--color-error);border-color:var(--color-error);color:#fff}/* Modal */.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:var(--space-lg);animation:fadeIn .2s ease}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.modal{background:var(--color-surface);border-radius:var(--radius-xl);width:100%;max-width:480px;box-shadow:var(--shadow-xl);animation:modalIn .3s cubic-bezier(.4,0,.2,1)}@keyframes modalIn{from{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--color-border-light)}.modal-title{font-size:18px;font-weight:600}.modal-close{width:32px;height:32px;background:var(--color-bg);border:none;border-radius:var(--radius-full);color:var(--color-text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px}.modal-close:hover{background:var(--color-border-light);color:var(--color-text)}.modal-body{padding:var(--space-md)}.modal-footer{display:flex;justify-content:flex-end;padding:var(--space-md) var(--space-xl) var(--space-lg);gap:var(--space-md)}.modal-cancel-btn{height:40px;padding:0 var(--space-lg);background:var(--color-bg);border:1px solid var(--color-border-light);border-radius:var(--radius-md);font-size:14px;font-weight:500;font-family:var(--font-family);color:var(--color-text);cursor:pointer}.modal-cancel-btn:hover{background:var(--color-border-light)}/* Empty & Loading */.empty-state{text-align:center;padding:var(--space-2xl);color:var(--color-text-tertiary)}.loading-state{text-align:center;padding:var(--space-2xl);color:var(--color-text-tertiary)}/* Responsive */.mobile-only{display:none}@media(max-width:768px){.main{padding:var(--space-xl) var(--space-md)}.hero-title{font-size:28px}.style-grid{grid-template-columns:1fr}.image-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}.stats-grid{grid-template-columns:1fr 1fr}.admin-title{font-size:24px}.tab{font-size:12px;padding:6px 12px}.header .nav{display:none!important}.header .user-menu{display:none!important}.header .header .logo-text{display:none}.header .logo{margin:0}.mobile-only{display:flex!important}.mobile-bottom-nav{display:flex}.app{padding-bottom:90px!important}.tab-bar{display:none!important}.mobile-only{display:flex!important;margin-left:auto}}/* User Menu Dropdown */.user-menu{position:relative}.user-menu-btn{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;background:var(--color-bg);border:1px solid var(--color-border-light);border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-fast);font-family:var(--font-family)}.user-menu-btn:hover{background:var(--color-border-light)}.user-avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#7928ca,#ff0080);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600}.user-dropdown{position:absolute;right:0;top:calc(100% + 6px);background:var(--color-surface);border:1px solid var(--color-border-light);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);min-width:160px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:all var(--transition-fast);z-index:200}.user-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)}.dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;border:none;background:transparent;font-size:14px;font-family:var(--font-family);color:var(--color-text);cursor:pointer;text-align:left;transition:background var(--transition-fast)}.dropdown-item:hover{background:var(--color-bg)}.dropdown-item.disabled{color:var(--color-text-secondary);cursor:default;font-weight:500}.dropdown-item.disabled:hover{background:transparent}.dropdown-divider{height:1px;background:var(--color-border-light);margin:4px 0}.icon-btn.active-admin{background:#fff3cd;border-color:#ffc107;color:#856404}/* Cover Upload */.cover-upload{border:2px dashed var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:all var(--transition-fast)}.cover-upload:hover{border-color:var(--color-primary)}.cover-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px;cursor:pointer;gap:8px;color:var(--color-text-secondary);transition:background var(--transition-fast)}.cover-drop:hover{background:rgba(0,113,227,.02)}.cover-preview{position:relative;max-height:200px;overflow:hidden;cursor:pointer;background:var(--color-bg)}.cover-preview img{width:100%;max-height:200px;object-fit:cover;display:block}.cover-remove{position:absolute;top:8px;right:8px;width:28px;height:28px;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border:none;border-radius:50%;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all var(--transition-fast)}.cover-remove:hover{background:rgba(0,0,0,.8);transform:scale(1.1)}/* Key Management */.key-item{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--color-bg);border:1px solid var(--color-border-light);border-radius:var(--radius-md);margin-bottom:8px;transition:all var(--transition-fast)}.key-item:hover{border-color:var(--color-border)}.key-info{display:flex;align-items:center;gap:10px;min-width:0}.key-index{font-size:12px;font-weight:600;color:var(--color-text-tertiary);width:24px;text-align:center}.key-value{font-family:'SF Mono','Fira Code',monospace;font-size:13px;color:var(--color-text);background:transparent;padding:0;border:0}.key-status{font-size:12px;font-weight:500;padding:4px 10px;border-radius:var(--radius-full)}.key-status.ok{background:#d4edda;color:#155724}.key-status.warn{background:#fff3cd;color:#856404}.key-status.err{background:#f8d7da;color:#721c24}.clear-keys-btn{width:100%;height:40px;background:transparent;border:1px solid var(--color-error);border-radius:var(--radius-md);font-size:13px;font-weight:500;font-family:var(--font-family);color:var(--color-error);cursor:pointer;transition:all var(--transition-fast)}.clear-keys-btn:hover{background:var(--color-error);color:#fff}/* Filter Bar */.filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:var(--space-lg);flex-wrap:wrap}.filter-bar .form-input{height:36px;font-size:13px;padding:0 12px}/* Compare Slider */.compare-wrapper{position:relative;background:#000;border-radius:var(--radius-xl);overflow:hidden;border:none;max-height:calc(100vh - 180px)}.compare-slider{position:relative;width:100%;overflow:hidden;cursor:ew-resize;user-select:none;background:#000}.compare-before{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.compare-before img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;display:block}.compare-after{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2}.compare-after img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;display:block}.compare-label{position:absolute;padding:4px 12px;border-radius:var(--radius-full);font-size:12px;font-weight:600;background:rgba(0,0,0,.5);color:#fff;backdrop-filter:blur(8px)}.compare-label-left{left:12px;bottom:12px}.compare-label-right{right:12px;bottom:12px}.compare-handle{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;z-index:10;transform:translateX(-50%);pointer-events:none;box-shadow:0 0 8px rgba(0,0,0,.3)}.compare-handle-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.3);pointer-events:auto;cursor:ew-resize}.compare-nav{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px}.compare-nav-btn{width:32px;height:32px;border:1px solid var(--color-border-light);background:var(--color-surface);border-radius:50%;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text);transition:all var(--transition-fast)}.compare-nav-btn:hover:not(:disabled){background:var(--color-bg);border-color:var(--color-border)}.compare-nav-btn:disabled{opacity:.3;cursor:not-allowed}.compare-dots{display:flex;gap:6px}.compare-dot{width:8px;height:8px;border-radius:50%;background:var(--color-border);cursor:pointer;transition:all var(--transition-fast)}.compare-dot.active{background:var(--color-primary);transform:scale(1.3)}.compare-zoom-btn{position:absolute;top:12px;right:12px;z-index:20;width:36px;height:36px;background:rgba(255,255,255,.25);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-full);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.compare-zoom-btn:hover{background:rgba(255,255,255,.4);transform:scale(1.1)}/* Lightbox */.lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:2000;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}.lightbox-content{position:relative;max-width:90vw;max-height:90vh;display:flex;align-items:center;justify-content:center}.lightbox-img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:8px}.lightbox-close{position:fixed;top:20px;right:20px;width:40px;height:40px;background:rgba(255,255,255,.15);backdrop-filter:blur(10px);border:none;border-radius:50%;color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);z-index:10}.lightbox-close:hover{background:rgba(255,255,255,.3)}.lightbox-prev,.lightbox-next{position:fixed;top:50%;transform:translateY(-50%);width:48px;height:48px;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:none;border-radius:50%;color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);z-index:10}.lightbox-prev{left:20px}.lightbox-next{right:20px}.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.25)}.lightbox-counter{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:14px;font-weight:500}/* Action Bar */.action-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.action-btn{height:44px;padding:0 20px;border:1px solid var(--color-border-light);background:var(--color-surface);border-radius:var(--radius-md);font-size:14px;font-weight:500;font-family:var(--font-family);color:var(--color-text);cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:6px}.action-btn:hover{background:var(--color-bg);border-color:var(--color-border)}.action-btn.primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.action-btn.primary:hover{background:var(--color-primary-hover)}# Compare inside modal - remove white space.modal-body .compare-wrapper{border-radius:var(--radius-md)}.modal-body .compare-slider{border-radius:var(--radius-md)}

/* Mobile Bottom Navigation */
.mobile-bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:999;background:rgba(255,255,255,.65);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:0.5px solid rgba(0,0,0,.08);padding:10px 0 max(12px,env(safe-area-inset-bottom,12px));justify-content:space-around;align-items:center}
.mobile-nav-item{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:#888;font-size:7px;font-weight:500;padding:8px 14px;border-radius:10px;transition:all .2s}
.mobile-nav-item.active,.mobile-nav-item:active{color:#a855f7}
.mobile-nav-item svg{transition:all .2s}
.mobile-only{display:none}@media(max-width:768px){.mobile-bottom-nav{display:flex}.app{padding-bottom:90px!important}.header .nav{display:none!important}.header .user-menu{display:none!important}.header .header .logo{margin:0}.header .logo-text{display:none}.main{padding-bottom:20px!important}.tab-bar{display:none!important}}
@media(prefers-color-scheme:dark){.mobile-bottom-nav{background:rgba(255,255,255,.65);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:0.5px solid rgba(0,0,0,.08)}.mobile-nav-item{color:#666}.mobile-nav-item.active{color:#0071e3}}
/* Chat System - Apple Glassmorphism */
.chat-float-btn{position:fixed;bottom:90px;right:24px;z-index:998;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:0.5px solid rgba(0,0,0,.08);box-shadow:0 4px 20px rgba(0,0,0,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.4,0,.2,1);color:var(--color-text)}
.chat-float-btn:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(0,0,0,.16)}
.chat-float-btn .badge{position:absolute;top:-2px;right:-2px;width:20px;height:20px;background:var(--color-error);color:#fff;border-radius:50%;font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
.chat-panel{position:fixed;bottom:160px;right:24px;z-index:997;width:380px;height:520px;background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border:0.5px solid rgba(0,0,0,.08);border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.15);display:none;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}
.chat-panel.open{display:flex}
.chat-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:0.5px solid rgba(0,0,0,.06)}
.chat-panel-header h3{font-size:17px;font-weight:600;color:var(--color-text)}
.chat-panel-close{width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.06);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);font-size:16px;transition:all .2s}
.chat-panel-close:hover{background:rgba(0,0,0,.1)}
.chat-contacts{flex:1;min-height:0;overflow-y:auto;padding:8px 12px}
.chat-contact{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;cursor:pointer;transition:all .2s;position:relative}
.chat-contact:hover{background:rgba(0,0,0,.04)}
.chat-contact.active{background:rgba(0,113,227,.08)}
.chat-contact-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#0071e3,#5856d6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:16px;flex-shrink:0}
.chat-contact-info{flex:1;min-width:0}
.chat-contact-name{font-size:15px;font-weight:500;color:var(--color-text)}
.chat-contact-last{font-size:13px;color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-contact-badge{width:18px;height:18px;background:var(--color-error);color:#fff;border-radius:50%;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-contact-time{font-size:11px;color:var(--color-text-tertiary);flex-shrink:0}
.chat-messages-view{flex:1;min-height:0;overflow:hidden;display:none;flex-direction:column}
.chat-messages-view.active{display:flex}
.chat-messages-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:0.5px solid rgba(0,0,0,.06)}
.chat-back-btn{width:28px;height:28px;border:none;background:none;cursor:pointer;color:var(--color-primary);font-size:18px;display:flex;align-items:center;justify-content:center}
.chat-messages-list{flex:1;min-height:0;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.chat-msg{max-width:75%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.45;word-break:break-word}
.chat-msg.sent{align-self:flex-end;background:var(--color-primary);color:#fff;border-bottom-right-radius:4px}
.chat-msg.received{align-self:flex-start;background:rgba(0,0,0,.06);color:var(--color-text);border-bottom-left-radius:4px}
.chat-msg-time{font-size:11px;color:var(--color-text-tertiary);text-align:center;padding:4px 0}
.chat-msg-input{display:flex;gap:8px;padding:12px 16px;border-top:0.5px solid rgba(0,0,0,.06);align-items:center}
.chat-msg-input input{flex:1;height:38px;border:1px solid var(--color-border-light);border-radius:20px;padding:0 16px;font-size:14px;font-family:var(--font-family);outline:none;background:rgba(255,255,255,.8);transition:border-color .2s}
.chat-msg-input input:focus{border-color:var(--color-primary)}
.chat-msg-send{width:38px;height:38px;border-radius:50%;background:var(--color-primary);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.chat-msg-send:hover{background:var(--color-primary-hover)}
.chat-empty{text-align:center;padding:40px 20px;color:var(--color-text-tertiary)}
.chat-empty svg{margin-bottom:12px;opacity:.4}
.chat-empty p{font-size:14px}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.mobile-only{display:none}@media(max-width:768px){.chat-float-btn{display:none!important}.chat-panel{bottom:70px;right:8px;left:8px;width:auto;height:calc(100vh - 140px);border-radius:16px}}
.desktop-only-chat{display:none}
.mobile-only{display:none}@media(max-width:768px){.desktop-only-chat{display:none!important}}


/* Header Message Button */
.header-msg-btn{position:relative;width:36px;height:36px;border:none;background:none;cursor:pointer;color:var(--color-text-secondary);align-items:center;justify-content:center;border-radius:50%;transition:all .2s}
.header-msg-btn:hover{background:rgba(0,0,0,.05);color:var(--color-text)}
.header-msg-btn .badge{position:absolute;top:0;right:0;width:16px;height:16px;background:var(--color-error);color:#fff;border-radius:50%;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;border:1.5px solid #fff}
/* Profile Full Page */
.profile-page{display:flex;flex-direction:column;gap:16px}
.profile-page-avatar-section{display:flex;flex-direction:column;align-items:center;padding:20px 0}
.profile-page-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#0071e3,#5856d6);display:flex;align-items:center;justify-content:center;color:#fff;font-size:32px;font-weight:600;box-shadow:0 4px 16px rgba(0,113,227,.25)}
.profile-page-avatar img{width:80px;height:80px;border-radius:50%;object-fit:cover}
.profile-page-avatar-edit{font-size:14px;color:var(--color-primary);cursor:pointer;margin-top:10px;font-weight:500}
.profile-page-avatar-edit:hover{text-decoration:underline}
.profile-page-card{background:var(--color-surface);border-radius:var(--radius-lg);padding:16px 20px;box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light)}
.profile-page-field label{display:block;font-size:13px;color:var(--color-text-secondary);margin-bottom:8px;font-weight:500}
.profile-page-field-row{display:flex;gap:10px}
.profile-page-field-row input{flex:1;height:42px;border:1px solid var(--color-border-light);border-radius:var(--radius-md);padding:0 14px;font-size:15px;font-family:var(--font-family);outline:none;background:rgba(255,255,255,.8);transition:border-color .2s}
.profile-page-field-row input:focus{border-color:var(--color-primary)}
.profile-page-save-btn{height:42px;padding:0 20px;border:none;background:var(--color-primary);color:#fff;border-radius:var(--radius-md);font-size:14px;font-weight:500;cursor:pointer;font-family:var(--font-family);transition:background .2s;white-space:nowrap}
.profile-page-save-btn:hover{background:var(--color-primary-hover)}
.profile-page-menu-item{display:flex;align-items:center;gap:12px;padding:14px 0;text-decoration:none;color:var(--color-text);font-size:16px;font-weight:500;transition:opacity .2s}
.profile-page-menu-item:hover{opacity:.7}
.profile-page-arrow{margin-left:auto;color:var(--color-text-tertiary);font-size:20px}
.profile-page-menu-divider{height:1px;background:var(--color-border-light)}
.profile-page-logout-btn{width:100%;height:48px;border:1px solid var(--color-error);background:none;color:var(--color-error);border-radius:var(--radius-md);font-size:16px;font-weight:500;cursor:pointer;font-family:var(--font-family);transition:all .2s;margin-top:8px}
.profile-page-logout-btn:hover{background:var(--color-error);color:#fff}
/* User Dropdown Profile */
.dropdown-profile{display:flex;align-items:center;gap:10px;padding:12px 16px}
.dropdown-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#0071e3,#5856d6);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:16px;flex-shrink:0}
.dropdown-name{font-size:15px;font-weight:600;color:var(--color-text)}
.user-dropdown .dropdown-item{display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:14px;color:var(--color-text);cursor:pointer;transition:background .15s;text-decoration:none;border:none;background:none;width:100%;text-align:left;font-family:var(--font-family)}
.user-dropdown .dropdown-item:hover{background:rgba(0,0,0,.04)}
.dropdown-logout{color:var(--color-error)!important;border-top:0.5px solid rgba(0,0,0,.06)!important;margin-top:4px;padding-top:12px!important}
/* Profile Overlay (for password change modal) */
.profile-overlay{position:fixed;inset:0;z-index:1001;background:rgba(0,0,0,.3);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;animation:fadeIn .2s}
.profile-panel{width:380px;max-height:85vh;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(24px);-webkit-backdrop-filter:saturate(180%) blur(24px);border:0.5px solid rgba(0,0,0,.08);border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.15);overflow:hidden;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}
.profile-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:0.5px solid rgba(0,0,0,.06)}
.profile-header h3{font-size:17px;font-weight:600}
.profile-body{overflow-y:auto;padding:20px}
.profile-field{margin-bottom:20px}
.profile-field label{display:block;font-size:13px;color:var(--color-text-secondary);margin-bottom:10px;font-weight:500}
.profile-field-row{display:flex;gap:8px}
.profile-field-row input{flex:1;height:38px;border:1px solid var(--color-border-light);border-radius:10px;padding:0 12px;font-size:14px;font-family:var(--font-family);outline:none;background:rgba(255,255,255,.8);transition:border-color .2s}
.profile-field-row input:focus{border-color:var(--color-primary)}
.profile-save-btn{height:38px;padding:0 16px;border:none;background:var(--color-primary);color:#fff;border-radius:10px;font-size:13px;font-weight:500;cursor:pointer;font-family:var(--font-family);transition:background .2s;white-space:nowrap}
.profile-save-btn:hover{background:var(--color-primary-hover)}

/* ============================================================
   品牌红色导航栏（TICK MOM）· Apple 风格
   毛玻璃质感 + 克制的字号 + 柔和悬停反馈，主色保持品牌红
   ============================================================ */
/* 导航：整条透明，链接收进一颗毛玻璃胶囊；下滑隐藏、上滑出现 */
.header{background:transparent;border-bottom:none;box-shadow:none;
  padding-top:calc(10px + env(safe-area-inset-top,0px));   /* 刘海/灵动岛不挡导航 */
  transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .3s ease}
body.nav-hidden .header{transform:translateY(-110%);opacity:0}
.nav{background:rgba(255,255,255,.55);-webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:saturate(180%) blur(18px);border:1px solid rgba(255,255,255,.45);
  border-radius:999px;padding:9px 18px;gap:22px;margin:0 auto;   /* 胶囊居中 */
  box-shadow:0 4px 18px rgba(0,0,0,.08);
  transition:background .3s ease,border-color .3s ease}
/* 首屏（压着视频）：玻璃偏深、字白；滑到卡片屏（白底）：玻璃偏白、字深 */
body.has-hero-video .nav{background:rgba(20,20,22,.34);border-color:rgba(255,255,255,.18)}
body.has-hero-video .nav-link{color:rgba(255,255,255,.9)}
body.has-hero-video .nav-link:hover,body.has-hero-video .nav-link.active{color:#fff}
body.has-hero-video.video-blurred .nav{background:rgba(255,255,255,.55);border-color:rgba(255,255,255,.5)}
body.has-hero-video.video-blurred .nav-link{color:#3a3a3c}
body.has-hero-video.video-blurred .nav-link:hover,
body.has-hero-video.video-blurred .nav-link.active{color:#1d1d1f}
/* logo 在白底上要转深色，不然白 logo 白底看不见 */
/* 其它浅色页面（后台、个人中心、我的作品、登录…）：logo 也用同一套品牌红，和首页卡片屏统一 */
body:not(.has-hero-video) .logo img{
  filter:brightness(0) saturate(100%) invert(20%) sepia(88%) saturate(2600%)
         hue-rotate(346deg) brightness(95%) contrast(96%)}
/* 卡片那屏（白底）：logo 转成品牌红（用滤镜给白色 logo 上色） */
body.has-hero-video.video-blurred .logo img{
  filter:brightness(0) saturate(100%) invert(20%) sepia(88%) saturate(2600%)
         hue-rotate(346deg) brightness(95%) contrast(96%)}

/* 手机底部栏：按最新风格去掉（放在最后，覆盖 media query 里的 display:flex） */
.mobile-bottom-nav,.mobile-only.mobile-bottom-nav{display:none!important}

/* ===== 欢迎页：logo + 圆圈进度条 + 加载文案 ===== */
.splash{position:fixed;inset:0;z-index:9000;background:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:1;transition:opacity .6s ease}
.splash.hide{opacity:0;pointer-events:none}
.splash-inner{display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:0 24px;text-align:center}
.splash-logo{height:34px;width:auto;
  filter:brightness(0) saturate(100%) invert(20%) sepia(88%) saturate(2600%) hue-rotate(346deg) brightness(95%) contrast(96%);
  animation:splashPulse 1.8s ease-in-out infinite}
@keyframes splashPulse{0%,100%{opacity:.6;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.splash-text{font-size:14px;color:#6e6e73;letter-spacing:.08em}
.splash-ring-wrap{position:relative;width:84px;height:84px;display:flex;align-items:center;justify-content:center}
.splash-ring{position:absolute;inset:0;width:84px;height:84px;transform:rotate(-90deg)}
.splash-ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.ring-bg{stroke:#ececec}
.ring-fg{stroke:#bb2c35;transition:stroke-dashoffset .25s ease}
.splash-pct{font-size:13px;color:#8e8e93;font-variant-numeric:tabular-nums}
/* 微信专用：加载完出现的"进入"按钮（点它 = 用户手势，视频才会自动起播） */
.splash-enter{display:none;margin-top:6px;padding:12px 28px;border:none;border-radius:999px;
  background:#bb2c35;color:#fff;font-size:15px;font-weight:600;font-family:inherit;
  cursor:pointer;box-shadow:0 6px 20px rgba(187,44,53,.35)}
.splash-enter.show{display:inline-block;animation:splashPulse 1.8s ease-in-out infinite}

/* 声音开关按钮：只在被浏览器拦成静音时出现，点了就开声音并自动隐藏 */
.sound-btn{position:fixed;right:18px;bottom:18px;z-index:9500;display:none;
  padding:9px 16px;border:1px solid rgba(0,0,0,.08);border-radius:999px;
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(180%) blur(18px);
  backdrop-filter:blur(18px);font-size:13px;font-weight:500;color:#3a3a3c;
  font-family:inherit;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.12)}
.sound-btn.show{display:block}
.sound-btn:active{transform:scale(.96)}

/* 手机端不播放视频时：用 CSS 缓慢推近让"视频首帧"动起来（不是海报文件，就是视频本身的一帧） */
body.no-video-autoplay .hero-video video{
  animation:heroPosterZoom 24s ease-in-out infinite alternate}
/* 手机端背景 = 视频首帧画成的 canvas（页面里没有 video 元素，手机就不可能弹自己的播放器） */
.hero-video-snap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:heroPosterZoom 24s ease-in-out infinite alternate}

/* ===== 防下载（尽量挡住"长按保存/右键另存为/拖拽保存"）===== */
.hero-video video,.hero-video-snap,
.style-grid .style-card,.style-grid .style-cover img{
  -webkit-touch-callout:none;      /* iOS 长按不弹"存储图像" */
  -webkit-user-select:none;user-select:none;
  -webkit-user-drag:none;user-drag:none;
  pointer-events:none                /* 让"长按媒体元素"这条路径直接不成立 */
}
.style-grid .style-card{pointer-events:auto}   /* 卡片本身还要能点进详情 */

/* ===== 品牌层：视频播 3 秒后 logo 淡入浮在视频上；多滑几下再出现 slogan ===== */
.hero-brand{display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-bottom:16px;opacity:0;transform:translateY(10px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.hero-brand.show{opacity:1;transform:none}
.hero-brand-logo{height:46px;width:auto}
.hero-brand-tag{font-size:14px;letter-spacing:.16em;color:rgba(255,255,255,.94);
  text-shadow:0 2px 18px rgba(0,0,0,.45);
  opacity:0;transform:translateY(8px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.hero-brand-tag.show{opacity:1;transform:none}
/* 滑到卡片屏（白底）时，logo 与标语跟着转深/转红，保证看得见 */
body.has-hero-video.video-blurred .hero-brand-logo{
  filter:brightness(0) saturate(100%) invert(20%) sepia(88%) saturate(2600%) hue-rotate(346deg) brightness(95%) contrast(96%)}
body.has-hero-video.video-blurred .hero-brand-tag{color:#1d1d1f;text-shadow:none}
@media(max-width:768px){
  .hero-brand-logo{height:36px}
  .hero-brand-tag{font-size:12px}
}

/* 滚动后给导航垫一层毛玻璃，挡住从底下滚过去的文字（首屏保持透明） */
body.nav-scrolled .header{background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:0.5px solid rgba(0,0,0,.06)}

/* 浅色页面（后台/个人中心/我的作品…）：胶囊做实一点、字用深色，保证看得清 */
body:not(.has-hero-video) .nav{background:rgba(255,255,255,.88);border-color:rgba(0,0,0,.06)}
body:not(.has-hero-video) .nav-link{color:#3a3a3c}
body:not(.has-hero-video) .nav-link:hover,
body:not(.has-hero-video) .nav-link.active{color:#1d1d1f}

/* 导航改成"整条拉通"的毛玻璃条：圆角只在底部，logo 靠左、其余靠右 */
.header{background:rgba(255,255,255,.8);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:0.5px solid rgba(0,0,0,.06);border-radius:0 0 16px 16px}
/* 毛玻璃就得真模糊：把之前为省性能关掉的 backdrop-filter 打开（后面内容会糊在玻璃后） */
body.has-hero-video .header{
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}

/* 导航只保留文字，去掉里面那层"胶囊框"；整体再往屏幕右边贴一点 */
.nav,.nav:hover,
body:not(.has-hero-video) .nav,body.has-hero-video .nav,
body.has-hero-video.video-blurred .nav{
  background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important}
.header-content{padding:0 12px 0 28px}

/* 玻璃透明度调到"能看出高斯模糊"这一档：
   后面滚过去的文字会被磨成糊影（不是完全看不见，也不是清晰可见） */
.header,body.nav-scrolled .header,body:not(.has-hero-video) .header,
body.has-hero-video.video-blurred .header{
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
/* 首页首屏：不要黑色底（那块"黑框"），只保留高斯模糊 */
body.has-hero-video .header{
  background:transparent!important;
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.header-content{max-width:none;padding:0 28px}
.nav{background:transparent;border:none;box-shadow:none;padding:0;gap:22px;margin:0 0 0 auto}
.nav:hover{background:transparent}
/* 首屏压视频时用深色玻璃；滑到卡片屏再变回浅色 */
body.has-hero-video .header{background:rgba(20,20,22,.34);border-bottom-color:rgba(255,255,255,.14)}
body.has-hero-video.video-blurred .header{background:rgba(255,255,255,.82);border-bottom-color:rgba(0,0,0,.06)}

/* 手机端也保持现在的风格：显示毛玻璃胶囊导航、不要底部栏、不留底部空位 */
@media(max-width:768px){
  .mobile-bottom-nav{display:none!important}
  .app{padding-bottom:0!important}
  .header .nav{display:flex!important}
  .header .user-menu{display:flex!important}
  /* 手机导航：字缩小 + 不换行，别再挤成一列一列 */
  .header{padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .header-content{padding:0 14px;height:48px}
  .logo img{height:22px;width:auto}
  .nav{gap:10px;padding:7px 12px;flex-wrap:nowrap;white-space:nowrap;max-width:calc(100vw - 130px)}
  /* 手机：导航文字全收起来，只留头像（点头像里的菜单换页） */
  .header .nav-link{display:none!important}
  .nav{padding:5px 6px}
  .user-avatar{width:24px;height:24px}
  .user-menu-btn{padding:3px 6px 3px 3px}
  /* 手机卡片：一屏大约 2 张半，比 70% 小一点，看着不挤 */
  body.has-hero-video .style-grid .style-card{flex:0 0 44%;width:auto}
  body.has-hero-video .grid-head{padding-top:44px;margin:0 0 14px}
  body.has-hero-video .grid-head-title{font-size:24px}
}
.header-content{height:48px}
.logo-img{height:20px;width:auto;display:block}
.nav{gap:4px}
.nav-link{font-size:13px;font-weight:500;color:rgba(255,255,255,.82);padding:6px 12px;border-radius:var(--radius-full);transition:color .2s cubic-bezier(.4,0,.2,1),background .2s cubic-bezier(.4,0,.2,1)}
.nav-link:hover,.nav-link.active{color:#fff;background:rgba(255,255,255,.14)}
.nav-user{font-size:12px;color:#fff;background:rgba(255,255,255,.16)}
.header-msg-btn{color:#fff}
.header-msg-btn:hover{background:rgba(255,255,255,.18);color:#fff}
.header-msg-btn .badge{background:#fff;color:#d60011;border-color:#fff}
.user-menu-btn{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff}
.user-menu-btn:hover{background:rgba(255,255,255,.26)}

/* ===== 用户头像上的未读小红点 ===== */
.user-menu-btn{position:relative}
.avatar-dot{position:absolute;top:1px;left:24px;width:11px;height:11px;background:#fff;border-radius:50%;box-shadow:0 0 0 2px #d60011,0 1px 3px rgba(0,0,0,.25);animation:avatarDotPulse 2s infinite}
@keyframes avatarDotPulse{0%{box-shadow:0 0 0 2px #d60011,0 0 0 2px rgba(255,255,255,.55)}70%{box-shadow:0 0 0 2px #d60011,0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 2px #d60011,0 0 0 2px rgba(255,255,255,0)}}

/* ============================================================
   风格卡片 · 极简画廊样式
   标题在上（小号大写、拉开字距）、图片满铺、去掉卡片底色和投影
   ============================================================ */
.style-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:56px 28px}
.style-card{display:flex;flex-direction:column-reverse;gap:14px;background:transparent;border:none;border-radius:0;box-shadow:none;overflow:visible}
.style-card:hover{transform:none;box-shadow:none;border-color:transparent}
.style-cover{height:auto;aspect-ratio:3/4;border-radius:2px;overflow:hidden;background:var(--color-bg)}
.style-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.4,0,.2,1)}
.style-card.hovered .style-cover img{transform:scale(1.04)}
.style-info{padding:0}
.style-title{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0;color:var(--color-text)}
.style-desc{font-size:12px;color:var(--color-text-secondary);margin-top:5px;line-height:1.5}

/* 卡片交互（照 brandonyasin.com）：
   1) 悬停时整张卡上浮 8px —— 用 translate，和入场动画的 transform 互不干扰
   2) 标题做「滚动换行」——同一句话两行叠在 16px 的窗口里，悬停时整体上移一行
   3) 进入视口时淡入上移 */
.style-card{opacity:0;transform:translateY(20px);
  /* scale 由 JS 按滚动速度逐帧设置（不用过渡，否则停下后还会有个回弹尾巴） */
  scale:var(--card-scale,1);
  transition:opacity .6s ease,transform .7s cubic-bezier(.22,1,.36,1),
             translate .35s cubic-bezier(.22,1,.36,1)}
.style-card.in{opacity:1;transform:none}
.style-card.hovered{translate:0 -8px}
/* 滚动过程中不要上浮，滚停后再让鼠标所在的那张浮起来。
   （.hovered 是停下来之后按鼠标坐标自己算的那张：浏览器在内容滚过鼠标后不会更新 :hover） */
.style-grid.scrolling .style-card.hovered{translate:0 0}

.style-title{display:block;height:16px;overflow:hidden;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;margin:0;color:var(--color-text)}
.style-title .roll{display:block;transition:transform .38s cubic-bezier(.22,1,.36,1)}
.style-title .roll span{display:block;height:16px;line-height:16px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.style-card.hovered .style-title .roll{transform:translateY(-16px)}

/* 横向画廊：滚轮一格切一张卡片，停在卡片边缘 */
.style-grid{
  display:flex;flex-wrap:nowrap;gap:8px;
  overflow-x:auto;overflow-y:hidden;
  /* 不要用 CSS 吸附：它会和 JS 的缓动动画互相抢，落位全交给 JS */
  /* 通栏：突破外层容器的宽度限制，左右顶到屏幕边缘（和参考站一样） */
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding:0 16px 6px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
}
.style-grid:active{cursor:grabbing}
.style-grid img{user-select:none;-webkit-user-drag:none}
.style-grid::-webkit-scrollbar{display:none}
.style-grid .style-card{flex:0 0 27.6%}   /* 和参考站一致：约 4 张横排、最后一张露一半 */

/* ===== 首页背景视频（后台上传）=====
   打开网站：全屏视频 + 标题浮在上面；
   往下滑过首屏：视频变成模糊、压暗的背景继续播，风格卡片从它上面滚上来 */
body.has-hero-video{background:#000;transition:background-color .5s ease}
body.has-hero-video .app{background:transparent;position:relative;z-index:1}
.hero-video{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:#000;
  transition:opacity .5s ease;will-change:opacity}
.hero-video video{width:100%;height:100%;object-fit:cover;display:block; 
  transition:filter .7s ease,transform .7s ease}
/* 海报层：垫在视频下面（电脑端视频还在缓冲时也有画面可看），手机端视频被移除后它就是背景 */
.hero-video-poster{position:absolute;inset:0;background-size:cover;background-position:center;
  transform-origin:center;animation:heroPosterZoom 24s ease-in-out infinite alternate}
/* 安卓微信专用：动画 WebP 当背景（动图，无条件自动播放） */
.hero-video-anim{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@keyframes heroPosterZoom{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero-video-shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.12) 42%,rgba(0,0,0,.62) 100%);
  transition:opacity .6s ease}
/* 第一屏视频，紧接着就是卡片，卡片下面不留大片空白 */
body.has-hero-video .main{padding:0 24px 20px;background:transparent;min-height:0}
body.has-hero-video .footer{display:none}   /* 卡片下面只留 20px，不要页脚占位 */
/* 首屏 = 顶部导航(52px) + 英雄区，正好一屏，不再多出 52px */
body.has-hero-video .hero{display:flex;flex-direction:column;
  min-height:calc(100vh - 62px);
  min-height:calc(100dvh - 62px - env(safe-area-inset-top,0px));   /* 手机地址栏也不顶出画面 */
  align-items:center;justify-content:center;margin-bottom:0;text-align:center}
body.has-hero-video .hero-title{color:#fff;font-size:clamp(32px,5.6vw,64px);
  text-shadow:0 2px 30px rgba(0,0,0,.5);transition:color .4s ease,text-shadow .4s ease}
body.has-hero-video .hero-subtitle{color:rgba(255,255,255,.92);text-shadow:0 2px 18px rgba(0,0,0,.5)}
/* 卡片区：紧跟在视频后面，宽度 25% */
body.has-hero-video .style-grid{padding:0 16px}
/* 卡片这屏的标题（和首屏那句话同一句） */
.grid-head{text-align:center;margin:6px 0 22px}
/* 有视频时：标题下移避开顶部导航；卡片尺寸保持原样，页面高度跟着卡片走 */
body.has-hero-video .grid-head{padding-top:64px;margin:0 0 18px}
.grid-head-title{font-size:clamp(24px,3.2vw,38px);font-weight:700;letter-spacing:-.02em;color:var(--color-text)}
.grid-head-sub{font-size:15px;color:var(--color-text-secondary);margin-top:8px}
/* 卡片尺寸固定（高度跟着窗口高度走，最高 380px），宽度按 3:4 自动算：
   屏幕宽就多露几张、窄就少露几张，最后一张露一半也不用管 —— 由屏幕宽度决定 */
body.has-hero-video{--card-cover-h:min(42vh,380px)}
body.has-hero-video .style-grid .style-card{flex:0 0 auto;width:calc(var(--card-cover-h) * .75)}
body.has-hero-video .style-cover{height:var(--card-cover-h);aspect-ratio:auto}
@media(max-width:768px){
  body.has-hero-video .style-grid .style-card{flex:0 0 70%;width:auto}
  body.has-hero-video .style-cover{height:auto;aspect-ratio:3/4}
}
/* 滚到卡片之后：视频变成"白色模糊"继续播（提亮 + 白色蒙层，不再压暗） */
/* 只改模糊和亮度、不做缩放位移：滑动卡片时背景视频不会"动" */
body.has-hero-video.video-blurred .hero-video video{filter:blur(40px) brightness(1.8) saturate(.9)}
body.has-hero-video.video-blurred .hero-video-shade{background:rgba(255,255,255,.6)}
/* 滑到卡片时：一层白色盖满，背景变成纯白 */
.hero-video-white{position:absolute;inset:0;background:#fff;opacity:0;
  transition:opacity .55s ease;pointer-events:none}
body.has-hero-video.video-blurred .hero-video-white{opacity:1}
/* 卡片那屏：整层视频淡出、背景纯白 —— 不再每帧合成全屏模糊，Chrome 也顺了 */
body.has-hero-video.video-blurred{background:#fff}
/* 背景变纯白之后，标题必须跟着转深色，不然白字叠白底就"消失"了 */
body.has-hero-video.video-blurred .hero-title{color:#1d1d1f;text-shadow:none}
body.has-hero-video.video-blurred .hero-subtitle{color:#6e6e73;text-shadow:none}
body.has-hero-video.video-blurred .hero-video{opacity:0}
/* 顶部导航在视频上时不要 backdrop 模糊（它每帧都要重算，很吃性能） */
/* 毛玻璃要真模糊：这里以前为了省性能关掉了，现在开回来（后面内容会被高斯模糊） */
body.has-hero-video .header{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
@media(max-width:768px){
  .style-grid .style-card{flex:0 0 78%}
}

/* ===== 自定义光标：鼠标悬停在卡片上时，箭头变成「白圆 + 箭头」（参考 driessenarchitectuur.nl）=====
   只在指针是鼠标 / 触控笔时才出现（JS 判断），手机、iPad 上完全不受影响 */
.cursor-arrow{position:fixed;left:0;top:0;z-index:9600;width:64px;height:64px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none;
  opacity:0;transform:translate(-50%,-50%) scale(.4);will-change:left,top,transform;
  transition:opacity .18s ease,transform .26s cubic-bezier(.22,1,.36,1);
  box-shadow:0 6px 24px rgba(0,0,0,.22)}
.cursor-arrow.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.cursor-arrow svg{width:24px;height:24px;display:block}
/* 悬停卡片时把系统箭头藏起来，只留这个圆 */
.style-grid.cursor-arrow-on .style-card{cursor:none}