@import "神兵计算器/style.css";

iframe#nl-badge-frame { display: none !important; }

.tool-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.tool-card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
    padding: var(--spacing-xl);
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--bg-primary);
    box-shadow: var(--card-shadow);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    text-decoration: none;
}

a.tool-card:hover {
    border-color: var(--primary-color);
}

a.tool-card:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

.tool-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.tool-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--radius-md);
    background: #edf5ff;
    font-size: 26px;
}

.tool-status {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: #f0fff4;
    color: #237a42;
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.tool-name {
    color: #2c3e50;
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.tool-description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.7;
}

.tool-action {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-top: auto;
    padding-top: var(--spacing-md);
    color: var(--primary-dark);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.tool-card:disabled {
    border-color: var(--border-color);
    border-style: dashed;
    background: #f8f9fa;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1;
}

.tool-card:disabled .tool-icon,
.tool-card:disabled .tool-status {
    background: var(--bg-tertiary);
}

.tool-card:disabled .tool-icon {
    filter: grayscale(1);
}

.tool-card:disabled .tool-name,
.tool-card:disabled .tool-status,
.tool-card:disabled .tool-action {
    color: var(--text-secondary);
}

.guide-container .header h1 { padding: 0 36px; }
.guide-intro { margin-bottom: var(--spacing-lg); }
.guide-nav { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.guide-nav a {
    padding: 6px 12px; border-radius: var(--radius-sm); background: var(--bg-primary);
    color: var(--primary-dark); font-size: var(--font-size-sm); text-decoration: none;
}
.guide-sections { display: grid; gap: var(--spacing-md); }
.guide-section { scroll-margin-top: 140px; }
.guide-section .tool-card-header { margin-bottom: 0; }
.guide-section h3 { margin-top: var(--spacing-sm); color: #2c3e50; font-size: var(--font-size-md); }
.guide-section ul { padding-left: 20px; }
.guide-section li + li { margin-top: 8px; }
.guide-section p, .guide-section li {
    color: var(--text-secondary); font-size: var(--font-size-sm); line-height: 1.8; overflow-wrap: anywhere;
}
.guide-section strong { color: var(--text-primary); }
.guide-section .tool-action { align-self: flex-start; text-decoration: none; }
.guide-nav a:hover, .guide-section .tool-action:hover { text-decoration: underline; }
.guide-nav a:focus-visible, .guide-section .tool-action:focus-visible {
    outline: 2px solid var(--primary-color); outline-offset: 3px;
}
.support-link {
    border: 0; padding: 0 2px; background: transparent; color: var(--primary-dark);
    font: inherit; text-decoration: underline; cursor: pointer;
}
.support-dialog {
    width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto;
    padding: var(--spacing-xl); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
    background: var(--bg-primary); color: var(--text-primary); box-shadow: var(--card-shadow); overflow: auto;
}
.support-dialog::backdrop { background: rgba(0, 0, 0, 0.4); }
.support-dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.support-dialog-heading h2 { color: #2c3e50; font-size: var(--font-size-xl); }
.support-close {
    min-height: 36px; padding: 6px 12px; border: 0; border-radius: var(--radius-sm);
    background: var(--bg-secondary); color: var(--text-secondary); font: inherit; cursor: pointer;
}
.support-payments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 20px 0; }
.payment-code { width: 100%; aspect-ratio: 1; }
.payment-code img { display: block; width: 100%; height: 100%; object-fit: contain; }
#feedback-form label { display: block; margin-bottom: 8px; font-size: var(--font-size-md); }
#feedback-content {
    display: block; width: 100%; min-height: 100px; padding: 10px; border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); background: var(--bg-primary); color: var(--text-primary); font: inherit; resize: vertical;
}
.feedback-input-info { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--text-secondary); font-size: var(--font-size-xs); }
.feedback-submit {
    width: 100%; min-height: 44px; margin-top: 12px; padding: 10px; border: 0; border-radius: var(--radius-sm);
    background: #4a6fa5; color: white; font: inherit; cursor: pointer;
}
.feedback-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.feedback-status { margin-top: 10px; color: var(--text-secondary); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.feedback-status.error { color: #c52c24; }
.support-link:focus-visible, .support-dialog :is(input, textarea, button):focus-visible {
    outline: 2px solid var(--primary-color); outline-offset: 3px;
}

@media (max-width: 480px) {
    .tool-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tool-card {
        padding: var(--spacing-lg);
    }
}