/* GFMB Admissions: applicant portal.

   Direction: contemporary and warm rather than formal and papery.
   Soft rounded surfaces floating on a warm canvas, a geometric sans
   throughout, generous colour, and real depth from layered shadows.

   PALETTE: sampled from the supplied SP Jain mark. The square mark runs
   #66320f to #8d5821 with a tan highlight around #d3b48f. Everything
   below derives from those three. Swap the --spj-* values if the brand
   guide gives exact codes and the whole portal follows. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root{
  /* brand, straight off the logo */
  --spj-brown:#6e3a15;
  --spj-brown-deep:#4a2608;
  --spj-brown-mid:#8d5821;
  --spj-tan:#d3b48f;
  --spj-tan-soft:#f7eee2;
  --spj-tint:#f3e7d8;

  /* the lively secondary: a warm amber pulled from the tan */
  --amber:#d9872a;
  --amber-hot:#c2741c;
  --amber-soft:#fdf2e2;
  --amber-line:#f2dcbc;

  /* supporting states */
  --teal:#11857a;
  --teal-soft:#e4f3f1;
  --teal-line:#b6ddd8;
  --rose:#c2410c;
  --rose-soft:#fdf0e9;
  --rose-line:#f5d0b8;
  --violet:#6d4aa8;
  --violet-soft:#f1ecfa;

  /* neutrals, warmed so nothing reads grey next to the brown */
  --ink:#221a13;
  --ink-2:#4e4238;
  --muted:#7d7166;
  --muted-2:#a79c91;
  --canvas:#faf7f3;
  --surface:#ffffff;
  --sunk:#f4efe8;
  --line:#ebe3d9;
  --line-2:#ddd2c4;

  --r-xs:8px;
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --pill:999px;

  --sh-1:0 1px 2px rgba(74,38,8,.06);
  --sh-2:0 2px 6px rgba(74,38,8,.06), 0 10px 28px rgba(74,38,8,.07);
  --sh-3:0 4px 12px rgba(74,38,8,.10), 0 18px 48px rgba(74,38,8,.10);
  --sh-brand:0 6px 18px rgba(110,58,21,.26);

  --rail:296px;
  --rail-right:300px;
  --display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--sans);font-size:14.5px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  /* The page fills the window and the footer is pushed to the bottom of
     it. On a short page the footer used to stop wherever the content
     ended, leaving it stranded in the middle of the screen. */
  display:flex;flex-direction:column;min-height:100vh;
}
.pwrap{flex:1 0 auto}
.pfoot{flex:0 0 auto;margin-top:auto}
h1,h2,h3{font-family:var(--display);font-weight:700;color:var(--ink);margin:0;letter-spacing:-.02em;line-height:1.2}
a{color:var(--spj-brown)}
img{max-width:100%}

/* progress hairline, inset to the form column */
.ptop{display:none}
.ptop-fill{height:100%;width:20%;border-radius:0 var(--pill) var(--pill) 0;
  background:linear-gradient(90deg,var(--spj-brown),var(--amber));
  transition:width .4s cubic-bezier(.4,0,.2,1)}
@media (min-width:1000px){
  .ptop{display:block;position:fixed;top:0;left:var(--rail);right:0;height:4px;background:var(--sunk);z-index:80}
}
@media (min-width:1280px){ .ptop{right:var(--rail-right)} }

/* ============ shell ============ */
.pshell{display:flex;flex-direction:column;min-height:100vh}
.prail{order:1}.pmain{order:2}.paside{order:3}
@media (min-width:1000px){
  .pshell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr)}
  .prail{order:0}.pmain{order:0}.paside{order:0;grid-column:2}
}
@media (min-width:1280px){
  .pshell{grid-template-columns:var(--rail) minmax(0,1fr) var(--rail-right)}
  .paside{grid-column:3}
}

/* ---- left rail ---- */
.prail{
  background:linear-gradient(161deg,#a06a2a 0%,#7d4418 52%,#653410 100%);
  color:#fff;padding:16px 18px;position:relative;overflow:hidden;
}
.prail::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(85% 55% at 108% -8%,rgba(230,160,66,.52),transparent 60%),
    radial-gradient(70% 45% at -15% 104%,rgba(211,180,143,.26),transparent 58%);
}
.prail > *{position:relative;z-index:1}
@media (min-width:1000px){
  .prail{position:sticky;top:0;align-self:start;height:100vh;padding:26px 24px;
    display:flex;flex-direction:column;overflow:hidden}
}

/* the mark keeps its real colours, so it sits on a white chip */
.prail-brand{display:block;text-decoration:none;color:inherit;flex:0 0 auto}
.plogo-chip{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:#fff;border-radius:var(--r-sm);padding:9px 11px;box-shadow:var(--sh-2);
}
.plogo{display:block;width:150px;height:auto;max-width:100%}
.prail-unit{
  display:inline-block;margin-top:12px;font-family:var(--display);
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  color:#fff;background:rgba(255,255,255,.16);border-radius:var(--pill);padding:5px 12px;
  backdrop-filter:blur(2px);
}
@media (min-width:1000px){ .prail-unit{margin-top:15px} }
@media (max-width:420px){ .plogo{width:128px} .prail-unit{font-size:9.5px;letter-spacing:.1em} }

/* step index */
.pindex{list-style:none;margin:16px 0 0;padding:0;display:flex;gap:6px;
  overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.pindex::-webkit-scrollbar{display:none}
.pstep{
  flex:0 0 auto;scroll-snap-align:start;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.07);border:0;padding:9px 14px 9px 9px;border-radius:var(--pill);
  cursor:pointer;font-family:inherit;text-align:left;color:rgba(255,255,255,.78);min-height:44px;
  transition:background .16s,color .16s,transform .16s;
}
.pstep-n{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-size:12px;font-weight:700;
  background:rgba(255,255,255,.16);color:#fff;transition:background .16s,color .16s,box-shadow .16s;
}
.pstep-t{font-family:var(--display);font-size:13px;font-weight:600;white-space:nowrap}
.pstep-d{display:none}
.pstep:hover{background:rgba(255,255,255,.14);color:#fff}
.pstep.active{background:#fff;color:var(--spj-brown-deep)}
.pstep.active .pstep-n{background:var(--amber);color:#fff;box-shadow:0 0 0 4px rgba(217,135,42,.26)}
.pstep.done .pstep-n{background:var(--spj-tan);color:var(--spj-brown-deep)}
.pstep.done{color:#fff}
.pstep.has-error .pstep-n{background:#fff;color:var(--rose)}
.pstep.has-error{color:#ffe3d3}

@media (min-width:1000px){
  .pindex{display:block;overflow:visible;margin-top:26px;flex:1 1 auto;min-height:0;overflow-y:auto}
  .pstep{display:flex;width:100%;border-radius:var(--r-sm);padding:10px 12px;gap:12px;
    align-items:flex-start;margin-bottom:3px}
  .pstep:hover{transform:translateX(2px)}
  .pstep-n{margin-top:1px}
  .pstep-t{white-space:normal;font-size:13.5px;line-height:1.3}
  .pstep-d{display:block;font-family:var(--sans);font-size:11px;font-weight:400;opacity:.62;margin-top:2px;line-height:1.4}
  .pstep.active .pstep-d{opacity:.72}
}

.prail-meter{flex:0 0 auto;margin-top:18px}
.prail-meter-bar{height:6px;border-radius:var(--pill);background:rgba(255,255,255,.18);overflow:hidden}
.prail-meter-fill{height:100%;border-radius:var(--pill);background:linear-gradient(90deg,var(--spj-tan),var(--amber));
  transition:width .4s cubic-bezier(.4,0,.2,1)}
.prail-meter-label{font-family:var(--display);font-size:11px;font-weight:600;color:rgba(255,255,255,.72);margin-top:8px}
@media (max-width:999px){ .prail-meter{display:none} }

.prail-foot{
  flex:0 0 auto;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);
  font-size:10.5px;line-height:1.6;color:rgba(255,255,255,.58);
}
@media (min-width:1000px){ .prail-foot{margin-top:auto} }
@media (max-width:999px){ .prail-foot{display:none} }

.pdraft-badge{
  display:inline-block;font-family:var(--display);font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;vertical-align:middle;
  background:var(--amber-soft);color:var(--amber-hot);border:1px solid var(--amber-line);
  border-radius:var(--pill);padding:3px 10px;margin-left:10px;
}

/* ---- right rail ---- */
.paside{background:var(--canvas);border-top:1px solid var(--line);padding:22px 18px;min-width:0}
.paside-block{flex:0 0 auto}
.paside-block + .paside-block{margin-top:20px}
.paside-title{
  font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:9px;
}
.paside-block p{font-size:13px;line-height:1.65;color:var(--muted);margin:0}
.paside-block a{color:var(--spj-brown);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--amber)}
.paside-block a:hover{color:var(--amber-hot)}
.paside-kicker{
  display:inline-block;font-family:var(--display);font-size:10px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--spj-brown);
  background:var(--spj-tan-soft);border-radius:var(--pill);padding:4px 11px;margin-bottom:13px;
}
.paside-lede{background:linear-gradient(165deg,var(--spj-tan-soft),var(--amber-soft));
  border:1px solid var(--amber-line);border-radius:var(--r);padding:20px}
.paside-lede h2{font-size:21px;line-height:1.22;color:var(--spj-brown-deep)}
.paside-lede h2 em{font-style:normal;color:var(--amber-hot)}
.paside-lede p{margin-top:11px;color:var(--ink-2)}
.paside-foot{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);flex:0 0 auto}
.paside-foot img{height:34px;display:block}
@media (min-width:1000px){
  .paside{border-top:1px solid var(--line);padding:30px 26px;max-width:760px;width:100%;justify-self:start}
}
@media (min-width:1280px){
  .paside{position:sticky;top:0;align-self:start;height:100vh;overflow-y:auto;max-width:none;
    background:var(--canvas);padding:34px 26px;display:flex;flex-direction:column;
    border-top:0;border-left:1px solid var(--line)}
  .paside-foot{margin-top:auto}
}

/* ---- form column ---- */
.pmain{padding:18px 14px 48px;min-width:0}
@media (min-width:1000px){.pmain{padding:34px 40px 64px;max-width:880px}}

/* ============ top bar on the simpler pages ============ */
.pnav{
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:11px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;z-index:50;box-shadow:var(--sh-1);
}
.pnav-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;min-width:0}
.pnav .plogo-chip{background:none;box-shadow:none;padding:0}
.pnav .plogo{width:124px}
.pnav-name{font-family:var(--display);font-size:13px;font-weight:700;line-height:1.2;color:var(--ink)}
.pnav-sub{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted-2)}
.pnav-links{display:flex;align-items:center;gap:7px}
.pnav-link{font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--ink-2);
  text-decoration:none;padding:8px 13px;border-radius:var(--pill);white-space:nowrap}
.pnav-link:hover{background:var(--sunk)}
.pnav-link.primary{background:var(--spj-brown);color:#fff;box-shadow:var(--sh-brand)}
.pnav-link.primary:hover{background:var(--spj-brown-deep);color:#fff}
@media (max-width:520px){.pnav-sub{display:none}.pnav .plogo{width:108px}}

.phero{background:var(--surface);border-bottom:1px solid var(--line);padding:28px 16px;text-align:center}
.phero-chip{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-size:10px;
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--spj-brown);
  background:var(--spj-tan-soft);border-radius:var(--pill);padding:5px 13px;margin-bottom:15px}
.phero-dot{width:5px;height:5px;border-radius:50%;background:var(--amber)}
.phero h1{font-size:26px;margin-bottom:10px}
.phero h1 em{font-style:normal;color:var(--amber-hot)}
.phero p{font-size:14px;color:var(--muted);max-width:520px;margin:0 auto}
@media (min-width:768px){.phero{padding:40px 24px}.phero h1{font-size:33px}}

.pwrap{max-width:900px;margin:0 auto;padding:20px 15px 60px}
.pwrap-narrow{max-width:560px}
@media (min-width:768px){.pwrap{padding:30px 24px 76px}}

/* ============ cards and sections ============ */
.psection{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:20px;margin-bottom:18px;
}
@media (min-width:768px){.psection{padding:28px 30px}}
.psection-head{position:relative;margin-bottom:22px}
.psection-ghost{display:none}
.psection-tile{
  width:42px;height:42px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;box-shadow:var(--sh-1);
}
.psection-tile svg{width:20px;height:20px}
.psection-kicker{
  display:inline-block;font-family:var(--display);font-size:10px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--spj-brown);
  background:var(--spj-tan-soft);border-radius:var(--pill);padding:4px 11px;margin-bottom:11px;
}
.psection-head h2{font-size:22px}
.psection-head p{font-size:13.5px;color:var(--muted);margin:7px 0 0;max-width:62ch;line-height:1.55}
@media (min-width:768px){.psection-head h2{font-size:25px}}

.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);overflow:hidden}
.pcard + .pcard{margin-top:16px}
.pcard-head{padding:20px;border-bottom:1px solid var(--line);display:flex;align-items:flex-start;gap:14px}
.pcard-icon{width:42px;height:42px;border-radius:var(--r-sm);flex:0 0 42px;
  display:flex;align-items:center;justify-content:center;
  background:var(--spj-tan-soft);color:var(--spj-brown);box-shadow:var(--sh-1)}
.pcard-icon svg{width:20px;height:20px}
.pcard-title{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.01em}
.pcard-sub{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.5}
.pcard-body{padding:22px 20px}
@media (min-width:768px){.pcard-head{padding:22px 26px}.pcard-body{padding:26px}}

/* ============ panels ============ */
.ppanel{display:none}
.ppanel.active{display:block;animation:prise .26s cubic-bezier(.2,.8,.3,1)}
@keyframes prise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ fields ============ */
.pgrid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:560px){
  .pgrid{grid-template-columns:1fr 1fr;gap:17px 20px}
  .pgrid.one{grid-template-columns:1fr}
  .span2{grid-column:span 2}
}
.pfield{display:flex;flex-direction:column;min-width:0}
.plabel{font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.preq{color:var(--amber-hot);margin-left:3px;font-weight:700}
.phint{font-size:11.5px;color:var(--muted-2);line-height:1.45;margin-top:6px}
.perr{font-size:11.5px;color:var(--rose);font-weight:600;margin-top:6px;display:flex;align-items:center;gap:6px}
.perr::before{content:'!';display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;border-radius:50%;background:var(--rose);color:#fff;
  font-size:10px;font-weight:700;flex:0 0 15px}

.pinput,.pselect,.pta{
  width:100%;font-family:inherit;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;font-size:16px;
}
.pinput,.pselect{height:46px;padding:0 14px}
.pta{padding:12px 14px;min-height:78px;resize:vertical;line-height:1.55}
.pinput::placeholder,.pta::placeholder{color:var(--muted-2)}
.pinput:hover,.pselect:hover,.pta:hover{border-color:var(--spj-tan)}
/* background-color, not the background shorthand: the shorthand resets
   background-image and the chevron on a select or combobox vanished
   the moment the field took focus. */
.pinput:focus,.pselect:focus,.pta:focus{
  border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-soft);background-color:#fffdfa}
.pinput.err,.pta.err,.pselect.err{border-color:var(--rose);box-shadow:0 0 0 4px var(--rose-soft)}
.pselect{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 24 16' fill='none' stroke='%236e3a15' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 3 12 13 22 3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
@media (min-width:768px){.pinput,.pselect{height:44px;font-size:14px}.pta{font-size:14px;min-height:72px}}

/* searchable dropdown: a text input over a real <select> */
.pcombobox{position:relative}
.pcombobox-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;overflow:hidden}
.pcombobox-input{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 24 16' fill='none' stroke='%236e3a15' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2 3 12 13 22 3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;cursor:text;
}
.pcombobox.is-open .pcombobox-input{border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-soft);background-color:#fffdfa}
.pcombobox-list{
  position:absolute;z-index:40;top:calc(100% + 5px);left:0;right:0;
  margin:0;padding:5px;list-style:none;max-height:260px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);
  box-shadow:var(--sh-3);
}
.pcombobox-opt{
  padding:10px 12px;border-radius:var(--r-xs);font-size:14.5px;color:var(--ink);
  cursor:pointer;line-height:1.35;
}
.pcombobox-opt.is-active{background:var(--spj-tan-soft)}
.pcombobox-opt.is-selected{font-weight:600;color:var(--spj-brown)}
.pcombobox-opt.is-selected::after{content:'\2713';float:right;color:var(--amber-hot)}
.pcombobox-empty{padding:12px;font-size:13px;color:var(--muted-2);text-align:center}
@media (min-width:768px){.pcombobox-opt{font-size:14px;padding:9px 11px}}

/* currency, amount and unit on one row */
/* Currency, amount and unit on one row. The .cur and .unit classes sit
   on the combobox wrapper when the script has run and on the bare
   select when it has not, so the row holds its shape either way. */
.pmoney{display:flex;gap:9px;flex-wrap:wrap}
.pmoney > .cur{flex:0 0 132px;width:132px}
.pmoney > .pinput{flex:1 1 150px;min-width:120px}
.pmoney > .unit{flex:0 0 150px;width:150px}
@media (max-width:560px){
  /* Currency and amount share the first row, unit takes the second.
     Reading order stays currency, figure, unit, as the hint describes. */
  .pmoney > .cur{flex:0 0 calc(42% - 5px);width:auto}
  .pmoney > .pinput{flex:1 1 calc(58% - 4px);min-width:0}
  .pmoney > .unit{flex:1 1 100%;width:auto}
}

/* ---------- interview times ---------- */
/* One row per day, times as chips. The applicant picks a time, never
   a person: who takes the interview is decided when they confirm. */
.pday{padding:13px 0;border-bottom:1px solid var(--line)}
.pday:last-child{border-bottom:0}
.pday-head{display:flex;align-items:baseline;gap:9px;margin-bottom:9px;flex-wrap:wrap}
.pday-dow{font-family:var(--display);font-size:13px;font-weight:700;color:var(--spj-brown)}
.pday-date{font-family:var(--display);font-size:13px;font-weight:600;color:var(--ink)}
.pday-count{font-size:11.5px;color:var(--muted-2);margin-left:auto}
.ptimes{display:flex;flex-wrap:wrap;gap:8px}
.ptime{
  min-height:44px;padding:0 16px;border-radius:var(--r-sm);cursor:pointer;
  border:1.5px solid var(--line-2);background:var(--surface);color:var(--ink);
  font-family:var(--display);font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums;
  transition:border-color .14s,background .14s,color .14s,box-shadow .14s;
}
.ptime:hover{border-color:var(--spj-tan);background:var(--spj-tan-soft)}
.ptime.sel{border-color:var(--spj-brown);background:var(--spj-brown);color:#fff;
  box-shadow:0 0 0 4px var(--amber-soft)}
.ptime:focus-visible{outline:none;border-color:var(--amber);box-shadow:0 0 0 4px var(--amber-soft)}
@media (max-width:560px){
  .ptimes{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .ptime{width:100%;padding:0 8px}
}

/* amount plus unit, e.g. turnover */
.pcombo{display:flex;gap:9px}
.pcombo .pinput{flex:1 1 auto;min-width:0}
.pcombo .pselect{flex:0 0 118px;width:118px}

/* soft inline feedback: never an error, just a nudge */
.pcheck{font-size:11.5px;line-height:1.45;margin-top:6px;font-weight:500}
.pcheck-ok{color:var(--teal)}
.pcheck-warn{color:var(--amber-hot)}

/* photo */
.pphoto{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap}
.pphoto-circle{
  width:82px;height:100px;flex:0 0 82px;position:relative;overflow:hidden;border-radius:var(--r-sm);
  background:var(--spj-tan-soft);border:2px dashed var(--spj-tan);
  display:flex;align-items:center;justify-content:center;color:var(--spj-brown-mid);
}
.pphoto-circle img{width:100%;height:100%;object-fit:cover;display:none;position:absolute;inset:0}
.pphoto-side{flex:1 1 200px;min-width:0}
.pphoto-btn{
  display:inline-flex;align-items:center;gap:9px;min-height:42px;
  background:var(--spj-tan-soft);border:1.5px solid var(--amber-line);color:var(--spj-brown);
  font-family:var(--display);font-size:13px;font-weight:600;padding:0 17px;border-radius:var(--r-sm);
  cursor:pointer;transition:background .15s,border-color .15s;
}
.pphoto-btn:hover{background:var(--amber-soft);border-color:var(--amber)}
.pphoto-btn svg{width:16px;height:16px;flex:0 0 16px}

/* ============ buttons ============ */
.pbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 22px;border-radius:var(--r-sm);
  font-family:var(--display);font-size:14px;font-weight:600;cursor:pointer;
  border:1.5px solid transparent;text-decoration:none;line-height:1.2;
  transition:background .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s;
}
.pbtn svg{width:16px;height:16px;flex:0 0 16px}
.pbtn:active{transform:translateY(1px)}
.pbtn-primary,.pbtn-gold{
  background:linear-gradient(160deg,var(--spj-brown-mid),var(--spj-brown));
  color:#fff;box-shadow:var(--sh-brand);
}
.pbtn-primary:hover,.pbtn-gold:hover{
  background:linear-gradient(160deg,var(--spj-brown),var(--spj-brown-deep));
  color:#fff;box-shadow:0 8px 22px rgba(110,58,21,.34)}
.pbtn-quiet{background:var(--surface);border-color:var(--line-2);color:var(--ink-2)}
.pbtn-quiet:hover{border-color:var(--spj-brown);color:var(--spj-brown);background:var(--spj-tan-soft)}
.pbtn-save{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber-hot)}
.pbtn-save:hover{background:#fbe8cd;border-color:var(--amber)}
.pbtn:disabled{opacity:.5;cursor:not-allowed}
.pbtn-wide{width:100%}

.ppanel-nav{display:flex;flex-direction:column;gap:11px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.ppanel-nav .pbtn{width:100%}
.ppanel-nav-group{display:flex;flex-direction:column;gap:11px}
@media (min-width:560px){
  .ppanel-nav{flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}
  .ppanel-nav .pbtn{width:auto}
  .ppanel-nav-group{flex-direction:row;align-items:center}
}
.pcard .ppanel-nav{margin-top:0;padding:18px 20px;background:var(--canvas)}
@media (min-width:768px){.pcard .ppanel-nav{padding:18px 26px}}

/* ============ notes ============ */
.pnote{padding:14px 16px;border-radius:var(--r-sm);font-size:13px;line-height:1.6;margin-bottom:18px;border:1px solid}
.pnote-info{background:var(--spj-tan-soft);border-color:var(--amber-line);color:var(--spj-brown-deep)}
.pnote-ok{background:var(--teal-soft);border-color:var(--teal-line);color:var(--teal)}
.pnote-warn{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber-hot)}
.pnote-err{background:var(--rose-soft);border-color:var(--rose-line);color:var(--rose)}
.pnote strong{font-weight:700;font-family:var(--display)}
.pnote a{color:inherit;font-weight:600}

.pnext{padding:18px 20px;background:linear-gradient(160deg,var(--spj-tan-soft),var(--amber-soft));
  border:1px solid var(--amber-line);border-radius:var(--r);font-size:13px;color:var(--ink-2);
  line-height:1.65;margin-top:22px}
.pnext strong{display:block;font-family:var(--display);font-size:15.5px;font-weight:700;
  color:var(--spj-brown-deep);margin-bottom:7px}
.pnext ol{margin:0;padding-left:20px}
.pnext li{margin-bottom:5px}

/* ============ status page ============ */
.pstatus-head{display:flex;flex-direction:column;gap:18px}
@media (min-width:640px){.pstatus-head{flex-direction:row;align-items:flex-start;justify-content:space-between}}
.plabel-xs{font-family:var(--display);font-size:10px;color:var(--muted-2);text-transform:uppercase;
  letter-spacing:.13em;font-weight:700;margin-bottom:6px}
.pname{font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.02em}
.pbadge{display:inline-flex;align-items:center;font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:6px 14px;border-radius:var(--pill);border:1px solid}
.pbadge-teal{background:var(--teal-soft);color:var(--teal);border-color:var(--teal-line)}
.pbadge-blue{background:var(--spj-tan-soft);color:var(--spj-brown);border-color:var(--amber-line)}
.pbadge-amber{background:var(--amber-soft);color:var(--amber-hot);border-color:var(--amber-line)}
.pbadge-red{background:var(--rose-soft);color:var(--rose);border-color:var(--rose-line)}
.pbadge-gray{background:var(--sunk);color:var(--muted);border-color:var(--line-2)}

.ptimeline{display:flex;margin-top:26px}
.ptl{flex:1;text-align:center;position:relative;min-width:0}
.ptl:not(:last-child)::after{content:'';position:absolute;top:14px;left:50%;right:-50%;height:2px;background:var(--line-2);z-index:0}
.ptl.done::after{background:var(--amber)}
.ptl-dot{width:29px;height:29px;border-radius:50%;border:2px solid var(--line-2);background:var(--surface);
  display:flex;align-items:center;justify-content:center;margin:0 auto 9px;position:relative;z-index:1;
  font-family:var(--display);font-size:12px;font-weight:700;color:var(--muted-2)}
.ptl.done .ptl-dot{background:var(--amber);border-color:var(--amber);color:#fff}
.ptl.current .ptl-dot{background:var(--spj-brown);border-color:var(--spj-brown);color:#fff;
  box-shadow:0 0 0 5px var(--spj-tan-soft)}
.ptl-label{font-family:var(--display);font-size:10.5px;color:var(--muted-2);line-height:1.3;
  letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.ptl.done .ptl-label,.ptl.current .ptl-label{color:var(--ink)}

.paction{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);padding:20px;margin-top:16px;display:flex;flex-direction:column;gap:16px;
  position:relative;overflow:hidden}
.paction::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--amber),var(--spj-brown))}
@media (min-width:640px){.paction{flex-direction:row;align-items:center;justify-content:space-between}}
.paction-info{font-size:13.5px;color:var(--muted);line-height:1.55}
.paction-info strong{display:block;font-family:var(--display);font-size:17px;font-weight:700;
  color:var(--ink);margin-bottom:4px;letter-spacing:-.01em}
.paction .pbtn{flex:0 0 auto}

.prow{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.prow:last-child{border-bottom:0}
.prow-k{color:var(--muted);flex:0 0 auto;font-size:12.5px}
.prow-v{color:var(--ink);font-weight:600;text-align:right;word-break:break-word;min-width:0}

/* ============ payment ============ */
.pamount{text-align:center;padding:30px 20px;margin-bottom:22px;border-radius:var(--r);
  background:linear-gradient(158deg,var(--spj-brown-mid),var(--spj-brown) 55%,var(--spj-brown-deep));
  color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh-brand)}
.pamount::after{content:'';position:absolute;inset:0;
  background:radial-gradient(80% 60% at 110% -20%,rgba(217,135,42,.42),transparent 62%)}
.pamount > *{position:relative;z-index:1}
.pamount-n{font-family:var(--display);font-size:44px;font-weight:800;line-height:1;letter-spacing:-.03em}
.pamount-n sup{font-size:21px;font-weight:500;opacity:.72;vertical-align:top;line-height:2.4}
.pamount-l{font-family:var(--display);font-size:10.5px;opacity:.75;margin-top:11px;
  letter-spacing:.13em;text-transform:uppercase;font-weight:600}
.psecure{display:flex;align-items:center;justify-content:center;gap:7px;font-size:11.5px;color:var(--muted-2);margin-top:16px}
.psecure svg{flex:0 0 13px;width:13px;height:13px}

/* ============ slots ============ */
.pmonth{font-family:var(--display);font-size:13px;font-weight:700;color:var(--spj-brown);
  letter-spacing:.04em;text-transform:uppercase;margin:24px 0 12px}
.pmonth:first-child{margin-top:0}
.pslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(154px,1fr));gap:11px}
.pslot{border:1.5px solid var(--line-2);border-radius:var(--r);padding:16px 12px;background:var(--surface);
  cursor:pointer;text-align:center;position:relative;min-height:90px;
  transition:border-color .15s,box-shadow .15s,background .15s,transform .12s}
.pslot:hover{border-color:var(--amber);transform:translateY(-2px);box-shadow:var(--sh-2)}
.pslot.sel{border-color:var(--spj-brown);background:var(--spj-tan-soft);box-shadow:var(--sh-2)}
.pslot-chk{position:absolute;top:9px;right:9px;width:19px;height:19px;border-radius:50%;
  background:var(--spj-brown);display:none;align-items:center;justify-content:center}
.pslot-chk svg{width:10px;height:10px;color:#fff}
.pslot.sel .pslot-chk{display:flex}
.pslot-day{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber-hot);margin-bottom:5px}
.pslot-date{font-family:var(--display);font-size:16px;font-weight:700;color:var(--ink);margin-bottom:3px;letter-spacing:-.01em}
.pslot-time{font-size:11.5px;color:var(--muted)}

/* ============ success ============ */
.psuccess{text-align:center;padding:50px 22px}
.psuccess-icon{width:66px;height:66px;border-radius:50%;
  background:linear-gradient(158deg,var(--teal-soft),#d2ebe7);
  display:flex;align-items:center;justify-content:center;margin:0 auto 22px;color:var(--teal);
  box-shadow:0 0 0 8px rgba(17,133,122,.08)}
.psuccess-icon svg{width:30px;height:30px;stroke-width:2.2}
.psuccess h2{font-size:25px;margin-bottom:12px}
.psuccess p{font-size:14.5px;color:var(--muted);max-width:450px;margin:0 auto 28px;line-height:1.7}

/* ============ footer ============ */
.pfoot{border-top:1px solid var(--line);background:var(--surface);padding:20px 16px;
  display:flex;flex-direction:column;gap:14px;align-items:center;font-size:11.5px;color:var(--muted-2);text-align:center}
.pfoot img{height:30px;display:block}
@media (min-width:640px){.pfoot{flex-direction:row;justify-content:space-between;text-align:left;padding:22px 28px}}