/* Talentverse — DTC brand layer on top of Tailwind */
:root {
  --dtc-purple: #37236A;
  --dtc-purple-deep: #251646;
  --dtc-yellow: #FDB927;
  --dtc-orange: #F58230;
  --dtc-red: #F04E36;
  --surface: #F6F4FB;
  --ink: #1F1B2E;
  --muted: #6B6580;
  --line: #E7E2F2;
}
html { scroll-behavior: smooth; }
body { background: var(--surface); color: var(--ink); -webkit-font-smoothing: antialiased; }
.font-display { font-family: "Prompt", "Sarabun", system-ui, -apple-system, "Segoe UI", sans-serif; }
.brand-gradient { background: linear-gradient(90deg, var(--dtc-yellow) 0%, var(--dtc-orange) 50%, var(--dtc-red) 100%); }
.brand-bar { height: 4px; background: linear-gradient(90deg, var(--dtc-yellow), var(--dtc-orange), var(--dtc-red)); }
.brand-text { background: linear-gradient(90deg, var(--dtc-yellow), var(--dtc-orange), var(--dtc-red)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.purple-gradient { background: linear-gradient(160deg, #3F2A7A 0%, var(--dtc-purple) 55%, var(--dtc-purple-deep) 100%); }
.card { background: #fff; border-radius: 1.1rem; box-shadow: 0 1px 2px rgba(31, 27, 46, .04), 0 8px 24px -12px rgba(55, 35, 106, .18); border: 1px solid var(--line); }
.card-accent { position: relative; overflow: hidden; }
.card-accent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--dtc-yellow), var(--dtc-orange), var(--dtc-red)); }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.chip-ok { background: #E8F5EC; color: #1B7F3B; }
.chip-warn { background: #FFF3E0; color: #B45309; }
.chip-bad { background: #FDE8E5; color: #B42318; }
.chip-info { background: #EDE7F9; color: var(--dtc-purple); }
.chip-neutral { background: #F1EFF6; color: var(--muted); }
.chip-gold { background: #FFF3D6; color: #8A5A00; }
.tone-lav { background: #EFEAF9; border-color: #C9BCEB; color: #2E1F5C; }
.tone-peach { background: #FFF0E4; border-color: #F9C9A6; color: #7A3B0B; }
.tone-amber { background: #FFF7DB; border-color: #F5DD8B; color: #7A5200; }
.tone-mint { background: #E6F6EE; border-color: #A9DFC3; color: #135C36; }
.tone-sky { background: #E7F1FB; border-color: #B4D2F1; color: #17406B; }
.tone-rose { background: #FDE7EC; border-color: #F5B7C6; color: #8A1E3C; }
.tone-gray { background: #F1EFF6; border-color: #D9D4E6; color: #4B455E; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem 1.1rem; border-radius: .85rem; font-weight: 600; font-family: "Prompt", "Sarabun", sans-serif; transition: all .15s ease; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--dtc-purple); color: #fff; box-shadow: 0 8px 18px -8px rgba(55, 35, 106, .6); }
.btn-primary:hover { background: #2C1B58; transform: translateY(-1px); }
.btn-accent { background: linear-gradient(90deg, var(--dtc-orange), var(--dtc-red)); color: #fff; box-shadow: 0 8px 18px -8px rgba(240, 78, 54, .6); }
.btn-accent:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn-ghost { background: #fff; border-color: var(--line); color: var(--dtc-purple); }
.btn-ghost:hover { background: #F6F4FB; }
.btn-soft { background: #EDE7F9; color: var(--dtc-purple); }
.btn-soft:hover { background: #E2D9F5; }
.btn-danger { background: #FDE8E5; color: #B42318; }
.btn-sm { padding: .38rem .75rem; font-size: .8rem; border-radius: .65rem; }
.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.input, .select, .textarea { width: 100%; border: 1px solid var(--line); border-radius: .8rem; padding: .55rem .8rem; background: #fff; font-size: .92rem; transition: border-color .15s, box-shadow .15s; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: #8A72C7; box-shadow: 0 0 0 3px rgba(55, 35, 106, .12); }
.label { display: block; font-size: .78rem; font-weight: 600; color: var(--muted); margin-bottom: .3rem; }
.kpi { background: #fff; border-radius: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line); }
.kpi .v { font-family: "Prompt", sans-serif; font-size: 1.7rem; font-weight: 700; color: var(--dtc-purple); line-height: 1.1; }
.kpi .l { font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.nav-item { display: flex; align-items: center; gap: .7rem; padding: .6rem .85rem; border-radius: .8rem; color: rgba(255, 255, 255, .78); font-weight: 500; font-size: .92rem; transition: all .15s; }
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav-item.active { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 3px 0 0 var(--dtc-yellow); }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .68rem; color: var(--muted); padding: .4rem 0; flex: 1; }
.bottom-nav a.active { color: var(--dtc-purple); font-weight: 600; }
.bottom-nav a.active svg { color: var(--dtc-orange); }
.phone { max-width: 430px; margin: 0 auto; min-height: 100vh; background: var(--surface); position: relative; }
@media (min-width: 640px) and (max-width: 1023px) { .phone { box-shadow: 0 24px 60px -30px rgba(55, 35, 106, .45); border-left: 1px solid var(--line); border-right: 1px solid var(--line); } }
.tt { display: grid; position: relative; }
.tt-col { position: relative; border-left: 1px solid var(--line); }
.tt-slot { position: absolute; left: 3px; right: 3px; border-radius: .6rem; border: 1px solid; padding: .3rem .4rem; font-size: .7rem; line-height: 1.15; overflow: hidden; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.tt-slot:hover { transform: scale(1.02); box-shadow: 0 8px 18px -8px rgba(31, 27, 46, .35); z-index: 5; }
.tt-slot-narrow { padding: .2rem .2rem; font-size: .58rem; letter-spacing: -.01em; }
.tt-hour { height: var(--hour-h, 48px); border-top: 1px dashed var(--line); font-size: .66rem; color: var(--muted); padding-left: .25rem; }
.tt-now { position: absolute; left: 0; right: 0; height: 2px; background: var(--dtc-red); z-index: 4; }
.tt-now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--dtc-red); }
.heat { width: 100%; aspect-ratio: 1.6; border-radius: .35rem; }
.progress { height: .55rem; background: #EDE7F9; border-radius: 999px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--dtc-yellow), var(--dtc-orange), var(--dtc-red)); border-radius: 999px; transition: width .4s ease; }
.progress.purple > span { background: var(--dtc-purple); }
.badge-data { font-size: .68rem; padding: .2rem .55rem; border-radius: 999px; background: #FFF3D6; color: #8A5A00; border: 1px solid #F5DD8B; font-weight: 600; white-space: nowrap; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .86rem; }
.table th { text-align: left; font-weight: 600; color: var(--muted); font-size: .74rem; letter-spacing: .02em; text-transform: uppercase; padding: .55rem .7rem; border-bottom: 1px solid var(--line); background: #FAF9FD; position: sticky; top: 0; }
.table td { padding: .55rem .7rem; border-bottom: 1px solid #F1EFF6; vertical-align: top; }
.table tr:hover td { background: #FBFAFE; }
.toast { position: fixed; bottom: 5.5rem; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: .9rem; font-size: .88rem; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); z-index: 100; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; }
.toast.show { opacity: 1; }
.toast.ok { background: #1B7F3B; }
.toast.bad { background: #B42318; }
.dot { width: .5rem; height: .5rem; border-radius: 50%; display: inline-block; }
.section-title { font-family: "Prompt", sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.muted { color: var(--muted); }
.scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #D9D4E6; border-radius: 999px; }
.qr-frame { border: 3px dashed #C9BCEB; border-radius: 1.2rem; padding: .6rem; background: #fff; }
.step { display: flex; align-items: center; gap: .5rem; font-size: .8rem; }
.step .n { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
@media print {
  .no-print, nav, aside, .bottom-nav { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
}

/* generated backgrounds (Gemini) */
.app-bg { background: var(--surface) url("/static/img/gen/blobs.jpg") center top / cover no-repeat; }
.phone { background: transparent; }
@media (max-width: 639px) { .app-bg { background-attachment: scroll; } }
.desk-bg { background: var(--surface) url("/static/img/gen/bg.jpg") center / cover no-repeat fixed; }
.login-bg { background: var(--surface) url("/static/img/gen/blobs.jpg") right top / cover no-repeat; }
.role-pick { display: flex; align-items: center; gap: .75rem; width: 100%; background: #fff; border: 1px solid var(--line); border-radius: 1rem; padding: .65rem .85rem; transition: border-color .15s, transform .15s; }
.role-pick:hover { border-color: #B9A8E3; transform: translateX(2px); }
.role-ico { width: 2.1rem; height: 2.1rem; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.tt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 639px) { .tt { min-width: 620px; } }
.empty-ill { width: 9rem; height: 9rem; object-fit: cover; border-radius: 1.2rem; }
html, body { overflow-x: hidden; }
@media (min-width: 640px) and (max-width: 1023px) { .phone { max-width: 460px; } }
@media (min-width: 1024px) { .phone { max-width: none; margin: 0; background: transparent; } .app-bg { background-image: url("/static/img/gen/bg.jpg"); background-attachment: fixed; } }