/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
input{font:inherit;color:inherit;background:none;border:none;outline:none;-webkit-appearance:none;appearance:none}
svg{display:block;stroke-linecap:round;stroke-linejoin:round;fill:none}

/* ============================================================
   TOKENS
   ============================================================ */
:root{
--bg:#0a0a0b;
--fg:#f5f5f7;
--fg2:#a1a1a6;
--fg3:#6e6e73;
--fg4:#48484a;
--line:rgba(255,255,255,.045);
--line2:rgba(255,255,255,.09);
--accent:#7c89ff;
--accentGlow:rgba(124,137,255,.35);
--ok:#4ade80;
--err:#f87171;
--warn:#fbbf24;
--font:"Inter",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
--ease-spring:cubic-bezier(0.32,0.72,0,1);
--ease-out:cubic-bezier(0.16,1,0.3,1);
--ease-bounce:cubic-bezier(0.34,1.56,0.64,1)}

body{
position:relative;
font-family:var(--font);
font-size:13.5px;
line-height:1.45;
background:var(--bg);
color:var(--fg);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
font-feature-settings:"cv11","ss01","tnum";
letter-spacing:-.011em;
overflow-x:hidden}

/* Ambient glow — sangat halus, hidup */
body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(ellipse 800px 600px at 15% 0%,rgba(124,137,255,.10),transparent 55%),
radial-gradient(ellipse 600px 500px at 100% 100%,rgba(124,137,255,.06),transparent 60%);
pointer-events:none;
z-index:0;
animation:ambient 14s ease-in-out infinite}
@keyframes ambient{
0%,100%{opacity:.7}
50%{opacity:1}}

.screen{
display:none;
min-height:100dvh;
flex-direction:column;
position:relative;
z-index:1}
.screen.on{display:flex;animation:screenIn 400ms var(--ease-out) both}
@keyframes screenIn{
from{opacity:0;transform:translateY(4px)}
to{opacity:1;transform:none}}

/* ============================================================
   LOGIN
   ============================================================ */
#login{
justify-content:center;
align-items:center;
padding:24px}
.login{
width:100%;
max-width:320px;
animation:loginIn 600ms var(--ease-out) both 100ms}
@keyframes loginIn{
from{opacity:0;transform:translateY(12px) scale(.98)}
to{opacity:1;transform:none}}

/* Logo — TANPA box, hanya icon dengan glow */
.login-logo{
width:56px;
height:56px;
margin:0 auto 28px;
display:grid;
place-items:center;
animation:logoFloat 4s ease-in-out infinite}
@keyframes logoFloat{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-3px)}}
.login-logo svg{
width:32px;
height:32px;
color:var(--accent);
stroke-width:1.5;
filter:drop-shadow(0 0 16px var(--accentGlow))}

.login-title{
font-size:26px;
font-weight:600;
letter-spacing:-.035em;
text-align:center;
line-height:1.15;
margin-bottom:8px;
background:linear-gradient(180deg,#fff 30%,#a1a1a6);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent}

.login-sub{
font-size:13px;
color:var(--fg3);
text-align:center;
margin-bottom:36px;
line-height:1.5}

/* Input — underline dengan slide animation */
.login-field{
position:relative;
margin-bottom:24px}
.login-field input{
width:100%;
padding:12px 40px 12px 0;
font-size:17px;
font-family:var(--mono);
letter-spacing:.06em;
color:var(--fg);
border-bottom:1px solid var(--line2);
transition:border-color 300ms ease}
.login-field input::placeholder{
color:var(--fg4);
font-family:var(--font);
letter-spacing:-.01em;
font-size:14px}
.login-field::after{
content:"";
position:absolute;
bottom:0;
left:0;
right:0;
height:1px;
background:var(--accent);
box-shadow:0 0 12px var(--accentGlow);
transform:scaleX(0);
transform-origin:center;
transition:transform 500ms var(--ease-spring)}
.login-field:focus-within::after{transform:scaleX(1)}

.login-eye{
position:absolute;
right:0;
top:50%;
transform:translateY(-50%);
width:36px;
height:36px;
display:grid;
place-items:center;
color:var(--fg4);
border-radius:8px;
transition:color 200ms ease,background 200ms ease}
.login-eye:hover{color:var(--fg2)}
.login-eye:active{
background:rgba(255,255,255,.04);
transform:translateY(-50%) scale(.9)}
.login-eye svg{width:16px;height:16px;transition:transform 300ms var(--ease-bounce)}
.login-eye:active svg{transform:scale(.85)}

/* Button — spring press */
.login-btn{
width:100%;
height:46px;
background:var(--accent);
color:#0a0a0b;
border-radius:10px;
font-size:14px;
font-weight:600;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
box-shadow:
0 1px 2px rgba(0,0,0,.3),
0 8px 24px -8px var(--accentGlow);
transition:
transform 250ms var(--ease-bounce),
box-shadow 300ms ease,
background 200ms ease}
.login-btn:hover{
background:#8f9bff;
box-shadow:
0 1px 2px rgba(0,0,0,.3),
0 12px 32px -8px var(--accentGlow)}
.login-btn:active{
transform:scale(.97);
box-shadow:
0 1px 2px rgba(0,0,0,.3),
0 4px 12px -8px var(--accentGlow)}
.login-btn:disabled{
opacity:.35;
cursor:not-allowed;
transform:none;
box-shadow:none}
.login-btn svg{
width:15px;
height:15px;
stroke-width:2.5;
transition:transform 300ms var(--ease-spring)}
.login-btn:hover svg{transform:translateX(2px)}

.login-msg{
min-height:20px;
font-size:12px;
text-align:center;
margin-top:18px;
color:var(--fg3);
font-family:var(--mono);
transition:color 300ms ease}
.login-msg.err{color:var(--err);animation:shake 400ms ease}
.login-msg.warn{color:var(--warn)}
@keyframes shake{
0%,100%{transform:translateX(0)}
20%,60%{transform:translateX(-4px)}
40%,80%{transform:translateX(4px)}}

.login-foot{
position:absolute;
bottom:24px;
left:0;
right:0;
text-align:center;
font-size:10px;
font-family:var(--mono);
color:var(--fg4);
letter-spacing:.2em;
text-transform:uppercase;
pointer-events:none;
opacity:.6}

/* ============================================================
   LOADING
   ============================================================ */
#loading{
justify-content:center;
align-items:center;
text-align:center;
padding:24px}
.loading-spin{
width:28px;
height:28px;
border:1.5px solid rgba(255,255,255,.06);
border-top-color:var(--accent);
border-radius:50%;
animation:spin 700ms cubic-bezier(0.5,0,0.5,1) infinite;
margin-bottom:24px;
box-shadow:0 0 24px -8px var(--accentGlow)}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-title{
font-size:14px;
font-weight:600;
letter-spacing:-.02em;
margin-bottom:8px;
animation:loadingText 400ms var(--ease-out) both}
.loading-stage{
font-size:11px;
font-family:var(--mono);
color:var(--fg3);
letter-spacing:.1em;
text-transform:uppercase;
animation:loadingText 400ms var(--ease-out) both 100ms}
@keyframes loadingText{
from{opacity:0;transform:translateY(4px)}
to{opacity:1;transform:none}}

/* ============================================================
   DASHBOARD
   ============================================================ */
.header{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 20px;
position:sticky;
top:0;
z-index:20;
background:rgba(10,10,11,.72);
backdrop-filter:blur(24px) saturate(180%);
-webkit-backdrop-filter:blur(24px) saturate(180%)}
.header h1{
font-size:14px;
font-weight:600;
letter-spacing:-.02em;
color:var(--fg)}
.header-count{
font-size:11px;
font-family:var(--mono);
color:var(--fg3);
letter-spacing:.02em;
transition:color 300ms ease}

/* Search — tanpa box */
.search{
padding:8px 20px 16px}
.search-box{
position:relative}
.search-box > svg{
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:16px;
height:16px;
color:var(--fg4);
pointer-events:none;
stroke-width:2;
transition:color 300ms ease}
.search-box:focus-within > svg{color:var(--accent)}
.search-box input{
width:100%;
padding:10px 0 10px 28px;
font-size:15px;
color:var(--fg);
letter-spacing:-.01em}
.search-box input::placeholder{
color:var(--fg4);
transition:color 300ms ease}
.search-box input:focus::placeholder{color:var(--fg3)}

/* Divider halus */
.search::after{
content:"";
display:block;
height:1px;
background:var(--line);
margin:0 -20px -16px}

/* Filter — teks saja, underline slide dari tengah */
.filters{
padding:0 20px 14px;
position:relative}
.filter-row{
display:flex;
align-items:center;
gap:4px;
overflow-x:auto;
scrollbar-width:none;
padding:4px 0}
.filter-row::-webkit-scrollbar{display:none}
.filter-label{
font-size:10px;
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:.12em;
color:var(--fg4);
width:44px;
flex-shrink:0;
padding-top:6px;
pointer-events:none}
.filter-btn{
padding:6px 10px;
font-size:12px;
color:var(--fg3);
white-space:nowrap;
position:relative;
border-radius:6px;
transition:color 250ms var(--ease-out)}
.filter-btn:hover{color:var(--fg2)}
.filter-btn::after{
content:"";
position:absolute;
bottom:2px;
left:50%;
right:50%;
height:1.5px;
background:var(--fg);
border-radius:2px;
transition:
left 400ms var(--ease-spring),
right 400ms var(--ease-spring)}
.filter-btn.on{
color:var(--fg);
font-weight:500}
.filter-btn.on::after{
left:10px;
right:10px}

/* Divider bawah filter */
.filters::after{
content:"";
position:absolute;
bottom:0;
left:20px;
right:20px;
height:1px;
background:var(--line)}

/* Stats */
.stats{
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 20px;
font-size:11px;
font-family:var(--mono);
color:var(--fg3);
transition:color 300ms ease}
.stats b{color:var(--fg2);font-weight:500}
.stats .shard{color:var(--accent);opacity:.8}

/* List — borderless, stagger animation */
.list{
flex:1;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
padding-bottom:24px}

.row{
display:flex;
align-items:center;
gap:14px;
padding:14px 20px;
cursor:pointer;
position:relative;
transition:background 200ms ease;
animation:rowIn 500ms var(--ease-out) both}
@keyframes rowIn{
from{opacity:0;transform:translateY(8px)}
to{opacity:1;transform:none}}
.row:nth-child(1){animation-delay:0ms}
.row:nth-child(2){animation-delay:25ms}
.row:nth-child(3){animation-delay:50ms}
.row:nth-child(4){animation-delay:75ms}
.row:nth-child(5){animation-delay:100ms}
.row:nth-child(6){animation-delay:125ms}
.row:nth-child(7){animation-delay:150ms}
.row:nth-child(8){animation-delay:175ms}
.row:nth-child(9){animation-delay:200ms}
.row:nth-child(10){animation-delay:225ms}
.row:nth-child(n+11){animation-delay:250ms}

.row:active{
background:rgba(255,255,255,.025)}
.row::after{
content:"";
position:absolute;
bottom:0;
left:20px;
right:20px;
height:1px;
background:var(--line);
pointer-events:none}
.row:last-child::after{display:none}

/* Avatar — TANPA box, hanya teks accent */
.avatar{
width:38px;
text-align:center;
font-size:11.5px;
font-family:var(--mono);
font-weight:600;
color:var(--accent);
letter-spacing:.03em;
flex-shrink:0;
pointer-events:none;
opacity:.85}

.row-info{
flex:1;
min-width:0;
pointer-events:none}
.row-name{
font-size:13.5px;
font-weight:600;
color:var(--fg);
letter-spacing:-.012em;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
line-height:1.3}
.row-meta{
font-size:11px;
color:var(--fg3);
font-family:var(--mono);
margin-top:3px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
letter-spacing:-.01em}
.row-meta b{
color:var(--accent);
font-weight:500;
opacity:.85}

.row-amount{
text-align:right;
flex-shrink:0;
pointer-events:none}
.row-amount b{
display:block;
font-size:13px;
font-family:var(--mono);
font-weight:500;
color:var(--fg);
letter-spacing:-.01em}
.row-amount small{
display:block;
font-size:9.5px;
font-family:var(--mono);
color:var(--fg3);
text-transform:uppercase;
letter-spacing:.06em;
margin-top:2px}

/* Chevron — rotasi spring */
.chevron{
width:14px;
height:14px;
color:var(--fg4);
flex-shrink:0;
pointer-events:none;
stroke-width:2;
transition:transform 400ms var(--ease-spring),color 300ms ease}
.row.open .chevron{
transform:rotate(90deg);
color:var(--fg3)}

/* Detail expand — smooth via grid trick */
.detail{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows 400ms var(--ease-spring)}
.detail > *{
overflow:hidden;
min-height:0;
padding-top:14px;
padding-bottom:2px;
border-top:1px solid transparent;
transition:padding 400ms var(--ease-spring),border-color 400ms ease}
.row.open .detail{grid-template-rows:1fr}
.row.open .detail > *{
padding-top:14px;
border-top-color:var(--line)}

.field{
padding:10px 0;
position:relative}
.field + .field::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:1px;
background:var(--line)}
.field-key{
font-size:9.5px;
font-family:var(--mono);
text-transform:uppercase;
letter-spacing:.12em;
color:var(--fg4);
display:block;
margin-bottom:4px;
font-weight:500}
.field-val{
font-size:12.5px;
color:var(--fg);
word-break:break-word;
line-height:1.55}
.field-val.mono{
font-family:var(--mono);
letter-spacing:-.01em;
color:var(--fg2)}

/* Transaksi dalam grup */
.tx{
padding:12px 0;
position:relative;
cursor:pointer;
transition:opacity 200ms ease}
.tx + .tx::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:1px;
background:var(--line)}
.tx:active{opacity:.7}
.tx-head{
display:flex;
justify-content:space-between;
align-items:center;
gap:12px}
.tx-amount{
font-size:13px;
font-family:var(--mono);
font-weight:500;
color:var(--fg);
letter-spacing:-.01em}
.tx-date{
font-size:10.5px;
font-family:var(--mono);
color:var(--fg3);
margin-top:3px;
letter-spacing:.02em}
.tx-status{
font-size:9.5px;
font-family:var(--mono);
text-transform:uppercase;
color:var(--fg3);
letter-spacing:.06em;
padding:3px 8px;
border:1px solid var(--line2);
border-radius:999px;
flex-shrink:0}
.tx-status.ok{
color:var(--ok);
border-color:rgba(74,222,128,.2)}
.tx-status.err{
color:var(--err);
border-color:rgba(248,113,113,.2)}

.tx-detail{
display:grid;
grid-template-rows:0fr;
transition:grid-template-rows 400ms var(--ease-spring)}
.tx-detail > *{
overflow:hidden;
min-height:0;
padding-top:10px}
.tx.open .tx-detail{grid-template-rows:1fr}

/* Empty */
.empty{
padding:96px 24px;
text-align:center;
animation:emptyIn 500ms var(--ease-out) both}
@keyframes emptyIn{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:none}}
.empty svg{
width:26px;
height:26px;
color:var(--fg4);
margin:0 auto 16px;
opacity:.5;
stroke-width:1.5}
.empty h3{
font-size:14px;
font-weight:600;
letter-spacing:-.02em;
margin-bottom:6px;
color:var(--fg)}
.empty p{
font-size:12.5px;
color:var(--fg3);
line-height:1.6;
max-width:240px;
margin:0 auto}

/* Skeleton */
.skeleton{
padding:14px 20px;
display:flex;
align-items:center;
gap:14px}
.sk-avatar{
width:38px;
height:12px;
border-radius:3px;
background:linear-gradient(90deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 100%);
background-size:200% 100%;
animation:shimmer 1.6s ease-in-out infinite}
.sk-info{
flex:1;
display:flex;
flex-direction:column;
gap:8px}
.sk-line{
height:10px;
border-radius:3px;
background:linear-gradient(90deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 100%);
background-size:200% 100%;
animation:shimmer 1.6s ease-in-out infinite}
.sk-line:last-child{width:55%;height:8px}
@keyframes shimmer{
0%{background-position:200% 0}
100%{background-position:-200% 0}}

/* ============================================================
   404
   ============================================================ */
#notFound{
justify-content:center;
align-items:center;
text-align:center;
padding:32px}
.nf-icon{
width:56px;
height:56px;
margin:0 auto 24px;
display:grid;
place-items:center}
.nf-icon svg{
width:32px;
height:32px;
color:var(--fg3);
stroke-width:1.5;
filter:drop-shadow(0 0 16px rgba(255,255,255,.08))}
#notFound h3{
font-size:20px;
font-weight:700;
letter-spacing:-.03em;
margin-bottom:10px;
line-height:1.25;
animation:screenIn 500ms var(--ease-out) both}
#notFound p{
font-size:12.5px;
color:var(--fg3);
line-height:1.7;
max-width:280px;
animation:screenIn 500ms var(--ease-out) both 100ms}
#notFound small{
display:block;
margin-top:24px;
font-size:9px;
font-family:var(--mono);
color:var(--fg4);
letter-spacing:.24em;
text-transform:uppercase;
opacity:.6;
animation:screenIn 500ms var(--ease-out) both 200ms}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{
animation-duration:.01ms!important;
animation-iteration-count:1!important;
transition-duration:.01ms!important}}