/* ======================================================
   STYLE.CSS — MRK LINKS (PÚBLICO + LOGIN + DASHBOARD)
   Versão: 3.5

   Histórico:
   - v3.2: Base aprovado (glass + gradiente) + Dashboard/Links/Login/Register
   - v3.3: Controles "Meus Links" (filtros) + responsivo
   - v3.4: Dark theme global (cookie mrk_theme => body.mrk-dark)
   - v3.5: UX Polish (tema como ícone + topbar premium + grid mais equilibrado)
          + FIX: remove duplicações e corrige erros de sintaxe que quebravam o CSS
   ====================================================== */

/* ======================================================
   TOKENS (LIGHT)
   ====================================================== */
:root{
  --bg0: #ffffff;
  --bg1: #f6f8ff;
  --bg2: #eef2ff;

  --text: #0b1220;
  --muted: #64748b;

  --card: rgba(255,255,255,.82);
  --border: rgba(226,232,240,.92);
  --borderSoft: rgba(148,163,184,.25);

  --shadow: 0 30px 80px rgba(2, 6, 23, .12);
  --shadow2: 0 16px 40px rgba(2, 6, 23, .10);

  --primary: #2563eb;
  --primary2: #1d4ed8;
  --dark: #0b1220;

  --radius: 22px;
  --radiusSm: 14px;
}

*{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  color: var(--text);
  background: radial-gradient(900px 600px at 15% 10%, var(--bg0) 0%, var(--bg1) 58%, var(--bg2) 100%);
}

a{ color: inherit; }

/* ======================================================
   TOPBAR
   ====================================================== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(246,248,255,.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(226,232,240,.75);
}

.container{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

.topbar .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 900;
  letter-spacing: -0.2px;
}

.brand .mark{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: var(--dark);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  box-shadow: 0 14px 26px rgba(2,6,23,.14);
}

.nav{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ======================================================
   BOTÕES
   ====================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.85);
  background: rgba(255,255,255,.86);
  color: var(--text);
  font-weight: 900;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .06s ease, filter .2s ease, opacity .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  user-select: none;
}

.btn:active{ transform: translateY(1px); }

/* (compat) btn-ghost existe como “variante” do .btn */
.btn-ghost{ }

.btn-primary{
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  color: #fff;
  border: 0;
  box-shadow: 0 16px 28px rgba(37,99,235,.22);
}
.btn-primary:hover{ filter: brightness(1.03); }

.btn-ghost:hover{
  background: rgba(226,232,240,.55);
}

.btn-dark{
  background: rgba(11,18,32,.95);
  color: #fff;
  border: 0;
  box-shadow: 0 14px 26px rgba(2,6,23,.14);
}
.btn-dark:hover{ opacity: .93; }

.btn-danger{
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.18);
  color: rgba(185,28,28,1);
}
.btn-danger:hover{ background: rgba(239,68,68,.14); }

.btn-small{
  height: 38px;
  padding: 0 12px;
  border-radius: 12px;
  font-size: 12px;
}

/* ======================================================
   PÁGINAS (REGISTER / ALGUMAS TELAS PÚBLICAS)
   ====================================================== */
.wrapper{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 52px 18px 70px;
}

.logo{
  display: block;
  width: 44px;
  height: auto;
  margin: 0 auto;
  opacity: .95;
  filter: drop-shadow(0 10px 18px rgba(2,6,23,.12));
}

.card{
  width: 100%;
  max-width: 520px;
  padding: 32px 34px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(900px 280px at 20% 0%, rgba(37,99,235,.14), transparent 55%),
    radial-gradient(700px 240px at 80% 100%, rgba(99,102,241,.10), transparent 55%);
  pointer-events:none;
}
.card > *{ position: relative; }

h1{ margin: 0 0 8px; font-size: 28px; font-weight: 900; letter-spacing: -0.6px; }
p{ margin: 0 0 18px; color: var(--muted); font-size: 14px; line-height: 1.45; }

.form{ display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }

.input{
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: var(--radiusSm);
  border: 1px solid var(--borderSoft);
  background: rgba(255,255,255,.92);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input::placeholder{ color: #94a3b8; }
.input:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.alert{
  margin-top: 14px;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(226,232,240,.9);
  font-weight: 900;
  font-size: 13px;
}
.alert-error{ background: rgba(220,38,38,.08); border-color: rgba(220,38,38,.25); color: #7f1d1d; }
.alert-ok{ background: rgba(22,163,74,.08); border-color: rgba(22,163,74,.25); color: #065f2d; }

.help{
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}
.help a{ color: var(--primary); font-weight: 900; text-decoration: none; }
.help a:hover{ text-decoration: underline; }

/* ======================================================
   FORM HELPERS (compat)
   ====================================================== */
.field{ text-align:left; margin: 0 0 12px; }
.field label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  margin: 0 0 8px;
}

.field input[type="url"],
.field input[type="text"],
.field input[type="email"],
.field input[type="password"]{
  width: 100%;
  padding: 14px 14px;
  border-radius: var(--radiusSm);
  border: 1px solid var(--borderSoft);
  background: rgba(255,255,255,.92);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 0 0 4px rgba(37,99,235,.14);
}

.helper{ margin-top: 14px; font-size: 13px; color: var(--muted); }

.alert{ border-radius: 14px; padding: 12px 14px; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.alert-error{ background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); color: #b91c1c; }
.alert-ok{ background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25); color: #166534; }

/* ======================================================
   DASHBOARD LAYOUT
   ====================================================== */
.page{ padding: 28px 0 70px; }

.grid{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
}

.panel{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow2);
  backdrop-filter: blur(12px);
  padding: 22px;
}
.panel h2{ margin: 0 0 6px; font-size: 18px; font-weight: 900; letter-spacing: -0.3px; }
.panel p{ margin: 0 0 16px; }

.empty{ color: var(--muted); font-size: 14px; padding: 10px 0; }

/* ======================================================
   LISTA DE LINKS (user)
   ====================================================== */
.link-list{ display: flex; flex-direction: column; gap: 12px; }

.link-card,
.link-card-lite{
  border: 1px solid rgba(226,232,240,.9);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  padding: 14px;
}

.link-card-lite{
  background: rgba(255,255,255,.88);
  box-shadow: 0 14px 26px rgba(2,6,23,.06);
}

.link-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.link-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.link-short{
  margin: 0;
  font-size: 14px;
  font-weight: 900;
  word-break: break-all;
}
.link-short a{ text-decoration: none; color: var(--primary); }
.link-short a:hover{ text-decoration: underline; }

.link-dest{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  word-break: break-word;
}

.meta{
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

.actions{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(248,250,252,.85);
  font-size: 12px;
  font-weight: 900;
}
.badge-green{ background: rgba(22,163,74,.10); border-color: rgba(22,163,74,.25); color: #065f2d; }
.badge-red{ background: rgba(220,38,38,.10); border-color: rgba(220,38,38,.25); color: #7f1d1d; }

/* compat com seu HTML público atual */
#feedback{ margin-top: 12px; font-size: 13px; min-height: 18px; color: var(--muted); }
#result{ margin-top: 18px; display: flex; gap: 10px; align-items: center; }
#shortUrl{ flex: 1; padding: 12px 12px; border-radius: 14px; border: 1px solid var(--borderSoft); background: rgba(255,255,255,.92); font-size: 13px; }
#copy{ background: rgba(11,18,32,.95); color: #fff; padding: 12px 16px; border-radius: 14px; font-weight: 900; border: 0; box-shadow: 0 14px 26px rgba(2,6,23,.16); }
#copy:hover{ opacity: .93; }

/* ======================================================
   CONTROLES (Meus Links) — v3.3
   ====================================================== */
.mrk-searchbar{ display:block; }

.mrk-controls{
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.mrk-control{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
  align-items: flex-start;
}

.mrk-control label{
  font-size: 12px;
  color: var(--muted);
  font-weight: 800;
  text-align: left;
  width: 100%;
}

.mrk-controls .input{ height: 44px; width: 100%; }

.mrk-total{
  margin-left: auto;
  font-weight: 900;
  color: var(--text);
  white-space: nowrap;
  padding-bottom: 10px;
  text-align: right;
}

@media (max-width: 980px){
  .mrk-control{ min-width: 100%; }
  .mrk-total{
    margin-left: 0;
    padding-bottom: 0;
    width: 100%;
  }
}

.mrk-edit.is-open{ display:block !important; }

/* Editor destino (fechar) */
.mrk-edit-close{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.9);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  font-weight: 900;
}
.mrk-edit-close:hover{ background: rgba(226,232,240,.55); }

.mrk-edit-title{
  font-weight: 900;
  color: var(--text);
}

/* ======================================================
   MODAL (MRK)
   ====================================================== */
.mrk-modal-backdrop{
  position:fixed; inset:0;
  background:rgba(2,6,23,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
  padding:16px;
}
.mrk-modal-backdrop.is-open{ display:flex; }

.mrk-modal{
  width:min(520px, 100%);
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  border-radius:18px;
  box-shadow:0 30px 80px rgba(2,6,23,.25);
  overflow:hidden;
}
.mrk-modal-head{
  padding:16px 18px;
  border-bottom:1px solid rgba(226,232,240,.9);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.mrk-modal-title{ font-weight:900; font-size:16px; margin:0; }
.mrk-modal-close{
  border:0; background:transparent; cursor:pointer;
  font-size:22px; line-height:1; padding:6px 10px;
  border-radius:12px;
}
.mrk-modal-body{ padding:16px 18px; color:#0b1220; }
.mrk-modal-actions{
  padding:16px 18px;
  border-top:1px solid rgba(226,232,240,.9);
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap;
}

/* ======================================================
   LOGIN (MRK) — Dark Auth UI (escopado em .mrk-auth)
   ====================================================== */
.mrk-auth{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 18px;
  background: radial-gradient(900px 600px at 20% 10%, rgba(99,102,241,.18) 0%, transparent 55%),
              radial-gradient(900px 600px at 80% 100%, rgba(37,99,235,.18) 0%, transparent 55%),
              linear-gradient(180deg, #0b0f14 0%, #070a0f 100%);
  color: #e5e7eb;
}
.mrk-auth a{ color: inherit; }

.mrk-auth .auth-wrap{
  width: 100%;
  max-width: 980px;
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
}

.mrk-auth .auth-logo{
  display: grid;
  gap: 10px;
  justify-items: center;
}

.mrk-auth .auth-logo img{
  width: 170px;
  height: auto;
  filter: drop-shadow(0 18px 34px rgba(0,0,0,.45));
  opacity: .98;
}

.mrk-auth .auth-title{
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.8px;
  margin: 0;
  color: #f9fafb;
}

.mrk-auth .auth-subtitle{
  margin: 0;
  color: rgba(226,232,240,.75);
  font-weight: 600;
  font-size: 14px;
}

.mrk-auth .auth-card{
  width: 100%;
  max-width: 520px;
  background: rgba(15, 20, 28, .70);
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 22px;
  box-shadow: 0 35px 90px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
  padding: 26px;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.mrk-auth .auth-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(520px 260px at 25% 0%, rgba(99,102,241,.22), transparent 60%),
    radial-gradient(520px 260px at 90% 100%, rgba(37,99,235,.18), transparent 60%);
  pointer-events:none;
}
.mrk-auth .auth-card > *{ position: relative; }

.mrk-auth .auth-icon{
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  margin: 4px auto 14px;
  background: rgba(99,102,241,.22);
  border: 1px solid rgba(99,102,241,.35);
  box-shadow: 0 18px 40px rgba(99,102,241,.18);
}

.mrk-auth .auth-card h2{
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.2px;
  color: #f9fafb;
  text-align: center;
}

.mrk-auth .auth-form{ display: grid; gap: 12px; }

.mrk-auth .auth-input{
  height: 48px;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.35);
  color: #e5e7eb;
  padding: 0 14px;
  outline: none;
  font-weight: 700;
  transition: box-shadow .18s ease, border-color .18s ease, transform .06s ease;
}
.mrk-auth .auth-input::placeholder{ color: rgba(226,232,240,.45); }

.mrk-auth .auth-input:focus{
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 0 0 4px rgba(99,102,241,.14);
}

.mrk-auth .auth-link{
  font-size: 13px;
  font-weight: 800;
  color: rgba(99,102,241,.95);
  text-decoration: none;
}
.mrk-auth .auth-link:hover{ text-decoration: underline; }

.mrk-auth .auth-btn{
  height: 48px;
  border-radius: 14px;
  border: 0;
  width: 100%;
  cursor: pointer;
  font-weight: 900;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(180deg, rgba(99,102,241,1), rgba(37,99,235,1));
  box-shadow: 0 18px 40px rgba(37,99,235,.22);
}
.mrk-auth .auth-btn:hover{ filter: brightness(1.04); }
.mrk-auth .auth-btn:active{ transform: translateY(1px); }

.mrk-auth .auth-alert{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 900;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.28);
  color: rgba(226,232,240,.88);
}
.mrk-auth .auth-alert.error{
  border-color: rgba(239,68,68,.28);
  background: rgba(239,68,68,.08);
  color: #fecaca;
}

@media (max-width: 520px){
  .mrk-auth .auth-title{ font-size: 28px; }
  .mrk-auth .auth-card{ padding: 20px; }
}

/* ======================================================
   MRK DARK THEME (GLOBAL) — body.mrk-dark
   ====================================================== */
body.mrk-dark{
  --bg0: #0b1220;
  --bg1: #0f172a;
  --bg2: #111827;

  --card: rgba(17,24,39,.85);
  --border: rgba(255,255,255,.06);
  --borderSoft: rgba(255,255,255,.08);

  --text: #f1f5f9;
  --muted: #94a3b8;
}

/* Fundo dark (global) */
body.mrk-dark{
  background: radial-gradient(900px 600px at 20% 10%, rgba(99,102,241,.18) 0%, transparent 55%),
              radial-gradient(900px 600px at 80% 100%, rgba(37,99,235,.18) 0%, transparent 55%),
              linear-gradient(180deg, #0b0f14 0%, #070a0f 100%);
  color: var(--text);
}

/* TOPBAR no dark */
body.mrk-dark .topbar{
  background: rgba(2,6,23,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body.mrk-dark .brand .mark{
  background: rgba(255,255,255,.06);
  color: #fff;
  box-shadow: 0 14px 26px rgba(0,0,0,.35);
}
body.mrk-dark .brand span{ color: #e5e7eb; }

/* Painéis e cards no dark */
body.mrk-dark .panel{
  background: rgba(15, 20, 28, .72);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 35px 90px rgba(0,0,0,.35);
}
body.mrk-dark .panel p,
body.mrk-dark .empty,
body.mrk-dark .meta{
  color: rgba(226,232,240,.70);
}

body.mrk-dark .link-card,
body.mrk-dark .link-card-lite{
  background: rgba(2,6,23,.35);
  border-color: rgba(255,255,255,.10);
}

/* Inputs no dark */
body.mrk-dark .input,
body.mrk-dark .field input[type="url"],
body.mrk-dark .field input[type="text"],
body.mrk-dark .field input[type="email"],
body.mrk-dark .field input[type="password"],
body.mrk-dark input[type="datetime-local"],
body.mrk-dark select{
  background: rgba(2,6,23,.35);
  border-color: rgba(148,163,184,.22);
  color: #e5e7eb;
}
body.mrk-dark .input::placeholder,
body.mrk-dark .field input::placeholder{
  color: rgba(226,232,240,.45);
}
body.mrk-dark .input:focus,
body.mrk-dark .field input:focus,
body.mrk-dark select:focus{
  border-color: rgba(99,102,241,.55);
  box-shadow: 0 0 0 4px rgba(99,102,241,.14);
}

/* Botões no dark */
body.mrk-dark .btn{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: #e5e7eb;
  box-shadow: none;
}
body.mrk-dark .btn-ghost:hover{
  background: rgba(255,255,255,.10);
}
body.mrk-dark .btn-dark{
  background: rgba(255,255,255,.10);
  color: #fff;
}
body.mrk-dark .btn-danger{
  background: rgba(239,68,68,.14);
  border: 1px solid rgba(239,68,68,.22);
  color: #fecaca;
}

/* Primary no dark (sem glow exagerado) */
body.mrk-dark .btn-primary{
  background: #2563eb;
  border: 1px solid #2563eb;
  color: #ffffff;
  box-shadow: none;
}
body.mrk-dark .btn-primary:hover{
  background: #1d4ed8;
  border-color: #1d4ed8;
  filter: none;
}

/* Badges no dark */
body.mrk-dark .badge{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
}
body.mrk-dark .badge-green{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.22);
  color: #86efac;
}
body.mrk-dark .badge-red{
  background: rgba(239,68,68,.14);
  border-color: rgba(239,68,68,.22);
  color: #fecaca;
}

/* Editor no dark */
body.mrk-dark .mrk-edit{
  background: rgba(2,6,23,.25);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 12px;
}
body.mrk-dark .mrk-edit-close{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.10);
  color: #e5e7eb;
}
body.mrk-dark .mrk-edit-close:hover{
  background: rgba(255,255,255,.10);
}

/* Modal no dark (opcional, mantém legível) */
body.mrk-dark .mrk-modal{
  background: rgba(15,20,28,.95);
  border-color: rgba(255,255,255,.10);
}
body.mrk-dark .mrk-modal-head,
body.mrk-dark .mrk-modal-actions{
  border-color: rgba(255,255,255,.10);
}
body.mrk-dark .mrk-modal-body{
  color: rgba(226,232,240,.90);
}
body.mrk-dark .mrk-modal-title{ color: #fff; }
body.mrk-dark .mrk-modal-close{ color: rgba(226,232,240,.90); }

/* Remove foco “ring” exagerado no dark (sem quebrar acessibilidade no light) */
body.mrk-dark .btn:focus,
body.mrk-dark .btn:active,
body.mrk-dark button:focus,
body.mrk-dark button:active{
  outline: none;
  box-shadow: none;
}

/* ======================================================
   UX POLISH — TOPBAR + THEME ICON + GRID (SAFE OVERRIDES)
   Versão: 3.5 (ADD)
   - NÃO remove nada do que existe
   - Só melhora visual com classes novas opcionais
   ====================================================== */

/* 1) THEME TOGGLE COMO ÍCONE DISCRETO
   Use no HTML: <a class="theme-toggle" href="/toggle_theme.php" ...>🌙</a>
*/
.theme-toggle{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  opacity: .75;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease, transform .06s ease, color .18s ease;
}
.theme-toggle:hover{
  opacity: 1;
  color: var(--text);
  background: rgba(255,255,255,.40);
  border-color: rgba(226,232,240,.70);
}
body.mrk-dark .theme-toggle{ color: rgba(226,232,240,.70); }
body.mrk-dark .theme-toggle:hover{
  color: #fff;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
}

/* 2) TOPBAR mais elegante (light glass + dark sólido) */
.topbar{
  background: rgba(246,248,255,.58);
  border-bottom: 1px solid rgba(226,232,240,.70);
}
body.mrk-dark .topbar{
  background: rgba(2,6,23,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.topbar .row{ padding: 12px 0; } 

/* 3) MENU com ativo (classe opcional: nav-link / is-active / logout)
   Use no HTML:
   <a class="nav-link is-active" ...>Meus Links</a>
   <a class="nav-link" ...>Meu Perfil</a>
   <a class="nav-link logout" ...>Logout</a>
*/
.nav-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 900;
  font-size: 13px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease, opacity .18s ease;
}
.nav-link:hover{
  background: rgba(255,255,255,.40);
  border-color: rgba(226,232,240,.70);
  color: var(--text);
}
.nav-link.is-active{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.22);
  color: var(--text);
}

body.mrk-dark .nav-link{ color: rgba(226,232,240,.70); }
body.mrk-dark .nav-link:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: #fff;
}
body.mrk-dark .nav-link.is-active{
  background: rgba(99,102,241,.14);
  border-color: rgba(99,102,241,.22);
  color: #fff;
}

/* Logout separado (visual) */
.nav-link.logout{ color: rgba(239,68,68,.92); }
.nav-link.logout:hover{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.18);
  color: rgba(239,68,68,1);
}
body.mrk-dark .nav-link.logout{ color: rgba(252,165,165,.95); }
body.mrk-dark .nav-link.logout:hover{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.22);
  color: #fecaca;
}

/* 4) GRID mais premium (sem quebrar outras telas) */
.grid{ gap: 22px; }

.panel{
  border-color: rgba(226,232,240,.86);
  box-shadow: 0 18px 55px rgba(2, 6, 23, .10);
}
body.mrk-dark .panel{ box-shadow: 0 35px 90px rgba(0,0,0,.35); }

/* Encurtar link com mais peso visual (escopo seguro) */
.grid > .panel:first-child{ padding: 26px; }

/* Cards mais clean */
.link-card{ padding: 16px; border-radius: 18px; }
.actions{ gap: 10px; }

@media (max-width: 720px){
  .nav{ gap: 8px; }
  .nav-link,
  .theme-toggle{
    height: 38px;
    border-radius: 12px;
  }
}

@media (max-width: 640px){
  .card{ padding: 26px 20px; }
  h1{ font-size: 24px; }
  #result{ flex-direction: column; }
  #copy{ width: 100%; }
}

/* ======================================================
   AUTH LIGHT (SaaS) — quando usa .mrk-auth SEM .mrk-dark
   Cola no FINAL do style.css
   ====================================================== */

/* fundo claro mais bonito (mantém o vibe SaaS) */
body.mrk-auth:not(.mrk-dark){
  background:
    radial-gradient(900px 600px at 20% 10%, rgba(99,102,241,.10) 0%, transparent 55%),
    radial-gradient(900px 600px at 80% 100%, rgba(37,99,235,.10) 0%, transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f6f8ff 70%, #eef2ff 100%);
  color: #0b1220;
}

/* topbar clara no auth light */
body.mrk-auth:not(.mrk-dark) .topbar{
  background: rgba(246,248,255,.72);
  border-bottom: 1px solid rgba(226,232,240,.75);
  backdrop-filter: blur(10px);
}

/* títulos/hero visíveis no claro */
body.mrk-auth:not(.mrk-dark) .auth-title{
  color: #0b1220;
}
body.mrk-auth:not(.mrk-dark) .auth-subtitle{
  color: rgba(100,116,139,.95); /* slate-500 */
}

/* card claro (glass) */
body.mrk-auth:not(.mrk-dark) .auth-card{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(226,232,240,.92);
  box-shadow: 0 30px 80px rgba(2, 6, 23, .12);
  backdrop-filter: blur(12px);
}

/* brilho do card no claro */
body.mrk-auth:not(.mrk-dark) .auth-card::before{
  background:
    radial-gradient(520px 260px at 25% 0%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(520px 260px at 90% 100%, rgba(37,99,235,.12), transparent 60%);
}

/* ícone do card no claro */
body.mrk-auth:not(.mrk-dark) .auth-icon{
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.18);
  box-shadow: 0 18px 40px rgba(37,99,235,.12);
  color: #1d4ed8;
}

/* título do card */
body.mrk-auth:not(.mrk-dark) .auth-card h2{
  color: #0b1220;
}

/* inputs claros */
body.mrk-auth:not(.mrk-dark) .auth-input{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(148,163,184,.25);
  color: #0b1220;
}
body.mrk-auth:not(.mrk-dark) .auth-input::placeholder{
  color: rgba(148,163,184,.95);
}
body.mrk-auth:not(.mrk-dark) .auth-input:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

/* texto do “não tem conta?” no claro */
body.mrk-auth:not(.mrk-dark) .auth-link{
  color: rgba(37,99,235,.95);
}

.roxy-logo{
  width: 100px;
  height: auto;
  margin-bottom: 14px;
}

/* ======================================================
   AUTH (LOGIN/REGISTER) — LIGHT OVERRIDES
   Deixa o mesmo layout "auth" bonito no tema claro também
   ====================================================== */

body:not(.mrk-dark) .mrk-auth{
  min-height: calc(100vh - 70px); /* deixa espaço do topbar */
  padding: 48px 18px;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--text);
}

body:not(.mrk-dark) .mrk-auth .auth-title{
  color: var(--text);
}

body:not(.mrk-dark) .mrk-auth .auth-subtitle{
  color: var(--muted);
}

body:not(.mrk-dark) .mrk-auth .auth-card{
  background: rgba(255,255,255,.82);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

body:not(.mrk-dark) .mrk-auth .auth-card h2{
  color: var(--text);
}

body:not(.mrk-dark) .mrk-auth .auth-icon{
  background: rgba(37,99,235,.10);
  border: 1px solid rgba(37,99,235,.20);
  box-shadow: 0 18px 40px rgba(37,99,235,.12);
  color: var(--text);
}

body:not(.mrk-dark) .mrk-auth .auth-input{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--borderSoft);
  color: var(--text);
}

body:not(.mrk-dark) .mrk-auth .auth-input::placeholder{
  color: #94a3b8;
}

body:not(.mrk-dark) .mrk-auth .auth-input:focus{
  border-color: rgba(37,99,235,.45);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

body:not(.mrk-dark) .mrk-auth .auth-alert{
  background: rgba(255,255,255,.86);
  border: 1px solid var(--border);
  color: var(--text);
}

body:not(.mrk-dark) .mrk-auth .auth-alert.error{
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.25);
  color: #7f1d1d;
}

body:not(.mrk-dark) .mrk-auth .auth-link{
  color: var(--primary);
}

/* AUTH — mesma altura no claro e no escuro */
.mrk-auth{
  min-height: 100vh;          /* igual pros dois temas */
  padding: 48px 18px;
  display: grid;
  place-items: center;
}

/* se tiver topbar na tela de auth, dá só um respiro */
.topbar + .mrk-auth{
  min-height: calc(100vh - 70px);
}
@media (max-width: 720px){
  .topbar + .mrk-auth{ min-height: calc(100vh - 64px); }
}

/* ======================================================
   STYLE.CSS — MRK LINKS
   Add: v3.6 (Dashboard Recent Links - "Mais opções")
   - NÃO remove nada, só adiciona
   ====================================================== */

.mrk-card-short{
  font-size: 14px;
  font-weight: 900;
  word-break: break-all;
}
.mrk-card-short a{
  text-decoration: none;
  color: var(--primary);
}
.mrk-card-short a:hover{ text-decoration: underline; }

.mrk-card-original{
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  word-break: break-word;
}

.mrk-card-meta{
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

.mrk-actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.mrk-more{
  margin-top: 12px;
  border-top: 1px solid rgba(226,232,240,.75);
  padding-top: 12px;
}
body.mrk-dark .mrk-more{
  border-top-color: rgba(255,255,255,.10);
}

.mrk-more-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* quando aberto */
.mrk-more.is-open{ display:block; }
.mrk-more[hidden]{ display:none !important; }

/* editor dentro do "mais" no dark já tem estilo global, só garante respiro */
body.mrk-dark .mrk-edit{
  background: rgba(2,6,23,.25);
}

/* ===== Datetime local: tema dark + foco melhor ===== */
.mrk-auth input[type="datetime-local"],
.link-card input[type="datetime-local"],
input[type="datetime-local"].input {
  color-scheme: light; /* default */
}

/* No dark, força widgets nativos a usarem esquema dark quando suportado */
body.mrk-dark input[type="datetime-local"]{
  color-scheme: dark;
}

/* Chrome/Edge/Safari (webkit): deixa o ícone do calendário/relógio claro no dark */
body.mrk-dark input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.2);
  opacity: .9;
}

/* Pequeno polish de foco */
input[type="datetime-local"]:focus{
  outline: none;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, .18);
  border-color: rgba(59,130,246,.7);
}

/* ===========================
   MRK Datetime Premium
   - remove ícone nativo
   - adiciona ícone custom via JS
   - visual consistente light/dark
=========================== */

.mrk-dt-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 100%;
  min-width: 260px;
}

/* garante espaço pro nosso botão */
.mrk-dt-wrap input[type="datetime-local"]{
  width: 100%;
  padding-right: 46px !important;
}

/* mata o ícone nativo (Chrome/Edge/Safari) */
.mrk-dt-wrap input[type="datetime-local"]::-webkit-calendar-picker-indicator{
  opacity: 0;
  display: none;
  -webkit-appearance: none;
}
.mrk-dt-wrap input[type="datetime-local"]::-webkit-inner-spin-button{
  display:none;
}

/* botão do ícone (nosso) */
.mrk-dt-btn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  height: 34px;
  width: 34px;
  border-radius: 10px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.75);
  color: #0f172a; /* ícone */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.mrk-dt-btn:hover{
  background: rgba(226,232,240,.35);
}

/* Dark mode */
body.mrk-dark .mrk-dt-btn{
  border-color: rgba(255,255,255,.12);
  background: rgba(2,6,23,.35);
  color: #e2e8f0;
}
body.mrk-dark .mrk-dt-btn:hover{
  background: rgba(255,255,255,.06);
}

/* deixa o campo com "cara clicável" */
.mrk-dt-wrap input[type="datetime-local"]{
  cursor: pointer;
}

/* ===========================
   TOPBAR Mobile Premium
   (dashboard / links / stats)
=========================== */
@media (max-width: 760px){

  .topbar .row{
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
  }

  /* marca ocupa a linha inteira */
  .topbar .brand{
    flex: 1 1 100%;
    justify-content: center;
  }

  /* nav vira “pill bar” com scroll horizontal */
  .topbar .nav{
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 2px 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* firefox */
  }
  .topbar .nav::-webkit-scrollbar{ display:none; }

  /* garante que os itens não quebrem */
  .topbar .nav a,
  .topbar .nav button{
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* nav-link “viram botões” no mobile pra ficar premium */
  .topbar .nav-link{
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(226,232,240,.85);
    background: rgba(255,255,255,.75);
  }

  .topbar .nav-link.is-active{
    border-color: rgba(59,130,246,.35);
    background: rgba(59,130,246,.12);
  }

  /* tema como pill também */
  .topbar .theme-toggle{
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid rgba(226,232,240,.85);
    background: rgba(255,255,255,.75);
  }

  /* logout com destaque leve mas sem “estourar” */
  .topbar .nav-link.logout{
    border-color: rgba(239,68,68,.25);
    background: rgba(239,68,68,.08);
    color: #ef4444;
    font-weight: 900;
  }

  /* Dark mode */
  body.mrk-dark .topbar .nav-link,
  body.mrk-dark .topbar .theme-toggle{
    border-color: rgba(255,255,255,.10);
    background: rgba(2,6,23,.35);
  }

  body.mrk-dark .topbar .nav-link.is-active{
    border-color: rgba(96,165,250,.35);
    background: rgba(96,165,250,.16);
  }

  body.mrk-dark .topbar .nav-link.logout{
    border-color: rgba(239,68,68,.25);
    background: rgba(239,68,68,.12);
    color: #fca5a5;
  }
}

/* Logo real no lugar do círculo MRK */
.brand-logo{
  height: 34px;
  width: auto;
  display: block;
}

@media (max-width: 760px){
  .brand-logo{
    height: 28px;
  }
}