/* ==========================================
   TemanQRIS public pages, v3 design system
   Cream paper, ink #2E2E48, orange #FF8C42 with ink text,
   2px ink borders, hard offset shadows, folder tabs.
   Loaded by public pages instead of style.min.css; the
   dashboard and admin keep style.css untouched.
   ========================================== */

.v3{--paper:#FFFAF0;--light:#F8F6F0;--ink:#2E2E48;--ink-2:#444444;--ink-3:#555555;--rule:rgba(46,46,72,.16);--orange:#FF8C42;--logo:#FF6B35;--butter:#FFD93D;--yellow:#E6A800;--mint:#2DBF9A;--sky:#3D9AD9;--blush:#E5527D;--purple:#8B7FD6;--sh:4px 4px 0 var(--ink);--sh-lg:6px 6px 0 var(--ink);
background:var(--paper);color:var(--ink);font-family:Nunito,system-ui,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;position:relative}
.v3 *{box-sizing:border-box}
.v3 ::selection{background:var(--butter)}
.v3 a{color:inherit;text-decoration:none}
.v3 :focus-visible{outline:2.5px solid var(--orange);outline-offset:3px}
.v3 h1,.v3 h2,.v3 h3,.v3 p{margin:0}
.v3 .frame{max-width:1240px;margin:0 auto;border-left:1px solid var(--rule);border-right:1px solid var(--rule);position:relative}
.v3 .cross{position:absolute;width:13px;height:13px;pointer-events:none}
.v3 .cross::before,.v3 .cross::after{content:"";position:absolute;background:var(--ink)}
.v3 .cross::before{left:6px;top:0;width:1px;height:13px}
.v3 .cross::after{top:6px;left:0;height:1px;width:13px}
.v3 .rule-b{border-bottom:1px solid var(--rule)}
.v3 .disp{font-family:Nunito,sans-serif;font-weight:900;letter-spacing:-0.03em;line-height:1}
.v3 .h2{font-family:Nunito,sans-serif;font-weight:900;font-size:46px;letter-spacing:-0.025em;line-height:1.08}
.v3 .h3{font-family:Nunito,sans-serif;font-weight:800;font-size:22px;letter-spacing:-0.01em;line-height:1.2}
.v3 .mono{font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums}
.v3 .muted{color:var(--ink-3)}
.v3 .box{background:#fff;border:2px solid var(--ink);border-radius:16px;box-shadow:var(--sh)}
.v3 .box-lg{box-shadow:var(--sh-lg)}
.v3 .tab{position:absolute;top:-30px;height:30px;padding:0 12px;display:inline-flex;align-items:center;border:2px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;font:700 12.5px 'JetBrains Mono',monospace;letter-spacing:.01em}
.v3 .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 24px;border:2px solid var(--ink);border-radius:50px;font:800 15.5px Nunito,sans-serif;letter-spacing:0;color:var(--ink);cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .14s cubic-bezier(.2,.8,.2,1),box-shadow .14s cubic-bezier(.2,.8,.2,1);white-space:nowrap}
.v3 .btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.v3 .btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.v3 .btn svg{width:16px;height:16px}
.v3 .b-orange{background:var(--orange)}
.v3 .b-white{background:#fff}
.v3 .b-butter{background:var(--butter)}
.v3 .b-ink{background:var(--ink);color:#fff;box-shadow:4px 4px 0 var(--orange)}
.v3 .b-orange{color:var(--ink)}
.v3 .b-ink:hover{box-shadow:5px 5px 0 var(--orange)}
.v3 .sticker{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:2px solid var(--ink);border-radius:50px;box-shadow:4px 4px 0 var(--ink);font:800 14px Nunito,sans-serif;background:#fff;white-space:nowrap}
.v3 .navcell{display:flex;align-items:center;height:64px;padding:0 20px;border-right:1px solid var(--rule);font:500 15px Nunito,sans-serif;color:var(--ink-2)}
.v3 .navcell:hover{background:#fff;color:var(--ink)}
.v3 .on{color:var(--ink);background:#fff;box-shadow:inset 0 -3px 0 var(--orange)}
.v3 .ledger{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid var(--ink);border-left:2px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:var(--sh-lg)}
.v3 .cell{border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:28px;display:flex;flex-direction:column;gap:14px;min-height:200px;transition:background .2s cubic-bezier(.2,.8,.2,1)}
.v3 .cell:hover{background:#fff}
.v3 .ico{width:48px;height:48px;border:2px solid var(--ink);border-radius:12px;display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink)}
.v3 .ico svg{width:22px;height:22px}
.v3 .ftab{height:46px;padding:0 22px;border:2px solid var(--ink);border-bottom:0;border-radius:12px 12px 0 0;font:800 15px Nunito,sans-serif;background:#F3ECE2;color:var(--ink-3);cursor:pointer;margin-right:-2px}
.v3 .ftab-on{background:#fff;color:var(--ink);position:relative;z-index:2;margin-bottom:-2px;height:48px}
.v3 .step{display:flex;gap:12px;align-items:center;padding:14px 18px;border:2px solid var(--ink);border-radius:50px;background:#fff;font:700 15px Nunito,sans-serif}
.v3 .step .n{width:28px;height:28px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font:700 12.5px 'JetBrains Mono',monospace;flex:none}
.v3 .arrow{display:grid;place-items:center;height:22px;color:var(--ink-3)}
.v3 .faq{border-top:2px solid var(--ink)}
.v3 .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 22px;font:800 17px Nunito,sans-serif}
.v3 .faq summary::-webkit-details-marker{display:none}
.v3 .faq p{padding:0 22px 20px;color:var(--ink-2);max-width:62ch}
.v3 .faq[open] summary .pm{transform:rotate(45deg)}
.v3 .pm{transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.v3 .ft a{display:block;padding:5px 0;font-size:14.5px;color:var(--ink-2)}
.v3 .ft a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@keyframes v3-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes v3-scan{0%{top:6%}50%{top:88%}100%{top:6%}}
@keyframes v3-pop{0%,62%{transform:translateY(8px) rotate(3deg);opacity:0}70%,94%{transform:translateY(0) rotate(3deg);opacity:1}100%{transform:translateY(0) rotate(3deg);opacity:0}}
.v3 .marquee{display:flex;width:max-content;animation:v3-marquee 28s linear infinite}
.v3 .scan{position:absolute;left:4%;right:4%;height:3px;background:var(--orange);box-shadow:0 0 0 1px rgba(255,107,53,.25),0 0 14px 2px rgba(255,107,53,.55);animation:v3-scan 3.2s cubic-bezier(.45,0,.55,1) infinite;border-radius:3px}
.v3 .paid{animation:v3-pop 6.4s cubic-bezier(.2,.8,.2,1) infinite}
@media (max-width:900px){
.v3 .h2{font-size:34px}
.v3 .navlinks,.v3 .hide-sm,.v3 .sticker{display:none!important}
.v3 .ledger{grid-template-columns:minmax(0,1fr)}
.v3 .col2{grid-template-columns:minmax(0,1fr)!important}
.v3 .pad-x{padding-left:16px!important;padding-right:16px!important}
.v3 .gen-l{border-right:0!important;border-bottom:2px solid var(--ink)}
}
@media (prefers-reduced-motion:reduce){.v3 .marquee,.v3 .scan,.v3 .paid{animation:none}.v3 .paid{opacity:1}.v3 *{transition:none!important}}

/* shared extras for all public pages */
.v3 .label{font:800 14px Nunito,sans-serif;color:var(--ink)}
.v3 .input{width:100%;height:54px;padding:0 16px;border:2px solid var(--ink);border-radius:14px;background:#fff;font:600 16px Nunito,sans-serif;color:var(--ink);outline:none;caret-color:var(--orange)}
.v3 .input:focus{box-shadow:3px 3px 0 var(--orange)}
.v3 .input::placeholder{color:#8A8790}
.v3 textarea.input{height:150px;padding:14px 16px;resize:vertical;line-height:1.5}
.v3 .input-err{border-color:#C2410C;box-shadow:3px 3px 0 #C2410C}
.v3 .field{display:flex;flex-direction:column;gap:8px}
.v3 .hint{font-size:13px;color:var(--ink-3)}
.v3 .err{font:700 13px Nunito,sans-serif;color:#B4360A;display:flex;gap:6px;align-items:center}
.v3 .chk-row{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink-2)}
.v3 .chk-row input{width:20px;height:20px;accent-color:var(--orange);margin:2px 0 0;flex:none}
.v3 .badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:2px solid var(--ink);border-radius:50px;font:800 12.5px Nunito,sans-serif;background:#fff}
.v3 .tbl-box{border:2px solid var(--ink);border-radius:16px;overflow:hidden;overflow-x:auto;background:#fff;box-shadow:var(--sh)}
.v3 table.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.v3 table.tbl th{text-align:left;font:800 13px Nunito,sans-serif;padding:12px 16px;background:var(--butter);border-bottom:2px solid var(--ink)}
.v3 table.tbl td{padding:13px 16px;border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:top}
.v3 table.tbl tr:last-child td{border-bottom:0}
.v3 .code{background:var(--ink);color:#F2EDE6;border:2px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--orange);padding:20px 22px;font:500 13.5px/1.75 'JetBrains Mono',monospace;white-space:pre;overflow-x:auto}
.v3 .code .c{color:#A9A6B8}.v3 .code .k{color:var(--orange)}.v3 .code .s{color:var(--butter)}.v3 .code .g{color:var(--mint)}
.v3 code.in{font:600 .88em 'JetBrains Mono',monospace;background:#fff;border:1.5px solid var(--ink);border-radius:6px;padding:1px 6px}
.v3 .toc a{display:block;padding:8px 12px;border-radius:10px;font:700 14.5px Nunito,sans-serif;color:var(--ink-2)}
.v3 .toc a:hover{background:#fff;color:var(--ink)}
.v3 .toc a.on{background:var(--butter);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.v3 .prose{font-size:17.5px;line-height:1.75;color:var(--ink-2);max-width:68ch}
.v3 .prose h2{font:900 30px/1.2 Nunito,sans-serif;letter-spacing:-0.02em;color:var(--ink);margin:44px 0 12px}
.v3 .prose h3{font:800 21px Nunito,sans-serif;color:var(--ink);margin:28px 0 8px}
.v3 .prose p{margin:0 0 18px}
.v3 .prose a{color:var(--ink);font-weight:800;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:4px}
.v3 .crumb{display:flex;gap:8px;font:700 13.5px Nunito,sans-serif;color:var(--ink-3)}
.v3 .crumb a:hover{color:var(--ink);text-decoration:underline}
.v3 .lnk{font-weight:800;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:4px}
@media (max-width:900px){.v3 .cross{display:none}.v3 .stack-sm{flex-direction:column!important;align-items:stretch!important}.v3 .tbl-box{box-shadow:3px 3px 0 var(--ink)}}

.v3{overflow-x:clip;box-sizing:border-box}


/* Legacy token aliases so inline styles written for style.css keep working
   on v3 pages (blog articles and older inline snippets). */
.v3 {
    --text-dark: var(--ink); --dark: var(--ink); --border-dark: var(--ink); --text-gray: var(--ink-2); --text-light: var(--ink-3);
    --primary-orange: #FF8C42; --primary-orange-dark: #E8732A; --primary-orange-light: #FFE3CC; --primary-yellow: var(--yellow);
    --primary-mint: var(--mint); --primary-green: var(--mint); --primary-blue: var(--sky); --primary-purple: var(--purple);
    --primary-pink: var(--purple); --primary-coral: var(--orange);
    --bg-cream: var(--paper); --bg-white: #fff; --bg-light: var(--light); --cream: var(--paper);
    --font-primary: Nunito, system-ui, sans-serif; --border-width: 2px; --shadow-offset: 4px;
    --radius-sm: 10px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 50px;
}

/* ==========================================
   Base page
   ========================================== */
html { scroll-behavior: smooth; }
body.v3 { margin: 0; min-height: 100vh; }
.v3 img, .v3 svg { max-width: 100%; }
.v3 button { font-family: inherit; }
.v3 .lnk, .v3 .prose a { color: var(--ink); }
.v3 .wrap { max-width: 1240px; margin: 0 auto; padding: 0 48px; }
.v3 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.v3 .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--butter); border: 2px solid var(--ink); border-radius: 12px; padding: 10px 16px; font-weight: 800; }
.v3 .skip-link:focus { left: 16px; }
.v3 ::-webkit-scrollbar { width: 12px; height: 12px; }
.v3 ::-webkit-scrollbar-thumb { background: #CFC8BB; border: 3px solid var(--paper); border-radius: 12px; }

/* ==========================================
   Public header
   ========================================== */
#public-header { min-height: 104px; }
.v3-ticker { background: var(--ink); color: #FFFAF0; height: 38px; overflow: hidden; display: flex; align-items: center; font: 600 13px 'JetBrains Mono', monospace; }
.v3-ticker-track { display: flex; width: max-content; animation: v3-marquee 28s linear infinite; }
.v3-ticker-track span { display: inline-flex; align-items: center; gap: 22px; padding: 0 22px; }
.v3-ticker-track span::after { content: "\2726"; color: var(--orange); }
.v3-ticker.is-text { justify-content: center; padding: 0 16px; font: 700 13.5px Nunito, sans-serif; text-align: center; }
.v3-ticker.is-text a { color: var(--butter); text-decoration: underline; text-underline-offset: 3px; }

body .header { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 2px solid var(--ink); }
body .header .header-container { max-width: 1240px; margin: 0 auto; display: flex; align-items: stretch; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }
body .header .logo { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 24px; border-right: 1px solid var(--rule); font: 900 22px Nunito, sans-serif; letter-spacing: -0.03em; color: var(--ink); }
body .header .logo-text span { color: var(--logo); }
body .header .header-nav { display: flex; }
body .header .header-nav .nav-link { display: flex; align-items: center; height: 64px; padding: 0 20px; border-right: 1px solid var(--rule); font: 700 15px Nunito, sans-serif; color: var(--ink-2); }
body .header .header-nav .nav-link:hover { background: #fff; color: var(--ink); }
body .header .header-nav .nav-link.active { color: var(--ink); background: #fff; box-shadow: inset 0 -3px 0 var(--orange); }
body .header .header-buttons { margin-left: auto; display: flex; align-items: stretch; }
body .header .header-buttons .btn { height: 64px; min-height: 44px; padding: 0 22px; border: 0; border-left: 1px solid var(--rule); border-radius: 0; box-shadow: none; font: 800 15px Nunito, sans-serif; color: var(--ink); background: transparent; transform: none; }
body .header .header-buttons .btn:hover { background: #fff; transform: none; box-shadow: none; }
body .header .header-buttons .btn-primary { background: var(--orange); border-left: 2px solid var(--ink); }
body .header .header-buttons .btn-primary:hover { background: #FF9D5C; }
body .header .header-buttons .btn svg { width: 18px; height: 18px; }
body .header .mobile-menu-btn { display: none; width: 64px; height: 64px; border: 0; border-left: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; font-size: 24px; line-height: 1; }
body .header .menu-glyph { font-weight: 900; }
.mobile-menu-overlay { position: fixed; inset: 0; background: rgba(46, 46, 72, .45); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 60; }
.mobile-menu-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px, 86vw); background: var(--paper); border-left: 2px solid var(--ink); box-shadow: -6px 0 0 var(--ink); transform: translateX(110%); transition: transform .22s cubic-bezier(.2, .8, .2, 1); z-index: 70; display: flex; flex-direction: column; padding: 84px 16px 24px; gap: 10px; }
.mobile-menu.open { transform: translateX(0); }
.mobile-menu a { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; box-shadow: 3px 3px 0 var(--ink); font: 800 16px Nunito, sans-serif; color: var(--ink); }
.mobile-menu a.active { background: var(--butter); }
.mobile-menu a[href="/register"] { background: var(--orange); }

@media (max-width: 900px) {
    #public-header { min-height: 102px; }
    body .header .header-nav { display: none !important; }
    body .header .header-buttons { display: flex !important; }
    body .header .header-buttons .btn-secondary { display: none; }
    body .header .header-buttons .btn { height: 62px; min-height: 44px; padding: 0 16px; font-size: 14.5px; }
    body .header .logo { height: 62px; padding: 0 16px; font-size: 20px; border-right: 0; }
    body .header .mobile-menu-btn { display: grid; place-items: center; height: 62px; width: 58px; }
    body .header .header-container { border-left: 0; border-right: 0; }
}

/* ==========================================
   Public footer
   ========================================== */
.footer-new { background: #fff; border-top: 2px solid var(--ink); color: var(--ink); }
.footer-new .footer-grid { max-width: 1240px; margin: 0 auto; padding: 64px 48px 0; display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); gap: 36px; }
.footer-new .footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-new .footer-logo { display: inline-flex; align-items: center; gap: 10px; font: 900 28px Nunito, sans-serif; letter-spacing: -0.02em; color: var(--ink); }
.footer-new .footer-logo .logo-text span { color: var(--logo); }
.footer-new .footer-brand-desc { font-size: 15px; color: var(--ink-2); max-width: 42ch; margin: 0; }
.footer-new .footer-seo-toggle { background: none; border: 0; padding: 0 0 0 4px; font: 800 14px Nunito, sans-serif; color: var(--ink); cursor: pointer; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.footer-new .footer-seo-keywords { padding: 14px 16px; border: 2px dashed var(--ink); border-radius: 14px; background: var(--paper); }
.footer-new .footer-seo-keywords-text { font-size: 12.5px; line-height: 1.65; color: var(--ink-3); margin: 0 0 8px; }
.footer-new .security-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.footer-new .security-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); }
.footer-new .security-badge.neo-green { background: var(--mint); }
.footer-new .security-badge.neo-purple { background: var(--sky); }
.footer-new .security-badge.neo-blue { background: var(--butter); }
.footer-new .badge-icon { display: grid; place-items: center; }
.footer-new .badge-text { display: flex; flex-direction: column; line-height: 1.1; }
.footer-new .badge-text strong { font: 900 13px Nunito, sans-serif; }
.footer-new .badge-text span { font: 700 11.5px Nunito, sans-serif; }
.footer-new .footer-col h4 { font: 900 16px Nunito, sans-serif; margin: 0 0 10px; }
.footer-new .footer-col a { display: block; padding: 5px 0; font-size: 14.5px; color: var(--ink-2); }
.footer-new .footer-col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-new .security-disclaimer { max-width: 1144px; margin: 40px auto 0; padding: 18px 20px; border: 2px solid var(--ink); border-radius: 16px; background: #FFF4D6; box-shadow: 4px 4px 0 var(--ink); display: flex; gap: 14px; align-items: flex-start; font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.footer-new .security-disclaimer > svg { flex: none; margin-top: 2px; color: var(--ink); }
.footer-new .security-disclaimer p { margin: 0; }
.footer-new .security-disclaimer strong { color: var(--ink); }
.footer-new .footer-license { margin-top: 8px; }
.footer-new .footer-license a { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.footer-new .footer-bottom { max-width: 1144px; margin: 32px auto 0; padding: 18px 0 28px; border-top: 2px solid var(--ink); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font: 700 13.5px Nunito, sans-serif; color: var(--ink-3); }
.footer-new .footer-bottom p { margin: 0; }
.footer-new .footer-bottom a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-new .footer-heart { color: var(--orange); }

@media (max-width: 1200px) {
    .footer-new .security-disclaimer, .footer-new .footer-bottom { margin-left: 48px; margin-right: 48px; }
}
@media (max-width: 768px) {
    .footer-new .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 40px 16px 0; gap: 8px; }
    .footer-new .footer-brand { grid-column: 1 / -1; margin-bottom: 16px; }
    .footer-new .footer-col { padding: 12px 8px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); }
    .footer-new .footer-col h4 { font-size: 13px; }
    .footer-new .footer-col a { font-size: 0.72rem; padding: 4px 0; }
    .footer-new .security-disclaimer, .footer-new .footer-bottom { margin-left: 16px; margin-right: 16px; }
}

/* ==========================================
   Article pages (blog posts)
   ========================================== */
.v3 .post-main { padding: 56px 0 88px; }
.v3 .post-main > article, .v3 article.container { max-width: 880px; margin: 0 auto; padding: 0 24px; font-size: 17.5px; line-height: 1.75; color: var(--ink-2); }
.v3 article.container h1 { font: 900 clamp(34px, 4.6vw, 52px)/1.08 Nunito, sans-serif; letter-spacing: -0.025em; color: var(--ink); margin: 14px 0 18px; }
.v3 article.container h2 { font: 900 30px/1.2 Nunito, sans-serif; letter-spacing: -0.02em; color: var(--ink); margin: 44px 0 12px; }
.v3 article.container h3 { font: 800 21px/1.3 Nunito, sans-serif; color: var(--ink); margin: 28px 0 8px; }
.v3 article.container p { margin: 0 0 18px; }
.v3 article.container ul, .v3 article.container ol { margin: 0 0 18px; padding-left: 22px; }
.v3 article.container li { margin: 6px 0; }
.v3 article.container a { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.v3 article.container table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; border: 2px solid var(--ink); border-radius: 16px; overflow: hidden; box-shadow: var(--sh); display: block; overflow-x: auto; }
.v3 article.container th { text-align: left; font: 800 13.5px Nunito, sans-serif; padding: 12px 14px; background: var(--butter); border-bottom: 2px solid var(--ink); color: var(--ink); }
.v3 article.container td { padding: 12px 14px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.v3 article.container code { font: 600 .88em 'JetBrains Mono', monospace; background: #fff; border: 1.5px solid var(--ink); border-radius: 6px; padding: 1px 6px; color: var(--ink); }
.v3 article.container pre { background: var(--ink); color: #F2EDE6; border: 2px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--orange); padding: 20px 22px; overflow-x: auto; font: 500 13.5px/1.75 'JetBrains Mono', monospace; }
.v3 article.container pre code { background: none; border: 0; padding: 0; color: inherit; }
.v3 article.container blockquote { margin: 0 0 18px; padding: 16px 20px; border: 2px solid var(--ink); border-radius: 16px; background: #FFF4D6; box-shadow: var(--sh); }
.v3 .card { background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--sh); padding: 22px 24px; }
.v3 .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 900px) {
    .v3 .wrap { padding: 0 16px; }
    .v3 .post-main > article, .v3 article.container { padding: 0 16px; font-size: 16.5px; }
}

/* ==========================================
   Auth pages (login, register, forgot-password, reset-password)
   ========================================== */
.v3 .auth-grid-bg { background: repeating-linear-gradient(0deg, transparent 0 31px, var(--rule) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, var(--rule) 31px 32px), var(--paper); }
.v3 .auth-card { position: relative; border-radius: 0 16px 16px 16px; display: flex; flex-direction: column; }
.v3 .auth-legal { text-align: center; padding: 18px 16px; font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--rule); }
.v3 .pw-wrap { position: relative; }
.v3 .pw-wrap .input { padding-right: 56px; }
.v3 .pw-toggle { position: absolute; right: 5px; top: 5px; width: 44px; height: 44px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; color: var(--ink-3); display: grid; place-items: center; }
.v3 .pw-toggle:hover { color: var(--ink); background: var(--paper); }
.v3 .pw-toggle .eye-off { display: none; }
.v3 .pw-toggle[aria-pressed="true"] .eye-on { display: none; }
.v3 .pw-toggle[aria-pressed="true"] .eye-off { display: block; }
.v3 .ts-slot { min-height: 70px; border: 2px dashed var(--ink); border-radius: 14px; background: var(--paper); padding: 6px; display: flex; justify-content: center; align-items: center; overflow-x: auto; }
.v3 .auth-alert:empty { display: none; }
.v3 .auth-alert .alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 14px; font: 700 14.5px/1.5 Nunito, sans-serif; color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.v3 .auth-alert .alert-error { background: #FFF1E6; }
.v3 .auth-alert .alert-error::before { content: "!"; flex: none; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; background: var(--orange); display: grid; place-items: center; font: 900 12px Nunito, sans-serif; }
.v3 .auth-alert .alert-success { background: #E3F7F0; }
.v3 .auth-alert .alert-success::before { content: ""; flex: none; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 50%; background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E2E48' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.v3 .pw-meter { display: flex; gap: 6px; }
.v3 .pw-meter span { flex: 1; height: 8px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; transition: background .2s; }
.v3 .pw-meter[data-score="1"] span:nth-child(-n+1) { background: var(--orange); }
.v3 .pw-meter[data-score="2"] span:nth-child(-n+2) { background: var(--butter); }
.v3 .pw-meter[data-score="3"] span:nth-child(-n+3) { background: var(--mint); }
.v3 .pw-meter[data-score="4"] span { background: var(--mint); }
.v3 .auth-card .btn[disabled] { opacity: .6; cursor: not-allowed; box-shadow: none; transform: none; }
.v3 .auth-side-box { padding: 16px 18px; display: flex; align-items: center; gap: 12px; }
@media (max-width: 900px) {
    .v3 .auth-pane { padding-top: 40px !important; padding-bottom: 48px !important; border-right: 0 !important; justify-content: flex-start !important; }
    .v3 .auth-pane h1.disp { font-size: 38px !important; }
    .v3 .auth-card { padding: 22px 18px !important; }
}

/* ==========================================
   Blog posts (views/blog/*.html), prefix bp-
   ========================================== */
.v3 .blog-post { display: block; }
.v3 .bp-hero { padding: 56px 48px 48px; }
.v3 .bp-x1 { left: -7px; top: -7px; }
.v3 .bp-x2 { right: -7px; top: -7px; }
.v3 .bp-wrap { max-width: 820px; margin: 0 auto; }
.v3 .bp-hero .crumb { flex-wrap: wrap; margin-bottom: 26px; }
.v3 .bp-hero .crumb .bp-cur { color: var(--ink); }
.v3 .bp-hero .badge { background: var(--butter); margin-bottom: 18px; height: auto; min-height: 28px; padding: 4px 12px; line-height: 1.2; }
.v3 .bp-title { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.08; margin: 0 0 26px; color: var(--ink); }
.v3 .bp-by { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.v3 .bp-av { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--ink); background: var(--orange); display: grid; place-items: center; font: 900 15px Nunito, sans-serif; box-shadow: 3px 3px 0 var(--ink); flex: none; }
.v3 .bp-by-t { display: flex; flex-direction: column; gap: 2px; }
.v3 .bp-by-t b { font: 800 15.5px Nunito, sans-serif; }
.v3 .bp-by-t .mono { font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.v3 .bp-by-line { margin: 0; flex: 1; min-width: 220px; font: 700 14.5px/1.5 Nunito, sans-serif; color: var(--ink-2); }
.v3 .bp-by-line a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.v3 .bp-body { padding: 56px 48px 96px; }
.v3 .bp-col { max-width: 760px; margin: 0 auto; min-width: 0; }
.v3 .bp-col > h2:first-child, .v3 .bp-col > section:first-child > h2:first-child { margin-top: 0; }
.v3 .bp-col section { margin: 0; }
.v3 .bp-col h2 { margin-top: 44px; }
.v3 .bp-col h3 { margin-top: 28px; }
.v3 .bp-col strong { color: var(--ink); font-weight: 800; }
.v3 .bp-col ul, .v3 .bp-col ol { margin: 0 0 18px; padding-left: 22px; }
.v3 .bp-col li { margin: 6px 0; }
.v3 .bp-col li::marker { color: var(--orange); font-weight: 800; }
.v3 .bp-col code { font: 600 .88em 'JetBrains Mono', monospace; background: #fff; border: 1.5px solid var(--ink); border-radius: 6px; padding: 1px 6px; color: var(--ink); overflow-wrap: anywhere; }
.v3 .bp-col pre.code { margin: 16px 0 24px; }
.v3 .bp-col pre.code code { background: none; border: 0; padding: 0; color: inherit; font: inherit; overflow-wrap: normal; }
.v3 .bp-col img { display: block; max-width: 100%; height: auto; border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--sh); }
.v3 .bp-fig { margin: 0 0 32px; }
.v3 .bp-fig img { width: 100%; }
.v3 .bp-col figure.bp-fig { margin: 0 0 32px; border: 0; }

.v3 .bp-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.v3 .bp-head .ico { width: 38px; height: 38px; border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); flex: none; }
.v3 .bp-head .ico svg, .v3 .bp-note .ico svg { width: 18px; height: 18px; }
.v3 .bp-head b { font: 900 19px Nunito, sans-serif; color: var(--ink); }
.v3 .bp-answer { position: relative; border-radius: 0 16px 16px 16px; padding: 24px 26px; margin: 34px 0 36px; font-size: 16.5px; line-height: 1.7; color: var(--ink-2); }
.v3 .bp-answer .tab { left: -2px; background: var(--butter); }
.v3 .bp-answer .bp-head .ico { background: var(--butter); }
.v3 .bp-answer p { margin: 0 0 12px; }
.v3 .bp-answer p:last-child { margin: 0; }
.v3 .bp-hero-act { margin: 0 0 36px; }

.v3 .bp-guide { background: #E3F7F0; border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--sh); padding: 20px 24px; margin: 0 0 32px; }
.v3 .bp-guide .bp-head .ico { background: var(--mint); }
.v3 .bp-guide ul { margin: 0; }
.v3 .bp-note { display: flex; align-items: flex-start; gap: 14px; background: #fff; border: 2px dashed var(--ink); border-radius: 16px; padding: 16px 20px; margin: 0 0 32px; font-size: 16px; line-height: 1.65; }
.v3 .bp-note p { margin: 0; flex: 1; min-width: 0; }
.v3 .bp-note .ico { width: 34px; height: 34px; border-radius: 10px; box-shadow: 2px 2px 0 var(--ink); background: var(--sky); flex: none; margin-top: 1px; }

.v3 .bp-col .card { margin: 0 0 28px; padding: 22px 26px; }
.v3 .bp-col .card > :first-child { margin-top: 0; }
.v3 .bp-col .card > :last-child { margin-bottom: 0; }
.v3 .bp-col .card h2 { font-size: 26px; margin: 0 0 12px; }
.v3 .bp-col .card h3 { font-size: 20px; margin: 0 0 8px; }
.v3 .bp-col .card .badge { margin-bottom: 12px; background: var(--butter); }
.v3 .tone-sky { background: #E4F2FB !important; }
.v3 .tone-mint { background: #E3F7F0 !important; }
.v3 .tone-lilac { background: #EEEBFB !important; }
.v3 .tone-peach { background: #FFEBD6 !important; }
.v3 .tone-note { background: #FFF4D6 !important; border-style: dashed !important; box-shadow: none !important; }
.v3 .tone-ink { background: var(--ink) !important; color: #F2EDE6; }
.v3 .tone-ink h2, .v3 .tone-ink h3, .v3 .tone-ink strong { color: #fff; }
.v3 .bp-stack { display: grid; gap: 20px; margin: 0 0 28px; }
.v3 .bp-stack .card { margin: 0; }

.v3 .bp-col .tbl-box { margin: 12px 0 26px; }
.v3 .bp-col table.tbl { font-size: 15px; }
.v3 .bp-col table.tbl td.b { font-weight: 800; color: var(--ink); }
.v3 .bp-col table.tbl th, .v3 .bp-col table.tbl td { min-width: 110px; }

.v3 .bp-q { background: #fff; border: 2px solid var(--ink); border-radius: 14px; padding: 16px 20px; margin: 0 0 14px; }
.v3 .bp-q h3 { margin: 0 0 6px; font-size: 18px; }
.v3 .bp-q p { margin: 0; }
.v3 .bp-faq > h2 { margin-bottom: 18px; }
.v3 .bp-col details.bp-d { background: #fff; border: 2px solid var(--ink); border-radius: 14px; margin: 0 0 12px; transition: box-shadow .16s; }
.v3 .bp-col details.bp-d[open] { box-shadow: var(--sh); }
.v3 .bp-col details.bp-d summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 12px 20px; font: 800 17px/1.35 Nunito, sans-serif; color: var(--ink); }
.v3 .bp-col details.bp-d summary::-webkit-details-marker { display: none; }
.v3 .bp-col details.bp-d summary::after { content: "+"; flex: none; font: 700 22px 'JetBrains Mono', monospace; line-height: 1; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.v3 .bp-col details.bp-d[open] summary::after { transform: rotate(45deg); }
.v3 .bp-col details.bp-d > :not(summary) { padding: 0 20px; }
.v3 .bp-col details.bp-d > p { margin: 0 0 14px; }
.v3 .bp-col details.bp-d > :last-child { margin-bottom: 18px; }

.v3 .bp-cta { background: var(--butter); border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--sh-lg); padding: 30px 30px 32px; margin: 44px 0; }
.v3 .bp-cta .badge { background: #fff; margin-bottom: 14px; }
.v3 .bp-cta h2 { font: 900 clamp(24px, 3vw, 30px)/1.15 Nunito, sans-serif; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--ink); max-width: 24ch; }
.v3 .bp-cta p { margin: 0 0 20px; color: var(--ink-2); font-size: 16.5px; }
.v3 .bp-cta p:last-child { margin-bottom: 0; }
.v3 .bp-cta .bp-cta-fine { margin: 16px 0 0; font-size: 14px; }
.v3 .bp-col a.btn { text-decoration: none; font-weight: 800; }
.v3 .bp-col a.btn.b-ink { color: #fff; }
.v3 .bp-col a.btn.b-orange { color: var(--ink); }

.v3 .bp-related { margin: 48px 0 0; }
.v3 .bp-related h2 { margin: 0 0 18px; }
.v3 .bp-related ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.v3 .bp-related li { margin: 0; }
.v3 .bp-col .bp-related a.bp-rel { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 100%; min-height: 44px; padding: 18px 20px; background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--sh); font: 800 17px/1.35 Nunito, sans-serif; color: var(--ink); text-decoration: none; transition: transform .16s cubic-bezier(.2, .8, .2, 1), box-shadow .16s cubic-bezier(.2, .8, .2, 1); }
.v3 .bp-col .bp-related a.bp-rel:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.v3 .bp-rel-ar { width: 22px; height: 22px; flex: none; }

@media (max-width: 900px) {
    .v3 .bp-hero { padding-top: 36px; padding-bottom: 32px; }
    .v3 .bp-body { padding-top: 36px; padding-bottom: 64px; }
    .v3 .bp-answer { padding: 20px 18px; }
    .v3 .bp-col .card { padding: 18px; }
    .v3 .bp-cta { padding: 24px 20px; }
    .v3 .bp-related ul { grid-template-columns: minmax(0, 1fr); }
    .v3 .bp-col details.bp-d summary { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .v3 .bp-col details.bp-d summary::after, .v3 .bp-col .bp-related a.bp-rel { transition: none; }
}

/* ==========================================
   Mobile polish (QA pass): tap targets and edge cases
   ========================================== */
/* Corner markers sit 7px outside the frame; hide them before the frame
   reaches the viewport edge so they never cause sideways scroll. */
@media (max-width: 1299px) {
    .v3 .cross { display: none; }
}
/* Small inline controls get a 40px hit area without changing the layout. */
.v3 .crumb a { display: inline-flex; align-items: center; min-height: 40px; margin: -10px 0; }
.footer-new .footer-seo-toggle { display: inline-flex; align-items: center; min-height: 40px; margin: -10px 0; vertical-align: middle; }
.v3 .lnk[href="/forgot-password"] { display: inline-flex; align-items: center; min-height: 40px; margin: -9px 0; }
@media (max-width: 900px) {
    .v3 .toc a { display: flex; align-items: center; min-height: 44px; }
    .v3 .fp-copy, .v3 .dl-links a, .v3 .sw .cp { min-height: 44px; min-width: 44px; }
}
@media (max-width: 768px) {
    .footer-new .footer-col a { display: flex; align-items: center; min-height: 40px; padding: 2px 0; font-size: 13px; line-height: 1.25; }
}
/* Keep the menu toggle (which turns into ×) above the open drawer so it can close it. */
body .header .mobile-menu-btn { position: relative; z-index: 80; background: var(--paper); }
/* Touch screens wider than the phone breakpoint (tablets) still get 44px targets. */
@media (pointer: coarse) {
    .footer-new .footer-col a { display: flex; align-items: center; min-height: 44px; padding: 0; }
    .v3 .toc a { display: flex; align-items: center; min-height: 44px; }
    .v3 .fp-copy, .v3 .dl-links a, .v3 .sw .cp { min-height: 44px; min-width: 44px; }
}

/* Folder tabs: the card a tab sits on gets a square top-left corner so the
   tab and the card share one straight edge instead of a rounded notch. */
.v3 :has(> .tab) { border-top-left-radius: 0 !important; }
.v3 .tab { z-index: 1; }