body { font-family: Arial, sans-serif; margin: 20px; max-width: 800px; margin-left: auto; margin-right: auto; }
/* The dashed border marks the box as a place to drop files too. */
textarea { max-width: 700px; width: 100%; box-sizing: border-box; height: 150px; margin-bottom: 10px; padding: 8px; border: 2px dashed #9aa5b1; border-radius: 6px; }
button { padding: 10px 15px; margin-top: 5px; cursor: pointer; font-size: 1em; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; vertical-align: top; }
th { background-color: #f4f4f4; white-space: nowrap; width: auto; }
td { word-wrap: break-word; word-break: break-word; }
/* Labels may wrap between words, never inside a word. */
#outputTable td:first-child, .fields-table td:first-child { word-break: normal; overflow-wrap: normal; }
.fields-table th { white-space: normal; }
.fields-table code { overflow-wrap: anywhere; }
@media (max-width: 400px) { .fields-table { font-size: 0.85em; } .fields-table th, .fields-table td { padding: 6px 4px; } }
.status { font-size: 18px; margin-top: 20px; font-weight: bold; }
/* File picker styled like the decode button; the input stays focusable. */
.file-button { display: inline-block; position: relative; padding: 11px 15px; margin-top: 5px; margin-left: 6px; font-size: 1em; border: 1px solid #767676; border-radius: 3px; background-color: #efefef; cursor: pointer; }
.file-button:hover { background-color: #e5e5e5; }
.file-button:focus-within { outline: 2px solid #1a73e8; outline-offset: 2px; }
.file-button input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
textarea.drag-over { border: 2px solid #1a73e8; background-color: #f3f8ff; }
.file-note { font-size: 0.9em; color: #555; margin: 8px 0 0; }
.content-section { margin-top: 40px; line-height: 1.6; }
.content-section h2 { border-bottom: 1px solid #eee; padding-bottom: 5px; margin-top: 30px;}
.content-section h3 { margin-top: 25px; }
code { background-color: #f0f0f0; padding: 2px 4px; border-radius: 3px; font-family: Consolas, Monaco, monospace; }
/* Commands wrap instead of widening the page on phones. */
pre { background-color: #f0f0f0; padding: 8px 10px; border-radius: 3px; font-family: Consolas, Monaco, monospace; font-size: 0.9em; white-space: pre-wrap; overflow-wrap: anywhere; margin: 6px 0; }
ul { padding-left: 20px; }
li { margin-bottom: 8px; }
.privacy-notice {
    font-size: 0.9em;
    display: block;
    max-width: 700px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #eef7ff;
    border: 1px solid #bce8f1;
    border-radius: 4px;
    color: #31708f;
    text-align: center;
}
.privacy-notice strong { font-weight: bold; }
.privacy-notice code { background-color: transparent; padding: 0; border-radius: 0; } /* Avoid double background */
hr.solid { border-top: 1px solid #bbb; margin-top: 30px; margin-bottom: 30px;}

/* StatusAlert promo card */
.sa-promo {
    position: fixed;
    right: 20px;
    bottom: 20px;
    max-width: 320px;
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #ccc;
    border-left: 4px solid #2e7d32;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 14px 36px 14px 16px;
    font-size: 0.9em;
    line-height: 1.4;
    z-index: 1000;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.sa-promo.sa-visible { opacity: 1; transform: none; }
.sa-promo.sa-minimized { transform: translateX(calc(100% + 40px)); }
.sa-promo h4 { margin: 0 0 6px; font-size: 1em; }
.sa-promo p { margin: 0 0 10px; }
.sa-promo .sa-cta {
    display: inline-block;
    padding: 8px 14px;
    background-color: #2e7d32;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
}
.sa-promo .sa-cta:hover { background-color: #256628; }
.sa-promo .sa-close {
    position: absolute;
    top: 4px;
    right: 6px;
    margin: 0;
    padding: 2px 6px;
    border: 0;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: #888;
    cursor: pointer;
}
.sa-promo .sa-close:hover { color: #333; }
.sa-promo-mini {
    position: fixed;
    right: 20px;
    bottom: 20px;
    margin: 0;
    padding: 8px 14px;
    background-color: #2e7d32;
    color: #fff;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    font-size: 0.85em;
    font-weight: bold;
    cursor: pointer;
    z-index: 1000;
}
.sa-promo-mini:hover { background-color: #256628; }
@media (max-width: 600px) {
    .sa-promo {
        left: 0;
        right: 0;
        bottom: 0;
        max-width: none;
        border-radius: 0;
        border-left: 0;
        border-top: 4px solid #2e7d32;
    }
    .sa-promo-mini { right: 12px; bottom: 12px; }
}

/* Formerly inline styles; the Content-Security-Policy forbids style attributes. */
.noscript-warning { color: red; }
#outputTable { display: none; } /* shown by app.js after a decode */
.status-bad { color: red; }
.status-warn { color: orange; }
.status-good { color: green; }
.site-footer { margin-top: 50px; padding-top: 20px; border-top: 1px solid #ccc; font-size: 0.9em; color: #666; text-align: center; }
.site-footer a { color: #666; }