*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--font-sans: "DM Sans", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace;--bg: #f5f2ed;--bg-card: #fff;--bg-hover: #faf8f5;--border: #ddd5c9;--border-light: #e8e2d9;--text: #2c2418;--text-muted: #8a7e6e;--text-light: #b0a594;--accent: #c45d2c;--accent-hover: #a84d24;--accent-bg: #fdf6f0;--green: #3a7d44;--green-bg: #f0f7f1;--radius: 8px;--radius-lg: 12px;--shadow-sm: 0 1px 2px rgba(44, 36, 24, .06);--shadow-md: 0 4px 12px rgba(44, 36, 24, .08);--shadow-lg: 0 8px 24px rgba(44, 36, 24, .1)}html{font-size:15px}body{font-family:var(--font-sans);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}.app{max-width:720px;margin:0 auto;padding:48px 24px 80px}.header{margin-bottom:32px}.header-mark{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--text);color:var(--bg);border-radius:8px;margin-bottom:16px}.header h1{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}.header-sub{color:var(--text-muted);font-size:.93rem}.screen{display:none}.screen.active{display:block;animation:fadeIn .25s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.drop-zone{border:2px dashed var(--border);border-radius:var(--radius-lg);background:var(--bg-card);padding:64px 32px;text-align:center;cursor:pointer;transition:border-color .15s,background-color .15s,box-shadow .15s}.drop-zone:hover{border-color:var(--accent);background:var(--accent-bg)}.drop-zone.drag-over{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 4px #c45d2c1a}.drop-icon{color:var(--text-light);margin-bottom:16px;transition:color .15s,transform .15s}.drop-zone:hover .drop-icon,.drop-zone.drag-over .drop-icon{color:var(--accent);transform:translateY(-2px)}.drop-text{font-size:1.05rem;font-weight:600;margin-bottom:4px}.drop-hint{color:var(--text-muted);font-size:.85rem;margin-bottom:12px}.processing-box{text-align:center;padding:80px 32px}.spinner{width:32px;height:32px;border:3px solid var(--border-light);border-top-color:var(--accent);border-radius:50%;margin:0 auto 16px;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.processing-text{color:var(--text-muted);font-size:.95rem}.preview-controls{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}.client-name-group{flex:1;min-width:200px}.client-name-group label{display:block;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:6px}.input{width:100%;padding:10px 14px;font-family:var(--font-sans);font-size:.95rem;font-weight:500;border:1.5px solid var(--border);border-radius:var(--radius);background:var(--bg-card);color:var(--text);transition:border-color .15s,box-shadow .15s;outline:none}.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px #c45d2c1a}.preview-meta{display:flex;gap:8px;flex-shrink:0}.badge{display:inline-flex;align-items:center;padding:6px 12px;font-size:.8rem;font-weight:600;font-family:var(--font-mono);background:var(--green-bg);color:var(--green);border-radius:20px;white-space:nowrap}.table-wrap{background:var(--bg-card);border:1.5px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}.preview-table{width:100%;border-collapse:collapse;font-size:.9rem}.preview-table thead{background:var(--bg)}.preview-table th{padding:10px 16px;text-align:left;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:1.5px solid var(--border-light)}.preview-table td{padding:10px 16px;border-bottom:1px solid var(--border-light);vertical-align:middle}.preview-table tbody tr:last-child td{border-bottom:none}.preview-table tbody tr:hover{background:var(--bg-hover)}.col-page{width:60px}.col-unit{width:80px}.col-year{width:70px}.col-page+td,.col-unit+td{font-family:var(--font-mono);font-size:.85rem;font-weight:500}td.cell-page,td.cell-unit{font-family:var(--font-mono);font-weight:500}td.cell-filename{font-family:var(--font-mono);font-size:.82rem;color:var(--text-muted);word-break:break-all}.col-action{width:56px}td.cell-action{text-align:center}.btn-row-download{display:inline-flex;align-items:center;justify-content:center;padding:4px 10px;font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.03em;color:var(--accent);background:var(--accent-bg);border:1px solid rgba(196,93,44,.2);border-radius:4px;cursor:pointer;transition:background-color .15s,border-color .15s}.btn-row-download:hover{background:#c45d2c26;border-color:var(--accent)}.actions{display:flex;align-items:center;gap:12px;margin-top:20px}.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 22px;font-family:var(--font-sans);font-size:.9rem;font-weight:600;border:none;border-radius:var(--radius);cursor:pointer;transition:background-color .15s,transform .1s,box-shadow .15s}.btn:active{transform:scale(.97)}.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-md)}.btn-secondary{background:var(--bg);color:var(--text);border:1.5px solid var(--border)}.btn-secondary:hover{background:var(--border-light)}.btn-ghost{background:none;color:var(--text-muted)}.btn-ghost:hover{color:var(--text);background:var(--bg)}.error-bar{position:fixed;bottom:24px;left:50%;transform:translate(-50%);background:#c0392b;color:#fff;padding:12px 20px;border-radius:var(--radius);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:12px;font-size:.9rem;font-weight:500;z-index:100;animation:slideUp .3s ease-out}.error-bar.hidden{display:none}@keyframes slideUp{0%{opacity:0;transform:translate(-50%) translateY(12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.btn-dismiss{background:none;border:none;color:#ffffffb3;font-size:1.2rem;cursor:pointer;padding:0 4px;line-height:1}.btn-dismiss:hover{color:#fff}@media(max-width:600px){.app{padding:32px 16px 64px}.drop-zone{padding:48px 20px}.preview-controls{flex-direction:column;align-items:stretch}.preview-meta{justify-content:flex-start}.preview-table th,.preview-table td{padding:8px 10px}.col-year,td.cell-year{display:none}}