/* Locked inner-app interaction colors (light + dark) */
.app{
	--action:#3a3f64;  /* light button */
	--link:#002aff;    /* light link */
	--link-hover:#001fcc;
	--ring: rgba(58,63,100,.22);
}
html[data-theme=dark] .app{
	--action: var(--accent-cyan); /* dark buttons use cyan */
	--link:#73BAFF;
	--link-hover: var(--accent-cyan);
	--ring: rgba(61,219,240,.26);
}

.app{max-width:1100px;width:100%;margin:0 auto}
.panel{background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.panel-head{padding:22px 24px 22px}
.brand-mark{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.22em;color:#fff;background:var(--accent-grad);padding:3px 9px;border-radius:5px;font-weight:700}
.panel h1{font-family:var(--mono);font-size:22px;font-weight:700;margin:13px 0 6px;letter-spacing:.01em;color:var(--text-main)}
.subtitle{color:var(--text-dim);font-size:13px;line-height:1.55;max-width:78ch}

.body{padding:22px 24px 24px;border-top:1px solid var(--border-strong)}
.button-row{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}

.btn{border:1px solid var(--action);background:var(--action);color:#fff;padding:9px 16px;border-radius:10px;font-family:var(--mono);font-size:13px;cursor:pointer}
html[data-theme=dark] .btn{color:#0c0e14}
.btn:hover{filter:brightness(0.96)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{border:2px solid var(--action);background:transparent;color:var(--action)}
html[data-theme=dark] .btn-ghost{color:var(--action)}
.btn-ghost:hover{filter:brightness(1.05)}
.grow{flex:1}

.app .val-status{display:none;margin-bottom:14px;font-family:var(--mono);font-size:13px;padding:12px 14px;border-radius:7px;line-height:1.4;word-break:break-word;text-transform:none;letter-spacing:normal}
.app .val-status.error{display:block;color:var(--red);border:1px solid var(--red);background:rgba(207,34,46,.08)}
.app .val-status.success{display:block;color:var(--good);border:1px solid var(--good);background:rgba(26,127,55,.08)}

.split-panes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media(max-width: 768px) {
    .split-panes { grid-template-columns: 1fr; }
}

.pane { display: flex; flex-direction: column; }
.field-label{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin:0 0 8px}
textarea{width:100%;font-family:var(--mono);font-size:13px;color:var(--text-main);line-height:1.5;background:var(--bg-screen);border:1px solid var(--border-ui);border-radius:var(--radius-sm);padding:12px 14px;resize:vertical;min-height:350px}
textarea:focus{outline:none;border-color:var(--action);box-shadow:0 0 0 3px var(--ring)}

.seo{padding:34px 24px;border-top:1px solid var(--border-strong);color:var(--text-dim);font-size:14px;line-height:1.7}
.seo h2{color:var(--text-main);font-size:18px;margin:0 0 16px;letter-spacing:.01em}
.seo .faq-q{color:var(--text-main);font-weight:600;margin:20px 0 4px}
.seo p{margin-bottom:12px}
.seo code{font-family:var(--mono);color:var(--good);background:var(--surface-2);padding:1px 5px;border-radius:4px;font-size:13px}
.seo strong{color:var(--text-main)}