/*
 * Keepit — identidade visual do simulador.
 * Cores medidas nas peças da marca (banner "KeepIt Meu Locker", propaganda e
 * "Comércio Local"): verde neon #3DE90F, verde-floresta dos armários #0B5E38,
 * verde profundo #04422B e grafite #2E2E2E. O "i" em forma de chave do logotipo
 * é o elemento gráfico recorrente.
 * As variáveis --sz-* são os nomes usados pelos componentes do núcleo do
 * simulador; os valores abaixo são todos da Keepit. --sz-blue = cor de destaque.
 */
:root {
  --kp-neon: #3de90f;
  --kp-forest: #0b5e38;
  --kp-deep: #04422b;
  --kp-graphite: #2e2e2e;

  /* Tema claro: destaque em verde-floresta (contraste em texto), neon nos detalhes */
  --sz-blue: #0b7a43;
  --sz-blue-600: #0b5e38;
  --sz-blue-050: #e6f6ea;
  --sz-blue-100: #c8ecd2;
  --sz-blue-200: #9edcae;
  --sz-blue-300: #5fd07a;
  --sz-blue-400: #2fb85a;
  --sz-blue-700: #0b5e38;
  --sz-blue-800: #04422b;
  --sz-blue-900: #032e1e;
  --sz-ink: #1f1f1f;

  /* Acento secundário: âmbar (prazos e alertas) */
  --sz-ice: #fdf6e3;
  --sz-ice-300: #f5d98c;
  --sz-ice-500: #e0a92a;
  --sz-ice-700: #a8760c;

  --sz-n-0: #ffffff; --sz-n-50: #f6f7f6; --sz-n-100: #eef0ee; --sz-n-200: #e0e3e0; --sz-n-300: #c6ccc7;
  --sz-n-400: #9fa6a0; --sz-n-500: #868d87; --sz-n-600: #59605a; --sz-n-700: #3a3f3b; --sz-n-800: #2e2e2e; --sz-n-900: #1f1f1f;

  --sz-bg: #f2f4f2;
  --sz-surface: #ffffff;
  --sz-surface-2: #eef1ee;
  --sz-surface-3: #e3e8e4;
  --sz-border: #dfe4e0;
  --sz-border-2: #cdd4ce;

  --sz-text: #1f1f1f;
  --sz-text-2: #59605a;
  --sz-text-3: #868d87;
  --sz-on-blue: #ffffff;

  --sz-success: #0b7a43;
  --sz-success-050: #e6f6ea;
  --sz-warning: #d98a00;
  --sz-warning-050: #fdf3e1;
  --sz-danger: #e0503f;
  --sz-danger-050: #fdecea;
  --sz-info: #2f7fc1;
  --sz-violet: #8b6cf0;
  --sz-violet-050: #f1ecff;

  --sz-prio-baixa: #868d87;
  --sz-prio-media: #2f7fc1;
  --sz-prio-alta: #d98a00;
  --sz-prio-urgente: #e0503f;

  --sz-font: "Montserrat", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --sz-font-display: "Montserrat", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --sz-mono: "IBM Plex Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
  --sz-fs-xs: 12px; --sz-fs-sm: 13px; --sz-fs-md: 14px; --sz-fs-lg: 18px; --sz-fs-xl: 24px; --sz-fs-2xl: 32px;

  --sz-radius-sm: 8px; --sz-radius: 12px; --sz-radius-lg: 18px; --sz-radius-xl: 26px;
  --sz-shadow-sm: 0 1px 2px rgb(17 17 17 / 6%);
  --sz-shadow: 0 1px 2px rgb(17 17 17 / 5%), 0 6px 16px -4px rgb(17 17 17 / 8%);
  --sz-shadow-lg: 0 2px 6px rgb(17 17 17 / 6%), 0 24px 48px -12px rgb(17 17 17 / 22%);
  --sz-ring: 0 0 0 3px rgb(61 233 15 / 30%);

  --sz-1: 4px; --sz-2: 8px; --sz-3: 12px; --sz-4: 16px; --sz-5: 20px; --sz-6: 24px; --sz-8: 32px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  color-scheme: light;
}

/* Tema escuro (padrão do simulador): grafite + verde neon, como os banners */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sz-blue: #3de90f; --sz-blue-600: #34cf0b; --sz-on-blue: #0d2410;
    --sz-blue-050: #1b3319; --sz-blue-100: #22401f;
    --sz-bg: #232323; --sz-surface: #2e2e2e; --sz-surface-2: #363636; --sz-surface-3: #3e3e3e;
    --sz-border: #3d3d3d; --sz-border-2: #4a4a4a;
    --sz-text: #f3f4f2; --sz-text-2: #b3b8b3; --sz-text-3: #848a85;
    --sz-ink: #f3f4f2; --sz-ice: #33291a;
    --sz-success: #3de90f; --sz-success-050: #1b3319; --sz-warning-050: #3a2d14; --sz-danger-050: #3d1d19; --sz-violet-050: #2a2342;
    --sz-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 16px -4px rgb(0 0 0 / 40%);
    --sz-shadow-lg: 0 2px 6px rgb(0 0 0 / 30%), 0 24px 48px -12px rgb(0 0 0 / 60%);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --sz-blue: #3de90f; --sz-blue-600: #34cf0b; --sz-on-blue: #0d2410;
  --sz-blue-050: #1b3319; --sz-blue-100: #22401f;
  --sz-bg: #232323; --sz-surface: #2e2e2e; --sz-surface-2: #363636; --sz-surface-3: #3e3e3e;
  --sz-border: #3d3d3d; --sz-border-2: #4a4a4a;
  --sz-text: #f3f4f2; --sz-text-2: #b3b8b3; --sz-text-3: #848a85;
  --sz-ink: #f3f4f2; --sz-ice: #33291a;
  --sz-success: #3de90f; --sz-success-050: #1b3319; --sz-warning-050: #3a2d14; --sz-danger-050: #3d1d19; --sz-violet-050: #2a2342;
  --sz-shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 6px 16px -4px rgb(0 0 0 / 40%);
  --sz-shadow-lg: 0 2px 6px rgb(0 0 0 / 30%), 0 24px 48px -12px rgb(0 0 0 / 60%);
  color-scheme: dark;
}

/* ---------- Logo e marca ---------- */
.kp-logo { display: block; flex: none; user-select: none; overflow: visible; }
.sz-logo { display: block; user-select: none; align-self: flex-start; max-width: 100%; }
.sz-mark { display: block; flex: none; }
.sz-mark.anim .m-k { stroke-dasharray: 300; stroke-dashoffset: 300; animation: keyDraw .9s var(--ease) .1s forwards; }
.sz-mark.anim .m-k * { stroke-dasharray: 300; stroke-dashoffset: 300; animation: keyDraw .9s var(--ease) .1s forwards; }
.sz-mark.anim { animation: markPop .9s var(--ease) both; }
@keyframes keyDraw { to { stroke-dashoffset: 0; } }
@keyframes markPop { from { transform: scale(.8); opacity: 0; } 50% { opacity: 1; } to { transform: none; } }

/* Faixa neon inclinada (elemento dos banners) */
.kp-band { background: var(--kp-neon); color: #0d2410; clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%); }

/* Loader */
.arc-loader { display: inline-block; animation: spin .9s linear infinite; flex: none; }
.arc-loader .al-ring { stroke: color-mix(in srgb, currentColor 14%, transparent); }
.arc-loader .al-arc { stroke: var(--kp-neon); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Detalhe de cards: régua neon na base */
.arc-corner { position: relative; overflow: hidden; }
.arc-corner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--kp-neon); opacity: .9; pointer-events: none; }
.arc-corner.ice::after { background: var(--sz-ice-500); }
.arc-corner.soft::after { opacity: .25; }

/* Splash */
.boot {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: radial-gradient(1100px 680px at 78% 12%, rgb(11 94 56 / 70%), transparent 62%), radial-gradient(800px 500px at 10% 100%, rgb(61 233 15 / 14%), transparent 60%), #232323;
  color: #fff; transition: opacity .45s var(--ease), visibility .45s;
}
.boot.out { opacity: 0; visibility: hidden; }
.boot-in { display: grid; justify-items: center; gap: 22px; }
.boot-in .kp-logo { opacity: 0; animation: fadeUp .5s var(--ease) .45s forwards; }
.boot-bar { width: 140px; height: 3px; border-radius: 3px; background: rgb(255 255 255 / 12%); overflow: hidden; opacity: 0; animation: fadeUp .4s var(--ease) .6s forwards; }
.boot-bar i { display: block; height: 100%; width: 40%; background: var(--kp-neon); border-radius: 3px; animation: bootBar 1s var(--ease) .6s infinite; }
.boot-cap { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgb(255 255 255 / 55%); opacity: 0; animation: fadeUp .4s var(--ease) .7s forwards; }
@keyframes bootBar { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Estado vazio */
.empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 36px 16px; color: var(--sz-text-2); }
.empty-art { width: 96px; height: 96px; margin-bottom: 6px; }
.empty-art .ea-ring { fill: none; stroke: var(--sz-surface-3); stroke-width: 10; }
.empty-art .ea-ring2 { fill: none; stroke: var(--sz-border); stroke-width: 2; stroke-dasharray: 3 5; }
.empty-art .ea-arc { fill: none; stroke: var(--kp-neon); stroke-width: 10; stroke-linecap: butt; }
.empty h4 { margin: 0; font-size: 15px; color: var(--sz-text); }
.empty p { margin: 0; font-size: 13px; max-width: 320px; }
.empty .btn { margin-top: 10px; }