/* 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:860px}

    .app{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 0}
    .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}
    .tabs{display:flex;gap:6px;padding:18px 24px 0;flex-wrap:wrap}
    .tab{flex:1;min-width:88px;text-align:center;padding:11px;cursor:pointer;user-select:none;border:1px solid var(--border-ui);border-bottom:none;border-radius:8px 8px 0 0;color:var(--text-dim);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;background:var(--surface-2)}
    .tab.active{color:var(--accent);border-color:var(--border-strong);background:var(--surface);box-shadow:inset 0 2px 0 var(--accent)}
    .body{padding:22px 24px 24px;border-top:1px solid var(--border-strong)}
    .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:150px}
    textarea:focus,select:focus,input.path:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,92,255,.18)}
    textarea[readonly]{color:var(--good)}
    .button-row{display:flex;gap:8px;margin:14px 0;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)}
    .btn.mini{padding:5px 11px;font-size:12px;border-radius:8px}
    .grow{flex:1}
    select,input.path{width:100%;font-family:var(--mono);font-size:14px;color:var(--text-main);background:var(--bg-screen);border:1px solid var(--border-ui);border-radius:var(--radius-sm);padding:10px 12px}
    .content .status{display:none;margin-top:8px;font-family:var(--mono);font-size:12px;padding:9px 12px;border-radius:7px;letter-spacing:.02em;word-break:break-word;text-transform:none}
    .content .status.error{color:var(--red);border:1px solid var(--red);background:rgba(207,34,46,.08)}
    .content .status.success{color:var(--good);border:1px solid var(--good);background:rgba(26,127,55,.08)}
    .content .status.warn{color:var(--amber);border:1px solid var(--amber);background:rgba(194,121,10,.08)}
    .foot{margin-top:18px;color:var(--text-dim);font-family:var(--mono);font-size:11px;line-height:1.6;letter-spacing:.02em}
    .foot b{color:var(--text-main)}
    .diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    @media(max-width:640px){.diff-grid{grid-template-columns:1fr}}
    .trow{display:flex;align-items:center;gap:8px;padding:2px 6px;cursor:pointer;border-radius:4px}
    .trow:hover{background:rgba(124,92,255,.10)}
    .ttoggle{width:14px;color:var(--accent-cyan);cursor:pointer;flex:none;text-align:center}
    .tgap{width:14px;flex:none;display:inline-block}
    .tkids{margin-left:16px;border-left:1px solid var(--border-ui);padding-left:8px}
    .tnode.collapsed > .tkids{display:none}
    .tkey{color:var(--accent)}
    .tmeta{color:var(--text-dim);font-size:12px}
    .tval{word-break:break-all}
    .tval.tstr{color:var(--good)}.tval.tnum{color:var(--amber)}.tval.tbool{color:var(--accent-cyan)}.tval.tnull{color:var(--red)}
    #tree-view{background:var(--bg-screen);border:1px solid var(--border-ui);border-radius:var(--radius-sm);padding:12px;max-height:500px;overflow:auto;font-size:13px;margin-top:12px;font-family:var(--mono)}
    #diff-output{background:var(--bg-screen);border:1px solid var(--border-ui);border-radius:var(--radius-sm);padding:12px;max-height:500px;overflow:auto;margin-top:12px}
    .diffline{font-family:var(--mono);font-size:13px;padding:3px 8px;border-radius:4px;margin-bottom:3px;word-break:break-all;white-space:pre-wrap}
    .diffline.add{color:var(--good);background:rgba(26,127,55,.08)}
    .diffline.del{color:var(--red);background:rgba(207,34,46,.08)}
    .diffline.chg{color:var(--amber);background:rgba(194,121,10,.08)}
    .seo{margin:34px 2px 0;color:var(--text-dim);font-size:14px;line-height:1.7}
    .seo h2{color:var(--text-main);font-size:18px;margin:28px 0 10px;letter-spacing:.01em}
    .seo h3{color:var(--accent);font-family:var(--mono);font-size:13px;margin:20px 0 6px;letter-spacing:.06em;text-transform:uppercase}
    .seo p{margin-bottom:12px}
    .seo .faq-q{color:var(--text-main);font-weight:600;margin:16px 0 4px}
    .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)}
    .seo a{color:var(--accent-cyan);text-decoration:none;border-bottom:1px solid var(--border-ui)}
    .seo a:hover{border-color:var(--accent-cyan)}