:root{--demo-bg:#1a1c1e;--demo-surface:#25282c;--demo-border:#3a3e44;--demo-text:#e4e6e9;--demo-muted:#8b9098;--demo-accent:#5b9cf0;--browser-bg:#fff;--browser-bar:#e8eaed;--browser-tab-active:#fff;--ext-panel-bg:#f5f5f7;--ext-panel-border:#e5e5e7;--ext-text:#1a1a1a;--ext-muted:#6e6e73}*,:before,:after{box-sizing:border-box}body{color:var(--demo-text);background:var(--demo-bg);min-height:100vh;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px}.demo-page{max-width:1200px;margin:0 auto;padding:24px 16px 48px}.demo-header{text-align:center;margin-bottom:24px}.demo-header h1{margin:0 0 8px;font-size:1.5rem;font-weight:600}.demo-header p{color:var(--demo-muted);margin:0;font-size:.95rem}.browser-frame{background:var(--demo-surface);border:1px solid var(--demo-border);border-radius:12px;overflow:hidden;box-shadow:0 20px 50px #0006}.browser-chrome{background:var(--browser-bar);flex-direction:column;gap:0;padding:12px 16px;display:flex}.browser-dots{gap:8px;margin-bottom:16px;display:flex}.dot{border-radius:50%;width:12px;height:12px}.dot-red{background:#ff5f57}.dot-yellow{background:#febc2e}.dot-green{background:#28c840}.browser-tabs{background:#0000000f;border-radius:8px 8px 0 0;align-items:flex-end;gap:2px;padding:0 8px 0 0;display:flex;overflow-x:auto}.browser-tab{color:var(--ext-muted);cursor:default;background:0 0;border:none;border-radius:8px 8px 0 0;align-items:center;gap:8px;min-width:120px;max-width:180px;padding:8px 14px;font-size:12px;display:flex}.browser-tab.active{background:var(--browser-tab-active);color:var(--ext-text);box-shadow:0 -1px 0 0 var(--ext-panel-border)}.tab-favicon{flex-shrink:0;font-size:14px}.tab-title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.browser-tab-add{min-width:36px;max-width:36px;color:var(--ext-muted);justify-content:center;font-size:18px}.browser-address-bar{background:var(--browser-tab-active);color:var(--ext-muted);border-radius:8px;align-items:center;gap:8px;margin:12px 8px 0;padding:10px 14px;font-size:13px;display:flex}.address-lock{font-size:12px}.address-url{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.browser-content{background:var(--browser-bg);min-height:420px;display:flex}.browser-pages{flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.browser-page{background:#fafafa;flex:1;min-width:0;max-height:480px;display:none;overflow-y:auto}.browser-page.active{flex-direction:column;display:flex}.browser-page-blank .browser-page-blank-inner{min-height:200px;color:var(--ext-muted);justify-content:center;align-items:center;font-size:14px;display:flex}.fake-page-header{background:#fff;border-bottom:1px solid #eee;padding:20px 24px}.fake-page-header h2{color:#1a1a1a;margin:0 0 4px;font-size:1.5rem;font-weight:600}.fake-page-header p{color:#666;margin:0;font-size:14px}.fake-gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin:0;padding:20px 24px;list-style:none;display:grid}.fake-gallery-item{aspect-ratio:1;background:#e8e8e8;border-radius:8px;overflow:hidden}.fake-gallery-item img{object-fit:cover;width:100%;height:100%;display:block}.browser-page-generator{background:#2d2d2d;max-height:none;display:none}.browser-page-generator.active{display:flex}.gen-page-layout{flex:1;min-height:0;display:flex}.gen-sidebar{color:#ccc;background:#252526;width:220px;min-width:220px;padding:12px 10px;font-size:12px;overflow-y:auto}.gen-sidebar-title{letter-spacing:.08em;color:#fff;margin:0 0 12px;font-size:11px;font-weight:700}.gen-block{margin-bottom:14px}.gen-label{text-transform:uppercase;color:#9d9d9d;margin-bottom:6px;font-size:11px;font-weight:600;display:block}.gen-select{color:#ccc;background:#3c3c3c;border:1px solid #555;border-radius:4px;width:100%;margin-bottom:6px;padding:6px 8px;font-size:11px}.gen-hint{color:#9d9d9d;margin:0 0 6px;font-size:11px;line-height:1.4}.gen-btn{color:#ccc;cursor:default;background:#3c3c3c;border:1px solid #555;border-radius:4px;padding:4px 8px;font-size:11px}.gen-btn:hover{background:#505050}.gen-btn-row{flex-wrap:wrap;gap:6px;display:flex}.gen-btn-grid{grid-template-columns:1fr 1fr;gap:6px;display:grid}.gen-layer-list{color:#9d9d9d;margin:0;padding-left:16px;font-size:11px}.gen-layer-list li{margin-bottom:2px}.gen-toolbar{flex-wrap:wrap;gap:6px;display:flex}.gen-footer-link{color:#5b9cf0;margin:12px 0 0;font-size:11px}.gen-preview-area{background:#1e1e1e;flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.gen-output-bar{color:#ccc;background:#2d2d2d;border-bottom:1px solid #444;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;font-size:12px;display:flex}.gen-select-inline{color:#ccc;background:#3c3c3c;border:1px solid #555;border-radius:4px;padding:2px 6px;font-size:11px}.gen-btn-sm{padding:2px 8px;font-size:11px}.gen-canvas-wrap{flex:1;justify-content:center;align-items:center;min-height:0;padding:24px;display:flex}.browser-page-generator .gen-ad-card-wrap{background:#e5e7eb;padding:24px}.browser-page-generator .gen-ad-card-wrap .ad-card{box-sizing:border-box;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden}.browser-page-generator .gen-ad-card-wrap .ad-card.note-style{background:#fffbe6;border:1px solid #e5e0c8;border-radius:12px;max-width:520px;padding:0;overflow:hidden;box-shadow:0 4px 20px #00000014}.browser-page-generator .gen-ad-card-wrap .ad-card .note-header{background:#e8e8ed;border-bottom:1px solid #d1d5db;align-items:center;padding:8px 12px;display:flex}.browser-page-generator .gen-ad-card-wrap .ad-card .note-buttons{gap:6px;display:flex}.browser-page-generator .gen-ad-card-wrap .ad-card .note-btn{border-radius:50%;width:12px;height:12px}.browser-page-generator .gen-ad-card-wrap .ad-card .btn-red{background:#ff5f57}.browser-page-generator .gen-ad-card-wrap .ad-card .btn-yellow{background:#febc2e}.browser-page-generator .gen-ad-card-wrap .ad-card .btn-green{background:#28c840}.browser-page-generator .gen-ad-card-wrap .ad-card.note-style #noteTitle{color:#000;margin:0;padding:16px 20px 0;font-size:18px;font-weight:700;display:block}.browser-page-generator .gen-ad-card-wrap .ad-card.note-style #textPreview{color:#000;white-space:pre-wrap;word-break:break-word;margin:0;padding:12px 20px 20px;font-size:15px;font-weight:700;line-height:1.4}.extension-panel{background:var(--ext-panel-bg);border-left:1px solid var(--ext-panel-border);flex-direction:column;width:320px;min-width:280px;max-width:100%;display:flex;overflow:hidden}.extension-header{border-bottom:1px solid var(--ext-panel-border);background:#fff;padding:12px 14px}.extension-title{color:var(--ext-text);font-size:14px;font-weight:600}.demo-logged-in{border-bottom:1px solid var(--ext-panel-border);background:#fff;flex-shrink:0;max-height:320px;padding:12px 14px;font-size:12px;overflow-y:auto}.demo-user-row{flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;display:flex}.demo-user-row strong{color:var(--ext-text);font-size:13px}.demo-pro-badge{color:#fff;background:#7c3aed;border-radius:4px;padding:2px 6px;font-size:10px;font-weight:600;display:inline-block}.demo-status-dot{background:#28a745;border-radius:50%;flex-shrink:0;width:8px;height:8px}.demo-toolbar-row{flex-wrap:nowrap;align-items:center;gap:6px;min-width:0;margin-bottom:10px;display:flex}.demo-toolbar-row .ext-btn{white-space:nowrap;flex-shrink:0;padding:3px 6px;font-size:11px}.demo-set-status{color:#28a745;white-space:nowrap;flex-shrink:0;margin-left:0;font-size:11px}.demo-sidebar-name-row{flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px;display:flex}.demo-sidebar-name-row label{flex-shrink:0}.demo-sidebar-name-row .ext-input{flex:1;min-width:100px;max-width:140px}.demo-project-row{flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:12px;display:flex}.demo-project-row label{flex-shrink:0}.demo-project-select{flex:1;min-width:0;max-width:120px}.demo-add-project-form{border-top:1px solid var(--ext-panel-border);margin-top:4px;padding:10px 0}.demo-add-project-form label,.demo-add-project-form .demo-form-heading{color:var(--ext-text);margin:0 0 4px;font-size:12px;font-weight:600;display:block}.demo-add-project-form .ext-input,.demo-add-project-form .ext-select{width:100%;margin-bottom:10px}.demo-add-project-platforms,.demo-add-project-monetization{margin-top:12px}.demo-add-project-platforms .ext-hint,.demo-add-project-monetization .ext-hint{margin:0 0 6px;font-size:11px}.demo-checkbox-group{color:var(--ext-text);grid-template-columns:repeat(2,1fr);gap:4px 12px;font-size:11px;display:grid}.demo-checkbox-group label{cursor:default;align-items:center;gap:6px;font-weight:400;display:flex}.demo-checkbox-group input{flex-shrink:0}.demo-add-project-actions{gap:8px;margin-top:14px;display:flex}.extension-hint{color:var(--ext-muted);margin:0 0 10px;font-size:12px;line-height:1.4}.extension-tabs{background:var(--ext-panel-bg);border-bottom:1px solid var(--ext-panel-border);gap:0;padding:0 8px;display:flex}.ext-tab{color:var(--ext-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;margin-bottom:-1px;padding:10px 14px;font-size:13px;font-weight:500}.ext-tab:hover{color:var(--ext-text)}.ext-tab.active{color:var(--demo-accent);border-bottom-color:var(--demo-accent)}.extension-panels{flex:1;min-height:0;max-height:420px;padding:14px;overflow-y:auto}.ext-panel{color:var(--ext-text);font-size:13px;display:none}.ext-panel.active{display:block}.ext-panel h3{margin:0 0 10px;font-size:13px;font-weight:600}.ext-workflow-row{margin-bottom:12px}.ext-workflow-row label{color:var(--ext-muted);margin-bottom:4px;font-size:12px;display:block}.ext-select{border:1px solid var(--ext-panel-border);background:#fff;border-radius:6px;width:100%;padding:6px 10px;font-size:13px}.ext-details{margin-bottom:12px;font-size:12px}.ext-details summary{cursor:pointer;margin-bottom:6px;font-weight:500}.ext-textarea{border:1px solid var(--ext-panel-border);resize:vertical;border-radius:6px;width:100%;padding:8px;font-family:inherit;font-size:12px}.ext-steps-block{margin-bottom:14px}.ext-steps-block h3{margin-bottom:8px}.ext-step-count{color:var(--ext-muted);font-weight:400}.ext-steps-list{color:var(--ext-muted);margin:0;padding-left:18px;font-size:12px;line-height:1.6}.ext-steps-list li{margin-bottom:4px}.step-type{color:var(--demo-accent);margin-right:4px;font-family:ui-monospace,monospace;font-size:11px}.ext-btn-group{flex-wrap:wrap;gap:8px;display:flex}.ext-btn{border:1px solid var(--ext-panel-border);color:var(--ext-text);cursor:pointer;background:#fff;border-radius:6px;padding:6px 12px;font-family:inherit;font-size:12px;font-weight:500}.ext-btn:disabled{opacity:.7;cursor:not-allowed}.ext-btn-primary{background:var(--demo-accent);border-color:var(--demo-accent);color:#fff}.ext-btn-outline{background:0 0}.ext-btn-outline:hover:not(:disabled){background:#eee}.ext-btn-play{color:#fff;background:#28a745;border-color:#28a745}.ext-btn-small{padding:4px 8px;font-size:11px}.ext-input{border:1px solid var(--ext-panel-border);background:#fff;border-radius:6px;width:100%;padding:6px 10px;font-family:inherit;font-size:13px}.demo-llm-chat{margin-bottom:14px}.demo-llm-chat h3,.demo-add-workflow h3{margin:0 0 8px;font-size:13px;font-weight:600}.demo-llm-messages{border:1px solid var(--ext-panel-border);background:#fff;border-radius:6px;min-height:72px;margin-bottom:10px}.demo-llm-row{flex-direction:column;gap:8px;display:flex}.demo-llm-row .ext-textarea{min-height:52px}.demo-add-workflow{margin-bottom:12px}.demo-new-workflow-row{align-items:center;gap:8px;margin-top:6px;display:flex}.demo-new-workflow-row .ext-input{flex:1;min-width:0}.demo-steps-list{margin:0 0 4px;padding-left:0;list-style:none}.demo-step-item{border:1px solid var(--ext-panel-border);background:#fff;border-radius:4px;align-items:center;gap:6px;margin-bottom:6px;padding:4px 6px;font-size:12px;display:flex}.demo-step-item .step-type{flex-shrink:0}.demo-step-item .step-remove{color:var(--ext-muted);cursor:pointer;background:0 0;border:none;border-radius:2px;margin-left:auto;padding:0 4px;font-size:14px;line-height:1}.ext-steps-block h3{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.demo-trends-row.pulse-icon-row{flex-wrap:wrap;align-items:stretch;gap:12px;margin-bottom:14px;display:flex}.extension-panel .pulse-icon-link{border:1px solid var(--ext-panel-border);min-width:0;height:72px;color:var(--ext-text);box-sizing:border-box;background:#fff;border-radius:8px;flex-direction:column;flex:0 0 calc(33.3333% - 8px);justify-content:center;align-items:center;gap:6px;padding:10px 6px;font-size:11px;font-weight:500;text-decoration:none;display:flex}.extension-panel .pulse-icon-link:hover{color:var(--demo-accent);background:#f5f5f7;border-color:#d2d2d7}.extension-panel .pulse-icon-link .pulse-icon-svg{flex-shrink:0;width:24px;height:24px}.extension-panel .pulse-icon-label{white-space:nowrap;text-overflow:ellipsis;text-align:center;max-width:100%;overflow:hidden}.demo-section{margin-bottom:14px}.demo-section-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;margin-bottom:8px;display:flex}.demo-section-head h4{color:var(--ext-text);margin:0;font-size:12px;font-weight:600}.demo-count{color:var(--ext-muted);font-weight:400}.demo-following-list{margin-top:4px}.demo-profile-item{border:1px solid var(--ext-panel-border);background:#fff;border-radius:4px;margin-bottom:4px;padding:6px 8px;font-size:12px}.demo-activity-section{margin-bottom:14px}.demo-activity-section h4{color:var(--ext-text);margin:0 0 6px;font-size:12px;font-weight:600}.demo-activity-empty{color:var(--ext-muted);margin:0;font-size:12px}.demo-socket-status{align-items:center;gap:6px;margin:0;font-size:12px;display:flex}.demo-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.demo-dot-connected{background:#28a745}.demo-dot-offline{background:var(--ext-muted)}.demo-sidebar-list{margin-top:4px}.demo-sidebar-item{border:1px solid var(--ext-panel-border);background:#fff;border-radius:4px;align-items:center;gap:6px;margin-bottom:4px;padding:6px 8px;font-size:12px;display:flex}.demo-sidebar-meta{color:var(--ext-muted);margin-left:auto;font-size:11px}.demo-library-section{margin-bottom:14px}.demo-library-section h4{color:var(--ext-text);margin:0 0 6px;font-size:12px;font-weight:600}.demo-project-list{margin-top:8px}.demo-project-item{border:1px solid var(--ext-panel-border);cursor:default;background:#fff;border-radius:4px;margin-bottom:4px;padding:8px 10px;font-size:12px}.demo-project-name{font-weight:500}.demo-project-sublabel{color:var(--ext-muted);margin-top:2px;font-size:11px;display:block}.demo-footer{text-align:center;color:var(--demo-muted);margin-top:24px;font-size:13px}.demo-footer a{color:var(--demo-accent)}.demo-footer a:hover{text-decoration:underline}@media (max-width:768px){.browser-content{flex-direction:column}.extension-panel{border-left:none;border-top:1px solid var(--ext-panel-border);flex-shrink:0;width:100%;min-width:0;height:50vh;min-height:320px;max-height:70vh}.demo-logged-in{flex-shrink:0;max-height:120px}.extension-panels{flex:1;min-height:160px;overflow-y:auto}.browser-page{max-height:320px}.fake-gallery{grid-template-columns:repeat(3,1fr)}}