/* style.css - QQ农场助手页面样式 */
:root {
    --bg: #f7f8fa;
    --card-bg: #ffffff;
    --text: #2c3e50;
    --text-secondary: #6b7d8e;
    --btn-1: #5b7fff;
    --btn-1-hover: #4a6ae0;
    --btn-2: #34c9a7;
    --btn-2-hover: #2aad8d;
    --btn-3: #f5a623;
    --btn-3-hover: #d8921a;
    --btn-4: #e85d75;
    --btn-4-hover: #cf4f64;
    --shadow: 0 2px 16px rgba(0,0,0,0.06);
    --shadow-hover: 0 4px 20px rgba(0,0,0,0.10);
    --radius: 16px;
    --transition: 0.2s ease;
    --table-border: #e8ecf1;
    --tag-bg: #eef2ff;
    --tag-text: #5b7fff;
}

* { margin:0; padding:0; box-sizing:border-box; }

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased;
    background-image:
        radial-gradient(ellipse at 30% 20%, rgba(91,127,255,0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 75%, rgba(52,201,167,0.03) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 50%, rgba(245,166,35,0.02) 0%, transparent 70%);
}

.container { width: 100%; max-width: 1200px; padding: 40px 28px; margin: 20px; }

.card {
    background: var(--card-bg);
    border-radius: 24px;
    padding: 48px 36px 36px;
    box-shadow: var(--shadow);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top:0; left:0; right:0;
    height: 4px;
    background: linear-gradient(90deg, var(--btn-1) 0%, var(--btn-2) 33%, var(--btn-3) 66%, var(--btn-4) 100%);
}

.logo-area { margin-bottom: 8px; }
.logo-icon {
    width: 56px; height: 56px;
    background: linear-gradient(135deg, #5b7fff 0%, #7b93ff 100%);
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    box-shadow: 0 4px 14px rgba(91,127,255,0.18);
}
.logo-icon svg { width:28px; height:28px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.title { font-size:26px; font-weight:700; color:var(--text); letter-spacing:-0.3px; margin-bottom:6px; }
.subtitle { font-size:14px; color:var(--text-secondary); font-weight:400; margin-bottom:28px; }

.account-switch {
    display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 20px;
}
.account-switch label { font-size: 14px; font-weight: 600; color: var(--text); }
.account-switch select {
    padding: 6px 10px; border: 1px solid var(--table-border); border-radius: 8px;
    background: var(--bg); color: var(--text); font-size: 14px;
}

.btn-group { display:flex; flex-direction:column; gap:14px; margin-bottom:8px; }
.btn {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:15px 24px;
    border-radius:var(--radius);
    font-size:16px;
    font-weight:600;
    letter-spacing:0.3px;
    text-decoration:none;
    color:#fff;
    cursor:pointer;
    transition: background var(--transition), box-shadow var(--transition), opacity var(--transition);
    border:none;
    outline:none;
    user-select:none;
    white-space:nowrap;
}
.btn:active { opacity:0.85; }
.btn:disabled { opacity:0.7; cursor:not-allowed; pointer-events:none; }
.btn-primary { background:var(--btn-1); box-shadow:0 4px 12px rgba(91,127,255,0.25); }
.btn-primary:hover:not(:disabled) { background:var(--btn-1-hover); box-shadow:0 6px 16px rgba(91,127,255,0.30); }
.btn-success { background:var(--btn-2); box-shadow:0 4px 12px rgba(52,201,167,0.25); }
.btn-success:hover { background:var(--btn-2-hover); box-shadow:0 6px 16px rgba(52,201,167,0.30); }
.btn-warning { background:var(--btn-3); box-shadow:0 4px 12px rgba(245,166,35,0.25); }
.btn-warning:hover { background:var(--btn-3-hover); box-shadow:0 6px 16px rgba(245,166,35,0.30); }
.btn-danger { background:var(--btn-4); box-shadow:0 4px 12px rgba(232,93,117,0.25); }
.btn-danger:hover { background:var(--btn-4-hover); box-shadow:0 6px 16px rgba(232,93,117,0.30); }
.btn-icon { width:20px; height:20px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; }
.btn-icon svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.btn-icon.spinning svg { animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.result-panel {
    margin-top: 24px; text-align: left; background: var(--card-bg); border-radius: var(--radius);
    overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.panel-header {
    display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px;
    border-bottom: 1px solid var(--table-border); flex-wrap: wrap; gap: 8px;
}
.panel-title { font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.panel-title .dot { width: 8px; height: 8px; border-radius: 50%; background: #34c9a7; }
.fetch-time { font-size: 11px; color: #9aa3b0; }

table { width: 100%; border-collapse: collapse; }
thead th {
    background: #f8fafc; color: var(--text-secondary); font-weight: 600;
    font-size: 13px; padding: 12px 8px; border-bottom: 1px solid var(--table-border); white-space: nowrap;
}
thead th:first-child { padding-left: 20px; }
thead th:last-child { padding-right: 20px; }
tbody td {
    padding: 12px 8px; font-size: 14px; color: var(--text);
    border-bottom: 1px solid #f0f2f5; vertical-align: middle;
}
tbody td:first-child { padding-left: 20px; }
tbody td:last-child { padding-right: 20px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: #fafbfc; }
tbody tr.selected { background: #eef2ff; }
.no-data td { text-align: center; padding: 30px 20px; color: #b0b8c3; font-size: 13px; }

.badge {
    display: inline-block; font-size: 12px; font-weight: 600; padding: 4px 10px;
    border-radius: 20px; background: var(--tag-bg); color: var(--tag-text);
}
.badge-success { background: #e8faf3; color: #34c9a7; }
.badge-warning { background: #fef7ec; color: #d8921a; }

.error-box {
    margin: 12px 20px; padding: 14px 16px; background: #fff5f5;
    border: 1px solid #fecaca; border-radius: 12px; color: #dc2626; font-size: 13px;
    display: flex; align-items: center; gap: 8px;
}
.error-box svg { width: 18px; height: 18px; flex-shrink: 0; }

.footer { text-align: center; margin-top: 20px; font-size: 12px; color: #b0b8c1; }

.btn-schedule {
    display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px;
    font-size: 12px; font-weight: 600; border-radius: 8px; background: #f0f4ff; color: #5b7fff;
    border: 1px solid #5b7fff; cursor: default; transition: background 0.2s, color 0.2s, border-color 0.2s; white-space: nowrap;
}
.btn-schedule:disabled { opacity: 0.9; }
.btn-schedule.done { background: #e8faf3; color: #34c9a7; border-color: #34c9a7; }
.btn-schedule.failed { background: #fff5f5; color: #dc2626; border-color: #dc2626; }
.btn-schedule.harvesting { background: #e0e7ff; color: #4a6ae0; border-color: #4a6ae0; }

.seed-settings {
    display: flex; align-items: center; justify-content: center; gap: 12px;
    margin: 16px 0 8px; padding: 12px 16px; background: var(--card-bg); border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.03); flex-wrap: wrap;
}
.seed-settings label { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
.seed-settings select {
    padding: 8px 12px; border: 1px solid var(--table-border); border-radius: 8px;
    font-size: 14px; background: var(--bg); color: var(--text); cursor: pointer;
}
.btn-save-seed {
    padding: 8px 20px; font-size: 13px; font-weight: 600; background: var(--btn-2);
    color: #fff; border: none; border-radius: 8px; cursor: pointer; transition: background 0.2s;
}
.btn-save-seed:hover { background: var(--btn-2-hover); }
.btn-bag-seed {
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    background: var(--btn-3); color: #fff; border: none; border-radius: 8px;
    cursor: pointer; transition: background 0.2s;
    display: inline-flex; align-items: center; gap: 4px;
}
.btn-bag-seed:hover { background: var(--btn-3-hover); }
.seed-count { font-size: 13px; color: var(--text-secondary); margin-left: 6px; }

.special-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: #fef7ec; color: #d8921a; margin-right: 2px; }
.crop-name { font-weight: 600; color: var(--text); }
.season { font-size: 12px; color: var(--text-secondary); }

.delay-checkbox {
    width: 18px; height: 18px; cursor: pointer;
    vertical-align: middle;
}

.custom-dropdown-wrapper { position: relative; display: inline-flex; align-items: center; }
.custom-dropdown-input {
    width: 120px; padding: 4px 6px; font-size: 12px;
    border: 1px solid var(--table-border); border-radius: 6px;
    background: var(--bg); color: var(--text);
}
.custom-dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    max-height: 180px;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--table-border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    z-index: 1000;
    display: none;
    text-align: left;
}
.custom-dropdown-list.show { display: block; }
.custom-dropdown-option {
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--table-border);
}
.custom-dropdown-option:hover { background: var(--btn-1); color: #fff; }
.custom-dropdown-option .option-count { color: var(--text-secondary); font-size: 11px; }
.custom-dropdown-option:hover .option-count { color: #fff; }

.land-seed-count { font-size: 12px; color: var(--text-secondary); white-space: nowrap; margin-left: 4px; }
.btn-land-save {
    padding: 4px 10px; font-size: 12px; border-radius: 6px;
    border: 1px solid var(--btn-1); background: #fff; color: var(--btn-1);
    cursor: pointer; transition: background 0.2s; white-space: nowrap;
}
.btn-land-save:hover { background: #eef2ff; }

.modal-overlay {
    position: fixed; top:0; left:0; width:100%; height:100%;
    background: rgba(0,0,0,0.4); z-index: 9999;
    display: flex; align-items: center; justify-content: center;
}
.modal-dialog {
    background: var(--card-bg); padding: 24px; border-radius: 16px;
    box-shadow: var(--shadow-hover); max-width: 360px; width: 90%; text-align: center;
}
.modal-dialog p { font-size: 16px; margin-bottom: 20px; color: var(--text); }
.modal-buttons { display: flex; gap: 12px; justify-content: center; }
.modal-btn {
    padding: 8px 20px; border-radius: 8px; border: 1px solid var(--table-border);
    cursor: pointer; font-weight: 600; font-size: 14px;
}
.modal-btn.confirm { background: var(--btn-1); color: #fff; border: none; }
.modal-btn.cancel { background: var(--bg); color: var(--text); }

.batch-toolbar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 20px; border-bottom: 1px solid var(--table-border);
    flex-wrap: wrap;
}
.batch-toolbar select {
    padding: 6px 10px; border: 1px solid var(--table-border); border-radius: 8px;
    background: var(--bg); color: var(--text); font-size: 14px;
}
.batch-toolbar label { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 4px; }
.btn-small {
    padding: 4px 12px; font-size: 12px; font-weight: 600; border-radius: 6px;
    border: 1px solid var(--table-border); background: var(--bg); color: var(--text);
    cursor: pointer; transition: background 0.2s;
}
.btn-small:hover { background: #e8ecf1; }
.btn-small.primary { background: var(--btn-1); color: #fff; border-color: var(--btn-1); }
.btn-small.primary:hover { background: var(--btn-1-hover); }

.log-modal-body { text-align: left; max-height: 70vh; overflow-y: auto; }
.log-file-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; border-bottom: 1px solid var(--table-border); cursor: pointer;
}
.log-file-item:hover { background: var(--bg); }
.log-content {
    white-space: pre-wrap; font-family: monospace; font-size: 13px;
    background: var(--bg); padding: 16px; border-radius: 8px; margin-top: 10px;
    max-height: 50vh; overflow-y: auto; line-height: 1.6;
}
.btn-log {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
    font-size: 13px; font-weight: 600; border-radius: 8px;
    border: 1px solid var(--btn-3); color: var(--btn-3); background: transparent;
    cursor: pointer; transition: background 0.2s; margin-top: 8px;
}
.btn-log:hover { background: var(--btn-3); color: #fff; }

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}
.info-card {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    text-align: left;
}
.info-card h3 { font-size: 16px; margin-bottom: 12px; color: var(--text); display: flex; align-items: center; gap: 8px; }
.info-card .value { font-size: 24px; font-weight: 700; color: var(--btn-1); }
.info-card .label { font-size: 13px; color: var(--text-secondary); margin-left: 6px; }
.inventory-list, .friend-list { list-style: none; font-size: 14px; }
.inventory-list li, .friend-list li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--table-border); }
.btn-fetch-all {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px;
    font-size: 13px; font-weight: 600; border-radius: 8px;
    border: 1px solid var(--btn-1); color: var(--btn-1); background: transparent;
    cursor: pointer; transition: background 0.2s;
}
.btn-fetch-all:hover { background: var(--btn-1); color: #fff; }

.bag-seed-list { max-height: 60vh; overflow-y: auto; text-align: left; }
.bag-seed-list .bag-seed-item {
    padding: 10px 12px; border-bottom: 1px solid var(--table-border);
    cursor: pointer; display: flex; justify-content: space-between; align-items: center;
}
.bag-seed-list .bag-seed-item:hover { background: var(--bg); }
.bag-seed-list .bag-seed-item .seed-name { font-weight: 600; }
.bag-seed-list .bag-seed-item .seed-qty { color: var(--btn-1); }

.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: 0.3s;
    border-radius: 24px;
}
.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}
input:checked + .slider {
    background-color: var(--btn-1);
}
input:checked + .slider:before {
    transform: translateX(20px);
}

@media (max-width: 640px) {
    .container { padding: 20px 12px; }
    .card { padding: 32px 16px 24px; }
    .title { font-size: 22px; }
    .btn { font-size: 15px; padding: 14px 18px; }
    table thead th, table tbody td { font-size: 12px; padding: 10px 6px; }
    .seed-settings { flex-direction: column; align-items: stretch; }
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1a1d23; --card-bg: #242730; --text: #e8eaef; --text-secondary: #959da9;
        --shadow: 0 2px 20px rgba(0,0,0,0.3); --shadow-hover: 0 4px 20px rgba(0,0,0,0.4);
        --table-border: #2e313b; --tag-bg: #2a3050; --tag-text: #8fa3ff;
    }
    .footer { color: #5a6270; }
    thead th { background: #1e212a; }
    tbody td { border-bottom-color: #2e313b; }
    tbody tr:hover { background: #262a33; }
    tbody tr.selected { background: #2a3050; }
    .btn { color: #fff; }
    .error-box { background: #2d1f1f; border-color: #5c2d2d; color: #f87171; }
    .badge { background: #2a3050; color: #8fa3ff; }
    .badge-success { background: #1e3a32; color: #4dd4aa; }
    .badge-warning { background: #3d3020; color: #e8b04d; }
    .btn-schedule { background: #2a3050; color: #8fa3ff; border-color: #4a5a80; }
    .btn-schedule.done { background: #1e3a32; color: #4dd4aa; border-color: #4dd4aa; }
    .btn-schedule.failed { background: #3d1f1f; color: #f87171; border-color: #f87171; }
    .btn-schedule.harvesting { background: #2a2d50; color: #8fa3ff; border-color: #4a5a80; }
    .special-tag { background: #3d3020; color: #e8b04d; }
    .custom-dropdown-input { background: #1a1d23; color: #e8eaef; border-color: #2e313b; }
    .btn-land-save { background: #1a1d23; color: #8fa3ff; border-color: #4a5a80; }
    .btn-land-save:hover { background: #2a3050; }
    .btn-small { background: #2a2d35; color: #e8eaef; border-color: #3a3d47; }
    .btn-small:hover { background: #3a3d47; }
    .btn-small.primary { background: var(--btn-1); color: #fff; border-color: var(--btn-1); }
    .slider { background-color: #555; }
}
        /* Toast 通知样式 */
        .toast-container {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 9999;
            pointer-events: none;
        }
        .toast {
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(0,0,0,0.25);
            animation: toast-in 0.3s ease, toast-out 0.3s ease 2.7s forwards;
            pointer-events: auto;
        }
        .toast-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .toast-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .toast-info {
            background: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        @keyframes toast-in {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes toast-out {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-20px); }
        }