*, *::before, *::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	--bg0:#0a0c10;
	--bg1:#0d1117;
	--bg2:#161b22;
	--bg3:#1c2128;
	--line:#21262d;
	--line2:#30363d;
	--dim:#484f58;
	--muted:#768390;
	--text:#cdd9e5;
	--bright:#f0f6fc;
	--green:#3fb950;
	--green-dim:#1a4729;
	--blue:#58a6ff;
	--blue-dim:#1f3352;
	--cyan:#39d353;
	--orange:#e3b341;
	--purple:#bc8cff;
	--red:#f85149;
	--zalo:#0068ff;
	--zalo-dim:#0a1f40;
	--accent:#3fb950;
	--accent-dim:#1a4729;
}
[data-theme="cyberpunk"]{
	--bg0:#0d0015;
	--bg1:#110019;
	--bg2:#1a0026;
	--bg3:#220033;
	--line:#2d004a;
	--line2:#3d0060;
	--dim:#6b00a8;
	--muted:#9b30d0;
	--text:#e8b4ff;
	--bright:#f5d6ff;
	--green:#ff00ff;
	--green-dim:#2d002d;
	--blue:#00ffff;
	--blue-dim:#002d2d;
	--cyan:#ff00aa;
	--orange:#ffaa00;
	--purple:#aa00ff;
	--red:#ff0055;
	--accent:#ff00ff;
	--accent-dim:#2d002d;
}
[data-theme="solarized"]{
	--bg0:#001b1e;
	--bg1:#002b36;
	--bg2:#073642;
	--bg3:#0a4555;
	--line:#103848;
	--line2:#184c5c;
	--dim:#4a7a8a;
	--muted:#5a8a9a;
	--text:#839496;
	--bright:#fdf6e3;
	--green:#859900;
	--green-dim:#1a2000;
	--blue:#268bd2;
	--blue-dim:#0a2a45;
	--cyan:#2aa198;
	--orange:#cb4b16;
	--purple:#6c71c4;
	--red:#dc322f;
	--accent:#2aa198;
	--accent-dim:#0a2525;
}
[data-theme="dracula"]{
	--bg0:#0f0f1a;
	--bg1:#1a1a2e;
	--bg2:#16213e;
	--bg3:#1f2b52;
	--line:#2a2a4a;
	--line2:#333360;
	--dim:#5a5a80;
	--muted:#7070a0;
	--text:#f8f8f2;
	--bright:#ffffff;
	--green:#50fa7b;
	--green-dim:#0d3318;
	--blue:#8be9fd;
	--blue-dim:#0a2535;
	--cyan:#80ffea;
	--orange:#ffb86c;
	--purple:#bd93f9;
	--red:#ff5555;
	--accent:#bd93f9;
	--accent-dim:#1a0f3a;
}
[data-theme="nord"]{
	--bg0:#1a1d23;
	--bg1:#2e3440;
	--bg2:#3b4252;
	--bg3:#434c5e;
	--line:#4c566a;
	--line2:#5a6580;
	--dim:#6a7590;
	--muted:#8892a4;
	--text:#d8dee9;
	--bright:#eceff4;
	--green:#a3be8c;
	--green-dim:#1a2516;
	--blue:#88c0d0;
	--blue-dim:#0a2228;
	--cyan:#8fbcbb;
	--orange:#d08770;
	--purple:#b48ead;
	--red:#bf616a;
	--accent:#88c0d0;
	--accent-dim:#0a2228;
}
[data-theme="light"]{
	--bg0:#f0f0f0;
	--bg1:#ffffff;
	--bg2:#f5f5f5;
	--bg3:#ebebeb;
	--line:#e0e0e0;
	--line2:#d0d0d0;
	--dim:#9a9a9a;
	--muted:#707070;
	--text:#333333;
	--bright:#111111;
	--green:#22863a;
	--green-dim:#d9f0d9;
	--blue:#0366d6;
	--blue-dim:#ddeeff;
	--cyan:#1b7c3d;
	--orange:#b45000;
	--purple:#5a32a3;
	--red:#cb2431;
	--accent:#22863a;
	--accent-dim:#d9f0d9;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family:'JetBrains Mono',monospace;
	background:var(--bg0);
	color:var(--text);
	min-height:100vh;
	overflow-x:hidden;
	transition:background .3s,color .3s;
}
#matrixBg {
	position:fixed;
	inset:0;
	z-index:0;
	pointer-events:none;
	opacity:0;
	transition:opacity .6s;
}
body::before {
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:2;
	background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.025) 2px,rgba(0,0,0,.025) 4px);
}
body::after {
	content:"";
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:1;
	background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
	background-size:40px 40px;
	opacity:.3;
}
.root {
	position:relative;
	z-index:3;
	min-height:100vh;
	display:grid;
	grid-template-columns:255px 1fr;
	max-width:1020px;
	margin:0 auto;
	border-left:1px solid var(--line2);
	border-right:1px solid var(--line2);
}
.sidebar {
	border-right:1px solid var(--line2);
	background:var(--bg1);
	display:flex;
	flex-direction:column;
	position:sticky;
	top:0;
	height:100vh;
	overflow:hidden;
	transition:background .3s;
}
.sidebar-top {
	padding:26px 20px 22px;
	border-bottom:1px solid var(--line2);
}
.window-dots {
	display:flex;
	gap:6px;
	margin-bottom:18px;
}
.dot {
	width:11px;
	height:11px;
	border-radius:50%;
}
.dot-r{
	background:#ff5f57
}
.dot-y{
	background:#ffbd2e
}
.dot-g{
	background:#28c840
}
.file-label {
	font-size:10px;
	color:var(--dim);
	letter-spacing:.15em;
	text-transform:uppercase;
	margin-bottom:12px;
}
.avatar-wrap {
	width:70px;
	height:70px;
	border-radius:6px;
	overflow:hidden;
	border:1px solid var(--line2);
	margin-bottom:13px;
	position:relative;
}
.avatar-wrap::after {
	content:"";
	position:absolute;
	inset:0;
	border-radius:6px;
	border:1px solid rgba(88,166,255,.3);
}
.avatar-wrap img {
	width:100%;
	height:100%;
	object-fit:cover;
	filter:saturate(.88);
}
.name {
	font-family:'Syne',sans-serif;
	font-size:16px;
	font-weight:700;
	color:var(--bright);
	margin-bottom:3px;
}
.handle {
	font-size:11px;
	color:var(--green);
	margin-bottom:9px;
}
.handle span {
	color:var(--dim);
}
.status {
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:10px;
	color:var(--muted);
	background:var(--bg2);
	border:1px solid var(--line2);
	padding:4px 8px;
	border-radius:4px;
}
.status-dot {
	width:7px;
	height:7px;
	border-radius:50%;
	background:var(--green);
	animation:pulse 2s ease-in-out infinite;
}
@keyframes pulse{
	0%,100%{
		opacity:1
}
	50%{
		opacity:.35
}
}
.visitor-badge {
	display:inline-flex;
	align-items:center;
	gap:5px;
	font-size:9.5px;
	color:var(--muted);
	margin-top:6px;
	background:var(--bg3);
	border:1px solid var(--line);
	padding:3px 8px;
	border-radius:3px;
}
.visitor-dot {
	width:5px;
	height:5px;
	border-radius:50%;
	background:var(--accent);
	animation:pulse 1.5s ease-in-out infinite;
}
#visitorCount {
	color:var(--accent);
	font-weight:600;
}
.nav {
	flex:1;
	overflow-y:auto;
	padding:6px 0;
}
.nav::-webkit-scrollbar {
	width:3px;
}
.nav::-webkit-scrollbar-thumb {
	background:var(--line2);
	border-radius:4px;
}
.nav-section {
	padding:10px 16px 3px;
}
.nav-section-label {
	font-size:9.5px;
	color:var(--dim);
	letter-spacing:.12em;
	text-transform:uppercase;
}
.nav-item {
	display:flex;
	align-items:center;
	gap:8px;
	padding:7px 16px 7px 20px;
	color:var(--muted);
	font-size:11.5px;
	cursor:pointer;
	user-select:none;
	border-left:2px solid transparent;
	transition:all .15s;
}
.nav-item:hover {
	color:var(--text);
	background:var(--bg2);
	border-left-color:var(--dim);
}
.nav-item.active {
	color:var(--blue);
	background:var(--blue-dim);
	border-left-color:var(--blue);
}
.nav-item .badge {
	margin-left:auto;
	font-size:9px;
	background:var(--green-dim);
	color:var(--green);
	border:1px solid rgba(63,185,80,.3);
	padding:1px 5px;
	border-radius:3px;
}
.sidebar-footer {
  padding: 10px 12px;
  font-size: 10px;
  color: var(--dim);
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
}
.theme-switcher {
	padding:10px 14px;
	border-bottom:1px solid var(--line2);
	display:flex;
	gap:6px;
	align-items:center;
	flex-wrap:wrap;
}
.theme-label {
	font-size:9px;
	color:var(--dim);
	text-transform:uppercase;
	letter-spacing:.1em;
	width:100%;
	margin-bottom:3px;
}
.theme-btn {
	width:20px;
	height:20px;
	border-radius:4px;
	cursor:pointer;
	border:2px solid transparent;
	transition:all .15s;
}
.theme-btn.active {
	border-color:var(--bright);
	transform:scale(1.2);
}
.theme-btn[data-theme="default"]{
	background:linear-gradient(135deg,#0d1117,#3fb950)
}
.theme-btn[data-theme="cyberpunk"]{
	background:linear-gradient(135deg,#0d0015,#ff00ff)
}
.theme-btn[data-theme="solarized"]{
	background:linear-gradient(135deg,#002b36,#2aa198)
}
.theme-btn[data-theme="dracula"]{
	background:linear-gradient(135deg,#1a1a2e,#bd93f9)
}
.theme-btn[data-theme="nord"]{
	background:linear-gradient(135deg,#2e3440,#88c0d0)
}
.theme-btn[data-theme="light"]{
	background:linear-gradient(135deg,#ffffff,#22863a)
}
.topbar {
	height:42px;
	border-bottom:1px solid var(--line2);
	display:flex;
	align-items:center;
	padding:0 18px;
	gap:10px;
	background:var(--bg2);
	position:sticky;
	top:0;
	z-index:10;
}
.tab-item {
	display:flex;
	align-items:center;
	gap:6px;
	font-size:12px;
	color:var(--text);
	background:var(--bg1);
	border:1px solid var(--line2);
	border-bottom:none;
	border-radius:4px 4px 0 0;
	padding:6px 13px;
	margin-bottom:-1px;
}
.tab-item .close-x {
	color:var(--dim);
	font-size:11px;
	margin-left:3px;
}
.topbar-right {
	margin-left:auto;
	display:flex;
	align-items:center;
	gap:7px;
}
.cmd-pill {
	font-size:10px;
	color:var(--dim);
	border:1px solid var(--line2);
	padding:3px 7px;
	border-radius:4px;
}
.topbar-clock {
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	display:flex;
	align-items:center;
	gap:8px;
	font-family:'JetBrains Mono',monospace;
	font-size:11px;
	white-space:nowrap;
	pointer-events:none;
	background:var(--bg2);
	border:1px solid var(--line2);
	padding:4px 12px;
	border-radius:4px;
}
.topbar-clock #tbDate {
	color:var(--muted);
}
.topbar-clock #tbTime {
	color:var(--accent);
	font-size:12px;
	font-weight:600;
	letter-spacing:.05em;
}
.tbc-sep {
	color:var(--dim);
}
.main {
	background:var(--bg1);
	display:flex;
	flex-direction:column;
	transition:background .3s;
}
.content {
	flex:1;
}
.section {
	padding:26px 26px;
	border-bottom:1px solid var(--line2);
}
.hero {
	padding:36px 26px 28px;
	border-bottom:1px solid var(--line2);
	position:relative;
	overflow:hidden;
}
.hero::before {
	content:"";
	position:absolute;
	right:-60px;
	top:-60px;
	width:280px;
	height:280px;
	border-radius:50%;
	background:radial-gradient(circle,rgba(88,166,255,.07) 0%,transparent 70%);
	pointer-events:none;
}
.kw{
	color:var(--purple)
}
.fn{
	color:var(--blue)
}
.str{
	color:var(--orange)
}
.val{
	color:var(--cyan)
}
.cmt{
	color:var(--dim);
	font-style:italic
}
.op{
	color:var(--muted)
}
.obj{
	color:#ffa657
}
.big-name {
	font-family:'Syne',sans-serif;
	font-size:40px;
	font-weight:800;
	color:var(--bright);
	letter-spacing:-2px;
	line-height:1;
	margin:18px 0 5px;
}
.big-sub {
	font-size:12.5px;
	color:var(--muted);
	margin-bottom:20px;
}
.big-sub span {
	color:var(--green);
}
.stack-row {
	display:flex;
	flex-wrap:wrap;
	gap:7px;
}
.lang-badge {
	font-size:10.5px;
	padding:3px 9px;
	border-radius:4px;
	border:1px solid;
	display:inline-flex;
	align-items:center;
	gap:4px;
}
.lb-bat{
	background:#1a1a2e;
	border-color:#ffd700;
	color:#ffd700
}
.lb-js{
	background:#1a1a1a;
	border-color:#f7df1e;
	color:#f7df1e
}
.lb-cs{
	background:#0d1b2e;
	border-color:#9b4993;
	color:#c07dd9
}
.lb-php{
	background:#1b0d2e;
	border-color:#8892be;
	color:#8892be
}
.sec-head {
	display:flex;
	align-items:center;
	gap:9px;
	margin-bottom:18px;
}
.sec-head-line {
	flex:1;
	height:1px;
	background:var(--line2);
}
.sec-head-label {
	font-size:9.5px;
	color:var(--dim);
	letter-spacing:.15em;
	text-transform:uppercase;
}
.sec-head-num {
	font-size:10px;
	color:var(--green);
	border:1px solid var(--green-dim);
	padding:1px 6px;
	border-radius:3px;
}
.gh-stats-grid {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:9px;
	margin-bottom:14px;
}
.gh-stat-card {
	background:var(--bg2);
	border:1px solid var(--line2);
	border-radius:6px;
	padding:14px 12px;
	text-align:center;
	transition:border-color .2s,transform .15s;
}
.gh-stat-card:hover {
	border-color:var(--accent);
	transform:translateY(-2px);
}
.gh-stat-num {
	font-family:'Syne',sans-serif;
	font-size:24px;
	font-weight:800;
	color:var(--bright);
}
.gh-stat-lbl {
	font-size:9.5px;
	color:var(--dim);
	text-transform:uppercase;
	letter-spacing:.1em;
	margin-top:3px;
}
.gh-repos-list {
	display:flex;
	flex-direction:column;
	gap:7px;
}
.gh-repo-card {
	display:flex;
	align-items:center;
	gap:10px;
	padding:10px 12px;
	background:var(--bg2);
	border:1px solid var(--line2);
	border-radius:6px;
	text-decoration:none;
	color:var(--text);
	font-size:11.5px;
	transition:all .2s;
}
.gh-repo-card:hover {
	border-color:var(--accent);
	background:var(--accent-dim);
}
.gh-repo-icon {
	color:var(--dim);
	flex-shrink:0;
}
.gh-repo-name {
	color:var(--blue);
	font-weight:600;
}
.gh-repo-desc {
	font-size:10.5px;
	color:var(--dim);
	margin-top:2px;
}
.gh-repo-meta {
	margin-left:auto;
	display:flex;
	gap:8px;
	align-items:center;
	font-size:10px;
	color:var(--dim);
	flex-shrink:0;
}
.gh-lang-dot {
	width:10px;
	height:10px;
	border-radius:50%;
	display:inline-block;
}
.gh-loading {
	text-align:center;
	padding:20px;
	color:var(--dim);
	font-size:11px;
}
.contact-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:9px;
}
.contact-card {
	display:flex;
	align-items:center;
	gap:11px;
	padding:13px 14px;
	background:var(--bg2);
	border:1px solid var(--line2);
	border-radius:6px;
	text-decoration:none;
	color:var(--text);
	font-size:12px;
	transition:all .2s;
	cursor:pointer;
}
.contact-card:hover {
	border-color:var(--blue);
	background:var(--blue-dim);
	transform:translateX(3px);
}
.contact-card:hover .cc-icon {
	color:var(--blue);
}
.contact-card:hover .cc-arrow {
	transform:translateX(3px);
	color:var(--blue);
}
.contact-card.zalo-card:hover {
	border-color:var(--zalo);
	background:var(--zalo-dim);
}
.contact-card.zalo-card:hover .cc-icon,.contact-card.zalo-card:hover .cc-arrow {
	color:var(--zalo);
}
.contact-card.tools-card {
	grid-column:1/-1;
}
.contact-card.tools-card:hover {
	border-color:var(--green);
	background:var(--green-dim);
}
.contact-card.tools-card:hover .cc-icon,.contact-card.tools-card:hover .cc-arrow {
	color:var(--green);
}
.cc-icon {
	font-size:17px;
	width:34px;
	height:34px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--bg3);
	border-radius:5px;
	border:1px solid var(--line2);
	color:var(--muted);
	transition:color .2s;
	flex-shrink:0;
}
.cc-info {
	display:flex;
	flex-direction:column;
	gap:2px;
	min-width:0;
}
.cc-label {
	font-size:9.5px;
	color:var(--dim);
}
.cc-value {
	font-size:12px;
	color:var(--text);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.cc-arrow {
	margin-left:auto;
	color:var(--dim);
	font-size:12px;
	transition:transform .2s,color .2s;
	flex-shrink:0;
}
.terminal-wrap {
	background:var(--bg0);
	border:1px solid var(--line2);
	border-radius:8px;
	overflow:hidden;
}
.terminal-bar {
	display:flex;
	align-items:center;
	gap:6px;
	padding:9px 13px;
	background:var(--bg2);
	border-bottom:1px solid var(--line2);
}
.terminal-bar .dot {
	width:10px;
	height:10px;
}
.terminal-ttl {
	margin-left:6px;
	font-size:10.5px;
	color:var(--dim);
}
.term-hint {
	margin-left:auto;
	font-size:9.5px;
	color:var(--dim);
}
.terminal-body {
	padding:14px 16px;
	font-size:12.5px;
	line-height:1.5;
	height:420px;
	overflow-y:auto;
	overflow-x:auto;
	display:flex;
	flex-direction:column;
	font-family:'JetBrains Mono','Courier New','Lucida Console',monospace;
	letter-spacing:0;
	font-variant-ligatures:none;
	font-feature-settings:'liga' 0, 'calt' 0;
	white-space:pre;
}
.terminal-body::-webkit-scrollbar {
	width:4px;
}
.terminal-body::-webkit-scrollbar-thumb {
	background:var(--line2);
}
.term-output {
	white-space:pre;
	word-break:normal;
	/* KHÔNG break-all */
	word-wrap:normal;
	overflow-wrap:normal;
	font-family:inherit;
	font-size:inherit;
	line-height:1.5;
	letter-spacing:0;
	font-variant-ligatures:none;
	font-feature-settings:'liga' 0, 'calt' 0;
}
.t-prompt{
	color:var(--green);
	user-select:none
}
.t-host{
	color:var(--blue);
	user-select:none
}
.t-sep{
	color:var(--dim);
	user-select:none
}
.t-cmd{
	color:var(--bright)
}
.t-out{
	color:var(--muted)
}
.t-out-hi{
	color:var(--text)
}
.t-ok{
	color:var(--green)
}
.t-err{
	color:var(--red)
}
.t-warn{
	color:var(--orange)
}
.t-info{
	color:var(--blue)
}
.t-dim{
	color:var(--dim)
}
.t-ai{
	color:var(--purple)
}
.t-thinking{
	color:var(--dim);
	font-style:italic
}
.term-input-row {
	display:flex;
	align-items:center;
	padding:10px 16px;
	border-top:1px solid var(--line2);
	background:var(--bg0);
}
.term-prefix {
	font-size:12.5px;
	white-space:nowrap;
	user-select:none;
}
.term-input {
	flex:1;
	background:transparent;
	border:none;
	outline:none;
	caret-color:var(--green);
	color:var(--bright);
	font-family:'JetBrains Mono',monospace;
	font-size:12.5px;
	padding:0 6px;
}
.autocomplete {
	position:absolute;
	bottom:100%;
	left:0;
	right:0;
	background:var(--bg2);
	border:1px solid var(--line2);
	border-radius:6px 6px 0 0;
	overflow:hidden;
	display:none;
	z-index:20;
}
.autocomplete.show {
	display:block;
}
.ac-item {
	padding:6px 14px;
	font-size:11.5px;
	color:var(--muted);
	cursor:pointer;
	display:flex;
	gap:10px;
	align-items:center;
	transition:background .1s;
}
.ac-item:hover,.ac-item.selected {
	background:var(--bg3);
	color:var(--bright);
}
.ac-cmd{
	color:var(--blue);
	min-width:90px
}
.ac-desc{
	color:var(--dim);
	font-size:10.5px
}
.term-input-wrap {
	position:relative;
	flex:1;
	display:flex;
	align-items:center;
}
.contrib-grid {
	display:grid;
	grid-template-columns:repeat(52,1fr);
	gap:2px;
}
.contrib-cell {
	aspect-ratio:1;
	border-radius:2px;
	background:var(--line);
	transition:transform .1s;
}
.contrib-cell:hover {
	transform:scale(1.6);
	z-index:2;
}
.c1{
	background:#0e4429
}
.c2{
	background:#006d32
}
.c3{
	background:#26a641
}
.c4{
	background:#39d353
}
.contrib-tooltip {
	position:fixed;
	background:var(--bg2);
	border:1px solid var(--line2);
	color:var(--text);
	font-size:10.5px;
	padding:5px 9px;
	border-radius:5px;
	pointer-events:none;
	display:none;
	z-index:999;
	white-space:nowrap;
}
/* ═══════ MUSIC PLAYER ═══════════════════════════════════ */
#musicPlayer {
	position:fixed;
	bottom:20px;
	right:20px;
	z-index:60;
	background:var(--bg2);
	border:1px solid var(--line2);
	border-radius:12px;
	padding:12px 16px;
	display:flex;
	flex-direction:column;
	gap:8px;
	min-width:220px;
	max-width:260px;
	box-shadow:0 8px 32px rgba(0,0,0,.5);
	transition:all .3s;
}
#musicPlayer.minimized {
	min-width:auto;
	max-width:auto;
	padding:8px 12px;
}
.mp-header {
	display:flex;
	align-items:center;
	gap:8px;
}
.mp-icon {
	font-size:16px;
	animation:spin 3s linear infinite;
	animation-play-state:paused;
}
.mp-icon.playing {
	animation-play-state:running;
}
@keyframes spin{
	to{
		transform:rotate(360deg)
}
}
.mp-title {
	flex:1;
	font-size:10.5px;
	color:var(--text);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.mp-title .mp-track {
	color:var(--accent);
	font-size:11px;
}
.mp-min-btn {
	color:var(--dim);
	cursor:pointer;
	font-size:12px;
	padding:2px 4px;
	border-radius:3px;
	transition:all .15s;
}
.mp-min-btn:hover {
	color:var(--text);
	background:var(--bg3);
}
.mp-controls {
	display:flex;
	align-items:center;
	gap:8px;
}
#musicPlayer.minimized .mp-controls {
	display:none;
}
#musicPlayer.minimized .mp-title {
	display:none;
}
.mp-btn {
	width:28px;
	height:28px;
	border-radius:50%;
	background:var(--bg3);
	border:1px solid var(--line2);
	color:var(--text);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:11px;
	transition:all .15s;
}
.mp-btn:hover {
	border-color:var(--accent);
	color:var(--accent);
}
.mp-btn.mp-play-btn {
	width:34px;
	height:34px;
	background:var(--accent-dim);
	border-color:var(--accent);
	color:var(--accent);
	font-size:13px;
}
.mp-progress-wrap {
	flex:1;
	display:flex;
	flex-direction:column;
	gap:3px;
}
.mp-progress-bar {
	height:3px;
	background:var(--line2);
	border-radius:2px;
	cursor:pointer;
	position:relative;
	overflow:hidden;
}
.mp-progress-fill {
	height:100%;
	background:var(--accent);
	border-radius:2px;
	width:0%;
	transition:width .5s linear;
}
.mp-time {
	font-size:9px;
	color:var(--dim);
}
.mp-vol {
	display:flex;
	align-items:center;
	gap:6px;
	font-size:9.5px;
	color:var(--dim);
}
.mp-vol-slider {
	flex:1;
	height:3px;
	accent-color:var(--accent);
	cursor:pointer;
}
#musicPlayer.minimized .mp-vol {
	display:none;
}
.mp-visualizer {
	display:flex;
	align-items:flex-end;
	gap:2px;
	height:20px;
}
#musicPlayer.minimized .mp-visualizer {
	display:none;
}
.mp-bar {
	width:3px;
	background:var(--accent);
	border-radius:2px;
	transition:height .15s;
	opacity:.7;
}
/* ═══════ GUESTBOOK ═══════════════════════════════════════ */
.gb-form {
	display:flex;
	flex-direction:column;
	gap:10px;
	margin-bottom:20px;
	background:var(--bg2);
	border:1px solid var(--line2);
	border-radius:8px;
	padding:16px;
}
.gb-form-row {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
}
.gb-input {
	background:var(--bg0);
	border:1px solid var(--line2);
	border-radius:5px;
	padding:8px 11px;
	color:var(--text);
	font-family:'JetBrains Mono',monospace;
	font-size:11.5px;
	outline:none;
	transition:border-color .2s;
	width:100%;
}
.gb-input:focus {
	border-color:var(--accent);
}
.gb-textarea {
	min-height:70px;
	resize:vertical;
}
.gb-emoji-row {
	display:flex;
	gap:6px;
	flex-wrap:wrap;
}
.gb-emoji {
	width:32px;
	height:32px;
	font-size:18px;
	cursor:pointer;
	border-radius:6px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:1px solid transparent;
	transition:all .15s;
	background:var(--bg3);
}
.gb-emoji:hover,.gb-emoji.selected {
	border-color:var(--accent);
	background:var(--accent-dim);
	transform:scale(1.15);
}
.gb-submit {
	align-self:flex-end;
	padding:8px 20px;
	background:var(--accent-dim);
	border:1px solid var(--accent);
	color:var(--accent);
	border-radius:5px;
	cursor:pointer;
	font-family:'JetBrains Mono',monospace;
	font-size:11.5px;
	transition:all .2s;
}
.gb-submit:hover {
	background:var(--accent);
	color:var(--bg0);
}
.gb-submit:disabled {
	opacity:.5;
	cursor:not-allowed;
}
.gb-entries {
	display:flex;
	flex-direction:column;
	gap:8px;
}
.gb-entry {
	background:var(--bg2);
	border:1px solid var(--line2);
	border-radius:7px;
	padding:12px 14px;
	display:flex;
	gap:10px;
	align-items:flex-start;
	transition:border-color .2s;
}
.gb-entry:hover {
	border-color:var(--accent);
}
.gb-entry-emoji {
	font-size:22px;
	flex-shrink:0;
	line-height:1;
}
.gb-entry-body {
	flex:1;
	min-width:0;
}
.gb-entry-header {
	display:flex;
	align-items:center;
	gap:8px;
	margin-bottom:4px;
}
.gb-entry-name {
	font-size:11.5px;
	font-weight:600;
	color:var(--bright);
}
.gb-entry-time {
	font-size:9.5px;
	color:var(--dim);
}
.gb-entry-msg {
	font-size:11.5px;
	color:var(--muted);
	line-height:1.5;
	word-break:break-word;
}
.gb-empty {
	text-align:center;
	padding:30px;
	color:var(--dim);
	font-size:11px;
}
.gb-status {
	font-size:10.5px;
	padding:6px 10px;
	border-radius:4px;
	margin-top:4px;
}
.gb-status.ok {
	color:var(--green);
	background:var(--green-dim);
	border:1px solid rgba(63,185,80,.3);
}
.gb-status.err {
	color:var(--red);
	background:rgba(248,81,73,.1);
	border:1px solid rgba(248,81,73,.3);
}
/* ═══════ ADMIN PAGE ══════════════════════════════════════ */
#adminOverlay {
	display:none;
	position:fixed;
	inset:0;
	z-index:90;
	background:rgba(0,0,0,.95);
	backdrop-filter:blur(10px);
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:20px;
}
#adminOverlay.show {
	display:flex;
}
.admin-panel {
	background:var(--bg1);
	border:1px solid var(--line2);
	border-radius:12px;
	padding:28px;
	width:min(90vw,460px);
	max-height:85vh;
	overflow-y:auto;
}
.admin-panel::-webkit-scrollbar {
	width:4px;
}
.admin-panel::-webkit-scrollbar-thumb {
	background:var(--line2);
}
.admin-header {
	display:flex;
	align-items:center;
	gap:12px;
	margin-bottom:20px;
}
.admin-lock-icon {
	font-size:22px;
	width:40px;
	height:40px;
	background:var(--bg2);
	border:1px solid var(--line2);
	border-radius:8px;
	display:flex;
	align-items:center;
	justify-content:center;
}
.admin-title {
	font-family:'Syne',sans-serif;
	font-size:17px;
	font-weight:700;
	color:var(--bright);
}
.admin-sub {
	font-size:10.5px;
	color:var(--dim);
	margin-top:2px;
}
.admin-login-form {
	display:flex;
	flex-direction:column;
	gap:12px;
}
.admin-input-wrap {
	position:relative;
}
.admin-input {
	width:100%;
	background:var(--bg0);
	border:1px solid var(--line2);
	border-radius:6px;
	padding:10px 12px;
	color:var(--text);
	font-family:'JetBrains Mono',monospace;
	font-size:12.5px;
	outline:none;
	transition:border-color .2s;
}
.admin-input:focus {
	border-color:var(--accent);
}
.admin-btn {
	padding:10px 20px;
	background:var(--accent-dim);
	border:1px solid var(--accent);
	color:var(--accent);
	border-radius:6px;
	cursor:pointer;
	font-family:'JetBrains Mono',monospace;
	font-size:12px;
	transition:all .2s;
	width:100%;
}
.admin-btn:hover {
	background:var(--accent);
	color:var(--bg0);
}
.admin-close-btn {
	position:absolute;
	top:16px;
	right:16px;
	width:32px;
	height:32px;
	background:var(--bg2);
	border:1px solid var(--line2);
	border-radius:50%;
	color:var(--dim);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:14px;
	transition:all .15s;
}
.admin-close-btn:hover {
	color:var(--red);
	border-color:var(--red);
}
.admin-err {
	color:var(--red);
	font-size:10.5px;
	margin-top:4px;
}
.admin-content {
	display:none;
}
.admin-content.show {
	display:block;
}
.admin-stat-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
	margin-bottom:16px;
}
.admin-stat {
	background:var(--bg2);
	border:1px solid var(--line2);
	border-radius:7px;
	padding:14px;
	text-align:center;
}
.admin-stat-num {
	font-family:'Syne',sans-serif;
	font-size:22px;
	font-weight:800;
	color:var(--accent);
}
.admin-stat-lbl {
	font-size:9px;
	color:var(--dim);
	text-transform:uppercase;
	margin-top:3px;
}
.admin-section-title {
	font-size:11px;
	color:var(--muted);
	text-transform:uppercase;
	letter-spacing:.1em;
	margin:14px 0 8px;
	border-bottom:1px solid var(--line);
	padding-bottom:5px;
}
.admin-gb-row {
	display:flex;
	align-items:flex-start;
	gap:8px;
	padding:8px 10px;
	background:var(--bg2);
	border-radius:6px;
	border:1px solid var(--line);
	margin-bottom:5px;
	font-size:11px;
}
.admin-del-btn {
	margin-left:auto;
	color:var(--red);
	cursor:pointer;
	font-size:11px;
	padding:2px 6px;
	border-radius:3px;
	border:1px solid rgba(248,81,73,.3);
	background:rgba(248,81,73,.1);
	flex-shrink:0;
	transition:all .15s;
}
.admin-del-btn:hover {
	background:var(--red);
	color:var(--bg0);
}
/* ═══════ EASTER EGGS ════════════════════════════════════ */
#eggOverlay {
	display:none;
	position:fixed;
	inset:0;
	z-index:200;
	background:rgba(0,0,0,.97);
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:16px;
	text-align:center;
}
#eggOverlay.show {
	display:flex;
}
.egg-art {
	font-size:13px;
	color:var(--accent);
	line-height:1.4;
	white-space:pre;
}
.egg-close {
	padding:8px 20px;
	border:1px solid var(--accent);
	border-radius:4px;
	color:var(--accent);
	cursor:pointer;
	font-size:12px;
	background:var(--accent-dim);
}
/* ═══════ GAME OVERLAY ════════════════════════════════════ */
#gameOverlay {
	display:none;
	position:fixed;
	inset:0;
	z-index:100;
	background:rgba(0,0,0,.94);
	backdrop-filter:blur(8px);
	overflow-y:auto;
	overflow-x:hidden;
}
#gameOverlay.show {
	display:block;
}
.game-inner {
	min-height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	padding:14px 12px 20px;
	gap:12px;
}
.game-topbar {
	width:100%;
	max-width:520px;
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
}
.game-tabs {
	display:flex;
	gap:6px;
}
.game-tab {
	padding:7px 14px;
	border:1px solid var(--line2);
	border-radius:6px;
	font-family:'JetBrains Mono',monospace;
	font-size:12px;
	color:var(--muted);
	background:var(--bg2);
	cursor:pointer;
	transition:all .15s;
	min-height:36px;
}
.game-tab.active {
	color:var(--accent);
	border-color:var(--accent);
	background:var(--accent-dim);
}
.game-score-pill {
	font-family:'JetBrains Mono',monospace;
	font-size:12px;
	color:var(--accent);
	background:var(--bg2);
	border:1px solid var(--line2);
	padding:6px 12px;
	border-radius:6px;
	white-space:nowrap;
}
.game-close-btn {
	margin-left:auto;
	width:36px;
	height:36px;
	border-radius:50%;
	background:var(--bg2);
	border:1px solid var(--line2);
	color:var(--dim);
	font-size:16px;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:all .15s;
	flex-shrink:0;
}
.game-close-btn:hover {
	color:var(--bright);
	border-color:var(--red);
	background:rgba(248,81,73,.15);
}
.game-canvas-wrap {
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
}
#snakeStartBtn {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background:rgba(0,0,0,0.75);
	border:2px solid var(--accent);
	border-radius:10px;
	padding:18px 32px;
	text-align:center;
	cursor:pointer;
	z-index:5;
	backdrop-filter:blur(4px);
	transition:all .2s;
}
#snakeStartBtn:hover {
	background:var(--accent-dim);
	transform:translate(-50%,-50%) scale(1.04);
}
#snakeStartBtn .ssb-title {
	font-family:'Syne',sans-serif;
	font-size:20px;
	font-weight:800;
	color:var(--bright);
	margin-bottom:6px;
}
#snakeStartBtn .ssb-sub {
	font-size:11px;
	color:var(--accent);
}
#snakeStartBtn.hidden {
	display:none;
}
#gameCanvas,#flyCanvas {
	border:2px solid var(--line2);
	border-radius:8px;
	image-rendering:pixelated;
	display:block;
}
#board2048 {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:6px;
	background:var(--bg3);
	padding:8px;
	border-radius:8px;
	border:2px solid var(--line2);
}
.tile {
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:5px;
	font-family:'Syne',sans-serif;
	font-weight:800;
	transition:all .1s;
	border:1px solid var(--line2);
}
.score-board {
	width:100%;
	background:var(--bg2);
	border:1px solid var(--line2);
	border-radius:8px;
	overflow:hidden;
	margin-top:4px;
}
.score-board .sb-head {
	padding:8px 14px;
	font-size:10px;
	color:var(--dim);
	text-transform:uppercase;
	letter-spacing:.12em;
	border-bottom:1px solid var(--line);
	background:var(--bg3);
}
.score-board .sb-row {
	display:flex;
	align-items:center;
	gap:10px;
	padding:6px 14px;
	font-size:11px;
	border-bottom:1px solid var(--line);
	color:var(--muted);
}
.score-board .sb-row:last-child {
	border-bottom:none;
}
.score-board .sb-rank {
	color:var(--dim);
	min-width:22px;
}
.score-board .sb-score {
	color:var(--accent);
	font-weight:600;
	margin-left:auto;
}
#dpad {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:5px;
	padding:8px;
	background:rgba(255,255,255,0.04);
	border:1px solid var(--line2);
	border-radius:12px;
	user-select:none;
}
#dpad.fly-mode {
	flex-direction:row;
	gap:10px;
	align-items:center;
	justify-content:center;
	flex-wrap:nowrap;
}
.dp-btn {
	width:56px;
	height:56px;
	border-radius:10px;
	background:rgba(255,255,255,0.08);
	border:1.5px solid var(--line2);
	color:var(--text);
	font-size:20px;
	display:flex;
	align-items:center;
	justify-content:center;
	cursor:pointer;
	touch-action:none;
	transition:background .1s,border-color .1s;
	-webkit-tap-highlight-color:transparent;
}
#dpadCross {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:5px;
}
.dp-btn:active, .dp-btn.pressed {
	background:var(--accent-dim);
	border-color:var(--accent);
	color:var(--accent);
}
.dp-row {
	display:flex;
	gap:5px;
}
.dp-btn-fire {
	width:72px;
	height:56px;
	border-radius:10px;
	background:rgba(248,81,73,.15);
	border:1.5px solid var(--red);
	color:var(--red);
	font-size:18px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:2px;
	cursor:pointer;
	touch-action:none;
	-webkit-tap-highlight-color:transparent;
}
.dp-btn-fire:active {
	background:rgba(248,81,73,.35);
}
.game-hint {
	font-size:10px;
	color:var(--dim);
	background:var(--bg2);
	border:1px solid var(--line);
	padding:5px 14px;
	border-radius:20px;
	text-align:center;
}
/* Konami */
#konamiOverlay {
	display:none;
	position:fixed;
	inset:0;
	z-index:200;
	background:rgba(0,0,0,.97);
	align-items:center;
	justify-content:center;
	flex-direction:column;
	gap:20px;
	text-align:center;
}
#konamiOverlay.show {
	display:flex;
}
.konami-art {
	font-size:14px;
	color:var(--accent);
	line-height:1.4;
	white-space:pre;
}
.konami-close {
	padding:8px 20px;
	border:1px solid var(--accent);
	border-radius:4px;
	color:var(--accent);
	cursor:pointer;
	font-size:12px;
	background:var(--accent-dim);
}
/* ── MOBILE ── */
@media(max-width:680px){
	.root {
		grid-template-columns:1fr;
	}
	.sidebar {
		display:none;
	}
	.contact-grid {
		grid-template-columns:1fr;
	}
	.contact-card.tools-card {
		grid-column:1;
	}
	.big-name {
		font-size:28px;
	}
	.contrib-grid {
		grid-template-columns:repeat(26,1fr);
	}
	.gh-stats-grid {
		grid-template-columns:repeat(3,1fr);
	}
	.section {
		padding:18px 14px;
	}
	.hero {
		padding:22px 14px 18px;
	}
	.terminal-body {
		height:260px;
		font-size:9px;
		/* nhỏ hơn để ASCII art vừa màn hình */
		overflow-x:auto;
	}
	.term-output {
		font-size:11.5px;
	}
	.term-input {
		font-size:11.5px;
	}
	#bottomNav {
		display:flex;
	}
	.main {
		padding-bottom:64px;
	}
	.game-hint {
		display:none;
	}
	.topbar-clock {
		font-size:9px;
		padding:3px 8px;
	}
	.topbar-clock #tbTime {
		font-size:10px;
	}
	#musicPlayer {
		bottom:70px;
		right:10px;
		min-width:190px;
	}
	.gb-form-row {
		grid-template-columns:1fr;
	}
}
/* Bottom Nav */
#bottomNav {
	display:none;
	position:fixed;
	bottom:0;
	left:0;
	right:0;
	z-index:50;
	background:var(--bg1);
	border-top:1px solid var(--line2);
	height:58px;
	align-items:center;
	justify-content:space-around;
	padding:0 4px;
	padding-bottom:env(safe-area-inset-bottom);
}
.bn-item {
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:3px;
	font-size:9px;
	color:var(--dim);
	cursor:pointer;
	min-width:48px;
	min-height:48px;
	justify-content:center;
	border-radius:8px;
	padding:4px 8px;
	transition:all .15s;
	user-select:none;
}
.bn-item.active {
	color:var(--accent);
	background:var(--accent-dim);
}
.bn-item span:first-child {
	font-size:20px;
}
/* Clock */
.clock-row {
	display:flex;
	gap:10px;
	flex-wrap:wrap;
}
.clock-card {
	flex:1;
	min-width:120px;
	background:var(--bg2);
	border:1px solid var(--line2);
	border-radius:6px;
	padding:14px 16px;
	text-align:center;
}
.clock-num {
	font-family:'Syne',sans-serif;
	font-size:26px;
	font-weight:700;
	color:var(--bright);
	letter-spacing:1px;
}
.clock-lbl {
	font-size:9.5px;
	color:var(--dim);
	letter-spacing:.1em;
	text-transform:uppercase;
	margin-top:3px;
}
.gb-comment-input {
	background:var(--bg0);
	border:1px solid var(--line2);
	border-radius:5px;
	padding:5px 8px;
	color:var(--text);
	font-family:'JetBrains Mono',monospace;
	font-size:11px;
	outline:none;
	width:100%;
}
.gb-comment-input:focus {
	border-color:var(--accent);
}
/* ═══════ HELP POPUP ════════════════════════════════════ */
#helpPopupOverlay {
	display:none;
	position:fixed;
	inset:0;
	z-index:96;
	background:rgba(0,0,0,.78);
	backdrop-filter:blur(8px);
	align-items:center;
	justify-content:center;
	padding:16px;
}
#helpPopupOverlay.show {
	display:flex;
}
.help-popup {
	background:var(--bg1);
	border:1px solid var(--line2);
	border-radius:12px;
	width:min(96vw,660px);
	max-height:88vh;
	display:flex;
	flex-direction:column;
	box-shadow:0 20px 60px rgba(0,0,0,.7);
	animation:popIn .2s cubic-bezier(.34,1.56,.64,1);
	overflow:hidden;
}
.help-popup-header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:16px 20px;
	border-bottom:1px solid var(--line2);
	background:var(--bg2);
	flex-shrink:0;
}
.help-popup-title {
	font-family:'Syne',sans-serif;
	font-size:15px;
	font-weight:700;
	color:var(--bright);
	display:flex;
	align-items:center;
	gap:8px;
}
.help-popup-subtitle {
	font-size:10px;
	color:var(--dim);
	margin-top:2px;
}
.help-popup-close {
	width:28px;
	height:28px;
	border-radius:50%;
	background:var(--bg3);
	border:1px solid var(--line2);
	color:var(--dim);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:13px;
	transition:all .15s;
	flex-shrink:0;
}
.help-popup-close:hover {
	color:var(--red);
	border-color:var(--red);
}
.help-popup-body {
	overflow-y:auto;
	padding:8px 0;
	flex:1;
	font-family:'JetBrains Mono',monospace;
	font-size:12px;
	line-height:1.7;
}
.help-popup-body::-webkit-scrollbar {
	width:4px;
}
.help-popup-body::-webkit-scrollbar-thumb {
	background:var(--line2);
	border-radius:4px;
}
.help-section {
	padding:10px 20px 4px;
}
.help-section-title {
	font-size:10px;
	color:var(--orange);
	text-transform:uppercase;
	letter-spacing:.12em;
	margin-bottom:8px;
	display:flex;
	align-items:center;
	gap:8px;
}
.help-section-title::after {
	content:'';
	flex:1;
	height:1px;
	background:var(--line2);
}
.help-cmd-grid {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:3px 16px;
}
@media(max-width:500px){
	.help-cmd-grid {
		grid-template-columns:1fr;
	}
}
.help-cmd-row {
	display:flex;
	align-items:baseline;
	gap:8px;
	padding:4px 8px;
	border-radius:5px;
	transition:background .1s;
}
.help-cmd-row:hover {
	background:var(--bg2);
}
.help-cmd-name {
	font-family:'JetBrains Mono',monospace;
	font-size:11.5px;
	color:var(--blue);
	font-weight:600;
	white-space:nowrap;
	min-width:110px;
	flex-shrink:0;
}
.help-cmd-name.cmd-ai {
	color:var(--purple);
}
.help-cmd-name.cmd-game {
	color:var(--green);
}
.help-cmd-name.cmd-fun {
	color:var(--orange);
}
.help-cmd-name.cmd-secret {
	color:var(--dim);
}
.help-cmd-desc {
	font-size:11px;
	color:var(--muted);
	line-height:1.4;
}
.help-cmd-example {
	font-size:10px;
	color:var(--dim);
	font-style:italic;
}
.help-popup-footer {
	padding:10px 20px;
	border-top:1px solid var(--line2);
	background:var(--bg2);
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-shrink:0;
	flex-wrap:wrap;
	gap:8px;
}
.help-footer-tip {
	font-size:10px;
	color:var(--dim);
}
.help-footer-tip span {
	color:var(--accent);
}
.help-search {
	background:var(--bg0);
	border:1px solid var(--line2);
	border-radius:5px;
	padding:5px 10px;
	color:var(--text);
	font-family:'JetBrains Mono',monospace;
	font-size:11px;
	outline:none;
	width:160px;
	transition:border-color .2s;
}
.help-search:focus {
	border-color:var(--accent);
}
.help-cmd-row.hidden {
	display:none;
}
/* ═══════ EDIT POPUP ══════════════════════════════════════ */
#editPopupOverlay {
	display:none;
	position:fixed;
	inset:0;
	z-index:95;
	background:rgba(0,0,0,.72);
	backdrop-filter:blur(6px);
	align-items:center;
	justify-content:center;
}
#editPopupOverlay.show {
	display:flex;
}
.edit-popup {
	background:var(--bg1);
	border:1px solid var(--line2);
	border-radius:12px;
	padding:24px 26px;
	width:min(90vw,440px);
	box-shadow:0 16px 48px rgba(0,0,0,.6);
	animation:popIn .18s cubic-bezier(.34,1.56,.64,1);
	position:relative;
}
@keyframes popIn{
	from{
		transform:scale(.92);
		opacity:0
}
	to{
		transform:scale(1);
		opacity:1
}
}
.edit-popup-header {
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:16px;
}
.edit-popup-title {
	font-family:'Syne',sans-serif;
	font-size:15px;
	font-weight:700;
	color:var(--bright);
}
.edit-popup-close {
	width:28px;
	height:28px;
	border-radius:50%;
	background:var(--bg2);
	border:1px solid var(--line2);
	color:var(--dim);
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:13px;
	transition:all .15s;
	flex-shrink:0;
}
.edit-popup-close:hover {
	color:var(--red);
	border-color:var(--red);
}
.edit-popup-label {
	font-size:10px;
	color:var(--dim);
	text-transform:uppercase;
	letter-spacing:.1em;
	margin-bottom:6px;
}
.edit-popup-textarea {
	width:100%;
	background:var(--bg0);
	border:1px solid var(--line2);
	border-radius:6px;
	padding:10px 12px;
	color:var(--text);
	font-family:'JetBrains Mono',monospace;
	font-size:12px;
	outline:none;
	resize:vertical;
	min-height:90px;
	transition:border-color .2s;
	line-height:1.6;
	box-sizing:border-box;
}
.edit-popup-textarea:focus {
	border-color:var(--accent);
}
.edit-popup-counter {
	font-size:9.5px;
	color:var(--dim);
	text-align:right;
	margin-top:4px;
}
.edit-popup-footer {
	display:flex;
	gap:8px;
	justify-content:flex-end;
	margin-top:16px;
}
.edit-popup-btn {
	padding:8px 18px;
	border-radius:6px;
	cursor:pointer;
	font-family:'JetBrains Mono',monospace;
	font-size:11.5px;
	transition:all .2s;
	border:1px solid;
}
.edit-popup-btn.cancel {
	background:var(--bg2);
	border-color:var(--line2);
	color:var(--muted);
}
.edit-popup-btn.cancel:hover {
	border-color:var(--dim);
	color:var(--text);
}
.edit-popup-btn.save {
	background:var(--accent-dim);
	border-color:var(--accent);
	color:var(--accent);
}
.edit-popup-btn.save:hover {
	background:var(--accent);
	color:var(--bg0);
}
.edit-popup-btn:disabled {
	opacity:.45;
	cursor:not-allowed;
}
.game-name-prompt {
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px;background:var(--bg2);border:1px solid var(--line);
  border-radius:8px;margin-bottom:8px;width:100%;max-width:340px;
}
.game-name-prompt input {
  background:var(--bg3);border:1px solid var(--line2);color:var(--bright);
  font-family:'JetBrains Mono',monospace;font-size:12px;padding:6px 10px;
  border-radius:5px;width:180px;outline:none;
}
.game-name-prompt input:focus { border-color:var(--accent); }
.game-name-prompt .gnp-label { font-size:10.5px;color:var(--dim); }
.game-name-prompt .gnp-btn {
  padding:5px 16px;border-radius:5px;border:1px solid var(--accent);
  background:var(--accent-dim);color:var(--accent);cursor:pointer;
  font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;
}