/* dhacker reader accounts — header button, newsletter states, sign-in/account pages (owner's design), locked lab links */

/* header: Sign in / Account */
.btn-account { display: none; height: 44px; padding: 0 16px; border-radius: 22px; border: 1px solid var(--border); color: var(--text-primary); font-weight: 600; font-size: 14px; align-items: center; gap: 6px; white-space: nowrap; transition: border-color .18s ease, color .18s ease; }
.btn-account:hover, .btn-account:focus-visible { text-decoration: none; border-color: var(--accent); color: var(--accent); }
.btn-account .ti { font-size: 18px; }
@media (min-width: 720px) { .nav-actions > .btn-account { display: inline-flex; } }
.mobile-menu-panel .btn-account { display: flex; margin-top: 6px; justify-content: center; }

/* ===================================================================================
   Text fields: GeneratePress paints focused inputs light (input[type=…]:focus { background: var(--base-2);
   color: var(--contrast) }), and Safari/Chrome autofill paints them pale. Keep every field dark.
   =================================================================================== */
/* any text field we don't style below (fallback) */
html body input[type="text"]:focus, html body input[type="email"]:focus, html body input[type="search"]:focus,
html body input[type="url"]:focus, html body input[type="tel"]:focus, html body input[type="password"]:focus,
html body input[type="number"]:focus, html body textarea:focus, html body select:focus {
	background-color: var(--bg); color: var(--text-primary); border-color: var(--accent);
}
/* newsletter fields (home page) */
html body .inline-form input:focus { background-color: var(--bg); color: var(--text-primary); border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .18); }
/* search (mobile menu + search page): the pill is the box, the field stays clear */
html body .search-form input[type="search"]:focus { background: none; color: var(--text-primary); border: none; outline: none; box-shadow: none; }
.search-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15); }
/* sign-in field: transparent inside its outlined wrapper */
html body .dhk-auth .dhk-input:focus { background: transparent; color: #fff; border: 0; outline: none; box-shadow: none; }
/* autofill (iOS Safari, Chrome): keep the dark fill and light text */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active,
textarea:-webkit-autofill, select:-webkit-autofill {
	-webkit-text-fill-color: var(--text-primary); caret-color: var(--text-primary);
	-webkit-box-shadow: 0 0 0 1000px var(--bg) inset; box-shadow: 0 0 0 1000px var(--bg) inset;
	transition: background-color 600000s 0s, color 600000s 0s;
}
.dhk-auth .dhk-input:-webkit-autofill, .dhk-auth .dhk-input:-webkit-autofill:hover, .dhk-auth .dhk-input:-webkit-autofill:focus {
	-webkit-text-fill-color: #fff; caret-color: #fff; -webkit-box-shadow: 0 0 0 1000px #0b1024 inset; box-shadow: 0 0 0 1000px #0b1024 inset;
}
.search-form input[type="search"]:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; box-shadow: 0 0 0 1000px var(--surface) inset; }
input:autofill { background-color: var(--bg) !important; color: var(--text-primary) !important; }

/* newsletter forms (home page) */
.dhk-status { min-height: 1.2em; font-size: 14px; margin: 10px 0 0; color: var(--text-muted); }
.dhk-status.ok { color: var(--cyan-1); }
.dhk-status.err { color: var(--red); }
.dhk-done .dhk-status { margin-top: 4px; font-weight: 600; }
.dhk-link { font-size: 13px; color: var(--text-muted); text-decoration: underline; }
.dhk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* locked lab download in articles */
.dhk-lab-locked { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 20px; border: 1px solid var(--accent-tint-border); background: var(--accent-tint); font-weight: 600; text-decoration: none; }
.dhk-lab-note { color: var(--text-muted); font-size: 14px; }

/* ===================================================================================
   Sign-in / account pages — the owner's "dhacker-signin" design.
   The site's header, footer and logo stay; this section runs full width under the header.
   =================================================================================== */
.dhk-auth-page { overflow-x: clip; }
.dhk-auth-page .breadcrumb, .dhk-auth-page h1.post-title { display: none; }
.dhk-auth-page .post-content { max-width: none; font-size: inherit; line-height: normal; }
.post-content > .dhk-auth { box-shadow: none; }
.dhk-auth-page .dhacker-page { padding-bottom: 0; }
/* the theme underlines article links and frames article images — not here */
.post-content .dhk-auth a, .post-content .dhk-auth a:hover { text-decoration: none; }
.post-content .dhk-auth .dhk-divider a:hover, .post-content .dhk-auth .dhk-legal a:hover { text-decoration: underline; }
.post-content .dhk-auth img { box-shadow: none; border: 0; border-radius: 0; background: none; }

.dhk-auth {
	--dk-cyan: #21d9f3; --dk-purple: #8755ff; --dk-text: #f5f7ff; --dk-muted: #aab4d0; --dk-line: rgba(164, 177, 230, .2);
	position: relative; isolation: isolate; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
	background: radial-gradient(ellipse at 52% 42%, #151b3b 0, #0a0e21 42%, #070a17 78%);
	border-top: 1px solid rgba(127, 146, 210, .17); border-bottom: 1px solid rgba(127, 146, 210, .12);
	color: var(--dk-text); font-family: var(--font-sans);
}
.dhk-auth::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .15; background-image: linear-gradient(rgba(110, 130, 200, .11) 1px, transparent 1px), linear-gradient(90deg, rgba(110, 130, 200, .11) 1px, transparent 1px); background-size: 54px 54px; -webkit-mask-image: linear-gradient(to bottom, #000, transparent 88%); mask-image: linear-gradient(to bottom, #000, transparent 88%); }
.dhk-auth [hidden] { display: none !important; }
.dhk-auth a { color: inherit; text-decoration: none; }
.dhk-auth p { margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.dhk-ambient { position: absolute; z-index: -1; border-radius: 50%; filter: blur(100px); opacity: .17; pointer-events: none; }
.dhk-ambient-one { width: 400px; height: 400px; background: #552dff; top: 18%; left: 20%; }
.dhk-ambient-two { width: 360px; height: 360px; background: #00b9e8; right: 3%; bottom: 2%; opacity: .1; }

.dhk-shell { width: min(1340px, calc(100% - 64px)); min-height: min(760px, calc(100vh - 150px)); margin: 0 auto; display: grid; grid-template-columns: minmax(220px, .72fr) minmax(470px, 1.2fr) minmax(190px, .7fr); align-items: center; gap: clamp(22px, 3.5vw, 58px); padding: 65px 0 75px; }

/* intro (left) */
.dhk-intro { padding-left: 10px; }
.dhk-auth .dhk-eyebrow { display: flex; align-items: center; gap: 9px; margin: 0 0 24px; font-size: 9px; letter-spacing: 2px; color: #9aa9d2; font-weight: 700; }
.dhk-status-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #22d8b5; box-shadow: 0 0 12px #22d8b5; }
.dhk-auth .dhk-intro-title { margin: 0; font-size: clamp(34px, 3vw, 49px); line-height: 1.12; letter-spacing: -2px; font-weight: 800; color: var(--dk-text); }
.dhk-intro-title span { background: linear-gradient(90deg, #c4a2ff, #6d8cff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dhk-cursor { display: inline-block; width: 2px; height: .9em; margin-left: 7px; vertical-align: -.08em; background: #b99bff; animation: dhk-blink 1s steps(2, start) infinite; }
@keyframes dhk-blink { to { visibility: hidden; } }
.dhk-auth .dhk-intro-copy { max-width: 300px; margin: 30px 0 27px; color: #b7c0d8; line-height: 1.75; font-size: 14px; }
.dhk-intro-line { height: 3px; width: 60px; border-radius: 4px; background: linear-gradient(90deg, #a36cff, #35d6f2); box-shadow: 0 0 15px #8c60ff66; }
.dhk-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 28px; }
.dhk-tags span { font-size: 8px; letter-spacing: 1px; color: #9eabd0; border: 1px solid rgba(151, 169, 230, .2); border-radius: 20px; padding: 7px 9px; }

/* card (centre) */
.dhk-card { position: relative; isolation: isolate; overflow: hidden; padding: 48px clamp(30px, 4.2vw, 64px) 34px; border: 1px solid transparent; border-radius: 28px; background: linear-gradient(145deg, rgba(16, 23, 49, .96), rgba(10, 14, 32, .96)) padding-box, linear-gradient(135deg, #9871ff, #6f8cff 55%, #a55dff) border-box; box-shadow: 0 25px 90px rgba(0, 0, 0, .38), 0 0 38px rgba(105, 91, 255, .12); }
.dhk-card-glow { position: absolute; z-index: -1; right: -90px; top: -150px; width: 260px; height: 260px; border-radius: 50%; background: #6645ff; filter: blur(110px); opacity: .17; }
.dhk-auth .dhk-card-brand { display: flex; justify-content: center; margin: 0 0 32px; font-size: 24px; }   /* the site's own "dhacker_" logo */
.dhk-auth .dhk-card-brand a { color: var(--text-primary); }
.dhk-auth .dhk-kicker { margin: 0 0 13px; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; color: #8e9cbe; text-transform: uppercase; }
.dhk-auth .dhk-title { margin: 0 0 10px; font-size: clamp(25px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -1.1px; font-weight: 700; color: var(--dk-text); font-family: var(--font-sans); }
.dhk-auth .dhk-title::after { content: none; }
.dhk-auth .dhk-desc { margin: 0 0 38px; color: #b5bfd9; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.dhk-auth .dhk-desc strong { color: var(--dk-text); font-weight: 600; }
.dhk-auth .dhk-alert { margin: -18px 0 24px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255, 146, 158, .35); background: rgba(255, 146, 158, .08); color: #ff929e; font-size: 13px; line-height: 1.5; }
.dhk-auth .dhk-alert.ok { border-color: rgba(120, 229, 206, .35); background: rgba(120, 229, 206, .08); color: #78e5ce; }

.dhk-auth .dhk-form { margin: 0; }
.dhk-auth .dhk-label { display: block; margin: 0 0 11px; font-size: 13px; font-weight: 600; color: var(--dk-text); line-height: 1.4; }
.dhk-input-wrap { height: 58px; display: flex; align-items: center; gap: 14px; padding: 0 17px; border: 1px solid #8292c2; border-radius: 13px; background: rgba(4, 8, 23, .35); transition: border-color .2s, box-shadow .2s; }
.dhk-input-wrap:focus-within { border-color: var(--dk-cyan); box-shadow: 0 0 0 3px #21d9f31a; }
.dhk-input-wrap svg { width: 22px; flex: none; fill: none; stroke: #eaf1ff; stroke-width: 1.8; }
.dhk-auth .dhk-input { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #fff; font: 16px var(--font-sans); /* 16px: no zoom on iOS */ }
.dhk-auth .dhk-input::placeholder { color: #9eabc8; }
.dhk-auth .dhk-input[aria-invalid="true"] { color: #ffd5da; }
.dhk-auth .dhk-status { min-height: 16px; margin: 5px 0; font-size: 11px; color: #ff929e; }
.dhk-auth .dhk-status.ok { color: #78e5ce; }

.dhk-submit { width: 100%; height: 57px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 12px; color: #fff; background: linear-gradient(105deg, #6b32ef 0%, #5369ff 52%, #18cbe8 100%); box-shadow: 0 8px 25px #5148e84a; font: 600 15px var(--font-sans); cursor: pointer; transition: transform .2s, filter .2s; }
.dhk-auth a.dhk-submit { color: #fff; }
.dhk-submit:hover, .dhk-submit:focus-visible { transform: translateY(-2px); filter: brightness(1.1); color: #fff; }
.dhk-submit:focus-visible { outline: 2px solid var(--dk-cyan); outline-offset: 3px; }
.dhk-submit svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dhk-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.dhk-submit-spaced { margin-top: 22px; }
.dhk-submit-danger { background: linear-gradient(105deg, #c2334a, #ff5c6c); box-shadow: 0 8px 25px rgba(255, 92, 108, .25); }

.dhk-checkrow { position: relative; display: flex; align-items: center; gap: 12px; width: max-content; max-width: 100%; margin: 25px 0 0; color: #dce3f6; font-size: 13px; line-height: 1.4; cursor: pointer; }
.dhk-form .dhk-label + .dhk-checkrow { margin-top: 4px; }
.dhk-checkrow + .dhk-checkrow { margin-top: 16px; }
.dhk-checkrow input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dhk-box { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid #c0c9df; border-radius: 4px; }
.dhk-checkrow input:checked + .dhk-box { background: #7250f6; border-color: #9476ff; }
.dhk-checkrow input:checked + .dhk-box::after { content: "✓"; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; }
.dhk-checkrow input:focus-visible + .dhk-box { outline: 2px solid var(--dk-cyan); outline-offset: 3px; }

.dhk-divider { display: flex; align-items: center; gap: 14px; margin: 38px 0 0; }
.dhk-divider span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, #647198); }
.dhk-divider span:last-child { background: linear-gradient(90deg, #647198, transparent); }
.dhk-auth .dhk-divider p { margin: 0; color: #c4cce0; font-size: 13px; white-space: nowrap; }
.dhk-auth .dhk-divider a { color: #a989ff; font-weight: 700; }
.dhk-auth .dhk-divider a:hover, .dhk-auth .dhk-legal a:hover { text-decoration: underline; }
.dhk-auth .dhk-legal { margin: 23px 0 0; text-align: center; color: #7784a5; font-size: 10px; line-height: 1.6; }
.dhk-auth .dhk-legal a { color: #aab6d5; }
.dhk-auth .dhk-sent-note { padding: 14px 16px; border-radius: 13px; border: 1px solid var(--dk-line); background: rgba(4, 8, 23, .35); color: #b5bfd9; font-size: 13px; line-height: 1.6; }

/* profile fields (create account + account page) */
.dhk-row { margin: 0 0 16px; }
.dhk-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dhk-field { min-width: 0; }
.dhk-auth .dhk-profile-form .dhk-label { margin-bottom: 8px; }
.dhk-auth .dhk-label-group { margin: 22px 0 2px; font-size: 13px; }
.dhk-profile-form .dhk-label-group + .dhk-checkrow { margin-top: 10px; }
.dhk-profile-form .dhk-checkrow { width: auto; margin-top: 14px; align-items: flex-start; }
.dhk-profile-form .dhk-checkrow .dhk-box { margin-top: 1px; }
.dhk-req { color: #ff929e; font-weight: 700; }
.dhk-opt { color: #8e9cbe; font-weight: 400; }
.dhk-input-wrap.dhk-plain { height: 52px; }
.dhk-input-wrap.dhk-has-error { border-color: #ff929e; box-shadow: 0 0 0 3px rgba(255, 146, 158, .12); }
.dhk-auth .dhk-field-error { margin: 6px 0 0; color: #ff929e; font-size: 12px; line-height: 1.4; }
.dhk-input-wrap.dhk-readonly { height: 52px; border-style: dashed; border-color: rgba(130, 146, 194, .55); background: rgba(4, 8, 23, .2); }
.dhk-auth .dhk-readonly .dhk-input { color: #b5bfd9; cursor: default; }
.dhk-verified { flex: none; padding: 3px 8px; border-radius: 20px; background: rgba(120, 229, 206, .1); color: #78e5ce; font-size: 11px; font-weight: 600; white-space: nowrap; }
.dhk-sep { height: 1px; margin: 28px 0 6px; background: linear-gradient(90deg, transparent, #647198, transparent); }
@media (max-width: 480px) { .dhk-row-2 { grid-template-columns: 1fr; gap: 16px; } }

/* account page extras */
.dhk-ghost { display: flex; align-items: center; justify-content: center; gap: 10px; height: 50px; margin-top: 14px; border: 1px solid rgba(177, 190, 239, .5); border-radius: 12px; background: rgba(255, 255, 255, .025); font: 600 14px var(--font-sans); transition: transform .2s, border-color .2s; }
.dhk-auth a.dhk-ghost { color: var(--dk-text); }
.dhk-ghost:hover { transform: translateY(-2px); border-color: var(--dk-cyan); }
.dhk-ghost svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dhk-danger { margin-top: 26px; }
.dhk-danger summary { list-style: none; text-align: center; color: #7784a5; font-size: 12px; cursor: pointer; }
.dhk-danger summary::-webkit-details-marker { display: none; }
.dhk-danger summary:hover, .dhk-danger[open] summary { color: #ff929e; }
.dhk-danger[open] summary { margin-bottom: 4px; }

/* illustration (right) */
.dhk-visual { position: relative; min-height: 390px; display: flex; align-items: flex-end; justify-content: center; }
.dhk-art { position: relative; z-index: 1; width: min(120%, 390px); height: auto; filter: drop-shadow(0 15px 30px #5d38ed45); }
.dhk-terminal { position: absolute; right: 4%; top: 8%; width: 95%; max-width: 290px; height: 170px; overflow: hidden; border: 1px solid #5441a5; border-radius: 12px; background: linear-gradient(145deg, #15143a, #0a1028); transform: perspective(650px) rotateY(-12deg) rotateZ(-3deg); box-shadow: 0 0 35px #6945ef27; }
.dhk-terminal-top { height: 27px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #241d58; border-bottom: 1px solid #40347f; }
.dhk-terminal-top i { width: 7px; height: 7px; border-radius: 50%; background: #a979ff; }
.dhk-terminal-top i:nth-child(2) { background: #7774ff; }
.dhk-terminal-top i:nth-child(3) { background: #8b9cff; }
.dhk-terminal-body { padding: 18px; color: #d4d9ff; font: 11px/1.9 var(--font-mono); }
.dhk-prompt { color: #31d9ed; }
.dhk-terminal-code { padding: 5px 0 10px 13px; color: #a9a0ff; }
.dhk-terminal-code b { color: #39e4d2; }
.dhk-caption { position: absolute; right: 8%; bottom: -2px; display: flex; align-items: center; gap: 9px; color: #8c9bbd; font-size: 9px; letter-spacing: 2px; font-weight: 700; }

/* lab download pop-up: the same card over the article, page blurred behind it */
html.dhk-modal-open body { overflow: hidden; }
.dhk-modal { position: fixed; inset: 0; z-index: 100000; display: flex; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 24px 16px; background: rgba(5, 8, 20, .55); -webkit-backdrop-filter: blur(12px) saturate(120%); backdrop-filter: blur(12px) saturate(120%); animation: dhk-fade .18s ease-out; }
.dhk-auth.dhk-auth-modal { width: 100%; max-width: 500px; margin: auto; overflow: visible; background: none; border: 0; }
.dhk-auth.dhk-auth-modal::before { content: none; }
.dhk-auth-modal .dhk-card { animation: dhk-rise .24s cubic-bezier(.2, .8, .2, 1); }
.dhk-modal-close { position: absolute; top: 16px; right: 16px; z-index: 2; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid var(--dk-line); border-radius: 50%; background: rgba(255, 255, 255, .04); color: #c4cce0; cursor: pointer; transition: border-color .2s, color .2s; }
.dhk-modal-close:hover, .dhk-modal-close:focus-visible { border-color: var(--dk-cyan); color: #fff; outline: none; }
.dhk-modal-close svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@keyframes dhk-fade { from { opacity: 0; } }
@keyframes dhk-rise { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dhk-modal { background: rgba(5, 8, 20, .88); } }

@media (max-width: 1120px) {
	.dhk-shell { grid-template-columns: minmax(190px, .7fr) minmax(430px, 1.3fr); width: min(980px, calc(100% - 48px)); }
	.dhk-visual { display: none; }
	.dhk-auth .dhk-intro-title { font-size: 42px; }
	.dhk-card { max-width: 620px; width: 100%; justify-self: center; }
}
@media (max-width: 760px) {
	.dhk-shell { width: min(560px, calc(100% - 32px)); min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding: 40px 0 55px; }
	.dhk-intro { padding: 0 4px; }
	.dhk-auth .dhk-eyebrow { margin-bottom: 14px; }
	.dhk-auth .dhk-intro-title { font-size: 35px; letter-spacing: -1.5px; }
	.dhk-auth .dhk-intro-copy { font-size: 13px; margin: 16px 0 0; max-width: 430px; }
	.dhk-intro-line, .dhk-tags { display: none; }
	.dhk-card { padding: 34px 25px 27px; border-radius: 22px; }
	.dhk-auth .dhk-card-brand { font-size: 22px; margin-bottom: 25px; }
	.dhk-auth .dhk-desc { margin-bottom: 27px; }
	.dhk-auth .dhk-title { font-size: 27px; }
	.dhk-divider { gap: 9px; margin-top: 30px; }
	.dhk-auth .dhk-divider p { font-size: 11px; }
	.dhk-auth .dhk-legal { font-size: 9px; }
}
@media (max-width: 380px) {
	.dhk-card { padding: 29px 19px 24px; }
	.dhk-auth .dhk-title { font-size: 24px; }
	.dhk-auth .dhk-divider p { font-size: 10px; white-space: normal; text-align: center; }
	.dhk-input-wrap { height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
	.dhk-cursor { animation: none; }
	.dhk-submit, .dhk-ghost, .dhk-input-wrap { transition: none; }
}