@import"https://cdn.jsdelivr.net/npm/pretendard@1.3.8/dist/web/static/pretendard.css";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#213547;background-color:#fff}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--color-primary: #667eea;--color-secondary: #6e7de8;--gradient-primary: linear-gradient(135deg, #667eea 0%, #6e7de8 100%);--gradient-soft: linear-gradient(135deg, #f8f9fa 0%, #f2f3f5 100%);--color-gray-50: #fafafa;--color-gray-100: #f5f5f5;--color-gray-200: #e0e0e0;--color-gray-300: #d1d1d1;--color-gray-400: #b0b0b0;--color-gray-500: #888888;--color-gray-600: #666666;--color-gray-700: #444444;--color-gray-800: #333333;--color-gray-900: #1a1a1a;--shadow-sm: 0 2px 4px rgba(0, 0, 0, .06);--shadow-md: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .12);--shadow-xl: 0 16px 48px rgba(0, 0, 0, .16);--shadow-primary: 0 8px 24px rgba(102, 126, 234, .25);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px}.portfolio-create-container,.portfolio-create-v2{width:100%;max-width:1200px;margin:0 auto;padding:40px 20px 120px}.preview-container{width:100%;max-width:1400px;margin:0 auto;padding:40px 20px 100px}.portfolio-view-container{width:100vw}.portfolio-view-container .preview-container{width:100%;max-width:1400px;margin:0 auto;padding:40px 20px 100px}.portfolio-view-container{width:100vw;min-height:100vh;background:#fafafa}.portfolio-view-layout{display:flex;width:100%;min-height:100vh}.portfolio-sidebar{width:280px;min-height:100vh;background:#fff;border-right:1px solid #e0e0e0;padding:32px 0;position:sticky;top:0;height:100vh;overflow-y:auto}.portfolio-sidebar-header{padding:0 24px 24px;border-bottom:1px solid #e0e0e0;margin-bottom:16px}.portfolio-sidebar-title{font-size:20px;font-weight:700;color:#333;margin:0}.portfolio-nav-item{display:flex;align-items:center;gap:12px;padding:12px 24px;width:100%;background:none;border:none;border-left:3px solid transparent;cursor:pointer;transition:all .2s;color:#666;font-size:15px;text-align:left}.portfolio-nav-item:hover{background:#f5f5f5;color:#333}.portfolio-nav-item.active{background:#e3f2fd;border-left-color:#4fc3f7;color:#4fc3f7;font-weight:600}.portfolio-nav-item .nav-icon{flex-shrink:0}.portfolio-nav-item .nav-label{flex:1}.portfolio-nav-item .nav-count{font-size:13px;color:#999;background:#f5f5f5;padding:2px 8px;border-radius:10px;font-weight:600}.portfolio-nav-item.active .nav-count{background:#fff;color:#4fc3f7}.portfolio-nav-divider{height:1px;background:#e0e0e0;margin:16px 0}.portfolio-nav-section{margin-top:8px}.portfolio-nav-section-title{font-size:12px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.5px;padding:8px 24px;margin-bottom:4px}.portfolio-main-content{flex:1;overflow-y:auto}.portfolio-content{width:100%;max-width:1400px;margin:0 auto;padding:40px 20px}.portfolio-folder-view{width:100%;max-width:1400px;margin:0 auto;padding:40px 20px}.portfolio-folder-header{margin-bottom:32px}.portfolio-folder-title{font-size:28px;font-weight:700;color:#333;margin:0 0 8px}.portfolio-folder-subtitle{font-size:14px;color:#666;margin:0}.portfolio-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}.portfolio-image-card{aspect-ratio:4/3;background:#f5f5f5;border-radius:12px;overflow:hidden;position:relative;box-shadow:0 2px 8px #00000014;transition:all .3s}.portfolio-image-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #00000026}.portfolio-image-card.loading{display:flex;align-items:center;justify-content:center}.portfolio-image{width:100%;height:100%;object-fit:cover}.loading-spinner-small{width:32px;height:32px;border:3px solid #e0e0e0;border-top-color:#4fc3f7;border-radius:50%;animation:spin .8s linear infinite}.empty-folder-message{text-align:center;padding:80px 20px;color:#999}.portfolio-view-v2{width:100vw;min-height:100vh;background:#fafafa}.portfolio-content{width:100%;max-width:1400px;margin:0 auto;padding:0}.portfolio-content-card{width:100%;max-width:1200px;margin:40px auto;background:#fff;border-radius:16px;box-shadow:0 2px 12px #0000000f;overflow:hidden}.portfolio-component-section{padding:40px;position:relative;min-height:0;aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:center}.portfolio-component-section:has(.folder-gallery-component){justify-content:flex-start;overflow:visible}.portfolio-component-section:not(:last-child){border-bottom:1px solid #f0f0f0}.portfolio-component-section:first-child{padding:0;border-bottom:2px solid #e0e0e0}.portfolio-component-section:has(.folder-gallery-component.expanded){aspect-ratio:unset}.portfolio-component-wrapper{margin-bottom:60px;background:#fff;border-radius:16px;padding:40px;box-shadow:0 2px 12px #0000000f}.portfolio-component-wrapper:first-child{margin-top:0;padding:0;box-shadow:0 4px 20px #0000001a}.portfolio-component-wrapper:last-child{margin-bottom:0}.portfolio-folder-select{width:100%;max-width:1400px;margin:0 auto;padding:40px 20px;background:#ffffffe0;border-radius:28px;box-shadow:0 22px 48px #0f172a0f;border:1px solid rgba(255,255,255,.76)}.folder-select-header{margin-bottom:32px}.back-button-simple{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid rgba(15,23,42,.06);background:#f6f8faeb;border-radius:16px;font-size:14px;font-weight:600;color:#4e5968;cursor:pointer;margin-bottom:20px;transition:all .2s}.back-button-simple:hover{background:#eef3f8}.folder-select-title{font-size:34px;font-weight:700;margin-bottom:6px;color:#191f28;line-height:1.22;letter-spacing:-.045em}.folder-select-subtitle{font-size:15px;color:#6b7684;margin-bottom:18px;line-height:1.42;letter-spacing:-.02em;word-break:keep-all}.folder-search-bar{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#f6f8faf5;border:1px solid rgba(15,23,42,.06);border-radius:18px;transition:all .2s}.folder-search-bar:focus-within{border-color:#3182f638;box-shadow:0 0 0 4px #3182f614}.folder-search-input{flex:1;border:none;outline:none;font-size:15px}.folder-selection-info{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;background:#f6f8faf5;border:1px solid rgba(15,23,42,.06);border-radius:20px;margin-top:16px}.selection-summary{display:flex;gap:12px;align-items:center}.selected-count{font-size:15px;font-weight:700;color:#3182f6;letter-spacing:-.02em}.selected-images{font-size:14px;color:#6b7684;letter-spacing:-.02em}.selection-controls{display:flex;gap:12px}.select-all-btn{padding:11px 18px;background:#ffffffe6;border:1px solid rgba(15,23,42,.06);border-radius:16px;font-size:14px;font-weight:600;color:#4e5968;cursor:pointer;transition:all .2s}.select-all-btn:hover{background:#eef3f8}.start-portfolio-btn{display:flex;align-items:center;gap:8px;padding:11px 20px;background:#3182f6;color:#fff;border:none;border-radius:16px;font-size:14px;font-weight:700;cursor:pointer;transition:all .2s;box-shadow:0 14px 28px #3182f638}.start-portfolio-btn:hover:not(:disabled){background:#2377f2;transform:translateY(-1px)}.start-portfolio-btn:disabled{background:#e0e0e0;cursor:not-allowed;transform:none}.folder-select-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px;margin-top:24px}.folder-select-card{position:relative;background:#fffffff0;border:1px solid rgba(15,23,42,.06);border-radius:24px;overflow:hidden;cursor:pointer;transition:all .3s}.folder-select-card:hover{border-color:#3182f629;transform:translateY(-3px);box-shadow:0 18px 34px #0f172a14}.folder-select-card.selected{border-color:#3182f638;background:linear-gradient(180deg,#fffffff7,#f4f8fff0);box-shadow:0 18px 36px #3182f61f}@media(max-width:900px){.folder-select-title{font-size:28px}.folder-selection-info{flex-direction:column;align-items:flex-start;gap:14px}.selection-controls{width:100%;flex-wrap:wrap}}.folder-select-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#f5f5f5;height:200px}.folder-preview-image-large{width:100%;height:100%;overflow:hidden}.folder-preview-image-large img{width:100%;height:100%;object-fit:cover}.folder-empty-preview{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;color:#999;font-size:14px}.folder-select-info{padding:20px}.folder-select-name{font-size:20px;font-weight:700;color:#333;margin-bottom:8px}.folder-select-meta{font-size:14px;color:#666;margin-bottom:12px}.folder-image-count{font-weight:600;color:#4fc3f7}.folder-select-tags{display:flex;flex-wrap:wrap;gap:6px}.folder-tag{display:inline-block;padding:4px 12px;background:#f0f0f0;border-radius:12px;font-size:12px;color:#666}.folder-tag-more{display:inline-block;padding:4px 12px;background:#4fc3f7;color:#fff;border-radius:12px;font-size:12px;font-weight:600}.folder-select-empty{text-align:center;padding:80px 20px;color:#999}.portfolio-header{margin-bottom:24px}.portfolio-header-info{margin-top:16px}.portfolio-title,.preview-title{font-size:24px;font-weight:700;margin:0}.portfolio-title{margin-bottom:8px}.portfolio-subtitle{font-size:14px;color:#666;margin:0}.section-title{font-size:20px;font-weight:700;margin-bottom:16px;color:#333}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.profile-section{background:#fff;border-radius:12px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px #0000000a}.portfolio-name-input{width:100%;padding:16px 20px;border:2px solid #e0e0e0;border-radius:12px;font-size:18px;font-weight:600;outline:none;transition:all .2s;background:#fafafa}.portfolio-name-input:focus{border-color:#4fc3f7;background:#fff;box-shadow:0 0 0 3px #4fc3f71a}.add-component-btn{position:fixed;bottom:100px;right:32px;display:flex;align-items:center;gap:8px;padding:16px 28px;background:#4fc3f7;color:#fff;border:none;border-radius:50px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s;box-shadow:0 4px 20px #4fc3f766;z-index:101}.add-component-btn:hover{background:#3ab0e0;transform:scale(1.05);box-shadow:0 6px 24px #4fc3f780}.back-button{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#f5f5f5;border:none;border-radius:8px;font-size:14px;color:#666;cursor:pointer;margin-bottom:16px;transition:all .2s}.back-button:hover{background:#e0e0e0}.next-button,.create-button{padding:12px 32px;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:8px;transition:all .2s;background:#4fc3f7;color:#fff}.create-button{padding:14px 40px;font-size:16px}.next-button:hover,.create-button:hover{background:#3ab0e0;transform:translateY(-2px)}.next-button:disabled,.create-button:disabled{background:#e0e0e0;cursor:not-allowed;transform:none}.primary-button{background:#4fc3f7;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.primary-button:hover{background:#3ab0e0}.secondary-button{background:#fff;color:#666;border:1px solid #e0e0e0;padding:12px 24px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.secondary-button:hover{background:#f5f5f5}.components-section{margin-bottom:40px;padding:20px 24px;width:100%;max-width:100%;overflow-x:hidden;box-sizing:border-box}.components-list{display:flex;flex-direction:column;gap:32px;width:100%;max-width:100%}.component-item{position:relative;background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 12px #00000014}.component-header-bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #f0f0f0}.component-number{font-size:16px;font-weight:700;color:#4fc3f7;background:#e3f2fd;padding:6px 16px;border-radius:20px;box-shadow:0 2px 6px #4fc3f733;display:flex;align-items:center;gap:4px}.component-page-context{font-size:12px;font-weight:500;color:#757575}.component-source-folder{font-size:13px;color:#666;background:#f5f5f5;padding:6px 12px;border-radius:12px;margin-left:12px}.component-controls{display:flex;gap:8px}.control-btn{padding:8px 12px;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:#666;font-size:16px;font-weight:600}.control-btn:hover:not(:disabled){background:#4fc3f7;color:#fff;border-color:#4fc3f7}.control-btn:disabled{opacity:.3;cursor:not-allowed}.control-btn.delete-btn:hover{background:#f44336;border-color:#f44336}.bottom-bar,.bottom-actions{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e0e0e0;padding:20px;display:flex;justify-content:flex-end;align-items:center;z-index:100}.selection-count{font-size:14px;color:#666}.loading-container,.empty-container{display:flex;align-items:center;justify-content:center;min-height:400px;flex-direction:column;gap:16px}.empty-container{gap:12px}.loading-spinner{width:48px;height:48px;border:4px solid #e0e0e0;border-top-color:#4fc3f7;border-radius:50%;animation:spin .8s linear infinite}.loading-text,.empty-text{color:#999;font-size:14px}.completion-container{width:100%;max-width:600px;margin:0 auto;padding:80px 20px;text-align:center}.completion-card{background:#fff;border-radius:16px;padding:48px;box-shadow:0 4px 16px #00000014}.completion-icon{width:80px;height:80px;background:#4fc3f7;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}.completion-title{font-size:24px;font-weight:700;margin-bottom:12px}.completion-description{font-size:14px;color:#666;margin-bottom:32px}.share-url-container{background:#f5f5f5;padding:16px;border-radius:8px;margin-bottom:24px;display:flex;align-items:center;gap:12px}.share-url-input{flex:1;background:transparent;border:none;font-size:14px;color:#333;outline:none}.copy-button{padding:8px 16px;background:#4fc3f7;color:#fff;border:none;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s}.copy-button:hover{background:#3ab0e0}.completion-actions{display:flex;gap:12px;justify-content:center}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}.modal-content{background:#fff;border-radius:16px;padding:32px;max-width:800px;max-height:80vh;width:100%;overflow:auto;position:relative;z-index:10000}.component-picker-modal{max-width:1000px}.folder-selector-modal{max-width:600px}.folder-list-modal{display:flex;flex-direction:column;gap:12px;max-height:60vh;overflow-y:auto;padding:20px 0}.folder-list-item{display:flex;align-items:center;gap:16px;padding:16px;background:#f8f9fa;border:2px solid #e0e0e0;border-radius:12px;cursor:pointer;transition:all .2s}.folder-list-item:hover:not(.disabled){border-color:#4fc3f7;background:#e3f2fd;transform:translate(4px)}.folder-list-item.disabled{opacity:.5;cursor:not-allowed}.folder-list-icon{font-size:32px}.folder-preview-thumbnail{width:80px;height:80px;border-radius:8px;overflow:hidden;flex-shrink:0}.folder-preview-thumbnail .folder-preview-image-large{width:100%;height:100%}.folder-preview-thumbnail img{width:100%;height:100%;object-fit:cover}.folder-list-info{flex:1}.folder-list-name{font-size:16px;font-weight:600;color:#333;margin-bottom:4px}.folder-list-count{font-size:13px;color:#666;display:flex;align-items:center;gap:8px}.template-label{font-size:14px;font-weight:700;color:#4fc3f7;background:#e3f2fd;padding:8px 16px;border-radius:12px;text-align:center;white-space:nowrap}.insufficient-badge{display:inline-block;padding:2px 8px;background:#ff9800;color:#fff;border-radius:8px;font-size:11px;font-weight:600}.folder-picker-modal{max-width:800px}.folder-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;max-height:60vh;overflow-y:auto;padding:20px 0}.folder-picker-card{background:#f8f9fa;border:2px solid #e0e0e0;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .2s}.folder-picker-card:hover:not(.disabled){border-color:#4fc3f7;transform:translateY(-2px);box-shadow:0 4px 12px #4fc3f733}.folder-picker-card.disabled{opacity:.5;cursor:not-allowed}.folder-picker-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#e0e0e0;height:120px}.folder-preview-image-small{width:100%;height:100%;overflow:hidden}.folder-preview-image-small img{width:100%;height:100%;object-fit:cover}.folder-picker-info{padding:12px}.folder-picker-name{font-size:14px;font-weight:600;margin-bottom:6px;color:#333}.folder-picker-meta{font-size:12px;display:flex;gap:6px;align-items:center}.folder-picker-count.enough{color:#4fc3f7;font-weight:600}.folder-picker-count.not-enough{color:#f44336;font-weight:600}.folder-picker-warning{color:#f44336;font-size:11px}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.modal-title{font-size:20px;font-weight:700;margin:0}.modal-close{background:none;border:none;font-size:32px;cursor:pointer;color:#666;line-height:1;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.modal-close:hover{color:#333}.modal-description{font-size:14px;color:#666;margin-bottom:20px;text-align:center}.component-templates-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;padding:20px 0}.template-card-preview{background:#f8f9fa;border:2px solid #e0e0e0;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .2s}.template-card-preview:hover{border-color:#4fc3f7;transform:translateY(-4px);box-shadow:0 8px 16px #4fc3f733}.template-preview-icon{width:100%;height:150px;background:linear-gradient(135deg,#667eea1a,#6e7de81a);display:flex;align-items:center;justify-content:center}.template-icon{font-size:64px;line-height:1}.template-info{padding:16px}.template-name{font-size:16px;font-weight:600;margin-bottom:8px;color:#333}.template-description{font-size:13px;color:#666;margin-bottom:12px}.template-images{display:inline-block;padding:4px 12px;background:#4fc3f7;color:#fff;border-radius:12px;font-size:12px;font-weight:600}.modal-image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;overflow-y:auto;padding:20px 0}.modal-image-item{aspect-ratio:1;background:#f5f5f5;border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid transparent;transition:all .2s}.modal-image-item:hover{border-color:#4fc3f7;transform:scale(1.05)}.edit-input{width:100%;padding:12px;border:2px solid #4FC3F7;border-radius:8px;font-size:16px;margin-bottom:12px;outline:none;transition:all .2s}.edit-input:focus{border-color:#3ab0e0;box-shadow:0 0 0 3px #4fc3f71a}.edit-input.title-input{font-size:32px;font-weight:700}.edit-input.subtitle-input{font-size:20px}.edit-input.subtitle-edit{font-size:16px;font-weight:400}.edit-input.header-title-edit{font-size:24px;font-weight:700}.edit-input.large-title-input{font-size:48px;font-weight:700}.edit-textarea{width:100%;padding:12px;border:2px solid #4FC3F7;border-radius:8px;font-size:14px;margin-bottom:12px;outline:none;resize:vertical;font-family:inherit}.component-header-edit,.component-edit-header{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.image-change-hint{position:absolute;bottom:0;left:0;right:0;background:#000000b3;color:#fff;padding:12px;text-align:center;font-size:14px;opacity:0;transition:opacity .3s}.cover-image-side:hover .image-change-hint,.fullwidth-image:hover .image-change-hint{opacity:1}.image-change-hint-small{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#4fc3f7f2;color:#fff;padding:8px 16px;border-radius:20px;font-size:12px;font-weight:600;opacity:0;transition:opacity .3s;pointer-events:none}.grid-image-item:hover .image-change-hint-small,.column-left>div:hover .image-change-hint-small,.column-right>div:hover .image-change-hint-small{opacity:1}.cover-component .cover-layout{display:grid;grid-template-columns:1fr 1fr;gap:0;min-height:500px;background:#fff;border-radius:12px;overflow:hidden;margin-bottom:34px}.cover-image-side{background:#f5f5f5;position:relative}.cover-info-side{padding:60px;display:flex;flex-direction:column;justify-content:center}.cover-name{font-size:48px;font-weight:700;margin-bottom:16px;color:#000}.cover-title{font-size:20px;color:#666;margin-bottom:40px;font-weight:300}.cover-contact{font-size:16px;color:#333;line-height:1.8;font-weight:400}.title-image-layout{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:center}.image-grid-left{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-image-item{background:#f5f5f5;border-radius:12px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;min-height:0}.grid-image-item img{width:100%;height:100%;object-fit:cover}.title-right{text-align:right}.component-title{font-weight:700;color:#333;margin-bottom:12px}.component-title.large{font-size:48px;line-height:1.2}.component-title.medium{font-size:28px;line-height:1.3}.component-subtitle{font-size:20px;color:#666}.component-subtitle.light{font-weight:300}.component-header{margin-bottom:24px}.component-meta{display:flex;gap:12px;align-items:center;font-size:14px;margin-top:8px}.meta-label{color:#999;font-weight:400}.meta-value{color:#333;font-weight:600}.meta-separator{color:#ddd}.grid-layout{display:grid;gap:16px}.grid-4{grid-template-columns:repeat(2,1fr);max-width:800px;margin:auto}.grid-4 .grid-image-item{aspect-ratio:4/3}.grid-6{grid-template-columns:repeat(3,1fr)}.grid-6 .grid-image-item{aspect-ratio:4/3}.grid-3-vertical{grid-template-columns:1fr;max-width:800px;margin:0 auto;gap:20px}.grid-3-vertical .grid-image-item{aspect-ratio:16/9}.fullwidth-image{width:100%;aspect-ratio:21/9;background:#f5f5f5;border-radius:12px;overflow:hidden;margin-bottom:16px}.image-caption{text-align:center;font-size:14px;color:#666;font-style:italic;font-weight:300}.two-column-layout{display:grid;grid-template-columns:1fr 1fr;gap:32px}.two-column-layout.vertical-layout{grid-template-columns:1fr;max-width:600px;margin:0 auto}.column-left,.column-right{display:flex;flex-direction:column;gap:16px}.column-left>div,.column-right>div{aspect-ratio:3/4;background:#f5f5f5;border-radius:12px;overflow:hidden}.column-text{font-size:14px;color:#666;line-height:1.6;font-weight:400}.text-only-component{max-width:900px;margin:0 auto}.preview-toggle-container{margin-bottom:16px;padding:12px;background:linear-gradient(135deg,#667eea0d,#6e7de80d);border-radius:8px;border:1px solid rgba(102,126,234,.15)}.preview-toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.preview-toggle-checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--color-primary)}.preview-toggle-text{font-size:14px;font-weight:500;color:var(--color-gray-700)}.text-only-display{padding:32px 0}.text-only-title{font-size:32px;font-weight:700;color:#333;margin:0 0 16px;line-height:1.3}.text-only-subtitle{font-size:20px;font-weight:500;color:#666;margin:0 0 24px;line-height:1.4}.text-only-content{font-size:16px;color:#555;line-height:1.8;margin:0;white-space:pre-line}.component-text-edit{display:flex;flex-direction:column;gap:12px}.text-title-input{font-size:20px;font-weight:600}.text-subtitle-input{font-size:16px;font-weight:500}.text-content-input{font-size:15px;line-height:1.6;resize:vertical;min-height:150px}@media(max-width:768px){.portfolio-create-container,.portfolio-create-v2,.preview-container,.portfolio-content,.portfolio-folder-select,.portfolio-folder-view{padding:20px 12px 100px}.portfolio-view-layout{flex-direction:column}.portfolio-sidebar{width:100%;min-height:auto;position:static;height:auto;border-right:none;border-bottom:1px solid #e0e0e0}.portfolio-main-content{width:100%}.portfolio-image-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.folder-select-grid{grid-template-columns:1fr}.folder-select-title{font-size:24px}.cover-layout,.title-image-layout,.two-column-layout{grid-template-columns:1fr}.grid-6{grid-template-columns:repeat(2,1fr)}.cover-info-side{padding:40px 24px}.cover-name{font-size:32px}.cover-title{font-size:18px}.component-title.large{font-size:32px}.component-title.medium{font-size:22px}.title-right{text-align:left}.component-item{padding:16px}.component-controls{flex-wrap:wrap}.component-templates-preview{grid-template-columns:1fr}}@media(max-width:480px){.cover-name{font-size:28px}.cover-title{font-size:16px}.cover-contact{font-size:14px}.edit-input.large-title-input{font-size:28px}.folder-select-title{font-size:20px}}.component-info-badge{position:sticky;top:20px;z-index:100;margin-bottom:20px;display:flex;justify-content:flex-end}.component-badge-inner{display:inline-flex;align-items:center;gap:12px;padding:10px 20px;background:#fffffffa;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:28px;box-shadow:0 4px 16px #0000001f;font-size:14px;border:1px solid rgba(0,0,0,.06)}.badge-number{font-weight:700;color:#4fc3f7;background:#4fc3f71a;padding:4px 10px;border-radius:12px}.badge-folder{display:flex;align-items:center;gap:6px;color:#666}.badge-folder svg{color:#999}.badge-creator{display:flex;align-items:center;gap:6px;color:#333;font-weight:500}.badge-creator svg{color:#4fc3f7}.section-title-display{margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #f0f0f0}.section-title-text{font-size:24px;font-weight:700;color:#333;margin:0;letter-spacing:-.5px}.section-title-input{font-size:20px;font-weight:600;color:#333;background:#f8f9fa;border:2px dashed #4FC3F7!important}.cover-upload-section{margin-top:20px;padding-top:20px;border-top:1px solid #e0e0e0}.cover-upload-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 24px;background:linear-gradient(135deg,#667eea,#6e7de8);color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s}.cover-upload-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 20px #667eea59}.cover-upload-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.portfolio-sidebar-creator{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;color:#666}.portfolio-sidebar-creator svg{color:#4fc3f7}.mobile-sidebar{padding:20px 0}.folder-accordion-item{border-bottom:1px solid #f0f0f0}.accordion-header{position:relative}.accordion-header .accordion-icon{margin-left:auto;color:#999;transition:transform .3s}.accordion-header.active .accordion-icon{color:#4fc3f7}.accordion-content{padding:16px 24px;background:#f8f9fa;animation:slideDown .3s ease-out}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:500px}}.accordion-preview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}.accordion-preview-item{aspect-ratio:1;border-radius:8px;overflow:hidden;background:#e0e0e0}.accordion-preview-item .portfolio-image-card{height:100%;border-radius:8px}.view-all-btn{width:100%;padding:10px;background:#4fc3f7;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.view-all-btn:hover{background:#3ab0e0}.folder-title-wrapper{display:flex;align-items:center;gap:12px}.folder-title-wrapper svg{color:#4fc3f7;width:28px;height:28px}.portfolio-folder-header{margin-bottom:32px;padding-bottom:20px;border-bottom:2px solid #f0f0f0}.portfolio-folder-title{font-size:28px;font-weight:700;color:#333;margin:0}.empty-folder-message{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;color:#999;gap:16px}.empty-folder-message svg{width:64px;height:64px;opacity:.5}.component-source-folder{display:flex;align-items:center;gap:6px;font-size:13px;color:#666;background:#f5f5f5;padding:4px 12px;border-radius:16px}.component-source-folder svg{color:#4fc3f7}.portfolio-component{position:relative}@media(max-width:768px){.component-number,.component-source-folder,.component-info-badge,.component-badge-inner{display:none!important}.section-title-text{font-size:20px}.accordion-preview-grid{grid-template-columns:repeat(4,1fr);gap:4px}.portfolio-sidebar.mobile-sidebar{padding:16px 0}.portfolio-nav-item{padding:14px 20px}}@media(max-width:480px){.accordion-preview-grid{grid-template-columns:repeat(2,1fr)}}.folder-gallery-component{margin:40px 0}.gallery-header-collapsible{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:16px 20px;background:#fafafa;border-radius:8px;transition:all .2s;border:1px solid transparent}.gallery-header-collapsible:hover{background:#f5f5f5;border-color:#e0e0e0}.gallery-toggle-btn{background:none;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#666;transition:all .2s;border-radius:50%}.gallery-toggle-btn:hover{background:#4fc3f71a;color:#4fc3f7}.gallery-expand-section{display:flex;justify-content:center;padding:20px 0 0}.gallery-expand-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;background:#f5f5f5;border:1px solid #e0e0e0;border-radius:24px;color:#666;font-size:15px;font-weight:500;cursor:pointer;transition:all .2s}.gallery-expand-btn:hover{background:#4fc3f7;border-color:#4fc3f7;color:#fff}.gallery-expand-btn svg{flex-shrink:0}.folder-gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;padding:20px 0}.gallery-image-item{aspect-ratio:4/3;overflow:hidden;border-radius:8px;background:#f5f5f5;transition:transform .2s;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative}.gallery-image-item img{width:100%;height:100%;object-fit:cover}.gallery-image-item:hover{transform:scale(1.02);box-shadow:0 4px 12px #0000001a}.gallery-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;color:#999;gap:16px}.gallery-empty p{margin:0;font-size:16px}.image-picker-modal-large{max-width:900px!important;max-height:85vh}.folder-filter-bar{display:flex;gap:8px;padding:16px 24px;overflow-x:auto;border-bottom:1px solid #e0e0e0;background:#fafafa}.folder-filter-btn{padding:8px 16px;border:1px solid #ddd;background:#fff;border-radius:20px;font-size:14px;color:#666;cursor:pointer;white-space:nowrap;transition:all .2s}.folder-filter-btn:hover{background:#f5f5f5;border-color:#4fc3f7;color:#4fc3f7}.folder-filter-btn.active{background:#4fc3f7;border-color:#4fc3f7;color:#fff;font-weight:600}.back-button-simple{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;background:#4fc3f7;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 8px #4fc3f740}.back-button-simple:hover{background:#29b6f6;box-shadow:0 4px 12px #4fc3f759;transform:translateY(-1px)}.back-button-simple:active{transform:translateY(0);box-shadow:0 2px 6px #4fc3f740}@media(max-width:768px){.folder-gallery-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.image-picker-modal-large{max-width:95vw!important}.folder-filter-bar{padding:12px 16px}.folder-filter-btn{padding:6px 12px;font-size:13px}.back-button-simple{padding:8px 16px;font-size:14px}}.lightbox-overlay{position:fixed;inset:0;background:#000000f2;display:flex;align-items:center;justify-content:center;z-index:9999;cursor:zoom-out;animation:fadeIn .2s ease-out}.lightbox-close{position:fixed;top:20px;right:20px;background:#ffffff1a;border:none;color:#fff;font-size:48px;width:60px;height:60px;border-radius:50%;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;line-height:1;z-index:10001}.lightbox-close:hover{background:#fff3;transform:rotate(90deg)}.lightbox-content{max-width:95vw;max-height:95vh;display:flex;align-items:center;justify-content:center;cursor:default;animation:zoomIn .3s ease-out}@keyframes zoomIn{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.lightbox-image{max-width:100%;max-height:95vh;object-fit:contain;border-radius:4px;box-shadow:0 8px 32px #00000080}@media(max-width:768px){.lightbox-close{top:10px;right:10px;width:50px;height:50px;font-size:40px}.lightbox-content{max-width:100vw;max-height:100vh}.lightbox-image{max-height:100vh}}.portfolio-create-v2-with-pages{width:100%;min-height:100vh;background:var(--color-gray-50);overflow-x:hidden}.portfolio-editor-layout{display:flex;min-height:100vh;width:100%;max-width:100%}.portfolio-editor-sidebar{width:60px;min-width:60px;background:linear-gradient(180deg,#fff,#fafbfc);border-right:1px solid var(--color-gray-200);box-shadow:var(--shadow-sm);position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;z-index:50;transition:all .3s cubic-bezier(.4,0,.2,1)}.portfolio-editor-sidebar:hover{width:200px;min-width:200px;box-shadow:var(--shadow-lg)}.sidebar-header{padding:16px 12px 14px;border-bottom:1px solid var(--color-gray-100);display:flex;justify-content:center;align-items:center;background:#fff;position:sticky;top:0;z-index:10;transition:all .3s cubic-bezier(.4,0,.2,1)}.portfolio-editor-sidebar:hover .sidebar-header{justify-content:space-between}.sidebar-title{font-size:18px;font-weight:700;margin:0;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;opacity:0;max-width:0;overflow:hidden;white-space:nowrap;transition:all .3s cubic-bezier(.4,0,.2,1)}.portfolio-editor-sidebar:hover .sidebar-title{opacity:1;max-width:200px}.add-page-btn-small{background:var(--gradient-primary);color:#fff;border:none;border-radius:6px;padding:6px 8px;cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:center}.add-page-btn-small svg{width:16px;height:16px}.add-page-btn-small:hover{transform:scale(1.08) rotate(90deg);box-shadow:var(--shadow-md)}.sidebar-pages-list{flex:1;overflow-y:auto;padding:12px 0}.page-item{margin:6px 8px;background:#fff;border-radius:10px;border:1.5px solid var(--color-gray-200);transition:all .2s ease;cursor:pointer;position:relative}.page-item:hover{border-color:var(--color-primary);box-shadow:var(--shadow-md);transform:translate(3px)}.page-item.active{background:linear-gradient(135deg,#667eea0d,#6e7de80d);border-color:var(--color-primary);box-shadow:var(--shadow-primary)}.page-item.active:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--gradient-primary);border-radius:var(--radius-lg) 0 0 var(--radius-lg)}.page-item-main{padding:8px 10px;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .3s cubic-bezier(.4,0,.2,1)}.portfolio-editor-sidebar:hover .page-item-main{justify-content:flex-start}.page-drag-handle{color:var(--color-gray-400);cursor:grab;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;opacity:0;max-width:0;overflow:hidden}.portfolio-editor-sidebar:hover .page-drag-handle{opacity:1;max-width:20px}.page-drag-handle svg{width:14px;height:14px}.page-number-badge{flex-shrink:0;min-width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:var(--color-gray-100, #f3f4f6);color:var(--color-gray-500, #6b7280);border-radius:4px;font-size:11px;font-weight:700;line-height:1;transition:all .2s ease}.page-item.active .page-number-badge{background:var(--color-primary-light, #eff6ff);color:var(--color-primary, #3b82f6)}.page-drag-handle:active{cursor:grabbing}.portfolio-editor-sidebar:hover .page-item:hover .page-drag-handle{color:var(--color-primary)}.page-title{flex:1;font-size:13px;font-weight:600;color:var(--color-gray-800);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;max-width:0;transition:all .3s cubic-bezier(.4,0,.2,1)}.portfolio-editor-sidebar:hover .page-title{opacity:1;max-width:200px}.page-item.active .page-title{color:var(--color-primary)}.page-rename-input{flex:1;padding:4px 8px;border:2px solid var(--color-primary);border-radius:var(--radius-sm);font-size:16px;font-weight:600;outline:none;background:#fff}.page-item-actions{display:flex;gap:4px;opacity:0;max-width:0;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1)}.portfolio-editor-sidebar:hover .page-item:hover .page-item-actions{opacity:1;max-width:100px}.page-action-btn{padding:4px;background:var(--color-gray-100);border:none;border-radius:4px;cursor:pointer;color:var(--color-gray-600);transition:all .2s;display:flex;align-items:center;justify-content:center}.page-action-btn svg{width:14px;height:14px}.page-action-btn:hover{background:var(--color-primary);color:#fff;transform:scale(1.08)}.page-action-btn.delete-btn:hover{background:#ef4444}.page-folders-accordion{padding:8px 10px;background:linear-gradient(135deg,#fafbfc,#fff);border-top:1px solid var(--color-gray-200);animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;max-height:0;padding-top:0;padding-bottom:0}to{opacity:1;max-height:150px;padding-top:8px;padding-bottom:8px}}.accordion-header-small{font-size:10px;font-weight:600;color:var(--color-gray-500);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}.accordion-folder-list{display:flex;flex-direction:column;gap:4px}.accordion-folder-item{display:flex;align-items:center;gap:6px;padding:4px 8px;background:#fff;border:1px solid var(--color-gray-200);border-radius:6px;font-size:11px;color:var(--color-gray-700);transition:all .2s}.accordion-folder-item:hover{border-color:var(--color-primary);background:linear-gradient(135deg,#667eea08,#6e7de808)}.accordion-folder-item svg{color:var(--color-primary);flex-shrink:0;width:12px;height:12px}.portfolio-editor-main{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;background:var(--color-gray-50);min-width:0;padding-bottom:80px}.portfolio-editor-header{background:#fff;border-bottom:2px solid var(--color-gray-100);padding:20px 32px;display:flex;align-items:center;gap:24px;position:sticky;top:0;z-index:40;box-shadow:var(--shadow-sm)}.back-button-header{display:flex;align-items:center;gap:8px;padding:10px 18px;background:var(--color-gray-100);border:none;border-radius:var(--radius-lg);font-size:14px;font-weight:600;color:var(--color-gray-700);cursor:pointer;transition:all .2s}.back-button-header:hover{background:var(--gradient-primary);color:#fff;transform:translate(-4px);box-shadow:var(--shadow-md)}.header-info{flex:1;display:flex;gap:16px;min-width:0}.portfolio-name-input-header,.creator-name-input-header{flex:1;min-width:0;padding:12px 18px;border:2px solid var(--color-gray-200);border-radius:var(--radius-lg);font-size:18px;font-weight:600;outline:none;transition:all .2s;background:var(--color-gray-50)}.portfolio-name-input-header:focus,.creator-name-input-header:focus{border-color:var(--color-primary);background:#fff;box-shadow:0 0 0 4px #667eea1a}.current-page-header{padding:20px 24px 16px;background:linear-gradient(135deg,#f8f9fa,#fff);border-bottom:1px solid var(--color-gray-200);display:flex;justify-content:space-between;align-items:center}.current-page-title{font-size:30px;font-weight:700;color:var(--color-gray-900);margin:0;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.page-indicator{font-size:14px;font-weight:500;color:var(--color-gray-500);padding:6px 14px;background:#fff;border:1px solid var(--color-gray-200);border-radius:var(--radius-full)}.component-item{background:#fff;border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-md);border:1px solid var(--color-gray-200);transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin-bottom:20px}.component-item:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.component-item:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--color-primary)}.component-item:hover:before{transform:scaleX(1)}.empty-page-message{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center;background:linear-gradient(135deg,#fafafa,#f0f0f0);border-radius:var(--radius-xl);margin:40px;border:2px dashed var(--color-gray-300)}.empty-page-message svg{margin-bottom:24px;opacity:.3;color:var(--color-gray-400)}.empty-page-message p{font-size:20px;color:var(--color-gray-500);margin-bottom:24px;font-weight:500}.add-first-component-btn{background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-lg);padding:14px 28px;font-size:16px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-primary);display:flex;align-items:center;gap:10px;transition:all .3s cubic-bezier(.34,1.56,.64,1)}.add-first-component-btn:hover{transform:scale(1.05) translateY(-2px);box-shadow:0 12px 32px #667eea59}.bottom-action-bar{padding:16px 32px;background:#fff;border-top:2px solid var(--color-gray-200);position:fixed;bottom:0;left:0;right:0;width:100%;z-index:1000;box-shadow:0 -4px 12px #00000014;display:flex;justify-content:flex-end;align-items:center}.save-portfolio-btn{background:var(--gradient-primary);color:#fff;border:none;border-radius:var(--radius-lg);padding:16px 48px;font-size:17px;font-weight:700;cursor:pointer;box-shadow:var(--shadow-primary);display:inline-flex;align-items:center;gap:10px;transition:all .3s ease;justify-content:center}.save-portfolio-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 32px #667eea59}.save-portfolio-btn:disabled{opacity:.5;cursor:not-allowed}.add-component-btn-fixed{position:fixed;bottom:120px;right:32px;background:#fff;color:var(--color-primary);border:2px solid var(--color-primary);border-radius:var(--radius-full);padding:14px 28px;font-size:15px;font-weight:600;cursor:pointer;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;transition:all .3s cubic-bezier(.34,1.56,.64,1);z-index:999}.add-component-btn-fixed:hover{background:var(--gradient-primary);color:#fff;border-color:transparent;transform:scale(1.05) translateY(-4px);box-shadow:0 16px 48px #667eea66}.add-component-btn-fixed:active{transform:scale(.98)}@media(max-width:768px){.portfolio-editor-layout{flex-direction:column}.portfolio-editor-sidebar{width:100%!important;min-width:auto!important;position:static;height:auto;max-height:40vh;border-right:none;border-bottom:1px solid var(--color-gray-200)}.portfolio-editor-sidebar:hover{width:100%!important;min-width:auto!important}.sidebar-title,.page-title,.page-drag-handle,.page-item-actions{opacity:1!important;max-width:none!important}.sidebar-header{justify-content:space-between!important}.page-item-main{justify-content:flex-start!important}.portfolio-editor-header{flex-direction:column;gap:12px;align-items:stretch}.header-info{flex-direction:column}.current-page-header{padding:16px 20px;flex-direction:column;align-items:flex-start;gap:12px}.current-page-title{font-size:24px}.add-component-btn-fixed{bottom:85px;right:20px;padding:12px 24px;font-size:14px}.save-portfolio-btn{width:calc(100% - 32px);padding:14px 32px;font-size:16px}.bottom-action-bar{padding:12px 0}.empty-page-message{padding:60px 20px;margin:20px}.component-item{padding:16px}.portfolio-editor-main{padding-bottom:80px}}@media(max-width:480px){.sidebar-title{font-size:20px}.page-item-actions{opacity:1}.portfolio-editor-sidebar{max-height:30vh}}.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e0e0e0;display:flex;justify-content:space-around;padding:12px 16px;z-index:1000;box-shadow:0 -2px 10px #0000000d}.mobile-nav-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 16px;background:none;border:none;border-radius:8px;cursor:pointer;transition:all .2s;color:#666;font-size:12px;font-weight:500;min-width:80px}.mobile-nav-btn svg{width:24px;height:24px}.mobile-nav-btn:active{transform:scale(.95)}.mobile-nav-btn.active{background:#e3f2fd;color:#4fc3f7;font-weight:600}.bottom-sheet-persistent{position:fixed;bottom:0;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;box-shadow:0 -4px 20px #00000026;z-index:1000;display:flex;flex-direction:column;overflow:hidden}.bottom-sheet-handle{display:flex;justify-content:center;padding:12px 0 8px;cursor:grab;touch-action:none;flex-shrink:0}.bottom-sheet-handle:active{cursor:grabbing}.bottom-sheet-handle-bar{width:40px;height:4px;background:#d1d1d1;border-radius:2px;transition:all .2s}.bottom-sheet-handle:active .bottom-sheet-handle-bar{width:50px;background:#b0b0b0}.bottom-sheet-quick-nav{padding:8px 16px;border-bottom:1px solid #f0f0f0;flex-shrink:0}.sheet-nav-btn{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;background:#f8f9fa;border:2px solid transparent;border-radius:12px;cursor:pointer;transition:all .2s;font-size:15px;font-weight:600;color:#333}.sheet-nav-btn svg{width:24px;height:24px;color:#666}.sheet-nav-btn:active{transform:scale(.98)}.sheet-nav-btn.active{background:#e3f2fd;border-color:#4fc3f7;color:#4fc3f7}.sheet-nav-btn.active svg{color:#4fc3f7}.bottom-sheet-section-title{padding:12px 16px 8px;font-size:13px;font-weight:700;color:#999;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.bottom-sheet-list{overflow-y:auto;padding:12px;flex:1;overscroll-behavior:contain}.bottom-sheet-item{display:flex;align-items:center;gap:16px;padding:16px;background:#f8f9fa;border:2px solid transparent;border-radius:12px;cursor:pointer;transition:all .2s;margin-bottom:8px;width:100%;text-align:left}.bottom-sheet-item:active{transform:scale(.98)}.bottom-sheet-item.active{background:#e3f2fd;border-color:#4fc3f7}.bottom-sheet-item svg{width:28px;height:28px;color:#666;flex-shrink:0}.bottom-sheet-item.active svg{color:#4fc3f7}.bottom-sheet-info{flex:1}.portfolio-page-nav{position:sticky;top:0;z-index:100;background:#fff;border-bottom:2px solid #e0e0e0;box-shadow:0 2px 8px #0000000f}.page-nav-inner{max-width:1200px;margin:0 auto;display:flex;gap:8px;padding:12px 20px;overflow-x:auto;scrollbar-width:thin}.page-nav-inner::-webkit-scrollbar{height:6px}.page-nav-inner::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.page-nav-item{display:flex;align-items:center;gap:8px;padding:10px 20px;background:#f5f5f5;border:2px solid transparent;border-radius:12px;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0;font-family:inherit;font-size:14px}.page-nav-item:hover{background:#e0e0e0;transform:translateY(-2px)}.page-nav-item.active{background:#e3f2fd;border-color:#4fc3f7;color:#4fc3f7;font-weight:600}.page-nav-number{font-size:16px;font-weight:700}.page-nav-title{font-size:14px}@media(max-width:768px){.page-nav-item{padding:8px 16px}.page-nav-title{display:none}}.bottom-sheet-name{font-size:16px;font-weight:600;color:#333}.bottom-sheet-item.active .bottom-sheet-name{color:#4fc3f7}.bottom-sheet-count{font-size:13px;color:#999}@media(max-width:768px){.portfolio-view-container .portfolio-main-content{padding-bottom:80px}.portfolio-sidebar{display:none}}.upload-container{display:grid;grid-template-columns:1fr 400px;gap:32px;width:100%;max-width:none;margin:0;padding:28px;align-items:stretch;background:#fff;border-radius:24px;border:1px solid rgba(15,23,42,.06);box-shadow:0 16px 32px #0f172a0a}.upload-header{grid-column:1 / -1;margin-bottom:0;text-align:left}.upload-title{font-size:28px;font-weight:700;color:#191f28;margin:0 0 6px;letter-spacing:-.04em}.upload-subtitle{font-size:15px;color:#6b7684;font-weight:500;margin:0;line-height:1.45}.upload-content{display:flex;flex-direction:column;gap:20px;height:100%;overflow-y:auto}.upload-main-area{display:flex;flex-direction:column;gap:20px;min-width:0}.upload-sidebar{display:flex;flex-direction:column;gap:16px;position:sticky;top:0;min-width:0}.upload-dropzone{cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f9fbfd;min-height:360px;border:none;border-radius:20px;transition:box-shadow .2s ease,transform .2s ease;text-align:center;padding:60px 32px;position:relative;overflow:hidden}.upload-dropzone:before{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none}.upload-dropzone:hover{box-shadow:0 4px 20px #0f172a14;transform:translateY(-2px)}.upload-dropzone.drag-over{background:#f0f6ff;box-shadow:0 4px 24px #3182f61f;transform:translateY(-2px)}.upload-preview{width:100%;text-align:center;position:relative;z-index:1}.upload-preview-image{max-width:100%;max-height:150px;border-radius:8px;margin-bottom:12px;object-fit:contain}.upload-file-info{font-size:14px;color:#333;font-weight:500;display:flex;align-items:center;gap:8px;justify-content:center}.upload-file-size{font-size:12px;color:#999;margin-top:4px}.upload-preview-tags{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:8px}.upload-preview-tag{font-size:11px;padding:4px 8px;background:linear-gradient(135deg,#81d4fa40,#4fc3f733);color:var(--color-primary);border-radius:12px;font-weight:500;border:1px solid rgba(79,195,247,.3)}.upload-preview-tag-more{font-size:11px;padding:4px 8px;background:#f5f5f5;color:#666;border-radius:12px;font-weight:500}.upload-empty-state{display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;z-index:1}.upload-empty-icon{width:60px;height:60px;border-radius:18px;background:#eef5ff;border:1px solid rgba(49,130,246,.08);display:flex;align-items:center;justify-content:center;color:#3182f6}.upload-dropzone:hover .upload-empty-icon{background:#e8f1ff}.upload-empty-icon svg{width:28px;height:28px}.upload-empty-text{font-size:18px;font-weight:700;color:#191f28;letter-spacing:-.03em;line-height:1.35}.upload-empty-subtext{font-size:14px;color:#6b7684;line-height:1.45}.upload-folder-info{width:100%;text-align:center}.upload-folder-title{font-size:14px;color:#333;font-weight:500;margin-bottom:16px}.upload-folder-grid{display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100%;justify-content:flex-end;padding:4px}.upload-folder-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:8px;padding:12px;transition:all .2s;position:relative}.upload-folder-card:hover{border-color:var(--color-primary);box-shadow:0 2px 8px #4fc3f733}.upload-folder-card.clickable{cursor:pointer}.upload-folder-thumbnail{width:100%;height:100px;border-radius:6px;overflow:hidden;position:relative;background:#f5f5f5;margin-bottom:8px}.upload-folder-thumbnail img{width:100%;height:100%;object-fit:cover}.upload-folder-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);padding:6px 8px;color:#fff;font-size:11px;font-weight:600}.upload-folder-count{text-align:right}.upload-folder-icon{width:100%;height:100px;display:flex;align-items:center;justify-content:center;background:#4fc3f71a;border-radius:6px;margin-bottom:8px;color:var(--color-primary)}.upload-folder-name{font-size:13px;font-weight:600;color:#333;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-folder-file-count{font-size:11px;color:#999;margin-bottom:4px}.upload-folder-card-tags{display:flex;gap:4px;flex-wrap:wrap;margin-top:6px;padding:0 8px 8px;justify-content:center;align-items:center}.upload-folder-card-tag{font-size:10px;padding:3px 8px;background:linear-gradient(135deg,#81d4fa1f,#4fc3f714);color:var(--color-primary);border-radius:12px;font-weight:500;border:1px solid rgba(79,195,247,.2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.upload-folder-card-tag-more{font-size:10px;color:#999;font-weight:500;padding:3px 6px}.upload-folder-expand-icon{position:absolute;top:8px;right:8px;font-size:10px;color:var(--color-primary);background:#4fc3f71a;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center}.upload-folder-files{background:#4fc3f70d;border:1px solid rgba(79,195,247,.2);border-radius:6px;padding:8px;max-height:200px;overflow-y:auto}.upload-folder-file-item{font-size:11px;color:#666;padding:4px 8px;background:#fff;border-radius:4px;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-folder-file-item:last-child{margin-bottom:0}.upload-folder-list{font-size:12px;color:#666;max-height:120px;overflow-y:auto}.upload-folder-item{padding:2px 0}.upload-empty-state{text-align:center}.upload-empty-icon{font-size:24px;margin-bottom:8px}.upload-empty-text{font-size:14px;color:#666}.upload-empty-subtext{font-size:12px;color:#999;margin-top:4px}.upload-menu{position:relative;margin-top:20px}.upload-menu-trigger{margin-bottom:0;padding:14px 20px;font-size:15px;font-weight:600;width:100%;border-radius:12px}.upload-menu-overlay{position:fixed;inset:0;z-index:999}.upload-menu-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid rgba(15,23,42,.08);border-radius:16px;box-shadow:0 12px 28px #0f172a14;z-index:1000;overflow:hidden}.upload-menu-item{width:100%;padding:12px 16px;border:none;background:transparent;color:var(--color-text);font-size:13px;text-align:left;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .2s}.upload-menu-item:hover{background:#f2f4f6}.upload-tags{margin-bottom:16px;display:flex;flex-wrap:wrap;gap:8px}.ai-tags-panel{margin-bottom:8px;padding:14px;background:#fbfcfe;border-radius:18px;border:1px solid rgba(15,23,42,.06)}.ai-tags-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.ai-tags-title{font-size:13px;color:#4e5968;font-weight:600}.ai-tags-actions{display:flex;gap:8px}.ai-tags-button{padding:6px 10px;font-size:12px;border:1px solid transparent;border-radius:10px;cursor:pointer;font-weight:600}.ai-tags-button.primary{background:#eef5ff;color:#3182f6;border-color:#3182f624}.ai-tags-button.neutral{background:#f2f4f6;color:#4e5968;border-color:#0f172a0f}.upload-tag{display:inline-flex;align-items:center;gap:6px;font-size:13px;padding:7px 12px;background:#f2f6fb;color:#3182f6;border-radius:16px;font-weight:600;border:1px solid rgba(49,130,246,.08)}.upload-tag-folder{background:#eef3f8;color:#191f28;font-weight:600;border-color:#0f172a0f}.upload-tag-folder .upload-tag-remove{color:#4e5968;opacity:1}.ai-tag-badge{border:1px solid rgba(15,23,42,.08);cursor:pointer;transition:all .2s ease;background:#fff;color:#6b7684}.ai-tag-badge.selected{background:#eef5ff;color:#3182f6;border-color:#3182f63d}.upload-tag-remove{background:none;border:none;color:#3182f6;cursor:pointer;padding:0;display:flex;align-items:center;font-size:16px;line-height:1}.upload-tag-input-group{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;width:100%}.upload-tag-input-group .upload-tag-input,textarea.upload-tag-input{margin-bottom:0;flex:1;width:100%;min-height:56px;line-height:1.4;resize:vertical;overflow-y:auto;border-radius:14px!important;border:none!important;background:#f9fbfd!important;box-shadow:none!important;padding:14px 16px;font-size:14px;font-family:inherit;color:var(--color-text);transition:box-shadow .2s ease}.upload-tag-input-group .upload-tag-input:focus,textarea.upload-tag-input:focus{outline:none!important;background:#f9fbfd!important;box-shadow:0 0 0 2px #3182f62e!important}.upload-tag-input-group .upload-tag-input::placeholder,textarea.upload-tag-input::placeholder{color:#b0b8c1}.upload-add-btn{margin-bottom:0;padding:14px 20px;width:auto}.status-badges{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}.status-badge{font-size:13px;padding:8px 12px;border-radius:6px;font-weight:500}.status-badge.info{background:#e3f2fd;color:#1565c0}.status-badge.success{background:#e8f5e9;color:#2e7d32}.status-badge.error{background:#ffebee;color:#c62828}.upload-progress{margin-bottom:16px}.upload-progress-text{font-size:13px;color:#666;margin-bottom:8px}.upload-progress-bar{width:100%;height:6px;background-color:#e0e0e0;border-radius:3px;overflow:hidden}.upload-progress-fill{height:100%;background:linear-gradient(135deg,#81d4fa,#4fc3f7);transition:width .3s ease;box-shadow:0 0 10px #4fc3f766}.upload-status{font-size:13px;margin-bottom:16px;padding:10px;border-radius:4px;text-align:center}.upload-status.error{color:#d32f2f;background-color:#ffebee}.upload-status.success{color:#2e7d32;background-color:#e8f5e9}.upload-button{width:100%;margin-top:12px;flex-shrink:0;padding:16px;font-size:15px;border-radius:16px}.upload-menu-trigger:disabled,.upload-add-btn:disabled,.upload-button:disabled{opacity:.6;cursor:not-allowed}.upload-steps{display:flex;align-items:center;gap:0;margin-bottom:16px;padding:12px 16px;background:#f9fbfd;border-radius:14px}.upload-step{display:flex;align-items:center;gap:6px;flex-shrink:0}.upload-step-dot{width:24px;height:24px;border-radius:50%;background:#e5ebf2;color:#8b95a1;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;transition:all .3s ease}.upload-step.active .upload-step-dot{background:#3182f6;color:#fff}.upload-step.done .upload-step-dot{background:#2e7d32;color:#fff}.upload-step-label{font-size:12px;color:#8b95a1;font-weight:500;white-space:nowrap}.upload-step.active .upload-step-label{color:#3182f6;font-weight:600}.upload-step.done .upload-step-label{color:#2e7d32;font-weight:600}.upload-step-line{flex:1;height:2px;background:#e5ebf2;margin:0 8px;min-width:20px}.upload-image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.upload-image-card{border-radius:12px;overflow:hidden;background:#f5f7fa;aspect-ratio:1;display:flex;flex-direction:column}.upload-image-card-img{width:100%;height:100%;object-fit:cover}.upload-image-card-name{padding:4px 8px;font-size:10px;color:#6b7684;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#ffffffe6;position:absolute;bottom:0;left:0;right:0}.upload-image-card{position:relative}.upload-image-card-more{display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#6b7684;background:#f0f3f7}.upload-image-expand-bar{margin-top:8px;width:100%;padding:10px 0;text-align:center;background:#3182f60d;border:1px solid rgba(49,130,246,.2);border-radius:8px;color:#3182f6;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.upload-image-expand-bar:hover{background:#3182f61a}.upload-image-card-placeholder{width:100%;height:100%;background:#e5ebf2}.upload-single-preview{border-radius:16px;overflow:hidden;background:#f9fbfd;display:flex;flex-direction:column}.upload-single-preview-img{width:100%;max-height:400px;object-fit:contain;background:#f0f3f7}.upload-single-preview-info{padding:12px 16px;display:flex;flex-direction:column;gap:2px}.upload-single-preview-name{font-size:14px;font-weight:600;color:#191f28;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.upload-single-preview-size{font-size:12px;color:#8b95a1}.upload-sidebar-header{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#f9fbfd;border-radius:14px}.upload-sidebar-folder-icon{width:40px;height:40px;border-radius:12px;background:#e8f1ff;display:flex;align-items:center;justify-content:center;color:#3182f6;flex-shrink:0}.upload-sidebar-meta{flex:1;min-width:0}.upload-sidebar-folder-name{font-size:16px;font-weight:700;color:#191f28;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.02em}.upload-sidebar-file-count{font-size:12px;color:#8b95a1;margin-top:2px}.upload-status-inline{padding:10px 14px;border-radius:10px;font-size:13px;font-weight:500}.upload-status-inline.error{background:#fff0ee;color:#d32f2f}.upload-optimizing-msg{color:#e67e22;font-size:13px;margin-top:8px;text-align:center;font-weight:500}@media(max-width:1024px){.upload-container{grid-template-columns:1fr;height:auto;gap:20px;padding:20px}.upload-sidebar{position:static}}@media(max-width:768px){.upload-container{padding:16px;gap:16px}.upload-header{margin-bottom:0}.upload-title{font-size:22px;margin:0 0 4px;letter-spacing:-.4px}.upload-subtitle{font-size:13px}.upload-dropzone{min-height:180px;padding:28px 20px;border-radius:12px}.upload-empty-icon{width:56px;height:56px}.upload-empty-icon svg{width:24px;height:24px}.upload-empty-text{font-size:15px}.upload-empty-subtext{font-size:12px}.upload-preview-image{max-height:120px}.upload-file-info{font-size:13px}.upload-file-size{font-size:11px}.upload-preview-tag,.upload-preview-tag-more{font-size:10px;padding:3px 7px}.upload-folder-grid{gap:16px}.upload-folder-card{padding:10px}.upload-folder-thumbnail,.upload-folder-icon{height:90px;margin-bottom:7px}.upload-folder-name{font-size:12px;margin-bottom:3px}.upload-folder-file-count{font-size:10px;margin-bottom:3px}.upload-folder-card-tag{font-size:9px;padding:2px 6px}.upload-folder-card-tag-more{font-size:9px;padding:2px 5px}.upload-tag{font-size:12px;padding:5px 10px}.upload-tag-remove{font-size:14px}.upload-tag-input{min-height:48px;font-size:13px}.upload-menu-trigger,.upload-add-btn{padding:12px 16px;font-size:14px}.upload-button{padding:14px;font-size:14px}.status-badge{font-size:12px;padding:7px 10px}.upload-menu-item{padding:11px 14px;font-size:12px}}@media(max-width:480px){.upload-container{padding:12px;gap:12px}.upload-title{font-size:20px;margin:0 0 3px;letter-spacing:-.3px}.upload-subtitle{font-size:12px}.upload-dropzone{min-height:160px;padding:24px 16px;border-radius:10px}.upload-empty-icon{width:48px;height:48px}.upload-empty-icon svg{width:22px;height:22px}.upload-empty-text{font-size:14px}.upload-empty-subtext{font-size:11px}.upload-preview-image{max-height:100px}.upload-file-info{font-size:12px;gap:6px}.upload-file-size{font-size:10px}.upload-preview-tag,.upload-preview-tag-more{font-size:9px;padding:2px 6px}.upload-folder-grid{gap:12px}.upload-folder-card{padding:8px}.upload-folder-thumbnail,.upload-folder-icon{height:80px;margin-bottom:6px;border-radius:5px}.upload-folder-name{font-size:11px;margin-bottom:2px}.upload-folder-file-count{font-size:9px;margin-bottom:2px}.upload-folder-card-tags{margin-top:5px;padding:0 6px 6px;gap:3px}.upload-folder-card-tag{font-size:8px;padding:2px 5px}.upload-folder-card-tag-more{font-size:8px;padding:2px 4px}.upload-folder-expand-icon{width:18px;height:18px;font-size:9px}.upload-tag{font-size:11px;padding:4px 9px;gap:5px}.upload-tag-remove{font-size:13px}.upload-tag-input-group{gap:7px;margin-bottom:14px}.upload-tag-input{min-height:44px;font-size:12px;padding:8px 10px}.upload-menu-trigger{padding:11px 14px;font-size:13px;border-radius:10px}.upload-add-btn{padding:11px 14px;font-size:13px}.upload-button{padding:13px;font-size:13px;margin-top:10px}.status-badge{font-size:11px;padding:6px 9px}.upload-menu-item{padding:10px 12px;font-size:11px;gap:6px}.upload-progress-text{font-size:12px;margin-bottom:7px}.upload-progress-bar{height:5px}.ai-tags-panel{padding:10px}.ai-tags-title{font-size:11px}.ai-tags-button{padding:3px 7px;font-size:10px}}.login-container{min-height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;background:var(--color-bg);padding:20px}.login-card{background:var(--color-white);border-radius:var(--radius-xl);padding:var(--spacing-2xl);width:100%;max-width:420px;box-shadow:var(--shadow-md);border:1px solid var(--color-border)}.auth-card-compact{max-width:460px}.login-header{text-align:left;font-size:16px;margin-bottom:32px}.auth-header-centered{text-align:center}.auth-badge{display:inline-flex;align-items:center;justify-content:center;padding:6px 12px;border-radius:999px;background:#4fc3f724;color:var(--color-primary-dark);font-size:12px;font-weight:700;margin-bottom:12px}.auth-description{font-size:14px;line-height:1.6;color:var(--color-text-light);margin-top:10px}.logo{font-size:28px;font-weight:700;color:#333;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:8px}.logo:before{content:"●";font-size:24px;color:#000}.subtitle{font-size:12px;color:#555;font-weight:600;margin-bottom:16px}.tab-selector{display:flex;gap:8px;margin-bottom:24px;border-bottom:1px solid #f0f0f0;padding-bottom:16px}.tab{flex:1;padding:12px;text-align:center;font-size:14px;color:#999;cursor:pointer;border-bottom:2px solid transparent;transition:all .3s ease;font-weight:500}.tab.active{color:#333;border-bottom-color:#333}.tab:hover{color:#666}.input-group{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.input-field{width:100%;padding:14px 16px;border:1px solid #ddd;border-radius:8px;font-size:14px;font-family:inherit;transition:all .3s ease;background-color:#fafafa;margin-bottom:10px}.input-field:focus{outline:none;border-color:#5b9dd9;background-color:#fff;box-shadow:0 0 0 3px #5b9dd91a}.input-field::placeholder{color:#999}.input-field{color:var(--color-text)}.input-field-readonly{background:#f2f6fa;color:#5b6774}.checkbox-group{margin-bottom:20px;padding:12px 0}.checkbox-item{display:flex;align-items:center;gap:10px;padding:10px 0;cursor:pointer;font-size:13px;color:var(--color-text);-webkit-user-select:none;user-select:none}.checkbox-item input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--color-primary)}.checkbox-item span:first-of-type{flex:1}.arrow{color:#ddd;margin-left:auto;font-size:16px}.login-btn{width:100%;padding:14px;background:#3182f6;color:var(--color-white);border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;margin-bottom:var(--spacing-sm);box-shadow:0 4px 20px #3182f640}.login-btn:hover{transform:translateY(-2px);box-shadow:0 6px 25px #4fc3f766}.login-btn:active{transform:translateY(0)}.login-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.google-login-btn{width:100%;min-height:56px;display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:14px 18px;background:#fff;color:#1f2937;border:1px solid #d9e2ec;border-radius:14px;font-size:15px;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 10px 24px #0f172a0f}.google-login-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 32px #0f172a1a}.google-login-btn:disabled{opacity:.65;cursor:not-allowed}.auth-helper-text,.auth-error-text{margin-top:14px;font-size:13px;line-height:1.6}.auth-helper-text{color:var(--color-text-light)}.auth-error-text{color:var(--color-error);background:var(--color-error-bg);border:1px solid rgba(211,47,47,.16);border-radius:12px;padding:12px 14px}.forgot-btn{width:100%;padding:14px;background:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary);border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;margin-bottom:var(--spacing-md)}.forgot-btn:hover{background:#4fc3f714;border-color:var(--color-primary-dark)}.forgot-btn:disabled{opacity:.6;cursor:not-allowed}.back-btn{width:100%;padding:var(--spacing-sm);background:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary);border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s ease;margin-top:var(--spacing-xs)}.back-btn:hover{background:#4fc3f714;border-color:var(--color-primary-dark)}.back-btn:disabled{opacity:.6;cursor:not-allowed}.login-footer{text-align:center;font-size:13px;color:var(--color-text);padding-top:16px;border-top:1px solid #f0f0f0}.signup-text-link{background:none;border:none;color:var(--color-primary);cursor:pointer;font-weight:600;margin-left:4px;transition:all .3s ease;font-size:13px;padding:0;position:relative}.signup-text-link:after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:2px;background-color:var(--color-primary);transition:all .3s ease}.signup-text-link:hover{color:var(--color-primary-dark)}.signup-text-link:hover:after{background-color:var(--color-primary-dark)}.signup-text-link:disabled{opacity:.6;cursor:not-allowed}.login-form,.new-password-form,.reset-form{animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.new-password-form,.reset-form{text-align:center}.new-password-form h3,.reset-form h3{font-size:18px;color:var(--color-text);margin-bottom:16px}.reset-form p{font-size:13px;color:var(--color-text-secondary);margin-bottom:16px}.signup-card{max-width:480px}.signup-progress{display:flex;align-items:center;justify-content:center;margin-top:24px;gap:0}.progress-step{display:flex;flex-direction:column;align-items:center;gap:6px}.step-number{width:28px;height:28px;border-radius:50%;background:#e0e0e0;color:#999;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;transition:all .3s ease}.step-label{font-size:11px;color:#999;white-space:nowrap}.progress-step.active .step-number{background:var(--color-primary);color:#fff}.progress-step.active .step-label{color:var(--color-primary);font-weight:600}.progress-step.completed .step-number{background:#4caf50;color:#fff}.progress-step.completed .step-label{color:#4caf50}.progress-line{width:40px;height:2px;background:#e0e0e0;margin:0 8px 20px}.terms-section{background:#f8f9fa;border-radius:12px;padding:16px;margin-bottom:20px}.terms-divider{height:1px;background:#e0e0e0;margin:12px 0}.terms-item{display:flex;align-items:center;justify-content:space-between}.terms-item .checkbox-item{flex:1;padding:8px 0}.terms-view-btn{background:none;border:none;color:#666;font-size:12px;cursor:pointer;padding:4px 8px;text-decoration:underline}.terms-view-btn:hover{color:var(--color-primary)}.checkbox-item.all-agree{padding:12px 0}.checkbox-label-main{font-weight:600;font-size:15px}.input-label{display:block;font-size:13px;font-weight:600;color:#333;margin-bottom:6px;margin-top:12px}.input-label:first-child{margin-top:0}.required{color:#e53935}.input-hint{font-size:12px;color:#888;margin:-6px 0 8px}.input-hint.valid{color:#4caf50}.input-hint.invalid{color:#e53935}.password-rules{font-size:12px;color:#888;line-height:1.8;padding:8px 12px;background:#f5f5f5;border-radius:8px;margin-bottom:8px}.password-rules div.valid{color:#4caf50}.date-select-group{display:flex;gap:8px}.date-select{flex:1;min-width:0}.gender-select-group{display:flex;gap:8px;margin-bottom:12px}.gender-btn{flex:1;padding:12px;border:1.5px solid #ddd;border-radius:8px;background:#fafafa;color:#666;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.gender-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}.gender-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.auth-inline-links{display:flex;justify-content:flex-end;margin:4px 0 16px}.privacy-agree-label{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151;margin:12px 0 4px;cursor:pointer}.privacy-agree-checkbox{width:16px;height:16px;flex-shrink:0;cursor:pointer;accent-color:#3b82f6}.privacy-link{color:#3b82f6;text-decoration:underline}.step-description{font-size:13px;color:#666;text-align:center;margin-bottom:20px;padding:12px;background:#f0f7ff;border-radius:8px}.error-message{color:#d32f2f;font-size:13px;margin-bottom:16px;text-align:center;padding:10px;background:#ffebee;border-radius:8px}.confirm-step{text-align:center}.confirm-icon{color:var(--color-primary);margin-bottom:16px}.confirm-step h3{font-size:20px;margin-bottom:12px;color:#333}.confirm-description{font-size:14px;color:#666;margin-bottom:24px;line-height:1.6}.confirm-description strong{color:var(--color-primary)}.code-input{text-align:center;font-size:24px;letter-spacing:8px;font-weight:600}.confirm-hint{font-size:12px;color:#888;margin-top:16px}.done-step{text-align:center;padding:20px 0}.done-icon{color:#4caf50;margin-bottom:16px}.done-step h3{font-size:24px;color:#333;margin-bottom:8px}.done-step p{font-size:16px;color:#666}.done-description{font-size:14px!important;color:#888!important;margin-top:12px;line-height:1.6}.terms-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.terms-modal{background:#fff;border-radius:16px;max-width:600px;width:100%;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}.terms-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #eee}.terms-modal-header h3{font-size:18px;font-weight:600;margin:0}.terms-modal-close{background:none;border:none;cursor:pointer;color:#666;padding:4px;display:flex;align-items:center;justify-content:center}.terms-modal-close:hover{color:#333}.terms-modal-content{flex:1;overflow-y:auto;padding:24px}.terms-modal-content pre{font-family:inherit;font-size:14px;line-height:1.8;color:#444;white-space:pre-wrap;word-break:keep-all;margin:0}.terms-modal-footer{padding:16px 24px;border-top:1px solid #eee}@media(max-width:480px){.login-card{padding:24px}.signup-card{max-width:100%}.logo{font-size:24px}.subtitle{font-size:16px}.tab-selector{gap:4px}.tab{font-size:12px;padding:10px}.input-field{padding:12px 14px;font-size:13px}.login-btn,.forgot-btn{padding:12px;font-size:14px}.signup-progress{gap:0}.progress-line{width:20px;margin:0 4px}.step-number{width:24px;height:24px;font-size:11px}.step-label{font-size:10px}.date-select-group{flex-direction:column;gap:8px}.gender-select-group{flex-direction:row}.gender-btn{padding:10px 8px;font-size:13px}.terms-modal{max-height:90vh;margin:10px}.terms-modal-header{padding:16px 20px}.terms-modal-content{padding:20px}.terms-modal-content pre{font-size:13px}.code-input{font-size:20px;letter-spacing:6px}}.file-controls{margin-bottom:7px;padding:4px 0 12px;border-radius:18px;display:flex;gap:12px;flex-direction:column}.search-bar{display:flex;gap:8px;align-items:center}.search-input{flex:1;padding:12px 14px;border-radius:16px;border:1px solid #e5ebf2;background:#f9fbfd;color:var(--color-text);font-size:14px;outline:none}.control-btn{padding:0 16px;height:42px;border-radius:14px;border:1px solid #e5ebf2;background:#fff;color:var(--color-text);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .2s;display:flex;align-items:center;justify-content:center}.ai-tag-btn{display:flex;align-items:center;gap:4px}.ai-tag-btn.active{background:var(--color-primary);color:#fff}.controls-row{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}.tag-filters{display:flex;align-items:center;gap:6px;flex:1;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-bottom:4px}.filter-mode-toggle{display:flex;align-items:center;gap:2px;margin-right:4px;padding:2px;border-radius:14px;border:1px solid #e5ebf2;background:#fff;flex-shrink:0}.mode-btn{padding:3px 8px;border-radius:8px;border:none;background:transparent;color:var(--color-text-secondary);font-size:10px;cursor:pointer;font-weight:400;outline:none;transition:all .2s}.mode-btn.active{background:var(--color-primary);color:#fff;font-weight:600}.tag-filter-btn{padding:0 12px;height:32px;border-radius:999px;border:1px solid #e5ebf2;background:#fff;color:var(--color-text);font-size:12px;cursor:pointer;font-weight:500;flex-shrink:0;outline:none;transition:all .2s;display:flex;align-items:center}.tag-filter-btn.active{background:#3182f6;border-color:#3182f6;color:#fff;font-weight:600}.action-buttons{display:flex;gap:6px;margin-left:auto;align-items:center}.select-all-btn{padding:0 16px;height:42px;border-radius:14px;border:1px solid #e5ebf2;background:#fff;color:var(--color-text);font-size:13px;cursor:pointer;font-weight:500;transition:all .2s;white-space:nowrap;display:flex;align-items:center;justify-content:center}.select-all-btn.active{background:var(--color-primary);color:#fff}.selection-count{font-size:12px;color:var(--color-text-secondary);white-space:nowrap}.icon-btn{height:34px;padding:0 10px;border-radius:10px;border:1px solid #e5ebf2;background:#fff;color:var(--color-text);cursor:pointer;outline:none;display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;font-weight:500;white-space:nowrap;transition:all .2s}.icon-btn.view-mode-btn,.icon-btn.sort-btn{width:34px;padding:0}.icon-btn:hover{background:#f0f6ff;border-color:#bfd3ef}.icon-btn.active{background:#3182f6;border-color:#3182f6;color:#fff}.bulk-tag-btn,.bulk-share-btn,.bulk-move-btn,.bulk-download-btn{color:#3182f6;border-color:#3182f633}.bulk-delete-btn{border-color:#ff52524d;color:#ff5252}.bulk-delete-btn:hover{background:#ff52521a}.sort-dropdown-wrapper{position:relative}.dropdown-overlay{position:fixed;inset:0;z-index:999}.sort-dropdown{position:absolute;top:calc(100% + 4px);right:0;min-width:180px;background:var(--color-white);border:.5px solid var(--color-border);border-radius:16px;box-shadow:0 12px 28px #0f172a14;z-index:1000;overflow:hidden}.dropdown-item{width:100%;padding:10px 12px;border:none;background:transparent;color:var(--color-text);font-size:14px;text-align:left;cursor:pointer;font-weight:400;transition:background .15s}.dropdown-item:hover{background:#0000000d}.dropdown-item.active{background:#4fc3f71a;color:var(--color-primary);font-weight:600}.filelist-container{background:var(--color-white);border-radius:24px;padding:var(--spacing-xl);margin:0;box-shadow:none;border:1px solid #eef2f6}.filelist-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:9px;border-bottom:2px solid #f0f0f0;padding-bottom:20px}.back-to-root-btn{background:linear-gradient(135deg,#81d4fa26,#4fc3f71a);border:1px solid rgba(79,195,247,.3);color:var(--color-primary);padding:10px 18px;border-radius:var(--radius-md);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}.back-to-root-btn:hover{background:linear-gradient(135deg,#81d4fa40,#4fc3f726);border-color:var(--color-primary);transform:translate(-2px)}.breadcrumb{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#4fc3f70d;border-radius:var(--radius-md);margin-bottom:var(--spacing-md);font-size:13px}.breadcrumb-item{color:var(--color-primary);cursor:pointer;transition:all .2s}.breadcrumb-item:hover:not(.active){color:var(--color-text);text-decoration:underline}.breadcrumb-item.active{color:var(--color-text);font-weight:600;cursor:default}.breadcrumb-separator{color:#ccc}.filelist-title{font-size:24px;font-weight:700;color:var(--color-text);margin:0}.filelist-subtitle{font-size:14px;color:var(--color-primary);font-weight:600;margin:0}.filelist-error{background:var(--color-error-bg);border:1px solid #ffcdd2;border-radius:var(--radius-sm);padding:14px var(--spacing-md);color:var(--color-error);font-size:13px;margin-bottom:20px;display:flex;align-items:center;gap:var(--spacing-xs)}.filelist-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;color:var(--color-text-lighter);text-align:center}.filelist-empty p{font-size:16px;color:var(--color-text-light);margin:var(--spacing-xs) 0}.loading-spinner{width:40px;height:40px;border:3px solid #f0f0f0;border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:var(--spacing-md)}.filelist-content{display:flex;flex-direction:column;gap:var(--spacing-xl)}.file-list-section .section-title{font-size:13px;font-weight:600;color:#999;text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px;padding-left:2px}.folder-cards-section{margin-bottom:var(--spacing-md)}.folder-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-lg)}.folder-card{background:var(--color-white);border:2px solid transparent;border-radius:var(--radius-md);overflow:hidden;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #00000014;position:relative}.folder-card:hover{border-color:var(--color-primary);transform:translateY(-4px);box-shadow:0 8px 20px #4fc3f740}.folder-card.selected{border-color:var(--color-primary);background:#4fc3f70d}.folder-card-checkbox{position:absolute!important;top:12px;right:12px;left:auto;width:20px;height:20px;cursor:pointer;z-index:20;accent-color:var(--color-primary);flex:none;margin:0}.folder-card .file-item-checkbox-wrapper{position:absolute;top:8px;right:8px;z-index:10}.folder-card-thumbnail{width:100%;aspect-ratio:1 / 1;position:relative;background:linear-gradient(135deg,#81d4fa26,#4fc3f71a);display:flex;align-items:center;justify-content:center}.folder-card-thumbnail img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;z-index:1}.folder-card-icon{color:var(--color-primary);opacity:.4;z-index:1;position:relative}.folder-card-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);padding:12px;color:#fff;z-index:2}.folder-card-count{font-size:12px;font-weight:600;text-align:right}.folder-card-name{padding:14px 14px 8px;font-size:14px;font-weight:600;color:var(--color-text);text-align:center;background:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folder-card-tags{display:flex;flex-wrap:wrap;gap:4px;padding:0 12px 12px;justify-content:center;align-items:center}.folder-card-tag{display:inline-block;background:linear-gradient(135deg,#81d4fa1f,#4fc3f714);color:var(--color-primary);padding:3px 8px;border-radius:12px;font-size:11px;font-weight:500;border:1px solid rgba(79,195,247,.2)}.folder-card-tag-more{display:inline-block;color:#999}.folder-card-tag-empty{display:inline-block;color:#bbb;font-size:11px;font-weight:500;padding:3px 6px}.filelist-with-folders{display:flex;flex-direction:column;gap:var(--spacing-xl)}.folder-group{display:flex;flex-direction:column;gap:var(--spacing-md)}.folder-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:linear-gradient(135deg,#81d4fa14,#4fc3f70d);border:1px solid rgba(79,195,247,.25);border-radius:var(--radius-md);cursor:pointer;transition:all .2s;-webkit-user-select:none;user-select:none}.folder-header:hover{background:linear-gradient(135deg,#81d4fa1f,#4fc3f714);border-color:var(--color-primary);box-shadow:0 2px 8px #4fc3f726}.folder-header-left{display:flex;align-items:center;gap:12px;flex:1}.folder-icon{font-size:20px;line-height:1}.folder-name{font-size:15px;font-weight:600;color:var(--color-text)}.folder-count{font-size:12px;color:#4fc3f7e6;font-weight:500}.folder-toggle{width:28px;height:28px;border-radius:50%;border:1.5px solid rgba(79,195,247,.4);background:#fffc;color:var(--color-primary);font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;line-height:1}.folder-toggle:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary);transform:scale(1.1)}.filelist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--spacing-md)}.file-item{background:var(--color-white);border:1.5px solid var(--color-border);border-radius:var(--radius-md);transition:all .3s ease;cursor:pointer;position:relative}.file-item:hover{border-color:var(--color-primary);box-shadow:var(--shadow-lg)}.file-item.selected{border-color:var(--color-primary);background:#4fc3f70d}.file-item-grid{display:flex;flex-direction:column;padding:var(--spacing-sm)}.file-item-grid .file-item-checkbox-wrapper{position:absolute;top:8px;right:8px;z-index:10}.file-item-clickable{flex:1;display:flex;flex-direction:column;min-width:0;cursor:pointer}.file-item-grid .file-item-clickable{flex-direction:column}.file-item-grid .file-item-icon-wrapper{width:100%;aspect-ratio:1 / 1;object-fit:cover;flex-shrink:0;display:flex;border-radius:8px;overflow:hidden;background:var(--color-bg-light)}.file-item-grid .file-item-content{flex:1;min-width:0}.file-item-grid .file-item-meta{display:flex;flex-direction:column;gap:4px}.file-item-list{display:flex;align-items:center;gap:16px;padding:12px}.file-item-list .file-item-checkbox-wrapper{flex-shrink:0}.file-item-list .file-item-icon-wrapper{width:48px;height:48px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:8px;overflow:hidden;background:var(--color-bg-light)}.file-item-list .file-item-clickable{flex:1;display:flex;min-width:0}.file-item-list .file-item-content{flex:1;min-width:0}.file-item-list .file-item-meta{display:flex;gap:12px;margin-top:4px;flex-wrap:wrap;align-items:center}.file-item-name{font-size:14px;font-weight:600;color:var(--color-text);margin:0 0 var(--spacing-xs) 0;line-height:1.4;word-break:break-word;overflow:hidden;text-overflow:ellipsis}.file-item-grid .file-item-name{white-space:normal}.file-item-list .file-item-name{white-space:nowrap}.file-item-meta{font-size:12px;color:var(--color-text-light)}.file-item-size,.file-item-date{display:inline-flex;align-items:center;gap:6px}.file-item-tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px}.file-item-list .file-item-tags{margin-top:6px}.file-item-tag{font-size:11px;padding:2px 8px;background:linear-gradient(135deg,#81d4fa33,#4fc3f726);color:var(--color-primary);border-radius:12px;font-weight:500}.file-item-tag-more{font-size:11px;padding:2px 8px;color:var(--color-text-secondary);font-weight:500}.file-item-checkbox-wrapper input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:18px;height:18px;border:2px solid var(--color-border);border-radius:4px;cursor:pointer;position:relative;transition:all .2s;background:#fff}input[type=checkbox]:hover{border-color:var(--color-primary)}input[type=checkbox]:checked{background:var(--color-primary);border-color:var(--color-primary)}input[type=checkbox]:checked:after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.bulk-delete-btn:disabled{opacity:.6;cursor:not-allowed}.bulk-delete-btn.deleting{pointer-events:none}.spinner{animation:spin 1s linear infinite;transform-origin:center}@media(max-width:768px){.filelist-container{padding:16px;margin:0;border-radius:12px}.filelist-header{flex-direction:column;align-items:flex-start;gap:8px;padding-bottom:16px}.filelist-title{font-size:20px}.filelist-subtitle{font-size:13px}.file-controls{padding:10px 0;gap:10px}.controls-row{gap:8px;flex-wrap:wrap}.control-btn{padding:6px 10px;font-size:11px}.tag-filters{gap:4px;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tag-filters::-webkit-scrollbar{display:none}.tag-filter-btn{font-size:10px;padding:4px 8px;white-space:nowrap}.filter-mode-toggle{margin-right:4px}.mode-btn{font-size:9px;padding:4px 6px}.action-buttons{gap:4px;width:100%;justify-content:flex-end}.select-all-btn{font-size:11px;padding:6px 10px}.selection-count{font-size:11px}.icon-btn{padding:6px}.folder-cards-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.folder-card-name{font-size:13px;padding:12px 10px 6px}.folder-card-tags{padding:0 10px 10px;gap:3px}.folder-card-tag{font-size:10px;padding:2px 6px}.folder-card-tag-empty{font-size:10px}.folder-header{padding:12px 14px;flex-wrap:wrap}.folder-name{font-size:14px}.folder-count{font-size:11px}.folder-toggle{width:24px;height:24px;font-size:14px}.filelist-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.file-item-grid{padding:10px}.file-item-name{font-size:13px;margin:0 0 6px}.file-item-meta{font-size:11px}.file-item-tags{margin-top:6px;gap:3px}.file-item-tag{font-size:10px;padding:2px 6px}.file-item-list{padding:10px;gap:10px}.file-item-list .file-item-icon-wrapper{width:40px;height:40px}.breadcrumb{padding:10px 12px;font-size:12px;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.breadcrumb::-webkit-scrollbar{display:none}.back-to-root-btn{padding:8px 14px;font-size:12px}}@media(max-width:480px){.filelist-container{padding:12px;margin:0;border-radius:10px}.filelist-title{font-size:18px}.filelist-subtitle{font-size:12px}.file-controls{padding:8px 0;gap:8px}.control-btn{padding:5px 8px;font-size:10px}.tag-filter-btn{font-size:9px;padding:3px 6px}.mode-btn{font-size:8px;padding:3px 5px}.select-all-btn{font-size:10px;padding:5px 8px}.selection-count{font-size:10px}.folder-cards-grid{grid-template-columns:repeat(3,1fr);gap:10px}.folder-card-name{font-size:12px;padding:10px 8px 5px}.folder-card-tag{font-size:9px;padding:2px 5px}.folder-header{padding:10px 12px}.folder-name{font-size:13px}.folder-count{font-size:10px}.folder-toggle{width:22px;height:22px;font-size:12px}.filelist-grid{grid-template-columns:repeat(3,1fr);gap:10px}.file-item-grid{padding:8px}.file-item-name{font-size:12px;margin:0 0 4px;line-height:1.3}.file-item-meta{font-size:10px}.file-item-tags{margin-top:4px}.file-item-tag{font-size:9px;padding:1px 5px}.file-item-list{padding:8px;gap:8px}.file-item-list .file-item-icon-wrapper{width:36px;height:36px}.breadcrumb{padding:8px 10px;font-size:11px}.back-to-root-btn{padding:6px 12px;font-size:11px}.deleting-progress-modal{min-width:auto;width:90%;padding:20px}.deleting-progress-header h3{font-size:16px}.deleting-progress-text{font-size:13px}.deleting-progress-info{font-size:12px}}.deleting-progress-overlay{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .2s ease-out}.deleting-progress-modal{background:#fff;border-radius:16px;box-shadow:0 20px 60px #0000004d;min-width:400px;max-width:90%;padding:32px;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.deleting-progress-header{display:flex;align-items:center;gap:12px;margin-bottom:24px}.deleting-progress-header svg{flex-shrink:0}.deleting-progress-header h3{margin:0;font-size:20px;font-weight:600;color:#333}.deleting-progress-body{display:flex;flex-direction:column;gap:16px}.deleting-progress-text{font-size:16px;font-weight:600;color:#555;text-align:center}.deleting-progress-bar-container{width:100%;height:12px;background:#e0e0e0;border-radius:6px;overflow:hidden;position:relative}.deleting-progress-bar{height:100%;background:linear-gradient(90deg,#f44,#ff6b6b);border-radius:6px;transition:width .3s ease-out;position:relative;overflow:hidden}.deleting-progress-bar:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 1.5s infinite}.deleting-progress-info{font-size:14px;color:#777;text-align:center}@media(max-width:480px){.deleting-progress-modal{min-width:auto;width:90%;padding:24px}.deleting-progress-header h3{font-size:18px}.deleting-progress-text{font-size:14px}}.file-modal-overlay{position:fixed;inset:0;background:#000;z-index:9999;display:flex;flex-direction:column}.modal-nav-button{position:absolute;top:50%;transform:translateY(-50%);z-index:10;background:#0000004d;color:#fff;border:none;font-size:2.2rem;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.modal-nav-button:hover{background:#00000080}.modal-nav-button-prev{left:8px}.modal-nav-button-next{right:8px}.modal-toolbar-back{background:none;border:none;color:#8fd3ff;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:4px;transition:background .2s,color .2s}.modal-toolbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:16px 24px;background:#111;color:#fff;z-index:10}.modal-toolbar-back:hover{background:#4fc3f71f;color:#4fc3f7}.modal-toolbar-back svg{display:block;width:24px;height:24px}.modal-toolbar-btn svg{display:block;width:22px;height:22px}.modal-toolbar-back{background:none;border:none;color:#fff;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:4px}.modal-toolbar-back:hover{background:none;color:#fff}.modal-toolbar-btn{background:none;border:none;color:#fff;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s}.modal-toolbar-btn .modal-toolbar-btn{background:none;border:none;color:#fff;cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:4px}.modal-toolbar-btn .modal-toolbar-btn:hover{background:none;color:#fff}.modal-toolbar-btn .modal-toolbar-btn svg{display:block;width:22px;height:22px;color:#fff}.modal-toolbar-btn:hover{background:#ffffff1a}.modal-content-wrapper{flex:1;display:flex;overflow:hidden}.modal-image-area{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.modal-image-area.draggable{cursor:grab}.modal-image-area.dragging{cursor:grabbing}.modal-nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;color:#fff;font-size:32px;cursor:pointer;padding:16px 20px;border-radius:8px;z-index:10;transition:all .2s;display:flex;align-items:center;justify-content:center;line-height:1}.modal-nav-btn:hover{background:#fff3}.modal-nav-btn.prev{left:20px}.modal-nav-btn.next{right:20px}.modal-main-image{max-width:90%;max-height:90%;object-fit:contain;transition:transform .2s;-webkit-user-select:none;user-select:none;pointer-events:none}.modal-main-image.zoomed{max-width:none;max-height:none}.modal-file-placeholder{text-align:center;color:#fff}.modal-file-icon{font-size:80px;margin-bottom:20px;opacity:.5}.modal-zoom-display{background:#ffffff1a;border:none;color:#fff;cursor:pointer;padding:8px 12px;border-radius:4px;font-size:12px;transition:background .2s;min-width:60px}.modal-zoom-display:hover{background:#fff3}.modal-info-label{font-size:11px;color:#ffffff80;margin-bottom:6px;font-weight:600;letter-spacing:.5px}.modal-info-grid{display:flex;flex-direction:column;gap:10px}.modal-info-row{display:flex;justify-content:space-between;font-size:13px}.modal-info-row-label{color:#fff9}.modal-info-row-value{font-weight:500}.modal-tags-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.modal-tag-edit-btn{background:#4fc3f726;border:1px solid rgba(79,195,247,.3);color:#81d4fa;padding:4px 10px;border-radius:6px;font-size:11px;cursor:pointer;font-weight:500;transition:all .2s}.modal-tag-edit-btn:hover{background:#4fc3f740}.modal-tags-container{display:flex;flex-direction:column;gap:12px}.modal-tag{display:inline-block;font-size:12px;padding:6px 12px;background:linear-gradient(135deg,#81d4fa40,#4fc3f733);color:#81d4fa;border-radius:16px;font-weight:500;border:1px solid rgba(79,195,247,.3)}.modal-tag-editable{display:inline-flex;align-items:center;gap:6px}.modal-tag-remove{background:none;border:none;color:#81d4fab3;cursor:pointer;padding:0 2px;font-size:14px;line-height:1;display:flex;align-items:center}.modal-tag-folder{background:linear-gradient(135deg,#ffcc8033,#ffb74d26);color:#ffcc80;border-color:#ffb74d40}.modal-tag-ai{background:linear-gradient(135deg,#90caf933,#64b5f626);color:#90caf9;border-color:#64b5f640}.modal-tag-input-group{display:flex;gap:6px}.modal-tag-input{flex:1;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#fff;padding:8px 12px;border-radius:6px;font-size:12px;outline:none}.modal-tag-add-btn{background:#4fc3f733;border:1px solid rgba(79,195,247,.3);color:#81d4fa;padding:8px 12px;border-radius:6px;font-size:12px;cursor:pointer;font-weight:500;white-space:nowrap}.modal-tag-actions{display:flex;gap:8px;margin-top:4px}.modal-tag-save-btn,.modal-tag-cancel-btn{flex:1;padding:10px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer}.modal-tag-save-btn{background:linear-gradient(135deg,#4fc3f74d,#4fc3f733);border:1px solid rgba(79,195,247,.4);color:#fff}.modal-tag-save-btn:disabled{opacity:.6;cursor:not-allowed}.modal-tag-cancel-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.2);color:#ffffffb3;font-weight:500}.modal-tag-cancel-btn:disabled{cursor:not-allowed}.modal-notes{font-size:13px;color:#fff6;font-style:italic;padding:12px;background:#ffffff08;border-radius:6px;border:1px dashed rgba(255,255,255,.1)}.modal-thumbnail-slider{background:#000000e6;padding:16px;display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.modal-thumbnail{min-width:80px;height:80px;border-radius:8px;overflow:hidden;cursor:pointer;border:3px solid transparent;opacity:.6;transition:all .2s;background:#222;display:flex;align-items:center;justify-content:center}.modal-thumbnail:hover{opacity:.9}.modal-thumbnail.active{border-color:#fff;opacity:1}.modal-thumbnail-image{width:100%;height:100%;object-fit:cover}.modal-thumbnail-icon{font-size:32px;color:#fff;opacity:.5}.modal-zoom-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:8px;background:#0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px;border-radius:8px;z-index:10}.modal-zoom-btn{background:#ffffff1a;border:none;color:#fff;cursor:pointer;padding:8px 12px;border-radius:4px;font-size:18px;transition:background .2s}.modal-zoom-btn:hover{background:#fff3}.modal-content-main{flex:1;display:flex;overflow:hidden}.modal-image-container{flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.modal-image-container.dragging{cursor:grabbing}.modal-image-container.grabbable{cursor:grab}.modal-nav-button{position:absolute;top:50%;transform:translateY(-50%);background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:none;color:#fff;font-size:32px;cursor:pointer;padding:16px 20px;border-radius:8px;z-index:10;transition:all .2s;display:flex;align-items:center;justify-content:center;line-height:1}.modal-nav-button:hover{background:#fff3}.modal-nav-button.prev{left:20px}.modal-nav-button.next{right:20px}.modal-image{max-width:90%;max-height:90%;object-fit:contain;-webkit-user-select:none;user-select:none;pointer-events:none;transition:transform .2s}.modal-image.zoomed{max-width:none;max-height:none}.modal-pdf-container{width:95%;height:95%;display:flex;flex-direction:column;position:relative;overflow:hidden}.modal-pdf-iframe{width:100%;height:100%;border:none;border-radius:8px;background-color:#525252;overflow:auto}.modal-pdf-controls{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:12px;z-index:10}.modal-pdf-control-btn{padding:10px 20px;background:#000000b3;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:8px;cursor:pointer;font-size:13px;text-decoration:none;transition:all .2s;font-weight:500}.modal-pdf-control-btn:hover{background:#000000d9}.modal-pdf-download-btn{margin-top:20px;padding:12px 24px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:8px;cursor:pointer;font-size:14px}.modal-file-display{text-align:center;color:#fff}.modal-file-icon-large{font-size:80px;margin-bottom:20px;opacity:.5}.modal-file-name{font-size:18px;opacity:.7}.modal-file-size{font-size:14px;opacity:.5;margin-top:8px}.modal-info-panel{width:360px;background:#141414f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);color:#fff;overflow-y:auto;border-left:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column}.modal-info-section{padding:20px;border-bottom:1px solid rgba(255,255,255,.1)}.modal-info-section:last-child{border-bottom:none;flex:1}.modal-info-label{font-size:11px;color:#ffffff80;margin-bottom:8px;font-weight:600;letter-spacing:.5px}.modal-info-value{font-size:14px;font-weight:500;word-break:break-word;line-height:1.5}.modal-file-details{display:flex;flex-direction:column;gap:10px}.modal-file-detail-row{display:flex;justify-content:space-between;font-size:13px}.modal-file-detail-label{color:#fff9}.modal-file-detail-value{font-weight:500}.modal-folder-path{font-size:13px;color:#81d4fae6;font-family:monospace;background:#4fc3f71a;padding:8px 12px;border-radius:6px;word-break:break-word;line-height:1.5;border:1px solid rgba(79,195,247,.2)}.modal-tags-container{display:flex;flex-wrap:wrap;gap:6px}.modal-tag{background:#ffffff1a;color:#fff;padding:4px 8px;border-radius:12px;font-size:11px;display:inline-flex;align-items:center;gap:4px}.modal-tag-edit-input{background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#fff;padding:6px 8px;border-radius:4px;font-size:12px;width:100%;margin-bottom:8px}.modal-tag-edit-input:focus{outline:none;border-color:#fff}.modal-tags-edit-actions{display:flex;gap:8px}.modal-tag-edit-btn{background:#ffffff1a;border:none;color:#fff;padding:6px 12px;border-radius:4px;font-size:12px;cursor:pointer;transition:background .2s}.modal-tag-edit-btn:hover{background:#fff3}.modal-tag-edit-btn.save{background:#4caf50}.modal-tag-edit-btn.save:hover{background:#45a049}.modal-no-tags{font-size:12px;color:#fff6;font-style:italic}.modal-tags-edit-container{display:flex;flex-direction:column;gap:12px}.modal-tags-edit-list{display:flex;flex-wrap:wrap;gap:8px}.modal-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 10px;background:linear-gradient(135deg,#81d4fa40,#4fc3f733);color:#81d4fa;border-radius:16px;font-weight:500;border:1px solid rgba(79,195,247,.3)}.modal-tag.ai{background:#64c8ff33;color:#a0d8ff}.modal-tag.folder{background:#ffc86433;color:#ffd8a0}.modal-tag-remove-btn{background:none;border:none;color:#81d4fab3;cursor:pointer;font-size:14px;padding:0;line-height:1}.modal-tag-remove-btn:hover{color:#81d4fa}.modal-tag-input-container{display:flex;gap:6px}.modal-tag-input{flex:1;background:#ffffff1a;border:1px solid rgba(255,255,255,.3);color:#fff;padding:6px 8px;border-radius:4px;font-size:12px}.modal-tag-input:focus{outline:none;border-color:#fff}.modal-tag-add-btn{background:#4fc3f726;border:1px solid rgba(79,195,247,.3);color:#81d4fa;padding:6px 10px;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s}.modal-tag-add-btn:hover{background:#4fc3f740}.modal-tags-edit-actions{display:flex;gap:8px;margin-top:4px}.modal-tag-add-btn:disabled{background:#ffffff0d;color:#ffffff4d;cursor:not-allowed}.modal-tag-add-btn:disabled:hover{background:#ffffff0d}.modal-tags-display-container{display:flex;flex-direction:column;gap:12px}.modal-tag-group-label{font-size:10px;color:#fff6;margin-bottom:6px}.modal-tag-group{display:flex;flex-wrap:wrap;gap:8px}@media(max-width:768px){.modal-toolbar{padding:12px 16px}.modal-toolbar-btn,.modal-toolbar-back{width:36px;height:36px;padding:6px}.modal-toolbar-btn svg,.modal-toolbar-back svg{width:20px;height:20px}.modal-content-wrapper{flex-direction:column}.modal-info-panel{width:100%;max-height:40vh;border-left:none;border-top:1px solid rgba(255,255,255,.1)}.modal-info-section{padding:16px}.modal-info-label{font-size:10px;margin-bottom:5px}.modal-info-value{font-size:13px}.modal-info-row{font-size:12px}.modal-folder-path{font-size:12px;padding:7px 10px}.modal-nav-btn,.modal-nav-button{font-size:26px;padding:12px 14px;width:auto;height:auto}.modal-nav-btn.prev,.modal-nav-button.prev{left:12px}.modal-nav-btn.next,.modal-nav-button.next{right:12px}.modal-zoom-controls{bottom:16px;padding:6px;gap:6px}.modal-zoom-btn{padding:6px 10px;font-size:16px}.modal-zoom-display{padding:6px 10px;font-size:11px;min-width:50px}.modal-thumbnail-slider{padding:12px;gap:6px}.modal-thumbnail{min-width:60px;height:60px;border-width:2px}.modal-thumbnail-icon{font-size:24px}.modal-tag{font-size:11px;padding:5px 10px}.modal-tag-edit-btn{font-size:10px;padding:4px 9px}.modal-tag-input{font-size:11px;padding:5px 7px}.modal-tag-add-btn{font-size:11px;padding:6px 10px}.modal-tag-save-btn,.modal-tag-cancel-btn{padding:9px;font-size:12px}.modal-file-icon,.modal-file-icon-large{font-size:60px;margin-bottom:16px}.modal-file-name{font-size:16px}.modal-file-size{font-size:13px}.modal-pdf-controls{bottom:16px;gap:10px}.modal-pdf-control-btn{padding:9px 16px;font-size:12px}}@media(max-width:480px){.modal-toolbar{padding:10px 12px}.modal-toolbar-btn,.modal-toolbar-back{width:32px;height:32px;padding:5px}.modal-toolbar-btn svg,.modal-toolbar-back svg{width:18px;height:18px}.modal-info-panel{max-height:45vh}.modal-info-section{padding:14px}.modal-info-label{font-size:9px;margin-bottom:4px}.modal-info-value{font-size:12px}.modal-info-row{font-size:11px}.modal-folder-path{font-size:11px;padding:6px 9px}.modal-nav-btn,.modal-nav-button{font-size:22px;padding:10px 12px}.modal-nav-btn.prev,.modal-nav-button.prev{left:8px}.modal-nav-btn.next,.modal-nav-button.next{right:8px}.modal-zoom-controls{bottom:12px;padding:5px;gap:5px}.modal-zoom-btn{padding:5px 8px;font-size:14px}.modal-zoom-display{padding:5px 8px;font-size:10px;min-width:45px}.modal-thumbnail-slider{padding:10px;gap:5px}.modal-thumbnail{min-width:50px;height:50px}.modal-thumbnail-icon{font-size:20px}.modal-tag{font-size:10px;padding:4px 8px}.modal-tag-edit-btn{font-size:9px;padding:3px 8px}.modal-tag-input{font-size:10px;padding:5px 6px}.modal-tag-add-btn{font-size:10px;padding:5px 8px}.modal-tag-save-btn,.modal-tag-cancel-btn{padding:8px;font-size:11px}.modal-file-icon,.modal-file-icon-large{font-size:50px;margin-bottom:14px}.modal-file-name{font-size:15px}.modal-file-size{font-size:12px}.modal-pdf-controls{bottom:12px;gap:8px;flex-wrap:wrap}.modal-pdf-control-btn{padding:8px 14px;font-size:11px}.modal-main-image,.modal-image{max-width:95%;max-height:95%}}.bulk-tag-modal-overlay{position:fixed;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.bulk-tag-modal{background:#fffffff2;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid rgba(0,0,0,.08);border-radius:16px;box-shadow:0 20px 60px #0000004d;max-width:600px;width:90%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.34,1.56,.64,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.bulk-tag-modal-header{display:flex;align-items:center;justify-content:space-between;padding:24px 28px;border-bottom:1px solid rgba(0,0,0,.08);background:#ffffff80}.bulk-tag-modal-title{display:flex;align-items:center;gap:12px}.bulk-tag-modal-title svg{color:#007aff}.bulk-tag-modal-title h3{margin:0;font-size:20px;font-weight:600;color:#1d1d1f;letter-spacing:-.5px}.bulk-tag-modal-close{width:32px;height:32px;border-radius:8px;border:none;background:#0000000a;color:#1d1d1f;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.bulk-tag-modal-close:hover{background:#00000014;transform:scale(1.05)}.bulk-tag-modal-close:active{transform:scale(.95)}.bulk-tag-modal-body{padding:24px 28px;overflow-y:auto;flex:1}.bulk-tag-section-label{display:block;font-size:14px;font-weight:600;color:#1d1d1f;margin-bottom:12px;letter-spacing:-.2px}.bulk-tag-mode-section{margin-bottom:24px}.bulk-tag-mode-options{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.bulk-tag-mode-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 12px;background:#00000005;border:2px solid rgba(0,0,0,.08);border-radius:12px;cursor:pointer;transition:all .2s ease;min-height:100px}.bulk-tag-mode-btn svg{color:#6e6e73;transition:all .2s ease}.bulk-tag-mode-btn:hover{background:#007aff0d;border-color:#007aff33}.bulk-tag-mode-btn:hover svg{color:#007aff}.bulk-tag-mode-btn.active{background:#007aff1a;border-color:#007aff}.bulk-tag-mode-btn.active svg{color:#007aff}.bulk-tag-mode-text{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.bulk-tag-mode-name{font-size:14px;font-weight:600;color:#1d1d1f;letter-spacing:-.2px}.bulk-tag-mode-desc{font-size:11px;color:#6e6e73;line-height:1.3}.bulk-tag-input-section{margin-bottom:24px}.bulk-tag-input-wrapper{display:flex;gap:8px}.bulk-tag-input{flex:1;padding:12px 16px;border:2px solid rgba(0,0,0,.08);border-radius:10px;font-size:14px;background:#00000005;transition:all .2s ease;color:#1d1d1f}.bulk-tag-input:focus{outline:none;border-color:#007aff;background:#fff}.bulk-tag-input::placeholder{color:#86868b}.bulk-tag-add-btn{display:flex;align-items:center;gap:6px;padding:12px 20px;background:#007aff;color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.bulk-tag-add-btn:hover:not(:disabled){background:#0051d5;transform:translateY(-1px);box-shadow:0 4px 12px #007aff4d}.bulk-tag-add-btn:active:not(:disabled){transform:translateY(0)}.bulk-tag-add-btn:disabled{opacity:.5;cursor:not-allowed}.bulk-tag-list-section{margin-bottom:0}.bulk-tag-list{display:flex;flex-wrap:wrap;gap:8px;padding:16px;background:#00000005;border:1px solid rgba(0,0,0,.08);border-radius:12px;max-height:200px;overflow-y:auto}.bulk-tag-item{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:8px;font-size:13px;font-weight:500;color:#1d1d1f;box-shadow:0 1px 3px #0000000d;transition:all .2s ease}.bulk-tag-item:hover{transform:translateY(-1px);box-shadow:0 2px 6px #0000001a}.bulk-tag-item-remove{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;border:none;background:#0000000d;color:#1d1d1f;cursor:pointer;transition:all .2s ease;padding:0}.bulk-tag-item-remove:hover:not(:disabled){background:#ff3b30;color:#fff;transform:scale(1.1)}.bulk-tag-item-remove:disabled{opacity:.3;cursor:not-allowed}.bulk-tag-modal-footer{display:flex;gap:12px;padding:20px 28px;border-top:1px solid rgba(0,0,0,.08);background:#ffffff80}.bulk-tag-cancel-btn,.bulk-tag-save-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease}.bulk-tag-cancel-btn{background:#0000000d;color:#1d1d1f}.bulk-tag-cancel-btn:hover:not(:disabled){background:#00000014}.bulk-tag-save-btn{background:#007aff;color:#fff;box-shadow:0 2px 8px #007aff33}.bulk-tag-save-btn:hover:not(:disabled){background:#0051d5;transform:translateY(-1px);box-shadow:0 4px 12px #007aff4d}.bulk-tag-save-btn:active:not(:disabled){transform:translateY(0)}.bulk-tag-save-btn:disabled,.bulk-tag-cancel-btn:disabled{opacity:.5;cursor:not-allowed}.bulk-tag-spinner{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media(max-width:768px){.bulk-tag-modal{width:95%;max-height:90vh}.bulk-tag-modal-header,.bulk-tag-modal-body,.bulk-tag-modal-footer{padding:20px}.bulk-tag-mode-options{grid-template-columns:1fr;gap:8px}.bulk-tag-mode-btn{flex-direction:row;justify-content:flex-start;padding:12px 16px;min-height:auto}.bulk-tag-mode-text{align-items:flex-start;text-align:left}.bulk-tag-input-wrapper{flex-direction:column}.bulk-tag-add-btn{width:100%;justify-content:center}.bulk-tag-modal-title h3{font-size:18px}}.move-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:9999}.move-modal{background:#fff;border-radius:8px;padding:24px;min-width:320px;max-width:480px;box-shadow:0 8px 32px #0003}.move-modal h3{margin:0 0 16px;font-size:18px;font-weight:600}.folder-selection{margin-bottom:20px;max-height:400px;overflow-y:auto;border:1px solid #ddd;border-radius:4px;padding:8px 0}.folder-option{display:flex;align-items:center;padding:12px 16px;cursor:pointer;transition:background-color .2s}.folder-option:hover{background-color:#f5f5f5}.folder-option input{margin-right:12px;cursor:pointer}.folder-option span{flex:1}.modal-actions{display:flex;gap:8px;justify-content:flex-end}.btn-confirm,.btn-cancel{padding:8px 16px;border-radius:4px;cursor:pointer;font-weight:500;transition:all .2s}.btn-confirm{background:#1976d2;color:#fff;border:none}.btn-confirm:hover{background:#1565c0}.btn-cancel{background:#fff;border:1px solid #ddd;color:#333}.btn-cancel:hover{background:#f5f5f5}.subscription-container{max-width:1200px;margin:0 auto;padding:32px 24px}.subscription-header{text-align:center;margin-bottom:32px}.subscription-eyebrow{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 12px;border-radius:999px;background:#eef4fb;color:#5a6b84;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}.subscription-title{font-size:36px;font-weight:700;color:var(--text-primary);margin:0 0 12px;letter-spacing:-1px}.subscription-subtitle{font-size:15px;color:var(--text-secondary);margin:0;line-height:1.55}.subscription-alert{display:flex;align-items:center;gap:12px;padding:16px 20px;border-radius:12px;margin-bottom:24px;font-size:14px;font-weight:500}.subscription-alert.error{background:#ff3b301a;color:#d32f2f;border:1px solid rgba(255,59,48,.2)}.subscription-alert.success{background:#4caf501a;color:#2e7d32;border:1px solid rgba(76,175,80,.2)}.subscription-alert button{margin-left:auto;background:none;border:none;cursor:pointer;padding:4px;color:inherit;opacity:.7}.subscription-alert button:hover{opacity:1}.current-subscription-card{background:linear-gradient(180deg,#f7fbff,#edf4fb);border:1px solid #d9e4f0;border-radius:24px;padding:24px;margin-bottom:32px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px}.current-sub-info{display:flex;flex-direction:column;gap:4px}.current-sub-label{font-size:12px;color:#6b7684;text-transform:uppercase;letter-spacing:1px}.current-sub-plan{font-size:24px;font-weight:700;color:#191f28}.current-sub-date{font-size:14px;color:#4e5968}.current-sub-card{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #dce6ef;padding:10px 16px;border-radius:12px;font-size:14px;color:#3c4757}.cancel-subscription-btn{background:#1f2a37;border:1px solid #1f2a37;color:#fff;padding:10px 20px;border-radius:12px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.cancel-subscription-btn:hover{background:#111827}.cancelled-notice{background:#fff8e6;padding:10px 16px;border:1px solid #f0e0aa;border-radius:12px;font-size:13px;color:#7d6217}.subscription-plans-shell{border:1px solid #e6edf5;border-radius:28px;background:#fff;box-shadow:0 18px 40px #0f172a0d;padding:28px;margin-bottom:48px}.subscription-plans-intro{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.subscription-plans-intro h2{margin:0 0 6px;font-size:28px;line-height:1.2;letter-spacing:-.04em;color:#191f28}.subscription-plans-intro p{margin:0;font-size:14px;color:#5b6573}.subscription-billing-pill{flex-shrink:0;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid #d8e5f4;background:#f6faff;color:#4d6fa3;font-size:13px;font-weight:600;display:inline-flex;align-items:center}.subscription-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:48px}.plan-card{background:#fff;border:1px solid #e6edf5;border-radius:24px;padding:24px 22px;display:flex;flex-direction:column;position:relative;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.plan-card:hover{transform:translateY(-4px);box-shadow:0 16px 28px #0f172a14}.plan-card.popular{border-color:#bfd1e8;box-shadow:0 18px 28px #3182f614}.plan-card.current{border-color:#aac4e6;background:#f8fbff}.plan-topline{min-height:28px;display:flex;align-items:center;margin-bottom:8px}.popular-badge,.plan-status-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:600}.popular-badge{background:#eef4ff;color:#3b6db5}.plan-status-badge{background:#edf7ef;color:#217346}.plan-header{text-align:left;margin-bottom:18px}.plan-icon{color:var(--primary-color);margin-bottom:14px}.plan-card.basic .plan-icon{color:#ff9800}.plan-card.standard .plan-icon{color:#9c27b0}.plan-card.premium .plan-icon{color:#f44336}.plan-name{font-size:22px;font-weight:700;color:var(--text-primary);margin:0 0 8px}.plan-storage{font-size:13px;color:#5b6573;background:#f5f8fb;padding:6px 12px;border-radius:999px;display:inline-flex}.plan-price{text-align:left;margin-bottom:24px;padding-bottom:24px;border-bottom:1px solid #edf2f7}.price-amount{font-size:34px;font-weight:700;color:var(--text-primary);letter-spacing:-.04em}.price-period{font-size:14px;color:var(--text-secondary);margin-left:4px}.plan-features{list-style:none;padding:0;margin:0 0 24px;flex:1}.plan-features li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:14px;color:var(--text-secondary)}.feature-check{color:#4caf50;flex-shrink:0;margin-top:2px}.plan-button{width:100%;padding:14px 24px;border:none;border-radius:14px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;background:#191f28;color:#fff}.plan-button:hover:not(:disabled){background:#121820;transform:translateY(-2px);box-shadow:0 12px 20px #0f172a29}.plan-button:disabled{opacity:.6;cursor:not-allowed}.plan-button.current{background:#edf7ef;color:#217346}.plan-card.free .plan-button:not(.current){background:#f2f4f6;color:#191f28}.plan-card.free .plan-button:not(.current):hover{background:#e6ebf0;box-shadow:none}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.card-modal{background:#fff;border-radius:20px;padding:40px;max-width:400px;width:90%;position:relative;box-shadow:0 20px 60px #0003}.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;cursor:pointer;color:var(--text-secondary);padding:4px}.modal-close:hover{color:var(--text-primary)}.modal-content{text-align:center}.modal-icon{color:var(--primary-color);margin-bottom:16px}.modal-content h2{font-size:24px;font-weight:700;color:var(--text-primary);margin:0 0 12px}.modal-content p{font-size:14px;color:var(--text-secondary);margin:0 0 8px}.modal-note{font-size:12px!important;color:var(--text-light)!important;margin-bottom:24px!important}.register-card-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px 24px;background:var(--primary-color);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s}.register-card-btn:hover{background:#0051d5;transform:translateY(-2px);box-shadow:0 8px 20px #007aff4d}.subscription-faq{background:#fff;border:1px solid #e6edf5;border-radius:24px;padding:32px;box-shadow:0 14px 28px #0f172a0a}.subscription-faq h2{font-size:24px;font-weight:700;color:var(--text-primary);margin:0 0 24px;text-align:center}.faq-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.faq-item{padding:20px;background:#f8fafc;border:1px solid #e9eef4;border-radius:16px}.faq-item h4{font-size:15px;font-weight:600;color:var(--text-primary);margin:0 0 8px}.faq-item p{font-size:14px;color:var(--text-secondary);margin:0;line-height:1.6}.subscription-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center}.subscription-loading .loading-spinner{width:48px;height:48px;border:4px solid rgba(0,0,0,.1);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:16px}.subscription-loading p{font-size:15px;color:var(--text-secondary)}@media(max-width:1024px){.subscription-plans-intro{flex-direction:column;align-items:flex-start}.subscription-plans{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.subscription-container{padding:20px 16px}.subscription-title{font-size:28px}.subscription-subtitle{font-size:14px}.subscription-plans{grid-template-columns:1fr;gap:16px}.subscription-plans-shell{padding:20px;border-radius:22px}.subscription-plans-intro h2{font-size:24px}.plan-card{padding:24px 20px}.plan-card:hover{transform:none}.current-subscription-card{flex-direction:column;align-items:stretch;text-align:center}.current-sub-card{justify-content:center}.cancel-subscription-btn{width:100%}.card-modal{padding:32px 24px;margin:16px}.subscription-faq{padding:24px 20px}.faq-list{grid-template-columns:1fr}}@media(max-width:480px){.subscription-title{font-size:24px}.price-amount{font-size:28px}.plan-name{font-size:18px}.subscription-faq h2{font-size:20px}}.upload-progress-popup{position:fixed;bottom:24px;right:24px;background:#fff;border-radius:16px;box-shadow:0 8px 32px #00000026;z-index:10000;border:1px solid rgba(0,0,0,.08);transition:all .3s cubic-bezier(.4,0,.2,1);cursor:pointer}.upload-progress-popup.compact{width:200px;animation:slideInCompact .3s ease-out}.upload-progress-popup.expanded{width:360px;animation:slideIn .3s ease-out;cursor:default}@keyframes slideInCompact{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideIn{0%{transform:translateY(100px);opacity:0}to{transform:translateY(0);opacity:1}}.upload-progress-compact{padding:12px 16px;display:flex;align-items:center;gap:12px}.upload-progress-popup.expanded .upload-progress-compact{display:none}.compact-progress-bar{flex:1;height:6px;background:#e0e0e0;border-radius:3px;overflow:hidden}.compact-progress-fill{height:100%;background:linear-gradient(90deg,#007aff,#5ac8fa);border-radius:3px;transition:width .3s ease-out}.compact-percentage{font-size:14px;font-weight:600;color:#007aff;min-width:42px;text-align:right}.upload-progress-expanded{display:none}.upload-progress-popup.expanded .upload-progress-expanded{display:block}.upload-progress-header{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid rgba(0,0,0,.08)}.upload-progress-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;color:#333}.upload-progress-title svg{color:#007aff}.upload-progress-controls{display:flex;gap:4px}.upload-progress-cancel-btn{height:32px;padding:0 12px;border-radius:10px;border:1px solid #e5e8eb;background:#f8fafb;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#4e5968;font-size:13px;font-weight:600;transition:all .2s}.upload-progress-cancel-btn:hover{background:#f1f4f6;border-color:#d8dde3;color:#2b3440}.upload-progress-body{padding:16px;display:flex;flex-direction:column;gap:12px}.upload-progress-file-count{font-size:14px;font-weight:600;color:#555;text-align:center}.upload-progress-bar-container{width:100%;height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden;position:relative}.upload-progress-bar{height:100%;background:linear-gradient(90deg,#007aff,#5ac8fa);border-radius:4px;transition:width .3s ease-out;position:relative;overflow:hidden}.upload-progress-bar:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.upload-progress-percentage{font-size:24px;font-weight:700;color:#007aff;text-align:center}.upload-progress-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.upload-progress-metric{padding:10px 12px;border-radius:12px;background:#f7f9fb;border:1px solid #eef1f4;display:flex;flex-direction:column;gap:4px}.metric-label{font-size:11px;color:#8b95a1;font-weight:600}.metric-value{font-size:14px;color:#191f28;font-weight:700}.upload-progress-transfer{font-size:12px;color:#6b7684;text-align:center}.upload-progress-status{font-size:13px;color:#666;display:flex;align-items:center;gap:6px;padding:8px 12px;background:#f5f5f7;border-radius:8px}.upload-progress-status.optimize{background:#fff3e0;color:#e65100}.upload-progress-status.ai{background:#e3f2fd;color:#1565c0}.status-dot{width:6px;height:6px;border-radius:50%;background:#4caf50;animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}@media(max-width:768px){.upload-progress-popup.compact{bottom:90px;right:12px;width:180px;border-radius:14px}.upload-progress-popup.expanded{bottom:90px;right:12px;left:12px;width:auto;max-width:calc(100vw - 24px);border-radius:14px}.upload-progress-header{padding:14px}.upload-progress-title{font-size:14px;gap:7px}.upload-progress-body{padding:14px;gap:10px}.upload-progress-file-count{font-size:13px}.upload-progress-percentage{font-size:22px}.upload-progress-status{font-size:12px;padding:7px 10px}}@media(max-width:480px){.upload-progress-popup.compact{bottom:85px;right:10px;width:160px;border-radius:12px}.upload-progress-popup.expanded{bottom:85px;right:10px;left:10px;width:auto;max-width:calc(100vw - 20px);border-radius:12px}.upload-progress-header{padding:12px}.upload-progress-title{font-size:13px;gap:6px}.upload-progress-title svg{width:18px;height:18px}.upload-progress-icon-btn{width:26px;height:26px}.upload-progress-body{padding:12px;gap:9px}.upload-progress-file-count{font-size:12px}.upload-progress-bar-container{height:7px}.upload-progress-percentage{font-size:20px}.upload-progress-status{font-size:11px;padding:6px 9px}}@media(max-width:768px)and (orientation:landscape){.upload-progress-popup.compact{bottom:80px;width:180px;right:12px}.upload-progress-popup.expanded{bottom:80px;max-width:300px;right:12px;left:auto}}:root{--glass-bg: rgba(255, 255, 255, .86);--glass-border: rgba(15, 23, 42, .08);--glass-shadow: 0 18px 38px rgba(15, 23, 42, .06);--glass-hover-shadow: 0 22px 44px rgba(15, 23, 42, .1);--primary-color: #3182f6;--secondary-color: #5ba1ff;--text-primary: #191f28;--text-secondary: #4e5968;--text-light: #8b95a1;--bg-primary: #ffffff;--bg-secondary: #f4f6f8;--divider: rgba(15, 23, 42, .06)}.dashboard-container{min-height:100vh;width:100%;background:radial-gradient(circle at top left,rgba(49,130,246,.08),transparent 28%),radial-gradient(circle at bottom right,rgba(49,130,246,.05),transparent 24%),linear-gradient(180deg,#f7f9fb,#eef3f8);display:flex;flex-direction:column;overflow-x:hidden;box-sizing:border-box}.dashboard-main{flex:1;display:flex;gap:24px;padding:28px 32px 36px;max-width:1440px;margin:0 auto;width:100%;box-sizing:border-box}.dashboard-wrapper{flex:1;min-width:0;width:100%}.sidebar-nav{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(15,23,42,.06);border-radius:26px;padding:16px 12px 12px;box-shadow:var(--glass-shadow);width:234px;flex-shrink:0;display:flex;flex-direction:column;gap:4px;position:sticky;top:28px;height:fit-content}.sidebar-user-summary{padding:2px 10px 14px;margin-bottom:6px}.sidebar-user-name{font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.03em;color:var(--text-primary)}.sidebar-user-email{margin-top:4px;font-size:12px;line-height:1.4;color:var(--text-light);word-break:break-all}.nav-item{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;background:transparent;border:none;border-radius:16px;cursor:pointer;transition:all .2s ease;font-size:14px;font-weight:600;color:var(--text-secondary);text-align:left;width:100%;position:relative;outline:none}.nav-item:hover{background:#f2f4f6;color:var(--text-primary)}.nav-item.active{background:#e8f3ff;color:var(--primary-color);font-weight:600;box-shadow:none}.nav-icon{font-size:20px;min-width:20px;text-align:center;transition:transform .2s}.nav-label{flex:1;font-size:14px;letter-spacing:-.02em}.nav-divider{height:1px;background:var(--divider);margin:8px 0}.nav-item.subscription-btn{background:linear-gradient(135deg,#ffc1071a,#ff98001a);border:1px solid rgba(255,152,0,.2)}.nav-item.subscription-btn .nav-icon{color:#ff9800}.nav-item.subscription-btn:hover{background:linear-gradient(135deg,#ffc10733,#ff980033);border-color:#ff980066}.nav-item.subscription-btn.active{background:linear-gradient(135deg,#ffc10733,#ff980033);border-color:#ff9800;color:#ff9800}.nav-item.subscription-btn.active .nav-icon{color:#ff9800}.nav-item.logout-btn{margin-top:12px;color:#888}.nav-item.logout-btn:hover{background:#e5393514;color:#e53935}.nav-item.logout-btn:hover .nav-icon{color:#e53935}.storage-info{padding:14px;background:#f8fafc;border-radius:18px;border:1px solid var(--divider);margin-top:8px}.storage-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.storage-header svg{color:var(--text-secondary)}.storage-label{font-size:12px;font-weight:600;color:var(--text-primary);letter-spacing:-.2px}.storage-bar{width:100%;height:6px;background:#0000000f;border-radius:3px;overflow:hidden;margin-bottom:8px}.storage-bar-fill{height:100%;background:var(--primary-color);transition:width .3s ease;border-radius:3px}.storage-text{font-size:11px;color:var(--text-secondary);text-align:center}.dashboard-content{width:100%;min-height:60vh;box-sizing:border-box}.upload-section,.filelist-section{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(15,23,42,.06);border-radius:26px;box-shadow:var(--glass-shadow);overflow:hidden;width:100%}.upload-section.full-width{width:100%}.content-placeholder{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(15,23,42,.06);border-radius:26px;padding:60px 20px;text-align:center;box-shadow:var(--glass-shadow);color:var(--text-secondary)}.content-placeholder h2{font-size:24px;font-weight:600;color:var(--text-primary);margin-bottom:8px;letter-spacing:-.5px}.content-placeholder p{font-size:14px;color:var(--text-secondary)}.portfolio-section-modern{padding:32px;background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(15,23,42,.06);border-radius:26px;box-shadow:var(--glass-shadow);max-width:100%;width:100%;box-sizing:border-box}.portfolio-header-modern{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:28px;flex-wrap:wrap;gap:16px}.portfolio-section-title{font-size:32px;font-weight:700;color:var(--text-primary);margin:0 0 6px;letter-spacing:-.04em}.portfolio-section-subtitle{font-size:15px;color:var(--text-secondary);margin:0;font-weight:400}.portfolio-create-btn-header{padding:10px 20px;background:var(--primary-color);color:#fff;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #007aff33}.portfolio-create-btn-header:hover{background:#0051d5;transform:translateY(-1px);box-shadow:0 4px 12px #007aff4d}.portfolio-create-btn-header:active{transform:translateY(0)}.portfolio-grid-modern{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;width:100%}.portfolio-card-modern{background:var(--glass-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border:1px solid var(--glass-border);border-radius:14px;overflow:hidden;box-shadow:var(--glass-shadow);transition:all .3s ease;cursor:pointer}.portfolio-card-modern:hover{transform:translateY(-4px);box-shadow:var(--glass-hover-shadow);border-color:#0000001f}.portfolio-card-image{position:relative;width:100%;padding-bottom:66.67%;background:#00000008;overflow:hidden}.portfolio-cover-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}.portfolio-card-modern:hover .portfolio-cover-image{transform:scale(1.05)}.portfolio-card-loading{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#fff6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.loading-spinner-small{width:32px;height:32px;border:3px solid rgba(0,0,0,.1);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.portfolio-card-placeholder-modern{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;opacity:.9}.portfolio-card-overlay{position:absolute;inset:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;gap:12px;opacity:0;transition:opacity .25s}.portfolio-card-modern:hover .portfolio-card-overlay{opacity:1}.portfolio-action-btn{width:44px;height:44px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.portfolio-view-btn-modern{background:#fffffff2;color:var(--primary-color)}.portfolio-view-btn-modern:hover{background:#fff;transform:scale(1.1);box-shadow:0 4px 12px #00000026}.portfolio-edit-btn-modern{background:#fffffff2;color:#ff9500}.portfolio-edit-btn-modern:hover{background:#fff;transform:scale(1.1);box-shadow:0 4px 12px #00000026}.portfolio-delete-btn-modern{background:#ff3b30f2;color:#fff}.portfolio-delete-btn-modern:hover{background:#ff3b30;transform:scale(1.1);box-shadow:0 4px 12px #ff3b304d}.portfolio-card-content{padding:20px;background:#ffffff80;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.portfolio-card-name{font-size:18px;font-weight:600;color:var(--text-primary);margin:0 0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.3px}.portfolio-card-meta{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.portfolio-meta-item{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary)}.portfolio-folder-badge{padding:3px 10px;background:#007aff1a;border-radius:6px;font-size:12px;font-weight:500;color:var(--primary-color)}.portfolio-component-count{font-size:13px;color:var(--text-secondary)}.portfolio-card-footer{display:flex;align-items:center;justify-content:space-between;padding-top:10px;border-top:1px solid var(--divider)}.portfolio-date{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-light)}.portfolio-empty-modern{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center}.portfolio-empty-modern svg{color:var(--text-light);opacity:.5;margin-bottom:20px}.portfolio-empty-modern h3{font-size:24px;font-weight:600;color:var(--text-primary);margin:0 0 8px;letter-spacing:-.5px}.portfolio-empty-modern p{font-size:15px;color:var(--text-secondary);margin:0 0 28px}.portfolio-create-btn-cta{padding:14px 32px;background:var(--primary-color);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #007aff40}.portfolio-create-btn-cta:hover{background:#0051d5;transform:translateY(-2px);box-shadow:0 6px 16px #007aff59}.portfolio-create-btn-cta:active{transform:translateY(0)}.portfolio-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px}.loading-spinner{width:48px;height:48px;border:4px solid rgba(0,0,0,.1);border-top-color:var(--primary-color);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:20px}.portfolio-loading p{font-size:15px;color:var(--text-secondary)}@media(max-width:1024px){.dashboard-main{padding:20px 24px;gap:16px}.sidebar-nav{width:220px}.portfolio-section-modern{padding:28px 24px}.portfolio-grid-modern{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}.portfolio-section-title{font-size:28px}}@media(max-width:768px){.dashboard-header{display:none}.dashboard-main{flex-direction:column;padding:12px 12px 85px;gap:12px;max-width:100%;width:100%;box-sizing:border-box}.sidebar-nav{width:100%!important;max-width:100%;padding:8px 4px;flex-direction:row;gap:3px;position:fixed!important;bottom:0!important;top:auto!important;left:0;right:0;border-radius:0;border:none;border-top:1px solid var(--glass-border);z-index:1000;background:#fffffff2;backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 -2px 10px #00000014}.nav-item{flex-direction:column;padding:8px 2px;gap:3px;font-size:10px;border-radius:8px;flex:1;min-width:0}.nav-item:hover{background:#0000000a}.nav-icon{font-size:20px;margin:0}.nav-label{font-size:9px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;font-weight:500;line-height:1.2}.nav-divider,.storage-info{display:none}.portfolio-section-modern{padding:16px 12px;border-radius:12px;width:100%;box-sizing:border-box}.portfolio-header-modern{flex-direction:column;gap:12px;margin-bottom:16px}.portfolio-section-title{font-size:22px;margin:0 0 4px;letter-spacing:-.8px}.portfolio-section-subtitle{font-size:13px}.portfolio-create-btn-header{width:100%;justify-content:center;padding:10px 16px;font-size:13px}.portfolio-grid-modern{grid-template-columns:1fr;gap:12px;width:100%}.portfolio-card-modern{border-radius:12px;width:100%}.portfolio-card-content{padding:14px}.portfolio-card-name{font-size:16px;margin:0 0 8px;letter-spacing:-.3px}.portfolio-card-meta{gap:5px;margin-bottom:12px}.portfolio-meta-item{font-size:12px;gap:5px}.portfolio-folder-badge{font-size:11px;padding:3px 8px}.portfolio-component-count{font-size:12px}.portfolio-card-footer{padding-top:8px}.portfolio-date{font-size:11px;gap:5px}.portfolio-card-overlay{background:#00000080;opacity:0}.portfolio-card-modern:active .portfolio-card-overlay{opacity:1}.portfolio-action-btn{width:38px;height:38px}.portfolio-action-btn svg{width:18px;height:18px}.portfolio-empty-modern{padding:50px 16px}.portfolio-empty-modern svg{width:100px;height:100px;margin-bottom:16px}.portfolio-empty-modern h3{font-size:20px;margin:0 0 6px}.portfolio-empty-modern p{font-size:13px;margin:0 0 24px}.portfolio-create-btn-cta{width:100%;max-width:280px;padding:12px 28px;font-size:15px}.content-placeholder{padding:36px 16px;border-radius:12px}.content-placeholder h2{font-size:18px;margin-bottom:6px}.content-placeholder p{font-size:13px}.dashboard-content,.dashboard-wrapper{width:100%;box-sizing:border-box}.upload-section,.filelist-section{border-radius:12px}}@media(max-width:480px){.dashboard-main{padding:10px 10px 80px;gap:10px}.sidebar-nav{padding:6px 2px;gap:2px}.nav-item{padding:6px 1px;font-size:9px;gap:2px}.nav-icon{font-size:18px}.nav-label{font-size:8px;line-height:1.1}.portfolio-section-modern{padding:14px 10px;border-radius:10px}.portfolio-header-modern{gap:10px;margin-bottom:14px}.portfolio-section-title{font-size:20px;margin:0 0 3px;letter-spacing:-.7px}.portfolio-section-subtitle{font-size:12px}.portfolio-create-btn-header{padding:9px 14px;font-size:12px}.portfolio-grid-modern{gap:10px}.portfolio-card-content{padding:12px}.portfolio-card-name{font-size:15px;margin:0 0 7px;letter-spacing:-.2px}.portfolio-card-meta{gap:4px;margin-bottom:10px}.portfolio-meta-item{font-size:11px;gap:4px}.portfolio-folder-badge{font-size:10px;padding:2px 7px}.portfolio-component-count{font-size:11px}.portfolio-card-footer{padding-top:7px}.portfolio-date{font-size:10px;gap:4px}.portfolio-action-btn{width:36px;height:36px}.portfolio-action-btn svg{width:16px;height:16px}.portfolio-empty-modern{padding:36px 12px}.portfolio-empty-modern svg{width:80px;height:80px;margin-bottom:14px}.portfolio-empty-modern h3{font-size:18px;margin:0 0 5px}.portfolio-empty-modern p{font-size:12px;margin:0 0 20px}.portfolio-create-btn-cta{max-width:260px;padding:11px 24px;font-size:14px}.content-placeholder{padding:32px 14px}.content-placeholder h2{font-size:17px}.content-placeholder p{font-size:12px}.upload-section,.filelist-section{border-radius:10px}}@media(max-width:768px)and (orientation:landscape){.dashboard-main{padding-bottom:80px}.sidebar-nav{padding:6px 4px}.nav-item{padding:6px 4px;font-size:10px}.nav-icon{font-size:18px}.nav-label{font-size:9px}}.profile-section{background:#fff;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid rgba(15,23,42,.06);border-radius:26px;box-shadow:var(--glass-shadow);padding:32px;max-width:none;margin:0;width:100%}.profile-header{display:flex;align-items:center;gap:24px;margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid var(--divider)}.profile-avatar{width:100px;height:100px;border-radius:50%;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 24px #007aff40;flex-shrink:0}.profile-header-info{flex:1}.profile-name{font-size:30px;font-weight:700;color:var(--text-primary);margin:0 0 4px;letter-spacing:-.04em;line-height:1.22}.profile-email{font-size:15px;color:var(--text-secondary);margin:0;line-height:1.45}.profile-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}.profile-card{background:#fbfcfd;border:1px solid rgba(15,23,42,.05);border-radius:22px;overflow:hidden;transition:all .2s ease}.profile-card:hover{box-shadow:0 4px 16px #00000014;transform:translateY(-2px)}.profile-card-header{display:flex;align-items:center;gap:10px;padding:18px 22px;background:#f7f9fb;border-bottom:1px solid var(--divider)}.profile-card-header svg{color:var(--primary-color)}.profile-card-header h3{font-size:16px;font-weight:600;color:var(--text-primary);margin:0;letter-spacing:-.3px}.profile-card-content{padding:18px 22px}.profile-info-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 0;border-bottom:1px solid var(--divider)}.profile-info-row:last-child{border-bottom:none}.profile-info-label{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-secondary);line-height:1.45}.profile-info-label svg{color:var(--text-light)}.profile-info-value{font-size:14px;font-weight:600;color:var(--text-primary);text-align:right;line-height:1.45}@media(max-width:900px){.dashboard-main{padding:20px;gap:18px}}.profile-info-mono{font-family:SF Mono,Monaco,Consolas,monospace;font-size:13px;background:#0000000a;padding:4px 8px;border-radius:4px;color:var(--text-secondary)}.profile-storage-visual{padding:8px 0}.profile-storage-bar{width:100%;height:12px;background:#0000000f;border-radius:6px;overflow:hidden;margin-bottom:12px}.profile-storage-fill{height:100%;border-radius:6px;transition:width .5s ease}.profile-storage-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.profile-storage-used{font-size:14px;font-weight:600;color:var(--text-primary)}.profile-storage-limit{font-size:13px;color:var(--text-secondary)}.profile-storage-percent{font-size:13px;color:var(--text-secondary);text-align:center}.profile-actions{margin-top:16px;padding-top:16px;border-top:1px solid var(--divider)}.profile-action-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 20px;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.profile-logout-btn{background:#ff3b301a;color:#ff3b30}.profile-logout-btn:hover{background:#ff3b30;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #ff3b3040}@media(max-width:768px){.profile-section{padding:20px 16px;border-radius:12px;max-width:100%}.profile-header{flex-direction:column;text-align:center;gap:16px;margin-bottom:24px;padding-bottom:20px}.profile-avatar{width:80px;height:80px}.profile-avatar svg{width:36px;height:36px}.profile-name{font-size:22px;margin-bottom:4px}.profile-email{font-size:14px}.profile-cards{grid-template-columns:1fr;gap:16px}.profile-card{border-radius:10px}.profile-card-header{padding:14px 16px}.profile-card-header h3{font-size:15px}.profile-card-content{padding:14px 16px}.profile-info-row{padding:10px 0}.profile-info-label{font-size:13px;gap:8px}.profile-info-value{font-size:13px}.profile-storage-bar{height:10px}.profile-storage-used{font-size:13px}.profile-storage-limit,.profile-storage-percent{font-size:12px}.profile-action-btn{padding:11px 16px;font-size:13px}}@media(max-width:480px){.profile-section{padding:16px 14px;border-radius:10px}.profile-header{gap:14px;margin-bottom:20px;padding-bottom:16px}.profile-avatar{width:70px;height:70px}.profile-avatar svg{width:32px;height:32px}.profile-name{font-size:20px}.profile-email{font-size:13px}.profile-cards{gap:14px}.profile-card-header{padding:12px 14px}.profile-card-header svg{width:18px;height:18px}.profile-card-header h3{font-size:14px}.profile-card-content{padding:12px 14px}.profile-info-row{padding:9px 0}.profile-info-label{font-size:12px;gap:6px}.profile-info-label svg{width:14px;height:14px}.profile-info-value{font-size:12px}.profile-info-mono{font-size:11px;padding:3px 6px}.profile-storage-bar{height:8px;margin-bottom:10px}.profile-storage-used{font-size:12px}.profile-storage-limit,.profile-storage-percent{font-size:11px}.profile-actions{margin-top:14px;padding-top:14px}.profile-action-btn{padding:10px 14px;font-size:12px;border-radius:8px}}.privacy-container{min-height:100vh;background:#f8f9fa;padding:40px 16px 80px}.privacy-card{max-width:800px;margin:0 auto;background:#fff;border-radius:12px;border:1px solid #e5e7eb;padding:48px}.privacy-title{font-size:24px;font-weight:700;color:#111827;margin:0 0 8px}.privacy-updated{font-size:13px;color:#6b7280;margin:0 0 24px}.privacy-intro{font-size:14px;color:#374151;line-height:1.7;margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid #f3f4f6}.privacy-section{margin-bottom:32px}.privacy-section-title{font-size:16px;font-weight:700;color:#111827;margin:0 0 12px}.privacy-section p,.privacy-section li{font-size:14px;color:#374151;line-height:1.7}.privacy-section ul{margin:8px 0;padding-left:20px}.privacy-section li{margin-bottom:4px}.privacy-note{margin-top:12px;padding:10px 14px;background:#fffbeb;border-left:3px solid #f59e0b;border-radius:4px;font-size:13px;color:#92400e}.privacy-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:13px}.privacy-table th,.privacy-table td{padding:10px 12px;border:1px solid #e5e7eb;text-align:left;color:#374151;line-height:1.5;word-break:keep-all}.privacy-table th{background:#f9fafb;font-weight:600;color:#111827}.privacy-table tr:nth-child(2n) td{background:#fafafa}.privacy-section a{color:#3b82f6;text-decoration:none}.privacy-section a:hover{text-decoration:underline}@media(max-width:640px){.privacy-card{padding:24px 20px}.privacy-table{display:block;overflow-x:auto}}:root{--color-primary: #4fc3f7;--color-primary-light: #81d4fa;--color-primary-dark: #29b6f6;--color-bg: #f5f7fa;--color-white: #ffffff;--color-text: #333;--color-text-light: #666;--color-text-lighter: #999;--color-border: #e8eef5;--color-error: #d32f2f;--color-error-bg: #ffebee;--color-success: #4caf50;--spacing-xs: 8px;--spacing-sm: 12px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--spacing-2xl: 40px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--shadow-sm: 0 1px 3px rgba(0, 0, 0, .05);--shadow-md: 0 2px 8px rgba(0, 0, 0, .08);--shadow-lg: 0 4px 12px rgba(79, 195, 247, .15)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}body{font-family:Pretendard,Inter,Noto Sans KR,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;background:var(--color-bg);min-height:100vh;color:var(--color-text)}#root{width:100%;padding:0;margin:0}.landing-page{min-height:100vh;background:radial-gradient(circle at 15% 20%,rgba(49,130,246,.08),transparent 24%),radial-gradient(circle at 82% 78%,rgba(49,130,246,.06),transparent 22%),linear-gradient(180deg,#f7f9fb,#eef3f8);padding:28px 24px 48px}.landing-shell{width:100%;max-width:1200px;margin:0 auto;min-height:calc(100vh - 56px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.landing-topline{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px;color:#6b7684;font-size:14px;font-weight:600}.landing-logo-dot{width:10px;height:10px;border-radius:50%;background:#3182f6;box-shadow:0 0 0 8px #3182f61a}.landing-copy{max-width:860px}.landing-eyebrow{display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;background:#3182f61a;color:#3182f6;font-size:13px;font-weight:700;margin-bottom:22px}.landing-title{font-size:clamp(42px,6vw,76px);line-height:1.08;letter-spacing:-.04em;margin-bottom:22px;color:#191f28}.landing-title-line{display:block}.landing-title-line-tight{white-space:nowrap}.landing-description{max-width:680px;margin:0 auto;font-size:21px;line-height:1.52;color:#6b7684;word-break:keep-all;letter-spacing:-.02em}.landing-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:34px}.landing-primary-btn,.landing-secondary-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;border-radius:18px;text-decoration:none;font-weight:700;font-size:16px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease}.landing-primary-btn{background:#3182f6;color:#fff;box-shadow:0 10px 24px #3182f642}.landing-secondary-btn{background:#fff;color:#4e5968;border:1px solid #dfe5ec}.landing-primary-btn:hover,.landing-secondary-btn:hover{transform:translateY(-2px)}.landing-product-board{width:100%;max-width:1080px;margin-top:52px}.landing-board-window{background:#ffffffe0;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.82);border-radius:36px;box-shadow:0 30px 80px #0f172a14;padding:18px}.landing-window-header{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 18px}.landing-window-dots{display:flex;gap:8px}.landing-window-dots span{width:10px;height:10px;border-radius:50%;background:#d6dbe2}.landing-window-pill{padding:8px 14px;background:#f2f4f6;border-radius:999px;color:#8b95a1;font-size:12px;font-weight:700;text-transform:lowercase}.landing-board-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.landing-metric-card,.landing-flow-card{background:#ffffffeb;border-radius:28px;border:1px solid #edf1f5;text-align:left}.landing-metric-card{min-height:220px;padding:24px;display:flex;flex-direction:column;justify-content:space-between}.landing-metric-card-accent{background:linear-gradient(180deg,#fff,#f4f8ff)}.landing-card-label{display:inline-flex;width:fit-content;padding:6px 12px;border-radius:999px;background:#f2f4f6;color:#6b7684;font-size:12px;font-weight:700;margin-bottom:22px}.landing-metric-card strong{display:block;font-size:30px;line-height:1.2;letter-spacing:-.03em;color:#191f28}.landing-metric-card p,.landing-flow-card p{margin-top:14px;font-size:15px;line-height:1.65;color:#6b7684}.landing-flow-card{grid-column:1 / -1;padding:0;background:transparent;border:none}.landing-flow-line{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.landing-flow-step{position:relative;border-radius:26px;min-height:220px;overflow:hidden;background-color:#dbe5f0;background-size:cover;background-position:center}.landing-flow-step:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0f172a14,#0f172a6b)}.landing-flow-upload{background-image:url(https://images.unsplash.com/photo-1497366811353-6870744d04b2?auto=format&fit=crop&w=1200&q=80)}.landing-flow-select{background-image:url(https://images.unsplash.com/photo-1497215728101-856f4ea42174?auto=format&fit=crop&w=1200&q=80)}.landing-flow-finish{background-image:url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=1200&q=80)}.dashboard-content{width:100%;padding:0 20px}.upload-section{background:transparent;border-radius:0;box-shadow:none;border:none}.filelist-section{margin:0}@media(min-width:768px){.dashboard-content{grid-template-columns:2.5fr 7.5fr}.upload-section{grid-column:1}.filelist-section{grid-column:2}}@media(min-width:1200px){.dashboard-content{gap:var(--spacing-xl);padding:0 var(--spacing-xl)}}@media(max-width:768px){.landing-page{padding:20px 16px 32px}.landing-shell{min-height:auto}.landing-title{font-size:40px}.landing-description{font-size:18px}.landing-product-board{margin-top:36px}.landing-board-window{border-radius:28px;padding:14px}.landing-board-grid,.landing-flow-line{grid-template-columns:1fr}.dashboard-content{gap:var(--spacing-md);padding:0 var(--spacing-md)}.upload-section>div{padding:20px!important}}@media(max-width:480px){.landing-title{font-size:34px}.landing-description{font-size:16px}.landing-title-line-tight{white-space:normal}.landing-actions{flex-direction:column}.landing-primary-btn,.landing-secondary-btn{width:100%}.dashboard-content{padding:0 var(--spacing-sm)}.upload-section>div{padding:var(--spacing-md)!important}}