:root {
    color-scheme: dark;
    --ui-bg: #080a0f;
    --ui-bg-soft: #0c0f16;
    --ui-surface: #121620;
    --ui-surface-raised: #181d29;
    --ui-surface-hover: #1e2533;
    --ui-border: #2b3445;
    --ui-border-strong: #3a465b;
    --ui-text: #f4f7fb;
    --ui-text-secondary: #c7d0de;
    --ui-muted: #9aa7ba;
    --ui-subtle: #778399;
    --ui-accent: #8da8ff;
    --ui-accent-hover: #a9bcff;
    --ui-accent-strong: #6f8ff7;
    --ui-accent-soft: rgba(141, 168, 255, 0.13);
    --ui-success: #65d9ac;
    --ui-warning: #f3c969;
    --ui-danger: #ff8293;
    --ui-danger-soft: rgba(255, 130, 147, 0.12);
    --ui-ring: rgba(141, 168, 255, 0.3);
    --ui-radius-sm: 9px;
    --ui-radius: 13px;
    --ui-radius-lg: 18px;
    --ui-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    --ui-font: "Pretendard Variable", Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Inter, "Segoe UI", sans-serif;
    --ui-mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;

    --shell-bg: #0c0f16;
    --shell-panel: #151a25;
    --shell-border: rgba(171, 188, 215, 0.16);
    --shell-text: var(--ui-text);
    --shell-muted: var(--ui-muted);
    --shell-accent: var(--ui-accent);
    --shell-danger: var(--ui-danger);
}

html {
    background: var(--ui-bg);
    font-family: var(--ui-font);
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.app-page {
    min-width: 0;
    background:
        radial-gradient(circle at 88% -8%, rgba(111, 143, 247, 0.12), transparent 27rem),
        radial-gradient(circle at 30% 105%, rgba(101, 217, 172, 0.055), transparent 32rem),
        var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--ui-font);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.app-page *,
.app-page *::before,
.app-page *::after {
    box-sizing: border-box;
}

.app-page :is(h1, h2, h3, h4, h5, h6, p, a, button, label, th, td, dd, dt, li) {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.app-page :is(pre, code, samp, kbd, .app-code, .detail-pre, .detail-value) {
    font-family: var(--ui-mono);
    overflow-wrap: anywhere;
    word-break: break-word;
}

.app-page pre {
    max-width: 100%;
    white-space: pre-wrap;
}

.app-page ::selection {
    background: rgba(141, 168, 255, 0.32);
    color: #fff;
}

.app-page :focus-visible {
    outline: 2px solid var(--ui-accent-hover);
    outline-offset: 2px;
}

.app-page :disabled,
.app-page [aria-disabled="true"] {
    cursor: not-allowed !important;
    opacity: 0.55;
}

.app-page ::-webkit-scrollbar { width: 10px; height: 10px; }
.app-page ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.025); }
.app-page ::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: #394459; background-clip: padding-box; }
.app-page ::-webkit-scrollbar-thumb:hover { background: #4a5870; background-clip: padding-box; }

/* Shell */
.app-shell {
    background: rgba(12, 15, 22, 0.97);
    border-color: var(--shell-border);
    box-shadow: 10px 0 36px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(18px) saturate(125%);
    font-family: var(--ui-font);
}

.app-shell__brand-mark,
.app-shell__icon {
    border-color: rgba(141, 168, 255, 0.24);
    background: rgba(141, 168, 255, 0.08);
    color: var(--ui-accent-hover);
}

.app-shell__group-title {
    color: #8f9caf;
    font-size: 0.69rem;
    letter-spacing: 0.08em;
}

.app-shell__link,
.app-shell__menu-toggle {
    color: #d8dfeb;
    font-size: 0.86rem;
    font-weight: 650;
}

.app-shell__link:hover,
.app-shell__menu-toggle:hover {
    background: rgba(141, 168, 255, 0.09);
    color: #fff;
}

.app-shell__link.is-active,
.app-shell__menu.is-active > .app-shell__menu-toggle {
    background: linear-gradient(90deg, rgba(141, 168, 255, 0.2), rgba(141, 168, 255, 0.08));
    color: #fff;
    box-shadow: inset 2px 0 0 var(--ui-accent);
}

.app-shell__footer { background: rgba(6, 8, 13, 0.32); }
.app-shell__mobile-bar { background: rgba(12, 15, 22, 0.94); }

/* Page structure */
.app-page__header {
    min-height: 94px;
    padding: 24px clamp(20px, 3vw, 40px);
    border-color: rgba(171, 188, 215, 0.14);
    background: rgba(12, 15, 22, 0.72);
    backdrop-filter: blur(14px);
}

.app-page__title {
    color: var(--ui-text);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

.app-page__subtitle,
.app-help,
.app-card__text {
    color: var(--ui-muted);
    line-height: 1.65;
}

.app-page__content {
    width: min(1220px, calc(100% - clamp(28px, 5vw, 64px)));
    margin-top: clamp(22px, 3vw, 36px);
}

.app-section { margin-bottom: clamp(28px, 4vw, 44px); }
.app-section > h2 { margin-bottom: 16px; color: var(--ui-text); font-size: 1.05rem; font-weight: 800; }

.app-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }

.app-card,
.app-form-card,
.auth-card,
.login-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    background: linear-gradient(145deg, rgba(24, 29, 41, 0.96), rgba(17, 21, 31, 0.96));
    color: var(--ui-text);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025), 0 14px 38px rgba(0, 0, 0, 0.14);
}

.app-card { min-width: 0; padding: 22px; }
.app-card:hover { border-color: rgba(141, 168, 255, 0.58); transform: translateY(-2px); }
.app-card__title { color: var(--ui-text); line-height: 1.35; }
.app-form-card, .auth-card { padding: clamp(20px, 3vw, 30px); }

.app-actions {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 20px;
}

/* Buttons */
.app-page main :is(
    button,
    .btn,
    .button,
    .app-primary,
    .app-shell__button,
    [class^="btn-"],
    [class*=" btn-"]
):not(.btn-icon):not(.modal-close):not(.response-modal-close) {
    box-sizing: border-box;
    min-width: 0;
    min-height: 42px;
    max-width: 100%;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 10px;
    padding: 9px 16px;
    font-family: var(--ui-font);
    font-size: 0.85rem;
    font-weight: 750;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: keep-all;
    cursor: pointer;
    transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.app-page main :is(button, .btn, .button, .app-primary, .app-shell__button):not(:disabled):active {
    transform: translateY(1px);
}

.app-primary,
.app-page main :is(.btn-primary, .btn-send, .btn-run, .response-save-btn) {
    border: 1px solid transparent;
    background: var(--ui-accent);
    color: #09101d;
}

.app-primary:hover,
.app-page main :is(.btn-primary, .btn-send, .btn-run, .response-save-btn):hover {
    background: var(--ui-accent-hover);
    color: #080d17;
}

.app-primary--secondary,
.app-page main :is(.app-shell__button, .btn-cancel, .btn-action, .btn-compose, .tab-btn, .preset-btn, .response-preset-btn) {
    border: 1px solid var(--ui-border-strong);
    background: var(--ui-surface-raised);
    color: var(--ui-text-secondary);
}

.app-primary--secondary:hover,
.app-page main :is(.app-shell__button, .btn-cancel, .btn-action, .btn-compose, .tab-btn, .preset-btn, .response-preset-btn):hover {
    border-color: rgba(141, 168, 255, 0.6);
    background: var(--ui-surface-hover);
    color: #fff;
}

.app-page main :is(.btn-danger, .btn-danger-action, .account-deactivate) {
    border-color: rgba(255, 130, 147, 0.38);
    background: var(--ui-danger-soft);
    color: #ffb4bf;
}

.app-page main :is(.btn-icon, .modal-close, .response-modal-close) {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    padding: 0;
    background: var(--ui-surface-raised);
    color: var(--ui-text-secondary);
}

.app-page main :is(.btn-pill, .dns-copy-chip, .app-pill) {
    min-height: 32px;
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    background: var(--ui-surface-raised);
    color: var(--ui-text-secondary);
    padding: 5px 11px;
    font-size: 0.75rem;
    line-height: 1.25;
}

/* Forms and file uploads */
.app-page main :is(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    select,
    textarea,
    .form-control,
    .form-select,
    .app-input,
    .search-input,
    .query-box,
    .editable
) {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    border: 1px solid var(--ui-border-strong);
    border-radius: 10px;
    background: #0d1119;
    color: var(--ui-text);
    padding: 9px 12px;
    font-family: var(--ui-font);
    font-size: 0.875rem;
    line-height: 1.45;
    box-shadow: none;
}

.app-page main textarea { min-height: 120px; height: auto; resize: vertical; }
.app-page main select { padding-right: 34px; color-scheme: dark; }
.app-page main :is(input, textarea)::placeholder { color: #748096; opacity: 1; }

.app-page main :is(input, select, textarea, .form-control, .form-select):focus {
    outline: none;
    border-color: var(--ui-accent);
    background: #10151f;
    color: #fff;
    box-shadow: 0 0 0 3px var(--ui-ring);
}

.app-page main input[type="checkbox"],
.app-page main input[type="radio"] {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    margin: 0;
    accent-color: var(--ui-accent-strong);
}

.app-page main input[type="file"],
.app-file-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    height: auto;
    display: block;
    overflow: hidden;
    border: 1px solid var(--ui-border-strong);
    border-radius: 11px;
    background: #0d1119;
    color: var(--ui-text-secondary);
    padding: 5px 7px;
    font-family: var(--ui-font);
    font-size: 0.82rem;
    line-height: 36px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-page main input[type="file"]::file-selector-button,
.app-file-input::file-selector-button {
    min-height: 36px;
    margin: 0 12px 0 0;
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    background: var(--ui-surface-raised);
    color: var(--ui-text);
    padding: 0 13px;
    font-family: var(--ui-font);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.app-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(112px, auto);
    gap: 12px;
    align-items: stretch;
}

.app-form-grid > *,
.form-grid > *,
.toolbar > *,
.search-row > * { min-width: 0; }

/* Tables */
.app-page main :is(.table-wrapper, .table-wrap, .account-table-wrap) {
    max-width: 100%;
    overflow: auto;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    scrollbar-gutter: stable;
}

.app-page main table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
    background: transparent;
    color: var(--ui-text-secondary);
    font-size: 0.82rem;
}

.app-page main table th,
.app-page main table td {
    min-width: 0;
    max-width: 360px;
    border: 0;
    border-bottom: 1px solid rgba(171, 188, 215, 0.12);
    background: transparent;
    color: var(--ui-text-secondary) !important;
    padding: 12px 14px;
    line-height: 1.45;
    vertical-align: middle !important;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
}

.app-page main table th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #171c27;
    color: #aeb9ca !important;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    white-space: nowrap;
}

.app-page main table tbody tr:last-child td { border-bottom: 0; }
.app-page main table tbody tr:hover td { background: rgba(141, 168, 255, 0.055); color: #fff !important; }
.app-page main :is(.account-actions, .table-actions, td.actions) { text-align: center; }
.app-page main :is(.account-actions, .table-actions) { justify-content: center; }

.account-table { min-width: 860px; }
.account-table th, .account-table td { white-space: nowrap; }
.account-actions { justify-content: center; flex-wrap: wrap; }
.account-actions form { min-width: 0; }

/* Legacy layouts */
.legacy-page {
    --bg-primary: var(--ui-bg) !important;
    --bg-secondary: var(--ui-bg-soft) !important;
    --bg-card: var(--ui-surface) !important;
    --bg-hover: var(--ui-surface-hover) !important;
    --bg-active: var(--ui-accent-soft) !important;
    --border-primary: var(--ui-border) !important;
    --border-accent: var(--ui-accent) !important;
    --text-primary: var(--ui-text) !important;
    --text-secondary: var(--ui-text-secondary) !important;
    --text-muted: var(--ui-muted) !important;
    --accent: var(--ui-accent) !important;
    --accent-hover: var(--ui-accent-hover) !important;
    --accent-glow: var(--ui-ring) !important;
    background: var(--ui-bg) !important;
    color: var(--ui-text) !important;
    font-family: var(--ui-font) !important;
}

.legacy-page :is(.list-panel, .detail-panel, .control-panel, .log-panel) {
    border-color: var(--ui-border) !important;
    background: var(--ui-bg-soft) !important;
    color: var(--ui-text) !important;
}

.legacy-page :is(.panel-header, .top-bar, .toolbar, .tab-bar, .pagination, .header-bar) {
    border-color: var(--ui-border) !important;
    background: #10141d !important;
    color: var(--ui-text) !important;
}

.legacy-page :is(.detail-card, .card, .result-box, .log-container, .modal-box, .response-modal-panel) {
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text-secondary) !important;
    box-shadow: var(--ui-shadow);
}

.legacy-page :is(.card-header, .modal-header, .response-modal-header) {
    border-color: var(--ui-border) !important;
    background: var(--ui-surface-raised) !important;
    color: var(--ui-text) !important;
}

.legacy-page :is(h1, h2, h3, .detail-label, .form-label, label) { color: var(--ui-text) !important; }
.legacy-page :is(.text-muted, small, .detail-value, .user-info) { color: var(--ui-muted) !important; }
.legacy-page :is(.empty, #empty-state, .empty-state) { color: var(--ui-muted) !important; }

.legacy-page :is(.toolbar, .search-row, .filter-row, .top-bar-actions, .panel-header--actions) {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.legacy-page :is(.search-input, #search-input, #searchInput) { flex: 1 1 220px; }
.legacy-page .dns-token-strip { row-gap: 8px; }
.legacy-page .dns-token-value { min-width: 0; color: var(--ui-accent-hover) !important; }

.legacy-webhook-logs .search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, 40px);
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.legacy-mail-logs .toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(3, 40px) auto;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.legacy-webhook-logs .search-row .search-input,
.legacy-mail-logs .toolbar .search-input {
    width: 100%;
    min-width: 0;
    flex-basis: auto;
}

.legacy-webhook-logs .filter-row,
.legacy-webhook-logs .dns-token-strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
}

.legacy-webhook-logs .filter-row > *,
.legacy-webhook-logs .dns-token-label,
.legacy-webhook-logs .dns-copy-chip {
    flex: 0 0 auto;
}

.legacy-webhook-logs .dns-token-value {
    flex: 1 1 140px;
    min-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.legacy-mail-logs .tab-bar {
    display: flex;
    overflow: hidden;
}

.legacy-mail-logs .tab-bar > .tab-btn {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
}

.legacy-webhook-logs .response-modal-backdrop,
.legacy-mail-logs .modal-overlay { backdrop-filter: blur(7px); }

.legacy-webhook-logs .response-modal-backdrop,
.legacy-mail-logs .modal-overlay,
.legacy-page :is(.modal-overlay, .modal-backdrop) { z-index: 11050 !important; }

.legacy-webhook-logs .response-modal-panel,
.legacy-mail-logs .modal-box {
    width: min(680px, calc(100vw - 28px));
    max-width: 100%;
    max-height: calc(100dvh - 32px);
    overflow: auto;
}

.legacy-webhook-logs .response-modal-actions,
.legacy-mail-logs .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    border-color: var(--ui-border) !important;
}

.legacy-spam-rules .container-main { width: min(1200px, calc(100% - 32px)); margin-inline: auto; }
.legacy-spam-rules .form-grid { grid-template-columns: minmax(150px, 0.8fr) minmax(240px, 2fr) minmax(130px, 0.7fr) minmax(110px, auto); gap: 12px; align-items: center; }
.legacy-spam-rules .checkbox-wrap { min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; }

.legacy-db-test { background: var(--ui-bg) !important; color: var(--ui-text-secondary) !important; font-family: var(--ui-font) !important; }
.legacy-db-test .query-box { font-family: var(--ui-mono) !important; }
.legacy-db-test .result-box { background: #0d1119 !important; }
.legacy-db-test .table td { color: var(--ui-text-secondary) !important; }
.legacy-db-test .rollback-badge { background: rgba(243, 201, 105, 0.16); color: #ffe0a0; }
.legacy-db-test .db-target-row {
    display: grid;
    grid-template-columns: minmax(150px, auto) minmax(240px, 1fr) auto;
    align-items: center;
    gap: 12px;
}
.legacy-db-test .db-target-row label { margin: 0; }
.legacy-db-test .db-target-row select { min-width: 0; }
.legacy-db-test .db-access-note {
    margin: -4px 0 16px;
    color: var(--ui-muted);
    font-size: 0.82rem;
}

/* Encoding */
.encoding-toolbar,
.encoding-detect,
.encoding-workbench,
.encoding-jwt-viewer {
    border-color: var(--ui-border) !important;
    border-radius: var(--ui-radius) !important;
    background: var(--ui-surface) !important;
}

.encoding-toolbar { grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 12px; }
.encoding-field > span, .encoding-pane > span { color: var(--ui-muted); }
.encoding-segmented { min-width: 0; border-color: var(--ui-border-strong); border-radius: 10px; background: #0d1119; }
.encoding-segmented span { min-width: 0; overflow-wrap: anywhere; }
.encoding-samples { gap: 7px; }
.encoding-samples button { min-height: 40px !important; padding: 7px 11px !important; font-size: 0.76rem !important; }
.encoding-pane { min-width: 0; }
.app-page main .encoding-pane textarea { width: 100%; max-width: 100%; min-height: 360px !important; font-family: var(--ui-mono); }

.app-page main .btn-pill.active {
    border-color: transparent;
    background: var(--ui-accent);
    color: #09101d !important;
}

/* Public home and login */
.home-page,
.login-page,
.blog-article { font-family: var(--ui-font); }

.home-hero {
    border-color: var(--ui-border);
    background:
        radial-gradient(circle at 88% 12%, rgba(141, 168, 255, 0.2), transparent 27%),
        linear-gradient(145deg, #171c28 0%, #10141e 72%, #171d2a 100%);
    box-shadow: var(--ui-shadow);
}

.home-hero h1, .login-panel h1, .blog-article h1 { color: #fff; }
.home-hero__copy > p, .home-section__heading > p, .home-post-card p, .login-panel > p, .blog-article__body p { color: var(--ui-text-secondary); }
.home-kicker, .home-eyebrow { color: var(--ui-accent-hover); }
.home-tool-card { border-color: var(--ui-border); background: var(--ui-surface); color: var(--ui-text); }
.home-tool-card:hover { border-color: rgba(141, 168, 255, 0.65); background: var(--ui-surface-hover); }
.home-tool-card__icon { border-color: rgba(141, 168, 255, 0.28); background: var(--ui-accent-soft); color: var(--ui-accent-hover); }
.home-tool-card__content span { color: var(--ui-muted); }
.home-post-card { border-color: var(--ui-border); }
.home-post-card h3 a { color: var(--ui-text); }
.home-post-card h3 a:hover, .home-post-card__link { color: var(--ui-accent-hover); }
.login-card { background: var(--ui-surface); }
.login-page { min-height: calc(100dvh - 96px); }
.blog-article__summary { border-color: var(--ui-accent); color: var(--ui-text-secondary); }

@media (max-width: 1180px) {
    .home-tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .encoding-toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .legacy-spam-rules .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

@media (max-width: 767px) {
    body.app-page { font-size: 0.9rem; }
    .app-page__header { min-height: auto; padding: 18px; }
    .app-page__content { width: min(100% - 24px, 1220px); margin-top: 20px; }
    .app-page__content--full { width: 100%; margin: 0; }
    .app-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 10px; }
    .app-actions > * { width: 100%; min-width: 0; }
    .app-form-grid, .encoding-toolbar, .legacy-spam-rules .form-grid { grid-template-columns: 1fr; }
    .legacy-db-test .db-target-row { grid-template-columns: 1fr; align-items: stretch; }
    .app-form-grid .app-primary { width: 100%; }
    .legacy-page :is(.toolbar, .search-row, .filter-row) { align-items: stretch; }

    .legacy-webhook-logs .search-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) repeat(3, 40px);
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .legacy-mail-logs .toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) repeat(3, 40px) auto;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .legacy-webhook-logs .search-row .search-input,
    .legacy-mail-logs .toolbar .search-input {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
    }

    .legacy-webhook-logs .filter-row,
    .legacy-mail-logs .tab-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .legacy-webhook-logs .filter-row > *,
    .legacy-mail-logs .tab-bar > * {
        flex: 0 0 auto;
        width: auto;
    }

    .legacy-webhook-logs .filter-row .btn-danger-action,
    .legacy-mail-logs .toolbar .btn-danger-action {
        margin-left: 0;
    }

    .legacy-mail-logs .toolbar .btn-danger-action {
        grid-column: auto;
        width: auto;
        white-space: nowrap;
    }

    .legacy-webhook-logs .dns-token-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: thin;
    }

    .legacy-webhook-logs .dns-token-label,
    .legacy-webhook-logs .dns-copy-chip {
        flex: 0 0 auto;
    }

    .legacy-webhook-logs .dns-token-value {
        flex: 1 1 140px;
        min-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .legacy-webhook-logs .response-modal-actions,
    .legacy-mail-logs .modal-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
        gap: 10px;
    }

    .legacy-webhook-logs .response-editor-status {
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
    }

    .legacy-webhook-logs .response-modal-actions .btn-action,
    .legacy-mail-logs .modal-footer :is(.btn-cancel, .btn-send) {
        width: 100%;
        min-width: 0;
    }

    .legacy-spam-logs .toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
    }

    .legacy-spam-logs .toolbar .search-input {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
    }

    .legacy-spam-logs .toolbar .btn,
    .legacy-spam-logs .pagination .btn {
        width: auto;
        white-space: nowrap;
    }

    .legacy-spam-logs .pagination > div {
        display: grid;
        grid-template-columns: repeat(2, minmax(88px, auto));
        gap: 8px;
    }

    .encoding-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 8px;
    }

    .encoding-actions :is(.app-shell__button, .app-primary) {
        width: 100% !important;
        min-width: 0;
    }

    .encoding-actions .encoding-status { grid-column: 1 / -1; }

    .legacy-persistent-logger .actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .legacy-persistent-logger .actions .button {
        width: 100%;
        min-width: 0;
        margin: 0;
    }

    .legacy-persistent-logger .actions .button:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .legacy-app-log-viewer .log-panel > .d-flex > div:last-child {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        width: 100%;
    }

    .legacy-app-log-viewer .log-panel > .d-flex > div:last-child #log-count {
        grid-column: 1 / -1;
    }

    .legacy-app-log-viewer .log-panel > .d-flex > div:last-child .btn-hack {
        width: 100%;
        min-width: 0;
        margin: 0 !important;
        white-space: nowrap;
    }
    .app-page main table th, .app-page main table td { max-width: 260px; padding: 10px 12px; }
    .app-page main :is(.table-wrapper, .table-wrap, .account-table-wrap) table { min-width: 680px; }
    .home-tool-grid { grid-template-columns: 1fr; }
    .login-page { min-height: auto; padding-block: 28px 56px; }
    .app-page main .encoding-pane textarea { min-height: 260px !important; }
}

@media (max-width: 520px) {
    .app-page main :is(.app-actions > *, .app-form-grid .app-primary, .login-actions .app-primary) { width: 100%; }
    .app-page main :is(.btn-pill, .dns-copy-chip, .app-pill, .tab-btn, .encoding-samples button) { width: auto; }
    .app-page main input[type="file"]::file-selector-button, .app-file-input::file-selector-button { margin-right: 8px; padding-inline: 10px; }
    .legacy-page .top-bar { align-items: flex-start; flex-direction: column; }
    .legacy-page .top-bar-actions { width: 100%; }
    .legacy-page .top-bar-actions a { margin: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
    .app-card, .home-tool-card, .app-page main button, .app-page main a { transition: none !important; }
}