/* ============================================================
IATechNerds — Tema Terminal (versão Hostinger / estática)
Paleta e variáveis (substituem o skin do Blogger)
============================================================ */
:root{
--accent: #7CFFB2;
--accent-dim: #3a8a5e;
--bg: #04140a;
--edge: #0a2a18;
}
/* ============================================================
IATechNerds Terminal Theme
============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.iatn {
background: #000;
color: var(--accent);
font: normal normal 14px 'JetBrains Mono', 'IBM Plex Mono', Menlo, monospace;
line-height: 1.65;
min-height: 100vh;
text-shadow: 0 0 6px rgba(124,255,178,0.35);
-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:hover { background: var(--accent); color: #04140a; text-shadow: none; }
img { max-width: 100%; height: auto; display: block; }
hr { border: none; border-top: 1px dashed var(--accent-dim); margin: 24px 0; }
@keyframes blink { 50% { opacity: 0; } }
.cursor {
display: inline-block; width: 8px; height: 1em; background: var(--accent);
vertical-align: text-bottom; margin-left: 4px;
animation: blink 1s steps(1) infinite;
}
/* ====== TITLE BAR ====== */
.term-titlebar {
height: 36px; display: flex; align-items: center; padding: 0 14px;
border-bottom: 1px solid var(--edge);
background: linear-gradient(180deg, #000 0%, var(--bg) 100%);
position: relative;
}
.term-lights { display: flex; gap: 8px; }
.term-lights span { width: 12px; height: 12px; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4); }
.term-lights .r { background: #ff5f57; }
.term-lights .y { background: #febc2e; }
.term-lights .g { background: #28c840; }
.term-title {
position: absolute; left: 0; right: 0; text-align: center;
font-size: 13px; color: var(--accent); letter-spacing: 0.5px;
pointer-events: none;
}
.term-title a { pointer-events: auto; text-decoration: none; color: inherit; }
.term-size {
margin-left: auto; font-size: 11px; color: var(--accent-dim);
}
/* ====== MENU BAR ====== */
.term-menu {
display: flex; align-items: center; gap: 28px; padding: 0 18px;
height: 36px; border-bottom: 1px solid var(--edge);
background: var(--bg); font-size: 13px;
}
.term-menu .item { color: var(--accent); padding-bottom: 2px; border-bottom: 1px solid transparent; text-decoration: none; }
.term-menu .item:hover { border-bottom-color: var(--accent); background: transparent; text-shadow: 0 0 8px rgba(124,255,178,0.8); }
.term-clock { font-size: 12px; color: var(--accent-dim); white-space: nowrap; }
/* language switcher in topbar */
.term-lang { margin-left: auto; display: flex; align-items: center; gap: 2px; font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; }
.term-lang .lang-label { color: var(--accent-dim); margin-right: 6px; }
.term-lang button {
background: transparent; color: var(--accent-dim);
border: 1px solid transparent; padding: 3px 8px;
font: inherit; font-size: 11px; cursor: pointer;
letter-spacing: 0.5px;
}
.term-lang button:hover { color: var(--accent); border-color: var(--accent-dim); }
.term-lang button.active { color: var(--accent); border-color: var(--accent); background: rgba(124,255,178,0.08); text-shadow: 0 0 6px rgba(124,255,178,0.5); }
.term-clock { margin-left: 16px; }
@media (max-width: 768px) {
.term-lang .lang-label { display: none; }
.term-lang button { padding: 3px 5px; font-size: 10px; }
}
/* Google Translate widget — hide all its UI; we drive it via cookie + reload */
#google_translate_element { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }
.skiptranslate, .goog-te-banner-frame, .goog-te-balloon-frame, .goog-logo-link, .goog-te-gadget-icon { display: none !important; visibility: hidden !important; }
.goog-te-gadget { font-size: 0 !important; height: 0 !important; }
.goog-te-gadget > span { display: none !important; }
body { top: 0 !important; }
.goog-text-highlight { background: transparent !important; box-shadow: none !important; }
font[style*="background-color"] { background: transparent !important; }
iframe.goog-te-menu-frame { display: none !important; }
/* post translate banner */
.iatn-translate-bar {
margin: 0 0 18px;
padding: 8px 12px;
border: 1px dashed var(--accent-dim);
background: rgba(124,255,178,0.03);
font-size: 12px;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.iatn-translate-bar .label { color: var(--accent-dim); letter-spacing: 0.5px; }
.iatn-translate-bar button {
background: transparent; color: var(--accent);
border: 1px solid var(--accent-dim); padding: 3px 10px;
font: inherit; font-size: 11px; cursor: pointer; letter-spacing: 0.3px;
}
.iatn-translate-bar button:hover { border-color: var(--accent); background: rgba(124,255,178,0.06); }
.iatn-translate-bar button.active { color: var(--accent); border-color: var(--accent); background: rgba(124,255,178,0.1); }
.iatn-translate-bar .progress { color: #febc2e; font-size: 11px; }
.iatn-translate-bar .progress.done { color: var(--accent); }
.iatn-translate-bar .progress.err { color: #ff5f57; }
/* JSON formatter */
.iatn-json-pane {
width: 100%; min-height: 200px;
padding: 12px;
background: #000; color: var(--accent);
border: 1px solid var(--edge);
font: inherit; resize: vertical; outline: none;
white-space: pre; overflow: auto;
}
.iatn-json-pane:focus { border-color: var(--accent); }
.iatn-json-tree { padding: 12px; background: #000; border: 1px solid var(--edge); min-height: 200px; font-size: 12px; line-height: 1.55; overflow: auto; max-height: 500px; }
.iatn-json-tree .key { color: #febc2e; }
.iatn-json-tree .str { color: var(--accent); }
.iatn-json-tree .num { color: #ff8c42; }
.iatn-json-tree .bool { color: #cf80ff; }
.iatn-json-tree .nul { color: var(--accent-dim); }
.iatn-json-tree .pn { color: var(--accent-dim); }
.iatn-json-tree details summary { cursor: pointer; user-select: none; color: var(--accent-dim); }
.iatn-json-tree details summary:hover { color: var(--accent); }
.iatn-json-tree details[open] summary::before { content: '\25be '; }
.iatn-json-tree details summary::before { content: '\25b8 '; }
.iatn-json-tree details summary::-webkit-details-marker { display: none; }
.iatn-json-tree .indent { padding-left: 16px; }
/* regex tester */
.iatn-regex-input { display: flex; gap: 6px; }
.iatn-regex-input .delim { color: var(--accent-dim); font-size: 22px; padding: 0 4px; line-height: 1.6; user-select: none; }
.iatn-regex-input input { flex: 1; padding: 8px; background: #000; color: var(--accent); border: 1px solid var(--edge); font: inherit; outline: none; }
.iatn-regex-input input.flags { flex: 0 0 70px; }
.iatn-regex-input input:focus { border-color: var(--accent); }
.iatn-regex-out mark { background: rgba(254,188,46,0.3); color: #febc2e; padding: 0 2px; border-radius: 2px; }
.iatn-regex-matches { max-height: 240px; overflow: auto; font-size: 12px; }
.iatn-regex-matches .row { padding: 4px 8px; border-bottom: 1px solid var(--edge); }
.iatn-regex-matches .row:hover { background: rgba(124,255,178,0.04); }
.iatn-regex-matches .row .idx { color: var(--accent-dim); margin-right: 8px; }
.iatn-regex-matches .row .val { color: var(--accent); }
.iatn-regex-matches .row .grp { color: #febc2e; font-size: 11px; margin-left: 12px; }
/* CPF/CNPJ validator */
.iatn-doc-result {
padding: 14px;
border: 1px solid var(--accent-dim);
background: rgba(0,0,0,0.4);
font-size: 14px;
line-height: 1.7;
}
.iatn-doc-result.ok { border-color: var(--accent); }
.iatn-doc-result.fail { border-color: #ff5f57; }
.iatn-doc-result .verdict { font-size: 16px; font-weight: 700; letter-spacing: 0.5px; margin-bottom: 8px; text-transform: uppercase; }
.iatn-doc-result.ok .verdict { color: var(--accent); }
.iatn-doc-result.fail .verdict { color: #ff5f57; }
/* CEP result */
.iatn-cep-result { padding: 14px; border: 1px solid var(--accent-dim); background: rgba(0,0,0,0.4); font-size: 13px; line-height: 1.7; }
.iatn-cep-result .row { display: flex; gap: 14px; }
.iatn-cep-result .row .lbl { min-width: 110px; color: var(--accent-dim); text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px; }
.iatn-cep-result .row .val { color: var(--accent); flex: 1; }
/* Color picker */
.iatn-color-grid { display: grid; grid-template-columns: 200px 1fr; gap: 18px; align-items: start; }
@media (max-width: 600px) { .iatn-color-grid { grid-template-columns: 1fr; } }
.iatn-color-preview { width: 100%; height: 200px; border: 1px solid var(--accent-dim); }
.iatn-color-fields { font-size: 12px; line-height: 1.7; }
.iatn-color-fields .row { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.iatn-color-fields .row .lbl { min-width: 60px; color: var(--accent-dim); text-transform: uppercase; font-size: 10px; }
.iatn-color-fields .row input { flex: 1; padding: 4px 8px; background: #000; color: var(--accent); border: 1px solid var(--edge); font: inherit; outline: none; }
.iatn-color-fields .row input:focus { border-color: var(--accent); }
/* QR code */
.iatn-qr-out { padding: 12px; background: #fff; display: inline-block; margin: 14px 0; }
.iatn-qr-out canvas { display: block; }
/* Hash tool grid */
.iatn-hash-grid { display: grid; gap: 6px; font-size: 12px; }
.iatn-hash-grid .row { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: center; padding: 6px 10px; border-left: 2px solid var(--accent-dim); background: rgba(124,255,178,0.02); }
.iatn-hash-grid .row .alg { color: var(--accent-dim); text-transform: uppercase; font-size: 10px; letter-spacing: 1px; }
.iatn-hash-grid .row .hash { color: var(--accent); word-break: break-all; font-size: 11px; }
/* Currency converter */
.iatn-cur-result { font-size: 28px; color: var(--accent); text-shadow: 0 0 12px rgba(124,255,178,0.4); padding: 18px; border: 1px solid var(--accent-dim); background: rgba(0,0,0,0.4); text-align: center; }
.iatn-cur-meta { font-size: 11px; color: var(--accent-dim); margin-top: 8px; text-align: center; }
/* Calculadora juros / IMC table */
.iatn-calc-output table { width: 100%; border-collapse: collapse; font-size: 12px; }
.iatn-calc-output th, .iatn-calc-output td { padding: 6px 10px; border-bottom: 1px solid var(--edge); text-align: right; }
.iatn-calc-output th { color: var(--accent-dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.iatn-calc-output td:first-child, .iatn-calc-output th:first-child { text-align: left; }
.iatn-calc-output .big { font-size: 22px; color: var(--accent); text-shadow: 0 0 10px rgba(124,255,178,0.4); }
.iatn-calc-output .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.iatn-calc-output .kpi { padding: 10px 12px; border-left: 2px solid var(--accent); background: rgba(124,255,178,0.03); }
.iatn-calc-output .kpi .lbl { font-size: 10px; color: var(--accent-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.iatn-calc-output .kpi .val { font-size: 18px; color: var(--accent); margin-top: 4px; }
/* Game generic */
.iatn-game-grid { display: grid; gap: 6px; margin: 18px auto; }
.iatn-game-grid.simon { grid-template-columns: 1fr 1fr; max-width: 360px; }
.iatn-game-grid.simon .pad {
aspect-ratio: 1; border: 2px solid; cursor: pointer;
transition: opacity 0.1s, transform 0.1s, box-shadow 0.1s;
opacity: 0.55;
}
.iatn-game-grid.simon .pad:hover { opacity: 0.8; }
.iatn-game-grid.simon .pad.lit { opacity: 1; transform: scale(0.97); box-shadow: 0 0 22px currentColor; }
.iatn-game-grid.simon .pad.p1 { background: rgba(124,255,178,0.15); border-color: #7CFFB2; color: #7CFFB2; }
.iatn-game-grid.simon .pad.p2 { background: rgba(254,188,46,0.15); border-color: #febc2e; color: #febc2e; }
.iatn-game-grid.simon .pad.p3 { background: rgba(255,140,66,0.15); border-color: #ff8c42; color: #ff8c42; }
.iatn-game-grid.simon .pad.p4 { background: rgba(207,128,255,0.15); border-color: #cf80ff; color: #cf80ff; }
.iatn-game-grid.puzzle15 { grid-template-columns: repeat(4, 1fr); max-width: 360px; }
.iatn-game-grid.puzzle15 .tile {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
background: rgba(124,255,178,0.06); border: 1px solid var(--accent-dim);
color: var(--accent); font-size: 26px; font-weight: 700; cursor: pointer;
text-shadow: 0 0 8px rgba(124,255,178,0.4);
transition: background 0.1s;
}
.iatn-game-grid.puzzle15 .tile:hover { background: rgba(124,255,178,0.18); }
.iatn-game-grid.puzzle15 .tile.empty { background: transparent; border: 1px dashed var(--edge); cursor: default; color: transparent; text-shadow: none; }
.iatn-game-grid.memory { grid-template-columns: repeat(6, 1fr); max-width: 480px; gap: 4px; }
@media (max-width: 600px) { .iatn-game-grid.memory { grid-template-columns: repeat(4, 1fr); } }
.iatn-game-grid.memory .card {
aspect-ratio: 1; cursor: pointer; perspective: 600px;
}
.iatn-game-grid.memory .card-inner {
width: 100%; height: 100%; position: relative;
transition: transform 0.35s; transform-style: preserve-3d;
}
.iatn-game-grid.memory .card.flip .card-inner { transform: rotateY(180deg); }
.iatn-game-grid.memory .face {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--accent-dim);
backface-visibility: hidden;
font-size: 22px;
}
.iatn-game-grid.memory .face.front { background: rgba(124,255,178,0.06); color: var(--accent-dim); }
.iatn-game-grid.memory .face.back { background: #000; color: var(--accent); transform: rotateY(180deg); text-shadow: 0 0 8px rgba(124,255,178,0.5); }
.iatn-game-grid.memory .card.matched .face.back { border-color: var(--accent); box-shadow: inset 0 0 10px rgba(124,255,178,0.3); }
.iatn-hangman-display { text-align: center; padding: 14px; border: 1px solid var(--edge); background: rgba(0,0,0,0.3); margin-bottom: 14px; }
.iatn-hangman-display pre { font-size: 12px; line-height: 1; color: var(--accent); margin: 0; white-space: pre; }
.iatn-hangman-word { font-size: 28px; letter-spacing: 14px; color: var(--accent); text-shadow: 0 0 10px rgba(124,255,178,0.5); text-align: center; margin: 18px 0; font-family: inherit; }
.iatn-hangman-keys { display: grid; grid-template-columns: repeat(13, 1fr); gap: 4px; max-width: 600px; margin: 0 auto; }
.iatn-hangman-keys button {
aspect-ratio: 1; background: transparent; color: var(--accent);
border: 1px solid var(--accent-dim); font: inherit; cursor: pointer;
font-size: 14px; text-transform: uppercase;
}
.iatn-hangman-keys button:hover:not(:disabled) { border-color: var(--accent); background: rgba(124,255,178,0.08); }
.iatn-hangman-keys button:disabled { opacity: 0.35; cursor: not-allowed; }
.iatn-hangman-keys button.miss { color: #ff5f57; border-color: #ff5f57; opacity: 0.5; }
.iatn-hangman-keys button.hit { color: var(--accent); border-color: var(--accent); background: rgba(124,255,178,0.12); opacity: 1 !important; }
.iatn-tictac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 280px; margin: 18px auto; }
.iatn-tictac-grid .cell {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
border: 1px solid var(--accent-dim); background: rgba(124,255,178,0.04);
font-size: 44px; cursor: pointer; color: var(--accent);
text-shadow: 0 0 10px rgba(124,255,178,0.4);
}
.iatn-tictac-grid .cell:hover:not(.filled) { background: rgba(124,255,178,0.12); }
.iatn-tictac-grid .cell.filled { cursor: default; }
.iatn-tictac-grid .cell.win { background: rgba(124,255,178,0.3); border-color: var(--accent); }
.iatn-tictac-grid .cell.x { color: #febc2e; text-shadow: 0 0 10px rgba(254,188,46,0.5); }
.iatn-status-row { display: flex; gap: 18px; flex-wrap: wrap; margin: 12px 0; font-size: 12px; }
.iatn-status-row .stat { padding: 6px 12px; border-left: 2px solid var(--accent); background: rgba(124,255,178,0.04); }
.iatn-status-row .stat .lbl { font-size: 10px; color: var(--accent-dim); text-transform: uppercase; letter-spacing: 0.5px; }
.iatn-status-row .stat .val { font-size: 16px; color: var(--accent); margin-top: 2px; text-shadow: 0 0 6px rgba(124,255,178,0.3); }
/* ====== BODY GRID ====== */
.term-body {
display: grid; grid-template-columns: minmax(0, 1fr) 320px;
background: var(--bg);
min-height: calc(100vh - 100px);
}
main.term-main { padding: 32px 40px 40px; min-width: 0; overflow: hidden; }
aside.term-sidebar {
border-left: 1px solid var(--edge); padding: 28px 22px;
display: flex; flex-direction: column; gap: 24px;
}
/* ====== MASTHEAD (homepage) ====== */
.iatn-masthead { margin-bottom: 22px; }
.iatn-masthead h1 {
font-size: clamp(36px, 6vw, 56px); line-height: 0.9; margin: 0; font-weight: 900; letter-spacing: -1px;
color: var(--accent); text-shadow: 0 0 16px rgba(124,255,178,0.6);
display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
}
.iatn-masthead h1 .dim { color: var(--accent-dim); }
.iatn-masthead h1 .cursor { width: 12px; height: 32px; margin-bottom: 4px; }
.iatn-masthead .tag {
font-size: 13px; color: var(--accent-dim); margin-top: 8px; letter-spacing: 0.5px;
}
/* ====== POSTS ====== */
.post { margin-bottom: 40px; }
.post-meta {
font-size: 12px; color: var(--accent-dim); display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.post-meta .tag { color: var(--accent); }
.post-meta a { color: var(--accent); text-decoration: none; }
.post-title {
font-size: clamp(24px, 3.6vw, 36px); line-height: 1.05; margin: 6px 0 12px;
font-weight: 800; letter-spacing: -0.3px; color: var(--accent);
text-shadow: 0 0 12px rgba(124,255,178,0.5);
}
.post-title a { color: inherit; text-decoration: none; }
.post-title a:hover { background: transparent; color: var(--accent); text-shadow: 0 0 14px rgba(124,255,178,0.9); }
/* Single-post body */
.post-body { font-size: 15px; line-height: 1.75; color: var(--accent); opacity: 0.95; }
.post-body p { margin: 0 0 18px; }
.post-body h2, .post-body h3, .post-body h4 {
font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
color: var(--accent); margin: 32px 0 14px;
}
.post-body h2 { font-size: 20px; }
.post-body h2::before { content: '## '; color: var(--accent-dim); font-weight: 400; }
.post-body h3 { font-size: 17px; }
.post-body h3::before { content: '### '; color: var(--accent-dim); font-weight: 400; }
.post-body h4 { font-size: 15px; }
.post-body h4::before { content: '#### '; color: var(--accent-dim); font-weight: 400; }
.post-body strong, .post-body b { color: var(--accent); font-weight: 700; text-shadow: 0 0 8px rgba(124,255,178,0.7); }
.post-body em, .post-body i { font-style: italic; color: var(--accent); opacity: 0.9; }
.post-body blockquote {
margin: 22px 0; padding: 12px 18px;
border-left: 2px solid var(--accent);
background: rgba(124,255,178,0.04);
color: var(--accent); opacity: 0.9; font-style: italic;
}
.post-body code, .post-body pre {
font-family: 'JetBrains Mono', monospace;
background: #000; color: var(--accent);
border: 1px solid var(--edge);
}
.post-body code { padding: 1px 6px; font-size: 0.9em; }
.post-body pre { padding: 14px 18px; overflow-x: auto; margin: 18px 0; font-size: 13px; line-height: 1.6; }
.post-body ul, .post-body ol { padding-left: 24px; margin: 0 0 18px; }
.post-body li { margin-bottom: 6px; }
.post-body a { color: var(--accent); text-decoration: underline; }
.post-body img { border: 1px solid var(--edge); margin: 18px 0; max-width: 100%; }
/* Snippet on feed */
.post-snippet { font-size: 14px; line-height: 1.7; color: var(--accent); opacity: 0.78; margin-bottom: 12px; }
.post-read {
display: inline-block;
margin-top: 14px;
border: 1px solid var(--accent);
padding: 8px 18px;
font-size: 12px;
color: var(--accent);
font-weight: 700;
text-decoration: none;
letter-spacing: 0.5px;
box-shadow: 0 0 0 transparent;
transition: background 0.12s, color 0.12s, box-shadow 0.18s;
}
.post-read:hover {
background: var(--accent);
color: #04140a;
text-shadow: none;
box-shadow: 0 0 18px rgba(124,255,178,0.45);
}
/* Footer of post */
.post-footer { margin-top: 24px; padding-top: 16px; border-top: 1px dashed var(--accent-dim); font-size: 12px; color: var(--accent-dim); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.post-footer .labels a { color: var(--accent); margin-right: 6px; text-decoration: none; }
.post-footer .labels a:hover { text-shadow: 0 0 8px rgba(124,255,178,0.8); }
/* Separator between posts in feed */
.post + .post { border-top: 1px solid var(--edge); padding-top: 32px; }
/* Tag chips row (homepage feed) */
.post-tags {
margin: 14px 0 6px;
display: flex; gap: 6px; flex-wrap: wrap;
font-size: 11px;
line-height: 1;
}
.post-tags a {
color: var(--accent);
text-decoration: none;
padding: 3px 9px;
border: 1px solid var(--edge);
letter-spacing: 0.3px;
background: rgba(124,255,178,0.03);
transition: border-color 0.1s, background 0.1s;
}
.post-tags a:hover {
border-color: var(--accent);
background: rgba(124,255,178,0.1);
text-shadow: 0 0 6px rgba(124,255,178,0.7);
}
/* Snippet hard cap so it never bleeds full post content into feed */
.post-snippet {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 7.2em;
}
.post-snippet img, .post-snippet iframe, .post-snippet video, .post-snippet figure { display: none !important; }
.post-snippet h1, .post-snippet h2, .post-snippet h3, .post-snippet h4,
.post-snippet h5, .post-snippet h6 { font-size: inherit !important; font-weight: inherit !important; margin: 0 !important; display: inline !important; text-shadow: none !important; }
.post-snippet ul, .post-snippet ol { display: none !important; }
.post-snippet br { display: none; }
.post-snippet p { margin: 0 !important; display: inline; }
.post-snippet p + p::before { content: ' '; }
/* Empty state (no posts found) */
.iatn-empty-state {
border: 1px dashed var(--accent-dim);
padding: 28px 24px;
margin: 16px 0;
text-align: left;
}
.iatn-empty-state .iatn-empty-cmd {
font-size: 12px; color: var(--accent-dim); letter-spacing: 1px;
margin-bottom: 10px;
}
.iatn-empty-state .iatn-empty-msg {
font-size: 18px; color: var(--accent); font-weight: 700;
margin-bottom: 8px; letter-spacing: -0.2px;
}
.iatn-empty-state .iatn-empty-hint {
font-size: 13px; color: var(--accent); opacity: 0.7;
line-height: 1.6; margin-bottom: 16px;
}
.iatn-empty-state .iatn-empty-back {
display: inline-block; padding: 6px 14px;
border: 1px solid var(--accent); color: var(--accent);
text-decoration: none; font-size: 12px; font-weight: 700;
}
.iatn-empty-state .iatn-empty-back:hover {
background: var(--accent); color: #04140a; text-shadow: none;
}
/* ====== PAGINATION ====== */
.iatn-pager {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 18px 0; border-top: 1px dashed var(--accent-dim); margin-top: 24px;
font-size: 13px;
}
.iatn-pager a { color: var(--accent); text-decoration: none; padding: 4px 10px; border: 1px solid var(--accent-dim); }
.iatn-pager a:hover { background: var(--accent); color: #04140a; }
.iatn-pager .info { color: var(--accent-dim); }
/* ====== SIDEBAR widgets ====== */
.widget { font-size: 13px; }
.widget .widget-title, .widget h2, .widget h3 {
font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
color: var(--accent-dim); margin: 0 0 10px; font-weight: 400;
}
/* Subscribe widget */
.iatn-subscribe .cmd { color: var(--accent-dim); margin-bottom: 4px; font-size: 13px; }
.iatn-subscribe .desc { color: var(--accent-dim); padding-left: 12px; margin-bottom: 10px; line-height: 1.55; font-size: 12px; }
.iatn-subscribe form { display: flex; margin-top: 8px; }
.iatn-subscribe input[type="email"] {
flex: 1; border: 1px solid var(--accent-dim); border-right: none;
background: transparent; color: var(--accent); padding: 8px 10px;
font-family: inherit; font-size: 13px; outline: none; min-width: 0;
}
.iatn-subscribe input::placeholder { color: var(--accent-dim); }
.iatn-subscribe input:focus { border-color: var(--accent); }
.iatn-subscribe button {
border: 1px solid var(--accent); background: var(--accent); color: #000;
font-family: inherit; padding: 8px 14px; font-weight: 700;
letter-spacing: 0.5px; cursor: pointer; font-size: 13px;
}
.iatn-subscribe button:hover { background: #fff; }
/* Sponsor box */
.iatn-sponsor {
border: 1px dashed var(--accent-dim); padding: 18px 18px 16px; position: relative;
}
.iatn-sponsor .label { position: absolute; top: -9px; left: 14px; padding: 0 8px; background: var(--bg); color: var(--accent-dim); font-size: 11px; letter-spacing: 0.5px; }
.iatn-sponsor .row { display: flex; gap: 14px; align-items: flex-start; }
.iatn-sponsor .logo { width: 56px; height: 56px; flex-shrink: 0; border: 1px solid var(--accent-dim); display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--accent); }
.iatn-sponsor .brand { color: var(--accent); font-weight: 700; letter-spacing: 0.5px; font-size: 13px; }
.iatn-sponsor .stag { color: var(--accent-dim); margin-bottom: 6px; font-size: 12px; }
.iatn-sponsor .copy { color: var(--accent); opacity: 0.9; font-size: 12px; line-height: 1.55; margin-bottom: 10px; }
.iatn-sponsor a.cta { color: var(--accent); text-decoration: underline; font-size: 12px; }
/* Premium upgrade box */
.iatn-premium {
border: 1px solid var(--accent); padding: 14px;
background: rgba(124,255,178,0.06);
}
.iatn-premium .cmd { font-size: 11px; color: var(--accent-dim); letter-spacing: 1px; margin-bottom: 6px; }
.iatn-premium .title { font-size: 14px; color: var(--accent); font-weight: 700; margin-bottom: 4px; }
.iatn-premium .desc { font-size: 12px; color: var(--accent); opacity: 0.75; line-height: 1.55; margin-bottom: 10px; }
.iatn-premium .cta { display: inline-block; border: 1px solid var(--accent); padding: 6px 12px; font-size: 12px; color: var(--accent); font-weight: 700; text-decoration: none; }
.iatn-premium .cta:hover { background: var(--accent); color: #04140a; text-shadow: none; }
/* Arquivo widget restyle (BlogArchive) */
.BlogArchive ul { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.BlogArchive li { padding: 4px 0; border-bottom: 1px solid var(--edge); display: flex; gap: 8px; }
.BlogArchive a { color: var(--accent); text-decoration: none; flex: 1; }
.BlogArchive a:hover { text-shadow: 0 0 8px rgba(124,255,178,0.9); background: transparent; }
.BlogArchive .post-count { color: var(--accent-dim); }
.BlogArchive select { background: var(--bg); color: var(--accent); border: 1px solid var(--accent-dim); padding: 6px 8px; font-family: inherit; font-size: 12px; width: 100%; }
/* Comments */
#comments {
margin-top: 40px; padding-top: 24px; border-top: 1px dashed var(--accent-dim);
}
#comments h4 { font-size: 14px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 18px; }
#comments h4::before { content: '$ comments --thread '; color: var(--accent-dim); font-weight: 400; }
.comment-block, .comment { padding: 12px 14px; border-left: 2px solid var(--accent-dim); margin-bottom: 14px; background: rgba(124,255,178,0.03); }
.comment-header, .user, .datetime, .comment-author { font-size: 12px; color: var(--accent-dim); }
.comment-content, .comment-body { font-size: 13px; color: var(--accent); opacity: 0.92; }
.comment-form input, .comment-form textarea { background: var(--bg); color: var(--accent); border: 1px solid var(--accent-dim); font-family: inherit; padding: 8px 10px; width: 100%; }
/* Defensive native comments block (when comment_picker is not used) */
.iatn-comments-block {
margin-top: 36px;
padding: 22px 0 8px;
border-top: 1px dashed var(--accent-dim);
}
.iatn-comments-block h4 {
font-size: 14px; color: var(--accent); margin: 0 0 8px;
text-transform: uppercase; letter-spacing: 1px;
}
.iatn-comments-block h4::before { content: ''; }
.iatn-comments-hint {
color: var(--accent-dim); font-size: 12px; margin: 0 0 16px;
letter-spacing: 0.3px;
}
/* ====== STATUS BAR ====== */
.term-statusbar {
height: 32px; display: flex; align-items: center; padding: 0 18px;
border-top: 1px solid var(--edge);
background: linear-gradient(180deg, var(--bg) 0%, #000 100%);
font-size: 12px; color: var(--accent);
}
.term-statusbar .left { color: var(--accent-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-statusbar .right { margin-left: auto; display: flex; gap: 16px; }
.term-statusbar .right a, .term-statusbar .right span { color: var(--accent); text-decoration: none; }
.term-statusbar .right a:hover { background: transparent; color: var(--accent); text-shadow: 0 0 8px rgba(124,255,178,0.9); }
.term-statusbar .bk { color: var(--accent-dim); }
/* ====== ASCII helpers ====== */
.iatn-recommend {
margin: 22px 0; border-left: 2px solid var(--accent);
padding: 10px 14px; background: linear-gradient(90deg, rgba(124,255,178,0.05), transparent 60%);
}
.iatn-recommend .label { font-size: 11px; color: var(--accent-dim); letter-spacing: 1px; margin-bottom: 4px; }
.iatn-recommend .title { color: var(--accent); font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.iatn-recommend .body { color: var(--accent); opacity: 0.78; font-size: 13px; margin-bottom: 6px; }
.iatn-recommend a { color: var(--accent); text-decoration: underline; }
/* ====== MOBILE ====== */
@media (max-width: 880px) {
.term-body { grid-template-columns: 1fr; }
aside.term-sidebar { border-left: none; border-top: 1px solid var(--edge); }
.term-menu { gap: 16px; overflow-x: auto; padding: 0 12px; }
main.term-main { padding: 22px 18px 28px; }
.term-title { font-size: 11px; }
.term-size { display: none; }
.iatn-masthead h1 { font-size: 36px; }
}
@media (max-width: 480px) {
.term-clock { display: none; }
.term-statusbar .right { gap: 10px; font-size: 11px; }
}
/* ====== BLOGGER UI cleanup ====== */
.navbar, #navbar-iframe { display: none !important; height: 0 !important; }
/* ====== POST BODY READABILITY OVERRIDE ======
The Blogger editor frequently injects inline styles like
color:#000 or background:#fff into post content, which would
make text invisible on the dark terminal background.
These rules force every text element inside .post-body to be
readable in the phosphor palette, regardless of inline styles. */
.post-body,
.post-body p, .post-body div, .post-body span,
.post-body li, .post-body ul, .post-body ol,
.post-body td, .post-body th, .post-body table, .post-body tbody, .post-body tr,
.post-body font, .post-body small, .post-body sub, .post-body sup,
.post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6,
.post-body em, .post-body i, .post-body u {
color: var(--accent) !important;
background-color: transparent !important;
}
.post-body strong, .post-body b {
color: #fff !important;
background-color: transparent !important;
text-shadow: 0 0 8px rgba(124,255,178,0.7);
}
.post-body a, .post-body a * {
color: var(--accent) !important;
text-decoration: underline !important;
background-color: transparent !important;
}
.post-body a:hover {
text-shadow: 0 0 8px rgba(124,255,178,0.9);
}
.post-body code, .post-body pre, .post-body pre * {
background: #000 !important;
color: var(--accent) !important;
border: 1px solid var(--edge);
}
.post-body img, .post-body iframe, .post-body video {
border: 1px solid var(--edge);
max-width: 100%;
height: auto;
}
.post-body blockquote, .post-body blockquote * {
color: var(--accent) !important;
background: rgba(124,255,178,0.04) !important;
}
/* ====== CUSTOM VIEWS (games, archive, help) ====== */
main.term-main{ min-height:100vh; }
.iatn-app-loading {
padding: 60px 0;
color: var(--accent-dim);
font-size: 14px;
}
.iatn-app-loading::after {
content: '_';
animation: blink 1s steps(1) infinite;
margin-left: 4px;
}
.iatn-view-header {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 24px;
padding-bottom: 10px;
border-bottom: 1px dashed var(--accent-dim);
flex-wrap: wrap;
gap: 12px;
}
.iatn-view-header .left {
font-size: 12px;
letter-spacing: 1px;
color: var(--accent-dim);
text-transform: uppercase;
}
.iatn-view-header .right {
font-size: 11px;
color: var(--accent-dim);
letter-spacing: 0.5px;
}
/* botão de voltar "[esc] ..." como pílula moderna (glow suave, texto sempre legível) */
.iatn-view-header .right a {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
border: 1px solid var(--accent-dim);
background: rgba(124,255,178,0.04);
color: var(--accent) !important;
text-decoration: none !important;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.3px;
line-height: 1;
transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.iatn-view-header .right a:hover {
background: rgba(124,255,178,0.10);
border-color: var(--accent);
/* glow discreto e desfocado: realça a borda sem lavar o texto */
box-shadow: 0 0 12px rgba(124,255,178,0.30);
transform: translateY(-1px);
}
/* no tema claro, o accent é escuro: glow mais sutil para não sumir no fundo branco */
[data-theme="claro"] .iatn-view-header .right a {
background: rgba(15,110,86,0.05);
}
[data-theme="claro"] .iatn-view-header .right a:hover {
box-shadow: 0 0 10px rgba(15,110,86,0.22);
}
.iatn-view-header h1 {
flex: 1 1 100%;
margin: 6px 0 0;
font-size: clamp(28px, 4vw, 40px);
font-weight: 900;
color: var(--accent);
letter-spacing: -0.5px;
text-shadow: 0 0 14px rgba(124,255,178,0.5);
}
.iatn-view-header h1 .prompt { color: var(--accent-dim); font-weight: 400; }
.iatn-view-section { margin-bottom: 32px; }
.iatn-view-section .section-label {
font-size: 11px;
letter-spacing: 1px;
color: var(--accent-dim);
text-transform: uppercase;
margin-bottom: 10px;
}
/* Jogos selector list */
.iatn-games-list { list-style: none; padding: 0; margin: 0; }
.iatn-games-list li { margin: 0; padding: 0; }
.iatn-games-list a {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 14px;
border-left: 2px solid var(--accent-dim);
color: var(--accent);
text-decoration: none;
margin-bottom: 6px;
background: rgba(124,255,178,0.02);
transition: background 0.1s, border-color 0.1s;
}
.iatn-games-list a:hover {
background: rgba(124,255,178,0.1);
border-left-color: var(--accent);
text-shadow: 0 0 8px rgba(124,255,178,0.8);
color: var(--accent);
}
.iatn-games-list .cmd { font-weight: 700; letter-spacing: 0.5px; font-size: 15px; }
.iatn-games-list .meta { color: var(--accent-dim); font-size: 12px; }
/* Arquivo view */
.iatn-archive-grid {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
}
@media (min-width: 720px) {
.iatn-archive-grid { grid-template-columns: 1fr 1fr; }
}
.iatn-archive-col h3 {
font-size: 11px; color: var(--accent-dim); letter-spacing: 1px;
text-transform: uppercase; margin: 0 0 12px;
}
.iatn-archive-list { list-style: none; padding: 0; margin: 0; font-size: 13px; }
.iatn-archive-list li {
display: flex; justify-content: space-between;
padding: 5px 0;
border-bottom: 1px solid var(--edge);
}
.iatn-archive-list a { color: var(--accent); text-decoration: none; }
.iatn-archive-list a:hover { text-shadow: 0 0 8px rgba(124,255,178,0.9); background: transparent; }
.iatn-archive-list a.active { color: #fff; text-shadow: 0 0 10px var(--accent); font-weight: 700; }
.iatn-archive-list .count { color: var(--accent-dim); font-variant-numeric: tabular-nums; }
.iatn-archive-stats {
margin-top: 22px; padding-top: 18px;
border-top: 1px dashed var(--accent-dim);
font-size: 12px; color: var(--accent-dim);
display: flex; gap: 20px; flex-wrap: wrap;
}
.iatn-archive-stats strong { color: var(--accent); font-weight: 700; }
/* Ajuda view */
.iatn-help-shortcuts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; align-items: baseline; }
.iatn-help-shortcuts .kbd {
display: inline-block;
border: 1px solid var(--accent);
background: rgba(124,255,178,0.08);
color: var(--accent);
padding: 1px 8px;
min-width: 22px;
text-align: center;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.5px;
}
.iatn-help-shortcuts .desc { color: var(--accent); opacity: 0.85; font-size: 13px; }
/* ====== GAMES (snake, pong, 2048) ====== */
.iatn-game { text-align: center; padding: 12px 0; }
.iatn-game-grid {
font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
font-size: 18px;
line-height: 1;
letter-spacing: 1px;
color: var(--accent);
margin: 18px auto 14px;
display: inline-block;
text-align: left;
white-space: pre;
text-shadow: 0 0 4px rgba(124,255,178,0.6);
}
.iatn-game-state {
font-size: 14px;
letter-spacing: 0.5px;
margin-top: 6px;
color: var(--accent);
}
.iatn-game-state.alert {
color: #fff;
text-shadow: 0 0 12px rgba(124,255,178,0.95);
animation: blink 0.9s steps(2) infinite;
}
.iatn-game-state.dim { color: var(--accent-dim); }
.iatn-game-score {
display: flex; justify-content: center; gap: 28px;
font-size: 13px; color: var(--accent-dim); letter-spacing: 1px;
margin-bottom: 14px;
}
.iatn-game-score strong { color: var(--accent); font-weight: 700; }
/* 2048 grid */
.iatn-2048 {
display: inline-block;
border: 1px solid var(--accent-dim);
padding: 8px;
margin: 12px auto;
background: rgba(124,255,178,0.02);
}
.iatn-2048 .row { display: flex; gap: 6px; margin-bottom: 6px; }
.iatn-2048 .row:last-child { margin-bottom: 0; }
.iatn-2048 .cell {
width: 68px; height: 68px;
display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace;
font-size: 22px;
font-weight: 700;
border: 1px solid var(--edge);
color: var(--accent);
}
.iatn-2048 .cell.empty { color: var(--accent-dim); opacity: 0.3; }
.iatn-2048 .cell.empty::before { content: '·'; font-size: 14px; }
.iatn-2048 .cell.t-2 { color: var(--accent); }
.iatn-2048 .cell.t-4 { color: var(--accent); }
.iatn-2048 .cell.t-8, .iatn-2048 .cell.t-16 { color: var(--accent); text-shadow: 0 0 5px rgba(124,255,178,0.7); }
.iatn-2048 .cell.t-32, .iatn-2048 .cell.t-64 { color: var(--accent); text-shadow: 0 0 8px rgba(124,255,178,0.9); border-color: var(--accent-dim); }
.iatn-2048 .cell.t-128, .iatn-2048 .cell.t-256 { color: #b8ffd1; text-shadow: 0 0 10px rgba(124,255,178,1); border-color: var(--accent); font-size: 20px; }
.iatn-2048 .cell.t-512, .iatn-2048 .cell.t-1024 { color: #fff; text-shadow: 0 0 12px var(--accent), 0 0 24px rgba(124,255,178,0.6); border-color: var(--accent); background: rgba(124,255,178,0.08); font-size: 18px; }
.iatn-2048 .cell.t-2048 { color: #fff; text-shadow: 0 0 16px #fff, 0 0 32px var(--accent); border-color: var(--accent); background: rgba(124,255,178,0.18); font-size: 17px; animation: blink 0.8s steps(2) infinite; }
.iatn-2048 .cell.t-4096, .iatn-2048 .cell.t-8192 { color: #fff; background: rgba(255,255,255,0.2); font-size: 15px; animation: blink 0.6s steps(2) infinite; }
@media (max-width: 600px) {
.iatn-game-grid { font-size: 13px; }
.iatn-2048 .cell { width: 50px; height: 50px; font-size: 16px; }
.iatn-2048 .cell.t-128, .iatn-2048 .cell.t-256 { font-size: 14px; }
.iatn-2048 .cell.t-512, .iatn-2048 .cell.t-1024 { font-size: 12px; }
.iatn-2048 .cell.t-2048 { font-size: 11px; }
}
/* ============ GAMES BANNER (homepage top) ============ */
.iatn-games-banner {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
margin-bottom: 22px;
border: 1px solid var(--accent-dim);
background: linear-gradient(90deg, rgba(124,255,178,0.05), transparent 70%);
font-size: 12px;
flex-wrap: wrap;
}
.iatn-games-banner .label {
color: var(--accent-dim);
letter-spacing: 1px;
text-transform: uppercase;
font-size: 11px;
}
.iatn-games-banner .games-quick {
display: flex;
gap: 8px;
flex-wrap: wrap;
flex: 1;
}
.iatn-games-banner .games-quick a {
display: inline-block;
padding: 3px 10px;
border: 1px solid var(--accent-dim);
color: var(--accent);
text-decoration: none;
font-size: 12px;
letter-spacing: 0.3px;
}
.iatn-games-banner .games-quick a:hover {
background: var(--accent);
color: #04140a;
border-color: var(--accent);
text-shadow: none;
}
.iatn-games-banner .arcade-link {
margin-left: auto;
color: var(--accent-dim);
text-decoration: none;
font-size: 11px;
letter-spacing: 0.5px;
}
.iatn-games-banner .arcade-link:hover { color: var(--accent); background: transparent; text-shadow: 0 0 8px rgba(124,255,178,0.7); }
/* ============ TOOLS BANNER (mirrors arcade banner) ============ */
.iatn-tools-banner {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 14px;
margin: 0 0 28px;
border: 1px solid var(--edge);
background: rgba(124,255,178,0.03);
flex-wrap: wrap;
}
.iatn-tools-banner .label {
color: var(--accent-dim);
letter-spacing: 1px;
text-transform: uppercase;
font-size: 11px;
}
.iatn-tools-banner .tools-quick {
display: flex;
gap: 8px;
flex-wrap: wrap;
flex: 1;
}
.iatn-tools-banner .tools-quick a {
display: inline-block;
padding: 3px 10px;
border: 1px solid var(--accent-dim);
color: var(--accent);
text-decoration: none;
font-size: 12px;
letter-spacing: 0.3px;
}
.iatn-tools-banner .tools-quick a:hover {
background: var(--accent);
color: #04140a;
border-color: var(--accent);
text-shadow: none;
}
.iatn-tools-banner .tools-link {
margin-left: auto;
color: var(--accent-dim);
text-decoration: none;
font-size: 11px;
letter-spacing: 0.5px;
}
.iatn-tools-banner .tools-link:hover { color: var(--accent); background: transparent; text-shadow: 0 0 8px rgba(124,255,178,0.7); }
/* ============ TOOL FORM (shared by all tools) ============ */
.iatn-tool-form { margin-bottom: 24px; }
.qx-export { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px dashed var(--accent-dim, #2a6e47); }
.qx-export .qx-lbl { font-size:12px; color:var(--text-dim, #3a8a5e); font-family:"JetBrains Mono",monospace; }
.qx-export .qx-status { font-size:12px; font-family:"JetBrains Mono",monospace; }
.qx-help { background:rgba(124,255,178,.04); border:1px solid var(--accent-dim,#2a6e47); border-radius:12px; padding:16px 18px; margin-bottom:20px; }
.qx-help summary { cursor:pointer; color:var(--accent,#7CFFB2); font-weight:600; font-size:13px; list-style:none; }
.qx-help summary::-webkit-details-marker { display:none; }
.qx-help summary::before { content:'▸ '; }
.qx-help[open] summary::before { content:'▾ '; }
.qx-help-body { margin-top:12px; font-size:13px; line-height:1.7; color:var(--text-dim,#8aa); }
.qx-help-body h4 { color:var(--accent,#7CFFB2); font-size:12px; text-transform:uppercase; letter-spacing:1px; margin:14px 0 6px; }
.qx-help-body ol, .qx-help-body ul { margin:6px 0 6px 18px; padding:0; }
.qx-help-body li { margin:4px 0; }
.iatn-tool-form .field { margin-bottom: 14px; }
.iatn-tool-form label {
display: block;
font-size: 11px;
letter-spacing: 1px;
color: var(--accent-dim);
text-transform: uppercase;
margin-bottom: 6px;
}
.iatn-tool-form input[type="text"],
.iatn-tool-form input[type="url"],
.iatn-tool-form select {
width: 100%;
padding: 10px 12px;
background: #000;
color: var(--accent);
border: 1px solid var(--accent-dim);
font: inherit;
letter-spacing: 0.3px;
outline: none;
text-shadow: 0 0 6px rgba(124,255,178,0.35);
}
.iatn-tool-form input:focus,
.iatn-tool-form select:focus {
border-color: var(--accent);
box-shadow: 0 0 0 1px var(--accent), 0 0 12px rgba(124,255,178,0.25);
}
.iatn-tool-form select { appearance: none; cursor: pointer; }
.iatn-tool-form .row { display: flex; gap: 10px; flex-wrap: wrap; }
.iatn-tool-form .row .field { flex: 1 1 200px; }
.iatn-btn {
display: inline-block;
padding: 10px 18px;
background: transparent;
color: var(--accent);
border: 1px solid var(--accent);
font: inherit;
letter-spacing: 0.5px;
cursor: pointer;
text-decoration: none;
text-transform: uppercase;
font-size: 12px;
transition: background 0.1s, color 0.1s;
}
.iatn-btn:hover { background: var(--accent); color: #04140a; text-shadow: none; }
.iatn-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.iatn-btn.secondary { border-color: var(--accent-dim); color: var(--accent-dim); }
.iatn-btn.secondary:hover { background: var(--accent-dim); color: #04140a; }
.iatn-btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
/* ============ TOOL OUTPUT / LOG ============ */
.iatn-tool-output {
margin-top: 18px;
padding: 12px 14px;
border: 1px dashed var(--accent-dim);
background: rgba(124,255,178,0.02);
font-size: 13px;
white-space: pre-wrap;
word-break: break-word;
min-height: 40px;
}
.iatn-tool-output .ok { color: var(--accent); }
.iatn-tool-output .warn { color: #febc2e; }
.iatn-tool-output .err { color: #ff5f57; }
.iatn-tool-output .dim { color: var(--accent-dim); }
/* ============ SPEED TEST GRID ============ */
.iatn-speed-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 12px;
margin-bottom: 18px;
}
.iatn-speed-card {
padding: 14px;
border: 1px solid var(--edge);
background: rgba(124,255,178,0.02);
}
.iatn-speed-card .k {
font-size: 10px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--accent-dim);
margin-bottom: 6px;
}
.iatn-speed-card .v {
font-size: 22px;
font-weight: 700;
color: var(--accent);
text-shadow: 0 0 12px rgba(124,255,178,0.5);
letter-spacing: -0.5px;
}
.iatn-speed-card .u {
font-size: 11px;
color: var(--accent-dim);
margin-left: 4px;
font-weight: 400;
}
.iatn-speed-bar {
margin-top: 10px;
height: 6px;
background: rgba(124,255,178,0.08);
border: 1px solid var(--edge);
position: relative;
overflow: hidden;
}
.iatn-speed-bar .fill {
position: absolute; left: 0; top: 0; bottom: 0;
background: var(--accent);
width: 0%;
transition: width 0.2s linear;
box-shadow: 0 0 10px rgba(124,255,178,0.6);
}
.iatn-speed-stage {
font-size: 12px;
color: var(--accent-dim);
letter-spacing: 0.5px;
margin-top: 4px;
}
/* ============ TOOLS INDEX LIST (reuses games-list) ============ */
.iatn-tools-list { list-style: none; padding: 0; margin: 0; }
.iatn-tools-list li { margin: 0; padding: 0; }
.iatn-tools-list a {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 10px 14px;
border-left: 2px solid var(--accent-dim);
color: var(--accent);
text-decoration: none;
margin-bottom: 6px;
background: rgba(124,255,178,0.02);
transition: background 0.1s, border-color 0.1s;
}
.iatn-tools-list a:hover {
background: rgba(124,255,178,0.1);
border-left-color: var(--accent);
text-shadow: 0 0 8px rgba(124,255,178,0.8);
}
.iatn-tools-list .cmd { font-weight: 500; }
.iatn-tools-list .meta { color: var(--accent-dim); font-size: 11px; letter-spacing: 0.5px; }
.iatn-notice {
margin-bottom: 18px;
padding: 10px 14px;
border-left: 2px solid #febc2e;
background: rgba(254,188,46,0.05);
font-size: 12px;
color: #febc2e;
letter-spacing: 0.3px;
}
/* ============ PASSWORD GENERATOR ============ */
.iatn-pw-output {
display: flex; align-items: center; gap: 10px;
padding: 14px;
border: 1px solid var(--accent);
background: #000;
margin-bottom: 14px;
word-break: break-all;
}
.iatn-pw-output .pw {
flex: 1;
font-size: 18px;
letter-spacing: 1px;
color: var(--accent);
text-shadow: 0 0 10px rgba(124,255,178,0.6);
}
.iatn-pw-meter {
height: 6px; margin-bottom: 14px;
background: rgba(124,255,178,0.06);
border: 1px solid var(--edge);
position: relative; overflow: hidden;
}
.iatn-pw-meter .bar {
position: absolute; top:0; bottom:0; left:0;
transition: width 0.2s linear, background 0.2s;
}
.iatn-pw-meter .bar.s0 { background: #ff5f57; width: 15%; }
.iatn-pw-meter .bar.s1 { background: #ff8c42; width: 35%; }
.iatn-pw-meter .bar.s2 { background: #febc2e; width: 55%; }
.iatn-pw-meter .bar.s3 { background: #7CFFB2; width: 80%; }
.iatn-pw-meter .bar.s4 { background: #7CFFB2; width: 100%; box-shadow: 0 0 10px rgba(124,255,178,0.7); }
.iatn-pw-strength { font-size: 11px; color: var(--accent-dim); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px; }
.iatn-pw-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin-bottom: 14px; }
.iatn-pw-options label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--accent); cursor: pointer; padding: 8px 10px; border: 1px solid var(--edge); background: rgba(124,255,178,0.02); }
.iatn-pw-options label:hover { border-color: var(--accent-dim); }
.iatn-pw-options input[type="checkbox"] { accent-color: var(--accent); }
.iatn-range-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.iatn-range-row label { font-size: 12px; color: var(--accent-dim); text-transform: uppercase; letter-spacing: 1px; min-width: 80px; }
.iatn-range-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.iatn-range-row .val { font-size: 16px; color: var(--accent); font-weight: 700; min-width: 32px; text-align: right; }
/* ============ MOCK DATA ============ */
.iatn-mock-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px; margin-bottom: 12px; }
.iatn-mock-fields label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--accent); cursor: pointer; padding: 6px 10px; border: 1px solid var(--edge); background: rgba(124,255,178,0.02); }
.iatn-mock-fields label:hover { border-color: var(--accent-dim); }
.iatn-mock-fields input[type="checkbox"] { accent-color: var(--accent); }
.iatn-mock-preview { overflow-x: auto; border: 1px solid var(--edge); background: rgba(0,0,0,0.4); margin-top: 12px; }
.iatn-mock-preview table { width: 100%; border-collapse: collapse; font-size: 12px; }
.iatn-mock-preview th, .iatn-mock-preview td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--edge); white-space: nowrap; }
.iatn-mock-preview th { color: var(--accent-dim); text-transform: uppercase; letter-spacing: 1px; font-size: 10px; background: rgba(124,255,178,0.03); }
.iatn-mock-preview td { color: var(--accent); }
.iatn-mock-preview tr:hover td { background: rgba(124,255,178,0.04); }
/* ============ IP / PORT CHECKER ============ */
.iatn-port-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; margin-top: 12px; }
.iatn-port-item {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 12px;
border-left: 2px solid var(--accent-dim);
background: rgba(124,255,178,0.02);
font-size: 12px;
}
.iatn-port-item .badge { font-size: 10px; padding: 2px 8px; border: 1px solid currentColor; letter-spacing: 1px; text-transform: uppercase; }
.iatn-port-item.ok { border-left-color: var(--accent); }
.iatn-port-item.ok .badge { color: var(--accent); }
.iatn-port-item.fail { border-left-color: #ff5f57; }
.iatn-port-item.fail .badge { color: #ff5f57; }
.iatn-port-item.pend { border-left-color: #febc2e; }
.iatn-port-item.pend .badge { color: #febc2e; }
.iatn-port-item.unk { border-left-color: var(--accent-dim); }
.iatn-port-item.unk .badge { color: var(--accent-dim); }
.iatn-preset-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.iatn-preset-row button { font-size: 10px; padding: 4px 10px; border: 1px solid var(--accent-dim); background: transparent; color: var(--accent-dim); cursor: pointer; letter-spacing: 0.5px; text-transform: uppercase; }
.iatn-preset-row button:hover { color: var(--accent); border-color: var(--accent); }
/* ============ MARKDOWN EDITOR ============ */
.iatn-md-toolbar {
display: flex; gap: 4px; flex-wrap: wrap;
padding: 6px;
border: 1px solid var(--edge);
border-bottom: none;
background: rgba(124,255,178,0.03);
}
.iatn-md-toolbar button {
padding: 4px 10px;
background: transparent;
color: var(--accent-dim);
border: 1px solid transparent;
cursor: pointer;
font: inherit; font-size: 12px;
min-width: 28px;
}
.iatn-md-toolbar button:hover { color: var(--accent); border-color: var(--accent-dim); }
.iatn-md-toolbar .sep { width: 1px; background: var(--edge); margin: 0 4px; }
.iatn-md-split {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid var(--edge);
min-height: 480px;
}
.iatn-md-pane { min-height: 480px; overflow: auto; }
.iatn-md-pane.editor textarea {
width: 100%; min-height: 480px;
padding: 14px;
background: #000;
color: var(--accent);
border: none;
border-right: 1px solid var(--edge);
font: inherit;
text-shadow: 0 0 5px rgba(124,255,178,0.3);
resize: vertical;
outline: none;
}
.iatn-md-pane.preview { padding: 14px; background: rgba(124,255,178,0.02); }
.iatn-md-pane.preview h1, .iatn-md-pane.preview h2, .iatn-md-pane.preview h3,
.iatn-md-pane.preview h4, .iatn-md-pane.preview h5, .iatn-md-pane.preview h6 {
color: var(--accent); margin: 18px 0 8px; letter-spacing: -0.3px;
}
.iatn-md-pane.preview h1 { font-size: 24px; border-bottom: 1px dashed var(--accent-dim); padding-bottom: 4px; }
.iatn-md-pane.preview h2 { font-size: 20px; }
.iatn-md-pane.preview h3 { font-size: 16px; }
.iatn-md-pane.preview p, .iatn-md-pane.preview li { line-height: 1.6; }
.iatn-md-pane.preview code {
background: rgba(124,255,178,0.08);
padding: 1px 5px;
border: 1px solid var(--edge);
font-size: 12px;
}
.iatn-md-pane.preview pre {
background: #000;
border: 1px solid var(--accent-dim);
padding: 10px;
overflow-x: auto;
margin: 10px 0;
}
.iatn-md-pane.preview pre code { background: transparent; border: none; padding: 0; font-size: 12px; }
.iatn-md-pane.preview blockquote {
border-left: 3px solid var(--accent-dim);
padding-left: 12px;
margin: 10px 0;
color: var(--accent-dim);
font-style: italic;
}
.iatn-md-pane.preview ul, .iatn-md-pane.preview ol { padding-left: 22px; }
.iatn-md-pane.preview hr { border: none; border-top: 1px dashed var(--accent-dim); margin: 18px 0; }
.iatn-md-pane.preview table { border-collapse: collapse; margin: 10px 0; width: 100%; }
.iatn-md-pane.preview th, .iatn-md-pane.preview td { padding: 6px 10px; border: 1px solid var(--edge); }
.iatn-md-pane.preview th { background: rgba(124,255,178,0.05); color: var(--accent); }
.iatn-md-pane.preview a { color: var(--accent); text-decoration: underline; }
.iatn-md-pane.preview del { color: var(--accent-dim); }
@media (max-width: 768px) {
.iatn-md-split { grid-template-columns: 1fr; }
.iatn-md-pane.editor textarea { border-right: none; border-bottom: 1px solid var(--edge); }
}
/* ============ RULE OF THREE ============ */
.iatn-rt-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 12px;
align-items: center;
margin: 20px 0;
font-size: 14px;
}
.iatn-rt-cell {
padding: 14px;
border: 1px solid var(--accent-dim);
background: rgba(124,255,178,0.02);
}
.iatn-rt-cell.solved { border-color: var(--accent); box-shadow: 0 0 14px rgba(124,255,178,0.3); }
.iatn-rt-cell label { display: block; font-size: 10px; letter-spacing: 1px; color: var(--accent-dim); text-transform: uppercase; margin-bottom: 6px; }
.iatn-rt-cell input {
width: 100%; padding: 8px;
background: #000; color: var(--accent);
border: 1px solid var(--edge);
font: inherit; font-size: 16px;
outline: none; text-align: center;
}
.iatn-rt-cell input:focus { border-color: var(--accent); }
.iatn-rt-cell input:disabled { color: var(--accent); border-color: var(--accent); background: rgba(124,255,178,0.05); font-weight: 700; }
.iatn-rt-op { font-size: 28px; color: var(--accent-dim); text-align: center; user-select: none; }
.iatn-rt-mode { display: flex; gap: 10px; margin-bottom: 16px; }
.iatn-rt-mode label { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 8px 14px; border: 1px solid var(--edge); background: rgba(124,255,178,0.02); font-size: 12px; }
.iatn-rt-mode input[type="radio"] { accent-color: var(--accent); }
.iatn-rt-mode label:has(input:checked) { border-color: var(--accent); color: var(--accent); }
.iatn-rt-formula { text-align: center; padding: 14px; border: 1px dashed var(--accent-dim); margin-top: 18px; font-size: 14px; color: var(--accent-dim); }
.iatn-rt-formula .x { color: var(--accent); font-weight: 700; font-size: 16px; }
/* ============ PDF / IMAGE TOOLS ============ */
.iatn-dropzone {
border: 2px dashed var(--accent-dim);
background: rgba(124,255,178,0.02);
padding: 32px 18px;
text-align: center;
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.iatn-dropzone:hover, .iatn-dropzone.drag { border-color: var(--accent); background: rgba(124,255,178,0.07); }
.iatn-dropzone .dz-inner { display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.iatn-dropzone .dz-icon { font-size: 28px; color: var(--accent); }
.iatn-dropzone span { color: var(--accent-dim); font-size: 13px; }
.iatn-dropzone strong { color: var(--accent); }
.iatn-dropzone .dz-hint { font-size: 11px; opacity: 0.7; }
.iatn-thumb-grid, .iatn-page-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 12px;
margin-top: 16px;
}
.iatn-thumb-item, .iatn-page-item {
position: relative;
border: 1px solid var(--edge);
background: rgba(0,0,0,0.4);
padding: 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.iatn-page-item { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.iatn-page-item:hover { border-color: var(--accent-dim); }
.iatn-page-item.selected { border-color: var(--accent); box-shadow: 0 0 12px rgba(124,255,178,0.35); background: rgba(124,255,178,0.06); }
.iatn-thumb-item img, .iatn-page-item img {
max-width: 100%; max-height: 150px; height: auto;
border: 1px solid var(--edge); background: #fff;
transition: transform 0.2s;
}
.iatn-thumb-item .thumb-num, .iatn-page-item .pg-num {
position: absolute; top: 4px; left: 4px;
background: var(--accent); color: #04140a;
font-size: 11px; font-weight: 700;
width: 20px; height: 20px; line-height: 20px; text-align: center;
border-radius: 2px;
}
.iatn-thumb-item .thumb-name {
font-size: 10px; color: var(--accent-dim);
max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iatn-thumb-controls, .iatn-page-item .pg-controls {
display: flex; gap: 2px; width: 100%; justify-content: center;
}
.iatn-thumb-controls button, .iatn-page-item .pg-controls button {
flex: 1; background: transparent; color: var(--accent-dim);
border: 1px solid var(--edge); padding: 4px 0;
font: inherit; font-size: 12px; cursor: pointer;
}
.iatn-thumb-controls button:hover, .iatn-page-item .pg-controls button:hover { color: var(--accent); border-color: var(--accent-dim); background: rgba(124,255,178,0.06); }
.iatn-file-list { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.iatn-file-item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px;
border: 1px solid var(--edge);
background: rgba(124,255,178,0.02);
font-size: 12px;
}
.iatn-file-item .fi-num { background: var(--accent); color: #04140a; font-weight: 700; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 2px; flex-shrink: 0; }
.iatn-file-item .fi-name { flex: 1; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iatn-file-item .fi-meta { color: var(--accent-dim); font-size: 11px; flex-shrink: 0; }
.iatn-file-item .fi-controls { display: flex; gap: 2px; flex-shrink: 0; }
.iatn-file-item .fi-controls button { background: transparent; color: var(--accent-dim); border: 1px solid var(--edge); padding: 3px 8px; font: inherit; cursor: pointer; }
.iatn-file-item .fi-controls button:hover { color: var(--accent); border-color: var(--accent-dim); }
.iatn-progress {
height: 8px; margin-top: 12px;
background: rgba(124,255,178,0.06);
border: 1px solid var(--edge);
overflow: hidden;
}
.iatn-progress .bar {
height: 100%; width: 0%;
background: var(--accent);
box-shadow: 0 0 10px rgba(124,255,178,0.7);
transition: width 0.2s linear;
}
/* ============ LIBRARY ============ */
.iatn-library-banner {
display: flex; align-items: center; gap: 14px;
padding: 10px 14px;
margin: 0 0 28px;
border: 1px solid var(--edge);
background: rgba(124,255,178,0.03);
flex-wrap: wrap;
}
.iatn-library-banner .label { color: var(--accent-dim); letter-spacing: 1px; text-transform: uppercase; font-size: 11px; }
.iatn-library-banner .lib-quick { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.iatn-library-banner .lib-quick a { display: inline-block; padding: 3px 10px; border: 1px solid var(--accent-dim); color: var(--accent); text-decoration: none; font-size: 12px; letter-spacing: 0.3px; }
.iatn-library-banner .lib-quick a:hover { background: var(--accent); color: #04140a; border-color: var(--accent); text-shadow: none; }
.iatn-library-banner .lib-link { margin-left: auto; color: var(--accent-dim); text-decoration: none; font-size: 11px; letter-spacing: 0.5px; }
.iatn-library-banner .lib-link:hover { color: var(--accent); background: transparent; text-shadow: 0 0 8px rgba(124,255,178,0.7); }
.iatn-lib-search { margin-bottom: 18px; }
.iatn-lib-search input {
width: 100%; padding: 10px 14px;
background: #000; color: var(--accent);
border: 1px solid var(--accent-dim);
font: inherit; outline: none;
}
.iatn-lib-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.iatn-lib-toc {
display: flex; flex-wrap: wrap; gap: 6px;
margin-bottom: 22px;
padding-bottom: 14px;
border-bottom: 1px dashed var(--accent-dim);
}
.iatn-lib-toc a {
padding: 3px 10px; border: 1px solid var(--edge);
color: var(--accent-dim); text-decoration: none;
font-size: 11px; letter-spacing: 0.3px;
}
.iatn-lib-toc a:hover { border-color: var(--accent); color: var(--accent); background: transparent; text-shadow: 0 0 8px rgba(124,255,178,0.7); }
.iatn-lib-section {
margin-bottom: 28px;
padding-bottom: 22px;
border-bottom: 1px solid var(--edge);
}
.iatn-lib-section h2 {
font-size: 18px;
letter-spacing: -0.3px;
margin: 0 0 14px;
color: var(--accent);
text-shadow: 0 0 10px rgba(124,255,178,0.4);
}
.iatn-lib-section h2 .anchor { color: var(--accent-dim); margin-right: 6px; font-weight: 400; }
.iatn-lib-section h3 {
font-size: 13px;
margin: 16px 0 8px;
color: var(--accent);
letter-spacing: 0.3px;
text-transform: uppercase;
}
.iatn-lib-section h3::before { content: '// '; color: var(--accent-dim); }
.iatn-lib-section p { margin: 8px 0; line-height: 1.6; }
.iatn-lib-section ul, .iatn-lib-section ol { padding-left: 22px; line-height: 1.6; }
.iatn-lib-section li { margin: 3px 0; }
.iatn-lib-section pre {
background: #000;
border: 1px solid var(--accent-dim);
border-left-width: 2px;
padding: 10px 12px;
overflow-x: auto;
margin: 10px 0;
font-size: 12px;
line-height: 1.5;
}
.iatn-lib-section pre code { color: var(--accent); }
.iatn-lib-section code {
background: rgba(124,255,178,0.08);
padding: 1px 5px;
border: 1px solid var(--edge);
font-size: 12px;
color: var(--accent);
}
.iatn-lib-section pre code { background: transparent; border: none; padding: 0; }
.iatn-lib-section table { border-collapse: collapse; margin: 10px 0; width: 100%; font-size: 12px; }
.iatn-lib-section th, .iatn-lib-section td { padding: 6px 10px; border: 1px solid var(--edge); text-align: left; vertical-align: top; }
.iatn-lib-section th { background: rgba(124,255,178,0.05); color: var(--accent); letter-spacing: 0.5px; }
.iatn-lib-section .kw { color: #ff8c42; }
.iatn-lib-section .cm { color: var(--accent-dim); font-style: italic; }
.iatn-lib-section .hl { color: #febc2e; }
.iatn-lib-section.hidden { display: none; }
.iatn-lib-empty { padding: 30px; text-align: center; color: var(--accent-dim); font-size: 13px; border: 1px dashed var(--accent-dim); }
.iatn-lib-index-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 18px;
}
/* empilha em telas menores: 2 colunas, depois 1 */
@media (max-width: 1000px){ .iatn-lib-index-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .iatn-lib-index-grid { grid-template-columns: 1fr; } }
/* ===== CARDS DE JOGOS (estilo B: glyph de fundo + barra lateral, glow) ===== */
.iatn-games-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-top: 18px;
}
@media (max-width: 900px){ .iatn-games-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px){ .iatn-games-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; } }
.iatn-game-card {
position: relative;
display: flex; flex-direction: column; justify-content: flex-end;
min-height: 116px;
padding: 16px 16px 14px;
border-radius: 16px;
border: 1px solid var(--edge, #2c2f44);
background: var(--surface, #1a1d2a);
text-decoration: none;
overflow: hidden;
transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s, background .2s;
}
.iatn-game-card:hover {
transform: translateY(-5px);
border-color: var(--gc, var(--accent));
box-shadow: 0 12px 34px -12px rgba(0,0,0,.6), 0 0 26px -6px var(--gc, var(--accent));
}
/* barra colorida na lateral esquerda */
.iatn-game-card .game-bar {
position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
background: var(--gc, var(--accent));
opacity: .7; transition: opacity .2s, width .2s;
}
.iatn-game-card:hover .game-bar { opacity: 1; width: 5px; }
/* glyph (emoji) gigante de fundo no canto */
.iatn-game-card .game-glyph {
position: absolute; top: -12px; right: -8px;
font-size: 72px; line-height: 1;
opacity: .16;
transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s;
pointer-events: none;
user-select: none;
}
.iatn-game-card:hover .game-glyph { transform: scale(1.12) rotate(-6deg); opacity: .30; }
/* leve brilho colorido no fundo ao passar o mouse */
.iatn-game-card::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(120% 90% at 100% 0%, rgba(var(--gc-rgb,124,255,178), .10), transparent 55%);
opacity: 0; transition: opacity .25s; pointer-events: none;
}
.iatn-game-card:hover::before { opacity: 1; }
.iatn-game-card .game-name {
position: relative;
font-family: 'JetBrains Mono', monospace;
font-weight: 800; font-size: 15px;
color: var(--text, #e8e9f3);
transition: color .2s;
}
.iatn-game-card:hover .game-name { color: var(--gc, var(--accent)); }
.iatn-game-card .game-meta {
position: relative;
font-size: 11px; color: var(--text-dim, #8b8fa3); margin-top: 3px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce){
.iatn-game-card, .iatn-game-card .game-glyph { transition: border-color .2s, box-shadow .2s; }
.iatn-game-card:hover { transform: none; }
.iatn-game-card:hover .game-glyph { transform: none; }
}
/* ===== CARDS DE FERRAMENTA (estilo B: SVG esmaecido de fundo, cor por categoria) ===== */
.iatn-tools-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
@media (max-width: 820px){ .iatn-tools-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .iatn-tools-grid { grid-template-columns: 1fr; gap: 11px; } }
.iatn-tool-card {
position: relative;
display: flex; flex-direction: column; justify-content: flex-end;
min-height: 104px;
padding: 15px 16px 13px;
border-radius: 14px;
border: 1px solid var(--edge, #2c2f44);
background: var(--surface, #1a1d2a);
text-decoration: none;
overflow: hidden;
--tc: var(--accent, #7CFFB2);
transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s;
}
.iatn-tool-card.tcat-edit { --tc: var(--c-edit, #A78BFA); }
.iatn-tool-card.tcat-security { --tc: var(--c-security, #5BA8F5); }
.iatn-tool-card.tcat-organize { --tc: var(--c-organize, #F2935C); }
.iatn-tool-card.tcat-optimize { --tc: var(--c-optimize, #56D364); }
.iatn-tool-card.tcat-convert { --tc: var(--c-convert, #F5C84B); }
.iatn-tool-card.tcat-data { --tc: var(--c-data, #5EEAD4); }
.iatn-tool-card.tcat-fun { --tc: var(--c-fun, #F472B6); }
.iatn-tool-card:hover {
transform: translateY(-4px);
border-color: var(--tc);
box-shadow: 0 12px 32px -12px rgba(0,0,0,.6), 0 0 24px -6px var(--tc);
}
.iatn-tool-card .tool-glyph {
position: absolute; top: -10px; right: -10px;
width: 76px; height: 76px;
color: var(--tc);
opacity: .13;
transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s;
pointer-events: none;
}
.iatn-tool-card .tool-glyph svg { width: 100%; height: 100%; }
.iatn-tool-card:hover .tool-glyph { transform: scale(1.12) rotate(-6deg); opacity: .26; }
.iatn-tool-card .tool-name {
position: relative;
font-family: 'JetBrains Mono', monospace;
font-weight: 700; font-size: 14px;
color: var(--text, #e8e9f3);
transition: color .2s;
}
.iatn-tool-card:hover .tool-name { color: var(--tc); }
.iatn-tool-card .tool-meta {
position: relative;
font-size: 11px; color: var(--text-dim, #8b8fa3); margin-top: 3px;
line-height: 1.4;
}
@media (prefers-reduced-motion: reduce){
.iatn-tool-card { transition: border-color .2s, box-shadow .2s; }
.iatn-tool-card:hover { transform: none; }
.iatn-tool-card:hover .tool-glyph { transform: none; }
}
.iatn-lib-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
padding: 20px;
border: 1px solid var(--edge);
border-radius: 16px;
background: linear-gradient(160deg, rgba(255,255,255,.025), rgba(255,255,255,0));
color: var(--text);
text-decoration: none;
box-shadow: 0 4px 18px -10px rgba(0,0,0,.5);
transition: transform .22s cubic-bezier(.34,1.56,.64,1), border-color .22s ease, box-shadow .22s ease, background .22s ease;
--libc: var(--accent);
--libc-rgb: 124,255,178;
}
/* o ícone colorido de cada card (mesmo tratamento dos ícones novos do site) */
.iatn-lib-card .lib-ico {
position: relative;
flex: 0 0 auto;
width: 52px; height: 52px;
border-radius: 14px;
display: inline-flex; align-items: center; justify-content: center;
background: linear-gradient(145deg, rgba(var(--libc-rgb),.28), rgba(var(--libc-rgb),.07));
border: 1px solid rgba(var(--libc-rgb),.4);
color: var(--libc);
box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 -2px 6px rgba(0,0,0,.18), 0 2px 8px -3px rgba(0,0,0,.4);
transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.iatn-lib-card .lib-ico::before {
content:''; position:absolute; inset:0; border-radius:inherit;
background:linear-gradient(140deg, rgba(255,255,255,.2) 0%, transparent 44%); pointer-events:none;
}
.iatn-lib-card .lib-ico svg {
width: 27px; height: 27px; position: relative; z-index: 1;
filter: drop-shadow(0 0 3px rgba(var(--libc-rgb),.5));
transition: filter .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
.iatn-lib-card .lib-card-body { flex: 1; min-width: 0; }
.iatn-lib-card .card-title {
font-size: 19px; font-weight: 700; margin-bottom: 5px; letter-spacing: -0.3px;
color: var(--libc);
}
.iatn-lib-card .card-meta { font-size: 11px; color: var(--text-dim); letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 10px; }
.iatn-lib-card .card-desc { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }
/* HOVER: card sobe, ícone cresce/gira e tudo ganha glow da cor da referência */
.iatn-lib-card:hover {
transform: translateY(-4px);
border-color: rgba(var(--libc-rgb),.55);
background: linear-gradient(160deg, rgba(var(--libc-rgb),.06), rgba(var(--libc-rgb),.01));
box-shadow: 0 14px 34px -14px rgba(var(--libc-rgb),.5), 0 0 0 1px rgba(var(--libc-rgb),.12);
}
.iatn-lib-card:hover .lib-ico {
transform: scale(1.12) rotate(-4deg);
border-color: rgba(var(--libc-rgb),.8);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(var(--libc-rgb),.6), 0 0 34px rgba(var(--libc-rgb),.32), 0 8px 20px -6px rgba(0,0,0,.5);
}
.iatn-lib-card:hover .lib-ico svg {
filter: drop-shadow(0 0 6px rgba(var(--libc-rgb),.95));
transform: scale(1.05);
}
/* cores próprias de cada referência */
.iatn-lib-card.lib-python { --libc: #5BA8F5; --libc-rgb: 91,168,245; } /* azul */
.iatn-lib-card.lib-excel { --libc: #56D364; --libc-rgb: 86,211,100; } /* verde */
.iatn-lib-card.lib-sql { --libc: #F2935C; --libc-rgb: 242,147,92; } /* laranja */
.iatn-lib-card.lib-bi { --libc: #A78BFA; --libc-rgb: 167,139,250; } /* roxo */
/* cores próprias das 7 áreas de ferramentas (faltavam: por isso ficavam verdes) */
.iatn-lib-card.tcat-pdf { --libc: #FF6B6B; --libc-rgb: 255,107,107; } /* vermelho coral · PDF */
.iatn-lib-card.tcat-img { --libc: #A78BFA; --libc-rgb: 167,139,250; } /* roxo · imagens */
.iatn-lib-card.tcat-dev { --libc: #5BA8F5; --libc-rgb: 91,168,245; } /* azul · dev */
.iatn-lib-card.tcat-qual { --libc: #5EEAD4; --libc-rgb: 94,234,212; } /* teal · qualidade */
.iatn-lib-card.tcat-calc { --libc: #F5B50A; --libc-rgb: 245,181,10; } /* âmbar · cálculo */
.iatn-lib-card.tcat-sec { --libc: #56D364; --libc-rgb: 86,211,100; } /* verde · segurança */
.iatn-lib-card.tcat-prod { --libc: #FF8FB1; --libc-rgb: 255,143,177; } /* rosa · produtividade */
.iatn-lib-card.tcat-maker { --libc: #E8A15C; --libc-rgb: 232,161,92; } /* cobre · maker & educação */
@media (prefers-reduced-motion: reduce){
.iatn-lib-card, .iatn-lib-card .lib-ico, .iatn-lib-card .lib-ico svg { transition: box-shadow .2s ease, border-color .2s ease; }
.iatn-lib-card:hover { transform: none; }
.iatn-lib-card:hover .lib-ico { transform: none; }
}
/* ============ POST READ EMPHASIS ============ */
.post-title a {
border-bottom: 1px dashed transparent;
padding-bottom: 1px;
}
.post-title a:hover {
border-bottom-color: var(--accent);
}
.post-read {
margin-top: 6px;
letter-spacing: 0.5px;
}
.post-read::after {
content: '';
}
.read-time {
color: var(--accent-dim);
font-size: 11px;
letter-spacing: 0.3px;
}
.read-time:empty { display: none; }
.read-time:not(:empty)::before {
content: '\B7 \23F1 ';
margin-right: 2px;
color: var(--accent-dim);
}
/* ============ SEARCH WIDGET ============ */
.iatn-search .cmd { color: var(--accent-dim); margin-bottom: 4px; font-size: 13px; }
.iatn-search form {
display: flex;
margin-top: 8px;
}
.iatn-search input[type="text"] {
flex: 1;
border: 1px solid var(--accent-dim);
border-right: none;
background: transparent;
color: var(--accent);
padding: 8px 10px;
font-family: inherit;
font-size: 13px;
outline: none;
min-width: 0;
}
.iatn-search input::placeholder { color: var(--accent-dim); }
.iatn-search input:focus { border-color: var(--accent); }
.iatn-search button {
border: 1px solid var(--accent);
background: var(--accent);
color: #000;
font-family: inherit;
padding: 8px 14px;
font-weight: 700;
cursor: pointer;
font-size: 13px;
}
.iatn-search button:hover { background: #fff; }
/* ============ DONATION WIDGET (PayPal QR) ============ */
.iatn-donate {
border: 1px dashed var(--accent-dim);
padding: 16px 14px 14px;
position: relative;
text-align: center;
}
.iatn-donate .label {
position: absolute;
top: -9px;
left: 14px;
padding: 0 8px;
background: var(--bg);
color: var(--accent-dim);
font-size: 11px;
letter-spacing: 0.5px;
}
.iatn-donate .cmd {
font-size: 11px;
color: var(--accent-dim);
letter-spacing: 1px;
margin-bottom: 4px;
text-align: left;
}
.iatn-donate .title {
color: var(--accent);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.5px;
margin-bottom: 6px;
text-align: left;
}
.iatn-donate .desc {
font-size: 11px;
color: var(--accent);
opacity: 0.75;
line-height: 1.5;
margin-bottom: 10px;
text-align: left;
}
.iatn-donate .qr-wrap {
display: inline-block;
padding: 8px;
background: #fff;
border: 1px solid var(--accent);
margin: 4px 0 6px;
box-shadow: 0 0 16px rgba(124,255,178,0.3);
}
.iatn-donate .qr-wrap img {
display: block;
width: 180px;
height: 180px;
}
.iatn-donate .hint {
font-size: 10px;
color: var(--accent-dim);
letter-spacing: 0.5px;
margin-top: 4px;
}
.iatn-donate .hint::before { content: '> '; }
/* ============ RECENT POSTS WIDGET ============ */
.iatn-recent .cmd { color: var(--accent-dim); font-size: 13px; margin-bottom: 8px; }
.iatn-recent ul { list-style: none; padding: 0; margin: 0; }
.iatn-recent li {
padding: 6px 0;
border-bottom: 1px solid var(--edge);
font-size: 12px;
line-height: 1.4;
}
.iatn-recent li:last-child { border-bottom: none; }
.iatn-recent a {
color: var(--accent);
text-decoration: none;
display: block;
}
.iatn-recent a:hover {
background: transparent;
text-shadow: 0 0 8px rgba(124,255,178,0.9);
}
.iatn-recent .meta {
font-size: 10px;
color: var(--accent-dim);
letter-spacing: 0.5px;
margin-top: 2px;
}
.iatn-recent .loading {
font-size: 11px;
color: var(--accent-dim);
font-style: italic;
}
/* ============ RANDOM POST + UTILS ============ */
.iatn-utils {
display: flex;
flex-direction: column;
gap: 6px;
}
.iatn-utils a {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 10px;
border: 1px solid var(--edge);
color: var(--accent);
text-decoration: none;
font-size: 12px;
}
.iatn-utils a:hover {
border-color: var(--accent);
background: rgba(124,255,178,0.08);
text-shadow: 0 0 8px rgba(124,255,178,0.8);
}
.iatn-utils .kbd-hint {
color: var(--accent-dim);
font-size: 10px;
font-family: 'JetBrains Mono', monospace;
}
/* ============ BACK TO TOP BUTTON ============ */
.iatn-top {
position: fixed;
bottom: 50px;
right: 18px;
width: 36px;
height: 36px;
border: 1px solid var(--accent);
background: var(--bg);
color: var(--accent);
display: none;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
z-index: 100;
text-decoration: none;
box-shadow: 0 0 12px rgba(124,255,178,0.3);
}
.iatn-top:hover {
background: var(--accent);
color: #04140a;
text-shadow: none;
}
.iatn-top.visible { display: flex; }
/* ============ SHARE BUTTONS ON SINGLE POSTS ============ */
.iatn-share {
margin-top: 24px;
padding: 14px 0;
border-top: 1px dashed var(--accent-dim);
border-bottom: 1px dashed var(--accent-dim);
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.iatn-share .label {
font-size: 11px;
color: var(--accent-dim);
letter-spacing: 1px;
text-transform: uppercase;
}
.iatn-share .buttons {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.iatn-share a {
padding: 4px 12px;
border: 1px solid var(--accent-dim);
color: var(--accent);
text-decoration: none;
font-size: 12px;
}
.iatn-share a:hover {
border-color: var(--accent);
background: var(--accent);
color: #04140a;
text-shadow: none;
}
/* ============ TETRIS ============ */
.iatn-tetris-game .iatn-game-grid { letter-spacing: 0; line-height: 1; }
.iatn-tetris-game .tet-bord { color: var(--accent-dim); }
.iatn-tetris-game .tet-t1 { color: #7CEEFF; text-shadow: 0 0 4px rgba(124, 238, 255, 0.8); } /* I cyan */
.iatn-tetris-game .tet-t2 { color: #FFEE7C; text-shadow: 0 0 4px rgba(255, 238, 124, 0.8); } /* O yellow */
.iatn-tetris-game .tet-t3 { color: #E07CFF; text-shadow: 0 0 4px rgba(224, 124, 255, 0.8); } /* T purple */
.iatn-tetris-game .tet-t4 { color: #7CFFB2; text-shadow: 0 0 4px rgba(124, 255, 178, 0.8); } /* S green */
.iatn-tetris-game .tet-t5 { color: #FF7C8E; text-shadow: 0 0 4px rgba(255, 124, 142, 0.8); } /* Z red */
.iatn-tetris-game .tet-t6 { color: #FFB07C; text-shadow: 0 0 4px rgba(255, 176, 124, 0.8); } /* L orange */
.iatn-tetris-game .tet-t7 { color: #7CB0FF; text-shadow: 0 0 4px rgba(124, 176, 255, 0.8); } /* J blue */
.iatn-tetris-layout {
display: inline-flex;
align-items: flex-start;
gap: 22px;
text-align: left;
}
.iatn-tetris-next {
border: 1px solid var(--accent-dim);
padding: 10px 12px;
font-family: 'JetBrains Mono', monospace;
}
.iatn-tetris-next .nlabel {
font-size: 10px;
color: var(--accent-dim);
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 6px;
}
.iatn-tetris-next pre {
margin: 0 0 12px;
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
line-height: 1;
}
.iatn-tetris-next .stat { font-size: 12px; color: var(--accent-dim); margin-top: 6px; }
.iatn-tetris-next .stat strong { color: var(--accent); font-weight: 700; display: block; font-size: 16px; margin-top: 2px; }
/* ============ BREAKOUT ============ */
.iatn-breakout-game .iatn-game-grid { letter-spacing: 0; line-height: 1; }
.iatn-breakout-game .brk-bord { color: var(--accent-dim); }
.iatn-breakout-game .brk-b1 { color: #7CFFB2; }
.iatn-breakout-game .brk-b2 { color: #7CEEFF; }
.iatn-breakout-game .brk-b3 { color: #E07CFF; }
.iatn-breakout-game .brk-b4 { color: #FFB07C; }
.iatn-breakout-game .brk-b5 { color: #FF7C8E; text-shadow: 0 0 6px rgba(255, 124, 142, 0.8); }
.iatn-breakout-game .brk-pad { color: var(--accent); text-shadow: 0 0 6px rgba(124, 255, 178, 0.7); }
.iatn-breakout-game .brk-ball { color: #fff; text-shadow: 0 0 10px var(--accent); }
/* ============ MINESWEEPER ============ */
.iatn-mines-game .iatn-game-grid { letter-spacing: 0; line-height: 1.1; }
.iatn-mines-game .ms-hidden { color: var(--accent-dim); }
.iatn-mines-game .ms-flag { color: #FFC74C; text-shadow: 0 0 4px rgba(255, 199, 76, 0.6); }
.iatn-mines-game .ms-mine { color: #FF6B6B; text-shadow: 0 0 8px rgba(255, 107, 107, 0.8); }
.iatn-mines-game .ms-cursor { color: #fff; text-shadow: 0 0 6px var(--accent); font-weight: 700; }
.iatn-mines-game .ms-c1 { color: #7CB0FF; }
.iatn-mines-game .ms-c2 { color: #7CFFB2; }
.iatn-mines-game .ms-c3 { color: #FF7CB2; }
.iatn-mines-game .ms-c4 { color: #B07CFF; }
.iatn-mines-game .ms-c5 { color: #FFB07C; }
.iatn-mines-game .ms-c6 { color: #7CE5FF; }
.iatn-mines-game .ms-c7 { color: #FFE57C; }
.iatn-mines-game .ms-c8 { color: #FF7C7C; }
/* ============================================================
LAYOUT STANDALONE (topbar, main, footer) — substitui o
chrome que o Blogger fornecia
============================================================ */
.term-shell { max-width: 1100px; margin: 0 auto; padding: 0 18px; }
.term-topbar {
position: sticky; top: 0; z-index: 50;
background: rgba(4,20,10,0.92);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--edge);
}
.term-topbar-inner {
max-width: 1280px; margin: 0 auto; padding: 10px 22px;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.term-brand {
font-weight: 700; letter-spacing: 1px; color: var(--accent);
text-decoration: none; white-space: nowrap; font-size: 15px;
flex: 0 0 auto;
}
.term-brand:hover { background: transparent; color: var(--accent); text-shadow: 0 0 10px rgba(124,255,178,0.8); }
.term-brand .blink { animation: iatn-blink 1.1s steps(1) infinite; }
@keyframes iatn-blink { 50% { opacity: 0; } }
.term-nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.term-nav a {
color: var(--accent-dim); text-decoration: none;
padding: 4px 10px; border: 1px solid transparent; border-radius: 3px;
font-size: 13px; transition: all 0.15s;
}
.term-nav a:hover, .term-nav a.active {
color: var(--accent); border-color: var(--edge);
background: rgba(124,255,178,0.06); text-shadow: 0 0 8px rgba(124,255,178,0.5);
}
.term-meta { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-left: auto; }
.term-clock { color: var(--accent-dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.term-lang { display: flex; gap: 2px; }
.term-lang button {
background: transparent; color: var(--accent-dim);
border: 1px solid var(--edge); padding: 2px 7px;
font: inherit; font-size: 11px; cursor: pointer; text-transform: uppercase;
}
.term-lang button:hover { color: var(--accent); }
.term-lang button.active { background: var(--accent); color: var(--bg); }
/* ============ CAMPO FESTIVO (imagem/GIF de feriado na barra) ============ */
.term-festive {
flex: 0 0 auto; /* nunca encolhe, nunca é sobreposto */
display: inline-flex; align-items: center; justify-content: center;
height: 28px; max-width: 96px; padding: 2px 5px;
border: 1px solid rgba(124,255,178,0.30); border-radius: 8px;
background: rgba(124,255,178,0.04); overflow: hidden;
text-decoration: none; transition: box-shadow .16s, border-color .16s;
}
.term-festive:hover { box-shadow: 0 0 12px rgba(124,255,178,0.30); border-color: rgba(124,255,178,0.55); }
.term-festive img { max-height: 22px; max-width: 84px; width: auto; height: auto; display: block; border-radius: 4px; }
.term-main { min-height: 60vh; padding: 26px 0 60px; }
/* ===== Post de setup: imagem à esquerda + texto ao lado ===== */
.setup-item { margin: 38px 0; }
.setup-row { display: flex; gap: 22px; align-items: flex-start; }
.setup-foto {
flex: 0 0 240px; width: 240px; min-height: 180px;
border: 1px solid rgba(40,180,99,0.35); border-radius: 12px; overflow: hidden;
background: rgba(40,180,99,0.05); position: relative;
display: flex; align-items: center; justify-content: center;
}
.setup-foto img { width: 100%; height: auto; display: block; }
.setup-foto-ph {
display: none; padding: 18px; text-align: center; font-size: 13px;
color: var(--text-dim, #3a8a5e); font-family: "JetBrains Mono", monospace;
}
.setup-foto.sem-foto { min-height: 150px; }
.setup-foto.sem-foto .setup-foto-ph { display: block; }
.setup-txt { flex: 1 1 auto; min-width: 0; }
.setup-txt p:first-child { margin-top: 0; }
.setup-meta { margin-top: 12px; font-size: 14px; line-height: 1.7; }
.setup-faixa {
display: inline-block; background: rgba(40,180,99,0.12); border: 1px solid rgba(40,180,99,0.3);
border-radius: 20px; padding: 3px 12px; margin-right: 8px; color: #7CFFB2;
font-family: "JetBrains Mono", monospace; font-size: 13px;
}
.setup-selo { color: var(--text-dim, #9ad8b0); }
@media (max-width: 640px) {
.setup-row { flex-direction: column; gap: 14px; }
.setup-foto { flex-basis: auto; width: 100%; max-width: 320px; }
}
.term-footer {
border-top: 1px solid var(--edge); margin-top: 40px;
padding: 24px 18px; text-align: center;
color: var(--accent-dim); font-size: 12px;
}
.term-footer a { color: var(--accent-dim); }
.term-privacy { max-width:760px; margin:14px auto 0; padding-top:12px; border-top:1px dashed var(--accent-dim); font-size:11.5px; line-height:1.7; color:var(--text-dim,#6a8a78); opacity:.85; }
.term-privacy strong { color:var(--accent-dim); }
#iatn-back-to-top {
position: fixed; right: 20px; bottom: 20px; z-index: 60;
width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
background: var(--bg); color: var(--accent); border: 1px solid var(--accent-dim);
border-radius: 4px; cursor: pointer; opacity: 0; pointer-events: none;
transition: opacity 0.2s; text-decoration: none; font-size: 18px;
}
#iatn-back-to-top.visible { opacity: 1; pointer-events: auto; }
#iatn-back-to-top:hover { background: var(--accent); color: var(--bg); }
/* Google Translate: esconder o chrome padrão */
#google_translate_element { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.goog-te-banner-frame, .skiptranslate { display: none !important; }
body { top: 0 !important; }
/* ============================================================
ÍCONES
============================================================ */
.iatn-ico { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.iatn-ico svg { width: 18px; height: 18px; }
.iatn-tools-list .iatn-ico { margin-right: 10px; flex-shrink: 0; }
.iatn-tools-list .iatn-ico svg { width: 20px; height: 20px; color: var(--accent-dim); }
.iatn-tools-list li a:hover .iatn-ico svg { color: var(--bg); }
/* ============================================================
HOME — HERO
============================================================ */
.iatn-hero { text-align: center; padding: 24px 0 30px; border-bottom: 1px dashed var(--edge); margin-bottom: 30px; }
.iatn-hero-ascii {
color: var(--accent); font-size: clamp(5px, 1.6vw, 11px); line-height: 1.2;
margin: 0 auto; overflow-x: auto; text-shadow: 0 0 12px rgba(124,255,178,0.6);
white-space: pre; display: inline-block;
}
.iatn-hero-tag { color: var(--accent-dim); margin: 16px 0 22px; font-size: 14px; }
.iatn-hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top:4px; }
.cta-pill{
--cta: var(--accent);
display:inline-flex; align-items:center; gap:11px; text-decoration:none;
padding:10px 18px 10px 11px; border:1px solid var(--edge); border-radius:14px;
background:linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,0));
color:var(--text); transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.cta-pill .iatn-ico{ width:38px; height:38px; border-radius:11px; }
.cta-pill .iatn-ico svg{ width:20px; height:20px; }
.cta-label{ font-weight:600; font-size:15px; letter-spacing:.2px; }
.cta-dollar{ color:var(--cta); opacity:.85; }
.cta-pill.cat-security{ --cta:var(--c-security); }
.cta-pill.cat-fun{ --cta:var(--c-fun); }
.cta-pill.cat-data{ --cta:var(--c-data); }
.cta-pill.cat-convert{ --cta:var(--c-convert); }
.cta-pill:hover{
transform:translateY(-3px);
border-color:color-mix(in srgb, var(--cta) 55%, transparent);
background:color-mix(in srgb, var(--cta) 9%, transparent);
box-shadow:0 10px 26px -12px rgba(0,0,0,.7), 0 0 22px -10px var(--cta);
}
.cta-pill:hover .iatn-ico{ transform:scale(1.1) rotate(-4deg); }
.cta-pill:hover .cta-label{ color:#fff; }
@media (max-width:560px){ .cta-pill{ padding:9px 14px 9px 9px; } .cta-label{ font-size:14px; } }
/* HOME — CARDS PRINCIPAIS */
.iatn-home-cards {
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 16px; margin-bottom: 36px;
}
.iatn-home-card {
position: relative; display: flex; flex-direction: column; gap: 6px;
padding: 22px; border: 1px solid var(--edge); border-radius: 6px;
background: rgba(124,255,178,0.02); text-decoration: none; color: var(--accent);
transition: all 0.18s; overflow: hidden;
}
.iatn-home-card:hover {
border-color: var(--accent-dim); background: rgba(124,255,178,0.06);
transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,0.4), 0 0 0 1px rgba(124,255,178,0.1);
}
.iatn-home-card .hc-ico svg { width: 38px; height: 38px; color: var(--accent); margin-bottom: 8px; }
.iatn-home-card .hc-title { font-size: 18px; font-weight: 700; letter-spacing: 0.5px; }
.iatn-home-card .hc-count { font-size: 11px; color: var(--accent-dim); text-transform: uppercase; letter-spacing: 1px; }
.iatn-home-card .hc-desc { font-size: 13px; color: var(--accent-dim); line-height: 1.5; flex: 1; }
.iatn-home-card .hc-go { font-size: 13px; color: var(--accent); margin-top: 6px; }
.iatn-home-card:hover .hc-go { text-shadow: 0 0 8px rgba(124,255,178,0.7); }
/* HOME — GRADE DE DESTAQUES */
.iatn-quick-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px; margin-top: 14px;
}
.iatn-quick-item {
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 16px 10px; border: 1px solid var(--edge); border-radius: 5px;
text-decoration: none; color: var(--accent-dim); transition: all 0.15s;
}
.iatn-quick-item:hover {
color: var(--accent); border-color: var(--accent-dim);
background: rgba(124,255,178,0.05); transform: translateY(-2px);
}
.iatn-quick-item .qi-ico svg { width: 26px; height: 26px; }
.iatn-quick-item .qi-label { font-size: 12px; }
/* HOME — POSTS RECENTES */
.iatn-recent-home { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; }
.iatn-recent-home li { border: 1px solid var(--edge); border-radius: 4px; }
.iatn-recent-home li.loading { border: none; color: var(--accent-dim); padding: 8px 0; }
.iatn-recent-home a { display: block; padding: 12px 14px; text-decoration: none; color: var(--accent); }
.iatn-recent-home a:hover { background: rgba(124,255,178,0.05); }
.iatn-recent-home .meta { font-size: 11px; color: var(--accent-dim); margin-top: 3px; }
/* ============================================================
POST INDIVIDUAL
============================================================ */
.iatn-post-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 20px; font-size: 12px; color: var(--accent-dim); }
.iatn-tag { color: var(--accent-dim); text-decoration: none; border: 1px solid var(--edge); padding: 1px 8px; border-radius: 3px; }
.iatn-tag:hover { color: var(--accent); }
.iatn-post-body { line-height: 1.75; }
.iatn-post-body h2, .iatn-post-body h3 { color: var(--accent); margin-top: 1.6em; }
.iatn-post-body pre { background: #000; border: 1px solid var(--edge); padding: 14px; overflow-x: auto; border-radius: 4px; }
.iatn-post-body code { color: var(--accent); }
.iatn-post-body img { border: 1px solid var(--edge); border-radius: 4px; margin: 1em 0; }
@media (max-width: 600px){
.term-nav { order: 3; width: 100%; }
.iatn-home-card { padding: 18px; }
}
/* ============ LOGO IA tech NERDS ============ */
.iatn-logo{
font-family:'JetBrains Mono','IBM Plex Mono',Menlo,monospace;
font-weight:800;
letter-spacing:-.01em;
display:inline-flex;
align-items:baseline;
gap:.32em;
line-height:1;
white-space:nowrap;
user-select:none;
}
.iatn-logo .l-ia,
.iatn-logo .l-nerds{
color:var(--accent);
text-shadow:0 0 5px rgba(124,255,178,.6), 0 0 16px rgba(124,255,178,.4), 0 0 30px rgba(124,255,178,.2);
}
.iatn-logo .l-tech{
color:var(--accent-dim);
font-weight:600;
text-shadow:0 0 4px rgba(58,138,94,.45);
}
@keyframes iatnLogoGlow{
0%,100%{ filter:brightness(1); }
50%{ filter:brightness(1.22); }
}
.iatn-logo.glow{ animation:iatnLogoGlow 2.6s ease-in-out infinite; }
/* logo no topo da barra */
.term-brand .iatn-logo{ font-size:19px; }
/* logo grande no hero da home */
.iatn-hero-logo{
font-size:clamp(34px, 9vw, 76px);
margin:6px 0 4px;
display:block;
}
.iatn-hero-logo .iatn-logo{ gap:.28em; }
@media (max-width:520px){
.term-brand .iatn-logo{ font-size:16px; }
}
/* ============ SUDOKU ============ */
.sdk-board{ display:grid; grid-template-columns:repeat(9,1fr); gap:0; max-width:430px; margin:14px auto;
border:2px solid var(--accent-dim); background:#000; aspect-ratio:1/1; }
.sdk-cell{ display:flex; align-items:center; justify-content:center; aspect-ratio:1/1;
border:1px solid #0a2a18; font-size:clamp(15px,4.6vw,22px); color:var(--accent); cursor:pointer; position:relative; user-select:none; }
.sdk-cell.given{ color:#cfeede; font-weight:700; }
.sdk-cell.br{ border-right:2px solid var(--accent-dim); }
.sdk-cell.bb{ border-bottom:2px solid var(--accent-dim); }
.sdk-cell.peer{ background:rgba(124,255,178,.05); }
.sdk-cell.same{ background:rgba(124,255,178,.16); }
.sdk-cell.sel{ background:rgba(124,255,178,.28); box-shadow:inset 0 0 0 2px var(--accent); }
.sdk-cell.conflict{ color:#ff5f57; }
.sdk-notes{ display:grid; grid-template-columns:repeat(3,1fr); width:100%; height:100%; font-size:9px; color:var(--accent-dim); }
.sdk-notes i{ display:flex; align-items:center; justify-content:center; font-style:normal; }
.sdk-pad{ display:grid; grid-template-columns:repeat(9,1fr); gap:5px; max-width:430px; margin:12px auto 0; }
.sdk-pad button{ aspect-ratio:1/1; background:#000; color:var(--accent); border:1px solid var(--edge);
font:inherit; font-size:18px; cursor:pointer; border-radius:3px; }
.sdk-pad button:hover{ border-color:var(--accent-dim); background:rgba(124,255,178,.08); }
.sdk-pad button.wide{ grid-column:span 4; aspect-ratio:auto; font-size:13px; padding:8px; }
.sdk-pad button.wide.on{ color:var(--accent); border-color:var(--accent); }
@media (max-width:480px){ .sdk-pad button.wide{ grid-column:span 4; } }
/* ============ FORCA ============ */
.forca-wrap{ max-width:480px; margin:0 auto; }
.forca-hangman{ display:block; margin:10px auto 2px; width:130px; height:auto; }
.forca-meta{ text-align:center; font-size:13px; color:var(--accent-dim); margin:2px 0 10px; }
.forca-hint-box{ text-align:center; margin:8px auto 4px; font-size:13px; color:var(--accent-dim); min-height:20px; max-width:420px; line-height:1.4; }
.forca-hint-box strong{ color:var(--accent); }
.forca-word{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 10px; margin:18px auto; max-width:440px; }
.forca-char{ font-size:clamp(20px,6.5vw,28px); font-weight:700; min-width:20px; text-align:center;
border-bottom:3px solid var(--accent-dim); color:var(--accent); line-height:1.1; }
.forca-char.found{ border-color:var(--accent); animation:forcaPop .18s ease; }
.forca-char.blank{ color:transparent; }
@keyframes forcaPop{ from{ transform:scale(1.35); } to{ transform:scale(1); } }
.forca-space{ width:16px; }
.forca-actions{ display:flex; gap:8px; justify-content:center; margin:14px 0; flex-wrap:wrap; }
.forca-keyboard{ display:flex; flex-direction:column; align-items:center; gap:6px; margin:16px auto; max-width:430px; }
.forca-krow{ display:flex; gap:5px; width:100%; justify-content:center; }
.forca-key{ flex:1 1 0; max-width:42px; aspect-ratio:1/1; background:#000; color:var(--accent-dim);
border:1px solid var(--edge); font:inherit; font-size:clamp(13px,3.8vw,16px); font-weight:700;
cursor:pointer; border-radius:5px; transition:transform .08s, background .12s; padding:0; }
.forca-key:hover:not(:disabled){ border-color:var(--accent-dim); color:var(--accent); }
.forca-key:active:not(:disabled){ transform:scale(.9); }
.forca-key.hit{ background:rgba(124,255,178,.18); color:var(--accent); border-color:var(--accent); }
.forca-key.miss{ background:rgba(255,95,87,.14); color:#ff5f57; border-color:#ff5f57; opacity:.7; }
.forca-key:disabled{ cursor:default; }
.forca-result{ text-align:center; margin:18px 0 4px; }
/* ============ POMODORO ============ */
.pomo-wrap{ text-align:center; padding:18px 0 8px; }
.pomo-phase{ font-size:14px; letter-spacing:3px; color:var(--accent-dim); margin-bottom:8px; }
.pomo-wrap.is-pausa .pomo-phase{ color:#febc2e; }
.pomo-ring{ position:relative; width:200px; height:200px; margin:0 auto; }
.pomo-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.pomo-ring circle{ fill:none; stroke-width:8; }
.pomo-ring circle.bg{ stroke:var(--edge); }
.pomo-ring circle.fg{ stroke:var(--accent); stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
.pomo-wrap.is-pausa .pomo-ring circle.fg{ stroke:#febc2e; }
.pomo-time{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:42px; font-weight:800; color:var(--accent); }
.pomo-wrap.is-pausa .pomo-time{ color:#febc2e; }
.pomo-cycles{ font-size:13px; color:var(--accent-dim); margin:14px 0; }
/* ============ SORTEADOR ============ */
.srt-result{ min-height:80px; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:14px; border:1px dashed var(--edge); border-radius:6px; }
.srt-result .dim{ color:var(--accent-dim); }
.srt-spin{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; opacity:.6; font-size:18px; color:var(--accent-dim); }
.srt-winners{ display:flex; flex-direction:column; gap:8px; width:100%; max-width:340px; }
.srt-winner{ display:flex; align-items:center; gap:10px; background:rgba(124,255,178,.1); border:1px solid var(--accent); border-radius:6px; padding:10px 14px; font-size:18px; font-weight:700; color:var(--accent); animation:forcaPop .25s ease; }
.srt-winner .n{ width:24px; height:24px; border-radius:50%; background:var(--accent); color:#04140a; display:flex; align-items:center; justify-content:center; font-size:12px; flex:0 0 auto; }
/* ============ LINHAS DE DADOS (pareto) ============ */
.iatn-drow{ display:flex; gap:8px; margin-bottom:6px; }
.iatn-drow input{ padding:8px; background:#000; color:var(--accent); border:1px solid var(--edge); font:inherit; }
.iatn-drow .pr-c{ flex:1; }
.iatn-drow .pr-v{ width:90px; }
.iatn-drow-del{ width:34px; background:transparent; border:1px solid var(--edge); color:#ff5f57; cursor:pointer; border-radius:4px; font-size:16px; }
.iatn-drow-del:hover{ border-color:#ff5f57; }
/* ============ ISHIKAWA ============ */
.ish-cats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; }
.ish-cat{ border:1px solid var(--edge); border-radius:6px; padding:10px; }
.ish-cat-name{ font-weight:700; color:var(--accent); margin-bottom:6px; font-size:13px; }
.ish-cause{ width:100%; padding:6px 8px; margin-bottom:5px; background:#000; color:var(--accent); border:1px solid var(--edge); font:inherit; font-size:12px; }
.ish-addcause{ background:transparent; border:1px dashed var(--accent-dim); color:var(--accent-dim); cursor:pointer; font:inherit; font-size:11px; padding:4px 8px; border-radius:4px; width:100%; }
.ish-addcause:hover{ color:var(--accent); border-color:var(--accent); }
.ish-diagram-box{ overflow-x:auto; border:1px solid var(--edge); border-radius:6px; }
.ish-diagram-box svg{ display:block; width:100%; min-width:560px; height:auto; }
/* ============================================================
=============== REDESIGN 2026 — PALETA OFICIAL ===========
Estética: terminal verde fósforo + toques coloridos modernos
============================================================ */
:root{
/* superfícies (base terminal) */
--bg: #04140a; /* fundo geral */
--bg-soft: #07200f; /* faixa/elevação sutil */
--surface: #0a2613; /* cartões */
--edge: #0a2a18; /* borda padrão (mantida) */
--edge-2: #14411f; /* borda mais visível */
/* texto */
--text: #d6f5e3;
--text-dim: #7fae93;
--muted: #5b8870;
/* marca (verde fósforo) — preservado */
--accent: #7CFFB2;
--accent-dim: #3a8a5e;
--accent-glow: rgba(124,255,178,.32);
/* acentos de categoria (o "colorido moderno") */
--c-edit: #A78BFA; /* roxo · editar */
--c-security: #5BA8F5; /* azul · segurança */
--c-organize: #F2935C; /* laranja · organizar */
--c-optimize: #56D364; /* verde · otimizar */
--c-convert: #F5C84B; /* amarelo · converter */
--c-data: #5EEAD4; /* teal · dados/produtividade */
--c-fun: #F472B6; /* rosa · jogos */
--danger: #ff5f57;
}
/* ---------- ÍCONES: chips coloridos por categoria ---------- */
.iatn-ico{
width:36px; height:36px; border-radius:10px;
display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
background:rgba(124,255,178,.12); color:var(--accent);
border:1px solid rgba(124,255,178,.24);
transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.iatn-ico svg{ width:19px; height:19px; color:inherit; }
.iatn-tools-list .iatn-ico, .iatn-games-list .iatn-ico{ margin-right:12px; }
.iatn-tools-list .iatn-ico svg, .iatn-games-list .iatn-ico svg{ color:inherit; width:19px; height:19px; }
.iatn-ico.cat-edit{ background:rgba(167,139,250,.15); color:var(--c-edit); border-color:rgba(167,139,250,.32); }
.iatn-ico.cat-security{ background:rgba(91,168,245,.15); color:var(--c-security); border-color:rgba(91,168,245,.32); }
.iatn-ico.cat-organize{ background:rgba(242,147,92,.15); color:var(--c-organize); border-color:rgba(242,147,92,.32); }
.iatn-ico.cat-optimize{ background:rgba(86,211,100,.15); color:var(--c-optimize); border-color:rgba(86,211,100,.32); }
.iatn-ico.cat-convert{ background:rgba(245,200,75,.15); color:var(--c-convert); border-color:rgba(245,200,75,.32); }
.iatn-ico.cat-data{ background:rgba(94,234,212,.15); color:var(--c-data); border-color:rgba(94,234,212,.32); }
.iatn-ico.cat-fun{ background:rgba(244,114,182,.15); color:var(--c-fun); border-color:rgba(244,114,182,.32); }
/* ---------- CARTÕES (ferramentas + jogos) ---------- */
.iatn-tools-list a, .iatn-games-list a{
display:flex; align-items:center; justify-content:flex-start;
gap:0; padding:12px 14px; margin-bottom:8px;
border:1px solid var(--edge); border-left:1px solid var(--edge); border-radius:12px;
background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0));
text-decoration:none; color:var(--accent);
transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.iatn-tools-list a:hover, .iatn-games-list a:hover{
transform:translateY(-2px); border-color:rgba(124,255,178,.4);
background:rgba(124,255,178,.06); text-shadow:none;
box-shadow:0 6px 22px -10px rgba(0,0,0,.7);
}
.iatn-tools-list a:hover .iatn-ico, .iatn-games-list a:hover .iatn-ico{ transform:scale(1.07); }
.iatn-tools-list .cmd, .iatn-games-list .cmd{ font-weight:600; color:var(--text); }
.iatn-tools-list .meta, .iatn-games-list .meta{
margin-left:auto; padding-left:14px; text-align:right;
color:var(--text-dim); font-size:11px; letter-spacing:.4px; flex:0 1 auto;
}
/* ---------- BOTÕES ---------- */
.iatn-btn{ border-radius:9px; font-weight:600; letter-spacing:.3px; transition:transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease; }
.iatn-btn:hover{ box-shadow:0 0 20px -6px var(--accent-glow); transform:translateY(-1px); }
.iatn-btn:active{ transform:translateY(0); }
.iatn-btn.secondary:hover{ background:rgba(124,255,178,.08); color:var(--accent); }
/* ---------- TOPBAR + NAV ---------- */
.term-topbar{ background:rgba(4,20,10,.82); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--edge); }
.term-nav a{ border-radius:8px; padding:6px 11px; transition:background .15s ease, color .15s ease, box-shadow .15s ease; }
.term-nav a:hover{ background:rgba(124,255,178,.08); color:var(--accent); }
.term-nav a.active{ background:rgba(124,255,178,.12); color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent); }
/* ---------- HERO (brilho de fundo) ---------- */
.iatn-hero{ position:relative; isolation:isolate; }
.iatn-hero::before{ content:''; position:absolute; left:0; right:0; top:-12%; height:120%;
background:radial-gradient(58% 70% at 50% 0%, rgba(124,255,178,.09), transparent 72%); z-index:-1; pointer-events:none; }
/* ---------- SECTION LABELS ---------- */
.iatn-view-section .section-label{ color:var(--text-dim); }
/* ---------- SELEÇÃO ---------- */
::selection{ background:rgba(124,255,178,.25); color:#eafff3; }
/* ---------- imagem de capa do post ---------- */
.iatn-post-hero{ display:block; width:100%; max-height:420px; object-fit:cover; border:1px solid var(--edge); border-radius:12px; margin:4px 0 22px; }
.post-body img{ max-width:100%; height:auto; border-radius:8px; }
/* ============ AJUSTES: destaques largura cheia + chip único + nav glow ============ */
/* grade de destaques ocupa toda a largura, sem espaços ociosos */
.iatn-quick-grid{ grid-template-columns:repeat(6, 1fr); }
@media (max-width:980px){ .iatn-quick-grid{ grid-template-columns:repeat(3, 1fr); } }
@media (max-width:560px){ .iatn-quick-grid{ grid-template-columns:repeat(2, 1fr); } }
/* chip colorido único como ícone do card de destaque */
.iatn-quick-item .iatn-ico{ width:48px; height:48px; border-radius:13px; margin:0; }
.iatn-quick-item .iatn-ico svg{ width:24px; height:24px; }
.iatn-quick-item:hover .iatn-ico{ transform:scale(1.06); }
.iatn-quick-item .qi-label{ color:var(--text-dim); }
.iatn-quick-item:hover .qi-label{ color:var(--accent); }
/* item de navegação ATIVO com glow */
.term-nav a.active{
background:rgba(124,255,178,.14); color:var(--accent);
text-shadow:0 0 10px var(--accent-glow);
box-shadow:inset 0 -2px 0 var(--accent), 0 0 18px -6px var(--accent-glow);
}
/* ============ ASSISTENTE IA ============ */
.ia-out{ white-space:pre-wrap; line-height:1.6; color:var(--text); background:rgba(167,139,250,.05);
border:1px solid var(--edge); border-left:3px solid var(--c-edit); border-radius:10px; padding:16px; font-size:14px; }
/* ============================================================
==== REDESIGN: home cards + subpáginas em GRID + hover ===
============================================================ */
/* HOME CARDS: chip colorido único (sem ícone verde duplicado) */
.iatn-home-card .iatn-ico.hc-chip{ width:54px; height:54px; border-radius:15px; margin-bottom:12px; }
.iatn-home-card .iatn-ico.hc-chip svg{ width:28px; height:28px; }
.iatn-home-card{ transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease; }
.iatn-home-card:hover{ transform:translateY(-4px); }
.iatn-home-card:hover .iatn-ico.hc-chip{ transform:scale(1.1) rotate(-4deg); }
.iatn-home-card .hc-title{ transition:text-shadow .18s ease; }
.iatn-home-card:hover .hc-title{ text-shadow:0 0 14px var(--accent-glow); }
/* SUBPÁGINAS: listas viram GRID de cards com ícone colorido */
.iatn-tools-list, .iatn-games-list{
display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
gap:12px; list-style:none; padding:0; margin:2px 0 6px;
}
.iatn-tools-list li, .iatn-games-list li{ margin:0; list-style:none; }
.iatn-tools-list a, .iatn-games-list a{
flex-direction:column; align-items:flex-start; justify-content:flex-start;
gap:10px; height:100%; padding:16px 16px 15px;
}
.iatn-tools-list .iatn-ico, .iatn-games-list .iatn-ico{ margin-right:0; width:46px; height:46px; border-radius:13px; }
.iatn-tools-list .iatn-ico svg, .iatn-games-list .iatn-ico svg{ width:23px; height:23px; }
.iatn-tools-list .cmd, .iatn-games-list .cmd{ font-size:15px; line-height:1.2; }
.iatn-tools-list .meta, .iatn-games-list .meta{
margin-left:0; padding-left:0; text-align:left; font-size:11.5px; line-height:1.5; color:var(--text-dim);
}
/* animação de hover nos cards de subpágina */
.iatn-tools-list a:hover, .iatn-games-list a:hover{ transform:translateY(-4px); border-color:rgba(124,255,178,.45); }
.iatn-tools-list a:hover .iatn-ico, .iatn-games-list a:hover .iatn-ico{ transform:translateY(-2px) scale(1.1); }
.iatn-tools-list a:hover .cmd, .iatn-games-list a:hover .cmd{ text-shadow:0 0 10px var(--accent-glow); }
@media (max-width:520px){
.iatn-tools-list, .iatn-games-list{ grid-template-columns:repeat(2, 1fr); gap:9px; }
.iatn-tools-list a, .iatn-games-list a{ padding:13px; }
}
/* ============ BIBLIOTECA: botão copiar nos códigos ============ */
.iatn-lib-section pre{ position:relative; }
.lib-copy{ position:absolute; top:8px; right:8px; background:rgba(124,255,178,.1); color:var(--accent);
border:1px solid var(--edge); border-radius:6px; font:inherit; font-size:11px; padding:3px 10px; cursor:pointer;
opacity:0; transition:opacity .15s, background .15s; }
.iatn-lib-section pre:hover .lib-copy, .lib-copy:focus{ opacity:1; }
.lib-copy:hover{ background:rgba(124,255,178,.2); border-color:var(--accent-dim); }
@media (hover:none){ .lib-copy{ opacity:1; } }
/* ============ ARRASTAR PARA REORDENAR — feedback visual (mouse + toque) ============ */
.iatn-thumb-item, .iatn-page-item, .iatn-file-item{ cursor:grab; -webkit-user-select:none; user-select:none; }
.iatn-thumb-item.dragging, .iatn-page-item.dragging, .iatn-file-item.dragging{
opacity:.45; cursor:grabbing; pointer-events:none; transform:scale(.96);
box-shadow:0 10px 30px -10px rgba(0,0,0,.8);
}
/* indicador de onde a peça vai entrar (grades = barra lateral; listas = barra horizontal) */
.iatn-thumb-item.drop-before, .iatn-page-item.drop-before{ box-shadow:-4px 0 0 0 var(--accent); }
.iatn-thumb-item.drop-after, .iatn-page-item.drop-after { box-shadow: 4px 0 0 0 var(--accent); }
.iatn-file-item.drop-before{ box-shadow:0 -4px 0 0 var(--accent); }
.iatn-file-item.drop-after { box-shadow:0 4px 0 0 var(--accent); }
/* ============ ARQUIVO: lista de posts + filtro + 'ver mais' na home ============ */
.iatn-archive-posts{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:10px; }
.iatn-archive-posts li{ margin:0; }
.iatn-archive-posts a{ display:block; text-decoration:none; border:1px solid var(--edge); border-left:3px solid var(--accent-dim);
border-radius:11px; padding:13px 15px; background:rgba(0,0,0,.25); transition:transform .15s, border-color .15s, box-shadow .15s; }
.iatn-archive-posts a:hover{ transform:translateX(3px); border-left-color:var(--accent); box-shadow:0 8px 22px -14px #000; }
.iatn-archive-posts .ap-title{ display:block; color:var(--text); font-weight:600; font-size:15px; }
.iatn-archive-posts .ap-meta{ display:block; color:var(--c-data); font-size:11.5px; margin-top:3px; }
.iatn-archive-posts .ap-sum{ display:block; color:var(--text-dim); font-size:12.5px; margin-top:6px; line-height:1.5; }
.iatn-archive-filterbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; color:var(--text); margin-bottom:12px; }
.iatn-seemore{ margin-top:14px; }
.iatn-seemore a{ color:var(--accent); text-decoration:none; font-weight:600; }
.iatn-seemore a:hover{ text-shadow:0 0 10px var(--accent-glow); }
/* ============================================================
============ MOBILE: hambúrguer + polimento geral ========
============================================================ */
.term-burger{ display:none; }
@media (max-width:960px){
/* topbar compacto: marca à esquerda, idioma + hambúrguer à direita */
.term-topbar-inner{ gap:10px; padding:10px 14px; position:relative; align-items:center; }
.term-brand{ order:0; flex:1 1 auto; min-width:0; }
.term-brand .iatn-logo{ font-size:16px; }
.term-meta{ order:1; gap:8px; }
.term-clock{ display:none; } /* relógio some pra desafogar */
.term-lang button{ padding:4px 7px; }
.term-burger{
order:2; display:flex; flex-direction:column; justify-content:center; gap:4px;
width:42px; height:36px; padding:0 10px; cursor:pointer;
background:rgba(124,255,178,.06); border:1px solid var(--edge); border-radius:10px;
}
.term-burger span{ display:block; height:2px; width:100%; background:var(--accent); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.term-burger.active span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.term-burger.active span:nth-child(2){ opacity:0; }
.term-burger.active span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
/* nav vira painel suspenso, escondido até abrir */
.term-nav{
order:3; width:100%; flex:1 1 100%; flex-direction:column; gap:6px;
display:none; margin-top:8px; padding-top:10px; border-top:1px solid var(--edge);
}
.term-nav.open{ display:flex; animation:navDrop .18s ease; }
@keyframes navDrop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.term-nav a{
padding:13px 14px; font-size:15px; border-radius:11px;
border:1px solid var(--edge); background:rgba(124,255,178,.03); color:var(--text-dim);
}
.term-nav a.active{ background:rgba(124,255,178,.12); color:var(--accent); box-shadow:none; }
/* respiro geral e alvos de toque maiores */
main.term-main{ padding:18px 14px 40px; }
.term-shell{ padding:0 14px; }
.iatn-view-header h1{ font-size:22px; }
.iatn-btn, .iatn-btn.secondary{ padding:11px 15px; } /* dedo > mouse */
.iatn-tool-form .row{ flex-direction:column; }
.iatn-tool-form .field{ width:100%; }
.iatn-tool-form input, .iatn-tool-form select, .iatn-tool-form textarea{ font-size:16px; } /* evita zoom do iOS */
/* nada deve transbordar a largura da tela */
pre, code, table, .iatn-json-pane, .iatn-json-tree{ max-width:100%; overflow-x:auto; }
.iatn-view-section{ overflow-wrap:anywhere; }
}
/* ============ YOUTUBE: player + miniaturas ============ */
.yt-preview{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.yt-player{ flex:1 1 360px; max-width:560px; aspect-ratio:16/9; border:1px solid var(--edge); border-radius:12px; overflow:hidden; background:#000; }
.yt-player iframe{ width:100%; height:100%; border:0; display:block; }
.yt-info{ flex:1 1 220px; min-width:0; }
.yt-title{ color:var(--text); font-weight:700; font-size:16px; line-height:1.35; }
.yt-author{ color:var(--c-fun); font-size:13px; margin-top:4px; }
.yt-idline{ color:var(--text-dim); font-size:12px; margin-top:10px; }
.yt-open{ display:inline-block; margin-top:10px; color:var(--c-convert); text-decoration:none; font-size:13px; }
.yt-open:hover{ text-shadow:0 0 10px var(--accent-glow); }
.yt-thumbs-label{ color:var(--text-dim); font-size:12px; margin:18px 0 8px; }
.yt-thumbs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.yt-thumb{ display:block; text-decoration:none; border:1px solid var(--edge); border-radius:10px; overflow:hidden; background:#000; transition:transform .15s, border-color .15s; }
.yt-thumb:hover{ transform:translateY(-3px); border-color:var(--accent-dim); }
.yt-thumb img{ width:100%; height:auto; display:block; }
.yt-thumb span{ display:block; padding:7px 9px; font-size:11px; color:var(--text-dim); }
@media (max-width:760px){ .yt-player{ flex-basis:100%; max-width:100%; } }
/* ============================================================
==== BLOG: compartilhar · relacionados · busca · leitura =
============================================================ */
.iatn-readtime{ color:var(--c-data); }
/* botões de compartilhar */
.iatn-share-box{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:22px 0 4px; padding-top:16px; border-top:1px solid var(--edge); }
.share-label{ color:var(--text-dim); font-size:13px; margin-right:4px; }
.share-btn{ display:inline-flex; align-items:center; gap:6px; text-decoration:none; cursor:pointer;
font:inherit; font-size:13px; padding:8px 13px; border-radius:10px;
border:1px solid var(--edge); background:rgba(255,255,255,.02); color:var(--text);
transition:transform .15s, border-color .15s, background .15s, box-shadow .15s; }
.share-btn:hover{ transform:translateY(-2px); }
.share-btn.wa:hover{ border-color:#25D366; box-shadow:0 0 16px -6px #25D366; color:#25D366; }
.share-btn.tg:hover{ border-color:#2AABEE; box-shadow:0 0 16px -6px #2AABEE; color:#2AABEE; }
.share-btn.li:hover{ border-color:#0A66C2; box-shadow:0 0 16px -6px #0A66C2; color:#4596e6; }
.share-btn.ig:hover{ border-color:#E1306C; box-shadow:0 0 16px -6px #E1306C; color:#f06595; }
.share-btn.native:hover, .share-btn.copy:hover{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 16px -6px var(--accent-glow); }
/* posts relacionados */
.iatn-related{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-top:6px; }
.rel-card{ display:block; text-decoration:none; border:1px solid var(--edge); border-left:3px solid var(--c-fun);
border-radius:11px; padding:13px 15px; background:rgba(0,0,0,.25); transition:transform .15s, border-color .15s; }
.rel-card:hover{ transform:translateY(-3px); border-left-color:var(--accent); }
.rel-title{ display:block; color:var(--text); font-weight:600; font-size:14px; line-height:1.4; }
.rel-meta{ display:block; color:var(--text-dim); font-size:11.5px; margin-top:6px; }
/* busca no arquivo */
.iatn-arch-search{ margin:4px 0 12px; }
.iatn-arch-search input{ width:100%; padding:12px 15px; font:inherit; font-size:15px; border-radius:11px;
background:rgba(0,0,0,.4); color:var(--text); border:1px solid var(--edge); outline:none;
transition:border-color .15s, box-shadow .15s; }
.iatn-arch-search input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
/* ============================================================
============ TEMAS (bolinhas estilo Mac no topo) =========
============================================================ */
/* bolinhas */
.term-lights{ display:flex; gap:8px; align-items:center; margin-right:10px; }
.theme-dot{
display:inline-block !important;
flex:0 0 14px !important;
width:14px !important;
min-width:14px !important;
max-width:14px !important;
height:14px !important;
min-height:14px !important;
max-height:14px !important;
aspect-ratio:1 / 1;
padding:0 !important;
margin:0;
border:none;
border-radius:50% !important;
appearance:none;
-webkit-appearance:none;
line-height:0;
font-size:0;
cursor:pointer;
box-sizing:border-box;
box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
transition:transform .15s ease, box-shadow .15s ease;
}
.theme-dot.r{ background:#ff5f57; }
.theme-dot.y{ background:#febc2e; }
.theme-dot.g{ background:#28c840; }
.theme-dot:hover{ transform:scale(1.22); }
.theme-dot.active{ transform:scale(1.12); box-shadow:0 0 0 2px var(--bg), 0 0 0 4px rgba(255,255,255,.55), 0 0 10px rgba(255,255,255,.4); }
/* ---------- TEMA CLARO (bolinha amarela) ---------- */
html[data-theme="claro"]{
--bg:#eef1ee; --bg-soft:#e4eae5; --surface:#ffffff; --edge:#d3ddd6; --edge-2:#c0cfc5;
--text:#16241c; --text-dim:#4d6358; --muted:#728578;
--accent:#0b8f53; --accent-dim:#4fa37c; --accent-glow:rgba(11,143,83,.20);
--fg:#16241c; --border:#d3ddd6;
--c-edit:#7c3aed; --c-security:#1d6fd6; --c-organize:#c2691c; --c-optimize:#1f9d57;
--c-convert:#b07d09; --c-data:#0d8f86; --c-fun:#db2777; --danger:#dc2626;
}
/* títulos dos cards da home: legíveis no tema claro (não dependem do fallback escuro) */
html[data-theme="claro"] .hm-feat-title,
html[data-theme="claro"] .hm-card-title,
html[data-theme="claro"] .hm-mini-title{ color:#16241c !important; }
html[data-theme="claro"] .hm-feat-main:hover .hm-feat-title,
html[data-theme="claro"] .hm-card:hover .hm-card-title,
html[data-theme="claro"] .hm-feat-mini:hover .hm-mini-title{ color:#0b8f53 !important; }
html[data-theme="claro"] body.iatn{ background:#eef1ee; color:var(--text); text-shadow:none; }
html[data-theme="claro"] .term-topbar{ background:rgba(255,255,255,.86); border-bottom-color:var(--edge); }
html[data-theme="claro"] a:hover{ color:#fff; }
html[data-theme="claro"] input, html[data-theme="claro"] textarea, html[data-theme="claro"] select{ background:#fff !important; color:var(--text) !important; }
html[data-theme="claro"] .iatn-json-pane, html[data-theme="claro"] .iatn-json-tree,
html[data-theme="claro"] .ia-out{ background:#fff; color:var(--text); }
html[data-theme="claro"] .iatn-archive-posts a, html[data-theme="claro"] .rel-card,
html[data-theme="claro"] .iatn-home-card, html[data-theme="claro"] .iatn-quick-item,
html[data-theme="claro"] .iatn-tools-list a, html[data-theme="claro"] .iatn-games-list a{ background:#fff; }
/* ---------- TEMA NEON (bolinha vermelha) ---------- */
html[data-theme="neon"]{
--bg:#060011; --bg-soft:#0c0420; --surface:#120630; --edge:#2a1556; --edge-2:#3d2178;
--text:#eafff5; --text-dim:#a89bdb; --muted:#7e6fb8;
--accent:#39ff14; --accent-dim:#1fa30c; --accent-glow:rgba(57,255,20,.45);
--c-edit:#c4a6ff; --c-security:#5cc0ff; --c-organize:#ff9d5c; --c-optimize:#5cff7a;
--c-convert:#ffe14b; --c-data:#3df0e0; --c-fun:#ff5cc8; --danger:#ff3b6b;
}
html[data-theme="neon"] body.iatn{ background:radial-gradient(120% 80% at 50% 0%, #11052a 0%, #060011 60%); color:var(--text); text-shadow:0 0 8px rgba(57,255,20,.5); }
html[data-theme="neon"] .term-topbar{ background:rgba(8,2,24,.85); }
html[data-theme="neon"] .iatn-logo.glow{ filter:drop-shadow(0 0 8px rgba(57,255,20,.6)); }
/* ============ NAV DESKTOP: tudo numa linha (sem quebra) ============ */
@media (min-width:961px){
.term-topbar-inner{ gap:10px; flex-wrap:nowrap; }
.term-nav{ flex-wrap:nowrap; white-space:nowrap; gap:1px; flex:1 1 auto; min-width:0; overflow:hidden; justify-content:flex-start; }
.term-nav a{ padding:5px 8px; font-size:12px; letter-spacing:0; flex:0 0 auto; }
.term-meta{ flex:0 0 auto; flex-shrink:0; gap:8px; }
.term-brand{ flex-shrink:0; }
.term-lights{ flex-shrink:0; }
}
/* em desktop mais estreito, o relógio sai para o menu caber numa linha */
@media (min-width:961px) and (max-width:1040px){ .term-clock{ display:none; } }
/* o festivo só aparece quando há espaço de sobra (tela larga) */
@media (max-width:1280px){ .term-festive{ display:none !important; } }
/* abaixo de 960px o nav vira menu suspenso; festivo fica oculto */
@media (max-width:960px){ .term-festive{ display:none !important; } }
/* ============ COMPARTILHAR — identidade visual por app ============ */
.iatn-share-box{ display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin:24px 0 4px; padding-top:18px; border-top:1px solid var(--edge); }
.share-grid{ display:flex; flex-wrap:wrap; gap:16px; }
.share-ico{ display:flex; flex-direction:column; align-items:center; gap:7px; text-decoration:none;
cursor:pointer; background:none; border:none; padding:0; font:inherit; --b:var(--accent); }
.share-ico .si-badge{ width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
border:1.5px solid var(--b); color:var(--b);
background:color-mix(in srgb, var(--b) 12%, transparent);
transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease; }
.share-ico .si-badge svg{ width:23px; height:23px; }
.share-ico .si-cap{ font-size:11px; color:var(--text-dim); transition:color .15s ease; letter-spacing:.2px; }
.share-ico:hover .si-badge{ background:var(--b); color:#fff; transform:translateY(-4px) scale(1.07); box-shadow:0 10px 22px -6px var(--b); }
.share-ico:hover .si-cap{ color:var(--text); }
.share-ico:active .si-badge{ transform:translateY(-1px) scale(1.02); }
/* cores de marca */
.share-ico.wa{ --b:#25D366; }
.share-ico.tg{ --b:#29A9EA; }
.share-ico.li{ --b:#0A66C2; }
.share-ico.ig{ --b:#E1306C; }
.share-ico.native{ --b:var(--accent); }
.share-ico.copy{ --b:var(--c-data); }
/* Instagram com o degradê característico no hover */
.share-ico.ig:hover .si-badge{
background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
border-color:transparent; color:#fff; box-shadow:0 10px 22px -6px #d62976;
}
/* ============ AJUDA DAS FERRAMENTAS (bloco recolhível) ============ */
.iatn-help{ margin:0 0 20px; border:1px solid var(--edge); border-radius:12px;
background:color-mix(in srgb, var(--c-edit) 6%, transparent); overflow:hidden; }
.iatn-help > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
padding:12px 15px; font-size:13.5px; color:var(--text); user-select:none; }
.iatn-help > summary::-webkit-details-marker{ display:none; }
.iatn-help > summary:hover{ background:color-mix(in srgb, var(--c-edit) 12%, transparent); }
.iatn-help > summary::after{ content:"\25B8"; margin-left:auto; color:var(--c-edit); transition:transform .2s ease; }
.iatn-help[open] > summary::after{ transform:rotate(90deg); }
.iatn-help[open] > summary{ border-bottom:1px solid var(--edge); }
.iatn-help .help-q{ display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px;
border-radius:50%; background:var(--c-edit); color:#fff; font-weight:700; font-size:13px; flex-shrink:0; }
.iatn-help-body{ padding:8px 18px 16px; font-size:14px; line-height:1.7; color:var(--text-dim); }
.iatn-help-body h4{ color:var(--c-edit); font-size:12px; text-transform:uppercase; letter-spacing:.6px; margin:16px 0 4px; }
.iatn-help-body h4:first-child{ margin-top:8px; }
.iatn-help-body p{ margin:4px 0; }
.iatn-help-body ul{ margin:4px 0; padding-left:20px; }
.iatn-help-body li{ margin:3px 0; }
.iatn-help-body strong{ color:var(--text); }
.iatn-help-body em{ color:var(--c-data); font-style:normal; }
/* ════════════════════════════════════════════════════════════════
POLIMENTO MOBILE — refinamentos consolidados (header, home, post, jogos)
Colocado ao final para ter prioridade e ficar organizado num só lugar.
════════════════════════════════════════════════════════════════ */
/* ---- TABLET e abaixo (≤768px) ---- */
@media (max-width:768px){
/* respiro geral do conteúdo */
.term-main{ padding:16px 0 48px; }
.term-shell{ padding:0 15px; }
/* HOME: hero mais enxuto */
.hm-hero{ padding:22px 4px 16px !important; }
.hm-hero-tag{ font-size:13.5px !important; }
.hm-search{ padding:11px 13px !important; }
#iatn-search-input{ font-size:16px !important; } /* 16px evita zoom automático no iOS */
/* HOME: seções e títulos */
.hm-section{ padding:0 15px 6px !important; }
.hm-sec-head{ margin:26px 0 14px !important; }
.hm-sec-title{ font-size:18px !important; }
/* LEITURA DE POST: tipografia confortável no celular */
.post-body{ font-size:16px !important; line-height:1.7 !important; }
.post-body h2{ font-size:19px !important; margin:26px 0 12px !important; }
.post-body h3{ font-size:16px !important; }
/* remove os prefixos ##/### no mobile: ocupam espaço e poluem em tela estreita */
.post-body h2::before, .post-body h3::before, .post-body h4::before{ content:'' !important; }
.iatn-post-hero{ border-radius:10px; margin-bottom:16px; }
.post-body img{ max-width:100%; height:auto; border-radius:8px; }
/* imagens inseridas com float/largura% no editor: viram largura total no celular */
.post-body img[style*="float"]{ float:none !important; width:100% !important; max-width:100% !important; margin:16px 0 !important; }
/* tabelas (ex.: cheats do Forza) não estouram a tela: rolam na horizontal */
.post-body table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; font-size:13px; }
}
/* ---- SMARTPHONE (≤560px) ---- */
@media (max-width:560px){
/* HEADER: marca e idiomas equilibrados, alvos de toque maiores */
.term-topbar-inner{ padding:9px 13px !important; gap:8px !important; }
.term-brand .iatn-logo{ font-size:15px !important; }
.term-lights{ gap:6px !important; margin-right:4px !important; }
.term-lights span{ width:11px !important; height:11px !important; }
.term-lang button{ padding:5px 7px !important; min-height:30px; }
.term-burger{ width:40px !important; height:34px !important; }
/* HOME: cards do feed em coluna, imagem no topo */
.hm-feat-main{ border-radius:14px; }
.hm-feat-body{ padding:16px 16px 18px !important; }
.hm-feat-title{ font-size:19px !important; }
.hm-feat-mini{ flex-direction:row !important; }
.hm-card-title{ font-size:16px !important; }
/* explorar: chips em 3 colunas continua bom; títulos menores */
.hm-explore-col{ padding:14px !important; }
/* LEITURA: respiro lateral e citações */
.post-body blockquote{ margin:18px 0; padding:10px 14px; }
/* trailers/vídeos do YouTube sempre 16:9 sem estourar */
.iatn-trailer{ max-width:100% !important; }
}
/* ---- JOGOS no mobile ---- */
@media (max-width:560px){
/* canvas dos jogos nunca passam da largura da tela (reforço ao inline) */
.iatn-game canvas, .ar-screen canvas, canvas{ max-width:100% !important; height:auto !important; }
.iatn-game{ max-width:100%; overflow:hidden; }
/* grade de seleção de jogos: 2 por linha para alvos de toque maiores */
.iatn-quick-grid{ grid-template-columns:repeat(2,1fr) !important; }
/* controles on-screen (d-pad e botões) com área de toque confortável */
.ar-pad button, .ar-dpad button, .brk-pad button, .sdk-pad button{ min-width:44px; min-height:44px; font-size:16px; }
/* memória: 4 colunas continua, mas com gap menor pra caber */
.iatn-game-grid.memory{ gap:6px !important; }
}
/* ---- evita zoom automático do iOS em qualquer input/textarea ---- */
@media (max-width:768px){
input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], textarea, select{
font-size:16px !important;
}
}
/* ════════════════════════════════════════════════════════════════
FIX HOME: cards são e pegavam o "a:hover{background:accent}"
global (linha ~28), virando verde e sumindo o texto. Aqui anulamos
isso para os cards da home, mantendo só o efeito de elevação.
════════════════════════════════════════════════════════════════ */
.hm-feat-main:hover, .hm-feat-mini:hover, .hm-card:hover,
a.hm-feat-main:hover, a.hm-feat-mini:hover, a.hm-card:hover {
background: rgba(124,255,178,0.025) !important;
color: inherit !important;
text-shadow: none !important;
}
/* texto sempre legível, inclusive no hover */
.hm-feat-title, .hm-feat-sum, .hm-mini-title, .hm-mini-sum,
.hm-card-title, .hm-card-sum, .hm-feat-meta, .hm-mini-meta, .hm-card-meta { background: transparent !important; }
.hm-feat-main:hover .hm-feat-sum, .hm-card:hover .hm-card-sum,
.hm-feat-mini:hover .hm-mini-sum { color: var(--muted) !important; }
/* ============================================================
LOGO EM IMAGEM (nova marca) — glow adaptativo por tema
Adicionado de forma aditiva; não altera estilos anteriores.
============================================================ */
.iatn-logo-img{
height:38px;
width:auto;
display:block;
/* glow padrão (tema tradicional/verde) */
filter:drop-shadow(0 0 6px rgba(124,255,178,.55)) drop-shadow(0 0 16px rgba(124,255,178,.28));
transition:filter .25s ease;
}
.term-brand:hover .iatn-logo-img{
filter:drop-shadow(0 0 8px rgba(124,255,178,.8)) drop-shadow(0 0 22px rgba(124,255,178,.4));
}
/* a animação de pulso suave já existe (.iatn-logo.glow); a imagem herda dela */
/* TEMA NEON: glow verde-limão mais intenso */
html[data-theme="neon"] .iatn-logo-img{
filter:drop-shadow(0 0 7px rgba(57,255,20,.6)) drop-shadow(0 0 18px rgba(57,255,20,.35));
}
html[data-theme="neon"] .term-brand:hover .iatn-logo-img{
filter:drop-shadow(0 0 10px rgba(57,255,20,.85)) drop-shadow(0 0 26px rgba(57,255,20,.5));
}
/* TEMA CLARO: a logo neon foi feita pra fundo escuro, então no claro
reduzimos o glow (que some no branco) e damos leve contraste pra ela não sumir */
html[data-theme="claro"] .iatn-logo-img{
filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) drop-shadow(0 0 10px rgba(11,143,83,.25));
}
html[data-theme="claro"] .term-brand:hover .iatn-logo-img{
filter:drop-shadow(0 1px 3px rgba(0,0,0,.4)) drop-shadow(0 0 14px rgba(11,143,83,.4));
}
/* responsivo: logo menor no mobile */
@media(max-width:720px){
.iatn-logo-img{ height:30px; }
}
@media(max-width:480px){
.iatn-logo-img{ height:26px; }
}
/* ============================================================
ÍCONES MODERNOS v2 — coloridos, preenchidos, com glow + animação
Redesenho sênior: cada categoria ganha gradiente próprio,
profundidade (sombra interna), brilho no SVG e, no hover,
glow forte da cor + animação de escala/movimento.
============================================================ */
/* a peça base do ícone vira um "chip" colorido com gradiente e profundidade */
.iatn-ico{
position:relative;
background:linear-gradient(145deg, rgba(124,255,178,.22), rgba(124,255,178,.06));
border:1px solid rgba(124,255,178,.35);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
inset 0 -2px 6px rgba(0,0,0,.18),
0 2px 8px -3px rgba(0,0,0,.4);
overflow:visible;
transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
/* brilho diagonal sutil que percorre o topo do ícone (efeito vidro) */
.iatn-ico::before{
content:'';
position:absolute; inset:0;
border-radius:inherit;
background:linear-gradient(140deg, rgba(255,255,255,.18) 0%, transparent 42%);
pointer-events:none;
opacity:.8;
}
/* o traço do SVG ganha um leve brilho na cor da categoria */
.iatn-ico svg{
position:relative; z-index:1;
filter:drop-shadow(0 0 3px rgba(124,255,178,.45));
transition:filter .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1);
}
/* halo de glow que aparece atrás do ícone no hover (camada extra) */
.iatn-ico::after{
content:'';
position:absolute; inset:-4px;
border-radius:inherit;
background:radial-gradient(circle at 50% 50%, rgba(124,255,178,.55), transparent 70%);
opacity:0; z-index:-1;
transition:opacity .25s ease;
pointer-events:none;
filter:blur(8px);
}
/* ---------- estado HOVER: glow forte + animação ---------- */
/* funciona tanto passando o mouse no card/link pai quanto direto no ícone */
.iatn-tools-list a:hover .iatn-ico,
.iatn-games-list a:hover .iatn-ico,
.iatn-quick-item:hover .iatn-ico,
.hm-chip:hover .iatn-ico,
.cta-pill:hover .iatn-ico,
.iatn-ico:hover{
transform:translateY(-3px) scale(1.12) rotate(-4deg);
border-color:rgba(124,255,178,.7);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.2),
0 0 18px rgba(124,255,178,.55),
0 0 34px rgba(124,255,178,.3),
0 8px 20px -6px rgba(0,0,0,.5);
}
.iatn-tools-list a:hover .iatn-ico svg,
.iatn-games-list a:hover .iatn-ico svg,
.iatn-quick-item:hover .iatn-ico svg,
.hm-chip:hover .iatn-ico svg,
.cta-pill:hover .iatn-ico svg,
.iatn-ico:hover svg{
filter:drop-shadow(0 0 6px rgba(124,255,178,.9));
transform:scale(1.06);
}
.iatn-tools-list a:hover .iatn-ico::after,
.iatn-games-list a:hover .iatn-ico::after,
.iatn-quick-item:hover .iatn-ico::after,
.hm-chip:hover .iatn-ico::after,
.cta-pill:hover .iatn-ico::after,
.iatn-ico:hover::after{ opacity:.85; }
/* ---------- cada CATEGORIA com seu gradiente e glow próprios ---------- */
/* EDIT (roxo) */
.iatn-ico.cat-edit{ background:linear-gradient(145deg, rgba(167,139,250,.3), rgba(167,139,250,.08)); border-color:rgba(167,139,250,.42); }
.iatn-ico.cat-edit svg{ filter:drop-shadow(0 0 3px rgba(167,139,250,.5)); }
.iatn-ico.cat-edit::after{ background:radial-gradient(circle at 50% 50%, rgba(167,139,250,.6), transparent 70%); }
.iatn-tools-list a:hover .iatn-ico.cat-edit, .iatn-games-list a:hover .iatn-ico.cat-edit, .iatn-quick-item:hover .iatn-ico.cat-edit, .hm-chip:hover .iatn-ico.cat-edit, .iatn-ico.cat-edit:hover{ border-color:rgba(167,139,250,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(167,139,250,.6), 0 0 34px rgba(167,139,250,.32), 0 8px 20px -6px rgba(0,0,0,.5); }
.iatn-tools-list a:hover .iatn-ico.cat-edit svg, .iatn-games-list a:hover .iatn-ico.cat-edit svg, .iatn-quick-item:hover .iatn-ico.cat-edit svg, .hm-chip:hover .iatn-ico.cat-edit svg, .iatn-ico.cat-edit:hover svg{ filter:drop-shadow(0 0 6px rgba(167,139,250,.95)); }
/* SECURITY (azul) */
.iatn-ico.cat-security{ background:linear-gradient(145deg, rgba(91,168,245,.3), rgba(91,168,245,.08)); border-color:rgba(91,168,245,.42); }
.iatn-ico.cat-security svg{ filter:drop-shadow(0 0 3px rgba(91,168,245,.5)); }
.iatn-ico.cat-security::after{ background:radial-gradient(circle at 50% 50%, rgba(91,168,245,.6), transparent 70%); }
.iatn-tools-list a:hover .iatn-ico.cat-security, .iatn-games-list a:hover .iatn-ico.cat-security, .iatn-quick-item:hover .iatn-ico.cat-security, .hm-chip:hover .iatn-ico.cat-security, .iatn-ico.cat-security:hover{ border-color:rgba(91,168,245,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(91,168,245,.6), 0 0 34px rgba(91,168,245,.32), 0 8px 20px -6px rgba(0,0,0,.5); }
.iatn-tools-list a:hover .iatn-ico.cat-security svg, .iatn-games-list a:hover .iatn-ico.cat-security svg, .iatn-quick-item:hover .iatn-ico.cat-security svg, .hm-chip:hover .iatn-ico.cat-security svg, .iatn-ico.cat-security:hover svg{ filter:drop-shadow(0 0 6px rgba(91,168,245,.95)); }
/* ORGANIZE (laranja) */
.iatn-ico.cat-organize{ background:linear-gradient(145deg, rgba(242,147,92,.3), rgba(242,147,92,.08)); border-color:rgba(242,147,92,.42); }
.iatn-ico.cat-organize svg{ filter:drop-shadow(0 0 3px rgba(242,147,92,.5)); }
.iatn-ico.cat-organize::after{ background:radial-gradient(circle at 50% 50%, rgba(242,147,92,.6), transparent 70%); }
.iatn-tools-list a:hover .iatn-ico.cat-organize, .iatn-games-list a:hover .iatn-ico.cat-organize, .iatn-quick-item:hover .iatn-ico.cat-organize, .hm-chip:hover .iatn-ico.cat-organize, .iatn-ico.cat-organize:hover{ border-color:rgba(242,147,92,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(242,147,92,.6), 0 0 34px rgba(242,147,92,.32), 0 8px 20px -6px rgba(0,0,0,.5); }
.iatn-tools-list a:hover .iatn-ico.cat-organize svg, .iatn-games-list a:hover .iatn-ico.cat-organize svg, .iatn-quick-item:hover .iatn-ico.cat-organize svg, .hm-chip:hover .iatn-ico.cat-organize svg, .iatn-ico.cat-organize:hover svg{ filter:drop-shadow(0 0 6px rgba(242,147,92,.95)); }
/* OPTIMIZE (verde) */
.iatn-ico.cat-optimize{ background:linear-gradient(145deg, rgba(86,211,100,.3), rgba(86,211,100,.08)); border-color:rgba(86,211,100,.42); }
.iatn-ico.cat-optimize svg{ filter:drop-shadow(0 0 3px rgba(86,211,100,.5)); }
.iatn-ico.cat-optimize::after{ background:radial-gradient(circle at 50% 50%, rgba(86,211,100,.6), transparent 70%); }
.iatn-tools-list a:hover .iatn-ico.cat-optimize, .iatn-games-list a:hover .iatn-ico.cat-optimize, .iatn-quick-item:hover .iatn-ico.cat-optimize, .hm-chip:hover .iatn-ico.cat-optimize, .iatn-ico.cat-optimize:hover{ border-color:rgba(86,211,100,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(86,211,100,.6), 0 0 34px rgba(86,211,100,.32), 0 8px 20px -6px rgba(0,0,0,.5); }
.iatn-tools-list a:hover .iatn-ico.cat-optimize svg, .iatn-games-list a:hover .iatn-ico.cat-optimize svg, .iatn-quick-item:hover .iatn-ico.cat-optimize svg, .hm-chip:hover .iatn-ico.cat-optimize svg, .iatn-ico.cat-optimize:hover svg{ filter:drop-shadow(0 0 6px rgba(86,211,100,.95)); }
/* CONVERT (amarelo) */
.iatn-ico.cat-convert{ background:linear-gradient(145deg, rgba(245,200,75,.3), rgba(245,200,75,.08)); border-color:rgba(245,200,75,.42); }
.iatn-ico.cat-convert svg{ filter:drop-shadow(0 0 3px rgba(245,200,75,.5)); }
.iatn-ico.cat-convert::after{ background:radial-gradient(circle at 50% 50%, rgba(245,200,75,.6), transparent 70%); }
.iatn-tools-list a:hover .iatn-ico.cat-convert, .iatn-games-list a:hover .iatn-ico.cat-convert, .iatn-quick-item:hover .iatn-ico.cat-convert, .hm-chip:hover .iatn-ico.cat-convert, .iatn-ico.cat-convert:hover{ border-color:rgba(245,200,75,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(245,200,75,.6), 0 0 34px rgba(245,200,75,.32), 0 8px 20px -6px rgba(0,0,0,.5); }
.iatn-tools-list a:hover .iatn-ico.cat-convert svg, .iatn-games-list a:hover .iatn-ico.cat-convert svg, .iatn-quick-item:hover .iatn-ico.cat-convert svg, .hm-chip:hover .iatn-ico.cat-convert svg, .iatn-ico.cat-convert:hover svg{ filter:drop-shadow(0 0 6px rgba(245,200,75,.95)); }
/* DATA (teal) */
.iatn-ico.cat-data{ background:linear-gradient(145deg, rgba(94,234,212,.3), rgba(94,234,212,.08)); border-color:rgba(94,234,212,.42); }
.iatn-ico.cat-data svg{ filter:drop-shadow(0 0 3px rgba(94,234,212,.5)); }
.iatn-ico.cat-data::after{ background:radial-gradient(circle at 50% 50%, rgba(94,234,212,.6), transparent 70%); }
.iatn-tools-list a:hover .iatn-ico.cat-data, .iatn-games-list a:hover .iatn-ico.cat-data, .iatn-quick-item:hover .iatn-ico.cat-data, .hm-chip:hover .iatn-ico.cat-data, .iatn-ico.cat-data:hover{ border-color:rgba(94,234,212,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(94,234,212,.6), 0 0 34px rgba(94,234,212,.32), 0 8px 20px -6px rgba(0,0,0,.5); }
.iatn-tools-list a:hover .iatn-ico.cat-data svg, .iatn-games-list a:hover .iatn-ico.cat-data svg, .iatn-quick-item:hover .iatn-ico.cat-data svg, .hm-chip:hover .iatn-ico.cat-data svg, .iatn-ico.cat-data:hover svg{ filter:drop-shadow(0 0 6px rgba(94,234,212,.95)); }
/* FUN (rosa) */
.iatn-ico.cat-fun{ background:linear-gradient(145deg, rgba(244,114,182,.3), rgba(244,114,182,.08)); border-color:rgba(244,114,182,.42); }
.iatn-ico.cat-fun svg{ filter:drop-shadow(0 0 3px rgba(244,114,182,.5)); }
.iatn-ico.cat-fun::after{ background:radial-gradient(circle at 50% 50%, rgba(244,114,182,.6), transparent 70%); }
.iatn-tools-list a:hover .iatn-ico.cat-fun, .iatn-games-list a:hover .iatn-ico.cat-fun, .iatn-quick-item:hover .iatn-ico.cat-fun, .hm-chip:hover .iatn-ico.cat-fun, .iatn-ico.cat-fun:hover{ border-color:rgba(244,114,182,.8); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 18px rgba(244,114,182,.6), 0 0 34px rgba(244,114,182,.32), 0 8px 20px -6px rgba(0,0,0,.5); }
.iatn-tools-list a:hover .iatn-ico.cat-fun svg, .iatn-games-list a:hover .iatn-ico.cat-fun svg, .iatn-quick-item:hover .iatn-ico.cat-fun svg, .hm-chip:hover .iatn-ico.cat-fun svg, .iatn-ico.cat-fun:hover svg{ filter:drop-shadow(0 0 6px rgba(244,114,182,.95)); }
/* respeita quem prefere menos animação (acessibilidade) */
@media (prefers-reduced-motion: reduce){
.iatn-ico, .iatn-ico svg{ transition:box-shadow .2s ease, border-color .2s ease; }
.iatn-tools-list a:hover .iatn-ico, .iatn-games-list a:hover .iatn-ico, .iatn-quick-item:hover .iatn-ico, .hm-chip:hover .iatn-ico, .iatn-ico:hover{ transform:none; }
}
/* ===== PROCESSAMENTO EM LOTE (iatnBatch) ===== */
.iatn-batch { margin-top: 8px; }
.iatn-batch-note {
font-size: 12px; color: var(--text-dim, #8b8fa3);
margin: 10px 0; line-height: 1.5;
}
.iatn-batch-list {
margin: 14px 0; border: 1px solid var(--edge, #2c2f44);
border-radius: 12px; background: var(--surface-2, #13141c); overflow: hidden;
}
.iatn-batch-head {
padding: 10px 14px; font-family: 'JetBrains Mono', monospace;
font-size: 12px; color: var(--accent, #7CFFB2);
border-bottom: 1px solid var(--edge, #2c2f44); font-weight: 700;
}
.iatn-batch-files { max-height: 240px; overflow-y: auto; }
.iatn-batch-file {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
padding: 7px 14px; font-size: 12px;
border-bottom: 1px solid rgba(44,47,68,.4);
}
.iatn-batch-file:last-child { border-bottom: none; }
.iatn-batch-file .bf-name {
color: var(--text, #e8e9f3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.iatn-batch-file .bf-size { color: var(--text-dim, #8b8fa3); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.iatn-batch-bar {
height: 8px; border-radius: 5px; overflow: hidden;
background: var(--edge, #2c2f44); margin: 12px 0 8px;
}
.iatn-batch-bar-fill {
height: 100%; width: 0%;
background: linear-gradient(90deg, var(--accent, #7CFFB2), var(--c-edit, #A78BFA));
border-radius: 5px; transition: width .2s ease;
box-shadow: 0 0 12px rgba(124,255,178,.5);
}
.iatn-batch-status {
font-size: 12px; color: var(--text-dim, #8b8fa3);
font-family: 'JetBrains Mono', monospace; min-height: 16px; margin-bottom: 8px;
}
/* ===== BOTÃO VOLTAR (pílula com glow + seta animada) ===== */
.iatn-back-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 24px;
border: 1px solid var(--accent-dim);
background: rgba(124,255,178,0.05);
color: var(--accent) !important;
text-decoration: none !important;
font-family: 'JetBrains Mono', monospace;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.4px;
text-transform: uppercase;
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.iatn-back-btn .bk-arrow {
display: inline-block;
transition: transform .2s ease;
font-size: 15px;
}
.iatn-back-btn:hover {
background: rgba(124,255,178,0.12);
border-color: var(--accent);
box-shadow: 0 0 18px rgba(124,255,178,0.4), 0 4px 14px -6px rgba(0,0,0,.5);
transform: translateY(-2px);
}
.iatn-back-btn:hover .bk-arrow { transform: translateX(-5px); }
.iatn-back-btn:active { transform: translateY(0); }
/* tema claro: glow mais sutil pra não estourar no fundo branco */
[data-theme="claro"] .iatn-back-btn {
background: rgba(15,110,86,0.06);
}
[data-theme="claro"] .iatn-back-btn:hover {
box-shadow: 0 0 14px rgba(15,110,86,0.28), 0 4px 14px -6px rgba(0,0,0,.2);
}
/* ===== JUNTAR PLANILHAS: cartões de modo ===== */
.xm-modes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.xm-mode {
flex: 1; min-width: 220px;
display: flex; flex-direction: column; gap: 4px;
padding: 14px 16px; border-radius: 12px;
border: 1px solid var(--edge, #2c2f44);
background: var(--surface, #1a1d2a);
cursor: pointer;
transition: border-color .2s, box-shadow .2s, background .2s;
}
.xm-mode:hover { border-color: var(--accent-dim); }
.xm-mode.on {
border-color: var(--accent, #7CFFB2);
box-shadow: 0 0 16px -4px var(--accent-glow, rgba(124,255,178,.5));
background: rgba(124,255,178,0.04);
}
.xm-mode .xm-mode-t {
font-family: 'JetBrains Mono', monospace;
font-weight: 700; font-size: 14px;
color: var(--text, #e8e9f3);
}
.xm-mode.on .xm-mode-t { color: var(--accent, #7CFFB2); }
.xm-mode .xm-mode-d { font-size: 12px; color: var(--text-dim, #8b8fa3); line-height: 1.45; }
/* ===== CAIXA DE AJUDA DOS JOGOS (objetivo + controles) ===== */
.iatn-game-help {
max-width: 640px;
margin: 0 auto 14px;
border: 1px solid var(--edge, #2c2f44);
border-radius: 12px;
background: rgba(124,255,178,0.03);
overflow: hidden;
}
.iatn-game-help .igh-toggle {
width: 100%;
display: flex; align-items: center; justify-content: center; gap: 8px;
background: none; border: none; cursor: pointer;
color: var(--accent, #7CFFB2);
font-family: 'JetBrains Mono', monospace;
font-size: 13px; font-weight: 700; letter-spacing: .5px;
padding: 10px 14px;
text-transform: uppercase;
}
.iatn-game-help .igh-arrow { transition: transform .2s ease; font-size: 11px; }
.iatn-game-help.open .igh-arrow { transform: rotate(180deg); }
.iatn-game-help .igh-body {
max-height: 0; overflow: hidden;
transition: max-height .25s ease, padding .25s ease;
padding: 0 16px;
}
.iatn-game-help.open .igh-body { max-height: 240px; padding: 0 16px 14px; }
.iatn-game-help .igh-body p {
margin: 8px 0 0; font-size: 13px; line-height: 1.55;
color: var(--text-dim, #b9bdcc);
}
.iatn-game-help .igh-body strong { color: var(--accent, #7CFFB2); }
/* ===== CAIXA DE AJUDA DAS FERRAMENTAS (uma frase explicando o uso) ===== */
.iatn-tool-help {
display: flex; align-items: flex-start; gap: 12px;
margin: 0 0 20px;
padding: 13px 16px;
border-radius: 12px;
border: 1px solid var(--edge, #2c2f44);
border-left: 3px solid var(--accent, #7CFFB2);
background: rgba(124,255,178,0.04);
}
.iatn-tool-help .ith-icon {
flex: 0 0 auto;
width: 22px; height: 22px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: var(--accent, #7CFFB2);
color: #0e0f17;
font-weight: 800; font-size: 14px;
font-family: 'JetBrains Mono', monospace;
}
.iatn-tool-help p {
margin: 1px 0 0;
font-size: 13.5px; line-height: 1.55;
color: var(--text-dim, #b9bdcc);
}
/* ==========================================================================
Botão de compra / afiliado (.iatn-buy) — IATechNerds
Usa as variáveis de tema do site, então se adapta sozinho a neon/claro/padrão.
Uso no post:
🛒Texto →
========================================================================== */
.iatn-buy{
position:relative;
display:inline-block;
overflow:hidden;
font-family:'JetBrains Mono','Courier New',monospace;
font-weight:800;
font-size:16px;
line-height:1.2;
color:var(--text) !important;
text-decoration:none;
letter-spacing:.4px;
padding:15px 32px;
border-radius:12px;
background:color-mix(in srgb, var(--accent) 14%, var(--bg));
border:2px solid var(--accent);
transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
animation:iatnBuyPulse 2.6s ease-in-out infinite;
}
.iatn-buy .ic{ color:var(--accent); margin-right:8px; }
.iatn-buy .arrow{ display:inline-block; transition:transform .18s ease; color:var(--accent); }
.iatn-buy:hover{
transform:translateY(-3px);
background:color-mix(in srgb, var(--accent) 26%, var(--bg));
box-shadow:0 8px 26px var(--accent-glow);
animation-play-state:paused;
}
.iatn-buy:hover .arrow{ transform:translateX(5px); }
.iatn-buy:active{ transform:translateY(-1px) scale(.98); }
/* brilho que atravessa no hover */
.iatn-buy::before{
content:'';
position:absolute;
top:0; left:-120%;
width:70%; height:100%;
background:linear-gradient(120deg, transparent, var(--accent-glow), transparent);
transform:skewX(-20deg);
}
.iatn-buy:hover::before{ animation:iatnBuyShine .85s ease; }
@keyframes iatnBuyShine{ to{ left:130%; } }
@keyframes iatnBuyPulse{
0%,100%{ box-shadow:0 0 0 rgba(0,0,0,0); }
50%{ box-shadow:0 0 18px var(--accent-glow); }
}
/* tema claro: sombra suave pra destacar sobre o fundo branco */
[data-theme="claro"] .iatn-buy{ box-shadow:0 3px 12px var(--accent-glow); }
/* navegadores sem color-mix: cai num fundo escuro seguro, ainda legível */
@supports not (background:color-mix(in srgb, red 10%, blue)){
.iatn-buy{ background:var(--surface); }
.iatn-buy:hover{ background:var(--edge); }
}
/* acessibilidade: menos movimento pra quem pediu */
@media (prefers-reduced-motion:reduce){
.iatn-buy{ animation:none; }
.iatn-buy::before{ display:none; }
}
/* ============================================================
FASE 2 — descoberta, leitura e conexão entre conteúdo e ferramentas
============================================================ */
.hm-quick-links{
display:flex; justify-content:center; flex-wrap:wrap; gap:8px;
margin:11px auto 0; max-width:720px;
}
.hm-quick-links a{
display:inline-flex; align-items:center; min-height:34px; padding:6px 11px;
border:1px solid var(--edge); border-radius:999px; background:rgba(124,255,178,.035);
color:var(--text-dim); font-size:11.5px; text-decoration:none; text-shadow:none;
}
.hm-quick-links a:hover{
color:var(--accent); border-color:var(--accent-dim); background:rgba(124,255,178,.08);
}
/* Artigos ficam mais estreitos que as áreas de ferramentas para melhorar a leitura. */
.iatn-post-body,
.iatn-post-toc,
.iatn-tool-cta{
width:100%; max-width:800px; margin-left:auto; margin-right:auto;
}
.iatn-post-body{
font-size:16.5px; line-height:1.82; color:var(--text); opacity:1; text-shadow:none;
}
.iatn-post-body p,
.iatn-post-body li{ color:var(--text); text-shadow:none; }
.iatn-post-body strong,
.iatn-post-body b{ color:var(--accent); text-shadow:none; }
.iatn-post-body h2{ margin-top:2.15em; line-height:1.3; }
.iatn-post-body h3{ margin-top:1.75em; line-height:1.35; }
.iatn-post-body p{ margin-bottom:1.25em; }
.iatn-post-toc{
margin-top:18px; margin-bottom:26px; border:1px solid var(--edge);
border-radius:14px; background:color-mix(in srgb, var(--surface) 78%, transparent); overflow:hidden;
}
.toc-toggle{
width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px;
padding:13px 16px; border:0; background:rgba(124,255,178,.045); color:var(--accent);
font:700 12px 'JetBrains Mono',monospace; letter-spacing:.6px; text-transform:uppercase; cursor:pointer;
}
.toc-arrow{ transition:transform .18s ease; }
.iatn-post-toc.collapsed .toc-arrow{ transform:rotate(-90deg); }
.toc-list{ margin:0; padding:12px 18px 14px 38px; columns:2; column-gap:28px; }
.toc-list li{ break-inside:avoid; margin:0 0 8px; color:var(--text-dim); font-size:12.5px; line-height:1.45; }
.toc-list .toc-h3{ margin-left:12px; font-size:11.5px; }
.toc-list a{ color:var(--text-dim); text-decoration:none; }
.toc-list a:hover{ color:var(--accent); background:transparent; }
.iatn-post-toc.collapsed .toc-list{ display:none; }
#iatn-reading-progress{
position:fixed; z-index:120; top:0; left:0; right:0; height:3px;
pointer-events:none; background:transparent;
}
#iatn-reading-progress span{
display:block; width:0; height:100%; background:linear-gradient(90deg,var(--accent),var(--c-data));
box-shadow:0 0 10px var(--accent-glow); transition:width .08s linear;
}
.iatn-tool-cta{
display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 20px; align-items:center;
margin-top:30px; margin-bottom:28px; padding:18px 20px;
border:1px solid var(--accent-dim); border-radius:15px;
background:linear-gradient(135deg,rgba(124,255,178,.075),rgba(94,234,212,.035));
}
.tool-cta-kicker{
grid-column:1/-1; color:var(--accent-dim); font-size:10.5px; text-transform:uppercase; letter-spacing:1px;
}
.tool-cta-copy{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.tool-cta-copy strong{ color:var(--text); font-size:16px; }
.tool-cta-copy span{ color:var(--text-dim); font-size:12.5px; line-height:1.5; }
.iatn-tool-cta > a{
display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 15px;
border:1px solid var(--accent); border-radius:999px; color:var(--accent); text-decoration:none;
font-size:12px; white-space:nowrap;
}
.iatn-tool-cta > a:hover{ color:var(--bg); background:var(--accent); text-shadow:none; }
@media (max-width:768px){
.hm-quick-links{ justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding:0 1px 5px; scrollbar-width:none; }
.hm-quick-links::-webkit-scrollbar{ display:none; }
.hm-quick-links a{ flex:0 0 auto; }
.toc-list{ columns:1; }
.iatn-tool-cta{ grid-template-columns:1fr; padding:16px; }
.iatn-tool-cta > a{ justify-self:start; }
.iatn-post-body{ font-size:16px; line-height:1.78; }
}
/* ============================================================
IATechNerds 2026 — camada visual moderna e consistente
Mantém o DNA terminal, mas dá profundidade, hierarquia e conforto.
============================================================ */
:root{
--surface-modern: rgba(5, 24, 13, .78);
--surface-modern-2: rgba(8, 34, 19, .72);
--border-modern: rgba(124,255,178,.16);
--shadow-modern: 0 18px 55px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.025);
--accent-glow-soft: 0 0 0 1px rgba(124,255,178,.08), 0 12px 40px rgba(24,175,98,.08);
}
body.iatn{
background:
radial-gradient(900px 460px at 12% -5%, rgba(36,210,121,.10), transparent 64%),
radial-gradient(700px 420px at 96% 12%, rgba(98,77,255,.07), transparent 62%),
#010704;
}
.term-menu .item{
position:relative;
border-radius:8px;
padding:5px 8px;
transition:color .18s ease, text-shadow .18s ease, background .18s ease;
}
.term-menu .item::before{
content:""; position:absolute; inset:-5px -8px; border-radius:10px;
background:radial-gradient(circle at center, rgba(124,255,178,.16), transparent 68%);
opacity:0; transform:scale(.72); transition:opacity .18s ease, transform .18s ease; pointer-events:none;
}
.term-menu .item:hover::before{opacity:1;transform:scale(1)}
.term-menu .item:hover{background:transparent;color:#c8ffdc;text-shadow:0 0 12px rgba(124,255,178,.72)}
.iatn-view-header{
position:relative;
overflow:hidden;
border:1px solid var(--border-modern);
border-radius:18px;
padding:22px 24px;
margin-bottom:20px;
background:linear-gradient(145deg, rgba(7,31,17,.90), rgba(2,13,7,.78));
box-shadow:var(--shadow-modern);
}
.iatn-view-header::after{
content:""; position:absolute; width:280px; height:180px; right:-80px; top:-90px;
background:radial-gradient(circle, rgba(124,255,178,.13), transparent 70%); pointer-events:none;
}
.iatn-view-header h1{margin-bottom:0;letter-spacing:-.035em;text-shadow:0 0 24px rgba(124,255,178,.18)}
.iatn-notice{
border:1px solid rgba(124,255,178,.17) !important;
border-left:3px solid var(--accent) !important;
border-radius:14px !important;
padding:14px 16px !important;
background:linear-gradient(90deg, rgba(124,255,178,.075), rgba(124,255,178,.018)) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
}
.iatn-view-section{
position:relative;
border:1px solid var(--border-modern);
border-radius:18px;
padding:20px;
background:linear-gradient(145deg, var(--surface-modern), rgba(2,12,7,.66));
box-shadow:var(--shadow-modern);
}
.iatn-view-section .section-label{
display:inline-flex;align-items:center;gap:8px;
margin:-7px 0 16px;
padding:5px 9px;
border-radius:999px;
background:rgba(124,255,178,.055);
border:1px solid rgba(124,255,178,.11);
letter-spacing:.07em;
}
.iatn-tool-form input[type="text"],
.iatn-tool-form input[type="url"],
.iatn-tool-form input[type="number"],
.iatn-tool-form input[type="email"],
.iatn-tool-form input[type="password"],
.iatn-tool-form input[type="date"],
.iatn-tool-form input[type="datetime-local"],
.iatn-tool-form textarea,
.iatn-tool-form select,
.iatn-json-pane{
border:1px solid rgba(124,255,178,.15) !important;
border-radius:11px !important;
background:rgba(0,8,4,.72) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.018);
transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.iatn-tool-form input:focus,
.iatn-tool-form textarea:focus,
.iatn-tool-form select:focus,
.iatn-json-pane:focus{
border-color:rgba(124,255,178,.72) !important;
box-shadow:0 0 0 3px rgba(124,255,178,.08), 0 0 22px rgba(124,255,178,.08) !important;
background:rgba(0,10,5,.92) !important;
}
.iatn-btn{
border-radius:11px !important;
min-height:40px;
padding:10px 16px !important;
background:linear-gradient(180deg, rgba(124,255,178,.13), rgba(124,255,178,.055));
box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.iatn-btn:hover{
background:var(--accent);
box-shadow:0 0 0 1px rgba(124,255,178,.2), 0 10px 30px rgba(41,205,113,.16) !important;
}
.iatn-btn.secondary{background:rgba(124,255,178,.025)}
.iatn-dropzone{
min-height:150px;
border:1px dashed rgba(124,255,178,.32) !important;
border-radius:16px !important;
background:
radial-gradient(circle at 50% 0%, rgba(124,255,178,.09), transparent 62%),
rgba(1,12,6,.52) !important;
transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}
.iatn-dropzone:hover,.iatn-dropzone.drag{
transform:translateY(-2px);
border-color:rgba(124,255,178,.78) !important;
box-shadow:0 0 0 4px rgba(124,255,178,.045), 0 18px 42px rgba(0,0,0,.22);
background:radial-gradient(circle at 50% 0%, rgba(124,255,178,.16), transparent 68%),rgba(1,12,6,.7) !important;
}
.iatn-dropzone .dz-icon{
width:44px;height:44px;display:grid;place-items:center;border-radius:14px;
background:rgba(124,255,178,.08);border:1px solid rgba(124,255,178,.18);
font-size:22px !important;box-shadow:0 0 24px rgba(124,255,178,.08);
}
.iatn-tool-card,.iatn-lib-card{
border-radius:17px !important;
background:linear-gradient(145deg, rgba(7,27,16,.88), rgba(2,13,7,.78)) !important;
box-shadow:0 12px 34px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.02);
}
.iatn-tool-card:hover,.iatn-lib-card:hover{
box-shadow:0 0 0 1px rgba(var(--libc-rgb,124,255,178),.18), 0 18px 48px rgba(0,0,0,.28), 0 0 30px rgba(var(--libc-rgb,124,255,178),.08) !important;
}
.iatn-file-item,.iatn-output,.iatn-result-box{
border-radius:12px !important;
background:rgba(0,9,4,.55) !important;
}
[data-theme="claro"] body.iatn,
body.iatn[data-theme="claro"]{
background:
radial-gradient(900px 460px at 12% -5%, rgba(20,150,84,.09), transparent 64%),
#edf5f0;
}
[data-theme="claro"] .iatn-view-header,
[data-theme="claro"] .iatn-view-section{
background:linear-gradient(145deg, rgba(255,255,255,.96), rgba(241,249,244,.94));
border-color:rgba(20,120,70,.14);
box-shadow:0 16px 44px rgba(15,60,35,.08), inset 0 1px 0 #fff;
}
[data-theme="claro"] .iatn-tool-form input,
[data-theme="claro"] .iatn-tool-form textarea,
[data-theme="claro"] .iatn-tool-form select,
[data-theme="claro"] .iatn-json-pane{
background:#fff !important;
color:#17251e !important;
border-color:rgba(20,120,70,.18) !important;
}
[data-theme="claro"] .iatn-dropzone{background:rgba(255,255,255,.72) !important}
[data-theme="claro"] .iatn-tool-card,
[data-theme="claro"] .iatn-lib-card{background:linear-gradient(145deg,#fff,#f3faf6) !important}
@media (max-width:720px){
.iatn-view-header{padding:18px 16px;border-radius:15px}
.iatn-view-section{padding:16px;border-radius:15px}
.iatn-dropzone{min-height:132px}
}
/* ============================================================
Cabeçalhos internos 2.1 — hierarquia editorial unificada
Ferramentas, jogos, arquivo, biblioteca e páginas utilitárias.
============================================================ */
.iatn-view-header{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:18px 24px;
isolation:isolate;
min-height:168px;
margin:0 0 24px;
padding:26px 30px 28px;
border:1px solid rgba(139,157,198,.18);
border-radius:18px;
background:
radial-gradient(520px 220px at 100% 0%, rgba(79,226,186,.09), transparent 66%),
radial-gradient(420px 210px at 66% 120%, rgba(120,92,255,.10), transparent 72%),
linear-gradient(135deg, rgba(14,25,48,.96), rgba(8,15,31,.96));
box-shadow:
0 22px 60px rgba(0,0,0,.26),
inset 0 1px 0 rgba(255,255,255,.035);
}
.iatn-view-header::before{
content:"";
position:absolute;
z-index:2;
right:28px;
bottom:-1px;
left:28px;
height:2px;
border-radius:999px;
background:linear-gradient(90deg, #55edb9 0%, #55edb9 28%, #765cff 68%, transparent 100%);
opacity:.88;
pointer-events:none;
}
.iatn-view-header::after{
content:"";
position:absolute;
z-index:-1;
width:300px;
height:240px;
right:-96px;
top:-120px;
background:radial-gradient(circle, rgba(85,237,185,.13), transparent 69%);
pointer-events:none;
}
.iatn-view-header .left{
display:inline-flex;
align-items:center;
gap:10px;
width:max-content;
max-width:100%;
min-width:0;
color:#91a0bd;
font-size:11px;
font-weight:700;
line-height:1.35;
letter-spacing:.11em;
text-transform:uppercase;
text-shadow:none;
}
.iatn-view-header .left::before{
content:"";
width:24px;
height:2px;
flex:0 0 24px;
border-radius:999px;
background:linear-gradient(90deg,#55edb9,#765cff);
box-shadow:0 0 14px rgba(85,237,185,.25);
}
.iatn-view-header .left .vh-section{
color:#aeb9cf;
}
.iatn-view-header .left .vh-context{
display:inline-flex;
align-items:center;
gap:8px;
color:#68e9be;
}
.iatn-view-header .left .vh-context::before{
content:"/";
color:#4f5d79;
font-weight:400;
}
.iatn-view-header .right{
justify-self:end;
color:#8e9bb4;
font-size:11px;
line-height:1.3;
letter-spacing:.045em;
text-shadow:none;
}
.iatn-view-header .right a{
min-height:42px;
padding:8px 15px;
border-color:rgba(85,237,185,.55);
border-radius:13px;
background:rgba(85,237,185,.055);
color:#63ebbe !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.iatn-view-header .right a:hover{
border-color:#63ebbe;
background:rgba(85,237,185,.11);
box-shadow:0 0 0 3px rgba(85,237,185,.055), 0 10px 30px rgba(0,0,0,.18);
}
.iatn-view-header h1{
grid-column:1 / -1;
margin:0;
color:#f3f6fb;
font-size:clamp(34px,4.6vw,54px);
font-weight:850;
line-height:1.03;
letter-spacing:-.055em;
overflow-wrap:anywhere;
text-shadow:0 8px 30px rgba(0,0,0,.22);
}
.iatn-view-header h1 .prompt{
display:inline-block;
margin-right:.12em;
color:#58edba;
font-weight:500;
text-shadow:0 0 24px rgba(85,237,185,.22);
}
[data-theme="claro"] .iatn-view-header{
border-color:rgba(28,89,68,.14);
background:
radial-gradient(520px 220px at 100% 0%, rgba(19,161,113,.08), transparent 66%),
radial-gradient(420px 210px at 66% 120%, rgba(111,82,224,.065), transparent 72%),
linear-gradient(135deg, rgba(255,255,255,.98), rgba(243,248,246,.98));
box-shadow:0 20px 54px rgba(20,62,46,.10), inset 0 1px 0 #fff;
}
[data-theme="claro"] .iatn-view-header h1{
color:#15241e;
text-shadow:none;
}
[data-theme="claro"] .iatn-view-header .left{
color:#627369;
}
[data-theme="claro"] .iatn-view-header .left .vh-section{
color:#53675d;
}
[data-theme="claro"] .iatn-view-header .left .vh-context{
color:#0b8f63;
}
[data-theme="claro"] .iatn-view-header .right{
color:#66766e;
}
@media (max-width:720px){
.iatn-view-header{
gap:14px 12px;
min-height:148px;
padding:21px 20px 24px;
border-radius:16px;
}
.iatn-view-header::before{
right:20px;
left:20px;
}
.iatn-view-header h1{
font-size:clamp(30px,9vw,42px);
letter-spacing:-.045em;
}
}
@media (max-width:520px){
.iatn-view-header{
grid-template-columns:1fr;
}
.iatn-view-header .right{
grid-row:3;
justify-self:start;
}
.iatn-view-header h1{
grid-row:2;
}
}
@media (prefers-reduced-motion:reduce){
.iatn-view-header .right a{
transition:none;
}
}
/* ============================================================
Biblioteca 2.2 — coleção editorial em formato de livros
============================================================ */
.iatn-library-intro{
position:relative;
overflow:hidden;
margin:0 0 30px;
padding:30px 32px;
border:1px solid rgba(124,255,178,.16);
border-radius:20px;
background:
radial-gradient(540px 230px at 100% 0,rgba(94,231,165,.10),transparent 68%),
linear-gradient(145deg,rgba(8,26,17,.88),rgba(5,14,10,.84));
}
.iatn-library-intro::after{
content:"";
position:absolute;
right:-44px;
bottom:-84px;
width:230px;
height:230px;
border:38px solid rgba(124,255,178,.035);
border-radius:50%;
}
.library-kicker,.book-hero-kicker{
display:block;
color:var(--accent);
font-size:10px;
font-weight:800;
letter-spacing:.18em;
}
.iatn-library-intro h2{
max-width:760px;
margin:10px 0 9px;
color:var(--text);
font-family:var(--font-sans);
font-size:clamp(25px,3.4vw,42px);
line-height:1.08;
letter-spacing:-.045em;
}
.iatn-library-intro>p{
max-width:760px;
margin:0;
color:var(--text-dim);
font-family:var(--font-sans);
font-size:14px;
line-height:1.75;
}
.library-proof{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:20px;
}
.library-proof span{
padding:6px 11px;
border:1px solid rgba(124,255,178,.16);
border-radius:999px;
background:rgba(124,255,178,.045);
color:#a9c9b7;
font-size:10px;
font-weight:700;
letter-spacing:.04em;
}
.iatn-book-shelf{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:18px;
align-items:stretch;
margin:0 0 28px;
}
.iatn-book-card{
display:flex;
min-width:0;
flex-direction:column;
padding:16px;
border:1px solid rgba(var(--book-rgb),.19);
border-radius:19px;
background:
radial-gradient(320px 190px at 50% 0,rgba(var(--book-rgb),.08),transparent 72%),
linear-gradient(155deg,rgba(10,22,16,.94),rgba(3,11,7,.92));
color:var(--text);
text-decoration:none;
box-shadow:0 18px 44px rgba(0,0,0,.22);
transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}
.iatn-book-card:hover{
transform:translateY(-7px);
border-color:rgba(var(--book-rgb),.5);
background:
radial-gradient(340px 210px at 50% 0,rgba(var(--book-rgb),.13),transparent 72%),
linear-gradient(155deg,rgba(10,22,16,.98),rgba(3,11,7,.96));
box-shadow:0 28px 64px rgba(0,0,0,.34),0 0 34px rgba(var(--book-rgb),.08);
}
.iatn-book-cover{
position:relative;
isolation:isolate;
width:100%;
aspect-ratio:3 / 4.15;
padding-left:16px;
perspective:1100px;
}
.book-spine{
position:absolute;
z-index:3;
inset:0 auto 0 0;
width:27px;
display:flex;
align-items:center;
justify-content:space-between;
padding:12px 5px;
border-radius:6px 0 0 6px;
background:linear-gradient(90deg,rgba(0,0,0,.5),var(--book-color) 70%,rgba(255,255,255,.14));
box-shadow:inset -1px 0 rgba(255,255,255,.2),-5px 8px 14px rgba(0,0,0,.25);
writing-mode:vertical-rl;
transform:rotate(180deg);
color:#03130b;
}
.book-spine b{
font-family:var(--font-sans);
font-size:11px;
letter-spacing:.18em;
}
.book-spine small{
font-size:7px;
font-weight:900;
letter-spacing:.12em;
}
.book-cover-face{
position:relative;
overflow:hidden;
height:100%;
display:flex;
flex-direction:column;
justify-content:space-between;
padding:18px 17px 15px 21px;
border:1px solid rgba(var(--book-rgb),.65);
border-left:0;
border-radius:0 8px 8px 0;
background:
linear-gradient(160deg,rgba(var(--book-rgb),.22),transparent 38%),
repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 7px),
linear-gradient(145deg,#0d2419,#07110c 72%);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.025),
inset -8px 0 18px rgba(0,0,0,.22),
12px 14px 22px rgba(0,0,0,.34);
transform:rotateY(-2deg);
transform-origin:left center;
}
.book-cover-face::before{
content:"";
position:absolute;
width:170px;
height:170px;
right:-76px;
top:58px;
border:24px solid rgba(var(--book-rgb),.09);
border-radius:50%;
box-shadow:0 0 0 18px rgba(var(--book-rgb),.025);
}
.book-cover-face::after{
content:"";
position:absolute;
right:0;
bottom:0;
left:0;
height:3px;
background:linear-gradient(90deg,var(--book-color),transparent);
}
.book-cover-top,.book-cover-foot{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
color:rgba(235,255,245,.66);
font-size:7px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
}
.book-cover-top b{
color:var(--book-color);
}
.book-cover-mark{
position:relative;
z-index:1;
width:58px;
height:58px;
display:grid;
place-items:center;
align-self:flex-end;
margin-top:10px;
border:1px solid rgba(var(--book-rgb),.46);
border-radius:16px;
background:rgba(var(--book-rgb),.09);
color:var(--book-color);
font-family:var(--font-sans);
font-size:17px;
font-weight:900;
letter-spacing:-.04em;
box-shadow:0 0 26px rgba(var(--book-rgb),.1);
}
.book-cover-title{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
gap:8px;
margin-top:auto;
padding-bottom:16px;
}
.book-cover-title strong{
color:#f5fff9;
font-family:var(--font-sans);
font-size:clamp(21px,2vw,31px);
font-weight:850;
line-height:.96;
letter-spacing:-.065em;
}
.book-cover-title span{
max-width:92%;
color:rgba(226,243,233,.64);
font-family:var(--font-sans);
font-size:9px;
line-height:1.45;
}
.book-card-info{
display:flex;
flex:1;
flex-direction:column;
padding:18px 2px 2px;
}
.book-card-label{
color:var(--book-color);
font-size:9px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
}
.book-card-label span{opacity:.45}
.book-card-info p{
margin:9px 0 18px;
color:var(--text-dim);
font-family:var(--font-sans);
font-size:12px;
line-height:1.58;
}
.book-open{
display:flex;
align-items:center;
justify-content:space-between;
margin-top:auto;
padding-top:12px;
border-top:1px solid rgba(var(--book-rgb),.15);
color:#dff8e8;
font-size:10px;
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
}
.book-open b{
color:var(--book-color);
font-size:16px;
transition:transform .2s ease;
}
.iatn-book-card:hover .book-open b{transform:translateX(4px)}
.iatn-library-method{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
overflow:hidden;
margin-bottom:28px;
border:1px solid var(--edge);
border-radius:17px;
background:var(--edge);
}
.iatn-library-method>div{
display:flex;
gap:12px;
min-height:96px;
padding:20px;
background:rgba(4,16,10,.96);
}
.iatn-library-method b{
color:var(--accent-dim);
font-size:11px;
}
.iatn-library-method span{
color:var(--text-dim);
font-family:var(--font-sans);
font-size:12px;
line-height:1.55;
}
.iatn-library-method strong{
display:block;
margin-bottom:3px;
color:var(--text);
}
/* Leitor */
.iatn-reading-progress{
position:fixed;
z-index:999;
top:0;
right:0;
left:0;
height:3px;
background:transparent;
pointer-events:none;
}
.iatn-reading-progress span{
display:block;
width:0;
height:100%;
background:linear-gradient(90deg,#58edba,#765cff);
box-shadow:0 0 12px rgba(88,237,186,.45);
}
.iatn-book-hero{
display:grid;
grid-template-columns:minmax(190px,270px) minmax(0,1fr);
gap:clamp(28px,5vw,62px);
align-items:center;
margin:0 0 26px;
padding:clamp(24px,4vw,46px);
border:1px solid rgba(var(--book-rgb),.2);
border-radius:22px;
background:
radial-gradient(640px 330px at 0 0,rgba(var(--book-rgb),.11),transparent 72%),
linear-gradient(145deg,rgba(7,22,14,.94),rgba(3,12,7,.92));
box-shadow:0 22px 58px rgba(0,0,0,.24);
}
.book-hero-cover{
width:min(100%,235px);
justify-self:center;
}
.iatn-book-cover.is-compact{aspect-ratio:3/4.15}
.iatn-book-cover.is-compact .book-cover-title strong{font-size:27px}
.book-hero-copy h2{
max-width:720px;
margin:11px 0 12px;
color:var(--text);
font-family:var(--font-sans);
font-size:clamp(27px,4vw,46px);
line-height:1.05;
letter-spacing:-.05em;
}
.book-hero-copy>p{
max-width:720px;
margin:0;
color:var(--text-dim);
font-family:var(--font-sans);
font-size:14px;
line-height:1.72;
}
.book-hero-stats{
display:flex;
flex-wrap:wrap;
gap:8px;
margin:20px 0;
}
.book-hero-stats span{
display:flex;
align-items:center;
gap:5px;
padding:7px 10px;
border:1px solid rgba(var(--book-rgb),.18);
border-radius:9px;
background:rgba(var(--book-rgb),.045);
color:var(--text-dim);
font-size:10px;
}
.book-hero-stats b{color:var(--book-color)}
.book-outcomes{
padding:16px 18px;
border-left:2px solid var(--book-color);
border-radius:0 12px 12px 0;
background:rgba(var(--book-rgb),.045);
}
.book-outcomes>strong{
color:var(--text);
font-family:var(--font-sans);
font-size:12px;
}
.book-outcomes ul{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:7px 18px;
margin:10px 0 0;
padding:0;
list-style:none;
}
.book-outcomes li{
position:relative;
padding-left:16px;
color:var(--text-dim);
font-family:var(--font-sans);
font-size:11px;
line-height:1.45;
}
.book-outcomes li::before{
content:"✓";
position:absolute;
left:0;
color:var(--book-color);
font-weight:900;
}
.iatn-lib-search{
margin:0 0 16px;
padding:16px 18px;
border:1px solid var(--edge);
border-radius:15px;
background:rgba(5,16,10,.74);
}
.iatn-lib-search label{
display:block;
margin-bottom:8px;
color:var(--text-dim);
font-size:9px;
font-weight:800;
letter-spacing:.11em;
text-transform:uppercase;
}
.iatn-lib-search input{
min-height:46px;
padding:11px 14px;
border:1px solid rgba(124,255,178,.2);
border-radius:11px;
background:rgba(0,8,4,.76);
color:var(--text);
font-family:var(--font-sans);
}
.iatn-lib-search input:focus{
border-color:rgba(124,255,178,.65);
box-shadow:0 0 0 3px rgba(124,255,178,.07);
}
.iatn-lib-toc{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:8px;
margin:0 0 26px;
padding:0;
border:0;
}
.iatn-lib-toc a{
display:flex;
align-items:center;
gap:11px;
min-height:50px;
padding:10px 13px;
border:1px solid var(--edge);
border-radius:12px;
background:rgba(5,16,10,.58);
color:var(--text-dim);
font-family:var(--font-sans);
font-size:11px;
}
.iatn-lib-toc a b{
display:grid;
width:28px;
height:28px;
flex:0 0 28px;
place-items:center;
border-radius:8px;
background:rgba(124,255,178,.07);
color:var(--accent);
font-family:var(--font-mono);
font-size:9px;
}
.iatn-lib-toc a:hover{
border-color:rgba(124,255,178,.35);
background:rgba(124,255,178,.04);
color:var(--text);
text-shadow:none;
}
.iatn-book-chapters{
display:grid;
gap:18px;
}
.iatn-lib-section{
scroll-margin-top:92px;
margin:0;
padding:clamp(22px,3.4vw,38px);
border:1px solid rgba(124,255,178,.14);
border-radius:19px;
background:
radial-gradient(420px 170px at 100% 0,rgba(124,255,178,.035),transparent 72%),
linear-gradient(145deg,rgba(5,17,10,.92),rgba(2,10,6,.88));
box-shadow:0 14px 38px rgba(0,0,0,.17);
}
.lesson-heading{
margin:0 0 22px;
padding-bottom:18px;
border-bottom:1px solid var(--edge);
}
.lesson-heading>span{
display:block;
margin-bottom:7px;
color:var(--accent-dim);
font-size:9px;
font-weight:900;
letter-spacing:.16em;
}
.iatn-lib-section .lesson-heading h2{
margin:0;
color:var(--text);
font-family:var(--font-sans);
font-size:clamp(23px,3.2vw,34px);
line-height:1.08;
letter-spacing:-.04em;
text-shadow:none;
}
.iatn-lib-section p,
.iatn-lib-section li{
color:#b7c4bb;
font-family:var(--font-sans);
font-size:13px;
line-height:1.72;
}
.iatn-lib-section>p:first-of-type{
color:#d3ddd6;
font-size:14px;
}
.iatn-lib-section h3{
margin:0 0 6px;
color:var(--text);
font-family:var(--font-sans);
font-size:12px;
letter-spacing:0;
text-transform:none;
}
.iatn-lib-section h3::before{display:none}
.iatn-lib-section code{
border-color:rgba(124,255,178,.14);
border-radius:5px;
background:rgba(124,255,178,.065);
}
.iatn-lib-section pre{
margin:16px 0;
padding:17px 18px;
border:1px solid rgba(124,255,178,.2);
border-left:3px solid var(--accent);
border-radius:12px;
background:#010704;
line-height:1.62;
box-shadow:inset 0 1px rgba(255,255,255,.018);
}
.iatn-lib-section pre code{padding-right:92px}
.iatn-lib-section table{
overflow:hidden;
margin:16px 0;
border-collapse:separate;
border-spacing:0;
border:1px solid var(--edge);
border-radius:12px;
font-family:var(--font-sans);
}
.iatn-lib-section th,.iatn-lib-section td{
padding:10px 12px;
border-width:0 0 1px 1px;
}
.iatn-lib-section th:first-child,.iatn-lib-section td:first-child{border-left:0}
.iatn-lib-section tr:last-child td{border-bottom:0}
.iatn-lib-section th{
background:rgba(124,255,178,.055);
color:#d5eee0;
font-size:10px;
text-transform:uppercase;
}
.iatn-lib-section td{
color:#aebbb2;
font-size:12px;
line-height:1.5;
}
.iatn-lesson-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
margin:16px 0;
}
.iatn-lesson-grid>div{
padding:15px;
border:1px solid var(--edge);
border-radius:12px;
background:rgba(124,255,178,.025);
}
.iatn-lesson-grid p{
margin:0;
font-size:11.5px;
line-height:1.58;
}
.iatn-callout,.iatn-practice{
margin:16px 0 0;
padding:14px 16px;
border-radius:11px;
font-family:var(--font-sans);
font-size:12px;
line-height:1.65;
}
.iatn-callout{
border:1px solid rgba(255,190,78,.22);
background:rgba(255,190,78,.055);
color:#d5c6a6;
}
.iatn-callout strong{color:#ffc565}
.iatn-practice{
border:1px solid rgba(118,92,255,.24);
background:rgba(118,92,255,.07);
color:#c9c2e4;
}
.iatn-practice strong{color:#a995ff}
.iatn-steps{
margin:16px 0;
padding:0;
list-style:none;
counter-reset:lesson-step;
}
.iatn-steps li{
position:relative;
min-height:36px;
margin:0;
padding:7px 0 7px 44px;
counter-increment:lesson-step;
}
.iatn-steps li::before{
content:counter(lesson-step,decimal-leading-zero);
position:absolute;
left:0;
top:5px;
width:30px;
height:30px;
display:grid;
place-items:center;
border:1px solid var(--edge);
border-radius:8px;
background:rgba(124,255,178,.05);
color:var(--accent);
font-family:var(--font-mono);
font-size:9px;
}
.lib-copy{
top:10px;
right:10px;
border-radius:7px;
background:rgba(4,18,10,.92);
}
.iatn-lib-empty{
margin-top:18px;
border-radius:14px;
font-family:var(--font-sans);
}
.iatn-book-finish{
margin:22px 0 0;
padding:34px;
border:1px solid rgba(118,92,255,.24);
border-radius:19px;
background:
radial-gradient(440px 220px at 100% 0,rgba(118,92,255,.12),transparent 72%),
linear-gradient(145deg,rgba(12,14,31,.9),rgba(4,10,12,.9));
text-align:center;
}
.iatn-book-finish>span{
color:#a995ff;
font-size:9px;
font-weight:900;
letter-spacing:.17em;
}
.iatn-book-finish h2{
margin:9px 0;
color:var(--text);
font-family:var(--font-sans);
font-size:clamp(23px,3vw,34px);
letter-spacing:-.04em;
}
.iatn-book-finish p{
max-width:680px;
margin:0 auto 18px;
color:var(--text-dim);
font-family:var(--font-sans);
font-size:12px;
line-height:1.65;
}
.iatn-book-finish a{
display:inline-flex;
padding:10px 14px;
border:1px solid rgba(124,255,178,.3);
border-radius:10px;
background:rgba(124,255,178,.055);
color:var(--accent);
font-size:10px;
font-weight:800;
letter-spacing:.06em;
text-decoration:none;
text-transform:uppercase;
}
/* Tema claro */
[data-theme="claro"] .iatn-library-intro,
[data-theme="claro"] .iatn-book-card,
[data-theme="claro"] .iatn-book-hero,
[data-theme="claro"] .iatn-lib-section,
[data-theme="claro"] .iatn-library-method>div{
background:linear-gradient(145deg,#fff,#f1f8f4);
}
[data-theme="claro"] .iatn-library-intro h2,
[data-theme="claro"] .book-hero-copy h2,
[data-theme="claro"] .iatn-lib-section .lesson-heading h2,
[data-theme="claro"] .iatn-lib-section h3,
[data-theme="claro"] .iatn-book-finish h2,
[data-theme="claro"] .iatn-library-method strong{
color:#17251e;
}
[data-theme="claro"] .iatn-library-intro>p,
[data-theme="claro"] .book-card-info p,
[data-theme="claro"] .book-hero-copy>p,
[data-theme="claro"] .iatn-lib-section p,
[data-theme="claro"] .iatn-lib-section li,
[data-theme="claro"] .iatn-library-method span{
color:#53665b;
}
[data-theme="claro"] .iatn-lib-search{background:#fff}
[data-theme="claro"] .iatn-lib-search input{background:#f7fbf9;color:#17251e}
[data-theme="claro"] .iatn-lib-toc a{background:#fff;color:#53665b}
[data-theme="claro"] .iatn-lib-section pre{background:#07110c}
[data-theme="claro"] .book-open{color:#234b36}
@media (max-width:1050px){
.iatn-book-shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
.iatn-book-cover{max-height:420px}
.iatn-library-method{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
.iatn-book-hero{grid-template-columns:1fr}
.book-hero-cover{width:210px}
.book-outcomes ul{grid-template-columns:1fr}
.iatn-lib-toc{grid-template-columns:1fr}
.iatn-lesson-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
.iatn-library-intro{padding:23px 20px}
.iatn-book-shelf{grid-template-columns:1fr}
.iatn-book-card{display:grid;grid-template-columns:138px minmax(0,1fr);gap:13px;padding:13px}
.iatn-book-cover{height:190px;aspect-ratio:auto}
.book-cover-face{padding:12px 10px 10px 16px}
.book-cover-title strong{font-size:18px}
.book-cover-title span,.book-cover-foot{font-size:6.5px}
.book-cover-mark{width:40px;height:40px;border-radius:11px;font-size:12px}
.book-card-info{padding:3px 0}
.book-card-info p{font-size:11px}
.iatn-library-method{grid-template-columns:1fr}
.iatn-library-method>div{min-height:auto}
.iatn-book-hero{padding:24px 18px}
.iatn-lib-section{padding:22px 17px}
.iatn-lib-section table{display:block;overflow-x:auto}
.iatn-lib-section pre code{padding-right:0}
.lib-copy{position:sticky;float:right;opacity:1}
}
@media (prefers-reduced-motion:reduce){
.iatn-book-card,.book-open b{transition:none}
.iatn-book-card:hover{transform:none}
}
/* Camada editorial: autoria, revisão, figuras e fontes */
.iatn-byline{
display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;
margin:-6px 0 18px;padding:12px 14px;border:1px solid var(--edge);
border-radius:10px;background:rgba(124,255,178,.035);
color:var(--text-dim);font-size:12px;line-height:1.5;
}
.iatn-byline strong{color:var(--text);font-weight:700}
.iatn-post-cover{margin:4px 0 24px}
.iatn-post-cover .iatn-post-hero,.iatn-post-cover>img{margin:0;width:100%;height:auto;max-height:none;aspect-ratio:16/9;object-fit:cover}
.iatn-post-cover figcaption,.iatn-article-figure figcaption{
margin-top:8px;color:var(--text-dim);font-size:11px;line-height:1.5;text-align:center
}
.iatn-editorial-note{
display:grid;gap:5px;margin:0 0 26px;padding:14px 16px;
border-left:3px solid var(--purple,#7c5cff);background:rgba(124,92,255,.07);
color:var(--text-dim);font-size:12px;line-height:1.55;
}
.iatn-editorial-note strong{color:var(--text);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.iatn-article-figure{
margin:28px 0;padding:14px;border:1px solid var(--edge);border-radius:12px;
background:linear-gradient(145deg,rgba(124,92,255,.06),rgba(124,255,178,.035));
}
.iatn-article-figure svg{display:block;width:100%;height:auto;max-height:520px}
.iatn-article-figure .fig-bg{fill:#07110c;stroke:rgba(124,255,178,.2);stroke-width:2}
.iatn-article-figure .fig-card rect{fill:#121927;stroke:rgba(124,92,255,.55);stroke-width:2}
.iatn-article-figure .fig-card text,.iatn-article-figure .fig-head,.iatn-article-figure .fig-axis{fill:#e8e9f3;font-family:"JetBrains Mono",monospace;font-size:15px;text-anchor:middle}
.iatn-article-figure .fig-card text+text{fill:#9aa4b2;font-size:12px}
.iatn-article-figure .fig-head{fill:#7cffb2;font-size:17px;font-weight:700}
.iatn-article-figure .fig-axis{fill:#9aa4b2;font-size:12px}
.iatn-article-figure .fig-muted{fill:#9aa4b2;font-family:"JetBrains Mono",monospace;font-size:12px;text-anchor:middle}
.iatn-article-figure .fig-arrow path,.iatn-article-figure .fig-line{fill:none;stroke:#7c5cff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.iatn-article-figure .fig-ok{fill:#22c55e}.iatn-article-figure .fig-warn{fill:#f5b50a}.iatn-article-figure .fig-bad{fill:#ff5f57}
.iatn-article-table{width:100%;border-collapse:collapse;margin:22px 0;font-size:13px}
.iatn-article-table th,.iatn-article-table td{padding:10px 12px;border:1px solid var(--edge);text-align:left;vertical-align:top}
.iatn-article-table th{background:rgba(124,92,255,.1);color:var(--text);font-weight:700}
.iatn-sources{padding:16px 18px 16px 36px!important;border:1px solid var(--edge);border-radius:10px;background:rgba(124,255,178,.035)}
.iatn-sources a{overflow-wrap:anywhere}
.iatn-institutional{max-width:820px;margin-inline:auto}
.iatn-institutional h2{margin-top:2em;color:var(--accent);font-size:20px}
.iatn-institutional p{color:var(--text);line-height:1.8}
@media(max-width:680px){
.iatn-byline{align-items:flex-start;flex-direction:column;gap:5px}
.iatn-article-figure{margin:22px -4px;padding:8px}
.iatn-article-table{display:block;overflow-x:auto;white-space:normal}
}