/* Cowboy's AC — pay sheet shell. Shared by techs and install (one copy per app,
   never cross-origin). Brand: espresso ground, cream ink, gold + red accents. */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{background:#0a0605;min-height:100%}
body{
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;color:#f4ead6;
  background:
    radial-gradient(1200px 760px at 78% -12%,rgba(226,60,44,.10),transparent 62%),
    radial-gradient(1000px 700px at 2% 108%,rgba(232,176,74,.075),transparent 58%),
    linear-gradient(180deg,#140d09,#0a0605 62%);
  background-attachment:fixed;overflow-x:hidden;overscroll-behavior-y:contain;
}
a{color:#e8b04a;text-decoration:none}
a:hover{color:#f6cd78}
input,button,select,textarea{font:inherit;color:inherit;-webkit-appearance:none;border-radius:0}
input::placeholder,textarea::placeholder{color:#6b5946}
input:focus,textarea:focus{outline:none;border-color:rgba(232,176,74,.55);box-shadow:0 0 0 4px rgba(232,176,74,.07)}
::selection{background:rgba(232,176,74,.28)}
[hidden]{display:none!important}
.grain{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(232,176,74,.06) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 12%,transparent 74%);
  mask-image:radial-gradient(120% 90% at 50% 0%,#000 12%,transparent 74%)}

/* atoms */
.mono{font-family:'Share Tech Mono',monospace}
.osw{font-family:'Oswald',sans-serif}
.num{font-variant-numeric:tabular-nums}
.rel{position:relative}
.gold-t{color:#e8b04a}
.dim{color:#8a755a}
.eyebrow{font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:#8a755a}
.eyebrow.sm{font-size:8.5px;letter-spacing:.28em;color:#a98f6b}
.lab{display:block;font-family:'Share Tech Mono',monospace;font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:#8a755a;margin-bottom:8px}
.meta{font-size:9px;letter-spacing:.12em;color:#6f5c47;white-space:nowrap}
.panel{position:relative;overflow:hidden;border-radius:20px;padding:22px;
  background:linear-gradient(168deg,rgba(255,246,232,.055),rgba(255,246,232,.016));
  border:1px solid rgba(232,176,74,.13);
  box-shadow:0 44px 90px -56px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05)}
.topline{position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,176,74,.7),transparent)}
.topline.red{background:linear-gradient(90deg,transparent,rgba(226,60,44,.75),transparent)}
.fld{width:100%;min-height:50px;padding:13px 15px;border-radius:12px;background:rgba(10,6,4,.5);
  border:1px solid rgba(232,176,74,.13);color:#f4ead6;font-size:17px;
  transition:border-color .3s,box-shadow .3s}
textarea.fld{min-height:0;resize:none;font-family:inherit}
.fld.mono{font-family:'Share Tech Mono',monospace;letter-spacing:.04em}
.gold{position:relative;overflow:hidden;width:100%;min-height:54px;padding:15px 18px;border-radius:14px;
  border:1px solid transparent;cursor:pointer;font-family:'Oswald',sans-serif;font-weight:500;font-size:15px;
  letter-spacing:.13em;text-transform:uppercase;color:#1b120d;
  background:linear-gradient(150deg,#f6cd78,#d99f3e);box-shadow:0 20px 40px -24px rgba(232,176,74,.85);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .4s,color .4s,border-color .4s,box-shadow .4s}
.gold:hover:not(:disabled){transform:translateY(-2px)}
.gold:active:not(:disabled){transform:scale(.985)}
.gold:disabled{cursor:not-allowed;background:rgba(255,246,232,.03);color:#8a755a;
  border-color:rgba(232,176,74,.18);box-shadow:none}
.gold:disabled .sheen{opacity:0}
.gold .sheen{position:absolute;top:0;bottom:0;left:0;width:38%;pointer-events:none;
  background:linear-gradient(96deg,transparent,rgba(255,255,255,.5),transparent);
  animation:sheen 4.6s cubic-bezier(.4,0,.2,1) infinite}
.ghost{min-height:40px;padding:0 13px;border-radius:10px;cursor:pointer;background:transparent;
  border:1px solid rgba(232,176,74,.16);font-family:'Share Tech Mono',monospace;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#a98f6b;transition:.25s}
.ghost:hover{color:#f6cd78;border-color:rgba(232,176,74,.4);background:rgba(232,176,74,.07)}
.err{font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:.08em;color:#f0907f;
  text-align:center;min-height:14px;text-wrap:pretty}

/* coin */
.coinWrap{position:relative;height:206px;margin-bottom:4px}
.coinBox{position:relative;width:148px;height:148px;flex:0 0 auto}
ccs-coin{position:absolute;inset:0;display:block}
.coinHalo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:238px;height:238px;
  border-radius:50%;background:radial-gradient(circle,rgba(232,176,74,.3),transparent 66%);
  filter:blur(8px);animation:halo 6s ease-in-out infinite;pointer-events:none}
.coinHalo.sm{width:190px;height:190px}
.coinRing{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:154px;height:154px;
  border-radius:50%;border:1px solid rgba(232,176,74,.22);
  box-shadow:inset 0 0 34px -8px rgba(232,176,74,.35);pointer-events:none}
.coinWrap .coinRing{width:212px;height:212px}

/* login */
#login{position:relative;z-index:1;min-height:100vh;min-height:100dvh;display:grid;place-items:center;
  padding:max(40px,env(safe-area-inset-top)) 22px 44px}
.loginCard{width:100%;max-width:392px}
.loginHead{text-align:center;margin-bottom:30px}
.bigTitle{font-weight:300;font-size:38px;line-height:1.05;color:#fbf4e6;margin-top:12px}
.bigTitle .gold-t{font-weight:600}
.rule{width:44px;height:1px;margin:16px auto 0;
  background:linear-gradient(90deg,transparent,rgba(232,176,74,.85),transparent)}
.loginPanel{display:flex;flex-direction:column;gap:16px;padding:26px}
.fineprint{font-size:9.5px;letter-spacing:.09em;color:#6f5c47;text-align:center;line-height:1.7}

/* app shell */
#app{position:relative;z-index:1;padding-bottom:108px}
.wrap{max-width:1120px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) clamp(14px,3vw,30px) 0}
.hdr{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0 16px;
  border-bottom:1px solid rgba(232,176,74,.10)}
.hdrLeft{display:flex;align-items:center;gap:12px;min-width:0}
.hdrLogo{height:38px;width:auto;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.7))}
.hdrTitle{font-weight:300;font-size:21px;line-height:1.15;color:#fbf4e6;margin-top:2px;white-space:nowrap}
.hdrTitle .gold-t{font-weight:600}
.hdrRight{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.hdrRight .who{text-align:right}
.whoName{font-weight:500;font-size:14px;letter-spacing:.03em;color:#fbf4e6;white-space:nowrap}
.whoRole{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#8a755a;margin-top:3px;white-space:nowrap}
.av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;border:1px solid rgba(232,176,74,.4);
  background-color:#2a1a11;background-size:cover;background-position:center;display:grid;place-items:center;
  font-family:'Oswald',sans-serif;font-weight:500;font-size:14px;color:#1b120d}

/* hero */
.hero{margin-top:18px;background:linear-gradient(168deg,rgba(226,60,44,.11),rgba(255,246,232,.016));
  border-color:rgba(232,176,74,.15)}
.heroGlow{position:absolute;right:-90px;top:-120px;width:320px;height:320px;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,rgba(226,60,44,.2),transparent 66%);filter:blur(10px)}
.heroGrid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;align-items:center}
.heroLeft{display:flex;align-items:center;gap:20px}
.heroNum{font-weight:300;font-size:56px;line-height:.95;letter-spacing:-.025em;color:#fbf4e6;
  text-shadow:0 0 46px rgba(232,176,74,.32);margin-top:6px}
.heroNote{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#8a755a;margin-top:9px;text-wrap:pretty}
.heroRight{display:flex;flex-direction:column;gap:14px}
.mixBar{display:flex;height:10px;border-radius:6px;overflow:hidden;
  background:rgba(232,176,74,.07);border:1px solid rgba(232,176,74,.12)}
.mixBar span{height:100%;transition:width .9s cubic-bezier(.22,.61,.18,1)}
.bdRow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:8px;
  border-bottom:1px solid rgba(232,176,74,.08)}
.bdRow+.bdRow{margin-top:9px}
.bdLeft{display:flex;align-items:center;gap:9px;min-width:0}
.swatch{width:8px;height:8px;border-radius:2px;flex:0 0 auto}
.bdLabel{font-family:'Share Tech Mono',monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.bdVal{font-family:'Oswald',sans-serif;font-weight:500;font-size:19px;color:#f4ead6;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rateGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(78px,1fr));gap:8px;margin-top:11px}
.rateCell{padding:11px 12px;border-radius:11px;border:1px solid rgba(232,176,74,.12)}
.rateCell b{display:block;font-family:'Oswald',sans-serif;font-weight:500;font-size:21px;line-height:1;
  font-variant-numeric:tabular-nums}
.rateCell span{display:block;font-family:'Share Tech Mono',monospace;font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;color:#7d6850;margin-top:6px}

/* two-column body: 1 col on iPhone, 2 on iPad, no media query */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:18px;margin-top:18px;align-items:start}
.panelHead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.panelTitle{font-weight:300;font-size:26px;line-height:1.1;color:#fbf4e6;margin-top:8px}
.panelTitle strong{font-weight:500}
.stack{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px}

/* search + rows */
.searchWrap{position:relative;margin-top:20px}
.fld.search{min-height:54px;padding-left:46px;border-radius:14px;background:rgba(10,6,4,.55);
  border-color:rgba(232,176,74,.16)}
.searchIcon{position:absolute;left:17px;top:50%;transform:translateY(-50%);font-size:15px;color:#8a755a;pointer-events:none}
.results{display:flex;flex-direction:column;gap:8px;max-height:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.22,.61,.18,1),margin-top .45s}
.results.on{margin-top:14px}
.hit{cursor:pointer;text-align:left;display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:6px 14px;min-height:62px;padding:12px 15px;border-radius:13px;background:rgba(10,6,4,.42);
  border:1px solid rgba(232,176,74,.11);animation:slideIn .4s cubic-bezier(.22,.61,.18,1) both;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),border-color .28s,background .28s}
.hit:hover{transform:translateX(3px);border-color:rgba(232,176,74,.4);background:rgba(232,176,74,.08)}
.hit:active{transform:scale(.98);background:rgba(232,176,74,.16)}
.hitName{display:block;font-size:15.5px;color:#f4ead6;line-height:1.25;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.hitSub{display:flex;align-items:center;gap:8px;margin-top:5px}
.chip{font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px}
.hitCat{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.1em;color:#7d6850}
.hitPay{font-family:'Oswald',sans-serif;font-weight:500;font-size:20px;color:#f6cd78;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.listHead{display:flex;align-items:baseline;justify-content:space-between;margin:22px 0 10px;
  padding-top:18px;border-top:1px solid rgba(232,176,74,.10)}
.listHead .lab{margin:0}
.emptyBox{padding:28px 20px;border-radius:14px;border:1px dashed rgba(232,176,74,.16);text-align:center;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#6f5c47;line-height:1.8}
.lines{display:flex;flex-direction:column;gap:9px}
.line{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px 14px;padding:13px 15px;
  border-radius:13px;background:rgba(10,6,4,.4);border:1px solid rgba(232,176,74,.1);
  animation:slideIn .45s cubic-bezier(.22,.61,.18,1) both;transition:background 1.2s ease,border-color 1.2s ease}
.line.fresh{background:rgba(232,176,74,.13);border-color:rgba(232,176,74,.4)}
.lineName{display:block;font-size:15.5px;color:#f4ead6;line-height:1.25;text-wrap:pretty}
.lineSub{display:block;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;margin-top:5px}
.linePay{font-family:'Oswald',sans-serif;font-weight:500;font-size:21px;color:#f6cd78;
  font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.lineTools{grid-column:1/-1;display:flex;align-items:center;gap:10px}
.stepper{display:flex;align-items:center;border-radius:12px;background:rgba(10,6,4,.5);
  border:1px solid rgba(232,176,74,.13);overflow:hidden}
.stepper button{cursor:pointer;width:46px;height:44px;border:none;background:transparent;color:#a98f6b;
  font-size:20px;line-height:1;transition:.2s}
.stepper button:hover{background:rgba(232,176,74,.12);color:#f6cd78}
.stepper button:active{background:rgba(232,176,74,.22)}
.stepper .qty{min-width:30px;text-align:center;font-family:'Share Tech Mono',monospace;font-size:15px;
  color:#f4ead6;font-variant-numeric:tabular-nums}
.rmBtn{cursor:pointer;margin-left:auto;min-height:44px;padding:0 16px;border-radius:12px;
  border:1px solid rgba(232,176,74,.13);background:transparent;font-family:'Share Tech Mono',monospace;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#7d6850;transition:.25s}
.rmBtn:hover{border-color:rgba(226,60,44,.55);color:#f0907f;background:rgba(226,60,44,.1)}

/* crew slots (install only) */
.slotBlock+.slotBlock{margin-top:18px}
.slotHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px}
.slotHead .l{font-family:'Share Tech Mono',monospace;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase}
.slotGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:8px}
.person{cursor:pointer;text-align:left;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:11px;
  min-height:58px;padding:10px 12px;border-radius:13px;background:rgba(10,6,4,.4);
  border:1px solid rgba(232,176,74,.1);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),background .3s,border-color .3s,opacity .3s}
.person:hover:not(:disabled){transform:translateY(-2px)}
.person:active:not(:disabled){transform:scale(.98)}
.person:disabled{opacity:.35;cursor:not-allowed}
.person.on{background:rgba(232,176,74,.12)}
.pAv{position:relative;width:36px;height:36px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  flex:0 0 auto;border:1px solid rgba(232,176,74,.14);font-family:'Oswald',sans-serif;font-weight:500;
  font-size:13px;color:#1b120d}
.person.on .pAv{border-color:rgba(232,176,74,.6)}
.pAv .ph{position:absolute;inset:0;background-size:cover;background-position:center}
.pName{display:block;font-size:14px;color:#a8906f;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person.on .pName{color:#fff8ea}
.pMeta{display:block;font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#6f5c47;margin-top:3px}

/* period stats */
.periods{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:18px;
  padding:20px 22px;border-radius:18px;
  background:linear-gradient(168deg,rgba(255,246,232,.045),rgba(255,246,232,.012));
  border:1px solid rgba(232,176,74,.11);animation:rise .7s .2s cubic-bezier(.22,.61,.18,1) both}
.periods b{display:block;font-family:'Oswald',sans-serif;font-weight:500;font-size:24px;line-height:1;
  font-variant-numeric:tabular-nums;color:#f4ead6}
.periods span{display:block;font-family:'Share Tech Mono',monospace;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#6f5c47;margin-top:7px}
.footnote{font-size:9px;letter-spacing:.09em;color:#5e4d3b;text-align:center;line-height:1.8;margin-top:22px}

/* submit ritual + action bar */
.ritualWrap{position:fixed;left:0;right:0;bottom:calc(78px + env(safe-area-inset-bottom));z-index:6;
  pointer-events:none;padding:0 clamp(14px,3vw,30px);opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .38s ease,transform .5s cubic-bezier(.22,.61,.18,1)}
.ritualWrap.on{opacity:1;transform:none}
.ritual{max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:8px;max-height:0;overflow:hidden;
  padding:0;border-radius:18px;background:linear-gradient(180deg,rgba(20,13,9,.93),rgba(10,6,4,.97));
  border:1px solid rgba(232,176,74,.18);box-shadow:0 -20px 60px -30px rgba(0,0,0,.95);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transition:max-height .5s cubic-bezier(.22,.61,.18,1),padding .4s}
.ritualWrap.on .ritual{max-height:260px;padding:12px}
.step{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:11px;background:rgba(10,6,4,.35);
  border:1px solid rgba(232,176,74,.09);transition:background .4s,border-color .4s}
.step .ring{width:16px;height:16px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  border:1.5px solid rgba(232,176,74,.22);background:transparent}
.step .ring i{font-style:normal;font-size:9px;line-height:1;color:#1b120d;font-weight:800;opacity:0}
.step .t{font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6f5c47}
.step .m{margin-left:auto;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.1em;color:#a98f6b}
.step.active{background:rgba(232,176,74,.10);border-color:rgba(232,176,74,.4)}
.step.active .ring{border-color:#e8b04a;animation:breathe 1s ease-in-out infinite}
.step.active .t{color:#f6cd78}
.step.done{background:rgba(155,176,106,.10);border-color:rgba(155,176,106,.34)}
.step.done .ring{border-color:#9bb06a;background:#9bb06a;animation:none}
.step.done .ring i{opacity:1}
.step.done .t{color:#c9d6a8}
.step.done .m{color:#9bb06a}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:5;
  padding:12px clamp(14px,3vw,30px) calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(10,6,4,.55),rgba(10,6,4,.94) 46%);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-top:1px solid rgba(232,176,74,.14)}
.barInner{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:14px}
.barTotal{min-width:0;flex:0 0 auto}
.barLab{font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:#8a755a}
.barNum{font-weight:500;font-size:27px;line-height:1.05;color:#f6cd78}
.barBtn{flex:1 1 auto;width:auto}
.barErr{max-width:1120px;margin:8px auto 0}

@keyframes rise{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes slideIn{from{opacity:0;transform:translate3d(-16px,0,0)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes sheen{0%{transform:translate3d(-120%,0,0)}55%{transform:translate3d(220%,0,0)}100%{transform:translate3d(220%,0,0)}}
@keyframes halo{0%,100%{opacity:.35;transform:translate(-50%,-50%) scale(1)}50%{opacity:.7;transform:translate(-50%,-50%) scale(1.06)}}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
.rise{animation:rise .7s cubic-bezier(.22,.61,.18,1) both}
.rise.d1{animation-delay:.06s}
.rise.d2{animation-delay:.12s}
.fadein{animation:fade .6s ease both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* per-line sold-price entry (techs) — tech types the actual sold price; 10% of it is the commission */
.soldWrap{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:12px;
  background:rgba(10,6,4,.5);border:1px solid rgba(232,176,74,.13);transition:border-color .2s}
.soldWrap:focus-within{border-color:#f6cd78}
.soldLab{font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:#7d6850;white-space:nowrap}
.soldFld{width:82px;min-width:0;border:none;background:transparent;color:#f4ead6;font-size:16px;
  font-variant-numeric:tabular-nums;outline:none;padding:0}
.soldFld::placeholder{color:#6f5c47}