*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--font-display: "Newsreader", Georgia, serif;--font-body: "Inter", system-ui, sans-serif;--color-bg: #fafafa;--color-surface: #ffffff;--color-text: #1a1a1a;--color-text-secondary: #666666;--color-text-muted: #999999;--color-border: #e5e5e5;--color-border-hover: #cccccc;--color-accent: #f4d603;--color-accent-hover: #e5c700;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--radius-sm: 4px;--radius-md: 6px;--transition: .15s ease}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-body);font-size:.9375rem;line-height:1.6;color:var(--color-text);background:var(--color-bg);min-height:100vh}.header{border-bottom:1px solid var(--color-border);background:var(--color-surface)}.header-content{max-width:720px;margin:0 auto;padding:var(--space-md) var(--space-xl);display:flex;justify-content:space-between;align-items:center}.logo{font-family:var(--font-display);font-size:1.25rem;font-weight:500;letter-spacing:-.02em}.mode-toggle{font-family:var(--font-body);font-size:.8125rem;font-weight:500;color:var(--color-text-secondary);background:transparent;border:none;cursor:pointer;padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:color var(--transition)}.mode-toggle:hover{color:var(--color-text)}body.advanced-mode .mode-toggle{color:var(--color-accent)}.main{max-width:720px;margin:0 auto;padding:var(--space-2xl) var(--space-xl)}#file-input{display:none}.drop-zone{border:2px dashed var(--color-border);border-radius:var(--radius-md);padding:var(--space-2xl);text-align:center;cursor:pointer;transition:border-color var(--transition);background:var(--color-surface)}.drop-zone:hover{border-color:var(--color-border-hover)}.drop-zone.dragover{border-color:var(--color-accent)}.drop-content{display:flex;flex-direction:column;gap:var(--space-xs)}.drop-text{font-family:var(--font-display);font-size:1.5rem;font-weight:400;color:var(--color-text)}.drop-hint{font-size:.875rem;color:var(--color-text-muted)}.conversion-panel{animation:fade-in .2s ease}.conversion-panel.hidden{display:none}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.panel-layout{display:flex;flex-direction:column;gap:var(--space-2xl)}.file-section{display:flex;align-items:baseline;gap:var(--space-md);padding-bottom:var(--space-lg);border-bottom:1px solid var(--color-border)}.file-name{font-family:var(--font-display);font-size:1.125rem;font-weight:500}.link-button{font-family:var(--font-body);font-size:.8125rem;font-weight:500;color:var(--color-text-secondary);background:transparent;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:2px;transition:color var(--transition)}.link-button:hover{color:var(--color-text)}.formats-section{display:grid;grid-template-columns:1fr 1px 1fr;gap:var(--space-xl)}.format-divider{background:var(--color-border)}.format-group{display:flex;flex-direction:column;gap:var(--space-sm)}.format-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)}.format-search{font-family:var(--font-body);font-size:.9375rem;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);transition:border-color var(--transition)}.format-search:focus{outline:none;border-color:var(--color-text-secondary)}.format-search::placeholder{color:var(--color-text-muted)}.format-list{max-height:280px;overflow-y:auto;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface)}.format-list:empty{display:none}.format-list button{width:100%;padding:var(--space-sm) var(--space-md);font-family:var(--font-body);font-size:.875rem;text-align:left;background:transparent;border:none;border-bottom:1px solid var(--color-border);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition)}.format-list button:last-child{border-bottom:none}.format-list button:hover{background:var(--color-bg);color:var(--color-text)}.format-list button.selected{background:var(--color-bg);color:var(--color-text);font-weight:500;padding-left:calc(var(--space-md) + 8px)}.format-list button.selected:before{content:"";position:absolute;left:var(--space-md);width:4px;height:4px;border-radius:50%;background:var(--color-accent)}.convert-button{font-family:var(--font-body);font-size:.9375rem;font-weight:500;padding:var(--space-md) var(--space-xl);background:var(--color-text);color:var(--color-surface);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);align-self:flex-start}.convert-button:hover:not(:disabled){background:var(--color-accent)}.convert-button:disabled{opacity:.4;cursor:not-allowed}.popup-backdrop{position:fixed;inset:0;background:#0000004d;opacity:0;visibility:hidden;transition:all .2s ease;z-index:100}.popup-backdrop.show{opacity:1;visibility:visible}.popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96);background:var(--color-surface);padding:var(--space-xl);border-radius:var(--radius-md);box-shadow:0 4px 24px #0000001a;opacity:0;visibility:hidden;transition:all .2s ease;z-index:101;min-width:280px;text-align:center}.popup.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}.popup-message{font-size:.9375rem;color:var(--color-text-secondary);display:flex;align-items:center;gap:var(--space-md)}.popup-spinner{width:16px;height:16px;border:2px solid var(--color-border);border-top-color:var(--color-text);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.popup button{margin-top:var(--space-lg);font-family:var(--font-body);font-size:.875rem;font-weight:500;padding:var(--space-sm) var(--space-lg);background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition)}.popup button:hover{border-color:var(--color-text)}@media(max-width:640px){.header-content,.main{padding-left:var(--space-md);padding-right:var(--space-md)}.main{padding-top:var(--space-2xl);padding-bottom:var(--space-2xl)}.drop-zone{padding:var(--space-2xl)}.drop-text{font-size:1.25rem}.formats-section{grid-template-columns:1fr;gap:var(--space-lg)}.format-divider{display:none}}.format-list::-webkit-scrollbar{width:6px}.format-list::-webkit-scrollbar-track{background:transparent}.format-list::-webkit-scrollbar-thumb{background:var(--color-border-hover);border-radius:3px}.format-list::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}