:root{--font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;--font-size-base: 16px;--font-size-sm: 14px;--font-size-lg: 1.75rem;--line-height-base: 1.5;--line-height-heading: 1.2;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--color-text-primary: #1a1a1a;--color-text-secondary: #666;--color-text-muted: #999;--color-link: #444;--color-link-hover: #888;--color-primary: #007acc;--color-primary-hover: #005a9e;--color-primary-active: #004785;--color-primary-disabled: #a9a9a9;--color-success: #28a745;--color-danger: #dc3545;--color-danger-hover: #c82333;--color-border: #ddd;--color-border-light: #aeaeae;--color-background: #f5f5f5;--color-background-secondary: #fafafa;--color-background-tertiary: #f8f9fa;--color-background-hover: #e9e9e9;--color-background-active: #ddd;--spacing-xs: 6px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 20px;--color-border-hover: #ccc;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--touch-target-min: 44px;--transition-fast: .2s;--transition-medium: .3s}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;width:100%}body{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:var(--line-height-base);color:var(--color-text-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-semibold);line-height:var(--line-height-heading)}h1{font-size:var(--font-size-lg);margin-bottom:var(--spacing-md)}a{color:var(--color-link);transition:color var(--transition-fast)}a:hover{color:var(--color-link-hover)}hr{border-color:var(--color-text-muted)}button{font:inherit;border:none;background:none;cursor:pointer;min-height:var(--touch-target-min);min-width:var(--touch-target-min)}input,textarea{font:inherit;min-height:var(--touch-target-min)}input.error{border:1px solid var(--color-danger)!important}@media (max-width: 768px){body{font-size:var(--font-size-sm)}h1{margin-bottom:var(--spacing-lg)}}.main-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;padding:var(--spacing-md)}.content-container{max-width:36rem;text-align:center;padding:0 var(--spacing-lg);width:100%}.url-container{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-md)}@media (max-width: 768px){.main-container{padding:var(--spacing-xl)}.content-container{max-width:100%;padding:0 var(--spacing-xl)}}@media (max-width: 480px){.main-container{padding:var(--spacing-lg)}.content-container{padding:0 var(--spacing-lg)}.url-container{flex-direction:column;gap:var(--spacing-md);margin-top:var(--spacing-lg)}}.input{padding:10px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);font-size:var(--font-size-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #007acc1a}.input--full-width{width:100%}.url-input{padding:10px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);font-size:var(--font-size-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);width:100%}.url-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #007acc1a}.form-input{padding:10px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);font-size:var(--font-size-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.form-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #007acc1a}.form-input--full-width{padding:10px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-background);font-size:var(--font-size-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);width:100%;margin-bottom:var(--spacing-md)}.form-input--full-width:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #007acc1a}.setting-input{padding:10px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:#fff;font-size:var(--font-size-sm);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);width:100%}.setting-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px #007acc1a}@media (max-width: 480px){.input,.url-input,.form-input,.form-input--full-width,.setting-input{padding:14px var(--spacing-lg);font-size:var(--font-size-base);border-radius:var(--radius-lg)}.form-input--full-width{margin-bottom:var(--spacing-lg)}}.btn{padding:10px var(--spacing-xl);border-radius:var(--radius-md);font-weight:var(--font-weight-medium);transition:all var(--transition-fast);cursor:pointer;border:1px solid;font-size:var(--font-size-sm);white-space:nowrap}.btn--primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary);width:100%}.btn--primary:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.btn--primary:active{background:var(--color-primary-active);border-color:var(--color-primary-active)}.btn--secondary{background:var(--color-background);color:var(--color-text-primary);border-color:var(--color-border);flex:1}.btn--secondary:hover{background:var(--color-background-hover);border-color:var(--color-border-hover)}.btn--secondary:active{background:var(--color-background-active)}.btn--danger{background:var(--color-danger);border-color:var(--color-danger);color:#fff}.btn--danger:hover{background:var(--color-danger-hover);border-color:var(--color-danger-hover)}.copy-button{padding:10px;color:var(--color-text-secondary);border-radius:var(--radius-md);transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;flex-shrink:0}.copy-button:hover{background:#f0f0f0}.copy-button:active{background:#e5e5e5}.copy-button.copied{background:var(--color-success)}.copy-button img{width:20px;height:20px}@media (max-width: 480px){.btn{padding:var(--spacing-lg) 24px;font-size:var(--font-size-base);border-radius:var(--radius-lg)}.btn--secondary{padding:14px var(--spacing-xl)}.copy-button{padding:14px;border-radius:var(--radius-lg);width:100%}.copy-button img{width:24px;height:24px}}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}.edit-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media (max-width: 768px){.form-row{grid-template-columns:1fr;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.edit-buttons{grid-template-columns:1fr;gap:var(--spacing-md);margin-top:var(--spacing-md)}}.settings-section{margin-top:var(--spacing-lg);text-align:left;width:100%}.settings-section h2{margin-bottom:var(--spacing-lg);text-align:center;color:var(--color-text-primary)}.setting-group{margin-bottom:14px;padding:14px;border:1px solid var(--color-border-light);border-radius:var(--radius-lg);background:var(--color-background-secondary);position:relative}.setting-group label{display:block;margin-bottom:var(--spacing-xs);font-weight:var(--font-weight-medium);color:var(--color-text-primary);font-size:.95em}.collapsible-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:var(--spacing-md) var(--spacing-lg);background:var(--color-background-tertiary);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);margin-bottom:var(--spacing-md);-webkit-user-select:none;user-select:none;transition:background-color var(--transition-fast)}.collapsible-header:hover{background:#e9ecef}.collapsible-header span:first-child{font-weight:var(--font-weight-medium);color:var(--color-text-primary)}.collapse-icon{font-size:var(--font-size-sm);color:var(--color-text-secondary);transition:transform var(--transition-fast)}.collapsible-content{overflow:hidden;transition:max-height var(--transition-medium),opacity var(--transition-medium);max-height:2000px;opacity:1}.collapsible-content.collapsed{max-height:0;opacity:0;margin-bottom:0}.custom-bangs-list{margin-bottom:14px}.no-bangs{color:var(--color-text-secondary);font-style:italic;text-align:center;padding:var(--spacing-lg)}.custom-bang-item{display:flex;justify-content:space-between;align-items:flex-start;padding:14px;margin-bottom:var(--spacing-sm);background:#fff;border:1px solid var(--color-border-light);border-radius:var(--radius-lg);gap:var(--spacing-md)}.bang-info{flex:1;min-width:0}.bang-info strong{color:var(--color-primary)}.bang-url{font-size:11px;color:var(--color-text-secondary);margin-top:3px;word-break:break-all;line-height:1.3}.bang-actions{display:flex;align-items:flex-start;gap:var(--spacing-sm)}.action-display{display:flex;gap:var(--spacing-sm);align-items:stretch}.action-display .primary-button{width:auto;flex:1}.action-display .delete-bang-btn{flex:1}.bang-edit{width:100%}.bang-form{padding:14px;background:#fff;border-radius:var(--radius-lg);border:1px solid var(--color-border-light)}.custom-bang-item .bang-form{border:none;background:transparent;padding:0;border-radius:0}.bang-form h4{margin-bottom:10px;color:var(--color-text-primary)}.import-export-section{margin-top:var(--spacing-sm)}.status-message{margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);display:none}.status-message.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.status-message.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.hidden{display:none!important}@media (max-width: 768px){.settings-section{margin-top:var(--spacing-xl)}.setting-group{padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);border-radius:var(--radius-xl)}.custom-bang-item{flex-direction:column;align-items:stretch;gap:var(--spacing-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-md)}.bang-actions{width:100%}.action-display{width:100%;justify-content:flex-end}.bang-form{padding:var(--spacing-lg);border-radius:var(--radius-xl)}}@media (max-width: 480px){.setting-group label{font-size:1rem;margin-bottom:10px}.setting-group,.custom-bang-item,.bang-form{padding:var(--spacing-lg) var(--spacing-md);border-radius:var(--radius-lg)}.bang-url{font-size:13px;line-height:1.5;margin-top:4px}.status-message{padding:var(--spacing-md) var(--spacing-lg);font-size:15px}}.footer{position:fixed;bottom:var(--spacing-lg);left:0;right:0;text-align:center;font-size:var(--font-size-sm);color:var(--color-text-secondary)}.footer a{color:var(--color-text-secondary);text-decoration:none;font-weight:var(--font-weight-medium)}.footer a:hover{color:var(--color-text-primary)}.github-link{text-align:center;margin-top:var(--spacing-xl);font-size:var(--font-size-sm)}.github-link a{color:var(--color-text-secondary);text-decoration:none;font-weight:var(--font-weight-medium);padding:var(--spacing-xs) 10px;border-radius:var(--radius-sm);transition:all var(--transition-fast);display:inline-block}.github-link a:hover{color:var(--color-text-primary);background:var(--color-background)}@media (max-width: 480px){.github-link{margin-top:24px;font-size:15px}.github-link a{padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-lg)}}@media (max-width: 768px){body{overflow-x:hidden}*{max-width:100%}button:focus,input:focus,select:focus{outline:2px solid var(--color-primary);outline-offset:2px}}#autocomplete-list{position:absolute;top:100%;left:0;right:0;background:#fff;border:1px solid var(--color-border);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md);max-height:200px;overflow-y:auto;z-index:1000;box-shadow:0 2px 8px #0000001a}.autocomplete-item{padding:var(--spacing-md);cursor:pointer;font-size:var(--font-size-sm);transition:background-color var(--transition-fast)}.autocomplete-item:hover{background:var(--color-background-tertiary)}.autocomplete-item:last-child{border-radius:0 0 var(--radius-md) var(--radius-md)}@media (max-width: 480px){.autocomplete-item{padding:var(--spacing-lg);font-size:var(--font-size-base)}}@media (prefers-color-scheme: dark){#autocomplete-list{background:#2a2a2a;border-color:var(--color-border);box-shadow:0 2px 8px #0000004d}.autocomplete-item{color:#ddd}.autocomplete-item:hover{background:#333}}.primary-button{padding:10px var(--spacing-xl);background:var(--color-primary);color:#fff;border:1px solid var(--color-primary);border-radius:var(--radius-md);font-weight:var(--font-weight-medium);transition:all var(--transition-fast);cursor:pointer;font-size:var(--font-size-sm);width:100%;min-height:var(--touch-target-min)}.primary-button:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover)}.primary-button:active{background:var(--color-primary-active);border-color:var(--color-primary-active)}button:disabled{background:var(--color-primary-disabled);border-color:var(--color-primary-disabled)}.secondary-button{padding:10px var(--spacing-xl);background:var(--color-background);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);font-weight:var(--font-weight-medium);transition:all var(--transition-fast);cursor:pointer;flex:1;font-size:var(--font-size-sm)}.secondary-button:hover{background:var(--color-background-hover);border-color:var(--color-border-hover)}.secondary-button:active{background:var(--color-background-active)}.delete-bang-btn{padding:10px var(--spacing-xl);font-size:var(--font-size-sm);border-radius:var(--radius-md);border:1px solid;cursor:pointer;font-weight:var(--font-weight-medium);transition:all var(--transition-fast);white-space:nowrap;background:var(--color-danger);border-color:var(--color-danger);color:#fff;min-height:var(--touch-target-min);display:flex;align-items:center;justify-content:center;text-align:center}.delete-bang-btn:hover{background:var(--color-danger-hover);border-color:var(--color-danger-hover)}.full-width{width:100%}@media (max-width: 480px){.primary-button,.secondary-button{padding:var(--spacing-lg) 24px;font-size:var(--font-size-base);border-radius:var(--radius-lg)}.secondary-button{padding:14px var(--spacing-xl)}.delete-bang-btn{padding:var(--spacing-md) var(--spacing-lg);font-size:var(--font-size-sm);border-radius:var(--radius-lg)}}@media (prefers-color-scheme: dark){:root{--color-text-primary: #ddd;--color-text-secondary: #999;--color-text-muted: #666;--color-link: #a9a9a9;--color-link-hover: #888;--color-border: #444;--color-border-light: #333;--color-border-hover: #666;--color-background: #191919;--color-background-secondary: #1a1a1a;--color-background-tertiary: #2a2a2a;--color-background-hover: #444;--color-background-active: #555}#app{background-color:#131313}.copy-button img{filter:invert(1)}.copy-button:hover{background:#222}.copy-button:active{background:#333}.setting-input,.form-input,.form-input--full-width,.url-input{background:#2a2a2a;color:#ddd}.custom-bang-item{background:#2a2a2a}.collapsible-header:hover{background:#333}.bang-info strong{color:#4da6ff}.bang-form{background:#2a2a2a}.github-link a:hover{color:#eee;background:#2a2a2a}.footer,.footer a{color:var(--color-text-secondary)}.footer a:hover{color:#ccc}}