/*
Theme Name: CricHunter
Theme URI: https://rahulmourya.in/
Author: Rahul Mourya
Author URI: https://rahulmourya.in/
Description: Don't try to copy the theme, otherwise, I'll take the action against you.
Version: 2.0
*/
/* ============================================
   MONI MASTER STYLE.CSS
   Universal CSS for all templates - Simple & Fast
   One CSS for ALL templates - Do not modify
   ============================================ */

/* RESET & BASE */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* CSS Variables - Light theme only */
:root {
    --moni-bg-body: #f5f7fb;
    --moni-bg-card: #ffffff;
    --moni-bg-surface: #f8fafc;
    --moni-text-primary: #000000;
    --moni-text-secondary: #000000;
    --moni-text-muted: #000000;
    --moni-accent: #2c7da0;
    --moni-accent-dark: #1f5e7a;
    --moni-accent-soft: #e6f3f8;
    --moni-success: #2e7d64;
    --moni-danger: #c44536;
    --moni-warning: #e6a017;
    --moni-border: #e2e8f0;
    --moni-border-dark: #cbd5e1;
    --moni-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --moni-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --moni-radius: 16px;
    --moni-radius-sm: 12px;
    --moni-radius-md: 8px;
}

/* MAIN CONTAINER */
.moni-container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

/* HEADER SECTION */
.moni-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 10px 0;
}

.moni-header h1 {
    font-size: clamp(22px, 5vw, 44px);
    font-weight: 600;
    background: linear-gradient(135deg, #2c7da0, #5a6e7c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.moni-header p {
    color: var(--moni-text-muted);
    font-size: 16px;
}

.moni-badge {
    display: inline-block;
    background: var(--moni-accent-soft);
    padding: 6px 16px;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 500;
    color: var(--moni-accent);
    margin-top: 12px;
}

/* GRID LAYOUT */
.moni-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 40px;
}

@media (min-width: 992px) {
    .moni-grid {
        grid-template-columns: 1fr 1.2fr;
    }
}

/* CARDS */
.moni-card {
    background: var(--moni-bg-card);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius);
    padding: 28px;
    box-shadow: var(--moni-shadow-sm);
    transition: all 0.2s ease;
}

.moni-card:hover {
    box-shadow: var(--moni-shadow);
}

.moni-card-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--moni-text-primary);
}

.moni-card-title i {
    color: var(--moni-accent);
    font-size: 26px;
}

/* FORM INPUTS */
.moni-input-group {
    margin-bottom: 20px;
}

.moni-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--moni-text-secondary);
    margin-bottom: 8px;
}

.moni-label i {
    color: var(--moni-accent);
    width: 20px;
}

.moni-input {
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 16px;
    border: 2px solid var(--moni-border);
    background: var(--moni-bg-surface);
    color: var(--moni-text-primary);
    border-radius: var(--moni-radius-md);
    transition: all 0.2s;
}

.moni-input:focus {
    outline: none;
    border-color: var(--moni-accent);
    box-shadow: 0 0 0 3px rgba(44, 125, 160, 0.1);
}

.moni-input:hover {
    border-color: var(--moni-accent);
}

select.moni-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232c7da0' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

/* INFO NOTE */
.moni-info-note {
    background: var(--moni-accent-soft);
    border-left: 4px solid var(--moni-accent);
    padding: 14px 18px;
    border-radius: var(--moni-radius-md);
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--moni-text-secondary);
}

.moni-info-note i {
    color: var(--moni-accent);
    font-size: 18px;
}

/* BUTTON */
.moni-btn {
    width: 100%;
    background: var(--moni-accent);
    border: none;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--moni-radius-md);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 8px;
}

.moni-btn:hover {
    background: var(--moni-accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(44, 125, 160, 0.25);
}

/* STATS GRID */
.moni-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.moni-stat-card {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 20px 12px;
    text-align: center;
}

.moni-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--moni-text-muted);
    margin-bottom: 8px;
    font-weight: 500;
}

.moni-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--moni-text-primary);
}

.moni-stat-value.tax {
    color: var(--moni-danger);
}

.moni-stat-value.net {
    color: var(--moni-success);
}

.moni-stat-value.rate {
    color: var(--moni-accent);
}

/* BREAKDOWN SECTION */
.moni-breakdown {
    margin: 24px 0;
}

.moni-break-title {
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--moni-text-primary);
}

.moni-break-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--moni-border);
    font-size: 14px;
}

.moni-break-row:last-child {
    border-bottom: none;
}

.moni-break-row.total {
    background: var(--moni-accent-soft);
    font-weight: 700;
    border-radius: var(--moni-radius-md);
    margin-top: 8px;
}

/* BRACKET LIST */
.moni-bracket-list {
    margin-top: 8px;
}

.moni-bracket-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    margin-bottom: 8px;
}

.moni-bracket-range {
    color: var(--moni-text-secondary);
    font-size: 13px;
}

.moni-bracket-rate {
    font-weight: 700;
    color: var(--moni-accent);
}

/* MONTHLY GRID */
.moni-monthly {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
}

.moni-month-card {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 14px;
    text-align: center;
}

.moni-month-label {
    font-size: 11px;
    color: var(--moni-text-muted);
    margin-bottom: 6px;
}

.moni-month-value {
    font-size: 20px;
    font-weight: 800;
}

/* FEATURE CARDS */
.moni-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin: 40px 0;
}

.moni-feature {
    background: var(--moni-bg-card);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius);
    padding: 28px 20px;
    text-align: center;
    transition: all 0.2s;
}

.moni-feature:hover {
    transform: translateY(-4px);
    box-shadow: var(--moni-shadow);
}

.moni-feature-icon {
    background: var(--moni-accent-soft);
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 60px;
    margin: 0 auto 16px;
    color: var(--moni-accent);
    font-size: 28px;
}

.moni-feature-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--moni-text-primary);
}

.moni-feature-desc {
    color: var(--moni-text-muted);
    font-size: 14px;
    line-height: 1.5;
}

/* Additional styles for progress bar */
.moni-progress-section {
    margin: 24px 0;
}

.moni-progress-bar-container {
    background: var(--moni-border);
    border-radius: 30px;
    height: 30px;
    overflow: hidden;
    margin: 15px 0;
}

.moni-progress-bar {
    background: linear-gradient(90deg, var(--moni-accent), var(--moni-success));
    height: 100%;
    width: 0%;
    border-radius: 30px;
    transition: width 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.moni-progress-stats {
    margin-top: 10px;
    font-size: 14px;
    color: var(--moni-text-secondary);
}

.moni-break-row i {
    width: 24px;
    color: var(--moni-accent);
}

/* FAQ SECTION */
.moni-faq {
    background: var(--moni-bg-card);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius);
    padding: 32px;
    margin: 40px 0;
}

.moni-faq-title {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 32px;
    color: var(--moni-text-primary);
}

.moni-faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.moni-faq-item {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 20px;
}

.moni-faq-question {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--moni-text-primary);
}

.moni-faq-question i {
    color: var(--moni-accent);
    font-size: 18px;
}

.moni-faq-answer {
    color: var(--moni-text-muted);
    font-size: 14px;
    line-height: 1.6;
    margin-left: 28px;
}

/* SEO SECTION */
.moni-seo {
    background: var(--moni-bg-card);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius);
    padding: 32px;
    margin-top: 40px;
}

.moni-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.moni-tag {
    background: var(--moni-accent-soft);
    padding: 6px 16px;
    border-radius: 40px;
    font-size: 12px;
    color: var(--moni-accent);
    font-weight: 500;
}

.moni-seo h2 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--moni-text-primary);
}

.moni-seo p {
    color: var(--moni-text-muted);
    line-height: 1.7;
    margin-bottom: 12px;
}

/* UTILITY CLASSES */
.moni-hidden {
    display: none;
}

.moni-show {
    display: block;
    animation: moniFadeIn 0.4s ease;
}

@keyframes moniFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   MORTGAGE CALCULATOR SPECIFIC STYLES
   ============================================ */

/* Payment Type Selector */
.moni-payment-type {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.moni-payment-option {
    flex: 1;
    background: var(--moni-bg-surface);
    border: 2px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    min-width: 100px;
}

.moni-payment-option:hover {
    border-color: var(--moni-accent);
    background: var(--moni-accent-soft);
}

.moni-payment-option.active {
    background: var(--moni-accent);
    border-color: var(--moni-accent);
    color: white;
}

.moni-payment-option.active i {
    color: white;
}

.moni-payment-option i {
    font-size: 20px;
    color: var(--moni-accent);
    margin-bottom: 6px;
    display: block;
}

.moni-payment-option span {
    display: block;
    font-size: 12px;
    font-weight: 500;
}

/* Extra Summary */
.moni-extra-summary {
    background: var(--moni-accent-soft);
    border-radius: var(--moni-radius-sm);
    padding: 20px;
    text-align: center;
    margin: 20px 0;
}

.moni-extra-title {
    font-size: 13px;
    color: var(--moni-text-muted);
    margin-bottom: 8px;
}

.moni-extra-amount {
    font-size: 32px;
    font-weight: 700;
    color: var(--moni-accent);
}

.moni-extra-note {
    font-size: 12px;
    color: var(--moni-text-muted);
    margin-top: 5px;
}

/* Comparison Grid */
.moni-comparison-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 20px 0;
}

@media (min-width: 768px) {
    .moni-comparison-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.moni-comparison-card {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 20px;
}

.moni-comparison-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--moni-border);
}

.moni-comparison-header i {
    font-size: 22px;
    color: var(--moni-accent);
}

.moni-comparison-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--moni-text-primary);
}

.moni-comparison-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed var(--moni-border);
}

.moni-comparison-item:last-child {
    border-bottom: none;
}

.moni-comparison-label {
    color: var(--moni-text-muted);
    font-size: 13px;
}

.moni-comparison-value {
    font-weight: 600;
    color: var(--moni-text-primary);
}

.moni-comparison-value.highlight {
    color: var(--moni-success);
    font-weight: 700;
}

/* Chart Container */
.moni-chart-container {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 16px;
    margin-top: 16px;
}

/* Schedule Preview */
.moni-schedule-preview {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    overflow: hidden;
    margin-top: 16px;
    max-height: 350px;
    overflow-y: auto;
}

.moni-schedule-header {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background: var(--moni-accent);
    color: white;
    padding: 12px;
    font-weight: 600;
    font-size: 12px;
    position: sticky;
    top: 0;
}

.moni-schedule-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding: 10px 12px;
    border-bottom: 1px solid var(--moni-border);
    font-size: 12px;
}

/* Presets Grid */
.moni-presets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 640px) {
    .moni-presets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.moni-preset-btn {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: 60px;
    padding: 12px 8px;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    color: var(--moni-text-primary);
    transition: all 0.2s;
}

.moni-preset-btn:hover {
    background: var(--moni-accent);
    color: white;
    border-color: var(--moni-accent);
}

/* Responsive */
@media (max-width: 768px) {
    
    .moni-card {
        padding: 10px;
    }
    
    .moni-card-title {
        font-size: 20px;
    }
    
    .moni-stat-value {
        font-size: 22px;
    }
    
    .moni-faq {
        padding: 10px;
    }
    
    .moni-faq-title {
        font-size: 24px;
    }
    
    .moni-schedule-header,
    .moni-schedule-row {
        font-size: 10px;
        padding: 8px;
    }
}

@media (max-width: 480px) {
    .moni-stats {
        grid-template-columns: 1fr;
    }
    
    .moni-features {
        grid-template-columns: 1fr;
    }
    
    .moni-faq-grid {
        grid-template-columns: 1fr;
    }
    
    .moni-monthly {
        grid-template-columns: 1fr;
    }
    
    .moni-payment-type {
        flex-direction: column;
    }
    
    .moni-presets-grid {
        grid-template-columns: 1fr;
    }
}
/* Additional styles for countdown calculator */
.moni-countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin: 20px 0;
}

.moni-countdown-card {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 24px 12px;
    text-align: center;
}

.moni-countdown-value {
    font-size: 48px;
    font-weight: 800;
    color: var(--moni-accent);
    line-height: 1.2;
}

.moni-countdown-label {
    font-size: 12px;
    color: var(--moni-text-muted);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.moni-event-name {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--moni-accent);
    word-break: break-word;
}

.moni-target-info {
    text-align: center;
    margin-top: 20px;
    padding: 15px;
    background: var(--moni-bg-surface);
    border-radius: var(--moni-radius-sm);
    font-size: 14px;
    color: var(--moni-text-secondary);
}

.moni-status-message {
    text-align: center;
    margin-top: 15px;
    font-weight: 600;
    padding: 10px;
    border-radius: var(--moni-radius-md);
    background: var(--moni-accent-soft);
    color: var(--moni-accent);
}

@media (max-width: 768px) {
    .moni-countdown-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .moni-countdown-value {
        font-size: 36px;
    }
    
    .moni-countdown-card {
        padding: 16px 8px;
    }
}

@media (max-width: 480px) {
    .moni-countdown-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .moni-countdown-value {
        font-size: 28px;
    }
    
    .moni-event-name {
        font-size: 20px;
    }
}
.moni-schedule-table-container {
    overflow-x: auto;
    margin-top: 10px;
}

.moni-schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.moni-schedule-table th {
    background: var(--moni-accent);
    color: white;
    padding: 12px 8px;
    text-align: right;
    font-weight: 600;
    position: sticky;
    top: 0;
}

.moni-schedule-table td {
    padding: 10px 8px;
    text-align: right;
    border-bottom: 1px solid var(--moni-border);
    color: var(--moni-text-primary);
}

.moni-schedule-table th:first-child,
.moni-schedule-table td:first-child {
    text-align: center;
}

.moni-schedule-table tr:hover {
    background: var(--moni-accent-soft);
}

.moni-small-btn {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: var(--moni-text-primary);
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.moni-small-btn:hover {
    background: var(--moni-accent);
    color: white;
    border-color: var(--moni-accent);
}

.moni-icon-btn {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--moni-text-primary);
    transition: all 0.2s;
}

.moni-icon-btn:hover:not(:disabled) {
    background: var(--moni-accent);
    color: white;
    border-color: var(--moni-accent);
}

.moni-icon-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.moni-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .moni-schedule-table {
        font-size: 11px;
    }
    
    .moni-schedule-table th,
    .moni-schedule-table td {
        padding: 6px 4px;
    }
    
    .moni-small-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
}
.moni-age-display {
    text-align: center;
    padding: 30px;
    background: var(--moni-accent-soft);
    border-radius: var(--moni-radius);
    margin-bottom: 25px;
}

.moni-age-years {
    font-size: 64px;
    font-weight: 800;
    color: var(--moni-accent);
    line-height: 1;
}

.moni-age-label {
    font-size: 18px;
    color: var(--moni-text-muted);
    margin-top: 10px;
}

.moni-age-details {
    margin-top: 10px;
}

.moni-countdown {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin: 20px 0;
}

.moni-countdown-item {
    text-align: center;
    padding: 20px;
    background: var(--moni-bg-surface);
    border-radius: var(--moni-radius-sm);
    border: 1px solid var(--moni-border);
}

.moni-countdown-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--moni-accent);
}

.moni-countdown-label {
    font-size: 12px;
    color: var(--moni-text-muted);
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.moni-next-birthday {
    margin-top: 15px;
}

.moni-zodiac {
    text-align: center;
    padding: 20px;
    background: var(--moni-bg-surface);
    border-radius: var(--moni-radius-sm);
}

@media (max-width: 768px) {
    .moni-countdown {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .moni-age-years {
        font-size: 48px;
    }
}

@media (max-width: 480px) {
    .moni-countdown {
        grid-template-columns: 1fr;
    }
}
.moni-operation-type {
    display: flex;
    gap: 12px;
    margin: 20px 0;
    flex-wrap: wrap;
}

.moni-op-option {
    flex: 1;
    background: var(--moni-bg-surface);
    border: 2px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.moni-op-option:hover {
    border-color: var(--moni-accent);
    background: var(--moni-accent-soft);
}

.moni-op-option.active {
    background: var(--moni-accent);
    border-color: var(--moni-accent);
    color: white;
}

.moni-op-option.active i {
    color: white;
}

.moni-op-option i {
    font-size: 24px;
    color: var(--moni-accent);
    margin-bottom: 6px;
    display: block;
}

.moni-op-option span {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.moni-time-units {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 20px 0;
}

@media (min-width: 768px) {
    .moni-time-units {
        grid-template-columns: repeat(4, 1fr);
    }
}

.moni-unit-group {
    text-align: center;
}

.moni-unit-group .moni-label {
    justify-content: center;
    margin-bottom: 8px;
    font-size: 12px;
}

.moni-unit-input {
    text-align: center;
    padding: 10px;
}

.moni-result-display {
    background: var(--moni-accent-soft);
    border-radius: var(--moni-radius-sm);
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
}

.moni-result-label {
    font-size: 13px;
    color: var(--moni-text-muted);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.moni-result-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--moni-text-primary);
}

.moni-diff-details {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 16px;
}

.moni-diff-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
}

.moni-diff-item strong {
    color: var(--moni-accent);
    font-size: 16px;
}

.moni-breakdown-table {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    overflow: hidden;
}

@media (max-width: 768px) {
    .moni-time-units {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .moni-result-value {
        font-size: 18px;
    }
    
    .moni-diff-item {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
}

.moni-break-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--moni-text-secondary);
}

.moni-break-amount {
    font-weight: 600;
    color: var(--moni-text-primary);
}

.moni-break-amount.tax {
    color: var(--moni-danger);
}

.moni-break-amount.net {
    color: var(--moni-success);
}

.moni-stat-value.rate {
    color: var(--moni-accent);
    font-size: 22px;
}

#quickComparison {
    margin-top: 20px;
}

.moni-month-card {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 14px;
    text-align: center;
}
.moni-comparison-full-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.moni-comparison-card {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 20px;
    transition: all 0.2s;
}

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

.moni-comparison-card .moni-comparison-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--moni-border);
}

.moni-comparison-card .moni-comparison-header i {
    font-size: 22px;
}

.moni-comparison-card .moni-comparison-title {
    font-size: 18px;
    font-weight: 700;
}

.moni-comparison-card .moni-comparison-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px dashed var(--moni-border);
}

.moni-comparison-card .moni-comparison-item:last-child {
    border-bottom: none;
}

.moni-comparison-card .moni-comparison-label {
    color: var(--moni-text-muted);
    font-size: 13px;
}

.moni-comparison-card .moni-comparison-value {
    font-weight: 600;
    color: var(--moni-text-primary);
}

.moni-comparison-card .moni-comparison-value.highlight {
    color: var(--moni-success);
    font-weight: 700;
}

#yearlyHeader {
    display: grid;
    gap: 10px;
    background: var(--moni-accent);
    color: white;
    padding: 12px;
    font-weight: 600;
    font-size: 12px;
    position: sticky;
    top: 0;
}

#yearlyHeader span,
.moni-schedule-row span {
    text-align: left;
}

.moni-schedule-row {
    display: grid;
    gap: 10px;
}

@media (min-width: 768px) {
    #yearlyHeader,
    .moni-schedule-row {
        grid-template-columns: 80px 1fr 1fr 1fr;
    }
}

@media (max-width: 767px) {
    #yearlyHeader,
    .moni-schedule-row {
        grid-template-columns: 60px 1fr 1fr;
        font-size: 11px;
        gap: 8px;
    }
    
    #yearlyHeader span:last-child,
    .moni-schedule-row span:last-child {
        display: none;
    }
}

@media (max-width: 480px) {
    #yearlyHeader,
    .moni-schedule-row {
        grid-template-columns: 50px 1fr 1fr;
        font-size: 10px;
        gap: 5px;
    }
}

.moni-chart-container {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 16px;
    margin-top: 16px;
}
.moni-interest-breakdown {
    margin: 20px 0;
}

.moni-interest-card {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 20px;
}

.moni-interest-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--moni-text-primary);
}

.moni-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 10px;
}

.moni-metric-card {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.moni-metric-icon {
    width: 48px;
    height: 48px;
    background: var(--moni-accent-soft);
    border-radius: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--moni-accent);
    font-size: 20px;
}

.moni-metric-info {
    flex: 1;
}

.moni-metric-label {
    font-size: 11px;
    color: var(--moni-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.moni-metric-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--moni-text-primary);
}

.moni-metric-saved {
    font-size: 11px;
    color: var(--moni-success);
    margin-top: 3px;
}

.moni-schedule-controls {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.moni-schedule-btn {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--moni-text-secondary);
    transition: all 0.2s;
}

.moni-schedule-btn:hover {
    border-color: var(--moni-accent);
    color: var(--moni-accent);
}

.moni-schedule-btn.active {
    background: var(--moni-accent);
    border-color: var(--moni-accent);
    color: white;
}

.moni-schedule-table-container {
    overflow-x: auto;
    max-height: 500px;
    overflow-y: auto;
}

.moni-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.moni-table th {
    background: var(--moni-accent);
    color: white;
    padding: 12px;
    text-align: left;
    position: sticky;
    top: 0;
    font-weight: 600;
}

.moni-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--moni-border);
    color: var(--moni-text-secondary);
}

.moni-table tr:hover {
    background: var(--moni-accent-soft);
}

@media (max-width: 768px) {
    .moni-metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .moni-table {
        font-size: 11px;
    }
    
    .moni-table th,
    .moni-table td {
        padding: 8px;
    }
    
    .moni-schedule-btn {
        padding: 6px 12px;
        font-size: 12px;
    }
}
.moni-monthly-breakdown {
    margin: 20px 0;
}

.moni-amortization-table {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    overflow-x: auto;
}

.moni-amortization-header {
    display: grid;
    grid-template-columns: 80px 1fr 1fr 1fr 1fr;
    background: var(--moni-accent);
    color: white;
    padding: 12px;
    font-weight: 600;
    font-size: 12px;
    position: sticky;
    top: 0;
}

.moni-amortization-row {
    display: grid;
    grid-template-columns: 80px 1fr 1fr 1fr 1fr;
    padding: 10px 12px;
    border-bottom: 1px solid var(--moni-border);
    font-size: 12px;
}

.moni-amortization-row:nth-child(even) {
    background: var(--moni-bg-card);
}

.moni-amortization-row:hover {
    background: var(--moni-accent-soft);
}

.moni-btn-small {
    background: var(--moni-accent-soft);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--moni-accent);
}

.moni-btn-small:hover {
    background: var(--moni-accent);
    color: white;
    border-color: var(--moni-accent);
}

@media (max-width: 768px) {
    .moni-amortization-header,
    .moni-amortization-row {
        grid-template-columns: 60px 1fr 1fr 1fr 1fr;
        font-size: 10px;
        gap: 5px;
    }
    
    .moni-amortization-header span,
    .moni-amortization-row span {
        white-space: nowrap;
    }
}

@media (max-width: 640px) {
    .moni-amortization-header,
    .moni-amortization-row {
        grid-template-columns: 50px 80px 80px 80px 100px;
        font-size: 9px;
    }
}
.moni-week-result {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.moni-result-box {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 16px;
    text-align: center;
}

.moni-result-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--moni-text-muted);
    margin-bottom: 8px;
}

.moni-result-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--moni-text-primary);
}

.moni-diff-box {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 20px;
    text-align: center;
    margin-bottom: 12px;
}

.moni-diff-label {
    font-size: 12px;
    color: var(--moni-text-muted);
    margin-bottom: 8px;
}

.moni-diff-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--moni-accent);
}

.moni-current-week {
    margin-top: 20px;
}

.moni-schedule-row {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--moni-border);
    font-size: 13px;
}

.moni-schedule-header {
    background: var(--moni-accent);
    color: white;
    padding: 12px;
    font-weight: 600;
    font-size: 13px;
    border-radius: var(--moni-radius-sm) var(--moni-radius-sm) 0 0;
    position: sticky;
    top: 0;
}

@media (max-width: 768px) {
    .moni-schedule-header, .moni-schedule-row {
        grid-template-columns: 60px 100px 100px 70px !important;
        font-size: 10px;
        gap: 5px;
    }
}

@media (max-width: 640px) {
    .moni-week-result {
        grid-template-columns: 1fr;
    }
    
    .moni-schedule-header, .moni-schedule-row {
        grid-template-columns: 50px 85px 85px 60px !important;
        font-size: 9px;
        gap: 3px;
    }
}
.moni-conversion-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--moni-bg-surface);
    border-radius: var(--moni-radius);
    padding: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 20px;
}

.moni-result-source,
.moni-result-target {
    flex: 1;
    text-align: center;
}

.moni-result-arrow {
    font-size: 32px;
    color: var(--moni-accent);
}

.moni-result-label {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--moni-text-muted);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.moni-result-time {
    font-size: 24px;
    font-weight: 700;
    color: var(--moni-text-primary);
    margin-bottom: 8px;
}

.moni-result-zone {
    font-size: 14px;
    color: var(--moni-text-secondary);
}

.moni-time-diff {
    background: var(--moni-accent-soft);
    border-radius: var(--moni-radius-sm);
    padding: 16px;
    text-align: center;
    margin-bottom: 24px;
}

.moni-diff-label {
    font-size: 12px;
    color: var(--moni-text-muted);
    margin-bottom: 8px;
}

.moni-diff-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--moni-accent);
}

.moni-popular-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.moni-popular-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.moni-popular-btn:hover {
    background: var(--moni-accent);
    border-color: var(--moni-accent);
    transform: translateY(-2px);
}

.moni-popular-btn:hover .moni-popular-from,
.moni-popular-btn:hover .moni-popular-to {
    color: white;
}

.moni-popular-btn:hover i {
    color: white;
}

.moni-popular-from,
.moni-popular-to {
    font-weight: 500;
    font-size: 13px;
    color: var(--moni-text-primary);
}

.moni-popular-btn i {
    color: var(--moni-accent);
    font-size: 14px;
}

.moni-world-clock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.moni-world-clock-card {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 16px;
    text-align: center;
    transition: all 0.2s;
}

.moni-world-clock-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--moni-shadow);
}

.moni-world-flag {
    font-size: 32px;
    margin-bottom: 8px;
}

.moni-world-city {
    font-weight: 600;
    font-size: 14px;
    color: var(--moni-text-primary);
    margin-bottom: 8px;
}

.moni-world-time {
    font-size: 18px;
    font-weight: 700;
    color: var(--moni-accent);
    margin-bottom: 4px;
}

.moni-world-date {
    font-size: 11px;
    color: var(--moni-text-muted);
}

@media (max-width: 768px) {
    .moni-conversion-result {
        flex-direction: column;
    }
    
    .moni-result-arrow {
        transform: rotate(90deg);
    }
    
    .moni-popular-grid {
        grid-template-columns: 1fr;
    }
    
    .moni-world-clock-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .moni-world-clock-grid {
        grid-template-columns: 1fr;
    }
    
    .moni-result-time {
        font-size: 18px;
    }
}
.moni-participant-add {
    display: flex;
    gap: 10px;
    align-items: center;
}

.moni-btn-small {
    background: var(--moni-accent);
    border: none;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--moni-radius-md);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.moni-btn-small:hover {
    background: var(--moni-accent-dark);
    transform: translateY(-1px);
}

.moni-participants-list {
    margin: 20px 0;
    max-height: 200px;
    overflow-y: auto;
}

.moni-participant-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    margin-bottom: 8px;
    flex-wrap: wrap;
    gap: 10px;
}

.moni-participant-item span {
    font-size: 13px;
    color: var(--moni-text-secondary);
}

.moni-participant-item span i {
    color: var(--moni-accent);
    margin-right: 6px;
}

.moni-remove-btn {
    background: var(--moni-danger);
    border: none;
    padding: 6px 12px;
    border-radius: var(--moni-radius-md);
    color: white;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
}

.moni-remove-btn:hover:not(:disabled) {
    opacity: 0.8;
}

.moni-time-slots {
    margin: 20px 0;
}

.moni-slots-grid {
    display: grid;
    gap: 16px;
}

.moni-time-slot {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 20px;
}

.moni-slot-time {
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--moni-border);
}

.moni-slot-time i {
    color: var(--moni-accent);
    margin-right: 8px;
}

.moni-slot-participants {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.moni-slot-participant {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--moni-bg-card);
    border-radius: var(--moni-radius-md);
    flex-wrap: wrap;
    gap: 8px;
}

.moni-slot-participant i {
    color: var(--moni-accent);
    margin-right: 6px;
}

.moni-slot-local {
    font-weight: 600;
    color: var(--moni-success);
}

.moni-no-slots {
    text-align: center;
    padding: 40px;
    background: var(--moni-bg-surface);
    border-radius: var(--moni-radius-sm);
}

.moni-no-slots i {
    font-size: 48px;
    color: var(--moni-text-muted);
    margin-bottom: 16px;
}

.moni-timezone-list {
    display: grid;
    gap: 12px;
}

.moni-timezone-item {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    padding: 15px;
}

.moni-timezone-name {
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--moni-text-primary);
}

.moni-timezone-detail,
.moni-timezone-current,
.moni-timezone-date {
    font-size: 12px;
    color: var(--moni-text-muted);
    margin-top: 5px;
}

.moni-timezone-detail i,
.moni-timezone-current i,
.moni-timezone-date i {
    color: var(--moni-accent);
    width: 20px;
    margin-right: 5px;
}

.moni-converter {
    background: var(--moni-bg-surface);
    border-radius: var(--moni-radius-sm);
    padding: 20px;
}

.moni-converter-input {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.moni-converter-input .moni-input {
    flex: 1;
    min-width: 120px;
}

.moni-converter-input i {
    color: var(--moni-accent);
}

.moni-converter-result {
    margin-top: 20px;
    padding: 15px;
    background: var(--moni-accent-soft);
    border-radius: var(--moni-radius-md);
    text-align: center;
}

.moni-convert-result {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.moni-convert-result i {
    color: var(--moni-accent);
    font-size: 18px;
}

@media (max-width: 768px) {
    .moni-participant-add {
        flex-direction: column;
    }
    
    .moni-participant-item {
        flex-direction: column;
        text-align: center;
    }
    
    .moni-slot-participant {
        flex-direction: column;
        text-align: center;
    }
    
    .moni-converter-input {
        flex-direction: column;
    }
    
    .moni-converter-input .moni-input {
        width: 100%;
    }
    
    .moni-converter-input i {
        transform: rotate(90deg);
    }
}
.moni-conversion-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

.moni-convert-btn {
    background: var(--moni-bg-surface);
    border: 2px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    padding: 12px 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--moni-text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.moni-convert-btn:hover {
    background: var(--moni-accent);
    border-color: var(--moni-accent);
    color: white;
    transform: translateY(-2px);
}

.moni-convert-btn i {
    font-size: 14px;
}

.moni-action-buttons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 20px;
}

.moni-action-btn {
    background: var(--moni-accent);
    border: none;
    border-radius: var(--moni-radius-md);
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.moni-action-btn:hover {
    background: var(--moni-accent-dark);
    transform: translateY(-2px);
}

.moni-action-btn:first-child {
    background: var(--moni-success);
}

.moni-action-btn:first-child:hover {
    background: #236b56;
}

.moni-action-btn:nth-child(2) {
    background: var(--moni-danger);
}

.moni-action-btn:nth-child(2):hover {
    background: #a3382b;
}

.moni-action-btn:last-child {
    background: var(--moni-accent);
}

textarea.moni-input {
    resize: vertical;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .moni-conversion-buttons {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .moni-action-buttons {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .moni-conversion-buttons {
        grid-template-columns: 1fr;
    }
}
.moni-conversion-result {
    text-align: center;
    padding: 30px 20px;
    background: var(--moni-accent-soft);
    border-radius: var(--moni-radius);
    margin-bottom: 20px;
}

.moni-conversion-amount {
    font-size: 42px;
    font-weight: 800;
    color: var(--moni-accent);
    margin-bottom: 10px;
    word-break: break-word;
}

.moni-conversion-rate {
    font-size: 14px;
    color: var(--moni-text-secondary);
    margin-bottom: 8px;
}

.moni-conversion-date {
    font-size: 12px;
    color: var(--moni-text-muted);
}

.moni-popular-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.moni-popular-item {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.moni-popular-item:hover {
    background: var(--moni-accent);
    color: white;
    transform: translateY(-2px);
}

.moni-popular-pair {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.moni-popular-rate {
    font-size: 12px;
    color: var(--moni-text-muted);
}

.moni-popular-item:hover .moni-popular-rate {
    color: white;
}

.moni-recent-list {
    max-height: 350px;
    overflow-y: auto;
}

.moni-recent-item {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.moni-recent-item:hover {
    background: var(--moni-accent-soft);
    transform: translateX(4px);
}

.moni-recent-details {
    font-size: 14px;
    margin-bottom: 4px;
}

.moni-recent-rate {
    font-size: 12px;
    color: var(--moni-text-muted);
    margin-bottom: 2px;
}

.moni-recent-time {
    font-size: 10px;
    color: var(--moni-text-muted);
}

.moni-recent-empty {
    text-align: center;
    padding: 20px;
    color: var(--moni-text-muted);
}

.moni-rates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
}

.moni-rate-card {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.moni-rate-card:hover {
    background: var(--moni-accent);
    color: white;
    transform: translateY(-2px);
}

.moni-rate-currency {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 4px;
}

.moni-rate-name {
    font-size: 10px;
    color: var(--moni-text-muted);
    margin-bottom: 8px;
}

.moni-rate-card:hover .moni-rate-name {
    color: rgba(255,255,255,0.8);
}

.moni-rate-value {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
}

.moni-rate-base {
    font-size: 9px;
    color: var(--moni-text-muted);
}

.moni-loading {
    text-align: center;
    padding: 40px;
    color: var(--moni-text-muted);
}

.moni-loading i {
    margin-right: 8px;
}

@media (max-width: 768px) {
    .moni-conversion-amount {
        font-size: 28px;
    }
    
    .moni-rates-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    }
    
    .moni-popular-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }
}

@media (max-width: 480px) {
    .moni-conversion-amount {
        font-size: 24px;
    }
    
    .moni-popular-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Add these styles to your existing moni-style.css */

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

.moni-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--moni-text-muted);
    cursor: pointer;
    border-radius: var(--moni-radius-md);
    transition: all 0.2s;
    font-family: inherit;
}

.moni-tab i {
    margin-right: 6px;
}

.moni-tab:hover {
    color: var(--moni-accent);
    background: var(--moni-accent-soft);
}

.moni-tab.active {
    color: var(--moni-accent);
    background: var(--moni-accent-soft);
    border-bottom: 2px solid var(--moni-accent);
    margin-bottom: -10px;
}

/* Range Slider */
.moni-range-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.moni-range {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--moni-border);
    -webkit-appearance: none;
    appearance: none;
}

.moni-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--moni-accent);
    cursor: pointer;
}

.moni-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--moni-accent);
    cursor: pointer;
    border: none;
}

.moni-range-value {
    min-width: 40px;
    text-align: center;
    font-weight: 600;
    color: var(--moni-accent);
    background: var(--moni-accent-soft);
    padding: 4px 8px;
    border-radius: var(--moni-radius-md);
    font-size: 14px;
}

/* Checkbox Group */
.moni-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 16px 0;
}

.moni-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--moni-text-secondary);
}

.moni-checkbox input {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--moni-accent);
}

/* Result Box */
.moni-result-box {
    background: var(--moni-bg-surface);
    border: 2px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.moni-result-text {
    font-family: 'Courier New', monospace;
    font-size: 20px;
    font-weight: 600;
    color: var(--moni-accent);
    word-break: break-all;
    flex: 1;
    letter-spacing: 0.5px;
}

.moni-copy-btn {
    background: var(--moni-accent-soft);
    border: 1px solid var(--moni-border);
    padding: 8px 16px;
    border-radius: var(--moni-radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--moni-accent);
    transition: all 0.2s;
}

.moni-copy-btn:hover {
    background: var(--moni-accent);
    color: white;
    border-color: var(--moni-accent);
}

/* Strength Meter */
.moni-strength-meter {
    margin: 20px 0;
}

.moni-strength-label {
    font-size: 12px;
    color: var(--moni-text-muted);
    margin-bottom: 6px;
}

.moni-strength-bar {
    background: var(--moni-border);
    height: 8px;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 6px;
}

.moni-strength-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s;
    background: #2e7d64;
}

.moni-strength-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--moni-text-secondary);
}

/* History List */
.moni-history-list {
    max-height: 300px;
    overflow-y: auto;
}

.moni-history-empty {
    text-align: center;
    padding: 40px;
    color: var(--moni-text-muted);
}

.moni-history-item {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    padding: 12px;
    margin-bottom: 10px;
}

.moni-history-value {
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: 500;
    color: var(--moni-accent);
    word-break: break-all;
    cursor: pointer;
    margin-bottom: 8px;
}

.moni-history-value:hover {
    text-decoration: underline;
}

.moni-history-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--moni-text-muted);
}

.moni-history-type {
    background: var(--moni-accent-soft);
    padding: 2px 8px;
    border-radius: 12px;
}

.moni-history-copy {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--moni-accent);
    padding: 4px 8px;
    border-radius: var(--moni-radius-md);
}

.moni-history-copy:hover {
    background: var(--moni-accent-soft);
}

/* Small Button */
.moni-btn-small {
    background: var(--moni-accent-soft);
    border: 1px solid var(--moni-border);
    padding: 8px 16px;
    border-radius: var(--moni-radius-md);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    color: var(--moni-accent);
    margin-top: 12px;
    width: auto;
    display: inline-block;
    transition: all 0.2s;
}

.moni-btn-small:hover {
    background: var(--moni-accent);
    color: white;
    border-color: var(--moni-accent);
}

/* Responsive */
@media (max-width: 640px) {
    .moni-tabs {
        flex-wrap: wrap;
    }
    
    .moni-tab {
        flex: 1;
        text-align: center;
        padding: 8px 12px;
        font-size: 12px;
    }
    
    .moni-result-box {
        flex-direction: column;
        text-align: center;
    }
    
    .moni-result-text {
        font-size: 16px;
    }
    
    .moni-checkbox-group {
        gap: 12px;
    }
    
    .moni-checkbox {
        font-size: 12px;
    }
}
.moni-number-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.moni-number-card {
    background: var(--moni-accent-soft);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 16px 8px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--moni-accent);
    font-family: 'Courier New', monospace;
    transition: all 0.2s;
}

.moni-number-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--moni-shadow);
    border-color: var(--moni-accent);
}

.moni-presets-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

@media (max-width: 640px) {
    .moni-presets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .moni-number-grid {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }
    
    .moni-number-card {
        font-size: 16px;
        padding: 12px 4px;
    }
}

@media (max-width: 480px) {
    .moni-number-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.moni-scale-visual {
    margin: 20px 0 30px;
}

.moni-scale-bar {
    position: relative;
    height: 40px;
    background: linear-gradient(90deg, #2b5797, #4c9aff, #ffd966, #ff6b6b, #c44536);
    border-radius: 40px;
    margin-bottom: 15px;
    overflow: hidden;
}

.moni-scale-marker {
    position: absolute;
    top: -5px;
    width: 10px;
    height: 50px;
    background: var(--moni-text-primary);
    border-radius: 10px;
    transform: translateX(-50%);
    transition: left 0.3s ease;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    z-index: 10;
}

.moni-scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--moni-text-muted);
    padding: 0 5px;
}

/* Temperature Description */
.moni-temp-description {
    background: var(--moni-accent-soft);
    border-radius: var(--moni-radius-sm);
    padding: 16px;
    margin-top: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    color: var(--moni-text-secondary);
}

.moni-temp-description i {
    color: var(--moni-accent);
    font-size: 20px;
}

/* Formula Grid */
.moni-formula-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.moni-formula-item {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 16px;
}

.moni-formula-name {
    font-weight: 600;
    color: var(--moni-accent);
    margin-bottom: 8px;
    font-size: 14px;
}

.moni-formula {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: var(--moni-text-primary);
    background: var(--moni-bg-card);
    padding: 8px 12px;
    border-radius: var(--moni-radius-md);
    border: 1px solid var(--moni-border);
}

/* Preset Grid Enhancement */
.moni-presets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.moni-preset-btn {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
}

.moni-preset-btn:hover {
    background: var(--moni-accent);
    color: white;
    border-color: var(--moni-accent);
    transform: translateY(-2px);
}

.moni-preset-btn strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.moni-preset-btn small {
    font-size: 11px;
    opacity: 0.8;
}

/* Responsive */
@media (max-width: 640px) {
    .moni-formula-grid {
        grid-template-columns: 1fr;
    }
    
    .moni-presets-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .moni-scale-bar {
        height: 30px;
    }
    
    .moni-scale-marker {
        height: 40px;
        top: -5px;
    }
    
    .moni-scale-labels {
        font-size: 9px;
    }
}
.moni-bmi-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--moni-accent), var(--moni-accent-dark));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: var(--moni-shadow);
}

.moni-bmi-value {
    font-size: 48px;
    font-weight: 800;
    color: white;
    line-height: 1;
}

.moni-bmi-label {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    margin-top: 5px;
}

.moni-bmi-category {
    text-align: center;
    padding: 10px;
    border-radius: var(--moni-radius-md);
    margin-bottom: 20px;
    font-weight: 600;
}

.moni-bmi-category.underweight {
    background: #e6a01720;
    color: #e6a017;
}

.moni-bmi-category.normal {
    background: #2e7d6420;
    color: #2e7d64;
}

.moni-bmi-category.overweight {
    background: #e6a01720;
    color: #e6a017;
}

.moni-bmi-category.obese {
    background: #c4453620;
    color: #c44536;
}

/* Body Fat Box */
.moni-bodyfat-box {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 20px;
    text-align: center;
}

.moni-bodyfat-value {
    font-size: 36px;
    font-weight: 800;
    color: var(--moni-accent);
}

.moni-bodyfat-category {
    font-size: 14px;
    color: var(--moni-text-muted);
    margin-top: 5px;
}

.moni-bodyfat-category.underweight { color: #e6a017; }
.moni-bodyfat-category.normal { color: #2e7d64; }
.moni-bodyfat-category.overweight { color: #e6a017; }
.moni-bodyfat-category.obese { color: #c44536; }

/* Weight Status Bar */
.moni-weight-status {
    margin: 15px 0;
}

.moni-status-bar {
    background: var(--moni-border);
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}

.moni-status-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #e6a017, #2e7d64, #e6a017, #c44536);
    transition: width 0.3s;
}

.moni-status-labels {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--moni-text-muted);
}

/* Recommendations */
.moni-recommendations {
    background: var(--moni-bg-surface);
    border-radius: var(--moni-radius-sm);
    padding: 15px;
    font-size: 14px;
    line-height: 1.6;
}

.moni-recommendations p {
    margin-bottom: 10px;
}

.moni-recommendations p:last-child {
    margin-bottom: 0;
}

/* Weight Goal */
.moni-weight-goal {
    margin: 15px 0;
}

.moni-goal-box {
    background: var(--moni-accent-soft);
    border-radius: var(--moni-radius-sm);
    padding: 15px;
    text-align: center;
}

.moni-goal-box i {
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 8px;
    display: block;
}

.moni-goal-box span {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    display: block;
}

.moni-goal-box small {
    font-size: 11px;
    color: #ffffff;
}

/* BMR Box */
.moni-bmr-box {
    text-align: center;
    padding: 15px;
    background: var(--moni-accent-soft);
    border-radius: var(--moni-radius-sm);
    margin-bottom: 15px;
}

.moni-bmr-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--moni-accent);
}

.moni-bmr-label {
    font-size: 12px;
    color: var(--moni-text-muted);
}

.moni-maintenance {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.moni-maintenance-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed var(--moni-border);
    font-size: 13px;
}

.moni-maintenance-item:last-child {
    border-bottom: none;
}

.moni-maintenance-item strong {
    color: var(--moni-accent);
}

/* BMI Chart */
.moni-bmi-chart {
    margin-top: 20px;
    position: relative;
}

.moni-chart-bar {
    display: flex;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.moni-chart-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 600;
    color: white;
    text-align: center;
}

.moni-chart-section.underweight {
    background: #e6a017;
}

.moni-chart-section.normal {
    background: #2e7d64;
}

.moni-chart-section.overweight {
    background: #e6a017;
}

.moni-chart-section.obese {
    background: #c44536;
}

.moni-chart-marker {
    position: absolute;
    top: -15px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 15px solid var(--moni-accent);
    transform: translateX(-50%);
    transition: left 0.3s;
}

/* Advanced Toggle */
.moni-advanced-toggle {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    padding: 12px 16px;
    margin: 15px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    color: var(--moni-accent);
}

.moni-advanced-toggle:hover {
    background: var(--moni-accent-soft);
}

/* Row Group */
.moni-row-group {
    display: flex;
    gap: 10px;
}

/* Responsive */
@media (max-width: 640px) {
    .moni-bmi-circle {
        width: 140px;
        height: 140px;
    }
    
    .moni-bmi-value {
        font-size: 36px;
    }
    
    .moni-bodyfat-value {
        font-size: 28px;
    }
    
    .moni-bmr-value {
        font-size: 24px;
    }
    
    .moni-chart-section span {
        font-size: 8px;
    }
    
    .moni-status-labels {
        font-size: 8px;
    }
}
/* Add these styles to your existing moni-style.css */

/* Results Grid */
.moni-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.moni-result-item {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 16px;
    text-align: center;
}

.moni-result-icon {
    width: 40px;
    height: 40px;
    background: var(--moni-accent-soft);
    border-radius: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    color: var(--moni-accent);
    font-size: 18px;
}

.moni-result-label {
    font-size: 12px;
    color: var(--moni-text-muted);
    margin-bottom: 8px;
}

.moni-result-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--moni-accent);
    word-break: break-all;
    font-family: 'Courier New', monospace;
}

/* Copy All Button */
.moni-copy-all {
    margin-bottom: 20px;
    text-align: center;
}

/* Input Hint */
.moni-input-hint {
    font-size: 12px;
    color: var(--moni-text-muted);
    margin-top: 6px;
}

/* Format Options */
.moni-format-options {
    margin: 20px 0;
}

/* Details Box */
.moni-details-box {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 16px;
}

.moni-detail-row {
    padding: 8px 0;
    font-size: 13px;
    color: var(--moni-text-secondary);
    border-bottom: 1px solid var(--moni-border);
}

.moni-detail-row:last-child {
    border-bottom: none;
}

/* Examples Grid */
.moni-examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.moni-example-btn {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.moni-example-btn:hover {
    background: var(--moni-accent);
    border-color: var(--moni-accent);
    transform: translateY(-2px);
}

.moni-example-btn:hover .moni-example-value,
.moni-example-btn:hover .moni-example-desc {
    color: white;
}

.moni-example-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--moni-accent);
    font-family: 'Courier New', monospace;
}

.moni-example-desc {
    font-size: 11px;
    color: var(--moni-text-muted);
    margin-top: 4px;
}

/* Bitwise Operations */
.moni-bitwise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.moni-bitwise-item {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    padding: 12px;
    text-align: center;
}

.moni-bitwise-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--moni-accent);
    margin-bottom: 6px;
}

.moni-bitwise-value {
    font-size: 13px;
    font-family: 'Courier New', monospace;
    color: var(--moni-text-primary);
    word-break: break-all;
}

/* Number Properties */
.moni-properties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.moni-property-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    padding: 12px 16px;
}

.moni-property-label {
    font-size: 13px;
    color: var(--moni-text-muted);
}

.moni-property-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--moni-accent);
}

/* Responsive */
@media (max-width: 640px) {
    .moni-results-grid {
        grid-template-columns: 1fr;
    }
    
    .moni-bitwise-grid {
        grid-template-columns: 1fr;
    }
    
    .moni-properties-grid {
        grid-template-columns: 1fr;
    }
    
    .moni-examples-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .moni-result-value {
        font-size: 16px;
    }
}
/* Additional styles for QR Generator */
.moni-color-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.moni-color-box {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    padding: 10px;
}

.moni-color-box label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--moni-text-muted);
    margin-bottom: 8px;
}

.moni-color-box input {
    width: 100%;
    height: 45px;
    border: 2px solid var(--moni-border);
    border-radius: var(--moni-radius-md);
    cursor: pointer;
    padding: 5px;
}

.moni-upload-area {
    border: 3px dashed var(--moni-border);
    border-radius: var(--moni-radius);
    padding: 25px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    background: var(--moni-bg-surface);
}

.moni-upload-area:hover {
    border-color: var(--moni-accent);
    background: var(--moni-accent-soft);
}

.moni-upload-area i {
    font-size: 40px;
    color: var(--moni-accent);
    margin-bottom: 10px;
}

.moni-upload-area p {
    color: var(--moni-text-secondary);
    font-size: 14px;
    margin-bottom: 8px;
}

.moni-file-name {
    font-size: 12px;
    color: var(--moni-accent);
    background: var(--moni-bg-card);
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-block;
    margin-top: 8px;
}

.moni-download-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin: 15px 0;
}

.moni-download-btn {
    background: var(--moni-accent-soft);
    border: 1px solid var(--moni-border);
    padding: 12px;
    border-radius: var(--moni-radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: var(--moni-accent);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.moni-download-btn:hover {
    background: var(--moni-accent);
    color: white;
    border-color: var(--moni-accent);
}

.moni-copy-btn {
    background: var(--moni-warning);
    border: 1px solid var(--moni-border);
    padding: 12px;
    border-radius: var(--moni-radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: white;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: #f59e0b;
}

.moni-copy-btn:hover {
    background: #d97706;
    transform: translateY(-2px);
}

.moni-qr-wrapper {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius);
    padding: 25px;
    margin: 20px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.moni-qr-frame {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    background: white;
}

#qrcode {
    display: flex;
    justify-content: center;
    align-items: center;
}

#qrcode canvas {
    border-radius: 10px;
    max-width: 100%;
    height: auto;
    display: block;
}

.moni-logo-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 2;
    overflow: hidden;
    border: 2px solid white;
}

.moni-info-panel {
    background: var(--moni-bg-surface);
    border: 1px solid var(--moni-border);
    border-radius: var(--moni-radius-sm);
    padding: 16px;
    margin-top: 20px;
}

.moni-info-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--moni-border);
}

.moni-info-row:last-child {
    border-bottom: none;
}

.moni-info-label {
    color: var(--moni-text-muted);
    font-size: 13px;
}

.moni-info-value {
    color: var(--moni-accent);
    font-weight: 600;
    font-size: 14px;
}

@keyframes fadeInOut {
    0% { opacity: 0; transform: translateX(100px); }
    15% { opacity: 1; transform: translateX(0); }
    85% { opacity: 1; transform: translateX(0); }
    100% { opacity: 0; transform: translateX(100px); }
}

@media (max-width: 768px) {
    .moni-color-grid {
        grid-template-columns: 1fr;
    }
    
    .moni-download-grid {
        grid-template-columns: 1fr;
    }
    
    .moni-qr-wrapper {
        padding: 15px;
    }
    
    .moni-logo-container {
        width: 45px;
        height: 45px;
    }
}
moni
.worldclock-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 10px;
}

/* Header */
.wc-header {
    text-align: center;
    margin-bottom: 35px;
}

.wc-main-title {
    font-size: 36px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

.wc-sub-desc {
    font-size: 15px;
    color: #64748b;
}

/* Sections */
.wc-section {
    margin-bottom: 40px;
}

.wc-section-title {
    font-size: 20px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 18px;
    padding-left: 12px;
    border-left: 4px solid #3b82f6;
}

/* Grid */
.wc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

/* Country Cards */
.wc-country-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px 20px;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s;
}

.wc-country-card:hover {
    border-color: #3b82f6;
    background: #fafbff;
    transform: translateY(-2px);
}

.wc-country-name {
    font-size: 16px;
    font-weight: 500;
    color: #0f172a;
}

.wc-country-arrow {
    color: #94a3b8;
    font-size: 14px;
}

.wc-country-card:hover .wc-country-arrow {
    color: #3b82f6;
    transform: translateX(3px);
}

/* Region Cards */
.wc-region-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 18px;
    text-decoration: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wc-region-card:hover {
    border-color: #3b82f6;
    background: #fafbff;
}

.wc-region-name {
    font-size: 15px;
    font-weight: 500;
    color: #0f172a;
}

.wc-region-badge {
    background: #f1f5f9;
    color: #475569;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
}

/* City Grid */
.wc-city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

.wc-city-card {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    transition: all 0.2s;
}

.wc-city-card:hover {
    border-color: #3b82f6;
    background: #fafbff;
    transform: translateX(3px);
}

.wc-city-name {
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
}

.wc-city-time-live {
    font-family: monospace;
    font-size: 14px;
    font-weight: 600;
    color: #3b82f6;
    background: #eff6ff;
    padding: 4px 12px;
    border-radius: 20px;
}

/* City Detail Page */
.wc-city-detail {
    margin-bottom: 40px;
}

.wc-detail-header {
    margin-bottom: 30px;
}

.wc-back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 15px;
    color: #3b82f6;
    text-decoration: none;
    font-size: 14px;
}

.wc-back-link:hover {
    gap: 8px;
}

.wc-main-title {
    font-size: 32px;
    font-weight: 700;
    color: #0f172a;
    margin: 10px 0 5px;
}

/* Clock Showcase */
.wc-clock-showcase {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 35px;
    display: flex;
    gap: 50px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.wc-digital-clock {
    text-align: center;
    min-width: 280px;
}

.wc-digital-time {
    font-size: 64px;
    font-weight: 700;
    font-family: monospace;
    color: #0f172a;
    letter-spacing: 2px;
    margin-bottom: 12px;
}

.wc-digital-date {
    font-size: 16px;
    color: #475569;
    margin-bottom: 15px;
}

.wc-timezone-badge {
    font-size: 13px;
    color: #3b82f6;
    background: #eff6ff;
    padding: 6px 18px;
    border-radius: 30px;
    display: inline-block;
}

.wc-analog-clock {
    background: white;
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

canvas {
    display: block;
}

/* Info Grid */
.wc-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 30px;
}

.wc-info-block {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 16px;
    text-align: center;
}

.wc-info-label {
    font-size: 12px;
    color: #64748b;
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.wc-info-value {
    font-size: 14px;
    font-weight: 600;
    color: #0f172a;
}

/* Keywords */
.wc-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e2e8f0;
}

.wc-keyword {
    background: #f1f5f9;
    color: #3b82f6;
    padding: 5px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 500;
}

/* Related Cities */
.wc-related-section {
    margin-top: 35px;
}

.wc-related-title {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 18px;
    padding-left: 12px;
    border-left: 3px solid #3b82f6;
}

.wc-city-grid-small {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.wc-city-link {
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    transition: all 0.2s;
}

.wc-city-link:hover {
    border-color: #3b82f6;
    background: #fafbff;
}

.wc-city-link-name {
    font-size: 14px;
    font-weight: 500;
    color: #0f172a;
}

.wc-city-link-time {
    font-family: monospace;
    font-size: 13px;
    font-weight: 500;
    color: #3b82f6;
}

/* Responsive */
@media (max-width: 768px) {
    .worldclock-container {
        padding: 20px 15px;
    }
    
    .wc-main-title {
        font-size: 28px;
    }
    
    .wc-clock-showcase {
        padding: 25px;
        gap: 30px;
    }
    
    .wc-digital-time {
        font-size: 48px;
    }
    
    .wc-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .wc-city-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .wc-digital-time {
        font-size: 36px;
    }
    
    .wc-info-grid {
        grid-template-columns: 1fr;
    }
    
    .wc-city-card {
        padding: 12px;
    }
}