:root{--miro-primary: #4262ff;--miro-primary-hover: #3451d1;--miro-navy: #050038;--miro-white: #ffffff;--miro-canvas-gray: #f5f5f5;--miro-border: #e0e0e0;--miro-text-dark: #1a1a1a;--miro-text-muted: #b3b3b3;--miro-hover-gray: #f0f0f0;--miro-active-bg: #eef0ff;--miro-shadow: 0 2px 8px rgba(0,0,0,.1);--miro-shadow-card: 0 1px 4px rgba(0,0,0,.08);--miro-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--miro-radius: 8px;--miro-radius-toolbar: 12px;--miro-radius-pill: 20px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--miro-font);color:var(--miro-text-dark);background:var(--miro-white);overflow:hidden;-webkit-font-smoothing:antialiased}button{cursor:pointer;font-family:var(--miro-font);border:none;background:transparent;color:inherit}.dashboard{width:100vw;height:100vh;display:flex;flex-direction:column;background:var(--miro-white);overflow:hidden}.dashboard-header{display:flex;align-items:center;padding:20px 32px;gap:32px}.dashboard-logo{font-size:28px;font-weight:900;color:var(--miro-navy);font-style:italic;letter-spacing:-1px;flex-shrink:0;-webkit-user-select:none;user-select:none}.dashboard-search{flex:1;max-width:600px;margin:0 auto;display:flex;align-items:center;gap:12px;height:44px;padding:0 16px;border:1px solid var(--miro-border);border-radius:var(--miro-radius);background:var(--miro-white);transition:border-color .2s}.dashboard-search:focus-within{border-color:var(--miro-primary);box-shadow:0 0 0 2px #4262ff26}.dashboard-search input{border:none;outline:none;flex:1;font-size:15px;color:var(--miro-text-dark);font-family:var(--miro-font);background:transparent}.dashboard-search input::placeholder{color:var(--miro-text-muted)}.search-clear{font-size:18px;color:var(--miro-text-muted);padding:2px 6px;border-radius:50%}.search-clear:hover{background:var(--miro-hover-gray);color:var(--miro-text-dark)}.dashboard-body{display:flex;flex:1;overflow:hidden}.dashboard-sidebar{width:260px;flex-shrink:0;padding:8px 24px 24px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;border-right:1px solid var(--miro-border)}.sidebar-item{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:6px;font-size:14px;color:var(--miro-text-dark);width:100%;text-align:left;transition:background-color .15s}.sidebar-item:hover{background:var(--miro-hover-gray)}.sidebar-item.active{color:var(--miro-primary);background:var(--miro-active-bg)}.sidebar-divider{height:1px;background:var(--miro-border);margin:8px 0}.sidebar-team{padding:12px;border:1px solid var(--miro-border);border-radius:var(--miro-radius);margin:4px 0}.team-name{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;color:var(--miro-text-dark)}.team-members{font-size:13px;color:var(--miro-text-muted);margin-top:2px}.sidebar-projects-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px}.projects-title{font-size:14px;font-weight:700;color:var(--miro-text-dark)}.add-project-btn{font-size:13px;color:var(--miro-text-dark);padding:4px 12px;border:1px solid var(--miro-border);border-radius:var(--miro-radius-pill)}.add-project-btn:hover{background:var(--miro-hover-gray)}.dashboard-main{flex:1;padding:0 32px 32px;overflow-y:auto}.dashboard-section-title{font-size:28px;font-weight:700;color:var(--miro-navy);margin-bottom:24px}.board-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px}.board-card{border-radius:var(--miro-radius);border:1px solid var(--miro-border);background:var(--miro-white);cursor:pointer;transition:box-shadow .2s,transform .15s;overflow:hidden}.board-card:hover{box-shadow:0 2px 12px #00000026;transform:translateY(-1px)}.board-card:hover .board-card-menu-btn{opacity:1}.new-board-card{background:var(--miro-primary);border-color:var(--miro-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px}.new-board-card:hover{background:var(--miro-primary-hover);border-color:var(--miro-primary-hover)}.new-board-icon{margin-bottom:8px}.new-board-text{color:#fff;font-size:14px}.board-card-thumbnail{height:150px;position:relative;display:flex;align-items:center;justify-content:center;opacity:.8}.board-star{position:absolute;top:8px;right:8px;padding:4px;border-radius:50%;background:#fffc;display:flex;align-items:center;justify-content:center;z-index:2}.board-star:hover{background:#fff;box-shadow:0 1px 4px #00000026}.board-card-info{padding:12px 16px;display:flex;flex-direction:column;gap:4px}.board-card-name{font-size:14px;font-weight:500;color:var(--miro-text-dark);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-rename-input{width:100%;font-size:14px;font-weight:500;padding:2px 4px;border:2px solid var(--miro-primary);border-radius:4px;outline:none;font-family:var(--miro-font)}.board-card-meta{display:flex;align-items:center;justify-content:space-between}.board-card-date{font-size:12px;color:var(--miro-text-muted)}.board-card-menu-btn{padding:4px;border-radius:4px;opacity:0;transition:opacity .15s;color:#666}.board-card-menu-btn:hover{background:var(--miro-hover-gray)}.board-context-menu{position:fixed;z-index:1000;background:var(--miro-white);border-radius:var(--miro-radius);box-shadow:0 4px 16px #00000026;width:220px;padding:4px 0;border:1px solid var(--miro-border)}.context-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:8px 16px;font-size:14px;color:var(--miro-text-dark);text-align:left}.context-menu-item:hover{background:var(--miro-hover-gray)}.context-menu-item.danger{color:#d32f2f}.context-menu-divider{height:1px;background:var(--miro-border);margin:4px 0}.context-menu-submenu-wrapper{position:relative}.context-menu-submenu{display:none;position:absolute;left:100%;top:0;background:var(--miro-white);border-radius:var(--miro-radius);box-shadow:0 4px 16px #00000026;width:180px;padding:4px 0;border:1px solid var(--miro-border)}.context-menu-submenu-wrapper:hover .context-menu-submenu{display:block}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:2000}.modal-dialog{background:var(--miro-white);border-radius:12px;padding:24px;max-width:420px;width:90%;box-shadow:0 8px 32px #0003}.modal-dialog h3{font-size:18px;font-weight:700;margin-bottom:12px;color:var(--miro-navy)}.modal-dialog p{font-size:14px;color:#666;line-height:1.5;margin-bottom:20px}.modal-actions{display:flex;justify-content:flex-end;gap:8px}.modal-btn{padding:8px 20px;border-radius:var(--miro-radius);font-size:14px;font-weight:500}.modal-btn.cancel{border:1px solid var(--miro-border);color:var(--miro-text-dark)}.modal-btn.cancel:hover{background:var(--miro-hover-gray)}.modal-btn.danger{background:#d32f2f;color:#fff}.modal-btn.danger:hover{background:#b71c1c}.board-view{width:100vw;height:100vh;position:relative;overflow:hidden;background:var(--miro-canvas-gray)}.top-bar{position:fixed;top:0;left:0;right:0;height:56px;background:var(--miro-white);border-bottom:1px solid var(--miro-border);z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 16px}.top-bar-left{display:flex;align-items:center;gap:12px}.top-bar-logo{font-size:20px;font-weight:900;color:var(--miro-navy);font-style:italic;letter-spacing:-.5px;padding:4px 8px;border-radius:6px;-webkit-user-select:none;user-select:none}.top-bar-logo:hover{background:var(--miro-hover-gray)}.top-bar-divider{width:1px;height:24px;background:var(--miro-border)}.board-name-display{font-size:16px;color:var(--miro-text-dark);padding:4px 8px;border-radius:4px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.board-name-display:hover{background:var(--miro-hover-gray)}.board-name-input{font-size:16px;padding:4px 8px;border:2px solid var(--miro-primary);border-radius:4px;outline:none;font-family:var(--miro-font);max-width:200px}.top-bar-icon-group{display:flex;align-items:center;gap:2px}.top-bar-icon-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;color:#666}.top-bar-icon-btn:hover{background:var(--miro-hover-gray);color:var(--miro-text-dark)}.top-bar-center{display:flex;align-items:center;gap:4px;padding:4px;background:var(--miro-white);border:1px solid var(--miro-border);border-radius:var(--miro-radius)}.collab-btn{display:flex;align-items:center;gap:4px;padding:6px 10px;height:32px;border-radius:6px;font-size:13px;color:#666}.collab-btn:hover{background:var(--miro-hover-gray)}.top-bar-right{display:flex;align-items:center;gap:8px}.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--miro-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;border:2px solid #ddd}.share-btn{display:flex;align-items:center;gap:6px;height:36px;padding:0 16px;border-radius:var(--miro-radius-pill);background:var(--miro-primary);color:#fff;font-size:14px;font-weight:500;transition:background .15s}.share-btn:hover{background:var(--miro-primary-hover)}.left-toolbar{position:fixed;left:12px;top:80px;width:56px;background:var(--miro-white);border-radius:var(--miro-radius-toolbar);box-shadow:var(--miro-shadow);z-index:90;display:flex;flex-direction:column;padding:8px;gap:0}.toolbar-tools{display:flex;flex-direction:column;gap:2px}.toolbar-separator{height:1px;background:var(--miro-border);margin:6px 0}.toolbar-actions{display:flex;flex-direction:column;gap:2px}.toolbar-tool-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;color:var(--miro-navy);position:relative;transition:background-color .15s}.toolbar-tool-btn:hover{background:var(--miro-hover-gray)}.toolbar-tool-btn.active{background:var(--miro-active-bg);color:var(--miro-primary)}.tool-dot{position:absolute;top:6px;right:6px;width:6px;height:6px;border-radius:50%;background:var(--miro-primary)}.canvas-area{position:absolute;top:56px;left:0;right:0;bottom:0;overflow:hidden;background:var(--miro-canvas-gray);background-image:radial-gradient(circle,#ddd 1px,transparent 1px);background-size:20px 20px}.canvas-transform{position:absolute;top:0;left:0;width:0;height:0}.canvas-item{position:absolute;-webkit-user-select:none;user-select:none}.canvas-item.selected{outline:2px solid var(--miro-primary);outline-offset:2px;box-shadow:0 0 0 4px #4262ff33}.sticky-note-item{border-radius:2px;box-shadow:2px 2px 6px #00000026;padding:12px;display:flex;align-items:stretch;position:relative}.sticky-note-item:after{content:"";position:absolute;bottom:0;right:0;width:12px;height:12px;background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.06) 50%);pointer-events:none}.sticky-note-content{display:flex;align-items:center;width:100%;height:100%;font-size:14px;line-height:1.4;word-break:break-word;overflow:hidden}.shape-item{display:flex;align-items:center;justify-content:center}.shape-content{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:8px;word-break:break-word;white-space:pre-wrap;line-height:1.3}.text-item{background:transparent}.text-item.selected{outline:1px dashed var(--miro-primary);box-shadow:none}.text-content{width:100%;min-height:100%;line-height:1.2;white-space:pre-wrap;word-break:break-word}.frame-item{border:2px dashed #d0d0d0;border-radius:4px}.frame-item.selected{outline:2px solid var(--miro-primary);outline-offset:2px}.frame-title{position:absolute;top:-28px;left:0;font-size:14px;font-weight:700;color:#666;padding:2px 8px;white-space:nowrap}.connector-item.selected path{stroke:var(--miro-primary)}.connector-caption{background:#ffffffe6;padding:2px 8px;border-radius:4px;font-size:12px;color:#666;white-space:nowrap;pointer-events:none}.zoom-controls{position:fixed;bottom:16px;right:16px;display:flex;align-items:center;gap:0;background:var(--miro-white);border-radius:var(--miro-radius);box-shadow:var(--miro-shadow);z-index:90;padding:4px}.zoom-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;color:var(--miro-text-dark)}.zoom-btn:hover{background:var(--miro-hover-gray)}.zoom-pct{font-size:13px;font-weight:500;width:48px;text-align:center;color:var(--miro-text-dark);-webkit-user-select:none;user-select:none}.zoom-divider{width:1px;height:20px;background:var(--miro-border);margin:0 2px}.resize-handle{position:absolute;width:8px;height:8px;background:var(--miro-white);border:2px solid var(--miro-primary);border-radius:2px;z-index:100;pointer-events:auto}.resize-handle.small{width:6px;height:6px;border-radius:1px;border-width:1.5px}.selection-rect{border:1px solid var(--miro-primary);background:#4262ff14;pointer-events:none;z-index:9999}.canvas-item.locked{cursor:not-allowed;opacity:.7}.item-edit-textarea{width:100%;height:100%;border:none;outline:none;resize:none;background:transparent;font-family:var(--miro-font);font-size:14px;line-height:1.4;padding:0;margin:0;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:text;z-index:10}.item-edit-textarea.text-edit{min-height:100%}.frame-title-input{position:absolute;top:-30px;left:0;font-size:14px;font-weight:700;color:var(--miro-text-dark);background:var(--miro-white);border:2px solid var(--miro-primary);border-radius:4px;padding:2px 8px;outline:none;font-family:var(--miro-font);z-index:10}.context-toolbar{position:fixed;z-index:200;display:flex;align-items:center;gap:2px;padding:4px 6px;background:var(--miro-white);border-radius:var(--miro-radius);box-shadow:0 2px 12px #00000026;border:1px solid var(--miro-border);white-space:nowrap}.ct-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:4px;font-size:14px;font-weight:600;color:var(--miro-text-dark);transition:background .15s}.ct-btn:hover{background:var(--miro-hover-gray)}.ct-color-btn-wrapper{position:relative}.ct-color-swatch{display:block;width:18px;height:18px;border-radius:3px}.ct-color-picker{position:absolute;top:36px;left:50%;transform:translate(-50%);background:var(--miro-white);border-radius:var(--miro-radius);box-shadow:0 4px 16px #0003;border:1px solid var(--miro-border);padding:8px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;z-index:300}.ct-color-option{width:28px;height:28px;border-radius:4px;border:2px solid transparent;cursor:pointer;transition:transform .1s}.ct-color-option:hover{transform:scale(1.15)}.ct-color-option.active{border-color:var(--miro-primary);box-shadow:0 0 0 2px #4262ff4d}.ct-divider{width:1px;height:20px;background:var(--miro-border);margin:0 4px}.ct-select{height:28px;padding:0 8px;border:1px solid var(--miro-border);border-radius:4px;font-size:12px;font-family:var(--miro-font);color:var(--miro-text-dark);background:var(--miro-white);cursor:pointer;outline:none}.ct-select:hover{border-color:var(--miro-primary)}.canvas-context-menu{position:fixed;z-index:1000;background:var(--miro-white);border-radius:var(--miro-radius);box-shadow:0 4px 16px #00000026;width:220px;padding:4px 0;border:1px solid var(--miro-border)}.ctx-menu-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 14px;font-size:13px;color:var(--miro-text-dark);text-align:left;transition:background .1s}.ctx-menu-item:hover{background:var(--miro-hover-gray)}.ctx-menu-item.danger{color:#d32f2f}.ctx-menu-icon{width:18px;text-align:center;font-size:14px;flex-shrink:0}.ctx-menu-shortcut{margin-left:auto;font-size:11px;color:var(--miro-text-muted)}.ctx-menu-divider{height:1px;background:var(--miro-border);margin:4px 0}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#aaa}.topbar-dropdown{position:absolute;top:calc(100% + 8px);left:0;background:var(--miro-white);border:1px solid var(--miro-border);border-radius:var(--miro-radius);box-shadow:0 4px 16px #00000026;z-index:500;min-width:220px}.topbar-dropdown-header{padding:12px 16px;font-size:14px;font-weight:700;border-bottom:1px solid var(--miro-border);color:var(--miro-navy)}.topbar-dropdown-empty{padding:16px;font-size:13px;color:var(--miro-text-muted);text-align:center}.shortcuts-dialog{max-width:600px;width:95%}.shortcuts-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:16px 0}.shortcut-section{display:flex;flex-direction:column;gap:8px}.shortcut-section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--miro-text-muted);margin-bottom:4px}.shortcut-row{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--miro-text-dark)}.shortcut-key{display:inline-block;padding:2px 6px;background:var(--miro-canvas-gray);border:1px solid var(--miro-border);border-radius:4px;font-family:monospace;font-size:12px;white-space:nowrap;flex-shrink:0;min-width:32px;text-align:center}.share-link-row{display:flex;gap:8px;align-items:center;margin-top:12px}.share-link-input{flex:1;padding:8px 12px;border:1px solid var(--miro-border);border-radius:var(--miro-radius);font-size:13px;font-family:var(--miro-font);color:var(--miro-text-dark);background:var(--miro-canvas-gray);outline:none}.share-link-input:focus{border-color:var(--miro-primary)}.modal-btn.primary{background:var(--miro-primary);color:#fff}.modal-btn.primary:hover{background:var(--miro-primary-hover)}
