@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Manrope:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================================
   Catalog Toolkit — dark emerald theme
   Base verde quase-preta, verde vivo como destaque, menta no glow.
   Linguagem enxuta: linhas finas, raios menores, pesos leves.
   Display: Bricolage Grotesque · Texto: Manrope · Serifa
   (.ser): Fraunces itálico · Dados: IBM Plex Mono
   ============================================================ */

:root{
  --bg:#06110b;           /* verde quase-preto — base escura */
  --bg-2:#0a1a11;         /* campos */
  --surface:#0d2015;      /* cards */
  --surface-2:#0a1a11;
  --raised:#12301f;       /* realce */
  --line:rgba(173,235,179,.10);
  --line-strong:rgba(173,235,179,.19);

  --ink:#e9f5ec;
  --muted:#8fb6a0;
  --faint:#5f8570;

  --accent:#34d399;       /* verde vivo — interativo */
  --accent-2:#adebb3;     /* menta clara — glow/realce */
  --accent-soft:rgba(52,211,153,.13);
  --accent-line:rgba(52,211,153,.38);
  --mint:#adebb3;
  --mint-2:#7ee0a6;
  --pink:#ff8aa2;
  --on-accent:#062012;    /* texto sobre verde vivo */

  --ok:#34d399;
  --bad:#ff6b81;

  --shadow:0 24px 64px rgba(0,0,0,.55);
  --shadow-sm:0 10px 26px rgba(0,0,0,.4);
  --radius:13px;
  --radius-lg:18px;
  --radius-pill:999px;

  --eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --eye-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 4.24A9.1 9.1 0 0 1 12 4c6.5 0 10 7 10 7a13.2 13.2 0 0 1-1.67 2.68'/%3E%3Cpath d='M6.61 6.61A13.5 13.5 0 0 0 2 12s3.5 7 10 7a9.1 9.1 0 0 0 5.39-1.61'/%3E%3Cline x1='2' y1='2' x2='22' y2='22'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;
  font-family:Manrope,"Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle,rgba(173,235,179,.05) 1px,transparent 1.2px) 0 0/26px 26px,
    radial-gradient(820px 560px at 100% -4%,rgba(52,211,153,.16),transparent 60%),
    radial-gradient(680px 520px at -4% 104%,rgba(173,235,179,.08),transparent 58%),
    var(--bg);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

/* --- motion --- */
.fade-in{animation:fadeIn .5s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes panelIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes statusPop{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes glowPulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- typography ---------- */
h1,h2,h3,h4{font-family:"Bricolage Grotesque",Manrope,sans-serif;color:var(--ink);letter-spacing:-.022em;font-weight:600;line-height:1.12}
h1{margin:0;font-size:28px;font-weight:500}
h2{font-size:24px;margin:4px 0 10px}
h3{margin:14px 0 8px;font-size:18px}
h4{margin:6px 0;font-size:15px}
p{color:var(--muted);line-height:1.6}
a{color:var(--accent)}
.ser{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0}

/* ---------- app shell ---------- */
.shell{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:22px 22px 96px}

.topbar,.card,.login-card{
  border:1px solid var(--line);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:var(--shadow-sm)
}
.topbar{
  border-radius:var(--radius-pill);padding:12px 16px;display:flex;align-items:center;
  justify-content:space-between;gap:12px;position:relative;z-index:20;animation:panelIn .4s ease both
}
.brand{font-family:"Bricolage Grotesque";font-size:22px;font-weight:700;display:flex;align-items:center;gap:11px}
.logo{
  width:34px;height:34px;border-radius:11px;flex:0 0 auto;
  background:
    radial-gradient(circle at 32% 30%,#fff 0 12%,transparent 16%),
    linear-gradient(140deg,var(--accent),var(--accent-2) 70%);
  box-shadow:0 0 0 1px var(--line-strong),0 8px 22px rgba(21,160,95,.30);
  animation:glowPulse 3.6s ease-in-out infinite
}
.userbar{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;min-width:0}
.pill{
  border:1px solid var(--line);background:var(--raised);border-radius:var(--radius-pill);
  padding:8px 13px;font-weight:600;color:var(--muted);font-size:13px
}

/* ---------- user chip ---------- */
.user-chip{position:relative;padding-left:10px;border-left:1px solid var(--line)}
.user-chip-trigger{
  display:flex;align-items:center;gap:9px;padding:5px 12px 5px 5px;border-radius:var(--radius-pill);
  background:var(--raised);border:1px solid var(--line);color:var(--ink);box-shadow:none;
  min-height:44px;font:600 13px Manrope,sans-serif;cursor:pointer
}
.user-chip-trigger:hover{background:var(--raised);transform:none;box-shadow:none;filter:none}
.user-avatar{
  display:grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:0 0 auto;
  background:linear-gradient(140deg,var(--accent),var(--accent-2) 70%);color:var(--on-accent);font-weight:700;font-size:13px
}
.user-chip-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;min-width:0}
.user-chip-text b{font-size:13px;font-weight:600;color:var(--ink);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-chip-text small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.user-chip-caret{color:var(--faint);font-size:10px;transition:transform .16s ease}
.user-chip.open .user-chip-caret{transform:rotate(180deg)}
.user-chip-menu{
  position:absolute;top:calc(100% + 8px);right:0;min-width:180px;padding:6px;border-radius:16px;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));border:1px solid var(--line-strong);
  box-shadow:var(--shadow);display:grid;gap:2px;z-index:50;animation:cardIn .16s ease both
}
.user-chip-menu button{
  width:100%;justify-content:flex-start;background:transparent;color:var(--ink);box-shadow:none;
  border:0;border-radius:10px;padding:10px 12px;font:600 13px Manrope,sans-serif;min-height:auto
}
.user-chip-menu button:hover{background:var(--raised);transform:none;box-shadow:none;filter:none}
.user-chip-menu button.danger{color:var(--bad);background:transparent}
.user-chip-menu button.danger:hover{background:rgba(255,91,112,.14)}

.card{border-radius:var(--radius-lg);padding:26px;margin-top:20px;animation:panelIn .45s cubic-bezier(.2,.8,.2,1) both}

/* ---------- login ---------- */
.login-card{width:min(560px,100%);border-radius:var(--radius-lg);padding:30px;animation:panelIn .48s cubic-bezier(.2,.8,.2,1) both}
.login-head{margin-bottom:12px}
.login-badge{
  display:inline-flex;align-items:center;border:1px solid var(--accent-line);
  background:var(--accent-soft);border-radius:var(--radius-pill);padding:6px 12px;
  font-weight:700;color:var(--accent-2);font-size:11px;text-transform:uppercase;letter-spacing:.08em
}

/* ---------- controls ---------- */
button,.button{
  border:1px solid transparent;border-radius:var(--radius);padding:9px 16px;
  font:500 13.5px Manrope,sans-serif;color:var(--on-accent);cursor:pointer;letter-spacing:-.01em;
  background:var(--accent);
  box-shadow:0 4px 12px rgba(21,160,95,.18);
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;min-height:38px;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease
}
button:hover,.button:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(21,160,95,.26);filter:brightness(1.04)}
button:active,.button:active{transform:translateY(0) scale(.99)}
button:disabled{cursor:not-allowed;opacity:.5;transform:none;box-shadow:none}

.secondary{
  background:transparent;color:var(--ink);border-color:var(--line-strong);box-shadow:none
}
.secondary:hover{background:var(--raised);box-shadow:none;filter:none}
.danger{background:linear-gradient(135deg,#ff6f83,#e8384f);box-shadow:0 8px 20px rgba(232,56,79,.3)}

input,textarea,select{
  width:100%;border:1px solid var(--line-strong);outline:none;border-radius:var(--radius);
  padding:11px 13px;margin:7px 0;font:400 14px Manrope,sans-serif;color:var(--ink);
  background:var(--surface);transition:border-color .16s ease,box-shadow .16s ease
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus,select:focus{
  border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
textarea{min-height:160px;resize:vertical}

.field-label{display:grid;gap:6px;margin:9px 0;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.field-label select{margin:0}
.signup-type-fields input,.signup-type-fields select{animation:cardIn .22s ease both}
/* campo com ícone à esquerda / olho de ver-senha embutido à direita */
.in-field{position:relative;margin:7px 0}
.in-field input{margin:0;padding-left:40px}
.in-field .in-ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--faint);pointer-events:none;display:grid;place-items:center}
.in-field .in-ico svg{width:16px;height:16px;display:block}

.password-row{position:relative;display:block}
.password-row input{margin:7px 0;padding-right:42px}
.in-field.password-row input{margin:0}
.password-toggle{
  position:absolute;top:50%;right:7px;transform:translateY(-50%);
  min-width:0;height:30px;width:32px;min-height:0;padding:0;border:0;border-radius:8px;
  background:transparent;box-shadow:none;color:var(--faint);display:grid;place-items:center;
  cursor:pointer;font-size:0;line-height:0
}
.password-toggle::before{
  content:"";width:19px;height:19px;background:currentColor;
  -webkit-mask:var(--eye) center/contain no-repeat;mask:var(--eye) center/contain no-repeat
}
.password-row input[type="text"] ~ .password-toggle::before{-webkit-mask-image:var(--eye-off);mask-image:var(--eye-off)}
.password-toggle:hover{color:var(--ink);background:var(--raised);transform:translateY(-50%);box-shadow:none;filter:none}

/* ---------- nav ---------- */
.nav{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.nav a,.nav button{width:100%}
.active-nav{background:var(--accent)}
.topbar-nav{display:flex;align-items:center;gap:3px;margin:0;padding:4px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg-2)}
.topbar-nav a,.topbar-nav button{
  width:auto;min-height:34px;padding:7px 13px;border:0;border-radius:var(--radius-pill);
  background:transparent;box-shadow:none;color:var(--muted);font:600 12px Manrope,sans-serif;
  text-decoration:none;white-space:nowrap
}
.topbar-nav a:hover,.topbar-nav button:hover{background:var(--raised);color:var(--ink);transform:none}
.topbar-nav .active-nav{background:var(--accent);color:var(--on-accent);box-shadow:none}

/* ---------- tools / result cards ---------- */
.mode-row,.action-row{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.mode{display:none}.mode.active{display:block;animation:cardIn .26s ease both}
.mode-btn.active{background:var(--accent);color:var(--on-accent)}
.status{margin:12px 0;font-weight:600;color:var(--muted);white-space:pre-line}
.status span{display:inline-block;animation:statusPop .2s ease both}
.ok{color:var(--ok)}.error{color:var(--bad)}

.result-card{
  margin-top:16px;padding:18px;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  box-shadow:var(--shadow-sm);animation:cardIn .32s ease both;
  transition:transform .16s ease,border-color .16s ease
}
.result-card:hover{transform:translateY(-2px);border-color:var(--line-strong)}

.hero-result{display:flex;gap:18px;align-items:flex-start;margin-bottom:14px}
.cover{width:150px;height:150px;border-radius:18px;object-fit:cover;box-shadow:var(--shadow);background:var(--raised)}
.title{font-family:"Bricolage Grotesque";font-size:26px;font-weight:700;margin:6px 0;color:var(--ink)}
.subtitle{font-size:15px;color:var(--muted);margin:4px 0;font-weight:500}

.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.cell{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2);min-height:72px}
.label{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);font-weight:700;margin-bottom:7px}
.value{font-weight:600;word-break:break-word;white-space:pre-line;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:14px;color:var(--ink)}

.links{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.note{padding:13px 15px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);margin:12px 0;font-weight:500;animation:cardIn .22s ease both}
.note-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.row-actions{display:flex;gap:8px;flex-wrap:wrap}
.mini-pill{font-size:11px;padding:6px 10px;margin-left:6px;min-height:auto}

/* ============================================================
   ADMIN PANEL
   Local tokens so every admin surface shares one scale instead of
   the per-rule magic numbers this block used to carry.
   ------------------------------------------------------------
   1. tokens        5. data cells
   2. section head  6. actions
   3. stat strip    7. editors
   4. item cards    8. UUID lookup
   ============================================================ */

/* --- 1. tokens --- */
.shell{
  --ad-gap:10px;
  --ad-pad:14px;
  --ad-radius:16px;
  --ad-radius-sm:11px;
  --ad-label:9px;
  --ad-cols:4;
}

/* --- 2. section head --- */
.admin-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.admin-head p{margin-top:2px}

/* --- 3. stat strip --- */
.admin-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ad-gap);margin:16px 0}
.admin-overview:empty{display:none;margin:0}
.admin-stat{
  padding:var(--ad-pad) 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
  box-shadow:var(--shadow-sm);animation:cardIn .22s ease both
}
.admin-stat small{display:block;color:var(--faint);text-transform:uppercase;font-size:10px;font-weight:700;letter-spacing:.05em}
.admin-stat b{display:block;font-family:"Bricolage Grotesque";font-size:24px;margin-top:5px;color:var(--ink)}

/* --- 4. item cards --- */
.admin-list{display:grid;gap:var(--ad-gap);margin-top:var(--ad-gap)}
.admin-item{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--ad-pad);align-items:start;padding:var(--ad-pad);
  border:1px solid var(--line);border-radius:var(--ad-radius);background:var(--surface);
  box-shadow:var(--shadow-sm);animation:cardIn .22s ease both;transition:border-color .16s ease
}
.admin-item:hover{border-color:var(--line-strong)}
.admin-item+.admin-item{margin-top:0}
.admin-item-main{min-width:0}
.admin-title{font-family:"Bricolage Grotesque";font-size:16px;font-weight:700;color:var(--ink);word-break:break-word;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.admin-title span{font-family:Manrope,sans-serif;font-size:13px;color:var(--muted);font-weight:500}
.admin-title-sub{margin-top:3px;color:var(--muted);font-size:13px;font-weight:500;word-break:break-word}

/* --- 5. data cells (shared by admin-meta and user-summary) --- */
.admin-meta,.user-summary{display:grid;grid-template-columns:repeat(var(--ad-cols),minmax(0,1fr));gap:8px;margin-top:var(--ad-gap)}
.meta-cell,.summary-item{min-width:0;padding:10px;border:1px solid var(--line);border-radius:var(--ad-radius-sm);background:var(--bg-2)}
.meta-cell small,.summary-item small{display:block;margin-bottom:4px;text-transform:uppercase;color:var(--faint);font-size:var(--ad-label);font-weight:700;letter-spacing:.04em}
.meta-cell b,.summary-item b{display:block;color:var(--ink);font-size:12px;line-height:1.25;word-break:break-word}
.meta-cell b{font-family:"IBM Plex Mono",ui-monospace,monospace}
.meta-cell a{color:var(--accent-2);text-decoration:none}
.meta-cell a:hover{text-decoration:underline}

/* --- 6. actions --- */
.admin-actions{display:flex;gap:8px;align-items:flex-end;justify-content:flex-end;flex-wrap:wrap}
.admin-actions button{white-space:nowrap;min-height:40px;padding:10px 14px;font-size:13px}
.role-choice{display:grid;gap:5px;min-width:126px;color:var(--muted);font-size:10px;text-transform:uppercase;font-weight:700}
.role-choice select{margin:0;padding:10px 12px;border-radius:var(--ad-radius-sm)}
.danger-pill{background:rgba(255,91,112,.16);color:var(--bad);border:1px solid rgba(255,91,112,.3)}

/* --- 7. editors --- */
.admin-details{margin-top:var(--ad-gap)}
.admin-details summary{cursor:pointer;width:max-content;max-width:100%;padding:8px 13px;border-radius:var(--radius-pill);background:var(--raised);border:1px solid var(--line);color:var(--ink);font-size:11px;font-weight:600;list-style:none}
.admin-details summary::-webkit-details-marker{display:none}
.user-editor{display:grid;gap:var(--ad-gap);margin-top:var(--ad-gap);padding:13px;border-radius:14px;background:var(--bg-2);border:1px solid var(--line)}
.editor-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.editor-grid input,.editor-grid select{margin:0;padding:10px 12px;border-radius:var(--ad-radius-sm);font-size:13px}
.permission-grid{display:grid;grid-template-columns:repeat(var(--ad-cols),minmax(0,1fr));gap:7px}
.permission-toggle{display:flex;align-items:center;gap:7px;min-height:38px;padding:9px 11px;border-radius:var(--ad-radius-sm);background:var(--raised);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:11px}
.permission-toggle input{width:15px;height:15px;margin:0}
.login-history{display:grid;gap:7px;margin-top:var(--ad-gap)}
.login-history h4{margin:5px 0;color:var(--ink)}
.history-row{display:grid;gap:3px;padding:10px 12px;border-radius:var(--ad-radius-sm);background:var(--bg-2);border:1px solid var(--line)}
.history-row span,.history-row small{color:var(--muted);font-weight:500;word-break:break-word}

/* --- 8. UUID lookup --- */
#licensorLookupInput{
  margin:0;min-height:104px;resize:vertical;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;line-height:1.5
}
.lookup-controls{display:flex;align-items:center;justify-content:space-between;gap:var(--ad-gap);flex-wrap:wrap;margin-top:var(--ad-gap)}
.lookup-controls button{margin:0}
.lookup-toggle{
  display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:var(--radius-pill);
  background:var(--raised);border:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:600;cursor:pointer
}
.lookup-toggle input{width:15px;height:15px;margin:0;accent-color:var(--accent)}
.lookup-toggle b{color:var(--faint);font-weight:600}

/* Tone scale for the YouTube hint. Deliberately not the same green as a
   verified result: "confere" means two sources agree, not that it is proven. */
.lookup-yt{
  display:grid;gap:3px;margin-top:var(--ad-gap);padding:10px 12px;
  border:1px solid var(--line);border-left-width:3px;border-radius:var(--ad-radius-sm);background:var(--bg-2)
}
.lookup-yt small{color:var(--faint);text-transform:uppercase;font-size:var(--ad-label);font-weight:700;letter-spacing:.04em}
/* The ℗ line is a label name, not a field label — keep its own casing. */
.lookup-yt .lookup-copyright{text-transform:none;font-size:11px;font-weight:500;letter-spacing:0;color:var(--muted)}
.lookup-yt b{color:var(--ink);font-size:13px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lookup-tag{
  font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;
  padding:3px 8px;border-radius:var(--radius-pill);background:var(--raised);color:var(--muted)
}
.lookup-ok{border-left-color:var(--ok)}
.lookup-warn{border-left-color:#f5a524}
.lookup-hint{border-left-color:var(--faint)}
span.lookup-ok{background:rgba(173,235,179,.30);color:var(--ok);border:1px solid rgba(173,235,179,.30)}
span.lookup-warn{background:rgba(245,165,36,.14);color:#f5a524;border:1px solid rgba(245,165,36,.32)}

/* user cards */
.user-card{display:block;padding:0;overflow:hidden;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.user-card-main{padding:14px}
.user-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:2px 2px 12px;border-bottom:1px solid var(--line)}
.user-card-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.user-card-actions button{min-height:34px;padding:8px 12px;font-size:12px}
.user-subline{margin-top:4px;color:var(--muted);font-weight:500;font-size:13px}
/* .user-summary / .summary-item are defined with .admin-meta / .meta-cell in
   section 5 — they are the same component. Only the spacing differs here. */
.user-summary{margin-top:12px}
.user-card .admin-details summary{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent-line)}
.user-card .user-editor{background:var(--bg-2)}
.user-card .permission-toggle{background:var(--raised)}

.user-filter-row{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0 13px}
.filter-chip{min-height:32px;padding:7px 12px;font-size:11px;border-radius:var(--radius-pill);background:var(--raised);border:1px solid var(--line);color:var(--muted);font-weight:600}
.filter-chip span{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:var(--radius-pill);background:var(--bg-2);color:var(--ink)}
.active-filter{background:var(--accent);color:var(--on-accent);border-color:transparent}
.active-filter span{background:rgba(255,255,255,.22);color:var(--on-accent)}
/* These chips are also .secondary, and `.secondary:hover` (0,2,0) outranks
   `.active-filter` (0,1,0): hovering the active chip repainted it with the
   resting background while the text stayed the dark on-accent colour, which
   made the label all but invisible. Same specificity, declared later, wins. */
.active-filter:hover{background:var(--accent);color:var(--on-accent)}

.mobile-nav{display:none!important}
.hidden{display:none!important}

/* ---------- "Setar usuário" modal ---------- */
.modal-overlay{
  position:fixed;z-index:200;inset:0;display:grid;place-items:center;padding:20px;overflow:auto;
  background:rgba(14,26,19,.5);backdrop-filter:blur(16px);animation:fadeIn .18s ease both
}
.modal-card{
  position:relative;width:min(440px,100%);border:1px solid var(--line-strong);border-radius:22px;padding:26px;
  max-height:calc(100vh - 40px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:var(--shadow);animation:panelIn .26s ease both
}
.modal-card h2{margin-top:12px}
.modal-close{
  position:absolute;top:14px;right:14px;min-height:34px;width:34px;padding:0;border-radius:var(--radius-pill);
  background:var(--raised);color:var(--muted);border:1px solid var(--line);box-shadow:none;font-size:18px;line-height:1
}
.modal-close:hover{color:var(--ink);background:var(--raised);transform:none;box-shadow:none}
.quick-user-result{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:6px;animation:cardIn .22s ease both}
.quick-user-result p,.quick-user-result button{grid-column:1/-1;margin-top:4px}
.account-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:14px 0}

/* tracks */
.track-list{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2);display:grid;gap:8px}
.track-row{display:grid;grid-template-columns:36px minmax(0,1fr) minmax(135px,auto);gap:10px;align-items:center;padding:10px 11px;border-radius:12px;background:var(--surface);transition:.16s ease}
.track-row:hover{transform:translateX(3px);background:var(--raised)}
.track-row span{font-weight:700;color:var(--faint)}
.track-row b{min-width:0;word-break:break-word;color:var(--ink)}
.track-row b small{display:block;margin-top:3px;color:var(--muted);font-weight:500}
.track-row code{font:600 12px "IBM Plex Mono",monospace;color:var(--ink);padding:6px 9px;border-radius:var(--radius-pill);background:var(--bg-2);text-align:center}
.artist-profile-card .grid{margin-top:8px}
.artist-track-list{background:var(--bg-2)}

/* idle */
.idle-overlay{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:20px;background:rgba(14,26,19,.5);backdrop-filter:blur(14px);animation:fadeIn .18s ease both}
.idle-card{width:min(460px,100%);border:1px solid var(--line-strong);border-radius:22px;padding:26px;background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:var(--shadow);text-align:center;animation:panelIn .24s ease both}
.idle-card h2{margin-top:12px}
.idle-count{display:inline-flex;align-items:center;justify-content:center;min-width:118px;margin:8px auto 4px;padding:12px 18px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg-2);font-family:"IBM Plex Mono",monospace;font-size:32px;font-weight:700;color:var(--accent)}
.idle-actions{justify-content:center}

/* tables */
.table-wrap{overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:18px;background:var(--surface);margin-top:14px}
table{width:100%;border-collapse:collapse;min-width:900px}
th,td{text-align:left;padding:12px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:top;color:var(--ink)}
th{color:var(--muted);text-transform:uppercase;background:var(--bg-2);font-weight:600;letter-spacing:.04em}

/* ---------- tool shell: sidebar tabs ---------- */
.tool-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start}
.tool-sidebar{
  display:flex;flex-direction:column;gap:6px;position:sticky;top:22px;
  padding:10px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--bg-2)
}
.tool-tab{
  display:flex;align-items:center;gap:12px;width:100%;justify-content:flex-start;text-align:left;
  min-height:48px;padding:12px 14px;border:1px solid transparent;border-radius:14px;
  background:transparent;color:var(--muted);font:600 14px Manrope,sans-serif;box-shadow:none;cursor:pointer;
  transition:background .15s ease,color .15s ease
}
.tool-tab:hover{background:var(--raised);color:var(--ink);transform:none;box-shadow:none;filter:none}
.tool-tab.active{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent-line);box-shadow:none}
.tool-tab.active .tool-tab-ico{background:var(--accent);color:var(--on-accent)}
.tool-tab-ico{
  flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:var(--surface-2);color:var(--muted);font-size:15px;line-height:1;transition:background .15s ease,color .15s ease
}
.tool-tab-label{min-width:0;line-height:1.25}
.tool-content{min-width:0}
.tool-panel{display:none}
.tool-panel.active{display:block;animation:cardIn .3s ease both}
.tool-panel>.result-card{margin-top:0}

/* ============================================================
   Landing page
   ============================================================ */
body.landing-page{
  color:var(--ink);
  background:
    radial-gradient(circle,rgba(173,235,179,.05) 1px,transparent 1.2px) 0 0/26px 26px,
    radial-gradient(900px 640px at 100% -6%,rgba(52,211,153,.16),transparent 60%),
    radial-gradient(760px 580px at -4% 106%,rgba(173,235,179,.08),transparent 58%),
    var(--bg)
}
.landing-page p{color:var(--muted)}
.landing-page .logo{box-shadow:0 0 0 1px var(--line-strong),0 8px 26px rgba(21,160,95,.30)}

.landing-shell{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:24px 24px 90px}
.landing-shell-solo{display:flex;flex-direction:column;min-height:100vh}
.hero-only-main{flex:1;display:flex;align-items:center}
.hero-only-main .landing-hero{width:100%}

.landing-nav{
  position:relative;z-index:60;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  width:min(1000px,calc(100vw - 32px));margin:0 auto;padding:12px 16px;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:rgba(255,255,255,.72);box-shadow:var(--shadow-sm);backdrop-filter:blur(18px) saturate(160%);
  animation:panelIn .42s ease both
}
.landing-brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font-family:"Bricolage Grotesque";font-size:20px;font-weight:700;white-space:nowrap}
.landing-brand .logo{width:30px;height:30px}
.landing-links{display:flex;align-items:center;justify-content:center;gap:6px}
.landing-links a,.language-switch button{
  min-height:38px;border-radius:var(--radius-pill);border:0;background:transparent;color:var(--muted);
  box-shadow:none;padding:9px 14px;font-size:14px;font-weight:500;text-decoration:none;transition:.14s ease
}
.landing-links a:hover,.language-switch button:hover,.language-switch button.active{background:var(--raised);color:var(--ink)}

.language-switch{display:flex;justify-content:flex-end;gap:4px}
.language-switch button{font-size:12px;min-width:auto;color:var(--muted)}
.language-switch span{font-size:15px}
.topbar .language-switch{justify-content:flex-start;gap:3px;padding:4px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg-2)}
.topbar .language-switch button{min-height:34px;padding:6px 10px;color:var(--muted);border-radius:var(--radius-pill);border:0;background:transparent;box-shadow:none;font-size:12px}
.topbar .language-switch button.active{background:var(--accent);color:var(--on-accent)}
.topbar .language-switch .flag{width:22px;height:14px;border-radius:4px}

.flag{position:relative;display:inline-block;width:28px;height:18px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 1px var(--line-strong);flex:0 0 auto}
.flag-br{background:#149954}.flag-br:before{content:"";position:absolute;left:50%;top:50%;width:15px;height:15px;background:#ffd447;transform:translate(-50%,-50%) rotate(45deg)}.flag-br:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#224d9b;transform:translate(-50%,-50%)}
.flag-us{background:repeating-linear-gradient(to bottom,#bf1831 0 2px,#fff 2px 4px)}.flag-us:before{content:"";position:absolute;left:0;top:0;width:12px;height:10px;background:#25428a}
.flag-es{background:linear-gradient(to bottom,#c91f2d 0 25%,#ffd34d 25% 75%,#c91f2d 75% 100%)}.flag-es:before{content:"";position:absolute;left:7px;top:7px;width:3px;height:4px;border-radius:1px;background:#9b2a26}

/* hero */
.landing-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.72fr);gap:44px;align-items:center;min-height:calc(100vh - 210px);padding:54px 0 34px}
.hero-copy{max-width:760px}
.hero-kicker,.section-kicker{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--accent-line);border-radius:var(--radius-pill);
  background:var(--accent-soft);color:var(--accent-2);padding:7px 13px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;animation:panelIn .5s ease both
}
.hero-kicker:before,.section-kicker:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:glowPulse 2.2s ease-in-out infinite}
.landing-hero h1{
  font-family:"Bricolage Grotesque";font-size:clamp(38px,5vw,62px);line-height:1.12;letter-spacing:-.03em;
  margin:20px 0 22px;max-width:900px;font-weight:400;
  background:linear-gradient(115deg,var(--ink) 0%,var(--ink) 48%,var(--accent-2) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:panelIn .6s cubic-bezier(.2,.8,.2,1) both
}
.landing-hero h1 .accent,.landing-hero h1 em{
  color:var(--accent);font-style:normal;-webkit-text-fill-color:var(--accent)
}
.landing-hero p{font-size:17px;max-width:600px;line-height:1.65;animation:panelIn .65s cubic-bezier(.2,.8,.2,1) both}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0;animation:panelIn .7s cubic-bezier(.2,.8,.2,1) both}
.landing-page .hero-actions .button{min-width:160px}
.landing-page .button.secondary{background:var(--raised);color:var(--ink);border-color:var(--line-strong)}

/* vitrine card */
.landing-product,.landing-login-card,.language-card{
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-sm)
}
.landing-product{
  border-radius:26px;padding:22px;position:relative;overflow:hidden;
  animation:panelIn .55s cubic-bezier(.2,.8,.2,1) both,floatY 6s ease-in-out infinite
}
.vitrine-card:before{
  content:"";position:absolute;inset:-40% -40% auto auto;width:60%;aspect-ratio:1;
  background:radial-gradient(circle,rgba(21,160,95,.30),transparent 70%);pointer-events:none
}
.product-top{position:relative;display:flex;align-items:center;gap:7px;margin-bottom:18px;color:var(--muted);font-weight:600;font-size:13px}
.product-top span{width:11px;height:11px;border-radius:50%;background:#ff5f57}
.product-top span:nth-child(2){background:#febc2e}
.product-top span:nth-child(3){background:#28c840}
.product-top b{margin-left:auto;font-family:"IBM Plex Mono",monospace;color:var(--faint)}
.product-main{position:relative;display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center;transition:opacity .28s ease,transform .28s ease}
.product-main.vitrine-swap{animation:cardIn .38s ease both}
.album-art{display:block;width:112px;aspect-ratio:1;border-radius:18px;object-fit:cover;background:var(--raised);box-shadow:var(--shadow)}
.product-main h3{font-size:22px;margin:8px 0 6px;color:var(--ink)}
.product-main p{font-size:14px;margin:0;color:var(--muted)}
.product-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.product-grid div{min-width:0;border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--bg-2)}
.product-grid small{display:block;color:var(--faint);font-weight:700;text-transform:uppercase;margin-bottom:7px;font-size:10px;letter-spacing:.06em}
.product-grid b{display:block;color:var(--ink);word-break:break-word;font-size:14px;font-family:"IBM Plex Mono",monospace}
.vitrine-dots{position:relative;display:flex;justify-content:center;gap:6px;margin-top:16px}
.vitrine-dots span{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:background .2s ease,transform .2s ease}
.vitrine-dots span.active{background:var(--accent);transform:scale(1.35)}

.landing-section{padding:72px 0}
.landing-section h2,.login-intro h2{font-family:"Bricolage Grotesque";font-size:clamp(32px,4.6vw,52px);line-height:1.06;margin:16px 0 28px;color:var(--ink);text-align:center;letter-spacing:-.02em}
.landing-section>.section-kicker,.login-intro .section-kicker{margin:0 auto;display:flex;width:max-content}

.login-section{display:grid;grid-template-columns:minmax(0,.75fr) minmax(360px,.88fr);gap:28px;align-items:start;padding:70px 0 40px}
.login-intro h2{text-align:left}
.login-intro .section-kicker{margin:0}
.landing-login-card{width:100%;border-radius:26px;padding:24px;color:var(--ink)}
.landing-login-card h3,.landing-login-card h2{color:var(--ink)}
.landing-login-card .login-badge{background:var(--accent-soft);color:var(--accent-2);border-color:var(--accent-line)}
.landing-login-card input,.landing-login-card select,.landing-login-card textarea{background:var(--bg-2);color:var(--ink)}
.landing-login-card .result-card{background:var(--bg-2);border-color:var(--line)}

/* solo (single centered card) login layout — matches reference */
.login-solo-main{min-height:100vh;display:grid;place-items:center;padding:48px 16px}
.login-solo-card{width:min(400px,100%);padding:24px;animation:panelIn .5s cubic-bezier(.2,.8,.2,1) both}
.login-card-brand{display:flex;align-items:center;gap:9px;margin-bottom:20px;text-decoration:none}
.login-card-brand .logo{width:28px;height:28px;border-radius:9px}
.login-card-brand span{font-family:"Bricolage Grotesque";font-weight:700;font-size:15px;color:var(--ink)}
.login-card-heading h1{margin:0 0 6px;font-size:23px}
.login-card-heading p{margin:0 0 16px;font-size:13px}
.login-foot-line{text-align:center;margin-top:12px;color:var(--muted);font-size:12px}
.login-foot-line a{color:var(--accent);font-weight:600;text-decoration:none}
.login-foot-line a:hover{text-decoration:underline}
.login-solo-card .field-label{margin:7px 0;font-size:10px}
.login-solo-card input,.login-solo-card select{padding:10px 13px;font-size:13px;margin:0}
.login-solo-card .in-field input{padding-left:38px}
.login-solo-card .password-row input{padding-right:40px}
.login-solo-card button[type="submit"],.login-solo-card .button{min-height:38px;padding:9px 16px;font-size:13px}
.login-solo-card .login-language-inline{margin-bottom:16px}
.login-solo-card .login-language-inline button{min-height:26px;padding:4px 8px;font-size:11px}
.login-solo-card .login-language-inline .flag{width:20px;height:13px}

.access-only-section{min-height:calc(100vh - 180px);align-items:center}
.access-page .landing-login-card{max-width:660px}
.compact-link{white-space:nowrap}
.access-page .request-card,.access-page .result-card{animation:panelIn .44s cubic-bezier(.2,.8,.2,1) both}
.access-page .signup-thanks .action-row{margin-top:20px}
.access-actions{justify-content:center}

.signup-thanks{animation:cardIn .32s ease both}
.signup-thanks h3{font-size:28px;margin-top:12px;color:var(--ink)}
.signup-thanks p{font-size:16px}
.login-language-inline{justify-content:flex-start;margin-bottom:14px;padding:4px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg-2);width:max-content;max-width:100%;flex-wrap:wrap}
.login-language-inline button{min-height:34px;padding:6px 11px;border-radius:var(--radius-pill);background:transparent;box-shadow:none}
.login-language-inline button.active{background:var(--accent);color:var(--on-accent)}

/* rodapé da landing (marca + links legais compartilhados da EVL) */
.landing-foot{border-top:1px solid var(--line);margin-top:24px;padding:24px 4px 8px}
.landing-foot-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.landing-foot-brand{display:flex;align-items:center;gap:9px;color:var(--muted);font-weight:500;font-size:14px}
.landing-foot-brand .logo{width:22px;height:22px;border-radius:7px;animation:none}
.landing-foot-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.landing-foot-links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:400;transition:color .2s ease}
.landing-foot-links a:hover{color:var(--ink)}
.landing-foot small{color:var(--faint);font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.05em}

.language-gate{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:20px;background:rgba(14,26,19,.55);backdrop-filter:blur(16px);overflow:auto;overflow-x:hidden}
.language-card{width:min(560px,calc(100vw - 40px));max-width:560px;border-radius:26px;padding:28px;text-align:center}
.language-card h2{color:var(--ink)}
.language-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.language-choice{display:grid;place-items:center;gap:8px;width:100%;max-width:100%;min-width:0;min-height:116px;border-radius:18px;background:var(--bg-2);border:1px solid var(--line);color:var(--ink)}
.language-choice:hover{border-color:var(--accent-line);background:var(--raised)}
.language-choice .flag{width:42px;height:28px;border-radius:8px}
.language-choice .flag-br:before{width:23px;height:23px}
.language-choice .flag-br:after{width:13px;height:13px}
.language-choice .flag-us:before{width:18px;height:15px}
.language-choice b{font-size:15px;color:var(--ink)}

/* ---------- responsive ---------- */
@media(max-width:960px){
  .tool-shell{grid-template-columns:1fr;gap:14px}
  .tool-sidebar{
    position:relative;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:8px;padding:8px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
    scroll-snap-type:x proximity
  }
  .tool-sidebar::-webkit-scrollbar{display:none}
  .tool-tab{
    width:auto;flex:0 0 auto;flex-shrink:0;min-height:44px;padding:10px 14px;
    scroll-snap-align:start
  }
  .tool-tab-ico{flex-shrink:0}
  .tool-tab-label{white-space:nowrap}
  .tool-shell{position:relative}
  .tool-sidebar{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .tool-sidebar.at-end{-webkit-mask-image:none;mask-image:none}
}
@media(max-width:960px){
  .landing-shell{padding-top:18px}
  .landing-nav{grid-template-columns:auto 1fr auto;gap:10px;border-radius:24px;padding:10px 12px}
  .landing-brand{font-size:20px}.landing-brand span:last-child{max-width:230px;overflow:hidden;text-overflow:ellipsis}
  .landing-links{gap:4px}.landing-links a{padding:8px 10px}
  .language-switch{justify-content:flex-end}
  .landing-hero,.login-section{grid-template-columns:1fr;min-height:auto}
  .landing-hero{padding-top:28px}
  .landing-hero h1{font-size:clamp(34px,10vw,52px)}
  .login-intro h2{text-align:center}.login-intro .section-kicker{margin:0 auto}
}

@media(max-width:820px){
  body{font-size:14px}
  /* Data cells step 4 -> 2 here, and 2 -> 1 at 620px. Before this step they
     went straight from 4 to 1 and were unreadably narrow on tablets. */
  .shell{padding:8px 8px 52px;max-width:100%;--ad-cols:2}
  .topbar{border-radius:var(--radius-pill);padding:6px 8px;gap:5px}
  .brand{font-size:14px;gap:6px;white-space:nowrap;flex:0 1 auto;min-width:0}
  .brand-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .logo{width:24px;height:24px;border-radius:8px;flex:0 0 auto}
  .userbar{font-size:11px;justify-content:flex-end;width:auto;gap:4px;flex-wrap:nowrap;flex:1 1 auto;min-width:0}
  .pill{padding:5px 8px;font-size:10px;white-space:nowrap;flex:0 0 auto}
  .user-chip{order:1;padding-left:5px}
  .topbar [data-language-switcher]{order:2;flex:0 0 auto}
  .topbar .language-switch{padding:2px;gap:1px;flex:0 0 auto}
  .topbar .language-switch button{min-height:25px;padding:4px 6px;font-size:9px}
  .topbar .language-switch .flag{width:16px;height:11px}
  .topbar-nav{order:3;width:auto;display:flex;gap:1px;padding:2px;flex:0 0 auto}
  .topbar-nav a,.topbar-nav button{justify-content:center;text-align:center;padding:5px 7px;min-height:25px;min-width:auto;font-size:9px}
  .user-chip-trigger{padding:8px;gap:0;min-height:40px;min-width:40px}
  .user-chip-text{display:none}
  .user-avatar{width:22px;height:22px;font-size:11px}
  .user-chip-menu{right:auto;left:0;min-width:150px}
  .nav:not(.topbar-nav){display:none}
  h1{font-size:22px}h2{font-size:22px;margin-bottom:8px}h3{font-size:17px;margin:10px 0 6px}p{line-height:1.5}
  button,.button{min-height:42px;padding:11px 14px;border-radius:12px;font-size:13px}
  input,textarea,select{padding:12px 13px;border-radius:12px;font-size:14px;margin:7px 0}textarea{min-height:120px}
  .mode-row,.action-row{gap:8px;margin:10px 0}.mode-row button{width:auto;min-width:96px}
  .hero-result{flex-direction:row;gap:12px}.cover{width:92px;height:92px;border-radius:14px}
  .hero-result .cover + div{min-width:0}.title{font-size:22px}.subtitle{font-size:14px}
  .grid{grid-template-columns:1fr}
  .card{padding:16px;border-radius:20px;margin-top:14px}
  .result-card{padding:16px;border-radius:18px;margin-top:12px}
  .cell{padding:12px;border-radius:12px;min-height:58px}
  .label{font-size:10px;margin-bottom:5px}.value{font-size:14px}
  .action-row button,.action-row .button{width:100%}
  .note-row{align-items:flex-start;flex-direction:column}.row-actions,.row-actions button{width:100%}
  .admin-head{flex-direction:column;align-items:stretch}
  .admin-overview{grid-template-columns:1fr}.admin-item{grid-template-columns:1fr}
  .editor-grid{grid-template-columns:1fr}
  .admin-actions{justify-content:stretch}.admin-actions button,.role-choice{width:100%}
  .user-card-head{flex-direction:column}.user-card-actions,.user-card-actions button{width:100%}
  .idle-card{padding:18px;border-radius:18px}.idle-count{font-size:26px}
  .modal-card{padding:20px;border-radius:18px}
  .quick-user-result{grid-template-columns:1fr}
  .track-list{padding:10px;border-radius:14px}.track-row{grid-template-columns:28px 1fr;padding:8px}.track-row code{grid-column:1/-1;text-align:left}
  .password-row{grid-template-columns:1fr}.password-toggle{width:100%}
}

@media(max-width:620px){
  .shell{--ad-cols:1}
  .lookup-controls{flex-direction:column;align-items:stretch}
  .lookup-controls button,.lookup-toggle{width:100%;justify-content:center}
  .brand-text{display:none}
  .landing-shell{padding:8px 8px 44px}
  .landing-nav{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px;border-radius:var(--radius-pill);padding:5px 6px;overflow:hidden}
  .landing-brand{min-width:0;font-size:13px;gap:5px;flex:0 1 auto;white-space:nowrap}
  .landing-brand .logo{width:20px;height:20px}
  .landing-brand span:last-child{min-width:0;max-width:104px;overflow:hidden;text-overflow:ellipsis}
  .landing-nav .language-switch{gap:1px;flex:0 0 auto}
  .landing-nav .language-switch button{padding:4px 6px;min-height:24px;font-size:9px}
  .landing-nav .language-switch .flag{width:16px;height:11px}
  .landing-links{grid-column:auto;width:auto;display:flex;justify-content:center;gap:1px;flex:1 1 auto;min-width:0}
  .landing-links a{text-align:center;padding:5px 6px;min-height:24px;font-size:10px;white-space:nowrap}
  .landing-hero{gap:14px;padding:22px 0 18px;min-height:auto}
  .landing-hero h1{font-size:clamp(26px,8vw,33px);line-height:1.24;margin:10px 0;max-width:100%}
  .landing-hero p{font-size:14px;line-height:1.5}
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}
  .hero-actions .button{width:100%;min-width:0;min-height:40px;padding:10px;font-size:12px}
  .landing-product{padding:13px;border-radius:16px}
  .product-top{margin-bottom:10px;font-size:11px}
  .product-main{grid-template-columns:58px 1fr;gap:10px}
  .album-art{width:58px;border-radius:12px}
  .product-main h3{font-size:15px;margin:5px 0 3px}.product-main p{font-size:11px}
  .product-grid{gap:6px;margin-top:10px}.product-grid div{padding:8px;border-radius:10px}
  .product-grid small{font-size:9px}.product-grid b{font-size:11px}
  .landing-section{padding:32px 0}
  .landing-section h2,.login-intro h2{font-size:clamp(24px,7.5vw,32px);margin:10px 0 14px}
  .section-kicker,.hero-kicker{font-size:9px;padding:6px 9px}
  .hero-kicker{border-radius:14px;text-align:center;line-height:1.5}
  .login-section{padding:22px 0 20px;gap:12px}
  .landing-login-card{padding:14px;border-radius:16px}
  .login-language-inline{margin-bottom:8px}
  .language-gate{display:block;padding:80px 8px 8px}
  .language-card{width:auto;max-width:none;margin:0;padding:16px;border-radius:16px}
  .language-card h2{font-size:22px}
  .language-choice{min-height:68px;border-radius:14px}
  .language-choice .flag{width:30px;height:20px}
  .access-only-section{min-height:auto}
  .signup-thanks h3{font-size:21px}.signup-thanks p{font-size:13px}
}

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

/* ============================================================
   Landing v2 (index) — dark emerald, estrutura nova.
   Classes ct-* próprias p/ não colidir com login/access.
   ============================================================ */
.ct-page{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}
.ct-wrap{width:min(1080px,calc(100vw - 40px));margin:0 auto}

/* barra fina */
.ct-bar{
  position:sticky;top:14px;z-index:60;width:min(1080px,calc(100vw - 28px));margin:14px auto 0;
  display:flex;align-items:center;gap:14px;padding:7px 9px 7px 16px;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:rgba(9,24,16,.62);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  box-shadow:0 8px 30px rgba(0,0,0,.34);animation:panelIn .5s ease both
}
.ct-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:"Bricolage Grotesque";font-weight:600;font-size:16px;letter-spacing:-.02em;white-space:nowrap}
.ct-mark{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(140deg,var(--accent),var(--accent-2));color:var(--on-accent)}
.ct-mark svg{width:15px;height:15px}
.ct-bar-spacer{flex:1}
.ct-bar-link{color:var(--muted);text-decoration:none;font-size:14px;padding:7px 13px;border-radius:var(--radius-pill);transition:.2s}
.ct-bar-link:hover{color:var(--ink);background:var(--raised)}

/* dropdown de idioma */
.ct-lang{position:relative;flex:0 0 auto}
.ct-lang-btn{display:flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--line);border-radius:var(--radius-pill);background:transparent;color:var(--ink);font:500 13px Manrope,sans-serif;cursor:pointer;transition:.2s;min-height:34px}
.ct-lang-btn:hover{background:var(--raised)}
.ct-lang-btn .ct-chev{opacity:.5;transition:transform .3s}
.ct-lang.open .ct-lang-btn .ct-chev{transform:rotate(180deg)}
.ct-lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:172px;padding:6px;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);box-shadow:var(--shadow);display:grid;gap:2px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:.22s var(--ease,cubic-bezier(.22,1,.36,1))}
.ct-lang.open .ct-lang-menu{opacity:1;transform:none;pointer-events:auto}
.ct-lang-menu button{display:flex;align-items:center;gap:10px;padding:9px 11px;border:0;border-radius:10px;background:transparent;color:var(--muted);font:500 13px Manrope,sans-serif;text-align:left;width:100%;min-height:auto;box-shadow:none;cursor:pointer}
.ct-lang-menu button:hover{background:var(--raised);color:var(--ink);transform:none;box-shadow:none;filter:none}
.ct-lang-menu button.on{color:var(--ink)}
.ct-lang-menu .ct-tick{margin-left:auto;opacity:0;color:var(--accent)}
.ct-lang-menu button.on .ct-tick{opacity:1}

/* hero */
.ct-main{flex:1;display:flex;align-items:center;padding:44px 0 20px}
.ct-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.82fr);gap:52px;align-items:center;width:100%}
.ct-hero h1{font-family:"Bricolage Grotesque";font-weight:500;font-size:clamp(40px,5.6vw,68px);line-height:1.02;letter-spacing:-.035em;margin:0 0 20px;color:var(--ink);animation:panelIn .6s cubic-bezier(.2,.8,.2,1) both}
.ct-hero h1 .ser{color:var(--accent)}
.ct-hero p{color:var(--muted);font-size:17px;line-height:1.6;max-width:520px;margin:0 0 30px;animation:panelIn .68s cubic-bezier(.2,.8,.2,1) both}
.ct-cta{display:flex;gap:12px;flex-wrap:wrap;animation:panelIn .76s cubic-bezier(.2,.8,.2,1) both}
.ct-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 22px;border-radius:var(--radius-pill);font:600 14px "Bricolage Grotesque",sans-serif;text-decoration:none;border:1px solid transparent;transition:.18s;cursor:pointer;letter-spacing:-.01em}
.ct-btn.primary{background:var(--accent);color:var(--on-accent);box-shadow:0 8px 24px rgba(52,211,153,.26)}
.ct-btn.primary:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(52,211,153,.34)}
.ct-btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.ct-btn.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* card de resultado (redesign — readout vertical) */
.ct-card{position:relative;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:linear-gradient(180deg,var(--surface),var(--surface-2));box-shadow:var(--shadow);animation:panelIn .6s cubic-bezier(.2,.8,.2,1) both,floatY 7s ease-in-out infinite .6s}
.ct-card:before{content:"";position:absolute;inset:-40% -30% auto auto;width:55%;aspect-ratio:1;background:radial-gradient(circle,rgba(52,211,153,.22),transparent 70%);pointer-events:none}
.ct-card-top{position:relative;display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--line);font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--faint);letter-spacing:.02em}
.ct-card-top .ct-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:glowPulse 2.4s ease-in-out infinite}
.ct-card-top b{margin-left:auto;color:var(--muted);font-weight:500;text-transform:uppercase;font-size:10px;letter-spacing:.08em}
.ct-card-body{position:relative;padding:16px}
.ct-card-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.ct-card-head img{width:64px;height:64px;border-radius:12px;object-fit:cover;background:var(--raised);box-shadow:0 8px 20px rgba(0,0,0,.45);flex:0 0 auto}
.ct-card-head h3{font-family:"Bricolage Grotesque";font-size:16px;font-weight:600;margin:0 0 4px;color:var(--ink);line-height:1.2}
.ct-card-head p{margin:0;font-size:13px;color:var(--muted)}
.ct-rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ct-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;background:var(--surface)}
.ct-row small{color:var(--faint);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.ct-row b{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--ink);font-weight:500;text-align:right;word-break:break-word;min-width:0}
.ct-card-dots{display:flex;justify-content:center;gap:6px;padding:14px 0 2px}
.ct-card-dots span{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:.2s}
.ct-card-dots span.on{background:var(--accent);transform:scale(1.3)}

/* rodapé */
.ct-foot{border-top:1px solid var(--line);padding:22px 0 12px;margin-top:22px}
.ct-foot-in{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ct-foot-brand{color:var(--muted);font-size:14px;display:flex;align-items:center;gap:8px}
.ct-foot-links{display:flex;gap:18px;flex-wrap:wrap}
.ct-foot-links a{color:var(--muted);text-decoration:none;font-size:14px;transition:.2s}
.ct-foot-links a:hover{color:var(--ink)}
.ct-foot small{color:var(--faint);font-family:"IBM Plex Mono",monospace;font-size:11px}

@media(max-width:860px){
  .ct-hero{grid-template-columns:1fr;gap:30px}
  .ct-main{padding:24px 0 8px}
  .ct-bar-link{display:none}
}
@media(max-width:560px){
  .ct-bar{gap:8px;padding:6px 7px 6px 12px}
  .ct-brand{font-size:15px}
  .ct-brand span:last-child{max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ct-hero h1{font-size:clamp(32px,9vw,44px)}
  .ct-hero p{font-size:15px}
  .ct-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ct-btn{padding:0 14px;justify-content:center}
}

/* ============================================================
   App panel v2 — barra plana + tool-shell minimalista
   ============================================================ */
.appbar{position:sticky;top:0;z-index:40;background:rgba(6,17,11,.82);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid var(--line)}
.appbar-in{width:min(1180px,calc(100vw - 40px));margin:0 auto;height:58px;display:flex;align-items:center;gap:16px}
.appbar-brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-family:"Bricolage Grotesque";font-weight:600;font-size:16px;letter-spacing:-.02em;white-space:nowrap}
.appbar-mark{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(140deg,var(--accent),var(--accent-2));color:var(--on-accent)}
.appbar-mark svg{width:15px;height:15px}
.appbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;min-width:0}

.app-shell{max-width:1180px;padding:26px 20px 80px}

/* tool-shell minimalista */
.app-shell .tool-shell{display:grid;grid-template-columns:212px minmax(0,1fr);gap:28px;align-items:start;animation:panelIn .4s ease both}
.app-shell .tool-sidebar{background:transparent;border:0;padding:0;gap:2px;position:sticky;top:78px;box-shadow:none}
.app-shell .tool-tab{min-height:40px;padding:9px 12px;border-radius:10px;border:0;gap:11px;font:500 14px Manrope,sans-serif;color:var(--muted);box-shadow:none}
.app-shell .tool-tab:hover{background:var(--raised);color:var(--ink)}
.app-shell .tool-tab.active{background:var(--accent-soft);color:var(--ink);border:0}
.app-shell .tool-tab.active .tool-tab-ico{background:var(--accent);color:var(--on-accent)}
.app-shell .tool-tab-ico{width:28px;height:28px;border-radius:8px;background:var(--bg-2);color:var(--muted);font-size:14px}

/* result cards planos, sem hover-lift */
.app-shell .result-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:none;padding:20px;animation:cardIn .28s ease both}
.app-shell .result-card:hover{transform:none;border-color:var(--line)}
.app-shell .result-card h3{font-family:"Bricolage Grotesque";font-weight:600;font-size:18px;margin:0 0 6px}
.app-shell .result-card>p{margin:0 0 4px;font-size:14px}
.app-shell .mode-btn.active{background:var(--accent);color:var(--on-accent)}

/* dados/células/tabelas finas */
.app-shell .cell{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;min-height:0;padding:12px 13px}
.app-shell .table-wrap{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.app-shell th{background:transparent;font-size:11px;letter-spacing:.06em;color:var(--faint);font-weight:500}
.app-shell th,.app-shell td{padding:11px 14px;border-bottom:1px solid var(--line)}
.app-shell tr:last-child td{border-bottom:0}

@media(max-width:900px){
  .appbar-in{width:calc(100vw - 22px);height:auto;padding:8px 0;gap:8px}
  .app-shell{padding:14px 10px 60px}
  .app-shell .tool-shell{grid-template-columns:1fr;gap:14px}
  .app-shell .tool-sidebar{position:relative;top:0;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:6px;-webkit-overflow-scrolling:touch}
  .app-shell .tool-sidebar::-webkit-scrollbar{display:none}
  .app-shell .tool-tab{width:auto;flex:0 0 auto;white-space:nowrap}
  .appbar-right{gap:6px}
}

/* appbar — afinar chip, nav e idioma p/ barra realmente fina */
.appbar .user-chip{border-left:0;padding-left:0}
.appbar .user-chip-trigger{min-height:34px;padding:4px 9px 4px 4px}
.appbar .user-avatar{width:26px;height:26px;font-size:12px}
.appbar .topbar-nav{padding:3px;border:1px solid var(--line);background:var(--bg-2)}
.appbar .topbar-nav a,.appbar .topbar-nav button{min-height:30px;padding:6px 12px;font-size:12px}
.appbar .language-switch{gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--bg-2)}
.appbar .language-switch button{min-height:30px;padding:5px 9px;color:var(--muted);border-radius:var(--radius-pill);background:transparent;box-shadow:none;font-size:12px}
.appbar .language-switch button.active{background:var(--accent);color:var(--on-accent)}
.appbar .language-switch .flag{width:20px;height:13px}

/* sidebar como painel-card (superfície cobrindo as opções) + cabeçalho */
.app-shell .tool-sidebar{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:10px;gap:2px;box-shadow:var(--shadow-sm);position:sticky;top:78px}
.tool-sidebar-head{padding:8px 10px 10px;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.app-shell .tool-tab{position:relative;overflow:hidden}
.app-shell .tool-tab.active{background:var(--accent-soft);color:var(--ink)}
.app-shell .tool-tab.active::after{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
@media(max-width:900px){
  .app-shell .tool-sidebar{padding:8px;border-radius:12px;position:relative;top:0}
  .tool-sidebar-head{display:none}
  .app-shell .tool-tab.active::after{display:none}
}

/* admin: conteúdo sem card externo (tiles/itens soltos, estilo dashboard) */
.app-shell > .card{background:transparent;border:0;box-shadow:none;padding:0;margin-top:6px}
.app-shell .admin-stat{border-radius:12px}
.app-shell .admin-overview{margin-top:18px}

/* login: linha do dropdown de idioma alinhada à direita do card */
.login-lang-row{display:flex;justify-content:flex-end;margin-bottom:16px}

/* ============================================================
   Admin — refino "mais fino e ajeitado" (escopo .app-shell)
   ============================================================ */
.app-shell{--ad-gap:8px;--ad-pad:11px;--ad-radius:12px;--ad-radius-sm:9px}
.app-shell .admin-head h2{font-weight:500;font-size:22px}
.app-shell .admin-head p{font-size:13px}

/* stat tiles: número leve, tile enxuto e plano */
.app-shell .admin-overview{gap:10px;margin:18px 0}
.app-shell .admin-stat{padding:13px 14px;border-radius:12px;box-shadow:none}
.app-shell .admin-stat small{font-size:10px;font-weight:500;letter-spacing:.08em}
.app-shell .admin-stat b{font-size:26px;font-weight:500;margin-top:6px;letter-spacing:-.02em}

/* item/user cards planos e finos */
.app-shell .admin-item{padding:13px 14px;border-radius:12px;box-shadow:none}
.app-shell .admin-title{font-size:15px;font-weight:600}
.app-shell .admin-title span{font-size:12.5px;font-weight:500}
.app-shell .admin-title-sub,.app-shell .user-subline{font-size:12.5px}
.app-shell .user-card{border-radius:12px;box-shadow:none}
.app-shell .user-card-main{padding:13px 14px}

/* ações compactas */
.app-shell .admin-actions button{min-height:32px;padding:6px 12px;font-size:12.5px}
.app-shell .user-card-actions button{min-height:30px;padding:6px 11px;font-size:12px}

/* células de dados */
.app-shell .meta-cell,.app-shell .summary-item{padding:9px 10px;border-radius:9px}
.app-shell .meta-cell small,.app-shell .summary-item small{font-weight:500;font-size:9px;letter-spacing:.06em}

/* editores/toggles/chips/histórico mais finos */
.app-shell .admin-details summary{padding:6px 12px;font-size:11px;font-weight:500}
.app-shell .user-editor{padding:12px;border-radius:12px}
.app-shell .permission-toggle{min-height:34px;padding:7px 10px;font-weight:500;font-size:11px;border-radius:9px}
.app-shell .filter-chip{min-height:30px;padding:6px 11px;font-weight:500;font-size:11px}
.app-shell .lookup-toggle{padding:7px 12px;font-weight:500}
.app-shell .role-choice{font-weight:500;font-size:9.5px}
.app-shell .history-row{padding:9px 11px;border-radius:9px}
.app-shell .admin-stat small,.app-shell .meta-cell small,.app-shell .summary-item small,.app-shell .label{text-transform:uppercase}

/* landing/access: barra usa a appbar do painel; inner alinhado ao conteúdo */
.ct-page .appbar-in{width:min(1080px,calc(100vw - 40px))}
.ct-page .appbar-mark svg{width:15px;height:15px}
body.access-page > .appbar{position:sticky;top:0;z-index:60}

/* lookup (buscador de UUID no admin) — card mais fino e alinhado */
.app-shell .lookup-item{align-items:center}
.app-shell .lookup-item .admin-meta{gap:8px;margin-top:12px}
.app-shell .lookup-yt{padding:9px 12px;border-radius:9px;gap:2px;border-left-width:3px}
.app-shell .lookup-yt small{font-weight:500;font-size:9px;letter-spacing:.06em}
.app-shell .lookup-yt b{font-size:12.5px}
.app-shell .lookup-yt .lookup-copyright{font-size:10.5px}
.app-shell .lookup-tag{font-weight:500;font-size:9px;padding:2px 7px}
.app-shell .lookup-item .admin-title{font-size:15px;font-weight:600;align-items:center}
.app-shell .lookup-item .pill.mini-pill{font-weight:500}