@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
    --ink-900:#04060c; --ink-800:#070b14; --ink-700:#0a0f1b;
    --line:#182031; --line-hi:#26324a;
    --gold-300:#f6dda6; --gold-500:#e2b555; --gold-600:#b98d2e;
    --volt:#38e0ff;
    --txt:#e6edfa; --txt-2:#d3dcee; --dim:#a3b0c6; --dim-2:#93a1b8; --dim-3:#6b7a94;
    --mono:"JetBrains Mono",Consolas,monospace;
    --sans:"Inter",system-ui,sans-serif;
    --selo:linear-gradient(145deg,var(--gold-300),var(--gold-500) 58%,var(--gold-600));
    --sidebar-w:250px;
}
*,*::before,*::after{ box-sizing:border-box; }
html,body{ background:var(--ink-900); color:var(--txt); margin:0; min-height:100vh; }
body{ font-family:var(--sans); font-weight:300; line-height:1.6; }
h1,h2,h3{ font-family:var(--sans); font-weight:700; letter-spacing:-.02em; margin:0; }
a{ color:inherit; text-decoration:none; }
code{
    background:rgba(0,0,0,.4); border:1px solid var(--line); border-radius:5px;
    padding:1px 6px; font-family:var(--mono); font-size:12px; color:var(--gold-300);
}

/* ---------- layout: sidebar fixa + conteúdo ---------- */
.wk-shell{ display:flex; min-height:100vh; }

.wk-sidebar{
    position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w);
    background:rgba(6,9,16,.95); border-right:1px solid var(--line);
    display:flex; flex-direction:column; overflow-y:auto;
}
.wk-brand{
    display:flex; align-items:center; gap:10px; padding:20px 18px;
    border-bottom:1px solid var(--line);
}
.wk-brand img{ width:32px; height:32px; object-fit:contain; border-radius:8px; }
.wk-brand b{
    display:block; font-size:12.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
    background:linear-gradient(90deg,var(--gold-300),var(--gold-600));
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.wk-brand small{
    display:block; font-family:var(--mono); font-size:8.5px; letter-spacing:.2em;
    color:var(--dim-3); text-transform:uppercase; margin-top:2px;
}

.wk-nav{ flex:1; padding:16px 12px; }
.wk-nav .grupo{
    font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
    color:var(--dim-3); padding:14px 10px 8px;
}
.wk-nav .grupo:first-child{ padding-top:4px; }
.wk-nav a{
    display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px;
    font-size:13px; color:var(--dim-2); margin-bottom:1px;
}
.wk-nav a .ic{ flex:none; width:16px; text-align:center; font-size:13px; opacity:.85; }
.wk-nav a:hover{ background:rgba(255,255,255,.04); color:var(--txt-2); }
.wk-nav a.on{ background:rgba(226,181,85,.1); color:var(--gold-300); font-weight:500; }

.wk-sidebar-foot{
    padding:14px 18px; border-top:1px solid var(--line);
    font-family:var(--mono); font-size:9.5px; color:var(--dim-3);
}
.wk-sidebar-foot a{ color:var(--gold-500); }

.wk-main{ flex:1; margin-left:var(--sidebar-w); min-width:0; }
.wk-topbar{
    position:sticky; top:0; z-index:5; display:flex; align-items:center; justify-content:space-between;
    padding:16px 32px; border-bottom:1px solid var(--line);
    background:rgba(4,6,12,.85); backdrop-filter:blur(10px);
}
.wk-search{
    flex:1; max-width:360px; margin-right:20px;
}
.wk-search input{
    width:100%; height:36px; padding:0 14px; border-radius:8px; font-size:13px;
    background:rgba(255,255,255,.03); border:1px solid var(--line-hi); color:var(--txt);
    font-family:var(--sans); outline:none;
}
.wk-search input::placeholder{ color:var(--dim-3); }
.wk-search input:focus{ border-color:var(--gold-500); }
.wk-back{ font-size:12.5px; color:var(--dim-2); white-space:nowrap; }
.wk-back:hover{ color:var(--gold-300); }

.wk-content{ max-width:820px; margin:0 auto; padding:36px 32px 90px; }

/* ---------- página inicial: grid de categorias ---------- */
.wk-hero{ margin-bottom:36px; }
.wk-hero h1{ font-size:28px; color:var(--gold-300); margin-bottom:10px; }
.wk-hero p{ color:var(--dim-2); font-size:14.5px; }

.wk-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; margin-top:24px; }
.wk-tile{
    display:flex; align-items:flex-start; gap:12px; padding:18px;
    background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:12px;
    transition:border-color .15s ease, transform .15s ease;
}
.wk-tile:hover{ border-color:var(--gold-500); transform:translateY(-2px); }
.wk-tile .ic{
    flex:none; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
    background:var(--selo); color:#16110a; font-size:15px;
}
.wk-tile b{ display:block; color:var(--txt); font-size:14px; margin-bottom:3px; }
.wk-tile span{ display:block; color:var(--dim-2); font-size:12.5px; line-height:1.5; }

/* ---------- página de post ---------- */
.wk-post h1{ font-size:26px; color:var(--gold-300); margin-bottom:8px; }
.wk-post .wk-desc{ color:var(--dim-2); font-size:14px; margin-bottom:28px; }

.wk-card{
    padding:16px 18px; margin-bottom:12px;
    background:rgba(255,255,255,.02); border:1px solid var(--line); border-radius:10px;
}
.wk-card b{ display:block; color:var(--txt); font-size:14px; margin-bottom:4px; }
.wk-card p{ color:var(--dim-2); font-size:13.5px; line-height:1.65; margin:0; }

.wk-aviso{
    display:flex; gap:12px; padding:16px; margin:18px 0;
    border-radius:10px; background:rgba(255,159,64,.1); border:1px solid rgba(255,159,64,.4);
}
.wk-aviso b{ color:#ff9f40; display:block; margin-bottom:4px; }
.wk-aviso p{ font-size:13px; color:var(--txt-2); line-height:1.6; margin:0; }

.wk-dica{
    display:flex; gap:12px; padding:16px; margin:18px 0;
    border-radius:10px; background:rgba(56,224,255,.06); border:1px solid rgba(56,224,255,.25);
}
.wk-dica b{ color:var(--volt); display:block; margin-bottom:4px; }
.wk-dica p{ font-size:13px; color:var(--txt-2); line-height:1.6; margin:0; }

.wk-prev-next{
    display:flex; justify-content:space-between; gap:16px; margin-top:40px;
    padding-top:20px; border-top:1px solid var(--line);
}
.wk-prev-next a{
    font-size:13px; color:var(--dim-2); padding:10px 14px; border:1px solid var(--line); border-radius:8px;
}
.wk-prev-next a:hover{ border-color:var(--gold-500); color:var(--gold-300); }

@media (max-width:860px){
    .wk-sidebar{ transform:translateX(-100%); transition:transform .2s ease; z-index:20; }
    .wk-sidebar.on{ transform:translateX(0); }
    .wk-main{ margin-left:0; }
    .wk-content{ padding:28px 18px 70px; }
}

/* ================= DEMOS ANIMADAS =================
   Cada guia tem uma demo em CSS/JS puro que representa a função,
   sem imagem nem gravação de tela — só liga quando entra na tela. */
.wk-demo{
    position:relative; margin:22px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden;
    background:linear-gradient(180deg, rgba(10,15,27,.92), rgba(4,6,12,.92)); box-shadow:0 16px 40px rgba(0,0,0,.4);
}
.wk-demo-top{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--line); background:rgba(7,11,20,.85); }
.wk-demo-top b{ font-size:13px; font-weight:600; color:var(--txt-2); }
.wk-demo-tag{ margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--dim-3); }
.wk-demo-body{ padding:20px 18px; }
.wk-demo-foot{ font-family:var(--mono); font-size:10.5px; color:var(--dim-3); padding:10px 14px;
               border-top:1px solid var(--line); background:rgba(5,8,15,.6); }
.wk-demo-foot b{ color:var(--gold-500); font-weight:500; }

@keyframes wksweep{ 0%{ transform:translateX(-140%) skewX(-14deg) } 100%{ transform:translateX(420%) skewX(-14deg) } }
@keyframes wkglow{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@keyframes wkpatrulha{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(18px,-5px) } }

/* barra de progresso genérica (usada em várias demos) */
.wk-track{ height:9px; border-radius:4px; background:rgba(255,255,255,.05); overflow:hidden; }
.wk-track i{ position:relative; display:block; height:100%; border-radius:4px;
             background:var(--selo); transition:width .6s cubic-bezier(.3,.9,.3,1); }
.wk-track i::after{
    content:""; position:absolute; inset-block:0; left:0; width:34%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
    animation:wksweep 2.8s ease-in-out infinite;
}
.wk-row{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.wk-row:last-child{ margin-bottom:0; }
.wk-row > span{ font-family:var(--mono); font-size:10.5px; color:var(--dim-3); min-width:110px; }
.wk-row .wk-track{ flex:1; }
.wk-row > b{ font-family:var(--mono); font-size:12px; font-weight:700; color:var(--gold-300); min-width:70px; text-align:right; }

/* grade de contas (várias abas ao mesmo tempo) */
.wk-grade{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.wk-grade .t{
    position:relative; border:1px solid var(--line); border-radius:7px; overflow:hidden;
    background:var(--ink-700); aspect-ratio:16/10;
    background-image:radial-gradient(circle at 32% 62%, rgba(226,181,85,.16), transparent 58%);
}
.wk-grade .t::after{
    content:""; position:absolute; left:26%; top:46%; width:5px; height:5px; border-radius:50%;
    background:var(--gold-300); animation:wkpatrulha 3.4s ease-in-out infinite;
}
.wk-grade .t em{
    position:absolute; top:5px; right:5px; width:5px; height:5px; border-radius:50%;
    background:var(--dim-3); font-style:normal;
}
.wk-grade .t.on em{ background:var(--mint); box-shadow:0 0 6px rgba(61,220,151,.9); }

/* etapas em sequência (ciclo) */
.wk-etapas{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin-bottom:18px; }
@media (max-width:600px){ .wk-etapas{ grid-template-columns:repeat(2,1fr); } }
.wk-et{ padding:11px 10px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.02); transition:all .35s ease; text-align:center; }
.wk-et .ic{ font-size:16px; display:block; opacity:.6; transition:opacity .35s ease; }
.wk-et b{ display:block; font-size:10.5px; font-weight:600; color:var(--dim-2); margin-top:5px; }
.wk-et.on{ border-color:rgba(226,181,85,.5); background:rgba(226,181,85,.08); }
.wk-et.on .ic{ opacity:1; } .wk-et.on b{ color:#fff; }

/* campo de formulário fake (digitando) */
.wk-field{ display:grid; gap:5px; margin-bottom:12px; }
.wk-field > span{ font-family:var(--mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim-3); }
.wk-field > div{
    min-height:34px; display:flex; align-items:center; padding:0 10px; border-radius:7px; font-size:12.5px;
    background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--txt-2); font-family:var(--mono);
    transition:border-color .3s ease, box-shadow .3s ease;
}
.wk-field > div.ativo{ border-color:rgba(226,181,85,.55); box-shadow:0 0 0 3px rgba(226,181,85,.08); }
.wk-field > div::after{ content:"▌"; color:var(--gold-500); opacity:0; }
.wk-field > div.ativo::after{ opacity:1; animation:wkglow 1s steps(1) infinite; }

/* chips de status (aplicado / pendente) */
.wk-chips{ display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:6px; }
.wk-chip{
    display:flex; align-items:center; gap:6px; padding:7px 9px; border-radius:8px; border:1px solid var(--line);
    background:rgba(255,255,255,.02); font-family:var(--mono); font-size:9px; color:var(--dim-3); transition:all .35s ease;
}
.wk-chip .pt{ width:5px; height:5px; border-radius:50%; background:var(--dim-3); flex:none; transition:all .3s ease; }
.wk-chip.ok{ border-color:rgba(226,181,85,.45); background:rgba(226,181,85,.09); color:var(--gold-300); }
.wk-chip.ok .pt{ background:var(--gold-500); box-shadow:0 0 6px rgba(226,181,85,.8); }

/* toggle liga/desliga */
.wk-toggle{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; color:var(--dim-2); }
.wk-sw{ width:34px; height:18px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid var(--line-hi); position:relative; flex:none; transition:all .3s ease; }
.wk-sw::after{ content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; border-radius:50%; background:var(--dim-3); transition:transform .3s ease, background .3s ease; }
.wk-toggle.on .wk-sw{ background:rgba(226,181,85,.22); border-color:rgba(226,181,85,.5); }
.wk-toggle.on .wk-sw::after{ transform:translateX(16px); background:var(--gold-300); }