*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}.tool-selector{display:flex;align-items:center;gap:12px;padding-left:12px;border-left:1px solid rgba(255,255,255,.1)}.tool-label{font-size:.9rem;color:#ffffffb3;font-weight:500}.tool-options{display:flex;gap:6px}.tool-btn{width:36px;height:36px;border-radius:6px;border:1px solid rgba(255,255,255,.1);background-color:#ffffff0d;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1.2rem;transition:all .2s ease;padding:0}.tool-btn:hover{background-color:#ffffff26;transform:translateY(-1px)}.tool-btn.active{background-color:#3b82f633;border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f64d}:root{--color-primary: #3b82f6;--color-primary-dark: #2563eb;--color-primary-light: #60a5fa;--color-secondary: #8b5cf6;--color-accent: #ec4899;--color-success: #10b981;--color-danger: #ef4444;--color-bg: #0f172a;--color-bg-elevated: #1e293b;--color-bg-card: #1e293b;--color-border: #334155;--color-text: #f1f5f9;--color-text-muted: #94a3b8;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1);--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--color-bg);color:var(--color-text);line-height:1.6;min-height:100vh}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-secondary) 100%);padding:var(--spacing-xl) var(--spacing-lg);text-align:center;box-shadow:var(--shadow-lg)}.app-header h1{font-size:2rem;font-weight:700;margin-bottom:var(--spacing-sm);color:#fff}.app-subtitle{color:#ffffffe6;font-size:1rem}.app-main{flex:1;padding:var(--spacing-xl);max-width:1400px;width:100%;margin:0 auto}.controls-section{margin-bottom:var(--spacing-xl)}.url-input-container{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-md)}.url-input-container h2{font-size:1.25rem;margin-bottom:var(--spacing-md);color:var(--color-text)}.input-list{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.input-row{display:flex;gap:var(--spacing-sm);align-items:center}.url-input{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text);font-size:.95rem;transition:all var(--transition-base)}.url-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 3px #3b82f61a}.url-input::placeholder{color:var(--color-text-muted)}.btn-remove{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-danger);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-size:1rem;font-weight:600;transition:all var(--transition-base);min-width:40px}.btn-remove:hover:not(:disabled){background:#dc2626;transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-remove:disabled{opacity:.5;cursor:not-allowed}.button-group{display:flex;gap:var(--spacing-sm)}.btn-add,.btn-list{padding:var(--spacing-sm) var(--spacing-lg);border:none;border-radius:var(--radius-md);font-size:.95rem;font-weight:600;cursor:pointer;transition:all var(--transition-base)}.btn-add{background:var(--color-bg-elevated);color:var(--color-text);border:1px solid var(--color-border)}.btn-add:hover{background:var(--color-border);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-list{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff}.btn-list:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}.url-list-container{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--spacing-lg);box-shadow:var(--shadow-md)}.url-list-container h3{font-size:1.1rem;margin-bottom:var(--spacing-md);color:var(--color-text)}.url-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.url-item{display:flex;align-items:center;gap:var(--spacing-sm);background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:all var(--transition-base);overflow:hidden}.url-item:hover{background:var(--color-border);box-shadow:var(--shadow-md)}.url-item.active{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-color:var(--color-primary);color:#fff}.url-item-button{flex:1;display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:transparent;border:none;cursor:pointer;text-align:left;color:inherit;font-size:.95rem;transition:all var(--transition-base)}.url-item-button:hover{transform:translate(4px)}.url-number{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:#ffffff1a;border-radius:50%;font-weight:700;flex-shrink:0}.url-item.active .url-number{background:#fff3}.url-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.url-delete-btn{padding:var(--spacing-sm);background:transparent;border:none;color:var(--color-text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-base);margin-right:var(--spacing-sm)}.url-delete-btn:hover{color:var(--color-danger);transform:scale(1.1)}.url-item.active .url-delete-btn{color:#fffc}.url-item.active .url-delete-btn:hover{color:#fff}.viewer-section{margin-top:var(--spacing-xl)}.website-viewer{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}.viewer-controls{background:var(--color-bg-elevated);border-bottom:1px solid var(--color-border);padding:var(--spacing-md) var(--spacing-lg);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--spacing-md)}.display-mode-toggle{display:flex;align-items:center;gap:var(--spacing-xs);background:var(--color-bg);padding:var(--spacing-xs);border-radius:var(--radius-md)}.mode-label{font-size:.85rem;color:var(--color-text-muted);font-weight:600;margin-right:var(--spacing-xs)}.display-mode-btn{padding:var(--spacing-sm) var(--spacing-md);background:transparent;color:var(--color-text-muted);border:none;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.display-mode-btn:hover{color:var(--color-text);background:#ffffff0d}.display-mode-btn.active{background:var(--color-secondary);color:#fff}.mode-toggle{display:flex;gap:var(--spacing-xs);background:var(--color-bg);padding:var(--spacing-xs);border-radius:var(--radius-md)}.mode-btn{padding:var(--spacing-sm) var(--spacing-md);background:transparent;color:var(--color-text-muted);border:none;border-radius:var(--radius-sm);font-size:.9rem;font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.mode-btn:hover{color:var(--color-text)}.mode-btn.active{background:var(--color-primary);color:#fff}.color-picker{display:flex;align-items:center;gap:var(--spacing-sm)}.color-picker-label{font-size:.9rem;color:var(--color-text-muted);font-weight:600}.color-options{display:flex;gap:var(--spacing-xs)}.color-option{width:32px;height:32px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all var(--transition-fast);padding:0}.color-option:hover{transform:scale(1.1);box-shadow:var(--shadow-md)}.color-option.active{border-color:var(--color-text);box-shadow:0 0 0 2px var(--color-bg)}.viewer-info{flex:1;min-width:200px}.current-url{color:var(--color-text-muted);font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}.mode-indicator{color:var(--color-accent);font-size:.75rem;font-weight:600}.refresh-screenshot-btn{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);font-size:.85rem;font-weight:600;cursor:pointer;transition:all var(--transition-base)}.refresh-screenshot-btn:hover:not(:disabled){background:var(--color-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.refresh-screenshot-btn:disabled{opacity:.6;cursor:not-allowed}.viewer-placeholder{padding:var(--spacing-2xl);text-align:center;color:var(--color-text-muted);background:var(--color-bg-elevated);border-radius:var(--radius-lg);border:1px dashed var(--color-border);margin-top:var(--spacing-xl)}.screenshot-image{width:100%;object-fit:contain;background:#fff;display:block}.screenshot-loading,.screenshot-error{display:flex;flex-direction:column;align-items:center;justify-content:center;height:400px;background:var(--color-bg-elevated);border-radius:var(--radius-lg);gap:var(--spacing-md);color:var(--color-text-muted)}.loading-spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}.screenshot-error button{padding:var(--spacing-sm) var(--spacing-md);background:var(--color-primary);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-weight:600}@keyframes spin{to{transform:rotate(360deg)}}.viewer-container{position:relative;background:#fff}.website-iframe{width:100%;border:none;display:block}.drawing-canvas{position:absolute;top:0;left:0;width:100%;height:100%;cursor:crosshair;z-index:10}@media(max-width:768px){.app-header h1{font-size:1.5rem}.app-subtitle{font-size:.9rem}.app-main{padding:var(--spacing-md)}.viewer-controls{flex-direction:column;align-items:stretch}.mode-toggle{width:100%}.mode-btn{flex:1}}@media(hover:none)and (pointer:coarse){.url-input,.btn-remove,.btn-add,.btn-list,.url-item,.mode-btn{min-height:44px}}html{scroll-behavior:smooth}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.loading{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}