/* ============================================================================
   Loop Holo — v157
   Sujesh, 27 Sep: "change the UI experience in the Holographic style and
   everything wants to feel future". One theme for every customer and provider
   screen, loaded LAST on each page, so it re-skins without moving anything:
   same steps, same buttons, same places — only the material changes.

   The material:
     · jet-black ground with a faint measuring grid (27 Sep: blue → jet black)
     · glass panels (frosted, lit from the edge)
     · one holographic spectrum — cyan → violet → pink → gold — on the things
       that matter: the main button, the chosen row, the key card edge
     · machine yellow stays Loop's signal colour, lifted for a dark ground
   Rules kept: text contrast stays high (people read this outdoors), Malayalam
   untouched, and every animation stops for people who ask for less motion.
   The ops desk (ops.html) keeps its own themes and does not load this file.
   ========================================================================== */

html:root{
  --holo:linear-gradient(115deg,#67E8F9 0%,#A78BFA 26%,#F0ABFC 50%,#FDE68A 74%,#67E8F9 100%);
  --holo-soft:linear-gradient(115deg,rgba(103,232,249,.55),rgba(167,139,250,.55),rgba(240,171,252,.5),rgba(253,230,138,.5));
  --panel:#141414;           /* solid glass, for gradient-border cards */
  --glass:rgba(20,20,20,.72);
  --glow:0 0 0 1px rgba(255,255,255,.10), 0 10px 30px rgba(0,0,0,.45), 0 0 28px rgba(140,120,255,.10);

  /* loop-ui tokens, re-lit for a dark ground */
  --paper:#0A0A0A;
  --raised:rgba(22,22,22,.78);
  --sunk:rgba(255,255,255,.05);
  --sunk-2:rgba(255,255,255,.09);
  --ink:#F4F7FF;
  --ink-2:#E6E6E6;
  --muted:#A8A8A8;
  --faint:#7D7D7D;
  --rule:rgba(255,255,255,.16);
  --rule-2:rgba(255,255,255,.30);
  --ochre:#FFD36B;
  --ochre-br:#FFC23A;
  --ochre-l:#FFE08A;
  --ochre-wash:rgba(255,200,70,.13);
  --good:#62E6A6;  --good-wash:rgba(98,230,166,.13);
  --alert:#FF9275; --alert-wash:rgba(255,120,90,.14);
  --e1:0 0 0 1px rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.35);
  --e2:0 0 0 1px rgba(255,255,255,.12), 0 8px 22px rgba(0,0,0,.45);
  --e3:0 0 0 1px rgba(255,255,255,.16), 0 18px 44px rgba(0,0,0,.55), 0 0 30px rgba(140,120,255,.14);
  /* things that used to be black on a light page stay dark glass, and their text stays light */
  --ink-bg:rgba(14,14,14,.92);
  --on-ink:#F4F7FF;

  /* the older page-local names (shell, about, check-in, verify, meter …) */
  --bg:#0A0A0A; --surface:rgba(22,22,22,.78); --sheet:#141414; --line:rgba(255,255,255,.16);
  --mut:#A8A8A8; --soft:rgba(255,255,255,.06); --teal:rgba(14,14,14,.92);
  --black:rgba(14,14,14,.92); --black-2:rgba(30,30,30,.92); --black-ink:#F4F7FF;
  --amber:#FFC23A; --ochre-d:#FFD36B;
  color-scheme:dark;
}

/* ------------------------------------------------------------ the ground ---- */
html{background:#0A0A0A}
body{
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px) 0 0/34px 34px,
    #0A0A0A !important;
  background-attachment:fixed !important;
  color:var(--ink-2);
}
/* (the measuring grid above is construction, from the future) */
::selection{background:rgba(167,139,250,.45);color:#fff}

/* ------------------------------------------------------------ headers ------ */
header, .hdr, .topbar{
  background:rgba(10,10,10,.82) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent !important;
  border-image:var(--holo) 1 !important;
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}

/* ------------------------------------------------------------ type -------- */
.u-display, h1, h2{color:var(--ink)}
.u-display{color:#FFFFFF !important;text-shadow:0 0 26px rgba(167,139,250,.38), 0 0 2px rgba(103,232,249,.25)}
.u-display .en{color:var(--muted) !important;text-shadow:none}
.u-display .l-en, .u-display .l-ml{color:#FFFFFF}
.u-eyebrow{color:#9FB4FF !important;letter-spacing:.14em}
a{color:#9FD8FF}
hr{border-color:var(--rule)}

/* ------------------------------------------------------------ the main button */
.u-cta, button.cta, .cta, .btn-primary{
  position:relative;overflow:hidden;
  background:var(--holo) !important;background-size:220% 100% !important;
  color:#070A16 !important;border:0 !important;font-weight:700 !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset, 0 10px 28px rgba(140,120,255,.35), 0 0 22px rgba(103,232,249,.25) !important;
  animation:holoShift 7s linear infinite;
  text-shadow:none;
}
.u-cta *, .cta *{color:#070A16 !important}
.u-cta::after, .cta::after{          /* a light sweep, like a hologram catching the light */
  content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);animation:holoSweep 3.8s ease-in-out infinite;pointer-events:none;
}
.u-cta:disabled, .u-cta[disabled], .cta:disabled{
  background:rgba(255,255,255,.08) !important;color:var(--faint) !important;
  box-shadow:0 0 0 1px var(--rule) inset !important;animation:none
}
.u-cta:disabled *, .u-cta[disabled] *{color:var(--faint) !important}
.u-cta:disabled::after, .u-cta[disabled]::after{display:none}
@keyframes holoShift{0%{background-position:0% 50%}100%{background-position:220% 50%}}
@keyframes holoSweep{0%,55%{left:-60%}100%{left:130%}}

.u-ghost, button.ghost, .ghost{
  background:rgba(255,255,255,.04) !important;color:var(--ink) !important;
  border:1px solid var(--rule-2) !important;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.u-ghost:active, .ghost:active{background:rgba(167,139,250,.12) !important}

/* ------------------------------------------------------------ choices ------ */
.u-opt{color:var(--ink-2);border-bottom-color:var(--rule) !important;transition:background var(--fast) var(--ease)}
.u-opt:active{background:rgba(167,139,250,.08) !important}
.u-opt.on{background:linear-gradient(90deg,rgba(167,139,250,.14),rgba(103,232,249,.05) 70%,transparent) !important}
.u-opt::before{background:var(--holo) !important}
.u-opt.on::after{background-color:#A78BFA !important;box-shadow:0 0 14px rgba(167,139,250,.7)}
.u-opt b{color:var(--ink)}
.u-opt .ic{background:rgba(255,255,255,.06) !important;color:#B9C6EA !important;box-shadow:0 0 0 1px var(--rule) inset}
.u-opt.on .ic{background:rgba(167,139,250,.18) !important;color:#E9DDFF !important;box-shadow:0 0 0 1px rgba(167,139,250,.5) inset, 0 0 16px rgba(167,139,250,.35)}
.u-opt .ic.art, .ic.art{box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 0 18px rgba(103,232,249,.12)}
.u-tick{border-color:var(--rule-2) !important;background:transparent}
.u-opt.on .u-tick{background:#A78BFA !important;border-color:#A78BFA !important}

/* ------------------------------------------------------------ cards -------- */
.u-card, .card, .panel{
  background:linear-gradient(var(--panel),var(--panel)) padding-box, var(--holo-soft) border-box !important;
  border:1px solid transparent !important;
  box-shadow:var(--glow) !important;color:var(--ink-2);
}
.u-card h3, .card h3{color:var(--ink)}
.u-card.is-wash{background:linear-gradient(rgba(28,28,28,.95),rgba(28,28,28,.95)) padding-box, var(--holo-soft) border-box !important}

/* page parts that play the same role as the ones above */
#gate button, .g-card button, .talk-go, .signin-btn, .hero .go{
  background:var(--holo) !important;background-size:220% 100% !important;color:#070A16 !important;
  font-weight:700 !important;box-shadow:0 10px 26px rgba(140,120,255,.32), 0 0 20px rgba(103,232,249,.2) !important;
  animation:holoShift 7s linear infinite;
}
.g-card, .tile, .talk, .grouplist, .hits, .res, .own{
  background:linear-gradient(var(--panel),var(--panel)) padding-box, var(--holo-soft) border-box !important;
  border:1px solid transparent !important;box-shadow:var(--glow) !important;
}
.talk{background:linear-gradient(rgba(20,20,20,.96),rgba(12,12,12,.96)) padding-box, var(--holo) border-box !important;
  box-shadow:0 0 26px rgba(167,139,250,.28), 0 10px 30px rgba(0,0,0,.4) !important}
.talk .en, .talk small{color:var(--muted) !important}
.tile .art{background:#141414 !important}
.tile:active, .talk:active{transform:scale(.985)}
.lede h1, #gate h2{color:#FFFFFF !important;text-shadow:0 0 26px rgba(167,139,250,.38), 0 0 2px rgba(103,232,249,.25)}
.lede h1 .en, #gate h2 span{color:var(--muted) !important;text-shadow:none}
/* the order screen's sheet: plain ground normally, glass when it floats over the map */
body.mapon .sheet{background:rgba(10,10,10,.9) !important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border-top:1px solid transparent !important;border-image:var(--holo) 1 !important}

/* about: the promise cards · terms: the tabs · field pages: their buttons */
.pill{background:linear-gradient(var(--panel),var(--panel)) padding-box, var(--holo-soft) border-box !important;
  border:1px solid transparent !important;box-shadow:var(--glow);color:var(--ink-2)}
.pill b{color:var(--ink)}
.note{background:rgba(167,139,250,.08) !important;color:var(--ink-2);border:1px solid var(--rule)}
.tabs button{background:rgba(255,255,255,.05) !important;color:var(--ink) !important;border-color:var(--rule-2) !important}
.tabs button.on{background:var(--holo) !important;color:#070A16 !important;border-color:transparent !important}
body[data-holo=field] button:not(.ghost):not(.red):not(.ghost2), body[data-holo=field] a.btn:not(.sos){
  background:var(--holo) !important;background-size:220% 100% !important;color:#070A16 !important;
  box-shadow:0 10px 26px rgba(140,120,255,.3) !important;animation:holoShift 7s linear infinite;
}
body[data-holo=field] button.ghost{background:rgba(255,255,255,.05) !important;color:var(--ink) !important;border:1px solid var(--rule-2) !important}
body[data-holo=field] button.red{box-shadow:0 0 22px rgba(255,90,70,.45) !important}
/* SOS stays red — an emergency button must never look like the ordinary one */
body[data-holo=field] a.btn.sos{background:#C0392B !important;color:#FFFFFF !important;box-shadow:0 0 26px rgba(255,70,50,.55) !important}
body[data-holo=field] .ghost2{background:rgba(255,255,255,.04) !important;color:var(--ink) !important;border-color:var(--rule-2) !important}

/* the older one-screen pages (about, verify, check-in): --teal was both the dark
   header and a text colour; on a dark ground the text uses a light lavender instead */
body[data-holo=old] h2, .done h2, #done h2, .back, .code, .chk, .addph{color:#CFC2FF !important}
.chk, .addph, .st button{background:rgba(255,255,255,.05) !important;border-color:rgba(167,139,250,.55) !important}
.st button{color:var(--ink) !important}
.st button.on-av{background:#1E7A4F !important;border-color:#62E6A6 !important;box-shadow:0 0 16px rgba(98,230,166,.45)}
.st button.on-bz{background:#8A5E10 !important;border-color:#FFC23A !important;box-shadow:0 0 16px rgba(255,194,58,.45)}
.st button.on-off{background:#8A3222 !important;border-color:#FF9275 !important;box-shadow:0 0 16px rgba(255,120,90,.45)}
.send, a.cta{background:var(--holo) !important;background-size:220% 100% !important;color:#070A16 !important;
  box-shadow:0 10px 26px rgba(140,120,255,.3) !important;animation:holoShift 7s linear infinite}
.steps li::before{background:var(--holo) !important;color:#070A16 !important}
.code{background:rgba(167,139,250,.10) !important;box-shadow:0 0 0 1px rgba(167,139,250,.4) inset, 0 0 24px rgba(103,232,249,.18)}
#loopGate .g-card{border-color:transparent !important}

/* My job (shell): the hero is a glass card with a violet glow, the link box is one box */
.hero{background:linear-gradient(var(--panel),var(--panel)) padding-box, var(--holo-soft) border-box !important;
  border:1px solid transparent !important;box-shadow:var(--glow) !important}
.hero::after{background:radial-gradient(circle, rgba(167,139,250,.28), transparent 70%) !important}
.hero h2{color:#FFFFFF !important}
.tfield input{border:0 !important;background:transparent !important;box-shadow:none !important;padding:0 !important}
.tfield:focus-within{border-color:#A78BFA !important;box-shadow:0 0 0 3px rgba(167,139,250,.25), 0 0 18px rgba(103,232,249,.18) !important}
.jobrow .st{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:99px;font-size:.7rem;font-weight:600;
  background:rgba(167,139,250,.14);color:#E4DAFF;box-shadow:0 0 0 1px rgba(167,139,250,.35) inset}
.jobrow .st.live{background:rgba(98,230,166,.14);color:#BFF5DA;box-shadow:0 0 0 1px rgba(98,230,166,.45) inset}
.jobrow .st.done{background:rgba(255,255,255,.06);color:var(--muted);box-shadow:0 0 0 1px var(--rule) inset}
.jobrow .st.act{background:rgba(255,200,70,.14);color:#FFE7A3;box-shadow:0 0 0 1px rgba(255,194,58,.45) inset}

/* ------------------------------------------------------------ fields ------- */
input, select, textarea{
  background:rgba(255,255,255,.05) !important;color:var(--ink) !important;
  border:1px solid var(--rule-2) !important;caret-color:#A78BFA;
}
input::placeholder, textarea::placeholder{color:var(--faint) !important}
input:focus, select:focus, textarea:focus{
  outline:none !important;border-color:#A78BFA !important;
  box-shadow:0 0 0 3px rgba(167,139,250,.25), 0 0 18px rgba(103,232,249,.18) !important;
}
select option{background:#141414;color:#F4F7FF}
input[type=checkbox], input[type=radio]{accent-color:#A78BFA}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1)}

/* ------------------------------------------------------------ small parts -- */
.mrec, .badge, .chip.on{
  background:var(--holo) !important;background-size:200% 100% !important;color:#070A16 !important;
  box-shadow:0 0 14px rgba(167,139,250,.45);animation:holoShift 9s linear infinite;
}
.u-hint, .hint, small{color:var(--muted)}
.mprice{color:#FFE7A3 !important}
.warnbox{background:rgba(255,120,90,.10) !important;border-color:rgba(255,146,117,.45) !important;color:#FFD9CF}
.ok .big{box-shadow:0 0 0 1px rgba(98,230,166,.5), 0 0 34px rgba(98,230,166,.45)}
img[src*="logo"]{filter:drop-shadow(0 0 10px rgba(255,194,58,.35))}

/* progress bar: the step you are on glows */
.steps, .u-steps{filter:drop-shadow(0 0 6px rgba(167,139,250,.35))}

/* bottom navigation in the shell */
nav, .tabbar, .bnav{
  background:rgba(10,10,10,.85) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border-top:1px solid transparent !important;border-image:var(--holo) 1 !important;
}

/* scrollbars */
*{scrollbar-color:rgba(167,139,250,.45) transparent}

/* ------------------------------------------------------------ tile pictures */
/* v157: every tile picture now stands on the same future stage (dark studio, glowing
   grid floor, spectral rim). A slow light sweep crosses each one, staggered so the
   grid never flashes all at once. */
.tile .art, .ic.art, .u-opt .ic.art{position:relative;overflow:hidden}
.tile .art::after, .ic.art::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.16) 46%,rgba(167,139,250,.14) 53%,transparent 66%);
  transform:translateX(-130%);animation:tileSweep 7s ease-in-out infinite;
}
.tile:nth-child(2) .art::after, .u-opt:nth-child(2) .ic.art::after{animation-delay:.9s}
.tile:nth-child(3) .art::after, .u-opt:nth-child(3) .ic.art::after{animation-delay:1.8s}
.tile:nth-child(4) .art::after, .u-opt:nth-child(4) .ic.art::after{animation-delay:2.7s}
.u-opt:nth-child(5) .ic.art::after{animation-delay:3.6s}
.u-opt:nth-child(6) .ic.art::after{animation-delay:4.5s}
.u-opt:nth-child(n+7) .ic.art::after{animation-delay:5.4s}
@keyframes tileSweep{0%,62%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* ------------------------------------------------------------ profile (v159) */
/* The profile page still carried cream cards from the light theme: the checklist, the
   number plates and the photo / free-now buttons were white-on-cream and could not be read. */
.nbadge[hidden]{display:none !important}
.todo{background:linear-gradient(rgba(40,30,8,.92),rgba(24,20,12,.92)) padding-box, linear-gradient(115deg,#FFC23A,#F0ABFC 60%,#67E8F9) border-box !important;
  border:1px solid transparent !important;color:var(--ink) !important;box-shadow:0 0 22px rgba(255,194,58,.16) !important;border-radius:14px !important}
.todo .tt{display:block;color:#FFFFFF;font-size:.9rem;margin-bottom:2px}
.todo ul{list-style:none;padding-left:0 !important;margin:8px 0 0 !important}
.todo li{margin:0 !important;border-top:1px solid rgba(255,255,255,.08)}
.todo li a{display:flex;align-items:center;gap:10px;padding:10px 2px;color:#FFE7A3 !important;font-weight:600}
.todo li a span{flex:1}
.todo li a i{font-style:normal;color:#FFC23A;font-size:1.1rem}
.todo.ok{background:rgba(98,230,166,.10) !important;border:1px solid rgba(98,230,166,.45) !important;color:#BFF5DA !important;box-shadow:none !important}
.agree, .fform, .ofr{background:rgba(255,255,255,.04) !important;border-color:rgba(255,194,58,.55) !important;color:var(--ink-2)}
.ofr .clk{background:rgba(98,230,166,.14) !important;color:#BFF5DA !important}
.ofr .row button.red{background:rgba(255,120,90,.12) !important;color:#FFB4A2 !important;border-color:rgba(255,146,117,.45) !important}
.urg.URGENT{background:rgba(255,194,58,.16) !important;color:#FFE7A3 !important}
.urg.EMERGENCY{background:rgba(255,120,90,.16) !important;color:#FFB4A2 !important}
.av, .iart, .sart, .fform .iart, .item .iart{background:#161616 !important}
/* the number plate reads like a number plate: white, black letters */
.item.inv .reg, .rrow .reg{background:#F1F1EC !important;color:#0B0B08 !important;border:1px solid #9C9C94 !important;
  border-radius:5px !important;font-weight:700 !important;letter-spacing:.08em;box-shadow:0 0 0 2px rgba(0,0,0,.35)}
.item.inv .reg .l-en, .item.inv .reg .l-ml{color:#0B0B08 !important}
.item.inv .st.new{background:rgba(255,194,58,.14) !important;color:#FFE7A3 !important}
.item.inv .st.ok{background:rgba(98,230,166,.14) !important;color:#BFF5DA !important;box-shadow:0 0 0 1px rgba(98,230,166,.35) inset}
.item.inv .st.bad{background:rgba(255,120,90,.14) !important;color:#FFB4A2 !important}
.item.inv .ph button{background:rgba(255,255,255,.05) !important;color:var(--ink) !important;border:1px solid var(--rule-2) !important}
.item.inv .ph button.warn{border-color:rgba(255,194,58,.6) !important;color:#FFE7A3 !important}
.item.inv .ph .need{color:#FFB4A2 !important}
.availst{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:6px;margin-top:4px}
.availst::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.availst.on{background:rgba(98,230,166,.12);color:#8EF0C0}
.availst.off{background:rgba(255,255,255,.06);color:#B8B8B8}
.item.inv .ph .avail{margin-left:0 !important}
.item.inv .ph .avail.busy{background:linear-gradient(115deg,rgba(103,232,249,.25),rgba(167,139,250,.25)) !important;color:#FFFFFF !important;border-color:rgba(167,139,250,.6) !important}
.rwarn{display:block;margin:8px 0 2px;padding:8px 10px;border-radius:10px;font-size:.8rem;font-weight:600;line-height:1.45;
  background:rgba(255,194,58,.10);color:#FFE7A3;box-shadow:0 0 0 1px rgba(255,194,58,.45) inset}
.pulse{animation:loopPulse 1.8s ease-out 1}
@keyframes loopPulse{0%{box-shadow:0 0 0 0 rgba(167,139,250,.0)}20%{box-shadow:0 0 0 3px rgba(167,139,250,.9),0 0 24px rgba(103,232,249,.5)}100%{box-shadow:0 0 0 0 rgba(167,139,250,0)}}

/* ------------------------------------------------------------ less motion -- */
@media (prefers-reduced-motion:reduce){
  .u-cta, .cta, .mrec, .badge, #gate button, .g-card button, .hero .go, body[data-holo=field] button, .send, a.cta{animation:none !important}
  .u-cta::after, .cta::after, .tile .art::after, .ic.art::after{display:none}
  .pulse{animation:none !important}
}