:root {
  --ink: #172033;
  --muted: #667085;
  --subtle: #98a2b3;
  --line: #e4e7ec;
  --surface: #ffffff;
  --canvas: #f5f7fb;
  --nav: #101828;
  --nav-soft: #1d2939;
  --brand: #4f46e5;
  --brand-dark: #4338ca;
  --brand-soft: #eef2ff;
  --success: #067647;
  --danger: #d92d20;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, .06), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-md: 0 16px 40px rgba(16, 24, 40, .10);
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(79, 70, 229, .28) !important; outline-offset: 2px; }

/* Application shell */
body.app-shell { background: var(--canvas) !important; }
body.app-shell #sidebar {
  width: 16rem !important;
  background: var(--nav) !important;
  border-right: 1px solid rgba(255,255,255,.06);
}
body.app-shell #sidebar > div:first-child { padding: 1.35rem 1.15rem !important; }
body.app-shell #sidebar > div:first-child > div,
body.app-shell header .bg-blue-600,
body.app-shell header .bg-blue-500 {
  background: linear-gradient(145deg, #6366f1, #4338ca) !important;
  border-radius: .75rem !important;
  box-shadow: 0 8px 20px rgba(79,70,229,.28) !important;
}
body.app-shell #sidebar nav { padding: .9rem .75rem !important; }
body.app-shell .nav-item {
  min-height: 2.6rem;
  border-radius: .65rem;
  color: #98a2b3;
  font-size: .84rem;
  font-weight: 550;
  padding: .65rem .75rem;
}
body.app-shell .nav-item:not(.nav-active):hover { background: rgba(255,255,255,.055); color: #f9fafb; }
body.app-shell .nav-item.nav-active {
  background: rgba(99,102,241,.18);
  color: #c7d2fe;
  box-shadow: inset 3px 0 #818cf8;
}
body.app-shell #sidebar nav > p {
  color: #667085 !important;
  font-size: .67rem !important;
  letter-spacing: .13em !important;
  padding-top: 1.15rem !important;
}
body.app-shell header.lg\:hidden {
  min-height: 4rem;
  border-color: var(--line) !important;
  box-shadow: var(--shadow-xs) !important;
}
body.app-shell .flex-1.overflow-y-auto { background: var(--canvas); }

/* Page framing */
body.app-shell main[id^="section-"] {
  max-width: 72rem !important;
  padding: 2.2rem 2rem 4rem !important;
}
.home-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
  gap: 2rem;
  align-items: end;
  padding: 2rem;
  margin-bottom: 2rem;
  color: white;
  border-radius: 1.4rem;
  background:
    radial-gradient(circle at 87% 16%, rgba(165,180,252,.33), transparent 25%),
    linear-gradient(135deg, #1e1b4b 0%, #312e81 54%, #4338ca 100%);
  box-shadow: 0 18px 45px rgba(49,46,129,.18);
}
.home-hero::after {
  content: "";
  position: absolute;
  width: 12rem;
  height: 12rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 50%;
  right: -3rem;
  top: -6rem;
}
.home-eyebrow { color: #c7d2fe; font-size: .72rem; font-weight: 750; letter-spacing: .14em; text-transform: uppercase; }
.home-hero h1 { margin-top: .6rem; font-size: clamp(1.8rem, 3vw, 2.65rem); line-height: 1.08; font-weight: 760; letter-spacing: -.035em; }
.home-hero p { max-width: 38rem; margin-top: .7rem; color: #d0d5dd; font-size: .95rem; line-height: 1.6; }
.tool-search { position: relative; z-index: 1; }
.tool-search label { display: block; margin-bottom: .5rem; color: #e0e7ff; font-size: .76rem; font-weight: 650; }
.tool-search input {
  width: 100%;
  height: 3.1rem;
  padding: 0 1rem 0 2.8rem;
  color: var(--ink);
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(255,255,255,.65);
  border-radius: .85rem;
  box-shadow: 0 10px 24px rgba(16,24,40,.15);
}
.tool-search svg { position: absolute; left: .95rem; bottom: .98rem; width: 1.1rem; color: #667085; }
.tool-search input::placeholder { color: #98a2b3; }

/* Tool catalogue */
#section-home > h2 {
  margin: 1.75rem 0 .75rem !important;
  color: #475467 !important;
  font-size: .74rem !important;
  letter-spacing: .1em !important;
}
#section-home > .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .85rem !important;
  margin-bottom: 1.25rem !important;
}
#section-home > .grid > div {
  position: relative;
  min-height: 10.4rem;
  display: grid;
  grid-template-columns: 2.65rem minmax(0,1fr);
  grid-template-rows: auto auto 1fr;
  column-gap: .9rem;
  align-content: start;
  padding: 1.15rem !important;
  border: 1px solid var(--line) !important;
  border-radius: 1rem !important;
  box-shadow: var(--shadow-xs) !important;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
#section-home > .grid > div:hover {
  transform: translateY(-2px);
  border-color: #c7d2fe !important;
  box-shadow: var(--shadow-sm) !important;
}
#section-home > .grid > div > .text-2xl {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  margin: 0 !important;
  color: var(--brand);
  font-size: 0 !important;
  border-radius: .75rem;
  background: var(--brand-soft);
}
#section-home > .grid > div > .text-2xl svg { width: 1.3rem; height: 1.3rem; }
#section-home > .grid > div > p.font-semibold { grid-column: 2; color: var(--ink) !important; font-size: .92rem !important; line-height: 1.3; }
#section-home > .grid > div > p.text-xs { grid-column: 2; margin: .25rem 0 0 !important; color: #667085 !important; line-height: 1.45; }
#section-home > .grid > div > button {
  grid-column: 1 / -1;
  align-self: end;
  justify-self: start;
  margin-top: 1rem;
  color: var(--brand) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
}
#section-home > .grid > div > button::after { content: "  →"; }
#section-home > .grid > div > button { font-size: 0 !important; }
#section-home > .grid > div > button::before { content: "Open tool"; font-size: .78rem; }
.tool-empty { display: none; padding: 3rem 1rem; text-align: center; color: #667085; }
.tool-empty.visible { display: block; }

/* Shared tool pages */
.tool-page-header { margin-bottom: 1.35rem; }
.tool-page-header .eyebrow { color: var(--brand); font-size: .72rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.tool-page-header h1 { margin-top: .3rem; color: var(--ink); font-size: 1.75rem; line-height: 1.2; font-weight: 750; letter-spacing: -.025em; }
.tool-page-header p { margin-top: .4rem; max-width: 40rem; color: var(--muted); font-size: .9rem; line-height: 1.55; }
body.app-shell main[id^="section-"] > .bg-white,
body.app-shell main[id^="section-"] > div > .bg-white {
  border: 1px solid var(--line) !important;
  border-radius: 1.15rem !important;
  box-shadow: var(--shadow-sm) !important;
}
body.app-shell .shadow-lg { box-shadow: var(--shadow-sm) !important; }
body.app-shell [class*="border-dashed"] {
  border-width: 1.5px !important;
  border-color: #cbd5e1 !important;
  background: #fbfcfe;
}
body.app-shell [class*="border-dashed"]:hover { border-color: #818cf8 !important; background: #f5f3ff !important; }
body.app-shell .bg-blue-600 { background-color: var(--brand) !important; }
body.app-shell .hover\:bg-blue-700:hover { background-color: var(--brand-dark) !important; }
body.app-shell .text-blue-600, body.app-shell .text-blue-500 { color: var(--brand) !important; }
body.app-shell input:not([type="range"]):not([type="radio"]):not([type="checkbox"]),
body.app-shell select, body.app-shell textarea {
  border-color: #d0d5dd !important;
  border-radius: .7rem !important;
}
body.app-shell #loadingOverlay { background: rgba(16,24,40,.58) !important; }
body.app-shell #loadingOverlay > div { border: 1px solid rgba(255,255,255,.5); border-radius: 1.15rem !important; }

/* Login */
body.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 2rem;
  background:
    radial-gradient(circle at 15% 20%, rgba(129,140,248,.12), transparent 28%),
    radial-gradient(circle at 85% 80%, rgba(99,102,241,.1), transparent 30%),
    #f7f8fc !important;
}
.login-shell {
  width: min(64rem, 100%);
  min-height: 36rem;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-md);
}
.login-aside {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem;
  color: white;
  background: linear-gradient(145deg, #101828 0%, #1e1b4b 55%, #312e81 100%);
}
.login-aside::after { content:""; position:absolute; width:22rem; height:22rem; right:-9rem; bottom:-10rem; border:1px solid rgba(255,255,255,.11); border-radius:50%; box-shadow: 0 0 0 3.5rem rgba(255,255,255,.025), 0 0 0 7rem rgba(255,255,255,.018); }
.brand-lockup { position: relative; z-index:1; display:flex; align-items:center; gap:.75rem; font-weight:720; }
.brand-mark { width:2.55rem; height:2.55rem; display:grid; place-items:center; color:white; background:linear-gradient(145deg,#818cf8,#4f46e5); border-radius:.75rem; box-shadow:0 10px 24px rgba(79,70,229,.35); }
.brand-mark svg { width:1.25rem; }
.login-copy { position:relative; z-index:1; max-width:28rem; }
.login-copy span { color:#a5b4fc; font-size:.72rem; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
.login-copy h1 { margin-top:.75rem; font-size:2.35rem; line-height:1.1; font-weight:760; letter-spacing:-.04em; }
.login-copy p { margin-top:1rem; color:#cbd5e1; font-size:.95rem; line-height:1.65; }
.privacy-note { position:relative; z-index:1; display:flex; align-items:center; gap:.55rem; color:#98a2b3; font-size:.75rem; }
.privacy-note svg { width:1rem; color:#a5b4fc; }
.login-main { display:grid; align-content:center; padding:3.5rem; }
.login-main h2 { font-size:1.65rem; font-weight:750; letter-spacing:-.025em; }
.login-main > p { margin-top:.4rem; margin-bottom:2rem; color:var(--muted); font-size:.9rem; }
.login-main form { display:grid; gap:1.1rem; }
.field-label { display:block; margin-bottom:.45rem; color:#344054; font-size:.82rem; font-weight:650; }
.form-control { width:100%; height:3rem; padding:0 .9rem; color:var(--ink); background:white; border:1px solid #d0d5dd; border-radius:.7rem; box-shadow:var(--shadow-xs); }
.form-control:focus { border-color:#818cf8; outline:3px solid rgba(79,70,229,.12); }
.primary-button { width:100%; min-height:3rem; color:white; background:var(--brand); border:0; border-radius:.7rem; font-size:.9rem; font-weight:700; box-shadow:0 4px 12px rgba(79,70,229,.2); transition:.18s ease; }
.primary-button:hover { background:var(--brand-dark); transform:translateY(-1px); }
.form-alert { display:flex; align-items:flex-start; gap:.65rem; margin-bottom:1.3rem; padding:.85rem; color:#b42318; background:#fef3f2; border:1px solid #fecdca; border-radius:.75rem; font-size:.82rem; line-height:1.45; }
.form-alert svg { width:1rem; margin-top:.1rem; flex:none; }

/* Account and admin pages */
body.admin-page { min-height:100vh; background:var(--canvas) !important; }
body.admin-page > header { background:rgba(255,255,255,.92) !important; border-color:var(--line) !important; box-shadow:var(--shadow-xs) !important; backdrop-filter:blur(12px); }
body.admin-page > header > div { max-width:64rem !important; min-height:4.5rem; }
body.admin-page > main { max-width:64rem !important; padding-top:2.5rem !important; }
body.admin-page > main > .bg-white,
body.admin-page > main > div.bg-white { border:1px solid var(--line); border-radius:1.1rem !important; box-shadow:var(--shadow-sm) !important; }
body.admin-page input:not([type="radio"]), body.admin-page select { border-radius:.7rem !important; border-color:#d0d5dd !important; }
body.admin-page .bg-blue-600 { background:var(--brand) !important; }
body.admin-page .text-blue-700, body.admin-page .text-blue-600 { color:var(--brand) !important; }

@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; gap:1.4rem; }
  #section-home > .grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}
@media (max-width: 640px) {
  body.app-shell main[id^="section-"] { padding:1.25rem 1rem 3rem !important; }
  .home-hero { padding:1.45rem; margin-bottom:1.4rem; border-radius:1.1rem; }
  .home-hero h1 { font-size:1.7rem; }
  .home-hero p { font-size:.87rem; }
  #section-home > .grid { grid-template-columns:1fr !important; gap:.65rem !important; }
  #section-home > .grid > div { min-height:7.2rem; grid-template-rows:auto auto; padding:1rem !important; }
  #section-home > .grid > div > button { position:absolute; inset:0; width:100%; height:100%; opacity:0; }
  #section-home > .grid > div::after { content:"→"; position:absolute; right:1rem; top:50%; color:#98a2b3; transform:translateY(-50%); }
  #section-home > .grid > div > p { padding-right:1.5rem; }
  .tool-page-header h1 { font-size:1.45rem; }
  body.app-shell main[id^="section-"] > .p-8 { padding:1.25rem !important; }
  .login-page { padding:1rem !important; }
  .login-shell { display:block; min-height:0; border-radius:1.25rem; }
  .login-aside { min-height:10rem; justify-content:flex-start; padding:1.5rem; }
  .login-copy { margin-top:2rem; }
  .login-copy h1 { font-size:1.65rem; }
  .login-copy p, .privacy-note { display:none; }
  .login-main { padding:1.6rem 1.5rem 1.8rem; }
  .login-main h2 { font-size:1.35rem; }
  .login-main > p { margin-bottom:1.4rem; }
  body.admin-page > main { padding:1.5rem 1rem 3rem !important; }
  body.admin-page > main > .bg-white { padding:1.25rem !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}