*{

box-sizing:border-box;

font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;

}



body{

margin:0;

min-height:100vh;

background:
linear-gradient(
180deg,
#eef7ff,
#ffffff
);

}



/* =====================
APP
===================== */


.app{

max-width:430px;

margin:auto;

padding:
35px 20px 110px;

}



h1{

font-size:34px;

font-weight:800;

}



h2{

font-size:24px;

font-weight:800;

}



p{

color:#666;

}





/* =====================
CARD
===================== */


.card{

background:
rgba(255,255,255,.8);


backdrop-filter:
blur(25px);


border-radius:32px;


padding:28px;


margin-bottom:18px;


box-shadow:
0 15px 45px
rgba(0,0,0,.08);


}



.trip-card{

position:relative;

}





/* =====================
MENU ...
===================== */


.menuBtn{

position:absolute;

right:20px;

top:20px;


width:38px;

height:38px;


border:0;

border-radius:50%;


background:
rgba(0,0,0,.06);


font-size:22px;

}





/* =====================
FAB +
===================== */


.fab{

position:fixed;

right:28px;

bottom:35px;


width:65px;

height:65px;


border-radius:50%;

border:0;


background:#111;

color:white;


font-size:34px;

font-weight:300;


/* จัดกลางจริง */
display:flex;

align-items:center;

justify-content:center;


line-height:1;

padding:0;


box-shadow:
0 15px 35px
rgba(0,0,0,.25);

}





/* =====================
BUTTON
===================== */


.addBtn,
.sheetBtn{


width:100%;


height:55px;


border:0;


border-radius:18px;


margin:8px 0;


font-size:17px;


font-weight:700;


display:flex;


align-items:center;


justify-content:center;


}



.addBtn{


background:#111 !important;


color:white !important;


}



.sheetBtn{


background:#f2f2f7;


color:#111;


}



.danger{


color:#ff3b30;


}





/* =====================
MODAL
===================== */


.modal{


display:none;


position:fixed;


inset:0;


z-index:99;


background:

rgba(0,0,0,.35);


backdrop-filter:

blur(12px);


}



.sheet{


position:absolute;


bottom:0;


left:50%;


transform:

translateX(-50%);



width:100%;


max-width:430px;



background:white;


border-radius:

32px 32px 0 0;



padding:28px;


box-shadow:

0 -20px 50px

rgba(0,0,0,.15);


}





input,
select{


width:100%;


height:50px;


border:0;


border-radius:16px;


background:#f2f2f7;


padding:12px;


margin:

8px 0 18px;



font-size:16px;


}





/* =====================
EXPENSE
===================== */


.total-card{


background:#111;


color:white;


}



.total-card p{


color:#aaa;


}



.expense-card{


display:flex;


align-items:center;


justify-content:space-between;


gap:15px;


}



.expense-card div{


flex:1;


}



.expense-card > h2{


white-space:nowrap;


}





/* =====================
BOTTOM TAB
===================== */


.tabs{


position:fixed;


bottom:0;

left:0;

right:0;


max-width:430px;


margin:auto;


display:flex;


background:white;


padding:10px;


border-radius:

28px 28px 0 0;



box-shadow:

0 -10px 35px

rgba(0,0,0,.08);


}



.tabs button{


flex:1;


border:0;


background:none;


}





/* =====================
EXPORT IMAGE
===================== */


.export-card{


background:white;


width:390px;


padding:35px;


border-radius:35px;


font-family:

-apple-system,

BlinkMacSystemFont,

"Segoe UI";


}



.export-total{


background:#111;


color:white;


border-radius:28px;


padding:25px;


margin:20px 0;


}



.export-row{


display:flex;


justify-content:space-between;


align-items:center;


padding:18px 0;


border-bottom:

1px solid #eee;


gap:20px;


}



.export-footer{


margin-top:30px;


text-align:center;


font-size:13px;


color:#999;


}
.backBtn{

border:0;

background:
rgba(255,255,255,.8);

backdrop-filter:
blur(20px);

padding:
12px 18px;

border-radius:20px;

font-size:15px;

font-weight:700;

margin-bottom:15px;

box-shadow:
0 10px 30px rgba(0,0,0,.08);

}
.member-card{

display:flex;

align-items:center;

justify-content:space-between;

}


.member-info h2{

margin:0;

text-transform:capitalize;

}



.member-actions{

display:flex;

gap:10px;

}



.member-actions button{

width:42px;

height:42px;


border:0;

border-radius:50%;


background:#f2f2f7;


font-size:18px;

}
/* SPLIT EXPENSE */


.split-all{

display:flex;
align-items:center;
gap:12px;

padding:18px;

background:#111;
color:white;

border-radius:20px;

font-weight:800;

margin-bottom:15px;

}



.split-members{

display:flex;
flex-direction:column;
gap:12px;

}



.split-item{

display:flex;

align-items:center;

justify-content:space-between;


background:#f5f5f7;

padding:16px 18px;

border-radius:18px;

font-weight:600;

}



.split-item input,
.split-all input{

width:22px;

height:22px;

accent-color:#111;

}



.split-item input:disabled{

opacity:.3;

}
#expenseChart{


max-height:260px;


margin-top:20px;


}
/* SUMMARY CHART */

#expenseChart{

max-height:260px;

padding:15px;

}


.card canvas{

margin:auto;

}
/* EMPTY STATE */

.empty{

text-align:center;

padding:40px 20px;


background:
rgba(255,255,255,.65);


border-radius:28px;


margin-top:20px;


}


.empty h1{

font-size:55px;

margin:0;

}



.empty h2{

margin-bottom:5px;

}



.empty p{

color:#777;

}
/* LOADING */

.loading{

height:50vh;

display:flex;
flex-direction:column;

align-items:center;
justify-content:center;

text-align:center;

}


.loading h1{

font-size:70px;

animation:
float 2s infinite ease-in-out;

}


.loading h2{

margin:5px;

}


.loading p{

color:#777;

}


@keyframes float{


0%{

transform:
translateY(0);

}


50%{

transform:
translateY(-12px);

}


100%{

transform:
translateY(0);

}


}
/* =====================
   RESPONSIVE FINAL
===================== */


/* Desktop / Tablet */

@media (min-width:768px){


body{

display:flex;

justify-content:center;

}



.app{

width:430px;

min-height:100vh;

}



.tabs{

width:430px;

left:auto;

right:auto;

bottom:20px;

}



.modal{

display:none;

position:fixed;

inset:0;

width:100%;

}


.modal .sheet{

top:50%;

bottom:auto;

left:50%;


transform:
translate(-50%,-50%);


max-width:430px;


border-radius:35px;

}




}



/* Mobile */

@media (max-width:767px){


.app{

width:100%;

}



.tabs{

width:100%;

}


}
/* =====================
   FINAL UI POLISH
===================== */


/* CARD */

.card{

transition:
0.2s ease;

}


.card:active{

transform:
scale(.98);

}



/* BUTTON */

button{

cursor:pointer;

-webkit-tap-highlight-color:
transparent;

}



.addBtn{

transition:
0.2s;

}


.addBtn:active{

transform:
scale(.96);

}




/* INPUT */

input,
select{


font-size:16px;

outline:none;

}


input:focus,
select:focus{

background:white;

}




/* TAB */

.tabs button{

transition:
0.2s;

}


.tabs button:active{

transform:
translateY(-3px);

}




/* SCROLL */

body{

overflow-x:hidden;

}


.app{

padding-bottom:120px;

}



/* DESKTOP SHADOW */

@media(min-width:768px){


.app{

background:
rgba(255,255,255,.15);

border-radius:35px;

}


}
.shareBtn{

border:0;

padding:12px 18px;

border-radius:20px;

background:#111;

color:white;

font-weight:700;

margin-top:10px;

}
/* ADMIN PIN LOCK */

.pin-modal{

position:fixed;

inset:0;

z-index:9999;

display:none;

align-items:center;

justify-content:center;

background:
linear-gradient(
180deg,
#eef7ff,
#ffffff
);

}


.pin-box{

width:100%;

max-width:360px;

padding:30px;

text-align:center;

}


.pin-box h1{

font-size:60px;

margin:0 0 10px;

}


.pin-dots{

display:flex;

justify-content:center;

gap:14px;

margin:25px 0;

}


.pin-dots span{

width:16px;

height:16px;

border-radius:50%;

background:#d1d1d6;

}


.pin-dots span.active{

background:#111;

}


.pin-keypad{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:14px;

}


.pin-keypad button{

height:70px;

border:0;

border-radius:50%;

background:
rgba(255,255,255,.85);

box-shadow:
0 10px 30px rgba(0,0,0,.08);

font-size:24px;

font-weight:800;

}


.pin-keypad button:active{

transform:
scale(.94);

}


.guestLink{

display:block;

margin-top:25px;

font-weight:700;

color:#555;

text-decoration:none;

}


.shake{

animation:
shake .35s;

}


@keyframes shake{

0%{ transform:translateX(0); }

25%{ transform:translateX(-8px); }

50%{ transform:translateX(8px); }

75%{ transform:translateX(-5px); }

100%{ transform:translateX(0); }

}
/* LOADING LOCK */

.locked{

pointer-events:none;

opacity:.35;

filter:blur(1px);

}

/* =====================
   LIQUID GLASS FINAL UI
===================== */


/* BOTTOM TAB */

.tabs{

height:78px;

bottom:14px;

width:92%;

max-width:430px;


padding:
8px 14px;


background:
rgba(255,255,255,.65);


backdrop-filter:
blur(25px);

-webkit-backdrop-filter:
blur(25px);


border:
1px solid rgba(255,255,255,.8);


border-radius:
32px;


box-shadow:
0 20px 50px
rgba(0,0,0,.12);

}


.tabs button{

font-size:15px;

font-weight:700;

color:#222;

}


.tabs button span,
.tabs button{

line-height:1.4;

}


.tabs button:active{

transform:
scale(.9);

}



/* =====================
   SUMMARY TOTAL CARD
===================== */


.summary-total,
.total-card{

background:
linear-gradient(
135deg,
rgba(255,255,255,.65),
rgba(210,235,255,.45)
);


backdrop-filter:
blur(30px);

-webkit-backdrop-filter:
blur(30px);


border:
1px solid rgba(255,255,255,.9);


box-shadow:
0 25px 60px
rgba(80,120,180,.18);


border-radius:
35px;


color:#111;

}


.summary-total h1,
.total-card h1{

font-size:42px !important;

letter-spacing:1px;


background:
linear-gradient(
135deg,
#111,
#4b8cff
);


background-clip:text;

-webkit-background-clip:text;


color:
transparent;

-webkit-text-fill-color:
transparent;


}


.summary-total p,
.total-card p{

color:#777;

font-weight:700;

}



/* CHART CARD */

canvas{

max-height:280px;

}


.card canvas{

margin-top:20px;

}
/* ACTIVE TAB - LIQUID PILL */

.tabs button{

height:54px;

border-radius:24px;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:3px;

}


.tabs button.active{

background:
rgba(255,255,255,.85);


backdrop-filter:
blur(20px);

-webkit-backdrop-filter:
blur(20px);


box-shadow:
0 10px 25px
rgba(0,0,0,.12);


transform:
translateY(-8px);

}


.tabs button.active{

font-weight:900;

}
/* ADMIN BUTTON IN MEMBER */

.adminMemberBtn{

width:100%;

height:55px;

margin-top:25px;


border:0;

border-radius:25px;


background:
rgba(255,255,255,.55);


backdrop-filter:
blur(20px);

-webkit-backdrop-filter:
blur(20px);


box-shadow:
0 15px 40px
rgba(0,0,0,.08);


font-size:16px;

font-weight:700;

color:#555;

}


.adminMemberBtn:active{

transform:
scale(.96);

}


/* =====================
   PIN LOCK LIQUID GLASS
===================== */


.pin-modal{

background:
linear-gradient(
180deg,
#eef7ff,
#ffffff
);

}


.pin-box{

width:90%;

max-width:360px;

padding:32px 24px;


background:
rgba(255,255,255,.35);


backdrop-filter:
blur(30px);

-webkit-backdrop-filter:
blur(30px);


border:
1px solid rgba(255,255,255,.8);


border-radius:38px;


box-shadow:
0 30px 80px
rgba(80,120,180,.18);

}



.pin-box h1{

font-size:46px;

margin-bottom:12px;

}



.pin-box h2{

font-size:26px;

font-weight:800;

margin:5px 0;

}



.pin-box p{

font-size:14px;

color:#777;

}



/* DOT */

.pin-dots{

gap:12px;

margin:24px 0 30px;

}


.pin-dots span{

width:12px;

height:12px;


background:
rgba(0,0,0,.12);

}


.pin-dots span.active{

background:
linear-gradient(
135deg,
#111,
#6aa8ff
);

}



/* KEYPAD */

.pin-keypad{

gap:14px;

}



.pin-keypad button{

height:72px;


border-radius:28px;


background:
rgba(255,255,255,.55);


backdrop-filter:
blur(20px);

-webkit-backdrop-filter:
blur(20px);


border:
1px solid rgba(255,255,255,.9);


box-shadow:
0 12px 35px
rgba(0,0,0,.08);


font-size:22px;


font-weight:500;


color:#111;


}



.pin-keypad button:active{

transform:
scale(.92);

background:
rgba(255,255,255,.9);

}



/* GUEST LINK */

.guestLink{

margin-top:26px;


font-size:14px;


font-weight:600;


color:#777;

}
/* SYNC STATUS */

.syncText{

font-size:13px;

font-weight:600;

color:#7a7a7a;

margin:6px 0 14px;

opacity:.85;

}
/* =====================
   SPLIT MEMBER GRID
===================== */


.split-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:10px;

margin-top:14px;

}



.split-box{

height:80px;


border-radius:22px;


background:
rgba(255,255,255,.55);


border:
1px solid rgba(255,255,255,.8);


display:flex;

flex-direction:column;

align-items:center;

justify-content:center;


gap:8px;


font-weight:700;


backdrop-filter:
blur(18px);

-webkit-backdrop-filter:
blur(18px);

}



.split-box input{

width:18px;

height:18px;

}



.split-all{

height:50px;

border-radius:20px;


display:flex;

align-items:center;

justify-content:center;

gap:10px;


background:
rgba(255,255,255,.6);


font-weight:800;

}
.split-box{

height:85px;

border-radius:26px;


background:
rgba(255,255,255,.45);


display:flex;

flex-direction:column;

align-items:center;

justify-content:center;


gap:5px;


border:
1px solid rgba(255,255,255,.7);


box-shadow:
0 10px 30px
rgba(0,0,0,.05);


transition:.25s;


cursor:pointer;

}


.split-box input{

display:none;

}


.split-box.selected{


background:
rgba(0,0,0,.85);


color:white;


transform:
scale(.96);


box-shadow:
0 15px 35px
rgba(0,0,0,.18);

}



.split-emoji{

font-size:24px;

}



.split-name{

font-size:14px;

font-weight:800;

}

/* =====================
   V2 EXPENSE + EXPORT FINAL
===================== */

.sheet{
max-height:85vh;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}

.sheet::-webkit-scrollbar{
display:none;
}

.expenseItems{
display:flex;
flex-direction:column;
gap:10px;
margin-bottom:12px;
}

.expenseItemRow{
display:grid;
grid-template-columns:1fr 105px 42px;
gap:8px;
align-items:center;
}

.expenseItemRow input{
margin:0;
height:48px;
}

.expenseItemRow button{
height:42px;
border:0;
border-radius:16px;
background:rgba(255,255,255,.65);
font-weight:800;
}

.miniAddBtn{
width:100%;
height:46px;
border:0;
border-radius:18px;
background:rgba(255,255,255,.6);
font-weight:800;
margin-bottom:18px;
}

.expense-date-title{
font-size:15px;
font-weight:900;
color:#777;
margin:24px 4px 10px;
}

.summary-actions{
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:18px;
}

.split-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin-top:14px;
}

.split-box{
height:85px;
border-radius:26px;
background:rgba(255,255,255,.45);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:5px;
border:1px solid rgba(255,255,255,.7);
box-shadow:0 10px 30px rgba(0,0,0,.05);
transition:.25s;
cursor:pointer;
}

.split-box input{
display:none;
}

.split-box.selected{
background:rgba(0,0,0,.85);
color:white;
transform:scale(.96);
box-shadow:0 15px 35px rgba(0,0,0,.18);
}

.split-emoji{
font-size:24px;
}

.split-name{
font-size:14px;
font-weight:800;
}

.export-chart-wrap{
display:flex;
justify-content:center;
margin:10px 0 18px;
}

.export-row.compact{
padding:12px 0;
}

.export-date{
font-weight:900;
color:#777;
margin-top:22px;
margin-bottom:4px;
}

.glass-total{
background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(210,235,255,.55));
color:#111;
}

.glass-total h1{
color:#111;
}

@media (min-width:768px){
.modal .sheet{
max-height:82vh;
}
}


/* =====================
   V2 TRIP COVER CARDS
===================== */

.trip-card{
overflow:hidden;
isolation:isolate;
}

.trip-card .emoji,
.trip-card h2,
.trip-card p,
.trip-card .menuBtn{
position:relative;
z-index:2;
}

.trip-cover-glow{
position:absolute;
inset:0;
z-index:1;
pointer-events:none;
background:radial-gradient(circle at 85% 15%,rgba(255,255,255,.8),transparent 34%);
opacity:.75;
}

.trip-cover-blue{
background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(205,234,255,.72));
}

.trip-cover-pink{
background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,218,232,.72));
}

.trip-cover-green{
background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(216,245,226,.72));
}

.trip-cover-orange{
background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,232,197,.72));
}

.trip-cover-purple{
background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(225,216,255,.72));
}
/* =====================
   FINAL FIX TRIP CARD
===================== */

.trip-card{

position:relative;

padding-top:60px;

min-height:220px;

}


.trip-card .emoji{

font-size:34px;

line-height:1;

margin-bottom:22px;

display:block;

}


/* FORCE ... BUTTON */

.trip-card .menuBtn{

all:unset;


position:absolute;

top:22px;

right:22px;

z-index:20;


width:42px;

height:42px;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


background:
rgba(255,255,255,.75);


backdrop-filter:
blur(20px);

-webkit-backdrop-filter:
blur(20px);


box-shadow:
0 8px 25px
rgba(0,0,0,.08);


font-size:22px;

line-height:1;


cursor:pointer;

}
/* CATEGORY SUMMARY */

.category-list{

margin-top:20px;

}


.category-list h3{

font-size:18px;

margin-bottom:12px;

}


.category-row{

display:flex;

justify-content:space-between;

align-items:center;


padding:12px 0;


border-bottom:
1px solid rgba(0,0,0,.06);


font-size:16px;

}


.category-row b{

font-weight:800;

}