/* ============================================================
   Job Application Form — Professional 6-theme edition
   "STYLE" swatch bar · gradient icon chips · varied icon shapes
   Themes: Corporate · Lavender · Editorial · Amber · Carbon(dark)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=JetBrains+Mono:wght@400;500;600;700&family=Sora:wght@400;500;600;700;800&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================================
   THEME TOKENS
   --grad      : icon-chip / swatch gradient
   --chip-shape: clip-path or border-radius personality for icon chips
   ============================================================ */

/* ---- CORPORATE (default) · refined · trusted slate blue ---- */
:root,
[data-theme="corporate"] {
  --bg:#eef1f6; --bg-elev:#ffffff; --bg-soft:#e2e7ef; --surface:#ffffff;
  --border:#a6b2c4; --border-strong:#5a6a82; --field-border:#3f4d63;
  --text:#11202f; --text-soft:#3a4b5e; --text-muted:#73828f;
  --accent:#1d4e89; --accent-soft:#dbe6f4; --accent-strong:#123257; --accent-contrast:#ffffff;
  --accent-2:#3f78bd; --accent-3:#0c2138;
  --danger:#c0392b; --success:#1e8e5a; --warning:#c08218;
  --ring:rgba(29,78,137,.22);
  --grad:linear-gradient(135deg,#3f78bd 0%,#1d4e89 100%);
  --select-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%231d4e89' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --shadow-sm:0 1px 2px rgba(17,32,47,.06); --shadow-md:0 10px 28px -10px rgba(17,32,47,.16); --shadow-lg:0 26px 54px -14px rgba(17,32,47,.24);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.7);
  --font-display:'Sora',system-ui,sans-serif; --font-body:'Plus Jakarta Sans',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --radius-sm:6px; --radius-md:11px; --radius-lg:17px; --radius-xl:23px;
  --chip-radius:13px;
  --bg-mesh:
    radial-gradient(ellipse 70% 45% at 50% 0%, rgba(29,78,137,.08), transparent 65%),
    radial-gradient(ellipse 50% 40% at 100% 60%, rgba(63,120,189,.06), transparent 70%);
  --grain-opacity:0.35;
}

/* ---- LAVENDER · glass · soft violet ---- */
[data-theme="lavender"] {
  --bg:#f3eef9; --bg-elev:#ffffff; --bg-soft:#e8def3; --surface:#ffffff;
  --border:#b89dd8; --border-strong:#7a5da6; --field-border:#5e3f8c;
  --text:#1f1338; --text-soft:#46326a; --text-muted:#7a679a;
  --accent:#6e3fc4; --accent-soft:#e6d8fa; --accent-strong:#4a228c; --accent-contrast:#ffffff;
  --accent-2:#9a6fe0; --accent-3:#2a0f5a;
  --danger:#c0392b; --success:#2c7a4b; --warning:#b8841d;
  --ring:rgba(110,63,196,.22);
  --grad:linear-gradient(135deg,#a37cf0 0%,#6e3fc4 100%);
  --select-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236e3fc4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --shadow-sm:0 1px 2px rgba(42,30,68,.07); --shadow-md:0 10px 28px -10px rgba(42,30,68,.2); --shadow-lg:0 26px 54px -14px rgba(42,30,68,.28);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --font-display:'Fraunces',Georgia,serif; --font-body:'Plus Jakarta Sans',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --radius-sm:6px; --radius-md:13px; --radius-lg:19px; --radius-xl:25px;
  --chip-radius:50%;
  --bg-mesh:
    radial-gradient(ellipse 60% 50% at 20% 20%, rgba(110,63,196,.14), transparent 65%),
    radial-gradient(ellipse 50% 40% at 90% 70%, rgba(154,111,224,.1), transparent 70%);
  --grain-opacity:0.4;
}

/* ---- EDITORIAL · serif magazine · warm ink on cream ---- */
[data-theme="editorial"] {
  --bg:#f6f2e9; --bg-elev:#fffdf7; --bg-soft:#efe7d6; --surface:#fffdf7;
  --border:#cbbf9f; --border-strong:#8a7c52; --field-border:#6b5d38;
  --text:#1c1810; --text-soft:#473f2e; --text-muted:#857a62;
  --accent:#9a3324; --accent-soft:#ecd9d2; --accent-strong:#6e2016; --accent-contrast:#fffdf7;
  --accent-2:#c2603f; --accent-3:#3f120c;
  --danger:#a82f1f; --success:#5a7237; --warning:#b07d16;
  --ring:rgba(154,51,36,.2);
  --grad:linear-gradient(135deg,#c2603f 0%,#9a3324 100%);
  --select-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%239a3324' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --shadow-sm:0 1px 2px rgba(40,32,18,.06); --shadow-md:0 8px 22px -10px rgba(40,32,18,.16); --shadow-lg:0 22px 48px -14px rgba(40,32,18,.24);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --font-display:'Newsreader',Georgia,serif; --font-body:'Plus Jakarta Sans',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --radius-sm:4px; --radius-md:7px; --radius-lg:11px; --radius-xl:14px;
  --chip-radius:6px;
  --bg-mesh:
    radial-gradient(ellipse 60% 40% at 100% 0%, rgba(154,51,36,.07), transparent 60%),
    radial-gradient(ellipse 50% 50% at 0% 90%, rgba(194,96,63,.06), transparent 70%);
  --grain-opacity:0.62;
}

/* ---- AMBER · refined · warm professional gold ---- */
[data-theme="amber"] {
  --bg:#faf3e8; --bg-elev:#fffdf9; --bg-soft:#f3e8d4; --surface:#fffdf9;
  --border:#dcc69a; --border-strong:#a8884f; --field-border:#876a36;
  --text:#2c2410; --text-soft:#574826; --text-muted:#8a784f;
  --accent:#bf7d1a; --accent-soft:#f6e6c4; --accent-strong:#915c0c; --accent-contrast:#ffffff;
  --accent-2:#e0a93c; --accent-3:#4a3608;
  --danger:#c0392b; --success:#5a7237; --warning:#bf7d1a;
  --ring:rgba(191,125,26,.22);
  --grad:linear-gradient(135deg,#e0a93c 0%,#bf7d1a 100%);
  --select-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23bf7d1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --shadow-sm:0 1px 2px rgba(44,36,16,.06); --shadow-md:0 10px 28px -10px rgba(44,36,16,.18); --shadow-lg:0 26px 54px -14px rgba(44,36,16,.26);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.7);
  --font-display:'Sora',system-ui,sans-serif; --font-body:'Plus Jakarta Sans',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --radius-sm:7px; --radius-md:12px; --radius-lg:18px; --radius-xl:24px;
  --chip-radius:14px;
  --bg-mesh:
    radial-gradient(ellipse 68% 46% at 12% 0%, rgba(224,169,60,.16), transparent 62%),
    radial-gradient(ellipse 54% 42% at 96% 64%, rgba(191,125,26,.10), transparent 70%);
  --grain-opacity:0.42;
}

/* ---- CARBON · DARK MODE · sleek developer dark + cyan ---- */
[data-theme="carbon"] {
  --bg:#0f141b; --bg-elev:#1a2230; --bg-soft:#222c3c; --surface:#1a2230;
  --border:#2f3b4d; --border-strong:#5a6d8a; --field-border:#73869f;
  --text:#e8eef6; --text-soft:#aeb9c9; --text-muted:#75839a;
  --accent:#2dd4bf; --accent-soft:#16323a; --accent-strong:#5eead4; --accent-contrast:#0a1014;
  --accent-2:#38bdf8; --accent-3:#0a3f3a;
  --danger:#f87171; --success:#34d399; --warning:#fbbf24;
  --ring:rgba(45,212,191,.30);
  --grad:linear-gradient(135deg,#38bdf8 0%,#2dd4bf 100%);
  --select-arrow:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%232dd4bf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 12px 32px -10px rgba(0,0,0,.6); --shadow-lg:0 30px 60px -14px rgba(0,0,0,.75);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.05);
  --font-display:'Space Grotesk',system-ui,sans-serif; --font-body:'Plus Jakarta Sans',sans-serif; --font-mono:'JetBrains Mono',monospace;
  --radius-sm:6px; --radius-md:11px; --radius-lg:16px; --radius-xl:22px;
  --chip-radius:13px;
  --bg-mesh:
    radial-gradient(ellipse 75% 55% at 12% 0%, rgba(45,212,191,.14), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 36%, rgba(56,189,248,.10), transparent 70%),
    radial-gradient(ellipse 55% 50% at 50% 100%, rgba(45,212,191,.06), transparent 70%);
  --grain-opacity:0.5;
}

/* ============================================================
   BASE
   ============================================================ */

body {
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .5s ease, color .5s ease;
  position: relative;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg-mesh);
  pointer-events: none;
  z-index: 0;
  transition: opacity .5s ease;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.04 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}
[data-theme="carbon"] body::after { mix-blend-mode: screen; }
body > * { position: relative; z-index: 2; }

body > table[width="1250"] {
  width: 100% !important;
  max-width: 1240px;
  margin: 0 auto;
  background: transparent !important;
}
body > table[width="1250"] td[bgcolor="#EEF8FF"] {
  background: transparent !important;
  width: 100% !important;
  height: auto !important;
  padding: 0 20px;
}
td[bgcolor="#006ba1"],
td[background*="heading_bg"] { background: transparent !important; }

/* ============================================================
   THEME / STYLE BAR
   ============================================================ */

.theme-bar {
  position: sticky;
  top: 12px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  margin: 16px 0 28px;
  background: color-mix(in srgb, var(--bg-elev) 90%, transparent);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md), var(--shadow-inset);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  flex-wrap: wrap;
}
.theme-bar__title { display: flex; align-items: center; gap: 16px; min-width: 0; }
.theme-bar__icon {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: var(--chip-radius);
  background: var(--grad);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.3);
  position: relative;
}
.theme-bar__icon::after {
  content: "";
  position: absolute; inset: 0; margin: auto;
  width: 26px; height: 26px;
  background: #fff;
  -webkit-mask: var(--icon-edit) center / contain no-repeat;
  mask: var(--icon-edit) center / contain no-repeat;
}
.theme-bar__titlestack { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.theme-bar__titletext {
  font-family: var(--font-display);
  font-weight: 800; font-size: 28px;
  color: var(--text); letter-spacing: -0.03em; line-height: 1.05;
}
.theme-bar__subtitle { font-size: 14px; color: var(--text-muted); font-weight: 500; }

.theme-bar__controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.theme-quick {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; background: var(--bg-elev);
  border-radius: 18px; border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm); flex-wrap: wrap;
}
.theme-quick__label {
  font-size: 11px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 800; margin-right: 2px;
}

.swatch {
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 2.5px solid transparent;
  cursor: pointer;
  transition: transform .25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .2s ease, border-color .2s ease;
  position: relative; outline: none; padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.3);
}
.swatch:hover { transform: translateY(-2px) scale(1.06); box-shadow: 0 6px 14px rgba(0,0,0,.18); }
.swatch[aria-pressed="true"] {
  border-color: var(--text);
  box-shadow: 0 4px 12px rgba(0,0,0,.2), 0 0 0 3px var(--bg-elev) inset;
}
.swatch[aria-pressed="true"]::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; background: #fff;
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* Per-theme swatch gradients */
.swatch[data-theme="corporate"] { background:linear-gradient(135deg,#3f78bd 0%,#1d4e89 100%); }
.swatch[data-theme="lavender"]  { background:linear-gradient(135deg,#a37cf0 0%,#6e3fc4 100%); border-radius:50%; }
.swatch[data-theme="editorial"] { background:linear-gradient(135deg,#c2603f 0%,#9a3324 100%); border-radius:6px; }
.swatch[data-theme="amber"]     { background:linear-gradient(135deg,#e0a93c 0%,#bf7d1a 100%); }
.swatch[data-theme="carbon"]    { background:linear-gradient(135deg,#38bdf8 0%,#2dd4bf 100%); }

/* ============================================================
   CONTAINER / FORM
   ============================================================ */

.container {
  max-width: 1180px !important; width: 100% !important; margin: 0 auto !important;
  padding: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
}
.container form { background: transparent !important; min-height: auto !important; overflow: visible !important; margin-top: 0 !important; }
.container img.backimg {
  width: 100% !important; height: auto !important; max-height: 240px; object-fit: contain; display: block;
  border-radius: var(--radius-xl); margin-bottom: 16px; box-shadow: var(--shadow-md); border: none;
}

/* ============================================================
   SECTION CARDS
   ============================================================ */

.container form > div.first,
.container form .details {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-xl);
  padding: 0;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm), var(--shadow-inset);
  transition: box-shadow .3s ease, border-color .3s ease, transform .3s ease;
  position: relative; overflow: hidden;
}
.container form > div.first:hover,
.container form .details:hover {
  box-shadow: var(--shadow-md), var(--shadow-inset);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.container form .details > .fields,
.container form .details > .fields-section,
.container form .details > .stage-container,
.container form .details > div:not(.fields):not(.stage-container) { padding: 0 32px 28px; }
.container form > div.first { padding: 28px 32px; }
.container form > div.first .details { box-shadow: none; border: 1.5px solid var(--border); margin-bottom: 18px; }
.container form > div.first .details:last-child { margin-bottom: 0; }

/* ============================================================
   SECTION HEADER — gradient icon chip (shape varies per theme) + title
   ============================================================ */

.title.alert,
.title.alert-info,
span.title {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  background: linear-gradient(180deg, var(--accent-soft) 0%, transparent 140%) !important;
  border: none !important;
  border-bottom: 1.5px solid var(--border) !important;
  padding: 20px 28px !important;
  margin: 0 0 4px !important;
  border-radius: 0 !important;
  height: auto !important;
  font-family: var(--font-display) !important;
  font-size: 21px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -0.02em;
  line-height: 1.2 !important;
  position: relative;
}
.title.alert::before,
.title.alert-info::before,
span.title::before {
  content: "";
  width: 46px; height: 46px; flex-shrink: 0;
  border-radius: var(--chip-radius);
  background: var(--grad);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.3);
  -webkit-mask: none;
}
.title.alert::after,
.title.alert-info::after,
span.title::after {
  content: "";
  position: absolute; left: 28px; top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px; display: block;
  background: #fff;
  -webkit-mask: var(--icon-default) center / 24px 24px no-repeat;
  mask: var(--icon-default) center / 24px 24px no-repeat;
  pointer-events: none;
}

/* Per-section glyph mapping */
.details.personal span.title::after,
div.first .details.personal span.title::after { -webkit-mask: var(--icon-user) center / 24px 24px no-repeat; mask: var(--icon-user) center / 24px 24px no-repeat; }
.details.family span.title::after { -webkit-mask: var(--icon-users) center / 24px 24px no-repeat; mask: var(--icon-users) center / 24px 24px no-repeat; }
.details.JobInformation span.title::after { -webkit-mask: var(--icon-briefcase) center / 24px 24px no-repeat; mask: var(--icon-briefcase) center / 24px 24px no-repeat; }
.details.MedicalInformation span.title::after { -webkit-mask: var(--icon-heart) center / 24px 24px no-repeat; mask: var(--icon-heart) center / 24px 24px no-repeat; }
.details.Contact span.title::after { -webkit-mask: var(--icon-phone) center / 24px 24px no-repeat; mask: var(--icon-phone) center / 24px 24px no-repeat; }
.details.Qualifications span.title::after { -webkit-mask: var(--icon-cap) center / 24px 24px no-repeat; mask: var(--icon-cap) center / 24px 24px no-repeat; }
.details.Education span.title::after { -webkit-mask: var(--icon-book) center / 24px 24px no-repeat; mask: var(--icon-book) center / 24px 24px no-repeat; }
.details.Experience span.title::after { -webkit-mask: var(--icon-chart) center / 24px 24px no-repeat; mask: var(--icon-chart) center / 24px 24px no-repeat; }
.details.IDInformation span.title::after { -webkit-mask: var(--icon-id) center / 24px 24px no-repeat; mask: var(--icon-id) center / 24px 24px no-repeat; }
.details.PassportInformation span.title::after { -webkit-mask: var(--icon-passport) center / 24px 24px no-repeat; mask: var(--icon-passport) center / 24px 24px no-repeat; }
.details.DrivingLicenseInformation span.title::after { -webkit-mask: var(--icon-car) center / 24px 24px no-repeat; mask: var(--icon-car) center / 24px 24px no-repeat; }
.details.ComputerExperience span.title::after { -webkit-mask: var(--icon-monitor) center / 24px 24px no-repeat; mask: var(--icon-monitor) center / 24px 24px no-repeat; }
.details.Relativeinformation span.title::after { -webkit-mask: var(--icon-contact) center / 24px 24px no-repeat; mask: var(--icon-contact) center / 24px 24px no-repeat; }
.details.Training span.title::after { -webkit-mask: var(--icon-award) center / 24px 24px no-repeat; mask: var(--icon-award) center / 24px 24px no-repeat; }
.details.Penalties span.title::after { -webkit-mask: var(--icon-alert) center / 24px 24px no-repeat; mask: var(--icon-alert) center / 24px 24px no-repeat; }
.details.Tarkayat span.title::after { -webkit-mask: var(--icon-trend) center / 24px 24px no-repeat; mask: var(--icon-trend) center / 24px 24px no-repeat; }
.details.Aharat span.title::after { -webkit-mask: var(--icon-pin) center / 24px 24px no-repeat; mask: var(--icon-pin) center / 24px 24px no-repeat; }
.details.Bahsat span.title::after { -webkit-mask: var(--icon-search) center / 24px 24px no-repeat; mask: var(--icon-search) center / 24px 24px no-repeat; }
.details.Vacancies span.title::after { -webkit-mask: var(--icon-calendar) center / 24px 24px no-repeat; mask: var(--icon-calendar) center / 24px 24px no-repeat; }
.details.stage span.title::after { -webkit-mask: var(--icon-layers) center / 24px 24px no-repeat; mask: var(--icon-layers) center / 24px 24px no-repeat; }
.details.AnualReports span.title::after { -webkit-mask: var(--icon-report) center / 24px 24px no-repeat; mask: var(--icon-report) center / 24px 24px no-repeat; }
.details.CV span.title::after { -webkit-mask: var(--icon-doc) center / 24px 24px no-repeat; mask: var(--icon-doc) center / 24px 24px no-repeat; }
.details.captcha span.title::after { -webkit-mask: var(--icon-shield) center / 24px 24px no-repeat; mask: var(--icon-shield) center / 24px 24px no-repeat; }

/* ============================================================
   FIELDS GRID
   ============================================================ */

.fields {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px 28px !important; align-items: start !important;
}
@media (max-width: 720px) { .fields { grid-template-columns: 1fr !important; gap: 14px !important; } }
.fields-section { display: grid !important; gap: 18px 28px !important; align-items: start !important; }
@media (max-width: 720px) { .fields-section { grid-template-columns: 1fr !important; gap: 14px !important; } }
.input-field, .input-field-radio, .input-field-file, .input-field-education {
  margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 8px;
}

.input-field label, .input-field-radio label, .input-field-file label, .input-field-education label {
  font-size: 12px !important; font-weight: 700 !important; color: var(--text-soft) !important;
  text-transform: uppercase; letter-spacing: 0.08em;
  display: flex !important; align-items: center; gap: 6px; margin: 0 !important;
}
.input-field label::before, .input-field-radio label::before,
.input-field-file label::before, .input-field-education label::before {
  content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); opacity: 0.6;
}
.language-label { text-transform: none !important; letter-spacing: normal !important; font-size: 13px !important; font-weight: 600 !important; }
.language-label::before { display: none; }

.input-field input, .input-field-radio input[type="text"], .input-field-radio input[type="number"],
.input-field-radio input[type="date"], .input-field-education input[type="text"],
.input-field-education input[type="number"], .input-field input[type="text"],
.input-field input[type="number"], .input-field input[type="date"], .input-field input[type="email"],
.input-field input[type="tel"], .input-field textarea, input.txt_field, input.txt_fieldsmall, textarea.txt_area {
  width: 100% !important; height: 48px !important; padding: 0 16px !important; margin: 0 !important;
  font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 500 !important;
  color: var(--text) !important;
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    linear-gradient(180deg, var(--field-border), var(--field-border)) border-box !important;
  border: 2px solid transparent !important; border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-inset), 0 1px 2px rgba(0,0,0,.06) !important; outline: none !important;
  transition: all .2s ease; box-sizing: border-box;
}
textarea.txt_area, .input-field textarea {
  height: auto !important; min-height: 100px !important; padding: 12px 16px !important; resize: vertical; line-height: 1.5;
}
.input-field input:hover, input.txt_field:hover, input.txt_fieldsmall:hover, textarea.txt_area:hover {
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    linear-gradient(180deg, var(--accent), var(--accent-2)) border-box !important;
  box-shadow: var(--shadow-inset), 0 2px 8px -3px var(--ring) !important;
}
.input-field input:focus, .input-field-radio input:focus, input.txt_field:focus, input.txt_fieldsmall:focus, textarea.txt_area:focus {
  background:
    linear-gradient(var(--bg-elev), var(--bg-elev)) padding-box,
    linear-gradient(135deg, var(--accent), var(--accent-2)) border-box !important;
  box-shadow: 0 0 0 4px var(--ring), var(--shadow-inset) !important;
}
.input-field input::placeholder, input.txt_field::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 0.7; font-weight: 400; }

select, select.select_class, select.selectlanguage_class {
  width: 100% !important; height: 48px !important; padding: 0 42px 0 16px !important; margin: 0 !important;
  font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 500 !important; color: var(--text) !important;
  background-color: var(--bg-elev) !important;
  background-image: var(--select-arrow) !important;
  background-repeat: no-repeat !important; background-position: right 16px center !important; background-size: 12px 8px !important;
  border: 2px solid var(--field-border) !important; border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-inset), 0 1px 2px rgba(0,0,0,.06) !important;
  outline: none !important; appearance: none !important; -webkit-appearance: none !important; cursor: pointer; transition: all .2s ease; box-sizing: border-box;
}
select:hover { border-color: var(--accent) !important; box-shadow: var(--shadow-inset), 0 2px 8px -2px var(--ring) !important; }
/* open / focused state — accent border, lifted glow, brighter chevron */
select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--ring), var(--shadow-md) !important;
  background-color: var(--bg-elev) !important;
  background-size: 13px 9px !important;
}
.selectlanguage_class { max-width: 280px; }

/* Beautiful native option list (styling supported in most modern browsers) */
select option {
  background: var(--bg-elev);
  color: var(--text);
  font-weight: 500;
  padding: 12px 16px;
}
select option:hover,
select option:focus,
select option:checked {
  background: linear-gradient(0deg, var(--accent-soft), var(--accent-soft)) !important;
  color: var(--accent-strong) !important;
  font-weight: 600;
}
select option:checked { box-shadow: inset 3px 0 0 var(--accent); }
/* themed scrollbar inside the popup where supported */
select { scrollbar-width: thin; scrollbar-color: var(--accent) var(--bg-soft); }

.input-field:has(.selectlanguage_class) {
  flex-direction: row !important; align-items: center !important; gap: 14px !important;
  background: linear-gradient(135deg, var(--bg-soft), var(--bg-elev));
  padding: 14px 20px; border-radius: var(--radius-md); border: 1.5px solid var(--border);
  margin: 0 32px 8px !important; box-shadow: var(--shadow-sm);
}
.input-field:has(.selectlanguage_class) label { margin: 0 !important; white-space: nowrap; }
.input-field:has(.selectlanguage_class) .language-label::before {
  display: inline-block !important; content: ""; width: 16px; height: 16px; border-radius: 0;
  background: var(--accent); opacity: 1;
  -webkit-mask: var(--icon-globe) center / contain no-repeat; mask: var(--icon-globe) center / contain no-repeat;
}

.input-field-radio {
  background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: var(--radius-md);
  padding: 12px 16px; box-shadow: var(--shadow-inset);
}
.input-field-radio > span {
  display: inline-flex !important; align-items: center; gap: 8px;
  margin: 6px 16px 6px 0 !important; padding: 4px 10px 4px 0 !important;
  font-size: 14px !important; font-weight: 500; color: var(--text); cursor: pointer; border-radius: 99px; transition: background .15s;
}
.input-field-radio > span:hover { background: var(--accent-soft); }
input[type="radio"], input[type="checkbox"] { width: 17px !important; height: 17px !important; margin: 0 !important; accent-color: var(--accent); cursor: pointer; }

.input-field-file {
  background:
    linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box,
    repeating-linear-gradient(45deg, var(--border-strong) 0 6px, transparent 6px 14px) border-box;
  border: 2px dashed transparent; border-radius: var(--radius-md); padding: 16px 18px; transition: all .2s ease; position: relative;
}
.input-field-file:hover {
  background:
    linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box,
    repeating-linear-gradient(45deg, var(--accent) 0 6px, transparent 6px 14px) border-box;
}
.input-field-file label::after {
  content: ""; display: inline-block; width: 13px; height: 13px; margin-left: 5px; background: var(--text-muted);
  -webkit-mask: var(--icon-upload) center / contain no-repeat; mask: var(--icon-upload) center / contain no-repeat; vertical-align: -1px;
}
.input-field-file input[type="file"] {
  width: 100% !important; margin: 0 !important; padding: 0 !important; font-size: 13px !important; color: var(--text-soft) !important;
  background: transparent !important; border: none !important; height: auto !important; box-shadow: none !important;
}
.input-field-file input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 9px 16px; border: none; background: var(--accent); color: var(--accent-contrast);
  border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: 600; font-size: 13px; cursor: pointer; transition: all .15s ease; letter-spacing: 0.02em;
}
.input-field-file input[type="file"]::file-selector-button:hover { background: var(--accent-strong); transform: translateY(-1px); }

.details.Education .fields, .details.Experience .fields, .details.Relativeinformation .fields {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
}
.input-field-education {
  background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 14px; gap: 10px; box-shadow: var(--shadow-inset);
}
.input-field-education input, .input-field-education input.txt_field, .input-field-education input.txt_fieldsmall {
  width: 100% !important; height: 42px !important; padding: 0 12px !important;
}

.acadmic table { border: none !important; background: transparent; }
.acadmic table td { padding: 0 4px 8px 0 !important; border: none !important; }
.acadmic select { height: 42px !important; padding: 0 32px 0 12px !important; }

/* Small buttons */
input.submit, input[type="button"].submit {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px !important;
  border: 1.5px solid var(--border-strong) !important; background: var(--bg-elev) !important; color: var(--text) !important;
  border-radius: var(--radius-sm) !important; font-family: var(--font-body); font-size: 13px !important; font-weight: 600 !important;
  cursor: pointer; transition: all .2s ease; box-shadow: var(--shadow-sm); letter-spacing: 0.01em;
}
input.submit:hover, input[type="button"].submit:hover {
  background: var(--accent-soft) !important; border-color: var(--accent) !important; color: var(--accent-strong) !important; transform: translateY(-1px); box-shadow: var(--shadow-md);
}
input.verfiy.submit, input.epush_verfiy.submit { background: var(--accent) !important; color: var(--accent-contrast) !important; border-color: var(--accent) !important; }
input.verfiy.submit:hover, input.epush_verfiy.submit:hover { background: var(--accent-strong) !important; color: var(--accent-contrast) !important; }

/* Main submit button */
button[name="adpro"], #ButtonAdd {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px;
  margin: 40px auto !important; padding: 0 44px !important; height: 60px !important; min-width: 280px; max-width: none !important; width: auto !important;
  background: var(--grad) !important; color: #fff !important; border: none !important; border-radius: var(--radius-lg) !important;
  font-family: var(--font-body) !important; font-size: 16px !important; font-weight: 700 !important; letter-spacing: 0.02em; cursor: pointer;
  box-shadow: var(--shadow-md), 0 0 0 0 var(--ring); transition: all .3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden;
}
button[name="adpro"]::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
  transform: translateX(-100%); transition: transform .6s ease;
}
button[name="adpro"]:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), 0 0 0 6px var(--ring); }
button[name="adpro"]:hover::before { transform: translateX(100%); }
button[name="adpro"]::after {
  content: ""; width: 19px; height: 19px; background: #fff;
  -webkit-mask: var(--icon-send) center / contain no-repeat; mask: var(--icon-send) center / contain no-repeat; transition: transform .3s ease;
}
button[name="adpro"]:hover::after { transform: translateX(5px) translateY(-3px) rotate(8deg); }
div:has(> button[name="adpro"]) { padding-left: 0 !important; margin-top: 0 !important; text-align: center; }

/* Captcha */
.details.captcha { background: var(--surface) !important; }
.details.captcha .fields, .details.captcha > div { padding: 0 32px 28px; }
.details.captcha canvas {
  background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 4px; box-shadow: var(--shadow-inset);
}
#refresh-captcha {
  font-size: 0 !important; color: transparent; cursor: pointer; padding: 0; width: 44px; height: 44px;
  border-radius: var(--radius-sm); transition: all .3s ease; background: var(--bg-soft); border: 1.5px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center; position: relative;
}
#refresh-captcha::before {
  content: ""; width: 20px; height: 20px; background: var(--accent);
  -webkit-mask: var(--icon-refresh) center / contain no-repeat; mask: var(--icon-refresh) center / contain no-repeat;
}
#refresh-captcha:hover { background: var(--accent-soft); border-color: var(--accent); transform: rotate(180deg); }
#captcha-input { width: 240px !important; font-family: var(--font-mono) !important; letter-spacing: 0.2em !important; text-align: center; font-weight: 600 !important; }

/* Section pill checkboxes */
input[name="ch[]"] { position: absolute !important; opacity: 0; pointer-events: none; }
input[name="ch[]"] + span {
  display: inline-flex !important; align-items: center; gap: 8px; padding: 9px 20px !important; border-radius: 99px;
  background: var(--bg-soft); border: 2px solid var(--border); font-size: 14px !important; font-weight: 500;
  margin: 4px 6px 4px 0 !important; cursor: pointer; transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; color: var(--text);
}
input[name="ch[]"] + span::before { content: "+"; font-size: 14px; color: var(--text-muted); font-weight: 700; transition: all .2s; }
input[name="ch[]"] + span:hover { border-color: var(--border-strong); transform: translateY(-1px); }
input[name="ch[]"]:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); box-shadow: 0 4px 12px var(--ring); }
input[name="ch[]"]:checked + span::before { content: "✓"; color: var(--accent-contrast); }

/* Verification */
.vv input.vc {
  height: 46px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: var(--radius-md);
  font-family: var(--font-mono); letter-spacing: 0.4em; font-size: 18px; text-align: center; width: 180px;
  background: var(--bg-elev); color: var(--text); font-weight: 600; box-shadow: var(--shadow-inset);
}
.vv input.vc:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring), var(--shadow-inset); }
.vvS, .vvW {
  display: block; margin-top: 10px; padding: 10px 14px; background: var(--accent-soft); border-radius: var(--radius-sm);
  font-size: 13px; color: var(--accent-strong); border-left: 4px solid var(--accent); font-weight: 500;
}
.textfieldRequiredMsg { color: var(--danger); font-size: 12px; margin-top: 6px; display: block; font-weight: 500; }

/* Back link */
td[bgcolor="#eef6f9"] { background: transparent !important; padding: 28px 0 !important; }
a.red_bold {
  display: inline-flex; align-items: center; gap: 8px; color: var(--text-soft) !important; text-decoration: none;
  font-family: var(--font-body) !important; font-size: 14px !important; font-weight: 600; padding: 10px 18px; border-radius: 99px;
  border: 1.5px solid var(--border); background: var(--bg-elev); transition: all .2s ease; box-shadow: var(--shadow-sm);
}
a.red_bold::before {
  content: ""; width: 14px; height: 14px; background: currentColor;
  -webkit-mask: var(--icon-back) center / contain no-repeat; mask: var(--icon-back) center / contain no-repeat;
}
a.red_bold:hover { background: var(--accent-soft); color: var(--accent-strong) !important; border-color: var(--accent); transform: translateX(-2px); }

/* Confirmation page */
.bodywarning2 { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 32px; box-shadow: var(--shadow-lg), var(--shadow-inset); }
aside.callout {
  background: var(--bg-soft) !important; border: 1.5px solid var(--border) !important; border-left: 4px solid var(--accent) !important;
  border-radius: var(--radius-md) !important; padding: 22px 26px !important; margin-bottom: 18px; box-shadow: var(--shadow-inset);
}
aside.callout b#titleonline1 { font-family: var(--font-display); font-size: 20px; color: var(--text); display: block; margin-bottom: 14px; letter-spacing: -0.01em; font-weight: 700; }
#textonline1, span#textonline1 { color: var(--text-soft); font-size: 14px; line-height: 1.7; }
#header.text-primary { font-family: var(--font-display) !important; font-size: 32px !important; color: var(--text) !important; text-align: center; margin: 28px 0; letter-spacing: -0.02em; font-weight: 700; }
#header.text-primary spna { color: var(--accent) !important; }

/* Inputs misc */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.5; cursor: pointer; transition: opacity .15s; }
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
[data-theme="carbon"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) brightness(.9); opacity: .7; }

::selection { background: var(--accent); color: var(--accent-contrast); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Load animation */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.container form > div.first, .container form .details { animation: fadeUp .5s cubic-bezier(0.16, 1, 0.3, 1) backwards; }
.container form .details:nth-child(1) { animation-delay: .04s; }
.container form .details:nth-child(2) { animation-delay: .08s; }
.container form .details:nth-child(3) { animation-delay: .12s; }
.container form .details:nth-child(4) { animation-delay: .16s; }
.container form .details:nth-child(5) { animation-delay: .20s; }
.container form .details:nth-child(6) { animation-delay: .24s; }
.container form .details:nth-child(7) { animation-delay: .28s; }

/* Responsive */
@media (max-width: 880px) {
  .theme-bar { flex-direction: column; align-items: stretch; }
  .theme-bar__title { justify-content: flex-start; }
  .theme-quick { overflow-x: auto; }
}
@media (max-width: 600px) {
  body > table[width="1250"] td[bgcolor="#EEF8FF"] { padding: 0 12px; }
  .container form .details > .fields, .container form .details > .fields-section,
  .container form .details > div:not(.fields):not(.stage-container) { padding: 0 18px 22px; }
  .container form > div.first { padding: 20px 18px; }
  .theme-bar { padding: 14px 16px; gap: 14px; }
  .theme-bar__titletext { font-size: 22px; }
  .theme-bar__subtitle { font-size: 12px; }
  .theme-bar__icon { width: 44px; height: 44px; }
  button[name="adpro"], #ButtonAdd { width: 100% !important; min-width: 0; }
  .title.alert, .title.alert-info, span.title { font-size: 18px !important; padding: 16px 18px !important; }
  .title.alert::before, .title.alert-info::before, span.title::before { width: 40px; height: 40px; }
  .title.alert::after, .title.alert-info::after, span.title::after { left: 18px; width: 40px; height: 40px; }
  .input-field:has(.selectlanguage_class) { margin: 0 18px 8px !important; }
}
@media print {
  .theme-bar { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  body::before, body::after { display: none !important; }
}

/* ============================================================
   REMOVE BUTTON
   ============================================================ */
.remove-row {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: transparent;
  border: 1.5px solid var(--border); border-radius: 40px; padding: 6px 16px; margin-top: 8px;
  font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); outline: none; position: relative; overflow: hidden;
}
.remove-row:hover { background: linear-gradient(135deg, var(--danger) 0%, #c0392b 100%); border-color: var(--danger); color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(192, 57, 43, 0.3); }
.remove-row:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(192, 57, 43, 0.2); }
.remove-row:focus-visible { outline: none; border-color: var(--danger); box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.3); }
.training-row .remove-row, .penalty-row .remove-row, .report-row .remove-row { margin-top: 12px; margin-left: auto; }
.tarkayat-row .remove-row, .aharat-row .remove-row, .bahsat-row .remove-row, .vacancy-row .remove-row { justify-self: end; margin-top: 8px; }
@media (max-width: 768px) { .remove-row { padding: 5px 12px; font-size: 11px; } }
[dir="rtl"] .remove-row { flex-direction: row-reverse; }
[dir="rtl"] .training-row .remove-row, [dir="rtl"] .penalty-row .remove-row, [dir="rtl"] .report-row .remove-row { margin-left: 0; margin-right: auto; }

#training-fields, #penalties-fields, #tarkayat-fields, #aharat-fields, #bahsat-fields, #vacancies-fields, #reports-fields { grid-column: 1 / -1; }
.details.Training > div[style], .details.Penalties > div[style], .details.Tarkayat > div[style],
.details.Aharat > div[style], .details.Bahsat > div[style], .details.Vacancies > div[style], .details.AnualReports > div[style] {
  padding: 0 32px 28px !important;
}

/* ============================================================
   STAGE SECTION
   ============================================================ */
.details.stage { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--radius-xl); padding: 0 0 28px; margin-bottom: 22px; }
.stage-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; padding: 16px 32px 0; }
.stage-section-card { background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all 0.3s ease; box-shadow: var(--shadow-sm); }
.stage-section-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.stage-section-header { background: linear-gradient(135deg, var(--accent-soft) 0%, var(--bg-elev) 100%); padding: 16px 20px; border-bottom: 2px solid var(--accent); display: flex; align-items: center; gap: 10px; }
.stage-section-header::before { content: ""; width: 16px; height: 16px; flex-shrink: 0; background: var(--accent); -webkit-mask: var(--icon-layers) center / contain no-repeat; mask: var(--icon-layers) center / contain no-repeat; }
.stage-section-header h3 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
.stage-section-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.stage-item { padding: 4px 0; border-bottom: 1px dashed var(--border); }
.stage-item:last-child { border-bottom: none; }
.stage-checkbox-label { display: flex; align-items: center; gap: 12px; cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--text); transition: all 0.2s ease; padding: 6px 8px; border-radius: var(--radius-sm); }
.stage-checkbox-label:hover { background: var(--accent-soft); transform: translateX(4px); }
.stage-checkbox-label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent); margin: 0; }
.stage-checkbox-label span { flex: 1; }
.stage-empty { text-align: center; padding: 24px; color: var(--text-muted); font-style: italic; font-size: 13px; }
@media (max-width: 768px) { .stage-container { grid-template-columns: 1fr; gap: 16px; padding: 16px 18px 0; } .stage-section-header h3 { font-size: 16px; } .stage-checkbox-label { font-size: 13px; } }

/* ============================================================
   ICON LIBRARY — inline SVG masks (job/HR + UI shapes)
   ============================================================ */
:root {
  --icon-edit: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4h7'/><path d='M5 4v15a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-7'/><path d='M16.5 3.5a2 2 0 0 1 3 3L12 14l-4 1 1-4 7.5-7.5z'/></svg>");
  --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5 10 17.5 19 6.5'/></svg>");
  --icon-briefcase: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='7' width='20' height='14' rx='2'/><path d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/><path d='M2 13h20'/></svg>");
  --icon-user: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/></svg>");
  --icon-users: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='8' r='3.2'/><path d='M3 20v-1a5 5 0 0 1 5-5h2a5 5 0 0 1 5 5v1'/><path d='M16 4.5a3 3 0 0 1 0 6'/><path d='M18 14h.5a4.5 4.5 0 0 1 4.5 4.5V20'/></svg>");
  --icon-heart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20s-7-4.6-9.3-9A5 5 0 0 1 12 5a5 5 0 0 1 9.3 6c-2.3 4.4-9.3 9-9.3 9z'/><path d='M3.5 12h4l1.5-3 2.5 6 2-4 1 1h5.5'/></svg>");
  --icon-phone: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 4h3l2 5-2.5 1.5a11 11 0 0 0 5 5L19 13l2 5v3a1 1 0 0 1-1 1A16 16 0 0 1 4 5a1 1 0 0 1 1-1z'/></svg>");
  --icon-cap: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4 2 9l10 5 10-5-10-5z'/><path d='M6 11v5a6 3 0 0 0 12 0v-5'/><path d='M22 9v5'/></svg>");
  --icon-book: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5a2 2 0 0 1 2-2h14v16H6a2 2 0 0 0-2 2z'/><path d='M4 19a2 2 0 0 1 2-2h14'/></svg>");
  --icon-chart: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4v16h16'/><rect x='7' y='11' width='3' height='6'/><rect x='12' y='7' width='3' height='10'/><rect x='17' y='13' width='3' height='4'/></svg>");
  --icon-id: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='5' width='20' height='14' rx='2'/><circle cx='8' cy='12' r='2.2'/><path d='M5 16.5a3 3 0 0 1 6 0'/><path d='M14 9.5h5'/><path d='M14 13h5'/></svg>");
  --icon-passport: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='3' width='14' height='18' rx='2'/><circle cx='12' cy='10' r='3'/><path d='M9.5 16h5'/></svg>");
  --icon-car: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 13l2-5a2 2 0 0 1 2-1.3h10A2 2 0 0 1 19 8l2 5'/><path d='M3 13h18v4a1 1 0 0 1-1 1h-1'/><path d='M3 13v4a1 1 0 0 0 1 1h1'/><circle cx='7.5' cy='18' r='1.5'/><circle cx='16.5' cy='18' r='1.5'/></svg>");
  --icon-monitor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='12' rx='2'/><path d='M8 20h8'/><path d='M12 16v4'/></svg>");
  --icon-contact: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='16' rx='2'/><circle cx='9' cy='10' r='2.2'/><path d='M6 16a3 3 0 0 1 6 0'/><path d='M15 9h3'/><path d='M15 13h3'/></svg>");
  --icon-award: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='9' r='5'/><path d='M9 13.5 7.5 21l4.5-2.5L16.5 21 15 13.5'/></svg>");
  --icon-alert: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 2 20h20L12 3z'/><path d='M12 9v5'/><path d='M12 17.5h.01'/></svg>");
  --icon-trend: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 17l6-6 4 4 7-7'/><path d='M16 8h5v5'/></svg>");
  --icon-pin: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-6-7-11a7 7 0 0 1 14 0c0 5-7 11-7 11z'/><circle cx='12' cy='10' r='2.5'/></svg>");
  --icon-search: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='6'/><path d='M20 20l-3.5-3.5'/></svg>");
  --icon-calendar: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='5' width='18' height='16' rx='2'/><path d='M3 9h18'/><path d='M8 3v4'/><path d='M16 3v4'/></svg>");
  --icon-layers: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 2 8l10 5 10-5-10-5z'/><path d='M2 13l10 5 10-5'/><path d='M2 18l10 5 10-5' opacity='.5'/></svg>");
  --icon-report: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2h8l4 4v16H6z'/><path d='M14 2v4h4'/><path d='M9 13h6'/><path d='M9 17h4'/></svg>");
  --icon-doc: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 2h7l5 5v15H7z'/><path d='M14 2v5h5'/><path d='M10 12h5'/><path d='M10 16h5'/><path d='M10 8h2'/></svg>");
  --icon-shield: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 5 6v5c0 4.5 3 8 7 10 4-2 7-5.5 7-10V6l-7-3z'/><path d='M9 12l2 2 4-4'/></svg>");
  --icon-globe: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18'/><path d='M12 3c3 3 3 15 0 18-3-3-3-15 0-18z'/></svg>");
  --icon-upload: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 16V4'/><path d='M7 9l5-5 5 5'/><path d='M4 20h16'/></svg>");
  --icon-refresh: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-3-6.7'/><path d='M21 4v5h-5'/></svg>");
  --icon-send: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 2 11 13'/><path d='M22 2 15 22l-4-9-9-4 20-7z'/></svg>");
  --icon-back: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M19 12H5'/><path d='M11 6l-6 6 6 6'/></svg>");
  --icon-default: var(--icon-briefcase);
}

/* ============================================================
   ============  STYLE PERSONALITIES  =========================
   refined  → corporate · amber  (polished default)
   glass    → lavender           (frosted translucent, glow halo, circular chips)
   editorial→ editorial          (serif, hairline underlines, square chips, no boxes)
   dark     → carbon             (sleek developer dark + cyan glow)
   ============================================================ */

/* ---- GLASS (lavender) ---- */
[data-theme="lavender"] .container form .details,
[data-theme="lavender"] .container form > div.first,
[data-theme="lavender"] .details.stage {
  background:color-mix(in srgb, var(--surface) 72%, transparent) !important;
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent) !important;
  border-radius:28px !important;
  box-shadow:0 18px 50px -18px var(--accent), inset 0 1px 0 rgba(255,255,255,.5) !important;
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
}
[data-theme="lavender"] span.title,
[data-theme="lavender"] .title.alert-info {
  border-bottom:1px solid color-mix(in srgb, var(--accent) 20%, transparent) !important;
}
[data-theme="lavender"] span.title::before {
  box-shadow:0 10px 24px -8px var(--accent), inset 0 1px 0 rgba(255,255,255,.4);
}
[data-theme="lavender"] .input-field input,
[data-theme="lavender"] input.txt_field,
[data-theme="lavender"] select,
[data-theme="lavender"] textarea.txt_area {
  background:color-mix(in srgb, var(--bg-elev) 78%, transparent) !important;
  border:2px solid var(--field-border) !important;
  border-radius:16px !important;
}
[data-theme="lavender"] button[name="adpro"] {
  border-radius:999px !important; box-shadow:0 16px 40px -12px var(--accent) !important;
}

/* ---- EDITORIAL (serif, underline inputs, square chips, no boxes) ---- */
[data-theme="editorial"] .container form .details,
[data-theme="editorial"] .container form > div.first,
[data-theme="editorial"] .details.stage {
  border:1px solid var(--border) !important; border-radius:6px !important; box-shadow:none !important;
}
[data-theme="editorial"] .container form .details:hover,
[data-theme="editorial"] .container form > div.first:hover {
  transform:none; box-shadow:none !important; border-color:var(--accent) !important;
}
[data-theme="editorial"] span.title,
[data-theme="editorial"] .title.alert-info {
  background:transparent !important; border-bottom:2px solid var(--text) !important;
  font-family:var(--font-display) !important; font-weight:600 !important; font-size:25px !important;
}
[data-theme="editorial"] .input-field label,
[data-theme="editorial"] .input-field-education label,
[data-theme="editorial"] .input-field-file label {
  font-family:var(--font-display) !important; text-transform:none !important; letter-spacing:0 !important;
  font-size:15px !important; font-weight:500 !important; color:var(--text) !important;
}
[data-theme="editorial"] .input-field label::before { display:none; }
[data-theme="editorial"] .input-field input,
[data-theme="editorial"] input.txt_field,
[data-theme="editorial"] input.txt_fieldsmall,
[data-theme="editorial"] textarea.txt_area,
[data-theme="editorial"] select {
  border:none !important; border-bottom:1.5px solid var(--border) !important; border-radius:0 !important;
  background:transparent !important; box-shadow:none !important; padding-left:2px !important;
}
[data-theme="editorial"] .input-field input:focus,
[data-theme="editorial"] input.txt_field:focus,
[data-theme="editorial"] select:focus { border-bottom:1.5px solid var(--accent) !important; box-shadow:none !important; }
[data-theme="editorial"] button[name="adpro"],
[data-theme="editorial"] #ButtonAdd { border-radius:6px !important; }

/* ---- DARK (carbon) — glow accents, mono section titles ---- */
[data-theme="carbon"] span.title,
[data-theme="carbon"] .title.alert-info {
  font-family:var(--font-mono) !important; font-weight:700 !important; font-size:18px !important;
  letter-spacing:-.01em;
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 12%, transparent) 0%, transparent 140%) !important;
  border-bottom:1px solid var(--border) !important;
}
[data-theme="carbon"] span.title::before {
  box-shadow:0 10px 26px -8px var(--accent), inset 0 1px 0 rgba(255,255,255,.15);
}
[data-theme="carbon"] .input-field-file {
  background:
    linear-gradient(var(--bg-soft), var(--bg-soft)) padding-box,
    repeating-linear-gradient(45deg, var(--border-strong) 0 6px, transparent 6px 14px) border-box !important;
}
[data-theme="carbon"] button[name="adpro"] {
  color:var(--accent-contrast) !important;
  box-shadow:0 16px 40px -12px var(--accent), 0 0 0 0 var(--ring) !important;
}
[data-theme="carbon"] input[name="ch[]"]:checked + span { color:var(--accent-contrast); }