/**
 * MTGPath Public Styles
 */

/* ================================
   CSS Variables (Using your brand colors)
   ================================ */
:root {
    /* MTGPath Palette */
    --mtgpath-primary: #540030;          /* primary */
    --mtgpath-secondary: #2a0018;        /* secondary */
    --mtgpath-cta: #b0ce00;              /* highlight / CTA */
    --mtgpath-accent: #00a888;           /* secondary highlight */

    --mtgpath-page-bg: #e4ead0;          /* site content background */
    --mtgpath-card-bg: #ffffff;
    --mtgpath-text: #2a0018;
    --mtgpath-text-muted: rgba(42, 0, 24, 0.65);

    --mtgpath-border: rgba(42, 0, 24, 0.14);
    --mtgpath-border-strong: rgba(42, 0, 24, 0.22);

    --mtgpath-danger: #e11d48;

    --mtgpath-radius: 14px;
    --mtgpath-radius-lg: 18px;
    --mtgpath-shadow: 0 10px 30px rgba(42, 0, 24, 0.08);
    --mtgpath-shadow-sm: 0 6px 18px rgba(42, 0, 24, 0.06);

    --mtgpath-focus-ring: 0 0 0 4px rgba(176, 206, 0, 0.25);
}/* ================================
   Base Styles
   ================================ */
.mtgpath-form-wrapper,
.mtgpath-dashboard,
.mtgpath-single-deck {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--mtgpath-text);
    line-height: 1.6;
}

/*
 * Divi/the theme can force global text colors (often white). Lock our deck view
 * typography to the intended foreground colors so text doesn't disappear on
 * light panels.
 */
.mtgpath-single-deck h1,
.mtgpath-single-deck h2,
.mtgpath-single-deck h3,
.mtgpath-single-deck h4,
.mtgpath-single-deck h5,
.mtgpath-single-deck h6,
.mtgpath-single-deck p,
.mtgpath-single-deck li,
.mtgpath-single-deck span,
.mtgpath-single-deck label,
.mtgpath-single-deck .mtgpath-analysis-header,
.mtgpath-single-deck .mtgpath-analysis-date {
    color: var(--mtgpath-text) !important;
}

.mtgpath-single-deck .mtgpath-deck-header,
.mtgpath-single-deck .mtgpath-deck-header h1,
.mtgpath-single-deck .mtgpath-deck-header .mtgpath-deck-meta,
.mtgpath-single-deck .mtgpath-deck-stat,
.mtgpath-single-deck .mtgpath-deck-tag {
    color: var(--mtgpath-text-light) !important;
}

/* ================================
   Buttons
   ================================ */
.mtgpath-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-family: 'Urbanist', sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-decoration: none;
    border: none;
    border-radius: var(--mtgpath-radius);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mtgpath-btn-primary {
    background: var(--mtgpath-cta);
    color: var(--mtgpath-secondary);
    box-shadow: var(--mtgpath-shadow-sm);
}

.mtgpath-btn-primary:hover {
    filter: brightness(0.96);
    transform: translateY(-1px);
    box-shadow: var(--mtgpath-shadow);
}

.mtgpath-btn-secondary {
    background: rgba(42, 0, 24, 0.08);
    color: var(--mtgpath-text);
    border: 1px solid var(--mtgpath-border);
}

.mtgpath-btn-secondary:hover {
    background: rgba(42, 0, 24, 0.14);
}

.mtgpath-btn-danger {
    background: var(--mtgpath-danger);
    color: #fff;
}

.mtgpath-btn-danger:hover {
    filter: brightness(0.9);
}

.mtgpath-btn-small {
    padding: 8px 16px;
    font-size: 12px;
}

.mtgpath-btn-large {
    padding: 16px 32px;
    font-size: 16px;
}

.mtgpath-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ================================
   Forms
   ================================ */
.mtgpath-form {
    max-width: 800px;
    margin: 0 auto;
}

.mtgpath-form-group {
    margin-bottom: 24px;
}

.mtgpath-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
}

.mtgpath-required {
    color: var(--mtgpath-danger);
}

.mtgpath-optional {
    color: var(--mtgpath-text-light);
    font-weight: 400;
    font-size: 12px;
}

.mtgpath-input,
.mtgpath-select,
.mtgpath-textarea {
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 16px;
    border: 1px solid var(--mtgpath-border);
    border-radius: var(--mtgpath-radius);
    background: var(--mtgpath-card-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.mtgpath-input:focus,
.mtgpath-select:focus,
.mtgpath-textarea:focus {
    outline: none;
    border-color: var(--mtgpath-cta);
    box-shadow: var(--mtgpath-focus-ring);
}

.mtgpath-textarea {
    resize: vertical;
    min-height: 200px;
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 14px;
    line-height: 1.5;
}

.mtgpath-help-text {
    margin-top: 8px;
    font-size: 13px;
    color: var(--mtgpath-text-light);
}

/* Format Help Toggle */
.mtgpath-format-help {
    margin-top: 12px;
}

.mtgpath-help-toggle {
    background: none;
    border: none;
    color: var(--mtgpath-primary);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mtgpath-help-toggle:hover {
    text-decoration: underline;
}

.mtgpath-help-content {
    margin-top: 12px;
    padding: 16px;
    background: var(--mtgpath-bg);
    border-radius: var(--mtgpath-radius);
}

.mtgpath-help-content h4 {
    margin: 16px 0 8px;
    font-size: 14px;
}

.mtgpath-help-content h4:first-child {
    margin-top: 0;
}

.mtgpath-help-content pre {
    background: var(--mtgpath-void);
    color: var(--mtgpath-glint);
    padding: 12px;
    border-radius: var(--mtgpath-radius-sm);
    overflow-x: auto;
    font-size: 12px;
}

.mtgpath-note {
    font-style: italic;
    color: var(--mtgpath-text-light);
}

/* Form Actions */
.mtgpath-form-actions {
    margin-top: 32px;
    text-align: center;
}

/* Loading Spinner */
.mtgpath-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mtgpath-spin 0.8s linear infinite;
}

@keyframes mtgpath-spin {
    to { transform: rotate(360deg); }
}

/* Login Notice */
.mtgpath-login-notice {
    background: var(--mtgpath-bg);
    border-left: 4px solid var(--mtgpath-primary);
    padding: 16px 20px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.mtgpath-login-notice p {
    margin: 0;
    flex: 1;
}

/* ================================
   Results
   ================================ */
.mtgpath-results {
    margin-top: 40px;
}

.mtgpath-analysis-results {
    background: #fff;
    border-radius: var(--mtgpath-radius);
    box-shadow: var(--mtgpath-shadow);
    overflow: hidden;
}

.mtgpath-results-header {
    background: var(--mtgpath-void);
    color: #fff;
    padding: 24px;
}

.mtgpath-results-header h2 {
    margin: 0 0 8px;
    font-family: 'Familjen Grotesk', sans-serif;
}

.mtgpath-results-time {
    margin: 0;
    opacity: 0.7;
    font-size: 14px;
}

.mtgpath-section {
    padding: 24px;
    border-bottom: 1px solid var(--mtgpath-border);
}

.mtgpath-section:last-child {
    border-bottom: none;
}

.mtgpath-section h3 {
    margin: 0 0 16px;
    font-family: 'Syne', sans-serif;
    font-size: 18px;
}

.mtgpath-section-desc {
    margin: 0 0 16px;
    color: var(--mtgpath-text-light);
}

/* Mana Curve Chart */
.mtgpath-curve-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 120px;
    padding: 16px 0;
}

.mtgpath-curve-bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.mtgpath-curve-bar .mtgpath-bar-fill {
    width: 100%;
    background: linear-gradient(180deg, var(--mtgpath-primary), var(--mtgpath-primary-hover));
    border-radius: var(--mtgpath-radius-sm) var(--mtgpath-radius-sm) 0 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: 4px;
    transition: height 0.3s ease;
}

.mtgpath-bar-value {
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 4px;
}

.mtgpath-bar-label {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mtgpath-text-light);
}

/* Card Types Grid */
.mtgpath-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
}

.mtgpath-type-item {
    text-align: center;
    padding: 12px;
    background: var(--mtgpath-bg);
    border-radius: var(--mtgpath-radius-sm);
}

.mtgpath-type-count {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--mtgpath-primary);
}

.mtgpath-type-name {
    font-size: 12px;
    color: var(--mtgpath-text-light);
}

/* Synergies */
.mtgpath-synergy-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mtgpath-synergy-item {
    padding: 16px;
    background: var(--mtgpath-bg);
    border-radius: var(--mtgpath-radius);
    border-left: 4px solid var(--mtgpath-primary);
}

.mtgpath-synergy-item.mtgpath-priority-high {
    border-left-color: var(--mtgpath-warning);
    background: rgba(176, 206, 0, 0.1);
}

.mtgpath-synergy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.mtgpath-synergy-header h4 {
    margin: 0;
    font-size: 16px;
}

.mtgpath-synergy-count {
    font-size: 13px;
    color: var(--mtgpath-text-light);
}

.mtgpath-synergy-desc {
    margin: 0 0 12px;
    font-size: 14px;
    color: var(--mtgpath-text-light);
}

.mtgpath-synergy-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mtgpath-card-tag {
    display: inline-block;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid var(--mtgpath-border);
    border-radius: 12px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.mtgpath-card-tag:hover {
    border-color: var(--mtgpath-primary);
    color: var(--mtgpath-primary);
}

.mtgpath-card-missing {
    background: rgba(158, 28, 73, 0.1);
    border-color: var(--mtgpath-danger);
    color: var(--mtgpath-danger);
}

.mtgpath-more-cards {
    font-size: 12px;
    color: var(--mtgpath-text-light);
    padding: 4px 0;
}

/* Suggestions Grid */
.mtgpath-suggestion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.mtgpath-suggestion-card {
    background: var(--mtgpath-bg);
    border-radius: var(--mtgpath-radius);
    padding: 16px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.mtgpath-suggestion-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--mtgpath-shadow);
}

.mtgpath-suggestion-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.mtgpath-suggestion-name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.mtgpath-suggestion-category {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.mtgpath-cat-synergy {
    background: var(--mtgpath-primary);
    color: #fff;
}

.mtgpath-cat-weakness {
    background: var(--mtgpath-warning);
    color: var(--mtgpath-void);
}

.mtgpath-cat-upgrade {
    background: var(--mtgpath-secondary);
    color: #fff;
}

.mtgpath-suggestion-reason {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--mtgpath-text-light);
}

.mtgpath-suggestion-actions {
    display: flex;
    gap: 8px;
}

/* Weaknesses */
.mtgpath-weakness-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mtgpath-weakness-item {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--mtgpath-bg);
    border-radius: var(--mtgpath-radius);
}

.mtgpath-weakness-item.mtgpath-severity-high {
    background: rgba(158, 28, 73, 0.1);
}

.mtgpath-weakness-icon {
    font-size: 20px;
}

.mtgpath-weakness-message {
    margin: 0 0 4px;
    font-weight: 500;
}

.mtgpath-weakness-suggestion {
    margin: 0;
    font-size: 13px;
    color: var(--mtgpath-text-light);
}

/* Compliance */
.mtgpath-compliance-valid {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(0, 168, 136, 0.1);
    border-radius: var(--mtgpath-radius);
    color: var(--mtgpath-success);
    font-weight: 600;
}

.mtgpath-compliance-icon {
    font-size: 24px;
}

.mtgpath-compliance-invalid ul {
    margin: 0;
    padding-left: 20px;
}

.mtgpath-compliance-invalid li {
    color: var(--mtgpath-danger);
    margin-bottom: 4px;
}

/* ================================
   Dashboard
   ================================ */
.mtgpath-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.mtgpath-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.mtgpath-dashboard-header h1 {
    margin: 0;
    font-family: 'Familjen Grotesk', sans-serif;
}

.mtgpath-dashboard-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.mtgpath-stat-box {
    background: #fff;
    padding: 20px 24px;
    border-radius: var(--mtgpath-radius);
    box-shadow: var(--mtgpath-shadow);
    text-align: center;
}

.mtgpath-stat-box .mtgpath-stat-number {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: var(--mtgpath-primary);
}

.mtgpath-stat-box .mtgpath-stat-label {
    font-size: 13px;
    color: var(--mtgpath-text-light);
}

/* Tabs */
.mtgpath-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--mtgpath-border);
}

.mtgpath-tab {
    padding: 12px 20px;
    font-weight: 600;
    color: var(--mtgpath-text-light);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.mtgpath-tab:hover {
    color: var(--mtgpath-text);
}

.mtgpath-tab.active {
    color: var(--mtgpath-primary);
    border-bottom-color: var(--mtgpath-primary);
}

/* Deck Grid */
.mtgpath-decklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.mtgpath-deck-card {
    background: #fff;
    border-radius: var(--mtgpath-radius);
    box-shadow: var(--mtgpath-shadow);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.mtgpath-deck-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--mtgpath-shadow-lg);
}

.mtgpath-deck-card-header {
    padding: 12px 16px;
    background: var(--mtgpath-bg);
}

.mtgpath-deck-card-body {
    padding: 16px;
}

.mtgpath-deck-name {
    margin: 0 0 8px;
    font-size: 18px;
}

.mtgpath-deck-name a {
    color: var(--mtgpath-text);
    text-decoration: none;
}

.mtgpath-deck-name a:hover {
    color: var(--mtgpath-primary);
}

.mtgpath-deck-meta {
    font-size: 13px;
    color: var(--mtgpath-text-light);
    margin-bottom: 12px;
}

.mtgpath-deck-separator {
    margin: 0 8px;
}

.mtgpath-deck-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mtgpath-keyword-tag {
    display: inline-block;
    padding: 3px 8px;
    background: var(--mtgpath-bg);
    border-radius: 10px;
    font-size: 11px;
    color: var(--mtgpath-text-light);
}

.mtgpath-deck-card-footer {
    padding: 12px 16px;
    background: var(--mtgpath-bg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mtgpath-deck-date {
    font-size: 12px;
    color: var(--mtgpath-text-light);
}

/* Format Badges */
.mtgpath-format-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mtgpath-format-commander {
    background: var(--mtgpath-secondary);
    color: #fff;
}

.mtgpath-format-standard {
    background: var(--mtgpath-primary);
    color: #fff;
}

.mtgpath-format-modern {
    background: var(--mtgpath-warning);
    color: var(--mtgpath-void);
}

/* Empty State */
.mtgpath-no-decks {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border-radius: var(--mtgpath-radius);
    box-shadow: var(--mtgpath-shadow);
}

.mtgpath-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

.mtgpath-no-decks h3 {
    margin: 0 0 8px;
}

.mtgpath-no-decks p {
    margin: 0 0 24px;
    color: var(--mtgpath-text-light);
}

/* ================================
   Single Deck View
   ================================ */
.mtgpath-single-deck {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.mtgpath-deck-header {
    margin-bottom: 32px;
}

.mtgpath-deck-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.mtgpath-deck-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mtgpath-deck-title h1 {
    margin: 0;
    font-family: 'Familjen Grotesk', sans-serif;
}

.mtgpath-deck-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mtgpath-deck-meta-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.mtgpath-deck-stat {
    font-size: 14px;
    color: var(--mtgpath-text-light);
}

.mtgpath-deck-stat strong {
    color: var(--mtgpath-text);
}

/* Two Column Layout */
.mtgpath-deck-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

@media (max-width: 1024px) {
    .mtgpath-deck-content {
        grid-template-columns: 1fr;
    }
}

.mtgpath-deck-column {
    background: #fff;
    border-radius: var(--mtgpath-radius);
    box-shadow: var(--mtgpath-shadow);
    padding: 24px;
}

.mtgpath-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mtgpath-border);
}

.mtgpath-section-header h2 {
    margin: 0;
    font-size: 18px;
}

/* Decklist Table */
.mtgpath-decklist-table {
    font-size: 14px;
}

.mtgpath-card-group {
    margin-bottom: 20px;
}

.mtgpath-card-group:last-child {
    margin-bottom: 0;
}

.mtgpath-group-header {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mtgpath-text-light);
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--mtgpath-border);
}

.mtgpath-group-count {
    font-weight: 400;
}

.mtgpath-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mtgpath-card-row {
    display: flex;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--mtgpath-bg);
}

.mtgpath-card-row:last-child {
    border-bottom: none;
}

.mtgpath-card-qty {
    width: 24px;
    font-weight: 600;
    color: var(--mtgpath-primary);
}

.mtgpath-card-name {
    flex: 1;
}

.mtgpath-card-name.mtgpath-hoverable {
    cursor: pointer;
}

.mtgpath-card-name.mtgpath-hoverable:hover {
    color: var(--mtgpath-primary);
}

.mtgpath-card-mana {
    font-size: 12px;
    color: var(--mtgpath-text-light);
    margin-left: 8px;
}

/* Mana symbol chips (deck view). Asset-free representation of mana costs. */
.mtgpath-mana {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    margin-right: 4px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    border: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
    user-select: none;
}

.mtgpath-mana-num { background: #f3f3f3; color: #111; }
.mtgpath-mana-w { background: #fff6d6; color: #111; }
.mtgpath-mana-u { background: #d8ebff; color: #111; }
.mtgpath-mana-b { background: #e6e6e6; color: #111; }
.mtgpath-mana-r { background: #ffd6d6; color: #111; }
.mtgpath-mana-g { background: #d9ffd9; color: #111; }
.mtgpath-mana-c { background: #f0f0ff; color: #111; }

.mtgpath-mana-x { background: #f3f3f3; color: #111; }
.mtgpath-mana-y { background: #f3f3f3; color: #111; }
.mtgpath-mana-z { background: #f3f3f3; color: #111; }

.mtgpath-remove-card {
    background: none;
    border: none;
    color: var(--mtgpath-text-light);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.2s, color 0.2s;
}

.mtgpath-card-row:hover .mtgpath-remove-card {
    opacity: 1;
}

.mtgpath-remove-card:hover {
    color: var(--mtgpath-danger);
}

/* Versions */
.mtgpath-versions {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--mtgpath-border);
}

.mtgpath-versions h3 {
    font-size: 14px;
    margin: 0 0 12px;
}

.mtgpath-version-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mtgpath-version-item {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--mtgpath-bg);
}

.mtgpath-version-number {
    font-weight: 600;
    color: var(--mtgpath-primary);
}

.mtgpath-version-date {
    color: var(--mtgpath-text-light);
}

.mtgpath-version-changes {
    color: var(--mtgpath-text-light);
    font-style: italic;
}

/* ================================
   Modals
   ================================ */
.mtgpath-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mtgpath-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 10, 11, 0.7);
}

.mtgpath-modal-content {
    position: relative;
    background: #fff;
    border-radius: var(--mtgpath-radius);
    box-shadow: var(--mtgpath-shadow-lg);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
}

.mtgpath-modal-small {
    max-width: 400px;
}

.mtgpath-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--mtgpath-text-light);
    line-height: 1;
}

.mtgpath-modal-close:hover {
    color: var(--mtgpath-text);
}

.mtgpath-modal-content h2 {
    margin: 0 0 20px;
}

.mtgpath-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
}

/* Export Options */
.mtgpath-export-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.mtgpath-export-options label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.mtgpath-export-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

/* Card Preview Modal */
.mtgpath-card-preview {
    display: flex;
    gap: 20px;
}

.mtgpath-card-image {
    width: 250px;
    border-radius: 12px;
}

.mtgpath-card-details {
    flex: 1;
}

.mtgpath-card-details h3 {
    margin: 0 0 8px;
}

.mtgpath-card-type {
    color: var(--mtgpath-text-light);
    margin: 0 0 12px;
}

.mtgpath-card-text {
    font-size: 14px;
    line-height: 1.5;
}

.mtgpath-card-price {
    margin-top: 12px;
    font-weight: 600;
    color: var(--mtgpath-primary);
}

/* ================================
   Responsive
   ================================ */
@media (max-width: 768px) {
    .mtgpath-dashboard-header,
    .mtgpath-deck-title-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .mtgpath-deck-actions {
        width: 100%;
    }
    
    .mtgpath-deck-actions .mtgpath-btn {
        flex: 1;
    }
    
    .mtgpath-dashboard-stats {
        flex-direction: column;
    }
    
    .mtgpath-decklist-grid {
        grid-template-columns: 1fr;
    }
    
    .mtgpath-suggestion-grid {
        grid-template-columns: 1fr;
    }
    
    .mtgpath-card-preview {
        flex-direction: column;
    }
    
    .mtgpath-card-image {
        width: 100%;
        max-width: 250px;
        margin: 0 auto;
    }
}


#mtgpath-loading {
    text-align: center;
    margin: 2rem 0;
}

.mtgpath-spinner {
    width: 48px;
    height: 48px;
    border: 5px solid #e5e7eb;
    border-top: 5px solid var(--mtgpath-primary);
    border-radius: 50%;
    animation: mtgpath-spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes mtgpath-spin {
    to {
        transform: rotate(360deg);
    }
}

.mtgpath-btn {
    width: 100%;
    padding: 14px;
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    cursor: pointer;
}

.mtgpath-btn:hover {
    background: #4338ca;
}

.mtgpath-decklist {
    list-style: none;
    padding: 0;
}

.mtgpath-decklist li {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}

.mtgpath-error {
    color: #dc2626;
    font-weight: 600;
}


/* ================================
   Deck Editor (inline)
   ================================ */
.mtgpath-editor {
    margin-top: 18px;
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 12px;
    background: rgba(0,0,0,0.18);
}

.mtgpath-editor-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.mtgpath-editor-title {
    margin: 0;
    font-size: 18px;
}

.mtgpath-editor-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

.mtgpath-btn-secondary {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
}

.mtgpath-editor-add {
    display: grid;
    grid-template-columns: 1fr 90px 110px;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.mtgpath-editor-add input[type="text"],
.mtgpath-editor-add input[type="number"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.25);
    color: var(--mtgpath-seraph);
}

.mtgpath-hint {
    grid-column: 1 / -1;
    font-size: 12px;
    opacity: 0.75;
}

.mtgpath-editor-head {
    display: grid;
    grid-template-columns: 90px 1fr 48px;
    gap: 10px;
    padding: 8px 6px;
    font-size: 12px;
    opacity: 0.75;
}

.mtgpath-row {
    display: grid;
    grid-template-columns: 90px 1fr 48px;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
}

.mtgpath-row input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.25);
    color: var(--mtgpath-seraph);
}

.mtgpath-remove {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.25);
    color: var(--mtgpath-seraph);
    cursor: pointer;
}

.mtgpath-remove:hover {
    border-color: rgba(255,255,255,0.28);
}

.mtgpath-empty {
    padding: 12px 0;
    opacity: 0.75;
}

.mtgpath-editor-status {
    margin-top: 10px;
    font-size: 13px;
    opacity: 0.9;
}

.mtgpath-editor-status.ok { color: var(--mtgpath-mana-surge); }
.mtgpath-editor-status.warn { color: #ffcf66; }
.mtgpath-editor-status.error { color: #ff6b6b; }

@media (max-width: 720px) {
    .mtgpath-editor-add {
        grid-template-columns: 1fr 80px;
        grid-template-rows: auto auto;
    }
    #mtgpath-add-card-btn {
        grid-column: 1 / -1;
    }
    .mtgpath-row,
    .mtgpath-editor-head {
        grid-template-columns: 80px 1fr 44px;
    }
}


/* ================================
   Deck Editor Enhancements (v1.3)
   ================================ */
.mtgpath-editor-meta{
    display:flex;
    flex-direction:column;
    gap:2px;
}
.mtgpath-editor-count{
    font-size:13px;
    opacity:0.9;
}
.mtgpath-pill{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    border:1px solid rgba(255,255,255,0.18);
    background: rgba(0,0,0,0.25);
    color: var(--mtgpath-seraph);
}
.mtgpath-pill.ok{ border-color: rgba(0,200,167,0.45); }
.mtgpath-pill.warn{ border-color: rgba(176,206,0,0.55); }
.mtgpath-pill.error{ border-color: rgba(220,38,38,0.55); }

.mtgpath-editor-add{
    position: relative;
    grid-template-columns: 80px 1fr 120px;
    grid-template-rows: auto auto;
}
.mtgpath-editor-add .mtgpath-hint{
    grid-column: 1 / -1;
}

.mtgpath-editor-head,
.mtgpath-row{
    grid-template-columns: 80px 1fr 44px;
}

@media (max-width: 720px) {
    .mtgpath-editor-add{
    position: relative;
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto auto;
    }
    #mtgpath-add-card-btn{
        grid-column: 1 / -1;
    }
}


/* Autocomplete dropdown */
.mtgpath-ac-wrap{
    position: relative;
    flex: 1;
    min-width: 220px;
}

.mtgpath-autocomplete{
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    width: 100%;
    max-height: 280px;
    overflow: auto;
    margin-top: 6px;
    padding: 6px;
}
.mtgpath-ac-item{
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.mtgpath-ac-item:hover{
    background: rgba(0,0,0,0.05);
}
.mtgpath-ac-thumb{
    width: 38px;
    height: 52px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.08);
}
.mtgpath-ac-name{
    font-weight: 600;
    font-size: 14px;
}

/* Card hover tooltip */
.mtgpath-card-tooltip{
    position: fixed;
    z-index: 10000;
    pointer-events: none;
}
.mtgpath-card-tooltip img{
    width: 160px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.28);
    border: 1px solid rgba(0,0,0,0.12);
}

/* AI interactive lines */
.mtgpath-ai-line{
    display:flex;
    align-items:center;
    gap:10px;
    margin: 6px 0;
}
.mtgpath-ai-add{
    border: 1px solid rgba(0,0,0,0.18);
    background: #fff;
    border-radius: 999px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
}
.mtgpath-ai-add:hover{
    background: rgba(0,0,0,0.05);
}



/* ================================
   Stripe-like Analyzer UI
   ================================ */
.mtgpath-shell {
    background: var(--mtgpath-page-bg);
    padding: 20px 14px;
    border-radius: var(--mtgpath-radius-lg);
}

.mtgpath-panel {
    background: var(--mtgpath-card-bg);
    border: 1px solid var(--mtgpath-border);
    border-radius: var(--mtgpath-radius-lg);
    box-shadow: var(--mtgpath-shadow-sm);
    padding: 18px;
}

.mtgpath-panel + .mtgpath-panel {
    margin-top: 16px;
}

.mtgpath-panel-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--mtgpath-secondary);
    margin: 0 0 14px 0;
}

.mtgpath-field label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--mtgpath-secondary);
    margin-bottom: 8px;
}

.mtgpath-field input[type="text"],
.mtgpath-field input[type="email"],
.mtgpath-field input[type="password"],
.mtgpath-field input[type="number"],
.mtgpath-field select,
.mtgpath-field textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    border: 1px solid var(--mtgpath-border);
    border-radius: var(--mtgpath-radius);
    background: var(--mtgpath-card-bg);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.mtgpath-field textarea {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 13px;
    line-height: 1.5;
}

.mtgpath-field input:focus,
.mtgpath-field select:focus,
.mtgpath-field textarea:focus {
    outline: none;
    border-color: var(--mtgpath-cta);
    box-shadow: var(--mtgpath-focus-ring);
}

.mtgpath-field {
    margin-bottom: 16px;
}

#mtgpath-analyze-form .mtgpath-btn {
    border-radius: var(--mtgpath-radius);
}

#mtgpath-analyze-form .mtgpath-btn.mtgpath-btn-primary {
    width: 100%;
}

.mtgpath-results .mtgpath-deck-output,
.mtgpath-results .mtgpath-ai-suggestions {
    background: var(--mtgpath-card-bg);
    border: 1px solid var(--mtgpath-border);
    border-radius: var(--mtgpath-radius-lg);
    box-shadow: var(--mtgpath-shadow-sm);
    padding: 16px;
    margin-top: 16px;
}

/* Autocomplete: anchored below the input */
.mtgpath-ac-wrap {
    position: relative;
    flex: 1 1 auto;
}

.mtgpath-autocomplete {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    z-index: 9999;
    background: var(--mtgpath-card-bg);
    border: 1px solid var(--mtgpath-border-strong);
    border-radius: var(--mtgpath-radius);
    box-shadow: var(--mtgpath-shadow);
    max-height: 320px;
    overflow: auto;
}

/* Make items roomy & clickable */
.mtgpath-autocomplete-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
}

.mtgpath-autocomplete-item:hover {
    background: rgba(176, 206, 0, 0.10);
}

/* Editor polish */
.mtgpath-editor {
    background: var(--mtgpath-card-bg);
    border: 1px solid var(--mtgpath-border);
    border-radius: var(--mtgpath-radius-lg);
    box-shadow: var(--mtgpath-shadow-sm);
    padding: 16px;
    margin-top: 16px;
}

.mtgpath-editor-toolbar {
    border-bottom: 1px solid var(--mtgpath-border);
    padding-bottom: 12px;
    margin-bottom: 14px;
}

.mtgpath-pill {
    background: rgba(84, 0, 48, 0.08);
    color: var(--mtgpath-primary);
    border: 1px solid rgba(84, 0, 48, 0.18);
    border-radius: 999px;
    padding: 6px 10px;
    font-weight: 800;
    font-size: 12px;
}

.mtgpath-card-tooltip {
    border: 1px solid var(--mtgpath-border-strong);
    border-radius: var(--mtgpath-radius-lg);
    box-shadow: var(--mtgpath-shadow);
    overflow: hidden;
}


/* Mana SVG icons */
.mtgpath-mana-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-left:6px;vertical-align:middle;background:none;border:none;padding:0;min-width:0;box-shadow:none;}
.mtgpath-mana-icon svg{width:100%;height:100%;display:block;}
.mtgpath-mana-icon img{width:100%;height:100%;display:block;}

/* --- PRO signup / checkout form --- */
.mtgpath-pro-signup{max-width:820px;margin:0 auto;}
.mtgpath-pro-signup .mtgpath-form-group{margin-bottom:14px;}
.mtgpath-pro-signup label{display:block;font-weight:600;margin-bottom:6px;}
.mtgpath-pro-signup .mtgpath-input{width:100%;box-sizing:border-box;padding:12px 14px;border:1px solid #d0d5dd;border-radius:12px;outline:none;}
.mtgpath-pro-signup .mtgpath-input:focus{border-color:#6b7280;}
.mtgpath-pro-signup .mtgpath-pro-error{margin-top:12px;font-weight:600;}

.mtgpath-pro-status-card {
  border: 1px solid #d0d7de;
  border-radius: 16px;
  padding: 18px 20px;
  margin: 0 0 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
.mtgpath-pro-status-success { border-color: #86efac; background: #f0fdf4; }
.mtgpath-pro-status-cancel { border-color: #fed7aa; background: #fff7ed; }

.mtgpath-account-panel .mtgpath-btn{min-width:180px;text-align:center}
.mtgpath-pro-manage,.mtgpath-pro-upgrade{margin:0}


.mtgpath-dashboard-subscription{margin:16px 0 24px;}
.mtgpath-billing-card{padding:18px;border:1px solid #e5e7eb;border-radius:16px;background:#fff;}
.mtgpath-billing-card__header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.mtgpath-billing-card__header h3{margin:0 0 4px;}
.mtgpath-billing-card__sub{margin:0;color:var(--mtgpath-text-light);}
.mtgpath-billing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px;}
.mtgpath-billing-item{padding:12px;border:1px solid var(--mtgpath-border);border-radius:12px;background:#fafafa;}
.mtgpath-billing-label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mtgpath-text-light);margin-bottom:4px;}
.mtgpath-billing-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px;}
.mtgpath-billing-note,.mtgpath-billing-disclaimer{margin:10px 0 0;color:var(--mtgpath-text-light);font-size:13px;}
.mtgpath-status-pill{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;background:#eef2ff;color:#374151;}
.mtgpath-status-active,.mtgpath-status-trialing{background:#dcfce7;color:#166534;}
.mtgpath-status-inactive,.mtgpath-status-canceled,.mtgpath-status-cancelled{background:#f3f4f6;color:#4b5563;}
.mtgpath-status-past_due,.mtgpath-status-unpaid{background:#fee2e2;color:#991b1b;}