body{
  margin:0;
  background:#dff0f2;
  font-family:'Segoe UI',Arial,sans-serif;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:100vh;
  overflow:hidden;
}


/* ── Phone shell (Border Removed) ── */
.phone{
  width:100%;
  max-width:420px;
  height:100vh;
  background:#f1fdf4;
  overflow:hidden;
  position:relative;

  /* Removed mobile frame */
  border:none;
  border-radius:0;
  box-shadow:none;
}


.page {
    display: none;
    height: 100%;
    width: 100%;
    padding: 20px;
    padding-bottom: 75px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
  background:#f1fdf4;
}

.page.active {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

/* Bottom Nav */
.bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: white;
    border-top: 1px solid #eee;
    display: none;
    align-items: center;
    justify-content: space-around;
    z-index: 97;
    box-sizing: border-box;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

.nav-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: #888;
    padding: 0;
}

.nav-btn span {
    font-size: 9px;
}

.nav-plus {
    background: #2d8cff;
    color: white;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(45,140,255,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

/* Sidebar & Overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 98;
    display: none;
}

.sidebar {
    overflow-y: auto;
    position: absolute;
    top: 0;
    left: -260px;
    width: 240px;
    height: 100%;
    background: white;
    z-index: 99;
    transition: 0.3s;
    padding: 40px 20px;
    box-sizing: border-box;
}

.sidebar.open { left: 0; }
.active-sidebar-link { color: #2d8cff; font-weight: bold; }
.float-right { float: right; }
.logout-link { color: red; font-weight: bold; margin-top: 50px; cursor: pointer; }

/* Welcome Page */
.circle { position: absolute; border-radius: 50%; background: #d9edf1; z-index: 0; }
.top { width: 170px; height: 170px; top: -70px; right: -70px; }
.bottom { width: 140px; height: 140px; bottom: -50px; left: -50px; }
.welcome-logo { width: 150px; display: block; margin: 60px auto 40px; position: relative; z-index: 1; }
.welcome-text { text-align: center; position: relative; z-index: 1; }
.start-btn { width: 180px; margin-top: 40px; }

/* Login Page */
.login-logo { width: 100px; display: block; margin: 20px auto; }
.tagline { text-align: center; color: #666; margin-bottom: 30px; }
.social-text { text-align: center; font-size: 12px; color: #999; margin-top: 20px; }
.social-container { display: flex; gap: 10px; margin-top: 15px; }
.social-btn { border: 1px solid #eee; }

/* Dashboard Headers */
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.row-header { justify-content: flex-start; gap: 15px; }
.menu-icon { font-size: 24px; cursor: pointer; color: #555; }
.dash-logo { width: 80px; }
.back-arrow { cursor: pointer; font-size: 20px; }

.search-bar {
    width: 100%; padding: 12px 15px; border-radius: 25px;
    border: none; background: white; margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); outline: none;
}

.section-title { font-weight: bold; color: #555; margin-bottom: 15px; }

/* Expense Cards */
.expense-card {
    background: white; padding: 15px; border-radius: 15px;
    margin-bottom: 12px; display: flex; justify-content: space-between;
    align-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    cursor: pointer;
}
.green { color: #5b8f67; font-weight: bold; }
.red { color: #d46b82; font-weight: bold; }
.grey { color: #aaa; font-weight: bold; }

/* Chart Styling */
.chart-container {
    background: #f0f4ff;
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
    margin-bottom: 15px;
    transition: background 0.3s;
}

/* Forms & Buttons */
.primary-btn {
    width: 100%; padding: 15px; border: none; border-radius: 12px;
    background: #2d8cff; color: white; font-weight: bold;
    cursor: pointer; margin-top: 10px;
}
input, textarea {
    width: 100%; padding: 14px; border: 1px solid #eee;
    border-radius: 10px; margin-bottom: 15px; background: white; box-sizing: border-box;
}
.input-label { display: block; margin-top: 10px; }
.amount-section { text-align: center; margin-top: 30px; }
.amount-input { font-size: 24px; text-align: center; border: none !important; border-bottom: 2px solid #2d8cff !important; border-radius: 0 !important; }

/* Tabs */
.tabs { display: flex; gap: 10px; margin-bottom: 20px; }
.tab { flex: 1; padding: 10px; border: none; border-radius: 20px; background: white; cursor: pointer; }
.active-tab { background: #ffe8e8; font-weight: bold; }

#welcome { overflow: hidden; padding-bottom: 20px; }
#login { padding-bottom: 20px; }

.social-btns { display: flex; gap: 10px; margin-top: 10px; }
.social-btn { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 12px; background: white; font-size: 14px; }
.or-text { text-align: center; font-size: 12px; margin-top: 15px; color: #999; }
.payer-select { width: 100%; padding: 12px; border: 1px solid #eee; border-radius: 10px; margin-bottom: 15px; background: white; font-size: 14px; }

.language-picker { display: none; background: #f5f5f5; border-radius: 10px; padding: 10px; margin-top: 5px; }
.lang-select { width: 100%; padding: 10px; border: 1px solid #eee; border-radius: 10px; background: white; font-size: 13px; margin-bottom: 10px; }

.result-box {
    background: white; padding: 20px; border-radius: 15px;
    margin-top: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.cat-btn {
    padding: 6px 10px; border-radius: 20px;
    border: 2px solid #eee; background: white;
    font-size: 12px; cursor: pointer;
}
.cat-btn.active {
    background: #2d8cff; color: white; border-color: #2d8cff;
}

.empty-state { text-align: center; color: #aaa; padding: 20px; }
.empty-state .icon { font-size: 40px; }
.hint { font-size: 12px; }

@keyframes fall {
    to { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

.dark-mode,
.dark-mode body {
    background: #1a1a1a !important;
    color: white !important;
}

.dark-mode .page {
    background: #1a1a1a !important;
    color: white !important;
}

.dark-mode .top-bar,
.dark-mode .bottom-nav {
    background: #222 !important;
    color: white !important;
}

.dark-mode input,
.dark-mode select,
.dark-mode textarea {
    background: #333 !important;
    color: white !important;
    border-color: #555 !important;
}

.dark-mode .settings-card,
.dark-mode .expense-item-card,
.dark-mode .expense-card,
.dark-mode .modal-sheet {
    background: #2d2d2d !important;
    color: white !important;
}
.dark-mode .payment-breakdown {
    background: #2d2d2d !important;
    color: white !important;
}
.dark-mode .expense-item-card {
    background: #2d2d2d !important;
    color: white !important;
}
/* Expense cards */
.dark-mode .expense-item-card {
    background: #2d2d2d !important;
    color: white !important;
}

/* Payment breakdown card */
.dark-mode .expense-item-card + div,
.dark-mode #resultContainer div[style*="background:white"] {
    background: #2d2d2d !important;
}

/* Payment breakdown labels */
.dark-mode .expense-item-card {
    background: #2d2d2d !important;
}

.dark-mode .expense-item-card  {
    color: white !important;
    background: #2d2d2d !important;
}