/* ═══════════════════════════════════════════════════
   VARIÁVEIS & RESET
═══════════════════════════════════════════════════ */
:root {
  --bg:       #030303;
  --bg2:      #0a0a0c;
  --surface:  #101014;
  --surface2: #16161a;
  --border:   #1f1f25;
  --border2:  #292932;
  --steel:    #6b7280;
  --steel2:   #9ca3af;
  --accent:   #2563eb;
  --accent2:  #3b82f6;
  --accent3:  #60a5fa;
  --chrome:   linear-gradient(135deg, #f8fafc 0%, #cbd5e1 40%, #94a3b8 70%, #64748b 100%);
  --text:     #f8fafc;
  --muted:    #64748b;
  --success:  #10b981;
  --danger:   #ef4444;
  --glow:     rgba(59, 130, 246, 0.45);
  --glass-bg: rgba(16, 16, 20, 0.65);
  --glass-border: rgba(255, 255, 255, 0.05);
  --radius:    16px;
  --radius-sm: 10px;
  --gap:       20px;

  /* Shadow tokens from Prototipo */
  --shadow-ambient: 0 1px 2px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.25);
  --shadow-elevated: 0 4px 16px rgba(0,0,0,0.3), 0 12px 40px rgba(0,0,0,0.2);
  
  --font-display: 'JetBrains Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

/* Fundo animado */
body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 90% 50% at 15% 10%, rgba(30,80,144,.09) 0%, transparent 55%),
    radial-gradient(ellipse 60% 40% at 85% 85%, rgba(0,80,140,.06) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(20,60,120,.04) 0%, transparent 60%);
  animation: bgPulse 18s ease-in-out infinite alternate;
}
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.5;
}
@keyframes bgPulse {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 0.7; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(40,72,120,.5); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent2); }

/* ═══════════════════════════════════════════════════
   LOADER
═══════════════════════════════════════════════════ */
#loader {
  position: fixed; inset: 0; background: var(--bg); z-index: 1000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
}
.loader-brand { display: flex; align-items: center; gap: 11px; }
.loader-cloud {
  font-family: system-ui, sans-serif; font-size: 13px; font-weight: 700;
  color: rgba(188,198,210,.65); letter-spacing: 5px; text-transform: uppercase; margin-top: 2px;
}
.tf-logo { display: block; object-fit: contain; }
.topbar .tf-logo { height: 32px; width: auto; }
.loader-brand .tf-logo { height: 58px; width: auto; }
.auth-brand .tf-logo { height: 70px; width: auto; }

.spinner-dotted { position: relative; width: 26px; height: 26px; }
.s-dot {
  position: absolute; width: 2.2px; height: 6px;
  background: rgba(188,198,210,.85); border-radius: 1px; left: 50%; top: 0;
  transform-origin: 50% 13px; animation: s-fade 1s linear infinite;
}
.s-dot:nth-child(1)  { transform: rotate(0deg);   animation-delay: -1s; }
.s-dot:nth-child(2)  { transform: rotate(30deg);  animation-delay: -0.916s; }
.s-dot:nth-child(3)  { transform: rotate(60deg);  animation-delay: -0.833s; }
.s-dot:nth-child(4)  { transform: rotate(90deg);  animation-delay: -0.75s; }
.s-dot:nth-child(5)  { transform: rotate(120deg); animation-delay: -0.666s; }
.s-dot:nth-child(6)  { transform: rotate(150deg); animation-delay: -0.583s; }
.s-dot:nth-child(7)  { transform: rotate(180deg); animation-delay: -0.5s; }
.s-dot:nth-child(8)  { transform: rotate(210deg); animation-delay: -0.416s; }
.s-dot:nth-child(9)  { transform: rotate(240deg); animation-delay: -0.333s; }
.s-dot:nth-child(10) { transform: rotate(270deg); animation-delay: -0.25s; }
.s-dot:nth-child(11) { transform: rotate(300deg); animation-delay: -0.166s; }
.s-dot:nth-child(12) { transform: rotate(330deg); animation-delay: -0.083s; }
@keyframes s-fade { 0% { opacity: 1; } 100% { opacity: 0.15; } }

/* ═══════════════════════════════════════════════════════════════════════
   AUTH — login redesign (carro preto / logo prata)
═══════════════════════════════════════════════════════════════════════ */
#auth-screen {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background: #000; overflow: hidden;
}
#auth-screen.hide { animation: fadeOut .4s ease forwards; }

#auth-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 0; pointer-events: none;
  filter: brightness(.55) saturate(.7);
}

/* Overlay em gradiente diagonal — escurece mais no lado do card */
#auth-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(135deg,
      rgba(0,0,0,.72) 0%,
      rgba(0,0,0,.45) 45%,
      rgba(0,0,0,.25) 100%),
    radial-gradient(ellipse 70% 80% at 30% 50%,
      rgba(0,8,20,.6) 0%, transparent 70%);
}

/* Card — vidro temperado escuro */
.auth-card {
  position: relative; z-index: 2;
  width: 380px; max-width: calc(100vw - 32px);
  padding: 40px 32px 36px;
  background: linear-gradient(160deg,
    rgba(8,12,20,.82) 0%,
    rgba(4,8,16,.92) 100%);
  border: 1px solid rgba(180,200,220,.1);
  border-top-color: rgba(200,215,235,.18);
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.09) inset,
    0 40px 80px -16px rgba(0,0,0,.85),
    0 8px 32px -8px rgba(0,0,0,.6),
    0 0 60px rgba(30,58,95,.15);
  backdrop-filter: blur(28px) saturate(1.15);
  -webkit-backdrop-filter: blur(28px) saturate(1.15);
  animation: slideUp .55s cubic-bezier(0.34,1.2,0.64,1);
}

/* Reflexo cromado no topo do card */
.auth-card::before {
  content: '';
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(220,230,245,.35), rgba(255,255,255,.55),
    rgba(220,230,245,.35), transparent);
  border-radius: 1px; pointer-events: none;
}

/* Brand / logo */
.auth-brand { text-align: center; margin-bottom: 32px; }
.auth-brand-mark {
  display: inline-flex; align-items: center;
  justify-content: center; gap: 10px; margin-bottom: 6px;
}
.auth-brand-cloud {
  font-size: 14px; font-weight: 700; letter-spacing: 5px;
  text-transform: uppercase; margin-top: 3px;
  background: linear-gradient(135deg, #c8d8e8 0%, #e8f0f8 40%,
                              #9ab0c8 70%, #b8cce0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-tagline {
  font-size: 11px; color: rgba(140,160,185,.55);
  letter-spacing: 2.5px; text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
}

/* Campo de input sem label (floating placeholder) */
.auth-field {
  margin-bottom: 14px;
}
.auth-field input {
  display: block; width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(180,200,220,.12);
  border-bottom-color: rgba(180,200,220,.22);
  color: rgba(220,232,245,.92);
  font-size: 15px; letter-spacing: .3px;
  border-radius: 10px; padding: 13px 16px;
  outline: none;
  transition: border-color .18s, background .18s, box-shadow .18s;
  -webkit-appearance: none; appearance: none;
}
.auth-field input:focus {
  border-color: rgba(80,140,210,.5);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(45,90,142,.18), 0 2px 8px rgba(0,0,0,.3);
}
.auth-field input::placeholder {
  color: rgba(160,185,215,.5);
  font-size: 14px;
  letter-spacing: .4px;
}

/* Wrap do input de senha + botão olho */
.input-password-wrap {
  position: relative; display: flex; align-items: center;
}
.input-password-wrap input { padding-right: 44px; }
.btn-toggle-pw {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 5px;
  background: none; border: none; cursor: pointer;
  color: rgba(140,165,195,.5); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.btn-toggle-pw svg {
  width: 16px; height: 16px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.btn-toggle-pw:hover {
  color: rgba(180,205,235,.8);
  background: rgba(255,255,255,.06);
}

/* Botão principal de login */
.auth-card .btn-primary {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #1e3a5f 0%, #2d5a8e 60%, #1a3050 100%);
  border: 1px solid rgba(80,140,220,.35);
  border-top-color: rgba(100,165,240,.5);
  color: rgba(210,228,248,.95);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-radius: 10px; margin-top: 12px;
  cursor: pointer; outline: none;
  box-shadow: 0 4px 20px rgba(20,50,100,.4),
              0 1px 0 rgba(255,255,255,.08) inset;
  transition: all .2s ease;
}
.auth-card .btn-primary:hover {
  background: linear-gradient(135deg, #254a78 0%, #3870b0 60%, #1e3a60 100%);
  border-color: rgba(100,165,240,.55);
  box-shadow: 0 6px 28px rgba(30,70,140,.5),
              0 1px 0 rgba(255,255,255,.1) inset;
  transform: translateY(-1px);
}
.auth-card .btn-primary:active {
  transform: translateY(0); transition-duration: .07s;
}
.auth-card .btn-primary:disabled {
  opacity: .45; cursor: not-allowed; transform: none;
}

/* Intro de setup */
.setup-intro {
  font-size: 13px; color: rgba(140,160,185,.65);
  line-height: 1.7; margin-bottom: 20px; text-align: center;
}

/* Erro / sucesso */
.auth-error {
  display: none; color: #f87171; font-size: 12px; margin-top: 12px;
  padding: 9px 14px;
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.2);
  border-radius: 8px; text-align: center; letter-spacing: .2px;
}
.auth-success {
  display: none; color: #6ee7b7; font-size: 12px; margin-top: 12px;
  padding: 9px 14px;
  background: rgba(16,185,129,.08);
  border: 1px solid rgba(16,185,129,.2);
  border-radius: 8px; text-align: center;
}

@media (max-width: 640px) {
  .auth-card { padding: 30px 20px 26px; border-radius: 20px; }
  .auth-brand { margin-bottom: 24px; }
}

/* Forms */
.form-row { margin-bottom: 16px; }
.form-row label { display: block; font-size: 12px; font-weight: 600; color: var(--steel2); letter-spacing: .6px; text-transform: uppercase; margin-bottom: 7px; }
.form-row input,
.form-row textarea {
  width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius-sm); padding: 11px 14px; color: var(--text); font-size: 15px;
  font-family: inherit; outline: none; transition: border-color .15s, background .15s;
  -webkit-appearance: none; appearance: none;
}
.form-row input:focus,
.form-row textarea:focus { border-color: rgba(59,130,246,.5); background: rgba(255,255,255,.07); box-shadow: 0 0 0 3px rgba(59,130,246,.1); }
.form-row input::placeholder,
.form-row textarea::placeholder { color: rgba(148,163,184,.4); }


/* Buttons */
.btn-primary {
  width: 100%; padding: 13px; background: var(--accent); color: #fff; border: none;
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; cursor: pointer; margin-top: 8px;
  transition: background .15s, transform .12s, box-shadow .15s;
  box-shadow: 0 4px 16px rgba(37,99,235,.3);
}
.btn-primary:hover { background: var(--accent2); box-shadow: 0 6px 20px rgba(59,130,246,.4); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-cancel {
  width: 100%; padding: 11px; background: transparent; color: var(--steel2); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.btn-cancel:hover { background: rgba(255,255,255,.04); border-color: var(--steel); }

.btn-small {
  padding: 6px 14px; background: var(--accent); color: #fff; border: none;
  border-radius: 8px; font-size: 18px; font-weight: 700; cursor: pointer; line-height: 1;
  transition: background .15s; flex-shrink: 0;
}
.btn-small:hover { background: var(--accent2); }

/* ═══════════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════════ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 60px;
  background: rgba(0,0,0,.92); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; padding: 0 24px; gap: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 8px 24px -8px rgba(0,0,0,.8);
}
.topbar-brand { display: flex; align-items: center; gap: 8px; flex: 1; }
.topbar-brand-cloud { font-size: 11px; font-weight: 700; color: var(--steel); letter-spacing: 3px; text-transform: uppercase; margin-top: 1px; }
.topbar-time {
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 1.5px;
  color: var(--steel);
  position: absolute; left: 50%; transform: translateX(-50%);
  white-space: nowrap; flex-shrink: 0; pointer-events: none;
}
.topbar-greeting { font-size: 15px; font-weight: 500; color: var(--steel); letter-spacing: .3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; animation: fadeIn .3s ease; }
.topbar-greeting span { color: var(--steel2); font-weight: 600; }

/* ═══════════════════════════════════════════════════
   BOTTOM DOCK
═══════════════════════════════════════════════════ */
.bottom-dock {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200;
  display: flex; align-items: center; gap: 10px; padding: 10px 18px;
  background: rgba(10,10,12,.78); backdrop-filter: blur(40px) saturate(1.5); -webkit-backdrop-filter: blur(40px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.08); border-radius: 28px;
  box-shadow: 0 30px 60px -12px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset, 0 1px 0 rgba(255,255,255,.06) inset;
  animation: dockEntry .6s cubic-bezier(0.34,1.56,0.64,1) both; animation-delay: .4s; opacity: 0;
}
@keyframes dockEntry {
  from { opacity: 0; transform: translateX(-50%) translateY(30px) scale(.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
.dock-sep { width: 1px; height: 32px; background: rgba(255,255,255,.12); margin: 0 4px; flex-shrink: 0; }
.dock-btn {
  position: relative; width: 54px; height: 54px; border-radius: 16px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all .22s cubic-bezier(0.34,1.56,0.64,1);
  outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.dock-btn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: transform .22s cubic-bezier(0.34,1.56,0.64,1); }
/* Fallback press para touch (dispositivos sem hover real) */
.dock-btn:active {
  transform: translateY(-1px) scale(.96);
  background: rgba(42,96,176,.22);
  transition-duration: .08s;
}
.dock-btn::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
  background: rgba(15,15,20,.95); color: var(--text); font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 500;
  padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.08); white-space: nowrap; opacity: 0; pointer-events: none;
  transition: all .18s cubic-bezier(.4,0,.2,1); letter-spacing: .4px; box-shadow: 0 8px 16px rgba(0,0,0,.8);
}
@media (hover: hover) and (pointer: fine) {
  .dock-btn:hover {
    transform: translateY(-12px) scale(1.15);
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(96, 165, 250, 0.4);
    color: var(--accent3);
    box-shadow:
      0 12px 30px rgba(37, 99, 235, 0.3),
      0 0 0 1px rgba(96, 165, 250, 0.2) inset;
  }
  .dock-btn:hover svg { transform: scale(1.08); }
  .dock-btn:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
  .dock-btn:active {
    transform: translateY(-3px) scale(.96);
    background: rgba(30,70,160,.28);
    border-color: rgba(59,130,246,.4);
    box-shadow: 0 4px 12px rgba(37,99,235,.2);
    transition-duration: .06s;
  }
  .dock-btn.dock-danger:hover {
    background: rgba(140,30,30,.28);
    border-color: rgba(192,60,60,.5);
    color: #e08080;
    box-shadow: 0 12px 32px rgba(140,30,30,.3), 0 0 0 1px rgba(192,60,60,.2) inset;
  }
  .dock-btn.dock-danger:active {
    transform: translateY(-3px) scale(.96);
    background: rgba(100,20,20,.3);
    transition-duration: .06s;
  }
}
.dock-btn::before {
  content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%) scale(0);
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent3);
  transition: transform .2s cubic-bezier(0.34,1.56,0.64,1);
}
.dock-btn.dock-active::before { transform: translateX(-50%) scale(1); }
.dock-btn.dock-active { background: rgba(26,74,138,.35); border-color: rgba(40,96,176,.6); color: var(--accent3); box-shadow: 0 0 16px rgba(42,96,176,.25) inset; }
.dock-btn.dock-danger:hover { background: rgba(180,30,30,.18); border-color: rgba(239,68,68,.3); color: #f87171; }

#btn-edit-mode { width: 0; padding: 0; overflow: hidden; opacity: 0; pointer-events: none; margin-right: -10px; transition: width .3s cubic-bezier(.34,1.3,.64,1), opacity .25s ease, padding .3s, margin-right .3s cubic-bezier(.34,1.3,.64,1); }
#btn-edit-mode.dock-revealed { width: 54px; padding: 0; opacity: 1; pointer-events: all; margin-right: 0; }
#btn-edit-mode.edit-active { background: rgba(30,80,144,.25); border-color: var(--accent2); color: var(--accent3); }

/* ═══════════════════════════════════════════════════
   PÁGINAS & APP SCREEN
═══════════════════════════════════════════════════ */
#app-screen { display: none; min-height: 100vh; position: relative; z-index: 1; }

.main-content { padding: 80px 16px 110px; max-width: 1320px; margin: 0 auto; width: 100%; }

/* ═══════════════════════════════════════════════════
   BLOCOS — HOME GRID
═══════════════════════════════════════════════════ */
.blocos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
  width: 100%;
}

#bloco-clock { grid-column: span 1; }
#bloco-stats { grid-column: span 2; }
#bloco-links { grid-column: span 3; }
#bloco-notes { grid-column: span 2; }
#bloco-status { grid-column: span 1; }

@media (max-width: 1060px) {
  .blocos-grid { grid-template-columns: repeat(2, 1fr); }
  #bloco-clock { grid-column: span 1; }
  #bloco-stats { grid-column: span 1; }
  #bloco-links { grid-column: span 2; }
  #bloco-notes { grid-column: span 1; }
  #bloco-status { grid-column: span 1; }
}

@media (max-width: 640px)  {
  .blocos-grid { display: flex; flex-direction: column; gap: 14px; }
  #bloco-links, #bloco-clock, #bloco-tasks, #bloco-notes { grid-column: auto !important; grid-row: auto !important; }
  .bloco { height: auto; min-height: 200px; padding: 20px 16px; }
}

.bloco {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 24px;
  min-height: 180px;
  height: auto;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
  transition: all 0.15s ease-out;
  animation: slideUp 0.38s ease both;
  box-shadow: var(--shadow-ambient);
}

.bloco:hover {
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: var(--shadow-elevated);
  transform: translateY(-2px);
}

.bloco-header { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-shrink: 0; min-height: 32px; gap: 12px; }
.bloco-title { display: flex; align-items: center; justify-content: flex-start; min-width: 0; flex: 1; }
.bloco-name { font-weight: 600; font-size: 13px; color: var(--steel2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: 1.2px; }
.bloco-body { display: flex; flex-direction: column; flex: 1; gap: 8px; overflow-y: auto; overflow-x: hidden; justify-content: flex-start; }

/* Bloco actions (links widget) */
.bloco-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.btn-lnk {
  width: 34px; height: 34px; border-radius: 10px; border: none; background: transparent;
  color: var(--steel); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .14s, color .14s; padding: 7px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
/* Limpeza visual: esconde Editar e Adicionar quando os links estão ocultos */
.links-collapsed #quick-add-link-btn,
.links-collapsed #ledit-links,
.links-collapsed .lnk-sep {
  display: none;
}
.btn-lnk svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-lnk:hover { background: rgba(59,130,246,.15); color: var(--accent3); }
.btn-lnk:active { background: rgba(59,130,246,.22); color: var(--accent3); transition-duration: .06s; }
.btn-lnk.active { background: rgba(59,130,246,.18); color: var(--accent3); border: 1px solid rgba(59,130,246,.3); }
.lnk-sep { width: 1px; height: 16px; background: var(--border2); margin: 0 2px; }

/* ═══════════════════════════════════════════════════
   LINKS WIDGET (bloco da home)
═══════════════════════════════════════════════════ */
.links-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.links-list.hidden { display: none; }

.link-row {
  display: flex; align-items: center; gap: 5px;
  border-radius: var(--radius-sm); transition: background .12s;
}
.link-row.dragging { opacity: .45; background: rgba(59,130,246,.07); border-radius: var(--radius-sm); }

/* Drag handle — grip 6-dot SVG injetado via JS */
.link-handle {
  width: 22px; height: 36px; display: none; align-items: center; justify-content: center;
  color: var(--border2); cursor: grab; opacity: 1; transition: color .15s; flex-shrink: 0;
  user-select: none; -webkit-user-select: none; border-radius: 6px;
  touch-action: none; /* impede scroll no mobile durante o drag */
}
.link-handle svg { width: 12px; height: 12px; }
.link-handle:hover { color: var(--steel); }
.link-handle:active { cursor: grabbing; }
/* Em modo edição, handles ficam visíveis */
.links-editing .link-handle { display: flex; }

/* Link principal — parece um botão clicável */
.link-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; flex: 1; min-width: 0;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--text); transition: all .16s ease; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.link-item:hover {
  border-color: rgba(59,130,246,.45); background: rgba(37,99,235,.13);
  box-shadow: 0 2px 12px rgba(37,99,235,.2); transform: translateX(2px);
}
.link-item:active { transform: translateX(1px) scale(.99); transition-duration: .06s; }

/* Ícone/emoji do link */
.link-favicon {
  width: 28px; height: 28px; border-radius: 7px; background: rgba(59,130,246,.1);
  border: 1px solid rgba(59,130,246,.15);
  display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0;
  transition: background .16s;
}
.link-item:hover .link-favicon { background: rgba(59,130,246,.18); }

.link-label { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; letter-spacing: .1px; }

/* Botão de remover link */
.link-del {
  width: 28px; height: 28px; border-radius: 7px; border: none; background: transparent;
  color: var(--muted); cursor: pointer; display: none; align-items: center; justify-content: center;
  flex-shrink: 0; transition: background .12s, color .12s; padding: 5px;
}
.link-del svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.link-del:hover { background: rgba(239,68,68,.18); color: var(--danger); }
.links-editing .link-del { display: flex; }

.links-empty { color: var(--muted); font-size: 13px; padding: 12px 0; text-align: center; }

/* ═══════════════════════════════════════════════════
   CLOCK BLOCO
═══════════════════════════════════════════════════ */
.clock-display { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.clock-time {
  font-family: 'Bebas Neue', sans-serif; font-size: 76px; letter-spacing: 4px;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1;
}
.clock-date { font-size: 13px; color: var(--steel); margin-top: 10px; font-weight: 500; letter-spacing: .3px; }



/* ═══════════════════════════════════════════════════
   NOTES BLOCO
═══════════════════════════════════════════════════ */
.notes-area {
  flex: 1; resize: none; background: transparent; border: none; color: var(--text);
  font-size: 14px; line-height: 1.7; font-family: inherit; outline: none;
  min-height: 120px;
}
.notes-area::placeholder { color: var(--muted); }
.notes-footer { display: flex; justify-content: flex-end; margin-top: 6px; }
.notes-saved { font-size: 11px; color: var(--muted); }

/* ═══════════════════════════════════════════════════
   APPS PAGE
═══════════════════════════════════════════════════ */
#apps-page {
  display: none; padding: 80px 20px 110px; max-width: 1000px; margin: 0 auto; animation: fadeIn .25s ease;
}
#apps-page.visible { display: block; }

.apps-header { margin-bottom: 28px; display: flex; justify-content: center; }
.apps-title { font-family: 'Bebas Neue', sans-serif; font-size: 36px; letter-spacing: 4px; text-align: center; background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.apps-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 14px;
}

.app-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 20px 10px 16px; background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius); cursor: pointer; user-select: none;
  transition: border-color .22s, box-shadow .22s, transform .18s, background .18s;
  animation: slideUp .35s ease both; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  position: relative; overflow: hidden;
}
.app-tile::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .app-tile:hover {
    border-color: rgba(40,96,176,.5); box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 24px rgba(42,96,176,.1);
    transform: translateY(-4px) scale(1.03); background: rgba(20,40,80,.35);
  }
}
.app-tile:active { transform: scale(.96) !important; transition-duration: .08s; }

.app-tile-icon {
  width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 4px 20px rgba(0,0,0,.4); transition: box-shadow .22s, transform .22s;
  /* cor definida por app abaixo (defaults para azul) */
  background: linear-gradient(135deg, rgba(37,99,235,.28), rgba(59,130,246,.12));
  border: 1px solid rgba(59,130,246,.28); color: var(--accent3);
}
.app-tile-icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-tile:hover .app-tile-icon { box-shadow: 0 8px 28px rgba(42,96,176,.35); transform: scale(1.06); }

/* Cores por app */
#links-app-tile .app-tile-icon      { background: linear-gradient(135deg, rgba(37,99,235,.28), rgba(59,130,246,.12));  border-color: rgba(59,130,246,.28);  color: #60a5fa; }
#drive-app-tile .app-tile-icon      { background: linear-gradient(135deg, rgba(6,182,212,.22), rgba(14,165,233,.08));   border-color: rgba(14,165,233,.28);  color: #38bdf8; }
#estudos-app-tile .app-tile-icon    { background: linear-gradient(135deg, rgba(139,92,246,.22), rgba(167,139,250,.08)); border-color: rgba(139,92,246,.28);  color: #a78bfa; }
#numismatica-app-tile .app-tile-icon{ background: linear-gradient(135deg, rgba(245,158,11,.2),  rgba(251,191,36,.06));  border-color: rgba(245,158,11,.3);   color: #fbbf24; }

.app-tile-label {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 11px; font-weight: 700; color: var(--steel2); letter-spacing: .4px; text-align: center; line-height: 1.3; text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════
   PÁGINA COMUM — LINKS / DRIVE / etc.
═══════════════════════════════════════════════════ */
#links-page, .future-app-page {
  display: none; padding: 80px 20px 110px; max-width: 1100px; margin: 0 auto; animation: fadeIn .25s ease;
}
#links-page.visible, .future-app-page.visible { display: block; }

/* Drive page — display:none inicial via CSS; após isso JS controla via style.display */
#drive-page {
  display: none; padding: 80px 20px 110px; max-width: 1100px; margin: 0 auto; animation: fadeIn .25s ease;
}

/* Header de página (links, drive, vault…) */
.colls-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; justify-content: space-between; position: relative;
}
.colls-head-left { display: flex; align-items: center; gap: 10px; z-index: 10; }
.colls-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 36px; letter-spacing: 4px;
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 5; text-align: center; white-space: nowrap; pointer-events: none;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

.links-back-btn {
  display: flex; align-items: center; gap: 5px; padding: 7px 14px 7px 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; /* pill */
  color: var(--steel2); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  cursor: pointer; transition: all .2s cubic-bezier(.4,0,.2,1); white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,.4);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.links-back-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.links-back-btn:hover { background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.3); color: var(--accent3); box-shadow: 0 2px 14px rgba(37,99,235,.25); }
.links-back-btn:hover svg { transform: translateX(-2px); }

/* Botão de ação no header (+ Coleção, + Pasta, + Catalogar) — espelho do back button à direita */
.colls-action-btn {
  display: none; /* exibido apenas quando edit mode ativo */
  align-items: center; gap: 5px; padding: 7px 14px 7px 10px;
  background: rgba(37,99,235,.18); border: 1px solid rgba(59,130,246,.35);
  border-radius: 20px;
  color: var(--accent3); font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  cursor: pointer; transition: all .2s cubic-bezier(.4,0,.2,1); white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 1px 6px rgba(37,99,235,.2);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.colls-action-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.colls-action-btn:hover { background: rgba(37,99,235,.28); border-color: rgba(59,130,246,.55); box-shadow: 0 2px 14px rgba(37,99,235,.3); }

/* Botões de ação por modo de edição — trash e nova-coleção só em edit mode */
#btn-add-coll                          { display: none; }
.coll-edit-on  #btn-add-coll           { display: flex; }
.drive-edit-on #btn-drive-folder       { display: flex; }
.numis-edit-on #btn-add-coin           { display: flex; }
/* Trash dentro dos cards de coleção — só em edit mode */
.coll-hdr-btns .btn-ca.del             { display: none; }
.coll-edit-on .coll-hdr-btns .btn-ca.del { display: flex; }

/* Edit banner */
#coll-edit-banner {
  display: none; align-items: center; justify-content: center; gap: 8px;
  background: rgba(59,130,246,.15); border: 1px dashed rgba(59,130,246,.4);
  color: var(--accent3); font-size: 13px; font-weight: 500;
  padding: 12px; border-radius: var(--radius-sm); margin-bottom: 16px;
  animation: slideUp .25s ease; text-align: center;
}
#coll-edit-banner svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.coll-edit-on #coll-edit-banner { display: flex; }

/* Filters (links page) */
.links-filters { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.links-filter-chip {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border2);
  background: transparent; color: var(--steel); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: 6px; white-space: nowrap;
}
.links-filter-chip:hover { border-color: var(--steel); color: var(--steel2); }
.links-filter-chip.active { background: rgba(37,99,235,.15); border-color: rgba(59,130,246,.5); color: var(--accent3); }
.links-filter-chip .chip-count { font-size: 11px; background: rgba(255,255,255,.08); padding: 1px 6px; border-radius: 10px; }

.links-filter-search {
  flex: 1; min-width: 180px; position: relative; max-width: 320px;
}
.links-filter-search input {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid var(--border2);
  border-radius: 20px; padding: 7px 14px 7px 34px; color: var(--text); font-size: 13px; outline: none;
  transition: border-color .15s, background .15s;
}
.links-filter-search input:focus { border-color: rgba(59,130,246,.4); background: rgba(255,255,255,.06); }
.links-filter-search input::placeholder { color: var(--muted); }
.links-filter-search .search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}

.links-results { font-size: 11px; color: var(--muted); margin-left: auto; white-space: nowrap; align-self: center; }

/* Empty state links page */
.links-grid-empty { color: var(--muted); font-size: 13px; text-align: center; margin-top: 40px; }

/* ═══════════════════════════════════════════════════
   COLLECTIONS GRID
═══════════════════════════════════════════════════ */
.collections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1060px) { .collections-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .collections-grid { grid-template-columns: 1fr; } }

/* Collection card */
.coll-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  animation: slideUp .3s ease both;
}
.coll-card:hover { border-color: var(--border2); box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.coll-card.coll-dragging { opacity: .5; transform: scale(.97); }
.coll-card.coll-drag-over { border-color: rgba(59,130,246,.5); background: rgba(37,99,235,.06); }
.coll-card.filter-hide { display: none; }
.coll-card.reveal { animation: slideUp .28s ease both; }

/* Topo colorido do card */
.coll-card-stripe { height: 3px; background: linear-gradient(90deg, var(--accent2), var(--accent3)); flex-shrink: 0; }

/* Header do card */
.coll-hdr { display: flex; align-items: center; padding: 12px 12px 8px; gap: 8px; }
.coll-hdr-left { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; overflow: hidden; }
.coll-icon { font-size: 16px; flex-shrink: 0; }
.coll-name { font-size: 13px; font-weight: 600; color: var(--steel2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }

/* Botões de ação do card — sempre visíveis (exceto o lixo) */
.coll-hdr-btns { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.btn-ca {
  width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent;
  color: var(--steel); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .13s, color .13s; padding: 6px; flex-shrink: 0;
}
.btn-ca svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-ca:hover { background: rgba(59,130,246,.15); color: var(--accent3); }
.btn-ca.del:hover { background: rgba(239,68,68,.15); color: var(--danger); }
.btn-ca.active { background: rgba(59,130,246,.18); color: var(--accent3); }

/* Limpeza visual: esconde Editar e Adicionar quando os links estão ocultos */
.coll-links-collapsed .btn-ca[data-action="toggleCollEdit"],
.coll-links-collapsed .btn-ca[data-action="openAddCollLink"] {
  display: none;
}

/* Divider no card */
.coll-divider { height: 1px; background: var(--border); margin: 0 12px; }

/* Corpo do card */
.coll-body { padding: 10px 12px 12px; flex: 1; }
.coll-count { font-size: 11px; color: var(--muted); margin-top: 8px; font-family: 'JetBrains Mono', monospace; }

/* Links dentro da coleção */
.coll-links { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.coll-links.hidden { display: none; }
/* Link rows dentro de coleções — um pouco mais compactos */
.coll-links .link-item { padding: 8px 10px; }
.coll-links .link-favicon { width: 26px; height: 26px; font-size: 13px; }
.coll-links .link-label { font-size: 13px; }
/* Handle de reordenação dentro de coleção — só aparece em modo edição da coleção */
.coll-editing .coll-links .link-handle { display: flex; }
.coll-empty { color: var(--muted); font-size: 12px; padding: 10px 0; text-align: center; }

/* Card "Nova Coleção" */
.add-coll-card {
  background: rgba(255,255,255,.02); border: 1.5px dashed var(--border2); border-radius: var(--radius);
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 90px; cursor: pointer; color: var(--muted);
  transition: all .2s; animation: slideUp .35s ease both;
}
.coll-edit-on .add-coll-card { display: none; } /* substituído pelo .colls-action-btn no header */
.add-coll-card:hover { border-color: rgba(59,130,246,.5); color: var(--accent3); background: rgba(37,99,235,.05); transform: translateY(-2px); }
.add-coll-card .plus { font-size: 22px; font-weight: 300; line-height: 1; }
.add-coll-card .add-coll-label { font-size: 12px; font-weight: 600; letter-spacing: .5px; }

/* Edit mode — colls */
.coll-edit-on .coll-card { cursor: grab; }
.coll-edit-on .coll-card:active { cursor: grabbing; }
/* Dentro de coleção em modo edição — links ficam com handle visível */
.coll-editing .coll-links .link-del { display: flex; }

/* ═══════════════════════════════════════════════════
   DRIVE PAGE
═══════════════════════════════════════════════════ */
/* DRIVE PAGE — padding definido acima, junto com regras compartilhadas de página */

.drive-breadcrumb { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.drive-crumb {
  background: none; border: none; color: var(--steel); font-size: 13px; font-weight: 500;
  cursor: pointer; padding: 4px 8px; border-radius: 6px; transition: background .12s, color .12s;
}
.drive-crumb:hover { background: rgba(255,255,255,.05); color: var(--text); }
.drive-crumb-root { color: var(--steel2); }
.drive-crumb-sep { color: var(--border2); font-size: 12px; }

.drive-quota-wrap { margin-bottom: 16px; }
.drive-quota-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.drive-quota-fill { height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent3)); border-radius: 2px; transition: width .4s; }
.drive-quota-label { font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }

.drive-drop-zone {
  border: 1.5px dashed var(--border2); border-radius: var(--radius); padding: 28px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 18px;
  cursor: pointer; transition: all .15s; color: var(--muted); font-size: 13px; text-align: center;
}
.drive-drop-zone:hover, .drive-drop-zone.drag-over { border-color: rgba(59,130,246,.5); background: rgba(37,99,235,.05); color: var(--accent3); }
.drive-upload-link { background: none; border: none; color: var(--accent3); cursor: pointer; font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }
.drive-drop-hint { font-size: 11px; color: var(--steel); }

.drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; align-items: start; }
.drive-uploads { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }

/* #btn-drive-folder agora usa .colls-action-btn (ver acima) — regras legadas removidas */

/* ═══════════════════════════════════════════════════
   FUTURE APP PAGES
═══════════════════════════════════════════════════ */
.future-app-shell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  min-height: min(58vh, 540px); border-radius: 24px;
  background: linear-gradient(180deg, rgba(18,28,46,.92) 0%, rgba(10,12,18,.92) 100%);
  border: 1px solid rgba(255,255,255,.07); position: relative; overflow: hidden;
}
.future-app-icon { font-size: 48px; }
.future-app-kicker { font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--accent3); background: rgba(37,99,235,.15); padding: 4px 12px; border-radius: 20px; border: 1px solid rgba(59,130,246,.25); }
.future-app-heading { font-family: 'Bebas Neue', sans-serif; font-size: clamp(38px,6vw,58px); color: var(--text); }
.future-app-copy { color: var(--muted); font-size: 14px; text-align: center; max-width: 360px; line-height: 1.7; }

/* ═══════════════════════════════════════════════════
   MODAIS
═══════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.65); z-index: 500;
  display: none; align-items: center; justify-content: center; padding: 16px;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  animation: fadeIn .2s ease;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 22px;
  padding: 28px 24px; width: 100%; max-width: 440px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04) inset;
  animation: slideUp .3s cubic-bezier(0.34,1.2,0.64,1);
}
.modal h2 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 20px; letter-spacing: .3px; }
.modal-section-title { font-size: 12px; font-weight: 700; color: var(--steel); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }

/* Profile avatar */
.profile-avatar {
  width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2));
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700;
  color: #fff; margin: 0 auto 14px;
}

/* Diskette / backup button inside settings modal */
.settings-backup-btn {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border2);
  background: rgba(255,255,255,.04); color: var(--steel);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .14s, border-color .14s, color .14s;
  padding: 7px; flex-shrink: 0;
}
.settings-backup-btn svg { width: 100%; height: 100%; stroke: currentColor; }
.settings-backup-btn:hover {
  background: rgba(37,99,235,.14); border-color: rgba(59,130,246,.4); color: var(--accent3);
}


/* Settings */
.settings-io { display: flex; gap: 10px; margin-bottom: 10px; }
.btn-io {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); color: var(--steel2); font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all .15s;
}
.btn-io svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-io:hover { background: rgba(37,99,235,.1); border-color: rgba(59,130,246,.3); color: var(--accent3); }
.io-status { font-size: 12px; color: var(--muted); min-height: 18px; }
#import-file-input { display: none; }

/* ═══════════════════════════════════════════════════
   VAULT
═══════════════════════════════════════════════════ */
#modal-vault .modal { border-color: rgba(140,40,40,.3); background: #0b0d12; max-width: 520px; }
.vault-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.vault-header-icon { font-size: 28px; }
.vault-title-wrap h2 { margin-bottom: 2px; }
.vault-subtitle { font-size: 11px; color: var(--muted); letter-spacing: .5px; font-family: 'JetBrains Mono', monospace; }
.vault-timer { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: rgba(140,40,40,.7); text-align: right; margin-bottom: 14px; }

.vault-add-form { display: none; padding: 16px; background: rgba(255,255,255,.025); border-radius: var(--radius-sm); margin-bottom: 14px; border: 1px solid var(--border); }
.vault-add-btns { display: flex; gap: 8px; margin-top: 14px; }

.btn-vault-confirm {
  flex: 1; padding: 10px; background: rgba(239,68,68,.2); border: 1px solid rgba(239,68,68,.3);
  border-radius: var(--radius-sm); color: #f87171; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.btn-vault-confirm:hover { background: rgba(239,68,68,.3); }
.btn-vault-cancel-add {
  flex: 1; padding: 10px; background: transparent; border: 1px solid var(--border2);
  border-radius: var(--radius-sm); color: var(--steel); font-size: 14px; cursor: pointer;
  transition: background .15s;
}
.btn-vault-cancel-add:hover { background: rgba(255,255,255,.04); }

.vault-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; max-height: 300px; overflow-y: auto; }

.btn-vault-add {
  width: 100%; padding: 10px; display: flex; align-items: center; justify-content: center; gap: 6px;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2); border-radius: var(--radius-sm);
  color: #f87171; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s;
}
.btn-vault-add:hover { background: rgba(239,68,68,.18); }
.btn-vault-add svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ═══════════════════════════════════════════════════
   ANIMAÇÕES GLOBAIS
═══════════════════════════════════════════════════ */
@keyframes slideUp   { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fadeIn    { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut   { from { opacity: 1; } to { opacity: 0; } }

@keyframes pulse-glow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* New Widgets */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stat-icon-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent3);
  flex-shrink: 0;
}

.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.stat-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 8px var(--success);
}

.status-dot-offline {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--danger);
  box-shadow: 0 0 6px var(--danger);
}

.status-name {
  font-size: 14px;
  color: var(--text);
}

.status-latency {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════
   RESPONSIVIDADE
═══════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .bottom-dock { gap: 6px; padding: 8px 12px; bottom: 20px; }
  .dock-btn { width: 46px; height: 46px; border-radius: 14px; }
  .dock-btn svg { width: 20px; height: 20px; }
  #btn-edit-mode.dock-revealed { width: 46px; }
  .topbar { background: rgba(0,0,0,.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
}

@media (max-width: 640px) {
  .topbar { height: 50px; padding: 0 14px; }
  .topbar-greeting { font-size: 13px; max-width: 140px; }
  .auth-card { padding: 28px 18px; border-radius: 20px; }
  .bottom-dock { bottom: 14px; border-radius: 20px; }
  .dock-btn { width: 48px; height: 48px; border-radius: 14px; }
  .dock-btn svg { width: 22px; height: 22px; }
  #bloco-clock { order: -1; }
  #bloco-links { order: 0; }
  #bloco-tasks { order: 1; }
  #bloco-notes { order: 2; }
  .clock-time { font-size: clamp(48px, 18vw, 76px); }
  .main-content { padding: 70px 12px 100px; }
  #links-page, #drive-page, .future-app-page, #apps-page { padding: 70px 12px 100px; }
  .colls-header { margin-bottom: 16px; }
  .collections-grid { gap: 10px; }
  .apps-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; }
  .app-tile { padding: 18px 10px 14px; border-radius: 16px; }
  .app-tile-icon { font-size: 28px; }
  .drive-grid { grid-template-columns: repeat(2, 1fr); }

  /* Título de app no mobile — menor que desktop para caber sem sobrepor botões */
  .colls-title { font-size: 24px; letter-spacing: 2px; }

  /* Back button — área de toque mínima 44px (padrão iOS) */
  .links-back-btn { padding: 10px 16px 10px 12px; min-height: 44px; }

  /* Botão de ação do header — menor no mobile */
  .colls-action-btn { padding: 8px 10px 8px 8px; font-size: 10px; min-height: 40px; }


  /* Drive — drop-zone compacta no mobile */
  .drive-drop-zone { padding: 14px 12px; gap: 6px; }
  .drive-drop-zone > svg { display: none; }
  .drive-drop-hint { display: none; }
}

@media (max-width: 340px) {
  .topbar-brand-cloud { display: none; }
  .clock-time { font-size: 50px; }
  .dock-btn { width: 38px; height: 38px; border-radius: 10px; }
}

/* ═══════════════════════════════════════════════════
   DRIVE — CARDS & UPLOAD
═══════════════════════════════════════════════════ */
.drive-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 7px;
  cursor: pointer; transition: all .18s; text-align: center; position: relative;
  animation: slideUp .25s ease both;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.drive-card:hover { background: var(--surface2); border-color: var(--border2); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.drive-card-icon { font-size: 28px; line-height: 1; }
.drive-card-name { font-size: 12px; font-weight: 500; color: var(--steel2); word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.drive-card-meta { font-size: 10px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.drive-card-actions { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }

.btn-drive-card {
  width: 26px; height: 26px; border-radius: 7px; border: none; background: rgba(255,255,255,.05);
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .13s, color .13s; padding: 5px; flex-shrink: 0;
}
.btn-drive-card svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn-drive-card:hover { background: rgba(59,130,246,.14); color: var(--accent3); }
.btn-drive-card.del:hover { background: rgba(239,68,68,.14); color: var(--danger); }

.drive-empty { color: var(--muted); font-size: 13px; padding: 40px 20px; text-align: center; grid-column: 1 / -1; }
.drive-crumb-cur { color: var(--text); font-weight: 600; cursor: default; }
.drive-drop-zone.drag-active { border-color: rgba(59,130,246,.6); background: rgba(37,99,235,.08); color: var(--accent3); }
.drive-edit-on .drive-card { cursor: default; }

/* Upload progress */
.drive-up-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.drive-up-name { font-size: 12px; color: var(--steel2); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drive-up-bar-wrap { width: 80px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.drive-up-bar { height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent3)); border-radius: 2px; transition: width .2s; }
.drive-up-status { font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; width: 36px; text-align: right; }
.drive-up-status.ok { color: var(--success); }
.drive-up-status.err { color: var(--danger); }

/* ═══════════════════════════════════════════════════
   VAULT — ITEMS
═══════════════════════════════════════════════════ */
.vault-add-form.open { display: block; }
.vault-timer.warning { color: var(--danger); }

.vault-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px;
  background: rgba(255,255,255,.025); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: background .13s;
}
.vault-item:hover { background: rgba(255,255,255,.04); }
.vault-item-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.vault-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vault-item-label { font-size: 13px; font-weight: 600; color: var(--text); }
.vault-item-url { font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vault-item-note { font-size: 11px; color: var(--steel); line-height: 1.5; margin-top: 2px; }
.vault-item-actions { display: flex; gap: 4px; flex-shrink: 0; }

.btn-vault-open {
  padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.1); color: #f87171; font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background .13s; white-space: nowrap;
}
.btn-vault-open:hover { background: rgba(239,68,68,.2); }

.btn-vault-del {
  width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent;
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 12px; transition: background .13s, color .13s;
}
.btn-vault-del:hover { background: rgba(239,68,68,.14); color: var(--danger); }

.vault-empty { color: var(--muted); font-size: 13px; padding: 20px 0; text-align: center; }

/* ═══════════════════════════════════════════════════
   COLLECTION — EDIT STATE
═══════════════════════════════════════════════════ */
.coll-card.coll-editing { border-color: rgba(59,130,246,.4); box-shadow: 0 0 0 1px rgba(59,130,246,.2); }
.coll-editing .coll-name[contenteditable="true"] {
  background: rgba(59,130,246,.08); border-radius: 4px; padding: 1px 5px;
  outline: 1px solid rgba(59,130,246,.3); cursor: text;
}
.btn-ca.active { background: rgba(59,130,246,.15); color: var(--accent3); }

/* ═══════════════════════════════════════════════════
   NUMISMÁTICA — APP STYLES
   ═══════════════════════════════════════════════════ */
.numis-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 10px;
  margin-bottom: 24px;
}
@media (max-width: 768px) {
  .numis-stats-row { grid-template-columns: repeat(2, 1fr); }
}
/* btn-add-coin agora usa .colls-action-btn — regra de show via .numis-edit-on acima */

.numis-stat-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.numis-stat-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  color: var(--text);
}
.numis-stat-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--steel);
  letter-spacing: .5px;
}

/* ═══════════════════════════════════════════════════
   NUMÍSMÁTICA — CARDS
═══════════════════════════════════════════════════ */
.numis-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  animation: slideUp .3s ease both;
  will-change: transform;
  contain: layout style;
}
.numis-card:hover {
  border-color: var(--border2); box-shadow: 0 8px 28px rgba(0,0,0,.4);
  transform: translateY(-3px);
  backface-visibility: hidden;
}

/* Imagem / placeholder */
.numis-card-img {
  width: 100%; aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  background-color: rgba(255,255,255,.03);
  flex-shrink: 0;
  position: relative; overflow: hidden;
}
.numis-card-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.45));
  pointer-events: none;
}
/* placeholder icon quando sem imagem */
.numis-card-img-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: rgba(255,255,255,.12);
}
.numis-card-img-placeholder svg { width: 48px; height: 48px; }

/* Corpo */
.numis-card-body {
  padding: 14px 14px 12px; flex: 1;
  display: flex; flex-direction: column; gap: 10px;
}

/* Badge de tipo */
.numis-type-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; width: fit-content;
}
.numis-type-badge.coin     { background: rgba(245,158,11,.15); color: #fbbf24; border: 1px solid rgba(245,158,11,.25); }
.numis-type-badge.banknote { background: rgba(16,185,129,.12); color: #34d399; border: 1px solid rgba(16,185,129,.22); }
.numis-type-badge.other    { background: rgba(139,92,246,.12);  color: #a78bfa; border: 1px solid rgba(139,92,246,.22); }

/* Grid de informações */
.numis-card-info { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.numis-info-row { display: flex; flex-direction: column; gap: 1px; }
.numis-info-lbl {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.numis-info-val {
  font-size: 13px; font-weight: 600; color: var(--steel2);
}
.numis-info-val.full { grid-column: 1 / -1; } /* linha inteira (país longo) */

/* Badge qualidade */
.badge-quality {
  background: rgba(59,130,246,.1); padding: 2px 7px;
  border-radius: 5px; font-size: 11px; color: var(--accent3);
  border: 1px solid rgba(59,130,246,.2);
}
/* Valor em destaque */
.numis-value-row {
  padding-top: 6px; border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.numis-value-lbl { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.numis-value-val { font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 1px; color: var(--text); }

/* Barra de tipo no topo */
.numis-card .coll-card-stripe { height: 3px; flex-shrink: 0; }

/* Controles de edição (via numis-edit-on) */
.numis-card-actions {
  display: none; align-items: center; gap: 4px;
}
.numis-edit-on .numis-card-actions { display: flex; }

/* Status colors */
.numis-type-coin     { color: #fbbf24; }
.numis-type-banknote { color: #34d399; }
.numis-type-other    { color: #a78bfa; }

/* ═══════════════════════════════════════════════════
   GERENCIAMENTO DE USUÁRIOS
═══════════════════════════════════════════════════ */

/* The settings-backup-btn is now inside a flex div, so override absolute positioning */
#modal-settings .settings-backup-btn {
  position: static;
}

.perm-toggle {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--steel2); cursor: pointer;
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: rgba(255,255,255,.02); transition: border-color .13s, background .13s;
  user-select: none;
}
.perm-toggle:hover { border-color: var(--border2); background: rgba(255,255,255,.04); }
.perm-toggle input[type="checkbox"] { accent-color: var(--accent2); width: 15px; height: 15px; }

.user-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.user-row-info { flex: 1; min-width: 0; }
.user-row-name { font-size: 13px; font-weight: 600; color: var(--text); }
.user-row-username { font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }
.user-row-perms { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.user-perm-chip {
  font-size: 10px; padding: 2px 7px; border-radius: 10px; font-weight: 600;
  background: rgba(37,99,235,.12); color: var(--accent3); border: 1px solid rgba(59,130,246,.2);
}
.user-row-actions { display: flex; gap: 4px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════
   NUMIŚMATICA — SCROLL & FILTER FIXES
═══════════════════════════════════════════════ */
#numismatica-page {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

#numismatica-page .links-filters {
  justify-content: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════
   NUMISMÁTICA — BOTÃO INFO (i)
═══════════════════════════════════════════════ */
.numis-modal {
  max-width: 420px;
  width: 100%;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
  border-radius: 20px;
}
.numis-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
}
.numis-modal-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--steel2);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.numis-modal-close {
  width: 30px; height: 30px; border-radius: 8px; border: none;
  background: rgba(255,255,255,.05); color: var(--steel);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .14s, color .14s;
}
.numis-modal-close:hover { background: rgba(239,68,68,.15); color: #f87171; }

/* Hero image */
.numis-hero-img {
  width: 100%;
  height: 130px;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  transition: background .15s;
}
.numis-hero-img:hover { background: rgba(255,255,255,.04); }
.numis-hero-img.numis-drop-active {
  background: rgba(37,99,235,.06);
  border-color: rgba(59,130,246,.35);
}
.numis-hero-img-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .3px;
  pointer-events: none;
  width: 100%;
}

/* Scroll body */
.numis-modal-body {
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
  padding: 0 20px;
}

/* Bloco de campo */
.numis-block {
  padding: 14px 0 2px;
}
.numis-block-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.numis-block-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.numis-required { color: var(--danger); margin-left: 2px; }

/* Input universal do modal */
.numis-input {
  display: block;
  width: 100%;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
  -webkit-appearance: none; appearance: none;
  resize: vertical;
}
.numis-input:focus {
  border-color: rgba(59,130,246,.5);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(59,130,246,.1);
}
.numis-input::placeholder { color: rgba(148,163,184,.35); }

/* Accordion "Mais detalhes" */
.numis-accordion-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--border);
  padding: 14px 0 10px;
  color: var(--steel2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .15s;
  text-align: left;
}
.numis-accordion-btn:hover { color: var(--text); }
.numis-accordion-btn svg {
  flex-shrink: 0;
  transition: transform .2s;
}
.numis-accordion-hint {
  font-size: 10px;
  color: var(--muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: auto;
}
.numis-accordion-body {
  padding-bottom: 8px;
}

/* Chips de qualidade */
.numis-quality-row {
  flex-wrap: wrap;
  gap: 6px;
}

/* Footer */
.numis-modal-footer {
  padding: 14px 20px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 0;
}
.numis-btn-save {
  width: 100%;
  padding: 13px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 4px 16px rgba(37,99,235,.3);
}
.numis-btn-save:hover { background: var(--accent2); box-shadow: 0 6px 20px rgba(59,130,246,.4); transform: translateY(-1px); }
.numis-btn-save:active { transform: translateY(0); }
.numis-btn-save:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.numis-btn-addmore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--steel2);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color .15s, background .15s;
  margin-top: 4px;
  letter-spacing: .3px;
}
.numis-btn-addmore:hover { color: var(--accent3); background: rgba(37,99,235,.07); }
.numis-btn-addmore svg { flex-shrink: 0; }

/* Mobile bottom-sheet */
@media (max-width: 640px) {
  .numis-modal {
    max-width: 100%;
    max-height: 95vh;
    border-radius: 20px 20px 0 0;
    width: 100%;
  }
  #modal-numis-item.modal-overlay.open {
    align-items: flex-end;
    padding: 0;
  }
  .numis-hero-img { height: 100px; }
  .numis-modal-body { padding: 0 16px; }
  .numis-modal-footer { padding: 12px 16px 14px; }
  .numis-modal-header { padding: 14px 16px 12px; }

  /* Chips de tipo: 3 colunas iguais, sem risco de quebrar linha */
  #numis-type-chips {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  #numis-type-chips .numis-type-chip {
    text-align: center;
    justify-content: center;
    padding: 8px 4px;
  }
}


/* ═══════════════════════════════════════════════════
   NUMISMÁTICA — BOTÃO INFO (i)
═══════════════════════════════════════════════════ */
.btn-numis-info {
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(59,130,246,.1); color: var(--accent3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .13s, color .13s, border-color .13s;
  padding: 5px; flex-shrink: 0;
  border: 1px solid rgba(59,130,246,.2);
}
.btn-numis-info svg {
  width: 15px; height: 15px; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.btn-numis-info:hover {
  background: rgba(59,130,246,.25); color: #fff;
  border-color: rgba(59,130,246,.5);
}

/* ═══════════════════════════════════════════════════
   NUMISMÁTICA — MODAL DE DETALHES (leitura)
═══════════════════════════════════════════════════ */
.numis-detail-modal {
  max-width: 680px; padding: 0; overflow: hidden;
  display: flex; flex-direction: column; max-height: 88vh;
}
.numis-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 14px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; gap: 10px;
}
.numis-detail-header-left {
  display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0;
}
.numis-detail-header-left h2 {
  margin-bottom: 0; font-size: 16px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.numis-detail-body {
  display: flex; flex: 1; overflow: hidden;
}
.numis-detail-img-wrap {
  flex: 0 0 200px;
  background: rgba(255,255,255,.02);
  border-right: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.numis-detail-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.numis-detail-img-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: rgba(255,255,255,.1);
}
.numis-detail-img-ph svg { width: 56px; height: 56px; }
.numis-detail-info {
  flex: 1; padding: 20px 22px; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: 18px;
}
.numis-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px;
}
.numis-detail-field { display: flex; flex-direction: column; gap: 3px; }
.numis-detail-lbl {
  font-size: 10px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .6px;
}
.numis-detail-val { font-size: 14px; font-weight: 600; color: var(--steel2); }
.numis-detail-value {
  font-family: 'Bebas Neue', sans-serif; font-size: 22px;
  letter-spacing: 1px; color: var(--text);
}
.numis-detail-desc-wrap {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.numis-detail-desc {
  font-size: 13px; color: var(--steel2); line-height: 1.75;
  white-space: pre-wrap; margin: 0;
}
@media (max-width: 640px) {
  .numis-detail-modal {
    max-width: 100%; max-height: 92vh;
    border-radius: 20px 20px 0 0;
    margin-top: auto; width: 100%;
  }
  #modal-numis-detail.modal-overlay.open {
    align-items: flex-end; padding: 0;
  }
  .numis-detail-body { flex-direction: column; overflow-y: auto; }
  .numis-detail-img-wrap {
    flex: 0 0 150px; border-right: none;
    border-bottom: 1px solid var(--border); width: 100%;
  }
  .numis-detail-info { padding: 14px 16px; }
  .numis-detail-grid { gap: 12px; }
  /* Fix: botão Salvar sempre visível no bottom sheet */
  .numis-modal-footer {
    position: sticky; bottom: 0;
    background: var(--surface);
    z-index: 10;
    box-shadow: 0 -1px 0 var(--border);
  }
}


/* ═══════════════════════════════════════════════════
   NUMISMÁTICA — CHIPS DE TIPO E QUALIDADE
═══════════════════════════════════════════════════ */
.numis-chips-row {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 2px;
}
.numis-type-chip, .numis-quality-chip {
  padding: 6px 14px; border-radius: 20px; border: 1px solid var(--border2);
  background: rgba(255,255,255,.04); color: var(--steel2);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all .15s; white-space: nowrap;
}
.numis-type-chip:hover, .numis-quality-chip:hover {
  border-color: rgba(59,130,246,.4); color: var(--accent3);
  background: rgba(37,99,235,.1);
}
.numis-type-chip.active {
  background: rgba(37,99,235,.2); border-color: rgba(59,130,246,.6);
  color: var(--accent3);
}
.numis-quality-chip.active {
  background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.4);
  color: #fbbf24;
}

/* Botão toggle de descrição */
.numis-desc-toggle-btn {
  background: none; border: none; color: var(--accent3);
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 0;
  letter-spacing: .2px; transition: opacity .15s;
}
.numis-desc-toggle-btn:hover { opacity: .75; }

/* Autocomplete */
.numis-autocomplete {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); z-index: 100; list-style: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); overflow: hidden;
  max-height: 200px; overflow-y: auto;
}
.numis-autocomplete li {
  padding: 9px 14px; font-size: 13px; color: var(--steel2);
  cursor: pointer; transition: background .12s;
}
.numis-autocomplete li:hover { background: rgba(59,130,246,.12); color: var(--text); }

/* Loading state do grid */
.numis-loading {
  grid-column: 1 / -1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px;
  padding: 60px 0; color: var(--muted); font-size: 13px;
}

/* Stats — card de valor total ocupa linha inteira */
.numis-stats-row {
  grid-template-columns: repeat(3, 1fr);
}
.numis-stats-row .numis-stat-card:last-child {
  grid-column: span 3;
  background: rgba(37,99,235,.08);
  border-color: rgba(59,130,246,.2);
}
.numis-stats-row .numis-stat-card:last-child .numis-stat-val {
  font-size: 28px; color: var(--accent3);
}
@media (max-width: 640px) {
  .numis-stats-row { grid-template-columns: repeat(2, 1fr); }
  .numis-stats-row .numis-stat-card:last-child { grid-column: span 2; }
}

/* ═══════════════════════════════════════════════════
   RESOLUÇÃO INTERMEDIÁRIA (ex: TV 1360×768)
═══════════════════════════════════════════════════ */
@media (max-width: 1366px) and (min-width: 1061px) {
  .main-content { padding: 70px 16px 90px; }
  .blocos-grid { gap: 14px; }
  .bloco { min-height: 140px; padding: 18px; }
  .bloco-header { margin-bottom: 14px; }
  .clock-time { font-size: 56px; }
  .clock-date { font-size: 12px; margin-top: 6px; }
  .stats-grid { gap: 12px; }
  .stat-value { font-size: 15px; }
  .status-list { gap: 8px; }
}