/* ODI Online Application — scoped to #odi-app so the theme can't leak in or out.
   Layout: plum brand rail (crest + step list) beside one focused form column;
   on phones the rail becomes a slim header with a progress bar. */
#odi-app{
  --odi-plum:#57016F; --odi-plum-deep:#3D0050; --odi-flare:#FF3131; --odi-flare-ink:#C8171A;
  --odi-bg:#F8F5FA; --odi-surface:#FFFFFF; --odi-ink:#1F1426; --odi-muted:#685B70; --odi-line:#E4DAEA; --odi-soft:#F1EAF5;
  --odi-ok:#1D7A4C; --odi-ok-bg:#E5F4EC;
  --odi-display:"Spectral", Georgia, "Times New Roman", serif;
  --odi-body:"Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --odi-mono:"IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  color:var(--odi-ink); font:15px/1.55 var(--odi-body); text-align:left; max-width:1180px; margin:0 auto;
}
#odi-app *, #odi-app *::before, #odi-app *::after{box-sizing:border-box}
#odi-app [hidden]{display:none !important}
#odi-app h1, #odi-app h2, #odi-app h3{font-family:var(--odi-display); font-weight:600; line-height:1.15; text-wrap:balance; margin:0; padding:0; color:inherit; text-transform:none; letter-spacing:normal}
#odi-app p{margin:0; padding:0}
#odi-app ul, #odi-app ol{margin:0; padding:0; list-style:none}
#odi-app img{max-width:100%; height:auto; border:0; box-shadow:none}
#odi-app label{margin:0; padding:0; text-transform:none; letter-spacing:normal}

#odi-app .odi-shell{display:grid; grid-template-columns:minmax(250px,300px) minmax(0,1fr); background:var(--odi-bg); border-radius:18px; overflow:clip; border:1px solid var(--odi-line)}

/* Rail */
#odi-app .odi-rail{background:var(--odi-plum); color:#fff; padding:32px 26px; display:flex; flex-direction:column; gap:26px}
#odi-app .odi-rail > *{position:relative}
#odi-app .odi-brand{display:flex; gap:14px; align-items:center}
#odi-app .odi-brand img{width:58px; flex:none}
#odi-app .odi-brand b{display:block; font-family:var(--odi-display); font-size:19px; font-weight:600; line-height:1.15; color:#fff}
#odi-app .odi-brand span{font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.75)}
#odi-app .odi-rail h2{font-size:28px; color:#fff}
#odi-app .odi-lede{color:rgba(255,255,255,.85); font-size:14px}
#odi-app .odi-steps{display:flex; flex-direction:column; gap:2px; position:sticky; top:24px}
#odi-app .odi-steps button{all:unset; box-sizing:border-box; cursor:pointer; display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:center; padding:9px 10px; border-radius:8px; width:100%; color:rgba(255,255,255,.78); font:14px/1.3 var(--odi-body)}
#odi-app .odi-steps button:hover{background:rgba(255,255,255,.07)}
#odi-app .odi-steps button:focus-visible{outline:2px solid var(--odi-flare); outline-offset:1px}
#odi-app .odi-steps button:disabled{cursor:default; opacity:.6}
#odi-app .odi-steps .odi-n{width:26px; height:26px; border-radius:50%; border:1.5px solid rgba(255,255,255,.45); display:grid; place-items:center; font:600 12px var(--odi-mono)}
#odi-app .odi-steps li.done .odi-n{background:#fff; color:var(--odi-plum); border-color:#fff}
#odi-app .odi-steps li.cur button{background:rgba(255,255,255,.12); color:#fff; font-weight:600}
#odi-app .odi-steps li.cur .odi-n{background:var(--odi-flare); border-color:var(--odi-flare); color:#fff}
#odi-app .odi-steps[aria-disabled="true"]{display:none}
#odi-app .odi-rail-foot{margin-top:auto; font-size:12.5px; color:rgba(255,255,255,.8); display:flex; flex-direction:column; gap:4px; overflow-wrap:anywhere}
#odi-app .odi-motto{font-family:var(--odi-display); font-style:italic; font-size:15px; color:#fff}
#odi-app .odi-mbar{display:none}

/* Main */
#odi-app .odi-main{padding:40px 32px 56px; min-width:0}
#odi-app .odi-col{max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:24px}
#odi-app .odi-topbar{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; font-size:13.5px; color:var(--odi-muted)}
#odi-app .odi-who{display:flex; gap:10px; align-items:center; flex-wrap:wrap; min-width:0; overflow-wrap:anywhere}
#odi-app .odi-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:var(--odi-soft); color:var(--odi-ink); font-size:12.5px; font-weight:500}
#odi-app .odi-saved::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--odi-ok)}
#odi-app .odi-saved.is-err::before{background:var(--odi-flare-ink)}
#odi-app .odi-eyebrow{font:600 12px var(--odi-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--odi-flare-ink)}
#odi-app .odi-head{display:flex; flex-direction:column; gap:8px}
#odi-app .odi-head h1{font-size:clamp(26px,3.6vw,36px); color:var(--odi-ink)}
#odi-app .odi-head p{color:var(--odi-muted); max-width:60ch}
#odi-app .odi-panel{background:var(--odi-surface); border:1px solid var(--odi-line); border-radius:14px; padding:28px; display:flex; flex-direction:column; gap:20px}
#odi-app .odi-panel h3{font-size:20px}
#odi-app .odi-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px 20px}
#odi-app .odi-full{grid-column:1/-1}
#odi-app .odi-f{display:flex; flex-direction:column; gap:6px; min-width:0}
#odi-app .odi-f > label, #odi-app .odi-lbl{font-weight:600; font-size:13.5px; color:var(--odi-ink)}
#odi-app .odi-req::after{content:" *"; color:var(--odi-flare-ink)}
#odi-app .odi-hint{font-size:12.5px; color:var(--odi-muted)}
#odi-app .odi-small{font-size:14px}

#odi-app input[type=text], #odi-app input[type=email], #odi-app input[type=tel], #odi-app input[type=date], #odi-app input[type=number], #odi-app select, #odi-app textarea{
  font:15px/1.4 var(--odi-body); color:var(--odi-ink); background:var(--odi-bg); border:1.5px solid var(--odi-line); border-radius:9px; padding:11px 12px; width:100%; min-width:0; height:auto; min-height:46px; margin:0; box-shadow:none; outline:none; -webkit-appearance:none; appearance:none}
#odi-app select{background-image:linear-gradient(45deg,transparent 50%,var(--odi-muted) 50%),linear-gradient(135deg,var(--odi-muted) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:34px}
#odi-app textarea{min-height:110px; resize:vertical}
#odi-app textarea.odi-short{min-height:76px}
#odi-app textarea.odi-tall{min-height:170px}
#odi-app input:focus, #odi-app select:focus, #odi-app textarea:focus{border-color:var(--odi-plum); box-shadow:0 0 0 3px rgba(87,1,111,.18)}
#odi-app input[readonly]{opacity:.75}
#odi-app input:disabled, #odi-app select:disabled, #odi-app textarea:disabled{opacity:.7; cursor:default}
#odi-app .odi-f.bad input, #odi-app .odi-f.bad select, #odi-app .odi-f.bad textarea{border-color:var(--odi-flare-ink)}
#odi-app .odi-err{font-size:12.5px; color:var(--odi-flare-ink); font-weight:500}

#odi-app .odi-opts{display:flex; flex-wrap:wrap; gap:8px}
#odi-app .odi-opt{position:relative; display:block}
#odi-app .odi-opt input{position:absolute; opacity:0; inset:0; margin:0; width:100%; height:100%; cursor:pointer}
#odi-app .odi-opt > span{display:block; padding:9px 14px; border:1.5px solid var(--odi-line); border-radius:9px; font-size:14px; background:var(--odi-bg); cursor:pointer; color:var(--odi-ink)}
#odi-app .odi-opt input:checked + span{border-color:var(--odi-plum); background:#F3E6F8; font-weight:600}
#odi-app .odi-opt input:focus-visible + span{outline:2px solid var(--odi-flare); outline-offset:2px}
#odi-app .odi-opt input:disabled + span{cursor:default}
#odi-app .odi-stack{flex-direction:column}
#odi-app .odi-stack .odi-opt > span{display:flex; flex-direction:column; gap:2px}
#odi-app .odi-stack small{color:var(--odi-muted); font-weight:400; font-size:12.5px}
#odi-app .odi-sec-t{font-family:var(--odi-display); font-size:20px; font-weight:600; padding-top:4px}
#odi-app .odi-divider{border:0; border-top:1px solid var(--odi-line); margin:4px 0; height:0; background:none}
#odi-app .odi-refs{display:flex; flex-direction:column; gap:12px}
#odi-app .odi-ref{border:1px dashed var(--odi-line); border-radius:10px; padding:16px; display:grid; grid-template-columns:auto 1fr 1fr; gap:12px; align-items:start}
#odi-app .odi-ref .odi-no{font:600 13px var(--odi-mono); color:var(--odi-muted); padding-top:34px}

/* Buttons */
#odi-app .odi-btn{font:600 15px/1.2 var(--odi-body); border-radius:10px; padding:13px 22px; border:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; text-transform:none; letter-spacing:normal; box-shadow:none; min-height:0; width:auto; text-decoration:none}
#odi-app .odi-btn-p{background:var(--odi-plum); color:#fff}
#odi-app .odi-btn-p:hover{background:var(--odi-plum-deep); color:#fff}
#odi-app .odi-btn-g{background:transparent; color:var(--odi-ink); border:1.5px solid var(--odi-line)}
#odi-app .odi-btn-g:hover{background:var(--odi-soft); color:var(--odi-ink)}
#odi-app .odi-link{all:unset; cursor:pointer; color:var(--odi-plum); font:600 14px var(--odi-body)}
#odi-app .odi-link:hover{text-decoration:underline}
#odi-app .odi-link:disabled{color:var(--odi-muted); cursor:default; text-decoration:none}
#odi-app .odi-btn:focus-visible, #odi-app .odi-link:focus-visible{outline:2px solid var(--odi-flare); outline-offset:2px}
#odi-app .odi-btn[disabled]{opacity:.55; cursor:progress}
#odi-app .odi-nav{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
#odi-app .odi-form-nav{margin-top:22px}

/* Sign-in */
#odi-app .odi-auth{max-width:460px; margin:4vh auto 0; display:flex; flex-direction:column; gap:22px}
#odi-app .odi-otp{display:flex; gap:8px; justify-content:space-between}
#odi-app .odi-otp input.odi-otp-box{width:100%; max-width:56px; height:62px; text-align:center; font:600 24px var(--odi-mono); padding:0}
#odi-app .odi-need{display:flex; flex-direction:column; gap:8px; font-size:13.5px; color:var(--odi-muted)}
#odi-app .odi-need li{display:grid; grid-template-columns:18px 1fr; gap:8px}
#odi-app .odi-need li::before{content:""; width:8px; height:8px; margin-top:7px; background:var(--odi-flare); transform:rotate(45deg)}

/* Fee */
#odi-app .odi-fee, #odi-app .odi-banks{display:grid; grid-template-columns:1fr 1fr; gap:12px}
#odi-app .odi-fee > div{background:var(--odi-soft); border-radius:10px; padding:14px 16px}
#odi-app .odi-amt{font:600 26px var(--odi-display)}
#odi-app .odi-banks{font-size:13.5px}
#odi-app .odi-banks > div{border:1px solid var(--odi-line); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:3px}
#odi-app .odi-banks b{font-size:14px}
#odi-app .odi-mono{font-family:var(--odi-mono); font-variant-numeric:tabular-nums}

/* Uploads */
#odi-app .odi-drop{border:1.5px dashed var(--odi-line); border-radius:10px; padding:14px 16px; display:flex; gap:14px; align-items:center; background:var(--odi-bg); position:relative; cursor:pointer}
#odi-app .odi-drop:hover{border-color:var(--odi-plum)}
#odi-app .odi-drop input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
#odi-app .odi-drop.is-busy{opacity:.6; pointer-events:none}
#odi-app .odi-drop.is-busy .odi-t b::after{content:" · uploading…"; font-weight:400}
#odi-app .odi-ic{width:44px; height:54px; border-radius:6px; background:var(--odi-soft); display:grid; place-items:center; flex:none; overflow:hidden; font:600 10.5px var(--odi-mono); color:var(--odi-muted)}
#odi-app .odi-ic img{width:100%; height:100%; object-fit:cover}
#odi-app .odi-t{display:flex; flex-direction:column; gap:2px; min-width:0}
#odi-app .odi-t span{font-size:12.5px; color:var(--odi-muted)}
#odi-app .odi-files{display:flex; flex-direction:column; gap:6px}
#odi-app .odi-files li{display:flex; align-items:center; gap:10px; justify-content:space-between; background:var(--odi-ok-bg); border-radius:8px; padding:8px 12px; font-size:13.5px}
#odi-app .odi-files li span{min-width:0; overflow-wrap:anywhere}
#odi-app .odi-files small{color:var(--odi-muted); margin-left:6px; white-space:nowrap}
#odi-app .odi-files .odi-link{font-size:13px; flex:none}

/* Review */
#odi-app .odi-review{display:flex; flex-direction:column; gap:22px}
#odi-app .odi-rv{display:flex; flex-direction:column; gap:6px}
#odi-app .odi-rv-h{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
#odi-app .odi-rv h3{font-size:19px}
#odi-app .odi-rv dl{display:grid; grid-template-columns:minmax(120px,200px) 1fr; gap:6px 16px; margin:0; font-size:14px}
#odi-app .odi-rv dt{color:var(--odi-muted); margin:0; font-weight:400}
#odi-app .odi-rv dd{margin:0; overflow-wrap:anywhere; white-space:pre-line}
#odi-app .odi-rv dd.miss{color:var(--odi-flare-ink)}
#odi-app .odi-decl{display:grid; grid-template-columns:22px 1fr; gap:10px; font-size:14px; align-items:start; cursor:pointer}
#odi-app .odi-decl input{width:18px; height:18px; margin:2px 0 0; accent-color:var(--odi-plum)}

/* Read-only view after submission */
#odi-app.is-readonly [data-edit], #odi-app.is-readonly .odi-drop, #odi-app.is-readonly .odi-files .odi-link, #odi-app.is-readonly #odi-next, #odi-app.is-readonly .odi-decl, #odi-app.is-readonly #odi-savedChip{display:none !important}

/* Done */
#odi-app .odi-ticket{border:1.5px solid var(--odi-plum); border-radius:14px; overflow:hidden}
#odi-app .odi-ticket-top{background:var(--odi-plum); color:#fff; padding:18px 22px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
#odi-app .odi-ticket-top .odi-mono{font-size:22px; letter-spacing:.06em}
#odi-app .odi-ticket-body{padding:18px 22px; display:grid; grid-template-columns:1fr 1fr; gap:12px; background:var(--odi-surface); font-size:14px}
#odi-app .odi-ticket-body span{display:block; color:var(--odi-muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em}
#odi-app .odi-next{display:flex; flex-direction:column; gap:10px}
#odi-app .odi-next li{display:grid; grid-template-columns:30px 1fr; gap:10px; font-size:14px; align-items:start}
#odi-app .odi-next li b{font:600 12px var(--odi-mono); width:26px; height:26px; border-radius:50%; background:var(--odi-soft); display:grid; place-items:center}

#odi-app .odi-toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--odi-ink); color:#fff; padding:10px 16px; border-radius:10px; font-size:14px; z-index:99999; max-width:calc(100% - 32px); box-shadow:0 6px 24px rgba(31,20,38,.25)}

@media (max-width:880px){
  #odi-app .odi-shell{grid-template-columns:1fr; border-radius:14px}
  #odi-app .odi-rail{padding:18px 16px; gap:12px}
  #odi-app .odi-rail h2, #odi-app .odi-lede, #odi-app .odi-steps, #odi-app .odi-rail-foot{display:none}
  #odi-app .odi-brand img{width:40px}
  #odi-app .odi-mbar{display:block; height:4px; background:rgba(255,255,255,.2); border-radius:4px; overflow:hidden}
  #odi-app .odi-mbar i{display:block; height:100%; width:0; background:var(--odi-flare); transition:width .3s}
  #odi-app .odi-main{padding:24px 16px 40px}
}
@media (max-width:560px){
  #odi-app .odi-grid, #odi-app .odi-fee, #odi-app .odi-banks, #odi-app .odi-ticket-body{grid-template-columns:1fr}
  #odi-app .odi-ref{grid-template-columns:1fr}
  #odi-app .odi-ref .odi-no{padding-top:0}
  #odi-app .odi-panel{padding:20px 16px}
  #odi-app .odi-rv dl{grid-template-columns:1fr; gap:2px}
  #odi-app .odi-rv dd{margin-bottom:8px}
  #odi-app .odi-form-nav .odi-btn{flex:1}
  #odi-app .odi-otp{gap:6px}
}
@media (prefers-reduced-motion:reduce){#odi-app *{transition:none !important; animation:none !important}}