*,:after,:before{box-sizing:border-box;margin:0;padding:0}:root{--bg-primary:#0a0a0f;--bg-secondary:#12121a;--bg-card:#16161f;--bg-card-hover:#1c1c28;--bg-input:#1a1a26;--bg-overlay:rgba(0,0,0,.6);--border-color:#2a2a3a;--border-hover:#3a3a50;--text-primary:#f0f0f5;--text-secondary:#8888a0;--text-muted:#55556a;--accent:#6366f1;--accent-hover:#818cf8;--accent-dim:rgba(99,102,241,.15);--success:#22c55e;--success-dim:rgba(34,197,94,.15);--warning:#f59e0b;--warning-dim:rgba(245,158,11,.15);--error:#ef4444;--error-dim:rgba(239,68,68,.15);--info:#3b82f6;--info-dim:rgba(59,130,246,.15);--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--font-mono:"JetBrains Mono","Fira Code",monospace;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--shadow-card:0 2px 8px rgba(0,0,0,.3);--shadow-lg:0 8px 32px rgba(0,0,0,.5)}html.light{--bg-primary:#f5f5f7;--bg-secondary:#fff;--bg-card:#fff;--bg-card-hover:#f9f9fb;--bg-input:#f0f0f3;--bg-overlay:rgba(0,0,0,.2);--border-color:#e0e0e6;--border-hover:#c8c8d0;--text-primary:#1a1a2e;--text-secondary:#6b6b80;--text-muted:#9a9ab0;--accent:#5b5ef0;--accent-hover:#4a4de0;--accent-dim:rgba(91,94,240,.1);--success:#16a34a;--success-dim:rgba(22,163,74,.1);--warning:#d97706;--warning-dim:rgba(217,119,6,.1);--error:#dc2626;--error-dim:rgba(220,38,38,.1);--info:#2563eb;--info-dim:rgba(37,99,235,.1);--shadow-card:0 1px 4px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04);--shadow-lg:0 4px 16px rgba(0,0,0,.08)}html.light .btn-google{border:1px solid var(--border-color)}html.light .card,html.light .project-row{box-shadow:var(--shadow-card)}body,html{min-height:100vh;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background .2s ease,color .2s ease}a{color:var(--accent);text-decoration:none}a:hover{color:var(--accent-hover)}.app-layout{display:flex;flex-direction:column;min-height:100vh}.app-header{justify-content:space-between;padding:var(--space-md) var(--space-xl);border-bottom:1px solid var(--border-color);background:var(--bg-secondary);position:-webkit-sticky;position:sticky;top:0;z-index:100;transition:background .2s ease,border-color .2s ease}.app-header,.app-logo{display:flex;align-items:center}.app-logo{gap:var(--space-sm);font-size:18px;font-weight:700;color:var(--text-primary)}.app-logo-icon{width:28px;height:28px;background:var(--accent);border-radius:var(--radius-sm);justify-content:center;font-size:14px}.app-logo-icon,.app-nav{display:flex;align-items:center}.app-nav{gap:var(--space-md)}.app-main{flex:1 1;padding:var(--space-xl);max-width:1200px;margin:0 auto;width:100%}.btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:10px 20px;border:none;border-radius:var(--radius-sm);font-family:var(--font-sans);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease;white-space:nowrap}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-color)}.btn-secondary:hover{background:var(--bg-card-hover);border-color:var(--border-hover)}.btn-ghost{background:transparent;color:var(--text-secondary)}.btn-ghost:hover{color:var(--text-primary);background:var(--bg-card)}.btn-sm{padding:6px 12px;font-size:13px}.btn-icon{padding:8px;border-radius:var(--radius-sm)}.view-toggle{display:inline-flex;border:1px solid var(--border-color);border-radius:var(--radius-sm);overflow:hidden}.view-toggle-btn{display:flex;align-items:center;justify-content:center;width:36px;height:34px;background:var(--bg-card);border:none;color:var(--text-muted);cursor:pointer;transition:all .15s ease;font-size:16px}.view-toggle-btn:hover{background:var(--bg-card-hover);color:var(--text-secondary)}.view-toggle-btn.active{background:var(--accent-dim);color:var(--accent)}.view-toggle-btn+.view-toggle-btn{border-left:1px solid var(--border-color)}.theme-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:16px;transition:all .15s ease}.theme-toggle:hover{background:var(--bg-card-hover);color:var(--text-primary);border-color:var(--border-hover)}.card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-lg);transition:all .2s ease}.card:hover{border-color:var(--border-hover)}.card-clickable{cursor:pointer}.card-clickable:hover{background:var(--bg-card-hover);box-shadow:var(--shadow-card)}.project-list{display:flex;flex-direction:column;gap:2px}.project-row{display:flex;align-items:center;gap:var(--space-lg);padding:var(--space-md) var(--space-lg);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:all .15s ease;text-decoration:none;color:inherit}.project-row:hover{background:var(--bg-card-hover);border-color:var(--border-hover)}.project-row-name{font-weight:600;font-size:14px;color:var(--text-primary);min-width:180px}.project-row-url{font-size:13px;color:var(--text-muted);flex:1 1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-row-chips{display:flex;gap:var(--space-xs);flex-shrink:0}.project-row-date{font-size:12px;color:var(--text-muted);flex-shrink:0;min-width:80px;text-align:right}.form-group{margin-bottom:var(--space-lg)}.form-label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:var(--space-sm)}.form-input{width:100%;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;transition:border-color .15s ease}.form-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.form-input::placeholder{color:var(--text-muted)}.form-hint{font-size:12px;color:var(--text-muted);margin-top:var(--space-xs)}.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:12px;font-weight:500}.badge-success{background:var(--success-dim);color:var(--success)}.badge-warning{background:var(--warning-dim);color:var(--warning)}.badge-error{background:var(--error-dim);color:var(--error)}.badge-info{background:var(--info-dim);color:var(--info)}.badge-muted{background:rgba(85,85,106,.2);color:var(--text-muted)}.grid-2{grid-template-columns:repeat(2,1fr);grid-gap:var(--space-lg)}.grid-2,.grid-3{display:grid;gap:var(--space-lg)}.grid-3{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));grid-gap:var(--space-lg)}.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-xl)}.page-title{font-size:24px;font-weight:700}.page-subtitle{color:var(--text-secondary);margin-top:var(--space-xs)}.snippet-block{position:relative;background:var(--bg-primary);padding:var(--space-md);font-family:var(--font-mono);font-size:13px;line-height:1.7;overflow-x:auto}.snippet-block,.snippet-copy-btn{border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary)}.snippet-copy-btn{position:absolute;top:var(--space-sm);right:var(--space-sm);padding:4px 10px;background:var(--bg-card);font-size:12px;cursor:pointer}.snippet-copy-btn:hover{background:var(--bg-card-hover);color:var(--text-primary)}.steps-container{flex-direction:column}.step,.steps-container{display:flex;gap:var(--space-md)}.step{padding:var(--space-md);border-radius:var(--radius-sm);background:var(--bg-card);border:1px solid var(--border-color)}.step,.step-icon{align-items:center}.step-icon{width:32px;height:32px;border-radius:50%;display:flex;justify-content:center;flex-shrink:0;font-size:14px}.step-pending .step-icon{background:rgba(85,85,106,.2);color:var(--text-muted)}.step-active .step-icon{background:var(--accent-dim);color:var(--accent);animation:pulse 1.5s infinite}.step-done .step-icon{background:var(--success-dim);color:var(--success)}.step-error .step-icon{background:var(--error-dim);color:var(--error)}.step-content{flex:1 1}.step-label{font-weight:500;font-size:14px}.step-detail{font-size:12px;color:var(--text-muted);margin-top:2px}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.integration-card{position:relative;overflow:hidden}.integration-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-md)}.integration-title{gap:var(--space-sm);font-weight:600}.integration-icon,.integration-title{display:flex;align-items:center;font-size:16px}.integration-icon{width:24px;height:24px;justify-content:center}.integration-detail{display:flex;justify-content:space-between;padding:var(--space-sm) 0;border-bottom:1px solid var(--border-color);font-size:13px}.integration-detail:last-child{border-bottom:none}.integration-detail-label{color:var(--text-muted)}.integration-detail-value{color:var(--text-primary);font-family:var(--font-mono);font-size:12px}.login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:var(--space-xl)}.login-card{text-align:center;max-width:400px;width:100%}.login-card h1{font-size:28px;margin-bottom:var(--space-sm)}.login-card p{color:var(--text-secondary);margin-bottom:var(--space-xl)}.btn-google{width:100%;padding:12px;font-size:15px;background:#fff;color:#333;border-radius:var(--radius-sm);font-weight:500;display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}.btn-google:hover{background:#f5f5f5}.spinner{width:20px;height:20px;border:2px solid var(--border-color);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}.loading-page{display:flex;align-items:center;justify-content:center;min-height:100vh}.empty-state{text-align:center;padding:var(--space-2xl);color:var(--text-muted)}.empty-state-icon{font-size:48px;margin-bottom:var(--space-md)}.empty-state h3{color:var(--text-secondary);margin-bottom:var(--space-sm)}.user-menu{display:flex;align-items:center;gap:var(--space-sm)}.user-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover}@media (max-width:768px){.grid-2,.grid-3{grid-template-columns:1fr}.app-main{padding:var(--space-md)}.page-header{flex-direction:column;align-items:flex-start;gap:var(--space-md)}.project-row{flex-wrap:wrap;gap:var(--space-sm)}.project-row-url{width:100%}.project-row-date{display:none}}.tags-section{margin-top:var(--space-xl)}.tags-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg)}.tags-section-title{font-size:18px;font-weight:600;display:flex;align-items:center;gap:var(--space-sm)}.tags-count{font-size:13px;font-weight:400;color:var(--text-muted)}.tags-grid{display:flex;flex-direction:column;gap:var(--space-sm)}.tag-card{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-sm);transition:all .15s ease}.tag-card:hover{border-color:var(--border-hover);background:var(--bg-card-hover)}.tag-card-header{display:flex;align-items:center;gap:var(--space-md)}.tag-card-icon{font-size:18px;width:32px;height:32px;justify-content:center;flex-shrink:0}.tag-card-icon,.tag-card-info{display:flex;align-items:center}.tag-card-info{gap:var(--space-sm)}.tag-card-name{font-size:14px;font-weight:500;color:var(--text-primary)}.tag-type-badge{font-weight:500;white-space:nowrap}.tag-paused-badge,.tag-type-badge{font-size:11px;padding:2px 8px;border-radius:4px}.tag-paused-badge{color:var(--warning);background:var(--warning-dim)}.tag-card{cursor:pointer;flex-direction:column}.tag-card-top{display:flex;align-items:center;justify-content:space-between;width:100%}.tag-expand-icon{font-size:10px;color:var(--text-muted);transition:transform .2s ease}.tag-card-expanded{border-color:var(--border-hover)}.tag-card-details{width:100%;margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid var(--border-color);display:flex;flex-direction:column;gap:var(--space-sm)}.tag-detail-row{display:flex;align-items:flex-start;gap:var(--space-md);font-size:13px}.tag-detail-label{font-weight:500;color:var(--text-muted);min-width:110px;flex-shrink:0;font-size:12px}.tag-detail-value{color:var(--text-primary);word-break:break-all}.tag-detail-value code{font-size:12px;background:var(--bg-tertiary);padding:1px 6px;border-radius:3px;font-family:var(--font-mono)}.tag-detail-params{margin-top:var(--space-sm)}.tag-param-row{display:flex;gap:var(--space-md);padding:var(--space-xs) 0;font-size:12px;border-bottom:1px solid var(--border-color)}.tag-param-row:last-child{border-bottom:none}.tag-param-key{font-weight:500;color:var(--text-secondary);min-width:110px;flex-shrink:0}.tag-param-value{color:var(--text-primary);word-break:break-all}.tag-param-value code{font-size:12px;padding:1px 6px;border-radius:3px}.tag-html-preview,.tag-param-value code{background:var(--bg-tertiary);font-family:var(--font-mono)}.tag-html-preview{font-size:11px;padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);overflow-x:auto;max-height:200px;overflow-y:auto;white-space:pre-wrap;word-break:break-all;margin:0;line-height:1.5}.modal-overlay{position:fixed;inset:0;background:var(--bg-overlay);display:flex;align-items:center;justify-content:center;z-index:200;padding:var(--space-xl);animation:fadeIn .15s ease}.modal-content{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:var(--space-xl);max-width:560px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:slideUp .2s ease}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg)}.modal-title{font-size:18px;font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.template-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:var(--space-md);gap:var(--space-md)}.template-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-sm);padding:var(--space-lg);background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;transition:all .15s ease;text-align:left;font-family:var(--font-sans)}.template-card:hover{border-color:var(--border-hover);background:var(--bg-card-hover);box-shadow:var(--shadow-card)}.template-icon{width:36px;height:36px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:18px}.template-label{font-size:14px;font-weight:600;color:var(--text-primary)}.template-desc{font-size:12px;color:var(--text-muted);line-height:1.4}@media (max-width:768px){.template-grid{grid-template-columns:1fr}.tag-card-info{flex-direction:column;align-items:flex-start;gap:4px}}