*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

:root {
--radius: 12px;
--radius-sm: 8px;
}

[data-theme="dark"] {
--bg: #0d0f14;
--bg3: #1a1e28;
--surface: #1e2330;
--surface2: #252b3b;
--border: rgba(255, 255, 255, 0.07);
--border-hover: rgba(255, 255, 255, 0.14);
--kick: #53fc18;
--kick-dim: rgba(83, 252, 24, 0.12);
--kick-glow: rgba(83, 252, 24, 0.25);
--text: #e8eaf0;
--text-dim: #7b8098;
--text-muted: #4a4f64;
--accent: #6c7aff;
--accent-dim: rgba(108, 122, 255, 0.12);
--header-bg: linear-gradient(135deg, #0d1a0d 0%, #0d0f14 60%);
--theme-card-hover-border: rgba(255, 255, 255, .25);
--theme-card-name-bg: rgba(0, 0, 0, .65);
--overlay-bg: rgba(10, 10, 15, 0.95);
}

[data-theme="light"] {
--bg: #f5f7fb;
--bg3: #ffffff;
--surface: #ffffff;
--surface2: #f0f2f6;
--border: rgba(12, 16, 24, 0.08);
--border-hover: rgba(12, 16, 24, 0.16);
--kick: #3fe20d;
--kick-dim: rgba(63, 226, 13, 0.18);
--kick-glow: rgba(63, 226, 13, 0.28);
--text: #0f172a;
--text-dim: #475569;
--text-muted: #94a3b8;
--accent: #4f46e5;
--accent-dim: rgba(79, 70, 229, 0.12);
--header-bg: linear-gradient(135deg, #e9f7ea 0%, #f8fafc 60%);
--theme-card-hover-border: rgba(12, 16, 24, 0.2);
--theme-card-name-bg: rgba(255, 255, 255, 0.85);
--overlay-bg: rgba(245, 247, 251, 0.95);
}

html[lang="en"] .lang-only.tr {
display: none;
}

html[lang="tr"] .lang-only.en {
display: none;
}

html[lang="tr"] .lang-only.tr {
display: inline-block;
}

html[lang="en"] .lang-only.en {
display: inline-block;
}

body {
font-family: 'Inter', sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
}

header {
background: var(--header-bg);
border-bottom: 1px solid var(--border);
padding: 20px 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
position: sticky;
top: 0;
z-index: 100;
backdrop-filter: blur(12px);
}

.logo {
display: flex;
align-items: center;
gap: 10px;
}

.header-left {
display: flex;
flex-direction: column;
gap: 4px;
}

.header-actions {
display: flex;
align-items: center;
gap: 10px;
}

.theme-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 8px;
background: var(--surface2);
border: 1px solid var(--border);
color: var(--text);
font-size: 12px;
font-weight: 600;
letter-spacing: .2px;
transition: border-color .15s, background .15s, color .15s;
}

.theme-toggle:hover {
border-color: var(--border-hover);
background: var(--bg3);
}

.theme-toggle .theme-icon {
font-size: 14px;
line-height: 1;
}

.theme-toggle .theme-label,
.theme-toggle .theme-icon {
opacity: .6;
}

.theme-toggle[aria-pressed="true"] .theme-label.light,
.theme-toggle[aria-pressed="true"] .theme-icon.light {
opacity: 1;
}

.theme-toggle[aria-pressed="false"] .theme-label.dark,
.theme-toggle[aria-pressed="false"] .theme-icon.dark {
opacity: 1;
}

.theme-toggle[aria-pressed="true"] .theme-only.light,
.theme-toggle[aria-pressed="false"] .theme-only.dark {
display: inline-flex;
}

.theme-toggle[aria-pressed="true"] .theme-only.dark,
.theme-toggle[aria-pressed="false"] .theme-only.light {
display: none;
}

.lang-toggle {
display: inline-flex;
align-items: center;
gap: 6px;
}

.lang-toggle .lang-label {
font-weight: 600;
}

.lang-toggle .lang-icon {
font-size: 14px;
line-height: 1;
opacity: .6;
}


header h1 {
font-size: 18px;
font-weight: 700;
letter-spacing: -.3px;
}

header h1 span {
color: var(--kick);
}

.header-subtitle {
font-size: 12px;
color: var(--text-dim);
}

/* ── Layout: top = 2 col, bottom = full width cmd ── */
.layout-top {
display: grid;
grid-template-columns: 1fr 380px;
gap: 24px;
max-width: 1280px;
margin: 0 auto;
padding: 32px 24px 0;
}

.layout-bottom {
max-width: 1280px;
margin: 0 auto;
padding: 24px;
}

.main-col {
display: flex;
flex-direction: column;
gap: 20px;
height: 100%;
}

/* Theme card grows to fill remaining left-column height */
.main-col .card:last-child {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}

.side-col {
display: flex;
flex-direction: column;
gap: 20px;
}

.side-col .card {
flex: 1;
}

/* ── Cards ── */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
transition: border-color .2s;
}

.card:hover {
border-color: var(--border-hover);
}

.card-title {
font-size: 13px;
font-weight: 600;
letter-spacing: .5px;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}

/* ── Form ── */
label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--text-dim);
margin-bottom: 6px;
}

input[type="text"],
input[type="url"],
select {
width: 100%;
background: var(--bg3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-family: inherit;
font-size: 14px;
padding: 10px 14px;
outline: none;
transition: border-color .2s, box-shadow .2s;
}

input:focus,
select:focus {
border-color: var(--kick);
box-shadow: 0 0 0 3px var(--kick-glow);
}

select {
cursor: pointer;
}

select option {
background: var(--bg3);
}

.input-group {
display: flex;
gap: 8px;
}

.input-group input {
flex: 1;
}

.form-row {
display: flex;
gap: 12px;
}

.form-row>* {
flex: 1;
}

/* ── Buttons ── */
button {
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 600;
border: none;
border-radius: var(--radius-sm);
padding: 10px 18px;
transition: all .15s;
}

.btn-kick {
background: var(--kick);
color: #060a00;
white-space: nowrap;
}

.btn-kick:hover:not(:disabled) {
background: #6aff2a;
box-shadow: 0 0 16px var(--kick-glow);
}

.btn-kick:active:not(:disabled) {
transform: scale(.97);
}

.btn-secondary {
background: var(--surface2);
color: var(--text);
border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
border-color: var(--border-hover);
background: var(--bg3);
}

.btn-full {
width: 100%;
padding: 14px;
font-size: 15px;
}

button:disabled {
opacity: 0.35;
cursor: not-allowed;
filter: saturate(0);
}

.info-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
margin-top: 10px;
}

.info-item {
background: var(--bg3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 8px 10px;
display: flex;
flex-direction: column;
gap: 4px;
min-height: 52px;
}

.info-label {
font-size: 11px;
color: var(--text-muted);
}

.info-value {
font-size: 12px;
color: var(--text);
word-break: break-all;
}

.info-profile {
display: flex;
align-items: center;
gap: 8px;
}

.info-profile img {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--border);
object-fit: cover;
background: var(--surface2);
}

@media (max-width: 900px) {
.info-grid {
	grid-template-columns: 1fr 1fr;
}
}

@media (max-width: 640px) {
header {
	flex-direction: column;
	align-items: flex-start;
	padding: 14px 16px;
}

.header-actions {
	width: 100%;
	flex-wrap: wrap;
	gap: 8px;
}

.header-actions>* {
	flex: 1 1 auto;
	min-width: 120px;
	justify-content: center;
}

.info-grid {
	grid-template-columns: 1fr;
}

.cmd-row {
	flex-wrap: wrap;
	align-items: flex-start;
}

.cmd-badge,
.cmd-title {
	width: auto;
}

.cmd-desc {
	display: block;
}
}

/* ── Theme picker ── */
.theme-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 1fr;
gap: 10px;
flex: 1;
min-height: 0;
}

.theme-card {
position: relative;
border-radius: var(--radius-sm);
border: 2px solid var(--border);
overflow: hidden;
cursor: pointer;
transition: all .2s;
aspect-ratio: unset;
display: flex;
align-items: flex-end;
}

.theme-card:hover {
border-color: var(--theme-card-hover-border);
transform: translateY(-2px);
}

.theme-card.selected {
border-color: var(--kick);
box-shadow: 0 0 0 1px var(--kick), 0 0 16px var(--kick-glow);
}

.theme-card-bg {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 32px;
}

.theme-card-name {
position: relative;
width: 100%;
padding: 6px 8px;
font-size: 13px;
font-weight: 600;
text-align: center;
background: var(--theme-card-name-bg);
backdrop-filter: blur(4px);
letter-spacing: .3px;
font-family: 'JetBrains Mono', monospace;
}

.theme-card .check {
position: absolute;
top: 6px;
right: 6px;
width: 18px;
height: 18px;
background: var(--kick);
border-radius: 50%;
display: none;
align-items: center;
justify-content: center;
font-size: 10px;
color: #060a00;
font-weight: 900;
}

.theme-card.selected .check {
display: flex;
}

/* ── Command list ── */
.cmd-list {
display: flex;
flex-direction: column;
gap: 0;
}

.cmd-group-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.2px;
color: var(--text-dim);
padding: 12px 0 6px;
border-bottom: 1px solid var(--border);
margin-bottom: 2px;
}

.cmd-group-title:first-child {
padding-top: 0;
}

.cmd-row {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 8px 10px;
border-radius: 6px;
border-left: 2px solid transparent;
transition: all .15s;
cursor: default;
}

.cmd-row:hover {
background: var(--bg3);
border-left-color: var(--accent);
}

.cmd-row.user-cmd:hover {
border-left-color: var(--kick);
}

.cmd-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 700;
letter-spacing: .4px;
color: var(--text-muted);
background: var(--bg3);
border: 1px solid var(--border);
padding: 4px 6px;
border-radius: 4px;
white-space: nowrap;
}

.cmd-tag.mod {
color: var(--accent);
border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.cmd-tag.user {
color: var(--kick);
border-color: color-mix(in srgb, var(--kick) 35%, var(--border));
}

.cmd-badge {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
padding: 5px 8px;
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
width: 190px;
text-align: left;
}

.cmd-badge.mod {
color: var(--accent);
background: var(--accent-dim);
}

.cmd-badge.user {
color: var(--kick);
background: var(--kick-dim);
}

.cmd-text {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
flex: 1;
}

.cmd-title {
font-size: 11px;
font-weight: 700;
letter-spacing: .2px;
color: var(--text);
}

.cmd-desc {
font-size: 10px;
color: var(--text-muted);
line-height: 1.35;
}

.footer {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px 32px;
text-align: center;
color: var(--text-muted);
font-size: 12px;
}

.footer a {
color: var(--text);
text-decoration: none;
border-bottom: 1px solid var(--border);
padding-bottom: 2px;
}

.footer a:hover {
border-bottom-color: var(--text);
}

/* ── URL preview ── */
.url-preview {
background: var(--bg3);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 12px 14px;
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--text-dim);
word-break: break-all;
line-height: 1.6;
margin-bottom: 12px;
min-height: 52px;
}

.url-preview .url-theme {
color: var(--accent);
}

/* ── Toast ── */
.header-actions {
display: flex;
gap: 12px;
}

.btn-secondary {
background: var(--surface);
border: 1px solid var(--border);
color: var(--text);
padding: 8px 16px;
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: all .2s;
min-width: 90px;
height: 38px;
}

.btn-secondary:hover {
background: var(--surface2);
border-color: var(--border-hover);
}

#toast {
position: fixed;
bottom: 24px;
right: 24px;
background: var(--surface2);
border: 1px solid var(--kick);
color: var(--text);
padding: 12px 20px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
opacity: 0;
transform: translateY(10px);
transition: all .25s;
pointer-events: none;
z-index: 999;
box-shadow: 0 0 24px var(--kick-glow);
}

#toast.show {
opacity: 1;
transform: translateY(0);
}

#loginOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--overlay-bg);
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
}

.login-logo {
margin-bottom: 20px;
}

.login-title {
font-size: 32px;
}

.login-text {
color: var(--text-muted);
margin-bottom: 30px;
font-size: 16px;
}

.login-link {
text-decoration: none;
font-size: 16px;
padding: 12px 32px;
display: inline-block;
}

.logout-link {
text-decoration: none;
color: var(--kick);
border-color: var(--kick);
}

.logout-link .logout-icon {
font-size: 14px;
line-height: 1;
}

.launch-actions {
display: flex;
flex-direction: column;
gap: 8px;
}

.launch-hint {
margin-top: 12px;
font-size: 11px;
color: var(--text-muted);
line-height: 1.6;
}

.settings-stack {
display: flex;
flex-direction: column;
gap: 12px;
}

.label-hint {
font-size: 11px;
color: var(--text-muted);
}

.info-tip {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--bg3);
color: var(--text-muted);
font-size: 10px;
cursor: help;
margin-left: 5px;
vertical-align: middle;
border: 1px solid var(--border);
user-select: none;
}

.info-tip:hover {
background: var(--accent);
color: #fff;
}

.info-tip .tip-text {
visibility: hidden;
opacity: 0;
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
background: #1a1a2e;
color: #e0e0e0;
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
line-height: 1.4;
white-space: normal;
width: 220px;
text-align: left;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
border: 1px solid #2a2a4a;
z-index: 100;
transition: opacity 0.15s;
font-weight: normal;
}

.info-tip:hover .tip-text {
visibility: visible;
opacity: 1;
}

.input-mono {
font-family: 'JetBrains Mono', monospace;
}

.input-select {
background: var(--bg3);
color: var(--text);
border: 1px solid var(--border);
border-radius: 6px;
padding: 8px;
width: 100%;
font-family: inherit;
}

.settings-save {
margin-top: 12px;
}

.theme-bg-pp {
background: linear-gradient(135deg, #e879f933, #a21caf88);
}

.theme-bg-autumn {
background: linear-gradient(135deg, #f9731633, #78350f88);
}

.theme-bg-blossoms {
background: linear-gradient(135deg, #f9a8d433, #9d174d88);
}

.theme-bg-blue {
background: linear-gradient(135deg, #38bdf833, #0c4a6e88);
}

.theme-bg-green {
background: linear-gradient(135deg, #4ade8033, #14532d88);
}

.theme-bg-red {
background: linear-gradient(135deg, #f8717133, #7f1d1d88);
}

.theme-bg-yellow {
background: linear-gradient(135deg, #fde04733, #78350f88);
}

.theme-bg-orange {
background: linear-gradient(135deg, #fb923c33, #7c2d1288);
}

.theme-bg-purple {
background: linear-gradient(135deg, #c084fc33, #3b076488);
}

.theme-bg-pink {
background: linear-gradient(135deg, #f472b633, #83184388);
}

.theme-bg-bw {
background: linear-gradient(135deg, #e5e7eb33, #11182788);
}

@media (max-width: 900px) {
.layout-top {
	grid-template-columns: 1fr;
}

.theme-grid {
	grid-template-columns: repeat(4, 1fr);
}

.cmd-list {
	grid-template-columns: 1fr;
}
}