/* ============================================================
   FeliCa 管理后台 — 样式
   Token 与设计稿 1:1 对齐（canvas / sidebar / blue / green / ...）
   结构：Tokens → Shell → Card → Stats → Controls → Filter →
         Table → Recharge → Login Gate → Modal → Toast → Responsive
   ============================================================ */

/* ---------------- Tokens ---------------- */
:root{
  --canvas:#F7F8FC;
  --card:#FFFFFF;
  --sidebar:#EEF1F8;
  --hover:#E8EAED;

  --text-1:#202124;
  --text-2:#5F6368;
  --text-3:#9AA0A6;

  --line:#E5E7EB;
  --line-strong:#DADCE0;

  --blue:#1A73E8;
  --green:#34A853;
  --yellow:#FBBC04;
  --red:#EA4335;

  --track:#F1F3F4;
  --blue-200:#D2E3FC;
  --blue-50:#F1F6FE;

  --r-card:8px;
  --r-btn:4px;
  --r-pill:20px;

  --font:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --sidebar-w:256px;
  --topbar-h:64px;
  --row-h:72px;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}

html,body{height:100%}
body{
  font-family:var(--font);
  background:var(--canvas);
  color:var(--text-1);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  font-size:14px;
  line-height:1.3;
}

button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{background:none;border:0}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#DADCE0;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#C4C7C9}
::-webkit-scrollbar-track{background:transparent}

/* ---------------- Shell ---------------- */
.app{display:flex;height:100vh;overflow:hidden}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:var(--sidebar);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.brand{
  height:48px;
  flex:0 0 48px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 8px;
}
.brand__logo{
  width:28px;height:28px;flex:0 0 28px;
  border-radius:7px;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.brand__name{font-size:15px;font-weight:500;color:var(--text-1);letter-spacing:.01em;white-space:nowrap}

.nav{display:flex;flex-direction:column;gap:2px;padding-top:12px;flex:0 0 auto}
.nav__item{
  height:40px;flex:0 0 40px;
  width:100%;
  display:flex;align-items:center;gap:10px;
  padding:0 12px;
  border:0;background:transparent;
  border-radius:var(--r-pill);
  color:var(--text-2);
  font-size:14px;font-weight:500;
  text-align:left;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.nav__item:hover{background:var(--hover)}
.nav__item.is-active,
.nav__item.is-active:hover{background:var(--blue);color:#FFFFFF}
.nav__item svg{flex:0 0 18px}
.nav__divider{height:1px;flex:0 0 1px;background:var(--line-strong);margin:6px 0}
.sidebar__spacer{flex:1 1 auto;min-height:0}

.user{
  min-height:56px;flex:0 0 auto;
  display:flex;align-items:center;gap:10px;
  padding:8px;
  border-radius:var(--r-card);
  background:var(--card);
}
.user__avatar{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.user__text{display:flex;flex-direction:column;gap:2px;min-width:0}
.user__name{
  font-size:13px;font-weight:500;color:var(--text-1);line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.user__role{font-size:11px;color:var(--text-3);line-height:1.25}

/* Main */
.main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;background:var(--canvas)}

.topbar{
  height:var(--topbar-h);flex:0 0 var(--topbar-h);
  background:var(--card);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:16px;
  padding:0 24px;
}
.topbar__title{font-size:16px;font-weight:500;color:var(--text-1);white-space:nowrap}
.topbar__spacer{flex:1 1 auto}
.topbar__user{display:flex;align-items:center;gap:10px;min-width:0}
.topbar__name{
  font-size:13px;color:var(--text-2);
  max-width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.avatar{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;
  background:var(--sidebar);
  display:flex;align-items:center;justify-content:center;
}

/* View */
.view{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;gap:16px;
  padding:24px;
  overflow:auto;
}
.view--row{flex-direction:row;overflow:hidden}

.page-head{
  display:flex;align-items:center;gap:12px;
  flex:0 0 auto;min-height:32px;
}
.page-head__hint{font-size:12px;color:var(--text-3)}
.page-head__spacer{flex:1 1 auto}

/* ---------------- Card ---------------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  display:flex;flex-direction:column;
}
.card__head{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-height:22px}
.card__title{font-size:15px;font-weight:500;color:var(--text-1);white-space:nowrap}
.card__sub{font-size:12px;color:var(--text-3);white-space:nowrap}
.card__head-spacer{flex:1 1 auto}
.card__divider{height:1px;flex:0 0 1px;background:var(--line)}
.card__spacer{flex:1 1 auto;min-height:0}
.card__foot{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.card__foot-label{font-size:12px;color:var(--text-2)}
.card__foot-value{font-size:16px;font-weight:600;color:var(--text-1);margin-left:auto;font-variant-numeric:tabular-nums}

/* ---------------- Stats ---------------- */
.stat-row{display:flex;gap:16px;flex:0 0 auto}
.stat{
  flex:1 1 0;min-width:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:16px;
  display:flex;flex-direction:column;gap:6px;
}
.stat__label{font-size:12px;color:var(--text-2);line-height:1.3}
.stat__value{
  font-size:27px;font-weight:600;color:var(--text-1);
  line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.stat__delta{font-size:12px;color:var(--text-2);line-height:1.3}
.stat__delta--up{color:var(--green)}
.stat__delta--down{color:var(--red)}
.meter{height:4px;border-radius:2px;background:var(--track);overflow:hidden;margin-top:2px}
.meter__fill{height:4px;border-radius:2px;background:var(--blue)}

.mid-row{display:flex;gap:16px;flex:1 1 auto;min-height:356px}

.card--trend{flex:1 1 auto;min-width:0;padding:20px;gap:12px}
.chart{flex:1 1 auto;min-height:120px;display:flex;align-items:flex-end;gap:10px}
.chart__bar{
  flex:1 1 0;min-width:0;min-height:2px;
  background:var(--blue-200);
  border-radius:4px 4px 0 0;
  transition:background .15s ease;
}
.chart__bar--today{background:var(--blue)}
.chart__bar:hover{background:var(--blue)}
.chart-labels{
  display:flex;justify-content:space-between;flex:0 0 auto;
  font-size:11px;color:var(--text-3);line-height:1.3;
}

.card--rank{flex:0 0 360px;width:360px;padding:20px;gap:16px}
.rank-row{display:flex;align-items:center;gap:12px;flex:1 1 0;min-height:32px;max-height:46px}
.rank-row__name{width:88px;flex:0 0 88px;font-size:12px;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-row__track{width:164px;flex:0 0 164px;height:6px;border-radius:3px;background:var(--track);position:relative;overflow:hidden}
.rank-row__fill{position:absolute;left:0;top:0;height:6px;border-radius:3px;background:var(--blue)}
.rank-row__value{width:44px;flex:0 0 44px;text-align:right;font-size:12px;font-weight:500;color:var(--text-2);font-variant-numeric:tabular-nums}

.bottom-row{display:flex;gap:16px;flex:0 0 340px;height:340px}

.card--type{flex:1 1 auto;min-width:0;padding:20px;gap:16px;overflow:hidden}
.type-row{display:flex;align-items:center;gap:12px;height:24px;flex:0 0 24px}
.type-row__name{width:120px;flex:0 0 120px;font-size:12px;color:var(--text-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.type-row__track{flex:1 1 auto;min-width:0;height:8px;border-radius:4px;background:var(--track);position:relative;overflow:hidden}
.type-row__fill{position:absolute;left:0;top:0;height:8px;border-radius:4px}
.type-row__value{width:64px;flex:0 0 64px;text-align:right;font-size:12px;font-weight:500;color:var(--text-2);font-variant-numeric:tabular-nums}

.card--warn{flex:0 0 360px;width:360px;padding:20px;gap:12px}
.warn-row{display:flex;align-items:center;height:40px;flex:0 0 40px}
.warn-row__name{
  font-size:13px;color:var(--text-1);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.warn-row__value{margin-left:auto;font-size:13px;font-weight:500;color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------------- Controls ---------------- */
.btn{
  height:36px;flex:0 0 auto;
  border-radius:var(--r-btn);
  border:1px solid transparent;
  background:transparent;
  font-size:13px;font-weight:500;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 16px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease,filter .15s ease,border-color .15s ease;
}
.btn:disabled{cursor:default;opacity:.6}
.btn--primary{background:var(--blue);color:#FFFFFF}
.btn--primary:hover:not(:disabled){filter:brightness(.93)}
.btn--ghost{background:var(--card);border-color:var(--line-strong);color:var(--text-2);font-weight:400}
.btn--ghost:hover:not(:disabled){background:var(--canvas)}
.btn--outline{background:var(--card);border-color:var(--blue);color:var(--blue)}
.btn--outline:hover:not(:disabled){background:var(--blue-50)}
.btn--w72{width:72px;padding:0}
.btn--w76{width:76px;padding:0}
.btn--w96{width:96px;padding:0}
.btn--w120{width:120px;padding:0}

.link-btn{
  font-size:13px;font-weight:500;color:var(--blue);
  cursor:pointer;padding:0;border:0;background:none;
}
.link-btn:hover{text-decoration:underline}
.link-btn:disabled{color:var(--text-3);cursor:default;text-decoration:none}

.field{
  height:36px;flex:0 0 auto;
  border-radius:var(--r-btn);
  border:1px solid var(--line-strong);
  background:var(--card);
  display:flex;align-items:center;gap:8px;
  padding:0 12px;
}
.field:focus-within{border-color:var(--blue)}
.field input{
  border:0;outline:none;background:transparent;
  width:100%;min-width:0;
  font-size:13px;color:var(--text-1);
}
.field input::placeholder{color:var(--text-3)}
.field--240{width:240px}
.field--260{width:260px}
.field--220{width:220px}
.field--full{width:100%}

.select{
  height:36px;flex:0 0 auto;
  border-radius:var(--r-btn);
  border:1px solid var(--line-strong);
  background-color:var(--card);
  font-size:13px;color:var(--text-1);
  padding:0 32px 0 12px;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'><path d='M3 4.5L6 7.5L9 4.5' stroke='%235F6368' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
  cursor:pointer;
  outline:none;
}
.select:focus{border-color:var(--blue)}
.select--140{width:140px}
.select--150{width:150px}
.select--160{width:160px}
.select--130{width:130px}
.select--full{width:100%}
.select--lg{height:40px}

/* ---------------- Filter bar ---------------- */
.filter{
  display:flex;align-items:center;gap:12px;
  padding:16px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  flex:0 0 auto;
  flex-wrap:wrap;
}
.filter__left{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.filter__spacer{flex:1 1 auto;min-width:0}
.filter__right{display:flex;align-items:center;gap:12px;flex:0 0 auto}

/* ---------------- Table ---------------- */
.table-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  display:flex;flex-direction:column;
  flex:1 1 auto;min-height:520px;
  overflow:hidden;
}
.table-card__head{height:60px;flex:0 0 60px;display:flex;align-items:center;gap:8px;padding:0 20px}
.thead{height:44px;flex:0 0 44px;background:var(--canvas);display:flex;padding:0 20px}
.tbody{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
.tr{height:var(--row-h);flex:0 0 var(--row-h);display:flex;align-items:center;padding:0 20px;transition:background .12s ease}
.tbody .tr:hover{background:var(--canvas)}

.th{display:flex;align-items:center;height:100%;font-size:12px;color:var(--text-2);min-width:0}
.td{
  display:flex;align-items:center;height:100%;font-size:13px;color:var(--text-1);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.col-200{flex:0 0 200px;width:200px}
.col-190{flex:0 0 190px;width:190px}
.col-180{flex:0 0 180px;width:180px}
.col-170{flex:0 0 170px;width:170px}
.col-160{flex:0 0 160px;width:160px}
.col-150{flex:0 0 150px;width:150px}
.col-130{flex:0 0 130px;width:130px}
.col-120{flex:0 0 120px;width:120px}
.col-110{flex:0 0 110px;width:110px}
.col-100{flex:0 0 100px;width:100px}
.col-90{flex:0 0 90px;width:90px}
.col-fill{flex:1 1 0;min-width:0}

.td--strong{font-weight:500}
.td--num{font-weight:500;font-variant-numeric:tabular-nums}
.td--muted{color:var(--text-2);font-variant-numeric:tabular-nums}
.td--mono{font-family:var(--mono);font-size:13px;color:var(--text-1)}
.td--mono-sm{font-family:var(--mono);font-size:12px;color:var(--text-2)}
.td--link{color:var(--blue);font-weight:500;cursor:pointer}
.td--link:hover{text-decoration:underline}
.st--active{color:var(--green)}
.st--warn{color:var(--red)}
.st--off{color:var(--text-3)}
.st--ok{color:var(--green);font-weight:500}
.st--fail{color:var(--red);font-weight:500}
.td--amount{color:var(--blue);font-weight:500;font-variant-numeric:tabular-nums}

.badge{
  display:inline-flex;align-items:center;
  height:20px;padding:0 8px;
  border-radius:10px;
  background:var(--track);
  color:var(--text-2);
  font-size:11px;font-weight:500;line-height:1;
}
.badge--admin{background:#E8F0FE;color:var(--blue)}

.pagination{
  height:56px;flex:0 0 56px;
  display:flex;align-items:center;gap:8px;
  padding:0 20px;
}
.pagination__count{font-size:12px;color:var(--text-2);white-space:nowrap}
.pagination__spacer{flex:1 1 auto}
.pagination__btn{
  font-size:12px;color:var(--text-2);
  background:transparent;border:0;cursor:pointer;
  padding:0 2px;
  font-family:var(--font);
  font-variant-numeric:tabular-nums;
}
.pagination__btn:hover:not(:disabled){color:var(--blue)}
.pagination__btn:disabled{color:var(--text-3);cursor:default}
.pagination__page{
  font-size:12px;color:var(--text-2);
  background:transparent;border:0;cursor:pointer;
  padding:0 2px;
  font-family:var(--font);
  font-variant-numeric:tabular-nums;
  min-width:12px;
}
.pagination__page:hover{color:var(--blue)}
.pagination__page.is-active{color:var(--blue);font-weight:600;cursor:default}
.pagination__gap{font-size:12px;color:var(--text-3);padding:0 2px}

.table-note{
  flex:0 0 auto;
  padding:0 20px 10px;
  font-size:11px;
  color:var(--text-3);
  text-align:right;
  line-height:1.4;
}

/* ---------------- Recharge ---------------- */
.card--recharge{
  flex:0 0 380px;width:380px;
  padding:20px;gap:16px;
  min-height:0;
  overflow-y:auto;
}
.form-label{font-size:12px;color:var(--text-2);flex:0 0 auto}
.field--lg{height:40px}
.field--lg input{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums}
.field__unit{font-size:12px;color:var(--text-2);flex:0 0 auto}
.field--stack{width:100%}

.balance{
  background:var(--canvas);
  border-radius:var(--r-card);
  padding:14px;
  display:flex;flex-direction:column;gap:4px;
  flex:0 0 auto;
}
.balance__label{font-size:11px;color:var(--text-2);line-height:1.3}
.balance__value{
  font-size:22px;font-weight:600;color:var(--text-1);
  line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}

.preview{display:flex;align-items:center;flex:0 0 auto}
.preview__label{font-size:12px;color:var(--text-2)}
.preview__value{margin-left:auto;font-size:14px;font-weight:600;color:var(--blue);font-variant-numeric:tabular-nums}

.tips{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
.tips span{font-size:11px;color:var(--text-3);line-height:1.45}

.btn--submit{width:100%;height:44px;font-size:14px;flex:0 0 auto}

.recharge-table{flex:1 1 auto;min-width:0}

/* ---------------- Settings ---------------- */
.card--settings{padding:20px;gap:12px;flex:0 0 auto}
.kv{
  display:flex;align-items:center;gap:16px;
  min-height:48px;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.kv:last-child{border-bottom:0}
.kv__k{width:160px;flex:0 0 160px;font-size:12px;color:var(--text-2)}
.kv__v{min-width:0;color:var(--text-1);word-break:break-all}
.kv__v--mono{font-family:var(--mono);font-size:12px;color:var(--text-2)}
.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:6px;background:var(--text-3)}
.dot--ok{background:var(--green)}
.algo-row{
  display:flex;align-items:center;gap:12px;
  min-height:48px;
  border-bottom:1px solid var(--line);
}
.algo-row:last-child{border-bottom:0}
.algo-row__id{width:240px;flex:0 0 240px;font-family:var(--mono);font-size:12px;color:var(--text-1);overflow:hidden;text-overflow:ellipsis}
.algo-row__title{flex:1 1 auto;min-width:0;font-size:13px;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.algo-row__meta{font-size:11px;color:var(--text-3);white-space:nowrap}

/* ---------------- Empty / loading ---------------- */
.empty{
  display:flex;align-items:center;justify-content:center;
  flex:1 1 auto;
  color:var(--text-3);font-size:13px;
  padding:24px;
  text-align:center;
}
.loading-row{
  display:flex;align-items:center;justify-content:center;
  height:100%;min-height:120px;
  color:var(--text-3);font-size:13px;gap:8px;
}
.spinner{
  width:14px;height:14px;border-radius:50%;
  border:2px solid var(--line-strong);
  border-top-color:var(--blue);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------------- Login gate ---------------- */
.gate{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:var(--canvas);
  padding:24px;
  overflow:auto;
}
.gate__card{
  width:380px;max-width:100%;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:32px;
  display:flex;flex-direction:column;gap:16px;
  box-shadow:0 8px 32px rgba(32,33,36,.08);
}
.gate__brand{display:flex;align-items:center;gap:10px}
.gate__logo{
  width:36px;height:36px;flex:0 0 36px;border-radius:9px;
  background:var(--blue);
  display:flex;align-items:center;justify-content:center;
}
.gate__name{font-size:13px;font-weight:500;color:var(--text-2);letter-spacing:.02em}
.gate__title{font-size:22px;font-weight:600;color:var(--text-1);letter-spacing:-.01em}
.gate__sub{font-size:13px;color:var(--text-3);margin-top:-10px}
.gate__field{
  height:44px;width:100%;
  border:1px solid var(--line-strong);
  border-radius:var(--r-btn);
  display:flex;align-items:center;gap:8px;
  padding:0 12px;
  background:var(--card);
}
.gate__field:focus-within{border-color:var(--blue)}
.gate__field input{
  border:0;outline:none;background:transparent;
  width:100%;min-width:0;
  font-size:14px;color:var(--text-1);
}
.gate__field input::placeholder{color:var(--text-3)}
.gate__error{
  font-size:12px;color:var(--red);line-height:1.4;
  min-height:16px;
}
.gate__btn{
  width:100%;height:44px;
  border-radius:var(--r-btn);
  background:var(--blue);color:#FFFFFF;
  font-size:14px;font-weight:500;
  cursor:pointer;
  transition:filter .15s ease;
}
.gate__btn:hover:not(:disabled){filter:brightness(.93)}
.gate__btn:disabled{cursor:default;opacity:.7}

/* ---------------- Modal ---------------- */
.modal{
  position:fixed;inset:0;
  background:rgba(32,33,36,.32);
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  z-index:100;
}
.modal__card{
  width:440px;max-width:100%;
  max-height:90vh;overflow:auto;
  background:var(--card);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(32,33,36,.18);
  display:flex;flex-direction:column;
}
.modal__head{
  padding:20px 24px 12px;
  display:flex;align-items:center;gap:8px;
}
.modal__title{font-size:16px;font-weight:500;color:var(--text-1)}
.modal__close{
  margin-left:auto;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--text-2);
}
.modal__close:hover{background:var(--canvas)}
.modal__body{
  padding:8px 24px 4px;
  display:flex;flex-direction:column;gap:8px;
}
.modal__field{margin-bottom:8px}
.modal__error{
  font-size:12px;color:var(--red);
  min-height:16px;line-height:1.4;
}
.modal__foot{
  padding:16px 24px 20px;
  display:flex;justify-content:flex-end;gap:12px;
}

/* ---------------- Toast (右上角) ---------------- */
.toasts{
  position:fixed;
  right:24px;bottom:24px;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  z-index:120;
  max-width:360px;
  pointer-events:none;
}
.toast{
  display:flex;align-items:flex-start;gap:8px;
  background:#202124;color:#FFFFFF;
  font-size:13px;line-height:1.45;
  padding:10px 14px;
  border-radius:var(--r-btn);
  box-shadow:0 6px 20px rgba(32,33,36,.24);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease;
  word-break:break-word;
  pointer-events:none;
}
.toast.is-show{opacity:1;transform:translateY(0)}
.toast.is-out{opacity:0;transform:translateY(6px)}
.toast__dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--blue);flex:0 0 7px;margin-top:5px;
}
.toast--success .toast__dot{background:var(--green)}
.toast--error .toast__dot{background:var(--red)}

/* ---------------- Responsive ---------------- */
@media (max-width:1500px){
  .card--rank{flex:0 0 320px;width:320px}
  .rank-row__name{width:72px;flex:0 0 72px}
  .rank-row__track{width:140px;flex:0 0 140px}
  .card--warn{flex:0 0 320px;width:320px}
  .card--recharge{flex:0 0 340px;width:340px}
}
@media (max-width:1360px){
  .field--240{width:190px}
  .field--260{width:200px}
  .field--220{width:180px}
  .col-200{flex:0 0 180px;width:180px}
  .col-190{flex:0 0 160px;width:160px}
  .col-180{flex:0 0 150px;width:150px}
  .col-170{flex:0 0 140px;width:140px}
}
@media (max-width:1100px){
  .card--rank,.card--warn{display:none}
  .card--recharge{flex:0 0 300px;width:300px}
  .sidebar{width:220px;flex:0 0 220px}
  .col-160{flex:0 0 130px;width:130px}
  .col-150{flex:0 0 120px;width:120px}
}