/* XyloNorm CAPA training simulator — ported from the standalone (content/branding may change later). */
#xt-train{
  --pbg:#F6F7F9; --card:#fff; --line:#E6E8EC; --line-2:#EEF0F3;
  --ink:#0F172A; --ink-2:#1E293B; --muted:#64748B; --muted-2:#94A3B8;
  --blue:#1C5FD7; --blue-soft:#EAF1FB;
  --xn:#6B5BF5; --xn-dark:#5848D6; --xn-soft:#EDEAFE; --xn-muted:#B9B0F7;
  --green:#16A34A; --green-soft:#DCFCE7; --red:#DC2626; --red-soft:#FEE2E2;
  --amber:#D97706; --amber-soft:#FEF3C7;
  --radius:12px; --radius-sm:8px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-family:var(--font); color:var(--ink); font-size:14px;
}
#xt-train *{ box-sizing:border-box; }
#xt-train a{ color:var(--xn); text-decoration:none; }

#xt-train .tbar{ background:#0E1626; color:#fff; padding:14px 28px; display:flex; align-items:center; gap:12px; border-radius:12px 12px 0 0; }
#xt-train .tbar-logo{ width:28px; height:28px; flex:none; color:var(--xn-muted); }
#xt-train .tbar-name{ font-size:17px; font-weight:700; letter-spacing:-.01em; }
#xt-train .tbar-sub{ margin-left:auto; font-size:12.5px; color:#9DA9C2; font-family:var(--mono); }
#xt-train .wrap{ max-width:1080px; margin:0 auto; padding:24px 4px 20px; }

#xt-train .steps{ display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap; }
#xt-train .step-pill{ display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:99px; background:#fff; border:1px solid var(--line); font-size:13px; font-weight:600; color:var(--muted); }
#xt-train .step-pill .dot{ width:20px; height:20px; border-radius:50%; background:var(--line-2); color:var(--muted); display:grid; place-items:center; font-size:11px; font-weight:700; }
#xt-train .step-pill.is-active{ border-color:var(--xn); color:var(--xn); background:var(--xn-soft); }
#xt-train .step-pill.is-active .dot{ background:var(--xn); color:#fff; }
#xt-train .step-pill.is-done{ border-color:#C7E9D7; color:var(--green); background:var(--green-soft); }
#xt-train .step-pill.is-done .dot{ background:var(--green); color:#fff; }

#xt-train .panel{ display:none; }
#xt-train .panel.is-shown{ display:block; animation:xtfade .25s ease; }
@keyframes xtfade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

#xt-train .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; margin-bottom:18px; }
#xt-train .card h1{ font-size:23px; font-weight:700; letter-spacing:-.02em; margin:0 0 8px; }
#xt-train .card p{ font-size:14.5px; line-height:1.65; color:var(--ink-2); margin:0 0 14px; }
#xt-train .lead{ color:var(--muted); font-size:15px; }
#xt-train .muted-note{ font-size:12.5px; color:var(--muted-2); font-style:italic; }

#xt-train .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:var(--radius-sm); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; border:1px solid var(--line); background:#fff; color:var(--ink-2); transition:all .12s; }
#xt-train .btn:hover{ border-color:var(--xn-muted); background:var(--pbg); }
#xt-train .btn svg{ width:16px; height:16px; }
#xt-train .btn-primary{ background:var(--xn); color:#fff; border-color:var(--xn); }
#xt-train .btn-primary:hover{ background:var(--xn-dark); }
#xt-train .btn-lg{ padding:14px 26px; font-size:15px; }
#xt-train .card-actions{ display:flex; gap:10px; margin-top:8px; }

#xt-train .scen-tag{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--xn); background:var(--xn-soft); padding:5px 11px; border-radius:99px; margin-bottom:14px; }

#xt-train .rule{ display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line-2); }
#xt-train .rule:first-of-type{ border-top:0; }
#xt-train .rule-ic{ width:34px; height:34px; flex:none; border-radius:8px; background:var(--xn-soft); color:var(--xn); display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:14px; }
#xt-train .rule h3{ font-size:14.5px; font-weight:700; margin:0 0 3px; }
#xt-train .rule p{ font-size:13.5px; color:var(--muted); margin:0; line-height:1.55; }
#xt-train .rules-note{ background:var(--xn-soft); border-radius:10px; padding:14px 18px; margin-top:18px; font-size:13.5px; line-height:1.6; color:var(--ink-2); }
#xt-train .rules-note strong{ color:var(--xn-dark); }

#xt-train .sim{ display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:stretch; }
@media (max-width:880px){ #xt-train .sim{ grid-template-columns:1fr; } }
#xt-train .sim > div:first-child{ display:flex; flex-direction:column; }
#xt-train .ticket{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; display:flex; flex-direction:column; flex:1; }
#xt-train .fd-toolbar{ display:flex; align-items:center; gap:7px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; margin-bottom:14px; flex-wrap:wrap; }
#xt-train .fd-tb-btn{ display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border:1px solid var(--line); border-radius:7px; background:#fff; font-size:12.5px; font-weight:600; color:var(--ink-2); }
#xt-train .fd-tb-btn svg{ width:14px; height:14px; color:var(--muted); }
#xt-train .fd-tb-ic{ width:34px; height:34px; border:1px solid var(--line); border-radius:7px; background:#fff; display:grid; place-items:center; color:var(--muted); cursor:default; }
#xt-train .fd-tb-ic svg{ width:16px; height:16px; }
#xt-train .fd-tb-sep{ width:1px; height:22px; background:var(--line); margin:0 2px; }
#xt-train .fd-tb-app{ cursor:pointer; position:relative; transition:all .12s; }
#xt-train .fd-tb-app.pulse{ border-color:var(--xn); color:var(--xn); animation:xttbpulse 1.6s ease-out infinite; }
@keyframes xttbpulse{ 0%{ box-shadow:0 0 0 0 rgba(107,91,245,.45);} 70%{ box-shadow:0 0 0 9px rgba(107,91,245,0);} 100%{ box-shadow:0 0 0 0 rgba(107,91,245,0);} }
#xt-train .fd-tb-app:hover{ border-color:var(--xn); color:var(--xn); }
#xt-train .fd-tb-app::after{ content:"Open XyloNorm"; position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%); background:#0E1626; color:#fff; font-size:11px; font-weight:500; padding:4px 9px; border-radius:5px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s; z-index:5; }
#xt-train .fd-tb-app:hover::after{ opacity:1; }
#xt-train .capa-empty{ background:#fff; border:1px dashed var(--xn-muted); border-radius:var(--radius); padding:30px 22px; text-align:center; }
#xt-train .capa-empty-ic{ width:46px; height:46px; border-radius:11px; background:var(--xn-soft); color:var(--xn); display:grid; place-items:center; margin:0 auto 12px; }
#xt-train .capa-empty-ic svg{ width:23px; height:23px; }
#xt-train .capa-empty h4{ font-size:14.5px; font-weight:700; margin:0 0 6px; }
#xt-train .capa-empty p{ font-size:13px; color:var(--muted); margin:0; line-height:1.55; }
#xt-train .ticket-head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
#xt-train .ticket-head svg{ width:22px; height:22px; color:var(--muted); flex:none; }
#xt-train .ticket-head h2{ font-size:18px; font-weight:700; margin:0; }
#xt-train .ticket-meta{ font-size:12.5px; color:var(--muted); margin:0 0 18px; }
#xt-train .ticket-msg{ display:flex; gap:12px; }
#xt-train .ava{ width:30px; height:30px; flex:none; border-radius:50%; background:#EDE9FE; color:#6B5BF5; display:grid; place-items:center; font-size:13px; font-weight:700; }
#xt-train .ticket-msg-from{ font-size:13.5px; margin-bottom:8px; }
#xt-train .ticket-msg-from strong{ color:var(--blue); }
#xt-train .ticket-msg-from span{ color:var(--muted); }
#xt-train .ticket-msg-body p{ font-size:14px; line-height:1.6; color:var(--ink-2); margin:0 0 9px; }
#xt-train .reply{ border:1px solid #BBD0F0; border-radius:var(--radius-sm); margin-top:18px; overflow:hidden; }
#xt-train .reply-tabs{ display:flex; gap:6px; padding:10px 12px 0; }
#xt-train .reply-tab{ display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:6px; font-size:12.5px; font-weight:600; color:var(--muted); }
#xt-train .reply-tab svg{ width:14px; height:14px; }
#xt-train .reply-tab.is-active{ background:var(--blue-soft); color:var(--blue); }
#xt-train .reply-input{ display:flex; align-items:center; padding:12px 14px; }
#xt-train .reply-input span:first-child{ flex:1; font-size:13.5px; color:var(--muted-2); }
#xt-train .reply-send{ width:34px; height:34px; flex:none; border-radius:8px; background:var(--blue-soft); color:var(--blue); display:grid; place-items:center; }
#xt-train .reply-send svg{ width:16px; height:16px; }

#xt-train .capa{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
#xt-train .capa-head{ padding:16px 18px 14px; border-bottom:1px solid var(--line-2); }
#xt-train .capa-head h3{ font-size:18px; font-weight:700; margin:0; }
#xt-train .capa-body{ padding:18px; }
#xt-train .capa-section{ font-size:13.5px; font-weight:700; color:var(--xn); margin:0 0 14px; }
#xt-train .cf{ margin-bottom:14px; }
#xt-train .cf label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:5px; }
#xt-train .cf label .req{ color:var(--red); }
#xt-train .cf input,#xt-train .cf select,#xt-train .cf textarea{ width:100%; padding:9px 11px; border:1px solid var(--line); border-radius:7px; font-family:inherit; font-size:13.5px; color:var(--ink); background:#fff; outline:0; transition:border-color .12s,box-shadow .12s; }
#xt-train .cf textarea{ resize:vertical; min-height:64px; line-height:1.5; }
#xt-train .cf input:focus,#xt-train .cf select:focus,#xt-train .cf textarea:focus{ border-color:var(--xn); box-shadow:0 0 0 3px rgba(107,91,245,.14); }
#xt-train .cf.invalid input,#xt-train .cf.invalid select,#xt-train .cf.invalid textarea{ border-color:var(--red); box-shadow:0 0 0 3px rgba(220,38,38,.12); }
#xt-train .cf .err{ display:none; font-size:11.5px; color:var(--red); margin-top:4px; }
#xt-train .cf.invalid .err{ display:block; }
#xt-train .cf .date-wrap{ position:relative; }
#xt-train .cf .date-wrap svg{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--muted-2); pointer-events:none; }
#xt-train .capa-save{ display:flex; justify-content:flex-end; margin-top:4px; }
#xt-train .capa-save .btn{ background:#0E1626; color:#fff; border-color:#0E1626; }
#xt-train .capa-save .btn:hover{ background:#1E293B; }
#xt-train .capa-hint{ font-size:12px; color:var(--muted); margin:14px 0 0; line-height:1.5; padding-top:12px; border-top:1px solid var(--line-2); }
#xt-train .capa-hint b{ color:var(--ink-2); }

#xt-train .ovw{ display:grid; grid-template-columns:56px 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
#xt-train .ovw-rail{ background:#0E1626; padding:16px 0; display:flex; flex-direction:column; align-items:center; gap:18px; position:relative; }
#xt-train .ovw-rail .ri{ width:22px; height:22px; color:#7E8AA6; }
#xt-train .ovw-rail .ri.is-active{ color:#fff; }
#xt-train .ovw-rail .ri-apps{ margin-top:auto; width:38px; height:38px; border-radius:9px; display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.12); position:relative; }
#xt-train .ovw-rail .ri-apps svg{ width:22px; height:22px; }
#xt-train .ovw-rail .ri-flyout{ position:absolute; left:46px; bottom:0; background:#fff; border:1px solid var(--line); border-radius:8px; box-shadow:0 10px 30px rgba(15,23,42,.18); padding:10px 16px; font-size:13.5px; font-weight:600; color:var(--ink); white-space:nowrap; }
#xt-train .ovw-rail .ri-flyout::before{ content:""; position:absolute; left:-5px; bottom:14px; width:10px; height:10px; background:#fff; border-left:1px solid var(--line); border-bottom:1px solid var(--line); transform:rotate(45deg); }
#xt-train .ovw-main{ padding:24px 26px; min-width:0; overflow-x:auto; }
#xt-train .ovw-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
#xt-train .ovw-head h2{ font-size:20px; font-weight:700; margin:0; }
#xt-train .ovw-head-actions{ display:flex; gap:8px; }
#xt-train .ovw-btn{ font-size:12px; font-weight:600; padding:6px 11px; border-radius:6px; border:1px solid var(--line); background:#fff; color:var(--ink-2); }
#xt-train .ovw-btn.is-on{ background:#0E1626; color:#fff; border-color:#0E1626; }
#xt-train .ovw-tbl{ width:100%; border-collapse:collapse; min-width:680px; }
#xt-train .ovw-tbl th{ text-align:left; font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--muted); padding:10px 12px; border-bottom:1px solid var(--line); }
#xt-train .ovw-tbl td{ padding:14px 12px; border-bottom:1px solid var(--line-2); font-size:13.5px; }
#xt-train .ovw-tbl tr:last-child td{ border-bottom:0; }
#xt-train .ovw-tbl .bar{ display:inline-block; width:64px; height:8px; border-radius:99px; background:var(--line-2); }
#xt-train .ovw-tbl .chk{ color:var(--green); }
#xt-train .ovw-tbl tr.is-new{ background:var(--xn-soft); }
#xt-train .ovw-tbl tr.is-new td:first-child{ position:relative; }
#xt-train .ovw-tbl tr.is-new td:first-child::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--xn); }
#xt-train .ovw-acts{ display:flex; gap:6px; }
#xt-train .ovw-acts span{ width:26px; height:26px; border-radius:6px; border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); }
#xt-train .ovw-acts span svg{ width:14px; height:14px; }
#xt-train .newtag{ display:inline-block; font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--xn); background:#fff; border:1px solid var(--xn-muted); padding:2px 7px; border-radius:99px; margin-left:8px; }

#xt-train .rov{ display:none; position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:10000; align-items:center; justify-content:center; padding:20px; }
#xt-train .rov[data-open="true"]{ display:flex; }
#xt-train .rmodal{ background:#fff; border-radius:16px; max-width:460px; width:100%; padding:32px; text-align:center; box-shadow:0 24px 64px rgba(15,23,42,.32); }
#xt-train .rmodal-ic{ width:68px; height:68px; border-radius:50%; display:grid; place-items:center; margin:0 auto 16px; }
#xt-train .rmodal-ic svg{ width:36px; height:36px; }
#xt-train .rmodal-ic.ok{ background:var(--green-soft); color:var(--green); }
#xt-train .rmodal-ic.bad{ background:var(--red-soft); color:#DC2626; }
#xt-train .rmodal h3{ font-size:20px; font-weight:700; margin:0 0 8px; }
#xt-train .rmodal h3.ok{ color:#15803D; } #xt-train .rmodal h3.bad{ color:#B91C1C; }
#xt-train .rmodal p{ font-size:14px; line-height:1.6; color:var(--ink-2); margin:0 0 20px; }
#xt-train .rmodal .btn{ min-width:200px; }

#xt-train .done-card{ text-align:center; padding:44px 30px; }
#xt-train .done-seal{ width:84px; height:84px; border-radius:50%; background:var(--green-soft); color:var(--green); display:grid; place-items:center; margin:0 auto 18px; }
#xt-train .done-seal svg{ width:42px; height:42px; }
#xt-train .done-card p{ max-width:52ch; margin:0 auto 22px; color:var(--muted); }
#xt-train .cert{ display:inline-flex; flex-direction:column; gap:4px; border:1px dashed var(--line); border-radius:var(--radius); padding:16px 28px; margin-bottom:24px; }
#xt-train .cert .nm{ font-size:18px; font-weight:700; }
#xt-train .cert .meta{ font-size:12.5px; color:var(--muted); font-family:var(--mono); }

#xt-train .toast{ position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(18px); background:var(--ink); color:#fff; padding:12px 20px; border-radius:99px; font-size:13.5px; font-weight:500; box-shadow:0 12px 32px rgba(15,23,42,.3); opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; z-index:9999; display:flex; align-items:center; gap:8px; }
#xt-train .toast svg{ width:15px; height:15px; color:#FCA5A5; }
#xt-train .toast.is-shown{ opacity:1; transform:translateX(-50%) translateY(0); }