:root {
    --bg: #ffffff;
    --page: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f7f9fc;
    --line: #d8e0ea;
    --line-strong: #bcc8d8;
    --text: #1f2937;
    --muted: #667085;
    --muted-soft: #8a94a6;
    --accent: #355878;
    --accent-dark: #243f58;
    --accent-soft: #eef3f7;
    --danger: #d86f00;
    --danger-dark: #b85f00;
    --danger-soft: #fff4e8;
    --highlight: #fff200;
    --input: #ffffff;
    --shadow-lg: 0 16px 44px rgba(17, 24, 39, 0.05);
    --radius-xl: 26px;
    --radius-lg: 18px;
    --radius-md: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; background: var(--bg); }
body { color: var(--text); font-family: Inter, Arial, Helvetica, sans-serif; }
.container { max-width: 1060px; margin: 0 auto; padding: 12px 20px 40px; }

.page-shell,
.card {
    padding: 28px 34px 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    background: var(--page);
    box-shadow: var(--shadow-lg);
}

.page-shell { display: flex; flex-direction: column; gap: 24px; }
.page-shell-result { max-width: 780px; margin: 0 auto; }
.brand-bar, .brand-row { display: flex; align-items: center; }
.brand-logo { display: block; width: min(320px, 44vw); min-width: 170px; height: auto; }

.hero-copy { display: flex; flex-direction: column; gap: 10px; }
.hero-copy-tight { gap: 8px; }

h1 {
    margin: 0;
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text);
}

p { margin: 0; line-height: 1.65; }
.hero-copy p, .footnote, .meta-box, .auto-close-box p, .helper-text, .soft-note { color: var(--muted); }
label { display: block; font-weight: 800; font-size: 1rem; color: var(--text); }
textarea, input, select, button { font: inherit; }

textarea, input, select {
    width: 100%;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--input);
    color: var(--text);
    padding: 15px 16px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

textarea { resize: vertical; min-height: 280px; line-height: 1.6; }
textarea::placeholder, input::placeholder { color: var(--muted-soft); }
textarea:focus, input:focus, select:focus {
    outline: none;
    border-color: rgba(53, 88, 120, 0.55);
    box-shadow: 0 0 0 4px rgba(53, 88, 120, 0.14);
    background: #ffffff;
}

.secret-form { display: flex; flex-direction: column; gap: 22px; }
.field-group { display: flex; flex-direction: column; gap: 10px; }
.field-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.field-actions, .button-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.compact-row { justify-content: flex-start; }

.settings-box {
    margin: 0;
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-soft);
}

.settings-box legend { padding: 0 10px; color: var(--text); font-weight: 800; font-size: 1rem; }
.settings-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
.expiry-inline { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; }
.helper-text { font-size: 0.95rem; }
.submit-row { display: flex; align-items: center; gap: 14px; }

.button {
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 14px 20px;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button-small { padding: 10px 14px; font-size: 0.93rem; border-radius: 12px; font-weight: 700; }

.button-primary,
.button-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-dark) 100%);
    color: #ffffff;
    font-size: 1.02rem;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(53, 88, 120, 0.16);
}
.button-primary:hover, .button-copy:hover { box-shadow: 0 14px 30px rgba(53, 88, 120, 0.2); }
.button-primary { min-width: 240px; }

.button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: var(--text);
    border-color: var(--line-strong);
    box-shadow: 0 3px 10px rgba(17, 24, 39, 0.04);
    font-weight: 700;
}
.button-secondary:hover { background: var(--surface-soft); }

.button-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent-dark);
    border-color: rgba(53, 88, 120, 0.28);
    font-weight: 800;
}
.button-outline:hover { background: #e4edf4; }
.button-wide { width: 100%; }

.alert { margin: 0; padding: 16px 18px; border: 1px solid transparent; border-radius: var(--radius-lg); line-height: 1.55; }
.alert-success { background: #f6f8fa; border-color: var(--line); color: var(--text); }
.alert-error { background: #fff4f2; border-color: #f2c9c2; color: #9b2b20; }

.result-sheet { display: flex; flex-direction: column; gap: 18px; }
.result-field { display: flex; flex-direction: column; gap: 8px; }
.highlight-box {
    display: block;
    width: 100%;
    padding: 10px 12px;
    background: var(--highlight);
    color: #111111;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem;
    line-height: 1.5;
    word-break: break-all;
}
.single-view-box { min-height: 92px; resize: none; background: #ffffff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sr-only-input { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.expiry-text { font-size: 1.1rem; line-height: 1.5; font-weight: 700; color: var(--text); }
.result-actions-stacked { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.destroy-form { margin: 0; }
.auto-close-box, .meta-box { padding: 16px 18px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.note-box {
    margin: 0;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #ffffff;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.7;
    color: var(--text);
}
.secret-form-open { max-width: 560px; }
.footnote { font-size: 0.96rem; }
pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

@media (max-width: 760px) {
    .container { padding: 8px 12px 28px; }
    .page-shell, .card { padding: 20px; border-radius: 20px; }
    .brand-logo { width: min(260px, 66vw); min-width: 140px; }
    textarea { min-height: 220px; }
    .field-head { align-items: flex-start; }
    .field-actions, .button-row, .submit-row, .result-actions-stacked { width: 100%; }
    .field-actions .button, .button-row .button, .submit-row .button, .result-actions-stacked .button { width: 100%; min-width: 0; }
    .expiry-inline { grid-template-columns: 1fr; }
}
.brand-logo {
    width: 90px;
    height: auto;
}