@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(./KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(./KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(./KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(./KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(./KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(./KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(./KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(./KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(./KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(./KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(./KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(./KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(./KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(./KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(./KaTeX_Fraktur-Regular-CB_wures.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(./KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(./KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(./KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(./KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(./KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(./KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(./KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(./KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(./KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(./KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(./KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(./KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(./KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(./KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(./KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(./KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(./KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(./KaTeX_Math-Italic-flOr_0UB.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(./KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(./KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(./KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(./KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(./KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(./KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(./KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(./KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(./KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(./KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(./KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(./KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(./KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(./KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(./KaTeX_Size1-Regular-Dbsnue_I.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(./KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(./KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(./KaTeX_Size2-Regular-B7gKUWhC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAA4oAA4AAAAAHbQAAA3TAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAAgRQIDgmcDBEICo1oijYBNgIkA14LMgAEIAWJAAeBHAyBHBvbGiMRdnO0IkRRkiYDgr9KsJ1NUAf2kILNxgUmgqIgq1P89vcbIcmsQbRps3vCcXdYOKSWEPEKgZgQkprQQsxIXUgq0DqpGKmIvrgkeVGtEQD9DzAO29fM9jYhxZEsL2FeURH2JN4MIcTdO049NCVdxQ/w9NrSYFEBKTDKpLKfNkCGDc1RwjZLQcm3vqJ2UW9Xfa3tgAHz6ivp6vgC2yD4/6352ndnN0X0TL7seypkjZlMsjmZnf0Mm5Q+JykRWQBKCVCVPbARPXWyQtb5VgLB6Biq7/Uixcj2WGqdI8tGSgkuRG+t910GKP2D7AQH0DB9FMDW/obJZ8giFI3Wg8Cvevz0M+5m0rTh7XDBlvo9Y4vm13EXmfttwI4mBo1EG15fxJhUiCLbiiyCf/ZA6MFAhg3pGIZGdGIVjtPn6UcMk9A/UUr9PhoNsCENw1APAq0gpH73e+M+0ueyHbabc3vkbcdtzcf/fiy+NxQEjf9ud/ELBHAXJ0nk4z+MXH2Ev/kWyV4k7SkvpPc9Qr38F6RPWnM9cN6DJ0AdD1BhtgABtmoRoFCvPsBAumNm6soZG2Gk5GyVTo2sJncSyp0jQTYoR6WDvTwaaEcHsxHfvuWhHA3a6bN7twRKtcGok6NsCi7jYRrM2jExsUFMxMQYuJbMhuWNOumEJy9hi29Dmg5zMp/A5+hhPG19j1vBrq8JTLr8ki5VLPmG/PynJHVul440bxg5xuymHUFPBshC+nA9I1FmwbRBTNHAcik3Oae0cxKoI3MOriM42UrPe51nsaGxJ+WfXubAsP84aabUlQSJ1IiE0iPETLUU4CATgfXSCSpuRFRmCGbO+wSpAnzaeaCYW1VNEysRtuXCEL1kUFUbbtMv3Tilt/1c11jt3Q5bbMa84cpWipp8Elw3MZhOHsOlwwVUQM3lAR35JiFQbaYCRnMF2lxAWoOg2gyoIV4PouX8HytNIfLhqpJtXB4vjiViUI8IJ7bkC4ikkQvKksnOTKICwnqWSZ9YS5f0WCxmpgjbIq7EJcM4aI2nmhLNY2JIUgOjXZFWBHb+x5oh6cwb0Tv1ackHdKi0I9OO2wE9aogIOn540CCCziyhN+IaejtgAONKznHlHyutPrHGwCx9S6B8kfS4Mfi4Eyv7OU730bT1SCBjt834cXsf43zVjPUqqJjgrjeGnBxSG4aYAKFuVbeCfkDIjAqMb6yLNIbCuvXhMH2/+k2vkNpkORhR59N1CkzoOENvneIosjYmuTxlhUzaGEJQ/iWqx4dmwpmKjrwTiTGTCVozNAYqk/zXOndWxuWSmJkQpJw3pK5KX6QrLt5LATMqpmPAQhkhK6PUjzHUn7E0gHE0kPE0iKkolgkUx9SZmVAdDgpffdyJKg3k7VmzYGCwVXGz/tXmkOIp+vcWs+EMuhhvN0h9uhfzWJziBQmCREGSIFmQIkgVpAnSBRmC//6hkLZwaVhwxlrJSOdqlFtOYxlau9F2QN5Y98xmIAsiM1HVp2VFX+DHHGg6Ecjh3vmqtidX3qHI2qycTk/iwxSt5UzTmEP92ZBnEWTk4Mx8Mpl78ZDokxg/KWb+Q0QkvdKVmq3TMW+RXEgrsziSAfNXFMhDc60N5N9jQzjfO0kBKpUZl0ZmwJ41j/B9Hz6wmRaJB84niNmQrzp9eSlQCDDzazGDdVi3P36VZQ+Jy4f9UBNp+3zTjqI4abaFAm+GShVaXlsGdF3FYzZcDI6cori4kMxUECl9IjJZpzkvitAoxKue+90pDMvcKRxLl53TmOKCmV/xRolNKSqqUxc6LStOETmFOiLZZptlZepcKiAzteG8PEdpnQpbOMNcMsR4RR2Bs0cKFEvSmIjAFcnarqwUL4lDhHmnVkwu1IwshbiCcgvOheZuYyOteufZZwlcTlLgnZ3o/WcYdzZHW/WGaqaVfmTZ1aWCceJjkbZqsfbkOtcFlUZM/jy+hXHDbaUobWqqXaeWobbLO99yG5N3U4wxco0rQGGcOLASFMXeJoham8M+/x6O2WywK2l4HGbq1CoUyC/IZikQhdq3SiuNrvAEj0AVu9x2x3lp/xWzahaxidezFVtdcb5uEnzyl0ZmYiuKI0exvCd4Xc9CV1KB0db00z92wDPde0kukbvZIWN6jUWFTmPIC/Y4UPCm8UfDTFZpZNon1qLFTkBhxzB+FjQRA2Q/YRJT8pQigslMaUpFyAG8TMlXigiqmAZX4xgijKjRlGpLE0GdplRfCaJo0JQaSxNBk6ZmMzcya0FmrcisDdn0Q3HI2sWSppYigmlM1XT/kLQZSNpMJG0WkjYbSZuDpM1F0uYhFc1HxU4m1QJjDK6iL0S5uSj5rgXc3RejEigtcRBtqYPQsiTskmO5vosV+q4VGIKbOkDg0jtRrq+Em1YloaTFar3EGr1EUC8R0kus1Uus00usL97ABr2BjXoDm/QGNhuWtMVBKOwg/i78lT7hBsAvDmwHc/ao3vmUbBmhjeYySZNWvGkfZAgISDSaDo1SVpzGDsAEkF8B+gEapViUoZgUWXcRIGFZNm6gWbAKk0bp0k1MHG9fLYtV4iS2SmLEQFARzRcnf9PUS0LVn05/J9MiRRBU3v2IrvW974v4N00L7ZMk0wXP1409CHo/an8zTRHD3eSJ6m8D4YMkZNl3M79sqeuAsr/m3f+8/yl7A50aiAEJgeBeMWzu7ui9UfUBCe2TIqZIoOd/3/udRBOQidQZUERzb2/VwZN1H/Sju82ew2H2Wfr6qvfVf3hqwDvAIpkQVFy4B9Pe9e4/XvPeceu7h3dvO56iJPf0+A6cqA2ip18ER+iFgggiuOkvj24bby0N9j2UHIkgqIt+sVgfodC4YghLSMjSZbH0VR/6dMDrYJeKHilKTemt6v6kvzvn3/RrdWtr0GoN/xL+Sex/cPYLUpepx9cz/D46UPU5KXgAQa+NDps1v6J3xP1i2HtaDB0M9aX2deA7SYff//+gUCovMmIK/qfsFcOk+4Y5ZN97XlG6zebqtMbKgeRFi51vnxTQYBUik2rS/Cn6PC8ADR8FGxsRPB82dzfND90gIcshOcYUkfjherBz53odpm6TP8txlwOZ71xmfHHOvq053qFF/MRlS3jP0ELudrf2OeN8DHvp6ZceLe8qKYvWz/7yp0u4dKPfli3CYq0O13Ih71mylJ80tOi10On8wi+F4+LWgDPeJ30msSQt9/vkmHq9/Lvo2b461mP801v3W4xTcs6CbvF9UDdrSt+A8OUbpSh55qAUFXWznBBfdeJ8a4d7ugT5tvxUza3h9m4H7ptTqiG4z0g5dc0X29OcGlhpGFMpQo9ytTS+NViZpNdvU4kWx+LKxNY10kQ1yqGXrhe4/1nvP7E+nd5A92TtaRplbHSqoIdOqtRWti+fkB5/n1+/VvCmz12pG1kpQWsfi1ftlBobm0bpngs16CHkbIwdLnParxtTV3QYRlfJ0KFskH7pdN/YDn+yRuSd7sNH3aO0DYPggk6uWuXrfOc+fa3VTxFVvKaNxHsiHmsXyCLIE5yuOeN3/Jdf8HBL/5M6shjyhxHx9BjB1O0+4NLOnjLLSxwO7ukN4jMbOIcD879KLSi6Pk61Oqm2377n8079PXEEQ7cy7OKEC9nbpet118fxweTafpt69x/Bt8UqGzNQt7aelpc44dn5cqhwf71+qKp/Zf/+a0zcizOUWpl/iBcSXip0pplkatCchoH5c5aUM8I7/dWxAej8WicPL1URFZ9BDJelUwEwTkGqUhgSlydVes95YdXvhh9Gfz/aeFWvgVb4tuLbcv4+wLdutVZv/cUonwBD/6eDlE0aSiKK/uoH3+J1wDE/jMVqY2ysGufN84oIXB0sPzy8ollX/LegY74DgJXJR57sn+VGza0x3DnuIgABFM15LmajjjsNlYj+JEZGbuRYcAMOWxFkPN2w6Wd46xo4gVWQR/X4lyI/R6K/YK0110GzudPRW7Y+UOBGTfNNzHeYT0fiH0taunBpq9HEW8OKSaBGj21L0MqenEmNRWBAWDWAk4CpNoEZJ2tTaPFgbQYj8HxtFilErs3BTRwT8uO1NXQaWfIotchmPkAF5mMBAliEmZiOGVgCG9LgRzpscMAOOwowlT3JhusdazXGSC/hxR3UlmWVwWHpOIKheqONvjyhSiTHIkVUco5bnji8m//zL7PKaT1Vl5I6UE609f+gkr6MZKVyKc7zJRmCahLsdlyA5fdQkRSan9LgnnLEyGSkaKJCJog0wAgvepWBt80+1yKln1bMVtCljfNWDueKLsWwaEbBSfSPTEmVRsUcYYMnEjcjeyCZzBXK9E9BYBXLKjOSpUDR+nEV3TFSUdQaz+ot98QxgXwx0GQ+EEUAKB2qZPkQQ0GqFD8UPFMqyaCHM24BZmSGic9EYMagKizOw9Hz50DMrDLrqqLkTAhplMictiCAx5S3BIUQdeJeLnBy2CNtMfz6cV4u8XKoFZQesbf9YZiIERiHjaNodDW6LgcirX/mPnJIkBGDUpTBhSa0EIr38D5hCIszhCM8URGBqImoWjpvpt1ebu/v3Gl3qJfMnNM+9V+kiRFyROTPHQWOcs1dNW94/ukKMPZBvDi55i5CttdeJz84DLngLqjcdwEZ87bFFR8CIG35OAkDVN6VRDZ7aq67NteYqZ2lpT8oYB2CytoBd6VuAx4WgiAsnuj3WohG+LugzXiQRDeM3XYXlULv4dp5VFYC) format("woff2"),url(./KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(./KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(./KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(./KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(./KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(./KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(./KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(./KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.18.4"}.katex .katex-mathml{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.katex-newline{display:block}.katex .katex-base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .katex-base,.katex .katex-strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .katex-vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .katex-thinbox{display:inline-flex;flex-direction:row;max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline,.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-rule,.katex .katex-underline .underline-line,.katex .mfrac .frac-line{min-height:1px}.katex .mspace{display:inline-block}.katex .katex-smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.katex-inner,.katex .llap>.katex-inner,.katex .rlap>.katex-inner{position:absolute}.katex .clap>.katex-fix,.katex .llap>.katex-fix,.katex .rlap>.katex-fix{display:inline-block}.katex .llap>.katex-inner{right:0}.katex .clap>.katex-inner,.katex .rlap>.katex-inner{left:0}.katex .clap>.katex-inner>span{margin-left:-50%;margin-right:50%}.katex .katex-rule{border:0 solid;display:inline-block;position:relative}.katex .katex-hline,.katex .katex-overline .overline-line,.katex .katex-underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .katex-hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.katex-root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .katex-sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .katex-sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .katex-sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .katex-sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .katex-sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .katex-sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .katex-sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .katex-sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .katex-sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .katex-sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .katex-sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .katex-sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .katex-sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .katex-sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .katex-sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .katex-sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .katex-sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .katex-sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .katex-sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .katex-sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .katex-sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .katex-sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .katex-sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .katex-sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .katex-sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .katex-sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .katex-sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .katex-sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .katex-sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .katex-sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .katex-sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .katex-sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .katex-sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .katex-sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .katex-sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .katex-sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .katex-sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .katex-sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .katex-sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .katex-sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .katex-sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .katex-sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .katex-sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .katex-sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .katex-sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .katex-sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .katex-sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .katex-sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .katex-sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .katex-sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .katex-sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .katex-sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .katex-sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .katex-sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .katex-sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .katex-sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .katex-sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .katex-sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .katex-sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .katex-sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .katex-sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .katex-sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .katex-sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .katex-sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .katex-sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .katex-sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .katex-sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .katex-sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .katex-sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .katex-sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .katex-sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .katex-sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .katex-sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .katex-sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .katex-sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .katex-sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .katex-sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .katex-sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .katex-sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .katex-sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .katex-sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .katex-sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .katex-sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .katex-sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .katex-sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .katex-sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .katex-sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .katex-sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .katex-sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .katex-sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .katex-sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .katex-sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .katex-sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .katex-sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .katex-sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .katex-sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .katex-sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .katex-sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .katex-sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .katex-sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .katex-sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .katex-sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .katex-sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .katex-sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .katex-sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .katex-sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .katex-sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .katex-sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .katex-sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .katex-sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .katex-sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .katex-sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .katex-sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .katex-sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .katex-sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .katex-sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .katex-sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .katex-sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .katex-sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .katex-sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .katex-sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .katex-accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .katex-accent .accent-body{position:relative}.katex .katex-accent .accent-body:not(.accent-full){width:0}.katex .katex-overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .katex-stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .katex-stretchy:after,.katex .katex-stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .katex-sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.katex-tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.katex-tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
/* ---------- theme variables ---------- */
:root,
:root[data-theme="light"] {
  --bg: #ffffff;
  --bg-side: #fafafa;
  --bg-hover: #f1f1f1;
  --bg-active: #e7e7e7;
  --bg-editor: #ffffff;
  --text: #3c3c3c;
  --text-strong: #1a1a1a;
  --text-dim: #999999;
  --border: #e8e8e8;
  --accent: #0a84ff;
  --accent-soft: rgba(10, 132, 255, 0.12);
  --code-bg: #f6f8fa;
  --code-text: #24292f;
  --quote-border: #d0d7de;
  --table-head: #f6f8fa;
  --scrollbar: rgba(0, 0, 0, 0.18);
  --selection: rgba(10, 132, 255, 0.22);
  --toolbar-bg: #f6f6f6;
  --status-bg: #f6f6f6;
  --shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

:root[data-theme="dark"] {
  --bg: #1f1f1f;
  --bg-side: #252526;
  --bg-hover: #2d2d30;
  --bg-active: #37373d;
  --bg-editor: #1f1f1f;
  --text: #c8c8c8;
  --text-strong: #e8e8e8;
  --text-dim: #7f7f7f;
  --border: #3c3c3c;
  --accent: #4da3ff;
  --accent-soft: rgba(77, 163, 255, 0.16);
  --code-bg: #2d2d30;
  --code-text: #d4d4d4;
  --quote-border: #4b4b4f;
  --table-head: #2d2d30;
  --scrollbar: rgba(255, 255, 255, 0.16);
  --selection: rgba(77, 163, 255, 0.3);
  --toolbar-bg: #2b2b2b;
  --status-bg: #2b2b2b;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* ---------- preset themes (Theme Gallery, see lib/themes.ts) ---------- */
:root[data-theme="notion"] {
  --bg: #ffffff;
  --bg-side: #f7f6f3;
  --bg-hover: #efeeeb;
  --bg-active: #e3e2de;
  --bg-editor: #ffffff;
  --text: #37352f;
  --text-strong: #191917;
  --text-dim: #9b9a97;
  --border: #e9e9e7;
  --accent: #37352f;
  --accent-soft: rgba(55, 53, 47, 0.12);
  --code-bg: #f1f0ec;
  --code-text: #37352f;
  --quote-border: #d3d1cb;
  --table-head: #f1f0ec;
  --scrollbar: rgba(55, 53, 47, 0.2);
  --selection: rgba(55, 53, 47, 0.2);
  --toolbar-bg: #f7f6f3;
  --status-bg: #f7f6f3;
  --shadow: 0 2px 10px rgba(25, 25, 23, 0.12);
}
:root[data-theme="github"] {
  --bg: #ffffff;
  --bg-side: #f6f8fa;
  --bg-hover: #f3f4f6;
  --bg-active: #eaeef2;
  --bg-editor: #ffffff;
  --text: #1f2328;
  --text-strong: #101418;
  --text-dim: #656d76;
  --border: #d0d7de;
  --accent: #0969da;
  --accent-soft: rgba(9, 105, 218, 0.12);
  --code-bg: #f6f8fa;
  --code-text: #1f2328;
  --quote-border: #d0d7de;
  --table-head: #f6f8fa;
  --scrollbar: rgba(31, 35, 40, 0.18);
  --selection: rgba(9, 105, 218, 0.25);
  --toolbar-bg: #f6f8fa;
  --status-bg: #f6f8fa;
  --shadow: 0 2px 10px rgba(16, 20, 24, 0.14);
}
:root[data-theme="nord"] {
  --bg: #2e3440;
  --bg-side: #272c36;
  --bg-hover: #333a46;
  --bg-active: #3b4252;
  --bg-editor: #2e3440;
  --text: #d8dee9;
  --text-strong: #eceff4;
  --text-dim: #7b8494;
  --border: #434c5e;
  --accent: #88c0d0;
  --accent-soft: rgba(136, 192, 208, 0.16);
  --code-bg: #3b4252;
  --code-text: #d8dee9;
  --quote-border: #4c566a;
  --table-head: #3b4252;
  --scrollbar: rgba(216, 222, 233, 0.16);
  --selection: rgba(136, 192, 208, 0.3);
  --toolbar-bg: #272c36;
  --status-bg: #272c36;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
:root[data-theme="dracula"] {
  --bg: #282a36;
  --bg-side: #21222c;
  --bg-hover: #313342;
  --bg-active: #3b3d4f;
  --bg-editor: #282a36;
  --text: #f8f8f2;
  --text-strong: #ffffff;
  --text-dim: #82828f;
  --border: #44475a;
  --accent: #bd93f9;
  --accent-soft: rgba(189, 147, 249, 0.16);
  --code-bg: #21222c;
  --code-text: #f8f8f2;
  --quote-border: #6272a4;
  --table-head: #313342;
  --scrollbar: rgba(248, 248, 242, 0.16);
  --selection: rgba(189, 147, 249, 0.3);
  --toolbar-bg: #21222c;
  --status-bg: #21222c;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
:root[data-theme="one-dark"] {
  --bg: #282c34;
  --bg-side: #21252b;
  --bg-hover: #2c313a;
  --bg-active: #353b45;
  --bg-editor: #282c34;
  --text: #abb2bf;
  --text-strong: #e6e6e6;
  --text-dim: #5c6370;
  --border: #3e4451;
  --accent: #61afef;
  --accent-soft: rgba(97, 175, 239, 0.16);
  --code-bg: #21252b;
  --code-text: #abb2bf;
  --quote-border: #4b5263;
  --table-head: #2c313a;
  --scrollbar: rgba(171, 178, 191, 0.16);
  --selection: rgba(97, 175, 239, 0.3);
  --toolbar-bg: #21252b;
  --status-bg: #21252b;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
:root[data-theme="everforest"] {
  --bg: #2f383e;
  --bg-side: #272f34;
  --bg-hover: #374247;
  --bg-active: #414b50;
  --bg-editor: #2f383e;
  --text: #d3c6aa;
  --text-strong: #efe5c8;
  --text-dim: #859289;
  --border: #475258;
  --accent: #a7c080;
  --accent-soft: rgba(167, 192, 128, 0.16);
  --code-bg: #272f34;
  --code-text: #d3c6aa;
  --quote-border: #56645c;
  --table-head: #374247;
  --scrollbar: rgba(211, 198, 170, 0.16);
  --selection: rgba(167, 192, 128, 0.3);
  --toolbar-bg: #272f34;
  --status-bg: #272f34;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
:root[data-theme="solarized"] {
  --bg: #fdf6e3;
  --bg-side: #f4eccc;
  --bg-hover: #eee8d5;
  --bg-active: #e2dcc4;
  --bg-editor: #fdf6e3;
  --text: #657b83;
  --text-strong: #073642;
  --text-dim: #93a1a1;
  --border: #e2dcc4;
  --accent: #268bd2;
  --accent-soft: rgba(38, 139, 210, 0.14);
  --code-bg: #eee8d5;
  --code-text: #586e75;
  --quote-border: #d3cba8;
  --table-head: #eee8d5;
  --scrollbar: rgba(101, 123, 131, 0.2);
  --selection: rgba(38, 139, 210, 0.25);
  --toolbar-bg: #f4eccc;
  --status-bg: #f4eccc;
  --shadow: 0 2px 10px rgba(7, 54, 66, 0.15);
}
:root[data-theme="newsprint"] {
  --bg: #f3efe9;
  --bg-side: #ebe5db;
  --bg-hover: #e3dcd0;
  --bg-active: #d8cfbf;
  --bg-editor: #f3efe9;
  --text: #4d433c;
  --text-strong: #2e2823;
  --text-dim: #9a8f83;
  --border: #d9d0c2;
  --accent: #b44c43;
  --accent-soft: rgba(180, 76, 67, 0.14);
  --code-bg: #ebe5db;
  --code-text: #4d433c;
  --quote-border: #cfc3b0;
  --table-head: #ebe5db;
  --scrollbar: rgba(77, 67, 60, 0.2);
  --selection: rgba(180, 76, 67, 0.22);
  --toolbar-bg: #ebe5db;
  --status-bg: #ebe5db;
  --shadow: 0 2px 10px rgba(46, 40, 35, 0.16);
}
:root[data-theme="cobalt"] {
  --bg: #193549;
  --bg-side: #12283a;
  --bg-hover: #1f4057;
  --bg-active: #274b64;
  --bg-editor: #193549;
  --text: #ffebcb;
  --text-strong: #ffffff;
  --text-dim: #7a9bb0;
  --border: #234d63;
  --accent: #ffc600;
  --accent-soft: rgba(255, 198, 0, 0.18);
  --code-bg: #12283a;
  --code-text: #ffebcb;
  --quote-border: #3a6a85;
  --table-head: #1f4057;
  --scrollbar: rgba(255, 235, 203, 0.18);
  --selection: rgba(255, 198, 0, 0.3);
  --toolbar-bg: #12283a;
  --status-bg: #12283a;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
/* 借鉴 Typora notional-style（导入为内置预设，用户 2026-09-01）—— 亮色 */
:root[data-theme="notion-style"] {
  --bg: #ffffff;
  --bg-side: #f7f6f3;
  --bg-hover: #efeeeb;
  --bg-active: #e3e2de;
  --bg-editor: #ffffff;
  --text: #37352f;
  --text-strong: #191917;
  --text-dim: #9b9a97;
  --border: #e1e7e8;
  --accent: #c1cacc;
  --accent-soft: rgba(193, 202, 204, 0.3);
  --code-bg: #ededeb;
  --code-text: #eb5757;
  --quote-border: #d3d1cb;
  --table-head: #f1f0ec;
  --scrollbar: rgba(55, 53, 47, 0.2);
  --selection: rgba(193, 202, 204, 0.35);
  --toolbar-bg: #f7f6f3;
  --status-bg: #f7f6f3;
  --shadow: 0 2px 10px rgba(25, 25, 23, 0.12);
}
/* 借鉴 Typora notional-style（导入为内置预设，用户 2026-09-01）—— 暗色 */
:root[data-theme="notion-style-dark"] {
  --bg: #191919;
  --bg-side: #202020;
  --bg-hover: #2a2a2a;
  --bg-active: #2c2c2c;
  --bg-editor: #191919;
  --text: #d4d4d4;
  --text-strong: #f5f5f5;
  --text-dim: #7c7c7c;
  --border: #3d3d3d;
  --accent: #9ca6a8;
  --accent-soft: rgba(156, 166, 168, 0.18);
  --code-bg: #292927;
  --code-text: #eb5757;
  --quote-border: #43474b;
  --table-head: #202020;
  --scrollbar: rgba(212, 212, 212, 0.16);
  --selection: rgba(156, 166, 168, 0.3);
  --toolbar-bg: #202020;
  --status-bg: #202020;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

/* ---- 导入的 Typora 主题（用户 2026-09-01） ---- */
:root[data-theme="liquid"] {
  --bg: #f8f8fa; --bg-side: #f3f3f5; --bg-hover: #ecedf2; --bg-active: #e2e4ec;
  --bg-editor: #ffffff; --text: #2f3136; --text-strong: #1a1b1f; --text-dim: #8a8f9c;
  --border: #d6d9e0; --accent: #6f79ff; --accent-soft: rgba(111, 121, 255, 0.14);
  --code-bg: #f6f3fb; --code-text: #785ec8; --quote-border: #c9ccd6; --table-head: #f7f8fb;
  --scrollbar: rgba(47, 49, 54, 0.18); --selection: rgba(111, 121, 255, 0.22);
  --toolbar-bg: #f3f3f5; --status-bg: #f3f3f5; --shadow: 0 2px 12px rgba(73, 90, 149, 0.12);
}
:root[data-theme="liquid-dark"] {
  --bg: #2a3040; --bg-side: #222838; --bg-hover: #32394d; --bg-active: #3a4153;
  --bg-editor: #2a3040; --text: #f2f3f8; --text-strong: #ffffff; --text-dim: #b4bccf;
  --border: #4a5368; --accent: #6f79ff; --accent-soft: rgba(111, 121, 255, 0.24);
  --code-bg: #3a4153; --code-text: #b5a0ff; --quote-border: #4a5368; --table-head: #2f3748;
  --scrollbar: rgba(242, 243, 248, 0.16); --selection: rgba(111, 121, 255, 0.34);
  --toolbar-bg: #222838; --status-bg: #222838; --shadow: 0 2px 14px rgba(13, 18, 33, 0.45);
}
:root[data-theme="sonnet"] {
  --bg: #faf9f5; --bg-side: #f1efe8; --bg-hover: #eeebe2; --bg-active: #e6e2d6;
  --bg-editor: #faf9f5; --text: #2f2e2c; --text-strong: #211f1c; --text-dim: #8c887c;
  --border: #ddd8c9; --accent: #b0613e; --accent-soft: rgba(176, 97, 62, 0.14);
  --code-bg: #efede5; --code-text: #8a2424; --quote-border: #d3cec0; --table-head: #f1efe8;
  --scrollbar: rgba(47, 46, 44, 0.18); --selection: rgba(176, 97, 62, 0.2);
  --toolbar-bg: #f1efe8; --status-bg: #f1efe8; --shadow: 0 2px 12px rgba(60, 52, 40, 0.12);
}
:root[data-theme="sonnet-dark"] {
  --bg: #262624; --bg-side: #201f1d; --bg-hover: #30302d; --bg-active: #383833;
  --bg-editor: #262624; --text: #c2c0b6; --text-strong: #efeee6; --text-dim: #828072;
  --border: #3d3c38; --accent: #e0a458; --accent-soft: rgba(224, 164, 88, 0.18);
  --code-bg: #333330; --code-text: #f4a9a9; --quote-border: #454440; --table-head: #30302d;
  --scrollbar: rgba(194, 192, 182, 0.16); --selection: rgba(224, 164, 88, 0.3);
  --toolbar-bg: #201f1d; --status-bg: #201f1d; --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
:root[data-theme="formal"] {
  --bg: #ffffff; --bg-side: #f6f6f6; --bg-hover: #eeeeee; --bg-active: #e4e4e4;
  --bg-editor: #ffffff; --text: #000000; --text-strong: #000000; --text-dim: #6f6f6f;
  --border: #e0e0e0; --accent: #3A8850; --accent-soft: rgba(58, 136, 80, 0.14);
  --code-bg: #f5f5f5; --code-text: #333333; --quote-border: #cdd7cd; --table-head: #f5f5f5;
  --scrollbar: rgba(0, 0, 0, 0.18); --selection: rgba(58, 136, 80, 0.22);
  --toolbar-bg: #f6f6f6; --status-bg: #f6f6f6; --shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}
:root[data-theme="mist-blue"] {
  --bg: #d9dee8; --bg-side: #ccd3de; --bg-hover: #cfd6e2; --bg-active: #c2cad8;
  --bg-editor: #dfe4ed; --text: #2b3a47; --text-strong: #17222d; --text-dim: #6d7b8c;
  --border: #b3bdcc; --accent: #4c6f91; --accent-soft: rgba(76, 111, 145, 0.16);
  --code-bg: #c8d0dd; --code-text: #2f5e88; --quote-border: #aab5c7; --table-head: #d4dbe6;
  --scrollbar: rgba(43, 58, 71, 0.2); --selection: rgba(76, 111, 145, 0.28);
  --toolbar-bg: #ccd3de; --status-bg: #ccd3de; --shadow: 0 2px 12px rgba(43, 58, 71, 0.16);
}
:root[data-theme="sweet-sweet"] {
  --bg: #434A60; --bg-side: #3a4256; --bg-hover: #4d5f6f; --bg-active: #57687a;
  --bg-editor: #434A60; --text: #ebebf4; --text-strong: #ffffff; --text-dim: #bcbce3;
  --border: #586180; --accent: #fff8d4; --accent-soft: rgba(255, 248, 212, 0.18);
  --code-bg: #3a415a; --code-text: #fff8d4; --quote-border: #5a6484; --table-head: #4d5f6f;
  --scrollbar: rgba(235, 235, 244, 0.16); --selection: rgba(255, 248, 212, 0.28);
  --toolbar-bg: #3a4256; --status-bg: #3a4256; --shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}
:root[data-theme="morandigarden"] {
  --bg: #FBFDFB; --bg-side: #EFF4EF; --bg-hover: #EAF1EC; --bg-active: #E1EAE3;
  --bg-editor: #FBFDFB; --text: #403C3C; --text-strong: #2b2828; --text-dim: #85807c;
  --border: #DDE6DF; --accent: #506956; --accent-soft: rgba(80, 105, 86, 0.14);
  --code-bg: #F0F5F3; --code-text: #403C3C; --quote-border: #d0dcd4; --table-head: #EFF4EF;
  --scrollbar: rgba(64, 60, 60, 0.18); --selection: rgba(80, 105, 86, 0.22);
  --toolbar-bg: #EFF4EF; --status-bg: #EFF4EF; --shadow: 0 2px 12px rgba(64, 60, 60, 0.1);
}
:root[data-theme="blackout"] {
  --bg: #1e1e1e; --bg-side: #191919; --bg-hover: #292929; --bg-active: #2d2d2d;
  --bg-editor: #1e1e1e; --text: #c6c5b8; --text-strong: #ffffff; --text-dim: #8f8f85;
  --border: #333330; --accent: #ff9100; --accent-soft: rgba(255, 145, 0, 0.2);
  --code-bg: #31302e; --code-text: #00ffa6; --quote-border: #3a3936; --table-head: #2d2d2d;
  --scrollbar: rgba(198, 197, 184, 0.16); --selection: rgba(255, 145, 0, 0.3);
  --toolbar-bg: #191919; --status-bg: #191919; --shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
:root[data-theme="mlike"] {
  --bg: #ffffff; --bg-side: #f2f3f5; --bg-hover: #eceded; --bg-active: #e4e6e8;
  --bg-editor: #ffffff; --text: #282c34; --text-strong: #1a1d24; --text-dim: #7b8089;
  --border: #d6d8dc; --accent: #00b973; --accent-soft: rgba(0, 185, 115, 0.14);
  --code-bg: #f5f5f5; --code-text: #00b973; --quote-border: #c4c8cd; --table-head: #f2f3f5;
  --scrollbar: rgba(40, 44, 52, 0.18); --selection: rgba(0, 185, 115, 0.22);
  --toolbar-bg: #f2f3f5; --status-bg: #f2f3f5; --shadow: 0 2px 12px rgba(40, 44, 52, 0.12);
}
:root[data-theme="mlike-dark"] {
  --bg: #000000; --bg-side: #0d0d0d; --bg-hover: #1a1a1a; --bg-active: #242424;
  --bg-editor: #0a0a0a; --text: #f5f5f5; --text-strong: #ffffff; --text-dim: #7f7f7f;
  --border: #2a2a2a; --accent: #00b973; --accent-soft: rgba(0, 185, 115, 0.2);
  --code-bg: #282c34; --code-text: #00b973; --quote-border: #333; --table-head: #16181d;
  --scrollbar: rgba(245, 245, 245, 0.16); --selection: rgba(0, 185, 115, 0.3);
  --toolbar-bg: #0d0d0d; --status-bg: #0d0d0d; --shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}
:root[data-theme="blubook"] {
  --bg: #183055; --bg-side: #142944; --bg-hover: #1f3a5f; --bg-active: #24456e;
  --bg-editor: #183055; --text: #ececec; --text-strong: #ffffff; --text-dim: #9aa8bd;
  --border: #2f4566; --accent: #7fb3e0; --accent-soft: rgba(127, 179, 224, 0.2);
  --code-bg: #212b3a; --code-text: #a7d4ff; --quote-border: #3a5378; --table-head: #1f3a5f;
  --scrollbar: rgba(236, 236, 236, 0.16); --selection: rgba(127, 179, 224, 0.3);
  --toolbar-bg: #142944; --status-bg: #142944; --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
/* 玻璃拟态主题（用户 2026-09-01）：topbar/底部栏/侧边栏用半透明+毛玻璃。
   topbar/statusbar/sidebar 的背景色设成半透明（rgba），配合 blur 露出底下内容。 */
:root[data-theme="memoglass"] {
  --bg: #e9edf3; --bg-side: rgba(255, 255, 255, 0.55); --bg-hover: rgba(255, 255, 255, 0.9);
  --bg-active: rgba(255, 255, 255, 0.95); --bg-editor: #f5f7fa; --text: #2b3038;
  --text-strong: #171a1f; --text-dim: #737b86; --border: rgba(120, 132, 148, 0.28);
  --accent: #4f7cff; --accent-soft: rgba(79, 124, 255, 0.16);
  --code-bg: rgba(255, 255, 255, 0.7); --code-text: #6a3fa0; --quote-border: rgba(120, 132, 148, 0.3);
  --table-head: rgba(255, 255, 255, 0.7); --scrollbar: rgba(43, 48, 56, 0.22);
  --selection: rgba(79, 124, 255, 0.24); --toolbar-bg: rgba(255, 255, 255, 0.45);
  --status-bg: rgba(255, 255, 255, 0.45); --shadow: 0 8px 28px rgba(43, 48, 56, 0.18);
}
:root[data-theme="memoglass-dark"] {
  --bg: #1a1a1a; --bg-side: rgba(44, 44, 46, 0.55); --bg-hover: rgba(58, 58, 60, 0.9);
  --bg-active: rgba(70, 70, 72, 0.95); --bg-editor: #2c2c2e; --text: #f2f2f7;
  --text-strong: #ffffff; --text-dim: #98989f; --border: rgba(255, 255, 255, 0.14);
  --accent: #7aa2ff; --accent-soft: rgba(122, 162, 255, 0.2);
  --code-bg: rgba(58, 58, 60, 0.7); --code-text: #d7a7ff; --quote-border: rgba(255, 255, 255, 0.18);
  --table-head: rgba(58, 58, 60, 0.7); --scrollbar: rgba(242, 242, 247, 0.2);
  --selection: rgba(122, 162, 255, 0.32); --toolbar-bg: rgba(44, 44, 46, 0.5);
  --status-bg: rgba(44, 44, 46, 0.5); --shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
}
/* 玻璃拟态：仅 memoglass / memoglass-dark 下让 topbar/底栏/侧边栏呈现磨砂玻璃 */
:root[data-theme="memoglass"] .toolbar,
:root[data-theme="memoglass"] .statusbar,
:root[data-theme="memoglass"] .sidebar,
:root[data-theme="memoglass-dark"] .toolbar,
:root[data-theme="memoglass-dark"] .statusbar,
:root[data-theme="memoglass-dark"] .sidebar {
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
:root[data-theme="memoglass"] .toolbar,
:root[data-theme="memoglass-dark"] .toolbar {
  border-bottom-color: transparent;
}
:root[data-theme="memoglass"] .statusbar,
:root[data-theme="memoglass-dark"] .statusbar,
:root[data-theme="memoglass"] .sidebar,
:root[data-theme="memoglass-dark"] .sidebar {
  border-color: transparent;
}

/* ---- Nexus OS 风格（用户 2026-09：浅蓝白渐变 + 白色毛玻璃面板 + 靛蓝点缀）---- */
:root[data-theme="nexus"] {
  --bg: #eef2fa;
  --bg-side: rgba(255, 255, 255, 0.6);
  --bg-hover: rgba(255, 255, 255, 0.85);
  --bg-active: rgba(255, 255, 255, 0.97);
  --bg-editor: rgba(255, 255, 255, 0.62);
  --text: #334155;
  --text-strong: #0f172a;
  --text-dim: #94a3b8;
  --border: rgba(148, 163, 184, 0.3);
  --accent: #4f46e5;
  --accent-soft: rgba(79, 70, 229, 0.14);
  --code-bg: rgba(255, 255, 255, 0.7);
  --code-text: #6a3fa0;
  --quote-border: rgba(148, 163, 184, 0.3);
  --table-head: rgba(255, 255, 255, 0.7);
  --scrollbar: rgba(51, 65, 85, 0.2);
  --selection: rgba(79, 70, 229, 0.22);
  --toolbar-bg: rgba(255, 255, 255, 0.55);
  --status-bg: rgba(255, 255, 255, 0.55);
  --shadow: 0 10px 30px rgba(30, 41, 59, 0.14);
}
/* 浅蓝白渐变背景 */
:root[data-theme="nexus"] .app {
  background:
    radial-gradient(110% 80% at 12% 6%, rgba(219, 234, 254, 0.9) 0%, rgba(219, 234, 254, 0) 55%),
    radial-gradient(120% 90% at 88% 88%, rgba(224, 231, 255, 0.85) 0%, rgba(224, 231, 255, 0) 55%),
    linear-gradient(135deg, #f8fafc 0%, #eff6ff 55%, #e9eef8 100%);
}
/* 白色毛玻璃面板：顶栏 / 侧边栏 / 底栏 */
:root[data-theme="nexus"] .toolbar,
:root[data-theme="nexus"] .statusbar,
:root[data-theme="nexus"] .sidebar {
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
:root[data-theme="nexus"] .toolbar { border-bottom-color: transparent; }
:root[data-theme="nexus"] .statusbar,
:root[data-theme="nexus"] .sidebar { border-color: transparent; }
/* 编辑器背景更透明，让渐变透出 */
:root[data-theme="nexus"] .editor-area {
  background: transparent;
  background-image: none;
}
:root[data-theme="nexus"] .milkdown-wrap,
:root[data-theme="nexus"] .editor-root {
  background: transparent;
}
/* 数据库表格卡片：白色圆角玻璃卡（表头已分离，外观在 .db-card 上） */
:root[data-theme="nexus"] .db-card {
  --db-bg: rgba(255, 255, 255, 0.75) !important;
  --db-header-bg: rgba(248, 250, 252, 0.9) !important;
  --db-row-bg: rgba(255, 255, 255, 0.6) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: var(--shadow);
}

/* ---- Nebula / Spatial（用户 2026-09：深蓝→暖红纹理渐变 + 浮起圆角毛玻璃外壳）---- */
:root[data-theme="spatial"] {
  --bg: #0a1026; --bg-side: rgba(20, 24, 48, 0.5); --bg-hover: rgba(255, 255, 255, 0.1);
  --bg-active: rgba(255, 255, 255, 0.16); --bg-editor: rgba(10, 14, 34, 0.22);
  --text: #eef0ff; --text-strong: #ffffff; --text-dim: #aab1d0;
  --border: rgba(255, 255, 255, 0.1);
  --accent: #8b7bff; --accent-soft: rgba(139, 123, 255, 0.22);
  --code-bg: rgba(255, 255, 255, 0.08); --code-text: #cdb7ff; --quote-border: rgba(255, 255, 255, 0.16);
  --table-head: rgba(255, 255, 255, 0.08); --scrollbar: rgba(238, 240, 255, 0.18);
  --selection: rgba(139, 123, 255, 0.3); --toolbar-bg: rgba(16, 20, 44, 0.42);
  --status-bg: rgba(16, 20, 44, 0.42); --shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
/* 深空星云背景（固定层，位于所有内容后面） */
:root[data-theme="spatial"] .app {
  background:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(1.6px 1.6px at 18% 26%, rgba(255, 255, 255, 0.55), transparent 55%),
    radial-gradient(1.4px 1.4px at 62% 18%, rgba(255, 255, 255, 0.4), transparent 55%),
    radial-gradient(1.8px 1.8px at 78% 54%, rgba(255, 255, 255, 0.5), transparent 55%),
    radial-gradient(1.4px 1.4px at 34% 62%, rgba(255, 255, 255, 0.35), transparent 55%),
    radial-gradient(1.7px 1.7px at 88% 30%, rgba(255, 240, 220, 0.5), transparent 55%),
    radial-gradient(120% 90% at 82% 90%, rgba(150, 60, 40, 0.5) 0%, rgba(150, 60, 40, 0) 55%),
    radial-gradient(110% 80% at 8% 6%, rgba(70, 90, 200, 0.55) 0%, rgba(70, 90, 200, 0) 62%),
    linear-gradient(135deg, #0a1026 0%, #141a3c 38%, #3a2a44 70%, #6e3a2c 100%);
}
/* 浮起圆角毛玻璃：顶栏 / 侧边栏 / 底栏（圆角/边框/毛玻璃模糊/色调均可调） */
:root[data-theme="spatial"] .toolbar,
:root[data-theme="spatial"] .statusbar,
:root[data-theme="spatial"] .sidebar {
  backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  border: 1px solid rgba(255, 255, 255, var(--ui-border, 0.1));
  box-shadow: var(--shadow);
  border-radius: var(--ui-radius, 16px);
  background: var(--ui-glass-bg, rgba(16, 20, 44, 0.42));
}
:root[data-theme="spatial"] .toolbar {
  margin: 10px 14px 0;
}
:root[data-theme="spatial"] .statusbar {
  margin: 0 14px 12px;
}
:root[data-theme="spatial"] .sidebar {
  margin: 8px 0 12px 14px;
}
/* 设置等弹窗也用毛玻璃（用户 2026-09：设置界面需要毛玻璃背景） */
:root[data-theme="spatial"] .modal {
  background: rgba(14, 18, 40, 0.62);
  backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  border: 1px solid rgba(255, 255, 255, var(--ui-border, 0.12));
  border-radius: var(--ui-radius, 16px);
}
:root[data-theme="spatial-light"] .modal {
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  border: 1px solid rgba(40, 40, 90, var(--ui-border, 0.12));
  border-radius: var(--ui-radius, 16px);
}

/* ---- Nebula Light（用户 2026-09：浅色星云 + 浮起圆角毛玻璃）---- */
:root[data-theme="spatial-light"] {
  --bg: #eef1ff; --bg-side: rgba(255, 255, 255, 0.55); --bg-hover: rgba(255, 255, 255, 0.8);
  --bg-active: rgba(255, 255, 255, 0.95); --bg-editor: rgba(255, 255, 255, 0.3);
  --text: #23262f; --text-strong: #10121a; --text-dim: #6b7080;
  --border: rgba(40, 40, 90, 0.14);
  --accent: #6b5bff; --accent-soft: rgba(107, 91, 255, 0.16);
  --code-bg: rgba(255, 255, 255, 0.7); --code-text: #6a3fa0; --quote-border: rgba(40, 40, 90, 0.2);
  --table-head: rgba(255, 255, 255, 0.7); --scrollbar: rgba(35, 38, 47, 0.2);
  --selection: rgba(107, 91, 255, 0.22); --toolbar-bg: rgba(255, 255, 255, 0.5);
  --status-bg: rgba(255, 255, 255, 0.5); --shadow: 0 12px 32px rgba(40, 40, 90, 0.18);
}
:root[data-theme="spatial-light"] .app {
  background:
    radial-gradient(1.6px 1.6px at 18% 26%, rgba(70, 70, 120, 0.35), transparent 55%),
    radial-gradient(1.4px 1.4px at 62% 18%, rgba(70, 70, 120, 0.25), transparent 55%),
    radial-gradient(1.8px 1.8px at 78% 54%, rgba(120, 60, 40, 0.3), transparent 55%),
    radial-gradient(120% 90% at 82% 90%, rgba(255, 180, 150, 0.45) 0%, rgba(255, 180, 150, 0) 55%),
    radial-gradient(110% 80% at 8% 6%, rgba(180, 190, 255, 0.5) 0%, rgba(180, 190, 255, 0) 62%),
    linear-gradient(135deg, #eef1ff 0%, #e3e9ff 38%, #f8e9e6 70%, #ffe9dd 100%);
}
:root[data-theme="spatial-light"] .toolbar,
:root[data-theme="spatial-light"] .statusbar,
:root[data-theme="spatial-light"] .sidebar {
  backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  border: 1px solid rgba(40, 40, 90, var(--ui-border, 0.12));
  box-shadow: var(--shadow);
  border-radius: var(--ui-radius, 16px);
  background: var(--ui-glass-bg-light, rgba(255, 255, 255, 0.55));
}
/* 浅色 Nebula 的毛玻璃色调（可调） */
:root[data-theme="spatial-light"][data-glass-tint="warm"] { --ui-glass-bg-light: rgba(255, 243, 234, 0.6); }
:root[data-theme="spatial-light"][data-glass-tint="neutral"] { --ui-glass-bg-light: rgba(246, 246, 250, 0.6); }
:root[data-theme="spatial-light"] .toolbar { margin: 10px 14px 0; }
:root[data-theme="spatial-light"] .statusbar { margin: 0 14px 12px; }
:root[data-theme="spatial-light"] .sidebar { margin: 8px 0 12px 14px; }

/* 背景渐变流动（默认关，data-fx-flow=1 时生效；对背景为渐变的主题/层级可见） */
:root[data-fx-flow="1"] .app {
  background-size: 150% 150%;
  animation: space-flow 14s ease-in-out infinite alternate;
}
@keyframes space-flow {
  from { background-position: 0% 0%; }
  to { background-position: 100% 100%; }
}

/* 数据库：把页面渐变色“缩小”后展示在卡片上（不是透明；见用户附图）。
   .db 表头已分离，卡片外观改到悬浮卡 .db-card 上（用户 2026-09） */
:root[data-theme="spatial"] .db-card,
:root[data-theme="spatial-light"] .db-card {
  --db-bg: transparent !important;
  --db-header-bg: rgba(255, 255, 255, 0.05) !important;
  --db-row-bg: transparent !important;
  border-radius: var(--ui-radius, 16px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, var(--ui-border, 0.12)) !important;
}
:root[data-theme="spatial"] .db-card {
  background:
    radial-gradient(120% 90% at 85% 90%, rgba(150, 60, 40, 0.55), transparent 55%),
    radial-gradient(110% 80% at 10% 8%, rgba(70, 90, 200, 0.55), transparent 62%),
    linear-gradient(135deg, #0a1026 0%, #1a1d3f 45%, #3a2a44 78%, #6e3a2c 100%) !important;
}
:root[data-theme="spatial-light"] .db-card {
  background:
    radial-gradient(120% 90% at 85% 90%, rgba(255, 180, 150, 0.6), transparent 55%),
    radial-gradient(110% 80% at 10% 8%, rgba(180, 190, 255, 0.6), transparent 62%),
    linear-gradient(135deg, #eef1ff 0%, #e3e9ff 45%, #f8e9e6 78%, #ffe9dd 100%) !important;
}

/* 页面最大化过渡（时长可调 var(--ui-anim)） */
.app .milkdown-wrap,
.app .pm-bar-inner,
.app .doc-title-wrap {
  transition: max-width var(--ui-anim, 0.2s) ease, width var(--ui-anim, 0.2s) ease;
}

/* 侧边栏内容随收起一起滑出（让弹出/收回是动画而非瞬切） */
.sidebar .sidebar-files,
.sidebar .sidebar-home {
  transition: transform var(--ui-anim, 0.2s) ease, opacity var(--ui-anim, 0.2s) ease;
}

/* ---- 背景效果（默认关；粒子/光晕合成一个 ::before 层，视差=背景慢速漂移）---- */
:root[data-fx-particles="1"] .app::before,
:root[data-fx-flare="1"] .app::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: var(--fx-strength, 0.4);
  background-image:
    radial-gradient(1.4px 1.4px at 14% 24%, rgba(255, 255, 255, 0.9), transparent 55%),
    radial-gradient(1.3px 1.3px at 38% 62%, rgba(255, 255, 255, 0.7), transparent 55%),
    radial-gradient(1.6px 1.6px at 66% 34%, rgba(255, 255, 255, 0.8), transparent 55%),
    radial-gradient(1.3px 1.3px at 86% 70%, rgba(255, 238, 220, 0.8), transparent 55%),
    radial-gradient(1.5px 1.5px at 52% 86%, rgba(255, 255, 255, 0.7), transparent 55%),
    radial-gradient(1.4px 1.4px at 28% 82%, rgba(255, 255, 255, 0.6), transparent 55%),
    radial-gradient(1.2px 1.2px at 74% 12%, rgba(255, 255, 255, 0.6), transparent 55%),
    radial-gradient(45% 60% at 88% 86%, rgba(255, 170, 150, 0.3), transparent 60%),
    radial-gradient(45% 60% at 10% 8%, rgba(120, 150, 255, 0.3), transparent 60%);
  animation: space-twinkle 4s ease-in-out infinite;
}
@keyframes space-twinkle {
  0%, 100% { filter: brightness(0.7); }
  50% { filter: brightness(1.25); }
}
:root[data-fx-parallax="1"] .app,
:root[data-fx-parallax="1"] body {
  background-size: 130% 130%;
}
:root[data-fx-parallax="1"][data-theme="spatial"] .app,
:root[data-fx-parallax="1"][data-theme="spatial-light"] .app,
:root[data-theme="spatial"][data-fx-parallax="1"] .app,
:root[data-theme="spatial-light"][data-fx-parallax="1"] .app {
  animation: space-drift 30s ease-in-out infinite alternate;
}
@keyframes space-drift {
  from { background-position: 0% 12%; }
  to { background-position: 100% 80%; }
}

/* 顶栏/底栏悬浮在页面上（仅 Nebula）：顶栏仅在“自动隐藏”时悬浮盖在内容上，
   否则在流内（内容不会被盖住）；左边界从侧边栏右侧开始（--sidebar-w） */
:root[data-theme="spatial"] .app.topbar-auto .toolbar,
:root[data-theme="spatial-light"] .app.topbar-auto .toolbar {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: calc(var(--sidebar-w, 0px) + 38px);
  right: calc(max(var(--outline-w, 0px), var(--ai-w, 0px)) + 38px);
  margin: 0;
  z-index: 140;
}
:root[data-theme="spatial"] .statusbar,
:root[data-theme="spatial-light"] .statusbar {
  position: absolute;
  bottom: 12px;
  left: calc(var(--sidebar-w, 0px) + 38px);
  right: calc(max(var(--outline-w, 0px), var(--ai-w, 0px)) + 38px);
  margin: 0;
  z-index: 140;
}
/* 非自动隐藏时：顶栏在流内，用 margin 让出左右侧栏宽度，避免与侧边栏重叠。
   同时给顶栏一个高于悬浮面板(130/状态栏140)的 z-index——因为 backdrop-filter
   会让顶栏自成层叠上下文，否则其下拉菜单会被 Nebula 的浮起面板盖住无法点击。 */
:root[data-theme="spatial"] .toolbar,
:root[data-theme="spatial-light"] .toolbar {
  margin-left: calc(var(--sidebar-w, 0px) + 38px);
  margin-right: calc(max(var(--outline-w, 0px), var(--ai-w, 0px)) + 38px);
  z-index: 160;
  /* 与侧边栏同步收缩/展开：侧栏收起时顶栏同时变回全宽，不提前、不重叠 */
  transition: margin-left var(--ui-anim, 0.2s) cubic-bezier(0.25, 0.1, 0.25, 1),
    margin-right var(--ui-anim, 0.2s) cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* 内容区全高、左右让出悬浮侧栏宽度 */
:root[data-theme="spatial"] .main,
:root[data-theme="spatial-light"] .main {
  height: 100%;
  padding-left: calc(var(--sidebar-w, 0px) + 38px);
  padding-right: calc(max(var(--outline-w, 0px), var(--ai-w, 0px)) + 38px);
  /* 与侧边栏同步，避免顶栏/内容区瞬间跳到全宽 */
  transition: padding-left var(--ui-anim, 0.2s) cubic-bezier(0.25, 0.1, 0.25, 1),
    padding-right var(--ui-anim, 0.2s) cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* 编辑区底部留白：让最后一行不被悬浮底栏盖住（编辑时） */
:root[data-theme="spatial"] .editor-scroll,
:root[data-theme="spatial-light"] .editor-scroll,
:root[data-theme="spatial"] .milkdown-wrap,
:root[data-theme="spatial-light"] .milkdown-wrap {
  padding-bottom: 110px;
}
/* 底栏「自动隐藏」：滑到底部外，鼠标移到最底部弹出（同顶栏） */
.statusbar.statusbar-hidden {
  transform: translateY(100%);
  pointer-events: none;
  opacity: 0.001;
}

/* ---- Nebula 顶栏（用户确认：64px、系统字体、玻璃胶囊按钮、灰底主按钮）---- */
:root[data-theme="spatial"] .toolbar,
:root[data-theme="spatial-light"] .toolbar {
  height: 64px;
  font-size: 14px;
  letter-spacing: -0.01em;
}
:root[data-theme="spatial"] .toolbar .tool-btn,
:root[data-theme="spatial-light"] .toolbar .tool-btn {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}
/* 主按钮（灰底黑字，如 AI Voice；需给对应按钮加 .primary 类） */
:root[data-theme="spatial"] .toolbar .tool-btn.primary,
:root[data-theme="spatial-light"] .toolbar .tool-btn.primary {
  background: #c9c9ce;
  color: #111;
  font-weight: 600;
  border-color: transparent;
}
:root[data-theme="spatial"] .toolbar .tool-btn.primary:hover,
:root[data-theme="spatial-light"] .toolbar .tool-btn.primary:hover {
  background: #e3e3e8;
  color: #000;
}
:root[data-theme="spatial"] .tabs-bar,
:root[data-theme="spatial-light"] .tabs-bar {
  font-size: 13px;
  letter-spacing: -0.01em;
}
/* 侧边栏更透明，与页面背景一致，减少“切割分块”感 */
:root[data-theme="spatial"] .sidebar,
:root[data-theme="spatial-light"] .sidebar {
  position: fixed;
  left: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  bottom: 12px;
  width: var(--sidebar-w, 230px);
  z-index: 130;
  border: none;
  border-radius: var(--ui-radius, 16px);
  background: var(--ui-glass-bg, rgba(16, 20, 44, 0.42)) !important;
}
/* 右侧 outline 面板同样悬浮在顶/底栏同层（贴右，圆角只在左；毛玻璃同顶栏） */
:root[data-theme="spatial"] .outline-panel,
:root[data-theme="spatial-light"] .outline-panel {
  position: fixed;
  right: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  bottom: 12px;
  width: var(--outline-w, 280px);
  z-index: 130;
  border: none;
  border-radius: var(--ui-radius, 16px);
  backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  background: var(--ui-glass-bg, rgba(16, 20, 44, 0.42)) !important;
}
/* .ai-panel（AI 对话框）同样悬浮贴右，毛玻璃同顶栏（宽度用它自己的 panelW） */
:root[data-theme="spatial"] .ai-panel,
:root[data-theme="spatial-light"] .ai-panel {
  position: fixed;
  right: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  bottom: 12px;
  z-index: 130;
  border: none;
  border-radius: var(--ui-radius, 16px);
  backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  background: var(--ui-glass-bg, rgba(16, 20, 44, 0.42)) !important;
}
/* 侧边栏拖拽条设为透明（仅保留可拖拽，不显示那条“线”） */
:root[data-theme="spatial"] .panel-resizer,
:root[data-theme="spatial-light"] .panel-resizer {
  background: transparent !important;
}
/* 编辑内容区透明，让星云成为唯一背景（内容直接浮在星云上） */
:root[data-theme="spatial"] .editor-area,
:root[data-theme="spatial-light"] .editor-area {
  background: transparent;
  background-image: none;
}
:root[data-theme="spatial"] .milkdown-wrap,
:root[data-theme="spatial-light"] .milkdown-wrap,
:root[data-theme="spatial"] .editor-root,
:root[data-theme="spatial-light"] .editor-root {
  background: transparent;
}
/* 数据库行记录侧边页（side peek）设为不透明，避免毛玻璃下文字难读 */
:root[data-theme="spatial"] .rowpage-panel,
:root[data-theme="spatial-light"] .rowpage-panel {
  background: var(--bg) !important;
}

/* ---- 星云蓝（Nexus）：与浅色 Nebula 共用同一套「浮起圆角毛玻璃块」chrome，只换配色 ----
   nexus 早期只做了贴边半透明玻璃，这里补上暖霞同款：侧栏/顶栏/底栏悬浮、圆角、毛玻璃，
   内容让位；背景与数据库卡用 nexus 自己的浅蓝白渐变。 */
:root[data-theme="nexus"] .toolbar,
:root[data-theme="nexus"] .statusbar,
:root[data-theme="nexus"] .sidebar {
  backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  border: 1px solid rgba(40, 40, 90, var(--ui-border, 0.12));
  box-shadow: var(--shadow);
  border-radius: var(--ui-radius, 16px);
  background: var(--ui-glass-bg-light, rgba(255, 255, 255, 0.6));
}
:root[data-theme="nexus"] .toolbar { margin: 10px 14px 0; }
:root[data-theme="nexus"] .statusbar { margin: 0 14px 12px; }
:root[data-theme="nexus"] .sidebar { margin: 8px 0 12px 14px; }
:root[data-theme="nexus"] .modal {
  background: rgba(255, 255, 255, 0.66);
  backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  border: 1px solid rgba(40, 40, 90, var(--ui-border, 0.12));
  border-radius: var(--ui-radius, 16px);
}
:root[data-theme="nexus"] .app.topbar-auto .toolbar {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: calc(var(--sidebar-w, 0px) + 38px);
  right: calc(max(var(--outline-w, 0px), var(--ai-w, 0px)) + 38px);
  margin: 0;
  z-index: 140;
}
:root[data-theme="nexus"] .statusbar {
  position: absolute;
  bottom: 12px;
  left: calc(var(--sidebar-w, 0px) + 38px);
  right: calc(max(var(--outline-w, 0px), var(--ai-w, 0px)) + 38px);
  margin: 0;
  z-index: 140;
}
:root[data-theme="nexus"] .toolbar {
  margin-left: calc(var(--sidebar-w, 0px) + 38px);
  margin-right: calc(max(var(--outline-w, 0px), var(--ai-w, 0px)) + 38px);
  z-index: 160;
  transition: margin-left var(--ui-anim, 0.2s) cubic-bezier(0.25, 0.1, 0.25, 1),
    margin-right var(--ui-anim, 0.2s) cubic-bezier(0.25, 0.1, 0.25, 1);
}
:root[data-theme="nexus"] .main {
  height: 100%;
  padding-left: calc(var(--sidebar-w, 0px) + 38px);
  padding-right: calc(max(var(--outline-w, 0px), var(--ai-w, 0px)) + 38px);
  transition: padding-left var(--ui-anim, 0.2s) cubic-bezier(0.25, 0.1, 0.25, 1),
    padding-right var(--ui-anim, 0.2s) cubic-bezier(0.25, 0.1, 0.25, 1);
}
:root[data-theme="nexus"] .editor-scroll,
:root[data-theme="nexus"] .milkdown-wrap {
  padding-bottom: 110px;
}
:root[data-theme="nexus"] .toolbar {
  height: 64px;
  font-size: 14px;
  letter-spacing: -0.01em;
}
:root[data-theme="nexus"] .toolbar .tool-btn {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}
:root[data-theme="nexus"] .toolbar .tool-btn.primary {
  background: #c9c9ce;
  color: #111;
  font-weight: 600;
  border-color: transparent;
}
:root[data-theme="nexus"] .toolbar .tool-btn.primary:hover {
  background: #e3e3e8;
  color: #000;
}
:root[data-theme="nexus"] .tabs-bar {
  font-size: 13px;
  letter-spacing: -0.01em;
}
:root[data-theme="nexus"] .sidebar {
  position: fixed;
  left: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  bottom: 12px;
  width: var(--sidebar-w, 230px);
  z-index: 130;
  border: none;
  border-radius: var(--ui-radius, 16px);
  background: var(--ui-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
}
:root[data-theme="nexus"] .outline-panel {
  position: fixed;
  right: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  bottom: 12px;
  width: var(--outline-w, 280px);
  z-index: 130;
  border: none;
  border-radius: var(--ui-radius, 16px);
  backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  background: var(--ui-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
}
:root[data-theme="nexus"] .ai-panel {
  position: fixed;
  right: 14px;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  bottom: 12px;
  z-index: 130;
  border: none;
  border-radius: var(--ui-radius, 16px);
  backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--ui-blur, 14px)) saturate(150%);
  background: var(--ui-glass-bg-light, rgba(255, 255, 255, 0.6)) !important;
}
:root[data-theme="nexus"] .panel-resizer {
  background: transparent !important;
}
:root[data-theme="nexus"] .editor-area {
  background: transparent;
  background-image: none;
}
:root[data-theme="nexus"] .milkdown-wrap,
:root[data-theme="nexus"] .editor-root {
  background: transparent;
}
:root[data-theme="nexus"] .rowpage-panel {
  background: var(--bg) !important;
}
/* 星云蓝的数据库卡片：浅蓝白渐变卡（表头已分离，外观在 .db-card 上） */
:root[data-theme="nexus"] .db-card {
  --db-bg: transparent !important;
  --db-header-bg: rgba(255, 255, 255, 0.55) !important;
  --db-row-bg: transparent !important;
  border-radius: var(--ui-radius, 16px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: var(--shadow);
  background:
    radial-gradient(120% 90% at 85% 90%, rgba(224, 231, 255, 0.7) 0%, rgba(224, 231, 255, 0) 55%),
    radial-gradient(110% 80% at 10% 8%, rgba(219, 234, 254, 0.7) 0%, rgba(219, 234, 254, 0) 62%),
    linear-gradient(135deg, #f8fafc 0%, #eff6ff 50%, #e9eef8 100%) !important;
}

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
  margin: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  overflow: hidden;
}

::selection {
  background: var(--selection);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- app layout ---------- */
.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  position: relative;
  /* 让出手机顶部安全区（状态栏/刘海），避免顶栏与状态栏重合（用户 2026-09-02） */
  padding-top: env(safe-area-inset-top, 0px);
}

.toolbar {
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--border);
  position: relative;
  user-select: none;
  transition: transform var(--ui-anim, 0.2s) ease;
}
.toolbar.topbar-hidden {
  transform: translateY(-100%);
}

/* auto-hide mode: the toolbar floats (out of flow) so the content fills the
   whole height when the toolbar is hidden, sliding over the content on hover */
.app.topbar-auto .toolbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
}

/* invisible strip at the top that reveals the auto-hidden toolbar on hover */
.hover-zone {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 26px;
  z-index: 90;
}
/* 底部悬停条：鼠标靠近底栏时弹出（自动隐藏的底栏） */
.hover-zone.hover-zone-bottom {
  position: fixed;
  top: auto;
  bottom: 0;
  height: 16px;
  z-index: 200;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.tool-btn {
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tool-btn:hover {
  background: var(--bg-hover);
}
.tool-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* drag-to-reorder on the top bar (right group) */
.tool-btn[draggable="true"] {
  cursor: grab;
}
.tool-btn[draggable="true"]:active {
  cursor: grabbing;
}
.tool-btn.dragging {
  opacity: 0.35;
}
.tool-btn.drop-before {
  box-shadow: inset 2px 0 0 0 var(--accent);
}
.tool-btn.drop-after {
  box-shadow: inset -2px 0 0 0 var(--accent);
}

.tool-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 6px;
}

.toolbar-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 6px 0 10px;
  flex: none;
}
.app-name {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 13px;
  letter-spacing: 0.2px;
}

/* open document tabs on the top bar — they start right after the sidebar
   toggle and take the middle space; every other button is on the right */
.toolbar-tabs {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 100%;
  padding: 0 6px;
}
.toolbar-tabs .tabs-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  background: transparent;
  border: none;
  min-height: 0;
  overflow: hidden;
  flex: 1;
}
.toolbar-tabs .tab-item {
  padding: 4px 6px 4px 10px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 12px;
  max-width: 160px;
  flex: none;
}
.toolbar-tabs .tab-item:hover {
  background: var(--bg-hover);
}
.toolbar-tabs .tab-item.active {
  background: var(--bg-active);
  border-color: var(--border);
}
.toolbar-tabs .tab-close {
  padding: 1px 2px;
}

.save-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f5a623;
}
.save-dot.saved {
  background: #34c759;
}

.menu-pop {
  position: absolute;
  top: 36px;
  right: 120px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 4px;
  z-index: 500;
  display: flex;
  flex-direction: column;
  min-width: 150px;
}
.menu-pop button {
  border: none;
  background: transparent;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
}
.menu-pop button:hover {
  background: var(--bg-hover);
}

.platform-badge {
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg-hover);
  border-radius: 10px;
  padding: 3px 8px;
  margin-left: 6px;
  white-space: nowrap;
}

/* ---------- main ---------- */
.main {
  flex: 1;
  display: flex;
  min-height: 0;
}

.sidebar {
  width: 230px;
  flex: none;
  background: var(--bg-side);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px 0 0;
  position: relative;
  overflow: hidden;
  transition: width var(--ui-anim, 0.2s) cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* 拖拽文件到侧边栏导入：高亮提示 */
.sidebar.sidebar-drop-over {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: var(--accent-soft);
}
.sidebar.sidebar-drop-over::after {
  content: "导入文件到工作区";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  z-index: 60;
}
/* auto-collapse: the whole sidebar slides left while shrinking */
.sidebar.sidebar-collapsed {
  border-right-color: transparent;
}
.sidebar.sidebar-collapsed .sidebar-files,
.sidebar.sidebar-collapsed .sidebar-home {
  transform: translateX(-110%);
}
.sidebar .sidebar-files,
.sidebar .sidebar-home {
  /* 与容器宽度(0.2s)同步，侧边栏作为一个整体收起 */
  transition: transform var(--ui-anim, 0.2s) cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ---------- resizable panel borders (drag to resize, dblclick to reset) ---------- */
.panel-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  z-index: 40;
  touch-action: none;
}
.panel-resizer.right {
  right: -3px;
}
.panel-resizer.left {
  left: -3px;
}
.panel-resizer:hover {
  background: var(--accent-soft);
}
body.panel-resizing,
body.panel-resizing * {
  cursor: ew-resize !important;
  user-select: none !important;
}
.sidebar-files {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ---------- trash (recycle bin) ---------- */
.sidebar-home {
  flex: none;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.home-open-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--text);
  font-weight: 600;
  user-select: none;
}
.home-open-btn:hover {
  background: var(--bg-hover);
}
.home-open-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}
/* whiteboard files in the sidebar show as plain file names */
.tree-row.tree-board .tree-name {
  font-weight: 500;
}
.tree-row.tree-board.current .tree-name {
  color: var(--accent);
  font-weight: 600;
}
.tree-row.tree-board.current .tree-icon {
  color: var(--accent);
}

/* ---------- whiteboard page view (board file's page shows the board image) ---------- */
.board-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 32px 32px;
  min-width: 0;
}
.board-page-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.board-page-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--text-strong);
}
.board-page-hint {
  font-size: 12.5px;
  color: var(--text-dim);
}
.board-page-img {
  flex: 1;
  min-height: 200px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--bg-hover);
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s;
}
.board-page-img:hover {
  border-color: var(--accent);
}
.board-page-img .board-embed-svg {
  width: 100%;
  height: auto;
  max-height: none;
}
.board-page-svg-wrap {
  display: block;
  max-width: 100%;
}
.board-page-svg-wrap .board-embed-svg {
  display: block;
}
.board-page-empty {
  color: var(--text-dim);
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
/* PPT 只读放映页（侧边栏单击 PPT 文件，用户 2026-08-30） */
.ppt-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px 32px 32px;
  min-width: 0;
}
.ppt-page-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.ppt-page-title { margin: 0; font-size: 26px; font-weight: 700; color: var(--text-strong); }
.ppt-page-hint { font-size: 12.5px; color: var(--text-dim); }
.ppt-page-stage {
  flex: 1;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  border-radius: 12px;
  padding: 18px;
  overflow: hidden;
  position: relative;
  user-select: none;
}
.ppt-page-slide {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}
.ppt-page-item { position: absolute; }
.ppt-page-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s;
  z-index: 20;
}
.ppt-page-stage:hover .ppt-page-nav:not(:disabled) { opacity: 1; pointer-events: auto; }
.ppt-page-nav.left { left: 12px; }
.ppt-page-nav.right { right: 12px; }
.ppt-page-nav:disabled { opacity: 0 !important; pointer-events: none !important; }
.ppt-page-nav:hover { background: #fff; }
.ppt-page-counter {
  position: absolute;
  bottom: 10px;
  right: 14px;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 8px;
  border-radius: 999px;
  z-index: 20;
}
.ppt-page-empty { color: var(--text-dim); font-size: 13px; }
.sidebar-trash {
  flex: none;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.trash-open-btn,
.graph-open-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 8px 14px;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 600;
  user-select: none;
}
.trash-open-btn:hover,
.graph-open-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.trash-count {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 9px;
  padding: 0 7px;
  font-size: 11px;
  margin-left: auto;
}
.trash-empty {
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 22px 0;
}

/* trash retention banner */
.trash-retention {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 10px;
}
.trash-retention svg {
  color: var(--accent);
  flex: none;
}

/* trash dialog (modal) */
.trash-search {
  position: relative;
  margin-bottom: 10px;
}
.trash-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  pointer-events: none;
}
.trash-search-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px 7px 30px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.trash-search-input:focus {
  border-color: var(--accent);
}
.trash-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.trash-check-all {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}
.trash-check-all input {
  accent-color: var(--accent);
  margin: 0;
}
.trash-clear-sel {
  margin-left: auto;
}
.trash-item.selected {
  background: var(--accent-soft);
}
.trash-item-check {
  accent-color: var(--accent);
  margin: 0;
  flex: none;
}
.trash-list {
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
}
.trash-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px;
}
.trash-item:hover {
  background: var(--bg-hover);
}
.trash-item-name {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trash-item-meta {
  flex: none;
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
}
.trash-item-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.trash-item-actions .tree-act {
  display: inline-flex;
  align-items: center;
  padding: 3px 5px;
}
.trash-item-actions .tree-act:hover {
  color: var(--accent);
  background: var(--bg-active);
}
.trash-item-actions .tree-act.danger:hover {
  color: #e5484d;
  background: rgba(229, 72, 77, 0.12);
}
.trash-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.trash-count-label {
  font-size: 12px;
  color: var(--text-dim);
}
.btn.danger {
  border-color: rgba(229, 72, 77, 0.5);
  color: #e5484d;
}
.btn.danger:hover {
  background: rgba(229, 72, 77, 0.1);
}

.panel-title {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  padding: 6px 14px;
  font-weight: 600;
}

/* workspace (工作区) header: renamable label + pin button */
.ws-title {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: default;
  border-radius: 6px;
  padding: 2px 4px;
  margin: 0 -4px;
}
/* workspace title-row background color (整条背景色)：按钮跟随行内文字色 */
.ws-title.has-bg .ws-pin-btn {
  color: inherit;
}
.ws-title.has-bg .ws-pin-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
}
.ws-title.has-bg .ws-title-label:hover {
  background: rgba(255, 255, 255, 0.18);
}
.ws-color-input {
  display: none;
}
/* workspace sections (分区): each top-level folder = a section with its own
   title row + content; a subtle divider separates sections */
.ws-section + .ws-section {
  margin-top: 2px;
  border-top: 1px solid var(--border);
  padding-top: 4px;
}
.ws-section-body {
  min-height: 2px;
}
.ws-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 8px;
  color: var(--text-dim);
  font-size: 12px;
}
/* 空态「新建工作区」按钮：与文字等高的文件夹图标（用户要求 2026-08-21） */
.ws-empty .ws-pin-btn {
  width: 24px;
  height: 24px;
}
.ws-empty .ws-pin-btn svg {
  width: 16px;
  height: 16px;
}
/* drag-to-reorder workspace sections: grab cursor + thick gray insertion line */
.ws-title-label {
  cursor: grab;
}
body.ws-dragging {
  user-select: none;
}
body.ws-dragging .ws-title-label {
  cursor: grabbing;
}
body.ws-dragging .ws-section {
  pointer-events: none;
}
body.ws-dragging .ws-section.ws-drag-source {
  opacity: 0.45;
}
.ws-drop-line {
  position: fixed;
  z-index: 130;
  height: 5px;
  border-radius: 3px;
  background: #8a8a8a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.ws-title-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: text;
  padding: 1px 4px;
  border-radius: 4px;
}
.ws-title-label:hover {
  background: var(--bg-hover);
}
.ws-pin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  flex: none;
}
.ws-pin-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.ws-pin-btn.active {
  color: var(--accent);
}
.ws-rename-input {
  flex: 1;
  min-width: 0;
  /* 就地编辑：字体大小/字重/大小写与标题完全一致（用户要求 2026-08-24：
     重命名时字体不能变小；text-transform 继承 uppercase，否则英文名
     从大写变回小写，视觉上像"变小"了） */
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-transform: inherit;
  /* 就地编辑：背景透明、无边框，与标题行融为一体（用户要求 2026-08-23）——
     只有光标可见，看起来就像直接在标题上打字 */
  color: inherit;
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  /* 光标颜色必须与背景区分（用户要求 2026-08-24）：无背景色时用 accent；
     有背景色（has-bg）时跟随行内文字色（wsTextColorFor 已按亮度选黑白） */
  caret-color: var(--accent);
}
.ws-title.has-bg .ws-rename-input {
  color: inherit;
  caret-color: inherit; /* 与文字同色：文字色与背景是反差的，光标必然可见 */
}
.ws-rename-input::selection {
  background: var(--accent-soft, rgba(99, 102, 241, 0.2));
}
.tree-pin-icon {
  color: var(--accent);
  flex: none;
  margin-right: 2px;
}

.tree-empty {
  padding: 16px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}

.tree-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
  border-radius: 0;
  white-space: nowrap;
  overflow: hidden;
}
.tree-row:hover {
  background: var(--bg-hover);
}
.tree-row.current {
  background: var(--bg-active);
  color: var(--text-strong);
}
.tree-arrow {
  width: 14px;
  font-size: 10px;
  color: var(--text-dim);
  flex: none;
}
.tree-arrow.leaf {
  visibility: hidden;
}
.tree-icon {
  font-size: 12px;
  flex: none;
}
.tree-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree-actions {
  display: none;
  gap: 2px;
  flex: none;
}
.tree-row:hover .tree-actions {
  display: inline-flex;
}
.tree-act {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 13px;
  padding: 0 3px;
  line-height: 1;
  border-radius: 4px;
}
.tree-act:hover {
  background: var(--bg-active);
  color: var(--text);
}
.tree-act.danger:hover {
  color: #e5484d;
  background: rgba(229, 72, 77, 0.12);
}

/* drag & drop + inline rename in the sidebar */
.tree-row[draggable="true"] {
  -webkit-user-drag: element;
  user-select: none;
}
.tree-row.tree-drag-source {
  opacity: 0.45;
}
.tree-row.tree-drag-before {
  box-shadow: inset 0 2px 0 0 var(--accent);
}
.tree-row.tree-drag-after {
  box-shadow: inset 0 -2px 0 0 var(--accent);
}
.tree-row.tree-drag-into {
  outline: 1.5px solid var(--accent);
  outline-offset: -1px;
  background: var(--accent-soft, rgba(0, 122, 255, 0.08));
}
/* workspace section highlighted while a FILE is dragged over it (drop target) */
.ws-section.ws-drop-target > .ws-title {
  outline: 1.5px solid var(--accent);
  outline-offset: -1px;
  background: var(--accent-soft, rgba(0, 122, 255, 0.12));
}
.tree-root-drag {
  outline: 1.5px dashed var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* 文件/文件夹就地重命名（用户要求 2026-08-24：与工作区重命名同形式——
   无边框、透明背景、字体与行内名称完全一致，只有光标可见） */
.tree-rename-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  border: none;
  background: transparent;
  padding: 0;
  outline: none;
  /* 光标颜色与背景区分：无背景时用 accent；当前行背景（.tree-row.current）
     用文字色（与背景反差，必然可见） */
  caret-color: var(--accent);
}
.tree-row.current .tree-rename-input {
  caret-color: inherit;
}

/* ---------- editor area ---------- */
.editor-area {
  flex: 1;
  min-width: 0;
  overflow: hidden; /* 滚动交给 .editor-scroll，标签栏固定底部不随内容滚动 */
  background: var(--page-bg-color, var(--bg-editor));
  background-image: var(--page-bg-image, none);
  background-size: var(--page-bg-size, auto);
  background-repeat: var(--page-bg-repeat, no-repeat);
  background-position: var(--page-bg-position, center);
  position: relative;
  display: flex;
  flex-direction: column;
}
/* 滚动内容区：面包屑 + 标题 + 编辑器在此滚动；标签栏在其下方固定 */
.editor-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* wrapper that hosts the WYSIWYG editor + slash menu */
.editor-root {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ================= Notion-style page meta (cover + icon) ================= */
/* the bar itself is full-width; only the inner (icon + title) is constrained */
.pm-bar {
  width: 100%;
  margin: 0 auto;
}

/* ---------- breadcrumb navigation (工作区/文件夹/…/文件) ---------- */
/* pinned to the page's TOP-LEFT corner, flush with the page's left edge */
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 14px 12px 0;
  font-size: 12.5px;
  color: var(--text-dim);
  user-select: none;
}
.crumb {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.crumb-sep {
  margin: 0 2px;
  color: var(--text-dim);
  opacity: 0.5;
  flex: none;
}
.crumb-btn {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 2px 6px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.crumb-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
/* 工作区/文件夹：仅展示，不可点击（用户要求：只有文件可点击） */
.crumb-label {
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 2px 6px;
  display: inline-flex;
  align-items: center;
  cursor: default;
  user-select: none;
}
.crumb-folder .crumb-label {
  opacity: 0.85;
}
.crumb-menu-folder {
  cursor: default;
  color: var(--text-dim);
  opacity: 0.85;
}
.crumb.current .crumb-btn {
  color: var(--text);
  font-weight: 600;
}
.crumb.virtual .crumb-btn {
  color: var(--accent);
  opacity: 0.9;
}
.crumb-more {
  padding: 2px 8px;
}
.crumb-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  min-width: 180px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 4px;
  display: flex;
  flex-direction: column;
}
.crumb-menu-item {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}
.crumb-menu-item:hover {
  background: var(--bg-hover);
}
.pm-bar-inner {
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  padding: 18px 48px 0;
  position: relative; /* anchor the hover actions above the title */
}
/* "添加封面 / 添加图标" hover hint: gray text buttons above the title,
   hidden until the mouse is over the title row; they get a gray background
   only when hovered themselves */
.pm-hover-actions {
  position: absolute;
  top: 2px;
  left: 0;
  display: flex;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 3;
}
.pm-bar-inner:hover .pm-hover-actions,
.pm-hover-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
}
.pm-hover-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
.pm-hover-action:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.pm-cover {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 0;
  background-size: cover;
  background-position: center;
}
.pm-cover-edit {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.pm-cover:hover .pm-cover-edit {
  opacity: 1;
}
.pm-icon-row {
  display: flex;
  align-items: flex-start;
  gap: 8px; /* icon sits SNUG beside the title — no big gap even in full-width */
}
.pm-icon-slot {
  flex: none;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 8px;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  cursor: pointer;
  /* center the icon on the title's FIRST text line: title padding-top (22px)
     + half the line box (30px × 1.3 / 2 = 19.5px) − half the icon height */
  margin-top: calc(22px + (30px * 1.3) / 2 - 21px);
  transition: background 0.15s;
}
.pm-icon-slot:hover {
  background: var(--bg-hover);
}
.pm-icon-slot.has {
  width: 48px;
  height: 48px;
  margin-top: calc(22px + (30px * 1.3) / 2 - 24px);
}
.pm-icon-row .doc-title {
  padding-left: 0;
  padding-top: 22px;
  margin: 0;
  flex: 1;
  min-width: 0;
}
.pm-title-wrap {
  flex: 1;
  min-width: 0;
}
/* showMeta=false（设置里隐藏封面/图标入口）时，标题仍正常显示：
   补足 pm-icon-row 缺失时标题需要的顶部留白与对齐 */
.pm-bar-inner > .pm-title-wrap > .doc-title {
  padding-top: 22px;
  margin-top: 0;
  min-height: calc(30px * 1.3);
}
/* icon floating on the cover's bottom edge (Notion style): half above, half below */
.pm-bar:has(.pm-cover) .pm-bar-inner-cover {
  position: relative;
}
.pm-bar:has(.pm-cover) .pm-bar-inner-cover .pm-icon-cover {
  position: absolute;
  left: 48px;
  top: -24px; /* 48px icon → half (24px) pokes above the cover bottom edge */
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  color: var(--text);
}
.pm-bar:has(.pm-cover) .pm-bar-inner-cover .pm-icon-cover:hover {
  background: var(--bg-hover);
}
.pm-bar:has(.pm-cover) .pm-bar-inner-cover .pm-title-wrap {
  /* make room so the title starts below the floating icon */
  padding-top: 34px;
}
.pm-bar:has(.pm-cover) .pm-bar-inner-cover .doc-title {
  padding-top: 0;
  padding-left: 0;
}
/* 只有 icon（没有封面）时：icon 放进悬浮框，悬浮在标题第一个字符上方
   （用户要求：无 cover 时 icon 与标题首字符左对齐、放在标题上方的悬浮框里，
   而不是与页面左边框对齐） */
.pm-bar:not(:has(.pm-cover)) .pm-bar-inner-cover {
  position: relative;
  padding-left: 0;
}
.pm-bar:not(:has(.pm-cover)) .pm-bar-inner-cover .pm-icon-cover {
  position: absolute;
  /* 标题首字符与正文首字符左对齐（48px；用户要求 2026-08-21），
     icon 与标题左对齐、悬浮在标题第一行上方 */
  left: 48px;
  top: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  color: var(--text);
}
.pm-bar:not(:has(.pm-cover)) .pm-bar-inner-cover .pm-icon-cover:hover {
  background: var(--bg-hover);
}
.pm-bar:not(:has(.pm-cover)) .pm-bar-inner-cover .pm-title-wrap {
  /* 标题从 icon 下方开始（icon 48px + 间距），且与有封面时的
     icon→标题间距保持一致（约 10px）；左缘与正文对齐（48px） */
  padding-left: 48px;
  padding-top: 58px;
}
.pm-bar:not(:has(.pm-cover)) .pm-bar-inner-cover .doc-title {
  padding-left: 0;
  padding-top: 0;
}

/* side rails: icon buttons stacked vertically on the left/right page edge */
.toolbar-side {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}
.toolbar-side.tb-side-left {
  left: 8px;
}
.toolbar-side.tb-side-right {
  right: 8px;
}
.toolbar-side .toolbar-more {
  display: block;
  border-top: 1px solid var(--border);
  margin-top: 3px;
  padding-top: 3px;
}
/* in side-rail mode the top bar keeps only tabs + title (icon groups move out) */
.toolbar.toolbar-side-mode .toolbar-group {
  display: none;
}
.toolbar.toolbar-side-mode .toolbar-tabs {
  flex: 1;
}

/* comment composer: anchored next to the selected text, long textarea */
.comment-dlg {
  position: fixed;
  z-index: 1000;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16);
  padding: 12px;
  width: 320px;
  max-width: calc(100vw - 24px);
}
.comment-dlg-label {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
  word-break: break-all;
}
.comment-dlg-input {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text);
  padding: 8px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
}
.comment-dlg-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.comment-dlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}

/* --- picker popovers --- */
.pm-picker {
  position: fixed;
  z-index: 1300;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16);
  padding: 10px;
  width: 320px;
}
.pm-cover-picker {
  position: fixed;
  z-index: 1300;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.16);
  padding: 10px;
  width: 360px;
}
.pm-cover-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.pm-cover-tab {
  flex: 1;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 5px 0;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.12s;
}
.pm-cover-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.pm-cover-upload {
  padding: 6px 0;
}
.pm-cover-upload-label {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  padding: 18px 10px;
  cursor: pointer;
  color: var(--text-dim);
  font-size: 13px;
}
.pm-cover-upload-label:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pm-cover-upload-label input {
  display: none;
}
.pm-cover-unsplash-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.pm-cover-unsplash-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: var(--bg-hover);
  aspect-ratio: 16 / 10;
}
.pm-cover-unsplash-item:hover {
  border-color: var(--accent);
}
.pm-cover-unsplash-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pm-cover-picker .choice-hint {
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.5;
}
.pm-picker {
  top: 120px;
  left: 50%;
  margin-left: -160px;
}
.pm-picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.pm-picker-tabs {
  display: inline-flex;
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.pm-picker-tab {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pm-picker-tab.active {
  background: var(--bg);
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}
.pm-picker-search {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  padding: 6px 10px;
  font-size: 12.5px;
  outline: none;
}
.pm-picker-close {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: inline-flex;
}
.pm-picker-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.pm-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
}
.pm-icon-cell {
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
  transition: background 0.12s;
}
.pm-icon-cell:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.pm-emoji {
  line-height: 1;
}
.pm-picker-empty {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-size: 12.5px;
  text-align: center;
  padding: 18px 0;
}
/* lucide color picker (10 colors, 2 rows of 5) */
.pm-picker-hint {
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 2px 2px 10px;
}
.pm-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.pm-color-cell {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 4px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.pm-color-cell:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.pm-color-name {
  font-size: 11px;
  color: var(--text-dim);
}
.pm-picker-foot,
.pm-cover-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.pm-picker-clear {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 6px;
}
.pm-picker-clear:hover {
  background: var(--bg-hover);
  color: #e5534b;
}
.pm-cover-presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.pm-cover-preset {
  height: 44px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  outline: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.12s, outline-color 0.12s;
}
.pm-cover-preset:hover {
  transform: scale(1.05);
  outline-color: var(--accent);
}
.pm-cover-url {
  display: flex;
  gap: 6px;
}
.pm-cover-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  padding: 6px 10px;
  font-size: 12.5px;
  outline: none;
}
.pm-cover-apply {
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12.5px;
  cursor: pointer;
}
.pm-cover-apply:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Notion-style document title */
.doc-title-wrap {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
}
.doc-title {
  display: block;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 30px 48px 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-strong);
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--doc-font);
  caret-color: var(--accent);
  resize: none;
  overflow: hidden;
  vertical-align: top;
}
.doc-title::placeholder {
  color: var(--text-dim);
  font-weight: 600;
}
/* auto-generated default title ("New page") reads as a light-gray placeholder
   until the user types their own title */
.doc-title.doc-title-default {
  color: var(--text-dim);
  font-weight: 600;
}
.doc-title.doc-title-default:focus {
  color: var(--text-strong);
}

.milkdown-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 14px 48px 120px;
  min-height: 100%;
  width: 100%;
}

.milkdown,
.milkdown .ProseMirror {
  outline: none;
}
/* 空文档占位提示：光标在空页首行时显示（灰色 50% 透明度，输入后消失） */
.tc-doc-placeholder {
  display: inline-block;
  color: var(--text-dim);
  opacity: 0.5;
  font-size: 1em;
  pointer-events: none;
  user-select: none;
  margin-right: 4px;
}

/* ---------- 页面底部标签栏 ---------- */
.page-tags-bar {
  /* 固定在编辑区底部（在 .editor-scroll 之外，不随内容滚动、回车不穿过） */
  flex: none;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  padding: 10px 48px 16px;
  background: var(--bg-editor);
  border-top: 1px solid var(--border);
}
.page-tags-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
  user-select: none;
}
.page-tags-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.page-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border: none;
  border-radius: 999px;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  user-select: none;
  transition: background 0.12s;
}
.page-tag:hover {
  background: var(--bg-active, rgba(0, 0, 0, 0.06));
}
.page-tag-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
}
.page-tag-x:hover {
  color: #e5484d;
}
.page-tag-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px dashed var(--border);
  border-radius: 50%;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0;
}
.page-tag-add:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.page-tag-input-wrap {
  display: inline-flex;
}
.page-tag-input {
  width: 110px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  padding: 3px 10px;
  outline: none;
}
.page-tag-input:focus {
  border-color: var(--accent);
}

/* selected block (clicking a block's 6-dot handle) — no visible box around
   the selected line; database/columns keep their own selected-node chrome */
.milkdown .ProseMirror-selectednode {
  outline: none;
}
/* multi-block drag selection: atom blocks inside the selection range get a
   subtle ring so the user sees the table/database/image is included */
.milkdown .ProseMirror ::selection {
  background: var(--selection, rgba(10, 132, 255, 0.18));
}

/* ---------- 6-dot block handle (drag to reorder page blocks) ---------- */
.milkdown .ProseMirror {
  position: relative;
}
.tc-block-handle {
  position: absolute;
  left: -22px;
  width: 10px;
  height: 16px;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.12s;
  color: var(--text-dim, #888);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  z-index: 5;
}
.tc-block-handle svg {
  fill: currentColor;
}
.tc-block-handle:hover {
  opacity: 1;
  color: var(--text);
  background-color: var(--bg-hover, rgba(128, 128, 128, 0.15));
}
/* show the handle when its following sibling block is hovered */
.tc-block-handle:has(+ *:hover) {
  opacity: 1;
}
.tc-block-handle-line {
  position: fixed;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent, #4f8cff);
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 0 4px var(--accent, #4f8cff);
}

.source-area {
  width: 100%;
  flex: 1;
  border: none;
  resize: none;
  outline: none;
  background: var(--bg-editor);
  color: var(--text);
  font-family: "Cascadia Code", Consolas, Menlo, "Courier New", monospace;
  font-size: 13.5px;
  line-height: 1.7;
  padding: 24px 40px;
  tab-size: 4;
}

/* ---------- milkdown typography (Typora-like) ---------- */
.milkdown {
  font-size: var(--doc-font-size, 15.5px);
  line-height: 1.75;
  color: var(--text);
  caret-color: var(--accent);
  font-family: var(--doc-font);
}

.milkdown h1,
.milkdown h2,
.milkdown h3,
.milkdown h4,
.milkdown h5,
.milkdown h6 {
  color: var(--text-strong);
  line-height: 1.35;
  margin: 1.4em 0 0.55em;
  font-weight: 600;
  scroll-margin-top: 24px;
}
.milkdown h1 {
  font-size: 1.9em;
  padding-bottom: 0.3em;
}
.milkdown h2 {
  font-size: 1.5em;
  padding-bottom: 0.25em;
}
.milkdown h3 {
  font-size: 1.25em;
}
.milkdown h4 {
  font-size: 1.1em;
}
.milkdown p {
  margin: 0.6em 0;
}
.milkdown a {
  /* 链接文字：颜色变淡 + 下划线（用户要求） */
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.milkdown a:hover {
  color: var(--text);
}
.milkdown .ProseMirror .wiki-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
  cursor: pointer;
  border-radius: 3px;
}
.milkdown .ProseMirror .wiki-link:hover {
  background: var(--accent-soft);
}

/* ---------- inline date (@Today 日期胶囊) ---------- */
.tc-date {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  font-size: 0.92em;
  line-height: 1.5;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.milkdown .ProseMirror .tc-date:hover {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* calendar popup (appended to document.body — outside PM's content DOM) */
.tc-date-picker-wrap {
  position: fixed;
  z-index: 10000;
  width: 272px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 10px;
  font-size: 13px;
  color: var(--text);
  user-select: none;
}
.tc-date-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.tc-date-picker-title { font-weight: 700; }
.tc-date-picker-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.tc-date-picker-nav:hover { background: var(--bg-hover); color: var(--text); }
.tc-date-picker-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.tc-date-picker-week span {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  padding: 2px 0;
}
.tc-date-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.tc-date-picker-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
}
.tc-date-picker-cell:hover { background: var(--bg-hover); }
.tc-date-picker-cell.empty { cursor: default; }
.tc-date-picker-cell.is-today {
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
}
.tc-date-picker-cell.is-selected {
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
}
.tc-date-picker-foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.tc-date-picker-today {
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  border-radius: 6px;
  padding: 3px 12px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
}
.tc-date-picker-today:hover { background: var(--accent-soft); }

/* ---------- backlinks / tags panel ---------- */
.wiki-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 10px;
}
.wiki-tag {
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 12px;
  cursor: pointer;
}
.wiki-tag:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- template library ---------- */
.template-search {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
}
.template-search-icon {
  color: var(--text-dim);
}
.template-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
}
.template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
}
.template-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.template-card:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.template-card-icon {
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 1px;
}
.template-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.template-card-name {
  font-size: 13px;
  font-weight: 600;
}
.template-card-desc {
  font-size: 11px;
  color: var(--text-dim);
}
.template-none {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 20px;
}

/* ---------- 模板库独立页面（用户要求：不再弹窗） ---------- */
.tpl-page {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--bg-editor);
  padding: 18px 28px 120px;
}
.tpl-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  position: sticky;
  top: 0;
  background: var(--bg-editor);
  padding: 8px 0;
  z-index: 5;
}
.tpl-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
}
.tpl-tool-btn:hover {
  background: var(--hover);
}
.tpl-tool-btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.tpl-tool-btn.danger:hover {
  color: #e5484d;
  background: rgba(229, 72, 77, 0.12);
}
.tpl-search {
  position: relative;
  display: flex;
  align-items: center;
}
.tpl-search-icon {
  position: absolute;
  left: 9px;
  color: var(--text-dim);
  pointer-events: none;
}
.tpl-search-input {
  width: 240px;
  padding: 6px 10px 6px 28px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.tpl-search-input:focus {
  border-color: var(--accent);
}
.tpl-toolbar-spacer {
  flex: 1;
}
.tpl-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  cursor: pointer;
}
.tpl-view-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft, rgba(0, 122, 255, 0.08));
}
.tpl-section {
  margin-bottom: 26px;
}
.tpl-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.tpl-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.tpl-section-count {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg-hover);
  border-radius: 10px;
  padding: 1px 8px;
}
.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.tpl-card-wrap {
  position: relative;
}
.tpl-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
}
.tpl-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}
.tpl-card-icon {
  color: var(--accent);
  margin-top: 2px;
  flex-shrink: 0;
}
.tpl-card-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.tpl-card-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.tpl-card-desc {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}
.tpl-card-sub {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 2px;
}
.tpl-card-del {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: none;
  background: var(--bg-hover);
  color: var(--text-dim);
  cursor: pointer;
}
.tpl-card-wrap:hover .tpl-card-del {
  display: inline-flex;
}
.tpl-card-del:hover {
  color: #e5484d;
  background: rgba(229, 72, 77, 0.14);
}
.tpl-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.tpl-table-row {
  display: grid;
  grid-template-columns: 1fr 180px 160px;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  background: var(--bg);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.tpl-table-row:last-child {
  border-bottom: none;
}
.tpl-table-row:hover {
  background: var(--hover);
}
.tpl-table-head {
  background: var(--bg-hover);
  font-weight: 600;
  color: var(--text-dim);
  cursor: default;
}
.tpl-table-head:hover {
  background: var(--bg-hover);
}
.tpl-table-name {
  font-weight: 500;
}
.tpl-table-cell {
  color: var(--text-dim);
  font-size: 12.5px;
}
.tpl-none {
  color: var(--text-dim);
  font-size: 13px;
  padding: 14px 2px;
}

/* ---------- database row -> page view ---------- */
.rowpage {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rowpage-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rowpage-field label {
  font-size: 12px;
  color: var(--text-dim);
}
.rowpage-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.rowpage-input:focus {
  border-color: var(--accent);
}
/* 行页面：多选/人员/文件 只读 chips */
.rowpage-multi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 0;
}
.rowpage-chip {
  background: var(--accent-soft);
  color: var(--text);
  border-radius: 5px;
  padding: 2px 8px;
  font-size: 12.5px;
}
.rowpage-dim {
  color: var(--text-dim);
  font-size: 12.5px;
}
.rowpage-title-input {
  font-size: 18px;
  font-weight: 600;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 4px 0;
}

/* ---------- row page overlay (central peek / side peek / full page) ---------- */
.rowpage-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  /* let clicks pass through the dimmed area so the user can directly click
     another row's "open" button (the panel switches in place instead of
     requiring the side page to be closed first) */
  pointer-events: none;
  /* 弹出/收回动画（用户要求 2026-08-24）：0.2s */
  animation: rowpage-overlay-in 0.2s ease;
}
.rowpage-overlay.closing {
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
@keyframes rowpage-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.rowpage-panel {
  background: var(--bg-editor, var(--bg));
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.28);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  pointer-events: auto;
  animation: rowpage-panel-in 0.2s ease;
}
@keyframes rowpage-panel-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes rowpage-panel-out {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.96); }
}
/* central peek: 80% x 80% centered */
.rowpage-mode-central .rowpage-panel {
  width: 80%;
  height: 80%;
  margin: auto;
  border-radius: 12px;
}
/* side peek: 50% width, full height on the right（右侧滑入/滑出） */
.rowpage-mode-side .rowpage-panel {
  width: 50%;
  height: 100%;
  margin-left: auto;
  border-radius: 0;
  border-left: 1px solid var(--border);
  animation: rowpage-side-in 0.2s ease;
}
@keyframes rowpage-side-in {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes rowpage-side-out {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}
.rowpage-overlay.closing .rowpage-panel {
  animation: rowpage-panel-out 0.2s ease forwards;
}
/* rowpage-mode-side 是 overlay 自身的类（不是中间元素）→ 同级类选择器 */
.rowpage-overlay.closing.rowpage-mode-side .rowpage-panel {
  animation: rowpage-side-out 0.2s ease forwards;
}
/* full page: cover everything */
.rowpage-mode-full .rowpage-panel {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.rowpage-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border);
  flex: none;
  position: relative;
}
/* row page: add cover / add icon above the title (gray borderless buttons) */
.rowpage-hover-actions {
  position: absolute;
  top: -8px;
  left: 10px;
  display: flex;
  gap: 2px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 5;
}
.rowpage-head:hover .rowpage-hover-actions,
.rowpage-hover-actions:focus-within {
  opacity: 1;
  pointer-events: auto;
}
.rowpage-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}
.rowpage-icon:hover {
  background: var(--bg-hover);
}
/* "更换图标" hint shown on hover */
.rowpage-icon-change {
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  font-size: 11px;
  color: var(--text);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 6;
}
.rowpage-icon:hover .rowpage-icon-change {
  opacity: 1;
  pointer-events: auto;
}
.rowpage-cover {
  height: 140px;
  background-size: cover;
  background-position: center;
  flex: none;
  position: relative;
}
/* "更换封面" button on hover (like the normal page cover) */
.rowpage-cover-edit {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.rowpage-cover:hover .rowpage-cover-edit {
  opacity: 1;
}
.rowpage-title {
  flex: 1;
  min-width: 0;
  font-size: 22px;
  font-weight: 700;
  border: none;
  background: transparent;
  color: var(--text);
  outline: none;
  padding: 2px 4px;
  border-radius: 4px;
}
.rowpage-title:hover {
  background: var(--bg-hover);
}
.rowpage-title:focus {
  background: var(--bg-hover);
}
.rowpage-close {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
}
.rowpage-close:hover {
  background: var(--bg-active);
  color: var(--text);
}
.rowpage-props {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.rowpage-prop {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 160px;
}
.rowpage-prop-label {
  font-size: 12px;
  color: var(--text-dim);
  flex: none;
  width: 64px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rowpage-prop .rowpage-input {
  width: 140px;
  padding: 4px 8px;
  font-size: 13px;
}
.rowpage-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 28px 48px;
}
.rowpage-body .milkdown .ProseMirror {
  padding: 8px 8px 60px;
  min-height: 100%;
  max-width: 100%;
}

/* ---------- math (LaTeX) editor dialog ---------- */
.math-editor-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--code-font, ui-monospace, "Cascadia Code", Consolas, monospace);
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--code-bg);
  color: var(--code-text);
  outline: none;
}
.math-editor-input:focus {
  border-color: var(--accent);
}
.math-editor-label {
  margin: 10px 0 4px;
  font-size: 12px;
  color: var(--text-dim);
}
.math-editor-preview {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 12px;
  min-height: 56px;
  overflow-x: auto;
  text-align: center;
}

/* ---------- image picker dialog (上传/链接/Unsplash/Giphy) ---------- */
.img-dialog-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  padding-bottom: 8px;
}
.img-dialog-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.img-dialog-tab:hover {
  background: var(--hover);
}
.img-dialog-tab.active {
  background: var(--accent-soft, rgba(0, 122, 255, 0.1));
  color: var(--accent);
  border-color: var(--accent-soft, rgba(0, 122, 255, 0.25));
}
.img-dialog-body {
  min-height: 240px;
}
.img-dialog-upload {
  display: flex;
  justify-content: center;
  padding: 24px 0;
}
.img-dialog-upload-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 40px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-soft, transparent);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
}
.img-dialog-upload-btn:hover {
  border-color: var(--accent);
  background: var(--hover);
}
.img-dialog-upload-hint {
  font-size: 12px;
  color: var(--text-dim);
}
.img-dialog-link {
  display: flex;
  gap: 8px;
  padding: 18px 0;
}
.img-dialog-link-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.img-dialog-link-input:focus {
  border-color: var(--accent);
}
.img-dialog-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  position: relative;
}
.img-dialog-search-icon {
  position: absolute;
  left: 10px;
  color: var(--text-dim);
  pointer-events: none;
}
.img-dialog-search-input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px 7px 30px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.img-dialog-search-input:focus {
  border-color: var(--accent);
}
.img-dialog-clear {
  position: absolute;
  right: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  border-radius: 50%;
}
.img-dialog-clear:hover {
  background: var(--hover);
}
.img-dialog-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
}
.img-dialog-cell {
  border: none;
  padding: 0;
  background: var(--bg-soft, var(--hover));
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4 / 3;
  display: block;
}
.img-dialog-cell:hover {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.img-dialog-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.img-dialog-hint-line {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-dim);
  text-align: right;
}
.milkdown strong {
  color: var(--text-strong);
  font-weight: 700;
}
.milkdown del {
  color: var(--text-dim);
}

.milkdown blockquote {
  margin: 1em 0;
  padding: 0.2em 1em;
  border-left: 4px solid var(--quote-border);
  color: var(--text-dim);
}
.milkdown blockquote p {
  margin: 0.4em 0;
}

.milkdown ul,
.milkdown ol {
  padding-left: 1.7em;
  margin: 0.6em 0;
}
.milkdown li {
  margin: 0.25em 0;
}
.milkdown li::marker {
  color: var(--text-dim);
}

.milkdown .task-list-item {
  list-style: none;
  margin-left: -1.4em;
}
.milkdown .task-list-item input[type="checkbox"] {
  margin-right: 6px;
  accent-color: var(--accent);
  /* 待办复选框要装得下大写字母 A：比文字大 15%（用户要求 2026-08-25：
     复选框太小，装不下大写 A） */
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.18em;
  flex: none;
}

.milkdown code {
  font-family: "Cascadia Code", Consolas, Menlo, monospace;
  font-size: 0.88em;
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 4px;
  padding: 0.15em 0.4em;
}

.milkdown pre {
  background: var(--code-bg);
  border-radius: 8px;
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0.9em 0;
  border: 1px solid var(--border);
}
.milkdown pre code {
  background: transparent;
  padding: 0;
  font-size: 0.85em;
  line-height: 1.6;
  display: block;
}

.milkdown table {
  border-collapse: collapse;
  margin: 1em 0;
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
.milkdown th,
.milkdown td {
  border: 1px solid var(--border);
  padding: 6px 12px;
  text-align: left;
}
.milkdown th {
  background: var(--table-head);
  color: var(--text-strong);
  font-weight: 600;
}

/* 分隔线（hr）—— 视觉细线，但点击区域要高：用户 2026-08-26 反馈"鼠标点击
   可选中分隔线（---）"—— 之前元素盒只有 1px 高，点偏一点就点不到线、选不中。
   做法：元素盒加高（~1.8em）承担点击/选中，细线用 ::before 画在垂直中央；
   间距用 margin 吸收（0.9+1.8+0.9 ≈ 原来的 1.8+0+1.8）。 */
.milkdown hr {
  border: none;
  position: relative;
  height: 1.8em;
  margin: 0.9em 0;
  cursor: pointer;
}
.milkdown hr::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid var(--border);
}
/* 点击分隔线选中（用户要求 2026-08-24：点击分隔线可以选择上分隔线）——
   选中态用灰色粗线框标识 */
.milkdown hr.ProseMirror-selectednode::before {
  border-top-color: #8b8b8b;
  box-shadow: 0 0 0 2px rgba(139, 139, 139, 0.85);
  border-radius: 2px;
}

.milkdown img {
  max-width: 100%;
  border-radius: 6px;
}

/* ---------- resizable / alignable image (tc_image node view) ---------- */
.tc-image-wrap {
  display: inline-block;
  max-width: 100%;
  position: relative;
  vertical-align: bottom;
  line-height: 0;
}
.tc-image-wrap img {
  display: block;
  max-width: 100%;
}
/* when an alignment is set the wrapper becomes a block that fills the line,
   and the IMAGE inside is positioned via margin — the wrapper keeps its width
   hugging the image+caption so the caption aligns relative to the IMAGE width,
   not the whole page (用户要求 2026-08-22：caption 对齐以图片下边长为参照) */
.tc-image-wrap[data-align] {
  display: block;
  width: fit-content;
  max-width: 100%;
}
.tc-image-wrap[data-align] img {
  display: block;
}
/* 图片在行内对齐：left 靠左 / center 居中 / right 靠右（作用于 wrapper） */
.tc-image-wrap[data-align="center"] {
  margin-left: auto;
  margin-right: auto;
}
.tc-image-wrap[data-align="right"] {
  margin-left: auto;
}
.tc-image-wrap[data-align="left"] {
  margin-right: auto;
}
.tc-image-wrap.selected img {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* 图片说明（caption）—— 默认不显示；右键"添加说明"进入编辑态（textarea），
   确认后只显示灰色文字（无输入框背景，用户要求） */
.tc-image-caption-text {
  display: block;
  width: 100%;
  line-height: 1.5;
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 5px 10px;
  margin-top: 4px;
  box-sizing: border-box;
  cursor: text;
  user-select: text;
}
.tc-image-caption-edit {
  display: block;
  width: 100%;
  line-height: 1.5;
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 5px 10px;
  margin-top: 4px;
  border-radius: 4px;
  background: var(--bg-hover);
  border: none;
  outline: none;
  resize: none;
  font-family: inherit;
  min-height: 24px;
  box-sizing: border-box;
}
.tc-image-caption-edit:focus {
  background: var(--bg-active);
  color: var(--text);
}
.tc-image-caption-edit::placeholder {
  color: var(--text-dim);
  opacity: 0.6;
}
.tc-image-chrome {
  display: none;
  position: absolute;
  /* 尺寸/位置由 JS 同步到图片实际盒子（syncChrome），确保调节点在图片
     右下角而非"图片所在行"的右下角（用户要求） */
  pointer-events: none;
  z-index: 3;
}
.tc-image-wrap.selected .tc-image-chrome,
.tc-image-wrap:hover .tc-image-chrome {
  display: block;
}
.tc-image-resize {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  cursor: nwse-resize;
  pointer-events: all;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.tc-image-align {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 2px;
  box-shadow: var(--shadow);
  pointer-events: all;
}
.tc-image-align-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 5px;
  cursor: pointer;
}
.tc-image-align-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.milkdown .mermaid {
  text-align: center;
  overflow-x: auto;
  margin: 1em 0;
  background: var(--bg);
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
}

/* ---------- mermaid editor dialog ---------- */
.mm-editor-input {
  width: 100%;
  min-height: 130px;
  font-family: var(--code-font, ui-monospace, "Cascadia Code", Consolas, monospace);
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--code-bg);
  color: var(--code-text);
  resize: vertical;
  outline: none;
  box-sizing: border-box;
}
.mm-editor-input:focus {
  border-color: var(--accent);
}
.mm-editor-label {
  margin: 10px 0 4px;
  font-size: 12px;
  color: var(--text-dim);
}
.mm-editor-preview {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  overflow-x: auto;
  min-height: 90px;
  text-align: center;
}
.mm-editor-error {
  color: #e5484d;
  font-size: 12px;
  margin-top: 6px;
  white-space: pre-wrap;
}

.milkdown .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 0;
  margin: 0.8em 0;
}

/* math blocks: keep a minimum clickable footprint even when the formula is
   empty (e.g. created by the "$$ " input rule, whose value defaults to "")
   and show a placeholder hint so it is obvious the block is there. */
.milkdown [data-type="math_block"] {
  min-height: 2.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
}
.milkdown [data-type="math_block"]:hover {
  background: var(--hover, rgba(128, 128, 128, 0.08));
}
.milkdown [data-type="math_block"]:has(.katex-html:empty)::before {
  content: "空公式 — 点击编辑";
  color: var(--text-muted, #888);
  font-style: italic;
  font-size: 0.92em;
  pointer-events: none;
}
.milkdown [data-type="math_inline"] {
  cursor: pointer;
}

/* prism token colors (light/dark aware) */
:root[data-theme="light"] {
  --tok-comment: #6a737d;
  --tok-keyword: #cf222e;
  --tok-string: #0a3069;
  --tok-number: #0550ae;
  --tok-func: #8250df;
  --tok-tag: #22863a;
}
:root[data-theme="dark"] {
  --tok-comment: #6a9955;
  --tok-keyword: #c586c0;
  --tok-string: #ce9178;
  --tok-number: #b5cea8;
  --tok-func: #dcdcaa;
  --tok-tag: #9cdcfe;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--tok-comment);
}
.token.keyword,
.token.operator,
.token.boolean,
.token.constant {
  color: var(--tok-keyword);
}
.token.string,
.token.attr-value,
.token.char {
  color: var(--tok-string);
}
.token.number,
.token.symbol {
  color: var(--tok-number);
}
.token.function,
.token.class-name,
.token.title {
  color: var(--tok-func);
}
.token.tag,
.token.selector,
.token.attr-name {
  color: var(--tok-tag);
}
.token.punctuation {
  color: var(--text-dim);
}

/* ---------- outline panel ---------- */
.outline-panel {
  width: 210px;
  flex: none;
  background: var(--bg-side);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 8px 0;
  position: relative;
}
.outline-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.outline-list li {
  margin: 1px 0;
}
.outline-list button {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 12.5px;
  padding: 4px 12px;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.outline-list button:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.outline-empty {
  padding: 12px 14px;
  color: var(--text-dim);
  font-size: 12px;
}

/* ---------- floating TOC (目录悬浮按钮) ---------- */
.floating-toc {
  position: fixed;
  right: 16px;
  bottom: 18px;
  z-index: 40;
}
.floating-toc-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-dim);
  padding: 6px 9px;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: color 0.15s, border-color 0.15s;
}
.floating-toc-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.floating-toc-count {
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 0 5px;
}
.floating-toc-panel {
  width: 230px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.floating-toc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  flex: none;
}
.floating-toc-close {
  margin-left: auto;
  display: inline-flex;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
}
.floating-toc-close:hover {
  color: var(--text);
  background: var(--bg-hover);
}
.floating-toc-body {
  overflow-y: auto;
  padding: 4px;
}
.floating-toc-item {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 12.5px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.floating-toc-item:hover {
  background: var(--bg-hover);
}
.floating-toc-item.active {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}
.floating-toc-item.ol-h1 { font-weight: 700; }
.floating-toc-item.ol-h2 { font-weight: 600; }

/* ---------- status bar ---------- */
.statusbar {
  height: 28px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  background: var(--status-bg);
  border-top: 1px solid var(--border);
  transition: transform var(--ui-anim, 0.2s) ease, opacity var(--ui-anim, 0.2s) ease;
  font-size: 11.5px;
  color: var(--text-dim);
  user-select: none;
}
.sb-left {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.sb-center {
  flex: none;
}
.sb-readtime {
  margin-left: 10px;
  color: var(--text-dim);
}
.sb-sel {
  margin-left: 10px;
  color: var(--accent);
}
.sb-typewriter {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.sb-typewriter:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.sb-typewriter.on {
  color: var(--accent);
}
.sb-typewriter.on:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.sb-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.save-state.dirty {
  color: #f5a623;
}
.save-state.saved {
  color: #34c759;
}

/* ---------- landing ---------- */
.landing {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}
.landing-card {
  text-align: center;
  padding: 48px 56px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-side);
  box-shadow: var(--shadow);
}
.landing-card h1 {
  margin: 0 0 8px;
  color: var(--text-strong);
}
.landing-card p {
  color: var(--text-dim);
  margin: 0 0 24px;
}
.primary-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  cursor: pointer;
}
.primary-btn:hover {
  opacity: 0.9;
}

/* ---------- responsive (mobile / small screens) ---------- */
@media (max-width: 900px) {
  .outline-panel {
    display: none;
  }
  .sidebar {
    width: 180px;
  }
  .milkdown-wrap {
    padding: 20px 22px 90px;
  }
  .app-name {
    display: none;
  }
}

/* ---------- custom dialogs ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: modal-fade 0.15s ease;
}
/* 命令面板（Ctrl+K）背景：不透明应用背景色，避免背后编辑器/工作区透出（APK 上滑搜索更干净） */
.modal-overlay.palette-overlay {
  background: var(--bg);
}
@keyframes modal-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- command palette (Ctrl+P / Ctrl+K) ---------- */
.palette {
  width: 520px;
  max-width: calc(100vw - 40px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.palette-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}
.palette-icon {
  color: var(--text-dim);
  flex-shrink: 0;
}
.palette-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: var(--text);
}
.palette-results {
  max-height: 380px;
  overflow-y: auto;
  padding: 6px;
}
.palette-hint {
  padding: 14px;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
}
.palette-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.palette-item.active {
  background: var(--accent-soft);
}
.palette-item-icon {
  color: var(--text-dim);
  display: inline-flex;
  flex-shrink: 0;
}
.palette-item.active .palette-item-icon {
  color: var(--accent);
}
.palette-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.palette-item-title {
  font-size: 13px;
  color: var(--text);
}
.palette-item-sub {
  font-size: 11px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette-group {
  padding: 6px 10px 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.palette-item-shortcut {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--bg-hover);
}
.palette-item.active .palette-item-shortcut {
  color: var(--accent);
  border-color: var(--accent);
}
/* Ctrl+K 替换模式 + 关键词高亮（用户要求 2026-08-22） */
.palette-replace-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
}
.palette-replace-toggle:hover {
  color: var(--text);
  border-color: var(--text-dim);
}
.palette-replace-toggle.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.palette-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  flex-shrink: 0;
}
.palette-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.palette-replace-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.palette-replace-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 13px;
  padding: 5px 8px;
  outline: none;
}
.palette-replace-input:focus {
  border-color: var(--accent);
}
.palette-replace-btn {
  flex-shrink: 0;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
}
.palette-replace-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.palette-replace-done {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--accent);
}
.palette-mark {
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 2px;
  padding: 0 1px;
}

.modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 20px 22px;
  animation: modal-pop 0.15s ease;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
@keyframes modal-pop {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 12px;
}

.modal-body {
  margin-bottom: 16px;
}

/* tall modals (e.g. Settings at 80% height): the body scrolls inside */
.modal-tall {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-tall .modal-title {
  flex: none;
}
.modal-tall .modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 12px;
}
.modal-tall .modal-footer {
  flex: none;
}

/* top bar overflow "⋯" menu (customizable toolbar) */
.toolbar-more {
  position: relative;
  display: inline-flex;
}
.toolbar-more-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 500;
  min-width: 190px;
  max-height: min(70vh, 520px); /* 过长可滚动，不被页面截断（用户 2026-08-26） */
  overflow-y: auto;
  scrollbar-width: none; /* 隐藏滚动条 */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.toolbar-more-menu::-webkit-scrollbar {
  display: none;
}
.toolbar-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  padding: 7px 9px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  white-space: nowrap;
}
.toolbar-more-item:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.toolbar-more-item.active {
  color: var(--accent);
}

/* settings: top bar customization list */
.topbar-custom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 14px;
  margin-top: 6px;
}
.topbar-custom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text);
  padding: 4px 2px;
}
.topbar-custom-row input[type="checkbox"] {
  accent-color: var(--accent);
}
.topbar-custom-row .topbar-custom-icon {
  display: inline-flex;
  color: var(--text-dim);
  flex: none;
}
.topbar-custom-row.locked {
  opacity: 0.6;
}
.topbar-custom-row.locked input {
  pointer-events: none;
}

.modal-msg {
  margin: 0;
  color: var(--text);
  line-height: 1.7;
  font-size: 13.5px;
  word-break: break-all;
}

.modal-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-editor);
  color: var(--text);
  font-size: 13.5px;
  padding: 9px 12px;
  outline: none;
}
.modal-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.btn {
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text);
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 13px;
  cursor: pointer;
}
.btn:hover {
  background: var(--bg-active);
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.btn.primary:hover {
  opacity: 0.9;
}
.btn.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn.danger {
  background: #e5484d;
  border-color: #e5484d;
  color: #fff;
}
.btn.danger:hover {
  opacity: 0.9;
}

/* ---------- move / copy folder picker (P1-⑥) ---------- */
.folder-picker {
  width: 400px;
  max-width: 90vw;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: modal-pop 0.15s ease;
}
.folder-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.folder-picker-mode {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-strong);
}
.folder-picker-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 6px;
  cursor: pointer;
}
.folder-picker-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.folder-picker-bar {
  display: flex;
  align-items: center;
  gap: 10px;
}
.folder-picker-up {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text);
  border-radius: 7px;
  padding: 4px 9px;
  font-size: 12.5px;
  cursor: pointer;
}
.folder-picker-up:hover:not(:disabled) {
  background: var(--bg-active);
}
.folder-picker-up:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.folder-picker-crumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-dim);
  font-size: 12.5px;
  background: var(--bg-editor);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 4px 9px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-picker-crumb span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-picker-list {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg-editor);
  max-height: 46vh;
  min-height: 120px;
  overflow-y: auto;
  padding: 4px;
}
.folder-picker-empty {
  padding: 22px 12px;
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
}
.folder-picker-row {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  text-align: left;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
}
.folder-picker-row:hover:not(.disabled) {
  background: var(--bg-hover);
  color: var(--accent);
}
.folder-picker-row.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.folder-picker-caret {
  color: var(--text-dim);
  flex: none;
}
.folder-picker-caret.hidden {
  visibility: hidden;
}
.folder-picker-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.folder-picker-new {
  display: flex;
  align-items: center;
  gap: 8px;
}
.folder-picker-new .modal-input {
  flex: 1;
  padding: 7px 10px;
  font-size: 13px;
}
.folder-picker-new-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12.5px;
  cursor: pointer;
}
.folder-picker-new-btn:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.folder-picker-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* tree action icon buttons */
.tree-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
}
.tree-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
}

/* ---------- slash command menu ---------- */
.slash-menu {
  position: absolute;
  z-index: 80;
  min-width: 260px;
  max-width: 340px;
  max-height: 330px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  animation: modal-pop 0.12s ease;
}
.slash-group {
  font-size: 11px;
  color: var(--text-dim);
  padding: 7px 10px 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
  user-select: none;
}
.slash-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
}
.slash-item:hover,
.slash-item.active {
  background: var(--bg-hover);
  color: var(--text-strong);
}
.slash-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
  flex: none;
}
.slash-item.active .slash-icon {
  color: var(--accent);
}

/* ---------- [[ wiki autocomplete picker ---------- */
.wiki-picker {
  position: absolute;
  z-index: 80;
  min-width: 240px;
  max-width: 320px;
  max-height: 300px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  animation: modal-pop 0.12s ease;
}
.wiki-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
}
.wiki-picker-item:hover,
.wiki-picker-item.active {
  background: var(--bg-hover);
  color: var(--text-strong);
}
.wiki-picker-item svg {
  color: var(--text-dim);
  flex: none;
}
.wiki-picker-item.active svg {
  color: var(--accent);
}
/* Obsidian-style "create missing page" entry */
.wiki-picker-item.wiki-picker-create {
  color: var(--accent);
  font-weight: 600;
}
.wiki-picker-item.wiki-picker-create svg {
  color: var(--accent);
}

/* ---------- link picker dialog (search pages or paste a URL) ---------- */
.link-dialog-search {
  position: relative;
  margin-bottom: 10px;
}
.link-dialog-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  pointer-events: none;
}
.link-dialog-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px 8px 30px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.link-dialog-input:focus {
  border-color: var(--accent);
}
.link-dialog-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.link-dialog-pages {
  max-height: 260px;
  overflow-y: auto;
}
.link-dialog-page {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
}
.link-dialog-page:hover {
  background: var(--bg-hover);
}
.link-dialog-page svg {
  color: var(--text-dim);
  flex: none;
}
.link-dialog-empty {
  color: var(--text-dim);
  font-size: 12px;
  padding: 8px;
}
.link-dialog-apply {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
}
.link-dialog-apply:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.link-dialog-apply svg {
  color: var(--accent);
  flex: none;
}
.slash-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slash-hint {
  color: var(--text-dim);
  font-size: 11px;
  flex: none;
}

/* ---------- 1. single title: hide the first H1 inside the WYSIWYG editor
   (the Notion-style TitleBar above the editor is the one true title).
   NOTE: the block-handle widget is inserted BEFORE each block, so the H1 is
   not necessarily :first-child — use :first-of-type. ---------- */
.milkdown .ProseMirror > h1:first-of-type {
  display: none;
}

/* ---------- 2. task list: checkbox visuals + strikethrough on checked ---------- */
.milkdown li[data-item-type="task"] {
  list-style: none;
  position: relative;
  /* flex：复选框在流内与文本同排；align-items:flex-start 锚定第一行；
     flex-wrap:wrap + 嵌套 ul flex-basis:100% 让 Tab 缩进的子列表换行到
     下方（否则嵌套 ul 会作为同行 flex 项跑到文本右侧，整个布局错乱、
     子项上移 —— 用户要求 2026-08-25：Tab 缩进只向右，不上下移动）。
     row-gap:0 使换行后的 ul 紧贴文本行，子项垂直位置与缩进前一致。 */
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 0;
}
/* 清除 li 内段落的 margin：li 高度 = 行高，复选框锚定第一行即与文本
   中线对齐（p 默认 margin 9.6px 会把 li 撑高 19px、文本下移 —— 用户
   要求 2026-08-25：选择框与文本竖直中线对齐） */
.milkdown li[data-item-type="task"] > p {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
/* Tab 缩进的子列表：换行到文本下方，缩进显示，不影响其它行位置 */
.milkdown li[data-item-type="task"] > ul {
  flex-basis: 100%;
  margin: 0;
  padding-left: 20px;
}
.milkdown li[data-item-type="task"]::before {
  content: "";
  position: static;
  flex: none;
  width: 18px;
  height: 18px;
  /* 与第一行文本中心对齐：行高 1.7em → 第一行中心 0.85em，减去框高一半 */
  margin-top: calc(0.85em - 9px);
  border: 1.5px solid var(--text-dim);
  border-radius: 4px;
  background: var(--bg);
  box-sizing: border-box;
  cursor: pointer;
}
.milkdown li[data-item-type="task"][data-checked="true"]::before {
  background: var(--accent);
  border-color: var(--accent);
}
.milkdown li[data-item-type="task"][data-checked="true"]::after {
  content: "";
  position: absolute;
  left: 5px;
  /* 勾垂直居中于 18px 框：框顶 = 0.85em - 9px，勾高 12px → +3px */
  top: calc(0.85em - 6px);
  width: 7px;
  height: 12px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  pointer-events: none;
}
/* 划线只作用于【该项自己的段落】—— 用 > 直系子选择器，避免勾选父项时
   连累缩进子项（下一行）也被划删除线。用户要求 2026-08-26：每行独立。 */
.milkdown li[data-item-type="task"][data-checked="true"] > p,
.milkdown li[data-item-type="task"]:has(input:checked) > p {
  text-decoration: line-through;
  color: var(--text-dim);
}
.milkdown li[data-item-type="task"][data-checked="true"]::marker {
  color: var(--text-dim);
}

/* ---------- 4. generated tables: half screen width, even columns ---------- */

/* ---------- meeting.onememora.com 子站 landing（用户要求 2026-08-25） ---------- */
.meeting-landing {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: linear-gradient(160deg, #f6f8ff 0%, #eef2ff 45%, #fdf2f0 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.meeting-landing-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  position: relative;
}
.meeting-landing-logo {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  object-fit: contain;
  background: #fff;
  box-shadow: 0 10px 30px rgba(30, 58, 138, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.meeting-landing-name {
  font-size: 34px;
  font-weight: 800;
  color: #1e3a8a;
  margin: 0;
  letter-spacing: 0.5px;
}
.meeting-landing-slogan {
  font-size: 13px;
  color: #6b7280;
  margin: 0;
}
.meeting-landing-type {
  font-size: 19px;
  color: #334155;
  font-weight: 600;
  min-height: 26px;
  margin: 4px 0 10px;
  font-family: "Cascadia Code", Consolas, Menlo, monospace;
}
.meeting-caret {
  display: inline-block;
  width: 9px;
  color: #e5484d;
  animation: meeting-caret-blink 1s step-end infinite;
}
@keyframes meeting-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
/* 红色录音圆点 */
.meeting-red-dot {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 32% 28%, #ff7a7d, #e5484d 60%, #c93b42);
  box-shadow: 0 8px 24px rgba(229, 72, 77, 0.45), inset 0 2px 6px rgba(255, 255, 255, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: meeting-dot-pulse 2s ease infinite;
}
@keyframes meeting-dot-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(229, 72, 77, 0.45); }
  50% { box-shadow: 0 8px 30px rgba(229, 72, 77, 0.7); }
}
.meeting-red-dot-core {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  opacity: 0.92;
}
.meeting-red-dot.active {
  animation: none;
  transform: scale(0.96);
}
/* 录音弹窗：从小到大动画（关闭时反向） */
.meeting-landing-pop {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 440px;
  max-width: 92vw;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
  padding: 18px;
  z-index: 210;
  animation: meeting-pop-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.meeting-landing-pop.closing {
  animation: meeting-pop-out 0.24s ease both;
}
@keyframes meeting-pop-in {
  from { transform: translate(-50%, -50%) scale(0.35); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes meeting-pop-out {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
}
.meeting-pop-close {
  position: absolute;
  right: 10px;
  top: 10px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  z-index: 2;
}
.meeting-pop-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}
/* 免费机会用完后顶部黄色提示（右端 X 可关闭，用户要求 2026-08-25） */
.meeting-free-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 220;
  background: #fef3c7;
  color: #92400e;
  font-size: 13px;
  padding: 9px 38px 9px 16px;
  text-align: center;
  border-bottom: 1px solid #fde68a;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.meeting-free-banner-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: #92400e;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
}
.meeting-free-banner-close:hover {
  background: rgba(146, 64, 14, 0.12);
}
/* 注册弹窗 */
.meeting-reg-overlay {
  position: fixed;
  inset: 0;
  z-index: 230;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: modal-pop 0.18s ease;
}
.meeting-reg-box {
  width: 360px;
  max-width: 92vw;
  background: #fff;
  border-radius: 16px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.3);
}
.meeting-reg-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: contain;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border);
}
.meeting-reg-box h3 {
  margin: 2px 0 6px;
  font-size: 16px;
  color: var(--text-strong);
}
.meeting-reg-box .btn {
  margin-top: 6px;
}
.meeting-landing-enter {
  position: fixed;
  bottom: 22px;
  border: none;
  background: rgba(255, 255, 255, 0.7);
  color: #64748b;
  font-size: 13px;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.meeting-landing-enter:hover {
  color: #1e3a8a;
  background: #fff;
}
.milkdown table {
  width: 50%;
  table-layout: fixed;
}

/* ---------- table wrapper + right-click context menu (node view) ----------
   The real table renders inside .tc-table-wrap at half screen width. Columns
   that are entirely empty stay at 10ch wide (pure CSS — nothing is injected
   into the PM-managed table DOM, which would make PM re-sync in a loop). */
.tc-table-wrap {
  position: relative;
  width: fit-content;
  min-width: 50%;
  margin: 1em 0;
}
.tc-table-wrap .tc-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
}
/* column resize handles — thin vertical lines over each column boundary */
.tc-col-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5px;
  margin-left: -3px;
  cursor: col-resize;
  z-index: 3;
  border-radius: 3px;
}
.tc-col-resize::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 1px;
  background: transparent;
  transition: background 0.12s;
}
.tc-col-resize:hover::after,
.tc-col-resize:active::after {
  background: var(--accent, #4f8cff);
}
.tc-table-wrap .tc-table th:has(> p:empty),
.tc-table-wrap .tc-table td:has(> p:empty),
.tc-table-wrap .tc-table th:has(> p > br.ProseMirror-trailingBreak),
.tc-table-wrap .tc-table td:has(> p > br.ProseMirror-trailingBreak) {
  min-width: 10ch;
}
/* ---------- 表格 6 点把手 + 选中 + 风格（用户要求 2026-08-22） ---------- */
.tc-table-handle {
  position: absolute;
  left: -22px;
  top: 0;
  width: 10px;
  height: 16px;
  cursor: grab;
  opacity: 0;
  transition: opacity 0.12s;
  color: var(--text-dim, #888);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  z-index: 5;
}
.tc-table-handle svg {
  fill: currentColor;
}
.tc-table-handle:hover {
  opacity: 1;
  color: var(--text);
  background-color: var(--bg-hover, rgba(128, 128, 128, 0.15));
}
.tc-table-wrap:hover .tc-table-handle {
  opacity: 1;
}
/* 选中整个表格：灰色粗线框（类似数据库选中态） */
.tc-table-wrap.ProseMirror-selectednode,
.tc-table-wrap:has(> table.ProseMirror-selectednode) {
  outline: 2px solid #8b8b8b;
  outline-offset: 2px;
  border-radius: 4px;
}
/* Header row：第一行加粗 + 灰底 */
.tc-table-wrap[data-header-row="1"] .tc-table tbody tr:first-child {
  font-weight: 700;
  background: rgba(128, 128, 128, 0.12);
}
/* Header column：第一列加粗 + 灰底 */
.tc-table-wrap[data-header-col="1"] .tc-table tbody tr > *:first-child {
  font-weight: 700;
  background: rgba(128, 128, 128, 0.12);
}
/* 风格：Notion（细边框、无竖线、行 hover 高亮） */
.tc-table-wrap[data-table-style="notion"] .tc-table {
  border-collapse: separate;
  border-spacing: 0;
}
.tc-table-wrap[data-table-style="notion"] .tc-table th,
.tc-table-wrap[data-table-style="notion"] .tc-table td {
  border: none;
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
}
.tc-table-wrap[data-table-style="notion"] .tc-table tbody tr:hover {
  background: var(--bg-hover);
}
/* 风格：Airtable（彩色表头、交替行底色） */
.tc-table-wrap[data-table-style="airtable"] .tc-table th {
  background: var(--accent-soft, rgba(79, 140, 255, 0.15));
  color: var(--accent, #4f8cff);
  font-weight: 700;
}
.tc-table-wrap[data-table-style="airtable"] .tc-table tbody tr:nth-child(even) {
  background: var(--bg-hover);
}

/* ---------- 会议录音节点 (tc_meeting) ---------- */
.tc-meeting-block {
  margin: 12px 0;
}
.tc-meeting {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-hover) 100%);
  /* 立体阴影（用户要求：带阴影立体显示） */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08), 0 10px 28px rgba(0, 0, 0, 0.12);
}
.tc-meeting-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex-wrap: wrap;
}
/* 折叠三角：靠最右侧（用户要求 2026-08-25） */
.tc-meeting-collapse {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 3px 5px;
  border-radius: 5px;
  flex: none;
}
.tc-meeting-collapse:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.tc-meeting-rec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
}
.tc-meeting-rec.recording {
  background: #e5484d;
  border-color: #e5484d;
  color: #fff;
  animation: tc-meeting-pulse 1.2s ease infinite;
}
@keyframes tc-meeting-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(229, 72, 77, 0); }
}
.tc-meeting-ai {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;  cursor: pointer;
}
.tc-meeting-ai.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.tc-meeting-ai:disabled {
  opacity: 0.6;
  cursor: default;
}
.tc-meeting-tpl select {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
}
.tc-meeting-spin {
  animation: tc-meeting-spin 1s linear infinite;
}
@keyframes tc-meeting-spin {
  to { transform: rotate(360deg); }
}
.tc-meeting-text {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--bg-hover);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  max-height: 240px;
  overflow-y: auto;
}
.tc-meeting-audio {
  margin-top: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.tc-meeting-audio audio {
  display: block;
  width: 100%;
}
.tc-meeting-empty {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.tc-meeting-listening {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tc-meeting-pulse {
  color: #e5484d;
  animation: tc-meeting-pulse 1.2s ease infinite;
}
.tc-meeting-interim {
  color: var(--text-dim);
  opacity: 0.75;
}
.tc-meeting-error {
  margin-top: 8px;
  font-size: 12px;
  color: #e5484d;
}

/* ---------- APK Voice Memos 全屏录音界面（用户 2026-09） ---------- */
.vm-shell { display: flex; flex-direction: column; width: 100vw; height: 100vh; background: #F2F2F7; color: #000; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; overflow: hidden; }
.vm-header { padding: 44px 22px 10px; display: flex; justify-content: space-between; align-items: flex-end; }
.vm-header h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.vm-header p { margin: 2px 0 0; font-size: 13px; color: #8E8E93; font-weight: 500; }
.vm-list { padding: 6px 14px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.vm-item { background: #fff; border: 1px solid rgba(0,0,0,.05); box-shadow: 0 2px 8px rgba(0,0,0,.04); border-radius: 18px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.vm-item.playing { background: #EDF3FF; border-color: rgba(0,122,255,.15); }
.vm-play { width: 40px; height: 40px; border-radius: 12px; background: #F2F2F7; color: #007AFF; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vm-play.on { background: #007AFF; color: #fff; }
.vm-item-main { flex: 1; min-width: 0; }
.vm-item-main h3 { margin: 0; font-size: 15px; font-weight: 600; }
.vm-item-main p { margin: 2px 0 0; font-size: 12px; color: #8E8E93; }
.vm-item-dur { font-size: 14px; color: #8E8E93; font-weight: 500; }
.vm-wave { flex: 1; display: flex; align-items: center; justify-content: center; gap: 3px; padding: 10px 20px; overflow: hidden; }
.vm-wave span { width: 3px; height: 12px; background: #FF3B30; border-radius: 3px; opacity: 0.35; }
.vm-wave.on span { animation: vmbar 0.9s ease-in-out infinite alternate; opacity: 1; }
@keyframes vmbar { from { height: 8px; } to { height: 46px; } }
.vm-controls { background: #fff; border-top-left-radius: 38px; border-top-right-radius: 38px; box-shadow: 0 -10px 40px rgba(0,0,0,.05); padding: 22px 22px 40px; }
.vm-timer { text-align: center; font-size: 42px; font-weight: 600; letter-spacing: -0.02em; }
.vm-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-size: 11px; color: #FF3B30; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.vm-dot { width: 8px; height: 8px; border-radius: 50%; background: #FF3B30; animation: vmpulse 1.5s ease-in-out infinite; }
@keyframes vmpulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.6; } }
.vm-actions { display: flex; align-items: center; justify-content: space-around; margin-top: 18px; }
.vm-btn { border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.vm-btn-toggle { width: 62px; height: 62px; background: #fff; border: 6px solid #F2F2F7; box-shadow: 0 8px 20px rgba(0,0,0,.12); color: #007AFF; }
.vm-btn-toggle:active { transform: scale(0.9); }
.vm-btn-stop { width: 78px; height: 78px; background: #FF3B30; color: #fff; }
.vm-btn-stop:active { transform: scale(0.9); }
.vm-text { text-align: center; color: #8E8E93; font-size: 13px; margin-top: 10px; padding: 0 22px; min-height: 20px; }


/* ---------- remind toast (右下角提醒弹窗) ---------- */
.remind-toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px;
  max-width: 380px;
  padding: 12px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  animation: remind-toast-in 0.25s ease;
  cursor: default;
}
@keyframes remind-toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.remind-toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 9px;
  background: rgba(255, 160, 60, 0.16);
  color: #c07a1e;
}
.remind-toast-body {
  flex: 1;
  min-width: 0;
}
.remind-toast-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 2px;
}
.remind-toast-text {
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remind-toast-open {
  flex: none;
  padding: 4px 12px;
  border: none;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  cursor: pointer;
}
.remind-toast-close {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.remind-toast-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* ---------- @ command menu ---------- */
.at-menu {
  position: absolute;
  z-index: 9999;
  min-width: 220px;
  max-width: 320px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  padding: 4px;
}
/* portaled to <body>: fixed, always on top, never clipped by containers */
.at-menu.at-menu-pop {
  position: fixed;
  background: var(--bg);
}
.at-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.at-menu-item.active {
  background: var(--bg-hover);
}
.at-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--accent);
}
.at-menu-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.at-menu-hint {
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

/* ---------- @ dynamic pills (today / now / remind) ---------- */
.tc-at {
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  margin: 0 1px;
  border-radius: 6px;
  font-size: 0.92em;
  line-height: 1.7;
  cursor: pointer;
  user-select: none;
  vertical-align: baseline;
  border: 1px solid transparent;
}
.tc-at-today {
  background: rgba(64, 150, 255, 0.12);
  color: #2f6fd6;
  border-color: rgba(64, 150, 255, 0.25);
}
.tc-at-now {
  background: rgba(120, 90, 255, 0.1);
  color: #6d5ae0;
  border-color: rgba(120, 90, 255, 0.22);
}
.tc-at-remind {
  background: rgba(255, 160, 60, 0.12);
  color: #c07a1e;
  border-color: rgba(255, 160, 60, 0.28);
}
.tc-at:hover {
  filter: brightness(0.95);
}

/* ---------- remind picker ---------- */
.tc-remind-picker-wrap {
  position: fixed;
  z-index: 9999;
  width: 264px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 10px 12px;
}
.tc-remind-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.tc-remind-row {
  display: flex;
  gap: 8px;
}
.tc-remind-field {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 12.5px;
  outline: none;
}
.tc-remind-field:focus {
  border-color: var(--accent);
}
.tc-remind-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
.tc-remind-confirm {
  padding: 4px 14px;
  border: none;
  border-radius: 7px;
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  cursor: pointer;
}
.tc-remind-cancel {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
}

/* ---------- callout (提示框) ---------- */
/* 用户要求 2026-08-24：callout 是细线框（左侧不再加宽），全部 1px 边框 */
.tc-callout {
  border-radius: 10px;
  padding: 4px 0;
  margin: 10px 0;
  border: 1px solid;
  border-left-width: 1px;
  overflow: hidden;
}
/* 整块选中（点击 6 点把手 NodeSelect）：灰色粗线框，与数据库选中一致
   （用户要求 2026-08-24：用灰色粗线框住，让用户知道已选中 callout 块） */
.tc-callout.ProseMirror-selectednode {
  border-color: #8b8b8b !important;
  box-shadow: 0 0 0 2px rgba(139, 139, 139, 0.85);
}
.tc-callout-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 2px;
  font-weight: 700;
  font-size: 14px;
  cursor: default;
  user-select: none;
}
.tc-callout-icon {
  display: flex;
  align-items: center;
  flex: none;
}
.tc-callout-icon .tc-callout-emoji {
  font-size: 16px;
  line-height: 1;
}
/* callout 设置弹窗（右键 callout 6 点把手弹出，用户要求 2026-08-22） */
.callout-settings {
  position: fixed;
  z-index: 9999;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 10px;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.callout-settings-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.callout-kind-row {
  display: flex;
  gap: 5px;
  align-items: center;
}
.callout-kind-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.callout-kind-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}
.callout-kind-btn.on {
  background: var(--accent-soft, rgba(99, 102, 241, 0.14));
  border-color: var(--accent);
  color: var(--accent);
}
.callout-settings-icon-row {
  display: flex;
  gap: 5px;
  align-items: center;
}
.callout-settings-btn {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  padding: 6px 8px;
  cursor: pointer;
  white-space: nowrap;
}
.callout-settings-btn:hover {
  background: var(--bg-hover);
}
/* callout 图标选择器（右键图标弹出） */
.callout-icon-picker {
  position: fixed;
  z-index: 9999;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 8px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.callout-icon-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.callout-icon-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
}
.callout-icon-cell:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}
.tc-callout-title-input {
  font: inherit;
  font-weight: 700;
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0 4px;
  background: var(--bg-editor);
  color: var(--text);
  outline: none;
  width: 100%;
}
/* callout 背景色选择器（Notion 色板，与文字背景色设置界面一致，
   用户要求 2026-08-24） */
.callout-bg-picker {
  position: fixed;
  z-index: 9999;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.callout-bg-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}
.callout-bg-swatch {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  cursor: pointer;
  padding: 0;
}
.callout-bg-swatch:hover {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.callout-bg-swatch.on {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.callout-bg-none {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
}
.callout-bg-none:hover {
  background: var(--bg-hover);
}
.callout-bg-none.on {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.callout-bg-custom {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
  cursor: pointer;
}
.callout-bg-custom input[type="color"] {
  width: 26px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px;
  cursor: pointer;
  background: none;
}
.tc-callout-body {
  padding: 2px 14px 10px;
}
.tc-callout-body > :first-child { margin-top: 0; }
.tc-callout-body > :last-child { margin-bottom: 0; }

/* per-kind colors (light + dark via color-mix for soft backgrounds) */
.tc-callout.callout-note {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-editor));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  border-left-color: var(--accent);
  color: var(--text);
}
.tc-callout.callout-note .tc-callout-head { color: var(--accent); }
.tc-callout.callout-tip {
  background: color-mix(in srgb, #2ecc71 10%, var(--bg-editor));
  border-color: color-mix(in srgb, #2ecc71 45%, var(--border));
  border-left-color: #2ecc71;
  color: var(--text);
}
.tc-callout.callout-tip .tc-callout-head { color: #27ae60; }
.tc-callout.callout-warning {
  background: color-mix(in srgb, #f39c12 12%, var(--bg-editor));
  border-color: color-mix(in srgb, #f39c12 45%, var(--border));
  border-left-color: #f39c12;
  color: var(--text);
}
.tc-callout.callout-warning .tc-callout-head { color: #d68910; }
.tc-callout.callout-danger {
  background: color-mix(in srgb, #e74c3c 10%, var(--bg-editor));
  border-color: color-mix(in srgb, #e74c3c 45%, var(--border));
  border-left-color: #e74c3c;
  color: var(--text);
}
.tc-callout.callout-danger .tc-callout-head { color: #c0392b; }
.tc-callout.callout-info {
  background: color-mix(in srgb, #3498db 10%, var(--bg-editor));
  border-color: color-mix(in srgb, #3498db 45%, var(--border));
  border-left-color: #3498db;
  color: var(--text);
}
.tc-callout.callout-info .tc-callout-head { color: #2980b9; }

/* ---------- generic right-click context menu ---------- */
.ctx-menu {
  position: fixed;
  z-index: 9999;
  min-width: 180px;
  padding: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  gap: 2px;
  user-select: none;
}
.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.ctx-menu-item:hover {
  background: var(--accent);
  color: #fff;
}
.ctx-menu-item-danger:hover {
  background: #d33;
}
.ctx-menu-item-disabled {
  opacity: 0.45;
  cursor: default !important;
  pointer-events: none;
}
/* submenu support (task 5: show/hide columns) */
.ctx-menu-item-wrap {
  position: relative;
}
.ctx-menu-caret {
  margin-left: auto;
  flex-shrink: 0;
}
.ctx-menu-item .ctx-menu-caret {
  opacity: 0.6;
}
.ctx-submenu {
  position: absolute;
  left: 100%;
  top: -5px;
  min-width: 170px;
  max-height: 320px;
  overflow-y: auto;
}
.ctx-menu-item-wrap:hover > .ctx-submenu,
.ctx-menu-item-wrap:focus-within > .ctx-submenu {
  display: flex;
}

/* ---------- database block ---------- */
.database-block {
  position: relative;
  margin: 1em 0;
}
/* 6-dot grip at the top-left corner (tasks 1 + 5): sits OUTSIDE the db border */
.db-block-grip {
  position: absolute;
  left: -30px;
  top: 6px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--text-dim);
  cursor: grab;
  z-index: 6;
  opacity: 0.65;
}
.db-block-grip:hover {
  opacity: 1;
  color: var(--text-strong);
  background: var(--bg-hover);
}
.db-block-grip:active {
  cursor: grabbing;
}
body.tc-dragging-img .db-block-grip {
  opacity: 1;
  color: var(--accent);
}
/* whole-database selection: thick GRAY border while the node is NodeSelected
   (task 1) — kept outside the grip so the two never overlap */
.database-block.selected .db {
  border-color: #8b8b8b;
  box-shadow: 0 0 0 2px rgba(139, 139, 139, 0.85);
}
/* conditional-color editor (task 5) */
.db-cond-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}
.db-cond-colors {
  display: flex;
  gap: 12px;
  align-items: center;
}
.db-cond-colors label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-dim);
}
.db-cond-colors input[type="color"] {
  width: 34px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: none;
  padding: 1px;
  cursor: pointer;
}
.db-cond-scope {
  display: flex;
  gap: 6px;
}
.db-cond-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 2px 2px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.db-cond-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.db-cond-chip {
  flex: 1;
  min-width: 0;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- linked view (链接视图) ---------- */
.linked-db-block {
  margin: 1em 0;
}
.db-linked {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 14px;
  background: var(--bg-side);
  color: var(--text-dim);
}
.db-linked-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.db-linked-label {
  font-weight: 600;
  color: var(--text);
}
.db-linked-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  position: relative;
}
.db-linked-search {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  padding: 4px 8px 4px 24px;
  width: 170px;
  outline: none;
}
.db-linked-search-icon {
  position: absolute;
  margin-left: 8px;
  color: var(--text-dim);
}
.db-linked-search:focus {
  border-color: var(--accent);
}
.db-linked-missing {
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

/* ---------- 嵌入块 (embed) ---------- */
.tc-embed-block {
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-side);
}
.tc-embed-frame {
  display: block;
  width: 100%;
  height: 400px;
  border: none;
  background: #000;
}
.tc-embed-link {
  display: block;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-embed-link:hover {
  color: var(--accent);
}
.tc-embed-error {
  padding: 20px;
  color: var(--text-dim);
  text-align: center;
  font-size: 13px;
}
.file-block {
  margin: 0.4em 0;
}
/* 6-dot grip on the LEFT of the file row: click → PM NodeSelects the file */
.file-block-grip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  cursor: grab;
  border-radius: 4px;
  padding: 2px;
  margin-left: -4px;
}
.file-block-grip:hover {
  color: var(--text-strong);
  background: var(--bg-hover);
}
.file-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  position: relative;
}
.file-row:hover {
  background: var(--bg-hover);
  border-radius: 6px;
}
/* whole-file selection: thick GRAY border */
.file-row.selected {
  border-color: #8b8b8b;
  box-shadow: 0 0 0 2px rgba(139, 139, 139, 0.85);
}
/* corner resize handle (visible when selected) */
.file-resize-handle {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 12px;
  height: 12px;
  background: var(--accent);
  border: 2px solid #fff;
  border-radius: 2px;
  cursor: nwse-resize;
  z-index: 3;
  box-sizing: border-box;
}
.file-resize-handle:hover {
  width: 15px;
  height: 15px;
}
.file-icon {
  display: inline-flex;
  color: var(--accent);
  flex: none;
}
.file-name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-size {
  font-size: 11px;
  color: var(--text-dim);
  flex: none;
}
.file-grip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  cursor: grab;
  border-radius: 4px;
  padding: 2px;
}
.file-grip:hover {
  color: var(--text-strong);
  background: var(--bg-hover);
}
.file-preview {
  flex-basis: 100%;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  max-height: 320px;
  overflow: auto;
}
.file-preview img {
  max-width: 100%;
  border-radius: 6px;
}
.file-preview iframe {
  width: 100%;
  height: 420px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
}
.file-preview pre {
  margin: 0;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 320px;
  overflow: auto;
}

/* ---------- multi-column layout (tc_columns) ---------- */
.tc-columns-block {
  margin: 1em 0;
}
.tc-columns-block.ProseMirror-selectednode {  outline: none;
}
.tc-columns-grid {
  display: grid;
  align-items: stretch;
  /* 分栏总宽度不得超过页面宽度，列内溢出元素不撑出滚动条（用户要求） */
  max-width: 100%;
  overflow: hidden;
}
.tc-column-wrap {
  position: relative;
  min-width: 0;
  min-height: 44px;
}
/* each column is a NORMAL text area — a nested Milkdown editor, no input box */
.tc-column {
  position: relative;
  min-height: 44px;
  font-size: inherit;
  line-height: 1.7;
  color: var(--text);
  cursor: text;
  outline: none;
  border-radius: 4px;
  padding: 2px 6px;
}
.tc-column-editor > .milkdown .ProseMirror {
  font-size: inherit;
  line-height: 1.7;
}
.tc-column-editor .ProseMirror > * {
  margin: 0.4em 0;
}
/* 分栏内 6 点把手：列宽有限，把手左移 -22px 会伸出列左缘被 milkdown-wrap
   覆盖（点击不到）；改为显示在块内左上（用户 2026-08-28：点击嵌入前的
   把手也能选中嵌入） */
.tc-column-editor .tc-block-handle {
  left: 2px;
  z-index: 6;
  opacity: 0.55;
}
.tc-column-editor .tc-block-handle:hover,
.tc-column-editor .tc-block-handle:has(+ *:hover) {
  opacity: 1;
}
.tc-column-empty-hint {
  display: none;
}
.tc-column-editor .ProseMirror:empty + .tc-column-empty-hint {
  display: block;
  color: var(--text-dim);
  opacity: 0.6;
  cursor: text;
  pointer-events: none;
}
/* keep the resize divider above the nested editors */
.tc-col-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -7px;
  width: 14px;
  z-index: 5;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tc-col-divider::before {
  content: "";
  width: 4px;
  height: 100%;
  border-radius: 3px;
  background: var(--border);
  opacity: 0;
  transition: opacity 0.15s;
}
.tc-columns-block:hover .tc-col-divider::before,
.tc-col-divider:hover::before,
.tc-col-divider:active::before,
/* 光标在分栏内部时灰线一直显示（离开 0.5s 后隐藏） */
.tc-columns-grid.tc-col-focused .tc-col-divider::before {
  opacity: 1;
}
body.tc-col-resizing {
  cursor: col-resize;
  user-select: none;
}
body.tc-col-resizing * {
  cursor: col-resize !important;
}
/* PM re-maps the edit input's caret onto the database node while a title or
   column name is being edited (a harmless NodeSelection). Hide its outline so
   the block doesn't look "selected" during editing. */
.database-block.ProseMirror-selectednode {
  outline: none;
}
.db {
  /* database style tokens — presets (data-db-style) and the custom style
     override these; everything below falls back to the theme */
  --db-accent: var(--accent);
  --db-accent2: var(--accent);
  --db-bg: var(--bg);
  --db-header-bg: var(--bg-side);
  --db-row-bg: transparent;
  --db-row-hover: var(--bg-hover);
  --db-text: var(--text);
  --db-text-dim: var(--text-dim);
  --db-border: var(--border);
  --db-radius: 10px;
  --db-font-size: 13px;
  --db-row-pad-y: 4px;
  --db-cell-border-x: 1px;
  --db-cell-border-color: var(--border);
  /* 与表头分离：.db 不再整体框住，表头直接显示在页面上；
     表格主体改为 .db-card 悬浮卡（见 .db-card） */
  color: var(--db-text);
  font-size: var(--db-font-size);
  user-select: none;
}
/* ---------- database style presets (settings → 数据库) ---------- */
.db-style-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin: 8px 0 4px;
}
.db-style-preset {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-editor);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-size: 12.5px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.db-style-preset b {
  font-size: 13px;
  color: var(--text-strong);
}
.db-style-preset span {
  color: var(--text-dim);
  font-size: 11.5px;
}
.db-style-preset:hover {
  border-color: var(--accent);
}
.db-style-preset.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.db-style-custom {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.db-style-colors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 6px 14px;
}
.db-style-color {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text);
}
.db-style-color input[type="color"] {
  width: 34px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: none;
  padding: 1px;
  cursor: pointer;
}
.db-style-color code {
  font-size: 11px;
  color: var(--text-dim);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
:root[data-db-style="notion"][data-db-dark="0"] .db {
  --db-accent: #2eaadc;
  --db-bg: #ffffff;
  --db-header-bg: transparent;
  --db-row-hover: #f4f4f4;
  --db-text: #37352f;
  --db-text-dim: #787774;
  --db-border: #eaeaea;
  --db-radius: 8px;
  --db-font-size: 14px;
  --db-row-pad-y: 6px;
  --db-cell-border-x: 0px;
}
:root[data-db-style="notion"][data-db-dark="1"] .db {
  --db-accent: #2eaadc;
  --db-bg: #191919;
  --db-header-bg: transparent;
  --db-row-hover: #2f2f2f;
  --db-text: #f1f1ef;
  --db-text-dim: #9b9b97;
  --db-border: #2e2e2e;
  --db-radius: 8px;
  --db-font-size: 14px;
  --db-row-pad-y: 6px;
  --db-cell-border-x: 0px;
}
/* Airtable: tinted header, clear grid lines, high-contrast pink brand */
:root[data-db-style="airtable"][data-db-dark="0"] .db {
  --db-accent: #f82b60;
  --db-accent2: #4a6af4;
  --db-bg: #ffffff;
  --db-header-bg: #f8f9fa;
  --db-row-hover: #f5f6f8;
  --db-text: #1a1a1a;
  --db-text-dim: #999999;
  --db-border: #e8e8e8;
  --db-radius: 12px;
  --db-font-size: 13px;
  --db-row-pad-y: 4px;
  --db-cell-border-x: 1px;
  --db-cell-border-color: #f0f0f0;
}
:root[data-db-style="airtable"][data-db-dark="1"] .db {
  --db-accent: #f82b60;
  --db-accent2: #4a6af4;
  --db-bg: #1a1a1a;
  --db-header-bg: #232323;
  --db-row-hover: #262626;
  --db-text: #f1f1f1;
  --db-text-dim: #777777;
  --db-border: #2c2c2c;
  --db-radius: 12px;
  --db-font-size: 13px;
  --db-row-pad-y: 4px;
  --db-cell-border-x: 1px;
  --db-cell-border-color: #333333;
}
/* Custom: colors/radius/density/font-size come from inline --db-c-* vars */
:root[data-db-style="custom"] .db {
  --db-accent: var(--db-c-brand, var(--db-accent));
  --db-accent2: var(--db-c-accent, var(--db-accent));
  --db-bg: var(--db-c-page-bg, var(--bg));
  --db-header-bg: var(--db-c-header-bg, var(--bg-side));
  --db-row-bg: var(--db-c-row-bg, transparent);
  --db-row-hover: var(--db-c-row-hover, var(--bg-hover));
  --db-text: var(--db-c-text, var(--text));
  --db-text-dim: var(--db-c-text-dim, var(--text-dim));
  --db-border: var(--db-c-border, var(--border));
  --db-radius: var(--db-c-radius, 10px);
  --db-font-size: var(--db-c-font-size, 13px);
  --db-row-pad-y: var(--db-c-row-pad-y, 4px);
  --db-cell-border-x: 1px;
  --db-cell-border-color: var(--db-border);
}
.db-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
}
/* 表格主体：独立悬浮玻璃卡（与表头分离，用户 2026-09） */
.db-card {
  background: color-mix(in srgb, var(--bg-editor, #fff) 80%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid var(--db-border);
  border-radius: var(--db-radius, 10px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
  overflow: hidden;
}
.db-card .db-summary {
  background: transparent;
  border-top: 1px solid var(--db-border);
}
/* 左边缘 gutter：每行把手+多选框（内容列外，悬停行时显示） */
.db-body { position: relative; }
.db-gutter {
  position: absolute;
  left: calc(-1 * var(--db-gutter-w, 44px));
  top: 0;
  bottom: 0;
  width: var(--db-gutter-w, 44px);
  z-index: 4;
  pointer-events: none;
}
.db-gutter-row {
  position: absolute;
  left: 0;
  right: 0;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.db-gutter-row.show {
  opacity: 1;
  pointer-events: auto;
}
.db-gutter-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 22px;
  color: var(--db-text-dim);
  cursor: grab;
  border-radius: 4px;
}
.db-gutter-grip:hover { color: var(--db-text); background: var(--bg-hover); }
.db-gutter-row input[type="checkbox"] { width: 14px; height: 14px; margin: 0; cursor: pointer; }
.db-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--db-text);
  font-size: 14px;
  outline: none;
}
.db-count {
  color: var(--db-text-dim);
  font-size: 12px;
  white-space: nowrap;
}
.db-btn {
  border: 1px solid var(--db-border);
  background: var(--bg-hover);
  color: var(--db-text);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.db-btn:hover {
  background: var(--bg-active);
}
/* 数据库表头：左右分组 + 视图类型标签（用户 2026-09 整理） */
.db-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.db-toolbar-left .db-title { flex: none; }
.db-toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}
.db-view-btn-label { font-size: 12px; margin-left: 2px; }
.db-btn-accent { background: var(--accent); color: #fff; border-color: transparent; }
.db-btn-accent:hover { background: color-mix(in srgb, var(--accent) 82%, #000); }
.db-grid {
  display: grid;
  overflow-x: auto;
}
/* 冻结表头（横向滚动时表头行固定） */
.db-grid > .db-th,
.db-group-head .db-grid-inner > .db-th {
  position: sticky;
  top: 0;
  z-index: 5;
}
/* 冻结左侧列（把手 + 复选框 + ID），横向滚动时固定 */
.db-td.db-td-grip,
.db-th.db-th-grip {
  position: sticky !important;
  left: 0;
  z-index: 4;
  background: var(--db-header-bg, var(--bg-side));
}
.db-td.db-td-check,
.db-th.db-th-check {
  position: sticky !important;
  left: 24px;
  z-index: 4;
  background: var(--db-header-bg, var(--bg-side));
}
.db-td.db-td-id,
.db-th.db-th-id {
  position: sticky !important;
  left: 48px;
  z-index: 4;
  background: var(--db-header-bg, var(--bg-side));
}
.db-th-grip,
.db-th-check,
.db-th-id {
  z-index: 6;
}
/* 行级把手 + 多选框：固定左侧沟槽(sticky 已生效)，默认隐藏，仅该行悬停时显示（用户 2026-09） */
.db-row {
  display: contents;
}
.db-td.db-td-grip,
.db-td.db-td-check {
  pointer-events: none;
  transition: opacity 0.12s ease;
}
/* 把手/复选框内容淡入淡出（单元格背景始终不透明，避免列内容透出） */
.db-td.db-td-grip > *,
.db-td.db-td-check > * {
  opacity: 0;
  transition: opacity 0.12s ease;
}
.db-row:hover .db-td.db-td-grip,
.db-row:hover .db-td.db-td-check {
  pointer-events: auto;
}
.db-row:hover .db-td.db-td-grip > *,
.db-row:hover .db-td.db-td-check > * {
  opacity: 1;
}
/* 悬停行的高亮（数据单元格本身） */
.db-row:hover .db-td { }
/* 表头“全选”复选框始终可见（仅数据行隐藏） */
.db-th.db-th-check input { opacity: 1; }
/* 组模式下每组自己的表头 sticky 到容器顶部 */
.db-group-head {
  position: sticky;
  top: 0;
  z-index: 3;
}
/* group-by mode (task 8): bold group title + per-group header */
.db-group-title {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  background: var(--db-bg);
  border-bottom: 1px solid var(--db-border);
  border-right: 1px solid var(--db-border);
}
.db-group-title:hover {
  background: var(--db-row-hover);
}
.db-group-title b {
  font-weight: 700;
  color: var(--db-text);
}
.db-group-arrow {
  transition: transform 0.15s;
  color: var(--db-text-dim);
}
.db-group-arrow.collapsed {
  transform: rotate(-90deg);
}
.db-group-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--db-text-dim);
  font-weight: 400;
}
.db-group-head {
  grid-column: 1 / -1;
  display: grid;
  background: var(--db-header-bg);
  border-bottom: 1px solid var(--db-border);
  border-right: 1px solid var(--db-border);
}
.db-grid-inner {
  display: grid;
  min-width: 0;
}
.db-th {
  padding: 6px 8px;
  border-right: var(--db-cell-border-x) solid var(--db-cell-border-color);
  border-bottom: 1px solid var(--db-border);
  background: var(--db-header-bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.db-th-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.db-th-id {
  color: var(--db-text-dim);
  font-size: 12px;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.db-td-id {
  color: var(--db-text-dim);
  font-size: 12px;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--db-header-bg);
}
.db-sort-ind {
  color: var(--db-accent2);
  font-size: 11px;
  flex-shrink: 0;
  user-select: none;
}
.db-col-name {
  border: none;
  background: transparent;
  font-weight: 600;
  color: var(--db-text);
  font-size: 13px;
  outline: none;
  width: 100%;
}
.db-title.editable-label,
.db-col-name.editable-label {
  display: block;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 2px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 列名文字上保持拖动手势（拖动调整列顺序）；双击进入编辑后 input 自动
   显示文本光标。标题不支持拖动，仍为文本光标。 */
.db-title.editable-label {
  cursor: text;
}
.db-col-name.editable-label {
  cursor: grab;
}
.db-title.editable-label:hover {
  background: var(--bg-hover);
}
/* 列名 hover 不显示灰色背景块（避免"编辑区"观感）；双击后直接进入编辑 */
.db-col-name.editable-label:hover {
  background: transparent;
}
.db-th-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}
.db-chip {
  border: 1px solid var(--db-border);
  background: var(--db-bg);
  color: var(--db-text-dim);
  border-radius: 10px;
  padding: 1px 8px;
  font-size: 11px;
  cursor: pointer;
}
.db-chip.active {
  color: var(--db-accent);
  border-color: var(--db-accent);
}
.db-icon {
  border: none;
  background: transparent;
  color: var(--db-text-dim);
  cursor: pointer;
  font-size: 13px;
  padding: 0 3px;
  border-radius: 4px;
  line-height: 1.4;
}
.db-icon:hover {
  color: var(--db-text);
  background: var(--bg-hover);
}
.db-icon.danger:hover {
  color: #e5484d;
}
.db-search {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--db-border);
  border-radius: 6px;
  padding: 2px 6px;
  background: var(--db-bg);
  white-space: nowrap;
}
.db-search-icon {
  color: var(--text-dim);
  flex-shrink: 0;
}
.db-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 12px;
  width: 150px;
  color: var(--text);
}
.db-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}
.db-td {
  padding: var(--db-row-pad-y) 6px;
  border-right: var(--db-cell-border-x) solid var(--db-cell-border-color);
  border-bottom: 1px solid var(--db-border);
  min-width: 0;
  position: relative;
  background: var(--db-row-bg);
  transition: background 0.12s;
}
.db-td:hover {
  background: var(--db-row-hover);
}
.db-td-selected {
  outline: 2px solid var(--db-accent);
  outline-offset: -1px;
  z-index: 1;
}
.db-td-fill {
  background: var(--accent-soft) !important;
}
.db-td.db-td-selected:hover {
  background: var(--db-row-bg);
}
.db-fill-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9px;
  height: 9px;
  background: var(--db-accent);
  border: 1px solid #fff;
  border-radius: 1px;
  cursor: ns-resize;
  z-index: 3;
  box-sizing: border-box;
}
.db-fill-handle:hover {
  width: 12px;
  height: 12px;
}
/* ---------- database view switch (table / kanban / calendar) ---------- */
.db-view-dropdown {
  position: relative;
  flex: none;
}
.db-view-drop-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--db-border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--db-text);
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.db-view-drop-btn:hover {
  background: var(--bg-hover);
}
.db-view-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 9995;
  min-width: 160px;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.db-view-menu-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  white-space: nowrap;
}
.db-view-menu-item:hover {
  background: var(--bg-hover);
}
.db-view-menu-item.active {
  color: var(--accent);
  font-weight: 600;
}
.db-view-menu-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.db-view-menu-row .db-view-menu-item {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-view-menu-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--accent);
  border-radius: 5px;
  background: var(--bg-editor);
  color: var(--text);
  font-size: 12.5px;
  padding: 4px 8px;
  outline: none;
  font-family: inherit;
}
.db-view-menu-new {
  color: var(--accent);
  font-weight: 600;
  border-top: 1px solid var(--border);
  border-radius: 0;
  margin-top: 3px;
  padding-top: 7px;
}
.db-view-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
  background: var(--bg);
}
.db-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-dim);
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.db-view-btn:hover {
  color: var(--db-text);
  background: var(--bg-hover);
}
.db-view-btn.active {
  color: var(--db-accent);
  background: var(--accent-soft);
}
.db-view-wrap {
  padding: 8px 10px;
  border-bottom: 1px solid var(--db-border);
}
.db-view-hint {
  color: var(--db-text-dim);
  font-size: 12.5px;
  padding: 14px 4px;
}
/* 时间线视图 */
.db-timeline {
  display: flex;
  flex-direction: column;
}
.db-timeline-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--db-text-dim);
  padding: 2px 0 8px;
}
.db-timeline-range {
  font-weight: 600;
  color: var(--db-text);
}
.db-timeline-today {
  margin-left: auto;
}
.db-timeline-body {
  overflow-x: auto;
}
.db-timeline-days {
  display: flex;
  gap: 6px;
  min-width: 980px;
}
.db-timeline-day {
  flex: 1;
  min-width: 64px;
  background: var(--db-bg);
  border: 1px solid var(--db-border);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 120px;
  position: relative;
}
.db-timeline-day.today {
  border-color: var(--db-accent2, var(--accent));
  background: var(--accent-soft);
}
.db-timeline-date {
  font-size: 11px;
  font-weight: 600;
  color: var(--db-text-dim);
  text-align: center;
}
.db-timeline-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--db-bg-soft, var(--bg-hover));
  border-radius: 6px;
  padding: 3px 6px;
  cursor: pointer;
  min-width: 0;
}
.db-timeline-item:hover {
  background: var(--db-row-hover);
}
.db-timeline-item.selected {
  outline: 2px solid var(--db-accent2, var(--accent));
}
.db-timeline-bar {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--db-accent2, var(--accent));
  flex: none;
}
.db-timeline-label {
  font-size: 12px;
  color: var(--db-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-timeline-add {
  position: absolute;
  right: 3px;
  bottom: 3px;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--db-text-dim);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.db-timeline-add:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
/* 甘特图视图 */
.db-gantt {
  display: flex;
  flex-direction: column;
}
.db-gantt-body {
  position: relative;
  overflow-x: auto;
}
.db-gantt-labels {
  min-width: 640px;
}
.db-gantt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 4px;
  cursor: pointer;
  border-radius: 6px;
}
.db-gantt-row:hover {
  background: var(--db-row-hover);
}
.db-gantt-row.selected {
  outline: 2px solid var(--db-accent2, var(--accent));
  outline-offset: -1px;
}
.db-gantt-label {
  flex: none;
  width: 140px;
  font-size: 12px;
  color: var(--db-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-gantt-track {
  flex: 1;
  position: relative;
  height: 18px;
  background: var(--db-bg-soft, var(--bg-hover));
  border-radius: 6px;
}
.db-gantt-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 4px;
  background: var(--db-accent2, var(--accent));
  min-width: 6px;
}
.db-gantt-head {
  display: flex;
  min-width: 640px;
  margin-top: 4px;
}
.db-gantt-day {
  flex: 1;
  font-size: 10px;
  color: var(--db-text-dim);
  text-align: center;
  border-left: 1px solid var(--db-border);
}
.db-gantt-day.today {
  color: var(--db-accent2, var(--accent));
  font-weight: 700;
}
.db-view-pick {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--db-text-dim);
  margin-bottom: 8px;
}
.db-view-select {
  border: 1px solid var(--db-border);
  border-radius: 6px;
  background: var(--db-bg);
  color: var(--db-text);
  font-size: 12px;
  padding: 3px 6px;
  outline: none;
}
.db-view-hint {
  color: var(--db-text-dim);
  font-size: 12px;
  padding: 12px 4px;
}
/* gallery */
.db-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  padding-bottom: 4px;
}
.db-gallery-small {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.db-gallery-small .db-gallery-cover {
  height: 90px !important;
}
.db-gallery-large {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.db-gallery-large .db-gallery-cover {
  height: 165px !important;
}
.db-gallery-card {
  background: var(--bg-side);
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.db-gallery-card:hover {
  border-color: var(--db-accent);
  box-shadow: var(--shadow);
}
.db-gallery-card.selected {
  border-color: var(--db-accent);
  outline: 2px solid var(--accent-soft);
}
/* default gray cover for gallery cards without an image (task 10) */
.db-gallery-cover-default {
  background: linear-gradient(180deg, #e6e6e6 0%, #cfcfcf 100%);
}
html[data-theme="dark"] .db-gallery-cover-default,
html[data-theme="nord"] .db-gallery-cover-default,
html[data-theme="dracula"] .db-gallery-cover-default,
html[data-theme="one-dark"] .db-gallery-cover-default,
html[data-theme="everforest"] .db-gallery-cover-default,
html[data-theme="cobalt"] .db-gallery-cover-default {
  background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
}
.db-gallery-cover {
  position: relative;
  height: 120px;
  background: var(--bg-hover);
  overflow: hidden;
}
.db-gallery-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.db-gallery-cover.cover-fill img {
  object-fit: cover;
}
.db-gallery-text {
  position: absolute;
  inset: 0;
  padding: 8px 10px;
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
.db-gallery-title {
  padding: 6px 9px 2px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-strong);
}
.db-gallery-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 2px 9px 8px;
}
/* chart */
.db-chart {
  padding-bottom: 4px;
}
.db-chart-svg {
  width: 100%;
  height: auto;
  max-height: 340px;
}
.db-chart-axis {
  font-size: 10px;
  fill: var(--text-dim);
}
.db-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 2px;
  font-size: 11px;
  color: var(--text-dim);
}
.db-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.db-chart-legend-item i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
}
/* gallery / chart config popup */
.db-view-cfg {
  position: absolute;
  z-index: 30;
  right: 10px;
  top: 8px;
  width: 200px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.db-view-cfg label {
  display: grid;
  grid-template-columns: 84px 1fr;
  align-items: center;
  gap: 6px;
}
.db-view-cfg select {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 11.5px;
  padding: 2px 5px;
  outline: none;
}
/* custom inline dropdown (native <select> popups can close on hover and
   overflow the settings popup — this one renders inside the panel) */
.db-cfg-select {
  position: relative;
  min-width: 0;
}
.db-cfg-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 11.5px;
  padding: 3px 6px;
  cursor: pointer;
  font-family: inherit;
}
.db-cfg-select-btn:hover {
  border-color: var(--db-accent);
}
.db-cfg-select-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-cfg-select-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 40;
  max-height: 170px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: var(--shadow);
  padding: 4px;
}
.db-cfg-select-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 11.5px;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-cfg-select-item:hover,
.db-cfg-select-item.active {
  background: var(--bg-hover);
  color: var(--db-accent);
}
.db-view-cfg .db-view-cfg-check {
  display: flex;
  align-items: center;
  gap: 6px;
}
.db-view-cfg .db-view-cfg-check input {
  accent-color: var(--db-accent);
}
/* kanban */
.db-kanban {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.db-kanban-col {
  flex: 0 0 200px;
  max-width: 240px;
  background: var(--bg-side);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  min-height: 120px;
}
.db-kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.db-kanban-cards {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.db-kanban-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: grab;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.db-kanban-cover {
  width: 100%;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  margin: -6px -8px 6px;
  width: calc(100% + 16px);
  display: block;
  user-select: none;
}
.db-kanban-card:hover {
  border-color: var(--db-accent);
}
.db-kanban-card.selected {
  outline: 2px solid var(--db-accent);
  outline-offset: -1px;
}
.db-kanban-card-title {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 4px;
  word-break: break-word;
}
.db-kanban-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.db-kanban-ghost {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  background: var(--bg);
  border: 1px solid var(--db-accent);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translate(-50%, -50%);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* calendar */
.db-cal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.db-cal-title {
  font-size: 14px;
}
.db-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.db-cal-wd {
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  padding: 2px 0;
}
.db-cal-cell {
  border: 1px solid var(--border);
  border-radius: 6px;
  min-height: 64px;
  padding: 4px 6px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}
.db-cal-cell.empty {
  border-color: transparent;
}
.db-cal-cell.has {
  background: var(--bg-side);
}
.db-cal-day {
  color: var(--text-dim);
  font-weight: 600;
}
.db-cal-item {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 11px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-cal-item:hover {
  border-color: var(--db-accent);
}
.db-cal-item.selected {
  outline: 1px solid var(--db-accent);
}
.db-cal-more {
  color: var(--text-dim);
  font-size: 11px;
}
.db-td-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.db-td-ops {
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--db-border);
}
/* batch-delete checkbox column (task 7) */
.db-th-check,
.db-td-check {
  display: flex; /* 需要 flex 容器，align-items 才生效（复选框与行文字同高居中） */
  align-items: center;
  justify-content: center;
  text-align: center;
}
.db-th-check {
  border-right: var(--db-cell-border-x) solid var(--db-cell-border-color);
  padding: 0;
}
.db-td-check {
  border-bottom: 1px solid var(--db-border);
  border-right: var(--db-cell-border-x) solid var(--db-cell-border-color);
  padding: 0;
}
.db-th-check input,
.db-td-check input {
  accent-color: var(--db-accent);
  cursor: pointer;
}
.db-row-checked {
  background: var(--accent-soft) !important;
}
/* ---------- Notion 风格选择列（用户要求 2026-08-22） ---------- */
/* 单元格：与行文字同高；打开时悬浮（上两角无圆角，与下拉贴合成一整体） */
.db-notion-sel {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 24px;
  padding: 1px 2px;
  border: 1px solid transparent;
  border-radius: 4px;
  /* 点击单元格任意位置（含输入框）即触发下拉（用户要求 2026-08-23） */
  cursor: pointer;
  transition: background 0.12s;
}
.db-notion-sel.open {
  background: var(--db-bg);
  border-color: var(--db-border);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 20;
}
/* 已选选项胶囊：背景只框住文本 */
.db-notion-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.3;
  white-space: nowrap;
  max-width: 100%;
}
.db-notion-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  padding: 0;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex: none;
}
.db-notion-chip-x:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.08);
}
/* 搜索输入框（胶囊右侧，边打边搜） */
.db-notion-input {
  flex: 1;
  min-width: 60px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  color: var(--db-text);
  padding: 2px 4px;
  font-family: inherit;
}
/* 下拉框：portal 到 body 的 fixed 定位（left/top/width 由组件计算），
   与单元格贴合（上边框无圆角），下两角圆角，悬浮显示；不被数据库容器裁剪。
   注意：portal 在 body，不能引用 .db 容器的 --db-bg/--db-border，用全局变量 */
.db-notion-dd {
  position: fixed;
  z-index: 5000;
  background: var(--bg, #fff);
  border: 1px solid var(--border);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 260px;
  overflow-y: auto;
}
/* 选项行：占满下拉宽度，hover 时整条（含文本与「…」）灰色背景（用户要求）。
   portal 在 body，不能用 .db 容器的 --db-row-hover，用全局 --bg-hover */
.db-notion-opt {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  width: 100%;
}
.db-notion-opt:hover {
  background: var(--bg-hover);
}
/* 选项胶囊：背景只包裹文本（用户要求 2026-08-23），不占满下拉宽度 */
.db-notion-opt-btn {
  flex: none;
  width: fit-content;
  max-width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: inherit;
}
.db-notion-opt-btn.selected {
  outline: 1px solid var(--db-accent);
}
/* 「…」：靠右显示（用户要求 2026-08-23），默认隐藏，选项 hover 时显示 */
.db-notion-opt-more {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-left: auto; /* 推到下拉框最右侧 */
}
.db-notion-opt-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s;
  padding: 0;
}
.db-notion-opt:hover .db-notion-opt-more-btn {
  opacity: 1;
}
.db-notion-opt-more-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
/* 颜色菜单：portal 到 body 的 fixed 定位（left/top 由组件计算） */
.db-notion-color-menu {
  position: fixed;
  z-index: 5100;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  padding: 6px;
  min-width: 150px;
}
.db-notion-color-title {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 5px;
  padding-left: 2px;
}
.db-notion-color-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.db-notion-color-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid transparent;
  cursor: pointer;
}
.db-notion-color-dot.active {
  outline: 2px solid var(--db-accent);
  outline-offset: 1px;
}
.db-notion-color-del {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: #e5484d;
  font-size: 12.5px;
  padding: 5px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
}
.db-notion-color-del:hover {
  background: rgba(229, 72, 77, 0.1);
}
/* 无匹配时的新建选项按钮 */
.db-notion-opt-new {
  border: none;
  background: transparent;
  color: var(--accent);
  text-align: left;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.db-notion-opt-new:hover {
  background: var(--bg-hover);
}

/* "+" add-column header cell (task 3) */
.db-th-add {
  align-items: center;
  justify-content: center;
  padding: 0;
  border-right: none;
}
.db-th-add .db-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* "+ new item" row adder under the table (task 2) */
.db-new-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  color: var(--db-text-dim);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.db-new-item:hover {
  color: var(--db-text);
  background: var(--db-row-hover);
}
/* batch-delete action bar (task 7) */
.db-batch-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-top: 1px solid var(--db-border);
  background: var(--accent-soft);
}
.db-batch-count {
  flex: 1;
  font-size: 12px;
  color: var(--db-text);
  font-weight: 600;
}
.db-batch-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.db-batch-edit .db-popup-input {
  border: 1px solid var(--db-border);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  background: var(--db-bg);
}
/* 列设置 popup */
.db-col-settings {
  min-width: 200px;
}
.db-col-settings-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--db-text-dim);
  padding: 4px 2px;
}
.db-col-settings-check {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.db-col-settings-check input {
  accent-color: var(--accent);
  margin: 0;
}
.db-unique-warn {
  color: #d33;
  font-size: 12px;
  white-space: nowrap;
}
/* row 6-dot handle: grab cursor + drag feedback (task 4) */
.db-td-grip {
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--db-text-dim);
  border-bottom: 1px solid var(--db-border);
}
.db-td-grip:hover {
  color: var(--db-text);
  background: var(--db-row-hover);
}
.db-td-grip:active {
  cursor: grabbing;
}
.db-row-drag-source .db-td-grip,
.db-row-drag-source.db-td-grip {
  cursor: grabbing;
}
.db-row-drag-source {
  outline: 2px solid var(--db-accent);
  outline-offset: -1px;
  z-index: 2;
  opacity: 0.85;
}
.db-row-drag-over .db-td,
.db-row-drag-over.db-td {
  box-shadow: inset 0 2px 0 var(--db-accent);
}
.db-row-drag-over .db-td-grip,
.db-row-drag-over.db-td-grip {
  box-shadow: inset 2px 0 0 var(--db-accent);
}
/* 行拖动插入位置：灰色粗线（上/下边缘） */
.db-row-drop-before {
  box-shadow: inset 0 3px 0 #8a8f98;
}
.db-row-drop-after {
  box-shadow: inset 0 -3px 0 #8a8f98;
}
/* 列拖拽排序：源列半透明 + 目标位置灰色粗线 */
.db-th {
  cursor: grab;
}
.db-col-drag-src {
  opacity: 0.5;
  cursor: grabbing;
}
body.db-col-dragging,
body.db-col-dragging * {
  cursor: grabbing !important;
  user-select: none;
}
.db-col-drop-before {
  box-shadow: inset 3px 0 0 #8a8f98;
}
.db-col-drop-after {
  box-shadow: inset -3px 0 0 #8a8f98;
}
/* 列宽调整手柄 */
.db-col-resize {
  position: absolute;
  right: -3px;
  top: 0;
  bottom: 0;
  width: 7px;
  cursor: col-resize;
  z-index: 3;
}
.db-th {
  position: relative;
}
body.db-resizing {
  cursor: col-resize;
  user-select: none;
}
.db-input {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--db-text);
  font-size: var(--db-font-size);
  outline: none;
  padding: 2px 0;
  resize: none;
  font-family: inherit;
  line-height: 1.45;
}
.db-input-rich {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
}
.db-input[type="date"] {
  font-size: 12px;
}
/* primary (事项) cell: the open/close button sits ON THE SAME ROW as the text */
.db-td-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.db-td-primary .db-input {
  flex: 1;
  min-width: 0;
}
.db-row-open {
  flex: none;
  border: 1px solid var(--db-border);
  background: transparent;
  color: var(--db-text-dim);
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 5px;
  cursor: pointer;
  line-height: 1.5;
  white-space: nowrap;
}
.db-row-open:hover {
  color: var(--db-accent2);
  border-color: var(--db-accent2);
  background: var(--accent-soft);
}
.db-row-open.is-open {
  color: var(--db-accent2);
  border-color: var(--db-accent2);
  background: var(--accent-soft);
}
.db-select-cell {
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--db-text);
  font-size: var(--db-font-size);
  cursor: pointer;
  padding: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-select-cell:hover {
  color: var(--db-accent2);
}
/* 多选 / 人员 / 文件 标签列 */
.db-td-tags {
  min-width: 0;
}
.db-tags-cell {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  border: none;
  background: transparent;
  color: var(--db-text);
  font-size: var(--db-font-size);
  cursor: pointer;
  padding: 2px 0;
  text-align: left;
}
.db-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--db-accent-soft, rgba(79, 110, 247, 0.12));
  color: var(--db-accent2, var(--db-text));
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 12px;
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-tag-person {
  background: rgba(79, 110, 247, 0.14);
}
.db-tag-file {
  background: rgba(0, 0, 0, 0.06);
}
.db-tags-empty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--db-text-dim);
  font-size: 12px;
}
/* URL / 邮箱 / 电话 链接列 */
.db-td-link {
  min-width: 0;
}
.db-link-cell {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--db-accent2, #4f6ef7);
  font-size: var(--db-font-size);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.db-link-cell:hover {
  text-decoration: underline;
}
/* 公式列 */
.db-td-formula {
  display: flex;
  align-items: center;
  min-width: 0;
}
.db-formula-value {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--db-text-dim);
  font-size: var(--db-font-size);
  font-variant-numeric: tabular-nums;
}
/* load more 行 */
.db-load-more {
  grid-column: 1 / -1;
  border: none;
  background: transparent;
  color: #7a828e;
  font-size: 13px;
  padding: 9px 12px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.db-load-more:hover {
  color: var(--db-text);
  background: var(--db-row-hover);
}
/* 多选 popup：checkbox 行 */
.db-popup-multi {
  min-width: 180px;
}
.db-popup-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.db-popup-check input {
  accent-color: var(--accent);
  margin: 0;
}
/* 文件列上传 popup */
.db-file-picker {
  min-width: 240px;
}
.db-file-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  text-align: center;
}
.db-file-dropzone:hover {
  border-color: var(--accent);
  color: var(--text);
  background: var(--bg-hover);
}
.db-file-dropzone.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.db-file-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  max-height: 160px;
  overflow-y: auto;
}
.db-file-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text);
}
.db-file-item:hover {
  background: var(--bg-hover);
}
.db-file-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* URL/邮箱/电话 可编辑输入 */
.db-td-link {
  min-width: 0;
}
.db-link-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.db-link-input-icon {
  color: var(--db-text-dim);
  flex-shrink: 0;
}
.db-link-open {
  display: inline-flex;
  align-items: center;
  color: var(--db-accent2, #4f6ef7);
  flex-shrink: 0;
  cursor: pointer;
  border-radius: 4px;
  padding: 1px;
}
.db-link-open:hover {
  background: var(--bg-hover);
}
/* relation column (关联) */
.db-td-relation {
  display: flex;
  align-items: center;
  min-width: 0;
}
.db-relation-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--db-text);
  font-size: var(--db-font-size);
  cursor: pointer;
  padding: 2px 0;
  text-align: left;
}
.db-relation-labels {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-relation-empty {
  color: var(--db-text-dim);
}
.db-relation-count {
  flex: none;
  min-width: 18px;
  text-align: center;
  font-size: 10.5px;
  line-height: 1.6;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--db-accent);
  padding: 0 5px;
  font-weight: 600;
}
/* rollup column (汇总) */
.db-td-rollup {
  display: flex;
  align-items: center;
  color: var(--db-text);
}
.db-rollup-value {
  font-weight: 500;
  color: var(--db-accent2);
}
/* relation rows picker popup */
.db-relation-picker {
  min-width: 220px;
  max-height: 300px;
}
.db-relation-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  max-height: 200px;
}
.db-relation-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
}
.db-relation-item:hover {
  background: var(--bg-hover);
}
.db-relation-item.active {
  background: var(--accent-soft);
}
.db-relation-item input {
  accent-color: var(--accent);
  cursor: pointer;
}
.db-relation-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 6px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
}
.db-popup-hint {
  font-size: 11.5px;
  color: var(--text-dim);
  padding: 6px 8px;
}
.db-corner {
  border-bottom: 1px solid var(--db-border);
}
.db-foot {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-top: 1px solid var(--db-border);
}
.db-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  padding: 8px 10px;
  border-top: 1px solid var(--db-border);
  background: var(--db-header-bg);
  font-size: 12px;
  color: var(--db-text);
}
.db-summary-label {
  color: var(--db-text-dim);
  font-weight: 600;
}
.db-summary-item b {
  color: var(--db-text);
}
.db-popup {
  position: fixed;
  z-index: 9990;
  min-width: 160px;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* 列类型菜单：两列网格，容纳全部 14 种类型 */
.db-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  min-width: 220px;
}
.db-type-grid .db-popup-item {
  white-space: nowrap;
}
.db-popup-title {
  font-size: 11px;
  color: var(--text-dim);
  padding: 2px 6px 4px;
  font-weight: 600;
}
.db-popup-item {
  border: none;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.db-popup-item > svg {
  flex: none;
  color: var(--text-dim);
}
.db-popup-item:hover,
.db-popup-item.active {
  background: var(--bg-hover);
}
.db-popup-item.active {
  color: var(--db-accent);
}
.db-popup-item.danger:hover {
  color: #e5484d;
}
.db-popup-input {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-editor);
  color: var(--text);
  /* 筛选输入框高度与文字一致（大写字母 / 中文取更高者，用户要求 2026-08-22）：
     上下 padding 收紧到 2px，行高 1.4 → 框高 ≈ 文字行高 + 极窄内边距 */
  padding: 2px 8px;
  font-size: 12.5px;
  line-height: 1.4;
  outline: none;
  margin-top: 4px;
}

/* ---------- 7. image placeholder (empty src while the URL prompt is open) ---------- */
.milkdown img[src=""] {
  display: inline-block;
  min-width: 260px;
  min-height: 90px;
  background: var(--bg-hover);
  border-radius: 8px;
  border: 1px dashed var(--border);
}

/* ---------- 5. selection toolbar (format popup on selected text) ---------- */
.sel-bar {
  position: absolute;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 3px;
  animation: modal-pop 0.12s ease;
}
.sel-bar button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.sel-bar button:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.sel-bar button.sel-bar-danger:hover {
  color: #e5484d;
}
.sel-bar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 8px;
  height: 8px;
  background: var(--bg);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
}
.sel-color-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  border: none;
  padding: 0;
}
/* 颜色预设面板（用户要求 2026-08-24）：Notion 10 色圆角方框 + 自定义色 */
.sel-color-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.sel-color-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 6px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  width: 158px;
}
.sel-bar .sel-color-swatch {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.sel-bar .sel-color-swatch:hover {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.sel-color-swatch-a {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1;
}
.sel-color-custom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 4px;
  margin-top: 2px;
  border-top: 1px solid var(--border);
}
.sel-color-custom .sel-color-input {
  position: static;
  width: 26px;
  height: 24px;
  opacity: 1;
  pointer-events: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px;
  cursor: pointer;
  background: none;
}
.sel-color-custom-label {
  font-size: 11.5px;
  color: var(--text-dim);
}

/* ---------- full-width display ---------- */
.app.full-width .milkdown-wrap,
.app.full-width .doc-title {
  max-width: none;
}
.app.full-width .pm-bar-inner {
  max-width: none;
}
.app.full-width .breadcrumb {
  max-width: none;
}
.app.full-width .milkdown-wrap {
  padding-left: 64px;
  padding-right: 64px;
}
/* 全宽下标题与正文左对齐（用户要求 2026-08-22）：pm-bar-inner 已提供 64px
   左内边距，doc-title / doc-title-wrap / pm-title-wrap 不再重复加 padding 或
   用 860px 居中盒子（否则标题第一字符右移 64-143px） */
.app.full-width .doc-title-wrap {
  max-width: none;
  margin: 0;
}
.app.full-width .doc-title {
  padding-left: 0;
  padding-right: 0;
}
.app.full-width .pm-bar-inner {
  padding-left: 64px;
  padding-right: 64px;
}
/* 全宽时无封面 icon 悬浮位置跟随内容左缘（与标题首字符对齐） */
.app.full-width .pm-bar:not(:has(.pm-cover)) .pm-bar-inner-cover .pm-icon-cover {
  left: 64px;
}
.app.full-width .pm-bar:not(:has(.pm-cover)) .pm-bar-inner-cover .pm-title-wrap {
  padding-left: 0;
}
/* 全宽时有封面：icon 悬浮在封面下缘，同样跟随内容左缘 64px（用户要求
   2026-08-22：全宽下 icon 与标题左对齐） */
.app.full-width .pm-bar:has(.pm-cover) .pm-bar-inner-cover .pm-icon-cover {
  left: 64px;
}
.app.full-width .breadcrumb {
  padding-left: 12px;
  padding-right: 12px;
}

/* ---------- UI style presets (data-style) ---------- */
:root[data-style="notion"] {
  --accent: #37352f;
  --accent-soft: rgba(55, 53, 47, 0.12);
  --selection: rgba(55, 53, 47, 0.2);
  --quote-border: #e2e0dc;
  --border: #e9e9e7;
}
:root[data-style="mondrian"] {
  --accent: #e32636;
  --accent-soft: rgba(227, 38, 54, 0.12);
  --selection: rgba(249, 214, 22, 0.45);
  --quote-border: #0f4c81;
  --border: #0f4c81;
  --table-head: rgba(249, 214, 22, 0.25);
}
:root[data-style="picasso"] {
  --bg: #f5efe6;
  --bg-side: #efe5d8;
  --bg-hover: #e9dccb;
  --bg-active: #dfcdb4;
  --bg-editor: #f5efe6;
  --toolbar-bg: #efe5d8;
  --status-bg: #efe5d8;
  --text: #2b2118;
  --text-strong: #1c150e;
  --text-dim: #8a7a67;
  --border: #d9c7b5;
  --accent: #c86b4d;
  --accent-soft: rgba(200, 107, 77, 0.14);
  --selection: rgba(200, 107, 77, 0.22);
  --code-bg: #eadfce;
  --quote-border: #c86b4d;
  --table-head: #eadfce;
}
:root[data-style="focus"] {
  --accent: #0070f3;
  --accent-soft: rgba(0, 112, 243, 0.12);
  --selection: rgba(0, 112, 243, 0.22);
  --border: #eaeaea;
  --quote-border: #d0d0d0;
  --code-bg: #f7f7f7;
  --table-head: #f7f7f7;
}

/* ---------- table of contents ([TOC] block) ---------- */
.toc-block {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-side, var(--bg));
  padding: 12px 16px;
  margin: 12px 0;
}
.toc-block::before {
  content: "目录";
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-item {
  padding: 3px 0 3px 0;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  border-radius: 4px;
  padding-left: 6px;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toc-item:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.toc-lv-2 { padding-left: 20px; font-size: 13px; }
.toc-lv-3 { padding-left: 36px; font-size: 12.5px; }
.toc-lv-4 { padding-left: 52px; font-size: 12px; }
.toc-lv-5 { padding-left: 68px; font-size: 12px; }
.toc-lv-6 { padding-left: 84px; font-size: 12px; }
.toc-empty {
  font-size: 12.5px;
  color: var(--text-dim);
  padding: 4px 0;
}

/* ---------- account management sub-tabs (plan / invoices / referral) ---------- */
.acct-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.acct-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  background: var(--bg-editor);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-family: inherit;
}
.acct-tab:hover { border-color: var(--accent); }
.acct-tab.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.billing-panel { display: flex; flex-direction: column; gap: 4px; }
.plan-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  background: var(--bg-editor);
}
.plan-card.plan-pro { border-color: var(--accent); }
.plan-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
}
.plan-status { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.plan-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-hover);
  margin-top: 10px;
  overflow: hidden;
}
.plan-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
.plan-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
/* token 用量（用户 2026-08-26） */
.plan-token-row {
  margin-top: 12px;
}
.plan-token-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}
.plan-token-label .muted {
  margin-left: auto;
  font-weight: 400;
}
.plan-bar-token {
  height: 8px;
}
/* 三档套餐对比（3 秒可读完 · 用户 2026-08-26） */
.plan-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.plan-col {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 12px;
  background: var(--bg-editor);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.plan-col.current {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.plan-col-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
}
.plan-col-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-strong);
}
.plan-col-per {
  font-size: 12px;
  color: var(--text-dim);
}
.plan-col-tokens {
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 600;
}
.plan-col-features {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.plan-col-features li {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.45;
}
.plan-col-features li svg {
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}
.plan-col-cta {
  margin-top: auto;
  padding-top: 8px;
}
.plan-col-cta .btn {
  width: 100%;
}
.plan-col-current {
  font-size: 12.5px;
  color: var(--text-dim);
}
/* 顶部 AI 额度横幅（用户 2026-08-26） */
.ai-quota-banner {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text);
  background: var(--bg-editor);
  border-bottom: 1px solid var(--accent);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}
.ai-quota-banner span {
  flex: 1;
}
.ai-quota-banner-close {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  padding: 2px;
  border-radius: 4px;
}
.ai-quota-banner-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.settings-nav-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.ref-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin: 4px 0 6px;
}
.ref-stat {
  font-size: 13px;
  color: var(--text);
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 6px 12px;
}
.ref-stat b { color: var(--accent); }
.ref-paid { color: #2e7d32; font-size: 12.5px; }
.ref-reg { color: var(--text-dim); font-size: 12.5px; }

/* ---------- settings dialog ---------- */
.settings-section {
  margin-bottom: 18px;
}
.settings-label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
/* preset theme gallery (Theme Gallery) */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  margin-bottom: 6px;
}
/* 主题两步选择：风格卡片（默认 / Nebula） */
.style-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 8px 0 14px;
}
.style-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  background: var(--bg-editor);
  text-align: left;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.style-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.style-card.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.style-card-name { font-size: 14px; font-weight: 700; }
.style-card-desc { font-size: 12px; color: var(--text-dim); }
.theme-grid-step2 { margin-top: 2px; }
.theme-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-editor);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  text-align: left;
  color: var(--text);
  font-family: inherit;
}
.theme-card:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.theme-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.theme-swatches {
  display: flex;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  height: 34px;
}
.theme-swatches-auto {
  gap: 2px;
  background: linear-gradient(90deg, #ffffff 50%, #1f1f1f 50%);
  border: none;
}
.theme-swatches-auto .theme-swatch {
  border: 1px solid rgba(0, 0, 0, 0.15);
}
.theme-swatch {
  flex: 1;
}
.theme-card-name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 600;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.settings-text-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
  flex: 1;
  min-width: 180px;
  margin-top: 8px;
}
.settings-text-row input {
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--text);
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.settings-text-row input:focus {
  border-color: var(--accent);
}
.settings-error {
  margin-top: 8px;
  font-size: 12px;
  color: #e5484d;
}
.sync-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.sync-account {
  margin-bottom: 10px;
}
.sync-account-email {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.settings-row-img-host {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.typo-row {
  margin-top: 8px;
}
.typo-label {
  width: 52px;
  font-size: 12px;
  color: var(--text-dim);
  flex: none;
}
.custom-css-input {
  width: 100%;
  min-height: 150px;
  margin-top: 8px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  font-family: var(--mono-font, Consolas, monospace);
  color: var(--text);
  outline: none;
  resize: vertical;
  box-sizing: border-box;
}
.custom-css-input:focus {
  border-color: var(--accent);
}
.choice-card {
  flex: 1 1 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  min-width: 108px;
  background: var(--bg-editor);
}
.choice-card:hover {
  border-color: var(--accent);
}
.choice-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
.choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
}
.choice-hint {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.5;
}
.swatches {
  display: flex;
  gap: 4px;
  margin-bottom: 2px;
}
.swatch {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
}
.size-row {
  margin-top: 12px;
}
.size-row input[type="range"] {
  flex: 1;
  accent-color: var(--accent);
}
.size-value {
  min-width: 40px;
  text-align: right;
  color: var(--text);
  font-size: 13px;
}
.storage-info {
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.8;
  margin-bottom: 10px;
  word-break: break-all;
}
.storage-path {
  color: var(--text-dim);
}
.settings-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
/* settings dialog: categorized layout (left nav + right content, 80% width) */
.settings-layout {
  display: flex;
  gap: 0;
  /* 填满 modal-body（flex:1 有确定高度）→ 左侧导航固定，右侧内容独立滚动 */
  height: 100%;
  min-height: 0;
}
.settings-nav {
  flex: none;
  width: 168px;
  border-right: 1px solid var(--border);
  margin-right: 18px;
  padding-right: 6px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.settings-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  font-family: inherit;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.settings-nav-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.settings-nav-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.settings-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.switch-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text);
  cursor: pointer;
  padding: 6px 0;
}
.switch-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.switch-row input[type="radio"] {
  accent-color: var(--accent);
  cursor: pointer;
}
.settings-inline-hint {
  color: var(--text-dim);
  font-weight: 400;
}

/* ---------- graph view (关系图谱) ---------- */
.graph-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.graph-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.graph-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-strong);
  white-space: nowrap;
}
.graph-stats {
  color: var(--text-dim);
  font-size: 12px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.graph-filters {
  display: flex;
  align-items: center;
  gap: 6px;
}
.graph-filter-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 12px;
  padding: 4px 6px;
  outline: none;
  cursor: pointer;
  max-width: 150px;
}
.graph-bar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.graph-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.graph-btn:hover {
  background: var(--bg-active);
}
.graph-close {
  padding: 5px 8px;
}
.graph-canvas {
  flex: 1;
  overflow: hidden;
  position: relative;
  cursor: grab;
  background: var(--bg);
}
.graph-canvas:active {
  cursor: grabbing;
}
.graph-canvas canvas {
  display: block;
}

/* ---------- 全文档数据库视图 (task 14) ---------- */
.dbv-overlay {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.dbv-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.dbv-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-strong);
  white-space: nowrap;
}
.dbv-count {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 400;
}
.dbv-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.dbv-search {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  padding: 4px 8px;
  color: var(--text-dim);
}
.dbv-search input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  width: 180px;
}
.dbv-clear {
  display: inline-flex;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 1px;
  border-radius: 3px;
}
.dbv-clear:hover {
  color: var(--text);
  background: var(--bg-active);
}
.dbv-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 12.5px;
  padding: 4px 6px;
  outline: none;
  cursor: pointer;
}
.dbv-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text);
  padding: 5px 8px;
  cursor: pointer;
}
.dbv-close:hover {
  background: var(--bg-active);
}
.dbv-body {
  flex: 1;
  overflow: auto;
  padding: 10px 16px 24px;
}
.dbv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.dbv-table th {
  text-align: left;
  font-weight: 600;
  color: var(--text-dim);
  font-size: 12px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
}
.dbv-table th:hover {
  color: var(--text);
}
.dbv-th-label {
  margin-right: 4px;
}
.dbv-sorted {
  color: var(--accent) !important;
}
.dbv-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.dbv-row {
  cursor: pointer;
}
.dbv-row:hover {
  background: var(--bg-hover);
}
.dbv-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--text-strong);
}
.dbv-name svg {
  color: var(--text-dim);
  flex-shrink: 0;
}
.dbv-ws {
  color: var(--text-dim);
  font-size: 12px;
}
.dbv-time {
  color: var(--text-dim);
  font-size: 12px;
  white-space: nowrap;
}
.dbv-num {
  text-align: right;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dbv-todo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
}
.dbv-todo svg {
  color: var(--accent);
}
.dbv-dbs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
}
.dbv-dbs svg {
  color: var(--accent);
}
.dbv-zero {
  color: var(--text-dim);
}
.dbv-empty td {
  text-align: center;
  color: var(--text-dim);
  padding: 40px 0;
}
/* 每列筛选按钮 + 筛选弹窗 */
.dbv-filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 4px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  vertical-align: middle;
}
.dbv-filter-btn:hover {
  background: var(--bg-hover);
}
.dbv-filter-btn.active {
  color: var(--accent);
  background: var(--accent-soft, rgba(0, 122, 255, 0.12));
}
.dbv-filter-pop {
  position: absolute;
  top: 10px;
  right: 20px;
  z-index: 20;
  width: 260px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.dbv-filter-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.dbv-filter-row {
  display: flex;
  gap: 6px;
}
.dbv-filter-op {
  flex-shrink: 0;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
}
.dbv-filter-num,
.dbv-filter-text {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  outline: none;
}
.dbv-filter-num:focus,
.dbv-filter-text:focus {
  border-color: var(--accent);
}
.dbv-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}
.dbv-filter-clear {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.dbv-filter-clear:hover {
  color: #e5484d;
}
.dbv-filter-ok {
  font-size: 12px;
  padding: 4px 14px;
  border-radius: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

/* ---------- 标签管理页 (TagsView) ---------- */
.tags-view {
  position: fixed;
  inset: 0;
  z-index: 75;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.tags-view-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.tags-view-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-strong);
  white-space: nowrap;
}
.tags-view-count {
  color: var(--text-dim);
  font-size: 12px;
  font-weight: 400;
}
.tags-view-search {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  padding: 4px 8px;
  color: var(--text-dim);
  margin-left: auto;
}
.tags-view-search input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  width: 180px;
}
.tags-view-clear {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 1px;
  border-radius: 3px;
}
.tags-view-close {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text);
  padding: 5px 8px;
  cursor: pointer;
  display: inline-flex;
}
.tags-view-close:hover {
  background: var(--bg-active);
}
.tags-view-body {
  flex: 1;
  display: flex;
  min-height: 0;
}
.tags-view-list {
  width: 240px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 8px;
  flex: none;
}
.tags-view-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.tags-view-item:hover {
  background: var(--bg-hover);
}
.tags-view-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.tags-view-item .tags-view-count {
  margin-left: auto;
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 0 6px;
  font-size: 11px;
}
.tags-view-docs {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
  min-width: 0;
}
.tags-view-docs-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.tags-view-doc {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.tags-view-doc:hover {
  background: var(--bg-hover);
}
.tags-view-doc-name {
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tags-view-doc-path {
  margin-left: auto;
  color: var(--text-dim);
  font-size: 11.5px;
  max-width: 40%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tags-view-empty {
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 20px 10px;
  text-align: center;
}

.empty-doc-guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 26px 20px 12px;
}
.empty-doc-hint {
  color: var(--text-dim);
  font-size: 13px;
}
.empty-doc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.empty-doc-actions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.empty-doc-actions button:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.publish-dialog {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.publish-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.publish-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-dim);
}
.publish-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 13px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}
.publish-hint {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.publish-done {
  color: var(--accent);
  font-size: 12.5px;
}
.publish-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.publish-cloud {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.publish-cloud-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.publish-cloud-done {
  font-size: 12.5px;
  color: var(--accent);
  margin-bottom: 6px;
  word-break: break-all;
}
.publish-cloud-done a {
  color: var(--accent);
  text-decoration: underline;
}
.publish-cloud-err {
  font-size: 12.5px;
  color: #e5484d;
  margin-bottom: 6px;
}
.publish-endpoint {
  margin-top: 8px;
}
/* ---- force-parameter sliders (布局参数) ---- */
.graph-params {
  position: absolute;
  z-index: 20;
  right: 14px;
  bottom: 14px;
  width: 210px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 11.5px;
}
.graph-param {
  display: grid;
  grid-template-columns: 64px 1fr 44px;
  align-items: center;
  gap: 6px;
  color: var(--text-dim);
}
.graph-param span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.graph-param input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.graph-param b {
  color: var(--text);
  font-weight: 600;
  text-align: right;
}
.graph-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}
/* ---- 图谱节点搜索 ---- */
.graph-search {
  position: absolute;
  z-index: 22;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  width: 340px;
  max-width: calc(100vw - 40px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.graph-search-input-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.graph-search-ic {
  flex: none;
  color: var(--text-dim);
}
.graph-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  outline: none;
  font-family: inherit;
}
.graph-search-clear {
  flex: none;
  padding: 3px 6px;
}
.graph-search-results {
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}
.graph-search-hint {
  color: var(--text-dim);
  font-size: 12px;
  padding: 10px 8px;
  text-align: center;
}
.graph-search-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
}
.graph-search-item:hover {
  background: var(--bg-hover);
}
.graph-search-item.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.graph-search-item-name {
  font-weight: 600;
}
.graph-search-item-meta {
  font-size: 11px;
  color: var(--text-dim);
}
.graph-edge {
  stroke: var(--text-dim);
  stroke-opacity: 0.35;
  stroke-width: 1;
  transition: stroke-opacity 0.15s;
}
.graph-edge.active {
  stroke: var(--accent);
  stroke-opacity: 0.9;
  stroke-width: 1.6;
}
.graph-node {
  cursor: pointer;
  transition: opacity 0.15s;
}
.graph-hit {
  fill: transparent;
}
.graph-dot {
  fill: var(--text-dim);
  stroke: none;
}
.graph-node.current .graph-dot {
  fill: var(--accent);
  stroke: #ffffff;
  stroke-width: 2.5;
}
.graph-node.hover .graph-dot {
  fill: var(--accent);
}
.graph-node.dim {
  opacity: 0.15;
}
.graph-label {
  font-size: 12px;
  fill: var(--text);
  pointer-events: none;
  user-select: none;
}
.graph-node.current .graph-label {
  fill: var(--text-strong);
  font-weight: 600;
}
.graph-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 13.5px;
  pointer-events: none;
}

/* ---------- image drag-to-reorder ---------- */
.tc-drop-line {
  position: fixed;
  z-index: 120;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.tc-drop-line::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}
.tc-image-wrap.dragging img {
  opacity: 0.4;
}
body.tc-dragging-img,
body.tc-dragging-img * {
  user-select: none !important;
}
body.tc-dragging-img {
  cursor: grabbing;
}

/* ---------- quick capture (快速捕获) ---------- */
.qc {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 2px;
}
.qc-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-strong);
}
.qc-hint {
  font-size: 11.5px;
  color: var(--text-dim);
  flex: 1;
}
.qc-close {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 3px;
  display: inline-flex;
  border-radius: 4px;
}
.qc-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.qc-title-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
  padding: 10px 12px;
  outline: none;
  font-family: inherit;
}
.qc-title-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.qc-body {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 13.5px;
  padding: 10px 12px;
  resize: vertical;
  min-height: 70px;
  font-family: inherit;
  line-height: 1.6;
  outline: none;
}
.qc-body:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.qc-listening {
  font-size: 12px;
  color: #e5484d;
  background: rgba(229, 72, 77, 0.1);
  border-radius: 6px;
  padding: 6px 10px;
  animation: qc-pulse 1.2s ease-in-out infinite;
}
.qc-listening.qc-err {
  color: var(--text-dim);
  background: var(--bg-hover);
  animation: none;
}
@keyframes qc-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}
.qc-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qc-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
}
.qc-btn:hover {
  background: var(--bg-active);
}
.qc-btn.active {
  border-color: #e5484d;
  color: #e5484d;
  background: rgba(229, 72, 77, 0.1);
}
.qc-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.qc-spacer {
  flex: 1;
}
.qc-save {
  font-size: 13px;
}
.qc-saved {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px;
}
.qc-saved-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(52, 199, 89, 0.15);
  color: #34c759;
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.qc-saved-text {
  flex: 1;
  min-width: 0;
}
.qc-saved-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-strong);
}
.qc-saved-name {
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qc-saved-actions {
  display: flex;
  gap: 8px;
}

/* settings: quick capture AI fields */
.settings-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--bg-hover);
  border-radius: 8px;
}
.settings-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-field label {
  font-size: 12px;
  color: var(--text-dim);
}
.settings-field input {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  padding: 6px 9px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
}
.settings-field input:focus {
  border-color: var(--accent);
}
.settings-hint {
  font-size: 11.5px;
  color: var(--text-dim);
  line-height: 1.5;
}
/* ---------- 首次使用引导（Onboarding） ---------- */
.onboarding {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.onb-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
}
.onb-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.onb-role {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s, background 0.12s;
}
.onb-role b {
  font-size: 13px;
}
.onb-role span {
  font-size: 11.5px;
  color: var(--text-dim);
}
.onb-role:hover {
  border-color: var(--accent);
}
.onb-role.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.onb-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.onb-feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  cursor: pointer;
  color: var(--text);
}
.onb-feature input {
  accent-color: var(--accent);
}
.onb-feature.on {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.onb-feature em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-dim);
}
.onb-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.onb-tour {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  background: var(--bg-hover);
}
.onb-tour-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 8px;
}
.onb-tour-desc {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
}
.onb-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.onb-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  cursor: pointer;
}
.onb-dot.active {
  background: var(--accent);
}
/* ---------- 消息中心（AI 工作流） ---------- */
.msg-center {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}
.msg-tabs {
  display: flex;
  gap: 6px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.msg-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 5px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.msg-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.msg-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #e5484d;
  color: #fff;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.msg-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
.msg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.msg-empty {
  color: var(--text-dim);
  font-size: 12.5px;
  text-align: center;
  padding: 24px 8px;
}
.msg-item {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--bg);
  cursor: pointer;
}
.msg-item.read {
  opacity: 0.65;
}
.msg-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
}
.msg-item-head b {
  flex: 1;
  color: var(--text-strong);
}
.msg-item-kind {
  font-size: 10.5px;
  color: var(--text-dim);
  background: var(--bg-hover);
  padding: 1px 6px;
  border-radius: 4px;
}
.msg-item-time {
  font-size: 10.5px;
  color: var(--text-dim);
  flex: none;
}
.msg-item-body {
  font-size: 12px;
  color: var(--text);
  margin-top: 6px;
  white-space: pre-wrap;
  line-height: 1.5;
}
.msg-item-tags {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.msg-tag {
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 7px;
  border-radius: 999px;
}
.msg-add-tag {
  font-size: 11px;
  border: 1px dashed var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  padding: 1px 7px;
  cursor: pointer;
}
.msg-add-tag:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.msg-del {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
}
.msg-del:hover {
  color: #e5484d;
}
.msg-form {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.msg-form-col {
  flex-direction: column;
  align-items: stretch;
}
.msg-form-row {
  display: flex;
  gap: 6px;
  align-items: center;
}
.msg-form .modal-input {
  flex: 1;
  min-width: 0;
}
.msg-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-hover);
  overflow: hidden;
}
.msg-progress i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}
/* topbar 消息中心未读角标 */
.tool-btn {
  position: relative;
}
.toolbar-msg-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 7px;
  background: #e5484d;
  color: #fff;
  font-size: 9px;
  line-height: 14px;
  text-align: center;
}
/* LLM Wiki 生成规则（prompt）：只读展示 + 编辑态 */
.llm-wiki-prompt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.llm-wiki-prompt-view {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 220px;
  overflow-y: auto;
  user-select: text;
}
.llm-wiki-prompt-area {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.6;
  padding: 10px 12px;
  font-family: inherit;
  resize: vertical;
  outline: none;
}
.llm-wiki-prompt-area:focus {
  border-color: var(--accent);
}
.llm-wiki-prompt-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.llm-wiki-regen-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.llm-wiki-regen-msg {
  font-size: 12px;
  color: var(--accent);
}
.llm-wiki-spin {
  animation: llm-wiki-spin 1s linear infinite;
}
@keyframes llm-wiki-spin {
  to { transform: rotate(360deg); }
}

/* ---------- focus / zen mode (聚焦模式) ---------- */
/* hide every panel — only the editor remains */
html.tc-focus .toolbar {
  display: none !important;
}
html.tc-focus .sidebar {
  display: none !important;
}
html.tc-focus .outline-panel {
  display: none !important;
}
html.tc-focus .statusbar {
  display: none !important;
}
html.tc-focus .editor-area {
  background: var(--bg-editor);
}
/* soft backgrounds: auto (beige in light, dark in dark) or forced variants.
   :root.tc-focus keeps specificity above :root[data-theme=...] variable sets */
:root.tc-focus {
  --bg: #faf7f0;
  --bg-side: #faf7f0;
  --bg-editor: #faf7f0;
  --bg-hover: #f2ede3;
  --bg-active: #eae3d4;
  --border: #e8e1d2;
  --text: #3f3d36;
  --text-strong: #28261f;
  --text-dim: #8f8a7d;
  --toolbar-bg: #faf7f0;
  --status-bg: #faf7f0;
}
:root.tc-focus[data-theme="dark"] {
  --bg: #171717;
  --bg-side: #171717;
  --bg-editor: #171717;
  --bg-hover: #202020;
  --bg-active: #2a2a2a;
  --border: #303030;
  --text: #cbcbcb;
  --text-strong: #f0f0f0;
  --text-dim: #7a7a7a;
  --toolbar-bg: #171717;
  --status-bg: #171717;
}
:root.tc-focus.tc-focus-beige {
  --bg: #faf7f0;
  --bg-side: #faf7f0;
  --bg-editor: #faf7f0;
  --bg-hover: #f2ede3;
  --bg-active: #eae3d4;
  --border: #e8e1d2;
  --text: #3f3d36;
  --text-strong: #28261f;
  --text-dim: #8f8a7d;
}
:root.tc-focus.tc-focus-dark {
  --bg: #171717;
  --bg-side: #171717;
  --bg-editor: #171717;
  --bg-hover: #202020;
  --bg-active: #2a2a2a;
  --border: #303030;
  --text: #cbcbcb;
  --text-strong: #f0f0f0;
  --text-dim: #7a7a7a;
}
/* slightly larger, airier editor type in focus mode */
html.tc-focus.tc-focus-font .milkdown .ProseMirror {
  font-size: calc(var(--doc-font-size) * 1.12);
  line-height: 1.95;
}
html.tc-focus.tc-focus-font .milkdown .ProseMirror p,
html.tc-focus.tc-focus-font .milkdown .ProseMirror li {
  margin-bottom: 0.35em;
}

/* focus-mode progressive blur — the cursor's block is crisp, neighbors fade
   out by distance. The focus-blur plugin dynamically injects
   `:nth-child(N):not(.tc-block-handle) { opacity: var(--fdN) }` rules (so ANY
   number of blocks is covered) and writes the --fdN variables on the editor
   root — PM ignores root attribute mutations, avoiding the re-sync loop that
   used to freeze the page. */
/* floating exit control (topbar is hidden while focused) */
.tc-focus-exit {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.2s, background 0.15s;
  box-shadow: var(--shadow);
}
.tc-focus-exit:hover {
  opacity: 1;
  background: var(--bg-hover);
  color: var(--text);
}
/* settings: focus background radio row */
.focus-bg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.focus-bg-label {
  font-size: 13px;
  color: var(--text);
}
.focus-bg-opt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}
.focus-bg-opt.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.focus-bg-opt input {
  accent-color: var(--accent);
}

/* ---------- time machine / version history (笔记时光机) ---------- */
.tm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 26px 10px;
  color: var(--text-dim);
  font-size: 13.5px;
}
.tm-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.tm-file {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 13.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.tm-count {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg-hover);
  padding: 2px 8px;
  border-radius: 10px;
}
.tm-timeline {
  padding: 4px 2px 8px;
}
.tm-slider {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer;
}
.tm-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
}
.tm-body {
  display: flex;
  gap: 14px;
  min-height: 260px;
  max-height: 380px;
}
.tm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 210px;
  flex: none;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-hover);
}
.tm-item button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 7px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  text-align: left;
}
.tm-item button:hover {
  background: var(--bg-active);
}
.tm-item.active button {
  background: var(--accent-soft);
}
.tm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
  flex: none;
}
.tm-item.active .tm-dot {
  background: var(--accent);
}
.tm-when {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-words {
  font-size: 11px;
  color: var(--text-dim);
  flex: none;
}
/* 版本 diff 对比 */
.tm-diff-toggle {
  margin-left: auto;
}
.tm-diff-toggle .btn.active {
  border-color: var(--accent);
  color: var(--accent);
}
.diff-wrap {
  display: flex;
  gap: 10px;
}
.diff-col {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.5;
  max-height: 420px;
  overflow-y: auto;
}
.diff-old {
  border-right: 1px solid var(--border);
}
.diff-line {
  padding: 0 6px;
  white-space: pre-wrap;
  word-break: break-word;
}
.diff-del {
  background: rgba(214, 69, 69, 0.12);
  color: #c0392b;
}
.diff-add {
  background: rgba(46, 160, 67, 0.12);
  color: #1a7f37;
}
.tm-preview {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-y: auto;
  background: var(--bg);
  font-size: 13px;
  line-height: 1.7;
  color: var(--text);
}
.tm-preview h1 {
  font-size: 20px;
}
.tm-preview h2 {
  font-size: 17px;
}
.tm-preview h3 {
  font-size: 15px;
}
.tm-preview img {
  max-width: 100%;
  border-radius: 6px;
}
.tm-preview code {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
}
.tm-preview pre {
  background: var(--code-bg);
  border-radius: 6px;
  padding: 10px;
  overflow-x: auto;
}
.tm-preview pre code {
  background: none;
  padding: 0;
}
.tm-preview blockquote {
  border-left: 3px solid var(--quote-border);
  margin: 0;
  padding-left: 12px;
  color: var(--text-dim);
}
.tm-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.tm-selected-time {
  flex: 1;
  font-size: 12px;
  color: var(--text-dim);
}
.tm-actions {
  display: flex;
  gap: 8px;
}

/* ---------- share dialog (共享与协作) ---------- */
.share-file {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 14px;
  margin-bottom: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.share-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.share-row-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}
.share-row-tag {
  font-size: 11px;
  color: var(--text-dim);
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 1px 7px;
}
.share-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.share-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 12px;
  padding: 7px 9px;
  font-family: inherit;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-input:focus {
  border-color: var(--accent);
}
.share-rotate {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 11.5px;
  cursor: pointer;
  padding: 4px 0 0;
  text-decoration: underline;
}
.share-rotate:hover {
  color: var(--text);
}
.share-hint {
  flex: 1;
  font-size: 12px;
  color: var(--text-dim);
}
.share-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-hover);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.6;
}
.share-note svg {
  flex: none;
  margin-top: 2px;
  color: var(--accent);
}

/* ---------- comments panel (评论批注) ---------- */
.comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comment-item {
  padding: 8px 4px;
  border-bottom: 1px solid var(--border);
}
.comment-anchor {
  display: block;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 11.5px;
  color: var(--accent);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.comment-anchor:hover {
  text-decoration: underline;
}
.comment-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  margin-top: 3px;
  word-break: break-word;
}
.comment-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-dim);
}
.comment-del {
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
}
.comment-del:hover {
  color: #e5484d;
}
/* flash highlight when jumping to a commented paragraph (fixed overlay — the
   PM-managed <p> classes get wiped on ProseMirror repaint) */
.comment-flash-overlay {
  position: fixed;
  z-index: 60;
  background: var(--accent-soft);
  border: 2px solid var(--accent);
  border-radius: 6px;
  pointer-events: none;
  animation: comment-flash-fade 2.4s ease-out forwards;
}
@keyframes comment-flash-fade {
  0% {
    opacity: 0.95;
  }
  65% {
    opacity: 0.95;
  }
  100% {
    opacity: 0;
  }
}

/* ---------- read-only share view ---------- */
.share-readonly {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-editor);
}
.share-readonly-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--toolbar-bg);
  flex-shrink: 0;
}
.share-readonly-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 3px 9px;
  white-space: nowrap;
}
.share-readonly-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-readonly-hint {
  flex: 1;
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.share-readonly-exit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  padding: 5px 10px;
  white-space: nowrap;
}
.share-readonly-exit:hover {
  background: var(--bg-hover);
}
.share-readonly-error {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 14px;
}
.share-readonly-doc {
  flex: 1;
  overflow-y: auto;
}
.share-readonly-body {
  max-width: 860px;
  margin: 0 auto;
  padding: 30px 48px 60px;
  font-size: var(--doc-font-size);
  font-family: var(--doc-font);
  color: var(--text);
  line-height: 1.8;
}
.share-readonly-body h1 {
  font-size: 30px;
  font-weight: 700;
  margin: 0 0 0.4em;
}
.share-readonly-body h2 {
  font-size: 23px;
  margin: 1.2em 0 0.4em;
}
.share-readonly-body h3 {
  font-size: 19px;
  margin: 1em 0 0.3em;
}
.share-readonly-body img {
  max-width: 100%;
  border-radius: 8px;
}
.share-readonly-body code {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.9em;
}
.share-readonly-body pre {
  background: var(--code-bg);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
}
.share-readonly-body pre code {
  background: none;
  padding: 0;
}
.share-readonly-body blockquote {
  border-left: 3px solid var(--quote-border);
  margin: 0;
  padding-left: 14px;
  color: var(--text-dim);
}
.share-readonly-body table {
  border-collapse: collapse;
  width: 100%;
}
.share-readonly-body th,
.share-readonly-body td {
  border: 1px solid var(--border);
  padding: 6px 10px;
}
.share-readonly-body th {
  background: var(--table-head);
}

/* real-time collaboration indicator */
.sb-collab {
  color: var(--accent);
  font-size: 12px;
  margin-right: 8px;
  font-weight: 600;
}
.sb-collab.off {
  color: #e5484d;
}

/* ---------- accounts & permissions (登录 / 权限) ---------- */
.auth {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.auth-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  line-height: 1.5;
}
.auth-banner.owner {
  background: rgba(10, 132, 255, 0.1);
  color: var(--accent);
}
.auth-banner.member {
  background: var(--bg-hover);
  color: var(--text-dim);
}
.auth-err {
  color: #e5484d;
  font-size: 12.5px;
  margin-top: 6px;
}
.auth-email-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 3px;
  margin-bottom: 8px;
}
.auth-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.access-banner {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  color: var(--text-dim);
  font-size: 12px;
  padding: 5px 12px;
  pointer-events: none;
}
.member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text);
}
.perm-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  padding: 6px 8px;
  font-family: inherit;
}
.comment-add {
  margin-top: 8px;
  border-top: 1px dashed var(--border);
  padding-top: 8px;
}
.comment-add input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  padding: 7px 9px;
  outline: none;
  font-family: inherit;
}
.comment-add input:focus {
  border-color: var(--accent);
}

/* comment superscripts (C1, C2, …) inside the page text */
/* highlight for the EXACT selected text of a comment (not the whole paragraph) */
.comment-hl {
  background: rgba(255, 213, 79, 0.45);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 193, 7, 0.4);
  color: inherit;
}
.comment-sup {
  display: inline-block;
  vertical-align: super;
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-radius: 6px;
  padding: 1px 4px;
  margin: 0 2px;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.comment-sup:hover {
  filter: brightness(1.15);
}
.comment-sup::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-strong);
  color: var(--bg);
  font-size: 11.5px;
  font-weight: 400;
  padding: 4px 8px;
  border-radius: 6px;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10;
}
.comment-sup:hover::after {
  opacity: 1;
}
.comment-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 3px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-right: 4px;
  cursor: pointer;
}
.comment-flash {
  background: var(--accent-soft) !important;
  border-radius: 8px;
  animation: comment-panel-flash 2s ease-out;
}
@keyframes comment-panel-flash {
  0%,
  40% {
    background: var(--accent-soft);
  }
  100% {
    background: transparent;
  }
}
.comment-when {
  font-size: 11px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.comment-ops {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex: none;
}
.comment-edit input {
  width: 100%;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  padding: 6px 8px;
  outline: none;
  font-family: inherit;
  margin-top: 3px;
}

/* ---------- sidebar 数据库 folder (all databases across workspaces) ---------- */
.sidebar-dbs {
  padding: 4px 8px 6px;
  border-top: 1px solid var(--border);
  border-bottom: none;
  margin-top: auto;
  flex: none;
}
/* 底部第二个区块（数据库）紧跟在无限画布下方：去掉重复的 margin-top 顶边 */
.sidebar-dbs + .sidebar-dbs {
  margin-top: 0;
  border-top: 1px solid var(--border-soft, var(--border));
}
.sidebar-dbs-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: context-menu;
  border-radius: 6px;
  user-select: none;
}
.sidebar-dbs-title:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.sidebar-dbs-caret {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
}
.sidebar-dbs.collapsed .sidebar-dbs-list {
  display: none;
}
.sidebar-dbs-count {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 0 6px;
}
.sidebar-dbs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 220px;
  overflow-y: auto;
}
.sidebar-db-item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  padding: 5px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.sidebar-db-item:hover {
  background: var(--bg-hover);
}
.sidebar-db-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-db-src {
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-dim);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* flash highlight when jumping to a database from the sidebar */
.database-block.db-jump-flash .db {
  animation: db-jump-flash 2.2s ease;
}
@keyframes db-jump-flash {
  0%, 60% {
    box-shadow: 0 0 0 3px rgba(255, 213, 79, 0.55);
  }
  100% {
    box-shadow: none;
  }
}

/* ---------- home dashboard (首页仪表盘) ---------- */
/* 编辑模式下「清除模块」的 ×（KPI 条 / 活动图右上角） */
.home-kpis,
.home-activity {
  position: relative;
}
.home-section-x {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  z-index: 2;
}
.home-section-x:hover {
  background: var(--bg-hover);
  color: var(--text);
}
/* 已清除模块的占位行（编辑模式下显示，可恢复） */
.home-hidden-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  color: var(--text-dim);
  font-size: 12.5px;
}
.home-restore-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
}
.home-restore-btn:hover {
  background: var(--bg-hover);
}
/* KPI strip (top big-number cards) */
.home-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.home-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.home-kpi-icon {
  color: var(--accent);
  display: inline-flex;
}
.home-kpi-num {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.1;
}
.home-kpi-label {
  font-size: 12px;
  color: var(--text-dim);
}
/* activity chart */
.home-activity {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  padding: 13px 15px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.home-activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.home-chart-legend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.home-chart-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
i.home-chart-edit {
  background: var(--accent);
}
i.home-chart-new {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}
.home-chart-edit {
  fill: var(--accent);
}
.home-chart-new {
  fill: color-mix(in srgb, var(--accent) 28%, transparent);
}
.home-activity-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}
/* workspaces overview */
.home-ws-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.home-ws-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-radius: 6px;
}
.home-ws-row:hover {
  background: var(--bg-hover);
}
.home-ws-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-ws-nums {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text);
}
.home-ws-nums em {
  font-style: normal;
  color: var(--text-dim);
  font-size: 11px;
}
.home-stats-2 .home-stat-num {
  font-size: 20px;
}
/* density + card size + edit controls */
.home-density-row {
  margin-bottom: 10px;
}
.home-view-label {
  font-size: 12px;
  color: var(--text-dim);
}
.home-mini-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.home-mini-btn:hover {
  background: var(--bg-hover);
}
.home-mini-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}
.home-range-switch {
  display: inline-flex;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px;
}
.home-range-switch button {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.home-range-switch button.active {
  color: var(--accent);
  background: var(--accent-soft);
}
.home-grid.compact {
  gap: 8px;
}
.home-grid.compact .home-card {
  padding: 8px 10px;
  border-radius: 8px;
}
.home-grid.compact .home-card-title {
  font-size: 12px;
  margin-bottom: 3px;
}
.home-grid.compact .home-kpi-value {
  font-size: 20px;
}
.home-grid.comfortable {
  gap: 16px;
}
.home-grid.roomy {
  gap: 24px;
}
.home-grid.roomy .home-card {
  padding: 20px 24px;
  border-radius: 16px;
}
.home-grid.roomy .home-card-title {
  font-size: 15px;
  margin-bottom: 8px;
}
.home-grid.roomy .home-kpi-value {
  font-size: 30px;
}
.home-card-sm .home-card {
  padding: 9px 11px;
  border-radius: 10px;
}
.home-card-sm .home-card-title {
  font-size: 12.5px;
}
.home-card-lg .home-card {
  padding: 17px 20px;
  border-radius: 14px;
}
.home-card-lg .home-card-title {
  font-size: 15px;
}
.home-card-drag {
  cursor: grab;
}
.home-card-drag:active {
  cursor: grabbing;
}
.home-card-drag:hover {
  border-color: var(--accent);
}
.home-grid-filtered {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
/* workspace stats banner (sidebar 统计此工作区) */
.home-ws-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.home-ws-banner b {
  color: var(--text-strong);
}
.home-ws-banner span {
  color: var(--text-dim);
  font-size: 12px;
}
.home-ws-back {
  margin-left: auto;
}
.home-view {
  height: 100%;
  overflow-y: auto;
  padding: 26px 34px 60px;
}
.home-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.home-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 21px;
  font-weight: 700;
  color: var(--text-strong);
  flex: 1;
  min-width: 160px;
}
.home-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.home-add-label {
  font-size: 12px;
  color: var(--text-dim);
}
.home-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  font-family: inherit;
}
.home-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.home-edit-hint {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 14px;
}
.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
  position: relative; /* anchor the drop line overlay */
}
.home-grid.editing .home-card {
  border-color: var(--accent);
}
/* 拖动卡片时的插入位置指示线（灰色粗线） */
.home-drop-line {
  position: absolute;
  height: 4px;
  border-radius: 2px;
  background: #9aa0a6;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  z-index: 5;
  /* 两端小圆点手柄，更像"插入"指示 */
}
.home-drop-line::before,
.home-drop-line::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #9aa0a6;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.home-drop-line::before {
  left: -4px;
}
.home-drop-line::after {
  right: -4px;
}
.home-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.home-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.home-card-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-strong);
}
.home-card-remove {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  display: inline-flex;
}
.home-card-remove:hover {
  background: rgba(229, 72, 77, 0.12);
  color: #e5484d;
}
.home-card-body {
  max-height: 320px;
  overflow-y: auto;
}
.home-widget-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.home-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 6px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
}
.home-item:hover {
  background: var(--bg-hover);
}
.home-task-check {
  /* 待办复选框要装得下大写字母 A（用户要求 2026-08-25） */
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--text-dim);
  border-radius: 4px;
  flex: none;
}
.home-task-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-item-src {
  font-size: 11px;
  color: var(--text-dim);
  flex: none;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-star {
  color: #f5a623;
  flex: none;
}
.home-fav-row {
  display: flex;
  align-items: center;
  gap: 2px;
}
.home-fav-row .home-item {
  flex: 1;
  min-width: 0;
}
.home-fav-more {
  width: 24px;
  height: 24px;
  flex: none;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.home-fav-row:hover .home-fav-more {
  opacity: 1;
}
.home-fav-more:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.home-fav-more:focus-visible {
  opacity: 1;
}
.home-empty {
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 8px 6px;
}
.home-more {
  font-size: 11.5px;
  color: var(--text-dim);
  padding: 6px 6px 2px;
  border-top: 1px dashed var(--border);
  margin-top: 6px;
}
.home-planner-day {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--accent);
  padding: 6px 6px 2px;
}
.home-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 4px 0;
}
.home-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--bg-hover);
  border-radius: 10px;
  padding: 12px 8px;
}
.home-stat-num {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
}
.home-stat-label {
  font-size: 11.5px;
  color: var(--text-dim);
}

/* ---------- whiteboard (无限白板) ---------- */
.wb-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ---------- PPT 模块 ---------- */
.ppt-overlay {
  z-index: 71;
}
.ppt-body {
  flex: 1;
  min-height: 0;
  display: flex;
}
.ppt-thumbs {
  width: 168px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 8px;
  background: var(--bg-hover);
  flex-shrink: 0;
}
.ppt-thumbs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-dim);
  padding: 2px 4px 8px;
}
.ppt-add {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.ppt-thumb {
  position: relative;
  height: 64px;
  margin-bottom: 8px;
  border-radius: 8px;
  border: 2px solid var(--border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  cursor: grab;
  user-select: none;
}
.ppt-thumb.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft, rgba(0, 122, 255, 0.2));
}
/* 拖动排序的插入位置：灰色粗线（用户要求 2026-08-25） */
.ppt-thumb-drop-line {
  height: 4px;
  border-radius: 2px;
  background: #8b8b8b;
  margin: 2px 2px 10px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
}
.ppt-thumb.dragging {
  opacity: 0.35;
}
.ppt-thumb-grip {
  position: absolute;
  left: 4px;
  top: 4px;
  color: var(--text-dim);
}
.ppt-thumb-num {
  position: absolute;
  right: 6px;
  top: 4px;
  font-size: 10px;
  color: var(--text-dim);
}
.ppt-thumbs-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 20px 4px;
  text-align: center;
}
.ppt-canvas {
  flex: 1;
  min-width: 0;
  position: relative;
  overflow: auto;
  background: #e8e8e8; /* 舞台外灰色，衬托白色页面 */
  outline: none;
  display: flex;
  /* 舞台在编辑区（含演讲备注弹出后剩余区域）内水平+垂直居中 —— 用
     margin:auto 而不是 justify-content/align-items:center：overflow 容器里
     center 会让左侧/顶部溢出不可见，margin:auto 在剩余空间内可靠居中
     （用户要求 2026-08-22 备注弹出后编辑页居中；2026-08-24 白色页面
     靠在右上角，垂直方向也要居中）。 */
  padding: 24px;
}
/* 编辑舞台：960×540 白色页面，居中 + 描线（用户要求） */
.ppt-stage {
  position: relative;
  width: 960px;
  height: 540px;
  flex: none;
  background: #fff;
  border: 1px solid #bbb;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
/* 整页选中：深灰粗边线（用户 2026-08-26：页面空白点击 → 深灰边线选中） */
.ppt-stage.slide-selected {
  border: 2px solid #555;
  box-shadow: 0 0 0 3px rgba(85, 85, 85, 0.35), 0 4px 20px rgba(0, 0, 0, 0.15);
}
/* 页面背景色面板（用户 2026-08-26） */
.ppt-bg-menu {
  position: fixed;
  z-index: 120;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  padding: 10px;
  min-width: 240px;
}
.ppt-bg-menu-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
  margin-bottom: 8px;
  cursor: move; /* 可拖动（用户 2026-08-26） */
  user-select: none;
}
.ppt-bg-menu-close {
  margin-left: auto;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--text-dim);
  display: inline-flex;
  padding: 2px;
  border-radius: 4px;
}
.ppt-bg-menu-close:hover {
  background: var(--bg-hover);
}
.ppt-bg-menu-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ppt-bg-swatch {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
  padding: 0;
}
.ppt-bg-swatch.on {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.ppt-bg-menu-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.ppt-bg-menu-custom input[type="color"] {
  width: 34px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0;
  background: none;
  cursor: pointer;
}
/* 演讲备注区（编辑模式右侧） */
.ppt-notes {
  width: 240px;
  flex-shrink: 0;
  border-left: 1px solid var(--border);
  background: var(--bg-hover);
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 6px;
}.ppt-notes-head {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ppt-notes-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  flex: none;
}
/* 关闭演讲备注侧边栏（用户要求 2026-08-21） */
.ppt-notes-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  flex: none;
  margin-left: auto;
}
.ppt-notes-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.ppt-notes-style {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 11.5px;
  padding: 3px 6px;
}
.ppt-notes-ai {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  padding: 3px 8px;
  cursor: pointer;
}
.ppt-notes-ai:hover {
  opacity: 0.9;
}
.ppt-notes-area {
  flex: 1;
  min-height: 120px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  line-height: 1.6;
  padding: 8px 10px;
  resize: none;
  outline: none;
  font-family: inherit;
}
.ppt-notes-area:focus {
  border-color: var(--accent);
}
/* 放映时底部讲述词（不进画面） */
.ppt-pres-notes {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  max-width: 70%;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 14px;
  border-radius: 8px;
  white-space: pre-wrap;
  z-index: 40;
  pointer-events: none;
  text-align: center;
}
.ppt-item {
  position: absolute;
  border: 1px dashed transparent;
  cursor: move;
  user-select: none;
  min-width: 20px;
  min-height: 16px;
}
/* 选中态文字（MarkdownBody 渲染的 p）必须完整落在文本框内：
   去 margin + 垂直居中 + 换行截断（用户要求 2026-08-24：单击文本框时
   提示文字"双击编辑文字"没完全落在框内 —— 根因 .md-body p 的 margin
   0.4em 让 24px 文字行高 31px + margin ≈ 50px > 40px 的框高） */
.ppt-item-md {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ppt-item-md p {
  margin: 0;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* PPT 文本框列表（用户 2026-08-28：- / 1. 空格 → 无序/有序列表，完整显示） */
.ppt-item-md ul,
.ppt-item-md ol {
  margin: 0;
  padding-left: 1.4em;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.ppt-item-md li {
  margin: 0;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}
.ppt-item-md li > p {
  margin: 0;
  display: inline;
}
.ppt-item-md li::marker {
  color: inherit;
}
.ppt-item.selected {
  border-color: var(--accent);
  outline: 1px solid var(--accent);
}
/* 图片选中控制框贴图（见下方 .ppt-item-image.selected 隐藏 item 边框） */
.ppt-img-select {
  position: absolute;
  border: 1.5px solid var(--accent);
  pointer-events: none;
  box-sizing: border-box;
  z-index: 1;
}
.ppt-item span {
  white-space: pre-wrap;
  word-break: break-word;
  display: block;
  line-height: 1.3;
}
/* 文本框包络测量元素（用户要求 2026-08-25：文本框与文字相切）。
   改为渲染同一份 Markdown（MarkdownBody 嵌套在里层），让它自然撑开量出
   渲染后的真实宽高（有序/无序列表、多段、空行等结构与原始文本不同——
   用户 2026-08-28：PPT 文本框有序列表 + 空行被遮住，因原测量用原始文本
   pre 不还原列表结构，量高偏小）。 */
.ppt-item .ppt-measure {
  position: absolute;
  visibility: hidden;
  top: -9999px;
  left: 0;
  pointer-events: none;
  display: block;
  width: max-content;
  max-width: none;
  min-width: 0;
  line-height: 1.3;
  overflow: visible;
}
/* 测量容器内层的 .ppt-item-md（另一份渲染）：解除 flex/100%/hidden 约束，
   让它自然撑开，量出渲染后真实宽高；特异性高于 .ppt-item-md 自身 */
.ppt-measure .ppt-item-md {
  width: auto;
  height: auto;
  overflow: visible;
  display: block;
  justify-content: initial;
}
.ppt-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.ppt-item-edit {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  /* 编辑态对齐与预览一致（用户要求 2026-08-25：预览居中/左/右，编辑也
     居中/左/右，不能变成左对齐）—— 显式继承 item 的 text-align */
  text-align: inherit;
  padding: 0;
  /* 打字不出现滚动条（用户要求 2026-08-24）：高度由 autoGrowTextarea 动态
     设置，内容永不超出 → 滚动条隐藏 */
  overflow: hidden;
}
/* 拖动对齐参考线（灰色虚线，用户要求 2026-08-25） */
.ppt-align-line {
  position: absolute;
  pointer-events: none;
  z-index: 6;
  background: transparent;
}
.ppt-align-line.horizontal {
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(120, 120, 120, 0.9);
}
.ppt-align-line.vertical {
  top: 0;
  bottom: 0;
  border-left: 1px dashed rgba(120, 120, 120, 0.9);
}
/* 形状内文字编辑（用户要求 2026-08-24）：形状保持形状，中心出现光标
   直接输入；回车换行成多行、不出现滚动条、文字居中。 */
.ppt-shape-text-edit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: none;
  outline: none;
  background: transparent;
  resize: none;
  overflow: hidden;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  padding: 4px 8px;
  text-align: center;
  /* 光标默认在形状中心 */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
  word-break: break-word;
}
.ppt-hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  font-size: 11.5px;
  color: #aaa;
  pointer-events: none;
  white-space: nowrap;
}
/* 顶部格式条（选中文字块/图片时显示，长条形横排）。
   position: fixed（默认也脱离文档流）—— 否则格式条出现时会把舞台挤到
   旁边 → 点击文本时页面跳动（用户要求 2026-08-21 修复） */
.ppt-formatbar {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  width: fit-content;
  max-width: calc(100% - 40px);
  overflow-x: auto;
  flex-wrap: nowrap;
  /* 隐藏滚动条 UI（用户要求：不需要水平滚动条），内容仍可滚动 */
  scrollbar-width: none;
}
.ppt-formatbar::-webkit-scrollbar {
  display: none;
}
/* 拖到最右自动变竖向（用户要求） */
.ppt-formatbar.vertical {
  flex-direction: column;
  align-items: flex-start;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overflow-x: visible;
  scrollbar-width: none;
}
.ppt-formatbar.vertical::-webkit-scrollbar {
  display: none;
}
.ppt-fm-grip {
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
  cursor: grab;
  padding: 2px;
  flex: none;
}
.ppt-fm-grip:hover {
  color: var(--text);
}
.ppt-fm-size {
  width: 56px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
}
.ppt-fm-select {
  max-width: 110px;
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
}
.ppt-fm-color {
  display: inline-flex;
  align-items: center;
}
.ppt-fm-color input[type="color"] {
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  padding: 0;
  background: none;
  cursor: pointer;
}
.ppt-fm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.ppt-fm-btn:hover {
  background: var(--bg-hover);
}
.ppt-fm-btn.on {
  background: var(--accent);
  color: #fff;
}
.ppt-fm-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 2px;
}
.ppt-fm-label {
  font-size: 12px;
  color: var(--text-dim);
  white-space: nowrap;
}
.ppt-formatbar input[type="range"] {
  width: 70px;
}
/* 选中项右下角缩放手柄 */
.ppt-resize {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  cursor: nwse-resize;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
/* 文字模板菜单 */
.ppt-preset-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999; /* 始终最高层、不透明（用户要求） */
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 110px;
}
.ppt-preset-item {
  text-align: left;
  padding: 6px 10px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
}
.ppt-preset-item:hover {
  background: var(--bg-hover);
}
.ppt-anim-select {
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
}
/* 放映动画 */
.ppt-anim-fade {
  animation: ppt-anim-fade 0.6s ease both;
}
.ppt-anim-slide {
  animation: ppt-anim-slide 0.6s ease both;
}
.ppt-anim-zoom {
  animation: ppt-anim-zoom 0.6s ease both;
}
@keyframes ppt-anim-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes ppt-anim-slide {
  from { transform: translateX(-40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes ppt-anim-zoom {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/* 放映模式 */
.ppt-pres {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 激光笔模式：隐藏鼠标指针，只显示激光笔光点（用户要求 2026-08-24）。
   子元素（翻页按钮/圈画工具）仍显示光标，便于操作。 */
.ppt-pres.laser-mode,
.ppt-pres.laser-mode .ppt-pres-slide {
  cursor: none;
}
.ppt-pres.laser-mode .ppt-pres-nav,
.ppt-pres.laser-mode .ppt-pres-exit,
.ppt-pres.laser-mode .ppt-pres-draw,
.ppt-pres.laser-mode .ppt-pres-clear,
.ppt-pres.laser-mode .ppt-pres-counter,
.ppt-pres.laser-mode .ppt-pres-notes {
  cursor: pointer;
}
/* 圈画（画笔）模式：显示画笔光标，替代默认箭头（用户要求 2026-08-24：
   圈画时没看到 pen，只有鼠标箭头）。SVG 画笔，热点在笔尖。 */
.ppt-pres.drawing-mode:not(.laser-mode),
.ppt-pres.drawing-mode:not(.laser-mode) .ppt-pres-slide {
  cursor:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%23e5484d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 19l7-7 3 3-7 7-3-3z'/><path d='M18 13l-1.5-7.5L2 2l3.5 14.5L13 18l5-5z'/><path d='M2 2l7.586 7.586'/><circle cx='11' cy='11' r='2'/></svg>")
      4 22,
    crosshair;
}
.ppt-pres.drawing-mode:not(.laser-mode) .ppt-pres-nav,
.ppt-pres.drawing-mode:not(.laser-mode) .ppt-pres-exit,
.ppt-pres.drawing-mode:not(.laser-mode) .ppt-pres-draw,
.ppt-pres.drawing-mode:not(.laser-mode) .ppt-pres-clear,
.ppt-pres.drawing-mode:not(.laser-mode) .ppt-pres-counter,
.ppt-pres.drawing-mode:not(.laser-mode) .ppt-pres-notes {
  cursor: pointer;
}
.ppt-pres-slide {
  position: relative;
  width: min(96vw, calc(96vh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  touch-action: none;
}
.ppt-pres-inner {
  position: absolute;
  inset: 0;
}
.ppt-pres-item {
  position: absolute;
  color: #000;
  word-break: break-word;
  user-select: none;
}
.ppt-pres-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ppt-pres-canvas {
  position: absolute;
  inset: 0;
  /* 显式 CSS 尺寸 = 幻灯片尺寸：canvas 属性 width/height（物理像素）在
     绝对定位 + inset:0 下会覆盖 CSS 尺寸（同时指定 left/right 时 right 被
     忽略），dpr≠1（如 Windows 125% 缩放）时 canvas 显示尺寸变成物理像素
     值、比幻灯片大 → 圈画痕迹被放大偏移（用户要求 2026-08-25：钢笔与
     痕迹不重合，痕迹偏右下约 4cm）。 */
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.ppt-pres-nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.ppt-pres-nav.left {
  left: 16px;
}
.ppt-pres-nav.right {
  right: 16px;
}
.ppt-pres-nav:hover {
  background: rgba(255, 255, 255, 0.3);
}
.ppt-pres-counter {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
}
.ppt-pres-draw {
  position: fixed;
  right: 18px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
}
.ppt-pres-draw.active {
  background: var(--accent);
}
.ppt-pres-exit {
  position: fixed;
  right: 18px;
  top: 14px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  padding: 6px 12px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  z-index: 5;
}
.ppt-pres-clear {
  position: fixed;
  right: 18px;
  bottom: 62px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 9999; /* 最上层（用户要求） */
  background: #1f1f1f; /* 不透明背景（用户要求） */
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.ppt-pres-tools {
  display: flex;
  gap: 4px;
}
.ppt-pres-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  cursor: pointer;
}
.ppt-pres-tool.active {
  background: rgba(255, 255, 255, 0.34);
}
.ppt-pres-colors {
  display: flex;
  gap: 5px;
  padding: 2px 0;
}
.ppt-pres-color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
}
.ppt-pres-color.active {
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.4);
}
.ppt-pres-clear button {
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.ppt-pres-clear button:hover {
  background: rgba(255, 255, 255, 0.32);
}
/* 激光笔光标：跟随鼠标的红点（不落笔画） */
.ppt-pres-laser {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff4444;
  box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.35), 0 0 12px 4px rgba(255, 68, 68, 0.5);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}
/* ---------- PPT 整改（用户要求 2026-08-22）---------- */
/* 页面比例选择器 */
.ppt-ratio-select {
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  flex: none;
}
/* 形状菜单 */
.ppt-shape-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  z-index: 30;
}
.ppt-shape-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.ppt-shape-item:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}
/* 形状 item 本身 */
.ppt-item-shape {
  overflow: visible;
}
/* 选中态：灰色粗线框（用户要求 2026-08-22：点击可编辑区域/组件用灰色粗线框） */
.ppt-item.selected {
  border-color: #8b8b8b;
  outline: 2px solid rgba(139, 139, 139, 0.85);
}
/* 图片选中：item 自身的矩形边框隐藏（object-fit contain 时图片四周可能
   留白，item 边框不贴合），改用 .ppt-img-select 贴图片实际边缘（用户要求
   2026-08-25：控制框与图片边框完全重合）。放在 .ppt-item.selected 之后覆盖。 */
.ppt-item-image.selected {
  border-color: transparent;
  outline: none;
}
/* 形状包络框（四角 + 四边 8 个拖动点）。
   紧贴形状外边框（用户要求 2026-08-24：虚线框要贴紧形状，不要灰色粗框）：
   原 left:-6px + 宽高+12px 让虚线框比形状大一圈，视觉上像灰色粗线框；
   改为贴紧（inset:0），虚线 1px 细线，拖动点仍在外侧便于抓取。 */
.ppt-shape-box {
  position: absolute;
  inset: 0;
  border: 1px dashed #8b8b8b;
  pointer-events: none;
}
.ppt-shape-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border: 2px solid #8b8b8b;
  border-radius: 2px;
  pointer-events: auto;
  cursor: pointer;
}
.ppt-shape-dot.nw { left: -5px; top: -5px; cursor: nwse-resize; }
.ppt-shape-dot.n { left: 50%; top: -5px; transform: translateX(-50%); cursor: ns-resize; }
.ppt-shape-dot.ne { right: -5px; top: -5px; cursor: nesw-resize; }
.ppt-shape-dot.w { left: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.ppt-shape-dot.e { right: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.ppt-shape-dot.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.ppt-shape-dot.s { left: 50%; bottom: -5px; transform: translateX(-50%); cursor: ns-resize; }
.ppt-shape-dot.se { right: -5px; bottom: -5px; cursor: nwse-resize; }
/* 形状样式面板（填充 / 线框类型 / 线框粗细） */
.ppt-shape-style {
  position: fixed;
  z-index: 40;
  min-width: 190px;
  padding: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.ppt-shape-style-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.ppt-shape-style-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.ppt-ss-swatch {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
  padding: 0;
}
.ppt-ss-swatch.on {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.ppt-shape-style-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ppt-ss-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
}
.ppt-ss-line:hover {
  background: var(--bg-hover);
}
.ppt-ss-line.on {
  background: var(--bg-hover);
  border-color: var(--border);
}
/* 组件链接弹窗 */
.ppt-link-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 45;
  width: 320px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
.ppt-link-dialog-title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.ppt-link-dialog-input {
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-editor);
  color: var(--text);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
}
.ppt-link-dialog-input:focus {
  border-color: var(--accent);
}
.ppt-link-dialog-list {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ppt-link-dialog-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.ppt-link-dialog-item:hover {
  background: var(--bg-hover);
}
.ppt-link-dialog-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.ppt-link-dialog-cancel {
  border: none;
  background: var(--bg-hover);
  color: var(--text);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 12.5px;
  cursor: pointer;
}
/* 自定义页面尺寸弹窗（用户要求 2026-08-24）：页面中间弹出，两栏布局 */
.ppt-ratio-dialog {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ppt-ratio-dialog-box {
  width: 460px;
  padding: 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.ppt-ratio-dialog-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 12px;
}
.ppt-ratio-dialog-body {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.ppt-ratio-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ppt-ratio-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
}
.ppt-ratio-field input {
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg-editor);
  color: var(--text);
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  width: 100%;
}
.ppt-ratio-field input:focus {
  border-color: var(--accent);
}
/* 右侧矩形预览：按宽高比例显示 */
.ppt-ratio-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8e8e8;
  border-radius: 8px;
  min-height: 140px;
  padding: 12px;
}
.ppt-ratio-preview-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.ppt-ratio-preview {
  width: 100%;
  max-height: 120px;
  background: #fff;
  border: 1px solid #bbb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.ppt-ratio-preview-label {
  font-size: 12px;
  color: var(--text-dim);
}
.ppt-ratio-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
/* 链接角标：右上角、无背景、仅选中显示（用户 2026-08-26） */
.ppt-item-link-badge {
  position: absolute;
  right: -12px;
  top: -10px;
  width: 18px;
  height: 18px;
  background: transparent;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
/* 侧边栏宽度拖动条 */
.ppt-thumbs-resizer {
  width: 5px;
  flex: none;
  cursor: col-resize;
  background: transparent;
  transition: background 0.15s;
}
.ppt-thumbs-resizer:hover {
  background: var(--accent-soft);
}
/* 缩略图预览（等比缩放内容） */
.ppt-thumb-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.ppt-thumb-preview-inner {
  flex: none;
}
/* 只显示页码的缩略图 */
.ppt-thumb-numonly .ppt-thumb-num {
  position: static;
  font-size: 18px;
  font-weight: 700;
  color: #999;
}
.ppt-thumb-numonly-label {
  font-size: 18px;
  font-weight: 700;
  color: #999;
}
/* 舞台放大 1.25 倍（transform 不占布局，用 stage-box 撑开） */
.ppt-stage-box {
  flex: none;
  /* margin:auto 水平+垂直居中：在 overflow 容器里 align-self:center /
     justify-content:center 会让左侧或顶部溢出不可见；margin auto 在剩余
     空间内居中，窗口变窄时左侧/顶部仍可滚动查看（用户要求 2026-08-22
     编辑页居中；2026-08-24 白色页面靠在右上角 → 垂直也要居中） */
  margin: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  /* stage 左对齐 box 左上角：stage 用 transform:scale(1.25) + origin:top
     left 放大，若在 box 内用未缩放的 960px 宽度居中（align-items:center），
     缩放后视觉中心会向右下偏移 (1200-960)/2=120px —— 白色页面不再居中于
     灰色区域（用户要求 2026-08-24：白色页面始终在灰色区域中间）。左对齐后
     scale 恰好把 stage 放大到铺满 box，视觉中心 = box 中心。 */
  align-items: flex-start;
}
.ppt-stage-box .ppt-stage {
  margin: 0;
}
/* 编辑页大页码（幻灯片外下方，用户要求 2026-08-22） */
.ppt-stage-page {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 格式刷提示条（用户要求 2026-08-22） */
.ppt-brush-hint {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--accent);
  color: #fff;
  border-radius: 8px;
  font-size: 12.5px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 9;
  white-space: nowrap;
}
/* ---------- RichTextArea：斜杠指令菜单 + 选中文本格式弹窗（用户要求 2026-08-22）---------- */
.rich-slash-menu {
  position: absolute;
  left: 8px;
  top: 100%;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  max-height: 280px;
  overflow-y: auto;
  padding: 5px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
.rich-slash-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.rich-slash-item:hover,
.rich-slash-item.active {
  background: var(--bg-hover);
  color: var(--accent);
}
.rich-fmt-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  width: fit-content;
  transform: translateX(0);
}
.rich-fmt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.rich-fmt-btn:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
/* 锁定按钮激活态 */
.wb-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}
/* 关于：版本信息 */
.about-version-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}
/* 关于区品牌 logo（用户要求 2026-08-25：memora logo） */
.about-logo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.about-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border);
}
.about-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong);
}
.about-tag {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}
.about-version-label {
  font-size: 13px;
  color: var(--text-dim);
}
.about-version-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.about-update-avail {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--warm, #ff8c42);
  border-radius: 10px;
  background: var(--warm-soft, rgba(255, 140, 66, 0.12));
  font-size: 13px;
  margin: 8px 0;
}
.about-update-ok {
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-hover);
  font-size: 13px;
  margin: 8px 0;
}
.about-update-err {
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(229, 72, 77, 0.12);
  color: #e5484d;
  font-size: 13px;
  margin: 8px 0;
}
/* 一键更新下载进度条（用户要求 2026-08-22） */
.about-update-progress {
  width: 100%;
  margin-top: 4px;
}
.about-update-progress-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--bg-hover);
  overflow: hidden;
}
.about-update-progress-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--warm, #ff8c42);
  transition: width 0.2s ease;
}
.about-update-progress-text {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}
.wb {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.wb-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-shrink: 0;
}
.wb-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-strong);
  white-space: nowrap;
}
.wb-title-text {
  cursor: text;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px dashed transparent;
}
.wb-title-text:hover {
  border-color: var(--border);
  background: var(--bg-hover);
}
.wb-title-input {
  font: inherit;
  font-weight: 700;
  color: var(--text-strong);
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 2px 6px;
  background: var(--bg-editor);
  outline: none;
  min-width: 120px;
}
.wb-hint {
  flex: 1;
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.wb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-hover);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.wb-btn:hover {
  background: var(--bg-active);
}
.wb-btn.wb-close {
  padding: 5px 8px;
}
.wb-canvas {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  position: relative;
  cursor: grab;
  background:
    radial-gradient(circle, var(--border) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg);
}
/* 无限画布背景：点阵 / 空白 / 纯色（用户要求，设置页可调） */
.wb-canvas.wb-bg-dots {
  background:
    radial-gradient(circle, var(--border) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg);
}
.wb-canvas.wb-bg-plain {
  background: var(--bg);
}
.wb-canvas.wb-bg-color {
  background: #ffffff;
}
.wb-canvas:active {
  cursor: grabbing;
}
.wb-edge {
  fill: none;
  stroke: var(--text-dim);
  stroke-width: 1.6;
  stroke-opacity: 0.55;
}
.wb-edge-temp {
  stroke-dasharray: 5 4;
  stroke: var(--accent);
  stroke-opacity: 0.9;
}
.wb-node {
  cursor: grab;
}
.wb-node:active {
  cursor: grabbing;
}
.wb-node-bg {
  /* 节点级填充/边框（--wb-fill/--wb-border/--wb-sw），未设置时回落主题（用户 2026-08-26） */
  fill: var(--wb-fill, var(--bg));
  stroke: var(--wb-border, var(--border));
  stroke-width: var(--wb-sw, 1.5);
}
.wb-node.selected .wb-node-bg {
  stroke: var(--accent);
  stroke-width: var(--wb-sw, 2.5);
}
.wb-node-sticky .wb-node-bg {
  stroke: var(--wb-border, rgba(0, 0, 0, 0.12));
}
.wb-node-text {
  font-size: 14px;
  fill: var(--text);
  pointer-events: none;
  user-select: none;
  font-family: inherit;
}
.wb-node-text-plain {
  font-size: 14px;
  fill: var(--text);
  pointer-events: none;
  user-select: none;
  font-family: inherit;
}
/* 无边框文本框的透明命中区：可点选/双击（用户要求 2026-08-25） */
.wb-node-hit {
  pointer-events: all;
  cursor: move;
}
.wb-handle {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 1.5;
  cursor: crosshair;
  opacity: 0;
  transition: opacity 0.15s;
}
.wb-node:hover .wb-handle,
.wb-node.selected .wb-handle {
  opacity: 1;
}
.wb-selbar {
  position: absolute;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px 4px;
  box-shadow: var(--shadow);
  z-index: 5;
}
.wb-selbar button {
  border: none;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  display: inline-flex;
}
.wb-selbar button:hover {
  background: var(--bg-hover);
}
.wb-editor {
  position: absolute;
  z-index: 6;
}
.wb-editor textarea {
  width: 100%;
  border: none; /* 用户要求：输入框不显示边框 */
  border-radius: 8px;
  /* 编辑区背景与画布一致，不再有深色块（用户 2026-08-26） */
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  padding: 6px 8px;
  resize: none;
  outline: none;
  /* 打字不出现滚动条（用户 2026-08-26） */
  overflow: hidden;
  /* 节点/便签/形状预览文本居中 —— 编辑不跳位（用户 2026-08-26） */
  text-align: center;
}
/* floating text: typing has NO border / box (plain input) */
.wb-editor.plain textarea {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 2px;
  /* 与预览文本字号一致（节点 fontSize ?? 设置默认），编辑不跳字（用户 2026-08-26） */
  font-size: var(--wb-edit-fs, 15px);
  color: var(--text-strong);
  /* 文本框预览为左对齐（用户 2026-08-26） */
  text-align: left;
  /* 单行不换行一直写、回车多行无滚动条（用户要求 2026-08-25） */
  white-space: pre;
  overflow: hidden;
  resize: none;
}
.wb-editor.sticky textarea {
  font-size: 13px;
  /* 便签文本靠左（预览/编辑一致，用户 2026-08-26） */
  text-align: left;
}
/* 编辑中的镜像测量元素：同字体 pre，量出真实内容宽高（用户 2026-08-26） */
.wb-edit-measure {
  position: absolute;
  visibility: hidden;
  white-space: pre;
  line-height: 1.3;
  top: -9999px;
  left: 0;
  pointer-events: none;
  max-width: none;
  min-width: 0;
}

/* ---------- whiteboard 2.0: tools / pens / panels ---------- */
.wb-bar { flex-wrap: wrap; }
.wb-hint { flex-basis: 100%; order: 9; }
.wb-topbtns {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
}
.wb-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.wb-btn-group {
  position: relative;
  display: inline-flex;
}
.wb-shape-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 120px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wb-shape-item {
  display: flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
}
.wb-shape-item:hover,
.wb-shape-item.active {
  background: var(--bg-hover);
  color: var(--accent);
}

/* bottom pen bar */
.wb-penbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  overflow-x: auto;
}
.wb-pen {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.wb-pen:hover {
  background: var(--bg-hover);
}
.wb-pen.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.wb-pen-swatch {
  width: 16px;
  height: 5px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  flex: none;
}
.wb-pen-name {
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-pen-del {
  margin-left: 2px;
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.wb-pen-del:hover {
  color: #d33;
}
.wb-pen.add {
  border-style: dashed;
  color: var(--text-dim);
}

/* custom pen dialog */
.wb-pendlg-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wb-pendlg {
  width: 300px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wb-pendlg-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-strong);
}
.wb-pendlg-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-dim);
}
.wb-pendlg-field input[type="text"],
.wb-pendlg-field input:not([type]) {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--bg-editor);
  color: var(--text);
  font-size: 13px;
  outline: none;
}
.wb-pendlg-field input[type="color"] {
  width: 100%;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-editor);
  padding: 2px;
}
.wb-pendlg-field input[type="range"] {
  accent-color: var(--accent);
}
.wb-pendlg-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

/* node extras */
.wb-node.locked {
  opacity: 0.65;
  cursor: not-allowed;
}
.wb-node-img {
  pointer-events: none;
}
/* 图片选中态：灰色细边框（用户 2026-08-26） */
.wb-node-img-frame {
  fill: none;
  stroke: rgba(128, 128, 128, 0.85);
  stroke-width: 1.5;
  pointer-events: none;
}
.wb-shape-line {
  stroke-linecap: round;
}
.wb-arrow-head {
  fill: currentColor;
  stroke: none;
}
.wb-collapse {
  cursor: pointer;
}
.wb-collapse-bg {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 1.4;
}
.wb-collapse-text {
  font-size: 11px;
  font-weight: 700;
  fill: var(--accent);
  pointer-events: none;
}
.wb-resize {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 2;
  cursor: nwse-resize;
}
/* 线的起点/终点手柄（用户 2026-08-26）：拖动调整端点 */
.wb-line-end {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 2;
  cursor: move;
}
.wb-line-end:hover {
  fill: var(--accent);
}
.wb-note-ind-bg {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 0.8;
}
.wb-note-ind-lines {
  stroke: var(--accent);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
}
/* 节点链接图标：链条样式、仅选中显示，位于节点右上角边框线外侧
   （用户 2026-08-26） */
.wb-link-ind {
  cursor: pointer;
}
.wb-link-ind-lines {
  stroke: var(--accent);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
}
.wb-link-ind:hover .wb-link-ind-lines {
  stroke: var(--accent-strong, var(--accent));
}
/* 链接编辑弹窗的页面联想列表（用户 2026-08-26） */
.wb-link-suggest {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 160px;
  overflow: auto;
}
.wb-link-suggest button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  padding: 5px 8px;
  border-radius: 5px;
  text-align: left;
  cursor: pointer;
}
.wb-link-suggest button:hover {
  background: var(--bg-hover);
  color: var(--accent);
}

/* 圈选框（鼠标框选多选，用户 2026-08-26） */
.wb-marquee {
  fill: var(--accent);
  fill-opacity: 0.08;
  stroke: var(--accent);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  pointer-events: none;
}

.sidebar-dbs-empty {
  font-size: 12px;
  color: var(--text-dim);
  padding: 6px 10px;
}
/* [[ 页面联想菜单（用户 2026-08-26） */
.rich-wiki-menu {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 3px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 140px;
  max-height: 220px;
  overflow: auto;
}
.rich-wiki-item {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  padding: 5px 8px;
  border-radius: 5px;
  text-align: left;
  cursor: pointer;
}
.rich-wiki-item.active,
.rich-wiki-item:hover {
  background: var(--bg-hover);
  color: var(--accent);
}

/* `:` 图标/emoji/FA 联想菜单（用户 2026-08-28） */
.rich-icon-menu {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 3px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 190px;
  max-height: 300px;
  overflow: auto;
}
.rich-icon-item {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  padding: 5px 8px;
  border-radius: 5px;
  text-align: left;
  cursor: pointer;
}
.rich-icon-item.active,
.rich-icon-item:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.rich-icon-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  font-size: 15px;
  line-height: 1;
}
.rich-icon-preview svg {
  display: block;
}
.rich-icon-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rich-icon-kind {
  flex: none;
  font-size: 10px;
  color: var(--text-dim, #999);
  background: var(--bg-hover);
  border-radius: 4px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* freehand strokes */
.wb-stroke {
  pointer-events: none;
}
.wb-stroke.locked {
  opacity: 0.7;
}
.wb-stroke.live {
  opacity: 0.9;
}
.wb-live-shape {
  stroke: var(--accent);
  stroke-width: 1.6;
  fill: none;
  stroke-dasharray: 4 3;
  pointer-events: none;
}
.wb-live-textbox {
  stroke: var(--accent);
  stroke-width: 1.4;
  fill: var(--accent-soft);
  stroke-dasharray: 4 3;
  pointer-events: none;
}

/* relation edges */
.wb-edge-relation {
  stroke-linecap: round;
}
.wb-edge-selected {
  stroke-width: 3;
}
.wb-edge-g.selected .wb-edge {
  filter: drop-shadow(0 0 3px var(--accent));
}
.wb-edge-label {
  font-size: 12px;
  font-weight: 600;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
  user-select: none;
  pointer-events: none;
}
.wb-rel-hint {
  position: absolute;
  background: var(--accent);
  color: #fff;
  font-size: 11.5px;
  border-radius: 6px;
  padding: 3px 8px;
  pointer-events: none;
  z-index: 8;
  white-space: nowrap;
}

/* edge toolbar + style menu */
.wb-edgebar {
  position: absolute;
  z-index: 9;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 6px;
  box-shadow: var(--shadow);
  flex-wrap: wrap;
}
.wb-edge-style {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 11.5px;
  border-radius: 5px;
  padding: 3px 7px;
  cursor: pointer;
  font-family: inherit;
}
.wb-edge-style.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.wb-edge-label-input {
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-editor);
  color: var(--text);
  font-size: 12px;
  padding: 3px 7px;
  outline: none;
  width: 90px;
}
.wb-selbar-multi {
  transform: translateX(-50%);
}
.wb-multi-count {
  font-size: 11.5px;
  color: var(--text-dim);
  padding: 0 4px;
}

/* style menu (mind-map 风格) */
.wb-style-menu {
  position: absolute;
  z-index: 9;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.wb-style-title {
  font-size: 11px;
  color: var(--text-dim);
  padding: 2px 6px;
}
.wb-style-item {
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  text-align: left;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
}
.wb-style-item:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
/* 颜色选择块（用户 2026-08-26：原来的颜色条太细难点，改为大方块） */
.wb-style-colors {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 5px;
  padding: 2px 6px 6px;
}
.wb-color-dot {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(128, 128, 128, 0.35);
  cursor: pointer;
  padding: 0;
}
.wb-color-dot:hover {
  border-color: var(--accent);
  transform: scale(1.12);
}

/* note editor */
.wb-note-editor {
  position: absolute;
  z-index: 9;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wb-note-title {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-dim);
}
.wb-note-editor textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 80px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-editor);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  padding: 6px 8px;
  outline: none;
  resize: vertical;
}
/* 链接编辑输入框（节点链接，用户 2026-08-26） */
.wb-note-editor input.wb-note-ta {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-editor);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  padding: 6px 8px;
  outline: none;
}
.wb-note-foot {
  font-size: 11px;
  color: var(--text-dim);
}

/* panels (outline / layers) */
.wb-panel {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  width: 280px;
  max-height: calc(100% - 20px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.wb-panel-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.wb-outline-list,
.wb-layer-list {
  overflow-y: auto;
  padding: 4px;
}
.wb-outline-empty {
  color: var(--text-dim);
  font-size: 12px;
  padding: 12px;
  text-align: center;
}
.wb-outline-row {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 2px;
}
.wb-outline-input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
  padding: 4px 6px;
  outline: none;
  font-family: inherit;
}
.wb-outline-input:hover {
  background: var(--bg-hover);
}
.wb-outline-input:focus {
  border-color: var(--accent);
  background: var(--bg-editor);
}
.wb-outline-act {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: inline-flex;
  flex: none;
}
.wb-outline-act:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.wb-outline-act.danger:hover {
  color: #d33;
}
.wb-layer-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 12.5px;
}
.wb-layer-row:hover {
  background: var(--bg-hover);
}
.wb-layer-act {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  flex: none;
}
.wb-layer-act:hover:not(:disabled) {
  background: var(--bg-active);
  color: var(--text);
}
.wb-layer-act:disabled {
  opacity: 0.35;
  cursor: default;
}
.wb-layer-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.wb-layer-kind {
  display: inline-block;
  font-size: 10px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 1px 4px;
  margin-right: 4px;
}
.wb-layer-kind.stroke {
  color: var(--text-dim);
  background: var(--bg-hover);
}

/* ---------- embedded whiteboard ([[白板]] link preview) ---------- */
.board-embed {
  display: flex;
  justify-content: center;
  margin: 6px 0;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: var(--bg-hover);
  padding: 8px;
  cursor: pointer;
  min-width: 0;
  transition: border-color 0.15s;
}
.board-embed:hover {
  border-color: var(--accent);
}
.board-embed-loading,
.board-embed-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  color: var(--text-dim);
  font-size: 12.5px;
  gap: 6px;
}
/* [[PPT 嵌入（用户 2026-08-26）：直接放映模式 —— 与原件一致（含图片）、无边框、
   左右半透明箭头（默认隐藏、悬停显示）翻页；双击进编辑 */
.ppt-embed {
  position: relative;
  display: block;
  margin: 6px 0;
  cursor: pointer;
  min-width: 0;
}
.ppt-embed-stage {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.ppt-embed-item {
  position: absolute;
}
.ppt-embed-text,
.ppt-embed-shape-text {
  pointer-events: none;
  user-select: none;
}
/* 左右半透明翻页箭头：默认隐藏，鼠标放上去（悬停整个嵌入）才显示 */
.ppt-embed-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.32);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.18s ease, background 0.18s ease;
}
.ppt-embed-arrow.prev { left: 10px; }
.ppt-embed-arrow.next { right: 10px; }
.ppt-embed-arrow:hover {
  background: rgba(0, 0, 0, 0.55);
}
.ppt-embed:hover .ppt-embed-arrow {
  opacity: 1;
}
.ppt-embed-arrow[style*="visibility: hidden"] {
  opacity: 0 !important;
}
/* [[PPT/画布 嵌入选中（用户 2026-08-28）：单击选中显示蓝色边框 + 右下角
   缩放圆点；右键菜单含 对齐/说明/下载/复制/剪切/粘贴/评论/删除。
   默认占满本行宽度（用户 2026-08-28 目标：插入 PPT/画布 后默认占满本行、
   可拖拽调节大小）—— display:block + width:100%，设了 width 属性时内联
   px 覆盖之；不设 max-width 以便向右拖可超出本行（放大） */
.wiki-embed {
  position: relative;
  display: block;
  width: 100%;
  min-width: 120px;
}
.wiki-embed.selected .board-embed,
.wiki-embed.selected .ppt-embed {
  outline: 2px solid var(--accent, #4f8cff);
  outline-offset: 1px;
}
.wiki-embed-chrome {
  display: none;
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent, #4f8cff);
  border: 2px solid #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
  cursor: nwse-resize;
  z-index: 20;
}
.wiki-embed.selected .wiki-embed-chrome {
  display: block;
}
/* 缩放把手铺满圆点（真实鼠标点击落在 .wiki-embed-chrome 上，mousedown
   监听挂在圆点本身 + 内部把手两层都接，2026-08-28 修复拖拽无效） */
.wiki-embed-resize {
  position: absolute;
  inset: 0;
  cursor: nwse-resize;
}
.wiki-embed-caption,
.wiki-embed-caption-edit {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-dim);
  line-height: 1.5;
  width: 100%;
}
.wiki-embed-caption-edit {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 6px;
  color: var(--text);
  resize: none;
  outline: none;
}
.wiki-embed-caption-edit:focus {
  border-color: var(--accent);
}
.inline-icon {
  display: inline-block;
  vertical-align: -2px;
  flex: none;
}
/* 嵌入的白板以「fit 视图」显示：SVG 按 viewBox 比例自适应容器，
   完整展示整个画布内容（不再被固定高度压扁），最大高度约一屏，
   超宽/超高画布均等比缩放并居中 */
.board-embed-svg {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: min(60vh, 640px);
}
.board-embed-edge {
  stroke: var(--text-dim);
  stroke-opacity: 0.5;
  stroke-width: 1.5;
}
.board-embed-node {
  fill: var(--bg);
  stroke: var(--border);
  stroke-width: 1.5;
}
.board-embed-text {
  font-size: 12px;
  fill: var(--text);
  font-family: inherit;
}
.board-embed-text-plain {
  font-size: 12px;
  fill: var(--text);
  font-family: inherit;
  text-anchor: start;
}
.board-embed-edge.relation {
  stroke: #e67e22;
  stroke-linecap: round;
}
.board-embed-edge-label {
  font-size: 11px;
  font-weight: 600;
  fill: #e67e22;
  font-family: inherit;
  paint-order: stroke;
  stroke: var(--bg);
  stroke-width: 3px;
}
.board-embed-note-ind {
  fill: var(--accent-soft);
  stroke: var(--accent);
  stroke-width: 0.8;
}
.board-embed-collapse {
  fill: var(--bg);
  stroke: var(--accent);
  stroke-width: 1.2;
}
.board-embed-collapse-text {
  font-size: 10px;
  font-weight: 700;
  fill: var(--accent);
  font-family: inherit;
}

/* ---------- 页面卡片 (wiki card) — a block that previews another page ---------- */
.milkdown .ProseMirror .wiki-card,
.rowpage-editor .ProseMirror .wiki-card {
  display: flex;
  flex-direction: column;
  /* default size: 300px wide, 宽:高 5:4 (高:宽 4:5) rectangle */
  width: 300px;
  max-width: 100%;
  aspect-ratio: 5 / 4;
  margin: 10px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  /* no overflow:hidden — the resize handle sticks out past the bottom-right
     corner (like images); the cover rounds its own top corners instead */
  background: var(--bg-card, var(--bg));
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  user-select: none;
}
.milkdown .ProseMirror .wiki-card[data-ratio="v45"],
.rowpage-editor .ProseMirror .wiki-card[data-ratio="v45"] {
  /* vertical 4:5: 宽:高 4:5 (taller than wide) */
  aspect-ratio: 4 / 5;
}
.milkdown .ProseMirror .wiki-card:hover,
.rowpage-editor .ProseMirror .wiki-card:hover {
  border-color: var(--accent);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.wiki-card-cover {
  position: relative;
  flex: 0 0 58%;
  min-height: 0;
  background-size: cover;
  background-position: center;
  border-radius: 11px 11px 0 0; /* inside the 1px card border */
}
.wiki-card-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* title sits right under the cover icon */
  padding: 20px 14px 12px;
}
.wiki-card-icon {
  position: absolute;
  left: 14px; /* left-aligned with the title (body padding is 14px) */
  bottom: -16px; /* straddle the cover's bottom edge: half above, half below */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--bg-card, var(--bg));
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.wiki-card-icon svg {
  display: block;
}
.wiki-card-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text);
}
.wiki-card-summary {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-dim);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* the 6-dot drag handle of the surrounding block selection */
.milkdown .ProseMirror .wiki-card.selected,
.rowpage-editor .ProseMirror .wiki-card.selected {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* bottom-right resize handle — visible while the card is selected (like images) */
.wiki-card {
  position: relative;
}
.wiki-card-resize {
  display: none;
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #fff;
  cursor: nwse-resize;
  pointer-events: all;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  z-index: 3;
}
.wiki-card.selected .wiki-card-resize {
  display: block;
}
/* the target page does not exist — the card can't be opened (dblclick creates) */
.wiki-card.wiki-card-missing {
  border-style: dashed;
  opacity: 0.8;
}
.wiki-card.wiki-card-missing .wiki-card-title::after {
  content: "（页面不存在）";
  font-size: 11px;
  font-weight: 400;
  color: var(--text-dim);
  margin-left: 8px;
}

/* ---------- clipper / inbox (剪藏 / 稍后读) ---------- */
.clip {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.clip-label {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 6px;
}
.clip-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.clip-input-row .clip-url {
  flex: 1;
}
.clip-input-row .btn {
  flex: none;
  white-space: nowrap;
}
.clip-card {
  display: flex;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
  margin: 8px 0 4px;
  background: var(--bg-hover);
}
.clip-card-img {
  width: 110px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
  background: var(--bg-active);
}
.clip-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
}
.clip-card-title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-strong);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.clip-card-desc {
  font-size: 12px;
  color: var(--text-dim);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.clip-card-url {
  font-size: 11.5px;
  color: var(--accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clip-desc {
  resize: vertical;
  min-height: 44px;
}
.clip-body {
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}
.clip-two {
  display: flex;
  gap: 14px;
}
.clip-field {
  flex: 1;
  min-width: 0;
}
.clip-msg {
  font-size: 12px;
  color: var(--text);
  background: var(--bg-hover);
  border-radius: 6px;
  padding: 6px 10px;
  margin-top: 8px;
}
.clip-foot {
  display: flex;
  align-items: center;
}
.clip-hint {
  flex: 1;
  font-size: 12px;
  color: var(--text-dim);
}
.spin {
  animation: clip-spin 0.9s linear infinite;
}
@keyframes clip-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- AI 助手（聊天面板 / 侧栏） ---------- */
.ai-panel {
  width: 320px;
  flex: none;
  display: flex;
  flex-direction: column;
  background: var(--bg-side);
  border-left: 1px solid var(--border);
  min-height: 0;
  position: relative;
}
.ai-panel-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.ai-panel-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-strong);
  flex: none;
}
.ai-panel-title svg {
  color: var(--accent);
}
.ai-provider-select {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 11.5px;
  padding: 3px 6px;
  outline: none;
}
.ai-panel-close {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: inline-flex;
  flex: none;
}
.ai-panel-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.ai-search-toggle {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: inline-flex;
  flex: none;
}
.ai-search-toggle:hover,
.ai-search-toggle.active {
  background: var(--bg-hover);
  color: var(--accent);
}
.ai-search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.ai-search-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  padding: 4px 8px;
  outline: none;
}
.ai-search-input:focus {
  border-color: var(--accent);
}
.ai-search-clear {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 3px;
  border-radius: 4px;
  display: inline-flex;
  flex: none;
}
.ai-search-clear:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.ai-load-earlier {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  align-self: center;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 11.5px;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.ai-load-earlier:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.ai-doc-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-dim);
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.ai-doc-toggle input {
  accent-color: var(--accent);
}
.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}
.ai-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-dim);
  font-size: 12.5px;
  text-align: center;
  padding: 22px 8px;
}
/* AI 额度用尽提示（用户 2026-08-26） */
.ai-quota-hint {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
}
.ai-suggestions {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}
.ai-suggestions button {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 12px;
  padding: 7px 10px;
  cursor: pointer;
  font-family: inherit;
}
.ai-suggestions button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ai-msg {
  display: flex;
}
.ai-msg-user {
  justify-content: flex-end;
}
.ai-msg-bubble {
  max-width: 92%;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
}
.ai-msg-user .ai-msg-bubble {
  background: var(--accent);
  color: #fff;
}
.ai-msg-assistant .ai-msg-bubble {
  background: var(--bg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.ai-msg-tag {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--accent);
  margin-bottom: 4px;
  font-weight: 600;
}
/* AI 回复气泡操作：复制（保留格式）+ 插入到页面最后一行 */
.ai-msg-actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
  padding-left: 4px;
  opacity: 0.6;
  transition: opacity 0.15s;
}
.ai-msg:hover .ai-msg-actions {
  opacity: 1;
}
.ai-msg-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.ai-msg-actions button:hover {
  background: var(--bg-hover);
  color: var(--accent);
}
.ai-error {
  font-size: 12px;
  color: #d33;
  background: rgba(221, 51, 51, 0.08);
  border: 1px solid rgba(221, 51, 51, 0.3);
  border-radius: 8px;
  padding: 7px 10px;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-input-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}
.ai-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  padding: 7px 9px;
  outline: none;
  min-height: 34px;
  max-height: 120px;
}
.ai-input:focus {
  border-color: var(--accent);
}
.ai-send {
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: none;
}
.ai-send:disabled {
  opacity: 0.45;
  cursor: default;
}
.ai-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 10px 8px;
  border-top: 1px solid var(--border);
}
.ai-clear {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 11.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  border-radius: 4px;
  font-family: inherit;
}
.ai-clear:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.ai-foot-hint {
  font-size: 11px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* selection toolbar AI submenu */
.sel-bar-ai {
  position: relative;
  display: inline-flex;
}
.sel-bar-ai-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 40;
  min-width: 108px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sel-bar-ai-menu button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.sel-bar-ai-menu button:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.sel-bar-ai-menu .sel-bar-ai-sep {
  height: 1px;
  background: var(--border);
  margin: 3px 2px;
}
.sel-bar-ai-menu .sel-bar-ai-title {
  display: block;
  color: var(--text-dim);
  font-size: 11px;
  padding: 4px 8px 1px;
  white-space: nowrap;
}

/* ---------- media node (tc_media) ---------- */
.tc-media {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.tc-media-name {
  color: var(--text-dim);
  font-size: 12px;
  margin-top: 6px;
}
.tc-media-timeline {
  margin-top: 8px;
  max-height: 240px;
  overflow: auto;
}
.tc-media-timeline-head {
  color: var(--text-dim);
  font-size: 12px;
  margin-bottom: 4px;
}
.tc-media-timeline-row {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
  padding: 4px 6px;
  border-radius: 5px;
  cursor: pointer;
  font-family: inherit;
  white-space: normal;
}
.tc-media-timeline-row:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.tc-media-badge {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
}


/* settings: AI providers */
.ai-provider-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
}
/* 定制 AI 命令行 */
.ai-cmd-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.ai-cmd-name {
  width: 110px;
  flex-shrink: 0;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
}
.ai-cmd-prompt {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
}
.ai-cmd-presets {
  margin-bottom: 8px;
}
.ai-provider-row input[type="radio"] {
  accent-color: var(--accent);
  flex: none;
}
.ai-provider-name {
  font-weight: 600;
  color: var(--text);
  flex: none;
}
/* 内置提供商徽章（用户 2026-08-26） */
.ai-builtin-badge {
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 4px;
  padding: 0 4px;
  vertical-align: 1px;
}
.ai-provider-url {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-provider-row .comment-del {
  flex: none;
}

/* ---------- emoji picker (Notion-style) ---------- */
.emoji-picker-anchor {
  position: absolute;
  z-index: 60;
}
.emoji-picker {
  width: 300px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.emoji-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 6px 4px;
  border-bottom: 1px solid var(--border);
}
.emoji-tab {
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 11.5px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.emoji-tab:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.emoji-tab.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.emoji-body {
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
}
.emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
}
.emoji-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  border-radius: 7px;
  cursor: pointer;
  padding: 0;
}
.emoji-cell:hover {
  background: var(--bg-hover);
}
.emoji-cell img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  pointer-events: none;
}
.emoji-custom {
  position: relative;
}
.emoji-custom-del {
  position: absolute;
  top: 0;
  right: 0;
  border: none;
  background: var(--bg);
  color: var(--text-dim);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.emoji-custom-del:hover {
  color: #d33;
}
.emoji-add {
  border: 1px dashed var(--border);
  color: var(--text-dim);
}
.emoji-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.emoji-empty {
  grid-column: 1 / -1;
  color: var(--text-dim);
  font-size: 12px;
  text-align: center;
  padding: 18px 0;
}
.emoji-foot {
  padding: 5px 10px 7px;
  border-top: 1px solid var(--border);
  font-size: 10.5px;
  color: var(--text-dim);
}
.emoji-hint code {
  background: var(--bg-hover);
  border-radius: 3px;
  padding: 0 3px;
  font-family: inherit;
}
.emoji-lucide {
  color: var(--text);
}
.emoji-lucide svg {
  width: 19px;
  height: 19px;
}

/* ---------- inline lucide icon node (<span data-lucide>) ---------- */
.tc-lucide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.18em;
  width: 1.2em;
  height: 1.2em;
  margin: 0 1px;
  color: inherit;
  cursor: default;
  border-radius: 4px;
}
.tc-lucide svg {
  width: 100%;
  height: 100%;
}
.tc-lucide:hover {
  background: var(--bg-hover);
}

/* ---------- AI prompt bar (/AI · Request) ---------- */
.ai-bar {
  position: absolute;
  z-index: 70;
  width: 560px;
  max-width: calc(100% - 24px);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ai-bar-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
}
.ai-bar-icon {
  color: var(--accent);
  flex: none;
}
.ai-bar-input {
  flex: 1;
  resize: none;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  padding: 4px 2px;
  outline: none;
  min-height: 22px;
  max-height: 90px;
  line-height: 1.5;
}
.ai-bar-send,
.ai-bar-close {
  border: none;
  border-radius: 7px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  flex: none;
}
.ai-bar-send:disabled {
  opacity: 0.45;
  cursor: default;
}
.ai-bar-close {
  background: transparent;
  color: var(--text-dim);
}
.ai-bar-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.ai-bar-context {
  font-size: 11px;
  color: var(--text-dim);
  padding: 3px 12px 7px;
  border-top: 1px dashed var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-bar-error {
  font-size: 12px;
  color: #d33;
  background: rgba(221, 51, 51, 0.08);
  border-top: 1px solid rgba(221, 51, 51, 0.25);
  padding: 6px 12px;
}
.ai-bar-reply {
  border-top: 1px solid var(--border);
  padding: 8px 12px 10px;
  max-height: 320px;
  overflow-y: auto;
}
.ai-bar-reply-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.ai-bar-reply-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
}
.ai-bar-reply-ops {
  display: flex;
  gap: 4px;
}
.ai-bar-reply-ops button {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-dim);
  font-size: 11.5px;
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ai-bar-reply-ops button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ai-bar-reply-body {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- home 待办清单 jump: reveal + highlight the task line ---- */
.task-reveal {
  position: absolute;
  z-index: 6;
  background: color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 6px;
  pointer-events: none;
  animation: task-reveal-fade 2.2s ease forwards;
}
@keyframes task-reveal-fade {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* ---------- compact markdown body (AI chat bubbles, /AI reply, previews) ---------- */
.md-body {
  white-space: normal;
  word-break: break-word;
}
.md-body > :first-child {
  margin-top: 0;
}
.md-body > :last-child {
  margin-bottom: 0;
}
.md-body p {
  margin: 0.4em 0;
}
.md-body h1,
.md-body h2,
.md-body h3,
.md-body h4,
.md-body h5,
.md-body h6 {
  margin: 0.6em 0 0.3em;
  line-height: 1.35;
  font-weight: 700;
}
.md-body h1 {
  font-size: 1.35em;
}
.md-body h2 {
  font-size: 1.22em;
}
.md-body h3 {
  font-size: 1.1em;
}
.md-body h4,
.md-body h5,
.md-body h6 {
  font-size: 1em;
}
.md-body ul,
.md-body ol {
  margin: 0.3em 0;
  padding-left: 1.5em;
}
.md-body li {
  margin: 0.15em 0;
}
.md-body li > p {
  margin: 0.15em 0;
}
.md-body code {
  background: var(--bg-hover);
  border-radius: 4px;
  padding: 1px 4px;
  font-family: Consolas, Menlo, "Courier New", monospace;
  font-size: 0.9em;
}
.md-body pre {
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 10px;
  margin: 0.45em 0;
  overflow-x: auto;
}
.md-body pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: 0.88em;
}
.md-body blockquote {
  border-left: 3px solid var(--border-strong, var(--border));
  margin: 0.45em 0;
  padding: 0.05em 0.8em;
  color: var(--text-dim);
}
.md-body a {
  color: var(--accent);
  text-decoration: underline;
}
.md-body table {
  border-collapse: collapse;
  margin: 0.45em 0;
  font-size: 0.95em;
}
.md-body th,
.md-body td {
  border: 1px solid var(--border);
  padding: 3px 8px;
}
.md-body th {
  background: var(--bg-hover);
  font-weight: 600;
}
.md-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.6em 0;
}
.md-body img {
  max-width: 100%;
  border-radius: 6px;
}

/* ---------- in-document find / replace bar (Ctrl+F) ---------- */
.find-bar {
  position: sticky;
  top: 8px;
  z-index: 35;
  flex: none;
  margin: 8px auto 0;
  width: min(480px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg-side);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  padding: 6px;
}
.find-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.find-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 6px;
  padding: 5px 9px;
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.find-input:focus {
  border-color: var(--accent);
}
.find-count {
  font-size: 11.5px;
  color: var(--text-dim);
  min-width: 40px;
  text-align: center;
  user-select: none;
  flex: none;
}
.find-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12.5px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}
.find-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.find-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}
.find-btn.primary {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.find-btn.primary:hover {
  color: var(--accent);
}
/* find-match highlights — PM decoration spans (PM-managed DOM, safe) */
.find-match {
  background: rgba(255, 196, 0, 0.38);
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 196, 0, 0.28);
}
.find-match-current {
  background: rgba(255, 149, 0, 0.6);
  box-shadow: 0 0 0 1px rgba(255, 149, 0, 0.5);
}

/* ---------- sidebar full-text search (Typora-style search page) ---------- */
.sidebar-search {
  position: absolute;
  inset: 0;
  z-index: 25;
  background: var(--bg-side);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar-search-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  flex: none;
}
.sidebar-search-icon {
  color: var(--text-dim);
  flex: none;
}
.sidebar-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--text);
  outline: none;
}
.sidebar-search-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  flex: none;
}
.sidebar-search-close:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.sidebar-search-replace-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 6px;
  padding: 4px;
  cursor: pointer;
  flex: none;
}
.sidebar-search-replace-toggle:hover,
.sidebar-search-replace-toggle.active {
  color: var(--accent);
  background: var(--bg-hover);
}
.sidebar-replace-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  flex: none;
  flex-wrap: wrap;
}
.sidebar-replace-row .sidebar-search-input {
  flex: 1;
  min-width: 100px;
}
.sidebar-replace-btn {
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.sidebar-replace-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.sidebar-replace-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.sidebar-replace-done {
  color: var(--accent);
  font-size: 11.5px;
  white-space: nowrap;
}
.sidebar-search-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px 16px;
  min-height: 0;
}
.sidebar-search-hint {
  padding: 20px 10px;
  font-size: 12.5px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.7;
}
.sidebar-search-summary {
  padding: 6px 8px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.sidebar-search-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
}
.sidebar-search-item:hover {
  background: var(--bg-hover);
}
.sidebar-search-item-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
}
.sidebar-search-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-search-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 1px 7px;
  flex: none;
}
.sidebar-search-item-path {
  display: block;
  font-size: 11px;
  color: var(--text-dim);
  margin: 2px 0 4px 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-search-snippet {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 3px 0 0 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-search-snippet mark {
  background: rgba(255, 196, 0, 0.45);
  color: inherit;
  border-radius: 2px;
}

/* ---------- typewriter virtual bottom space ----------
   A PM-external spacer (plain div after the ProseMirror content) that the
   typewriter centering grows so the caret line can always scroll to the
   vertical center — even when the content is shorter than the viewport. */
.tc-typewriter-space {
  display: block;
  height: 0;
  pointer-events: none;
}
@media print {
  .tc-typewriter-space {
    display: none !important;
  }
}

/* ---------- frontmatter (YAML 元数据面板) ---------- */
.tc-frontmatter {
  max-width: 860px;
  margin: 0 auto 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-side);
  overflow: hidden;
}
.tc-fm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  user-select: none;
  cursor: pointer;
}
.tc-fm-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.02em;
}
.tc-fm-toggle {
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--text-dim);
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  transition: transform 0.15s;
}
.tc-frontmatter-collapsed .tc-fm-toggle {
  transform: rotate(-90deg);
}
.tc-fm-toggle:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.tc-fm-body {
  padding: 0 12px 12px;
}
/* preview rows: plain `key: value`, no input boxes */
.tc-fm-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tc-fm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 3px 6px;
  border-radius: 6px;
  cursor: text;
}
.tc-fm-row:hover {
  background: var(--bg-hover);
}
.tc-fm-row-key {
  width: 130px;
  flex: none;
  font-size: 12.5px;
  color: var(--text-dim);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-fm-row-val {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tc-fm-row-del {
  flex: none;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.12s;
}
.tc-fm-row:hover .tc-fm-row-del {
  opacity: 1;
}
.tc-fm-row-del:hover {
  background: var(--bg-hover);
  color: #d9534f;
}
/* inline edit state — edit IN PLACE as text, no input-box look */
.tc-fm-row-editing .tc-fm-row-key,
.tc-fm-row-editing .tc-fm-row-val {
  outline: none;
  border-radius: 4px;
  cursor: text;
}
.tc-fm-row-editing .tc-fm-row-key:focus,
.tc-fm-row-editing .tc-fm-row-val:focus {
  background: var(--bg-hover);
  box-shadow: 0 0 0 1px var(--accent-soft);
}
.tc-fm-row-editing .tc-fm-row-key:empty::before,
.tc-fm-row-editing .tc-fm-row-val:empty::before {
  content: attr(data-placeholder);
  color: var(--text-dim);
  opacity: 0.55;
}
/* "+" add-property button */
.tc-fm-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 6px;
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
  padding: 5px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.tc-fm-add:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.tc-fm-raw {
  margin-top: 8px;
}
.tc-fm-raw-toggle {
  border: none;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
}
.tc-fm-raw-toggle:hover {
  text-decoration: underline;
}
.tc-fm-raw-input {
  display: none;
  width: 100%;
  margin-top: 6px;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: var(--mono-font, Consolas, monospace);
  color: var(--text);
  outline: none;
  resize: vertical;
}
.tc-fm-delete {
  margin-top: 8px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
}
.tc-fm-delete:hover {
  color: #d9534f;
  text-decoration: underline;
}

/* ---------- highlight ==text== / superscript / subscript / underline ---------- */
.tc-highlight {
  background: rgba(255, 213, 79, 0.5);
  border-radius: 2px;
  padding: 0 1px;
}
.tc-sup {
  font-size: 0.75em;
  vertical-align: super;
}
.tc-sub {
  font-size: 0.75em;
  vertical-align: sub;
}
.tc-underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- definition lists ---------- */
.tc-def-list {
  margin: 0.6em 0;
}
.tc-def-list dt {
  font-weight: 600;
}
.tc-def-list dd {
  margin: 0 0 0.4em 1.5em;
}

/* export menu group labels */
.menu-pop-label {
  font-size: 11px;
  color: var(--text-dim);
  padding: 8px 10px 2px;
  letter-spacing: 0.03em;
  user-select: none;
}

/* ---------- spell check: wavy underline on misspelled words ---------- */
.spell-err {
  text-decoration: underline wavy rgba(220, 38, 38, 0.75);
  text-underline-offset: 3px;
  text-decoration-skip-ink: none;
}

/* ---------- custom hotkeys (settings) ---------- */
.hotkey-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}
.hotkey-group-label {
  font-size: 11.5px;
  color: var(--text-dim);
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}
.hotkey-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.hotkey-row-label {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hotkey-key {
  flex: none;
  min-width: 120px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12.5px;
  font-family: var(--mono-font, Consolas, monospace);
  cursor: pointer;
}
.hotkey-key:hover {
  border-color: var(--accent);
}
.hotkey-key.recording {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.hotkey-key.empty {
  color: var(--text-dim);
}
.hotkey-reset {
  flex: none;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.hotkey-reset:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.hotkey-conflict {
  flex: none;
  font-size: 11px;
  color: #d9534f;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- document typography (全局字间距/行高微调) ---------- */
.milkdown .ProseMirror {
  letter-spacing: var(--doc-letter-spacing, 0px);
}
.milkdown .ProseMirror > * {
  line-height: var(--doc-line-height, 1.7);
}

/* ---------- wiki tags: vault-wide cloud ---------- */
.wiki-tag-count {
  margin-left: 4px;
  font-size: 10px;
  background: var(--bg-hover);
  border-radius: 8px;
  padding: 0 5px;
  color: var(--text-dim);
}
.wiki-tag.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ---------- toggle list（可折叠列表，用户要求 2026-08-21） ---------- */
ul[data-toggle-list] {
  list-style: none;
  /* 与正文段落左对齐（用户要求 2026-08-22）：三角形从正文左缘开始，不缩进 */
  padding-left: 0;
  margin: 0.4em 0;
}
.tc-toggle-item {
  list-style: none;
  display: flex;
  align-items: flex-start;
  padding-left: 0;
}
/* lucide triangle 三角：与第一行文字垂直居中对齐、高度与文字行一致
   （用户要求 2026-08-22）。margin-top = (文字行高 − 按钮高) / 2 + 首段
   margin-top(0.6em)；文字行高 = var(--doc-line-height) × 1em。 */
.tc-toggle-arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 继承正文字号：1em/0.6em 的计算基于正文 16px 而非 button 默认 13.33px */
  font-size: inherit;
  font-family: inherit;
  width: 18px;
  height: 18px;
  margin-top: calc((var(--doc-line-height, 1.7) * 1em - 18px) / 2 + 0.6em);
  border: none;
  background: transparent;
  color: var(--text-strong);
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
}
.tc-toggle-arrow:hover {
  background: var(--bg-hover);
}
.tc-toggle-arrow svg {
  width: 14px;
  height: 14px;
}
/* toggle heading（用户要求 2026-08-22）：标题行是 heading 时，三角形尺寸随
   标题级别缩放（NodeView 内联设置宽高 + margin-top，垂直居中于标题第一行）；
   折叠内容仍是普通文本（不受影响）。
   2026-08-26 修复：align-items 从 center 改为 flex-start —— center 会把三角
   相对【整个 li（含折叠内容）】垂直居中，折叠区文本一多三角就下移；改用
   flex-start + NodeView 按标题行高计算的 margin-top，三角始终对齐第一行。 */
.tc-toggle-item.tc-toggle-heading {
  align-items: flex-start;
}
.tc-toggle-item.tc-toggle-heading .tc-toggle-body > h1,
.tc-toggle-item.tc-toggle-heading .tc-toggle-body > h2,
.tc-toggle-item.tc-toggle-heading .tc-toggle-body > h3 {
  margin-top: 0;
  margin-bottom: 0;
}
.tc-toggle-body {
  flex: 1;
  min-width: 0;
}
/* 折叠态：隐藏首段之后的所有子块（内容仍可编辑，只是不可见） */
.tc-toggle-item[data-folded="true"] .tc-toggle-body > *:not(:first-child) {
  display: none;
}

/* ---------- code block line numbers ---------- */
.tc-code-wrap {
  display: flex;
  margin: 0.6em 0;
  border-radius: 8px;
  background: var(--bg-hover);
  overflow: hidden;
}
.tc-code-gutter {
  flex: none;
  padding: 14px 10px 14px 14px;
  text-align: right;
  color: var(--text-dim);
  font-family: var(--mono-font, Consolas, Menlo, monospace);
  /* 与代码同字号（0.85em，同 .milkdown pre code）保证行号与代码行严格
     等高同距（用户要求 2026-08-22：行号与代码行一一对齐） */
  font-size: 0.85em;
  line-height: 1.6;
  user-select: none;
  opacity: 0.75;
  background: rgba(0, 0, 0, 0.04);
  /* 行号与代码行严格对齐：每行等高、无额外行距。
     pre 有 1px border-top，gutter 用同高透明 border 抵消，保证第一行对齐 */
  border-top: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tc-code-line {
  display: block;
  line-height: 1.6;
  /* 1em = 自身 font-size（0.85em → 与代码行相同） */
  height: calc(1em * 1.6);
  font-variant-numeric: tabular-nums;
}
.tc-code-wrap pre {
  flex: 1;
  margin: 0 !important;
  padding: 0 !important; /* 去掉 .milkdown pre 的 14px 内边距：node view 已由
                             code 自身 padding 控制，否则与行号 gutter 错位 */
  overflow-x: auto;
  background: transparent !important;
}
.tc-code-wrap pre code {
  display: block;
  padding: 14px 16px;
  line-height: 1.6;
  background: transparent !important;
}

/* ---------- multi-document tabs ---------- */
.tabs-bar {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding: 6px 10px 0;
  background: var(--bg-side);
  border-bottom: 1px solid var(--border);
  flex: none;
  overflow-x: auto;
  scrollbar-width: thin;
  min-height: 33px;
}
.tab-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 12px;
  border-radius: 8px 8px 0 0;
  font-size: 12.5px;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  max-width: 180px;
  flex: none;
  border: 1px solid transparent;
  border-bottom: none;
}
.tab-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.tab-item.active {
  background: var(--bg-editor);
  color: var(--text);
  border-color: var(--border);
  font-weight: 600;
}
.tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-dim);
  border-radius: 4px;
  padding: 1px;
  cursor: pointer;
  flex: none;
}
.tab-close:hover {
  background: var(--bg-active);
  color: var(--text);
}
html.tc-focus .tabs-bar {
  display: none !important;
}

/* ---------- crash-recovery draft banner ---------- */
.draft-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: rgba(255, 196, 0, 0.16);
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--text);
  flex: none;
}
.draft-banner button {
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
}
.draft-restore {
  background: var(--accent);
  color: #fff;
}
.draft-discard {
  background: var(--bg-hover);
  color: var(--text);
}

/* ---------- 无打开文档的空白页（不可编辑 + 建议操作） ---------- */
/* 启动/刷新加载中：纯空白占位（背景与编辑器一致，避免闪空文档页/landing 页） */
.boot-placeholder {
  flex: 1;
  min-width: 0;
  background: var(--bg-editor);
}
.boot-full {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.no-doc-screen {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-editor);
  user-select: none;
}
.no-doc-card {
  text-align: center;
  max-width: 420px;
  padding: 40px 32px;
}
.no-doc-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 10px;
}
.no-doc-hint {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 22px;
}
.no-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.no-doc-actions button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  background: var(--bg-hover);
  color: var(--text);
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.no-doc-actions button:hover {
  background: var(--bg-active);
}

/* ---------- 无文档时顶栏图标置灰 ---------- */
.tool-btn.disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* ---------- 演示模式（页面圈画/标注/激光指针） ---------- */
.pres-overlay {
  position: fixed;
  inset: 0;
  z-index: 9980;
  cursor: crosshair; /* 画笔模式；激光模式由组件内联覆盖为 none（只显示激光点） */
  touch-action: none;
}
/* 演示开启时顶栏提升到 overlay 之上，保证"再点演示图标关闭"可用 */
body.pres-active .toolbar {
  position: relative;
  z-index: 9996;
}
.pres-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.pres-toolbar {
  position: fixed;
  top: 54px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 9990;
}
.pres-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.pres-btn:hover {
  background: var(--bg-hover);
}
.pres-btn.active {
  background: var(--bg-hover);
  outline: 1px solid var(--accent);
}
.pres-menu {
  position: fixed;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 9991;
}
.pres-menu-label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  margin: 4px 0 6px;
}
.pres-colors {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.pres-color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.pres-color.active {
  border-color: var(--text);
}
.pres-tool {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
}
.pres-tool:hover {
  background: var(--bg-hover);
}
.pres-tool.active {
  background: var(--bg-hover);
}
.pres-tool.danger {
  color: #e5484d;
}

/* ---------- 用户反馈对话框 ---------- */
.feedback-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.feedback-kinds {
  display: flex;
  gap: 8px;
}
.feedback-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.feedback-kind:hover {
  background: var(--bg-hover);
}
.feedback-kind.active {
  border-color: var(--accent);
  background: var(--accent-soft, var(--bg-hover));
}
.feedback-rating {
  display: flex;
  gap: 6px;
}
.feedback-star {
  border: none;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  padding: 2px;
}
.feedback-star.on {
  color: #ffb020;
}
.feedback-text {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--bg-input, var(--bg));
  color: var(--text);
  border-radius: 8px;
  padding: 10px;
  font-family: inherit;
  font-size: 13px;
  resize: vertical;
  min-height: 90px;
}
.feedback-msg {
  font-size: 13px;
  color: var(--text-dim);
}
.feedback-actions {
  display: flex;
  justify-content: flex-end;
}
.feedback-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
.feedback-submit:disabled {
  opacity: 0.6;
  cursor: default;
}
.feedback-hint {
  font-size: 11px;
  color: var(--text-dim);
}
.feedback-help-entry {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.feedback-help-entry button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  padding: 4px 6px;
  border-radius: 6px;
}
.feedback-help-entry button:hover {
  background: var(--bg-hover);
  color: var(--text);
}

/* ---------- 用户手册 ---------- */
.help-scroll {
  overflow-y: auto;
  height: 100%;
  padding: 4px 6px 20px;
}
.help-body {
  font-size: 14px;
  line-height: 1.7;
}
.help-body h1 {
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.help-body h2 {
  margin-top: 1.4em;
  font-size: 1.3em;
}
.help-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 10px 0;
}
.help-body th,
.help-body td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
  font-size: 13px;
}
.help-body th {
  background: var(--bg-hover);
}

/* AI 定制命令生成进度弹窗（用户要求 2026-08-24）：无边框、页面中央、
   动态 + 百分比、完成后自动消失 */
.ai-progress-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.ai-progress-box {
  width: 300px;
  padding: 24px 28px;
  background: var(--bg);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ai-progress-spin {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  animation: ai-progress-rotate 0.9s linear infinite;
}
@keyframes ai-progress-rotate {
  to { transform: rotate(360deg); }
}
.ai-progress-text {
  font-size: 13px;
  color: var(--text);
  text-align: center;
  min-height: 18px;
}
.ai-progress-bar {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-hover);
  overflow: hidden;
}
.ai-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width 0.25s ease;
}
.ai-progress-pct {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

/* ---------- 页面无响应恢复提示（用户 2026-08-26：无响应风险点加固） ---------- */
.hang-notice-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(15, 20, 35, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hang-notice {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.3);
  padding: 22px 26px;
  max-width: 420px;
  width: calc(100vw - 48px);
}
.hang-notice-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-strong);
  margin-bottom: 8px;
}
.hang-notice-msg {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.hang-notice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ================= AI 聊天新 tab 页（用户 2026-08-28） ================= */
.tab-name-ai {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent, #4f8cff);
}
.tab-name-ai svg {
  flex: none;
}

.ai-chat-page {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--bg);
}
.ai-chat-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-side);
  flex: none;
}
.ai-chat-topbar-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong);
}
.ai-chat-topbar-title > svg {
  color: var(--accent);
}
.ai-chat-provider {
  max-width: 260px;
}
.ai-chat-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ai-chat-tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.ai-chat-tb-btn:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.ai-chat-tb-btn.active {
  background: var(--accent);
  color: #fff;
}
.ai-chat-tb-btn.danger:hover {
  color: var(--danger, #e5484d);
}

.ai-chat-searchbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-side);
  color: var(--text-dim);
  flex: none;
}
.ai-chat-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 13px;
}
.ai-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.ai-search-clear:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.ai-chat-body {
  display: flex;
  flex: 1;
  min-height: 0;
  position: relative;
}
.ai-chat-sidebar {
  width: 240px;
  flex: none;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg-side);
  min-height: 0;
}
.ai-chat-sidebar-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
}
.ai-chat-new {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  padding: 6px 8px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.ai-chat-new:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}
.ai-chat-sidebar-hide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.ai-chat-sidebar-hide:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.ai-chat-session-search {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}
.ai-chat-session-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 12.5px;
}
.ai-chat-session-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
  min-height: 0;
}
.ai-chat-session-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 7px 8px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text);
  font-size: 12.5px;
  transition: background 0.12s;
}
.ai-chat-session-item:hover {
  background: var(--bg-hover);
}
.ai-chat-session-item.active {
  background: var(--accent-soft, rgba(79, 140, 255, 0.12));
  color: var(--text-strong);
}
.ai-chat-session-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-chat-session-actions {
  display: none;
  align-items: center;
  gap: 2px;
  flex: none;
}
.ai-chat-session-item:hover .ai-chat-session-actions,
.ai-chat-session-item.active .ai-chat-session-actions {
  display: inline-flex;
}
.ai-chat-session-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}
.ai-chat-session-actions button:hover {
  background: var(--bg-hover);
  color: var(--text);
}
.ai-chat-session-empty {
  padding: 16px 8px;
  text-align: center;
  color: var(--text-dim);
  font-size: 12.5px;
}

.ai-chat-sidebar-open {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text-dim);
  cursor: pointer;
}
.ai-chat-sidebar-open:hover {
  color: var(--text);
  border-color: var(--accent);
}

.ai-chat-main {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
}
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px 8px;
  min-height: 0;
}
.ai-chat-messages-noborder .ai-msg {
  border: none;
  box-shadow: none;
}
.ai-chat-messages-noborder .ai-msg .ai-msg-bubble {
  border: none;
  box-shadow: none;
}

/* 空对话：页面中央大输入框（像 DeepSeek 新对话） */
.ai-chat-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  min-height: 0;
  overflow-y: auto;
}
.ai-chat-hero-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-soft, rgba(79, 140, 255, 0.12));
  color: var(--accent);
}
.ai-chat-hero-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-strong);
}
.ai-chat-hero-input {
  position: relative;
  width: min(640px, 90%);
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg-side);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}
.ai-chat-hero-input:focus-within {
  border-color: var(--accent);
}
.ai-chat-hero-ta {
  flex: 1;
  min-height: 60px;
  max-height: 160px;
}
.ai-chat-hero .ai-send {
  width: 36px;
  height: 36px;
  flex: none;
}
.ai-chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  max-width: 640px;
}
.ai-chat-suggestions button {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  color: var(--text-dim);
  font-size: 12.5px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.12s;
}
.ai-chat-suggestions button:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* 有对话：底部输入框（无边框聊天记录） */
.ai-chat-bottom-input {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-side);
  flex: none;
}
.ai-chat-bottom-input .ai-input {
  flex: 1;
  min-width: 0;
}
/* 微信式底部输入条（用户 2026-09）：相机 + 输入/按住说话 + 声波切换 + 加号 */
.ai-ds-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-lighter, rgba(0,0,0,0.03));
  color: var(--text-strong);
  cursor: pointer;
}
.ai-chat-bottom-input .ai-input.ai-ds-input { padding: 8px 10px; }
.ai-ds-hold {
  flex: 1;
  min-width: 0;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--bg-lighter, rgba(0,0,0,0.03));
  color: var(--text-strong);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.ai-ds-hold.busy { background: #e5484d; color: #fff; border-color: #e5484d; }
.ai-ds-plus { color: var(--accent); }
.ai-img-btn {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-lighter, var(--bg-side));
  color: var(--text-secondary, #888);
  cursor: pointer;
  padding: 0;
}
.ai-img-btn:hover { color: var(--accent, #0a66c2); border-color: var(--accent, #0a66c2); }
.ai-call { background: transparent; border: 1px solid var(--border); color: var(--text-secondary, #888); }
.ai-call.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.ai-call.busy { background: #e5484d; border-color: #e5484d; color: #fff; }
/* 录音中：话筒波纹（示意正在收取声音） */
.ai-wave { display: flex; align-items: center; gap: 2px; height: 15px; }
.ai-wave i { width: 3px; height: 5px; background: #fff; border-radius: 1px; animation: ai-wave-b 0.9s ease-in-out infinite; }
.ai-wave i:nth-child(1) { animation-delay: 0s; }
.ai-wave i:nth-child(2) { animation-delay: 0.15s; }
.ai-wave i:nth-child(3) { animation-delay: 0.3s; }
.ai-wave i:nth-child(4) { animation-delay: 0.45s; }
@keyframes ai-wave-b { 0%,100% { height: 5px; } 50% { height: 15px; } }
.ai-call-bar {
  display: flex;
  justify-content: center;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-side);
}
.ai-hold {
  width: 100%;
  max-width: 320px;
  padding: 12px;
  border: 1px solid var(--accent);
  border-radius: 20px;
  background: var(--bg-lighter, rgba(0,0,0,0.03));
  color: var(--accent);
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.ai-hold.busy { background: var(--accent); color: #fff; }
/* 长按输入框语音（DeepSeek 风格）：松手发送，上滑取消 */
.ai-ds-record {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px 0 26px;
  /* 录音全程红色渐变（DeepSeek 风格，用户 2026-09）：底部深红渐变到透明 */
  background: linear-gradient(to top, #ffd7e0 0%, #ffeef2 60%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.ai-ds-record-label { font-size: 14px; color: #e5484d; font-weight: 600; }
.ai-ds-wave { display: flex; align-items: center; gap: 3px; height: 30px; }
.ai-ds-wave i { width: 3px; height: 6px; background: #e5484d; border-radius: 2px; animation: ai-ds-w 0.9s ease-in-out infinite; }
.ai-ds-wave i:nth-child(1){animation-delay:0s} .ai-ds-wave i:nth-child(2){animation-delay:.1s}
.ai-ds-wave i:nth-child(3){animation-delay:.2s} .ai-ds-wave i:nth-child(4){animation-delay:.3s}
.ai-ds-wave i:nth-child(5){animation-delay:.4s} .ai-ds-wave i:nth-child(6){animation-delay:.5s}
.ai-ds-wave i:nth-child(7){animation-delay:.6s} .ai-ds-wave i:nth-child(8){animation-delay:.7s}
.ai-ds-wave i:nth-child(9){animation-delay:.8s} .ai-ds-wave i:nth-child(10){animation-delay:.1s}
.ai-ds-wave i:nth-child(11){animation-delay:.2s} .ai-ds-wave i:nth-child(12){animation-delay:.3s}
@keyframes ai-ds-w { 0%,100% { height: 6px; } 50% { height: 30px; } }
.ai-screen-err {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 0 16px;
  font-size: 12.5px;
  color: var(--text-secondary, #888);
  background: var(--bg-lighter, rgba(0,0,0,0.03));
  border-radius: 8px;
}
.ai-screen-err .ai-screen-open {
  white-space: nowrap;
  border: 1px solid var(--accent, #0a66c2);
  color: var(--accent, #0a66c2);
  background: transparent;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}
.ai-spin { display: inline-block; animation: ai-spin 0.9s linear infinite; }
@keyframes ai-spin { to { transform: rotate(360deg); } }
.ai-chat-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-side);
  flex: none;
  font-size: 11.5px;
}
.ai-chat-foot .ai-foot-hint {
  flex: 1;
  text-align: center;
  color: var(--text-dim);
}

/* 演示圈画画布 */
.ai-chat-draw-canvas {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: auto;
  cursor: crosshair;
  background: transparent;
}

/* 长按消息 → 上下文菜单（全选 / 复制 / 删除） */
.ai-ctx-mask {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: transparent;
}
.ai-ctx-menu {
  position: fixed;
  z-index: 61;
  display: flex;
  flex-direction: column;
  min-width: 130px;
  padding: 6px;
  border-radius: 12px;
  background: var(--bg-editor);
  border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}
.ai-ctx-menu button {
  display: flex;
  align-items: center;
  padding: 11px 14px;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 14.5px;
  text-align: left;
  border-radius: 8px;
}
.ai-ctx-menu button:active {
  background: var(--bg-active);
}
.ai-ctx-menu button.ai-ctx-danger {
  color: #e5484d;
}