:root{--bg:#f6f7fb;--surface:#fff;--surface-2:#f0f2f8;--text:#0f172a;--text-dim:#475569;--text-faint:#94a3b8;--border:#e2e8f0;--border-strong:#cbd5e1;--accent:#4f46e5;--accent-hover:#4338ca;--accent-soft:#eef2ff;--success:#059669;--success-soft:#ecfdf5;--danger:#dc2626;--danger-soft:#fef2f2;--shadow-sm:0 1px 2px #0f172a0a;--shadow-md:0 4px 12px #0f172a0f;--sans:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;font:15px/1.5 var(--sans);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{min-height:100svh;margin:0}#root{min-height:100svh}*{box-sizing:border-box}h1,h2,h3{color:var(--text);letter-spacing:-.01em;margin:0;font-weight:600}p{margin:0}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit}input,select{font-family:inherit;font-size:inherit;color:inherit}.app{max-width:640px;margin:0 auto;padding:64px 24px 96px}@media (width<=640px){.app{padding:40px 16px 64px}}.header{text-align:center;margin-bottom:40px}.logo{background:var(--accent);width:56px;height:56px;box-shadow:var(--shadow-md);border-radius:14px;justify-content:center;align-items:center;margin:0 auto 20px;display:flex}.logo svg{color:#fff;width:28px;height:28px}.header h1{margin-bottom:8px;font-size:28px}.header p{color:var(--text-dim);max-width:44ch;margin:0 auto;font-size:15px;line-height:1.55}.card{background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-sm);border-radius:16px;padding:24px}.dropzone{border:2px dashed var(--border-strong);text-align:center;cursor:pointer;background:var(--surface-2);border-radius:12px;flex-direction:column;justify-content:center;align-items:center;width:100%;padding:40px 20px;transition:all .15s;display:flex;position:relative}.dropzone:hover{border-color:var(--accent);background:var(--accent-soft)}.dropzone.dragging{border-color:var(--accent);background:var(--accent-soft);transform:scale(1.01)}.dropzone input[type=file]{opacity:0;cursor:pointer;position:absolute;inset:0}.dropzone-icon{width:40px;height:40px;color:var(--text-faint);flex-shrink:0;margin-bottom:12px;display:block}.dropzone-title{color:var(--text);margin-bottom:4px;font-size:15px;font-weight:500}.dropzone-hint{color:var(--text-faint);font-size:13px}.dropzone.picked .dropzone-title{color:var(--accent)}.change-link{color:var(--accent);cursor:pointer;font-weight:500}.change-link:hover{text-decoration:underline}.expiry-group{margin-top:20px}.expiry-label{color:var(--text-dim);margin-bottom:10px;font-size:13px;font-weight:500;display:block}.expiry-options{background:var(--surface-2);border-radius:10px;grid-template-columns:repeat(4,1fr);gap:8px;padding:4px;display:grid}.expiry-option{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:7px;padding:10px 8px;font-size:14px;font-weight:500;transition:all .12s}.expiry-option:hover{color:var(--text)}.expiry-option.active{background:var(--surface);color:var(--accent);box-shadow:var(--shadow-sm)}.submit{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;width:100%;margin-top:20px;padding:14px 20px;font-size:15px;font-weight:600;transition:background .12s;display:flex}.submit:hover:not(:disabled){background:var(--accent-hover)}.submit:disabled{background:var(--border-strong);color:#fff;cursor:not-allowed}.spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.7s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.error{background:var(--danger-soft);color:var(--danger);border-radius:10px;align-items:flex-start;gap:10px;margin-top:16px;padding:12px 14px;font-size:13px;display:flex}.error svg{flex-shrink:0;width:18px;height:18px;margin-top:1px}.history{margin-top:40px}.history-head{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.history-head h2{color:var(--text);font-size:15px;font-weight:600}.clear-btn{color:var(--text-dim);cursor:pointer;background:0 0;border:none;border-radius:6px;padding:6px 10px;font-size:13px}.clear-btn:hover{background:var(--surface-2);color:var(--text)}.empty{text-align:center;color:var(--text-faint);background:var(--surface);border:1px dashed var(--border);border-radius:12px;padding:32px 20px;font-size:14px}.history-list{flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;display:flex}.history-item{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;transition:border-color .12s}.history-item:hover{border-color:var(--border-strong)}.history-item.expired{opacity:.55}.history-item.fresh{border-color:var(--success);background:var(--success-soft)}.item-top{justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;display:flex}.item-file{align-items:center;gap:8px;min-width:0;display:flex}.item-file svg{width:18px;height:18px;color:var(--text-faint);flex-shrink:0}.item-name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:500;overflow:hidden}.item-timer{color:var(--text-faint);white-space:nowrap;align-items:center;gap:4px;font-size:12px;display:flex}.item-timer svg{width:12px;height:12px}.item-timer.warn{color:var(--danger)}.item-url-row{background:var(--surface-2);border-radius:8px;align-items:center;gap:8px;padding:4px 4px 4px 12px;display:flex}.history-item.fresh .item-url-row{background:#ffffffb3}.item-url{color:var(--text-dim);text-overflow:ellipsis;white-space:nowrap;flex:1;padding:6px 0;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:12px;overflow:hidden}.item-url:hover{color:var(--accent);text-decoration:none}.copy-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);cursor:pointer;border-radius:6px;align-items:center;gap:5px;padding:6px 12px;font-size:12px;font-weight:500;transition:all .12s;display:flex}.copy-btn svg{width:13px;height:13px}.copy-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}.copy-btn.copied{background:var(--success);border-color:var(--success);color:#fff}.copy-btn:disabled{cursor:not-allowed;opacity:.5}.footer{text-align:center;color:var(--text-faint);margin-top:48px;font-size:12px}