/* AI Curator Consulting Suite styles. Colors and layout follow
   docs/AI_Curator_Consulting_Suite_Mockup.html. No inline styles anywhere:
   the Content-Security-Policy (main.py) only allows this file. */
:root {
  --bg: #050611; --panel: #0b0d1c; --panel2: #10142b; --panel3: #15183a;
  --text: #f7f8ff; --muted: #9da6c7; --line: #252b54;
  --cyan: #19d7ff; --blue: #4e7cff; --violet: #815bff; --pink: #d94bff; --green: #42e3ad;
  --danger: #ff8a9b;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 75% 0, rgba(120, 65, 255, .13), transparent 28%),
    radial-gradient(circle at 25% 5%, rgba(20, 210, 255, .08), transparent 25%),
    var(--bg);
  color: var(--text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
/* Pages that need a sign-in stay blank until /api/me answers, so a signed-out
   visitor never sees the home flash before the redirect. */
body.loading > * { visibility: hidden; }

button, input { font: inherit; }
a { color: #8aa3ff; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 2px;
}

.muted { color: var(--muted); }
.grad {
  background: linear-gradient(90deg, var(--cyan), #6b7cff, var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.brand { font-size: 23px; font-weight: 900; line-height: 1.05; }
.brand span {
  background: linear-gradient(90deg, var(--cyan), var(--blue), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sub { margin-top: 7px; color: #8e96b8; font-size: 11px; letter-spacing: 3px; }

.btn {
  display: inline-block; border: 1px solid #3b4078; background: #11162e; color: #fff;
  padding: 13px 18px; border-radius: 10px; font-weight: 800; cursor: pointer; text-decoration: none;
}
.btn.primary {
  border: 0; background: linear-gradient(90deg, #397fff, #815bff, #c64dff);
  box-shadow: 0 0 25px rgba(100, 79, 255, .22);
}
.btn.compact { padding: 9px 14px; }
.btn:disabled { opacity: .6; cursor: default; }

.soon {
  display: inline-block; margin-left: 8px; border: 1px solid #454c85; border-radius: 999px;
  padding: 2px 8px; font-size: 10px; font-weight: 800; letter-spacing: .5px;
  color: #cbd2ed; font-style: normal; vertical-align: middle;
}

/* Language switcher */
.langs { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.langs button {
  border: 0; background: transparent; color: #aeb6d2; padding: 9px 11px;
  font-size: 12px; font-weight: 800; cursor: pointer;
}
.langs button[aria-pressed="true"] { background: #1a2148; color: #fff; }

/* ---------- Sign-in, forgot, reset and account pages ---------- */
.auth-page { display: grid; place-items: center; padding: 24px 16px; }
.auth-wrap { width: 100%; max-width: 440px; }
.auth-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.auth-card {
  border: 1px solid #34366c; border-radius: 18px; padding: 28px;
  background: linear-gradient(145deg, var(--panel2), var(--panel));
}
.auth-card h1 { margin: 0 0 8px; font-size: 25px; letter-spacing: -.5px; }
.auth-card h2 { margin: 26px 0 6px; font-size: 18px; }
.auth-card p { margin: 0 0 18px; color: var(--muted); line-height: 1.5; }
.field { display: block; margin-bottom: 14px; }
.field span { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: #d7dcf1; }
.field input {
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: #0b0e22; color: var(--text);
}
.field input[readonly] { color: var(--muted); }
.auth-card .btn { width: 100%; text-align: center; margin-top: 4px; }
.msg { margin: 0 0 14px; padding: 11px 13px; border-radius: 10px; line-height: 1.45; font-size: 14px; }
.msg.error { border: 1px solid #6b2c40; background: #2a1020; color: var(--danger); }
.msg.ok { border: 1px solid #1f5c4a; background: #0c2a22; color: var(--green); }
.auth-links { margin-top: 16px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.auth-note { margin-top: 18px; font-size: 13px; color: var(--muted); line-height: 1.5; }

/* ---------- Suite home ---------- */
.app { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
aside {
  background: linear-gradient(180deg, #0a0c20, #08091a); border-right: 1px solid var(--line);
  padding: 28px 20px; position: sticky; top: 0; height: 100vh;
}
aside .brand { font-size: 20px; white-space: nowrap; }
nav { margin-top: 34px; display: grid; gap: 8px; }
.navbtn {
  display: block; border: 1px solid transparent; color: #dce1f6; background: transparent;
  text-align: left; padding: 13px; border-radius: 11px; text-decoration: none;
}
a.navbtn:hover, .navbtn.active {
  background: linear-gradient(90deg, rgba(71, 112, 255, .20), rgba(132, 75, 255, .13));
  border-color: #333c7a;
}
.navbtn.disabled { color: #7d86a8; }
.navbtn .ico { display: inline-block; width: 30px; color: var(--cyan); }
.ask {
  margin-top: 26px; border: 1px solid #3a3470; border-radius: 11px; padding: 14px;
  background: linear-gradient(135deg, #141936, #20154b); color: #dce1f6;
}
.ask small { display: block; color: #aab2d1; margin: 6px 0 8px; line-height: 1.35; }
.ask .soon { margin-left: 0; }

main.home { padding: 28px 30px 40px; max-width: 1540px; width: 100%; margin: 0 auto; min-width: 0; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.hello { font-size: 31px; font-weight: 850; letter-spacing: -1px; }
.hello b { color: #a58cff; }
.top .muted { margin-top: 7px; }
.tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search {
  background: #0b0e22; border: 1px solid var(--line); padding: 12px 16px; border-radius: 12px;
  color: #aeb6d2; width: 400px; max-width: 100%;
}
.search:disabled { opacity: .75; }

.account { position: relative; }
.account summary {
  list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 10px;
  padding: 9px 13px; background: #0b0e22; color: #dce1f6; font-weight: 700;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account summary::-webkit-details-marker { display: none; }
.account-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 220px;
  border: 1px solid #34366c; border-radius: 12px; background: var(--panel2); padding: 8px;
  box-shadow: 0 16px 35px #0009;
}
.account-menu .who { padding: 8px 10px 10px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.account-menu a, .account-menu button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent; color: #dce1f6;
  padding: 10px; border-radius: 8px; text-decoration: none; cursor: pointer;
}
.account-menu a:hover, .account-menu button:hover { background: #1a2148; }

.hero {
  margin-top: 24px; border: 1px solid #34366c; border-radius: 22px; overflow: hidden; position: relative;
  background:
    linear-gradient(100deg, rgba(7, 9, 26, .98), rgba(17, 17, 48, .88)),
    radial-gradient(circle at 82% 20%, rgba(38, 198, 255, .22), transparent 30%);
  padding: 32px; display: grid; grid-template-columns: 1.25fr .75fr; gap: 28px; min-height: 280px;
}
.hero::after {
  content: ""; position: absolute; inset: auto -60px -100px auto; width: 380px; height: 380px;
  border-radius: 50%; background: radial-gradient(circle, rgba(134, 77, 255, .24), transparent 65%);
  pointer-events: none;
}
.eyebrow { color: var(--cyan); font-size: 12px; font-weight: 900; letter-spacing: 2px; }
.hero h1 { font-size: 43px; line-height: 1.02; margin: 12px 0 13px; letter-spacing: -2px; }
.hero h1 span { display: block; }
.hero p { max-width: 700px; color: #c2c8df; font-size: 17px; line-height: 1.55; margin: 0; }
.actions { display: flex; gap: 10px; margin-top: 23px; flex-wrap: wrap; position: relative; z-index: 2; }
.lifecycle { align-self: center; position: relative; z-index: 2; }
.life-title { font-weight: 800; margin-bottom: 13px; }
.life { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.life-step {
  display: flex; align-items: center; gap: 12px; padding: 11px 13px;
  border: 1px solid #313764; border-radius: 11px; background: #0d1128;
}
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
.life-step:nth-child(2) .dot, .life-step:nth-child(3) .dot, .life-step:nth-child(4) .dot { background: #796cff; box-shadow: 0 0 14px #796cff; }
.life-step:nth-child(5) .dot { background: #c04dff; box-shadow: 0 0 14px #c04dff; }
.life-step:nth-child(6) .dot { background: var(--green); box-shadow: 0 0 14px var(--green); }

.sectionhead { margin: 28px 0 14px; }
.sectionhead h2 { margin: 0 0 5px; font-size: 21px; }
.sectionhead p { margin: 0; color: var(--muted); line-height: 1.45; }

.products { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.product {
  border: 1px solid var(--line); border-radius: 18px; overflow: hidden; position: relative;
  background: linear-gradient(145deg, var(--panel2), var(--panel));
  display: flex; flex-direction: column; transition: .18s;
}
.product:hover { transform: translateY(-4px); border-color: #6559cf; box-shadow: 0 16px 35px #0007; }
.product-top { height: 125px; padding: 22px; position: relative; overflow: hidden; }
.p1 { background: radial-gradient(circle at 80% 20%, #1bd7ff44, transparent 38%), linear-gradient(135deg, #0b233c, #101630); }
.p2 { background: radial-gradient(circle at 75% 15%, #755cff55, transparent 38%), linear-gradient(135deg, #15133d, #10152f); }
.p3 { background: radial-gradient(circle at 80% 15%, #d94bff44, transparent 38%), linear-gradient(135deg, #1b1038, #10152d); }
.mark { font-size: 34px; font-weight: 950; letter-spacing: -2px; }
.mark span { color: var(--cyan); }
.p2 .mark span { color: #9a83ff; }
.p3 .mark span { color: #dc66ff; }
.tag {
  position: absolute; right: 18px; top: 18px; border: 1px solid #454c85; border-radius: 999px;
  padding: 5px 9px; font-size: 10px; font-weight: 900; color: #cbd2ed; background: #0b0e20aa;
}
.product-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.product h3 { font-size: 23px; margin: 0 0 5px; }
.tagline { font-weight: 750; color: #d7dcf1; margin-bottom: 12px; }
.product p { color: #9fa8c7; margin: 0 0 18px; line-height: 1.45; font-size: 14px; }
.flowline { font-size: 12px; color: #cbd1e8; padding-top: 13px; border-top: 1px solid #272d53; margin-top: auto; }
.card-actions { margin-top: 17px; min-height: 40px; display: flex; align-items: center; }
.launch { color: #8aa3ff; font-weight: 800; text-decoration: none; }
.launch:hover { text-decoration: underline; }
.locked-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; }
.lockmsg { color: #cbd2ed; font-size: 13px; font-weight: 700; }
.lockmsg::before { content: "\1F512\00A0"; }
.open-anyway { margin-left: auto; font-size: 13px; }
.product.locked .product-top { filter: saturate(.35) brightness(.8); }
.product.locked h3, .product.locked .tagline { color: #aab2d1; }

.bottom { display: grid; grid-template-columns: 1.1fr 1.1fr .8fr; gap: 16px; }
.small { border: 1px solid var(--line); border-radius: 16px; background: #0b0e21; padding: 20px; min-height: 160px; }
.small h3 { margin: 0 0 6px; }
.small > p { margin: 0 0 14px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.empty {
  border: 1px dashed #2f3668; border-radius: 10px; padding: 16px 12px; color: #8e97b8;
  font-size: 14px; line-height: 1.45;
}
.quick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.q {
  border: 1px solid #292f59; border-radius: 11px; padding: 15px 10px; text-align: center;
  background: #10142d; color: var(--text); text-decoration: none; display: block;
}
.q:hover { border-color: #765fff; }
.q b { display: block; margin-top: 4px; }

@media (max-width: 1050px) {
  .app { grid-template-columns: 1fr; }
  aside { position: static; height: auto; padding: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
  nav { margin-top: 14px; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .ask { display: none; }
  .products, .hero, .bottom { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  main.home { padding: 18px 16px 32px; }
  .hello { font-size: 25px; }
  .tools { width: 100%; }
  .search { width: 100%; }
  .hero { padding: 22px; }
  .hero h1 { font-size: 32px; letter-spacing: -1px; }
  .auth-card { padding: 22px; }
}