/* Satqo dashboard theme: night palette of satqo.com on top of Bootstrap 4.6.
   Tokens first, then the shell (sidebar, top bar), then Bootstrap components. */
:root{
  color-scheme:light;
  --bg:#EEF3F4; --surface:#FFFFFF; --surface-2:#E6EEF0; --surface-3:#D9E4E7;
  --ink:#0E1A1E; --ink-70:#3E4F55; --ink-50:#66787E;
  --lime:#7FDDF5; --lime-ink:#062B38; --lime-hover:#A0E7F8; --lime-soft:rgba(127,221,245,.26);
  --accent-text:#0B6A85; --pos:#0B6A85; --soft:rgba(6,43,56,.07);
  --amber:#9A6200; --red:#C2342C; --blue:#2C5BC9;
  --rule:rgba(14,26,30,.12); --rule-strong:rgba(14,26,30,.22);
  --shadow:0 24px 60px -24px rgba(14,26,30,.30);
  --radius:22px; --side:236px;
  --font:Archivo,system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
/* Dark: follows the system unless the account chose light; data-theme="dark" forces it */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#081014; --surface:#0F1A1F; --surface-2:#152329; --surface-3:#1C2E35;
    --ink:#EAF4F7; --ink-70:#A9BEC5; --ink-50:#7E949B;
    --lime-soft:rgba(127,221,245,.14); --accent-text:#7FDDF5; --pos:#7FDDF5; --soft:rgba(234,244,247,.07);
    --amber:#E7B46A; --red:#FF8F87; --blue:#8FB8FF;
    --rule:rgba(234,244,247,.10); --rule-strong:rgba(234,244,247,.20);
    --shadow:0 24px 60px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#081014; --surface:#0F1A1F; --surface-2:#152329; --surface-3:#1C2E35;
  --ink:#EAF4F7; --ink-70:#A9BEC5; --ink-50:#7E949B;
  --lime-soft:rgba(127,221,245,.14); --accent-text:#7FDDF5; --pos:#7FDDF5; --soft:rgba(234,244,247,.07);
  --amber:#E7B46A; --red:#FF8F87; --blue:#8FB8FF;
  --rule:rgba(234,244,247,.10); --rule-strong:rgba(234,244,247,.20);
  --shadow:0 24px 60px -20px rgba(0,0,0,.8);
}
html,body{background:var(--bg)}
body{color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-decoration-color:var(--lime)}
a:hover{color:var(--accent-text);text-decoration:none}
code,kbd,pre,samp,.font-monospace,.mono{font-family:var(--mono)}
code{color:var(--accent-text);background:var(--lime-soft);border-radius:6px;padding:1px 6px;font-size:.88em}
hr{border-color:var(--rule)}
::selection{background:var(--lime);color:var(--lime-ink)}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
h1,h2,h3,h4,h5,h6{color:var(--ink);font-weight:800;letter-spacing:-.02em}
.text-muted,.form-text,small.text-muted{color:var(--ink-50)!important}
.text-primary{color:var(--accent-text)!important}
.text-success{color:var(--accent-text)!important}
.text-warning{color:var(--amber)!important}
.text-danger{color:var(--red)!important}
.text-info{color:var(--blue)!important}
.text-dark,.text-black{color:var(--ink)!important}
.text-white{color:var(--ink)!important}
.bg-light,.bg-white{background:var(--surface-2)!important;color:var(--ink)}
.bg-primary{background:var(--lime)!important;color:var(--lime-ink)!important}
.border,.border-top,.border-bottom,.border-left,.border-right{border-color:var(--rule)!important}
.font-weight-bold,.font-weight-medium{font-weight:700!important}
.tnum,.table td,.balance-num{font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
.sq-shell{display:flex;min-height:100vh}
.sq-side{position:fixed;inset:0 auto 0 0;width:var(--side);background:var(--bg);border-right:1px solid var(--rule);display:flex;flex-direction:column;padding:22px 16px 18px;z-index:1030;overflow-y:auto}
.sq-side .brand{display:flex;align-items:center;padding:4px 10px 26px}
.sq-side .brand img{height:30px;width:auto;display:block}
.sq-nav{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.sq-nav .grp{font-size:12.5px;color:var(--ink-50);font-weight:600;padding:18px 12px 6px}
.sq-nav a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:var(--ink-70);font-weight:500;font-size:15px;text-decoration:none}
.sq-nav a .mdi{font-size:19px;line-height:1;width:20px;text-align:center;color:var(--ink-50)}
.sq-nav a:hover{background:var(--surface);color:var(--ink)}
.sq-nav a.active{background:var(--surface-2);color:var(--ink)}
.sq-nav a.active .mdi{color:var(--accent-text)}
.sq-nav .tag{margin-left:auto;font-size:11px;font-weight:700;color:var(--lime-ink);background:var(--lime);border-radius:999px;padding:1px 8px}
.sq-side .foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--rule)}
.sq-main{flex:1;margin-left:var(--side);min-width:0;display:flex;flex-direction:column}
.sq-top{position:sticky;top:0;z-index:1020;display:flex;align-items:center;gap:14px;height:68px;padding:0 32px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.sq-top .burger{display:none;flex:none;aspect-ratio:1;padding:0;-webkit-appearance:none;appearance:none;background:none;border:1px solid var(--rule-strong);border-radius:50%;width:40px;height:40px;color:var(--ink);align-items:center;justify-content:center;font-size:22px;line-height:1}
.sq-top .spacer{flex:1}
.sq-top .who{display:flex;align-items:center;gap:10px;background:none;border:1px solid var(--rule);border-radius:999px;padding:4px 12px 4px 4px;color:var(--ink)}
.sq-top .who:hover{border-color:var(--rule-strong)}
.sq-top .avatar{width:32px;height:32px;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;font-weight:800;font-size:13px}
.sq-top .who .nm{font-size:14px;font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq-content{padding:32px;flex:1;max-width:1320px;width:100%}
.sq-footer{padding:18px 32px 28px;color:var(--ink-50);font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--rule)}
.sq-footer a{color:var(--ink-70)}
.sq-scrim{display:none}
@media (max-width:991px){
  .sq-side{transform:translateX(-100%);transition:transform .2s ease}
  body.nav-open .sq-side{transform:none}
  body.nav-open .sq-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1025}
  .sq-main{margin-left:0}
  .sq-top{padding:0 16px}
  .sq-top .burger{display:inline-flex}
  .sq-top .who .nm{display:none}
  .sq-content{padding:22px 16px}
  .sq-footer{padding:16px}
}
@media (prefers-reduced-motion:reduce){.sq-side{transition:none}}

/* page header used by every page template */
.page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 24px;padding:0;border:0}
.page-header h3,.page-header .page-title{font-size:28px;font-weight:800;letter-spacing:-.03em;margin:0}
.grid-margin{margin-bottom:24px}
.stretch-card{display:flex;align-items:stretch}
.stretch-card>.card{width:100%}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);color:var(--ink)}
.card-body{padding:24px}
.card-header,.card-footer{background:transparent;border-color:var(--rule)}
.card-title,.card .card-title{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin-bottom:16px;text-transform:none}
.card-description{color:var(--ink-50)}
.color-card,.card.color-card{background:var(--surface)!important;border:1px solid var(--rule);color:var(--ink)}
.color-card *{color:inherit}

/* ---------- buttons ---------- */
.btn{border-radius:999px;font-weight:600;font-size:14.5px;padding:9px 18px;border-width:1.5px;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background .15s,border-color .15s,color .15s}
.btn .mdi{font-size:17px;line-height:1}
.btn-sm{font-size:13.5px;padding:6px 14px}
.btn-lg{font-size:16px;padding:13px 26px}
.btn:focus,.btn.focus{box-shadow:none}
.btn-primary,.btn-success{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.btn-primary:hover,.btn-success:hover,.btn-primary:focus,.btn-success:focus,.btn-primary:not(:disabled):not(.disabled):active{background:var(--lime-hover);border-color:var(--lime-hover);color:var(--lime-ink)}
.btn-secondary,.btn-light,.btn-info,.btn-dark{background:var(--surface-2);border-color:var(--rule-strong);color:var(--ink)}
.btn-secondary:hover,.btn-light:hover,.btn-info:hover,.btn-dark:hover{background:var(--surface-3);border-color:var(--rule-strong);color:var(--ink)}
.btn-warning{background:transparent;border-color:color-mix(in srgb,var(--amber) 55%,transparent);color:var(--amber)}
.btn-warning:hover{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber)}
.btn-danger{background:transparent;border-color:color-mix(in srgb,var(--red) 50%,transparent);color:var(--red)}
.btn-danger:hover{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.btn-outline-primary,.btn-outline-secondary,.btn-outline-success,.btn-outline-info,.btn-outline-dark,.btn-outline-light{background:transparent;border-color:var(--rule-strong);color:var(--ink)}
.btn-outline-primary:hover,.btn-outline-secondary:hover,.btn-outline-success:hover,.btn-outline-info:hover,.btn-outline-dark:hover,.btn-outline-light:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled).active{background:var(--surface-2);border-color:var(--ink-50);color:var(--ink)}
.btn-outline-danger{border-color:color-mix(in srgb,var(--red) 50%,transparent);color:var(--red)}
.btn-outline-danger:hover{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red);border-color:color-mix(in srgb,var(--red) 50%,transparent)}
.btn-outline-warning{border-color:color-mix(in srgb,var(--amber) 55%,transparent);color:var(--amber)}
.btn-outline-warning:hover{background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--amber)}
.btn-link{color:var(--ink-70);border-color:transparent;text-decoration:underline;text-decoration-color:var(--rule-strong);text-underline-offset:3px}
.btn-link:hover{color:var(--ink)}
.btn-group>.btn{border-radius:10px}
.btn-group>.btn:not(:first-child){margin-left:-1.5px}
.btn.disabled,.btn:disabled{opacity:.45}
.close{color:var(--ink);text-shadow:none;opacity:.6}
.close:hover{color:var(--ink);opacity:1}

/* ---------- forms ---------- */
label{color:var(--ink-70);font-size:13.5px;font-weight:600;margin-bottom:6px}
.form-group{margin-bottom:18px}
.form-control,.custom-select,select.form-control{background:var(--bg);border:1px solid var(--rule-strong);border-radius:12px;color:var(--ink);font-size:15px;height:auto;padding:11px 14px}
.form-control:focus,.custom-select:focus{background:var(--bg);border-color:var(--lime);color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 15%,transparent)}
.form-control::placeholder{color:var(--ink-50);opacity:.8}
.form-control:disabled,.form-control[readonly]{background:var(--surface-2);color:var(--ink-70);opacity:1}
select.form-control option{background:var(--surface);color:var(--ink)}
.input-group>.form-control:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}
.input-group>.input-group-append>.btn,.input-group>.input-group-append>.input-group-text{border-top-left-radius:0;border-bottom-left-radius:0;border-radius:0 12px 12px 0}
.input-group>.input-group-prepend>.input-group-text{border-radius:12px 0 0 12px}
.input-group-append .btn+.btn{border-radius:0}
.input-group-append .btn:last-child{border-radius:0 12px 12px 0}
.input-group-text{background:var(--surface-2);border:1px solid var(--rule-strong);color:var(--ink-70)}
.custom-control-label::before{background:var(--bg);border-color:var(--rule-strong)}
.custom-control-input:checked~.custom-control-label::before{background:var(--lime);border-color:var(--lime)}
.form-check-input{accent-color:var(--lime)}
.invalid-feedback{color:var(--red)}
.is-invalid{border-color:var(--red)!important}

/* ---------- tables ---------- */
.table{color:var(--ink);margin-bottom:0}
.table thead th{border-top:0;border-bottom:1px solid var(--rule);color:var(--ink-50);font-size:12.5px;font-weight:600;letter-spacing:.01em;padding:12px 14px;text-transform:none;white-space:nowrap}
.table td,.table th{border-top:1px solid var(--rule);padding:13px 14px;vertical-align:middle}
.table-hover tbody tr:hover{background:var(--surface-2);color:var(--ink)}
.table-striped tbody tr:nth-of-type(odd){background:color-mix(in srgb,var(--ink) 2%,transparent)}
.table-bordered,.table-bordered td,.table-bordered th{border-color:var(--rule)}
.table .text-break,.table code{word-break:break-all}

/* ---------- badges ---------- */
.badge{border-radius:999px;font-weight:700;font-size:11.5px;padding:4px 10px;letter-spacing:.01em}
.badge-success,.badge-primary{background:var(--lime-soft);color:var(--accent-text)}
.badge-warning{background:color-mix(in srgb,var(--amber) 14%,transparent);color:var(--amber)}
.badge-danger{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.badge-info{background:color-mix(in srgb,var(--blue) 14%,transparent);color:var(--blue)}
.badge-secondary,.badge-light,.badge-dark{background:var(--surface-3);color:var(--ink-70)}
.badge-pill{border-radius:999px}

/* ---------- alerts ---------- */
.alert{border-radius:14px;border:1px solid var(--rule);background:var(--surface-2);color:var(--ink)}
.alert-success{border-color:color-mix(in srgb,var(--lime) 35%,transparent);background:var(--lime-soft);color:var(--ink)}
.alert-warning{border-color:color-mix(in srgb,var(--amber) 40%,transparent);background:color-mix(in srgb,var(--amber) 10%,transparent);color:var(--ink)}
.alert-danger{border-color:color-mix(in srgb,var(--red) 40%,transparent);background:color-mix(in srgb,var(--red) 10%,transparent);color:var(--ink)}
.alert-info{border-color:color-mix(in srgb,var(--blue) 35%,transparent);background:color-mix(in srgb,var(--blue) 8%,transparent);color:var(--ink)}

/* ---------- modals, dropdowns, tabs, pagination ---------- */
.modal-content{background:var(--surface);border:1px solid var(--rule-strong);border-radius:20px;color:var(--ink)}
.modal-header,.modal-footer{border-color:var(--rule)}
.modal-header{padding:20px 24px}
.modal-body{padding:24px}
.modal-footer{padding:16px 24px}
.modal-title{font-weight:800;letter-spacing:-.02em;font-size:20px}
.modal-backdrop.show{opacity:.7;background:#000}
.dropdown-menu{background:var(--surface-2);border:1px solid var(--rule-strong);border-radius:14px;padding:6px;box-shadow:var(--shadow)}
.dropdown-item{color:var(--ink);border-radius:9px;padding:8px 12px;font-size:14.5px}
.dropdown-item:hover,.dropdown-item:focus{background:var(--surface-3);color:var(--ink)}
.dropdown-item.active,.dropdown-item:active{background:var(--lime);color:var(--lime-ink)}
.dropdown-divider{border-color:var(--rule)}
.dropdown-header{color:var(--ink-50)}
.nav-tabs{border-bottom:1px solid var(--rule);gap:4px}
.nav-tabs .nav-link{border:0;border-bottom:2px solid transparent;border-radius:0;color:var(--ink-70);font-weight:600;padding:10px 14px;background:transparent}
.nav-tabs .nav-link:hover{color:var(--ink);border-color:transparent}
.nav-tabs .nav-link.active,.nav-tabs .nav-item.show .nav-link{background:transparent;color:var(--ink);border-bottom-color:var(--lime)}
.nav-pills .nav-link{border-radius:999px;color:var(--ink-70)}
.nav-pills .nav-link.active{background:var(--lime);color:var(--lime-ink)}
.tab-content{padding-top:20px}
.page-link{background:var(--surface);border-color:var(--rule);color:var(--ink-70)}
.page-link:hover{background:var(--surface-2);border-color:var(--rule);color:var(--ink)}
.page-item.active .page-link{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.page-item.disabled .page-link{background:var(--surface);border-color:var(--rule);color:var(--ink-50)}
.page-item:first-child .page-link{border-radius:10px 0 0 10px}
.page-item:last-child .page-link{border-radius:0 10px 10px 0}
.progress{background:var(--surface-2);border-radius:999px}
.progress-bar{background:var(--lime)}
.spinner-border{color:var(--accent-text)}
.list-group-item{background:var(--surface);border-color:var(--rule);color:var(--ink)}
.popover,.tooltip-inner{background:var(--surface-3);color:var(--ink)}

/* ---------- Satqo components ---------- */
.sq-card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:24px}
.sq-card h2{font-size:17px;font-weight:700;margin:0 0 4px}
.sq-card .sub{color:var(--ink-50);font-size:13.5px}
.sq-kpi{font-family:var(--mono);font-weight:700;font-size:44px;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.sq-kpi small{font-family:var(--font);font-size:16px;font-weight:600;color:var(--ink-50);letter-spacing:0;margin-left:8px}
.sq-chip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule);border-radius:999px;padding:6px 12px;font-size:13.5px;color:var(--ink-70)}
.sq-chip b{color:var(--ink);font-family:var(--mono);font-weight:600}
.sq-dot{width:8px;height:8px;border-radius:50%;background:var(--ink-50);display:inline-block}
.sq-dot.ok{background:var(--lime)} .sq-dot.warn{background:var(--amber)} .sq-dot.bad{background:var(--red)}
.sq-empty{border:1px dashed var(--rule-strong);border-radius:var(--radius);padding:28px;text-align:center;color:var(--ink-70)}
.sq-empty h3{font-size:18px;margin:0 0 6px}
.sq-empty p{margin:0 auto 16px;max-width:46ch;color:var(--ink-50)}
.sq-steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.sq-steps li{display:grid;grid-template-columns:28px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--rule)}
.sq-steps li:first-child{border-top:0}
.sq-steps .n{width:28px;height:28px;border-radius:50%;border:1.5px solid var(--rule-strong);display:grid;place-items:center;font-family:var(--mono);font-size:12.5px;color:var(--ink-70)}
.sq-steps li.done .n{background:var(--lime);border-color:var(--lime);color:var(--lime-ink)}
.sq-steps b{display:block;font-weight:700}
.sq-steps span.sub{color:var(--ink-50);font-size:13.5px}
.sq-steps .n{flex:none}
/* Narrow screens (phones, Telegram): the step's buttons go under its text instead of squeezing it */
@media (max-width:575px){
  .sq-steps li{grid-template-columns:28px 1fr;align-items:start;row-gap:10px}
  .sq-steps li > :nth-child(3){grid-column:2}
  .sq-steps .n{margin-top:1px}
}
.sq-track{position:relative;height:1.5px;background:var(--rule-strong);margin:18px 6px 0}
.sq-track .fill{position:absolute;left:0;top:0;height:100%;background:var(--lime)}
.sq-stops{display:flex;justify-content:space-between;margin-top:-7px}
.sq-stop{position:relative;padding-top:22px;min-width:96px;font-size:13px}
.sq-stop::before{content:"";position:absolute;top:0;left:0;width:12px;height:12px;border-radius:50%;background:var(--bg);border:1.5px solid var(--ink-50)}
.sq-stop.done::before{background:var(--ink);border-color:var(--ink)}
.sq-stop.now::before{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 5px color-mix(in srgb,var(--lime) 20%,transparent)}
.sq-stop .t{font-family:var(--mono);font-size:12px;color:var(--ink-50)}
.sq-stop .l{font-weight:600;margin-top:2px}
.sq-stop:last-child{text-align:right}.sq-stop:last-child::before{left:auto;right:0}
.sq-assets{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sq-mono{font-family:var(--mono)}
.sq-grid{display:grid;gap:20px}
.sq-grid.two{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
@media (max-width:1100px){.sq-grid.two{grid-template-columns:minmax(0,1fr)}}
.sq-row-link{color:inherit}
.sq-row-link:hover{color:var(--accent-text)}
.sq-hint{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:var(--surface-2);color:var(--ink-70);font-size:14px}
.sq-hint .mdi{color:var(--accent-text);font-size:18px;line-height:1.2}

/* ---------- card page ---------- */
.sq-plastic{position:relative;aspect-ratio:1.586;width:100%;max-width:420px;border-radius:22px;padding:24px 26px;overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--lime) 16%,transparent),transparent 55%),linear-gradient(155deg,#17323C 0%,#0C1C22 62%,#081216 100%);
  border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);box-shadow:0 30px 60px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);
  display:flex;flex-direction:column;justify-content:space-between;transition:filter .3s}
.sq-plastic .row1{display:flex;justify-content:space-between;align-items:flex-start}
.sq-plastic .wm{height:24px;width:auto}
.sq-plastic .arcs{width:52px;height:52px;margin:-6px -6px 0 0}
.sq-plastic .arcs path{stroke:var(--lime);stroke-width:5;fill:none;stroke-linecap:round}
.sq-plastic .bal{font-family:var(--mono);font-weight:700;font-size:34px;letter-spacing:-.04em;line-height:1;min-height:34px;font-variant-numeric:tabular-nums}
.sq-plastic .meta{display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-size:14px;color:var(--ink-70);letter-spacing:.08em}
.sq-plastic .kind{font-family:var(--font);font-size:12px;letter-spacing:.02em;color:var(--ink-50)}
.sq-plastic .brandrow{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.sq-plastic .mc-mark{width:48px;height:auto;display:block}
.sq-plastic .frost{position:absolute;inset:0;display:none;place-items:center;background:rgba(8,16,20,.35);font-weight:700;font-size:14px}
.sq-plastic.is-frozen{filter:grayscale(1) brightness(.7)}
.sq-plastic.is-frozen .frost{display:grid}
.sq-plastic.ghost{opacity:.85;border-style:dashed}
@keyframes sqPing{0%{opacity:1}40%{opacity:.25}100%{opacity:1}}
.sq-plastic.pinged .arcs path{animation:sqPing .9s ease 2}
.sq-plastic.pinged .arcs path:nth-child(2){animation-delay:.12s}
.sq-plastic.pinged .arcs path:nth-child(3){animation-delay:.24s}
.sq-card-intro .sq-plastic{max-width:360px}

.sq-kv{list-style:none;margin:0;padding:0}
.sq-kv li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--rule);font-size:14px}
.sq-kv li:first-child{border-top:0}
.sq-kv li>span{color:var(--ink-50)}
.sq-kv li>b{font-weight:600;text-align:right}
.sq-details li>b{margin-left:auto}

.sq-card-hero{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:28px;align-items:stretch;margin-bottom:28px}
.sq-pockets{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:18px}
.sq-pockets .pocket{display:flex;flex-direction:column;gap:2px}
.sq-pockets .lb{font-size:13.5px;color:var(--ink-50);font-weight:600}
.sq-pockets .v{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.03em;font-size:40px;line-height:1.1}
.sq-pockets .v.sm{font-size:24px}
.sq-pockets .note{color:var(--ink-50);font-size:13.5px}
.sq-pockets .flow{display:flex;align-items:center;gap:12px;color:var(--ink-50);font-size:13px}
.sq-pockets .flow .line{flex:1;height:1.5px;background:linear-gradient(90deg,var(--rule-strong),var(--lime))}
.sq-pockets .flow .mdi{color:var(--accent-text);font-size:18px}
.sq-pockets .acts{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:auto}
.sq-chip.off{opacity:.55}

.sq-card-lower{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
.sq-card-side{display:grid;gap:24px}
.sq-panel-h{padding:20px 24px 8px;gap:12px}
.sq-num{font-weight:700;font-size:22px;letter-spacing:-.03em}
.sq-day{padding:14px 24px 4px;font-size:12.5px;font-weight:600;color:var(--ink-50)}
.sq-tx{display:grid;grid-template-columns:52px 34px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 24px;border-top:1px solid var(--rule)}
.sq-day+.sq-tx{border-top:0}
.sq-tx .t{font-family:var(--mono);font-size:12.5px;color:var(--ink-50)}
.sq-tx .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-70);font-size:17px}
.sq-tx .ic.in{background:var(--lime-soft);color:var(--accent-text)}
.sq-tx .ic.bad{background:color-mix(in srgb,var(--red) 12%,transparent);color:var(--red)}
.sq-tx .what{min-width:0}
.sq-tx .what b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq-tx .what span{font-size:13px;color:var(--ink-50)}
.sq-tx .amt{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.sq-tx .amt.plus{color:var(--accent-text)}
.sq-tx .amt.muted{color:var(--ink-50)}
.sq-tx .amt small{display:block;font-family:var(--font);font-weight:500;font-size:12.5px;color:var(--ink-50)}
.sq-tx .fix{grid-column:3/-1;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:-4px;color:var(--ink-50);font-size:13px}

.sq-src{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sq-src input{position:absolute;opacity:0;pointer-events:none}
.sq-src label{margin:0;display:flex;flex-direction:column;gap:2px;border:1.5px solid var(--rule-strong);border-radius:12px;padding:10px 12px;cursor:pointer;color:var(--ink);font-size:15px}
.sq-src label span{font-size:12.5px;color:var(--ink-50);font-weight:500;font-family:var(--mono)}
.sq-src input:checked+label{border-color:var(--lime);background:var(--lime-soft)}
.sq-src input:focus-visible+label{outline:2px solid var(--lime);outline-offset:2px}
.sq-amount{display:flex;align-items:center;gap:6px;border:1px solid var(--rule-strong);border-radius:12px;padding:6px 14px;background:var(--bg)}
.sq-amount:focus-within{border-color:var(--lime);box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 15%,transparent)}
.sq-amount span{font-family:var(--mono);font-size:26px;color:var(--ink-50)}
.sq-amount input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);font-family:var(--mono);font-size:26px;font-weight:700;padding:4px 0}
.sq-quick{display:flex;gap:6px;flex-wrap:wrap}
.sq-quick button{border:1px solid var(--rule);background:none;border-radius:999px;padding:4px 12px;font-size:13px;color:var(--ink-70);cursor:pointer;font-family:var(--mono)}
.sq-quick button:hover{border-color:var(--rule-strong);color:var(--ink)}
.sq-sum{list-style:none;margin:0;padding:14px 16px;border-radius:14px;background:var(--surface-2);display:grid;gap:8px;font-size:14px}
.sq-sum li{display:flex;justify-content:space-between;gap:12px}
.sq-sum li span{color:var(--ink-50)}
.sq-sum li b{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}
.sq-sum li.tot{border-top:1px solid var(--rule);padding-top:8px}
.sq-sum li.tot b{font-size:16px}
.sq-otp{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px;border:1px dashed var(--rule-strong);border-radius:14px;text-align:center}
.sq-otp .lb{font-size:13px;color:var(--ink-50);font-weight:600}
.sq-otp .code{font-size:32px;font-weight:700;letter-spacing:.08em;color:var(--ink-50)}
.sq-otp.live{border-style:solid;border-color:color-mix(in srgb,var(--lime) 45%,transparent);background:var(--lime-soft)}
.sq-otp.live .code{color:var(--accent-text)}
.sq-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);font-weight:600;border-radius:999px;padding:10px 18px;font-size:14px;box-shadow:0 10px 30px rgba(0,0,0,.5);z-index:2000;max-width:calc(100% - 32px)}
.sq-nav .amt{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--ink-50)}

@media (max-width:1100px){
  .sq-card-lower{grid-template-columns:minmax(0,1fr)}
  .sq-card-side{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
}
@media (max-width:991px){.sq-card-hero{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){
  .sq-plastic{padding:18px 20px;border-radius:18px}
  .sq-plastic .bal{font-size:28px}
  .sq-pockets{padding:20px}
  .sq-pockets .v{font-size:32px}
  .sq-pockets .acts .btn{flex:1}
  .sq-tx{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;padding:12px 16px}
  .sq-tx .ic{display:none}
  .sq-tx .fix{grid-column:2/-1}
  .sq-day{padding:14px 16px 4px}
  .sq-panel-h{padding:18px 16px 6px}
}
@media (prefers-reduced-motion:reduce){.sq-plastic.pinged .arcs path{animation:none}.sq-plastic{transition:none}}

/* ==========================================================================
   Wise-pattern shell and screens (aqua). Later rules override the earlier shell.
   ========================================================================== */
.sq-side{background:var(--surface);padding:24px 14px 16px}
.sq-side .brand{padding:2px 12px 26px;color:var(--ink)}
.sq-logo{display:block;height:30px;width:auto}
.sq-logo .arcs{stroke:var(--accent-text)}
.sq-nav a{border-radius:999px;padding:10px 14px;font-weight:600;color:var(--ink-70)}
.sq-nav a .mdi{color:var(--ink-70)}
.sq-nav a:hover{background:var(--soft);color:var(--ink)}
.sq-nav a.active{background:var(--soft);color:var(--ink)}
.sq-nav a.active .mdi{color:var(--ink)}
.sq-nav .amt{margin-left:auto;font-size:12.5px;color:var(--ink-50);font-variant-numeric:tabular-nums}
.sq-me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--rule);border-radius:0;color:var(--ink);text-decoration:none}
.sq-me:hover{color:var(--ink);background:var(--soft);border-radius:16px}
.sq-me .avatar,.sq-top .avatar{width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--lime-ink);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.sq-me .who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.sq-me .who b{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq-me .who small{color:var(--ink-50);font-size:12.5px}
.sq-top{border-bottom:0;height:76px;gap:12px}
.sq-search{flex:1;min-width:0;max-width:560px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--rule);border-radius:999px;padding:0 16px;height:44px}
.sq-search .mdi{font-size:20px;color:var(--ink-50)}
.sq-search input{flex:1;min-width:0;background:none;border:0;outline:none;color:var(--ink);font:inherit;font-size:15px}
.sq-search input::placeholder{color:var(--ink-50)}
.sq-search:focus-within{border-color:var(--accent-text);box-shadow:0 0 0 3px var(--lime-soft)}
.sq-iconbtn{width:44px;height:44px;flex:none;aspect-ratio:1;padding:0;border-radius:50%;border:1px solid var(--rule);background:none;-webkit-appearance:none;appearance:none;display:grid;place-items:center;color:var(--ink-70);font-size:22px;line-height:1}
.sq-iconbtn:hover{color:var(--ink);background:var(--soft)}
.sq-content{padding:8px 36px 40px}
@media (max-width:991px){.sq-content{padding:8px 16px 28px}.sq-search{height:40px;max-width:none}.sq-top .spacer{display:none}}

/* Buttons: pills that grow a little under the pointer (Wise), no borders on secondary */
.btn{transition:transform .15s ease,background .15s,border-color .15s,color .15s}
.btn:not(.btn-link):not(:disabled):hover{transform:scale(1.04)}
.btn:not(.btn-link):not(:disabled):active{transform:scale(.96)}
.btn-secondary,.btn-light,.btn-info,.btn-dark{background:var(--soft);border-color:transparent;color:var(--ink)}
.btn-secondary:hover,.btn-light:hover,.btn-info:hover,.btn-dark:hover{background:var(--surface-3);border-color:transparent}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover,.btn:active{transform:none!important}}
.card,.sq-card{border-radius:var(--radius)}
.page-header h3,.page-header .page-title{font-stretch:85%;font-size:32px}

/* Money numbers: condensed Archivo, not the mono face (mono stays for addresses and hashes) */
.sq-money{font-weight:800;font-stretch:72%;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:.95}

/* ---------- Home ---------- */
.sq-bal{display:flex;flex-direction:column;gap:2px;margin:6px 0 20px}
.sq-bal .lbl{font-size:14px;font-weight:600;color:var(--ink-50)}
.sq-bal .big{font-size:clamp(52px,7vw,76px)}
.sq-bal .big small{font-size:.5em;color:var(--ink-50);letter-spacing:0}
.sq-bal .sub{font-size:13.5px;color:var(--ink-50)}
.sq-arriving{color:var(--accent-text);font-weight:600;white-space:nowrap}
.sq-arriving .mdi{font-size:15px;vertical-align:-1px}
.sq-acts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px}
.sq-acts .btn{font-size:15.5px;padding:11px 20px}
.sq-jars{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;margin-bottom:28px;scrollbar-width:thin}
.sq-jar{flex:0 0 210px;background:var(--surface);border:1px solid var(--rule);border-radius:22px;padding:16px 16px 14px;display:flex;flex-direction:column;gap:2px;color:var(--ink);text-decoration:none}
.sq-jar:hover{color:var(--ink);border-color:var(--rule-strong)}
.sq-jar b{font-size:24px;margin-top:12px}
.sq-jar span{font-size:13.5px;color:var(--ink-70);font-weight:600}
.sq-jar em{font-style:normal;font-size:12.5px;color:var(--ink-50);margin-top:4px}
.sq-jar em.link{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent-text);text-underline-offset:3px;font-weight:600}
.sq-jar.card{background:var(--surface-2)}
.sq-jar.add{border-style:dashed;background:transparent;justify-content:center;align-items:flex-start}
.sq-coin{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:#fff;flex:none}
.sq-coin.sm{width:26px;height:26px;font-size:12px}
.sq-coin-img{width:36px;height:36px;border-radius:50%;flex:none;display:block;object-fit:cover}
.ic.has-img{background:none!important;padding:0;overflow:hidden}
.ic.has-img .sq-coin-img{width:100%;height:100%}
.sq-coin.c-USDT{background:#26A17B}.sq-coin.c-USDC{background:#2775CA}.sq-coin.c-BTC{background:#F7931A}.sq-coin.c-ETH{background:#627EEA}.sq-coin.c-TRX{background:#EF0027}.sq-coin.c-DAI{background:#F5AC37}.sq-coin.c-BNB{background:#F3BA2F;color:#1a1a1a}
.sq-mini-card{width:52px;height:34px;border-radius:7px;background:linear-gradient(155deg,#17323C,#081216);display:flex;align-items:center;justify-content:flex-end;padding-right:6px;color:#7FDDF5;font-size:15px}
.sq-list-h{display:flex;align-items:baseline;justify-content:space-between;margin:4px 0 6px}
.sq-list-h h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:0}
.sq-list-h a{font-weight:600;font-size:14px;text-decoration:underline;text-decoration-color:var(--accent-text);text-underline-offset:3px}

/* ---------- Activity rows (home and Payments) ---------- */
.sq-feed{display:flex;flex-direction:column}
.sq-feed .day{font-size:13px;font-weight:600;color:var(--ink-50);margin:14px 0 4px}
.sq-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:9px 10px;border-radius:16px;color:var(--ink);text-decoration:none;cursor:pointer;background:none;border:0;width:100%;text-align:left;font:inherit}
.sq-row:hover{background:var(--surface);color:var(--ink)}
.sq-row.sel{background:var(--surface);box-shadow:0 0 0 1px var(--rule)}
.sq-row .ic{width:44px;height:44px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;font-weight:800;color:var(--ink-70);font-size:19px}
.sq-row .ic.in{background:var(--lime-soft);color:var(--accent-text)}
.sq-row .ic.bad{background:color-mix(in srgb,var(--red) 14%,transparent);color:var(--red)}
.sq-row .what{display:flex;flex-direction:column;min-width:0}
.sq-row .what b{font-weight:600;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq-row .what span{font-size:13.5px;color:var(--ink-50);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq-row .amt{text-align:right;font-weight:600;font-size:15.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sq-row .amt small{display:block;font-weight:500;font-size:12.5px;color:var(--ink-50)}
.sq-row .amt.pos{color:var(--pos)}
.sq-row .amt.muted{color:var(--ink-50)}
.sq-chips{display:flex;gap:6px;flex-wrap:wrap}
.sq-chips a{border:1px solid var(--rule);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;color:var(--ink-70);text-decoration:none}
.sq-chips a:hover{color:var(--ink);border-color:var(--rule-strong)}
.sq-chips a.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ---------- Side panel with the tracker ---------- */
.sq-drawer-scrim{position:fixed;inset:0;background:rgba(8,16,20,.28);z-index:1040;opacity:0;pointer-events:none;transition:opacity .2s}
.sq-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);background:var(--surface);border-left:1px solid var(--rule);box-shadow:var(--shadow);z-index:1041;padding:max(16px,env(safe-area-inset-top)) 22px 24px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;transform:translateX(100%);transition:transform .22s ease}
body.drawer-open .sq-drawer{transform:none}
body.drawer-open .sq-drawer-scrim{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.sq-drawer,.sq-drawer-scrim{transition:none}}
.sq-drawer .dr-top{display:flex;justify-content:space-between;align-items:center;min-height:44px;margin-bottom:4px}
.sq-drawer .dr-ic:empty{width:44px;height:44px}
.sq-drawer .x{width:38px;height:38px;flex:none;aspect-ratio:1;padding:0;-webkit-appearance:none;appearance:none;border-radius:50%;background:var(--soft);border:0;color:var(--ink-70);font-size:20px;line-height:1;display:grid;place-items:center;cursor:pointer}
.sq-drawer .x:focus:not(:focus-visible){outline:none;box-shadow:none}
.sq-drawer .dr-amt{font-size:46px;line-height:1.05;margin-top:2px}
.sq-drawer .dr-amt.pos{color:var(--pos)}
.sq-drawer .dr-amt small{font-size:.45em;color:var(--ink-50)}
.sq-drawer .dr-sub{font-size:13.5px;color:var(--ink-50)}
.sq-tracker{list-style:none;margin:18px 0 6px;padding:0}
.sq-tracker li{position:relative;padding:0 0 16px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px}
.sq-tracker li::before{content:"";position:absolute;left:5px;top:8px;bottom:-4px;width:2px;background:var(--ink)}
.sq-tracker li:last-child::before{display:none}
.sq-tracker li.todo::before{background:var(--rule-strong)}
.sq-tracker li::after{content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;background:var(--ink)}
.sq-tracker li.now::after{background:var(--lime);box-shadow:0 0 0 5px var(--lime-soft)}
.sq-tracker li.todo::after{background:var(--surface);border:2px solid var(--rule-strong);width:12px;height:12px;box-sizing:border-box}
.sq-tracker li.bad::after{background:var(--red)}
.sq-tracker b{font-weight:600;font-size:14.5px}
.sq-tracker li.todo b{color:var(--ink-50)}
.sq-tracker span{grid-column:1;font-size:12.5px;color:var(--ink-50)}
.sq-tracker time{grid-row:1;grid-column:2;font-family:var(--mono);font-size:12px;color:var(--ink-70)}
.sq-dkv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 14px;margin:6px 0 0;padding-top:14px;border-top:1px solid var(--rule);font-size:13.5px}
.sq-dkv dt{color:var(--ink-50);font-weight:500}
.sq-dkv dd{margin:0;text-align:right;word-break:break-all}
.sq-net{border:1px solid var(--rule-strong);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:700}
.sq-addr{font-family:var(--mono);font-size:12px}
.sq-addr mark{background:var(--lime-soft);color:inherit;border-radius:3px;padding:0 2px}
.sq-link{font-weight:600;text-decoration:underline;text-decoration-color:var(--accent-text);text-underline-offset:3px;white-space:nowrap;background:none;border:0;padding:0;color:var(--ink);cursor:pointer;font:inherit;font-size:12.5px}
.sq-drawer .dr-acts{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
@media (max-width:520px){.sq-acts{gap:8px}.sq-acts .btn{font-size:14.5px;padding:9px 14px}.sq-acts .btn .mdi{font-size:16px}}
/* The card is always dark plastic, whatever the theme */
.sq-plastic{color:#EAF4F7}
.sq-plastic .meta{color:rgba(234,244,247,.72)}
.sq-plastic .kind{color:rgba(234,244,247,.55)}
.sq-plastic .arcs path{stroke:#7FDDF5}
/* Card issue: top-up block when the balance is short */
.sq-topup{border:1px solid var(--rule);border-radius:16px;padding:14px;background:var(--surface-2)}
.sq-topup > b{display:block;font-size:15.5px;margin-bottom:2px}
.sq-topup-qr{background:#fff;border-radius:12px;padding:10px;line-height:0;width:max-content;margin:6px 0 10px;box-shadow:0 0 0 1px var(--rule)}
.sq-topup-qr svg{width:140px;height:140px}
.sq-topup-addr{display:block;width:100%;text-align:left;border:1px solid var(--rule);border-radius:12px;background:var(--surface);padding:9px 11px;font-family:var(--mono);font-size:13px;word-break:break-all;color:var(--ink);cursor:pointer}
/* Home: "your card is ready to issue" */
.sq-card-cta{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink)}
.sq-card-cta:hover{color:var(--ink);box-shadow:0 0 0 1px var(--lime)}
.sq-card-cta > span:nth-child(2){flex:1;min-width:0}
.sq-card-cta b{display:block;font-size:16px}
@media (max-width:560px){.sq-card-cta{flex-wrap:wrap}.sq-card-cta .btn{width:100%}}
/* Card page, Wise pattern: card + balance + pill actions, then activity; settings in a side panel */
.cd-top{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:32px;align-items:center;margin-bottom:28px}
.cd-plastic .sq-plastic{max-width:360px}
.cd-main .lbl{display:block;color:var(--ink-50);font-size:14px;font-weight:500}
.cd-main .big{display:block;font-size:clamp(44px,6vw,64px);font-weight:800;font-stretch:72%;letter-spacing:-.03em;line-height:1.02;margin:2px 0 6px}
.cd-main .big small{font-size:.5em;color:var(--ink-50);font-weight:700}
.cd-main .sub{display:block;color:var(--ink-50);font-size:14px;max-width:52ch}
.cd-acts{margin-top:18px;flex-wrap:wrap}
.cd-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.cd-feed .sq-tx{border-radius:16px}
.cd-feed .sq-tx:hover{background:var(--surface)}
.cd-side{display:flex;flex-direction:column;gap:14px}
.cd-side .lbl{display:block;color:var(--ink-50);font-size:13px}
.cd-month .sq-money{font-size:28px;font-weight:800;font-stretch:80%}
.cd-bar{height:6px;border-radius:6px;background:var(--surface-2);margin:10px 0 8px;overflow:hidden}
.cd-bar i{display:block;height:100%;background:var(--lime);border-radius:6px}
.cd-push b{display:block;margin-bottom:4px}
.cd-h{font-size:15px;font-weight:800;margin:22px 0 6px}
.cd-row{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;text-align:left;padding:12px 4px;border-top:1px solid var(--rule);color:var(--ink);cursor:pointer;font:inherit}
.cd-row > span{flex:1;min-width:0}.cd-row b{display:block;font-weight:600}.cd-row > span > span{display:block;color:var(--ink-50);font-size:13px}
.cd-row .mdi{font-size:20px;color:var(--ink-70)}
.cd-row.danger b,.cd-row.danger .mdi:first-child{color:var(--red)}
.cd-row:hover{background:var(--soft)}
.sq-chips button{border:1px solid var(--rule);background:none;border-radius:999px;padding:6px 14px;font-size:14px;font-weight:600;color:var(--ink-70);cursor:pointer;font-family:inherit}
.sq-chips button:hover{color:var(--ink);border-color:var(--rule-strong)}
.sq-chips button.on{background:var(--ink);border-color:var(--ink);color:var(--bg)}
@media (max-width:900px){.cd-top{grid-template-columns:minmax(0,1fr);gap:18px}.cd-grid{grid-template-columns:minmax(0,1fr)}}
.cd-feed .sq-tx{grid-template-columns:40px minmax(0,1fr) auto;padding:10px 10px;border-top:0}
.cd-feed .sq-tx .ic{width:40px;height:40px;font-weight:800;font-size:17px}
.cd-feed .sq-tx .what span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cd-feed .sq-tx .fix{grid-column:2/-1}
.cd-feed .sq-day{padding:14px 10px 4px;border:0}
@media (max-width:520px){
  .cd-feed .sq-tx{grid-template-columns:40px minmax(0,1fr) auto;gap:12px;padding:10px 4px}
  .cd-feed .sq-tx .ic{display:grid}
  .cd-feed .sq-day{padding:14px 4px 4px}
  .cd-grid .sq-list-h{flex-wrap:wrap;gap:10px}
  .cd-main .big{font-size:48px}
}

.cd-feed .sq-tx .amt small{white-space:normal;max-width:170px;margin-left:auto}

/* Card being issued: a live screen, so nobody wonders whether to wait or what to press */
.cd-issuing-plastic{position:relative;max-width:360px}
.cd-issuing-plastic .sq-plastic{opacity:1}
.cd-issuing-plastic::after{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.16) 50%,transparent 70%);background-size:250% 100%;animation:cdShine 1.8s linear infinite}
@keyframes cdShine{from{background-position:120% 0}to{background-position:-120% 0}}
.cd-issuing-bar{height:4px;max-width:360px;border-radius:4px;background:var(--rule);overflow:hidden;margin-top:18px}
.cd-issuing-bar span{display:block;height:100%;width:35%;border-radius:4px;background:var(--lime);animation:cdBar 1.4s ease-in-out infinite}
@keyframes cdBar{0%{transform:translateX(-110%)}100%{transform:translateX(300%)}}
.cd-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--lime);margin-right:10px;vertical-align:3px;animation:sqPing 1.2s ease-in-out infinite}
.cd-elapsed{font-family:var(--mono);font-size:.6em;font-weight:500;color:var(--ink-50);margin-left:6px;vertical-align:2px}
.cd-spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--rule-strong);border-top-color:var(--lime);animation:cdSpin .8s linear infinite}
@keyframes cdSpin{to{transform:rotate(360deg)}}
.sq-steps li.now .n{border-color:var(--lime)}
.cd-ready{display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:16px;background:var(--lime);color:var(--lime-ink);margin-bottom:18px}
.cd-ready .mdi{font-size:26px}
.cd-ready b{display:block;font-size:16px}
.sq-notice{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:1060;display:flex;gap:12px;align-items:center;max-width:min(560px,calc(100% - 32px));
  padding:14px 16px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);border:1px solid var(--rule)}
.sq-notice .mdi{font-size:22px;color:var(--accent-text)}
.sq-notice b{display:block}
.sq-notice .x{border:0;background:none;color:var(--ink-50);font-size:20px;line-height:1;padding:4px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.cd-issuing-plastic::after,.cd-issuing-bar span,.cd-dot,.cd-spin{animation:none}}

/* The bell */
.sq-bell{position:relative}
.sq-bell .sq-iconbtn{position:relative}
.sq-bell-n{position:absolute;top:4px;right:4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font:700 11px/18px var(--font);text-align:center}
.sq-bell-panel{position:absolute;right:0;top:54px;width:380px;max-height:min(70vh,560px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule);border-radius:18px;box-shadow:var(--shadow);z-index:1050;overflow:hidden}
.sq-bell-panel .hd{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--rule)}
.sq-bell-panel .hd b{font-size:16px}
.sq-bell-panel .list{overflow-y:auto}
.sq-bell-panel .it{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule);color:inherit;text-decoration:none}
.sq-bell-panel .it[href]:hover{background:var(--surface-2)}
.sq-bell-panel .it.new{background:color-mix(in srgb,var(--lime) 10%,transparent)}
.sq-bell-panel .it .ic{width:36px;height:36px;flex:none;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;color:var(--ink-70);font-size:18px}
.sq-bell-panel .it.new .ic{background:var(--lime-soft);color:var(--accent-text)}
.sq-bell-panel .tx{display:flex;flex-direction:column;min-width:0;font-size:13.5px;color:var(--ink-70)}
.sq-bell-panel .tx b{color:var(--ink);font-size:14.5px}
.sq-bell-panel .tx em{font-style:normal;font-size:12px;color:var(--ink-50);margin-top:2px}
.sq-bell-panel .empty{padding:28px 20px;text-align:center;color:var(--ink-50);font-size:14px;margin:0}
.sq-bell-panel .empty .mdi{display:block;font-size:30px;margin-bottom:6px}
@media (max-width:575px){.sq-bell{position:static}.sq-bell-panel{position:fixed;left:12px;right:12px;top:72px;width:auto}}
.sq-bell-panel .it.bad .ic{background:color-mix(in srgb,var(--red) 18%,transparent);color:var(--red)}

/* Card actions: buttons with text on wide screens; on phones one row of round icons with a label
   under each (as Revolut, Wise, Monzo), and no second balance under the card (it's on the card). */
@media (max-width:575px){
  .cd-main > .lbl,.cd-main > .big,.cd-main > .sub{display:none}
  .cd-acts.sq-acts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:4px}
  .cd-acts .cd-act{display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;background:none!important;border:0!important;box-shadow:none!important;color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.15;min-width:0;white-space:normal;text-align:center}
  .cd-acts .cd-act .mdi{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:22px;margin:0;background:var(--surface-2);color:var(--ink)}
  .cd-acts .cd-act.btn-primary .mdi{background:var(--lime);color:var(--lime-ink)}
  .cd-acts .cd-act.is-on .mdi{background:var(--blue,#2775CA);color:#fff}
  .cd-acts .cd-act:disabled{opacity:.45}
  .cd-acts .cd-act span{overflow-wrap:anywhere}
}

/* Addresses: networks and coins as logos */
.ad-nets{display:flex;flex:none}
.ad-nets .sq-coin-img{width:40px;height:40px;border:2px solid var(--surface);box-sizing:content-box}
.ad-nets .sq-coin-img + .sq-coin-img{margin-left:-14px}
.ad-accept{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.ad-coin{display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:8px;align-items:center;padding:8px 12px 8px 8px;border-radius:14px;background:var(--surface-2)}
.ad-coin .sq-coin-img,.ad-coin .sq-coin{grid-row:1 / span 2;width:30px;height:30px}
.ad-coin b{font-size:14px;line-height:1.1}
.ad-coin em{font-style:normal;font-size:12px;color:var(--ink-50);line-height:1.2}
.ad-warn{display:flex;gap:10px;align-items:center;margin-top:10px;font-size:13px;color:var(--ink-50)}
.ad-warn .nets{display:flex;flex:none}
.ad-warn .nets .sq-coin-img{width:20px;height:20px}
.ad-warn .nets .sq-coin-img + .sq-coin-img{margin-left:-6px}
.ad-warn .nets .mdi{font-size:20px;color:var(--amber,#B7791F)}
.ad-top .ad-nets{display:flex}
.cd-feed .sq-tx[data-act]{cursor:pointer}
.cd-feed .sq-tx[data-act]:hover{background:var(--surface-2)}

/* (i) next to a figure: the explanation on tap or hover instead of a line of small print */
.sq-info{position:relative;display:inline-flex;vertical-align:middle;margin-left:4px}
.sq-info-btn{border:0;background:none;padding:0 2px;color:var(--ink-50);font-size:16px;line-height:1;cursor:pointer}
.sq-info-btn:hover,.sq-info-btn[aria-expanded=true]{color:var(--ink)}
.sq-info-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:30;width:max-content;max-width:260px;padding:10px 12px;border-radius:12px;background:var(--ink);color:var(--bg);font-size:13px;font-weight:500;line-height:1.4;box-shadow:var(--shadow)}

/* Home on phones: the five actions as round icons with a label (as on the Card page), and the
   balance tiles without the networks line (it's on the Addresses page) */
@media (max-width:575px){
  .home-acts.sq-acts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .home-acts .home-act{display:flex;flex-direction:column;align-items:center;gap:7px;padding:0;background:none!important;border:0!important;box-shadow:none!important;color:var(--ink);font-size:12.5px;font-weight:600;line-height:1.15;min-width:0;white-space:normal;text-align:center}
  .home-acts .home-act .mdi{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:22px;margin:0;background:var(--surface-2);color:var(--ink)}
  .home-acts .home-act.btn-primary .mdi{background:var(--lime);color:var(--lime-ink)}
  .sq-jars .sq-jar:not(.card):not(.add) em:not(:has(.sq-arriving)){display:none}
}

/* Balance tiles, compact: logo on the left, amount and coin beside it, the note under both */
.sq-jars{gap:10px;margin-bottom:24px}
.sq-jar{flex:0 0 auto;min-width:168px;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"ic amt" "ic sub" "em em";column-gap:12px;row-gap:0;align-items:center;padding:12px 16px 12px 12px;border-radius:18px}
.sq-jar > .sq-coin-img,.sq-jar > .sq-coin,.sq-jar > .sq-mini-card{grid-area:ic;align-self:center}
.sq-jar > .sq-coin-img,.sq-jar > .sq-coin{width:36px;height:36px}
.sq-jar > .sq-mini-card{width:40px;height:28px;font-size:12px;padding-right:4px}
.sq-jar b{grid-area:amt;font-size:20px;margin:0;line-height:1.15;white-space:nowrap}
.sq-jar > span:not(.sq-mini-card){grid-area:sub;font-size:12.5px;white-space:nowrap}
.sq-jar em{grid-area:em;margin-top:6px}
.sq-jar em:empty{display:none}
.sq-jar.add{display:flex;flex-direction:column;min-width:220px}
@media (max-width:575px){.sq-jar{min-width:150px;padding:10px 14px 10px 10px}.sq-jar em:not(:has(.sq-arriving)){display:none}}