@charset 'UTF-8';@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2) format("woff2"),url(/assets/KaTeX_AMS-Regular-DMm9YOAa.woff) format("woff"),url(/assets/KaTeX_AMS-Regular-DRggAlZN.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2) format("woff2"),url(/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff) format("woff"),url(/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff) format("woff"),url(/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2) format("woff2"),url(/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff) format("woff"),url(/assets/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(/assets/KaTeX_Main-Bold-Cx986IdX.woff2) format("woff2"),url(/assets/KaTeX_Main-Bold-Jm3AIy58.woff) format("woff"),url(/assets/KaTeX_Main-Bold-waoOVXN0.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2) format("woff2"),url(/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff) format("woff"),url(/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2) format("woff2"),url(/assets/KaTeX_Main-Italic-BMLOBm91.woff) format("woff"),url(/assets/KaTeX_Main-Italic-3WenGoN9.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Main-Regular-B22Nviop.woff2) format("woff2"),url(/assets/KaTeX_Main-Regular-Dr94JaBh.woff) format("woff"),url(/assets/KaTeX_Main-Regular-ypZvNtVU.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2) format("woff2"),url(/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff) format("woff"),url(/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/assets/KaTeX_Math-Italic-t53AETM-.woff2) format("woff2"),url(/assets/KaTeX_Math-Italic-DA0__PXp.woff) format("woff"),url(/assets/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(/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff) format("woff"),url(/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff) format("woff"),url(/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2) format("woff2"),url(/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff) format("woff"),url(/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Script-Regular-D3wIWfF6.woff2) format("woff2"),url(/assets/KaTeX_Script-Regular-D5yQViql.woff) format("woff"),url(/assets/KaTeX_Script-Regular-C5JkGWo-.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2) format("woff2"),url(/assets/KaTeX_Size1-Regular-C195tn64.woff) format("woff"),url(/assets/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(/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2) format("woff2"),url(/assets/KaTeX_Size2-Regular-oD1tc_U0.woff) format("woff"),url(/assets/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(/assets/KaTeX_Size3-Regular-CTq5MqoE.woff) format("woff"),url(/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2) format("woff2"),url(/assets/KaTeX_Size4-Regular-BF-4gkZK.woff) format("woff"),url(/assets/KaTeX_Size4-Regular-DWFBv043.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2) format("woff2"),url(/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff) format("woff"),url(/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.16.37"}.katex .katex-mathml{clip:rect(1px,1px,1px,1px);border:0;height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.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 .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{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 .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.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 .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.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 .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.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 .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>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("/assets/material-symbols-rounded-D2wG73um.woff2") format("woff2");
}
.material-symbols-rounded {
  font-family: "Material Symbols Rounded";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
}
/* ============================================
   PHOTON BUTTON2
   Styling via scoped CSS custom properties.
   Variant sets colors, size sets dimensions,
   color modifies hue — all orthogonal.
   ============================================ */

/* ── Base ──────────────────────────────────── */

.ph-btn {
  /* Reset */
  appearance: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: none;

  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_gap);
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  white-space: nowrap;
  box-sizing: border-box;

  /* Rendered from private vars */
  height: var(--_height);
  padding-inline: var(--_px);
  border-radius: var(--_radius, var(--ph-ref-shape-md));
  background: var(--_bg);
  color: var(--_text);
  border: var(--_border-w, 0px) solid var(--_border-c, transparent);
  box-shadow: var(--_shadow, none);
  font-family: var(--_font, var(--ph-ref-typeface-base, sans-serif));
  font-size: var(--_fs);
  font-weight: var(--_fw, 600);
  letter-spacing: 0.01em;

  /* Transition */
  transition:
    background var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, ease),
    border-color var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, ease),
    box-shadow var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, ease),
    opacity var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, ease);
}

.ph-btn[data-full-width] {
  width: 100%;
}

/* ── State Layer (::before) ────────────────── */

.ph-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--_state-color, var(--_text));
  opacity: 0;
  transition: opacity var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, ease);
  pointer-events: none;
}

.ph-btn:hover::before {
  opacity: var(--ph-sys-state-hover-opacity, 0.08);
}

.ph-btn:focus-visible::before {
  opacity: var(--ph-sys-state-focus-opacity, 0.10);
}

.ph-btn:active::before {
  opacity: var(--ph-sys-state-active-opacity, 0.10);
}

/* Focus ring */
.ph-btn:focus-visible {
  outline: var(--ph-sys-focus-ring-width, 2px) solid var(--ph-sys-focus-ring-color, var(--_text));
  outline-offset: var(--ph-sys-focus-ring-offset, 2px);
}

/* ── Size ──────────────────────────────────── */

.ph-btn[data-size='sm'] {
  --_height: 28px;
  --_px:     12px;
  --_fs:     12px;
  --_gap:    4px;
}

.ph-btn[data-size='md'] {
  --_height: 36px;
  --_px:     18px;
  --_fs:     13px;
  --_gap:    8px;
}

.ph-btn[data-size='lg'] {
  --_height: 40px;
  --_px:     24px;
  --_fs:     14px;
  --_gap:    8px;
}

/* ── Variant: Filled ───────────────────────── */

.ph-btn[data-variant='filled'] {
  --_bg:          var(--ph-primary);
  --_text:        var(--ph-on-primary);
  --_shadow:      var(--ph-sys-elevation-0, none);
}

/* ── Variant: Tonal ────────────────────────── */

.ph-btn[data-variant='tonal'] {
  --_bg:          var(--ph-primary-container);
  --_text:        var(--ph-on-primary-container);
  --_shadow:      var(--ph-sys-elevation-0, none);
}

.ph-btn[data-variant='tonal']:hover {
  --_shadow: var(--ph-sys-elevation-1);
}

/* ── Variant: Elevated ─────────────────────── */

.ph-btn[data-variant='elevated'] {
  --_bg:          var(--ph-surface-container-low);
  --_text:        var(--ph-primary);
  --_shadow:      var(--ph-sys-elevation-1);
}

.ph-btn[data-variant='elevated']:hover {
  --_shadow: var(--ph-sys-elevation-2);
}

/* ── Variant: Outlined ─────────────────────── */

.ph-btn[data-variant='outlined'] {
  --_bg:          transparent;
  --_text:        var(--ph-primary);
  --_border-w:    var(--ph-ref-border-md, 1.5px);
  --_border-c:    var(--ph-outline-variant);
  --_shadow:      none;
}

/* ── Variant: Text ─────────────────────────── */

.ph-btn[data-variant='text'] {
  --_bg:          transparent;
  --_text:        var(--ph-primary);
  --_shadow:      none;
}

/* Reduced padding for text variant */
.ph-btn[data-variant='text'][data-size='sm'] { --_px: 8px; }
.ph-btn[data-variant='text'][data-size='md'] { --_px: 12px; }
.ph-btn[data-variant='text'][data-size='lg'] { --_px: 16px; }


/* ═══════════════════════════════════════════
   COLOR MODIFIERS
   Only override color-related vars.
   ═══════════════════════════════════════════ */

/* ── Primary (default, mostly no-ops) ──────── */

/* Outlined + primary: tinted border */
.ph-btn[data-variant='outlined'][data-color='primary'] {
  --_border-c: var(--ph-border-accent-1);
}

/* ── Secondary ─────────────────────────────── */

.ph-btn[data-variant='filled'][data-color='secondary'] {
  --_bg:   var(--ph-secondary);
  --_text: var(--ph-on-secondary);
}

.ph-btn[data-variant='tonal'][data-color='secondary'] {
  --_bg:   var(--ph-secondary-container);
  --_text: var(--ph-on-secondary-container);
}

.ph-btn[data-variant='elevated'][data-color='secondary'],
.ph-btn[data-variant='outlined'][data-color='secondary'],
.ph-btn[data-variant='text'][data-color='secondary'] {
  --_text: var(--ph-secondary);
}

.ph-btn[data-variant='outlined'][data-color='secondary'] {
  --_border-c: var(--ph-outline-variant);
}

/* ── Tertiary ──────────────────────────────── */

.ph-btn[data-variant='filled'][data-color='tertiary'] {
  --_bg:   var(--ph-tertiary);
  --_text: var(--ph-on-tertiary);
}

.ph-btn[data-variant='tonal'][data-color='tertiary'] {
  --_bg:   var(--ph-tertiary-container);
  --_text: var(--ph-on-tertiary-container);
}

.ph-btn[data-variant='elevated'][data-color='tertiary'],
.ph-btn[data-variant='outlined'][data-color='tertiary'],
.ph-btn[data-variant='text'][data-color='tertiary'] {
  --_text: var(--ph-tertiary);
}

.ph-btn[data-variant='outlined'][data-color='tertiary'] {
  --_border-c: var(--ph-outline-variant);
}

/* ── Error ─────────────────────────────────── */

.ph-btn[data-variant='filled'][data-color='error'] {
  --_bg:   var(--ph-error);
  --_text: var(--ph-on-error);
}

.ph-btn[data-variant='tonal'][data-color='error'] {
  --_bg:   var(--ph-error-container);
  --_text: var(--ph-on-error-container);
}

.ph-btn[data-variant='elevated'][data-color='error'],
.ph-btn[data-variant='outlined'][data-color='error'],
.ph-btn[data-variant='text'][data-color='error'] {
  --_text: var(--ph-error);
}

.ph-btn[data-variant='outlined'][data-color='error'] {
  --_border-c: var(--ph-error);
}


/* ═══════════════════════════════════════════
   DISABLED STATE
   ═══════════════════════════════════════════ */

.ph-btn[data-disabled] {
  pointer-events: none;
  cursor: not-allowed;
  --_shadow: none;
}

/* Filled/tonal/elevated disabled: muted bg + muted text.
   Uses sys disabled tokens so dark mode can increase opacity. */
.ph-btn[data-variant='filled'][data-disabled],
.ph-btn[data-variant='tonal'][data-disabled],
.ph-btn[data-variant='elevated'][data-disabled] {
  --_bg:   var(--ph-sys-state-disabled-container);
  --_text: var(--ph-sys-state-disabled-content);
}

/* Outlined disabled: muted border + muted text, no bg */
.ph-btn[data-variant='outlined'][data-disabled] {
  --_bg:       transparent;
  --_text:     var(--ph-sys-state-disabled-content);
  --_border-c: var(--ph-sys-state-disabled-outline);
}

/* Text disabled: muted text, no bg */
.ph-btn[data-variant='text'][data-disabled] {
  --_bg:   transparent;
  --_text: var(--ph-sys-state-disabled-content);
}

/* No state layer on disabled */
.ph-btn[data-disabled]::before {
  display: none;
}


/* ═══════════════════════════════════════════
   ICON MODE
   Square button, icon as child, no label.
   ═══════════════════════════════════════════ */

.ph-btn[data-mode='icon'] {
  --_px: 0px;
  width: var(--_height);
  flex-shrink: 0;
}

/* Icon mode sizes — icon fills more of the container */
.ph-btn[data-mode='icon'][data-size='sm'] .ph-btn__icon { width: 16px; height: 16px; }
.ph-btn[data-mode='icon'][data-size='md'] .ph-btn__icon { width: 20px; height: 20px; }
.ph-btn[data-mode='icon'][data-size='lg'] .ph-btn__icon { width: 22px; height: 22px; }


/* ═══════════════════════════════════════════
   SUB-ELEMENTS
   ═══════════════════════════════════════════ */

.ph-btn__label {
  position: relative; /* above state layer */
  z-index: 1;
}

.ph-btn__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ph-btn[data-size='sm'] .ph-btn__icon { width: 16px; height: 16px; }
.ph-btn[data-size='md'] .ph-btn__icon { width: 18px; height: 18px; }
.ph-btn[data-size='lg'] .ph-btn__icon { width: 20px; height: 20px; }

.ph-btn__icon > svg,
.ph-btn__icon > img {
  width: 100%;
  height: 100%;
}

/* ── Spinner ───────────────────────────────── */

.ph-btn__spinner {
  animation: ph-btn-spin 0.8s linear infinite;
}

.ph-btn__spinner circle {
  stroke: currentColor;
  stroke-dasharray: 40 60;
  stroke-linecap: round;
}

@keyframes ph-btn-spin {
  to { transform: rotate(360deg); }
}
.text[data-variant='title-sm'] {
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
/* ============================================
   PHOTON CHECKBOX — Scoped CSS Variables
   Same pattern as Button and Input (v2).
   ============================================ */

/* ── Wrapper (label row) ──────────────────────── */

.ph-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.ph-checkbox[data-disabled='true'] {
  cursor: default;
  pointer-events: none;
}

/* ── Box ──────────────────────────────────────── */

.ph-checkbox__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--_box);
  height: var(--_box);
  border-radius: var(--_radius);
  border: var(--_border-w) solid var(--_border-c);
  background: var(--_bg);
  transition: all 0.15s var(--ph-sys-motion-easing-standard, ease);
}

/* ── Sizes ────────────────────────────────────── */

.ph-checkbox[data-size='sm'] {
  --_box: 16px;
  --_radius: 4px;
  --_border-w: var(--ph-ref-border-md, 1.5px);
  --_check-size: 10px;
  --_check-stroke: 2;
  --_label-fs: 12px;
}

.ph-checkbox[data-size='md'] {
  --_box: 18px;
  --_radius: 5px;
  --_border-w: var(--ph-ref-border-md, 1.5px);
  --_check-size: 11px;
  --_check-stroke: 2;
  --_label-fs: 13px;
}

.ph-checkbox[data-size='lg'] {
  --_box: 22px;
  --_radius: 6px;
  --_border-w: var(--ph-ref-border-lg, 2px);
  --_check-size: 12px;
  --_check-stroke: 2.2;
  --_label-fs: 13px;
}

/* ── Unchecked state ──────────────────────────── */

.ph-checkbox__box {
  --_bg: var(--ph-surface-container-lowest, white);
  --_border-c: var(--ph-outline-variant);
  --_icon-color: transparent;
}

/* Unchecked hover */
.ph-checkbox:hover:not([data-disabled='true']) .ph-checkbox__box:not([data-checked='true']):not([data-indeterminate='true']) {
  --_bg: var(--ph-surface-container, oklch(95% 0.004 321));
  --_border-c: var(--ph-on-surface-variant);
}

/* ── Checked / indeterminate state ────────────── */

.ph-checkbox__box[data-checked='true'],
.ph-checkbox__box[data-indeterminate='true'] {
  --_bg: var(--ph-primary);
  --_border-w: 0px;
  --_border-c: transparent;
  --_icon-color: var(--ph-on-primary, white);
}

/* ── Disabled ─────────────────────────────────── */

.ph-checkbox[data-disabled='true'] .ph-checkbox__box {
  --_bg: var(--ph-sys-state-disabled-container);
  --_border-c: var(--ph-sys-state-disabled-outline);
}

.ph-checkbox[data-disabled='true'] .ph-checkbox__box[data-checked='true'],
.ph-checkbox[data-disabled='true'] .ph-checkbox__box[data-indeterminate='true'] {
  --_bg: var(--ph-sys-state-disabled-container);
  --_border-w: 0px;
  --_icon-color: var(--ph-sys-state-disabled-content);
}

/* ── Icon ─────────────────────────────────────── */

.ph-checkbox__icon {
  width: var(--_check-size, 11px);
  height: var(--_check-size, 11px);
  color: var(--_icon-color);
}

/* ── Hidden native input (accessibility) ──────── */

.ph-checkbox__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus ring from keyboard nav */
.ph-checkbox__input:focus-visible + .ph-checkbox__box {
  outline: 2px solid var(--ph-primary);
  outline-offset: 2px;
}

/* ── Label ────────────────────────────────────── */

.ph-checkbox__label {
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: var(--_label-fs, 13px);
  font-weight: 500;
  color: var(--ph-on-surface-variant);
}

.ph-checkbox[data-disabled='true'] .ph-checkbox__label {
  color: var(--ph-sys-state-disabled-content);
}
/* ============================================
   PHOTON INPUT COMPONENT — Scoped CSS Variables
   Following the same pattern as Button (v2).
   All visual properties controlled by --_ private vars.
   ============================================ */

/* ── Base wrapper ─────────────────────────────── */

.ph-input-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ── Input container (base) ───────────────────── */

.ph-input-container,
.ph-textarea-container {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  height: var(--_height);
  padding-inline: var(--_px);
  gap: var(--_icon-gap);
  background: var(--_bg);
  border: var(--_border-w) solid var(--_border-c);
  border-radius: var(--_radius, var(--ph-ref-shape-md));
  font-family: var(--_font, var(--ph-ref-typeface-base, 'DM Sans', sans-serif));
  transition:
    border-color var(--ph-sys-motion-duration-short, 100ms)
      var(--ph-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
    box-shadow 200ms
      var(--ph-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.ph-textarea-container {
  align-items: flex-start;
  height: auto;
  min-height: 80px;
  padding-inline: 0; /* padding moved to textarea element so resize handle aligns with border */
}

/* ── Sizes (shared across variants) ───────────── */

.ph-input-container[data-size='sm'],
.ph-textarea-container[data-size='sm'] {
  --_height: 28px;
  --_px: 8px;
  --_fs: 12px;
  --_icon-size: 16px;
  --_icon-gap: 6px;
  --_radius: var(--ph-ref-shape-sm, 4px);
  --_py: 6px;
}

.ph-input-container[data-size='md'],
.ph-textarea-container[data-size='md'] {
  --_height: 36px;
  --_px: 12px;
  --_fs: 13px;
  --_icon-size: 18px;
  --_icon-gap: 8px;
  --_py: 9px;
}

.ph-input-container[data-size='lg'],
.ph-textarea-container[data-size='lg'] {
  --_height: 40px;
  --_px: 12px;
  --_fs: 13px;
  --_icon-size: 20px;
  --_icon-gap: 8px;
  --_py: 10px;
}

/* ── Variant: Outlined (default) ──────────────── */

.ph-input-container[data-variant='outlined'],
.ph-textarea-container[data-variant='outlined'] {
  --_bg: var(--ph-surface-container-lowest, white);
  --_text: var(--ph-on-surface);
  --_border-w: var(--ph-ref-border-md, 1.5px);
  --_border-c: var(--ph-outline-variant);
  --_placeholder: var(--ph-on-surface-variant);
  --_caret: var(--ph-primary);
  --_icon-color: var(--ph-on-surface-variant);
}

/* Outlined — hover */
.ph-input-container[data-variant='outlined']:hover:not([data-disabled='true']):not(:focus-within),
.ph-textarea-container[data-variant='outlined']:hover:not([data-disabled='true']):not(:focus-within) {
  --_border-c: var(--ph-on-surface);
}

/* Outlined — focus
 *
 * On focus we hide the container's own border (transparent) and use a single
 * box-shadow halo around the container as the focus indicator. Showing both
 * a primary-coloured container border AND a halo reads as a duplicated
 * border — the halo alone is enough. */
.ph-input-container[data-variant='outlined']:focus-within:not([data-disabled='true']):not([data-error='true']),
.ph-textarea-container[data-variant='outlined']:focus-within:not([data-disabled='true']):not([data-error='true']) {
  --_border-c: transparent;
  box-shadow: 0 0 0 var(--_border-w, 1.5px) var(--ph-primary);
}

/* Outlined — error */
.ph-input-container[data-variant='outlined'][data-error='true'],
.ph-textarea-container[data-variant='outlined'][data-error='true'] {
  --_border-c: var(--ph-error);
  box-shadow: inset 0 0 0 0.5px var(--ph-error);
}

/* Outlined — disabled */
.ph-input-container[data-variant='outlined'][data-disabled='true'],
.ph-textarea-container[data-variant='outlined'][data-disabled='true'] {
  --_border-c: var(--ph-sys-state-disabled-outline);
  --_bg: var(--ph-surface-container, oklch(98% 0.004 321));
  pointer-events: none;
}

/* ── Variant: Filled ──────────────────────────── */

.ph-input-container[data-variant='filled'],
.ph-textarea-container[data-variant='filled'] {
  --_bg: var(--ph-surface-container-highest);
  --_text: var(--ph-on-surface);
  --_border-w: 0px;
  --_border-c: transparent;
  --_placeholder: var(--ph-on-surface-variant);
  --_caret: var(--ph-primary);
  --_icon-color: var(--ph-on-surface-variant);
  border-radius: var(--_radius, var(--ph-ref-shape-md)) var(--_radius, var(--ph-ref-shape-md)) 0 0;
  border-bottom: var(--ph-ref-border-sm, 1px) solid var(--ph-on-surface-variant);
}

/* Filled — state layer for hover */
.ph-input-container[data-variant='filled']::before,
.ph-textarea-container[data-variant='filled']::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--ph-on-surface);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ph-sys-motion-duration-short, 100ms)
    var(--ph-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));
}

.ph-input-container[data-variant='filled']:hover:not([data-disabled='true'])::before,
.ph-textarea-container[data-variant='filled']:hover:not([data-disabled='true'])::before {
  opacity: var(--ph-sys-state-hover-opacity, 0.08);
}

/* Filled — hover */
.ph-input-container[data-variant='filled']:hover:not([data-disabled='true']),
.ph-textarea-container[data-variant='filled']:hover:not([data-disabled='true']) {
  border-bottom-color: var(--ph-on-surface);
}

/* Filled — focus */
.ph-input-container[data-variant='filled']:focus-within:not([data-disabled='true']):not([data-error='true']),
.ph-textarea-container[data-variant='filled']:focus-within:not([data-disabled='true']):not([data-error='true']) {
  border-bottom-color: var(--ph-primary);
  box-shadow: inset 0 -1px 0 0 var(--ph-primary);
}

/* Filled — error */
.ph-input-container[data-variant='filled'][data-error='true'],
.ph-textarea-container[data-variant='filled'][data-error='true'] {
  border-bottom-color: var(--ph-error);
  box-shadow: inset 0 -1px 0 0 var(--ph-error);
}

/* Filled — disabled */
.ph-input-container[data-variant='filled'][data-disabled='true'],
.ph-textarea-container[data-variant='filled'][data-disabled='true'] {
  background-color: color-mix(in oklch, var(--ph-on-surface) 4%, transparent);
  border-bottom-color: var(--ph-sys-state-disabled-outline);
  pointer-events: none;
}

/* ── Input element ────────────────────────────── */

.ph-input-element {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--_fs);
  font-weight: var(--_fw, 400);
  color: var(--_text);
  caret-color: var(--_caret, var(--ph-primary));
  position: relative;
  z-index: 1;
}

.ph-input-element::placeholder {
  color: var(--_placeholder, var(--ph-on-surface-variant));
}

/* Disabled text */
.ph-input-container[data-disabled='true'] .ph-input-element,
.ph-textarea-container[data-disabled='true'] .ph-input-element {
  color: var(--ph-sys-state-disabled-content);
  cursor: not-allowed;
}

.ph-input-container[data-disabled='true'] .ph-input-element::placeholder,
.ph-textarea-container[data-disabled='true'] .ph-input-element::placeholder {
  color: var(--ph-sys-state-disabled-content);
}

/* Error caret */
.ph-input-container[data-error='true'] .ph-input-element,
.ph-textarea-container[data-error='true'] .ph-input-element {
  caret-color: var(--ph-error);
}

/* Textarea specific — padding on element so resize handle sits at container edge */
textarea.ph-input-element {
  resize: vertical;
  min-height: 60px;
  padding-block: var(--_py, 9px);
  padding-inline: var(--_px, 12px);
  line-height: 1.5;
}

/* ── Icons ────────────────────────────────────── */

.ph-input__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--_icon-size, 18px);
  height: var(--_icon-size, 18px);
  color: var(--_icon-color, var(--ph-on-surface-variant));
  position: relative;
  z-index: 1;
}

.ph-input__icon svg,
.ph-input__icon img {
  width: 100%;
  height: 100%;
}

/* Disabled icon */
.ph-input-container[data-disabled='true'] .ph-input__icon,
.ph-textarea-container[data-disabled='true'] .ph-input__icon {
  color: var(--ph-sys-state-disabled-content);
}

/* Error icon */
.ph-input__icon--error {
  color: var(--ph-error);
}

/* ── Label ────────────────────────────────────── */

.ph-input__label {
  display: block;
  margin-block-end: 4px;
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-on-surface-variant);
}

.ph-input-wrapper:has(.ph-input-container:focus-within) .ph-input__label,
.ph-input-wrapper:has(.ph-textarea-container:focus-within) .ph-input__label {
  color: var(--ph-primary);
}

.ph-input-wrapper[data-error='true'] .ph-input__label {
  color: var(--ph-error);
}

.ph-input-wrapper[data-disabled='true'] .ph-input__label {
  color: var(--ph-sys-state-disabled-content);
}

/* ── Supporting text (helper / error) ─────────── */

.ph-input__supporting-text {
  display: block;
  margin-block-start: 4px;
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 11px;
  color: var(--ph-on-surface-variant);
}

.ph-input-wrapper[data-error='true'] .ph-input__supporting-text {
  color: var(--ph-error);
}

.ph-input-wrapper[data-disabled='true'] .ph-input__supporting-text {
  color: var(--ph-sys-state-disabled-content);
}

/* ── Focus ring (keyboard accessibility) ──────── */

.ph-input-container:focus-within,
.ph-textarea-container:focus-within {
  outline: var(--ph-sys-focus-ring-width, 2px) solid transparent;
  outline-offset: var(--ph-sys-focus-ring-offset, 2px);
}
/* ============================================
   PHOTON ICON BUTTON — Scoped CSS Variables
   Same pattern as Button (v2).
   ============================================ */

/* ── Base ────────────────────────────────────── */

.ph-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  width: var(--_size);
  height: var(--_size);
  border: var(--_border-w, 0px) solid var(--_border-c, transparent);
  border-radius: var(--_radius);
  background: var(--_bg);
  color: var(--_text);
  cursor: pointer;
  overflow: hidden;
  padding: 0;
  margin: 0;
  font: inherit;
  outline: none;
  transition:
    background-color var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, ease),
    border-color var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, ease),
    box-shadow 200ms var(--ph-sys-motion-easing-standard, ease),
    transform 100ms ease;
}

.ph-icon-btn:active:not([data-disabled]) {
  transform: scale(0.95);
}

/* ── State layer (hover/focus overlay) ───────── */

.ph-icon-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--_text);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ph-sys-motion-duration-short, 100ms) var(--ph-sys-motion-easing-standard, ease);
}

.ph-icon-btn:hover:not([data-disabled])::before {
  opacity: var(--ph-sys-state-hover-opacity, 0.08);
}

.ph-icon-btn:focus-visible::before {
  opacity: var(--ph-sys-state-focus-opacity, 0.10);
}

.ph-icon-btn:active:not([data-disabled])::before {
  opacity: var(--ph-sys-state-active-opacity, 0.10);
}

/* ── Icon container ──────────────────────────── */

.ph-icon-btn__icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_icon-size);
  height: var(--_icon-size);
  line-height: 0;
  z-index: 1;
}

.ph-icon-btn__icon > * {
  width: 100%;
  height: 100%;
}

/* ── Sizes ───────────────────────────────────── */

.ph-icon-btn[data-size='sm'] {
  --_size: 28px;
  --_icon-size: 16px;
}

.ph-icon-btn[data-size='md'] {
  --_size: 36px;
  --_icon-size: 20px;
}

.ph-icon-btn[data-size='lg'] {
  --_size: 44px;
  --_icon-size: 24px;
}

/* ── Shapes ──────────────────────────────────── */

.ph-icon-btn[data-shape='pill'] {
  --_radius: var(--ph-sys-shape-full, 9999px);
}

.ph-icon-btn[data-shape='squared'] {
  --_radius: max(var(--ph-sys-shape-card, 6px), 6px);
}

/* ── Variant: Outlined (default) ─────────────── */

.ph-icon-btn[data-variant='outlined'] {
  --_bg: transparent;
  --_text: var(--ph-on-surface-variant);
  --_border-w: var(--ph-ref-border-md, 1px);
  --_border-c: var(--ph-outline-variant);
}

.ph-icon-btn[data-variant='outlined']:hover:not([data-disabled]) {
  --_border-c: var(--ph-outline);
}

/* ── Variant: Filled ─────────────────────────── */

.ph-icon-btn[data-variant='filled'] {
  --_bg: var(--ph-primary);
  --_text: var(--ph-on-primary);
}

/* ── Variant: Tonal ──────────────────────────── */

.ph-icon-btn[data-variant='tonal'] {
  --_bg: var(--ph-primary-container);
  --_text: var(--ph-on-primary-container);
}

/* ── Variant: Text ───────────────────────────── */

.ph-icon-btn[data-variant='text'] {
  --_bg: transparent;
  --_text: var(--ph-on-surface-variant);
  --_border-w: 0px;
}

/* ── Selected state ──────────────────────────── */

.ph-icon-btn[data-selected='true'] {
  --_bg: var(--ph-primary);
  --_text: var(--ph-on-primary);
  --_border-w: 0px;
  --_border-c: transparent;
}

/* ── Disabled ────────────────────────────────── */

.ph-icon-btn[data-disabled] {
  pointer-events: none;
  cursor: not-allowed;
}

.ph-icon-btn[data-variant='filled'][data-disabled],
.ph-icon-btn[data-variant='tonal'][data-disabled] {
  --_bg: var(--ph-sys-state-disabled-container);
  --_text: var(--ph-sys-state-disabled-content);
}

.ph-icon-btn[data-variant='outlined'][data-disabled] {
  --_bg: var(--ph-sys-state-disabled-container);
  --_border-c: var(--ph-sys-state-disabled-outline);
  --_text: var(--ph-sys-state-disabled-content);
}

.ph-icon-btn[data-variant='text'][data-disabled] {
  --_bg: transparent;
  --_text: var(--ph-sys-state-disabled-content);
}

/* No state layer on disabled */
.ph-icon-btn[data-disabled]::before {
  display: none;
}

/* ── Focus ring ──────────────────────────────── */

.ph-icon-btn:focus-visible {
  outline: var(--ph-sys-focus-ring-width, 2px) solid var(--ph-primary);
  outline-offset: var(--ph-sys-focus-ring-offset, 2px);
}

.ph-icon-btn:focus:not(:focus-visible) {
  outline: none;
}

/* ── Reduced motion ──────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ph-icon-btn,
  .ph-icon-btn::before {
    transition-duration: 0.01ms;
  }
  .ph-icon-btn:active:not([data-disabled]) {
    transform: none;
  }
}
.foton-drawer-root {
  /* Kept for consumers that reference this class */
}

/*
 * When callers wrap Drawer.Content + Drawer.Footer inside a <form>, the form
 * sits between the flex panel and the flex children, breaking the stretch chain.
 * Make direct-child forms in the drawer body act as flex columns that fill
 * the remaining height so the footer stays pinned at the bottom.
 */
.foton-drawer-body > form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
/* ============================================
   PHOTON CARD — Scoped CSS Variables (v2)
   Replaces the legacy Card + SectionCard patterns.
   ============================================ */

/* ── Base ────────────────────────────────────── */

.ph-card {
  width: 100%;
  border-radius: var(--_radius, var(--ph-sys-shape-lg, 12px));
  background: var(--_bg);
  color: var(--_text, var(--ph-on-surface));
  border: var(--_border-w, 0px) solid var(--_border-c, transparent);
  overflow: hidden;
}

/* ── Appearance: filled (default) ────────────── */

.ph-card[data-appearance='filled'] {
  --_bg: var(--ph-surface-container-low);
  --_text: var(--ph-on-surface);
  --_border-w: 0px;
}

/* ── Appearance: outline ─────────────────────── */

.ph-card[data-appearance='outline'] {
  --_bg: var(--ph-surface-container-lowest, white);
  --_text: var(--ph-on-surface);
  --_border-w: 1px;
  --_border-c: var(--ph-outline-variant);
}

/* ── Appearance: elevated ────────────────────── */

.ph-card[data-appearance='elevated'] {
  --_bg: var(--ph-surface-container-low);
  --_text: var(--ph-on-surface);
  --_border-w: 0px;
  box-shadow: var(--ph-sys-elevation-1);
}

/* ── Appearance: subtle ──────────────────────── */

.ph-card[data-appearance='subtle'] {
  --_bg: transparent;
  --_text: var(--ph-on-surface);
  --_border-w: 0px;
}

.ph-card[data-appearance='subtle']:hover {
  --_bg: var(--ph-surface-container-lowest);
}

/* ── Clickable ───────────────────────────────── */

.ph-card[data-clickable='true'] {
  cursor: pointer;
  transition: box-shadow 200ms var(--ph-sys-motion-easing-standard, ease);
}

.ph-card[data-clickable='true']:hover {
  box-shadow: var(--ph-sys-elevation-2);
}

/* ── Padding variants ────────────────────────── */

.ph-card__body {
  padding: var(--_py, 16px) var(--_px, 20px);
}

.ph-card[data-padding='compact'] .ph-card__body {
  --_py: 12px;
  --_px: 14px;
}

.ph-card[data-padding='none'] .ph-card__body {
  padding: 0;
}

/* ── Header ──────────────────────────────────── */

.ph-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px var(--_px, 20px);
  border-bottom: 1px solid var(--ph-outline-variant);
  min-height: 0;
}

.ph-card[data-padding='compact'] .ph-card__header {
  padding: 10px 14px;
}

.ph-card__header-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.ph-card__title {
  font-family: var(--ph-ref-typeface-accent, 'Plus Jakarta Sans', sans-serif);
  font-size: var(--_title-fs, 13px);
  font-weight: 700;
  color: var(--ph-on-surface);
  margin: 0;
  min-width: 0;
  truncate: true;
}

.ph-card[data-title-size='sm'] {
  --_title-fs: 12px;
}

.ph-card[data-title-size='md'] {
  --_title-fs: 13px;
}

.ph-card[data-title-size='lg'] {
  --_title-fs: 15px;
}

.ph-card__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 9.5px;
  font-weight: 700;
}

.ph-card__badge[data-tone='primary'] {
  background: color-mix(in oklch, var(--ph-primary) 15%, transparent);
  color: var(--ph-primary);
}

.ph-card__badge[data-tone='secondary'] {
  background: color-mix(in oklch, var(--ph-secondary) 15%, transparent);
  color: var(--ph-secondary);
}

.ph-card__header-action {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Progress bar (in header) ────────────────── */

.ph-card__progress {
  height: 4px;
  padding: 0 var(--_px, 20px) 8px;
}

.ph-card[data-padding='compact'] .ph-card__progress {
  padding: 0 14px 8px;
}

.ph-card__progress-track {
  height: 100%;
  width: 100%;
  border-radius: 9999px;
  background: var(--ph-surface-container, oklch(92% 0.004 321));
  overflow: hidden;
}

.ph-card__progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--ph-primary);
  transition: width 500ms ease-out;
}

/* ── Subtitle ────────────────────────────────── */

.ph-card__subtitle {
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 400;
  color: var(--ph-on-surface-variant);
  margin-top: 2px;
}
.responsive-dialog {
}
.responsive-dialog__wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
}

.responsive-dialog-action-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  min-height: 4rem;
  transition: transform 0.3s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Extra spacing for mobile rounded corners */
  /* background-color: var(--ph-surface-container); */
  /* border-top: 1px solid var(--ph-surface-container-variant); */
}

.dialog-content-wrapper {
  flex: 1;
}
/* settings for mobile */

@media (max-width: 768px) {
  .responsive-dialog__wrapper {
    max-height: calc(100svh - 80px);
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
  }
  .responsive-dialog__wrapper .dialog-content-wrapper {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
  }
  .responsive-dialog__wrapper[data-is-full-height='true'] {
    max-height: calc(100svh);
    height: 100svh;
  }

  .responsive-dialog__wrapper[data-is-full-height='true']
    .dialog-content-wrapper {
    height: 100%;
  }
}

/* Settings for desktop */
@media (min-width: 768px) {
  .responsive-dialog__wrapper {
    max-height: calc(100svh - 80px);
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
  }
}

/* Animation on mobile */
@media (max-width: 768px) {
  .responsive-dialog__wrapper[data-is-open='true'] {
    transform: translateY(0);
  }

  .responsive-dialog__wrapper[data-is-open='false'] {
    transform: translateY(100svh);
  }
}

/* Animation on desktop */
@media (min-width: 768px) {
  .responsive-dialog__wrapper[data-is-open='true'] {
    transform: translateX(0);
  }
  .responsive-dialog__wrapper[data-is-open='false'] {
    transform: translateX(100%);
  }
}
.dialog-content {
  flex: 1;
}
/*
 * Popover
 *
 * Photon tokens used:
 *   --ph-surface           → content background
 *   --ph-on-surface        → content text color
 *   --ph-outline-variant   → border color (softened via color-mix)
 */

.ph-popover {
  width: var(--_width, 200px);
  padding: 12px;
  border-radius: 4px;
  background: var(--ph-surface);
  color: var(--ph-on-surface);
  border: 1px solid
    color-mix(in srgb, var(--ph-outline-variant) 80%, transparent);
  box-shadow:
    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  z-index: 50;
}

.ph-popover[data-state='open'][data-side='top'] {
  animation-name: ph-popover-slideDownAndFade;
}
.ph-popover[data-state='open'][data-side='right'] {
  animation-name: ph-popover-slideLeftAndFade;
}
.ph-popover[data-state='open'][data-side='bottom'] {
  animation-name: ph-popover-slideUpAndFade;
}
.ph-popover[data-state='open'][data-side='left'] {
  animation-name: ph-popover-slideRightAndFade;
}

@keyframes ph-popover-slideUpAndFade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ph-popover-slideRightAndFade {
  from { opacity: 0; transform: translateX(-2px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ph-popover-slideDownAndFade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ph-popover-slideLeftAndFade {
  from { opacity: 0; transform: translateX(2px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* ============================================
   PHOTON DROPDOWN — Action Menu Popover
   Scoped CSS Variables Pattern (v2).
   ============================================ */

/* ── Trigger ─────────────────────────────────── */

.ph-dropdown__trigger {
  cursor: pointer;
}

/* ── Panel (popover) ─────────────────────────── */

.ph-dropdown__panel {
  background: var(--ph-surface-container-lowest, white);
  border: 1px solid var(--ph-outline-variant);
  border-radius: 10px;
  padding: 4px;
  min-width: 180px;
  max-width: 240px;
  z-index: 110;
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.10);
  animation-duration: 200ms;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.ph-dropdown__panel[data-state='open'][data-side='bottom'] {
  animation-name: ph-dropdown-slideUp;
}
.ph-dropdown__panel[data-state='open'][data-side='top'] {
  animation-name: ph-dropdown-slideDown;
}

@keyframes ph-dropdown-slideUp {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ph-dropdown-slideDown {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Item ────────────────────────────────────── */

.ph-dropdown__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 6px;
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--ph-on-surface);
  cursor: pointer;
  outline: none;
  transition: background 0.1s ease;
}

.ph-dropdown__item:hover,
.ph-dropdown__item[data-highlighted] {
  background: var(--ph-surface-container, oklch(96% 0.004 321));
}

/* Danger variant */
.ph-dropdown__item[data-variant='danger'] {
  color: oklch(55% 0.18 25);
}

.ph-dropdown__item[data-variant='danger']:hover,
.ph-dropdown__item[data-variant='danger'][data-highlighted] {
  background: oklch(97% 0.02 25);
}

/* Disabled */
.ph-dropdown__item[data-disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Item parts ──────────────────────────────── */

.ph-dropdown__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 14px;
  flex-shrink: 0;
}

.ph-dropdown__item-label {
  flex: 1;
}

.ph-dropdown__item-shortcut {
  font-family: monospace;
  font-size: 9px;
  color: var(--ph-on-surface-variant);
}

/* ── Divider ─────────────────────────────────── */

.ph-dropdown__separator {
  height: 1px;
  background: var(--ph-outline-variant, oklch(90% 0.004 321));
  margin: 4px 0;
}
/* ============================================
   PHOTON COMBOBOX — Searchable Select
   Scoped CSS Variables Pattern (v2).
   Shares popover spec with Dropdown.
   ============================================ */

/* ── Wrapper ─────────────────────────────────── */

.ph-combobox {
  position: relative;
  width: 100%;
}

/* ── Trigger ─────────────────────────────────── */

.ph-combobox__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  height: var(--_height, 36px);
  padding: 0 30px 0 12px;
  border: var(--_border-w, var(--ph-ref-border-md, 1.5px)) solid var(--_border-c);
  border-radius: var(--_radius, 8px);
  background: var(--_bg);
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: var(--_fs, 13px);
  color: var(--_text);
  cursor: pointer;
  outline: none;
  position: relative;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* ── Sizes ───────────────────────────────────── */

.ph-combobox[data-size='sm'] .ph-combobox__trigger {
  --_height: 28px;
  --_fs: 12px;
}

.ph-combobox[data-size='md'] .ph-combobox__trigger {
  --_height: 36px;
  --_fs: 13px;
}

.ph-combobox[data-size='lg'] .ph-combobox__trigger {
  --_height: 40px;
  --_fs: 13px;
}

/* ── Default state ───────────────────────────── */

.ph-combobox__trigger {
  --_bg: var(--ph-surface-container-lowest, white);
  --_border-w: var(--ph-ref-border-md, 1.5px);
  --_border-c: var(--ph-outline-variant);
  --_text: var(--ph-on-surface);
}

.ph-combobox__trigger[data-placeholder='true'] {
  --_text: var(--ph-on-surface-variant);
}

/* ── Open state ──────────────────────────────── */

.ph-combobox[data-open='true'] .ph-combobox__trigger {
  --_border-c: var(--ph-primary);
  box-shadow:
    inset 0 0 0 0.5px var(--ph-primary),
    0 0 0 3px color-mix(in oklch, var(--ph-primary) 10%, transparent);
}

/* ── Error ───────────────────────────────────── */

.ph-combobox[data-error='true'] .ph-combobox__trigger {
  --_border-c: var(--ph-error);
  box-shadow: inset 0 0 0 0.5px var(--ph-error);
}

/* ── Disabled ────────────────────────────────── */

.ph-combobox[data-disabled='true'] .ph-combobox__trigger {
  --_bg: var(--ph-surface-container, oklch(98% 0.004 321));
  --_border-c: var(--ph-sys-state-disabled-outline);
  --_text: var(--ph-sys-state-disabled-content);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Chevron ─────────────────────────────────── */

.ph-combobox__chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  color: var(--ph-on-surface-variant);
  transition: transform 0.2s ease;
}

.ph-combobox[data-open='true'] .ph-combobox__chevron {
  transform: translateY(-50%) rotate(180deg);
}

/* ── Panel (popover) ─────────────────────────── */

.ph-combobox__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--ph-surface-container-lowest, white);
  border: 1px solid var(--ph-outline-variant);
  border-radius: 10px;
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.10);
  z-index: 110;
  overflow: hidden;
  animation: ph-combobox-slideUp 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ph-combobox-slideUp {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Search bar ──────────────────────────────── */

.ph-combobox__search {
  padding: 8px 8px 4px;
  border-bottom: 1px solid color-mix(in oklch, var(--ph-outline-variant) 60%, transparent);
}

.ph-combobox__search-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--ph-surface-container, oklch(98% 0.004 321));
}

.ph-combobox__search-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--ph-on-surface-variant);
}

.ph-combobox__search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 12px;
  color: var(--ph-on-surface);
}

.ph-combobox__search-input::placeholder {
  color: var(--ph-on-surface-variant);
}

/* ── Options list ────────────────────────────── */

.ph-combobox__options {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
}

/* ── Option item ─────────────────────────────── */

.ph-combobox__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.ph-combobox__option:hover {
  background: var(--ph-surface-container, oklch(96% 0.004 321));
}

.ph-combobox__option[data-selected='true'] {
  background: color-mix(in oklch, var(--ph-primary) 5%, transparent);
}

.ph-combobox__option-content {
  flex: 1;
  min-width: 0;
}

.ph-combobox__option-label {
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--ph-on-surface);
}

.ph-combobox__option[data-selected='true'] .ph-combobox__option-label {
  font-weight: 600;
}

.ph-combobox__option-description {
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 10px;
  color: var(--ph-on-surface-variant);
  margin-top: 1px;
}

.ph-combobox__option-check {
  display: flex;
  flex-shrink: 0;
  color: var(--ph-primary);
}

/* ── Empty state ─────────────────────────────── */

.ph-combobox__empty {
  padding: 12px;
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 12px;
  color: var(--ph-on-surface-variant);
  text-align: center;
}
/* ============================================
   PHOTON MULTI COMBOBOX — Searchable Multi-Select
   Scoped CSS Variables Pattern (v2).
   Shares popover/option spec with Combobox.
   ============================================ */

/* ── Wrapper ─────────────────────────────────── */

.ph-multi-combobox {
  position: relative;
  width: 100%;
}

/* ── Trigger ─────────────────────────────────── */

.ph-multi-combobox__trigger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 4px 30px 4px 8px;
  border: var(--ph-ref-border-md, 1.5px) solid var(--_border-c);
  border-radius: 8px;
  background: var(--_bg);
  cursor: text;
  position: relative;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

/* ── Default state ───────────────────────────── */

.ph-multi-combobox__trigger {
  --_bg: var(--ph-surface-container-lowest, white);
  --_border-c: var(--ph-outline-variant);
}

/* ── Open state ──────────────────────────────── */

.ph-multi-combobox[data-open='true'] .ph-multi-combobox__trigger {
  --_border-c: var(--ph-primary);
  box-shadow:
    inset 0 0 0 0.5px var(--ph-primary),
    0 0 0 3px color-mix(in oklch, var(--ph-primary) 10%, transparent);
}

/* ── Disabled ────────────────────────────────── */

.ph-multi-combobox[data-disabled='true'] .ph-multi-combobox__trigger {
  --_bg: var(--ph-surface-container, oklch(98% 0.004 321));
  --_border-c: var(--ph-sys-state-disabled-outline);
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Chevron ─────────────────────────────────── */

.ph-multi-combobox__chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  color: var(--ph-on-surface-variant);
  transition: transform 0.2s ease;
}

.ph-multi-combobox[data-open='true'] .ph-multi-combobox__chevron {
  transform: translateY(-50%) rotate(180deg);
}

/* ── Chips ───────────────────────────────────── */

.ph-multi-combobox__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 8px;
  border-radius: 5px;
  background: color-mix(in oklch, var(--ph-primary) 10%, transparent);
  color: var(--ph-primary);
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 11px;
  font-weight: 600;
}

.ph-multi-combobox__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  color: var(--ph-primary);
  padding: 0;
}

.ph-multi-combobox__chip-remove:hover {
  background: color-mix(in oklch, var(--ph-primary) 15%, transparent);
}

/* ── Placeholder ─────────────────────────────── */

.ph-multi-combobox__placeholder {
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 13px;
  color: var(--ph-on-surface-variant);
  padding: 2px 4px;
}

/* ── Inline search input ─────────────────────── */

.ph-multi-combobox__input {
  flex: 1;
  min-width: 80px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 12px;
  color: var(--ph-on-surface);
  padding: 2px 4px;
}

.ph-multi-combobox__input::placeholder {
  color: var(--ph-on-surface-variant);
}

/* ── Panel (popover) ─────────────────────────── */

.ph-multi-combobox__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--ph-surface-container-lowest, white);
  border: 1px solid var(--ph-outline-variant);
  border-radius: 10px;
  box-shadow: 0 4px 16px oklch(0% 0 0 / 0.10);
  z-index: 110;
  overflow: hidden;
  animation: ph-multi-combobox-slideUp 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ph-multi-combobox-slideUp {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Options list ────────────────────────────── */

.ph-multi-combobox__options {
  max-height: 200px;
  overflow-y: auto;
  padding: 4px;
}

/* ── Option item (reuses Combobox option styling) */

.ph-multi-combobox__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s ease;
}

.ph-multi-combobox__option:hover {
  background: var(--ph-surface-container, oklch(96% 0.004 321));
}

.ph-multi-combobox__option-label {
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--ph-on-surface);
}

.ph-multi-combobox__option-description {
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 10px;
  color: var(--ph-on-surface-variant);
  margin-top: 1px;
}

/* ── Empty state ─────────────────────────────── */

.ph-multi-combobox__empty {
  padding: 12px;
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 12px;
  color: var(--ph-on-surface-variant);
  text-align: center;
}
/* Slider Styles */
.SliderRoot {
  position: relative;
  display: flex;
  align-items: center;
  user-select: none;
  touch-action: none;
}

/* Horizontal Orientation (default) */
.SliderRoot[data-orientation='horizontal'] {
  width: 100%;
  height: 20px;
}

/* Vertical Orientation */
.SliderRoot[data-orientation='vertical'] {
  flex-direction: column;
  width: 20px;
  height: 100px;
}

/* Track */
.SliderTrack {
  position: relative;
  flex-grow: 1;
  background-color: #e2e8f0;
  border-radius: 4px;
}

.SliderTrack[data-orientation='horizontal'] {
  height: 8px;
}

.SliderTrack[data-orientation='vertical'] {
  width: 8px;
}

/* Range (filled portion) */
.SliderRange {
  position: absolute;
  background-color: #667eea;
  border-radius: 4px;
}

.SliderRange[data-orientation='horizontal'] {
  height: 100%;
}

.SliderRange[data-orientation='vertical'] {
  width: 100%;
}

/* Thumb */
.SliderThumb {
  display: block;
  width: 20px;
  height: 20px;
  background-color: #667eea;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
  transition: all 0.2s;
  cursor: pointer;
}

.SliderThumb:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.6);
}

.SliderThumb:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.2);
}
/*
 * Switch
 *
 * Photon tokens used:
 *   --ph-surface-container-highest → off-state track background
 *   --ph-primary                   → on-state track background
 *   --ph-sys-state-disabled-*      → disabled track + thumb
 *   --ph-primary                   → focus outline
 *
 * Thumb stays white across modes (universal UI convention for toggle thumbs).
 * Override any --_ var via the `style` prop for per-instance theming.
 */

.ph-switch {
  /* Dimensions (md defaults — overridden by data-size) */
  --_track-w: 36px;
  --_track-h: 20px;
  --_thumb: 16px;
  --_pad: 2px;

  /* Colors */
  --_off-bg: var(--ph-surface-container-highest);
  --_on-bg: var(--ph-primary);
  --_thumb-c: #fff;
  --_shadow: 0 1px 3px rgb(0 0 0 / 0.2);

  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: var(--_track-w);
  height: var(--_track-h);
  border: none;
  padding: 0;
  border-radius: 9999px;
  background: var(--_off-bg);
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.ph-switch:focus-visible {
  outline: 2px solid var(--ph-primary);
  outline-offset: 2px;
}

.ph-switch[data-state='checked'] {
  background: var(--_on-bg);
}

.ph-switch:disabled,
.ph-switch[data-disabled] {
  background: var(--ph-sys-state-disabled-container);
  cursor: default;
  pointer-events: none;
}

.ph-switch:disabled .ph-switch__thumb,
.ph-switch[data-disabled] .ph-switch__thumb {
  background: var(--ph-sys-state-disabled-content);
  box-shadow: none;
}

/* Thumb */
.ph-switch__thumb {
  display: block;
  width: var(--_thumb);
  height: var(--_thumb);
  border-radius: 9999px;
  background: var(--_thumb-c);
  box-shadow: var(--_shadow);
  transform: translateX(var(--_pad));
  transition: transform 0.2s ease;
  will-change: transform;
}

.ph-switch__thumb[data-state='checked'] {
  transform: translateX(calc(var(--_track-w) - var(--_thumb) - var(--_pad)));
}

/* ── Sizes ── */
.ph-switch[data-size='sm'] {
  --_track-w: 28px;
  --_track-h: 16px;
  --_thumb: 12px;
}

.ph-switch[data-size='md'] {
  --_track-w: 36px;
  --_track-h: 20px;
  --_thumb: 16px;
}

.ph-switch[data-size='lg'] {
  --_track-w: 42px;
  --_track-h: 25px;
  --_thumb: 21px;
}
.ph-expandable-row {
  background: transparent;
  padding: 0.5rem 0.25rem;
  border-radius: 0.25rem;
}

.ph-expandable-row > button:focus-visible {
  outline: 2px solid var(--ph-primary-container, currentColor);
  outline-offset: 2px;
}

.ph-expandable-row-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.form-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-section-header-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--ph-on-surface-variant);
}

.form-section-header-line {
  flex: 1;
  height: 1px;
  background: var(--ph-outline-variant);
}
/* RadioCard - Theme-based colors with CSS color-mix */

/* Base RadioCard - Default state */
.radio-card {
  /* Colors only - layout handled by Tailwind */
  background-color: var(
    --ph-surface,
    var(--ph-color-surface-background)
  );
  /* Keep hover/selected fills clipped to rounded card shape */
  border-radius: 0.75rem;
  overflow: hidden;
  background-clip: padding-box;
  border-color: color-mix(
    in srgb,
    var(--ph-outline, var(--ph-color-outline-default)) 40%,
    transparent
  );

  /* Ensure min-width for proper grid sizing */
  min-width: 0;
}

/* Hover state - lighten border */
.radio-card:not([data-disabled='true']):hover {
  border-color: var(--ph-outline, var(--ph-color-outline-default));
  box-shadow: 0 2px 8px
    color-mix(in srgb, var(--ph-shadow, #000) 10%, transparent);
}

/* Selected state - Primary (default) */
.radio-card[data-selected='true'][data-color-scheme='primary'],
.radio-card[data-selected='true']:not([data-color-scheme]) {
  background: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 15%,
    white
  );
  border-color: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 80%,
    white
  );
  box-shadow: 0 0 0 1px
    color-mix(
      in oklch,
      var(--ph-primary, var(--ph-color-primary-default)) 80%,
      white
    );
}

.radio-card[data-selected='true'][data-color-scheme='primary']:not(
    [data-disabled='true']
  ):hover,
.radio-card[data-selected='true']:not([data-color-scheme]):not(
    [data-disabled='true']
  ):hover {
  box-shadow: 0 4px 12px
    color-mix(
      in srgb,
      var(--ph-primary, var(--ph-color-primary-default)) 20%,
      transparent
    );
}

/* Selected state - Secondary */
.radio-card[data-selected='true'][data-color-scheme='secondary'] {
  background: color-mix(
    in oklch,
    var(--ph-secondary, var(--ph-color-secondary-default)) 15%,
    white
  );
  border-color: color-mix(
    in oklch,
    var(--ph-secondary, var(--ph-color-secondary-default)) 80%,
    white
  );
  box-shadow: 0 0 0 1px
    color-mix(
      in oklch,
      var(--ph-secondary, var(--ph-color-secondary-default)) 80%,
      white
    );
}

.radio-card[data-selected='true'][data-color-scheme='secondary']:not(
    [data-disabled='true']
  ):hover {
  box-shadow: 0 4px 12px
    color-mix(
      in srgb,
      var(--ph-secondary, var(--ph-color-secondary-default)) 20%,
      transparent
    );
}

/* Selected state - Neutral */
.radio-card[data-selected='true'][data-color-scheme='neutral'] {
  background: var(
    --ph-surface-container-high,
    var(--ph-color-surface-4, #e8e0ec)
  );
  border-color: var(
    --ph-outline,
    var(--ph-color-outline-default, #79747e)
  );
  box-shadow: 0 0 0 1px
    var(
      --ph-outline,
      var(--ph-color-outline-default, #79747e)
    );
}

.radio-card[data-selected='true'][data-color-scheme='neutral']:not(
    [data-disabled='true']
  ):hover {
  box-shadow: 0 4px 12px
    color-mix(
      in srgb,
      var(--ph-outline, var(--ph-color-outline-default, #79747e)) 15%,
      transparent
    );
}

/* Focus state - Primary */
.radio-card[data-color-scheme='primary']:focus-visible,
.radio-card:not([data-color-scheme]):focus-visible {
  border-color: var(--ph-primary, var(--ph-color-primary-default));
  outline: none;
  box-shadow: 0 0 0 3px
    color-mix(
      in srgb,
      var(--ph-primary, var(--ph-color-primary-default)) 20%,
      transparent
    );
}

/* Focus state - Secondary */
.radio-card[data-color-scheme='secondary']:focus-visible {
  border-color: var(
    --ph-secondary,
    var(--ph-color-secondary-default)
  );
  outline: none;
  box-shadow: 0 0 0 3px
    color-mix(
      in srgb,
      var(--ph-secondary, var(--ph-color-secondary-default)) 20%,
      transparent
    );
}

/* Focus state - Neutral */
.radio-card[data-color-scheme='neutral']:focus-visible {
  border-color: var(
    --ph-outline,
    var(--ph-color-outline-default, #79747e)
  );
  outline: none;
  box-shadow: 0 0 0 3px
    color-mix(
      in srgb,
      var(--ph-outline, var(--ph-color-outline-default, #79747e)) 25%,
      transparent
    );
}

/* Active/Pressed state - data attribute driven */
.radio-card:active:not([data-disabled='true']) {
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* Disabled state */
.radio-card[data-disabled='true'] {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Checkmark badge - Primary */
.radio-card[data-color-scheme='primary'] .radio-card__check,
.radio-card:not([data-color-scheme]) .radio-card__check {
  background-color: var(
    --ph-primary,
    var(--ph-color-primary-default)
  );
  color: var(--ph-on-primary, #ffffff);
}

/* Checkmark badge - Secondary */
.radio-card[data-color-scheme='secondary'] .radio-card__check {
  background-color: var(
    --ph-secondary,
    var(--ph-color-secondary-default)
  );
  color: var(--ph-on-secondary, #ffffff);
}

/* Checkmark badge - Neutral */
.radio-card[data-color-scheme='neutral'] .radio-card__check {
  background-color: var(
    --ph-outline,
    var(--ph-color-outline-default, #79747e)
  );
  color: var(--ph-surface, var(--ph-color-surface-background, #fff));
}

/* Icon colors - Default */
.radio-card__icon {
  color: color-mix(
    in srgb,
    var(--ph-on-surface, var(--ph-color-on-surface)) 60%,
    transparent
  );
  transition: color 200ms;
}

/* Icon colors - Selected Primary */
.radio-card[data-selected='true'][data-color-scheme='primary']
  .radio-card__icon,
.radio-card[data-selected='true']:not([data-color-scheme]) .radio-card__icon {
  color: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 100%,
    black
  );
}

/* Icon colors - Selected Secondary */
.radio-card[data-selected='true'][data-color-scheme='secondary']
  .radio-card__icon {
  color: color-mix(
    in oklch,
    var(--ph-secondary, var(--ph-color-secondary-default)) 100%,
    black
  );
}

/* Icon colors - Selected Neutral */
.radio-card[data-selected='true'][data-color-scheme='neutral']
  .radio-card__icon {
  color: var(
    --ph-on-surface,
    var(--ph-color-on-surface, #1c1b1f)
  );
}

/* Label colors - Default */
.radio-card__label {
  color: var(--ph-on-surface, var(--ph-color-on-surface));
  transition: color 200ms;
}

/* Label colors - Selected Primary */
.radio-card[data-selected='true'][data-color-scheme='primary']
  .radio-card__label,
.radio-card[data-selected='true']:not([data-color-scheme]) .radio-card__label {
  color: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 120%,
    black
  );
  font-weight: 600;
}

/* Label colors - Selected Secondary */
.radio-card[data-selected='true'][data-color-scheme='secondary']
  .radio-card__label {
  color: color-mix(
    in oklch,
    var(--ph-secondary, var(--ph-color-secondary-default)) 120%,
    black
  );
  font-weight: 600;
}

/* Label colors - Selected Neutral */
.radio-card[data-selected='true'][data-color-scheme='neutral']
  .radio-card__label {
  color: var(
    --ph-on-surface,
    var(--ph-color-on-surface, #1c1b1f)
  );
  font-weight: 600;
}

/* Description colors - Default */
.radio-card__description {
  color: color-mix(
    in srgb,
    var(--ph-on-surface, var(--ph-color-on-surface)) 60%,
    transparent
  );
  transition: color 200ms;
}

/* Description colors - Selected Primary */
.radio-card[data-selected='true'][data-color-scheme='primary']
  .radio-card__description,
.radio-card[data-selected='true']:not([data-color-scheme])
  .radio-card__description {
  color: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 85%,
    black
  );
}

/* Description colors - Selected Secondary */
.radio-card[data-selected='true'][data-color-scheme='secondary']
  .radio-card__description {
  color: color-mix(
    in oklch,
    var(--ph-secondary, var(--ph-color-secondary-default)) 85%,
    black
  );
}

/* Description colors - Selected Neutral */
.radio-card[data-selected='true'][data-color-scheme='neutral']
  .radio-card__description {
  color: color-mix(
    in srgb,
    var(--ph-on-surface, var(--ph-color-on-surface, #1c1b1f)) 80%,
    transparent
  );
}

/* Checkmark animation */
@keyframes scale-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-scale-in {
  animation: scale-in 200ms cubic-bezier(0.2, 0, 0, 1);
}

/* Grid group - ensure proper layout */
.radio-card-group {
  /* Grid layout handled by Tailwind, just ensure no conflicts */
  display: grid;
}

/* Responsive mobile layout - single column with horizontal card layout */
@media (max-width: 640px) {
  .radio-card-group:not([data-columns]) {
    grid-template-columns: 1fr !important;
  }

  .radio-card {
    flex-direction: row !important;
    justify-content: flex-start !important;
  }

  .radio-card[data-size='sm'] {
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  .radio-card[data-size='md'] {
    padding: 12px 16px !important;
    gap: 12px !important;
  }

  .radio-card[data-size='lg'] {
    padding: 14px 18px !important;
    gap: 14px !important;
  }

  .radio-card[data-size='sm'] .radio-card__icon {
    width: 32px !important;
    height: 32px !important;
  }

  .radio-card[data-size='md'] .radio-card__icon {
    width: 40px !important;
    height: 40px !important;
  }

  .radio-card[data-size='lg'] .radio-card__icon {
    width: 48px !important;
    height: 48px !important;
  }

  .radio-card__content {
    align-items: flex-start !important;
    flex: 1;
  }

  .radio-card__label,
  .radio-card__description {
    text-align: left !important;
  }
}
.pick-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pick-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  border: 1.5px solid
    var(
      --ph-outline-variant,
      var(--ph-color-outline-variant, #d2cdd8)
    );
  border-radius: var(--ph-shape-corner-medium, 10px);
  background: var(
    --ph-surface,
    var(--ph-color-surface-background, #ffffff)
  );
  cursor: pointer !important;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
  padding: 12px 14px;
  user-select: none;
  text-align: left;
  will-change: transform;
}

.pick-card:hover:not([data-disabled='true']):not([disabled]) {
  border-color: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 70%,
    white
  );
  background: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 12%,
    white
  );
  cursor: pointer !important;
}

.pick-card[data-selected='true'] {
  border-color: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 80%,
    white
  );
  background: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 15%,
    white
  );
  box-shadow: 0 0 0 1px
    color-mix(
      in oklch,
      var(--ph-primary, var(--ph-color-primary-default)) 80%,
      white
    );
  cursor: pointer !important;
}

.pick-card:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px
    color-mix(
      in srgb,
      var(--ph-primary, var(--ph-color-primary-default)) 20%,
      transparent
    );
}

.pick-card[data-disabled='true'],
.pick-card[disabled] {
  opacity: 0.45;
  cursor: not-allowed !important;
  pointer-events: none;
}

.pick-card__indicator {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2px solid
    color-mix(
      in srgb,
      var(--ph-on-surface, var(--ph-color-on-surface)) 50%,
      white
    );
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
  margin-top: 1px;
}

.pick-card[data-mode='single'] .pick-card__indicator {
  border-radius: 999px;
}

.pick-card[data-mode='single'][data-selected='true'] .pick-card__indicator {
  border-color: var(--ph-primary, var(--ph-color-primary-default));
  background: var(--ph-primary, var(--ph-color-primary-default));
}

.pick-card[data-mode='single'][data-selected='true']
  .pick-card__indicator::after {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ph-on-primary, #ffffff);
}

.pick-card[data-mode='multi'] .pick-card__indicator {
  border-radius: 6px;
}

.pick-card[data-mode='multi'][data-selected='true'] .pick-card__indicator {
  border-color: var(--ph-primary, var(--ph-color-primary-default));
  background: var(--ph-primary, var(--ph-color-primary-default));
}

.pick-card__indicator svg {
  width: 12px;
  height: 12px;
  color: var(--ph-on-primary, #ffffff);
  opacity: 0;
  transition: opacity 120ms ease;
}

.pick-card[data-selected='true'] .pick-card__indicator svg {
  opacity: 1;
}

.pick-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pick-card__title {
  color: var(--ph-on-surface, var(--ph-color-on-surface));
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

.pick-card[data-selected='true'] .pick-card__title {
  color: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 120%,
    black
  );
}

.pick-card__description {
  font-size: 11.5px;
  font-weight: 500;
  color: color-mix(
    in srgb,
    var(--ph-on-surface, var(--ph-color-on-surface)) 58%,
    transparent
  );
  line-height: 1.35;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pick-card[data-selected='true'] .pick-card__description {
  color: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 78%,
    black
  );
}

.pick-card__content {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 6px;
  color: color-mix(
    in srgb,
    var(--ph-on-surface, var(--ph-color-on-surface)) 70%,
    transparent
  );
}

.pick-card[data-selected='true'] .pick-card__content {
  color: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 90%,
    black
  );
}

.pick-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}

.pick-card__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12px;
  line-height: 1;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid
    color-mix(
      in srgb,
      var(--ph-outline-variant, var(--ph-color-outline-variant)) 70%,
      transparent
    );
  background: color-mix(
    in srgb,
    var(--ph-on-surface, var(--ph-color-on-surface)) 6%,
    white
  );
  color: color-mix(
    in srgb,
    var(--ph-on-surface, var(--ph-color-on-surface)) 62%,
    transparent
  );
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease;
}

.pick-card[data-selected='true'] .pick-card__chip {
  border-color: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 32%,
    white
  );
  background: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 14%,
    white
  );
  color: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 100%,
    black
  );
}

.pick-card__chip[data-tone='accent'] {
  border-color: color-mix(
    in oklch,
    var(--ph-secondary, var(--ph-color-secondary-default)) 35%,
    white
  );
  background: color-mix(
    in oklch,
    var(--ph-secondary, var(--ph-color-secondary-default)) 12%,
    white
  );
  color: color-mix(
    in oklch,
    var(--ph-secondary, var(--ph-color-secondary-default)) 105%,
    black
  );
}

.pick-card[data-selected='true'] .pick-card__chip[data-tone='accent'] {
  border-color: color-mix(
    in oklch,
    var(--ph-secondary, var(--ph-color-secondary-default)) 42%,
    white
  );
  background: color-mix(
    in oklch,
    var(--ph-secondary, var(--ph-color-secondary-default)) 16%,
    white
  );
  color: color-mix(
    in oklch,
    var(--ph-secondary, var(--ph-color-secondary-default)) 112%,
    black
  );
}

.pick-card__end {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: color-mix(
    in srgb,
    var(--ph-on-surface, var(--ph-color-on-surface)) 65%,
    transparent
  );
}

.pick-card[data-selected='true'] .pick-card__end {
  color: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 100%,
    black
  );
}

/* ─── Tile appearance (see PickCard.tsx module doc) ─── */

.pick-card[data-appearance='tile'] {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: 16px 12px;
  min-height: 90px;
  text-align: center;
  border-width: 2px;
  border-style: solid;
}

.pick-card[data-appearance='tile'][data-selected='true'] {
  box-shadow: none;
}

.pick-card[data-appearance='tile'] .pick-card__body {
  flex: 1 1 auto;
  width: 100%;
  align-items: center;
  gap: 6px;
}

.pick-card[data-appearance='tile'] .pick-card__leading {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: color-mix(
    in srgb,
    var(--ph-on-surface, var(--ph-color-on-surface)) 58%,
    transparent
  );
}

.pick-card[data-appearance='tile'][data-selected='true'] .pick-card__leading {
  color: var(--ph-primary, var(--ph-color-primary-default));
}

/* Line-style Material Symbols inside tiles inherit tile state color */
.pick-card[data-appearance='tile'] .pick-card__leading .material-symbols-rounded {
  color: inherit;
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24;
}

.pick-card[data-appearance='tile'] .pick-card__title {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  width: 100%;
  color: color-mix(
    in srgb,
    var(--ph-on-surface, var(--ph-color-on-surface)) 58%,
    transparent
  );
}

.pick-card[data-appearance='tile'][data-selected='true'] .pick-card__title {
  color: color-mix(
    in oklch,
    var(--ph-primary, var(--ph-color-primary-default)) 120%,
    black
  );
}

.pick-card[data-appearance='tile'] .pick-card__description {
  text-align: center;
  -webkit-line-clamp: 3;
}

.pick-card[data-appearance='tile'] .pick-card__footer {
  justify-content: center;
}

.pick-card[data-appearance='tile'] .pick-card__end--tile {
  margin-top: 4px;
  width: 100%;
  justify-content: center;
}

/* PickCards: responsive grid for tile pickers (1 → 2 → 3 columns) */

.pick-cards[data-cards-layout='responsive-grid'] {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .pick-cards[data-cards-layout='responsive-grid'] {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .pick-cards[data-cards-layout='responsive-grid'] {
    grid-template-columns: repeat(3, 1fr);
  }
}
/*
 * SegmentedControl
 *
 * Uses Photon CSS variables (--ph-*):
 *   --ph-surface                  → container background
 *   --ph-primary-container        → active segment background
 *   --ph-seg-on-active            → active segment label/icon (default: neutral100 / white)
 *   --ph-on-surface-variant       → inactive segment text
 *   --ph-outline-variant          → container border
 *   --ph-ref-palette-primary90    → hover tint
 *   --ph-sys-typescale-label-lg-font → segment label font (or --ph-ref-typeface-base)
 */

.segmented-control {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: var(--ph-seg-gap, 3px);
  padding: var(--ph-seg-container-pad, 4px);
  border-radius: var(--ph-seg-radius, 12px);
  background: var(--ph-surface, #ffffff);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.05),
    0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid var(--ph-outline-variant, #e0dde5);
}

.segmented-control[data-full-width='true'] {
  display: flex;
  width: 100%;
}

.segmented-control__segment-wrap {
  position: relative;
  flex: none;
  display: flex;
  align-items: stretch;
  min-width: 0;
}

.segmented-control[data-full-width='true'] .segmented-control__segment-wrap {
  flex: 1;
}

.segmented-control[data-full-width='true'] .segmented-control__segment-wrap .segmented-control__segment {
  flex: 1;
  width: 100%;
}

/* Single sliding indicator; left/top/width/height set by Motion. translateZ(0) for crisp radius rendering. */
.segmented-control__indicator {
  position: absolute;
  border-radius: var(--ph-seg-inner-radius, 9px);
  background: var(--ph-seg-bg-active, var(--ph-primary));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
  pointer-events: none;
  transform: translateZ(0);
}

/* Size: small — total outer height 28px (container-pad 3px×2 + segment-h 22px) */
.segmented-control[data-size='sm'] {
  --ph-seg-gap: 2px;
  --ph-seg-container-pad: 3px;
  --ph-seg-radius: 8px;
  --ph-seg-inner-radius: 6px;
  --ph-seg-segment-h: 22px;
  --ph-seg-padding: 0 12px;
  --ph-seg-font-size: 12px;
  --ph-seg-icon-size: 14px;
  --ph-seg-icon-box: 16px;
}

/* Size: medium (default) — total outer height 36px (container-pad 3px×2 + segment-h 30px) */
.segmented-control[data-size='md'] {
  --ph-seg-gap: 3px;
  --ph-seg-container-pad: 3px;
  --ph-seg-radius: 12px;
  --ph-seg-inner-radius: 9px;
  --ph-seg-segment-h: 30px;
  --ph-seg-padding: 0 18px;
  --ph-seg-font-size: 13px;
  --ph-seg-icon-size: 16px;
  --ph-seg-icon-box: 20px;
}

/* Size: large — total outer height 40px (container-pad 4px×2 + segment-h 32px) */
.segmented-control[data-size='lg'] {
  --ph-seg-gap: 4px;
  --ph-seg-container-pad: 4px;
  --ph-seg-radius: 14px;
  --ph-seg-inner-radius: 10px;
  --ph-seg-segment-h: 32px;
  --ph-seg-padding: 0 24px;
  --ph-seg-font-size: 14px;
  --ph-seg-icon-size: 18px;
  --ph-seg-icon-box: 22px;
}

.segmented-control__segment {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--ph-seg-segment-h, 30px);
  padding: var(--ph-seg-padding, 0 18px);
  border-radius: var(--ph-seg-inner-radius, 9px);
  border: none;
  outline: none;
  cursor: pointer;
  font-size: var(--ph-seg-font-size, 13px);
  font-weight: 600;
  font-family: var(--ph-sys-typescale-label-lg-font, var(--ph-ref-typeface-base, sans-serif));
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  background: transparent;
  color: var(--ph-on-surface-variant, #6b6573);
}


/* Inactive + hover */
.segmented-control__segment[data-active='false'][data-hovered='true'],
.segmented-control__segment[data-active='false']:hover {
  background: var(--ph-ref-palette-primary90, #f0ebf5);
  color: var(--ph-on-surface-variant, #6b6573);
}

/* Active: transparent so indicator shows through; white text on primary bg */
.segmented-control__segment[data-active='true'] {
  background: transparent;
  color: var(--ph-seg-on-active, var(--ph-on-primary));
}

.segmented-control__segment[data-active='true'] .segmented-control__icon,
.segmented-control__segment[data-active='true'] .segmented-control__label {
  color: inherit;
}

.segmented-control__segment:focus-visible {
  outline: 2px solid var(--ph-primary);
  outline-offset: 2px;
}

/* Fixed box + tokenized size so Material Symbols glyphs center optically */
.segmented-control__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--ph-seg-icon-box, var(--ph-seg-icon-size, 15px));
  height: var(--ph-seg-icon-box, var(--ph-seg-icon-size, 15px));
  line-height: 0;
  font-size: var(--ph-seg-icon-size, 15px);
}

.segmented-control__icon > * {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: var(--ph-seg-icon-size, 15px) !important;
}

.segmented-control__label {
  display: inline-block;
}

/*
 * Icon + accessibility-only label (single sr-only child): remove label from flex layout
 * so the icon centers; options with a visible label + icon keep normal flex row.
 */
.segmented-control__segment
  .segmented-control__label:has(> .sr-only:only-child) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Bordered variant (menu designer / inspector spec): no sliding pill, segment backgrounds --- */
.segmented-control[data-variant='bordered'] {
  gap: 0;
  padding: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--ph-outline-variant, var(--ph-outline-variant, #e0dde5));
  box-shadow: none;
}

.segmented-control[data-variant='bordered'] .segmented-control__segment-wrap {
  flex: none;
}

.segmented-control[data-variant='bordered'][data-full-width='true'] .segmented-control__segment-wrap {
  flex: 1;
}

.segmented-control[data-variant='bordered'] .segmented-control__segment {
  flex: 0 1 auto;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 400;
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  background: var(--ph-seg-bg-inactive, var(--ph-surface-container-low, oklch(97% 0.005 321)));
  color: var(--ph-on-surface-variant, oklch(45% 0.02 321));
  border-radius: 0;
  border-right: 1px solid var(--ph-outline-variant, oklch(88% 0.01 321));
  transition: background-color 0.15s ease, color 0.15s ease, font-weight 0.15s ease;
}

.segmented-control[data-variant='bordered'] .segmented-control__segment-wrap:last-child .segmented-control__segment {
  border-right: none;
}

/* Hide dividers adjacent to the active segment — they clash with the filled bg */
.segmented-control[data-variant='bordered'] .segmented-control__segment[data-active='true'] {
  background: var(--ph-seg-bg-active, var(--ph-primary));
  color: var(--ph-seg-on-active, var(--ph-on-primary));
  font-weight: 600;
  border-right-color: transparent;
}

/* Segment immediately before active: hide its right border too */
.segmented-control[data-variant='bordered'] .segmented-control__segment-wrap:has(+ .segmented-control__segment-wrap .segmented-control__segment[data-active='true']) .segmented-control__segment {
  border-right-color: transparent;
}

.segmented-control[data-variant='bordered'] .segmented-control__segment[data-active='false']:hover {
  background: var(--ph-surface-container-low, oklch(94% 0.005 321));
  color: var(--ph-on-surface-variant, oklch(45% 0.02 321));
}

.segmented-control[data-variant='bordered'][data-size='sm'] .segmented-control__segment {
  padding: 3px 7px;
  font-size: 10px;
}

/* ── Tone: tinted ────────────────────────────────
 * `tinted` prop swaps the active treatment from filled-primary to a soft
 * primary-tinted surface (`--ph-primary-container` bg with
 * `--ph-on-primary-container` label). Use for in-form selectors where the
 * active segment should read as "selected" without competing with primary
 * actions on the same surface. Cascades over both `pill` and `bordered`
 * variants.
 *
 * Implemented as token defaults on `--ph-seg-bg-active` /
 * `--ph-seg-on-active`, so user-provided `activeBg` / `activeFg` props
 * still win. */
.segmented-control[data-tinted='true'] {
  --ph-seg-bg-active: var(--ph-primary-container);
  --ph-seg-on-active: var(--ph-on-primary-container);
}
/* CalendarSurface — week-aligned calendar grid. Themed via --ph-* tokens.
   Cell content (chips) is supplied by the consumer's renderDay callback. */

.ph-cal {
  /* Inner grid lines stay lighter than the outer frame, matching the
     lightweight reservation calendar this generalises. */
  --_line: var(--ph-ref-palette-neutral94);
  background: var(--ph-surface);
  border: var(--ph-ref-border-md, 1px) solid var(--ph-outline-variant);
  border-radius: var(--ph-ref-shape-lg);
  overflow: hidden;
}

/* ---- Weekday header ---- */
.ph-cal-wkhdr {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.ph-cal-wkhdr-cell {
  padding: 8px 10px;
  background: var(--ph-surface-container);
  border-bottom: 1px solid var(--ph-outline-variant);
  font-family: var(--ph-ref-typeface-body, sans-serif);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--ph-on-surface-variant);
}

/* ---- Week row + day cells ---- */
.ph-cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--_line);
}
.ph-cal-week:last-child {
  border-bottom: none;
}

.ph-cal-cell {
  display: flex;
  flex-direction: column;
  min-height: var(--_day-min-h, 96px);
  padding: 6px;
  border-right: 1px solid var(--_line);
  background: var(--ph-surface);
}
.ph-cal-cell:nth-child(7n) {
  border-right: none;
}
.ph-cal-cell[data-today] {
  background: var(--ph-ref-palette-primary98);
}
.ph-cal-cell[data-out] {
  background: var(--ph-surface-container-low);
  opacity: 0.55;
}

/* ---- Date label ---- */
.ph-cal-daynum-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.ph-cal-daynum {
  font-family: var(--ph-ref-typeface-body, sans-serif);
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral45);
}
.ph-cal-cell[data-today] .ph-cal-daynum {
  font-weight: 800;
  color: var(--ph-primary);
}
.ph-cal-month {
  font-family: var(--ph-ref-typeface-body, sans-serif);
  font-size: 10px;
  color: var(--ph-ref-palette-neutral50);
}

/* ---- Item region (filled by renderDay) ---- */
.ph-cal-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/*
 * Tabs
 *
 * Photon tokens used:
 *   --ph-outline-variant        → list border
 *   --ph-on-surface-variant     → inactive trigger text
 *   --ph-on-surface             → hover trigger text
 *   --ph-primary                → active text + indicator
 *   --ph-ref-typeface-base      → font family fallback
 *   --ph-sys-state-disabled-*   → disabled states
 */

/* ── Root ── */
.ph-tabs {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ── List (tab bar) ── */
.ph-tabs__list {
  flex-shrink: 0;
  display: flex;
  border-bottom: 1px solid var(--_border-c, var(--ph-outline-variant, #e0dde5));
}

/* ── Trigger (tab button) ── */
.ph-tabs__trigger {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: var(--_height, 44px);
  padding-inline: var(--_px, 16px);
  padding-block: 0;
  border: none;
  outline: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--_font, var(--ph-ref-typeface-base, sans-serif));
  font-size: var(--_fs, 13px);
  font-weight: var(--_fw, 500);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
  color: var(--_text, var(--ph-on-surface-variant, #6b6573));
  transition: color 0.2s ease;
}

/* Active indicator via ::after */
.ph-tabs__trigger::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* overlap list border */
  height: var(--_indicator-h, 3px);
  border-radius: var(--_indicator-h, 3px) var(--_indicator-h, 3px) 0 0;
  background: var(--_indicator-c, var(--ph-primary));
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Hover */
.ph-tabs__trigger:hover {
  color: var(--_text-hover, var(--ph-on-surface));
}

/* Active — Radix sets data-state="active" */
.ph-tabs__trigger[data-state='active'] {
  color: var(--_text-active, var(--ph-primary));
  font-weight: var(--_fw-active, 600);
}

.ph-tabs__trigger[data-state='active']::after {
  opacity: 1;
}

/* Focus */
.ph-tabs__trigger:focus-visible {
  outline: 2px solid var(--ph-primary);
  outline-offset: -2px;
}

/* Disabled */
.ph-tabs__trigger:disabled,
.ph-tabs__trigger[data-disabled] {
  color: var(--ph-sys-state-disabled-content, color-mix(in oklch, var(--ph-on-surface) 38%, transparent));
  cursor: default;
  pointer-events: none;
}

.ph-tabs__trigger:disabled::after,
.ph-tabs__trigger[data-disabled]::after {
  opacity: 0;
}

/* ── Size: sm ── */
.ph-tabs[data-size='sm'] {
  --_height: 36px;
  --_px: 12px;
  --_fs: 11px;
  --_fw: 500;
  --_fw-active: 600;
  --_indicator-h: 2px;
}

/* ── Size: md (default) ── */
.ph-tabs[data-size='md'] {
  --_height: 44px;
  --_px: 16px;
  --_fs: 13px;
  --_fw: 500;
  --_fw-active: 600;
  --_indicator-h: 3px;
}

/* ── Size: lg ── */
.ph-tabs[data-size='lg'] {
  --_height: 48px;
  --_px: 20px;
  --_fs: 14px;
  --_fw: 500;
  --_fw-active: 600;
  --_indicator-h: 3px;
}

/* ── Content ── */
.ph-tabs__content {
  flex-grow: 1;
  outline: none;
}

.ph-tabs__content:focus-visible {
  outline: 2px solid var(--ph-primary);
  outline-offset: 2px;
}
._root_cnfl3_1 {
  display: flex;
  flex-direction: column;
  width: var(--_width, 300px);
  height: 100%;
  background: var(--ph-surface);
  flex-shrink: 0;
  overflow: hidden;
}

._right_cnfl3_11 {
  border-left: 1px solid var(--ph-outline-variant);
}

._left_cnfl3_15 {
  border-right: 1px solid var(--ph-outline-variant);
}

._header_cnfl3_19 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  min-height: 48px;
  border-bottom: 1px solid var(--ph-outline-variant);
  flex-shrink: 0;
}

._content_cnfl3_29 {
  flex: 1;
  overflow-y: auto;
  padding: 0 16px;
}

._footer_cnfl3_35 {
  display: flex;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--ph-outline-variant);
  flex-shrink: 0;
}
._root_8ncrf_1 {
  border-bottom: 1px solid var(--ph-outline-variant, oklch(85% 0.00366 321.31));
}

._trigger_8ncrf_5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ph-ref-typeface-accent, 'Plus Jakarta Sans', sans-serif);
  font-size: 11px;
  font-weight: 600;
  color: var(--ph-on-surface-variant, oklch(30% 0.00733 321.31));
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

._trigger_8ncrf_5:focus-visible {
  outline: 2px solid var(--ph-primary, oklch(40% 0.16284 321.31));
  outline-offset: 2px;
  border-radius: 2px;
}

._chevron_8ncrf_28 {
  font-size: 10px;
  transition: transform 0.25s ease;
  color: inherit;
}

._chevronOpen_8ncrf_34 {
  transform: rotate(180deg);
}

._contentWrapper_8ncrf_38 {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s ease;
}

._contentWrapperOpen_8ncrf_44 {
  grid-template-rows: 1fr;
}

._contentInner_8ncrf_48 {
  overflow: hidden;
}

._content_8ncrf_38 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
}

._badge_8ncrf_59 {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 9999px;
  background: var(--ph-primary, oklch(40% 0.16284 321.31));
  color: white;
  font-weight: 600;
  margin-left: auto;
  margin-right: 8px;
}
._root_1915w_1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}

._labelWrap_1915w_9 {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

._overrideDot_1915w_16 {
  width: 4px;
  height: 4px;
  border-radius: 9999px;
  background: var(--ph-primary, oklch(40% 0.16284 321.31));
  flex-shrink: 0;
}

._label_1915w_9 {
  font-size: 11px;
  color: var(--ph-on-surface-variant, oklch(45% 0.02 321));
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  white-space: nowrap;
  flex-shrink: 0;
}

._inherited_1915w_32 ._label_1915w_9 {
  opacity: 0.5;
}

._labelColumn_1915w_36 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

._hint_1915w_42 {
  font-size: 10px;
  color: var(--ph-on-surface-variant, oklch(55% 0.02 321));
  opacity: 0.6;
  margin-top: 1px;
}

._controls_1915w_49 {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
._root_108z9_1 {
  height: var(--_height, 32px);
  background: var(--ph-surface);
  border-top: 1px solid var(--ph-outline-variant, oklch(90% 0.01 321));
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  flex-shrink: 0;
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 11px;
}

._left_108z9_14 {
  flex: 1;
  min-width: 0;
}

._right_108z9_19 {
  flex-shrink: 0;
}
/* ============================================
   PHOTON SELECT (NativeSelect) — Scoped CSS Variables
   Same pattern as Input, Button, Checkbox (v2).
   ============================================ */

/* ── Root (select element) ──────────────────── */

.ph-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: var(--_height);
  padding: 0 22px 0 var(--_px);
  border: var(--_border-w) solid var(--_border-c);
  border-radius: var(--_radius);
  background-color: var(--_bg);
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: var(--_fs);
  font-weight: 500;
  color: var(--_text);
  cursor: pointer;
  outline: none;
  transition:
    border-color 0.15s var(--ph-sys-motion-easing-standard, ease),
    box-shadow 0.2s var(--ph-sys-motion-easing-standard, ease);

  /* Chevron icon via background-image */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--_chevron-right, 6px) center;
}

/* ── Sizes ───────────────────────────────────── */

.ph-select[data-size='sm'] {
  --_height: 28px;
  --_px: 8px;
  --_fs: 12px;
  --_radius: var(--ph-ref-shape-sm, 4px);
  --_chevron-right: 5px;
}

.ph-select[data-size='md'] {
  --_height: 36px;
  --_px: 12px;
  --_fs: 13px;
  --_radius: var(--ph-ref-shape-md, 8px);
  --_chevron-right: 7px;
}

.ph-select[data-size='lg'] {
  --_height: 40px;
  --_px: 14px;
  --_fs: 13px;
  --_radius: var(--ph-ref-shape-md, 8px);
  --_chevron-right: 8px;
}

/* ── Default state ───────────────────────────── */

.ph-select {
  --_bg: var(--ph-surface-container-lowest, white);
  --_text: var(--ph-on-surface);
  --_border-w: 1px;
  --_border-c: var(--ph-outline-variant);
}

/* Placeholder color (when value is empty) */
.ph-select[data-placeholder='true'] {
  color: var(--ph-on-surface-variant);
}

/* ── Hover ───────────────────────────────────── */

.ph-select:hover:not(:disabled):not(:focus) {
  --_border-c: var(--ph-on-surface);
}

/* ── Focus ───────────────────────────────────── */

.ph-select:focus:not(:disabled):not([data-error='true']) {
  --_border-c: var(--ph-primary);
  box-shadow:
    inset 0 0 0 0.5px var(--ph-primary),
    0 0 0 3px color-mix(in oklch, var(--ph-primary) 10%, transparent);
}

/* ── Error ───────────────────────────────────── */

.ph-select[data-error='true'] {
  --_border-c: var(--ph-error);
  box-shadow: inset 0 0 0 0.5px var(--ph-error);
}

/* ── Disabled ────────────────────────────────── */

.ph-select:disabled {
  --_bg: var(--ph-surface-container, oklch(98% 0.004 321));
  --_border-c: var(--ph-sys-state-disabled-outline);
  color: var(--ph-sys-state-disabled-content);
  cursor: not-allowed;
  pointer-events: none;
}
._root_fkawe_1 {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 0;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

._root_fkawe_1:hover {
  background: oklch(50% 0.01 321 / 0.05);
}

._chip_fkawe_15 {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid var(--ph-outline-variant, oklch(85% 0.01 321));
  flex-shrink: 0;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

._chipSelected_fkawe_24 {
  border: 2px solid var(--ph-primary, oklch(40% 0.16284 321.31));
  transform: scale(1.1);
}

._label_fkawe_29 {
  font-size: 10px;
  color: var(--ph-on-surface-variant, oklch(50% 0.02 321));
  font-family: monospace;
}

._sm_fkawe_35 ._chip_fkawe_15 {
  width: 14px;
  height: 14px;
}

._md_fkawe_40 ._chip_fkawe_15 {
  width: 18px;
  height: 18px;
}
._root_1z126_1 {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

._root_1z126_1::-webkit-scrollbar {
  display: none;
}

._chip_1z126_12 {
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--ph-outline-variant, oklch(90% 0.01 321));
  background: transparent;
  color: var(--ph-on-surface-variant, oklch(50% 0.02 321));
  font-size: 10px;
  font-weight: 400;
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
}

._chip_1z126_12:hover:not(._chipActive_1z126_27) {
  background: oklch(50% 0.02 321 / 0.06);
}

._chip_1z126_12:focus-visible {
  outline: 2px solid var(--ph-primary, oklch(40% 0.16284 321.31));
  outline-offset: 1px;
}

._chipActive_1z126_27 {
  border-color: oklch(55% 0.14 321.31);
  background: oklch(55% 0.14 321.31 / 0.08);
  color: oklch(40% 0.14 321.31);
  font-weight: 600;
}

._sm_1z126_43 ._chip_1z126_12 {
  padding: 3px 8px;
  font-size: 10px;
}
.ph-upgrade-tracker__arc {
  transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.ph-upgrade-tracker__label-text {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 9px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral50);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}

.ph-upgrade-tracker__level-number {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 24px;
  font-weight: 800;
  color: var(--ph-ref-palette-primary40);
  line-height: 1;
}

.ph-upgrade-tracker__max-text {
  font-family: var(--ph-ref-typeface-base);
  font-size: 9px;
  color: var(--ph-ref-palette-neutral60);
  line-height: 1;
}

.ph-upgrade-tracker__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ph-upgrade-tracker__legend-label {
  font-family: var(--ph-ref-typeface-base);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ph-ref-palette-neutral50);
}
.ph-upgrade-req {
  opacity: 1;
}

.ph-upgrade-req[data-done] {
  opacity: 0.6;
}

.ph-upgrade-req__label {
  font-family: var(--ph-ref-typeface-base);
  font-size: 13px;
  font-weight: 500;
  color: var(--ph-ref-palette-neutral20);
}

.ph-upgrade-req[data-done] .ph-upgrade-req__label {
  text-decoration: line-through;
  font-weight: 400;
  color: var(--ph-ref-palette-neutral50);
}

.ph-upgrade-req__badge {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ph-ref-palette-primary50);
  background: var(--ph-ref-palette-primary98);
  padding: 2px 7px;
  border-radius: 10px;
}
@keyframes ph-pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.ph-menu-slot {
  position: relative;
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Empty state ── */

.ph-menu-slot[data-empty='true'] {
  border: 2px dashed var(--ph-ref-palette-neutral85);
  background: var(--ph-ref-palette-neutral98);
  padding: 18px 16px;
  min-height: 72px;
}

.ph-menu-slot[data-empty='true']:hover {
  border-color: var(--ph-ref-palette-primary80);
  background: var(--ph-ref-palette-primary98);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ph-ref-palette-primary40) 12%, transparent);
}

.ph-menu-slot[data-empty='true'] .ph-menu-slot__circle {
  width: 36px;
  height: 36px;
  background: var(--ph-ref-palette-neutral92);
  color: var(--ph-ref-palette-neutral60);
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.ph-menu-slot[data-empty='true']:hover .ph-menu-slot__circle {
  background: var(--ph-ref-palette-primary94);
  color: var(--ph-ref-palette-primary50);
}

.ph-menu-slot[data-empty='true'] .ph-menu-slot__title {
  color: var(--ph-ref-palette-neutral50);
  transition: color 0.25s ease;
}

.ph-menu-slot[data-empty='true']:hover .ph-menu-slot__title {
  color: var(--ph-ref-palette-primary40);
}

/* ── Filled state ── */

.ph-menu-slot[data-empty='false'] {
  border-width: 2px;
  border-style: solid;
  padding: 16px;
}

.ph-menu-slot[data-empty='false']:hover {
  transform: translateY(-2px);
}

.ph-menu-slot[data-active='true'] {
  border-color: var(--ph-ref-palette-tertiary80);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ph-ref-palette-tertiary95) 50%, transparent),
    var(--ph-ref-palette-neutral100)
  );
}

.ph-menu-slot[data-active='false'] {
  border-color: var(--ph-ref-palette-neutral90);
  background: var(--ph-ref-palette-neutral100);
}

/* ── Icon circle (filled) ── */

.ph-menu-slot[data-empty='false'] .ph-menu-slot__circle {
  width: 40px;
  height: 40px;
}

.ph-menu-slot[data-active='true'] .ph-menu-slot__circle {
  background: color-mix(in srgb, var(--ph-ref-palette-tertiary40) 12%, transparent);
  color: var(--ph-ref-palette-tertiary40);
}

.ph-menu-slot[data-active='false'] .ph-menu-slot__circle {
  background: var(--ph-ref-palette-neutral92);
  color: var(--ph-ref-palette-neutral50);
}

/* ── Pulse ring (active only) ── */

.ph-menu-slot__pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--ph-ref-palette-tertiary60);
  animation: ph-pulse-ring 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

/* ── Status pill ── */

.ph-menu-slot__pill[data-status='active'] {
  color: var(--ph-ref-palette-tertiary40);
  background: color-mix(in srgb, var(--ph-ref-palette-tertiary90) 50%, transparent);
}

.ph-menu-slot__pill[data-status='active'] .ph-menu-slot__dot {
  background: var(--ph-ref-palette-tertiary60);
}

.ph-menu-slot__pill[data-status='inactive'] {
  color: var(--ph-ref-palette-neutral50);
  background: var(--ph-ref-palette-neutral92);
}

.ph-menu-slot__pill[data-status='inactive'] .ph-menu-slot__dot {
  background: var(--ph-ref-palette-neutral70);
}
/* ── AccordionSection ── */

.ph-accordion-section {
  border-radius: 10px;
  border: 1px solid var(--ph-ref-palette-neutral92);
  background: var(--ph-ref-palette-neutral100);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}

.ph-accordion-section[data-open='true'] {
  box-shadow: 0 2px 12px oklch(0% 0 0 / 0.04);
}

/* ── Header ── */

.ph-accordion-section__header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 18px;
  border: none;
  cursor: pointer;
  position: relative;
  background: transparent;
  transition: background 0.25s ease;
  text-align: left;
}

.ph-accordion-section[data-open='true'] .ph-accordion-section__header {
  background: color-mix(in srgb, var(--ph-accordion-accent) 3%, transparent);
}

.ph-accordion-section[data-open='true'][data-tinted] .ph-accordion-section__header {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ph-accordion-accent) 5%, transparent),
    color-mix(in srgb, var(--ph-accordion-accent) 1%, transparent)
  );
}

/* ── Left accent border ── */

.ph-accordion-section__left-border {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 0.25s ease;
}

.ph-accordion-section[data-open='true'] .ph-accordion-section__left-border {
  background: var(--ph-accordion-accent);
}

/* ── Icon ── */

.ph-accordion-section__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

/* ── Title area ── */

.ph-accordion-section__title-area {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ph-accordion-section__title {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral20);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Progress bar ── */

.ph-accordion-section__progress {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ph-accordion-section__progress-track {
  width: 120px;
  max-width: 120px;
  height: 3px;
  border-radius: 2px;
  background: var(--ph-ref-palette-neutral92);
  overflow: hidden;
  position: relative;
}

.ph-accordion-section__progress-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--ph-accordion-accent);
  position: relative;
  transition: width 0.4s ease;
}

.ph-accordion-section__progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(100% 0 0 / 0.35) 50%,
    transparent 100%
  );
  animation: ph-accordion-shimmer 1.8s ease-in-out infinite;
}

.ph-accordion-section__progress-label {
  font-family: var(--ph-ref-typeface-base);
  font-size: 11px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral50);
  white-space: nowrap;
}

/* ── Chevron ── */

.ph-accordion-section__chevron {
  flex-shrink: 0;
  color: var(--ph-ref-palette-neutral50);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ph-accordion-section[data-open='true'] .ph-accordion-section__chevron {
  transform: rotate(180deg);
}

/* ── Content ── */

.ph-accordion-section__content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease;
}

.ph-accordion-section[data-open='true'] .ph-accordion-section__content {
  max-height: 2000px;
  opacity: 1;
}

.ph-accordion-section__content-inner {
  padding: 4px 20px 20px 20px;
}

/* ── Animations ── */

@keyframes ph-accordion-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* ── DetailField ── */

.ph-detail-field {
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.ph-detail-field:hover {
  background: var(--ph-ref-palette-neutral98);
}

.ph-detail-field--span-2 {
  grid-column: 1 / -1;
}

/* ── Header ── */

.ph-detail-field__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.ph-detail-field__label {
  font-family: var(--ph-ref-typeface-base);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ph-ref-palette-neutral50);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* ── Edit button ── */

.ph-detail-field__edit {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ph-ref-palette-primary50);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.ph-detail-field:hover .ph-detail-field__edit {
  opacity: 1;
}

/* ── Value ── */

.ph-detail-field__value {
  font-family: var(--ph-ref-typeface-base);
  font-size: 14px;
  font-weight: 400;
  color: var(--ph-ref-palette-neutral10);
  line-height: 1.4;
}

.ph-detail-field__value--empty {
  color: var(--ph-ref-palette-neutral70);
}

/* ── Hint ── */

.ph-detail-field__hint {
  font-family: var(--ph-ref-typeface-base);
  font-size: 11px;
  color: var(--ph-ref-palette-neutral60);
  margin-top: 3px;
  line-height: 1.4;
}
.ph-stat-card {
  position: relative;
  flex: 1;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--ph-ref-palette-neutral92);
  background: var(--ph-ref-palette-neutral100);
  padding: 18px 20px;
  transition:
    transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.ph-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ph-ref-palette-primary50) 10%, transparent);
}

.ph-stat-card__accent {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  opacity: 0.06;
  filter: blur(16px);
  pointer-events: none;
}

.ph-stat-card__label {
  font-family: var(--ph-ref-typeface-base);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral50);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.ph-stat-card__value {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 22px;
  font-weight: 800;
  color: var(--ph-ref-palette-neutral10);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ph-stat-card__sub {
  font-family: var(--ph-ref-typeface-base);
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 4px;
}

.ph-stat-card__children {
  margin-top: 8px;
}
.ph-glass-stat-card {
  position: relative;
  background: color-mix(in srgb, var(--ph-ref-palette-neutral100) 35%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--ph-ref-palette-neutral100) 50%, transparent);
  border-radius: 14px;
  box-shadow: 0 8px 32px color-mix(in srgb, var(--ph-ref-palette-neutral0) 4%, transparent);
  overflow: hidden;
}

.ph-glass-stat-card--sm {
  padding: 10px 14px;
}

.ph-glass-stat-card--md {
  padding: 14px 18px;
}

.ph-glass-stat-card__title {
  font-family: var(--ph-ref-typeface-base);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ph-ref-palette-neutral50);
  margin-bottom: 6px;
}

.ph-glass-stat-card__value-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.ph-glass-stat-card__value {
  font-family: var(--ph-ref-typeface-accent);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

.ph-glass-stat-card--sm .ph-glass-stat-card__value {
  font-size: 18px;
}

.ph-glass-stat-card--md .ph-glass-stat-card__value {
  font-size: 24px;
}

.ph-glass-stat-card__suffix {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.5;
  margin-left: 2px;
}

.ph-glass-stat-card__subtitle {
  font-family: var(--ph-ref-typeface-base);
  font-size: 10px;
  font-weight: 500;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 3px;
}

.ph-glass-stat-card__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

.ph-glass-stat-card__stat-value {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 12px;
  font-weight: 600;
}

.ph-glass-stat-card__stat-label {
  font-family: var(--ph-ref-typeface-base);
  font-size: 8px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 1px;
}

.ph-glass-stat-card__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  margin-top: 8px;
}

.ph-glass-stat-card__bar {
  width: 9px;
  border-radius: 3px 3px 1px 1px;
  min-height: 2px;
  transition: height 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ph-glass-stat-card__bar--dashed {
  background: none !important;
  border: 1.5px dashed var(--ph-ref-palette-neutral80);
}

.ph-glass-stat-card__progress {
  display: grid;
  gap: 3px;
  width: 100%;
  margin-top: 8px;
}

.ph-glass-stat-card__segment {
  height: 4px;
  border-radius: 2px;
  min-width: 0;
}

.ph-glass-stat-card__segment--spacer {
  background: transparent !important;
}

.ph-glass-stat-card__children {
  margin-top: 8px;
}

.ph-glass-stat-card--animate-in {
  animation: ph-glass-stat-card-enter 150ms ease-out both;
}

@keyframes ph-glass-stat-card-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes ph-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

@keyframes ph-fade-slide-up {
  0% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.ph-segment-bar {
  display: flex;
  flex-direction: row;
  gap: 1px;
  width: 100%;
  background: var(--ph-ref-palette-neutral92);
  border-radius: 999px;
  overflow: hidden;
}

.ph-segment-bar__segment {
  position: relative;
  overflow: hidden;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ph-segment-bar__segment[data-shimmer]::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  animation: ph-shimmer 2.4s ease-in-out infinite;
}
.ph-uptime-bar {
  display: flex;
  flex-direction: row;
  gap: 2px;
  align-items: flex-end;
  width: 100%;
}

.ph-uptime-bar__day {
  flex: 1;
  border-radius: 2px;
  transition:
    opacity 0.3s ease,
    background-color 0.3s ease;
}
.ph-ranked-list__title {
  font-family: var(--ph-ref-typeface-base);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral50);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.ph-ranked-list__rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ph-ranked-list__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-color 0.2s ease;
}

.ph-ranked-list__row[data-current] {
  background: color-mix(in srgb, var(--ph-ref-palette-primary95) 50%, transparent);
  border-color: var(--ph-ref-palette-primary90);
}

.ph-ranked-list__rank {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 11px;
  font-weight: 800;
  color: var(--ph-ref-palette-neutral60);
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

.ph-ranked-list__row[data-current] .ph-ranked-list__rank {
  color: var(--ph-ref-palette-primary40);
}

.ph-ranked-list__name {
  font-family: var(--ph-ref-typeface-base);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ph-ref-palette-neutral30);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ph-ranked-list__row[data-current] .ph-ranked-list__name {
  font-weight: 600;
  color: var(--ph-ref-palette-primary30);
}

.ph-ranked-list__revenue {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 11px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral30);
  width: 60px;
  text-align: right;
  flex-shrink: 0;
}

.ph-ranked-list__margin {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 10px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral50);
  background: var(--ph-ref-palette-neutral96);
  padding: 2px 6px;
  border-radius: 8px;
  flex-shrink: 0;
}

.ph-ranked-list__margin[data-high-margin] {
  color: var(--ph-ref-palette-tertiary40);
  background: color-mix(in srgb, var(--ph-ref-palette-tertiary90) 40%, transparent);
}
/* MenuV2 block styles
 * Uses --mv2-* CSS custom properties set on .mv2-root by MenuV2WebRenderer.
 * Override any --mv2-* property via page.addStyleTag() for iteration tool.
 */

/* --- Price Connectors --- */

.mv2-connector--dot-leaders {
  flex: 1;
  overflow: hidden;
  position: relative;
  margin: 0 4px;
  min-width: 8px;
}

.mv2-connector--dot-leaders::after {
  content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .";
  position: absolute;
  bottom: 0.25em;
  left: 0;
  white-space: nowrap;
  letter-spacing: 2px;
  font-size: 0.9em;
}

.mv2-connector--dash-leaders {
  flex: 1;
  overflow: hidden;
  position: relative;
  margin: 0 4px;
  min-width: 8px;
}

.mv2-connector--dash-leaders::after {
  content: " - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -";
  position: absolute;
  bottom: 0.3em;
  left: 0;
  white-space: nowrap;
  letter-spacing: 1px;
  font-size: 0.85em;
}

.mv2-connector--thin-line {
  flex: 1;
  margin: 0 8px;
  position: relative;
  min-width: 8px;
}

.mv2-connector--thin-line::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid currentColor;
  opacity: 0.4;
}

.mv2-connector--space-only {
  flex: 1;
  min-width: 16px;
}

.mv2-connector--none {
  flex: 1;
  min-width: 4px;
}

.mv2-connector--em-dash,
.mv2-connector--bullet,
.mv2-connector--ellipsis {
  flex: 0 0 auto;
  margin: 0 6px;
}

/* --- Item hover --- */

.mv2-item-root {
  border-radius: 6px;
  padding: 4px 8px;
  margin-left: -8px;
  margin-right: -8px;
  transition: background-color 0.2s ease;
}

.mv2-item-root:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

/* --- Item images --- */

.mv2-item-with-image {
  overflow: hidden;
}

.mv2-item-with-image .mv2-item__image img {
  transition: opacity 0.2s ease;
}

/* --- Pagination --- */

.mv2-paginated-container {
  width: 100%;
}

.mv2-page--pdf {
  page-break-inside: avoid;
}

/* --- Responsive columns per spec (mobile: single column) --- */

@media (max-width: 639px) {
  .mv2-columns {
    flex-direction: column;
  }
  .mv2-columns > div {
    border-right: none !important;
    padding-right: 0 !important;
    width: 100%;
  }
  .mv2-root {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
.quantity-select {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.quantity-select:hover {
}

.quantity-button[data-style='square'] {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.25rem;
  background-color: var(--ph-primary-container);
  color: var(--ph-on-primary-container);
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--ph-primary-container-variant);
}

.quantity-button[data-style='round'] {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 0;
  /* border-color: var(--ph-outline); */
  /* border-width: 1px; */
  /* background-color: var(--ph-surface); */
  background-color: var(--ph-surface-container-low);
  color: var(--ph-on-surface-variant);
  opacity: 0.7;
  cursor: pointer;
  /* box-shadow: 0 0 0 1px var(--ph-outline); */
}

/* Slider */
.slick-loading .slick-list
{
    background: #fff url('/assets/ajax-loader-BcnMEykj.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('data:application/vnd.ms-fontobject;base64,AAgAAGQHAAABAAIAAAAAAAIABQkAAAAAAAABAJABAAAAAExQAQAAgCAAAAAAAAAAAAAAAAEAAAAAAAAATxDE8AAAAAAAAAAAAAAAAAAAAAAAAAoAcwBsAGkAYwBrAAAADgBSAGUAZwB1AGwAYQByAAAAFgBWAGUAcgBzAGkAbwBuACAAMQAuADAAAAAKAHMAbABpAGMAawAAAAAAAAEAAAANAIAAAwBQRkZUTW3RyK8AAAdIAAAAHEdERUYANAAGAAAHKAAAACBPUy8yT/b9sgAAAVgAAABWY21hcCIPRb0AAAHIAAABYmdhc3D//wADAAAHIAAAAAhnbHlmP5u2YAAAAzwAAAIsaGVhZAABMfsAAADcAAAANmhoZWED5QIFAAABFAAAACRobXR4BkoASgAAAbAAAAAWbG9jYQD2AaIAAAMsAAAAEG1heHAASwBHAAABOAAAACBuYW1lBSeBwgAABWgAAAFucG9zdC+zMgMAAAbYAAAARQABAAAAAQAA8MQQT18PPPUACwIAAAAAAM9xeH8AAAAAz3F4fwAlACUB2wHbAAAACAACAAAAAAAAAAEAAAHbAAAALgIAAAAAAAHbAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAHAEQAAgAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAACAAAABAAAAIAAAAAAAAAAAUGZFZABAAGEhkgHg/+AALgHb/9sAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAJQAlACUAJQAAAAAAAwAAAAMAAAAcAAEAAAAAAFwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAAAYSAiIZAhkv//AAAAAABhICIhkCGS//8AAP+l3+PedN5xAAEAAAAAAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGAIwAsAEWAAIAJQAlAdsB2wAYACwAAD8BNjQvASYjIg8BBhUUHwEHBhUUHwEWMzI2FAcGBwYiJyYnJjQ3Njc2MhcWF/GCBgaCBQcIBR0GBldXBgYdBQgH7x0eMjB8MDIeHR0eMjB8MDIecYIGDgaCBQUeBQcJBFhYBAkHBR4F0nwwMh4dHR4yMHwwMh4dHR4yAAAAAgAlACUB2wHbABgALAAAJTc2NTQvATc2NTQvASYjIg8BBhQfARYzMjYUBwYHBiInJicmNDc2NzYyFxYXASgdBgZXVwYGHQUIBwWCBgaCBQcIuB0eMjB8MDIeHR0eMjB8MDIecR4FBwkEWFgECQcFHgUFggYOBoIF0nwwMh4dHR4yMHwwMh4dHR4yAAABACUAJQHbAdsAEwAAABQHBgcGIicmJyY0NzY3NjIXFhcB2x0eMjB8MDIeHR0eMjB8MDIeAT58MDIeHR0eMjB8MDIeHR0eMgABACUAJQHbAdsAQwAAARUUBisBIicmPwEmIyIHBgcGBwYUFxYXFhcWMzI3Njc2MzIfARYVFAcGBwYjIicmJyYnJjQ3Njc2NzYzMhcWFzc2FxYB2woIgAsGBQkoKjodHBwSFAwLCwwUEhwcHSIeIBMGAQQDJwMCISspNC8mLBobFBERFBsaLCYvKicpHSUIDAsBt4AICgsLCScnCwwUEhwcOhwcEhQMCw8OHAMDJwMDAgQnFBQRFBsaLCZeJiwaGxQRDxEcJQgEBgAAAAAAAAwAlgABAAAAAAABAAUADAABAAAAAAACAAcAIgABAAAAAAADACEAbgABAAAAAAAEAAUAnAABAAAAAAAFAAsAugABAAAAAAAGAAUA0gADAAEECQABAAoAAAADAAEECQACAA4AEgADAAEECQADAEIAKgADAAEECQAEAAoAkAADAAEECQAFABYAogADAAEECQAGAAoAxgBzAGwAaQBjAGsAAHNsaWNrAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAHMAbABpAGMAawAgADoAIAAxADQALQA0AC0AMgAwADEANAAARm9udEZvcmdlIDIuMCA6IHNsaWNrIDogMTQtNC0yMDE0AABzAGwAaQBjAGsAAHNsaWNrAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABzAGwAaQBjAGsAAHNsaWNrAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABwAAAAEAAgECAQMAhwBECmFycm93cmlnaHQJYXJyb3dsZWZ0AAAAAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwAGAAEABAAAAAIAAAAAAAEAAAAAzu7XsAAAAADPcXh/AAAAAM9xeH8=');
    src: url('data:application/vnd.ms-fontobject;base64,AAgAAGQHAAABAAIAAAAAAAIABQkAAAAAAAABAJABAAAAAExQAQAAgCAAAAAAAAAAAAAAAAEAAAAAAAAATxDE8AAAAAAAAAAAAAAAAAAAAAAAAAoAcwBsAGkAYwBrAAAADgBSAGUAZwB1AGwAYQByAAAAFgBWAGUAcgBzAGkAbwBuACAAMQAuADAAAAAKAHMAbABpAGMAawAAAAAAAAEAAAANAIAAAwBQRkZUTW3RyK8AAAdIAAAAHEdERUYANAAGAAAHKAAAACBPUy8yT/b9sgAAAVgAAABWY21hcCIPRb0AAAHIAAABYmdhc3D//wADAAAHIAAAAAhnbHlmP5u2YAAAAzwAAAIsaGVhZAABMfsAAADcAAAANmhoZWED5QIFAAABFAAAACRobXR4BkoASgAAAbAAAAAWbG9jYQD2AaIAAAMsAAAAEG1heHAASwBHAAABOAAAACBuYW1lBSeBwgAABWgAAAFucG9zdC+zMgMAAAbYAAAARQABAAAAAQAA8MQQT18PPPUACwIAAAAAAM9xeH8AAAAAz3F4fwAlACUB2wHbAAAACAACAAAAAAAAAAEAAAHbAAAALgIAAAAAAAHbAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAHAEQAAgAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAACAAAABAAAAIAAAAAAAAAAAUGZFZABAAGEhkgHg/+AALgHb/9sAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAJQAlACUAJQAAAAAAAwAAAAMAAAAcAAEAAAAAAFwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAAAYSAiIZAhkv//AAAAAABhICIhkCGS//8AAP+l3+PedN5xAAEAAAAAAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGAIwAsAEWAAIAJQAlAdsB2wAYACwAAD8BNjQvASYjIg8BBhUUHwEHBhUUHwEWMzI2FAcGBwYiJyYnJjQ3Njc2MhcWF/GCBgaCBQcIBR0GBldXBgYdBQgH7x0eMjB8MDIeHR0eMjB8MDIecYIGDgaCBQUeBQcJBFhYBAkHBR4F0nwwMh4dHR4yMHwwMh4dHR4yAAAAAgAlACUB2wHbABgALAAAJTc2NTQvATc2NTQvASYjIg8BBhQfARYzMjYUBwYHBiInJicmNDc2NzYyFxYXASgdBgZXVwYGHQUIBwWCBgaCBQcIuB0eMjB8MDIeHR0eMjB8MDIecR4FBwkEWFgECQcFHgUFggYOBoIF0nwwMh4dHR4yMHwwMh4dHR4yAAABACUAJQHbAdsAEwAAABQHBgcGIicmJyY0NzY3NjIXFhcB2x0eMjB8MDIeHR0eMjB8MDIeAT58MDIeHR0eMjB8MDIeHR0eMgABACUAJQHbAdsAQwAAARUUBisBIicmPwEmIyIHBgcGBwYUFxYXFhcWMzI3Njc2MzIfARYVFAcGBwYjIicmJyYnJjQ3Njc2NzYzMhcWFzc2FxYB2woIgAsGBQkoKjodHBwSFAwLCwwUEhwcHSIeIBMGAQQDJwMCISspNC8mLBobFBERFBsaLCYvKicpHSUIDAsBt4AICgsLCScnCwwUEhwcOhwcEhQMCw8OHAMDJwMDAgQnFBQRFBsaLCZeJiwaGxQRDxEcJQgEBgAAAAAAAAwAlgABAAAAAAABAAUADAABAAAAAAACAAcAIgABAAAAAAADACEAbgABAAAAAAAEAAUAnAABAAAAAAAFAAsAugABAAAAAAAGAAUA0gADAAEECQABAAoAAAADAAEECQACAA4AEgADAAEECQADAEIAKgADAAEECQAEAAoAkAADAAEECQAFABYAogADAAEECQAGAAoAxgBzAGwAaQBjAGsAAHNsaWNrAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAHMAbABpAGMAawAgADoAIAAxADQALQA0AC0AMgAwADEANAAARm9udEZvcmdlIDIuMCA6IHNsaWNrIDogMTQtNC0yMDE0AABzAGwAaQBjAGsAAHNsaWNrAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABzAGwAaQBjAGsAAHNsaWNrAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABwAAAAEAAgECAQMAhwBECmFycm93cmlnaHQJYXJyb3dsZWZ0AAAAAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwAGAAEABAAAAAIAAAAAAAEAAAAAzu7XsAAAAADPcXh/AAAAAM9xeH8=') format('embedded-opentype'), url('data:font/woff;base64,d09GRk9UVE8AAAVkAAsAAAAAB1wAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAABCAAAAi4AAAKbH/pWDkZGVE0AAAM4AAAAGgAAABxt0civR0RFRgAAA1QAAAAcAAAAIAAyAARPUy8yAAADcAAAAFIAAABgUBj/rmNtYXAAAAPEAAAAUAAAAWIiC0SwaGVhZAAABBQAAAAuAAAANgABMftoaGVhAAAERAAAABwAAAAkA+UCA2htdHgAAARgAAAADgAAAA4ESgBKbWF4cAAABHAAAAAGAAAABgAFUABuYW1lAAAEeAAAANwAAAFuBSeBwnBvc3QAAAVUAAAAEAAAACAAAwABeJw9ks9vEkEUx2cpWyeUoFYgNkHi2Wt7N3rVm3cTs3UVLC4LxIWEQvi1P3i7O1tYLJDAmlgKGEhQrsajf0j7J3jYTXrQWUrMJG+++b55n5e8NwwKBhHDMLv5kxT3ATEBxKBn3qOAl9zxHgb1MAPhHQgHkyF08Gr/L8B/Eb6zWnmCJ7AJVLubQOheArXvJ1A4EXi6j4I+Zg9F0QFKvsnlBCmXeve+sFEnb/nCptdtQ4QYhVFRAT1HrF8UQK/RL/SbmUbclsvGVFXRZKDHUE38cc4qpkbAAsuwiImvro+ufcfaOIQ6szlrmjRJDaKZKnbjN3GWKIbiIzRFUfCffuxxKOL+3LDlDVvx2TdxN84qZEsnhNBa6pgm2dAsnzbLsETdsmRFxUeHV4e+I2/ptN8TyqV8T3Dt29t7EYOuajVIw2y1Wy3M86w0zg/Fz2IvawmQAUHOVrPVfLkoScVynsqsTG0MGUs4z55nh3mnOJa+li+rl9WpPIcFfDubDeaDC+fLBdYN3QADzLauGfj4B6sZmq6CCpqmtSvF0qlUl2qf5AJIUCSlTqlb7lUG+LRfGzZGzZEyBgccMu6MuqPecNDvD4Y9Kjtj4gD+DsvKVMTcMdtqtZtmkzQstQvYje7Syep0PDSAhSOeHYXYWThEF//A/0YvYV1fSQtpKU5STtrhbQ444OtpKSWJIg3pOg8cBs7maTY1EZf07aq+hjWs7IWzdCYTGhb2CtZ47x+Uhx28AAB4nGNgYGBkAIJz765vANHnCyvqYTQAWnkHswAAeJxjYGRgYOADYgkGEGBiYARCFjAG8RgABHYAN3icY2BmYmCcwMDKwMHow5jGwMDgDqW/MkgytDAwMDGwcjKAQQMDAyOQUmCAgoA01xQGB4ZExUmMD/4/YNBjvP3/NgNEDQPjbbBKBQZGADfLDgsAAHicY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQzMCQqKClOUJz0/z9YHRLv/+L7D+8V3cuHmgAHjGwM6ELUByxUMIOZCmbgAAA5LQ8XeJxjYGRgYABiO68w73h+m68M3EwMIHC+sKIeTqsyqDLeZrwN5HIwgKUB/aYJUgAAeJxjYGRgYLzNwMCgx8QAAkA2IwMqYAIAMGIB7QIAAAACAAAlACUAJQAlAAAAAFAAAAUAAHicbY49asNAEIU/2ZJDfkiRIvXapUFCEqpcptABUrg3ZhEiQoKVfY9UqVLlGDlADpAT5e16IUWysMz3hjfzBrjjjQT/EjKpCy+4YhN5yZoxcirPe+SMWz4jr6S+5UzSa3VuwpTnBfc8RF7yxDZyKs9r5IxHPiKv1P9iZqDnyAvMQ39UecbScVb/gJO03Xk4CFom3XYK1clhMdQUlKo7/d9NF13RkIdfy+MV7TSe2sl11tRFaXYmJKpWTd7kdVnJ8veevZKc+n3I93t9Jnvr5n4aTVWU/0z9AI2qMkV4nGNgZkAGjAxoAAAAjgAF') format('woff'), url('data:font/ttf;base64,AAEAAAANAIAAAwBQRkZUTW3RyK8AAAdIAAAAHEdERUYANAAGAAAHKAAAACBPUy8yT/b9sgAAAVgAAABWY21hcCIPRb0AAAHIAAABYmdhc3D//wADAAAHIAAAAAhnbHlmP5u2YAAAAzwAAAIsaGVhZAABMfsAAADcAAAANmhoZWED5QIFAAABFAAAACRobXR4BkoASgAAAbAAAAAWbG9jYQD2AaIAAAMsAAAAEG1heHAASwBHAAABOAAAACBuYW1lBSeBwgAABWgAAAFucG9zdC+zMgMAAAbYAAAARQABAAAAAQAA8MQQT18PPPUACwIAAAAAAM9xeH8AAAAAz3F4fwAlACUB2wHbAAAACAACAAAAAAAAAAEAAAHbAAAALgIAAAAAAAHbAAEAAAAAAAAAAAAAAAAAAAAEAAEAAAAHAEQAAgAAAAAAAgAAAAEAAQAAAEAAAAAAAAAAAQIAAZAABQAIAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAIABQkAAAAAAACAAAABAAAAIAAAAAAAAAAAUGZFZABAAGEhkgHg/+AALgHb/9sAAAABAAAAAAAAAgAAAAAAAAACAAAAAgAAJQAlACUAJQAAAAAAAwAAAAMAAAAcAAEAAAAAAFwAAwABAAAAHAAEAEAAAAAMAAgAAgAEAAAAYSAiIZAhkv//AAAAAABhICIhkCGS//8AAP+l3+PedN5xAAEAAAAAAAAAAAAAAAAAAAEGAAABAAAAAAAAAAECAAAAAgAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGAIwAsAEWAAIAJQAlAdsB2wAYACwAAD8BNjQvASYjIg8BBhUUHwEHBhUUHwEWMzI2FAcGBwYiJyYnJjQ3Njc2MhcWF/GCBgaCBQcIBR0GBldXBgYdBQgH7x0eMjB8MDIeHR0eMjB8MDIecYIGDgaCBQUeBQcJBFhYBAkHBR4F0nwwMh4dHR4yMHwwMh4dHR4yAAAAAgAlACUB2wHbABgALAAAJTc2NTQvATc2NTQvASYjIg8BBhQfARYzMjYUBwYHBiInJicmNDc2NzYyFxYXASgdBgZXVwYGHQUIBwWCBgaCBQcIuB0eMjB8MDIeHR0eMjB8MDIecR4FBwkEWFgECQcFHgUFggYOBoIF0nwwMh4dHR4yMHwwMh4dHR4yAAABACUAJQHbAdsAEwAAABQHBgcGIicmJyY0NzY3NjIXFhcB2x0eMjB8MDIeHR0eMjB8MDIeAT58MDIeHR0eMjB8MDIeHR0eMgABACUAJQHbAdsAQwAAARUUBisBIicmPwEmIyIHBgcGBwYUFxYXFhcWMzI3Njc2MzIfARYVFAcGBwYjIicmJyYnJjQ3Njc2NzYzMhcWFzc2FxYB2woIgAsGBQkoKjodHBwSFAwLCwwUEhwcHSIeIBMGAQQDJwMCISspNC8mLBobFBERFBsaLCYvKicpHSUIDAsBt4AICgsLCScnCwwUEhwcOhwcEhQMCw8OHAMDJwMDAgQnFBQRFBsaLCZeJiwaGxQRDxEcJQgEBgAAAAAAAAwAlgABAAAAAAABAAUADAABAAAAAAACAAcAIgABAAAAAAADACEAbgABAAAAAAAEAAUAnAABAAAAAAAFAAsAugABAAAAAAAGAAUA0gADAAEECQABAAoAAAADAAEECQACAA4AEgADAAEECQADAEIAKgADAAEECQAEAAoAkAADAAEECQAFABYAogADAAEECQAGAAoAxgBzAGwAaQBjAGsAAHNsaWNrAABSAGUAZwB1AGwAYQByAABSZWd1bGFyAABGAG8AbgB0AEYAbwByAGcAZQAgADIALgAwACAAOgAgAHMAbABpAGMAawAgADoAIAAxADQALQA0AC0AMgAwADEANAAARm9udEZvcmdlIDIuMCA6IHNsaWNrIDogMTQtNC0yMDE0AABzAGwAaQBjAGsAAHNsaWNrAABWAGUAcgBzAGkAbwBuACAAMQAuADAAAFZlcnNpb24gMS4wAABzAGwAaQBjAGsAAHNsaWNrAAAAAAIAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAABwAAAAEAAgECAQMAhwBECmFycm93cmlnaHQJYXJyb3dsZWZ0AAAAAAAAAf//AAIAAQAAAA4AAAAYAAAAAAACAAEAAwAGAAEABAAAAAIAAAAAAAEAAAAAzu7XsAAAAADPcXh/AAAAAM9xeH8=') format('truetype'), url('/assets/slick-BlzDm7g2.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
.item-card {
  transition-duration: 0.3s, 0.3s, 0.3s;
  transition-property: --bg-color-1, --bg-color-2, --bg-color-3;
  background-image:
    radial-gradient(
      65% 110% at 50% 0,
      var(--bg-color-1) 0,
      rgba(103, 69, 69, 0) 100%
    ),
    radial-gradient(
      66% 135% at 77% 23%,
      var(--bg-color-2) 0,
      hsla(68, 15%, 59%, 0) 80%
    ),
    radial-gradient(
      125% 234% at 10% 142%,
      var(--bg-color-3) 0,
      hsla(0, 0%, 100%, 0) 37%
    );
  --bg-color-1: rgba(168, 92, 92, 0);
  --bg-color-2: rgba(4, 0, 255, 0);
  --bg-color-3: rgba(217, 126, 75, 0);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.item-card:hover {
  --bg-color-1: var(--ph-surface-container-lowest);
  --bg-color-2: var(--ph-surface-container-low);
  --bg-color-3: var(--ph-surface-container-lowest);
  /* hide - was only for testing
   --bg-color-1: rgba(168, 92, 92, 0.1);
  --bg-color-2: rgba(4, 0, 255, 0.15);
  --bg-color-3: rgba(217, 126, 75, 0.15); */
  --tw-border-opacity: 0.15;
  /* --bg-color-1: var(--ph-surface-container-lowest);
  --bg-color-2: var(--ph-surface-container);
  --bg-color-3: var(--ph-surface-container-high); */
}
.table-row {
  border-bottom: 1px solid var(--ph-ref-palette-neutral96);
  transition: background 0.12s ease-in-out;
}

.table-row td {
  padding: 10px 22px;
}

.table-row:hover {
  background: var(--ph-ref-palette-neutral98);
}

.table-row:last-child {
  border-bottom: none;
}
/*
 * DataTable design tokens
 * oklch-based color system per Photon-UI business-web theme spec
 */

.data-table-root {
  /* Primary — Purple hue 321.31 */
  --dt-primary-10: oklch(10% 0.163 321.31);
  --dt-primary-20: oklch(20% 0.163 321.31);
  --dt-primary-30: oklch(30% 0.163 321.31);
  --dt-primary-40: oklch(40.087% 0.163 321.31);
  --dt-primary-60: oklch(60% 0.163 321.31);
  --dt-primary-95: oklch(95% 0.04 321.31);
  --dt-primary-97: oklch(97% 0.02 321.31);
  --dt-primary-98: oklch(98% 0.01 321.31);

  /* Secondary — Orange hue 39.231 */
  --dt-secondary-30: oklch(30% 0.12 39.231);
  --dt-secondary-40: oklch(40% 0.193 39.231);
  --dt-secondary-95: oklch(95% 0.03 39.231);

  /* Tertiary — Teal hue 210.05 */
  --dt-tertiary-30: oklch(30% 0.10 210.05);
  --dt-tertiary-40: oklch(40% 0.118 210.05);
  --dt-tertiary-95: oklch(95% 0.025 210.05);

  /* Neutral — hue 321.31 chroma 0.004 */
  --dt-n-5: oklch(5% 0.004 321.31);
  --dt-n-10: oklch(10% 0.004 321.31);
  --dt-n-20: oklch(20% 0.004 321.31);
  --dt-n-30: oklch(30% 0.004 321.31);
  --dt-n-50: oklch(50% 0.004 321.31);
  --dt-n-60: oklch(60% 0.004 321.31);
  --dt-n-70: oklch(70% 0.004 321.31);
  --dt-n-90: oklch(90% 0.004 321.31);
  --dt-n-92: oklch(92% 0.004 321.31);
  --dt-n-94: oklch(94% 0.004 321.31);
  --dt-n-96: oklch(96% 0.004 321.31);
  --dt-n-98: oklch(98% 0.004 321.31);
  --dt-n-100: oklch(100% 0.004 321.31);

  /* Neutral-variant — hue 321.31 chroma 0.007 */
  --dt-nv-85: oklch(85% 0.007 321.31);
  --dt-nv-98: oklch(98% 0.007 321.31);

  /* Semantic aliases */
  --dt-surface: var(--dt-n-100);
  --dt-on-surface: var(--dt-n-5);
  --dt-on-surface-variant: var(--dt-n-30);
  --dt-outline-variant: var(--dt-nv-85);

  /* Shadows */
  --dt-shadow-xs: 0 1px 2px oklch(20% 0.004 321.31 / 0.04);

  /* Radius */
  --dt-radius-xs: 3px;
  --dt-radius-sm: 4px;
  --dt-radius-md: 6px;
  --dt-radius-lg: 10px;
  --dt-radius-xl: 12px;

  /* Typography */
  --dt-font-brand: 'Plus Jakarta Sans', system-ui, sans-serif;
  --dt-font-plain: 'DM Sans', system-ui, sans-serif;
}

/* ── Table card ─────────────────────────────────────── */

.data-table-card {
  border: 0.5px solid var(--dt-n-90);
  border-radius: var(--dt-radius-xl);
  overflow: hidden;
  background: var(--dt-surface);
  box-shadow: var(--dt-shadow-xs);
  animation: dt-fadeIn 0.35s ease;
}

.data-table-card-overflow {
  overflow-x: auto;
  overflow-y: hidden;
}

/* ── Table element ──────────────────────────────────── */

.data-table-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-family: var(--dt-font-plain);
}

/* ── thead ──────────────────────────────────────────── */

.data-table-card thead {
  background: var(--dt-nv-98);
}

/* ── th ─────────────────────────────────────────────── */

.data-table-card th {
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dt-n-50);
  white-space: nowrap;
  user-select: none;
  border-bottom: 0.5px solid var(--dt-n-92);
}

.data-table-card th.dt-align-center {
  text-align: center;
}
.data-table-card th.dt-align-right {
  text-align: right;
}

.data-table-card th.dt-sortable {
  cursor: pointer;
}
.data-table-card th.dt-sortable:hover {
  color: var(--dt-n-30);
}
.data-table-card th.dt-sorted {
  color: var(--dt-primary-40);
}

.dt-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dt-resize-handle {
  width: 10px;
  min-width: 10px;
  height: 18px;
  cursor: col-resize;
  position: relative;
}

.dt-resize-handle::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--dt-n-70);
  opacity: 0.8;
}

/* Sort arrow */
.dt-sort-arrow {
  display: inline-block;
  margin-left: 3px;
  opacity: 0.5;
}
.dt-sorted .dt-sort-arrow {
  opacity: 1;
  color: var(--dt-primary-40);
}

/* ── td ─────────────────────────────────────────────── */

.data-table-card td {
  padding: 10px 14px;
  border-top: 0.5px solid var(--dt-n-94);
  color: var(--dt-on-surface);
  vertical-align: middle;
}
.data-table-card td.dt-align-center {
  text-align: center;
}
.data-table-card td.dt-align-right {
  text-align: right;
}

.data-table-card tbody tr:first-child td {
  border-top: none;
}

/* ── Row states ─────────────────────────────────────── */

.data-table-card tbody tr {
  cursor: pointer;
}
.data-table-card tbody tr td {
  transition: background 0.08s;
}
.data-table-card tbody tr:hover td {
  background: var(--dt-nv-98);
}
.data-table-card tbody tr.dt-row-selected td {
  background: var(--dt-primary-98);
}

/* ── Checkbox column ────────────────────────────────── */

.dt-checkbox-cell {
  width: 40px;
  padding-left: 14px !important;
  padding-right: 4px !important;
}

.dt-checkbox {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  accent-color: var(--dt-primary-40);
  cursor: pointer;
}

/* ── Empty state ────────────────────────────────────── */

.dt-empty-state {
  padding: 60px 24px;
  text-align: center;
}

.dt-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--dt-n-94);
  color: var(--dt-n-60);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.dt-empty-title {
  font-family: var(--dt-font-brand);
  font-size: 16px;
  font-weight: 600;
  color: var(--dt-n-20);
  margin-bottom: 6px;
}

.dt-empty-description {
  font-size: 13px;
  color: var(--dt-n-50);
  margin-bottom: 16px;
}

/* ── Loading skeleton ───────────────────────────────── */

.dt-skeleton-bar {
  background: var(--dt-n-94);
  border-radius: var(--dt-radius-sm);
  height: 14px;
  animation: dt-pulse 1.5s ease infinite;
}

/* ── Responsive column hiding ───────────────────────── */

@media (max-width: 960px) {
  .col-hide-960 {
    display: none;
  }
}

@media (max-width: 740px) {
  .col-hide-740 {
    display: none;
  }
}

@media (max-width: 560px) {
  .col-hide-560 {
    display: none;
  }

  .data-table-card th,
  .data-table-card td {
    padding: 8px 10px;
  }
}

/* ── ThumbnailNameCell ───────────────────────────────── */

.dt-thumbnail-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dt-thumbnail {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--dt-radius-md);
  overflow: hidden;
  background: var(--dt-n-96);
  border: 0.5px solid var(--dt-n-90);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dt-thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dt-thumbnail-placeholder {
  color: var(--dt-n-70);
}

.dt-thumbnail-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dt-thumbnail-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--dt-n-10);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.dt-thumbnail-sku {
  font-size: 11px;
  color: var(--dt-n-50);
  font-family: 'DM Sans', monospace;
  letter-spacing: 0.02em;
}

.dt-thumbnail-type-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--dt-radius-xs);
  background: var(--dt-primary-95);
  color: var(--dt-primary-40);
  width: fit-content;
  margin-top: 2px;
}

@media (max-width: 740px) {
  .dt-thumbnail-name {
    max-width: 200px;
  }
}

@media (max-width: 560px) {
  .dt-thumbnail {
    width: 36px;
    height: 36px;
  }
}

/* ── Pagination ─────────────────────────────────────── */

.dt-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  font-family: var(--dt-font-plain);
  font-size: 12px;
}

.dt-pagination-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dt-pagination-label {
  color: var(--dt-n-50);
}

.dt-pagination-select {
  font-size: 12px;
  font-family: var(--dt-font-plain);
  padding: 4px 8px;
  border: 0.5px solid var(--dt-outline-variant);
  border-radius: var(--dt-radius-sm);
  background: var(--dt-surface);
  color: var(--dt-n-30);
  cursor: pointer;
  outline: none;
}
.dt-pagination-select:focus {
  border-color: var(--dt-primary-40);
}

.dt-pagination-right {
  display: flex;
  gap: 3px;
}

.dt-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: var(--dt-radius-sm);
  border: 0.5px solid var(--dt-n-90);
  background: var(--dt-surface);
  font-family: var(--dt-font-plain);
  font-size: 12px;
  color: var(--dt-n-30);
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
}
.dt-page-btn:hover:not(:disabled):not(.dt-page-ellipsis):not(.dt-page-active) {
  background: var(--dt-n-98);
  border-color: var(--dt-n-70);
}

.dt-page-btn.dt-page-active {
  background: var(--dt-primary-20);
  color: oklch(96% 0.02 321.31);
  border-color: var(--dt-primary-20);
  font-weight: 600;
}

.dt-page-btn:disabled {
  opacity: 0.3;
  pointer-events: none;
}

.dt-page-ellipsis {
  pointer-events: none;
  border-color: transparent;
  background: transparent;
}

.dt-page-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 560px) {
  .dt-pagination {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

/* ── Expandable rows ────────────────────────────────── */

/* Chevron column (both th and td share width via inline style). */
.data-table-card .dt-expand-icon-cell {
  padding: 0 !important;
  text-align: center;
  vertical-align: middle;
}

.dt-expand-icon-header {
  background: var(--dt-nv-98);
}

/* Tight padding when chevron is at the end. */
.dt-expand-icon-cell-end {
  padding-right: 8px !important;
}

.dt-chevron-wrap {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  border-radius: var(--dt-radius-sm);
  color: var(--dt-n-60);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.data-table-card tbody tr:hover .dt-chevron-wrap,
.dt-chevron-wrap-open {
  color: var(--dt-primary-40);
}

.dt-chevron-wrap:hover {
  background: var(--dt-n-94);
}

.dt-chevron {
  transition: transform 150ms ease-out;
}

.dt-chevron-open {
  transform: rotate(90deg);
}

/* Expandable host rows */
.data-table-card tbody tr.dt-row-expandable-host {
  cursor: default;
}

.data-table-card tbody tr.dt-row-expandable {
  cursor: pointer;
}

.data-table-card tbody tr.dt-row-expandable:focus-visible {
  outline: 2px solid var(--dt-primary-40);
  outline-offset: -2px;
}

/* Visually merge expanded trigger row into the panel beneath. */
.data-table-card tbody tr.dt-row-expanded > td {
  background: var(--dt-nv-98);
  border-bottom-color: transparent;
}

/* Expanded row td (no padding — panel handles its own). */
.dt-expanded-tr > td.dt-expanded-cell {
  padding: 0 !important;
  border-top: none;
  background: var(--dt-nv-98);
}

.data-table-card tbody tr.dt-row-last + .dt-expanded-tr > td {
  border-bottom: none;
}

.dt-expanded-panel {
  overflow: hidden;
  background: var(--dt-nv-98);
  animation: dt-expand-open 200ms ease-out forwards;
}

.dt-expanded-panel-closing {
  animation: dt-expand-close 180ms ease-in forwards;
}

.dt-expanded-panel-inner {
  padding: 14px 14px 14px 52px;
  border-top: 0.5px solid var(--dt-n-94);
}

@keyframes dt-expand-open {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: var(--dt-expand-target, 9999px);
    opacity: 1;
  }
}

@keyframes dt-expand-close {
  from {
    max-height: var(--dt-expand-target, 9999px);
    opacity: 1;
  }
  to {
    max-height: 0;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dt-chevron {
    transition: none;
  }
  .dt-expanded-panel,
  .dt-expanded-panel-closing {
    animation-duration: 0ms;
  }
}

/* When chevron column is responsive-hidden, shrink padding. */
@media (max-width: 560px) {
  .dt-expanded-panel-inner {
    padding-left: 16px;
  }
}

/* ── Keyframes ──────────────────────────────────────── */

@keyframes dt-fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dt-pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}
/*
 * C13 Compact Data Table — inline section tables (detail pages).
 * Tokens: --ph-* (Photon business-web theme).
 */

.compact-data-table-root {
  width: 100%;
}

.compact-data-table-root table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ph-ref-typeface-base, 'DM Sans', system-ui, sans-serif);
  font-size: 12px;
  line-height: 1.35;
}

/* Headers: label-sm */
.compact-data-table-root thead tr {
  border-bottom: 1.5px solid var(--ph-ref-palette-neutral90, oklch(90% 0.004 321));
}

.compact-data-table-root th {
  padding: 6px 8px;
  text-align: left;
  font-family: var(--ph-ref-typeface-accent, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral50, oklch(50% 0.004 321));
  white-space: nowrap;
  user-select: none;
  background: transparent;
}

.compact-data-table-root th.cdt-align-center {
  text-align: center;
}
.compact-data-table-root th.cdt-align-right {
  text-align: right;
}

/* Body rows */
.compact-data-table-root tbody tr {
  border-bottom: 1px solid var(--ph-ref-palette-neutral95, oklch(95% 0.004 321));
}

.compact-data-table-root tbody tr:last-child {
  border-bottom: none;
}

.compact-data-table-root td {
  padding: 8px 8px;
  vertical-align: middle;
  color: var(--ph-on-surface, oklch(20% 0.004 321));
}

.compact-data-table-root td.cdt-align-center {
  text-align: center;
}
.compact-data-table-root td.cdt-align-right {
  text-align: right;
}

.compact-data-table-root tbody tr.cdt-row-clickable {
  cursor: pointer;
}
.compact-data-table-root tbody tr.cdt-row-clickable:hover td {
  background: var(--ph-surface-container, oklch(96% 0.008 321));
}

/* Cell tone (optional column metadata) */
.cdt-cell-primary {
  font-weight: 500;
  color: var(--ph-on-surface, oklch(20% 0.004 321));
}

.cdt-cell-secondary {
  font-weight: 400;
  color: var(--ph-ref-palette-neutral40, oklch(40% 0.004 321));
}

.cdt-cell-numeric {
  font-family: var(--ph-ref-typeface-base, 'DM Sans', system-ui, sans-serif);
  font-weight: 400;
  text-align: right;
}

.cdt-cell-currency {
  font-family: var(--ph-ref-typeface-accent, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-weight: 600;
  text-align: right;
  color: var(--ph-on-surface, oklch(20% 0.004 321));
}

/* Responsive column hide (<640px) — use on column.responsiveClass */
@media (max-width: 639px) {
  .cdt-col-hide-below-sm {
    display: none;
  }
}

/* Loading skeleton */
.cdt-skeleton-bar {
  height: 14px;
  border-radius: 4px;
  background: var(--ph-ref-palette-neutral94, oklch(94% 0.004 321));
  animation: cdt-pulse 1.4s ease-in-out infinite;
}

@keyframes cdt-pulse {
  0%,
  100% {
    opacity: 0.45;
  }
  50% {
    opacity: 1;
  }
}

/* Empty state (C6-style dashed slot, compact) */
.cdt-empty-slot {
  margin: 12px 8px 16px;
  padding: 20px 16px;
  text-align: center;
  border: 2px dashed var(--ph-ref-palette-primary80, oklch(80% 0.08 321));
  border-radius: var(--ph-sys-shape-corner-md, 12px);
  background: var(--ph-surface-container-lowest, oklch(99% 0.002 321));
  font-size: 13px;
  color: var(--ph-ref-palette-neutral50, oklch(50% 0.004 321));
}

.cdt-empty-slot--warning {
  border-color: var(--ph-ref-palette-secondary60, oklch(60% 0.14 39));
  background: var(--ph-ref-palette-secondary98, oklch(98% 0.02 39));
}
/*
 * C14 Financial Summary — below C13 or standalone in SectionCard.
 */

.financial-summary {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1.5px solid var(--ph-ref-palette-neutral85, oklch(85% 0.004 321));
  font-family: var(--ph-ref-typeface-base, 'DM Sans', system-ui, sans-serif);
}

.financial-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--ph-ref-palette-neutral95, oklch(95% 0.004 321));
  gap: 12px;
}

.financial-summary__label {
  font-size: 12px;
  font-weight: 400;
  color: var(--ph-ref-palette-neutral50, oklch(50% 0.004 321));
  text-align: left;
}

.financial-summary__value {
  font-size: 12px;
  font-weight: 600;
  font-family: var(--ph-ref-typeface-base, 'DM Sans', system-ui, sans-serif);
  color: var(--ph-on-surface, oklch(20% 0.004 321));
  text-align: right;
  white-space: nowrap;
}

.financial-summary__value--negative {
  color: var(--ph-error, oklch(50% 0.2 25));
}

.financial-summary--numeric .financial-summary__value {
  font-family: var(--ph-ref-typeface-base, 'DM Sans', system-ui, sans-serif);
  font-weight: 700;
}

.financial-summary__separator {
  margin-top: 4px;
  border: none;
  border-top: 1px solid var(--ph-ref-palette-neutral90, oklch(90% 0.004 321));
}

.financial-summary__grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  gap: 12px;
}

.financial-summary__grand-label {
  font-family: var(--ph-ref-typeface-accent, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 13px;
  font-weight: 800;
  color: var(--ph-on-surface, oklch(20% 0.004 321));
}

.financial-summary__grand-value {
  font-family: var(--ph-ref-typeface-accent, 'Plus Jakarta Sans', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-align: right;
  white-space: nowrap;
}

.financial-summary__grand-value--primary {
  color: var(--ph-primary, oklch(40% 0.16 321));
}

.financial-summary__grand-value--secondary {
  color: var(--ph-secondary, oklch(50% 0.16 39));
}

.financial-summary__grand-value--neutral {
  color: var(--ph-on-surface, oklch(20% 0.004 321));
}

.financial-summary--numeric .financial-summary__grand-value--primary {
  color: var(--ph-on-surface, oklch(20% 0.004 321));
}

@media (max-width: 479px) {
  .financial-summary__row--stack-sm {
    flex-direction: column;
    align-items: stretch;
  }
  .financial-summary__row--stack-sm .financial-summary__value {
    text-align: right;
    margin-top: 2px;
  }
}
.media-thumbnail-wrapper {
    position:relative;

}

/* Match tile radius; avoid layout/transform from children breaking parent clip on hover */
.media-item-overlay {
    border-radius: inherit;
    overflow: hidden;
}
.media-thumbnail-wrapper[data-view="card"] {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
}
.media-thumbnail-wrapper[data-view="card-small"] {
    width: 100%;
    min-width: 0;
    aspect-ratio: 1 / 1;
}.gallery-container {
  gap: 1rem;
}

/* minmax min tracks minimum tile size; 1fr lets columns share row width evenly. Items must be width:100% in the cell (see MediaItem.css). */
.gallery-container[data-view-mode='card'] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  align-items: start;
}

.gallery-container[data-view-mode='card-small'] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  align-items: start;
}
.generate-media-container {
  background: radial-gradient(circle, #f3f4f6 60%, #e5e7eb 100%);
  padding: 2rem;
  height: 100%;
}
.chat-container {
  margin-left: auto;
  margin-right: auto;
  width: 700px;
  padding: 0.5rem;
  background: white;
  border-radius: 1rem;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  display: flex;
}
/* EditableText (inline plain-text editor used inside CoverRenderer when
   `editable` is on). The visible text comes from the rendered `Text`
   component; the textarea below is sized to match and accepts input. */

.editable-text {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}

.editable-text__display {
  pointer-events: none;
  user-select: none;
  white-space: pre-wrap;
  visibility: hidden;
}

.editable-text__input {
  position: absolute;
  inset: 0;
  appearance: none;
  background: transparent;
  border: 1.5px dashed transparent;
  border-radius: 6px;
  padding: 4px;
  margin: -4px;
  resize: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  outline: none;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  overflow: hidden;
}

.editable-text__input:hover {
  border-color: var(--ph-ref-palette-primary70, #7a73c4);
}

.editable-text__input:focus,
.editable-text__input:focus-visible {
  border-color: var(--ph-primary, #4a4a90);
  border-style: solid;
  background: var(--ph-surface, #fff);
}
/* =========================================================================
 *  CoverRenderer — P7.1
 *
 *  All editor/runtime cover styling. Driven entirely by Photon `--ph-*`
 *  tokens via the locally-scoped `--cover-*` variables `CoverRenderer.tsx`
 *  emits inline. No legacy md tokens, no hardcoded brand colors.
 * ========================================================================= */

.cover {
  --_radius: var(--cover-radius, var(--ph-ref-shape-md, 12px));

  position: relative;
  display: flex;
  width: 100%;
  max-width: 1536px;
  margin-inline: auto;
  background: var(--cover-bg);
  color: var(--cover-text);
  border-radius: var(--_radius);
  /* P5.2j — surface border. Editor frame writes one of
     'none' | 'subtle' | 'strong' onto `surface_border`; the renderer
     translates that to a CSS border via `--cover-border`. */
  border: var(--cover-border, 0);
  overflow: hidden;
  isolation: isolate; /* keep media overlay scoped */
  min-height: var(--cover-min-height);
}

/* P5.2j — typestyle overrides applied to the canonical title /
 * subtitle / CTA elements. Driven by data-attributes the renderer
 * writes on the outer wrapper; consume the per-slot CSS vars
 * `--cover-title-font`, `--cover-body-font`, `--cover-cta-font` and
 * scale multipliers `--cover-title-scale`, `--cover-body-scale`. */
.cover[data-title-typestyle] .cover__title {
  font-family: var(--cover-title-font, inherit);
  font-size: calc(1em * var(--cover-title-scale, 1));
}

.cover[data-body-typestyle] .cover__subtitle {
  font-family: var(--cover-body-font, inherit);
  font-size: calc(1em * var(--cover-body-scale, 1));
}

.cover[data-cta-typestyle] .cover__cta-label {
  font-family: var(--cover-cta-font, inherit);
}

.cover__preserve-lines {
  white-space: pre-line;
  word-break: break-word;
}

/* ---------- Media slot ---------- */
.cover__media {
  position: relative;
  flex: none;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    var(--ph-ref-palette-neutral92, #e7e5e4) 0%,
    var(--ph-ref-palette-neutral88, #dcdad9) 100%
  );
}

.cover__media--empty {
  /* No URL: keep the slot in flow so split layouts don't collapse. */
  background-image: repeating-linear-gradient(
    135deg,
    var(--ph-ref-palette-neutral96, #f1efee),
    var(--ph-ref-palette-neutral96, #f1efee) 12px,
    var(--ph-ref-palette-neutral92, #e7e5e4) 12px,
    var(--ph-ref-palette-neutral92, #e7e5e4) 24px
  );
}

.cover__media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--cover-focal, center);
  display: block;
}

.cover__media-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(0 0 0 / calc(var(--cover-overlay-alpha) * 0.5)) 0%,
    rgb(0 0 0 / var(--cover-overlay-alpha)) 100%
  );
  pointer-events: none;
}

/* ---------- Content slot ---------- */
.cover__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  padding: var(--cover-padding);
  flex: 1;
  min-width: 0;
}

.cover__content--main-start {
  justify-content: flex-start;
}
.cover__content--main-center {
  justify-content: center;
}
.cover__content--main-end {
  justify-content: flex-end;
}

.cover__content--cross-start {
  align-items: flex-start;
  text-align: left;
}
.cover__content--cross-center {
  align-items: center;
  text-align: center;
}
.cover__content--cross-end {
  align-items: flex-end;
  text-align: right;
}

.cover__title-wrap,
.cover__subtitle-wrap,
.cover__action-wrap {
  width: 100%;
  max-width: var(--cover-content-max);
  display: flex;
  flex-direction: column;
}

.cover__content--cross-center .cover__title-wrap,
.cover__content--cross-center .cover__subtitle-wrap,
.cover__content--cross-center .cover__action-wrap {
  align-items: center;
}

.cover__content--cross-end .cover__title-wrap,
.cover__content--cross-end .cover__subtitle-wrap,
.cover__content--cross-end .cover__action-wrap {
  align-items: flex-end;
}

.cover__title {
  color: var(--cover-text);
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.cover__subtitle {
  color: var(--cover-text);
  opacity: 0.86;
  line-height: 1.55;
  font-size: clamp(14px, 1.4vw, 17px);
}

.cover__action-wrap {
  margin-top: clamp(8px, 1vw, 12px);
}

/* ---------- CTA ---------- */
.cover__cta {
  --_pad-x: clamp(18px, 1.6vw, 28px);
  --_pad-y: clamp(10px, 1vw, 14px);

  appearance: none;
  border: none;
  cursor: pointer;
  background: var(--cover-cta-bg);
  color: var(--cover-cta-fg);
  padding: var(--_pad-y) var(--_pad-x);
  border-radius: var(--ph-ref-shape-sm, 8px);
  font: inherit;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
  box-shadow: var(--ph-sys-elevation-1, 0 1px 2px rgb(0 0 0 / 0.06));
  white-space: nowrap;
}

.cover__cta:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.cover__cta:focus-visible {
  outline: 3px solid var(--ph-primary, #4a4a90);
  outline-offset: 3px;
}

.cover__cta--secondary {
  background: transparent;
  color: var(--cover-text);
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.cover__cta--tertiary,
.cover__cta--subtle {
  background: transparent;
  color: var(--cover-text);
  box-shadow: none;
  padding-inline: 0;
}

.cover__cta-label {
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* =========================================================================
 *  Layout: image-bg (canonical `default` / legacy `stack`)
 *
 *  The media fills the block; content sits on top with an overlay so the
 *  text stays legible against any photo. The content uses an "on-media"
 *  treatment that leans on white text by default unless an explicit text
 *  color is supplied.
 * ========================================================================= */
.cover--image-bg {
  position: relative;
}

.cover--image-bg .cover__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.cover--image-bg .cover__content {
  position: relative;
  z-index: 1;
  min-height: var(--cover-min-height);
}

.cover--image-bg .cover__content--on-media {
  /* When sitting over media we lean on a darker overlay so neutral text
     stays readable. Operators can still override --cover-text through the
     resolver. White text + minimum-floor overlay (see CoverRenderer) keeps
     the title/subtitle/CTA legible on busy food photos. */
  --cover-text: var(--ph-on-primary, #ffffff);
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.45);
}

.cover--image-bg .cover__content--on-media .cover__title {
  text-shadow: 0 2px 10px rgb(0 0 0 / 0.45);
}

.cover--image-bg .cover__content--on-media .cover__subtitle {
  /* Don't dim the subtitle further on top of darkened photos — overlay
     already takes care of contrast. */
  opacity: 1;
}

.cover--image-bg .cover__content--on-media .cover__cta {
  box-shadow:
    var(--ph-sys-elevation-1, 0 1px 2px rgb(0 0 0 / 0.06)),
    0 6px 18px rgb(0 0 0 / 0.32);
}

/* =========================================================================
 *  Layout: centered (canonical)
 *
 *  Text-first hero. Media is omitted by default; if the operator provides
 *  one we render it as a hero card above the content.
 * ========================================================================= */
.cover--centered {
  flex-direction: column;
  align-items: stretch;
  background: var(--cover-bg);
}

.cover--centered .cover__media {
  flex: none;
  width: 100%;
  height: clamp(180px, 28vh, 320px);
  border-radius: 0;
}

.cover--centered .cover__content {
  align-items: center;
  text-align: center;
  padding-block: clamp(40px, 6vw, 96px);
}

.cover--centered .cover__title-wrap,
.cover--centered .cover__subtitle-wrap,
.cover--centered .cover__action-wrap {
  align-items: center;
}

/* =========================================================================
 *  Layout: split-left / split-right / split-top (canonical `split`
 *  refined by `media_position`; legacy `row` / `row-reversed` map to
 *  split-left / split-right via VARIANT_MAP).
 * ========================================================================= */
.cover--split-left,
.cover--split-right,
.cover--split-top {
  flex-direction: column;
  align-items: stretch;
}

.cover--split-left .cover__media,
.cover--split-right .cover__media,
.cover--split-top .cover__media {
  width: 100%;
  flex: none;
  min-height: clamp(220px, 36vh, 360px);
  border-radius: var(--cover-media-radius, 0);
}

@media (min-width: 768px) {
  .cover--split-left,
  .cover--split-right {
    flex-direction: row;
  }

  .cover--split-right {
    flex-direction: row-reverse;
  }

  .cover--split-left .cover__media,
  .cover--split-right .cover__media {
    width: 50%;
    min-height: var(--cover-min-height);
    align-self: stretch;
  }

  .cover--split-left .cover__content,
  .cover--split-right .cover__content {
    width: 50%;
    align-self: stretch;
  }

  /* split-top stays stacked even on desktop — the spec uses it for
   * media_position=top where text sits below the photo. */
}

/* =========================================================================
 *  P7.1b additions: eyebrow, badge, secondary CTA, action group
 * ========================================================================= */
.cover__lede-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.cover__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 700;
  color: var(--cover-text);
  opacity: 0.78;
}

.cover__badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  background: var(--ph-secondary-container, var(--ph-ref-palette-primary94));
  color: var(--ph-on-secondary-container, var(--ph-ref-palette-primary20));
  border-radius: var(--ph-ref-shape-sm, 999px);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.cover__action-wrap {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cover__cta:where(a) {
  text-decoration: none;
}

/* =========================================================================
 *  Reduced motion
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .cover * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/*
 * CMS2 editor frame styles.
 *
 * Editor chrome here uses --ph-* tokens only. The five frame-only token
 * additions (selection-outline, focus-ring, scrim alpha, elevations) are
 * declared on the .cms2-frame root so foundations layer can adopt them
 * before Scope 2 lands.
 *
 * The website preview itself is rendered by the real CMS block runtime
 * (`Cms2RuntimePreview` -> `DynamicRendererComponent` under
 * `PhotonThemeProvider`). The selection / hover / state outline classes
 * (`cms2-preview__section--*`) are kept as a generic overlay vocabulary —
 * they wrap the runtime-rendered blocks without forking them.
 */

.cms2-frame {
  --cms2-elev-1: 0 1px 2px oklch(20% 0.005 321.31 / 0.04);
  --cms2-elev-2: 0 2px 8px oklch(20% 0.005 321.31 / 0.06),
    0 1px 3px oklch(20% 0.005 321.31 / 0.04);
  --cms2-elev-3: 0 4px 16px oklch(20% 0.005 321.31 / 0.08),
    0 2px 6px oklch(20% 0.005 321.31 / 0.05);
  --cms2-focus-ring: 0 0 0 3px oklch(60% 0.16 321.31 / 0.14);
  --cms2-selection-outline: 0 0 0 2px var(--ph-primary),
    0 0 0 6px oklch(60% 0.16 321.31 / 0.15);
  --cms2-scrim: oklch(20% 0.005 321.31 / 0.45);

  /* Local overrides for the 94-tone palette tokens. The shared brandbook keeps
     secondary94 / tertiary94 at the saturated brand chroma, which makes the
     status pills ("Draft · saved", "live", "Modified") render as vivid
     fluorescent fills instead of the soft pastel surfaces the design calls for.
     Restoring the design's chromas here avoids touching other features that
     consume these tokens. */
  --ph-ref-palette-tertiary94: oklch(94% 0.03 210.05);
  --ph-ref-palette-secondary94: oklch(94% 0.04 39.231);

  /* Pin the editor to the viewport so inner regions can manage their own
     scroll. Without a fixed-height ancestor, height:100% would collapse and
     the whole document would scroll instead of the rails / preview. */
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--ph-surface-container-low);
  color: var(--ph-on-surface);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.5;
}

.cms2-frame *,
.cms2-frame *::before,
.cms2-frame *::after {
  box-sizing: border-box;
}

:where(.cms2-frame) button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
}

.cms2-frame input,
.cms2-frame textarea {
  font-family: inherit;
  color: inherit;
}

.cms2-frame input:focus-visible,
.cms2-frame button:focus-visible {
  outline: 2px solid var(--ph-primary);
  outline-offset: 2px;
}

.cms2-frame ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.cms2-frame ::-webkit-scrollbar-thumb {
  background: var(--ph-ref-palette-neutral85);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.cms2-frame ::-webkit-scrollbar-thumb:hover {
  background: var(--ph-ref-palette-neutral70);
}

.cms2-frame ::-webkit-scrollbar-track {
  background: transparent;
}

@keyframes cms2FadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes cms2SlideUp {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes cms2SlideInRight {
  from {
    transform: translateX(20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes cms2SelectionGlow {
  0%,
  100% {
    box-shadow: var(--cms2-selection-outline);
  }
  50% {
    box-shadow: 0 0 0 2px var(--ph-primary),
      0 0 0 9px oklch(60% 0.16 321.31 / 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cms2-frame *,
  .cms2-frame *::before,
  .cms2-frame *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Buttons (frame-local) ---------- */
.cms2-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--ph-sys-shape-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 150ms;
  white-space: nowrap;
  cursor: pointer;
}

.cms2-btn--sm {
  height: 28px;
  padding: 0 12px;
  font-size: 12px;
}

.cms2-btn--primary {
  background: var(--ph-primary);
  color: var(--ph-on-primary);
  border: none;
}

.cms2-btn--ghost {
  background: var(--ph-surface);
  color: var(--ph-ref-palette-neutral35);
  border: 1.5px solid var(--ph-outline-variant);
}

.cms2-btn--navigate {
  background: var(--ph-ref-palette-primary97);
  color: var(--ph-ref-palette-primary40);
  border: 1.5px solid var(--ph-ref-palette-primary80);
}

.cms2-btn[disabled] {
  opacity: 0.5;
  cursor: default;
}

.cms2-btn--full {
  width: 100%;
}

/* Icon-only square button used in toolbars */
.cms2-iconbtn {
  width: 32px;
  height: 32px;
  border-radius: var(--ph-sys-shape-sm);
  border: 1px solid var(--ph-outline-variant);
  background: var(--ph-surface);
  color: var(--ph-ref-palette-neutral45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 150ms;
  cursor: pointer;
}

.cms2-iconbtn[aria-pressed='true'] {
  border-color: var(--ph-ref-palette-primary80);
  background: var(--ph-ref-palette-primary97);
  color: var(--ph-ref-palette-primary40);
}

/* ---------- Pills ---------- */
.cms2-statuspill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--ph-sys-shape-full);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.cms2-statuspill--neutral {
  background: var(--ph-ref-palette-tertiary94);
  color: var(--ph-ref-palette-tertiary40);
}

.cms2-statuspill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.cms2-metapill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--ph-sys-shape-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  border: 1px solid;
}

.cms2-metapill--neutral {
  background: var(--ph-surface-container);
  color: var(--ph-ref-palette-neutral40);
  border-color: var(--ph-outline-variant);
}

.cms2-metapill--purple {
  background: var(--ph-ref-palette-primary94);
  color: var(--ph-ref-palette-primary40);
  border-color: var(--ph-ref-palette-primary80);
}

.cms2-metapill--teal {
  background: var(--ph-ref-palette-tertiary94);
  color: var(--ph-ref-palette-tertiary40);
  border-color: var(--ph-ref-palette-tertiary80);
}

.cms2-metapill--orange {
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
  border-color: var(--ph-ref-palette-secondary80);
}

/* ---------- Placeholder card ---------- */
.cms2-placeholder {
  padding: 20px 16px;
  background: repeating-linear-gradient(
    135deg,
    var(--ph-ref-palette-neutral98),
    var(--ph-ref-palette-neutral98) 8px,
    var(--ph-ref-palette-neutral96) 8px,
    var(--ph-ref-palette-neutral96) 16px
  );
  border: 1.5px dashed var(--ph-ref-palette-neutral88);
  border-radius: var(--ph-sys-shape-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

.cms2-placeholder__label {
  font-size: 12px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.2px;
  color: var(--ph-ref-palette-neutral40);
}

.cms2-placeholder__hint {
  font-size: 11px;
  font-style: italic;
  color: var(--ph-ref-palette-neutral50);
}

/* ---------- Top bar ---------- */
.cms2-topbar {
  height: 56px;
  background: var(--ph-surface);
  border-bottom: 1px solid var(--ph-ref-palette-neutral90);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  flex-shrink: 0;
  z-index: 10;
}

.cms2-topbar--mobile {
  height: 52px;
  padding: 0 12px;
  gap: 8px;
}

.cms2-topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cms2-topbar__brand-mark {
  width: 30px;
  height: 30px;
  border-radius: var(--ph-sys-shape-sm);
  background: linear-gradient(135deg, var(--ph-primary), var(--ph-tertiary));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cms2-topbar__eyebrow {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  font-weight: 500;
}

.cms2-topbar__pageselect {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ph-on-surface);
  padding: 0;
  margin-top: -2px;
}

.cms2-topbar__pageselect-chev {
  color: var(--ph-ref-palette-neutral45);
}

.cms2-topbar__modes {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--ph-surface-container-low);
  border-radius: var(--ph-sys-shape-sm);
  border: 1px solid var(--ph-ref-palette-neutral92);
}

.cms2-topbar__mode {
  padding: 6px 14px;
  border-radius: 5px;
  background: transparent;
  color: var(--ph-ref-palette-neutral40);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 150ms;
}

.cms2-topbar__mode[aria-selected='true'] {
  background: var(--ph-surface);
  color: var(--ph-ref-palette-primary40);
  box-shadow: var(--cms2-elev-1);
}

.cms2-topbar--tablet .cms2-topbar__mode {
  padding: 6px 10px;
}

.cms2-topbar__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cms2-topbar__divider {
  width: 1px;
  height: 24px;
  background: var(--ph-ref-palette-neutral92);
  margin: 0 4px;
}

/* ---------- Rails ---------- */
.cms2-rail {
  width: 280px;
  flex-shrink: 0;
  background: var(--ph-surface);
  border-right: 1px solid var(--ph-ref-palette-neutral90);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cms2-rail--collapsed {
  width: 52px;
  padding: 12px 0;
  gap: 6px;
  align-items: center;
}

.cms2-rail__header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--ph-ref-palette-neutral92);
}

.cms2-rail__eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral45);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cms2-rail__hint {
  font-size: 12px;
  color: var(--ph-ref-palette-neutral40);
  line-height: 1.4;
  margin-top: 4px;
}

.cms2-rail__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.cms2-rail__body--padded {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cms2-rail__list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.cms2-rail__footer {
  padding: 10px 12px;
  border-top: 1px solid var(--ph-ref-palette-neutral92);
  background: var(--ph-surface-container-low);
}

.cms2-rail__row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin-bottom: 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ph-sys-shape-sm);
  text-align: left;
  transition: all 150ms;
}

.cms2-rail__row:hover {
  background: var(--ph-surface-container-low);
}

.cms2-rail__row[aria-pressed='true'] {
  background: var(--ph-ref-palette-primary97);
  border-color: var(--ph-ref-palette-primary80);
}

.cms2-rail__row[aria-pressed='true']:hover {
  background: var(--ph-ref-palette-primary97);
}

.cms2-rail__row-icon {
  color: var(--ph-ref-palette-neutral45);
  display: inline-flex;
}

.cms2-rail__row[aria-pressed='true'] .cms2-rail__row-icon {
  color: var(--ph-ref-palette-primary40);
}

.cms2-rail__row-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-on-surface);
}

.cms2-rail__row[aria-pressed='true'] .cms2-rail__row-name {
  color: var(--ph-ref-palette-primary40);
}

.cms2-rail__row-meta {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  margin-top: 1px;
}

.cms2-rail__row-flex {
  flex: 1;
  min-width: 0;
}

.cms2-rail__divider {
  height: 1px;
  background: var(--ph-ref-palette-neutral92);
  margin: 8px 4px;
}

.cms2-rail__search-wrap {
  margin-top: 8px;
}

.cms2-rail__fab {
  width: 36px;
  height: 36px;
  border-radius: var(--ph-sys-shape-sm);
  background: var(--ph-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--cms2-elev-2);
  margin-bottom: 6px;
}

/* ---------- Side panel ---------- */
.cms2-panel {
  width: 340px;
  flex-shrink: 0;
  background: var(--ph-surface);
  border-left: 1px solid var(--ph-ref-palette-neutral90);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.cms2-panel__header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--ph-ref-palette-neutral92);
}

.cms2-panel__eyebrow {
  font-size: 10px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral45);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cms2-panel__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cms2-panel__title {
  font-size: 14px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ph-on-surface);
  margin: 0;
}

.cms2-panel__title-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cms2-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cms2-panel__footer {
  padding: 12px 16px;
  border-top: 1px solid var(--ph-ref-palette-neutral92);
  background: var(--ph-surface-container-low);
  display: flex;
  gap: 8px;
}

.cms2-panel__hint-card {
  padding: 12px 14px;
  background: var(--ph-ref-palette-primary98);
  border: 1px solid var(--ph-ref-palette-primary88);
  border-radius: var(--ph-sys-shape-md);
}

.cms2-panel__hint-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ph-ref-palette-primary40);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cms2-panel__hint-text {
  font-size: 12px;
  color: var(--ph-ref-palette-primary40);
  line-height: 1.5;
}

/* ---------- Preview canvas ---------- */
.cms2-canvas {
  flex: 1;
  min-width: 0;
  background: var(--ph-surface-container-low);
  overflow-y: auto;
  padding: 20px 24px;
  position: relative;
}

.cms2-canvas__mode-toggle-wrap {
  position: sticky;
  top: 0;
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
  z-index: 9;
  pointer-events: none;
}

.cms2-canvas__mode-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral88);
  border-radius: var(--ph-sys-shape-sm);
  box-shadow: var(--cms2-elev-2);
  pointer-events: auto;
}

.cms2-canvas__mode-toggle-btn {
  padding: 5px 10px;
  border-radius: 5px;
  background: transparent;
  color: var(--ph-ref-palette-neutral45);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 150ms;
}

.cms2-canvas__mode-toggle-btn[aria-selected='true'] {
  background: var(--ph-ref-palette-primary97);
  color: var(--ph-ref-palette-primary40);
}

.cms2-canvas__viewport {
  margin: 0 auto;
  position: relative;
}

.cms2-canvas__browser {
  background: var(--ph-surface);
  border-radius: var(--ph-sys-shape-md);
  border: 1px solid var(--ph-ref-palette-neutral88);
  /* `overflow: visible` lets the section selection ring render outside the
     section without being clipped. Rounded-corner masking now lives on the
     immediate children: the browser-bar carries its own top corners and
     the runtime-preview wrapper its bottom corners. */
  overflow: visible;
  position: relative;
  box-shadow: var(--cms2-elev-2);
}

.cms2-canvas__browser-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--ph-surface-container-low);
  border-bottom: 1px solid var(--ph-ref-palette-neutral92);
  border-top-left-radius: var(--ph-sys-shape-md);
  border-top-right-radius: var(--ph-sys-shape-md);
}

.cms2-canvas__browser-dots {
  display: flex;
  gap: 4px;
}

.cms2-canvas__browser-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.cms2-canvas__browser-url {
  flex: 1;
  padding: 4px 10px;
  background: var(--ph-surface);
  border-radius: var(--ph-sys-shape-xs);
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  border: 1px solid var(--ph-ref-palette-neutral92);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cms2-canvas__browser-live {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
}

/* ---------- Drawer ---------- */
.cms2-drawer-scrim {
  position: absolute;
  inset: 0;
  background: var(--cms2-scrim);
  z-index: 40;
  animation: cms2FadeIn 200ms;
}

.cms2-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 340px;
  max-width: 100%;
  background: var(--ph-surface);
  box-shadow: -4px 0 16px oklch(20% 0.005 321.31 / 0.14);
  z-index: 50;
  display: flex;
  flex-direction: column;
  animation: cms2SlideInRight 250ms cubic-bezier(0.2, 0, 0, 1);
}

/* ---------- Editor scene layout ---------- */
.cms2-scene {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  position: relative;
}

.cms2-scene__main {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

/* P5.2m — left-dock frame: rail + Level 1 + Level 2 + preview. The
 * preview always sits last (rightmost) so configuration is always
 * to the left of the preview. */
.cms2-scene__main--left-dock {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.cms2-left-rail {
  width: 64px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 4px;
  gap: 2px;
  background: var(--ph-ref-palette-neutral98, rgba(0, 0, 0, 0.02));
  border-right: 1px solid
    var(--ph-ref-palette-neutral90, rgba(0, 0, 0, 0.1));
}

.cms2-left-rail--narrow {
  width: 56px;
}

.cms2-level1 {
  flex-shrink: 0;
}

.cms2-level2 {
  flex-shrink: 0;
}

.cms2-frame--layout-drill-in .cms2-level1,
.cms2-frame--layout-drill-in .cms2-level2 {
  width: 360px;
  min-width: 320px;
}

/* ---------- Mobile editor ---------- */
.cms2-mobile {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--ph-surface-container);
}

.cms2-mobile__stage {
  flex: 1;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px;
  background: radial-gradient(
    at 30% 20%,
    var(--ph-ref-palette-primary97),
    var(--ph-surface-container) 60%
  );
}

.cms2-mobile__device {
  width: 380px;
  background: #000;
  border-radius: 36px;
  padding: 8px;
  box-shadow: 0 24px 50px oklch(20% 0.005 321.31 / 0.18);
  margin-top: 10px;
}

.cms2-mobile__screen {
  background: var(--ph-surface-container-low);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  height: 720px;
  display: flex;
  flex-direction: column;
}

.cms2-mobile__notch {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 110px;
  height: 28px;
  background: #000;
  border-radius: 14px;
  z-index: 20;
}

.cms2-mobile__statusbar {
  padding: 14px 20px 6px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-on-surface);
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: var(--ph-surface);
}

.cms2-mobile__askbar {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ph-ref-palette-neutral92);
  background: var(--ph-surface);
  flex-shrink: 0;
}

.cms2-mobile__askbar-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--ph-ref-palette-primary88);
  background: var(--ph-ref-palette-primary98);
  border-radius: var(--ph-sys-shape-full);
}

.cms2-mobile__askbar-text {
  font-size: 12px;
  color: var(--ph-ref-palette-neutral45);
  flex: 1;
}

.cms2-mobile__preview {
  flex: 1;
  overflow: auto;
  position: relative;
}

.cms2-mobile__preview-scaler {
  transform: scale(0.55);
  transform-origin: top left;
  width: calc(100% / 0.55);
}

.cms2-mobile__sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ph-surface);
  border-top: 1px solid var(--ph-ref-palette-neutral90);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  box-shadow: 0 -6px 20px oklch(20% 0.005 321.31 / 0.1);
  max-height: 50%;
  display: flex;
  flex-direction: column;
  animation: cms2SlideUp 280ms ease-out;
}

.cms2-mobile__sheet-handle-row {
  padding: 8px 0 4px;
  display: flex;
  justify-content: center;
}

.cms2-mobile__sheet-handle {
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--ph-ref-palette-neutral88);
}

.cms2-mobile__sheet-header {
  padding: 4px 16px 12px;
  border-bottom: 1px solid var(--ph-ref-palette-neutral92);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cms2-mobile__sheet-eyebrow {
  font-size: 10px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral55);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cms2-mobile__sheet-title {
  font-size: 15px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ph-on-surface);
  margin-top: 1px;
}

.cms2-mobile__sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}

.cms2-mobile__sheet-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--ph-ref-palette-neutral92);
  background: var(--ph-surface-container-low);
  display: flex;
  gap: 8px;
}

/* ---------- Runtime preview wrapper ----------
 * The center preview is rendered by the real CMS block runtime; this
 * wrapper just lays out the rendered blocks vertically. It must NOT set
 * `overflow`, `border-radius`, padding, or any other property that would
 * change how an unselected section renders. The block components are
 * responsible for their own corner shape; the wrapper is invisible to
 * them. The browser-frame (`.cms2-canvas__browser`) sets `overflow:
 * visible` so the selection ring can extend outside without being clipped.
 */
.cms2-runtime-preview {
  width: 100%;
  display: flex;
  flex-direction: column;
  color: var(--ph-on-surface);
}

.cms2-runtime-section {
  /* `position: relative` here is the *only* container-level effect, and it
     only matters when a selection ring renders — it gives the absolute
     pseudo-element a positioning context. It does not change layout. */
  position: relative;
}

.cms2-runtime-section__async-placeholder {
  margin: 16px;
  padding: 20px 24px;
  background: var(--ph-surface-container-low);
  border: 1px dashed var(--ph-ref-palette-neutral88);
  border-radius: var(--ph-sys-shape-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cms2-runtime-section__async-placeholder-title {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ph-on-surface);
}

.cms2-runtime-section__async-placeholder-body {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ph-ref-palette-neutral45);
}

/* Selection / hover overlays — applied to .cms2-preview__section */
.cms2-preview__section {
  position: relative;
  cursor: pointer;
}

.cms2-preview__section--no-cursor {
  cursor: default;
}

.cms2-preview__section--hoverable:hover::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 8px;
  pointer-events: none;
  box-shadow: 0 0 0 2px oklch(70% 0.1 321.31 / 0.55);
  z-index: 5;
}

.cms2-preview__section--selected::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 8px;
  pointer-events: none;
  animation: cms2SelectionGlow 2.4s ease-in-out infinite;
  z-index: 5;
}

.cms2-preview__section-label {
  position: absolute;
  top: -10px;
  right: 8px;
  padding: 3px 10px;
  background: var(--ph-primary);
  color: #fff;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  z-index: 6;
  box-shadow: var(--cms2-elev-2);
}

/* =========================================================================
 * Scope 2A — content panels
 * ========================================================================= */

/* ---------- Pages rail group labels ---------- */
.cms2-rail__group-label {
  padding: 4px 8px 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral55);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cms2-rail__group-label--divider {
  padding-top: 12px;
  border-top: 1px solid var(--ph-ref-palette-neutral94);
  margin-top: 6px;
}

/* ---------- Button variants ---------- */
.cms2-btn--danger {
  background: var(--ph-surface);
  color: var(--ph-error);
  border: 1.5px solid var(--ph-error-container);
}

/* ---------- Source labels ---------- */
.cms2-sourcelabel {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 6px;
  border-radius: var(--ph-sys-shape-full);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: nowrap;
  border: 1px solid;
}

.cms2-sourcelabel--orange {
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
  border-color: var(--ph-ref-palette-secondary80);
}

.cms2-sourcelabel--neutral {
  background: var(--ph-surface-container-low);
  color: var(--ph-ref-palette-neutral45);
  border-color: var(--ph-ref-palette-neutral88);
}

.cms2-sourcelabel--purple-link,
.cms2-sourcelabel--purple-spark {
  background: var(--ph-ref-palette-primary94);
  color: var(--ph-ref-palette-primary40);
  border-color: var(--ph-ref-palette-primary80);
}

/* ---------- Control group ---------- */
.cms2-control-group {
  margin-bottom: 18px;
}

.cms2-control-group:last-child {
  margin-bottom: 0;
}

.cms2-control-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.cms2-control-group__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral45);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.cms2-rewrite-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--ph-ref-palette-primary40);
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: transparent;
  border: none;
}

/* ---------- Field ---------- */
.cms2-field {
  margin-bottom: 14px;
}

.cms2-field:last-child {
  margin-bottom: 0;
}

.cms2-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 5px;
  gap: 8px;
}

/*
 * Mirrors Photon's `label-md` text variant (see packages/photon-ui Text.tsx).
 * Kept as an explicit rule because Photon's typography is delivered through
 * Tailwind arbitrary utilities on the Text component, not a reusable CSS
 * class. If the Photon label-md spec changes, update both sides.
 */
.cms2-field__label {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--ph-on-surface-variant);
}

.cms2-field__label-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

/*
 * Tighten Photon IconButton for the inline reset action so it doesn't dwarf
 * the source pill next to it. The component still drives hover, focus, and
 * a11y; we only override the size scale.
 */
.cms2-field__reset {
  --_size: 20px;
  --_icon-size: 12px;
  --_text: var(--ph-ref-palette-neutral55);
}

.cms2-field__reset:hover {
  --_text: var(--ph-ref-palette-primary40);
}

/*
 * Field state overrides on top of Photon Input.
 *
 * Cms2Field renders <Input> from @claphere/photon-ui and adds these
 * wrapper-class state styles. We override Photon's scoped --_ vars where
 * possible (background, border color), and fall back to direct CSS for
 * properties Photon doesn't expose as vars (border-style, font-style on the
 * input element).
 *
 * Border longhands are used (not the `border` shorthand) because Tailwind
 * v4's preflight emits `*, ::before, ::after { border: 0 solid }` in the
 * `base` layer. Browsers treat shorthands containing var() as
 * pending-substitution values, and the longhand `border-width: 0` from
 * preflight can win the cascade. Setting border-width as a longhand at our
 * own specificity sidesteps that.
 */
.cms2-field--modified .ph-input-container,
.cms2-field--modified .ph-textarea-container {
  --_bg: var(--ph-ref-palette-primary98);
  --_border-c: var(--ph-ref-palette-primary70);
}

.cms2-field--inherited .ph-input-container,
.cms2-field--inherited .ph-textarea-container {
  --_bg: var(--ph-ref-palette-neutral98);
  --_border-c: var(--ph-ref-palette-neutral88);
  border-style: dashed;
}

.cms2-field--inherited .ph-input-element {
  font-style: italic;
  color: var(--ph-ref-palette-neutral50);
}


.cms2-field__hint {
  font-size: 12px;
  font-style: italic;
  color: var(--ph-ref-palette-neutral45);
  margin-top: 4px;
}

/* ---------- Toggle ---------- */
.cms2-toggle {
  width: 40px;
  height: 22px;
  border-radius: var(--ph-sys-shape-full);
  background: var(--ph-outline-variant);
  position: relative;
  transition: background 150ms;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  padding: 0;
}

.cms2-toggle--on {
  background: var(--ph-primary);
}

.cms2-toggle--disabled {
  background: var(--ph-ref-palette-neutral88);
  opacity: 0.55;
  cursor: not-allowed;
}

.cms2-toggle__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 150ms;
  box-shadow: var(--cms2-elev-1);
}

.cms2-toggle--on .cms2-toggle__knob {
  transform: translateX(18px);
}

/* ---------- Toggle row ---------- */
.cms2-togglerow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  gap: 12px;
}

.cms2-togglerow__copy {
  flex: 1;
  min-width: 0;
}

.cms2-togglerow__label {
  font-size: 13px;
  color: var(--ph-on-surface);
  font-weight: 500;
}

.cms2-togglerow__label--disabled {
  color: var(--ph-ref-palette-neutral55);
}

.cms2-togglerow__hint {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  margin-top: 2px;
}

/* ---------- Accordion row ---------- */
.cms2-accordion {
  border-top: 1px solid var(--ph-ref-palette-neutral92);
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
}

.cms2-accordion__head {
  width: calc(100% + 32px);
  margin-left: -16px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral35);
}

.cms2-accordion__chev {
  color: var(--ph-ref-palette-neutral45);
  transition: transform 200ms;
  display: inline-flex;
}

.cms2-accordion__chev--open {
  transform: rotate(180deg);
}

.cms2-accordion__body {
  padding-top: 8px;
  padding-bottom: 12px;
  animation: cms2SlideUp 200ms ease-out;
}

/* ---------- Section panel rows ---------- */
.cms2-section-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--ph-surface-container-low);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
}

.cms2-section-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cms2-section-status__copy {
  flex: 1;
  font-size: 12px;
}

.cms2-section-status__strong {
  color: var(--ph-on-surface);
  font-weight: 500;
}

.cms2-section-status__meta {
  color: var(--ph-ref-palette-neutral45);
}

.cms2-section-status__more {
  padding: 6px;
  color: var(--ph-ref-palette-neutral55);
  margin-right: -6px;
  background: transparent;
  border: none;
  display: inline-flex;
}

.cms2-reset-section {
  margin-top: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--ph-surface-container-low);
  border: 1px solid var(--ph-ref-palette-neutral88);
  border-radius: var(--ph-sys-shape-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral40);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.cms2-reset-section:hover {
  border-color: var(--ph-ref-palette-primary80);
  background: var(--ph-ref-palette-primary97);
  color: var(--ph-ref-palette-primary40);
}

/* ---------- Image row ---------- */
.cms2-image-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-sys-shape-sm);
  background: var(--ph-ref-palette-neutral98);
  text-align: left;
  transition: all 150ms;
  cursor: pointer;
}

.cms2-image-row:hover {
  border-color: var(--ph-ref-palette-primary80);
  background: var(--ph-ref-palette-primary98);
}

.cms2-image-row__thumb {
  width: 56px;
  height: 44px;
  border-radius: 6px;
  flex-shrink: 0;
  background: radial-gradient(
    at 30% 30%,
    #f4d6b5 0%,
    #e8a86a 40%,
    #b86a35 80%,
    #6e3a1c 110%
  );
  background-size: cover;
  background-position: center;
}

.cms2-image-row__copy {
  flex: 1;
  min-width: 0;
}

.cms2-image-row__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-on-surface);
}

.cms2-image-row__hint {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
}

.cms2-image-row__chev {
  color: var(--ph-ref-palette-neutral55);
  display: inline-flex;
}

.cms2-image-row__actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.cms2-deferred-strip {
  margin-top: 8px;
  padding: 8px 10px;
  background: repeating-linear-gradient(
    135deg,
    var(--ph-ref-palette-neutral98),
    var(--ph-ref-palette-neutral98) 6px,
    var(--ph-ref-palette-neutral96) 6px,
    var(--ph-ref-palette-neutral96) 12px
  );
  border: 1px dashed var(--ph-ref-palette-neutral88);
  border-radius: var(--ph-sys-shape-sm);
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  font-style: italic;
  text-align: center;
}

.cms2-deferred-strip--neutral {
  background: var(--ph-surface-container-low);
  border-style: solid;
  border-color: var(--ph-ref-palette-neutral92);
  font-style: normal;
  color: var(--ph-ref-palette-neutral45);
  text-align: left;
  margin-top: 0;
  margin-bottom: 8px;
  line-height: 1.5;
}

/* ---------- Picker button (CTA target etc.) ---------- */
.cms2-pickerbutton {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1.5px solid var(--ph-ref-palette-neutral88);
  border-radius: var(--ph-sys-shape-sm);
  background: var(--ph-surface);
  font-size: 13px;
  font-weight: 500;
  color: var(--ph-on-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.cms2-pickerbutton__lead {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cms2-pickerbutton__icon {
  color: var(--ph-ref-palette-tertiary40);
  display: inline-flex;
}

.cms2-pickerbutton__chev {
  color: var(--ph-ref-palette-neutral45);
  display: inline-flex;
}

/*
 * Layout grid — 4 square icon cells used by the Hero panel for image-left /
 * centered / image-right / image-background. SegmentedControl from PhotonUI
 * is the right semantic primitive for "single-choice radiogroup" but doesn't
 * render as a square grid, so this stays as a custom grid.
 *
 * Border declared as longhands (not the `border` shorthand) because Tailwind
 * v4's preflight emits `*, ::before, ::after { border: 0 solid }` in the
 * `base` layer — shorthands containing var() are pending-substitution values
 * and the longhand `border-width: 0` from preflight wins the cascade.
 */
.cms2-layout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.cms2-layout-grid__opt {
  aspect-ratio: 1 / 1;
  border-width: 1.5px;
  border-style: solid;
  border-color: var(--ph-ref-palette-neutral88);
  border-radius: var(--ph-sys-shape-sm);
  background: var(--ph-surface);
  color: var(--ph-ref-palette-neutral45);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 150ms;
}

.cms2-layout-grid__opt--active {
  border-color: var(--ph-primary);
  background: var(--ph-ref-palette-primary97);
  color: var(--ph-ref-palette-primary40);
}

/* ---------- Generic list row (sections, dishes, etc.) ---------- */
.cms2-listrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 4px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
}

.cms2-listrow--dim {
  opacity: 0.6;
}

.cms2-listrow__drag {
  color: var(--ph-ref-palette-neutral45);
  display: inline-flex;
  cursor: grab;
}

.cms2-listrow__drag--locked {
  color: var(--ph-ref-palette-neutral80);
  opacity: 0.5;
  cursor: not-allowed;
}

.cms2-listrow__copy {
  flex: 1;
  min-width: 0;
}

.cms2-listrow__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-on-surface);
}

.cms2-listrow__meta {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  margin-top: 1px;
}

.cms2-listrow__more {
  padding: 6px;
  color: var(--ph-ref-palette-neutral55);
  display: inline-flex;
  background: transparent;
  border: none;
}

.cms2-add-section-zone {
  width: 100%;
  margin-top: 8px;
  padding: 12px;
  background: var(--ph-surface-container-low);
  border: 1.5px dashed var(--ph-ref-palette-neutral88);
  border-radius: var(--ph-sys-shape-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 150ms;
  cursor: pointer;
}

.cms2-add-section-zone:hover {
  border-color: var(--ph-ref-palette-primary80);
  background: var(--ph-ref-palette-primary98);
  color: var(--ph-ref-palette-primary40);
}

/* ---------- Drop hint row ---------- */
.cms2-droprow {
  padding: 10px 12px;
  background: var(--ph-surface-container-low);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.cms2-droprow__icon {
  color: var(--ph-ref-palette-neutral45);
  display: inline-flex;
}

.cms2-droprow__copy {
  flex: 1;
  font-size: 12px;
  color: var(--ph-ref-palette-neutral40);
  line-height: 1.4;
}

/* ---------- Inline link strip (under content groups) ---------- */
.cms2-linkstrip {
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--ph-surface-container-low);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cms2-linkstrip__icon {
  color: var(--ph-ref-palette-tertiary40);
  display: inline-flex;
}

.cms2-linkstrip--cog .cms2-linkstrip__icon {
  color: var(--ph-ref-palette-neutral55);
}

.cms2-linkstrip__link {
  color: var(--ph-ref-palette-primary40);
  font-weight: 600;
  padding: 0;
  text-decoration: underline;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* ---------- Danger row (Delete page) ---------- */
.cms2-danger-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ph-error-container);
  border-radius: var(--ph-sys-shape-md);
  background: var(--ph-surface);
  color: var(--ph-error);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  margin-top: 18px;
  cursor: pointer;
}

.cms2-danger-row__icon {
  display: inline-flex;
}

.cms2-danger-row__label {
  flex: 1;
}

.cms2-danger-row__chev {
  color: var(--ph-ref-palette-neutral55);
  display: inline-flex;
}

/* =========================================================================
 * Modals (Add page dialog, Add section menu)
 * ========================================================================= */
.cms2-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--cms2-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  animation: cms2FadeIn 200ms;
  padding: 24px;
}

.cms2-modal-frame {
  display: flex;
  max-height: 100%;
}

.cms2-modal {
  background: var(--ph-surface);
  border-radius: var(--ph-sys-shape-lg);
  box-shadow: var(--cms2-elev-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cms2SlideUp 250ms ease-out;
  max-width: 90vw;
  max-height: 85vh;
}

.cms2-modal--popover {
  width: 380px;
}

.cms2-modal--dialog {
  width: 520px;
}

.cms2-modal--json {
  width: 720px;
  max-width: 96vw;
  max-height: 90vh;
}

.cms2-modal__body--json {
  padding: 0;
  background: var(--ph-surface-container-low);
}

.cms2-json-pre {
  margin: 0;
  padding: 16px 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ph-on-surface);
  white-space: pre;
  overflow: auto;
  max-height: 60vh;
  background: transparent;
}

/* =========================================================================
 *  Attributes debug surface (Advanced options → Attributes)
 *
 *  Compact key/value list intended for engineers verifying that the panel
 *  fields actually persist into the runtime attribute set the renderer
 *  reads. Uses `--ph-*` tokens only.
 * ========================================================================= */
.cms2-attributes-debug {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: var(--ph-surface-container-low);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
}

.cms2-attributes-debug__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ph-ref-palette-neutral45);
}

.cms2-attributes-debug__title {
  font-weight: 700;
}

.cms2-attributes-debug__count {
  font-weight: 500;
}

.cms2-attributes-debug__empty {
  font-size: 12px;
  color: var(--ph-ref-palette-neutral45);
  font-style: italic;
}

.cms2-attributes-debug__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
  background: var(--ph-surface);
  max-height: 240px;
  overflow: auto;
}

.cms2-attribute-row {
  display: grid;
  grid-template-columns: minmax(110px, 38%) minmax(0, 1fr);
  gap: 10px;
  padding: 6px 10px;
  font-size: 12px;
  border-top: 1px solid var(--ph-ref-palette-neutral96);
}

.cms2-attribute-row:first-child {
  border-top: none;
}

.cms2-attribute-row__key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms2-attribute-row__value {
  color: var(--ph-on-surface);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cms2-modal__header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--ph-ref-palette-neutral92);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cms2-modal__header--dialog {
  padding: 16px 20px;
}

.cms2-modal__title {
  font-size: 14px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ph-on-surface);
  margin: 0;
}

.cms2-modal__title--lg {
  font-size: 16px;
}

.cms2-modal__subtitle {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  margin-top: 2px;
}

.cms2-modal__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.cms2-modal__body--padded {
  padding: 16px 20px;
}

.cms2-modal__body--list {
  padding: 8px;
}

.cms2-modal__footer {
  padding: 12px 20px;
  border-top: 1px solid var(--ph-ref-palette-neutral92);
  background: var(--ph-surface-container-low);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.cms2-modal__ai-footer {
  padding: 10px 14px;
  background: var(--ph-ref-palette-primary98);
  border-top: 1px solid var(--ph-ref-palette-primary88);
  display: flex;
  align-items: center;
  gap: 10px;
}

.cms2-modal__ai-icon {
  color: var(--ph-ref-palette-primary40);
  flex-shrink: 0;
  display: inline-flex;
}

.cms2-modal__ai-text {
  flex: 1;
  font-size: 12px;
  color: var(--ph-ref-palette-primary40);
  line-height: 1.4;
}

.cms2-modal__ai-strong {
  font-weight: 700;
}

.cms2-modal__ai-link {
  color: var(--ph-ref-palette-primary40);
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* ---------- Add Section starter row ---------- */
.cms2-starter-row {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 2px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ph-sys-shape-sm);
  text-align: left;
  transition: all 150ms;
  cursor: pointer;
}

.cms2-starter-row:hover {
  background: var(--ph-ref-palette-primary98);
  border-color: var(--ph-ref-palette-primary88);
}

.cms2-starter-row__icon {
  color: var(--ph-ref-palette-neutral45);
  margin-top: 1px;
  flex-shrink: 0;
  display: inline-flex;
}

.cms2-starter-row__copy {
  flex: 1;
  min-width: 0;
}

.cms2-starter-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-on-surface);
}

.cms2-starter-row__hint {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  margin-top: 1px;
  line-height: 1.4;
}

/* ---------- Media picker ---------- */
.cms2-media-option {
  width: 100%;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  margin-bottom: 4px;
  border: 1.5px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-sys-shape-md);
  background: var(--ph-surface);
  text-align: left;
  cursor: pointer;
}

.cms2-media-option:hover,
.cms2-media-option[aria-pressed='true'] {
  border-color: var(--ph-ref-palette-primary80);
  background: var(--ph-ref-palette-primary97);
}

.cms2-media-option__thumb {
  width: 72px;
  height: 52px;
  border-radius: var(--ph-sys-shape-sm);
  background-color: var(--ph-ref-palette-neutral92);
  background-size: cover;
  background-position: center;
}

.cms2-media-option__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cms2-media-option__name {
  color: var(--ph-on-surface);
  font-size: 13px;
  font-weight: 700;
  line-height: 18px;
}

.cms2-media-option__hint {
  color: var(--ph-ref-palette-neutral45);
  font-size: 12px;
  line-height: 16px;
}

.cms2-media-option__check {
  color: var(--ph-primary);
  display: inline-flex;
}

/* ---------- Add Page dialog ---------- */
.cms2-add-page__type-section {
  margin-top: 18px;
  margin-bottom: 18px;
}

.cms2-add-page__type-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral45);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.cms2-page-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cms2-page-type {
  position: relative;
  padding: 12px;
  border: 1.5px solid var(--ph-ref-palette-neutral88);
  border-radius: var(--ph-sys-shape-md);
  background: var(--ph-surface);
  text-align: left;
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  transition: all 150ms;
}

.cms2-page-type--active {
  border-color: var(--ph-primary);
  background: var(--ph-ref-palette-primary97);
}

.cms2-page-type__icon {
  color: var(--ph-ref-palette-neutral45);
  margin-top: 1px;
  flex-shrink: 0;
  display: inline-flex;
}

.cms2-page-type--active .cms2-page-type__icon {
  color: var(--ph-ref-palette-primary40);
}

.cms2-page-type__copy {
  flex: 1;
  min-width: 0;
}

.cms2-page-type__name {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ph-on-surface);
  margin-bottom: 2px;
}

.cms2-page-type--active .cms2-page-type__name {
  color: var(--ph-ref-palette-primary40);
}

.cms2-page-type__hint {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  line-height: 1.4;
}

.cms2-page-type__check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ph-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- AI prefill banner (Add Page) ---------- */
.cms2-ai-banner {
  padding: 12px 14px;
  border-radius: var(--ph-sys-shape-md);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid;
}

.cms2-ai-banner--on {
  background: var(--ph-ref-palette-primary98);
  border-color: var(--ph-ref-palette-primary88);
}

.cms2-ai-banner--off {
  background: var(--ph-surface-container-low);
  border-color: var(--ph-ref-palette-neutral92);
}

.cms2-ai-banner__icon {
  color: var(--ph-ref-palette-primary40);
  margin-top: 2px;
  flex-shrink: 0;
  display: inline-flex;
}

.cms2-ai-banner__copy {
  flex: 1;
  min-width: 0;
}

.cms2-ai-banner__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cms2-ai-banner__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-on-surface);
}

.cms2-ai-banner__detail {
  font-size: 12px;
  color: var(--ph-ref-palette-primary40);
  line-height: 1.5;
  margin-top: 6px;
}

/* =========================================================================
 * Scope 2B — Style and Settings panels
 * ========================================================================= */

/* ---------- Banner ---------- */
.cms2-banner {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--ph-sys-shape-md);
  border: 1px solid;
}

.cms2-banner--info {
  background: var(--ph-ref-palette-tertiary94);
  border-color: var(--ph-ref-palette-tertiary80);
  color: var(--ph-ref-palette-tertiary30);
}

.cms2-banner--tip {
  background: var(--ph-ref-palette-primary94);
  border-color: var(--ph-ref-palette-primary80);
  color: var(--ph-ref-palette-primary30);
}

.cms2-banner--warn {
  background: var(--ph-ref-palette-secondary94);
  border-color: var(--ph-ref-palette-secondary80);
  color: var(--ph-ref-palette-secondary40);
}

.cms2-banner--neutral {
  background: var(--ph-surface-container-low);
  border-color: var(--ph-ref-palette-neutral88);
  color: var(--ph-ref-palette-neutral30);
}

.cms2-banner--success {
  background: var(--ph-ref-palette-tertiary94);
  border-color: var(--ph-ref-palette-tertiary80);
  color: var(--ph-ref-palette-tertiary30);
}

.cms2-banner__icon {
  flex-shrink: 0;
  margin-top: 1px;
  display: inline-flex;
}

.cms2-banner__copy {
  flex: 1;
  min-width: 0;
}

.cms2-banner__title {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.cms2-banner__body {
  font-size: 12px;
  line-height: 1.5;
}

.cms2-banner__actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* ---------- Panel footer with reset action ---------- */
.cms2-panel__footer--rich {
  align-items: center;
}

.cms2-panel__footer-reset {
  font-size: 11px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral45);
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  background: transparent;
  border: none;
  cursor: pointer;
}

.cms2-panel__footer-reset:hover {
  color: var(--ph-ref-palette-primary40);
}

.cms2-panel__footer-spacer {
  flex: 1;
}

/* ---------- Style rail section labels ---------- */
.cms2-rail__section-label {
  padding: 4px 8px 6px;
  font-size: 9px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral55);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cms2-rail__section-label--divider {
  padding-top: 12px;
  border-top: 1px solid var(--ph-ref-palette-neutral94);
  margin-top: 6px;
}

.cms2-rail__section-label-icon {
  color: var(--ph-ref-palette-primary40);
  display: inline-flex;
}

/* ---------- Theme grid (Colours panel) ---------- */
.cms2-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cms2-theme-card {
  position: relative;
  padding: 10px 8px 8px;
  border-radius: var(--ph-sys-shape-md);
  border: 2px solid var(--ph-ref-palette-neutral90);
  text-align: center;
  cursor: pointer;
  transition: all 150ms;
}

.cms2-theme-card--active {
  border-color: var(--ph-primary);
}

.cms2-theme-card__swatches {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-bottom: 8px;
}

.cms2-theme-card__swatch {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px oklch(20% 0 0 / 0.1);
}

.cms2-theme-card__label {
  font-size: 11px;
  font-weight: 700;
  color: oklch(25% 0.05 50);
}

.cms2-theme-card__check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ph-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Mood row ---------- */
.cms2-mood-row {
  display: flex;
  gap: 6px;
}

.cms2-mood-chip {
  flex: 1;
  padding: 10px 4px 8px;
  border-radius: var(--ph-sys-shape-sm);
  border: 2px solid var(--ph-ref-palette-neutral90);
  text-align: center;
  cursor: pointer;
}

.cms2-mood-chip--active {
  border-color: var(--ph-primary);
}

.cms2-mood-chip__dot {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin: 0 auto 5px;
}

.cms2-mood-chip__label {
  font-size: 10px;
  font-weight: 600;
  color: oklch(25% 0.05 50);
}

/* ---------- Brand colour rows ---------- */
.cms2-colour-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 10px;
  margin-bottom: 4px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
  text-align: left;
  transition: all 150ms;
  cursor: pointer;
}

.cms2-colour-row:hover {
  border-color: var(--ph-ref-palette-primary80);
  background: var(--ph-ref-palette-primary98);
}

.cms2-colour-row__swatch {
  width: 36px;
  height: 36px;
  border-radius: var(--ph-sys-shape-sm);
  border: 1px solid var(--ph-ref-palette-neutral88);
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px oklch(20% 0 0 / 0.05);
}

.cms2-colour-row__copy {
  flex: 1;
  min-width: 0;
}

.cms2-colour-row__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-on-surface);
  margin-bottom: 1px;
}

.cms2-colour-row__hex {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.cms2-colour-row__role {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral55);
  margin-top: 1px;
}

.cms2-colour-row__chev {
  color: var(--ph-ref-palette-neutral55);
  display: inline-flex;
}

.cms2-advanced-hint {
  font-size: 12px;
  color: var(--ph-ref-palette-neutral45);
  line-height: 1.5;
  margin-bottom: 10px;
  font-style: italic;
}

.cms2-advanced-deferred {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--ph-surface-container-low);
  border: 1px dashed var(--ph-ref-palette-neutral88);
  border-radius: var(--ph-sys-shape-sm);
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
  font-style: italic;
  text-align: center;
}

.cms2-advanced-deferred--inline {
  background: var(--ph-surface-container-low);
  border-style: solid;
  border-color: var(--ph-ref-palette-neutral92);
  color: var(--ph-ref-palette-neutral45);
}

/* ---------- Font pairing cards ---------- */
.cms2-font-pair-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cms2-font-pair {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--ph-ref-palette-neutral90);
  background: var(--ph-surface);
  border-radius: var(--ph-sys-shape-md);
  text-align: left;
  transition: all 150ms;
  cursor: pointer;
}

.cms2-font-pair--active {
  border-color: var(--ph-primary);
  background: var(--ph-ref-palette-primary98);
}

.cms2-font-pair__display-col {
  flex: 1;
  min-width: 0;
}

.cms2-font-pair__glyph {
  font-size: 20px;
  font-weight: 700;
  color: var(--ph-on-surface);
  line-height: 1.1;
  margin-bottom: 2px;
}

.cms2-font-pair__caption {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  margin-top: 4px;
}

.cms2-font-pair__body-col {
  flex: 1;
  min-width: 0;
  padding-left: 8px;
  border-left: 1px solid var(--ph-ref-palette-neutral92);
}

.cms2-font-pair__heading {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ph-on-surface);
}

.cms2-font-pair--active .cms2-font-pair__heading {
  color: var(--ph-ref-palette-primary30);
}

.cms2-font-pair__sample {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  line-height: 1.4;
}

/* ---------- Active font pair card ---------- */
.cms2-active-pair {
  display: flex;
  gap: 10px;
}

.cms2-active-pair__col {
  flex: 1;
  padding: 12px;
  background: var(--ph-surface-container-low);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
}

.cms2-active-pair__label {
  font-size: 9px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral55);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cms2-active-pair__display {
  font-size: 18px;
  font-weight: 700;
  color: var(--ph-on-surface);
  line-height: 1.1;
}

.cms2-active-pair__body {
  font-size: 14px;
  font-weight: 500;
  color: var(--ph-on-surface);
  line-height: 1.3;
}

/* ---------- Roundness slider ---------- */
.cms2-roundness {
  padding: 14px 14px 10px;
  background: var(--ph-surface-container-low);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-md);
}

.cms2-roundness__row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.cms2-roundness__preview {
  width: 46px;
  height: 32px;
  border: 2px solid var(--ph-primary);
  background: var(--ph-ref-palette-primary97);
  flex-shrink: 0;
  transition: border-radius 150ms;
}

.cms2-roundness__copy {
  flex: 1;
}

.cms2-roundness__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-on-surface);
}

.cms2-roundness__hint {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  margin-top: 1px;
}

.cms2-roundness__slider {
  width: 100%;
  accent-color: var(--ph-primary);
  height: 24px;
}

.cms2-roundness__scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ph-ref-palette-neutral55);
  margin-top: 2px;
}

/* ---------- Per-component shape rows ---------- */
.cms2-shape-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 4px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
}

.cms2-shape-row__preview {
  border: 1.5px solid var(--ph-primary);
  background: var(--ph-ref-palette-primary97);
  flex-shrink: 0;
  transition: border-radius 150ms;
}

.cms2-shape-row__label {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-on-surface);
}

/* ---------- Gradient panel ---------- */
.cms2-gradient-preview {
  height: 140px;
  border-radius: var(--ph-sys-shape-md);
  border: 1px solid var(--ph-ref-palette-neutral88);
  box-shadow: var(--cms2-elev-1);
}

.cms2-gradient-moods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cms2-gradient-mood {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1.5px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-sys-shape-sm);
  background: var(--ph-surface);
  text-align: left;
  cursor: pointer;
}

.cms2-gradient-mood--active {
  border-color: var(--ph-primary);
  background: var(--ph-ref-palette-primary98);
}

.cms2-gradient-mood__swatch {
  width: 32px;
  height: 24px;
  border-radius: var(--ph-sys-shape-xs);
  box-shadow: inset 0 0 0 1px oklch(20% 0 0 / 0.1);
  flex-shrink: 0;
}

.cms2-gradient-mood__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-on-surface);
}

.cms2-gradient-mood--active .cms2-gradient-mood__label {
  color: var(--ph-ref-palette-primary30);
}

.cms2-gradient-directions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.cms2-gradient-direction {
  aspect-ratio: 1 / 1;
  border-radius: var(--ph-sys-shape-sm);
  border: 1.5px solid var(--ph-ref-palette-neutral88);
  box-shadow: inset 0 0 0 1px oklch(20% 0 0 / 0.05);
  cursor: pointer;
  padding: 0;
}

.cms2-gradient-direction--active {
  border-color: var(--ph-primary);
}

/* ---------- Site defaults radiogrid ---------- */
.cms2-site-default-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.cms2-site-default-card {
  padding: 10px 8px;
  border-radius: var(--ph-sys-shape-sm);
  border: 1.5px solid var(--ph-ref-palette-neutral90);
  background: var(--ph-surface);
  text-align: center;
  cursor: pointer;
  transition: all 150ms;
}

.cms2-site-default-card--active {
  border-color: var(--ph-primary);
  background: var(--ph-ref-palette-primary97);
}

.cms2-site-default-card__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ph-on-surface);
  margin-top: 6px;
}

.cms2-site-default-card--active .cms2-site-default-card__label {
  color: var(--ph-ref-palette-primary30);
}

.cms2-site-default-card__hint {
  font-size: 9px;
  color: var(--ph-ref-palette-neutral55);
  margin-top: 1px;
}

.cms2-rhythm-preview {
  display: flex;
  flex-direction: column;
  padding: 2px 8px;
  margin-bottom: 4px;
}

.cms2-rhythm-preview__bar {
  height: 4px;
  border-radius: 1px;
}

.cms2-navbar-preview {
  height: 18px;
  margin-bottom: 6px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral88);
  border-radius: var(--ph-sys-shape-xs);
  display: flex;
  align-items: center;
  padding: 0 4px;
  justify-content: space-between;
}

.cms2-navbar-preview--centered {
  padding: 0;
  justify-content: center;
}

.cms2-navbar-preview__logo {
  width: 8px;
  height: 5px;
  border-radius: 1px;
  background: var(--ph-ref-palette-neutral70);
}

.cms2-navbar-preview__links {
  display: flex;
  gap: 2px;
}

.cms2-navbar-preview__links span {
  width: 6px;
  height: 3px;
  border-radius: 1px;
  background: var(--ph-ref-palette-neutral80);
  display: block;
}

.cms2-image-preview {
  width: 100%;
  aspect-ratio: 5 / 3;
  margin-bottom: 6px;
  background: radial-gradient(
    at 30% 30%,
    #f4d6b5 0%,
    #e8a86a 40%,
    #b86a35 80%,
    #6e3a1c 110%
  );
  transition: border-radius 150ms;
}

/* =========================================================================
 *  Settings panels
 * ========================================================================= */

/* ---------- Domain row ---------- */
.cms2-domain-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--ph-surface-container-low);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-md);
}

.cms2-domain-row__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ph-ref-palette-tertiary94);
  color: var(--ph-ref-palette-tertiary40);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cms2-domain-row__copy {
  flex: 1;
  min-width: 0;
}

.cms2-domain-row__name {
  font-size: 14px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ph-on-surface);
}

.cms2-domain-row__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
}

.cms2-domain-row__connected {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ph-ref-palette-tertiary40);
  font-weight: 600;
}

.cms2-domain-row__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ph-ref-palette-tertiary40);
}

.cms2-domain-row__sep {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral55);
}

.cms2-domain-row__ssl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
}

.cms2-domain-row__ssl > span {
  color: var(--ph-ref-palette-tertiary40);
  display: inline-flex;
}

.cms2-domain-row__actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* ---------- Publish status card ---------- */
.cms2-publish-card {
  padding: 14px;
  background: var(--ph-ref-palette-tertiary94);
  border: 1px solid var(--ph-ref-palette-tertiary80);
  border-radius: var(--ph-sys-shape-md);
  display: flex;
  align-items: center;
  gap: 12px;
}

.cms2-publish-card__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ph-ref-palette-tertiary40);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cms2-publish-card__copy {
  flex: 1;
  min-width: 0;
}

.cms2-publish-card__title {
  font-size: 14px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ph-ref-palette-tertiary30);
}

.cms2-publish-card__meta {
  font-size: 11px;
  color: var(--ph-ref-palette-tertiary30);
  opacity: 0.85;
  margin-top: 2px;
}

/* ---------- Order status card ---------- */
.cms2-order-card {
  padding: 14px 16px;
  margin-bottom: 18px;
  border-radius: var(--ph-sys-shape-md);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--ph-surface-container-low);
  border: 1px solid var(--ph-ref-palette-neutral90);
}

.cms2-order-card--on {
  background: var(--ph-ref-palette-tertiary94);
  border-color: var(--ph-ref-palette-tertiary80);
}

.cms2-order-card--off {
  background: var(--ph-surface-container-low);
  border-color: var(--ph-ref-palette-neutral90);
}

.cms2-order-card--disabled {
  background: var(--ph-surface-container-low);
  border-color: var(--ph-ref-palette-neutral90);
}

.cms2-order-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--ph-ref-palette-neutral45);
}

.cms2-order-card--on .cms2-order-card__icon {
  color: var(--ph-ref-palette-tertiary40);
}

.cms2-order-card--disabled .cms2-order-card__icon {
  color: var(--ph-ref-palette-neutral55);
}

.cms2-order-card__copy {
  flex: 1;
  min-width: 0;
}

.cms2-order-card__title {
  font-size: 14px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ph-on-surface);
}

.cms2-order-card--on .cms2-order-card__title {
  color: var(--ph-ref-palette-tertiary30);
}

.cms2-order-card--disabled .cms2-order-card__title {
  color: var(--ph-ref-palette-neutral40);
}

.cms2-order-card__body {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  margin-top: 2px;
  line-height: 1.4;
}

.cms2-order-card--on .cms2-order-card__body {
  color: var(--ph-ref-palette-tertiary30);
}

.cms2-order-card--disabled .cms2-order-card__body {
  color: var(--ph-ref-palette-neutral55);
}

/* ---------- Channel rows ---------- */
.cms2-channel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 4px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
}

.cms2-channel-row__copy {
  flex: 1;
  min-width: 0;
}

.cms2-channel-row__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-on-surface);
}

.cms2-channel-row__meta {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  margin-top: 1px;
}

/* ---------- Language rows ---------- */
.cms2-language-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
  margin-bottom: 6px;
}

.cms2-language-row--default {
  background: var(--ph-surface-container-low);
  padding: 12px 14px;
  border-radius: var(--ph-sys-shape-md);
}

.cms2-language-row--draft {
  opacity: 0.65;
}

.cms2-language-row__flag {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.cms2-language-row--default .cms2-language-row__flag {
  font-size: 24px;
}

.cms2-language-row__copy {
  flex: 1;
  min-width: 0;
}

.cms2-language-row__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-on-surface);
}

.cms2-language-row__meta {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  margin-top: 1px;
}

.cms2-language-row__meta--ok {
  color: var(--ph-ref-palette-tertiary40);
}

/* ---------- Sync banner (Business data) ---------- */
.cms2-sync-banner {
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: var(--ph-sys-shape-md);
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid;
}

.cms2-sync-banner--healthy {
  background: var(--ph-ref-palette-tertiary94);
  border-color: var(--ph-ref-palette-tertiary80);
}

.cms2-sync-banner--healthy .cms2-sync-banner__icon {
  color: var(--ph-ref-palette-tertiary40);
}

.cms2-sync-banner--healthy .cms2-sync-banner__title,
.cms2-sync-banner--healthy .cms2-sync-banner__body {
  color: var(--ph-ref-palette-tertiary30);
}

.cms2-sync-banner--stale {
  background: var(--ph-ref-palette-secondary94);
  border-color: var(--ph-ref-palette-secondary80);
}

.cms2-sync-banner--stale .cms2-sync-banner__icon {
  color: var(--ph-ref-palette-secondary40);
}

.cms2-sync-banner--stale .cms2-sync-banner__title,
.cms2-sync-banner--stale .cms2-sync-banner__body {
  color: var(--ph-ref-palette-secondary40);
}

.cms2-sync-banner__icon {
  flex-shrink: 0;
  display: inline-flex;
}

.cms2-sync-banner__copy {
  flex: 1;
  min-width: 0;
}

.cms2-sync-banner__title {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cms2-sync-banner__body {
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.4;
}

/* =========================================================================
 * Scope 3 — AI states
 * ========================================================================= */

/* Local frame token for AI thinking outline (matches the annotation's
 * `--ph-sys-state-thinking-color` — purple-70, kept scoped to .cms2-frame). */
.cms2-frame {
  --cms2-thinking-color: oklch(70% 0.1 321.31 / 0.7);
  --cms2-changed-color: oklch(60% 0.16 321.31);
  --cms2-warning-color: oklch(60% 0.18 39.231);
}

@keyframes cms2ThinkingPulse {
  0%,
  100% {
    box-shadow: 0 0 0 2px var(--cms2-thinking-color);
  }
  50% {
    box-shadow: 0 0 0 2px var(--cms2-thinking-color),
      0 0 0 6px oklch(70% 0.1 321.31 / 0.18);
  }
}

@keyframes cms2DotPulse {
  0%,
  80%,
  100% {
    transform: scale(0.7);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ---------- Status pill tones ---------- */
.cms2-statuspill--teal {
  background: var(--ph-ref-palette-tertiary94);
  color: var(--ph-ref-palette-tertiary40);
}

.cms2-statuspill--purple {
  background: var(--ph-ref-palette-primary94);
  color: var(--ph-ref-palette-primary40);
}

.cms2-statuspill--orange {
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
}

.cms2-statuspill--red {
  background: var(--ph-error-container);
  color: var(--ph-error);
}

.cms2-statuspill--neutral {
  background: var(--ph-surface-container-low);
  color: var(--ph-ref-palette-neutral40);
  border: 1px solid var(--ph-ref-palette-neutral88);
}

/* ---------- AI rail body ---------- */
.cms2-airail__prompt {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--ph-ref-palette-neutral88);
  border-radius: var(--ph-sys-shape-sm);
  background: var(--ph-ref-palette-neutral98);
  font-size: 13px;
  line-height: 1.45;
  color: var(--ph-on-surface);
  resize: none;
}

.cms2-airail__prompt:focus,
.cms2-airail__prompt:focus-visible {
  outline: none;
  border-color: var(--ph-primary);
  box-shadow: var(--cms2-focus-ring);
}

.cms2-airail__group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral45);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cms2-airail__suggestion {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--ph-sys-shape-sm);
  font-size: 12px;
  color: var(--ph-ref-palette-neutral30);
  text-align: left;
  line-height: 1.4;
  cursor: pointer;
}

.cms2-airail__suggestion:hover {
  background: var(--ph-ref-palette-primary98);
  border-color: var(--ph-ref-palette-primary88);
}

.cms2-airail__suggestion-icon {
  color: var(--ph-ref-palette-primary40);
  margin-top: 1px;
  flex-shrink: 0;
  display: inline-flex;
}

.cms2-airail__recent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border-radius: var(--ph-sys-shape-sm);
}

.cms2-airail__recent:hover {
  background: var(--ph-surface-container-low);
}

.cms2-airail__recent-copy {
  flex: 1;
  min-width: 0;
}

.cms2-airail__recent-label {
  font-size: 12px;
  color: var(--ph-on-surface);
  font-weight: 500;
}

.cms2-airail__recent-meta {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  margin-top: 1px;
}

.cms2-airail__recent-undo {
  padding: 4px;
  color: var(--ph-ref-palette-neutral55);
  background: transparent;
  border: none;
  border-radius: var(--ph-sys-shape-xs);
  cursor: pointer;
  display: inline-flex;
}

.cms2-airail__recent-undo:hover {
  color: var(--ph-ref-palette-primary40);
  background: var(--ph-ref-palette-primary98);
}

.cms2-airail__quote {
  padding: 10px 12px;
  background: var(--ph-ref-palette-primary98);
  border: 1px solid var(--ph-ref-palette-primary88);
  border-radius: var(--ph-sys-shape-sm);
}

.cms2-airail__quote-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--ph-ref-palette-primary40);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.cms2-airail__quote-text {
  font-size: 12px;
  color: var(--ph-ref-palette-primary40);
  line-height: 1.45;
  margin: 4px 0 0;
  font-style: italic;
}

.cms2-airail__thinking {
  padding: 14px;
  background: var(--ph-ref-palette-primary98);
  border: 1px solid var(--ph-ref-palette-primary88);
  border-radius: var(--ph-sys-shape-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cms2-airail__thinking-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cms2-airail__thinking-icon {
  color: var(--ph-ref-palette-primary40);
  display: inline-flex;
}

.cms2-airail__thinking-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-ref-palette-primary40);
}

.cms2-airail__thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cms2-airail__thinking-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ph-ref-palette-primary40);
  animation: cms2DotPulse 1.4s infinite ease-in-out;
}

.cms2-airail__thinking-dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.cms2-airail__thinking-dots span:nth-child(3) {
  animation-delay: 0.36s;
}

.cms2-airail__proposal-info {
  padding: 12px 14px;
  background: var(--ph-ref-palette-primary98);
  border: 1px solid var(--ph-ref-palette-primary88);
  border-radius: var(--ph-sys-shape-md);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cms2-airail__proposal-info-icon {
  color: var(--ph-ref-palette-primary40);
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 2px;
}

.cms2-airail__proposal-info-copy {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--ph-ref-palette-primary40);
  line-height: 1.45;
}

.cms2-airail__proposal-info-copy strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.cms2-airail__applied {
  padding: 12px 14px;
  background: var(--ph-ref-palette-tertiary94);
  border: 1px solid var(--ph-ref-palette-tertiary80);
  border-radius: var(--ph-sys-shape-md);
  display: flex;
  align-items: center;
  gap: 10px;
}

.cms2-airail__applied-icon {
  color: var(--ph-ref-palette-tertiary40);
  flex-shrink: 0;
  display: inline-flex;
}

.cms2-airail__applied-copy {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--ph-ref-palette-tertiary30);
}

.cms2-airail__applied-copy strong {
  display: block;
  font-size: 13px;
  margin-bottom: 1px;
}

.cms2-airail__applied-undo {
  font-size: 12px;
  font-weight: 700;
  color: var(--ph-ref-palette-primary40);
  background: transparent;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}

.cms2-airail__failure {
  padding: 14px;
  background: var(--ph-surface-container-low);
  border: 1px solid var(--ph-ref-palette-neutral88);
  border-radius: var(--ph-sys-shape-md);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cms2-airail__failure--warn {
  background: var(--ph-ref-palette-secondary94);
  border-color: var(--ph-ref-palette-secondary80);
}

.cms2-airail__failure-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cms2-airail__failure-icon {
  color: var(--ph-ref-palette-neutral45);
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 2px;
}

.cms2-airail__failure--warn .cms2-airail__failure-icon {
  color: var(--ph-ref-palette-secondary40);
}

.cms2-airail__failure-copy {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--ph-ref-palette-neutral40);
  line-height: 1.45;
}

.cms2-airail__failure--warn .cms2-airail__failure-copy {
  color: var(--ph-ref-palette-secondary40);
}

.cms2-airail__failure-copy strong {
  display: block;
  font-size: 13px;
  color: var(--ph-on-surface);
  margin-bottom: 2px;
}

.cms2-airail__failure--warn .cms2-airail__failure-copy strong {
  color: var(--ph-ref-palette-secondary40);
}

.cms2-airail__rephrase-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cms2-airail__rephrase {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
  font-size: 12px;
  color: var(--ph-on-surface);
  text-align: left;
  cursor: pointer;
}

.cms2-airail__rephrase:hover {
  border-color: var(--ph-ref-palette-primary80);
  background: var(--ph-ref-palette-primary98);
}

.cms2-airail__rephrase span[aria-hidden] {
  color: var(--ph-ref-palette-primary40);
  flex-shrink: 0;
  margin-top: 1px;
  display: inline-flex;
}

.cms2-airail__failure-actions {
  display: flex;
  gap: 6px;
}

.cms2-airail__empty {
  padding: 14px;
  background: var(--ph-surface-container-low);
  border: 1px dashed var(--ph-ref-palette-neutral88);
  border-radius: var(--ph-sys-shape-md);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.cms2-airail__empty-icon {
  color: var(--ph-ref-palette-neutral55);
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
}

.cms2-airail__empty-copy {
  flex: 1;
  font-size: 12px;
  color: var(--ph-ref-palette-neutral45);
  line-height: 1.5;
}

.cms2-airail__empty-copy strong {
  display: block;
  font-size: 13px;
  color: var(--ph-on-surface);
  margin-bottom: 2px;
}

/* ---------- Section preview overlay outlines ---------- */
.cms2-preview__section--changed::before,
.cms2-preview__section--warning::before,
.cms2-preview__section--thinking::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 8px;
  pointer-events: none;
  z-index: 5;
}

.cms2-preview__section--changed::before {
  box-shadow: 0 0 0 2px var(--cms2-changed-color);
}

.cms2-preview__section--warning::before {
  box-shadow: 0 0 0 2px var(--cms2-warning-color);
}

.cms2-preview__section--thinking::before {
  box-shadow: 0 0 0 2px var(--cms2-thinking-color);
  border: 2px dashed transparent;
  animation: cms2ThinkingPulse 1.6s ease-in-out infinite;
}

.cms2-preview__section-label--thinking {
  background: oklch(70% 0.1 321.31);
  text-transform: none;
  letter-spacing: 0.2px;
  font-weight: 600;
}

.cms2-preview__section-label--warning {
  background: var(--ph-ref-palette-secondary40);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cms2-preview__section-label--changed {
  background: var(--ph-ref-palette-tertiary40);
}

/* ---------- Proposal panel ---------- */
.cms2-proposal__quote {
  padding: 10px 12px;
  background: var(--ph-ref-palette-primary98);
  border: 1px solid var(--ph-ref-palette-primary88);
  border-radius: var(--ph-sys-shape-sm);
}

.cms2-proposal__quote-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--ph-ref-palette-primary40);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.cms2-proposal__quote-text {
  font-size: 13px;
  color: var(--ph-ref-palette-primary40);
  line-height: 1.45;
  margin: 4px 0 0;
  font-style: italic;
}

.cms2-conflict-banner {
  padding: 12px 14px;
  background: var(--ph-ref-palette-secondary94);
  border: 1px solid var(--ph-ref-palette-secondary80);
  border-radius: var(--ph-sys-shape-md);
  display: flex;
  gap: 10px;
}

.cms2-conflict-banner__icon {
  color: var(--ph-ref-palette-secondary40);
  flex-shrink: 0;
  display: inline-flex;
  margin-top: 2px;
}

.cms2-conflict-banner__copy {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--ph-ref-palette-secondary40);
  line-height: 1.45;
}

.cms2-conflict-banner__copy strong {
  display: block;
  font-size: 13px;
  margin-bottom: 2px;
}

.cms2-conflict-banner__actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.cms2-proposal__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cms2-proposal__row {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
}

.cms2-proposal__check {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--ph-ref-palette-neutral88);
  background: var(--ph-surface);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 2px;
  padding: 0;
}

.cms2-proposal__check--on {
  border-color: var(--ph-primary);
  background: var(--ph-primary);
  color: #fff;
}

.cms2-proposal__row-body {
  flex: 1;
  min-width: 0;
}

.cms2-proposal__row-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.cms2-proposal__row-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-on-surface);
}

.cms2-proposal__diff {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cms2-proposal__diff-row {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--ph-sys-shape-xs);
  font-size: 12px;
  line-height: 1.45;
}

.cms2-proposal__diff-row--before {
  background: var(--ph-surface-container-low);
  color: var(--ph-ref-palette-neutral45);
  text-decoration: line-through;
}

.cms2-proposal__diff-row--after {
  background: var(--ph-ref-palette-tertiary94);
  color: var(--ph-ref-palette-tertiary30);
}

.cms2-proposal__diff-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  flex-shrink: 0;
  margin-top: 2px;
}

.cms2-proposal__diff-text {
  flex: 1;
  min-width: 0;
}

/* ---------- Validation panel ---------- */
.cms2-validation__lead {
  font-size: 13px;
  color: var(--ph-ref-palette-neutral40);
  margin: 0 0 12px;
  line-height: 1.5;
}

.cms2-validation__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cms2-validation__row {
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
  overflow: hidden;
}

.cms2-validation__row-head {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}

.cms2-validation__row-icon {
  color: var(--ph-ref-palette-secondary40);
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
}

.cms2-validation__row-copy {
  flex: 1;
  min-width: 0;
}

.cms2-validation__row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.cms2-validation__row-pos {
  font-size: 10px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral55);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cms2-validation__row-text {
  font-size: 12px;
  color: var(--ph-on-surface);
  line-height: 1.45;
}

.cms2-validation__row-chev {
  color: var(--ph-ref-palette-neutral55);
  display: inline-flex;
  margin-top: 2px;
  transition: transform 200ms;
}

.cms2-validation__row-chev--open {
  transform: rotate(180deg);
}

.cms2-validation__detail {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--ph-ref-palette-neutral92);
  background: var(--ph-ref-palette-secondary94);
}

.cms2-validation__detail-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ph-ref-palette-secondary40);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.cms2-validation__detail-body {
  font-size: 12px;
  color: var(--ph-ref-palette-secondary40);
  line-height: 1.5;
  margin-top: 4px;
}

.cms2-validation__detail-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

/* ---------- Publish summary ---------- */
.cms2-publish-summary {
  background: var(--ph-surface-container-low);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
}

.cms2-publish-summary__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral45);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cms2-publish-summary__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--ph-on-surface);
}

.cms2-publish-summary__list span[aria-hidden] {
  margin-right: 6px;
  color: var(--ph-ref-palette-neutral55);
}

/* ---------- Applied toast ---------- */
.cms2-toast {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 200;
  background: var(--ph-inverse-surface);
  color: var(--ph-inverse-on-surface);
  border-radius: var(--ph-sys-shape-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: var(--cms2-elev-3);
  animation: cms2SlideUp 220ms ease-out;
  min-width: 280px;
  max-width: min(90vw, 420px);
}

.cms2-toast__icon {
  color: var(--ph-ref-palette-tertiary80);
  flex-shrink: 0;
  display: inline-flex;
}

.cms2-toast__copy {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.4;
}

.cms2-toast__copy strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.cms2-toast__copy span {
  opacity: 0.8;
}

.cms2-toast__undo {
  background: transparent;
  border: 1px solid oklch(60% 0.005 321.31 / 0.4);
  color: var(--ph-inverse-on-surface);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--ph-sys-shape-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.cms2-toast__undo:hover {
  background: oklch(60% 0.005 321.31 / 0.16);
}

.cms2-toast__undo-icon {
  display: inline-flex;
}

/* ---------- Focused preview embed ---------- */
.cms2-embed {
  background: var(--ph-surface);
  border-radius: var(--ph-sys-shape-md);
  border: 1px solid var(--ph-ref-palette-neutral88);
  box-shadow: var(--cms2-elev-2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cms2-embed__header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ph-ref-palette-neutral92);
  background: var(--ph-surface-container-low);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.cms2-embed__header-title {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ph-on-surface);
}

.cms2-embed__header-hint {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  margin-top: 1px;
}

.cms2-embed__preview {
  background: var(--ph-surface);
  padding: 16px;
}

.cms2-embed__suggestion {
  padding: 12px 14px;
  background: var(--ph-ref-palette-primary98);
  border-top: 1px solid var(--ph-ref-palette-primary88);
  display: flex;
  align-items: center;
  gap: 10px;
}

.cms2-embed__suggestion-icon {
  color: var(--ph-ref-palette-primary40);
  flex-shrink: 0;
  display: inline-flex;
}

.cms2-embed__suggestion-copy {
  flex: 1;
  min-width: 0;
}

.cms2-embed__suggestion-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--ph-ref-palette-primary40);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.cms2-embed__suggestion-prompt {
  font-size: 12px;
  color: var(--ph-ref-palette-primary40);
  margin-top: 2px;
  line-height: 1.4;
}

.cms2-embed__footer {
  padding: 10px 14px;
  border-top: 1px solid var(--ph-ref-palette-neutral92);
  background: var(--ph-surface-container-low);
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* ---------- Embed demo + state catalog pages ---------- */
.cms2-embed-demo,
.cms2-catalog {
  background: var(--ph-surface-container-low);
  color: var(--ph-on-surface);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  min-height: 100vh;
  padding: 32px 24px 64px;
}

.cms2-embed-demo__header,
.cms2-catalog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  max-width: 960px;
  margin: 0 auto 24px;
}

.cms2-embed-demo__eyebrow,
.cms2-catalog__eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral45);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.cms2-embed-demo__title,
.cms2-catalog__title {
  font-size: 22px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ph-on-surface);
  margin: 4px 0 8px;
}

.cms2-embed-demo__lead,
.cms2-catalog__lead {
  max-width: 640px;
  font-size: 13px;
  color: var(--ph-ref-palette-neutral40);
  line-height: 1.5;
  margin: 0;
}

.cms2-embed-demo__back,
.cms2-catalog__back {
  font-size: 12px;
  color: var(--ph-ref-palette-primary40);
  text-decoration: none;
  background: var(--ph-surface);
  padding: 6px 10px;
  border-radius: var(--ph-sys-shape-sm);
  border: 1px solid var(--ph-ref-palette-primary80);
}

.cms2-embed-demo__stage {
  max-width: 480px;
  margin: 0 auto;
}

.cms2-catalog__section {
  max-width: 960px;
  margin: 0 auto 32px;
}

.cms2-catalog__section-title {
  font-size: 14px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ph-on-surface);
  margin: 0 0 12px;
}

.cms2-catalog__links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.cms2-catalog-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-sm);
  text-decoration: none;
  color: var(--ph-on-surface);
  transition: all 150ms;
}

.cms2-catalog-link:hover {
  border-color: var(--ph-ref-palette-primary80);
  background: var(--ph-ref-palette-primary98);
}

.cms2-catalog-link__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-on-surface);
}

.cms2-catalog-link__hint {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral45);
  line-height: 1.35;
}

.cms2-catalog__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.cms2-catalog-card {
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral92);
  border-radius: var(--ph-sys-shape-md);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cms2-catalog-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cms2-catalog-card__title {
  font-size: 13px;
  font-weight: 700;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: var(--ph-on-surface);
}

.cms2-catalog-card__kind {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--ph-sys-shape-full);
  border: 1px solid;
}

.cms2-catalog-card__kind--empty {
  background: var(--ph-surface-container-low);
  color: var(--ph-ref-palette-neutral45);
  border-color: var(--ph-ref-palette-neutral88);
}

.cms2-catalog-card__kind--info,
.cms2-catalog-card__kind--success {
  background: var(--ph-ref-palette-tertiary94);
  color: var(--ph-ref-palette-tertiary40);
  border-color: var(--ph-ref-palette-tertiary80);
}

.cms2-catalog-card__kind--progress {
  background: var(--ph-ref-palette-primary94);
  color: var(--ph-ref-palette-primary40);
  border-color: var(--ph-ref-palette-primary80);
}

.cms2-catalog-card__kind--warn {
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
  border-color: var(--ph-ref-palette-secondary80);
}

.cms2-catalog-card__kind--error {
  background: var(--ph-error-container);
  color: var(--ph-error);
  border-color: var(--ph-error);
}

.cms2-catalog-card__viz {
  height: 56px;
  border-radius: var(--ph-sys-shape-sm);
  background: repeating-linear-gradient(
    135deg,
    var(--ph-ref-palette-neutral98),
    var(--ph-ref-palette-neutral98) 8px,
    var(--ph-ref-palette-neutral96) 8px,
    var(--ph-ref-palette-neutral96) 16px
  );
  border: 1px dashed var(--ph-ref-palette-neutral88);
}

.cms2-catalog-card--info .cms2-catalog-card__viz,
.cms2-catalog-card--success .cms2-catalog-card__viz {
  background: var(--ph-ref-palette-tertiary94);
  border-color: var(--ph-ref-palette-tertiary80);
  border-style: solid;
}

.cms2-catalog-card--warn .cms2-catalog-card__viz {
  background: var(--ph-ref-palette-secondary94);
  border-color: var(--ph-ref-palette-secondary80);
  border-style: solid;
}

.cms2-catalog-card--progress .cms2-catalog-card__viz {
  background: var(--ph-ref-palette-primary94);
  border-color: var(--ph-ref-palette-primary80);
  border-style: solid;
}

.cms2-catalog-card--error .cms2-catalog-card__viz {
  background: var(--ph-error-container);
  border-color: var(--ph-error);
  border-style: solid;
}

.cms2-catalog-card__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cms2-catalog-card__row-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral45);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.cms2-catalog-card__row-text {
  font-size: 12px;
  color: var(--ph-on-surface);
  line-height: 1.45;
}


/* -------------------------------------------------------------------------
 *  P5.2h — Per-field reset tint animation
 *
 *  When the operator clicks the per-field reset on a manual row, the
 *  inherit-row-header briefly tint-outs from the manual purple surface
 *  to the neutral inherited surface over 200ms, then settles into the
 *  inherited state. The animation only fires while the
 *  `--reset-anim` class is set; data already updates synchronously so
 *  the visual settle is purely decorative.
 *
 *  Respects prefers-reduced-motion — users who request reduced motion
 *  see the state flip without animation.
 * ------------------------------------------------------------------------- */

@keyframes cms2-inherit-row-reset {
  0% {
    background: var(--ph-ref-palette-primary98, rgba(247, 240, 255, 0.65));
    box-shadow: inset 0 0 0 1.5px
      var(--ph-ref-palette-primary70, rgba(132, 92, 198, 0.6));
  }
  100% {
    background: transparent;
    box-shadow: none;
  }
}

.cms2-inherit-row-header--reset-anim {
  border-radius: 6px;
  animation: cms2-inherit-row-reset 200ms ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .cms2-inherit-row-header--reset-anim {
    animation: none;
  }
}
/*
 * VisualSeedsPanel — single set of styles, two contexts.
 * Layout switches between comfortable (~520px) and compact (~320px) hosts.
 * Uses container queries on the panel root — no @media, no vw/vh.
 *
 * Styles match brandbook-v3-demo.html (Standalone view, lines 241–1450).
 */

[data-vsp-root] {
  container-type: inline-size;
  container-name: vsp;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #fff;
  color: #1c1b1f;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;

  --vsp-pad: 18px;
  --vsp-tab-pad-y: 14px 14px 12px;
  --vsp-tab-fs: 12px;
  --vsp-wheel-size: 200px;
  --vsp-pill-min-w: 96px;
  --vsp-active-swatch: 34px;
  --vsp-pair-aa: 54px;
  --vsp-pairing-cols: 2;
  --vsp-font-tile-cols: 4;
  --vsp-preset-grid-cols: 6;
  --vsp-stepper-pad-y: 8px 6px;
  --vsp-stepper-fs: 10.5px;
}

[data-vsp-root][data-density='compact'] {
  --vsp-pad: 14px;
  --vsp-tab-pad-y: 10px 10px 8px;
  --vsp-tab-fs: 11px;
  --vsp-wheel-size: 160px;
  --vsp-pill-min-w: 76px;
  --vsp-active-swatch: 30px;
  --vsp-pair-aa: 36px;
  --vsp-pairing-cols: 2;
  --vsp-font-tile-cols: 2;
  --vsp-preset-grid-cols: 4;
  --vsp-stepper-pad-y: 6px 4px;
  --vsp-stepper-fs: 10px;
}

/* Tabs */
[data-vsp-tabs] {
  display: flex;
  padding: 0 16px;
  border-bottom: 1px solid #e8e0f0;
  background: #fff;
  flex-shrink: 0;
  gap: 2px;
}

[data-vsp-tab] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: var(--vsp-tab-pad-y);
  border: 0;
  background: transparent;
  border-bottom: 2px solid transparent;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--vsp-tab-fs);
  font-weight: 600;
  color: #8e82a6;
  transition: color 150ms, border-color 150ms;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}

[data-vsp-tab]:hover {
  color: #1c1b1f;
}

[data-vsp-tab][aria-selected='true'] {
  color: #6B3FA0;
  border-bottom-color: #6B3FA0;
}

[data-vsp-tab-icon] {
  font-size: 13px;
  display: inline-block;
  width: 14px;
  text-align: center;
}

[data-vsp-root][data-density='compact'] [data-vsp-tab-label] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

[data-vsp-root][data-density='compact'] [data-vsp-tab]:hover::after {
  content: attr(data-tab-label);
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  background: #1c1b1f;
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

/* Body / Footer */
[data-vsp-body] {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--vsp-pad) var(--vsp-pad) 12px;
}

[data-vsp-footer] {
  flex-shrink: 0;
  padding: 12px 16px;
  border-top: 1px solid #e8e0f0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  /* Pin to the bottom of the nearest scrollable ancestor so the operator
   * never has to scroll to reach Save / Cancel. Harmless inside the CMS
   * drawer (no outer scroll), engages on the standalone editor where the
   * page is the scroll context. z-index keeps the bar above any content
   * that scrolls past underneath. */
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-shadow: 0 -2px 6px rgba(28, 27, 31, 0.04);
}

/* Panel header */
[data-vsp-panel-header] {
  margin-bottom: 14px;
}

[data-vsp-panel-header-title] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 800;
  color: #1c1b1f;
}

[data-vsp-panel-header-sub] {
  font-size: 11px;
  color: #8e82a6;
  margin-top: 2px;
}

/* Group title (inline section heading) */
[data-vsp-group-title] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: #65558F;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 18px 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

[data-vsp-group-title]:first-child {
  margin-top: 8px;
}

[data-vsp-group-title-spacer] {
  flex: 1;
}

[data-vsp-group-title-meta] {
  font-size: 10px;
  font-weight: 500;
  color: #a89cb8;
  text-transform: none;
  letter-spacing: 0;
}

/* === COLOR WHEEL === */
[data-vsp-wheel-block] {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 0 4px;
}

[data-vsp-wheel] {
  width: var(--vsp-wheel-size);
  height: var(--vsp-wheel-size);
  position: relative;
  flex-shrink: 0;
}

[data-vsp-wheel]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    hsl(0 78% 56%), hsl(30 80% 56%), hsl(60 78% 54%), hsl(90 70% 50%),
    hsl(120 60% 48%), hsl(150 60% 46%), hsl(180 60% 48%), hsl(210 65% 52%),
    hsl(240 70% 56%), hsl(270 65% 56%), hsl(300 65% 54%), hsl(330 72% 56%), hsl(360 78% 56%)
  );
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 56.5%, #000 78%, transparent 78.5%);
  mask: radial-gradient(circle, transparent 56%, #000 56.5%, #000 78%, transparent 78.5%);
  opacity: 0.78;
}

[data-vsp-wheel]::after {
  content: '';
  position: absolute;
  top: 24%;
  left: 24%;
  right: 24%;
  bottom: 24%;
  border-radius: 50%;
  background: #faf8fe;
  border: 1px solid #e8e0f0;
  box-shadow: inset 0 1px 3px rgba(28, 27, 31, 0.04);
}

[data-vsp-wheel-svg] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

[data-vsp-wheel-poly] {
  fill: rgba(107, 63, 160, 0.05);
  stroke: rgba(107, 63, 160, 0.28);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
  transition: points 350ms ease;
}

[data-vsp-wheel-dot] {
  cursor: grab;
  stroke: #fff;
  stroke-width: 2.5;
  filter: drop-shadow(0 1px 2px rgba(28, 27, 31, 0.25));
  transition: cx 350ms ease, cy 350ms ease, r 120ms, stroke-width 120ms;
}

[data-vsp-wheel-dot][data-active='true'] {
  stroke-width: 3;
  filter: drop-shadow(0 2px 4px rgba(28, 27, 31, 0.32));
}

[data-vsp-wheel-center-label] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  color: #a89cb8;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: center;
  pointer-events: none;
  z-index: 2;
  line-height: 1.3;
}

[data-vsp-wheel-center-label] small {
  display: block;
  font-size: 8.5px;
  font-weight: 500;
  color: #c5b9d5;
}

/* Anchor pills */
[data-vsp-anchor-pills] {
  display: flex;
  gap: 6px;
  margin-top: 14px;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

[data-vsp-anchor-pill] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 7px 11px;
  border: 1.5px solid #e8e0f0;
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
  transition: all 150ms;
  min-width: var(--vsp-pill-min-w);
  font-family: inherit;
}

[data-vsp-anchor-pill]:hover {
  border-color: #d0c5e0;
}

[data-vsp-anchor-pill][aria-pressed='true'] {
  border-color: #6B3FA0;
  background: #faf6ff;
  box-shadow: 0 0 0 1px #6B3FA0;
}

[data-vsp-anchor-pill-top] {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
}

[data-vsp-anchor-pill-dot] {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(28, 27, 31, 0.08);
  flex-shrink: 0;
}

[data-vsp-anchor-pill-name] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #1c1b1f;
}

[data-vsp-anchor-pill-hex] {
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 10px;
  color: #8e82a6;
  margin-top: 1px;
  margin-left: 21px;
}

/* Harmony chips */
[data-vsp-harmony-row] {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  margin-top: 14px;
  padding: 0 12px;
}

[data-vsp-chip] {
  padding: 6px 11px;
  border: 1px solid #e8e0f0;
  border-radius: 100px;
  background: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #65558F;
  transition: all 150ms;
  cursor: pointer;
}

[data-vsp-chip]:hover {
  border-color: #6B3FA0;
  color: #6B3FA0;
}

[data-vsp-chip][aria-pressed='true'],
[data-vsp-chip][aria-checked='true'] {
  background: #6B3FA0;
  border-color: #6B3FA0;
  color: #fff;
}

/* === ACTIVE ANCHOR EDITOR === */
[data-vsp-active-editor] {
  margin-top: 18px;
  padding: 14px;
  background: #faf8fe;
  border: 1px solid #e8e0f0;
  border-radius: 12px;
  position: relative;
}

[data-vsp-active-editor-head] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
}

[data-vsp-active-editor-swatch] {
  width: var(--vsp-active-swatch);
  height: var(--vsp-active-swatch);
  border-radius: 8px;
  border: 1.5px solid rgba(28, 27, 31, 0.08);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}

[data-vsp-active-editor-swatch] input[type='color'] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
}

[data-vsp-active-editor-name] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: #65558F;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

[data-vsp-active-editor-hex] {
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 12px;
  font-weight: 600;
  color: #1c1b1f;
  margin-top: 1px;
}

[data-vsp-active-editor-oklch] {
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 10px;
  font-weight: 500;
  color: #65558F;
  margin-top: 1px;
  letter-spacing: 0;
  white-space: nowrap;
}

[data-vsp-active-editor-meta] {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

[data-vsp-active-editor-spacer] {
  flex: 1;
}

[data-vsp-active-editor-pickbtn] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: #6B3FA0;
  padding: 5px 9px;
  border-radius: 6px;
  border: 1px solid #e8d5f5;
  background: transparent;
  cursor: pointer;
}

[data-vsp-active-editor-pickbtn]:hover {
  background: #f5f0ff;
}

/* Slider rows (used by active editor + compact rows) */
[data-vsp-slider-row] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

[data-vsp-slider-row]:last-child {
  margin-bottom: 0;
}

[data-vsp-slider-label] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #65558F;
  width: 52px;
  flex-shrink: 0;
}

[data-vsp-slider-track] {
  flex: 1;
  position: relative;
  min-width: 0;
}

[data-vsp-slider] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: #e8e0f0;
  border-radius: 100px;
  outline: none;
  cursor: pointer;
  margin: 0;
  display: block;
}

[data-vsp-slider]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6B3FA0;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(28, 27, 31, 0.2);
  cursor: grab;
  transition: transform 100ms;
}

[data-vsp-slider]::-webkit-slider-thumb:active {
  transform: scale(1.15);
  cursor: grabbing;
}

[data-vsp-slider]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #6B3FA0;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(28, 27, 31, 0.2);
  cursor: grab;
}

[data-vsp-slider][data-variant='hue'] {
  background: linear-gradient(90deg, #f55, #ff5, #5f5, #5ff, #55f, #f5f, #f55);
}

[data-vsp-slider][data-variant='chroma'] {
  background: linear-gradient(90deg, #bbb, #6B3FA0);
}

[data-vsp-slider][data-variant='warmth'] {
  background: linear-gradient(90deg, #7a8a9a, #9a8270);
}

[data-vsp-slider-val] {
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 10px;
  font-weight: 600;
  color: #8e82a6;
  width: 36px;
  text-align: right;
  flex-shrink: 0;
}

[data-vsp-slider-helper] {
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 9px;
  font-weight: 500;
  color: #8e82a6;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  margin-top: 2px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/* Tone strip */
[data-vsp-tone-strip] {
  display: flex;
  height: 14px;
  border-radius: 4px;
  border: 1px solid #e8e0f0;
  margin-top: 10px;
  /* Allow tooltips to escape the strip vertically without being clipped. */
  overflow: visible;
  position: relative;
}

[data-vsp-tone-cell] {
  flex: 1;
  height: 100%;
  position: relative;
  cursor: crosshair;
  outline: none;
}

[data-vsp-tone-cell]:first-child {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

[data-vsp-tone-cell]:last-child {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

[data-vsp-tone-cell]:focus-visible {
  outline: 2px solid #6B3FA0;
  outline-offset: 2px;
  z-index: 2;
}

/* Hover popover — tone label + computed CSS var value. */
[data-vsp-tone-tip] {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 100ms ease-out;
  background: #1c1b1f;
  color: #fff;
  padding: 5px 8px;
  border-radius: 6px;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 3;
  box-shadow: 0 4px 12px rgba(28, 27, 31, 0.18);
}

[data-vsp-tone-tip]::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1c1b1f;
}

[data-vsp-tone-tip] strong {
  font: 700 10.5px 'Plus Jakarta Sans', sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #d0c5e0;
}

[data-vsp-tone-tip] code {
  font: 500 10.5px 'DM Mono', 'Menlo', monospace;
  color: #fff;
}

[data-vsp-tone-tip] code[data-vsp-tone-tip-var] {
  font-size: 10px;
  color: #c5b9d5;
}

[data-vsp-tone-cell]:hover [data-vsp-tone-tip],
[data-vsp-tone-cell]:focus-visible [data-vsp-tone-tip] {
  opacity: 1;
}

/* Edge cells: pin the tip to the inner side so it doesn't get clipped by the
 * panel scroll container. */
[data-vsp-tone-cell]:first-child [data-vsp-tone-tip] {
  left: 0;
  transform: translateX(0);
}

[data-vsp-tone-cell]:first-child [data-vsp-tone-tip]::after {
  left: 8px;
  transform: translateX(0);
}

[data-vsp-tone-cell]:last-child [data-vsp-tone-tip] {
  left: auto;
  right: 0;
  transform: translateX(0);
}

[data-vsp-tone-cell]:last-child [data-vsp-tone-tip]::after {
  left: auto;
  right: 8px;
  transform: translateX(0);
}

/* Compact rows (vibrance / surface warmth / neutrals) */
[data-vsp-compact-row] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

[data-vsp-compact-label] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #1c1b1f;
  width: 96px;
  flex-shrink: 0;
}

[data-vsp-neutral-mini-swatch] {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(28, 27, 31, 0.08);
  flex-shrink: 0;
}

/* AI tuning input */
[data-vsp-ai-input] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  background: linear-gradient(135deg, #faf6ff, #f5f0ff);
  border: 1px solid #e8d5f5;
  border-radius: 10px;
}

[data-vsp-ai-input-badge] {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9px;
  font-weight: 800;
  color: #6B3FA0;
  background: #fff;
  padding: 2px 6px;
  border-radius: 100px;
  letter-spacing: 0.4px;
  flex-shrink: 0;
}

[data-vsp-ai-input-field] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 12px;
  color: #1c1b1f;
  min-width: 0;
  font-family: inherit;
}

[data-vsp-ai-input-field]::placeholder {
  color: #8e82a6;
  font-style: italic;
}

[data-vsp-ai-input-send] {
  padding: 5px 11px;
  background: #6B3FA0;
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms;
  white-space: nowrap;
  flex-shrink: 0;
}

[data-vsp-ai-input-send]:hover {
  background: #5a3490;
}

[data-vsp-ai-input-send]:disabled {
  background: #b8a8d0;
  cursor: wait;
}

[data-vsp-toast] {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 11px;
  background: #fef2f2;
  color: #b91c1c;
  border-radius: 6px;
}

/* AI suggestion header */
[data-vsp-ai-suggestions-header] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

[data-vsp-ai-suggestions-title] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #65558F;
}

[data-vsp-ai-badge] {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9px;
  font-weight: 800;
  color: #6B3FA0;
  background: #f5f0ff;
  padding: 2px 6px;
  border-radius: 100px;
  letter-spacing: 0.4px;
}

/* Gradients (inside palette) */
[data-vsp-gradient-rec] {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px 7px 7px;
  background: #fff;
  border: 1px solid #e8e0f0;
  border-radius: 9px;
  margin-bottom: 5px;
  transition: border-color 150ms;
}

[data-vsp-gradient-rec]:hover {
  border-color: #d0c5e0;
}

[data-vsp-gradient-rec-swatch] {
  width: 38px;
  height: 38px;
  border-radius: 7px;
  flex-shrink: 0;
  border: 1px solid rgba(28, 27, 31, 0.08);
}

[data-vsp-gradient-rec-name] {
  flex: 1;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #1c1b1f;
  min-width: 0;
}

[data-vsp-gradient-rec-add] {
  padding: 4px 10px;
  background: #fff;
  border: 1px solid #6B3FA0;
  border-radius: 6px;
  color: #6B3FA0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 150ms;
  flex-shrink: 0;
}

[data-vsp-gradient-rec-add]:hover,
[data-vsp-gradient-rec-add][data-selected='true'] {
  background: #6B3FA0;
  color: #fff;
}

[data-vsp-browse-disclosure] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
  padding: 9px 12px;
  background: #faf8fe;
  border: 1px solid #e8e0f0;
  border-radius: 9px;
  cursor: pointer;
  transition: background 150ms;
  width: 100%;
  font: inherit;
  text-align: left;
}

[data-vsp-browse-disclosure]:hover {
  background: #f5f0ff;
}

[data-vsp-browse-disclosure-label] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #1c1b1f;
}

[data-vsp-browse-disclosure-label] .count {
  color: #8e82a6;
  font-weight: 500;
}

[data-vsp-browse-chevron] {
  transition: transform 200ms;
  color: #65558F;
  font-size: 12px;
  display: inline-block;
}

[data-vsp-browse-disclosure][aria-expanded='true'] [data-vsp-browse-chevron] {
  transform: rotate(90deg);
}

[data-vsp-preset-filter-row] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 10px 0 8px;
}

[data-vsp-preset-grid] {
  display: grid;
  grid-template-columns: repeat(var(--vsp-preset-grid-cols), 1fr);
  gap: 5px;
}

[data-vsp-preset-tile] {
  position: relative;
  aspect-ratio: 1;
  border-radius: 7px;
  cursor: pointer;
  transition: transform 120ms, box-shadow 120ms;
  border: 1px solid rgba(28, 27, 31, 0.08);
  padding: 0;
  background-clip: padding-box;
}

[data-vsp-preset-tile]:hover {
  transform: scale(1.06);
  z-index: 1;
}

[data-vsp-preset-tile][aria-pressed='true'] {
  box-shadow: 0 0 0 2px #6B3FA0, 0 0 0 3.5px #fff;
}

[data-vsp-preset-tile][aria-pressed='true']::after {
  content: '✓';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 14px;
  height: 14px;
  background: #6B3FA0;
  color: #fff;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

[data-vsp-selected-summary] {
  font-size: 10.5px;
  color: #65558F;
  line-height: 1.55;
  margin-top: 8px;
  padding: 7px 10px;
  background: #faf8fe;
  border-radius: 7px;
}

[data-vsp-selected-summary] .strong {
  color: #1c1b1f;
  font-weight: 600;
}

/* === TYPOGRAPHY === */
[data-vsp-pairing] {
  display: grid;
  grid-template-columns: repeat(var(--vsp-pairing-cols), 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

[data-vsp-pair-card] {
  position: relative;
  padding: 18px 14px 14px;
  background: #faf8fe;
  border: 1px solid #e8e0f0;
  border-radius: 12px;
  text-align: center;
  transition: border-color 150ms, background 150ms;
}

[data-vsp-pair-card]:hover {
  border-color: #d0c5e0;
  background: #fff;
}

[data-vsp-pair-aa] {
  font-size: var(--vsp-pair-aa);
  line-height: 1;
  margin: 0 0 8px;
  color: #1c1b1f;
  font-family: var(--vsp-pairing-font);
}

[data-vsp-pair-aa][data-role='brand'] {
  font-weight: 600;
}

[data-vsp-pair-aa][data-role='plain'] {
  font-weight: 400;
}

[data-vsp-pair-name] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1c1b1f;
}

[data-vsp-pair-role] {
  font-size: 10px;
  color: #8e82a6;
  margin-top: 1px;
}

[data-vsp-pair-change] {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #6B3FA0;
  background: #fff;
  border: 1px solid #e8e0f0;
  border-radius: 6px;
  cursor: pointer;
}

[data-vsp-pair-change]:hover {
  background: #f5f0ff;
}

[data-vsp-pair-card][data-loading='true'] [data-vsp-pair-aa] {
  background: linear-gradient(90deg, #eee 0%, #f8f8f8 50%, #eee 100%);
  background-size: 200% 100%;
  animation: vsp-shimmer 1s linear infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@keyframes vsp-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

[data-vsp-suggestion] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid #e8e0f0;
  border-radius: 10px;
  margin-bottom: 6px;
  background: #fff;
  transition: border-color 150ms;
}

[data-vsp-suggestion]:hover {
  border-color: #d0c5e0;
}

[data-vsp-suggestion-fonts] {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}

[data-vsp-suggestion-aa] {
  font-size: 18px;
  line-height: 1;
  color: #1c1b1f;
}

[data-vsp-suggestion-name] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #65558F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-vsp-suggestion-plus] {
  color: #d0c5e0;
}

[data-vsp-suggestion-use] {
  padding: 5px 11px;
  background: #fff;
  border: 1px solid #6B3FA0;
  border-radius: 6px;
  color: #6B3FA0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 150ms;
}

[data-vsp-suggestion-use]:hover {
  background: #6B3FA0;
  color: #fff;
}

[data-vsp-role-grid-head-row],
[data-vsp-role-grid] {
  display: grid;
  grid-template-columns: 74px 70px 1fr 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}

[data-vsp-root][data-density='compact'] [data-vsp-role-grid-head-row],
[data-vsp-root][data-density='compact'] [data-vsp-role-grid] {
  grid-template-columns: 60px 60px 1fr 1fr;
  gap: 6px;
}

[data-vsp-role-grid-head] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  color: #8e82a6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

[data-vsp-role-name] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #1c1b1f;
}

[data-vsp-weight-select] {
  padding: 5px 8px;
  background: #fff;
  border: 1px solid #e8e0f0;
  border-radius: 6px;
  font-size: 11px;
  color: #1c1b1f;
  outline: none;
  font-weight: 600;
  font-family: 'Plus Jakarta Sans', sans-serif;
  width: 100%;
  min-width: 0;
}

[data-vsp-coverage-row] {
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 10.5px;
  color: #65558F;
  line-height: 1.6;
}

[data-vsp-coverage-row] .ok {
  color: #16a34a;
}

[data-vsp-coverage-row] .miss {
  color: #B45309;
}

/* Font tiles grid */
[data-vsp-font-tiles-grid] {
  display: grid;
  grid-template-columns: repeat(var(--vsp-font-tile-cols), 1fr);
  gap: 8px;
  margin-top: 8px;
  padding: 10px;
  background: #faf8fe;
  border: 1px solid #e8e0f0;
  border-radius: 10px;
}

[data-vsp-font-tile] {
  padding: 10px 8px;
  background: #fff;
  border: 1px solid #e8e0f0;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 150ms;
  font: inherit;
}

[data-vsp-font-tile]:hover,
[data-vsp-font-tile][aria-pressed='true'] {
  border-color: #6B3FA0;
  background: #f5f0ff;
}

[data-vsp-font-tile][aria-pressed='true'] {
  box-shadow: 0 0 0 1px #6B3FA0;
}

[data-vsp-font-tile-aa] {
  font-size: 22px;
  line-height: 1;
  color: #1c1b1f;
  margin-bottom: 4px;
  font-family: var(--vsp-tile-font);
  display: block;
}

[data-vsp-font-tile-name] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #1c1b1f;
  line-height: 1.2;
}

[data-vsp-font-tile-cat] {
  font-size: 8.5px;
  color: #8e82a6;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* === STEPPERS === */
[data-vsp-stepper] {
  display: flex;
  background: #faf8fe;
  border: 1px solid #e8e0f0;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  position: relative;
}

[data-vsp-stepper-btn] {
  flex: 1;
  padding: var(--vsp-stepper-pad-y);
  background: transparent;
  border: 0;
  border-radius: 7px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: var(--vsp-stepper-fs);
  font-weight: 600;
  color: #65558F;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: all 150ms;
  position: relative;
  cursor: pointer;
}

[data-vsp-stepper-btn]:hover {
  color: #1c1b1f;
}

[data-vsp-stepper-btn][aria-pressed='true'],
[data-vsp-stepper-btn][aria-checked='true'] {
  background: #fff;
  color: #1c1b1f;
  box-shadow: 0 1px 3px rgba(28, 27, 31, 0.08);
}

[data-vsp-stepper-btn-mult] {
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 8.5px;
  font-weight: 500;
  color: #a89cb8;
}

[data-vsp-stepper-btn][aria-pressed='true'] [data-vsp-stepper-btn-mult],
[data-vsp-stepper-btn][aria-checked='true'] [data-vsp-stepper-btn-mult] {
  color: #65558F;
}

/* Stepper category icon — same glyph for every button of a stepper. NOT a
 * per-step preview. The actual per-step preview lives in the sample row
 * below the stepper, which consumes live `--ph-sys-*` CSS vars (fix5). */
[data-vsp-stepper-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
  color: #bba9d0;
  transition: color 150ms;
}

[data-vsp-stepper-btn][aria-pressed='true'] [data-vsp-stepper-icon],
[data-vsp-stepper-btn][aria-checked='true'] [data-vsp-stepper-icon] {
  color: #fff;
}

/* Live sample row beneath each stepper — every element consumes a derived
 * `--ph-sys-*` var. Repaints when ThemeBuilder rebuilds. No JS in the panel. */
[data-vsp-stepper-sample] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: 6px 0 10px;
  background: #faf8fe;
  border: 1px dashed #e8e0f0;
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  color: #1c1b1f;
  flex-wrap: wrap;
}

[data-vsp-stepper-sample] [data-vsp-sample-button] {
  background: var(--ph-primary, #6B3FA0);
  color: var(--ph-on-primary, #fff);
  border: 0;
  padding: 5px 10px;
  font: inherit;
  cursor: default;
  pointer-events: none;
}

[data-vsp-stepper-sample] [data-vsp-sample-card] {
  background: var(--ph-surface-container, #fff);
  color: var(--ph-on-surface, #1c1b1f);
  border: 1px solid var(--ph-outline-variant, #e8e0f0);
  padding: 4px 10px;
  display: inline-block;
}

[data-vsp-stepper-sample] [data-vsp-sample-input] {
  background: #fff;
  border: 1px solid var(--ph-outline-variant, #cbd5e0);
  padding: 4px 10px;
  color: #65558F;
}

[data-vsp-stepper-sample] [data-vsp-sample-chip] {
  background: var(--ph-tertiary-container, #f0e8d8);
  color: var(--ph-on-tertiary-container, #1c1b1f);
  padding: 2px 9px;
  font-size: 10px;
}

[data-vsp-stepper-sample][data-vsp-sample-shadow] [data-vsp-sample-card] {
  padding: 8px 12px;
  background: var(--ph-surface, #fff);
  border: 1px solid transparent;
}

[data-vsp-stepper-sample][data-vsp-sample-density] {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

[data-vsp-stepper-sample] [data-vsp-sample-stack-label] {
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 9.5px;
  color: #65558F;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-vsp-stepper-sample] [data-vsp-sample-stack] {
  display: flex;
  align-items: center;
}

[data-vsp-stepper-sample] [data-vsp-sample-stack] > span {
  width: 26px;
  height: 12px;
  background: var(--ph-secondary-container, #d0c5e0);
  border-radius: 3px;
  display: inline-block;
}

/* Tip card / deferred card */
[data-vsp-tip-card] {
  margin-top: 18px;
  padding: 11px 13px;
  background: linear-gradient(135deg, #faf6ff, #f5f0ff);
  border: 1px solid #e8d5f5;
  border-radius: 10px;
}

[data-vsp-tip-card-header] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

[data-vsp-tip-card-title] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #6B3FA0;
}

[data-vsp-tip-card-close] {
  color: #8e82a6;
  font-size: 14px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: pointer;
}

[data-vsp-tip-card-close]:hover {
  background: #fff;
  color: #1c1b1f;
}

[data-vsp-tip-card-body] {
  font-size: 11px;
  color: #65558F;
  margin-top: 6px;
  line-height: 1.55;
}

[data-vsp-deferred-card] {
  margin-top: 14px;
  padding: 11px 14px;
  background: #faf8fe;
  border: 1px dashed #d0c5e0;
  border-radius: 10px;
  opacity: 0.65;
}

[data-vsp-deferred-title] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: #65558F;
}

[data-vsp-deferred-body] {
  font-size: 10.5px;
  color: #8e82a6;
  margin-top: 4px;
  line-height: 1.5;
}

/* Section wrapper (kept for backward compat with existing tests) */
[data-vsp-section] {
  display: block;
}

/* ─────────────────────────────────────────────────────────────────
 * Typography fix3 — anchored picker popover, rich AI suggestions,
 * archetype explainer modal. Spec: BRD-E01-T65-v3a-fix3-typography.
 * ───────────────────────────────────────────────────────────────── */

/* Inline (i) and More buttons in the AI suggestions header */
[data-vsp-ai-info] {
  background: transparent;
  border: 0;
  font: 11px 'Plus Jakarta Sans', sans-serif;
  color: #6B3FA0;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
}

[data-vsp-ai-info]:hover {
  background: #f5f0ff;
}

[data-vsp-ai-more] {
  background: #fff;
  border: 1px solid #6B3FA0;
  border-radius: 6px;
  font: 700 10.5px 'Plus Jakarta Sans', sans-serif;
  color: #6B3FA0;
  padding: 3px 9px;
  cursor: pointer;
  transition: all 150ms;
}

[data-vsp-ai-more]:hover {
  background: #6B3FA0;
  color: #fff;
}

/* Anchored font picker popover */
[data-vsp-font-picker-popover] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: min(360px, calc(100vw - 16px));
  max-height: 70vh;
  overflow-y: auto;
  font-family: 'Plus Jakarta Sans', sans-serif;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 32px rgba(28, 27, 31, 0.18);
  border: 1px solid #e8e0f0;
  padding: 12px;
}

[data-vsp-fpp-header] {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #1c1b1f;
}

[data-vsp-fpp-header] strong {
  font-weight: 800;
}

[data-vsp-fpp-close] {
  border: 0;
  background: transparent;
  font-size: 16px;
  color: #65558F;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
}

[data-vsp-fpp-close]:hover {
  background: #f5f0ff;
}

[data-vsp-fpp-chips] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

[data-vsp-fpp-chip] {
  border: 1px solid #e8e0f0;
  background: #fff;
  border-radius: 999px;
  font: 500 10.5px 'Plus Jakarta Sans', sans-serif;
  color: #65558F;
  padding: 3px 9px;
  cursor: pointer;
  transition: all 150ms;
}

[data-vsp-fpp-chip][aria-selected='true'] {
  background: #6B3FA0;
  border-color: #6B3FA0;
  color: #fff;
}

[data-vsp-fpp-search] {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #faf8fe;
  border: 1px solid #e8e0f0;
  border-radius: 8px;
  padding: 6px 8px;
}

[data-vsp-fpp-search-icon] {
  color: #8e82a6;
  font-size: 11px;
}

[data-vsp-fpp-search] input {
  flex: 1;
  border: 0;
  background: transparent;
  font: 12px 'Plus Jakarta Sans', sans-serif;
  color: #1c1b1f;
  outline: none;
}

[data-vsp-fpp-tiles] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

[data-vsp-font-picker-popover] [data-vsp-fpp-empty] {
  grid-column: 1 / -1;
  text-align: center;
  font: 11px 'Plus Jakarta Sans', sans-serif;
  color: #8e82a6;
  padding: 16px 0;
}

[data-vsp-fpp-tile] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  background: #fff;
  border: 1px solid #e8e0f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms;
}

[data-vsp-fpp-tile]:hover {
  border-color: #6B3FA0;
}

[data-vsp-fpp-tile][aria-pressed='true'] {
  border-color: #6B3FA0;
  background: #f5f0ff;
}

[data-vsp-fpp-tile-aa] {
  font-family: var(--vsp-tile-font);
  font-size: 22px;
  color: #1c1b1f;
  line-height: 1;
}

[data-vsp-fpp-tile-name] {
  font: 600 9px 'Plus Jakarta Sans', sans-serif;
  color: #1c1b1f;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

[data-vsp-fpp-tile-cat],
[data-vsp-fpp-tile-badge] {
  font: 500 8px 'DM Mono', monospace;
  color: #8e82a6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-vsp-fpp-tile-badge] {
  position: absolute;
  top: 3px;
  right: 4px;
  color: #6B3FA0;
  background: #f5f0ff;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

[data-vsp-fpp-divider] {
  height: 1px;
  background: #e8e0f0;
  margin: 4px 0;
}

/* Custom fonts UI inside the picker */
[data-vsp-custom-fonts] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

[data-vsp-custom-fonts-title] {
  font: 700 10.5px 'Plus Jakarta Sans', sans-serif;
  color: #65558F;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-vsp-custom-fonts-row] {
  display: flex;
  gap: 6px;
}

[data-vsp-custom-fonts-input] {
  flex: 1;
  border: 1px solid #e8e0f0;
  background: #fff;
  border-radius: 6px;
  padding: 5px 8px;
  font: 12px 'Plus Jakarta Sans', sans-serif;
  color: #1c1b1f;
  outline: none;
}

[data-vsp-custom-fonts-input]:focus {
  border-color: #6B3FA0;
}

[data-vsp-custom-fonts-add] {
  background: #6B3FA0;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font: 700 11px 'Plus Jakarta Sans', sans-serif;
  padding: 5px 10px;
  cursor: pointer;
}

[data-vsp-custom-fonts-add]:disabled {
  background: #d0c5e0;
  cursor: not-allowed;
}

[data-vsp-custom-fonts-error] {
  font: 500 10.5px 'Plus Jakarta Sans', sans-serif;
  color: #b91c1c;
}

[data-vsp-custom-fonts-hint] {
  font: 500 10.5px 'Plus Jakarta Sans', sans-serif;
  color: #8e82a6;
}

[data-vsp-custom-fonts-counter] {
  font: 700 10px 'Plus Jakarta Sans', sans-serif;
  color: #65558F;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

[data-vsp-custom-fonts-list] {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

[data-vsp-custom-fonts-empty] {
  font: 11px 'Plus Jakarta Sans', sans-serif;
  color: #8e82a6;
  font-style: italic;
}

[data-vsp-custom-fonts-row-item] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  background: #faf8fe;
  border-radius: 6px;
}

[data-vsp-custom-fonts-name] {
  flex: 1;
  font-size: 12px;
  color: #1c1b1f;
}

[data-vsp-custom-fonts-name] small {
  color: #8e82a6;
  font-weight: 500;
}

[data-vsp-custom-fonts-remove] {
  background: transparent;
  border: 0;
  font-size: 14px;
  color: #65558F;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}

[data-vsp-custom-fonts-remove]:hover {
  background: #fae5e5;
  color: #b91c1c;
}

/* Rich AI suggestion card */
[data-vsp-rich-suggestion] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e8e0f0;
  border-radius: 12px;
  margin-bottom: 6px;
  transition: transform 150ms, box-shadow 150ms, border-color 150ms;
}

[data-vsp-rich-suggestion]:hover {
  transform: translateY(-1px);
  border-color: #d0c5e0;
  box-shadow: 0 4px 12px rgba(28, 27, 31, 0.06);
}

[data-vsp-rich-suggestion-top] {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

[data-vsp-rich-suggestion-fonts] {
  display: flex;
  flex: 1;
  gap: 16px;
}

[data-vsp-rich-suggestion-aa-block] {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

[data-vsp-rich-suggestion-aa] {
  font-size: 32px;
  color: #1c1b1f;
  line-height: 1;
}

[data-vsp-rich-suggestion-name] {
  font: 700 11px 'Plus Jakarta Sans', sans-serif;
  color: #1c1b1f;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

[data-vsp-rich-suggestion-role] {
  font: 500 9px 'DM Mono', monospace;
  color: #8e82a6;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-vsp-rich-suggestion-use] {
  background: #6B3FA0;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font: 700 11px 'Plus Jakarta Sans', sans-serif;
  padding: 5px 12px;
  cursor: pointer;
  flex-shrink: 0;
}

[data-vsp-rich-suggestion-use]:hover {
  background: #573380;
}

[data-vsp-rich-suggestion-divider] {
  height: 1px;
  background: #f0ebf6;
}

[data-vsp-rich-suggestion-specimen-display] {
  font-size: 14px;
  color: #1c1b1f;
  line-height: 1.3;
}

[data-vsp-rich-suggestion-specimen-body] {
  font-size: 12px;
  color: #49454F;
  line-height: 1.4;
}

/* More-suggestions popover (modal-style overlay) */
[data-vsp-more-popover-backdrop] {
  position: fixed;
  inset: 0;
  background: rgba(28, 27, 31, 0.32);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

[data-vsp-more-popover] {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(28, 27, 31, 0.24);
  width: min(560px, 100%);
  max-height: min(70vh, 560px);
  display: flex;
  flex-direction: column;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

[data-vsp-more-popover-header] {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #e8e0f0;
  font-size: 12px;
}

[data-vsp-more-popover-close] {
  border: 0;
  background: transparent;
  font-size: 16px;
  color: #65558F;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
}

[data-vsp-more-popover-body] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px 14px;
  overflow-y: auto;
}

[data-vsp-more-popover-card] {
  border: 1px solid #e8e0f0;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-vsp-more-popover-card-row] {
  display: flex;
  gap: 6px;
  font-size: 11px;
  color: #1c1b1f;
}

[data-vsp-more-popover-card-label] {
  color: #65558F;
  font-weight: 700;
}

[data-vsp-more-popover-card-specimen-display] {
  font-size: 28px;
  line-height: 1.1;
  color: #1c1b1f;
  padding: 2px 0;
}

[data-vsp-more-popover-card-specimen-body] {
  font-size: 14px;
  line-height: 1.6;
  color: #49454F;
  padding: 4px 0 6px;
}

[data-vsp-more-popover-card-actions] {
  display: flex;
  justify-content: flex-end;
}

[data-vsp-more-popover-card-use] {
  background: #6B3FA0;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font: 700 11px 'Plus Jakarta Sans', sans-serif;
  padding: 5px 12px;
  cursor: pointer;
}

[data-vsp-more-popover-card-use]:hover {
  background: #573380;
}

/* Archetype explainer modal */
[data-vsp-explainer-backdrop] {
  position: fixed;
  inset: 0;
  background: rgba(28, 27, 31, 0.32);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

[data-vsp-explainer] {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(28, 27, 31, 0.24);
  width: min(480px, 100%);
  font-family: 'Plus Jakarta Sans', sans-serif;
}

[data-vsp-explainer-header] {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid #e8e0f0;
  font-size: 12px;
}

[data-vsp-explainer-close] {
  border: 0;
  background: transparent;
  font-size: 16px;
  color: #65558F;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  line-height: 1;
}

[data-vsp-explainer-body] {
  padding: 14px 16px 16px;
  font-size: 12.5px;
  color: #1c1b1f;
  line-height: 1.5;
}

[data-vsp-explainer-body] p {
  margin: 0 0 10px;
}

[data-vsp-explainer-quote] {
  margin: 6px 0 12px;
  padding: 8px 12px;
  border-left: 3px solid #6B3FA0;
  background: #faf8fe;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  font-size: 13px;
  color: #1c1b1f;
}

[data-vsp-explainer-empty] {
  margin: 0 0 12px;
  padding: 8px 12px;
  background: #fff3cd;
  border-radius: 6px;
  font-size: 12px;
  color: #92400e;
}

[data-vsp-explainer-subtitle] {
  font-weight: 700;
  font-size: 11.5px;
  color: #65558F;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 8px 0 6px !important;
}

[data-vsp-explainer-chips] {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 12px;
}

[data-vsp-explainer-chip] {
  border: 1px solid #6B3FA0;
  background: #fff;
  border-radius: 999px;
  font: 600 11px 'Plus Jakarta Sans', sans-serif;
  color: #6B3FA0;
  padding: 3px 10px;
}

[data-vsp-explainer-footer-text] {
  font-size: 12px;
  color: #49454F;
}

[data-vsp-explainer-cta-row] {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

[data-vsp-explainer-cta] {
  background: #6B3FA0;
  border: 0;
  border-radius: 8px;
  color: #fff;
  font: 700 12px 'Plus Jakarta Sans', sans-serif;
  padding: 8px 16px;
  cursor: pointer;
}

[data-vsp-explainer-cta]:hover {
  background: #573380;
}

/* ============================================================
 * P1.4-fix2 — diagnostics surface, lock badges, summary chips,
 * RenderedResultHint, picker styling polish.
 *
 * Token values mirror design/p1.4-redesign.html `:root` block.
 * ============================================================ */

[data-vsp-palette-panel] {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

[data-vsp-palette-panel-body] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 18px;
}

[data-vsp-palette-panel-footer] {
  flex-shrink: 0;
  height: 48px;
  padding: 0 14px;
  border-top: 1px solid #e8e0f0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  position: relative;
  z-index: 35;
}

/* ---------- DiagnosticsStatusChip ---------- */
@keyframes vspPulseError {
  0%, 100% { box-shadow: 0 0 0 0 rgba(197, 48, 48, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(197, 48, 48, .18); }
}

[data-vsp-status-chip] {
  height: 32px;
  padding: 0 14px 0 12px;
  border: 1px solid #e8e0f0;
  border-radius: 100px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: #65558F;
  transition: all 0.15s;
  position: relative;
  cursor: pointer;
}
[data-vsp-status-chip]:hover { border-color: #d0c5e0; transform: translateY(-1px); }
[data-vsp-status-chip]:focus-visible { outline: 2px solid #6B3FA0; outline-offset: 2px; }

[data-vsp-status-chip-glyph] {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
[data-vsp-status-chip][data-state='clean'] [data-vsp-status-chip-glyph] {
  background: #16a34a;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.15);
}
[data-vsp-status-chip][data-state='clean'] [data-vsp-status-chip-label] { color: #65558F; }

[data-vsp-status-chip][data-state='warning'] {
  border-color: #E8B547;
  background: #FEF3C7;
}
[data-vsp-status-chip][data-state='warning'] [data-vsp-status-chip-glyph] { background: #B45309; }
[data-vsp-status-chip][data-state='warning'] [data-vsp-status-chip-glyph]::after {
  content: '!';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  color: white;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}
[data-vsp-status-chip][data-state='warning'] [data-vsp-status-chip-label] { color: #92400E; }

[data-vsp-status-chip][data-state='error'] {
  border-color: #E27B7B;
  background: #FEE2E2;
  animation: vspPulseError 2s ease-in-out infinite;
}
[data-vsp-status-chip][data-state='error'] [data-vsp-status-chip-glyph] { background: #C53030; }
[data-vsp-status-chip][data-state='error'] [data-vsp-status-chip-glyph]::after {
  content: '!';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  color: white;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}
[data-vsp-status-chip][data-state='error'] [data-vsp-status-chip-label] { color: #991B1B; }

[data-vsp-status-chip-count] {
  display: inline-block;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.5);
}
[data-vsp-status-chip][data-state='warning'] [data-vsp-status-chip-count] { color: #92400E; }
[data-vsp-status-chip][data-state='error'] [data-vsp-status-chip-count] { color: #991B1B; }

@media (prefers-reduced-motion: reduce) {
  [data-vsp-status-chip][data-state='error'] { animation: none; }
}

/* ---------- DiagnosticsDrawer ---------- */
[data-vsp-drawer-backdrop] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 48px;
  background: rgba(28, 27, 31, 0.22);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  z-index: 28;
}
[data-vsp-drawer-backdrop][data-open='true'] {
  opacity: 1;
  pointer-events: auto;
}

[data-vsp-diagnostics-drawer] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 48px;
  background: #ffffff;
  box-shadow: 0 -6px 24px rgba(28, 27, 31, 0.12);
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.22s ease, opacity 0.18s ease;
  z-index: 30;
  display: flex;
  flex-direction: column;
}
[data-vsp-diagnostics-drawer][data-open='true'] {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  [data-vsp-diagnostics-drawer],
  [data-vsp-drawer-backdrop] { transition: none; }
}

[data-vsp-drawer-head] {
  flex-shrink: 0;
  padding: 14px 16px;
  border-bottom: 1px solid #e8e0f0;
  display: flex;
  align-items: center;
  gap: 10px;
}
[data-vsp-drawer-head-title] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #1c1b1f;
}
[data-vsp-drawer-head-summary] {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #8e82a6;
}
[data-vsp-drawer-head-spacer] { flex: 1; }
[data-vsp-drawer-close] {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: #8e82a6;
  background: transparent;
  border: none;
  transition: all 0.12s;
  cursor: pointer;
}
[data-vsp-drawer-close]:hover { background: #f5f3fa; color: #1c1b1f; }

[data-vsp-drawer-body] {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px 16px;
}

/* ---------- DiagnosticsList ---------- */
[data-vsp-diagnostics-empty] {
  padding: 24px 12px;
  text-align: center;
  color: #8e82a6;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-vsp-diagnostics-empty] strong {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #1c1b1f;
}

[data-vsp-diagnostics-group] { margin-bottom: 14px; }
[data-vsp-diagnostics-group]:last-child { margin-bottom: 0; }
[data-vsp-diagnostics-group-head] {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.55px;
  margin-bottom: 6px;
}
[data-vsp-diagnostics-group-head][data-severity='ERROR']   { color: #991B1B; }
[data-vsp-diagnostics-group-head][data-severity='WARNING'] { color: #92400E; }
[data-vsp-diagnostics-group-head][data-severity='INFO']    { color: #1D4ED8; }

[data-vsp-diagnostics-group-count] {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 100px;
  background: #f5f3fa;
  margin-left: auto;
}

[data-vsp-diagnostics-finding] {
  padding: 10px 11px;
  background: #faf8fe;
  border: 1px solid #f0ebf6;
  border-left: 3px solid;
  border-radius: 8px;
  margin-bottom: 6px;
}
[data-vsp-diagnostics-finding][data-sev='error']   { border-left-color: #C53030; }
[data-vsp-diagnostics-finding][data-sev='warning'] { border-left-color: #B45309; }
[data-vsp-diagnostics-finding][data-sev='info']    { border-left-color: #1D4ED8; }

[data-vsp-diagnostics-finding][data-highlight='true'] {
  outline: 2px solid #6B3FA0;
  animation: vspFindingHighlight 2s ease-out;
}
@keyframes vspFindingHighlight {
  0%   { outline-color: rgba(107, 63, 160, 0.9); }
  100% { outline-color: rgba(107, 63, 160, 0); }
}

[data-vsp-diagnostics-finding-area] {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  color: #8e82a6;
  margin-bottom: 3px;
  text-transform: lowercase;
}
[data-vsp-diagnostics-finding-msg] {
  font-size: 12px;
  line-height: 1.5;
  color: #1c1b1f;
}
[data-vsp-diagnostics-finding-suggest] {
  font-size: 11px;
  line-height: 1.5;
  color: #65558F;
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed #f0ebf6;
  font-style: italic;
}
[data-vsp-diagnostics-finding-action] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #6B3FA0;
  border-radius: 6px;
  color: #6B3FA0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  cursor: not-allowed;
  opacity: 0.65;
}

/* ---------- DiagnosticContextualMarker ---------- */
[data-vsp-contextual-marker] {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #C53030;
  color: #ffffff;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  border: 2px solid #ffffff;
  cursor: pointer;
  transition: transform 0.12s;
  position: relative;
  animation: vspPulseError 2s ease-in-out infinite;
}
[data-vsp-contextual-marker]:hover { transform: scale(1.12); }
[data-vsp-contextual-marker]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 4px);
  right: 0;
  padding: 4px 9px;
  background: #1c1b1f;
  color: #ffffff;
  border-radius: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
  z-index: 5;
}
[data-vsp-contextual-marker]:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-vsp-contextual-marker] { animation: none; }
}

/* ---------- AnchorLockBadge (HTML, used on AnchorPills) ---------- */
[data-vsp-anchor-pill][data-locked='true'] {
  position: relative;
}
[data-vsp-anchor-lock-badge] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1c1b1f;
  color: #ffffff;
  border-radius: 50%;
  border: 1.5px solid #ffffff;
  line-height: 1;
  flex-shrink: 0;
}
[data-vsp-anchor-lock-badge][data-size='sm'] {
  width: 12px;
  height: 12px;
  font-size: 7px;
}
[data-vsp-anchor-lock-badge][data-size='md'] {
  width: 14px;
  height: 14px;
  font-size: 8.5px;
  position: absolute;
  top: 4px;
  right: 4px;
}

/* ---------- Wheel-dot lock badge (SVG-native) ---------- */
[data-vsp-wheel-dot-lock] {
  fill: #1c1b1f;
  font-size: 10px;
  pointer-events: none;
}

/* ---------- StyleDirectionPicker — visual polish ---------- */
[data-vsp-direction-picker] [data-vsp-chip][data-variant='custom'] {
  border-style: dashed;
  border-color: #d0c5e0;
}
[data-vsp-direction-picker] [data-vsp-chip][data-variant='custom'][aria-pressed='true'] {
  border-style: solid;
  background: #1c1b1f;
  border-color: #1c1b1f;
  color: #ffffff;
}
[data-vsp-custom-details] {
  margin-top: 10px;
  padding: 10px 12px;
  background: #faf8fe;
  border: 1px dashed #d0c5e0;
  border-radius: 8px;
  animation: vspSlideDown 0.15s ease;
}
[data-vsp-custom-details-title] {
  margin-bottom: 8px;
  text-transform: uppercase;
}
@keyframes vspSlideDown {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---------- MoreBrandAssetsSection ---------- */
[data-vsp-more-assets] {
  margin-top: 14px;
  border-top: 1px solid #e8e0f0;
  padding-top: 12px;
}
[data-vsp-more-assets-trigger] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #faf8fe;
  border: 1px solid #e8e0f0;
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #1c1b1f;
  transition: background 0.15s;
  cursor: pointer;
}
[data-vsp-more-assets-trigger]:hover { background: #faf6ff; }
[data-vsp-more-assets-trigger-spacer] { flex: 1; }
[data-vsp-more-assets-trigger-chev] {
  transition: transform 0.15s;
  font-size: 11px;
  color: #65558F;
}
[data-vsp-more-assets-trigger][data-open='true'] [data-vsp-more-assets-trigger-chev] {
  transform: rotate(90deg);
}
[data-vsp-more-assets-summary] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: #8e82a6;
}
[data-vsp-more-assets-summary-chip] {
  background: #f5f0ff;
  color: #6B3FA0;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
}
[data-vsp-more-assets-body] {
  margin-top: 10px;
  animation: vspSlideDown 0.15s ease;
}

/* ---------- RenderedResultHint (inline alert icon) ----------
 * Always renders to reserve the slot in the head row — visibility flips
 * via data-clamped. Avoids the layout shift the previous banner caused
 * when the gamut-clamp threshold toggled.
 */
[data-vsp-rendered-hint] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  visibility: hidden;
  cursor: help;
  border-radius: 6px;
  transition: background 0.12s ease;
}
[data-vsp-rendered-hint][data-clamped='true'] {
  visibility: visible;
}
[data-vsp-rendered-hint][data-clamped='true']:hover {
  background: #FEF3C7;
}
[data-vsp-rendered-hint-icon] {
  font-size: 14px;
  line-height: 1;
  color: #B45309;
}

/* ============================================================
 * P1.4-fix3 — More brand assets: compact rows + sub-section header.
 *
 * Class names follow the design HTML (`assets-sub-section`,
 * `custom-color-row`, `gradient-row`, etc.) but use `data-vsp-*`
 * selectors for consistency with the rest of the panel.
 * ============================================================ */

[data-vsp-assets-sub-section] {
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e8e0f0;
  border-radius: 8px;
  margin-bottom: 10px;
}
[data-vsp-assets-sub-section]:last-child { margin-bottom: 0; }

[data-vsp-assets-sub-head] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
[data-vsp-assets-sub-title] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #1c1b1f;
}
[data-vsp-assets-sub-count] {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: #8e82a6;
}
[data-vsp-assets-sub-spacer] { flex: 1; }
[data-vsp-assets-add-btn] {
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid #6B3FA0;
  border-radius: 6px;
  color: #6B3FA0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  transition: all 0.15s;
  cursor: pointer;
}
[data-vsp-assets-add-btn]:hover {
  background: #6B3FA0;
  color: #ffffff;
}
[data-vsp-assets-add-btn][data-active] {
  background: #6B3FA0;
  color: #ffffff;
}

/* ---------- Compact rows ---------- */
[data-vsp-custom-color-row],
[data-vsp-gradient-row] {
  background: #faf8fe;
  border: 1px solid #f0ebf6;
  border-radius: 6px;
  margin-bottom: 5px;
  overflow: hidden;
}
[data-vsp-custom-color-row]:last-child,
[data-vsp-gradient-row]:last-child { margin-bottom: 0; }
[data-vsp-custom-color-row][data-expanded='true'],
[data-vsp-gradient-row][data-expanded='true'] {
  background: #ffffff;
  border-color: #d0c5e0;
}

[data-vsp-custom-color-row-head],
[data-vsp-gradient-row-head] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
[data-vsp-custom-color-row-head]:hover,
[data-vsp-gradient-row-head]:hover {
  background: #f5f0ff;
}

[data-vsp-custom-color-swatch] {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(28, 27, 31, 0.08);
  flex-shrink: 0;
}
[data-vsp-gradient-row-swatch] {
  width: 30px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid rgba(28, 27, 31, 0.08);
  flex-shrink: 0;
}

[data-vsp-custom-color-name],
[data-vsp-gradient-row-name] {
  flex: 1;
  min-width: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: #1c1b1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-vsp-custom-color-meta],
[data-vsp-gradient-row-id] {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  color: #8e82a6;
  flex-shrink: 0;
}

[data-vsp-custom-color-lock-badge] {
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

[data-vsp-custom-color-row-chev],
[data-vsp-gradient-row-chev] {
  font-size: 10px;
  color: #8e82a6;
  transition: transform 0.15s;
  flex-shrink: 0;
}

/* ---------- Expanded edit forms ---------- */
[data-vsp-custom-color-row-edit],
[data-vsp-gradient-row-edit] {
  padding: 10px 12px 12px;
  border-top: 1px dashed #f0ebf6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: vspSlideDown 0.15s ease;
}

[data-vsp-custom-color-edit-field] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #65558F;
}
[data-vsp-custom-color-edit-field] > span {
  width: 56px;
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
[data-vsp-custom-color-edit-field] > input[type='text'],
[data-vsp-custom-color-edit-field] > select {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid #e8e0f0;
  border-radius: 6px;
  font-size: 11.5px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  color: #1c1b1f;
  background: #ffffff;
  outline: none;
  transition: border-color 0.12s;
}
[data-vsp-custom-color-edit-field] > input[type='text']:focus,
[data-vsp-custom-color-edit-field] > select:focus {
  border-color: #6B3FA0;
}
[data-vsp-custom-color-edit-field] > input[type='color'] {
  width: 36px;
  height: 28px;
  border: 1px solid #e8e0f0;
  border-radius: 6px;
  background: #ffffff;
  padding: 2px;
  cursor: pointer;
}

[data-vsp-custom-color-edit-actions],
[data-vsp-gradient-row-edit-actions] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px dashed #f0ebf6;
}
[data-vsp-custom-color-edit-actions-spacer],
[data-vsp-gradient-row-edit-actions-spacer] { flex: 1; }
[data-vsp-custom-color-delete],
[data-vsp-gradient-delete] {
  padding: 5px 12px;
  background: #ffffff;
  border: 1px solid #C53030;
  border-radius: 6px;
  color: #C53030;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.12s;
}
[data-vsp-custom-color-delete]:hover,
[data-vsp-gradient-delete]:hover {
  background: #C53030;
  color: #ffffff;
}

[data-vsp-gradient-row-meta] {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 12px;
  row-gap: 4px;
  font-size: 11px;
  margin: 0;
}
[data-vsp-gradient-row-meta-pair] {
  display: contents;
}
[data-vsp-gradient-row-meta-pair] dt {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: #65558F;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
[data-vsp-gradient-row-meta-pair] dd {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: #1c1b1f;
  margin: 0;
  word-break: break-word;
}
[data-vsp-gradient-row-edit-actions-note] {
  font-size: 10.5px;
  color: #8e82a6;
  font-style: italic;
}

/* ---------- Add-form (custom colours, inline disclosure) ---------- */
[data-vsp-custom-add-form] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  background: #faf8fe;
  border: 1px dashed #d0c5e0;
  border-radius: 6px;
  margin-bottom: 8px;
  animation: vspSlideDown 0.15s ease;
}
[data-vsp-custom-add-name] {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid #e8e0f0;
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11.5px;
  background: #ffffff;
  outline: none;
}
[data-vsp-custom-add-name]:focus { border-color: #6B3FA0; }
[data-vsp-custom-add-color] {
  width: 36px;
  height: 28px;
  border: 1px solid #e8e0f0;
  border-radius: 6px;
  cursor: pointer;
  background: #ffffff;
  padding: 2px;
  flex-shrink: 0;
}
[data-vsp-custom-add-submit] {
  padding: 5px 12px;
  background: #6B3FA0;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}
[data-vsp-custom-add-submit]:hover { background: #5a3490; }
[data-vsp-custom-add-submit]:disabled {
  background: #c8bfd6;
  cursor: not-allowed;
}
[data-vsp-custom-add-cancel] {
  padding: 5px 10px;
  background: transparent;
  color: #65558F;
  border: 1px solid #e8e0f0;
  border-radius: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Inline gradient-picker disclosure ---------- */
[data-vsp-gradient-picker] {
  padding: 10px;
  background: #faf8fe;
  border: 1px dashed #d0c5e0;
  border-radius: 6px;
  margin-bottom: 8px;
  animation: vspSlideDown 0.15s ease;
}
/*
 * CMS-embedded brand drawer — 320px shell that holds the compact
 * <VisualSeedsPanel>. Sticky 44px header (label + dirty pill + close) and
 * sticky 56px footer (Save + Close). Slides in from the left edge of the
 * CMS canvas (after the 56px CMS rail).
 */

@keyframes cms-brand-drawer-slide-in {
  from {
    transform: translateX(-12px);
    opacity: 0.4;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes cms-brand-drawer-save-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(107, 63, 160, 0.45);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(107, 63, 160, 0);
  }
}

[data-cms-brand-drawer] {
  position: fixed;
  top: var(--app-navbar-height, 0);
  bottom: 0;
  left: 56px;
  width: 320px;
  z-index: 35;
  background: #fff;
  border-right: 1px solid #e8e0f0;
  box-shadow: 2px 0 12px rgba(28, 27, 31, 0.06);
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  animation: cms-brand-drawer-slide-in 200ms ease-out;
}

[data-cms-brand-drawer-header] {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  border-bottom: 1px solid #e8e0f0;
  flex-shrink: 0;
  background: #fff;
}

[data-cms-brand-drawer-title] {
  font-size: 13px;
  font-weight: 800;
  color: #1c1b1f;
}

[data-cms-brand-drawer-dirty] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
}

[data-cms-brand-drawer-close] {
  border: 0;
  background: transparent;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #65558F;
  line-height: 1;
}

[data-cms-brand-drawer-close]:hover {
  background: #f5f0fa;
  color: #6B3FA0;
}

[data-cms-brand-drawer-body] {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

[data-cms-brand-drawer-body] [data-vsp-root] {
  flex: 1;
}

[data-cms-brand-drawer-footer] {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 56px;
  padding: 0 14px;
  border-top: 1px solid #e8e0f0;
  background: #fff;
  flex-shrink: 0;
}

[data-cms-brand-drawer-error] {
  font-size: 11px;
  color: #b91c1c;
  flex: 1;
}

[data-cms-brand-drawer-footer] :not([data-cms-brand-drawer-error]):first-child:not(button) {
  flex: 1;
}

[data-cms-brand-drawer-footer] button[data-pulse='true'] {
  animation: cms-brand-drawer-save-pulse 600ms ease-out;
}
/* IMPORTANT NOTE:
THE DARK AND LIGHT COLORS HERE ARE DUPLICATED BECAUSE NO REUSE METHOD POSSIBLE.
WHEN MAKING ANY CHANGE, MAKE SURE TO INCLUDE IT IN ALL DUPLICATIONS.
*/

/* BASE LIGHT THEME */
:root {
  /* Semantic color tokens */
  /* Main brand/action color - used for buttons, interactive elements */
  --copilot-kit-primary-color: rgb(28, 28, 28);
  /* Color that contrasts with primary - used for text on primary elements */
  --copilot-kit-contrast-color: rgb(255, 255, 255);
  /* Main page/container background color */
  --copilot-kit-background-color: rgb(255 255 255);
  /* Input box background color */
  --copilot-kit-input-background-color: #fbfbfb;
  /* Secondary background - used for cards, panels, elevated surfaces */
  --copilot-kit-secondary-color: rgb(255 255 255);
  /* Primary text color for main content */
  --copilot-kit-secondary-contrast-color: rgb(28, 28, 28);
  /* Border color for dividers and containers */
  --copilot-kit-separator-color: rgb(200 200 200);
  /* Muted color for disabled/inactive states */
  --copilot-kit-muted-color: rgb(200 200 200);

  /* Error colors */
  --copilot-kit-error-background: #fef2f2;
  --copilot-kit-error-border: #fecaca;
  --copilot-kit-error-text: #dc2626;

  /* Shadow tokens */
  /* Small shadow for subtle elevation */
  --copilot-kit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  /* Medium shadow for cards */
  --copilot-kit-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  /* Large shadow for modals */
  --copilot-kit-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  --copilot-kit-dev-console-bg: #f8f8fa;
  --copilot-kit-dev-console-text: black;
}

/* BASE DARK THEME */
.dark,
html.dark,
body.dark,
[data-theme="dark"],
html[style*="color-scheme: dark"],
body[style*="color-scheme: dark"] :root {
  /* Main brand/action color - used for buttons, interactive elements */
  --copilot-kit-primary-color: rgb(255, 255, 255);
  /* Color that contrasts with primary - used for text on primary elements */
  --copilot-kit-contrast-color: rgb(28, 28, 28);
  /* Main page/container background color */
  --copilot-kit-background-color: rgb(17, 17, 17);
  /* Input box background color */
  --copilot-kit-input-background-color: #2c2c2c;
  /* Secondary background - used for cards, panels, elevated surfaces */
  --copilot-kit-secondary-color: rgb(28, 28, 28);
  /* Primary text color for main content */
  --copilot-kit-secondary-contrast-color: rgb(255, 255, 255);
  /* Border color for dividers and containers */
  --copilot-kit-separator-color: rgb(45, 45, 45);
  /* Muted color for disabled/inactive states */
  --copilot-kit-muted-color: rgb(45, 45, 45);

  /* Error colors */
  --copilot-kit-error-background: #7f1d1d;
  --copilot-kit-error-border: #dc2626;
  --copilot-kit-error-text: #fca5a5;

  /* Small shadow for subtle elevation */
  --copilot-kit-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  /* Medium shadow for cards */
  --copilot-kit-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  /* Large shadow for modals */
  --copilot-kit-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

.copilotKitPopup {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 30;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  touch-action: manipulation;
}

.copilotKitPopup svg {
  display: inline-block;
  vertical-align: middle;
}

.copilotKitSidebar {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 30;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  touch-action: manipulation;
}

.copilotKitSidebar svg {
  display: inline-block;
  vertical-align: middle;
}

.copilotKitSidebarContentWrapper {
  overflow: visible;
  margin-right: 0px;
  transition: margin-right 0.3s ease;
}

@media (min-width: 640px) {
  .copilotKitSidebarContentWrapper.sidebarExpanded {
    margin-right: 28rem;
  }
}

.copilotKitButton {
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--copilot-kit-primary-color);
  outline: none;
  position: relative;
  transform: scale(1);
  transition: all 0.2s ease;
  background-color: var(--copilot-kit-primary-color);
  color: var(--copilot-kit-contrast-color);
  cursor: pointer;
  box-shadow: var(--copilot-kit-shadow-sm);
}

.copilotKitButton:hover {
  transform: scale(1.05);
  box-shadow: var(--copilot-kit-shadow-md);
}

.copilotKitButton:active {
  transform: scale(0.95);
  box-shadow: var(--copilot-kit-shadow-sm);
}

.copilotKitButtonIcon {
  transition:
    opacity 100ms,
    transform 300ms;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.copilotKitButtonIcon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* State when the chat is open */
.copilotKitButton.open .copilotKitButtonIconOpen {
  transform: translate(-50%, -50%) scale(0) rotate(90deg);
  opacity: 0;
}

.copilotKitButton.open .copilotKitButtonIconClose {
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  opacity: 1;
}

/* State when the chat is closed */
.copilotKitButton:not(.open) .copilotKitButtonIconOpen {
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  opacity: 1;
}

.copilotKitButton:not(.open) .copilotKitButtonIconClose {
  transform: translate(-50%, -50%) scale(0) rotate(-90deg);
  opacity: 0;
}

.copilotKitHeader {
  height: 56px;
  font-weight: 500;
  display: flex;
  align-items: center;
  position: relative;
  color: var(--copilot-kit-primary-color);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom: 1px solid var(--copilot-kit-separator-color);
  padding-left: 1.5rem;
  background-color: var(--copilot-kit-contrast-color);
  justify-content: space-between;
  z-index: 2;
}

.copilotKitSidebar .copilotKitHeader {
  border-radius: 0;
}

.copilotKitHeaderControls {
  display: flex;
}

.copilotKitHeaderCloseButton {
  background: none;
  border: none;
}

@media (min-width: 640px) {
  .copilotKitHeader {
    padding-left: 1.5rem;
    padding-right: 24px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }
}

.copilotKitHeader > button {
  border: 0;
  padding: 8px;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  outline: none;
  color: var(--copilot-kit-muted-color);
  background-color: transparent;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
  width: 35px;
  height: 35px;
}

.copilotKitHeader > button:hover {
  color: color-mix(in srgb, var(--copilot-kit-muted-color) 80%, black);
}

.copilotKitHeader > button:focus {
  outline: none;
}

.copilotKitInput {
  cursor: text;
  position: relative;
  background-color: var(--copilot-kit-input-background-color);
  border-radius: 20px;
  border: 1px solid var(--copilot-kit-separator-color);
  padding: 12px 14px;
  min-height: 75px;
  margin: 0 auto;
  width: 95%;
}

.copilotKitInputContainer {
  width: 100%;
  padding: 0;
  padding-bottom: 15px;
  background: var(--copilot-kit-background-color);
  border-bottom-left-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}

.copilotKitSidebar .copilotKitInputContainer {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.copilotKitInputControlButton {
  padding: 0;
  cursor: pointer;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
  transform: scale(1);
  color: rgba(0, 0, 0, 0.25);
  -webkit-appearance: button;
  appearance: button;
  background-color: transparent;
  background-image: none;
  text-transform: none;
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  border: 0;
  margin: 0;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: center;
  width: 24px;
  height: 24px;
}

.copilotKitInputControlButton:not([disabled]) {
  color: var(--copilot-kit-primary-color);
}

.copilotKitInputControlButton:not([disabled]):hover {
  color: color-mix(in srgb, var(--copilot-kit-primary-color) 80%, black);
  transform: scale(1.05);
}

.copilotKitInputControlButton[disabled] {
  color: var(--copilot-kit-muted-color);
  cursor: default;
}

.copilotKitInputControls {
  display: flex;
  gap: 3px;
}

.copilotKitInput > textarea {
  flex: 1; /* Allow textarea to take up remaining space */
  outline: 2px solid transparent;
  outline-offset: 2px;
  resize: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: text;
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-weight: inherit;
  color: var(--copilot-kit-secondary-contrast-color);
  border: 0px;
  background-color: transparent;
  width: 100%;
}

.copilotKitInput > textarea::placeholder {
  color: #808080;
  opacity: 1;
}

.copilotKitInputControlButton.copilotKitPushToTalkRecording {
  background-color: #ec0000;
  color: white;
  border-radius: 50%;
  animation: copilotKitPulseAnimation 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Scrollbar styles */
.copilotKitInput textarea::-webkit-scrollbar {
  width: 9px; /* Width of the entire scrollbar */
}

.copilotKitInput textarea::-webkit-scrollbar-track {
  background: transparent; /* Color of the tracking area */
}

.copilotKitInput textarea::-webkit-scrollbar-thumb {
  background-color: rgb(200 200 200); /* Color of the scroll thumb */
  border-radius: 10px; /* Roundness of the scroll thumb */
  border: 2px solid transparent; /* Creates padding around scroll thumb */
  background-clip: content-box;
  cursor: pointer;
}

.copilotKitInput textarea::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, rgb(200 200 200) 80%, black); /* Darker color on hover */
}

.poweredByContainer {
  padding: 0;
}

.poweredBy {
  background: var(--copilot-kit-background-color) !important;
  visibility: visible !important;
  display: block !important;
  position: static !important;
  text-align: center !important;
  font-size: 12px !important;
  padding: 3px 0 !important;
  color: rgb(214, 214, 214) !important;
  margin: 0 !important;
}

.dark,
html.dark,
body.dark,
[data-theme="dark"],
html[style*="color-scheme: dark"],
body[style*="color-scheme: dark"] .poweredBy {
  color: rgb(69, 69, 69) !important;
}


.copilotKitMessages {
  overflow-y: scroll;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: var(--copilot-kit-background-color);
  color: var(--copilot-kit-secondary-contrast-color);
  justify-content: space-between;
  z-index: 1;
}

.copilotKitMessagesContainer {
  padding: 1rem 24px;
  display: flex;
  flex-direction: column;
}

.copilotKitMessagesFooter {
  display: flex;
  padding: 0.5rem 0.75rem;
  margin: 8px auto 0 auto;
  justify-content: flex-start;
  flex-direction: column;
  width: 97%;
}

.copilotKitMessages::-webkit-scrollbar {
  width: 6px;
}

.copilotKitMessages::-webkit-scrollbar-thumb {
  background-color: var(--copilot-kit-separator-color);
  border-radius: 10rem;
  border: 2px solid var(--copilot-kit-background-color);
}

.copilotKitMessages::-webkit-scrollbar-track-piece:start {
  background: transparent;
}

.copilotKitMessages::-webkit-scrollbar-track-piece:end {
  background: transparent;
}

.copilotKitMessage {
  border-radius: 15px;
  padding: 8px 12px;
  font-size: 1rem;
  line-height: 1.5;
  overflow-wrap: break-word;
  max-width: 80%;
  margin-bottom: 0.5rem;
}

.copilotKitMessage.copilotKitUserMessage {
  background: var(--copilot-kit-primary-color);
  color: var(--copilot-kit-contrast-color);
  margin-left: auto;
  white-space: pre-wrap;
  line-height: 1.75;
  font-size: 1rem;
}

.copilotKitMessage.copilotKitAssistantMessage {
  background: transparent;
  margin-right: auto;
  padding-left: 0;
  position: relative;
  max-width: 100%;
  color: var(--copilot-kit-secondary-contrast-color);
}

.copilotKitMessage.copilotKitAssistantMessage .copilotKitMessageControls {
  position: absolute;
  left: 0;
  display: flex;
  gap: 1rem;
  opacity: 0;
  transition: opacity 0.2s ease;
  padding: 5px 0 0 0;
}

.copilotKitMessageControls.currentMessage {
  opacity: 1 !important;
}

.copilotKitMessage.copilotKitAssistantMessage:hover .copilotKitMessageControls {
  opacity: 1;
}

/* Always show controls on mobile */
@media (max-width: 768px) {
  .copilotKitMessage.copilotKitAssistantMessage .copilotKitMessageControls {
    opacity: 1;
  }
}

.copilotKitMessageControlButton {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  border-radius: 0.5rem;
  justify-content: center;
  color: var(--copilot-kit-primary-color);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  z-index: 10;
  margin: 0;
  background: transparent;
  border: none;
}

.copilotKitMessageControlButton:hover {
  color: color-mix(in srgb, var(--copilot-kit-primary-color) 80%, black);
  transform: scale(1.05);
}

.copilotKitMessageControlButton:active {
  color: color-mix(in srgb, var(--copilot-kit-primary-color) 80%, black);
  transform: scale(1.05);
}

.copilotKitMessageControlButton.active {
  background-color: var(--copilot-kit-primary-color);
  color: var(--copilot-kit-contrast-color);
}

.copilotKitMessageControlButton.active:hover {
  background-color: color-mix(in srgb, var(--copilot-kit-primary-color) 90%, black);
  color: var(--copilot-kit-contrast-color);
}

.copilotKitMessageControlButton svg {
  width: 1rem;
  height: 1rem;
  display: block;
  pointer-events: none;
}

.copilotKitMessage.copilotKitAssistantMessage + .copilotKitMessage.copilotKitUserMessage {
  margin-top: 1.5rem;
}

.copilotKitCustomAssistantMessage {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.copilotKitMessage .inProgressLabel {
  margin-left: 10px;
  opacity: 0.7;
}

@keyframes copilotKitSpinAnimation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.copilotKitSpinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--copilot-kit-contrast-color);
  border-radius: 50%;
  border-top-color: var(--copilot-kit-primary-color);
  animation: copilotKitSpinAnimation 1s linear infinite;
}

@keyframes copilotKitActivityDotAnimation {
  0%, 80%, 100% {
    transform: scale(0.5);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.copilotKitActivityDot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--copilot-kit-primary-color);
  animation: copilotKitActivityDotAnimation 1.4s infinite ease-in-out both;
}

/* Image Rendering Styles */
.copilotKitImageRendering {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.copilotKitImageRenderingImage {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: var(--copilot-kit-shadow-sm);
}

.copilotKitImageRenderingContent {
  margin-top: 8px;
  padding: 0 16px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--copilot-kit-secondary-contrast-color);
}

/* Image Error State Styles */
.copilotKitImageRenderingError {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--copilot-kit-separator-color);
  border-radius: 8px;
  background-color: var(--copilot-kit-input-background-color);
}

.copilotKitImageRenderingErrorMessage {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background-color: var(--copilot-kit-error-background);
  border: 1px solid var(--copilot-kit-error-border);
  border-radius: 6px;
  color: var(--copilot-kit-error-text);
  font-size: 0.875rem;
  font-weight: 500;
}

.copilotKitImageRenderingErrorMessage::before {
  content: "⚠️";
  font-size: 1rem;
}
.copilotKitWindow {
  position: fixed;
  inset: 0px;
  transform-origin: bottom;
  border-color: rgb(229 231 235);
  background-color: var(--copilot-kit-background-color);
  border-radius: 0.75rem;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 5px 40px;
  flex-direction: column;
  transition:
    opacity 100ms ease-out,
    transform 200ms ease-out;
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  display: flex;
  pointer-events: none;
}

.copilotKitSidebar .copilotKitWindow {
  border-radius: 0;
  opacity: 1;
  transform: translateX(100%);
}

.copilotKitWindow.open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: auto;
}

.copilotKitSidebar .copilotKitWindow.open {
  transform: translateX(0);
}

@media (min-width: 640px) {
  .copilotKitWindow {
    transform-origin: bottom right;
    bottom: 5rem;
    right: 1rem;
    top: auto;
    left: auto;
    border-width: 0px;
    margin-bottom: 1rem;
    width: 24rem;
    height: 600px;
    min-height: 200px;
    max-height: calc(100% - 6rem);
  }

  .copilotKitSidebar .copilotKitWindow {
    bottom: 0;
    right: 0;
    top: auto;
    left: auto;
    width: 28rem;
    min-height: 100%;
    margin-bottom: 0;
    max-height: none;
  }
}

.copilotKitActivityDot1 {
  animation: copilotKitActivityDotsAnimation 1.05s infinite;
}
.copilotKitActivityDot2 {
  animation-delay: 0.1s;
}
.copilotKitActivityDot3 {
  animation-delay: 0.2s;
}
@keyframes copilotKitActivityDotsAnimation {
  0%,
  57.14% {
    animation-timing-function: cubic-bezier(0.33, 0.66, 0.66, 1);
    transform: translate(0);
  }
  28.57% {
    animation-timing-function: cubic-bezier(0.33, 0, 0.66, 0.33);
    transform: translateY(-6px);
  }
  100% {
    transform: translate(0);
  }
}

@keyframes copilotKitSpinAnimation {
  to {
    transform: rotate(360deg);
  }
}

@keyframes copilotKitPulseAnimation {
  50% {
    opacity: 0.5;
  }
}

h1.copilotKitMarkdownElement,
h2.copilotKitMarkdownElement,
h3.copilotKitMarkdownElement,
h4.copilotKitMarkdownElement,
h5.copilotKitMarkdownElement,
h6.copilotKitMarkdownElement {
  font-weight: bold;
  line-height: 1.2;
}

h1.copilotKitMarkdownElement:not(:last-child),
h2.copilotKitMarkdownElement:not(:last-child),
h3.copilotKitMarkdownElement:not(:last-child),
h4.copilotKitMarkdownElement:not(:last-child),
h5.copilotKitMarkdownElement:not(:last-child),
h6.copilotKitMarkdownElement:not(:last-child) {
  margin-bottom: 1rem;
}

h1.copilotKitMarkdownElement {
  font-size: 1.5em;
}

h2.copilotKitMarkdownElement {
  font-size: 1.25em;
  font-weight: 600;
}

h3.copilotKitMarkdownElement {
  font-size: 1.1em;
}

h4.copilotKitMarkdownElement {
  font-size: 1em;
}

h5.copilotKitMarkdownElement {
  font-size: 0.9em;
}

h6.copilotKitMarkdownElement {
  font-size: 0.8em;
}

a.copilotKitMarkdownElement {
  color: blue;
  text-decoration: underline;
}

p.copilotKitMarkdownElement {
  padding: 0px;
  margin: 0px;
  line-height: 1.75;
  font-size: 1rem;
}

p.copilotKitMarkdownElement:not(:last-child),
pre.copilotKitMarkdownElement:not(:last-child),
ol.copilotKitMarkdownElement:not(:last-child),
ul.copilotKitMarkdownElement:not(:last-child),
blockquote.copilotKitMarkdownElement:not(:last-child) {
  margin-bottom: 1.25em;
}

blockquote.copilotKitMarkdownElement {
  border-color: rgb(142, 142, 160);
  border-left-width: 2px;
  border-left-style: solid;
  line-height: 1.2;
  padding-left: 10px;
}

blockquote.copilotKitMarkdownElement p {
  padding: 0.7em 0;
}

ul.copilotKitMarkdownElement {
  list-style-type: disc;
  padding-left: 20px;
  overflow: visible;
}

li.copilotKitMarkdownElement {
  list-style-type: inherit;
  list-style-position: outside;
  margin-left: 0;
  padding-left: 0;
  position: relative;
  overflow: visible;
}

.copilotKitCodeBlock {
  position: relative;
  width: 100%;
  background-color: rgb(9 9 11);
  border-radius: 0.375rem;
}

.copilotKitCodeBlockToolbar {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(39 39 42);
  padding-left: 1rem;
  padding-top: 0.09rem;
  padding-bottom: 0.09rem;
  color: rgb(228, 228, 228);
  border-top-left-radius: 0.375rem;
  border-top-right-radius: 0.375rem;
  font-family: sans-serif;
}

.copilotKitCodeBlockToolbarLanguage {
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: lowercase;
}

.copilotKitCodeBlockToolbarButtons {
  display: flex;
  align-items: center;
  margin-right: 0.25rem;
  margin-left: 0.25rem;
}

.copilotKitCodeBlockToolbarButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  height: 2.5rem;
  padding: 3px;
  margin: 2px;
}

.copilotKitCodeBlockToolbarButton:hover {
  background-color: rgb(55, 55, 58);
}

.copilotKitInlineCode {
  background-color: var(--copilot-kit-input-background-color);
  border: 1px solid var(--copilot-kit-separator-color);
  border-radius: 0.375rem;
  padding: 0.05rem 0.4rem;
  font-size: 15px;
}
.copilotKitMessages footer .suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.copilotKitMessages footer h6 {
  font-weight: 500;
  font-size: 0.7rem;
  margin-bottom: 8px;
}

.copilotKitMessages footer .suggestions .suggestion {
  padding: 6px 10px;
  font-size: 0.7rem;
  border-radius: 15px;
  border: 1px solid var(--copilot-kit-muted-color);
  color: var(--copilot-kit-secondary-contrast-color);
  box-shadow: 0 5px 5px 0px rgba(0,0,0,.01),0 2px 3px 0px rgba(0,0,0,.02);
}

.copilotKitMessages footer .suggestions .suggestion.loading {
  padding: 0;
  font-size: 0.7rem;
  border: none;
  color: var(--copilot-kit-secondary-contrast-color);
}

.copilotKitMessages footer .suggestions button {
  transition: transform 0.3s ease;
}

.copilotKitMessages footer .suggestions button:not(:disabled):hover {
  transform: scale(1.03);
}

.copilotKitMessages footer .suggestions button:disabled {
  cursor: wait;
}

.copilotKitMessages footer .suggestions button svg {
  margin-right: 6px;
}
.copilotKitChat {
  z-index: 30;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  background: var(--copilot-kit-background-color);
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  touch-action: manipulation;
  display: flex;
  flex-direction: column;
  /* height: 100%; */
}

.copilotKitChat svg {
  display: inline-block;
  vertical-align: middle;
}

.copilotKitChat .copilotKitMessages {
  flex-grow: 1;
}

.copilotKitDevConsole {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 15px;
}

.copilotKitDevConsole.copilotKitDevConsoleWarnOutdated {
  background-color: var(--copilot-kit-dev-console-bg);
}

.copilotKitDevConsole .copilotKitVersionInfo {
  display: flex;
  position: absolute;
  bottom: -25px;
  padding: 3px 5px;
  left: 0;
  width: 100%;
  justify-content: center;
  gap: 10px;
  font-size: 0.8rem;
  align-items: center;
  background: #ebb305;
}

.copilotKitDevConsole .copilotKitVersionInfo button {
  font-size: 11px;
  font-weight: normal;
  font-family: monospace;
  background-color: var(--copilot-kit-dev-console-bg);
  border: 1px solid #979797;
  padding: 1px 12px;
  padding-left: 5px;
  border-radius: 4px;
  display: inline-block;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  width: 260px;
  text-overflow: ellipsis;
}

.copilotKitDevConsole .copilotKitVersionInfo aside {
  display: inline;
  font-weight: normal;
  color: #7f7a7a;
  margin-left: 5px;
}

.copilotKitDevConsole .copilotKitVersionInfo svg {
  margin-left: 3px;
  margin-top: -3px;
}

.copilotKitDevConsole .copilotKitDebugMenuTriggerButton {
  font-size: 11px;
  font-weight: bold;
  display: flex;
  padding: 0 10px;
  height: 30px;
  background-color: transparent;
  border: 1px solid var(--copilot-kit-muted-color);
  border-radius: 20px;
  align-items: center;
  justify-content: center;
  outline: none;
}

.copilotKitDebugMenuTriggerButton.compact {
  width: 35px;
  color: var(--copilot-kit-dev-console-bg);
  justify-content: center;
  outline: none;
  font-size: 8px;
}

.copilotKitDevConsole .copilotKitDebugMenuTriggerButton:hover {
  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 85%, black);
  color: var(--copilot-kit-dev-console-text);
}

.dark,
html.dark,
body.dark,
[data-theme="dark"],
html[style*="color-scheme: dark"],
body[style*="color-scheme: dark"] .copilotKitDevConsole .copilotKitDebugMenuTriggerButton {
  color: white;
}

.dark,
html.dark,
body.dark,
[data-theme="dark"],
html[style*="color-scheme: dark"],
body[style*="color-scheme: dark"] .copilotKitDevConsole .copilotKitDebugMenuTriggerButton:hover {
  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 20%, black);
}

.copilotKitDevConsole .copilotKitDebugMenuTriggerButton > svg {
  margin-left: 10px;
}

.copilotKitDebugMenu {
  --copilot-kit-dev-console-border: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 80%, black);
  margin-top: 2px;
  border-radius: 6px;
  background-color: var(--copilot-kit-dev-console-bg);
  border: 1px solid var(--copilot-kit-dev-console-border);
  padding: 0.25rem;
  outline: none;
  font-size: 13px;
}

.copilotKitDebugMenuItem {
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 10px;
  padding-right: 10px;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--copilot-kit-dev-console-text);
}

.copilotKitDebugMenuItem:hover {
  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 95%, black);
  border-radius: 4px;
}

.copilotKitDebugMenu[data-closed] {
  transform: scale(0.95); /* data-[closed]:scale-95 */
  opacity: 0; /* data-[closed]:opacity-0 */
}

.copilotKitDebugMenu hr {
  height: 1px;
  border: none; /* Remove 3D look */
  background-color: var(--copilot-kit-dev-console-border);
  margin: 0.25rem;
}

.copilotKitHelpModal {
  background-color: var(--copilot-kit-dev-console-bg);
  color: var(--copilot-kit-dev-console-text);
}

.copilotKitHelpItemButton {
  display: block;
  text-align: center;
  width: 100%;
  padding: 4px 6px;
  border-radius: 15px;
  font-size: 0.8rem;
  border: 1px solid var(--copilot-kit-muted-color);
  color: var(--copilot-kit-dev-console-text);
  box-shadow: 0 5px 5px 0px rgba(0,0,0,.01),0 2px 3px 0px rgba(0,0,0,.02);
  background-color: var(--copilot-kit-dev-console-bg);
}
.copilotKitHelpItemButton:hover {
  background-color: color-mix(in srgb, var(--copilot-kit-dev-console-bg) 95%, black);
}


/* Default styles for the ResponseRenderer component */

.copilotkit-response {
  text-align: right;
}

.copilotkit-response-content {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  color: #4b5563;
  background-color: #f9fafb;
  padding: 0.5rem;
  border-radius: 0.25rem;
  text-align: left;
}

.copilotkit-response-actions {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
}

.copilotkit-response-label {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
}

.copilotkit-toggle-button {
  margin-right: 0.25rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.copilotkit-icon {
  height: 0.75rem;
  width: 0.75rem;
  color: #6b7280;
}

.copilotkit-response-buttons {
  display: flex;
  gap: 0.5rem;
}

.copilotkit-response-button {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background-color: #f3f4f6;
  color: #4b5563;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
}

.copilotkit-response-button:hover {
  background-color: #e5e7eb;
}

.copilotkit-response-button:focus {
  outline: none;
}

.copilotkit-response-completed-feedback {
  background-color: #f9fafb;
  padding: 0.5rem;
  border-radius: 0.375rem;
  display: inline-flex;
  align-items: center;
}

.copilotkit-response-completed-feedback span {
  color: #4b5563;
  font-size: 0.75rem;
  font-weight: 500;
}

/* DefaultStateRenderer styles */

.copilotkit-state {
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.copilotkit-state-header {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  user-select: none;
  margin-bottom: 0.25rem;
}

.copilotkit-state-label {
  color: #4b5563;
  font-size: 0.875rem;
}

.copilotkit-state-label-loading {
  display: inline-flex;
  align-items: center;
  animation: pulse 1.5s infinite;
}

.copilotkit-state-content {
  padding-left: 1rem;
  max-height: 250px;
  overflow: auto;
  padding-top: 0.375rem;
  border-left: 1px solid #e5e7eb;
  margin-left: 0.375rem;
}

.copilotkit-state-item {
  padding: 0.25rem 0;
  margin-bottom: 0.25rem;
  transition: all 0.3s ease;
}

.copilotkit-state-item-newest {
  animation: appear 0.5s ease-out;
}

.copilotkit-state-item-header {
  font-size: 0.75rem;
  opacity: 0.7;
}

.copilotkit-state-item-thought {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  opacity: 0.8;
}

.copilotkit-state-item-result {
  margin-top: 0.125rem;
  font-size: 0.75rem;
}

.copilotkit-state-item-description {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  opacity: 0.8;
}

.copilotkit-state-empty {
  padding: 0.25rem 0;
  font-size: 0.75rem;
  opacity: 0.7;
}

.copilotkit-skeleton {
  padding: 0.125rem 0;
  animation: pulse 1.5s infinite;
}

.copilotkit-skeleton-header {
  display: flex;
  justify-content: space-between;
}

.copilotkit-skeleton-title {
  height: 0.625rem;
  width: 4rem;
  background-color: #e5e7eb;
  border-radius: 0.25rem;
}

.copilotkit-skeleton-subtitle {
  height: 0.5rem;
  width: 2rem;
  background-color: #e5e7eb;
  border-radius: 0.25rem;
}

.copilotkit-skeleton-content {
  margin-top: 0.125rem;
  height: 1.5rem;
  background-color: #e5e7eb;
  border-radius: 0.25rem;
}

.copilotkit-loader {
  animation: spin 1.5s linear infinite;
}

.copilotkit-spinner {
  animation: spin 1.5s linear infinite;
}

/* Animations */
@keyframes appear {
  0% {
    opacity: 0;
    transform: translateY(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  /* DefaultResponseRenderer dark styles */
  .copilotkit-response-content {
    color: #9ca3af;
    background-color: #1f2937;
  }

  .copilotkit-response-label {
    color: #9ca3af;
  }

  .copilotkit-icon {
    color: #9ca3af;
  }

  .copilotkit-response-button {
    background-color: #1f2937;
    color: #d1d5db;
  }

  .copilotkit-response-button:hover {
    background-color: #374151;
  }

  .copilotkit-response-completed-feedback {
    background-color: #1f2937;
  }

  .copilotkit-response-completed-feedback span {
    color: #e5e7eb;
  }

  /* DefaultStateRenderer dark styles */
  .copilotkit-state-label {
    color: #d1d5db;
  }

  .copilotkit-state-content {
    border-left-color: #374151;
  }

  .copilotkit-skeleton-title,
  .copilotkit-skeleton-subtitle,
  .copilotkit-skeleton-content {
    background-color: #374151;
  }
}



/*# sourceMappingURL=index.css.map*//* ==========================================================================
   AgentChatPanel26 — CopilotKit CSS Overrides
   Scoped under .agent-chat-panel to avoid affecting other instances
   ========================================================================== */

/* 1A. CopilotKit CSS Variable Overrides */
.agent-chat-panel {
  --copilot-kit-primary-color: var(--ph-ref-palette-primary40);
  --copilot-kit-contrast-color: var(--ph-ref-palette-neutral99);
  --copilot-kit-background-color: var(--ph-ref-palette-neutral97);
  --copilot-kit-input-background-color: var(--ph-ref-palette-neutral97);
  --copilot-kit-secondary-color: var(--ph-ref-palette-neutral99);
  --copilot-kit-secondary-contrast-color: var(--ph-ref-palette-neutral20);
  --copilot-kit-separator-color: var(--ph-ref-palette-neutral80);
  --copilot-kit-muted-color: var(--ph-ref-palette-neutral60);
  --copilot-kit-shadow-sm: var(--ph-shadow-sm);
  --copilot-kit-shadow-md: var(--ph-shadow-md);
  --copilot-kit-shadow-lg: var(--ph-shadow-lg);
}

/* 1B. Hide CopilotKit's built-in header */
.agent-chat-panel .copilotKitHeader {
  display: none;
}

/* 1C. Message Styling */
.agent-chat-panel .copilotKitMessages {
  background: var(--ph-ref-palette-neutral97);
  font-family: var(--ph-ref-typeface-base);
}

.agent-chat-panel .copilotKitAssistantMessage {
  background: var(--ph-ref-palette-neutral99);
  border: 1px solid var(--ph-ref-palette-neutral80);
  border-radius: 4px 16px 16px 16px;
  box-shadow: var(--ph-shadow-sm);
  color: var(--ph-ref-palette-neutral20);
  padding-left: 8px;
}

.agent-chat-panel .copilotKitAssistantMessage .copilotKitMessageControls {
  padding: 10px 0 0 0;
}

.agent-chat-panel .copilotKitUserMessage {
  background: linear-gradient(
    135deg,
    var(--ph-ref-palette-primary40),
    var(--ph-ref-palette-primary20)
  );
  color: white;
  border-radius: 16px 4px 16px 16px;
  box-shadow: 0 2px 12px rgba(103, 58, 183, 0.25);
}

/* 1D. Input Styling */
.agent-chat-panel .copilotKitInputContainer {
  background: white;
}

.agent-chat-panel .copilotKitInput {
  background: var(--ph-ref-palette-neutral97);
  border: 1.5px solid var(--ph-ref-palette-neutral80);
  border-radius: 12px;
  font-family: var(--ph-ref-typeface-base);
}

.agent-chat-panel .copilotKitInput textarea {
  min-height: 40px !important;
  max-height: 120px !important;
}

.agent-chat-panel .copilotKitInputControlButton:not([disabled]) {
  background: linear-gradient(
    135deg,
    var(--ph-ref-palette-primary40),
    var(--ph-ref-palette-primary20)
  );
  color: white;
  border-radius: 8px;
}

/* 1E. Other Elements */
.agent-chat-panel .suggestion {
  border-radius: 20px;
  border: 1px solid var(--ph-ref-palette-neutral80);
  background: var(--ph-ref-palette-neutral99);
  transition: background 0.15s ease;
}

.agent-chat-panel .suggestion:hover {
  background: var(--ph-ref-palette-neutral96);
}

.agent-chat-panel .copilotKitMessageControlButton {
  color: var(--ph-ref-palette-neutral60);
  transition: all 0.15s ease;
}

.agent-chat-panel .copilotKitMessageControlButton:hover {
  color: var(--ph-ref-palette-primary40);
  background: var(--ph-ref-palette-primary98);
}

.agent-chat-panel .copilotKitActivityDot {
  background-color: var(--ph-ref-palette-primary40);
}

.agent-chat-panel .copilotKitSpinner {
  color: var(--ph-ref-palette-primary40);
}

/* Markdown headings use emphasis font */
.agent-chat-panel h1,
.agent-chat-panel h2,
.agent-chat-panel h3,
.agent-chat-panel h4,
.agent-chat-panel h5,
.agent-chat-panel h6 {
  font-family: var(--ph-ref-typeface-accent);
}

/* Body text uses body font */
.agent-chat-panel p,
.agent-chat-panel li,
.agent-chat-panel span {
  font-family: var(--ph-ref-typeface-base);
}

/* Hide powered-by branding */
.agent-chat-panel .poweredBy {
  display: none !important;
}

/* 1F. Session Dropdown */
.agent-chat-session-dropdown {
  border: 1px solid var(--ph-ref-palette-neutral90);
  animation: agent-chat-dropdown-in 0.15s ease-out;
}

@keyframes agent-chat-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.agent-chat-session-dropdown button:last-child {
  border-radius: 0 0 8px 8px;
}

/* 1G. Shimmer Divider Animation */
.agent-chat-shimmer {
  position: relative;
  background: linear-gradient(
    90deg,
    var(--ph-ref-palette-primary40),
    var(--ph-ref-palette-secondary40),
    var(--ph-ref-palette-tertiary40)
  );
  overflow: hidden;
}

.agent-chat-shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  transform: translateX(-100%);
  animation: agent-chat-shimmer-slide 3s ease-in-out infinite;
}

@keyframes agent-chat-shimmer-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* Custom scrollbar styling for PageContainer */

/* CSS Variables */
:root {
  --ph-top-bar-height: 64px;
}

/* Container height management */
#clap-page-container-26 {
  /* Fill available space in flex parent */
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Ensure proper flex layout */
.clap-page-container-flex {
  display: flex;
  flex-direction: row; /* Row layout for main content + agent panel */
  height: 100%;
  min-height: 0; /* Important for flex children to respect scroll */
  overflow: hidden;
}

.clap-page-container-content {
  flex: 1;
  min-height: 0; /* Important for enabling scroll */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Border radius (12px) and background (bg-surface) applied via Tailwind classes */
}

/* Header variants with transitions */
.clap-page-header-flat {
  /* Flat header is part of scrollable content */
  position: relative;
}

.clap-page-header-sticky-wrapper {
  /* Wrapper for sticky header that slides in/out */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  border-radius: 12px 12px 0 0; /* Match parent rounded corners at top */
}

.clap-page-header-sticky {
  /* Sticky header styles */
  background: var(--color-surface);
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
  transition: all 0.2s ease-in-out;
}

/**
 * Entity shell collapsed header (StickyHeader): match legacy page-header sticky
 * elevation + a slightly slower slide so the reveal reads clearly.
 */
.admin-shell-entity-sticky-header {
  transition:
    opacity 0.22s ease-out,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease-out;
}

.admin-shell-entity-sticky-header.is-revealed {
  box-shadow:
    0 4px 6px -1px rgb(0 0 0 / 0.1),
    0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Main content area with custom scrollbar */
.clap-page-content-scroll {
  /* Enable scrolling */
  overflow-y: auto;
  overflow-x: hidden;

  /* Fill available space */
  flex: 1;
  min-height: 0;

  /* Smooth scrolling */
  scroll-behavior: smooth;

  /* Add subtle padding for scrollbar */
  padding-right: 4px;

  /* Respect parent's rounded corners */
  border-radius: 12px;
}

/* Webkit browsers (Chrome, Safari, Edge) - Custom scrollbar like Shopify */
.clap-page-content-scroll::-webkit-scrollbar {
  width: 12px;
}

.clap-page-content-scroll::-webkit-scrollbar-track {
  background: transparent;
  margin: 8px 0;
}

.clap-page-content-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  border: 3px solid transparent;
  background-clip: padding-box;
  transition: background-color 0.2s ease;
}

.clap-page-content-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.18);
}

.clap-page-content-scroll::-webkit-scrollbar-thumb:active {
  background-color: rgba(0, 0, 0, 0.25);
}

/* Firefox - Custom scrollbar */
.clap-page-content-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .clap-page-header-sticky {
    background: transparent; /* Let parent bg-surface handle dark mode */
    box-shadow:
      0 4px 6px -1px rgb(0 0 0 / 0.3),
      0 2px 4px -2px rgb(0 0 0 / 0.3);
  }

  .admin-shell-entity-sticky-header.is-revealed {
    box-shadow:
      0 4px 6px -1px rgb(0 0 0 / 0.35),
      0 2px 4px -2px rgb(0 0 0 / 0.28);
  }

  .clap-page-content-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
  }

  .clap-page-content-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.22);
  }

  .clap-page-content-scroll::-webkit-scrollbar-thumb:active {
    background-color: rgba(255, 255, 255, 0.3);
  }

  .clap-page-content-scroll {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .clap-page-content-scroll::-webkit-scrollbar {
    width: 8px;
  }

  .clap-page-content-scroll::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
  }
}
/* EntityHeroPanel — animations for the compact product-detail hero.
   Keyframes mirror knowledge/ux-ui-design/business-web/products-v2/product-detail-compact.html */

@keyframes entityHeroPanel_pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 var(--_glow, oklch(70% 0.19 39 / 0.4));
  }
  50% {
    box-shadow: 0 0 0 6px oklch(70% 0.19 39 / 0);
  }
}

@keyframes entityHeroPanel_shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 400px 0;
  }
}

@keyframes entityHeroPanel_starFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.entityHeroPanel_photoButton {
  animation: entityHeroPanel_pulseGlow 2.5s infinite;
}

.entityHeroPanel_progressShimmer {
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(100% 0 0 / 0.4) 50%,
    transparent 100%
  );
  background-size: 200px 100%;
  animation: entityHeroPanel_shimmer 2s linear infinite;
}

.entityHeroPanel_starFilled {
  animation: entityHeroPanel_starFloat 2s ease infinite;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .entityHeroPanel_photoButton,
  .entityHeroPanel_progressShimmer,
  .entityHeroPanel_starFilled {
    animation: none;
  }
}
/* Dashboard Welcome Page — layout and animations */
.dashboard-welcome {
  max-width: 1280px;
  margin: 0 auto;
  padding: 32px 28px 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dashboard-welcome__grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
}

.dashboard-welcome__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.dashboard-welcome__sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

@media (max-width: 960px) {
  .dashboard-welcome__grid {
    grid-template-columns: 1fr;
  }

  .dashboard-welcome__sidebar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 640px) {
  .dashboard-welcome {
    padding: 24px 20px 48px;
  }

  .dashboard-welcome__sidebar {
    grid-template-columns: 1fr;
  }

  .dashboard-daily-tasks__grid {
    grid-template-columns: 1fr !important;
  }
}

/* Animation classes — respect reduced motion */
.dashboard-fade-slide-up {
  animation: fadeSlideUp 0.5s ease-out both;
}

.dashboard-scale-in {
  animation: scaleIn 0.5s ease-out both;
}

.dashboard-count-up {
  animation: countUp 0.4s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-fade-slide-up,
  .dashboard-scale-in,
  .dashboard-count-up {
    animation: none;
    opacity: 1;
    transform: none;
  }
}
.MenuItem {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.3;
  font-family: var(--ph-ref-typeface-base);
  color: var(--ph-ref-palette-neutral40);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  margin: 1px 0;
}

.MenuItem:hover {
  background: var(--ph-ref-palette-neutral96);
}

.MenuItem[data-is-active='true'] {
  background: linear-gradient(
    90deg,
    var(--ph-ref-palette-primary90, #f3eef9),
    var(--ph-surface, #fff)
  );
  color: var(--ph-primary);
  font-weight: 800;
}

.MenuItem[data-is-active='true']::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--ph-primary);
}

.MenuItem[data-is-active='true']:hover {
  background: linear-gradient(
    90deg,
    var(--ph-ref-palette-primary90, #f3eef9),
    var(--ph-surface, #fff)
  );
}

.MenuItem[data-parent-active='true'] {
  color: var(--ph-on-surface);
  font-weight: 600;
  background: transparent;
}

.MenuItem[data-parent-active='true']:hover {
  background: transparent;
}

/* Icon color states */
.MenuItem .MenuItem__icon {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ph-ref-palette-neutral50);
  font-size: 17px;
  line-height: 1;
}

.MenuItem[data-is-active='true'] .MenuItem__icon,
.MenuItem[data-parent-active='true'] .MenuItem__icon {
  color: var(--ph-primary);
}

/* Chevron */
.MenuItem__chevron {
  margin-left: auto;
  transition: transform 0.2s;
  color: var(--ph-ref-palette-neutral70);
  flex-shrink: 0;
}

.MenuItem__chevron--expanded {
  transform: rotate(90deg);
}

/* Badge */
.MenuItem__badge {
  margin-left: auto;
  font-family: var(--ph-ref-typeface-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9999px;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

.MenuItem__badge--count {
  background: var(--ph-ref-palette-neutral96);
  color: var(--ph-on-surface-variant);
}

.MenuItem__badge--urgent {
  background: var(--ph-ref-palette-error95, #fdd8d0);
  color: #8c2020;
}

.MenuItem__badge--attn {
  background: var(--ph-ref-palette-secondary90, #fde4c8);
  color: #7a5a20;
}

.MenuItem__meta {
  margin-left: auto;
  font-family: var(--ph-ref-typeface-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ph-on-surface-variant);
}

.MenuItem__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.MenuItem__dot--urgent {
  background: var(--ph-error, #e53935);
  animation: menuItemPulseAmber 1.8s infinite;
}

.MenuItem__dot--attn {
  width: 6px;
  height: 6px;
  background: var(--ph-ref-palette-secondary70);
}

.MenuItem--compact {
  padding: 6px 10px;
  font-size: 12px;
}

.MenuItem--dim {
  color: var(--ph-on-surface-variant);
  opacity: 0.85;
}

.MenuItem--dim .MenuItem__icon {
  color: var(--ph-ref-palette-neutral70);
}

@keyframes menuItemPulseAmber {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(245, 124, 0, 0.4);
  }
  70% {
    box-shadow: 0 0 0 5px transparent;
  }
}

/* Submenu container */
.MenuItem__submenu {
  padding: 2px 0;
  overflow: hidden;
  transition: max-height 0.2s ease, opacity 0.15s ease;
}

/* Sub-item */
.MenuItem--sub {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 38px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.3;
  font-family: var(--ph-ref-typeface-base);
  color: var(--ph-ref-palette-neutral40);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.MenuItem--sub:hover {
  background: var(--ph-ref-palette-neutral96);
}

.MenuItem--sub[data-is-active='true'] {
  background: var(--ph-ref-palette-primary94);
  color: var(--ph-on-surface);
  font-weight: 600;
}

.MenuItem--sub[data-is-active='true']:hover {
  background: var(--ph-ref-palette-primary94);
}

/* Sub-item icon */
.MenuItem--sub .MenuItem__icon {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ph-ref-palette-neutral50);
  font-size: 15px;
  line-height: 1;
}

.MenuItem--sub[data-is-active='true'] .MenuItem__icon {
  color: var(--ph-primary);
}

/* Vertical connector line */
.MenuItem--sub::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--ph-ref-palette-neutral90);
}

.MenuItem--sub:last-child::before {
  bottom: 50%;
}

.MenuItem--sub[data-is-active='true']::before {
  background: var(--ph-ref-palette-primary80);
}
._shell_eyko4_1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid var(--ph-outline-variant, var(--ph-ref-palette-neutral90));
  background: var(--ph-surface, #fff);
  border-top-left-radius: 12px;
}

._scroll_eyko4_11 {
  flex: 1;
  overflow-y: auto;
  padding: 8px 8px 0;
}

._workspace_eyko4_17 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 10px;
  border: none;
  border-bottom: 1px solid var(--ph-outline-variant, var(--ph-ref-palette-neutral90));
  background: transparent;
  width: 100%;
  cursor: pointer;
  text-align: left;
}

._workspaceBrand_eyko4_30 {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--ph-ref-palette-secondary70),
    var(--ph-ref-palette-secondary80, #e8a060)
  );
  color: #fff;
  font-family: var(--ph-ref-typeface-emphasis, 'Plus Jakarta Sans', sans-serif);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--ph-ref-palette-secondary70) 30%, transparent);
  overflow: hidden;
}

._workspaceBrand_eyko4_30 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

._workspaceText_eyko4_60 {
  flex: 1;
  min-width: 0;
}

._workspaceName_eyko4_65 {
  font-family: var(--ph-ref-typeface-emphasis, 'Plus Jakarta Sans', sans-serif);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ph-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._workspaceBranch_eyko4_76 {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ph-on-surface-variant);
}

._proChip_eyko4_85 {
  padding: 0 5px;
  border-radius: 3px;
  background: var(--ph-ref-palette-primary94);
  color: var(--ph-primary);
  font-family: var(--ph-ref-typeface-mono, ui-monospace, monospace);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

._workspaceChevron_eyko4_96 {
  color: var(--ph-on-surface-variant);
  flex-shrink: 0;
}

._today_eyko4_101 {
  margin: 10px 12px 4px;
  padding: 9px 11px;
  border-radius: 9px;
  background: linear-gradient(
    135deg,
    var(--ph-ref-palette-primary97, #f3eef9),
    var(--ph-surface, #ffffff)
  );
  border: 1px solid var(--ph-ref-palette-primary94, #e8e0f0);
  cursor: pointer;
}

._todayLabel_eyko4_114 {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ph-primary);
  margin-bottom: 4px;
}

._todayPulse_eyko4_126 {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ph-primary);
  animation: _sidebarPulseDot_eyko4_1 2s infinite;
}

._todayStats_eyko4_134 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

._todayStat_eyko4_134 {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  gap: 1px;
}

._todayStatVal_eyko4_148 {
  font-family: var(--ph-ref-typeface-mono, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--ph-on-surface);
}

._todayStatValPrimary_eyko4_156 {
  color: var(--ph-primary);
}

._todayStatLabel_eyko4_160 {
  font-family: var(--ph-ref-typeface-mono, ui-monospace, monospace);
  font-size: 8.5px;
  font-weight: 700;
  color: var(--ph-on-surface-variant);
  letter-spacing: 0.6px;
}

._todayDivider_eyko4_168 {
  width: 1px;
  height: 16px;
  background: var(--ph-outline-variant, var(--ph-ref-palette-neutral90));
}

._sectionLabel_eyko4_174 {
  padding: 0 10px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

._sectionLabelText_eyko4_182 {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ph-on-surface-variant);
}

._needsAttention_eyko4_190 {
  display: block;
  margin-bottom: 12px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--ph-ref-palette-error95, #fdd8d0);
  border: 1px solid #f5b5b5;
  border-left: 3px solid var(--ph-error, #e53935);
  cursor: pointer;
  text-decoration: none;
}

._needsAttentionRow_eyko4_202 {
  display: flex;
  align-items: center;
  gap: 8px;
}

._needsAttentionTitle_eyko4_208 {
  flex: 1;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 800;
  color: #8c2020;
}

._needsAttentionBadge_eyko4_216 {
  font-family: var(--ph-ref-typeface-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 9999px;
  background: var(--ph-error, #e53935);
  color: #fff;
  animation: _sidebarPulseAmber_eyko4_1 1.8s infinite;
}

._needsAttentionSub_eyko4_227 {
  font-size: 10.5px;
  font-weight: 600;
  color: #8c2020;
  margin-top: 4px;
  padding-left: 24px;
}

._advancedToggle_eyko4_235 {
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--ph-on-surface-variant);
}

._advancedChevron_eyko4_251 {
  display: flex;
  transition: transform 0.15s;
}

._advancedChevronOpen_eyko4_256 {
  transform: rotate(0deg);
}

._advancedChevronClosed_eyko4_260 {
  transform: rotate(-90deg);
}

._footer_eyko4_264 {
  padding: 8px 14px 10px;
  border-top: 1px solid var(--ph-outline-variant, var(--ph-ref-palette-neutral90));
  background: var(--ph-surface-dim, #faf8fe);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

._footerStatus_eyko4_274 {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

._footerDot_eyko4_281 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ph-tertiary, #2db89a);
  flex-shrink: 0;
}

._footerStatusText_eyko4_289 {
  font-size: 11px;
  font-weight: 700;
  color: var(--ph-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._footerVersion_eyko4_298 {
  font-family: var(--ph-ref-typeface-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  color: var(--ph-on-surface-variant);
  flex-shrink: 0;
}

._collapseBtn_eyko4_306 {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--ph-outline-variant, var(--ph-ref-palette-neutral90));
  background: var(--ph-surface, #fff);
  color: var(--ph-on-surface-variant);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

._collapseBtn_eyko4_306:hover {
  background: var(--ph-ref-palette-neutral96);
}

._collapsedScroll_eyko4_324 {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._collapsedIcon_eyko4_333 {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ph-on-surface-variant);
  text-decoration: none;
  transition: background 0.12s;
}

._collapsedIcon_eyko4_333:hover {
  background: var(--ph-ref-palette-neutral96);
}

._collapsedIconActive_eyko4_351 {
  background: var(--ph-ref-palette-primary90, #f3eef9);
  color: var(--ph-primary);
}

._collapsedDot_eyko4_356 {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid #fff;
}

._collapsedDotUrgent_eyko4_366 {
  background: var(--ph-error, #e53935);
  animation: _sidebarPulseAmber_eyko4_1 1.8s infinite;
}

._collapsedDotCount_eyko4_371 {
  background: var(--ph-primary);
}

._collapsedDivider_eyko4_375 {
  height: 1px;
  background: var(--ph-outline-variant, var(--ph-ref-palette-neutral90));
  margin: 6px 8px;
}

._collapsedFooter_eyko4_381 {
  padding: 10px 0;
  border-top: 1px solid var(--ph-outline-variant, var(--ph-ref-palette-neutral90));
  background: var(--ph-surface-dim, #faf8fe);
  display: flex;
  justify-content: center;
}

@keyframes _sidebarPulseDot_eyko4_1 {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ph-primary) 35%, transparent);
  }
  70% {
    box-shadow: 0 0 0 5px transparent;
  }
}

@keyframes _sidebarPulseAmber_eyko4_1 {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(245, 124, 0, 0.4);
  }
  70% {
    box-shadow: 0 0 0 5px transparent;
  }
}
._root_3t1n4_1 {
  /*
   * Height is owned by the global `--app-navbar-height` token (set in
   * `apps/business-web/src/styles/globals25.css`). This local var is just a
   * stable name for the rest of the file. The fallback `48px` exists only
   * for SSR-ish environments where the global stylesheet hasn't applied
   * yet — the global value is the real source of truth.
   */
  --_nav-height: var(--app-navbar-height, 48px);
  --_nav-px-desktop: 32px;
  --_nav-px-narrow: 16px;
  --_nav-center-max-width: 560px;
  --_nav-gap: 12px;

  flex-shrink: 0;
  position: relative;
  z-index: 50;

  display: flex;
  align-items: center;
  height: var(--_nav-height);
  padding-inline: var(--_nav-px-desktop);

  background-color: var(--ph-nav-bg);
  border-bottom: 1px solid var(--ph-nav-border);
  color: var(--ph-nav-text);
  box-shadow: 0 2px 8px rgba(42, 27, 77, 0.18);

  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);

  /*
   * Allow overflow so anchored popovers (UniversalSearch sheet, UserMenu,
   * NavbarAttentionSlot sheet, OverflowButton popover) can escape the bar's
   * 48px height. Horizontal overflow is prevented by the flex sizing of
   * each zone, so we don't need `overflow: hidden` as a safety net here.
   */
  overflow: visible;
}

/* Hide the bar entirely when the legacy mobile drawer is open — preserves the
   existing `showMobileNav && '!hidden'` behavior in the legacy Header. */
._rootHidden_3t1n4_42 {
  display: none;
}

@media (max-width: 767px) {
  ._root_3t1n4_1 {
    padding-inline: var(--_nav-px-narrow);
  }
}

._zone_3t1n4_52 {
  display: flex;
  align-items: center;
  min-width: 0;
}

._zoneLeft_3t1n4_58 {
  flex: 0 0 auto;
  gap: var(--_nav-gap);
  justify-content: flex-start;
}

._zoneCenter_3t1n4_64 {
  flex: 1 1 auto;
  justify-content: center;
  padding-inline: var(--_nav-gap);
  /* Center zone caps at 560px so the search input never stretches on ultrawide. */
  max-width: var(--_nav-center-max-width);
  margin-inline: auto;
}

._zoneRight_3t1n4_73 {
  flex: 0 0 auto;
  gap: var(--_nav-gap);
  justify-content: flex-end;
  margin-left: auto;
}

/* Stubs rendered during Phase 4.1 before real widgets land. Muted text on
   purple so the zones are visible during development without looking
   production-ready. */
._stub_3t1n4_83 {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-nav-text-muted);
  padding: 4px 10px;
  border: 1px dashed var(--ph-nav-divider);
  border-radius: var(--ph-sys-shape-sm, 8px);
}
._root_1mz8c_1 {
  --_brandmark-size: 28px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--_brandmark-size);
  height: var(--_brandmark-size);
  flex-shrink: 0;
  overflow: hidden;

  /* Orange rounded square per wireframe; secondary70 matches the legacy
     HeaderCurrentScope tile so the visual identity carries over. */
  background: var(--ph-ref-palette-secondary70);
  color: var(--ph-ref-palette-secondary98, #ffffff);
  border-radius: var(--ph-sys-shape-md, 12px);

  font-family: var(--ph-ref-typeface-accent, 'Plus Jakarta Sans', sans-serif);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0;
}

._image_1mz8c_26 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
._root_oeo74_1 {
  --_gap: 10px;
  --_px: 6px;
  --_py: 4px;
  --_radius: var(--ph-sys-shape-sm, 8px);

  display: inline-flex;
  align-items: center;
  gap: var(--_gap);

  height: 36px;
  padding: var(--_py) var(--_px);

  background: transparent;
  border: none;
  border-radius: var(--_radius);

  color: var(--ph-nav-text-strong);
  cursor: pointer;
  user-select: none;

  transition: background-color 120ms ease;
  min-width: 0;
}

._root_oeo74_1:hover,
._root_oeo74_1:focus-visible {
  background: var(--ph-nav-hover-bg);
}

._root_oeo74_1:focus-visible {
  outline: 2px solid var(--ph-primary-container, var(--ph-primary));
  outline-offset: 2px;
}

._labels_oeo74_36 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  min-width: 0;
}

._labelBrand_oeo74_44 {
  font-family: var(--ph-ref-typeface-accent, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ph-nav-text-strong);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._labelBranch_oeo74_57 {
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  margin-top: 2px;
  color: var(--ph-nav-text);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Compact variant: single-line branch label, no brand label. */
._labelsCompact_oeo74_71 {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

._labelBranchCompact_oeo74_77 {
  font-family: var(--ph-ref-typeface-accent, 'Plus Jakarta Sans', sans-serif);
  font-weight: 700;
  font-size: 13px;
  line-height: 1.15;
  color: var(--ph-nav-text-strong);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._chevron_oeo74_89 {
  flex-shrink: 0;
  color: var(--ph-nav-text);
  transition: transform 120ms ease;
}

._root_oeo74_1[data-open='true'] ._chevron_oeo74_89 {
  transform: rotate(180deg);
}

/* Narrow variant: no chevron; dropdown is handled by the drawer instead.
   Keep it non-clickable on narrow since clicks go through the hamburger. */
._narrow_oeo74_101 {
  cursor: default;
  gap: 8px;
}

._narrow_oeo74_101:hover,
._narrow_oeo74_101:focus-visible {
  background: transparent;
}
/**
 * BusinessDayWidget — 2-line inverted hierarchy.
 *
 * Line 1 (muted context): status dot + STATUS label + formatted date.
 * Line 2 (tone-colored signal): tagline text + optional chevron when clickable.
 *
 * This matches the design adjustment captured in ROADMAP Phase 4.3.2 (the
 * original spec anatomy was 3-line; 2026-04-21 review collapsed branch into
 * the ScopeSwitcher to the left of the widget).
 *
 * Pure presentation. The container reads contexts and the fixture.
 */

._root_vok0t_14 {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 12px;
  border-radius: var(--ph-sys-shape-md);
  background: rgba(255, 255, 255, 0.04);
  min-height: 40px;
  max-width: 320px;

  font-family: var(--ph-sys-type-family-primary, 'Inter', sans-serif);
  color: var(--ph-nav-text);
  white-space: nowrap;
}

/*
 * Interactive variant: the whole widget is a <button> that navigates to
 * `/eslog/operations`. We strip the native button chrome and lay it out as
 * `[stack] [chevron]` so the chevron sits at the trailing edge and signals
 * "this is a link to manage POS day".
 */
._rootInteractive_vok0t_36 {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background-color 120ms ease;
}

._rootInteractive_vok0t_36:hover {
  background: rgba(255, 255, 255, 0.08);
}

._rootInteractive_vok0t_36:focus-visible {
  outline: 2px solid var(--ph-nav-text-strong);
  outline-offset: 2px;
}

._rootInteractive_vok0t_36:hover ._chevron_vok0t_56 {
  transform: translateX(2px);
}

._interactiveBody_vok0t_60 {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

._contextLine_vok0t_69 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: var(--ph-nav-text-muted);
  text-transform: uppercase;
}

._statusDot_vok0t_80 {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ph-nav-text-muted);
  flex-shrink: 0;
}

._statusDotOpen_vok0t_88 {
  background: var(--ph-success-on-nav);
  box-shadow: 0 0 0 2px rgba(79, 191, 169, 0.18);
}

._statusDotPending_vok0t_93 {
  background: var(--ph-warning-on-nav);
}

._statusDotClosed_vok0t_97 {
  background: var(--ph-nav-text-muted);
}

._statusDotUnknown_vok0t_101 {
  background: var(--ph-nav-text-muted);
  opacity: 0.6;
}

._statusLabel_vok0t_106 {
  color: var(--ph-nav-text-strong);
  font-weight: 600;
}

._dateLabel_vok0t_111 {
  color: var(--ph-nav-text-muted);
}

._separator_vok0t_115 {
  color: var(--ph-nav-text-muted);
  opacity: 0.7;
}

._signalLine_vok0t_120 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ph-nav-text-strong);
  /* Clip overflow so long taglines don't blow out the left zone. */
  overflow: hidden;
  text-overflow: ellipsis;
}

._signalText_vok0t_133 {
  overflow: hidden;
  text-overflow: ellipsis;
}

._tonePositive_vok0t_138 {
  color: var(--ph-success-on-nav);
}

._toneWarning_vok0t_142 {
  color: var(--ph-warning-on-nav);
}

._toneUrgent_vok0t_146 {
  color: var(--ph-error-on-nav);
}

._toneNeutral_vok0t_150 {
  color: var(--ph-nav-text-strong);
}

._signalButton_vok0t_154 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  border-radius: 4px;
}

._signalButton_vok0t_154:hover ._signalText_vok0t_133,
._signalButton_vok0t_154:focus-visible ._signalText_vok0t_133 {
  text-decoration: underline;
  text-underline-offset: 2px;
}

._signalButton_vok0t_154:focus-visible {
  outline: 2px solid var(--ph-nav-text-strong);
  outline-offset: 3px;
}

._chevron_vok0t_56 {
  flex-shrink: 0;
  transition: transform 150ms ease;
}

._signalButton_vok0t_154:hover ._chevron_vok0t_56 {
  transform: translateX(2px);
}
._divider_l2eq3_1 {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--ph-nav-divider);
  flex-shrink: 0;
  align-self: center;
}
/**
 * IconButtonWithCounter — circular icon button with an optional badge.
 *
 * 34×34 hit area, 20px icon, sits on the dark nav bar. The badge is
 * positioned as a top-right pill (count) or dot (dot/priority) and carries
 * a 2px bar-colored ring so the badge reads cleanly against the icon.
 *
 * Pure presentation — consumers own the data source and navigation. The
 * badge type is derived entirely from `source`, so a consumer swaps from
 * `count` today to `priority` in v2 without touching the call site shape
 * beyond the `source` payload.
 *
 * Accessibility: always renders a real `<button>` (or `<a>` when `href` is
 * set). `aria-label` is mandatory and must already describe the state
 * (the primitive does not synthesize a label — that's a consumer concern).
 */

._root_1g5jl_18 {
  --_ibc-size: 34px;
  --_ibc-icon-size: 20px;
  --_ibc-badge-border: 2px solid var(--ph-nav-bg);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--_ibc-size);
  height: var(--_ibc-size);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ph-nav-text);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

._root_1g5jl_18:hover {
  background-color: var(--ph-nav-hover-bg);
  color: var(--ph-nav-text-strong);
}

._root_1g5jl_18:focus-visible {
  outline: 2px solid var(--ph-primary-container, var(--ph-nav-text-strong));
  outline-offset: 2px;
}

._root_1g5jl_18:active {
  background-color: rgba(255, 255, 255, 0.12);
}

._root_1g5jl_18:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

._icon_1g5jl_60 {
  font-size: var(--_ibc-icon-size) !important;
  line-height: 1 !important;
  color: inherit;
}

/* ---------------- Badge ---------------- */

._badge_1g5jl_68 {
  position: absolute;
  top: -2px;
  right: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
}

/* Numeric pill badge. Width grows with content; height stays 16px. */
._badgeCount_1g5jl_80 {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--ph-error, var(--ph-error-on-nav));
  color: var(--ph-on-error, #fff);
  border: var(--_ibc-badge-border);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
}

/* Dot badges share this base. */
._badgeDot_1g5jl_95 {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: var(--_ibc-badge-border);
  box-sizing: content-box;
  /* Base dot color; specific variants below override. */
  background: var(--ph-error, var(--ph-error-on-nav));
}

._badgeDotNeutral_1g5jl_105 {
  background: var(--ph-nav-text);
}

._badgeDotUrgent_1g5jl_109 {
  background: var(--ph-error, var(--ph-error-on-nav));
}

._badgeDotReview_1g5jl_113 {
  background: var(--ph-primary, var(--ph-ref-palette-primary70));
}

._badgeDotWarning_1g5jl_117 {
  background: var(--ph-warning, var(--ph-warning-on-nav));
}
/**
 * ClarkButton — the Navbar entry point for the Clark agent side panel.
 *
 * - 34×34 circular icon button on the dark nav bar (size matches
 *   IconButtonWithCounter so the right-zone cluster reads as one unit).
 * - Active state when the panel is open: `primary-container` background,
 *   `on-primary-container` icon. This mirrors the panel's open state so
 *   the user always has one click / one keystroke in & out.
 * - Matches ClarkButton spec §2.
 *
 * Panel internals are out of scope (owned by `modules/clark/` via
 * `AgentChatPanel26`). This button only flips `isOpen` in `ClarkContext`.
 */

._root_1uefk_15 {
  --_clark-size: 34px;
  --_clark-icon-size: 20px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--_clark-size);
  height: var(--_clark-size);
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ph-nav-text);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

._root_1uefk_15:hover {
  background-color: var(--ph-nav-hover-bg);
  color: var(--ph-nav-text-strong);
}

._root_1uefk_15:focus-visible {
  outline: 2px solid var(--ph-primary-container, var(--ph-nav-text-strong));
  outline-offset: 2px;
}

._root_1uefk_15:active {
  background-color: rgba(255, 255, 255, 0.14);
}

/*
 * Active (panel open) — the button becomes the signal that Clark is live.
 * Same transition duration as the panel slide (200ms per spec §5) so the
 * bar doesn't feel disconnected from the panel.
 */
._rootActive_1uefk_55,
._rootActive_1uefk_55:hover {
  background-color: var(
    --ph-primary-container,
    var(--ph-ref-palette-primary70)
  );
  color: var(--ph-on-primary-container, #1a0a33);
  transition-duration: 200ms;
}

._icon_1uefk_65 {
  font-size: var(--_clark-icon-size) !important;
  line-height: 1 !important;
  color: inherit;
}
/**
 * NavbarAttentionSlot + AttentionSheet styling.
 *
 * Pill lives inline in Navbar.Right. Sheet is a 360px right-anchored popover
 * (Material-3 `surface-container-high`) with an internally scrollable list.
 * Narrow variant collapses the pill to a 28px circle; the sheet switches to
 * full viewport minus 16px (handled via class toggle from the component).
 */

._wrapper_16ypc_10 {
  position: relative;
  display: inline-flex;
}

/* ---------------- Pill ---------------- */

._pill_16ypc_17 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--ph-nav-divider);
  background: rgba(255, 255, 255, 0.06);
  color: var(--ph-nav-text-strong);
  font-family: var(--ph-ref-typeface-base, 'DM Sans', sans-serif);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease,
    color 120ms ease;
}

._pill_16ypc_17:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--ph-nav-text-muted);
}

._pill_16ypc_17:focus-visible {
  outline: 2px solid var(--ph-primary-container, var(--ph-nav-text-strong));
  outline-offset: 2px;
}

/* States */

._pillClear_16ypc_48 {
  background: transparent;
  border-color: var(--ph-nav-divider);
  color: var(--ph-nav-text-muted);
}

._pillReview_16ypc_54 {
  background: var(
    --ph-primary-container,
    rgba(255, 255, 255, 0.1)
  );
  color: var(--ph-on-primary-container, var(--ph-nav-text-strong));
  border-color: transparent;
}

._pillUrgent_16ypc_63 {
  background: var(
    --ph-error-container,
    rgba(255, 107, 107, 0.18)
  );
  border-color: var(--ph-error, var(--ph-error-on-nav));
  color: var(--ph-on-error-container, var(--ph-nav-text-strong));
}

._leadingDot_16ypc_72 {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

._leadingDotReview_16ypc_79 {
  background: var(--ph-primary, var(--ph-ref-palette-primary70));
}

._leadingDotUrgent_16ypc_83 {
  background: var(--ph-error, var(--ph-error-on-nav));
  box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
}

._label_16ypc_88 {
  white-space: nowrap;
}

._chevron_16ypc_92 {
  transition: transform 160ms ease;
}

._chevronOpen_16ypc_96 {
  transform: rotate(180deg);
}

/* Narrow: 28×28 circle with only the dot (spec §7, ROADMAP 4.7.5). */
._pillNarrow_16ypc_101 {
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
}

._pillNarrow_16ypc_101 ._label_16ypc_88,
._pillNarrow_16ypc_101 ._chevron_16ypc_92 {
  display: none;
}

/* Loading skeleton (spec §4). */
._pillLoading_16ypc_114 {
  width: 96px;
  background: rgba(255, 255, 255, 0.08);
  border-color: transparent;
  color: transparent;
  animation: _ibcPillPulse_16ypc_1 1.2s ease-in-out infinite;
}

@keyframes _ibcPillPulse_16ypc_1 {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* ---------------- Sheet ---------------- */

._sheet_16ypc_133 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 360px;
  max-height: min(60vh, 480px);
  display: flex;
  flex-direction: column;
  background: var(
    --ph-surface-container-lowest,
    var(--ph-ref-palette-neutral100, #ffffff)
  );
  color: var(--ph-on-surface, #1a1a1a);
  border-radius: var(--ph-sys-shape-lg, 16px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  z-index: 100;
  animation: _sheetFadeIn_16ypc_1 140ms ease-out;
}

@keyframes _sheetFadeIn_16ypc_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

._sheetNarrow_16ypc_164 {
  position: fixed;
  top: calc(var(--_nav-height, 48px) + 8px);
  left: 8px;
  right: 8px;
  width: auto;
  max-height: calc(100vh - var(--_nav-height, 48px) - 16px);
}

._sheetHeader_16ypc_173 {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid
    var(--ph-outline-variant, rgba(0, 0, 0, 0.1));
}

._sheetTitle_16ypc_182 {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ph-on-surface, #1a1a1a);
}

._sheetCount_16ypc_189 {
  font-size: 12px;
  color: var(--ph-on-surface-variant, rgba(0, 0, 0, 0.6));
}

._sheetList_16ypc_194 {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1 1 auto;
}

._sheetFooter_16ypc_202 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  border-top: 1px solid
    var(--ph-outline-variant, rgba(0, 0, 0, 0.1));
  font-size: 13px;
  color: var(--ph-primary, #6750a4);
  cursor: pointer;
}

/* ---------------- Row ---------------- */

._row_16ypc_216 {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 10px 20px;
  width: 100%;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease;
}

._row_16ypc_216:hover {
  background: var(
    --ph-surface-container-highest,
    rgba(0, 0, 0, 0.04)
  );
}

._row_16ypc_216:focus-visible {
  outline: none;
  background: var(
    --ph-surface-container-highest,
    rgba(0, 0, 0, 0.04)
  );
  border-left-color: var(--ph-primary, #6750a4);
}

._rowIcon_16ypc_250 {
  grid-row: span 2;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--ph-surface-container, rgba(0, 0, 0, 0.05));
  color: var(--ph-on-surface-variant, rgba(0, 0, 0, 0.7));
  font-size: 16px !important;
}

._rowTitle_16ypc_263 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-on-surface, #1a1a1a);
  line-height: 1.3;
}

._rowSubtitle_16ypc_270 {
  font-size: 12px;
  color: var(--ph-on-surface-variant, rgba(0, 0, 0, 0.6));
  line-height: 1.3;
  grid-column: 2 / 3;
}

._rowTime_16ypc_277 {
  grid-row: span 2;
  align-self: start;
  font-size: 11px;
  color: var(--ph-on-surface-variant, rgba(0, 0, 0, 0.55));
  white-space: nowrap;
}

._divider_16ypc_285 {
  height: 1px;
  background: var(--ph-outline-variant, rgba(0, 0, 0, 0.08));
  margin: 0 20px;
}

/* ---------------- Empty ---------------- */

._empty_16ypc_293 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 24px;
  text-align: center;
  color: var(--ph-on-surface-variant, rgba(0, 0, 0, 0.6));
}

._emptyGlyph_16ypc_303 {
  font-size: 32px !important;
  color: var(--ph-primary, #6750a4);
  opacity: 0.7;
}

._emptyTitle_16ypc_309 {
  font-size: 14px;
  font-weight: 600;
  color: var(--ph-on-surface, #1a1a1a);
}

._emptySubtitle_16ypc_315 {
  font-size: 12px;
  max-width: 260px;
  line-height: 1.4;
}
/* KbdChip — compact keyboard-shortcut hint used in input + footer. */

._chip_47dqx_3 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--ph-sys-typography-family-mono, ui-monospace, Menlo,
    monospace);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.02em;
  font-weight: 500;
  user-select: none;
  white-space: nowrap;
}

/* Rendered on top of the dark navbar chrome (--ph-nav-bg ≈ neutral30). */
._toneOnDark_47dqx_20 {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.72);
}

/* Rendered on top of a light sheet surface (--ph-surface-*). */
._toneOnLight_47dqx_26 {
  background: var(--ph-surface-container-high);
  color: var(--ph-on-surface-variant);
  border: 1px solid var(--ph-outline-variant);
}
/* SearchIconButton — circular trigger, sized to match IconButtonWithCounter. */

._root_ix15e_3 {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--ph-nav-on-bg, rgba(255, 255, 255, 0.92));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

._root_ix15e_3:hover {
  background: rgba(255, 255, 255, 0.08);
}

._root_ix15e_3:active {
  background: rgba(255, 255, 255, 0.14);
}

._root_ix15e_3:focus-visible {
  outline: 2px solid var(--ph-primary);
  outline-offset: 2px;
}

._active_ix15e_34 {
  background: rgba(255, 255, 255, 0.16);
}
/* SearchResultRow — 44px result row with optional trailing shortcut. */

._row_1uykv_3 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  text-align: left;
  text-decoration: none;
  color: var(--ph-on-surface);
  cursor: pointer;
  transition: background-color 80ms ease;
}

._row_1uykv_3:hover,
._focused_1uykv_21 {
  /*
   * Material 3 state-layer recipe: ~8% primary on transparent gives a
   * tonal "selected" feel without competing with the white sheet surface.
   * Matches the convention used across photon-ui (Combobox, MultiCombobox,
   * Card, Input). Note: this intentionally diverges from
   * `universal-search-spec.md` lines 153-154 which originally specified
   * `surface-container-highest` (neutral grey) — the actual visual design
   * uses a primary tint, and the rest of the design system follows the
   * state-layer pattern, so we align with that.
   */
  background: color-mix(in oklch, var(--ph-primary) 8%, transparent);
  border-left-color: var(--ph-primary);
}

._row_1uykv_3:focus-visible {
  outline: none;
}

._icon_1uykv_40 {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ph-on-surface-variant);
  flex-shrink: 0;
}

._text_1uykv_50 {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

._title_1uykv_57 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--ph-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._subtitle_1uykv_70 {
  font-size: 12px;
  line-height: 16px;
  color: var(--ph-on-surface-variant);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._badge_1uykv_79 {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--ph-surface-container);
  color: var(--ph-on-surface-variant);
}

._shortcut_1uykv_91 {
  flex-shrink: 0;
}
/* SearchSheet — anchored slide-down surface.
 *
 * Layout (spec §4):
 *   - Input row lives OUTSIDE this sheet (it sits on the navbar itself);
 *     this surface renders body + footer only.
 *   - Width is controlled by the wrapper; we just fill 100% of it.
 */

._sheet_1lqm1_9 {
  background: var(--ph-surface-container-lowest, #ffffff);
  color: var(--ph-on-surface);
  border: 1px solid var(--ph-outline-variant);
  border-top: 0;
  border-bottom-left-radius: var(--ph-sys-shape-lg, 16px);
  border-bottom-right-radius: var(--ph-sys-shape-lg, 16px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(70vh, 560px);
  animation: _sheet-open_1lqm1_1 160ms ease-out;
}

._sheetNarrow_1lqm1_24 {
  border-radius: var(--ph-sys-shape-lg, 16px);
  max-height: min(80vh, 480px);
}

@keyframes _sheet-open_1lqm1_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._sheet_1lqm1_9 {
    animation: none;
  }
}

._body_1lqm1_46 {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 0;
}

._footer_1lqm1_52 {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 12px;
  border-top: 1px solid var(--ph-outline-variant);
  font-size: 11px;
  color: var(--ph-on-surface-variant);
  background: var(--ph-surface-container-low);
}

._footerHint_1lqm1_63 {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Idle state */
._stateIdle_1lqm1_70 {
  display: flex;
  flex-direction: column;
}

._idleEmpty_1lqm1_75 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px 20px 16px;
  color: var(--ph-on-surface-variant);
  text-align: center;
}

._idleEmptyTitle_1lqm1_86 {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ph-on-surface);
}

._idleEmptyBody_1lqm1_93 {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  max-width: 360px;
  color: var(--ph-on-surface-variant);
}

._idleEmptyBody_1lqm1_93 em {
  font-style: normal;
  font-weight: 500;
  color: var(--ph-on-surface);
}

._tryHints_1lqm1_107 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 16px 16px;
  margin: 0;
  font-size: 12px;
  color: var(--ph-on-surface-variant);
  border-top: 1px solid var(--ph-outline-variant);
}

._tryHintsLabel_1lqm1_119 {
  font-weight: 500;
  color: var(--ph-on-surface-variant);
  margin-right: 2px;
}

._tryHintChip_1lqm1_125 {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--ph-outline-variant);
  background: var(--ph-surface-container);
  color: var(--ph-on-surface);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

._tryHintChip_1lqm1_125:hover {
  background: var(--ph-surface-container-highest);
  border-color: var(--ph-outline);
}

._tryHintChip_1lqm1_125:focus-visible {
  outline: 2px solid var(--ph-primary);
  outline-offset: 2px;
}

/* Group header */
._groupHeader_1lqm1_150 {
  padding: 10px 16px 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-on-surface-variant);
}

/* Results list */
._list_1lqm1_160 {
  list-style: none;
  padding: 0;
  margin: 0;
}

._groupItem_1lqm1_166 {
  display: block;
}

._listDimmed_1lqm1_170 {
  opacity: 0.4;
  transition: opacity 120ms ease;
}

/* Recent rows — slightly lighter than SearchResultRow to signal a different
 * origin (cached vs. live response). */
._recentRow_1lqm1_177 {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 6px 16px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  text-align: left;
  color: var(--ph-on-surface);
  cursor: pointer;
  text-decoration: none;
}

._recentRow_1lqm1_177:hover,
._recentRowFocused_1lqm1_194 {
  background: var(--ph-surface-container-highest);
  border-left-color: var(--ph-primary);
}

._recentTitle_1lqm1_199 {
  font-size: 14px;
  font-weight: 500;
  color: var(--ph-on-surface);
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._recentSubtitle_1lqm1_209 {
  font-size: 12px;
  color: var(--ph-on-surface-variant);
}

/* Centered states (typing / no-results / error) */
._centered_1lqm1_215 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--ph-on-surface-variant);
  text-align: center;
}

._centeredTitle_1lqm1_226 {
  margin: 0;
  font-size: 14px;
  color: var(--ph-on-surface);
}

._inlineQuery_1lqm1_232 {
  font-family: var(--ph-sys-typography-family-mono, ui-monospace, Menlo,
    monospace);
  background: var(--ph-surface-container);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--ph-on-surface);
}

._askClark_1lqm1_242 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ph-primary-container);
  color: var(--ph-on-primary-container);
  border: 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 120ms ease;
}

._askClark_1lqm1_242:hover {
  filter: brightness(1.05);
}

._askClark_1lqm1_242:focus-visible {
  outline: 2px solid var(--ph-primary);
  outline-offset: 2px;
}

._emptyCopy_1lqm1_266 {
  padding: 12px 16px;
  margin: 0;
  font-size: 12px;
  color: var(--ph-on-surface-variant);
}
/* UniversalSearch — input pill + anchored sheet wrapper. */

._wrapper_16y20_3 {
  position: relative;
  width: 100%;
  max-width: 640px;
}

._wrapperIcon_16y20_9 {
  width: auto;
  max-width: none;
}

/* Input pill (34px tall, translucent on dark navbar). */
._inputPill_16y20_15 {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 8px 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid transparent;
  color: var(--ph-nav-on-bg, rgba(255, 255, 255, 0.92));
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}

._inputPill_16y20_15:hover,
._inputPill_16y20_15:focus-within {
  background: rgba(255, 255, 255, 0.14);
}

._inputPillOpen_16y20_35 {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.2);
}

._leadingIcon_16y20_40 {
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

._input_16y20_15 {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  background: transparent;
  border: 0;
  outline: none;
  color: inherit;
  font-size: 14px;
  padding: 0;
}

._input_16y20_15::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

._trailingChip_16y20_61 {
  flex-shrink: 0;
}

/* Anchored sheet positioning. */
._sheetAnchor_16y20_66 {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 950;
}

._sheetAnchorNarrow_16y20_74 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(480px, calc(100vw - 32px));
  z-index: 950;
}

@media (max-width: 768px) {
  ._sheetAnchorNarrow_16y20_74 {
    position: fixed;
    /* Match the desktop `top: calc(100% + 8px)` gap, but anchored in viewport
     * coordinates instead of relative to the trigger. Height is owned by the
     * global --app-navbar-height token. */
    top: calc(var(--app-navbar-height, 48px) + 8px);
    right: 16px;
    left: 16px;
    width: auto;
  }
}
/* UserMenu — avatar trigger + dropdown popover. */

._root_1cbxu_3 {
  position: relative;
  display: inline-flex;
  align-items: center;
}

._trigger_1cbxu_9 {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 2px;
  border-radius: 999px;
  color: var(--ph-nav-on-bg, rgba(255, 255, 255, 0.92));
  transition: background-color 120ms ease;
}

._trigger_1cbxu_9:hover {
  background: rgba(255, 255, 255, 0.08);
}

._trigger_1cbxu_9:focus-visible {
  outline: 2px solid var(--ph-primary);
  outline-offset: 2px;
}

._triggerOpen_1cbxu_31 {
  background: rgba(255, 255, 255, 0.12);
}

._avatar_1cbxu_35 {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ph-secondary-container);
  color: var(--ph-on-secondary-container);
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

._chevron_1cbxu_51 {
  color: rgba(255, 255, 255, 0.8);
}

._popover_1cbxu_55 {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: var(--ph-surface-container-lowest, #ffffff);
  color: var(--ph-on-surface);
  border: 1px solid var(--ph-outline-variant);
  border-radius: var(--ph-sys-shape-md, 12px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 6px 0;
  z-index: 950;
  animation: _userMenu-open_1cbxu_1 120ms ease-out;
}

@keyframes _userMenu-open_1cbxu_1 {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  ._popover_1cbxu_55 {
    animation: none;
  }
}

._section_1cbxu_87 {
  padding: 8px 12px;
}

._sectionLabel_1cbxu_91 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-on-surface-variant);
  padding-bottom: 6px;
}

._langRow_1cbxu_100 {
  display: flex;
  gap: 6px;
}

._langChip_1cbxu_105 {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ph-on-surface);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

._langChip_1cbxu_105:hover {
  background: var(--ph-surface-container-highest);
}

._langChipActive_1cbxu_121 {
  background: var(--ph-primary-container);
  color: var(--ph-on-primary-container);
  border-color: var(--ph-primary);
}

._divider_1cbxu_127 {
  height: 1px;
  background: var(--ph-outline-variant);
  margin: 4px 0;
}

._item_1cbxu_133 {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  color: var(--ph-on-surface);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

._item_1cbxu_133:hover,
._item_1cbxu_133:focus-visible {
  background: var(--ph-surface-container-highest);
  outline: none;
}

._itemDestructive_1cbxu_153 {
  color: var(--ph-error);
}

._itemDestructive_1cbxu_153:hover {
  background: var(--ph-error-container);
  color: var(--ph-on-error-container);
}
._root_w8eg9_1 {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--ph-nav-on-bg, rgba(255, 255, 255, 0.92));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 120ms ease;
}

._root_w8eg9_1:hover {
  background: rgba(255, 255, 255, 0.08);
}

._root_w8eg9_1:active {
  background: rgba(255, 255, 255, 0.14);
}

._root_w8eg9_1:focus-visible {
  outline: 2px solid var(--ph-primary);
  outline-offset: 2px;
}

._active_w8eg9_30 {
  background: rgba(255, 255, 255, 0.16);
}
/* NarrowDrawer — left-anchored drawer + scrim for narrow viewports. */

._scrim_180wg_3 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
  z-index: 940;
}

._scrimOpen_180wg_13 {
  opacity: 1;
  pointer-events: auto;
}

._drawer_180wg_18 {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(320px, 100vw - 48px);
  background: var(--ph-nav-bg, #1f2124);
  color: var(--ph-nav-on-bg, rgba(255, 255, 255, 0.92));
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transform: translateX(-100%);
  transition: transform 200ms ease;
  z-index: 945;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

._drawerOpen_180wg_35 {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  ._drawer_180wg_18 {
    transition: none;
  }
  ._scrim_180wg_3 {
    transition: none;
  }
}

._header_180wg_48 {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  min-height: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

._closeBtn_180wg_57 {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

._closeBtn_180wg_57:hover {
  background: rgba(255, 255, 255, 0.08);
}

._headerTitle_180wg_74 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

._widgetSlot_180wg_80 {
  padding: 12px;
  display: flex;
}

._divider_180wg_85 {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 12px;
}

._actionsLabel_180wg_91 {
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

._actionRow_180wg_100 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 12px;
}

._actionChip_180wg_107 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 0;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}

._actionChip_180wg_107:hover {
  background: rgba(255, 255, 255, 0.14);
}

._chipLabel_180wg_126 {
  flex: 1 1 auto;
}

._chipHint_180wg_130 {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--ph-sys-typography-family-mono, ui-monospace, Menlo, monospace);
}

._chipCount_180wg_136 {
  min-width: 20px;
  padding: 0 6px;
  height: 18px;
  border-radius: 999px;
  background: var(--ph-error);
  color: var(--ph-on-error);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

._browseMenu_180wg_150 {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  width: 100%;
}

._browseMenu_180wg_150:hover {
  background: rgba(255, 255, 255, 0.06);
}

._browseMenu_180wg_150 > span {
  flex: 1 1 auto;
}
/*
 * MockWebsitePreview — visual canvas. Lives inside a <PreviewThemeBridge>
 * which mounts <PhotonThemeProvider>, so the derived `--ph-*` token tier is
 * already on the wrapper's scope. The mock consumes derived tokens only —
 * `--ph-seed-*` references are forbidden here per spec §11.3 / acceptance
 * criteria of fix2.
 */

[data-mock-preview] {
  flex: 1;
  min-width: 0;
  background: #fff;
  overflow-y: auto;
  position: relative;
  padding: 24px 24px 60px;
  height: 100%;
  font-family: var(--ph-ref-typeface-base, var(--ph-ref-typeface-base, system-ui, sans-serif));
  color: var(--ph-on-surface, #1c1b1f);
}

[data-mock-preview][data-theme='dark'] {
  background: #fff;
  color: var(--ph-on-surface, #f5f3fa);
}

[data-mock-theme-toggle] {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ph-outline-variant, #e8e0f0);
  border-radius: 100px;
  box-shadow: 0 1px 2px rgba(28, 27, 31, 0.06);
}

[data-mock-theme-toggle] button {
  padding: 6px 11px;
  border: 0;
  background: transparent;
  border-radius: 100px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: #65558F;
  cursor: pointer;
  transition: all 150ms;
}

[data-mock-theme-toggle] button[aria-pressed='true'] {
  background: #1c1b1f;
  color: #fff;
}

[data-mock-browser-chrome] {
  max-width: 760px;
  margin: 0 auto;
  background: var(--ph-surface, #fff);
  border-radius: var(--ph-ref-shape-lg, 14px);
  box-shadow: var(--ph-sys-elevation-2, 0 4px 24px rgba(28, 27, 31, 0.08)),
    0 1px 3px rgba(28, 27, 31, 0.04);
  overflow: hidden;
}

[data-mock-preview][data-theme='dark'] [data-mock-browser-chrome] {
  background: var(--ph-surface-container, #2a2a2e);
}

[data-mock-browser-bar] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #ebebeb;
  border-bottom: 1px solid #d4d4d4;
}

[data-mock-preview][data-theme='dark'] [data-mock-browser-bar] {
  background: #ebebeb;
  border-bottom-color: #d4d4d4;
}

[data-mock-browser-dots] {
  display: flex;
  gap: 5px;
}

[data-mock-browser-dots] span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
}

[data-mock-browser-dots] span:nth-child(1) {
  background: #FF5F57;
}

[data-mock-browser-dots] span:nth-child(2) {
  background: #FEBC2E;
}

[data-mock-browser-dots] span:nth-child(3) {
  background: #28C840;
}

[data-mock-browser-url] {
  flex: 1;
  padding: 4px 10px;
  background: #fff;
  border-radius: var(--ph-ref-shape-sm, 5px);
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 10.5px;
  color: #65558F;
  text-align: center;
}

[data-mock-page] {
  padding: 0;
}

[data-mock-hero] {
  padding: 48px 32px;
  color: var(--ph-on-primary, #fff);
  text-align: left;
}

[data-mock-hero] h1 {
  font-family: var(--ph-ref-typeface-accent, var(--ph-ref-typeface-accent, serif));
  font-size: 48px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0 0 8px;
}

[data-mock-hero] p {
  font-size: 16px;
  margin: 0 0 20px;
  opacity: 0.92;
}

[data-mock-hero-actions] {
  display: flex;
  gap: 8px;
}

[data-mock-section] {
  padding: 28px 24px;
}

[data-mock-section][data-mock-tone='secondary'] {
  background: var(--ph-secondary-container);
  color: var(--ph-on-secondary-container);
}

[data-mock-section][data-mock-tone='tertiary'] {
  background: var(--ph-tertiary-container);
  color: var(--ph-on-tertiary-container);
}

[data-mock-section][data-mock-tone='secondary'] [data-mock-body],
[data-mock-section][data-mock-tone='tertiary'] [data-mock-body],
[data-mock-section][data-mock-tone='secondary'] [data-mock-caption],
[data-mock-section][data-mock-tone='tertiary'] [data-mock-caption] {
  color: inherit;
  opacity: 0.85;
}

[data-mock-section][data-mock-tone] code {
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.35);
  color: inherit;
}

[data-mock-section] h2 {
  font-family: var(--ph-ref-typeface-accent, var(--ph-ref-typeface-accent, serif));
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 0 14px;
  color: var(--ph-on-surface, inherit);
}

[data-mock-grid] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

[data-mock-grid] h3 {
  font-family: var(--ph-ref-typeface-accent, var(--ph-ref-typeface-accent, serif));
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
}

[data-mock-grid] p {
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
  opacity: 0.78;
}

[data-mock-form] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

[data-mock-form] .mock-form-notes {
  grid-column: span 2;
}

[data-mock-chips] {
  display: flex;
  gap: 6px;
}

[data-mock-chip] {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ph-tertiary-container, #B08968);
  color: var(--ph-on-tertiary-container, #fff);
  font-size: 12px;
}

[data-mock-body] {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
  margin: 0 0 8px;
}

[data-mock-caption] {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  opacity: 0.6;
  margin: 0;
}

/* Typography showcase — five-row reference inside the mock preview. */
[data-mock-typography-showcase] {
  display: flex;
  flex-direction: column;
  gap: 0;
}

[data-mock-typo-row] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid #f0ebf6;
}

[data-mock-typo-row]:first-of-type {
  border-top: 0;
  padding-top: 4px;
}

[data-mock-typo-eyebrow] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #65558F;
}

[data-mock-typo-row-body] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

[data-mock-typo-display-specimen] {
  font-size: 48px;
  color: var(--ph-on-surface, #1c1b1f);
}

[data-mock-typo-display-aabb] {
  font-size: 22px;
  color: var(--ph-on-surface-variant, #65558F);
  opacity: 0.78;
}

[data-mock-typo-heading-specimen] {
  font-size: 28px;
  color: var(--ph-on-surface, #1c1b1f);
}

[data-mock-typo-body-specimen] {
  font-size: 16px;
  margin: 0;
  color: var(--ph-on-surface, #49454F);
}

[data-mock-typo-caption-specimen] {
  font-size: 12px;
  color: var(--ph-on-surface-variant, #65558F);
}

[data-mock-typo-pairing] {
  display: flex;
  align-items: baseline;
  gap: 24px;
}

[data-mock-typo-pairing-glyph] {
  font-size: 96px;
  line-height: 1;
  color: var(--ph-primary, #1c1b1f);
}

[data-mock-typo-pairing-glyph][data-role='body'] {
  color: var(--ph-secondary, #49454F);
}

[data-mock-typo-pairing-meta] {
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 10px;
  color: var(--ph-on-surface-variant, #8e82a6);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

/* Gradient gallery — every v1.2 template adapted to the current brand. */
[data-mock-gradient-gallery-grid] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 12px;
}

[data-mock-gradient-tile] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-mock-gradient-tile-swatch] {
  position: relative;
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: var(--ph-ref-shape-md, 10px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

[data-mock-gradient-tile][data-selected='true'] [data-mock-gradient-tile-swatch] {
  outline: 2px solid var(--ph-primary, #1B4332);
  outline-offset: 2px;
}

[data-mock-gradient-tile-badge] {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

[data-mock-gradient-tile-meta] {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

[data-mock-gradient-tile-name] {
  font-family: var(--ph-ref-typeface-accent, serif);
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-on-surface, inherit);
}

[data-mock-gradient-tile-family] {
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 10px;
  color: var(--ph-on-surface-variant, #8e82a6);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  [data-mock-gradient-gallery-grid] {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* FIXME(temporary): debug-only token inspector. Remove post-launch. */

[data-token-inspector] {
  border-top: 1px solid #e8e0f0;
  background: #fafafd;
  padding: 12px 16px 18px;
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 11px;
  color: #1c1b1f;
  max-height: 460px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

[data-token-inspector-header] {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

[data-token-inspector-header] strong {
  font-size: 12px;
  font-weight: 800;
  color: #6B3FA0;
}

[data-token-inspector-note] {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: #c44;
  letter-spacing: 0.04em;
}

[data-token-inspector-filter] {
  border: 1px solid #d0c5e0;
  background: #fff;
  border-radius: 6px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 11px;
  width: 160px;
  color: #1c1b1f;
}

[data-token-inspector-header] button {
  border: 1px solid #d0c5e0;
  background: #fff;
  border-radius: 6px;
  padding: 4px 10px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #6B3FA0;
  cursor: pointer;
}

[data-token-inspector-header] button:hover {
  background: #f5f0fa;
}

[data-token-inspector-tabs] {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid #ece5f5;
  padding-bottom: 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

[data-token-inspector-tab] {
  border: 0;
  background: transparent;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #65558F;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-token-inspector-tab]:hover {
  background: #f0e9f8;
}

[data-token-inspector-tab][aria-selected='true'] {
  background: #6B3FA0;
  color: #fff;
}

[data-token-inspector-count] {
  font-family: 'DM Mono', 'Menlo', monospace;
  font-size: 10px;
  font-weight: 500;
  color: #65558F;
  opacity: 0.8;
  text-transform: none;
}

[data-token-inspector-tab][aria-selected='true'] [data-token-inspector-count] {
  color: #f5f3fa;
  opacity: 0.85;
}

[data-token-inspector-tokens] ul,
[data-token-inspector-computed] ul,
[data-token-inspector-ref-family] ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 14px;
}

[data-token-inspector-tokens] li,
[data-token-inspector-computed] li,
[data-token-inspector-ref-family] li {
  display: grid;
  grid-template-columns: 14px minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  border-bottom: 1px dotted #ece5f5;
  padding: 2px 0;
  min-height: 18px;
}

[data-token-inspector-swatch] {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(28, 27, 31, 0.15);
  display: inline-block;
}

[data-token-inspector-swatch][data-empty] {
  border: 1px dashed rgba(28, 27, 31, 0.15);
  background: transparent;
}

[data-token-inspector-tokens] code,
[data-token-inspector-computed] code,
[data-token-inspector-ref-family] code {
  font-size: 10.5px;
  color: #1c1b1f;
  word-break: break-all;
}

[data-token-inspector-tokens] span,
[data-token-inspector-computed] span,
[data-token-inspector-ref-family] span {
  font-size: 10.5px;
  color: #555;
  word-break: break-all;
}

[data-token-inspector-tokens] em,
[data-token-inspector-computed] em,
[data-token-inspector-ref-family] em {
  color: #aa8;
  font-style: normal;
}

[data-token-inspector-empty] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  color: #65558F;
  margin: 0;
  padding: 8px 0;
}

[data-token-inspector-empty] code {
  font-family: 'DM Mono', 'Menlo', monospace;
  background: #ece5f5;
  padding: 1px 5px;
  border-radius: 3px;
}

[data-token-inspector-computed] h4,
[data-token-inspector-ref] h4,
[data-token-inspector-colors] h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #65558F;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  padding-top: 6px;
  border-top: 1px solid #ece5f5;
}

[data-token-inspector-colors] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-token-inspector-colors-row] {
  display: flex;
  align-items: center;
  gap: 10px;
}

[data-token-inspector-colors-label] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #6B3FA0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 72px;
  flex-shrink: 0;
}

/* Strip layout matches the left-panel `[data-vsp-tone-strip]` style (height,
 * border, overflow) so the shared `<ToneCell>` popover positioning works
 * identically here. The strip already gets that styling via the `data-vsp-tone-strip`
 * attribute on the wrapper; this rule just ensures it stretches the row. */
[data-token-inspector-colors-strip] {
  flex: 1;
  margin-top: 0; /* override the panel's `margin-top: 10px` for inline use */
}

[data-token-inspector-ref] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

[data-token-inspector-ref-family] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

[data-token-inspector-ref-family-head] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

[data-token-inspector-ref-family-head] strong {
  font-weight: 800;
  color: #6B3FA0;
}
[data-standalone-visual-shell] {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #fff;
}

[data-standalone-breadcrumb] {
  padding: 12px 20px;
  border-bottom: 1px solid #e8e0f0;
  background: #fff;
  flex-shrink: 0;
}

[data-standalone-breadcrumb] ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  color: #65558F;
}

[data-standalone-breadcrumb] li:not(:last-child)::after {
  content: '/';
  margin-left: 6px;
  color: #c5b9d5;
}

[data-standalone-breadcrumb] button {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

[data-standalone-breadcrumb] button:hover {
  color: #6B3FA0;
  text-decoration: underline;
}

[data-standalone-breadcrumb] li[aria-current='page'] {
  color: #1c1b1f;
  font-weight: 700;
}

[data-standalone-visual-body] {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

[data-standalone-visual-panel] {
  width: 520px;
  flex-shrink: 0;
  /* Stop the editor column from stretching to match the (much taller)
   * preview column. `align-self: flex-start` makes the panel take its
   * natural content height; the preview keeps its own height. */
  align-self: flex-start;
  border-right: 1px solid #e8e0f0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* Pin the editor column to the viewport so the operator can scroll
   * through the long preview column on the right without losing access
   * to the editor controls. The panel becomes its own scroll container
   * (capped at viewport height minus the app navbar), and the Save bar
   * — sticky-bottom inside the panel — stays at the visible bottom of
   * the editor column regardless of how far the page is scrolled. */
  position: sticky;
  top: 0;
  max-height: calc(100vh - var(--app-navbar-height, 0px));
  overflow-y: auto;
}

/* Standalone host has its own page-level scroll, so the inner panel body
 * should NOT flex-grow past its content (that's what creates the empty
 * gap between the bottom of the controls and the Save bar). Disable the
 * panel's internal scroll too — page scroll already handles overflow,
 * and double scroll containers were producing the dead space. The Save
 * bar is sticky-bottom (see VisualSeedsPanel.css), so the operator
 * always sees it regardless of scroll position. */
[data-standalone-visual-panel] [data-vsp-body] {
  flex: 0 0 auto;
  overflow-y: visible;
}

[data-standalone-save-error] {
  font-size: 12px;
  color: #b91c1c;
  margin-right: 8px;
}

[data-standalone-visual-preview-col] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

[data-standalone-visual-preview-col] > #photon-theme-provider {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

[data-standalone-visual-preview-toolbar] {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 16px;
  background: #fff;
  border-bottom: 1px solid #e8e0f0;
  flex-shrink: 0;
}

[data-standalone-visual-toggle] {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #6B3FA0;
  background: #fff;
  border: 1px solid #d0c5e0;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}

[data-standalone-visual-toggle][aria-pressed='true'] {
  background: #6B3FA0;
  color: #fff;
  border-color: #6B3FA0;
}

[data-standalone-visual-loading] {
  padding: 40px;
  text-align: center;
  color: #65558F;
}
@keyframes address-picker-fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes address-picker-slide-in {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes address-picker-check-pop {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

.address-picker-fade-up {
  animation: address-picker-fade-up 0.3s ease forwards;
}

.address-picker-slide-in {
  animation: address-picker-slide-in 0.2s ease forwards;
}

.address-picker-check-pop {
  animation: address-picker-check-pop 0.4s ease forwards;
}
@keyframes customerDetailLoading_shimmerSlide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.customerDetailLoading_shimmer {
  position: relative;
  overflow: hidden;
  background: oklch(94% 0.005 321);
}

.customerDetailLoading_shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(100% 0 0 / 0.42) 50%,
    transparent 100%
  );
  animation: customerDetailLoading_shimmerSlide 1.25s ease-in-out infinite;
}
@keyframes entityScoreCardStarFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.entityScoreCard_starFilled {
  animation: entityScoreCardStarFloat 2s ease infinite;
}
@keyframes setupChecklistPopoverFadeIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.setupChecklistPopover_panel {
  animation: setupChecklistPopoverFadeIn 0.2s ease;
}
@keyframes contactInfoShake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-4px);
  }
  40% {
    transform: translateX(4px);
  }
  60% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(0);
  }
}

.contactInfoSection_shake {
  animation: contactInfoShake 0.3s ease;
}

@keyframes contactInfoInlineOpen {
  from {
    opacity: 0;
    transform: scaleX(0.95);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

.contactInfoSection_inlineForm {
  animation: contactInfoInlineOpen 0.15s ease;
}

@keyframes contactInfoToastIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes contactInfoToastOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.contactInfoSection_savedToast {
  animation: contactInfoToastIn 0.2s ease forwards;
}

.contactInfoSection_savedToast--out {
  animation: contactInfoToastOut 0.2s ease forwards;
}

.contactInfo_fieldRow.empty .contactInfo_addBtn {
  display: none;
}

.contactInfo_fieldRow.empty .contactInfo_emptyText {
  display: inline;
}

.contactInfo_fieldRow.empty:hover .contactInfo_addBtn {
  display: inline-flex;
}

.contactInfo_fieldRow.empty:hover .contactInfo_emptyText {
  display: none;
}

@media (hover: none) and (pointer: coarse) {
  .contactInfo_fieldRow.empty .contactInfo_addBtn {
    display: inline-flex;
  }

  .contactInfo_fieldRow.empty .contactInfo_emptyText {
    display: none;
  }
}

.contactInfo_dirtyDot {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
@keyframes customerDetailFadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes customerDetailNudgePulse {
  0%,
  100% {
    border-color: oklch(78% 0.08 39.23);
  }
  50% {
    border-color: oklch(60% 0.14 321.31);
  }
}

@keyframes customerDetailTipFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.customerDetailPage_fadeUp {
  animation: customerDetailFadeUp 0.4s ease forwards;
  opacity: 0;
}

.customerDetailPage_fadeUp-delay-05 {
  animation-delay: 0.05s;
}

.customerDetailPage_fadeUp-delay-08 {
  animation-delay: 0.08s;
}

.customerDetailPage_fadeUp-delay-10 {
  animation-delay: 0.1s;
}

.customerDetailPage_fadeUp-delay-13 {
  animation-delay: 0.13s;
}

.customerDetailPage_fadeUp-delay-15 {
  animation-delay: 0.15s;
}

.customerDetailPage_fadeUp-delay-18 {
  animation-delay: 0.18s;
}

.customerDetailPage_fadeUp-delay-20 {
  animation-delay: 0.2s;
}

.customerDetailPage_fadeUp-delay-23 {
  animation-delay: 0.23s;
}

.customerDetailPage_fadeUp-delay-25 {
  animation-delay: 0.25s;
}

.customerDetailPage_fadeUp-delay-30 {
  animation-delay: 0.3s;
}

.customerDetailPage_nudgePulse {
  animation: customerDetailNudgePulse 2.5s ease-in-out infinite;
}

.customerDetailPage_tipFloat {
  animation: customerDetailTipFloat 3s ease-in-out infinite;
}

@media (min-width: 960px) {
  .customerDetailPage_headerRow {
    flex-direction: row;
    align-items: stretch;
  }

  .customerDetailPage_scoreWrap {
    width: auto;
  }
}

@media (max-width: 959px) {
  .customerDetailPage_headerRow {
    flex-direction: column;
  }

  .customerDetailPage_scoreWrap {
    width: 100%;
  }

  .customerDetailPage_scoreWrap > div[role='button'] {
    flex-direction: row;
    width: 100%;
    min-width: 0;
    justify-content: space-around;
  }
}

@media (max-width: 639px) {
  .customerDetailPage_mergeCompleteness {
    display: none;
  }

  .customerDetailPage_scoreWrap .customerDetailPage_completenessMini {
    display: flex;
  }
}

@media (min-width: 640px) {
  .customerDetailPage_scoreWrap .customerDetailPage_completenessMini {
    display: none;
  }
}
.menu-progress-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  animation: menu-shimmer 2s infinite;
}

@keyframes menu-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}
@keyframes _nudgePulse_w9yn0_1 {
  0%,
  100% {
    border-color: var(--ph-ref-palette-primary78);
  }
  50% {
    border-color: var(--ph-ref-palette-primary60);
  }
}

@keyframes _nudgePulseWarning_w9yn0_1 {
  0%,
  100% {
    border-color: oklch(78% 0.08 39.231);
  }
  50% {
    border-color: oklch(65% 0.12 39.231);
  }
}

._root_w9yn0_21 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px 16px;
  margin: 6px 20px 14px;
  border-radius: var(--ph-sys-shape-md);
  border-width: 2px;
  border-style: dashed;
  font-family: var(--ph-ref-typeface-base, sans-serif);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

._rootDefault_w9yn0_44 {
  border-color: var(--ph-ref-palette-primary78);
  background: var(--ph-ref-palette-primary98);
  color: var(--ph-primary);
}

._rootDefault_w9yn0_44:hover {
  border-color: var(--ph-ref-palette-primary65);
  background: var(--ph-ref-palette-primary94);
}

._rootWarning_w9yn0_55 {
  border-color: oklch(78% 0.08 39.231);
  background: oklch(98% 0.04 39.231);
  color: var(--ph-secondary);
}

._rootWarning_w9yn0_55:hover {
  border-color: oklch(65% 0.12 39.231);
  background: oklch(94% 0.08 39.231);
}

._nudgeDefault_w9yn0_66 {
  animation: _nudgePulse_w9yn0_1 3s ease infinite;
}

._nudgeWarning_w9yn0_70 {
  animation: _nudgePulseWarning_w9yn0_1 3s ease infinite;
}

._icon_w9yn0_74 {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
._row_z80s6_1 {
  position: relative;
  border-radius: var(--ph-sys-shape-sm);
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

._rowError_z80s6_11 {
  border-left: 3px solid var(--ph-error);
}

._rowDivider_z80s6_15 {
  height: 1px;
  width: calc(100% + 40px);
  margin: 0 -20px 12px;
  background: var(--ph-ref-palette-neutral94);
}

._rowBody_z80s6_22 {
  padding: 12px 20px;
}

._row_z80s6_1:not(._dragging_z80s6_26):not(._dropTarget_z80s6_26):hover {
  background: var(--ph-surface-container-low);
}

._dragging_z80s6_26 {
  background: var(--ph-ref-palette-primary98);
  border: 1.5px solid var(--ph-primary);
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: var(--ph-primary);
  box-shadow: 0 8px 24px color-mix(in oklch, var(--ph-primary) 10%, transparent);
  transform: scale(1.01);
}

._dropTarget_z80s6_26 {
  background: var(--ph-ref-palette-primary98);
  border: 1.5px dashed var(--ph-ref-palette-primary70);
}

._slotHeader_z80s6_45 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

._grip_z80s6_52 {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex-shrink: 0;
  padding: 4px 0 2px;
}

._grip_z80s6_52 span {
  display: block;
  width: 12px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--ph-ref-palette-neutral78);
}

/* Stronger handle in edit mode so reordering is discoverable */
._row_z80s6_1[data-sortable-editing='true'] ._grip_z80s6_52 span {
  width: 14px;
  height: 2px;
  background: var(--ph-ref-palette-neutral60);
}

._row_z80s6_1[data-sortable-editing='true']:hover ._grip_z80s6_52 span,
._row_z80s6_1._dragging_z80s6_26 ._grip_z80s6_52 span {
  background: var(--ph-primary);
}

._slotName_z80s6_80 {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--ph-ref-typeface-accent, sans-serif);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ph-on-surface);
}

._navChevron_z80s6_94 {
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--ph-ref-palette-neutral60);
  border-radius: var(--ph-sys-shape-sm);
}

._navChevron_z80s6_94:hover {
  color: var(--ph-primary);
}

._slotMeta_z80s6_112 {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
  justify-content: flex-end;
}

._slotActions_z80s6_121 {
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 6px;
}

._p12_z80s6_129 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: var(--ph-sys-shape-sm);
  border: 1px solid var(--ph-outline-variant);
  background: transparent;
  cursor: pointer;
  color: var(--ph-ref-palette-neutral50);
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

._p12_z80s6_129:hover {
  background: var(--ph-surface-container);
  border-color: var(--ph-outline);
}

._p12Danger_z80s6_152:hover {
  background: var(--ph-error-container);
  border-color: var(--ph-error);
  color: var(--ph-error);
}

._slotChildren_z80s6_158 {
  padding-left: 22px;
  margin-top: 8px;
}

._dragSummary_z80s6_163 {
  display: block;
  padding-left: 22px;
  margin-top: 6px;
  font-size: 12px;
  font-style: italic;
  font-weight: 400;
  color: var(--ph-ref-palette-neutral50);
}
/* Hover popover for the product "Item Traits" tags.
   Mirrors Photon's `.ph-popover` look (surface / outline / shadow tokens). */

.traitTooltip {
  max-width: 240px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--ph-surface, #fff);
  color: var(--ph-on-surface, oklch(25% 0.01 321));
  border: 1px solid
    color-mix(in srgb, var(--ph-outline-variant, oklch(90% 0.012 321)) 80%, transparent);
  box-shadow:
    0 10px 38px -10px hsl(206 22% 7% / 35%),
    0 10px 20px -15px hsl(206 22% 7% / 20%);
  z-index: 60;
  animation: traitTooltip_fade 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes traitTooltip_fade {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .traitTooltip {
    animation: none;
  }
}
/* SetupJourneyPanel — gentle pulse on the active stage node.
   Mirrors the active-node treatment in
   knowledge/ux-ui-design/business-web/products-v2/product-detail-compact.html */

@keyframes setupJourneyPanel_nodePulse {
  0%,
  100% {
    box-shadow: 0 0 0 4px oklch(40% 0.16 321 / 0.18);
  }
  50% {
    box-shadow: 0 0 0 6px oklch(40% 0.16 321 / 0);
  }
}

.setupJourneyPanel_nodeActive {
  animation: setupJourneyPanel_nodePulse 2.5s infinite;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .setupJourneyPanel_nodeActive {
    animation: none;
  }
}
/* SmartSuggestionsPanel — gentle float on the "smart" sparkle.
   Mirrors the sparkleFloat motion in
   knowledge/ux-ui-design/business-web/products-v2/product-detail-compact.html */

@keyframes smartSuggestionsPanel_sparkleFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.smartSuggestionsPanel_sparkle {
  animation: smartSuggestionsPanel_sparkleFloat 3s ease-in-out infinite;
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .smartSuggestionsPanel_sparkle {
    animation: none;
  }
}
/* ─── Wrapper ─── */
._wrapper_etmzz_2 {
  background: var(--ph-surface);
  border: 0.5px solid var(--ph-outline-variant);
  border-radius: 12px;
  padding: 24px;
  overflow-x: auto;
}

/* ─── SVG container ─── */
._svgContainer_etmzz_11 svg {
  max-width: 100%;
  height: auto;
}

/* ─── Node shapes: rounded corners (rect-based nodes) ─── */
._svgContainer_etmzz_11 .node rect,
._svgContainer_etmzz_11 .node polygon {
  rx: 8px;
  ry: 8px;
}

/* ─── Node labels: brand typeface ─── */
._svgContainer_etmzz_11 .nodeLabel {
  font-family: var(--ph-ref-typeface-accent), system-ui, sans-serif !important;
  font-size: 13px !important;
}

/* ─── Edge labels ─── */
._svgContainer_etmzz_11 .edgeLabel {
  font-family: var(--ph-ref-typeface-base), system-ui, sans-serif !important;
  font-size: 10px !important;
}

._svgContainer_etmzz_11 .edgeLabel .label-container {
  fill: var(--ph-surface) !important;
  stroke: none !important;
}

._svgContainer_etmzz_11 .edgeLabel span {
  color: var(--ph-ref-palette-neutral50) !important;
}

/* ─── Edge paths: softer, thinner ─── */
._svgContainer_etmzz_11 .flowchart-link {
  stroke: var(--ph-ref-palette-neutral60) !important;
  stroke-width: 1px !important;
}

/* ─── Arrow markers ─── */
._svgContainer_etmzz_11 marker path {
  fill: var(--ph-ref-palette-neutral60) !important;
  stroke: var(--ph-ref-palette-neutral60) !important;
}

/* ─── Remove default Mermaid box-shadow on nodes ─── */
._svgContainer_etmzz_11 .node {
  filter: none !important;
}

/* ─── Error state ─── */
._error_etmzz_62 {
  font-family: var(--ph-ref-typeface-base), system-ui, sans-serif;
  font-size: 13px;
  color: var(--ph-ref-palette-neutral50);
  text-align: center;
  padding: 32px 16px;
}
/*
 * Inventory module styles. Photon shape seed 1.0, --ph-* tokens only.
 * Numbers use JetBrains Mono (loaded globally in public/index.html) — this is
 * load-bearing: it's the signal that a value is inventory data.
 *
 * Color-role mapping (mock inlined hex → real Photon roles, mapped by ROLE):
 *   OK / healthy  → --ph-tertiary  (teal in business-web)
 *   LOW / warning → --ph-secondary (orange in business-web)
 *   86'd / error  → --ph-error     (red)
 *   live / accent → --ph-primary   (purple)
 */

/* ── keyframes ── */
@keyframes inv-shimmer {
  0% { background-position: -320px 0; }
  100% { background-position: 320px 0; }
}
@keyframes inv-livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.78); }
}
@keyframes inv-cellFlash {
  0% { background: var(--ph-primary-container); }
  100% { background: transparent; }
}
@keyframes inv-countUp {
  from { opacity: 0.4; }
  to { opacity: 1; }
}
@keyframes inv-slideInUp {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── mono numbers ── */
.inv-mono {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
}
.inv-cur {
  font-size: 0.72em;
  opacity: 0.5;
  font-weight: 700;
  margin-right: 1px;
}
.inv-unit {
  font-size: 0.78em;
  opacity: 0.55;
  font-weight: 600;
  margin-left: 2px;
}

/* ── live pill ── */
.inv-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px 0 9px;
  border-radius: 9999px;
  background: var(--ph-tertiary-container);
  border: 1px solid color-mix(in srgb, var(--ph-tertiary) 25%, transparent);
}
.inv-live-pill .ldot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ph-tertiary);
  animation: inv-livePulse 1.6s ease-in-out infinite;
}
.inv-live-pill .ltext {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ph-on-tertiary-container);
}
.inv-live-pill[data-state='error'] {
  background: var(--ph-error-container);
  border-color: color-mix(in srgb, var(--ph-error) 25%, transparent);
}
.inv-live-pill[data-state='error'] .ldot {
  background: var(--ph-error);
  animation: none;
}
.inv-live-pill[data-state='error'] .ltext {
  color: var(--ph-on-error-container);
}

/* ── status badge ── */
.inv-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 9999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.inv-badge .bd {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}
.inv-badge[data-status='ok'] {
  background: var(--ph-tertiary-container);
  color: var(--ph-on-tertiary-container);
}
.inv-badge[data-status='low'] {
  background: var(--ph-secondary-container);
  color: var(--ph-on-secondary-container);
}
.inv-badge[data-status='eighty-six'] {
  background: var(--ph-error-container);
  color: var(--ph-on-error-container);
}

/* ── KPI cards ── */
.inv-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.inv-kpi {
  background: var(--ph-surface);
  border: 1px solid var(--ph-outline-variant);
  border-radius: var(--ph-ref-shape-md, 12px);
  padding: 16px 16px 14px;
  position: relative;
  overflow: hidden;
  animation: inv-slideInUp 0.3s ease-out both;
}
.inv-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 11px;
}
.inv-kpi-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ph-on-surface-variant);
}
.inv-kpi-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inv-kpi-ic[data-tone='neutral'] {
  background: var(--ph-surface-container);
  color: var(--ph-on-surface-variant);
}
.inv-kpi-ic[data-tone='warn'] {
  background: var(--ph-secondary-container);
  color: var(--ph-on-secondary-container);
}
.inv-kpi-ic[data-tone='err'] {
  background: var(--ph-error-container);
  color: var(--ph-on-error-container);
}
.inv-kpi-val {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--ph-on-surface);
  line-height: 1;
}
.inv-kpi-val[data-tone='warn'] {
  color: var(--ph-secondary);
}
.inv-kpi-val[data-tone='err'] {
  color: var(--ph-error);
}
.inv-kpi-delta {
  margin-top: 7px;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ph-on-surface-variant);
}
.inv-kpi-live-tick {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ph-tertiary);
  animation: inv-livePulse 1.6s ease-in-out infinite;
}

/* ── flash on changed cell ── */
.inv-flash {
  animation: inv-cellFlash 1.1s ease-out;
}

/* ── skeleton shimmer ── */
.inv-skel {
  background: linear-gradient(
    90deg,
    var(--ph-surface-container) 0%,
    var(--ph-surface-container-high) 50%,
    var(--ph-surface-container) 100%
  );
  background-size: 320px 100%;
  animation: inv-shimmer 1.4s infinite linear;
  border-radius: 6px;
}

/* ── stock table ── */
.inv-table {
  width: 100%;
  border-collapse: collapse;
}
.inv-table thead th {
  position: sticky;
  top: 0;
  background: var(--ph-surface-container-low, var(--ph-surface-container));
  text-align: left;
  padding: 10px 14px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ph-on-surface-variant);
  border-bottom: 1px solid var(--ph-outline-variant);
  white-space: nowrap;
  user-select: none;
  z-index: 1;
}
.inv-table thead th.num {
  text-align: right;
}
.inv-table thead th.sortable {
  cursor: pointer;
}
.inv-table thead th.sortable:hover {
  color: var(--ph-on-surface);
}
.inv-table thead th .sortarrow {
  opacity: 0.45;
  margin-left: 3px;
  font-size: 9px;
}
.inv-table thead th.sorted,
.inv-table thead th.sorted .sortarrow {
  color: var(--ph-primary);
  opacity: 1;
}
.inv-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--ph-outline-variant);
  font-size: 13px;
  vertical-align: middle;
}
.inv-table tbody tr {
  transition: background 0.12s;
  cursor: pointer;
}
.inv-table tbody tr:hover {
  background: var(--ph-surface-container-low, var(--ph-surface-container));
}
.inv-table tbody tr.sel {
  background: var(--ph-primary-container);
}
.inv-table tbody tr:last-child td {
  border-bottom: none;
}
.inv-num {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-align: right;
  color: var(--ph-on-surface);
  white-space: nowrap;
}
.inv-num.dim {
  color: var(--ph-on-surface-variant);
  font-weight: 600;
}

/* ── empty / error panels ── */
.inv-state-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 54px 24px;
}
.inv-state-ic {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--ph-surface-container);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ph-on-surface-variant);
  margin-bottom: 16px;
}
.inv-state-panel[data-tone='error'] .inv-state-ic {
  background: var(--ph-error-container);
  color: var(--ph-on-error-container);
}
.inv-state-t {
  font-size: 16px;
  font-weight: 800;
  color: var(--ph-on-surface);
}
.inv-state-d {
  font-size: 13px;
  color: var(--ph-on-surface-variant);
  margin-top: 5px;
  max-width: 340px;
}

/* ── overview: quick actions ── */
.inv-qa-strip {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}
.inv-qa {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--ph-ref-shape-md, 12px);
  border: 1px solid var(--ph-outline-variant);
  background: var(--ph-surface);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  text-align: left;
}
.inv-qa:hover {
  border-color: var(--ph-primary);
  box-shadow: 0 3px 12px color-mix(in srgb, var(--ph-primary) 12%, transparent);
  transform: translateY(-1px);
}
.inv-qa-ic {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--ph-primary-container);
  color: var(--ph-on-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inv-qa-t {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ph-on-surface);
}
.inv-qa-d {
  font-size: 11.5px;
  color: var(--ph-on-surface-variant);
  margin-top: 1px;
}

/* ── overview: value-by-location list ── */
.inv-loc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ph-outline-variant);
}
.inv-loc-row:last-child {
  border-bottom: none;
}
.inv-loc-wrap {
  flex: 1;
  min-width: 0;
}
.inv-loc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ph-on-surface);
}
.inv-loc-meta {
  font-size: 11px;
  color: var(--ph-on-surface-variant);
  margin-top: 2px;
}
.inv-loc-track {
  height: 6px;
  border-radius: 9999px;
  background: var(--ph-surface-container);
  overflow: hidden;
  margin-top: 7px;
}
.inv-loc-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--ph-primary);
}
.inv-loc-val {
  font-weight: 800;
  font-size: 14px;
  color: var(--ph-on-surface);
  text-align: right;
  white-space: nowrap;
}

/* ── overview: low-stock shortlist + recent movements ── */
.inv-ls-row,
.inv-mv-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ph-outline-variant);
}
.inv-ls-row:last-child,
.inv-mv-row:last-child {
  border-bottom: none;
}
.inv-ls-thumb {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--ph-surface-container);
  object-fit: cover;
  flex-shrink: 0;
}
.inv-ls-info,
.inv-mv-main {
  flex: 1;
  min-width: 0;
}
.inv-ls-name,
.inv-mv-desc {
  font-size: 13px;
  font-weight: 700;
  color: var(--ph-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-ls-where,
.inv-mv-sub {
  font-size: 11px;
  color: var(--ph-on-surface-variant);
  margin-top: 1px;
}
.inv-ls-qty {
  text-align: right;
  white-space: nowrap;
}
.inv-ls-now {
  font-weight: 800;
  font-size: 13px;
  color: var(--ph-secondary);
}
.inv-ls-par {
  font-size: 10.5px;
  color: var(--ph-on-surface-variant);
}
.inv-mv-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inv-mv-ic[data-kind='in'] {
  background: var(--ph-tertiary-container);
  color: var(--ph-on-tertiary-container);
}
.inv-mv-ic[data-kind='out'] {
  background: var(--ph-error-container);
  color: var(--ph-on-error-container);
}
.inv-mv-ic[data-kind='move'] {
  background: var(--ph-primary-container);
  color: var(--ph-on-primary-container);
}
.inv-mv-ic[data-kind='adj'] {
  background: var(--ph-surface-container);
  color: var(--ph-on-surface-variant);
}
.inv-mv-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ph-on-surface-variant);
  white-space: nowrap;
}

/* ── grids ── */
.inv-grid-32 {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.inv-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.inv-page-sub {
  font-size: 13px;
  color: var(--ph-on-surface-variant);
  margin-top: 3px;
}

/* ── stock levels: toolbar ── */
.inv-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.inv-search {
  flex: 1;
  min-width: 240px;
  max-width: 380px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  border-radius: var(--ph-ref-shape-sm, 8px);
  border: 1px solid var(--ph-outline-variant);
  background: var(--ph-surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.inv-search:focus-within {
  border-color: var(--ph-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ph-primary) 12%, transparent);
}
.inv-search input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 13.5px;
  color: var(--ph-on-surface);
  background: transparent;
}
.inv-toggle-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px 0 11px;
  border-radius: 9999px;
  border: 1px solid var(--ph-outline-variant);
  background: var(--ph-surface);
  font-size: 13px;
  font-weight: 700;
  color: var(--ph-on-surface);
  cursor: pointer;
}
.inv-switch {
  width: 34px;
  height: 20px;
  border-radius: 9999px;
  background: var(--ph-outline-variant);
  position: relative;
  transition: background 0.18s;
  flex-shrink: 0;
}
.inv-switch[data-on='true'] {
  background: var(--ph-primary);
}
.inv-switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: left 0.18s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.inv-switch[data-on='true'] .knob {
  left: 16px;
}
.inv-loc-select {
  height: 40px;
  padding: 0 12px;
  border-radius: 9999px;
  border: 1px solid var(--ph-outline-variant);
  background: var(--ph-surface);
  font-size: 13px;
  font-weight: 700;
  color: var(--ph-on-surface);
  cursor: pointer;
}

/* ── stock levels: table card + bulk bar ── */
.inv-table-card {
  background: var(--ph-surface);
  border: 1px solid var(--ph-outline-variant);
  border-radius: var(--ph-ref-shape-md, 12px);
  overflow: hidden;
}
.inv-bulkbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 18px;
  background: var(--ph-primary-container);
  border-bottom: 1px solid color-mix(in srgb, var(--ph-primary) 20%, transparent);
}
.inv-bulk-sel {
  font-size: 13px;
  font-weight: 800;
  color: var(--ph-on-primary-container);
}
.inv-bulk-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border-radius: 9999px;
  border: 1px solid color-mix(in srgb, var(--ph-on-primary-container) 20%, transparent);
  background: color-mix(in srgb, var(--ph-surface) 65%, transparent);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ph-on-primary-container);
  cursor: pointer;
}
.inv-bulk-btn:hover {
  background: var(--ph-surface);
}
.inv-bulk-x {
  background: none;
  border: none;
  color: var(--ph-on-primary-container);
  display: flex;
  opacity: 0.7;
  cursor: pointer;
}
.inv-bulk-x:hover {
  opacity: 1;
}

/* checkbox */
.inv-check {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 2px solid var(--ph-outline-variant);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.14s;
  padding: 0;
  cursor: pointer;
  color: #fff;
}
.inv-check[data-on='true'] {
  background: var(--ph-primary);
  border-color: var(--ph-primary);
}

/* item cell */
.inv-cell-item {
  display: flex;
  align-items: center;
  gap: 11px;
}
.inv-cell-thumb {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--ph-surface-container);
  object-fit: cover;
  flex-shrink: 0;
}
.inv-cell-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ph-on-surface);
}
.inv-cell-sku {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--ph-on-surface-variant);
  margin-top: 1px;
}

/* par cell */
.inv-par-cell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.inv-par-bar {
  width: 36px;
  height: 5px;
  border-radius: 9999px;
  background: var(--ph-surface-container);
  overflow: hidden;
}
.inv-par-bar i {
  display: block;
  height: 100%;
  border-radius: 9999px;
}

/* table footer */
.inv-tfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid var(--ph-outline-variant);
  background: var(--ph-surface-container-low, var(--ph-surface-container));
}
.inv-tfoot-sum {
  font-size: 12.5px;
  color: var(--ph-on-surface-variant);
}
.inv-tfoot-sum b {
  font-family: 'JetBrains Mono', monospace;
  color: var(--ph-on-surface);
  font-weight: 800;
}

/* ── location tree (disclosure rows, not a tree widget) ── */
@keyframes inv-expandRow {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.inv-tree-card {
  background: var(--ph-surface);
  border: 1px solid var(--ph-outline-variant);
  border-radius: var(--ph-ref-shape-md, 12px);
  overflow: hidden;
}
.inv-tree-head,
.inv-trow {
  display: grid;
  grid-template-columns: 1fr 130px 150px 110px 80px;
  gap: 10px;
  align-items: center;
  padding: 11px 18px;
}
.inv-tree-head {
  background: var(--ph-surface-container-low, var(--ph-surface-container));
  border-bottom: 1px solid var(--ph-outline-variant);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--ph-on-surface-variant);
}
.inv-tree-head .r {
  text-align: right;
}
.inv-trow {
  border-bottom: 1px solid var(--ph-outline-variant);
  transition: background 0.12s;
  cursor: pointer;
}
.inv-trow:hover {
  background: var(--ph-surface-container-low, var(--ph-surface-container));
}
.inv-trow:last-child {
  border-bottom: none;
}
.inv-trow.child {
  animation: inv-expandRow 0.2s ease-out;
}
.inv-tname {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.inv-tcaret {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ph-on-surface-variant);
  transition: transform 0.18s;
  flex-shrink: 0;
}
.inv-tcaret[data-open='true'] {
  transform: rotate(90deg);
}
.inv-tcaret[data-leaf='true'] {
  visibility: hidden;
}
.inv-tloc-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inv-tloc-ic[data-kind='kitchen'] {
  background: var(--ph-primary-container);
  color: var(--ph-on-primary-container);
}
.inv-tloc-ic[data-kind='venue'],
.inv-tloc-ic[data-kind='store'] {
  background: var(--ph-surface-container);
  color: var(--ph-on-surface-variant);
}
.inv-tlabel {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ph-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inv-tmeta {
  font-size: 11px;
  font-weight: 500;
  color: var(--ph-on-surface-variant);
  margin-top: 1px;
}
.inv-tcell {
  font-size: 12.5px;
  color: var(--ph-on-surface-variant);
}
.inv-tcell.r {
  text-align: right;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--ph-on-surface);
}
.inv-depth-1 .inv-tname {
  padding-left: 30px;
}
.inv-dot-active {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
}
.inv-dot-active .d {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.inv-dot-active[data-on='true'] {
  color: var(--ph-on-tertiary-container);
}
.inv-dot-active[data-on='true'] .d {
  background: var(--ph-tertiary);
}
.inv-dot-active[data-on='false'] {
  color: var(--ph-on-surface-variant);
}
.inv-dot-active[data-on='false'] .d {
  background: var(--ph-outline-variant);
}
.inv-badge-type {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 9999px;
  font-size: 10.5px;
  font-weight: 800;
  background: var(--ph-primary-container);
  color: var(--ph-on-primary-container);
}
.inv-badge-neutral {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 9999px;
  font-size: 10.5px;
  font-weight: 800;
  background: var(--ph-surface-container);
  color: var(--ph-on-surface-variant);
}
.inv-tip-banner {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--ph-ref-shape-md, 12px);
  background: var(--ph-primary-container);
  border: 1px solid color-mix(in srgb, var(--ph-primary) 20%, transparent);
  margin-top: 16px;
}
.inv-tip-ic {
  color: var(--ph-primary);
  flex-shrink: 0;
  margin-top: 1px;
}
.inv-tip-tx {
  font-size: 12.5px;
  color: var(--ph-on-primary-container);
  line-height: 1.5;
}

/* ── side sheet (add/edit) ── */
@keyframes inv-sheetIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes inv-fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.inv-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 5000;
  animation: inv-fadeIn 0.2s;
}
.inv-sheet {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 440px;
  max-width: 92vw;
  background: var(--ph-surface-container-low, var(--ph-surface-lowest, var(--ph-surface)));
  z-index: 5001;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.16);
  display: flex;
  flex-direction: column;
  animation: inv-sheetIn 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.inv-sheet-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: var(--ph-surface);
  border-bottom: 1px solid var(--ph-outline-variant);
}
.inv-sheet-back {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  border: 1px solid var(--ph-outline-variant);
  background: var(--ph-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ph-on-surface);
  cursor: pointer;
}
.inv-sheet-back:hover {
  background: var(--ph-surface-container-low, var(--ph-surface-container));
}
.inv-sheet-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--ph-on-surface);
}
.inv-sheet-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.inv-sheet-foot {
  padding: 14px 20px;
  background: var(--ph-surface);
  border-top: 1px solid var(--ph-outline-variant);
}

/* ── form fields (side sheet) ── */
.inv-field {
  margin-bottom: 16px;
}
.inv-flabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ph-on-surface-variant);
  margin-bottom: 6px;
  display: block;
}
.inv-finput,
.inv-fselect {
  width: 100%;
  height: 44px;
  padding: 0 13px;
  border-radius: var(--ph-ref-shape-sm, 8px);
  border: 1px solid var(--ph-outline-variant);
  background: var(--ph-surface);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ph-on-surface);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.inv-finput:focus,
.inv-fselect:focus {
  border-color: var(--ph-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ph-primary) 12%, transparent);
}
.inv-fhint {
  font-size: 11.5px;
  color: var(--ph-on-surface-variant);
  margin-top: 6px;
}
.inv-seg {
  display: flex;
  gap: 0;
  background: var(--ph-surface-container);
  border-radius: var(--ph-ref-shape-sm, 8px);
  padding: 3px;
}
.inv-seg button {
  flex: 1;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ph-on-surface-variant);
  transition: background 0.15s, color 0.15s;
  cursor: pointer;
}
.inv-seg button[data-on='true'] {
  background: var(--ph-surface);
  color: var(--ph-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.inv-toggle-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
}

/* ── product > inventory tab ── */
.inv-sc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.inv-sc-grid .full {
  grid-column: 1 / -1;
}
.inv-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--ph-outline-variant);
}
.inv-kv:last-child {
  border-bottom: none;
}
.inv-kv-k {
  font-size: 12.5px;
  color: var(--ph-on-surface-variant);
}
.inv-kv-v {
  font-size: 13px;
  font-weight: 700;
  color: var(--ph-on-surface);
  text-align: right;
}
.inv-units-tbl {
  width: 100%;
  border-collapse: collapse;
}
.inv-units-tbl th {
  text-align: left;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--ph-on-surface-variant);
  border-bottom: 1px solid var(--ph-outline-variant);
}
.inv-units-tbl th.r,
.inv-units-tbl td.r {
  text-align: right;
}
.inv-units-tbl td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--ph-outline-variant);
  font-size: 12.5px;
}
.inv-units-tbl tr:last-child td {
  border-bottom: none;
}
.inv-u-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--ph-primary-container);
  color: var(--ph-on-primary-container);
  margin-left: 6px;
  vertical-align: middle;
}
.inv-lvl-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ph-outline-variant);
}
.inv-lvl-row:last-child {
  border-bottom: none;
}
.inv-lvl-loc {
  flex: 1;
  min-width: 0;
}
.inv-lvl-loc-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ph-on-surface);
}
.inv-lvl-loc-meta {
  font-size: 11px;
  color: var(--ph-on-surface-variant);
  margin-top: 1px;
}

@media (max-width: 1080px) {
  .inv-kpi-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .inv-grid-32 {
    grid-template-columns: 1fr;
  }
  .inv-qa-strip {
    flex-wrap: wrap;
  }
}
@media (max-width: 960px) {
  .inv-sc-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .inv-tree-head,
  .inv-trow {
    grid-template-columns: 1fr 90px;
    gap: 8px;
  }
  .inv-tree-head .c-hide,
  .inv-trow .c-hide {
    display: none;
  }
}
@media (max-width: 720px) {
  .inv-kpi-row {
    grid-template-columns: 1fr;
  }
  .inv-table th.hide-sm,
  .inv-table td.hide-sm {
    display: none;
  }
}
.ph-add-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1.5px dashed var(--ph-ref-palette-neutral85);
  background: transparent;
  color: var(--ph-ref-palette-neutral50);
  font-family: var(--ph-ref-typeface-base);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.ph-add-step-btn:hover {
  border-color: var(--ph-ref-palette-primary40);
  color: var(--ph-ref-palette-primary40);
  background: var(--ph-ref-palette-primary98);
}

.ph-add-step-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}
.ph-connected-items-panel {
  background: var(--ph-surface, var(--ph-ref-palette-neutral100));
  border: 0.5px solid var(--ph-ref-palette-neutral90);
  border-radius: 12px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ph-ref-palette-neutral10) 4%, transparent);
  overflow: hidden;
  font-family: var(--ph-ref-typeface-base);
}

.ph-connected-items-panel__header {
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--ph-ref-palette-neutral94);
}

.ph-connected-items-panel__title {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 14px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral10);
}

.ph-connected-items-panel__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--ph-ref-palette-neutral94);
  cursor: default;
  text-align: left;
  width: 100%;
  border-left: none;
  border-right: none;
  border-top: none;
  background: transparent;
  font: inherit;
}

.ph-connected-items-panel__item--clickable {
  cursor: pointer;
}

.ph-connected-items-panel__item--clickable:hover {
  background: var(--ph-ref-palette-neutral-variant98);
}

.ph-connected-items-panel__item:last-of-type {
  border-bottom: none;
}

.ph-connected-items-panel__thumb {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--ph-ref-palette-neutral96);
  border: 0.5px solid var(--ph-ref-palette-neutral90);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--ph-ref-palette-neutral70);
}

.ph-connected-items-panel__thumb svg {
  width: 16px;
  height: 16px;
}

.ph-connected-items-panel__info {
  flex: 1;
  min-width: 0;
}

.ph-connected-items-panel__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral10);
}

.ph-connected-items-panel__meta {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
}

.ph-connected-items-panel__price {
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral30);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.ph-connected-items-panel__link-row {
  padding: 8px 14px 12px;
}

.ph-connected-items-panel__link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  padding: 8px;
  border: 1.5px dashed var(--ph-ref-palette-neutral85);
  border-radius: 6px;
  background: transparent;
  color: var(--ph-ref-palette-neutral50);
  font-family: var(--ph-ref-typeface-base);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease;
}

.ph-connected-items-panel__link-btn:hover {
  border-color: var(--ph-ref-palette-primary40);
  color: var(--ph-ref-palette-primary40);
  background: var(--ph-ref-palette-primary98);
}

.ph-connected-items-panel__empty {
  padding: 20px 14px;
  font-size: 12px;
  color: var(--ph-ref-palette-neutral50);
  text-align: center;
}
.ph-cost-breakdown-panel {
  background: var(--ph-surface, var(--ph-ref-palette-neutral100));
  border: 0.5px solid var(--ph-ref-palette-neutral90);
  border-radius: 12px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ph-ref-palette-neutral10) 4%, transparent);
  overflow: hidden;
  font-family: var(--ph-ref-typeface-base);
}

.ph-cost-breakdown-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--ph-ref-palette-neutral94);
}

.ph-cost-breakdown-panel__title {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 14px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral10);
}

.ph-cost-breakdown-panel__analysis-btn {
  border: none;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-ref-palette-primary40);
  cursor: pointer;
  font-family: var(--ph-ref-typeface-base);
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.ph-cost-breakdown-panel__analysis-btn:hover {
  background: var(--ph-ref-palette-primary98);
}

.ph-cost-breakdown-panel__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 12px 18px;
  background: linear-gradient(
    135deg,
    var(--ph-ref-palette-primary98),
    var(--ph-ref-palette-secondary98)
  );
  border-bottom: 0.5px solid var(--ph-ref-palette-neutral92);
}

.ph-cost-breakdown-panel__total-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral30);
}

.ph-cost-breakdown-panel__total-value {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 22px;
  font-weight: 800;
  color: var(--ph-ref-palette-neutral10);
  font-variant-numeric: tabular-nums;
}

.ph-cost-breakdown-panel__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ph-ref-palette-neutral94);
}

.ph-cost-breakdown-panel__metric-cell {
  background: var(--ph-surface, var(--ph-ref-palette-neutral100));
  padding: 10px 14px;
  text-align: center;
}

.ph-cost-breakdown-panel__metric-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--ph-ref-palette-neutral50);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ph-cost-breakdown-panel__metric-value {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 16px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral10);
  margin-top: 2px;
}

.ph-cost-breakdown-panel__tree {
  padding: 12px 14px;
}

.ph-cost-breakdown-panel__tree-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 0.5px solid var(--ph-ref-palette-neutral96);
}

.ph-cost-breakdown-panel__tree-item:last-child {
  border-bottom: none;
}

.ph-cost-breakdown-panel__tree-name {
  color: var(--ph-ref-palette-neutral30);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.ph-cost-breakdown-panel__tree-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ph-cost-breakdown-panel__tree-bar {
  flex: 1;
  max-width: 80px;
  height: 4px;
  border-radius: 2px;
  background: var(--ph-ref-palette-neutral94);
  margin: 0 8px;
  overflow: hidden;
}

.ph-cost-breakdown-panel__tree-bar-fill {
  height: 100%;
  border-radius: 2px;
}

.ph-cost-breakdown-panel__tree-value {
  font-weight: 600;
  color: var(--ph-ref-palette-neutral10);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.ph-cost-breakdown-panel__loss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-top: 1px solid var(--ph-ref-palette-neutral90);
  font-size: 12px;
}

.ph-cost-breakdown-panel__loss-label {
  color: var(--ph-ref-palette-secondary30);
  font-weight: 600;
}

.ph-cost-breakdown-panel__loss-meta {
  color: var(--ph-ref-palette-secondary40);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Loading skeleton */
.ph-cost-breakdown-panel__skeleton {
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ph-cost-breakdown-panel__sk-line {
  height: 12px;
  border-radius: 4px;
  background: var(--ph-ref-palette-neutral94);
  animation: ph-recipes-pulse 1.5s ease-in-out infinite;
}

.ph-cost-breakdown-panel__sk-line--short {
  width: 45%;
}

.ph-cost-breakdown-panel__sk-line--med {
  width: 70%;
}

@keyframes ph-recipes-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

@media (max-width: 560px) {
  .ph-cost-breakdown-panel__metrics {
    grid-template-columns: 1fr;
  }
}
.ph-cost-display {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  font-family: var(--ph-ref-typeface-base);
}

.ph-cost-display__primary {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ph-ref-palette-neutral10);
}

.ph-cost-display__secondary {
  font-size: 10px;
  font-weight: 500;
  color: var(--ph-ref-palette-neutral50);
  text-align: right;
}
.ph-margin-bar {
  font-family: var(--ph-ref-typeface-base);
  margin-top: 12px;
}

.ph-margin-bar__label-row {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.ph-margin-bar__name {
  font-weight: 600;
  color: var(--ph-ref-palette-neutral30);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ph-margin-bar__figures {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.ph-margin-bar__track {
  height: 8px;
  border-radius: 4px;
  background: var(--ph-ref-palette-neutral92);
  overflow: hidden;
  position: relative;
}

.ph-margin-bar__fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}

.ph-margin-bar__fill--good {
  background: linear-gradient(
    90deg,
    var(--ph-ref-palette-tertiary40),
    var(--ph-ref-palette-tertiary70)
  );
}

.ph-margin-bar__fill--warn {
  background: linear-gradient(
    90deg,
    var(--ph-ref-palette-secondary40),
    var(--ph-ref-palette-secondary70)
  );
}

.ph-margin-bar__fill--bad {
  background: linear-gradient(
    90deg,
    var(--ph-ref-palette-error40),
    var(--ph-ref-palette-error90)
  );
}
.ph-recipe-step-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 18px;
  border-bottom: 0.5px solid var(--ph-ref-palette-neutral94);
  transition: background 0.1s ease;
  font-family: var(--ph-ref-typeface-base);
}

.ph-recipe-step-item:last-child {
  border-bottom: none;
}

.ph-recipe-step-item:hover {
  background: var(--ph-ref-palette-neutral-variant98);
}

.ph-recipe-step-item--dragging {
  background: var(--ph-ref-palette-neutral-variant98);
  box-shadow: inset 0 0 0 1px var(--ph-ref-palette-neutral-variant80);
}

.ph-recipe-step-item--optional {
  opacity: 0.72;
}

.ph-recipe-step-item__drag {
  flex-shrink: 0;
  width: 18px;
  cursor: grab;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-top: 6px;
  color: var(--ph-ref-palette-neutral80);
  border: none;
  background: none;
  padding-left: 0;
  padding-right: 0;
}

.ph-recipe-step-item__drag:active {
  cursor: grabbing;
}

.ph-recipe-step-item__drag-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--ph-ref-palette-neutral80);
}

.ph-recipe-step-item__seq {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
}

.ph-recipe-step-item__seq--material {
  background: var(--ph-ref-palette-primary95);
  color: var(--ph-ref-palette-primary40);
}

.ph-recipe-step-item__seq--process {
  background: var(--ph-ref-palette-secondary95);
  color: var(--ph-ref-palette-secondary30);
}

.ph-recipe-step-item__seq--combined {
  background: linear-gradient(
    135deg,
    var(--ph-ref-palette-primary95),
    var(--ph-ref-palette-secondary95)
  );
  color: var(--ph-ref-palette-primary40);
}

.ph-recipe-step-item__seq--subrecipe {
  background: var(--ph-ref-palette-tertiary95);
  color: var(--ph-ref-palette-tertiary30);
}

.ph-recipe-step-item__content {
  flex: 1;
  min-width: 0;
}

.ph-recipe-step-item__main {
  font-size: 13px;
  font-weight: 500;
  color: var(--ph-ref-palette-neutral10);
  line-height: 1.4;
}

.ph-recipe-step-item__ingredient-name {
  font-weight: 700;
}

.ph-recipe-step-item__quantity {
  color: var(--ph-ref-palette-primary40);
  font-weight: 600;
}

.ph-recipe-step-item__process-type {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--ph-ref-palette-secondary95);
  color: var(--ph-ref-palette-secondary30);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
  margin: 0 2px;
}

.ph-recipe-step-item__ref-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--ph-ref-palette-tertiary95);
  color: var(--ph-ref-palette-tertiary30);
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 4px;
}

.ph-recipe-step-item__details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
}

.ph-recipe-step-item__detail-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 3px;
  background: var(--ph-ref-palette-neutral94);
  font-size: 10px;
  font-weight: 500;
}

.ph-recipe-step-item__detail-chip svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.ph-recipe-step-item__detail-chip--loss {
  color: var(--ph-ref-palette-secondary30);
}

.ph-recipe-step-item__notes {
  font-size: 12px;
  color: var(--ph-ref-palette-neutral50);
  font-style: italic;
  margin-top: 3px;
  line-height: 1.4;
}

.ph-recipe-step-item__cost {
  flex-shrink: 0;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral30);
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  margin-top: 4px;
}

.ph-recipe-step-item__cost-label {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--ph-ref-palette-neutral50);
}

.ph-recipe-step-item__cost-loss {
  color: var(--ph-ref-palette-secondary40);
}

.ph-recipe-step-item__actions {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}

.ph-recipe-step-item__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--ph-ref-palette-neutral50);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.ph-recipe-step-item__icon-btn:hover {
  color: var(--ph-ref-palette-primary40);
  background: var(--ph-ref-palette-primary98);
}
.ph-recipe-type-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--ph-ref-typeface-base);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.ph-recipe-type-badge--standard {
  background: var(--ph-ref-palette-primary95);
  color: var(--ph-ref-palette-primary40);
}

.ph-recipe-type-badge--production {
  background: var(--ph-ref-palette-secondary95);
  color: var(--ph-ref-palette-secondary30);
}

.ph-recipe-type-badge--prep {
  background: var(--ph-ref-palette-tertiary95);
  color: var(--ph-ref-palette-tertiary30);
}
.ph-stat-tile {
  padding: 14px;
  border: 0.5px solid var(--ph-ref-palette-neutral92);
  border-radius: 10px;
  background: var(--ph-ref-palette-neutral98);
  text-align: center;
  font-family: var(--ph-ref-typeface-base);
}

.ph-stat-tile__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral50);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ph-stat-tile__value {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 20px;
  font-weight: 800;
  color: var(--ph-ref-palette-neutral10);
  margin-top: 4px;
}

.ph-stat-tile__subtitle {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 2px;
}

/* Used by StatTile RowOfFourGrid story — breakpoints match recipes reference */
.ph-recipes-stat-tile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1120px;
}

@media (max-width: 960px) {
  .ph-recipes-stat-tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .ph-recipes-stat-tile-grid {
    grid-template-columns: 1fr;
  }
}
.ph-version-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--ph-ref-typeface-base);
  background: var(--ph-ref-palette-neutral94);
  color: var(--ph-ref-palette-neutral50);
  line-height: 1.3;
}
.ph-version-timeline {
  background: var(--ph-surface, var(--ph-ref-palette-neutral100));
  border: 0.5px solid var(--ph-ref-palette-neutral90);
  border-radius: 12px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ph-ref-palette-neutral10) 4%, transparent);
  overflow: hidden;
  font-family: var(--ph-ref-typeface-base);
}

.ph-version-timeline__header {
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--ph-ref-palette-neutral94);
}

.ph-version-timeline__title {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 14px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral10);
}

.ph-version-timeline__body {
  padding: 12px 14px;
}

.ph-version-timeline__entry {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 0.5px solid var(--ph-ref-palette-neutral96);
}

.ph-version-timeline__entry:last-child {
  border-bottom: none;
}

.ph-version-timeline__dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 2px;
}

.ph-version-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--ph-ref-palette-neutral85);
  background: var(--ph-surface, var(--ph-ref-palette-neutral100));
  flex-shrink: 0;
  box-sizing: border-box;
}

.ph-version-timeline__dot--active {
  background: var(--ph-ref-palette-primary40);
  border-color: var(--ph-ref-palette-primary40);
}

.ph-version-timeline__line {
  width: 2px;
  flex: 1;
  min-height: 12px;
  background: var(--ph-ref-palette-neutral90);
  margin-top: 4px;
}

.ph-version-timeline__info {
  flex: 1;
  min-width: 0;
}

.ph-version-timeline__label-row {
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral10);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ph-version-timeline__active-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--ph-ref-palette-tertiary95);
  color: var(--ph-ref-palette-tertiary30);
}

.ph-version-timeline__note {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 2px;
}

.ph-version-timeline__date {
  font-size: 10px;
  color: var(--ph-ref-palette-neutral60);
  margin-top: 2px;
}

.ph-version-timeline__row-btn {
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.ph-version-timeline__row-btn:hover .ph-version-timeline__label-row {
  color: var(--ph-ref-palette-primary40);
}
/* Phase 2 recipe pages — Photon tokens only */
.ph-recipes-shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px 40px;
  font-family: var(--ph-ref-typeface-base);
}

@media (max-width: 560px) {
  .ph-recipes-shell {
    padding: 0 16px 32px;
  }
}

.ph-recipes-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 16px 0 8px;
  font-size: 12px;
  color: var(--ph-ref-palette-neutral50);
  text-decoration: none;
  transition: color 0.15s ease;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.ph-recipes-back:hover {
  color: var(--ph-ref-palette-primary40);
}

.ph-recipes-back svg {
  width: 14px;
  height: 14px;
}

.ph-recipes-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.ph-recipes-page-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ph-recipes-page-title {
  font-family: var(--ph-ref-typeface-accent);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ph-ref-palette-neutral10);
}

@media (max-width: 560px) {
  .ph-recipes-page-title {
    font-size: 19px;
  }
}

.ph-recipes-count-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral50);
  background: var(--ph-ref-palette-neutral92);
  padding: 2px 9px;
  border-radius: 10px;
}

.ph-recipes-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.ph-recipes-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ph-surface, var(--ph-ref-palette-neutral100));
  border: 0.5px solid var(--ph-ref-palette-neutral-variant80);
  color: var(--ph-ref-palette-neutral30);
  border-radius: 6px;
  padding: 8px 14px;
  font: 500 13px var(--ph-ref-typeface-base);
  cursor: pointer;
  transition: all 0.15s ease;
}

.ph-recipes-btn-ghost:hover {
  background: var(--ph-ref-palette-neutral98);
  border-color: var(--ph-ref-palette-neutral70);
}

.ph-recipes-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ph-ref-palette-primary40);
  color: var(--ph-ref-palette-primary95);
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font: 600 13px var(--ph-ref-typeface-base);
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.ph-recipes-btn-primary:hover {
  opacity: 0.92;
}

.ph-recipes-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.ph-recipes-tab {
  font-family: var(--ph-ref-typeface-base);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid var(--ph-ref-palette-neutral30);
  background: transparent;
  color: var(--ph-ref-palette-neutral70);
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ph-recipes-tab:hover {
  background: var(--ph-ref-palette-neutral96);
  color: var(--ph-ref-palette-neutral30);
}

.ph-recipes-tab--active {
  background: var(--ph-ref-palette-primary40);
  color: var(--ph-ref-palette-primary95);
  border-color: var(--ph-ref-palette-primary40);
}

.ph-recipes-tab-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.ph-recipes-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

@media (max-width: 560px) {
  .ph-recipes-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .ph-recipes-search-wrap {
    min-width: 100%;
  }
}

.ph-recipes-search-wrap {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.ph-recipes-search-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ph-ref-palette-neutral60);
  pointer-events: none;
}

.ph-recipes-search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  font: 13px var(--ph-ref-typeface-base);
  border: 0.5px solid var(--ph-ref-palette-neutral-variant80);
  border-radius: 6px;
  background: var(--ph-surface, var(--ph-ref-palette-neutral100));
  color: var(--ph-ref-palette-neutral10);
  outline: none;
}

.ph-recipes-search-input:focus {
  border-color: var(--ph-ref-palette-primary40);
}

.ph-recipes-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid var(--ph-ref-palette-neutral90);
  background: var(--ph-ref-palette-neutral98);
  font-size: 12px;
  font-weight: 500;
  color: var(--ph-ref-palette-neutral40);
  cursor: pointer;
}

.ph-recipes-filter-chip:hover {
  border-color: var(--ph-ref-palette-neutral70);
}

.ph-recipes-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--ph-ref-palette-neutral50);
  margin-bottom: 10px;
}

.ph-recipes-sort-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  border: none;
  background: var(--ph-ref-palette-neutral96);
  font: inherit;
  color: inherit;
}

.ph-recipes-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: var(--ph-ref-palette-primary98);
  border: 0.5px solid var(--ph-ref-palette-primary90);
  font-size: 12px;
}

.ph-recipes-detail-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  margin-top: 16px;
}

@media (max-width: 960px) {
  .ph-recipes-detail-grid {
    grid-template-columns: 1fr;
  }
}

.ph-recipes-sidebar-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ph-recipes-subtitle {
  font-size: 13px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 4px;
}

.ph-recipes-header-badges {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Import page */
.ph-recipes-import-hero {
  max-width: 640px;
  margin: 24px auto 0;
  text-align: center;
}

.ph-recipes-import-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    var(--ph-ref-palette-primary95),
    var(--ph-ref-palette-tertiary95)
  );
  color: var(--ph-ref-palette-primary40);
}

.ph-recipes-import-methods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 640px;
  margin: 20px auto 0;
}

@media (max-width: 960px) {
  .ph-recipes-import-methods {
    grid-template-columns: 1fr;
    max-width: 300px;
  }
}

.ph-recipes-import-method {
  padding: 20px 16px;
  border: 0.5px solid var(--ph-ref-palette-neutral90);
  border-radius: 10px;
  background: var(--ph-ref-palette-neutral98);
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.ph-recipes-import-method:hover {
  border-color: var(--ph-ref-palette-primary40);
  background: var(--ph-ref-palette-primary98);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ph-ref-palette-neutral10) 6%, transparent);
  transform: translateY(-2px);
}

.ph-recipes-import-method--active {
  border-color: var(--ph-ref-palette-primary40);
  background: var(--ph-ref-palette-primary98);
}

.ph-recipes-import-method-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ph-recipes-import-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Cost analysis */
.ph-recipes-analysis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 960px) {
  .ph-recipes-analysis-grid {
    grid-template-columns: 1fr;
  }
}

.ph-recipes-analysis-card {
  background: var(--ph-surface, var(--ph-ref-palette-neutral100));
  border: 0.5px solid var(--ph-ref-palette-neutral90);
  border-radius: 12px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ph-ref-palette-neutral10) 4%, transparent);
  overflow: hidden;
}

.ph-recipes-analysis-card--full {
  grid-column: 1 / -1;
}

.ph-recipes-analysis-card-header {
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--ph-ref-palette-neutral94);
  font-family: var(--ph-ref-typeface-accent);
  font-size: 14px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral10);
}

.ph-recipes-analysis-card-body {
  padding: 16px 18px;
}

.ph-recipes-savings-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin: 12px 18px 16px;
  border-radius: 8px;
  background: var(--ph-ref-palette-tertiary95);
  color: var(--ph-ref-palette-tertiary30);
  font-size: 13px;
  font-weight: 600;
}

.ph-recipes-ingredient-bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

.ph-recipes-ingredient-bar-name {
  font-size: 12px;
  color: var(--ph-ref-palette-neutral30);
  min-width: 100px;
}

.ph-recipes-ingredient-bar-track {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--ph-ref-palette-neutral94);
  overflow: hidden;
}

.ph-recipes-ingredient-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--ph-ref-palette-primary40);
  transition: width 0.5s ease;
}

.ph-recipes-ingredient-bar-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral30);
  min-width: 36px;
  text-align: right;
}

.ph-recipes-ingredient-bar-cost {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
  min-width: 64px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ph-recipes-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
}

.ph-recipes-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

@media (max-width: 560px) {
  .ph-recipes-form-grid {
    grid-template-columns: 1fr;
  }
}

.ph-recipes-form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ph-recipes-form-group--full {
  grid-column: 1 / -1;
}

.ph-recipes-form-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ph-ref-palette-neutral50);
}

.ph-recipes-form-input,
.ph-recipes-form-select,
.ph-recipes-form-textarea {
  padding: 8px 12px;
  font: 13px var(--ph-ref-typeface-base);
  border: 0.5px solid var(--ph-ref-palette-neutral-variant80);
  border-radius: 6px;
  background: var(--ph-surface, var(--ph-ref-palette-neutral100));
  color: var(--ph-ref-palette-neutral10);
  outline: none;
}

.ph-recipes-form-textarea {
  min-height: 72px;
  resize: vertical;
}

.ph-recipes-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.ph-recipes-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  background: var(--ph-ref-palette-primary95);
  color: var(--ph-ref-palette-primary40);
}

.ph-recipes-tag button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ph-ref-palette-primary60);
  font-size: 12px;
  line-height: 1;
  padding: 0;
}

.ph-recipes-steps-list {
  border-top: 0.5px solid var(--ph-ref-palette-neutral94);
}

.ph-recipes-add-step-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 18px;
  border-top: 0.5px solid var(--ph-ref-palette-neutral94);
}

.ph-recipes-empty {
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--ph-ref-palette-neutral50);
}
/*
 * Recipe AI-first create/edit wizard — provisional domain styles.
 *
 * Token policy:
 *  - Core palette uses real Photon `--ph-*` tokens directly (primary, secondary,
 *    neutral ref-palette tones, surface, outline, shape, typeface).
 *  - The business-web brandbook has NO tertiary (teal) or error palette. The v2
 *    design uses teal for positive cost signals and red for missing cost. Those
 *    two semantic accents are defined here as PROVISIONAL recipe-domain vars,
 *    pending real design tokens. They are the only non-`--ph-*` colors and are
 *    scoped to `.rcp-wizard` so they cannot leak into the rest of the app.
 *  - These provisional patterns are NOT promoted into Photon / BW pattern docs.
 */

.rcp-wizard {
  /* Provisional accents — see note above. */
  --rcp-teal: oklch(45% 0.1 210.05);
  --rcp-teal-text: oklch(34% 0.09 210.05);
  --rcp-teal-bg: oklch(94% 0.03 210.05);
  --rcp-teal-border: oklch(84% 0.05 210.05);
  --rcp-error: oklch(52% 0.18 25);

  font-family: var(--ph-ref-typeface-body);
  color: var(--ph-on-surface);
  background: var(--ph-surface-container-low);
  min-height: 100%;
  line-height: 1.5;
}

.rcp-wizard *,
.rcp-wizard *::before,
.rcp-wizard *::after {
  box-sizing: border-box;
}

/* ── top app bar ── */
.rcp-topbar {
  height: 48px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  background: var(--ph-surface-container-high);
  border-bottom: 1px solid var(--ph-ref-palette-neutral90);
}
.rcp-backbtn {
  width: 28px;
  height: 28px;
  border-radius: var(--ph-ref-shape-sm);
  border: 1px solid var(--ph-ref-palette-neutral85);
  background: var(--ph-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ph-ref-palette-neutral50);
  flex-shrink: 0;
}
.rcp-backbtn:hover {
  background: var(--ph-surface-container);
}
.rcp-crumb {
  font-size: 12px;
  color: var(--ph-ref-palette-neutral50);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.rcp-crumb b {
  color: var(--ph-ref-palette-neutral30);
  font-weight: 600;
}
.rcp-crumb .rcp-sep {
  color: var(--ph-ref-palette-neutral60);
  margin: 0 7px;
}
.rcp-topbar-right {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.rcp-pill-draft {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--ph-ref-shape-full);
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
  font-size: 12px;
  font-weight: 600;
}
.rcp-pill-draft.rcp-active {
  background: var(--rcp-teal-bg);
  color: var(--rcp-teal-text);
}
.rcp-pill-draft .rcp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ── shared card ── */
.rcp-card {
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-ref-shape-lg);
  overflow: hidden;
}
.rcp-card + .rcp-card {
  margin-top: 14px;
}
.rcp-card-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px 11px;
  border-bottom: 1px solid var(--ph-ref-palette-neutral92);
}
.rcp-card-h .rcp-ttl {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 13px;
  font-weight: 700;
}
.rcp-card-b {
  padding: 15px 18px;
}
.rcp-card-badge {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--ph-ref-shape-full);
  background: var(--ph-ref-palette-primary92);
  color: var(--ph-ref-palette-primary40);
}
.rcp-card-badge.rcp-warn {
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
}
.rcp-card-badge.rcp-ok {
  background: var(--rcp-teal-bg);
  color: var(--rcp-teal-text);
}

/* ── buttons (lightweight inline ghost actions; Photon Button used elsewhere) ── */
.rcp-act {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--ph-ref-shape-sm);
  border: 1px solid var(--ph-ref-palette-primary80);
  background: var(--ph-ref-palette-primary97);
  color: var(--ph-ref-palette-primary40);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--ph-ref-typeface-body);
}
.rcp-act:hover {
  background: var(--ph-ref-palette-primary94);
}

/* ── sticky workflow footer (C19) ── */
.rcp-wfoot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  background: var(--ph-surface);
  border-top: 1px solid var(--ph-ref-palette-neutral90);
  box-shadow: 0 -2px 12px oklch(20% 0.004 321.31 / 0.06);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.rcp-wfoot .rcp-meta {
  font-size: 12.5px;
  color: var(--ph-ref-palette-neutral50);
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.rcp-wfoot .rcp-meta b {
  color: var(--ph-ref-palette-neutral30);
  font-weight: 700;
}
.rcp-wfoot .rcp-grow {
  flex: 1;
}
.rcp-foot-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ════════ STUDIO (state 1) ════════ */
.rcp-studio {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 32px 64px;
}
.rcp-studio-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 22px;
}
.rcp-studio-mark {
  width: 44px;
  height: 44px;
  border-radius: var(--ph-ref-shape-md);
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--ph-primary), var(--ph-ref-palette-primary60));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ph-on-primary);
  box-shadow: 0 4px 14px oklch(40% 0.16 321.31 / 0.28);
}
.rcp-studio-head h1 {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 22px;
  font-weight: 800;
  line-height: 28px;
}
.rcp-studio-head p {
  font-size: 13px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 2px;
  max-width: 560px;
}
.rcp-capture {
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-ref-shape-lg);
  box-shadow: 0 1px 3px oklch(20% 0.004 321.31 / 0.05);
  overflow: hidden;
}
.rcp-capture-top {
  padding: 18px 20px 6px;
}
.rcp-capture-prompt {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--ph-ref-typeface-body);
  font-size: 15px;
  color: var(--ph-on-surface);
  background: transparent;
  min-height: 58px;
  line-height: 1.5;
}
.rcp-capture-prompt::placeholder {
  color: var(--ph-ref-palette-neutral60);
}
.rcp-modes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 20px 0;
}
.rcp-mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--ph-ref-shape-sm);
  border: 1px solid var(--ph-ref-palette-neutral87);
  background: var(--ph-surface);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral40);
  transition: all 0.12s;
}
.rcp-mode svg {
  color: var(--ph-ref-palette-neutral50);
}
.rcp-mode:hover {
  border-color: var(--ph-ref-palette-primary70);
  background: var(--ph-ref-palette-primary98);
}
.rcp-mode.rcp-on {
  border-color: var(--ph-primary);
  background: var(--ph-ref-palette-primary97);
  color: var(--ph-ref-palette-primary40);
}
.rcp-mode.rcp-on svg {
  color: var(--ph-ref-palette-primary40);
}
.rcp-capture-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  margin-top: 14px;
  border-top: 1px solid var(--ph-ref-palette-neutral94);
  background: var(--ph-ref-palette-neutral98);
  flex-wrap: wrap;
}
.rcp-capture-hint {
  font-size: 12px;
  color: var(--ph-ref-palette-neutral50);
  display: flex;
  align-items: center;
  gap: 7px;
}
.rcp-capture-foot .rcp-grow {
  flex: 1;
}
.rcp-sugg-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--ph-ref-palette-neutral50);
  margin: 24px 0 10px;
}
.rcp-sugg-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rcp-sugg {
  padding: 7px 13px;
  border-radius: var(--ph-ref-shape-full);
  border: 1px solid var(--ph-ref-palette-neutral87);
  background: var(--ph-surface);
  font-size: 12.5px;
  color: var(--ph-ref-palette-neutral40);
  font-family: var(--ph-ref-typeface-body);
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.rcp-sugg:hover {
  border-color: var(--ph-ref-palette-primary70);
  color: var(--ph-ref-palette-primary40);
  background: var(--ph-ref-palette-primary98);
}
.rcp-sugg svg {
  color: var(--ph-ref-palette-primary60);
}
.rcp-blank-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--ph-ref-palette-neutral92);
  flex-wrap: wrap;
}
.rcp-blank-row .rcp-t {
  flex: 1;
  min-width: 200px;
}
.rcp-blank-row .rcp-a {
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral40);
}
.rcp-blank-row .rcp-b {
  font-size: 12px;
  color: var(--ph-ref-palette-neutral50);
}

/* ════════ SOURCE ANALYSIS (state 2) ════════ */
.rcp-analysis {
  max-width: 880px;
  margin: 0 auto;
  padding: 28px 32px 64px;
}
.rcp-an-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 780px) {
  .rcp-an-grid {
    grid-template-columns: 1fr;
  }
}
.rcp-src-preview {
  position: relative;
  border-radius: var(--ph-ref-shape-md);
  overflow: hidden;
  background: var(--ph-surface-container);
  aspect-ratio: 4 / 3;
}
.rcp-src-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.rcp-src-tag {
  position: absolute;
  left: 10px;
  top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--ph-ref-shape-full);
  background: oklch(22% 0.004 321.31 / 0.82);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  backdrop-filter: blur(4px);
}
.rcp-src-meta {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rcp-src-meta .rcp-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  gap: 10px;
}
.rcp-src-meta .rcp-row .rcp-k {
  color: var(--ph-ref-palette-neutral50);
}
.rcp-src-meta .rcp-row .rcp-v {
  color: var(--ph-ref-palette-neutral30);
  font-weight: 600;
  text-align: right;
}
.rcp-evi-h {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ph-ref-palette-neutral50);
  margin: 16px 0 9px;
}
.rcp-chunk {
  border: 1px solid var(--ph-ref-palette-neutral90);
  border-left: 3px solid var(--ph-ref-palette-primary70);
  border-radius: var(--ph-ref-shape-sm);
  padding: 9px 12px;
  margin-bottom: 7px;
  background: var(--ph-ref-palette-neutral98);
}
.rcp-chunk .rcp-q {
  font-size: 12.5px;
  color: var(--ph-ref-palette-neutral30);
  font-style: italic;
}
.rcp-chunk .rcp-c {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rcp-conf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px;
  border-radius: var(--ph-ref-shape-full);
  font-size: 10.5px;
  font-weight: 600;
}
.rcp-conf.rcp-hi {
  background: var(--rcp-teal-bg);
  color: var(--rcp-teal-text);
}
.rcp-conf.rcp-mid {
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
}
.rcp-ex-sec {
  border: 1px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-ref-shape-md);
  padding: 13px 15px;
  margin-bottom: 10px;
  background: var(--ph-surface);
  animation: rcp-rise 0.45s ease both;
}
@keyframes rcp-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.rcp-ex-top {
  display: flex;
  align-items: center;
  gap: 9px;
}
.rcp-ex-ico {
  width: 26px;
  height: 26px;
  border-radius: var(--ph-ref-shape-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rcp-ex-ico.rcp-done {
  background: var(--rcp-teal-bg);
  color: var(--rcp-teal);
}
.rcp-ex-ico.rcp-work {
  background: var(--ph-ref-palette-primary94);
  color: var(--ph-ref-palette-primary40);
}
.rcp-ex-ico.rcp-wait {
  background: var(--ph-surface-container);
  color: var(--ph-ref-palette-neutral60);
}
.rcp-ex-sec .rcp-lab {
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-on-surface);
}
.rcp-ex-sec .rcp-sub {
  font-size: 11.5px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 1px;
}
.rcp-ex-sec .rcp-stat {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
}
.rcp-ex-sec .rcp-stat.rcp-done {
  color: var(--rcp-teal-text);
}
.rcp-ex-sec .rcp-stat.rcp-work {
  color: var(--ph-ref-palette-primary40);
}
.rcp-ex-sec .rcp-stat.rcp-wait {
  color: var(--ph-ref-palette-neutral50);
}
.rcp-ex-fields {
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid var(--ph-ref-palette-neutral94);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.rcp-ex-f {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.rcp-ex-f .rcp-fk {
  color: var(--ph-ref-palette-neutral50);
  min-width: 92px;
}
.rcp-ex-f .rcp-fv {
  color: var(--ph-ref-palette-neutral30);
  font-weight: 600;
  font-family: var(--ph-ref-typeface-emphasis);
}
.rcp-tag-inf {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--ph-ref-shape-full);
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
}
.rcp-spin {
  width: 14px;
  height: 14px;
  border: 2px solid var(--ph-ref-palette-primary80);
  border-top-color: transparent;
  border-radius: 50%;
  animation: rcp-spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes rcp-spin {
  to {
    transform: rotate(360deg);
  }
}
.rcp-an-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 20px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-ref-shape-lg);
  flex-wrap: wrap;
}
.rcp-an-foot .rcp-grow {
  flex: 1;
}
.rcp-an-foot .rcp-stxt {
  font-size: 12.5px;
  color: var(--ph-ref-palette-neutral50);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ════════ DRAFT REVIEW (state 3) — 3-region workspace ════════ */
.rcp-work {
  display: grid;
  grid-template-columns: 280px 1fr 312px;
  gap: 14px;
  padding: 16px 24px 24px;
  max-width: 1360px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 1180px) {
  .rcp-work {
    grid-template-columns: 1fr 300px;
  }
  .rcp-rail-l {
    display: none;
  }
}
@media (max-width: 860px) {
  .rcp-work {
    grid-template-columns: 1fr;
  }
}

/* left rail: sources + Clark conversation */
.rcp-src-mini {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-ref-shape-sm);
  background: var(--ph-ref-palette-neutral98);
}
.rcp-src-mini img {
  width: 34px;
  height: 34px;
  border-radius: var(--ph-ref-shape-xs);
  object-fit: cover;
}
.rcp-src-mini .rcp-t {
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral40);
}
.rcp-src-mini .rcp-s {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
}
.rcp-conv {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rcp-msg {
  font-size: 12.5px;
  line-height: 1.5;
}
.rcp-msg.rcp-ai {
  display: flex;
  gap: 8px;
}
.rcp-msg.rcp-ai .rcp-av {
  width: 24px;
  height: 24px;
  border-radius: var(--ph-ref-shape-sm);
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--ph-primary), var(--ph-ref-palette-primary60));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.rcp-msg.rcp-ai .rcp-bubble {
  background: var(--ph-ref-palette-primary98);
  border: 1px solid var(--ph-ref-palette-primary94);
  border-radius: var(--ph-ref-shape-md);
  padding: 9px 12px;
  color: var(--ph-ref-palette-neutral30);
}
.rcp-msg.rcp-me {
  display: flex;
  justify-content: flex-end;
}
.rcp-msg.rcp-me .rcp-bubble {
  background: var(--ph-surface-container);
  border-radius: var(--ph-ref-shape-md);
  padding: 9px 12px;
  color: var(--ph-ref-palette-neutral30);
  max-width: 90%;
}

/* center canvas: identity hero (canvas header, NOT a card-in-card) */
.rcp-canvas-hero {
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-ref-shape-lg);
  padding: 16px 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.rcp-canvas-hero .rcp-ph {
  width: 64px;
  height: 64px;
  border-radius: var(--ph-ref-shape-md);
  flex-shrink: 0;
  object-fit: cover;
}
.rcp-canvas-hero h2 {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 20px;
  font-weight: 800;
  line-height: 26px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.rcp-editmark {
  width: 22px;
  height: 22px;
  border-radius: var(--ph-ref-shape-xs);
  border: 1px solid var(--ph-ref-palette-neutral85);
  background: var(--ph-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ph-ref-palette-neutral50);
}
.rcp-canvas-hero .rcp-desc {
  font-size: 12.5px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 3px;
  max-width: 440px;
}
.rcp-pillrow {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 11px;
}
.rcp-mpill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--ph-ref-shape-full);
  font-size: 12px;
  font-weight: 600;
}
.rcp-mpill.rcp-grad {
  background: linear-gradient(135deg, var(--ph-primary), var(--ph-ref-palette-primary60));
  color: #fff;
  font-family: var(--ph-ref-typeface-emphasis);
}
.rcp-mpill.rcp-neu {
  background: var(--ph-surface-container);
  border: 1px solid var(--ph-outline-variant);
  color: var(--ph-ref-palette-neutral40);
}
.rcp-mpill.rcp-or {
  background: var(--ph-ref-palette-secondary94);
  border: 1px solid var(--ph-ref-palette-secondary85);
  color: var(--ph-ref-palette-secondary40);
}
.rcp-mpill .rcp-inf {
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
  font-size: 10.5px;
  padding: 0 4px;
  border-radius: var(--ph-ref-shape-full);
}
.rcp-yields {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.rcp-ystat {
  flex: 1;
  min-width: 90px;
  border: 1px solid var(--ph-outline-variant);
  border-radius: var(--ph-ref-shape-md);
  padding: 9px 12px;
  background: var(--ph-surface-container);
}
.rcp-ystat .rcp-l {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ph-ref-palette-neutral50);
}
.rcp-ystat .rcp-v {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 18px;
  font-weight: 800;
  margin-top: 1px;
}
.rcp-ystat .rcp-v small {
  font-size: 11px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral50);
}

/* ingredients compact table (C13) */
.rcp-tbl {
  width: 100%;
  border-collapse: collapse;
}
.rcp-tbl th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ph-ref-palette-neutral50);
  text-align: left;
  padding: 6px 8px;
  background: var(--ph-surface-container);
  border-bottom: 1px solid var(--ph-ref-palette-neutral90);
}
.rcp-tbl th.rcp-r,
.rcp-tbl td.rcp-r {
  text-align: right;
}
.rcp-tbl td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--ph-ref-palette-neutral94);
  font-size: 13px;
  vertical-align: middle;
}
.rcp-tbl tr:last-child td {
  border-bottom: none;
}
.rcp-tbl tbody tr:hover td {
  background: var(--ph-surface-container-low);
}
.rcp-ing-name {
  font-weight: 600;
  color: var(--ph-ref-palette-neutral30);
  display: flex;
  align-items: center;
  gap: 7px;
}
.rcp-linkico {
  color: var(--rcp-teal-text);
  display: inline-flex;
}
.rcp-qty {
  font-family: var(--ph-ref-typeface-emphasis);
  font-weight: 600;
}
.rcp-cost {
  font-family: var(--ph-ref-typeface-emphasis);
  font-weight: 600;
  color: var(--ph-ref-palette-neutral30);
}
.rcp-cost.rcp-missing {
  color: var(--ph-ref-palette-neutral60);
}
.rcp-miniwarn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--ph-ref-shape-full);
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
}
.rcp-rowflag td:first-child {
  box-shadow: inset 3px 0 0 var(--ph-secondary);
}
.rcp-unmatched {
  color: var(--ph-ref-palette-secondary40);
  font-style: italic;
  font-weight: 600;
}
.rcp-subpill {
  font-size: 9.5px;
  padding: 1px 7px;
}

/* step timeline */
.rcp-steps {
  position: relative;
  padding-left: 4px;
}
.rcp-step {
  display: flex;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ph-ref-palette-neutral94);
}
.rcp-step:last-child {
  border-bottom: none;
}
.rcp-step .rcp-seq {
  width: 24px;
  height: 24px;
  border-radius: var(--ph-ref-shape-full);
  flex-shrink: 0;
  background: var(--ph-surface-container);
  color: var(--ph-ref-palette-neutral50);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--ph-ref-typeface-emphasis);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rcp-step .rcp-body {
  flex: 1;
}
.rcp-step .rcp-ln {
  font-size: 13px;
  color: var(--ph-ref-palette-neutral30);
  font-weight: 500;
}
.rcp-step .rcp-ln b {
  font-weight: 700;
  color: var(--ph-on-surface);
}
.rcp-step .rcp-attrs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.rcp-apill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--ph-ref-shape-full);
}
.rcp-apill.rcp-proc {
  background: var(--ph-ref-palette-primary92);
  color: var(--ph-ref-palette-primary40);
}
.rcp-apill.rcp-station {
  background: var(--ph-surface-container);
  color: var(--ph-ref-palette-neutral50);
}
.rcp-apill.rcp-loss {
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
}
.rcp-apill.rcp-warn {
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
  cursor: pointer;
  border: none;
  font-family: var(--ph-ref-typeface-body);
}

/* right rail: completeness score (C16) */
.rcp-score {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
}
.rcp-ring {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  position: relative;
}
.rcp-ring svg {
  transform: rotate(-90deg);
}
.rcp-ring .rcp-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 21px;
  font-weight: 800;
  color: var(--ph-on-surface);
}
.rcp-score .rcp-lv {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 13px;
  font-weight: 700;
}
.rcp-score .rcp-fr {
  font-size: 12px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 1px;
}
.rcp-stars {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  color: var(--ph-ref-palette-secondary40);
}
.rcp-score-foot {
  padding: 0 18px 14px;
}
.rcp-chk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 5px 0;
  color: var(--ph-ref-palette-neutral40);
}
.rcp-chk .rcp-i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rcp-chk .rcp-i.rcp-done {
  background: var(--ph-ref-palette-primary94);
  color: var(--ph-ref-palette-primary40);
}
.rcp-chk .rcp-i.rcp-todo {
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
}
.rcp-chk.rcp-pending {
  color: var(--ph-ref-palette-neutral50);
}

/* resolution list */
.rcp-res-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ph-ref-palette-neutral94);
}
.rcp-res-item:last-child {
  border-bottom: none;
}
.rcp-res-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 6px;
  flex-shrink: 0;
}
.rcp-res-dot.rcp-warn {
  background: var(--ph-secondary);
}
.rcp-res-dot.rcp-ok {
  background: var(--rcp-teal);
}
.rcp-res-item .rcp-t {
  flex: 1;
}
.rcp-res-item .rcp-n {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral30);
}
.rcp-res-item .rcp-d {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 1px;
}
.rcp-res-go {
  font-size: 11px;
  font-weight: 600;
  color: var(--ph-ref-palette-primary40);
  background: none;
  border: none;
  padding: 2px 0;
}

/* cost summary (C14) */
.rcp-fin .rcp-frow {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 12.5px;
  gap: 10px;
}
.rcp-fin .rcp-frow .rcp-k {
  color: var(--ph-ref-palette-neutral50);
}
.rcp-fin .rcp-frow .rcp-v {
  font-family: var(--ph-ref-typeface-emphasis);
  font-weight: 600;
  color: var(--ph-ref-palette-neutral30);
}
.rcp-fin .rcp-frow.rcp-miss .rcp-v {
  color: var(--rcp-error);
}
.rcp-fin .rcp-sep {
  height: 1px;
  background: var(--ph-ref-palette-neutral90);
  margin: 7px 0;
}
.rcp-fin .rcp-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 3px;
}
.rcp-fin .rcp-total .rcp-k {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 13px;
  font-weight: 800;
}
.rcp-fin .rcp-total .rcp-v {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 20px;
  font-weight: 800;
  color: var(--ph-primary);
}
.rcp-fcpill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 11px;
  padding: 5px 11px;
  border-radius: var(--ph-ref-shape-full);
  font-size: 12px;
  font-weight: 600;
  background: var(--rcp-teal-bg);
  color: var(--rcp-teal-text);
}

/* warning banner (P10) */
.rcp-banner {
  display: flex;
  gap: 9px;
  padding: 10px 13px;
  border-radius: var(--ph-ref-shape-md);
  font-size: 12px;
  line-height: 1.45;
}
.rcp-banner.rcp-in-rail {
  margin: 0 18px 14px;
}
.rcp-banner.rcp-warn {
  background: var(--ph-ref-palette-secondary94);
  border: 1px solid var(--ph-ref-palette-secondary85);
  color: var(--ph-ref-palette-secondary30);
}
.rcp-banner svg {
  flex-shrink: 0;
  margin-top: 1px;
}

/* inline editable fields in review */
.rcp-inline-input {
  height: 30px;
  border: 1px solid var(--ph-ref-palette-neutral87);
  border-radius: var(--ph-ref-shape-sm);
  padding: 0 8px;
  font-family: var(--ph-ref-typeface-body);
  font-size: 12.5px;
  background: var(--ph-surface);
  color: var(--ph-on-surface);
  width: 100%;
  max-width: 90px;
}
.rcp-inline-input.rcp-qtyfield {
  text-align: right;
  font-family: var(--ph-ref-typeface-emphasis);
  font-weight: 600;
}
.rcp-inline-select {
  height: 30px;
  border: 1px solid var(--ph-ref-palette-neutral87);
  border-radius: var(--ph-ref-shape-sm);
  padding: 0 6px;
  font-family: var(--ph-ref-typeface-body);
  font-size: 12.5px;
  background: var(--ph-surface);
  color: var(--ph-on-surface);
}

/* ════════ RESOLVER (state 4) ════════ */
.rcp-resolver {
  max-width: 980px;
  margin: 0 auto;
  padding: 20px 24px 24px;
}
.rcp-res-head h2 {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 18px;
  font-weight: 800;
}
.rcp-res-head p {
  font-size: 12.5px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 2px;
}
.rcp-res-prog {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 11px 16px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-ref-shape-lg);
}
.rcp-res-prog .rcp-lab {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.rcp-track {
  flex: 1;
  height: 8px;
  border-radius: var(--ph-ref-shape-full);
  background: var(--ph-ref-palette-neutral92);
  overflow: hidden;
}
.rcp-track .rcp-fill {
  height: 100%;
  border-radius: var(--ph-ref-shape-full);
  background: linear-gradient(90deg, var(--ph-primary), var(--ph-ref-palette-primary60));
}
.rcp-res-prog .rcp-pct {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 13px;
  font-weight: 700;
  min-width: 54px;
  text-align: right;
}
.rcp-workitem {
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-ref-shape-lg);
  margin-top: 12px;
  overflow: hidden;
}
.rcp-workitem.rcp-flag {
  border-left: 3px solid var(--ph-secondary);
}
.rcp-wi-h {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--ph-ref-palette-neutral92);
}
.rcp-wi-h .rcp-src {
  flex: 1;
}
.rcp-wi-h .rcp-raw {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.rcp-wi-h .rcp-ev {
  font-size: 11.5px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 2px;
  font-style: italic;
}
.rcp-statepill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--ph-ref-shape-full);
  font-size: 11.5px;
  font-weight: 600;
}
.rcp-statepill.rcp-unmatched,
.rcp-statepill.rcp-inferred {
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
}
.rcp-statepill.rcp-matched {
  background: var(--rcp-teal-bg);
  color: var(--rcp-teal-text);
}
.rcp-wi-b {
  padding: 15px 18px;
}
.rcp-wi-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ph-ref-palette-neutral50);
  margin-bottom: 8px;
}
.rcp-suggrow {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 13px;
}
.rcp-matchref {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--ph-ref-palette-neutral85);
  border-radius: var(--ph-ref-shape-md);
  background: var(--ph-surface-container);
  flex-wrap: wrap;
}
.rcp-matchref:hover {
  border-color: var(--ph-ref-palette-primary70);
  box-shadow: 0 0 0 3px oklch(40% 0.16 321.31 / 0.08);
}
.rcp-matchref .rcp-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex-shrink: 0;
  background: var(--ph-ref-palette-primary92);
  color: var(--ph-ref-palette-primary40);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rcp-matchref .rcp-t {
  flex: 1;
  min-width: 140px;
}
.rcp-matchref .rcp-nm {
  font-size: 13px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral30);
}
.rcp-matchref .rcp-mt {
  font-size: 11.5px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 1px;
}
.rcp-pc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: var(--ph-ref-shape-full);
  background: var(--rcp-teal-bg);
  color: var(--rcp-teal-text);
}
.rcp-pc.rcp-low {
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
}
.rcp-unit-fix {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px dashed var(--ph-ref-palette-secondary80);
  border-radius: var(--ph-ref-shape-md);
  background: var(--ph-ref-palette-secondary97);
  margin-bottom: 13px;
  font-size: 12.5px;
  flex-wrap: wrap;
}
.rcp-unit-fix.rcp-ok {
  border-color: var(--rcp-teal-border);
  border-style: solid;
  background: var(--rcp-teal-bg);
  color: var(--rcp-teal-text);
}
.rcp-unit-fix .rcp-conv {
  font-family: var(--ph-ref-typeface-emphasis);
  font-weight: 700;
  color: var(--ph-ref-palette-secondary40);
}
.rcp-wi-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.rcp-choose {
  height: 30px;
  padding: 0 13px;
  border-radius: var(--ph-ref-shape-full);
  border: none;
  background: var(--ph-primary);
  color: var(--ph-on-primary);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--ph-ref-typeface-body);
}
.rcp-choose.rcp-secondary {
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral85);
  color: var(--ph-ref-palette-neutral40);
}
.rcp-wact {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--ph-ref-shape-sm);
  border: 1px solid var(--ph-ref-palette-neutral85);
  background: var(--ph-surface);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral40);
  font-family: var(--ph-ref-typeface-body);
}
.rcp-wact:hover {
  border-color: var(--ph-ref-palette-primary70);
  background: var(--ph-ref-palette-primary98);
  color: var(--ph-ref-palette-primary40);
}
.rcp-wact svg {
  color: var(--ph-ref-palette-neutral50);
}
.rcp-wact.rcp-primary {
  border-color: var(--ph-primary);
  background: var(--ph-ref-palette-primary97);
  color: var(--ph-ref-palette-primary40);
}
.rcp-wact.rcp-primary svg {
  color: var(--ph-ref-palette-primary40);
}

/* ════════ MARGIN LAB (state 5) ════════ */
.rcp-lab {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px 24px 24px;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 840px) {
  .rcp-lab {
    grid-template-columns: 1fr;
  }
}
.rcp-ctl {
  margin-bottom: 16px;
}
.rcp-ctl:last-child {
  margin-bottom: 0;
}
.rcp-ctl-l {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}
.rcp-ctl-l .rcp-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral40);
}
.rcp-ctl-l .rcp-val {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 13px;
  font-weight: 700;
  color: var(--ph-on-surface);
}
.rcp-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--ph-ref-shape-full);
  background: var(--ph-ref-palette-neutral90);
  outline: none;
}
.rcp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ph-primary);
  cursor: pointer;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px oklch(20% 0.004 321.31 / 0.25);
}
.rcp-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ph-primary);
  cursor: pointer;
  border: 2px solid #fff;
}
.rcp-numfield {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rcp-numfield input {
  height: 36px;
  border: 1px solid var(--ph-ref-palette-neutral87);
  border-radius: var(--ph-ref-shape-sm);
  padding: 0 11px;
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 14px;
  font-weight: 600;
  width: 100%;
  background: var(--ph-surface);
  color: var(--ph-on-surface);
}
.rcp-numfield .rcp-pre {
  color: var(--ph-ref-palette-neutral50);
  font-weight: 600;
  font-family: var(--ph-ref-typeface-emphasis);
}
.rcp-togrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
}
.rcp-togrow .rcp-t {
  flex: 1;
}
.rcp-togrow .rcp-a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral40);
}
.rcp-togrow .rcp-b {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
}
.rcp-divider {
  height: 1px;
  background: var(--ph-ref-palette-neutral92);
  margin: 14px 0;
}
.rcp-minilabel {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ph-ref-palette-neutral50);
  margin-bottom: 9px;
}
.rcp-margin-hero {
  display: flex;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.rcp-mh-card {
  flex: 1;
  min-width: 150px;
  border: 1px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-ref-shape-md);
  padding: 13px 15px;
  background: var(--ph-surface-container);
}
.rcp-mh-card .rcp-l {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ph-ref-palette-neutral50);
}
.rcp-mh-card .rcp-v {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 22px;
  font-weight: 800;
  margin-top: 2px;
}
.rcp-mh-card .rcp-v.rcp-good {
  color: var(--rcp-teal);
}
.rcp-mh-card .rcp-v.rcp-pri {
  color: var(--ph-primary);
}
.rcp-mh-card .rcp-d {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 2px;
}
.rcp-gauge {
  margin-bottom: 16px;
}
.rcp-gauge .rcp-row {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  margin-bottom: 6px;
}
.rcp-gauge .rcp-row .rcp-k {
  color: var(--ph-ref-palette-neutral50);
}
.rcp-gauge .rcp-row .rcp-v {
  font-family: var(--ph-ref-typeface-emphasis);
  font-weight: 700;
}
.rcp-gtrack {
  height: 10px;
  border-radius: var(--ph-ref-shape-full);
  background: var(--ph-ref-palette-neutral92);
  position: relative;
}
.rcp-gfill {
  height: 100%;
  border-radius: var(--ph-ref-shape-full);
  background: linear-gradient(90deg, var(--rcp-teal), oklch(60% 0.1 210));
}
.rcp-gmark {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--ph-secondary);
}
.rcp-gmark-label {
  position: absolute;
  top: -17px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ph-ref-palette-secondary40);
  white-space: nowrap;
}
.rcp-sugg-op {
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  border: 1px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-ref-shape-md);
  margin-bottom: 9px;
  background: var(--ph-surface);
  align-items: center;
  flex-wrap: wrap;
}
.rcp-sugg-op .rcp-ic {
  width: 30px;
  height: 30px;
  border-radius: var(--ph-ref-shape-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rcp-sugg-op .rcp-ic.rcp-save {
  background: var(--rcp-teal-bg);
  color: var(--rcp-teal);
}
.rcp-sugg-op .rcp-ic.rcp-swap {
  background: var(--ph-ref-palette-primary94);
  color: var(--ph-ref-palette-primary40);
}
.rcp-sugg-op .rcp-ic.rcp-stock {
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-ref-palette-secondary40);
}
.rcp-sugg-op .rcp-t {
  flex: 1;
  min-width: 160px;
}
.rcp-sugg-op .rcp-a {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral30);
}
.rcp-sugg-op .rcp-b {
  font-size: 11.5px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 1px;
}
.rcp-sugg-op .rcp-impact {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 12px;
  font-weight: 700;
  color: var(--rcp-teal);
  white-space: nowrap;
}
.rcp-sugg-op .rcp-impact.rcp-neutral {
  color: var(--ph-ref-palette-neutral50);
}
.rcp-variants {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
@media (max-width: 560px) {
  .rcp-variants {
    grid-template-columns: 1fr;
  }
}
.rcp-variant {
  border: 1px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-ref-shape-md);
  padding: 14px;
  background: var(--ph-surface);
}
.rcp-variant.rcp-sel {
  border-color: var(--ph-primary);
  box-shadow: 0 0 0 3px oklch(40% 0.16 321.31 / 0.1);
  background: var(--ph-ref-palette-primary98);
}
.rcp-variant .rcp-vh {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 11px;
}
.rcp-variant .rcp-vname {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 14px;
  font-weight: 700;
}
.rcp-variant .rcp-vtag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--ph-ref-shape-full);
}
.rcp-variant .rcp-vtag.rcp-cur {
  background: var(--ph-ref-palette-primary92);
  color: var(--ph-ref-palette-primary40);
}
.rcp-variant .rcp-vtag.rcp-new {
  background: var(--rcp-teal-bg);
  color: var(--rcp-teal-text);
}
.rcp-variant .rcp-vrow {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 0;
}
.rcp-variant .rcp-vrow .rcp-k {
  color: var(--ph-ref-palette-neutral50);
}
.rcp-variant .rcp-vrow .rcp-v {
  font-family: var(--ph-ref-typeface-emphasis);
  font-weight: 700;
  color: var(--ph-ref-palette-neutral30);
}
.rcp-variant .rcp-vrow .rcp-v.rcp-good {
  color: var(--rcp-teal);
}
.rcp-variant .rcp-vdiff {
  font-size: 11px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--ph-ref-palette-neutral94);
}

/* ════════ READY TO SAVE (state 6) ════════ */
.rcp-save-wrap {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 24px 24px;
}
.rcp-save-head {
  text-align: center;
  margin-bottom: 8px;
}
.rcp-save-head .rcp-ic {
  width: 52px;
  height: 52px;
  border-radius: var(--ph-ref-shape-md);
  margin: 0 auto 12px;
  background: linear-gradient(135deg, var(--ph-primary), var(--ph-ref-palette-primary60));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 14px oklch(40% 0.16 321.31 / 0.28);
}
.rcp-save-head h2 {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 20px;
  font-weight: 800;
}
.rcp-save-head p {
  font-size: 13px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 3px;
}
.rcp-reviewbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 14px;
  padding: 13px 16px;
  background: var(--ph-surface);
  border: 1px solid var(--ph-ref-palette-neutral90);
  border-radius: var(--ph-ref-shape-lg);
}
.rcp-reviewbar .rcp-lab {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.rcp-reviewbar .rcp-pct {
  font-family: var(--ph-ref-typeface-emphasis);
  font-size: 13px;
  font-weight: 700;
  min-width: 40px;
  text-align: right;
}
.rcp-save-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 720px) {
  .rcp-save-grid {
    grid-template-columns: 1fr;
  }
}
.rcp-cl {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ph-ref-palette-neutral94);
}
.rcp-cl:last-child {
  border-bottom: none;
}
.rcp-cl .rcp-box {
  width: 20px;
  height: 20px;
  border-radius: var(--ph-ref-shape-xs);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rcp-cl .rcp-box.rcp-ok {
  background: var(--ph-primary);
  color: #fff;
}
.rcp-cl .rcp-box.rcp-warn {
  background: var(--ph-ref-palette-secondary94);
  border: 1.5px solid var(--ph-ref-palette-secondary80);
  color: var(--ph-ref-palette-secondary40);
}
.rcp-cl .rcp-t {
  flex: 1;
}
.rcp-cl .rcp-n {
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-ref-palette-neutral30);
}
.rcp-cl .rcp-d {
  font-size: 11.5px;
  color: var(--ph-ref-palette-neutral50);
}
.rcp-cl .rcp-fix {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ph-ref-palette-primary40);
  background: none;
  border: none;
  padding: 0;
}
.rcp-target {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.rcp-topt {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border: 1.5px solid var(--ph-ref-palette-neutral85);
  border-radius: var(--ph-ref-shape-md);
  background: var(--ph-surface);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--ph-ref-typeface-body);
}
.rcp-topt.rcp-sel {
  border-color: var(--ph-primary);
  background: var(--ph-ref-palette-primary98);
}
.rcp-topt .rcp-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--ph-ref-palette-neutral80);
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
}
.rcp-topt.rcp-sel .rcp-radio {
  border-color: var(--ph-primary);
}
.rcp-topt.rcp-sel .rcp-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--ph-primary);
}
.rcp-topt .rcp-a {
  font-size: 13px;
  font-weight: 700;
  color: var(--ph-ref-palette-neutral30);
}
.rcp-topt .rcp-b {
  font-size: 11.5px;
  color: var(--ph-ref-palette-neutral50);
  margin-top: 1px;
}
.rcp-topt.rcp-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.rcp-topt .rcp-lock {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ph-ref-palette-secondary40);
  background: var(--ph-ref-palette-secondary94);
  padding: 2px 8px;
  border-radius: var(--ph-ref-shape-full);
  align-self: center;
}
/* Settings Card Color System
 * Based on category color themes from design system
 * Each color defines: icon background, icon color, and hover border
 * Using tokens from business-web-brandbook.ts
 */

/* Primary - Store & Setup (magenta/pink, hue 321) */
.settings-card[data-color='primary'] {
  --card-icon-bg: var(--ph-ref-palette-primary94);
  --card-icon-color: var(--ph-ref-palette-primary50);
  --card-hover-border: var(--ph-ref-palette-primary70);
}

/* Secondary - Products & Menu (orange, hue 39) */
.settings-card[data-color='secondary'] {
  --card-icon-bg: var(--ph-ref-palette-secondary94);
  --card-icon-color: var(--ph-ref-palette-secondary50);
  --card-hover-border: var(--ph-ref-palette-secondary70);
}

/* Tertiary - Team & Access (blue, hue 210) */
.settings-card[data-color='tertiary'] {
  --card-icon-bg: var(--ph-ref-palette-tertiary94);
  --card-icon-color: var(--ph-ref-palette-tertiary50);
  --card-hover-border: var(--ph-ref-palette-tertiary70);
}

/* Success - Billing & Plans (green) */
.settings-card[data-color='success'] {
  --card-icon-bg: var(--ph-ref-palette-tertiary94);
  --card-icon-color: var(--ph-ref-palette-tertiary50);
  --card-hover-border: var(--ph-ref-palette-tertiary70);
}

/* Info - Integrations (purple) */
.settings-card[data-color='info'] {
  --card-icon-bg: var(--ph-ref-palette-tertiary94);
  --card-icon-color: var(--ph-ref-palette-tertiary50);
  --card-hover-border: var(--ph-ref-palette-tertiary70);
}

/* Neutral - Advanced (gray, minimal chroma) */
.settings-card[data-color='neutral'] {
  --card-icon-bg: var(--ph-ref-palette-neutral94);
  --card-icon-color: var(--ph-ref-palette-neutral50);
  --card-hover-border: var(--ph-ref-palette-neutral70);
}

/* Apply the CSS variables */
.settings-card {
  border-color: var(--ph-ref-palette-neutral85);
  transition: all 0.2s;
}

.settings-card:hover {
  border-color: var(--card-hover-border);
}

.settings-card .card-icon {
  background-color: var(--card-icon-bg);
  color: var(--card-icon-color);
}
/*
 * SMM-E01 Social Media Manager — module styles.
 *
 * Faithful translation of the four approved mocks in
 * ux-ui-design/business-web/social-media/* to Photon `--ph-*` tokens.
 *
 * Token mapping is by SEMANTIC ROLE, not by the mock's illustrative token names.
 * The mock used secondary=teal(success) / tertiary=orange(warning); the real
 * business-web Photon palette is secondary=orange (hue 39) / tertiary=teal
 * (hue 210) with a dedicated green --ph-success. So roles map as:
 *   surfaces           -> --ph-surface / -container-low / -container / -container-lowest
 *   primary / scheduled / in-progress / AI -> --ph-primary*  (purple)
 *   success (approved / published / in-sync) -> --ph-success* (green)
 *   needs-action / warning (pending / drift / reconnect / expired) -> --ph-secondary* (orange)
 *   error (failed / declined)              -> --ph-error*    (red)
 *   text / outline     -> --ph-on-surface(-variant) / --ph-outline(-variant)
 *   shape (sm/md/lg/full) -> --ph-ref-shape-*
 *   shadows            -> --ph-sys-elevation-1 / --ph-sys-elevation-3
 *   brand/body fonts   -> --md-ref-typeface-brand / --md-ref-typeface-plain
 *
 * Platform brand colors (Facebook blue, Instagram gradient, TikTok black) are
 * the only literal colors here. They are external-brand identity, not theme
 * colors — the mocks hardcode them and they cannot map to a `--ph-*` role.
 * They are confined to `.smm-pf-*` badge/preview classes.
 */

.smm-root {
  --smm-brand: var(--md-ref-typeface-brand, 'Plus Jakarta Sans', sans-serif);
  --smm-body: var(--md-ref-typeface-plain, 'DM Sans', sans-serif);
  --smm-mono: 'JetBrains Mono', ui-monospace, monospace;
  font-family: var(--smm-body);
  color: var(--ph-on-surface);
}

@keyframes smm-slideInUp { from { transform: translateY(12px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes smm-popIn { 0% { transform: scale(.92); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
@keyframes smm-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .4 } }
@keyframes smm-spin { to { transform: rotate(360deg) } }
@keyframes smm-shimmer { 0% { background-position: -300px 0 } 100% { background-position: 600px 0 } }
@keyframes smm-dotBounce { 0%, 80%, 100% { transform: scale(.6); opacity: .4 } 40% { transform: scale(1); opacity: 1 } }
@keyframes smm-sparkleFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }

@media (prefers-reduced-motion: reduce) {
  .smm-root *, .smm-root *::before, .smm-root *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* ── Status pills — the sealed 9-state vocabulary ── */
.smm-status-pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 8px;
  border-radius: var(--ph-ref-shape-full); font-family: var(--smm-brand); font-size: 11px;
  font-weight: 700; white-space: nowrap; line-height: 1;
}
.smm-status-pill .smm-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.smm-st-draft { background: var(--ph-surface-container); color: var(--ph-on-surface-variant); }
.smm-st-draft .smm-dot { background: var(--ph-outline); }
.smm-st-pending { background: var(--ph-secondary-container); color: var(--ph-on-tertiary-container); }
.smm-st-pending .smm-dot { background: var(--ph-secondary); }
.smm-st-approved { background: var(--ph-success-container); color: var(--ph-on-secondary-container); }
.smm-st-approved .smm-dot { background: var(--ph-success); }
.smm-st-scheduled { background: var(--ph-primary-container); color: var(--ph-on-primary-container); }
.smm-st-scheduled .smm-dot { background: var(--ph-primary); }
.smm-st-queued { background: var(--ph-primary-container); color: var(--ph-on-primary-container); }
.smm-st-queued .smm-dot { background: var(--ph-primary); animation: smm-pulse 1.1s infinite; }
.smm-st-publishing { background: var(--ph-primary-container); color: var(--ph-on-primary-container); }
.smm-st-publishing .smm-dot { background: var(--ph-primary); animation: smm-pulse 1.1s infinite; }
.smm-st-published { background: var(--ph-success); color: var(--ph-on-secondary); }
.smm-st-published .smm-dot { background: var(--ph-on-secondary); }
.smm-st-failed { background: var(--ph-error-container); color: var(--ph-on-error-container); }
.smm-st-failed .smm-dot { background: var(--ph-error); }
.smm-st-declined { background: var(--ph-surface); color: var(--ph-error); border: 1px solid var(--ph-error-container); }
.smm-st-declined .smm-dot { background: var(--ph-error); }
.smm-st-expired { background: var(--ph-surface-container-lowest); color: var(--ph-outline); border: 1px dashed var(--ph-outline-variant); }
.smm-st-expired .smm-dot { background: var(--ph-outline); }

/* ── Platform badges (external brand identity — see header note) ── */
.smm-pf-badge { width: 18px; height: 18px; border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.smm-pf-fb { background: #1877F2; }
.smm-pf-ig { background: linear-gradient(135deg, #feda75, #d62976 45%, #962fbf 80%, #4f5bd5); }
.smm-pf-tt { background: #000; }
.smm-pf-badge svg { width: 11px; height: 11px; }

/* ── AI-drafted tag ── */
.smm-ai-tag {
  display: inline-flex; align-items: center; gap: 3px; font-family: var(--smm-brand);
  font-size: 9px; font-weight: 700; color: var(--ph-primary); background: var(--ph-primary-container);
  padding: 1px 6px; border-radius: var(--ph-ref-shape-full);
}

/* ── shared atoms ── */
.smm-field-label { font-family: var(--smm-brand); font-size: 11px; font-weight: 600; color: var(--ph-on-surface-variant); letter-spacing: .3px; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.smm-mono { font-family: var(--smm-mono); }
.smm-card { background: var(--ph-surface); border-radius: var(--ph-ref-shape-md); border: 1px solid var(--ph-outline-variant); box-shadow: var(--ph-sys-elevation-1); }

/* mini icon button (squared) for close / overflow */
.smm-icon-btn { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--ph-outline-variant); background: var(--ph-surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ph-on-surface-variant); transition: all .15s; }
.smm-icon-btn:hover { background: var(--ph-surface-container-low); color: var(--ph-on-surface); }

/* ── Stat pills (calendar top bar) ── */
.smm-stat-row { display: flex; gap: 10px; flex-wrap: wrap; }
.smm-stat-pill { display: flex; align-items: center; gap: 9px; padding: 8px 14px 8px 11px; background: var(--ph-surface); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-full); }
.smm-stat-pill .smm-ic { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.smm-stat-pill .smm-num { font-family: var(--smm-mono); font-size: 16px; font-weight: 700; color: var(--ph-on-surface); line-height: 1; }
.smm-stat-pill .smm-lbl { font-family: var(--smm-brand); font-size: 10.5px; font-weight: 600; color: var(--ph-on-surface-variant); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }

/* ════ CALENDAR ════ */
.smm-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.smm-cal-title-group { display: flex; align-items: center; gap: 14px; }
.smm-cal-month { font-family: var(--smm-brand); font-size: 21px; font-weight: 900; color: var(--ph-on-surface); }
.smm-cal-nav { display: flex; gap: 6px; }
.smm-cal-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.smm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--ph-outline-variant); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); overflow: hidden; }
.smm-cal-dow { background: var(--ph-surface-container-low); padding: 10px 12px; font-family: var(--smm-brand); font-size: 11px; font-weight: 700; color: var(--ph-on-surface-variant); text-transform: uppercase; letter-spacing: .5px; }
.smm-cal-cell { background: var(--ph-surface); min-height: 150px; padding: 8px; display: flex; flex-direction: column; gap: 5px; position: relative; }
.smm-cal-cell.smm-today { background: var(--ph-primary-container); }
.smm-cal-date { font-family: var(--smm-mono); font-size: 12px; font-weight: 700; color: var(--ph-on-surface-variant); margin-bottom: 2px; }
.smm-cal-cell.smm-today .smm-cal-date { color: var(--ph-on-primary-container); }
.smm-cal-add { position: absolute; top: 7px; right: 7px; width: 22px; height: 22px; border-radius: 50%; border: 1px dashed var(--ph-outline-variant); background: transparent; color: var(--ph-outline); cursor: pointer; display: none; align-items: center; justify-content: center; }
.smm-cal-cell:hover .smm-cal-add { display: flex; }

/* post chip */
.smm-chip { border-radius: 8px; padding: 6px 8px; cursor: pointer; border-left: 3px solid var(--ph-outline); background: var(--ph-surface-container-low); transition: all .12s; animation: smm-slideInUp .25s ease-out; }
.smm-chip:hover { transform: translateY(-1px); box-shadow: var(--ph-sys-elevation-1); }
.smm-chip.smm-active { box-shadow: 0 0 0 2px var(--ph-primary); background: var(--ph-surface); }
.smm-chip-top { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.smm-chip-badges { display: flex; gap: 3px; }
.smm-chip-time { font-family: var(--smm-mono); font-size: 9.5px; font-weight: 700; color: var(--ph-on-surface-variant); margin-left: auto; }
.smm-chip-text { font-family: var(--smm-body); font-size: 11.5px; font-weight: 600; color: var(--ph-on-surface); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.smm-chip-foot { display: flex; align-items: center; gap: 4px; margin-top: 4px; flex-wrap: wrap; }
.smm-chip.smm-k-scheduled, .smm-chip.smm-k-queued, .smm-chip.smm-k-publishing { border-left-color: var(--ph-primary); }
.smm-chip.smm-k-pending { border-left-color: var(--ph-secondary); }
.smm-chip.smm-k-approved, .smm-chip.smm-k-published { border-left-color: var(--ph-success); }
.smm-chip.smm-k-failed, .smm-chip.smm-k-declined { border-left-color: var(--ph-error); }
.smm-chip.smm-k-draft, .smm-chip.smm-k-expired { border-left-color: var(--ph-outline); }

/* weekly AI plan strip */
.smm-sug-strip { margin-bottom: 14px; padding: 11px 14px; border-radius: var(--ph-ref-shape-md); border: 1px dashed var(--ph-primary); background: linear-gradient(135deg, var(--ph-primary-container), var(--ph-success-container)); display: flex; align-items: center; gap: 12px; }
.smm-sug-strip .smm-txt { flex: 1; }
.smm-sug-strip .smm-t1 { font-family: var(--smm-brand); font-size: 13px; font-weight: 700; color: var(--ph-on-primary-container); }
.smm-sug-strip .smm-t2 { font-family: var(--smm-body); font-size: 12px; color: var(--ph-on-surface-variant); margin-top: 1px; }
.smm-sug-icon { width: 32px; height: 32px; border-radius: 8px; background: var(--ph-primary); color: var(--ph-on-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* calendar layout + side panel */
.smm-cal-layout { display: flex; gap: 16px; align-items: flex-start; }
.smm-cal-main { flex: 1; min-width: 0; }
.smm-side-panel { width: 340px; flex: 0 0 340px; position: sticky; top: 16px; animation: smm-slideInUp .25s ease-out; }
.smm-sp-media { height: 170px; border-radius: var(--ph-ref-shape-md); background: var(--ph-surface-container); display: flex; align-items: center; justify-content: center; color: var(--ph-outline); margin-bottom: 14px; position: relative; overflow: hidden; }
.smm-sp-media-badge { position: absolute; bottom: 8px; left: 8px; font-family: var(--smm-brand); font-size: 10px; font-weight: 700; color: #fff; background: var(--ph-scrim, rgba(0, 0, 0, .5)); padding: 3px 8px; border-radius: var(--ph-ref-shape-full); }
.smm-sp-section { margin-bottom: 16px; }
.smm-sp-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.smm-metric-card { background: var(--ph-surface-container-low); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-sm); padding: 10px; }
.smm-metric-card .smm-mv { font-family: var(--smm-mono); font-size: 18px; font-weight: 700; color: var(--ph-on-surface); }
.smm-metric-card .smm-ml { font-family: var(--smm-brand); font-size: 10px; font-weight: 600; color: var(--ph-on-surface-variant); text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
.smm-est-note { font-family: var(--smm-body); font-size: 11px; color: var(--ph-secondary); font-style: italic; margin-top: 6px; display: flex; align-items: center; gap: 4px; }

/* ════ LIST / TABLE VIEW ════ */
.smm-tbl { width: 100%; border-collapse: collapse; background: var(--ph-surface); border-radius: var(--ph-ref-shape-md); overflow: hidden; border: 1px solid var(--ph-outline-variant); }
.smm-tbl thead th { text-align: left; padding: 11px 14px; font-family: var(--smm-brand); font-size: 11px; font-weight: 700; color: var(--ph-on-surface-variant); text-transform: uppercase; letter-spacing: .4px; background: var(--ph-surface-container-low); border-bottom: 1px solid var(--ph-outline-variant); }
.smm-tbl tbody td { padding: 12px 14px; border-bottom: 1px solid var(--ph-surface-container); font-size: 13px; color: var(--ph-on-surface); vertical-align: middle; }
.smm-tbl tbody tr:last-child td { border-bottom: none; }
.smm-tbl tbody tr:hover { background: var(--ph-surface-container-low); cursor: pointer; }
.smm-tbl-thumb { width: 42px; height: 42px; border-radius: 8px; background: var(--ph-surface-container); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ph-outline); }
.smm-tbl-cap { font-family: var(--smm-body); font-size: 12.5px; color: var(--ph-on-surface); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smm-tbl-time { font-family: var(--smm-mono); font-size: 12px; font-weight: 600; color: var(--ph-on-surface-variant); }

/* ════ APPROVAL QUEUE ════ */
.smm-aq-wrap { max-width: 1000px; margin: 0 auto; }
.smm-aq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.smm-aq-title { font-family: var(--smm-brand); font-size: 21px; font-weight: 900; color: var(--ph-on-surface); }
.smm-aq-sub { font-family: var(--smm-body); font-size: 13px; color: var(--ph-on-surface-variant); margin-top: 2px; }
.smm-bulk-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--ph-inverse-surface, var(--ph-on-surface)); border-radius: var(--ph-ref-shape-full); color: var(--ph-inverse-on-surface, #fff); margin-bottom: 14px; animation: smm-slideInUp .2s ease-out; flex-wrap: wrap; }
.smm-bulk-bar .smm-cnt { font-family: var(--smm-mono); font-size: 14px; font-weight: 700; }
.smm-bulk-bar .smm-lbl { font-family: var(--smm-body); font-size: 13px; opacity: .8; }
.smm-bulk-bar .smm-spacer { flex: 1; }
.smm-aq-card { background: var(--ph-surface); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); padding: 14px; margin-bottom: 10px; display: flex; gap: 14px; align-items: flex-start; box-shadow: var(--ph-sys-elevation-1); animation: smm-slideInUp .25s ease-out; }
.smm-aq-thumb { width: 72px; height: 72px; border-radius: var(--ph-ref-shape-sm); background: var(--ph-surface-container); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--ph-outline); }
.smm-aq-body { flex: 1; min-width: 0; }
.smm-aq-meta-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.smm-aq-cap { font-family: var(--smm-body); font-size: 13.5px; color: var(--ph-on-surface); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.smm-aq-sched { font-family: var(--smm-mono); font-size: 11.5px; font-weight: 600; color: var(--ph-on-surface-variant); margin-top: 6px; display: flex; align-items: center; gap: 5px; }
.smm-aq-actions { display: flex; flex-direction: column; gap: 8px; flex-shrink: 0; }
.smm-aq-by { font-family: var(--smm-body); font-size: 11.5px; color: var(--ph-on-surface-variant); margin-left: auto; }

.smm-decline-box { margin-top: 12px; padding: 12px; background: var(--ph-error-container); border-radius: var(--ph-ref-shape-sm); animation: smm-slideInUp .2s; }
.smm-decline-box textarea { width: 100%; border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-sm); padding: 8px 10px; font-family: var(--smm-body); font-size: 13px; resize: vertical; min-height: 60px; outline: none; background: var(--ph-surface); color: var(--ph-on-surface); }
.smm-decline-box textarea:focus { border-color: var(--ph-primary); }

/* ── empty states ── */
.smm-empty-state { text-align: center; padding: 60px 20px; }
.smm-empty-ic { width: 64px; height: 64px; border-radius: 50%; background: var(--ph-success-container); color: var(--ph-success); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.smm-empty-t { font-family: var(--smm-brand); font-size: 17px; font-weight: 800; color: var(--ph-on-surface); }
.smm-empty-s { font-family: var(--smm-body); font-size: 13.5px; color: var(--ph-on-surface-variant); margin-top: 6px; }

/* status-system legend */
.smm-legend-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.smm-legend-item { background: var(--ph-surface); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); padding: 13px; }
.smm-legend-item .smm-ll { font-family: var(--smm-body); font-size: 11.5px; color: var(--ph-on-surface-variant); margin-top: 8px; line-height: 1.4; }

/* mobile agenda */
.smm-agenda-day { margin-bottom: 18px; }
.smm-agenda-date { font-family: var(--smm-brand); font-size: 13px; font-weight: 800; color: var(--ph-on-surface); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.smm-agenda-date .smm-wd { font-family: var(--smm-mono); font-size: 11px; font-weight: 600; color: var(--ph-on-surface-variant); text-transform: uppercase; }

/* ════ COMPOSER ════ */
.smm-composer { max-width: 1320px; margin: 0 auto; background: var(--ph-surface); border-radius: var(--ph-ref-shape-lg); box-shadow: var(--ph-sys-elevation-3); overflow: hidden; display: flex; flex-direction: column; }
.smm-cmp-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid var(--ph-outline-variant); }
.smm-cmp-htitle { font-family: var(--smm-brand); font-size: 19px; font-weight: 900; color: var(--ph-on-surface); }
.smm-cmp-hsub { font-family: var(--smm-body); font-size: 12.5px; color: var(--ph-on-surface-variant); margin-top: 1px; }
.smm-cmp-body { display: flex; min-height: 0; }
.smm-cmp-edit { flex: 1; min-width: 0; padding: 22px; overflow-y: auto; border-right: 1px solid var(--ph-outline-variant); }
.smm-cmp-preview { width: 430px; flex: 0 0 430px; background: var(--ph-surface-container); padding: 20px; overflow-y: auto; }
.smm-cmp-footer { display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--ph-outline-variant); background: var(--ph-surface-container-low); flex-wrap: wrap; }
.smm-cmp-footer .smm-spacer { flex: 1; }
.smm-blk { margin-bottom: 22px; }

/* platform targets */
.smm-pf-targets { display: flex; gap: 10px; flex-wrap: wrap; }
.smm-pf-target { display: flex; align-items: center; gap: 10px; padding: 11px 15px 11px 12px; border: 1.5px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); background: var(--ph-surface); cursor: pointer; transition: all .15s; }
.smm-pf-target.smm-on { border-color: var(--ph-primary); background: var(--ph-primary-container); }
.smm-pf-target.smm-disabled { opacity: .5; cursor: not-allowed; }
.smm-pf-target .smm-pfi { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; }
.smm-pf-target .smm-nm { font-family: var(--smm-brand); font-size: 13.5px; font-weight: 700; color: var(--ph-on-surface); }
.smm-pf-target .smm-sub { font-family: var(--smm-body); font-size: 11px; color: var(--ph-on-surface-variant); }
.smm-pf-target .smm-tick { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--ph-outline-variant); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: auto; }
.smm-pf-target.smm-on .smm-tick { background: var(--ph-primary); border-color: var(--ph-primary); color: var(--ph-on-primary); }
.smm-pfi-fb { background: #1877F2; }
.smm-pfi-ig { background: linear-gradient(135deg, #feda75, #d62976 45%, #962fbf 80%, #4f5bd5); }
.smm-pfi-tt { background: #000; }

/* AI brief bar */
.smm-ai-bar { border: 1.5px solid var(--ph-primary); border-radius: var(--ph-ref-shape-md); overflow: hidden; background: linear-gradient(135deg, var(--ph-primary-container), var(--ph-surface)); }
.smm-ai-bar-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--ph-outline-variant); color: var(--ph-primary); }
.smm-ai-bar-head .smm-t { font-family: var(--smm-brand); font-size: 13px; font-weight: 700; color: var(--ph-on-primary-container); }
.smm-ai-bar-body { padding: 12px 14px; display: flex; gap: 10px; align-items: flex-end; }
.smm-ai-input { flex: 1; border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-sm); padding: 9px 12px; font-family: var(--smm-body); font-size: 13px; outline: none; background: var(--ph-surface); color: var(--ph-on-surface); resize: none; min-height: 38px; }
.smm-ai-input:focus { border-color: var(--ph-primary); }
.smm-ai-suggest { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 14px 12px; }
.smm-ai-chip { font-family: var(--smm-brand); font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--ph-ref-shape-full); background: var(--ph-surface); border: 1px solid var(--ph-outline-variant); color: var(--ph-primary); cursor: pointer; transition: all .15s; }
.smm-ai-chip:hover { background: var(--ph-primary-container); border-color: var(--ph-primary); }

/* caption editor */
.smm-cap-box { width: 100%; border: 1.5px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); padding: 14px; font-family: var(--smm-body); font-size: 14.5px; line-height: 1.55; color: var(--ph-on-surface); outline: none; resize: vertical; min-height: 130px; background: var(--ph-surface); }
.smm-cap-box:focus { border-color: var(--ph-primary); }
.smm-cap-toolbar { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.smm-cap-count { margin-left: auto; font-family: var(--smm-mono); font-size: 11px; font-weight: 600; color: var(--ph-on-surface-variant); }
.smm-cap-count.smm-warn { color: var(--ph-secondary); }

/* per-platform override */
.smm-override-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: var(--ph-surface-container-low); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); cursor: pointer; margin-top: 12px; }
.smm-override-toggle .smm-lbl { font-family: var(--smm-brand); font-size: 12.5px; font-weight: 700; color: var(--ph-on-surface); }
.smm-override-toggle .smm-hint { font-family: var(--smm-body); font-size: 11.5px; color: var(--ph-on-surface-variant); margin-top: 1px; }
.smm-override-panel { margin-top: 12px; animation: smm-slideInUp .25s ease-out; }
.smm-ov-tabs { display: flex; border-bottom: 1px solid var(--ph-outline-variant); margin-bottom: 12px; }
.smm-ov-tab { display: flex; align-items: center; gap: 7px; padding: 9px 14px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-family: var(--smm-brand); font-size: 12.5px; font-weight: 600; color: var(--ph-on-surface-variant); }
.smm-ov-tab.smm-active { color: var(--ph-primary); border-bottom-color: var(--ph-primary); }
.smm-syncdot { width: 6px; height: 6px; border-radius: 50%; background: var(--ph-secondary); }
.smm-pfi-sm { width: 16px; height: 16px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }

/* media picker */
.smm-media-strip { display: flex; gap: 10px; flex-wrap: wrap; }
.smm-media-thumb { width: 96px; height: 96px; border-radius: var(--ph-ref-shape-sm); background: var(--ph-surface-container); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--ph-outline); border: 1px solid var(--ph-outline-variant); }
.smm-media-thumb .smm-rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--ph-scrim, rgba(0, 0, 0, .55)); color: #fff; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.smm-media-thumb .smm-vid { position: absolute; bottom: 5px; left: 5px; background: var(--ph-scrim, rgba(0, 0, 0, .6)); color: #fff; font-family: var(--smm-mono); font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.smm-media-add { width: 96px; height: 96px; border-radius: var(--ph-ref-shape-sm); border: 1.5px dashed var(--ph-outline-variant); background: var(--ph-surface-container-low); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; color: var(--ph-on-surface-variant); transition: all .15s; }
.smm-media-add:hover { border-color: var(--ph-primary); color: var(--ph-primary); }
.smm-media-add .smm-t { font-family: var(--smm-brand); font-size: 10.5px; font-weight: 600; }

/* platform options card */
.smm-opt-card { border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); padding: 14px; background: var(--ph-surface-container-low); }
.smm-opt-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
.smm-opt-row + .smm-opt-row { border-top: 1px solid var(--ph-surface-container); }
.smm-opt-row .smm-ol { font-family: var(--smm-body); font-size: 13px; color: var(--ph-on-surface); }
.smm-mini-input { border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-sm); padding: 7px 10px; font-family: var(--smm-body); font-size: 13px; outline: none; background: var(--ph-surface); color: var(--ph-on-surface); width: 170px; }
.smm-mini-input:focus { border-color: var(--ph-primary); }

/* schedule */
.smm-sched-mode { display: flex; gap: 8px; margin-bottom: 12px; }
.smm-sched-opt { flex: 1; padding: 12px; border: 1.5px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); background: var(--ph-surface); cursor: pointer; text-align: center; transition: all .15s; }
.smm-sched-opt.smm-on { border-color: var(--ph-primary); background: var(--ph-primary-container); }
.smm-sched-opt .smm-t { font-family: var(--smm-brand); font-size: 13px; font-weight: 700; color: var(--ph-on-surface); }
.smm-sched-opt .smm-s { font-family: var(--smm-body); font-size: 11px; color: var(--ph-on-surface-variant); margin-top: 2px; }
.smm-sched-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.smm-sched-field { flex: 1; min-width: 140px; }
.smm-sched-input { width: 100%; border: 1.5px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-sm); padding: 10px 12px; font-family: var(--smm-mono); font-size: 13px; font-weight: 600; outline: none; background: var(--ph-surface); color: var(--ph-on-surface); }
.smm-sched-input:focus { border-color: var(--ph-primary); }

/* preview pane */
.smm-pv-switcher { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.smm-pv-sw { display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: var(--ph-ref-shape-full); border: 1px solid var(--ph-outline-variant); background: var(--ph-surface); cursor: pointer; font-family: var(--smm-brand); font-size: 12px; font-weight: 600; color: var(--ph-on-surface-variant); transition: all .15s; }
.smm-pv-sw.smm-active { background: var(--ph-inverse-surface, var(--ph-on-surface)); color: var(--ph-inverse-on-surface, #fff); border-color: var(--ph-on-surface); }
.smm-pv-label { font-family: var(--smm-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ph-on-surface-variant); margin-bottom: 10px; text-align: center; }
.smm-pv-empty { padding: 30px 14px; text-align: center; color: var(--ph-on-surface-variant); font-family: var(--smm-body); font-size: 13px; }
.smm-pv-divergence { margin-top: 14px; padding: 10px 12px; background: var(--ph-surface); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); font-family: var(--smm-body); font-size: 11.5px; color: var(--ph-on-surface-variant); line-height: 1.45; }
.smm-pv-divergence b { color: var(--ph-on-surface); font-family: var(--smm-brand); font-weight: 700; }

/* FB preview (platform-faithful chrome — neutral surfaces + brand blue accents only) */
.smm-fb-post { background: var(--ph-surface); border-radius: 10px; box-shadow: var(--ph-sys-elevation-1); overflow: hidden; animation: smm-popIn .25s; }
.smm-fb-head { display: flex; align-items: center; gap: 9px; padding: 12px; }
.smm-fb-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--ph-primary), var(--ph-success)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--smm-brand); font-weight: 800; font-size: 15px; }
.smm-fb-name { font-weight: 700; font-size: 14px; color: var(--ph-on-surface); font-family: var(--smm-brand); }
.smm-fb-meta { font-size: 12px; color: var(--ph-on-surface-variant); display: flex; align-items: center; gap: 4px; }
.smm-fb-text { padding: 0 12px 10px; font-size: 14px; line-height: 1.4; color: var(--ph-on-surface); white-space: pre-wrap; }
.smm-pv-img { width: 100%; aspect-ratio: 1.91 / 1; background: var(--ph-surface-container); display: flex; align-items: center; justify-content: center; color: var(--ph-outline); }
.smm-pv-img.smm-square { aspect-ratio: 1 / 1; }
.smm-fb-cta { margin: 10px 12px; padding: 9px; border-radius: 6px; background: var(--ph-surface-container); text-align: center; font-weight: 700; font-size: 13px; color: var(--ph-on-surface); font-family: var(--smm-brand); }
.smm-fb-actions { display: flex; border-top: 1px solid var(--ph-outline-variant); padding: 4px 12px; }
.smm-fb-actions div { flex: 1; text-align: center; padding: 7px; font-size: 13px; font-weight: 600; color: var(--ph-on-surface-variant); }

/* IG feed preview */
.smm-ig-post { background: var(--ph-surface); border-radius: 10px; border: 1px solid var(--ph-outline-variant); overflow: hidden; animation: smm-popIn .25s; }
.smm-ig-head { display: flex; align-items: center; gap: 9px; padding: 11px 12px; }
.smm-ig-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #feda75, #d62976, #4f5bd5); padding: 2px; }
.smm-ig-av div { width: 100%; height: 100%; border-radius: 50%; background: var(--ph-primary); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--smm-brand); font-weight: 800; font-size: 12px; }
.smm-ig-name { font-weight: 700; font-size: 13px; color: var(--ph-on-surface); font-family: var(--smm-brand); }
.smm-ig-img { position: relative; }
.smm-ig-carousel-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; }
.smm-ig-carousel-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .6); }
.smm-ig-carousel-dots span.smm-on { background: #3897f0; }
.smm-ig-actions { display: flex; gap: 14px; padding: 10px 12px 6px; font-size: 20px; color: var(--ph-on-surface); }
.smm-ig-caption { padding: 0 12px 12px; font-size: 13px; line-height: 1.4; color: var(--ph-on-surface); }
.smm-ig-caption b { font-weight: 700; }

/* IG reel/story preview (9:16) */
.smm-ig-reel { aspect-ratio: 9 / 16; max-height: 420px; margin: 0 auto; border-radius: 14px; background: linear-gradient(160deg, #3a2a52, #1a1320); position: relative; overflow: hidden; animation: smm-popIn .25s; box-shadow: var(--ph-sys-elevation-3); }
.smm-ig-reel .smm-media-fill { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .4); }
.smm-ig-reel .smm-topbar-r { position: absolute; top: 0; left: 0; right: 0; padding: 12px; display: flex; align-items: center; gap: 8px; color: #fff; z-index: 2; }
.smm-ig-reel .smm-prog { position: absolute; top: 6px; left: 12px; right: 12px; height: 2px; background: rgba(255, 255, 255, .3); border-radius: 2px; z-index: 2; }
.smm-ig-reel .smm-prog div { width: 35%; height: 100%; background: #fff; border-radius: 2px; }
.smm-ig-reel .smm-ravt { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #feda75, #d62976); padding: 1.5px; }
.smm-ig-reel .smm-ravt div { width: 100%; height: 100%; border-radius: 50%; background: var(--ph-primary); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--smm-brand); font-weight: 800; font-size: 10px; }
.smm-ig-reel .smm-rname { font-size: 12px; font-weight: 700; }
.smm-ig-reel .smm-rcap { position: absolute; bottom: 16px; left: 12px; right: 60px; color: #fff; font-size: 12.5px; line-height: 1.35; z-index: 2; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.smm-ig-reel .smm-rside { position: absolute; bottom: 20px; right: 10px; display: flex; flex-direction: column; gap: 16px; align-items: center; color: #fff; font-size: 20px; z-index: 2; }

/* AI generating overlay */
.smm-ai-generating { padding: 30px 14px; text-align: center; }
.smm-ai-dots { display: inline-flex; gap: 6px; margin-bottom: 14px; }
.smm-ai-dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--ph-primary); animation: smm-dotBounce 1.4s infinite; }
.smm-ai-dots span:nth-child(2) { animation-delay: .2s; }
.smm-ai-dots span:nth-child(3) { animation-delay: .4s; }
.smm-ai-gen-text { font-family: var(--smm-brand); font-size: 13.5px; font-weight: 600; color: var(--ph-primary); }
.smm-skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--ph-surface-container-lowest), var(--ph-surface-container) 50%, var(--ph-surface-container-lowest)); background-size: 400px 100%; animation: smm-shimmer 1.5s infinite linear; margin-bottom: 9px; }

/* AI edit popover */
.smm-ai-edit-pop { position: absolute; z-index: 30; background: var(--ph-surface); border-radius: var(--ph-ref-shape-md); box-shadow: var(--ph-sys-elevation-3); border: 1px solid var(--ph-outline-variant); width: 280px; padding: 6px; animation: smm-popIn .2s; top: calc(100% + 6px); left: 0; }
.smm-ai-edit-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--ph-ref-shape-sm); cursor: pointer; transition: all .12s; color: var(--ph-primary); }
.smm-ai-edit-opt:hover { background: var(--ph-primary-container); }
.smm-ai-edit-opt .smm-t { font-family: var(--smm-brand); font-size: 13px; font-weight: 600; color: var(--ph-on-surface); }
.smm-ai-edit-opt .smm-s { font-family: var(--smm-body); font-size: 11px; color: var(--ph-on-surface-variant); }
.smm-scrim { position: fixed; inset: 0; background: var(--ph-scrim-light, rgba(0, 0, 0, .25)); z-index: 25; }

/* ════ POST DETAIL ════ */
.smm-detail { max-width: 960px; margin: 0 auto; }
.smm-dt-back { display: flex; align-items: center; gap: 7px; font-family: var(--smm-brand); font-size: 13px; font-weight: 600; color: var(--ph-on-surface-variant); cursor: pointer; margin-bottom: 16px; background: none; border: none; }
.smm-dt-hero { background: var(--ph-surface); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-lg); padding: 20px; margin-bottom: 16px; box-shadow: var(--ph-sys-elevation-1); }
.smm-dt-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.smm-dt-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.smm-dt-when { font-family: var(--smm-mono); font-size: 13px; font-weight: 600; color: var(--ph-on-surface); display: flex; align-items: center; gap: 7px; }
.smm-dt-when .smm-ic { color: var(--ph-on-surface-variant); }

.smm-action-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--ph-ref-shape-md); margin-top: 16px; flex-wrap: wrap; }
.smm-action-banner .smm-txt { flex: 1; min-width: 180px; }
.smm-action-banner .smm-t1 { font-family: var(--smm-brand); font-size: 14px; font-weight: 700; }
.smm-action-banner .smm-t2 { font-family: var(--smm-body); font-size: 12.5px; margin-top: 2px; opacity: .85; }
.smm-ab-scheduled, .smm-ab-publishing { background: var(--ph-primary-container); } .smm-ab-scheduled .smm-t1, .smm-ab-publishing .smm-t1 { color: var(--ph-on-primary-container); } .smm-ab-scheduled .smm-t2, .smm-ab-publishing .smm-t2 { color: var(--ph-on-primary-container); }
.smm-ab-failed { background: var(--ph-error-container); } .smm-ab-failed .smm-t1, .smm-ab-failed .smm-t2 { color: var(--ph-on-error-container); }
.smm-ab-published { background: var(--ph-success-container); } .smm-ab-published .smm-t1, .smm-ab-published .smm-t2 { color: var(--ph-on-secondary-container); }
.smm-ab-pending { background: var(--ph-secondary-container); } .smm-ab-pending .smm-t1, .smm-ab-pending .smm-t2 { color: var(--ph-on-tertiary-container); }
.smm-ab-spin { width: 20px; height: 20px; border: 2.5px solid var(--ph-primary-container); border-top-color: var(--ph-primary); border-radius: 50%; animation: smm-spin .7s linear infinite; flex-shrink: 0; }

.smm-dt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.smm-sec-card { background: var(--ph-surface); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); padding: 18px; box-shadow: var(--ph-sys-elevation-1); }
.smm-sec-card.smm-full { grid-column: 1 / -1; }
.smm-sec-h { font-family: var(--smm-brand); font-size: 13px; font-weight: 800; color: var(--ph-on-surface); margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.smm-dt-caption { font-family: var(--smm-body); font-size: 14px; line-height: 1.6; color: var(--ph-on-surface); white-space: pre-wrap; }
.smm-dt-media { margin-top: 14px; height: 200px; border-radius: var(--ph-ref-shape-md); background: var(--ph-surface-container); display: flex; align-items: center; justify-content: center; color: var(--ph-outline); position: relative; }
.smm-dt-media .smm-cnt { position: absolute; bottom: 10px; right: 10px; font-family: var(--smm-mono); font-size: 11px; font-weight: 700; background: var(--ph-scrim, rgba(0, 0, 0, .5)); color: #fff; padding: 3px 9px; border-radius: var(--ph-ref-shape-full); }

.smm-kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; }
.smm-kv-row + .smm-kv-row { border-top: 1px solid var(--ph-surface-container); }
.smm-kv-k { font-family: var(--smm-brand); font-size: 12px; font-weight: 600; color: var(--ph-on-surface-variant); display: flex; align-items: center; gap: 7px; }
.smm-kv-v { font-family: var(--smm-body); font-size: 13px; color: var(--ph-on-surface); font-weight: 500; }
.smm-kv-v.smm-mono { font-family: var(--smm-mono); font-size: 12px; }
.smm-kv-indent { padding-left: 26px; }

.smm-insights-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.smm-ins-card { background: var(--ph-surface-container-low); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-sm); padding: 13px; }
.smm-ins-card .smm-v { font-family: var(--smm-mono); font-size: 21px; font-weight: 700; color: var(--ph-on-surface); }
.smm-ins-card .smm-l { font-family: var(--smm-brand); font-size: 10.5px; font-weight: 600; color: var(--ph-on-surface-variant); text-transform: uppercase; letter-spacing: .3px; margin-top: 3px; }
.smm-ins-card .smm-d { font-family: var(--smm-body); font-size: 10.5px; font-weight: 600; margin-top: 4px; display: flex; align-items: center; gap: 3px; }
.smm-ins-card .smm-d.smm-up { color: var(--ph-success); }
.smm-ins-card .smm-d.smm-down { color: var(--ph-error); }

.smm-permalink-bar { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: var(--ph-surface-container-low); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); margin-top: 14px; }
.smm-permalink-bar .smm-url { flex: 1; font-family: var(--smm-mono); font-size: 12px; color: var(--ph-on-surface-variant); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* timeline */
.smm-tl { position: relative; padding-left: 8px; }
.smm-tl-item { display: flex; gap: 14px; padding-bottom: 18px; position: relative; }
.smm-tl-item:last-child { padding-bottom: 0; }
.smm-tl-item::before { content: ''; position: absolute; left: 8px; top: 20px; bottom: -2px; width: 2px; background: var(--ph-outline-variant); }
.smm-tl-item:last-child::before { display: none; }
.smm-tl-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; z-index: 1; margin-top: 2px; }
.smm-tl-dot.smm-ok { background: var(--ph-success); color: var(--ph-on-secondary); }
.smm-tl-dot.smm-err { background: var(--ph-error); color: var(--ph-on-error); }
.smm-tl-dot.smm-info { background: var(--ph-primary); color: var(--ph-on-primary); }
.smm-tl-dot.smm-neutral { background: var(--ph-surface-container); border: 2px solid var(--ph-outline-variant); }
.smm-tl-body { flex: 1; }
.smm-tl-title { font-family: var(--smm-brand); font-size: 13px; font-weight: 700; color: var(--ph-on-surface); }
.smm-tl-meta { font-family: var(--smm-mono); font-size: 11px; color: var(--ph-on-surface-variant); margin-top: 2px; }
.smm-tl-detail { font-family: var(--smm-body); font-size: 12px; color: var(--ph-on-surface-variant); margin-top: 4px; line-height: 1.45; }
.smm-tl-err-detail { font-family: var(--smm-mono); font-size: 11px; color: var(--ph-error); background: var(--ph-error-container); padding: 7px 10px; border-radius: var(--ph-ref-shape-sm); margin-top: 6px; }

.smm-decline-note { padding: 12px 14px; background: var(--ph-error-container); border-radius: var(--ph-ref-shape-md); margin-top: 12px; }
.smm-decline-note .smm-who { font-family: var(--smm-brand); font-size: 11.5px; font-weight: 700; color: var(--ph-on-error-container); margin-bottom: 4px; }
.smm-decline-note .smm-what { font-family: var(--smm-body); font-size: 13px; color: var(--ph-on-error-container); line-height: 1.45; }

/* ════ CONNECT ACCOUNTS ════ */
.smm-connect { max-width: 600px; margin: 0 auto; }
.smm-cn-card { background: var(--ph-surface); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-lg); padding: 24px; box-shadow: var(--ph-sys-elevation-1); animation: smm-slideInUp .25s; }
.smm-steps { display: flex; align-items: center; margin-bottom: 24px; }
.smm-step { display: flex; align-items: center; gap: 8px; }
.smm-step .smm-num { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--smm-brand); font-size: 12px; font-weight: 700; flex-shrink: 0; }
.smm-step.smm-done .smm-num { background: var(--ph-success); color: var(--ph-on-secondary); }
.smm-step.smm-active .smm-num { background: var(--ph-primary); color: var(--ph-on-primary); }
.smm-step.smm-todo .smm-num { background: var(--ph-surface-container); color: var(--ph-on-surface-variant); }
.smm-step .smm-lbl { font-family: var(--smm-brand); font-size: 12px; font-weight: 600; color: var(--ph-on-surface); }
.smm-step.smm-todo .smm-lbl { color: var(--ph-on-surface-variant); }
.smm-step-line { flex: 1; height: 2px; background: var(--ph-outline-variant); margin: 0 10px; }
.smm-step-line.smm-done { background: var(--ph-success); }

.smm-cn-icon-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 18px; }
.smm-cn-big-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.smm-cn-link-dot { color: var(--ph-outline); }
.smm-cn-title { font-family: var(--smm-brand); font-size: 19px; font-weight: 800; text-align: center; color: var(--ph-on-surface); }
.smm-cn-sub { font-family: var(--smm-body); font-size: 13.5px; color: var(--ph-on-surface-variant); text-align: center; margin-top: 8px; line-height: 1.5; }
.smm-cn-perms { background: var(--ph-surface-container-low); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); padding: 14px; margin: 18px 0; }
.smm-cn-perm { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; }
.smm-cn-perm .smm-pc { width: 20px; height: 20px; border-radius: 50%; background: var(--ph-success-container); color: var(--ph-success); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.smm-cn-perm .smm-pt { font-family: var(--smm-body); font-size: 13px; color: var(--ph-on-surface); line-height: 1.4; }

.smm-page-opt { display: flex; align-items: center; gap: 13px; padding: 13px; border: 1.5px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); cursor: pointer; margin-bottom: 10px; transition: all .15s; }
.smm-page-opt:hover { border-color: var(--ph-primary); }
.smm-page-opt.smm-on { border-color: var(--ph-primary); background: var(--ph-primary-container); }
.smm-page-av { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, var(--ph-primary), var(--ph-success)); display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--smm-brand); font-weight: 800; font-size: 17px; flex-shrink: 0; }
.smm-page-info { flex: 1; min-width: 0; }
.smm-page-name { font-family: var(--smm-brand); font-size: 14px; font-weight: 700; color: var(--ph-on-surface); }
.smm-page-meta { font-family: var(--smm-body); font-size: 12px; color: var(--ph-on-surface-variant); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.smm-page-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ph-outline-variant); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.smm-page-opt.smm-on .smm-page-radio { border-color: var(--ph-primary); }
.smm-page-opt.smm-on .smm-page-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--ph-primary); }
.smm-ig-link-note { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--ph-success-container); border-radius: var(--ph-ref-shape-sm); font-family: var(--smm-body); font-size: 12px; color: var(--ph-on-secondary-container); margin-top: 4px; }

.smm-acct-card { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--ph-surface); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); margin-bottom: 12px; box-shadow: var(--ph-sys-elevation-1); }
.smm-acct-card.smm-expired { border-color: var(--ph-secondary); background: var(--ph-secondary-container); }
.smm-acct-body { flex: 1; min-width: 0; }
.smm-acct-name { font-family: var(--smm-brand); font-size: 14.5px; font-weight: 700; color: var(--ph-on-surface); display: flex; align-items: center; gap: 8px; }
.smm-acct-caps { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.smm-cap-pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--smm-brand); font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: var(--ph-ref-shape-full); background: var(--ph-surface-container); color: var(--ph-on-surface-variant); }
.smm-cap-pill.smm-on { background: var(--ph-success-container); color: var(--ph-on-secondary-container); }
.smm-conn-status { display: inline-flex; align-items: center; gap: 5px; font-family: var(--smm-brand); font-size: 11.5px; font-weight: 700; }
.smm-conn-status.smm-active { color: var(--ph-success); }
.smm-conn-status.smm-expired { color: var(--ph-secondary); }
.smm-conn-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
.smm-reconnect-banner { display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: var(--ph-secondary-container); border-radius: var(--ph-ref-shape-md); margin-bottom: 16px; }
.smm-reconnect-banner .smm-txt { flex: 1; }
.smm-reconnect-banner .smm-t1 { font-family: var(--smm-brand); font-size: 13.5px; font-weight: 700; color: var(--ph-on-tertiary-container); }
.smm-reconnect-banner .smm-t2 { font-family: var(--smm-body); font-size: 12px; color: var(--ph-on-tertiary-container); margin-top: 1px; }

/* ════ NAV EMPTY STATES ════ */
.smm-empty-wrap { max-width: 560px; margin: 40px auto; text-align: center; animation: smm-slideInUp .3s; }
.smm-empty-art { width: 96px; height: 96px; border-radius: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; }
.smm-empty-art.smm-connect { background: linear-gradient(135deg, var(--ph-primary-container), var(--ph-success-container)); color: var(--ph-primary); }
.smm-empty-art.smm-posts { background: linear-gradient(135deg, var(--ph-primary-container), var(--ph-success-container)); color: var(--ph-primary); }
.smm-empty-art.smm-approve { background: var(--ph-success-container); color: var(--ph-success); }
.smm-empty-art .smm-float { animation: smm-sparkleFloat 3s ease-in-out infinite; }
.smm-empty-big-t { font-family: var(--smm-brand); font-size: 22px; font-weight: 900; color: var(--ph-on-surface); }
.smm-empty-big-s { font-family: var(--smm-body); font-size: 14px; color: var(--ph-on-surface-variant); margin-top: 10px; line-height: 1.55; }
.smm-empty-actions { display: flex; gap: 10px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.smm-connect-platforms { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.smm-cp { display: flex; align-items: center; gap: 8px; padding: 9px 15px; background: var(--ph-surface); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-full); font-family: var(--smm-brand); font-size: 12.5px; font-weight: 600; color: var(--ph-on-surface); }

.smm-plan-card { background: linear-gradient(135deg, var(--ph-primary-container), var(--ph-success-container)); border: 1.5px solid var(--ph-primary); border-radius: var(--ph-ref-shape-lg); padding: 22px; margin-top: 24px; text-align: left; animation: smm-slideInUp .35s; }
.smm-plan-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.smm-plan-head .smm-pi { width: 42px; height: 42px; border-radius: 12px; background: var(--ph-primary); color: var(--ph-on-primary); display: flex; align-items: center; justify-content: center; }
.smm-plan-title { font-family: var(--smm-brand); font-size: 16px; font-weight: 800; color: var(--ph-on-primary-container); }
.smm-plan-sub { font-family: var(--smm-body); font-size: 12.5px; color: var(--ph-on-surface-variant); margin-top: 1px; }
.smm-plan-preview { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.smm-plan-mini { flex: 1; min-width: 90px; background: var(--ph-surface); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-sm); padding: 9px; }
.smm-plan-mini .smm-d { font-family: var(--smm-mono); font-size: 9.5px; font-weight: 700; color: var(--ph-on-surface-variant); text-transform: uppercase; }
.smm-plan-mini .smm-txt { font-family: var(--smm-body); font-size: 11px; color: var(--ph-on-surface); margin-top: 4px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ════ PAGE MANAGEMENT ════ */
.smm-pm-wrap { max-width: 880px; margin: 0 auto; }
.smm-pm-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.smm-pm-title { font-family: var(--smm-brand); font-size: 21px; font-weight: 900; color: var(--ph-on-surface); }
.smm-pm-sub { font-family: var(--smm-body); font-size: 13px; color: var(--ph-on-surface-variant); margin-top: 2px; }
.smm-phase-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--smm-brand); font-size: 10px; font-weight: 700; background: var(--ph-secondary-container); color: var(--ph-on-tertiary-container); padding: 3px 9px; border-radius: var(--ph-ref-shape-full); text-transform: uppercase; letter-spacing: .4px; }
.smm-pm-page-tabs { display: flex; gap: 8px; margin: 18px 0; flex-wrap: wrap; }
.smm-pm-pt { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--ph-ref-shape-full); border: 1px solid var(--ph-outline-variant); background: var(--ph-surface); cursor: pointer; font-family: var(--smm-brand); font-size: 12.5px; font-weight: 600; color: var(--ph-on-surface-variant); }
.smm-pm-pt.smm-active { background: var(--ph-primary-container); color: var(--ph-on-primary-container); border-color: var(--ph-primary); }

.smm-sync-banner { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--ph-ref-shape-md); margin-bottom: 18px; }
.smm-sync-banner.smm-drift { background: var(--ph-secondary-container); }
.smm-sync-banner.smm-synced { background: var(--ph-success-container); }
.smm-sync-banner.smm-syncing { background: var(--ph-primary-container); }
.smm-sync-banner .smm-txt { flex: 1; }
.smm-sync-banner .smm-t1 { font-family: var(--smm-brand); font-size: 14px; font-weight: 700; }
.smm-sync-banner.smm-drift .smm-t1 { color: var(--ph-on-tertiary-container); }
.smm-sync-banner.smm-synced .smm-t1 { color: var(--ph-on-secondary-container); }
.smm-sync-banner.smm-syncing .smm-t1 { color: var(--ph-on-primary-container); }
.smm-sync-banner .smm-t2 { font-family: var(--smm-body); font-size: 12.5px; margin-top: 2px; opacity: .85; }
.smm-sync-spin { width: 20px; height: 20px; border: 2.5px solid var(--ph-primary-container); border-top-color: var(--ph-primary); border-radius: 50%; animation: smm-spin .7s linear infinite; }

.smm-pm-field { background: var(--ph-surface); border: 1px solid var(--ph-outline-variant); border-radius: var(--ph-ref-shape-md); margin-bottom: 12px; overflow: hidden; }
.smm-pm-field.smm-drifted { border-color: var(--ph-secondary); }
.smm-pm-field-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--ph-surface-container); background: var(--ph-surface-container-low); }
.smm-pm-field-name { font-family: var(--smm-brand); font-size: 13px; font-weight: 700; color: var(--ph-on-surface); display: flex; align-items: center; gap: 8px; }
.smm-drift-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--smm-brand); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--ph-ref-shape-full); }
.smm-drift-tag.smm-out { background: var(--ph-secondary-container); color: var(--ph-on-tertiary-container); }
.smm-drift-tag.smm-ok { background: var(--ph-success-container); color: var(--ph-on-secondary-container); }
.smm-drift-tag.smm-locked { background: var(--ph-surface-container); color: var(--ph-on-surface-variant); }
.smm-pm-compare { display: grid; grid-template-columns: 1fr 1fr; }
.smm-pm-col { padding: 14px 16px; }
.smm-pm-col + .smm-pm-col { border-left: 1px solid var(--ph-surface-container); }
.smm-pm-col-label { font-family: var(--smm-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ph-on-surface-variant); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.smm-pm-col.smm-live .smm-pm-col-label { color: var(--ph-secondary); }
.smm-pm-val { font-family: var(--smm-body); font-size: 13.5px; color: var(--ph-on-surface); line-height: 1.5; }
.smm-pm-val.smm-diff { background: var(--ph-secondary-container); border-radius: 6px; padding: 2px 6px; display: inline-block; }
.smm-pm-val.smm-empty { color: var(--ph-outline); font-style: italic; }
.smm-pm-field.smm-locked .smm-pm-compare { opacity: .65; }
.smm-lock-row { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--ph-surface-container-low); font-family: var(--smm-body); font-size: 11.5px; color: var(--ph-on-surface-variant); }

/* ── responsive ── */
.smm-only-mobile { display: none; }
@media (max-width: 767px) {
  .smm-only-desktop { display: none !important; }
  .smm-only-mobile { display: block; }
}
@media (max-width: 1023px) {
  .smm-side-panel { display: none; }
}
@media (max-width: 640px) {
  .smm-cmp-body { flex-direction: column; }
  .smm-cmp-edit { border-right: none; border-bottom: 1px solid var(--ph-outline-variant); }
  .smm-cmp-preview { width: 100%; flex: none; }
  .smm-dt-grid { grid-template-columns: 1fr; }
  .smm-insights-grid { grid-template-columns: 1fr 1fr; }
  .smm-pm-compare { grid-template-columns: 1fr; }
  .smm-pm-col + .smm-pm-col { border-left: none; border-top: 1px solid var(--ph-surface-container); }
}
@keyframes venueDetailLoading_shimmerSlide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.venueDetailLoading_shimmer {
  position: relative;
  overflow: hidden;
  background: oklch(94% 0.005 321);
}

.venueDetailLoading_shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    oklch(100% 0 0 / 0.42) 50%,
    transparent 100%
  );
  animation: venueDetailLoading_shimmerSlide 1.25s ease-in-out infinite;
}
/* Chat Inbox – scoped scrollbar and message bubble animation */

.chat-inbox-scroll::-webkit-scrollbar {
  width: 5px;
}

.chat-inbox-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.chat-inbox-scroll::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}

.chat-inbox-scroll::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

.chat-inbox-scroll {
  scrollbar-width: thin;
  scrollbar-color: #ddd transparent;
}

@keyframes message-bubble-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-bubble-animated {
  animation: message-bubble-in 0.3s ease forwards;
}

.chat-inbox-seg-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  margin-left: 4px;
}

.segmented-control__segment[data-active='true'] .chat-inbox-seg-count {
  background: #eceaef;
  color: #666;
}

.segmented-control__segment[data-active='false'] .chat-inbox-seg-count {
  background: #eceaef;
  color: #666;
}

/* Neutral segmented control overrides */
.chat-inbox-segmented-wrap .segmented-control {
  background: #f5f4f7;
  border-color: #eceaef;
}

.chat-inbox-segmented-wrap .segmented-control__segment[data-active='false'] {
  color: #666;
}

.chat-inbox-segmented-wrap .segmented-control__segment[data-active='true'] {
  background: #fff !important;
  color: #1a1a2e !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* AI Draft & Quick Actions */
@keyframes ai-draft-fade-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ai-draft-fade-in {
  animation: ai-draft-fade-in 0.3s ease forwards;
}

@keyframes ai-draft-shimmer-kf {
  from {
    background-position: -200% 0;
  }
  to {
    background-position: 200% 0;
  }
}

.ai-draft-shimmer {
  background: linear-gradient(
    90deg,
    #ede8f5 25%,
    #f5f0ff 50%,
    #ede8f5 75%
  );
  background-size: 200% 100%;
  animation: ai-draft-shimmer-kf 1.5s infinite linear;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quick-actions-toast {
  animation: toast-in 0.2s ease forwards;
}
/**
 * POS cart page scope — JetBrains Mono applies only inside `.cartPosRoot`
 * via `.cartPosMono`, not global typeface tokens.
 */
._cartPosRoot_paglq_2 {
  --cart-pos-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --cart-pos-category-accent: var(--ph-primary);
  --cart-pos-category-selected-bg: color-mix(
    in srgb,
    var(--cart-pos-category-accent) 12%,
    var(--ph-surface)
  );
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

._cartPosMono_paglq_3 {
  font-family: var(--cart-pos-font-mono);
}

._categoryBrowseLabel_paglq_24 {
  font-family: var(--cart-pos-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ph-on-surface-variant);
}

._categoryList_paglq_33 {
  padding: 4px 10px 8px;
}

._categoryItem_paglq_37 {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  margin-bottom: 2px;
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.12s ease;
}

._categoryItem_paglq_37:hover {
  background: color-mix(in srgb, var(--cart-pos-category-accent) 6%, var(--ph-surface));
}

._categoryItemSelected_paglq_57 {
  background: var(--cart-pos-category-selected-bg);
}

._categoryItemIndicator_paglq_61 {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: -6px;
  width: 3px;
  border-radius: 9999px;
  background: var(--cart-pos-category-accent);
}

._categoryItemIcon_paglq_71 {
  display: flex;
  height: 20px;
  width: 20px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: color-mix(in srgb, var(--cart-pos-category-accent) 18%, var(--ph-surface));
  font-size: 11px;
  line-height: 1;
  color: var(--cart-pos-category-accent);
}

._categoryItemSelected_paglq_57 ._categoryItemIcon_paglq_71 {
  background: var(--cart-pos-category-accent);
  color: var(--ph-on-primary);
}

._categoryItemLabel_paglq_90 {
  min-width: 0;
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.1px;
  color: var(--ph-on-surface-variant);
}

._categoryItemSelected_paglq_57 ._categoryItemLabel_paglq_90 {
  font-weight: 800;
  color: var(--ph-on-surface);
}

._categoryCount_paglq_108 {
  flex-shrink: 0;
  font-family: var(--cart-pos-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--ph-on-surface-variant);
}

._categoryItemSelected_paglq_57 ._categoryCount_paglq_108 {
  padding: 1px 6px;
  border-radius: 9999px;
  background: var(--ph-surface);
  color: var(--cart-pos-category-accent);
}

._productToolbar_paglq_124 {
  flex-shrink: 0;
  border-bottom: 1px solid var(--ph-outline-variant);
  background: var(--ph-surface);
}

/* Canvas behind product cards — design: light gray, not pure white (BW list/table page bg) */
._productGridScroll_paglq_131 {
  min-height: 0;
  flex: 1 1 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ph-surface-container-low);
}

._operationalChipLabel_paglq_139 {
  font-family: var(--cart-pos-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Operational strip: venue chip (icon + name + channel pill) ── */
._venueChip_paglq_148 {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--ph-primary) 28%, transparent);
  background: color-mix(in srgb, var(--ph-primary) 8%, var(--ph-surface));
}

._venueChipIcon_paglq_159 {
  display: flex;
  flex-shrink: 0;
  color: var(--ph-primary);
}

._venueChipName_paglq_165 {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.1px;
  color: var(--ph-on-surface);
}

._venueChannelPill_paglq_176 {
  flex-shrink: 0;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--ph-primary) 28%, transparent);
  background: var(--ph-surface);
  font-family: var(--cart-pos-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ph-primary);
}

/* ── Cart panel header: accent bar + eyebrow + order line ── */
._cartHeader_paglq_191 {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
  border-bottom: 1px solid var(--ph-outline-variant);
  background: var(--ph-surface-low);
  padding: 12px 16px;
}

._cartHeaderIdentity_paglq_201 {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

._cartHeaderAccent_paglq_207 {
  width: 4px;
  flex-shrink: 0;
  border-radius: 2px;
  background: linear-gradient(
    180deg,
    var(--ph-primary) 0%,
    color-mix(in srgb, var(--ph-primary) 50%, #1a0b33) 100%
  );
}

._cartHeaderEyebrow_paglq_218 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cart-pos-font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ph-on-surface-variant);
}

._cartHeaderNewPill_paglq_230 {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--ph-primary);
  color: var(--ph-on-primary);
  font-family: var(--cart-pos-font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

._cartHeaderTitle_paglq_241 {
  margin-top: 1px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ph-on-surface);
}

/* ── Cart line items: bordered cards (thumb + name/summary + price/qty) ── */
._cartLineItemList_paglq_250 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 12px;
}

._cartLineItem_paglq_250 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--ph-outline-variant);
  border-radius: 9px;
  background: var(--ph-surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

._cartLineItemThumb_paglq_268 {
  display: flex;
  height: 38px;
  width: 38px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 7px;
  background: color-mix(in srgb, var(--ph-primary) 8%, var(--ph-surface));
  color: var(--ph-on-surface-variant);
}

._cartLineItemThumb_paglq_268 > * {
  height: 100%;
  width: 100%;
}

._cartLineItemBody_paglq_286 {
  display: flex;
  min-width: 0;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
}

._cartLineItemName_paglq_294 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--ph-on-surface);
}

._cartLineItemSummary_paglq_304 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ph-on-surface-variant);
}

._cartLineItemRight_paglq_314 {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 8px;
}

._cartLineItemPrice_paglq_321 {
  font-family: var(--cart-pos-font-mono);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.3px;
  white-space: nowrap;
  color: var(--ph-on-surface);
}

._cartEmptyState_paglq_330 {
  display: flex;
  min-height: 200px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 40px 16px;
  text-align: center;
}

._cartEmptyStateIcon_paglq_341 {
  color: color-mix(in srgb, var(--ph-on-surface-variant) 55%, transparent);
}

._cartEmptyStateTitle_paglq_345 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ph-on-surface-variant);
}

._cartEmptyStateHint_paglq_351 {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--ph-on-surface-variant) 75%, transparent);
}

._cartActionBar_paglq_356 {
  display: grid;
  flex-shrink: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  border-top: 1px solid var(--ph-outline-variant);
  padding: 10px 16px 12px;
  background: var(--ph-surface);
}

._cartActionButton_paglq_366 {
  display: flex;
  min-height: 52px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid var(--ph-outline-variant);
  border-radius: 8px;
  background: var(--ph-surface);
  cursor: pointer;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease;
  color: var(--ph-on-surface-variant);
}

._cartActionButton_paglq_366:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--ph-primary) 25%, var(--ph-outline-variant));
  background: color-mix(in srgb, var(--ph-primary) 4%, var(--ph-surface));
}

._cartActionButton_paglq_366:disabled {
  cursor: default;
  opacity: 0.45;
}

._cartActionButtonIcon_paglq_394 {
  font-size: 18px;
  line-height: 1;
  color: var(--ph-on-surface);
}

._cartActionButtonLabel_paglq_400 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
._terminal_1i6rd_1 {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  padding: 14px 16px 16px;
  color: var(--cart-terminal-text, #e8e0f5);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--ph-nav-bg) 92%, #0a0810) 0%,
    #0f0c14 55%,
    #0a0810 100%
  );
}

._terminal_1i6rd_1::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(255, 255, 255, 0.012) 3px,
    rgba(255, 255, 255, 0.012) 4px
  );
}

._terminalContent_1i6rd_30 {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._billBlock_1i6rd_38 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}

._billRow_1i6rd_45 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

._billRowLabel_1i6rd_52 {
  font-family: var(--cart-pos-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cart-terminal-label, #b5a3d4);
}

._billRowValue_1i6rd_61 {
  font-family: var(--cart-pos-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--cart-terminal-text, #e8e0f5);
}

._billRowValueMuted_1i6rd_68 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--cart-terminal-label-muted, #8b7aa8);
}

._billDivider_1i6rd_76 {
  height: 0;
  margin: 6px 0 2px;
  border-top: 1px dashed
    color-mix(in srgb, var(--cart-terminal-text-soft) 30%, transparent);
}

._totalDueBlock_1i6rd_83 {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

._totalDueMeta_1i6rd_91 {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

._totalDueLabel_1i6rd_97 {
  font-family: var(--cart-pos-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cart-terminal-label-muted, #8b7aa8);
}

._totalDueSubmeta_1i6rd_106 {
  font-size: 11px;
  font-weight: 500;
  color: var(--cart-terminal-text-soft, #c4b5e0);
}

._totalDueAmount_1i6rd_112 {
  display: flex;
  align-items: flex-start;
  gap: 1px;
  font-family: var(--cart-pos-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
  /* LED glow — matches design's `textShadow: 0 0 16px purpleBright` */
  text-shadow: 0 0 16px rgba(199, 176, 255, 0.53);
}

._totalDueCurrency_1i6rd_126 {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #fff;
}

._checkoutButton_1i6rd_134 {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border: none;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--ph-primary) 88%, white) 0%,
    var(--ph-primary) 48%,
    color-mix(in srgb, var(--ph-primary) 82%, #2a1848) 100%
  );
  cursor: pointer;
  color: #fff;
  box-shadow: 0 6px 18px
    color-mix(in srgb, var(--ph-primary) 53%, transparent);
  transition:
    filter 0.12s ease,
    opacity 0.12s ease;
}

/* Sweeping light shimmer — matches design's GradientShimmerButton. */
._checkoutButton_1i6rd_134::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: _cartCheckoutShimmer_1i6rd_1 2.5s linear infinite;
}

._checkoutButton_1i6rd_134:disabled::after {
  display: none;
}

._checkoutButton_1i6rd_134:hover:not(:disabled) {
  filter: brightness(1.06);
}

._checkoutButton_1i6rd_134:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
}

@keyframes _cartCheckoutShimmer_1i6rd_1 {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(100% + 200px) 0;
  }
}

._checkoutButtonLabel_1i6rd_200 {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

._checkoutButtonPrice_1i6rd_209 {
  position: relative;
  z-index: 1;
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.14);
  font-family: var(--cart-pos-font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

._checkoutButtonArrow_1i6rd_223 {
  position: relative;
  z-index: 1;
  display: flex;
  height: 28px;
  width: 28px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  color: #fff;
}

._saveOpenOrderButton_1i6rd_237 {
  border: none;
  background: transparent;
  padding: 4px 0 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--cart-terminal-text-soft, #c4b5e0);
  text-align: center;
  transition: color 0.12s ease;
}

._saveOpenOrderButton_1i6rd_237:hover:not(:disabled) {
  color: #fff;
}

._saveOpenOrderButton_1i6rd_237:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

._saveOpenOrderShortcut_1i6rd_258 {
  color: var(--cart-terminal-label-muted, #8b7aa8);
}

._terminalNoteWrap_1i6rd_262 {
  color: var(--cart-terminal-text-soft, #c4b5e0);
}

._terminalNoteWrap_1i6rd_262 .text-neutral-6,
._terminalNoteWrap_1i6rd_262 [class*='text-neutral'] {
  color: var(--cart-terminal-text-soft, #c4b5e0) !important;
}

._terminalNoteWrap_1i6rd_262 button {
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--cart-terminal-text, #e8e0f5) !important;
}

._terminalNoteWrap_1i6rd_262 .bg-grey-1 {
  background: rgba(255, 255, 255, 0.06) !important;
}
._panel_pd1zp_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

._scopeBar_pd1zp_7 {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

._scopeMeta_pd1zp_14 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
}

._grid_pd1zp_22 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

._fieldGrid_pd1zp_28 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

._field_pd1zp_28 {
  min-width: 0;
}

._fieldLabel_pd1zp_38 {
  margin-bottom: 5px;
  color: var(--ph-sys-color-on-surface-variant);
  font-family: var(--ph-sys-typescale-label-md-font, var(--ph-ref-typeface-body));
  font-size: var(--ph-sys-typescale-label-md-size, 12px);
  font-weight: var(--ph-sys-typescale-label-md-weight, 600);
  line-height: var(--ph-sys-typescale-label-md-line-height, 16px);
}

._fieldValue_pd1zp_47 {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--ph-sys-color-surface-container);
  border-radius: var(--ph-sys-shape-sm);
  background: var(--ph-sys-color-surface-container-high);
  color: var(--ph-sys-color-on-surface);
  padding: 7px 10px;
  font-family: var(--ph-sys-typescale-body-md-font, var(--ph-ref-typeface-body));
  font-size: var(--ph-sys-typescale-body-md-size, 13px);
  line-height: var(--ph-sys-typescale-body-md-line-height, 20px);
}

._emptyValue_pd1zp_62 {
  color: var(--ph-ref-palette-neutral60);
  font-style: italic;
}

._helperText_pd1zp_67 {
  color: var(--ph-sys-color-on-surface-variant);
  font-family: var(--ph-sys-typescale-body-sm-font, var(--ph-ref-typeface-body));
  font-size: var(--ph-sys-typescale-body-sm-size, 12px);
  line-height: var(--ph-sys-typescale-body-sm-line-height, 18px);
}

._statusPill_pd1zp_74,
._metaPill_pd1zp_75 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--ph-sys-shape-full);
  font-family: var(--ph-sys-typescale-label-md-font, var(--ph-ref-typeface-body));
  font-size: var(--ph-sys-typescale-label-md-size, 12px);
  font-weight: var(--ph-sys-typescale-label-md-weight, 600);
  line-height: var(--ph-sys-typescale-label-md-line-height, 16px);
  white-space: nowrap;
}

._statusPill_pd1zp_74 {
  padding: 4px 12px;
  border: 1px solid var(--ph-sys-color-outline-variant);
  background: var(--ph-ref-palette-neutral94);
  color: var(--ph-ref-palette-neutral45);
}

._statusDot_pd1zp_94 {
  width: 6px;
  height: 6px;
  border-radius: var(--ph-sys-shape-full);
  background: var(--ph-ref-palette-neutral60);
}

._statusActive_pd1zp_101 {
  background: var(--ph-ref-palette-tertiary94);
  color: var(--ph-sys-color-tertiary);
}

._statusActive_pd1zp_101 ._statusDot_pd1zp_94 {
  background: var(--ph-sys-color-tertiary);
}

._statusWarning_pd1zp_110 {
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-sys-color-secondary);
}

._statusWarning_pd1zp_110 ._statusDot_pd1zp_94 {
  background: var(--ph-sys-color-secondary);
}

._statusDanger_pd1zp_119 {
  background: var(--ph-sys-color-error-container);
  color: var(--ph-sys-color-error);
}

._statusDanger_pd1zp_119 ._statusDot_pd1zp_94 {
  background: var(--ph-sys-color-error);
}

._statusEditing_pd1zp_128 {
  background: var(--ph-ref-palette-primary94);
  color: var(--ph-sys-color-primary);
}

._statusEditing_pd1zp_128 ._statusDot_pd1zp_94 {
  background: var(--ph-sys-color-primary);
}

._metaPill_pd1zp_75 {
  padding: 3px 10px;
  border: 1px solid var(--ph-sys-color-outline-variant);
  background: var(--ph-sys-color-surface-container);
  color: var(--ph-ref-palette-neutral40);
}

._metaPillTeal_pd1zp_144 {
  border-color: var(--ph-ref-palette-tertiary80);
  background: var(--ph-ref-palette-tertiary94);
  color: var(--ph-sys-color-tertiary);
}

._metaPillOrange_pd1zp_150 {
  border-color: var(--ph-ref-palette-secondary80);
  background: var(--ph-ref-palette-secondary94);
  color: var(--ph-sys-color-secondary);
}

._idChip_pd1zp_156 {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--ph-sys-color-outline-variant);
  border-radius: var(--ph-sys-shape-sm);
  background: var(--ph-sys-color-surface-container);
  color: var(--ph-ref-palette-neutral40);
  padding: 5px 10px;
  font-family: var(--ph-sys-typography-family-mono, ui-monospace, Menlo, monospace);
  font-size: var(--ph-sys-typescale-mono-size, 11px);
  line-height: var(--ph-sys-typescale-mono-line-height, 16px);
  cursor: copy;
}

._idChip_pd1zp_156:hover {
  background: var(--ph-sys-color-surface-container-high);
}

._idChipText_pd1zp_176 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

._auditPivot_pd1zp_182 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1.5px solid var(--ph-ref-palette-primary80);
  border-radius: var(--ph-sys-shape-sm);
  background: var(--ph-ref-palette-primary97);
  color: var(--ph-sys-color-primary);
  padding: 5px 10px;
  font-family: var(--ph-sys-typescale-label-md-font, var(--ph-ref-typeface-body));
  font-size: var(--ph-sys-typescale-label-md-size, 12px);
  font-weight: var(--ph-sys-typescale-label-md-weight, 600);
  line-height: var(--ph-sys-typescale-label-md-line-height, 16px);
  text-decoration: none;
}

._auditPivot_pd1zp_182:hover {
  border-color: var(--ph-sys-color-primary);
  background: var(--ph-ref-palette-primary94);
  color: var(--ph-sys-color-primary);
}

._auditRefGroup_pd1zp_204 {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

._banner_pd1zp_211 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--ph-ref-palette-tertiary80);
  border-radius: var(--ph-sys-shape-md);
  background: var(--ph-ref-palette-tertiary94);
  color: var(--ph-sys-color-on-surface);
  padding: 10px 14px;
}

._bannerWarning_pd1zp_222 {
  border-color: var(--ph-ref-palette-secondary80);
  background: var(--ph-ref-palette-secondary94);
}

._bannerError_pd1zp_227 {
  border-color: var(--ph-sys-color-error);
  background: var(--ph-sys-color-error-container);
}

._bannerIcon_pd1zp_232 {
  color: var(--ph-sys-color-tertiary);
  font-size: 18px;
  line-height: 20px;
}

._bannerWarning_pd1zp_222 ._bannerIcon_pd1zp_232 {
  color: var(--ph-sys-color-secondary);
}

._bannerError_pd1zp_227 ._bannerIcon_pd1zp_232 {
  color: var(--ph-sys-color-error);
}

._bannerText_pd1zp_246 {
  margin: 0;
  color: var(--ph-sys-color-on-surface);
  font-family: var(--ph-sys-typescale-body-md-font, var(--ph-ref-typeface-body));
  font-size: var(--ph-sys-typescale-body-md-size, 13px);
  line-height: var(--ph-sys-typescale-body-md-line-height, 20px);
}

._blockerList_pd1zp_254 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._blockerCard_pd1zp_260 {
  border: 1px solid var(--ph-sys-color-outline-variant);
  border-radius: var(--ph-sys-shape-md);
  background: var(--ph-sys-color-surface);
  overflow: hidden;
}

._blockerHeader_pd1zp_267,
._issueRow_pd1zp_268 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

._blockerHeader_pd1zp_267 {
  padding: 10px 12px;
  background: var(--ph-sys-color-surface-container);
}

._issueList_pd1zp_281 {
  display: flex;
  flex-direction: column;
}

._issueRow_pd1zp_268 {
  padding: 10px 12px;
  border-top: 1px solid var(--ph-ref-palette-neutral94);
}

._issueMain_pd1zp_291 {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 4px;
}

._issueTitle_pd1zp_299 {
  margin: 0;
  color: var(--ph-sys-color-on-surface);
  font-family: var(--ph-sys-typescale-body-md-font, var(--ph-ref-typeface-body));
  font-size: var(--ph-sys-typescale-body-md-size, 13px);
  line-height: var(--ph-sys-typescale-body-md-line-height, 20px);
}

._issueMeta_pd1zp_307 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

._summaryStats_pd1zp_313 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}

._statCard_pd1zp_319 {
  border: 1px solid var(--ph-sys-color-outline-variant);
  border-radius: var(--ph-sys-shape-md);
  background: var(--ph-sys-color-surface-container);
  padding: 10px;
}

._statValue_pd1zp_326 {
  color: var(--ph-sys-color-on-surface);
  font-family: var(--ph-sys-typescale-title-md-font, var(--ph-ref-typeface-emphasis));
  font-size: var(--ph-sys-typescale-title-md-size, 16px);
  font-weight: var(--ph-sys-typescale-title-md-weight, 700);
  line-height: var(--ph-sys-typescale-title-md-line-height, 22px);
}

._statLabel_pd1zp_334 {
  margin-top: 2px;
  color: var(--ph-sys-color-on-surface-variant);
  font-family: var(--ph-sys-typescale-body-sm-font, var(--ph-ref-typeface-body));
  font-size: var(--ph-sys-typescale-body-sm-size, 12px);
  line-height: var(--ph-sys-typescale-body-sm-line-height, 16px);
}

._tableWrap_pd1zp_342 {
  overflow-x: auto;
}

._table_pd1zp_342 {
  width: 100%;
  border-collapse: collapse;
}

._table_pd1zp_342 th,
._table_pd1zp_342 td {
  border-bottom: 1px solid var(--ph-ref-palette-neutral94);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
  color: var(--ph-sys-color-on-surface);
  font-family: var(--ph-sys-typescale-body-md-font, var(--ph-ref-typeface-body));
  font-size: var(--ph-sys-typescale-body-md-size, 13px);
  line-height: var(--ph-sys-typescale-body-md-line-height, 20px);
}

._table_pd1zp_342 th {
  color: var(--ph-sys-color-on-surface-variant);
  font-family: var(--ph-sys-typescale-label-md-font, var(--ph-ref-typeface-body));
  font-weight: var(--ph-sys-typescale-label-md-weight, 600);
}

._actions_pd1zp_369 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

._rowActions_pd1zp_376 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

._dialogBody_pd1zp_383 {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  padding: 16px;
}

._dialogFields_pd1zp_393,
._formGrid_pd1zp_394 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

._formGrid_pd1zp_394 {
  align-items: start;
}

._switchRow_pd1zp_404 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1.5px solid var(--ph-sys-color-outline-variant);
  border-radius: var(--ph-sys-shape-md);
  background: var(--ph-sys-color-surface-container);
  padding: 12px;
  color: var(--ph-sys-color-on-surface);
  font-family: var(--ph-sys-typescale-body-md-font, var(--ph-ref-typeface-body));
  font-size: var(--ph-sys-typescale-body-md-size, 13px);
  line-height: var(--ph-sys-typescale-body-md-line-height, 20px);
}

._switchRow_pd1zp_404 span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

._switchRow_pd1zp_404 strong {
  font-family: var(--ph-sys-typescale-label-md-font, var(--ph-ref-typeface-body));
  font-size: var(--ph-sys-typescale-label-md-size, 12px);
  font-weight: var(--ph-sys-typescale-label-md-weight, 600);
  line-height: var(--ph-sys-typescale-label-md-line-height, 16px);
}

._switchRow_pd1zp_404 span span {
  color: var(--ph-sys-color-on-surface-variant);
}

._dialogBlockers_pd1zp_435 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._dialogSubhead_pd1zp_441 {
  color: var(--ph-sys-color-on-surface-variant);
  font-family: var(--ph-sys-typescale-label-sm-font, var(--ph-ref-typeface-body));
  font-size: var(--ph-sys-typescale-label-sm-size, 11px);
  font-weight: var(--ph-sys-typescale-label-sm-weight, 700);
  letter-spacing: 0.06em;
  line-height: var(--ph-sys-typescale-label-sm-line-height, 16px);
  text-transform: uppercase;
}

._debugDetails_pd1zp_451 {
  border: 1px dashed var(--ph-sys-color-outline-variant);
  border-radius: var(--ph-sys-shape-md);
  background: var(--ph-sys-color-surface-container);
  padding: 10px 12px;
  color: var(--ph-sys-color-on-surface-variant);
  font-family: var(--ph-sys-typescale-body-sm-font, var(--ph-ref-typeface-body));
  font-size: var(--ph-sys-typescale-body-sm-size, 12px);
  line-height: var(--ph-sys-typescale-body-sm-line-height, 16px);
}

._debugDetails_pd1zp_451 summary {
  cursor: pointer;
  font-family: var(--ph-sys-typescale-label-md-font, var(--ph-ref-typeface-body));
  font-weight: var(--ph-sys-typescale-label-md-weight, 600);
}

._debugGrid_pd1zp_468 {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

._dialogFooter_pd1zp_476 {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--ph-sys-color-outline-variant);
  background: var(--ph-sys-color-surface);
  padding: 12px 16px;
}

._tracePanel_pd1zp_486 {
  border: 1.5px solid var(--ph-sys-color-outline-variant);
  border-radius: var(--ph-sys-shape-lg);
  background: var(--ph-sys-color-surface);
  padding: 12px 14px;
}

._tracePanel_pd1zp_486 summary {
  cursor: pointer;
  color: var(--ph-sys-color-on-surface);
  font-family: var(--ph-sys-typescale-section-title-font, var(--ph-ref-typeface-emphasis));
  font-size: var(--ph-sys-typescale-section-title-size, 13px);
  font-weight: var(--ph-sys-typescale-section-title-weight, 700);
  line-height: var(--ph-sys-typescale-section-title-line-height, 18px);
}

._traceGrid_pd1zp_502 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

._traceJsonGrid_pd1zp_509 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

._traceJsonGrid_pd1zp_509 pre {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--ph-sys-color-outline-variant);
  border-radius: var(--ph-sys-shape-md);
  background: var(--ph-sys-color-surface-container);
  color: var(--ph-ref-palette-neutral35);
  padding: 10px;
  font-family: var(--ph-sys-typography-family-mono, ui-monospace, Menlo, monospace);
  font-size: var(--ph-sys-typescale-mono-size, 11px);
  line-height: var(--ph-sys-typescale-mono-line-height, 16px);
}

@media (max-width: 900px) {
  ._scopeBar_pd1zp_7,
  ._grid_pd1zp_22,
  ._traceJsonGrid_pd1zp_509 {
    grid-template-columns: 1fr;
  }

  ._scopeMeta_pd1zp_14 {
    justify-content: flex-start;
  }

  ._debugGrid_pd1zp_468 {
    grid-template-columns: 1fr;
  }
}
._page_1xcxx_1 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 16px;
}

._formGrid_1xcxx_8 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

._fieldRow_1xcxx_15 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
}

._paramsSection_1xcxx_22 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._paramsHeader_1xcxx_28 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

._paramRows_1xcxx_35 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._paramRow_1xcxx_35 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

._removeParamButton_1xcxx_48 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--ph-sys-color-outline-variant, #e7e0ec);
  border-radius: 8px;
  background: transparent;
  color: var(--ph-sys-color-on-surface-variant, #49454f);
  cursor: pointer;
}

._removeParamButton_1xcxx_48:hover {
  background: var(--ph-sys-color-surface-container-low, #f7f2fa);
}

._actions_1xcxx_65 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

._discoveryErrors_1xcxx_71 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._resultBlock_1xcxx_77 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

._resultMeta_1xcxx_84 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._resultBody_1xcxx_90 {
  overflow: auto;
}

._accepted_1xcxx_94 {
  color: var(--ph-sys-color-primary, #6750a4);
  font-weight: 600;
}

._rejected_1xcxx_99 {
  color: var(--ph-sys-color-error, #b3261e);
  font-weight: 600;
}

._jsonPre_1xcxx_104 {
  margin: 0;
  padding: 12px;
  border-radius: 8px;
  background: var(--ph-sys-color-surface-container-low, #f7f2fa);
  font-family: var(--ph-ref-typeface-numeric, monospace);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

._tableWrap_1xcxx_116 {
  overflow: auto;
}

._table_1xcxx_116 {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

._table_1xcxx_116 th,
._table_1xcxx_116 td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--ph-sys-color-outline-variant, #e7e0ec);
  text-align: left;
  vertical-align: top;
}

._table_1xcxx_116 th {
  font-weight: 600;
  background: var(--ph-sys-color-surface-container-low, #f7f2fa);
}

._historyList_1xcxx_139 {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

._historyItem_1xcxx_146 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--ph-sys-color-outline-variant, #e7e0ec);
  border-radius: 8px;
}

._historyMeta_1xcxx_156 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

._dialogBody_1xcxx_163 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 0 4px;
}

._confirmList_1xcxx_170 {
  margin: 0;
  padding-left: 20px;
}

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

._projectionsCard_1xcxx_181 {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

._projectionsToolbar_1xcxx_188 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

._monoCell_1xcxx_196 {
  font-family: var(--ph-ref-typeface-numeric, monospace);
  word-break: break-all;
}

._projectionActions_1xcxx_201 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__controls-button:last-child {
    border-bottom: none;
  }
.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}
@keyframes mediaAssetPage2FadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mediaAssetPage2Shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
/* GalleryListPage — page-level + shared component styles.
   Component-specific styles live in MediaCard.module.css. */

/* ── Keyframes ──────────────────────────────────────────────── */

@keyframes _pulseRing_1caey_1 {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 124, 0, 0.22); }
  50%       { box-shadow: 0 0 0 8px rgba(245, 124, 0, 0); }
}

@keyframes _fadeUp_1caey_1 {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── Content area (AdminShell owns the scroll + background) ─── */

._content_1caey_22 {
  display: flex;
  flex-direction: column;
  /* AdminShell provides padding; we add none here to stay within its grid. */
}

/* Topbar removed — AdminShell provides the page header. */

/* ── Toolbar ────────────────────────────────────────────────── */

._toolbar_1caey_32 {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}

._toolbarRow1_1caey_39 {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: nowrap;
}

._searchWrap_1caey_46 {
  flex: 1;
  max-width: 480px;
}

._viewSegment_1caey_51 .segmented-control {
  border: none;
}

/* Upload button lives in AdminShell actionButton — no toolbar CSS needed */

._toolbarRow2_1caey_57 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

._itemCount_1caey_64 {
  font-size: 12px;
  font-weight: 700;
  color: var(--ph-sys-color-on-surface-variant);
  white-space: nowrap;
}

._missingAnalysisBadge_1caey_71 {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--ph-sys-color-secondary-container, #e8def8);
  color: var(--ph-sys-color-on-secondary-container, #1d192b);
  border: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

._missingAnalysisBadge_1caey_71:hover {
  filter: brightness(0.96);
}

._missingAnalysisBadge_1caey_71:focus-visible {
  outline: 2px solid var(--ph-sys-color-primary, #6750a4);
  outline-offset: 2px;
}

/* ── Search coach mark ──────────────────────────────────────── */

._coachmark_1caey_101 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--ph-sys-color-surface-container-low, #f5f0fb);
  border: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  border-radius: var(--ph-shape-sm, 8px);
  font-size: 12px;
  color: var(--ph-sys-color-on-surface-variant);
  margin-bottom: 10px;
}

._coachmark_1caey_101 em {
  font-style: normal;
  font-weight: 700;
  color: var(--ph-sys-color-on-surface);
}

._coachmarkDismiss_1caey_121 {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--ph-sys-color-on-surface-variant);
  padding: 0 2px;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Pagination footer ───────────────────────────────────────── */

._footer_1caey_134 {
  margin-top: 8px;
  background: var(--ph-sys-color-surface-container-low, #f5f0fb);
  border-radius: 999px;
}

/* ── Gallery note banner ────────────────────────────────────── */

._galleryNote_1caey_142 {
  background: linear-gradient(135deg, var(--ph-sys-color-surface), #fff9ef);
  border: 1px solid #ead7c0;
  border-left: 4px solid var(--ph-sys-color-warning, #f57c00);
  border-radius: var(--ph-shape-md);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

._galleryNote_1caey_142 strong {
  font-size: 13px;
  color: var(--ph-sys-color-on-surface);
}

._galleryNote_1caey_142 p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--ph-sys-color-on-surface-variant);
}

/* ── Masonry grid ───────────────────────────────────────────── */

._masonry_1caey_168 {
  /* --cols is set inline by GalleryListPage from size + breakpoint */
  column-count: var(--cols, 4);
  column-gap: 12px;
}

/* ── Fix pill (shared, used by FixPill component) ──────────── */

._fixPill_1caey_176 {
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 224, 178, 0.96);
  color: #5a3100;
  border: 1px solid rgba(245, 124, 0, 0.34);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  font-size: 11px;
  font-weight: 900;
  animation: _pulseRing_1caey_1 2.2s ease-in-out infinite;
  white-space: nowrap;
}

._fixPillDot_1caey_192 {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ph-sys-color-warning, #f57c00);
  flex-shrink: 0;
}

/* ── Video badge ────────────────────────────────────────────── */

._videoBadge_1caey_202 {
  /* Opaque — backdrop-filter removed for the same compositing reasons as
     MediaCard .captionSurface (one filter per video card stacks badly). */
  background: rgba(28, 27, 31, 0.92);
  color: white;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  padding: 5px 8px;
  white-space: nowrap;
}

/* ── FAB (phone only) ───────────────────────────────────────── */

._fab_1caey_216 {
  display: none; /* shown at ≤640px via media query below */
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 0;
  background: var(--ph-sys-color-primary);
  color: white;
  font-size: 26px;
  font-weight: 700;
  box-shadow: var(--ph-shadow-elevated);
  z-index: 25;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  /* Touch target is the full 56×56 */
}

/* ── Upload sheet / drawer ──────────────────────────────────── */

._drawerBackdrop_1caey_239 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 40;
}

._sheet_1caey_249 {
  width: 100%;
  max-width: 560px;
  background: var(--ph-sys-color-surface);
  border-radius: 22px 22px 0 0;
  padding: 18px;
  box-shadow: var(--ph-shadow-elevated);
  animation: _fadeUp_1caey_1 0.2s ease-out;
}

._sheetHandle_1caey_259 {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--ph-sys-color-outline-variant);
  margin: 0 auto 14px;
}

._sheetTitle_1caey_267 {
  font-size: 16px;
  font-weight: 900;
  margin: 0 0 4px;
  color: var(--ph-sys-color-on-surface);
}

._sheetSubtitle_1caey_274 {
  font-size: 13px;
  color: var(--ph-sys-color-on-surface-variant);
  margin: 0 0 16px;
}

._sheetActions_1caey_280 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Responsive ─────────────────────────────────────────────── */

/* ≥ 1000px: lg — defaults above apply (4 columns at M) */

/* md: 760–999px */
@media (max-width: 999px) {
  /* column counts managed via inline --cols */
}

/* sm: ≤ 639px (phone) */
@media (max-width: 639px) {
  ._topbarInner_1caey_297 {
    align-items: flex-start;
    flex-direction: column;
  }

  ._tabs_1caey_302 {
    width: 100%;
    overflow-x: auto;
  }

  ._tab_1caey_302 {
    flex: 1;
    min-height: 44px;
  }

  ._toolbarRow1_1caey_39 {
    flex-direction: column;
    align-items: stretch;
  }

  ._searchWrap_1caey_46 {
    max-width: none;
  }


  ._galleryNote_1caey_142 {
    flex-direction: column;
    align-items: stretch;
  }

  ._fixPill_1caey_176 {
    height: 26px;
    font-size: 10px;
    padding: 0 7px;
  }

  ._fab_1caey_216 {
    display: flex; /* visible on phone */
  }

  ._main_1caey_337 {
    padding: 14px;
  }
}
._wrapper_ef066_1 {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Neutral surface visible during the brief moment after we know the wrapper
     width but before the blurhash decode lands. */
  background: var(--ph-sys-color-surface-variant, #ece6f0);
  /* Contain our internal z-indices (the loaded <img> sits at z-index: 1 above
     the blurhash). Without this, that z-index leaks into the parent's stacking
     context and paints over sibling overlays — score orb, caption, fix pill. */
  isolation: isolate;
}

._placeholder_ef066_14 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

._placeholderSolid_ef066_22 {
  background: linear-gradient(135deg, #efe7f7 0%, #f6f2fa 50%, #e6ecf2 100%);
}

._img_ef066_26 {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.32s ease-out;
}

._imgLoaded_ef066_37 {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  ._img_ef066_26 {
    transition: none;
  }
}
/* MediaCard — per-item component styles.
   Page-level shared classes (fixPill, videoBadge, etc.) live in GalleryListPage.module.css */

._card_kehqp_4 {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 0 12px;
  border-radius: var(--ph-shape-md);
  overflow: hidden;
  background: var(--ph-sys-color-surface);
  border: 1px solid var(--ph-sys-color-outline-variant);
  box-shadow: var(--ph-shadow-card);
  break-inside: avoid;
  cursor: pointer;
  text-align: left;
  animation: _cardFadeIn_kehqp_1 0.24s ease-out;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
  /* Touch target handled by the full-card button */
}

@keyframes _cardFadeIn_kehqp_1 {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  ._card_kehqp_4 { animation: none; transition: none; }
}

/* Hover affordance — shadow + border only, no transform.
   Avoids creating a new compositing layer per card on hover. */
@media (hover: hover) {
  ._card_kehqp_4:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    border-color: var(--ph-sys-color-outline);
  }
}

._card_kehqp_4:focus-visible {
  outline: 2px solid var(--ph-sys-color-primary);
  outline-offset: 2px;
}

._thumbnail_kehqp_45 {
  display: block;
  width: 100%;
  height: auto;
  /* Gradient placeholder while loading */
  background: linear-gradient(135deg, #e8d5f5, #f5f0fa 50%, #dfe8f0);
}

/* Score orb absolute positioning */
._scoreOrbWrap_kehqp_54 {
  position: absolute;
  right: 8px;
  top: 8px;
  /* min touch target via padding trick — orb itself is 38px */
  padding: 3px;
}

/* Top-left badge positioning (fix pill / video badge share this slot) */
._topLeftBadge_kehqp_63 {
  position: absolute;
  left: 8px;
  top: 8px;
}

/* Caption overlay — translucent dark plate at bottom */
._overlay_kehqp_70 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 44px 8px 8px;
  background: linear-gradient(
    to top,
    rgba(20, 16, 28, 0.44),
    rgba(20, 16, 28, 0.18) 58%,
    rgba(20, 16, 28, 0)
  );
  color: #fff;
}

._captionSurface_kehqp_85 {
  border-radius: 10px;
  padding: 8px 9px;
  /* Opaque dark plate — backdrop-filter removed: it forced every card onto its
     own GPU layer, and 24+ stacked filters during scroll/resize starved repaint
     of the fixed left nav, exposing the dark layout shell behind it. */
  background: rgba(24, 20, 32, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

._mediaName_kehqp_96 {
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

._mediaHint_kehqp_107 {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.9;
  font-family: 'DM Sans', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  color: #fff;
}

._levelChip_kehqp_119 {
  display: inline-flex;
  border-radius: 999px;
  background: rgba(237, 220, 255, 0.94);
  color: var(--ph-sys-color-primary);
  font-size: 10.5px;
  font-weight: 900;
  padding: 4px 8px;
  margin-top: 6px;
  line-height: 1;
}

/* Phone: slightly smaller orb */
@media (max-width: 639px) {
  ._scoreOrbWrap_kehqp_54 {
    right: 6px;
    top: 6px;
  }
}

/* ── Archived state ──────────────────────────────────────────── */

._archivedCard_kehqp_141 {
  opacity: 0.62;
}

._archivedCard_kehqp_141:hover,
._archivedCard_kehqp_141:focus-within {
  opacity: 0.92;
}

._archivedBadge_kehqp_150 {
  position: absolute;
  inset: auto 8px 8px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(28, 27, 31, 0.9);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  z-index: 2;
}

._archivedBadgeCaption_kehqp_166 {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._restoreBtn_kehqp_173 {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

._restoreBtn_kehqp_173:hover {
  background: rgba(255, 255, 255, 0.28);
}

._restoreBtn_kehqp_173:focus-visible {
  outline: 2px solid var(--ph-sys-color-primary);
  outline-offset: 2px;
}

._restoreBtn_kehqp_173:disabled {
  opacity: 0.55;
  cursor: progress;
}
/* ── Backdrop ────────────────────────────────────── */

._backdrop_1prd9_3 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 40;
}

/* ── Sheet container ─────────────────────────────── */

._sheet_1prd9_15 {
  width: 100%;
  max-width: 560px;
  background: var(--ph-sys-color-surface, #fffbfe);
  border-radius: 22px 22px 0 0;
  padding: 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--ph-shadow-elevated, 0 8px 24px rgba(0,0,0,.18));
  animation: _fadeUp_1prd9_1 0.2s ease-out;
  max-height: 90vh;
  overflow-y: auto;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  ._sheet_1prd9_15 {
    animation: none;
  }
}

@keyframes _fadeUp_1prd9_1 {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Handle ──────────────────────────────────────── */

._handle_1prd9_42 {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--ph-sys-color-outline-variant, #cac4d0);
  margin: 0 auto 14px;
}

/* ── Header ──────────────────────────────────────── */

._title_1prd9_52 {
  font-size: 16px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
  margin: 0 0 4px;
}

._subtitle_1prd9_59 {
  font-size: 13px;
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  margin: 0 0 12px;
  line-height: 1.4;
}
/* ── Toast container ──────────────────────────────── */

._toast_1buzk_3 {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 60;
  border-radius: var(--ph-shape-md, 12px);
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: var(--ph-shadow-elevated, 0 8px 24px rgba(0,0,0,.18));
  animation: _toastIn_1buzk_1 0.2s ease-out;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 32px);
}

@media (prefers-reduced-motion: reduce) {
  ._toast_1buzk_3 { animation: none; }
}

@keyframes _toastIn_1buzk_1 {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Variants ─────────────────────────────────────── */

._variantDefault_1buzk_33 {
  background: #211d2b;
  color: #ffffff;
}

._variantSuccess_1buzk_38 {
  background: var(--ph-sys-color-success-container, #c3efcd);
  color: var(--ph-sys-color-on-success-container, #002109);
  /* subtle warm glow */
  box-shadow:
    var(--ph-shadow-elevated, 0 8px 24px rgba(0,0,0,.18)),
    0 0 0 1px rgba(26, 104, 48, 0.18);
}

._variantError_1buzk_47 {
  background: var(--ph-sys-color-error-container, #ffdad6);
  color: var(--ph-sys-color-on-error-container, #410002);
}

/* ── Action button ────────────────────────────────── */

._action_1buzk_54 {
  background: transparent;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  text-decoration: underline;
  white-space: nowrap;
  flex-shrink: 0;
}

._variantDefault_1buzk_33 ._action_1buzk_54 { color: rgba(255, 255, 255, 0.82); }
._variantSuccess_1buzk_38 ._action_1buzk_54 { color: var(--ph-sys-color-on-success-container, #002109); }
._variantError_1buzk_47   ._action_1buzk_54 { color: var(--ph-sys-color-on-error-container, #410002); }

._text_1buzk_71 { flex: 1; min-width: 0; }
._actions_13iq9_1 {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._btn_13iq9_7 {
  width: 100%;
}

._urlRow_13iq9_11 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._urlInput_13iq9_17 {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  border-radius: var(--ph-shape-sm, 8px);
  font-size: 14px;
  color: var(--ph-sys-color-on-surface);
  background: var(--ph-sys-color-surface-container, #f3edf7);
  outline: none;
}

._urlInput_13iq9_17:focus {
  border-color: var(--ph-sys-color-primary, #6750a4);
}

._urlButtons_13iq9_32 {
  display: flex;
  gap: 8px;
}

._errorBanner_13iq9_37 {
  padding: 8px 12px;
  background: var(--ph-sys-color-error-container, #ffdad6);
  border-radius: var(--ph-shape-sm, 8px);
  font-size: 12px;
  color: var(--ph-sys-color-on-error-container, #410002);
  margin-bottom: 4px;
}

._uploadingHint_13iq9_46 {
  font-size: 12px;
  color: var(--ph-sys-color-on-surface-variant);
  text-align: center;
  padding: 4px 0;
}

/* ── Shared shimmer animation ─────────────────────── */

@keyframes _shimmer_zbt72_8 {
  0%   { background-position: -360px 0; }
  100% { background-position:  360px 0; }
}

._shimmer_zbt72_8 {
  background: linear-gradient(90deg, #f5f3fa, #e9e4ef, #f5f3fa);
  background-size: 360px 100%;
  animation: _shimmer_zbt72_8 1.2s infinite linear;
  border-radius: var(--ph-shape-md, 12px);
}

/* Static fallback for prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  ._shimmer_zbt72_8 {
    animation: none;
    background: #e9e4ef;
  }
}
._masonry_rgrxr_1 {
  column-count: 4;
  column-gap: 12px;
}

._card_rgrxr_6 {
  display: inline-block;
  width: 100%;
  margin: 0 0 12px;
}
._root_1gf96_1 {
  text-align: center;
  padding: 90px 20px;
  background: var(--ph-sys-color-surface, #fffbfe);
  border: 1px dashed var(--ph-sys-color-outline-variant, #cac4d0);
  border-radius: var(--ph-shape-lg, 16px);
}

._illustration_1gf96_9 {
  margin-bottom: 16px;
}

._title_1gf96_13 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
}

._desc_1gf96_20 {
  margin: 0 auto 18px;
  max-width: 430px;
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  font-size: 14px;
  line-height: 1.5;
}
._root_qmoko_1 {
  text-align: center;
  padding: 90px 20px;
  background: var(--ph-sys-color-surface, #fffbfe);
  border: 1px dashed var(--ph-sys-color-outline-variant, #cac4d0);
  border-radius: var(--ph-shape-lg, 16px);
}

._rootWarning_qmoko_9 {
  background: var(--ph-sys-color-warning-container, #ffefc8);
  border-color: var(--ph-sys-color-warning, #7a4f00);
}

._title_qmoko_14 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
}

._desc_qmoko_21 {
  margin: 0 auto 18px;
  max-width: 430px;
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  font-size: 14px;
  line-height: 1.5;
}
._grid_u7804_1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 16px;
}

@media (max-width: 760px) {
  ._grid_u7804_1 { grid-template-columns: 1fr; }
}

._cell_u7804_13 {
  border: 1.5px solid var(--ph-sys-color-outline-variant, #cac4d0);
  background: var(--ph-sys-color-surface, #fffbfe);
  border-radius: var(--ph-shape-md, 12px);
  padding: 12px;
  text-align: left;
  min-height: 96px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: border-color 0.15s ease;
}

._cell_u7804_13 strong {
  display: block;
  font-size: 12px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
}

._cell_u7804_13 span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
}

._suggested_u7804_40 {
  border-color: #d7c5f2;
  background: linear-gradient(135deg, var(--ph-sys-color-primary-container, #e8def8), #fff8ed);
}

._selected_u7804_45 {
  border-color: var(--ph-sys-color-primary, #6750a4);
  box-shadow: 0 0 0 2px var(--ph-sys-color-primary, #6750a4);
}

@media (prefers-reduced-motion: reduce) {
  ._cell_u7804_13 { transition: none; }
}

._footer_u7804_54 {
  display: flex;
  gap: 10px;
}

._footerBtn_u7804_59 {
  flex: 1;
}
/* ── Container ───────────────────────────────────── */

._preview_1vh93_3 {
  display: grid;
  grid-template-columns: 1fr 34px 1fr;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: var(--ph-shape-md, 12px);
}

._state_1vh93_15 {
  display: grid;
  justify-items: center;
  gap: 7px;
}

._label_1vh93_21 {
  font-size: 11px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

._arrow_1vh93_29 {
  font-size: 18px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  text-align: center;
}

/* ── Blob wrap ───────────────────────────────────── */

._blobWrap_1vh93_38 {
  width: 86px;
  height: 54px;
  border-radius: var(--ph-shape-md, 12px);
  display: grid;
  place-items: center;
  background: var(--ph-sys-color-surface-container-low, #f3eff4);
}

._blob_1vh93_38 {
  width: 62px;
  height: 34px;
  border-radius: 46% 54% 49% 51%;
  background: linear-gradient(
    135deg,
    var(--ph-sys-color-primary-container, #e8def8),
    var(--ph-sys-color-warning-container, #ffddb6)
  );
  position: relative;
}

/* Soft / before state */
._blobBlur_1vh93_60 {
  filter: blur(6px);
  opacity: 0.68;
  transform: scale(0.95);
}

/* Sharp / after state */
._blobSharp_1vh93_67 {
  filter: none;
  opacity: 1;
  box-shadow: inset 0 0 0 2px var(--ph-sys-color-primary, #6750a4);
}

._blobSharp_1vh93_67::before,
._blobSharp_1vh93_67::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  border-radius: 999px;
  background: rgba(107, 79, 160, 0.65);
  animation: _crispLine_1vh93_1 1.6s ease-in-out infinite;
}

._blobSharp_1vh93_67::before {
  top: 11px;
}

._blobSharp_1vh93_67::after {
  bottom: 10px;
  animation-delay: 0.25s;
}

@keyframes _crispLine_1vh93_1 {
  0%,
  100% {
    opacity: 0.35;
    transform: scaleX(0.75);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ── Phone ───────────────────────────────────────── */

@media (max-width: 640px) {
  ._preview_1vh93_3 {
    grid-template-columns: 1fr 26px 1fr;
    padding: 10px;
  }

  ._blobWrap_1vh93_38 {
    width: 70px;
    height: 48px;
  }

  ._blob_1vh93_38 {
    width: 52px;
    height: 30px;
  }
}

/* ── Reduced motion ──────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  ._blobSharp_1vh93_67::before,
  ._blobSharp_1vh93_67::after {
    animation: none;
    opacity: 1;
    transform: scaleX(1);
  }
}
._steps_144f0_1 {
  margin: 14px 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

._row_144f0_8 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

._icon_144f0_14 {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ph-sys-color-success-container, #c3efcd);
  color: var(--ph-sys-color-success, #1a6830);
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
}

._text_144f0_27 { flex: 1; }

._title_144f0_29 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
  display: block;
}

._subtitle_144f0_36 {
  font-size: 12px;
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  display: block;
  margin-top: 2px;
  line-height: 1.4;
}

._footer_144f0_44 {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

._btn_144f0_50 { flex: 1; }
._list_1df2d_1 {
  margin: 8px 0 14px;
}

._row_1df2d_5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
}

._row_1df2d_5:last-child {
  border-bottom: 0;
}

._info_1df2d_18 { flex: 1; min-width: 0; }

._info_1df2d_18 strong {
  font-size: 12px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
  display: block;
}

._info_1df2d_18 span {
  font-size: 11px;
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  display: block;
  margin-top: 2px;
}

._doneBtn_1df2d_34 {
  width: 100%;
}
._grid_1hi7t_1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0 16px;
}

._thumb_1hi7t_8 {
  border: 1.5px solid var(--ph-sys-color-outline-variant, #cac4d0);
  border-radius: var(--ph-shape-sm, 8px);
  overflow: hidden;
  background: var(--ph-sys-color-surface-container-low, #f3eff4);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  text-align: left;
  transition: border-color 0.15s ease;
}

._thumb_1hi7t_8:hover {
  border-color: var(--ph-sys-color-primary, #6750a4);
}

._thumb_1hi7t_8 img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

._reason_1hi7t_31 {
  padding: 7px;
  font-size: 10.5px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
}

@media (prefers-reduced-motion: reduce) {
  ._thumb_1hi7t_8 { transition: none; }
}

._doneBtn_1hi7t_42 {
  width: 100%;
}
._body_17xlm_1 {
  font-size: 14px;
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  line-height: 1.5;
  margin: 0 0 20px;
}

._footer_17xlm_8 {
  display: flex;
  gap: 10px;
}

._btn_17xlm_13 { flex: 1; }
._body_s17pg_1 {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0 8px;
}

._intro_s17pg_8 {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
}

._subtle_s17pg_14 {
  font-size: 12px;
  color: var(--ph-sys-color-on-surface-variant, #49454f);
}

._progressMeta_s17pg_19 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--ph-sys-color-on-surface-variant, #49454f);
}

._progressCount_s17pg_28 {
  font-weight: 700;
  color: var(--ph-sys-color-primary, #6750a4);
}

._currentItem_s17pg_33 {
  font-size: 13px;
  font-weight: 600;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

._actions_s17pg_42 {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

._btn_s17pg_48 {
  flex: 1;
}

._doneSummary_s17pg_52 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

._failed_s17pg_58 {
  color: var(--ph-sys-color-error, #b3261e);
}

._batchHint_s17pg_62 {
  font-size: 12px;
  color: var(--ph-sys-color-on-surface-variant, #49454f);
  font-style: italic;
}
/* ── Viewer frame ────────────────────────────────── */

._viewer_twdsf_3 {
  background: #111;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
}

._viewer_twdsf_3 img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 76vh;
  display: block;
}

/* SmartImage wrapper inside the viewer.
   The wrapper carries its own aspect-ratio (set inline by the component).
   We override the gallery default of `width: 100%` so that:
     - height is anchored to 76vh (visual cap)
     - width is derived from height × aspectRatio (preserves shape)
     - max-width: 100% prevents wide landscape shots from spilling out
   Net effect: the dark frame letterboxes around the image just like the
   plain <img object-fit:contain> did before. */
._viewer_twdsf_3 ._smartImage_twdsf_30 {
  width: auto;
  height: 76vh;
  max-width: 100%;
  max-height: 76vh;
  /* Calm transparent frame so the dark viewer shows through during placeholder. */
  background: transparent;
}

/* ── Viewer-top overlay ─────────────────────────── */

._viewerTop_twdsf_41 {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  pointer-events: none;
}

._pill_twdsf_52 {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
  white-space: nowrap;
  font-family: inherit;
  letter-spacing: 0.01em;
}

._backLink_twdsf_68 {
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

._backLink_twdsf_68:hover {
  background: rgba(255, 255, 255, 0.22);
}

@media (prefers-reduced-motion: reduce) {
  ._backLink_twdsf_68 { transition: none; }
}

/* ── Video overlay ──────────────────────────────── */

._videoBadge_twdsf_88 {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
}

._playBadge_twdsf_99 {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  letter-spacing: 0.02em;
}

._videoCaption_twdsf_112 {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  pointer-events: auto;
}

._videoCaption_twdsf_112 a {
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Phone overrides ────────────────────────────── */

@media (max-width: 640px) {
  ._viewer_twdsf_3 {
    border-radius: 0;
    min-height: 390px;
    margin-left: -14px;
    margin-right: -14px;
  }
}
/* Hidden on tablet/desktop — shown only on phone */
._bar_1pon1_2 {
  display: none;
}

@media (max-width: 640px) {
  ._bar_1pon1_2 {
    display: flex;
    position: sticky;
    bottom: 0;
    margin: 16px -14px -14px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
    gap: 10px;
    z-index: 30;
  }

  ._btn_1pon1_21 {
    flex: 1;
    height: 48px;
  }
}
._slot_1m1id_1 {
  width: 100%;
}

._placeholder_1m1id_5 {
  background: var(--ph-sys-color-surface-container, #f3eff4);
  border: 1px dashed var(--ph-sys-color-outline-variant, #cac4d0);
  border-radius: 12px;
  padding: 24px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  text-align: center;
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}
._section_tieq8_1 {
  display: flex;
  flex-direction: column;
  background: var(--ph-sys-color-surface, #fffbfe);
  border-radius: var(--ph-shape-corner-large, 16px);
  border: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  overflow: hidden;
}

._head_tieq8_10 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: transparent;
  border: 0;
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
}

._head_tieq8_10:focus-visible {
  outline: 2px solid var(--ph-sys-color-primary, #6750a4);
  outline-offset: -2px;
}

._title_tieq8_29 {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

._chevron_tieq8_35 {
  font-size: 12px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

._chevronOpen_tieq8_41 {
  transform: rotate(180deg);
}

._body_tieq8_45 {
  padding: 4px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
}

._row_tieq8_53 {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: start;
  padding: 6px 0;
}

._label_tieq8_61 {
  font-size: 12px;
  color: var(--ph-sys-color-on-surface-variant, #49454f);
  letter-spacing: 0.02em;
}

._value_tieq8_67 {
  font-size: 13px;
  color: var(--ph-sys-color-on-surface, #1d1b20);
  word-break: break-word;
}

._code_tieq8_73 {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: var(--ph-sys-color-surface-container, #f3edf7);
  padding: 2px 6px;
  border-radius: 4px;
}

._muted_tieq8_81 {
  color: var(--ph-sys-color-on-surface-variant, #49454f);
  font-style: italic;
}

._chips_tieq8_86 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

._chip_tieq8_86 {
  border: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  background: var(--ph-sys-color-surface-container-low, #f7f2fa);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

._chip_tieq8_86:hover {
  background: var(--ph-sys-color-secondary-container, #e8def8);
}

._chip_tieq8_86:focus-visible {
  outline: 2px solid var(--ph-sys-color-primary, #6750a4);
  outline-offset: 2px;
}

._parentLink_tieq8_112 {
  color: var(--ph-sys-color-primary, #6750a4);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
}

._parentLink_tieq8_112:hover {
  text-decoration: underline;
}
._chip_vrcam_1 {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: rgba(237, 220, 255, 0.94);
  color: var(--ph-sys-color-primary);
  font-size: 10.5px;
  font-weight: 900;
  padding: 4px 10px;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
._card_1vyp2_1 {
  background: linear-gradient(
    135deg,
    #fff8ed,
    var(--ph-sys-color-primary-container, #e8def8)
  );
  border: 1.5px solid #e5caa8;
  border-left: 5px solid var(--ph-sys-color-warning, #e6971a);
  border-radius: var(--ph-shape-lg, 16px);
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 18px rgba(94, 58, 5, 0.08);
}

._head_1vyp2_15 {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

._alertIcon_1vyp2_21 {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ph-sys-color-warning-container, #ffddb6);
  color: #6a3700;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 16px;
  flex: none;
}

._copy_1vyp2_34 strong {
  font-size: 14px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
  display: block;
}

._copy_1vyp2_34 p {
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  font-size: 12px;
  margin: 3px 0 0;
}

._actions_1vyp2_47 {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

@media (max-width: 640px) {
  ._actions_1vyp2_47 {
    flex-direction: column;
  }
}
/* Half-circle speedometer gauge for per-rule scores. Three colored arcs +
   a status-coloured needle. SVG keeps everything crisp at any size and the
   only motion is the needle's mount-time sweep. */

._wrapper_1y7h1_5 {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  user-select: none;
}

._svg_1y7h1_13 {
  display: block;
}

._needle_1y7h1_17 {
  /* Rotate around the line's base (which sits at the dial centre 50,44).
     fill-box anchors transform-origin to the element's own bbox, so the
     pivot stays correct regardless of how the SVG is scaled. */
  transform-box: fill-box;
  transform-origin: bottom center;
  transition: transform 250ms ease-out;
}

._value_1y7h1_26 {
  font-size: 10px;
  font-weight: 700;
  color: var(--ph-sys-color-on-surface-variant, #49454f);
  letter-spacing: 0.02em;
  line-height: 1;
}

._valueMd_1y7h1_34 {
  font-size: 12px;
}

._zoneFail_1y7h1_38   { stroke: var(--ph-sys-color-error, #e84b4b); }
._zoneMargin_1y7h1_39 { stroke: var(--ph-sys-color-warning, #f2a93b); }
._zonePass_1y7h1_40   { stroke: var(--ph-sys-color-success, #3ebc6a); }

._needleFail_1y7h1_42   { stroke: var(--ph-sys-color-error, #e84b4b); }
._needlePass_1y7h1_43   { stroke: var(--ph-sys-color-success, #3ebc6a); }
._needleBlocked_1y7h1_44 { stroke: var(--ph-sys-color-warning, #f2a93b); }

/* Reduced-motion users get the final needle position instantly. */
@media (prefers-reduced-motion: reduce) {
  ._needle_1y7h1_17 {
    transition: none !important;
  }
}
._row_zx0oz_1 {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee8f2;
}

._row_zx0oz_1:last-child {
  border-bottom: 0;
}

._gaugeCol_zx0oz_13 {
  flex: none;
  display: flex;
  align-items: center;
}

._body_zx0oz_19 {
  flex: 1;
  min-width: 0;
}

._body_zx0oz_19 strong {
  font-size: 12px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
  display: block;
}

._body_zx0oz_19 p {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  line-height: 1.35;
}

._actionCol_zx0oz_38 {
  flex: none;
  display: flex;
  align-items: center;
}

._fixBtn_zx0oz_44 {
  border: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  background: var(--ph-sys-color-surface-container-low, #f7f2fa);
  color: var(--ph-sys-color-primary, #6750a4);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}

._fixBtn_zx0oz_44:hover {
  background: var(--ph-sys-color-secondary-container, #e8def8);
}

._fixBtn_zx0oz_44:focus-visible {
  outline: 2px solid var(--ph-sys-color-primary, #6750a4);
  outline-offset: 2px;
}

._helpChip_zx0oz_66 {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  background: transparent;
  color: var(--ph-sys-color-on-surface-variant, #49454f);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-family: inherit;
}

._helpChip_zx0oz_66:hover {
  background: var(--ph-sys-color-surface-container-low, #f7f2fa);
}

._helpChip_zx0oz_66:focus-visible {
  outline: 2px solid var(--ph-sys-color-primary, #6750a4);
  outline-offset: 2px;
}

/* On phones the action column wraps below the body so long labels don't
   crush the gauge. */
@media (max-width: 480px) {
  ._row_zx0oz_1 {
    flex-wrap: wrap;
  }
  ._actionCol_zx0oz_38 {
    margin-left: auto;
  }
}
._disclosure_10pxp_1 {
  border-top: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  padding: 12px 16px;
}

._toggle_10pxp_6 {
  border: 0;
  background: transparent;
  color: var(--ph-sys-color-primary, #6750a4);
  font-weight: 900;
  font-size: 12px;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;  /* touch target */
}

._toggle_10pxp_6:hover {
  opacity: 0.8;
}

._list_10pxp_25 {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._item_10pxp_34 {
  display: grid;
  grid-template-columns: 8px auto 1fr;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
}

._dot_10pxp_42 {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  margin-top: 3px;
}

._dotPass_10pxp_50 {
  background: var(--ph-sys-color-success, #147a3b);
}

._dotFail_10pxp_54 {
  background: var(--ph-sys-color-warning, #e6971a);
}

._name_10pxp_58 {
  font-weight: 800;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
}

._msg_10pxp_63 {
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  font-size: 11px;
}
._panel_z6ctj_1 {
  background: var(--ph-sys-color-surface, #fffbfe);
  border: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  border-radius: var(--ph-shape-md, 12px);
  box-shadow: var(--ph-shadow-card, 0 1px 4px rgba(0,0,0,.08));
  overflow: hidden;
}

._head_z6ctj_9 {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

._title_z6ctj_18 {
  font-size: 14px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
}

._body_z6ctj_24 {
  padding: 14px 16px;
}

._levelUpCaption_z6ctj_28 {
  font-size: 12px;
  font-weight: 800;
  color: var(--ph-sys-color-primary, #6750a4);
  margin-top: 4px;
}

._calmCaption_z6ctj_35 {
  font-size: 12px;
  font-weight: 800;
  color: var(--ph-sys-color-success, #147a3b);
  margin-top: 4px;
}

/* ── Recalculate footer (A3) ───────────────────────── */

._footer_z6ctj_44 {
  padding: 10px 16px 14px;
  border-top: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

._recalcExplainer_z6ctj_53 {
  font-size: 12px;
  color: var(--ph-sys-color-on-surface-variant, #49454f);
  flex: 1;
  line-height: 1.4;
}

._recalcBtn_z6ctj_60 {
  background: transparent;
  color: var(--ph-sys-color-primary, #6750a4);
  border: 0;
  padding: 6px 10px;
  border-radius: 999px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

._recalcBtn_z6ctj_60:hover {
  background: var(--ph-sys-color-secondary-container, #e8def8);
}

._recalcBtn_z6ctj_60:focus-visible {
  outline: 2px solid var(--ph-sys-color-primary, #6750a4);
  outline-offset: 2px;
}

._recalcBtn_z6ctj_60:disabled {
  opacity: 0.6;
  cursor: progress;
}

._recalcBtnPrimary_z6ctj_87 {
  background: var(--ph-sys-color-primary, #6750a4);
  color: var(--ph-sys-color-on-primary, #ffffff);
}

._recalcBtnPrimary_z6ctj_87:hover {
  background: var(--ph-sys-color-primary, #6750a4);
  filter: brightness(1.06);
}
/* ── Card shell ──────────────────────────────────── */

._card_1sd94_3 {
  border: 1.5px solid var(--ph-sys-color-outline-variant, #cac4d0);
  border-radius: var(--ph-shape-md, 12px);
  background: var(--ph-sys-color-surface-container-low, #f3eff4);
  padding: 10px;
  text-align: left;
  min-height: 96px;
  cursor: pointer;
  font-family: inherit;
  width: 100%;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

._card_1sd94_3:hover {
  box-shadow: 0 2px 10px rgba(103, 80, 164, 0.12);
  border-color: var(--ph-sys-color-primary, #6750a4);
}

._suggested_1sd94_21 {
  border-color: #d7c5f2;
  background: linear-gradient(
    135deg,
    var(--ph-sys-color-primary-container, #e8def8),
    #fff8ed
  );
}

._suggested_1sd94_21:hover {
  border-color: var(--ph-sys-color-primary, #6750a4);
}

@media (prefers-reduced-motion: reduce) {
  ._card_1sd94_3 { transition: none; }
}

/* ── Abstract visual ─────────────────────────────── */

._visual_1sd94_40 {
  height: 42px;
  border-radius: 10px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #eadcff, #fff2dd);
  position: relative;
  overflow: hidden;
}

/* menu-clean: inset white rounded plate feel */
._visualMenuClean_1sd94_50::before {
  content: '';
  position: absolute;
  inset: 8px 14px;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 6px;
}

/* delivery: two pill-like shapes side-by-side */
._visualDelivery_1sd94_59::before,
._visualDelivery_1sd94_59::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 14px;
  width: 30%;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
}
._visualDelivery_1sd94_59::before { left: 10%; }
._visualDelivery_1sd94_59::after  { right: 10%; }

/* story: tall narrow centred bar — 9:16 feel */
._visualStory_1sd94_74::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.68);
}

/* bg-clean: soft food-blob on near-white */
._visualBgClean_1sd94_87 {
  background: linear-gradient(135deg, #f5f0ff, #fffaf0);
}
._visualBgClean_1sd94_87::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 24px;
  border-radius: 46% 54% 49% 51%;
  background: linear-gradient(135deg, #eadcff, #ffd9a8);
  opacity: 0.9;
}

/* ── Labels ──────────────────────────────────────── */

._label_1sd94_105 {
  font-size: 12px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
  display: block;
}

._subtitle_1sd94_112 {
  font-size: 11px;
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  display: block;
  margin-top: 3px;
  line-height: 1.4;
}
._panel_12lyb_1 {
  background: var(--ph-sys-color-surface, #fffbfe);
  border: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  border-radius: var(--ph-shape-md, 12px);
  box-shadow: var(--ph-shadow-card, 0 1px 4px rgba(0,0,0,.08));
  overflow: hidden;
}

._head_12lyb_9 {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

._title_12lyb_18 {
  font-size: 14px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
}

._body_12lyb_24 {
  padding: 14px 16px;
}

._strip_12lyb_28 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 640px) {
  ._strip_12lyb_28 {
    grid-template-columns: 1fr;
  }
}
._card_1a6ib_1 {
  border: 1.5px solid var(--ph-sys-color-outline-variant, #cac4d0);
  border-radius: var(--ph-shape-md, 12px);
  padding: 12px;
  background: var(--ph-sys-color-surface, #fffbfe);
  text-align: left;
  display: flex;
  flex-direction: column;
}

._title_1a6ib_11 {
  font-size: 12px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
  display: block;
}

._desc_1a6ib_18 {
  font-size: 11px;
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  margin: 4px 0 10px;
  line-height: 1.4;
  flex: 1;
}

._action_1a6ib_26 {
  width: 100%;
}
._panel_1njmz_1 {
  background: var(--ph-sys-color-surface, #fffbfe);
  border: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  border-radius: var(--ph-shape-md, 12px);
  box-shadow: var(--ph-shadow-card, 0 1px 4px rgba(0,0,0,.08));
  overflow: hidden;
}

._head_1njmz_9 {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

._title_1njmz_18 {
  font-size: 14px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
}

._body_1njmz_24 {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._flowGrid_1njmz_31 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (max-width: 640px) {
  ._flowGrid_1njmz_31 {
    grid-template-columns: 1fr;
  }
}

._deleteBtn_1njmz_43 {
  width: 100%;
}
/* ── Page wrapper ───────────────────────────────── */

._page_13zwr_3 {
  display: flex;
  flex-direction: column;
}

/* ── Two-column detail layout ───────────────────── */

._layout_13zwr_10 {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) 380px;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
}

/* ── Viewer column ──────────────────────────────── */

._viewerCol_13zwr_20 {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Side rail ──────────────────────────────────── */

._rail_13zwr_29 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Tablet: single column (760–999 px) ─────────── */

@media (max-width: 999px) {
  ._layout_13zwr_10 {
    grid-template-columns: 1fr;
  }
}

/* ── Phone overrides (< 640 px) ─────────────────── */

@media (max-width: 640px) {
  ._layout_13zwr_10 {
    padding: 0;
    gap: 0;
  }
}
/* ── Slider shell ─────────────────────────────────── */

._slider_11vcv_3 {
  position: relative;
  border-radius: var(--ph-shape-lg, 16px);
  overflow: hidden;
  background: #111;
  min-height: 560px;
  user-select: none;
  touch-action: none;
  outline: none;
}

._slider_11vcv_3:focus-visible ._divider_11vcv_14 {
  box-shadow: 0 0 0 3px var(--ph-sys-color-primary, #6750a4);
}

@media (max-width: 1000px) {
  ._slider_11vcv_3 { min-height: 460px; }
}

@media (max-width: 640px) {
  ._slider_11vcv_3 {
    border-radius: 0;
    min-height: 390px;
  }
}

/* ── Images ───────────────────────────────────────── */

._img_11vcv_31 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Draggable divider ────────────────────────────── */

._divider_11vcv_14 {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: white;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  cursor: ew-resize;
  transform: translateX(-50%);
}

._divider_11vcv_14::after {
  content: '↔';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  color: var(--ph-sys-color-primary, #6750a4);
  display: grid;
  place-items: center;
  font-weight: 900;
  box-shadow: var(--ph-shadow-elevated, 0 4px 12px rgba(0,0,0,.18));
  font-size: 18px;
  line-height: 1;
}

/* ── Before / After pills ─────────────────────────── */

._viewerTop_11vcv_73 {
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
  pointer-events: none;
}

._pill_11vcv_84 {
  background: rgba(0, 0, 0, 0.52);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
._row_ks7yk_1 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}

._icon_ks7yk_8 {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, color 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  ._icon_ks7yk_8 { transition: none; }
}

._iconSuccess_ks7yk_24 {
  background: var(--ph-sys-color-success-container, #c3efcd);
  color: var(--ph-sys-color-success, #1a6830);
}

._iconWarn_ks7yk_29 {
  background: var(--ph-sys-color-warning-container, #ffefc8);
  color: var(--ph-sys-color-warning, #7a4f00);
}

._iconPending_ks7yk_34 {
  background: var(--ph-sys-color-surface-container, #ece6f0);
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
}

._text_ks7yk_39 {
  flex: 1;
  min-width: 0;
}

._title_ks7yk_44 {
  font-size: 13px;
  font-weight: 700;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
  display: block;
}

._subtitle_ks7yk_51 {
  font-size: 12px;
  color: var(--ph-sys-color-on-surface-variant, #6b6573);
  display: block;
  margin-top: 2px;
  line-height: 1.4;
}
._panel_1kut2_1 {
  background: var(--ph-sys-color-surface, #fffbfe);
  border: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  border-radius: var(--ph-shape-md, 12px);
  box-shadow: var(--ph-shadow-card, 0 1px 4px rgba(0,0,0,.08));
  display: flex;
  flex-direction: column;
}

._head_1kut2_10 {
  padding: 14px 16px;
  border-bottom: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

._title_1kut2_19 {
  font-size: 14px;
  font-weight: 900;
  color: var(--ph-sys-color-on-surface, #1c1b1f);
}

._body_1kut2_25 {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

._divider_1kut2_33 {
  height: 1px;
  background: var(--ph-sys-color-outline-variant, #cac4d0);
  margin: 2px 0;
}

._actions_1kut2_39 {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

._actionBtn_1kut2_45 {
  width: 100%;
}
._page_1cj4u_1 {
  /* AdminShell provides scroll + bg */
}

/* ── Two-column layout ────────────────────────────── */

._layout_1cj4u_7 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
  align-items: start;
}

@media (max-width: 760px) {
  ._layout_1cj4u_7 {
    grid-template-columns: 1fr;
  }
}

/* ── Slider col ───────────────────────────────────── */

._sliderCol_1cj4u_22 {
  /* natural stacking */
}

._placeholder_1cj4u_26 {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--ph-shape-corner-large, 16px);
  background: var(--ph-sys-color-surface-container-highest, #e6e0e9);
}

._fallbackChip_1cj4u_33 {
  margin: 8px 0 0;
  padding: 6px 10px;
  font-size: 12px;
  background: var(--ph-sys-color-secondary-container, #e8def8);
  color: var(--ph-sys-color-on-secondary-container, #1d192b);
  border-radius: var(--ph-shape-corner-medium, 12px);
  display: inline-block;
}

/* ── Rail col ─────────────────────────────────────── */

._rail_1cj4u_45 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* hide rail action buttons on phone — mobile bar takes over */
@media (max-width: 640px) {
  ._railActions_1cj4u_53 {
    display: none;
  }
}

/* ── Mobile sticky action bar ─────────────────────── */

._mobileBar_1cj4u_60 {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ph-sys-color-surface, #fffbfe);
  border-top: 1px solid var(--ph-sys-color-outline-variant, #cac4d0);
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 10px;
  z-index: 100;
}

@media (min-width: 641px) {
  ._mobileBar_1cj4u_60 {
    display: none !important;
  }
}

._mobileBtn_1cj4u_81 {
  flex: 1;
}
.home-page-container {
  background: linear-gradient(
    135deg,
    var(--ph-ref-palette-neutral90) 0%,
    var(--ph-ref-palette-neutral95) 25%,
    var(--ph-ref-palette-neutral90) 50%,
    var(--ph-ref-palette-neutral98) 75%,
    var(--ph-ref-palette-neutral99) 100%
  );
  /* background: var(--ph-surface); */
  min-height: 100vh;
  position: relative;
}

.home-page-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background:
    radial-gradient(
      circle at 20% 30%,
      var(--ph-ref-palette-primary40) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 70%,
      var(--ph-ref-palette-primary60) 0%,
      transparent 50%
    ); */
  pointer-events: none;
  opacity: 0.6;
}

.home-page-content {
  position: relative;
  z-index: 1;
}
/*! tailwindcss v4.1.8 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-scale-x: 1;
      --tw-scale-y: 1;
      --tw-scale-z: 1;
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-space-x-reverse: 0;
      --tw-divide-y-reverse: 0;
      --tw-border-style: solid;
      --tw-gradient-position: initial;
      --tw-gradient-from: #0000;
      --tw-gradient-via: #0000;
      --tw-gradient-to: #0000;
      --tw-gradient-stops: initial;
      --tw-gradient-via-stops: initial;
      --tw-gradient-from-position: 0%;
      --tw-gradient-via-position: 50%;
      --tw-gradient-to-position: 100%;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-duration: initial;
      --tw-ease: initial;
      --tw-content: "";
      --ph-g-from: transparent;
      --ph-g-via: transparent;
      --ph-g-to: transparent;
      --ph-g-angle: 135deg;
      --ph-g-from-pos: 0%;
      --ph-g-via-pos: 50%;
      --ph-g-to-pos: 100%;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: var(--ph-ref-typeface-numeric, ui-monospace), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-red-700: oklch(50.5% .213 27.518);
    --color-red-800: oklch(44.4% .177 26.899);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-orange-50: oklch(98% .016 73.684);
    --color-orange-100: oklch(95.4% .038 75.164);
    --color-orange-200: oklch(90.1% .076 70.697);
    --color-orange-400: oklch(75% .183 55.934);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-600: oklch(64.6% .222 41.116);
    --color-orange-700: oklch(55.3% .195 38.402);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-700: oklch(55.5% .163 48.998);
    --color-amber-800: oklch(47.3% .137 46.201);
    --color-amber-900: oklch(41.4% .112 45.904);
    --color-amber-950: oklch(27.9% .077 45.635);
    --color-yellow-50: oklch(98.7% .026 102.212);
    --color-yellow-100: oklch(97.3% .071 103.193);
    --color-yellow-200: oklch(94.5% .129 101.54);
    --color-yellow-400: oklch(85.2% .199 91.936);
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-yellow-700: oklch(55.4% .135 66.442);
    --color-green-50: oklch(98.2% .018 155.826);
    --color-green-100: oklch(96.2% .044 156.743);
    --color-green-200: oklch(92.5% .084 155.995);
    --color-green-400: oklch(79.2% .209 151.711);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-green-700: oklch(52.7% .154 150.069);
    --color-green-800: oklch(44.8% .119 151.328);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-blue-50: oklch(97% .014 254.604);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-200: oklch(88.2% .059 254.128);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-blue-800: oklch(42.4% .199 265.638);
    --color-blue-900: oklch(37.9% .146 265.522);
    --color-indigo-50: oklch(96.2% .018 272.314);
    --color-indigo-100: oklch(93% .034 272.788);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-indigo-700: oklch(45.7% .24 277.023);
    --color-violet-50: oklch(96.9% .016 293.756);
    --color-violet-500: oklch(60.6% .25 292.717);
    --color-violet-600: oklch(54.1% .281 293.009);
    --color-purple-50: oklch(97.7% .014 308.299);
    --color-purple-100: oklch(94.6% .033 307.174);
    --color-purple-300: oklch(82.7% .119 306.383);
    --color-purple-600: oklch(55.8% .288 302.321);
    --color-purple-700: oklch(49.6% .265 301.924);
    --color-purple-800: oklch(43.8% .218 303.724);
    --color-pink-50: oklch(97.1% .014 343.198);
    --color-pink-100: oklch(94.8% .028 342.258);
    --color-pink-500: oklch(65.6% .241 354.308);
    --color-pink-600: oklch(59.2% .249 .584);
    --color-slate-50: oklch(98.4% .003 247.858);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-300: oklch(87.2% .01 258.338);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-800: oklch(27.8% .033 256.848);
    --color-gray-900: oklch(21% .034 264.665);
    --color-zinc-100: oklch(96.7% .001 286.375);
    --color-zinc-200: oklch(92% .004 286.32);
    --color-zinc-500: oklch(55.2% .016 285.938);
    --color-neutral-50: var(--ph-ref-palette-neutral50);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-600: oklch(43.9% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-black: #000;
    --color-white: #fff;
    --spacing: .25rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
    --breakpoint-2xl: 96rem;
    --container-xs: 20rem;
    --container-sm: 24rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-xl: 36rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --text-xs: .75rem;
    --text-xs--line-height: calc(1 / .75);
    --text-sm: .875rem;
    --text-sm--line-height: calc(1.25 / .875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-5xl: 3rem;
    --text-5xl--line-height: 1;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    --tracking-tight: -.025em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --radius-xl: .75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-3xl: 64px;
    --aspect-video: 16 / 9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-surface: var(--ph-surface);
    --color-primary: var(--ph-primaryXX);
    --color-outline: var(--ph-outline);
    --ph-color-surface-4: var(--ph-surface-container-high);
    --ph-shadow-sm: 0px 1px 2px 0px #0000000d;
    --ph-shadow-md: 0px 1px 3px 0px #0000001a, 0px 1px 2px -1px #0000001a;
    --ph-shadow-lg: 0px 10px 15px -3px #0000001a, 0px 4px 6px -2px #0000000d;
    --color-palette-primary-10: var(--ph-ref-palette-primary10);
    --color-palette-primary-20: var(--ph-ref-palette-primary20);
    --color-palette-primary-40: var(--ph-ref-palette-primary40);
    --color-palette-primary-50: var(--ph-ref-palette-primary50);
    --color-palette-primary-80: var(--ph-ref-palette-primary80);
    --color-palette-primary-95: var(--ph-ref-palette-primary95);
    --color-neutral-5: var(--ph-ref-palette-neutral5);
    --color-neutral-10: var(--ph-ref-palette-neutral10);
    --color-neutral-20: var(--ph-ref-palette-neutral20);
    --color-neutral-30: var(--ph-ref-palette-neutral30);
    --color-neutral-40: var(--ph-ref-palette-neutral40);
    --color-neutral-60: var(--ph-ref-palette-neutral60);
    --color-neutral-70: var(--ph-ref-palette-neutral70);
    --color-neutral-80: var(--ph-ref-palette-neutral80);
    --color-neutral-85: var(--ph-ref-palette-neutral85);
    --color-neutral-90: var(--ph-ref-palette-neutral90);
    --color-neutral-92: var(--ph-ref-palette-neutral92);
    --color-neutral-94: var(--ph-ref-palette-neutral94);
    --color-neutral-95: var(--ph-ref-palette-neutral95);
    --color-neutral-96: var(--ph-ref-palette-neutral96);
    --color-neutral-98: var(--ph-ref-palette-neutral98);
    --color-neutral-99: var(--ph-ref-palette-neutral99);
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer mui, components;

@layer utilities {
  .\@container {
    container-type: inline-size;
  }

  .pointer-events-auto {
    pointer-events: auto;
  }

  .pointer-events-none {
    pointer-events: none;
  }

  .\!visible {
    visibility: visible !important;
  }

  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .\!fixed {
    position: fixed !important;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .\!inset-0 {
    inset: calc(var(--spacing) * 0) !important;
  }

  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }

  .inset-x-0 {
    inset-inline: calc(var(--spacing) * 0);
  }

  .inset-y-0 {
    inset-block: calc(var(--spacing) * 0);
  }

  .\!top-0 {
    top: calc(var(--spacing) * 0) !important;
  }

  .\!top-14 {
    top: calc(var(--spacing) * 14) !important;
  }

  .\!top-20 {
    top: calc(var(--spacing) * 20) !important;
  }

  .\!top-\[5px\] {
    top: 5px !important;
  }

  .-top-8 {
    top: calc(var(--spacing) * -8);
  }

  .-top-\[2px\] {
    top: -2px;
  }

  .-top-\[10px\] {
    top: -10px;
  }

  .-top-\[18px\] {
    top: -18px;
  }

  .top-0 {
    top: calc(var(--spacing) * 0);
  }

  .top-0\.5 {
    top: calc(var(--spacing) * .5);
  }

  .top-1 {
    top: calc(var(--spacing) * 1);
  }

  .top-1\.5 {
    top: calc(var(--spacing) * 1.5);
  }

  .top-1\/2 {
    top: 50%;
  }

  .top-2 {
    top: calc(var(--spacing) * 2);
  }

  .top-2\.5 {
    top: calc(var(--spacing) * 2.5);
  }

  .top-3 {
    top: calc(var(--spacing) * 3);
  }

  .top-3\.5 {
    top: calc(var(--spacing) * 3.5);
  }

  .top-4 {
    top: calc(var(--spacing) * 4);
  }

  .top-5 {
    top: calc(var(--spacing) * 5);
  }

  .top-7 {
    top: calc(var(--spacing) * 7);
  }

  .top-9 {
    top: calc(var(--spacing) * 9);
  }

  .top-10 {
    top: calc(var(--spacing) * 10);
  }

  .top-12 {
    top: calc(var(--spacing) * 12);
  }

  .top-20 {
    top: calc(var(--spacing) * 20);
  }

  .top-\[-16px\] {
    top: -16px;
  }

  .top-\[-40px\] {
    top: -40px;
  }

  .top-\[-50px\] {
    top: -50px;
  }

  .top-\[1px\] {
    top: 1px;
  }

  .top-\[2px\] {
    top: 2px;
  }

  .top-\[4px\] {
    top: 4px;
  }

  .top-\[5px\] {
    top: 5px;
  }

  .top-\[6px\] {
    top: 6px;
  }

  .top-\[7px\] {
    top: 7px;
  }

  .top-\[16px\] {
    top: 16px;
  }

  .top-\[17px\] {
    top: 17px;
  }

  .top-\[30\%\] {
    top: 30%;
  }

  .top-\[42px\] {
    top: 42px;
  }

  .top-\[50px\] {
    top: 50px;
  }

  .top-\[58px\] {
    top: 58px;
  }

  .top-\[60px\] {
    top: 60px;
  }

  .top-\[64px\] {
    top: 64px;
  }

  .top-\[66px\] {
    top: 66px;
  }

  .top-\[69px\] {
    top: 69px;
  }

  .top-\[70px\] {
    top: 70px;
  }

  .top-\[125px\] {
    top: 125px;
  }

  .top-\[calc\(100\%\+8px\)\] {
    top: calc(100% + 8px);
  }

  .top-\[calc\(var\(--app-navbar-height\)_\+_24px\)\] {
    top: calc(var(--app-navbar-height)  + 24px);
  }

  .top-\[var\(--app-navbar-height\)\] {
    top: var(--app-navbar-height);
  }

  .top-full {
    top: 100%;
  }

  .-right-0\.5 {
    right: calc(var(--spacing) * -.5);
  }

  .-right-1 {
    right: calc(var(--spacing) * -1);
  }

  .-right-5 {
    right: calc(var(--spacing) * -5);
  }

  .right-0 {
    right: calc(var(--spacing) * 0);
  }

  .right-0\.5 {
    right: calc(var(--spacing) * .5);
  }

  .right-1 {
    right: calc(var(--spacing) * 1);
  }

  .right-1\.5 {
    right: calc(var(--spacing) * 1.5);
  }

  .right-2 {
    right: calc(var(--spacing) * 2);
  }

  .right-2\.5 {
    right: calc(var(--spacing) * 2.5);
  }

  .right-3 {
    right: calc(var(--spacing) * 3);
  }

  .right-3\.5 {
    right: calc(var(--spacing) * 3.5);
  }

  .right-4 {
    right: calc(var(--spacing) * 4);
  }

  .right-6 {
    right: calc(var(--spacing) * 6);
  }

  .right-8 {
    right: calc(var(--spacing) * 8);
  }

  .right-\[-30px\] {
    right: -30px;
  }

  .right-\[5px\] {
    right: 5px;
  }

  .right-\[6px\] {
    right: 6px;
  }

  .right-\[16px\] {
    right: 16px;
  }

  .-bottom-0\.5 {
    bottom: calc(var(--spacing) * -.5);
  }

  .-bottom-1 {
    bottom: calc(var(--spacing) * -1);
  }

  .-bottom-6 {
    bottom: calc(var(--spacing) * -6);
  }

  .bottom-0 {
    bottom: calc(var(--spacing) * 0);
  }

  .bottom-0\.5 {
    bottom: calc(var(--spacing) * .5);
  }

  .bottom-1 {
    bottom: calc(var(--spacing) * 1);
  }

  .bottom-1\.5 {
    bottom: calc(var(--spacing) * 1.5);
  }

  .bottom-2 {
    bottom: calc(var(--spacing) * 2);
  }

  .bottom-4 {
    bottom: calc(var(--spacing) * 4);
  }

  .bottom-6 {
    bottom: calc(var(--spacing) * 6);
  }

  .bottom-\[-40px\] {
    bottom: -40px;
  }

  .bottom-\[0\] {
    bottom: 0;
  }

  .bottom-\[5px\] {
    bottom: 5px;
  }

  .bottom-\[5rem\] {
    bottom: 5rem;
  }

  .bottom-\[26\%\] {
    bottom: 26%;
  }

  .\!left-0 {
    left: calc(var(--spacing) * 0) !important;
  }

  .-left-\[100px\] {
    left: -100px;
  }

  .-left-\[270px\] {
    left: -270px;
  }

  .-left-\[350px\] {
    left: -350px;
  }

  .left-0 {
    left: calc(var(--spacing) * 0);
  }

  .left-1 {
    left: calc(var(--spacing) * 1);
  }

  .left-1\.5 {
    left: calc(var(--spacing) * 1.5);
  }

  .left-1\/2 {
    left: 50%;
  }

  .left-2 {
    left: calc(var(--spacing) * 2);
  }

  .left-2\.5 {
    left: calc(var(--spacing) * 2.5);
  }

  .left-3 {
    left: calc(var(--spacing) * 3);
  }

  .left-4 {
    left: calc(var(--spacing) * 4);
  }

  .left-10 {
    left: calc(var(--spacing) * 10);
  }

  .left-\[-16px\] {
    left: -16px;
  }

  .left-\[-20px\] {
    left: -20px;
  }

  .left-\[0px\] {
    left: 0;
  }

  .left-\[8px\] {
    left: 8px;
  }

  .left-\[50\%\] {
    left: 50%;
  }

  .left-\[98px\] {
    left: 98px;
  }

  .z-0 {
    z-index: 0;
  }

  .z-1 {
    z-index: 1;
  }

  .z-10 {
    z-index: 10;
  }

  .z-20 {
    z-index: 20;
  }

  .z-30 {
    z-index: 30;
  }

  .z-40 {
    z-index: 40;
  }

  .z-50 {
    z-index: 50;
  }

  .z-100 {
    z-index: 100;
  }

  .z-1000 {
    z-index: 1000;
  }

  .z-2000 {
    z-index: 2000;
  }

  .z-5000 {
    z-index: 5000;
  }

  .z-\[1\] {
    z-index: 1;
  }

  .z-\[2\] {
    z-index: 2;
  }

  .z-\[60\] {
    z-index: 60;
  }

  .z-\[70\] {
    z-index: 70;
  }

  .z-\[90\] {
    z-index: 90;
  }

  .z-\[98\] {
    z-index: 98;
  }

  .z-\[100\] {
    z-index: 100;
  }

  .z-\[110\] {
    z-index: 110;
  }

  .z-\[120\] {
    z-index: 120;
  }

  .z-\[200\] {
    z-index: 200;
  }

  .z-\[1300\] {
    z-index: 1300;
  }

  .z-\[1400\] {
    z-index: 1400;
  }

  .z-\[5000\] {
    z-index: 5000;
  }

  .z-\[9999\] {
    z-index: 9999;
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

  .order-3418 {
    order: 3418;
  }

  .order-3421 {
    order: 3421;
  }

  .col-1 {
    grid-column: 1;
  }

  .col-2 {
    grid-column: 2;
  }

  .col-3 {
    grid-column: 3;
  }

  .col-4 {
    grid-column: 4;
  }

  .col-span-1 {
    grid-column: span 1 / span 1;
  }

  .col-span-2 {
    grid-column: span 2 / span 2;
  }

  .col-span-3 {
    grid-column: span 3 / span 3;
  }

  .col-span-4 {
    grid-column: span 4 / span 4;
  }

  .col-span-5 {
    grid-column: span 5 / span 5;
  }

  .col-span-6 {
    grid-column: span 6 / span 6;
  }

  .col-span-7 {
    grid-column: span 7 / span 7;
  }

  .col-span-8 {
    grid-column: span 8 / span 8;
  }

  .col-span-10 {
    grid-column: span 10 / span 10;
  }

  .col-span-12 {
    grid-column: span 12 / span 12;
  }

  .col-span-full {
    grid-column: 1 / -1;
  }

  .row-1 {
    grid-row: 1;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .-m-4 {
    margin: calc(var(--spacing) * -4);
  }

  .m-0 {
    margin: calc(var(--spacing) * 0);
  }

  .m-1 {
    margin: calc(var(--spacing) * 1);
  }

  .m-1\.5 {
    margin: calc(var(--spacing) * 1.5);
  }

  .m-2 {
    margin: calc(var(--spacing) * 2);
  }

  .m-2\.5 {
    margin: calc(var(--spacing) * 2.5);
  }

  .m-3 {
    margin: calc(var(--spacing) * 3);
  }

  .m-4 {
    margin: calc(var(--spacing) * 4);
  }

  .m-5 {
    margin: calc(var(--spacing) * 5);
  }

  .m-6 {
    margin: calc(var(--spacing) * 6);
  }

  .m-auto {
    margin: auto;
  }

  .-mx-10 {
    margin-inline: calc(var(--spacing) * -10);
  }

  .mx-1 {
    margin-inline: calc(var(--spacing) * 1);
  }

  .mx-2 {
    margin-inline: calc(var(--spacing) * 2);
  }

  .mx-3 {
    margin-inline: calc(var(--spacing) * 3);
  }

  .mx-4 {
    margin-inline: calc(var(--spacing) * 4);
  }

  .mx-\[-1rem\] {
    margin-inline: -1rem;
  }

  .mx-auto {
    margin-inline: auto;
  }

  .my-0\.5 {
    margin-block: calc(var(--spacing) * .5);
  }

  .my-1 {
    margin-block: calc(var(--spacing) * 1);
  }

  .my-2 {
    margin-block: calc(var(--spacing) * 2);
  }

  .my-3 {
    margin-block: calc(var(--spacing) * 3);
  }

  .my-4 {
    margin-block: calc(var(--spacing) * 4);
  }

  .my-5 {
    margin-block: calc(var(--spacing) * 5);
  }

  .my-6 {
    margin-block: calc(var(--spacing) * 6);
  }

  .my-8 {
    margin-block: calc(var(--spacing) * 8);
  }

  .my-auto {
    margin-block: auto;
  }

  .-mt-0\.5 {
    margin-top: calc(var(--spacing) * -.5);
  }

  .-mt-1 {
    margin-top: calc(var(--spacing) * -1);
  }

  .-mt-2 {
    margin-top: calc(var(--spacing) * -2);
  }

  .-mt-3 {
    margin-top: calc(var(--spacing) * -3);
  }

  .-mt-5 {
    margin-top: calc(var(--spacing) * -5);
  }

  .-mt-6 {
    margin-top: calc(var(--spacing) * -6);
  }

  .-mt-12 {
    margin-top: calc(var(--spacing) * -12);
  }

  .-mt-\[2px\] {
    margin-top: -2px;
  }

  .-mt-\[10px\] {
    margin-top: -10px;
  }

  .-mt-\[20px\] {
    margin-top: -20px;
  }

  .-mt-\[40px\] {
    margin-top: -40px;
  }

  .mt-0 {
    margin-top: calc(var(--spacing) * 0);
  }

  .mt-0\.5 {
    margin-top: calc(var(--spacing) * .5);
  }

  .mt-1 {
    margin-top: calc(var(--spacing) * 1);
  }

  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }

  .mt-2 {
    margin-top: calc(var(--spacing) * 2);
  }

  .mt-2\.5 {
    margin-top: calc(var(--spacing) * 2.5);
  }

  .mt-3 {
    margin-top: calc(var(--spacing) * 3);
  }

  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }

  .mt-5 {
    margin-top: calc(var(--spacing) * 5);
  }

  .mt-6 {
    margin-top: calc(var(--spacing) * 6);
  }

  .mt-8 {
    margin-top: calc(var(--spacing) * 8);
  }

  .mt-10 {
    margin-top: calc(var(--spacing) * 10);
  }

  .mt-\[-30px\] {
    margin-top: -30px;
  }

  .mt-\[0px\] {
    margin-top: 0;
  }

  .mt-\[6px\] {
    margin-top: 6px;
  }

  .mt-\[10px\] {
    margin-top: 10px;
  }

  .mt-\[18px\] {
    margin-top: 18px;
  }

  .mt-\[32px\] {
    margin-top: 32px;
  }

  .mt-auto {
    margin-top: auto;
  }

  .mt-px {
    margin-top: 1px;
  }

  .mr-0\.5 {
    margin-right: calc(var(--spacing) * .5);
  }

  .mr-1 {
    margin-right: calc(var(--spacing) * 1);
  }

  .mr-2 {
    margin-right: calc(var(--spacing) * 2);
  }

  .mr-3 {
    margin-right: calc(var(--spacing) * 3);
  }

  .mr-4 {
    margin-right: calc(var(--spacing) * 4);
  }

  .mr-5 {
    margin-right: calc(var(--spacing) * 5);
  }

  .mr-8 {
    margin-right: calc(var(--spacing) * 8);
  }

  .mr-10 {
    margin-right: calc(var(--spacing) * 10);
  }

  .mr-12 {
    margin-right: calc(var(--spacing) * 12);
  }

  .\!mb-0 {
    margin-bottom: calc(var(--spacing) * 0) !important;
  }

  .\!mb-1 {
    margin-bottom: calc(var(--spacing) * 1) !important;
  }

  .\!mb-\[5px\] {
    margin-bottom: 5px !important;
  }

  .-mb-3 {
    margin-bottom: calc(var(--spacing) * -3);
  }

  .-mb-px {
    margin-bottom: -1px;
  }

  .mb-0 {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * .5);
  }

  .mb-1 {
    margin-bottom: calc(var(--spacing) * 1);
  }

  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }

  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }

  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }

  .mb-3 {
    margin-bottom: calc(var(--spacing) * 3);
  }

  .mb-3\.5 {
    margin-bottom: calc(var(--spacing) * 3.5);
  }

  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }

  .mb-5 {
    margin-bottom: calc(var(--spacing) * 5);
  }

  .mb-6 {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .mb-7 {
    margin-bottom: calc(var(--spacing) * 7);
  }

  .mb-8 {
    margin-bottom: calc(var(--spacing) * 8);
  }

  .mb-10 {
    margin-bottom: calc(var(--spacing) * 10);
  }

  .mb-11 {
    margin-bottom: calc(var(--spacing) * 11);
  }

  .mb-\[8px\] {
    margin-bottom: 8px;
  }

  .mb-\[14px\] {
    margin-bottom: 14px;
  }

  .mb-\[21px\] {
    margin-bottom: 21px;
  }

  .-ml-1 {
    margin-left: calc(var(--spacing) * -1);
  }

  .-ml-10 {
    margin-left: calc(var(--spacing) * -10);
  }

  .-ml-\[20px\] {
    margin-left: -20px;
  }

  .ml-0 {
    margin-left: calc(var(--spacing) * 0);
  }

  .ml-0\.5 {
    margin-left: calc(var(--spacing) * .5);
  }

  .ml-1 {
    margin-left: calc(var(--spacing) * 1);
  }

  .ml-1\.5 {
    margin-left: calc(var(--spacing) * 1.5);
  }

  .ml-2 {
    margin-left: calc(var(--spacing) * 2);
  }

  .ml-3 {
    margin-left: calc(var(--spacing) * 3);
  }

  .ml-4 {
    margin-left: calc(var(--spacing) * 4);
  }

  .ml-5 {
    margin-left: calc(var(--spacing) * 5);
  }

  .ml-8 {
    margin-left: calc(var(--spacing) * 8);
  }

  .ml-\[-15px\] {
    margin-left: -15px;
  }

  .ml-\[38px\] {
    margin-left: 38px;
  }

  .ml-auto {
    margin-left: auto;
  }

  .line-clamp-1 {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-3 {
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-4 {
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-5 {
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .line-clamp-6 {
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .\!block {
    display: block !important;
  }

  .\!grid {
    display: grid !important;
  }

  .\!hidden {
    display: none !important;
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .table-row {
    display: table-row;
  }

  .aspect-\[1\/1\] {
    aspect-ratio: 1;
  }

  .aspect-\[3\/2\] {
    aspect-ratio: 3 / 2;
  }

  .aspect-\[3\/4\] {
    aspect-ratio: 3 / 4;
  }

  .aspect-\[4\/3\] {
    aspect-ratio: 4 / 3;
  }

  .aspect-\[16\/9\] {
    aspect-ratio: 16 / 9;
  }

  .aspect-square {
    aspect-ratio: 1;
  }

  .aspect-video {
    aspect-ratio: var(--aspect-video);
  }

  .size-1 {
    width: calc(var(--spacing) * 1);
    height: calc(var(--spacing) * 1);
  }

  .size-4 {
    width: calc(var(--spacing) * 4);
    height: calc(var(--spacing) * 4);
  }

  .size-5 {
    width: calc(var(--spacing) * 5);
    height: calc(var(--spacing) * 5);
  }

  .size-6 {
    width: calc(var(--spacing) * 6);
    height: calc(var(--spacing) * 6);
  }

  .size-12 {
    width: calc(var(--spacing) * 12);
    height: calc(var(--spacing) * 12);
  }

  .\!h-6 {
    height: calc(var(--spacing) * 6) !important;
  }

  .\!h-7 {
    height: calc(var(--spacing) * 7) !important;
  }

  .\!h-10 {
    height: calc(var(--spacing) * 10) !important;
  }

  .\!h-\[40px\] {
    height: 40px !important;
  }

  .\!h-\[52px\] {
    height: 52px !important;
  }

  .\!h-\[150px\] {
    height: 150px !important;
  }

  .\!h-auto {
    height: auto !important;
  }

  .h-0 {
    height: calc(var(--spacing) * 0);
  }

  .h-0\.5 {
    height: calc(var(--spacing) * .5);
  }

  .h-1 {
    height: calc(var(--spacing) * 1);
  }

  .h-1\.5 {
    height: calc(var(--spacing) * 1.5);
  }

  .h-2 {
    height: calc(var(--spacing) * 2);
  }

  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }

  .h-3 {
    height: calc(var(--spacing) * 3);
  }

  .h-3\.5 {
    height: calc(var(--spacing) * 3.5);
  }

  .h-4 {
    height: calc(var(--spacing) * 4);
  }

  .h-5 {
    height: calc(var(--spacing) * 5);
  }

  .h-6 {
    height: calc(var(--spacing) * 6);
  }

  .h-7 {
    height: calc(var(--spacing) * 7);
  }

  .h-8 {
    height: calc(var(--spacing) * 8);
  }

  .h-9 {
    height: calc(var(--spacing) * 9);
  }

  .h-10 {
    height: calc(var(--spacing) * 10);
  }

  .h-11 {
    height: calc(var(--spacing) * 11);
  }

  .h-12 {
    height: calc(var(--spacing) * 12);
  }

  .h-14 {
    height: calc(var(--spacing) * 14);
  }

  .h-16 {
    height: calc(var(--spacing) * 16);
  }

  .h-20 {
    height: calc(var(--spacing) * 20);
  }

  .h-24 {
    height: calc(var(--spacing) * 24);
  }

  .h-26 {
    height: calc(var(--spacing) * 26);
  }

  .h-32 {
    height: calc(var(--spacing) * 32);
  }

  .h-36 {
    height: calc(var(--spacing) * 36);
  }

  .h-40 {
    height: calc(var(--spacing) * 40);
  }

  .h-48 {
    height: calc(var(--spacing) * 48);
  }

  .h-56 {
    height: calc(var(--spacing) * 56);
  }

  .h-60 {
    height: calc(var(--spacing) * 60);
  }

  .h-64 {
    height: calc(var(--spacing) * 64);
  }

  .h-96 {
    height: calc(var(--spacing) * 96);
  }

  .h-\[0px\] {
    height: 0;
  }

  .h-\[1px\] {
    height: 1px;
  }

  .h-\[2\.5rem\] {
    height: 2.5rem;
  }

  .h-\[2px\] {
    height: 2px;
  }

  .h-\[3px\] {
    height: 3px;
  }

  .h-\[4rem\] {
    height: 4rem;
  }

  .h-\[5px\] {
    height: 5px;
  }

  .h-\[6px\] {
    height: 6px;
  }

  .h-\[7px\] {
    height: 7px;
  }

  .h-\[7rem\] {
    height: 7rem;
  }

  .h-\[8px\] {
    height: 8px;
  }

  .h-\[15px\] {
    height: 15px;
  }

  .h-\[18px\] {
    height: 18px;
  }

  .h-\[20px\] {
    height: 20px;
  }

  .h-\[22px\] {
    height: 22px;
  }

  .h-\[24px\] {
    height: 24px;
  }

  .h-\[25px\] {
    height: 25px;
  }

  .h-\[26px\] {
    height: 26px;
  }

  .h-\[28px\] {
    height: 28px;
  }

  .h-\[30px\] {
    height: 30px;
  }

  .h-\[33px\] {
    height: 33px;
  }

  .h-\[34px\] {
    height: 34px;
  }

  .h-\[38px\] {
    height: 38px;
  }

  .h-\[40\.04px\] {
    height: 40.04px;
  }

  .h-\[40px\] {
    height: 40px;
  }

  .h-\[42px\] {
    height: 42px;
  }

  .h-\[44px\] {
    height: 44px;
  }

  .h-\[45px\] {
    height: 45px;
  }

  .h-\[46px\] {
    height: 46px;
  }

  .h-\[48px\] {
    height: 48px;
  }

  .h-\[50\%\] {
    height: 50%;
  }

  .h-\[50px\] {
    height: 50px;
  }

  .h-\[52px\] {
    height: 52px;
  }

  .h-\[53px\] {
    height: 53px;
  }

  .h-\[55\%\] {
    height: 55%;
  }

  .h-\[60px\] {
    height: 60px;
  }

  .h-\[63px\] {
    height: 63px;
  }

  .h-\[64px\] {
    height: 64px;
  }

  .h-\[68px\] {
    height: 68px;
  }

  .h-\[71\] {
    height: 71px;
  }

  .h-\[72px\] {
    height: 72px;
  }

  .h-\[80px\] {
    height: 80px;
  }

  .h-\[80vh\] {
    height: 80vh;
  }

  .h-\[83px\] {
    height: 83px;
  }

  .h-\[88px\] {
    height: 88px;
  }

  .h-\[100px\] {
    height: 100px;
  }

  .h-\[100vh\] {
    height: 100vh;
  }

  .h-\[120px\] {
    height: 120px;
  }

  .h-\[134px\] {
    height: 134px;
  }

  .h-\[140px\] {
    height: 140px;
  }

  .h-\[148px\] {
    height: 148px;
  }

  .h-\[178px\] {
    height: 178px;
  }

  .h-\[180px\] {
    height: 180px;
  }

  .h-\[184px\] {
    height: 184px;
  }

  .h-\[200px\] {
    height: 200px;
  }

  .h-\[220px\] {
    height: 220px;
  }

  .h-\[240px\] {
    height: 240px;
  }

  .h-\[250px\] {
    height: 250px;
  }

  .h-\[260px\] {
    height: 260px;
  }

  .h-\[280px\] {
    height: 280px;
  }

  .h-\[300px\] {
    height: 300px;
  }

  .h-\[400px\] {
    height: 400px;
  }

  .h-\[420px\] {
    height: 420px;
  }

  .h-\[480px\] {
    height: 480px;
  }

  .h-\[500\], .h-\[500px\] {
    height: 500px;
  }

  .h-\[570px\] {
    height: 570px;
  }

  .h-\[600px\] {
    height: 600px;
  }

  .h-\[715px\] {
    height: 715px;
  }

  .h-\[min\(720px\,calc\(100vh-140px\)\)\] {
    height: min(720px, 100vh - 140px);
  }

  .h-auto {
    height: auto;
  }

  .h-full {
    height: 100%;
  }

  .h-px {
    height: 1px;
  }

  .h-screen {
    height: 100vh;
  }

  .\!max-h-screen {
    max-height: 100vh !important;
  }

  .max-h-0 {
    max-height: calc(var(--spacing) * 0);
  }

  .max-h-24 {
    max-height: calc(var(--spacing) * 24);
  }

  .max-h-64 {
    max-height: calc(var(--spacing) * 64);
  }

  .max-h-72 {
    max-height: calc(var(--spacing) * 72);
  }

  .max-h-80 {
    max-height: calc(var(--spacing) * 80);
  }

  .max-h-96 {
    max-height: calc(var(--spacing) * 96);
  }

  .max-h-\[60vh\] {
    max-height: 60vh;
  }

  .max-h-\[64px\] {
    max-height: 64px;
  }

  .max-h-\[72vh\] {
    max-height: 72vh;
  }

  .max-h-\[140px\] {
    max-height: 140px;
  }

  .max-h-\[200px\] {
    max-height: 200px;
  }

  .max-h-\[220px\] {
    max-height: 220px;
  }

  .max-h-\[240px\] {
    max-height: 240px;
  }

  .max-h-\[260px\] {
    max-height: 260px;
  }

  .max-h-\[280px\] {
    max-height: 280px;
  }

  .max-h-\[300px\] {
    max-height: 300px;
  }

  .max-h-\[320px\] {
    max-height: 320px;
  }

  .max-h-\[350px\] {
    max-height: 350px;
  }

  .max-h-\[360px\] {
    max-height: 360px;
  }

  .max-h-\[400px\] {
    max-height: 400px;
  }

  .max-h-\[420px\] {
    max-height: 420px;
  }

  .max-h-\[640px\] {
    max-height: 640px;
  }

  .max-h-\[800px\] {
    max-height: 800px;
  }

  .max-h-\[1000px\] {
    max-height: 1000px;
  }

  .max-h-\[min\(40vh\,360px\)\] {
    max-height: min(40vh, 360px);
  }

  .max-h-\[min\(50vh\,480px\)\] {
    max-height: min(50vh, 480px);
  }

  .max-h-\[min\(52vh\,520px\)\] {
    max-height: min(52vh, 520px);
  }

  .max-h-\[min\(70vh\,640px\)\] {
    max-height: min(70vh, 640px);
  }

  .max-h-\[min\(70vh\,800px\)\] {
    max-height: min(70vh, 800px);
  }

  .max-h-\[min\(90vh\,800px\)\] {
    max-height: min(90vh, 800px);
  }

  .max-h-\[min\(90vw\,90vh\)\] {
    max-height: min(90vw, 90vh);
  }

  .max-h-\[min\(95vh\,calc\(100vh-var\(--ph-top-bar-height\,64px\)-2rem\)\)\] {
    max-height: min(95vh, calc(100vh - var(--ph-top-bar-height, 64px)  - 2rem));
  }

  .max-h-full {
    max-height: 100%;
  }

  .max-h-screen {
    max-height: 100vh;
  }

  .min-h-0 {
    min-height: calc(var(--spacing) * 0);
  }

  .min-h-10 {
    min-height: calc(var(--spacing) * 10);
  }

  .min-h-11 {
    min-height: calc(var(--spacing) * 11);
  }

  .min-h-14 {
    min-height: calc(var(--spacing) * 14);
  }

  .min-h-20 {
    min-height: calc(var(--spacing) * 20);
  }

  .min-h-36 {
    min-height: calc(var(--spacing) * 36);
  }

  .min-h-\[2px\] {
    min-height: 2px;
  }

  .min-h-\[4\.5rem\] {
    min-height: 4.5rem;
  }

  .min-h-\[22\.5rem\] {
    min-height: 22.5rem;
  }

  .min-h-\[28px\] {
    min-height: 28px;
  }

  .min-h-\[36px\] {
    min-height: 36px;
  }

  .min-h-\[40vh\] {
    min-height: 40vh;
  }

  .min-h-\[44px\] {
    min-height: 44px;
  }

  .min-h-\[48px\] {
    min-height: 48px;
  }

  .min-h-\[50vh\] {
    min-height: 50vh;
  }

  .min-h-\[56px\] {
    min-height: 56px;
  }

  .min-h-\[60px\] {
    min-height: 60px;
  }

  .min-h-\[64px\] {
    min-height: 64px;
  }

  .min-h-\[72px\] {
    min-height: 72px;
  }

  .min-h-\[80px\] {
    min-height: 80px;
  }

  .min-h-\[80vh\] {
    min-height: 80vh;
  }

  .min-h-\[100px\] {
    min-height: 100px;
  }

  .min-h-\[120px\] {
    min-height: 120px;
  }

  .min-h-\[140px\] {
    min-height: 140px;
  }

  .min-h-\[148px\] {
    min-height: 148px;
  }

  .min-h-\[160px\] {
    min-height: 160px;
  }

  .min-h-\[200px\] {
    min-height: 200px;
  }

  .min-h-\[240px\] {
    min-height: 240px;
  }

  .min-h-\[280px\] {
    min-height: 280px;
  }

  .min-h-\[300px\] {
    min-height: 300px;
  }

  .min-h-\[320px\] {
    min-height: 320px;
  }

  .min-h-\[420px\] {
    min-height: 420px;
  }

  .min-h-\[480px\] {
    min-height: 480px;
  }

  .min-h-\[500px\] {
    min-height: 500px;
  }

  .min-h-\[514px\] {
    min-height: 514px;
  }

  .min-h-\[520px\] {
    min-height: 520px;
  }

  .min-h-\[521px\] {
    min-height: 521px;
  }

  .min-h-\[583px\] {
    min-height: 583px;
  }

  .min-h-\[calc\(100vh-61px\)\] {
    min-height: calc(100vh - 61px);
  }

  .min-h-\[min\(60vh\,520px\)\] {
    min-height: min(60vh, 520px);
  }

  .min-h-full {
    min-height: 100%;
  }

  .min-h-min {
    min-height: min-content;
  }

  .min-h-screen {
    min-height: 100vh;
  }

  .\!w-7 {
    width: calc(var(--spacing) * 7) !important;
  }

  .\!w-\[343px\] {
    width: 343px !important;
  }

  .\!w-\[422px\] {
    width: 422px !important;
  }

  .\!w-auto {
    width: auto !important;
  }

  .\!w-full {
    width: 100% !important;
  }

  .w-0 {
    width: calc(var(--spacing) * 0);
  }

  .w-1 {
    width: calc(var(--spacing) * 1);
  }

  .w-1\.5 {
    width: calc(var(--spacing) * 1.5);
  }

  .w-1\/2 {
    width: 50%;
  }

  .w-1\/3 {
    width: 33.3333%;
  }

  .w-1\/4 {
    width: 25%;
  }

  .w-2 {
    width: calc(var(--spacing) * 2);
  }

  .w-2\.5 {
    width: calc(var(--spacing) * 2.5);
  }

  .w-3 {
    width: calc(var(--spacing) * 3);
  }

  .w-3\.5 {
    width: calc(var(--spacing) * 3.5);
  }

  .w-4 {
    width: calc(var(--spacing) * 4);
  }

  .w-5 {
    width: calc(var(--spacing) * 5);
  }

  .w-6 {
    width: calc(var(--spacing) * 6);
  }

  .w-7 {
    width: calc(var(--spacing) * 7);
  }

  .w-8 {
    width: calc(var(--spacing) * 8);
  }

  .w-9 {
    width: calc(var(--spacing) * 9);
  }

  .w-10 {
    width: calc(var(--spacing) * 10);
  }

  .w-11 {
    width: calc(var(--spacing) * 11);
  }

  .w-12 {
    width: calc(var(--spacing) * 12);
  }

  .w-14 {
    width: calc(var(--spacing) * 14);
  }

  .w-16 {
    width: calc(var(--spacing) * 16);
  }

  .w-20 {
    width: calc(var(--spacing) * 20);
  }

  .w-24 {
    width: calc(var(--spacing) * 24);
  }

  .w-26 {
    width: calc(var(--spacing) * 26);
  }

  .w-28 {
    width: calc(var(--spacing) * 28);
  }

  .w-30 {
    width: calc(var(--spacing) * 30);
  }

  .w-32 {
    width: calc(var(--spacing) * 32);
  }

  .w-36 {
    width: calc(var(--spacing) * 36);
  }

  .w-40 {
    width: calc(var(--spacing) * 40);
  }

  .w-44 {
    width: calc(var(--spacing) * 44);
  }

  .w-46 {
    width: calc(var(--spacing) * 46);
  }

  .w-48 {
    width: calc(var(--spacing) * 48);
  }

  .w-50 {
    width: calc(var(--spacing) * 50);
  }

  .w-52 {
    width: calc(var(--spacing) * 52);
  }

  .w-56 {
    width: calc(var(--spacing) * 56);
  }

  .w-60 {
    width: calc(var(--spacing) * 60);
  }

  .w-64 {
    width: calc(var(--spacing) * 64);
  }

  .w-72 {
    width: calc(var(--spacing) * 72);
  }

  .w-80 {
    width: calc(var(--spacing) * 80);
  }

  .w-96 {
    width: calc(var(--spacing) * 96);
  }

  .w-100 {
    width: calc(var(--spacing) * 100);
  }

  .w-\[0px\] {
    width: 0;
  }

  .w-\[2rem\] {
    width: 2rem;
  }

  .w-\[3px\] {
    width: 3px;
  }

  .w-\[4\.75rem\] {
    width: 4.75rem;
  }

  .w-\[5px\] {
    width: 5px;
  }

  .w-\[7px\] {
    width: 7px;
  }

  .w-\[7rem\] {
    width: 7rem;
  }

  .w-\[14px\] {
    width: 14px;
  }

  .w-\[18px\] {
    width: 18px;
  }

  .w-\[22px\] {
    width: 22px;
  }

  .w-\[24px\] {
    width: 24px;
  }

  .w-\[25px\] {
    width: 25px;
  }

  .w-\[26px\] {
    width: 26px;
  }

  .w-\[28px\] {
    width: 28px;
  }

  .w-\[30\%\] {
    width: 30%;
  }

  .w-\[30px\] {
    width: 30px;
  }

  .w-\[33\%\] {
    width: 33%;
  }

  .w-\[34px\] {
    width: 34px;
  }

  .w-\[38px\] {
    width: 38px;
  }

  .w-\[40\%\] {
    width: 40%;
  }

  .w-\[40\.1px\] {
    width: 40.1px;
  }

  .w-\[40px\] {
    width: 40px;
  }

  .w-\[42px\] {
    width: 42px;
  }

  .w-\[44px\] {
    width: 44px;
  }

  .w-\[45px\] {
    width: 45px;
  }

  .w-\[48px\] {
    width: 48px;
  }

  .w-\[50px\] {
    width: 50px;
  }

  .w-\[51px\] {
    width: 51px;
  }

  .w-\[52px\] {
    width: 52px;
  }

  .w-\[54\.24px\] {
    width: 54.24px;
  }

  .w-\[55\%\] {
    width: 55%;
  }

  .w-\[60\%\] {
    width: 60%;
  }

  .w-\[60px\] {
    width: 60px;
  }

  .w-\[68px\] {
    width: 68px;
  }

  .w-\[70\%\] {
    width: 70%;
  }

  .w-\[70px\] {
    width: 70px;
  }

  .w-\[71px\] {
    width: 71px;
  }

  .w-\[72px\] {
    width: 72px;
  }

  .w-\[80px\] {
    width: 80px;
  }

  .w-\[80vw\] {
    width: 80vw;
  }

  .w-\[88px\] {
    width: 88px;
  }

  .w-\[90\%\] {
    width: 90%;
  }

  .w-\[90px\] {
    width: 90px;
  }

  .w-\[92px\] {
    width: 92px;
  }

  .w-\[100px\] {
    width: 100px;
  }

  .w-\[110px\] {
    width: 110px;
  }

  .w-\[118px\] {
    width: 118px;
  }

  .w-\[120px\] {
    width: 120px;
  }

  .w-\[121px\] {
    width: 121px;
  }

  .w-\[132px\] {
    width: 132px;
  }

  .w-\[140px\] {
    width: 140px;
  }

  .w-\[144px\] {
    width: 144px;
  }

  .w-\[160px\] {
    width: 160px;
  }

  .w-\[170px\] {
    width: 170px;
  }

  .w-\[178px\] {
    width: 178px;
  }

  .w-\[180px\] {
    width: 180px;
  }

  .w-\[188px\] {
    width: 188px;
  }

  .w-\[195px\] {
    width: 195px;
  }

  .w-\[200px\] {
    width: 200px;
  }

  .w-\[208px\] {
    width: 208px;
  }

  .w-\[210px\] {
    width: 210px;
  }

  .w-\[220px\] {
    width: 220px;
  }

  .w-\[223px\] {
    width: 223px;
  }

  .w-\[240px\] {
    width: 240px;
  }

  .w-\[250px\] {
    width: 250px;
  }

  .w-\[254px\] {
    width: 254px;
  }

  .w-\[260px\] {
    width: 260px;
  }

  .w-\[270px\] {
    width: 270px;
  }

  .w-\[280px\] {
    width: 280px;
  }

  .w-\[286px\] {
    width: 286px;
  }

  .w-\[300px\] {
    width: 300px;
  }

  .w-\[305px\] {
    width: 305px;
  }

  .w-\[320px\] {
    width: 320px;
  }

  .w-\[345px\] {
    width: 345px;
  }

  .w-\[350px\] {
    width: 350px;
  }

  .w-\[360px\] {
    width: 360px;
  }

  .w-\[370px\] {
    width: 370px;
  }

  .w-\[380px\] {
    width: 380px;
  }

  .w-\[422px\] {
    width: 422px;
  }

  .w-\[480px\] {
    width: 480px;
  }

  .w-\[500\], .w-\[500px\] {
    width: 500px;
  }

  .w-\[550px\] {
    width: 550px;
  }

  .w-\[600px\] {
    width: 600px;
  }

  .w-\[700px\] {
    width: 700px;
  }

  .w-\[750px\] {
    width: 750px;
  }

  .w-\[816px\] {
    width: 816px;
  }

  .w-\[1098px\] {
    width: 1098px;
  }

  .w-\[calc\(50\%\+20px\)\] {
    width: calc(50% + 20px);
  }

  .w-\[calc\(100\%\+77px\)\] {
    width: calc(100% + 77px);
  }

  .w-\[calc\(100vw-32px-16px\)\] {
    width: calc(100vw - 48px);
  }

  .w-\[min\(95vw\,1064px\)\] {
    width: min(95vw, 1064px);
  }

  .w-auto {
    width: auto;
  }

  .w-fit {
    width: fit-content;
  }

  .w-full {
    width: 100%;
  }

  .w-px {
    width: 1px;
  }

  .w-screen {
    width: 100vw;
  }

  .max-w-2xl {
    max-width: var(--container-2xl);
  }

  .max-w-3xl {
    max-width: var(--container-3xl);
  }

  .max-w-4xl {
    max-width: var(--container-4xl);
  }

  .max-w-120 {
    max-width: calc(var(--spacing) * 120);
  }

  .max-w-\[4\.75rem\] {
    max-width: 4.75rem;
  }

  .max-w-\[6\.5rem\] {
    max-width: 6.5rem;
  }

  .max-w-\[10rem\] {
    max-width: 10rem;
  }

  .max-w-\[12rem\] {
    max-width: 12rem;
  }

  .max-w-\[14rem\] {
    max-width: 14rem;
  }

  .max-w-\[22rem\] {
    max-width: 22rem;
  }

  .max-w-\[30ch\] {
    max-width: 30ch;
  }

  .max-w-\[50\%\] {
    max-width: 50%;
  }

  .max-w-\[60\%\] {
    max-width: 60%;
  }

  .max-w-\[60px\] {
    max-width: 60px;
  }

  .max-w-\[70\%\] {
    max-width: 70%;
  }

  .max-w-\[80px\] {
    max-width: 80px;
  }

  .max-w-\[90\%\] {
    max-width: 90%;
  }

  .max-w-\[120px\] {
    max-width: 120px;
  }

  .max-w-\[200px\] {
    max-width: 200px;
  }

  .max-w-\[220px\] {
    max-width: 220px;
  }

  .max-w-\[240px\] {
    max-width: 240px;
  }

  .max-w-\[340px\] {
    max-width: 340px;
  }

  .max-w-\[360px\] {
    max-width: 360px;
  }

  .max-w-\[380px\] {
    max-width: 380px;
  }

  .max-w-\[400px\] {
    max-width: 400px;
  }

  .max-w-\[420px\] {
    max-width: 420px;
  }

  .max-w-\[440px\] {
    max-width: 440px;
  }

  .max-w-\[460px\] {
    max-width: 460px;
  }

  .max-w-\[480px\] {
    max-width: 480px;
  }

  .max-w-\[500px\] {
    max-width: 500px;
  }

  .max-w-\[520px\] {
    max-width: 520px;
  }

  .max-w-\[560px\] {
    max-width: 560px;
  }

  .max-w-\[600px\] {
    max-width: 600px;
  }

  .max-w-\[720px\] {
    max-width: 720px;
  }

  .max-w-\[800px\] {
    max-width: 800px;
  }

  .max-w-\[820px\] {
    max-width: 820px;
  }

  .max-w-\[900px\] {
    max-width: 900px;
  }

  .max-w-\[960px\] {
    max-width: 960px;
  }

  .max-w-\[1024px\] {
    max-width: 1024px;
  }

  .max-w-\[1100px\] {
    max-width: 1100px;
  }

  .max-w-\[1120px\] {
    max-width: 1120px;
  }

  .max-w-\[1180px\] {
    max-width: 1180px;
  }

  .max-w-\[1200px\] {
    max-width: 1200px;
  }

  .max-w-\[1400px\] {
    max-width: 1400px;
  }

  .max-w-\[1536px\] {
    max-width: 1536px;
  }

  .max-w-\[1600px\] {
    max-width: 1600px;
  }

  .max-w-\[calc\(100vw-50px\)\] {
    max-width: calc(100vw - 50px);
  }

  .max-w-\[min\(90vw\,90vh\)\] {
    max-width: min(90vw, 90vh);
  }

  .max-w-\[min\(100\%\,18rem\)\] {
    max-width: min(100%, 18rem);
  }

  .max-w-\[min\(100\%\,28rem\)\] {
    max-width: min(100%, 28rem);
  }

  .max-w-\[min\(100\%\,280px\)\] {
    max-width: min(100%, 280px);
  }

  .max-w-full {
    max-width: 100%;
  }

  .max-w-lg {
    max-width: var(--container-lg);
  }

  .max-w-md {
    max-width: var(--container-md);
  }

  .max-w-none {
    max-width: none;
  }

  .max-w-prose {
    max-width: 65ch;
  }

  .max-w-screen {
    max-width: 100vw;
  }

  .max-w-screen-2xl {
    max-width: var(--breakpoint-2xl);
  }

  .max-w-screen-lg {
    max-width: var(--breakpoint-lg);
  }

  .max-w-screen-md {
    max-width: var(--breakpoint-md);
  }

  .max-w-screen-xl {
    max-width: var(--breakpoint-xl);
  }

  .max-w-sm {
    max-width: var(--container-sm);
  }

  .max-w-xl {
    max-width: var(--container-xl);
  }

  .max-w-xs {
    max-width: var(--container-xs);
  }

  .\!min-w-0 {
    min-width: calc(var(--spacing) * 0) !important;
  }

  .min-w-0 {
    min-width: calc(var(--spacing) * 0);
  }

  .min-w-4 {
    min-width: calc(var(--spacing) * 4);
  }

  .min-w-6 {
    min-width: calc(var(--spacing) * 6);
  }

  .min-w-8 {
    min-width: calc(var(--spacing) * 8);
  }

  .min-w-56 {
    min-width: calc(var(--spacing) * 56);
  }

  .min-w-80 {
    min-width: calc(var(--spacing) * 80);
  }

  .min-w-\[1ch\] {
    min-width: 1ch;
  }

  .min-w-\[8px\] {
    min-width: 8px;
  }

  .min-w-\[8rem\] {
    min-width: 8rem;
  }

  .min-w-\[10px\] {
    min-width: 10px;
  }

  .min-w-\[10rem\] {
    min-width: 10rem;
  }

  .min-w-\[12rem\] {
    min-width: 12rem;
  }

  .min-w-\[16rem\] {
    min-width: 16rem;
  }

  .min-w-\[20px\] {
    min-width: 20px;
  }

  .min-w-\[28px\] {
    min-width: 28px;
  }

  .min-w-\[36rem\] {
    min-width: 36rem;
  }

  .min-w-\[40px\] {
    min-width: 40px;
  }

  .min-w-\[60px\] {
    min-width: 60px;
  }

  .min-w-\[70px\] {
    min-width: 70px;
  }

  .min-w-\[72px\] {
    min-width: 72px;
  }

  .min-w-\[80px\] {
    min-width: 80px;
  }

  .min-w-\[90px\] {
    min-width: 90px;
  }

  .min-w-\[96px\] {
    min-width: 96px;
  }

  .min-w-\[100px\] {
    min-width: 100px;
  }

  .min-w-\[120px\] {
    min-width: 120px;
  }

  .min-w-\[130px\] {
    min-width: 130px;
  }

  .min-w-\[140px\] {
    min-width: 140px;
  }

  .min-w-\[160px\] {
    min-width: 160px;
  }

  .min-w-\[180px\] {
    min-width: 180px;
  }

  .min-w-\[200px\] {
    min-width: 200px;
  }

  .min-w-\[220px\] {
    min-width: 220px;
  }

  .min-w-\[260px\] {
    min-width: 260px;
  }

  .min-w-\[280px\] {
    min-width: 280px;
  }

  .min-w-\[680px\] {
    min-width: 680px;
  }

  .min-w-\[720px\] {
    min-width: 720px;
  }

  .min-w-\[800px\] {
    min-width: 800px;
  }

  .min-w-full {
    min-width: 100%;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-1\/3 {
    flex: 33.3333%;
  }

  .flex-\[2\] {
    flex: 2;
  }

  .flex-shrink {
    flex-shrink: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .shrink {
    flex-shrink: 1;
  }

  .shrink-0 {
    flex-shrink: 0;
  }

  .flex-grow {
    flex-grow: 1;
  }

  .flex-grow-0 {
    flex-grow: 0;
  }

  .grow {
    flex-grow: 1;
  }

  .table-auto {
    table-layout: auto;
  }

  .border-collapse {
    border-collapse: collapse;
  }

  .origin-center {
    transform-origin: center;
  }

  .-translate-x-0\.5 {
    --tw-translate-x: calc(var(--spacing) * -.5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-x-1\/2 {
    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0 {
    --tw-translate-x: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-0\.5 {
    --tw-translate-x: calc(var(--spacing) * .5);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1 {
    --tw-translate-x: calc(var(--spacing) * 1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-1\/2 {
    --tw-translate-x: calc(1 / 2 * 100%);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-6 {
    --tw-translate-x: calc(var(--spacing) * 6);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[-500px\] {
    --tw-translate-x: -500px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[-1000px\] {
    --tw-translate-x: -1000px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-\[0px\] {
    --tw-translate-x: 0px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-x-full {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1 {
    --tw-translate-y: calc(var(--spacing) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-1\/2 {
    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .-translate-y-full {
    --tw-translate-y: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-0 {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-6 {
    --tw-translate-y: calc(var(--spacing) * 6);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[-50\%\] {
    --tw-translate-y: -50%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .translate-y-\[25px\] {
    --tw-translate-y: 25px;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .scale-75 {
    --tw-scale-x: 75%;
    --tw-scale-y: 75%;
    --tw-scale-z: 75%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-90 {
    --tw-scale-x: 90%;
    --tw-scale-y: 90%;
    --tw-scale-z: 90%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-105 {
    --tw-scale-x: 105%;
    --tw-scale-y: 105%;
    --tw-scale-z: 105%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-150 {
    --tw-scale-x: 150%;
    --tw-scale-y: 150%;
    --tw-scale-z: 150%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .scale-\[1\.02\] {
    scale: 1.02;
  }

  .rotate-0 {
    rotate: none;
  }

  .rotate-90 {
    rotate: 90deg;
  }

  .rotate-180 {
    rotate: 180deg;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .animate-\[fadeSlideUp_0\.3s_ease\] {
    animation: .3s fadeSlideUp;
  }

  .animate-\[nudgePulse_2s_ease-in-out_infinite\] {
    animation: 2s ease-in-out infinite nudgePulse;
  }

  .animate-\[nudgePulse_3s_ease_infinite\] {
    animation: 3s infinite nudgePulse;
  }

  .animate-\[smartInputProgress_1\.1s_ease-in-out_infinite\] {
    animation: 1.1s ease-in-out infinite smartInputProgress;
  }

  .animate-\[typing_1\.2s_ease-in-out_infinite\] {
    animation: 1.2s ease-in-out infinite typing;
  }

  .animate-pulse {
    animation: var(--animate-pulse);
  }

  .animate-spin {
    animation: var(--animate-spin);
  }

  .cursor-auto {
    cursor: auto;
  }

  .cursor-default {
    cursor: default;
  }

  .cursor-grab {
    cursor: grab;
  }

  .cursor-help {
    cursor: help;
  }

  .cursor-move {
    cursor: move;
  }

  .cursor-not-allowed {
    cursor: not-allowed;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .touch-none {
    touch-action: none;
  }

  .resize {
    resize: both;
  }

  .resize-none {
    resize: none;
  }

  .resize-y {
    resize: vertical;
  }

  .\[scroll-snap-type\:x_mandatory\] {
    scroll-snap-type: x mandatory;
  }

  .\[scroll-snap-align\:start\] {
    scroll-snap-align: start;
  }

  .list-inside {
    list-style-position: inside;
  }

  .list-disc {
    list-style-type: disc;
  }

  .list-none {
    list-style-type: none;
  }

  .appearance-none {
    appearance: none;
  }

  .break-inside-avoid {
    break-inside: avoid;
  }

  .break-after-column {
    break-after: column;
  }

  .\!grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .grid-cols-\[1\.2fr_1\.6fr_1\.8fr\] {
    grid-template-columns: 1.2fr 1.6fr 1.8fr;
  }

  .grid-cols-\[100px_90px_150px_1fr\] {
    grid-template-columns: 100px 90px 150px 1fr;
  }

  .grid-cols-\[120px_1fr\] {
    grid-template-columns: 120px 1fr;
  }

  .grid-cols-\[140px_1fr\] {
    grid-template-columns: 140px 1fr;
  }

  .grid-cols-\[160px_1fr\] {
    grid-template-columns: 160px 1fr;
  }

  .grid-cols-\[220px_minmax\(0\,1fr\)\] {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }

  .grid-cols-\[minmax\(280px\,360px\)_minmax\(0\,1fr\)\] {
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  }

  .grid-cols-\[repeat\(auto-fill\,minmax\(72px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  }

  .grid-cols-\[repeat\(auto-fill\,minmax\(200px\,1fr\)\)\] {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .\!flex-row {
    flex-direction: row !important;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-row-reverse {
    flex-direction: row-reverse;
  }

  .flex-nowrap {
    flex-wrap: nowrap;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .content-start {
    align-content: flex-start;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-start {
    align-items: flex-start;
  }

  .items-stretch {
    align-items: stretch;
  }

  .\!justify-between {
    justify-content: space-between !important;
  }

  .\!justify-end {
    justify-content: flex-end !important;
  }

  .\!justify-start {
    justify-content: flex-start !important;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-items-center {
    justify-items: center;
  }

  .\!gap-0 {
    gap: calc(var(--spacing) * 0) !important;
  }

  .\!gap-4 {
    gap: calc(var(--spacing) * 4) !important;
  }

  .gap-0 {
    gap: calc(var(--spacing) * 0);
  }

  .gap-0\.5 {
    gap: calc(var(--spacing) * .5);
  }

  .gap-1 {
    gap: calc(var(--spacing) * 1);
  }

  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }

  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }

  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }

  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }

  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }

  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }

  .gap-5 {
    gap: calc(var(--spacing) * 5);
  }

  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }

  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }

  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }

  .gap-9 {
    gap: calc(var(--spacing) * 9);
  }

  .gap-10 {
    gap: calc(var(--spacing) * 10);
  }

  .gap-32 {
    gap: calc(var(--spacing) * 32);
  }

  .gap-\[2px\] {
    gap: 2px;
  }

  .gap-\[3px\] {
    gap: 3px;
  }

  .gap-\[5px\] {
    gap: 5px;
  }

  .gap-\[10px\] {
    gap: 10px;
  }

  .gap-\[18px\] {
    gap: 18px;
  }

  :where(.space-y-0\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-1\.5 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-2 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-3 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-4 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-6 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
  }

  :where(.space-y-8 > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));
    margin-block-end: calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)));
  }

  .gap-x-1\.5 {
    column-gap: calc(var(--spacing) * 1.5);
  }

  .gap-x-2 {
    column-gap: calc(var(--spacing) * 2);
  }

  .gap-x-3 {
    column-gap: calc(var(--spacing) * 3);
  }

  .gap-x-4 {
    column-gap: calc(var(--spacing) * 4);
  }

  .gap-x-5 {
    column-gap: calc(var(--spacing) * 5);
  }

  .gap-x-6 {
    column-gap: calc(var(--spacing) * 6);
  }

  :where(.space-x-3 > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse));
    margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse)));
  }

  :where(.space-x-\[-4px\] > :not(:last-child)) {
    --tw-space-x-reverse: 0;
    margin-inline-start: calc(-4px * var(--tw-space-x-reverse));
    margin-inline-end: calc(-4px * calc(1 - var(--tw-space-x-reverse)));
  }

  .gap-y-0\.5 {
    row-gap: calc(var(--spacing) * .5);
  }

  .gap-y-1 {
    row-gap: calc(var(--spacing) * 1);
  }

  .gap-y-1\.5 {
    row-gap: calc(var(--spacing) * 1.5);
  }

  .gap-y-2 {
    row-gap: calc(var(--spacing) * 2);
  }

  .gap-y-3 {
    row-gap: calc(var(--spacing) * 3);
  }

  .gap-y-4 {
    row-gap: calc(var(--spacing) * 4);
  }

  :where(.divide-y > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }

  :where(.divide-primary > :not(:last-child)) {
    border-color: var(--ph-primaryXX);
  }

  :where(.divide-secondary > :not(:last-child)) {
    border-color: var(--ph-secondary);
  }

  .self-center {
    align-self: center;
  }

  .self-start {
    align-self: flex-start;
  }

  .self-stretch {
    align-self: stretch;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .\!overflow-visible {
    overflow: visible !important;
  }

  .overflow-auto {
    overflow: auto;
  }

  .overflow-hidden {
    overflow: hidden;
  }

  .overflow-visible {
    overflow: visible;
  }

  .overflow-x-auto {
    overflow-x: auto;
  }

  .overflow-x-hidden {
    overflow-x: hidden;
  }

  .overflow-x-scroll {
    overflow-x: scroll;
  }

  .overflow-y-auto {
    overflow-y: auto;
  }

  .overflow-y-hidden {
    overflow-y: hidden;
  }

  .overflow-y-scroll {
    overflow-y: scroll;
  }

  .\!rounded-lg {
    border-radius: var(--radius-lg) !important;
  }

  .\!rounded-md {
    border-radius: var(--radius-md) !important;
  }

  .\!rounded-none {
    border-radius: 0 !important;
  }

  .rounded {
    border-radius: .25rem;
  }

  .rounded-2xl {
    border-radius: var(--radius-2xl);
  }

  .rounded-3xl {
    border-radius: var(--radius-3xl);
  }

  .rounded-\[2rem\] {
    border-radius: 2rem;
  }

  .rounded-\[3px\] {
    border-radius: 3px;
  }

  .rounded-\[4px\] {
    border-radius: 4px;
  }

  .rounded-\[5px\] {
    border-radius: 5px;
  }

  .rounded-\[6px\] {
    border-radius: 6px;
  }

  .rounded-\[7px\] {
    border-radius: 7px;
  }

  .rounded-\[8px\] {
    border-radius: 8px;
  }

  .rounded-\[9px\] {
    border-radius: 9px;
  }

  .rounded-\[10px\] {
    border-radius: 10px;
  }

  .rounded-\[11px\] {
    border-radius: 11px;
  }

  .rounded-\[12px\] {
    border-radius: 12px;
  }

  .rounded-\[14px\] {
    border-radius: 14px;
  }

  .rounded-\[16px\] {
    border-radius: 16px;
  }

  .rounded-\[20px\] {
    border-radius: 20px;
  }

  .rounded-\[50px\] {
    border-radius: 50px;
  }

  .rounded-\[106\.21px\] {
    border-radius: 106.21px;
  }

  .rounded-\[inherit\] {
    border-radius: inherit;
  }

  .rounded-\[var\(--ph-sys-shape-corner-md\,12px\)\] {
    border-radius: var(--ph-sys-shape-corner-md, 12px);
  }

  .rounded-\[var\(--ph-sys-shape-sm\)\] {
    border-radius: var(--ph-sys-shape-sm);
  }

  .rounded-full {
    border-radius: 3.40282e38px;
  }

  .rounded-lg {
    border-radius: var(--radius-lg);
  }

  .rounded-md {
    border-radius: var(--radius-md);
  }

  .rounded-none {
    border-radius: 0;
  }

  .rounded-sm {
    border-radius: var(--radius-sm);
  }

  .rounded-xl {
    border-radius: var(--radius-xl);
  }

  .rounded-t-lg {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
  }

  .rounded-t-none {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .\!rounded-tl-none {
    border-top-left-radius: 0 !important;
  }

  .rounded-tl-\[12px\] {
    border-top-left-radius: 12px;
  }

  .rounded-tl-none {
    border-top-left-radius: 0;
  }

  .rounded-r-\[2px\] {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
  }

  .rounded-r-xl {
    border-top-right-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
  }

  .rounded-tr-\[12px\] {
    border-top-right-radius: 12px;
  }

  .rounded-b-2xl {
    border-bottom-right-radius: var(--radius-2xl);
    border-bottom-left-radius: var(--radius-2xl);
  }

  .rounded-b-lg {
    border-bottom-right-radius: var(--radius-lg);
    border-bottom-left-radius: var(--radius-lg);
  }

  .rounded-br-\[10px\] {
    border-bottom-right-radius: 10px;
  }

  .rounded-bl-\[10px\] {
    border-bottom-left-radius: 10px;
  }

  .\!border {
    border-style: var(--tw-border-style) !important;
    border-width: 1px !important;
  }

  .\!border-2 {
    border-style: var(--tw-border-style) !important;
    border-width: 2px !important;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-0 {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  .border-1 {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-2 {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-\[1\.5px\] {
    border-style: var(--tw-border-style);
    border-width: 1.5px;
  }

  .border-\[1px\] {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .border-\[2px\] {
    border-style: var(--tw-border-style);
    border-width: 2px;
  }

  .border-\[3px\] {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }

  .border-\[5px\] {
    border-style: var(--tw-border-style);
    border-width: 5px;
  }

  .border-y {
    border-block-style: var(--tw-border-style);
    border-block-width: 1px;
  }

  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .border-t-0 {
    border-top-style: var(--tw-border-style);
    border-top-width: 0;
  }

  .border-r {
    border-right-style: var(--tw-border-style);
    border-right-width: 1px;
  }

  .border-r-0 {
    border-right-style: var(--tw-border-style);
    border-right-width: 0;
  }

  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }

  .border-b-0 {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .border-b-2, .border-b-\[2px\] {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .border-l {
    border-left-style: var(--tw-border-style);
    border-left-width: 1px;
  }

  .border-l-0 {
    border-left-style: var(--tw-border-style);
    border-left-width: 0;
  }

  .border-l-\[3px\] {
    border-left-style: var(--tw-border-style);
    border-left-width: 3px;
  }

  .\!border-none {
    --tw-border-style: none !important;
    border-style: none !important;
  }

  .border-dashed {
    --tw-border-style: dashed;
    border-style: dashed;
  }

  .border-none {
    --tw-border-style: none;
    border-style: none;
  }

  .border-solid {
    --tw-border-style: solid;
    border-style: solid;
  }

  .\!border-\[oklch\(80\%_0\.08_321\.31\)\] {
    border-color: oklch(80% .08 321.31) !important;
  }

  .\!border-blue-600 {
    border-color: var(--color-blue-600) !important;
  }

  .\!border-transparent {
    border-color: #0000 !important;
  }

  .border-\[\#6B3FA0\] {
    border-color: #6b3fa0;
  }

  .border-\[\#6B3FA0\]\/40 {
    border-color: oklab(46.8541% .0799952 -.129516 / .4);
  }

  .border-\[\#CAC4D0\] {
    border-color: #cac4d0;
  }

  .border-\[\#EDDCFF\] {
    border-color: #eddcff;
  }

  .border-\[\#F4EEEC\] {
    border-color: #f4eeec;
  }

  .border-\[\#e8e0f0\] {
    border-color: #e8e0f0;
  }

  .border-\[\#f0f0f0\] {
    border-color: #f0f0f0;
  }

  .border-\[\#f4eeec\] {
    border-color: #f4eeec;
  }

  .border-\[\#fb5c00\] {
    border-color: #fb5c00;
  }

  .border-\[color-mix\(in_oklch\,var\(--ph-primary\)_68\%\,transparent\)\] {
    border-color: var(--ph-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-\[color-mix\(in_oklch\,var\(--ph-primary\)_68\%\,transparent\)\] {
      border-color: color-mix(in oklch, var(--ph-primary) 68%, transparent);
    }
  }

  .border-\[color\:var\(--ph-outline-variant\)\] {
    border-color: var(--ph-outline-variant);
  }

  .border-\[color\:var\(--ph-primary\)\] {
    border-color: var(--ph-primary);
  }

  .border-\[color\:var\(--ph-ref-palette-neutral85\)\] {
    border-color: var(--ph-ref-palette-neutral85);
  }

  .border-\[color\:var\(--ph-ref-palette-primary70\)\] {
    border-color: var(--ph-ref-palette-primary70);
  }

  .border-\[color\:var\(--ph-ref-palette-primary80\)\] {
    border-color: var(--ph-ref-palette-primary80);
  }

  .border-\[color\:var\(--ph-ref-palette-secondary80\)\] {
    border-color: var(--ph-ref-palette-secondary80);
  }

  .border-\[color\:var\(--ph-ref-palette-tertiary80\)\] {
    border-color: var(--ph-ref-palette-tertiary80);
  }

  .border-\[oklch\(25\%_0\.14_321\.31\)\] {
    border-color: oklch(25% .14 321.31);
  }

  .border-\[oklch\(35\%_0\.12_321\.31_\/_0\.35\)\] {
    border-color: oklch(35% .12 321.31 / .35);
  }

  .border-\[oklch\(35\%_0\.12_321\.31_\/_0\.45\)\] {
    border-color: oklch(35% .12 321.31 / .45);
  }

  .border-\[oklch\(35\%_0\.14_321\.31_\/_0\.4\)\] {
    border-color: oklch(35% .14 321.31 / .4);
  }

  .border-\[oklch\(88\%_0\.00733_321\.31\)\] {
    border-color: oklch(88% .00733 321.31);
  }

  .border-\[oklch\(92\%_0\.004_321\.31\)\] {
    border-color: oklch(92% .004 321.31);
  }

  .border-\[var\(--ph-on-surface-variant\)\] {
    border-color: var(--ph-on-surface-variant);
  }

  .border-\[var\(--ph-outline\)\] {
    border-color: var(--ph-outline);
  }

  .border-\[var\(--ph-outline-variant\)\] {
    border-color: var(--ph-outline-variant);
  }

  .border-\[var\(--ph-primary\)\] {
    border-color: var(--ph-primary);
  }

  .border-\[var\(--ph-ref-palette-neutral85\)\] {
    border-color: var(--ph-ref-palette-neutral85);
  }

  .border-\[var\(--ph-ref-palette-neutral90\)\] {
    border-color: var(--ph-ref-palette-neutral90);
  }

  .border-\[var\(--ph-ref-palette-neutral96\)\] {
    border-color: var(--ph-ref-palette-neutral96);
  }

  .border-\[var\(--ph-ref-palette-neutral98\)\] {
    border-color: var(--ph-ref-palette-neutral98);
  }

  .border-\[var\(--ph-ref-palette-tertiary80\)\] {
    border-color: var(--ph-ref-palette-tertiary80);
  }

  .border-\[var\(--ph-surface-container\)\] {
    border-color: var(--ph-surface-container);
  }

  .border-amber-200 {
    border-color: var(--color-amber-200);
  }

  .border-black\/10 {
    border-color: #0000001a;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-black\/10 {
      border-color: color-mix(in oklab, var(--color-black) 10%, transparent);
    }
  }

  .border-blue-200 {
    border-color: var(--color-blue-200);
  }

  .border-blue-500 {
    border-color: var(--color-blue-500);
  }

  .border-gray-100 {
    border-color: var(--color-gray-100);
  }

  .border-gray-200 {
    border-color: var(--color-gray-200);
  }

  .border-gray-300 {
    border-color: var(--color-gray-300);
  }

  .border-gray-400 {
    border-color: var(--color-gray-400);
  }

  .border-gray-500 {
    border-color: var(--color-gray-500);
  }

  .border-neutral-10 {
    border-color: var(--color-neutral-10);
  }

  .border-neutral-85 {
    border-color: var(--color-neutral-85);
  }

  .border-neutral-90 {
    border-color: var(--color-neutral-90);
  }

  .border-neutral-92 {
    border-color: var(--color-neutral-92);
  }

  .border-neutral-94 {
    border-color: var(--color-neutral-94);
  }

  .border-neutral-95 {
    border-color: var(--color-neutral-95);
  }

  .border-neutral-96 {
    border-color: var(--color-neutral-96);
  }

  .border-neutral-100\/70 {
    border-color: #f5f5f5b3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-neutral-100\/70 {
      border-color: color-mix(in oklab, var(--color-neutral-100) 70%, transparent);
    }
  }

  .border-neutral-100\/80 {
    border-color: #f5f5f5cc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-neutral-100\/80 {
      border-color: color-mix(in oklab, var(--color-neutral-100) 80%, transparent);
    }
  }

  .border-neutral-200 {
    border-color: var(--color-neutral-200);
  }

  .border-orange-200 {
    border-color: var(--color-orange-200);
  }

  .border-orange-400 {
    border-color: var(--color-orange-400);
  }

  .border-outline {
    border-color: var(--ph-outline);
  }

  .border-outline-variant, .border-outline-variant\/40 {
    border-color: var(--ph-outline-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-outline-variant\/40 {
      border-color: color-mix(in oklab, var(--ph-outline-variant) 40%, transparent);
    }
  }

  .border-outline-variant\/50 {
    border-color: var(--ph-outline-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-outline-variant\/50 {
      border-color: color-mix(in oklab, var(--ph-outline-variant) 50%, transparent);
    }
  }

  .border-outline-variant\/60 {
    border-color: var(--ph-outline-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-outline-variant\/60 {
      border-color: color-mix(in oklab, var(--ph-outline-variant) 60%, transparent);
    }
  }

  .border-outline-variant\/70 {
    border-color: var(--ph-outline-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-outline-variant\/70 {
      border-color: color-mix(in oklab, var(--ph-outline-variant) 70%, transparent);
    }
  }

  .border-outline-variant\/80 {
    border-color: var(--ph-outline-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-outline-variant\/80 {
      border-color: color-mix(in oklab, var(--ph-outline-variant) 80%, transparent);
    }
  }

  .border-primary {
    border-color: var(--ph-primaryXX);
  }

  .border-primary-container {
    border-color: var(--ph-primary-container);
  }

  .border-primary\/40 {
    border-color: var(--ph-primaryXX);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .border-primary\/40 {
      border-color: color-mix(in oklab, var(--ph-primaryXX) 40%, transparent);
    }
  }

  .border-red-200 {
    border-color: var(--color-red-200);
  }

  .border-red-300 {
    border-color: var(--color-red-300);
  }

  .border-red-500 {
    border-color: var(--color-red-500);
  }

  .border-red-600 {
    border-color: var(--color-red-600);
  }

  .border-secondary {
    border-color: var(--ph-secondary);
  }

  .border-slate-100 {
    border-color: var(--color-slate-100);
  }

  .border-slate-300 {
    border-color: var(--color-slate-300);
  }

  .border-slate-400 {
    border-color: var(--color-slate-400);
  }

  .border-surface-container {
    border-color: var(--ph-surface-container);
  }

  .border-surface-container-low {
    border-color: var(--ph-surface-container-low);
  }

  .border-transparent {
    border-color: #0000;
  }

  .border-white {
    border-color: var(--color-white);
  }

  .border-yellow-200 {
    border-color: var(--color-yellow-200);
  }

  .border-t-primary {
    border-top-color: var(--ph-primaryXX);
  }

  .border-t-transparent {
    border-top-color: #0000;
  }

  .border-r-neutral-10 {
    border-right-color: var(--color-neutral-10);
  }

  .border-r-outline-variant {
    border-right-color: var(--ph-outline-variant);
  }

  .border-b-neutral-10 {
    border-bottom-color: var(--color-neutral-10);
  }

  .border-l-\[\#6B3FA0\] {
    border-left-color: #6b3fa0;
  }

  .border-l-\[\#6b7280\] {
    border-left-color: #6b7280;
  }

  .border-l-\[\#d97706\] {
    border-left-color: #d97706;
  }

  .border-l-\[\#dc2626\] {
    border-left-color: #dc2626;
  }

  .\!bg-\[\#F5DED6\] {
    background-color: #f5ded6 !important;
  }

  .\!bg-\[color\:var\(--ph-surface-container-low\)\] {
    background-color: var(--ph-surface-container-low) !important;
  }

  .\!bg-\[oklch\(55\%_0\.12_210\.05\)\] {
    background-color: oklch(55% .12 210.05) !important;
  }

  .\!bg-slate-200 {
    background-color: var(--color-slate-200) !important;
  }

  .\!bg-surface-container-highest {
    background-color: var(--ph-surface-container-highest) !important;
  }

  .\!bg-transparent {
    background-color: #0000 !important;
  }

  .\!bg-white {
    background-color: var(--color-white) !important;
  }

  .bg-\[\#3CBF26\] {
    background-color: #3cbf26;
  }

  .bg-\[\#6B3FA0\] {
    background-color: #6b3fa0;
  }

  .bg-\[\#6B3FA0\]\/15 {
    background-color: oklab(46.8541% .0799952 -.129516 / .15);
  }

  .bg-\[\#6B3FA0\]\/30 {
    background-color: oklab(46.8541% .0799952 -.129516 / .3);
  }

  .bg-\[\#6b7280\] {
    background-color: #6b7280;
  }

  .bg-\[\#414b58d9\] {
    background-color: #414b58d9;
  }

  .bg-\[\#667eea\] {
    background-color: #667eea;
  }

  .bg-\[\#B3E4F4\] {
    background-color: #b3e4f4;
  }

  .bg-\[\#CCD8FF\] {
    background-color: #ccd8ff;
  }

  .bg-\[\#D8F2D4\] {
    background-color: #d8f2d4;
  }

  .bg-\[\#DFDFDF\] {
    background-color: #dfdfdf;
  }

  .bg-\[\#EDDCFF\] {
    background-color: #eddcff;
  }

  .bg-\[\#EFEFEF\] {
    background-color: #efefef;
  }

  .bg-\[\#F3F6F5\] {
    background-color: #f3f6f5;
  }

  .bg-\[\#F5DED6\] {
    background-color: #f5ded6;
  }

  .bg-\[\#FFD1EC\] {
    background-color: #ffd1ec;
  }

  .bg-\[\#cac4d0\] {
    background-color: #cac4d0;
  }

  .bg-\[\#d4edda\] {
    background-color: #d4edda;
  }

  .bg-\[\#d97706\] {
    background-color: #d97706;
  }

  .bg-\[\#dc2626\] {
    background-color: #dc2626;
  }

  .bg-\[\#e8e0f0\]\/40 {
    background-color: oklab(91.7696% .0142687 -.0181444 / .4);
  }

  .bg-\[\#e8e0f0\]\/50 {
    background-color: oklab(91.7696% .0142687 -.0181444 / .5);
  }

  .bg-\[\#f0ecf5\] {
    background-color: #f0ecf5;
  }

  .bg-\[\#f4eeec\] {
    background-color: #f4eeec;
  }

  .bg-\[\#f5f0ff\] {
    background-color: #f5f0ff;
  }

  .bg-\[\#f5f5f5\] {
    background-color: #f5f5f5;
  }

  .bg-\[\#faf6ff\] {
    background-color: #faf6ff;
  }

  .bg-\[\#faf7f6\] {
    background-color: #faf7f6;
  }

  .bg-\[\#faf8fe\] {
    background-color: #faf8fe;
  }

  .bg-\[\#fce4e4\] {
    background-color: #fce4e4;
  }

  .bg-\[\#fdfbff\] {
    background-color: #fdfbff;
  }

  .bg-\[\#fff3cd\] {
    background-color: #fff3cd;
  }

  .bg-\[color-mix\(in_oklch\,var\(--ph-primary\)_3\%\,var\(--ph-surface\)\)\] {
    background-color: var(--ph-primary);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color-mix\(in_oklch\,var\(--ph-primary\)_3\%\,var\(--ph-surface\)\)\] {
      background-color: color-mix(in oklch, var(--ph-primary) 3%, var(--ph-surface));
    }
  }

  .bg-\[color-mix\(in_srgb\,var\(--ph-sys-color-primary-container\)_35\%\,var\(--ph-sys-color-surface\)\)\] {
    background-color: var(--ph-sys-color-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-\[color-mix\(in_srgb\,var\(--ph-sys-color-primary-container\)_35\%\,var\(--ph-sys-color-surface\)\)\] {
      background-color: color-mix(in srgb, var(--ph-sys-color-primary-container) 35%, var(--ph-sys-color-surface));
    }
  }

  .bg-\[color\:var\(--ch-background\)\] {
    background-color: var(--ch-background);
  }

  .bg-\[color\:var\(--ch-surface-brand-primary\)\] {
    background-color: var(--ch-surface-brand-primary);
  }

  .bg-\[color\:var\(--ph-error-container\)\] {
    background-color: var(--ph-error-container);
  }

  .bg-\[color\:var\(--ph-primary\)\] {
    background-color: var(--ph-primary);
  }

  .bg-\[color\:var\(--ph-primary-container\)\] {
    background-color: var(--ph-primary-container);
  }

  .bg-\[color\:var\(--ph-ref-palette-neutral96\)\] {
    background-color: var(--ph-ref-palette-neutral96);
  }

  .bg-\[color\:var\(--ph-ref-palette-primary94\)\] {
    background-color: var(--ph-ref-palette-primary94);
  }

  .bg-\[color\:var\(--ph-ref-palette-primary97\)\] {
    background-color: var(--ph-ref-palette-primary97);
  }

  .bg-\[color\:var\(--ph-ref-palette-secondary94\)\] {
    background-color: var(--ph-ref-palette-secondary94);
  }

  .bg-\[color\:var\(--ph-ref-palette-tertiary94\)\] {
    background-color: var(--ph-ref-palette-tertiary94);
  }

  .bg-\[color\:var\(--ph-secondary-container\)\] {
    background-color: var(--ph-secondary-container);
  }

  .bg-\[color\:var\(--ph-surface\)\] {
    background-color: var(--ph-surface);
  }

  .bg-\[color\:var\(--ph-surface-container\)\] {
    background-color: var(--ph-surface-container);
  }

  .bg-\[color\:var\(--ph-surface-container-high\)\] {
    background-color: var(--ph-surface-container-high);
  }

  .bg-\[color\:var\(--ph-surface-container-lowest\)\] {
    background-color: var(--ph-surface-container-lowest);
  }

  .bg-\[color\:var\(--ph-tertiary-container\)\] {
    background-color: var(--ph-tertiary-container);
  }

  .bg-\[oklch\(15\%_0\.08_321\.31_\/_0\.5\)\] {
    background-color: oklch(15% .08 321.31 / .5);
  }

  .bg-\[oklch\(15\%_0\.10_321\.31_\/_0\.5\)\] {
    background-color: oklch(15% .1 321.31 / .5);
  }

  .bg-\[oklch\(20\%_0\.10_321\.31_\/_0\.35\)\] {
    background-color: oklch(20% .1 321.31 / .35);
  }

  .bg-\[oklch\(20\%_0\.16284_321\.31\)\] {
    background-color: oklch(20% .16284 321.31);
  }

  .bg-\[oklch\(40\%_0\.16_321\.31\)\] {
    background-color: oklch(40% .16 321.31);
  }

  .bg-\[oklch\(70\%_0\.004_321\.31\)\] {
    background-color: oklch(70% .004 321.31);
  }

  .bg-\[oklch\(70\%_0\.16_321\.31\)\] {
    background-color: oklch(70% .16 321.31);
  }

  .bg-\[oklch\(92\%_0\.04_321\.31\)\] {
    background-color: oklch(92% .04 321.31);
  }

  .bg-\[oklch\(92\%_0\.05_150\)\] {
    background-color: oklch(92% .05 150);
  }

  .bg-\[oklch\(92\%_0\.05_260\)\] {
    background-color: oklch(92% .05 260);
  }

  .bg-\[oklch\(92\%_0\.06_340\)\] {
    background-color: oklch(92% .06 340);
  }

  .bg-\[oklch\(98\.5\%_0\.003_321\.31\)\] {
    background-color: oklch(98.5% .003 321.31);
  }

  .bg-\[var\(--color-surface\)\] {
    background-color: var(--color-surface);
  }

  .bg-\[var\(--ph-accent-container\,oklch\(95\%_0\.03_321\)\)\] {
    background-color: var(--ph-accent-container, oklch(95% .03 321));
  }

  .bg-\[var\(--ph-outline-variant\)\] {
    background-color: var(--ph-outline-variant);
  }

  .bg-\[var\(--ph-outline-variant\,rgb\(202_196_208\)\)\] {
    background-color: var(--ph-outline-variant, #cac4d0);
  }

  .bg-\[var\(--ph-primary\)\] {
    background-color: var(--ph-primary);
  }

  .bg-\[var\(--ph-primary-container\)\] {
    background-color: var(--ph-primary-container);
  }

  .bg-\[var\(--ph-ref-palette-neutral90\)\] {
    background-color: var(--ph-ref-palette-neutral90);
  }

  .bg-\[var\(--ph-ref-palette-neutral94\)\] {
    background-color: var(--ph-ref-palette-neutral94);
  }

  .bg-\[var\(--ph-ref-palette-neutral98\)\] {
    background-color: var(--ph-ref-palette-neutral98);
  }

  .bg-\[var\(--ph-ref-palette-neutral99\)\] {
    background-color: var(--ph-ref-palette-neutral99);
  }

  .bg-\[var\(--ph-ref-palette-neutral100\)\] {
    background-color: var(--ph-ref-palette-neutral100);
  }

  .bg-\[var\(--ph-ref-palette-secondary95\)\] {
    background-color: var(--ph-ref-palette-secondary95);
  }

  .bg-\[var\(--ph-ref-palette-tertiary94\)\] {
    background-color: var(--ph-ref-palette-tertiary94);
  }

  .bg-\[var\(--ph-ref-palette-tertiary95\)\] {
    background-color: var(--ph-ref-palette-tertiary95);
  }

  .bg-\[var\(--ph-surface\)\] {
    background-color: var(--ph-surface);
  }

  .bg-\[var\(--ph-surface\,\#fafafa\)\] {
    background-color: var(--ph-surface, #fafafa);
  }

  .bg-\[var\(--ph-surface\,\#ffffff\)\] {
    background-color: var(--ph-surface, #fff);
  }

  .bg-\[var\(--ph-surface-container\)\] {
    background-color: var(--ph-surface-container);
  }

  .bg-\[var\(--ph-surface-container\,oklch\(98\%_0\.004_321\)\)\] {
    background-color: var(--ph-surface-container, oklch(98% .004 321));
  }

  .bg-\[var\(--ph-surface-container-low\)\] {
    background-color: var(--ph-surface-container-low);
  }

  .bg-\[var\(--ph-surface-container-lowest\)\] {
    background-color: var(--ph-surface-container-lowest);
  }

  .bg-\[var\(--ph-surface-container-lowest\,\#fafafa\)\] {
    background-color: var(--ph-surface-container-lowest, #fafafa);
  }

  .bg-\[var\(--ph-surface-low\)\] {
    background-color: var(--ph-surface-low);
  }

  .bg-\[var\(--ph-surface-lowest\)\] {
    background-color: var(--ph-surface-lowest);
  }

  .bg-amber-50 {
    background-color: var(--color-amber-50);
  }

  .bg-amber-100 {
    background-color: var(--color-amber-100);
  }

  .bg-amber-400 {
    background-color: var(--color-amber-400);
  }

  .bg-amber-500 {
    background-color: var(--color-amber-500);
  }

  .bg-black {
    background-color: var(--color-black);
  }

  .bg-black\/20 {
    background-color: #0003;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/20 {
      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
    }
  }

  .bg-black\/30 {
    background-color: #0000004d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/30 {
      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
    }
  }

  .bg-black\/40 {
    background-color: #0006;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/40 {
      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
    }
  }

  .bg-black\/45 {
    background-color: #00000073;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/45 {
      background-color: color-mix(in oklab, var(--color-black) 45%, transparent);
    }
  }

  .bg-black\/50 {
    background-color: #00000080;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/50 {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }

  .bg-black\/60 {
    background-color: #0009;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-black\/60 {
      background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
    }
  }

  .bg-blue-50 {
    background-color: var(--color-blue-50);
  }

  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }

  .bg-blue-500 {
    background-color: var(--color-blue-500);
  }

  .bg-blue-500\/5 {
    background-color: #3080ff0d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-blue-500\/5 {
      background-color: color-mix(in oklab, var(--color-blue-500) 5%, transparent);
    }
  }

  .bg-blue-600 {
    background-color: var(--color-blue-600);
  }

  .bg-blue-800 {
    background-color: var(--color-blue-800);
  }

  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }

  .bg-gray-50 {
    background-color: var(--color-gray-50);
  }

  .bg-gray-100 {
    background-color: var(--color-gray-100);
  }

  .bg-gray-200 {
    background-color: var(--color-gray-200);
  }

  .bg-gray-300 {
    background-color: var(--color-gray-300);
  }

  .bg-gray-600 {
    background-color: var(--color-gray-600);
  }

  .bg-green-50 {
    background-color: var(--color-green-50);
  }

  .bg-green-100 {
    background-color: var(--color-green-100);
  }

  .bg-green-200 {
    background-color: var(--color-green-200);
  }

  .bg-green-400 {
    background-color: var(--color-green-400);
  }

  .bg-green-500 {
    background-color: var(--color-green-500);
  }

  .bg-green-600 {
    background-color: var(--color-green-600);
  }

  .bg-green-800 {
    background-color: var(--color-green-800);
  }

  .bg-indigo-50 {
    background-color: var(--color-indigo-50);
  }

  .bg-indigo-100 {
    background-color: var(--color-indigo-100);
  }

  .bg-indigo-600 {
    background-color: var(--color-indigo-600);
  }

  .bg-neutral-10 {
    background-color: var(--color-neutral-10);
  }

  .bg-neutral-20 {
    background-color: var(--color-neutral-20);
  }

  .bg-neutral-50 {
    background-color: var(--color-neutral-50);
  }

  .bg-neutral-85 {
    background-color: var(--color-neutral-85);
  }

  .bg-neutral-94 {
    background-color: var(--color-neutral-94);
  }

  .bg-neutral-95 {
    background-color: var(--color-neutral-95);
  }

  .bg-neutral-96 {
    background-color: var(--color-neutral-96);
  }

  .bg-neutral-98 {
    background-color: var(--color-neutral-98);
  }

  .bg-neutral-99 {
    background-color: var(--color-neutral-99);
  }

  .bg-neutral-100 {
    background-color: var(--color-neutral-100);
  }

  .bg-neutral-100\/85 {
    background-color: #f5f5f5d9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-neutral-100\/85 {
      background-color: color-mix(in oklab, var(--color-neutral-100) 85%, transparent);
    }
  }

  .bg-neutral-100\/90 {
    background-color: #f5f5f5e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-neutral-100\/90 {
      background-color: color-mix(in oklab, var(--color-neutral-100) 90%, transparent);
    }
  }

  .bg-neutral-900 {
    background-color: var(--color-neutral-900);
  }

  .bg-orange-50 {
    background-color: var(--color-orange-50);
  }

  .bg-orange-100 {
    background-color: var(--color-orange-100);
  }

  .bg-orange-500 {
    background-color: var(--color-orange-500);
  }

  .bg-orange-600 {
    background-color: var(--color-orange-600);
  }

  .bg-outline-variant, .bg-outline-variant\/40 {
    background-color: var(--ph-outline-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-outline-variant\/40 {
      background-color: color-mix(in oklab, var(--ph-outline-variant) 40%, transparent);
    }
  }

  .bg-palette-primary-10 {
    background-color: var(--color-palette-primary-10);
  }

  .bg-palette-primary-20 {
    background-color: var(--color-palette-primary-20);
  }

  .bg-palette-primary-40 {
    background-color: var(--color-palette-primary-40);
  }

  .bg-palette-primary-95 {
    background-color: var(--color-palette-primary-95);
  }

  .bg-pink-100 {
    background-color: var(--color-pink-100);
  }

  .bg-primary {
    background-color: var(--ph-primaryXX);
  }

  .bg-primary-container, .bg-primary-container\/30 {
    background-color: var(--ph-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary-container\/30 {
      background-color: color-mix(in oklab, var(--ph-primary-container) 30%, transparent);
    }
  }

  .bg-primary-container\/40 {
    background-color: var(--ph-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary-container\/40 {
      background-color: color-mix(in oklab, var(--ph-primary-container) 40%, transparent);
    }
  }

  .bg-primary-container\/50 {
    background-color: var(--ph-primary-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary-container\/50 {
      background-color: color-mix(in oklab, var(--ph-primary-container) 50%, transparent);
    }
  }

  .bg-primary\/10 {
    background-color: var(--ph-primaryXX);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/10 {
      background-color: color-mix(in oklab, var(--ph-primaryXX) 10%, transparent);
    }
  }

  .bg-primary\/20 {
    background-color: var(--ph-primaryXX);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-primary\/20 {
      background-color: color-mix(in oklab, var(--ph-primaryXX) 20%, transparent);
    }
  }

  .bg-purple-50 {
    background-color: var(--color-purple-50);
  }

  .bg-purple-100 {
    background-color: var(--color-purple-100);
  }

  .bg-purple-600 {
    background-color: var(--color-purple-600);
  }

  .bg-red-50 {
    background-color: var(--color-red-50);
  }

  .bg-red-100 {
    background-color: var(--color-red-100);
  }

  .bg-red-200 {
    background-color: var(--color-red-200);
  }

  .bg-red-300 {
    background-color: var(--color-red-300);
  }

  .bg-red-500 {
    background-color: var(--color-red-500);
  }

  .bg-red-600 {
    background-color: var(--color-red-600);
  }

  .bg-secondary {
    background-color: var(--ph-secondary);
  }

  .bg-secondary-container {
    background-color: var(--ph-secondary-container);
  }

  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }

  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }

  .bg-slate-200 {
    background-color: var(--color-slate-200);
  }

  .bg-slate-300 {
    background-color: var(--color-slate-300);
  }

  .bg-slate-400 {
    background-color: var(--color-slate-400);
  }

  .bg-slate-600 {
    background-color: var(--color-slate-600);
  }

  .bg-surface {
    background-color: var(--ph-surface);
  }

  .bg-surface-bright {
    background-color: var(--ph-surface-bright);
  }

  .bg-surface-container {
    background-color: var(--ph-surface-container);
  }

  .bg-surface-container-high {
    background-color: var(--ph-surface-container-high);
  }

  .bg-surface-container-highest {
    background-color: var(--ph-surface-container-highest);
  }

  .bg-surface-container-low, .bg-surface-container-low\/30 {
    background-color: var(--ph-surface-container-low);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-surface-container-low\/30 {
      background-color: color-mix(in oklab, var(--ph-surface-container-low) 30%, transparent);
    }
  }

  .bg-surface-container-low\/50 {
    background-color: var(--ph-surface-container-low);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-surface-container-low\/50 {
      background-color: color-mix(in oklab, var(--ph-surface-container-low) 50%, transparent);
    }
  }

  .bg-surface-container-lowest, .bg-surface-container-lowest\/30 {
    background-color: var(--ph-surface-container-lowest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-surface-container-lowest\/30 {
      background-color: color-mix(in oklab, var(--ph-surface-container-lowest) 30%, transparent);
    }
  }

  .bg-surface-container-lowest\/40 {
    background-color: var(--ph-surface-container-lowest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-surface-container-lowest\/40 {
      background-color: color-mix(in oklab, var(--ph-surface-container-lowest) 40%, transparent);
    }
  }

  .bg-surface-container-lowest\/50 {
    background-color: var(--ph-surface-container-lowest);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-surface-container-lowest\/50 {
      background-color: color-mix(in oklab, var(--ph-surface-container-lowest) 50%, transparent);
    }
  }

  .bg-surface-container-variant {
    background-color: var(--ph-surface-container-variant);
  }

  .bg-transparent {
    background-color: #0000;
  }

  .bg-white {
    background-color: var(--color-white);
  }

  .bg-white\/15 {
    background-color: #ffffff26;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/15 {
      background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
    }
  }

  .bg-white\/50 {
    background-color: #ffffff80;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/50 {
      background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
    }
  }

  .bg-white\/60 {
    background-color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/60 {
      background-color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .bg-white\/70 {
    background-color: #ffffffb3;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/70 {
      background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
    }
  }

  .bg-white\/95 {
    background-color: #fffffff2;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .bg-white\/95 {
      background-color: color-mix(in oklab, var(--color-white) 95%, transparent);
    }
  }

  .bg-yellow-50 {
    background-color: var(--color-yellow-50);
  }

  .bg-yellow-100 {
    background-color: var(--color-yellow-100);
  }

  .bg-zinc-100 {
    background-color: var(--color-zinc-100);
  }

  .bg-zinc-200 {
    background-color: var(--color-zinc-200);
  }

  .bg-gradient-to-br {
    --tw-gradient-position: to bottom right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-r {
    --tw-gradient-position: to right in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .bg-gradient-to-t {
    --tw-gradient-position: to top in oklab;
    background-image: linear-gradient(var(--tw-gradient-stops));
  }

  .\!bg-none {
    background-image: none !important;
  }

  .from-\[oklch\(50\%_0\.16284_321\.31\)\] {
    --tw-gradient-from: oklch(50% .16284 321.31);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-pink-50 {
    --tw-gradient-from: var(--color-pink-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-pink-500 {
    --tw-gradient-from: var(--color-pink-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-pink-600 {
    --tw-gradient-from: var(--color-pink-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .from-surface-container\/95 {
    --tw-gradient-from: var(--ph-surface-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .from-surface-container\/95 {
      --tw-gradient-from: color-mix(in oklab, var(--ph-surface-container) 95%, transparent);
    }
  }

  .from-surface-container\/95 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[oklch\(55\%_0\.16_290\)\] {
    --tw-gradient-to: oklch(55% .16 290);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-\[oklch\(60\%_0\.16_290\)\] {
    --tw-gradient-to: oklch(60% .16 290);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-surface-container\/85 {
    --tw-gradient-to: var(--ph-surface-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .to-surface-container\/85 {
      --tw-gradient-to: color-mix(in oklab, var(--ph-surface-container) 85%, transparent);
    }
  }

  .to-surface-container\/85 {
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-violet-50 {
    --tw-gradient-to: var(--color-violet-50);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-violet-500 {
    --tw-gradient-to: var(--color-violet-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-violet-600 {
    --tw-gradient-to: var(--color-violet-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .bg-clip-text {
    -webkit-background-clip: text;
    background-clip: text;
  }

  .fill-current {
    fill: currentColor;
  }

  .fill-neutral-30 {
    fill: var(--color-neutral-30);
  }

  .fill-primary {
    fill: var(--ph-primaryXX);
  }

  .fill-secondary {
    fill: var(--ph-secondary);
  }

  .fill-zinc-500 {
    fill: var(--color-zinc-500);
  }

  .object-contain {
    object-fit: contain;
  }

  .object-cover {
    object-fit: cover;
  }

  .object-center {
    object-position: center;
  }

  .object-top {
    object-position: top;
  }

  .\!p-0 {
    padding: calc(var(--spacing) * 0) !important;
  }

  .\!p-4 {
    padding: calc(var(--spacing) * 4) !important;
  }

  .p-0 {
    padding: calc(var(--spacing) * 0);
  }

  .p-0\.5 {
    padding: calc(var(--spacing) * .5);
  }

  .p-1 {
    padding: calc(var(--spacing) * 1);
  }

  .p-2 {
    padding: calc(var(--spacing) * 2);
  }

  .p-2\.5 {
    padding: calc(var(--spacing) * 2.5);
  }

  .p-3 {
    padding: calc(var(--spacing) * 3);
  }

  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }

  .p-4 {
    padding: calc(var(--spacing) * 4);
  }

  .p-5 {
    padding: calc(var(--spacing) * 5);
  }

  .p-6 {
    padding: calc(var(--spacing) * 6);
  }

  .p-8 {
    padding: calc(var(--spacing) * 8);
  }

  .p-10 {
    padding: calc(var(--spacing) * 10);
  }

  .p-\[14px\] {
    padding: 14px;
  }

  .p-\[16px\] {
    padding: 16px;
  }

  .\!px-1 {
    padding-inline: calc(var(--spacing) * 1) !important;
  }

  .\!px-2 {
    padding-inline: calc(var(--spacing) * 2) !important;
  }

  .px-0 {
    padding-inline: calc(var(--spacing) * 0);
  }

  .px-0\.5 {
    padding-inline: calc(var(--spacing) * .5);
  }

  .px-1 {
    padding-inline: calc(var(--spacing) * 1);
  }

  .px-1\.5 {
    padding-inline: calc(var(--spacing) * 1.5);
  }

  .px-2 {
    padding-inline: calc(var(--spacing) * 2);
  }

  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }

  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }

  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }

  .px-4 {
    padding-inline: calc(var(--spacing) * 4);
  }

  .px-5 {
    padding-inline: calc(var(--spacing) * 5);
  }

  .px-6 {
    padding-inline: calc(var(--spacing) * 6);
  }

  .px-7 {
    padding-inline: calc(var(--spacing) * 7);
  }

  .px-8 {
    padding-inline: calc(var(--spacing) * 8);
  }

  .px-10 {
    padding-inline: calc(var(--spacing) * 10);
  }

  .px-12 {
    padding-inline: calc(var(--spacing) * 12);
  }

  .px-14 {
    padding-inline: calc(var(--spacing) * 14);
  }

  .px-\[1rem\] {
    padding-inline: 1rem;
  }

  .px-\[4px\] {
    padding-inline: 4px;
  }

  .px-\[7px\] {
    padding-inline: 7px;
  }

  .px-\[9px\] {
    padding-inline: 9px;
  }

  .px-\[10px\] {
    padding-inline: 10px;
  }

  .px-\[12px\] {
    padding-inline: 12px;
  }

  .px-\[14px\] {
    padding-inline: 14px;
  }

  .px-\[16px\] {
    padding-inline: 16px;
  }

  .px-\[18px\] {
    padding-inline: 18px;
  }

  .px-\[19px\] {
    padding-inline: 19px;
  }

  .px-\[22px\] {
    padding-inline: 22px;
  }

  .px-\[24px\] {
    padding-inline: 24px;
  }

  .\!py-1 {
    padding-block: calc(var(--spacing) * 1) !important;
  }

  .py-0 {
    padding-block: calc(var(--spacing) * 0);
  }

  .py-0\.5 {
    padding-block: calc(var(--spacing) * .5);
  }

  .py-1 {
    padding-block: calc(var(--spacing) * 1);
  }

  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }

  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }

  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .py-3 {
    padding-block: calc(var(--spacing) * 3);
  }

  .py-3\.5 {
    padding-block: calc(var(--spacing) * 3.5);
  }

  .py-4 {
    padding-block: calc(var(--spacing) * 4);
  }

  .py-5 {
    padding-block: calc(var(--spacing) * 5);
  }

  .py-6 {
    padding-block: calc(var(--spacing) * 6);
  }

  .py-8 {
    padding-block: calc(var(--spacing) * 8);
  }

  .py-10 {
    padding-block: calc(var(--spacing) * 10);
  }

  .py-12 {
    padding-block: calc(var(--spacing) * 12);
  }

  .py-14 {
    padding-block: calc(var(--spacing) * 14);
  }

  .py-16 {
    padding-block: calc(var(--spacing) * 16);
  }

  .py-20 {
    padding-block: calc(var(--spacing) * 20);
  }

  .py-\[2px\] {
    padding-block: 2px;
  }

  .py-\[3px\] {
    padding-block: 3px;
  }

  .py-\[5px\] {
    padding-block: 5px;
  }

  .py-\[7px\] {
    padding-block: 7px;
  }

  .py-\[8px\] {
    padding-block: 8px;
  }

  .py-\[10px\] {
    padding-block: 10px;
  }

  .py-\[14px\] {
    padding-block: 14px;
  }

  .py-\[26px\] {
    padding-block: 26px;
  }

  .py-\[72px\] {
    padding-block: 72px;
  }

  .py-px {
    padding-block: 1px;
  }

  .pt-0 {
    padding-top: calc(var(--spacing) * 0);
  }

  .pt-0\.5 {
    padding-top: calc(var(--spacing) * .5);
  }

  .pt-1 {
    padding-top: calc(var(--spacing) * 1);
  }

  .pt-1\.5 {
    padding-top: calc(var(--spacing) * 1.5);
  }

  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }

  .pt-2\.5 {
    padding-top: calc(var(--spacing) * 2.5);
  }

  .pt-3 {
    padding-top: calc(var(--spacing) * 3);
  }

  .pt-3\.5 {
    padding-top: calc(var(--spacing) * 3.5);
  }

  .pt-4 {
    padding-top: calc(var(--spacing) * 4);
  }

  .pt-5 {
    padding-top: calc(var(--spacing) * 5);
  }

  .pt-6 {
    padding-top: calc(var(--spacing) * 6);
  }

  .pt-7 {
    padding-top: calc(var(--spacing) * 7);
  }

  .pt-8 {
    padding-top: calc(var(--spacing) * 8);
  }

  .pt-10 {
    padding-top: calc(var(--spacing) * 10);
  }

  .pt-12 {
    padding-top: calc(var(--spacing) * 12);
  }

  .pt-14 {
    padding-top: calc(var(--spacing) * 14);
  }

  .pt-20 {
    padding-top: calc(var(--spacing) * 20);
  }

  .pt-\[3px\] {
    padding-top: 3px;
  }

  .pt-\[14px\] {
    padding-top: 14px;
  }

  .pt-\[18px\] {
    padding-top: 18px;
  }

  .pt-\[29px\] {
    padding-top: 29px;
  }

  .pt-\[60px\] {
    padding-top: 60px;
  }

  .pr-1 {
    padding-right: calc(var(--spacing) * 1);
  }

  .pr-1\.5 {
    padding-right: calc(var(--spacing) * 1.5);
  }

  .pr-2 {
    padding-right: calc(var(--spacing) * 2);
  }

  .pr-2\.5 {
    padding-right: calc(var(--spacing) * 2.5);
  }

  .pr-3 {
    padding-right: calc(var(--spacing) * 3);
  }

  .pr-3\.5 {
    padding-right: calc(var(--spacing) * 3.5);
  }

  .pr-4 {
    padding-right: calc(var(--spacing) * 4);
  }

  .pr-5 {
    padding-right: calc(var(--spacing) * 5);
  }

  .pr-6 {
    padding-right: calc(var(--spacing) * 6);
  }

  .pr-9 {
    padding-right: calc(var(--spacing) * 9);
  }

  .pr-\[18px\] {
    padding-right: 18px;
  }

  .pb-0 {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .pb-0\.5 {
    padding-bottom: calc(var(--spacing) * .5);
  }

  .pb-1 {
    padding-bottom: calc(var(--spacing) * 1);
  }

  .pb-1\.5 {
    padding-bottom: calc(var(--spacing) * 1.5);
  }

  .pb-2 {
    padding-bottom: calc(var(--spacing) * 2);
  }

  .pb-2\.5 {
    padding-bottom: calc(var(--spacing) * 2.5);
  }

  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }

  .pb-3\.5 {
    padding-bottom: calc(var(--spacing) * 3.5);
  }

  .pb-4 {
    padding-bottom: calc(var(--spacing) * 4);
  }

  .pb-5 {
    padding-bottom: calc(var(--spacing) * 5);
  }

  .pb-6 {
    padding-bottom: calc(var(--spacing) * 6);
  }

  .pb-7 {
    padding-bottom: calc(var(--spacing) * 7);
  }

  .pb-8 {
    padding-bottom: calc(var(--spacing) * 8);
  }

  .pb-9 {
    padding-bottom: calc(var(--spacing) * 9);
  }

  .pb-10 {
    padding-bottom: calc(var(--spacing) * 10);
  }

  .pb-12 {
    padding-bottom: calc(var(--spacing) * 12);
  }

  .pb-14 {
    padding-bottom: calc(var(--spacing) * 14);
  }

  .pb-16 {
    padding-bottom: calc(var(--spacing) * 16);
  }

  .pb-20 {
    padding-bottom: calc(var(--spacing) * 20);
  }

  .pb-28 {
    padding-bottom: calc(var(--spacing) * 28);
  }

  .pb-\[14rem\] {
    padding-bottom: 14rem;
  }

  .pb-\[max\(0\.75rem\,env\(safe-area-inset-bottom\,0px\)\)\] {
    padding-bottom: max(.75rem, env(safe-area-inset-bottom, 0px));
  }

  .pl-0\.5 {
    padding-left: calc(var(--spacing) * .5);
  }

  .pl-1 {
    padding-left: calc(var(--spacing) * 1);
  }

  .pl-2 {
    padding-left: calc(var(--spacing) * 2);
  }

  .pl-2\.5 {
    padding-left: calc(var(--spacing) * 2.5);
  }

  .pl-3 {
    padding-left: calc(var(--spacing) * 3);
  }

  .pl-4 {
    padding-left: calc(var(--spacing) * 4);
  }

  .pl-5 {
    padding-left: calc(var(--spacing) * 5);
  }

  .pl-6 {
    padding-left: calc(var(--spacing) * 6);
  }

  .pl-8 {
    padding-left: calc(var(--spacing) * 8);
  }

  .pl-\[18px\] {
    padding-left: 18px;
  }

  .pl-\[22px\] {
    padding-left: 22px;
  }

  .pl-\[38px\] {
    padding-left: 38px;
  }

  .pl-\[58px\] {
    padding-left: 58px;
  }

  .pl-\[calc\(theme\(spacing\.6\)-3px\)\] {
    padding-left: calc(1.5rem - 3px);
  }

  .text-center {
    text-align: center;
  }

  .text-left {
    text-align: left;
  }

  .text-right {
    text-align: right;
  }

  .align-middle {
    vertical-align: middle;
  }

  .align-top {
    vertical-align: top;
  }

  .\[font-family\:var\(--ph-font-display\,var\(--ph-font-emphasis\)\)\] {
    font-family: var(--ph-font-display, var(--ph-font-emphasis));
  }

  .font-\[\"DM_Sans\"\,sans-serif\] {
    font-family: DM Sans, sans-serif;
  }

  .font-\[\"Plus_Jakarta_Sans\"\] {
    font-family: Plus Jakarta Sans;
  }

  .font-\[\'DM_Mono\'\,\'JetBrains_Mono\'\,monospace\] {
    font-family: DM Mono, JetBrains Mono, monospace;
  }

  .font-\[\'DM_Sans\'\,sans-serif\] {
    font-family: DM Sans, sans-serif;
  }

  .font-\[\'Plus_Jakarta_Sans\'\,sans-serif\] {
    font-family: Plus Jakarta Sans, sans-serif;
  }

  .font-\[\'Plus_Jakarta_Sans\'\] {
    font-family: Plus Jakarta Sans;
  }

  .font-\[\\\'Plus_Jakarta_Sans\\\'\] {
    font-family: "'Plus Jakarta Sans'";
  }

  .font-\[family-name\:var\(--ph-ref-typeface-accent\)\] {
    font-family: var(--ph-ref-typeface-accent);
  }

  .font-\[family-name\:var\(--ph-ref-typeface-base\)\], .font-body {
    font-family: var(--ph-ref-typeface-base);
  }

  .font-body-large {
    font-family: var(--ph-sys-typescale-body-lg-font);
  }

  .font-body-medium {
    font-family: var(--ph-sys-typescale-body-md-font);
  }

  .font-body-small {
    font-family: var(--ph-sys-typescale-body-sm-font);
  }

  .font-display-large {
    font-family: var(--ph-sys-typescale-display-lg-font);
  }

  .font-display-medium {
    font-family: var(--ph-sys-typescale-display-md-font);
  }

  .font-display-small {
    font-family: var(--ph-sys-typescale-display-sm-font);
  }

  .font-emphasis {
    font-family: var(--ph-ref-typeface-accent);
  }

  .font-headline-large {
    font-family: var(--ph-sys-typescale-headline-lg-font);
  }

  .font-headline-medium {
    font-family: var(--ph-sys-typescale-headline-md-font);
  }

  .font-headline-small {
    font-family: var(--ph-sys-typescale-headline-sm-font);
  }

  .font-mono {
    font-family: var(--font-mono);
  }

  .font-sans {
    font-family: var(--font-sans);
  }

  .font-serif {
    font-family: var(--font-serif);
  }

  .font-title-large {
    font-family: var(--ph-sys-typescale-title-lg-font);
  }

  .font-title-medium {
    font-family: var(--ph-sys-typescale-title-md-font);
  }

  .font-title-small {
    font-family: var(--ph-sys-typescale-title-sm-font);
  }

  .\!text-base {
    font-size: var(--text-base) !important;
    line-height: var(--tw-leading, var(--text-base--line-height)) !important;
  }

  .\!text-sm {
    font-size: var(--text-sm) !important;
    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
  }

  .text-2xl {
    font-size: var(--text-2xl);
    line-height: var(--tw-leading, var(--text-2xl--line-height));
  }

  .text-3xl {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .text-4xl {
    font-size: var(--text-4xl);
    line-height: var(--tw-leading, var(--text-4xl--line-height));
  }

  .text-5xl {
    font-size: var(--text-5xl);
    line-height: var(--tw-leading, var(--text-5xl--line-height));
  }

  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }

  .text-lg {
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
  }

  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }

  .text-xl {
    font-size: var(--text-xl);
    line-height: var(--tw-leading, var(--text-xl--line-height));
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }

  .\!text-\[1rem\] {
    font-size: 1rem !important;
  }

  .\!text-\[11px\] {
    font-size: 11px !important;
  }

  .\!text-\[16px\] {
    font-size: 16px !important;
  }

  .\!text-\[20px\] {
    font-size: 20px !important;
  }

  .\!text-\[24px\] {
    font-size: 24px !important;
  }

  .\!text-\[48px\] {
    font-size: 48px !important;
  }

  .text-\[0\.825rem\] {
    font-size: .825rem;
  }

  .text-\[1rem\] {
    font-size: 1rem;
  }

  .text-\[8\.5px\] {
    font-size: 8.5px;
  }

  .text-\[8px\] {
    font-size: 8px;
  }

  .text-\[9\.5px\] {
    font-size: 9.5px;
  }

  .text-\[9px\] {
    font-size: 9px;
  }

  .text-\[10\.5px\] {
    font-size: 10.5px;
  }

  .text-\[10px\] {
    font-size: 10px;
  }

  .text-\[11\.5px\] {
    font-size: 11.5px;
  }

  .text-\[11px\] {
    font-size: 11px;
  }

  .text-\[12\.5px\] {
    font-size: 12.5px;
  }

  .text-\[12px\] {
    font-size: 12px;
  }

  .text-\[13\.5px\] {
    font-size: 13.5px;
  }

  .text-\[13px\] {
    font-size: 13px;
  }

  .text-\[14px\] {
    font-size: 14px;
  }

  .text-\[15px\] {
    font-size: 15px;
  }

  .text-\[16px\] {
    font-size: 16px;
  }

  .text-\[18px\] {
    font-size: 18px;
  }

  .text-\[21px\] {
    font-size: 21px;
  }

  .text-\[22px\] {
    font-size: 22px;
  }

  .text-\[24px\] {
    font-size: 24px;
  }

  .text-\[26px\] {
    font-size: 26px;
  }

  .text-\[28px\] {
    font-size: 28px;
  }

  .text-\[45px\] {
    font-size: 45px;
  }

  .text-\[52px\] {
    font-size: 52px;
  }

  .\!leading-9 {
    --tw-leading: calc(var(--spacing) * 9) !important;
    line-height: calc(var(--spacing) * 9) !important;
  }

  .leading-4 {
    --tw-leading: calc(var(--spacing) * 4);
    line-height: calc(var(--spacing) * 4);
  }

  .leading-5 {
    --tw-leading: calc(var(--spacing) * 5);
    line-height: calc(var(--spacing) * 5);
  }

  .leading-\[1\.1rem\] {
    --tw-leading: 1.1rem;
    line-height: 1.1rem;
  }

  .leading-\[1\.3\] {
    --tw-leading: 1.3;
    line-height: 1.3;
  }

  .leading-\[1\.4\] {
    --tw-leading: 1.4;
    line-height: 1.4;
  }

  .leading-\[1\.5\] {
    --tw-leading: 1.5;
    line-height: 1.5;
  }

  .leading-\[1\.8\] {
    --tw-leading: 1.8;
    line-height: 1.8;
  }

  .leading-\[1\.35\] {
    --tw-leading: 1.35;
    line-height: 1.35;
  }

  .leading-\[1\.45\] {
    --tw-leading: 1.45;
    line-height: 1.45;
  }

  .leading-\[1\.55\] {
    --tw-leading: 1.55;
    line-height: 1.55;
  }

  .leading-\[12px\] {
    --tw-leading: 12px;
    line-height: 12px;
  }

  .leading-\[14px\] {
    --tw-leading: 14px;
    line-height: 14px;
  }

  .leading-\[16px\] {
    --tw-leading: 16px;
    line-height: 16px;
  }

  .leading-\[18px\] {
    --tw-leading: 18px;
    line-height: 18px;
  }

  .leading-\[20px\] {
    --tw-leading: 20px;
    line-height: 20px;
  }

  .leading-\[24px\] {
    --tw-leading: 24px;
    line-height: 24px;
  }

  .leading-\[28px\] {
    --tw-leading: 28px;
    line-height: 28px;
  }

  .leading-\[30px\] {
    --tw-leading: 30px;
    line-height: 30px;
  }

  .leading-\[32px\] {
    --tw-leading: 32px;
    line-height: 32px;
  }

  .leading-\[52px\] {
    --tw-leading: 52px;
    line-height: 52px;
  }

  .leading-\[64px\] {
    --tw-leading: 64px;
    line-height: 64px;
  }

  .leading-none {
    --tw-leading: 1;
    line-height: 1;
  }

  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }

  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }

  .leading-snug {
    --tw-leading: var(--leading-snug);
    line-height: var(--leading-snug);
  }

  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }

  .\!font-bold {
    --tw-font-weight: var(--font-weight-bold) !important;
    font-weight: var(--font-weight-bold) !important;
  }

  .\!font-semibold {
    --tw-font-weight: var(--font-weight-semibold) !important;
    font-weight: var(--font-weight-semibold) !important;
  }

  .font-\[20px\] {
    --tw-font-weight: 20px;
    font-weight: 20px;
  }

  .font-\[600\] {
    --tw-font-weight: 600;
    font-weight: 600;
  }

  .font-\[700\] {
    --tw-font-weight: 700;
    font-weight: 700;
  }

  .font-\[800\] {
    --tw-font-weight: 800;
    font-weight: 800;
  }

  .font-\[var\(--ph-ref-typeface-body\)\] {
    --tw-font-weight: var(--ph-ref-typeface-body);
    font-weight: var(--ph-ref-typeface-body);
  }

  .font-black {
    --tw-font-weight: var(--font-weight-black);
    font-weight: var(--font-weight-black);
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .font-extrabold {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

  .font-light {
    --tw-font-weight: var(--font-weight-light);
    font-weight: var(--font-weight-light);
  }

  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }

  .font-normal {
    --tw-font-weight: var(--font-weight-normal);
    font-weight: var(--font-weight-normal);
  }

  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }

  .tracking-\[-0\.2px\] {
    --tw-tracking: -.2px;
    letter-spacing: -.2px;
  }

  .tracking-\[-0\.5px\] {
    --tw-tracking: -.5px;
    letter-spacing: -.5px;
  }

  .tracking-\[0\.3px\] {
    --tw-tracking: .3px;
    letter-spacing: .3px;
  }

  .tracking-\[0\.4px\] {
    --tw-tracking: .4px;
    letter-spacing: .4px;
  }

  .tracking-\[0\.05em\] {
    --tw-tracking: .05em;
    letter-spacing: .05em;
  }

  .tracking-\[0\.5px\] {
    --tw-tracking: .5px;
    letter-spacing: .5px;
  }

  .tracking-\[0\.06em\] {
    --tw-tracking: .06em;
    letter-spacing: .06em;
  }

  .tracking-\[0\.6px\] {
    --tw-tracking: .6px;
    letter-spacing: .6px;
  }

  .tracking-\[0\.07em\] {
    --tw-tracking: .07em;
    letter-spacing: .07em;
  }

  .tracking-\[0\.7px\] {
    --tw-tracking: .7px;
    letter-spacing: .7px;
  }

  .tracking-\[0\.08em\] {
    --tw-tracking: .08em;
    letter-spacing: .08em;
  }

  .tracking-\[0\.055em\] {
    --tw-tracking: .055em;
    letter-spacing: .055em;
  }

  .tracking-\[0\.088em\] {
    --tw-tracking: .088em;
    letter-spacing: .088em;
  }

  .tracking-\[2px\] {
    --tw-tracking: 2px;
    letter-spacing: 2px;
  }

  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }

  .tracking-wider {
    --tw-tracking: var(--tracking-wider);
    letter-spacing: var(--tracking-wider);
  }

  .tracking-widest {
    --tw-tracking: var(--tracking-widest);
    letter-spacing: var(--tracking-widest);
  }

  .break-words {
    overflow-wrap: break-word;
  }

  .break-all {
    word-break: break-all;
  }

  .overflow-ellipsis, .text-ellipsis {
    text-overflow: ellipsis;
  }

  .\!whitespace-nowrap {
    white-space: nowrap !important;
  }

  .whitespace-normal {
    white-space: normal;
  }

  .whitespace-nowrap {
    white-space: nowrap;
  }

  .whitespace-pre-line {
    white-space: pre-line;
  }

  .whitespace-pre-wrap {
    white-space: pre-wrap;
  }

  .\!text-neutral-30 {
    color: var(--color-neutral-30) !important;
  }

  .\!text-surface-container-highest {
    color: var(--ph-surface-container-highest) !important;
  }

  .text-\[\#1a1a1a\] {
    color: #1a1a1a;
  }

  .text-\[\#1b7c3d\] {
    color: #1b7c3d;
  }

  .text-\[\#1c1b1f\] {
    color: #1c1b1f;
  }

  .text-\[\#3CBF26\] {
    color: #3cbf26;
  }

  .text-\[\#005B77\] {
    color: #005b77;
  }

  .text-\[\#6B3FA0\] {
    color: #6b3fa0;
  }

  .text-\[\#6b7280\] {
    color: #6b7280;
  }

  .text-\[\#8e82a6\] {
    color: #8e82a6;
  }

  .text-\[\#9a6d10\] {
    color: #9a6d10;
  }

  .text-\[\#928F8E\] {
    color: #928f8e;
  }

  .text-\[\#5524D4\] {
    color: #5524d4;
  }

  .text-\[\#49454F\] {
    color: #49454f;
  }

  .text-\[\#65558F\] {
    color: #65558f;
  }

  .text-\[\#F00090\] {
    color: #f00090;
  }

  .text-\[\#FB5C00\] {
    color: #fb5c00;
  }

  .text-\[\#b23535\] {
    color: #b23535;
  }

  .text-\[\#d3d3d3\] {
    color: #d3d3d3;
  }

  .text-\[\#d97706\] {
    color: #d97706;
  }

  .text-\[\#dc2626\] {
    color: #dc2626;
  }

  .text-\[color\:var\(--ch-on-background\)\] {
    color: var(--ch-on-background);
  }

  .text-\[color\:var\(--ch-text-brand-primary\)\] {
    color: var(--ch-text-brand-primary);
  }

  .text-\[color\:var\(--ch-text-on-brand-primary\)\] {
    color: var(--ch-text-on-brand-primary);
  }

  .text-\[color\:var\(--ph-error\)\] {
    color: var(--ph-error);
  }

  .text-\[color\:var\(--ph-on-error-container\)\] {
    color: var(--ph-on-error-container);
  }

  .text-\[color\:var\(--ph-on-primary-container\)\] {
    color: var(--ph-on-primary-container);
  }

  .text-\[color\:var\(--ph-on-surface\)\] {
    color: var(--ph-on-surface);
  }

  .text-\[color\:var\(--ph-on-surface-variant\)\] {
    color: var(--ph-on-surface-variant);
  }

  .text-\[color\:var\(--ph-on-tertiary-container\)\] {
    color: var(--ph-on-tertiary-container);
  }

  .text-\[color\:var\(--ph-outline\)\] {
    color: var(--ph-outline);
  }

  .text-\[color\:var\(--ph-primary\)\] {
    color: var(--ph-primary);
  }

  .text-\[color\:var\(--ph-ref-palette-neutral30\)\] {
    color: var(--ph-ref-palette-neutral30);
  }

  .text-\[color\:var\(--ph-ref-palette-neutral50\)\] {
    color: var(--ph-ref-palette-neutral50);
  }

  .text-\[color\:var\(--ph-ref-palette-tertiary40\)\] {
    color: var(--ph-ref-palette-tertiary40);
  }

  .text-\[color\:var\(--ph-secondary\)\] {
    color: var(--ph-secondary);
  }

  .text-\[color\:var\(--ph-tertiary\)\] {
    color: var(--ph-tertiary);
  }

  .text-\[oklch\(15\%_0\.004_321\.31\)\] {
    color: oklch(15% .004 321.31);
  }

  .text-\[oklch\(40\%_0\.10_150\)\] {
    color: oklch(40% .1 150);
  }

  .text-\[oklch\(40\%_0\.10_260\)\] {
    color: oklch(40% .1 260);
  }

  .text-\[oklch\(40\%_0\.12_340\)\] {
    color: oklch(40% .12 340);
  }

  .text-\[oklch\(40\%_0\.16284_321\.31\)\] {
    color: oklch(40% .16284 321.31);
  }

  .text-\[oklch\(45\%_0\.004_321\.31\)\] {
    color: oklch(45% .004 321.31);
  }

  .text-\[oklch\(50\%_0\.14_39\.23\)\] {
    color: oklch(50% .14 39.23);
  }

  .text-\[oklch\(55\%_0\.004_321\.31\)\] {
    color: oklch(55% .004 321.31);
  }

  .text-\[oklch\(55\%_0\.18_25\)\] {
    color: oklch(55% .18 25);
  }

  .text-\[var\(--ch-on\)\] {
    color: var(--ch-on);
  }

  .text-\[var\(--ch-on-1\)\] {
    color: var(--ch-on-1);
  }

  .text-\[var\(--ch-on-2\)\] {
    color: var(--ch-on-2);
  }

  .text-\[var\(--ch-on-3\)\] {
    color: var(--ch-on-3);
  }

  .text-\[var\(--ch-on-4\)\] {
    color: var(--ch-on-4);
  }

  .text-\[var\(--ph-error\)\] {
    color: var(--ph-error);
  }

  .text-\[var\(--ph-on-primary\)\] {
    color: var(--ph-on-primary);
  }

  .text-\[var\(--ph-on-primary-container\)\] {
    color: var(--ph-on-primary-container);
  }

  .text-\[var\(--ph-on-surface\)\] {
    color: var(--ph-on-surface);
  }

  .text-\[var\(--ph-on-surface-variant\)\] {
    color: var(--ph-on-surface-variant);
  }

  .text-\[var\(--ph-primary\)\] {
    color: var(--ph-primary);
  }

  .text-\[var\(--ph-ref-palette-neutral-variant50\)\] {
    color: var(--ph-ref-palette-neutral-variant50);
  }

  .text-\[var\(--ph-ref-palette-neutral10\)\] {
    color: var(--ph-ref-palette-neutral10);
  }

  .text-\[var\(--ph-ref-palette-neutral50\)\] {
    color: var(--ph-ref-palette-neutral50);
  }

  .text-\[var\(--ph-ref-palette-neutral60\)\] {
    color: var(--ph-ref-palette-neutral60);
  }

  .text-\[var\(--ph-ref-palette-neutral70\)\] {
    color: var(--ph-ref-palette-neutral70);
  }

  .text-\[var\(--ph-ref-palette-primary-40\)\] {
    color: var(--ph-ref-palette-primary-40);
  }

  .text-\[var\(--ph-ref-palette-primary30\)\] {
    color: var(--ph-ref-palette-primary30);
  }

  .text-\[var\(--ph-ref-palette-secondary40\)\] {
    color: var(--ph-ref-palette-secondary40);
  }

  .text-\[var\(--ph-ref-palette-tertiary40\)\] {
    color: var(--ph-ref-palette-tertiary40);
  }

  .text-amber-700 {
    color: var(--color-amber-700);
  }

  .text-amber-800 {
    color: var(--color-amber-800);
  }

  .text-amber-900 {
    color: var(--color-amber-900);
  }

  .text-amber-950 {
    color: var(--color-amber-950);
  }

  .text-black {
    color: var(--color-black);
  }

  .text-blue-700 {
    color: var(--color-blue-700);
  }

  .text-blue-800 {
    color: var(--color-blue-800);
  }

  .text-blue-900 {
    color: var(--color-blue-900);
  }

  .text-gray-400 {
    color: var(--color-gray-400);
  }

  .text-gray-500 {
    color: var(--color-gray-500);
  }

  .text-gray-600 {
    color: var(--color-gray-600);
  }

  .text-gray-700 {
    color: var(--color-gray-700);
  }

  .text-gray-800 {
    color: var(--color-gray-800);
  }

  .text-gray-900 {
    color: var(--color-gray-900);
  }

  .text-green-400 {
    color: var(--color-green-400);
  }

  .text-green-500 {
    color: var(--color-green-500);
  }

  .text-green-700 {
    color: var(--color-green-700);
  }

  .text-green-800 {
    color: var(--color-green-800);
  }

  .text-indigo-600 {
    color: var(--color-indigo-600);
  }

  .text-indigo-700 {
    color: var(--color-indigo-700);
  }

  .text-neutral-5 {
    color: var(--color-neutral-5);
  }

  .text-neutral-10 {
    color: var(--color-neutral-10);
  }

  .text-neutral-20 {
    color: var(--color-neutral-20);
  }

  .text-neutral-30 {
    color: var(--color-neutral-30);
  }

  .text-neutral-40 {
    color: var(--color-neutral-40);
  }

  .text-neutral-50 {
    color: var(--color-neutral-50);
  }

  .text-neutral-60 {
    color: var(--color-neutral-60);
  }

  .text-neutral-70 {
    color: var(--color-neutral-70);
  }

  .text-neutral-80 {
    color: var(--color-neutral-80);
  }

  .text-neutral-99 {
    color: var(--color-neutral-99);
  }

  .text-neutral-100 {
    color: var(--color-neutral-100);
  }

  .text-neutral-100\/90 {
    color: #f5f5f5e6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-neutral-100\/90 {
      color: color-mix(in oklab, var(--color-neutral-100) 90%, transparent);
    }
  }

  .text-neutral-400 {
    color: var(--color-neutral-400);
  }

  .text-neutral-500 {
    color: var(--color-neutral-500);
  }

  .text-neutral-600 {
    color: var(--color-neutral-600);
  }

  .text-neutral-700 {
    color: var(--color-neutral-700);
  }

  .text-on-primary {
    color: var(--ph-on-primary);
  }

  .text-on-primary-container {
    color: var(--ph-on-primary-container);
  }

  .text-on-secondary {
    color: var(--ph-on-secondary);
  }

  .text-on-secondary-container {
    color: var(--ph-on-secondary-container);
  }

  .text-on-surface {
    color: var(--ph-on-surface);
  }

  .text-on-surface-variant, .text-on-surface-variant\/80 {
    color: var(--ph-on-surface-variant);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-on-surface-variant\/80 {
      color: color-mix(in oklab, var(--ph-on-surface-variant) 80%, transparent);
    }
  }

  .text-on-surface\/80 {
    color: var(--ph-on-surface);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-on-surface\/80 {
      color: color-mix(in oklab, var(--ph-on-surface) 80%, transparent);
    }
  }

  .text-orange-500 {
    color: var(--color-orange-500);
  }

  .text-orange-700 {
    color: var(--color-orange-700);
  }

  .text-outline {
    color: var(--ph-outline);
  }

  .text-outline-variant {
    color: var(--ph-outline-variant);
  }

  .text-palette-primary-40 {
    color: var(--color-palette-primary-40);
  }

  .text-primary {
    color: var(--ph-primaryXX);
  }

  .text-primary-container {
    color: var(--ph-primary-container);
  }

  .text-purple-600 {
    color: var(--color-purple-600);
  }

  .text-purple-800 {
    color: var(--color-purple-800);
  }

  .text-red-500 {
    color: var(--color-red-500);
  }

  .text-red-600 {
    color: var(--color-red-600);
  }

  .text-red-700 {
    color: var(--color-red-700);
  }

  .text-red-800 {
    color: var(--color-red-800);
  }

  .text-red-900 {
    color: var(--color-red-900);
  }

  .text-secondary {
    color: var(--ph-secondary);
  }

  .text-slate-500 {
    color: var(--color-slate-500);
  }

  .text-slate-600 {
    color: var(--color-slate-600);
  }

  .text-slate-700 {
    color: var(--color-slate-700);
  }

  .text-transparent {
    color: #0000;
  }

  .text-white {
    color: var(--color-white);
  }

  .text-white\/60 {
    color: #fff9;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/60 {
      color: color-mix(in oklab, var(--color-white) 60%, transparent);
    }
  }

  .text-white\/80 {
    color: #fffc;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/80 {
      color: color-mix(in oklab, var(--color-white) 80%, transparent);
    }
  }

  .text-white\/90 {
    color: #ffffffe6;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .text-white\/90 {
      color: color-mix(in oklab, var(--color-white) 90%, transparent);
    }
  }

  .text-yellow-400 {
    color: var(--color-yellow-400);
  }

  .text-yellow-500 {
    color: var(--color-yellow-500);
  }

  .text-yellow-700 {
    color: var(--color-yellow-700);
  }

  .\!normal-case {
    text-transform: none !important;
  }

  .capitalize {
    text-transform: capitalize;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .not-italic {
    font-style: normal;
  }

  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .line-through {
    text-decoration-line: line-through;
  }

  .no-underline {
    text-decoration-line: none;
  }

  .overline {
    text-decoration-line: overline;
  }

  .underline {
    text-decoration-line: underline;
  }

  .decoration-from-font {
    text-decoration-thickness: from-font;
  }

  .underline-offset-2 {
    text-underline-offset: 2px;
  }

  .underline-offset-\[3px\] {
    text-underline-offset: 3px;
  }

  .placeholder-primary::placeholder {
    color: var(--ph-primaryXX);
  }

  .opacity-0 {
    opacity: 0;
  }

  .opacity-40 {
    opacity: .4;
  }

  .opacity-50 {
    opacity: .5;
  }

  .opacity-55 {
    opacity: .55;
  }

  .opacity-60 {
    opacity: .6;
  }

  .opacity-70 {
    opacity: .7;
  }

  .opacity-80 {
    opacity: .8;
  }

  .opacity-85 {
    opacity: .85;
  }

  .opacity-90 {
    opacity: .9;
  }

  .opacity-100 {
    opacity: 1;
  }

  .opacity-\[0\.35\] {
    opacity: .35;
  }

  .opacity-\[0\.95\] {
    opacity: .95;
  }

  .\!shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a) !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .\!shadow-none {
    --tw-shadow: 0 0 #0000 !important;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-2xl {
    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, #00000040);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.04\)\] {
    --tw-shadow: 0 1px 2px var(--tw-shadow-color, #0000000a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_3px_oklch\(0\%_0_0_\/_0\.04\)\] {
    --tw-shadow: 0 1px 3px var(--tw-shadow-color, oklch(0% 0 0 / .04));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_4px_oklch\(0\%_0_0_\/_0\.06\)\] {
    --tw-shadow: 0 1px 4px var(--tw-shadow-color, oklch(0% 0 0 / .06));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_4px_rgba\(0\,0\,0\,0\.04\)\] {
    --tw-shadow: 0 1px 4px var(--tw-shadow-color, #0000000a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_1px_8px_rgba\(0\,0\,0\,0\.06\)\] {
    --tw-shadow: 0 1px 8px var(--tw-shadow-color, #0000000f);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_2px_6px_oklch\(30\%_0\.16_321_\/_0\.2\)\] {
    --tw-shadow: 0 2px 6px var(--tw-shadow-color, oklch(30% .16 321 / .2));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_2px_6px_oklch\(30\%_0\.16_321_\/_0\.25\)\] {
    --tw-shadow: 0 2px 6px var(--tw-shadow-color, oklch(30% .16 321 / .25));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_2px_8px_oklch\(30\%_0\.16_321_\/_0\.3\)\] {
    --tw-shadow: 0 2px 8px var(--tw-shadow-color, oklch(30% .16 321 / .3));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_2px_8px_rgba\(107\,79\,160\,0\.35\)\] {
    --tw-shadow: 0 2px 8px var(--tw-shadow-color, #6b4fa059);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_4px_24px_oklch\(0\%_0_0_\/_0\.12\)\,0_2px_8px_oklch\(0\%_0_0_\/_0\.08\)\] {
    --tw-shadow: 0 4px 24px var(--tw-shadow-color, oklch(0% 0 0 / .12)), 0 2px 8px var(--tw-shadow-color, oklch(0% 0 0 / .08));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_24px_oklch\(0\%_0_0_\/_0\.10\)\] {
    --tw-shadow: 0 8px 24px var(--tw-shadow-color, oklch(0% 0 0 / .1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_8px_32px_oklch\(0\%_0_0_\/_0\.12\)\] {
    --tw-shadow: 0 8px 32px var(--tw-shadow-color, oklch(0% 0 0 / .12));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-\[0_20px_35px_0px_rgba\(0\,0\,0\,0\.3\)\] {
    --tw-shadow: 0 20px 35px 0px var(--tw-shadow-color, #0000004d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-inner {
    --tw-shadow: inset 0 2px 4px 0 var(--tw-shadow-color, #0000000d);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-lg {
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-md {
    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-none {
    --tw-shadow: 0 0 #0000;
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-sm {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-xl {
    --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-0 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-2 {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring-\[3px\] {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .shadow-surface-container {
    --tw-shadow-color: var(--ph-surface-container);
  }

  @supports (color: color-mix(in lab, red, red)) {
    .shadow-surface-container {
      --tw-shadow-color: color-mix(in oklab, var(--ph-surface-container) var(--tw-shadow-alpha), transparent);
    }
  }

  .ring-\[\#6B3FA0\] {
    --tw-ring-color: #6b3fa0;
  }

  .ring-\[\#6B3FA0\]\/20 {
    --tw-ring-color: oklab(46.8541% .0799952 -.129516 / .2);
  }

  .ring-black\/5 {
    --tw-ring-color: #0000000d;
  }

  @supports (color: color-mix(in lab, red, red)) {
    .ring-black\/5 {
      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
    }
  }

  .ring-blue-500 {
    --tw-ring-color: var(--color-blue-500);
  }

  .ring-primary {
    --tw-ring-color: var(--ph-primaryXX);
  }

  .ring-purple-300 {
    --tw-ring-color: var(--color-purple-300);
  }

  .ring-purple-600 {
    --tw-ring-color: var(--color-purple-600);
  }

  .ring-secondary {
    --tw-ring-color: var(--ph-secondary);
  }

  .ring-offset-1 {
    --tw-ring-offset-width: 1px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .ring-offset-2 {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .outline-0 {
    outline-style: var(--tw-outline-style);
    outline-width: 0;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-\[1px_1px_1px_rgba\(0\,0\,0\,0\.31\)\] {
    --tw-drop-shadow-size: drop-shadow(1px 1px 1px var(--tw-drop-shadow-color, #0000004f));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .drop-shadow-\[1px_1px_1px_rgba\(0\,0\,0\,0\.41\)\] {
    --tw-drop-shadow-size: drop-shadow(1px 1px 1px var(--tw-drop-shadow-color, #00000069));
    --tw-drop-shadow: var(--tw-drop-shadow-size);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .grayscale-\[0\.8\] {
    --tw-grayscale: grayscale(.8);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .invert {
    --tw-invert: invert(100%);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .backdrop-blur-3xl {
    --tw-backdrop-blur: blur(var(--blur-3xl));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-md {
    --tw-backdrop-blur: blur(var(--blur-md));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(var(--blur-sm));
    -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
    backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[background-color\,border-color\] {
    transition-property: background-color, border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[box-shadow\,border-color\] {
    transition-property: box-shadow, border-color;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[filter\] {
    transition-property: filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[left\] {
    transition-property: left;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[max-height\] {
    transition-property: max-height;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[opacity\,transform\] {
    transition-property: opacity, transform;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-\[width\] {
    transition-property: width;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-all {
    transition-property: all;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-colors {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-opacity {
    transition-property: opacity;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-shadow {
    transition-property: box-shadow;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .transition-transform {
    transition-property: transform, translate, scale, rotate;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .delay-500 {
    transition-delay: .5s;
  }

  .duration-100 {
    --tw-duration: .1s;
    transition-duration: .1s;
  }

  .duration-150 {
    --tw-duration: .15s;
    transition-duration: .15s;
  }

  .duration-200 {
    --tw-duration: .2s;
    transition-duration: .2s;
  }

  .duration-250 {
    --tw-duration: .25s;
    transition-duration: .25s;
  }

  .duration-300 {
    --tw-duration: .3s;
    transition-duration: .3s;
  }

  .duration-500 {
    --tw-duration: .5s;
    transition-duration: .5s;
  }

  .duration-700 {
    --tw-duration: .7s;
    transition-duration: .7s;
  }

  .duration-\[120ms\] {
    --tw-duration: .12s;
    transition-duration: .12s;
  }

  .duration-\[250ms\] {
    --tw-duration: .25s;
    transition-duration: .25s;
  }

  .duration-\[400ms\] {
    --tw-duration: .4s;
    transition-duration: .4s;
  }

  .ease-\[cubic-bezier\(0\.22\,1\,0\.36\,1\)\] {
    --tw-ease: cubic-bezier(.22, 1, .36, 1);
    transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  }

  .ease-in {
    --tw-ease: var(--ease-in);
    transition-timing-function: var(--ease-in);
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .will-change-transform {
    will-change: transform;
  }

  .outline-none {
    --tw-outline-style: none;
    outline-style: none;
  }

  .select-none {
    -webkit-user-select: none;
    user-select: none;
  }

  .\[-webkit-overflow-scrolling\:touch\] {
    -webkit-overflow-scrolling: touch;
  }

  @media (hover: hover) {
    .group-hover\:block:is(:where(.group):hover *) {
      display: block;
    }

    .group-hover\:w-full:is(:where(.group):hover *) {
      width: 100%;
    }

    .group-hover\:translate-x-0\.5:is(:where(.group):hover *) {
      --tw-translate-x: calc(var(--spacing) * .5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .group-hover\:scale-105:is(:where(.group):hover *) {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .group-hover\:scale-110:is(:where(.group):hover *) {
      --tw-scale-x: 110%;
      --tw-scale-y: 110%;
      --tw-scale-z: 110%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .group-hover\:scale-\[1\.08\]:is(:where(.group):hover *) {
      scale: 1.08;
    }

    .group-hover\:text-neutral-5:is(:where(.group):hover *) {
      color: var(--color-neutral-5);
    }

    .group-hover\:text-palette-primary-50:is(:where(.group):hover *) {
      color: var(--color-palette-primary-50);
    }

    .group-hover\:no-underline:is(:where(.group):hover *) {
      text-decoration-line: none;
    }

    .group-hover\:opacity-65:is(:where(.group):hover *) {
      opacity: .65;
    }

    .group-hover\:opacity-100:is(:where(.group):hover *) {
      opacity: 1;
    }

    .group-hover\:grayscale-0:is(:where(.group):hover *) {
      --tw-grayscale: grayscale(0%);
      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
    }
  }

  .placeholder\:text-\[\#8e82a6\]\/80::placeholder {
    color: oklab(63.0019% .027526 -.0475315 / .8);
  }

  .placeholder\:text-\[color\:var\(--ph-outline\)\]::placeholder {
    color: var(--ph-outline);
  }

  .placeholder\:text-\[oklch\(60\%_0\.16284_321\.31\)\]::placeholder {
    color: oklch(60% .16284 321.31);
  }

  .placeholder\:text-neutral-60::placeholder {
    color: var(--color-neutral-60);
  }

  .placeholder\:text-on-surface-variant::placeholder {
    color: var(--ph-on-surface-variant);
  }

  .placeholder\:italic::placeholder {
    font-style: italic;
  }

  .first\:ml-\[0px\]:first-child {
    margin-left: 0;
  }

  .first\:rounded-l-xl:first-child {
    border-top-left-radius: var(--radius-xl);
    border-bottom-left-radius: var(--radius-xl);
  }

  .first\:rounded-tl-lg:first-child {
    border-top-left-radius: var(--radius-lg);
  }

  .last\:mb-0:last-child {
    margin-bottom: calc(var(--spacing) * 0);
  }

  .last\:flex-none:last-child {
    flex: none;
  }

  .last\:rounded-r-xl:last-child {
    border-top-right-radius: var(--radius-xl);
    border-bottom-right-radius: var(--radius-xl);
  }

  .last\:rounded-tr-lg:last-child {
    border-top-right-radius: var(--radius-lg);
  }

  .last\:border-b-0:last-child {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 0;
  }

  .last\:border-none:last-child {
    --tw-border-style: none;
    border-style: none;
  }

  .last\:pb-0:last-child {
    padding-bottom: calc(var(--spacing) * 0);
  }

  .checked\:bg-white:checked {
    background-color: var(--color-white);
  }

  .checked\:after\:absolute:checked:after {
    content: var(--tw-content);
    position: absolute;
  }

  .checked\:after\:top-\[1px\]:checked:after {
    content: var(--tw-content);
    top: 1px;
  }

  .checked\:after\:left-1:checked:after {
    content: var(--tw-content);
    left: calc(var(--spacing) * 1);
  }

  .checked\:after\:h-2:checked:after {
    content: var(--tw-content);
    height: calc(var(--spacing) * 2);
  }

  .checked\:after\:w-1:checked:after {
    content: var(--tw-content);
    width: calc(var(--spacing) * 1);
  }

  .checked\:after\:rotate-45:checked:after {
    content: var(--tw-content);
    rotate: 45deg;
  }

  .checked\:after\:border-r-2:checked:after {
    content: var(--tw-content);
    border-right-style: var(--tw-border-style);
    border-right-width: 2px;
  }

  .checked\:after\:border-b-2:checked:after {
    content: var(--tw-content);
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 2px;
  }

  .checked\:after\:border-\[\#fb5c00\]:checked:after {
    content: var(--tw-content);
    border-color: #fb5c00;
  }

  .checked\:after\:content-\[\'\'\]:checked:after {
    content: var(--tw-content);
    --tw-content: "";
    content: var(--tw-content);
  }

  .focus-within\:border-0:focus-within {
    border-style: var(--tw-border-style);
    border-width: 0;
  }

  @media (hover: hover) {
    .hover\:-translate-y-0\.5:hover {
      --tw-translate-y: calc(var(--spacing) * -.5);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:-translate-y-px:hover {
      --tw-translate-y: -1px;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .hover\:scale-100:hover {
      --tw-scale-x: 100%;
      --tw-scale-y: 100%;
      --tw-scale-z: 100%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:scale-105:hover {
      --tw-scale-x: 105%;
      --tw-scale-y: 105%;
      --tw-scale-z: 105%;
      scale: var(--tw-scale-x) var(--tw-scale-y);
    }

    .hover\:border-\[\#6B3FA0\]:hover {
      border-color: #6b3fa0;
    }

    .hover\:border-\[\#6B3FA0\]\/40:hover {
      border-color: oklab(46.8541% .0799952 -.129516 / .4);
    }

    .hover\:border-\[\#6B3FA0\]\/50:hover {
      border-color: oklab(46.8541% .0799952 -.129516 / .5);
    }

    .hover\:border-\[\#6B3FA0\]\/60:hover {
      border-color: oklab(46.8541% .0799952 -.129516 / .6);
    }

    .hover\:border-\[\#6B3FA0\]\/70:hover {
      border-color: oklab(46.8541% .0799952 -.129516 / .7);
    }

    .hover\:border-\[\#8e82a6\]:hover {
      border-color: #8e82a6;
    }

    .hover\:border-\[color\:var\(--ph-outline\)\]:hover {
      border-color: var(--ph-outline);
    }

    .hover\:border-\[oklch\(60\%_0\.16284_321\.31\)\]:hover {
      border-color: oklch(60% .16284 321.31);
    }

    .hover\:border-\[var\(--ph-ref-palette-neutral80\)\]:hover {
      border-color: var(--ph-ref-palette-neutral80);
    }

    .hover\:border-\[var\(--ph-ref-palette-neutral85\)\]:hover {
      border-color: var(--ph-ref-palette-neutral85);
    }

    .hover\:border-\[var\(--ph-ref-palette-primary-40\)\]:hover {
      border-color: var(--ph-ref-palette-primary-40);
    }

    .hover\:border-\[var\(--ph-ref-palette-primary60\)\]:hover {
      border-color: var(--ph-ref-palette-primary60);
    }

    .hover\:border-neutral-70:hover {
      border-color: var(--color-neutral-70);
    }

    .hover\:border-palette-primary-80:hover {
      border-color: var(--color-palette-primary-80);
    }

    .hover\:border-primary:hover {
      border-color: var(--ph-primaryXX);
    }

    .hover\:border-slate-500:hover {
      border-color: var(--color-slate-500);
    }

    .hover\:\!bg-\[oklch\(50\%_0\.12_210\.05\)\]:hover {
      background-color: oklch(50% .12 210.05) !important;
    }

    .hover\:\!bg-white:hover {
      background-color: var(--color-white) !important;
    }

    .hover\:bg-\[\#5a3388\]:hover {
      background-color: #5a3388;
    }

    .hover\:bg-\[\#F4EEEC\]:hover {
      background-color: #f4eeec;
    }

    .hover\:bg-\[\#FAFAFA\]:hover {
      background-color: #fafafa;
    }

    .hover\:bg-\[\#f0ecf5\]:hover {
      background-color: #f0ecf5;
    }

    .hover\:bg-\[\#f5f0ff\]:hover {
      background-color: #f5f0ff;
    }

    .hover\:bg-\[color-mix\(in_srgb\,var\(--ph-on-surface\)_6\%\,transparent\)\]:hover {
      background-color: var(--ph-on-surface);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-\[color-mix\(in_srgb\,var\(--ph-on-surface\)_6\%\,transparent\)\]:hover {
        background-color: color-mix(in srgb, var(--ph-on-surface) 6%, transparent);
      }
    }

    .hover\:bg-\[color\:var\(--ph-error-container\)\]:hover {
      background-color: var(--ph-error-container);
    }

    .hover\:bg-\[color\:var\(--ph-primary-container\)\]:hover {
      background-color: var(--ph-primary-container);
    }

    .hover\:bg-\[color\:var\(--ph-surface-container\)\]:hover {
      background-color: var(--ph-surface-container);
    }

    .hover\:bg-\[oklch\(30\%_0\.12_321\.31_\/_0\.5\)\]:hover {
      background-color: oklch(30% .12 321.31 / .5);
    }

    .hover\:bg-\[oklch\(97\%_0\.02_25\)\]:hover {
      background-color: oklch(97% .02 25);
    }

    .hover\:bg-\[oklch\(98\%_0\.005_321\.31\)\]:hover {
      background-color: oklch(98% .005 321.31);
    }

    .hover\:bg-\[var\(--ph-primary-container-hover\)\]:hover {
      background-color: var(--ph-primary-container-hover);
    }

    .hover\:bg-\[var\(--ph-ref-palette-neutral96\)\]:hover {
      background-color: var(--ph-ref-palette-neutral96);
    }

    .hover\:bg-\[var\(--ph-ref-palette-neutral98\)\]:hover {
      background-color: var(--ph-ref-palette-neutral98);
    }

    .hover\:bg-\[var\(--ph-ref-palette-primary10\)\]:hover {
      background-color: var(--ph-ref-palette-primary10);
    }

    .hover\:bg-\[var\(--ph-ref-palette-primary90\)\]:hover {
      background-color: var(--ph-ref-palette-primary90);
    }

    .hover\:bg-\[var\(--ph-ref-palette-primary98\)\]:hover {
      background-color: var(--ph-ref-palette-primary98);
    }

    .hover\:bg-\[var\(--ph-surface-container\)\]:hover {
      background-color: var(--ph-surface-container);
    }

    .hover\:bg-\[var\(--ph-surface-container-low\)\]:hover {
      background-color: var(--ph-surface-container-low);
    }

    .hover\:bg-\[var\(--ph-surface-container-lowest\)\]:hover {
      background-color: var(--ph-surface-container-lowest);
    }

    .hover\:bg-black\/5:hover {
      background-color: #0000000d;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/5:hover {
        background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
      }
    }

    .hover\:bg-black\/6:hover {
      background-color: #0000000f;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-black\/6:hover {
        background-color: color-mix(in oklab, var(--color-black) 6%, transparent);
      }
    }

    .hover\:bg-blue-700:hover {
      background-color: var(--color-blue-700);
    }

    .hover\:bg-gray-50:hover {
      background-color: var(--color-gray-50);
    }

    .hover\:bg-gray-100:hover {
      background-color: var(--color-gray-100);
    }

    .hover\:bg-gray-200:hover {
      background-color: var(--color-gray-200);
    }

    .hover\:bg-gray-300:hover {
      background-color: var(--color-gray-300);
    }

    .hover\:bg-green-700:hover {
      background-color: var(--color-green-700);
    }

    .hover\:bg-indigo-100:hover {
      background-color: var(--color-indigo-100);
    }

    .hover\:bg-indigo-700:hover {
      background-color: var(--color-indigo-700);
    }

    .hover\:bg-neutral-50:hover {
      background-color: var(--color-neutral-50);
    }

    .hover\:bg-neutral-90:hover {
      background-color: var(--color-neutral-90);
    }

    .hover\:bg-neutral-94:hover {
      background-color: var(--color-neutral-94);
    }

    .hover\:bg-neutral-95:hover {
      background-color: var(--color-neutral-95);
    }

    .hover\:bg-neutral-96:hover {
      background-color: var(--color-neutral-96);
    }

    .hover\:bg-neutral-98:hover {
      background-color: var(--color-neutral-98);
    }

    .hover\:bg-neutral-100:hover {
      background-color: var(--color-neutral-100);
    }

    .hover\:bg-orange-700:hover {
      background-color: var(--color-orange-700);
    }

    .hover\:bg-primary-container-hover:hover {
      background-color: var(--ph-primary-container-hover);
    }

    .hover\:bg-primary-container\/40:hover {
      background-color: var(--ph-primary-container);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary-container\/40:hover {
        background-color: color-mix(in oklab, var(--ph-primary-container) 40%, transparent);
      }
    }

    .hover\:bg-primary\/5:hover {
      background-color: var(--ph-primaryXX);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-primary\/5:hover {
        background-color: color-mix(in oklab, var(--ph-primaryXX) 5%, transparent);
      }
    }

    .hover\:bg-purple-700:hover {
      background-color: var(--color-purple-700);
    }

    .hover\:bg-red-50:hover {
      background-color: var(--color-red-50);
    }

    .hover\:bg-red-600:hover {
      background-color: var(--color-red-600);
    }

    .hover\:bg-red-600\/90:hover {
      background-color: #e40014e6;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-red-600\/90:hover {
        background-color: color-mix(in oklab, var(--color-red-600) 90%, transparent);
      }
    }

    .hover\:bg-red-700:hover {
      background-color: var(--color-red-700);
    }

    .hover\:bg-slate-100:hover {
      background-color: var(--color-slate-100);
    }

    .hover\:bg-surface:hover {
      background-color: var(--ph-surface);
    }

    .hover\:bg-surface-container:hover {
      background-color: var(--ph-surface-container);
    }

    .hover\:bg-surface-container-high:hover {
      background-color: var(--ph-surface-container-high);
    }

    .hover\:bg-surface-container-low:hover {
      background-color: var(--ph-surface-container-low);
    }

    .hover\:bg-surface-container-lowest:hover {
      background-color: var(--ph-surface-container-lowest);
    }

    .hover\:bg-surface-container\/80:hover {
      background-color: var(--ph-surface-container);
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-surface-container\/80:hover {
        background-color: color-mix(in oklab, var(--ph-surface-container) 80%, transparent);
      }
    }

    .hover\:bg-white\/10:hover {
      background-color: #ffffff1a;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/10:hover {
        background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
      }
    }

    .hover\:bg-white\/15:hover {
      background-color: #ffffff26;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/15:hover {
        background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
      }
    }

    .hover\:bg-white\/20:hover {
      background-color: #fff3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/20:hover {
        background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
      }
    }

    .hover\:bg-white\/70:hover {
      background-color: #ffffffb3;
    }

    @supports (color: color-mix(in lab, red, red)) {
      .hover\:bg-white\/70:hover {
        background-color: color-mix(in oklab, var(--color-white) 70%, transparent);
      }
    }

    .hover\:\!bg-none:hover {
      background-image: none !important;
    }

    .hover\:from-\[oklch\(60\%_0\.16284_321\.31\)\]:hover {
      --tw-gradient-from: oklch(60% .16284 321.31);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:from-pink-600:hover {
      --tw-gradient-from: var(--color-pink-600);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:to-\[oklch\(65\%_0\.16_290\)\]:hover {
      --tw-gradient-to: oklch(65% .16 290);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:to-violet-600:hover {
      --tw-gradient-to: var(--color-violet-600);
      --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
    }

    .hover\:text-\[\#6B3FA0\]:hover {
      color: #6b3fa0;
    }

    .hover\:text-\[\#65558F\]:hover {
      color: #65558f;
    }

    .hover\:text-\[color\:var\(--ph-error\)\]:hover {
      color: var(--ph-error);
    }

    .hover\:text-\[color\:var\(--ph-primary\)\]:hover {
      color: var(--ph-primary);
    }

    .hover\:text-\[var\(--ph-on-surface\)\]:hover {
      color: var(--ph-on-surface);
    }

    .hover\:text-\[var\(--ph-primary\)\]:hover {
      color: var(--ph-primary);
    }

    .hover\:text-\[var\(--ph-ref-palette-neutral30\)\]:hover {
      color: var(--ph-ref-palette-neutral30);
    }

    .hover\:text-\[var\(--ph-ref-palette-primary40\)\]:hover {
      color: var(--ph-ref-palette-primary40);
    }

    .hover\:text-gray-600:hover {
      color: var(--color-gray-600);
    }

    .hover\:text-gray-900:hover {
      color: var(--color-gray-900);
    }

    .hover\:text-indigo-500:hover {
      color: var(--color-indigo-500);
    }

    .hover\:text-neutral-20:hover {
      color: var(--color-neutral-20);
    }

    .hover\:text-neutral-40:hover {
      color: var(--color-neutral-40);
    }

    .hover\:text-neutral-90:hover {
      color: var(--color-neutral-90);
    }

    .hover\:text-on-surface:hover {
      color: var(--ph-on-surface);
    }

    .hover\:text-primary:hover {
      color: var(--ph-primaryXX);
    }

    .hover\:text-red-600:hover {
      color: var(--color-red-600);
    }

    .hover\:text-slate-900:hover {
      color: var(--color-slate-900);
    }

    .hover\:text-white:hover {
      color: var(--color-white);
    }

    .hover\:no-underline:hover {
      text-decoration-line: none;
    }

    .hover\:underline:hover {
      text-decoration-line: underline;
    }

    .hover\:opacity-80:hover {
      opacity: .8;
    }

    .hover\:opacity-90:hover {
      opacity: .9;
    }

    .hover\:shadow:hover {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_0_0_3px_oklch\(70\%_0\.16284_321\.31_\/_0\.12\)\]:hover {
      --tw-shadow: 0 0 0 3px var(--tw-shadow-color, oklch(70% .16284 321.31 / .12));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_2px_8px_oklch\(0\%_0_0_\/_0\.06\)\]:hover {
      --tw-shadow: 0 2px 8px var(--tw-shadow-color, oklch(0% 0 0 / .06));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_2px_8px_rgba\(0\,0\,0\,0\.06\)\]:hover {
      --tw-shadow: 0 2px 8px var(--tw-shadow-color, #0000000f);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-\[0_2px_10px_oklch\(40\%_\.16_321\/_\.08\)\,0_6px_20px_oklch\(40\%_\.16_321\/_\.04\)\]:hover {
      --tw-shadow: 0 2px 10px var(--tw-shadow-color, oklch(40% .16 321 / .08)), 0 6px 20px var(--tw-shadow-color, oklch(40% .16 321 / .04));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-md:hover {
      --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, #0000001a), 0 2px 4px -2px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:shadow-sm:hover {
      --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:ring-1:hover {
      --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .hover\:ring-\[\#6B3FA0\]\/40:hover {
      --tw-ring-color: oklab(46.8541% .0799952 -.129516 / .4);
    }

    .hover\:brightness-\[1\.02\]:hover {
      --tw-brightness: brightness(1.02);
      filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
    }
  }

  .focus\:border-\[\#6B3FA0\]:focus {
    border-color: #6b3fa0;
  }

  .focus\:border-\[oklch\(60\%_0\.16284_321\.31\)\]:focus {
    border-color: oklch(60% .16284 321.31);
  }

  .focus\:border-\[var\(--ph-ref-palette-primary60\)\]:focus {
    border-color: var(--ph-ref-palette-primary60);
  }

  .focus\:border-blue-500:focus {
    border-color: var(--color-blue-500);
  }

  .focus\:border-transparent:focus {
    border-color: #0000;
  }

  .focus\:bg-\[oklch\(15\%_0\.10_321\.31_\/_0\.65\)\]:focus {
    background-color: oklch(15% .1 321.31 / .65);
  }

  .focus\:bg-\[oklch\(97\%_0\.02_25\)\]:focus {
    background-color: oklch(97% .02 25);
  }

  .focus\:bg-gray-100:focus {
    background-color: var(--color-gray-100);
  }

  .focus\:bg-neutral-96:focus {
    background-color: var(--color-neutral-96);
  }

  .focus\:shadow-\[0_0_0_3px_oklch\(50\%_0\.16_321\.31_\/_0\.12\)\]:focus {
    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, oklch(50% .16 321.31 / .12));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-0:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-1:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-2:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-4:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-\[3px\]:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus\:ring-\[rgba\(107\,63\,160\,0\.12\)\]:focus {
    --tw-ring-color: #6b3fa01f;
  }

  .focus\:ring-\[var\(--ph-ref-palette-primary-40\)\]:focus {
    --tw-ring-color: var(--ph-ref-palette-primary-40);
  }

  .focus\:ring-blue-500:focus {
    --tw-ring-color: var(--color-blue-500);
  }

  .focus\:ring-gray-100:focus {
    --tw-ring-color: var(--color-gray-100);
  }

  .focus\:ring-indigo-500:focus {
    --tw-ring-color: var(--color-indigo-500);
  }

  .focus\:ring-orange-500:focus {
    --tw-ring-color: var(--color-orange-500);
  }

  .focus\:ring-white:focus {
    --tw-ring-color: var(--color-white);
  }

  .focus\:ring-offset-2:focus {
    --tw-ring-offset-width: 2px;
    --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  }

  .focus\:ring-offset-surface:focus {
    --tw-ring-offset-color: var(--ph-surface);
  }

  .focus\:outline-hidden:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  @media (forced-colors: active) {
    .focus\:outline-hidden:focus {
      outline-offset: 2px;
      outline: 2px solid #0000;
    }
  }

  .focus\:outline-none:focus {
    --tw-outline-style: none;
    outline-style: none;
  }

  .focus-visible\:ring-2:focus-visible {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .focus-visible\:outline:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .focus-visible\:outline-2:focus-visible {
    outline-style: var(--tw-outline-style);
    outline-width: 2px;
  }

  .focus-visible\:outline-offset-2:focus-visible {
    outline-offset: 2px;
  }

  .focus-visible\:outline-neutral-70:focus-visible {
    outline-color: var(--color-neutral-70);
  }

  .active\:translate-y-0:active {
    --tw-translate-y: calc(var(--spacing) * 0);
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }

  .active\:scale-110:active {
    --tw-scale-x: 110%;
    --tw-scale-y: 110%;
    --tw-scale-z: 110%;
    scale: var(--tw-scale-x) var(--tw-scale-y);
  }

  .active\:scale-\[0\.98\]:active {
    scale: .98;
  }

  .active\:scale-\[0\.99\]:active {
    scale: .99;
  }

  .active\:cursor-grabbing:active {
    cursor: grabbing;
  }

  .active\:bg-neutral-94:active {
    background-color: var(--color-neutral-94);
  }

  .active\:bg-surface-container:active {
    background-color: var(--ph-surface-container);
  }

  .active\:opacity-80:active {
    opacity: .8;
  }

  .active\:shadow-\[0_1px_4px_oklch\(40\%_\.16_321\/_\.06\)\]:active {
    --tw-shadow: 0 1px 4px var(--tw-shadow-color, oklch(40% .16 321 / .06));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .enabled\:cursor-pointer:enabled {
    cursor: pointer;
  }

  @media (hover: hover) {
    .enabled\:hover\:text-neutral-50:enabled:hover {
      color: var(--color-neutral-50);
    }
  }

  .disabled\:pointer-events-none:disabled {
    pointer-events: none;
  }

  .disabled\:cursor-default:disabled {
    cursor: default;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  .disabled\:bg-\[var\(--ph-primary-container-disabled\)\]:disabled {
    background-color: var(--ph-primary-container-disabled);
  }

  .disabled\:bg-\[var\(--ph-surface-container-lowest\)\]:disabled {
    background-color: var(--ph-surface-container-lowest);
  }

  .disabled\:opacity-30:disabled {
    opacity: .3;
  }

  .disabled\:opacity-40:disabled {
    opacity: .4;
  }

  .disabled\:opacity-50:disabled {
    opacity: .5;
  }

  .disabled\:opacity-60:disabled {
    opacity: .6;
  }

  @media (hover: hover) {
    .disabled\:hover\:translate-y-0:disabled:hover {
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .disabled\:hover\:bg-transparent:disabled:hover {
      background-color: #0000;
    }
  }

  .data-focus\:bg-surface-container-lowest[data-focus] {
    background-color: var(--ph-surface-container-lowest);
  }

  .data-\[active\]\:text-\[color\:var\(--ph-primary\)\][data-active] {
    color: var(--ph-primary);
  }

  .data-\[disabled\]\:cursor-not-allowed[data-disabled] {
    cursor: not-allowed;
  }

  .data-\[disabled\]\:opacity-40[data-disabled] {
    opacity: .4;
  }

  .data-\[has-assistant\=true\]\:pb-\[14rem\][data-has-assistant="true"] {
    padding-bottom: 14rem;
  }

  .data-\[mode\=drawer\]\:border-t[data-mode="drawer"] {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }

  .data-\[mode\=drawer\]\:border-surface-container[data-mode="drawer"] {
    border-color: var(--ph-surface-container);
  }

  .data-\[mode\=drawer\]\:bg-surface-container-low[data-mode="drawer"] {
    background-color: var(--ph-surface-container-low);
  }

  .data-\[safe-area\=true\]\:pb-\[76px\][data-safe-area="true"] {
    padding-bottom: 76px;
  }

  @media (prefers-reduced-motion: no-preference) {
    .motion-safe\:animate-\[smartCardIn_0\.35s_ease-out\] {
      animation: .35s ease-out smartCardIn;
    }

    .motion-safe\:animate-\[smartSparkleFloat_3s_ease-in-out_infinite\] {
      animation: 3s ease-in-out infinite smartSparkleFloat;
    }
  }

  @media not all and (min-width: 1100px) {
    .max-\[1100px\]\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }

  @media not all and (min-width: 700px) {
    .max-\[700px\]\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }
  }

  @media not all and (min-width: 40rem) {
    .max-sm\:h-\[180px\] {
      height: 180px;
    }
  }

  @media (min-width: 640px) {
    .min-\[640px\]\:block {
      display: block;
    }

    .min-\[640px\]\:hidden {
      display: none;
    }

    .min-\[640px\]\:inline {
      display: inline;
    }

    .min-\[640px\]\:inline-flex {
      display: inline-flex;
    }

    .min-\[640px\]\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 740px) {
    .min-\[740px\]\:table-cell {
      display: table-cell;
    }

    .min-\[740px\]\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 960px) {
    .min-\[960px\]\:flex {
      display: flex;
    }

    .min-\[960px\]\:table-cell {
      display: table-cell;
    }

    .min-\[960px\]\:w-\[220px\] {
      width: 220px;
    }

    .min-\[960px\]\:w-\[260px\] {
      width: 260px;
    }

    .min-\[960px\]\:flex-1 {
      flex: 1;
    }

    .min-\[960px\]\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .min-\[960px\]\:grid-cols-\[1fr_240px\] {
      grid-template-columns: 1fr 240px;
    }

    .min-\[960px\]\:grid-cols-\[minmax\(0\,40\%\)_minmax\(0\,60\%\)\] {
      grid-template-columns: minmax(0, 40%) minmax(0, 60%);
    }

    .min-\[960px\]\:flex-row {
      flex-direction: row;
    }

    .min-\[960px\]\:items-stretch {
      align-items: stretch;
    }

    .min-\[960px\]\:border-t-0 {
      border-top-style: var(--tw-border-style);
      border-top-width: 0;
    }

    .min-\[960px\]\:border-l {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }
  }

  @media (min-width: 1200px) {
    .min-\[1200px\]\:table-cell {
      display: table-cell;
    }
  }

  @media (min-width: 40rem) {
    .sm\:static {
      position: static;
    }

    .sm\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .sm\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .sm\:block {
      display: block;
    }

    .sm\:flex {
      display: flex;
    }

    .sm\:inline-flex {
      display: inline-flex;
    }

    .sm\:w-48 {
      width: calc(var(--spacing) * 48);
    }

    .sm\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sm\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sm\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .sm\:grid-cols-\[1fr_auto_1fr\] {
      grid-template-columns: 1fr auto 1fr;
    }

    .sm\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,2fr\)\] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .sm\:flex-row {
      flex-direction: row;
    }

    .sm\:flex-wrap {
      flex-wrap: wrap;
    }

    .sm\:items-center {
      align-items: center;
    }

    .sm\:items-start {
      align-items: flex-start;
    }

    .sm\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }

    .sm\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .sm\:border-0 {
      border-style: var(--tw-border-style);
      border-width: 0;
    }

    .sm\:bg-transparent {
      background-color: #0000;
    }

    .sm\:p-0 {
      padding: calc(var(--spacing) * 0);
    }

    .sm\:p-2 {
      padding: calc(var(--spacing) * 2);
    }

    .sm\:p-4 {
      padding: calc(var(--spacing) * 4);
    }

    .sm\:p-6 {
      padding: calc(var(--spacing) * 6);
    }

    .sm\:p-16 {
      padding: calc(var(--spacing) * 16);
    }

    .sm\:px-0 {
      padding-inline: calc(var(--spacing) * 0);
    }

    .sm\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }

    .sm\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .sm\:pt-8 {
      padding-top: calc(var(--spacing) * 8);
    }

    .sm\:text-left {
      text-align: left;
    }

    .sm\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }
  }

  @media (min-width: 48rem) {
    .md\:absolute {
      position: absolute;
    }

    .md\:relative {
      position: relative;
    }

    .md\:static {
      position: static;
    }

    .md\:top-0 {
      top: calc(var(--spacing) * 0);
    }

    .md\:top-5 {
      top: calc(var(--spacing) * 5);
    }

    .md\:top-auto {
      top: auto;
    }

    .md\:right-0 {
      right: calc(var(--spacing) * 0);
    }

    .md\:bottom-auto {
      bottom: auto;
    }

    .md\:-left-\[48px\] {
      left: -48px;
    }

    .md\:left-0 {
      left: calc(var(--spacing) * 0);
    }

    .md\:left-\[56px\] {
      left: 56px;
    }

    .md\:left-\[57px\] {
      left: 57px;
    }

    .md\:z-40 {
      z-index: 40;
    }

    .md\:order-1 {
      order: 1;
    }

    .md\:order-2 {
      order: 2;
    }

    .md\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .md\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .md\:col-span-5 {
      grid-column: span 5 / span 5;
    }

    .md\:col-span-7 {
      grid-column: span 7 / span 7;
    }

    .md\:-mt-\[45px\] {
      margin-top: -45px;
    }

    .md\:-mt-\[90px\] {
      margin-top: -90px;
    }

    .md\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .md\:mb-2 {
      margin-bottom: calc(var(--spacing) * 2);
    }

    .md\:mb-4 {
      margin-bottom: calc(var(--spacing) * 4);
    }

    .md\:mb-20 {
      margin-bottom: calc(var(--spacing) * 20);
    }

    .md\:-ml-10 {
      margin-left: calc(var(--spacing) * -10);
    }

    .md\:-ml-\[50px\] {
      margin-left: -50px;
    }

    .md\:line-clamp-4 {
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
    }

    .md\:block {
      display: block;
    }

    .md\:flex {
      display: flex;
    }

    .md\:hidden {
      display: none;
    }

    .md\:h-\[60px\] {
      height: 60px;
    }

    .md\:h-\[64px\] {
      height: 64px;
    }

    .md\:h-\[854px\] {
      height: 854px;
    }

    .md\:h-full {
      height: 100%;
    }

    .md\:h-screen {
      height: 100vh;
    }

    .md\:max-h-screen {
      max-height: 100vh;
    }

    .md\:min-h-\[200px\] {
      min-height: 200px;
    }

    .md\:\!w-\[404px\] {
      width: 404px !important;
    }

    .md\:\!w-\[480px\] {
      width: 480px !important;
    }

    .md\:\!w-auto {
      width: auto !important;
    }

    .md\:w-\[56px\] {
      width: 56px;
    }

    .md\:w-\[64px\] {
      width: 64px;
    }

    .md\:w-\[304px\] {
      width: 304px;
    }

    .md\:w-\[422px\] {
      width: 422px;
    }

    .md\:w-\[500px\] {
      width: 500px;
    }

    .md\:w-\[512px\] {
      width: 512px;
    }

    .md\:w-\[581px\] {
      width: 581px;
    }

    .md\:w-\[600px\] {
      width: 600px;
    }

    .md\:w-\[640px\] {
      width: 640px;
    }

    .md\:w-\[816px\] {
      width: 816px;
    }

    .md\:w-\[1064px\] {
      width: 1064px;
    }

    .md\:w-\[calc\(50\%\+50px\)\] {
      width: calc(50% + 50px);
    }

    .md\:w-\[calc\(100\%\+77px\)\] {
      width: calc(100% + 77px);
    }

    .md\:w-\[calc\(100\%\+83px\)\] {
      width: calc(100% + 83px);
    }

    .md\:w-\[calc\(100vw-40px-40px-16px\)\] {
      width: calc(100vw - 96px);
    }

    .md\:w-\[calc\(100vw-300px\)\] {
      width: calc(100vw - 300px);
    }

    .md\:w-auto {
      width: auto;
    }

    .md\:w-full {
      width: 100%;
    }

    .md\:\!max-w-\[480px\] {
      max-width: 480px !important;
    }

    .md\:max-w-80 {
      max-width: calc(var(--spacing) * 80);
    }

    .md\:max-w-\[70\%\] {
      max-width: 70%;
    }

    .md\:max-w-\[364px\] {
      max-width: 364px;
    }

    .md\:max-w-\[512px\] {
      max-width: 512px;
    }

    .md\:max-w-\[calc\(100vw-40px-40px-32px\)\] {
      max-width: calc(100vw - 112px);
    }

    .md\:max-w-none {
      max-width: none;
    }

    .md\:flex-shrink-0 {
      flex-shrink: 0;
    }

    .md\:-translate-x-\[100px\] {
      --tw-translate-x: calc(100px * -1);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }

    .md\:\!grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    .md\:\!grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .md\:\!grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .md\:\!grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }

    .md\:grid-cols-1 {
      grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .md\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .md\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .md\:grid-cols-\[1\.1fr_1fr\] {
      grid-template-columns: 1.1fr 1fr;
    }

    .md\:grid-cols-\[3fr_1fr\] {
      grid-template-columns: 3fr 1fr;
    }

    .md\:grid-cols-\[minmax\(180px\,1fr\)_120px\] {
      grid-template-columns: minmax(180px, 1fr) 120px;
    }

    .md\:grid-cols-\[minmax\(180px\,1fr\)_190px_minmax\(180px\,1fr\)_36px\] {
      grid-template-columns: minmax(180px, 1fr) 190px minmax(180px, 1fr) 36px;
    }

    .md\:flex-col {
      flex-direction: column;
    }

    .md\:flex-row {
      flex-direction: row;
    }

    .md\:flex-wrap {
      flex-wrap: wrap;
    }

    .md\:items-center {
      align-items: center;
    }

    .md\:items-end {
      align-items: flex-end;
    }

    .md\:items-stretch {
      align-items: stretch;
    }

    .md\:justify-between {
      justify-content: space-between;
    }

    .md\:justify-center {
      justify-content: center;
    }

    .md\:justify-end {
      justify-content: flex-end;
    }

    .md\:gap-2 {
      gap: calc(var(--spacing) * 2);
    }

    .md\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .md\:gap-5 {
      gap: calc(var(--spacing) * 5);
    }

    .md\:gap-6 {
      gap: calc(var(--spacing) * 6);
    }

    .md\:\!rounded-none {
      border-radius: 0 !important;
    }

    .md\:rounded-lg {
      border-radius: var(--radius-lg);
    }

    .md\:rounded-md {
      border-radius: var(--radius-md);
    }

    .md\:rounded-l-\[12px\] {
      border-top-left-radius: 12px;
      border-bottom-left-radius: 12px;
    }

    .md\:border {
      border-style: var(--tw-border-style);
      border-width: 1px;
    }

    .md\:border-b {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 1px;
    }

    .md\:bg-\[var\(--ph-surface-container\)\] {
      background-color: var(--ph-surface-container);
    }

    .md\:p-2 {
      padding: calc(var(--spacing) * 2);
    }

    .md\:p-16 {
      padding: calc(var(--spacing) * 16);
    }

    .md\:px-0 {
      padding-inline: calc(var(--spacing) * 0);
    }

    .md\:px-2 {
      padding-inline: calc(var(--spacing) * 2);
    }

    .md\:px-3 {
      padding-inline: calc(var(--spacing) * 3);
    }

    .md\:px-4 {
      padding-inline: calc(var(--spacing) * 4);
    }

    .md\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .md\:px-10 {
      padding-inline: calc(var(--spacing) * 10);
    }

    .md\:px-12 {
      padding-inline: calc(var(--spacing) * 12);
    }

    .md\:px-14 {
      padding-inline: calc(var(--spacing) * 14);
    }

    .md\:px-16 {
      padding-inline: calc(var(--spacing) * 16);
    }

    .md\:px-\[100px\] {
      padding-inline: 100px;
    }

    .md\:py-0 {
      padding-block: calc(var(--spacing) * 0);
    }

    .md\:py-8 {
      padding-block: calc(var(--spacing) * 8);
    }

    .md\:pt-0 {
      padding-top: calc(var(--spacing) * 0);
    }

    .md\:pt-4 {
      padding-top: calc(var(--spacing) * 4);
    }

    .md\:pt-6 {
      padding-top: calc(var(--spacing) * 6);
    }

    .md\:pr-4 {
      padding-right: calc(var(--spacing) * 4);
    }

    .md\:pr-6 {
      padding-right: calc(var(--spacing) * 6);
    }

    .md\:pb-0 {
      padding-bottom: calc(var(--spacing) * 0);
    }

    .md\:pb-4 {
      padding-bottom: calc(var(--spacing) * 4);
    }

    .md\:pl-4 {
      padding-left: calc(var(--spacing) * 4);
    }

    .md\:pl-\[56px\] {
      padding-left: 56px;
    }

    .md\:pl-\[361px\] {
      padding-left: 361px;
    }

    .md\:pl-\[376px\] {
      padding-left: 376px;
    }

    .md\:text-center {
      text-align: center;
    }

    .md\:text-2xl {
      font-size: var(--text-2xl);
      line-height: var(--tw-leading, var(--text-2xl--line-height));
    }

    .md\:text-3xl {
      font-size: var(--text-3xl);
      line-height: var(--tw-leading, var(--text-3xl--line-height));
    }

    .md\:text-\[28px\] {
      font-size: 28px;
    }

    .md\:text-\[32px\] {
      font-size: 32px;
    }

    .md\:text-\[36px\] {
      font-size: 36px;
    }

    .md\:leading-\[36px\] {
      --tw-leading: 36px;
      line-height: 36px;
    }

    .md\:leading-\[40px\] {
      --tw-leading: 40px;
      line-height: 40px;
    }

    .md\:leading-\[44px\] {
      --tw-leading: 44px;
      line-height: 44px;
    }

    .md\:shadow-lg {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, #0000001a), 0 4px 6px -4px var(--tw-shadow-color, #0000001a);
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }

    .md\:shadow-none {
      --tw-shadow: 0 0 #0000;
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  @media (min-width: 64rem) {
    .lg\:fixed {
      position: fixed;
    }

    .lg\:sticky {
      position: sticky;
    }

    .lg\:right-0 {
      right: calc(var(--spacing) * 0);
    }

    .lg\:bottom-6 {
      bottom: calc(var(--spacing) * 6);
    }

    .lg\:left-\[40px\] {
      left: 40px;
    }

    .lg\:z-\[5\] {
      z-index: 5;
    }

    .lg\:order-2 {
      order: 2;
    }

    .lg\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .lg\:col-span-6 {
      grid-column: span 6 / span 6;
    }

    .lg\:col-span-8 {
      grid-column: span 8 / span 8;
    }

    .lg\:col-span-12 {
      grid-column: span 12 / span 12;
    }

    .lg\:mt-0 {
      margin-top: calc(var(--spacing) * 0);
    }

    .lg\:mb-5 {
      margin-bottom: calc(var(--spacing) * 5);
    }

    .lg\:line-clamp-2 {
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      display: -webkit-box;
      overflow: hidden;
    }

    .lg\:block {
      display: block;
    }

    .lg\:flex {
      display: flex;
    }

    .lg\:hidden {
      display: none;
    }

    .lg\:inline {
      display: inline;
    }

    .lg\:h-\[76px\] {
      height: 76px;
    }

    .lg\:max-h-\[calc\(100dvh-10rem\)\] {
      max-height: calc(100dvh - 10rem);
    }

    .lg\:w-\[25\%\] {
      width: 25%;
    }

    .lg\:w-\[42\%\] {
      width: 42%;
    }

    .lg\:w-\[50\%\] {
      width: 50%;
    }

    .lg\:w-\[76px\] {
      width: 76px;
    }

    .lg\:w-\[288px\] {
      width: 288px;
    }

    .lg\:w-\[300px\] {
      width: 300px;
    }

    .lg\:w-\[320px\] {
      width: 320px;
    }

    .lg\:w-\[350px\] {
      width: 350px;
    }

    .lg\:w-\[464px\] {
      width: 464px;
    }

    .lg\:w-\[500px\] {
      width: 500px;
    }

    .lg\:w-\[calc\(100vw-207px-40px-40px-16px\)\] {
      width: calc(100vw - 303px);
    }

    .lg\:max-w-\[58\%\] {
      max-width: 58%;
    }

    .lg\:max-w-\[calc\(100vw-208px-40px-40px-32px\)\] {
      max-width: calc(100vw - 320px);
    }

    .lg\:max-w-\[calc\(100vw-208px-40px-40px-288px-40px-32px\)\] {
      max-width: calc(100vw - 648px);
    }

    .lg\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lg\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lg\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .lg\:grid-cols-12 {
      grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .lg\:grid-cols-\[2fr_1fr\] {
      grid-template-columns: 2fr 1fr;
    }

    .lg\:grid-cols-\[minmax\(0\,2fr\)_minmax\(0\,1fr\)\] {
      grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }

    .lg\:flex-row {
      flex-direction: row;
    }

    .lg\:flex-wrap {
      flex-wrap: wrap;
    }

    .lg\:items-end {
      align-items: flex-end;
    }

    .lg\:items-start {
      align-items: flex-start;
    }

    .lg\:justify-between {
      justify-content: space-between;
    }

    .lg\:gap-4 {
      gap: calc(var(--spacing) * 4);
    }

    .lg\:self-stretch {
      align-self: stretch;
    }

    .lg\:overflow-y-auto {
      overflow-y: auto;
    }

    .lg\:border-t-0 {
      border-top-style: var(--tw-border-style);
      border-top-width: 0;
    }

    .lg\:border-r {
      border-right-style: var(--tw-border-style);
      border-right-width: 1px;
    }

    .lg\:border-b-0 {
      border-bottom-style: var(--tw-border-style);
      border-bottom-width: 0;
    }

    .lg\:border-l {
      border-left-style: var(--tw-border-style);
      border-left-width: 1px;
    }

    .lg\:px-0 {
      padding-inline: calc(var(--spacing) * 0);
    }

    .lg\:px-6 {
      padding-inline: calc(var(--spacing) * 6);
    }

    .lg\:py-10 {
      padding-block: calc(var(--spacing) * 10);
    }

    .lg\:text-center {
      text-align: center;
    }

    .lg\:text-left {
      text-align: left;
    }

    .lg\:text-\[22px\] {
      font-size: 22px;
    }
  }

  @media (min-width: 80rem) {
    .xl\:col-span-1 {
      grid-column: span 1 / span 1;
    }

    .xl\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .xl\:col-span-4 {
      grid-column: span 4 / span 4;
    }

    .xl\:col-span-8 {
      grid-column: span 8 / span 8;
    }

    .xl\:flex {
      display: flex;
    }

    .xl\:w-\[420px\] {
      width: 420px;
    }

    .xl\:max-w-\[calc\(100vw-208px-40px-40px-288px-128px-32px\)\] {
      max-width: calc(100vw - 736px);
    }

    .xl\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .xl\:grid-cols-\[minmax\(0\,1fr\)_minmax\(0\,1fr\)_minmax\(5\.5rem\,7\.5rem\)\] {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(5.5rem, 7.5rem);
    }

    .xl\:gap-32 {
      gap: calc(var(--spacing) * 32);
    }
  }

  @media (min-width: 96rem) {
    .\32 xl\:col-span-2 {
      grid-column: span 2 / span 2;
    }

    .\32 xl\:col-span-3 {
      grid-column: span 3 / span 3;
    }

    .\32 xl\:h-\[220px\] {
      height: 220px;
    }
  }

  @container (min-width: 520px) {
    .\@\[520px\]\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @container (min-width: 780px) {
    .\@\[780px\]\:grid-cols-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  @container (min-width: 1040px) {
    .\@\[1040px\]\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @container (min-width: 1300px) {
    .\@\[1300px\]\:grid-cols-5 {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }

  @container (min-width: 1560px) {
    .\@\[1560px\]\:grid-cols-6 {
      grid-template-columns: repeat(6, minmax(0, 1fr));
    }
  }

  @container (min-width: 32rem) {
    .\@lg\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .\@lg\:flex-row {
      flex-direction: row;
    }

    .\@lg\:items-center {
      align-items: center;
    }

    .\@lg\:justify-between {
      justify-content: space-between;
    }
  }

  @container (min-width: 48rem) {
    .\@3xl\:grid-cols-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .\@3xl\:grid-cols-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  @media (prefers-color-scheme: dark) {
    .dark\:border-gray-600 {
      border-color: var(--color-gray-600);
    }

    .dark\:bg-\[\#161615\] {
      background-color: #161615;
    }

    .dark\:bg-gray-700 {
      background-color: var(--color-gray-700);
    }

    .dark\:bg-gray-800 {
      background-color: var(--color-gray-800);
    }

    .dark\:text-gray-400 {
      color: var(--color-gray-400);
    }

    .dark\:text-white {
      color: var(--color-white);
    }

    .dark\:placeholder-gray-400::placeholder {
      color: var(--color-gray-400);
    }

    @media (hover: hover) {
      .dark\:hover\:bg-\[\#1A1A19\]:hover {
        background-color: #1a1a19;
      }

      .dark\:hover\:bg-gray-700:hover {
        background-color: var(--color-gray-700);
      }

      .dark\:hover\:text-white:hover {
        color: var(--color-white);
      }
    }

    .dark\:focus\:border-blue-500:focus {
      border-color: var(--color-blue-500);
    }

    .dark\:focus\:bg-gray-700:focus {
      background-color: var(--color-gray-700);
    }

    .dark\:focus\:ring-blue-500:focus {
      --tw-ring-color: var(--color-blue-500);
    }

    .dark\:focus\:ring-gray-700:focus {
      --tw-ring-color: var(--color-gray-700);
    }
  }

  .\[\&_\.ph-input-container\]\:h-\[38px\] .ph-input-container {
    height: 38px;
  }

  .\[\&_\.ph-input-container\]\:rounded-\[9px\] .ph-input-container {
    border-radius: 9px;
  }

  .\[\&_\.ph-input-container\]\:border-outline-variant .ph-input-container {
    border-color: var(--ph-outline-variant);
  }

  .\[\&_\.ph-input-element\]\:h-\[68px\] .ph-input-element {
    height: 68px;
  }

  .\[\&_\.ph-input-element\]\:min-h-\[76px\] .ph-input-element {
    min-height: 76px;
  }

  .\[\&_\.ph-input-element\]\:rounded-lg .ph-input-element {
    border-radius: var(--radius-lg);
  }

  .\[\&_\.ph-input-element\]\:border-outline-variant .ph-input-element {
    border-color: var(--ph-outline-variant);
  }

  .\[\&_\.ph-input-element\]\:pr-28 .ph-input-element {
    padding-right: calc(var(--spacing) * 28);
  }

  .\[\&_\.ph-input-element\]\:pl-11 .ph-input-element {
    padding-left: calc(var(--spacing) * 11);
  }

  .\[\&_\.ph-input-element\]\:text-3xl .ph-input-element {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }

  .\[\&_\.ph-input-element\]\:text-\[13px\] .ph-input-element {
    font-size: 13px;
  }

  .\[\&_\.ph-input-element\]\:font-extrabold .ph-input-element {
    --tw-font-weight: var(--font-weight-extrabold);
    font-weight: var(--font-weight-extrabold);
  }

  .\[\&_\.ph-input-element\]\:tracking-tight .ph-input-element {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }

  .\[\&_\.ph-input-element\]\:text-on-surface .ph-input-element {
    color: var(--ph-on-surface);
  }

  .\[\&_\.ph-input-element\]\:placeholder\:text-outline .ph-input-element::placeholder {
    color: var(--ph-outline);
  }

  .\[\&_\.ph-input-element\]\:focus\:border-primary .ph-input-element:focus {
    border-color: var(--ph-primaryXX);
  }

  .\[\&_\.ph-input-element\]\:focus\:ring-0 .ph-input-element:focus {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .\[\&_\[role\=list\]\>\*\+\*\]\:mt-2 [role="list"] > * + * {
    margin-top: calc(var(--spacing) * 2);
  }

  .\[\&_a\]\:inline-flex a {
    display: inline-flex;
  }

  .\[\&_a\]\:items-center a {
    align-items: center;
  }

  .\[\&_button\]\:flex button {
    display: flex;
  }

  .\[\&_button\]\:items-center button {
    align-items: center;
  }

  .\[\&_button\]\:gap-1 button {
    gap: calc(var(--spacing) * 1);
  }

  .\[\&_td\]\:\!bg-surface-container-lowest td {
    background-color: var(--ph-surface-container-lowest) !important;
  }

  .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
    display: none;
  }

  .\[\&\:hover_td\]\:\!bg-surface-container-lowest:hover td {
    background-color: var(--ph-surface-container-lowest) !important;
  }

  .\[\&\>svg\]\:h-full > svg {
    height: 100%;
  }

  .\[\&\>svg\]\:w-full > svg {
    width: 100%;
  }

  @media (max-width: 1023px) {
    .\[\@media\(max-width\:1023px\)\]\:max-w-\[85\%\] {
      max-width: 85%;
    }
  }

  @media (max-width: 639px) {
    .\[\@media\(max-width\:639px\)\]\:max-w-full {
      max-width: 100%;
    }
  }
}

@property --ph-g-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --ph-g-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --ph-g-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --ph-g-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 135deg;
}

@property --ph-g-from-pos {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --ph-g-via-pos {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --ph-g-to-pos {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

.ph-bg-gradient-to-r {
  background: linear-gradient(to right, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
  background: linear-gradient(to right in oklch, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
}

.ph-bg-gradient-to-l {
  background: linear-gradient(to left, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
  background: linear-gradient(to left in oklch, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
}

.ph-bg-gradient-to-t {
  background: linear-gradient(to top, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
  background: linear-gradient(to top in oklch, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
}

.ph-bg-gradient-to-b {
  background: linear-gradient(to bottom, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
  background: linear-gradient(to bottom in oklch, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
}

.ph-bg-gradient-to-br {
  background: linear-gradient(to bottom right, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
  background: linear-gradient(to bottom right in oklch, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
}

.ph-bg-gradient-to-bl {
  background: linear-gradient(to bottom left, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
  background: linear-gradient(to bottom left in oklch, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
}

.ph-bg-gradient-to-tr {
  background: linear-gradient(to top right, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
  background: linear-gradient(to top right in oklch, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
}

.ph-bg-gradient-to-tl {
  background: linear-gradient(to top left, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
  background: linear-gradient(to top left in oklch, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
}

.ph-bg-gradient-angle {
  background: linear-gradient(var(--ph-g-angle, 135deg), var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
  background: linear-gradient(var(--ph-g-angle, 135deg) in oklch, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
}

.ph-bg-gradient-radial {
  background: radial-gradient(circle, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
  background: radial-gradient(circle in oklch, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
}

.ph-bg-gradient-conic {
  background: conic-gradient(var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
  background: conic-gradient(in oklch, var(--ph-g-from, transparent), var(--ph-g-via) var(--ph-g-via-pos, 50%), var(--ph-g-to, transparent));
}

.ph-bg-gradient-radial-tl {
  background: radial-gradient(circle at top left, var(--ph-g-from, transparent), var(--ph-g-to, transparent));
  background: radial-gradient(circle at top left in oklch, var(--ph-g-from, transparent), var(--ph-g-to, transparent));
}

.ph-bg-gradient-radial-tr {
  background: radial-gradient(circle at top right, var(--ph-g-from, transparent), var(--ph-g-to, transparent));
  background: radial-gradient(circle at top right in oklch, var(--ph-g-from, transparent), var(--ph-g-to, transparent));
}

.ph-bg-gradient-radial-bl {
  background: radial-gradient(circle at bottom left, var(--ph-g-from, transparent), var(--ph-g-to, transparent));
  background: radial-gradient(circle at bottom left in oklch, var(--ph-g-from, transparent), var(--ph-g-to, transparent));
}

.ph-bg-gradient-radial-br {
  background: radial-gradient(circle at bottom right, var(--ph-g-from, transparent), var(--ph-g-to, transparent));
  background: radial-gradient(circle at bottom right in oklch, var(--ph-g-from, transparent), var(--ph-g-to, transparent));
}

.ph-gradient-surface-tint {
  --ph-g-from: var(--ph-ref-palette-neutral98);
  --ph-g-to: var(--ph-ref-palette-primary95);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-surface-dim {
  --ph-g-from: var(--ph-ref-palette-neutral96);
  --ph-g-to: var(--ph-ref-palette-neutral90);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-primary-subtle {
  --ph-g-from: var(--ph-ref-palette-primary90);
  --ph-g-to: var(--ph-ref-palette-primary80);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-primary-bold {
  --ph-g-from: var(--ph-ref-palette-primary40);
  --ph-g-to: var(--ph-ref-palette-primary30);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-primary-vivid {
  --ph-g-from: var(--ph-ref-palette-primary30);
  --ph-g-to: var(--ph-ref-palette-primary50);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-secondary-subtle {
  --ph-g-from: var(--ph-ref-palette-secondary90);
  --ph-g-to: var(--ph-ref-palette-secondary80);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-secondary-bold {
  --ph-g-from: var(--ph-ref-palette-secondary40);
  --ph-g-to: var(--ph-ref-palette-secondary30);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-accent-warm {
  --ph-g-from: var(--ph-ref-palette-primary40);
  --ph-g-to: var(--ph-ref-palette-secondary50);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-accent-cool {
  --ph-g-from: var(--ph-ref-palette-secondary40);
  --ph-g-to: var(--ph-ref-palette-tertiary50);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-accent-full {
  --ph-g-from: var(--ph-ref-palette-primary40);
  --ph-g-to: var(--ph-ref-palette-tertiary50);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-tricolor {
  --ph-g-from: var(--ph-ref-palette-primary40);
  --ph-g-via: var(--ph-ref-palette-secondary50);
  --ph-g-to: var(--ph-ref-palette-tertiary40);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-via), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-via), var(--ph-g-to));
}

.ph-gradient-scrim-bottom {
  --ph-g-from: transparent;
  --ph-g-to: oklch(from var(--ph-ref-palette-neutral0) l c h / 60%);
  background: linear-gradient(to bottom, var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(to bottom in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-scrim-top {
  --ph-g-from: oklch(from var(--ph-ref-palette-neutral0) l c h / 40%);
  --ph-g-to: transparent;
  background: linear-gradient(to bottom, var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(to bottom in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-hero-dawn {
  --ph-g-from: var(--ph-ref-palette-primary95);
  --ph-g-via: var(--ph-ref-palette-secondary90);
  --ph-g-to: var(--ph-ref-palette-tertiary95);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-via), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-via), var(--ph-g-to));
}

.ph-gradient-hero-dusk {
  --ph-g-from: var(--ph-ref-palette-primary30);
  --ph-g-via: var(--ph-ref-palette-secondary20);
  --ph-g-to: var(--ph-ref-palette-neutral10);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-via), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-via), var(--ph-g-to));
}

.ph-gradient-hero-aurora {
  --ph-g-from: var(--ph-ref-palette-primary40);
  --ph-g-via: var(--ph-ref-palette-tertiary50);
  --ph-g-to: var(--ph-ref-palette-secondary30);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-via), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch longer hue, var(--ph-g-from), var(--ph-g-via), var(--ph-g-to));
}

.ph-gradient-hero-glow {
  --ph-g-from: var(--ph-ref-palette-primary50);
  --ph-g-to: var(--ph-ref-palette-primary30);
  background: radial-gradient(circle, var(--ph-g-from), var(--ph-g-to));
  background: radial-gradient(circle in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-hero-minimal {
  --ph-g-from: var(--ph-ref-palette-neutral98);
  --ph-g-to: var(--ph-ref-palette-neutral96);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-hero-depth {
  --ph-g-from: var(--ph-ref-palette-primary90);
  --ph-g-via: var(--ph-ref-palette-neutral99);
  --ph-g-to: var(--ph-ref-palette-primary95);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-via), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-via), var(--ph-g-to));
}

.ph-gradient-text-brand {
  --ph-g-from: var(--ph-ref-palette-primary40);
  --ph-g-to: var(--ph-ref-palette-primary60);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
}

.ph-gradient-text-accent {
  --ph-g-from: var(--ph-ref-palette-primary30);
  --ph-g-to: var(--ph-ref-palette-tertiary50);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
  color: #0000;
  -webkit-background-clip: text;
  background-clip: text;
}

.ph-gradient-border-brand {
  --ph-g-from: var(--ph-ref-palette-primary40);
  --ph-g-to: var(--ph-ref-palette-secondary50);
  --ph-g-angle: 135deg;
  border: none;
  position: relative;
}

.ph-gradient-border-brand:before {
  content: "";
  border-radius: inherit;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
  -webkit-mask-composite: xor;
  -webkit-mask-composite: xor;
  -webkit-mask-source-type: auto, auto;
  padding: 1px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}

.ph-gradient-border-subtle {
  --ph-g-from: var(--ph-ref-palette-neutral80);
  --ph-g-to: var(--ph-ref-palette-neutral90);
  --ph-g-angle: 135deg;
  border: none;
  position: relative;
}

.ph-gradient-border-subtle:before {
  content: "";
  border-radius: inherit;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
  -webkit-mask-composite: xor;
  -webkit-mask-composite: xor;
  -webkit-mask-source-type: auto, auto;
  padding: 1px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-position: 0 0, 0 0;
  mask-position: 0 0, 0 0;
  -webkit-mask-size: auto, auto;
  mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}

.ph-gradient-primary-whisper {
  --ph-g-from: var(--ph-ref-palette-primary95);
  --ph-g-to: var(--ph-ref-palette-primary99);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-primary-mist {
  --ph-g-from: var(--ph-ref-palette-primary90);
  --ph-g-to: var(--ph-ref-palette-primary96);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-primary-silk {
  --ph-g-from: var(--ph-ref-palette-primary80);
  --ph-g-to: var(--ph-ref-palette-primary90);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-secondary-whisper {
  --ph-g-from: var(--ph-ref-palette-secondary95);
  --ph-g-to: var(--ph-ref-palette-secondary99);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-secondary-silk {
  --ph-g-from: var(--ph-ref-palette-secondary80);
  --ph-g-to: var(--ph-ref-palette-secondary90);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-tertiary-whisper {
  --ph-g-from: var(--ph-ref-palette-tertiary95);
  --ph-g-to: var(--ph-ref-palette-tertiary99);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-neutral-mist {
  --ph-g-from: var(--ph-ref-palette-neutral92);
  --ph-g-to: var(--ph-ref-palette-neutral97);
  --ph-g-angle: 135deg;
  background: linear-gradient(var(--ph-g-angle), var(--ph-g-from), var(--ph-g-to));
  background: linear-gradient(var(--ph-g-angle) in oklch, var(--ph-g-from), var(--ph-g-to));
}

.ph-gradient-primary-spotlight {
  background: radial-gradient(circle, var(--ph-ref-palette-primary85) 0%, var(--ph-ref-palette-primary96) 100%);
  background: radial-gradient(circle in oklch, var(--ph-ref-palette-primary85) 0%, var(--ph-ref-palette-primary96) 100%);
}

.ph-gradient-primary-halo {
  background: radial-gradient(circle at 70% 30%, var(--ph-ref-palette-primary90) 0%, transparent 100%);
  background: radial-gradient(circle at 70% 30% in oklch, var(--ph-ref-palette-primary90) 0%, transparent 100%);
}

.ph-gradient-primary-vignette {
  background: radial-gradient(circle, transparent 0%, var(--ph-ref-palette-primary96) 100%);
  background: radial-gradient(circle in oklch, transparent 0%, var(--ph-ref-palette-primary96) 100%);
}

.ph-gradient-secondary-spotlight {
  background: radial-gradient(circle, var(--ph-ref-palette-secondary85) 0%, var(--ph-ref-palette-secondary96) 100%);
  background: radial-gradient(circle in oklch, var(--ph-ref-palette-secondary85) 0%, var(--ph-ref-palette-secondary96) 100%);
}

.ph-gradient-neutral-spotlight {
  background: radial-gradient(circle, var(--ph-ref-palette-neutral90) 0%, var(--ph-ref-palette-neutral97) 100%);
  background: radial-gradient(circle in oklch, var(--ph-ref-palette-neutral90) 0%, var(--ph-ref-palette-neutral97) 100%);
}

.ph-gradient-surface-blush {
  background: radial-gradient(circle at 80% 20%, var(--ph-ref-palette-primary90) 0%, transparent 60%), linear-gradient(to bottom, var(--ph-ref-palette-neutral98), var(--ph-ref-palette-neutral99));
  background: radial-gradient(circle at 80% 20% in oklch, var(--ph-ref-palette-primary90) 0%, transparent 60%), linear-gradient(to bottom in oklch, var(--ph-ref-palette-neutral98), var(--ph-ref-palette-neutral99));
}

.ph-gradient-surface-warmth {
  background: radial-gradient(circle at 75% 25%, var(--ph-ref-palette-primary92) 0%, transparent 60%), radial-gradient(circle at 25% 75%, var(--ph-ref-palette-secondary94) 0%, transparent 60%), var(--ph-ref-palette-neutral99);
  background: radial-gradient(circle at 75% 25% in oklch, var(--ph-ref-palette-primary92) 0%, transparent 60%), radial-gradient(circle at 25% 75% in oklch, var(--ph-ref-palette-secondary94) 0%, transparent 60%), var(--ph-ref-palette-neutral99);
}

.ph-gradient-ambient-glow {
  background: radial-gradient(circle, var(--ph-ref-palette-primary90) 0%, transparent 40%), var(--ph-ref-palette-neutral99);
  background: radial-gradient(circle in oklch, var(--ph-ref-palette-primary90) 0%, transparent 40%), var(--ph-ref-palette-neutral99);
}

.ph-gradient-depth-layers {
  background: radial-gradient(circle at 20% 20%, var(--ph-ref-palette-primary92) 0%, transparent 50%), radial-gradient(circle at 80% 80%, var(--ph-ref-palette-primary90) 0%, transparent 50%), var(--ph-ref-palette-neutral99);
  background: radial-gradient(circle at 20% 20% in oklch, var(--ph-ref-palette-primary92) 0%, transparent 50%), radial-gradient(circle at 80% 80% in oklch, var(--ph-ref-palette-primary90) 0%, transparent 50%), var(--ph-ref-palette-neutral99);
}

.ph-from-primary40 {
  --ph-g-from: var(--ph-ref-palette-primary40);
}

.ph-from-primary30 {
  --ph-g-from: var(--ph-ref-palette-primary30);
}

.ph-from-primary50 {
  --ph-g-from: var(--ph-ref-palette-primary50);
}

.ph-from-primary80 {
  --ph-g-from: var(--ph-ref-palette-primary80);
}

.ph-from-primary90 {
  --ph-g-from: var(--ph-ref-palette-primary90);
}

.ph-from-primary95 {
  --ph-g-from: var(--ph-ref-palette-primary95);
}

.ph-to-primary40 {
  --ph-g-to: var(--ph-ref-palette-primary40);
}

.ph-to-primary30 {
  --ph-g-to: var(--ph-ref-palette-primary30);
}

.ph-to-primary50 {
  --ph-g-to: var(--ph-ref-palette-primary50);
}

.ph-to-primary60 {
  --ph-g-to: var(--ph-ref-palette-primary60);
}

.ph-to-primary80 {
  --ph-g-to: var(--ph-ref-palette-primary80);
}

.ph-to-primary90 {
  --ph-g-to: var(--ph-ref-palette-primary90);
}

.ph-via-primary50 {
  --ph-g-via: var(--ph-ref-palette-primary50);
}

.ph-from-secondary40 {
  --ph-g-from: var(--ph-ref-palette-secondary40);
}

.ph-from-secondary50 {
  --ph-g-from: var(--ph-ref-palette-secondary50);
}

.ph-to-secondary50 {
  --ph-g-to: var(--ph-ref-palette-secondary50);
}

.ph-to-secondary60 {
  --ph-g-to: var(--ph-ref-palette-secondary60);
}

.ph-via-secondary50 {
  --ph-g-via: var(--ph-ref-palette-secondary50);
}

.ph-from-tertiary40 {
  --ph-g-from: var(--ph-ref-palette-tertiary40);
}

.ph-from-tertiary50 {
  --ph-g-from: var(--ph-ref-palette-tertiary50);
}

.ph-to-tertiary50 {
  --ph-g-to: var(--ph-ref-palette-tertiary50);
}

.ph-from-neutral90 {
  --ph-g-from: var(--ph-ref-palette-neutral90);
}

.ph-from-neutral95 {
  --ph-g-from: var(--ph-ref-palette-neutral95);
}

.ph-from-neutral96 {
  --ph-g-from: var(--ph-ref-palette-neutral96);
}

.ph-from-neutral98 {
  --ph-g-from: var(--ph-ref-palette-neutral98);
}

.ph-from-neutral99 {
  --ph-g-from: var(--ph-ref-palette-neutral99);
}

.ph-to-neutral90 {
  --ph-g-to: var(--ph-ref-palette-neutral90);
}

.ph-to-neutral96 {
  --ph-g-to: var(--ph-ref-palette-neutral96);
}

.ph-from-neutral10 {
  --ph-g-from: var(--ph-ref-palette-neutral10);
}

.ph-to-transparent {
  --ph-g-to: transparent;
}

.ph-from-transparent {
  --ph-g-from: transparent;
}

.ph-gradient-transition {
  transition-property: --ph-g-from, --ph-g-via, --ph-g-to, --ph-g-angle;
  transition-duration: var(--ph-sys-motion-duration-medium, .25s);
  transition-timing-function: var(--ph-sys-motion-easing-standard, cubic-bezier(.2, 0, 0, 1));
}

.ph-gradient-transition-short {
  transition-duration: var(--ph-sys-motion-duration-short, .1s);
}

.ph-gradient-transition-long {
  transition-duration: var(--ph-sys-motion-duration-long, .4s);
}

@keyframes ph-gradient-shimmer {
  0% {
    --ph-g-from-pos: -30%;
    --ph-g-to-pos: -10%;
  }

  100% {
    --ph-g-from-pos: 110%;
    --ph-g-to-pos: 130%;
  }
}

.ph-gradient-animate-shimmer {
  animation: ph-gradient-shimmer var(--ph-sys-motion-duration-cycle, 6s) ease-in-out infinite;
}

@keyframes ph-gradient-pulse {
  0%, 100% {
    --ph-g-from: var(--ph-g-from);
    --ph-g-to: var(--ph-g-to);
  }
}

.ph-gradient-animate-pulse {
  animation: ph-gradient-pulse var(--ph-sys-motion-duration-ambient, 3s) ease-in-out infinite;
}

@keyframes ph-gradient-cycle {
  0% {
    filter: hue-rotate();
  }

  100% {
    filter: hue-rotate(360deg);
  }
}

.ph-gradient-animate-cycle {
  animation: ph-gradient-cycle var(--ph-sys-motion-duration-cycle, 6s) linear infinite;
}

@keyframes ph-gradient-breathe {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .85;
  }
}

.ph-gradient-animate-breathe {
  animation: ph-gradient-breathe var(--ph-sys-motion-duration-ambient, 3s) ease-in-out infinite;
}

@keyframes ph-gradient-shift {
  0% {
    --ph-g-angle: 0deg;
  }

  100% {
    --ph-g-angle: 360deg;
  }
}

.ph-gradient-animate-shift {
  animation: ph-gradient-shift var(--ph-sys-motion-duration-cycle, 6s) linear infinite;
}

.ph-gradient-primary-bold:hover {
  --ph-g-from: var(--ph-ref-palette-primary50);
  --ph-g-to: var(--ph-ref-palette-primary40);
}

.ph-gradient-mesh-brand {
  background: radial-gradient(circle at 30% 20%, var(--ph-ref-palette-primary40) 0%, transparent 50%), radial-gradient(circle at 70% 60%, var(--ph-ref-palette-secondary50) 0%, transparent 50%), radial-gradient(circle at 50% 80%, var(--ph-ref-palette-tertiary40) 0%, transparent 50%);
  background: radial-gradient(circle at 30% 20% in oklch, var(--ph-ref-palette-primary40) 0%, transparent 50%), radial-gradient(circle at 70% 60% in oklch, var(--ph-ref-palette-secondary50) 0%, transparent 50%), radial-gradient(circle at 50% 80% in oklch, var(--ph-ref-palette-tertiary40) 0%, transparent 50%);
}

@keyframes ph-gradient-mesh-drift {
  0%, 100% {
    background-position: 30% 20%, 70% 60%, 50% 80%;
  }

  33% {
    background-position: 40% 30%, 60% 70%, 45% 85%;
  }

  66% {
    background-position: 25% 25%, 75% 55%, 55% 75%;
  }
}

.ph-gradient-mesh-animate {
  animation: ph-gradient-mesh-drift var(--ph-sys-motion-duration-cycle, 6s) ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ph-gradient-animate-shimmer, .ph-gradient-animate-pulse, .ph-gradient-animate-cycle, .ph-gradient-animate-breathe, .ph-gradient-animate-shift, .ph-gradient-mesh-animate {
    animation: none;
  }

  .ph-gradient-transition, .ph-gradient-transition-short, .ph-gradient-transition-long {
    transition: none;
  }
}

@media (forced-colors: active) {
  .ph-gradient-text-brand, .ph-gradient-text-accent {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    color: canvastext;
  }
}

@keyframes slide-in-b {
  to {
    transform: translateY(0);
  }

  from {
    transform: translateY(100vh);
  }
}

.ph-surface-bg-radial-1 {
  background: radial-gradient(245.54% 206.68% at -28.73% -26.89%, var(--ph-surface-container-low) 0%, var(--ph-surface) 100%);
}

:root {
  accent-color: #fb5c00;
  --app-navbar-height: 48px;
  --app-sidebar-width: 240px;
}

.global {
  --nav-priamry-height: 68px;
}

body {
  background: #f5f5f5 !important;
}

html, body {
  overscroll-behavior: none;
}

@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-scale-x {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-y {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-scale-z {
  syntax: "*";
  inherits: false;
  initial-value: 1;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-space-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}

@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}

@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}

@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}

@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-leading {
  syntax: "*";
  inherits: false
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-tracking {
  syntax: "*";
  inherits: false
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-duration {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}

@property --tw-content {
  syntax: "*";
  inherits: false;
  initial-value: "";
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  50% {
    opacity: .5;
  }
}
/* Selected guideline editor — subtle purple border pulse (design spec). */
@keyframes brandbook-v3-guideline-border-pulse {
  0%,
  100% {
    border-color: #8b7ab8;
    box-shadow: 0 0 0 1px rgba(101, 85, 143, 0.08);
  }
  50% {
    border-color: #4f4371;
    box-shadow: 0 0 0 5px rgba(101, 85, 143, 0.14);
  }
}

.brandbook-v3-guideline-inner-pulse {
  box-sizing: border-box;
  border: 2px solid #65558f;
  animation: brandbook-v3-guideline-border-pulse 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .brandbook-v3-guideline-inner-pulse {
    animation: none;
    box-shadow: none;
  }
}
.mapInfoCard {
  box-sizing: border-box;
  width: max-content;
  max-width: min(280px, 92vw);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 200ms ease-out,
    transform 200ms ease-out;
}

.mapInfoCard.mapInfoCard--visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 150ms ease-out,
    transform 150ms ease-out;
}

.mapInfoCard--sm {
  padding: 10px 14px;
}

.mapInfoCard--md {
  padding: 14px 18px;
}

.mapInfoCard__title {
  margin: 0;
  font-family: var(--ph-ref-typeface-base, system-ui, sans-serif);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.2;
  opacity: 0.5;
  text-transform: uppercase;
}

.mapInfoCard__heroRow {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin-top: 4px;
}

.mapInfoCard__value {
  font-family: var(--ph-ref-typeface-accent, system-ui, sans-serif);
  font-weight: 700;
  line-height: 1.1;
}

.mapInfoCard--sm .mapInfoCard__value {
  font-size: 18px;
}

.mapInfoCard--md .mapInfoCard__value {
  font-size: 24px;
}

.mapInfoCard__valueSuffix {
  font-family: var(--ph-ref-typeface-base, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 500;
  opacity: 0.5;
}

.mapInfoCard__subtitle {
  font-family: var(--ph-ref-typeface-base, system-ui, sans-serif);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.3;
  margin: 2px 0 0;
  opacity: 0.45;
}

.mapInfoCard__statsRow {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

.mapInfoCard__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mapInfoCard__statValue {
  font-family: var(--ph-ref-typeface-base, system-ui, sans-serif);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
}

.mapInfoCard__statLabel {
  font-family: var(--ph-ref-typeface-base, system-ui, sans-serif);
  font-size: 7px;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.4;
}

.mapInfoCard__bars {
  align-items: flex-end;
  display: flex;
  gap: 3px;
  height: 28px;
  margin-top: 8px;
}

.mapInfoCard__bar {
  border-radius: 3px 3px 0 0;
  flex-shrink: 0;
  width: 8px;
}

.mapInfoCard__bar--dashed {
  background: transparent !important;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.mapInfoCard__progress {
  display: flex;
  gap: 4px;
  height: 4px;
  margin-top: 8px;
  width: 100%;
}

.mapInfoCard__progressSegment {
  border-radius: 2px;
  flex: 1 0 0;
  min-width: 0;
}
.iso-map-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  font-family: var(--ph-ref-typeface-base, system-ui, sans-serif);
  white-space: nowrap;
  box-sizing: border-box;
  pointer-events: none;
  user-select: none;
}

.iso-map-marker--interactive {
  pointer-events: auto;
  cursor: pointer;
}

.iso-map-marker--pulseExtra {
  animation: iso-map-markerPulse 2s ease infinite;
}

.iso-map-marker--alert {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: oklch(55% 0.2 25);
  color: #fff;
  animation: iso-map-markerBounce 1.5s ease infinite;
}

.iso-map-marker--warning {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--palette-secondary-40, #ff5e00);
  color: #fff;
}

.iso-map-marker--success {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--palette-tertiary-40, #00897b);
  color: #fff;
  animation: iso-map-markerAppear 0.45s ease forwards;
}

.iso-map-marker--xp {
  min-width: 22px;
  height: 22px;
  padding: 0 4px;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  background: var(--palette-primary-40, #4b0164);
  color: #fff;
  font-size: 9px;
  padding-top: 2px;
  animation: iso-map-markerFloat 3s ease forwards;
}

.iso-map-marker--upgrade {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid var(--palette-primary-40, #4b0164);
  background: transparent;
  color: var(--palette-primary-40, #4b0164);
  position: relative;
  animation: iso-map-markerPulse 2s ease infinite;
}

.iso-map-marker--new {
  min-width: 28px;
  height: 16px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--palette-tertiary-40, #00897b);
  color: #fff;
  font-size: 7px;
  letter-spacing: 0.02em;
}

.iso-map-marker--count {
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: oklch(85% 0.02 280);
  color: oklch(28% 0.02 280);
}

.iso-map-marker--overflow {
  min-width: 22px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: oklch(92% 0.01 280);
  color: oklch(35% 0.02 280);
  font-size: 10px;
}

@keyframes iso-map-markerBounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes iso-map-markerAppear {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes iso-map-markerFloat {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  70% {
    opacity: 0.85;
    transform: translateY(-10px);
  }
  100% {
    opacity: 0.35;
    transform: translateY(-14px);
  }
}

@keyframes iso-map-markerPulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--palette-primary-40, #4b0164) 45%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--palette-primary-40, #4b0164) 0%, transparent);
  }
}