/*!************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"DM_Sans","arguments":[{"subsets":["latin"],"weight":["300","400","500","600","700"],"variable":"--font-hpanel","display":"swap"}],"variableName":"dmSans"} ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/7ab938503e4547a1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/13971731025ec697-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/7ab938503e4547a1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/13971731025ec697-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/7ab938503e4547a1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/13971731025ec697-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/7ab938503e4547a1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/_next/static/media/13971731025ec697-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/7ab938503e4547a1-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/_next/static/media/13971731025ec697-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'DM Sans Fallback';src: local("Arial");ascent-override: 94.90%;descent-override: 29.66%;line-gap-override: 0.00%;size-adjust: 104.53%
}.__className_e64f39 {font-family: 'DM Sans', 'DM Sans Fallback';font-style: normal
}.__variable_e64f39 {--font-hpanel: 'DM Sans', 'DM Sans Fallback'
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[2].use[1]!./node_modules/next/dist/build/webpack/loaders/next-font-loader/index.js??ruleSet[1].rules[14].oneOf[2].use[2]!./node_modules/next/font/google/target.css?{"path":"src/app/layout.tsx","import":"DM_Mono","arguments":[{"subsets":["latin"],"weight":["300","400","500"],"variable":"--font-hmono","display":"swap"}],"variableName":"dmMono"} ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/8d0a1832fd3be0c8-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/_next/static/media/d7df244fe7b07b95-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/64418ffc17e50301-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/_next/static/media/0e96d314a90a6138-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/ba43ea3467e29870-s.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/_next/static/media/b7ea2ab4a8ad1f81-s.p.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}@font-face {font-family: 'DM Mono Fallback';src: local("Arial");ascent-override: 73.71%;descent-override: 23.03%;line-gap-override: 0.00%;size-adjust: 134.59%
}.__className_d02b1f {font-family: 'DM Mono', 'DM Mono Fallback';font-style: normal
}.__variable_d02b1f {--font-hmono: 'DM Mono', 'DM Mono Fallback'
}

/*!*****************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/hpanel/variables.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   VARIABLES.CSS — Design Tokens
   Values extracted from Hostinger hPanel's production stylesheet.
   Colors, radii, shadows and semantic scales match the real platform.
   Layout/font sizes are scaled ~25% larger for a "zoomed-in" display.
═══════════════════════════════════════════════════════════════════════════ */

:root {

  /* ── Sidebar / Menu widths ───────────────────────────────────────────── */
  /* Real hPanel: --hmenu-width: 260px / --hmenu-width-minimized: 72px    */
  --sidebar-width:           260px;
  --sidebar-collapsed-width: 72px;
  --profile-subnav-width:    260px;    /* matches --hmenu-width-second-level */

  /* ── Brand / Primary ─────────────────────────────────────────────────── */
  /* Source: --primary: #673de6 / --h-color-primary-600: #673de6           */
  --color-primary:           #673de6;
  --color-primary-hover:     #5025d1;  /* --primary-dark / primary-700     */
  --color-primary-active:    #471ea7;  /* --h-color-primary-700            */
  --color-primary-light:     #ebe4ff;  /* --primary-light                  */
  --color-primary-mid:       #d9dbff;  /* --h-color-primary-200            */
  --color-primary-border:    #9d99ff;  /* --h-color-primary-400            */
  --color-primary-lightest:  #673de614;/* --primary-lightest (8% alpha)    */
  --color-primary-tint10:    #7b66ff1a;/* --h-color-primary-a10            */

  /* ── Neutral / Surface ──────────────────────────────────────────────── */
  /* Source: --h-color-neutral-* palette                                   */
  --color-bg:                #f2f3f6;  /* --gray-light / site background   */
  --color-bg-hover:          #f5f5f6;  /* --h-color-neutral-100            */
  --color-white:             #ffffff;  /* --h-color-neutral-0              */
  --color-sidebar-bg:        #ffffff;
  --color-header-bg:         #ffffff;

  /* Neutral scale (for UI flexibility) */
  --color-neutral-50:        #f8f9fa;
  --color-neutral-100:       #f5f5f6;
  --color-neutral-200:       #dedee2;
  --color-neutral-300:       #c6c6cc;
  --color-neutral-400:       #9d9ea4;
  --color-neutral-500:       #797980;
  --color-neutral-600:       #58585e;
  --color-neutral-700:       #36363b;
  --color-neutral-800:       #222225;
  --color-neutral-900:       #18181a;

  /* ── Border ─────────────────────────────────────────────────────────── */
  /* Source: --h-color-neutral-200: #dedee2                                */
  --color-border:            #dedee2;
  --color-border-light:      #f5f5f6;  /* --h-color-neutral-100            */
  --color-border-focus:      var(--color-primary);

  /* ── Text ────────────────────────────────────────────────────────────── */
  /* Source: --h-color-neutral-900 / 600 / 400                             */
  --color-text:              #18181a;  /* --h-color-neutral-900            */
  --color-text-muted:        #58585e;  /* --h-color-neutral-600            */
  --color-text-light:        #9d9ea4;  /* --h-color-neutral-400            */
  --color-text-placeholder:  #c6c6cc;  /* --h-color-neutral-300            */
  --color-text-on-primary:   #ffffff;

  /* ── Success ────────────────────────────────────────────────────────── */
  /* Source: --success: #00b090 / --h-color-success-500: #009e5b           */
  --color-success:           #009e5b;
  --color-success-hover:     #007a49;  /* --h-color-success-600            */
  --color-success-bg:        #f1f9f3;  /* --h-color-success-50             */
  --color-success-border:    #7ce5a2;  /* --h-color-success-300            */
  --color-success-text:      #007a49;

  /* ── Warning ────────────────────────────────────────────────────────── */
  /* Source: --warning: #ffcd35 / --warning-dark: #fea419                  */
  --color-warning:           #ffcd35;
  --color-warning-hover:     #fea419;  /* --warning-dark                   */
  --color-warning-bg:        #fff8e2;  /* --warning-light                  */
  --color-warning-border:    #ffc107;
  --color-warning-text:      #a16200;

  /* ── Danger / Error ─────────────────────────────────────────────────── */
  /* Source: --danger: #fc5185 / --h-color-danger-500: #e73a47             */
  --color-error:             #e73a47;  /* --h-color-danger-500             */
  --color-error-hover:       #be1025;  /* --h-color-danger-600             */
  --color-error-bg:          #fff4f3;  /* --h-color-danger-50              */
  --color-error-border:      #ffb5b3;  /* --h-color-danger-300             */
  --color-error-text:        #870013;  /* --h-color-danger-700             */

  /* ── Info / Blue ────────────────────────────────────────────────────── */
  /* Source: --h-color-blue-500: #4c78ff                                   */
  --color-info:              #4c78ff;
  --color-info-hover:        #3c5ae6;  /* --h-color-blue-600               */
  --color-info-bg:           #f3f7ff;  /* --h-color-blue-50                */
  --color-info-border:       #83a7ff;  /* --h-color-blue-400               */
  --color-info-text:         #2334a3;  /* --h-color-blue-700               */

  /* ── Typography ─────────────────────────────────────────────────────── */
  --font:                    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:               'DM Mono', 'SFMono-Regular', 'Cascadia Code', 'Consolas', 'Courier New', monospace;

  /* Font sizes — Hostinger base × 1.25 zoom scale                        */
  /* Real hPanel: body-2=14px body-1=16px h3=18px h2=20px h1=24px         */
  --font-size-2xs:           12px;   /* caption / overline (base 12)       */
  --font-size-xs:            14px;   /* body-3  (base 12 → kept at 14)     */
  --font-size-sm:            16px;   /* body-2  (base 14 → 14×1.14≈16)     */
  --font-size-base:          17.5px; /* body-1  (base 16 → 16×1.09≈17.5)  */
  --font-size-md:            20px;   /* heading-3 (base 18 → 18×1.11≈20)  */
  --font-size-lg:            22px;   /* heading-2 (base 20 → 20×1.1≈22)   */
  --font-size-xl:            26px;   /* heading-1 (base 24 → 24×1.08≈26)  */
  --font-size-2xl:           32px;   /* title-3  (base 32 → kept)          */
  --font-size-3xl:           40px;   /* title-2  (base 36 → 36×1.1≈40)    */

  --font-weight-normal:      400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;
  --font-weight-extrabold:   800;

  --line-height:             1.5;
  --line-height-tight:       1.3;
  --line-height-loose:       1.7;

  --letter-spacing-tight:    -.02em;
  --letter-spacing-wide:     .04em;
  --letter-spacing-wider:    .08em;

  /* ── Spacing Scale ───────────────────────────────────────────────────── */
  --space-1:                 4px;
  --space-2:                 8px;
  --space-3:                 12px;
  --space-4:                 16px;
  --space-5:                 24px;
  --space-6:                 32px;
  --space-7:                 40px;
  --space-8:                 48px;
  --space-10:                60px;
  --space-12:                72px;
  --space-16:                96px;

  /* ── Layout Dimensions ──────────────────────────────────────────────── */
  /* Real hPanel: header=70px sidebar=260px                                */
  --header-height:           70px;
  --content-max-width:       1400px;
  --login-card-width:        480px;

  /* ── Border Radius ───────────────────────────────────────────────────── */
  /* Source: --h-border-radius-* from Hostinger design system              */
  --radius-xs:               4px;    /* --h-border-radius-xs               */
  --radius-sm:               8px;    /* --h-border-radius-sm               */
  --radius-md:               12px;   /* --h-border-radius-md               */
  --radius-lg:               16px;   /* --h-border-radius-lg               */
  --radius-xl:               24px;   /* --h-border-radius-xl               */
  --radius-2xl:              32px;   /* --h-border-radius-2xl              */
  --radius-full:             9999px; /* --h-border-radius-full (999px)     */

  /* ── Shadows ─────────────────────────────────────────────────────────── */
  /* Source: --h-shadow-1/2/3-bottom values                                */
  --shadow-xs:               0 1px 3px rgba(0,0,0,.06);
  --shadow-sm:               0 2px 6px rgba(0,0,0,.10);   /* h-shadow-1    */
  --shadow-md:               0 8px 24px rgba(0,0,0,.12);  /* h-shadow-2    */
  --shadow-lg:               0 8px 24px rgba(0,0,0,.15);  /* h-shadow-2+   */
  --shadow-xl:               0 8px 28px rgba(0,0,0,.25);  /* h-shadow-3    */
  --shadow-focus:            0 0 0 3px rgba(103,61,230,.20); /* primary a20 */
  --shadow-focus-error:      0 0 0 3px rgba(231,58,71,.20);  /* danger a20  */

  /* ── Transitions ─────────────────────────────────────────────────────── */
  --transition:              .18s ease;
  --transition-slow:         .3s ease;
  --transition-fast:         .1s ease;

  /* ── Z-index Scale ───────────────────────────────────────────────────── */
  --z-sidebar:               40;
  --z-header:                50;
  --z-dropdown:              100;
  --z-overlay:               200;
  --z-modal:                 300;
  --z-toast:                 400;
}

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/hpanel/base.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   BASE.CSS — Reset, Typography & Utility Classes
═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a:hover { text-decoration: none; }

button {
  cursor: pointer;
  font-family: var(--font);
  border: none;
  background: none;
  padding: 0;
}

input, select, textarea {
  font-family: var(--font);
  font-size: var(--font-size-base);
}

ul, ol { list-style: none; }

img, svg { display: block; max-width: 100%; }

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text);
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

p { line-height: var(--line-height); }

code, pre, kbd {
  font-family: var(--font-mono);
  font-size: .9em;
}

kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: .02em;
}

/* ── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar          { width: 6px; height: 6px; }
::-webkit-scrollbar-track    { background: transparent; }
::-webkit-scrollbar-thumb    { background: var(--color-border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-light); }

/* ── Focus visible ──────────────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   Single-purpose helpers — use sparingly for layout glue.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Display ─────────────────────────────────────────────────────────────── */
.hidden          { display: none !important; }
.block           { display: block; }
.inline-block    { display: inline-block; }
.flex            { display: flex; }
.inline-flex     { display: inline-flex; }
.grid            { display: grid; }

/* ── Flex ─────────────────────────────────────────────────────────────────── */
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.items-start     { align-items: flex-start; }
.items-center    { align-items: center; }
.items-end       { align-items: flex-end; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-1          { flex: 1 1; }
.flex-shrink-0   { flex-shrink: 0; }
.self-start      { align-self: flex-start; }

/* ── Gap ──────────────────────────────────────────────────────────────────── */
.gap-1  { gap: var(--space-1); }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* ── Sizing ───────────────────────────────────────────────────────────────── */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.min-w-0 { min-width: 0; }

/* ── Spacing ──────────────────────────────────────────────────────────────── */
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mr-2  { margin-right: var(--space-2); }
.ml-auto { margin-left: auto; }

/* ── Typography Utilities ──────────────────────────────────────────────────── */
.text-2xs        { font-size: var(--font-size-2xs); }
.text-xs         { font-size: var(--font-size-xs); }
.text-sm         { font-size: var(--font-size-sm); }
.text-base       { font-size: var(--font-size-base); }
.text-md         { font-size: var(--font-size-md); }
.text-lg         { font-size: var(--font-size-lg); }
.text-xl         { font-size: var(--font-size-xl); }

.font-normal     { font-weight: var(--font-weight-normal); }
.font-medium     { font-weight: var(--font-weight-medium); }
.font-semibold   { font-weight: var(--font-weight-semibold); }
.font-bold       { font-weight: var(--font-weight-bold); }
.font-extrabold  { font-weight: var(--font-weight-extrabold); }
.font-mono       { font-family: var(--font-mono); }

.text-left       { text-align: left; }
.text-center     { text-align: center; }
.text-right      { text-align: right; }
.truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.uppercase       { text-transform: uppercase; }
.leading-tight   { line-height: var(--line-height-tight); }

/* ── Color Utilities ────────────────────────────────────────────────────────── */
.text-primary    { color: var(--color-primary); }
.text-muted      { color: var(--color-text-muted); }
.text-light      { color: var(--color-text-light); }
.text-success    { color: var(--color-success); }
.text-warning    { color: var(--color-warning); }
.text-error      { color: var(--color-error); }
.text-white      { color: var(--color-white); }

.bg-primary-light { background-color: var(--color-primary-light); }
.bg-white        { background-color: var(--color-white); }
.bg-bg           { background-color: var(--color-bg); }

/* ── Border Utilities ────────────────────────────────────────────────────────── */
.border          { border: 1px solid var(--color-border); }
.border-top      { border-top: 1px solid var(--color-border); }
.border-bottom   { border-bottom: 1px solid var(--color-border); }
.rounded-sm      { border-radius: var(--radius-sm); }
.rounded-md      { border-radius: var(--radius-md); }
.rounded-lg      { border-radius: var(--radius-lg); }
.rounded-xl      { border-radius: var(--radius-xl); }
.rounded-full    { border-radius: var(--radius-full); }

/* ── Shadow ──────────────────────────────────────────────────────────────────── */
.shadow-sm       { box-shadow: var(--shadow-sm); }
.shadow-md       { box-shadow: var(--shadow-md); }
.shadow-lg       { box-shadow: var(--shadow-lg); }

/* ── Overflow ────────────────────────────────────────────────────────────────── */
.overflow-hidden  { overflow: hidden; }
.overflow-auto    { overflow: auto; }
.overflow-x-auto  { overflow-x: auto; }

/* ── Position ────────────────────────────────────────────────────────────────── */
.relative         { position: relative; }
.absolute         { position: absolute; }
.sticky-top       { position: -webkit-sticky; position: sticky; top: 0; }

/* ── Pointer ─────────────────────────────────────────────────────────────────── */
.cursor-pointer   { cursor: pointer; }
.pointer-none     { pointer-events: none; }

/* ── Divider ─────────────────────────────────────────────────────────────────── */
.divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-4) 0;
}

.divider-text {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  margin: var(--space-5) 0;
}
.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1 1;
  height: 1px;
  background: var(--color-border);
}

/* ── Avatar ──────────────────────────────────────────────────────────────────── */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-bold);
  letter-spacing: .03em;
  flex-shrink: 0;
}
.avatar-sm  { width: 28px; height: 28px; font-size: var(--font-size-xs); }
.avatar-md  { width: 36px; height: 36px; font-size: var(--font-size-sm); }
.avatar-lg  { width: 44px; height: 44px; font-size: var(--font-size-base); }
.avatar-purple { background: var(--color-primary-light); color: var(--color-primary); }
.avatar-green  { background: var(--color-success-bg); color: var(--color-success-text); }
.avatar-blue   { background: var(--color-info-bg); color: var(--color-info); }
.avatar-orange { background: var(--color-warning-bg); color: var(--color-warning-text); }

/* ── Icon Container ──────────────────────────────────────────────────────────── */
.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}
.icon-box-sm  { width: 32px; height: 32px; }
.icon-box-md  { width: 40px; height: 40px; }
.icon-box-lg  { width: 48px; height: 48px; }
.icon-box-purple { background: var(--color-primary-light); color: var(--color-primary); }
.icon-box-green  { background: var(--color-success-bg); color: var(--color-success); }
.icon-box-blue   { background: var(--color-info-bg); color: var(--color-info); }
.icon-box-orange { background: var(--color-warning-bg); color: var(--color-warning); }
.icon-box-pink   { background: #fdf4ff; color: #a855f7; }

/* ── Status Dot ──────────────────────────────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.status-dot-active  { background: var(--color-success); }
.status-dot-pending { background: var(--color-warning); }
.status-dot-error   { background: var(--color-error); }
.status-dot-gray    { background: var(--color-text-light); }

/* ── Progress Bar ────────────────────────────────────────────────────────────── */
.progress {
  height: 7px;
  background: var(--color-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width .4s ease;
  background: var(--color-primary);
}
.progress-bar-green  { background: var(--color-success); }
.progress-bar-orange { background: var(--color-warning); }
.progress-bar-red    { background: var(--color-error); }
.progress-bar-blue   { background: var(--color-info); }

/* ── Breadcrumb ──────────────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.breadcrumb a:hover    { color: var(--color-primary); }
.breadcrumb .sep       { color: var(--color-text-light); }
.breadcrumb .current   { color: var(--color-text); font-weight: var(--font-weight-medium); }

/*!******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/hpanel/components.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTS.CSS
   Every reusable UI component:
   1.  Badge
   2.  Button
   3.  Form Controls (input, select, textarea, label, group)
   4.  Card
   5.  Table
   6.  Tabs
   7.  Alert / Notice
   8.  Dropdown Menu
   9.  Modal
   10. Toast
   11. Search Overlay
   12. Ask AI Modal (special variant)
═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   1. BADGE
   Usage:  <span class="badge badge-green">Active</span>
───────────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  letter-spacing: .02em;
  white-space: nowrap;
}

.badge-purple { background: var(--color-primary-light);  color: var(--color-primary);       }
.badge-green  { background: var(--color-success-bg);     color: var(--color-success-text);  }
.badge-orange { background: var(--color-warning-bg);     color: var(--color-warning-text);  }
.badge-red    { background: var(--color-error-bg);       color: var(--color-error-text);    }
.badge-blue   { background: var(--color-info-bg);        color: var(--color-info-text);     }
.badge-gray   { background: var(--color-border-light);   color: var(--color-text-muted);    }
.badge-white  { background: rgba(255,255,255,.2);        color: #fff;                       }

/* ─────────────────────────────────────────────────────────────────────────
   2. BUTTON
   Usage:  <button class="btn btn-primary">Save</button>
           <button class="btn btn-outline btn-sm">Cancel</button>
───────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 25px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font);
  line-height: 1.4;
  white-space: nowrap;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--transition), border-color var(--transition),
              box-shadow var(--transition), color var(--transition), transform var(--transition-fast);
  text-decoration: none;
  flex-shrink: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.btn:active { transform: scale(.98); }

/* Variants */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
}
.btn-primary:hover  { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-primary:focus-visible { box-shadow: var(--shadow-focus); }

.btn-outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-outline:hover  { background: var(--color-primary-light); }
.btn-outline:focus-visible { box-shadow: var(--shadow-focus); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.btn-ghost:hover  { background: var(--color-bg); color: var(--color-text); border-color: var(--color-border); }

.btn-danger {
  background: var(--color-error);
  color: #fff;
  border-color: var(--color-error);
}
.btn-danger:hover { background: var(--color-error-hover); border-color: var(--color-error-hover); }

.btn-success {
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
}
.btn-success:hover { background: var(--color-success-hover); }

.btn-white {
  background: #fff;
  color: var(--color-primary);
  border-color: #fff;
  font-weight: var(--font-weight-bold);
}
.btn-white:hover { background: rgba(255,255,255,.9); }

/* Sizes */
.btn-xs  { padding: 6px 13px;  font-size: var(--font-size-xs);   border-radius: var(--radius-sm); }
.btn-sm  { padding: 9px 18px;  font-size: var(--font-size-sm); }
.btn-md  { padding: 13px 25px; }
.btn-lg  { padding: 16px 34px; font-size: var(--font-size-base); }
.btn-xl  { padding: 19px 42px; font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }

/* Icon-only */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
}
.btn-icon-sm { width: 36px; height: 36px; }
.btn-icon-lg { width: 52px; height: 52px; }

/* Full width */
.btn-full { width: 100%; }

/* Loading state */
.btn-loading { pointer-events: none; opacity: .7; }
.btn-loading::after {
  content: '';
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin-left: var(--space-2);
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ─────────────────────────────────────────────────────────────────────────
   3. FORM CONTROLS
───────────────────────────────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: 1.4;
}
.form-label .required { color: var(--color-error); margin-left: 2px; }

.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 10px 19px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  font-size: var(--font-size-base);
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-white);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  line-height: var(--line-height);
}

.form-input::placeholder  { color: var(--color-text-placeholder); }

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.form-input-error {
  border-color: var(--color-error);
}
.form-input-error:focus { box-shadow: var(--shadow-focus-error); }

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.form-error-msg {
  font-size: var(--font-size-xs);
  color: var(--color-error);
  margin-top: var(--space-1);
}

/* Input with icon */
.form-input-wrap { position: relative; }
.form-input-wrap .form-input { padding-right: 44px; }
.form-input-icon {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color var(--transition);
}
.form-input-icon:hover { color: var(--color-text); }

/* Input prefix group */
.form-input-group {
  display: flex;
  align-items: stretch;
}
.form-input-group .form-input:not(:first-child) {
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.form-input-group .form-input:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.form-input-group .form-select:not(:first-child) {
  border-left: 1px solid var(--color-border);
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.form-input-group .form-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.form-textarea { min-height: 90px; resize: vertical; }

/* Checkbox / Radio */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 17px;
  height: 17px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}
.form-check-label {
  font-size: var(--font-size-base);
  color: var(--color-text);
  line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────────────────
   4. CARD
   Usage: <div class="card"> … </div>
───────────────────────────────────────────────────────────────────────── */
.card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
}

.card-sm    { padding: var(--space-4); border-radius: var(--radius-md); }
.card-lg    { padding: var(--space-8); border-radius: var(--radius-xl); }
/* Table card: no internal padding, the toolbar/table/pagination provide their own */
.card-table { padding: 0; overflow: hidden; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.card-title   { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
.card-section { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); }

.card-footer {
  padding-top: var(--space-4);
  margin-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* Clickable card */
.card-clickable {
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.card-clickable:hover {
  border-color: var(--color-primary-border);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* Highlighted card */
.card-primary {
  border-color: var(--color-primary-border);
  background: var(--color-primary-light);
}


/* ─────────────────────────────────────────────────────────────────────────
   5. TABLE
───────────────────────────────────────────────────────────────────────── */
.table-wrap {
  overflow: hidden;           /* clip header bg + keep rounded corners */
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-white);
}
/* Use only where a dropdown must escape table bounds */
.table-wrap.overflow-visible { overflow: visible; }
/* Wrapper itself doesn't scroll; only the inner scroller div does */
.table-scroll { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.table thead tr {
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.table th {
  padding: 12px 20px;
  text-align: left;
  font-size: var(--font-size-xs);   /* 14px — matches h-t-body-2-bold */
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  white-space: nowrap;
  letter-spacing: 0;                /* real hPanel: no letter-spacing */
}

/* Sort button inside <th> */
.table th .sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  background: none;
  border: none;
  padding: 0;
}
.table th .sort-btn:hover { color: var(--color-text); }
.table th .sort-btn svg { opacity: .5; flex-shrink: 0; }
.table th .sort-btn:hover svg { opacity: 1; }

.table td {
  padding: 16px 20px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--color-bg); }
/* Clickable row */
.table-row-link { cursor: pointer; }
.table-row-link:hover td { background: var(--color-bg) !important; }

/* Compact table */
.table-compact th { padding: 10px 16px; }
.table-compact td { padding: 12px 16px; }


/* ─────────────────────────────────────────────────────────────────────────
   6. TABS
───────────────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  gap: 0;
}

.tab-btn {
  padding: 11px 20px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font);
  color: var(--color-text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  background: none;
  transition: color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.tab-btn:hover   { color: var(--color-text); }
.tab-btn.active  { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.tab-pane        { display: none; padding-top: var(--space-6); }
.tab-pane.active { display: block; }


/* ─────────────────────────────────────────────────────────────────────────
   7. ALERT / NOTICE
───────────────────────────────────────────────────────────────────────── */
/* Block by default: mixed text + <code> must not become separate flex items (gap looked like broken word spacing). */
.alert {
  display: block;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  border: 1px solid transparent;
}
.alert:has(> svg:first-child) {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.alert:has(> svg:first-child) svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.alert-info    { background: var(--color-info-bg);    color: var(--color-info-text);    border-color: var(--color-info-border); }
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); border-color: var(--color-success-border); }
.alert-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: var(--color-warning-border); }
.alert-error   { background: var(--color-error-bg);   color: var(--color-error-text);   border-color: var(--color-error-border); }


/* ─────────────────────────────────────────────────────────────────────────
   8. DROPDOWN MENU
───────────────────────────────────────────────────────────────────────── */
.dropdown        { position: relative; display: inline-flex; }

.dropdown-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 190px;
  z-index: 500;              /* above any table/card stacking context */
  overflow: hidden;
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  transform-origin: top right;
  white-space: nowrap;
}
.dropdown-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 15px;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: var(--font);
  white-space: nowrap;
}
.dropdown-item svg { flex-shrink: 0; }
.dropdown-item:hover  { background: var(--color-bg); }
.dropdown-item.danger { color: var(--color-error); }
.dropdown-item.danger:hover { background: var(--color-error-bg); }

.dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-1) 0;
}

.dropdown-header {
  padding: 10px 15px 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────────────────
   9. MODAL
───────────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal);
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: fadeIn .2s ease;
}
.modal-overlay.open { display: flex; }

@keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }

.modal {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 500px;
  box-shadow: var(--shadow-xl);
  padding: var(--space-7);
  position: relative;
  animation: slideUp .22s ease;
}
.modal-lg   { max-width: 660px; }
.modal-sm   { max-width: 380px; }
.modal-full { max-width: 900px; }

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  gap: var(--space-3);
}
.modal-title    { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); line-height: var(--line-height-tight); }
.modal-subtitle { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

.modal-close {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
}
.modal-close:hover { background: var(--color-bg); color: var(--color-text); }

.modal-body    { margin-bottom: var(--space-5); }
.modal-footer  {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}


/* ─────────────────────────────────────────────────────────────────────────
   10. TOAST NOTIFICATION
───────────────────────────────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--color-neutral-900);
  color: #fff;
  padding: 13px 18px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  box-shadow: var(--shadow-xl);
  animation: toastIn .25s ease;
  max-width: 360px;
  pointer-events: all;
  min-width: 240px;
}
.toast-success { background: var(--color-success); }
.toast-error   { background: var(--color-error); }
.toast-warning { background: var(--color-warning); }
.toast-info    { background: var(--color-info); }

@keyframes toastIn { from { opacity:0; transform: translateX(16px); } to { opacity:1; transform: none; } }


/* ─────────────────────────────────────────────────────────────────────────
   11. SEARCH OVERLAY
───────────────────────────────────────────────────────────────────────── */
#search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-overlay);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
#search-overlay.open { display: flex; }

.search-box {
  background: var(--color-white);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 580px;
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  animation: slideUp .2s ease;
}

.search-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}
.search-input-row input {
  flex: 1 1;
  border: none;
  outline: none;
  font-size: var(--font-size-md);
  font-family: var(--font);
  color: var(--color-text);
  background: transparent;
}
.search-input-row input::placeholder { color: var(--color-text-placeholder); }

.search-results {
  padding: var(--space-2);
  max-height: 380px;
  overflow-y: auto;
}

.search-section-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3) var(--space-1);
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition);
}
.search-result-item:hover { background: var(--color-bg); }
.search-result-item .sr-name  { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.search-result-item .sr-desc  { font-size: var(--font-size-xs); color: var(--color-text-muted); }

.search-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/*!**************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/hpanel/layout.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT.CSS
   Structural layout: Header, Sidebar, Main content wrapper.
   Also covers: Login page layout, special header buttons.
═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   AUTH PAGES  (login · register · recovery)
   Values derived from Hostinger's auth.hostinger.com styles.css
   body bg: #F4F5FF · card: 376×auto · padding: 48px 40px
   border: 1px solid #D8DAE0 · radius: 16px
───────────────────────────────────────────────────────────────────────── */

/* ── Auth page wrapper — full viewport, logo fixed top-left, card centered ── */
#login-page,
#register-page,
#recovery-page {
  min-height: 100vh;
  background: #F4F5FF;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}

/* Brand area — fixed top-left above the centered card */
.auth-logo {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  padding: 20px 40px;
  line-height: 0;
  text-decoration: none;
  z-index: 10;
}
.auth-logo.auth-logo--text {
  line-height: 1.15;
}
.login-brand-title {
  font-family: var(--font-hpanel, system-ui, sans-serif);
  font-size: 22px;
  font-weight: 700;
  color: #1f1346;
  letter-spacing: -0.02em;
  display: inline-block;
  max-width: min(360px, 90vw);
}
.auth-logo svg,
.auth-logo img {
  max-height: 30px;
}

/* Inner wrapper — not needed for centering, just passes through */
.auth-container {
  display: contents;
}

/* The card itself */
.login-card {
  background: #ffffff;
  border: 1px solid #D8DAE0;   /* from styles.css .content */
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  padding: 48px 40px;           /* exact from styles.css   */
  width: 420px;                 /* slightly wider (requested) */
  max-width: 100%;
  box-sizing: border-box;
}

/* Title: "Log in" */
.login-title {
  text-align: center;
  font-size: 36px;              /* styles.css .title */
  font-weight: 700;
  line-height: 40px;
  color: #2F1C6A;
  margin: 0 0 25px;
  letter-spacing: 0;
}

/* Multi-step sign-in (password → email MFA) */
.login-step-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 0 28px;
  padding: 0 8px;
}
.login-step-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 72px;
}
.login-step-dot span {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: #727586;
  background: #F0F1F5;
  border: 2px solid #D8DAE0;
}
.login-step-dot small {
  font-size: 11px;
  font-weight: 500;
  color: #6D7081;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.login-step-dot--active span {
  color: #fff;
  background: #5B4DBC;
  border-color: #5B4DBC;
}
.login-step-dot--done span {
  color: #5B4DBC;
  background: #EDE9FF;
  border-color: #5B4DBC;
}
.login-step-line {
  flex: 1 1;
  max-width: 48px;
  height: 2px;
  background: #E8E8EF;
  margin: 0 4px 20px;
}
.login-step-panel {
  animation: login-step-in 0.22s ease-out;
}
@keyframes login-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.login-step-back {
  margin: 0 0 12px;
  text-align: left;
}
.login-step-back a {
  font-size: 14px;
  color: #5B4DBC;
  text-decoration: none;
  font-weight: 500;
}
.login-step-back a:hover {
  text-decoration: underline;
}
.login-trust-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 18px;
  font-size: 14px;
  line-height: 1.45;
  color: #4B4E5C;
  cursor: pointer;
}
.login-trust-row input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: #5B4DBC;
  flex-shrink: 0;
}

/* Social button row — equal-width flex, like real Hostinger .social-login-block */
.login-social-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: 25px;
}

.login-social-btn {
  flex: 1 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;           /* exact from styles.css p-12-24 */
  border: 1px solid #dadce0;   /* gray-border */
  border-radius: 8px;           /* b-radius-8 */
  background: #ffffff;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
/* space between the 3 buttons via sibling selector (like mr-16 ml-16 on Facebook) */
.login-social-btn + .login-social-btn {
  margin-left: 16px;
}
.login-social-btn:hover {
  border-color: #9d9ea4;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
/* Facebook */
.login-social-btn.fb             { background: #1877f2; border-color: #1877f2; }
.login-social-btn.fb:hover       { background: #166fe5; border-color: #166fe5; }
/* GitHub */
.login-social-btn.gh             { background: #2f363d; border-color: #2f363d; }
.login-social-btn.gh:hover       { background: #24292e; border-color: #24292e; }

/* keep old .login-social-grid for compatibility */
.login-social-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-bottom: 20px;
}

/* ── "or" divider ── */
.divider-or {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  margin: 4px 0 20px;
}
.divider-or::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: #dadce0;
}
.divider-or span {
  position: relative;
  background: #ffffff;
  padding: 0 10px;
  font-size: 16px;
  font-weight: 400;
  color: #2F1C6A;
  line-height: 1;
}

/* Form stack */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 15px;                    /* mb-15 from styles.css */
}

/* Auth-page labels: 14px / 400 / muted — override dashboard's semibold labels */
#login-page   .form-label,
#register-page .form-label,
#recovery-page .form-label {
  font-size: 14px;
  font-weight: 400;
  color: #6D7081;
  line-height: 24px;
}

/* Auth-page inputs: 48px height, 1px border, 8px radius */
#login-page   .form-input,
#register-page .form-input,
#recovery-page .form-input {
  height: 48px;
  padding: 0 16px;
  font-size: 14px;
  border: 1px solid #DADCE0;
  border-radius: 8px;
  box-sizing: border-box;
}
#login-page   .form-input:focus,
#register-page .form-input:focus,
#recovery-page .form-input:focus {
  border-color: #673de6;
  box-shadow: 0 0 0 3px rgba(103,61,230,.15);
  outline: none;
}
/* Password field wrapper needs to pass height through */
#login-page   .form-input-wrap .form-input,
#register-page .form-input-wrap .form-input,
#recovery-page .form-input-wrap .form-input {
  padding-right: 44px;
}

/* "Forgot password?" — left-aligned like real Hostinger */
.login-forgot {
  font-size: 16px;              /* matches .secondary-action in styles.css */
  font-weight: 700;
  color: #673de6;
  text-align: left;
  display: block;
  text-decoration: none;
  margin-bottom: 25px;
}
.login-forgot:hover { text-decoration: underline; }

/* "Can't Access Your Account?" — centered link inside the form */
.login-cant-access {
  display: block;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #673de6;
  text-decoration: none;
  margin-top: -10px;
  margin-bottom: 8px;
}
.login-cant-access:hover { text-decoration: underline; }

/* ToS paragraph below register form */
.login-tos {
  font-size: 12px;
  color: #6D7081;
  text-align: center;
  line-height: 24px;
  margin: 16px 0 0;
}
.login-tos a {
  color: #6D7081;
  font-weight: 700;
  text-decoration: underline;
}

/* Submit / CTA button: 53px height, 16px/700, 8px radius */
.login-submit {
  width: 100%;
  height: 53px;
  font-size: 16px;
  font-weight: 700;
  font-family: "DM Sans", sans-serif;
  background: #673de6;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
  letter-spacing: 0;
}
.login-submit:hover  { background: #5025d1; }
.login-submit:active { transform: scale(.99); }
.login-submit:disabled { opacity: .7; cursor: default; }

/* Footer — single centered line (like real Hostinger "Don't have an account? Sign Up") */
.login-footer {
  text-align: center;
  font-size: 16px;
  color: #43434b;               /* from styles.css .not-a-member */
  font-weight: 700;
  line-height: 1.5;
  margin-top: 20px;
}
.login-footer a {
  color: #673de6;
  font-weight: 700;
  text-decoration: none;
}
.login-footer a:hover { text-decoration: underline; }

/* ── Account Recovery — reason picker ── */
.recovery-radio-group {
  display: flex;
  flex-direction: column;
  border: 1px solid #D5DFFF;    /* from styles.css .account-recovery-reason-picker */
  border-radius: 8px;
  background: #FAFBFF;
  overflow: hidden;
}
.recovery-radio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  transition: background .15s ease;
  border-bottom: 1px solid #D5DFFF;
}
.recovery-radio:last-child { border-bottom: none; }
.recovery-radio:hover { background: rgba(103,61,230,.04); }
.recovery-radio input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: #673de6;
  flex-shrink: 0;
  cursor: pointer;
}
.recovery-radio-label {
  font-size: 14px;
  font-weight: 500;
  color: #2F1C6A;
}


/* ─────────────────────────────────────────────────────────────────────────
   PANEL HEADER
───────────────────────────────────────────────────────────────────────── */
#panel-page { display: none; min-height: 100vh; }

.panel-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5) 0 0;
  z-index: var(--z-header);
  box-shadow: var(--shadow-xs);
}

/* Left section (same width as sidebar) */
.header-brand {
  display: flex;
  align-items: center;
  width: var(--sidebar-width);
  padding: 0 var(--space-5);
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  height: 100%;
}

.header-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text);
}

/* Right section */
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.btn-refer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--transition);
  border: none;
  white-space: nowrap;
}
.btn-refer:hover { background: var(--color-primary-mid); }

/* Umi — matches project list “Ask Umi” pill (gradient + AI sparkles) */
.btn-askai {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px 0 12px;
  height: 38px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: var(--font);
  color: #fff;
  background: linear-gradient(125deg, #7c3aed 0%, #6366f1 45%, #2563eb 100%);
  box-shadow:
    0 2px 10px rgba(99, 102, 241, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: transform 0.12s, box-shadow 0.15s, filter 0.15s;
  white-space: nowrap;
}
.btn-askai:hover {
  filter: brightness(1.06);
  box-shadow:
    0 4px 16px rgba(99, 102, 241, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transform: translateY(-1px);
}
.btn-askai:active {
  transform: translateY(0);
  filter: brightness(0.98);
}
.btn-askai:focus-visible {
  outline: 2px solid #c4b5fd;
  outline-offset: 2px;
}
.btn-askai svg {
  flex-shrink: 0;
  stroke: #fff;
  color: #fff;
}

.header-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition);
}
.header-icon-btn:hover { background: var(--color-bg); color: var(--color-text); }

.user-avatar-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  cursor: pointer;
  border: none;
  font-family: var(--font);
  transition: box-shadow var(--transition);
}
.user-avatar-btn:hover { box-shadow: 0 0 0 3px var(--color-primary-mid); }

/* User dropdown header (non-interactive) */
.dropdown-user-info {
  padding: 16px 18px 12px;
  margin-bottom: 0;
  pointer-events: none;
}
.dropdown-user-name  { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.dropdown-user-email { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }

/* Wide dropdown variant */
.dropdown-menu-wide {
  min-width: 284px;
  border-radius: var(--radius-lg);
}

/* Dropdown item with right-side value (e.g. Language: English) */
.dropdown-item-meta { justify-content: flex-start; gap: 0; }
.dropdown-item-meta span:first-of-type { flex: 1 1; }
.dropdown-item-value {
  margin-left: auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-medium);
}

/* User dropdown polish */
#user-dropdown.dropdown-menu {
  padding: 6px 0;
}
#user-dropdown .dropdown-divider {
  background: var(--color-border-light);
  margin: 6px 0;
}
#user-dropdown .dropdown-item {
  padding: 12px 18px;
  gap: 12px;
  border-radius: 10px;
  margin: 2px 8px;
}
#user-dropdown .dropdown-item:hover {
  background: rgba(103, 61, 230, 0.07);
}
#user-dropdown .dropdown-item svg {
  color: var(--color-text-muted);
  flex-shrink: 0;
}
#user-dropdown .dropdown-item:hover svg {
  color: var(--color-primary);
}
#user-dropdown .dropdown-item.danger svg,
#user-dropdown .dropdown-item.danger { color: var(--color-error); }
#user-dropdown .dropdown-item.danger:hover {
  background: var(--color-error-bg);
}

/* Trailing icon/value alignment */
#user-dropdown .dropdown-item > svg + span + svg {
  margin-left: auto;
  color: var(--color-text-light);
}
#user-dropdown .dropdown-item-meta .dropdown-item-value {
  padding-left: 10px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BILLING — PAYMENT DETAILS VIEW
═══════════════════════════════════════════════════════════════════════════ */
.table-row-link { cursor: pointer; }

.payment-details-card { padding: var(--space-5); }
.payment-details-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.payment-details-meta .text-xs { line-height: 1.4; }

.payment-details-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-gap: var(--space-6);
  gap: var(--space-6);
  align-items: start;
}

.payment-summary {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.payment-summary-title {
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-3);
}
.payment-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 0;
}
.payment-summary-divider {
  height: 1px;
  background: var(--color-border);
  margin: 8px 0;
}
.payment-summary-row.total {
  font-weight: var(--font-weight-bold);
}

@media (max-width: 980px) {
  .payment-details-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BILLING — PAYMENT METHODS (LIST + DETAILS)
═══════════════════════════════════════════════════════════════════════════ */
.pm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-5) 0 var(--space-5);
}
.pm-balance {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 8px 12px;
}
.pm-balance-label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.pm-balance-amt { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.pm-balance-info {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.pm-balance-info:hover { background: var(--color-bg); border-color: var(--color-text-muted); }

.pm-alert-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  margin-bottom: var(--space-5);
}
.pm-alert-left { display: flex; align-items: center; gap: 12px; color: var(--color-text); }
.pm-check {
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-success-bg);
  color: var(--color-success-text);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.pm-list-card { padding: 0; overflow: hidden; }
.pm-list-card .card-header { padding: 14px 16px; }
.pm-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: 16px;
  background: transparent;
  border: none;
  border-top: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: background var(--transition);
}
.pm-item:first-of-type { border-top: 1px solid var(--color-border); }
.pm-item:hover { background: var(--color-bg); }
.pm-item-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pm-item-title { font-weight: var(--font-weight-semibold); letter-spacing: .01em; }
.pm-item-sub { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }
.pm-item-right { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pm-cta {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-border);
  background: var(--color-primary-light);
  border-radius: var(--radius-md);
  padding: 7px 10px;
}
.pm-chevron { color: var(--color-text-light); display: inline-flex; }
.pm-default-pill {
  margin-left: 8px;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.pm-details-card { padding: var(--space-5); max-width: 760px; }
.pm-details-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.pm-details-brand { display: inline-flex; }
.pm-details-type { font-size: var(--font-size-sm); color: var(--color-text-muted); font-weight: var(--font-weight-medium); }
.pm-details-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border-light);
}
.pm-details-key { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.pm-details-val { font-size: var(--font-size-sm); }
.pm-details-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-4);
}


/* ─────────────────────────────────────────────────────────────────────────
   SIDEBAR
───────────────────────────────────────────────────────────────────────── */
.panel-sidebar {
  position: fixed;
  left: 0;
  top: var(--header-height);
  bottom: 0;
  width: var(--sidebar-width);
  background: var(--color-sidebar-bg);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: var(--space-3) 0;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width .25s cubic-bezier(.4,0,.2,1);
  z-index: var(--z-sidebar);
}

.sidebar-nav    { flex: 1 1; padding: 0 var(--space-2); }
.sidebar-footer {
  padding: var(--space-2) var(--space-2) 0;
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2);
}

.sidebar-section-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  color: var(--color-text-light);
  padding: var(--space-3) 12px var(--space-1);
  margin-top: var(--space-2);
}

/* Nav item */
.nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  margin-bottom: 1px;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  position: relative;
}
.nav-item:hover {
  background: var(--color-bg);
  color: var(--color-text);
}
.nav-item.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}
/* Parent nav item when submenu is open — subtle highlight, not purple */
.nav-item.nav-open {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}
.nav-item.nav-open .nav-icon { opacity: 1; }

/* Left content of nav item */
.nav-item-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.nav-item-label { truncate: clip; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: .65;
  transition: opacity var(--transition);
}
.nav-item:hover  .nav-icon { opacity: 1; }
.nav-item.active .nav-icon { opacity: 1; }

/* Right side of nav item (chevron / badge) */
.nav-item-right {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}
.nav-chevron {
  color: var(--color-text-light);
  display: flex;
  align-items: center;
}


/* ─────────────────────────────────────────────────────────────────────────
   SIDEBAR SUBMENU (accordion)
───────────────────────────────────────────────────────────────────────── */

/* Submenu container — hidden by default */
.nav-submenu {
  display: none;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 4px;
  padding-left: 4px;
  overflow: hidden;
}
.nav-submenu.open { display: flex; }

/* Submenu individual item */
.nav-subitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px 11px 38px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  position: relative;
}
.nav-subitem::before {
  content: '';
  position: absolute;
  left: 20px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background var(--transition);
  flex-shrink: 0;
}
.nav-subitem:hover {
  background: var(--color-bg);
  color: var(--color-text);
}
.nav-subitem:hover::before { background: var(--color-text-muted); }

.nav-subitem.active {
  background: var(--color-bg);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}
.nav-subitem.active::before { background: var(--color-primary); }

/* Rotate chevron when parent is open */
.nav-item.nav-open .nav-chevron svg {
  transform: rotate(90deg);
  transition: transform var(--transition);
}
.nav-chevron svg { transition: transform var(--transition); }

/* ─────────────────────────────────────────────────────────────────────────
   MAIN CONTENT AREA
───────────────────────────────────────────────────────────────────────── */
.panel-main {
  margin-left: var(--sidebar-width);
  margin-top: var(--header-height);
  padding: var(--space-8) var(--space-8);
  min-height: calc(100vh - var(--header-height));
}

/* Page wrapper */
.page { display: none; }
.page.visible { display: block; }
.page-hidden  { display: none !important; }

/* Page title block */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-7);
  gap: var(--space-4);
}
.page-title    { font-size: var(--font-size-2xl); font-weight: var(--font-weight-extrabold); margin-bottom: var(--space-1); letter-spacing: var(--letter-spacing-tight); }
.page-subtitle { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.page-header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }


/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .panel-sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: var(--shadow-lg);
  }
  .panel-sidebar.sidebar-open { transform: translateX(0); }
  .panel-main { margin-left: 0; padding: var(--space-5) var(--space-4); }
  .header-brand { border-right: none; width: auto; padding: 0 var(--space-4); }
  .billing-grid { grid-template-columns: 1fr; }
  .page-title { font-size: var(--font-size-xl); }
}

@media (max-width: 600px) {
  .auth-logo { padding: 12px 16px; position: fixed; }
  .login-card { padding: 32px 24px; width: 100%; }
  .panel-main { padding: var(--space-4) var(--space-3); }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .header-actions .btn-refer { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   KODEE — ASK AI SLIDE-IN PANEL
═══════════════════════════════════════════════════════════════════════════ */

/* Backdrop is invisible — no dim overlay, just like the real hPanel */
.kodee-backdrop { display: none; }

/* When Umi panel is open, push main content left so it's not hidden behind the panel */
.panel-main {
  transition: margin-right .25s cubic-bezier(.4,0,.2,1),
              margin-left  .25s cubic-bezier(.4,0,.2,1);
}
.panel-main.kodee-active {
  margin-right: 460px;
}
.panel-main.kodee-active.kodee-panel-margin-wide {
  margin-right: 560px;
}

.kodee-panel {
  position: fixed;
  top: var(--header-height);   /* starts right below the header */
  right: 0;
  bottom: 0;
  width: 460px;
  max-width: calc(100vw - var(--sidebar-width));
  background: var(--color-white);
  border-left: 1px solid var(--color-border);
  z-index: 49;                 /* below header (z-header: 50) */
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1), width .22s ease;
  box-shadow: -4px 0 24px rgba(0,0,0,.08);
}
.kodee-panel--expanded {
  width: 560px;
  max-width: min(560px, calc(100vw - var(--sidebar-width)));
}
.kodee-panel.open { transform: translateX(0); }

/* Header */
.kodee-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.kodee-tabs { display: flex; gap: 4px; }
.kodee-tab {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  border: none;
  background: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  font-family: var(--font);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background var(--transition), color var(--transition);
}
.kodee-tab:hover {
  background: var(--color-bg);
  color: var(--color-text);
}
.kodee-header-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

/* Tabs — reference: icon + label, active = purple */
.kodee-tab-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.kodee-tab-icon {
  flex-shrink: 0;
  opacity: 0.55;
}
.kodee-tab.active {
  background: rgba(103, 61, 230, 0.1);
  color: var(--color-primary, #673de6);
  font-weight: var(--font-weight-semibold);
}
.kodee-tab.active .kodee-tab-icon {
  opacity: 1;
  color: var(--color-primary, #673de6);
}
.kodee-tab:not(.active):hover .kodee-tab-icon {
  opacity: 0.85;
}

/* Chat pane */
.kodee-pane {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Chat tab: scroll middle, composer docked at bottom (matches reference UI) */
.kodee-pane--chat {
  flex: 1 1;
  min-height: 0;
  overflow: hidden !important;
  display: flex;
  flex-direction: column;
}
.kodee-pane-chat-scroll {
  flex: 1 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

/* Greeting */
.kodee-greeting {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5) var(--space-5);
  text-align: center;
}
.kodee-logo { margin-bottom: var(--space-4); }
.kodee-greeting-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-1);
}
.kodee-greeting-sub { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.kodee-greeting--compact {
  flex: 0 0 auto;
  justify-content: flex-start;
  padding: var(--space-5) var(--space-5) var(--space-2);
}
.kodee-logo--umi { margin-bottom: var(--space-2); }
.kodee-logo--umi svg { display: block; }

/* Umi chat home — reference layout */
.kodee-greeting--umi-home {
  align-items: center;
  text-align: center;
  padding-top: var(--space-4);
}
.kodee-greeting--umi-home .kodee-greeting-title {
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}
.kodee-greeting--umi-home .kodee-greeting-sub {
  max-width: 22rem;
  margin: 0 auto;
  line-height: 1.5;
}

.kodee-project-bar--home {
  background: var(--color-white, #fff);
  border: 1px solid #e8e8ed;
  border-radius: 14px;
  padding: 11px 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.kodee-project-bar-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(103, 61, 230, 0.12);
  flex-shrink: 0;
  color: var(--color-primary, #673de6);
}
.kodee-project-bar--home .kodee-project-bar-icon {
  color: inherit;
}
.kodee-project-bar-chevron {
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0.5;
  color: var(--color-text-muted);
}

.kodee-pills--umi-home {
  border: none;
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
  gap: 8px;
}
.kodee-pills--umi-home .kodee-pill {
  background: var(--color-white, #fff);
}

.umi-try-card {
  margin: var(--space-2) var(--space-5) var(--space-4);
  border: 1px solid #ececf1;
  border-radius: 14px;
  background: var(--color-white, #fff);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.kodee-suggestions-label--card {
  padding: 12px 14px 6px;
  margin: 0;
}
.kodee-suggestions--umi-card.kodee-suggestions--compact {
  margin: 0;
  padding-bottom: 0;
}
.kodee-suggestions--umi-card.kodee-suggestions--compact .kodee-suggestion {
  margin: 0;
  padding: 14px 16px;
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid #ececf1;
  font-size: 13px;
}
.kodee-suggestions--umi-card.kodee-suggestions--compact .kodee-suggestion:last-child {
  border-bottom: none;
}
.kodee-suggestions--umi-card .kodee-suggestion:hover {
  background: rgba(103, 61, 230, 0.05);
}
.kodee-suggestion-arrow {
  color: var(--color-primary, #673de6);
  flex-shrink: 0;
}
.kodee-suggestions--umi-card .kodee-suggestion span {
  flex: 1 1;
  text-align: left;
}

.kodee-project-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 2 * var(--space-5));
  max-width: 100%;
  margin: 0 var(--space-5) var(--space-3);
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  font-size: 13px;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.kodee-project-bar:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.kodee-project-bar-icon {
  flex-shrink: 0;
  color: var(--color-primary);
}
.kodee-project-bar-label {
  font-weight: 600;
  flex: 1 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kodee-project-chips-wrap {
  padding: 0 var(--space-5) var(--space-2);
  flex-shrink: 0;
}
.kodee-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.kodee-chip-row:last-child { margin-bottom: 0; }

.kodee-suggestions-label {
  margin: 0;
  padding: var(--space-2) var(--space-5) var(--space-1);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* Suggestions */
.kodee-suggestions {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.kodee-suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 13px var(--space-5);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-family: var(--font);
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.kodee-suggestion:hover { background: var(--color-bg); }
.kodee-suggestion svg { color: var(--color-text-muted); flex-shrink: 0; }

.kodee-chip-row .kodee-suggestion {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  border-bottom: 1px solid var(--color-border);
  font-size: 12px;
}
.kodee-chip-row .kodee-suggestion:hover {
  background: var(--color-primary-light);
}

/* Unified project section */
#umi-project-section {
  padding: 0 var(--space-5) var(--space-2);
  flex-shrink: 0;
}
.umi-project-selector-wrap {
  position: relative;
}
.umi-pick-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, #888);
}
/* Project dropdown */
.umi-project-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1.5px solid #d8d0f8;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(103,61,230,0.12);
  z-index: 200;
  padding: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.umi-pick-projects-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.umi-pick-project-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: background 0.15s;
}
.umi-pick-project-card:hover {
  background: #f0ecfd;
}
.umi-pick-card-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #ddd6fe;
  color: #6c47e8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.umi-pick-card-name {
  flex: 1 1;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text, #1a1a2e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.umi-pick-card-chevron {
  flex-shrink: 0;
  color: #8b6ef5;
}

/* The unified always-visible project selector card */
.umi-project-selector-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: #f5f3ff;
  border: 1.5px solid #d8d0f8;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  transition: background 0.15s, border-color 0.15s;
}
.umi-project-selector-card:hover {
  background: #ede9fa;
  border-color: #8b6ef5;
}
.umi-pick-card-name--placeholder {
  color: var(--color-text-muted, #94a3b8) !important;
  font-weight: 400 !important;
}

/* Keep old chip class for any legacy use */
.umi-proj-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface, #fff);
  font-size: 13px;
  font-family: var(--font);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.umi-proj-chip:hover {
  background: var(--color-primary-light, #ede9ff);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
#umi-pick-section .kodee-suggestions-label {
  padding-left: 0;
}
#umi-pick-section #kodee-project-suggestions {
  padding: 0;
  flex-wrap: wrap;
  gap: 8px;
}
#umi-active-section .kodee-project-bar--home {
  margin: 4px var(--space-5) var(--space-3);
}

.kodee-suggestions--compact {
  border-top: none;
  padding-bottom: var(--space-2);
}
.kodee-suggestions--compact .kodee-suggestion {
  margin: 0 var(--space-5);
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: 11px var(--space-1) 11px var(--space-4);
}
.kodee-suggestions--compact .kodee-suggestion:last-child {
  border-bottom: none;
}

/* Category pills */
.kodee-pills {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.kodee-pill {
  padding: 5px 12px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-family: var(--font);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.kodee-pill.active  { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-light); }
.kodee-pill:hover   { border-color: var(--color-primary); color: var(--color-primary); }

.kodee-project-context {
  margin: 0 var(--space-5) var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.kodee-project-context-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.kodee-project-context-label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.kodee-active-project-name {
  flex: 1 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}
.kodee-project-context-hint { margin: 8px 0 0; line-height: 1.45; }
.kodee-suggestion--active {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: var(--color-primary-light) !important;
}
.kodee-history-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 10px var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.kodee-history-toolbar-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}
.kodee-history-shell {
  flex: 1 1;
  min-height: 0;
}
.kodee-msg-user-wrap {
  margin-bottom: var(--space-3);
  align-self: flex-end;
  max-width: 92%;
}
.kodee-msg-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.kodee-msg-edit-btn {
  border: none;
  background: none;
  color: var(--color-primary);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  padding: 2px 6px;
}
.kodee-msg-edit-btn:hover { text-decoration: underline; }
.kodee-msg-edit-ta {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: var(--font-size-sm);
}
.kodee-msg-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Input area — docked at bottom of Umi panel */
.kodee-input-area {
  padding: var(--space-4) var(--space-5) var(--space-5);
  flex-shrink: 0;
  border-top: 1px solid var(--color-border);
  background: var(--color-white, #fff);
  margin-top: auto;
}
.kodee-input-wrap {
  position: relative;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.kodee-input-wrap:focus-within { border-color: var(--color-primary); }
/* Reference: prominent purple frame + soft corner pill */
.kodee-input-wrap--umi {
  border: 2px solid var(--color-primary, #673de6);
  border-radius: 22px;
  background: var(--color-white, #fff);
  box-shadow: 0 1px 0 rgba(103, 61, 230, 0.06);
}
.kodee-input-wrap--umi:focus-within {
  border-color: var(--color-primary, #673de6);
  box-shadow: 0 0 0 3px rgba(103, 61, 230, 0.12);
}
.kodee-input {
  width: 100%;
  border: none;
  outline: none;
  padding: 14px 16px 52px 16px;
  font-size: var(--font-size-sm);
  font-family: var(--font);
  resize: none;
  background: none;
  color: var(--color-text);
  line-height: var(--line-height);
  box-sizing: border-box;
}
.kodee-input-actions {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 10px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}
.kodee-input-actions > * {
  pointer-events: auto;
}
.kodee-input-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kodee-attach-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-bg, #f4f4f5);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.kodee-attach-btn:hover {
  background: var(--color-border);
  color: var(--color-text);
}
.kodee-mic-btn {
  position: static;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-white, #fff);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.kodee-mic-btn:hover {
  background: var(--color-bg, #f4f4f5);
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.kodee-input-wrap--umi .kodee-mic-btn {
  border-color: #e4e4e7;
  background: #fafafa;
}
.kodee-send-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary, #673de6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition), transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(103, 61, 230, 0.35);
}
.kodee-send-btn:hover {
  background: #5a32d4;
  transform: scale(1.03);
}
.kodee-send-btn:active { transform: scale(0.98); }
.kodee-send-btn svg {
  stroke: #fff;
  color: #fff;
}
.kodee-disclaimer {
  font-size: 11px;
  color: var(--color-text-light);
  text-align: center;
  margin-top: var(--space-2);
}

/* Voice listening (Ask AI / Umi) */
.kodee-voice-listening-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px 16px;
  background: var(--color-surface, #fff);
  margin-bottom: 0;
}
.kodee-voice-listening-panel[hidden] {
  display: none !important;
}
.kodee-voice-listening-title {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-muted);
  font-weight: 500;
}
.kodee-voice-live-text {
  margin: 0;
  min-height: 1.25em;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.45;
}
.kodee-voice-listening-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 4px;
}
.kodee-voice-wave {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1;
  min-width: 0;
  margin-right: auto;
}
.kodee-voice-bar {
  width: 5px;
  border-radius: 3px;
  background: var(--color-primary, #6b4ce6);
  animation: kodee-voice-bar-pulse 0.85s ease-in-out infinite alternate;
}
.kodee-voice-bar--a {
  height: 22px;
  animation-delay: 0s;
}
.kodee-voice-bar--b {
  height: 32px;
  animation-delay: 0.12s;
}
.kodee-voice-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-left: 4px;
}
.kodee-voice-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary, #6b4ce6);
  opacity: 0.35;
  animation: kodee-voice-dot 1s ease-in-out infinite;
}
.kodee-voice-dots span:nth-child(1) { animation-delay: 0s; }
.kodee-voice-dots span:nth-child(2) { animation-delay: 0.1s; }
.kodee-voice-dots span:nth-child(3) { animation-delay: 0.2s; }
.kodee-voice-dots span:nth-child(4) { animation-delay: 0.3s; }
.kodee-voice-dots span:nth-child(5) { animation-delay: 0.4s; }
.kodee-voice-dots span:nth-child(6) { animation-delay: 0.5s; }
@keyframes kodee-voice-bar-pulse {
  from { transform: scaleY(0.45); opacity: 0.55; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes kodee-voice-dot {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}
.kodee-voice-cancel-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.kodee-voice-cancel-btn:hover {
  background: var(--color-bg, #f4f4f6);
}
.kodee-voice-sendround-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--color-primary, #6b4ce6);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(107, 76, 230, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kodee-voice-sendround-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(107, 76, 230, 0.42);
}
.kodee-input-area.kodee-input-area--listening {
  border-top-color: var(--color-primary-mid, #c4b5fd);
}

/* History list */
.kodee-history-list {
  flex: 1 1;
  overflow-y: auto;
  padding: var(--space-2) 0;
}
.kodee-history-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 13px var(--space-5);
  cursor: pointer;
  transition: background var(--transition);
  border-bottom: 1px solid var(--color-border);
}
.kodee-history-item:hover { background: var(--color-bg); }
.kodee-history-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
}
.kodee-avatar-ai {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border: 1px solid var(--color-primary-mid);
}
.kodee-history-body { flex: 1 1; min-width: 0; }
.kodee-history-preview {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kodee-history-meta { display: flex; align-items: center; gap: var(--space-2); margin-top: 4px; }
.kodee-history-time { font-size: 11px; color: var(--color-text-muted); margin-left: auto; }

/* Tell us about yourself overlay */
.kodee-intro-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: flex-end;
  z-index: 10;
}
.kodee-intro-card {
  background: var(--color-white);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: var(--space-6);
  width: 100%;
  position: relative;
}
.kodee-intro-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: var(--radius-sm);
}
.kodee-intro-close:hover { background: var(--color-bg); color: var(--color-text); }
.kodee-intro-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); margin-bottom: var(--space-4); }


/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR — COLLAPSED (icon + mini-label) mode  [active on Profile page]
═══════════════════════════════════════════════════════════════════════════ */
#panel-page.sidebar-collapsed .panel-sidebar {
  width: var(--sidebar-collapsed-width);
  align-items: center;
}

/* Nav item becomes a column: icon on top, mini label below */
#panel-page.sidebar-collapsed .nav-item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  position: relative;
}

/* Hide text nodes inside nav-item-inner (the "Home", "Websites" bare text) */
#panel-page.sidebar-collapsed .nav-item-inner {
  font-size: 0;
  gap: 0;
  justify-content: center;
}
#panel-page.sidebar-collapsed .nav-icon {
  font-size: initial;
  opacity: .75;
}

/* Always-visible mini label below icon via ::after */
#panel-page.sidebar-collapsed .nav-item[data-label]::after {
  content: attr(data-label);
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  max-width: calc(var(--sidebar-collapsed-width) - 8px);
  text-align: center;
  pointer-events: none;
}
/* Active / hover state for mini label */
#panel-page.sidebar-collapsed .nav-item.active::after,
#panel-page.sidebar-collapsed .nav-item:hover::after  { color: var(--color-text); }
#panel-page.sidebar-collapsed .nav-item.active::after { color: var(--color-primary); }

/* Hide right-side decorations */
#panel-page.sidebar-collapsed .nav-item-right,
#panel-page.sidebar-collapsed .nav-chevron,
#panel-page.sidebar-collapsed .nav-submenu,
#panel-page.sidebar-collapsed .sidebar-nav .badge { display: none !important; }
#panel-page.sidebar-collapsed .sidebar-nav    { padding: 0 4px; }
#panel-page.sidebar-collapsed .sidebar-footer { padding: var(--space-2) 4px 0; }

/* Main content shifts right to make room for collapsed sidebar + profile subnav */
#panel-page.sidebar-collapsed .panel-main {
  margin-left: calc(var(--sidebar-collapsed-width) + var(--profile-subnav-width));
}

/* Profile subnav becomes a fixed second sidebar */
#panel-page.sidebar-collapsed .profile-subnav {
  position: fixed;
  left: var(--sidebar-collapsed-width);
  top: var(--header-height);
  width: var(--profile-subnav-width);
  height: calc(100vh - var(--header-height));
  overflow-y: auto;
  z-index: 38;
  background: var(--color-white);
  border-right: 1px solid var(--color-border);
  border-radius: 0;
  border-top: none;
  border-bottom: none;
  border-left: none;
  padding: var(--space-5) var(--space-3) var(--space-5);
}

/* Profile layout no longer needs its first 220px column — subnav is fixed */
#panel-page.sidebar-collapsed .profile-layout {
  grid-template-columns: 1fr;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PROFILE — INNER LAYOUT
═══════════════════════════════════════════════════════════════════════════ */

.profile-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-gap: var(--space-6);
  gap: var(--space-6);
  align-items: flex-start;
}

.profile-subnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-3);
}
.profile-subnav-title {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-light);
  padding: 2px 10px 10px;
}
.profile-subnav-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 10px 12px;
  border-radius: var(--radius-lg);
  border: none;
  background: none;
  font-family: var(--font);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition), color var(--transition);
  width: 100%;
}
.profile-subnav-item:hover { background: var(--color-bg); color: var(--color-text); }
.profile-subnav-item.active {
  background: rgba(103, 61, 230, 0.10);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}
.profile-subnav-item svg { flex-shrink: 0; opacity: .6; }
.profile-subnav-item.active svg { opacity: 1; }

/* Profile detail row (used in account-info) */
.profile-detail-row {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  gap: var(--space-4);
}
.profile-detail-row:last-child { border-bottom: none; }
.profile-detail-row.clickable { cursor: pointer; transition: background var(--transition); border-radius: var(--radius-sm); }
.profile-detail-row.clickable:hover { background: var(--color-bg); }
.profile-key {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  min-width: 200px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.profile-val {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
  flex: 1 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Breadcrumb */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  flex-wrap: wrap;
}
.breadcrumb-item {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-muted);
  font-family: var(--font);
  font-size: var(--font-size-xs);
  transition: color var(--transition), background var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.breadcrumb-item[aria-label="Home"]{
  padding: 5px 6px;
  border-radius: 10px;
}
.breadcrumb-item:hover { color: var(--color-primary); }
.breadcrumb-item.active { color: var(--color-text); font-weight: var(--font-weight-semibold); cursor: default; }
.breadcrumb-item.active:hover { color: var(--color-text); }
.breadcrumb-sep { color: var(--color-text-light); font-size: 12px; }

/* Notification checkboxes */
.notif-check {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ── Table toolbar (search bar + checkbox above table) ─────────────────── */
.table-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.table-toolbar .form-input {
  min-width: 0;
  flex: 1 1;
  max-width: 380px;
}

/* Search input with icon inside */
.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-input-wrap > svg {
  position: absolute;
  left: 12px;
  color: var(--color-text-light);
  pointer-events: none;
  flex-shrink: 0;
}
.search-input-wrap > .form-input {
  padding-left: 36px;
  width: 100%;
}

/* ── Table pagination row ──────────────────────────────────────────────── */
.table-pagination {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-white);
  flex-wrap: wrap;
}
.table-pagination .pg-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.table-pagination .pg-select {
  height: 30px;
  padding: 0 28px 0 10px;
  font-size: var(--font-size-xs);
  font-family: var(--font);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2358585e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.table-pagination .pg-select:focus { outline: none; border-color: var(--color-primary); }
.table-pagination .pg-count {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  margin-left: auto;
}
.table-pagination .pg-nav {
  display: flex;
  gap: 2px;
}
.table-pagination .pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-text-muted);
  font-size: 14px;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.table-pagination .pg-btn:hover:not(:disabled) {
  background: var(--color-bg);
  border-color: var(--color-neutral-300);
  color: var(--color-text);
}
.table-pagination .pg-btn:disabled {
  opacity: .4;
  cursor: default;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BILLING — SLIM TOGGLE SWITCH
   Mirrors Hostinger's .switch.switch--slim style
═══════════════════════════════════════════════════════════════════════════ */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--color-neutral-300);
  border-radius: var(--radius-full);
  transition: background .2s ease;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  height: 12px;
  width: 12px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.18);
}
.toggle-switch input:checked + .toggle-slider { background: var(--color-primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(14px); }
.toggle-switch input:disabled + .toggle-slider { opacity: .6; cursor: default; }

/* Section heading on marketplace / other pages */
.section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}


/* ═══════════════════════════════════════════════════════════════════════════
   MARKETPLACE
═══════════════════════════════════════════════════════════════════════════ */

.marketplace-filters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.mkt-filter {
  padding: 6px 15px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  font-size: var(--font-size-sm);
  font-family: var(--font);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all var(--transition);
}
.mkt-filter.active  { background: var(--color-primary-light); border-color: var(--color-primary); color: var(--color-primary); }
.mkt-filter:hover   { border-color: var(--color-primary); color: var(--color-primary); }

.mkt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: var(--space-5);
  gap: var(--space-5);
}
.mkt-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: box-shadow var(--transition), transform var(--transition);
}
.mkt-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.mkt-card-badge {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  z-index: 1;
}
.mkt-badge-purple { background: var(--color-primary-light); color: var(--color-primary); }
.mkt-badge-green  { background: var(--color-success-bg);    color: var(--color-success);  }
.mkt-card-img {
  height: 130px;
  overflow: hidden;
  flex-shrink: 0;
}
.mkt-card-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  flex: 1 1;
  gap: var(--space-2);
}
.mkt-card-title  { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
.mkt-card-desc   { font-size: var(--font-size-sm);   color: var(--color-text-muted); flex: 1 1; line-height: var(--line-height); }

@media (max-width: 900px) {
  .profile-layout { grid-template-columns: 1fr; }
  .kodee-panel    { width: 100vw; }
  .panel-main.kodee-active.kodee-panel-margin-wide { margin-right: 0; }
  .mkt-grid       { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .mkt-grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FAQ ACCORDION
═══════════════════════════════════════════════════════════════════════════ */

.faq-item { }
.faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-5);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  text-align: left;
  gap: var(--space-4);
  transition: background var(--transition);
}
.faq-btn:hover { background: var(--color-bg); }
.faq-chevron { flex-shrink: 0; transition: transform .2s ease; color: var(--color-text-muted); }
.faq-btn.open .faq-chevron { transform: rotate(180deg); }
.faq-body { padding: 0 var(--space-5) var(--space-5); }
.faq-body p { margin: 0; line-height: var(--line-height-loose); }


/* ═══════════════════════════════════════════════════════════════════════════
   API MCP STEPS
═══════════════════════════════════════════════════════════════════════════ */

.api-step-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.api-step-warn { background: var(--color-warning-bg); }
.api-step-success { background: var(--color-success-bg); }
.api-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-text-muted);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.api-step-num-warn { background: var(--color-warning); }


/* ═══════════════════════════════════════════════════════════════════════════
   NEXOS ARTICLE CARD
═══════════════════════════════════════════════════════════════════════════ */

.nexos-article-card {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-white);
  transition: box-shadow var(--transition), border-color var(--transition);
}
.nexos-article-card:hover { box-shadow: var(--shadow-sm); border-color: var(--color-primary-border); }


/* ═══════════════════════════════════════════════════════════════════════════
   KODEE — SINGLE CONVERSATION VIEW
═══════════════════════════════════════════════════════════════════════════ */
.kodee-convo-back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.kodee-convo-back-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  color: var(--color-text);
}
.kodee-convo-messages {
  flex: 1 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* User bubble */
.kodee-msg-user {
  align-self: flex-end;
  max-width: 80%;
  background: var(--color-neutral-100);
  color: var(--color-text);
  border-radius: 18px 18px 4px 18px;
  padding: 10px 14px;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}
/* AI response */
.kodee-msg-ai { align-self: flex-start; max-width: 100%; }
.kodee-msg-ai-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.kodee-msg-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kodee-msg-ai-name {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}
.kodee-msg-ai-body {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text);
  background: none;
}
.kodee-msg-actions {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-2);
}
.kodee-thumbs {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color var(--transition), border-color var(--transition);
  display: flex;
  align-items: center;
}
.kodee-thumbs:hover { color: var(--color-primary); border-color: var(--color-primary); }
/* Rating footer */
.kodee-convo-footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  background: var(--color-white);
  flex-shrink: 0;
}
.kodee-convo-feedback-title {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}
.kodee-star-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--space-3);
}
.kodee-star {
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  color: var(--color-border);
  transition: color .15s, transform .1s;
  line-height: 1;
}
.kodee-star.active { color: #f59e0b; }
.kodee-star:hover  { transform: scale(1.2); }
.kodee-convo-thanks {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
/* Clickable history items */
.kodee-history-item { cursor: pointer; transition: background var(--transition); }
.kodee-history-item:hover { background: var(--color-hover); }

/* ── Umi inline chat section ───────────────────────────────────────────── */
#umi-chat-section {
  display: none;
  flex-direction: column;
  flex: 1 1;
  overflow: hidden;
  min-height: 0;
}
.umi-chat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-white, #fff);
}
.umi-chat-project-label {
  flex: 1 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.umi-chat-back-btn,
.umi-chat-new-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 6px;
  transition: color var(--transition), background var(--transition);
}
.umi-chat-back-btn:hover,
.umi-chat-new-btn:hover { color: var(--color-primary); background: var(--color-primary-light, #ede9ff); }

.umi-chat-messages {
  flex: 1 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.umi-bubble-wrap {
  display: flex;
  flex-direction: column;
}
.umi-bubble-wrap--user { align-items: flex-end; }
.umi-bubble-wrap--assistant { align-items: flex-start; }

.umi-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.umi-bubble--user {
  background: var(--color-primary, #673de6);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.umi-bubble--assistant {
  background: var(--color-bg, #f4f4f5);
  color: var(--color-text);
  border-bottom-left-radius: 4px;
  border: 1px solid var(--color-border);
}

/* Rendered Markdown inside assistant bubbles */
.umi-bubble--assistant:has(.umi-md) {
  white-space: normal;
}
.umi-md {
  font-size: inherit;
  line-height: 1.55;
}
.umi-md > *:first-child {
  margin-top: 0;
}
.umi-md > *:last-child {
  margin-bottom: 0;
}
.umi-md h2 {
  margin: 0.75em 0 0.4em;
  font-size: 1.05em;
  font-weight: 700;
  color: var(--color-text, #1a1a2e);
}
.umi-md h3 {
  margin: 0.65em 0 0.35em;
  font-size: 1em;
  font-weight: 650;
  color: var(--color-text, #1a1a2e);
}
.umi-md p {
  margin: 0.45em 0;
}
.umi-md ul,
.umi-md ol {
  margin: 0.45em 0;
  padding-left: 1.35em;
}
.umi-md li {
  margin: 0.2em 0;
}
.umi-md hr,
.umi-md-hr {
  border: none;
  border-top: 1px solid var(--color-border, #e4e4e7);
  margin: 0.85em 0;
}
.umi-md a {
  color: var(--color-primary, #673de6);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.umi-md a:hover {
  text-decoration-thickness: 2px;
}
.umi-md-pre {
  margin: 0.55em 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--color-border, #e4e4e7);
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.45;
}
.umi-md-code,
.umi-md-code-inline {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.umi-md-code-inline {
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.06);
  font-size: 0.92em;
}

/* Typing indicator */
.umi-bubble--typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 12px 16px;
  min-width: 56px;
}
.umi-typing-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-muted, #94a3b8);
  animation: umi-typing-bounce 1.2s infinite ease-in-out;
  flex-shrink: 0;
}
.umi-typing-dot:nth-child(1) { animation-delay: 0s; }
.umi-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.umi-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes umi-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40%           { transform: translateY(-6px); opacity: 1; }
}

/* ── History: new project card design ─────────────────────────────────── */
.umi-hist-project-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-border, #e9eaec);
  background: #fff;
  transition: background 0.15s;
}
.umi-hist-project-card:hover { background: #fafafb; }
.umi-hist-project-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ede9fa;
  color: #6c47e8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.umi-hist-project-info {
  flex: 1 1;
  min-width: 0;
}
.umi-hist-project-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text, #1a1a2e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.umi-hist-project-meta {
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.umi-hist-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #555;
  background: #f1f0f5;
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}
.umi-hist-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #6c47e8;
  flex-shrink: 0;
}
.umi-hist-open-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: #6c47e8;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 8px;
  border-radius: 6px;
  transition: background 0.15s;
  white-space: nowrap;
}
.umi-hist-open-btn:hover { background: #ede9fa; }

/* History header */
.umi-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--color-border, #e9eaec);
  flex-shrink: 0;
}
.umi-history-header-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text, #1a1a2e);
}
.umi-history-allprojects-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: #6c47e8;
  background: #f4f2fd;
  border: 1px solid #ddd4fa;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background 0.15s;
}
.umi-history-allprojects-btn:hover { background: #ede9fa; }

/* History footer hint */
.umi-history-footer-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  margin-top: auto;
  font-size: 12px;
  color: #888;
  line-height: 1.55;
  border-top: 1px solid var(--color-border, #e9eaec);
}
.umi-history-footer-hint svg { flex-shrink: 0; margin-top: 1px; color: #6c47e8; }

/* ── Collapsible quick menu ────────────────────────────────────────────── */
.umi-quick-menu {
  overflow: hidden;
  transition: max-height 0.28s ease, opacity 0.22s ease;
  max-height: 400px;
  opacity: 1;
}
.umi-quick-menu--collapsed {
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.umi-quick-menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #888;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 12px 8px;
  width: 100%;
  justify-content: center;
  transition: color 0.15s;
}
.umi-quick-menu-toggle:hover { color: #6c47e8; }
.umi-qm-chevron {
  transition: transform 0.25s ease;
}
.umi-quick-menu-toggle[aria-expanded="false"] .umi-qm-chevron {
  transform: rotate(180deg);
}

/* ── CEPCON construction loader (girder + crane) ─────────────────────────── */
@keyframes cepc-loader-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}
@keyframes cepc-loader-crane {
  0% {
    transform: rotate(-7deg);
  }
  100% {
    transform: rotate(9deg);
  }
}
.cepc-inline-svg .cepc-loader-bob {
  animation: cepc-loader-bob 1.25s ease-in-out infinite;
  transform-origin: 36px 52px;
}
.cepc-inline-svg .cepc-loader-crane {
  animation: cepc-loader-crane 1.65s ease-in-out infinite alternate;
  transform-origin: 44px 22px;
}
.cepc-inline-svg {
  display: block;
  flex-shrink: 0;
}
img.cepc-loader-img-thumb,
img.cepc-loader-img-global {
  display: block;
  flex-shrink: 0;
  animation: cepc-loader-bob 1.25s ease-in-out infinite;
}
.cepc-global-loader {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.35);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}
.cepc-global-loader[hidden] {
  display: none !important;
}
.cepc-global-loader__card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 32px 24px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  text-align: center;
  max-width: 320px;
}
.cepc-global-loader__msg {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text, #1e293b);
}
.cepc-next-boot-loader {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}
.cepc-next-boot-loader p {
  margin: 0;
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}
.cepc-upload-progress-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.cepc-upload-progress-row .proj-progress-bar {
  flex: 1 1;
  margin-top: 0;
}
.cepc-file-loading {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted, #64748b);
  font-size: 13px;
}

/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/hpanel/pages.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
/* ═══════════════════════════════════════════════════════════════════════════
   PAGES.CSS
   Styles scoped to individual dashboard pages / sections.
   Each section is clearly labelled.
═══════════════════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────────────────
   HOME  (#page-home) — classic hero; generic grids below shared with other pages.
───────────────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────────────────
   HOME  (#page-home) — hero + stats (classic layout)
───────────────────────────────────────────────────────────────────────── */
.home-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, #8b5cf6 55%, #a78bfa 100%);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-10);
  color: #fff;
  margin-bottom: var(--space-7);
  position: relative;
  overflow: hidden;
}
.home-hero::before,
.home-hero::after {
  content: '';
  position: absolute;
  border-radius: var(--radius-full);
  pointer-events: none;
}
.home-hero::before {
  width: 220px; height: 220px;
  right: -50px; top: -50px;
  background: rgba(255,255,255,.08);
}
.home-hero::after {
  width: 160px; height: 160px;
  right: 80px; bottom: -60px;
  background: rgba(255,255,255,.06);
}
.home-hero h2   { font-size: 22px; font-weight: var(--font-weight-extrabold); margin-bottom: var(--space-2); }
.home-hero p    { font-size: var(--font-size-base); opacity: .9; margin-bottom: var(--space-6); max-width: 520px; }

/* Stats row */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  grid-gap: var(--space-4);
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.stat-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: box-shadow var(--transition);
}
.stat-card:hover { box-shadow: var(--shadow-md); }

.stat-value {
  font-size: 30px;
  font-weight: var(--font-weight-extrabold);
  letter-spacing: var(--letter-spacing-tight);
  line-height: 1;
}
.stat-label  { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.stat-change {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  display: flex;
  align-items: center;
  gap: 3px;
}
.stat-change-up   { color: var(--color-success); }
.stat-change-down { color: var(--color-error); }

/* Quick-access cards */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-gap: var(--space-3);
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}

.service-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.service-card:hover {
  border-color: var(--color-primary-border);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}
.service-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-size: 20px;
}
.service-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.service-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Section heading (reusable within pages) */
.section-heading {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-4);
}

/* ─────────────────────────────────────────────────────────────────────────
   WEBSITES  (#page-websites)
───────────────────────────────────────────────────────────────────────── */
.website-list { display: flex; flex-direction: column; gap: var(--space-3); }

.website-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: box-shadow var(--transition);
}
.website-item:hover { box-shadow: var(--shadow-md); }

.website-item-left   { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.website-favicon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.website-domain { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
.website-plan   { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 2px; }
.website-usage  { margin-top: var(--space-2); width: 200px; }

.website-item-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }


/* ─────────────────────────────────────────────────────────────────────────
   DOMAINS  (#page-domains)
───────────────────────────────────────────────────────────────────────── */
/* Domain list uses the .table-wrap / .table components directly */


/* ─────────────────────────────────────────────────────────────────────────
   EMAILS  (#page-emails)
───────────────────────────────────────────────────────────────────────── */
.email-list { display: flex; flex-direction: column; gap: var(--space-3); }

.email-item {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: box-shadow var(--transition);
}
.email-item:hover { box-shadow: var(--shadow-md); }
.email-item-left  { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.email-address    { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.email-meta       { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 2px; }
.email-item-right { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }


/* ─────────────────────────────────────────────────────────────────────────
   VPS  (#page-vps)
───────────────────────────────────────────────────────────────────────── */
.vps-list { display: flex; flex-direction: column; gap: var(--space-5); }

.vps-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: box-shadow var(--transition);
}
.vps-card:hover { box-shadow: var(--shadow-md); }

.vps-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.vps-card-info { display: flex; align-items: center; gap: var(--space-3); }
.vps-hostname  { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); }
.vps-location  { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-top: 2px; }
.vps-card-actions { display: flex; align-items: center; gap: var(--space-2); }

.vps-specs-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: var(--space-4);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.vps-spec-label { font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: var(--font-weight-semibold); margin-bottom: var(--space-1); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); }
.vps-spec-value { font-size: var(--font-size-lg); font-weight: var(--font-weight-extrabold); }

.vps-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: var(--space-5);
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}
.vps-metric-label { display: flex; justify-content: space-between; font-size: var(--font-size-sm); margin-bottom: var(--space-2); }
.vps-metric-name  { color: var(--color-text-muted); }
.vps-metric-value { font-weight: var(--font-weight-semibold); }

.vps-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.vps-footer-item { display: flex; align-items: center; gap: var(--space-2); }
.vps-ip {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  background: var(--color-bg);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}


/* ─────────────────────────────────────────────────────────────────────────
   BILLING  (#page-billing)
───────────────────────────────────────────────────────────────────────── */
.billing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: var(--space-5);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.plan-name  { font-size: 24px; font-weight: var(--font-weight-extrabold); color: var(--color-primary); margin-bottom: var(--space-1); }
.plan-meta  { font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.plan-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-sm);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-light);
}
.plan-detail-row:last-child { border-bottom: none; }
.plan-detail-key { color: var(--color-text-muted); }
.plan-detail-val { font-weight: var(--font-weight-semibold); }

.payment-card-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition);
}
.payment-card-item.is-default { border-color: var(--color-primary); background: var(--color-primary-light); }
.payment-card-item:hover:not(.is-default) { border-color: var(--color-text-muted); }

.payment-card-left { display: flex; align-items: center; gap: var(--space-3); }
.payment-card-number { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.payment-card-expiry { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }

.invoice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border-light);
  gap: var(--space-4);
}
.invoice-row:last-child { border-bottom: none; }
.invoice-name   { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); }
.invoice-number { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }
.invoice-right  { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.invoice-amount { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }


/* ─────────────────────────────────────────────────────────────────────────
   HORIZONS  (#page-horizons)
───────────────────────────────────────────────────────────────────────── */
.horizons-hero {
  background: linear-gradient(135deg, var(--color-primary), #a855f7);
  border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-10);
  text-align: center;
  color: #fff;
  margin-bottom: var(--space-6);
}
.horizons-hero-emoji { font-size: 48px; margin-bottom: var(--space-4); }
.horizons-hero h2 { font-size: 26px; font-weight: var(--font-weight-extrabold); margin-bottom: var(--space-3); }
.horizons-hero p  { font-size: var(--font-size-base); opacity: .92; max-width: 520px; margin: 0 auto var(--space-7); }

.horizons-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: var(--space-4);
  gap: var(--space-4);
}
.horizons-step { text-align: center; }
.horizons-step-icon { font-size: 32px; margin-bottom: var(--space-3); }
.horizons-step-title { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
.horizons-step-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); }


/* ─────────────────────────────────────────────────────────────────────────
   REACH  (#page-reach)
───────────────────────────────────────────────────────────────────────── */
.reach-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--space-5); gap: var(--space-5); }

.seo-score-value  { font-size: 34px; font-weight: var(--font-weight-extrabold); color: var(--color-success); }
.seo-stats-row {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
}
.seo-stat-val  { font-size: 20px; font-weight: var(--font-weight-extrabold); }
.seo-stat-label{ font-size: var(--font-size-xs); color: var(--color-text-muted); }


/* ─────────────────────────────────────────────────────────────────────────
   eCOMMERCE  (#page-ecommerce)
───────────────────────────────────────────────────────────────────────── */
/* Re-uses .stats-grid and .table-wrap */


/* ─────────────────────────────────────────────────────────────────────────
   AGENTS  (#page-agents)
───────────────────────────────────────────────────────────────────────── */
.agents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  grid-gap: var(--space-4);
  gap: var(--space-4);
}

.agent-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: box-shadow var(--transition);
}
.agent-card:hover { box-shadow: var(--shadow-md); }
.agent-card-top { display: flex; align-items: center; gap: var(--space-3); }
.agent-icon { font-size: 28px; }
.agent-name { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); }
.agent-tagline { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }
.agent-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); flex: 1 1; }


/* ─────────────────────────────────────────────────────────────────────────
   API  (#page-api)
───────────────────────────────────────────────────────────────────────── */
/* Uses .table-wrap / .table */


/* ─────────────────────────────────────────────────────────────────────────
   PROFILE  (#page-profile)
───────────────────────────────────────────────────────────────────────── */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: var(--space-5); gap: var(--space-5); }
.profile-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-size-base);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
}
.profile-detail-row:last-child { border-bottom: none; }
.profile-key { color: var(--color-text-muted); }
.profile-val { font-weight: var(--font-weight-medium); }

.security-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
}
.security-row + .security-row { border-top: 1px solid var(--color-border-light); }
.security-label { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); }
.security-meta  { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 2px; }


/* ─────────────────────────────────────────────────────────────────────────
   ACCOUNT SHARING  (#page-account-sharing)
───────────────────────────────────────────────────────────────────────── */
.access-info-box {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  border: 1px solid var(--color-border-light);
  line-height: var(--line-height);
}

/* Status cell inside sharing table */
.access-status-active  { display: flex; align-items: center; gap: var(--space-2); color: var(--color-success); font-weight: var(--font-weight-semibold); }
.access-status-pending { display: flex; align-items: center; gap: var(--space-2); color: var(--color-warning); font-weight: var(--font-weight-semibold); }

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font-hpanel), var(--font);
}

code,
.kbd,
.font-mono {
  font-family: var(--font-hmono), var(--font-mono);
}