:root{
         --bg: #f5f7fb;
         --card: #ffffff;
         --muted: #6b7280;
         --accent: #2563eb;
         --accent-2: #06b6d4;
         --success: #059669;
         --danger: #ef4444;
         --glass: rgba(255,255,255,0.7);
         --soft-border: rgba(15,23,42,0.06);
         --shadow: 0 10px 30px rgba(16,24,40,0.06);
         --radius: 12px;
         }
         *{box-sizing:border-box}
         body{
         /*margin:0;*/
         /*font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;*/
         background: #f4f7fc;
         /*color:#071133;*/
         /*-webkit-font-smoothing:antialiased;*/
         /*padding:20px;*/
         /*display:flex;*/
         /*justify-content:center;*/
         }
         .app{width:100%;max-width:1700px;margin: 0 auto;padding-left:15px;padding-right:15px;}
         header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
         h1{margin:0;font-size:20px;font-weight:700}
         .subtitle{color:var(--muted);font-size:13px;margin-top:6px}
         .top-controls{display:flex;gap:8px}
         .btn{background:linear-gradient(90deg,var(--accent), #60a5fa);color:white;border:0;padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:600;box-shadow:0 8px 20px rgba(37,99,235,0.08)}
         .btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(37,99,235,0.12);box-shadow:none}
         .btn.small{padding:8px 10px;font-size:13px}
         .btn.negative{background:linear-gradient(90deg,#ef4444,#fb7185)}
         /* Dashboard grid */
         .dashboard{display:grid;grid-template-columns: 450px 1fr 450px;gap:18px;align-items:start}
         .panel{background:var(--card);border-radius:var(--radius);padding:14px;border:1px solid var(--soft-border);box-shadow:var(--shadow)}
         label{display:block;color:var(--muted);font-size:13px;margin-bottom:8px}
         .app input[type="text"],.app input[type="number"],select{
         width:100%;padding:10px;border-radius:10px;border:1px solid rgba(15,23,42,0.06);background:white;font-size:14px;color:inherit;
         }
         /* People column */
         .people-col .person-list{display:flex;flex-direction:column;gap:12px;margin-top:12px;max-height:68vh;overflow:auto;padding-right:6px}
         .person-card{padding:12px;border-radius:10px;border:1px solid rgba(15,23,42,0.03);background:linear-gradient(180deg,#ffffff,#fbfdff);transition:transform .14s ease,box-shadow .14s ease;}
         .person-card.add-anim{transform:translateY(-6px);box-shadow:0 12px 28px rgba(37,99,235,0.06)}
         .person-head{display:flex;justify-content:space-between;align-items:center}
         .small-muted{color:var(--muted);font-size:13px}
         .bills{display:flex;flex-direction:column;gap:10px;margin-top:10px;margin-bottom: 10px;}
         .bill-row {display: flex;flex-direction: column;gap: 8px;padding: 10px;border-radius: 10px;border: 1px solid rgba(15,23,42,0.03);background: #f7fbff;}
         .innerParent {display: flex;gap: 20px;margin-bottom: 10px;}
         .bill-controls{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
         .chips{display:flex;flex-wrap:wrap;gap:6px}
         .chip{padding:6px 8px;border-radius:999px;background:#fff;border:1px solid rgba(37,99,235,0.06);font-size:13px;display:inline-flex;align-items:center;gap:8px;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
         .tiny{font-size:12px;color:var(--muted)}
         /* Middle: detailed bills */
         .middle-col{overflow:auto;max-height:78vh;padding:12px}
         table{width:100%;border-collapse:collapse;font-size:14px}
         thead th{position:sticky;top:0;background:transparent;color:var(--muted);font-weight:700;padding:10px}
         th,td{padding:10px;border-bottom:1px solid rgba(15,23,42,0.04);text-align:left}
         .tag{padding:6px 8px;border-radius:8px;background:#f2f8ff;border:1px solid rgba(37,99,235,0.06);font-size:13px;color:var(--muted)}
         /* Right: summary */
         .right-col .balances{display:grid;grid-template-columns:1fr;gap:10px}
         .balance-card{padding:12px;border-radius:10px;background:linear-gradient(180deg,#ffffff,#fafcff);border:1px solid rgba(15,23,42,0.03)}
         .bal-name{font-weight:700}
         .bal-amt{font-size:16px;font-weight:800;margin-top:6px}
         .pos{color:var(--success)}
         .neg{color:var(--danger)}
         .settlement{margin-top:12px;padding:12px;border-radius:10px;background:linear-gradient(180deg,#ffffff,#fafcff);border:1px solid rgba(15,23,42,0.03)}
         .tooltip{position:relative;display:inline-block}
         .tooltip .tooltiptext{visibility:hidden;position:absolute;left:50%;transform:translateX(-50%);top:110%;background:#0b1220;color:#e6eef8;padding:8px;border-radius:8px;white-space:pre-line;z-index:60;box-shadow:0 10px 40px rgba(2,6,23,0.6);min-width:160px;max-width:320px}
         .tooltip:hover .tooltiptext{visibility:visible}
         /* Floating + person */
         .floating-add{position:relative;margin-top:12px}
         .fab{position:sticky;bottom:18px;right:18px;display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;background:linear-gradient(90deg,var(--accent),#60a5fa);color:white;border:0;cursor:pointer;box-shadow:0 10px 26px rgba(37,99,235,0.08);font-weight:700}
         /* Collapsible headers on mobile: toggle caret */
         .collapsible{cursor:pointer;display:flex;justify-content:space-between;align-items:center}
         .caret{transition:transform .18s ease}
         .collapsed .caret{transform:rotate(-90deg)}
         /* small screens */
         @media (max-width:1100px){
         .dashboard{grid-template-columns: 320px 1fr; grid-template-rows:auto 1fr}
         .right-col{grid-column: 1 / -1; order:3; margin-top:12px}
         .middle-col{grid-column: 1 / -1; order:2; margin-top:12px}
         }
         @media (max-width:700px){
         .dashboard{grid-template-columns:1fr;gap:12px}
         .people-col{order:1}
         .middle-col{order:2}
         .right-col{order:3}
         .person-list{max-height:none}
         .fab{position:static;margin-top:12px}
         }
         /* small animations */
         .fade-in{animation:fadeIn .28s ease both}
         @keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }

         @media (max-width: 1600px) {
  main.dashboard {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1100px) {
  main.dashboard {
    grid-template-columns: 1fr;
  }
  .right-col .balances {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .right-col .balances {
    grid-template-columns: repeat(2, 1fr);
  }
  .app {
    padding-left: 0;
    padding-right: 0;
}
}

@media (max-width: 450px) {
  .right-col .balances {
    grid-template-columns: repeat(1, 1fr);
  }
  .innerParent {
    flex-direction: column;
  }
}



/*div#content .row {*/
/*    width: 100%;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*}*/
.single-tools main#main {
    width: 100%;
}
/*.person-list::-webkit-scrollbar {*/
/*  display: none;*/
/*}*/

button.addBillButton {
    width: 100%;
    font-size: 12px !important;
    background: linear-gradient(90deg, var(--accent), #60a5fa) !important;
    color: #fff !important;
}
.bill-controls button.btn.small.ghost.removeBtn {
    background: #fff;
    transition: 0.3s ease-in-out;
    border: none;
}
.bill-controls button.btn.small.ghost.removeBtn:hover {
    background: #bc2323;
    color: #fff;
}
button#resetBtn {
    background: #d31212;
    color: #fff;
    border: none;
}
button#saveBtn {
    background: #008c00;
}
button#copyLinkBtn {
    background: linear-gradient(90deg, #1d54cc, #518ed9);
    color: #fff;
    min-width: 88px;
}
.top-controls button:hover {transform: translateY(-3px);}
.top-controls button {transition: 0.3s ease-in-out;}


@media (max-width: 1500px) {
    .container {
        max-width: 1480px;
    }
}
@media (max-width: 1200px) {
    .container {
        max-width: 1180px;
    }
}
@media (max-width: 992px) {
    .single-post .container {
        max-width: 960px;
    }
}
@media(max-width:1024px){
header {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}
    }
    
input#newPersonName {
    width: 70%;
}
button#addPersonBtn {
    width: 100px;
}
.subtitle {
    color: #000;
}
table tr:first-child th {
    background-color: #fff;
}