*{box-sizing:border-box;margin:0}
body,html{height:100%;font-family:"Microsoft YaHei",sans-serif;background:#f0f2f5;overflow:hidden}
.app{display:flex;flex-direction:column;height:100vh}
.top-bar{padding:8px 20px;background:#1a1a2e;color:#fff;display:flex;align-items:center;justify-content:space-between}
.top-bar h1{font-size:16px;font-weight:600}
.main{flex:1;display:flex;gap:2px;padding:8px;overflow:hidden}
.col{flex:1;display:flex;flex-direction:column;background:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.1);overflow:hidden;min-width:0;transition:all 0.3s ease;}
.col-header{padding:8px 12px;background:#f8f9fa;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.col-header .title{font-size:13px;font-weight:bold;color:#333}
.badge{font-size:11px;padding:2px 8px;border-radius:10px;color:#fff;display:inline-block;margin-right:4px}
.badge-1{background:#e74c3c}.badge-2{background:#2ecc71}.badge-3{background:#3498db}
textarea{flex:1;border:none;padding:12px;resize:none;font-size:13px;line-height:1.6;outline:none;font-family:Consolas,monospace}
#preview{flex:1;padding:20px 25px;overflow-y:auto;line-height:2.2;color:#000;font-family:"SimSun",serif;font-size:15px}
#preview .ch{font-family:"Times New Roman",serif;white-space:nowrap}
#preview .beq{display:block;text-align:center;margin:8px 0;font-family:"Times New Roman",serif;font-size:16px}
.obox{display:inline-block;width:26px;height:26px;border:1.5px solid #333;text-align:center;line-height:26px;font-size:15px;vertical-align:middle;margin:0 1px;font-family:"Times New Roman",serif}
.arr-up{color:#d35400}.arr-dn{color:#2980b9}
.btn{border:none;padding:4px 12px;border-radius:4px;cursor:pointer;font-size:12px;transition:background 0.2s}
.btn:hover{filter:brightness(0.9)}
.btn-p{background:#007bff;color:#fff}.btn-s{background:#28a745;color:#fff}.btn-w{background:#fd7e14;color:#fff}.btn-d{background:#6c757d;color:#fff}
.btn-o{background:#fff;border:1px solid #ccc;color:#333}
.arrow-sep{font-size:28px;color:#aaa;display:flex;align-items:center;padding:0 4px}
.toolbar{display:flex;gap:6px}
#toast {visibility:hidden; min-width:200px; background-color:#333; color:#fff; text-align:center; border-radius:4px; padding:10px; position:fixed; z-index:10000; left:50%; bottom:30px; transform:translateX(-50%); font-size:14px; transition:visibility 0s, opacity 0.5s linear; opacity:0;}
#toast.show {visibility:visible; opacity:1;}
.frac { display: inline-block; vertical-align: middle; text-align: center; margin: 0 4px; line-height: 1.2; font-size: 0.95em; }
.frac .num { display: block; border-bottom: 1px solid #000; padding: 0 4px; }
.frac .den { display: block; padding: 0 4px; }
.sqrt { display: inline-block; white-space: nowrap; vertical-align: middle; margin: 0 2px; }
.sqrt-sign { display: inline-block; vertical-align: bottom; font-size: 1.2em; transform: translateY(1px); }
.sqrt-content { display: inline-block; border-top: 1px solid #000; padding-top: 1px; padding-left: 2px; }
#global-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.15); z-index: 9999; cursor: crosshair; display: none; }
#global-selbox { position: fixed; border: 2px dashed #ff4757; background: rgba(255,71,87,0.15); display: none; pointer-events: none; }