/* static/style.css - 最终版 - 添加居中样式并清理 */

/* Global Reset & Basic Styling */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif; line-height: 1.7; background-color: #f0f4f8; color: #495057; padding: 20px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.container { max-width: 1100px; margin: 30px auto; background-color: #ffffff; padding: 40px 50px; border-radius: 16px; box-shadow: 0 8px 25px rgba(0, 70, 170, 0.08); }
h1 { color: #1a3b5d; text-align: center; margin-bottom: 1.5em; font-weight: 600; font-size: 2.2rem; }
h2 { color: #005f9e; margin-top: 2.5em; margin-bottom: 1.2em; border-bottom: 1px solid #e0e7f1; padding-bottom: 0.6em; font-weight: 600; font-size: 1.4rem; }
h2:first-of-type { margin-top: 0; }
.info-bar { text-align: center; margin-bottom: 15px; /* 减少 flash 和日期的间距 */ padding: 12px; background-color: #e6f0f9; border-radius: 8px; color: #005f9e; font-weight: 500; }
#current-date-display { font-weight: bold; font-size: 1.2rem; color: #005f9e; }
.form-section { margin-bottom: 35px; }
.input-grid { display: grid; grid-template-columns: 160px 1fr; gap: 18px 25px; align-items: start; }
.input-grid label { text-align: right; font-weight: 600; color: #34495e; padding-top: 12px; padding-right: 15px; }
.optional-indicator { font-size: 0.85em; color: #6c757d; font-weight: normal; margin-left: 6px; white-space: nowrap; display: inline-block; }
@media (max-width: 768px) { .container { padding: 20px 25px; } h1 { font-size: 1.8rem; } h2 { font-size: 1.2rem; } .input-grid { grid-template-columns: 1fr; gap: 10px; } .input-grid label { text-align: left; padding-top: 0; margin-bottom: 5px; } .optional-indicator { margin-left: 8px; } #current-date-display { font-size: 1.1rem; } }
input[type="text"], select, textarea { width: 100%; padding: 12px 16px; border: 1px solid #d3dfea; border-radius: 8px; font-size: 1rem; color: #333; background-color: #fdfdfe; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
input[type="text"]:focus, select:focus, textarea:focus { border-color: #7ab5e9; outline: 0; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15); }
textarea { resize: vertical; min-height: 80px; line-height: 1.6; font-family: inherit;}
select { cursor: pointer; appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007bff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.6-3.6%205.4-7.9%205.4-12.8%200-5-1.8-9.2-5.4-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 1rem center; background-size: 0.65em auto; padding-right: 2.5rem; }

/* Generate Button Style */
button#generateBtn {
    display: block; /* Keep as block to allow flex wrapper to center it */
    width: 220px;
    /* margin: 40px auto; Removed auto margin, centering handled by wrapper */
    margin-top: 40px; /* Keep top separation */
    margin-bottom: 0; /* Remove bottom margin, spacing below handled by quota div margin */
    padding: 14px 25px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    color: white; border: none; border-radius: 30px; cursor: pointer;
    font-size: 1.1rem; font-weight: 600; letter-spacing: 0.8px;
    box-shadow: 0 5px 15px rgba(0, 91, 179, 0.25);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-transform: none;
}
button#generateBtn:hover { background: linear-gradient(135deg, #0056b3 0%, #004085 100%); box-shadow: 0 8px 20px rgba(0, 91, 179, 0.3); transform: translateY(-3px); }
button#generateBtn:active { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 91, 179, 0.2); }
button#generateBtn:disabled { background: #adb5bd; box-shadow: none; transform: none; cursor: not-allowed; opacity: 0.7; }

/* --- vvvv NEW: Wrapper for Button and Quota Centering vvvv --- */
.button-quota-wrapper {
  display: flex;
  flex-direction: column; /* Stack button and quota vertically */
  align-items: center;   /* Center them horizontally */
  margin-bottom: 25px;    /* Space below the quota text */
}
/* --- ^^^^ End Wrapper CSS ^^^^ --- */

/* --- vvvv NEW/MODIFIED: Quota Display Styles (replaces inline styles) vvvv --- */
#quota-display {
     margin-top: 10px; /* Spacing between button and text */
     color: #666;     /* Text color */
     font-size: 0.9em; /* Smaller font size */
     /* text-align: center; No longer needed, handled by wrapper */
}
/* --- ^^^^ End Quota Display CSS ^^^^ --- */

.output-section { margin-top: 40px; }
#outputArea { background-color: #f8f9fa; padding: 25px; border: 1px solid #e9ecef; border-radius: 12px; white-space: pre-wrap; word-wrap: break-word; min-height: 200px; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.04); color: #343a40; font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace; font-size: 1rem; line-height: 1.8; }
#loading { text-align: center; color: #17a2b8; font-weight: 500; margin-bottom: 15px; font-size: 1.1rem; padding: 10px; background-color: #e3f2fd; border-radius: 6px; }
.output-controls { text-align: right; margin-top: 15px; position: relative; }
button#copyBtn { padding: 8px 16px; font-size: 0.9rem; background-color: #6c757d; color: white; border: none; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease, transform 0.1s ease; }
button#copyBtn:hover { background-color: #5a6268; }
button#copyBtn:active { transform: scale(0.96); }
button#copyBtn.copied { background-color: #28a745; cursor: default; }
.copy-feedback { display: inline-block; margin-right: 10px; font-size: 0.9em; color: #28a745; opacity: 0; transition: opacity 0.5s ease-out; }
.copy-feedback.show { opacity: 1; }
footer { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #e0e7f1; font-size: 0.9rem; color: #6c757d; }
@media (min-width: 1200px) { .container { max-width: 1200px; } .input-grid { grid-template-columns: 180px 1fr; } }

/* --- 折叠效果样式 --- */
.optional-inputs .input-grid { margin-bottom: 15px; }
button.toggle-button { display: inline-block; margin-top: 5px; margin-bottom: 20px; padding: 6px 12px; font-size: 0.9rem; color: #005f9e; background-color: #eef5fc; border: 1px solid #b8d6f1; border-radius: 6px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
button.toggle-button:hover { background-color: #d1e7fd; color: #004085; }
#moreOptionalFields.optional-fields-collapsible { display: none !important; padding-top: 25px; border-top: 1px dashed #e0e7f1; margin-top: 20px; }
#moreOptionalFields.optional-fields-collapsible.is-visible { display: block !important; }

/* --- User Info / Logout Link Styles --- */
/* Combined duplicated rules from original HTML head */
.user-info {
    text-align: right;
    margin-bottom: 15px;
    font-size: 0.9em;
    color: #555;
}
.user-info a {
    color: #007bff;
    text-decoration: none;
    margin-left: 10px;
}
.user-info a:hover {
    text-decoration: underline;
}

/* --- Flash Message Styles (Moved from inline) --- */
.alert { /* General alert styling */
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-size: 0.95em;
    text-align: center;
    /* Removed background/color/border from here, rely on specific classes */
}
/* Specific flash categories */
.alert-danger { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-warning { background-color: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.alert-info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
/* Default/Unknown category flash message style (if category is missing or different) */
.alert:not(.alert-danger):not(.alert-success):not(.alert-warning):not(.alert-info) {
    background-color: #e6f0f9; color: #005f9e; border: 1px solid #b8daff; /* Default info style */
}


/* --- Removed unused #api-call-counter styles --- */
/*
#api-call-counter { ... old styles ... }
*/