/* The redesigned Overview (CTO-approved 2026-10-26) - GENERATED, do not edit.
 *
 * Built from docs/dashboard-prototype/index.html by scope_css.py. Every
 * selector is confined to .cwv2 so the port cannot restyle a screen it has
 * not reached yet: the prototype is a standalone page and styles :root, html,
 * body, a, button and the bare type elements.
 *
 * Loaded on demand by overview.js, and only for an account with the
 * new_dashboard flag. Re-run the script after changing the prototype.
 */

/* Typeface: Plus Jakarta Sans, the product's own face. The TTFs in

   wp/wp-content/themes/woomen/assets/fonts/ were subset to Latin plus the

   typographic marks this interface uses and converted to woff2, so three

   weights cost ~36 KB inline and the page still makes zero network requests.

   Licence: SIL OFL 1.1. Weights 600 and 650 fall back to 700 by CSS matching. */

@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(data:font/woff2;base64,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) format('woff2')}

@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(data:font/woff2;base64,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) format('woff2')}

@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(data:font/woff2;base64,d09GMgABAAAAACQ0ABAAAAAAVDAAACPVAAISLQAAAAAAAAAAAAAAAAAAAAAAAAAAGnYboRAchAYGYD9TVEFURACDfBEICu101nABNgIkA4cYC4NOAAQgBWwHIAwHG8hFs6JmtFplGUVZIEXZf52gxeEXu8IGx2AZIK3U4BjkZGJONLWs9LNH75P4n2WUK4Rtv8ngmnYfOFh4mBGSzPIgPw7+z7b7QCfoU2hikqpCpEJhKHSDNwTb7MCcOHtYoICUSAgISEmmkWANC6MARV2rm1MX5Wbs1/WxzW2/6aL6t59+LeNNpms5qIRCKqbD9jLVIptZ94Kha8fIOHCnOYRnUqqNjMh6CjJnH/3F3EpYKFiohAqJI66Cl6ypcauYJFF/xB6xzaEBARTQJ6AAwNA6U51iXFzNL3j04e9tpu2++954dfxHDijVKSiblRQNcLfBKhXB9H+/vqT9u8KVQXRo0sFM9nQm+UwbnUkhJp11k+iCQBVgUadN0aXs0pQZVynqLhDPz6ndDUHI72Yr3EADK/0TfsnGKo0vucq5AqCT09N2tkzNC64pjcvgDG5IJvpeP2TOenH1/x3YlSqlEiGGEE84wwFx/lgfOQGYDjgQkHxBEEGQyEEoGUGYZYDIMhlEiTIQFZwgXFpABfASAQWFigqqeqhA8ASJPlDe/EDCBpInxk4NCPBwsRighx6uzwAB117krAUBPAFCUfyayxrbtC+QcPAEdUL5jYP6gN5xjgzqco0qGTNMkRTK4KkFpBArp+LKsTr0kVYF2TW2Yo0qGAMEftj2Z2Mgs7RKqtEtWR/q24B6+npiRjKsnTIyRmt8xpgfUEK3vnpsBaEGAeURVFcyJvA3UagwSGgYcbBw8AiI4pEkIKNgSsLCxiEmoaCkoqahpWNhla9AoSLFJrMpU66ey1TTzNKuU5/lBgz5yVbb7bTfAcNGjDoJgtldEPU9iiFpZzVuDmlVtsEAkheo4IEnXnjjg6/yawQjDDQY4sCCAw8BUiK5f7g9woOPACEpiBAraTfIkKNAiQo1GrRZXd/pkU1VLg0qp0EueWIBVskHBRRSRLFMhpQopZRlK5pmN6lkqqimRtU2qsepXH3XRDNuWlRfNyxnQPazDBPHZIR+G+0fFr8GsIow0GCIAwsOPARIStpIhhwFSlSo0aC1KwuSpyEWFivIp4BCiiimhLLEigb2plVSRTU1P2v7rq4PGphGHGUrKPu97HCjYxyOcIL6yAPTTI6YswiB+xSewEeAkBREiKutmFmp6irjIvjL00oxtlHaocSukHQyq+lwxmu2sz+8LcqZGdRufkNfZywXBsQL8nRA5poYiCCmdvlemF2TBMVuCoeT0QTkkojSyQwUFA5N2UxKoyc5aQLp3ktoAUyqYkqHCIvvIBs5KCawsqYruf8yeTtPYMrsqU3wkKLBpuMOuazy4mp7e97+cdx5idoZFYujBm/DnEzf6LxM3PaDzXyetnHabrQZoqGHx5ZW8jQNdLIbusSe7eCXZ5pdKB/dwDG6nIW0mNazyG41EOU5ttNQU+huXxcdgy9Nf5XlpqXoROBsfw6nureHVwwBmy97sekgMLFWSmvDmaE1YHs5KAOhl5chvDYmyZac9as/zoCmupsr4JEl+kFjMDtCkOO99drY8JVU4z3n7t52jzwtW+F1MNPIQhjkKmHwRi5ZBBLVBy+m1iy6kQNc5WzfjX4J4Lm4Ewdywu1Ml47iaQx6RSro01LkTs9tTdu0irBZrO7h5hB/XdQ+1FatbYfisihT/WyOC4XZy0vkT9qBxeSnz9Rr32alB+zbMNKwqdvvlX0+cBMeL20IZqm9s8WrX3YSqVBPykGy9uTV3sjPrZlftBQEggHYJQkDmwyTgo6EgZGaWRatHDapSlXIV6tOsQZNbNzc7Hbbp9Kv9qs1bFiDY0Y1OukkFyg+CB8+fJcwYfBYfmDC+JvIU4AQj4cCo4W5w0wSBSIaIXAUZGm4GCgQaASed1MJDBKwpwQ8ERkHo7hPQsXgJ8k9GhtHqGQcSYyhJO5epGTCKdy9KGlB6TCKAXswYn/m/vylShMkXYbxTOBAWYMh5cjjwcLGS2mFJyjDIcpxrAocoBZ7q3OP0cDBmxNHcGGUJuzPjf3tdsfaYy+cfe5Yv/pNnP3Y0zAOcQyHG8FeRrVggm1CgQ6+lFTdk0Ldk7xgBFWMJEoPCthoMAptDsIlBmApLQgZiRD6uwahpAoM+SJfNBH5ovCeMNmyTRiAV3sxiMmEvdgwTIkGoaqKlx5IUk9/djU8ACE2OgngqRYh9708rEsNCBMoCkWjqI1GQmBqBIQkFBAM+lHENjtcxiHSBt/F96CzFSh5h0gyUMSHpD0decdI8uqPM+kdxpNNBuNUiQqfmqbz/PgCKpU8YhgQYS/lJgXR0t6XXFTtBPhLbDX1gDwuzbjWXl4MeNfW2aqB+GFkJSB4AUC5NsETQe4YykcQNq0ZlrodCB3KAoB0QoWImCbcWtiuY2zOBoGUNy9LzUbem7pAcugJ4JDNphgoHTkVkRYrCLLuKp58EfuOvPgLg4BB1MQDg94sndlcoNzdakZ8XkdYx3v45AfDA0j2EIC50OtVEDIUAdDGKTqpCW/EpUNpsJ9xmte7d+6ZmjzEC8gHMgdwjLz0OB8xVCL3u4ECrAUe1qkn6ExgNdSaJSPgfwUwYXaU+MeRq3NcW43K6zIFzH8V1ve66YoKJ8QDgP/QEoPAfAhBdJieAj1E42WChj8A/obS5qs9EnvGGF9KL7UHPzRc02z3v2w+KhKFRGFQeNT2NUv6j9US8ay2c3UoKgKFEGhh7FhR6+dPPR6QzumPnY8j3EGUc3dH3PSLT2BcC3jKoF+tM+qaA36z1TZrnbLcRn3WW6HfBeect9J+EBP48RcgVJhJ4KIhIMWIhUb8IViYOnkiyXbaYJcrtniKS0JKTklHfxbimS1kd89lMVnJmZd1yA71Xyyn7X63wyXLDDnmhBEnHTXsiUNa/eyyw5454qLFlvjDVQet8twibX7Rq8c8P/EC5cGHJ2++YEIEChIsSrgIkSZCwf1QjxM6OHPfGWgS0XHEKyfEwycikNI1ymghlcEcKBMKeaA/3uPFHZx9k2tUqlKtkY3DLdfdcBMEpP9mAcKfAPE+4C9g5qvA/B0A1MlAbhNtNduDPgyRXsG6ZZ4knfhN7a3o5EBAddnK6mq7CzQAfbag6rs7Ns4/81tLe/DQ8uv6XXjxWjFb43owI78zEeqd5l8C1At+6wxH2HPso6vCwyusFimr8ruzEvkoUG0wAscZiECk3F3B05JVFOHR6pGhsTzTYyc2a9e9P8qJuUNmYmx5l8iAdzMGR8Znwno8bDfXU2V746nKb0EMCHEmk6xHEstJshryVEvLlS1k1YFwoWPeNzNAsakAI2s9z7ZNIAUM9pq/WpYoanzWDqtVR4eJn50SCdxC5U6BvEO0I5N2gVLH28QcLT3R/W+aJJ2iDmhEvdhEe2SAxpaUkHpO6oQ3by8UxCqFfxKwiJ99ZSmxSP+c/YnwSHjFy3PoVs9ZzBEbZ7Q+jyQH8sRckOKx5mwaMSx4diURciS7yfECPSuqUlKHPhRhig984IIUdfDqhJUVWlZuoEJEEiaBxSLsp3JREhWyggm1qHLVktE00dQrmfHa3S7x/CqpmUjOuH5efNyGhZFDtp/RvK09QJ2zEWnOlu/xjdHzEZrJiwQhsu8XIps8F1yTCMqN0hJBcCqTQaG/LlehZIwERbSOcefgSjiTHCbYAi1USpeT6X68sd4TsXBLksNXmYIByZ41uZRQDSiWUtShRNLn+iIpmRM+g0LxKGiEzAQVJooF4MaEW1Kdos+IDV0WOtIXO1OP9P2AW/5q093sHizXQgsPPPnI59yfrU3DJ9yhoSjVLtm1fYX0PdTs7Em+O5ozlIQHv6nbQlkJmUq1e/e8j1/ulielEV27YgRDzpSjqUk29DUnZYe/Xo7TW+9uZlpPB4tmGcMH8eyEufPJAryjNa6vBg/T3qvTh34Wdf5ST5PhSiqZVc3Eatke9Dq/xiPfe6/vMLsQCiNXab09bTYk11EgaSfJEW6Xjy/9AfPgs0D2NTaMO0Eyk76nq7zWUBtDLiSXkCuTc5ezOo9QopE06ZzRgQ+lg2NHCvysMgULPHThOeW0myhIUhe1mGP3Hve3NeE6VIuuPVr5SrRUPi9BFwWNqDPZmrHr9y49/NMdMTTwOXZYUwSnLQ8Hn6w/6FSoBnyHEQWtPOjN1p2CSFs+lnN4QCfTDZNmqgh9qP/XQ5n4ECYu6tH1k4x04HmPtGea7OC65B5ntUWDOeVhjcwgkNAf/jWkZkfamJl2GoufdXjGyslnAUo6oFYkhQnRwnFG26byT10TRtxdWmiTKwbwphzp2NNpbdp3J7l2eFg9c1UjFDW3A6VS+6b9T2gZI0oMAH3fYvicb3o7R/qgRWyybZxNVZ1s0zCoUHT4wDc433ExqpM+WLxGWywWVhHYffj7gsd/9bF62QN522ZpRbsH+vTQwgMartqydtbV/gTdt8f4QYoTrkUAEqoYo8Lx+W3vC7SXuLZO1itK1hZMadg+XAvN9SgYssU8gs9fSuRyF23bZ2gsKViX9wJct+d/MTc127R8XfX0xM98LVw++MEbtYNSF4lZBb7EWlKG3Ylwx1l36jm5Z3wxGsg0SIPAwo7dWXYEuL8/epHAH9t6uG11q6K+6dDajXBCS6xnOpwsjajzMq3h+jv7M8KwXtfN7vknp2mcfjre93C7+hZEt05ajSnAM8oFgwxfGXsOMfrjY4HMZyjpcCUo0mmpUhTPZ+QsfjD0xJ+CQ326eTU7ujvoKKBysjrlaSSG2YqyHfi0365/T7MXWFXk2/vcwNkRaU+6Sgqhd9xbd9JMrojR6LJwwpMq6CoSSRz3mwOan/FD+U/40bEiaGhNhhXzrg5exoxppjGLw9d0H0OPCV1w98WCWtTq7A806FhMbbUBMqNZdqdDj6OemutA6g8bqKeYpookGlLmG01q3V0aXew6gZI1cdJXxq60LlMmlvFbN+J7OuugDV5HrnQWRiea788UAW+9XPIH9ku932P01u5pkzQ6d7Om+q+C6QVajxRPNflMU52AFjDc2x1m+vBmoDvx5pVSeNmn2ldLzfFdM3+4g/TBx13yRdreONPRQW+d3ubLQ6eT0OTsAOPQ45q2NtG+dl6IWc4qfP3sQTX8sESuDZdxB93+rrPePrgGOUFdSlez9ZOvzehD4IqsCS9lnsTrZ8QKMVKSjkOImLBhaKwXU2+ao5lHNCgSC4MPqPsFVXEdI3LWbVc4q3ZVV3PkjPTY31Vvk4nUKW4PHuLHdxrgwswSvKQ9rW6KJlQdkLldaa9hRRUyHYzwEhD2d/vQir5yF7mqpXpQpqkzsvdRc2aeFsoeNZftDSBBr0sop5IquJw+rxiFsmUrTaEsXplrbh2SszpJ6WqNO0Xq9kQeVHLCKvAeJ+yC8ane2AtqyJhJtyMHJXOuOihfZs3t2MFQDYpuknjtOKghXcEtyVdLLWmx/qKqkxLIruJPW3DLUuyKVJQOb2FKHXTciGV6eqWlREmru/09Pc9Obsw1x9faMkrmxw4hZRl5UMq3CcYAdzWi7M1uJjh0e/SuL34+6ONZ37hrz2z8nk3H9z9/NYBAH6/eXHdn/YO+X0ff/7eX8l36b2E1uabqcZ62gpFslTLZOYdEJd8jdaSqXvfUPc1HWX/R6X+zjjYfIAURCEjSAbABZp7NLSnn9KSns3tLyuYkm83TWNk52JZklU2tUlZKeA6jkedUTZkkjor1Sa44UI+/bdpZULixtqZws5Zrqmyu1demCOsNRmFdrXC4SUAg35HvwPI1+lWPv3SX/57uTh8pd59/2tdu+0WBW5AANsPMc7il5cl4RnNzNTaVul7grHqi3EIyN43LvRHmKNBlcdsn57SRgXq8SyFUzB2fSxbC7Y8Dwq8JibOpPnOhCl55NVebcvsdekHTNmKhT2H82OpTKlvTlQejQbQP92EWvDUlqHXW+FyjPsodFOo+b8SjqOwnVDK7xquWJERxwK+wtHlcezmvNy2d26Ot85LT0+euZbye9DR+773r5aa1cSx4uQJbmJyMLZArLTgOWwhFcAUUwRV6xM8AXvnYisch/KyQ50w9Dtc72ZIKnVZa4eDo54f2LMRZr2HirlpxC4FkvGvuAr2DLa3Qp1ycbN2CbihY4NrSrsJAT868aJ//VztQj09CcHcGddWdraSBX5XZzOHQngX78e5fAFJhKjczyyqsT9xVqhZjlacQ6Mqq+ZSsqOwqjTiluJ6tkdVRzWmcOnp2toCHYZ9GxE7r7SLlIHJKdWJJsYMDzjccc/u6jzSAMlhWh0o31fyo6zaVqFERqTQlUTPU212PzA5x5wCBHmMbz1UgH+WWQsfo2qmxxUOt+HWt89YOZFAXT1uG1tvJ/HcLwN42vW4YOkFVH6cOvWp40zR0kqE+xQDe2i8/Df4u4xyRDX5eqQMBVRVeGW5IVblXoxs8gXHTcRQljUJQptM+70GUrIgsS0ciVqPin1JwvXG1FJKY/KyS+UWekh/HkZUmJmfxKqfk75H+pIkwO741kSF5Xw+VPXnVZWNNslRUHC/TYAo4ARRSFyfvMZFyg2ZnfpDys9B0SRWdcdBZ5xo0D6ngoTaHKXgXvPxXi/cBzMIqDNouBaUw/mTquTP2tvftEt5wYaLI0KZTTzebVDPbtPnNFEU8XpOYiFcrSJQEuUlamqrRxwqksNQZWs2M1FTN9BmaVJ6NqFa+aqSPKenUBGk8LkyE0PObQFPQxxuZ31VqGxFwYWrTqmaazKrpU3SGlKLEYZ6k/f0U+51hG5XcTJG5iNPwWnSnkBUkvDoRguLzo4LxK4gmLblcaNJMmao2Y3endVfEIExUebwJnhBF2BxQqYmQa1oTC3OkLkyXxqHtm65LbyZL4/FqCgWrlMZTKXIiTkWhEVRyovCkIH2WAKQgY6pOMdOUppzWqtGLi+Jlmjjy/lV560vyHs6LUp1JiP+EMnLoGL08nkJ5HmtnfpDxrWgwZVuRqygkhZFloYj8R9Y1LAI+5A/xIS2ulm1Afk9YTtAqA1sovyipScQLEcQp83bn0wX6ZoWsRW+QNbvkOqGV8TLIPcVLJa9rEqVXkp7FSRJIWOnz+HgJDislkbASMQ4I/28Xh6CyGDyBlcm0CgvaRdh9/mgUYh9WBIS92lGzrL3tvYD+uq9g4n21Z2ZjSAjpTyK/nZ9Cz7KSwSgvRQu4P69i/if19N3z8r49kYbAdbuIprNp/D0eTtu063/lcoWyUsWYNEJsE0t4eeW4LLmPjv22hK6r/kHR3EemajGaOZUw8yyNfnpammRmalLNM80xLT3NwI1fP2sqZrWURKbISMqObQYE52P7Hgfzqp0ul+DJWFv1weapmZh7pjT0PiZLScGOu6eNdT0fnaJrhm1UPl+vlLPVU8aimEylJK20WxaRzTQuyklLlslTaAAGy56RFq4sphq0TCp2VVSQ58UoJ0IeqkxNZjC0efF8g0sTIbVRr0sS4tH5EYHvL+CyIqWhahOPztRa4oFqaKlJ0uAUaDU1SfwCEYef43ClRaksGqWgrI5tkDsEHKmQyZDyOQIHE3lqIBqx9SMKX/+dvBQkxdaSEuurApcf8QCR1D5lqmvqeDSuHeWDnlF/hQl+4AArJ9EmM7RLMWvJqGNJEuWnVK1FZ9HBkxuxCwa2sQa3LRjLgJMHY7u7hl4tGnQuHHxVqd3Tsq4lO8nLdgL/w0FHAgaW3lM8xu0/HHAoqH/xXdmjANPuwft8a0YUQZSu13HpkJp/suZtOMBYf2A+lZXxNUY8CKjk1wikrl+rWO2R0jvbVOd/rv+2TUinrKYwLNsw80y7Xe5tu1ywBtWOGt2Nbus77AGF79vf3znTh1EdqKxX/9r7jvfAm5yi4jPp0hSZnzPEWBycPjk0uD0sqiwjwjaJgkDuas4gBFo5fE2ePuWbLWVWhxQL3lYkW5mcXB5PEhYm14BNoKwfVQFycFpM7PwBBOLg9JiYacOgGJbbWajd4XBqtikJ3puOQt12h0O7vbMop42pSsE7U1O5m1qYxFAJDcz/MUVgh2uhM2IcUGvPXD0i1i5D0DZQExXsd03Yg5qsSqpAXc0U5IuISAPf/HrnbzIHwEJYTdan3W6KD9EkMYg7IggE78PxoXM+xoiP3kt0nKk69jRECmwcTrFUrWhskYDW9VmNhqvzr9U01qxvflbvV0ECRPArE/TmW654qC6Ril/9hUCYsBBPePKoNoK3ss9RRIrn1O0343jaahG/Rq1WOJolgAK9UyypVWEDVMTU4ksT136TZ9+9/zxYbhcKKmVqSb1TrG3F1E7A4r0L4zDTvfHYCdOAmuUqdPznoLoAH6lNAnF5isZQogmvFwuK+Xy+xc5UyCuYAgtfICiSTNZE+vEUcVnk8ZkbCUPvMHFvhgiE3jdxmHe9+FzkgW4Eons/EnlaljgDCr4pyv86/D6k7DXkamnd/dXpHSJprRobqCKa0y5NTJgRV/sJi/dBIvgIvp+W8EV1jvsf7vqH7Q+dFO42RxXtPIMW6cUs3NRH1sJNJnAt9xfjjs+lX6RGae6lTtC+rxkUqdJTjTvXgA3ipEze72nRXRERCFp0ZECM/4alloqGlQZvTY2bnSyRs+OJEgUebDk8lv/4wgDXzlLL1QkgXPcuZO+OC0aKEYijCwuQc3W6WGKSEUuSkKmJhsGm1ttWcMY3wYiy9BWgjj6OxZ/BxR0goIfaOxadzZNnzOmPp8lxOAWFSU/NooG23o5eUDYo8elV8Hs7snL09s9G+xLVqK2DYp+VmUIbO9YEpj/x9e6klrYnvZ0Tqem04KjssL6AV5+EkaNkS0v/88TCMzfEkkYrW5BzUtJLqCmaMi7LwiR+f9r1nSYh+083m4zNa0rT5v73Tde/iZKEiVMXRddl/ReKC8/4JSZhb2uVPVuUbqM2VOQ1Ws84Nk/1iNkaE7Pl8Zz3x8T2A52QX8BiFwq4rLx8lpCXy2JZfASswjwWGK0y8dSTG/Ex+Y24GSUzGnGjil9w80Y5MIe6zu3oZw+7HSuoazvZ2ED5oiyBpfYnWjoo69ZT/yb4hqTh9SCwOWyUu0AmAcuqI/uGY4tDoMdAqm90vHg0Y1vSizOez5qV/jyjqFZVqXzW0qJ6rqwE2GPKifBcUj6bXJtelL6d7HtuAflYhjVDvwvxU1SsIzZqVfRBnTUjg+qgTnJ7byfGiI8ffUnY6tU6ieoAjGOOuRW+1fvl3eNDq8/2cDdyqZmWDN3B6F2RhZnInYhd+mmJTFCxZYmnY8aOGfpU3g/PJSDxr6xUfZkuUBLemi/oNX0QtWmQ+Pxd61QIkxI+3YbfAB0cF5Td1BLKFt1ymydUK46vOLFo+Ynlx3tXcaBVfZBxtoX9J/qP7xC9Qf2FoKimwKiyuS9RFPxxp2Cl0NUgGioskP+dXfUrU/IL+kW1DfxBq4RcYGSwMNKoU8iGFVdH0LwCdnKRUMCxFfGFdAP24iKr5Tv2lwj0B7GC6DRkNSbqNE2JWdlUl0qd6M7ObqIpaVlwNiU7n7uAixGdRDNFsiB0/vM4zJ8mwISinM7LEzKx2gxJpBjzSvoFid6ORp3HRNZ9etm9f6W+uuIuUkXmsbPyqGxODi0pnc1h6JVJr6UEi2cINkFMRexF1K90bpk7+8rYgasZKECsHJCVsDnFYgmnuIQt6zIAeJmlMytSM5k63cimE57EBIe/wuZHqUK1WbwklqEgQQjUuIE4uEg52wRXhukyBUyWoShB9P9L+AsPp6k2muB6f4ixTReltFH/VFETcAujQ4jfJ1mjdigDbsDMPXy7nd9jNvPmaj89vFRTN89ewe+eCz3Fu/kmq7CCbDKR7SkCIUQsKUyxD9QKokD40UlSeQVsdoFAyM7PZ/EpakTwqlzM8qNoOk/KYkkLHfVoOUVWBXvPL8gIUDkVcqdSLXc4ZSqWBa9QEPJZSpnToVAqmel0egYziZGRRmey0hkDQs9WZuLiwGbyQGLsibxkm4lhCbcO0Pxfwv+/hAb8NlJ1ZLKWRiXrNEqlkao7EVZozlzUOTT6XixqmFyHwazDsE7Y975tTeeaDvvazrVAmnOHIvu/kSGn4bT3VWWLL88ZzxwHjX46ndFw8w8k4tlNo5FGNdYIEUhDvnTzunrNA0Nxg9WIjDbUlGVHdc2NFEdXVOSKY3juilvXezMle0/mHnAIpmnj5JXRezMzE3uU2HOoK+2vQOa1UpMzRVyeRcZ0GgyMpjyJgJsp4rRSBWlZjbQXARmHMw4tuPwJAezXJQs0gup6gUFYRlGkVTRji6UMGucIb4HMQTVnrM8YZMNR6evT1y1IzQm5P9Iwcqzh2CM+AioGMlsh2GcyLV/et8xkXLYMIsuXgRtXEWDK5L5r4B9r7Ghsn/lBgkAueux1/Ug9KPfvLFhKPZWZfWZ0BiAnZ+/PODs6u3BFkAHBlxePROKLGxYXvt7HFjN+bXjXALYexrzVxE0Kfyis8kwzZEkxb7SYMPiwudIrXZ0FrhEGOhrewRSv2yKftlm+sPE+x3Ef0NPt1661CHTZqdfu5nJFsQU1yHOg3zLWy+Xhtck5ScxsNpuZk8NM5mQzVbE/Kjs7iVMS06qNiNS0xSB68iLCLd3hjzhaW+MkVyK7a3qQzxowvhl8+4L9/sWgAJ1TEubv9AcStCAHzRt88Zb94v28G86JTtAxi5cggzoYUNmx+I15TsSBayChsi9ZAyheTmiZgbl1evfcbnP3ja1ywLPp9u1bxdtnqlgr7HM41w+61s8S5957g4+GpZKyWcqJxGIXSTKElIeGloWEzO4+ac1gzvRo8dKFwcERUaVmlZaJKPxlQWDYl/BSoFMZQeuSamk1+PufKHFQYbR2nBcMbwgK/XA9zGiYw96LZ2r4bcZ7Iwhgknu2OJuQ30eQ35Ysv0skf6DG/hAW+TkfOw4EA6yjDjEAQcUAFCYGoGgEP/a9boP8fuvlt9tgv9v2YCwOxAyiHaNvInrZViG/rUd+12L7Q82IKr9nu/w+kvw2vv0uaZANaAFw1YmYdA2I6+7/IHP7n7q7KfNga+XD75C08vFFSFl37yaZ+79t5fakyrszkKn63muMTqwGRNMkDR2ZOy/Z77YukIui4oegpWqxHgnmepkpcd3tZTJ311Q+nITsdfeuk7n/01Zu/1d5d6CGuntXEa7/C3hC18+wSXdEACaZHc8pxDni3CFFUlLUieqcD/hcXFCxUAmiPnuf09G+8CaPieD2K7qL7qFHwmPzAXOerN6BPGkGfMzSZgm2AbD8RpQIu93M04B8pz5K8WWB66qaEVxuHKOJfJzvqYHcI+cV4svlrgsesHVFPZGlnkqxv9RQ7eNYPm0r8SnhnEnxZaHrqvpx4mjOJybEl+J1hpHfD07gRl8PCoi4Qn4qUQWxaxPJSzJPyTEh4kQ/Vwo6ECts7XfuXrhO8/XIUAGvwfZ/SX0ZEuHkXFWxJlDGhIgr5KfCsRg8jJgQcWE/sR+sVSmCDfuBIKCW5Lh4JnoOP/ZUCGuN1nwDfCu6zW1APqoXI+WMeFh+1PUi0LA0Dhd4Kk2Ek9+Bv8a00h8xd2+rrMvvjV7q/1f3Pfo/ejPvBgHk3M3PtQk3FQYKfrMhHmMAn7xAjgCAb39fuLjJJur1CAbhDQoggD8Ej4yVGem/r3RmHdxY3+YMgjwN9izVow3kPuryBgxHPqPe+aBMpxa00SLmhQcTIxxsXYZp93XMRchNEYjlUzXwXOykqsWIZhelukliWPZ9z0HIGLC8SCwaDoDVN0IKxKX7Fl9AyhGidUqdqwmziAKsht5NKZkcfRDq9lRC3zDsGbqtfTxtQJmx6FunUpIdqSGqzlRqlg8gmLlnkCBEk/YHBYicSR0rwcsKM0QDG6wctqTWaZniiYDCIFLfII0YW9YLi13iMEK8eE7yuORYApmZ4tMGlfNhsxwx8yQkTWy6Me2xkCJTWPSKiQhBUSTIhSaLK6gaIBywBZ8P5AtsEW32AqJX3KotSpVL53xt5Zd0aAZHqnA0sdrFV6xcvMJE0NYSKfFFELhkjpxcINUdKZc7oo3YiYv54p3MWM2+FjMTlVdHqSPXorhS442i4NzHWoVRkfSZRJNwiNoqIzdXI4YriR7tHp9DmjBnvoKCyFwOyx1uJrAva4uhIjg5CTnIPFgqxoDT5BGmggGjCp1X0f9vwG0DKeE1MTVwCn4iEMC3MnlR8OyyeiWTE0hX84wJAMoXiEeDeAB/vstOUAFMDPtL8wd+UKTqVCuRrZRduQpOGk7FqtnZpKlTo1gtDwDaiijKfj3+9zw/5gEAAA==) format('woff2')}

/* ===================================================================

   CubeWP Sites

   Borders, not shadows. One white surface per job, on the #F8F9FF page.

   The website itself (its screenshot, its address, its dates) is the

   largest thing on every website page; numbers sit in sentences and in a

   single figures strip rather than in a row of identical cards.

   =================================================================== */.cwv2{

  --bg:#f8f9ff; --surface:#ffffff; --surface-2:#f5f6fb; --hover:#f0f1f8;

  --border:#e5e7f0; --border-2:#d3d6e3;

  --ink:#14151f; --ink-2:#3a3c4e; --ink-3:#5f6278; --ink-4:#8a8da2;

  --accent:#4b2fd6; --accent-2:#3d25b4; --accent-fill:#5b3df5; --accent-bg:#f1eeff; --accent-line:#d9d1ff; --accent-soft:#f1eeff;

  --ok:#127a43; --ok-bg:#e8f6ee; --ok-fill:#1f9d57; --ok-line:#bfe4cf;

  --warn:#8a5600; --warn-bg:#fff4e0; --warn-fill:#e39a2d; --warn-line:#f1d9a8;

  --bad:#b42318; --bad-bg:#fdeceb; --bad-fill:#d92d20; --bad-line:#f4c4bf;

  --info:#175cd3; --info-bg:#eaf2ff; --info-fill:#2e78e6; --info-line:#c6d9fb;

  --mut:#3a3c4e; --mut-bg:#eef0f5; --mut-line:#d3d6e3;

  --topbar:#14151f; --topbar-2:#262838; --topbar-3:#33364a;

  --on-dark:#ffffff; --on-dark-2:#dcdde6; --on-dark-3:#8a8da2;

  --side:#ffffff; --side-line:#e5e7f0; --side-hover:#f3f4fa; --side-on:#f1eeff;

  --e2:0 1px 2px rgba(20,21,31,.05), 0 8px 24px rgba(20,21,31,.10);

  --e3:0 16px 48px rgba(20,21,31,.22);

  --on-accent:#fff; --scrim:rgba(20,21,31,.45); --veil:rgba(13,15,20,.55); --veil-2:rgba(13,15,20,.78);

}

html[data-theme="dark"] .cwv2{

  --bg:#0e0f15; --surface:#16171f; --surface-2:#1c1d27; --hover:#22232e;

  --border:#272836; --border-2:#363849;

  --ink:#eceef6; --ink-2:#c6c8d6; --ink-3:#9a9db0; --ink-4:#74778a;

  --accent:#b3a5ff; --accent-2:#c9bfff; --accent-fill:#6a4cff; --accent-bg:#221d3f; --accent-line:#3a3270; --accent-soft:#221d3f;

  --ok:#6fd99b; --ok-bg:#10281b; --ok-fill:#2fae69; --ok-line:#1d4630;

  --warn:#f2c26b; --warn-bg:#2c2110; --warn-fill:#e0a23b; --warn-line:#4d3a17;

  --bad:#ff8a80; --bad-bg:#2f1514; --bad-fill:#f04438; --bad-line:#5a2622;

  --info:#8fc1ff; --info-bg:#10223d; --info-fill:#4a8ef0; --info-line:#1f3e6b;

  --mut:#c6c8d6; --mut-bg:#22232e; --mut-line:#363849;

  --topbar:#08080c; --topbar-2:#1a1b24; --topbar-3:#252633;

  --side:#12131a; --side-line:#232430; --side-hover:#1b1c26; --side-on:#221d3f;

  --e2:0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.5);

  --e3:0 18px 48px rgba(0,0,0,.7);

  --scrim:rgba(0,0,0,.6);

}



.cwv2 *{box-sizing:border-box;margin:0;padding:0}

.cwv2{-webkit-text-size-adjust:100%}

.cwv2{font-family:'Plus Jakarta Sans',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:14px;line-height:1.5;

  color:var(--ink);background:var(--bg);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

.cwv2 a{color:var(--accent);text-decoration:none} .cwv2 a:hover{text-decoration:underline}

.cwv2 button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}

.cwv2 input, .cwv2 select, .cwv2 textarea{font:inherit;color:inherit}

.cwv2 img{max-width:100%}

.cwv2 h1, .cwv2 h2, .cwv2 h3, .cwv2 h4{font-weight:650;letter-spacing:-.01em;line-height:1.3}

.cwv2 strong, .cwv2 b{font-weight:650}

.cwv2 :focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px;border-radius:6px}

.cwv2 .nw{white-space:nowrap} .cwv2 .mut{color:var(--ink-3)} .cwv2 .sm-t{font-size:12.5px} .cwv2 .r{text-align:right}

.cwv2 .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.cwv2 .skip{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--accent-fill);color:var(--on-accent);padding:8px 14px;border-radius:8px;font-weight:600}

.cwv2 .skip:focus{left:8px}



/* ----------------------------------------------------------------- top bar
   Same surface as the sidebar. The logo sits in a block the width of the
   sidebar, so its right border continues the sidebar's and the two read as
   one light frame around the page. */.cwv2 .topbar{position:fixed;top:0;left:0;right:0;height:64px;background:var(--side);color:var(--ink);
  border-bottom:1px solid var(--side-line);display:flex;align-items:center;padding:0 16px 0 0;z-index:40}
.cwv2 .tb-brand{flex:0 0 252px;display:flex;align-items:center;height:100%;padding:0 16px 0 20px;border-right:1px solid var(--side-line)}
.cwv2 .tb-brand img{height:40px;width:auto;display:block}
html[data-theme="dark"] .cwv2 .tb-brand img{filter:invert(.9) hue-rotate(180deg)}
.cwv2 .tb-btn.burger{display:none}
.cwv2 .crumbs{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;min-width:0;flex:0 1 auto;padding-left:20px}
.cwv2 .crumbs a{color:var(--ink-3);flex:0 0 auto} .cwv2 .crumbs a:hover{color:var(--ink);text-decoration:none}
.cwv2 .crumbs b{color:var(--ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cwv2 .crumbs .sep{color:var(--ink-4)}
.cwv2 .tb-search{flex:0 1 460px;height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:9px;margin:0 auto;
  background:var(--surface);border:1px solid var(--border-2);color:var(--ink-3);text-align:left;min-width:0;font-size:13.5px}
.cwv2 .tb-search:hover{border-color:var(--ink-4);color:var(--ink-2)}
.cwv2 .tb-search svg{color:var(--ink-4);flex:0 0 auto}
.cwv2 .tb-search span{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.cwv2 .kbd{flex:0 0 auto;font-size:11px;font-weight:600;padding:0 5px;border-radius:4px;border:1px solid var(--border-2);color:var(--ink-4);line-height:16px}
.cwv2 .tb-right{display:flex;align-items:center;gap:4px;flex:0 0 auto;justify-content:flex-end}
.cwv2 .tb-btn{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);position:relative;flex:0 0 auto}
.cwv2 .tb-btn:hover{background:var(--surface-2);color:var(--ink)}
.cwv2 .tb-btn .nd{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--warn-fill);border:1.5px solid var(--side)}
.cwv2 .tb-user{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px 0 5px;border-radius:9px;color:var(--ink);font-weight:600;font-size:13.5px;margin-left:4px}
.cwv2 .tb-user:hover{background:var(--surface-2)} .cwv2 .tb-user .who{white-space:nowrap}
.cwv2 .av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--accent-fill);color:var(--on-accent);font-weight:650;font-size:11px;width:26px;height:26px;flex:0 0 auto}

/* ---------------------------------------------------------------- sidebar */.cwv2 .side{position:fixed;top:64px;bottom:0;left:0;width:252px;background:var(--side);border-right:1px solid var(--side-line);

  display:flex;flex-direction:column;padding:18px 12px 12px;overflow-y:auto;z-index:30}

.cwv2 .side>*{flex-shrink:0}



.cwv2 .newbtn{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:9px;border:1px solid var(--border-2);

  background:var(--surface);color:var(--ink);font-weight:600;font-size:13.5px;width:100%;margin-bottom:14px}

.cwv2 .newbtn svg{color:var(--accent)} .cwv2 .newbtn:hover{background:var(--surface-2)}

.cwv2 .nav{display:flex;flex-direction:column;gap:1px}

.cwv2 .nav-2{margin-top:14px;padding-top:14px;border-top:1px solid var(--side-line)}

.cwv2 .nav a, .cwv2 .navitem{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:8px;color:var(--ink-2);

  font-weight:500;font-size:14px;width:100%;text-align:left;min-width:0}

.cwv2 .nav a:hover, .cwv2 .navitem:hover{background:var(--side-hover);color:var(--ink);text-decoration:none}

.cwv2 .nav a svg, .cwv2 .navitem svg{flex:0 0 auto;color:var(--ink-4)}

.cwv2 .nav a.on{background:var(--side-on);color:var(--accent-2);font-weight:600} .cwv2 .nav a.on svg{color:var(--accent)}

.cwv2 .nav .lbl, .cwv2 .navitem .lbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cwv2 .navcount{font-size:12px;font-weight:600;color:var(--ink-4);flex:0 0 auto}

.cwv2 .nav a.on .navcount{color:var(--accent)}



/* The open website: a switcher you can change websites from, then its

   sections. Sections carry their own small icon so the list scans. */.cwv2 .siteblock{position:relative;margin:6px 0 8px 10px;padding-left:10px;border-left:1px solid var(--side-line)}

.cwv2 .sw-site{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;border-radius:9px;border:1px solid var(--border);

  background:var(--surface);text-align:left;margin-bottom:4px}

.cwv2 .sw-site:hover{border-color:var(--border-2)}

.cwv2 .sw-site>svg{color:var(--ink-4);flex:0 0 auto;margin-left:auto}

.cwv2 .sw-tx{min-width:0;flex:1 1 auto;display:flex;flex-direction:column}

.cwv2 .sw-n{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3}

.cwv2 .sw-m{font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:5px;line-height:1.3}

.cwv2 .sw-menu{position:absolute;left:10px;right:0;top:52px;background:var(--surface);border:1px solid var(--border);border-radius:10px;

  box-shadow:var(--e2);z-index:5;padding:6px;max-height:320px;overflow:auto}

.cwv2 .sw-menu a{display:flex;align-items:center;gap:9px;height:34px;padding:0 8px;border-radius:7px;color:var(--ink-2);font-size:13px}

.cwv2 .sw-menu a:hover{background:var(--side-hover);text-decoration:none}

.cwv2 .sw-menu a.on{color:var(--ink);font-weight:600}

.cwv2 .sw-menu .lbl{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cwv2 .sw-menu .sw-all{border-top:1px solid var(--border);border-radius:0 0 7px 7px;margin-top:4px;color:var(--accent);font-weight:600}









.cwv2 .side-foot{margin-top:auto;padding-top:14px;display:flex;flex-direction:column;gap:8px}

.cwv2 .usage{border:1px solid var(--border);border-radius:10px;padding:11px 12px;background:var(--surface-2)}

.cwv2 .usage .u-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}

.cwv2 .usage .u-h b{font-weight:600} .cwv2 .usage .u-h a{font-size:12.5px;font-weight:600}

.cwv2 .usage p{font-size:12.5px;color:var(--ink-3);margin:2px 0 8px}



.cwv2 .main{margin-left:252px;padding:92px 40px 72px;min-height:100vh}

.cwv2 .wrap{max-width:1180px;margin:0 auto;min-width:0}

.cwv2 .scrim-nav{display:none}

@media (max-width:1023px){

  .cwv2 .tb-btn.burger{display:flex}
  .cwv2 .tb-brand{flex:0 0 auto;padding:0 10px;border-right:0}

  .cwv2 .side{transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--e3)}

  .cwv2 body.nav-open .side{transform:none}

  .cwv2 body.nav-open .scrim-nav{display:block;position:fixed;inset:64px 0 0 0;background:var(--scrim);z-index:25}

  .cwv2 .main{margin-left:0;padding:84px 20px 56px}

  .cwv2 .crumbs{display:none}

}

@media (max-width:1180px){
  .cwv2 .crumbs{display:none}
}
@media (max-width:899px){.cwv2 .tb-user .who{display:none}.cwv2 .tb-user{padding-right:4px}}

@media (max-width:759px){

  .cwv2 .tb-search{flex:0 0 auto;width:34px;padding:0;justify-content:center}

  .cwv2 .tb-search span, .cwv2 .tb-search .kbd{display:none}

  .cwv2 .main{padding:80px 16px 48px}

}



/* ------------------------------------------------------------ page head */.cwv2 .ph{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:24px;min-width:0}

.cwv2 .ph .tt{min-width:0;flex:1 1 300px}

.cwv2 .ph .up{display:inline-flex;align-items:center;gap:2px;font-size:13px;font-weight:600;color:var(--ink-3);margin-bottom:4px}

.cwv2 .ph .up:hover{color:var(--ink);text-decoration:none}

.cwv2 .ph h1{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:32px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;overflow-wrap:anywhere}

.cwv2 .ph .sub{color:var(--ink-3);font-size:14px;margin-top:3px;display:flex;align-items:center;gap:4px 12px;flex-wrap:wrap;overflow-wrap:anywhere}

.cwv2 .ph .sub{gap:3px 9px} .cwv2 .ph .sub>*{display:inline-flex;align-items:center}

.cwv2 .ph .sub>*:not(:first-child)::before{content:"·";color:var(--ink-4);margin-right:9px}

.cwv2 .ph .acts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.cwv2 .ph>.thumb{width:52px;height:52px;border-radius:12px;font-size:17px}

.cwv2 .ph-sec{margin:0 0 14px;align-items:center}

.cwv2 .ph-sec h2{font-size:16px;font-weight:650}

.cwv2 .ph-sec .sub{font-size:13.5px}

@media (max-width:559px){.cwv2 .ph .acts{margin-left:0;width:100%}.cwv2 .ph .acts .btn{flex:1 1 auto}}

.cwv2 .sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:36px 0 14px;flex-wrap:wrap}

.cwv2 .sec-h:first-child{margin-top:0}

.cwv2 .sec-h h2{font-size:16px;font-weight:650}

.cwv2 .sec-h a{font-size:13.5px;font-weight:600}

.cwv2 .sect-h{font-size:15px;font-weight:650;margin:24px 0 12px}



/* -------------------------------------------------------------- tab bar
   A website's sections sit above its content, not in the sidebar. */.cwv2 .tabbar{display:flex;gap:2px;border-bottom:1px solid var(--border);margin:0 0 24px;overflow-x:auto;scrollbar-width:none}
.cwv2 .tabbar::-webkit-scrollbar{display:none}
.cwv2 .tabbar a{display:inline-flex;align-items:center;height:42px;padding:0 14px;font-size:14px;font-weight:500;
  color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;flex:0 0 auto}
.cwv2 .tabbar a:hover{color:var(--ink);text-decoration:none}
.cwv2 .tabbar a.on{color:var(--accent);border-bottom-color:var(--accent-fill);font-weight:650}
.cwv2 .ph + .tabbar{margin-top:-4px}

/* ---------------------------------------------------------------- cards */.cwv2 .card{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-bottom:20px;min-width:0}

.cwv2 .card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px 0;flex-wrap:wrap}

.cwv2 .card-h h2{font-size:15px;font-weight:650;min-width:0}

.cwv2 .card-b{padding:16px 20px;min-width:0} .cwv2 .card-h+.card-b{padding-top:12px}

.cwv2 .card-b.flush{padding:0} .cwv2 .card-h+.card-b.flush{padding-top:10px}

.cwv2 .card-f{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;align-items:center}

.cwv2 .pad{padding:20px}

.cwv2 .grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:0 20px;align-items:stretch}
/* Side-by-side cards finish on the same line: the taller one sets the row
   height and the shorter one stretches to meet it, whether the column is a
   card on its own or a stack of them. */.cwv2 .grid2>.card{margin-bottom:20px}
.cwv2 .grid2>div{display:flex;flex-direction:column;min-width:0}
.cwv2 .grid2>div>.card:last-child{flex:1 1 auto}
/* ...except a short helper panel beside a long form. It is guidance, not the
   form's peer, so stretching it to match only makes a tall empty box. */.cwv2 .grid2.aside{align-items:start}
.cwv2 .grid2.aside>div>.card:last-child{flex:0 0 auto}

.cwv2 .grid2.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}

@media (max-width:1100px){.cwv2 .grid2, .cwv2 .grid2.even{grid-template-columns:minmax(0,1fr)}}



/* One strip of figures, divided by hairlines. Never a row of separate

   cards with an icon each. */.cwv2 .metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--border);border:1px solid var(--border);

  border-radius:12px;overflow:hidden;margin-bottom:20px}

.cwv2 .metrics.three{grid-template-columns:repeat(3,minmax(0,1fr))}


.cwv2 .metric{background:var(--surface);padding:16px 20px;min-width:0}

.cwv2 .metric .ml{font-size:13px;color:var(--ink-3);font-weight:500}

.cwv2 .metric .mv{font-size:24px;font-weight:650;letter-spacing:-.02em;line-height:32px;margin-top:2px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;overflow-wrap:anywhere}

.cwv2 .metric .mv small{font-size:14px;font-weight:500;color:var(--ink-3);letter-spacing:0}

.cwv2 .metric .mf{font-size:12.5px;color:var(--ink-3);margin-top:2px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}

@media (max-width:899px){.cwv2 .metrics, .cwv2 .metrics.three{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (max-width:479px){.cwv2 .metrics, .cwv2 .metrics.three, .cwv2 .metrics.two{grid-template-columns:minmax(0,1fr)}}

.cwv2 .delta{display:inline-flex;align-items:center;gap:2px;font-size:12.5px;font-weight:600}

.cwv2 .delta.up{color:var(--ok)} .cwv2 .delta.down{color:var(--bad)} .cwv2 .delta.flat{color:var(--ink-3)}






/* -------------------------------------------------------------- buttons */.cwv2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:9px;font-size:13.5px;font-weight:600;

  background:var(--surface);color:var(--ink);border:1px solid var(--border-2);white-space:nowrap;text-decoration:none;transition:background .12s,border-color .12s;flex:0 0 auto}

.cwv2 .btn:hover{background:var(--surface-2);text-decoration:none;color:var(--ink)} .cwv2 .btn:active{background:var(--hover)}

.cwv2 .btn.pri{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent)} .cwv2 .btn.pri:hover{background:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent)}

.cwv2 .btn.bad{background:var(--bad-fill);border-color:var(--bad-fill);color:var(--on-accent)} .cwv2 .btn.bad:hover{filter:brightness(.92);color:var(--on-accent)}

.cwv2 .btn.plain{background:none;border-color:transparent;color:var(--accent);padding:0 8px} .cwv2 .btn.plain:hover{background:var(--accent-bg);color:var(--accent-2)}

.cwv2 .btn.plain.bad{color:var(--bad)} .cwv2 .btn.plain.bad:hover{background:var(--bad-bg);filter:none}

.cwv2 .btn.sm{height:30px;padding:0 11px;font-size:13px;border-radius:8px} .cwv2 .btn.icon{width:36px;padding:0} .cwv2 .btn.icon.sm{width:30px}

.cwv2 .btn.lnk{background:none;border:0;color:var(--accent);padding:0;height:auto;min-height:20px;white-space:normal;text-align:left;overflow-wrap:anywhere;justify-content:flex-start;font-weight:600}

.cwv2 .btn.lnk:hover{text-decoration:underline;background:none}

.cwv2 .btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}

.cwv2 .btn.ok{color:var(--ok)} .cwv2 .btn.full{width:100%}

.cwv2 .btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.cwv2 .segctl, .cwv2 .tabs{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:9px;background:var(--surface-2);border:1px solid var(--border);flex:0 0 auto;max-width:100%;overflow-x:auto;scrollbar-width:none}

.cwv2 .segctl button, .cwv2 .tabs button{height:28px;padding:0 11px;border-radius:7px;font-size:13px;font-weight:600;color:var(--ink-3);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}

.cwv2 .segctl button:hover, .cwv2 .tabs button:hover{color:var(--ink)}

.cwv2 .segctl button.on, .cwv2 .tabs button.on{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(20,21,31,.08),0 0 0 1px var(--border)}

.cwv2 .segctl .cnt{font-size:12px;color:var(--ink-4);font-weight:600} .cwv2 .segctl button.on .cnt{color:var(--ink-3)}

.cwv2 .segctl.icons button{width:32px;padding:0;justify-content:center}



/* ---------------------------------------------------------------- status */.cwv2 .badge, .cwv2 .pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;font-size:12px;font-weight:600;line-height:22px;white-space:nowrap;background:var(--mut-bg);color:var(--mut);vertical-align:middle}

.cwv2 .badge .d{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}

.cwv2 .badge.ok, .cwv2 .pill.ok{background:var(--ok-bg);color:var(--ok)} .cwv2 .badge.warn, .cwv2 .pill.warn{background:var(--warn-bg);color:var(--warn)}

.cwv2 .badge.bad, .cwv2 .pill.bad{background:var(--bad-bg);color:var(--bad)} .cwv2 .badge.accent, .cwv2 .pill.accent{background:var(--accent-bg);color:var(--accent)}

.cwv2 .badge.info{background:var(--info-bg);color:var(--info)} .cwv2 .badge.mut, .cwv2 .pill.mut{background:var(--mut-bg);color:var(--mut)}

.cwv2 .dotc{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok-fill);flex:0 0 auto}

.cwv2 .dotc.warn{background:var(--warn-fill)} .cwv2 .dotc.bad{background:var(--bad-fill)} .cwv2 .dotc.mut{background:var(--ink-4)} .cwv2 .dotc.accent{background:var(--accent-fill)}

.cwv2 .stx{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:500;color:var(--ink-2);white-space:nowrap}

.cwv2 .stx.warn{color:var(--warn)} .cwv2 .stx.bad{color:var(--bad)}



/* --------------------------------------------------------------- notices

   White, with a tinted edge and a small tinted icon. The colour says how

   serious it is; the box does not have to shout. */.cwv2 .banner{display:flex;gap:12px;padding:14px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--border);margin-bottom:20px;align-items:flex-start;min-width:0;flex-wrap:wrap}

.cwv2 .banner.ok{border-color:var(--ok-line)} .cwv2 .banner.warn{border-color:var(--warn-line)} .cwv2 .banner.bad{border-color:var(--bad-line)} .cwv2 .banner.info{border-color:var(--info-line)} .cwv2 .banner.accent{border-color:var(--accent-line)}

.cwv2 .banner .bi{flex:0 0 auto;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--mut-bg);color:var(--ink-2)}

.cwv2 .banner.ok .bi{background:var(--ok-bg);color:var(--ok)} .cwv2 .banner.warn .bi{background:var(--warn-bg);color:var(--warn)} .cwv2 .banner.bad .bi{background:var(--bad-bg);color:var(--bad)}

.cwv2 .banner.info .bi{background:var(--info-bg);color:var(--info)} .cwv2 .banner.accent .bi{background:var(--accent-bg);color:var(--accent)}

.cwv2 .banner .bc{min-width:0;flex:1 1 320px;padding-top:4px}

.cwv2 .banner .bt{font-weight:600;color:var(--ink);overflow-wrap:anywhere} .cwv2 .banner .bb{color:var(--ink-3);margin-top:2px;line-height:1.5;font-size:13.5px}

.cwv2 .banner .ba{display:flex;gap:8px;flex-wrap:wrap;align-items:center;align-self:center;margin-left:auto}

.cwv2 .banner.in-card{margin:0 0 14px}

@media (max-width:640px){.cwv2 .banner .ba{margin-left:42px}}



/* ---------------------------------------------------------------- tables */.cwv2 .tblwrap{overflow-x:auto;min-width:0;position:relative}

@media (min-width:760px) and (max-width:1199px){.cwv2 .hide-md{display:none}}

.cwv2 .tbl{width:100%;border-collapse:collapse;font-size:14px}

.cwv2 .tbl th{font-size:12.5px;font-weight:500;color:var(--ink-3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);white-space:nowrap;background:none}

.cwv2 .tbl th:first-child, .cwv2 .tbl td:first-child{padding-left:20px} .cwv2 .tbl th:last-child, .cwv2 .tbl td:last-child{padding-right:20px}

.cwv2 .tbl td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;min-width:0}

.cwv2 .tbl tbody tr:last-child td{border-bottom:0}

.cwv2 .tbl tr.rowlink{cursor:pointer} .cwv2 .tbl tr.rowlink:hover td{background:var(--surface-2)}

.cwv2 .tbl tr.rowlink:focus-visible{outline:2px solid var(--accent-fill);outline-offset:-2px}

.cwv2 .tbl th.r, .cwv2 .tbl td.r{text-align:right}

.cwv2 .tbl th[data-a="sort"]{cursor:pointer;user-select:none} .cwv2 .tbl th[data-a="sort"]:hover{color:var(--ink)}

.cwv2 .tbl th .si{display:inline-flex;vertical-align:middle;margin-left:2px;color:var(--ink-4)}

.cwv2 .tbl .ck{width:44px;padding-right:0}

.cwv2 .tbl .chev{color:var(--ink-4);display:inline-flex}

.cwv2 .cb{width:16px;height:16px;accent-color:var(--accent-fill);cursor:pointer;vertical-align:middle;margin:0}

.cwv2 .toolbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}

.cwv2 .toolbar .search{margin-left:auto}

.cwv2 .idx-tabs{display:flex;align-items:center;gap:2px;padding:10px 14px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}

.cwv2 .idx-tabs::-webkit-scrollbar{display:none}

.cwv2 .idx-tabs button{height:30px;padding:0 11px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;display:flex;gap:6px;align-items:center;flex:0 0 auto}

.cwv2 .idx-tabs button:hover{color:var(--ink);background:var(--surface-2)}

.cwv2 .idx-tabs button.on{background:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border)}

.cwv2 .idx-tabs .cnt{font-size:12px;color:var(--ink-4);font-weight:600}

.cwv2 .idx-tools{margin-left:auto;display:flex;gap:6px;align-items:center;flex:0 0 auto}

.cwv2 .search{position:relative;display:flex;align-items:center;gap:7px;height:34px;padding:0 10px;border-radius:9px;border:1px solid var(--border-2);background:var(--surface);min-width:0}

.cwv2 .search:focus-within{border-color:var(--accent-fill);box-shadow:0 0 0 3px var(--accent-bg)}

.cwv2 .search input{border:0;outline:none;background:none;width:200px;font-size:13.5px;min-width:0;color:var(--ink)}

.cwv2 .search input::placeholder{color:var(--ink-4)}

.cwv2 .search svg{color:var(--ink-4);flex:0 0 auto}

.cwv2 .site{display:flex;align-items:center;gap:12px;min-width:0}

.cwv2 .thumb{width:40px;height:40px;border-radius:9px;object-fit:cover;object-position:top center;background:var(--accent-bg);color:var(--accent);

  border:0;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;overflow:hidden}

.cwv2 .thumb.sm{width:30px;height:30px;border-radius:7px;font-size:10.5px} .cwv2 .thumb.xs{width:20px;height:20px;border-radius:5px;font-size:8.5px}

.cwv2 .site .st{min-width:0} .cwv2 .site .nm{font-weight:600;color:var(--ink);overflow-wrap:anywhere;line-height:1.3}

.cwv2 .site .hs{font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cwv2 .meter{height:5px;border-radius:3px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);overflow:hidden;min-width:48px;flex:1 1 auto}

.cwv2 .meter i{display:block;height:100%;background:var(--ink-3);border-radius:3px;animation:meterfill .6s ease-out}

.cwv2 .meter.warn i{background:var(--warn-fill)} .cwv2 .meter.bad i{background:var(--bad-fill)} .cwv2 .meter.ok i{background:var(--ok-fill)} .cwv2 .meter.acc i{background:var(--accent-fill)}

.cwv2 .mrow{display:flex;align-items:center;gap:8px;min-width:0} .cwv2 .mrow .mt{font-size:13px;color:var(--ink-3);white-space:nowrap}

.cwv2 .spark{display:block;flex:0 0 auto}

.cwv2 .vis{display:inline-flex;align-items:center;gap:10px;justify-content:flex-end}

.cwv2 .bulk{display:flex;align-items:center;gap:8px;padding:8px 16px 8px 20px;border-bottom:1px solid var(--border);background:var(--accent-bg);font-weight:600;flex-wrap:wrap}

.cwv2 .tfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 20px;border-top:1px solid var(--border);color:var(--ink-3);font-size:13px;flex-wrap:wrap}

@media (max-width:759px){

  .cwv2 .tbl.cards, .cwv2 .tbl.cards tbody{display:block}

  .cwv2 .tbl.cards thead{display:none}

  .cwv2 .tbl.cards tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 12px;padding:14px 16px;border-bottom:1px solid var(--border)}

  .cwv2 .tbl.cards tbody tr:last-child{border-bottom:0}

  .cwv2 .tbl.cards td{display:block;padding:0;border:0;min-width:0}

  .cwv2 .tbl.cards td[data-l]::before{content:attr(data-l);display:block;font-size:12px;color:var(--ink-4);font-weight:500;margin-bottom:1px}

  .cwv2 .tbl.cards td.r{text-align:left} .cwv2 .tbl.cards .ck{display:none}

  .cwv2 .tbl.cards td.full{grid-column:1/-1}

  .cwv2 .tbl.cards tr.rowlink:hover td{background:none}

  .cwv2 .tbl.cards .vis{justify-content:flex-start}

  .cwv2 .search input{width:130px}

  .cwv2 .toolbar .search{margin-left:0;flex:1 1 100%}

}



/* --------------------------------------------------- website cards (grid) */.cwv2 .sitegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}

.cwv2 .scard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:12px;min-width:0;transition:border-color .15s}
.cwv2 .sc-top{display:flex;align-items:center;gap:8px 12px;padding:16px 16px 0;min-width:0;flex-wrap:wrap}
.cwv2 .sc-id{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 170px;color:inherit}
.cwv2 .sc-id:hover{text-decoration:none} .cwv2 .sc-id:hover b{text-decoration:underline}
.cwv2 .sc-mono{width:44px;height:44px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;background:var(--accent-bg);color:var(--accent);font-weight:700;font-size:15px}
.cwv2 .sc-n{display:flex;flex-direction:column;min-width:0}
.cwv2 .sc-n b{font-weight:600;font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cwv2 .sc-d{font-size:13px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cwv2 .sc-stats{display:flex;flex-direction:column;padding:14px 16px 0}
.cwv2 .sc-stats>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--border)}
.cwv2 .sc-stats>div:first-child{border-top:0;padding-top:0}
.cwv2 .sc-stats dt{font-size:13px;color:var(--ink-3)}
.cwv2 .sc-stats dd{font-size:13.5px;font-weight:500;display:flex;align-items:center;gap:8px;min-width:0}
.cwv2 .sc-act{display:flex;gap:8px;padding:14px 16px 16px;margin-top:auto}
.cwv2 .sc-act .btn{flex:1 1 auto}

.cwv2 .scard:hover{border-color:var(--border-2)}








.cwv2 .card .sitegrid{padding:20px}



/* --------------------------------------------- the website overview page */.cwv2 .bz-url{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:6px;background:var(--surface);border:1px solid var(--border);

  font-size:12.5px;color:var(--ink-3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}




.cwv2 .bz-empty{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:24px;color:var(--ink-3);

  background:repeating-linear-gradient(135deg,var(--surface) 0 12px,var(--surface-2) 12px 24px)}


.cwv2 .facts{display:flex;flex-direction:column}

.cwv2 .facts>div{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:11px 0;border-top:1px solid var(--border);min-width:0}

.cwv2 .facts>div:first-child{border-top:0;padding-top:0}

.cwv2 .facts dt{color:var(--ink-3);font-size:13.5px;flex:0 0 auto}

.cwv2 .facts dd{font-weight:500;min-width:0;text-align:right;overflow-wrap:anywhere;display:flex;align-items:center;gap:8px;justify-content:flex-end;flex-wrap:wrap}

.cwv2 .facts dd .meter{width:80px;flex:0 0 80px}


.cwv2 .tr-n{font-size:28px;font-weight:700;letter-spacing:-.025em;line-height:1.15}

.cwv2 .tr-n span{font-size:15px;font-weight:500;color:var(--ink-3);letter-spacing:0}




.cwv2 .checks{list-style:none}

.cwv2 .checks li{display:flex;align-items:center;gap:12px;padding:13px 20px;border-top:1px solid var(--border);min-width:0}

.cwv2 .checks li:first-child{border-top:0}

.cwv2 .ck-i{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto;background:var(--ok-bg);color:var(--ok)}

.cwv2 .ck-i.warn{background:var(--warn-bg);color:var(--warn)} .cwv2 .ck-i.bad{background:var(--bad-bg);color:var(--bad)} .cwv2 .ck-i.mut{background:var(--mut-bg);color:var(--ink-3)} .cwv2 .ck-i.accent{background:var(--accent-bg);color:var(--accent)}

.cwv2 .ck-t{flex:1 1 auto;min-width:0} .cwv2 .ck-t b{display:block;font-weight:600;font-size:13.5px} .cwv2 .ck-t span{display:block;color:var(--ink-3);font-size:13px;overflow-wrap:anywhere}

.cwv2 .feed{list-style:none}

.cwv2 .feed li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:11px 20px;border-top:1px solid var(--border)}

.cwv2 .feed li:first-child{border-top:0}

.cwv2 .f-at{font-size:12.5px;color:var(--ink-4);padding-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.cwv2 .f-tx b{display:block;font-weight:500;font-size:13.5px;overflow-wrap:anywhere} .cwv2 .f-tx span{display:block;font-size:12.5px;color:var(--ink-3)}



/* Trial and read-only: where you are between two dates, said in words and

   drawn as a line, instead of a coloured box. */.cwv2 .life{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:20px}

.cwv2 .life.warn{border-color:var(--warn-line)} .cwv2 .life.bad{border-color:var(--bad-line)}

.cwv2 .life-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}

.cwv2 .life-h h2{font-size:18px;font-weight:650;letter-spacing:-.015em}

.cwv2 .life-h h2 em{font-style:normal} .cwv2 .life.warn h2 em{color:var(--warn)} .cwv2 .life.bad h2 em{color:var(--bad)}

.cwv2 .life-h p{color:var(--ink-3);margin-top:4px;max-width:620px;line-height:1.55}

.cwv2 .track{position:relative;height:6px;border-radius:3px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);margin:30px 0 10px}

.cwv2 .track i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--ink-3)}

.cwv2 .life.warn .track i{background:var(--warn-fill)} .cwv2 .life.bad .track i{background:var(--bad-fill)}

.cwv2 .track b{position:absolute;top:-24px;transform:translateX(-50%);font-size:11.5px;font-weight:650;color:var(--ink);white-space:nowrap}

.cwv2 .track b::after{content:"";position:absolute;left:50%;top:18px;width:2px;height:12px;margin-left:-1px;background:var(--ink)}

.cwv2 .track-l{display:flex;justify-content:space-between;gap:12px;font-size:12.5px;color:var(--ink-3)}

.cwv2 .track-l span:last-child{text-align:right}



/* ---------------------------------------------------------- attention list */.cwv2 .attn{list-style:none}

.cwv2 .attn li{display:flex;align-items:center;gap:16px;padding:14px 20px;border-top:1px solid var(--border)}
.cwv2 .attn-site{flex:1 1 auto}

.cwv2 .attn li:first-child{border-top:0}

.cwv2 .attn-site{display:flex;align-items:center;gap:12px;color:inherit;min-width:0}

.cwv2 .attn-site:hover{text-decoration:none} .cwv2 .attn-site:hover b{text-decoration:underline}

.cwv2 .attn-site>span{display:flex;flex-direction:column;min-width:0}

.cwv2 .attn-site b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.cwv2 .attn-what{font-size:13px;font-weight:600} .cwv2 .attn-what.warn{color:var(--warn)} .cwv2 .attn-what.bad{color:var(--bad)}






/* ----------------------------------------------------------------- forms */.cwv2 .field{margin-bottom:16px;min-width:0} .cwv2 .field:last-child{margin-bottom:0}

.cwv2 .field>label{display:block;font-weight:600;font-size:13.5px;margin-bottom:5px}

.cwv2 .in{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border-radius:9px;background:var(--surface);border:1px solid var(--border-2);min-width:0}

.cwv2 .in:focus-within{border-color:var(--accent-fill);box-shadow:0 0 0 3px var(--accent-bg)}

.cwv2 .in input, .cwv2 .in select{flex:1 1 auto;border:0;outline:none;background:none;min-width:0;font-size:14px;padding:8px 0;color:var(--ink)}

.cwv2 .in input::placeholder{color:var(--ink-4)}

.cwv2 .in .suffix, .cwv2 .in .prefix{color:var(--ink-3);white-space:nowrap;flex:0 0 auto}

.cwv2 .in:has(input[aria-invalid="true"]){border-color:var(--bad-fill);box-shadow:0 0 0 3px var(--bad-bg)}

.cwv2 .hint{font-size:12.5px;color:var(--ink-3);margin-top:5px;line-height:1.5} .cwv2 .err{font-size:12.5px;color:var(--bad);margin-top:5px;line-height:1.5}

.cwv2 textarea.ta{width:100%;min-height:100px;padding:9px 12px;border-radius:9px;border:1px solid var(--border-2);background:var(--surface);resize:vertical;outline:none;color:var(--ink);line-height:1.5}

.cwv2 textarea.ta:focus{border-color:var(--accent-fill);box-shadow:0 0 0 3px var(--accent-bg)}

.cwv2 .frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px} @media (max-width:559px){.cwv2 .frow{grid-template-columns:minmax(0,1fr)}}
/* A field in a ROW keeps its bottom margin. `.field:last-child` zeroes it, and
   the right-hand field of every row is a last child — so the Email field's
   hint ran straight into the next row's "Time zone" label with no air between
   them. Only the last row of a form ends flush. */
.cwv2 .frow > .field{margin-bottom:16px} .cwv2 .frow:last-child > .field{margin-bottom:0}
/* A sub-heading inside a flush card body carries the padding the body gave
   up, or it sits on the card's edge above an indented list. */
.cwv2 .card-b.flush > .sec-sub{margin:0;padding:14px 20px 4px;font-size:13.5px;font-weight:650;color:var(--ink)}

.cwv2 .chip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-2);border:1px solid var(--border-2);background:var(--surface);white-space:nowrap}

.cwv2 .chip:hover{background:var(--surface-2)} .cwv2 .chip.on{background:var(--ink);color:var(--surface);border-color:var(--ink)} .cwv2 .chip.sm{height:26px;padding:0 9px;font-size:12px}

.cwv2 .chips{display:flex;gap:6px;flex-wrap:wrap}

.cwv2 .sw{appearance:none;-webkit-appearance:none;width:34px;height:20px;border-radius:999px;background:var(--border-2);position:relative;cursor:pointer;flex:0 0 auto;transition:background .15s;margin:0}

.cwv2 .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2)}

.cwv2 .sw:checked{background:var(--accent-fill)} .cwv2 .sw:checked::after{transform:translateX(14px)}

.cwv2 .swrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border)} .cwv2 .swrow:first-child{border-top:0}

.cwv2 .swrow .st{flex:1 1 auto;min-width:0} .cwv2 .swrow .st b{display:block;font-weight:600} .cwv2 .swrow .st span{color:var(--ink-3);font-size:13px}

.cwv2 .kv{display:flex;justify-content:space-between;gap:12px;font-size:14px;align-items:baseline} .cwv2 .kv span{color:var(--ink-3)}

.cwv2 .dl{display:grid;grid-template-columns:minmax(120px,max-content) minmax(0,1fr);gap:10px 24px;font-size:14px}

.cwv2 .dl dt{color:var(--ink-3)} .cwv2 .dl dd{font-weight:500;min-width:0;overflow-wrap:anywhere}

.cwv2 .dl.v{grid-template-columns:minmax(0,1fr);gap:0} .cwv2 .dl.v dt{font-size:12.5px;margin-top:12px} .cwv2 .dl.v dt:first-child{margin-top:0} .cwv2 .dl.v dd{margin-top:1px}

.cwv2 .tfields{display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,1fr);gap:6px 16px;font-size:13px}

.cwv2 .tfields dt{color:var(--ink-3)} .cwv2 .tfields dd{min-width:0;overflow-wrap:anywhere}

.cwv2 .list{list-style:none} .cwv2 .list li{display:flex;align-items:center;gap:12px;padding:12px 20px;border-top:1px solid var(--border);min-width:0}

.cwv2 .list li:first-child{border-top:0} .cwv2 .list .lt{flex:1 1 auto;min-width:0}
/* DIRECT CHILDREN ONLY. These two rules dress a row's title and its line of
   detail. Written as descendants they also reached every span INSIDE the
   title — and a "This device" badge is one, so display:block turned a pill
   into a full-width green bar on its own line under the device name. */
.cwv2 .list .lt > b{display:block;font-weight:600;overflow-wrap:anywhere}
.cwv2 .list .lt > span{color:var(--ink-3);font-size:13px;display:block;line-height:1.5}

.cwv2 .list li.link:hover{background:var(--surface-2);cursor:pointer}

.cwv2 .ic{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;flex:0 0 auto;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}

.cwv2 .ic.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent} .cwv2 .ic.warn{background:var(--warn-bg);color:var(--warn);border-color:transparent} .cwv2 .ic.bad{background:var(--bad-bg);color:var(--bad);border-color:transparent}

.cwv2 .ic.accent{background:var(--accent-bg);color:var(--accent);border-color:transparent} .cwv2 .ic.info{background:var(--info-bg);color:var(--info);border-color:transparent}

.cwv2 .empty{text-align:center;padding:44px 24px;max-width:460px;margin:0 auto}

.cwv2 .empty .ic{width:48px;height:48px;border-radius:12px;margin:0 auto 14px}

.cwv2 .empty h2{font-size:16px} .cwv2 .empty p{color:var(--ink-3);margin:6px 0 18px;line-height:1.55}

.cwv2 .hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:32px;align-items:center;padding:32px}

.cwv2 .hero h2{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.25} .cwv2 .hero p{color:var(--ink-2);margin:10px 0 20px;line-height:1.6;font-size:15px}

.cwv2 .hero img{border-radius:10px;border:1px solid var(--border);width:100%;object-fit:cover;object-position:top;display:block}

.cwv2 .hero.one{grid-template-columns:minmax(0,1fr)}
@media (max-width:759px){.cwv2 .hero{grid-template-columns:minmax(0,1fr);padding:22px}}

.cwv2 .task{display:flex;gap:12px;padding:12px 20px;border-top:1px solid var(--border);align-items:center}

.cwv2 .task .tk{width:20px;height:20px;border-radius:50%;border:1.5px dashed var(--border-2);flex:0 0 auto;display:flex;align-items:center;justify-content:center}

.cwv2 .task.done .tk{border:0;background:var(--ok-fill);color:#fff}

.cwv2 .task .tt{flex:1 1 auto;min-width:0} .cwv2 .task .tt b{display:block;font-weight:600} .cwv2 .task.done .tt b{color:var(--ink-3);text-decoration:line-through;font-weight:500}

.cwv2 .task .tt span{color:var(--ink-3);font-size:13px;line-height:1.5;display:block}

.cwv2 .prog{height:5px;border-radius:3px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);overflow:hidden;flex:1 1 120px;max-width:200px}

.cwv2 .prog i{display:block;height:100%;background:var(--ok-fill);border-radius:3px}



/* ------------------------------------------------------- plans / wizard */.cwv2 .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}

@media (max-width:899px){.cwv2 .plans{grid-template-columns:minmax(0,1fr)}}

.cwv2 .plan{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0;position:relative}

.cwv2 .plan.cur{border-color:var(--accent-fill);box-shadow:0 0 0 1px var(--accent-fill)}

.cwv2 .plan .pn{font-size:15px;font-weight:650;display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.cwv2 .plan .price{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1} .cwv2 .plan .price small{font-size:14px;font-weight:500;color:var(--ink-3);letter-spacing:0}

.cwv2 .plan ul{list-style:none;display:grid;gap:7px;margin:4px 0 8px} .cwv2 .plan li{display:flex;gap:8px;align-items:flex-start;color:var(--ink-2);line-height:1.45;font-size:13.5px} .cwv2 .plan li svg{flex:0 0 auto;color:var(--ok-fill);margin-top:2px}

.cwv2 .plan .btn{margin-top:auto}

.cwv2 .stepper{display:inline-flex;align-items:center;border:1px solid var(--border-2);border-radius:8px;overflow:hidden}

.cwv2 .stepper button{width:30px;height:30px;font-size:16px;font-weight:600} .cwv2 .stepper button:hover{background:var(--surface-2)} .cwv2 .stepper b{min-width:36px;text-align:center;font-weight:650}

.cwv2 .steps{display:flex;gap:6px;align-items:center;justify-content:flex-start;margin-bottom:22px;flex-wrap:wrap;list-style:none}

.cwv2 .step{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink-3)} .cwv2 .step.on{color:var(--ink)}

.cwv2 .step .n{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;background:var(--surface);border:1px solid var(--border-2);flex:0 0 auto}

.cwv2 .step.on .n{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)} .cwv2 .step.done .n{background:var(--ok-fill);color:#fff;border-color:var(--ok-fill)}

.cwv2 .steps .sl{width:28px;height:1px;background:var(--border-2);margin:0 4px;list-style:none}

.cwv2 .tplgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}

.cwv2 .tpl{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s}

.cwv2 .tpl:hover{border-color:var(--border-2)}

.cwv2 .tpl img, .cwv2 .tpl .noshot{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;display:block;background:var(--surface-2);border-bottom:1px solid var(--border)}

.cwv2 .tpl .tb{padding:13px 16px 16px;display:flex;flex-direction:column;gap:3px;flex:1 1 auto}

.cwv2 .tpl .tb b{font-weight:650} .cwv2 .tpl .tb span{color:var(--ink-3);font-size:13px;line-height:1.5}

.cwv2 .tpl .tb .btnrow{margin-top:auto;padding-top:12px}

.cwv2 .tpl.on{border-color:var(--accent-fill);box-shadow:0 0 0 1px var(--accent-fill)}

.cwv2 .startgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.cwv2 .startgrid .card{margin-bottom:0;height:100%}
.cwv2 .blank-opt .card-b{display:flex;align-items:center;gap:14px;flex-wrap:wrap;height:100%}

.cwv2 .blank-opt.on{border-color:var(--accent-fill);box-shadow:0 0 0 1px var(--accent-fill)}

.cwv2 .blank-ic{width:46px;height:46px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--ink-3);background:var(--surface-2);border:1.5px dashed var(--border-2)}

.cwv2 .blank-tx{flex:1 1 260px;min-width:0} .cwv2 .blank-tx h2{font-size:15px;font-weight:650} .cwv2 .blank-tx p{color:var(--ink-3);margin-top:2px;line-height:1.5}

.cwv2 .blank-shot{aspect-ratio:16/10;border-radius:8px;border:1.5px dashed var(--border-2);background:var(--surface-2);color:var(--ink-3);

  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:12.5px;font-weight:600}



/* ------------------------------------------------------ support thread */.cwv2 .msg{display:flex;gap:10px;margin-bottom:16px;align-items:flex-start;min-width:0} .cwv2 .msg.me{flex-direction:row-reverse}

.cwv2 .bub{max-width:min(78%,560px);background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:11px 14px;line-height:1.55;min-width:0;overflow-wrap:anywhere}

.cwv2 .msg.me .bub{background:var(--accent-bg);border-color:var(--accent-line)}

.cwv2 .bub .bm{font-size:12.5px;color:var(--ink-3);margin-bottom:3px} .cwv2 .bub .bm b{color:var(--ink);font-weight:650}

.cwv2 .files{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

.cwv2 .file{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--surface);border:1px solid var(--border-2);font-size:12.5px;font-weight:600;max-width:100%}

.cwv2 .file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cwv2 .file small{color:var(--ink-3);font-weight:500;flex:0 0 auto}

.cwv2 .intake{background:var(--surface);border-radius:10px;border:1px solid var(--border);padding:10px 12px;margin-top:8px}

.cwv2 .intake>summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center} .cwv2 .intake>summary::-webkit-details-marker{display:none}



/* ------------------------------------------------------------- timeline */.cwv2 .tl{list-style:none;display:flex;gap:0;margin:0;padding:0}

.cwv2 .tl li{flex:1 1 0;position:relative;padding:20px 8px 0 0;font-size:12.5px;min-width:0}

.cwv2 .tl .dot{position:absolute;top:0;left:0;right:0;height:12px;display:flex;align-items:center}

.cwv2 .tl .dot span{width:12px;height:12px;border-radius:50%;flex:0 0 auto;display:block}

.cwv2 .tl .dot i{flex:1 1 auto;height:2px;background:var(--border);margin:0 2px}

.cwv2 .tl p{overflow-wrap:anywhere}



/* --------------------------------------------- overlays and popovers */.cwv2 .scrim{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center;padding:20px;z-index:60}

.cwv2 .scrim:has(.drawer){padding:0;justify-content:flex-end}

.cwv2 .modal{background:var(--surface);border-radius:14px;box-shadow:var(--e3);width:100%;max-width:520px;max-height:calc(100vh - 40px);overflow:auto;color:var(--ink)}

.cwv2 .drawer{background:var(--surface);width:100%;max-width:560px;height:100%;overflow:auto;box-shadow:var(--e3);color:var(--ink)}

.cwv2 .pop{position:absolute;top:60px;right:16px;width:360px;max-width:calc(100vw - 32px);background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--e2);z-index:50;overflow:hidden;max-height:calc(100vh - 80px);overflow-y:auto;color:var(--ink)}

.cwv2 .pop .card-h{padding:12px 16px;border-bottom:1px solid var(--border)}

.cwv2 .pop-help{width:440px}

.cwv2 .pop-scroll{max-height:420px;overflow:auto}

.cwv2 .faqq{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-weight:600} .cwv2 .faqq:hover{background:var(--surface-2)}

.cwv2 .faqa{color:var(--ink-2);line-height:1.55}

.cwv2 .pop .nav{color:var(--ink-2)} .cwv2 .pop .nav:hover{background:var(--surface-2)}

.cwv2 .toasts{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:80;align-items:center;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}

.cwv2 .toast{background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:9px;font-weight:600;font-size:13.5px;box-shadow:var(--e2);animation:rise .2s ease-out;overflow-wrap:anywhere}

@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@keyframes meterfill{from{width:0}}

.cwv2 #content.enter>.wrap>*{animation:rise .26s cubic-bezier(.22,.68,.3,1) both}

.cwv2 #content.enter>.wrap>*:nth-child(2){animation-delay:.03s} .cwv2 #content.enter>.wrap>*:nth-child(3){animation-delay:.06s}

@media (prefers-reduced-motion:reduce){.cwv2 *, .cwv2 *::before, .cwv2 *::after{animation:none!important;transition:none!important}}



/* ------------------------------------------------------------------ chart */.cwv2 .cwrap{position:relative;min-width:0}

.cwv2 .cline{position:absolute;top:10px;bottom:22px;width:1px;background:var(--border-2);opacity:0;pointer-events:none}

.cwv2 .cline.on{opacity:1}

.cwv2 .ctip{position:absolute;transform:translate(-50%,-135%);background:var(--ink);color:var(--surface);font-size:12px;font-weight:600;padding:4px 8px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;z-index:2}

.cwv2 .ctip.on{opacity:1}

.cwv2 .bars{display:grid;gap:12px} .cwv2 .bar{display:grid;grid-template-columns:minmax(80px,150px) minmax(0,1fr) 48px;gap:12px;align-items:center;font-size:13.5px}

.cwv2 .bar .bl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cwv2 .bar .bv{text-align:right;color:var(--ink-3);font-size:13px}



/* ------------------------------------------------------------- skeleton */.cwv2 .sk{background:linear-gradient(90deg,var(--surface-2),var(--hover),var(--surface-2));background-size:200% 100%;animation:sk 1.2s infinite;border-radius:6px;display:block}

@keyframes sk{to{background-position:-200% 0}}



/* -------------------------------------------------- prototype controls */.cwv2 .pc{position:fixed;right:16px;bottom:16px;z-index:70}

.cwv2 #pcToggle{height:28px;padding:0 10px;border-radius:999px;background:var(--ink);color:var(--surface);font-size:11px;font-weight:700;letter-spacing:.06em;box-shadow:var(--e2)}

.cwv2 .pc .panel{position:absolute;bottom:36px;right:0;width:300px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--e2);padding:14px;color:var(--ink)}

.cwv2 .pc h4{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-4);margin:10px 0 6px} .cwv2 .pc h4:first-child{margin-top:0}

.cwv2 .pc select{width:100%;height:32px;border-radius:8px;border:1px solid var(--border-2);background:var(--surface);padding:0 8px;color:var(--ink)}

.cwv2 .seg{display:flex;gap:4px;flex-wrap:wrap}

.cwv2 .seg button{height:28px;padding:0 10px;border-radius:8px;font-size:12px;font-weight:600;border:1px solid var(--border-2)}

.cwv2 .seg button.on{background:var(--ink);color:var(--surface);border-color:var(--ink)}



/* ---------------------------------------------------------- design system */.cwv2 .swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}

.cwv2 .sw-c{border-radius:10px;border:1px solid var(--border);padding:10px;font-size:12.5px} .cwv2 .sw-c i{display:block;height:40px;border-radius:6px;margin-bottom:6px;border:1px solid var(--border)}

.cwv2 .sw-c b{display:block;font-weight:600} .cwv2 .sw-c span{color:var(--ink-3);font-size:11.5px}

.cwv2 .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}


/* --- port additions (not from the prototype) ------------------------------ */
/* Why a website needs attention. The prototype's cards never had to say,
 * because its data was invented and always explicable; a real badge reading
 * "Attention needed" with no reason anywhere on the page is just worrying. */
/* .scard has NO padding of its own — every child supplies its own 16px
 * inset. The first version of this rule set only a margin, so the reason
 * line sat flush against the card border, outside the content it belongs
 * to. Seen on the live test account. */

/* The same reason, in the Websites table's Status column. */

/* A ported screen brings its own page heading and toolbar, so the shell's
 * static ones are hidden rather than stacked above it. Deliberately NOT
 * scoped under .cwv2: these elements are the panel's, outside the container,
 * and they only match once a screen has actually taken the panel over. */
/* THE OLD HEADING, hidden where the redesign brings its own.
 *
 * These are CHILD selectors, and that is the trap: on Profile and Domain the
 * <h1 class="dash-tab-title"> is not a child of the panel, it is wrapped in a
 * <header class="pf-head"> / <header class="dv-head">. So the title selector
 * never matched, and both screens shipped with their heading and sub-line
 * printed TWICE, one above the other — seen on the live account, not in any
 * test, because nothing here asserts on rendered output.
 *
 * The wrappers are named explicitly rather than loosening the combinator to a
 * descendant: `.cwv2-host .dash-tab-title` would also reach a title the
 * redesign's own markup might use. Both wrappers were checked first and hold
 * a heading and a paragraph — no ids, no controls, nothing a handler binds. */
.cwv2-host > .sites-panel-head,
.cwv2-host > .pf-head,
.cwv2-host > .dv-head,
.cwv2-host > .dash-tab-title,
.cwv2-host > .dash-tab-sub,
.cwv2-host > .pf-sub,
#tab-sites.cwv2-host .sites-toolbar{display:none}
#tab-sites.cwv2-host #sites-list{display:block}

/* ───────────────────────────────────────────────────────────────────────────
 * THE SKIN — the redesign applied to screens that have NOT been rewritten.
 *
 * Overview and Websites are full ports: new markup, drawn by overview-v2.js and
 * sites-v2.js. Domain, Plan, Billing, Support and Profile are not, and should
 * not be rewritten lightly — between them they own Stripe checkout, password
 * changes, session revocation and support messaging, on a platform with paying
 * customers. Re-implementing those flows to change how they LOOK is the trade
 * a staged port exists to avoid.
 *
 * So this maps the shell's own vocabulary onto the design's tokens and
 * components. Every rule here targets a class the live markup already emits:
 * nothing moves, no handler changes, no form is touched. It applies only
 * inside .cwv2-skin, which only a flagged account's panel ever carries.
 *
 * The tokens come first because the components below are written in terms of
 * them, and they must be redeclared on the skin container: custom properties
 * inherit, but .cwv2's block is scoped to the ported panels.
 * ──────────────────────────────────────────────────────────────────────── */

.cwv2-skin,.cwv2-shell{
  --bg:#f8f9ff; --surface:#ffffff; --surface-2:#f5f6fb; --hover:#f0f1f8;
  --border:#e5e7f0; --border-2:#d3d6e3;
  --ink:#14151f; --ink-2:#3a3c4e; --ink-3:#5f6278; --ink-4:#8a8da2;
  --accent:#4b2fd6; --accent-2:#3d25b4; --accent-fill:#5b3df5;
  --accent-bg:#f1eeff; --accent-line:#d9d1ff;
  --ok:#127a43; --ok-bg:#e8f6ee; --ok-fill:#1f9d57; --ok-line:#bfe4cf;
  --warn:#8a5600; --warn-bg:#fff4e0; --warn-fill:#e39a2d; --warn-line:#f1d9a8;
  --bad:#b42318; --bad-bg:#fdeceb; --bad-fill:#d92d20; --bad-line:#f4c4bf;
  --info:#175cd3; --info-bg:#eaf2ff; --info-fill:#2e78e6; --info-line:#c6d9fb;
  --mut:#3a3c4e; --mut-bg:#eef0f5; --mut-line:#d3d6e3; --scrim:rgba(20,21,31,.45);
  --on-accent:#fff;
  /* Sidebar and header surfaces. Omitting these first time left every
     var(--side...) invalid, which drops the whole declaration: the sidebar
     rendered transparent and its border collapsed to 0. */
  --side:#ffffff; --side-line:#e5e7f0; --side-hover:#f3f4fa; --side-on:#f1eeff;
  --e2:0 1px 2px rgba(20,21,31,.05), 0 8px 24px rgba(20,21,31,.10);
  color:var(--ink);
}
html[data-theme="dark"] .cwv2-skin,html[data-theme="dark"] .cwv2-shell,html[data-theme="dark"].cwv2-shell{
  --bg:#0e0f15; --surface:#16171f; --surface-2:#1c1d27; --hover:#22232e;
  --border:#272836; --border-2:#363849;
  --ink:#eceef6; --ink-2:#c6c8d6; --ink-3:#9a9db0; --ink-4:#74778a;
  --accent:#b3a5ff; --accent-2:#c9bfff; --accent-fill:#6a4cff;
  --accent-bg:#221d3f; --accent-line:#3a3270;
  --ok:#6fd99b; --ok-bg:#10281b; --ok-fill:#2fae69; --ok-line:#1d4630;
  --warn:#f2c26b; --warn-bg:#2c2110; --warn-fill:#e0a23b; --warn-line:#4d3a17;
  --bad:#ff8a80; --bad-bg:#2b1412; --bad-fill:#f04438; --bad-line:#52211d;
  --info:#8fc0ff; --info-bg:#101c2e; --info-fill:#4a8ef0; --info-line:#1f3a5c;
  --mut:#c6c8d6; --mut-bg:#22232e; --mut-line:#363849; --scrim:rgba(0,0,0,.6);
  --side:#12131a; --side-line:#232430; --side-hover:#1b1c26; --side-on:#221d3f;
  --e2:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.45);
}
/* NO OS fallback here either: tokens.css keys its dark palette on
 * html[data-theme="dark"] alone, so the skin must too or a skinned panel goes
 * dark while the shell around it stays light. */

/* ── Page heading ─────────────────────────────────────────────────────── */
.cwv2-skin .dash-tab-title{
  font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:32px;
  color:var(--ink);margin:0 0 4px;
}
.cwv2-skin .dash-tab-sub,.cwv2-skin .pf-sub,.cwv2-skin .cw-note{
  color:var(--ink-3);font-size:14px;line-height:1.5;
}

/* ── Cards ────────────────────────────────────────────────────────────── */
.cwv2-skin .cw-card,.cwv2-skin .pf-card{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:none;margin-bottom:20px;min-width:0;
}
.cwv2-skin .cw-card-title,.cwv2-skin .pf-card > h2,.cwv2-skin .pf-card > h3{
  font-size:15px;font-weight:650;color:var(--ink);letter-spacing:-.01em;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.cwv2-skin .cw-btn,.cwv2-skin .btn-primary,.cwv2-skin .btn-sm-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 14px;border-radius:9px;
  font-size:13.5px;font-weight:600;line-height:1;
  background-color:var(--surface);color:var(--ink);border:1px solid var(--border-2);
  white-space:nowrap;text-decoration:none;cursor:pointer;
  transition:background .12s ease,border-color .12s ease;
}
.cwv2-skin .cw-btn:hover,.cwv2-skin .btn-primary:hover,.cwv2-skin .btn-sm-primary:hover{
  background-color:var(--hover);
}
.cwv2-skin .cw-btn-primary,.cwv2-skin .btn-primary,.cwv2-skin .btn-sm-primary{
  background-color:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);
}
.cwv2-skin .cw-btn-primary:hover,.cwv2-skin .btn-primary:hover,.cwv2-skin .btn-sm-primary:hover{
  background-color:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent);
}
.cwv2-skin .cw-btn-ghost{background-color:transparent;border-color:transparent;color:var(--accent)}
.cwv2-skin .cw-btn-ghost:hover{background-color:var(--accent-bg)}
.cwv2-skin .cw-btn-danger{background-color:var(--bad-bg);border-color:var(--bad-line);color:var(--bad)}
.cwv2-skin .cw-btn-sm{height:30px;padding:0 11px;font-size:12.5px;border-radius:8px}
.cwv2-skin .cw-btn:disabled,.cwv2-skin .cw-btn[disabled]{opacity:.55;cursor:not-allowed}
.cwv2-skin .cw-btn:focus-visible,.cwv2-skin .cw-input:focus-visible{
  outline:2px solid var(--accent-fill);outline-offset:2px;
}

/* ── Fields ───────────────────────────────────────────────────────────── */
.cwv2-skin .cw-input,.cwv2-skin .cw-select,.cwv2-skin .cw-textarea,
.cwv2-skin input[type="text"],.cwv2-skin input[type="email"],
.cwv2-skin input[type="password"],.cwv2-skin input[type="search"],
.cwv2-skin select,.cwv2-skin textarea{
  background-color:var(--surface);color:var(--ink);
  border:1px solid var(--border-2);border-radius:9px;
  padding:0 12px;height:38px;font-size:14px;font-family:inherit;
}
.cwv2-skin .cw-textarea,.cwv2-skin textarea{height:auto;padding:10px 12px;line-height:1.5}
.cwv2-skin .cw-input:focus,.cwv2-skin select:focus,.cwv2-skin textarea:focus{
  border-color:var(--accent-fill);outline:none;
}
.cwv2-skin label{color:var(--ink-2);font-size:13px;font-weight:600}

/* The sort control appears wherever the column headings cannot be clicked:
   always in grid view, and in list view only below the width at which
   .tbl.cards hides the thead. Above that, the headings are the control and a
   second one beside them would be two ways to do the same thing. */
/* The view toggle sits in the page head beside "New website", so it is
   icon-only: square buttons rather than a text button's side padding. */
.cwv2 .ph .acts .segctl.icons{flex:0 0 auto}
.cwv2 .segctl.icons button{width:30px;padding:0;justify-content:center}

/* Only ever rendered for list view on a phone now, beside the search. */
.cwv2 .sv2-sortby{display:inline-flex;align-items:center;flex:0 0 auto;margin-left:auto}
@media (min-width:760px){ .cwv2 .sv2-sortby.is-list{display:none} }
.cwv2 .sv2-sortby select{
  height:34px;padding:0 28px 0 11px;border-radius:9px;
  border:1px solid var(--border-2);background-color:var(--surface);color:var(--ink);
  font-size:13.5px;font-weight:500;cursor:pointer;
}
.cwv2 .sv2-sortby select:focus-visible{outline:2px solid var(--accent-fill);outline-offset:1px}

/* ── Sortable column headings ───────────────────────────────────────────── */
/* A real button inside the <th>, so the heading is reachable by keyboard and
   announced as something you can press — aria-sort on the cell says which way
   it is currently ordered. */
.cwv2 .thsort{
  display:inline-flex;align-items:center;gap:5px;
  border:0;background:none;padding:0;margin:0;cursor:pointer;
  font:inherit;color:inherit;
}
.cwv2 .thsort:hover{ color:var(--ink) }
.cwv2 .thsort.on{ color:var(--ink);font-weight:600 }
.cwv2 .thsort-i{ font-size:11px;line-height:1;color:var(--accent) }
.cwv2 .thsort:focus-visible{ outline:2px solid var(--accent-fill);outline-offset:2px;border-radius:4px }
.cwv2 th.r .thsort{ justify-content:flex-end }

/* ── Analytics: the screen's own head and its range toggle ──────────────── */
.cwv2-skin .sd-an-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:0 0 18px;
}
.cwv2-skin .sd-an-h{ margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink) }
.cwv2-skin .sd-an-s{ margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-3) }
/* A segmented control, on the card whose contents it changes. */
.cwv2-skin .sd-range{
  display:inline-flex;gap:2px;padding:2px;margin-left:auto;
  border:1px solid var(--border-2);border-radius:9px;background-color:var(--surface-2);
}
.cwv2-skin .sd-range button{
  height:26px;padding:0 10px;border:0;border-radius:7px;background:none;
  color:var(--ink-3);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.cwv2-skin .sd-range button:hover{ color:var(--ink) }
.cwv2-skin .sd-range button.on{
  background-color:var(--surface);color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.08);   /* a --e* token belongs to console.css */
}
.cwv2-skin .sd-range button:focus-visible{ outline:2px solid var(--accent-fill);outline-offset:1px }

/* ── LETTER-SPACED CAPS, undone where the design does not use them ────────
 *
 * console.css puts `text-transform:uppercase` on twenty-odd label classes —
 * a house style from the old design. The approved design uses caps in
 * exactly one place, the EYEBROW above a card title ("FREE PLAN"), and
 * sentence case everywhere else: "Workspace", "Store country", "Website",
 * "Amount". Restyling a class the shell already styles means UNDOING what it
 * set, not only adding, which is how "MONTHLY TOTAL" survived the first pass
 * on the Billing tiles and "WORKSPACE · CONNECTED · STORE COUNTRY" survived
 * on Order management.
 *
 * The markup already carries the right words — "Store country", not
 * "STORE COUNTRY" — so this only stops the CSS from shouting them.
 *
 * DELIBERATELY NOT LISTED, because the design wants them as they are:
 *   .cw-avatar        initials
 *   .*-eyebrow        the one place the design uses caps
 *   .sc-cd-unit small countdown units (DAYS / HRS), which have no design
 *                     equivalent and read as units rather than labels
 */
.cwv2-skin .cw-table th,
.cwv2-skin .pl-table thead th,
.cwv2-skin .bl-inv-table thead th,
.cwv2-skin .sc-stat-k,
.cwv2-skin .pl-stat-label,
.cwv2-skin .bl-stat-label,
.cwv2-skin .ov-section-title,
.cwv2-skin .ov-first-card-title,
.cwv2-skin .sl-head,
.cwv2-skin .ls-next-title,
.cwv2-skin .ls-plan-name,
.cwv2-skin .ls-plan-badge,
.cwv2-shell .notif-day{
  text-transform:none;letter-spacing:0;
}
/* Those label classes also carry the old micro type; bring them to the
   design's own label size so they do not read as fine print. */
/* .kf-facts is gone with the card it styled — see kfRenderConnected. */
.cwv2-skin .sc-stat-k,
.cwv2-skin .pl-stat-label,
.cwv2-skin .bl-stat-label{
  font-size:12.5px;font-weight:500;color:var(--ink-3);
}

/* ── Account: the notification switches ──────────────────────────────────
 * A real checkbox, drawn as the design's switch — so it is focusable, it is
 * announced as a checkbox, and it still works with the keyboard. The visible
 * track is a sibling the input drives; the input itself is never display:none
 * (which would take it out of the tab order). */
.cwv2 .pf-sw{ position:relative;display:inline-flex;align-items:center;flex:0 0 auto }
.cwv2 .pf-sw input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
}
.cwv2 .pf-sw-t{
  width:38px;height:22px;border-radius:999px;background-color:var(--border-2);
  position:relative;transition:background-color .15s ease;pointer-events:none;
}
.cwv2 .pf-sw-t::after{
  content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s ease;
}
.cwv2 .pf-sw input:checked + .pf-sw-t{ background-color:var(--accent-fill) }
.cwv2 .pf-sw input:checked + .pf-sw-t::after{ transform:translateX(16px) }
.cwv2 .pf-sw input:focus-visible + .pf-sw-t{ outline:2px solid var(--accent-fill);outline-offset:2px }
.cwv2 .pf-sw input:disabled{ cursor:default }
.cwv2 .pf-sw input:disabled + .pf-sw-t{ opacity:.5 }

/* ── Support: the design's filter bar and ticket table ───────────────────── */
/* The bar is the CARD'S OWN top strip, not a row floating above it: these
   controls filter the table below them, and outside the card they read as
   page furniture while the table looks like it arrived with none. */
.cwv2 .cw-card.supv2-card, .cwv2 .card.supv2-card{ padding:0;overflow:hidden }
.cwv2 .supv2-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--border);
}

/* ONE segmented track, not four separate pills. Each filter used to carry
   its own border and its own rounded box, so the row read as four unrelated
   buttons; a segmented control says "pick one of these" by its shape. */
.cwv2 .supv2-seg{
  display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:10px;
  background-color:var(--surface-2);border:1px solid var(--border);
  overflow-x:auto;scrollbar-width:none;max-width:100%;
}
.cwv2 .supv2-seg::-webkit-scrollbar{ display:none }
.cwv2 .supv2-segb{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;height:28px;padding:0 11px;
  border:0;border-radius:7px;background:none;cursor:pointer;white-space:nowrap;
  color:var(--ink-3);font-family:inherit;font-weight:600;font-size:13px;line-height:1;
}
.cwv2 .supv2-segb:hover{ color:var(--ink) }
.cwv2 .supv2-segb.on{
  background-color:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(22,22,31,.08);
}
.cwv2 .supv2-segb .n{ font-variant-numeric:tabular-nums;color:var(--ink-4);font-weight:600 }
.cwv2 .supv2-segb.on .n{ color:var(--ink-3) }

.cwv2 .supv2-chips{ display:flex;gap:6px;flex-wrap:wrap }
.cwv2 .fchip{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;
  border:1px solid var(--border-2);border-radius:999px;background-color:var(--surface);
  color:var(--ink-2);font-size:13px;font-weight:500;cursor:pointer;
}
.cwv2 .fchip:hover{ background-color:var(--hover) }
.cwv2 .fchip.on{
  background-color:var(--accent-bg);border-color:var(--accent-line);
  color:var(--accent);font-weight:600;
}
.cwv2 .fchip .n{ font-variant-numeric:tabular-nums;color:var(--ink-3);font-weight:600 }
.cwv2 .fchip.on .n{ color:var(--accent) }
.cwv2 .supv2-search{
  position:relative;display:flex;align-items:center;gap:8px;
  height:34px;padding:0 12px;flex:0 1 280px;
  border:1px solid var(--border-2);border-radius:9px;background-color:var(--surface);
  color:var(--ink-4);
}
.cwv2 .supv2-search input{
  border:0;background:none;outline:none;flex:1 1 auto;min-width:0;
  font-size:13.5px;color:var(--ink);
}
/* A label that is read but not drawn — the box has only a placeholder. */
.cwv2 .vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.cwv2 .supv2-tbl tr[data-conv]{ cursor:pointer }
.cwv2 .supv2-tbl tr[data-conv]:hover{ background-color:var(--hover) }
.cwv2 .supv2-tbl tr.unread .nm{ font-weight:700 }
.cwv2 .supv2-id{ display:flex;align-items:flex-start;gap:9px;min-width:0 }
.cwv2 .supv2-id .supv2-dot{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:6px;
  background-color:var(--accent-fill);
}
.cwv2 .supv2-id .hs{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap }

/* The workspace, named once. An icon tile, the name in full weight, and
   everything else as one quiet line — the design's shape, replacing a
   three-column <dl> of labelled fields. */
.cwv2-skin .kf-id{display:flex;align-items:center;gap:12px;min-width:0;margin:4px 0 16px}
.cwv2-skin .kf-id-ic{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;
  background-color:var(--ok-bg);color:var(--ok);
}
.cwv2-skin .kf-id .nm{margin:0;font-size:14.5px;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.cwv2-skin .kf-id .hs{margin:2px 0 0;font-size:13px;color:var(--ink-3)}

/* Two cards of equal weight side by side, each sized by its own content.
   .sd-grid's default split is a wide main column and a narrow rail, which
   is right when one side is the subject and the other is context — and
   wrong for two cards that are peers. */
.cwv2-skin .sd-grid.sd-grid-even{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}

/* ── Store & orders: the "What is shared" card ───────────────────────────
 * Label above value, so the three groups read as a list of answers rather
 * than a table with one column. */
.cwv2-skin .kf-share-h{
  margin:14px 0 2px;font-size:12.5px;font-weight:500;color:var(--ink-3);
}
.cwv2-skin .kf-share-h:first-child{margin-top:0}
.cwv2-skin .kf-share-v{margin:0;font-size:13.5px;font-weight:600;color:var(--ink);line-height:1.45}

/* ── Backups: column widths ──────────────────────────────────────────────
 * Without these the browser hands the slack to whichever column has the
 * widest content, which here was Size — one short value in a 770px column,
 * while "28 Oct, 11:28" wrapped onto three lines in a 45px one. The date is
 * what you read first, so it takes the slack; the rest are as wide as they
 * need to be. */
/* ── Backups: column widths ──────────────────────────────────────────────
 *
 * THE LAST COLUMN HAD width:100%, which is what starved the rest: the
 * actions cell claimed every spare pixel, "Made by you" wrapped onto three
 * lines in a column barely wider than the word "Type", and the squeezed
 * cells read as boxes with rules between them.
 *
 * `width:1%` on a table cell is the idiom for "as narrow as your content" —
 * the browser expands it to fit and gives the slack to the UNCONSTRAINED
 * columns. So Size, Status and the actions are pinned to their content, and
 * When and Type share what is left, which is the proportion the design has.
 */
.cwv2-skin .sd-bk-tbl{table-layout:auto;width:100%}
.cwv2-skin .sd-bk-tbl th,
.cwv2-skin .sd-bk-tbl td{white-space:nowrap;vertical-align:middle}
.cwv2-skin .sd-bk-tbl td{padding-top:14px;padding-bottom:14px}
.cwv2-skin .sd-bk-tbl th:nth-child(3),
.cwv2-skin .sd-bk-tbl td:nth-child(3),
.cwv2-skin .sd-bk-tbl th:nth-child(4),
.cwv2-skin .sd-bk-tbl td:nth-child(4),
.cwv2-skin .sd-bk-tbl th:last-child,
.cwv2-skin .sd-bk-tbl td:last-child{width:1%}
.cwv2-skin .sd-bk-tbl th:nth-child(3),
.cwv2-skin .sd-bk-tbl td:nth-child(3){text-align:right;padding-right:28px}
.cwv2-skin .sd-bk-tbl th:last-child,
.cwv2-skin .sd-bk-tbl td:last-child{text-align:right}
/* The two real actions sit together; delete is set apart from them, because
   a destructive control next to "Download" is one slip from a lost copy. */
.cwv2-skin .sd-bk-tbl td:last-child .cw-btn + .cw-btn{margin-left:8px}
.cwv2-skin .sd-bk-tbl td:last-child .sd-bk-del{margin-left:18px;opacity:.65}
.cwv2-skin .sd-bk-tbl td:last-child .sd-bk-del:hover{opacity:1;color:var(--bad)}
/* The card header carries the action, so the button must not inherit the
   title's type. */
.cwv2-skin .cw-card-title .cw-btn{font-size:13px;font-weight:600}

/* ── Domain: the addresses table ─────────────────────────────────────────
 * Each row leads with a globe tile, the same shape the notification rows
 * use, so an address reads as a thing rather than a string in a cell. */
.cwv2-skin .dv2-addr{display:flex;align-items:center;gap:10px;min-width:0}
.cwv2-skin .dv2-globe{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;
  background-color:var(--accent-bg);color:var(--accent);
}
/* The Security rows reuse the Health row shape; their text is two lines, so
   the mark stays at the top rather than centring against the block. */
.cwv2-skin .cw-card > .sd-health-row{align-items:flex-start}
.cwv2-skin .sd-health-row .sd-health-ic{margin-top:1px}

/* ── The read-only deadline banner ───────────────────────────────────────
 * Full width, above the columns: a date you can lose a website to does not
 * belong in a side rail. The bar runs from the day editing stopped to the day
 * the content goes, with a mark on today. */
.cwv2-skin .sd-deadline{
  border:1px solid var(--bad-line);background-color:var(--surface);
  margin-bottom:20px;   /* a --cw-* token would borrow from console.css */
}
.cwv2-skin .sd-dl-top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.cwv2-skin .sd-dl-h{
  margin:0;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);
}
/* The number is the point; the colour carries it without a second sentence. */
.cwv2-skin .sd-dl-h::first-line{ color:var(--ink) }
.cwv2-skin .sd-dl-s{ margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--ink-3) }
.cwv2-skin .sd-dl-track{
  position:relative;height:6px;border-radius:3px;margin:22px 0 8px;
  background-color:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border);overflow:visible;
}
.cwv2-skin .sd-dl-fill{
  display:block;height:100%;border-radius:3px;background-color:var(--bad-fill);
}
/* The "Today" mark sits ON the join, so the bar reads as elapsed vs left. */
.cwv2-skin .sd-dl-now{
  position:absolute;top:-20px;transform:translateX(-50%);
  font-size:11.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;
}
.cwv2-skin .sd-dl-now::after{
  content:"";position:absolute;left:50%;top:16px;width:2px;height:10px;
  transform:translateX(-50%);background-color:var(--ink-3);border-radius:1px;
}
.cwv2-skin .sd-dl-ends{
  display:flex;justify-content:space-between;gap:12px;
  font-size:12.5px;color:var(--ink-3);
}

/* ── The site Overview's side column: Details and Health ────────────────── */
/* A Details row can now hold a link, a Copy button or a meter, not only text,
   so the value side is a flex row rather than a bare <strong>. */
.cwv2-skin .sd-conf-row > strong{
  display:flex;align-items:center;gap:8px;justify-content:flex-end;
  min-width:0;text-align:right;font-weight:600;
}
.cwv2-skin .sd-conf-row > strong a{ color:var(--accent);text-decoration:none;overflow-wrap:anywhere }
.cwv2-skin .sd-conf-row > strong a:hover{ text-decoration:underline }
.cwv2-skin .sd-copy{
  flex:0 0 auto;height:24px;padding:0 9px;font-size:12px;font-weight:600;border-radius:7px;
  border:1px solid var(--border-2);background-color:var(--surface);color:var(--ink-2);cursor:pointer;
}
.cwv2-skin .sd-copy:hover{ background-color:var(--hover) }
.cwv2-skin .sd-mini-bar{ width:56px;flex:0 0 56px }
/* The card's own link, right-aligned in its title row (design: "Settings"). */
.cwv2-skin .cw-card-title{ display:flex;align-items:baseline;justify-content:space-between;gap:10px }
.cwv2-skin .sd-card-lnk{ font-size:12.5px;font-weight:600 }

/* Health: a state mark, the fact, and the action that changes it. */
.cwv2-skin .sd-health-row{
  display:flex;align-items:center;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--border);font-size:13.5px;color:var(--ink);
}
.cwv2-skin .sd-health-row:last-of-type{ border-bottom:0 }
.cwv2-skin .sd-health-ic{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;
  background-color:var(--mut-bg);color:var(--ink-3);font-size:12px;font-weight:700;
}
.cwv2-skin .sd-health-ic.ok{ background-color:var(--ok-bg);color:var(--ok) }
.cwv2-skin .sd-health-t{ flex:1 1 auto;min-width:0 }
.cwv2-skin .sd-health-row .lnk{ flex:0 0 auto;font-size:12.5px;font-weight:600 }

/* The site address, now a link in the sub-line rather than the heading. */
.cwv2 .sdv2-head .sdv2-host{ color:var(--accent);text-decoration:none }
.cwv2 .sdv2-head .sdv2-host:hover{ text-decoration:underline }

/* ── Create a website: the design's wizard ────────────────────────────────
 *
 * The flow underneath is untouched — see the note at the top of create-v2.js.
 * These rules do three things: give the steps a progress indicator, turn the
 * modal into a page, and put the chosen design beside the name field.
 * ──────────────────────────────────────────────────────────────────────── */

.cwv2-shell .cwv2-steps-wrap{ margin:0 0 22px; }
.cwv2-shell .cwv2-steps{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  list-style:none;margin:0;padding:0;
}
.cwv2-shell .cwv2-steps li{
  display:flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:500;color:var(--ink-4);
}
/* The rule between steps. A pseudo-element so the markup stays a plain list
   and a screen reader hears three items, not five. */
.cwv2-shell .cwv2-steps li + li::before{
  content:"";width:28px;height:1px;background-color:var(--border-2);
  margin-right:2px;flex:0 0 auto;
}
.cwv2-shell .cwv2-steps .n{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  border:1px solid var(--border-2);background-color:var(--surface);
  font-size:12px;font-weight:600;color:var(--ink-3);
}
.cwv2-shell .cwv2-steps li.now{ color:var(--ink); font-weight:600; }
.cwv2-shell .cwv2-steps li.now .n{
  background-color:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);
}
.cwv2-shell .cwv2-steps li.done{ color:var(--ink-2); }
.cwv2-shell .cwv2-steps li.done .n{
  background-color:var(--ok-bg);border-color:var(--ok-line);color:var(--ok);
}

/* ── The modal, as a page ─────────────────────────────────────────────────
 *
 * The design has no dialog here: naming a website is a step in a flow, on the
 * same page as the one before it. The overlay, the centring and the scrim all
 * go, and the card becomes a panel in the content column. Nothing is moved in
 * the DOM — every id, every handler and the close button all survive, and the
 * close button still closes because it is the same button. */
@media (min-width:769px){
  .cwv2-shell .cs-modal{
    position:static;display:block;background:none;backdrop-filter:none;
    padding:0;overflow:visible;inset:auto;
  }
  .cwv2-shell .cs-modal.hidden{ display:none; }
  /* THE WIZARD IS THE PAGE WHILE IT IS OPEN.
   *
   * Once the dialog became a panel it still lived where the dialog did — a
   * body-level sibling, after everything — so picking a template left the
   * gallery, its filters and the two starting-point cards above it and put
   * the next step a page and a half down. The design replaces the page.
   * Hidden rather than removed: every id the flow uses is still in the DOM,
   * and closing puts it all back with nothing to re-render. */
  .cwv2-shell.cs-page-open #tab-dashboard > .ls-hero,
  .cwv2-shell.cs-page-open #tab-dashboard > .ls-startgrid,
  .cwv2-shell.cs-page-open #tab-dashboard > .ls-sect-h,
  .cwv2-shell.cs-page-open #tab-dashboard > .ls-library{ display:none; }
  /* THROUGH THE ID, because the plan step's own rule carries one.
     `#create-site-modal .cs-modal-card.is-wide` re-asserts max-width:920px and
     max-height:94vh, and an id beats any number of classes — so on the plan
     step this page kept the dialog's width and grew its own inner scrollbar
     inside a page that already scrolls.

     overflow and the animation go with it: a panel in the content column has
     nothing to scroll within, and a page does not pop into existence. */
  .cwv2-shell #create-site-modal .cs-modal-card,
  .cwv2-shell #create-site-modal .cs-modal-card.is-wide{
    max-width:1180px;width:100%;margin:0 auto;
    background-color:var(--surface);border:1px solid var(--border);
    border-radius:12px;box-shadow:none;padding:24px;
    max-height:none;overflow:visible;animation:none;
  }
}

/* ── Step 2: the fields, and the design you chose ───────────────────
 *
 * The design puts the title and the stepper on the PAGE, then two cards below
 * them: the form on the left, "Your design" on the right, both starting at the
 * top. Ours had one outer card wrapping the lot, with the chosen design as a
 * tinted box inside it that came out level with the footer at the bottom of
 * the screen.
 *
 * So on this step the outer card stops being a card. :has() rather than a
 * class, because the step machine already toggles .hidden and a second source
 * of truth for "which step is showing" is a second thing to get out of step.
 * Every other step still gets the card.
 */
.cwv2-shell .cs-modal-card:has(> #cs-step-name:not(.hidden)),
.cwv2-shell .cs-modal-card:has(> #cs-step-review:not(.hidden)){
  background:none;border:0;padding:0;
}
.cwv2-shell .cwv2-create-h1{
  margin:0 0 14px;font-size:22px;line-height:1.25;font-weight:650;color:var(--ink);
}

.cwv2-shell .cs-modal-card #cs-step-name.cwv2-namestep{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:20px;align-items:start;
}
/* The form card. The body holds the fields; the footer is divided off from
   them, as every other card's footer on this dashboard is. */
.cwv2-shell #cs-step-name.cwv2-namestep > .cs-name-main{
  grid-column:1;min-width:0;
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
}
.cwv2-shell #cs-step-name.cwv2-namestep > .cwv2-choice{
  grid-column:2;grid-row:1;align-self:start;min-width:0;
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:16px 20px 20px;
}
.cwv2-shell .cs-name-body{ padding:16px 20px 20px; }
/* The design has no heading inside this card — the page title and the
   stepper already say where you are, and "Name your \"Classic 2\" website"
   said it a third time. Kept in the markup for the pre-redesign dashboard. */
.cwv2-shell .cs-name-body > #cs-name-title{ display:none; }
.cwv2-shell .cs-name-body > .tpl-form-group{ margin:0 0 16px; }
.cwv2-shell .cs-name-body > .tpl-form-group:last-child{ margin-bottom:0; }
.cwv2-shell .cs-name-body > #cs-form-error:not(.hidden){ margin-top:14px; }

/* THE FIELD, as the design builds it: the border on the WRAPPER and the input
   bare inside it, so a suffix can sit in the same box as the text.
   .tpl-input ships as a 30px pill with 44px of left padding held open for an
   icon this design does not have.

   Written through the two ids on purpose. `.tpl-input-wrapper input#cs-site-name`
   in dashboard.css carries an id, and no number of classes outranks one — a
   class-only override here would have left the name box indented 40px for an
   icon that is no longer there. */
.cwv2-shell .cs-name-body .ls-input-wrap{
  display:flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;
  border-radius:9px;background-color:var(--surface);border:1px solid var(--border-2);
}
.cwv2-shell .cs-name-body .ls-input-wrap:focus-within{
  border-color:var(--accent-fill);box-shadow:0 0 0 3px var(--accent-bg);
}
.cwv2-shell .cs-name-body .ls-input-wrap > #cs-site-name,
.cwv2-shell .cs-name-body .ls-input-wrap > #cs-subdomain{
  flex:1 1 auto;min-width:0;width:auto;
  padding:8px 0;border:0;border-radius:0;background:none;box-shadow:none;outline:none;
  font-family:inherit;font-weight:400;font-size:14px;line-height:1.4;color:var(--ink);
}
.cwv2-shell .cs-name-body .ls-addr-wrap .ls-addr-suffix{
  flex:0 0 auto;white-space:nowrap;color:var(--ink-3);font-size:14px;
}
.cwv2-shell .cs-name-body #cs-subdomain-status{ margin-top:7px; }

.cwv2-shell .cwv2-choice-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  margin:0 0 12px;font-size:15px;font-weight:650;color:var(--ink);
}
.cwv2-shell .cwv2-choice-shot{
  display:block;aspect-ratio:16 / 10;border-radius:8px;overflow:hidden;
  border:1px solid var(--border);background-color:var(--surface);
}
.cwv2-shell .cwv2-choice-shot img{
  width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
}
/* A DASHED, LABELLED FRAME, not a hatched panel. The stripes read as an
   image that failed to load; this reads as a choice that has nothing to show
   yet, which is what it is. */
.cwv2-shell .cwv2-choice-shot.is-blank{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background-color:var(--surface-2);border:1.5px dashed var(--border-2);color:var(--ink-3);
  font-size:12.5px;font-weight:600;text-align:center;padding:12px;
}
.cwv2-shell .cwv2-choice-n{
  margin:10px 0 2px;font-size:14px;font-weight:650;color:var(--ink);
}
.cwv2-shell .cwv2-choice-s{ margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-3); }

@media (max-width:1100px){
  .cwv2-shell .cs-modal-card #cs-step-name.cwv2-namestep{ grid-template-columns:minmax(0,1fr); }
  .cwv2-shell #cs-step-name.cwv2-namestep > .cwv2-choice{ grid-column:1;grid-row:auto; }
}

/* ── Notifications: the design's toned icon tile ──────────────────────── */
/* A 28px rounded tile, filled with the severity's own background and drawn in
   its ink. It replaces a 6px dot that said the same thing in colour alone —
   which is no information at all for a reader who cannot separate amber from
   red. The glyph now carries the meaning and the colour reinforces it. */
.cwv2-shell .notif-ic{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;margin-top:1px;
  background-color:var(--mut-bg);color:var(--ink-3);
}
.cwv2-shell .notif-item[data-sev="warn"] .notif-ic{ background-color:var(--warn-bg);color:var(--warn); }
.cwv2-shell .notif-item[data-sev="danger"] .notif-ic{ background-color:var(--bad-bg);color:var(--bad); }
.cwv2-shell .notif-item[data-sev="success"] .notif-ic{ background-color:var(--ok-bg);color:var(--ok); }
.cwv2-shell .notif-item[data-sev="info"] .notif-ic{ background-color:var(--info-bg);color:var(--info); }
/* The dot it replaces is still in the markup for the screens that have not
   been skinned; hide it here rather than removing a hook they rely on. */
.cwv2-shell .notif-item .notif-dot{ display:none; }

/* ── Numbers and stats ────────────────────────────────────────────────── */
.cwv2-skin .cw-stat{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;
}
/* Billing's tiles are rendered by surfaces.js into a SKINNED panel, so the
   .cwv2 rules above never reached them and they alone kept the old caps. */
.cwv2-skin .cw-stat-label{
  font-size:12.5px;font-weight:500;color:var(--ink-3);margin:0 0 6px;
  text-transform:none;letter-spacing:0;line-height:1.4;
}
.cwv2-skin .cw-stat-value{
  font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cwv2-skin .cw-stat-delta{
  font-size:12.5px;line-height:1.5;color:var(--ink-3);margin-top:5px;
}
.cwv2-skin .cw-num{
  font-variant-numeric:tabular-nums;font-weight:700;letter-spacing:-.02em;color:var(--ink);
}

/* ── Tables ───────────────────────────────────────────────────────────── */
.cwv2-skin table{border-collapse:collapse;font-size:14px;width:100%}
.cwv2-skin th{
  font-size:12.5px;font-weight:500;color:var(--ink-3);text-align:left;
  padding:10px 14px;border-bottom:1px solid var(--border);background:none;
}
.cwv2-skin td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle}

/* ── Status colours, by the shell's own tone classes ──────────────────── */
.cwv2-skin .cw-pill,.cwv2-skin .pill,.cwv2-skin .fpill{
  border-radius:999px;font-size:12.5px;font-weight:600;
}
.cwv2-skin .ok,.cwv2-skin .is-ok{color:var(--ok)}
.cwv2-skin .warn,.cwv2-skin .is-warn{color:var(--warn)}
.cwv2-skin .danger,.cwv2-skin .bad,.cwv2-skin .is-danger{color:var(--bad)}

/* ── Links ────────────────────────────────────────────────────────────── */
.cwv2-skin a{color:var(--accent)}
.cwv2-skin a:hover{color:var(--accent-2)}

/* Skeletons keep their own animation; only the colour is brought across, so a
 * loading screen does not flash the old palette before the data lands. */
.cwv2-skin .cw-skel,.cwv2-skin .cw-skel-line,.cwv2-skin .cw-skel-card{
  background-color:var(--surface-2);border-color:var(--border);
}

/* ───────────────────────────────────────────────────────────────────────────
 * THE SHELL — sidebar, header and page background, in the redesign.
 *
 * The frame around every screen, and the first thing anyone notices. Skinning
 * the panels alone left it untouched, so the dashboard still read as the old
 * design however many panels were ported.
 *
 * Markup is NOT changed. The shell's own classes are restyled in place —
 * .dash-sidebar, .dash-sidenav-item, .cw-header — so every click handler,
 * every data-tab lookup and the mobile nav keep working exactly as they do
 * today. The live information architecture is kept too: the prototype's
 * sidebar had different items (Home / Websites / Billing / Support / Account)
 * and adopting that would have broken routes the shell depends on.
 *
 * Applies only under .cwv2-shell, which redesign-core.js puts on the shell for
 * a flagged account and nothing else carries.
 * ──────────────────────────────────────────────────────────────────────── */

/* The page itself. */
.cwv2-shell,
.cwv2-shell .dash-main-area{ background-color:var(--bg); }

/* ── The content column ───────────────────────────────────────────────────
 *
 * THE SINGLE MOST VISIBLE DIFFERENCE BETWEEN THE PORT AND THE DESIGN, and it
 * was one number.
 *
 * dashboard.css caps every .dash-tab-panel at 960px (and #dash-loading with
 * it), where the design's column is 1180px. 960 is not a width the card grid
 * can work with: .sitegrid is repeat(auto-fill,minmax(290px,1fr)), so the
 * column decides the column COUNT, and at 959px three cards came out 305px
 * wide — narrow enough that .sc-top wrapped and the status pill dropped onto
 * its own line beneath the website name instead of sitting top right. That
 * one number was the most visible difference on the screen, and every
 * selector involved was byte-identical to the prototype. The cause was two
 * levels up, outside the redesign entirely.
 *
 * 1180 IS SET HERE, ON THE PANEL, rather than left to the design's own .wrap:
 * the ported renderers emit no .wrap — they are mounted into the panel, which
 * IS the column. Releasing the cap instead (max-width:none) gave 1268px and
 * four 305px cards, the same wrap for the opposite reason.
 *
 * Only a panel that actually holds a ported view is touched, so the screens
 * still on their own renderers keep the reading column they were built for.
 * The boot skeleton is moved to the same 1180 for the reason stated beside
 * the 960px rule itself: it must stand exactly where its content will. */
.cwv2-shell .dash-tab-panel:has(.cwv2),
.cwv2-shell #dash-loading{ max-width:1180px; }

/* AND THE ONE PANEL THAT CARRIES AN ID OF ITS OWN.
 *
 * console.css caps #tab-profile at 880px — a reading width chosen for the
 * old single-column form. That selector is an id, and an id beats any number
 * of classes, so the rule above (three classes) lost to it and Account alone
 * stood 300px narrower than every other screen, visibly out of line with the
 * page the customer came from. Written with the id so the two are weighed on
 * equal terms, and still only when the panel actually holds a ported view. */
.cwv2-shell #tab-profile:has(.cwv2){ max-width:1180px; }

/* The screens still on their own renderers keep the 960px reading column they
 * were written for — but they are centred in the content box, and the ported
 * ones are now centred at 1180. Two different left edges, so moving between
 * Home and Support slid the page sideways by 110px. The narrower column is
 * pinned to the WIDER one's left edge instead, and only its right-hand white
 * space differs. The template library is excluded: it is meant to span the
 * whole content area and has an id, so it outranks this anyway. */
.cwv2-shell .dash-tab-panel:not(:has(.cwv2)):not(#tab-dashboard){
  margin-left:max(0px, calc((100% - 1180px) / 2));
  margin-right:auto;
}

/* ── The card grid on a laptop ────────────────────────────────────────────
 *
 * At the design's own 1180px column, auto-fill lays three 382px cards and the
 * status pill sits top right, exactly as drawn. At 1280 viewport width the
 * column is 948px, which auto-fill still cuts into THREE cards — 300px each,
 * too narrow for .sc-id's 170px basis plus a gap plus a pill that can read
 * "Storage 88% full". flex-wrap then drops the pill onto its own line and the
 * card looks broken.
 *
 * THE PROTOTYPE DOES THE SAME THING AT 1280, measured, to the pixel. So this
 * is a gap in the design rather than an error in the port, and it is
 * corrected rather than reproduced — 1280x800 is an ordinary laptop, not an
 * edge case.
 *
 * The track minimum goes to 330px, which is the smallest card that holds the
 * row. At 1180 that still divides into three (3 x 382, byte for byte what the
 * design draws), and at 948 into two of 466 with room to spare. Fewer, wider
 * cards on a smaller screen — the opposite of what auto-fill wanted, and the
 * right answer.
 *
 * nowrap belts it: at a width where the row is genuinely too tight the NAME
 * gives way, not the status. The name truncates with an ellipsis and keeps
 * its full text in title=; a status that has moved reads as a bug. */
/* "Finish setting up": the bar takes the room, the button takes what it
   needs. The design writes this inline on the element; it is a rule here so
   the card can wrap on a narrow screen instead of squeezing the button. */
.cwv2 .cwv2-setup{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cwv2 .cwv2-setup-tx{flex:1 1 220px;min-width:0}

.cwv2 .sitegrid{ grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); }
/* Desktop only. Below 769px the sidebar is gone and the grid is already down
   to one or two cards; there a wrapped pill costs nothing and a name cut to
   "Mesa Dental Stu..." costs the owner the one word that tells the cards
   apart. The design wraps it there too. */
@media (min-width:769px){
  .cwv2 .sc-top{ flex-wrap:nowrap; }
  .cwv2 .sc-top .badge{ flex:0 0 auto; }
}

/* ── The frame ─────────────────────────────────────────────────────────────
 *
 * THE DESIGN'S SHELL IS A DIFFERENT SHAPE, and no amount of recolouring got
 * there. In the design a 64px bar spans the whole width and a 252px sidebar
 * hangs below it, so the brand sits in the bar's own left cell and its right
 * edge continues the sidebar's border — one unbroken vertical line down the
 * page. Here the sidebar ran full height and the header began after it, with
 * the brand inside the sidebar. Same colours, visibly different product.
 *
 * NO MARKUP IS MOVED for this. The header is a descendant of .dash-main-area,
 * which starts 252px in — but position:fixed resolves against the viewport,
 * not the parent, so the bar reaches the left edge where it stands. (No
 * ancestor sets transform, filter or contain, which are what would make a
 * fixed child resolve against them instead.) Only the brand anchor itself is
 * relocated, by topbar().
 *
 * Desktop only. Below 769px console.css hides the sidebar outright and hands
 * navigation to the bottom bar — a better answer on a phone than the design's
 * slide-over drawer, and not one to undo for the sake of matching a comp.
 *
 * 64 + 28 = the design's own 92px to the first heading. */
@media (min-width:769px){
  .cwv2-shell .cw-header{
    position:fixed;top:0;left:0;right:0;
    height:64px;padding:0 20px 0 0;z-index:840;
  }
  .cwv2-shell .dash-sidebar{
    position:fixed;top:64px;bottom:0;left:0;
    height:auto;overflow-y:auto;z-index:30;
  }
  .cwv2-shell .dash-main-area{ margin-left:252px;padding-top:64px; }
  .cwv2-shell .dash-content{ padding:28px 40px 72px; }

  /* The brand cell: 252px, aligned with the sidebar beneath it. */
  .cwv2-shell .cw-header .cwv2-brand{
    flex:0 0 252px;align-self:stretch;
    display:flex;align-items:center;
    margin:0;padding:0 16px 0 20px;
    border-right:1px solid var(--side-line);
  }
  /* 40px, against the 56px ceiling dashboard.css allows. A WaaS brand logo
     may be any shape, so the width gives way rather than the cell. */
  .cwv2-shell .cw-header .cwv2-brand .logo-img{
    height:40px;width:auto;max-width:100%;max-height:40px;
    object-fit:contain;display:block;
  }
  /* In dark mode the bar is near-black and a logo drawn for a white page
     disappears into it — true of the CubeWP mark and of most WaaS brand logos,
     which are made for light backgrounds. The design's own answer: invert the
     lightness and turn the hue back, which keeps the brand's colour roughly
     where it was instead of flattening it to white. A logo that was already
     light comes out dark, so this is a trade, not a law — but invisible is
     the worse end of it. */
  html[data-theme="dark"] .cwv2-shell .cw-header .cwv2-brand .logo-img{
    filter:invert(.9) hue-rotate(180deg);
  }
  .cwv2-shell .cw-crumbs{ padding-left:20px; }

  /* The "Websites" crumb wraps its own link and separator, so .cw-crumbs's
     flex gap does not reach inside it — without this the slash sits tight
     against the word. 6px is the design's own .crumbs gap; a --cw-* token
     would be borrowed from console.css, which this scoped sheet must not
     depend on. */
  .cwv2-shell .cwv2-crumb-mid{
    display:inline-flex;align-items:center;gap:6px;
  }
  /* AN AUTHOR `display` BEATS THE UA'S [hidden]{display:none}. Without this
     the crumb was hidden in the DOM — mid.hidden === true — and painted
     anyway, so "Websites" appeared on every screen: "Home / Websites /
     Billing", and on the websites list itself "Home / Websites / Websites".
     Any rule that sets display on an element something else hides has to say
     this, and the attribute selector is the narrowest way to say it. */
  .cwv2-shell .cwv2-crumb-mid[hidden]{ display:none; }

  /* The header's "+ New site" goes. The design's bar carries only help, the
     bell and the account; creating a website is offered by the sidebar's own
     button and again by the page head, so this was the third copy of one
     action in a single eyeful.
     HIDDEN, not removed: redesign-core.js's sidebar button works by clicking
     this one, and a display:none button still takes a programmatic click. On
     a phone console.css already hides it and the bottom bar owns the plus. */
  .cwv2-shell .cw-header #cw-new-site{ display:none; }
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.cwv2-shell .dash-sidebar{
  width:252px;
  background-color:var(--side);
  border-right:1px solid var(--side-line);
  box-shadow:none;
  padding:18px 12px 12px;
}
.cwv2-shell .dash-sidebar .logo{
  display:flex;align-items:center;
  padding:0 8px 18px;
  margin:0;
}
.cwv2-shell .dash-sidenav{
  display:flex;flex-direction:column;gap:1px;
}
/* The design's nav row: 34px tall, 8px radius, muted until hovered. */
.cwv2-shell .dash-sidenav-item{
  display:flex;align-items:center;gap:10px;
  height:34px;padding:0 10px;
  border:0;border-radius:8px;background-color:transparent;
  color:var(--ink-2);font-weight:500;font-size:14px;
  width:100%;text-align:left;min-width:0;
  cursor:pointer;
  transition:background .12s ease,color .12s ease;
}
.cwv2-shell .dash-sidenav-item:hover{
  background-color:var(--side-hover);color:var(--ink);
}
.cwv2-shell .dash-sidenav-item.active{
  background-color:var(--side-on);color:var(--accent-2);font-weight:600;
}
.cwv2-shell .dash-sidenav-item svg{
  flex:0 0 auto;width:18px;height:18px;opacity:.9;
  /* The design draws these lighter than the 2 the shared svg() helper emits,
     and a CSS declaration beats the attribute without forking the helper. */
  stroke-width:1.8;
}
.cwv2-shell .dash-sidenav-item.active svg{ opacity:1; }
.cwv2-shell .dash-sidenav-item:focus-visible{
  outline:2px solid var(--accent-fill);outline-offset:2px;
}

/* The divider above "Launch a site".
 *
 * console.css ALREADY styles this as a 1px rule with a background. The first
 * version of this block treated it as an empty element and added 14px of
 * padding plus a top border — and that background filled the padding, turning
 * a hairline into a 15px grey bar in the sidebar. Set the height and colour,
 * never padding. */
.cwv2-shell .dash-sidenav-sep{
  height:1px;padding:0;border:0;
  background-color:var(--side-line);
  margin:14px 8px;
}

/* ── Sidebar footer: the account and sign-out ─────────────────────────── */
.cwv2-shell .dash-sidebar-footer{
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--side-line);
  display:flex;flex-direction:column;gap:8px;
  color:var(--ink-3);font-size:13px;
}
.cwv2-shell .dash-sidebar-footer .cw-btn,
.cwv2-shell .dash-sidebar-footer button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:34px;padding:0 12px;border-radius:9px;
  border:1px solid var(--border-2);background-color:var(--surface);color:var(--ink);
  font-weight:600;font-size:13.5px;width:100%;cursor:pointer;
}
.cwv2-shell .dash-sidebar-footer button:hover{ background-color:var(--hover); }

/* ── Header ───────────────────────────────────────────────────────────── */
.cwv2-shell .cw-header{
  background-color:var(--side);
  border-bottom:1px solid var(--side-line);
  box-shadow:none;
  color:var(--ink);
}
.cwv2-shell .cw-header a,
.cwv2-shell .cw-header .cw-crumb,
.cwv2-shell .cw-header .cw-breadcrumb{ color:var(--ink-3); }
.cwv2-shell .cw-header a:hover{ color:var(--accent); }
.cwv2-shell .cw-header strong,
.cwv2-shell .cw-header [aria-current]{ color:var(--ink); }

/* Header buttons share the design's button shape without being restyled into
 * something the header's own layout cannot hold. */
.cwv2-shell .cw-header-actions .cw-btn,
.cwv2-shell .cw-header-actions button{
  border-radius:9px;
}
.cwv2-shell .cw-header-actions .cw-btn-primary{
  background-color:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);
}
.cwv2-shell .cw-header-actions .cw-btn-primary:hover{
  background-color:var(--accent-2);border-color:var(--accent-2);
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
/* The shell's own breakpoints still own layout; only colour is brought over,
 * so the drawer and bottom bar keep behaving as they do today. */
@media (max-width:899px){
  .cwv2-shell .dash-sidebar{ background-color:var(--side); }
  .cwv2-shell .dash-bottombar,
  .cwv2-shell .cw-bottombar{
    background-color:var(--side);border-top:1px solid var(--side-line);
  }
  .cwv2-shell .dash-bottombar a,
  .cwv2-shell .dash-bottombar button{ color:var(--ink-3); }
  .cwv2-shell .dash-bottombar .active{ color:var(--accent-2); }
}

/* ── Domain: the two ported regions ───────────────────────────────────── */
.cwv2 .dv2-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cwv2 .dv2-id{min-width:0}
.cwv2 .dv2-url{font-size:18px;font-weight:650;letter-spacing:-.01em;color:var(--accent);
  text-decoration:none;overflow-wrap:anywhere}
.cwv2 .dv2-url:hover{text-decoration:underline}
.cwv2 .dv2-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px 20px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border)}
.cwv2 .dv2-facts dt{font-size:12.5px;color:var(--ink-3);margin-bottom:2px}
.cwv2 .dv2-facts dd{margin:0;font-size:14px;font-weight:600;color:var(--ink)}

.cwv2 .dv2-steps{list-style:none;margin:0;padding:0}
.cwv2 .dv2-steps li{display:flex;gap:12px;align-items:flex-start;padding:14px 20px;
  border-bottom:1px solid var(--border)}
.cwv2 .dv2-steps li:last-child{border-bottom:0}
.cwv2 .dv2-steps .mk{flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;
  background:var(--surface-2);color:var(--ink-3);border:1px solid var(--border)}
.cwv2 .dv2-steps li.done .mk{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.cwv2 .dv2-steps li.now .mk{background:var(--accent-fill);color:var(--on-accent);border-color:var(--accent-fill)}
.cwv2 .dv2-steps .lt b{display:block;font-size:14px;font-weight:600;color:var(--ink)}
.cwv2 .dv2-steps .lt span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.cwv2 .dv2-steps.locked{opacity:.6}

/* ── Domain: the STATIC forms, restyled in place ──────────────────────── */
.cwv2-skin .dv-input,.cwv2-skin .ns-input{
  background-color:var(--surface);color:var(--ink);border:1px solid var(--border-2);
  border-radius:9px;height:38px;padding:0 12px;font-size:14px;
}
.cwv2-skin .dv-input:focus{border-color:var(--accent-fill);outline:none}
.cwv2-skin .dv-label,.cwv2-skin .ns-label{color:var(--ink-2);font-size:13px;font-weight:600}
.cwv2-skin .dv-form-hint,.cwv2-skin .dv-head-sub{color:var(--ink-3);font-size:13px}
.cwv2-skin .dv-eyebrow{color:var(--ink-3);font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase}
.cwv2-skin .dv-section-title{font-size:15px;font-weight:650;color:var(--ink);letter-spacing:-.01em}
.cwv2-skin .dv-upsell-title{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.cwv2-skin .nameserver-box{background-color:var(--surface-2);border:1px solid var(--border);
  border-radius:10px}
.cwv2-skin .btn-sm-danger{
  background-color:var(--bad-bg);border:1px solid var(--bad-line);color:var(--bad);
  border-radius:9px;height:30px;padding:0 11px;font-size:12.5px;font-weight:600;cursor:pointer;
}
.cwv2-skin .dv-domain{font-size:17px;font-weight:650;color:var(--ink)}
.cwv2-skin code{background-color:var(--surface-2);border:1px solid var(--border);
  border-radius:5px;padding:1px 5px;font-size:12.5px}

/* ───────────────────────────────────────────────────────────────────────────
 * SUPPORT, PLAN AND BILLING — restyled in place, deliberately not rewritten.
 *
 * Between them these own support messaging with attachments and polling, and
 * Stripe checkout with intro pricing. Rewriting those renderers to change how
 * they look is the trade a staged port exists to avoid, so their own class
 * vocabularies are mapped onto the design instead. Nothing moves, no handler
 * changes, no payment or message path is touched.
 * ──────────────────────────────────────────────────────────────────────── */

/* Panel headers read as the design's page header. */
.cwv2-skin .bl-head,.cwv2-skin .dv-head,.cwv2-skin .sup-head,.cwv2-skin .sites-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px 20px;flex-wrap:wrap;margin:0 0 22px;
}
.cwv2-skin .bl-head-sub,.cwv2-skin .sup-view-sub{
  color:var(--ink-3);font-size:14px;line-height:1.5;margin:4px 0 0;
}
.cwv2-skin .bl-section-title,.cwv2-skin .sup-view-title{
  font-size:15px;font-weight:650;color:var(--ink);letter-spacing:-.01em;margin:30px 0 12px;
}

/* ── Support ──────────────────────────────────────────────────────────── */
.cwv2-skin .sup-conv,.cwv2-skin .sup-thread,.cwv2-skin .sup-compose{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
}
.cwv2-skin .sup-badge{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;
  border-radius:999px;font-size:12px;font-weight:600;
  background-color:var(--mut-bg,var(--surface-2));color:var(--ink-2);
}
.cwv2-skin .sup-badge.is-open,.cwv2-skin .sup-badge.open{background-color:var(--info-bg);color:var(--info)}
.cwv2-skin .sup-badge.is-resolved,.cwv2-skin .sup-badge.resolved{background-color:var(--ok-bg);color:var(--ok)}
.cwv2-skin .sup-badge.is-closed,.cwv2-skin .sup-badge.closed{background-color:var(--surface-2);color:var(--ink-3)}
.cwv2-skin .sup-av{
  border-radius:10px;background-color:var(--accent-bg);color:var(--accent);
  font-weight:700;font-size:13px;
}
/* NO BOX ON .sup-msg. It is the ROW — bubble plus avatar plus the empty
 * space that pushes them to one side — and a border around that draws a
 * frame the width of the thread with the bubble rattling around inside it.
 * The box belongs to .sup-msg-c, which console.css draws.
 *
 * The rule here also had an `.is-mine` / `.mine` variant, and neither class
 * is ever set: the sender's class is `sup-msg-me`. It tinted nothing for as
 * long as it existed. Both are gone rather than corrected, because the row
 * should carry no box at all. */
.cwv2-skin .sup-msg-time,.cwv2-skin .sup-meta,.cwv2-skin .sup-meta-sep{color:var(--ink-3);font-size:12.5px}
/* The dots between "#3", the topic, the website and the date had no margin,
   so the line read as one run-together token. */
.cwv2-skin .sup-meta-sep{margin:0 6px}
.cwv2-skin .sup-back{color:var(--accent);font-weight:600;font-size:13.5px}
.cwv2-skin .sup-error{color:var(--bad);font-size:13.5px}
.cwv2-skin .sup-skel-row{background-color:var(--surface-2);border-radius:8px}
.cwv2-skin .sup-attach-list{color:var(--ink-3);font-size:12.5px}

/* ── Plan: the pricing columns ────────────────────────────────────────── */
.cwv2-skin .ls-plan,.cwv2-skin .pl-up{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
}
.cwv2-skin .ls-plan.is-current,.cwv2-skin .ls-plan.current{
  border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-line) inset;
}
.cwv2-skin .ls-plan-name,.cwv2-skin .pl-up-name{
  font-size:15px;font-weight:650;color:var(--ink);letter-spacing:-.01em;
}
.cwv2-skin .ls-plan-price,.cwv2-skin .pl-up-price,.cwv2-skin .pl-up-amount{
  font-size:30px;font-weight:700;color:var(--ink);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.cwv2-skin .ls-plan-per,.cwv2-skin .pl-up-per,.cwv2-skin .ls-plan-for,
.cwv2-skin .ls-plan-terms,.cwv2-skin .ls-plan-note{color:var(--ink-3);font-size:13px}
.cwv2-skin .ls-plan-feat,.cwv2-skin .pl-up-feat{color:var(--ink-2);font-size:13.5px}
.cwv2-skin .ls-plan-feat-no{color:var(--ink-4)}
.cwv2-skin .pl-hero-intro,.cwv2-skin .pl-up-intro{color:var(--accent);font-weight:600;font-size:13px}
/* THE SEGMENT, not two buttons side by side. The control is one tinted track
   with the chosen half raised out of it; bordering both halves equally made
   them read as a pair of unrelated buttons with no selected state at all.

   `.is-on` / `.on` were the classes named here, and the markup has never used
   either — it writes `.is-active`. The rule matched nothing, which is why the
   selection was invisible under the redesign and visible without it. */
.cwv2-skin .pl-interval-opt{
  border:0;border-radius:7px;color:var(--ink-3);font-weight:600;background:none;
}
.cwv2-skin .pl-interval-opt:hover{ color:var(--ink); }
.cwv2-skin .pl-interval-opt.is-active{
  background-color:var(--surface);color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.cwv2-skin .ls-plan-cta,.cwv2-skin .ls-btn-secondary{border-radius:9px;font-weight:600}

/* ── Billing ──────────────────────────────────────────────────────────── */
.cwv2-skin .bl-sub,.cwv2-skin .bl-invoice,.cwv2-skin .bl-summary-tile{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
}
.cwv2-skin .bl-amount,.cwv2-skin .bl-sub-amount{
  font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink);
}
.cwv2-skin .bl-muted,.cwv2-skin .bl-sub-meta{color:var(--ink-3);font-size:13px}

/* ── Billing, rebuilt ─────────────────────────────────────────────────── */
/* Separate cards, so the strip's own frame has to go with it: the original
   rule above paints the container grey with a border and clips it round, and
   with a 14px gap that grey showed between every card and framed the set —
   faintly on Billing, plainly on a phone where the cards stack. */
.cwv2 .metrics{display:grid;gap:14px;margin-bottom:8px;
  background:none;border:0;border-radius:0;overflow:visible}
.cwv2 .metrics.four{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.cwv2 .metric{background-color:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:14px 16px;min-width:0}
.cwv2 .metric .ml{margin:0 0 6px;font-size:12.5px;color:var(--ink-3)}
.cwv2 .metric .mv{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.cwv2 .metric .mv small{font-size:13px;font-weight:500;color:var(--ink-3);margin-left:3px}
.cwv2 .metric .mf{margin:6px 0 0;font-size:12.5px;color:var(--ink-3)}
.cwv2 .lnk{background:none;border:0;padding:0;color:var(--accent);font:inherit;
  font-size:12.5px;font-weight:600;cursor:pointer;text-align:left}
.cwv2 .lnk:hover{text-decoration:underline}

/* Subscriptions are a table now, not a card each — see subscriptions() in
   billing-v2.js. The card rules that stood here are gone with their markup
   rather than left waiting for a caller that is not coming back. */
.cwv2 .blv2-amt{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.cwv2 .blv2-amt small{font-size:12px;font-weight:500;color:var(--ink-3)}
/* A status pill only appears on a row that is NOT ordinary, so it sits after
   the billing cadence rather than in a column of its own. */
.cwv2 .blv2-st{margin-left:8px}
.cwv2 .blv2-tbl td{vertical-align:middle}

/* The payment-method row: an icon, what is on file, and the way to change
   it. Same identity shape the Settings design card uses, so the two screens
   answer "what have you got of mine" in one voice. */
.cwv2 .blv2-pm{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cwv2 .blv2-pm-ic{
  flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;
  background-color:var(--surface-2);color:var(--ink-3);border:1px solid var(--border);
}
.cwv2 .blv2-pm .st{min-width:0;flex:1 1 180px}
.cwv2 .blv2-pm .nm{margin:0;font-size:13.5px;font-weight:650;color:var(--ink)}
.cwv2 .blv2-pm .hs{margin:1px 0 0;font-size:12.5px;color:var(--ink-3)}

/* ── Support: what survived the move to a table ──────────────────────────
 *
 * This block used to style a list of cards — .supv2-row as a flex card with
 * its own border and padding, inside a .supv2 flex column. The screen is a
 * table now, and the <tr> kept the .supv2-row class, so `display:flex` was
 * still being applied TO A TABLE ROW: the cells stopped aligning to their
 * headers and every row drew its own box inside the card. It looked like a
 * layout bug and it was a stale rule, which is the same trap as .rowlink
 * meaning "enter this website".
 *
 * Only the unread dot survives, because the table still draws one. */
.cwv2 .supv2-dot{width:7px;height:7px;border-radius:50%;background-color:var(--accent-fill)}

/* ── Plan hero, rebuilt ───────────────────────────────────────────────── */
.cwv2 .plv2-hero.dedicated{border-color:var(--accent-line)}
.cwv2 .plv2-top{display:flex;align-items:flex-start;justify-content:space-between;
  gap:20px;flex-wrap:wrap}
.cwv2 .plv2-id{min-width:0;flex:1 1 240px}
.cwv2 .plv2-eyebrow{margin:0;font-size:12px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3)}
.cwv2 .plv2-name{margin:4px 0 0;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.cwv2 .plv2-price{margin:8px 0 0;font-size:32px;font-weight:700;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.cwv2 .plv2-price small{font-size:14px;font-weight:500;color:var(--ink-3);margin-left:2px}
.cwv2 .plv2-note{margin:6px 0 0;font-size:13px;color:var(--ink-3)}
.cwv2 .plv2-id .badge{margin-top:10px}
.cwv2 .plv2-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px;flex:1 1 260px;min-width:0}
.cwv2 .plv2-infra{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px 20px;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border)}
.cwv2 .plv2-infra dt{font-size:12.5px;color:var(--ink-3);margin-bottom:2px}
.cwv2 .plv2-infra dd{margin:0;font-size:13.5px;font-weight:600;color:var(--ink)}
.cwv2 .plv2-next{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;border-top:1px solid var(--border);
  background-color:var(--accent-bg)}
.cwv2 .card-f.between{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap}

/* The design styles .lt only inside .list (and the domain steps), so the two
 * places the port introduces it — the Plan hero's next-step banner and the
 * Profile sign-out row — rendered their title and text run together on one
 * line: "Next step — connect your domainYour dedicated server is…".
 * Generic, additive, and identical to what those scoped rules already do. */
.cwv2 .lt > b{display:block;font-weight:600;overflow-wrap:anywhere}
.cwv2 .lt > span{display:block;color:var(--ink-3);font-size:13px;line-height:1.5}

/* ── Sidebar, rebuilt to the design's shape ───────────────────────────── */
/* The primary action leads, as in the design. */
/* QUIET, not the accent colour. The design's .newbtn is a plain outline
 * button on the sidebar's own surface, and the one filled accent button on
 * Home is the "+ New website" in the page head. Two filled purple buttons for
 * the same action, one above the other, read as two different actions. */
.cwv2-shell .cwv2-newbtn{
  display:flex;align-items:center;gap:8px;
  height:36px;width:100%;margin:0 0 14px;padding:0 12px;
  border:1px solid var(--border-2);border-radius:9px;
  background-color:var(--surface);color:var(--ink);
  font-size:13.5px;font-weight:600;cursor:pointer;
  transition:background-color .12s ease,border-color .12s ease;
}
.cwv2-shell .cwv2-newbtn:hover{background-color:var(--hover);border-color:var(--ink-4)}
.cwv2-shell .cwv2-newbtn:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px}

/* Two groups: the workspace, then the account. */
.cwv2-shell .cwv2-navgroup{display:flex;flex-direction:column;gap:1px}
.cwv2-shell .cwv2-navgroup-2{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--side-line);
}

/* The theme toggle sits with the account controls, as a nav row rather than
 * a button, because it is a preference and not an action on the account. */
/* Specific enough to beat `.cwv2-shell .dash-sidebar-footer button` (0,2,1),
 * which gave the toggle the bordered box every other footer button wants. */
.cwv2-shell .dash-sidebar-footer .cwv2-theme{
  display:flex;align-items:center;gap:10px;
  height:34px;padding:0 10px;width:100%;
  border:0;border-radius:8px;background-color:transparent;
  color:var(--ink-2);font-size:14px;font-weight:500;text-align:left;cursor:pointer;
  transition:background-color .12s ease,color .12s ease;
}
.cwv2-shell .dash-sidebar-footer .cwv2-theme:hover{background-color:var(--side-hover);color:var(--ink)}
.cwv2-shell .dash-sidebar-footer .cwv2-theme svg{flex:0 0 auto;opacity:.9}
.cwv2-shell .dash-sidebar-footer{gap:6px}
.cwv2-shell .dash-sidebar-footer .nav-email{
  font-size:12.5px;color:var(--ink-4);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;padding:0 10px;
}

/* ── The per-website screen's frame ───────────────────────────────────── */
.cwv2 .ph.sdv2-head{align-items:center;gap:14px}
.cwv2 .sdv2-mono{
  flex:0 0 auto;width:44px;height:44px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  background-color:var(--accent-bg);color:var(--accent);font-weight:700;font-size:15px;
}
.cwv2 .ph.sdv2-head .sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cwv2 .sdv2-tabrow{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:20px;
}
.cwv2 .sdv2-tabrow .tabbar{margin-bottom:0;flex:1 1 auto;min-width:0}
/* The section body the redesign hands back to site.js. Its own markup keeps
 * the shell's classes, so it is skinned rather than restyled here. */
.cwv2 .sd-body{min-width:0}

/* Skeletons used by the ported placeholders. The design has its own; these
 * are the two shapes the port needs and nothing more. */
.cwv2 .skel-line{
  background-color:var(--surface-2);border-radius:6px;height:12px;
  animation:cwv2skel 1.2s ease-in-out infinite;
}
.cwv2 .sdv2-mono.skel{background-color:var(--surface-2);color:transparent;
  animation:cwv2skel 1.2s ease-in-out infinite}
@keyframes cwv2skel{0%,100%{opacity:1}50%{opacity:.55}}

/* The design's tab bar styles `a`; the per-website tabs must be BUTTONS,
 * because a tablist's tabs are controls that switch a panel, not links to
 * another page. Without this they rendered with no height and no padding,
 * jammed together as one run of words. Mirrors the `a` rules exactly. */
.cwv2 .tabbar button{
  display:inline-flex;align-items:center;height:42px;padding:0 14px;
  font-size:14px;font-weight:500;font-family:inherit;
  color:var(--ink-3);background:none;border:0;
  border-bottom:2px solid transparent;margin-bottom:-1px;
  white-space:nowrap;flex:0 0 auto;cursor:pointer;
}
.cwv2 .tabbar button:hover{color:var(--ink)}
.cwv2 .tabbar button.on{color:var(--accent);border-bottom-color:var(--accent-fill);font-weight:650}
.cwv2 .tabbar button:focus-visible{outline:2px solid var(--accent-fill);outline-offset:-2px}

/* ───────────────────────────────────────────────────────────────────────────
 * LAUNCH A SITE — the hero, the two starting points and the template library.
 *
 * All static markup in index.php whose ids are bound elsewhere
 * (sites-templates-search, sites-templates-categories, sites-templates-grid,
 * the data-mode buttons that drive the create flow). Rewriting it would mean
 * re-wiring site creation, so it is restyled in place.
 * ──────────────────────────────────────────────────────────────────────── */
.cwv2-skin .ls-hero-title{
  font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:0 0 4px;
}
.cwv2-skin .ls-hero-sub,.cwv2-skin .ls-library-sub{
  color:var(--ink-3);font-size:14px;line-height:1.5;
}
.cwv2-skin .ls-library-title{
  font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--ink);
}

/* The two starting points read as cards, as in the design. */
.cwv2-skin .ls-start,.cwv2-skin .sites-empty-card{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:none;cursor:pointer;text-align:left;
  transition:border-color .12s ease,background-color .12s ease;
}
.cwv2-skin .ls-start:hover,.cwv2-skin .sites-empty-card:hover{
  border-color:var(--accent-line);background-color:var(--accent-bg);
}
.cwv2-skin .ls-start-title,.cwv2-skin .sites-empty-card-title{
  font-size:15px;font-weight:650;color:var(--ink);
}
.cwv2-skin .ls-start-desc,.cwv2-skin .sites-empty-card-desc{
  font-size:13px;color:var(--ink-3);line-height:1.5;
}
.cwv2-skin .ls-start-icon{
  color:var(--accent);background-color:var(--accent-bg);border-radius:10px;
}

/* Category filters, as the design's segmented control. */
.cwv2-skin .browse-tpl-cat{
  height:30px;padding:0 11px;border-radius:999px;
  border:1px solid var(--border-2);background-color:var(--surface);
  color:var(--ink-2);font-size:12.5px;font-weight:600;cursor:pointer;
}
.cwv2-skin .browse-tpl-cat:hover{background-color:var(--hover)}
.cwv2-skin .browse-tpl-cat.active{
  background-color:var(--accent-bg);border-color:var(--accent-line);color:var(--accent);
}
.cwv2-skin .cwp-templates-explore-search-box input,
.cwv2-skin #sites-templates-search{
  background-color:var(--surface);color:var(--ink);
  border:1px solid var(--border-2);border-radius:9px;height:38px;padding:0 12px;font-size:14px;
}
.cwv2-skin #sites-templates-search:focus{border-color:var(--accent-fill);outline:none}

/* Template cards. */
.cwv2-skin .tpl-card,.cwv2-skin .sites-template-card{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
  overflow:hidden;box-shadow:none;
}
.cwv2-skin .tpl-card:hover,.cwv2-skin .sites-template-card:hover{border-color:var(--border-2)}
.cwv2-skin .tpl-card-title,.cwv2-skin .sites-template-name{
  font-size:14px;font-weight:650;color:var(--ink);
}
.cwv2-skin .tpl-card-cat,.cwv2-skin .sites-template-cat{font-size:12.5px;color:var(--ink-3)}

/* The create flow's own steps: address, chips and the finished state. */
.cwv2-skin .ls-field-label,.cwv2-skin .ls-addr-label{
  color:var(--ink-2);font-size:13px;font-weight:600;
}
.cwv2-skin .ls-addr,.cwv2-skin .ls-done-addr{
  background-color:var(--surface-2);border:1px solid var(--border);border-radius:9px;
}
.cwv2-skin .ls-addr-value,.cwv2-skin .ls-done-url{
  color:var(--ink);font-weight:600;overflow-wrap:anywhere;
}
.cwv2-skin .ls-chip{
  background-color:var(--surface-2);border:1px solid var(--border);border-radius:999px;
  color:var(--ink-2);font-size:12.5px;font-weight:600;
}
.cwv2-skin .ls-chip-icon{color:var(--accent)}
.cwv2-skin .ls-chip-count{color:var(--ink-3)}
.cwv2-skin .ls-done-mark{color:var(--ok);background-color:var(--ok-bg);border-radius:50%}
.cwv2-skin .ls-done-title{
  font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink);
}
.cwv2-skin .ls-done-sub,.cwv2-skin .ls-done-foot{color:var(--ink-3);font-size:13.5px}

/* ── Support: the thread and compose views ────────────────────────────── */
/* The list is rebuilt (support-v2.js). These two keep their markup because
 * appendMsg() is incremental and the poller calls it while the thread is
 * open, and the compose form owns attachment upload. */
/* .sup-comp-box IS NO LONGER A CARD. It sits inside .sup-thread-shell, which
   is already a card, and the textarea inside it has a border of its own — so
   framing it here drew a third box: card, then composer frame, then field.
   The design has a rule separating the reply area from the thread and
   nothing else. */
.cwv2-skin .sup-thread-shell,.cwv2-skin .sup-compose-card{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
}
.cwv2-skin .sup-thread-head{border-bottom:1px solid var(--border)}
.cwv2-skin .sup-thread-titles h2,.cwv2-skin .sup-view-title{
  font-size:17px;font-weight:650;letter-spacing:-.01em;color:var(--ink);
}
/* THE BUBBLE IS .sup-msg-c NOW, not .sup-msg-body.
 *
 * This rule drew the box on the body, from back when a message was a caption
 * above a bubble. The message is one container today, so a box here is a
 * second, smaller box nested inside the real one — a grey rectangle behind
 * every line of text, which is what the live thread showed. console.css
 * removes it; this file loads after console.css, so saying so there was not
 * enough. Both halves have to agree.
 *
 * The tinting rule it replaced was keyed on a class the bubble never had:
 * the sender's class sits on .sup-msg, not on its inner container, so that
 * rule could not fire at all. Rewritten against the element that is really
 * there rather than left as decoration. */
.cwv2-skin .sup-msg-body{
  background:none;border:0;border-radius:0;padding:0;
  color:var(--ink);font-size:14px;line-height:1.6;
}
/* THE BUBBLE IS DRAWN ONCE, in console.css, at the prototype's values.
 * It was drawn here too, and because this file loads last the two had to
 * agree or the later one silently won — which is how a white bubble and a
 * grey one ended up nested inside each other. The duplicate is gone; the
 * body rule above stays, because it has to beat dashboard.css. */
.cwv2-skin .sup-day{font-size:12px;color:var(--ink-3)}
.cwv2-skin .sup-day{
  background-color:var(--surface-2);border-radius:999px;padding:3px 10px;
  width:fit-content;margin-inline:auto;
}
.cwv2-skin .sup-av,.cwv2-skin .sup-av-support{
  border-radius:10px;background-color:var(--accent-bg);color:var(--accent);
  font-weight:700;font-size:13px;
}
.cwv2-skin .sup-thread-notice,.cwv2-skin .sup-notice-t{
  background-color:var(--info-bg);border:1px solid var(--info-line);
  border-radius:10px;color:var(--info);
}
.cwv2-skin .sup-notice-d{color:var(--ink-3)}
.cwv2-skin .sup-comp,.cwv2-skin .sup-send,.cwv2-skin textarea.sup-comp{
  border-radius:9px;
}
.cwv2-skin .sup-attach-btn,.cwv2-skin .sup-attach-btn-sm,.cwv2-skin .sup-new-btn{
  border-radius:9px;font-weight:600;
}
/* The pill is white and fully round, matching console.css. This rule used to
   make it a grey 9px box, and because this file loads last it won — so the
   chip stayed grey no matter what the other stylesheet said. `.sup-file` is
   a different control (the composer's pending uploads) and keeps its own
   shape. */
.cwv2-skin .sup-att{
  background-color:var(--surface);border:1px solid var(--border-2);border-radius:999px;
}
.cwv2-skin .sup-file{
  background-color:var(--surface-2);border:1px solid var(--border);border-radius:9px;
}
.cwv2-skin .sup-att-n,.cwv2-skin .sup-file-n{color:var(--ink);font-size:13px;font-weight:600}
.cwv2-skin .sup-att-s,.cwv2-skin .sup-file-s,.cwv2-skin .sup-comp-hint,
.cwv2-skin .sup-compose-sub,.cwv2-skin .sup-optional{color:var(--ink-3);font-size:12.5px}
.cwv2-skin .sup-state-title{font-size:16px;font-weight:650;color:var(--ink)}
.cwv2-skin .sup-state-text,.cwv2-skin .sup-empty-hint{color:var(--ink-3);font-size:13.5px}
.cwv2-skin .sup-state-icon,.cwv2-skin .sup-empty-orb{
  color:var(--ink-4);background-color:var(--surface-2);border-radius:50%;
}
.cwv2-skin .sup-back{color:var(--accent);font-weight:600}
.cwv2-skin .sup-fail-why{color:var(--bad);font-size:12.5px}

/* ── Plan: the static upgrade cards and the comparison table ──────────── */
/* The hero is rebuilt (plan-v2.js); these are static markup that
 * renderUpgrades() only shows and hides. */
.cwv2-skin .pl-up{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
}
.cwv2-skin .pl-up-featured{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-line) inset}
.cwv2-skin .pl-up-eyebrow{
  color:var(--ink-3);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.cwv2-skin .pl-up-status{color:var(--ok);font-size:12.5px;font-weight:600}
.cwv2-skin .pl-up-more{
  background-color:var(--surface-2);border:1px dashed var(--border-2);border-radius:12px;
}
.cwv2-skin .pl-up-more-title{font-size:14px;font-weight:650;color:var(--ink)}
.cwv2-skin .pl-up-more-text{color:var(--ink-3);font-size:13px}
.cwv2-skin .pl-compare-card{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
}
.cwv2-skin .pl-table{border-collapse:collapse;width:100%;font-size:14px}
.cwv2-skin .pl-table th{
  font-size:12.5px;font-weight:500;color:var(--ink-3);text-align:left;
  padding:10px 14px;border-bottom:1px solid var(--border);
}
.cwv2-skin .pl-table td{padding:12px 14px;border-bottom:1px solid var(--border)}
.cwv2-skin .pl-th-tag{
  background-color:var(--accent-bg);color:var(--accent);border-radius:999px;
  font-size:11.5px;font-weight:700;padding:2px 8px;
}
.cwv2-skin .pl-yes{color:var(--ok);font-weight:600}
.cwv2-skin .pl-no{color:var(--ink-4)}
.cwv2-skin .pl-interval{
  background-color:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px;
}
/* THE WHOLE CHIP, because console.css fills it with the accent colour. This
   rule used to set the ink alone, so "Save 15%" came out green on purple —
   two strong colours and no contrast between them, in the one place on the
   step that is trying to persuade. Saving money is a good-news chip: it takes
   the success tint, and the ink that is legible on it. */
.cwv2-skin .pl-interval-save{
  background-color:var(--ok-bg);color:var(--ok);
  font-size:11px;font-weight:700;line-height:1;padding:3px 6px;border-radius:5px;
}
.cwv2-skin .pl-section-title{
  font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--ink);
}
.cwv2-skin .pl-head-sub{color:var(--ink-3);font-size:14px}
.cwv2-skin .pl-meter{background-color:var(--surface-2);border-radius:999px;overflow:hidden}
.cwv2-skin .pl-meter i{background-color:var(--accent-fill);display:block;height:100%}
.cwv2-skin .pl-meter-warn i{background-color:var(--warn-fill,var(--warn))}
.cwv2-skin .pl-meter-danger i{background-color:var(--bad-fill,var(--bad))}
.cwv2-skin .pl-meter-pct,.cwv2-skin .pl-stat-of,.cwv2-skin .pl-stat-sub,
.cwv2-skin .pl-measuring{color:var(--ink-3);font-size:12.5px}
.cwv2-skin .pl-stat-label{color:var(--ink-3);font-size:12.5px}
.cwv2-skin .pl-stat-value{
  color:var(--ink);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}

/* ── Header: the design's search box and the account name ─────────────── */
.cwv2-shell .cw-header{gap:16px}
.cwv2-shell .cwv2-search{
  display:flex;align-items:center;gap:8px;
  /* The design's own sizing: up to 460px, centred by its auto margins in
     whatever the breadcrumb and the right-hand cluster leave. */
  flex:0 1 460px;min-width:0;margin:0 auto;
  height:36px;padding:0 12px;
  border:1px solid var(--border-2);border-radius:9px;
  background-color:var(--surface);color:var(--ink-3);
  font-size:13.5px;font-family:inherit;cursor:pointer;text-align:left;
  transition:background-color .12s ease,border-color .12s ease;
}
.cwv2-shell .cwv2-search:hover{border-color:var(--ink-4);color:var(--ink-2)}
.cwv2-shell .cwv2-search > svg{color:var(--ink-4);flex:0 0 auto}
.cwv2-shell .cwv2-search > span{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cwv2-shell .cwv2-search kbd{
  flex:0 0 auto;font:inherit;font-size:11.5px;font-weight:600;
  color:var(--ink-4);background-color:var(--surface);
  border:1px solid var(--border);border-radius:5px;padding:1px 6px;
}
.cwv2-shell .cwv2-who{
  font-size:13.5px;font-weight:600;color:var(--ink);
  max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cwv2-shell .cwv2-who:empty{display:none}
.cwv2-shell .cw-account-btn{display:flex;align-items:center;gap:8px}

/* The search box is the first thing to go when the bar gets tight. */
@media (max-width:899px){
  .cwv2-shell .cwv2-search{display:none}
  .cwv2-shell .cwv2-who{display:none}
}

/* ── Sidebar: the allowance block ─────────────────────────────────────── */
.cwv2-shell .cwv2-usage{
  padding:10px;border:1px solid var(--side-line);border-radius:10px;
  background-color:var(--surface-2);margin-bottom:4px;
}
.cwv2-shell .cwv2-usage-h{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
}
.cwv2-shell .cwv2-usage-h b{font-size:12.5px;font-weight:650;color:var(--ink)}
.cwv2-shell .cwv2-usage p{margin:3px 0 7px;font-size:12px;color:var(--ink-3)}
.cwv2-shell .cwv2-usage-bar{
  display:block;height:5px;border-radius:999px;background-color:var(--border);overflow:hidden;
}
.cwv2-shell .cwv2-usage-bar i{display:block;height:100%;background-color:var(--accent-fill)}
.cwv2-shell .cwv2-usage-bar.full i{background-color:var(--warn-fill,var(--warn))}
.cwv2-shell .lnk,
.cwv2-shell .dash-sidebar-footer .cwv2-usage .lnk{
  background:none;border:0;padding:0;height:auto;width:auto;color:var(--accent);
  font:inherit;font-size:12px;font-weight:600;cursor:pointer;
}
.cwv2-shell .dash-sidebar-footer .cwv2-usage .lnk:hover{
  background:none;text-decoration:underline;
}
/* The allowance heading must not wrap its label onto two lines. */
.cwv2-shell .cwv2-usage-h b{white-space:nowrap}

/* ---- the design's information architecture ------------------------------
 *
 * Domain, Plan and "Launch a site" leave the sidebar: the first two belong to
 * a website and are reached through its own tabs, the third is the New website
 * button. Their nav items STAY in the DOM, because the attention rows, the
 * upgrade CTAs and the usage block all navigate by clicking them.
 */
.cwv2-shell .dash-sidenav-item.cwv2-nav-hidden{display:none}

/* How many, beside the label. */
.cwv2-shell .cwv2-navcount{
  margin-left:auto;font-size:12px;font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums;flex:0 0 auto;
}
.cwv2-shell .dash-sidenav-item.active .cwv2-navcount{color:inherit}

/* The current website, under Websites — the design's site block. It is a
 * switcher: the whole point is that moving between websites does not mean
 * going back to a list first. */
.cwv2-shell .cwv2-siteblock{position:relative;margin:3px 0 3px 10px;padding-left:11px}
.cwv2-shell .cwv2-siteblock::before{
  content:"";position:absolute;left:0;top:3px;bottom:3px;width:1px;
  background-color:var(--side-line);
}
.cwv2-shell .cwv2-sw{
  display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;
  border-radius:8px;background:none;border:0;cursor:pointer;text-align:left;
  color:var(--ink);
}
.cwv2-shell .cwv2-sw:hover{background-color:var(--side-hover)}
.cwv2-shell .cwv2-sw:focus-visible{outline:2px solid var(--accent-fill);outline-offset:-2px}
.cwv2-shell .cwv2-sw-mono{
  flex:0 0 auto;width:26px;height:26px;border-radius:7px;display:inline-flex;
  align-items:center;justify-content:center;font-size:10.5px;font-weight:700;
  background-color:var(--side-hover);color:var(--ink);letter-spacing:.02em;
}
.cwv2-shell .cwv2-sw-tx{min-width:0;flex:1 1 auto;display:block}
.cwv2-shell .cwv2-sw-n{
  display:block;font-size:13px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cwv2-shell .cwv2-sw-m{
  display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);
  margin-top:1px;
}
.cwv2-shell .cwv2-sw-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto}
.cwv2-shell .cwv2-sw-dot.ok{background-color:var(--ok-fill)}
.cwv2-shell .cwv2-sw-dot.warn{background-color:var(--warn-fill)}
.cwv2-shell .cwv2-sw-dot.bad{background-color:var(--bad-fill)}
.cwv2-shell .cwv2-sw-dot.mut, .cwv2-shell .cwv2-sw-dot.info{background-color:var(--ink-3)}
.cwv2-shell .cwv2-sw > svg{flex:0 0 auto;color:var(--ink-3)}

.cwv2-shell .cwv2-swmenu{
  position:absolute;z-index:40;left:11px;right:0;top:calc(100% + 3px);
  background-color:var(--surface);border:1px solid var(--border);border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.16);padding:5px;max-height:320px;overflow-y:auto;
}
.cwv2-shell .cwv2-swmenu button{
  display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border-radius:7px;
  background:none;border:0;cursor:pointer;text-align:left;font-size:13px;color:var(--ink);
}
.cwv2-shell .cwv2-swmenu button:hover{background-color:var(--surface-2)}
.cwv2-shell .cwv2-swmenu button.on{font-weight:650;color:var(--accent)}
.cwv2-shell .cwv2-swmenu .nm{
  min-width:0;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cwv2-shell .cwv2-swmenu .cwv2-swall{
  border-top:1px solid var(--border);margin-top:4px;padding-top:8px;
  color:var(--accent);font-weight:600;
}


/* ==========================================================================
 * THE BRIDGE LAYER — the shipped component classes, in the design's language.
 *
 * Every screen in the port renders its FRAME through a *-v2.js module, and its
 * BODY through the module that already shipped: site.js's sections,
 * plan-view.js's upgrade cards, domain-view.js, support.js's thread,
 * dashboard.js's modals. Those bodies carry live operations — backups,
 * restores, checkout, a migration poller — and rebuilding them to change an
 * appearance was never the right trade.
 *
 * So the frame was new and the bodies were not, which is exactly what the
 * side-by-side screenshots showed: a redesigned header above cards in the old
 * visual language. This layer closes that gap. It restyles the shipped classes
 * `cw-card`, `cw-btn`, `cw-stat`, `cw-badge`, `cw-field`, `cw-table`,
 * `cw-tabs`, `cw-empty`, `cw-note`, `hxm-bar` and the `sd-*` layout classes to
 * the same values the design's own `.card`, `.btn`, `.badge` and `.tbl` use.
 *
 * Scoped to `.cwv2`, so an account not on the flag is untouched, and ONLY
 * appearance: no class is renamed, no hook moved, no markup required.
 *
 * Values are the design's, read from the rules above rather than re-invented —
 * if a token here disagrees with the one in the design layer, the design layer
 * is right and this is the bug.
 * ========================================================================== */

/* ---- cards ---- */
.cwv2 .cw-card{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
  margin-bottom:20px;min-width:0;padding:16px 20px;box-shadow:none;
}
.cwv2 .cw-card:last-child{margin-bottom:0}
.cwv2 .cw-card-title{
  font-size:15px;font-weight:650;color:var(--ink);letter-spacing:-.01em;
  margin:0 0 10px;padding:0;border:0;
}
/* A card's own sentence, under its title: the design's secondary text. */
.cwv2 .cw-card-said{
  font-size:13.5px;line-height:1.55;color:var(--ink-3);margin:0 0 14px;
}
.cwv2 .cw-card-actions{
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:14px;
}
.cwv2 .cw-banner{
  border:1px solid var(--border);border-radius:10px;padding:12px 14px;
  background-color:var(--surface-2);font-size:13.5px;line-height:1.55;
  color:var(--ink-2);margin-bottom:16px;
}
.cwv2 .cw-banner-info{
  background-color:var(--info-bg);border-color:transparent;color:var(--info);
}
.cwv2 .cw-note{font-size:12.5px;line-height:1.55;color:var(--ink-3)}
.cwv2 .cw-label{font-size:12.5px;font-weight:500;color:var(--ink-3)}
.cwv2 .cw-link, .cwv2 .cw-copy{
  color:var(--accent);font-weight:600;background:none;border:0;padding:0;
  font:inherit;cursor:pointer;text-align:left;
}
.cwv2 .cw-link:hover, .cwv2 .cw-copy:hover{text-decoration:underline}

/* ---- buttons: the design's .btn, and its modifiers ---- */
.cwv2 .cw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 14px;border-radius:9px;font-size:13.5px;font-weight:600;
  background-color:var(--surface);color:var(--ink);border:1px solid var(--border-2);
  white-space:nowrap;text-decoration:none;cursor:pointer;flex:0 0 auto;
  transition:background-color .12s,border-color .12s;box-shadow:none;
}
.cwv2 .cw-btn:hover{background-color:var(--surface-2);color:var(--ink);text-decoration:none}
.cwv2 .cw-btn:active{background-color:var(--hover)}
.cwv2 .cw-btn:focus-visible{outline:2px solid var(--accent-fill);outline-offset:2px}
.cwv2 .cw-btn-primary{
  background-color:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);
}
.cwv2 .cw-btn-primary:hover{
  background-color:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent);
}
.cwv2 .cw-btn-danger{
  background-color:var(--bad-fill);border-color:var(--bad-fill);color:var(--on-accent);
}
.cwv2 .cw-btn-danger:hover{filter:brightness(.92);color:var(--on-accent)}
.cwv2 .cw-btn-ghost{
  background:none;border-color:transparent;color:var(--accent);padding:0 8px;
}
.cwv2 .cw-btn-ghost:hover{background-color:var(--accent-bg);color:var(--accent-2)}
.cwv2 .cw-btn-sm{height:30px;padding:0 11px;font-size:13px;border-radius:8px}
.cwv2 .cw-btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}

/* ---- statistics: the design's metric tile ---- */
.cwv2 .ov-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;
}
.cwv2 .cw-card.cw-stat{margin-bottom:0;padding:14px 16px}
.cwv2 .cw-stat-label{
  font-size:12.5px;font-weight:500;color:var(--ink-3);margin:0 0 6px;
  /* console.css sets `text-transform:uppercase; letter-spacing:.07em` on this
     class. Restyling a class the shell already styles means UNDOING what it
     set, not only adding: without these two the tiles still read
     "MONTHLY TOTAL" in letter-spaced caps, where the design reads
     "Monthly total". Nothing here was wrong, and nothing here was enough. */
  text-transform:none;letter-spacing:0;line-height:1.4;
}
.cwv2 .cw-stat-value{
  font-size:25px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cwv2 .cw-stat-delta{
  font-size:12.5px;line-height:1.5;color:var(--ink-3);margin-top:5px;
}

/* ---- status: badges and dots ---- */
.cwv2 .cw-badge{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;
  border-radius:6px;font-size:12px;font-weight:600;line-height:22px;
  white-space:nowrap;vertical-align:middle;text-transform:none;letter-spacing:0;
  background-color:var(--mut-bg);color:var(--mut);border:0;
}
.cwv2 .cw-badge-ok{background-color:var(--ok-bg);color:var(--ok)}
.cwv2 .cw-badge-warn{background-color:var(--warn-bg);color:var(--warn)}
.cwv2 .cw-badge-bad, .cwv2 .cw-badge-danger{background-color:var(--bad-bg);color:var(--bad)}
.cwv2 .cw-badge-info, .cwv2 .cw-badge-run{background-color:var(--info-bg);color:var(--info)}
.cwv2 .cw-dot{
  display:inline-block;width:7px;height:7px;border-radius:50%;flex:0 0 auto;
  background-color:var(--ok-fill);
}
.cwv2 .cw-dot.warn{background-color:var(--warn-fill)}
.cwv2 .cw-dot.bad{background-color:var(--bad-fill)}
.cwv2 .cw-dot.mut{background-color:var(--ink-4)}

/* ---- meters: hxm-bar is the shipped storage/usage bar ---- */
.cwv2 .hxm-bar{
  height:5px;border-radius:3px;background-color:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--border);overflow:hidden;
}
.cwv2 .hxm-bar i{display:block;height:100%;border-radius:3px;background-color:var(--ink-3)}
.cwv2 .hxm-bar.amber i{background-color:var(--warn-fill)}
.cwv2 .hxm-bar.red i{background-color:var(--bad-fill)}

/* ---- tables ---- */
.cwv2 .cw-table{width:100%;border-collapse:collapse;font-size:14px}
.cwv2 .cw-table th{
  font-size:12.5px;font-weight:500;color:var(--ink-3);text-align:left;
  padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;background:none;
}
.cwv2 .cw-table td{
  padding:12px;border-bottom:1px solid var(--border);vertical-align:middle;min-width:0;
}
.cwv2 .cw-table tbody tr:last-child td{border-bottom:0}

/* ---- sub-navigation inside a body ---- */
.cwv2 .cw-tabs, .cwv2 .cw-subtabs{
  display:flex;gap:2px;border-bottom:1px solid var(--border);overflow-x:auto;
}
.cwv2 .cw-tab, .cwv2 .cw-subtab{
  display:inline-flex;align-items:center;height:38px;padding:0 13px;
  font-size:13.5px;font-weight:500;color:var(--ink-3);background:none;border:0;
  border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;
}
.cwv2 .cw-tab:hover, .cwv2 .cw-subtab:hover{color:var(--ink)}
.cwv2 .cw-tab[aria-selected="true"], .cwv2 .cw-subtab[aria-selected="true"]{
  color:var(--accent);border-bottom-color:var(--accent-fill);font-weight:650;
}

/* ---- forms ---- */
.cwv2 .cw-field{margin-bottom:16px;min-width:0}
.cwv2 .cw-field:last-child{margin-bottom:0}
.cwv2 .cw-field>label{display:block;font-weight:600;font-size:13.5px;margin-bottom:5px}
/* NOT .cw-num. It was grouped here as if it were a number INPUT, and it is
 * not one — console.css defines it as `font-variant-numeric: tabular-nums`,
 * a typographic class for figures that should line up. Nothing in this app
 * ever renders it as an <input>.
 *
 * So every element carrying it inside a .cwv2 root was being drawn as a form
 * field: a 1px border, a white fill, min-height 38px and width:100%. On the
 * backups table that boxed the Size column, which is how it was spotted —
 * but it also hit the billing stat values, the invoice and subscription
 * amounts, the plan hero price and the per-site view counts. Every large
 * figure on the money screens was sitting in an input box.
 *
 * Grouping a class by its NAME rather than by what it is, is the whole bug:
 * "num" reads like a numeric field and means a numeral. */
.cwv2 .cw-input, .cwv2 .cw-select{
  width:100%;min-height:38px;padding:8px 12px;border-radius:9px;font-size:14px;
  background-color:var(--surface);border:1px solid var(--border-2);color:var(--ink);
  box-shadow:none;
}
.cwv2 .cw-input:focus, .cwv2 .cw-select:focus{
  outline:none;border-color:var(--accent-fill);box-shadow:0 0 0 3px var(--accent-bg);
}
/* What the class actually means, carried into the redesign scope. */
.cwv2 .cw-num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.cwv2 .cw-input::placeholder{color:var(--ink-4)}
.cwv2 .cw-field-error{font-size:12.5px;color:var(--bad);margin-top:5px}

/* ---- empty states ---- */
.cwv2 .cw-empty{text-align:center;padding:40px 24px;max-width:460px;margin:0 auto}
.cwv2 .cw-empty-title{font-size:16px;font-weight:650;color:var(--ink)}
.cwv2 .cw-empty-text{color:var(--ink-3);margin:6px 0 0;line-height:1.55;font-size:13.5px}

/* ---- skeletons ---- */
.cwv2 .cw-skel, .cwv2 .cw-skel-title, .cwv2 .cw-skel-text, .cwv2 .cw-skel-block{
  background-color:var(--surface-2);border-radius:6px;
  animation:cwv2skel 1.2s ease-in-out infinite;
}

/* ---- the per-website layout ---- */
.cwv2 .sd-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px}
.cwv2 .sd-col{min-width:0}
@media (max-width:900px){ .cwv2 .sd-grid{grid-template-columns:minmax(0,1fr)} }

/* Plan & usage: the fact list, in the design's definition-list form. */
.cwv2 .sd-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px 18px;margin:0;padding:14px 0 0;border-top:1px solid var(--border);
}
.cwv2 .sd-facts dt{font-size:12.5px;color:var(--ink-3);margin-bottom:2px}
.cwv2 .sd-facts dd{margin:0;font-size:13.5px;font-weight:600;color:var(--ink);overflow-wrap:anywhere}

/* The standing-proof rows (Monitoring, Backups, SSL, PHP, cache). */
.cwv2 .sd-conf-row{
  display:flex;align-items:center;gap:10px;padding:9px 0;font-size:13.5px;
  border-bottom:1px solid var(--border);
}
.cwv2 .sd-conf-row:last-child{border-bottom:0}
.cwv2 .sd-tick{flex:0 0 auto;display:inline-flex;color:var(--ok)}
.cwv2 .sd-conf-foot{font-size:12.5px;color:var(--ink-3);margin-top:10px}

/* The trial countdown, and the one place the design allows a tinted card. */
.cwv2 .sd-trial-card{border-color:var(--accent-fill)}
.cwv2 .sd-trial-card.sd-trial-over{border-color:var(--warn-fill)}
.cwv2 .sd-trial-said{font-size:13.5px;line-height:1.55;color:var(--ink-2)}

/* Delete and other irreversible actions keep their own, quieter frame: the
   design does not shout, it separates. */
/* --bad-line, not --bad-fill. A full-strength red rule around the card was
   the loudest thing on the screen, which is the opposite of what a quiet
   frame is for: the button inside is already red, and two reds competing
   makes neither of them mean anything. The frame separates; the button
   warns. */
.cwv2 .sd-danger{border-color:var(--bad-line)}
.cwv2 .sd-danger-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}

/* Activity timeline. */
.cwv2 .tl-row{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--border)}
.cwv2 .tl-row:last-child{border-bottom:0}
.cwv2 .tl-dot{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:6px;
  background-color:var(--ink-4);
}
.cwv2 .tl-main{min-width:0;flex:1 1 auto}
.cwv2 .tl-label{font-size:13.5px;font-weight:600;color:var(--ink)}
.cwv2 .tl-meta{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.cwv2 .tl-time{font-size:12.5px;color:var(--ink-4);white-space:nowrap;flex:0 0 auto}


/* ══ Plan & usage, on a website's own screen ════════════════════════════════
 *
 * The chooser the design puts here: a section head with the billing-interval
 * control on its right, a row of plan cards with the current one outlined,
 * and two cards underneath.
 *
 * The cards are a grid rather than flex so every one is the same height with
 * its button on the same line — a price list where the CTAs stagger reads as
 * three unrelated boxes. `align-items:stretch` plus `margin-top:auto` on the
 * CTA does that without a fixed height, so a plan with two extra bullets
 * grows the whole row instead of overflowing its own card.
 */
.cwv2 .sdpl-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:16px;
}
.cwv2 .sdpl-head-t{min-width:0;flex:1 1 340px}
.cwv2 .sdpl-h{font-size:19px;line-height:26px;font-weight:650;color:var(--ink);margin:0}
.cwv2 .sdpl-sub{font-size:13.5px;line-height:1.55;color:var(--ink-3);margin:4px 0 0;max-width:62ch}

/* The interval control. Same segmented shape as the Plan tab's, so the two
   surfaces that drive ONE selection also look like one control. */
.cwv2 .sdpl-ivl{
  display:inline-flex;gap:2px;padding:3px;border-radius:10px;flex:0 0 auto;
  background-color:var(--surface-2);border:1px solid var(--border);
}
.cwv2 .sdpl-ivl-opt{
  display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  padding:6px 14px;border-radius:7px;font-family:inherit;font-weight:600;font-size:13px;line-height:18px;
  background:none;color:var(--ink-3);
}
.cwv2 .sdpl-ivl-opt:hover{color:var(--ink)}
.cwv2 .sdpl-ivl-opt.is-active{
  background-color:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(22,22,31,.08);
}
.cwv2 .sdpl-save:empty{display:none}
.cwv2 .sdpl-save{
  font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:999px;
  background-color:var(--ok-bg);color:var(--ok);
}

.cwv2 .sdpl-plans{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
  gap:16px;align-items:stretch;margin-bottom:20px;
}
.cwv2 .sdpl-card{
  display:flex;flex-direction:column;min-width:0;
  padding:18px;border-radius:12px;
  background-color:var(--surface);border:1px solid var(--border);
}
/* The plan you are on is OUTLINED, not filled: a tinted card reads as the
   recommended one, and the current plan is a statement of fact. */
.cwv2 .sdpl-card.cur{border-color:var(--accent-fill);box-shadow:0 0 0 1px var(--accent-fill)}

.cwv2 .sdpl-name{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;
  font-size:15px;font-weight:650;color:var(--ink);
}
.cwv2 .sdpl-price{display:flex;align-items:baseline;gap:6px;margin:10px 0 0;flex-wrap:wrap}
.cwv2 .sdpl-amt{font-size:30px;line-height:36px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.cwv2 .sdpl-per{font-size:13px;color:var(--ink-3);font-weight:450}
/* Reserves its line whether or not there are terms, so three cards keep their
   prices and their bullet lists on the same baselines. */
.cwv2 .sdpl-terms{
  margin:4px 0 0;min-height:18px;font-size:12.5px;line-height:18px;color:var(--ink-3);
}

.cwv2 .sdpl-feat{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.cwv2 .sdpl-feat li{
  display:grid;grid-template-columns:16px minmax(0,1fr);gap:9px;align-items:start;
  font-size:13.5px;line-height:19px;color:var(--ink-2);
}
.cwv2 .sdpl-tick{color:var(--ok);margin-top:2px}
.cwv2 .sdpl-cta{margin-top:auto;padding-top:16px}
/* The free trial has no button — on a phone, where each card is its own
   row, the reserved space is just a hole at the foot of the card. */
.cwv2 .sdpl-cta:empty{display:none}
.cwv2 .sdpl-cta .cw-btn{width:100%;justify-content:center}

/* The size counter mounts into the Dedicated card, with the markup the Plan
   tab's own counter uses — one implementation, two places. Only the frame is
   set here, and it is set FLAT: console.css draws this control as a filled
   grey well, which inside a plan card reads as a second card and buries the
   price above it. The design has one quiet line. */
.cwv2 .sdpl-size{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:12px 0 0;padding:0;border:0;border-radius:0;background:none;
  font-size:12.5px;color:var(--ink-3);
}
.cwv2 .sdpl-size[hidden]{display:none}
.cwv2 .sdpl-size .ded-size-label{font-size:12.5px;color:var(--ink-3);font-weight:450}
.cwv2 .sdpl-size .ded-size-ctl{
  display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:8px;
  background-color:var(--surface);border:1px solid var(--border-2);
}
.cwv2 .sdpl-size .ded-size-btn{
  width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:6px;cursor:pointer;font-family:inherit;font-weight:600;font-size:14px;line-height:1;
  background:none;color:var(--ink-2);
}
.cwv2 .sdpl-size .ded-size-btn:hover:not(:disabled){background-color:var(--hover);color:var(--ink)}
.cwv2 .sdpl-size .ded-size-btn:disabled{color:var(--ink-4);cursor:default}
.cwv2 .sdpl-size .ded-size-val{
  min-width:56px;text-align:center;font-size:12.5px;font-weight:650;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.cwv2 .sdpl-size .ded-size-note{font-size:12.5px;color:var(--ink-4)}

.cwv2 .sdpl-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;align-items:start;
}

/* Usage rows: label, bar, figure. The bar column collapses to nothing on the
   rows that have no ceiling to draw, which is why the figure spans it. */
.cwv2 .sdpl-meter{
  display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--border);
}
.cwv2 .sdpl-meter:last-of-type{border-bottom:0}
.cwv2 .sdpl-meter-l{font-size:13px;color:var(--ink-3)}
.cwv2 .sdpl-meter-v{font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}
.cwv2 .sdpl-meter-v.wide{grid-column:2 / -1}

.cwv2 .sdpl-change{list-style:none;margin:4px 0 0;padding:0}
.cwv2 .sdpl-change li{
  display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);
}
.cwv2 .sdpl-change li:last-child{border-bottom:0;padding-bottom:0}
.cwv2 .sdpl-ch-ic{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;
  background-color:var(--accent-bg);color:var(--accent);
}
.cwv2 .sdpl-ch-t{min-width:0;display:block}
.cwv2 .sdpl-ch-t b{display:block;font-size:13.5px;font-weight:650;color:var(--ink)}
.cwv2 .sdpl-ch-t span{display:block;font-size:12.5px;line-height:18px;color:var(--ink-3);margin-top:2px}

/* Phones: the interval control goes full width under the heading rather than
   squeezing onto the same line at 40% of its size. */
@media (max-width:560px){
  .cwv2 .sdpl-ivl{width:100%}
  .cwv2 .sdpl-ivl-opt{flex:1 1 0;justify-content:center}
  .cwv2 .sdpl-meter{grid-template-columns:74px minmax(0,1fr) auto;gap:8px}
}


/* ══ Activity: the design's feed ════════════════════════════════
 *
 * The card holds no padding of its own. Every rule in here — the strip under
 * the filters, the line between two entries, the line above the footer — runs
 * the full width of the card, and that cannot be drawn from inside an inset.
 * Each part brings its own padding instead.
 */
.cwv2 .cw-card.act-card{padding:0;overflow:hidden}
.cwv2 .act-pad{padding:16px 20px}

/* Pills, not underline tabs. These select WHAT IS LISTED; the underline strip
   above them selects which screen you are on. Two controls a few pixels apart
   that look identical and mean different things is the thing to avoid. */
.cwv2 .act-tabs{
  display:flex;align-items:center;gap:2px;padding:10px 14px;overflow-x:auto;
  border-bottom:1px solid var(--border);scrollbar-width:none;
}
.cwv2 .act-tabs::-webkit-scrollbar{display:none}
.cwv2 .act-tab{
  display:flex;align-items:center;gap:6px;flex:0 0 auto;height:30px;padding:0 11px;
  border:0;border-radius:8px;cursor:pointer;white-space:nowrap;
  font-family:inherit;font-weight:600;font-size:13.5px;line-height:1;background:none;color:var(--ink-3);
}
.cwv2 .act-tab:hover{color:var(--ink);background-color:var(--surface-2)}
.cwv2 .act-tab.on{
  background-color:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border);
}
.cwv2 .act-count{font-size:12px;font-weight:600;color:var(--ink-4);font-variant-numeric:tabular-nums}
.cwv2 .act-tab.on .act-count{color:var(--ink-3)}

/* When it happened on the left, what happened on the right. The time column
   is fixed so every row's text starts on the same line — a ragged left edge
   is what makes a twenty-row history unreadable. */
.cwv2 .act-feed{list-style:none;margin:0;padding:0}
.cwv2 .act-feed li{
  display:grid;grid-template-columns:106px minmax(0,1fr);gap:12px;
  padding:11px 20px;border-top:1px solid var(--border);
}
.cwv2 .act-feed li:first-child{border-top:0}
/* The Overview card already supplies the 20px gutter, so the inset copy
   drops it rather than indenting the feed twice. */
.cwv2 .act-feed-inset li{padding-left:0;padding-right:0}
.cwv2 .f-at{
  font-size:12.5px;color:var(--ink-4);padding-top:1px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums;
}
.cwv2 .f-tx{min-width:0}
.cwv2 .f-tx b{display:block;font-weight:500;font-size:13.5px;color:var(--ink);overflow-wrap:anywhere}
.cwv2 .f-tx span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:1px}
/* Only failures are marked. A tone on every row is decoration; a tone on the
   two that went wrong is the reason the screen was opened. */
.cwv2 .act-feed li.bad .f-tx b{color:var(--bad)}

.cwv2 .act-more{display:flex;justify-content:center;padding:12px 20px;border-top:1px solid var(--border)}
.cwv2 .act-foot{
  display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;
  padding:12px 20px;border-top:1px solid var(--border);
  font-size:13px;color:var(--ink-3);
}

/* Phones: the time column would leave about nine characters for the label. */
@media (max-width:560px){
  .cwv2 .act-feed li{grid-template-columns:minmax(0,1fr);gap:2px}
  .cwv2 .f-at{order:2;padding-top:2px}
}


/* ══ Settings: a heading over each thing you can do ════════════════════════
 *
 * The design labels each card from outside it rather than inside: "Design",
 * "Duplicate", "Delete website" sit above their cards, so the four actions
 * read as a list of choices instead of four unrelated panels.
 */
.cwv2 .sd-sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:28px 0 12px;flex-wrap:wrap}
.cwv2 .sd-sec-h:first-child{margin-top:0}
.cwv2 .sd-sec-h h2{font-size:16px;line-height:24px;font-weight:650;color:var(--ink);margin:0}
.cwv2 .sd-sec-h + .cw-card{margin-bottom:0}
.cwv2 .sd-sec-h p{margin:0}

/* The name form. Its footer rule is the design's: a form that can be
   submitted says so with a bar under it, rather than a button floating in
   the body with nothing marking it as the end. */
.cwv2 .cw-card.sd-form-card{padding:0;overflow:hidden}
.cwv2 .sd-form-b{padding:16px 20px}
.cwv2 .sd-form-f{
  display:flex;justify-content:flex-end;padding:12px 20px;
  border-top:1px solid var(--border);background-color:var(--surface-2);
}
.cwv2 .sd-lab{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.cwv2 .sd-in{
  width:100%;min-height:38px;padding:8px 12px;border-radius:9px;font-family:inherit;font-weight:450;font-size:14px;line-height:22px;
  background-color:var(--surface);border:1px solid var(--border-2);color:var(--ink);
}
.cwv2 .sd-in:focus{border-color:var(--accent-fill);outline:none;
  box-shadow:0 0 0 3px var(--accent-bg)}
.cwv2 .sd-hint{margin:7px 0 0;font-size:12.5px;line-height:18px;color:var(--ink-3)}

/* An identity row: an icon, a name with its one-line description, and the
   action at the far end. The design uses it wherever the answer to a
   question is a THING rather than a sentence. */
.cwv2 .sd-id-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cwv2 .sd-id-ic{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;
  background-color:var(--surface-2);color:var(--ink-3);border:1px solid var(--border);
}
.cwv2 .sd-id-row .st{min-width:0;flex:1 1 160px}
.cwv2 .sd-id-row .nm{margin:0;font-size:13.5px;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.cwv2 .sd-id-row .hs{margin:1px 0 0;font-size:12.5px;color:var(--ink-3)}

/* Button and its note on one line, as the design pairs them. */
.cwv2 .sd-btn-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

/* Delete is a text button. The weight belongs on the sentence above it and
   on the confirmation that follows, which asks for the address to be typed
   — a filled red button here makes the card shout and the dialog redundant. */
.cwv2 .cw-btn.sd-del-link{
  background:none;border-color:transparent;color:var(--bad);padding-left:0;padding-right:8px;
}
.cwv2 .cw-btn.sd-del-link:hover{background-color:var(--bad-bg);color:var(--bad);padding-left:8px}


/* ══ Support: Common questions ═════════════════════════════════════════════
 *
 * Written, not fetched: this platform has no help content, so the choice was
 * between six real answers here and a "Browse help" button that goes
 * nowhere. Every answer is kept in the DOM and hidden by this stylesheet
 * rather than inserted on open, so the browser's own find-in-page can reach
 * text the reader has not expanded yet.
 */
.cwv2 .supv2-faq{ margin-top:20px }
.cwv2 .supv2-faq-item{ border-top:1px solid var(--border) }
.cwv2 .supv2-faq-item:first-child{ border-top:0 }
.cwv2 .supv2-faq-q{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:13px 16px;border:0;background:none;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:13.5px;line-height:20px;color:var(--ink);
}
.cwv2 .supv2-faq-q:hover{ background-color:var(--surface-2) }
.cwv2 .supv2-faq-q .ic{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:inline-flex;
  align-items:center;justify-content:center;
  background-color:var(--surface-2);color:var(--ink-3);
}
.cwv2 .supv2-faq-q .t{ flex:1 1 auto;min-width:0 }
.cwv2 .supv2-faq-q .chev{
  flex:0 0 auto;display:flex;color:var(--ink-4);
  transform:rotate(90deg);transition:transform 120ms ease-out;
}
.cwv2 .supv2-faq-item.on .supv2-faq-q .chev{ transform:rotate(-90deg) }
.cwv2 .supv2-faq-item.on .supv2-faq-q .ic{ background-color:var(--accent-bg);color:var(--accent) }
/* Present but not displayed. clip rather than display:none would keep it
   findable in more browsers, but it also keeps it in the a11y tree, where an
   unexpanded answer does not belong. */
.cwv2 .supv2-faq-a{ display:none;padding:0 16px 15px 53px }
.cwv2 .supv2-faq-item.on .supv2-faq-a{ display:block }
.cwv2 .supv2-faq-a p{ margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2) }
.cwv2 .supv2-faq-a code{
  font-family:ui-monospace,'SF Mono','Cascadia Code',Menlo,monospace;font-size:12.5px;
  padding:1px 5px;border-radius:5px;background-color:var(--surface-2);
}

/* The two header buttons sit together. Scoped like everything else here:
   the Support panel carries .cwv2-host once this module renders, and an
   unflagged account keeps the single button it has always had. */
.cwv2-host .sup-head-cta{ display:flex;align-items:center;gap:10px;flex-wrap:wrap }
@media (max-width:560px){
  .cwv2 .supv2-bar{ padding:10px }
  .cwv2 .supv2-seg{ width:100% }
  .cwv2 .supv2-faq-a{ padding-left:16px }
}

/* ══ Support: starting a conversation ══════════════════════════════════════
 *
 * The form on the left, and on the right the three things worth knowing
 * before pressing send. All three used to arrive only in the reply.
 */
.cwv2 .sup-compose-h{ margin:4px 0 16px }
.cwv2 .sup-compose-grid{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start;
}
/* The rail is context, not a step: below the form on a narrow screen, and
   never between the reader and the field they were filling in. */
@media (max-width:900px){
  .cwv2 .sup-compose-grid{ grid-template-columns:minmax(0,1fr) }
}
/* The card's padding is set HERE rather than inherited: console.css gives it
   a padding built from a spacing token that does not resolve inside .cwv2 — an
   invalid var() computes to the property's initial value, so the padding was
   silently 0 and the footer's negative margins hung 19px outside the card on
   each side. Stated in pixels so the bar and the box cannot disagree. */
.cwv2 .sup-compose-card{ padding:18px 20px;overflow:hidden;max-width:none }

/* A real footer bar, so the end of the form looks like the end of the form
   rather than a button floating under the last field. */
.cwv2 .sup-compose-foot{
  display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;
  margin:18px -20px -18px;padding:14px 20px;
  border-top:1px solid var(--border);background-color:var(--surface-2);
  border-radius:0 0 12px 12px;
}
.cwv2 .sup-before{
  background-color:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:18px 20px;
}
.cwv2 .sup-before h2{
  margin:0 0 4px;font-size:15px;line-height:22px;font-weight:650;color:var(--ink);
}
.cwv2 .sup-before ul{ list-style:none;margin:0;padding:0 }
.cwv2 .sup-before li{
  display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--border);
}
.cwv2 .sup-before li:last-child{ border-bottom:0;padding-bottom:0 }
.cwv2 .sup-before .ic{
  flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:inline-flex;
  align-items:center;justify-content:center;
  background-color:var(--accent-bg);color:var(--accent);
}
.cwv2 .sup-before .ic svg{ width:15px;height:15px }
.cwv2 .sup-before .t{ min-width:0;display:block }
.cwv2 .sup-before .t b{ display:block;font-size:13.5px;font-weight:650;color:var(--ink) }
.cwv2 .sup-before .t span{
  display:block;font-size:12.5px;line-height:18px;color:var(--ink-3);margin-top:2px;
}

/* ══ Support: inside a conversation ════════════════════════════════════════
 *
 * The thread on the left, its facts on the right. They used to be crushed
 * into one grey line under the title — the topic, the website, and the
 * opened date only when both of those were missing.
 */
/* The grid only. No colours and no tokens, because this rule has to work
   OUTSIDE .cwv2 — the thread must not be inside the redesign's scope. */
.cwv2-host .sup-thread-grid{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start;
}
/* The rail is reference, not a step. Under the thread on a narrow screen,
   never between the reader and the reply box. */
@media (max-width:980px){
  .cwv2-host .sup-thread-grid{ grid-template-columns:minmax(0,1fr) }
}
/* The rail carries .cwv2 itself, so the redesign reaches it and stops
   there. */
.sup-details.cwv2{ display:grid;gap:16px;min-width:0 }
.cwv2 .sup-det-card{
  background-color:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:16px 18px;
}
.cwv2 .sup-det-card h2{
  margin:0 0 10px;font-size:14.5px;line-height:22px;font-weight:650;color:var(--ink);
}
.cwv2 .sup-det-card dl{ margin:0 }
.cwv2 .sup-det-card dl > div{ padding:9px 0;border-top:1px solid var(--border) }
.cwv2 .sup-det-card dl > div:first-child{ border-top:0;padding-top:0 }
.cwv2 .sup-det-card dt{ font-size:12.5px;color:var(--ink-3);margin:0 0 2px }
.cwv2 .sup-det-card dd{
  margin:0;font-size:13.5px;font-weight:500;color:var(--ink);overflow-wrap:anywhere;
}
/* The chips are the thread's own, so the viewer opens from either place.
   A wrapping row, as the design has it — a rail of full-width rows reads as
   a list of links rather than as a set of files. */
/* The rail's chips are the thread's chips — the same pill, so the viewer
   opens from either place and one file looks like itself wherever it is
   listed. The grid this used to impose fought the pill's own sizing. */
/* The rail's chips are the thread's chips. The pill is drawn in console.css
   against the :root tokens; inside .cwv2 the button reset there strips its
   border, so the frame is restated with tokens that resolve HERE. */
.cwv2 .sup-det-card .sup-msg-atts{ margin:0 }
/* PADDING RESTATED. `.cwv2 *{padding:0}` is the scope's own reset and it
   ties with `.sup-att` on specificity, so the later file — this one — wins
   and the pill lost its 10px gutters: the icon sat on the left border and
   the size on the right. Anything brought INTO .cwv2 from outside has to
   put its padding back explicitly. */
.cwv2 .sup-det-card .sup-att{
  padding:0 10px;
  border:1px solid var(--border-2);background-color:var(--surface);border-radius:999px;
}
.cwv2 .sup-det-card .sup-att:hover{ background-color:var(--hover) }
.cwv2 .sup-det-card .sup-att-n{ max-width:220px }

/* ══ Launch a site, as the design lays it out ══════════════════════════════
 *
 * Head, stepper, the two ways to start, then the gallery under its own
 * heading. The head and the start cards used to share one row, which put the
 * page title beside two cards on the right and left the gallery — the thing
 * people came for — with no heading at all.
 */
.cwv2-skin .ls-hero{ display:block;margin:0 0 18px;padding:0;border:0;background:none }
.cwv2-skin .ls-hero-copy{ max-width:62ch }
.cwv2-skin .ls-hero-title{ margin:0;font-size:22px;line-height:30px;font-weight:700;color:var(--ink) }
.cwv2-skin .ls-hero-sub{ margin:5px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-3) }

/* Two equal cards, side by side. Starting blank and bringing a site over are
   different decisions from picking a design, so they sit ABOVE the gallery
   where no category filter or search can hide them. */
.cwv2-skin .ls-startgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;margin-bottom:26px;
}
/* flex-direction and justify-content are STATED. The shared
   `.cwv2-skin .ls-start, .cwv2-skin .sites-empty-card` rule lays these cards
   out as a centred column — which is right where they are the hero of an
   empty Sites page, and wrong here. Setting only `display:flex` left that
   column in force, so the icon, the words and the button stacked and
   centred on the live page. */
.cwv2-skin .ls-startgrid .ls-start{
  display:flex;flex-direction:row;align-items:center;justify-content:flex-start;
  gap:14px;width:100%;text-align:left;cursor:pointer;
  padding:16px 18px;border-radius:12px;
  background-color:var(--surface);border:1px solid var(--border);
}
.cwv2-skin .ls-startgrid .ls-start:hover{ border-color:var(--accent-line);background-color:var(--accent-soft) }
/* A DASHED, UNFILLED square — the design's own. Tinted with the accent it
   read as the primary thing on the screen, which is the gallery below. */
.cwv2-skin .ls-startgrid .ls-start-icon{
  flex:0 0 auto;width:46px;height:46px;border-radius:10px;display:inline-flex;
  align-items:center;justify-content:center;
  background-color:var(--surface-2);color:var(--ink-3);border:1.5px dashed var(--border-2);
}
.cwv2-skin .ls-startgrid .ls-start-text{ display:block;min-width:0;flex:1 1 auto }
.cwv2-skin .ls-startgrid .ls-start-title{
  display:block;font-size:15px;font-weight:650;color:var(--ink);
}
.cwv2-skin .ls-startgrid .ls-start-desc{
  display:block;margin-top:2px;font-size:13px;line-height:1.5;color:var(--ink-3);
}
/* The card is the button, so this is a cue rather than a control — it must
   not look like something to aim at separately from the card around it. */
.cwv2-skin .ls-startgrid .ls-start-cta{
  flex:0 0 auto;align-self:center;padding:7px 13px;border-radius:9px;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--ink-2);
  background-color:var(--surface);border:1px solid var(--border-2);
}
.cwv2-skin .ls-startgrid .ls-start:hover .ls-start-cta{
  background-color:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);
}
@media (max-width:520px){
  .cwv2-skin .ls-startgrid .ls-start{ flex-wrap:wrap }
  .cwv2-skin .ls-startgrid .ls-start-cta{ width:100%;text-align:center }
}

.cwv2-skin .ls-sect-h{
  margin:0 0 12px;font-size:16px;line-height:24px;font-weight:650;color:var(--ink);
}

/* The filters belong to the grid they filter: one strip at the top of the
   card rather than three blocks stacked above it. */
/* The whole gallery is one white card — strip, grid and all. It had no
   surface of its own, so the cards floated on the page's grey and the filter
   strip read as a bar hanging above them. */
.cwv2-skin .ls-library{
  padding:0;overflow:hidden;border-radius:12px;
  background-color:var(--surface);border:1px solid var(--border);
}
.cwv2-skin .ls-library-bar{
  display:flex;align-items:center;gap:6px;flex-wrap:nowrap;
  padding:10px 14px;border-bottom:1px solid var(--border);
}

/* .ls-chips as well as .browse-tpl-categories: dashboard.js renames the
   container when it renders the real category list, so a rule written
   against the markup's own class styles only the "All" button that ships in
   index.php and nothing that arrives from the API. */
/* NO TRACK. The design sits the pills straight on the card and gives the
   SELECTED one the fill — a grey rail around them made a box inside a box
   and left the row a different height from the search beside it. */
/* `flex:1 1 auto` AND an explicit min-width:0.
 *
 * This row scrolls, and `overflow-x:auto` makes a flex item's automatic
 * minimum size zero — so with the search sized to its content the whole
 * category list was squeezed to 0px wide and vanished, 11 buttons and all.
 * Claiming the remaining space is what keeps it on screen; min-width:0 is
 * what lets it scroll inside that space instead of pushing the search off
 * the end. */
.cwv2-skin .ls-library-bar .browse-tpl-categories,
.cwv2-skin .ls-library-bar .ls-chips{
  display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;
  flex-wrap:nowrap;overflow-x:auto;
  padding:0;border:0;border-radius:0;background:none;scrollbar-width:none;
}
.cwv2-skin .ls-library-bar .ls-chips::-webkit-scrollbar,
.cwv2-skin .ls-library-bar .browse-tpl-categories::-webkit-scrollbar{ display:none }
.cwv2-skin .ls-library-bar .ls-chips > button,
.cwv2-skin .ls-library-bar .browse-tpl-cat{
  flex:0 0 auto;height:30px;padding:0 11px;border:0;border-radius:8px;cursor:pointer;
  white-space:nowrap;background:none;color:var(--ink-3);font-family:inherit;font-weight:600;font-size:13.5px;line-height:1;box-shadow:none;
}
.cwv2-skin .ls-library-bar .ls-chips > button:hover,
.cwv2-skin .ls-library-bar .browse-tpl-cat:hover{ color:var(--ink) }
.cwv2-skin .ls-library-bar .ls-chips > button.active,
.cwv2-skin .ls-library-bar .ls-chips > button[aria-pressed="true"],
.cwv2-skin .ls-library-bar .browse-tpl-cat.active{
  background-color:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border);
}
/* NO SUB-CATEGORIES. The design has one row of categories; the second row
   the API offers is a dozen more chips that scroll off the end and make the
   first row look like a heading for them. The filter the screen needs is the
   top level, and search covers the rest. */
.cwv2-skin .ls-library-bar .ls-subchips{ display:none }
/* A ROW, not an absolutely-positioned icon over a padded input.
 *
 * The icon was placed with `position:absolute; left:11px` and kept clear by
 * the input's padding-left — and several shared rules set that padding, so
 * whichever won last decided whether the magnifier sat on the placeholder's
 * first letter. As a flex row the icon takes its own space and nothing can
 * push the text under it. */
/* WIDTH:AUTO, stated. The legacy search-box rule gives this element a full
   width of its own; `flex:0 0 auto` then sizes it from that width rather
   than from its contents, so the box took 1150px of an 1178px strip and the
   category row — which is allowed to shrink to nothing because it scrolls —
   was left at 0. The icon and a 200px field are all it should be.
   margin-left is here rather than in a rule of its own so it cannot be
   outranked separately from the sizing it belongs with. */
.cwv2-skin .ls-library-bar .cwp-templates-explore-search-box{
  position:static;display:flex;align-items:center;gap:7px;
  flex:0 0 auto;width:auto;max-width:none;margin-left:auto;margin-top: 0;
  height:34px;padding:0 10px;border-radius:9px;min-width:0;
  background-color:var(--surface);border:1px solid var(--border-2);
}
/* padding-left as a LONGHAND. The shared search-box rules set padding-left
   on their own, and a shorthand here lost to them — on the live page the
   magnifier sat on top of the placeholder's first letter. */
/* The box carries the frame; the field inside it carries none. Written
   through .ls-library-bar AND the box so it outranks the shared
   `.cwv2-skin input[type="text"]` rule, which was drawing a second border
   inside the first. */
/* THE ID HAS TO BE IN THE SELECTOR. The shared rule is written as
   `.cwv2-skin .cwp-templates-explore-search-box input, .cwv2-skin
   #sites-templates-search` — and that second half carries an ID, which
   outranks any number of classes. Three classes and an attribute lost to it,
   so the field kept drawing a second border inside the box's. */
.cwv2-skin .ls-library-bar #sites-templates-search,
.cwv2-skin .ls-library-bar .cwp-templates-explore-search-box input{
  flex:0 1 auto;min-width:0;width:200px;height:auto;
  padding:0;border:0;border-radius:0;background:none;box-shadow:none;
  color:var(--ink);font-family:inherit;font-weight:450;font-size:13px;line-height:1;
}
.cwv2-skin .ls-library-bar .cwp-templates-explore-search-box input:focus{ outline:none }
.cwv2-skin .ls-library-bar .cwp-templates-explore-search-box:focus-within{
  border-color:var(--accent-fill);box-shadow:0 0 0 3px var(--accent-bg);
}
.cwv2-skin .ls-library-bar .cwp-search-icon{
  position:static;flex:0 0 auto;transform:none;color:var(--ink-4);
}
.cwv2-skin .ls-library .sites-templates-grid{ padding:16px }

/* THE GROW CONTROL. One centred button under the grid, in the same quiet
   style as a card's Preview, where thirteen numbered pages used to be. The
   element keeps its pagination class — other code finds it by id — so the
   rules it inherits from the old gallery pager are all overridden here.
   `display` is deliberately NOT set: the renderer toggles it inline between
   flex and none, and an inline style wins, so a display here would be a rule
   that never applies. */
.cwv2-skin .cwp-templates-pagination{
  justify-content:center;align-items:center;gap:0;
  margin:0;padding:0 16px 20px;border:0;background:none;
}
.cwv2-skin .cwp-templates-pagination .ls-more{
  flex:0 0 auto;height:38px;padding:0 18px;border-radius:10px;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:13.5px;line-height:1;white-space:nowrap;box-shadow:none;
  background-color:var(--surface);border:1px solid var(--border-2);color:var(--ink-2);
}
.cwv2-skin .cwp-templates-pagination .ls-more:hover{
  background-color:var(--hover);color:var(--ink);
}

/* The name step's hints and its footer. */
.cwv2-skin .ls-field-hint{
  margin:6px 0 0;font-size:12.5px;line-height:18px;color:var(--ink-3);
}
.cwv2-skin .ls-addr .ls-field-hint{ margin-top:8px }
/* Back and Continue are two halves of one decision, so they sit together.
   Back used to be a bare link above the title, at the other end of the card. */
/* NO CLOSE BUTTON ON A PAGE.
 *
 * A dialog needs a dismiss of its own because it sits over something it is
 * hiding. These two steps are the page: there is nothing behind them to get
 * back to except the step before, and Back already does that — from the name
 * step it returns to the gallery the design was chosen from. A cross floating
 * in the top-right of a page offers a second, unlabelled way out of a form
 * with a name, an address and a plan in it.
 *
 * Only these two. The building, domain and done steps keep theirs: those have
 * no Back, so the cross is the only way out of them.
 */
.cwv2-shell .cs-modal-card:has(> #cs-step-name:not(.hidden)) > #cs-modal-close,
.cwv2-shell .cs-modal-card:has(> #cs-step-plan:not(.hidden)) > #cs-modal-close,
.cwv2-shell .cs-modal-card:has(> #cs-step-review:not(.hidden)) > #cs-modal-close{
  display:none;
}

/* ── Step 4: Review ─────────────────────────────────────────
 * The same two columns as the name step, so the flow does not change shape on
 * its last screen: what was chosen on the left, what it looks like and what
 * happens next on the right. */
.cwv2-shell #cs-step-review .cs-rev-grid{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:20px;align-items:start;
}
.cwv2-shell .cs-rev-main{
  min-width:0;background-color:var(--surface);
  border:1px solid var(--border);border-radius:12px;
}
.cwv2-shell .cs-rev-body{ padding:16px 20px 20px; }
.cwv2-shell .cs-rev-h{ margin:0 0 14px;font-size:15px;font-weight:650;color:var(--ink); }
/* A two-column list: the label is a fixed measure so the values line up as a
   column of their own, which is what makes it readable as a summary rather
   than as five sentences. */
.cwv2-shell .cs-rev-dl{
  display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr);
  gap:10px 16px;margin:0;font-size:13.5px;line-height:19px;
}
.cwv2-shell .cs-rev-dl dt{ margin:0;color:var(--ink-3); }
.cwv2-shell .cs-rev-dl dd{ margin:0;color:var(--ink);font-weight:500;min-width:0; }
.cwv2-shell #cs-step-review .cs-step-foot{
  margin:0;padding:12px 20px;justify-content:flex-end;
  background:none;border-top:1px solid var(--border);border-radius:0 0 12px 12px;
}
.cwv2-shell #cs-rev-go{ display:inline-flex;align-items:center;gap:7px; }

.cwv2-shell .cs-rev-side{ display:flex;flex-direction:column;gap:16px;min-width:0; }
/* The design card, without a heading: nothing is changed from a screen whose
   whole job is to confirm. */
.cwv2-shell .cs-rev-choice{
  background-color:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:14px;
}
.cwv2-shell .cs-rev-note{
  display:flex;gap:10px;padding:14px;border-radius:12px;
  background-color:var(--accent-bg);border:1px solid var(--accent-line);
}
.cwv2-shell .cs-rev-note-ic{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:28px;height:28px;border-radius:8px;
  background-color:var(--surface);color:var(--accent);
}
.cwv2-shell .cs-rev-note-t{ display:block;min-width:0;font-size:12.5px;line-height:18px; }
.cwv2-shell .cs-rev-note-t b{ display:block;font-size:13.5px;font-weight:650;color:var(--ink);margin-bottom:2px; }
.cwv2-shell .cs-rev-note-t span{ display:block;color:var(--ink-2); }

@media (max-width:1100px){
  .cwv2-shell #cs-step-review .cs-rev-grid{ grid-template-columns:minmax(0,1fr); }
}

/* ── The plan cards, at the name step's scale ───────────────────────
 *
 * These were drawn for a dialog that scrolled, so every measurement was
 * generous and several were viewport-relative (3vh of padding, 2vh of gap).
 * In the page they sit in now that reads as three billboards: a card nearly a
 * screen tall, with a hand's width of nothing between the last feature and
 * the line at the bottom.
 *
 * Shrunk to the numbers the name step uses — 20px of padding, 13.5px of body
 * text, a 38px button — so the two steps of one flow are the same size.
 *
 * The cards still STRETCH to a common height, which is what keeps the three
 * bottom lines on one baseline; the empty space is Dedicated's server-size box
 * making it the tallest. Tightening every measurement is what closes that gap:
 * letting the cards find their own heights would close it by knocking the
 * baseline out instead.
 */
.cwv2-skin .cs-plan-list.ls-plans{ gap:14px;margin-bottom:16px;padding-top:11px; }
.cwv2-skin .cs-plan-row.ls-plan{
  gap:10px;padding:16px 16px 14px;border-radius:12px;box-shadow:none;
  /* Clicking a card selects a plan; it should not also select its heading. */
  -webkit-user-select:none;user-select:none;
}
.cwv2-skin .ls-plan-name{ font-size:14px;line-height:19px;font-weight:650; }
.cwv2-skin .ls-plan-for{ font-size:12px;line-height:16px;margin-bottom:1px; }
.cwv2-skin .ls-plan-price{ font-size:23px;line-height:28px; }
.cwv2-skin .ls-plan-price .ls-plan-per{ font-size:12px; }
.cwv2-skin .ls-plan-terms{ font-size:11.5px;line-height:15px;min-height:15px; }
.cwv2-skin .ls-plan-cta{ height:34px;padding:0 12px;border-radius:9px;font-size:13px; }
.cwv2-skin .ls-plan-feats{ gap:7px;padding-top:12px; }
.cwv2-skin .ls-plan-feat{ font-size:12.5px;line-height:17px;padding-left:20px; }
.cwv2-skin .ls-plan-feat::before{ width:13px;height:13px;top:2px;background-size:8px 8px; }
.cwv2-skin .ls-plan-note{ font-size:11px;line-height:14px;padding-top:10px; }
.cwv2-skin .ls-plan-badge{ font-size:10.5px;padding:2px 8px; }
/* The server-size box is what makes the Dedicated card the tall one; it is
   already compact, so only its footnote comes down to the new scale. */
.cwv2-skin #cs-step-plan .ded-size{ margin-bottom:0;padding:9px 10px;gap:5px 10px; }
.cwv2-skin #cs-step-plan .ded-size-label{ font-size:12.5px; }
.cwv2-skin #cs-step-plan .ded-size-ctl{ gap:4px; }
.cwv2-skin #cs-step-plan .ded-size-btn{ width:24px;height:24px;border-radius:7px;font-size:14px; }
/* 72px of minimum width was holding the stepper open for "16 slices" at a
   size nothing else on the card uses. Wide enough for two digits, no wider. */
.cwv2-skin #cs-step-plan .ded-size-val{ min-width:58px;font-size:12.5px;font-weight:700; }
.cwv2-skin #cs-step-plan .ded-size-note{ font-size:11px;line-height:14px; }

/* BACK IS A CONTROL. On the plan step it shipped as a bare grey link floating
   above a centred heading, which is neither aligned to anything nor obviously
   pressable. Same secondary button as the name step's Back, so one step's way
   out looks like the next one's. There is no Continue to pair it with here —
   each plan card carries its own — so it stays at the top. */
.cwv2-skin #cs-step-plan > .tpl-back-btn{
  /* TOP RIGHT, where the cross was. Left of a centred heading it sat in the
     step's own flow and pushed "Choose a plan" down by its full height; the
     card is position:relative, so lifting it out puts it level with the page
     title and leaves the heading block centred in the space it was given. */
  position:absolute;top:24px;right:24px;z-index:2;
  margin:0;padding:8px 14px;border-radius:9px;cursor:pointer;
  font-family:inherit;font-weight:600;font-size:13px;line-height:1;
  background-color:var(--surface);border:1px solid var(--border-2);color:var(--ink-2);
}
.cwv2-skin #cs-step-plan > .tpl-back-btn:hover{ background-color:var(--hover);color:var(--ink); }

.cwv2-shell #cs-step-name .cs-step-foot{
  margin:0;padding:12px 20px;justify-content:flex-end;
  background:none;border-top:1px solid var(--border);border-radius:0 0 12px 12px;
}
.cwv2-shell .cs-step-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:18px -20px -18px;padding:14px 20px;
  border-top:1px solid var(--border);background-color:var(--surface-2);
  border-radius:0 0 12px 12px;
}
.cwv2-shell .cs-step-foot .cs-foot-back{
  padding:8px 14px;border-radius:9px;cursor:pointer;font-family:inherit;font-weight:600;font-size:13px;line-height:1;
  background-color:var(--surface);border:1px solid var(--border-2);color:var(--ink-2);
}
.cwv2-shell .cs-step-foot .cs-foot-back:hover{ background-color:var(--hover);color:var(--ink) }
.cwv2-shell .cs-step-foot .ls-continue{ width:auto;margin:0 }

/* ══ The template card, at the design's own numbers ════════════════════════
 *
 * Taken from the prototype's .tplgrid / .tpl / .tb rules. The card was a
 * screenshot in a fake browser window with both actions behind a hover
 * overlay; actions that appear on hover do not exist on a touch screen, so
 * the card a phone saw had no way to use it at all.
 */
.cwv2-skin .sites-templates-grid, .cwv2-skin .cs-demo-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;
}
.cwv2-skin .tpl-card{
  display:flex;flex-direction:column;overflow:hidden;border-radius:12px;
  background-color:var(--surface);border:1px solid var(--border);
  transition:border-color .15s ease-out;
}
.cwv2-skin .tpl-card:hover{ border-color:var(--border-2) }
.cwv2-skin .tpl-card.is-current{ border-color:var(--accent-fill);box-shadow:0 0 0 1px var(--accent-fill) }
.cwv2-skin .tpl-card-shot{
  display:block;width:100%;aspect-ratio:16 / 10;object-fit:cover;object-position:top;
  background-color:var(--surface-2);border-bottom:1px solid var(--border);
}
.cwv2-skin .tpl-card-b{
  display:flex;flex-direction:column;gap:3px;flex:1 1 auto;padding:13px 16px 16px;
}
.cwv2-skin .tpl-card-name{ font-size:14px;font-weight:650;color:var(--ink);overflow-wrap:anywhere }
.cwv2-skin .tpl-card-desc{ font-size:13px;line-height:1.5;color:var(--ink-3) }
.cwv2-skin .tpl-card-state{
  align-self:flex-start;margin-bottom:4px;padding:2px 8px;border-radius:999px;
  font-size:11.5px;font-weight:650;background-color:var(--surface-2);color:var(--ink-3);
}
.cwv2-skin .tpl-card-state.is-current{ background-color:var(--accent-bg);color:var(--accent) }
/* Both actions, always visible, at the foot of the card however tall its
   description happens to be. */
.cwv2-skin .tpl-card-actions{ display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:12px }
/* Through .tpl-card, to outrank the legacy gallery rules.
 *
 * The buttons keep their old `cwp-templates-explore-*-btn` hooks so other
 * code and the mounts can still find them — and those classes carry the old
 * overlay's styling, which paints Preview as the filled primary and Create
 * as a bare link. That is the wrong way round: previewing is the safe look,
 * using the design is the commitment. */
.cwv2-skin .tpl-card .tpl-btn{
  flex:0 1 auto;height:32px;padding:0 13px;border-radius:9px;cursor:pointer;white-space:nowrap;
  font-family:inherit;font-weight:600;font-size:13px;line-height:1;text-decoration:none;box-shadow:none;
  background-color:var(--surface);border:1px solid var(--border-2);color:var(--ink-2);
}
.cwv2-skin .tpl-card .tpl-btn:hover:not(:disabled){ background-color:var(--hover);color:var(--ink) }
.cwv2-skin .tpl-card .tpl-btn:disabled{ opacity:.5;cursor:default }
.cwv2-skin .tpl-card .tpl-btn-pri{
  background-color:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent);
}
.cwv2-skin .tpl-card .tpl-btn-pri:hover:not(:disabled){
  background-color:var(--accent-2);border-color:var(--accent-2);color:var(--on-accent);
}

/* ══ The Launch screen's column ════════════════════════════════════════════
 *
 * The design holds its content in a column; this panel ran the full width of
 * the viewport, so on a wide screen the heading sat a thumb's width from the
 * sidebar and the gallery stretched to six cards with the start cards
 * stranded above them.
 */
/* `#tab-dashboard.cwv2-skin`, not `.cwv2-skin #tab-dashboard`: the panel IS
   the skin element, so a descendant selector matched nothing and the column
   stayed full width. */
#tab-dashboard.cwv2-skin > .ls-hero,
#tab-dashboard.cwv2-skin > .ls-startgrid,
#tab-dashboard.cwv2-skin > .ls-sect-h,
#tab-dashboard.cwv2-skin > .ls-library,
#tab-dashboard.cwv2-skin > #create-site-modal{
  max-width:1180px;margin-left:auto;margin-right:auto;
}

/* ── Phone width ───────────────────────────────────────────────────────────────
 *
 * Measured at 390px in a same-origin frame of the live dashboard. Four rows
 * were wider than the screen and pushed the whole page sideways:
 *
 *   the top bar      — crumbs + Agency + bell + account, 9px over
 *   Websites filters — All / Needs attention / Free trial / Removed, cut off
 *   the site's tabs  — already scroll (.tabbar), left alone
 *   Launch's chips   — a nowrap bar of eleven categories AND a search box
 *
 * A row that cannot fit SCROLLS; it does not widen the page. */
@media (max-width:720px){
  /* The bottom tab bar and the page title already say where you are; the
     crumbs were the one thing the top bar could spare. */
  .cwv2-shell .cw-crumbs{ display:none; }
  .cwv2-shell .cw-header-actions{ gap:8px; }
  .cwv2-shell .filter-pills{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;max-width:100%;
  }
  .cwv2-shell .filter-pills::-webkit-scrollbar{ display:none; }
  .cwv2-shell .filter-pills > *{ flex:0 0 auto; }
  /* Chips on one scrolling line, the search on its own line under them. */
  .cwv2-skin .ls-library-bar{ flex-wrap:wrap; }
  .cwv2-skin .ls-library-bar .ls-chips,
  .cwv2-skin .ls-library-bar .browse-tpl-categories{ flex:1 1 100%; }
  .cwv2-skin .ls-library-bar .cwp-templates-explore-search-box{ flex:1 1 100%;margin-left:0; }
  .cwv2-skin .ls-library-bar #sites-templates-search,
  .cwv2-skin .ls-library-bar .cwp-templates-explore-search-box input{ width:100%;flex:1 1 auto; }
}
@media (max-width:480px){
  /* The Agency link is the widest control in the bar and the one with
     another way in (the /agency product has its own address). The account
     button keeps its avatar and drops the caret. */
  .cwv2-shell .cw-agency-link{ display:none; }
  .cwv2-shell .cw-account-btn{ padding:4px; }
  .cwv2-shell .cw-account-btn > svg{ display:none; }
}
/* THE BOOT WINDOW, on a phone. The boot script puts the shell class on
   <html> before first paint; redesign-core.js puts it on <body> a second or
   so later and rebuilds the sidebar. In between, the LEGACY sidebar is still
   in the DOM under the shell's styling, and its footer (the email, Log out)
   stood 100px past the right edge of a 390px screen — invisible, but enough
   for the page to scroll sideways for that second. Only that window, only on
   a phone: `body:not(.cwv2-shell)` stops matching the moment the core lands. */
@media (max-width:720px){
  html.cwv2-shell body:not(.cwv2-shell){ overflow-x:hidden; }
  html.cwv2-shell body:not(.cwv2-shell) #dash-sidebar{ display:none !important; }
}
/* ON EVERY WIDTH: the frame, not the old menu.
   Between the boot script and redesign-core.js the sidebar and header are
   already styled as the redesign but still hold the LEGACY items —
   "Workspace / Overview", Domain, Plan, Profile, Launch a site — for the two
   to four seconds the data call and the core's fetch take. Once the
   redesign became the default that would have been every customer's first
   impression of every page. Their contents wait, invisible but still taking
   their space, so nothing moves when the rebuilt chrome appears. The content
   area keeps its skeletons. index.php's boot script withdraws the early
   shell if the core has not arrived in 8 seconds, so a failed fetch leaves a
   usable old menu rather than an empty one. */
html.cwv2-shell body:not(.cwv2-shell) #dash-sidebar > *,
html.cwv2-shell body:not(.cwv2-shell) #cw-header > *{ visibility:hidden; }
/* ── Change template ───────────────────────────────────────────────────────
 * A real dialog, unlike the create wizard: it opens over a site's Settings
 * and closes back to it. It holds the Launch panel's library now, so it is
 * the library's width. */
.cwv2-shell .ct-card{ width:min(1180px,calc(100% - 40px)); }
.cwv2-shell .ct-view{ padding:14px 20px 18px; }
#ct-browse.cwv2-skin .ct-current{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 12px;
  padding:6px 10px;border-radius:999px;
  background-color:var(--surface-2);border:1px solid var(--border);
  font-size:12.5px;color:var(--ink-3);
}
#ct-browse.cwv2-skin .ct-current-k{ text-transform:none;letter-spacing:0;font-weight:500; }
#ct-browse.cwv2-skin .ct-current-v{ font-weight:650;color:var(--ink); }
/* .ct-view already scrolls; the strip stays put at the top of it. */
#ct-browse.cwv2-skin .ls-library-bar{
  position:sticky;top:0;z-index:2;background-color:var(--surface);
}
/* The day's remaining design changes, under the warning. Quiet while there
   are some; the warning tone only when there are none. */
.cwv2-shell .ct-left{ margin:10px 0 0;font-size:12.5px;line-height:18px;color:var(--ink-3); }
.cwv2-shell .ct-left:empty{ display:none; }
.cwv2-shell .ct-left.is-none{ color:var(--warn);font-weight:600; }

/* ── Store & orders, not connected ───────────────────────────────────────────
 * Two classes deep throughout. `.cwv2 *` at the top of this file zeroes every
 * margin and padding, and it outranks any one-class rule that loads before it
 * — which is every .kf-* rule in console.css, and why this screen had no
 * spacing at all once the site view became a .cwv2 screen. */
.cwv2 .kf2-hero{ padding:20px 22px 22px; }
.cwv2 .kf2-top{ display:flex;align-items:flex-start;gap:14px; }
.cwv2 .kf2-ic{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:11px;
  background-color:var(--accent-bg);color:var(--accent);
}
.cwv2 .kf2-top-t{ min-width:0; }
.cwv2 .kf2-h{ margin:0 0 4px;font-size:17px;line-height:24px;font-weight:650;color:var(--ink); }
.cwv2 .kf2-lede{ margin:0;max-width:72ch;font-size:14px;line-height:22px;color:var(--ink-3); }
.cwv2 .kf2-lede strong{ color:var(--ink);font-weight:600; }

.cwv2 .kf2-props{
  list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--border);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
}
.cwv2 .kf2-props li{ display:flex;flex-direction:column;gap:4px;min-width:0; }
.cwv2 .kf2-pic{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:9px;margin-bottom:6px;
  background-color:var(--surface-2);color:var(--ink-2);border:1px solid var(--border);
}
.cwv2 .kf2-props b{ font-size:13.5px;line-height:19px;font-weight:650;color:var(--ink); }
.cwv2 .kf2-props li > span:last-child{ font-size:13px;line-height:19px;color:var(--ink-3); }

.cwv2 .kf2-failed{
  display:flex;flex-direction:column;gap:2px;margin:16px 0 0;padding:14px 18px;
  border-color:var(--warn-line, var(--border));background-color:var(--warn-bg);
}
.cwv2 .kf2-failed b{ font-size:13.5px;color:var(--warn); }
.cwv2 .kf2-failed span{ font-size:13px;color:var(--ink-2); }

.cwv2 .kf2-sub{ font-size:13px;color:var(--ink-3); }

/* Three fields on a two-column grid: the country lines up under First name
   at the same width, instead of a narrower box with its own left edge. */
.cwv2 .kf2-grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 16px; }
.cwv2 .kf2-f{ min-width:0; }
.cwv2 select.kf2-sel{ appearance:auto;cursor:pointer; }

.cwv2 .kf2-terms{
  display:flex;gap:10px;margin:20px 0 0;padding:14px 16px;border-radius:10px;
  background-color:var(--surface-2);border:1px solid var(--border);
}
.cwv2 .kf2-terms-ic{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:7px;background-color:var(--surface);color:var(--accent);
}
.cwv2 .kf2-terms b{ display:block;margin:3px 0 6px;font-size:13.5px;font-weight:650;color:var(--ink); }
.cwv2 .kf2-terms ul{ margin:0;padding:0 0 0 16px;display:grid;gap:4px; }
.cwv2 .kf2-terms li{ font-size:13px;line-height:19px;color:var(--ink-2); }
.cwv2 .kf2-err{ margin:12px 0 0;font-size:13px;color:var(--bad); }
.cwv2 .kf2-err[hidden]{ display:none; }

/* The connecting and connected states use console.css's one-class rules
   too, and lost their spacing for the same reason. */
.cwv2 .kf-busy{ padding:32px 20px;text-align:center; }
.cwv2 .kf-spin{ margin:0 auto 12px; }

@media (max-width:720px){
  .cwv2 .kf2-props{ grid-template-columns:minmax(0,1fr);gap:16px; }
  .cwv2 .kf2-grid{ grid-template-columns:minmax(0,1fr); }
  .cwv2 .kf2-hero{ padding:16px; }
}

/* ── Store & orders, connected ─────────────────────────────────────────────── */
.cwv2 .kf2-conn{ margin-bottom:20px; }
.cwv2 .kf2-conn .kf-id{ margin:14px 0 0; }
.cwv2 .kf2-conn-f{ justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap; }
.cwv2 .kf2-conn-notes{ min-width:0; }
.cwv2 .kf2-fine{ margin:0;font-size:12.5px;line-height:18px;color:var(--ink-3); }
.cwv2 .kf2-fine[hidden]{ display:none; }
.cwv2 .kf2-conn-f .kf-actions{ display:flex;gap:8px;margin:0; }

/* Peers, so the same height, with Disconnect's button on the bottom edge. */
.cwv2-skin .sd-grid.sd-grid-even.kf2-pair{ align-items:stretch; }
.cwv2 .kf2-card{ margin-bottom:0;display:flex;flex-direction:column; }

.cwv2 .kf2-sh{ display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--border); }
.cwv2 .kf2-sh:first-child{ border-top:0;padding-top:4px; }
.cwv2 .kf2-sh:last-child{ padding-bottom:0; }
.cwv2 .kf2-sh-ic{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;
}
.cwv2 .kf2-sh-in .kf2-sh-ic{ background-color:var(--info-bg);color:var(--info); }
.cwv2 .kf2-sh-out .kf2-sh-ic{ background-color:var(--accent-bg);color:var(--accent); }
.cwv2 .kf2-sh-lock .kf2-sh-ic{ background-color:var(--surface-2);color:var(--ink-3);border:1px solid var(--border); }
.cwv2 .kf2-sh-t{ min-width:0; }
.cwv2 .kf2-sh .kf-share-h{ margin:0 0 2px;font-size:12.5px;font-weight:500;color:var(--ink-3); }
.cwv2 .kf2-sh .kf-share-v{ margin:0;font-size:13.5px;font-weight:600;line-height:1.45;color:var(--ink); }

.cwv2 .kf2-disc-t{ margin:0;font-size:13.5px;line-height:21px;color:var(--ink-3);max-width:52ch; }
.cwv2 .kf2-disc .kf2-disc-btn{
  align-self:flex-start;margin-top:auto;
  background-color:var(--surface);border:1px solid var(--bad-line);color:var(--bad);font-weight:600;
}
/* The text above may be short; the button never sits on it. */
.cwv2 .kf2-disc .kf2-disc-t{ margin-bottom:16px; }
.cwv2 .kf2-disc .kf2-disc-btn:hover:not(:disabled){
  background-color:var(--bad-bg);border-color:var(--bad-line);color:var(--bad);
}

@media (max-width:720px){
  .cwv2 .kf2-conn-f{ flex-direction:column;align-items:stretch; }
  .cwv2 .kf2-conn-f .kf-actions .cw-btn{ width:100%;justify-content:center; }
}

/* ── Home with no live websites ───────────────────────────────────────────── */
.cwv2 .ovz-hero{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:32px;align-items:center;
  padding:32px;overflow:hidden;
  background-image:radial-gradient(120% 140% at 100% 0%,var(--accent-bg) 0%,transparent 55%);
}
.cwv2 .ovz-eyebrow{
  display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;
  background-color:var(--ok-bg);color:var(--ok);font-size:12px;font-weight:650;
}
.cwv2 .ovz-copy h2{ margin:14px 0 0;font-size:26px;line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--ink); }
.cwv2 .ovz-copy p{ margin:10px 0 22px;max-width:54ch;font-size:15px;line-height:1.6;color:var(--ink-2); }

.cwv2 .ovz-steps{
  list-style:none;margin:0;padding:18px 20px;border-radius:12px;
  background-color:var(--surface);border:1px solid var(--border);box-shadow:var(--e2);
  display:grid;gap:0;
}
.cwv2 .ovz-steps li{
  display:flex;align-items:flex-start;gap:12px;padding:12px 0;position:relative;
}
.cwv2 .ovz-steps li + li{ border-top:1px dashed var(--border); }
.cwv2 .ovz-n{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;font-size:12.5px;font-weight:700;
  background-color:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-line);
}
.cwv2 .ovz-steps li:last-child .ovz-n{ background-color:var(--ok-fill);color:#fff;border-color:var(--ok-fill); }
.cwv2 .ovz-steps b{ display:block;font-size:13.5px;line-height:19px;font-weight:650;color:var(--ink); }
.cwv2 .ovz-steps li div span{ display:block;margin-top:2px;font-size:12.5px;line-height:18px;color:var(--ink-3); }

.cwv2 .ovz-starts{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
.cwv2 .ovz-start{ margin:0;padding:20px;display:flex;flex-direction:column;align-items:flex-start; }
.cwv2 .ovz-start-ic{
  display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;
  background-color:var(--surface-2);color:var(--ink-2);border:1px solid var(--border);margin-bottom:14px;
}
.cwv2 .ovz-start h3{ margin:0;font-size:15px;line-height:21px;font-weight:650;color:var(--ink); }
.cwv2 .ovz-start p{ margin:4px 0 16px;font-size:13px;line-height:19px;color:var(--ink-3);flex:1 1 auto; }

@media (max-width:900px){
  .cwv2 .ovz-hero{ grid-template-columns:minmax(0,1fr);padding:22px;gap:22px; }
  .cwv2 .ovz-starts{ grid-template-columns:minmax(0,1fr); }
}

/* ── The top bar, to the prototype's measurements ──────────────────────────────
 *
 * THE BREADCRUMB TOOK THE BAR. console.css gives .cw-crumbs flex:1, so it
 * claimed every spare pixel and the search box sat pressed against the
 * buttons on the right. The design's crumbs are only as wide as their words,
 * and the search is centred in what is left.
 *
 * The right-hand cluster is borderless icon buttons, 36px square, with a
 * tint on hover — help, notifications, then the account as avatar and
 * name. Ours drew an outline round each of them and a caret on the account,
 * so the bar read as a row of separate controls rather than one strip. */
@media (min-width:769px){
  .cwv2-shell .cw-crumbs{ flex:0 1 auto;min-width:0;padding-left:20px; }
}
.cwv2-shell .cw-header-actions{ gap:4px;flex:0 0 auto;justify-content:flex-end; }

.cwv2-shell .cw-header .cwv2-help,
.cwv2-shell .cw-header .notif-bell{
  position:relative;flex:0 0 auto;width:36px;height:36px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:9px;background:none;box-shadow:none;color:var(--ink-3);cursor:pointer;
}
.cwv2-shell .cw-header .cwv2-help:hover,
.cwv2-shell .cw-header .notif-bell:hover{ background-color:var(--surface-2);color:var(--ink); }
/* `hidden` is the bell's own not-signed-in state; the rule above must not
   undo it. */
.cwv2-shell .cw-header .notif-bell.hidden{ display:none; }

/* THE UNREAD MARK IS A DOT, as the design has it: "there is something new",
   not a red counter competing with the page for attention. The count is
   still in the element for screen readers and stays in the panel itself. */
.cwv2-shell .cw-header .notif-badge{
  position:absolute;top:8px;right:8px;left:auto;
  width:8px;height:8px;min-width:0;padding:0;border-radius:50%;
  font-size:0;line-height:0;color:transparent;overflow:hidden;
  background-color:var(--warn-fill);border:1.5px solid var(--side);
}
.cwv2-shell .cw-header .notif-badge.hidden{ display:none; }

.cwv2-shell .cw-header .cw-account-btn{
  height:36px;margin-left:4px;padding:0 10px 0 5px;gap:8px;
  border:0;border-radius:9px;background:none;box-shadow:none;color:var(--ink);
}
.cwv2-shell .cw-header .cw-account-btn:hover{ background-color:var(--surface-2); }
.cwv2-shell .cw-header .cw-account-btn > svg{ display:none; }
.cwv2-shell .cw-header .cw-avatar{
  width:26px;height:26px;font-size:11px;font-weight:650;
  background-color:var(--accent-fill);color:var(--on-accent);
}

/* The way across to /agency is ours, not the design's — it exists for the
   accounts that run one. It takes the cluster's quiet shape rather than a
   bordered button that would be the only outline left in the bar. */
.cwv2-shell .cw-header .cw-agency-link{
  height:36px;padding:0 10px;border:0;border-radius:9px;background:none;box-shadow:none;
  color:var(--ink-3);font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;
}
.cwv2-shell .cw-header .cw-agency-link:hover{ background-color:var(--surface-2);color:var(--ink); }
.cwv2-shell .cw-header .cw-agency-link.hidden{ display:none; }

@media (max-width:899px){
  .cwv2-shell .cw-header .cwv2-help{ display:none; }
}

/* ── Notification panel, as clean as the design's ───────────────────────────────
 *
 * The design's panel is a header and a list: a tinted icon, a title, one
 * muted line. Ours had grown five bordered filter pills with count bubbles, a
 * meta row repeating the address, an arrowed action link and a cross on every
 * row — all of it at the same weight, which is what made it read as busy.
 *
 * Nothing is taken away; it is quietened. The filters are a row of text tabs.
 * The time moves up beside the title. The cross appears on the row you are
 * pointing at. Read rows step back; unread ones carry a dot. Scoped by the id,
 * so the legacy panel rules (three files, one class deep) cannot win. */
.cwv2-shell #notif-panel{
  top:60px;right:16px;width:380px;max-width:calc(100vw - 32px);
  border:1px solid var(--border);border-radius:12px;box-shadow:var(--e2);
  background-color:var(--surface);color:var(--ink);overflow:hidden;
}
.cwv2-shell #notif-panel .notif-panel-head{
  display:flex;align-items:center;gap:6px;padding:12px 12px 12px 18px;
  border-bottom:1px solid var(--border);background:none;
}
.cwv2-shell #notif-panel .notif-panel-head strong{ flex:1 1 auto;font-size:15px;font-weight:650;color:var(--ink); }
.cwv2-shell #notif-panel #notif-mark-all{
  height:28px;padding:0 10px;border-radius:8px;cursor:pointer;
  border:1px solid var(--border-2);background-color:var(--surface);
  font-size:12.5px;font-weight:600;color:var(--ink-2);text-decoration:none;
}
.cwv2-shell #notif-panel #notif-mark-all:hover{ background-color:var(--hover);color:var(--ink); }
.cwv2-shell #notif-panel .notif-x{
  width:28px;height:28px;padding:0;border:0;border-radius:8px;background:none;
  display:inline-flex;align-items:center;justify-content:center;color:var(--ink-4);cursor:pointer;
}
.cwv2-shell #notif-panel .notif-x:hover{ background-color:var(--surface-2);color:var(--ink); }

/* Text tabs with an underline, like the design's tab bars — not pills. */
.cwv2-shell #notif-panel .notif-filters{
  display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  padding:0 12px;border-bottom:1px solid var(--border);background-color:var(--surface);
}
.cwv2-shell #notif-panel .notif-filters::-webkit-scrollbar{ display:none; }
.cwv2-shell #notif-panel .notif-filter{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  padding:10px 6px;margin:0;border:0;border-radius:0;background:none;
  font-size:13px;font-weight:600;color:var(--ink-3);
  box-shadow:inset 0 -2px 0 transparent;
}
.cwv2-shell #notif-panel .notif-filter:hover{ color:var(--ink);background:none; }
.cwv2-shell #notif-panel .notif-filter.is-on{
  color:var(--ink);background:none;border:0;box-shadow:inset 0 -2px 0 var(--accent-fill);
}
.cwv2-shell #notif-panel .notif-filter span{
  padding:0;background:none;border-radius:0;font-size:12px;font-weight:500;color:var(--ink-4);
}

.cwv2-shell #notif-panel .notif-day{
  padding:12px 18px 2px;font-size:12px;font-weight:600;color:var(--ink-4);
  text-transform:none;letter-spacing:0;background:none;border:0;
}
.cwv2-shell #notif-panel .notif-item{
  position:relative;display:flex;align-items:flex-start;gap:11px;
  padding:12px 18px;border:0;border-bottom:1px solid var(--border);background:none;
}
.cwv2-shell #notif-panel .notif-item:last-child{ border-bottom:0; }
.cwv2-shell #notif-panel .notif-item:hover{ background-color:var(--surface-2); }
.cwv2-shell #notif-panel .notif-ic{ width:28px;height:28px;border-radius:8px;flex:0 0 auto; }
.cwv2-shell #notif-panel .notif-item-main{ flex:1 1 auto;min-width:0; }
.cwv2-shell #notif-panel .notif-item-top{ display:flex;align-items:baseline;gap:10px; }
.cwv2-shell #notif-panel .notif-item-title{
  flex:1 1 auto;min-width:0;font-size:13.5px;line-height:19px;font-weight:600;color:var(--ink);
}
.cwv2-shell #notif-panel .notif-item-time{
  flex:0 0 auto;font-size:12px;line-height:19px;color:var(--ink-4);white-space:nowrap;
}
.cwv2-shell #notif-panel .notif-item-body{
  margin-top:2px;font-size:13px;line-height:1.5;color:var(--ink-3);
}
.cwv2-shell #notif-panel .notif-item-meta{ margin-top:4px;font-size:12px;color:var(--ink-4); }
.cwv2-shell #notif-panel .notif-item-action{
  display:inline-block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--accent);
}
/* Read rows step back; an unread one carries a dot before its title. */
.cwv2-shell #notif-panel .notif-item:not(.unread) .notif-item-title{ color:var(--ink-2);font-weight:500; }
.cwv2-shell #notif-panel .notif-item.unread .notif-item-title::before{
  content:'';display:inline-block;width:6px;height:6px;margin:0 6px 2px 0;
  border-radius:50%;background-color:var(--accent-fill);vertical-align:middle;
}
/* The cross only where you are pointing — and always for the keyboard. */
.cwv2-shell #notif-panel .notif-item-dismiss{
  position:absolute;top:10px;right:10px;width:24px;height:24px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:6px;background-color:var(--surface);color:var(--ink-4);
  opacity:0;transition:opacity .12s ease;cursor:pointer;
}
.cwv2-shell #notif-panel .notif-item:hover .notif-item-dismiss,
.cwv2-shell #notif-panel .notif-item-dismiss:focus-visible{ opacity:1; }
.cwv2-shell #notif-panel .notif-item-dismiss:hover{ color:var(--ink);background-color:var(--hover); }
/* On a touch screen there is no hover, so the cross stays visible. */
@media (hover:none){ .cwv2-shell #notif-panel .notif-item-dismiss{ opacity:1; } }
/* The time sits where the cross appears; it gives way on hover. */
.cwv2-shell #notif-panel .notif-item:hover .notif-item-time{ visibility:hidden; }
@media (hover:none){ .cwv2-shell #notif-panel .notif-item-time{ visibility:visible;margin-right:24px; } }
.cwv2-shell #notif-panel .notif-empty{ padding:32px 18px;text-align:center;font-size:13.5px;color:var(--ink-3); }

/* ── One typeface ─────────────────────────────────────────────────────────────────
 *
 * signup.css sets h1, h2, h3 and .dash-tab-title to the marketing site's
 * display face, Bricolage Grotesque. The redesign sized its headings and
 * never set their family, so every page title in the console — Home,
 * Websites, Billing, Support, Account, all of them — was in a typeface the
 * design does not use at all. The design's headings inherit the body face. */
.cwv2-shell h1,.cwv2-shell h2,.cwv2-shell h3,.cwv2-shell h4,
.cwv2-shell .dash-tab-title{ font-family:inherit; }
/* AND EVERY BUTTON. A <button> does not inherit the page's typeface — the
 * browser gives it its own (Arial on Windows) unless a rule says otherwise —
 * and the shell's buttons that no older stylesheet styled were drawn in it:
 * the sidebar's "New website" and "Dark mode", the filter count pill and the
 * phone's bottom bar, measured on the live dashboard. Family only: sizes and
 * weights stay with each button's own rule. */
.cwv2-shell button{ font-family:inherit; }

/* ── Support list, to the design's type ─────────────────────────────────────────── */
/* The subject is the row's name: 600, ink. The line under it is the design's
   muted small text. Both were 14px regular in the same black, so the eye had
   nothing to tell the title from its detail. */
.cwv2 .supv2-id .nm{ margin:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere;line-height:1.35; }
.cwv2 .supv2-id .hs{ margin:2px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-3); }
/* The filters as the design draws them: chips in the card's own top row,
   the chosen one on a tinted ground — not a segmented track. */
.cwv2 .supv2-seg{ padding:0;gap:2px;border:0;border-radius:0;background:none; }
.cwv2 .supv2-segb{
  height:30px;padding:0 11px;border-radius:8px;
  font-family:inherit;font-size:13.5px;font-weight:600;line-height:1;color:var(--ink-3);
}
.cwv2 .supv2-segb:hover{ color:var(--ink);background-color:var(--surface-2); }
.cwv2 .supv2-segb.on{
  background-color:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border);
}
.cwv2 .supv2-segb .n{ font-weight:500;color:var(--ink-4); }
.cwv2 .supv2-segb.on .n{ color:var(--ink-3); }

/* Announcements at the top of Home: the design's banner, a little apart from
   the greeting below it. The strip carries .cwv2 itself because it sits
   beside #ov-root, not inside it. */
.cwv2.cw-home-notices{ background:none; }
.cwv2.cw-home-notices .banner{ margin:0 0 16px; }

/* ── Support: icons you can see, and a heading that cannot overlap ─────────────────
 *
 * THE GRADIENT IMAGE, reset on purpose. dashboard.css paints both of these
 * with a purple gradient IMAGE; the redesign set only background-COLOR and
 * an icon colour chosen for a light tile, so the gradient stayed and the
 * icon was drawn purple-on-purple (the headphones) and grey-on-purple (the
 * empty state's speech bubble). background-image:none clears it. */

/* The empty state's icon: the design's own empty-state tile, as every other
   empty screen in the console draws it. */
.cwv2-skin .sup-empty-orb{
  display:flex;align-items:center;justify-content:center;
  width:48px;height:48px;margin:0 auto 14px;border-radius:12px;
  background-image:none;background-color:var(--surface-2);border:1px solid var(--border);color:var(--ink-2);box-shadow:none;
}
.cwv2-skin .sup-empty-orb svg{ width:22px;height:22px; }

/* Support's avatar is GREEN with a white mark — the thread's one piece of
   colour coding, and the fastest way to tell who is talking. The gradient
   was covering it. Every selector that reaches the tile is matched, because
   three stylesheets each have one. */
.cwv2-skin .sup-av.sup-av-support,
.cwv2-skin .sup-msg-support .sup-msg-av-slot .sup-av{
  background-image:none;background-color:var(--ok-fill);color:#fff;
}
.cwv2-skin .sup-av.sup-av-support svg{ stroke:currentColor; }

/* THE MESSAGE HEADING. Name, separator and time were inline runs in one line
   box with three different line-heights, and the time wrapped in the MIDDLE
   ("31 August," / "16:25"). Where a bubble was narrow, that second line
   overhung the message text below it. As a wrapping row with the time kept
   whole, each line is the height of what is on it, so nothing can overhang. */
.cwv2-skin .sup-msg-head{
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:0;row-gap:2px;
  margin:0 0 4px;line-height:18px;
}
.cwv2-skin .sup-msg-head > *{ display:inline-block;line-height:18px; }
.cwv2-skin .sup-msg-time{ white-space:nowrap; }

/* ── One focus ring per field ─────────────────────────────────────────────────────────
 *
 * Where the design draws a field as a WRAPPER (the border, the radius and
 * the focus ring are on .in / .search / the address box) the input inside is
 * borderless. dashboard.css's accessibility rule still gave every focused
 * input its own 3px ring, so a focused field showed two: the wrapper's, and
 * a smaller one inset inside it (Account's Full name, measured). The
 * wrapper's ring IS the indicator — it already reacts to :focus-within —
 * so the inner one goes. Every borderless input on the console was listed
 * live and each one's wrapper is matched here. Scoped to the SHELL, which
 * wraps every screen: Websites renders under .cwv2, not .cwv2-skin, so a
 * .cwv2-skin selector left its search with both rings. */
.cwv2-shell .in input:focus,.cwv2-shell .in select:focus,.cwv2-shell .in textarea:focus,
.cwv2-shell .search input:focus,
.cwv2-shell .supv2-search input:focus,
.cwv2-shell .cwp-templates-explore-search-box input:focus,
.cwv2-shell .ls-input-wrap .tpl-input:focus{
  box-shadow:none;outline:none;
}

/* A FIELD INSIDE THE DESIGN'S WRAPPER IS BARE. The design's .search and .in
 * draw the box; the input inside them has no border of its own. The skin's
 * field rule (`.cwv2-skin input[type="search"]` and its siblings) matches
 * that inner input too, and it comes later at the same weight. Wherever the
 * skin sits on <body>, as it does across the agency and client portals,
 * every wrapped field showed a box inside a box (the Clients search,
 * measured). One more class outranks it. Widths stay with each screen's own
 * rule. */
.cwv2-shell .cwv2 .search input{
  border:0;border-radius:0;background:none;box-shadow:none;
  height:auto;min-height:0;padding:0;font-size:13.5px;
}
.cwv2-shell .cwv2 .in input,.cwv2-shell .cwv2 .in select{
  border:0;border-radius:0;background:none;box-shadow:none;
  height:auto;min-height:0;padding:8px 0;font-size:14px;
}

/* THE COMMAND PALETTE'S SEARCH. The generic field rule
   (signup.css's `input[type="text"]`) outranks `.cw-pal-input`, so the search
   was drawn as a boxed field — its own border and radius, then a focus ring
   — sitting inside the palette's box: a frame within a frame. The design's
   palette search is the top row of the box itself, borderless, with one
   rule underneath it. */
.cwv2-shell .cw-pal-box .cw-pal-input{
  height:auto;border:0;border-bottom:1px solid var(--border);border-radius:0;
  padding:14px 18px;font-size:15px;line-height:24px;
  background-color:transparent;color:var(--ink);box-shadow:none;outline:none;
}
.cwv2-shell .cw-pal-box .cw-pal-input:focus{ border-color:var(--border);box-shadow:none;outline:none; }
.cwv2-shell .cw-pal-box .cw-pal-input::placeholder{ color:var(--ink-4); }

/* ── Toasts follow the theme ──────────────────────────────────────────────────────────
 *
 * console.css paints the toast with its ink token and a fixed white text.
 * That ink flips to near-white in dark mode, the text did not, so every
 * toast in dark mode was white on white ("Dark mode on" itself, measured).
 * The design's toast is the INVERSE of the page — ink background, surface
 * text — so it is dark on a light page and light on a dark one, and both
 * halves come from the same theme. The action link likewise. */
.cwv2-shell .cw-toast{ background-color:var(--ink);color:var(--surface);box-shadow:var(--e2); }
.cwv2-shell .cw-toast-action{ color:var(--accent-line); }
html[data-theme="dark"] .cwv2-shell .cw-toast-action{ color:var(--accent-fill); }