:root {
  --bg: #07040d;
  --surface: #0d0718;
  --surface-2: #160b27;
  --surface-3: #241143;
  --line: rgba(196, 111, 255, .19);
  --line-strong: rgba(208, 122, 255, .42);
  --text: #fbf8ff;
  --muted: #aa9db7;
  --muted-2: #766a82;
  --accent: #c35cff;
  --accent-2: #7b35e8;
  --good: #c6ff45;
  --warning: #f3c66f;
  --danger: #ff6d86;
  --shadow: 0 26px 90px rgba(0, 0, 0, .58);
}

body {
  background: #07040d url('/assets/legacy/background.png') center / cover fixed no-repeat;
  font-family: "Segoe UI", Arial, sans-serif;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 3, 15, .38), rgba(7, 3, 15, .92)), radial-gradient(circle at 50% 0, rgba(139, 55, 255, .22), transparent 42%);
  content: "";
  pointer-events: none;
}

.login-view {
  min-height: 100vh;
  padding: 20px;
  background: linear-gradient(180deg, rgba(5, 2, 10, .42), rgba(5, 2, 10, .86)), url('/assets/legacy/background.png') center / cover no-repeat;
}

.login-view::before { background: radial-gradient(circle at 50% 0, rgba(145, 55, 255, .25), transparent 42%); }
.login-gridline { width: min(900px, 80vw); height: min(900px, 80vw); border: 1px solid rgba(190, 92, 255, .16); border-radius: 24px; }
.login-panel {
  width: min(1220px, 100%);
  min-height: min(720px, calc(100vh - 40px));
  padding: clamp(30px, 6vw, 76px);
  border: 1px solid rgba(190, 100, 255, .36);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(47, 17, 83, .91), rgba(11, 5, 22, .98) 31%, rgba(7, 4, 14, .99));
  box-shadow: var(--shadow), inset 0 0 90px rgba(137, 55, 255, .09);
}

.login-panel::after {
  position: absolute;
  right: -32px;
  bottom: -28px;
  width: 310px;
  height: 145px;
  background: repeating-linear-gradient(58deg, transparent 0 32px, rgba(159, 74, 255, .18) 32px 57px, transparent 57px 88px);
  content: "";
  pointer-events: none;
}

.brand-symbol { color: var(--accent); text-shadow: 0 0 22px rgba(195, 92, 255, .36); }
.brand-lockup strong, .sidebar-brand strong { letter-spacing: 1.5px; }
.brand-lockup small, .sidebar-brand small { color: #9d90aa; }
.login-panel .eyebrow { margin-top: clamp(48px, 10vh, 110px); color: #a99bb3; }
.login-panel h1 { max-width: 760px; font-family: "Arial Narrow", "Segoe UI", sans-serif; font-size: clamp(52px, 8vw, 94px); letter-spacing: .5px; text-transform: uppercase; }
.login-panel h1 em, h2 em { color: var(--accent); text-shadow: 0 0 24px rgba(195, 92, 255, .22); }
.login-copy { color: #a99caf; }
.discord-login, .button { border-color: rgba(190, 103, 255, .45); border-radius: 8px; background: linear-gradient(180deg, rgba(54, 21, 99, .92), rgba(25, 10, 48, .98)); box-shadow: inset 0 0 24px rgba(145, 56, 255, .09); }
.discord-login:hover, .button:hover { border-color: var(--accent); background: linear-gradient(180deg, rgba(74, 27, 132, .98), rgba(33, 12, 63, .98)); box-shadow: 0 10px 28px rgba(45, 11, 87, .3); }
.discord-login span:last-child { color: var(--good); }
.login-meta { border-color: rgba(255, 255, 255, .09); }
.login-aside { right: clamp(28px, 5vw, 70px); bottom: clamp(24px, 5vw, 58px); border-color: rgba(194, 105, 255, .35); }
.login-aside .status-line span { color: var(--good); }
.status-line i { background: var(--good); box-shadow: 0 0 9px rgba(198, 255, 69, .55); }

.app-view {
  width: min(1500px, calc(100% - 24px));
  min-height: calc(100vh - 24px);
  margin: 12px auto;
  overflow: hidden;
  border: 1px solid rgba(185, 99, 255, .34);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(33, 13, 61, .94), rgba(8, 4, 16, .99) 28%, rgba(7, 4, 14, .99));
  box-shadow: var(--shadow), inset 0 0 90px rgba(121, 46, 224, .08);
}

.sidebar { padding: 22px 14px 16px; border-right-color: rgba(255, 255, 255, .07); background: linear-gradient(180deg, rgba(17, 7, 32, .92), rgba(8, 4, 16, .98)); }
.sidebar-brand { padding: 0 9px 22px; border-bottom-color: rgba(255, 255, 255, .08); }
.guild-switcher { padding: 18px 9px 17px; }
.guild-switcher select, .toolbar-row select, .inline-form select, .stack-form select { border-color: rgba(172, 85, 255, .24); border-radius: 8px; background: #0b0515; }
.subtle-action { color: var(--good); }
.nav-label { color: #75687f; }
.nav-item { border-radius: 9px; color: #a699b0; }
.nav-item:hover { border-color: rgba(183, 91, 255, .22); background: rgba(115, 43, 200, .15); color: #fff; }
.nav-item.is-active { border-color: rgba(194, 104, 255, .46); background: linear-gradient(90deg, rgba(121, 47, 218, .56), rgba(35, 13, 66, .82)); color: #fff; box-shadow: inset 0 0 24px rgba(149, 51, 255, .12); }
.nav-item.is-active span { color: var(--good); }
.sidebar-bottom { border-top-color: rgba(255, 255, 255, .08); }
.logout-button { border-color: rgba(255, 109, 134, .19); border-radius: 8px; background: rgba(30, 7, 23, .36); }

.main-panel { background: transparent; }
.app-header { min-height: 92px; padding: 20px 30px; border-bottom-color: rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(24, 9, 45, .72), rgba(10, 5, 20, .46)); }
.app-header h2 { font-family: "Arial Narrow", "Segoe UI", sans-serif; font-size: 27px; letter-spacing: .8px; text-transform: uppercase; }
.server-badge { color: #9f91aa; }
.server-badge i { background: var(--good); box-shadow: 0 0 10px rgba(198, 255, 69, .55); }
.user-avatar, .person-avatar { border-color: rgba(203, 113, 255, .35); border-radius: 8px; background: linear-gradient(135deg, #9d4ff1, #2e0c62); }
.content { max-width: none; padding: 24px 30px 42px; }
.overview-hero { min-height: 270px; border-color: rgba(188, 100, 255, .36); border-radius: 17px; background: linear-gradient(rgba(12, 15, 17, .6), rgba(12, 15, 17, .6)), url("/135.png"); background-size: cover; background-position: center; box-shadow: inset 0 0 55px rgba(175, 70, 255, .08); }
.overview-hero::after { position: absolute; right: -15px; bottom: -24px; width: 280px; height: 125px; background: repeating-linear-gradient(58deg, transparent 0 32px, rgba(195, 92, 255, .16) 32px 57px, transparent 57px 88px); content: ""; pointer-events: none; }
.overview-hero h1 { font-family: "Arial Narrow", "Segoe UI", sans-serif; font-size: clamp(48px, 6vw, 82px); letter-spacing: .4px; text-transform: uppercase; }
.hero-balance { position: relative; z-index: 1; border-left-color: var(--good); background: rgba(8, 3, 18, .34); border-radius: 10px; }
.hero-balance strong { color: var(--good); text-shadow: 0 0 16px rgba(198, 255, 69, .17); }
.metric { border-color: rgba(180, 91, 255, .18); border-radius: 12px; background: linear-gradient(145deg, rgba(24, 10, 46, .88), rgba(8, 4, 17, .98)); }
.metric:hover { border-color: rgba(195, 92, 255, .42); transform: translateY(-2px); }
.metric.good strong { color: var(--good); }
.metric.warning strong { color: var(--warning); }
.metric.danger strong { color: var(--danger); }
.panel-card { border-color: rgba(177, 89, 255, .18); border-radius: 14px; background: linear-gradient(180deg, rgba(14, 7, 28, .94), rgba(7, 4, 14, .99)); box-shadow: inset 0 0 42px rgba(104, 41, 197, .04); }
.panel-header, .section-title { border-bottom-color: rgba(255, 255, 255, .07); }
.panel-kicker, .section-index { color: #8f7ca0; }
.activity-row, td, .table-wrap th { border-color: rgba(255, 255, 255, .06); }
.activity-dot { background: var(--accent); box-shadow: 0 0 11px rgba(195, 92, 255, .6); }
.quick-actions button:hover { background: rgba(112, 43, 196, .16); }
.quick-actions button span { color: var(--good); }
.empty-state, .setup-state { border-color: rgba(186, 97, 255, .28); border-radius: 17px; background: linear-gradient(135deg, rgba(65, 26, 125, .47), rgba(7, 4, 15, .98)); }
.empty-icon { border-color: rgba(199, 108, 255, .35); border-radius: 14px; color: var(--good); background: rgba(0, 0, 0, .18); }
.notice { border-color: rgba(187, 96, 255, .18); border-radius: 8px; background: rgba(74, 28, 137, .08); }
.notice.warning { border-color: rgba(243, 198, 111, .35); }
.inline-form input, .stack-form input, .search-field input { border-color: rgba(172, 85, 255, .22); border-radius: 8px; background: #090511; }
.inline-form input:focus, .stack-form input:focus, .search-field input:focus, .guild-switcher select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(132, 64, 241, .12); }
.table-wrap table { min-width: 650px; }
th { color: #786b83; }
td { color: #b9adbf; }
.status, .type-pill, .data-chip, .toolbar-count { border-color: rgba(184, 95, 255, .2); border-radius: 7px; background: rgba(31, 12, 57, .28); }
.status.online, .type-pill.income, .data-chip.good { color: var(--good); border-color: rgba(198, 255, 69, .24); }
.type-pill.expense, .type-pill.transfer, .data-chip.warning { color: var(--danger); border-color: rgba(255, 109, 134, .25); }
.toolbar-row { gap: 9px; }
.search-field { border-color: rgba(172, 85, 255, .23); border-radius: 8px; background: rgba(14, 7, 28, .9); }
.storage-layout { gap: 12px; }
.inventory-card { border-color: rgba(179, 90, 255, .2); border-radius: 12px; background: linear-gradient(145deg, rgba(30, 12, 56, .76), rgba(8, 4, 17, .98)); }
.inventory-card:hover { border-color: rgba(199, 106, 255, .5); transform: translateY(-2px); }
.inventory-card.is-low { border-color: rgba(243, 198, 111, .52); }
.item-image { border-radius: 9px; background: radial-gradient(circle, rgba(111, 42, 192, .36), #100720 72%); }
.item-image span { border-radius: 5px; background: rgba(7, 3, 15, .84); color: var(--good); }
.item-actions button { border-color: rgba(183, 91, 255, .25); border-radius: 6px; background: rgba(56, 20, 103, .55); }
.item-actions button:hover { border-color: var(--accent); color: var(--good); }
.event-card { border-color: rgba(178, 89, 255, .17); border-radius: 11px; background: rgba(20, 8, 39, .7); }
.event-date { border-color: rgba(198, 104, 255, .26); border-radius: 8px; background: linear-gradient(145deg, rgba(97, 39, 186, .62), rgba(25, 9, 50, .9)); }
.toast { border-color: rgba(190, 102, 255, .3); border-radius: 10px; background: rgba(22, 8, 43, .96); box-shadow: 0 16px 40px rgba(0, 0, 0, .34); }
.toast-mark { background: var(--good); }

@media (max-width: 1050px) {
  .app-view { width: 100%; min-height: 100vh; margin: 0; border-radius: 0; }
  .sidebar { min-height: auto; }
  .sidebar-bottom { margin-top: 18px; }
  .main-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nav-label-lower { margin-top: 4px; grid-column: 1 / -1; }
  .content { padding: 20px; }
}

@media (max-width: 720px) {
  .login-view { padding: 10px; }
  .login-panel { min-height: calc(100vh - 20px); padding: 30px 22px; border-radius: 19px; }
  .login-panel .eyebrow { margin-top: 54px; }
  .login-panel h1 { font-size: clamp(43px, 14vw, 66px); }
  .login-aside { position: relative; right: auto; bottom: auto; width: min(100%, 320px); margin: -105px 0 18px auto; }
  .app-header { align-items: flex-start; padding: 18px 20px; }
  .header-right { gap: 10px; }
  .server-badge { display: none; }
  .user-menu { padding-left: 0; border-left: 0; }
  .content { padding: 16px 14px 30px; }
  .overview-hero { display: block; min-height: 350px; padding: 24px; }
  .hero-balance { margin-top: 32px; }
  .metric-grid, .ledger-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-columns, .storage-layout { grid-template-columns: 1fr; }
  .inline-form { grid-template-columns: 1fr; }
  .toolbar-row { flex-wrap: wrap; }
  .search-field { flex-basis: 100%; }
  .main-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.formation-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  min-height: 250px;
  padding: 28px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(188, 100, 255, .35);
  border-radius: 17px;
  background: linear-gradient(140deg, rgba(86, 34, 165, .75), rgba(24, 9, 51, .97) 62%, rgba(8, 4, 17, .99));
}
.formation-hero::after { position: absolute; right: -20px; bottom: -26px; width: 320px; height: 140px; background: repeating-linear-gradient(58deg, transparent 0 31px, rgba(195, 92, 255, .16) 31px 55px, transparent 55px 87px); content: ""; pointer-events: none; }
.formation-hero > div:first-child { position: relative; z-index: 1; }
.formation-hero h1 { margin: 10px 0 12px; font-family: "Arial Narrow", "Segoe UI", sans-serif; font-size: clamp(42px, 5vw, 72px); line-height: .9; letter-spacing: .4px; text-transform: uppercase; }
.formation-hero p { max-width: 540px; margin: 0; color: #b4a8bb; line-height: 1.55; }
.formation-hero-stat { position: relative; z-index: 1; min-width: 190px; padding: 16px 19px; border-left: 2px solid var(--good); border-radius: 9px; background: rgba(7, 3, 15, .42); }
.formation-hero-stat strong, .formation-hero-stat span { display: block; }
.formation-hero-stat strong { color: var(--good); font-size: 40px; line-height: 1; }
.formation-hero-stat span { margin-top: 7px; color: #a89aad; font-size: 8px; letter-spacing: 1.2px; }
.formation-hero.compact { min-height: 220px; }
.formation-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 16px 18px; }
.formation-form input, .formation-form select, .formation-form button { min-width: 0; }
.formation-form button { grid-column: 1 / -1; justify-self: start; }
.formation-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.formation-card, .rank-card, .custom-bot-card { border: 1px solid rgba(181, 91, 255, .2); border-radius: 14px; background: linear-gradient(145deg, rgba(29, 11, 55, .85), rgba(8, 4, 17, .98)); box-shadow: inset 0 0 35px rgba(107, 40, 198, .04); }
.formation-card { padding: 17px; }
.formation-card-top { display: flex; justify-content: space-between; gap: 15px; }
.formation-card h3, .rank-card h3, .custom-bot-card h3 { margin: 6px 0 4px; color: #fff; font-size: 15px; }
.formation-card p, .rank-card p, .custom-bot-card p { margin: 0; color: #87798e; font-size: 9px; line-height: 1.5; }
.formation-date { max-width: 150px; color: #d5c8dd; font-size: 9px; text-align: right; }
.formation-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 22px; }
.formation-counts span { padding: 10px 5px; border: 1px solid rgba(255, 255, 255, .07); border-radius: 8px; color: #fff; font-size: 18px; text-align: center; background: rgba(0, 0, 0, .17); }
.formation-counts small { display: block; margin-top: 4px; color: #75677e; font-size: 7px; letter-spacing: .7px; }
.formation-counts .going { color: var(--good); border-color: rgba(198, 255, 69, .18); }
.formation-counts .late { color: #83c9ff; }
.formation-counts .not-going { color: var(--danger); }
.formation-card-foot, .custom-bot-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 15px; padding-top: 11px; border-top: 1px solid rgba(255, 255, 255, .06); color: #746780; font-size: 8px; }
.rank-grid, .custom-bot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 11px; }
.rank-card { display: flex; align-items: center; gap: 13px; min-height: 86px; padding: 14px; position: relative; overflow: hidden; }
.rank-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--rank-color, var(--accent)); content: ""; box-shadow: 0 0 17px var(--rank-color, var(--accent)); }
.rank-level { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(196, 102, 255, .3); border-radius: 10px; color: var(--good); font-size: 16px; font-weight: 900; background: rgba(0, 0, 0, .2); }
.rank-dot { width: 9px; height: 9px; margin-left: auto; border-radius: 50%; background: var(--rank-color, var(--accent)); box-shadow: 0 0 12px var(--rank-color, var(--accent)); }
.influence-grid, .bot-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 12px; }
.influence-chart { padding-bottom: 20px; }
.big-stat { display: flex; align-items: baseline; gap: 9px; padding: 28px 18px 12px; }
.big-stat strong { color: var(--good); font-size: 54px; line-height: 1; }
.big-stat span { color: #85768d; font-size: 11px; }
.influence-chart > .progress, .influence-chart > p { margin-right: 18px; margin-left: 18px; }
.influence-chart > p { color: #96889e; font-size: 10px; line-height: 1.55; }
.bot-hero { background: linear-gradient(140deg, rgba(55, 24, 104, .82), rgba(18, 8, 37, .98) 62%, rgba(7, 4, 15, .99)); }
.bot-online-state { position: relative; z-index: 1; display: grid; gap: 5px; min-width: 180px; padding: 15px; border: 1px solid rgba(255, 109, 134, .2); border-radius: 10px; background: rgba(38, 7, 24, .3); }
.bot-online-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.bot-online-state strong { color: var(--danger); font-size: 9px; letter-spacing: 1px; }
.bot-online-state small { color: #887a91; font-size: 8px; }
.bot-online-state.is-online { border-color: rgba(198, 255, 69, .24); background: rgba(38, 52, 8, .2); }
.bot-online-state.is-online i { background: var(--good); box-shadow: 0 0 12px rgba(198, 255, 69, .65); }
.bot-online-state.is-online strong { color: var(--good); }
.feature-toggles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 0; }
.feature-toggle { display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid rgba(178, 89, 255, .14); border-radius: 8px; color: #aa9cb2; font-size: 9px; cursor: pointer; }
.feature-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.feature-toggle span { width: 25px; height: 14px; position: relative; border-radius: 99px; background: #21142c; transition: .15s ease; }
.feature-toggle span::after { position: absolute; top: 3px; left: 3px; width: 8px; height: 8px; border-radius: 50%; background: #75657b; content: ""; transition: .15s ease; }
.feature-toggle input:checked + span { background: rgba(198, 255, 69, .2); }
.feature-toggle input:checked + span::after { left: 14px; background: var(--good); box-shadow: 0 0 9px rgba(198, 255, 69, .5); }
.custom-bot-card { min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; }
.custom-bot-foot select { border: 1px solid rgba(183, 91, 255, .25); border-radius: 6px; padding: 5px; color: #cfc1d7; background: #0c0516; font-size: 7px; }

@media (max-width: 780px) {
  .formation-hero { display: block; min-height: 330px; padding: 23px; }
  .formation-hero-stat, .bot-online-state { margin-top: 28px; }
  .formation-form, .influence-grid, .bot-layout { grid-template-columns: 1fr; }
  .formation-form button { grid-column: auto; }
  .feature-toggles { grid-template-columns: 1fr; }
}