/* TETHER V5 — runaway login, warp transition, arrive flash, opt-in tethered submit.
   Zero dependencies. Pairs with /assets-v5/tether.js */
:root{
  --t-bg:#0c0907;--t-card:#15100c;--t-field:#0f0b08;--t-dock:#0d0a07;
  --t-line:#2c2119;--t-line2:#33261c;--t-socket:#4a3524;--t-ok:#7a4318;
  --t-text:#f5ede6;--t-muted:#b8a796;--t-soft:#d8cabd;--t-dim:#8f7f72;
  --t-accent:#f6821f;--t-amber:#ffb020;--t-cream:#ffd9b0;--t-ink:#1f0d00;--t-err:#ff8a80;
  --t-sans:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --t-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}

/* ---------- Login page shell ---------- */
html.t-login-html{background:var(--t-bg)!important;color-scheme:dark}
body.tether-login{margin:0!important;min-height:100vh!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;
  gap:28px!important;padding:56px 16px 40px!important;background:var(--t-bg)!important;color:var(--t-text)!important;font-family:var(--t-sans)!important;
  position:relative;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.tether-login:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(60% 50% at 50% 0%,rgba(246,130,31,.16),transparent 70%),
             radial-gradient(circle at 1px 1px,#2a1d14 1px,transparent 1.2px) 0 0/28px 28px;opacity:.9}
body.tether-login>*{position:relative;z-index:1}
.t-stack{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:28px;transform-origin:50% 45%}
.t-hero{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;animation:t-rise .6s ease both}
.t-kicker{font:600 11px/1 var(--t-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--t-accent)}
.t-hero h1{margin:0!important;font-size:clamp(44px,7vw,64px)!important;line-height:.98!important;letter-spacing:-.045em!important;font-weight:800!important;color:var(--t-text)!important}
.t-hero h1 span{color:var(--t-accent)}
.t-foot{font:500 11px/1.8 var(--t-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--t-dim);text-align:center}

body.tether-login .auth{width:100%!important;max-width:440px!important;margin:0!important;padding:28px!important;border:1px solid var(--t-line)!important;border-radius:22px!important;
  background:var(--t-card)!important;box-shadow:0 30px 80px rgba(0,0,0,.45)!important;color:var(--t-text)!important;transform:none!important}
body.tether-login.t-ready .auth{animation:t-rise .5s ease both}
body.tether-login .auth .brand{display:flex!important;align-items:center;gap:10px;margin:0 0 18px!important}
body.tether-login .auth .brand .mark{width:auto!important;height:auto!important;background:none!important;border-radius:0!important}
body.tether-login .auth .brand .mark svg{width:22px;height:22px;stroke:var(--t-accent)!important;fill:none}
body.tether-login .auth .brand .name{font:600 12px/1 var(--t-mono)!important;letter-spacing:.18em;text-transform:uppercase;color:var(--t-muted)!important}
body.tether-login .auth .brand .sub{display:none!important}
body.tether-login .auth h1{font-size:24px!important;font-weight:700!important;letter-spacing:-.02em!important;margin:0 0 6px!important;color:var(--t-text)!important}
body.tether-login .auth .lead{font-size:14px!important;line-height:1.55;color:var(--t-muted)!important;margin:0 0 18px!important}
body.tether-login .auth .error{background:#2a1513!important;border:1px solid #5a2a27!important;color:#ffb4ad!important;border-radius:10px!important;font-size:13px!important}
body.tether-login .auth form{display:flex;flex-direction:column;gap:16px}
body.tether-login .auth .field{margin:0!important;display:flex;flex-direction:column;gap:8px}
body.tether-login .auth label{font-size:13px!important;font-weight:600!important;color:var(--t-soft)!important;margin:0!important;transition:color .2s}
.t-field.is-focus label,.t-field.is-ok label{color:var(--t-accent)!important}
.t-field.is-bad label{color:#ff9d94!important}
.t-input{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 8px 0 14px;border:1.5px solid var(--t-line2);border-radius:12px;background:var(--t-field);transition:border-color .2s,box-shadow .2s}
.t-field.is-ok .t-input{border-color:var(--t-ok)}
.t-field.is-focus .t-input{border-color:var(--t-accent);box-shadow:0 0 0 4px rgba(246,130,31,.14)}
.t-field.is-bad .t-input{border-color:var(--t-err)}
.t-field.shake .t-input{animation:t-shake .38s ease}
.t-input>svg{width:18px;height:18px;flex-shrink:0;stroke:var(--t-muted);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.tether-login .t-input input{flex:1;min-width:0;height:48px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
  color:var(--t-text)!important;font:500 15px var(--t-sans)!important;outline:none!important}
body.tether-login .t-input input::placeholder{color:var(--t-dim)}
.t-eye{width:36px;height:36px;flex-shrink:0;margin:0!important;padding:0!important;border:0!important;border-radius:8px!important;background:transparent!important;color:var(--t-muted)!important;
  display:flex;align-items:center;justify-content:center;cursor:pointer}
.t-eye svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.t-check{width:22px;height:22px;flex-shrink:0;border-radius:50%;background:var(--t-accent);display:flex;align-items:center;justify-content:center;transform:scale(0);opacity:0;transition:transform .25s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.t-check svg{width:12px;height:12px;stroke:var(--t-ink);fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.t-field.is-ok .t-check{transform:scale(1);opacity:1}

/* ---------- The dock (shared: login + opt-in forms) ---------- */
.t-dock{position:relative;height:84px;border-radius:999px;background:var(--t-dock);border:1px solid #2a1f17;overflow:hidden;touch-action:manipulation}
.t-dock.t-wide{height:92px}
.t-socket{position:absolute;left:50%;top:50%;border-radius:999px;border:1.5px dashed var(--t-socket);opacity:0;transition:opacity .2s,border-color .2s;pointer-events:none}
.t-dock.is-ready .t-socket{border-color:var(--t-accent)}
.t-band{position:absolute;left:50%;top:50%;width:1px;height:1px;overflow:visible;pointer-events:none}
.t-band path{fill:none;stroke:var(--t-accent);stroke-width:2.5;stroke-linecap:round}
.t-band circle{fill:var(--t-accent)}
button.t-cta,.t-cta{position:absolute!important;left:50%!important;top:50%!important;margin:0!important;padding:0 18px!important;border-radius:999px!important;
  border:1px solid var(--t-socket)!important;background:#2a1d13!important;color:#eadfd5!important;font:700 15px var(--t-sans)!important;letter-spacing:0!important;
  display:flex!important;align-items:center;justify-content:center;gap:8px;cursor:pointer;white-space:nowrap;will-change:transform;
  box-shadow:0 8px 20px rgba(0,0,0,.35)!important;transition:background .25s,color .25s,box-shadow .25s,border-color .25s!important;text-transform:none!important}
.t-dock.is-ready .t-cta{background:var(--t-accent)!important;color:var(--t-ink)!important;border-color:var(--t-accent)!important;box-shadow:0 10px 30px rgba(246,130,31,.3)!important}
.t-cta:focus-visible{outline:2px solid var(--t-accent)!important;outline-offset:3px}
.t-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(31,13,0,.25);border-top-color:var(--t-ink);animation:t-spin .7s linear infinite;display:none}
.t-cta.is-loading .t-spin{display:block}
.t-cta.is-loading .t-label{display:none}
.t-cta.is-loading .t-pct{display:inline}
.t-pct{display:none}

.t-status{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px;color:var(--t-soft);text-align:center}
.t-status-line{display:inline-flex;align-items:center;gap:8px}
.t-dot{width:7px;height:7px;border-radius:50%;background:var(--t-dim);flex-shrink:0}
.t-status.is-warn .t-dot{animation:t-pulse 1.3s ease infinite}
.t-status.is-ready .t-dot{background:var(--t-accent)}
.t-status.is-busy .t-dot{background:var(--t-accent);animation:t-pulse 1s ease infinite}
.t-status.is-err{color:#ffb4ad}.t-status.is-err .t-dot{background:var(--t-err)}
.t-keys{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--t-muted)}
.t-keys kbd{font:500 11px var(--t-mono);padding:2px 6px;border-radius:5px;background:#1f1712;border:1px solid var(--t-line2);color:var(--t-text)}
.auth.t-shake{animation:t-shake .38s ease}

/* ---------- Warp ("masuk dimensi") ---------- */
#t-warp{position:fixed;inset:0;z-index:2147483000;overflow:hidden;background:var(--t-bg);pointer-events:none;animation:t-fadein .35s ease both}
#t-warp .t-streak{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--r))}
#t-warp .t-streak i{position:absolute;left:-1px;top:0;width:var(--w);height:var(--len);border-radius:99px;background:linear-gradient(to bottom,transparent,var(--c));
  transform-origin:50% 0;opacity:0;animation:t-streak var(--dur) var(--d) cubic-bezier(.55,0,1,.45) infinite}
#t-warp .t-ring{position:absolute;left:50%;top:50%;width:140px;height:140px;margin:-70px 0 0 -70px;border-radius:50%;border:2px solid var(--t-accent);opacity:0;animation:t-portal 1.5s cubic-bezier(.2,.6,.2,1) infinite}
#t-warp .t-ring:nth-of-type(2){border-color:var(--t-amber);border-width:1.5px;animation-delay:.5s}
#t-warp .t-ring:nth-of-type(3){border-color:var(--t-cream);border-width:1px;animation-delay:1s}
#t-warp .t-core{position:absolute;left:50%;top:50%;width:160px;height:160px;margin:-80px 0 0 -80px;border-radius:50%;
  background:radial-gradient(circle,#fff6ec 0%,var(--t-cream) 22%,var(--t-amber) 42%,var(--t-accent) 62%,rgba(246,130,31,0) 72%);
  animation:t-core var(--warp-ms,2400ms) cubic-bezier(.6,0,.9,.4) forwards}
#t-warp .t-warp-ui{position:absolute;left:0;right:0;bottom:14%;display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--t-mono);text-transform:uppercase}
#t-warp .t-warp-step{font-size:12px;color:var(--t-cream);animation:t-hum 1.2s ease infinite}
#t-warp .t-warp-bar{width:180px;height:2px;border-radius:99px;background:#2a1f17;overflow:hidden}
#t-warp .t-warp-bar i{display:block;height:100%;width:0;background:var(--t-accent);transition:width .3s}
.t-dive{animation:t-dive .9s cubic-bezier(.6,0,.9,.4) forwards!important}

/* ---------- Panel bug fix: [hidden] must hide ----------
   The panel's search/date filter hides cards with el.hidden = true, but `.item{display:flex}`
   (and Edge V4 card rules) override the browser's default [hidden]{display:none}, so nothing
   disappeared. This restores it for every element that uses the hidden attribute. */
[hidden]{display:none!important}

/* ---------- App logo marks → globe (markup-agnostic: works on any v4.x / v42 header) ---------- */
body:not(.tether-login) :is(.brand .mark,.brand-mark,.brandbox .logo,.topbar .logo,.v4-handoff-mark){
  position:relative!important;font-size:0!important;color:transparent!important;
  background:linear-gradient(145deg,#ffa04b,#f6821f 55%,#e86f0c)!important}
body:not(.tether-login) :is(.brand .mark,.brand-mark,.brandbox .logo,.topbar .logo,.v4-handoff-mark)>*{display:none!important}
body:not(.tether-login) :is(.brand .mark,.brand-mark,.brandbox .logo,.topbar .logo,.v4-handoff-mark)::after{
  content:"";position:absolute;inset:0;margin:auto;width:66%;height:66%;pointer-events:none;
  background:url("/assets-v5/icons/mark-ink.svg?v=507") center/contain no-repeat}

/* NETWORK HEALTHY chip once tether.js docks it inside the header actions */
.v4-health.t-health-docked{position:relative!important;margin:0 4px 0 0!important;inset:auto!important;transform:none!important;flex-shrink:0}
.t-health-row{display:flex!important;align-items:center!important}
.t-health-row>.t-health-docked:first-child{margin-left:auto!important}

/* ---------- Arrive on dashboard ---------- */
#t-arrive{position:fixed;inset:0;z-index:2147483000;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,#fff6ec 0%,var(--t-cream) 25%,var(--t-accent) 60%,var(--t-bg) 100%);animation:t-arrive .8s cubic-bezier(.3,.6,.3,1) forwards}
body.t-landing>*:not(#t-arrive){animation:t-land .9s cubic-bezier(.2,.7,.2,1) both}

/* ---------- Keyframes ---------- */
@keyframes t-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes t-spin{to{transform:rotate(360deg)}}
@keyframes t-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes t-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@keyframes t-fadein{from{opacity:0}to{opacity:1}}
@keyframes t-streak{0%{transform:translateY(24px) scaleY(.15);opacity:0}15%{opacity:1}100%{transform:translateY(78vmax) scaleY(1.9);opacity:0}}
@keyframes t-portal{0%{transform:scale(.08);opacity:0}20%{opacity:1}100%{transform:scale(10);opacity:0}}
@keyframes t-core{0%{transform:scale(.04);opacity:0}25%{transform:scale(.55);opacity:1}72%{transform:scale(.9)}86%{transform:scale(1.35)}100%{transform:scale(32);opacity:1}}
@keyframes t-dive{to{transform:perspective(900px) translateZ(-760px) rotateX(26deg);opacity:0;filter:blur(5px)}}
@keyframes t-hum{0%,100%{letter-spacing:.32em;opacity:.75}50%{letter-spacing:.42em;opacity:1}}
@keyframes t-arrive{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
@keyframes t-land{from{opacity:0;transform:perspective(900px) translateZ(220px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

@media (prefers-reduced-motion:reduce){
  .t-hero,body.tether-login .auth,.t-field.shake .t-input,.auth.t-shake,body.t-landing>*{animation:none!important}
  .t-check,.t-input,button.t-cta{transition:none!important}
}