:root{
	--bg:#f5f7fb;
	--bg-surface:#ffffff;
	--bg-panel:#ffffff;
	--bg-input:#fbfcff;
	--bg-hover:#eef2ff;
	--text:#111827;
	--text-muted:#6b7280;
	--text-inv:#ffffff;
	--border:#dbe1ef;
	--border-focus:#4f46e5;
	--accent:#4f46e5;
	--accent-hover:#4338ca;
	--success:#16a34a;
	--warning:#d97706;
	--danger:#dc2626;
	--topbar-h:62px;
	--toolbar-h:58px;
	--statusbar-h:36px;
	--line-num-w:56px;
	--radius-sm:8px;
	--radius-md:12px;
	--radius-lg:18px;
	--font-sans:'Inter',Segoe UI,Arial,sans-serif;
	--font-mono:'JetBrains Mono','Consolas','Courier New',monospace;
	--transition:.2s ease;
}

[data-theme="dark"]{
	--bg:#0b1020;
	--bg-surface:#10172a;
	--bg-panel:#0f172a;
	--bg-input:#111827;
	--bg-hover:#1f2937;
	--text:#e5e7eb;
	--text-muted:#9ca3af;
	--text-inv:#f8fafc;
	--border:#293244;
	--border-focus:#818cf8;
	--accent:#6366f1;
	--accent-hover:#4f46e5;
	--success:#22c55e;
	--warning:#f59e0b;
	--danger:#f87171;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
	font-family:var(--font-sans);
	color:var(--text);
	background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 88%, #c7d2fe 12%));
}
a{color:inherit}

.topbar{
	position:sticky;top:0;z-index:100;
	height:var(--topbar-h);
	display:flex;align-items:center;gap:14px;
	padding:0 16px;
	border-bottom:1px solid var(--border);
	background:color-mix(in srgb,var(--bg-surface) 86%, transparent 14%);
	backdrop-filter:blur(8px);
}
.topbar__brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.topbar__logo{color:var(--accent)}
.topbar__title{font-weight:700;letter-spacing:.01em}
.topbar__nav{display:flex;gap:8px;margin-left:8px}
.topbar__link{
	text-decoration:none;font-size:.9rem;padding:8px 10px;border-radius:8px;color:var(--text-muted)
}
.topbar__link:hover{background:var(--bg-hover);color:var(--text)}
.topbar__link--active{background:var(--bg-hover);color:var(--text);font-weight:600}
.topbar__actions{margin-left:auto;display:flex;gap:8px}

.icon-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	min-width:36px;height:36px;padding:0 10px;
	border:1px solid var(--border);border-radius:var(--radius-sm);
	background:transparent;color:var(--text-muted);cursor:pointer;
	transition:all var(--transition);
}
.icon-btn:hover{background:var(--bg-hover);color:var(--text);border-color:var(--text-muted)}
.icon-btn.small{
	min-width:30px;height:30px;padding:0 9px;
	font-size:.76rem;font-weight:600;white-space:nowrap;
}

[data-theme="dark"] .icon--sun{display:inline}
[data-theme="dark"] .icon--moon{display:none}
:root .icon--sun{display:none}
:root .icon--moon{display:inline}

.topbar__hamburger{display:inline-flex}
.mobile-nav{
	display:none;
	padding:10px 14px;
	border-bottom:1px solid var(--border);
	background:var(--bg-surface);
}
.mobile-nav.open{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mobile-nav__link{
	text-decoration:none;font-size:.88rem;padding:9px 10px;border-radius:8px;background:var(--bg-hover)
}
.mobile-nav__link--active{font-weight:700}

.hero{
	max-width:1120px;margin:14px auto 0;padding:0 16px;
}
.hero__title{margin:0 0 8px;font-size:1.45rem;line-height:1.3;text-align:center}
.hero__desc{margin:0;color:var(--text-muted);font-size:.95rem;text-align:center}

.app{display:flex;flex-direction:column;min-height:calc(100vh - var(--topbar-h))}

.toolbar{
	display:flex;align-items:center;gap:12px;flex-wrap:wrap;
	padding:10px 16px;
	background:var(--bg-surface);
	border-top:1px solid var(--border);
	border-bottom:1px solid var(--border);
	position:sticky;top:var(--topbar-h);z-index:90;
}
.toolbar__group{display:flex;align-items:center;gap:6px}
.toolbar__label{font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted)}
.toolbar__select{
	appearance:none;
	padding:7px 30px 7px 10px;
	border:1px solid var(--border);border-radius:var(--radius-sm);
	background:var(--bg-input) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 5l3 3 3-3' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") right 8px center/12px no-repeat;
	color:var(--text);font:500 .875rem var(--font-sans);
	cursor:pointer;
}
.toolbar__select--sm{min-width:100px}
.toolbar__select:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--border-focus) 25%, transparent)}
.toolbar__actions{display:flex;gap:6px;flex:1;justify-content:center}
.toolbar__file{display:flex;gap:6px}
.toolbar__toggle{
	display:inline-flex;align-items:center;gap:6px;
	font-size:.82rem;font-weight:600;color:var(--text-muted);
	margin-left:auto;user-select:none;cursor:pointer;
}
.toolbar__toggle input{
	width:15px;height:15px;accent-color:var(--accent);cursor:pointer;
}

.btn{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	padding:8px 14px;border-radius:var(--radius-sm);border:1px solid transparent;
	font:600 .875rem var(--font-sans);cursor:pointer;white-space:nowrap;
	transition:all var(--transition);
}
.btn--primary{background:var(--accent);color:var(--text-inv);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--secondary{background:var(--bg-hover);color:var(--text);border-color:var(--border)}
.btn--secondary:hover{background:color-mix(in srgb,var(--bg-hover) 75%, var(--accent) 25%)}
.btn--ghost{background:transparent;color:var(--text-muted)}
.btn--ghost:hover{background:var(--bg-hover);color:var(--text)}
.btn--outline{background:transparent;color:var(--text);border-color:var(--border)}
.btn--outline:hover{background:var(--bg-hover)}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

.panels{
	display:flex;min-height:0;height:calc(100vh - var(--topbar-h) - 130px);
	border-bottom:1px solid var(--border);
}
.panel{flex:1;display:flex;flex-direction:column;min-width:0;min-height:0}
.panel__header{
	display:flex;align-items:center;justify-content:space-between;
	padding:8px 14px;background:var(--bg-surface);border-bottom:1px solid var(--border)
}
.panel--output .panel__header{border-left:1px solid var(--border)}
.panel__title{font-size:.76rem;font-weight:700;letter-spacing:.08em;color:var(--text-muted);text-transform:uppercase}
.panel__meta{display:flex;align-items:center;gap:8px}
.panel__stats{font:500 .75rem var(--font-mono);color:var(--text-muted)}
.panel__stats--large{color:var(--warning);font-weight:700}

.panel--output #btnCopy{
	border-color:var(--accent);
	color:var(--text-inv);
	background:var(--accent);
}
.panel--output #btnCopy:hover{background:var(--accent-hover);border-color:var(--accent-hover)}

.panel__collapse{
	display:inline-flex;align-items:center;justify-content:center;
	width:24px;height:24px;padding:0;border:none;border-radius:4px;
	background:transparent;color:var(--text-muted);cursor:pointer;
	transition:all var(--transition);flex-shrink:0;
}
.panel__collapse:hover{background:var(--bg-hover);color:var(--text)}
.panel__collapse svg{transition:transform .2s ease}
.panel.collapsed .panel__collapse svg{transform:rotate(180deg)}
.panel.collapsed .panel__body{display:none}
.panel.collapsed{flex:0 0 auto}

.panel__body{flex:1;display:flex;position:relative;min-height:0;overflow:hidden;background:var(--bg-panel)}
.line-numbers{
	width:var(--line-num-w);flex-shrink:0;
	padding:12px 8px 12px 4px;text-align:right;
	white-space:pre;overflow:hidden;user-select:none;
	font:500 .88rem/1.6 var(--font-mono);color:var(--text-muted);opacity:.55;
	background:var(--bg-input);border-right:1px solid var(--border);
}
.editor{
	flex:1;min-width:0;min-height:0;
	padding:12px 14px;border:none;outline:none;resize:none;overflow:auto;
	white-space:pre;tab-size:2;-moz-tab-size:2;
	font:500 .9rem/1.6 var(--font-mono);
	color:var(--text);background:transparent;
}
textarea.editor{background:var(--bg-input)}
.editor--output{background:var(--bg-panel)}
.editor.wrap{white-space:pre-wrap;word-break:break-word}

.panels__divider{width:5px;flex-shrink:0;background:var(--border);cursor:col-resize;position:relative}
.panels__divider:hover,.panels__divider.active{background:var(--accent)}
.panels__divider::after{
	content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
	width:3px;height:30px;border-radius:2px;background:var(--text-muted);opacity:.25
}

.statusbar{
	height:var(--statusbar-h);padding:0 16px;
	display:flex;align-items:center;justify-content:space-between;
	font-size:.78rem;color:var(--text-muted);
	background:var(--bg-surface);border-top:1px solid var(--border)
}
.statusbar__msg.error{color:var(--danger)}
.statusbar__msg.success{color:var(--success)}
.statusbar__right{display:flex;align-items:center;gap:10px}
.statusbar__time{font-family:var(--font-mono)}
.statusbar__btn{
	display:inline-flex;align-items:center;gap:4px;
	border:1px solid var(--border);border-radius:var(--radius-sm);
	background:transparent;color:var(--text-muted);padding:2px 8px;
	cursor:pointer;font-size:.76rem
}
.statusbar__btn:hover{background:var(--bg-hover);color:var(--text)}
.statusbar__btn.active{border-color:var(--accent);color:var(--accent)}

.suggestion-panel{
	position:absolute;top:0;right:0;bottom:0;width:340px;max-width:100%;
	background:var(--bg-surface);border-left:2px solid var(--warning);
	display:flex;flex-direction:column;z-index:5
}
.suggestion-panel[hidden]{display:none}
.suggestion-panel__header{
	display:flex;align-items:center;gap:8px;padding:10px 12px;
	background:var(--warning);color:#1f2937;font-size:.85rem;font-weight:700
}
.suggestion-panel__title{flex:1}
.suggestion-panel__close{border:none;background:none;cursor:pointer;font-size:1.15rem;color:#1f2937}
.suggestion-panel__list{margin:0;padding:0;list-style:none;overflow:auto;flex:1}
.suggestion-item{padding:10px 12px;border-bottom:1px solid var(--border);font-size:.86rem;line-height:1.45}
.suggestion-item--jump{cursor:pointer}
.suggestion-item--jump:hover{background:var(--bg-hover)}
.suggestion-item--jump:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.suggestion-item__type{
	display:inline-block;margin-right:7px;padding:2px 6px;border-radius:999px;
	font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em
}
.suggestion-item__type--error{background:color-mix(in srgb,var(--danger) 16%, transparent);color:var(--danger)}
.suggestion-item__type--warning{background:color-mix(in srgb,var(--warning) 16%, transparent);color:var(--warning)}
.suggestion-item__type--fix{background:color-mix(in srgb,var(--success) 16%, transparent);color:var(--success)}
.suggestion-item__line{display:block;margin-top:4px;font-size:.74rem;color:var(--text-muted)}

.smart-error{
	margin:10px 16px 0;padding:10px 12px;border:1px solid var(--border);border-left:4px solid var(--success);
	border-radius:10px;background:var(--bg-surface)
}
.smart-error__title{margin:0 0 4px;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);font-weight:700}
.smart-error__text{margin:0;font-size:.88rem}
.smart-error__text--ok{color:var(--success)}
.smart-error__text--warn{color:var(--warning)}
.smart-error__text--error{color:var(--danger)}
.error-box--ok{border-left-color:var(--success)}
.error-box--warn{border-left-color:var(--warning)}
.error-box--error{border-left-color:var(--danger)}

.toast-container{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:140}
.toast{
	padding:10px 12px;border-radius:10px;color:#fff;font-size:.83rem;
	box-shadow:0 8px 24px rgba(0,0,0,.2);animation:toast-in .2s ease
}
.toast--success{background:#16a34a}
.toast--error{background:#dc2626}
.toast--info{background:#2563eb}
.toast.removing{animation:toast-out .18s ease forwards}
@keyframes toast-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px)}}

.ad-slot{max-width:1120px;margin:14px auto 0;padding:0 16px}
.ad-placeholder{display:block;min-height:70px;border:1px dashed var(--border);border-radius:10px;background:var(--bg-surface)}

.seo-content{max-width:1120px;margin:12px auto 0;padding:0 16px 18px}
.seo-content__inner{
	border:1px solid var(--border);border-radius:14px;
	background:var(--bg-surface);padding:18px;
}
.seo-content h2{margin:0 0 10px;font-size:1.15rem}
.seo-content h3{margin:14px 0 8px;font-size:1rem}
.seo-content p{margin:0 0 10px;color:var(--text-muted);line-height:1.65}
.seo-content ul,.seo-content ol{margin:0 0 12px;padding-left:20px;color:var(--text-muted)}
.seo-content li{margin:4px 0}

.site-footer{margin-top:16px;border-top:1px solid var(--border);background:var(--bg-surface)}
.site-footer__inner{
	max-width:1120px;margin:0 auto;padding:18px 16px;
	display:flex;gap:18px;justify-content:space-between;align-items:flex-start
}
.site-footer__logo{font-weight:800}
.site-footer__tagline{margin:6px 0 0;color:var(--text-muted);font-size:.9rem}
.site-footer__nav{display:flex;gap:24px}
.site-footer__heading{margin:0 0 8px;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.site-footer__col{display:flex;flex-direction:column;gap:6px}
.site-footer__link{text-decoration:none;font-size:.9rem;color:var(--text-muted)}
.site-footer__link:hover{color:var(--text)}
.site-footer__bottom{border-top:1px solid var(--border);padding:10px 16px;text-align:center;color:var(--text-muted);font-size:.82rem}

.page{max-width:1000px;margin:16px auto;padding:0 16px 20px}
.page-content{border:1px solid var(--border);border-radius:14px;background:var(--bg-surface);padding:18px}
.page-content h1{margin:0 0 8px;font-size:1.45rem}
.page-content h2{margin:16px 0 8px;font-size:1.1rem}
.page-content p,.page-content li{color:var(--text-muted);line-height:1.7}
.page-updated{display:inline-block;margin-bottom:8px;color:var(--text-muted);font-size:.85rem}

.contact-form{display:grid;gap:10px;margin-top:8px}
.contact-form label{display:grid;gap:6px;font-size:.9rem;font-weight:600}
.contact-form input,.contact-form textarea{
	font:500 .9rem var(--font-sans);color:var(--text);
	padding:10px;border:1px solid var(--border);border-radius:9px;background:var(--bg-input)
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--border-focus) 20%, transparent)}

.hl-key{color:#2563eb}
.hl-string{color:#047857}
.hl-number{color:#7c3aed}
.hl-bool{color:#db2777}
.hl-null{color:#475569}
.hl-bracket{color:#b45309}
.hl-tag{color:#2563eb}
.hl-attr{color:#a16207}
.hl-attr-val{color:#047857}
.hl-comment{color:#64748b;font-style:italic}
.hl-kw{color:#7c3aed;font-weight:700}

[data-theme="dark"] .hl-key{color:#93c5fd}
[data-theme="dark"] .hl-string{color:#86efac}
[data-theme="dark"] .hl-number{color:#c4b5fd}
[data-theme="dark"] .hl-bool{color:#f9a8d4}
[data-theme="dark"] .hl-null{color:#94a3b8}
[data-theme="dark"] .hl-bracket{color:#fdba74}
[data-theme="dark"] .hl-tag{color:#93c5fd}
[data-theme="dark"] .hl-attr{color:#fde68a}
[data-theme="dark"] .hl-attr-val{color:#86efac}
[data-theme="dark"] .hl-comment{color:#94a3b8}
[data-theme="dark"] .hl-kw{color:#d8b4fe}

@media(max-width:768px){
	.topbar__nav{display:none}
	.hero__title{font-size:1.15rem}
	.hero__desc{font-size:.86rem}

	.toolbar{padding:8px 12px;gap:8px}
	.toolbar__group{width:calc(50% - 4px)}
	.toolbar__select{width:100%}
	.toolbar__actions{width:100%;justify-content:center}
	.toolbar__file{width:100%}
	.toolbar__toggle{width:100%;justify-content:flex-end}

	.panels{flex-direction:column;height:calc(100vh - var(--topbar-h) - 162px)}
	.panels__divider{width:auto;height:5px;cursor:row-resize}
	.panels__divider::after{width:32px;height:3px}
	.panel--output .panel__header{border-left:none;border-top:1px solid var(--border)}

	.site-footer__inner{flex-direction:column;gap:14px}
	.site-footer__nav{gap:14px;flex-wrap:wrap}
	.mobile-nav.open{grid-template-columns:1fr}
}