:root {
  --bg: #0b0c11;
  --bg-soft: #111219;
  --surface: #171820;
  --surface-2: #1d1f29;
  --border: #2b2d39;
  --text: #f7f7fb;
  --muted: #a9abba;
  --primary: #8d63ff;
  --primary-2: #b298ff;
  --accent: #f4b942;
  --danger: #ff637d;
  --success: #35d49a;
  --warning: #f4b942;
  --shadow: 0 20px 60px rgba(0,0,0,.28);
  --radius: 18px;
  --radius-sm: 12px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }
.container { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.row { display: flex; gap: 12px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack { display: grid; gap: 14px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.card { background: linear-gradient(180deg, rgba(255,255,255,.025), transparent), var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: 0 1px 0 rgba(255,255,255,.03) inset; }
.card.compact { padding: 15px; border-radius: var(--radius-sm); }
.card-title { margin: 0 0 4px; font-size: 18px; }
.card-subtitle { margin: 0; color: var(--muted); font-size: 14px; }
.badge { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 3px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: 12px; background: rgba(255,255,255,.025); }
.badge.success { color: var(--success); border-color: rgba(53,212,154,.35); background: rgba(53,212,154,.08); }
.badge.warning { color: var(--warning); border-color: rgba(244,185,66,.35); background: rgba(244,185,66,.08); }
.badge.danger { color: var(--danger); border-color: rgba(255,99,125,.35); background: rgba(255,99,125,.08); }
.btn { border: 1px solid var(--border); border-radius: 12px; padding: 11px 16px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 750; background: var(--surface-2); color: var(--text); transition: .18s ease; }
.btn:hover { transform: translateY(-1px); border-color: #3d4050; }
.btn:active { transform: translateY(0); }
.btn.primary { border-color: transparent; background: linear-gradient(135deg, var(--primary), #6e45df); box-shadow: 0 10px 28px rgba(141,99,255,.25); }
.btn.accent { border-color: transparent; background: linear-gradient(135deg, var(--accent), #d18c1f); color: #17120a; }
.btn.ghost { background: transparent; }
.btn.danger { color: #fff; border-color: rgba(255,99,125,.35); background: rgba(255,99,125,.12); }
.btn.small { min-height: 34px; padding: 7px 11px; border-radius: 10px; font-size: 13px; }
.btn.full { width: 100%; }
.icon-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border); color: var(--text); background: var(--surface-2); display: inline-grid; place-items: center; font-size: 20px; }
.field { display: grid; gap: 7px; }
.field label { font-size: 13px; font-weight: 700; color: #d5d6df; }
.field small { color: var(--muted); }
.input, .select, .textarea { width: 100%; border: 1px solid var(--border); border-radius: 12px; background: #101117; color: var(--text); padding: 11px 13px; outline: none; transition: .18s ease; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(141,99,255,.14); }
.textarea { resize: vertical; min-height: 110px; }
.checkbox { display: flex; gap: 9px; align-items: center; color: var(--muted); font-size: 14px; }
.checkbox input { accent-color: var(--primary); width: 18px; height: 18px; }
.divider { border: 0; height: 1px; background: var(--border); margin: 18px 0; }
.table-wrap { overflow: auto; border: 1px solid var(--border); border-radius: 14px; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { text-align: left; padding: 13px 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
th { color: var(--muted); background: #12131a; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
tr:last-child td { border-bottom: 0; }
.empty { padding: 38px 20px; text-align: center; color: var(--muted); }
.kpi { min-height: 126px; display: grid; align-content: space-between; }
.kpi strong { font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
.kpi span { color: var(--muted); font-size: 13px; }
.progress { height: 8px; border-radius: 999px; background: #0e0f15; overflow: hidden; }
.progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--primary),var(--accent)); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(4,5,8,.72); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 16px; z-index: 1000; opacity: 0; transition: .18s ease; }
.modal-backdrop.open { opacity: 1; }
.modal-card { width: min(680px,100%); max-height: min(88vh,900px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); transform: translateY(12px) scale(.985); transition: .18s ease; overflow: hidden; }
.modal-backdrop.open .modal-card { transform: translateY(0) scale(1); }
.modal-head, .modal-foot { padding: 16px 18px; display: flex; gap: 12px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.modal-head h2 { margin: 0; font-size: 19px; }
.modal-foot { border-top: 1px solid var(--border); border-bottom: 0; justify-content: flex-end; }
.modal-body { padding: 18px; overflow: auto; }
#toast-container { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 10px; z-index: 2000; }
.toast { min-width: 240px; max-width: 420px; padding: 13px 15px; border-radius: 12px; border: 1px solid var(--border); background: #191b24; box-shadow: var(--shadow); transform: translateX(120%); transition: .24s ease; }
.toast.show { transform: translateX(0); }
.toast.success { border-color: rgba(53,212,154,.35); }
.toast.error { border-color: rgba(255,99,125,.4); }
.loading { position: relative; opacity: .65; pointer-events: none; }
.skeleton { min-height: 18px; border-radius: 8px; background: linear-gradient(90deg,#171820,#22242e,#171820); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .container { width: min(100% - 22px,1180px); }
  .grid-2,.grid-3,.grid-4 { grid-template-columns: 1fr; }
  .card { padding: 16px; border-radius: 15px; }
  .row.mobile-stack { align-items: stretch; flex-direction: column; }
  .btn.mobile-full { width: 100%; }
  #toast-container { left: 11px; right: 11px; bottom: 11px; }
  .toast { min-width: 0; max-width: none; }
}
.input-with-suffix { display:flex; align-items:center; border:1px solid var(--border); border-radius:12px; background:#101117; overflow:hidden; transition:.18s ease; }
.input-with-suffix:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(141,99,255,.14); }
.input-with-suffix .input { border:0; border-radius:0; box-shadow:none; min-width:0; }
.input-with-suffix span { padding:0 12px; color:var(--muted); white-space:nowrap; font-size:13px; border-left:1px solid var(--border); }
@media (max-width:560px) { .input-with-suffix span { display:none; } }

/* AscentShop v1.1 — rolagem, ajuda e modais responsivos */
html { scrollbar-width: thin; scrollbar-color: var(--primary) #101117; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb,var(--primary) 72%,#fff) color-mix(in srgb,var(--surface) 88%,#000); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: color-mix(in srgb,var(--surface) 86%,#000); border-radius: 999px; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg,var(--primary-2),var(--primary)); border: 2px solid color-mix(in srgb,var(--surface) 86%,#000); border-radius: 999px; }
*::-webkit-scrollbar-thumb:hover { background: var(--primary-2); }
html.modal-open, html.modal-open body { overflow: hidden; }
.modal-backdrop { align-items: start; overflow-y: auto; overscroll-behavior: contain; padding: clamp(10px,2.5vh,28px) 16px; }
.modal-card { width: min(1040px,100%); max-height: none; overflow: visible; margin: auto; }
.modal-card.modal-small { width:min(580px,100%); }
.modal-card.modal-wide { width:min(1180px,100%); }
.modal-head { position: sticky; top: 0; z-index: 5; background: color-mix(in srgb,var(--surface) 94%,transparent); backdrop-filter: blur(16px); border-radius: 20px 20px 0 0; }
.modal-body { overflow: visible; }
.modal-form-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:14px; align-items:start; }
.modal-form-grid > .field { grid-column:span 6; }
.modal-form-grid > .field.full, .modal-form-grid > .full { grid-column:1/-1; }
.modal-form-grid > .field.third { grid-column:span 4; }
.modal-form-grid > .field.quarter { grid-column:span 3; }
.help-wrap { display:inline-flex; align-items:center; gap:6px; position:relative; vertical-align:middle; }
.help-tip { width:19px; height:19px; min-width:19px; border-radius:50%; border:1px solid color-mix(in srgb,var(--primary) 55%,var(--border)); background:rgba(141,99,255,.12); color:#dcd3ff; display:inline-grid; place-items:center; padding:0; font-size:11px; font-weight:900; line-height:1; cursor:help; }
.help-tip:hover, .help-tip:focus-visible, .help-tip.open { background:var(--primary); color:#fff; outline:none; }
.help-bubble { position:fixed; z-index:3000; width:min(300px,calc(100vw - 24px)); padding:11px 13px; border:1px solid color-mix(in srgb,var(--primary) 42%,var(--border)); border-radius:12px; background:#171923; color:#f4f2ff; box-shadow:0 16px 50px rgba(0,0,0,.42); font-size:12px; line-height:1.5; pointer-events:none; opacity:0; transform:translateY(5px); transition:.14s ease; }
.help-bubble.show { opacity:1; transform:translateY(0); }
.tutorial-launch { gap:7px; width:auto; padding-inline:12px; font-size:13px; }
.tutorial-launch span { font-weight:800; }
.tour-layer { position:fixed; inset:0; z-index:4000; pointer-events:none; }
.tour-shade { position:absolute; inset:0; background:rgba(2,3,7,.72); backdrop-filter:blur(2px); pointer-events:auto; }
.tour-focus { position:fixed; border:2px solid var(--primary-2); border-radius:14px; box-shadow:0 0 0 9999px rgba(2,3,7,.70),0 0 0 6px rgba(141,99,255,.18),0 18px 60px rgba(0,0,0,.45); transition:.22s ease; pointer-events:none; }
.tour-popover { position:fixed; width:min(360px,calc(100vw - 24px)); padding:17px; border:1px solid #4e3d85; border-radius:16px; background:#171923; color:#f7f5ff; box-shadow:0 22px 70px rgba(0,0,0,.55); pointer-events:auto; }
.tour-popover small { color:var(--primary-2); font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.tour-popover h3 { margin:7px 0 8px; font-size:18px; }
.tour-popover p { margin:0; color:#bfc1d2; line-height:1.55; font-size:13px; }
.tour-actions { display:flex; justify-content:space-between; gap:8px; margin-top:15px; }
.tour-actions .group { display:flex; gap:8px; }
.tour-skip { border:0; background:transparent; color:var(--muted); padding:8px 0; }
.tour-target-active { position:relative; z-index:4001 !important; }
@media (max-width:760px) {
  .modal-backdrop { display:block; padding:0; background:var(--surface); }
  .modal-card, .modal-card.modal-small, .modal-card.modal-wide { width:100%; min-height:100dvh; border:0; border-radius:0; box-shadow:none; margin:0; }
  .modal-head { top:0; border-radius:0; padding:13px 14px; }
  .modal-body { padding:14px; }
  .modal-foot { padding:13px 14px; position:sticky; bottom:0; background:var(--surface); }
  .modal-form-grid { grid-template-columns:1fr; }
  .modal-form-grid > .field, .modal-form-grid > .field.third, .modal-form-grid > .field.quarter, .modal-form-grid > .full { grid-column:1; }
  .tutorial-launch { width:40px; padding:0; }
  .tutorial-launch span { display:none; }
  .tour-popover { left:12px !important; right:12px !important; bottom:12px !important; top:auto !important; width:auto; }
}