:root{color-scheme:dark;--bg:#101b18;--panel:#192621;--line:#35443a;--gold:#d8b37c;--text:#f5eddf;--muted:#aab3a8}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 22% 4%,#2b3023 0%,transparent 42%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;min-height:100vh}.shell{max-width:1060px;margin:auto;padding:0 24px 90px}.top{height:108px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:75px}.brand{font:600 38px Georgia,serif;color:#f1d5a6;text-decoration:none;letter-spacing:-1px}.mark{font:32px Georgia,serif;color:var(--gold);margin-right:12px}.navbtn{background:transparent;color:var(--text);border:1px solid #a0804d;border-radius:12px;padding:13px 22px;font-size:15px;text-decoration:none;cursor:pointer}.balances{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-bottom:58px}.person{min-height:220px;border:1px solid #9b7c4b;border-radius:22px;background:linear-gradient(130deg,#252b22,#15251f 80%);padding:30px 34px;box-shadow:0 20px 60px #0002}.identity{display:flex;align-items:center;gap:18px}.identity h2{font:500 27px Georgia,serif;margin:0}.avatar{height:60px;width:60px;border-radius:50%;display:grid;place-items:center;background:#4b4430;color:#f4dfb7;font:28px Georgia,serif}.balance{font:500 clamp(36px,4vw,58px) Georgia,serif;color:#f0d7a9;text-align:center;margin:20px 0 4px}.balance-label{text-align:center;color:var(--muted);font-size:13px}.panel,.history{border:1px solid var(--line);background:#ffffff05;border-radius:20px;padding:30px 34px;margin-bottom:28px}.panel h2,.history h2{font-size:22px;font-weight:550;margin:0 0 26px}.entries{display:flex;flex-direction:column}.entry{display:flex;align-items:center;gap:17px;padding:18px 0;border-top:1px solid var(--line)}.mini-avatar{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:50%;background:#33392c;color:#e6ce9f;font-family:Georgia,serif}.entry-info{flex:1;min-width:0}.entry-info b{font-size:15px;font-weight:550}.entry-info p{color:var(--muted);margin:5px 0 0;font-size:13px;overflow-wrap:anywhere}.entry-info span{color:#8d998e}.entry strong{color:#d8d8a5;font-size:16px;white-space:nowrap;font-weight:500}.entry strong.paid{color:#e4a394}.empty,.muted{color:var(--muted)}label{display:block;color:#c9cbbf;font-size:13px;margin:0 0 18px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}input,select{display:block;width:100%;margin-top:9px;background:#111c18;border:1px solid #4a574c;border-radius:10px;padding:13px 14px;color:var(--text);font:16px system-ui}input:focus,select:focus{outline:2px solid #b28d56}.actions{display:flex;gap:12px;flex-wrap:wrap}.actions button{border:1px solid #c5a16d;background:#c5a16d;color:#18221c;border-radius:10px;padding:13px 22px;font-weight:650;cursor:pointer}.actions button.secondary{background:transparent;color:#e6cfaa}.notice{padding:14px 18px;border:1px solid var(--line);border-radius:10px;margin:-48px 0 34px}.login{max-width:440px;margin:0 auto}.login h1{font-size:25px;font-weight:550;margin:0 0 26px}@media(max-width:650px){.shell{padding:0 17px 55px}.top{height:85px;margin-bottom:32px}.brand{font-size:30px}.mark{font-size:24px;margin-right:5px}.balances{grid-template-columns:1fr;gap:15px;margin-bottom:28px}.person{min-height:175px;padding:23px}.avatar{height:45px;width:45px;font-size:22px}.identity h2{font-size:23px}.balance{font-size:44px;margin:12px 0 0}.panel,.history{padding:22px 19px}.fields{grid-template-columns:1fr;gap:0}.entry{gap:10px}.entry-info p span{display:block;margin-top:3px}}

.tabs{display:flex;gap:10px;margin:-45px 0 34px}.tabs a{padding:10px 20px;border-radius:12px;border:1px solid var(--line);text-decoration:none;color:var(--muted)}.tabs a.active{color:var(--text);border-color:var(--gold);background:#27342a}.balances{grid-template-columns:1fr;max-width:650px;margin:0 auto 30px}.person{min-height:235px}.history,.panel{max-width:650px;margin-left:auto;margin-right:auto}@media(max-width:650px){.tabs{margin:-12px 0 26px}.person{min-height:190px}}

/* Le Tab v2 */
.top{margin-bottom:44px}.tabs{margin:0 0 32px}.toast{position:fixed;top:18px;right:18px;z-index:1000;background:#2b3d31;color:#f5eddf;border:1px solid #a0804d;border-radius:12px;padding:13px 20px;box-shadow:0 12px 35px #0007;pointer-events:none;animation:toast-exit 3.1s ease forwards;max-width:calc(100vw - 36px)}
@keyframes toast-exit{0%{opacity:0;transform:translateY(-8px)}10%,72%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px);visibility:hidden}}
.copy-balance{display:block;width:100%;border:0;background:none;cursor:pointer;padding:0;position:relative}.copy-balance:focus-visible{outline:2px solid var(--gold);border-radius:8px}.copy-icon{font:18px system-ui;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--muted)}.copy-balance:hover .copy-icon,.copy-balance:focus-visible .copy-icon{opacity:1}
.admin-panel{padding:0;display:flex;align-items:stretch;gap:0}.transaction-details{flex:1;min-width:0}.transaction-details summary{cursor:pointer;list-style:none;padding:22px 28px;font-size:17px;font-weight:550;display:flex;align-items:center;justify-content:space-between}.transaction-details summary::-webkit-details-marker{display:none}.transaction-details summary .chevron{font-size:23px;color:var(--gold)}.transaction-details[open] summary .chevron{transform:rotate(180deg)}.transaction-details form{padding:4px 28px 28px}.settle-form{display:flex;align-items:flex-start;padding:13px;border-left:1px solid var(--line)}.settle-btn{border:1px solid #a0804d;border-radius:10px;padding:12px 17px;background:transparent;color:#f1d5a6;cursor:pointer;font:inherit}.settle-btn:hover,.delete-btn:hover{background:#ffffff12}.delete-form{margin-left:4px}.delete-btn{border:1px solid transparent;background:transparent;color:#9aa79a;border-radius:8px;cursor:pointer;font-size:24px;line-height:1;padding:5px 9px}.delete-btn:hover{color:#f0a69d}.entry strong{flex-shrink:0}
@media(max-width:650px){.top{margin-bottom:25px}.tabs{margin:0 0 25px}.transaction-details summary{padding:20px}.transaction-details form{padding:0 20px 20px}.settle-form{padding:10px}.settle-btn{padding:12px 10px}.copy-icon{opacity:.45}.entry strong{font-size:14px}.delete-btn{padding:5px}}

/* Le Tab v3 refinements */
.copy-icon{display:none!important}
.admin-panel{display:block;padding:0;max-width:650px}
.transaction-details{width:100%}
.transaction-details summary{min-height:64px;gap:16px}
.transaction-details summary .chevron{width:23px;height:23px;flex:0 0 23px;fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.transaction-details[open] summary .chevron{transform:rotate(180deg)}
.settle-wrap{max-width:650px;margin:-12px auto 28px;display:flex;justify-content:flex-end}
.settle-form{border:0;padding:0;display:block}
.settle-btn{font-size:13px;padding:8px 13px;border-color:#586151;color:#c8cbbd;background:transparent;border-radius:9px}
.settle-btn:hover{border-color:var(--gold);color:var(--text)}
@media(max-width:650px){.transaction-details summary .chevron{width:24px;height:24px;flex-basis:24px}.settle-wrap{margin-top:-12px}}

/* Le Tab v4 */
.mark{display:inline-flex;vertical-align:-5px;margin-right:10px;color:var(--gold)}
.mark svg{display:block;width:31px;height:31px}
.settle-wrap{margin:0 auto 12px;justify-content:flex-end}
.admin-panel{margin-bottom:28px}
.entry-settled{position:relative;margin:12px -12px 10px;padding:20px 12px 16px;background:linear-gradient(90deg,#254239,#1c322a 80%,transparent);border-top:1px solid #6b9d81;border-bottom:1px solid #355d4b;border-radius:10px;flex-wrap:wrap}
.entry-settled .entry-info b{color:#bce0c5;font-weight:650}
.entry-settled .entry-info p{color:#a9c4b2}
.entry-settled strong,.entry-settled strong.paid{color:#bce0c5}
.entry-settled .settled-rule{position:absolute;top:-13px;left:12px;right:12px;border-top:1px dashed #638875;opacity:.75}
@media(max-width:650px){.mark{vertical-align:-5px;margin-right:5px}.mark svg{width:25px;height:25px}.settle-wrap{margin:0 auto 12px}.entry-settled{margin-left:-7px;margin-right:-7px;padding-left:9px;padding-right:9px}}

/* Le Tab v5 */
.mark{display:inline-block;vertical-align:baseline;margin-right:10px;font-size:24px;line-height:1;color:var(--gold)}
.person{position:relative;padding-bottom:58px}
.settle-in-card{position:absolute;right:22px;bottom:17px;margin:0;padding:0;border:0;display:block}
.settle-in-card .settle-btn{font-size:12px;padding:7px 11px;border:1px solid #754f50;background:#40292a;color:#e7aaaa;border-radius:9px;line-height:1.25}
.settle-in-card .settle-btn:hover{background:#583133;border-color:#a86b6b;color:#ffcccc}
.notice.toast,.toast{position:fixed!important;top:auto!important;left:50%!important;right:auto!important;bottom:max(24px,env(safe-area-inset-bottom))!important;transform:translateX(-50%);margin:0!important;z-index:2000;background:#283b30;border:1px solid #617e68;color:#f5eddf;border-radius:11px;padding:10px 16px;box-shadow:0 8px 28px #0007;pointer-events:none;max-width:calc(100vw - 32px);width:max-content;font-size:13px;animation:le-tab-toast 2.4s ease forwards}
@keyframes le-tab-toast{0%{opacity:0;translate:0 8px}12%,78%{opacity:1;translate:0 0}100%{opacity:0;translate:0 8px;visibility:hidden}}
@media(max-width:650px){.mark{font-size:19px;margin-right:5px}.person{padding-bottom:55px}.settle-in-card{right:17px;bottom:14px}}

/* Le Tab — kleine visuele verbeteringen */

/* Eenvoudig rond logo */
.mark {
  display: inline-block;
  font-size: 0;
  width: 12px;
  height: 12px;
  background: var(--gold);
  border-radius: 50%;
  margin-right: 12px;
  vertical-align: 5px;
}

/* Afrekenen: rustige tekstknop */
.settle-in-card .settle-btn {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #9b9d93;
  font-size: 12px;
  font-weight: 400;
  padding: 5px 7px;
  border-radius: 6px;
  cursor: pointer;
}

.settle-in-card .settle-btn:hover,
.settle-in-card .settle-btn:focus-visible {
  background: transparent;
  border: none;
  color: #d38d8d;
}

/* Afrekening: neutraal en wit */
.entry-settled {
  background: #ffffff06;
  border-top: 1px solid #4c5a50;
  border-bottom: 1px solid #35443a;
}

.entry-settled .entry-info b,
.entry-settled strong,
.entry-settled strong.paid {
  color: #f5eddf;
}

.entry-settled .entry-info p {
  color: var(--muted);
}

.entry-settled .settled-rule {
  border-top-color: #687369;
}


/* Openstaand / Tegoed verbergen */
.balance-label {
  display: none;
}

/* Afrekenen subtiel rood */
.settle-in-card .settle-btn {
  color: #c77b7b;
}

.settle-in-card .settle-btn:hover {
  color: #f0a0a0;
}

/* Afgerekend: zachte witte gradient */
.entry-settled {
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.10) 0%,
    rgba(255, 255, 255, 0.045) 55%,
    rgba(255, 255, 255, 0.01) 100%
  );
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}


/* Origineel Le Tab logo */
.mark {
  display: inline;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font: 32px Georgia, serif;
  color: var(--gold);
  margin-right: 12px;
  vertical-align: baseline;
  line-height: normal;
}

@media (max-width: 650px) {
  .mark {
    font-size: 24px;
    margin-right: 5px;
  }
}


/* Le Tab logo: cirkel met kleinere cirkel */
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border: 2px solid var(--gold);
  border-radius: 50%;
  background: transparent;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
  margin-right: 10px;
}

.mark::after {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--gold);
  border-radius: 50%;
}

@media (max-width: 650px) {
  .mark {
    width: 20px;
    height: 20px;
    margin-right: 7px;
  }

  .mark::after {
    width: 8px;
    height: 8px;
  }
}