@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* Shared shell and palette for the three SNBX utilities. */
html { background: #fff; }
body.snbx-tool {
    --bg: #fff; --bg-deep: #f0f6ff;
    --bg-start: #fff1f6; --bg-end: #f0f6ff;
    --panel: #fff; --panel-strong: #fff;
    --paper: #fff; --paper-deep: #f0f6ff; --card: #fff;
    --text: #101f3f; --ink: #101f3f; --text-primary: #101f3f;
    --muted: #68738b; --text-secondary: #68738b; --soft: #68738b; --text-soft: #68738b;
    --line: #dfe5ef; --line-strong: #bfcee4;
    --border: #dfe5ef; --border-strong: #bfcee4;
    --accent: #bf3d70; --accent-deep: #a92e5e; --accent-soft: #ffe1ed;
    --blue-strong: #bf3d70; --blue-mid: #ed6f9d; --blue-light: #fff1f6;
    --blue-glow: #ed6f9d26; --orange: #d85385;
    --sage: #3979b5; --wine: #a84677;
    --code: #071a36; --code-text: #e8efff;
    --shadow: 0 12px 32px #17345e0c;
    margin: 0;
    padding: 0 0 40px;
    color: var(--ink);
    background: linear-gradient(125deg, #fff1f680, #ffffff 45%, #f0f6ff);
    font-family: 'DM Sans', 'Noto Sans Thai', sans-serif;
    min-width: 320px;
}
.snbx-tool .snbx-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    min-height: 64px; padding: 10px clamp(16px, 3vw, 48px);
    color: #fff; background: #071a36; border-bottom: 1px solid #ed6f9d66;
}
.snbx-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: #fff;
    font: 700 23px 'Playfair Display', Georgia, serif; letter-spacing: .12em; }
.snbx-brand img { display: block; }
.snbx-location { color: #d9e5fb; font-size: 13px; letter-spacing: .08em; }
.snbx-back { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 9px 18px;
    border: 1px solid #f4b2ca; border-radius: 999px; background: #ed6f9d; color: #071a36;
    text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.snbx-back:hover { background: #ffd6e5; }
.snbx-tool :focus-visible { outline: 3px solid #3979b5; outline-offset: 3px; }
.snbx-bar a:focus-visible { outline-color: #fff; }
.snbx-tool > .page-shell, .snbx-tool > .app-shell {
    width: min(1480px, calc(100% - 48px)); margin: 24px auto 0;
}
.snbx-words > .page-shell { max-width: 1280px; }
.snbx-tool .hero-panel, .snbx-tool .masthead .hero, .snbx-tool .intro {
    display: block; padding: clamp(24px, 4vw, 48px); margin: 0 0 24px;
    border: 1px solid #edcfdf; border-radius: 22px;
    background: linear-gradient(90deg, #fff3f8ef, #fffffff2 48%, #eef5ffba),
        url('assets/snbx-sakura-hero.png') center 38% / cover;
    box-shadow: var(--shadow);
}
.snbx-tool h1 { color: var(--ink); font-family: 'Playfair Display', 'Noto Sans Thai', serif;
    font-size: clamp(26px, 3.2vw, 44px); line-height: 1.4; letter-spacing: -.025em; }
.snbx-tool h1 em, .snbx-tool .hero-accent { color: #bf3d70; font-style: normal; }
.snbx-tool .eyebrow, .snbx-tool .section-kicker { color: var(--accent); }
.snbx-words .eyebrow { background: #fff1f6; border-color: #f2ccdc; }
.snbx-tool .intro-copy { max-width: 820px; margin-top: 16px; }
.snbx-tool .panel { border-color: var(--line); box-shadow: var(--shadow); }
.snbx-tool .primary-button, .snbx-tool .btn-primary,
.snbx-random .result-panel .result-actions #btn_go {
    color: #fff; background: #bf3d70; box-shadow: 0 6px 16px #bf3d7026;
}
.snbx-tool .primary-button:hover, .snbx-tool .btn-primary:hover,
.snbx-random .result-panel .result-actions #btn_go:hover { background: #a92e5e; }
.snbx-random .mode-card.is-active { background: #fff1f6; border-color: #ed6f9d; }
.snbx-random .secondary-button { color: #a92e5e; background: #fff1f6; border-color: #f2ccdc; }
.snbx-random .result-column > article.result-panel { border-color: #dfe5ef; }
.snbx-random .round-title-label::after { background: #ed6f9d; }
.snbx-random .preview-help, .snbx-random .result-panel .status-pill { background: #f0f6ff; }
.snbx-words .text-area-wrap, .snbx-words .main-textarea,
.snbx-words .detail-item, .snbx-words .btn-secondary { background: #fff; border-color: #dfe5ef; }
.snbx-words .text-area-wrap { background: #f0f6ff; }
.snbx-words .stat-card { background: linear-gradient(135deg, #fff1f6, #fff); border-color: #edcfdf; }
.snbx-words .stat-card:nth-child(even) { background: linear-gradient(135deg, #f0f6ff, #fff); border-color: #d4e2f5; }
.snbx-words .stat-card:nth-child(4) .stat-value { color: #3979b5; }
.snbx-words .detail-badge, .snbx-words .summary-strip { background: #fff1f6; }
.snbx-words .language-pill { background: #f0f6ff; }
.snbx-words .frequency-table th { background: #f0f6ff; }
.snbx-json .topbar { margin-bottom: 20px; }
.snbx-json .brand-mark { color: #a92e5e; background: #ffe1ed; border-color: #f2ccdc; border-radius: 8px; transform: none; }
.snbx-json .search-panel { background: #071a36; border-radius: 16px; }
.snbx-json .search-box, .snbx-json .search-button { border-radius: 10px; }
.snbx-json .search-button { background: #ed6f9d; color: #071a36; }
.snbx-json .search-button:hover { background: #ffd6e5; }
.snbx-json .workspace { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.snbx-json .result-card { border-radius: 12px; overflow: hidden; }
.snbx-json .result-count, .snbx-json .success-mark { color: #071a36; background: #ffe1ed; }
.snbx-json mark, .snbx-json .source-highlight-layer mark { color: #071a36; background: #ffc6de; box-shadow: none; }
.snbx-json .editor-wrap textarea { caret-color: #ffb8d4; }
.snbx-json .editor-wrap textarea::selection { background: #ed6f9d66; }
.snbx-json .path-box button:hover { color: #071a36; background: #ffe1ed; }
body.snbx-json.dark-theme {
    --paper: #101d35; --paper-deep: #14233e; --card: #1b2c48;
    --ink: #edf3ff; --muted: #b7c5dd; --line: #354967;
    --accent: #ffb8d4; --accent-deep: #ed6f9d; --code: #07152c;
    background: #101d35;
}
.snbx-json.dark-theme .intro { background: linear-gradient(110deg, #322039ee, #142c47ef), url('assets/snbx-sakura-hero.png') center / cover; border-color: #57415a; }
.snbx-json.dark-theme h1 em { color: #ffb8d4; }
.snbx-json.dark-theme .search-panel { background: #07152c; }
@media (max-width: 680px) {
    .snbx-words .editor-headline { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .snbx-words .language-pill { justify-self: start; }
    .snbx-location { display: none; }
    .snbx-tool > .page-shell, .snbx-tool > .app-shell { width: calc(100% - 24px); margin-top: 14px; }
    .snbx-tool .hero-panel, .snbx-tool .masthead .hero, .snbx-tool .intro { padding: 22px 18px; border-radius: 16px; }
    .snbx-back { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .snbx-tool *, .snbx-tool *::before, .snbx-tool *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}