* {
    box-sizing:border-box;
}
body {
    font-family: 'Roboto', sans-serif;
    background:#f5f2f7;
    color:#1d1b20;
    padding: 20px;
    margin: 0;
    transition:background 0.28s ease, color 0.28s ease;
}
h1 { text-align:center; color:#1d1b20; margin-bottom:20px; }
.container { width:100%; max-width:720px; margin:auto; display:flex; flex-direction:column; gap:16px; }
.input-row { display:flex; gap:8px; width:100%; }
input[type="text"] { min-width:0; flex:1; padding:12px; border-radius:12px; border:1px solid #ccc; font-size:16px; background:#fff; color:#1d1b20; transition:background 0.28s ease, color 0.28s ease, border-color 0.28s ease; }
button { flex:0 0 auto; padding:12px 20px; font-size:16px; border:none; border-radius:12px; background:#6750a4; color:#fff; cursor:pointer; transition:background 0.2s ease, box-shadow 0.2s ease; }
button:hover { background:#5e3ea1; box-shadow:0 3px 10px rgba(103,80,164,0.22); }
.theme-toggle {
    position:fixed;
    top:16px;
    right:16px;
    z-index:20;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    border:1px solid rgba(103,80,164,0.22);
    border-radius:50%;
    background:#fffbfe;
    color:#6750a4;
    box-shadow:0 6px 18px rgba(29,27,32,0.14);
}
.theme-toggle:hover {
    background:#f6edff;
}
.theme-icon {
    font-size:17px;
    font-weight:500;
    line-height:1;
}

/* 卡片 */
.card {
    position:relative;
    --card-surface:#fffbfe;
    --card-header:#f6edff;
    --card-accent:#6750a4;
    --card-shadow-rgb:103,80,164;
    background:var(--card-surface);
    border-radius:16px;
    border:1px solid rgba(var(--card-shadow-rgb),0.12);
    box-shadow:0 2px 6px rgba(29,27,32,0.10), 0 1px 2px rgba(var(--card-shadow-rgb),0.10);
    overflow:hidden;
    margin-bottom:16px;
    transition:box-shadow 0.42s cubic-bezier(0.2,0,0,1), transform 0.42s cubic-bezier(0.2,0,0,1), background-color 0.42s ease;
    will-change:box-shadow, transform;
}
.card::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:linear-gradient(to bottom, rgba(var(--card-shadow-rgb),0.72), rgba(var(--card-shadow-rgb),0.22));
    opacity:0.86;
    pointer-events:none;
}

.card::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:28px;
    pointer-events:none;
    opacity:0;
    background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(var(--card-shadow-rgb),0.16));
    transition:opacity 0.42s cubic-bezier(0.2,0,0,1), height 0.42s cubic-bezier(0.2,0,0,1);
}
.card-loading::before,
.card-loading::after {
    display: none;
}

.card-loading .card-header {
    cursor: default;
    border-bottom: none;
}
.card.collapsed {
    box-shadow:0 8px 20px rgba(var(--card-shadow-rgb),0.16), 0 2px 5px rgba(29,27,32,0.10);
    transform:translateY(-1px);
}
.card.collapsed::after {
    height:18px;
    opacity:1;
}
.card-tone-basic { --card-surface:#fffbfe; --card-header:#f6edff; --card-accent:#6750a4; --card-shadow-rgb:103,80,164; }
.card-tone-attributes { --card-surface:#fbfff6; --card-header:#eaf7df; --card-accent:#4f6f18; --card-shadow-rgb:79,111,24; }
.card-tone-issuer { --card-surface:#fffaf5; --card-header:#ffeeda; --card-accent:#9c5f00; --card-shadow-rgb:156,95,0; }
.card-tone-country { --card-surface:#f6fbff; --card-header:#e0f2ff; --card-accent:#006a6a; --card-shadow-rgb:0,106,106; }
.card-tone-currency { --card-surface:#fffdf2; --card-header:#fff3c4; --card-accent:#725c00; --card-shadow-rgb:114,92,0; }
.card-tone-other { --card-surface:#f8fafb; --card-header:#eef2f4; --card-accent:#52616b; --card-shadow-rgb:82,97,107; }
.card-tone-debug { --card-surface:#f8f5fa; --card-header:#ede7f2; --card-accent:#5f5b66; --card-shadow-rgb:95,91,102; }
.card-tone-error { --card-surface:#fff8f7; --card-header:#ffedea; --card-accent:#b3261e; --card-shadow-rgb:179,38,30; }
body[data-theme="dark"] {
    color-scheme:dark;
    background:#111118;
    color:#f4eff4;
}
body[data-theme="dark"] h1 {
    color:#f4eff4;
}
body[data-theme="dark"] input[type="text"] {
    border-color:#49454f;
    background:#1d1b20;
    color:#f4eff4;
}
body[data-theme="dark"] input[type="text"]::placeholder {
    color:#cac4d0;
}
body[data-theme="dark"] button {
    background:#d0bcff;
    color:#1d192b;
}
body[data-theme="dark"] button:hover {
    background:#e9ddff;
    box-shadow:0 4px 14px rgba(208,188,255,0.22);
}
body[data-theme="dark"] .theme-toggle {
    border-color:rgba(208,188,255,0.28);
    background:#211f26;
    color:#eaddff;
    box-shadow:0 8px 22px rgba(0,0,0,0.36);
}
body[data-theme="dark"] .theme-toggle:hover {
    background:#2b2930;
}
body[data-theme="dark"] .card {
    border-color:rgba(var(--card-shadow-rgb),0.18);
    box-shadow:0 2px 8px rgba(0,0,0,0.36), 0 1px 2px rgba(var(--card-shadow-rgb),0.12);
}
body[data-theme="dark"] .card.collapsed {
    box-shadow:0 10px 24px rgba(0,0,0,0.34), 0 2px 10px rgba(var(--card-shadow-rgb),0.18);
}
body[data-theme="dark"] .card::after {
    background:linear-gradient(to bottom, rgba(17,17,24,0), rgba(var(--card-shadow-rgb),0.20));
}
body[data-theme="dark"] .card-tone-basic { --card-surface:#211f2b; --card-header:#302b42; --card-accent:#d0bcff; --card-shadow-rgb:208,188,255; }
body[data-theme="dark"] .card-tone-attributes { --card-surface:#18231b; --card-header:#223325; --card-accent:#b8f397; --card-shadow-rgb:184,243,151; }
body[data-theme="dark"] .card-tone-issuer { --card-surface:#261d12; --card-header:#382817; --card-accent:#ffddb0; --card-shadow-rgb:255,221,176; }
body[data-theme="dark"] .card-tone-country { --card-surface:#152326; --card-header:#1d3337; --card-accent:#8feef2; --card-shadow-rgb:143,238,242; }
body[data-theme="dark"] .card-tone-currency { --card-surface:#24210f; --card-header:#343016; --card-accent:#f1dc72; --card-shadow-rgb:241,220,114; }
body[data-theme="dark"] .card-tone-other { --card-surface:#1d2023; --card-header:#282d31; --card-accent:#c8d0d6; --card-shadow-rgb:200,208,214; }
body[data-theme="dark"] .card-tone-debug { --card-surface:#201f24; --card-header:#2b2930; --card-accent:#cac4d0; --card-shadow-rgb:202,196,208; }
body[data-theme="dark"] .card-tone-error { --card-surface:#2a1716; --card-header:#3d201d; --card-accent:#ffb4ab; --card-shadow-rgb:255,180,171; }
.card-header {
    position:relative;
    z-index:1;
    padding:16px 16px 16px 20px;
    cursor:pointer;
    font-weight:500;
    font-size:18px;
    border-bottom:1px solid rgba(var(--card-shadow-rgb),0.14);
    background:linear-gradient(90deg, var(--card-header), var(--card-surface));
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    transition:background 0.42s ease, border-color 0.42s ease;
}
.card-title {
    min-width:0;
    overflow-wrap:anywhere;
}
.card-content {
    display:grid;
    grid-template-rows:1fr;
    overflow:hidden;
    opacity:1;
    transition:grid-template-rows 0.46s cubic-bezier(0.2,0,0,1), opacity 0.28s ease;
    will-change:grid-template-rows, opacity;
}
.card-content.collapsed {
    grid-template-rows:0fr;
    opacity:0;
}
.card-content-inner {
    min-height:0;
    overflow:hidden;
    padding:16px;
    transition:padding 0.46s cubic-bezier(0.2,0,0,1);
}
.card-content.collapsed .card-content-inner { padding-top:0; padding-bottom:0; }
.json-debug {
    margin:0;
    padding:12px;
    overflow:auto;
    max-height:360px;
    border-radius:12px;
    background:#1d1b20;
    color:#f6edff;
    font:13px/1.5 Consolas, "Courier New", monospace;
    white-space:pre-wrap;
    word-break:break-word;
}
.result-enter {
    animation:resultEnter 0.36s cubic-bezier(0.2,0,0,1) both;
}
.card-loading {
    animation:resultEnter 0.28s cubic-bezier(0.2,0,0,1) both;
}
.card-loading .card-header {
    cursor:default;
}
.loading-header {
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}
.loading-spinner {
    width:22px;
    height:22px;
    flex:0 0 auto;
    border:3px solid rgba(var(--card-shadow-rgb),0.22);
    border-top-color:rgb(var(--card-shadow-rgb));
    border-radius:50%;
    animation:loadingSpin 0.82s linear infinite;
}
.loading-dots span {
    display:inline-block;
    animation:loadingDot 1.05s ease-in-out infinite;
}
.loading-dots span:nth-child(2) {
    animation-delay:0.12s;
}
.loading-dots span:nth-child(3) {
    animation-delay:0.24s;
}
.loading-bar {
    height:10px;
    margin:2px 0 10px;
    border-radius:999px;
    background:linear-gradient(90deg, rgba(var(--card-shadow-rgb),0.08), rgba(var(--card-shadow-rgb),0.22), rgba(var(--card-shadow-rgb),0.08));
    background-size:220% 100%;
    animation:loadingShimmer 1.15s ease-in-out infinite;
}
.loading-bar.short {
    width:62%;
    margin-bottom:2px;
}
body[data-theme="dark"] .loading-spinner {
    border-color:rgba(var(--card-shadow-rgb),0.24);
    border-top-color:rgb(var(--card-shadow-rgb));
}
body[data-theme="dark"] .loading-bar {
    background:linear-gradient(90deg, rgba(var(--card-shadow-rgb),0.10), rgba(var(--card-shadow-rgb),0.28), rgba(var(--card-shadow-rgb),0.10));
    background-size:220% 100%;
}

@keyframes loadingSpin {
    to { transform:rotate(360deg); }
}

@keyframes loadingDot {
    0%, 70%, 100% { transform:translateY(0); opacity:0.45; }
    35% { transform:translateY(-3px); opacity:1; }
}

@keyframes loadingShimmer {
    0% { background-position:120% 0; }
    100% { background-position:-120% 0; }
}

@keyframes resultEnter {
    from { opacity:0; transform:translateY(8px); }
    to { opacity:1; transform:translateY(0); }
}

.row { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:7px 0; font-size:14px; color:#1d1b20; }
.row .label { flex:0 0 auto; font-weight:500; color:#49454f; }
.row .value { min-width:0; text-align:right; overflow-wrap:anywhere; }
.status-true,
.status-false {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:28px;
    min-height:24px;
    border-radius:999px;
    font-weight:bold;
}
.status-true { color:#0f7c4f; background:rgba(15,124,79,0.10); }
.status-false { color:#b3261e; background:rgba(179,38,30,0.10); }
body[data-theme="dark"] .row {
    color:#f4eff4;
}
body[data-theme="dark"] .row .label {
    color:#cac4d0;
}
body[data-theme="dark"] .status-true {
    color:#b8f397;
    background:rgba(184,243,151,0.14);
}
body[data-theme="dark"] .status-false {
    color:#ffb4ab;
    background:rgba(255,180,171,0.14);
}
body[data-theme="dark"] .json-debug {
    background:#111118;
    color:#eaddff;
    box-shadow:inset 0 0 0 1px rgba(208,188,255,0.14);
}
body[data-theme="dark"] .flag-badge {
    background:#1d1b20;
    box-shadow:0 0 0 1px rgba(244,239,244,0.22);
}
.message-card .card-header {
    cursor:default;
}
.message-card .card-content-inner {
    color:#49454f;
}
body[data-theme="dark"] .message-card .card-content-inner {
    color:#cac4d0;
}
.country-value { display:inline-flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.flag-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:21px;
    border-radius:4px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 0 0 1px rgba(29,27,32,0.18);
    vertical-align:middle;
}
.flag-svg { width:100%; height:100%; object-fit:cover; display:block; }
.flag-emoji-fallback { display:none; width:100%; height:100%; align-items:center; justify-content:center; font-size:18px; line-height:1; }
.flag-emoji-only { font-size:20px; line-height:1; }
.toggle-icon { flex:0 0 auto; font-size:16px; transition:transform 0.42s cubic-bezier(0.2,0,0,1); }
.toggle-icon.collapsed { transform:rotate(-90deg); }

@media (max-width: 560px) {
    body { padding:12px; }
    h1 { font-size:24px; margin:8px 0 16px; }
    .container { gap:12px; }
    .theme-toggle { position:static; width:40px; height:40px; margin:0 0 12px auto; }
    .input-row { flex-direction:column; }
    input[type="text"],
    .input-row button { width:100%; }
    .card { border-radius:14px; margin-bottom:12px; }
    .card-header { padding:14px 14px 14px 18px; font-size:16px; }
    .card-content-inner { padding:14px; }
    .card-content.collapsed .card-content-inner { padding-top:0; padding-bottom:0; }
    .row { flex-direction:column; align-items:stretch; gap:4px; padding:8px 0; }
    .row .value { text-align:left; }
    .country-value { justify-content:flex-start; }
    .json-debug { max-height:300px; font-size:12px; }
}

@media (prefers-reduced-motion: reduce) {
    .card,
    .card::after,
    .card-header,
    .card-content,
    .card-content-inner,
    .card-loading,
    .result-enter,
    .loading-spinner,
    .loading-dots span,
    .loading-bar,
    .toggle-icon,
    button {
        animation:none;
        transition:none;
    }
}