:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--bg-color: #1a1a2e;--bg-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);--fg-color: #0f3460;--fg-gradient: linear-gradient(135deg, #0f3460 0%, #16213e 100%);--accent-color: #e94560;--accent-gradient: linear-gradient(135deg, #e94560 0%, #f96e6e 100%);--text-color: #ffffff;--text-secondary: #b4b4b4;--border-color: #16213e;--shadow-color: rgba(0, 0, 0, .3);--card-bg: rgba(15, 52, 96, .6);--card-shadow: 0 8px 32px 0 rgba(0, 0, 0, .37);--hover-glow: 0 0 20px rgba(233, 69, 96, .4);--gradient-direction: 135deg;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{font-size:var(--base-font-size, 16px);transition:font-size .3s ease}html,body,#root{margin:0;padding:0;height:100%;max-height:100vh;overflow:hidden;width:100%}body{min-width:320px;background:var(--bg-gradient);color:var(--text-color);font-size:1rem;transition:background .3s ease}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--accent-color, #667eea);outline-offset:2px;border-radius:4px}[tabindex]:focus-visible{outline:2px solid var(--accent-color, #667eea);outline-offset:2px}.skip-to-main{position:absolute;top:-40px;left:0;background:var(--accent-color, #667eea);color:#fff;padding:8px 16px;text-decoration:none;z-index:10000;border-radius:0 0 4px}.skip-to-main:focus{top:0}.toast-container{position:fixed;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;z-index:9999}.toast-item{min-width:240px;max-width:420px;padding:10px 12px;border-radius:6px;box-shadow:0 4px 14px #0000002e;color:#121212;background:#f1f5f9;cursor:pointer;border:1px solid rgba(0,0,0,.08);transition:transform .12s ease,opacity .12s ease}.toast-item:hover{transform:translateY(-1px)}.toast-item .toast-message{font-size:14px;line-height:1.4}.toast-item.success{background:#e6f8ec;border-color:#c0efcf;color:#104b2f}.toast-item.error{background:#fdeaea;border-color:#f7c9c9;color:#6e1b1b}.toast-item.info{background:#eaf3fe;border-color:#c9dffc;color:#103f6e}.auth-container{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2)}.auth-box{background:#fff;padding:2rem;border-radius:12px;box-shadow:0 10px 40px #0000004d;width:100%;max-width:400px}.auth-box h1{margin:0 0 .5rem;color:#764ba2;font-size:2rem}.auth-box h2{margin:0 0 1.5rem;color:#333;font-size:1.5rem}.auth-box form{display:flex;flex-direction:column;gap:1rem}.auth-box input{padding:.75rem;border:2px solid #ddd;border-radius:8px;font-size:1rem;transition:border-color .3s}.auth-box input:focus{outline:none;border-color:#667eea}.auth-box button[type=submit]{padding:.75rem;background:#667eea;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .3s}.auth-box button[type=submit]:hover:not(:disabled){background:#5568d3}.auth-box button[type=submit]:disabled{background:#ccc;cursor:not-allowed}.error-message{background:#fee;color:#c33;padding:.75rem;border-radius:8px;margin-bottom:1rem;border:1px solid #fcc}.auth-box p{margin-top:1.5rem;text-align:center;color:#666}.link-button{background:none;border:none;color:#667eea;cursor:pointer;text-decoration:underline;padding:0;font-size:inherit}.link-button:hover{color:#5568d3}.tooltip-trigger{display:inline-block;position:relative}.tooltip{position:fixed;background:#000000e6;color:#fff;padding:8px 12px;border-radius:6px;font-size:13px;font-weight:500;white-space:nowrap;pointer-events:none;z-index:10000;animation:tooltipFadeIn .15s ease-out;box-shadow:0 4px 12px #0000004d;max-width:250px;white-space:normal;line-height:1.4}.tooltip:before{content:"";position:absolute;width:0;height:0;border:6px solid transparent}.tooltip-top:before{bottom:-12px;left:50%;transform:translate(-50%);border-top-color:#000000e6}.tooltip-bottom:before{top:-12px;left:50%;transform:translate(-50%);border-bottom-color:#000000e6}.tooltip-left:before{right:-12px;top:50%;transform:translateY(-50%);border-left-color:#000000e6}.tooltip-right:before{left:-12px;top:50%;transform:translateY(-50%);border-right-color:#000000e6}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.widget-container{background:var(--card-bg, white);border-radius:8px;box-shadow:var(--card-shadow, 0 8px 30px rgba(0, 0, 0, .3));border:2px solid var(--border-color, rgba(255, 255, 255, .2));overflow:hidden;height:100%;display:flex;flex-direction:column;transition:all .3s;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.widget-container:hover{box-shadow:var(--hover-glow, 0 12px 40px rgba(0, 0, 0, .4));border-color:var(--accent-color, rgba(255, 255, 255, .3))}.widget-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(135deg,#0000001a,#0000000d);border-bottom:2px solid var(--border-color, rgba(255, 255, 255, .2));cursor:move}.widget-title-area{flex:1;pointer-events:none}.widget-title{margin:0;font-size:1em;font-weight:600;color:var(--text-color, #333);pointer-events:none}.widget-actions{display:flex;gap:4px}.widget-action-btn{background:transparent;border:none;padding:4px 8px;cursor:pointer;font-size:1em;color:var(--text-secondary, #666);border-radius:4px;transition:all .2s;position:relative;z-index:10;pointer-events:auto}.widget-action-btn:hover{background:var(--accent-color, #667eea);color:#fff}.widget-action-btn.widget-remove:hover{background:#e74c3c;color:#fff}.widget-content{padding:0;flex:1;overflow-y:auto;color:var(--text-color, #333);min-height:100px;display:flex;font-size:.9em;background:var(--card-bg, rgba(255, 255, 255, .05))}.widget-content>*{pointer-events:auto;width:100%;height:100%}.widget-content::-webkit-scrollbar{width:6px}.widget-content::-webkit-scrollbar-track{background:transparent}.widget-content::-webkit-scrollbar-thumb{background:var(--border-color, #ddd);border-radius:3px}.widget-content::-webkit-scrollbar-thumb:hover{background:var(--accent-color, #667eea)}.tutorial-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .2s ease-in-out}.tutorial-modal{background:var(--fg-color);border-radius:12px;width:90%;max-width:1000px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;animation:slideUp .3s ease-out}.tutorial-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid var(--border-color);background:var(--card-bg)}.tutorial-header h2{margin:0;font-size:24px;color:var(--text-color)}.tutorial-close{background:none;border:none;font-size:28px;color:var(--text-secondary);cursor:pointer;padding:4px 12px;border-radius:4px;transition:all .2s;line-height:1}.tutorial-close:hover{background:var(--card-bg);color:var(--text-color)}.tutorial-body{display:flex;flex:1;overflow:hidden;min-height:0}.tutorial-sidebar{width:220px;background:var(--card-bg);border-right:1px solid var(--border-color);overflow-y:auto;padding:16px 0}.tutorial-nav-button{width:100%;display:flex;align-items:center;gap:12px;padding:12px 24px;background:none;border:none;color:var(--text-secondary);cursor:pointer;transition:all .2s;text-align:left;font-size:15px}.tutorial-nav-button:hover{background:#0000000d;color:var(--text-color)}.tutorial-nav-button.active{background:var(--accent-color);color:#fff;border-right:3px solid var(--accent-color)}.tutorial-nav-icon{font-size:20px;width:24px;text-align:center}.tutorial-nav-text{flex:1}.tutorial-main{flex:1;overflow-y:auto;padding:32px;background:var(--fg-color)}.tutorial-content{max-width:800px}.tutorial-content h2{margin:0 0 24px;color:var(--text-color);font-size:28px;border-bottom:2px solid var(--border-color);padding-bottom:12px}.tutorial-content h3{margin:32px 0 16px;color:var(--text-color);font-size:20px;font-weight:600}.tutorial-content p{margin:0 0 16px;color:var(--text-color);line-height:1.6;font-size:15px}.tutorial-content ul,.tutorial-content ol{margin:0 0 24px;padding-left:24px;color:var(--text-color);line-height:1.7}.tutorial-content li{margin-bottom:8px;font-size:15px}.tutorial-content strong{color:var(--accent-color);font-weight:600}.tutorial-content code{background:var(--card-bg);padding:2px 6px;border-radius:4px;font-family:Courier New,monospace;font-size:14px;color:var(--accent-color)}.tutorial-sidebar::-webkit-scrollbar,.tutorial-main::-webkit-scrollbar{width:8px}.tutorial-sidebar::-webkit-scrollbar-track,.tutorial-main::-webkit-scrollbar-track{background:var(--card-bg)}.tutorial-sidebar::-webkit-scrollbar-thumb,.tutorial-main::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}.tutorial-sidebar::-webkit-scrollbar-thumb:hover,.tutorial-main::-webkit-scrollbar-thumb:hover{background:var(--accent-color)}.theme-editor{display:flex;flex-direction:column;gap:16px}.theme-editor-header{display:flex;flex-direction:column;gap:12px}.theme-editor-header h3{margin:0;color:var(--text-color);font-size:1.25rem}.editor-tabs{display:flex;gap:8px;border-bottom:1px solid var(--border-color)}.editor-tabs button{padding:8px 16px;background:transparent;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s;margin-bottom:-1px}.editor-tabs button:hover{color:var(--text-color)}.editor-tabs button.active{color:var(--accent-color);border-bottom-color:var(--accent-color)}.theme-editor-content{display:flex;flex-direction:column;gap:24px;max-height:60vh;overflow-y:auto}.theme-editor-content h4{margin:0 0 16px;color:var(--text-color);font-size:1.1rem}.color-editor,.font-editor,.effect-editor{display:flex;flex-direction:column;gap:16px}.color-group,.font-group,.effect-group{display:flex;flex-direction:column;gap:8px}.color-group label,.font-group label,.effect-group label{color:var(--text-color);font-size:.9rem;font-weight:500}.color-input-group{display:flex;gap:8px;align-items:center}.color-input-group input[type=color]{width:60px;height:40px;border:2px solid var(--border-color);border-radius:6px;cursor:pointer;background:transparent;padding:0}.color-input-group input[type=text]{flex:1;padding:8px 12px;border:1px solid var(--border-color);border-radius:6px;background:var(--card-bg);color:var(--text-color);font-size:.9rem}.color-input-group input[type=text]:focus{outline:none;border-color:var(--accent-color)}.color-group input[type=text],.font-group input[type=text],.effect-group input[type=text]{padding:8px 12px;border:1px solid var(--border-color);border-radius:6px;background:var(--card-bg);color:var(--text-color);font-size:.9rem}.color-group input[type=text]:focus,.font-group input[type=text]:focus,.effect-group input[type=text]:focus{outline:none;border-color:var(--accent-color)}.hint{margin:0;font-size:.75rem;color:var(--text-secondary);font-style:italic}.theme-preview-section{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--card-bg);border-radius:8px;border:1px solid var(--border-color)}.theme-preview-section h4{margin:0}.theme-preview-card{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;box-shadow:var(--card-shadow)}.preview-header{padding:12px 16px}.preview-header h5{margin:0}.preview-body{padding:16px}.preview-body p{margin:8px 0}.preview-accent{border-radius:4px;margin:12px 0}.theme-editor-actions{display:flex;gap:12px;justify-content:flex-end;padding-top:16px;border-top:1px solid var(--border-color)}.theme-editor-actions button{padding:10px 20px;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.cancel-btn{background:var(--card-bg);color:var(--text-color);border:1px solid var(--border-color)}.cancel-btn:hover{background:var(--border-color)}.save-btn{background:var(--accent-gradient);color:#fff}.save-btn:hover{transform:translateY(-2px);box-shadow:var(--hover-glow)}.options-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in-out}.options-modal{background:var(--fg-color);border-radius:12px;width:90%;max-width:700px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;animation:slideUp .3s ease-out}.options-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid var(--border-color)}.options-header h2{margin:0;font-size:24px;color:var(--text-color)}.close-button{background:none;border:none;font-size:24px;color:var(--text-secondary);cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s}.close-button:hover{background:var(--card-bg);color:var(--text-color)}.options-tabs{display:flex;border-bottom:1px solid var(--border-color);padding:0 24px;background:var(--card-bg)}.tab-button{background:none;border:none;padding:16px 24px;font-size:16px;color:var(--text-secondary);cursor:pointer;border-bottom:2px solid transparent;transition:all .2s;position:relative}.tab-button:hover{color:var(--text-color)}.tab-button.active{color:var(--accent-color);border-bottom-color:var(--accent-color)}.options-content{padding:24px;overflow-y:auto;flex:1}.options-section h3{margin:0 0 16px;color:var(--text-color);font-size:18px}.option-item{margin-bottom:20px}.option-item label{display:block;margin-bottom:8px;color:var(--text-color);font-weight:500}.option-item label:has(input[type=checkbox]){display:flex;align-items:center;gap:8px;cursor:pointer;margin-bottom:0}.option-item input[type=checkbox]{margin:0;cursor:pointer;width:18px;height:18px;accent-color:var(--accent-color)}.option-item select,.option-item input[type=text],.option-item input[type=number]{width:100%;padding:10px;border:1px solid var(--border-color);border-radius:6px;background:var(--card-bg);color:var(--text-color);font-size:14px}.option-item select:focus,.option-item input[type=text]:focus,.option-item input[type=number]:focus{outline:none;border-color:var(--accent-color)}.tutorial-button,.export-button,.import-button,.screenshot-button{padding:12px 24px;background:var(--accent-gradient);border:none;border-radius:6px;color:#fff;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s;width:100%;margin-bottom:12px}.tutorial-button:hover,.export-button:hover,.import-button:hover,.screenshot-button:hover{transform:translateY(-2px);box-shadow:var(--hover-glow)}.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:16px;margin-bottom:24px}.theme-card{border:2px solid var(--border-color);border-radius:8px;padding:16px;cursor:pointer;transition:all .2s;background:var(--card-bg);color:var(--text-color)}.theme-card:hover{transform:translateY(-4px);box-shadow:var(--card-shadow);border-color:var(--accent-color)}.theme-card.selected{border-color:var(--accent-color);box-shadow:0 0 15px #e9456066}.theme-preview{width:100%;aspect-ratio:1;border-radius:4px;overflow:hidden;margin-bottom:8px}.theme-accent{width:100%;height:100%}.theme-name{font-size:14px;font-weight:500;text-align:center}.font-size-selector{display:flex;gap:8px}.font-size-btn{flex:1;padding:10px;border:1px solid var(--border-color);border-radius:6px;background:var(--card-bg);color:var(--text-color);cursor:pointer;transition:all .2s}.font-size-btn:hover{background:var(--accent-color);color:#fff;border-color:var(--accent-color)}.font-size-btn.active{background:var(--accent-gradient);color:#fff;border-color:var(--accent-color)}.dark-mode-toggle-container{display:flex;align-items:center;gap:12px;margin-bottom:8px}.dark-mode-toggle{position:relative;width:50px;height:28px;background:var(--card-bg);border:2px solid var(--border-color);border-radius:14px;cursor:pointer;transition:all .3s}.dark-mode-toggle.active{background:var(--accent-gradient);border-color:var(--accent-color)}.dark-mode-toggle-slider{position:absolute;top:2px;left:2px;width:22px;height:22px;background:#fff;border-radius:50%;transition:all .3s;box-shadow:0 2px 4px #0003}.dark-mode-toggle.active .dark-mode-toggle-slider{transform:translate(22px)}.custom-theme-button{padding:12px 24px;background:var(--card-bg);border:2px dashed var(--border-color);border-radius:6px;color:var(--text-color);font-size:14px;cursor:pointer;transition:all .2s;width:100%}.custom-theme-button:hover{border-color:var(--accent-color);background:var(--accent-color);color:#fff}.tools-menu-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1001;animation:fadeIn .2s ease-in-out}.tools-menu{background:var(--fg-color, white);border-radius:12px;width:90%;max-width:800px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;animation:slideUp .3s ease-out}.tools-menu-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid var(--border-color, #ddd)}.tools-menu-header h2{margin:0;font-size:24px;color:var(--text-color, #333)}.close-button{background:none;border:none;font-size:24px;color:var(--text-secondary, #666);cursor:pointer;padding:4px 8px;border-radius:4px;transition:all .2s}.close-button:hover{background:var(--card-bg, #f0f0f0);color:var(--text-color, #333)}.tools-search{padding:16px 24px;border-bottom:1px solid var(--border-color, #ddd)}.tools-search input{width:100%;padding:12px 16px;border:1px solid var(--border-color, #ddd);border-radius:8px;font-size:16px;background:var(--card-bg, #f9f9f9);color:var(--text-color, #333)}.tools-search input:focus{outline:none;border-color:var(--accent-color, #667eea)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;padding:24px;overflow-y:auto;flex:1}.tool-card{background:var(--card-bg, white);border:2px solid var(--border-color, #ddd);border-radius:8px;padding:20px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}.tool-card:hover{border-color:var(--accent-color, #667eea);transform:translateY(-4px);box-shadow:var(--card-shadow, 0 8px 32px rgba(0, 0, 0, .2))}.tool-icon{font-size:2.5em}.tool-name{font-weight:600;color:var(--text-color, #333);font-size:1em}.tool-description{font-size:.875em;color:var(--text-secondary, #666)}.no-tools-found{padding:48px 24px;text-align:center;color:var(--text-secondary, #666);font-size:1.125em}.new-session-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease-in-out}.new-session-modal{background:var(--fg-color);border-radius:12px;width:90%;max-width:600px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px #00000080;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.new-session-header{padding:24px;border-bottom:1px solid var(--border-color)}.new-session-header h2{margin:0;font-size:24px;color:var(--text-color)}.new-session-content{padding:24px;overflow-y:auto;flex:1}.warning-box{background:#ffc10733;border:2px solid #ffc107;border-radius:8px;padding:1rem;margin-bottom:1.5rem;color:var(--text-color)}.warning-box strong{color:#ffc107}.new-session-content p{margin:1rem 0 .5rem;color:var(--text-color)}.will-clear,.will-keep{margin:.5rem 0 1rem 1.5rem;padding:0;color:var(--text-color)}.will-clear li{color:#ffc107}.will-keep li{color:#4ade80}.confirmation-checkbox{margin-top:1.5rem;padding:1rem;background:var(--secondary-bg);border-radius:8px;border:1px solid var(--border-color)}.confirmation-checkbox label{display:flex;align-items:center;gap:.75rem;cursor:pointer;color:var(--text-color)}.confirmation-checkbox input[type=checkbox]{width:20px;height:20px;cursor:pointer}.new-session-actions{display:flex;gap:1rem;padding:24px;border-top:1px solid var(--border-color);justify-content:flex-end}.cancel-btn,.confirm-btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.cancel-btn{background:var(--secondary-bg);color:var(--text-color);border:1px solid var(--border-color)}.cancel-btn:hover{background:var(--hover-bg)}.confirm-btn{background:#e74c3c;color:#fff}.confirm-btn:hover:not(:disabled){background:#c0392b}.confirm-btn:disabled{opacity:.5;cursor:not-allowed}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top,width,height}.react-grid-item img{pointer-events:none;-webkit-user-select:none;user-select:none}.react-grid-item.resizing{transition:none;z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.dashboard-container{height:100vh;max-height:100vh;background:var(--bg-gradient, linear-gradient(135deg, #667eea 0%, #764ba2 100%));transition:background .3s ease;display:flex;flex-direction:column;overflow:hidden}.skip-to-content{position:absolute;top:-100px;left:0;z-index:10000;padding:12px 24px;background:var(--accent-color, #667eea);color:#fff;font-weight:600;text-decoration:none;border-radius:0 0 8px;transition:top .3s ease}.skip-to-content:focus{top:0;outline:3px solid white;outline-offset:-3px}.dashboard-header{background:linear-gradient(to bottom,indigo,#6a0dad);padding:.5rem 1.4rem;display:flex;justify-content:space-between;align-items:center;box-shadow:0 4px 20px var(--shadow-color, rgba(0, 0, 0, .5));border-bottom:2px solid var(--border-color, rgba(0, 0, 0, .3))}.app-logo-wrap{display:flex;align-items:center}.app-logo{height:32px;width:auto;display:block}.header-actions{display:flex;gap:1rem}.settings-button,.add-tool-button,.logout-button{padding:.35rem .8rem;border:none;border-radius:8px;cursor:pointer;font-size:.9em;font-weight:600;transition:all .3s}.new-session-button,.settings-button,.add-tool-button{background:var(--card-bg, #f0f0f0);color:var(--text-color, #333);border:1px solid var(--border-color, #ddd)}.new-session-button:hover,.settings-button:hover,.add-tool-button:hover{background:var(--accent-color, #667eea);color:#fff;border-color:var(--accent-color, #667eea)}.logout-button{background:#e74c3c;color:#fff}.logout-button:hover{background:#c0392b}.dashboard-tabs-container{background:var(--card-bg, #2d2d2d);border-bottom:1px solid var(--border-color, rgba(255, 255, 255, .1));overflow-x:auto;overflow-y:visible;position:relative;z-index:100}.dashboard-tabs{display:flex;align-items:flex-end;gap:2px;padding:0 1rem;min-height:44px}.dashboard-tab{position:relative;display:flex;align-items:center;gap:8px;padding:8px 12px;background:#ffffff0d;border:1px solid transparent;border-bottom:3px solid transparent;border-radius:8px 8px 0 0;cursor:pointer;transition:all .2s;min-width:120px;max-width:200px;color:var(--text-secondary, #aaa)}.dashboard-tab:hover{background:#ffffff1a;color:var(--text-color, #fff)}.dashboard-tab.active{background:var(--card-bg, #2d2d2d);color:var(--text-color, #fff);border-color:var(--border-color, rgba(255, 255, 255, .2))}.tab-color-indicator{width:12px;height:12px;border-radius:50%;flex-shrink:0;border:1px solid rgba(255,255,255,.3)}.tab-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9rem;-webkit-user-select:none;user-select:none}.tab-name-input{flex:1;background:var(--fg-color, #333);border:1px solid var(--accent-color, #667eea);border-radius:4px;padding:4px 8px;color:var(--text-color, #fff);font-size:.9rem;outline:none;min-width:0}.tab-actions{position:relative;display:flex;align-items:center;gap:4px;opacity:0;transition:opacity .2s;pointer-events:none}.dashboard-tab:hover .tab-actions,.dashboard-tab:focus-within .tab-actions{opacity:1;pointer-events:all}.tab-action-button{background:none;border:none;color:var(--text-secondary, #aaa);cursor:pointer;padding:2px 4px;border-radius:4px;font-size:.8rem;transition:all .2s;display:flex;align-items:center;justify-content:center;width:20px;height:20px;pointer-events:all}.tab-action-button:hover{background:#ffffff1a;color:var(--text-color, #fff)}.add-dashboard-tab-button{background:#ffffff0d;border:1px dashed var(--border-color, rgba(255, 255, 255, .2));border-radius:8px 8px 0 0;color:var(--text-secondary, #aaa);cursor:pointer;padding:8px 16px;font-size:1rem;transition:all .2s;margin-left:4px;height:fit-content}.add-dashboard-tab-button:hover{background:#ffffff1a;border-color:var(--accent-color, #667eea);color:var(--text-color, #fff)}.color-picker-dropdown{position:fixed;background:var(--fg-color, #333);border:1px solid var(--border-color, rgba(255, 255, 255, .2));border-radius:8px;padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;z-index:99999;min-width:120px;box-shadow:0 4px 12px #00000080}.color-option{width:24px;height:24px;border-radius:4px;border:2px solid rgba(255,255,255,.3);cursor:pointer;transition:all .2s;padding:0}.color-option:hover{transform:scale(1.1);border-color:#fff9;box-shadow:0 0 8px #ffffff4d}.delete-confirm-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:2000}.delete-confirm-box{background:var(--fg-color, #333);border:1px solid var(--border-color, rgba(255, 255, 255, .2));border-radius:8px;padding:24px;max-width:400px;box-shadow:0 8px 24px #0006}.delete-confirm-box p{color:var(--text-color, #fff);margin:0 0 16px;font-size:1rem}.delete-confirm-buttons{display:flex;gap:8px;justify-content:flex-end}.confirm-delete-button,.cancel-delete-button{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:.9rem;transition:all .2s}.confirm-delete-button{background:#e74c3c;color:#fff}.confirm-delete-button:hover{background:#c0392b}.cancel-delete-button{background:var(--card-bg, rgba(255, 255, 255, .1));color:var(--text-color, #fff)}.cancel-delete-button:hover{background:#fff3}.dashboard-grid{flex:1;padding:20px;overflow:hidden;min-height:0;position:relative}.welcome-background{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:1;animation:fadeIn 1s ease-in}.welcome-background img{max-width:80%;max-height:80%;object-fit:contain;filter:drop-shadow(0 4px 20px rgba(0,0,0,.3))}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.welcome-background.fade-out{animation:fadeOut 1s ease-out forwards}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.widget-wrapper{background:transparent;width:100%;height:100%;overflow:hidden;max-width:100%;max-height:100%}.empty-dashboard{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;padding:48px}.empty-dashboard h2{color:var(--text-color, #fff);font-size:clamp(1.5rem,2rem,2.5rem);margin-bottom:1rem}.empty-dashboard p{color:var(--text-secondary, #aaa);font-size:clamp(1rem,1.125rem,1.25rem);margin-bottom:2rem}.feature-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;max-width:800px;width:100%}.feature-tile{background:var(--card-bg, white);border-radius:12px;padding:24px;border:2px solid var(--border-color, #ddd);transition:all .3s;cursor:pointer}.feature-tile:hover{transform:translateY(-8px);border-color:var(--accent-color, #667eea);box-shadow:var(--card-shadow, 0 8px 32px rgba(0, 0, 0, .2))}.feature-icon{font-size:3em;margin-bottom:12px}.feature-tile h3{color:var(--text-color, #333);margin:0 0 8px;font-size:1.125em}.feature-tile p{color:var(--text-secondary, #666);margin:0;font-size:.9em}.react-grid-layout{position:relative;height:100%;width:100%;overflow:hidden}.react-grid-item{transition:all .2s ease;transition-property:left,top,width,height;max-width:100%;max-height:100%;overflow:hidden}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}@media(max-width:768px){.dashboard-header{padding:.75rem 1rem;flex-wrap:wrap;gap:.5rem}.header-actions{flex-wrap:wrap;gap:.5rem;width:100%;justify-content:flex-end}.new-session-button,.settings-button,.add-tool-button,.logout-button{padding:.4rem .75rem;font-size:.9em}.app-logo{height:36px}.dashboard-tabs{padding:0 .5rem}.dashboard-tab{min-width:100px;max-width:150px;padding:6px 10px;font-size:.85rem}.dashboard-grid{padding:10px}.feature-tiles{grid-template-columns:1fr;gap:16px}}@media(max-width:480px){.dashboard-header{padding:.5rem}.header-actions{flex-direction:column;align-items:stretch}.new-session-button,.settings-button,.add-tool-button,.logout-button{width:100%;padding:.5rem}.dashboard-tab{min-width:80px;padding:4px 8px;font-size:.75rem}.tab-name{font-size:.8rem}}.App{padding:0;margin:0}*{box-sizing:border-box}