/* vazirmatn-arabic-300-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/assets/vazirmatn-arabic-300-normal-BYd1kBEw.woff2) format('woff2'), url(/assets/vazirmatn-arabic-300-normal-DLHw88_k.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* vazirmatn-latin-ext-300-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/assets/vazirmatn-latin-ext-300-normal-C0szevm-.woff2) format('woff2'), url(/assets/vazirmatn-latin-ext-300-normal-e-3YDG27.woff) format('woff');
  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;
}

/* vazirmatn-latin-300-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 300;
  src: url(/assets/vazirmatn-latin-300-normal-BoU4YpvD.woff2) format('woff2'), url(/assets/vazirmatn-latin-300-normal-C6mM4Yld.woff) format('woff');
  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;
}/* vazirmatn-arabic-400-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/vazirmatn-arabic-400-normal-DMZFCm7K.woff2) format('woff2'), url(/assets/vazirmatn-arabic-400-normal-C4W5XURk.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* vazirmatn-latin-ext-400-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/vazirmatn-latin-ext-400-normal-BdGhO0lm.woff2) format('woff2'), url(/assets/vazirmatn-latin-ext-400-normal-DPxMaNjI.woff) format('woff');
  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;
}

/* vazirmatn-latin-400-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/vazirmatn-latin-400-normal-BT_DHTc7.woff2) format('woff2'), url(/assets/vazirmatn-latin-400-normal-GKyMcI03.woff) format('woff');
  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;
}/* vazirmatn-arabic-500-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/vazirmatn-arabic-500-normal-C_lbnnKa.woff2) format('woff2'), url(/assets/vazirmatn-arabic-500-normal-Dqq3-xo3.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* vazirmatn-latin-ext-500-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/vazirmatn-latin-ext-500-normal-CgxvvVrG.woff2) format('woff2'), url(/assets/vazirmatn-latin-ext-500-normal-4XgegWYb.woff) format('woff');
  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;
}

/* vazirmatn-latin-500-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(/assets/vazirmatn-latin-500-normal-6zZzgpg4.woff2) format('woff2'), url(/assets/vazirmatn-latin-500-normal-Bg_BALlD.woff) format('woff');
  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;
}/* vazirmatn-arabic-600-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/vazirmatn-arabic-600-normal-CPKvAnd1.woff2) format('woff2'), url(/assets/vazirmatn-arabic-600-normal-CWYTfCgi.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* vazirmatn-latin-ext-600-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/vazirmatn-latin-ext-600-normal-CyxCUfFz.woff2) format('woff2'), url(/assets/vazirmatn-latin-ext-600-normal-Di8rk35l.woff) format('woff');
  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;
}

/* vazirmatn-latin-600-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(/assets/vazirmatn-latin-600-normal-D-zF-Oec.woff2) format('woff2'), url(/assets/vazirmatn-latin-600-normal-BxJiDPKT.woff) format('woff');
  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;
}/* vazirmatn-arabic-700-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/vazirmatn-arabic-700-normal-Dge_DOjm.woff2) format('woff2'), url(/assets/vazirmatn-arabic-700-normal-B5nPuCFv.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* vazirmatn-latin-ext-700-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/vazirmatn-latin-ext-700-normal-BfoXmNMx.woff2) format('woff2'), url(/assets/vazirmatn-latin-ext-700-normal-DMYLqBto.woff) format('woff');
  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;
}

/* vazirmatn-latin-700-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/vazirmatn-latin-700-normal-9BlbvDRV.woff2) format('woff2'), url(/assets/vazirmatn-latin-700-normal-DrB0PBU6.woff) format('woff');
  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;
}/* vazirmatn-arabic-800-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/vazirmatn-arabic-800-normal-Bwnt96zj.woff2) format('woff2'), url(/assets/vazirmatn-arabic-800-normal-BH12s3-y.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* vazirmatn-latin-ext-800-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/vazirmatn-latin-ext-800-normal-BzH3Tiwu.woff2) format('woff2'), url(/assets/vazirmatn-latin-ext-800-normal-HbVXW2Kv.woff) format('woff');
  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;
}

/* vazirmatn-latin-800-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(/assets/vazirmatn-latin-800-normal-e0EQwLmk.woff2) format('woff2'), url(/assets/vazirmatn-latin-800-normal-fM8Xz9cI.woff) format('woff');
  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;
}/* vazirmatn-arabic-900-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/assets/vazirmatn-arabic-900-normal-BVDx3pOU.woff2) format('woff2'), url(/assets/vazirmatn-arabic-900-normal-DxDkRnCr.woff) format('woff');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}

/* vazirmatn-latin-ext-900-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/assets/vazirmatn-latin-ext-900-normal-DFoB6cWj.woff2) format('woff2'), url(/assets/vazirmatn-latin-ext-900-normal-5ssG3_7O.woff) format('woff');
  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;
}

/* vazirmatn-latin-900-normal */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-display: swap;
  font-weight: 900;
  src: url(/assets/vazirmatn-latin-900-normal-DUUbkNfs.woff2) format('woff2'), url(/assets/vazirmatn-latin-900-normal-BGmAvq1S.woff) format('woff');
  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;
}/* parisienne-latin-ext-400-normal */
@font-face {
  font-family: 'Parisienne';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/parisienne-latin-ext-400-normal-Dztwpsbx.woff2) format('woff2'), url(/assets/parisienne-latin-ext-400-normal-DZKaXAkd.woff) format('woff');
  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;
}

/* parisienne-latin-400-normal */
@font-face {
  font-family: 'Parisienne';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/parisienne-latin-400-normal-21gANpEP.woff2) format('woff2'), url(/assets/parisienne-latin-400-normal-C9Kl9k4-.woff) format('woff');
  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;
}/* Keep the original cascade order, including the final responsive overrides.
   Import globally shared CSS Modules through one stylesheet so production
   tree-shaking cannot discard modules whose class names are already in JSX. */
:root {
      --plum: #4A3D66;
      --plum-rgb: 74, 61, 102;
      --plum-2: #5B4C7E;
      --lilac: #B9A5D6;
      --lilac-rgb: 185, 165, 214;
      --blush: #F3C9CE;
      --blush-rgb: 243, 201, 206;
      --rose: #E09AA6;
      --rose-rgb: 224, 154, 166;
      --gold: #D9B36C;
      --gold-rgb: 217, 179, 108;
      --cream: #FCF8F5;
      --cream-rgb: 252, 248, 245;
      --ink: #3A3050;
      --muted: rgba(58, 48, 80, .62);
      --faint: rgba(58, 48, 80, .42);
      --line: rgba(74, 61, 102, .10);
      --card: rgba(255, 255, 255, .74);
      --shadow-s: 0 4px 18px rgba(var(--plum-rgb), .07);
      --shadow-m: 0 14px 40px rgba(var(--plum-rgb), .10);
      --shadow-l: 0 26px 70px rgba(var(--plum-rgb), .16);
      --r-sm: 14px;
      --r-md: 20px;
      --r-lg: 28px;
      --r-xl: 36px;
      --arch: 190px 190px 24px 24px;
      --ease: cubic-bezier(.4, 0, .2, 1);
      --wrap: 1180px;
      --photo: url("/assets/hero.jpg");
    }

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

    html {
      scroll-behavior: smooth
    }

    body {
      font-family: 'Vazirmatn', 'Tahoma', sans-serif;
      background: var(--cream);
      background-image:
        radial-gradient(ellipse 70% 45% at 88% 4%, rgba(var(--blush-rgb), .55), transparent 60%),
        radial-gradient(ellipse 60% 45% at 6% 30%, rgba(var(--lilac-rgb), .40), transparent 62%),
        radial-gradient(ellipse 70% 40% at 50% 100%, rgba(var(--blush-rgb), .35), transparent 60%);
      background-attachment: fixed;
      color: var(--ink);
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    a {
      text-decoration: none;
      color: inherit
    }

    button,
    a,
    input,
    select {
      font-family: inherit
    }

    button {
      border: none;
      background: none;
      cursor: pointer
    }

    :focus-visible {
      outline: 3px solid var(--rose);
      outline-offset: 3px;
      border-radius: 8px
    }

    .wrap {
      max-width: var(--wrap);
      margin-inline: auto;
      padding-inline: clamp(16px, 4vw, 32px)
    }

    .script {
      font-family: 'Parisienne', cursive;
      color: #fff;
      letter-spacing: .5px;
      text-shadow: 0 0 6px rgba(255, 255, 255, .9), 0 0 18px rgba(var(--rose-rgb), .9), 0 0 40px rgba(var(--rose-rgb), .65), 0 0 70px rgba(var(--rose-rgb), .4)
    }

    .script.on-light {
      color: var(--rose);
      text-shadow: 0 0 22px rgba(var(--rose-rgb), .3)
    }

    input[type="password"]::-ms-reveal,
    input[type="password"]::-ms-clear {
      display: none;
    }

    .password-input-wrap {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
    }

    .password-input-wrap input {
      width: 100%;
      padding-inline-end: 42px !important;
    }

    .password-toggle-btn {
      position: absolute;
      inset-inline-end: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: transparent;
      border: none;
      padding: 6px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      border-radius: var(--r-xs, 6px);
      transition: color .2s var(--ease);
      line-height: 1;
      z-index: 2;
    }

    .password-toggle-btn:hover {
      color: var(--plum);
    }


.loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 38px 0; color: var(--muted); font-size: 13px; font-weight: 600 }
.loading.compact { flex-direction: row; padding: 10px 0; gap: 10px; justify-content: flex-start }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(var(--lilac-rgb), .35); border-top-color: var(--plum-2); border-inline-end-color: var(--rose); animation: spin .8s linear infinite }
.loading.compact .spinner { width: 18px; height: 18px; border-width: 2.5px }
@keyframes spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s } }

/* Page change: keep the footer from jumping up and fade the new page in. */
#app { min-height: 70vh }
#app > * { animation: page-in .22s var(--ease) both }
@keyframes page-in { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

/* Skeleton loading */
.skeleton { display: grid; gap: 16px; padding: 24px 0 }
.sk { display: block; max-width: 100%; border-radius: 10px; background: linear-gradient(100deg, rgba(var(--plum-rgb), .07) 30%, rgba(var(--plum-rgb), .15) 50%, rgba(var(--plum-rgb), .07) 70%); background-size: 220% 100%; animation: sk-shimmer 1.3s linear infinite }
@keyframes sk-shimmer { from { background-position: 120% 0 } to { background-position: -120% 0 } }
.sk-col { display: grid; gap: 10px; flex: 1; min-width: 0 }
.sk-pad { padding: 4px 2px }
.sk-round { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0 }
.sk-row { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .6); border: 1px solid var(--line) }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px }
.sk-card { display: grid; gap: 14px; padding: 12px; border-radius: var(--r-md); background: rgba(255, 255, 255, .65); border: 1px solid var(--line) }
.sk-img { width: 100%; height: 170px; border-radius: var(--r-sm) }
.sk-hero { width: 100%; height: 260px; border-radius: var(--r-md) }
@media (prefers-reduced-motion: reduce) { .sk { animation: none } }

/* Pagination */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px }
.pager-info { color: var(--muted); font-size: 12.5px; font-weight: 600 }
.pager-pages { display: flex; gap: 6px; flex-wrap: wrap }
.pager-pages button { min-width: 36px; height: 36px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--plum); font: inherit; font-weight: 700; cursor: pointer; transition: all .2s var(--ease) }
.pager-pages button:hover:not(:disabled) { border-color: var(--rose) }
.pager-pages button.on { background: var(--plum); border-color: var(--plum); color: #fff }
.pager-pages button:disabled { opacity: .45; cursor: default }
.pager-gap { align-self: center; color: var(--muted) }
.load-more { display: flex; justify-content: center; padding: 18px 0 }
.nav-shell {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 80;
      padding: 16px clamp(14px, 3.4vw, 34px);
      transition: padding .35s var(--ease)
    }

    .nav-shell.stuck {
      padding-top: 10px
    }

    .nav {
      display: flex;
      align-items: center;
      gap: 14px;
      max-width: 1320px;
      margin-inline: auto;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(var(--plum-rgb), .72);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, .16);
      box-shadow: 0 10px 34px rgba(var(--plum-rgb), .22);
      transition: background .35s var(--ease), box-shadow .35s var(--ease)
    }

    .nav-shell.stuck .nav {
      background: rgba(var(--plum-rgb), .95);
      box-shadow: 0 12px 38px rgba(var(--plum-rgb), .30)
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-inline-start: 8px;
      color: #fff;
      flex-shrink: 0
    }

    .brand-mark {
      width: 38px;
      height: 38px;
      flex-shrink: 0;
      border-radius: 10px;
      object-fit: cover;
      display: grid;
      place-items: center;
      color: var(--plum);
      font-weight: 900;
      font-size: 15px;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .35) inset, 0 6px 16px rgba(var(--rose-rgb), .35)
    }

    .brand b {
      display: block;
      font-size: 15px;
      font-weight: 800;
      line-height: 1.3;
      white-space: nowrap
    }

    .brand i {
      display: block;
      font-style: normal;
      font-size: 10px;
      font-weight: 500;
      color: rgba(255, 255, 255, .62);
      letter-spacing: 1.4px
    }

    .menu {
      display: flex;
      align-items: center;
      gap: 2px;
      margin-inline: auto
    }

    .menu>li {
      position: relative;
      list-style: none
    }

    .menu a,
    .menu .drop-t {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 9px 15px;
      border-radius: 999px;
      color: rgba(255, 255, 255, .88);
      font-size: 13.5px;
      font-weight: 500;
      transition: background .25s var(--ease), color .25s var(--ease)
    }

    .menu a:hover,
    .menu .drop-t:hover,
    .menu li.open .drop-t {
      background: rgba(255, 255, 255, .14);
      color: #fff
    }

    .caret {
      width: 9px;
      height: 9px;
      border-inline-end: 1.8px solid currentColor;
      border-block-end: 1.8px solid currentColor;
      transform: rotate(45deg) translateY(-1px);
      transition: transform .3s var(--ease)
    }

    .menu li.open .caret {
      transform: rotate(-135deg) translateY(-3px)
    }

    .dropdown {
      position: absolute;
      top: calc(100% + 12px);
      inset-inline-end: 0;
      min-width: 262px;
      padding: 8px;
      background: rgba(255, 255, 255, .97);
      backdrop-filter: blur(18px);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      box-shadow: var(--shadow-l);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-8px);
      transition: all .28s var(--ease)
    }

    .menu li.open .dropdown {
      opacity: 1;
      visibility: visible;
      transform: translateY(0)
    }

    .dropdown button {
      display: flex;
      width: 100%;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      color: var(--ink);
      font-size: 13.5px;
      font-weight: 700;
      text-align: start
    }

    .dropdown button:hover {
      background: rgba(var(--blush-rgb), .32);
      color: var(--plum)
    }

    .dropdown .ic-pill {
      width: 31px;
      height: 31px;
      border-radius: 999px 999px 6px 6px;
      background: rgba(var(--lilac-rgb), .28);
      display: grid;
      place-items: center;
      color: var(--plum);
      flex-shrink: 0
    }

    .dropdown small {
      display: block;
      font-size: 11px;
      font-weight: 500;
      color: var(--faint);
      margin-top: 1px
    }

    .nav-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0
    }

    .icon-btn {
      width: 38px;
      height: 38px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      color: #fff;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .16);
      transition: background .25s var(--ease), transform .25s var(--ease)
    }

    .icon-btn:hover {
      background: rgba(255, 255, 255, .24);
      transform: translateY(-1px)
    }

    .btn-signup {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 10px 18px;
      border-radius: 999px;
      background: #fff;
      color: var(--plum);
      font-size: 13px;
      font-weight: 800;
      box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
      transition: transform .25s var(--ease), box-shadow .25s var(--ease)
    }

    .btn-signup:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 26px rgba(0, 0, 0, .2)
    }

    .burger {
      display: none;
      width: 40px;
      height: 40px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .14);
      border: 1px solid rgba(255, 255, 255, .18);
      color: #fff;
      place-items: center
    }
.btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 14px 26px;
      border-radius: 999px;
      font-size: 14.5px;
      font-weight: 800;
      transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease)
    }

    .btn-rose {
      background: linear-gradient(135deg, var(--rose), var(--blush) 88%);
      color: #572630;
      box-shadow: 0 12px 30px rgba(var(--rose-rgb), .42)
    }

    .btn-rose:hover {
      transform: translateY(-3px);
      box-shadow: 0 18px 42px rgba(var(--rose-rgb), .55)
    }

    .btn-glass {
      background: rgba(255, 255, 255, .14);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, .34);
      backdrop-filter: blur(12px)
    }

    .btn-glass:hover {
      background: rgba(255, 255, 255, .26);
      transform: translateY(-3px)
    }

    .btn-plum {
      background: var(--plum);
      color: #fff;
      box-shadow: 0 12px 30px rgba(var(--plum-rgb), .28)
    }

    .btn-plum:hover {
      transform: translateY(-3px);
      background: var(--plum-2)
    }

    .btn-plum[disabled] {
      opacity: .4;
      pointer-events: none;
      box-shadow: none
    }

    .btn-soft {
      background: #fff;
      color: var(--plum);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-s)
    }

    .btn-soft:hover {
      background: rgba(var(--blush-rgb), .28);
      transform: translateY(-2px)
    }

    .btn-sm {
      padding: 10px 18px;
      font-size: 13px
    }

    .hero {
      position: relative;
      margin: 12px;
      border-radius: var(--r-xl);
      overflow: hidden;
      min-height: min(88vh, 820px);
      display: flex;
      align-items: flex-end;
      isolation: isolate
    }

    .hero-img {
      position: absolute;
      inset: 0;
      background-image: var(--photo);
      background-size: cover;
      background-position: center 42%;
      transform: scale(1.06)
    }

    @keyframes drift {
      from {
        transform: scale(1.06) translateY(0)
      }

      to {
        transform: scale(1.13) translateY(-14px)
      }
    }

    .hero-veil {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom, rgba(var(--plum-rgb), .58) 0%, rgba(var(--plum-rgb), .10) 26%, rgba(var(--plum-rgb), .16) 50%, rgba(var(--plum-rgb), .78) 100%),
        radial-gradient(ellipse 60% 50% at 50% 100%, rgba(var(--plum-rgb), .55), transparent 70%)
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      width: 100%;
      padding: clamp(120px, 16vw, 180px) clamp(20px, 5vw, 64px) clamp(26px, 4vw, 44px);
      max-width: var(--wrap);
      margin-inline: auto
    }

    .hero .script {
      font-size: clamp(30px, 5.2vw, 52px);
      line-height: 1.1;
      display: block;
      margin-bottom: 6px
    }

    .hero h2 {
      font-size: clamp(29px, 5.4vw, 58px);
      font-weight: 900;
      line-height: 1.3;
      color: #fff;
      letter-spacing: -.6px;
      max-width: 16ch;
      text-shadow: 0 2px 30px rgba(var(--plum-rgb), .5)
    }

    .hero h2 em {
      font-style: normal;
      color: var(--blush)
    }

    .hero p {
      margin-top: 16px;
      max-width: 46ch;
      font-size: clamp(14px, 1.6vw, 16.5px);
      line-height: 2;
      color: rgba(255, 255, 255, .9);
      text-shadow: 0 1px 16px rgba(var(--plum-rgb), .55)
    }

    .search-bar {
      position: relative;
      z-index: 3;
      max-width: calc(var(--wrap) - 8px);
      margin: -46px auto 0;
      padding: 14px;
      display: grid;
      grid-template-columns: repeat(3, 1fr) auto;
      gap: 10px;
      background: rgba(255, 255, 255, .85);
      backdrop-filter: blur(26px) saturate(1.4);
      -webkit-backdrop-filter: blur(26px) saturate(1.4);
      border: 1px solid rgba(255, 255, 255, .7);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-l)
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 3px;
      padding: 8px 14px;
      border-radius: var(--r-sm);
      transition: background .25s var(--ease)
    }

    .field:hover {
      background: rgba(var(--blush-rgb), .22)
    }

    .field label {
      font-size: 11px;
      font-weight: 700;
      color: var(--faint);
      letter-spacing: .3px
    }

    .field select {
      border: none;
      background: transparent;
      font-size: 14px;
      font-weight: 700;
      color: var(--plum);
      padding: 2px 0;
      width: 100%;
      appearance: none;
      cursor: pointer
    }

    .field+.field {
      border-inline-start: 1px solid var(--line)
    }

    section.blk {
      padding: clamp(56px, 8vw, 96px) 0
    }

    .head {
      text-align: center;
      max-width: 640px;
      margin: 0 auto clamp(30px, 4.5vw, 46px)
    }

    .head .script {
      font-size: 26px
    }

    .head h3 {
      font-size: clamp(23px, 3.6vw, 36px);
      font-weight: 900;
      color: var(--plum);
      letter-spacing: -.4px;
      margin: 12px 0 10px;
      line-height: 1.45
    }

    .head p {
      font-size: 14.5px;
      line-height: 2;
      color: var(--muted)
    }

    .sec-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 22px;
      flex-wrap: wrap
    }

    .sec-title h3 {
      font-size: clamp(20px, 3vw, 28px);
      font-weight: 900;
      color: var(--plum);
      line-height: 1.5
    }

    .sec-title .cnt {
      font-size: 13px;
      color: var(--muted);
      font-weight: 600
    }

    .cats {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      padding: 6px 2px 14px;
      scrollbar-width: none
    }

    .cats::-webkit-scrollbar {
      display: none
    }

    .chip {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 11px 18px;
      border-radius: 999px;
      white-space: nowrap;
      flex-shrink: 0;
      background: #fff;
      border: 1px solid var(--line);
      color: var(--plum);
      font-size: 13.5px;
      font-weight: 700;
      box-shadow: var(--shadow-s);
      transition: all .28s var(--ease)
    }

    .chip:hover {
      transform: translateY(-2px);
      border-color: rgba(var(--rose-rgb), .5)
    }

    .chip.on {
      background: var(--plum);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 10px 24px rgba(var(--plum-rgb), .28)
    }

    .chip.on svg {
      color: var(--blush)
    }

    .tiles {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
      gap: clamp(12px, 1.8vw, 18px)
    }

    .tile {
      position: relative;
      padding: 28px 14px 20px;
      text-align: center;
      background: var(--card);
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: var(--arch);
      box-shadow: var(--shadow-s);
      overflow: hidden;
      transition: transform .38s var(--ease), box-shadow .38s var(--ease), border-color .38s var(--ease)
    }

    .tile::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(var(--blush-rgb), .45), transparent 55%);
      opacity: 0;
      transition: opacity .38s var(--ease)
    }

    .tile:hover {
      transform: translateY(-8px);
      box-shadow: var(--shadow-m);
      border-color: rgba(var(--rose-rgb), .35)
    }

    .tile:hover::before {
      opacity: 1
    }

    .tile>* {
      position: relative;
      z-index: 1
    }

    .tile .bulb {
      width: 58px;
      height: 58px;
      margin: 0 auto 13px;
      border-radius: 999px 999px 12px 12px;
      display: grid;
      place-items: center;
      color: var(--plum);
      background: linear-gradient(160deg, rgba(var(--lilac-rgb), .45), rgba(var(--blush-rgb), .55));
      box-shadow: 0 0 0 6px rgba(255, 255, 255, .55), 0 10px 22px rgba(var(--rose-rgb), .22)
    }

    .tile h4 {
      font-size: 15.5px;
      font-weight: 800;
      color: var(--plum);
      margin-bottom: 5px
    }

    .tile small {
      font-size: 11.5px;
      color: var(--muted);
      font-weight: 600
    }

    .salons {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
      gap: clamp(16px, 2.2vw, 24px)
    }

    .salon {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      overflow: hidden;
      box-shadow: var(--shadow-s);
      display: flex;
      flex-direction: column;
      text-align: start;
      transition: transform .38s var(--ease), box-shadow .38s var(--ease)
    }

    .salon:hover {
      transform: translateY(-7px);
      box-shadow: var(--shadow-l)
    }

    .salon .ph {
      height: 186px;
      position: relative;
      background-size: cover;
      background-position: center;
      overflow: hidden
    }

    .salon .ph::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(var(--plum-rgb), .62), transparent 58%)
    }

    .salon .rate {
      position: absolute;
      top: 12px;
      inset-inline-start: 12px;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 5px;
      background: rgba(255, 255, 255, .94);
      border-radius: 999px;
      padding: 6px 11px;
      font-size: 12px;
      font-weight: 800;
      color: var(--plum);
      box-shadow: 0 4px 14px rgba(0, 0, 0, .14)
    }

    .salon .rate b {
      color: var(--gold)
    }

    .salon .area {
      position: absolute;
      bottom: 12px;
      inset-inline-end: 14px;
      z-index: 2;
      color: #fff;
      font-size: 12px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 5px;
      text-shadow: 0 1px 8px rgba(0, 0, 0, .5)
    }

    .salon .bd {
      padding: 18px 20px 20px;
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .salon h4 {
      font-size: 16.5px;
      font-weight: 800;
      color: var(--plum);
      line-height: 1.5
    }

    .salon .addr {
      font-size: 12.2px;
      color: var(--muted);
      line-height: 1.85;
      margin-top: 5px
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 12px
    }

    .tags span {
      font-size: 11px;
      font-weight: 700;
      color: var(--plum-2);
      background: rgba(var(--lilac-rgb), .24);
      padding: 5px 10px;
      border-radius: 999px
    }

    .tags span.hit {
      background: rgba(var(--rose-rgb), .24);
      color: #8B4E5C
    }

    .salon .ft {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 16px;
      padding-top: 14px;
      border-top: 1px solid var(--line)
    }

    .salon .from {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600
    }

    .salon .from b {
      display: block;
      font-size: 15px;
      color: var(--plum);
      font-weight: 900;
      margin-top: 2px
    }

    .empty {
      text-align: center;
      padding: 56px 20px;
      background: var(--card);
      border: 1px dashed rgba(var(--plum-rgb), .2);
      border-radius: var(--r-lg)
    }

    .empty h4 {
      font-size: 17px;
      font-weight: 800;
      color: var(--plum);
      margin-bottom: 8px
    }

    .empty p {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.9;
      margin-bottom: 16px
    }

    .steps3 {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: clamp(14px, 2vw, 22px)
    }

    .st {
      background: var(--card);
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: var(--r-lg);
      padding: 26px 22px;
      box-shadow: var(--shadow-s)
    }

    .st .n {
      width: 40px;
      height: 40px;
      border-radius: 999px 999px 8px 8px;
      background: linear-gradient(160deg, var(--plum), var(--plum-2));
      color: #fff;
      display: grid;
      place-items: center;
      font-weight: 800;
      font-size: 14px;
      margin-bottom: 14px;
      box-shadow: 0 6px 16px rgba(var(--plum-rgb), .25)
    }

    .st h5 {
      font-size: 15.5px;
      font-weight: 800;
      color: var(--plum);
      margin-bottom: 7px
    }

    .st p {
      font-size: 13px;
      line-height: 1.95;
      color: var(--muted)
    }

    .reviews {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: clamp(14px, 2vw, 22px)
    }

    .rev {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      padding: 26px 24px;
      box-shadow: var(--shadow-s);
      position: relative
    }

    .rev .quo {
      font-family: 'Parisienne', cursive;
      font-size: 50px;
      color: rgba(var(--rose-rgb), .35);
      line-height: .6;
      margin-bottom: 12px
    }

    .rev p {
      font-size: 13.6px;
      line-height: 2.05;
      color: var(--ink);
      opacity: .86
    }

    .rev .who {
      display: flex;
      align-items: center;
      gap: 11px;
      margin-top: 18px;
      padding-top: 16px;
      border-top: 1px solid var(--line)
    }

    .rev .who .a {
      width: 38px;
      height: 38px;
      border-radius: 999px 999px 6px 6px;
      background: rgba(var(--blush-rgb), .6);
      display: grid;
      place-items: center;
      font-weight: 800;
      color: var(--plum);
      font-size: 13px
    }

    .rev .who b {
      font-size: 13.5px;
      font-weight: 800;
      color: var(--plum);
      display: block
    }

    .rev .who small {
      font-size: 11.5px;
      color: var(--faint)
    }

    .rev .stars {
      position: absolute;
      top: 24px;
      inset-inline-start: 24px;
      color: var(--gold);
      font-size: 12px;
      letter-spacing: 1px
    }
.page-top {
      padding-top: 104px
    }

    .back {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 13px;
      font-weight: 700;
      color: var(--plum-2);
      background: #fff;
      border: 1px solid var(--line);
      padding: 9px 16px;
      border-radius: 999px;
      box-shadow: var(--shadow-s);
      margin-bottom: 18px
    }

    .back:hover {
      background: rgba(var(--blush-rgb), .3)
    }

    .s-hero {
      position: relative;
      border-radius: var(--r-xl);
      overflow: hidden;
      min-height: 320px;
      display: flex;
      align-items: flex-end;
      box-shadow: var(--shadow-m)
    }

    .s-hero .bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center
    }

    .s-hero .vl {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(var(--plum-rgb), .88), rgba(var(--plum-rgb), .28) 62%, rgba(var(--plum-rgb), .35))
    }

    .s-hero .in {
      position: relative;
      z-index: 2;
      padding: clamp(24px, 4vw, 38px);
      width: 100%;
      color: #fff
    }

    .s-hero h2 {
      font-size: clamp(24px, 4vw, 38px);
      font-weight: 900;
      line-height: 1.4;
      text-shadow: 0 2px 20px rgba(0, 0, 0, .35)
    }

    .s-hero .sub {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 14px
    }

    .s-hero .sub span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12.5px;
      font-weight: 600;
      background: rgba(255, 255, 255, .16);
      border: 1px solid rgba(255, 255, 255, .28);
      backdrop-filter: blur(10px);
      padding: 8px 14px;
      border-radius: 999px
    }

    .s-hero .sub b {
      color: var(--gold)
    }

    .svc-nav {
      display: flex;
      gap: 8px;
      overflow-x: auto;
      padding: 20px 0 8px;
      scrollbar-width: none
    }

    .svc-nav::-webkit-scrollbar {
      display: none
    }

    .svc-list {
      display: flex;
      flex-direction: column;
      gap: 26px;
      margin-top: 14px
    }

    .svc-group h4 {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 17px;
      font-weight: 900;
      color: var(--plum);
      margin-bottom: 12px
    }

    .svc-group h4 .b {
      width: 34px;
      height: 34px;
      border-radius: 999px 999px 7px 7px;
      background: rgba(var(--lilac-rgb), .3);
      display: grid;
      place-items: center
    }

    .row {
      display: flex;
      align-items: center;
      gap: 14px;
      justify-content: space-between;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 16px 18px;
      box-shadow: var(--shadow-s);
      transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease)
    }

    .row+.row {
      margin-top: 9px
    }

    .row:hover {
      transform: translateX(-4px);
      border-color: rgba(var(--rose-rgb), .4);
      box-shadow: var(--shadow-m)
    }

    .row .nm {
      font-size: 14.5px;
      font-weight: 800;
      color: var(--plum)
    }

    .row .du {
      font-size: 12px;
      color: var(--muted);
      font-weight: 600;
      margin-top: 4px;
      display: flex;
      align-items: center;
      gap: 5px
    }

    .row .pr {
      font-size: 15px;
      font-weight: 900;
      color: var(--plum);
      white-space: nowrap
    }

    .row .pr small {
      font-size: 10.5px;
      font-weight: 600;
      color: var(--faint);
      margin-inline-start: 3px
    }

    .row .rt {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-shrink: 0
    }

    .who-count {
      font-size: 11.5px;
      color: var(--muted);
      font-weight: 600;
      margin-top: 5px
    }

    .steps {
      display: flex;
      align-items: center;
      gap: 6px;
      margin: 0 auto 26px;
      max-width: 520px
    }

    .steps .s {
      flex: 1;
      text-align: center
    }

    .steps .d {
      width: 30px;
      height: 30px;
      margin: 0 auto 6px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: #fff;
      border: 1px solid var(--line);
      color: var(--faint);
      font-size: 12.5px;
      font-weight: 800;
      transition: all .3s var(--ease)
    }

    .steps .s.on .d {
      background: var(--plum);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 6px 16px rgba(var(--plum-rgb), .28)
    }

    .steps .s.done .d {
      background: rgba(var(--rose-rgb), .28);
      color: #8B4E5C;
      border-color: transparent
    }

    .steps .s span {
      font-size: 11.5px;
      font-weight: 700;
      color: var(--faint)
    }

    .steps .s.on span {
      color: var(--plum)
    }

    .bar {
      height: 2px;
      background: var(--line);
      flex: 0 0 26px;
      margin-bottom: 22px;
      border-radius: 2px
    }

    .panel {
      background: rgba(255, 255, 255, .86);
      backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, .8);
      border-radius: var(--r-lg);
      padding: clamp(20px, 3.4vw, 32px);
      box-shadow: var(--shadow-m);
      max-width: 820px;
      margin-inline: auto
    }

    .panel h3 {
      font-size: 19px;
      font-weight: 900;
      color: var(--plum);
      margin-bottom: 6px
    }

    .panel .hint {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.9;
      margin-bottom: 20px
    }

    .picks {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
      gap: 11px
    }

    .pick {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px;
      border-radius: var(--r-md);
      background: #fff;
      border: 1.6px solid var(--line);
      text-align: start;
      transition: all .28s var(--ease)
    }

    .pick:hover {
      border-color: rgba(var(--rose-rgb), .5);
      transform: translateY(-2px)
    }

    .pick.on {
      border-color: var(--plum);
      background: rgba(var(--lilac-rgb), .14);
      box-shadow: 0 8px 22px rgba(var(--plum-rgb), .14)
    }

    .pick .av {
      width: 44px;
      height: 50px;
      flex-shrink: 0;
      border-radius: 999px 999px 9px 9px;
      display: grid;
      place-items: center;
      color: #fff;
      font-weight: 900;
      font-size: 16px;
      background: linear-gradient(165deg, var(--lilac), var(--plum-2));
      box-shadow: 0 0 0 4px #fff
    }

    .pick:nth-child(2n) .av {
      background: linear-gradient(165deg, var(--blush), var(--rose))
    }

    .pick:nth-child(3n) .av {
      background: linear-gradient(165deg, var(--gold), var(--rose))
    }

    .pick b {
      display: block;
      font-size: 14px;
      font-weight: 800;
      color: var(--plum)
    }

    .pick small {
      display: block;
      font-size: 11.5px;
      color: var(--muted);
      margin-top: 3px
    }

    .pick .mt {
      font-size: 11px;
      color: var(--plum-2);
      font-weight: 700;
      margin-top: 5px
    }

    .days {
      display: flex;
      gap: 9px;
      overflow-x: auto;
      padding-bottom: 10px;
      scrollbar-width: none
    }

    .days::-webkit-scrollbar {
      display: none
    }

    .day {
      flex-shrink: 0;
      min-width: 78px;
      padding: 12px 10px;
      border-radius: var(--r-md);
      background: #fff;
      border: 1.6px solid var(--line);
      text-align: center;
      transition: all .28s var(--ease)
    }

    .day:hover {
      border-color: rgba(var(--rose-rgb), .5)
    }

    .day.on {
      background: var(--plum);
      border-color: transparent;
      color: #fff;
      box-shadow: 0 8px 20px rgba(var(--plum-rgb), .25)
    }

    .day .w {
      font-size: 11.5px;
      font-weight: 700;
      opacity: .75
    }

    .day .n {
      font-size: 15px;
      font-weight: 900;
      margin-top: 3px
    }

    .slots {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
      gap: 9px;
      margin-top: 18px
    }

    .slot {
      padding: 12px 6px;
      border-radius: var(--r-sm);
      background: #fff;
      border: 1.6px solid var(--line);
      font-size: 13.5px;
      font-weight: 800;
      color: var(--plum);
      transition: all .26s var(--ease)
    }

    .slot:hover:not(:disabled) {
      border-color: rgba(var(--rose-rgb), .55);
      transform: translateY(-2px)
    }

    .slot.on {
      background: linear-gradient(135deg, var(--rose), var(--blush));
      border-color: transparent;
      color: #572630;
      box-shadow: 0 8px 20px rgba(var(--rose-rgb), .35)
    }

    .slot:disabled {
      opacity: .34;
      text-decoration: line-through;
      cursor: not-allowed
    }

    .note {
      display: flex;
      gap: 9px;
      align-items: flex-start;
      font-size: 12.3px;
      color: var(--muted);
      line-height: 1.85;
      background: rgba(var(--lilac-rgb), .16);
      border: 1px solid rgba(var(--lilac-rgb), .34);
      padding: 12px 14px;
      border-radius: var(--r-sm);
      margin-top: 18px
    }

    .sum {
      background: rgba(var(--blush-rgb), .2);
      border: 1px solid rgba(var(--rose-rgb), .3);
      border-radius: var(--r-md);
      padding: 18px 20px
    }

    .sum .ln {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: 13.5px;
      padding: 9px 0
    }

    .sum .ln+.ln {
      border-top: 1px dashed rgba(var(--plum-rgb), .14)
    }

    .sum .ln span {
      color: var(--muted);
      font-weight: 600
    }

    .sum .ln b {
      color: var(--plum);
      font-weight: 800
    }

    .sum .tot {
      margin-top: 8px;
      padding-top: 14px;
      border-top: 1.5px solid rgba(var(--rose-rgb), .35);
      display: flex;
      justify-content: space-between;
      align-items: center
    }

    .sum .tot b {
      font-size: 20px;
      font-weight: 900;
      color: var(--plum)
    }

    .form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-top: 18px
    }

    .inp {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .inp label {
      font-size: 12px;
      font-weight: 700;
      color: var(--plum-2)
    }

    .inp input {
      padding: 13px 15px;
      border-radius: var(--r-sm);
      border: 1.6px solid var(--line);
      background: #fff;
      font-size: 14px;
      font-weight: 600;
      color: var(--plum);
      transition: border-color .25s var(--ease)
    }

    .inp input:focus {
      outline: none;
      border-color: var(--rose)
    }

    .actions {
      display: flex;
      gap: 10px;
      margin-top: 22px;
      flex-wrap: wrap
    }

    .actions .btn {
      flex: 1;
      min-width: 150px
    }

    .done {
      max-width: 600px;
      margin-inline: auto;
      text-align: center;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-xl);
      padding: clamp(28px, 5vw, 48px);
      box-shadow: var(--shadow-l);
      position: relative;
      overflow: hidden
    }

    .done::before {
      content: "";
      position: absolute;
      top: -120px;
      inset-inline-end: -80px;
      width: 280px;
      height: 280px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(var(--blush-rgb), .6), transparent 70%)
    }

    .done>* {
      position: relative;
      z-index: 1
    }

    .done .tick {
      width: 76px;
      height: 84px;
      margin: 0 auto 18px;
      border-radius: 999px 999px 14px 14px;
      display: grid;
      place-items: center;
      background: linear-gradient(160deg, var(--rose), var(--blush));
      color: #fff;
      box-shadow: 0 0 0 8px rgba(var(--blush-rgb), .35), 0 14px 30px rgba(var(--rose-rgb), .35)
    }

    .done .script {
      font-size: 30px;
      display: block;
      margin-bottom: 6px
    }

    .done h3 {
      font-size: clamp(21px, 3.4vw, 28px);
      font-weight: 900;
      color: var(--plum);
      margin-bottom: 10px
    }

    .done>p {
      font-size: 13.5px;
      color: var(--muted);
      line-height: 2;
      margin-bottom: 24px
    }

    .tkt {
      text-align: start;
      background: rgba(var(--lilac-rgb), .12);
      border: 1px dashed rgba(var(--plum-rgb), .25);
      border-radius: var(--r-md);
      padding: 18px 20px;
      margin-bottom: 22px
    }

    .cta {
      position: relative;
      overflow: hidden;
      border-radius: var(--r-xl);
      padding: clamp(40px, 6.5vw, 70px) clamp(24px, 5vw, 60px);
      text-align: center;
      color: #fff;
      background: linear-gradient(140deg, var(--plum) 0%, var(--plum-2) 48%, #7A6499 100%);
      box-shadow: var(--shadow-l)
    }

    .cta::before,
    .cta::after {
      content: "";
      position: absolute;
      border-radius: 50%;
      pointer-events: none
    }

    .cta::before {
      width: 340px;
      height: 340px;
      background: radial-gradient(circle, rgba(var(--rose-rgb), .42), transparent 68%);
      top: -140px;
      inset-inline-end: -90px
    }

    .cta::after {
      width: 300px;
      height: 300px;
      background: radial-gradient(circle, rgba(var(--lilac-rgb), .42), transparent 68%);
      bottom: -130px;
      inset-inline-start: -80px
    }

    .cta>* {
      position: relative;
      z-index: 1
    }

    .cta .script {
      font-size: 32px;
      display: block;
      margin-bottom: 8px
    }

    .cta h3 {
      font-size: clamp(22px, 3.4vw, 34px);
      font-weight: 900;
      line-height: 1.5;
      margin-bottom: 12px
    }

    .cta p {
      font-size: 14.5px;
      line-height: 2;
      color: rgba(255, 255, 255, .82);
      max-width: 44ch;
      margin: 0 auto 24px
    }


.allergy { margin-top: 18px; padding: 18px; border-radius: var(--r-md); background: linear-gradient(160deg, rgba(var(--blush-rgb), .22), rgba(var(--lilac-rgb), .14)); border: 1px solid var(--line); display: grid; gap: 12px }
.allergy-head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.allergy-head b { font-size: 14px; color: var(--plum) }
.allergy-count { min-width: 24px; padding: 2px 8px; border-radius: 999px; background: var(--plum); color: #fff; font-size: 12px; font-weight: 700; text-align: center }
.allergy-hint { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--muted) }
.allergy input { width: 100%; padding: 12px 14px; border-radius: var(--r-sm); border: 1.6px solid var(--line); background: #fff; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--plum) }
.allergy input:focus { outline: none; border-color: var(--rose) }
.allergy-list { max-height: 230px; overflow: auto; display: grid; gap: 12px; padding: 12px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .72); border: 1px solid var(--line) }
.allergy-group { display: block; margin-bottom: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .2px; color: var(--plum-2) }
.allergy-chips { display: flex; flex-wrap: wrap; gap: 7px }
.allergy-chip { display: inline-flex; align-items: center; gap: 6px; border: 1.4px solid var(--line); background: #fff; color: var(--plum); border-radius: 999px; padding: 6px 13px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all .2s var(--ease) }
.allergy-chip:hover { border-color: var(--rose); transform: translateY(-1px) }
.allergy-chip.on { background: var(--plum); border-color: var(--plum); color: #fff; box-shadow: var(--shadow-s) }
.allergy-chip.on:hover { background: var(--plum-2) }
.allergy-add { display: grid; grid-template-columns: 1fr auto; gap: 8px }
.allergy-empty { font-size: 12.5px; color: var(--muted); text-align: center; padding: 6px 0 }
.allergy-note { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: 10px; background: #fff3cd; color: #7a5200; font-size: 12px; font-weight: 700 }
@media (max-width: 480px) { .allergy { padding: 14px } .allergy-add { grid-template-columns: 1fr } }
footer {
      margin-top: clamp(46px, 7vw, 80px);
      padding: clamp(38px, 6vw, 58px) 0 22px;
      border-top: 1px solid var(--line);
      background: rgba(255, 255, 255, .5)
    }

    .foot {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
      gap: clamp(22px, 4vw, 42px)
    }

    .foot h6 {
      font-size: 13px;
      font-weight: 800;
      color: var(--plum);
      margin-bottom: 14px
    }

    .foot ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 9px
    }

    .foot li a,
    .foot .txt {
      font-size: 13px;
      color: var(--muted);
      line-height: 1.9;
      transition: color .25s var(--ease)
    }

    .foot li a:hover {
      color: var(--rose)
    }

    .foot .about p {
      font-size: 13px;
      line-height: 2;
      color: var(--muted);
      margin: 12px 0 16px;
      max-width: 34ch
    }

    .socials {
      display: flex;
      gap: 9px
    }

    .socials a {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      background: rgba(var(--lilac-rgb), .25);
      color: var(--plum);
      transition: all .25s var(--ease)
    }

    .socials a:hover {
      background: var(--rose);
      color: #fff;
      transform: translateY(-2px)
    }

    .copy {
      margin-top: 34px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
      text-align: center;
      font-size: 12px;
      color: var(--faint)
    }
.auth-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(var(--plum-rgb), .45);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      z-index: 200
    }

    .auth-modal {
      width: min(420px, 100%);
      background: #fff;
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-l);
      padding: clamp(22px, 4vw, 32px);
      position: relative;
      animation: auth-in .28s var(--ease)
    }

    @keyframes auth-in {
      from {
        opacity: 0;
        transform: translateY(10px) scale(.98)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .auth-close {
      position: absolute;
      inset-inline-end: 16px;
      top: 16px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      transition: background .2s var(--ease), color .2s var(--ease)
    }

    .auth-close:hover {
      background: rgba(var(--plum-rgb), .08);
      color: var(--plum)
    }

    .auth-head h3 {
      font-size: 21px;
      font-weight: 800;
      color: var(--plum)
    }

    .auth-head p {
      margin-top: 6px;
      font-size: 13px;
      color: var(--muted)
    }

    .auth-form {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 20px
    }

    .auth-field {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .auth-field label {
      font-size: 12px;
      font-weight: 700;
      color: var(--plum-2)
    }

    .auth-field input,
    .auth-field select,
    .auth-field textarea {
      padding: 13px 15px;
      border-radius: var(--r-sm);
      border: 1.6px solid var(--line);
      background: #fff;
      font-size: 14px;
      font-weight: 600;
      color: var(--plum);
      transition: border-color .25s var(--ease)
    }

    .auth-checklist {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px
    }

    .auth-check {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border: 1.6px solid var(--line);
      border-radius: var(--r-sm);
      font-size: 13px;
      font-weight: 600;
      color: var(--plum);
      cursor: pointer;
      transition: border-color .2s var(--ease), background .2s var(--ease)
    }

    .auth-check:has(input:checked) {
      border-color: var(--rose);
      background: rgba(var(--rose-rgb), .1)
    }

    .auth-check input {
      accent-color: var(--rose)
    }

    .auth-note {
      font-size: 12px;
      color: var(--muted);
      line-height: 1.7;
      background: rgba(var(--gold-rgb), .12);
      border-radius: var(--r-sm);
      padding: 10px 12px
    }

    .auth-field input:focus,
    .auth-field select:focus,
    .auth-field textarea:focus {
      outline: none;
      border-color: var(--rose)
    }

    .auth-submit {
      margin-top: 4px;
      width: 100%;
      justify-content: center
    }

    .auth-chip {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 8px 8px 16px;
      border-radius: 999px;
      background: rgba(var(--rose-rgb), .14);
      color: var(--plum);
      font-size: 13px;
      font-weight: 700
    }

    .auth-chip b {
      font-weight: 800
    }

    .auth-chip-main {
      display: flex;
      align-items: center;
      gap: 8px;
      border-radius: 999px;
      transition: opacity .2s var(--ease)
    }

    .auth-chip-main:hover {
      opacity: .8
    }

    .auth-chip button {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .7);
      transition: color .2s var(--ease)
    }

    .auth-chip button:hover {
      color: var(--rose)
    }

    .auth-avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--plum);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800
    }

    .auth-role {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      padding: 4px;
      background: rgba(var(--plum-rgb), .06);
      border-radius: var(--r-sm)
    }

    .auth-role button {
      padding: 10px;
      border-radius: calc(var(--r-sm) - 4px);
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
      transition: background .2s var(--ease), color .2s var(--ease)
    }

    .auth-role button.on {
      background: #fff;
      color: var(--plum);
      box-shadow: var(--shadow-s)
    }

    .auth-otp-input {
      text-align: center;
      letter-spacing: 10px;
      font-size: 20px !important;
      font-weight: 800 !important
    }

    @media (max-width:520px) {
      .auth-modal {
        padding: 22px 18px
      }
    }

    .auth-switch {
      align-self: center;
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
      padding: 4px 8px;
      transition: color .2s var(--ease)
    }

    .auth-switch:hover {
      color: var(--rose)
    }

/* Test-mode notice: the one-time code is shown on the page while no real SMS/email exists. */
.test-code {
  border: 1.5px dashed var(--gold);
  background: rgba(var(--gold-rgb), .12);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: start
}

.test-code b {
  font-size: 13px;
  color: #7a5d1c
}

.test-code p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--muted)
}

.test-code-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px
}

.test-code-row code {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--plum)
}

.auth-field textarea { font-family: inherit; line-height: 1.8; resize: vertical }
.city-modal {
  width: min(520px, 100%);
  max-height: min(680px, 88vh);
  display: flex;
  flex-direction: column
}

.city-search {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: var(--r-sm);
  border: 1.6px solid var(--line);
  font-size: 14px;
  font-weight: 600;
  color: var(--plum);
  width: 100%
}

.city-search:focus {
  outline: none;
  border-color: var(--rose)
}

.city-body {
  margin-top: 14px;
  overflow-y: auto;
  min-height: 0;
  flex: 1
}

.city-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin: 14px 0 8px
}

.city-title:first-child {
  margin-top: 0
}

.city-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.city-list {
  list-style: none;
  margin: 0;
  padding: 0
}

.city-list button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 10px;
  border-bottom: 1px solid var(--line);
  text-align: start;
  font-size: 14px;
  color: var(--plum);
  transition: background .2s var(--ease)
}

.city-list button:hover,
.city-list button.on {
  background: rgba(var(--rose-rgb), .1)
}

.city-list small {
  font-size: 12px;
  color: var(--muted)
}

.city-back {
  font-size: 13px;
  font-weight: 700;
  color: var(--rose);
  padding: 4px 0
}

.city-state {
  padding: 24px 0;
  text-align: center;
  font-size: 13px;
  color: var(--muted)
}

.nav-city {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  max-width: 150px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .16);
  transition: background .25s var(--ease)
}

.nav-city:hover {
  background: rgba(255, 255, 255, .24)
}

.nav-city span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

@media (max-width:520px) {
  .nav-city {
    max-width: 96px;
    padding: 0 10px
  }
}
/* Styles for the release features (reviews, favorites, filters, owner tools).
   The original design's CSS files stay untouched. */

.field input[type="search"],
.field input[type="text"] {
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--plum);
  padding: 2px 0;
  width: 100%
}

.field input:focus,
.field select:focus {
  outline: none
}

.day:disabled {
  opacity: .38;
  cursor: not-allowed
}

.demo-badge {
  position: absolute;
  bottom: 12px;
  inset-inline-start: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  color: var(--plum);
  font-size: 11px;
  font-weight: 800
}

.fav-btn {
  position: absolute;
  top: 12px;
  inset-inline-start: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .92);
  color: var(--plum);
  z-index: 2;
  transition: transform .2s var(--ease), color .2s var(--ease)
}

.fav-btn:hover {
  transform: scale(1.08)
}

.fav-btn.on {
  color: #d64b6a
}

.list-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted)
}

.list-tools select,
.cats select,
.dash-main select {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1.6px solid var(--line);
  background: #fff;
  color: var(--plum);
  font-size: 13px;
  font-weight: 700
}

.s-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px
}

.gallery-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  margin: 18px 0 0;
  padding-bottom: 6px;
  scroll-snap-type: x proximity
}

.gallery-strip img {
  height: 150px;
  width: auto;
  border-radius: var(--r-md);
  flex-shrink: 0;
  scroll-snap-align: start;
  object-fit: cover
}

.rating-stars {
  display: inline-flex;
  gap: 2px;
  color: rgba(var(--plum-rgb), .22)
}

.rating-stars .on {
  color: var(--gold)
}

.pick-stars button {
  color: rgba(var(--plum-rgb), .22);
  padding: 2px
}

.pick-stars button.on {
  color: var(--gold)
}

.rev-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md)
}

.rev-form textarea {
  padding: 13px 15px;
  border-radius: var(--r-sm);
  border: 1.6px solid var(--line);
  font: inherit;
  font-size: 14px;
  resize: vertical
}

.rev-form textarea:focus {
  outline: none;
  border-color: var(--rose)
}

.rev-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0;
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: rgba(var(--gold-rgb), .14);
  color: #7a5d1c;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.8
}

.rev-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.rev-item {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md)
}

.rev-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap
}

.rev-head time {
  margin-inline-start: auto;
  font-size: 12px;
  color: var(--muted)
}

.rev-item p {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.9;
  color: var(--plum-2)
}

.modal-wide {
  width: min(640px, 100%);
  max-height: 90vh;
  overflow-y: auto
}

.auth-fine {
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.8;
  text-align: center
}

.auth-fine a {
  color: var(--rose);
  text-decoration: underline
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 120px;
  padding: 8px 0
}

.bar-col {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: flex-end
}

.bar-fill {
  width: 100%;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, var(--plum), var(--rose))
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted)
}

.checklist li span {
  display: inline-block;
  width: 22px
}

.checklist li.ok {
  color: #2f7d4f
}

.agenda-day {
  margin: 20px 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--plum)
}

.weekdays,
.timeoff {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px
}

.timeoff-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%
}

.timeoff-form input {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  border: 1.6px solid var(--line);
  font-size: 13px;
  color: var(--plum)
}

.cat-chip button {
  margin-inline-start: 6px;
  color: var(--muted)
}

.rules h3 {
  margin-bottom: 18px
}

.rules h4 {
  margin: 20px 0 6px;
  font-size: 15px;
  color: var(--plum)
}

.rules p {
  font-size: 14px;
  line-height: 2;
  color: var(--plum-2)
}

.dash-main .cats {
  margin-bottom: 18px
}

.dash-form .auth-field select,
.dash-form .auth-field input {
  padding: 13px 15px;
  border-radius: var(--r-sm);
  border: 1.6px solid var(--line);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--plum)
}

.dash-form .auth-field .auth-checklist {
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))
}

@media (max-width:520px) {
  .auth-chip-main b {
    display: none
  }

  .rev-head time {
    margin-inline-start: 0
  }

  .gallery-strip img {
    height: 120px
  }
}
.dash {
      display: flex;
      gap: 24px;
      align-items: flex-start;
      flex-wrap: wrap
    }

    .dash-side {
      width: 240px;
      flex-shrink: 0;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-m);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 18px;
      position: sticky;
      top: 96px
    }

    .dash-brand {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .dash-brand div {
      display: flex;
      flex-direction: column;
      min-width: 0
    }

    .dash-brand b {
      font-size: 14px;
      color: var(--plum);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .dash-brand small {
      font-size: 11px;
      color: var(--muted)
    }

    .dash-nav {
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .cust-info {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 12px;
      color: var(--muted);
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 14px 0
    }

    .dash-nav button {
      text-align: start;
      padding: 10px 12px;
      border-radius: var(--r-sm);
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
      transition: background .2s var(--ease), color .2s var(--ease)
    }

    .dash-nav button:hover {
      background: rgba(var(--plum-rgb), .06)
    }

    .dash-nav button.on {
      background: rgba(var(--rose-rgb), .16);
      color: var(--plum)
    }

    .dash-logout {
      border-top: 1px solid var(--line);
      padding-top: 14px;
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
      text-align: start
    }

    .dash-logout:hover {
      color: var(--rose)
    }

    .dash-main {
      flex: 1;
      min-width: 280px;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-m);
      padding: clamp(20px, 4vw, 32px)
    }

    .dash-main h3 {
      font-size: 19px;
      font-weight: 800;
      color: var(--plum);
      margin-bottom: 18px
    }

    .dash-banner {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(var(--gold-rgb), .16);
      color: #8a6a1e;
      border-radius: var(--r-md);
      padding: 12px 16px;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 18px
    }

    .dash-banner.verified {
      background: rgba(90, 180, 120, .16);
      color: #2f7d4f
    }

    .dash-loading {
      color: var(--muted);
      font-size: 13px
    }

    .dash-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 14px
    }

    .card-stat {
      background: rgba(var(--rose-rgb), .1);
      border-radius: var(--r-md);
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .card-stat span {
      font-size: 12px;
      color: var(--muted);
      font-weight: 700
    }

    .card-stat b {
      font-size: 20px;
      color: var(--plum);
      font-weight: 900
    }

    .dash-table {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 20px
    }

    .dash-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      flex-wrap: wrap
    }

    .dash-row > div:first-child {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 140px
    }

    .dash-row b {
      font-size: 13px;
      color: var(--plum);
      font-weight: 800
    }

    .dash-row small {
      font-size: 12px;
      color: var(--muted)
    }

    .dash-row-actions {
      display: flex;
      gap: 8px
    }

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

    .cat-chip {
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(var(--plum-rgb), .08);
      color: var(--plum-2);
      white-space: nowrap
    }

    .badge {
      font-size: 11px;
      font-weight: 700;
      padding: 5px 12px;
      border-radius: 999px;
      white-space: nowrap
    }

    .badge.confirmed {
      background: rgba(90, 180, 120, .16);
      color: #2f7d4f
    }

    .badge.pending {
      background: rgba(var(--gold-rgb), .2);
      color: #8a6a1e
    }

    .badge.cancelled {
      background: rgba(200, 80, 90, .14);
      color: #a5333f
    }

    .dash-form {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 12px;
      align-items: end
    }

    .hours-row {
      display: grid;
      grid-template-columns: 90px 1fr auto auto;
      align-items: center
    }

    .switch {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted)
    }

    .switch input {
      width: 34px;
      height: 20px;
      accent-color: var(--rose);
      cursor: pointer
    }

    .hours-row input[type="time"] {
      padding: 8px 10px;
      border-radius: var(--r-sm);
      border: 1.6px solid var(--line);
      font-size: 13px;
      color: var(--plum)
    }

    .hours-row input[type="time"]:disabled {
      opacity: .4
    }

    .dash-service-card {
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      overflow: hidden
    }

    .dash-service-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      flex-wrap: wrap
    }

    .dash-service-main > div:first-child {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 140px
    }

    .dash-service-main b {
      font-size: 13px;
      color: var(--plum);
      font-weight: 800
    }

    .dash-service-main small {
      font-size: 12px;
      color: var(--muted)
    }

    .dash-photos {
      padding: 0 16px 14px;
      border-top: 1px dashed var(--line);
      margin: 0 16px;
      padding-top: 12px
    }

    .dash-photos-label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      margin-bottom: 8px
    }

    .dash-gallery {
      margin-top: 22px
    }

    .dash-gallery > label {
      display: block;
      font-size: 12px;
      font-weight: 700;
      color: var(--plum-2);
      margin-bottom: 10px
    }

    .photo-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 10px
    }

    .photo-thumb {
      position: relative;
      width: 84px;
      height: 84px;
      border-radius: var(--r-sm);
      overflow: hidden;
      border: 1px solid var(--line)
    }

    .photo-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .photo-thumb button {
      position: absolute;
      top: 4px;
      inset-inline-end: 4px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(0, 0, 0, .55);
      color: #fff;
      font-size: 13px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .photo-add {
      width: 84px;
      height: 84px;
      border: 1.6px dashed var(--line);
      border-radius: var(--r-sm);
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 4px;
      transition: border-color .2s var(--ease), color .2s var(--ease)
    }

    .photo-add:hover {
      border-color: var(--rose);
      color: var(--rose)
    }

    .photo-grid.sm .photo-thumb,
    .photo-thumb.sm {
      width: 56px;
      height: 56px
    }

    .photo-add.sm {
      width: 56px;
      height: 56px;
      font-size: 18px
    }

    @media (max-width:900px) {
      .dash-side {
        width: 100%;
        position: static;
        flex-direction: row;
        flex-wrap: wrap
      }

      .dash-nav {
        flex-direction: row;
        flex-wrap: wrap
      }

      .hours-row {
        grid-template-columns: 1fr;
        justify-items: start
      }
    }

    /* Admin Portal Extended Styles */
    .admin-stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }
    .admin-stat-card {
      background: linear-gradient(135deg, rgba(var(--rose-rgb), .08), rgba(var(--plum-rgb), .05));
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      transition: transform .2s ease, box-shadow .2s ease;
    }
    .admin-stat-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-sm);
    }
    .admin-stat-label {
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .admin-stat-val {
      font-size: 22px;
      font-weight: 900;
      color: var(--plum);
    }
    .admin-stat-sub {
      font-size: 11px;
      color: var(--muted);
    }
    .admin-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 18px;
      background: rgba(var(--plum-rgb), .03);
      border: 1px solid var(--line);
      padding: 12px 14px;
      border-radius: var(--r-md);
    }
    .admin-search-box {
      position: relative;
      flex: 1;
      min-width: 220px;
    }
    .admin-search-box input {
      width: 100%;
      padding: 9px 36px 9px 12px;
      border-radius: var(--r-sm);
      border: 1.5px solid var(--line);
      font-size: 13px;
      font-weight: 600;
      color: var(--plum);
      background: #fff;
    }
    .admin-search-box input:focus {
      outline: none;
      border-color: var(--rose);
    }
    .admin-search-box .search-ic {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      pointer-events: none;
    }
    .admin-filters {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }
    .admin-select {
      padding: 8px 12px;
      border-radius: var(--r-sm);
      border: 1.5px solid var(--line);
      font-size: 12px;
      font-weight: 700;
      color: var(--plum);
      background: #fff;
      cursor: pointer;
    }
    .admin-select:focus {
      outline: none;
      border-color: var(--rose);
    }
    .admin-table-container {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: #fff;
      margin-bottom: 20px;
    }
    .admin-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      text-align: right;
    }
    .admin-table th {
      background: rgba(var(--plum-rgb), .04);
      padding: 12px 14px;
      font-weight: 800;
      color: var(--plum);
      border-bottom: 1.5px solid var(--line);
      white-space: nowrap;
    }
    .admin-table td {
      padding: 12px 14px;
      border-bottom: 1px solid var(--line);
      color: var(--plum-2);
      vertical-align: middle;
    }
    .admin-table tbody tr:hover {
      background: rgba(var(--rose-rgb), .04);
    }
    .admin-table tbody tr:last-child td {
      border-bottom: none;
    }
    .admin-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 700;
      padding: 3px 9px;
      border-radius: 999px;
      white-space: nowrap;
    }
    .admin-badge.root {
      background: linear-gradient(135deg, #fce4ec, #f8bbd0);
      color: #880e4f;
      border: 1px solid #f48fb1;
    }
    .admin-badge.operator {
      background: #e0f2fe;
      color: #0369a1;
      border: 1px solid #bae6fd;
    }
    .admin-badge.owner {
      background: #f3e8ff;
      color: #6b21a8;
      border: 1px solid #e9d5ff;
    }
    .admin-badge.customer {
      background: #f1f5f9;
      color: #475569;
      border: 1px solid #e2e8f0;
    }
    .admin-badge.active {
      background: #ecfdf5;
      color: #047857;
      border: 1px solid #a7f3d0;
    }
    .admin-badge.inactive {
      background: #fef2f2;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }
    .admin-modal-wrap {
      width: min(680px, 96vw);
      max-height: 88vh;
      display: flex;
      flex-direction: column;
      background: #fff;
      border-radius: var(--r-lg);
      box-shadow: var(--shadow-l);
      position: relative;
      overflow: hidden;
    }
    .admin-modal-head {
      padding: 16px 20px;
      border-bottom: 1px solid var(--line);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(var(--plum-rgb), .02);
    }
    .admin-modal-head h4 {
      margin: 0;
      font-size: 16px;
      font-weight: 800;
      color: var(--plum);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .admin-modal-body {
      padding: 20px;
      overflow-y: auto;
      flex: 1;
      min-height: 0;
    }
    .admin-modal-foot {
      padding: 14px 20px;
      border-top: 1px solid var(--line);
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      background: rgba(var(--plum-rgb), .02);
    }
    .admin-form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 16px;
    }
    .admin-form-group {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .admin-form-group.full {
      grid-column: 1 / -1;
    }
    .admin-form-group label {
      font-size: 12px;
      font-weight: 700;
      color: var(--plum-2);
    }
    .admin-form-group input,
    .admin-form-group select,
    .admin-form-group textarea {
      padding: 10px 12px;
      border-radius: var(--r-sm);
      border: 1.5px solid var(--line);
      font-size: 13px;
      font-weight: 600;
      color: var(--plum);
      font-family: inherit;
    }
    .admin-form-group input:focus,
    .admin-form-group select:focus,
    .admin-form-group textarea:focus {
      outline: none;
      border-color: var(--rose);
    }
    .admin-perm-matrix {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 10px;
      background: rgba(var(--plum-rgb), .02);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 14px;
    }
    .admin-perm-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 8px 10px;
      border-radius: var(--r-sm);
      background: #fff;
      border: 1px solid var(--line);
      cursor: pointer;
      transition: border-color .15s ease;
    }
    .admin-perm-item:hover {
      border-color: var(--rose);
    }
    .admin-perm-item input[type="checkbox"] {
      width: 17px;
      height: 17px;
      accent-color: var(--rose);
      cursor: pointer;
      margin-top: 2px;
    }
    .admin-perm-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .admin-perm-info b {
      font-size: 12px;
      color: var(--plum);
    }
    .admin-perm-info small {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.4;
    }
    .admin-btn-icon {
      width: 32px;
      height: 32px;
      border-radius: var(--r-sm);
      border: 1px solid var(--line);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      color: var(--muted);
      cursor: pointer;
      transition: all .2s ease;
    }
    .admin-btn-icon:hover {
      background: rgba(var(--rose-rgb), .1);
      color: var(--rose);
      border-color: var(--rose);
    }
    .admin-btn-icon.danger:hover {
      background: rgba(220, 38, 38, .1);
      color: #dc2626;
      border-color: #dc2626;
    }
    .admin-btn-icon.success:hover {
      background: rgba(16, 185, 129, .1);
      color: #059669;
      border-color: #059669;
    }
    .admin-chat-wrap {
      display: flex;
      flex-direction: column;
      gap: 12px;
      max-height: 340px;
      overflow-y: auto;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      background: #f8fafc;
    }
    .admin-chat-msg {
      padding: 10px 14px;
      border-radius: var(--r-md);
      max-width: 80%;
      font-size: 13px;
      line-height: 1.6;
    }
    .admin-chat-msg.user {
      align-self: flex-start;
      background: #fff;
      border: 1px solid var(--line);
      color: var(--plum-2);
    }
    .admin-chat-msg.admin {
      align-self: flex-end;
      background: var(--plum);
      color: #fff;
    }
    .admin-chat-msg .time {
      display: block;
      font-size: 10px;
      opacity: .7;
      margin-top: 4px;
    }

/* Staff (specialist) panel */
.staff { display: flex; flex-direction: column; gap: 16px }
.staff-salons { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px }
.staff-salon { display: flex; gap: 12px; padding: 14px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s) }
.staff-salon > div { display: flex; flex-direction: column; gap: 4px; min-width: 0 }
.staff-salon b { color: var(--plum) }
.staff-salon small { font-size: 12px; color: var(--muted) }
.staff-avatar { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, var(--blush), var(--lilac)); color: var(--plum); font-weight: 900 }
.staff-days { margin-top: 2px }
.staff-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.staff-toolbar .cats { flex-wrap: wrap; overflow: visible }
.staff-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 12px }
.staff-time { display: flex; flex-direction: column; align-items: center; padding: 8px; border-radius: var(--r-sm); background: rgba(var(--plum-rgb), .06) }
.staff-time b { font-size: 16px; color: var(--plum) }
.staff-time small { font-size: 11px; color: var(--muted) }
.staff-main { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.staff-access { color: var(--muted) }
.staff-access.on { color: #2f7d4f; font-weight: 700 }
@media (max-width: 520px) { .staff-row { grid-template-columns: 60px 1fr } .staff-row .kyc-badge { grid-column: 2 } }

/* Service length and booking mode (owner) */
.duration-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.duration-chips button { padding: 5px 11px; border-radius: 999px; border: 1.4px solid var(--line); background: #fff; color: var(--plum); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer }
.duration-chips button.on { background: var(--plum); border-color: var(--plum); color: #fff }
.mode-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px }
.mode-option { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--r-sm); border: 1.6px solid var(--line); background: #fff; cursor: pointer }
.mode-option.on { border-color: var(--rose); background: rgba(var(--blush-rgb), .18) }
.mode-option input { margin-top: 4px; accent-color: var(--plum) }
.mode-option span { display: flex; flex-direction: column; gap: 2px }
.mode-option b { font-size: 13px; color: var(--plum) }
.mode-option small { font-size: 12px; color: var(--muted); line-height: 1.7 }
.mode-badge { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: 999px; background: rgba(var(--gold-rgb), .22); color: #7a5d1c; font-size: 11.5px; font-weight: 700 }
.service-edit { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line) }
.service-edit-actions { display: flex; gap: 8px; grid-column: 1 / -1 }

/* Consult requests */
.consult-list { display: grid; gap: 12px }
.consult-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s) }
.consult-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px }
.consult-head > div { display: flex; flex-direction: column; gap: 2px }
.consult-head b { color: var(--plum) }
.consult-head small { font-size: 12px; color: var(--muted) }
.consult-message { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: rgba(var(--plum-rgb), .05); line-height: 1.9; font-size: 13px; white-space: pre-wrap }
.consult-pref { font-size: 12px; color: var(--muted) }
.consult-contact { display: flex; gap: 8px; flex-wrap: wrap }
.consult-note { width: 100%; padding: 10px 12px; border-radius: var(--r-sm); border: 1.6px solid var(--line); font: inherit; font-size: 13px; resize: vertical }
.consult-note:focus { outline: none; border-color: var(--rose) }

/* Staff portal sign-in (admin.<domain>) */
.staff-login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px }
.staff-login-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 14px; padding: 32px 26px; border-radius: var(--r-xl); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-l); text-align: center }
.staff-login-card img { align-self: center; border-radius: 18px }
.staff-login-card h2 { margin: 0; color: var(--plum); font-size: 20px }
.staff-login-card p { margin: 0; color: var(--muted); font-size: 13px }
.staff-login-card .auth-field { text-align: start }
.staff-login-card small { color: var(--muted); font-size: 12px; line-height: 1.9 }
.staff-login-card a { color: var(--plum-2); font-weight: 700 }

/* Admin ticket desk */
.ticket-modal { max-width: 760px }
.ticket-detail { display: flex; flex-direction: column; gap: 14px }
.ticket-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px }
.ticket-meta label { display: flex; flex-direction: column; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--muted) }
.ticket-requester { display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--r-sm); background: rgba(var(--plum-rgb), .05) }
.ticket-requester > div { display: flex; flex-direction: column; gap: 2px }
.ticket-requester b { color: var(--plum) }
.ticket-requester small { font-size: 12px; color: var(--muted) }
.ticket-requester a { color: var(--plum-2) }
.ticket-requester summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--plum-2) }
.ticket-requester ul { margin: 6px 0 0; padding-inline-start: 18px; font-size: 12px; line-height: 2 }
.ticket-requester li.match { font-weight: 800; color: var(--plum) }
.ticket-reply-form { display: flex; flex-direction: column; gap: 8px }
.ticket-reply-form label { font-size: 12px; font-weight: 700; color: var(--plum-2) }
.ticket-reply-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap }
.admin-table tr.ticket-waiting td:first-child { box-shadow: inset -3px 0 0 var(--rose) }

/* Wholesale shop */
.shop-section { display: flex; flex-direction: column; gap: 16px }
.shop-img { display: block; border-radius: var(--r-sm); object-fit: cover; background: rgba(var(--plum-rgb), .06); flex-shrink: 0 }
.shop-img-empty { display: grid; place-items: center; color: var(--faint) }
.shop-rows { display: grid; gap: 10px }
.shop-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); flex-wrap: wrap }
.shop-row.off { opacity: .6 }
.shop-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 180px; min-width: 0 }
.shop-row-main b { color: var(--plum) }
.shop-row small, .shop-card small { font-size: 12px; color: var(--muted) }
.shop-row-num { display: flex; flex-direction: column; gap: 2px; align-items: flex-end }
.shop-row-num small.bad { color: #a5333f; font-weight: 700 }
.shop-row-total { min-width: 90px; text-align: end; color: var(--plum) }
.shop-form { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line) }
.shop-form h4 { margin: 0; color: var(--plum) }
.shop-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; align-items: end }
.shop-form-actions { display: flex; gap: 8px; flex-wrap: wrap }
.shop-switch { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--plum) }
.shop-thumbs { display: flex; flex-wrap: wrap; gap: 8px }
.shop-thumb { position: relative }
.shop-thumb button { position: absolute; top: -6px; inset-inline-start: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #c2414b; color: #fff; cursor: pointer; line-height: 1 }
.shop-thumb-add { width: 72px; height: 72px; border-radius: var(--r-sm); border: 1.6px dashed var(--lilac); background: transparent; color: var(--plum-2); font-size: 24px; cursor: pointer }
.shop-thumb-pick { padding: 0; border: 2px solid transparent; border-radius: var(--r-sm); background: none; cursor: pointer }
.shop-thumb-pick.on { border-color: var(--rose) }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px }
.shop-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s) }
.shop-card-img { padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center }
.shop-card-img .shop-img { width: 100%; height: 160px }
.shop-card-body { display: flex; flex-direction: column; gap: 4px; flex: 1 }
.shop-card-body b { color: var(--plum); font-size: 13.5px; line-height: 1.7; cursor: pointer }
.shop-price { font-weight: 800; color: var(--plum) }
.shop-price small { font-weight: 500 }
.qty { display: inline-flex; align-items: center; border: 1.6px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; align-self: flex-start }
.qty button { width: 34px; height: 34px; border: 0; background: rgba(var(--plum-rgb), .06); color: var(--plum); font-size: 18px; cursor: pointer }
.qty input { width: 52px; height: 34px; border: 0; text-align: center; font: inherit; font-weight: 700; color: var(--plum); -moz-appearance: textfield }
.shop-detail { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px }
.shop-detail-info { display: flex; flex-direction: column; gap: 8px }
.shop-detail-info h3 { margin: 0 }
.shop-desc { margin: 0; line-height: 2; font-size: 13px; white-space: pre-wrap }
.shop-add { display: flex; gap: 10px; align-items: center; margin-top: 6px }
.shop-gallery { display: flex; flex-direction: column; gap: 8px }
.shop-cart { display: flex; flex-direction: column; gap: 14px }
.shop-cart-group { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-md); background: rgba(var(--plum-rgb), .04) }
.order-list { display: grid; gap: 12px }
.order-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-md); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-s) }
.order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px }
.order-head > div { display: flex; flex-direction: column; gap: 2px }
.order-head b { color: var(--plum) }
.order-head small, .order-note { font-size: 12px; color: var(--muted) }
.order-party { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px }
.order-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13px }
.order-lines li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding-bottom: 6px; border-bottom: 1px dashed var(--line) }
.order-lines li span:nth-child(2) { color: var(--muted); font-size: 12px }
.order-total { display: flex; justify-content: space-between; font-weight: 700; color: var(--plum) }
.order-total.big { font-size: 16px; padding: 12px; border-radius: var(--r-sm); background: rgba(var(--blush-rgb), .25) }
.order-actions { display: flex; gap: 8px; flex-wrap: wrap }
@media (max-width: 640px) { .shop-detail { grid-template-columns: 1fr } .shop-row-num { align-items: flex-start } }
/* Identity verification (owner + admin) and payout bank account. */

.kyc-page,
.kyc-detail {
  display: flex;
  flex-direction: column;
  gap: 18px
}

.kyc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap
}

.kyc-header h3,
.kyc-header h4 {
  margin: 0
}

.kyc-header small {
  color: var(--muted);
  font-size: 12px
}

.kyc-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  border: 0
}

.kyc-badge.muted { background: rgba(var(--plum-rgb), .08); color: var(--muted) }
.kyc-badge.info { background: rgba(2, 132, 199, .12); color: #0369a1 }
.kyc-badge.warn { background: rgba(var(--gold-rgb), .22); color: #7a5d1c }
.kyc-badge.ok { background: rgba(90, 180, 120, .16); color: #2f7d4f }
.kyc-badge.bad { background: rgba(200, 80, 90, .14); color: #a5333f }

.kyc-badge.sidebar {
  margin-top: 10px;
  cursor: pointer
}

.kyc-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-inline-start: 8px;
  vertical-align: middle;
  background: var(--muted)
}

.kyc-dot.info { background: #0284c7 }
.kyc-dot.warn { background: #d97706 }
.kyc-dot.ok { background: #2f9e5d }
.kyc-dot.bad { background: #c2414b }

.kyc-stepper {
  list-style: none;
  margin: 0;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow-x: auto
}

.kyc-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted)
}

.kyc-step .dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  background: rgba(var(--plum-rgb), .08)
}

.kyc-step.is-current { color: var(--plum) }
.kyc-step.is-current .dot { background: var(--plum); color: #fff }
.kyc-step.is-done .dot { background: #2f9e5d; color: #fff }
.kyc-step.is-done { color: #2f7d4f }
.kyc-step.is-failed .dot { background: #c2414b; color: #fff }
.kyc-step.is-failed { color: #a5333f }
.kyc-step.is-attention .dot { background: #d97706; color: #fff }
.kyc-step.is-attention { color: #92400e }

.kyc-bar {
  flex: 1;
  min-width: 18px;
  height: 2px;
  background: var(--line)
}

.kyc-bar.is-done { background: #2f9e5d }

.kyc-alert {
  padding: 12px 16px;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.9
}

.kyc-alert.warn { background: rgba(var(--gold-rgb), .16); color: #7a5d1c }
.kyc-alert.bad { background: rgba(200, 80, 90, .12); color: #a5333f }

.kyc-alert a {
  color: inherit;
  text-decoration: underline
}

.kyc-meta,
.kyc-help {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8
}

.kyc-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.kyc-section h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--plum)
}

.kyc-docs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px
}

.kyc-doc {
  border: 1.6px dashed var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px
}

.kyc-doc.has {
  border-style: solid
}

.kyc-doc-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px
}

.kyc-req {
  font-size: 10.5px;
  font-weight: 800;
  color: #a5333f;
  white-space: nowrap
}

.kyc-req.optional {
  color: var(--muted)
}

.kyc-doc-hint {
  font-size: 11px;
  color: var(--muted)
}

.kyc-doc-body {
  aspect-ratio: 16 / 10;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: rgba(var(--plum-rgb), .04)
}

.kyc-doc-preview {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: zoom-in
}

.kyc-doc-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.kyc-doc-empty {
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--muted)
}

.kyc-doc-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap
}

.kyc-missing {
  margin: 0;
  padding-inline-start: 20px;
  font-size: 13px;
  color: #92400e;
  line-height: 2
}

.kyc-bank-line {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px
}

.kyc-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-inline-start: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 12px
}

.kyc-timeline li {
  position: relative;
  padding-inline-start: 16px;
  font-size: 13px
}

.kyc-timeline li::before {
  content: "";
  position: absolute;
  inset-inline-start: -6px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rose)
}

.kyc-timeline li.by-staff::before { background: var(--plum) }

.kyc-timeline-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap
}

.kyc-timeline time,
.kyc-timeline small {
  font-size: 11.5px;
  color: var(--muted)
}

.kyc-timeline p {
  margin: 4px 0 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(var(--plum-rgb), .05);
  line-height: 1.8
}

.birth-select {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 6px
}

.birth-select select {
  padding: 13px 10px;
  border-radius: var(--r-sm);
  border: 1.6px solid var(--line);
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  color: var(--plum)
}

/* Bank account */
.iban-input {
  display: flex;
  align-items: center;
  border: 1.6px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  overflow: hidden
}

.iban-input:focus-within {
  border-color: var(--rose)
}

.iban-input span {
  padding: 0 12px;
  font-weight: 800;
  color: var(--plum)
}

.iban-input input {
  flex: 1;
  border: 0 !important;
  padding: 13px 8px;
  letter-spacing: 1px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  outline: none
}

.iban-input input[aria-invalid="true"] {
  color: #a5333f
}

.iban-hint {
  font-size: 11.5px;
  color: #2f7d4f
}

.iban-hint.bad {
  color: #a5333f
}

.bank-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  align-items: end
}

.bank-summary div {
  display: flex;
  flex-direction: column;
  gap: 2px
}

.bank-summary .wide {
  grid-column: 1 / -1
}

.bank-summary small {
  font-size: 11.5px;
  color: var(--muted)
}

.bank-summary b {
  color: var(--plum);
  word-break: break-all
}

.wallet-balance {
  background: linear-gradient(135deg, var(--plum), #6b5b8a);
  color: #fff
}

.wallet-balance span,
.wallet-balance b {
  color: #fff
}

/* Admin */
.kyc-admin {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.kyc-count {
  margin-inline-start: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--rose);
  color: #fff;
  font-size: 11px
}

.kyc-admin-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 16px;
  align-items: start
}

.kyc-queue {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 75vh;
  overflow-y: auto
}

.kyc-queue-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  text-align: start;
  background: #fff;
  border: 1.6px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color .2s var(--ease)
}

.kyc-queue-item:hover,
.kyc-queue-item.on {
  border-color: var(--rose)
}

.kyc-queue-item > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0
}

.kyc-queue-item b {
  font-size: 13px;
  color: var(--plum)
}

.kyc-queue-item small {
  font-size: 11.5px;
  color: var(--muted)
}

.kyc-queue-badges {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end
}

.kyc-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center
}

.btn.danger {
  color: #a5333f
}

.btn-plum.danger {
  background: #c2414b;
  color: #fff
}

.kyc-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px
}

.kyc-facts .wide {
  grid-column: 1 / -1
}

.kyc-facts dt {
  font-size: 11.5px;
  color: var(--muted)
}

.kyc-facts dd {
  margin: 2px 0 0;
  font-weight: 700;
  color: var(--plum);
  word-break: break-all
}

.kyc-flag {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: #b45309
}

.kyc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(20, 14, 30, .88);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  cursor: zoom-out
}

.kyc-lightbox img {
  max-width: 100%;
  max-height: 85vh;
  border-radius: var(--r-sm)
}

.kyc-lightbox span {
  color: #fff;
  font-size: 13px
}

@media (max-width: 900px) {
  .kyc-admin-grid {
    grid-template-columns: 1fr
  }

  .kyc-queue {
    max-height: none
  }
}

/* Support tickets */
.ticket-row {
  width: 100%;
  text-align: start;
  cursor: pointer
}

.ticket-thread {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px
}

.ticket-thread li {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: rgba(var(--plum-rgb), .06)
}

.ticket-thread li.mine {
  align-self: flex-start;
  background: rgba(var(--gold-rgb), .14)
}

.ticket-thread li.staff {
  align-self: flex-end
}

.ticket-thread small {
  font-size: 11px;
  color: var(--muted)
}

.ticket-thread p {
  margin: 4px 0 0;
  white-space: pre-wrap;
  line-height: 1.9
}

.ticket-reply {
  display: flex;
  gap: 8px;
  align-items: flex-end
}

.ticket-reply textarea {
  flex: 1
}

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

.kyc-admin .cats { flex-wrap: wrap; overflow: visible; padding-bottom: 0 }
.kyc-stepper { gap: 10px }
.kyc-step .dot { flex-shrink: 0 }
@media (max-width: 1100px) { .kyc-admin-grid { grid-template-columns: 1fr } .kyc-queue { max-height: none } }

.reason-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px }
.reason-chips button { padding: 6px 11px; border-radius: 999px; border: 1.4px solid var(--line); background: #fff; color: var(--plum); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; text-align: start }
.reason-chips button:hover { border-color: var(--rose) }
.reason-chips button.on { background: rgba(var(--rose-rgb), .16); border-color: var(--rose) }
/* Global request feedback: progress bar, "working" pill and disabled buttons while saving. */

.activity-bar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 400;
  background: linear-gradient(90deg, transparent, var(--rose), var(--gold), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: activity-slide 1.1s ease-in-out infinite
}

@keyframes activity-slide {
  from { background-position: -40% 0 }
  to { background-position: 140% 0 }
}

.activity-pill {
  position: fixed;
  inset-inline: 0;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  margin-inline: auto;
  width: max-content;
  max-width: calc(100% - 32px);
  z-index: 400;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--plum);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  box-shadow: var(--shadow-s)
}

.activity-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  animation: activity-spin .7s linear infinite
}

@keyframes activity-spin {
  to { transform: rotate(360deg) }
}

/* While something is being saved, the panel cannot be clicked again. */
html[data-saving="true"] .dash-main button,
html[data-saving="true"] .dash-main [role="button"],
html[data-saving="true"] .admin-modal-wrap button {
  pointer-events: none;
  opacity: .6;
  cursor: progress
}

@media (prefers-reduced-motion: reduce) {
  .activity-bar,
  .activity-spinner {
    animation-duration: 3s
  }
}
#toast {
      position: fixed;
      bottom: 26px;
      inset-inline-start: 50%;
      transform: translateX(50%);
      z-index: 120
    }

    .toast {
      display: flex;
      align-items: center;
      gap: 9px;
      background: var(--plum);
      color: #fff;
      padding: 14px 22px;
      border-radius: 999px;
      font-size: 13.5px;
      font-weight: 700;
      box-shadow: 0 16px 40px rgba(var(--plum-rgb), .4);
      animation: pop .4s var(--ease)
    }

    @keyframes pop {
      from {
        opacity: 0;
        transform: translateY(16px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .rv {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity .75s var(--ease), transform .75s var(--ease)
    }

    .rv.in {
      opacity: 1;
      transform: none
    }

    @media (max-width:1080px) {

      .menu a,
      .menu .drop-t {
        padding: 9px 11px;
        font-size: 13px
      }

      .brand i {
        display: none
      }
    }

    @media (max-width:900px) {
      .burger {
        display: grid
      }

      .menu {
        position: absolute;
        top: calc(100% + 12px);
        inset-inline: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: rgba(255, 255, 255, .97);
        backdrop-filter: blur(20px);
        border: 1px solid var(--line);
        border-radius: var(--r-lg);
        padding: 10px;
        box-shadow: var(--shadow-l);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: all .3s var(--ease)
      }

      .menu.open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
      }

      .menu a,
      .menu .drop-t {
        color: var(--ink);
        justify-content: space-between;
        padding: 13px 16px;
        border-radius: 12px;
        font-size: 14px
      }

      .menu a:hover,
      .menu .drop-t:hover,
      .menu li.open .drop-t {
        background: rgba(var(--blush-rgb), .32);
        color: var(--plum)
      }

      .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        min-width: 0;
        padding: 2px 6px 6px;
        display: none
      }

      .menu li.open .dropdown {
        display: block
      }

      .btn-signup span {
        display: none
      }

      .btn-signup {
        padding: 11px
      }

      .foot {
        grid-template-columns: 1fr 1fr
      }
    }

    @media (max-width:760px) {
      .search-bar {
        grid-template-columns: 1fr 1fr;
        margin-top: -30px
      }

      .field+.field {
        border-inline-start: none
      }

      .field:nth-child(2) {
        border-inline-start: 1px solid var(--line)
      }

      .search-bar .btn {
        grid-column: 1/-1
      }

      .hero {
        min-height: auto;
        margin: 8px;
        border-radius: 26px
      }

      .hero-inner {
        padding-top: 140px
      }

      .hero h2 {
        max-width: none
      }

      .form {
        grid-template-columns: 1fr
      }

      .row {
        flex-direction: column;
        align-items: stretch;
        gap: 12px
      }

      .row .rt {
        justify-content: space-between
      }
    }

    @media (max-width:520px) {
      .search-bar {
        grid-template-columns: 1fr
      }

      .field:nth-child(2) {
        border-inline-start: none
      }

      .field+.field {
        border-top: 1px solid var(--line)
      }

      .foot {
        grid-template-columns: 1fr
      }

      .steps .s span {
        font-size: 10px
      }
    }

    @media (prefers-reduced-motion:reduce) {
      * {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto
      }

      .rv {
        opacity: 1;
        transform: none
      }
    }