/* Cartel Credits – clean responsive UI */
.cartelc-wrap{max-width:980px;margin:0 auto;padding:16px;}
.cartelc-card{background:#fff;border:1px solid #e6e6e6;border-radius:16px;box-shadow:0 8px 28px rgba(0,0,0,.06);overflow:hidden;}
.cartelc-card__title{font-size:20px;font-weight:700;padding:16px 18px;border-bottom:1px solid #eee;}
.cartelc-card__body{padding:16px 18px;}

.cartelc-muted{color:#6b7280;font-size:14px;margin-top:10px}
.cartelc-alert{border-radius:12px;padding:10px 12px;margin:10px 0;font-size:14px}
.cartelc-alert--err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.cartelc-alert--ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.cartelc-alert--warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e}

.cartelc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 14px;border:1px solid transparent;text-decoration:none;font-weight:700;cursor:pointer;transition:.15s}
.cartelc-btn--primary{background:#111827;color:#fff;border-color:#111827}
.cartelc-btn--primary:hover{transform:translateY(-1px)}
.cartelc-btn--ghost{background:#fff;color:#111827;border-color:#e5e7eb}
.cartelc-btn--ghost:hover{background:#f9fafb}
.cartelc-btn--sm{padding:8px 10px;border-radius:10px;font-size:13px}

.cartelc-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0}
.cartelc-user{font-weight:800}
.cartelc-bal{color:#6b7280;font-weight:700}
.cartelc-header__right{display:flex;gap:8px;flex-wrap:wrap}

.cartelc-form input[type="text"],
.cartelc-form input[type="email"],
.cartelc-form input[type="password"],
.cartelc-input{
  width:100%;padding:10px 12px;border-radius:12px;border:1px solid #e5e7eb;background:#fff;
}
.cartelc-label{font-size:13px;font-weight:800;color:#111827;display:block;margin-bottom:10px}
.cartelc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
@media (max-width:640px){.cartelc-grid{grid-template-columns:1fr}}

.cartelc-kpis{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:860px){.cartelc-kpis{grid-template-columns:1fr}}
.cartelc-kpi{border:1px solid #eee;border-radius:14px;padding:14px}
.cartelc-kpi__label{font-size:13px;color:#6b7280;font-weight:800}
.cartelc-kpi__value{font-size:26px;font-weight:900;margin-top:6px}

.cartelc-qr{margin-top:10px;border:1px dashed #e5e7eb;border-radius:14px;padding:12px;min-height:84px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.cartelc-qr__img{display:flex;justify-content:center;align-items:center}
.cartelc-qrimg{border-radius:12px;border:1px solid #e5e7eb;background:#fff}
.cartelc-qr__token{word-break:break-all;font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;font-size:12px;color:#111827;background:#f9fafb;border:1px solid #eee;padding:10px;border-radius:12px}
.cartelc-qr__placeholder{color:#6b7280}
.cartelc-qr__row{display:flex;gap:8px;flex-wrap:wrap}

.cartelc-split{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media (max-width:860px){.cartelc-split{grid-template-columns:1fr}}
.cartelc-panel{border:1px solid #eee;border-radius:14px;padding:14px}
.cartelc-panel__title{font-weight:900;margin-bottom:10px}

.cartelc-inline{display:flex;gap:10px;align-items:center}
.cartelc-inline input{flex:1}

.cartelc-pending{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid #f1f5f9;border-radius:14px;padding:12px;margin:10px 0;background:#fff}
@media (max-width:640px){.cartelc-pending{flex-direction:column}}
.cartelc-pending__amount{font-size:18px;font-weight:900}
.cartelc-pending__meta{font-size:12px;color:#6b7280;margin-top:2px}
.cartelc-pending__actions{display:flex;gap:8px;flex-wrap:wrap}

/* Staff page */
.cartelc-staff{display:grid;grid-template-columns:1.05fr .95fr;gap:14px}
@media (max-width:860px){.cartelc-staff{grid-template-columns:1fr}}
.cartelc-staff__cam,.cartelc-staff__form{border:1px solid #eee;border-radius:14px;padding:14px}
.cartelc-video{width:100%;max-width:520px;border-radius:14px;border:1px solid #e5e7eb;background:#000;aspect-ratio:4/3}

/* Staff scan: camera permission + picker row */
.cartelc-camrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 10px;}
.cartelc-camrow .cartelc-input{flex:1;}
.cartelc-staff__btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

#cartelcStaffScanner{aspect-ratio:4/3}
#cartelcStaffScanner video{width:100%!important;height:auto!important}

/* History list */
.cartelc-hlist{display:flex;flex-direction:column;gap:10px}
.cartelc-hrow{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border:1px solid #f1f5f9;border-radius:14px;padding:12px;background:#fff}
@media (max-width:640px){.cartelc-hrow{flex-direction:column}}
.cartelc-hmeta{font-size:12px;color:#6b7280;margin-top:2px}
.cartelc-hamt{font-size:18px;font-weight:900;white-space:nowrap}

/* Customer card (staff) */
.cartelc-custcard{border:1px solid #eef2f7;background:#f9fafb;border-radius:14px;padding:12px;margin-bottom:12px}
.cartelc-custcard__row{display:flex;justify-content:space-between;gap:12px;align-items:center}
@media (max-width:640px){.cartelc-custcard__row{flex-direction:column;align-items:flex-start}}
.cartelc-custcard__who{font-size:16px}
.cartelc-custcard__bal{font-size:20px;font-weight:900;white-space:nowrap}
.cartelc-custcard__meta{font-size:12px;color:#6b7280;margin-top:6px}

/* Modal */
.cartelc-modal{position:fixed;inset:0;display:none;z-index:9999}
.cartelc-modal.is-open{display:block}
.cartelc-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.cartelc-modal__panel{position:relative;max-width:520px;margin:10vh auto 0;background:#fff;border-radius:18px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.cartelc-modal__panel{max-height:80vh;overflow:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){.cartelc-modal__panel{max-height:88vh;margin:6vh 10px 0}}
@media (max-width:640px){.cartelc-modal__panel{margin:12vh 12px 0}}
.cartelc-modal__title{font-weight:900;font-size:18px;margin-bottom:8px}
.cartelc-modal__amount{font-weight:1000;font-size:34px;margin:8px 0}
.cartelc-modal__actions{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
@media (max-width:640px){.cartelc-modal__actions{flex-direction:column}.cartelc-modal__actions .cartelc-btn{width:100%}}

/* Staff scan modal tweaks */
.cartelc-modal__body video{width:100%;border-radius:14px;background:#000}

.cartelc-btn[disabled]{opacity:.45;cursor:not-allowed}


/* --- Tip (trinkgelt) UI --- */
.cartelc-tipbox{margin-top:14px;padding:12px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:rgba(0,0,0,.02)}
.cartelc-tipbox__title{font-weight:700;margin-bottom:8px}
.cartelc-tipbox__chips{display:flex;flex-wrap:wrap;gap:8px}
.cartelc-chip{border:1px solid rgba(0,0,0,.18);background:#fff;border-radius:999px;padding:8px 12px;font-weight:700;cursor:pointer;transition:all .15s ease}
.cartelc-chip:hover{transform:translateY(-1px)}
.cartelc-chip.is-active{border-color:rgba(0,0,0,.75);box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.cartelc-tipbox__custom{margin-top:10px}
.cartelc-tipbox__custom input{width:100%;max-width:260px;padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.18)}
.cartelc-tipbox__thanks{margin-top:10px;font-weight:800}
.cartelc-modal__total{margin-top:12px;padding-top:12px;border-top:1px dashed rgba(0,0,0,.16);display:flex;align-items:baseline;justify-content:space-between}

/* --- Customer toast --- */
#cartelcToastHost{position:fixed;top:16px;right:16px;z-index:99999;display:flex;flex-direction:column;gap:10px;max-width:360px}
.cartelc-toast{opacity:0;transform:translateY(-8px);transition:all .18s ease}
.cartelc-toast.is-show{opacity:1;transform:translateY(0)}
.cartelc-toast.is-hide{opacity:0;transform:translateY(-8px)}


/* Tabs */
.cartelc-tabs{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.cartelc-tab{appearance:none;border:1px solid #e6e6e6;background:#fafafa;border-radius:999px;padding:8px 12px;font-weight:700;cursor:pointer}
.cartelc-tab.is-active{background:#111;color:#fff;border-color:#111}
.cartelc-pane{display:none}
.cartelc-pane.is-active{display:block}

/* Accordion */
.cartelc-acc{border:1px solid #eee;border-radius:14px;overflow:hidden;background:#fff}
.cartelc-acc__btn{width:100%;text-align:left;border:0;background:#fafafa;padding:12px 14px;font-weight:800;cursor:pointer;border-top:1px solid #eee}
.cartelc-acc__btn:first-child{border-top:0}
.cartelc-acc__btn.is-open{background:#f1f5f9}
.cartelc-acc__panel{display:none;padding:12px 14px;border-top:1px solid #eee}

/* POS-like staff layout */
.cartelc-pos{max-width:560px;margin:0 auto}
.cartelc-pos__scan{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:12px 0}
.cartelc-row{display:flex;gap:10px;align-items:center}
.cartelc-row > *{flex:1}
.cartelc-btn--xl{font-size:18px;padding:14px 16px;border-radius:14px}

/* Bigger staff controls (POS-friendly) */
.cartelc-staff{font-size:18px}
.cartelc-staff__cam,.cartelc-staff__form{padding:18px}
.cartelc-staff input[type="text"],
.cartelc-staff input[type="number"],
.cartelc-staff select{
  font-size:18px;
  padding:10px 12px;
  border-radius:12px;
}
.cartelc-staff__btns .cartelc-btn{font-size:18px;padding:14px 16px;border-radius:14px}
.cartelc-tab{font-size:16px;padding:12px 14px}

/* Customer terminal */