@import url("https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@500;700;800&family=Noto+Sans+JP:wght@400;500;700&display=swap");

.tools-unified-page {
    --tools-bg-a: #f6f8ff;
    --tools-bg-b: #eef8f6;
    --tools-surface: rgba(255, 255, 255, 0.92);
    --tools-border: rgba(15, 23, 42, 0.1);
    --tools-shadow: 0 14px 32px rgba(15, 23, 42, 0.08);
    --tools-text: #0f172a;
    --tools-muted: #64748b;
    --tools-accent: #0f766e;
    --tools-accent-soft: rgba(15, 118, 110, 0.14);
    --tools-focus-ring: 0 0 0 0.2rem rgba(15, 118, 110, 0.2);
}

body.tools-unified-page {
    color: var(--tools-text);
    font-family: "Noto Sans JP", sans-serif;
    background:
        radial-gradient(circle at 8% 12%, rgba(15, 118, 110, 0.06), transparent 45%),
        radial-gradient(circle at 90% 20%, rgba(59, 130, 246, 0.07), transparent 40%),
        linear-gradient(180deg, var(--tools-bg-a), var(--tools-bg-b));
}

.tools-unified-page .page-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(240, 253, 250, 0.95));
    border-color: rgba(15, 118, 110, 0.14);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08);
}

.tools-unified-page .page-header__title {
    font-size: clamp(1.95rem, 1.4vw + 1.4rem, 2.55rem);
}

.tools-unified-page .page-header__title-text {
    font-family: "M PLUS 1p", "Noto Sans JP", sans-serif;
    letter-spacing: 0.03em;
}

.tools-unified-page .page-header__eyebrow {
    color: var(--tools-muted);
}

.tools-unified-page .page-header__subtitle {
    color: #475569;
}

.tools-unified-page .card {
    background: var(--tools-surface);
    border: 1px solid var(--tools-border);
    box-shadow: var(--tools-shadow);
}

.tools-unified-page .form-label {
    color: var(--tools-muted);
    font-weight: 700;
}

.tools-unified-page .form-control,
.tools-unified-page .form-select,
.tools-unified-page textarea {
    border-color: rgba(15, 23, 42, 0.16);
    background: rgba(255, 255, 255, 0.94);
    color: var(--tools-text);
}

.tools-unified-page .form-control:focus,
.tools-unified-page .form-select:focus,
.tools-unified-page textarea:focus {
    border-color: rgba(15, 118, 110, 0.35);
    box-shadow: var(--tools-focus-ring);
}

.tools-unified-page .form-check-input:focus {
    border-color: rgba(15, 118, 110, 0.35);
    box-shadow: var(--tools-focus-ring);
}

.tools-unified-page .btn-primary {
    background-color: var(--tools-accent);
    border-color: var(--tools-accent);
}

.tools-unified-page .btn-primary:hover,
.tools-unified-page .btn-primary:focus-visible {
    background-color: #115e59;
    border-color: #115e59;
}

.tools-unified-page .btn-outline-primary {
    color: var(--tools-accent);
    border-color: rgba(15, 118, 110, 0.35);
}

.tools-unified-page .btn-outline-primary:hover,
.tools-unified-page .btn-outline-primary:focus-visible {
    color: #fff;
    background-color: var(--tools-accent);
    border-color: var(--tools-accent);
}

.tools-unified-page :focus-visible {
    outline: 2px solid rgba(15, 118, 110, 0.35);
    outline-offset: 2px;
}

.tools-unified-page .btn:focus,
.tools-unified-page .btn:focus-visible {
    box-shadow: var(--tools-focus-ring);
}

.tools-unified-page .alert-secondary {
    border-color: rgba(15, 118, 110, 0.2);
    background: var(--tools-accent-soft);
    color: #0f172a;
}