html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/*
 Color verdeFacultad
rgb(43, 105, 96)
*/

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@600&display=swap');

:root{
  --font-base: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;

  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-2xl: 18px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  --agenda-header-h: 40px;
  --agenda-hour-h: 40px;

  --transition-fast: 0.12s ease;
  --transition-base: 0.2s ease;

  --color-primary: #e5efee;
  --color-primary-strong: #2a4a4f;
  --color-primary-soft: #d2e1de;
  --color-surface: #f5f7f7;
  /* este controla plan de estudio desde students*/
  --color-surface-2: var(--color-surface-3);
  --color-surface-3: #ffffff;
  --color-surface-33: #ffffff;
  
  --color-border: #c8d5d2;
  --color-border-strong: #b3c3bf;
  --color-border-rgb: 200,213,210;
  --border-1: var(--color-border);
  --border-2: var(--color-border-strong);

  --color-text: #1f2e31;
  --color-text-contrast: #ffffff;
  --color-muted: #4b6064;
  --color-muted-2: #6b7f7c;
  --text-1: var(--color-text);
  --text-2: var(--color-muted);
  --text-3: var(--color-muted-2);

  --color-accent: #f3e29e;
  --color-accent-2: #e2c86f;
  --accent-1: var(--color-accent);
  --accent-2: var(--color-accent-2);
  --color-accent-rgb: 243,226,158;
  --color-primary-rgb: 229,239,238;
  --color-text-rgb:none;
  --color-surface-rgb: 245,247,247;
  --color-danger-rgb: 214,84,84;
  --color-warn-rgb: 214,188,106;
  --color-ok-rgb: 63,156,118;

  --color-danger: #d65454;
  --color-warn: #d6bc6a;
  --color-ok: #3f9c76;

  --shadow-strong: 0 18px 50px rgba(31,46,49,0.16);
  --shadow-soft: 0 12px 32px rgba(31,46,49,0.12);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.65);
  --shadow-color-strong: rgba(var(--color-text-rgb),0.18);
  --shadow-color-soft: rgba(var(--color-text-rgb),0.12);
  --shadow-color-deep: rgba(var(--color-text-rgb),0.24);
  --shadow-btn: 0 8px 18px rgba(0,0,0,0.28);
  --shadow-btn-hover: 0 12px 24px rgba(0,0,0,0.35);

  --glass-strong: rgba(255,255,255,0.75);
  --glass-soft: rgba(255,255,255,0.5);
  --glass-faint: rgba(255,255,255,0.3);

  --overlay-strong: rgba(31,46,49,0.16);
  --overlay-soft: rgba(31,46,49,0.1);
  --overlay-faint: rgba(31,46,49,0.05);

  --page-bg: var(--color-surface);
  --surface-1: var(--color-surface);
  --surface-2: var(--color-surface-2);
  --surface-3: var(--color-surface-3);
  --surface-4: var(--color-primary-soft);
  --surface-5: var(--color-primary);
  --surface-6: #F8FAFC;
  --surface-7: #F1F5F9;
  --surface-8: #E2E8F0;
  --surface-9: #F5F7FA;
  --panel-bg: var(--color-surface-2);
  --card-bg: var(--color-surface-3);

  /* Legacy tokens to ease migration */
  --bg0: var(--color-primary);
  --bg1: var(--color-primary-soft);
  --card: var(--color-surface-2);
  --muted: var(--color-muted-2);
  --line: var(--color-border);
  --txt: var(--color-text);
  --blue: var(--color-accent);
  --violet: var(--color-accent-2);
  --aqua: var(--color-accent);
  --shadow: var(--shadow-strong);
  --glass: var(--glass-faint);

  --bg: var(--color-primary-strong);
  --bg-card: var(--color-surface-2);
  --bg-card-2: var(--color-surface-3);
  --border: var(--color-border);
  --accent: var(--color-accent);
  --accent2: var(--color-accent-2);
  --accent-soft: rgba(var(--color-accent-rgb),0.28);
  --accent-08: rgba(var(--color-accent-rgb),0.08);
  --accent-12: rgba(var(--color-accent-rgb),0.12);
  --accent-15: rgba(var(--color-accent-rgb),0.15);
  --accent-16: rgba(var(--color-accent-rgb),0.16);
  --accent-18: rgba(var(--color-accent-rgb),0.18);
  --accent-20: rgba(var(--color-accent-rgb),0.2);
  --accent-22: rgba(var(--color-accent-rgb),0.22);
  --accent-25: rgba(var(--color-accent-rgb),0.25);
  --accent-30: rgba(var(--color-accent-rgb),0.3);
  --accent-35: rgba(var(--color-accent-rgb),0.35);
  --accent-38: rgba(var(--color-accent-rgb),0.38);
  --accent-40: rgba(var(--color-accent-rgb),0.4);
  --accent-45: rgba(var(--color-accent-rgb),0.45);
  --accent-50: rgba(var(--color-accent-rgb),0.5);
  --accent-55: rgba(var(--color-accent-rgb),0.55);
  --accent-60: rgba(var(--color-accent-rgb),0.6);
  --accent-65: rgba(var(--color-accent-rgb),0.65);
  --accent-70: rgba(var(--color-accent-rgb),0.7);
  --accent-75: rgba(var(--color-accent-rgb),0.75);
  --accent-80: rgba(var(--color-accent-rgb),0.8);
  --accent-85: rgba(var(--color-accent-rgb),0.85);
  --accent-90: rgba(var(--color-accent-rgb),0.9);
  --accent-border: var(--accent-50);
  --accent-border-strong: var(--accent-85);
  --accent-outline: var(--accent-20);
  --accent-outline-strong: var(--accent-25);
  --accent-bg: var(--accent-16);
  --accent-bg-strong: var(--accent-25);
  --text-main: var(--color-text);
  --text-muted: var(--color-muted-2);
  --text-08: rgba(var(--color-text-rgb),0.08);
  --text-55: rgba(var(--color-text-rgb),0.55);
  --text-60: rgba(var(--color-text-rgb),0.6);
  --text-64: rgba(var(--color-text-rgb),0.64);
  --text-70: rgba(var(--color-text-rgb),0.7);
  --text-72: rgba(var(--color-text-rgb),0.72);
  --text-subtle: var(--text-72);
  --text-soft: var(--text-64);
  --text-faint: var(--text-55);
  --danger: var(--color-danger);
  --ok: var(--color-ok);
  --warn: var(--color-warn);

  --border-90: rgba(var(--color-border-rgb),0.9);
  --border-85: rgba(var(--color-border-rgb),0.85);
  --border-80: rgba(var(--color-border-rgb),0.8);
  --border-75: rgba(var(--color-border-rgb),0.75);
  --border-70: rgba(var(--color-border-rgb),0.7);
  --border-60: rgba(var(--color-border-rgb),0.6);
  --border-55: rgba(var(--color-border-rgb),0.55);
  --border-50: rgba(var(--color-border-rgb),0.5);
  --border-45: rgba(var(--color-border-rgb),0.45);
  --border-40: rgba(var(--color-border-rgb),0.4);
  --border-35: rgba(var(--color-border-rgb),0.35);
  --border-32: rgba(var(--color-border-rgb),0.32);
  --border-30: rgba(var(--color-border-rgb),0.3);
  --border-28: rgba(var(--color-border-rgb),0.28);
  --border-26: rgba(var(--color-border-rgb),0.26);
  --border-22: rgba(var(--color-border-rgb),0.22);
  --border-20: rgba(var(--color-border-rgb),0.2);
  --border-18: rgba(var(--color-border-rgb),0.18);
  --border-16: rgba(var(--color-border-rgb),0.16);
  --border-14: rgba(var(--color-border-rgb),0.14);
  --border-12: rgba(var(--color-border-rgb),0.12);
  --border-10: rgba(var(--color-border-rgb),0.1);

  --primary-06: rgba(var(--color-primary-rgb),0.06);
  --primary-08: rgba(var(--color-primary-rgb),0.08);
  --primary-12: rgba(var(--color-primary-rgb),0.12);
  --primary-14: rgba(var(--color-primary-rgb),0.14);
  --primary-16: rgba(var(--color-primary-rgb),0.16);
  --primary-18: rgba(var(--color-primary-rgb),0.18);
  --primary-20: rgba(var(--color-primary-rgb),0.2);
  --primary-22: rgba(var(--color-primary-rgb),0.22);
  --primary-25: rgba(var(--color-primary-rgb),0.25);
  --primary-30: rgba(var(--color-primary-rgb),0.3);
  --primary-35: rgba(var(--color-primary-rgb),0.35);
  --primary-40: rgba(var(--color-primary-rgb),0.4);
  --primary-45: rgba(var(--color-primary-rgb),0.45);
  --primary-55: rgba(var(--color-primary-rgb),0.55);
  --primary-90: rgba(var(--color-primary-rgb),0.9);

  --surface-45: rgba(var(--color-surface-rgb),0.45);
  --surface-80: rgba(var(--color-surface-rgb),0.8);
  --surface-90: rgba(var(--color-surface-rgb),0.9);
  --surface-92: rgba(var(--color-surface-rgb),0.92);
  --surface-94: rgba(var(--color-surface-rgb),0.94);
  --surface-98: rgba(var(--color-surface-rgb),0.98);

  --ok-15: rgba(var(--color-ok-rgb),0.15);
  --ok-16: rgba(var(--color-ok-rgb),0.16);
  --ok-18: rgba(var(--color-ok-rgb),0.18);
  --ok-35: rgba(var(--color-ok-rgb),0.35);
  --ok-45: rgba(var(--color-ok-rgb),0.45);
  --ok-50: rgba(var(--color-ok-rgb),0.5);
  --ok-60: rgba(var(--color-ok-rgb),0.6);
  --danger-12: rgba(var(--color-danger-rgb),0.12);
  --danger-18: rgba(var(--color-danger-rgb),0.18);
  --danger-35: rgba(var(--color-danger-rgb),0.35);
  --danger-55: rgba(var(--color-danger-rgb),0.55);
  --danger-70: rgba(var(--color-danger-rgb),0.7);
  --warn-15: rgba(var(--color-warn-rgb),0.15);
  --warn-35: rgba(var(--color-warn-rgb),0.35);

  --inverse-03: rgba(255,255,255,0.03);
  --inverse-04: rgba(255,255,255,0.04);
  --inverse-05: rgba(255,255,255,0.05);
  --inverse-06: rgba(255,255,255,0.06);
  --inverse-08: rgba(255,255,255,0.08);
  --inverse-10: rgba(255,255,255,0.1);
  --inverse-12: rgba(255,255,255,0.12);
  --inverse-14: rgba(255,255,255,0.14);
  --inverse-18: rgba(255,255,255,0.18);
  --inverse-60: rgba(255,255,255,0.6);
  --inverse-70: rgba(255,255,255,0.7);
  --inverse-90: rgba(255,255,255,0.9);
  --inverse-95: rgba(255,255,255,0.95);
  --inverse-96: rgba(255,255,255,0.96);

  --info: #2F6FED;
  --info-06: rgba(47,111,237,0.06);
  --info-20: rgba(47,111,237,0.2);
  --info-25: rgba(47,111,237,0.25);
  --info-35: rgba(47,111,237,0.35);
  --info-40: rgba(47,111,237,0.4);
  --info-45: rgba(47,111,237,0.45);
  --info-50: rgba(47,111,237,0.5);
  --info-strong: rgba(59,130,246,0.35);

  --header-bg: var(--surface-3);
  --header-border: var(--border-75);
  --sidebar-bg: var(--surface-3);
  --sidebar-border: var(--border-85);
  --panel-border: var(--border-35);
  --card-border: var(--border-35);
  --input-bg: var(--surface-90);
  --input-border: var(--border-90);
  --input-outline: var(--accent-outline-strong);
  --pill-bg: var(--primary-12);
  --pill-border: var(--border-75);
  --pill-text: var(--text-72);
  --chip-bg: var(--primary-08);
  --chip-border: var(--border-60);
  --glass-stronger: var(--text-08);

  --btn-primary-bg: var(--accent-1);
  --btn-primary-text: var(--color-text-contrast);
  --btn-primary-border: transparent;
  --btn-primary-hover-bg: var(--accent-1);
  --btn-outline-bg: var(--surface-3);
  --btn-outline-border: var(--color-border);
  --btn-ghost-bg: var(--surface-2);
  --btn-ghost-border: var(--color-border);
  --btn-soft-bg: var(--surface-4);
  --btn-soft-border: var(--border-85);

  --ui-surface: var(--color-surface-2);
  --ui-surface-2: var(--color-surface-3);
  --ui-border: var(--border-18);
  --ui-border-strong: var(--border-35);
  --ui-muted: var(--color-muted-2);
  --ui-text: var(--color-text);
  --ui-accent: var(--color-accent);
  --ui-accent-2: var(--color-accent-2);
  --ui-danger: var(--color-danger);
  --ui-warn: var(--color-warn);
  --ui-success: var(--color-ok);
  --ui-shadow: var(--shadow-strong);
  --ui-glass: var(--glass-faint);
}

body.dark-mode,
body[data-theme="dark"]{
  --accent-gold: #D9C36A;
  --color-primary: #0B0C10;
  --color-primary-strong: #0A0B0F;
  --color-primary-soft: #101216;
  --color-surface: #101216;
  --color-surface-2: #12151A;
  --color-surface-3: #171A20;
  --color-surface-33: #18181B;
  --color-border: #20242B;
  --color-border-strong: #2A2F38;
  --color-border-rgb: 32,36,43;

  --color-text: #F5F7FA;
  --color-text-contrast: #0B0C10;
  --color-muted: #AEB6C2;
  --color-muted-2: #8A93A1;

  --color-accent: #F5F7FA;
  --color-accent-2: #D5DAE2;
  --color-accent-rgb: 245,247,250;
  --color-primary-rgb: 11,12,16;
  --color-text-rgb: 245,247,250;
  --color-surface-rgb: 18,21,26;
  --color-danger-rgb: 239,107,100;
  --color-warn-rgb: 217,195,106;
  --color-ok-rgb: 74,174,138;

  --color-danger: #EF6B64;
  --color-warn: #D9C36A;
  --color-ok: #4AAE8A;

  --shadow-strong: 0 16px 40px rgba(0,0,0,0.45);
  --shadow-soft: 0 10px 26px rgba(0,0,0,0.32);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);
  --shadow-color-strong: rgba(0,0,0,0.45);
  --shadow-color-soft: rgba(0,0,0,0.28);
  --shadow-color-deep: rgba(0,0,0,0.6);
  --shadow-btn: 0 8px 18px rgba(0,0,0,0.5);
  --shadow-btn-hover: 0 12px 24px rgba(0,0,0,0.6);

  --glass-strong: rgba(255,255,255,0.06);
  --glass-soft: rgba(255,255,255,0.04);
  --glass-faint: rgba(255,255,255,0.02);

  --overlay-strong: rgba(0,0,0,0.6);
  --overlay-soft: rgba(0,0,0,0.4);
  --overlay-faint: rgba(0,0,0,0.25);

  --page-bg: var(--color-primary);
  --panel-bg: var(--color-surface-2);
  --card-bg: var(--color-surface-3);
  --surface-6: var(--color-surface);
  --surface-7: var(--color-surface-2);
  --surface-8: var(--color-border);
  --surface-9: var(--color-text);
  --header-bg: var(--color-primary);
  --header-border: var(--inverse-06);
  --sidebar-bg: var(--color-surface-2);
  --sidebar-border: var(--inverse-06);
  --panel-border: var(--border-18);
  
  /*cambios mannuales*/
  --card:var(--card-bg);
  --surface-92: var(--card-bg);
  --surface-98: var(--card-bg);
  --surface-94: var(--card-bg);
  --card-agenda111: rgb(24 24 27 / var(1, 1));

  --card-border: var(--border-18);
  --input-bg: var(--inverse-03);
  --input-border: var(--inverse-08);
  --pill-bg: var(--inverse-04);
  --pill-border: var(--inverse-08);
  --pill-text: var(--text-64);
  --chip-bg: var(--primary-08);
  --chip-border: var(--border-60);
  --btn-primary-bg: var(--color-text);
  --btn-primary-text: var(--color-primary-strong);
  --btn-primary-border: var(--inverse-70);
  --btn-primary-hover-bg: var(--color-text);
  --btn-outline-bg: transparent;
  --btn-outline-border: var(--inverse-14);
  --btn-ghost-bg: var(--inverse-04);
  --btn-ghost-border: var(--inverse-10);
  --btn-soft-bg: var(--inverse-06);
  --btn-soft-border: var(--inverse-12);
  --ui-border: var(--inverse-06);
  --ui-border-strong: var(--inverse-12);
  --ui-shadow: 0 18px 40px rgba(0,0,0,0.35);
  --ui-glass: var(--inverse-04);
  --info: #7AA2FF;

  color-scheme: dark;
}

body.dark-mode.theme-oguz,
body[data-theme="dark"].theme-oguz{
  --page-bg: var(--color-primary);
  --panel-bg: var(--color-surface-2);
  --card-bg: var(--color-surface-3);
}

body.light-mode,
body[data-theme="light"]{
  --color-primary: #F7FAFC;
  --color-primary-strong: #1F2937;
  --color-primary-soft: #E2E8F0;
  --color-surface: #F8FAFC;
  --color-surface-2: #FFFFFF;
  --color-surface-3: #FFFFFF;
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-border-rgb: 226,232,240;

  --color-text: #1F2937;
  --color-text-contrast: #FFFFFF;
  --color-muted: #64748B;
  --color-muted-2: #94A3B8;

  --color-accent: #4FD1C5;
  --color-accent-2: #38BDF8;
  --color-accent-rgb: 79,209,197;
  --color-primary-rgb: 247,250,252;
  --color-text-rgb: 31,41,55;
  --color-surface-rgb: 248,250,252;

  --shadow-strong: 0 18px 40px rgba(15,23,42,0.08);
  --shadow-soft: 0 10px 24px rgba(15,23,42,0.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.7);
  --shadow-color-strong: rgba(15,23,42,0.14);
  --shadow-color-soft: rgba(15,23,42,0.08);
  --shadow-color-deep: rgba(15,23,42,0.18);
  --shadow-btn: 0 6px 14px rgba(15,23,42,0.18);
  --shadow-btn-hover: 0 10px 20px rgba(15,23,42,0.24);

  --glass-strong: rgba(255,255,255,0.9);
  --glass-soft: rgba(255,255,255,0.78);
  --glass-faint: rgba(255,255,255,0.6);

  --overlay-strong: rgba(15,23,42,0.08);
  --overlay-soft: rgba(15,23,42,0.06);
  --overlay-faint: rgba(15,23,42,0.04);

  --page-bg: var(--color-surface);
  --panel-bg: var(--color-surface-2);
  --card-bg: var(--color-surface-3);
  --header-bg: var(--color-surface-3);
  --header-border: var(--border-75);
  --sidebar-bg: var(--color-surface-3);
  --sidebar-border: var(--border-85);
  --panel-border: var(--border-35);
  --card-border: var(--border-35);
  --input-bg: var(--surface-90);
  --input-border: var(--border-90);
  --pill-bg: var(--surface-4);
  --pill-border: var(--border-75);
  --pill-text: var(--color-muted);
  --btn-primary-bg: var(--color-accent);
  --btn-primary-text: var(--color-text-contrast);
  --btn-primary-border: transparent;
  --btn-primary-hover-bg: #45BCB0;
  --btn-outline-bg: var(--color-surface-3);
  --btn-outline-border: var(--color-border);
  --btn-ghost-bg: var(--color-surface-2);
  --btn-ghost-border: var(--color-border);
  --btn-soft-bg: var(--surface-4);
  --btn-soft-border: var(--border-85);
  --info: #2F6FED;

  color-scheme: light;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

body{
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-base);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0.01em;
  background: var(--page-bg);
  color: var(--color-text);
  transition: background-color .25s ease, color .25s ease, background .25s ease;
}
h1,
h2,
h3{
  letter-spacing: -0.01em;
  line-height: 1.2;
}
h1{ font-weight: 700; }
h2{ font-weight: 650; }
h3{ font-weight: 600; }
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3{
  letter-spacing: -0.015em;
  font-weight:700;
}
body.light-mode input,
body.light-mode select,
body.light-mode textarea,
body[data-theme="light"] input,
body[data-theme="light"] select,
body[data-theme="light"] textarea{
  background:var(--input-bg);
  border-color: var(--input-border);
}
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] textarea{
  background:var(--input-bg);
  border-color: var(--input-border);
  color: var(--color-text);
}
body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus,
body[data-theme="dark"] input:focus,
body[data-theme="dark"] select:focus,
body[data-theme="dark"] textarea:focus{
  outline:2px solid var(--accent-outline);
  outline-offset:2px;
}

.theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 0;
  padding: .45rem .55rem;
  border-radius: 62.438rem;
  border:1px solid var(--btn-soft-border);
  background: var(--btn-soft-bg);
  color:var(--color-text);
  font-weight:700;
  cursor:pointer;
  transition: transform var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast);
  box-shadow: var(--shadow-btn);
}
.theme-toggle:hover{ transform:translateY(-1px); filter:brightness(1.04); }
.theme-toggle:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
.theme-toggle .ico{ display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.theme-toggle .ico svg{ width:20px; height:20px; display:block; }
.theme-toggle .label{ display:none; }
body.light-mode .theme-toggle,
body[data-theme="light"] .theme-toggle{
  background: var(--btn-outline-bg);
  border-color: var(--btn-outline-border);
  box-shadow: var(--shadow-btn);
}
body.light-mode .theme-toggle:hover,
body[data-theme="light"] .theme-toggle:hover{
  filter:none;
  background:var(--btn-ghost-bg);
}
body.dark-mode .theme-toggle,
body[data-theme="dark"] .theme-toggle{
  background: var(--btn-ghost-bg);
  border-color: var(--btn-ghost-border);
  box-shadow:none;
}
/* =========================================================
   Layout
   ========================================================= */
/* ---------- Quick sidebar ---------- */
.quick-sidebar{
  max-width: 14.75rem;
  background: var(--sidebar-bg);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-xl);
  padding: 0.9rem;
  padding-left: 0;
  /*box-shadow: var(--ui-shadow); */
  position: static;
  color: var(--ui-text);
  transition: width .2s ease, padding .2s ease, box-shadow .2s ease, transform .2s ease;
  overflow:hidden;
}
.quick-sidebar.collapsed{
  width: 100%;
  max-width: 5.75rem;
  padding: 0.75rem 0.6rem;
}
.quick-sidebar.collapsed .qs-head,
.quick-sidebar.collapsed .qs-footer,
.quick-sidebar.collapsed .qs-item .qs-label span:last-child,
.quick-sidebar.collapsed .qs-pill{
  display:none;
}
.quick-sidebar.collapsed .qs-item{
  justify-content:center;
  padding: .55rem .6rem;
  border-radius: var(--radius-md);
}
.quick-sidebar.collapsed .qs-item .qs-ico{
  margin: 0;
}
.quick-sidebar .qs-head{
  display:flex;
  flex-direction:column;
  gap: .2rem;
  margin-bottom:.8rem;
}
.quick-sidebar .qs-title{
  font-weight:800;
  font-size: 1rem;
  letter-spacing: .2px;
}
.quick-sidebar .qs-sub{
  color:var(--ui-muted);
  font-size: .85rem;
  line-height: 1.35;
}
.quick-sidebar .qs-items{
  display:flex;
  flex-direction:column;
  gap: .35rem;
  margin-top:.25rem;
}
.quick-sidebar .qs-item{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: .5rem;
  padding: .6rem .75rem;
  border-radius: var(--radius-md);
  background:var(--glass-strong);
  border:1px solid transparent;
  cursor:pointer;
  transition:all .14s ease;
  color:var(--ui-text);
  box-shadow:none;
}
.quick-sidebar .qs-item .qs-label{
  display:flex;
  align-items:center;
  gap: .55rem;
  font-weight:700;
  letter-spacing: .15px;
}
.quick-sidebar .qs-ico{
  width: 1.625rem; height:1.625rem;
  border-radius: var(--radius-sm);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--primary-45);
  color:var(--ui-text);
  font-size: .95rem;
}
.quick-sidebar .qs-pill{
  font-size: .72rem;
  padding: .2rem .5rem;
  border-radius: var(--radius-pill);
  background:var(--glass-strong);
  color:var(--ui-muted);
}
.quick-sidebar .qs-item:hover{
  border-color:var(--ui-border-strong);
  background:var(--glass-soft);
  transform:translateY(-1px);
}
.quick-sidebar .qs-item.active{
  border-color:var(--accent-60);
  background: var(--accent-bg);
  box-shadow:none;
}

.quick-sidebar .qs-item.coming-soon{
  opacity:.72;
  cursor:default;
}
.quick-sidebar .qs-item.coming-soon:hover{
  transform:none;
  border-color:transparent;
  background:var(--glass-strong);
}
.quick-sidebar .qs-item.coming-soon.active{
  opacity:1;
  border-color:var(--accent-60);
  background: var(--accent-bg);
}
.quick-sidebar .qs-footer{
  margin-top:.9rem;
  color:var(--ui-muted);
  font-size: .82rem;
  line-height: 1.35;
  display:flex;
  align-items:flex-start;
  gap: .5rem;
}
.quick-sidebar .qs-dot{
  width: 0.5rem; height:0.5rem; border-radius:50%;
  background:var(--ui-accent);
  box-shadow:none;
  margin-top:.35rem;
}

.quick-sidebar-wrap{
  position:static;
}

.quick-sidebar-backdrop{
  display:none;
}

.quick-toggle-btn{
  display:inline-flex;
  align-self:flex-start;
  padding: .55rem .85rem;
  border-radius: var(--radius-md);
  border:1px solid var(--ui-border);
  background:var(--glass-strong);
  color:var(--ui-text);
  font-weight:700;
  letter-spacing: .1px;
  cursor:pointer;
  box-shadow:var(--shadow-btn);
}
.quick-toggle-btn:hover{
  border-color:var(--accent-70);
}
.quick-toggle-btn.active{
  border-color:var(--accent-85);
  color:var(--color-text);
  box-shadow:var(--shadow-btn-hover);
}

body.dark-mode .quick-sidebar,
body[data-theme="dark"] .quick-sidebar{
  background: var(--surface-92);
  border-color: var(--inverse-06);
  box-shadow:none;
  display: contents;
}
body.dark-mode .quick-sidebar .qs-item,
body[data-theme="dark"] .quick-sidebar .qs-item{
  background:var(--inverse-03);
  box-shadow:none;
}
body.dark-mode .quick-sidebar .qs-item:hover,
body[data-theme="dark"] .quick-sidebar .qs-item:hover{
  background:var(--inverse-05);
  border-color:var(--inverse-12);
}
body.dark-mode .quick-sidebar .qs-item.active,
body[data-theme="dark"] .quick-sidebar .qs-item.active{
  background:var(--inverse-08);
  border-color:var(--inverse-18);
  box-shadow:none;
}
body.dark-mode .quick-sidebar .qs-ico,
body[data-theme="dark"] .quick-sidebar .qs-ico{
  background:var(--inverse-08);
  color:var(--color-text);
}
body.dark-mode .quick-sidebar .qs-pill,
body[data-theme="dark"] .quick-sidebar .qs-pill{
  background:var(--inverse-04);
  color:var(--color-muted);
}
body.dark-mode .quick-toggle-btn,
body[data-theme="dark"] .quick-toggle-btn{
  background:var(--inverse-04);
  border-color:var(--inverse-08);
  box-shadow:none;
}

body.light-mode .quick-sidebar,
body[data-theme="light"] .quick-sidebar{
  background:var(--surface-3);
  border-color: var(--color-border);
  box-shadow:none;
  display: contents;
}
body.light-mode .quick-sidebar .qs-item,
body[data-theme="light"] .quick-sidebar .qs-item{
  background:var(--surface-6);
  box-shadow:none;
}
body.light-mode .quick-sidebar .qs-item:hover,
body[data-theme="light"] .quick-sidebar .qs-item:hover{
  background:var(--surface-7);
  border-color: var(--color-border-strong);
}
body.light-mode .quick-sidebar .qs-item.active,
body[data-theme="light"] .quick-sidebar .qs-item.active{
  background:var(--accent-bg);
  border-color:var(--accent-border);
  color:var(--color-text);
  box-shadow:none;
}
body.light-mode .quick-sidebar .qs-ico,
body[data-theme="light"] .quick-sidebar .qs-ico{
  background:var(--surface-8);
  color:var(--color-text);
}
body.light-mode .quick-sidebar .qs-pill,
body[data-theme="light"] .quick-sidebar .qs-pill{
  background:var(--surface-7);
  color:var(--color-muted);
}
body.light-mode .quick-toggle-btn,
body[data-theme="light"] .quick-toggle-btn{
  background:var(--surface-3);
  border-color: var(--color-border);
  box-shadow:var(--shadow-btn);
}
/*
@media (min-width:769px) and (max-width:1000px){
  .quick-sidebar{
    position:fixed;
    left: .8rem;
    top: .8rem;
    width: 16.25rem;
    height: calc(100dvh - 1.6rem);
    max-height: calc(100dvh - 1.6rem);
    overflow:auto;
    z-index:2200;
    transition:transform .22s ease;
    transform:translateX(calc(-100% - 1.2rem));
    opacity:1;
    pointer-events:none;
    border-radius: var(--radius-xl);
  }
  .quick-sidebar.collapsed{
    width: 16.25rem;
    padding: 0.9rem;
  }
  .quick-sidebar.open{
    left:.8rem;
    transform:none;
    opacity:1;
    pointer-events:auto;
  } 
  .quick-sidebar-wrap{
    position:static;
    z-index:2200;
  } 
  .quick-sidebar-backdrop{
    display:none !important;
  }

  #pageLayout.sidebar-collapsed .quick-sidebar,
  #pageLayout .quick-sidebar{
    max-width:16.25rem;
  }
} */

/* ---------- Toasts ---------- */
.toast-stack{
  position:fixed;
  top: 1.125rem;
  right: 1.125rem;
  display:flex;
  flex-direction:column;
  gap: 0.625rem;
  z-index:1600;
  max-width: 26.25rem;
  width: calc(100% - 1.5rem);
  pointer-events:none;
}
.toast-card{
  pointer-events:auto;
    background-color: var(--card-bg);
  border:1px solid var(--ui-border);
  border-left:3px solid var(--ui-accent);
  border-radius: var(--radius-lg);
  padding: .85rem .95rem;
  box-shadow:none;
  display:flex;
  gap: .65rem;
  align-items:flex-start;
  animation: toast-in .22s ease;
  position:relative;
}
.toast-card.info{ border-left-color: var(--ui-accent); }
.toast-card.success{ border-left-color: var(--ui-success); }
.toast-card.error{ border-left-color: var(--ui-danger); }
.toast-card.warning{ border-left-color: var(--ui-warn); }
.toast-card .toast-ico{
  width: 2rem; height:2rem; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background:var(--glass-soft);
  font-weight:800;
}
.toast-card .toast-body{
  flex:1;
}
.toast-card .toast-title{
  font-weight:800;
  margin-bottom:.15rem;
  letter-spacing: .15px;
}
.toast-card .toast-msg{
    color: var(--text-primary);
  opacity:.9;
  line-height: 1.35;
  font-size: .93rem;
}
.toast-card .toast-actions{
  margin-top:.6rem;
  display:flex;
  gap: .5rem;
  flex-wrap:wrap;
}
.toast-btn{
  padding: .45rem .75rem;
  border-radius: var(--radius-sm);
  border:1px solid var(--ui-border);
  background:var(--ui-glass);
  color:var(--ui-text);
  cursor:pointer;
  font-weight:700;
  letter-spacing: .1px;
}
.toast-btn.primary{
  border-color:var(--accent-60);
  background: var(--accent-20);
  box-shadow:var(--shadow-btn);
}
.toast-btn.ghost{
  background:var(--glass-faint);
}
.toast-btn.primary{
  color:var(--color-text);
}
body.dark-mode .toast-btn.primary,
body[data-theme="dark"] .toast-btn.primary{
  background:var(--btn-primary-bg);
  color:var(--btn-primary-text);
  border-color:var(--btn-primary-border);
  box-shadow:none;
}
.toast-close{
  position:absolute;
  top: 0.625rem; right:0.625rem;
  border:none;
  background:var(--glass-soft);
  color:var(--ui-muted);
  border-radius: var(--radius-xs);
  cursor:pointer;
  font-weight:800;
}

.toast-dialog-backdrop{
  position:fixed;
  inset:0;
  background:var(--shadow-color-deep);
  backdrop-filter: blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:1605;
  padding: 1rem;
}
.toast-dialog{
  width: 27.5rem;
  max-width: 100%;
  background: var(--panel-bg);
  border:1px solid var(--ui-border-strong);
  border-radius: var(--radius-xl);
  box-shadow:none;
  padding: 1rem 1.1rem 1.15rem;
}
.dialog-title{
  font-weight:800;
  letter-spacing: .2px;
  margin-bottom:.35rem;
}
.dialog-msg{
  color:var(--ui-text);
  opacity:.9;
  line-height: 1.4;
  margin-bottom:.7rem;
}
.dialog-input{
  margin-bottom:.55rem;
}
.dialog-input label{
  display:block;
  font-size: .82rem;
  color:var(--ui-muted);
  margin-bottom:.2rem;
}
.dialog-input input{
  width: 100%;
  padding: .6rem .75rem;
  border-radius: var(--radius-md);
  border:1px solid var(--ui-border-strong);
  background:var(--glass-faint);
  color:var(--ui-text);
  font-size: .95rem;
}
.dialog-error{
  color:var(--color-danger);
  font-size: .84rem;
  margin-top:.2rem;
}
.dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap: .5rem;
  flex-wrap:wrap;
}
.dialog-btn{
  padding: .55rem .9rem;
  border-radius: var(--radius-md);
  border:1px solid var(--ui-border);
  background:var(--ui-glass);
  color:var(--ui-text);
  font-weight:800;
  letter-spacing: .1px;
  cursor:pointer;
}
.dialog-btn.primary{
  border-color:var(--accent-65);
  background: var(--accent-18);
  color:var(--color-text);
}
.dialog-btn.primary{
  color:var(--color-text);
}
body.dark-mode .dialog-btn.primary,
body[data-theme="dark"] .dialog-btn.primary{
  background:var(--btn-primary-bg);
  color:var(--btn-primary-text);
  border-color:var(--btn-primary-border);
  box-shadow:none;
}
.dialog-btn.danger{
  border-color:var(--danger-35);
  background:var(--danger-12);
  color:var(--color-danger);
}
.dialog-btn.ghost{
  background:var(--glass-faint);
}

body.light-mode .toast-btn.primary,
body[data-theme="light"] .toast-btn.primary{
  background:var(--btn-primary-bg);
  color:var(--btn-primary-text);
  border-color:transparent;
  box-shadow:var(--shadow-btn);
}
body.light-mode .toast-dialog,
body[data-theme="light"] .toast-dialog{
  background:var(--surface-3);
  box-shadow:none;
}
body.light-mode .dialog-input input,
body[data-theme="light"] .dialog-input input{
  background:var(--input-bg);
  border-color: var(--input-border);
}
body.light-mode .dialog-btn.primary,
body[data-theme="light"] .dialog-btn.primary{
  background:var(--btn-primary-bg);
  color:var(--btn-primary-text);
  border-color:transparent;
  box-shadow:var(--shadow-btn);
}

@keyframes toast-in{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

#inpCareer option{
      background:var(--card-bg);
      color:var(--color-text);
    }