:root{--color-primary:#3498db;--color-secondary:#2c3e50;--color-border:#ecf0f1;--color-text:#2c3e50;--color-text-light:#7f8c8d;--color-bg-light:#f5f6fa;--toolbar-height:50px;--panel-width:280px;}html[data-theme="dark"]{--color-primary:#3498db;--color-secondary:#34495e;--color-border:#34495e;--color-text:#ecf0f1;--color-text-light:#95a5a6;--color-bg-light:#2c3e50;}.mockup-editor-main{position:relative;display:flex;flex-direction:column;background:var(--color-bg-light);overflow:hidden;z-index:10;height:100%;}.mockup-editor-container{display:flex;flex-direction:column;height:100%;overflow:hidden;}.mockup-toolbar{display:flex;align-items:center;gap:10px;padding:8px 15px;height:var(--toolbar-height);background:white;border-bottom:1px solid var(--color-border);box-shadow:0 2px 4px rgba(0,0,0,0.05);flex-wrap:wrap;}html[data-theme="dark"] .mockup-toolbar{background:#34495e;border-color:#2c3e50;}.toolbar-section{display:flex;gap:5px;align-items:center;}.toolbar-btn{padding:6px 12px;background:white;border:1px solid var(--color-border);border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;color:var(--color-text);transition:all 0.2s ease;white-space:nowrap;}html[data-theme="dark"] .toolbar-btn{background:#2c3e50;color:var(--color-text);border-color:#34495e;}.toolbar-btn:hover{background:var(--color-primary);color:white;border-color:var(--color-primary);}.toolbar-spacer{flex:1;}.device-selector{padding:6px 10px;background:white;border:1px solid var(--color-border);border-radius:4px;font-size:13px;color:var(--color-text);cursor:pointer;}html[data-theme="dark"] .device-selector{background:#2c3e50;color:var(--color-text);border-color:#34495e;}.mockup-editor-layout{display:flex;flex:1;overflow:hidden;gap:1px;background:var(--color-border);}.mockup-components-panel{width:var(--panel-width);background:white;border-right:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden;}html[data-theme="dark"] .mockup-components-panel{background:#34495e;}.panel-header{padding:12px;border-bottom:1px solid var(--color-border);background:var(--color-bg-light);}html[data-theme="dark"] .panel-header{background:#2c3e50;}.panel-header h3{margin:0;font-size:14px;font-weight:600;color:var(--color-text);}.panel-content{flex:1;overflow-y:auto;padding:10px;}.component-category{margin-bottom:15px;}.category-title{margin:0 0 8px 0;font-size:12px;font-weight:600;color:var(--color-text-light);text-transform:uppercase;letter-spacing:0.5px;}.component-group{display:flex;flex-direction:column;gap:6px;}.component-item{padding:8px 10px;background:var(--color-bg-light);border:1px solid var(--color-border);border-radius:4px;font-size:13px;cursor:grab;user-select:none;transition:all 0.2s ease;color:var(--color-text);}html[data-theme="dark"] .component-item{background:#2c3e50;}.component-item:hover{background:var(--color-primary);color:white;border-color:var(--color-primary);}.component-item:active{cursor:grabbing;}.mockup-editor-canvas{flex:1;background:white;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:20px;}html[data-theme="dark"] .mockup-editor-canvas{background:#2c3e50;}#mockup-canvas{width:100%;max-width:2000px;}.canvas-viewport{width:100%;}.frame-container{width:100%;background:white;border:1px solid var(--color-border);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,0.1);position:relative;overflow:auto;min-height:400px;}html[data-theme="dark"] .frame-container{background:#34495e;border-color:#2c3e50;}.frame-label{position:absolute;top:10px;left:10px;font-size:11px;font-weight:600;color:var(--color-text-light);background:rgba(0,0,0,0.05);padding:4px 8px;border-radius:3px;z-index:10;text-transform:uppercase;}.frame-content{display:flex;flex-wrap:wrap;gap:0;width:100%;min-height:100%;position:relative;padding:10px;align-content:flex-start;box-sizing:border-box;}.frame-content{display:flex;flex-wrap:wrap;gap:0;width:100%;min-height:100%;position:relative;padding:0;align-content:flex-start;box-sizing:border-box;}.mockup-element{position:relative;border:1px solid var(--color-border);border-radius:3px;padding:10px;background:white;cursor:move;transition:all 0.2s ease;user-select:none;box-sizing:border-box;margin:0;flex-shrink:0;}html[data-theme="dark"] .mockup-element{background:#34495e;border-color:#2c3e50;}.mockup-element:hover,.mockup-element.selected{border-color:var(--color-primary);box-shadow:0 0 0 2px rgba(52,152,219,0.2);}.mockup-element.selected{border-color:var(--color-primary);}.mockup-properties-panel{width:var(--panel-width);background:white;border-left:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden;}html[data-theme="dark"] .mockup-properties-panel{background:#34495e;}.properties-group{margin-bottom:15px;padding:0 10px;}.properties-group label{display:block;font-size:12px;font-weight:600;color:var(--color-text);margin-bottom:4px;margin-top:10px;}.properties-group input[type="text"],.properties-group input[type="color"],.properties-group textarea,.properties-group select{width:100%;padding:6px;border:1px solid var(--color-border);border-radius:3px;font-size:12px;background:white;color:var(--color-text);box-sizing:border-box;}html[data-theme="dark"] .properties-group input[type="text"],html[data-theme="dark"] .properties-group input[type="color"],html[data-theme="dark"] .properties-group textarea,html[data-theme="dark"] .properties-group select{background:#2c3e50;border-color:#2c3e50;color:var(--color-text);}.modal-backdrop{position:fixed;top:0 !important;left:0;right:0;bottom:0;width:100%;height:100vh;background:rgba(0,0,0,0.5);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;z-index:1000;padding-top:80px;}.modal-dialog{background:white;border-radius:6px;box-shadow:0 10px 40px rgba(0,0,0,0.2);min-width:300px;max-width:500px;max-height:80vh;overflow-y:auto;}html[data-theme="dark"] .modal-dialog{background:#34495e;}.modal-content{display:flex;flex-direction:column;}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:15px;border-bottom:1px solid var(--color-border);}.modal-header h3{margin:0;font-size:16px;font-weight:600;color:var(--color-text);}.modal-close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--color-text-light);}.modal-body{padding:15px;}.modal-body p{margin:0 0 10px 0;font-size:13px;color:var(--color-text);}.toolbar-alert,.share-alert{margin:0 !important;border-radius:0 !important;border-left:none !important;border-right:none !important;border-top:none !important;position:relative;animation:slideDown 0.25s ease;font-size:13px;padding:10px 40px 10px 15px !important;z-index:20;}@keyframes slideDown{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}.toolbar-alert input,.toolbar-alert textarea,.share-alert input{font-size:12px;}.share-link-group{display:flex;gap:5px;}.share-link-input{flex:1;padding:8px 10px;border:1px solid var(--color-border);border-radius:3px;font-size:12px;background:var(--color-bg-light);color:var(--color-text);}html[data-theme="dark"] .share-link-input{background:#2c3e50;border-color:#2c3e50;}.panel-content::-webkit-scrollbar{width:8px;}.panel-content::-webkit-scrollbar-track{background:var(--color-bg-light);}.panel-content::-webkit-scrollbar-thumb{background:#bdc3c7;border-radius:4px;}.panel-content::-webkit-scrollbar-thumb:hover{background:#95a5a6;}html[data-theme="dark"] .panel-content::-webkit-scrollbar-track{background:#2c3e50;}html[data-theme="dark"] .panel-content::-webkit-scrollbar-thumb{background:#555;}.btn{padding:8px 16px;border:none;border-radius:4px;cursor:pointer;font-size:13px;font-weight:600;transition:all 0.2s ease;}.btn-primary{background:var(--color-primary);color:white;}.btn-primary:hover{opacity:0.9;}.mockup-statusbar{display:flex;align-items:center;gap:8px;padding:3px 14px;height:26px;background:var(--color-secondary);font-size:11px;color:rgba(255,255,255,.7);flex-shrink:0;}.status-message{color:rgba(255,255,255,.9);font-weight:500;}.status-message.status-error{color:#e74c3c;}.status-message.status-success{color:#2ecc71;}.status-sep{opacity:.4;}.status-info{color:rgba(255,255,255,.65);}.status-spacer{flex:1;}.status-autosave{font-size:10px;opacity:.5;}.mockup-title-display{font-size:13px;font-weight:600;color:var(--color-text);padding:4px 10px;border:1px dashed transparent;border-radius:4px;cursor:pointer;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:border-color .15s;}.mockup-title-display:hover{border-color:var(--color-border);background:var(--color-bg-light);}.canvas-placeholder{color:#bdc3c7;text-align:center;padding:80px 20px;font-size:14px;pointer-events:none;}.frame-content.drag-over{outline:3px dashed var(--color-primary);outline-offset:-4px;background:rgba(52,152,219,.04);}.mockup-element{position:relative;border:2px solid transparent;border-radius:4px;padding:10px 12px;cursor:move;transition:border-color .15s,box-shadow .15s,opacity .15s;user-select:none;box-sizing:border-box;}.mockup-element:hover{border-color:#bdc3c7;}.mockup-element.selected{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(52,152,219,.15);}.mockup-element.dragging{opacity:0.5;}.mockup-element.drag-target{border:2px dashed var(--color-primary);background:rgba(52,152,219,.1);}.element-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;opacity:.5;margin-bottom:6px;}.element-preview{font-size:13px;}.element-delete{position:absolute;top:6px;right:6px;background:#e74c3c;color:white;border:none;border-radius:3px;width:22px;height:22px;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.8;}.element-delete:hover{opacity:1;}.props-empty{color:var(--color-text-light);text-align:center;padding:30px 10px;font-size:12px;}.props-name{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--color-primary);padding:10px 10px 4px;border-bottom:1px solid var(--color-border);margin-bottom:6px;}.prop-field{padding:4px 10px;}.prop-field label{display:block;font-size:11px;font-weight:600;color:var(--color-text-light);margin-bottom:3px;text-transform:uppercase;letter-spacing:.3px;}.prop-field input,.prop-field textarea,.prop-field select{width:100%;padding:5px 7px;border:1px solid var(--color-border);border-radius:3px;font-size:12px;background:var(--color-bg-light);color:var(--color-text);box-sizing:border-box;font-family:inherit;}html[data-theme="dark"] .prop-field input,html[data-theme="dark"] .prop-field textarea,html[data-theme="dark"] .prop-field select{background:#2c3e50;border-color:#4a6278;}.prop-field input[type="color"]{padding:2px;height:28px;}.prop-field textarea{resize:vertical;min-height:56px;}.btn-delete-prop{width:calc(100% - 20px);margin:12px 10px;padding:7px;background:none;border:1px solid #e74c3c;color:#e74c3c;border-radius:4px;cursor:pointer;font-size:12px;font-weight:600;transition:all 0.2s ease;}.btn-delete-prop:hover{background:#e74c3c;color:white;}.btn-outline-primary{padding:5px 10px !important;background:white;border:1px solid var(--color-primary) !important;color:var(--color-primary) !important;border-radius:3px;cursor:pointer;font-size:12px;font-weight:500;transition:all 0.2s ease;flex:1;}.btn-outline-primary:hover:not(:disabled){background:var(--color-primary);color:white;}.btn-outline-primary:disabled{opacity:0.3;cursor:not-allowed;}html[data-theme="dark"] .btn-outline-primary{background:#2c3e50;border-color:var(--color-primary) !important;color:var(--color-primary) !important;}html[data-theme="dark"] .btn-outline-primary:hover:not(:disabled){background:var(--color-primary);color:white;}transition:all .15s;}.btn-delete-prop:hover{background:#e74c3c;color:white;}.form-group{margin-bottom:12px;}.form-group label{display:block;font-size:12px;font-weight:600;color:var(--color-text);margin-bottom:5px;}.form-input{width:100%;padding:8px 10px;border:1px solid var(--color-border);border-radius:4px;font-size:13px;background:var(--color-bg-light);color:var(--color-text);box-sizing:border-box;font-family:inherit;transition:border-color .15s;}.form-input:focus{outline:none;border-color:var(--color-primary);}html[data-theme="dark"] .form-input{background:#2c3e50;border-color:#4a6278;}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:15px;}.share-hint{font-size:11px;color:var(--color-text-light) !important;margin-top:8px !important;}.modal-dialog-wide{min-width:480px;max-width:600px;}.mockup-list-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--color-border);border-radius:5px;margin-bottom:8px;transition:background .15s;}.mockup-list-item:hover{background:var(--color-bg-light);}html[data-theme="dark"] .mockup-list-item{border-color:#4a6278;}.mockup-list-info{flex:1;}.mockup-list-title{font-size:13px;font-weight:600;color:var(--color-text);margin-bottom:2px;}.mockup-list-meta{font-size:11px;color:var(--color-text-light);}.mockup-list-actions{display:flex;gap:6px;}.btn-sm{padding:5px 10px;font-size:12px;}.btn-secondary{background:var(--color-bg-light);color:var(--color-text);border:1px solid var(--color-border);}.btn-secondary:hover{background:var(--color-border);}html[data-theme="dark"] .btn-secondary{background:#2c3e50;border-color:#4a6278;}.btn-danger{background:#e74c3c;color:white;}.btn-danger:hover{background:#c0392b;}.mockup-flash{position:fixed;top:70px;left:50%;transform:translateX(-50%);padding:10px 20px;border-radius:5px;font-size:13px;font-weight:600;z-index:9999;animation:flashIn .2s ease,flashOut .3s ease 2.2s forwards;box-shadow:0 4px 15px rgba(0,0,0,.15);}.mockup-flash-success{background:#27ae60;color:white;}.mockup-flash-error{background:#e74c3c;color:white;}.mockup-flash-info{background:var(--color-primary);color:white;}@keyframes flashIn{from{opacity:0;transform:translateX(-50%) translateY(-8px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}@keyframes flashOut{from{opacity:1;}to{opacity:0;}}@media (max-width:1024px){.mockup-components-panel,.mockup-properties-panel{width:200px;}}@media (max-width:768px){.mockup-editor-layout{flex-direction:column;}.mockup-components-panel,.mockup-properties-panel,.mockup-annotations-panel{width:100%;height:150px;}.mockup-editor-canvas{order:-1;}}.toolbar-viewmode{gap:8px !important;}.viewmode-label{font-size:12px;font-weight:700;color:var(--color-primary);padding:4px 8px;background:rgba(52,152,219,.1);border-radius:4px;white-space:nowrap;}.annotation-count-badge{font-size:11px;font-weight:600;color:var(--color-text-light);padding:4px 8px;background:var(--color-bg-light);border-radius:12px;border:1px solid var(--color-border);white-space:nowrap;}#btn-annotation-mode.active{background:#f39c12;color:white;border-color:#f39c12;}.btn-danger-soft{background:none;border:1px solid #e74c3c;color:#e74c3c;}.btn-danger-soft:hover{background:#e74c3c;color:white;}.mockup-annotations-panel{width:var(--panel-width);background:white;border-right:1px solid var(--color-border);display:flex;flex-direction:column;overflow:hidden;}html[data-theme="dark"] .mockup-annotations-panel{background:#34495e;}.frame-content.annotation-active{cursor:crosshair;}.frame-content.annotation-active .mockup-element{cursor:pointer;}.frame-content.annotation-active .mockup-element:hover{border-color:#f39c12 !important;box-shadow:0 0 0 3px rgba(243,156,18,.2) !important;}.mockup-element.annotatable{position:relative;}.annotation-badge{position:absolute;top:-8px;right:24px;background:#f39c12;color:white;border-radius:50%;width:20px;height:20px;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 2px 6px rgba(0,0,0,.2);cursor:pointer;transition:transform .15s;}.annotation-badge:hover{transform:scale(1.2);}.annotation-empty{color:var(--color-text-light);text-align:center;padding:30px 15px;font-size:12px;line-height:1.6;}.annotation-item{padding:10px 12px;border-bottom:1px solid var(--color-border);font-size:12px;}.annotation-item:last-child{border-bottom:none;}.annotation-item-header{display:flex;justify-content:space-between;align-items:flex-start;gap:4px;margin-bottom:5px;}.annotation-elem-name{font-weight:700;color:var(--color-primary);font-size:11px;}.annotation-date{font-size:10px;color:var(--color-text-light);white-space:nowrap;}.annotation-text{color:var(--color-text);line-height:1.5;background:rgba(243,156,18,.07);border-left:3px solid #f39c12;padding:4px 8px;border-radius:0 3px 3px 0;}html[data-theme="dark"] .annotation-text{background:rgba(243,156,18,.12);}#mockup-canvas{transition:max-width .35s ease;}#mockup-canvas[data-device="mobile"]{max-width:395px;margin:0 auto;}#mockup-canvas[data-device="mobile"] .frame-container{border-radius:28px;border:10px solid #1a252f;box-shadow:0 30px 80px rgba(0,0,0,.45);overflow:auto;}#mockup-canvas[data-device="mobile"] .frame-container::before{content:'';display:block;height:24px;background:#1a252f;border-radius:0;position:relative;}#mockup-canvas[data-device="mobile"] .frame-container::after{content:'';display:block;height:16px;background:#1a252f;}#mockup-canvas[data-device="tablet"]{max-width:788px;margin:0 auto;}#mockup-canvas[data-device="tablet"] .frame-container{border-radius:16px;border:8px solid #1a252f;box-shadow:0 20px 60px rgba(0,0,0,.35);overflow:auto;}#mockup-canvas[data-device="laptop"],#mockup-canvas[data-device="desktop"],#mockup-canvas:not([data-device]){max-width:100%;margin:0;}#mockup-canvas[data-device="laptop"] .frame-container,#mockup-canvas[data-device="desktop"] .frame-container,#mockup-canvas:not([data-device]) .frame-container{border-radius:4px;border:1px solid var(--color-border);box-shadow:0 4px 12px rgba(0,0,0,.1);overflow:auto;}.device-info-bar{display:none;width:100%;text-align:center;font-size:12px;font-weight:600;color:var(--color-primary);padding:6px 0 10px;letter-spacing:.3px;background:transparent;}.mockup-editor-container.viewmode-active{position:relative;}.frame-content.readonly-mode{pointer-events:none !important;user-select:none;}.readonly-mode .mockup-element{cursor:not-allowed !important;pointer-events:none !important;}.readonly-mode .component-item{cursor:not-allowed !important;pointer-events:none !important;opacity:0.5;}.mockup-toolbar button:disabled,.mockup-toolbar select:disabled{opacity:0.3 !important;cursor:not-allowed !important;pointer-events:none !important;background-color:#e8e8e8 !important;color:#999 !important;border-color:#ccc !important;}html[data-theme="dark"] .mockup-toolbar button:disabled,html[data-theme="dark"] .mockup-toolbar select:disabled{background-color:#555 !important;color:#999 !important;border-color:#444 !important;opacity:0.4 !important;}