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

        body {
            font-family: "Arial", Helvetica, Arial, sans-serif;
            background: #f4f6f0;
            color: #313131;
            margin: 0;
            padding: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
			font-size: 18px;
        }

        /* ── Header ── */
        .site-header {
            background: #ffffff;
            border-bottom: 3px solid #93A425;
            padding: 0.75rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .site-header img {
            height: 52px;
            width: auto;
        }
        .site-header-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #000;
            border-left: 2px solid #c8d9b8;
            padding-left: 1rem;
            line-height: 1.3;
        }
        .site-header-title span {
            display: block;
            font-size: 1rem;
            font-weight: 400;
            color: #000;
        }

        /* ── Main ── */
        main {
            flex: 1;
            max-width: 990px;
            width: 100%;
            margin: 2rem auto;
            padding: 0 1rem 3rem;
        }

		a {color: #313131; text-decoration: underline; }
		a:hover {color: #6C6D20; text-decoration: underline; }

        .page-intro {
            margin-bottom: 1.5rem;
        }
        .page-intro h1 {
            font-size: 1.5rem;
            font-weight: 700;
            color: #313131;
            margin: 0 0 0.35rem;
        }
        .page-intro p {
            font-size: 1rem;
            color: #313131;
            margin: 0;
        }

        /* ── Card ── */
        .card {
            background: #ffffff;
            
            border-radius: 18px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 12px 30px rgba(24, 42, 28, 0.10);
        }
        .card h2 {
            font-size: 1rem;
            font-weight: 700;
            color: #6C6D20;
            margin: 0 0 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e4edda;
        }

        /* ── Form elements ── */
        label {
            display: block;
            margin: 3rem 0 1rem;
            font-size: 1rem;
            font-weight: 600;
            color: #222;
        }
        label:first-of-type { margin-top: 0; }

        textarea, input[type="text"], select {
            width: 100%;
            padding: 0.55rem 0.75rem;
            border: 0px solid #b0c89a;
            border-radius: 8px;
            background: #F4F6F0;
            color: #222;
            font-size: 1rem;
            font-family: inherit;
            margin-top: 0.3rem;
            transition: border-color 0.15s;
        }
        textarea:focus, input[type="text"]:focus, select:focus {
            outline: none;
            border-color: #93A425;
            box-shadow: 0 0 0 3px rgba(74,124,47,0.12);
        }
        textarea {
            min-height: 110px;
            resize: vertical;
        }
        input[type="file"] {
            width: 100%;
            padding: 0.4rem 0;
            font-size: 1rem;
            color: #222;
            margin-top: 0.3rem;
        }

        /* ── Button ── */
        .btn {
            display: inline-block;
            background: #93A425;
            color: #ffffff;
            padding: 0.6rem 1.4rem;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            font-family: inherit;
            margin-top: 1.25rem;
            transition: background 0.15s;
        }
        .btn:hover { background: #6C6D20; }
        .btn:disabled { background: #a0b890; cursor: not-allowed; }
        .btn-sm {
            padding: 0.4rem 0.9rem;
            font-size: 1rem;
            margin-top: 0;
        }

        /* ── Alerts ── */
        .alert {
            margin-top: 3rem;
            padding: 1rem 1rem;
            border-radius: 8px;
            font-size: 1rem;
        }
        .alert-error {
            background: #fdf2f2;
            border: 0px solid #e8b4b4;
            color: #8b1a1a;
        }
        .alert-success {
            background: #f0f7eb;
            border: 0px solid #a8cc88;
            color: #6C6D20;
        }

        /* ── Result link row ── */
        .link-row {
            display: flex;
            gap: 0.5rem;
            align-items: center;
            margin-top: 0.75rem;
        }
        .link-row input[type="text"] {
            flex: 1;
            font-size: 1rem;
            background: #f0f7eb;
            margin-top: 0;
        }

        /* ── Muted / helper text ── */
        .hint {
            font-size: 1rem;
            color: #6C6D20;
            margin-top: 0.3rem;
        }

        /* ── Secret view ── */
        .secret-text-box {
            white-space: pre-wrap;
            background: #f0f7eb;
            border: 1px solid #b0c89a;
            border-radius: 8px;
            padding: 0.75rem;
            font-size: 1rem;
            margin-top: 0.4rem;
            word-break: break-all;
        }

        /* ── Badge ── */
        .badge {
            display: block;
            padding: 0.35rem 0.95rem;
            border-radius: 999px;
            font-size: 1rem;
            font-weight: 600;
            background: #e4edda;
            color: #222;
            margin-right: 0.3rem;
        }

        /* ── Footer ── */
        .site-footer {
            background: #9EA600;
            color: #fff;
            text-align: center;
            font-size: 0.78rem;
            padding: 0.9rem 1rem;
        }
        .site-footer a { color: #fff; text-decoration: underline; }
        .site-footer a:hover { text-decoration: underline; }