@font-face { font-family:Tommy; src:url("Font/MADE TOMMY Bold_PERSONAL USE.otf") format("opentype"); font-weight:700; font-display:swap; }
@font-face { font-family:Akira; src:url("Font/Akira Expanded Demo.otf") format("opentype"); font-display:swap; }
:root { --orange:#ff8900;
  --orange-rgb: 255, 137, 0;
 --orange-soft:rgba(var(--orange-rgb),.1); --ink:#0d0d0d; --panel:#131313; --panel-2:#181818; --line:#2c2925; --text:#e5e0da; --muted:#8d8881; --green:#49d18d; --red:#ff6b68; }
* { box-sizing:border-box; }
html { color-scheme:dark; background:var(--ink); }
html {
  background:
    linear-gradient(rgba(var(--orange-rgb),.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--orange-rgb),.10) 1px, transparent 1px),
    radial-gradient(circle at 86% 0, rgba(var(--orange-rgb),.1), transparent 28%),
    #0d0d0d;
  background-size: 76px 76px, 76px 76px, auto, auto;
  background-attachment: fixed;
}

/* Wireframe do fundo — mesmo desenho da home. O halo é a mesma grade com traço
   largo e quase transparente; sem filter: blur(), que numa camada do tamanho da
   janela custaria uma rasterização inteira por quadro. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(var(--orange-rgb),.055) 3px, transparent 3px),
    linear-gradient(90deg, rgba(var(--orange-rgb),.055) 3px, transparent 3px);
  background-size: 76px 76px;
  background-position: -1px -1px;
  animation: gridBreath 14s ease-in-out infinite;
}
@keyframes gridBreath {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; opacity: .7; }
}

body { margin:0; min-height:100vh; color:var(--text); background:transparent; font:400 14px Arial,sans-serif; }
button,a,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
.account-header { position:sticky; z-index:10; top:0; height:78px; padding:0 max(24px,calc((100vw - 1400px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(13,13,13,.88); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; font:700 18px Tommy,Arial,sans-serif; }.brand img { width:42px; height:42px; object-fit:contain; }.brand span { color:var(--orange); }
.account-header nav { display:flex; align-items:center; gap:10px; }.account-header nav a,.account-header nav button { min-height:38px; padding:0 14px; display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:10px; color:#b9b4ad; background:#121212; text-decoration:none; cursor:pointer; }.account-header nav a:hover,.account-header nav button:hover { color:#fff; border-color:rgba(var(--orange-rgb),.5); }
.account-shell { width:min(1400px,calc(100% - 48px)); margin:0 auto; padding:54px 0 90px; }
.account-state { min-height:calc(100vh - 220px); display:grid; place-items:center; text-align:center; }.account-state--loading img { width:74px; animation:pulse 1s ease-in-out infinite alternate; }.account-state--loading p { color:var(--muted); }.account-state[hidden],#account-dashboard[hidden] { display:none; }
@keyframes pulse { to { transform:scale(.82); opacity:.55; } }
.login-card { width:min(620px,100%); padding:50px; border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg,rgba(28,24,19,.94),rgba(16,16,16,.98)); box-shadow:0 40px 100px rgba(0,0,0,.35); text-align:left; }.section-kicker { color:var(--orange); font:700 10px Tommy,Arial,sans-serif; letter-spacing:.16em; }.login-card h1 { margin:14px 0 18px; color:#ece7e1; font:400 clamp(38px,6vw,66px)/.98 Akira,Impact,sans-serif; letter-spacing:-.04em; }.login-card h1 em { color:var(--orange); font-style:normal; }.login-card > p { max-width:500px; margin:0 0 28px; color:var(--muted); line-height:1.65; }
.discord-button { width:100%; min-height:66px; padding:10px 16px; display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:13px; border:1px solid rgba(var(--orange-rgb),.35); border-radius:14px; color:#eee7df; background:#1d1711; text-align:left; cursor:pointer; transition:.2s; }.discord-button:hover { transform:translateY(-2px); border-color:var(--orange); background:#251b11; }.discord-mark { width:42px; height:42px; display:grid; place-items:center; border-radius:11px; color:var(--orange); background:var(--orange-soft); }.discord-button strong,.discord-button small { display:block; }.discord-button small { margin-top:4px; color:#827a72; font-size:10px; }.discord-button b { color:var(--orange); }.discord-button:disabled { cursor:not-allowed; opacity:.45; transform:none; }.login-card > small { display:block; margin-top:13px; color:var(--red); }
.profile-hero { min-height:170px; padding:30px 34px; display:flex; align-items:center; justify-content:space-between; gap:24px; border:1px solid var(--line); border-radius:22px; background:linear-gradient(110deg,#151515 10%,#1d1710); }.profile-identity { display:flex; align-items:center; gap:22px; }.profile-avatar { width:82px; height:82px; flex:none; display:grid; place-items:center; overflow:hidden; border:2px solid rgba(var(--orange-rgb),.55); border-radius:22px; color:#111; background:var(--orange); font:700 22px Tommy,sans-serif; }.profile-avatar img { width:100%; height:100%; object-fit:cover; }.profile-identity h1 { margin:8px 0 5px; font:700 clamp(27px,4vw,42px) Tommy,Arial,sans-serif; }.profile-identity p { margin:0; color:var(--muted); }.profile-security { min-width:220px; padding:14px 16px; display:flex; align-items:center; gap:11px; border:1px solid rgba(73,209,141,.2); border-radius:13px; background:rgba(73,209,141,.05); }.profile-security i { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 16px var(--green); }.profile-security strong,.profile-security small { display:block; }.profile-security strong { font-size:11px; }.profile-security small { margin-top:3px; color:#777f79; font-size:9px; }
.account-metrics { margin:18px 0 50px; display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.account-metrics article { min-height:116px; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }.account-metrics span,.account-metrics small { display:block; color:var(--muted); }.account-metrics span { font:700 9px Tommy,sans-serif; letter-spacing:.12em; text-transform:uppercase; }.account-metrics strong { display:block; margin:10px 0 4px; color:#fff; font:700 28px Tommy,sans-serif; }.account-metrics small { font-size:9px; }
.orders-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }.orders-heading h2 { margin:7px 0 4px; font:700 28px Tommy,sans-serif; }.orders-heading p { margin:0; color:var(--muted); font-size:11px; }.order-filters { padding:4px; display:flex; gap:4px; border:1px solid var(--line); border-radius:12px; background:#111; }.order-filters button { min-height:34px; padding:0 13px; border:0; border-radius:8px; color:#817b74; background:transparent; font-size:10px; cursor:pointer; }.order-filters button.active { color:#16110c; background:var(--orange); font-weight:700; }
.orders-list { display:grid; gap:14px; }.order-card { overflow:hidden; border:1px solid var(--line); border-radius:18px; background:var(--panel); }.order-card__header { padding:18px 20px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); }.order-card__identity { display:flex; align-items:center; gap:14px; }.order-provider { width:42px; height:42px; display:grid; place-items:center; border-radius:12px; background:#0d0d0d; }.order-provider img { width:34px; height:34px; object-fit:contain; }.order-card__identity span,.order-card__identity strong,.order-card__identity small { display:block; }.order-card__identity span { color:#756f68; font-size:8px; letter-spacing:.1em; }.order-card__identity strong { margin:3px 0; font-size:12px; }.order-card__identity small { color:#77716b; font-size:9px; }.order-card__status { padding:7px 10px; border-radius:999px; font:700 8px Tommy,sans-serif; letter-spacing:.08em; }.status--paid { color:var(--green); background:rgba(73,209,141,.1); }.status--pending { color:#ffc15a; background:rgba(255,193,90,.1); }.status--failed,.status--cancelled,.status--refunded { color:var(--red); background:rgba(255,107,104,.1); }
.order-products { padding:6px 20px; }.library-item { padding:17px 0; display:grid; grid-template-columns:76px minmax(180px,1fr) auto; align-items:center; gap:16px; border-bottom:1px solid #26231f; }.library-item:last-child { border-bottom:0; }.library-cover { width:76px; aspect-ratio:16/10; overflow:hidden; border-radius:10px; background:#0c0c0c; }.library-cover img { width:100%; height:100%; object-fit:cover; }.library-cover span { width:100%; height:100%; display:grid; place-items:center; color:var(--orange); font:700 10px Tommy,sans-serif; }.library-copy h3 { margin:0 0 5px; font-size:13px; }.library-copy p { margin:0; color:#79736d; font-size:9px; }.library-meta { margin-top:9px; display:flex; align-items:center; flex-wrap:wrap; gap:6px; }.library-meta span { padding:5px 7px; border:1px solid #302c27; border-radius:6px; color:#8e8881; font-size:8px; }.library-meta .update-badge { color:var(--orange); border-color:rgba(var(--orange-rgb),.32); background:var(--orange-soft); }.library-notes { margin-top:8px!important; color:#a79f96!important; line-height:1.5; }.library-actions { max-width:420px; display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:7px; }.action-button { min-height:36px; padding:0 11px; display:inline-flex; align-items:center; border:1px solid #38332d; border-radius:9px; color:#c8c1b9; background:#171717; font-size:9px; font-weight:700; text-decoration:none; cursor:pointer; }.action-button:hover { color:#fff; border-color:rgba(var(--orange-rgb),.55); }.action-button--primary { color:#15100a; border-color:var(--orange); background:var(--orange); }.action-button:disabled { opacity:.38; cursor:not-allowed; }.license { width:100%; display:flex; align-items:center; justify-content:flex-end; gap:7px; color:#67625c; font:10px monospace; }.license code { padding:5px 7px; border-radius:6px; background:#0c0c0c; }.license button { border:0; color:var(--orange); background:transparent; cursor:pointer; font-size:9px; }.protection { width:100%; padding:9px 11px; display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:6px 10px; border:1px solid #302c27; border-radius:9px; background:#101010; }.protection > span { color:var(--orange); font:700 8px Tommy,sans-serif; letter-spacing:.08em; }.protection strong { color:#c8c1b9; font-size:9px; font-weight:700; }.protection small { color:#79736d; font-size:8px; }.protection .action-button { min-height:30px; font-size:8px; }.protection__pending { color:var(--orange)!important; }.protection--blocked { border-color:rgba(255,94,98,.42); background:rgba(255,94,98,.07); }.protection--blocked > span { color:#ff5e62; }.protection--pending { border-color:rgba(var(--orange-rgb),.42); background:rgba(var(--orange-rgb),.07); }.protection strong,.protection small { width:100%; text-align:right; }.protection b { color:#ddd8d1; }
.order-card__footer { padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-top:1px solid var(--line); background:#101010; }.order-total span,.order-total strong { display:block; }.order-total span { color:#716b65; font-size:8px; text-transform:uppercase; }.order-total strong { margin-top:3px; font-size:14px; }/* Politica de reembolso no proprio pedido: dita onde o cliente vai procurar
   quando tiver problema, em vez de so nos Termos. */
.order-card__support { margin:0; padding:0 20px 15px; color:#6f6a64; font-size:9px; line-height:1.65; border-top:1px solid var(--line); padding-top:12px; }
.empty-orders { padding:70px 25px; border:1px dashed #39342e; border-radius:18px; text-align:center; }.empty-orders h3 { margin:0 0 8px; }.empty-orders p { margin:0 0 20px; color:var(--muted); }.empty-orders a { color:var(--orange); }
.review-dialog { width:min(520px,calc(100% - 28px)); padding:0; border:1px solid var(--line); border-radius:20px; color:var(--text); background:#151515; box-shadow:0 30px 100px rgba(0,0,0,.7); }.review-dialog::backdrop { background:rgba(0,0,0,.78); backdrop-filter:blur(5px); }.review-dialog form { position:relative; padding:30px; }.review-dialog h2 { margin:8px 0 5px; font:700 25px Tommy,sans-serif; }.review-dialog p { margin:0 0 21px; color:var(--muted); }.review-dialog label { margin-top:12px; display:grid; gap:7px; color:#aaa39b; font-size:10px; font-weight:700; }.review-dialog input,.review-dialog select,.review-dialog textarea { width:100%; border:1px solid #38332d; border-radius:10px; outline:0; color:#eee7df; background:#0e0e0e; }.review-dialog input,.review-dialog select { height:43px; padding:0 12px; }.review-dialog textarea { padding:12px; resize:vertical; }.review-dialog input:focus,.review-dialog select:focus,.review-dialog textarea:focus { border-color:var(--orange); }.dialog-close { position:absolute; top:18px; right:18px; width:34px; height:34px; border:1px solid var(--line); border-radius:9px; color:#aaa; background:#111; cursor:pointer; }.primary-button { width:100%; min-height:46px; margin-top:20px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; border:0; border-radius:10px; color:#17110a; background:var(--orange); font-weight:800; cursor:pointer; }.primary-button:disabled { opacity:.5; cursor:wait; }
.account-toast { position:fixed; z-index:30; right:24px; bottom:24px; max-width:360px; padding:14px 17px; border:1px solid rgba(var(--orange-rgb),.4); border-radius:11px; color:#eee; background:#1c1711; opacity:0; visibility:hidden; transform:translateY(12px); transition:.25s; }.account-toast.show { opacity:1; visibility:visible; transform:none; }
@media (max-width:900px) { .account-metrics { grid-template-columns:repeat(2,1fr); }.profile-hero,.orders-heading { align-items:flex-start; flex-direction:column; }.profile-security { width:100%; }.library-item { grid-template-columns:68px 1fr; }.library-actions { grid-column:1/-1; max-width:none; justify-content:flex-start; }.license { justify-content:flex-start; } }
@media (max-width:580px) { .account-header { height:66px; padding:0 15px; }.brand strong { display:none; }.account-header nav a,.account-header nav button { padding:0 10px; font-size:11px; }.account-shell { width:calc(100% - 28px); padding:28px 0 60px; }.login-card { padding:30px 22px; }.profile-hero { padding:23px 20px; }.profile-identity { align-items:flex-start; gap:14px; }.profile-avatar { width:62px; height:62px; border-radius:17px; }.account-metrics { gap:8px; margin-bottom:38px; }.account-metrics article { min-height:102px; padding:16px; }.orders-heading { align-items:stretch; }.order-filters { overflow:auto; }.order-card__header,.order-card__footer { align-items:flex-start; }.order-card__header { padding:15px; }.order-products { padding:4px 15px; }.library-item { grid-template-columns:58px 1fr; gap:12px; }.library-cover { width:58px; }.library-actions .action-button { flex:1; justify-content:center; }.order-card__footer { flex-direction:column; padding:14px 15px; }.order-card__footer .action-button { width:100%; justify-content:center; } }


/* Pré-visualização local: só ativa quando o servidor roda em localhost/127.0.0.1 (ver detecção no <head> de cada página). */
:root[data-env="local"] {
  --orange: #01af80;
  --orange-rgb: 1, 175, 128;

}

/* Seletor de idioma no cabeçalho da conta. Mesmo desenho do checkout: quem troca
   de idioma numa tela espera reconhecer o controle na outra. */
.language-switcher { position:relative; }
.language-trigger { height:36px; padding:0 11px; display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:999px; color:var(--orange); background:rgba(255,255,255,.02); cursor:pointer; transition:border-color .25s, background .25s; }
.language-trigger:hover, .language-switcher.open .language-trigger { border-color:var(--orange); background:rgba(var(--orange-rgb),.08); }
.language-trigger svg { width:14px; fill:none; stroke:var(--orange); stroke-width:1.5; }
.language-trigger span { font-size:9px; font-weight:700; letter-spacing:.08em; }
.language-trigger i { color:var(--orange); font-size:9px; font-style:normal; transition:transform .25s; }
.language-switcher.open .language-trigger i { transform:rotate(180deg); }
.language-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:40; width:152px; padding:6px; border:1px solid var(--line); border-radius:13px; background:rgba(15,15,15,.97); backdrop-filter:blur(18px); box-shadow:0 18px 50px rgba(0,0,0,.4); opacity:0; visibility:hidden; transform:translateY(-7px); transition:.22s; }
.language-switcher.open .language-menu { opacity:1; visibility:visible; transform:none; }
.language-menu button { width:100%; padding:9px; display:flex; align-items:center; gap:11px; border:0; border-radius:9px; color:#a89f96; background:transparent; text-align:left; font-size:9px; cursor:pointer; }
.language-menu button:hover, .language-menu button.active { color:#f0e9e1; background:rgba(var(--orange-rgb),.09); }
.language-menu button span { width:20px; color:var(--orange); font-size:9px; font-weight:700; }

/* ==========================================================================
   MOVIMENTO DA AREA DO COMPRADOR
   --------------------------------------------------------------------------
   Arquetipo: Premium. E a biblioteca que a pessoa comprou — deve parecer
   valiosa, nao apressada. Mas o retorno de clique segue a tabela de duracoes
   (hover < 100ms, press < 150ms): elegancia no que entra, rapidez no que
   responde ao dedo.

   Identidade de movimento, tres constantes:
     curva  : cubic-bezier(.4,0,.2,1)  — 80% das animacoes
     tempos : 140ms rapido / 280ms padrao / 480ms lento
     entrada: subir 12px + aparecer

   Camadas: primaria (cartoes e botoes), secundaria (sombra, icone, borda),
   ambiente (o gridBreath do body, que ja existia).
   ========================================================================== */

:root {
  --mov: cubic-bezier(.4, 0, .2, 1);
  --mov-rapido: .14s;
  --mov-padrao: .28s;
  --mov-lento: .48s;
}

/* --- Entrada do painel ---------------------------------------------------- */
/* Cascata curta: metricas primeiro (o resumo), depois a lista. O orcamento
   total fica em ~400ms, dentro do limite de 500ms do stagger. */
@keyframes entradaSobe {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

#account-dashboard:not([hidden]) .profile-hero { animation: entradaSobe var(--mov-lento) var(--mov) both; }
#account-dashboard:not([hidden]) .account-metrics article { animation: entradaSobe var(--mov-lento) var(--mov) both; }
#account-dashboard:not([hidden]) .account-metrics article:nth-child(1) { animation-delay: .06s; }
#account-dashboard:not([hidden]) .account-metrics article:nth-child(2) { animation-delay: .12s; }
#account-dashboard:not([hidden]) .account-metrics article:nth-child(3) { animation-delay: .18s; }
#account-dashboard:not([hidden]) .account-metrics article:nth-child(4) { animation-delay: .24s; }
#account-dashboard:not([hidden]) .orders-heading { animation: entradaSobe var(--mov-lento) var(--mov) .28s both; }

/* Os pedidos sao renderizados pelo JS; a cascata cobre os primeiros da lista,
   que e o que cabe na tela. Do oitavo em diante entram sem atraso. */
.orders-list .order-card { animation: entradaSobe var(--mov-padrao) var(--mov) both; }
.orders-list .order-card:nth-child(1) { animation-delay: .32s; }
.orders-list .order-card:nth-child(2) { animation-delay: .38s; }
.orders-list .order-card:nth-child(3) { animation-delay: .44s; }
.orders-list .order-card:nth-child(4) { animation-delay: .50s; }
.orders-list .order-card:nth-child(5) { animation-delay: .56s; }
.orders-list .order-card:nth-child(n+6) { animation-delay: .60s; }

/* --- Cartao de pedido ----------------------------------------------------- */
/* Secundaria: a sombra cresce junto com a subida, dando peso ao cartao. */
.order-card {
  transition:
    transform var(--mov-padrao) var(--mov),
    border-color var(--mov-padrao) var(--mov),
    box-shadow var(--mov-padrao) var(--mov);
}
.order-card:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--orange-rgb), .3);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}

.library-item { transition: background-color var(--mov-rapido) var(--mov); }
.library-item:hover { background: rgba(255, 255, 255, .014); }

/* A capa acompanha o hover do item inteiro, nao so dela mesma. */
.library-cover { overflow: hidden; }
.library-cover img { display: block; transition: transform var(--mov-lento) var(--mov); }
.library-item:hover .library-cover img { transform: scale(1.04); }

/* --- Metricas ------------------------------------------------------------- */
.account-metrics article {
  transition: transform var(--mov-padrao) var(--mov), border-color var(--mov-padrao) var(--mov);
}
.account-metrics article:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--orange-rgb), .28);
}

/* --- Botoes de acao ------------------------------------------------------- */
/* Press: afunda 1px em 120ms. E o retorno tatil — precisa ser imediato. */
.action-button {
  transition:
    transform var(--mov-rapido) var(--mov),
    background-color var(--mov-rapido) var(--mov),
    border-color var(--mov-rapido) var(--mov),
    color var(--mov-rapido) var(--mov);
}
.action-button:hover { transform: translateY(-1px); }
.action-button:active { transform: translateY(1px); transition-duration: .1s; }
.action-button[disabled] { transform: none; }

/* O botao de baixar e o momento mais importante da pagina: ganha um brilho
   curto na borda ao passar o mouse. */
.action-button--primary { position: relative; overflow: hidden; }
.action-button--primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, .18), transparent 70%);
  transform: translateX(-120%);
  transition: transform var(--mov-lento) var(--mov);
  pointer-events: none;
}
.action-button--primary:hover::after { transform: translateX(120%); }

/* --- Filtros -------------------------------------------------------------- */
.order-filters button {
  position: relative;
  transition: color var(--mov-rapido) var(--mov);
}
/* Sublinhado cresce do centro ao virar o filtro ativo: diz qual respondeu. */
.order-filters button::after {
  content: "";
  position: absolute; left: 10px; right: 10px; bottom: 4px;
  height: 2px; border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transition: transform var(--mov-padrao) var(--mov);
}
.order-filters button.active::after { transform: scaleX(1); }

/* --- Selo de atualizacao -------------------------------------------------- */
/* Respiro lento de 3s: chama o olho sem competir com a leitura. */
@keyframes seloRespira {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--orange-rgb), .35); }
  50%      { box-shadow: 0 0 0 5px rgba(var(--orange-rgb), 0); }
}
.update-badge { animation: seloRespira 3s var(--mov) infinite; }

/* --- Protecao (troca de servidor) ----------------------------------------- */
.protection { transition: border-color var(--mov-padrao) var(--mov), background-color var(--mov-padrao) var(--mov); }
.protection--pending { animation: entradaSobe var(--mov-padrao) var(--mov) both; }

/* --- Aviso (toast) -------------------------------------------------------- */
/* O toast ja existe e ja anima (.account-toast/.show, mais acima no arquivo),
   com entrada e saida iguais em .25s. O guia pede saida 30-50% mais curta:
   quem some importa menos do que quem chega. Ajustamos so as duracoes. */
.account-toast { transition: opacity .16s var(--mov), visibility .16s var(--mov), transform .16s var(--mov); }
.account-toast.show { transition-duration: var(--mov-padrao); }

/* --- Estado vazio --------------------------------------------------------- */
.empty-orders { animation: entradaSobe var(--mov-lento) var(--mov) both; }

/* --- Foco visivel --------------------------------------------------------- */
/* Teclado precisa enxergar onde esta. Sem isso, toda a animacao acima nao
   serve para quem nao usa mouse. */
.action-button:focus-visible,
.order-filters button:focus-visible,
.discord-button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* --- Menos movimento ------------------------------------------------------ */
/* Transtorno vestibular: nada se move, mas todo estado continua legivel —
   hover ainda muda cor e borda, so nao desloca. */
@media (prefers-reduced-motion: reduce) {
  #account-dashboard:not([hidden]) .profile-hero,
  #account-dashboard:not([hidden]) .account-metrics article,
  #account-dashboard:not([hidden]) .orders-heading,
  .orders-list .order-card,
  .empty-orders,
  .protection--pending { animation: none; }
  .update-badge { animation: none; }
  .order-card:hover,
  .account-metrics article:hover,
  .action-button:hover,
  .action-button:active { transform: none; }
  .library-item:hover .library-cover img { transform: none; }
  .action-button--primary::after { display: none; }
  .order-card, .action-button, .account-metrics article,
  .order-filters button::after { transition-duration: .01ms; }
  .account-toast { transition-duration: .01ms; }
}

/* ===========================================================================
   Download com progresso
   ===========================================================================

   Identidade de movimento da loja (a mesma do motion.js): rápido 180ms, base
   420ms, curva de desaceleração forte na entrada e de aceleração na saída.
   Zero repique, com UMA exceção consciente — a confirmação do fim, onde um
   pulo único dá vida ao "pronto".

   Três camadas, para não ficar chapado:
     principal  — a barra enchendo e a cabeça luminosa correndo com ela;
     secundária — as fagulhas que saem da cabeça, o brilho correndo na palavra
                  "Baixando" e o contador de bytes;
     ambiente   — a aura atrás do painel, respirando devagar.
   =========================================================================== */
.download-dialog {
  width: min(430px, calc(100vw - 32px));
  padding: 0; border: 0; border-radius: 20px; background: transparent; color: var(--text); overflow: visible;
}
.download-dialog::backdrop { background: rgba(6,6,6,.76); animation: dlFundo 240ms ease-out both; }
@keyframes dlFundo { from { opacity: 0; } }

.dl {
  position: relative; isolation: isolate;
  padding: 30px 28px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 20px;
  background: linear-gradient(150deg, var(--panel) 20%, var(--panel-2));
  box-shadow: 0 28px 70px rgba(0,0,0,.6);
  /* Peso "pesado" (painel sobre a página): 380ms, dentro dos 300-400 da tabela. */
  animation: dlEntra 380ms cubic-bezier(.165,.84,.44,1) both;
}
@keyframes dlEntra { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.dl--saindo { animation: dlSai 200ms cubic-bezier(.55,.085,.68,.53) both; }
@keyframes dlSai { to { opacity: 0; transform: translateY(6px) scale(.98); } }

/* Ambiente: respiração lenta, em frequência longe da cabeça da barra para as
   duas não baterem juntas e a tela virar só pulsação. */
.dl__aura {
  position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 0%, rgba(var(--orange-rgb),.17), transparent 70%);
  animation: dlAura 3.6s ease-in-out infinite;
}
@keyframes dlAura { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.dl .section-kicker { margin: 0; }
.dl__title {
  margin: 0; font: 700 clamp(22px,5vw,29px) Tommy,Arial,sans-serif; letter-spacing: .01em;
  /* Secundária: o brilho corre pela palavra enquanto o arquivo vem — o mesmo
     recurso dos títulos da home, para parecer da mesma loja. */
  background-image: linear-gradient(100deg, var(--text) 20%, var(--orange) 45%, var(--text) 70%);
  background-size: 220% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: dlBrilho 2.1s linear infinite;
}
@keyframes dlBrilho { to { background-position: -220% center; } }
.dl__file { margin: -4px 0 2px; max-width: 100%; color: var(--muted); font-size: 12px; text-align: center; overflow-wrap: anywhere; }

.dl__track {
  position: relative; width: 100%; height: 7px; border-radius: 99px;
  background: rgba(255,255,255,.07); box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
}
.dl__fill {
  width: 0%; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, rgba(var(--orange-rgb),.65), var(--orange));
  /* Barra de progresso é a exceção em que linear é o certo: o dado é linear, e
     curva nenhuma mentiria menos sobre a velocidade. Os 200ms só costuram o
     salto entre um pedaço e outro que chega da rede. */
  transition: width 200ms linear, background 260ms ease-out;
}
.dl__head {
  position: absolute; top: 50%; left: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 10px var(--orange), 0 0 22px rgba(var(--orange-rgb),.8);
  transition: left 200ms linear, opacity 180ms ease-out;
}
.dl--ativo .dl__head { opacity: 1; animation: dlCabeca 1.1s ease-in-out infinite; }
@keyframes dlCabeca { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* Fagulhas: nascem na cabeça e ficam para trás, como as de quem corre. A
   camada cobre a faixa da barra; o JS põe cada uma no --x onde a cabeça está. */
.dl__particles { position: relative; width: 100%; height: 0; }
.dl__particle {
  position: absolute; bottom: 4px; left: var(--x); width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2);
  border-radius: 50%; background: var(--orange); box-shadow: 0 0 8px rgba(var(--orange-rgb),.9); pointer-events: none;
  animation: dlFagulha var(--t) cubic-bezier(.165,.84,.44,1) forwards;
}
@keyframes dlFagulha {
  from { opacity: 1; transform: translate(0,0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); }
}

.dl__stats { margin: 2px 0 0; width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dl__stats strong { font: 700 19px Tommy,Arial,sans-serif; font-variant-numeric: tabular-nums; }
.dl__stats span { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }

.dl__check { width: 54px; height: 54px; margin: 4px 0 -2px; display: none; fill: none; stroke: var(--green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dl__check circle { stroke: rgba(73,209,141,.3); stroke-dasharray: 145; stroke-dashoffset: 145; }
.dl__check path { stroke-dasharray: 32; stroke-dashoffset: 32; }
.dl--pronto .dl__check { display: block; }
.dl--pronto .dl__check circle { animation: dlTraco 420ms cubic-bezier(.165,.84,.44,1) forwards; }
.dl--pronto .dl__check path { animation: dlTraco 320ms cubic-bezier(.165,.84,.44,1) 140ms forwards; }
@keyframes dlTraco { to { stroke-dashoffset: 0; } }
/* O único repique da loja, e só aqui: a confirmação precisa ser sentida. */
.dl--pronto { animation: dlPulo 300ms cubic-bezier(.175,.885,.32,1.275) both; }
@keyframes dlPulo { 0% { transform: scale(1); } 45% { transform: scale(1.035); } 100% { transform: scale(1); } }
.dl--pronto .dl__title { background-image: none; color: var(--green); animation: none; }
.dl--pronto .dl__fill { background: var(--green); }
.dl--pronto .dl__head, .dl--pronto .dl__cancel { display: none; }

/* Erro é firme: oscila e para. Sem repique — nada aqui pode parecer brincadeira. */
.dl--erro { animation: dlTremor 340ms ease-in-out both; }
@keyframes dlTremor { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 45% { transform: translateX(7px); } 70% { transform: translateX(-4px); } }
.dl--erro .dl__title { background-image: none; color: var(--red); animation: none; }
.dl--erro .dl__fill { background: var(--red); }
.dl--erro .dl__head { display: none; }
.dl__cancel { margin-top: 6px; }

/* Menos movimento: o dado continua (a barra enche, a porcentagem anda) e o
   enfeite sai. Nada de fagulha, brilho correndo, respiração, pulo ou tremor —
   o JS também nem chega a criar partícula. */
@media (prefers-reduced-motion: reduce) {
  .dl, .dl--saindo, .dl--pronto, .dl--erro, .dl__aura, .dl__head, .download-dialog::backdrop { animation: none; }
  .dl__title { background-image: none; color: var(--text); animation: none; }
  .dl--pronto .dl__title { color: var(--green); }
  .dl--erro .dl__title { color: var(--red); }
  .dl__fill, .dl__head { transition-duration: .01ms; }
  .dl__check circle, .dl__check path { stroke-dashoffset: 0; animation: none; }
  .dl__particle { display: none; }
}