:root{--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 2rem;--white: #ffffff;--black: #0a0a0a;--gray-50: #fafafa;--gray-100: #f5f5f5;--gray-200: #e5e5e5;--gray-300: #d4d4d4;--gray-400: #a3a3a3;--gray-500: #737373;--gray-600: #525252;--gray-700: #404040;--gray-800: #262626;--gray-900: #171717;--red-500: #ef4444;--red-600: #dc2626;--green-500: #22c55e;--amber-500: #f59e0b;--blue-500: #3b82f6;--color-bg: var(--white);--color-bg-subtle: var(--gray-50);--color-bg-muted: var(--gray-100);--color-text: var(--gray-900);--color-text-secondary: var(--gray-600);--color-text-muted: var(--gray-400);--color-border: var(--gray-200);--color-border-subtle: var(--gray-100);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-2xl: 1.5rem;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);--duration-fast: .15s;--duration-base: .2s;--duration-slow: .3s;--ease-out: cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;font-feature-settings:"cv02","cv03","cv04","cv11"}body{font-family:var(--font-sans);font-size:var(--font-size-md);line-height:1.5;color:var(--color-text);background:var(--gray-50);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.reduce-motion *{animation-duration:.01ms!important;transition-duration:.01ms!important}#app{max-width:500px;margin:0 auto;min-height:100vh;background:var(--color-bg);box-shadow:var(--shadow-lg);position:relative;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);background:var(--color-bg);border-bottom:1px solid var(--color-border-subtle);position:sticky;top:0;z-index:100;animation:fadeInDown .5s ease-out}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.logo{display:flex;align-items:center;gap:var(--space-3)}.logo-icon{width:44px;height:44px;background:linear-gradient(135deg,var(--gray-800),var(--black));border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--white);position:relative;overflow:hidden;box-shadow:0 4px 12px #00000026;transition:transform .3s ease,box-shadow .3s ease}.logo-icon:hover{transform:scale(1.05);box-shadow:0 6px 20px #0003}.logo-svg{position:relative;z-index:2}.lock-shackle{animation:lockPulse 3s ease-in-out infinite;transform-origin:center bottom}@keyframes lockPulse{0%,to{transform:translateY(0)}50%{transform:translateY(-1px)}}.logo-pulse{position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.2) 0%,transparent 70%);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:.6;transform:scale(1.2)}}.logo-text{display:flex;flex-direction:column;justify-content:center}.logo-text h1{font-size:var(--font-size-lg);font-weight:700;letter-spacing:-.02em;margin:0;line-height:1.1;background:linear-gradient(135deg,var(--gray-800),var(--gray-600));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.logo-tagline{font-size:10px;color:var(--color-text-secondary);font-weight:600;letter-spacing:.02em;padding-left:2px;opacity:.8}.header-actions{display:flex;gap:var(--space-3);align-items:flex-start}.header-btn-wrapper{display:flex;flex-direction:column;align-items:center;gap:3px}.btn-label{font-size:9px;color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em;opacity:.7;transition:opacity .2s ease}.header-btn-wrapper:hover .btn-label{opacity:1}.btn-icon{width:40px;height:40px;border-radius:var(--radius-md);border:1px solid var(--color-border);background:var(--color-bg);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--color-text-secondary);transition:all .2s ease;position:relative;overflow:hidden}.btn-icon:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,var(--gray-200) 0%,transparent 70%);opacity:0;transform:scale(0);transition:all .3s ease}.btn-icon:hover{background:var(--color-bg-muted);color:var(--color-text);border-color:var(--gray-300);transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.btn-icon:hover:after{opacity:.5;transform:scale(2)}.btn-icon:active{transform:translateY(0) scale(.95)}.btn-icon svg{width:20px;height:20px;position:relative;z-index:1}.settings-icon{transition:transform .4s ease}.btn-icon:hover .settings-icon{transform:rotate(45deg)}.toolbar{display:flex;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border-subtle);background:var(--color-bg);animation:fadeInDown .4s ease-out .1s both}.search-box{flex:1;position:relative}.search-box input,.search-input{width:100%;height:44px;padding:0 var(--space-4);padding-left:var(--space-10);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--font-size-sm);background:var(--color-bg-subtle);transition:all .2s ease}.search-box input:focus,.search-input:focus{outline:none;border-color:var(--gray-400);background:var(--color-bg);box-shadow:0 0 0 3px #0000000d}.search-box:before{content:"🔍";position:absolute;left:var(--space-3);top:50%;transform:translateY(-50%);font-size:var(--font-size-sm)}.sort-select{height:44px;padding:0 var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);font-size:var(--font-size-sm);background:var(--color-bg);cursor:pointer;min-width:140px;transition:all .2s ease}.sort-select:hover{border-color:var(--gray-300)}.sort-select:focus{outline:none;border-color:var(--gray-400);box-shadow:0 0 0 3px #0000000d}.stats-dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border-subtle);background:var(--color-bg-subtle)}.stat-card{text-align:center;padding:var(--space-3) var(--space-2);background:var(--color-bg);border-radius:var(--radius-md);border:1px solid var(--color-border-subtle);transition:all .3s ease;animation:fadeInUp .5s ease-out both;cursor:default}.stat-card:nth-child(1){animation-delay:.1s}.stat-card:nth-child(2){animation-delay:.15s}.stat-card:nth-child(3){animation-delay:.2s}.stat-card:nth-child(4){animation-delay:.25s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000000f;border-color:var(--gray-300)}.stat-card .stat-value{font-size:var(--font-size-xl);font-weight:700;color:var(--color-text);line-height:1.2;transition:transform .2s ease}.stat-card:hover .stat-value{transform:scale(1.05)}.stat-card .stat-label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}.storage-bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border-bottom:1px solid var(--color-border-subtle);background:var(--color-bg);font-size:var(--font-size-xs);color:var(--color-text-secondary);animation:fadeInUp .5s ease-out .3s both}.storage-progress{flex:1;height:6px;background:var(--color-bg-muted);border-radius:var(--radius-full);overflow:hidden}.storage-fill{height:100%;background:linear-gradient(90deg,var(--gray-600),var(--black));border-radius:var(--radius-full);transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.storage-fill:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.export-btn{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3)!important}.export-btn svg{transition:transform .2s ease}.export-btn:hover svg{transform:translateY(2px)}.security-banner{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-5);background:linear-gradient(135deg,var(--gray-50),var(--gray-100));border-bottom:1px solid var(--color-border-subtle);animation:fadeInDown .4s ease-out .15s both}.security-status{display:flex;align-items:center;gap:var(--space-2)}.security-icon{width:32px;height:32px;background:linear-gradient(135deg,var(--green-500),#16a34a);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:#fff;animation:securityPulse 2s ease-in-out infinite}@keyframes securityPulse{0%,to{box-shadow:0 0 #22c55e66}50%{box-shadow:0 0 0 8px #22c55e00}}.security-status span{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text)}.security-badge{padding:var(--space-1) var(--space-3);background:#22c55e1a;color:var(--green-500);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-full);border:1px solid rgba(34,197,94,.3)}.stat-icon{font-size:20px;margin-bottom:var(--space-1);animation:iconBounce .5s ease-out both}.stat-card:nth-child(1) .stat-icon{animation-delay:.1s}.stat-card:nth-child(2) .stat-icon{animation-delay:.15s}.stat-card:nth-child(3) .stat-icon{animation-delay:.2s}.stat-card:nth-child(4) .stat-icon{animation-delay:.25s}@keyframes iconBounce{0%{transform:scale(0)}50%{transform:scale(1.2)}to{transform:scale(1)}}.quick-tips{padding:var(--space-4) var(--space-5);background:var(--color-bg);border-bottom:1px solid var(--color-border-subtle);animation:fadeIn .5s ease-out}.quick-tips.hidden{display:none}.quick-tips h4{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);margin-bottom:var(--space-3)}.tips-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2)}.tip-card{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3);background:var(--color-bg-subtle);border-radius:var(--radius-md);border:1px solid var(--color-border-subtle);transition:all .2s ease;cursor:pointer}.tip-card:hover{background:var(--color-bg-muted);transform:translateY(-1px);box-shadow:0 2px 8px #0000000d}.tip-icon{font-size:18px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--color-bg);border-radius:var(--radius-sm)}.tip-card span{font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-secondary)}.recent-section{padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border-subtle)}.recent-section.hidden{display:none}.recent-section h4{font-size:var(--font-size-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-3)}.recent-scroll{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2);scrollbar-width:none}.recent-scroll::-webkit-scrollbar{display:none}.recent-item{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-bg-subtle);border:1px solid var(--color-border);border-radius:var(--radius-md);flex-shrink:0;cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.recent-item:hover{background:var(--color-bg-muted)}.recent-item span{font-size:var(--font-size-xs);max-width:100px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bulk-actions{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-5);background:var(--gray-900);color:var(--white);font-size:var(--font-size-sm)}.bulk-actions.hidden{display:none}.bulk-actions button{background:transparent;border:1px solid rgba(255,255,255,.3);color:var(--white);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--font-size-xs);cursor:pointer;margin-left:var(--space-2)}.bulk-actions button:hover{background:#ffffff1a}.file-grid{flex:1;padding:var(--space-4) var(--space-5);padding-bottom:100px;display:flex;flex-direction:column;gap:var(--space-3);overflow-y:auto}.bottom-add-btn{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:1000;background:linear-gradient(135deg,var(--gray-900),var(--black));color:var(--white);border:none;border-radius:var(--radius-full);padding:var(--space-3) var(--space-6);cursor:pointer;box-shadow:0 8px 24px #0000004d,0 4px 8px #0003;transition:all .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.bottom-add-btn:hover{transform:translate(-50%) translateY(-3px);box-shadow:0 12px 32px #00000059,0 6px 12px #00000040}.bottom-add-btn:active{transform:translate(-50%) translateY(-1px)}.bottom-add-btn-content{display:flex;align-items:center;gap:var(--space-2);position:relative;z-index:2}.bottom-add-btn-content svg{width:20px;height:20px}.bottom-add-btn-content span{font-size:var(--font-size-sm);font-weight:600;letter-spacing:.02em}.bottom-add-btn .btn-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);animation:btnShine 3s ease-in-out infinite}.empty-state{text-align:center;padding:var(--space-12) var(--space-6);color:var(--color-text-muted);animation:fadeIn .5s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.empty-state .empty-icon{font-size:64px;margin-bottom:var(--space-4);opacity:.5;animation:floatSoft 3s ease-in-out infinite}@keyframes floatSoft{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.empty-state h3{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:var(--space-2)}.empty-state p{font-size:var(--font-size-sm)}.empty-state small{display:block;margin-top:var(--space-2);opacity:.7}.file-card{display:flex;align-items:flex-start;gap:var(--space-2);padding:var(--space-3);background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);position:relative;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);animation:cardSlideIn .35s cubic-bezier(.16,1,.3,1) both;overflow:hidden}.file-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gray-300),var(--gray-500),var(--gray-300));opacity:0;transition:opacity .3s ease}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.file-card:hover{border-color:var(--gray-300);box-shadow:0 4px 12px #00000014;transform:translateY(-2px)}.file-card:hover:before{opacity:1}.file-card:active{transform:translateY(0);box-shadow:0 2px 6px #0000000f}.file-card .select-checkbox{width:16px;height:16px;accent-color:var(--black);cursor:pointer;flex-shrink:0;border-radius:var(--radius-sm);transition:transform .2s ease;margin-top:2px}.file-card .select-checkbox:hover{transform:scale(1.1)}.file-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--color-bg-subtle),var(--color-bg-muted));border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;color:var(--color-text-secondary);flex-shrink:0;border:1px solid var(--color-border-subtle);transition:all .3s ease}.file-icon svg{width:18px;height:18px}.file-card:hover .file-icon{transform:scale(1.02);box-shadow:0 2px 8px #0000000f}.file-info{flex:1;min-width:0;padding-right:var(--space-6)}.file-info h3{font-size:var(--font-size-sm);font-weight:600;margin-bottom:var(--space-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:var(--space-2)}.file-meta{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-bottom:var(--space-2)}.file-meta span{font-size:var(--font-size-xs);color:var(--color-text-muted)}.badge{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;border-radius:var(--radius-sm);background:var(--color-bg-muted);color:var(--color-text-secondary)}.badge.view-once{background:#fef2f2;color:var(--red-500)}.badge.persistent{background:#f0fdf4;color:var(--green-500)}.file-actions{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-2);opacity:.9;transition:opacity .2s ease}.file-card:hover .file-actions{opacity:1}.btn-small{height:24px;padding:0 var(--space-2);font-size:10px;font-weight:500;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:var(--space-1)}.file-left-col{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);margin-right:var(--space-2);flex-shrink:0}.file-primary-actions{display:flex;flex-direction:column;gap:4px;width:100%}.btn-highlight{height:28px;padding:0 8px;font-size:10px;font-weight:600;border-radius:var(--radius-sm);cursor:pointer;transition:all .2s ease;white-space:nowrap;width:100%;background:var(--white);color:var(--black);border:2px solid var(--gray-800);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px #00000014}.btn-highlight:hover{background:var(--gray-100);border-color:var(--black);transform:translateY(-1px);box-shadow:0 2px 6px #0000001f}.btn-highlight:active{transform:translateY(0);box-shadow:0 1px 2px #00000014}.btn-small:hover{background:var(--color-bg-muted);border-color:var(--gray-300);transform:translateY(-1px);box-shadow:0 2px 6px #0000000d}.btn-small:active{transform:translateY(0)}.btn-small.share-btn:hover{background:#f0f9ff;border-color:var(--blue-500);color:var(--blue-500)}.btn-small.delete-btn:hover{background:#fef2f2;border-color:var(--red-500);color:var(--red-500)}.btn-small.info-btn:hover,.btn-small.rename-btn:hover{background:var(--gray-100);border-color:var(--gray-400)}.expired-overlay{position:absolute;inset:0;background:#ef4444f2;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center;color:var(--white);font-size:var(--font-size-sm);font-weight:600}.bottom-add-btn{position:fixed;bottom:var(--space-5);left:50%;transform:translate(-50%);width:calc(100% - 40px);max-width:460px;height:60px;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--gray-800),var(--black));border:none;color:var(--white);font-size:var(--font-size-md);font-weight:600;cursor:pointer;box-shadow:0 8px 30px #0000004d;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:50;display:flex;align-items:center;justify-content:center;animation:bottomBtnEntrance .5s cubic-bezier(.16,1,.3,1) .2s both;overflow:hidden}@keyframes bottomBtnEntrance{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.bottom-add-btn-content{display:flex;align-items:center;justify-content:center;gap:var(--space-3);position:relative;z-index:2}.bottom-add-btn-content svg{transition:transform .3s ease}.bottom-add-btn-content span{letter-spacing:.02em}.bottom-add-btn:hover{transform:translate(-50%) translateY(-3px);box-shadow:0 12px 40px #0006;background:linear-gradient(135deg,var(--gray-700),var(--gray-900))}.bottom-add-btn:hover .bottom-add-btn-content svg{transform:rotate(90deg)}.bottom-add-btn:active{transform:translate(-50%) translateY(-1px);box-shadow:0 6px 20px #00000040}.btn-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent);animation:btnShine 3s ease-in-out infinite;pointer-events:none}@keyframes btnShine{0%{left:-100%}50%,to{left:100%}}@media(max-width:540px){.bottom-add-btn{width:calc(100% - 32px);bottom:var(--space-4);height:56px}}.modal{position:fixed;inset:0;z-index:1000;border:none;background:transparent;padding:0;max-width:100%;max-height:100%;width:100%;height:100%}.modal::backdrop{background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .3s ease-out}@keyframes backdropFade{0%{opacity:0}to{opacity:1}}.modal-content{position:absolute;bottom:0;left:0;right:0;background:var(--color-bg);border-radius:var(--radius-2xl) var(--radius-2xl) 0 0;padding:var(--space-6);max-height:90vh;overflow-y:auto;animation:slideUp .4s cubic-bezier(.16,1,.3,1)}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-content:before{content:"";position:absolute;top:var(--space-3);left:50%;transform:translate(-50%);width:40px;height:4px;background:var(--color-border);border-radius:var(--radius-full)}.modal-content h2{font-size:var(--font-size-xl);font-weight:700;margin:var(--space-4) 0 var(--space-5);letter-spacing:-.02em}.modal-content h4{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);margin:var(--space-5) 0 var(--space-3)}.input-group{margin-bottom:var(--space-4)}.input-group label{display:block;font-size:var(--font-size-sm);font-weight:500;margin-bottom:var(--space-2);color:var(--color-text)}input[type=text],input[type=password],input[type=file],input[type=date],input[type=datetime-local],textarea,select{width:100%;height:48px;padding:0 var(--space-4);font-size:var(--font-size-sm);font-family:var(--font-sans);border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);outline:none;transition:border-color var(--duration-fast) var(--ease-out)}textarea{height:auto;padding:var(--space-3) var(--space-4);resize:vertical;min-height:100px}input:focus,textarea:focus,select:focus{border-color:var(--gray-400);box-shadow:0 0 0 3px #0000000d}input::placeholder,textarea::placeholder{color:var(--color-text-muted)}.hint{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-1)}.file-upload-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-8) var(--space-4);margin-bottom:var(--space-5);border:2px dashed var(--gray-300);border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--gray-50),var(--white));cursor:pointer;transition:all .3s ease;overflow:hidden;z-index:1}.file-upload-zone:before{content:"";position:absolute;inset:-2px;border-radius:var(--radius-xl);background:linear-gradient(135deg,var(--gray-400),var(--gray-600),var(--gray-400));z-index:-1;opacity:0;transition:opacity .3s ease}.file-upload-zone:hover{border-color:transparent;background:linear-gradient(135deg,var(--gray-100),var(--white));transform:translateY(-2px);box-shadow:0 8px 25px #0000001a}.file-upload-zone:hover:before{opacity:1}.file-upload-zone.drag-over{border-color:var(--gray-600);background:var(--gray-100);transform:scale(1.02)}.file-input-hidden{position:absolute;top:0;left:0;width:100%!important;height:100%!important;opacity:0;cursor:pointer;z-index:50;display:block}.logo-upload-zone{position:relative;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border:2px dashed var(--gray-300);border-radius:var(--radius-lg);background:var(--gray-50);cursor:pointer;transition:all .2s ease;overflow:hidden}.logo-upload-zone:hover{background:var(--gray-100);border-color:var(--gray-400)}.upload-icon-small{width:36px;height:36px;background:var(--white);border-radius:var(--radius-md);border:1px solid var(--color-border);display:flex;align-items:center;justify-content:center;color:var(--gray-700);flex-shrink:0}#share-logo-text{font-size:var(--font-size-sm);font-weight:500;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.upload-icon{width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gray-800),var(--black));border-radius:var(--radius-2xl);color:var(--white);margin-bottom:var(--space-4);box-shadow:0 8px 20px #0003;transition:all .3s ease;position:relative;z-index:2;pointer-events:none}.file-upload-zone:hover .upload-icon{transform:translateY(-5px) scale(1.05);box-shadow:0 12px 30px #00000040}.upload-icon svg{animation:uploadBounce 2s ease-in-out infinite}@keyframes uploadBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.upload-text{text-align:center;margin-bottom:var(--space-2);position:relative;z-index:2;pointer-events:none}.upload-text strong{display:block;font-size:var(--font-size-lg);font-weight:600;color:var(--color-text);margin-bottom:var(--space-1)}.upload-text span{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.upload-hint{font-size:var(--font-size-xs);color:var(--color-text-muted);padding:var(--space-1) var(--space-3);background:var(--gray-100);border-radius:var(--radius-full);position:relative;z-index:2;pointer-events:none}.file-preview{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);margin-bottom:var(--space-5);background:linear-gradient(135deg,var(--green-500),#16a34a);border-radius:var(--radius-lg);animation:filePreviewIn .3s ease-out}.file-preview.hidden{display:none}@keyframes filePreviewIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.file-preview-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#fff3;border-radius:var(--radius-md);font-size:24px}.file-preview-info{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.file-preview-info #file-preview-name{font-size:var(--font-size-sm);font-weight:600;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-preview-info #file-preview-size{font-size:var(--font-size-xs);color:#fffc}.file-remove-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#fff3;border:none;border-radius:var(--radius-md);color:var(--white);font-size:16px;cursor:pointer;transition:all .2s ease}.file-remove-btn:hover{background:#ffffff4d;transform:scale(1.1)}.password-section{padding:var(--space-6);background:linear-gradient(135deg,var(--gray-50),var(--gray-100));border-radius:var(--radius-xl);border:1px solid var(--gray-300);margin-bottom:var(--space-6);box-shadow:var(--shadow-sm)}.password-section label{font-size:var(--font-size-lg)!important;font-weight:700!important;color:var(--gray-900);margin-bottom:var(--space-3)!important;display:flex;align-items:center;gap:var(--space-2)}.password-section input{height:56px;font-size:var(--font-size-md);border:2px solid var(--gray-300);background:var(--white)}.password-section input:focus{border-color:var(--black);box-shadow:0 0 0 4px #0000001a}.security-options{display:flex;flex-direction:column;gap:var(--space-2);margin-bottom:var(--space-4)}.radio-card{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.radio-card:hover{border-color:var(--gray-300)}.radio-card:has(input:checked){border-color:var(--black);background:var(--color-bg-subtle)}.radio-card input[type=radio]{width:20px;height:20px;accent-color:var(--black);margin:0}.card-content{flex:1}.card-content strong{display:block;font-size:var(--font-size-sm);font-weight:600;margin-bottom:var(--space-1)}.card-content span{font-size:var(--font-size-xs);color:var(--color-text-secondary)}.dest-option:has(input:checked){border-color:var(--red-500);background:#fef2f2}.modal-actions{display:flex;gap:var(--space-3);margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-border-subtle)}.modal-actions button{flex:1}.btn-primary{height:48px;padding:0 var(--space-6);font-size:var(--font-size-sm);font-weight:600;font-family:var(--font-sans);background:var(--black);color:var(--white);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.btn-primary:hover{background:var(--gray-800)}.btn-primary:active{transform:scale(.98)}.btn-ghost{height:48px;padding:0 var(--space-6);font-size:var(--font-size-sm);font-weight:500;font-family:var(--font-sans);background:var(--color-bg);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.btn-ghost:hover{background:var(--color-bg-muted)}.btn-danger{height:48px;padding:0 var(--space-6);font-size:var(--font-size-sm);font-weight:600;font-family:var(--font-sans);background:var(--red-500);color:var(--white);border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-fast) var(--ease-out)}.btn-danger:hover{background:var(--red-600)}.password-strength{margin-top:var(--space-2)}.strength-bar{height:4px;background:var(--color-bg-muted);border-radius:var(--radius-full);overflow:hidden;margin-bottom:var(--space-1)}.strength-bar:after{content:"";display:block;height:100%;width:0;transition:all var(--duration-base) var(--ease-out)}.strength-bar.weak:after{width:33%;background:var(--red-500)}.strength-bar.medium:after{width:66%;background:var(--amber-500)}.strength-bar.strong:after{width:100%;background:var(--green-500)}.strength-text{font-size:var(--font-size-xs);color:var(--color-text-muted)}.viewer-overlay{position:fixed;inset:0;background:var(--color-bg);z-index:1000;display:flex;flex-direction:column}.viewer-overlay.hidden{display:none}.viewer-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)}.viewer-header span{font-size:var(--font-size-sm);font-weight:500;flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#viewer-timer{font-size:var(--font-size-xs);color:var(--red-500);font-weight:600}.viewer-content{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-4);overflow:auto;background:var(--gray-50)}.viewer-content img,.viewer-content video,.viewer-content audio{max-width:100%;max-height:100%;border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}.viewer-content iframe{width:100%;height:100%;border:none;border-radius:var(--radius-md)}.info-grid{display:flex;flex-direction:column;gap:var(--space-2)}.info-row{display:flex;justify-content:space-between;padding:var(--space-3) 0;border-bottom:1px solid var(--color-border-subtle)}.info-row:last-child{border-bottom:none}.info-row strong{font-size:var(--font-size-sm);font-weight:500;color:var(--color-text-secondary)}.info-row span{font-size:var(--font-size-sm);color:var(--color-text)}.access-log{background:var(--color-bg-subtle);border-radius:var(--radius-md);padding:var(--space-3);max-height:120px;overflow-y:auto;font-size:var(--font-size-xs);color:var(--color-text-secondary)}.access-log-item{padding:var(--space-2) 0;border-bottom:1px solid var(--color-border-subtle)}.access-log-item:last-child{border-bottom:none}.settings-section{padding:var(--space-4) 0;border-bottom:1px solid var(--color-border-subtle)}.settings-section:last-of-type{border-bottom:none}.settings-section h4{margin-top:0}.danger-zone{background:#fef2f2;margin:var(--space-4) calc(-1 * var(--space-6));padding:var(--space-4) var(--space-6);border-radius:var(--radius-lg)}.setting-item{margin-bottom:var(--space-4)}.checkbox-item{display:flex;align-items:center;gap:var(--space-3);cursor:pointer}.checkbox-item input[type=checkbox]{width:20px;height:20px;cursor:pointer;accent-color:var(--black)}.checkbox-item label{font-size:var(--font-size-sm);color:var(--color-text);cursor:pointer}.large-modal{position:fixed;inset:50% auto auto 50%;transform:translate(-50%,-50%);max-width:650px;width:calc(100% - 32px);max-height:85vh;padding:var(--space-6);border-radius:var(--radius-xl);animation:fadeInScale var(--duration-base) var(--ease-out)}.large-modal:before{display:none}@keyframes fadeInScale{0%{transform:translate(-50%,-50%) scale(.95);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.help-content{text-align:left;margin:var(--space-4) 0;max-height:60vh;overflow-y:auto;padding-right:var(--space-2)}.help-content section{margin-bottom:var(--space-5);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border-subtle)}.help-content section:last-child{border-bottom:none}.help-content h3{font-size:var(--font-size-md);color:var(--color-text);margin-bottom:var(--space-3)}.help-content p{color:var(--color-text-secondary);line-height:1.7;margin-bottom:var(--space-3)}.help-content ul,.help-content ol{color:var(--color-text-secondary);line-height:1.7;padding-left:var(--space-5)}.help-content li{margin-bottom:var(--space-2)}.help-content strong{color:var(--color-text)}#app-lock-screen{position:fixed;inset:0;z-index:99999;background:#ffffffe6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:center;flex-direction:column}#app-lock-screen.hidden{display:none}.lock-card{background:var(--color-bg);padding:var(--space-8);border-radius:var(--radius-2xl);border:1px solid var(--color-border);box-shadow:0 25px 50px -12px #00000040;width:100%;max-width:400px;margin:var(--space-4);display:flex;flex-direction:column;align-items:center;animation:scaleUp var(--duration-slow) var(--ease-out)}@keyframes scaleUp{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.lock-icon-large{font-size:72px;margin-bottom:var(--space-4)}.lock-card h2{font-size:var(--font-size-2xl);font-weight:700;margin-bottom:var(--space-2);color:var(--color-text)}.lock-card p{color:var(--color-text-secondary);margin-bottom:var(--space-6);font-size:var(--font-size-md);text-align:center}.lock-card input{text-align:center;font-size:var(--font-size-xl);letter-spacing:.15em;padding:var(--space-4);border-radius:var(--radius-lg);border:2px solid var(--color-border);width:100%;margin-bottom:var(--space-4);transition:all var(--duration-fast) var(--ease-out)}.lock-card input:focus{border-color:var(--black);box-shadow:0 0 0 4px #0000001a}.lock-card button{width:100%;height:56px;font-size:var(--font-size-md);font-weight:600}#privacy-curtain{display:none;position:fixed;inset:0;background:var(--black);z-index:99998}.drop-zone{display:none;position:fixed;inset:var(--space-4);border:3px dashed var(--gray-400);border-radius:var(--radius-xl);background:#fffffffa;z-index:1000;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-3)}.drop-zone.active{display:flex}.drop-zone svg{width:64px;height:64px;color:var(--color-text-muted)}.drop-zone span{font-size:var(--font-size-lg);color:var(--color-text-secondary);font-weight:500}.file-grid.compact-view .file-card{padding:var(--space-3);gap:var(--space-3)}.file-grid.compact-view .file-icon{width:36px;height:36px}.file-grid.compact-view .file-info h3{font-size:var(--font-size-xs)}.file-grid.compact-view .file-meta{margin-bottom:var(--space-1)}.file-grid.compact-view .file-actions{margin-top:var(--space-1)}.file-grid.compact-view .btn-small{height:24px;padding:0 var(--space-2);font-size:10px}.file-grid.hide-thumbnails .file-icon{opacity:.15}.hidden{display:none!important}.display-flex{display:flex}.gap-2{gap:var(--space-2)}.mb-2{margin-bottom:var(--space-2)}.text-center{text-align:center}@media(max-width:540px){#app{max-width:100%;box-shadow:none}.stats-dashboard{grid-template-columns:repeat(2,1fr)}.large-modal{width:calc(100% - 24px);max-height:90vh;padding:var(--space-5)}.help-content{max-height:55vh}}@media print{body{display:none!important}}.prompt-message,.confirm-message,.alert-message{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin-bottom:var(--space-4);line-height:1.5;word-break:break-word}#custom-prompt-modal .modal-content,#custom-confirm-modal .modal-content,#custom-alert-modal .modal-content{text-align:center;padding-top:var(--space-8)}#custom-prompt-modal h2,#custom-confirm-modal h2,#custom-alert-modal h2{font-size:var(--font-size-lg);margin-bottom:var(--space-3)}#custom-prompt-modal .input-group{text-align:left}#custom-prompt-modal input,#custom-confirm-modal input{text-align:center;font-size:var(--font-size-md)}#prompt-input[type=password]{letter-spacing:.2em}#custom-alert-modal .modal-actions{justify-content:center}#custom-alert-modal .modal-actions button{max-width:200px}.panic-trigger{color:var(--red-500);border-color:#ef44444d;background:#ef44440d}.panic-trigger:hover{background:#ef44441a;border-color:var(--red-500);transform:scale(1.05)}.panic-overlay{position:fixed;inset:0;z-index:99999;background:var(--color-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;animation:fadeIn .2s ease-out}.panic-overlay.blur-mode{background:#fffffff2;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}.panic-message{font-size:var(--font-size-xl);font-weight:700;color:var(--gray-800);max-width:80%}.fake-loading-spinner{width:40px;height:40px;border:3px solid var(--gray-200);border-top-color:var(--blue-500);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:var(--space-4)}@keyframes spin{to{transform:rotate(360deg)}}.reload-icon-btn{width:64px;height:64px;background:var(--white);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px #00000026;transition:all .3s ease;color:var(--gray-700);margin-bottom:var(--space-4)}.reload-icon-btn:hover{transform:scale(1.1);box-shadow:0 6px 25px #0003;color:var(--blue-500)}.reload-icon-btn:active{transform:scale(.95)}.pull-to-reload{font-size:var(--font-size-sm);color:var(--gray-500);margin-top:var(--space-2)}.switch-wrapper{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;cursor:pointer;padding:8px 0}.switch-label-text{font-weight:600;color:var(--color-text);font-size:var(--font-size-sm)}.switch-input{display:none!important}.switch-slider{display:inline-block;position:relative;width:44px;height:24px;background-color:var(--gray-300);border-radius:9999px;transition:background-color .3s cubic-bezier(.4,0,.2,1);flex-shrink:0}.switch-slider:before{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background-color:#fff;border-radius:50%;transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0003}.switch-input:checked+.switch-slider{background-color:var(--green-500)}.switch-input:checked+.switch-slider:before{transform:translate(20px)}