/* shared pieces for the customer panel, text pages, sign-in and footer */
:root{--inp:#f0f2f6}html[data-theme=dark]{--inp:#0c1322}
.logo{background:none;border-radius:0}.logo svg{width:100%;height:100%;display:block}
.field textarea{width:100%;min-height:130px;border:1.5px solid var(--line);border-radius:14px;padding:12px 16px;background:var(--field);font-size:15px;line-height:1.9;resize:vertical}
.field textarea:focus{outline:0;border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 20%,transparent)}
.st{display:inline-block;padding:1px 12px;border-radius:99px;font-size:12.5px;background:var(--inp);white-space:nowrap}
.st.fulfilled,.st.succeeded,.st.paid,.st.answered{background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok)}
.st.failed,.st.refunded{background:color-mix(in srgb,var(--bad) 14%,var(--card));color:var(--bad)}
.st.pending_payment,.st.pending,.st.processing,.st.needs_review,.st.open,.st.queued,.st.submitted{background:color-mix(in srgb,var(--warn) 16%,var(--card));color:var(--warn)}
.flash{padding:12px 14px;border-radius:12px;font-size:14px;margin:0 0 14px;background:color-mix(in srgb,var(--ok) 13%,var(--card));color:var(--ok)}
.flash.err{background:color-mix(in srgb,var(--bad) 12%,var(--card));color:var(--bad)}
.note.warn{background:color-mix(in srgb,var(--warn) 14%,var(--card));color:var(--warn)}
/* footer */
.ft{margin-top:48px;padding:0;border-top:1px solid var(--line);background:var(--card);color:var(--mut);font-size:13.5px}
.ft .ft-g{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:28px;padding:30px 0 22px;align-items:start;flex-direction:initial;text-align:right}
.ft h3{font-size:14.5px;color:var(--ink);margin:0 0 10px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ft a:hover{color:var(--c)}
.ft .ft-b p{margin:10px 0 0;max-width:320px;line-height:2}
.ft .ft-e{min-width:110px;display:flex;gap:10px;align-items:flex-start}
.ft .ft-e a{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:14px;padding:6px}
.ft .ft-e img{display:block;max-width:104px;max-height:120px;height:auto}
.ft .ft-c{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:14px 0;border-top:1px solid var(--line);font-size:12.5px}
@media(max-width:860px){.ft .ft-g{grid-template-columns:1fr 1fr;gap:22px}.ft .ft-b,.ft .ft-e{grid-column:1/-1}.ft .ft-e{justify-content:center}.ft .ft-c{justify-content:center;text-align:center}}
/* text pages */
.doc{max-width:820px;margin:26px auto;padding:28px}
.doc h1{font-size:22px;margin:0 0 14px}
.doc h2{font-size:16.5px;margin:22px 0 6px;color:var(--ink)}
.doc p,.doc li{color:var(--mut);font-size:15px;text-align:justify}
.doc p{margin:0 0 10px}.doc ul{margin:0 0 10px;padding-inline-start:22px}
@media(max-width:560px){.doc{padding:20px 16px;margin:16px auto}}
/* sign-in */
.auth{max-width:440px;margin:28px auto;padding:24px}
.auth h1{font-size:19px;margin:0 0 4px}.auth>p{color:var(--mut);font-size:14px;margin:0 0 16px}
.auth .seg{margin-bottom:16px}
.auth form[hidden]{display:none}
.auth .field input{text-align:center;background:var(--inp)}
/* customer panel */
.up{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;margin-top:22px;align-items:start}
.up-side{padding:14px;position:sticky;top:84px}
.up-me{padding:6px 8px 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
.up-me b{display:block;font-size:15.5px}.up-me span{color:var(--mut);font-size:14px}
.up-bal{background:var(--cs);border-radius:14px;padding:10px 12px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--mut)}
.up-bal b{display:block;color:var(--ink);font-size:16px}
.up-bal a{background:var(--c);color:#fff;border-radius:10px;padding:4px 12px;font-size:13px;white-space:nowrap}
.up-nav{display:grid;gap:2px}
.up-nav a,.up-nav button{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;color:var(--mut);font-size:14.5px;border:0;background:none;width:100%;text-align:right;cursor:pointer}
.up-nav a:hover,.up-nav a.on{background:var(--cs);color:var(--ink)}
.up-nav .cnt{margin-inline-start:auto;background:var(--c);color:#fff;border-radius:99px;font-size:11.5px;padding:0 8px}
.up-nav button{color:var(--bad)}
.box{padding:18px 18px 14px;margin-bottom:16px}
.box>h2{font-size:16.5px;margin:0 0 12px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.box>h2 a{font-size:13px;color:var(--c);font-weight:400}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.kpi{padding:14px 16px}.kpi span{color:var(--mut);font-size:13px;display:block}.kpi b{font-size:19px}.kpi small{display:block;color:var(--mut);font-size:12px}
.qk{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.qk a{border:1px solid var(--line);border-radius:14px;padding:12px 8px;text-align:center;font-size:14px;background:var(--field)}.qk a:hover{border-color:var(--c);background:var(--cs)}
.rt{width:100%;border-collapse:collapse;font-size:14px}
.rt th{text-align:right;color:var(--mut);font-weight:400;font-size:12.5px;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.rt td{padding:10px 8px;border-bottom:1px dashed var(--line);vertical-align:middle}
.rt tr:last-child td{border-bottom:0}
.acts{display:flex;flex-wrap:wrap;gap:6px}
.sb{border:1px solid var(--line);border-radius:9px;padding:2px 10px;font-size:12.5px;color:var(--c);background:var(--field);white-space:nowrap;cursor:pointer}
.sb:hover{border-color:var(--c)}
.empty{padding:22px 12px;text-align:center;color:var(--mut);font-size:14px;border:1.5px dashed var(--line);border-radius:14px}
.pager{display:flex;justify-content:center;gap:8px;margin-top:12px;font-size:13.5px}.pager a,.pager span{border:1px solid var(--line);border-radius:10px;padding:4px 14px}.pager span{color:var(--mut)}
.m{max-width:86%;padding:10px 14px;border-radius:14px;margin-bottom:10px;background:var(--inp);white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px}
.m.staff{background:var(--cs);margin-inline-start:auto}
.m small{display:block;color:var(--mut);font-size:12px;margin-bottom:2px}
.amq{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:860px){
.up{grid-template-columns:1fr;gap:14px;margin-top:14px}
.up-side{position:static;padding:10px}
.up-me{display:none}
.up-nav{display:flex;overflow-x:auto;gap:6px;scrollbar-width:none}.up-nav::-webkit-scrollbar{display:none}
.up-nav a,.up-nav button{flex:none;width:auto;white-space:nowrap;border:1px solid var(--line);padding:7px 12px;font-size:13.5px}
.up-nav form{flex:none}
.kpis{grid-template-columns:1fr 1fr}.kpis .kpi:first-child{grid-column:1/-1}
.qk{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
.rt thead{display:none}
.rt tr{display:block;border:1px solid var(--line);border-radius:14px;padding:4px 12px;margin-bottom:10px}
.rt td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;text-align:left}
.rt td::before{content:attr(data-l);color:var(--mut);font-size:12.5px;flex:none;text-align:right}
.rt td:empty{display:none}
.box{padding:14px 12px 10px}
.g2{grid-template-columns:1fr}
.m{max-width:94%}
}