/* Driftwood — shared app styles. Direction C aesthetic: dark navy, Space Grotesk, bold figures, indigo→violet accent. Loaded once in . */ :root{ --bg:oklch(0.155 0.022 262); --panel:oklch(0.205 0.027 262); --panel2:oklch(0.245 0.03 262); --panel3:oklch(0.285 0.032 262); --line:oklch(1 0 0 / 0.08); --line2:oklch(1 0 0 / 0.04); --hi:oklch(0.97 0.006 262); --mid:oklch(0.73 0.018 262); --dim:oklch(0.56 0.02 262); --blue:oklch(0.66 0.16 268); /* primary indigo */ --blue-soft:oklch(0.72 0.13 262); --violet:oklch(0.66 0.16 300); --teal:oklch(0.74 0.12 195); --amber:oklch(0.80 0.13 78); --pink:oklch(0.72 0.16 350); --sky:oklch(0.76 0.12 230); --green:oklch(0.76 0.15 155); --rose:oklch(0.70 0.17 18); --pos:oklch(0.78 0.15 158); --neg:oklch(0.70 0.17 22); /* Brand / accent — overridable per theme */ --brand1:oklch(0.66 0.16 268); /* primary */ --brand2:oklch(0.66 0.16 300); /* secondary */ --brand-shadow:oklch(0.5 0.18 280 / 0.32); --hero-from:oklch(0.34 0.13 285); --hero-to:oklch(0.26 0.07 248); --hero-border:oklch(0.5 0.12 285 / 0.4); --r-lg:22px; --r-md:16px; --r-sm:11px; --shadow:0 18px 50px oklch(0 0 0 / 0.35); } *{box-sizing:border-box;} html,body{margin:0;background:var(--bg);} body{font-family:'Space Grotesk',system-ui,sans-serif;color:var(--hi); font-feature-settings:'tnum' 1;-webkit-font-smoothing:antialiased;} .num{font-variant-numeric:tabular-nums;} a{color:inherit;text-decoration:none;} button{font-family:inherit;} /* ---------- App shell ---------- */ .app{display:grid;grid-template-columns:248px 1fr;min-height:100vh;} .side{position:sticky;top:0;height:100vh;border-right:1px solid var(--line); display:flex;flex-direction:column;padding:24px 16px;gap:8px;background:oklch(0.175 0.024 262);} .side-brand{display:flex;align-items:center;gap:12px;padding:6px 10px 18px;} .side-mark{width:38px;height:38px;border-radius:12px;flex-shrink:0; background:linear-gradient(145deg,var(--brand1),var(--brand2));display:flex;align-items:center;justify-content:center;} .side-mark svg{width:20px;height:20px;} .side-brand-name{font-size:18px;font-weight:700;letter-spacing:-0.02em;line-height:1.1;} .side-brand-sub{font-size:12px;color:var(--dim);margin-top:2px;} .side-nav{display:flex;flex-direction:column;gap:3px;} .side-link{display:flex;align-items:center;gap:13px;padding:11px 13px;border-radius:12px; font-size:14.5px;font-weight:500;color:var(--mid);cursor:pointer;border:none;background:none;width:100%;text-align:left;transition:background .14s,color .14s;} .side-link svg{width:19px;height:19px;flex-shrink:0;stroke-width:1.8;} .side-link:hover{color:var(--hi);background:oklch(1 0 0 / 0.03);} .side-link.on{background:linear-gradient(135deg,var(--brand1),var(--brand2));color:#fff;box-shadow:0 6px 18px var(--brand-shadow);} .side-foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding:14px 12px 4px;font-size:12.5px;color:var(--green);} .reset-link{margin-left:auto;background:none;border:none;color:var(--dim);font-family:inherit;font-size:12px;cursor:pointer;padding:4px 8px;border-radius:7px;transition:background .14s,color .14s;} .reset-link:hover{background:oklch(1 0 0 / 0.05);color:var(--mid);} .side-foot .dotpulse{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 0 var(--green);animation:pulse 2.4s infinite;} @keyframes pulse{0%{box-shadow:0 0 0 0 oklch(0.76 0.15 158 / 0.5);}70%{box-shadow:0 0 0 7px oklch(0.76 0.15 158 / 0);}100%{box-shadow:0 0 0 0 oklch(0.76 0.15 158 / 0);}} .main{min-width:0;display:flex;flex-direction:column;} .topbar{display:flex;align-items:center;justify-content:space-between;padding:26px 38px 8px;} .topbar h1{font-size:27px;font-weight:700;letter-spacing:-0.03em;} .topbar .sub{font-size:14px;color:var(--mid);margin-top:5px;} .topbar-right{display:flex;align-items:center;gap:12px;} .seg{display:flex;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px;} .seg button{font-size:13px;color:var(--mid);padding:7px 16px;border-radius:999px;cursor:pointer;border:none;background:none;font-weight:500;} .seg button.on{background:var(--brand1);color:#fff;} .btn{border:none;border-radius:999px;font-size:14px;font-weight:600;padding:11px 20px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:transform .1s,filter .14s;} .btn:active{transform:translateY(1px);} .btn-primary{background:linear-gradient(135deg,var(--brand1),var(--brand2));color:#fff;box-shadow:0 8px 20px var(--brand-shadow);} .btn-primary:hover{filter:brightness(1.08);} .btn-ghost{background:var(--panel);color:var(--hi);border:1px solid var(--line);} .btn-ghost:hover{background:var(--panel2);} .btn svg{width:16px;height:16px;} .content{padding:18px 38px 48px;display:flex;flex-direction:column;gap:22px;} .avs{display:flex;} .avs span{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#fff;} .avs span:nth-child(1){background:var(--blue);} .avs span:nth-child(2){background:var(--violet);margin-left:-11px;border:2px solid var(--bg);} /* ---------- Cards ---------- */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;} .card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;} .card-head h2{font-size:16px;font-weight:600;letter-spacing:-0.01em;} .card-head .link{font-size:13px;color:var(--blue-soft);cursor:pointer;font-weight:500;} .chip{font-size:12.5px;color:var(--mid);background:var(--panel2);padding:5px 12px;border-radius:999px;font-weight:500;} .section-label{font-size:12.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--dim);font-weight:600;} .grid{display:grid;gap:20px;} .g2{grid-template-columns:1fr 1fr;} .g3{grid-template-columns:repeat(3,1fr);} .g4{grid-template-columns:repeat(4,1fr);} /* ---------- Stat / KPI tiles ---------- */ .stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 22px;} .stat-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;} .stat-ico svg{width:19px;height:19px;} .stat-label{font-size:11.5px;letter-spacing:0.08em;text-transform:uppercase;color:var(--dim);font-weight:600;} .stat-val{font-size:27px;font-weight:700;letter-spacing:-0.03em;margin-top:7px;} .stat-foot{font-size:12.5px;margin-top:8px;color:var(--mid);} .up{color:var(--pos);}.down{color:var(--neg);} /* ---------- Progress bars ---------- */ .bar{height:8px;border-radius:999px;background:oklch(1 0 0 / 0.08);overflow:hidden;} .bar.lg{height:10px;} .bar>span{display:block;height:100%;border-radius:999px;background:var(--blue);transition:width .4s cubic-bezier(.2,.7,.3,1);} .bar>span.over{background:var(--neg);} /* ---------- Tables ---------- */ .tbl{width:100%;border-collapse:collapse;} .tbl th{text-align:right;font-size:11px;letter-spacing:0.06em;text-transform:uppercase;color:var(--dim);font-weight:600;padding:0 0 13px;border-bottom:1px solid var(--line);} .tbl th:first-child{text-align:left;} .tbl td{padding:13px 0;font-size:14px;border-bottom:1px solid var(--line2);text-align:right;} .tbl tbody tr:last-child td{border-bottom:none;} .tbl td:first-child{text-align:left;} .tbl tr:hover td{background:oklch(1 0 0 / 0.015);} /* ---------- Legend dots & tags ---------- */ .dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0;} .tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mid);background:var(--panel2);padding:4px 10px;border-radius:8px;font-weight:500;} /* ---------- Forms (income calculator etc.) ---------- */ .field{display:flex;flex-direction:column;gap:7px;} .field label{font-size:12.5px;color:var(--mid);font-weight:500;} .input{display:flex;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:0 14px;transition:border-color .14s,box-shadow .14s;} .input:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px oklch(0.6 0.16 268 / 0.18);} .input span.pre{color:var(--dim);font-size:16px;} .input input{background:none;border:none;outline:none;color:var(--hi);font-family:inherit;font-size:18px;font-weight:600;padding:13px 8px;width:100%;font-variant-numeric:tabular-nums;} .input select{background:none;border:none;outline:none;color:var(--hi);font-family:inherit;font-size:14px;padding:13px 4px;cursor:pointer;} .input select option{background:var(--panel2);color:var(--hi);} .segctl{display:flex;gap:6px;background:var(--panel2);border:1px solid var(--line);border-radius:11px;padding:5px;} .segctl button{flex:1;border:none;background:none;color:var(--mid);font-family:inherit;font-size:13px;font-weight:500;padding:9px;border-radius:8px;cursor:pointer;} .segctl button.on{background:var(--blue);color:#fff;} /* ---------- Modal ---------- */ .modal-bg{position:fixed;inset:0;background:oklch(0.1 0.02 262 / 0.6);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:50;animation:fade .2s;} .modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;width:460px;max-width:92vw;box-shadow:var(--shadow);animation:rise .25s cubic-bezier(.2,.8,.3,1);} @keyframes fade{from{opacity:0;}} @keyframes rise{from{opacity:0;transform:translateY(16px) scale(.98);}} .modal h2{font-size:20px;font-weight:700;letter-spacing:-0.02em;margin:0 0 4px;} .modal p.sub{font-size:13.5px;color:var(--mid);margin:0 0 22px;} .modal-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;} .modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:24px;} .fadein{animation:fade .3s ease;} /* ---------- Inline-editable name / role (income members) ---------- */ .name-edit{background:none;border:1px solid transparent;outline:none;color:var(--hi); font-family:inherit;font-size:16px;font-weight:600;letter-spacing:-0.01em;padding:3px 7px;margin:-3px -7px 1px; border-radius:8px;width:100%;transition:background .14s,border-color .14s;} .name-edit:hover{background:oklch(1 0 0 / 0.04);} .name-edit:focus{background:var(--panel2);border-color:var(--blue);} .role-edit{background:none;border:1px solid transparent;outline:none;color:var(--dim); font-family:inherit;font-size:12.5px;padding:2px 7px;margin:0 -7px;border-radius:7px;width:100%;transition:background .14s,border-color .14s;} .role-edit:hover{background:oklch(1 0 0 / 0.04);color:var(--mid);} .role-edit:focus{background:var(--panel2);border-color:var(--blue);color:var(--hi);} .name-edit::placeholder,.role-edit::placeholder{color:var(--dim);} .card-remove{flex-shrink:0;width:30px;height:30px;border-radius:9px;border:1px solid var(--line); background:var(--panel2);color:var(--dim);font-size:19px;line-height:1;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:background .14s,color .14s,border-color .14s;} .card-remove:hover{background:color-mix(in oklch, var(--neg) 18%, var(--panel2));color:var(--neg);border-color:transparent;} .add-person-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px; min-height:200px;border:1.5px dashed var(--line);border-radius:var(--r-lg);background:none;color:var(--hi); cursor:pointer;font-family:inherit;transition:border-color .16s,background .16s;} .add-person-tile:hover{border-color:var(--blue);background:oklch(1 0 0 / 0.02);} .add-person-circle{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center; background:color-mix(in oklch, var(--blue) 16%, transparent);color:var(--blue-soft);margin-bottom:2px;} /* ---------- Editable rows (bills / debts) ---------- */ .bill-row{transition:background .14s;} .bill-row:hover{background:oklch(1 0 0 / 0.03);} .row-edit{color:var(--dim);display:flex;align-items:center;opacity:0;transition:opacity .14s;flex-shrink:0;} .bill-row:hover .row-edit{opacity:1;} .goal-card{transition:border-color .14s;} .goal-card:hover{border-color:oklch(1 0 0 / 0.16);} .goal-add{opacity:0;transition:opacity .14s;} .goal-card:hover .goal-add{opacity:1;} /* ---------- Bulk select (transactions) ---------- */ .ck{display:inline-flex;align-items:center;cursor:pointer;position:relative;} .ck input{position:absolute;opacity:0;width:18px;height:18px;margin:0;cursor:pointer;} .ck span{width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line);background:var(--panel2);display:inline-block;transition:background .12s,border-color .12s;position:relative;} .ck input:checked + span{background:var(--brand1);border-color:var(--brand1);} .ck input:checked + span::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);} .ck input:indeterminate + span{background:var(--brand1);border-color:var(--brand1);} .ck input:indeterminate + span::after{content:"";position:absolute;left:3px;top:7px;width:10px;height:0;border-bottom:2px solid #fff;} .tbl-sel td:first-child,.tbl-sel th:first-child{padding-right:6px;} .row-sel td{background:color-mix(in oklch, var(--brand1) 9%, transparent) !important;} .tbl-sel tbody tr:hover td{background:oklch(1 0 0 / 0.02);} .tbl-sel tbody tr.row-sel:hover td{background:color-mix(in oklch, var(--brand1) 13%, transparent) !important;} .bulkbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px; padding:11px 16px;border-radius:13px;background:color-mix(in oklch, var(--brand1) 14%, var(--panel2)); border:1px solid color-mix(in oklch, var(--brand1) 30%, transparent);animation:fade .18s;} .bulkbar-count{font-size:14px;font-weight:600;} .bulkbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .bulk-select{position:relative;} .bulk-select select{appearance:none;background:var(--panel);border:1px solid var(--line);color:var(--hi); font-family:inherit;font-size:13px;font-weight:500;padding:8px 30px 8px 13px;border-radius:9px;cursor:pointer;} .bulk-select::after{content:"▾";position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--dim);pointer-events:none;font-size:11px;} .bulk-select select option{background:var(--panel);color:var(--hi);} .bulk-btn{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);color:var(--hi); font-family:inherit;font-size:13px;font-weight:500;padding:8px 14px;border-radius:9px;cursor:pointer;transition:background .12s,color .12s,border-color .12s;} .bulk-btn:hover{background:var(--panel2);} .bulk-btn.danger:hover{background:color-mix(in oklch, var(--neg) 18%, var(--panel));color:var(--neg);border-color:transparent;} .tx-edit{width:30px;height:30px;border-radius:8px;border:1px solid transparent;background:none;color:var(--dim); display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .14s,background .14s,color .14s;} .tbl-sel tbody tr:hover .tx-edit{opacity:1;} .tx-edit:hover{background:var(--panel2);color:var(--hi);}