@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7SUc.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa0ZL7SUc.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2ZL7SUc.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1pL7SUc.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2pL7SUc.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z11lFc-K.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z1JlFc-K.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:300;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLDz8Z1xlFQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJfecg.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--primary-color: #6366F1;--primary-dark: #4F46E5;--primary-light: #E0E7FF;--primary-lighter: #F0F4FF;--secondary-color: #0891B2;--secondary-dark: #0E7490;--secondary-light: #CFFAFE;--tertiary-color: #A855F7;--tertiary-dark: #9333EA;--accent-color: #F59E0B;--accent-light: #FEF3C7;--success-color: #10B981;--success-light: #D1FAE5;--warning-color: #F59E0B;--warning-light: #FEF3C7;--danger-color: #EF4444;--danger-light: #FEE2E2;--info-color: #06B6D4;--info-light: #CFFAFE;--white: #ffffff;--light-gray: #F8FAFC;--gray-50: #F9FAFB;--gray-100: #F3F4F6;--gray-150: #EEF2F5;--gray-200: #E5E7EB;--gray-300: #D1D5DB;--gray-400: #9CA3AF;--gray-500: #6B7280;--gray-600: #4B5563;--gray-700: #374151;--gray-800: #1F2937;--gray-900: #111827;--dark-gray: #030712;--bg-primary: #ffffff;--bg-secondary: #F9FAFB;--bg-tertiary: #F3F4F6;--border-color: #E5E7EB;--border-light: #D1D5DB;--border-dark: #9CA3AF;--shadow-xs: 0 1px 1px rgba(0, 0, 0, .04);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow: 0 4px 12px rgba(99, 102, 241, .12), 0 2px 4px rgba(0, 0, 0, .04);--shadow-md: 0 10px 25px rgba(99, 102, 241, .12), 0 4px 6px rgba(0, 0, 0, .04);--shadow-lg: 0 20px 40px rgba(99, 102, 241, .15), 0 10px 15px rgba(0, 0, 0, .08);--shadow-xl: 0 25px 50px rgba(0, 0, 0, .1);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .3s cubic-bezier(.4, 0, .2, 1);--transition-slow: .5s cubic-bezier(.4, 0, .2, 1);--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-full: 9999px;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 12px;--spacing-lg: 16px;--spacing-xl: 24px;--spacing-2xl: 32px;--spacing-3xl: 40px;--font-family-sans: "Inter", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-family-serif: "Georgia", serif;--font-family-mono: "Courier New", monospace}html.dark-mode{--primary-color: #818CF8;--primary-dark: #6366F1;--primary-light: #4F46E5;--primary-lighter: #312E81;--secondary-color: #06B6D4;--secondary-dark: #0891B2;--secondary-light: #164E63;--tertiary-color: #C084FC;--tertiary-dark: #A855F7;--accent-color: #FBBF24;--accent-light: #78350F;--success-color: #34D399;--success-light: #064E3B;--warning-color: #FBBF24;--warning-light: #78350F;--danger-color: #F87171;--danger-light: #7F1D1D;--info-color: #22D3EE;--info-light: #0E4158;--white: #E5E7EB;--light-gray: #1F2937;--gray-50: #1F2937;--gray-100: #111827;--gray-150: #0F172A;--gray-200: #030712;--gray-300: #1A202C;--gray-400: #2D3748;--gray-500: #4B5563;--gray-600: #718096;--gray-700: #A0AEC0;--gray-800: #CBD5E1;--gray-900: #E2E8F0;--dark-gray: #F9FAFB;--bg-primary: #111827;--bg-secondary: #030712;--bg-tertiary: #0A0F1F;--border-color: #2D3748;--border-light: #4B5563;--border-dark: #1A202C;--shadow-xs: 0 1px 1px rgba(0, 0, 0, .3);--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .4);--shadow: 0 4px 12px rgba(129, 140, 248, .2), 0 2px 4px rgba(0, 0, 0, .3);--shadow-md: 0 10px 25px rgba(129, 140, 248, .2), 0 4px 6px rgba(0, 0, 0, .3);--shadow-lg: 0 20px 40px rgba(129, 140, 248, .25), 0 10px 15px rgba(0, 0, 0, .4);--shadow-xl: 0 25px 50px rgba(0, 0, 0, .5)}html.dark-mode body{background:linear-gradient(135deg,#030712,#0f172a 40%,#1e1b4b)}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-family-sans);font-size:14px;line-height:1.6;color:var(--gray-800);background:linear-gradient(135deg,#f9fafb,#f3f4f6,#f0f4ff);transition:background-color var(--transition-base),color var(--transition-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-width:100vw;max-width:100vw}h1,h2,h3,h4,h5,h6{font-family:Poppins,sans-serif;font-weight:600;line-height:1.3;color:var(--gray-800)}h1{font-size:32px;font-weight:700}h2{font-size:24px;margin-bottom:16px}h3{font-size:18px;margin-bottom:12px}h4{font-size:16px;margin-bottom:8px}p{margin-bottom:12px}a{color:var(--primary-color);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--primary-dark);text-decoration:underline}button{font-family:inherit;font-size:14px;font-weight:500;padding:10px 16px;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;-webkit-user-select:none;user-select:none}.btn-primary{background:linear-gradient(135deg,var(--primary-color) 0%,var(--primary-dark) 100%);color:#fff;box-shadow:var(--shadow);border:none}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:var(--shadow-md);filter:brightness(1.05)}.btn-primary:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow)}.btn-primary:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.btn-primary:disabled{opacity:.6;cursor:not-allowed}.btn-secondary{background:var(--gray-100);color:var(--gray-800);border:1px solid var(--border-color)}.btn-secondary:hover:not(:disabled){background:var(--gray-200);border-color:var(--primary-color);color:var(--primary-color);transform:translateY(-1px)}.btn-secondary:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.btn-danger{background:linear-gradient(135deg,var(--danger-color) 0%,#DC2626 100%);color:#fff;border:none}.btn-danger:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #ef44444d;filter:brightness(1.05)}.btn-danger:active:not(:disabled){transform:translateY(0)}.btn-success{background:linear-gradient(135deg,var(--success-color) 0%,#059669 100%);color:#fff;border:none}.btn-success:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px #10b9814d;filter:brightness(1.05)}.btn-success:active:not(:disabled){transform:translateY(0)}button.icon-btn{width:40px;height:40px;padding:8px;border-radius:var(--radius-lg)}button.icon-btn i{font-size:18px}input[type=text],input[type=email],input[type=number],input[type=password],input[type=color],input[type=date],input[type=time],select,textarea{width:100%;padding:10px 14px;font-family:inherit;font-size:14px;border:1.5px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-primary);color:var(--gray-800);transition:all var(--transition-fast)}input:hover,select:hover,textarea:hover{border-color:var(--border-dark)}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #6366f11a;background:var(--primary-lighter)}:host-context(html.dark-mode) input[type=text],:host-context(html.dark-mode) input[type=email],:host-context(html.dark-mode) input[type=number],:host-context(html.dark-mode) input[type=password],:host-context(html.dark-mode) input[type=color],:host-context(html.dark-mode) input[type=date],:host-context(html.dark-mode) input[type=time],:host-context(html.dark-mode) select,:host-context(html.dark-mode) textarea{background:#1f2937;color:var(--gray-800);border-color:#4b5563}:host-context(html.dark-mode) input:focus,:host-context(html.dark-mode) select:focus,:host-context(html.dark-mode) textarea:focus{background:#2d3748;box-shadow:0 0 0 3px #818cf826}textarea{resize:vertical;min-height:100px}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}.hidden{display:none!important}.invisible{visibility:hidden}.flex{display:flex}.flex-col{flex-direction:column}.gap-sm{gap:8px}.gap-md{gap:12px}.gap-lg{gap:16px}.text-center{text-align:center}.text-right{text-align:right}@media (max-width: 480px){h1{font-size:24px}h2{font-size:20px}h3{font-size:16px}body{font-size:13px}button{min-height:44px;padding:10px 12px}input,select,textarea{min-height:44px;font-size:16px}}@media (max-width: 768px){h1{font-size:28px}h2{font-size:22px}body{font-size:14px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideInLeft{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInRight{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes slideInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fade-in{animation:fadeIn var(--transition-base)}.slide-in-left{animation:slideInLeft var(--transition-base)}.slide-in-right{animation:slideInRight var(--transition-base)}.slide-in-up{animation:slideInUp var(--transition-base)}.pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.spin{animation:spin 1s linear infinite}@media print{body{background:#fff}.no-print{display:none}}@viewport{width:device-width;initial-scale:1;maximum-scale:1;user-scalable:no}input,textarea,select{font-size:16px!important}.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:999;opacity:0;pointer-events:none;transition:opacity .3s ease}.sidebar-overlay.show{opacity:1;pointer-events:auto}.mobile-sidebar-toggle{display:flex!important;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--border-color);border-radius:var(--radius-md);background:#fff;color:var(--gray-700);cursor:pointer;font-size:16px;transition:all var(--transition-fast);flex-shrink:0;position:fixed;top:8px;left:8px;outline:none;z-index:1001;box-shadow:0 2px 8px #0000001f}html.dark-mode .mobile-sidebar-toggle{background:#334155;color:var(--gray-300);border-color:#475569;box-shadow:0 2px 8px #0003}.mobile-sidebar-toggle:hover:not(:disabled){background:var(--gray-100);border-color:var(--primary-color);color:var(--primary-color)}.mobile-sidebar-toggle:active:not(:disabled){transform:scale(.95)}@media (min-width: 768px){.mobile-sidebar-toggle{display:none!important}.sidebar{position:relative!important;transform:translate(0)!important;width:280px;max-width:280px;border-radius:0;box-shadow:2px 0 12px #0000000a}.sidebar-overlay{display:none!important}.header{padding-left:16px}}@media (min-width: 1024px){.sidebar{width:320px;max-width:320px}}@media (min-width: 1440px){.sidebar{width:360px;max-width:360px}}@media (max-width: 480px){h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}body{font-size:13px}button{min-height:44px;padding:10px 12px;font-size:13px}input,select,textarea{min-height:44px;font-size:16px;padding:10px 12px}.mobile-sidebar-toggle{width:36px;height:36px;font-size:14px;top:7px;left:6px}}@media (max-width: 360px){h1{font-size:16px}h2{font-size:14px}h3{font-size:13px}.mobile-sidebar-toggle{width:34px;height:34px;font-size:13px;top:7px;left:5px}}@media (max-width: 896px) and (orientation: landscape){.mobile-sidebar-toggle{width:34px;height:34px;font-size:13px;top:6px;left:6px}}@media (pointer: coarse){button,a,input[type=checkbox],input[type=radio],.toolbar-btn,.icon-btn,.layout-item,.history-item,.layer-item,.header-action-btn,.mobile-sidebar-toggle{min-height:44px;min-width:44px}.toolbar button{margin:2px}button:hover{transform:none}button:active:not(:disabled){opacity:.8;transform:scale(.98)}.sidebar-content,.modal-body,.toolbar{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}.canvas-wrapper{touch-action:pan-x pan-y pinch-zoom}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){button,input,select,textarea{border-width:1px}}@media print{.header,.toolbar,.sidebar,.sidebar-overlay,.mobile-sidebar-toggle,button:not(.print-btn){display:none!important}.main-content{width:100%!important;height:auto!important}.canvas-container{overflow:visible!important;padding:0!important}}html.dark-mode .sidebar-overlay{background:#000000b3}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.skip-link{position:absolute;top:-40px;left:0;background:var(--primary-color);color:#fff;padding:8px 16px;text-decoration:none;border-radius:0 0 4px;z-index:10000;transition:top .3s ease}.skip-link:focus{top:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.skip-link{position:absolute;top:-40px;left:6px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;padding:10px 12px;text-decoration:none;border-radius:8px;z-index:1000;font-weight:600;transition:top .3s ease;font-size:13px}.skip-link:focus{top:6px;box-shadow:0 4px 12px #4f46e54d}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}:root{--primary-color: #6366f1;--primary-dark: #4f46e5;--primary-light: #e0e7ff;--secondary-color: #0891b2;--secondary-light: #cffafe;--success-color: #10b981;--danger-color: #ef4444;--warning-color: #f59e0b;--info-color: #06b6d4;--light-gray: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--medium-gray: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--dark-gray: #1e293b;--border-color: #cbd5e1;--border-light: #e2e8f0;--shadow: 0 4px 12px rgba(79, 70, 229, .15), 0 2px 4px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 25px rgba(79, 70, 229, .15), 0 4px 6px rgba(0, 0, 0, .05);--transition-fast: .15s ease;--transition-base: .3s ease}html.dark-mode{--primary-color: #818cf8;--primary-dark: #4f46e5;--primary-light: #4f46e5;--secondary-color: #06b6d4;--secondary-light: #475569;--light-gray: #1e293b;--gray-100: #0f172a;--gray-200: #1e293b;--gray-300: #334155;--gray-400: #475569;--gray-500: #64748b;--gray-600: #94a3b8;--gray-700: #cbd5e1;--gray-800: #e2e8f0;--dark-gray: #f8fafc;--border-color: #334155;--border-light: #475569;--shadow: 0 4px 12px rgba(99, 102, 241, .25), 0 2px 4px rgba(0, 0, 0, .1);--shadow-lg: 0 10px 25px rgba(99, 102, 241, .25), 0 4px 6px rgba(0, 0, 0, .1)}*{box-sizing:border-box}body{font-family:Inter,Poppins,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:0;padding:0;background:linear-gradient(135deg,#f8fafc,#f1f5f9 40%,#eff6ff);color:var(--dark-gray);transition:background-color var(--transition-base),color var(--transition-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html.dark-mode body{background:linear-gradient(135deg,#0f172a,#1e1b4b,#0c4a6e)}.app-container{display:flex;height:100vh;overflow:hidden;background:linear-gradient(135deg,#f8fafc,#f1f5f9 40%,#eff6ff);position:relative}html.dark-mode .app-container{background:linear-gradient(135deg,#0f172a,#1e1b4b,#0c4a6e)}.layout-grid{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;height:100vh;gap:0}.layout-sidebar{grid-row:1 / -1}.layout-header{grid-column:2;grid-row:1}.layout-toolbar{grid-column:2;grid-row:2}.layout-main{grid-column:2;grid-row:3}.sidebar{width:320px;height:100%;background:linear-gradient(180deg,#f8fafcfa,#f5f8fcf5,#f0f4f9f2);border-right:2px solid rgba(196,181,253,.4);display:flex;flex-direction:column;transition:all var(--transition-base);position:relative;z-index:100;box-shadow:4px 0 24px #6366f11f;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden}html.dark-mode .sidebar{background:linear-gradient(180deg,#141d30fa,#192337f7,#141928f5);box-shadow:4px 0 28px #6366f12e;border-right-color:#6366f159}.sidebar.collapsed{width:70px;background:linear-gradient(180deg,#f5f8fcf7,#f0f4f9f2);border-right-color:#c4b5fd4d}html.dark-mode .sidebar.collapsed{background:linear-gradient(180deg,#192337f7,#141d30f2);border-right-color:#6366f14d}.sidebar.mobile{width:85vw;max-width:320px;box-shadow:4px 0 20px #00000026;z-index:100}.sidebar-toggle{position:absolute;right:-15px;top:20px;width:36px;height:36px;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:101;box-shadow:0 4px 12px #4f46e54d;transition:all var(--transition-fast)}.sidebar-toggle:hover{transform:scale(1.12) translateZ(0);box-shadow:0 8px 24px #2563eb66}.sidebar-toggle:active{transform:scale(.95)}.sidebar-toggle.mobile{display:none!important}.mobile-sidebar-toggle{display:none;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;border-radius:8px;width:auto;min-width:44px;height:44px;padding:0 12px;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 12px #4f46e54d;font-size:18px;transition:all .3s ease;z-index:101}.mobile-sidebar-toggle:hover{transform:scale(1.05);box-shadow:0 6px 16px #1d4ed866}.mobile-sidebar-toggle:active{transform:scale(.95)}@media (max-width: 768px){.mobile-sidebar-toggle{display:flex}}.sidebar>div{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:16px 12px;gap:0}.sidebar-content{display:flex;flex-direction:column;gap:0}.sidebar>div::-webkit-scrollbar{width:6px}.sidebar>div::-webkit-scrollbar-track{background:transparent}.sidebar>div::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6366f180,#8b5cf666);border-radius:3px;transition:background .3s ease}.sidebar>div::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#6366f1b3,#8b5cf699)}html.dark-mode .sidebar>div::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#6366f199,#8b5cf680)}.sidebar-content.mobile-compact{padding:15px}.sidebar-content.mobile-compact .section-title{padding:8px 0;margin-bottom:8px;min-height:44px}.sidebar-content.mobile-compact .property-group{padding:10px;margin-bottom:15px}.sidebar-content.mobile-compact .layout-item{padding:10px;margin-bottom:6px;min-height:50px}.sidebar-content.mobile-compact .history-item,.sidebar-content.mobile-compact .layer-item{padding:10px;margin-bottom:5px;min-height:45px}.sidebar-content.mobile-compact .action-buttons{gap:8px;margin-top:15px;padding-top:15px}.sidebar-content.mobile-compact .action-buttons button{padding:10px;min-height:44px}.sidebar.collapsed .sidebar-content{display:none}.section-title{display:flex;justify-content:space-between;align-items:center;padding:14px;margin-bottom:12px;border-radius:14px;cursor:pointer;-webkit-user-select:none;user-select:none;font-weight:700;font-size:14px;letter-spacing:.5px;color:var(--dark-gray);background:linear-gradient(135deg,#fffffff5,#f3f0fff0);border:2px solid rgba(196,181,253,.45);box-shadow:0 4px 14px #8b5cf61a,inset 0 1px 2px #fffc;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}.section-title:before{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:linear-gradient(180deg,#6366f1,#8b5cf6);transition:all .3s ease}html.dark-mode .section-title{background:linear-gradient(135deg,#25325af5,#2d235ff0);border:2px solid rgba(99,102,241,.5);color:#e0e7ff;box-shadow:0 4px 14px #6366f126,inset 0 1px 2px #8b5cf633}.section-title:hover{background:linear-gradient(135deg,#fff,#ede9fe);border-color:#6366f1;transform:translateY(-3px);box-shadow:0 8px 20px #6366f133,inset 0 1px 2px #ffffffe6}html.dark-mode .section-title:hover{background:linear-gradient(135deg,#374178,#432d82);border-color:#818cf8;box-shadow:0 8px 20px #6366f140,inset 0 1px 2px #8b5cf64d}.section-title:active{transform:translateY(-1px)}.section-title.collapsed{margin-bottom:0;background:linear-gradient(135deg,#f5f5faeb,#ebf0f5eb);border-color:#c4b5fd4d;box-shadow:0 2px 8px #8b5cf60f,inset 0 1px 2px #ffffffb3}html.dark-mode .section-title.collapsed{background:linear-gradient(135deg,#19233ce6,#141e32e6);border-color:#6366f14d}.toggle{transition:all .35s cubic-bezier(.4,0,.2,1);color:#6366f1;font-size:16px;display:flex;align-items:center;justify-content:center}html.dark-mode .toggle{color:#818cf8}.section-title.collapsed .toggle{transform:rotate(-180deg)}.section-content{display:grid;grid-template-columns:1fr;gap:8px;padding:12px 0;margin:0;border:none;max-height:100%;overflow:visible}.section-content.collapsed{display:none}.section-content>div:not(.empty-state):first-child{display:flex;flex-direction:column;gap:8px}.layout-item{display:flex;align-items:center;padding:14px;margin-bottom:10px;border:2px solid rgba(196,181,253,.4);border-radius:14px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);background:linear-gradient(135deg,#ffffffeb,#f8f5ffe0);box-shadow:0 4px 12px #8b5cf614,inset 0 1px 2px #fff9;position:relative;overflow:hidden}.layout-item:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#6366f10d,#8b5cf605);pointer-events:none;opacity:0;transition:opacity .3s ease}body.dark-mode .layout-item{background:linear-gradient(135deg,#2d3264d9,#282855d4);border:2px solid rgba(99,102,241,.45);box-shadow:0 4px 12px #6366f11a,inset 0 1px 2px #8b5cf633}.layout-item:hover{background:linear-gradient(135deg,#fffffffa,#f3f0fff2);border-color:#6366f1;transform:translateY(-3px);box-shadow:0 8px 20px #6366f12e,inset 0 1px 2px #fffc}.layout-item:hover:after{opacity:1}body.dark-mode .layout-item:hover{background:linear-gradient(135deg,#373c78,#323264f2);border-color:#818cf8;box-shadow:0 8px 20px #6366f133,inset 0 1px 2px #8b5cf64d}.layout-item:active{transform:translateY(-1px)}.layout-item.active{background:linear-gradient(135deg,#6366f126,#8b5cf61f);border-color:#6366f1;border-width:2px;box-shadow:0 6px 18px #6366f140,inset 0 1px 3px #ffffff80;position:relative}body.dark-mode .layout-item.active{background:linear-gradient(135deg,#6366f140,#8b5cf633);border-color:#818cf8;box-shadow:0 6px 18px #6366f14d,inset 0 1px 3px #8b5cf64d}.layout-thumbnail{width:54px;height:54px;background:linear-gradient(135deg,#6366f11f,#8b5cf614);border:2px solid rgba(99,102,241,.3);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-right:14px;font-weight:700;font-size:18px;color:#6366f1;box-shadow:0 4px 12px #6366f11a,inset 0 1px 2px #ffffff80;transition:all .3s ease;flex-shrink:0}body.dark-mode .layout-thumbnail{background:linear-gradient(135deg,#6366f126,#8b5cf61a);border-color:#6366f166;color:#818cf8;box-shadow:0 4px 12px #6366f126,inset 0 1px 2px #8b5cf633}.layout-item:hover .layout-thumbnail{background:linear-gradient(135deg,#6366f133,#8b5cf626);border-color:#6366f1;box-shadow:0 6px 16px #6366f133,inset 0 1px 2px #fff9;transform:scale(1.05)}.layout-details{flex:1;min-width:0}.layout-details h3{margin:0 0 4px;font-size:15px;font-weight:700;color:var(--dark-gray);line-height:1.3}html.dark-mode .layout-details h3{color:#e0e7ff}.layout-details p{margin:0;font-size:13px;color:var(--gray-500);line-height:1.4;opacity:.8}html.dark-mode .layout-details p{color:#a5b4fc;opacity:.75}.save-template-section{display:flex;flex-direction:column;gap:8px;margin:8px 0;padding:8px 0;border-top:1px solid rgba(196,181,253,.2);border-bottom:none}.save-template-btn{width:100%;padding:12px 14px;border:2px solid rgba(99,102,241,.4);border-radius:12px;background:linear-gradient(135deg,#6366f114,#8b5cf60d);color:#6366f1;cursor:pointer;font-weight:600;font-size:14px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:10px;box-shadow:0 2px 8px #6366f114}html.dark-mode .save-template-btn{background:linear-gradient(135deg,#6366f11f,#8b5cf614);border-color:#6366f180;color:#818cf8}.save-template-btn:hover{background:linear-gradient(135deg,#6366f126,#8b5cf61f);border-color:#6366f1;transform:translateY(-2px);box-shadow:0 6px 16px #6366f126}html.dark-mode .save-template-btn:hover{border-color:#818cf8;background:linear-gradient(135deg,#6366f133,#8b5cf626);box-shadow:0 6px 16px #6366f133}.save-template-btn:active{transform:translateY(-1px)}.save-template-btn.secondary{background:linear-gradient(135deg,#94a3b81a,#94a3b80d);border-color:#94a3b866;color:var(--gray-600)}html.dark-mode .save-template-btn.secondary{background:linear-gradient(135deg,#94a3b81f,#94a3b814);border-color:#94a3b880;color:#a5b4fc}.save-template-btn.secondary:hover{background:linear-gradient(135deg,#94a3b833,#94a3b826);border-color:#94a3b899;transform:translateY(-2px);box-shadow:0 6px 16px #94a3b826}.custom-template{position:relative}.delete-template-btn{position:absolute;top:8px;right:8px;background:#ef44441a;border:1px solid var(--danger-color);color:var(--danger-color);border-radius:4px;padding:4px 6px;cursor:pointer;opacity:0;transition:all .2s ease;font-size:12px}.custom-template:hover .delete-template-btn{opacity:1}.delete-template-btn:hover{background:#ef444433}.layout-thumbnail img{width:100%;height:100%;object-fit:cover;border-radius:6px}.properties-panel,.history-panel{display:flex;flex-direction:column;gap:8px}.history-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid rgba(196,181,253,.2)}.history-header h4{margin:0;font-size:16px;font-weight:600;color:var(--dark-gray);display:flex;align-items:center}.history-header h4 i{margin-right:8px;color:var(--primary-color)}.clear-history-btn{background:none;border:none;color:var(--danger-color);cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease}.clear-history-btn:hover{background-color:#ef44441a}.history-list{display:flex;flex-direction:column;gap:6px}.history-item{display:flex;align-items:center;padding:10px;margin-bottom:6px;border-radius:6px;cursor:pointer;transition:all .2s ease;border:1px solid transparent}.history-item:hover{background-color:var(--light-gray)}.history-item.active{background-color:#2563eb1a;border-color:var(--primary-color)}.history-item-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background-color:var(--light-gray);border-radius:6px;margin-right:12px;color:var(--secondary-color)}.history-item.active .history-item-icon{background-color:var(--primary-color);color:#fff}.history-item-content{flex:1}.history-item-name{font-size:14px;font-weight:500;color:var(--dark-gray);margin-bottom:2px}.history-item-time{font-size:12px;color:var(--secondary-color)}.history-item-indicator{color:var(--success-color);font-size:16px}.layers-panel{display:flex;flex-direction:column;gap:8px}.layers-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid rgba(196,181,253,.2)}.layers-header h4{margin:0;font-size:16px;font-weight:600;color:var(--dark-gray);display:flex;align-items:center}.layers-header h4 i{margin-right:8px;color:var(--primary-color)}.layer-actions{display:flex;gap:8px}.icon-btn{background:none;border:1px solid var(--border-color);color:var(--secondary-color);cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.icon-btn:hover{background-color:var(--light-gray);border-color:var(--primary-color);color:var(--primary-color)}.layers-list{display:flex;flex-direction:column;gap:6px}.layer-item{display:flex;align-items:center;padding:10px;margin-bottom:6px;border-radius:6px;cursor:pointer;transition:all .2s ease;border:1px solid transparent;background-color:#fff}.layer-item:hover{background-color:var(--light-gray);border-color:var(--border-color)}.layer-item.active{background-color:#2563eb1a;border-color:var(--primary-color)}.layer-item.locked{opacity:.7}.layer-item.hidden{opacity:.4}.layer-controls{display:flex;gap:6px;margin-right:10px}.visibility-btn,.lock-btn{width:28px;height:28px;padding:4px}.visibility-btn:hover,.lock-btn:hover{background-color:var(--light-gray)}.layer-info{flex:1;display:flex;align-items:center;gap:10px}.layer-icon{width:24px;height:24px;display:flex;align-items:center;justify-content:center;background-color:var(--light-gray);border-radius:4px;color:var(--secondary-color)}.layer-item.active .layer-icon{background-color:var(--primary-color);color:#fff}.layer-details{flex:1}.layer-name{font-size:14px;font-weight:500;color:var(--dark-gray);margin-bottom:2px}.layer-type{font-size:12px;color:var(--secondary-color)}.layer-order{display:flex;flex-direction:column;gap:2px}.order-btn{width:24px;height:20px;padding:2px;display:flex;align-items:center;justify-content:center}.order-btn:hover{background-color:var(--light-gray)}.order-btn:disabled{opacity:.5;cursor:not-allowed}.property-group{margin-bottom:0;padding:12px;border:2px solid rgba(196,181,253,.3);border-radius:10px;background:linear-gradient(135deg,#ffffffeb,#f8f5ffe0);box-shadow:0 2px 8px #8b5cf60f;display:flex;flex-direction:column;gap:8px}body.dark-mode .property-group{background:linear-gradient(135deg,#2d3264d9,#282855d4);border:2px solid rgba(99,102,241,.45)}.property-group h3,.property-group h4{margin:0;font-size:15px;font-weight:700;color:var(--dark-gray);display:flex;align-items:center;gap:8px;padding:0;border:none}html.dark-mode .property-group h3,html.dark-mode .property-group h4{color:#e0e7ff}.property-group h4 i{margin-right:10px;color:var(--primary-color);font-size:18px}.property-row{margin-bottom:0;display:flex;flex-direction:column;gap:6px}.property-row label{display:block;margin-bottom:0;font-weight:600;font-size:13px;color:var(--dark-gray);letter-spacing:.3px}html.dark-mode .property-row label{color:#e0e7ff}.property-row input,.property-row select{width:100%;padding:8px 12px;border:2px solid rgba(196,181,253,.3);border-radius:8px;font-size:13px;background:#fffc;color:var(--dark-gray);transition:all .2s ease}html.dark-mode .property-row input,html.dark-mode .property-row select{background:#25325a99;border-color:#6366f14d;color:#e0e7ff}.property-row input:focus,.property-row select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f126}.color-picker{height:40px;cursor:pointer}.range-with-value{display:flex;align-items:center;gap:10px}.range-with-value input[type=range]{flex:1}.range-with-value input[type=number]{width:70px}.checkbox-group{display:flex;gap:15px}.checkbox-item{display:flex;align-items:center;gap:6px}.checkbox-item input[type=checkbox]{width:auto;margin:0}.checkbox-item span{font-size:14px;font-weight:500}.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden}.header{background:#fff;padding:20px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow);transition:background-color .3s ease}body.dark-mode .header{background:#1e293b}.header h1{margin:0;font-size:clamp(18px,4vw,24px);font-weight:700;color:var(--dark-gray);display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header h1 i{margin-right:12px;color:var(--primary-color)}.header-actions{display:flex;align-items:center;gap:15px}.help-button,.dark-mode-toggle{display:flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--border-color);border-radius:6px;background:#fff;color:var(--dark-gray);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}body.dark-mode .help-button,body.dark-mode .dark-mode-toggle{background:#334155;color:var(--dark-gray)}.dark-mode-toggle.active{background:var(--primary-color);color:#fff;border-color:var(--primary-color)}.help-button:hover{background-color:var(--light-gray);border-color:var(--primary-color)}.tooltip{position:relative;font-size:14px;color:var(--secondary-color)}.toolbar{background:linear-gradient(135deg,#fffffff2,#f8fafcf2);padding:16px 24px;border-bottom:1px solid var(--border-color);display:flex;gap:24px;flex-wrap:wrap;align-items:center;transition:all .3s ease;height:auto;min-height:100px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:0 0 12px 12px;box-shadow:0 2px 12px #00000014;margin-bottom:4px}body.dark-mode .toolbar{background:linear-gradient(135deg,#1e293bf2,#0f172af2);box-shadow:0 2px 12px #00000040}.toolbar.mobile{padding:12px 16px;gap:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;height:auto;min-height:85px;max-height:130px;flex-wrap:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:0 0 8px 8px}.toolbar.mobile::-webkit-scrollbar{display:none}.toolbar-group{display:flex;gap:12px;align-items:center;border-right:2px solid rgba(37,99,235,.2);flex-shrink:0;height:100%;position:relative;background:#2563eb0d;padding:8px 16px;border-radius:12px;box-shadow:0 1px 4px #2563eb1a}.toolbar-group:last-child{border-right:none;background:#10b9810d;box-shadow:0 1px 4px #10b9811a}.toolbar.mobile .toolbar-group{flex-shrink:0;height:auto;min-height:55px;gap:8px;padding:6px 12px;border-radius:8px}.toolbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 12px;border:1px solid var(--border-color);border-radius:6px;background:#fff;color:var(--dark-gray);cursor:pointer;transition:all .2s ease;font-size:12px;font-weight:500;min-width:70px;height:60px;position:relative;overflow:hidden;flex-shrink:0}body.dark-mode .toolbar button{background:#334155;color:var(--dark-gray)}.toolbar button:hover{background-color:var(--light-gray);border-color:var(--primary-color)}.toolbar button:disabled{opacity:.5;cursor:not-allowed}.toolbar button i{font-size:18px;margin-bottom:4px}.toolbar button span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.toolbar.mobile button{min-width:60px;height:50px;padding:8px 6px;font-size:10px;flex-shrink:0}.toolbar.mobile button i{font-size:16px;margin-bottom:2px}.toolbar.mobile button span{font-size:9px}.toolbar button.secondary{background-color:var(--light-gray);border-color:var(--medium-gray)}.toolbar button.success{background-color:#10b9811a;border-color:var(--success-color);color:var(--success-color)}.toolbar button.danger{background-color:#ef44441a;border-color:var(--danger-color);color:var(--danger-color)}.file-input{display:none}.canvas-container{flex:1;display:flex;justify-content:center;align-items:center;padding:20px;position:relative;background-color:#f8fafc;background-image:linear-gradient(45deg,#f1f5f9 25%,transparent 25%),linear-gradient(-45deg,#f1f5f9 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f1f5f9 75%),linear-gradient(-45deg,transparent 75%,#f1f5f9 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;transition:all .3s ease;min-height:300px;overflow:hidden}body.dark-mode .canvas-container{background-color:#0f172a;background-image:linear-gradient(45deg,#1e293b 25%,transparent 25%),linear-gradient(-45deg,#1e293b 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#1e293b 75%),linear-gradient(-45deg,transparent 75%,#1e293b 75%)}.canvas-container.drag-over{background-color:#e0f2fe;border:2px dashed var(--primary-color)}.canvas-wrapper{position:relative;box-shadow:var(--shadow-lg);border-radius:8px;overflow:hidden;max-width:100%;max-height:100%}#id-card-canvas{display:block;background:#fff}.element-count{position:absolute;bottom:10px;right:10px;background:#000000b3;color:#fff;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:6px}.grid-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-image:linear-gradient(rgba(0,0,0,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.1) 1px,transparent 1px);background-size:20px 20px;pointer-events:none;opacity:0;transition:opacity .3s ease}.grid-overlay.show{opacity:1}.zoom-controls{position:absolute;bottom:20px;left:20px;display:flex;gap:8px}.zoom-controls button{width:40px;height:40px;border:1px solid var(--border-color);border-radius:6px;background:#fff;color:var(--dark-gray);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:var(--shadow)}body.dark-mode .zoom-controls button{background:#334155;color:var(--dark-gray)}.zoom-controls button:hover{background-color:var(--light-gray);border-color:var(--primary-color)}.grid-toggle{position:absolute;top:20px;right:20px;display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border-color);border-radius:20px;background:#fff;color:var(--secondary-color);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;box-shadow:var(--shadow)}body.dark-mode .grid-toggle{background:#334155;color:var(--secondary-color)}.grid-toggle:hover{background-color:var(--light-gray)}.grid-toggle.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.alignment-controls{position:absolute;top:70px;right:20px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--shadow)}.alignment-toggle{width:40px;height:40px;border:1px solid var(--border-color);border-radius:6px;background:#fff;color:var(--secondary-color);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}body.dark-mode .alignment-toggle{background:#334155;color:var(--secondary-color)}.alignment-toggle:hover{background-color:var(--light-gray);border-color:var(--primary-color)}.alignment-toggle.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.action-buttons{display:flex;flex-direction:column;gap:8px;margin:12px 0 0;padding:12px 0;border-top:1px solid rgba(196,181,253,.2);border-bottom:none;flex-shrink:0}.action-buttons button{padding:14px 16px;border:2px solid rgba(99,102,241,.4);border-radius:12px;background:linear-gradient(135deg,#6366f11a,#8b5cf612);color:#6366f1;cursor:pointer;font-weight:700;font-size:14px;letter-spacing:.3px;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 12px #6366f11a,inset 0 1px 2px #ffffff80;position:relative;overflow:hidden}html.dark-mode .action-buttons button{background:linear-gradient(135deg,#6366f126,#8b5cf61a);border-color:#6366f180;color:#818cf8;box-shadow:0 4px 12px #6366f126,inset 0 1px 2px #8b5cf633}.action-buttons button:hover{transform:translateY(-3px);background:linear-gradient(135deg,#6366f12e,#8b5cf61f);border-color:#6366f1;box-shadow:0 8px 24px #6366f133,inset 0 1px 2px #fff9}html.dark-mode .action-buttons button:hover{border-color:#818cf8;background:linear-gradient(135deg,#6366f140,#8b5cf62e);box-shadow:0 8px 24px #6366f140,inset 0 1px 2px #8b5cf64d}.action-buttons button:active{transform:translateY(-1px)}.action-buttons button.success{background:linear-gradient(135deg,#10b98126,#0596691f);border-color:#10b98180;color:#059669;box-shadow:0 4px 12px #10b9811f,inset 0 1px 2px #ffffff80}html.dark-mode .action-buttons button.success{background:linear-gradient(135deg,#10b98133,#05966926);border-color:#10b98199;color:#10b981}.action-buttons button.success:hover{background:linear-gradient(135deg,#10b98140,#05966933);border-color:#059669;transform:translateY(-3px);box-shadow:0 8px 24px #10b98133,inset 0 1px 2px #fff9}.action-buttons button.secondary{background:linear-gradient(135deg,#94a3b81f,#94a3b814);border-color:#94a3b866;color:var(--gray-600);box-shadow:0 4px 12px #94a3b814,inset 0 1px 2px #ffffff80}html.dark-mode .action-buttons button.secondary{background:linear-gradient(135deg,#94a3b826,#94a3b81a);border-color:#94a3b880;color:#a5b4fc}.action-buttons button.secondary:hover{border-color:#94a3b899;background:linear-gradient(135deg,#94a3b833,#94a3b826);transform:translateY(-3px);box-shadow:0 8px 24px #94a3b826,inset 0 1px 2px #fff9}.delete-button{background-color:#ef44441a!important;border-color:var(--danger-color)!important;color:var(--danger-color)!important}.delete-button:hover{background-color:#ef444433!important}.empty-state{text-align:center;padding:32px 20px;color:var(--gray-500);background:linear-gradient(135deg,#6366f10d,#8b5cf605);border:2px dashed rgba(99,102,241,.25);border-radius:14px;margin:12px 0}html.dark-mode .empty-state{background:linear-gradient(135deg,#6366f114,#8b5cf608);border-color:#6366f14d;color:#a5b4fc}.empty-state i{font-size:52px;margin-bottom:16px;opacity:.45;color:#6366f1;transition:all .3s ease}html.dark-mode .empty-state i{color:#818cf8;opacity:.6}.empty-state p{margin:8px 0;font-size:15px;font-weight:500;line-height:1.5}.empty-state p:first-of-type{margin-top:0;font-weight:600;color:var(--dark-gray)}html.dark-mode .empty-state p:first-of-type{color:#e0e7ff}.notification{position:fixed;top:20px;right:20px;padding:15px 20px;border-radius:8px;background:#fff;color:var(--dark-gray);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;transform:translate(400px);transition:transform .3s ease;z-index:1000;max-width:350px}body.dark-mode .notification{background:#334155;color:var(--dark-gray)}.notification.show{transform:translate(0)}.notification.error{background-color:var(--danger-color);color:#fff}.notification i{font-size:18px}.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:99;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.sidebar-overlay.show{opacity:1;visibility:visible}.canvas-container.mobile{touch-action:none;overflow:hidden}.canvas-wrapper.mobile{position:relative;touch-action:pan-x pan-y pinch-zoom;max-width:100%;max-height:100%}.element-count.mobile{bottom:15px;right:15px;font-size:12px;padding:6px 10px}.zoom-controls.mobile{bottom:15px;left:15px;flex-direction:column;gap:8px}.zoom-controls.mobile button.mobile-btn{width:50px;height:50px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow)}.btn-text{font-size:10px;margin-top:2px}.grid-toggle.mobile{top:15px;right:15px;padding:10px 15px;font-size:12px;border-radius:20px;display:flex;align-items:center;gap:6px}.toggle-text{font-size:12px;margin-left:4px}.alignment-controls.mobile{top:70px;right:15px;flex-direction:column;gap:8px}.alignment-controls.mobile .alignment-toggle{width:50px;height:50px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow)}@media (hover: none) and (pointer: coarse){.toolbar button{min-height:50px;padding:12px}.sidebar-content{padding:15px}.property-row input,.property-row select{min-height:44px;font-size:16px}.layout-item{padding:15px;min-height:60px}.history-item,.layer-item{padding:15px;min-height:50px}}.mobile-scroll-indicator{display:flex;justify-content:center;align-items:center;padding:8px 15px;background-color:var(--light-gray);border-radius:20px;margin-bottom:10px;font-size:12px;color:var(--secondary-color);box-shadow:var(--shadow)}.mobile-scroll-indicator i{margin:0 5px;font-size:10px}.scroll-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:var(--primary-color);color:#fff;border:none;display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:var(--shadow);transition:all .2s ease}.scroll-nav:hover{background:var(--secondary-color)}.scroll-nav:disabled{opacity:.5;cursor:not-allowed}.scroll-nav.prev{left:5px}.scroll-nav.next{right:5px}.scroll-indicator{display:flex;justify-content:center;align-items:center;gap:8px;padding:8px 15px;background-color:#ffffffe6;border-radius:20px;margin:0 auto 10px;box-shadow:var(--shadow)}.scroll-indicator .dot{width:8px;height:8px;border-radius:50%;background-color:var(--medium-gray);transition:all .2s ease}.scroll-indicator .dot.active{background-color:var(--primary-color);transform:scale(1.2)}@media (max-width: 768px){.toolbar button{min-height:54px;padding:12px 8px;font-size:14px;border-radius:8px;transition:transform .1s ease,background-color .2s ease}.toolbar button:active{transform:scale(.95);background-color:#2563eb1a}.sidebar{width:85vw;max-width:320px}.sidebar-content{padding:15px;overflow-y:auto;-webkit-overflow-scrolling:touch}.property-row input,.property-row select,.form-control{min-height:48px;font-size:16px;padding:12px;border-radius:8px;touch-action:manipulation}.layout-item{padding:15px;min-height:64px;border-radius:8px;transition:background-color .2s ease}.layout-item:active{background-color:#2563eb1a}.history-item{padding:15px;min-height:54px;border-radius:8px;transition:background-color .2s ease}.history-item:active{background-color:#2563eb1a}.layer-item{padding:15px;min-height:54px;border-radius:8px;transition:background-color .2s ease}.layer-item:active{background-color:#2563eb1a}.color-swatch{width:48px;height:48px;border-radius:8px;transition:transform .1s ease}.color-swatch:active{transform:scale(.9)}.modal-dialog{width:95vw;max-width:none;border-radius:12px;margin:20px auto}.canvas-container{padding:10px;touch-action:pan-x pan-y pinch-zoom}.canvas-wrapper{touch-action:pan-x pan-y pinch-zoom;border-radius:8px;overflow:hidden}.zoom-controls{bottom:15px;left:15px;flex-direction:column;gap:10px}.zoom-controls button{width:50px;height:50px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .1s ease}.zoom-controls button:active{transform:scale(.9)}.grid-toggle{top:15px;right:15px;padding:12px 15px;border-radius:20px;font-size:14px;box-shadow:var(--shadow);transition:transform .1s ease}.grid-toggle:active{transform:scale(.95)}.alignment-controls{top:70px;right:15px;flex-direction:column;gap:10px}.alignment-toggle{width:50px;height:50px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .1s ease}.alignment-toggle:active{transform:scale(.9)}.notification{top:10px;right:10px;left:10px;max-width:none;border-radius:8px;padding:15px;font-size:16px}}.toolbar.mobile-compact{flex-direction:column;align-items:stretch;gap:5px}.toolbar.mobile-compact .toolbar-group{border-right:none;border-bottom:1px solid var(--border-color);padding-right:0;padding-bottom:8px;justify-content:center;flex-wrap:wrap}.toolbar.mobile-compact .toolbar-group:last-child{border-bottom:none;padding-bottom:0}@media (max-width: 480px){.toolbar{flex-direction:column;align-items:stretch}.toolbar-group{border-right:none;border-bottom:1px solid var(--border-color);padding-right:0;padding-bottom:10px;justify-content:center}.toolbar-group:last-child{border-bottom:none;padding-bottom:0}.toolbar button{min-height:60px;padding:15px 10px;font-size:16px}.sidebar{width:90vw}.modal-dialog{width:98vw;margin:10px auto}.canvas-container{padding:5px}}@media (max-width: 768px){.app-container{flex-direction:column}.sidebar{position:fixed;top:0;left:0;height:100%;transform:translate(-100%);z-index:100;width:85vw;max-width:320px;background:linear-gradient(135deg,#f8fafc,#e2e8f0);box-shadow:4px 0 20px #00000026}body.dark-mode .sidebar{background:linear-gradient(135deg,#1e293b,#334155)}.sidebar.show{transform:translate(0)}.sidebar.collapsed{width:85vw;max-width:320px;transform:translate(-100%)}.sidebar.collapsed.show{transform:translate(0)}.sidebar-toggle{right:auto;left:15px;top:15px;width:44px;height:44px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);box-shadow:0 4px 12px #1d4ed84d}.sidebar-content{padding:15px;background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}body.dark-mode .sidebar-content{background:#1e293be6}.section-title{padding:12px 14px;margin-bottom:10px;font-size:15px}.layout-item{padding:12px;margin-bottom:8px}.layout-thumbnail{width:48px;height:48px;margin-right:12px}.property-group{padding:14px;margin-bottom:16px}.action-buttons{gap:10px;margin-top:20px;padding-top:20px}.action-buttons button{padding:12px;font-size:14px}.main-content{width:100%}.toolbar{padding:10px;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}.toolbar-group{padding-right:10px;flex-shrink:0}.toolbar button{min-width:60px;height:50px;font-size:11px;padding:8px 6px}.toolbar button i{font-size:16px}.header{padding:16px 20px;height:70px;box-sizing:border-box;background:linear-gradient(135deg,#fff,#f8fafc)}body.dark-mode .header{background:linear-gradient(135deg,#1e293b,#334155)}.header h1{font-size:22px}.header h1 i{font-size:24px;margin-right:12px}.header-actions{gap:12px}.help-button,.dark-mode-toggle{padding:8px 12px;font-size:13px;min-height:40px}.canvas-container{padding:10px;min-height:400px}.zoom-controls{bottom:10px;left:10px}.grid-toggle{top:10px;right:10px}.alignment-controls{top:120px;right:10px}.notification{top:10px;right:10px;left:10px;max-width:none}}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;padding:10px;box-sizing:border-box}.modal-dialog{background:#fff;border-radius:12px;box-shadow:var(--shadow-lg);max-width:500px;width:90%;max-height:80vh;overflow:hidden;transform:scale(.9);transition:transform .3s ease;margin:0 auto}body.dark-mode .modal-dialog{background:#1e293b}.template-dialog{max-width:700px;width:95%}.template-preview-section{margin-bottom:20px;text-align:center}.template-preview-section h4{margin:0 0 10px;font-size:16px;font-weight:600;color:var(--dark-gray)}.template-preview{display:inline-block;border:1px solid var(--border-color);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);background:#fff;margin-bottom:15px}.template-details-section{display:flex;flex-direction:column;gap:15px}.checkbox-group{display:flex;align-items:center;gap:8px;margin-bottom:15px}.checkbox-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:14px;color:var(--dark-gray)}.checkbox-label input[type=checkbox]{width:auto;margin:0}.modal-overlay.show .modal-dialog{transform:scale(1)}@media (max-width: 768px){.modal-dialog{width:95vw;max-width:none;max-height:90vh;margin:20px auto;border-radius:12px;padding:0}.modal-header{padding:15px}.modal-body{padding:15px;max-height:60vh;overflow-y:auto}.modal-footer{padding:15px}}@media (max-width: 480px){.modal-dialog{width:98vw;margin:10px auto;border-radius:8px}.modal-header,.modal-body{padding:12px}.modal-footer{padding:12px;flex-direction:column;gap:10px}.modal-footer button{width:100%;min-height:44px}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--border-color);background:var(--light-gray);transition:background-color .3s ease}body.dark-mode .modal-header{background:#334155}.modal-header h3{margin:0;font-size:18px;font-weight:600;color:var(--dark-gray);display:flex;align-items:center;gap:8px}.close-btn{background:none;border:none;font-size:18px;color:var(--secondary-color);cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease}.close-btn:hover{background:#0000001a;color:var(--dark-gray)}.modal-body{padding:20px;max-height:60vh;overflow-y:auto}.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px;border-top:1px solid var(--border-color);background:var(--light-gray);transition:background-color .3s ease}body.dark-mode .modal-footer{background:#334155}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;font-size:14px;color:var(--dark-gray)}.form-control{width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:6px;font-size:14px;transition:border-color .2s ease;font-family:inherit}.form-control:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.btn{padding:10px 16px;border:1px solid var(--border-color);border-radius:6px;font-weight:500;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:6px}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn.success{background-color:var(--success-color);border-color:var(--success-color);color:#fff}.btn.success:hover{background-color:#0ea968;border-color:#0ea968}.btn.secondary{background-color:var(--light-gray);border-color:var(--medium-gray);color:var(--dark-gray)}.btn.secondary:hover{background-color:var(--medium-gray)}.modal-overlay.show{opacity:1;visibility:visible}.help-modal{background:#fff;border-radius:12px;box-shadow:var(--shadow-lg);max-width:600px;width:90%;max-height:80vh;overflow:hidden;transform:scale(.9);transition:transform .3s ease}body.dark-mode .help-modal{background:#1e293b}.modal-overlay.show .help-modal{transform:scale(1)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--border-color);background:var(--light-gray)}.modal-header h2{margin:0;font-size:20px;font-weight:600;color:var(--dark-gray);display:flex;align-items:center;gap:8px}.close-button{background:none;border:none;font-size:18px;color:var(--secondary-color);cursor:pointer;padding:6px;border-radius:4px;transition:all .2s ease}.close-button:hover{background:#0000001a;color:var(--dark-gray)}.modal-content{padding:20px;max-height:60vh;overflow-y:auto}.shortcuts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.shortcut-category{margin-bottom:20px}.shortcut-category h3{margin:0 0 15px;font-size:16px;font-weight:600;color:var(--primary-color);border-bottom:2px solid var(--primary-color);padding-bottom:5px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:8px 0;border-bottom:1px solid var(--medium-gray)}.shortcut-item:last-child{border-bottom:none}kbd{background:var(--light-gray);border:1px solid var(--border-color);border-radius:4px;padding:3px 6px;font-size:12px;font-family:monospace;color:var(--dark-gray);box-shadow:0 2px #0000001a}.shortcut-item span{font-size:14px;color:var(--secondary-color);font-weight:500}@media (max-width: 768px){.help-modal{width:95%;max-height:90vh}.shortcuts-grid{grid-template-columns:1fr}.modal-header,.modal-content{padding:15px}}.drop-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#2563ebe6;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:100;border-radius:8px}.drop-overlay.show{opacity:1;visibility:visible}.drop-content{text-align:center;color:#fff;padding:40px;border:2px dashed rgba(255,255,255,.5);border-radius:12px;background:#ffffff1a;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);max-width:300px}.drop-content i{font-size:48px;margin-bottom:20px;display:block}.drop-content h3{margin:0 0 10px;font-size:24px;font-weight:600}.drop-content p{margin:0;font-size:16px;opacity:.9}@media (max-width: 480px){.toolbar{flex-direction:column;align-items:stretch}.toolbar-group{border-right:none;border-bottom:1px solid var(--border-color);padding-right:0;padding-bottom:10px;justify-content:center}.toolbar-group:last-child{border-bottom:none;padding-bottom:0}.drop-content{padding:30px 20px;max-width:250px}.drop-content i{font-size:36px;margin-bottom:15px}.drop-content h3{font-size:20px}.drop-content p{font-size:14px}}.color-palette-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.color-palette-modal.show{opacity:1;visibility:visible}.color-palette-dialog{background:#fff;border-radius:12px;box-shadow:var(--shadow-lg);max-width:500px;width:90%;max-height:80vh;overflow:hidden;transform:scale(.9);transition:transform .3s ease}body.dark-mode .color-palette-dialog{background:#1e293b}.color-palette-modal.show .color-palette-dialog{transform:scale(1)}.color-palette-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--border-color);background:var(--light-gray);transition:background-color .3s ease}body.dark-mode .color-palette-header{background:#334155}.color-palette-header h3{margin:0;font-size:18px;font-weight:600;color:var(--dark-gray);display:flex;align-items:center;gap:8px}.color-palette-header h3 i{color:var(--primary-color)}.color-palette-content{padding:20px;max-height:60vh;overflow-y:auto}.color-section{margin-bottom:25px}.color-section:last-child{margin-bottom:0}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.color-section h4{margin:0;font-size:16px;font-weight:600;color:var(--dark-gray);border-bottom:1px solid var(--border-color);padding-bottom:8px;flex:1}.clear-colors-btn{background:none;border:1px solid var(--border-color);color:var(--danger-color);cursor:pointer;padding:4px 8px;border-radius:4px;font-size:12px;transition:all .2s ease;display:flex;align-items:center;gap:4px}.clear-colors-btn:hover{background-color:#ef44441a;border-color:var(--danger-color)}.recent-colors,.preset-colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:8px}.color-swatch{width:40px;height:40px;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:all .2s ease;position:relative;overflow:hidden}.color-swatch:hover{transform:scale(1.1);border-color:var(--primary-color);box-shadow:var(--shadow)}.color-swatch:active{transform:scale(.95)}.no-recent-colors{grid-column:1 / -1;text-align:center;padding:20px;color:var(--secondary-color);font-style:italic;background:var(--light-gray);border-radius:6px;border:1px dashed var(--border-color)}.custom-color-section{display:flex;flex-direction:column;gap:12px}.custom-color-picker{width:100%;height:50px;border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:border-color .2s ease}.custom-color-picker:hover{border-color:var(--primary-color)}.color-hex{display:flex;gap:8px}.color-hex input{flex:1;padding:10px 12px;border:1px solid var(--border-color);border-radius:6px;font-size:14px;font-family:monospace;text-transform:uppercase;transition:border-color .2s ease}.color-hex input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #2563eb1a}.apply-hex-btn{padding:10px 16px;background:var(--primary-color);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:500;transition:background-color .2s ease}.apply-hex-btn:hover{background:#1d4ed8}.color-input-group{display:flex;gap:8px;align-items:center}.color-input-group .color-picker{flex:1}.color-palette-btn{padding:8px 10px;background:var(--light-gray);border:1px solid var(--border-color);border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.color-palette-btn:hover{background:var(--medium-gray);border-color:var(--primary-color)}@media (max-width: 768px){.color-palette-dialog{width:95%;max-height:90vh;margin:20px auto}.color-palette-header,.color-palette-content{padding:15px}.recent-colors,.preset-colors{grid-template-columns:repeat(auto-fill,minmax(35px,1fr))}.color-swatch{width:35px;height:35px}}@media (max-width: 480px){.color-palette-dialog{width:98vw;max-height:95vh;margin:10px auto;border-radius:8px}.color-palette-header{padding:12px}.color-palette-header h3{font-size:16px}.color-palette-content{padding:12px}.color-section{margin-bottom:20px}.color-section h4{font-size:14px}.recent-colors,.preset-colors{grid-template-columns:repeat(auto-fill,minmax(32px,1fr));gap:6px}.color-swatch{width:32px;height:32px;border-radius:4px}.custom-color-picker{height:45px}.color-hex input{font-size:16px;padding:12px}.apply-hex-btn{padding:12px 16px;font-size:14px}.clear-colors-btn{padding:6px 10px;font-size:11px}}.print-preview-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;z-index:1000;display:flex;justify-content:center;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}.print-preview-modal.show{opacity:1;visibility:visible}.print-preview-dialog{background:#fff;border-radius:12px;box-shadow:var(--shadow-lg);max-width:1200px;width:95%;max-height:90vh;overflow:hidden;transform:scale(.9);transition:transform .3s ease;display:flex;flex-direction:column}body.dark-mode .print-preview-dialog{background:#1e293b}.print-preview-modal.show .print-preview-dialog{transform:scale(1)}.print-preview-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--border-color);background:var(--light-gray);transition:background-color .3s ease}body.dark-mode .print-preview-header{background:#334155}.print-preview-header h3{margin:0;font-size:18px;font-weight:600;color:var(--dark-gray);display:flex;align-items:center;gap:8px}.print-preview-header h3 i{color:var(--primary-color)}.print-preview-content{display:flex;flex:1;overflow:hidden}.print-settings-panel{width:350px;padding:20px;border-right:1px solid var(--border-color);overflow-y:auto;background:var(--light-gray);transition:background-color .3s ease}body.dark-mode .print-settings-panel{background:#334155}.print-settings-panel h4{margin:0 0 15px;font-size:16px;font-weight:600;color:var(--dark-gray);border-bottom:1px solid var(--border-color);padding-bottom:8px}.settings-group{margin-bottom:25px}.settings-group h5{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--dark-gray)}.radio-group{display:flex;gap:15px}.radio-label{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:14px;color:var(--dark-gray)}.radio-label input[type=radio]{margin:0}.margins-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.print-preview-panel{flex:1;padding:20px;display:flex;flex-direction:column;overflow:hidden}.print-preview-panel h4{margin:0 0 15px;font-size:16px;font-weight:600;color:var(--dark-gray);border-bottom:1px solid var(--border-color);padding-bottom:8px}.preview-container{flex:1;display:flex;justify-content:center;align-items:center;background:#f5f5f5;border:1px solid var(--border-color);border-radius:8px;overflow:auto;padding:20px;margin-bottom:15px}.preview-container canvas{max-width:100%;height:auto;box-shadow:var(--shadow);background:#fff}.preview-info{display:flex;gap:20px;font-size:14px;color:var(--secondary-color)}.preview-info p{margin:0}.preview-info strong{color:var(--dark-gray)}.print-preview-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px;border-top:1px solid var(--border-color);background:var(--light-gray);transition:background-color .3s ease}body.dark-mode .print-preview-footer{background:#334155}.btn.primary{background-color:var(--primary-color);border-color:var(--primary-color);color:#fff}.btn.primary:hover{background-color:#1d4ed8;border-color:#1d4ed8}@media (max-width: 1024px){.print-preview-dialog{max-width:95%;width:95%}.print-preview-content{flex-direction:column}.print-settings-panel{width:100%;border-right:none;border-bottom:1px solid var(--border-color);max-height:40vh}.print-preview-panel{min-height:300px}}@media (max-width: 768px){.print-preview-dialog{width:98%;max-height:95vh}.print-preview-header,.print-settings-panel{padding:15px}@media (hover: none) and (pointer: coarse){.toolbar button,.icon-btn,.visibility-btn,.lock-btn,.close-btn{min-height:44px;min-width:44px;padding:12px}.sidebar-content{padding:15px;-webkit-overflow-scrolling:touch}.property-row input,.property-row select,.form-control{min-height:44px;padding:12px;font-size:16px;touch-action:manipulation}.layout-item,.history-item,.layer-item{padding:15px;min-height:50px}.color-swatch{width:44px;height:44px}.section-title{min-height:44px;padding:8px 0}.toolbar,.canvas-container{-webkit-overflow-scrolling:touch}.canvas-wrapper,.canvas-wrapper.mobile{touch-action:pan-x pan-y pinch-zoom}.toolbar button:active,.icon-btn:active,.visibility-btn:active,.lock-btn:active,.close-btn:active,.color-swatch:active{transform:scale(.95)}.toolbar button:active,.icon-btn:active,.visibility-btn:active,.lock-btn:active,.close-btn:active,.color-swatch:active,.layout-item:active,.history-item:active,.layer-item:active,.section-title:active{transform:scale(.92);background-color:#2563eb26}.toolbar button:after,.icon-btn:after,.visibility-btn:after,.lock-btn:after,.close-btn:after{content:"";position:absolute;top:50%;left:50%;width:10px;height:10px;margin-left:-5px;margin-top:-5px;background:#ffffff4d;border-radius:50%;opacity:0;transition:opacity .3s ease}.toolbar button:active:after,.icon-btn:active:after,.visibility-btn:active:after,.lock-btn:active:after,.close-btn:active:after{opacity:1}.zoom-controls button,.grid-toggle,.alignment-toggle{width:50px;height:50px}}.print-preview-panel,.print-preview-footer{padding:15px}.margins-grid{grid-template-columns:1fr}.preview-info{flex-direction:column;gap:10px}}.card-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin-bottom:20px}.preset-option{border:1px solid var(--border-color);border-radius:8px;padding:15px;cursor:pointer;transition:all .2s ease;background:#fff}.preset-option:hover{border-color:var(--primary-color);background-color:var(--light-gray)}.preset-option.selected{border-color:var(--primary-color);background-color:#2563eb1a}.preset-info h4{margin:0 0 8px;font-size:16px;font-weight:600;color:var(--dark-gray)}.preset-info p{margin:0 0 8px;font-size:14px;color:var(--secondary-color)}.preset-dimensions{font-size:12px;font-weight:500;color:var(--primary-color);background:var(--light-gray);padding:4px 8px;border-radius:4px;display:inline-block}.custom-size-section{margin-top:20px;padding-top:20px;border-top:1px solid var(--border-color)}.custom-size-section h4{margin:0 0 15px;font-size:16px;font-weight:600;color:var(--dark-gray)}.custom-size-inputs{display:flex;gap:15px;margin-bottom:15px}.custom-size-inputs .form-group{flex:1}.card-size-button{background:#fff;color:var(--dark-gray);border:1px solid var(--border-color)}.card-size-button:hover{background-color:var(--light-gray);border-color:var(--primary-color)}@media (max-width: 768px){.card-presets{grid-template-columns:1fr}.custom-size-inputs{flex-direction:column;gap:10px}}@media (hover: none) and (pointer: coarse){.toolbar button,.icon-btn,.visibility-btn,.lock-btn,.close-btn{min-height:44px;min-width:44px;padding:12px}.sidebar-content{padding:15px}.property-row input,.property-row select,.form-control{min-height:44px;font-size:16px;padding:12px;touch-action:manipulation}.layout-item,.history-item,.layer-item{padding:15px;min-height:50px;min-width:50px}.color-swatch{width:44px;height:44px;min-width:44px;min-height:44px}.section-title{min-height:44px;padding:12px 0}.modal-footer button{min-height:44px;min-width:44px;padding:12px 16px}.help-button,.dark-mode-toggle,.card-size-button{min-height:44px;min-width:44px;padding:12px}.toolbar button:active,.icon-btn:active,.visibility-btn:active,.lock-btn:active,.close-btn:active,.color-swatch:active,.layout-item:active,.history-item:active,.layer-item:active,.section-title:active{transform:scale(.95);background-color:#2563eb26}.toolbar-group{gap:12px}.toolbar,.canvas-container,.sidebar-content{-webkit-overflow-scrolling:touch}.canvas-wrapper,.canvas-wrapper.mobile{touch-action:pan-x pan-y pinch-zoom}}@media (max-width: 768px){.app-container{height:100vh;overflow:hidden}.sidebar{box-shadow:2px 0 10px #0000001a}.sidebar-toggle{width:44px;height:44px;min-width:44px;min-height:44px}.main-content{height:calc(100vh - 70px);overflow:hidden}.toolbar{padding:10px;gap:10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.toolbar::-webkit-scrollbar{display:none}.toolbar-group{padding-right:10px;flex-shrink:0;border-right:none;border-bottom:1px solid var(--border-color);padding-bottom:10px;margin-bottom:10px}.toolbar-group:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}.toolbar button{min-width:60px;min-height:50px;height:50px;font-size:11px;padding:8px 6px;border-radius:8px;touch-action:manipulation}.header{padding:15px;height:70px;box-sizing:border-box}.canvas-container{padding:10px;min-height:calc(100vh - 180px);height:calc(100vh - 180px);overflow:hidden}.canvas-wrapper{touch-action:pan-x pan-y pinch-zoom;border-radius:8px;overflow:hidden}.zoom-controls{bottom:15px;left:15px;gap:10px}.zoom-controls button{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .1s ease}.zoom-controls button:active{transform:scale(.9)}.grid-toggle{top:15px;right:15px;padding:10px 15px;min-height:44px;border-radius:20px;font-size:14px;box-shadow:var(--shadow);transition:transform .1s ease}.grid-toggle:active{transform:scale(.95)}.alignment-controls{top:70px;right:15px;gap:10px}.alignment-toggle{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .1s ease}.alignment-toggle:active{transform:scale(.9)}.notification{top:10px;right:10px;left:10px;max-width:none;border-radius:8px;padding:15px;font-size:16px;width:calc(100% - 20px)}.sidebar-content{-webkit-overflow-scrolling:touch;overflow-y:auto;height:calc(100vh - 60px)}.modal-dialog{width:95vw;max-width:none;max-height:90vh;margin:20px auto;border-radius:12px}.property-row input,.property-row select,.form-control{min-height:44px;font-size:16px;padding:12px;border-radius:8px;touch-action:manipulation}.layout-item{padding:15px;min-height:60px;border-radius:8px}.history-item,.layer-item{padding:15px;min-height:50px;border-radius:8px}.color-swatch{width:44px;height:44px;border-radius:8px}}@media (max-width: 374px){.header{padding:12px 10px}.header h1{font-size:16px}.header h1 i{margin-right:8px;font-size:14px}.header-actions{gap:8px}.help-button,.dark-mode-toggle{padding:6px 8px;font-size:12px}.canvas-container{padding:8px}.zoom-controls{bottom:10px;left:10px;gap:6px}.zoom-controls button{width:36px;height:36px}.modal-dialog{width:100vw;height:100vh;margin:0;border-radius:0}}@media (max-width: 768px){.header{padding:15px;flex-wrap:wrap;gap:10px}.header h1{flex:1;min-width:0}.header-actions{flex-shrink:0}.toolbar{padding:12px 10px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent}.toolbar::-webkit-scrollbar{height:4px}.toolbar::-webkit-scrollbar-track{background:transparent}.toolbar::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:2px}.canvas-container{padding:12px}.canvas-wrapper{max-width:100%}.form-group{margin-bottom:16px}.form-group label{font-size:14px;margin-bottom:6px}.modal-body{padding:16px}.modal-footer{padding:12px;gap:10px}.section-title{font-size:15px;padding:12px}.sidebar.mobile{width:min(320px,85vw)}}@media (max-width: 768px) and (orientation: landscape){.app-container{height:100vh}.header{padding:10px 15px}.header h1{font-size:18px}.toolbar{padding:8px 10px;min-height:70px}.toolbar button{min-height:48px;padding:8px}.canvas-container{padding:10px}.zoom-controls{bottom:10px;left:10px}.modal-dialog{max-height:95vh;overflow-y:auto}}@media (min-width: 769px) and (max-width: 1024px){.sidebar{width:280px}.header h1{font-size:22px}.toolbar{padding:15px}.canvas-container{padding:16px}}@media (min-width: 1400px){.app-container{max-width:100%}.header h1{font-size:26px}.canvas-container{padding:30px}.modal-dialog{max-width:700px}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.canvas-wrapper{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media print{.sidebar,.toolbar,.header,.zoom-controls,.grid-toggle,.modal-overlay,.notification{display:none!important}.canvas-container{background:#fff!important;padding:0!important}.main-content{width:100%!important}body{background:#fff!important}}@media (prefers-reduced-motion: no-preference){*:focus-visible{outline:3px solid var(--primary-color);outline-offset:2px;border-radius:4px}}@media (pointer: coarse){button,a,input[type=button],input[type=submit],input[type=checkbox],input[type=radio],select{min-height:44px;min-width:44px}.toolbar-group{gap:12px}.property-row{margin-bottom:16px}}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}.sidebar-content,.modal-body,.canvas-container{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}@supports (padding: max(0px)){.app-container{padding-left:max(0px,env(safe-area-inset-left));padding-right:max(0px,env(safe-area-inset-right))}.header{padding-top:max(20px,env(safe-area-inset-top))}.sidebar.mobile{padding-bottom:max(0px,env(safe-area-inset-bottom))}}@media (prefers-reduced-data: reduce){body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif}}@media (max-width: 768px){@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.sidebar-content,.canvas-container,.toolbar{-webkit-overflow-scrolling:touch;will-change:scroll-position}.canvas-container{contain:layout style paint}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}input,select,textarea{-webkit-appearance:none;appearance:none;-webkit-text-size-adjust:100%}}@media (max-width: 768px){.header{padding:12px;flex-wrap:nowrap;gap:8px;min-height:60px}.header h1{font-size:clamp(14px,3.5vw,18px);flex:0 1 auto;margin-right:auto}.header h1 i{margin-right:8px;font-size:16px}.header-actions{gap:6px;flex-shrink:0;flex-wrap:nowrap}.help-button,.dark-mode-toggle,.card-size-button{padding:8px;font-size:13px;border-radius:8px;min-width:44px;min-height:44px}.help-button span,.dark-mode-toggle span,.card-size-button span{display:none}.tooltip{font-size:12px;padding:4px 8px}}@media (max-width: 480px){.header{padding:10px 8px}.header h1{font-size:14px}.header h1 i{font-size:14px;margin-right:6px}.header-actions{gap:4px}.help-button,.dark-mode-toggle,.card-size-button{padding:6px;min-width:40px;min-height:40px}.tooltip{display:none}}@media (max-width: 768px){.canvas-container{padding:10px;min-height:400px;overflow-x:auto;overflow-y:hidden}.toolbar::-webkit-scrollbar{height:6px}.toolbar::-webkit-scrollbar-track{background:#0000000d;border-radius:3px}.toolbar::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:3px}.toolbar::-webkit-scrollbar-thumb:hover{background:var(--secondary-color)}.toolbar-group{display:flex;gap:8px;flex-shrink:0;padding-right:12px;border-right:2px solid var(--border-color)}.toolbar-group:last-child{border-right:none;padding-right:0}.toolbar button{min-width:60px;min-height:54px;padding:8px 6px;font-size:13px;flex-direction:column;gap:4px;white-space:nowrap;border-radius:8px}.toolbar button i{font-size:18px}.toolbar button span{font-size:11px}.mobile-scroll-indicator{position:absolute;top:0;right:0;background:linear-gradient(90deg,transparent,rgba(37,99,235,.1));padding:8px 12px;font-size:11px;color:var(--primary-color);display:flex;align-items:center;gap:6px;pointer-events:none;z-index:10;border-radius:0 0 0 8px}}@media (max-width: 480px){.toolbar{padding:8px;gap:8px}.toolbar-group{gap:6px;padding-right:8px}.toolbar button{min-width:52px;min-height:50px;padding:6px 4px;font-size:12px}.toolbar button i{font-size:16px}.toolbar button span{font-size:10px}}@media (max-width: 768px){.sidebar-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0009;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:99;opacity:0;pointer-events:none;transition:opacity .3s ease}.sidebar-overlay.show{opacity:1;pointer-events:auto}.sidebar{position:fixed;top:0;left:0;height:100vh;width:90vw;max-width:360px;transform:translate(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:100;box-shadow:4px 0 40px #00000080;border-radius:0 20px 20px 0;background:linear-gradient(135deg,#fff,#f8fafc)!important;overflow:hidden}body.dark-mode .sidebar{background:linear-gradient(135deg,#1e293b,#0f172a)!important;box-shadow:4px 0 40px #000c}.sidebar.show{transform:translate(0)}.sidebar.mobile{transform:translate(-100%)}.sidebar.mobile.show{transform:translate(0)}.sidebar-content{height:100vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:20px 16px 100px;background:transparent;scrollbar-width:thin;scrollbar-color:var(--primary-color) transparent}.sidebar-content::-webkit-scrollbar{width:6px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background:var(--primary-color);border-radius:3px}.section-title{padding:14px 16px;margin-bottom:12px;border-radius:12px;background:#2563eb14;border:1px solid rgba(37,99,235,.15);min-height:52px;font-size:15px;font-weight:600;transition:all .2s ease;box-shadow:0 2px 4px #0000000d}body.dark-mode .section-title{background:#3b82f626;border:1px solid rgba(59,130,246,.25)}.section-title:active{transform:scale(.98);background:#2563eb26}.layout-item{padding:14px;margin-bottom:10px;border-radius:14px;min-height:70px;background:#fffffff2;border:2px solid rgba(203,213,225,.6);transition:all .2s ease;box-shadow:0 2px 6px #00000014}body.dark-mode .layout-item{background:#33415599;border:2px solid rgba(71,85,105,.6)}.layout-item:active{transform:scale(.98);background:#2563eb1a}.layout-item.active{background:linear-gradient(135deg,#2563eb2e,#1d4ed81f);border:2px solid var(--primary-color);box-shadow:0 4px 12px #2563eb40}.layout-item h3{font-size:15px;font-weight:600;margin-bottom:4px}.layout-item p{font-size:13px;opacity:.8}.action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px;background:#2563eb0f;border-radius:14px;margin-top:16px;border:1px solid rgba(37,99,235,.15)}body.dark-mode .action-buttons{background:#3b82f61a;border:1px solid rgba(59,130,246,.2)}.action-buttons button{min-height:50px;border-radius:12px;font-size:14px;font-weight:600;transition:all .2s ease;box-shadow:0 2px 4px #0000001a}.action-buttons button:active{transform:scale(.96)}.property-row{margin-bottom:16px}.property-row label{font-size:14px;font-weight:600;margin-bottom:8px;color:var(--dark-gray);display:block}.property-row input,.property-row select,.property-row textarea{min-height:46px;border-radius:10px;font-size:15px;padding:12px 14px;border:2px solid rgba(203,213,225,.8);transition:all .2s ease;width:100%}.property-row input:focus,.property-row select:focus,.property-row textarea:focus{border-color:var(--primary-color);box-shadow:0 0 0 4px #2563eb1f;outline:none}.history-item,.layer-item{padding:14px;margin-bottom:8px;border-radius:12px;min-height:58px;background:#ffffffe6;border:2px solid rgba(203,213,225,.5);transition:all .2s ease;box-shadow:0 2px 4px #0000000f}body.dark-mode .history-item,body.dark-mode .layer-item{background:#33415580;border:2px solid rgba(71,85,105,.5)}.history-item:active,.layer-item:active{transform:scale(.98)}.history-item.active,.layer-item.active{background:#2563eb26;border:2px solid var(--primary-color);box-shadow:0 4px 8px #2563eb33}.save-template-btn{width:100%;min-height:50px;border-radius:12px;font-size:14px;font-weight:600;margin-bottom:10px;transition:all .2s ease;box-shadow:0 2px 6px #0000001a}.save-template-btn:active{transform:scale(.98)}button.icon-btn{min-width:44px;min-height:44px;border-radius:10px}.empty-state{padding:24px 16px;text-align:center;border-radius:14px;background:#2563eb0d;border:2px dashed rgba(37,99,235,.2)}.empty-state i{font-size:36px;margin-bottom:12px;opacity:.5}.empty-state p{font-size:14px;line-height:1.5;opacity:.8}}@media (max-width: 768px){.main-content{width:100%;flex:1;display:flex;flex-direction:column;overflow:hidden}.canvas-container{flex:1;padding:10px;overflow:auto;-webkit-overflow-scrolling:touch}.canvas-wrapper{margin:0 auto}}@media (max-width: 768px) and (orientation: landscape){.header{padding:8px 12px;min-height:50px}.header h1{font-size:16px}.toolbar{padding:8px;min-height:60px}.toolbar button{min-height:46px;padding:6px}.canvas-container{padding:8px}}@media (max-width: 768px){button:not(.mobile-sidebar-toggle):not(.sidebar-toggle){-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:active{transform:scale(.96)}}@media (pointer: coarse){.header-actions button,.toolbar button,.sidebar button{min-height:44px;min-width:44px}}@media (max-width: 360px){.header h1{font-size:13px}.header h1 i{font-size:12px}.mobile-sidebar-toggle{min-width:40px;height:40px;font-size:16px}.toolbar button{min-width:48px}.sidebar{width:90vw}.toolbar{flex-direction:column;align-items:stretch;gap:4px}.toolbar-group{border-right:none;border-bottom:1px solid var(--border-color);padding-right:0;padding-bottom:6px;justify-content:center;flex-wrap:wrap}.toolbar-group:last-child{border-bottom:none;padding-bottom:0}.toolbar button{min-width:48px;min-height:44px;padding:8px 4px;font-size:12px}.toolbar button i{font-size:16px}.toolbar button span{font-size:10px}.canvas-container{padding:5px;min-height:300px}.zoom-controls{bottom:10px;left:10px}.zoom-controls button{width:44px;height:44px}.grid-toggle{top:10px;right:10px;padding:8px 12px;font-size:12px}.alignment-controls{top:60px;right:10px}.alignment-toggle{width:44px;height:44px}.modal-dialog{width:98vw;margin:10px auto;max-height:95vh}.modal-body{padding:15px}.property-group{padding:12px;margin-bottom:12px}.property-row{margin-bottom:12px}.property-row label{font-size:13px;margin-bottom:6px}.property-row input,.property-row select,.property-row textarea{min-height:42px;font-size:14px;padding:10px 12px}}