:root { --bg:#f0f2f8;--surface:#ffffff;--border:#e2e6f0;--border2:#c8d0e4; --accent:#4f46e5;--accent-lt:#ede9fe;--accent2:#06b6d4; --green:#10b981;--green-lt:#d1fae5;--red:#ef4444;--red-lt:#fee2e2; --yellow:#f59e0b;--yellow-lt:#fef3c7; --text:#1a1a2e;--sub:#4b5268;--muted:#8b93ad; --mono:'JetBrains Mono',monospace;--sans:'Inter',sans-serif; --radius:16px; --shadow:0 2px 12px rgba(79,70,229,0.07),0 1px 3px rgba(0,0,0,0.05); --shadow-lg:0 8px 32px rgba(79,70,229,0.11),0 2px 8px rgba(0,0,0,0.05); } .header-badge span { width:6px;height:6px;background:var(--accent);border-radius:50%;display:block; } h1 { font-size:clamp(1.8rem,4vw,2.6rem);font-weight:700;color:var(--text);letter-spacing:-0.5px;line-height:1.2;margin-bottom:0.6rem; } h1 em { font-style:normal;color:var(--accent); } .tagline { color:var(--sub);font-size:0.95rem; } /* ── Tool Card ── */ .tool-card { background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden;margin-bottom:1.8rem; } /* ── Drop Zone ── */ #dropzoneWrap { padding:2rem; } .dropzone { border:2px dashed #c4c9e0;border-radius:var(--radius); padding:3.2rem 2rem;text-align:center;cursor:pointer; transition:all 0.22s ease;background:#f8f9ff; } .dropzone:hover,.dropzone.drag-over { border-color:var(--accent);background:#f0eeff; transform:translateY(-2px);box-shadow:0 4px 20px rgba(79,70,229,0.12); } .dz-title { font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:0.35rem; } .dz-sub { font-size:0.82rem;color:var(--muted);margin-bottom:1.4rem; } .dz-btn { display:inline-flex;align-items:center;gap:8px; padding:10px 24px;background:var(--accent);color:#fff; border:none;border-radius:10px; font-size:0.87rem;font-weight:600;cursor:pointer; transition:all 0.18s;box-shadow:0 2px 8px rgba(79,70,229,0.32); } .dz-btn:hover { background:#4338ca;transform:translateY(-1px); } #fileInput { display:none; } /* ── Controls Panel ── */ .controls-panel { border-top:1px solid var(--border);padding:1.4rem 2rem;display:none;background:#fafbff; } .controls-panel.visible { display:block; } .controls-label { font-size:0.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:1rem; } .controls-grid { display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:1rem;align-items:end; } .ctrl-group { display:flex;flex-direction:column;gap:0.4rem; } .ctrl-group label { font-size:0.72rem;font-weight:600;color:var(--sub); } .ctrl-input { width:100%;background:#fff;border:1.5px solid var(--border2); color:var(--text);padding:8px 11px;border-radius:9px; font-size:0.84rem;outline:none; transition:border-color 0.18s,box-shadow 0.18s; } .ctrl-input:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,70,229,0.1); } .ctrl-input::placeholder { color:var(--muted); } .compress-btn { width:100%;padding:10px 0; background:linear-gradient(135deg,var(--accent) 0%,#7c3aed 100%); color:#fff;border:none;border-radius:10px; font-size:0.85rem;font-weight:700; cursor:pointer;transition:all 0.2s; box-shadow:0 3px 12px rgba(79,70,229,0.35); } .compress-btn:hover { opacity:0.92;transform:translateY(-1px); } .compress-btn:disabled { opacity:0.4;cursor:not-allowed;transform:none;box-shadow:none; } .compress-btn.secondary { background:#fff;color:var(--accent);border:1.5px solid var(--accent); box-shadow:none; } .compress-btn.secondary:hover { background:var(--accent-lt); } .compress-btn.danger { background:linear-gradient(135deg,var(--red) 0%,#dc2626 100%); box-shadow:0 3px 12px rgba(239,68,68,0.35); } /* ── Queue Section ── */ .queue-section { padding:0 2rem 1.5rem;display:none; } .queue-header { display:flex;align-items:center;justify-content:space-between;padding:1.2rem 0 1rem;border-top:1px solid var(--border);flex-wrap:wrap;gap:0.6rem; } .queue-title { font-size:0.75rem;font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:1px; } .queue-actions { display:flex;gap:8px;align-items:center;flex-wrap:wrap; } .add-more-btn { display:inline-flex;align-items:center;gap:5px;padding:6px 14px; background:#f0f1ff;border:1px solid #c4c9e8;color:var(--accent); border-radius:8px;font-size:0.78rem;font-weight:600;cursor:pointer; transition:all 0.18s;white-space:nowrap; } .add-more-btn:hover { background:var(--accent-lt); } .add-more-btn.green { background:var(--green-lt);border-color:#6ee7b7;color:#065f46; } .add-more-btn.green:hover { background:#a7f3d0; } .add-more-btn.yellow { background:var(--yellow-lt);border-color:#fcd34d;color:#92400e; } .add-more-btn.yellow:hover { background:#fde68a; } .clear-btn { font-size:0.78rem;color:var(--red);background:var(--red-lt); border:none;cursor:pointer;font-weight:600; padding:6px 14px;border-radius:8px;transition:all 0.18s;white-space:nowrap; } .clear-btn:hover { background:#fca5a5; } /* ── Table Container ── */ .table-container { overflow:auto;border:1px solid var(--border);border-radius:12px; max-height:520px;position:relative; scrollbar-width:thin;scrollbar-color:var(--border2) transparent; } .table-container::-webkit-scrollbar { width:6px;height:6px; } .table-container::-webkit-scrollbar-track { background:transparent; } .table-container::-webkit-scrollbar-thumb { background:var(--border2);border-radius:99px; } table { width:100%;border-collapse:collapse;font-size:0.82rem; } thead { position:sticky;top:0;z-index:10; } thead tr { background:linear-gradient(135deg,#f0eeff 0%,#e8f4fd 100%); } th { padding:10px 12px;text-align:left;font-size:0.72rem;font-weight:700; color:var(--sub);text-transform:uppercase;letter-spacing:0.8px; border-bottom:2px solid var(--border);white-space:nowrap; position:relative;cursor:pointer;user-select:none; min-width:100px; } th:hover { background:rgba(79,70,229,0.06); } th:first-child { width:44px;min-width:44px;cursor:default; } th .sort-icon { margin-left:4px;opacity:0.4;font-style:normal; } th.sorted-asc .sort-icon,th.sorted-desc .sort-icon { opacity:1;color:var(--accent); } tbody tr { border-bottom:1px solid var(--border);transition:background 0.12s; } tbody tr:hover { background:#f5f6ff; } tbody tr.selected-row { background:#ede9fe; } tbody tr:last-child { border-bottom:none; } td { padding:0;position:relative; } td:first-child { padding:0 8px;text-align:center; font-size:0.68rem;color:var(--muted);background:#f8f9ff; border-right:1px solid var(--border); } .cell-input { width:100%;height:100%;padding:9px 12px;border:none;outline:none; background:transparent;font-size:0.82rem; color:var(--text);cursor:text;min-width:100px; transition:background 0.15s;display:block; } .cell-input:focus { background:#eef2ff; box-shadow:inset 0 0 0 2px var(--accent); border-radius:4px;z-index:1;position:relative; } .cell-input.modified { background:#fff7ed; } /* Header input */ .header-input { width:100%;padding:10px 12px;border:none;outline:none; background:transparent;font-size:0.72rem; font-weight:700;color:var(--sub);text-transform:uppercase;letter-spacing:0.8px; cursor:pointer; } .header-input:focus { background:rgba(79,70,229,0.08);border-radius:4px; } /* ── Summary Bar ── */ .summary-bar { background:linear-gradient(135deg,#f0eeff 0%,#e0f2fe 100%); border:1px solid #c4b5fd;border-radius:var(--radius); padding:1.2rem 2rem;margin:0 2rem 1.5rem; display:none;grid-template-columns:repeat(5,1fr);gap:1rem;text-align:center; } .summary-bar.visible { display:grid; } .stat-val { font-size:1.25rem;font-weight:700;color:var(--accent); } .stat-label { font-size:0.68rem;color:var(--sub);margin-top:2px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px; } /* ── Download Bar ── */ .dl-all-btn { display:none;width:calc(100% - 4rem);margin:0 2rem 2rem; padding:12px 0;background:#fff;border:2px solid var(--accent); color:var(--accent);border-radius:12px; font-size:0.9rem;font-weight:700;cursor:pointer;transition:all 0.2s; } .dl-all-btn.visible { display:block; } .dl-all-btn:hover { background:var(--accent-lt); } /* ── Prog bar ── */ .prog-wrap { margin-top:1rem;height:5px;background:#e4e7f4;border-radius:99px;overflow:hidden;display:none; } .prog-bar { height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:99px;width:0%;transition:width 0.3s ease; } /* ── Saving badge ── */ .saving-badge { font-size:0.68rem;padding:2px 9px; border-radius:99px;background:var(--green-lt);color:#065f46; border:1px solid #a7f3d0;white-space:nowrap;font-weight:700;display:inline-block; } .saving-badge.warn { background:var(--yellow-lt);color:#92400e;border-color:#fcd34d; } .saving-badge.bad { background:var(--red-lt);color:#7f1d1d;border-color:#fca5a5; } /* ── Context Menu ── */ .ctx-menu { position:fixed;background:#fff;border:1px solid var(--border); border-radius:10px;box-shadow:var(--shadow-lg); padding:6px;z-index:999;display:none;min-width:170px; animation:fadeSlide 0.12s ease; } .ctx-menu.show { display:block; } .ctx-item { padding:7px 12px;border-radius:7px;font-size:0.8rem;cursor:pointer; transition:background 0.12s;display:flex;align-items:center;gap:8px;color:var(--text); } .ctx-item:hover { background:#f0f1ff; } .ctx-item.danger { color:var(--red); } .ctx-item.danger:hover { background:var(--red-lt); } .ctx-sep { height:1px;background:var(--border);margin:4px 0; } /* ── Toast ── */ .toast { position:fixed;bottom:2rem;right:2rem;background:var(--text);color:#fff; border-radius:12px;padding:12px 20px;font-size:0.85rem;font-weight:500; box-shadow:0 8px 24px rgba(0,0,0,0.18);transform:translateY(80px);opacity:0; transition:all 0.28s ease;z-index:9999;max-width:320px; } .toast.show { transform:translateY(0);opacity:1; } @keyframes fadeSlide { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} } /* ── Paste area ── */ .paste-area { width:100%;min-height:80px;border:1.5px solid var(--border2);border-radius:9px; padding:10px 12px;font-size:0.78rem;color:var(--text); background:#fff;outline:none;resize:vertical;transition:border-color 0.18s; } .paste-area:focus { border-color:var(--accent);box-shadow:0 0 0 3px rgba(79,70,229,0.1); }