*, *::before, *::after {box-sizing:border-box; margin:0; padding:0;}
body {font-family:system-ui, -apple-system, sans-serif; background:#f0f2f5; color:#374151; min-height:100vh;}
.site-header {background:#fff; border-bottom:1px solid #bfc9d1;}
.site-header-inner {max-width:940px; margin:0 auto; display:flex; align-items:center; height:50px; padding:0 20px; gap:24px;}
.site-logo {color:#000; font-weight:700; font-size:1rem; text-decoration:none; letter-spacing:.3px;}
.site-nav {display:flex; gap:2px;}
.site-nav a {color:#000; font-size:.83rem; text-decoration:none; padding:5px 10px; border-radius:3px;}
.site-nav a:hover, .site-nav a.active {color:#25343f; background:rgba(255,255,255,.1);}
#menu-toggle {display:none;}
.hamburger {display:none; color:#fff; font-size:1.5rem; cursor:pointer; user-select:none;}
.page {max-width:940px; margin:0 auto; padding:32px 20px 60px;}
.page-title {font-size:1.4rem; font-weight:700; color:#1c3f5e; margin-bottom:6px;}
.page-subtitle {font-size:.875rem; color:#6b7280; line-height:1.6; margin-bottom:28px;}
.cards {display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.card {background:#fff; border:1px solid #d1d9e0; border-radius:5px; padding:22px 24px; text-decoration:none; color:inherit; display:block; transition:border-color .15s, box-shadow .15s;}
.card:hover {border-color:#2563a8; box-shadow:0 2px 10px rgba(37,99,168,.1);}
.card-title {font-size:.95rem; font-weight:700; color:#1c3f5e; margin-bottom:8px;}
.card-desc {font-size:.845rem; color:#6b7280; line-height:1.55;}
footer {margin-top:36px; font-size:.8rem; color:#9ca3af; border-top:1px solid #e5e9ee; padding-top:16px;}
footer a {color:#6b7280;}
.sect {background:#fff; border:1px solid #d1d9e0; border-radius:5px; padding:20px 22px; margin-bottom:14px;}
.sect-title {font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:#6b7280; padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid #e9ecef;}
.row {display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.full {margin-bottom:14px;}
label {display:block; font-weight:600; font-size:.8rem; color:#374151; margin-bottom:4px;}
input[type=text], input[type=password], select {width:100%; padding:7px 10px; border:1px solid #cbd5e1; border-radius:4px; font-size:.875rem; color:#374151; background:#fff;}
input[type=text]:focus, input[type=password]:focus, select:focus {outline:none; border-color:#2563a8; box-shadow:0 0 0 3px rgba(37,99,168,.1);}
textarea {width:100%; padding:9px 10px; border:1px solid #cbd5e1; border-radius:4px; font-family:'Courier New', monospace; font-size:.78rem; color:#374151; background:#fff; resize:vertical;}
textarea:focus {outline:none; border-color:#2563a8; box-shadow:0 0 0 3px rgba(37,99,168,.1);}
.hint {font-size:.78rem; color:#9ca3af; margin-top:5px;}
.checkbox-row {display:flex; align-items:center; gap:7px; margin-top:8px;}
.checkbox-row input[type=checkbox] {width:auto; margin:0; accent-color:#2563a8;}
.checkbox-row label {font-weight:400; font-size:.82rem; color:#6b7280; margin:0; cursor:pointer;}
.actions {display:flex; align-items:center; gap:12px; margin-bottom:4px;}
button.primary {background:#2563a8; color:#fff; border:none; padding:9px 24px; border-radius:4px; font-size:.875rem; font-weight:600; cursor:pointer;}
button.primary:hover {background:#1d4f8a;}
button.primary:disabled {background:#9ca3af; cursor:default;}
button.copy {background:#fff; color:#2563a8; border:1px solid #2563a8; padding:4px 12px; border-radius:4px; font-size:.78rem; font-weight:600; cursor:pointer;}
button.copy:hover {background:#2563a8; color:#fff;}
button.download {background:#fff; color:#2563a8; border:1px solid #2563a8; padding:9px 24px; border-radius:4px; font-size:.875rem; font-weight:600; cursor:pointer;}
button.download:hover {background:#2563a8; color:#fff;}
.spinner {font-size:.845rem; color:#6b7280; display:none;}
#status {margin-top:12px; padding:9px 14px; border-radius:4px; font-size:.845rem; display:none;}
#status.ok {background:#f0fdf4; border:1px solid #86efac; color:#166534;}
#status.err {background:#fef2f2; border:1px solid #fca5a5; color:#991b1b;}
.output-label {display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:.8rem; color:#374151; margin-bottom:8px; margin-top:18px;}
.download-area {margin-top:16px; padding:16px 20px; background:#fff; border:1px solid #d1d9e0; border-radius:5px;}
.download-area p {font-size:.845rem; color:#6b7280; margin-bottom:14px;}
.tabs {display:flex; gap:0; border-bottom:2px solid #e5e9ee; margin-top:20px;}
.tab {background:transparent; color:#6b7280; border:none; padding:8px 18px; font-size:.845rem; font-weight:600; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px;}
.tab:hover {color:#374151;}
.tab.active {color:#2563a8; border-bottom-color:#2563a8;}
.tab-panel {display:none; padding-top:16px;}
.tab-panel.active {display:block;}
pre {margin:0; white-space:pre-wrap; word-break:break-all;}
.decode-table {width:100%; border-collapse:collapse; font-size:.845rem;}
.decode-table th, .decode-table td {padding:8px 12px; text-align:left; vertical-align:top; border-bottom:1px solid #e9ecef;}
.decode-table th {width:200px; font-weight:600; color:#4b5563; background:#f8f9fb; white-space:nowrap;}
.decode-table td {color:#1f2937; word-break:break-all; font-family:'Courier New', monospace; font-size:.78rem;}
.decode-table td.plain {font-family:inherit; font-size:.845rem;}
.decode-table tr:last-child th, .decode-table tr:last-child td {border-bottom:none;}
.decode-table tr.group-hd th {background:#eef2f7; color:#1c3f5e; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px; padding:7px 12px; border-bottom:1px solid #d1d9e0;}
.decode-table tr.group-hd:first-child th {border-top:none;}
.decode-table .tag {display:inline-block; background:#e8f0fb; color:#1d4f8a; border-radius:3px; padding:1px 6px; margin:1px 2px 1px 0; font-size:.75rem; font-family:'Courier New', monospace;}
.dropdown {position:relative; display:flex;}
.dropdown-title {cursor:pointer;}
.dropdown-content {display:none; position:absolute; top:100%; left:0; background:#fff; min-width:180px; border-radius:3px; box-shadow:0 4px 12px rgba(0,0,0,0.15); padding:8px 0; z-index:200;}
.dropdown-content a {display:block; padding:10px 16px; border-radius:0;}
.dropdown:hover .dropdown-content {display:block;}

@media (max-width: 768px) {
    .hamburger {display:block; margin-left:auto; color:#000;}
    .site-header-inner {position:relative; justify-content:space-between;}
    .site-nav {display:none; position:absolute; top:50px; left:0; width:100%; background:#fff; flex-direction:column; padding:10px 20px 20px; gap:8px; box-shadow:0 4px 6px rgba(0,0,0,0.1); z-index:100;}
    #menu-toggle:checked ~ .site-nav {display:flex;}
    .dropdown {flex-direction:column;}
    .dropdown-content {display:flex; position:static; flex-direction:column; background:transparent; box-shadow:none; padding:5px 0 5px 15px; margin-top:5px; border-left:2px solid rgba(255, 255, 255, 0.1);}
    .dropdown:hover .dropdown-content {display:flex;}
    .dropdown-content a {padding:6px 10px;}
    .cards {grid-template-columns:1fr;}
}