:root {
  --bg: #090a0c;
  --bg-2: #0d1115;
  --panel: #111820;
  --panel-2: #151f29;
  --panel-3: #182531;
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.13);
  --text: #f7f8fa;
  --muted: #91a0ad;
  --pink: #f41949;
  --pink-soft: rgba(244,25,73,.14);
  --green: #4cff00;
  --green-soft: rgba(76,255,0,.12);
  --blue: #19bfe0;
  --blue-2: #168df0;
  --warning: #ffad33;
  --shadow: 0 24px 70px rgba(0,0,0,.35);
  --radius: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.hidden { display: none !important; }
.eyebrow { display: inline-block; color: var(--blue); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; border-radius: 13px; padding: 0 17px; border: 1px solid transparent; font-weight: 750; cursor: pointer; transition: .18s ease; }
.button:hover { transform: translateY(-1px); }
.button.primary { background: linear-gradient(135deg,var(--blue),var(--blue-2)); color: white; }
.button.secondary { background: rgba(255,255,255,.055); border-color: var(--line-strong); }
.button.ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.button.full { width: 100%; }
.text-button { border: 0; background: transparent; color: var(--blue); font-weight: 700; cursor: pointer; }
.control { min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: #0d1319; color: var(--text); padding: 0 13px; outline: none; }
.control:focus { border-color: rgba(25,191,224,.55); box-shadow: 0 0 0 3px rgba(25,191,224,.08); }

/* LOGIN */
.login-body { overflow-x: hidden; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(430px,.85fr); }
.login-brand-panel { position: relative; padding: 70px clamp(35px,7vw,110px); display: flex; flex-direction: column; justify-content: center; background: radial-gradient(circle at 22% 20%, rgba(244,25,73,.16), transparent 25%), radial-gradient(circle at 76% 72%, rgba(76,255,0,.08), transparent 22%), #08090a; overflow: hidden; }
.login-brand-panel::before { content:""; position:absolute; inset:0; opacity:.16; background-image: repeating-linear-gradient(105deg, transparent 0 38px, rgba(244,25,73,.2) 39px 65px, transparent 66px 105px); transform: scale(1.2); }
.pattern-glow { position:absolute; width:380px; height:380px; border-radius:50%; background:rgba(25,191,224,.08); filter:blur(80px); right:-120px; top:22%; }
.brand-lockup, .login-feature-grid { position:relative; z-index:1; }
.brand-lockup { display:grid; grid-template-columns:130px 1fr; gap:32px; align-items:center; max-width:820px; }
.brand-mark-large { width:130px; max-height:110px; object-fit:contain; filter:drop-shadow(0 18px 30px rgba(0,0,0,.25)); }
.brand-lockup h1 { font-size: clamp(2.7rem,5vw,5rem); letter-spacing:-.055em; line-height:.98; margin:10px 0 20px; }
.brand-lockup p { color:var(--muted); font-size:1.08rem; line-height:1.75; max-width:660px; }
.login-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; max-width:830px; margin-top:54px; }
.mini-feature { padding:18px; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:17px; backdrop-filter:blur(8px); }
.mini-feature strong, .mini-feature span { display:block; }
.mini-feature span { color:var(--muted); margin-top:7px; font-size:.88rem; line-height:1.5; }
.login-card-wrap { display:grid; place-items:center; padding:38px; background:var(--bg-2); }
.login-card { width:min(510px,100%); background:linear-gradient(180deg,#111922,#0e151c); border:1px solid var(--line); border-radius:28px; padding:38px; box-shadow:var(--shadow); }
.account-logo-row { display:flex; align-items:center; gap:13px; margin-bottom:42px; }
.account-logo { width:54px; height:54px; border-radius:15px; }
.account-logo-row strong, .account-logo-row span { display:block; }
.account-logo-row strong { font-size:1.12rem; }
.account-logo-row span { color:var(--muted); font-size:.9rem; }
.login-card h2 { font-size:2.1rem; margin:9px 0 13px; letter-spacing:-.035em; }
.lead { color:var(--muted); line-height:1.72; margin:0 0 25px; }
.discord-button { width:100%; height:55px; font-size:1rem; }
.discord-diamond { font-size:1.15rem; }
.security-note { display:flex; gap:12px; margin-top:22px; padding:17px; border:1px solid var(--line); background:rgba(25,191,224,.05); border-radius:16px; }
.security-dot { width:8px; height:8px; background:#37e88d; border-radius:50%; margin-top:6px; flex:0 0 auto; }
.security-note strong { display:block; }
.security-note p { color:var(--muted); margin:4px 0 0; line-height:1.5; font-size:.88rem; }
.login-links { display:flex; justify-content:center; gap:10px; color:var(--muted); margin-top:28px; font-size:.86rem; }
.login-links a:hover { color:var(--text); }
.alert { border:1px solid rgba(244,25,73,.38); background:var(--pink-soft); color:#ffb9c8; border-radius:14px; padding:13px 15px; margin-bottom:20px; line-height:1.5; }

/* APP */
.app-shell { min-height:100vh; display:grid; grid-template-columns:270px minmax(0,1fr); }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:22px; border-right:1px solid var(--line); background:#090d11; z-index:20; }
.sidebar-brand { display:flex; align-items:center; gap:12px; padding:4px 4px 23px; border-bottom:1px solid var(--line); }
.sidebar-brand img { width:43px; height:43px; border-radius:12px; }
.sidebar-brand strong, .sidebar-brand span { display:block; }
.sidebar-brand span { color:var(--muted); font-size:.83rem; margin-top:2px; }
.nav-list { display:grid; gap:7px; padding:20px 0; }
.nav-item { border:1px solid transparent; background:transparent; display:flex; align-items:center; justify-content:space-between; padding:12px 13px; border-radius:12px; color:#aab4bd; font-weight:650; cursor:pointer; text-align:left; }
.nav-item:hover { background:rgba(255,255,255,.035); color:var(--text); }
.nav-item.active { color:white; background:linear-gradient(135deg,rgba(25,191,224,.13),rgba(22,141,240,.09)); border-color:rgba(25,191,224,.2); }
.nav-count { min-width:24px; height:22px; padding:0 6px; display:grid; place-items:center; border-radius:999px; background:rgba(255,255,255,.06); font-size:.72rem; }
.sidebar-bottom { margin-top:auto; border-top:1px solid var(--line); padding-top:17px; }
.user-mini, .top-user { display:flex; align-items:center; gap:10px; }
.user-mini { margin-bottom:15px; }
.user-mini img, .top-user img { width:41px; height:41px; border-radius:50%; object-fit:cover; }
.user-mini strong, .user-mini span, .top-user strong, .top-user span { display:block; min-width:0; }
.user-mini strong, .user-mini span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:155px; }
.user-mini span, .top-user span { color:var(--muted); font-size:.8rem; }
.content { min-width:0; padding:30px clamp(22px,4vw,55px) 55px; background:radial-gradient(circle at 92% 2%,rgba(25,191,224,.045),transparent 25%),var(--bg); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:28px; }
.topbar h1 { margin:4px 0 0; font-size:1.85rem; letter-spacing:-.035em; }
.top-user { padding:8px 11px; border:1px solid var(--line); background:rgba(255,255,255,.025); border-radius:999px; }
.mobile-menu { display:none; border:1px solid var(--line); background:var(--panel); color:var(--text); border-radius:11px; width:42px; height:42px; }
.page { display:none; }
.page.active { display:block; }
.hero-card { display:flex; justify-content:space-between; align-items:center; gap:25px; padding:29px; border:1px solid rgba(25,191,224,.16); background:linear-gradient(135deg,rgba(25,191,224,.075),rgba(244,25,73,.025)),var(--panel); border-radius:var(--radius); margin-bottom:19px; }
.hero-card h2 { margin:7px 0 7px; font-size:1.75rem; letter-spacing:-.035em; }
.hero-card p { color:var(--muted); margin:0; }
.stats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:19px; }
.stat-card, .section-card { border:1px solid var(--line); background:linear-gradient(180deg,rgba(18,26,34,.98),rgba(13,19,25,.98)); border-radius:var(--radius); box-shadow:0 12px 34px rgba(0,0,0,.12); }
.stat-card { padding:20px; }
.stat-card span, .stat-card small { color:var(--muted); display:block; }
.stat-card strong { display:block; font-size:2rem; margin:7px 0 2px; letter-spacing:-.045em; }
.stat-card small { font-size:.78rem; }
.section-card { padding:23px; }
.section-head { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:17px; }
.section-head.wrap { flex-wrap:wrap; }
.section-head h2 { margin:4px 0 0; font-size:1.3rem; }
.toolbar { display:flex; gap:10px; flex-wrap:wrap; }
.toolbar .control:first-child { min-width:250px; }
.order-list { display:grid; gap:9px; }
.order-row { width:100%; border:1px solid var(--line); background:rgba(255,255,255,.018); border-radius:15px; padding:14px 15px; display:flex; justify-content:space-between; align-items:center; gap:15px; text-align:left; cursor:pointer; transition:.18s ease; }
.order-row:hover { border-color:rgba(25,191,224,.27); transform:translateY(-1px); background:rgba(25,191,224,.025); }
.order-main, .order-side { display:flex; align-items:center; gap:12px; min-width:0; }
.order-main strong, .order-main span { display:block; }
.order-main span { color:var(--muted); font-size:.82rem; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.order-icon { width:43px; height:43px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,rgba(244,25,73,.18),rgba(76,255,0,.08)); color:white; font-weight:850; flex:0 0 auto; }
.chevron { font-size:1.6rem; color:#6f7b85; }
.status-pill, .role-pill, .coming-pill { display:inline-flex; align-items:center; border-radius:999px; padding:6px 10px; font-size:.74rem; font-weight:800; border:1px solid var(--line); white-space:nowrap; }
.status-pending { color:#ffd19b; background:rgba(255,173,51,.09); border-color:rgba(255,173,51,.18); }
.status-claimed { color:#8fdcff; background:rgba(25,191,224,.09); border-color:rgba(25,191,224,.18); }
.status-in_progress { color:#80baff; background:rgba(22,141,240,.09); border-color:rgba(22,141,240,.18); }
.status-qc { color:#d6a7ff; background:rgba(166,91,255,.09); border-color:rgba(166,91,255,.18); }
.status-completed { color:#8cff91; background:rgba(76,255,0,.08); border-color:rgba(76,255,0,.17); }
.status-cancelled { color:#ff91a8; background:rgba(244,25,73,.1); border-color:rgba(244,25,73,.2); }
.empty-state { text-align:center; border:1px dashed var(--line-strong); padding:37px 20px; border-radius:15px; color:var(--muted); }
.empty-state strong, .empty-state span { display:block; }
.empty-state strong { color:var(--text); margin-bottom:6px; }
.empty-state .button { margin-top:16px; }
.empty-state.compact { padding:17px; }
.notification-list { display:grid; gap:10px; }
.notification-item { display:flex; gap:13px; padding:16px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.018); }
.notification-dot { width:9px; height:9px; margin-top:6px; border-radius:50%; background:var(--blue); flex:0 0 auto; }
.notification-item.success .notification-dot { background:#4dff78; }
.notification-item.warning .notification-dot { background:var(--pink); }
.notification-item strong { display:block; }
.notification-item p { color:var(--muted); margin:4px 0; }
.notification-item small { color:#687580; }
.profile-grid { display:grid; grid-template-columns:320px 1fr; gap:18px; }
.profile-card { text-align:center; }
.profile-card img { width:105px; height:105px; border-radius:50%; object-fit:cover; border:3px solid rgba(25,191,224,.18); }
.profile-card h2 { margin:14px 0 4px; }
.profile-card p { color:var(--muted); margin:0 0 13px; }
.role-pill { color:#9eeaff; background:rgba(25,191,224,.08); border-color:rgba(25,191,224,.18); }
.detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.detail-grid > div { padding:14px; border:1px solid var(--line); background:rgba(255,255,255,.018); border-radius:13px; }
.detail-grid span, .detail-grid strong { display:block; }
.detail-grid span { color:var(--muted); font-size:.78rem; margin-bottom:5px; }
.help-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.help-card h2 { margin:8px 0; }
.help-card p { color:var(--muted); line-height:1.6; min-height:74px; }

/* MODAL */
.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); }
.modal-card { position:relative; width:min(900px,100%); max-height:88vh; overflow:auto; background:#10171e; border:1px solid var(--line-strong); border-radius:24px; padding:27px; box-shadow:var(--shadow); }
.modal-close { position:sticky; float:right; top:0; z-index:2; width:37px; height:37px; border-radius:50%; border:1px solid var(--line); background:#151d25; color:white; font-size:1.45rem; cursor:pointer; }
.modal-title-row { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; clear:both; margin-top:5px; }
.modal-title-row h2 { margin:7px 0 2px; font-size:1.8rem; }
.modal-title-row p { color:var(--muted); margin:0; }
.order-details { margin-top:18px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.modal-section { padding-top:22px; margin-top:22px; border-top:1px solid var(--line); }
.modal-section h3 { margin:6px 0 12px; }
.description-box { padding:16px; border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.018); color:#c8d1d8; line-height:1.65; white-space:pre-wrap; }
.progress-track { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; margin:25px 0 5px; }
.progress-step { position:relative; text-align:center; color:#687580; }
.progress-step::before { content:""; position:absolute; left:-50%; right:50%; top:16px; height:2px; background:#26313a; z-index:0; }
.progress-step:first-child::before { display:none; }
.progress-step.done::before { background:linear-gradient(90deg,var(--blue),var(--green)); }
.progress-step span { position:relative; z-index:1; margin:auto; width:34px; height:34px; display:grid; place-items:center; border-radius:50%; border:2px solid #31404b; background:#111820; font-weight:800; }
.progress-step.done span { color:#07110a; background:var(--green); border-color:var(--green); }
.progress-step small { display:block; margin-top:7px; font-size:.72rem; }
.progress-step.done small { color:#dce5eb; }
.cancelled-banner { margin:20px 0; border:1px solid rgba(244,25,73,.24); background:rgba(244,25,73,.08); color:#ff9ab0; padding:14px; border-radius:13px; }
.timeline { display:grid; gap:0; }
.timeline-item { position:relative; display:grid; grid-template-columns:18px 1fr; gap:9px; padding-bottom:18px; }
.timeline-item::after { content:""; position:absolute; left:4px; top:13px; bottom:0; width:1px; background:#28343e; }
.timeline-item:last-child::after { display:none; }
.timeline-dot { margin-top:5px; width:9px; height:9px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(25,191,224,.08); }
.timeline-item strong, .timeline-item p, .timeline-item small { display:block; }
.timeline-item p { color:var(--muted); margin:3px 0; }
.timeline-item small { color:#687580; }
.coming-soon-row { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-top:22px; padding:17px; border:1px dashed rgba(76,255,0,.17); background:rgba(76,255,0,.025); border-radius:15px; }
.coming-soon-row strong, .coming-soon-row span { display:block; }
.coming-soon-row > div > span { color:var(--muted); margin-top:3px; font-size:.84rem; }
.coming-pill { color:#9cff74; border-color:rgba(76,255,0,.18); }
.toast-root { position:fixed; right:22px; bottom:22px; z-index:200; display:grid; gap:9px; }
.toast { min-width:250px; max-width:370px; padding:13px 15px; border-radius:13px; border:1px solid rgba(76,255,0,.2); background:#132018; box-shadow:var(--shadow); }
.toast.error { border-color:rgba(244,25,73,.24); background:#251219; color:#ffc0ce; }

@media (max-width: 1050px) {
  .login-layout { grid-template-columns:1fr; }
  .login-brand-panel { min-height:55vh; }
  .login-card-wrap { padding:55px 25px; }
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .help-grid { grid-template-columns:1fr; }
}

@media (max-width: 820px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:-285px; width:270px; transition:.2s ease; box-shadow:var(--shadow); }
  .sidebar.open { left:0; }
  .mobile-menu { display:inline-grid; place-items:center; }
  .top-user { margin-left:auto; }
  .profile-grid { grid-template-columns:1fr; }
  .order-details { grid-template-columns:repeat(2,1fr); }
}

@media (max-width: 650px) {
  .content { padding:19px 14px 40px; }
  .topbar { align-items:flex-start; }
  .top-user > div { display:none; }
  .hero-card { align-items:flex-start; flex-direction:column; }
  .stats-grid { grid-template-columns:1fr 1fr; }
  .section-card { padding:17px; }
  .toolbar, .toolbar .control:first-child { width:100%; min-width:0; }
  .toolbar .control { width:100%; }
  .brand-lockup { grid-template-columns:1fr; }
  .brand-mark-large { width:90px; }
  .login-feature-grid { grid-template-columns:1fr; }
  .login-brand-panel { padding:48px 25px; }
  .login-card { padding:27px; }
  .detail-grid, .order-details { grid-template-columns:1fr; }
  .progress-step small { font-size:.62rem; }
  .progress-step span { width:29px; height:29px; }
  .progress-step::before { top:14px; }
  .modal-backdrop { padding:10px; }
  .modal-card { padding:20px; max-height:94vh; }
  .coming-soon-row { align-items:flex-start; flex-direction:column; }
}