:root{--bg-primary: #000000;--bg-secondary: #18181b;--bg-tertiary: #27272a;--text-primary: #e4e4e7;--text-secondary: #a1a1aa;--text-muted: #71717a;--text-dim: #52525b;--text-ghost: #3f3f46;--accent: #34d399;--accent-dim: rgba(52, 211, 153, .1);--accent-subtle: rgba(52, 211, 153, .05);--border-default: #27272a;--border-strong: #3f3f46;--border-accent: #34d399;--error: #ef4444;--font-mono: "IBM Plex Mono", monospace;--radius-sm: 2px;--radius-md: 4px;--filter-height: 38px;--filter-emoji-size: 18px;--filter-padding-x: 12px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-mono);font-size:13px;color:var(--text-primary);background:var(--bg-primary);line-height:1.5;-webkit-font-smoothing:antialiased}button{font-family:inherit;cursor:pointer}input{font-family:inherit}#app{min-height:100%;display:flex;flex-direction:column}.header{position:sticky;top:0;z-index:50;background:#000000f2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-default)}.header__top{display:flex;align-items:center;gap:12px;padding:16px 24px}.header__logo{font-size:18px;font-weight:600;letter-spacing:1px;color:var(--text-primary);white-space:nowrap;cursor:pointer;transition:color .15s ease-out}.header__logo--active{color:var(--accent)}.header__data-btn{width:32px;height:32px;background:none;border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text-muted);font-family:var(--font-mono);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease-out;flex-shrink:0}.header__data-btn:hover{color:var(--accent);border-color:var(--accent)}.header__action-btn{width:32px;height:32px;background:none;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease-out;flex-shrink:0;margin-left:auto}.header__action-btn:hover{border-color:var(--accent)}.header__action-btn--confirm{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.header__action-btn--clear{color:var(--text-muted);font-size:18px;font-weight:600}.header__action-btn--add{color:var(--accent);font-size:20px;font-weight:600}.header__edit-hint{flex:1;color:var(--accent);font-size:12px;font-weight:600;padding:8px 14px}.input-wrap{flex:1;border-radius:var(--radius-md);padding:8px 14px;border:1px solid transparent;background:transparent;transition:all .15s ease-out;cursor:text}.input-wrap--expanded{background:var(--accent-subtle);border-color:var(--border-default)}.input-wrap__prompt{color:var(--accent);font-size:12px;font-weight:600;margin-bottom:2px}.input-wrap__field{width:100%;background:transparent;border:none;outline:none;color:var(--text-primary);font-size:14px}.input-wrap__field::placeholder{color:var(--text-ghost);font-size:12px}.input-wrap__hint{color:var(--text-dim);font-size:11px;margin-top:2px}.input-wrap__collapsed{color:var(--text-ghost);font-size:12px}@media(max-width:640px){.header__top{padding:12px;gap:8px}.header__logo{font-size:14px}}.tag-bar{display:flex;gap:8px;padding:10px 24px;border-top:1px solid var(--border-default);overflow-x:auto;scrollbar-width:none}.tag-bar::-webkit-scrollbar{display:none}.tag-chip{height:var(--filter-height);min-width:var(--filter-height);padding:0 var(--filter-padding-x);border-radius:var(--radius-md);border:1px solid transparent;background:transparent;color:var(--text-muted);font-size:var(--filter-emoji-size);cursor:pointer;transition:all .12s ease-out;flex-shrink:0;display:flex;align-items:center;justify-content:center}.tag-chip:hover{color:var(--text-primary)}.tag-chip--active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.tag-bar--disabled{opacity:.3;pointer-events:none}.tag-bar--edit-mode{border-left:3px solid var(--accent);background:var(--accent-subtle)}@media(max-width:640px){.tag-bar{padding:8px 12px;gap:6px}.tag-chip{height:34px;min-width:34px;font-size:16px}}.gif-card{position:relative;border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--bg-secondary);overflow:hidden;cursor:pointer;transition:border-color .15s ease-out;break-inside:avoid;margin-bottom:6px}.gif-card:hover{border-color:var(--accent)}.gif-card__image{width:100%;height:auto;display:block}.gif-card__badge{position:absolute;bottom:6px;left:6px;width:28px;height:28px;border-radius:var(--radius-md);background:#000c;border:1px solid var(--border-strong);font-size:14px;cursor:pointer;transition:transform .1s ease-out;display:flex;align-items:center;justify-content:center}.gif-card__badge:hover{transform:scale(1.15)}.gif-card__delete{position:absolute;bottom:6px;right:6px;width:28px;height:28px;background:#000c;border:1px solid var(--border-strong);border-radius:var(--radius-md);color:var(--text-muted);font-size:14px;cursor:pointer;opacity:0;transition:opacity .15s ease-out,transform .1s ease-out;display:flex;align-items:center;justify-content:center}.gif-card:hover .gif-card__delete{opacity:1}.gif-card__delete:hover{transform:scale(1.15)}.gif-card--selected{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.gif-card--selected:after{content:"✓";position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#000;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}.gif-card--about{display:block;text-decoration:none}.gif-card__about-label{position:absolute;bottom:0;left:0;right:0;padding:8px 10px;background:#000000d9;color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.5px}.gif-grid{padding:12px 24px;column-gap:6px;columns:5}@media(max-width:1024px){.gif-grid{columns:3}}@media(max-width:640px){.gif-grid{columns:2;padding:12px}}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%);padding:8px 16px;background:var(--bg-secondary);color:var(--accent);border:1px solid var(--accent);border-radius:var(--radius-sm);font-size:12px;z-index:1000;pointer-events:none;opacity:0;transition:opacity .15s ease-out}.toast--visible{opacity:1}.toast--warning{color:var(--error);border-color:var(--error)}.confirm-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:100;display:flex;align-items:center;justify-content:center}.confirm-dialog{background:var(--bg-secondary);border:1px solid var(--border-strong);border-radius:var(--radius-md);padding:24px;min-width:260px}.confirm-dialog__message{font-size:13px;color:var(--text-secondary);margin-bottom:20px}.confirm-dialog__actions{display:flex;gap:12px;justify-content:flex-end}.confirm-dialog__cancel{background:none;border:1px solid var(--border-strong);color:var(--text-muted);padding:6px 16px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.confirm-dialog__delete{background:none;border:1px solid var(--error);color:var(--error);padding:6px 16px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.empty-state{column-span:all;text-align:center;padding:120px 24px 80px;color:var(--text-ghost)}.empty-state__title{font-size:14px;letter-spacing:.5px}.empty-state__prompt{color:var(--accent);font-weight:600}.empty-state__cursor{display:inline-block;width:7px;height:14px;background:var(--accent);margin-left:2px;vertical-align:text-bottom;animation:blink 1s step-end infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.empty-state__hint{font-size:12px;margin-top:12px;color:var(--text-dim)}.preview-card{border-radius:var(--radius-md);border:1px solid var(--accent);background:#0a0a0a;overflow:hidden;break-inside:avoid;margin-bottom:6px}.preview-card__image{width:100%;height:auto;display:block;opacity:.85}.preview-card__bar{padding:8px;border-top:1px solid var(--border-default);display:flex;align-items:center;justify-content:space-between}.preview-card__tag{font-size:12px;color:var(--accent)}.preview-card__loading{height:120px;background:var(--bg-tertiary);animation:preview-pulse 1.5s ease-in-out infinite}.preview-card__error{height:80px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:12px;font-family:var(--font-mono)}.preview-card__confirm{padding:4px 12px;border-radius:var(--radius-sm);background:var(--accent);color:#000;border:none;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;transition:opacity .15s ease-out}.preview-card__confirm:disabled{opacity:.3;cursor:not-allowed}@keyframes preview-pulse{0%,to{opacity:.4}50%{opacity:.8}}.data-modal-overlay{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;z-index:100;justify-content:center;align-items:center;padding:24px}.data-modal-overlay--open{display:flex}.data-modal{background:var(--bg-secondary);border:1px solid var(--border-strong);border-radius:var(--radius-md);width:100%;max-width:560px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}.data-modal__header{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border-default);gap:12px}.data-modal__title{font-size:13px;color:var(--text-secondary);flex:1}.data-modal__tabs{display:flex;gap:4px}.data-modal__tab{padding:4px 12px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:none;color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:all .12s ease-out}.data-modal__tab--active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.data-modal__close{width:28px;height:28px;background:none;border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--text-muted);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color .15s ease-out}.data-modal__close:hover{color:var(--text-primary)}.data-modal__body{padding:16px 20px;overflow-y:auto;flex:1}.data-modal__textarea{width:100%;min-height:200px;max-height:300px;background:var(--bg-primary);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:12px;color:var(--text-primary);font-family:var(--font-mono);font-size:12px;resize:vertical;outline:none;transition:border-color .15s ease-out}.data-modal__textarea:focus{border-color:var(--border-strong)}.data-modal__textarea--modified{border-color:var(--accent)}.data-modal__stats{font-size:12px;color:var(--text-dim);margin-top:10px}.data-modal__error{font-size:12px;color:var(--error);margin-top:8px}.data-modal__actions{display:flex;gap:8px;margin-top:14px}.data-modal__btn{padding:6px 16px;border-radius:var(--radius-sm);background:none;border:1px solid var(--border-strong);color:var(--text-muted);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;transition:all .15s ease-out}.data-modal__btn:hover{color:var(--text-primary)}.data-modal__btn--accent{border-color:var(--accent);color:var(--accent)}.data-modal__btn--accent:hover{background:var(--accent-dim)}.data-modal__btn--disabled{opacity:.4;pointer-events:none}.data-modal__drop-hint{font-size:12px;color:var(--text-dim);margin-bottom:10px}.data-modal__file-btn{padding:4px 12px;border-radius:var(--radius-sm);background:none;border:1px solid var(--border-strong);color:var(--text-muted);font-size:11px;cursor:pointer;margin-top:10px}.data-modal__file-btn:hover{color:var(--text-primary)}.data-modal__preview{font-size:12px;color:var(--accent);margin-top:10px}@media(max-width:640px){.data-modal-overlay{padding:12px}.data-modal__header,.data-modal__body{padding:12px 14px}.data-modal__textarea{min-height:150px}}