*{margin:0;padding:0;box-sizing:border-box}
:root{--header-height:64px;--footer-height:26px;--left-width:220px;--right-width:280px;--border:#d9e0e8;--text:#172033;--muted:#64748b;--primary:#2563eb;--primary-light:#dbeafe;--danger:#dc2626}
html,body{width:100%;height:100%;overflow:hidden}
body{font-family:Arial,Helvetica,sans-serif;background:#f1f5f9;color:var(--text);display:flex;flex-direction:column}
button,input{font:inherit}
button{user-select:none}
.app-header{width:100%;height:var(--header-height);min-height:var(--header-height);background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:15px;padding:0 14px;z-index:20}
.brand{display:flex;align-items:center;gap:9px;flex-shrink:0}.brand-logo{width:40px;height:40px;background:var(--primary);color:#fff;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:bold}.brand h1{font-size:18px}.brand p{font-size:11px;color:var(--muted);margin-top:2px}
.header-tools{display:flex;align-items:center;gap:7px;min-width:0;overflow-x:auto}.control-label{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:12px;white-space:nowrap}.control-label input[type=color]{width:32px;height:30px;cursor:pointer}.control-label input[type=range]{width:85px}.header-button{height:34px;min-width:34px;padding:0 9px;background:#fff;border:1px solid var(--border);border-radius:7px;cursor:pointer;white-space:nowrap}.header-button:hover{background:var(--primary-light);border-color:var(--primary)}.clear-button{color:var(--danger)}
.workspace{position:relative;width:100%;height:calc(100vh - var(--header-height) - var(--footer-height));min-height:0;display:flex;overflow:hidden;flex-shrink:0}
.side-panel{height:100%;flex:0 0 auto;min-width:0;background:#fff;display:flex;flex-direction:column;overflow:visible;position:relative;transition:width .22s ease,border-color .22s ease}.left-panel{width:var(--left-width);border-right:1px solid var(--border)}.right-panel{width:var(--right-width);border-left:1px solid var(--border)}
.left-panel.collapsed,.right-panel.collapsed{width:0;border-width:0}
.left-panel.collapsed .panel-header,.left-panel.collapsed .panel-content,.right-panel.collapsed .panel-header,.right-panel.collapsed .panel-content{visibility:hidden;pointer-events:none}
.panel-header{height:50px;min-height:50px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;background:#f8fafc;border-bottom:1px solid var(--border)}.panel-header h2{font-size:15px;white-space:nowrap}
.panel-toggle{position:absolute;top:50%;transform:translateY(-50%);width:24px;height:58px;border:1px solid var(--border);background:#fff;color:var(--text);cursor:pointer;z-index:1000;display:flex;align-items:center;justify-content:center;padding:0;font-size:13px;box-shadow:0 2px 8px rgba(0,0,0,.12)}.panel-toggle:hover{background:var(--primary-light);color:var(--primary)}.panel-toggle-left{right:-25px;border-radius:0 7px 7px 0}.panel-toggle-right{left:-25px;border-radius:7px 0 0 7px}
.panel-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}.shapes-content{padding:7px}.shape-button{width:100%;min-height:40px;padding:0 9px;display:flex;align-items:center;gap:10px;background:transparent;border:0;border-radius:7px;cursor:pointer;text-align:left;font-size:13px}.shape-button:hover{background:#f1f5f9}.shape-button.active-shape{background:var(--primary-light);color:var(--primary);font-weight:bold}.shape-button span:first-child{width:28px;text-align:center;font-size:20px;flex-shrink:0}
.formula-content{padding:10px}.formula-search{width:100%;height:38px;padding:0 10px;border:1px solid var(--border);border-radius:7px;outline:none;margin-bottom:10px}.formula-search:focus{border-color:var(--primary)}.formula-list{min-height:0}.formula-card{padding:10px;margin-bottom:8px;background:#f8fafc;border:1px solid var(--border);border-radius:8px}.formula-title{font-weight:bold;font-size:13px;margin-bottom:6px}.formula-expression{font-family:Georgia,serif;font-size:14px;line-height:1.5}.formula-empty-state{min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 14px;color:var(--muted)}.formula-empty-icon{width:52px;height:52px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;border-radius:12px;background:var(--primary-light);color:var(--primary);font-size:28px;font-weight:bold}.formula-empty-state h3{margin-bottom:6px;color:var(--text);font-size:15px}.formula-empty-state p{max-width:210px;font-size:12px;line-height:1.5}
.board-section{flex:1 1 0;width:0;min-width:0;min-height:0;height:100%;padding:8px;display:flex;flex-direction:column;overflow:hidden}.board-toolbar{width:100%;height:50px;min-height:50px;background:#fff;border:1px solid var(--border);border-bottom:none;border-radius:9px 9px 0 0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;overflow:hidden}.drawing-tools,.page-tools{display:flex;align-items:center;gap:5px;flex-shrink:0}.tool-button,.page-button{height:34px;min-width:34px;padding:0 8px;border:1px solid var(--border);border-radius:6px;background:#fff;cursor:pointer}.tool-button:hover,.page-button:hover{background:var(--primary-light);border-color:var(--primary)}.tool-button.active-tool{background:var(--primary);color:#fff;border-color:var(--primary)}.page-button:disabled{opacity:.4;cursor:not-allowed}.current-tool{flex:1;min-width:0;text-align:center;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-bar{width:100%;height:var(--footer-height);min-height:var(--footer-height);background:#fff;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 12px;color:var(--muted);font-size:10px}
@media(max-width:1050px){:root{--left-width:185px;--right-width:235px}.brand p{display:none}.control-label:nth-child(2){display:none}}
@media(max-width:750px){:root{--left-width:170px;--right-width:215px}.brand-text{display:none}.header-button{padding:0 6px}.board-toolbar{gap:4px;padding:0 5px}.current-tool{display:none}.panel-toggle{height:52px}.status-bar{display:none}.workspace{height:calc(100vh - var(--header-height))}.left-panel.collapsed .panel-toggle-left,.right-panel.collapsed .panel-toggle-right{display:flex}}

/* =====================================================
   STABLE COLLAPSIBLE PANELS
===================================================== */
.side-panel {
    overflow: visible;
    transition: width .22s ease, flex-basis .22s ease, border-color .22s ease;
}
.left-panel.collapsed,
.right-panel.collapsed {
    flex-basis: 0;
    width: 0;
    min-width: 0;
    overflow: visible;
}
.left-panel.collapsed .panel-header,
.left-panel.collapsed .panel-content,
.right-panel.collapsed .panel-header,
.right-panel.collapsed .panel-content {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}
.panel-toggle {
    display: flex !important;
    pointer-events: auto !important;
}

/* =====================================================
   FORMULA LIBRARY — right panel only
===================================================== */
.formula-filters{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:7px}.formula-filter{width:100%;height:34px;padding:0 7px;border:1px solid var(--border);border-radius:7px;background:#fff;color:var(--text);font-size:11px;outline:none}.formula-filter:focus{border-color:var(--primary)}.formula-count{font-size:10px;color:var(--muted);margin:0 2px 8px}.formula-note{font-size:11px;line-height:1.45;color:var(--muted);margin-top:6px}.formula-meta{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:5px}.formula-tag{font-size:9px;padding:2px 5px;border-radius:10px;background:var(--primary-light);color:var(--primary)}.formula-expression{overflow-x:auto;padding:3px 0}.formula-empty-state{min-height:180px}


.save-status{font-size:12px;opacity:.75;white-space:nowrap;padding:0 6px;line-height:32px}
@media (max-width:700px){.save-status{display:none}}