@font-face {
  font-family: "Philosopher";
  src: url("./fonts/philosopher-400.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Philosopher";
  src: url("./fonts/philosopher-700.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --v2-bg: #060b16;
  --v2-surface: rgba(12, 22, 38, 0.86);
  --v2-surface-strong: #0d192a;
  --v2-line: rgba(145, 174, 216, 0.14);
  --v2-text: #f2f6ff;
  --v2-muted: #8396b0;
  --v2-purple: #8675ff;
  --v2-cyan: #31d4db;
  --v2-green: #38dda3;
  --v2-orange: #ffad57;
}

html { background: var(--v2-bg); }

body {
  min-width: 320px;
  background:
    radial-gradient(circle at 82% 8%, rgba(77, 92, 203, 0.2), transparent 32%),
    radial-gradient(circle at 10% 90%, rgba(29, 179, 174, 0.1), transparent 28%),
    var(--v2-bg);
  color: var(--v2-text);
  font-family: "Philosopher", "Segoe UI", Arial, sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  background-image:
    linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}

.aurora { opacity: .2; }
.aurora-one { background: #735bff; }
.aurora-two { background: #11c9c1; }

/* Login */
.auth-shell { padding: 34px; }

.auth-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  width: min(980px, 100%);
  min-height: 610px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(160, 184, 224, .16);
  border-radius: 30px;
  background: rgba(9, 17, 30, .84);
  box-shadow: 0 38px 100px rgba(0, 0, 0, .48), inset 0 1px 0 rgba(255,255,255,.04);
}

.auth-story {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 58px;
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 20%, rgba(133, 107, 255, .28), transparent 36%),
    linear-gradient(145deg, rgba(26, 38, 73, .94), rgba(8, 22, 36, .9));
  border-right: 1px solid var(--v2-line);
}

.auth-story::after {
  content: "仙";
  position: absolute;
  right: -26px;
  bottom: -84px;
  color: rgba(153, 181, 227, .045);
  font-family: Georgia, serif;
  font-size: 320px;
  line-height: 1;
  transform: rotate(-7deg);
}

.brand-mark {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: linear-gradient(145deg, #8c73ff, #2fd1d8);
  box-shadow: 0 16px 40px rgba(70, 117, 235, .35), inset 0 1px 0 rgba(255,255,255,.35);
}

.brand-mark img,
.side-brand > span img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.auth-story .eyebrow { margin-top: 34px; color: #5ee5e2; }
.auth-card .auth-story h1 { max-width: 440px; margin: 0 0 20px; font-size: clamp(38px, 4.5vw, 58px); line-height: 1.02; letter-spacing: -.055em; }
.auth-card .auth-story h1 span { color: #aab8cc; }
.auth-story .subtle { max-width: 430px; margin: 0; color: #a2b1c6; font-size: 15px; }

.auth-features { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px; }
.auth-features span { padding: 9px 11px; border: 1px solid rgba(162, 190, 231, .13); border-radius: 10px; background: rgba(6, 13, 26, .3); color: #b8c7d9; font-size: 11px; font-weight: 700; }
.auth-features i { margin-right: 5px; color: var(--v2-green); font-size: 8px; font-style: normal; }

.auth-access { display: flex; flex-direction: column; justify-content: center; padding: 52px; background: rgba(7, 14, 25, .72); }
.auth-access-head { display: flex; gap: 12px; align-items: center; margin-bottom: 28px; }
.auth-access-head .seal { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(126, 113, 255, .3); border-radius: 13px; background: rgba(126, 113, 255, .1); color: #a89dff; font-family: Georgia, serif; font-size: 20px; }
.auth-access-head strong, .auth-access-head small { display: block; }
.auth-access-head strong { font-size: 16px; }
.auth-access-head small { margin-top: 4px; color: var(--v2-muted); font-size: 11px; }

.auth-access .auth-tabs { margin: 0 0 24px; padding: 5px; border: 1px solid rgba(139, 167, 207, .08); background: #070f1c; }
.auth-access .tab { min-height: 42px; transition: background .2s ease, color .2s ease, transform .2s ease; }
.auth-access .tab.active { background: linear-gradient(135deg, #334869, #283b5b); box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.auth-access label { color: #b7c5d8; }
.auth-access input { min-height: 48px; border-color: rgba(130, 161, 202, .18); background: rgba(4, 11, 21, .72); transition: border .2s ease, box-shadow .2s ease, background .2s ease; }
.auth-access input:hover { background: rgba(8, 18, 32, .9); }
.auth-access .primary { display: flex; justify-content: space-between; align-items: center; min-height: 50px; padding-inline: 20px; }
.auth-access .primary b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(255,255,255,.16); font-size: 16px; }

/* Application shell */
.app-shell { grid-template-columns: 276px minmax(0, 1fr); }
.sidebar {
  inset: 18px auto 18px 18px;
  width: 240px;
  padding: 18px 14px;
  border-color: rgba(146, 176, 219, .13);
  background: linear-gradient(180deg, rgba(15, 27, 47, .96), rgba(8, 18, 32, .94));
  box-shadow: 0 28px 80px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.03);
}
.side-brand { padding: 6px 8px 30px; }
.side-brand > span { width: 44px; height: 44px; background: linear-gradient(145deg, #8a72ff, #24cbd4); box-shadow: 0 10px 25px rgba(76, 102, 220, .3); }
.side-brand strong { font-size: 14px; }
.side-brand small { color: #7389a4; letter-spacing: .08em; text-transform: uppercase; }
.sidebar nav { gap: 8px; }
.nav-item { position: relative; min-height: 46px; border: 1px solid transparent; transition: .2s ease; }
.nav-link { display: flex; align-items: center; color: #8ea5be; text-decoration: none; box-sizing: border-box; }
.nav-item:hover { color: #dce8f8; background: rgba(119, 145, 190, .08); }
.nav-item.active { border-color: rgba(122, 110, 255, .18); background: linear-gradient(90deg, rgba(119, 95, 255, .25), rgba(39, 191, 206, .06)); box-shadow: inset 3px 0 0 #8172ff; }
.profile { padding: 15px 6px 2px; }
.profile #logoutButton { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; transition: .2s ease; }
.profile #logoutButton:hover { color: #fff; background: rgba(255,255,255,.08); }
.avatar { background: linear-gradient(145deg, #334967, #263a58); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); }

.content { padding: 36px 44px 72px 26px; max-width: 1660px; }
.topbar { min-height: 72px; margin-bottom: 26px; }
.topbar-heading .eyebrow { margin: 0 0 7px; }
.topbar-heading h2 { font-size: clamp(27px, 3vw, 38px); letter-spacing: -.035em; }
.topbar-heading > span { display: block; margin-top: 7px; color: var(--v2-muted); font-size: 12px; }
.live-pill { padding: 11px 15px; border-color: rgba(65, 220, 164, .18); background: rgba(21, 84, 66, .16); color: #a7cabf; box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
.live-pill i { animation: v2-pulse 1.8s ease-in-out infinite; }

.stats-grid { gap: 14px; }
.stat-card { min-height: 156px; padding: 21px; border-color: rgba(143, 171, 210, .12); background: linear-gradient(150deg, rgba(17, 32, 54, .94), rgba(9, 19, 34, .9)); box-shadow: 0 15px 38px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.025); transition: transform .2s ease, border-color .2s ease; }
.stat-card:hover { transform: translateY(-2px); border-color: rgba(155, 181, 220, .23); }
.stat-card::after { width: 120px; height: 120px; opacity: .2; }
.stat-card .stat-icon { position: absolute; top: 17px; right: 17px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid currentColor; border-radius: 11px; background: rgba(255,255,255,.025); font-size: 16px; opacity: .7; }
.stat-card small { display: block; max-width: calc(100% - 44px); }
.stat-card strong { margin: 19px 0 3px; font-size: clamp(34px, 3.4vw, 46px); }
.stat-card > span { color: #7e91aa; }

.section-head { margin: 38px 0 17px; }
.section-head h3 { font-size: 22px; letter-spacing: -.025em; }
.section-note { display: block; margin-top: 7px; color: var(--v2-muted); font-size: 11px; }
.section-head > .primary { min-height: 43px; padding: 11px 16px; border: 1px solid rgba(113, 105, 255, .22); background: linear-gradient(135deg, #7561ed, #25b7c7); box-shadow: 0 11px 28px rgba(73, 92, 211, .22); }
.section-head > .primary span { margin-right: 5px; font-size: 17px; }

.add-panel { border-color: rgba(130, 161, 204, .14); background: rgba(12, 25, 43, .94); box-shadow: 0 22px 55px rgba(0,0,0,.24); }
.game-login-tabs { border: 1px solid rgba(142, 170, 210, .1); }
.game-login-tab { transition: .2s ease; }
.game-login-tab.active { background: linear-gradient(135deg, #354b70, #263c5d); box-shadow: 0 7px 18px rgba(0,0,0,.2); }
.account-form input { border-color: rgba(132, 163, 204, .16); background: rgba(5, 13, 24, .72); }

.accounts-grid { grid-template-columns: repeat(auto-fit, minmax(410px, 1fr)); gap: 16px; }
.account-card { position: relative; overflow: hidden; padding: 21px; border-color: rgba(142, 171, 211, .13); background: linear-gradient(150deg, rgba(15, 29, 49, .97), rgba(8, 20, 35, .94)); box-shadow: 0 18px 44px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.025); transition: transform .2s ease, border-color .2s ease; }
.account-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: #53627a; opacity: .65; }
.account-card.is-running::before { background: linear-gradient(to bottom, #49e4aa, #24c5d7); box-shadow: 0 0 18px rgba(56,221,163,.5); }
.account-card:hover { transform: translateY(-2px); border-color: rgba(142, 171, 211, .24); }
.account-head { align-items: flex-start; min-height: 72px; }
.account-title { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; flex: 1 1 auto; min-width: 0; width: auto; }
.account-identity { display: grid; grid-template-rows: 18px 27px 16px; align-content: center; min-width: 0; height: 64px; overflow: hidden; }
.cultivator { position: relative; width: 52px; height: 52px; overflow: hidden; border: 1px solid rgba(123, 116, 255, .24); border-radius: 16px; background: linear-gradient(145deg, #3e3b95, #176f87); box-shadow: 0 11px 28px rgba(33, 78, 132, .28); }
.cultivator::after { content: ""; position: absolute; width: 42px; height: 42px; right: -17px; bottom: -18px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; }
.cultivator span { position: relative; z-index: 1; font-family: Georgia, serif; }
.account-kicker { display: flex; gap: 6px; align-items: center; min-width: 0; height: 18px; margin: 0; overflow: hidden; }
.account-kicker span, .account-kicker b { padding: 3px 6px; border-radius: 6px; font-size: 8px; letter-spacing: .08em; }
.account-kicker span { color: #a9b8cb; background: rgba(130,157,195,.1); }
.account-kicker b { color: #78e1e3; background: rgba(49,212,219,.09); }
.account-title h4 { contain: paint; overflow: hidden; height: 27px; margin: 0; font-family: "Philosopher", "Segoe UI Symbol", "Arial Unicode MS", sans-serif; font-size: 17px; line-height: 27px; letter-spacing: -.015em; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; }
.account-title p { overflow: hidden; height: 16px; margin: 0; font-family: ui-monospace, "Cascadia Code", monospace; color: #7489a4; font-size: 10px; line-height: 16px; text-overflow: ellipsis; white-space: nowrap; }
.status { display: inline-flex; gap: 6px; align-items: center; padding: 7px 9px; }
.status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.on i { box-shadow: 0 0 8px currentColor; animation: v2-pulse 1.8s ease-in-out infinite; }
.worker-status { display: flex; gap: 9px; align-items: center; min-height: 42px; margin: 18px 0 13px; padding: 10px 12px; border: 1px solid rgba(132, 160, 199, .08); background: rgba(4, 12, 23, .58); }
.worker-status i { flex: 0 0 auto; width: 7px; height: 7px; border: 2px solid #6d819b; border-radius: 50%; }
.is-running .worker-status i { border-color: #38dda3; box-shadow: 0 0 8px rgba(56,221,163,.45); }
.worker-status span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-stats { gap: 9px; }
.mini-stat { display: flex; gap: 10px; align-items: center; min-width: 0; padding: 12px; background: rgba(11, 24, 41, .56); }
.mini-icon { display: grid; place-items: center; flex: 0 0 auto; width: 31px; height: 31px; border-radius: 10px; background: rgba(255,255,255,.035); font-size: 14px; }
.mini-icon.violet { color: #a496ff; }
.mini-icon.orange { color: #ffad57; }
.mini-stat > div:last-child { min-width: 0; }
.mini-stat strong { display: flex; gap: 6px; align-items: baseline; margin-top: 4px; font-size: 17px; }
.mini-stat strong em { overflow: hidden; color: #71849c; font-size: 9px; font-style: normal; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.account-actions { margin-top: 13px; }
.toggle-button { display: flex; gap: 8px; align-items: center; justify-content: center; min-height: 42px; color: #07150f; background: linear-gradient(135deg, #45dfa9, #27c5bd); }
.toggle-button.stop { color: #2b1805; background: linear-gradient(135deg, #ffb257, #ff9453); }
.toggle-button span { font-size: 10px; }
.delete-button { display: grid; place-items: center; width: 43px; padding: 0; font-size: 19px; }

.table-wrap { border-color: rgba(141, 171, 212, .13); background: rgba(12, 24, 41, .88); }
th { background: rgba(7, 15, 27, .48); }
tbody tr { transition: background .2s ease; }
tbody tr:hover { background: rgba(111, 139, 181, .045); }

.workers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 15px; }
.worker-card { position: relative; overflow: hidden; padding: 20px; border: 1px solid rgba(63, 218, 170, .14); border-radius: 18px; background: linear-gradient(150deg, rgba(14, 31, 49, .96), rgba(8, 21, 35, .93)); box-shadow: 0 18px 44px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.025); }
.worker-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(to bottom, #42e0a8, #2ac8d5); box-shadow: 0 0 18px rgba(56,221,163,.42); }
.worker-card-head { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 12px; align-items: center; }
.worker-avatar { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(123,116,255,.24); border-radius: 15px; background: linear-gradient(145deg, #3e3b95, #176f87); font-family: Georgia, serif; font-size: 21px; }
.worker-card-head > div:nth-child(2) { display: grid; grid-template-rows: 15px 24px 15px; min-width: 0; height: 54px; overflow: hidden; }
.worker-card-head span, .worker-card-head h4, .worker-card-head p { display: block; overflow: hidden; height: 100%; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.worker-card-head span { color: #65d6dc; font-size: 9px; letter-spacing: .07em; }
.worker-card-head h4 { contain: paint; margin: 0; font-family: "Philosopher", "Segoe UI Symbol", "Arial Unicode MS", sans-serif; font-size: 17px; line-height: 24px; unicode-bidi: isolate; }
.worker-card-head p { margin: 0; color: #7c90aa; font-size: 10px; line-height: 15px; }
.worker-card-head > b { display: flex; gap: 6px; align-items: center; padding: 7px 9px; border: 1px solid rgba(56,221,163,.18); border-radius: 99px; color: #5be5b2; background: rgba(40,180,129,.09); font-size: 8px; letter-spacing: .06em; }
.worker-card-head > b i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: v2-pulse 1.8s ease-in-out infinite; }
.worker-message { display: flex; gap: 9px; align-items: center; min-height: 42px; margin: 17px 0 12px; padding: 10px 12px; border: 1px solid rgba(132,160,199,.08); border-radius: 11px; background: rgba(4,12,23,.58); color: #91a6bf; font-size: 11px; }
.worker-message i { flex: 0 0 auto; width: 7px; height: 7px; border: 2px solid #38dda3; border-radius: 50%; box-shadow: 0 0 8px rgba(56,221,163,.45); }
.worker-message span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.worker-details { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; }
.worker-details > div { padding: 10px; border: 1px solid rgba(136,165,204,.1); border-radius: 11px; background: rgba(10,23,39,.5); }
.worker-details small, .worker-details strong { display: block; }
.worker-details small { color: #71859e; font-size: 8px; letter-spacing: .07em; }
.worker-details strong { margin-top: 5px; font-size: 13px; }
.stop-worker { width: 100%; min-height: 40px; margin-top: 12px; border: 1px solid rgba(255,98,120,.16); border-radius: 10px; color: #ff8293; background: rgba(255,98,120,.08); font-weight: 700; cursor: pointer; transition: .2s ease; }
.stop-worker:hover { color: #fff; background: rgba(211,69,91,.42); }

.toast { right: 26px; bottom: 26px; border: 1px solid rgba(255,255,255,.45); border-radius: 14px; }

@keyframes v2-pulse { 0%,100% { opacity: .45; transform: scale(.88); } 50% { opacity: 1; transform: scale(1); } }

@media (max-width: 1100px) {
  .auth-card { grid-template-columns: 1fr 1fr; }
  .auth-story, .auth-access { padding: 42px; }
  .app-shell { grid-template-columns: 238px minmax(0,1fr); }
  .sidebar { width: 208px; }
  .content { padding-right: 26px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .auth-shell { padding: 14px; }
  .auth-card { display: block; width: min(480px, 100%); min-height: 0; border-radius: 24px; }
  .auth-story { display: block; padding: 28px 25px 24px; border-right: 0; border-bottom: 1px solid var(--v2-line); }
  .auth-story::after { right: -20px; bottom: -55px; font-size: 180px; }
  .brand-mark { width: 48px; height: 48px; border-radius: 15px; }
  .auth-story .eyebrow { margin-top: 20px; }
  .auth-card .auth-story h1 { margin-bottom: 12px; font-size: 34px; }
  .auth-story .subtle { font-size: 13px; }
  .auth-features { display: none; }
  .auth-access { padding: 25px; }
  .auth-access-head { margin-bottom: 20px; }

  .app-shell { display: block; }
  .sidebar {
    position: fixed;
    z-index: 15;
    inset: auto 10px 10px;
    display: flex;
    flex-direction: row;
    width: calc(100% - 20px);
    height: 66px;
    padding: 8px;
    border-radius: 18px;
  }
  .side-brand { display: none; }
  .sidebar nav { display: flex; flex: 1; justify-content: center; }
  .nav-item { display: grid; place-items: center; width: 58px; min-height: 48px; padding: 0; font-size: 0; text-align: center; }
  .nav-item span { width: auto; font-size: 18px; }
  .nav-link { justify-content: center; }
  .nav-item.active { box-shadow: inset 0 -3px 0 #8172ff; }
  .profile { margin: 0; padding: 0 2px 0 9px; border-top: 0; border-left: 1px solid var(--v2-line); }
  .profile > div:nth-child(2) { display: none; }
  .profile #logoutButton { display: none; }
  .content { padding: 24px 15px 98px; }
  .topbar { align-items: flex-start; min-height: 64px; }
  .topbar-heading h2 { font-size: 29px; }
  .topbar-heading > span { max-width: 230px; }
  .live-pill { padding: 9px 11px; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .stat-card { min-height: 132px; padding: 15px; }
  .stat-card .stat-icon { top: 12px; right: 12px; width: 29px; height: 29px; }
  .stat-card small { font-size: 8px; }
  .stat-card strong { margin-top: 20px; font-size: 30px; }
  .accounts-grid { grid-template-columns: 1fr; }
  .section-head { align-items: flex-end; }
  .section-head > .primary { padding: 10px 12px; font-size: 11px; }
  .account-form { grid-template-columns: 1fr; }
  .token-field { grid-column: auto; }
  .account-form button { grid-column: auto; }
  .workers-grid { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .topbar .live-pill { font-size: 0; }
  .topbar .live-pill span { font-size: 11px; }
  .topbar .live-pill span::after { content: " bật"; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-card { min-height: 126px; }
  .stat-card > span { font-size: 9px; }
  .account-card { padding: 17px; }
  .cultivator { width: 46px; height: 46px; }
  .account-title { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; }
  .account-kicker span { display: none; }
  .status { font-size: 8px; }
  .mini-stats { grid-template-columns: 1fr 1fr; }
  .mini-stat { padding: 9px; }
  .mini-icon { display: none; }
  .mini-stat strong { display: block; font-size: 16px; }
  .mini-stat strong em { display: block; margin-top: 3px; }
  .game-login-tabs { width: 100%; }
  .game-login-tab { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}