:root{ 
    --bg:#0f1222; 
    --card:#161a2f; 
    --text:#e6e8f0; 
    --muted:#96a0c8; 
    --accent:#7aa2ff; 
}

*{box-sizing:border-box}

body{
    margin:0; 
    font-family:system-ui,Segoe UI,Roboto,Arial; 
    background:var(--bg); 
    color:var(--text);
    font-size: clamp(14px, 2vw, 16px);
    text-align: center;
    width: 100%;
}

/* Wrapper to center all content */
body > * {
    max-width: 1000px;
    margin: 0 auto;
    width: 100%;
}

/* Override for specific elements that need full width */
body > .container {
    max-width: min(980px, 95vw);
}

/* Base styles - mobile first */
.container{
    max-width: min(980px, 95vw); 
    margin:0 auto; 
    padding: clamp(15px, 3vw, 30px);
    text-align: center;
}

/* Main content centering */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
}

.site-header,.site-footer{
    background:#0b0e1a; 
    border-bottom:1px solid #1f2342;
    padding: 1rem;
}
.site-footer{border-top:1px solid #1f2342; border-bottom: none;}

/* Header and navigation */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.nav-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.nav-links a {
    color: var(--muted);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.nav-links a:hover {
    color: #fff;
    background: rgba(122, 162, 255, 0.1);
}

/* Main content structure */
.main-content {
    min-height: 60vh;
    padding: 2rem 0;
}

.lead {
    font-size: 1.1rem;
    color: var(--muted);
    margin-bottom: 2rem;
}

/* Footer */
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 20px;
}

.footer-section h4 {
    color: var(--text);
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section li {
    margin: 8px 0;
}

.footer-section a {
    color: var(--muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-section a:hover {
    color: var(--accent);
}

.footer-bottom {
    border-top: 1px solid #1f2342;
    padding-top: 20px;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
}

/* Related calculators section */
.related-calculators {
    margin: 40px auto;
    padding: 20px;
    background: rgba(22, 26, 47, 0.2);
    border-radius: 8px;
    border: 1px solid #252a4b;
    max-width: 600px;
}

.related-calculators h3 {
    margin-bottom: 15px;
    color: var(--text);
}

.related-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.related-links a {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(122, 162, 255, 0.1);
    color: var(--accent);
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.related-links a:hover {
    background: rgba(122, 162, 255, 0.2);
    transform: translateY(-1px);
}

.brand{
    font-weight:700; 
    color:var(--text); 
    text-decoration:none; 
    margin-right:12px;
    font-size: clamp(1rem, 4vw, 1.2rem);
}

nav a{
    color:var(--muted); 
    margin-right: clamp(8px, 2vw, 12px); 
    text-decoration:none;
    font-size: clamp(0.9rem, 2vw, 1rem);
}
nav a:hover{color:#fff}

.card{
    background:var(--card); 
    border:1px solid #252a4b; 
    border-radius: clamp(10px, 2vw, 14px); 
    padding: clamp(15px, 4vw, 20px); 
    box-shadow:0 8px 24px rgba(0,0,0,.2);
    transition: transform 0.2s ease;
}

.card-link a{
    display:block; 
    padding: clamp(12px, 3vw, 16px); 
    color:#fff; 
    text-decoration:none;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

/* Grid - automatically responsive */
.grid{
    display:grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
    gap: clamp(12px, 3vw, 20px); 
    list-style:none; 
    padding:0;
    justify-content: center;
}

.lede{color:var(--muted)}

.form{
    display:grid; 
    gap: clamp(10px, 2vw, 15px); 
    margin:16px auto;
    max-width: 500px;
}

.row{
    display:grid; 
    gap: clamp(4px, 1vw, 8px);
}

input,select,button{
    padding: clamp(10px, 2vw, 12px); 
    border-radius: clamp(8px, 1.5vw, 10px); 
    border:1px solid #2c325e; 
    background:#0e1230; 
    color:#fff;
    font-size: max(16px, 1rem);
    width: 100%;
}

button{
    background:linear-gradient(180deg,#4358b2,#32459b); 
    border:none; 
    cursor:pointer;
    font-weight: 600;
    transition: all 0.2s ease;
}
button:hover{
    filter:brightness(1.1);
    transform: translateY(-1px);
}

.table{
    width:100%; 
    border-collapse:collapse; 
    margin-top:12px;
    font-size: clamp(0.85rem, 2vw, 1rem);
}
.table th,.table td{
    padding: clamp(6px, 2vw, 10px); 
    border-bottom:1px solid #2c325e; 
    text-align:left;
}

.result{margin-top:16px}
.hint{
    color:var(--muted); 
    font-size: clamp(0.8rem, 1.8vw, 0.9rem);
}
.note{
    margin: 16px auto; 
    color:var(--muted);
    font-size: clamp(0.85rem, 2vw, 0.95rem);
    max-width: 600px;
    text-align: center;
}

/* Enhanced result styling */
.result-grid {
    display: grid;
    gap: 12px;
    margin: 20px auto;
    max-width: 500px;
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: rgba(22, 26, 47, 0.3);
    border-radius: 8px;
    border-left: 3px solid var(--accent);
    text-align: left;
}

.result-value {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--accent);
}

.breakdown {
    margin: 20px auto;
    padding: 15px;
    background: rgba(22, 26, 47, 0.2);
    border-radius: 8px;
    border: 1px solid #252a4b;
    max-width: 600px;
    text-align: left;
}

.comparison {
    margin: 20px auto;
    max-width: 700px;
}

.tip {
    margin: 20px auto;
    padding: 15px;
    background: rgba(122, 162, 255, 0.1);
    border-radius: 8px;
    border-left: 4px solid var(--accent);
    max-width: 600px;
    text-align: left;
}

.tip ul {
    margin: 10px 0;
    padding-left: 20px;
}

.tip li {
    margin: 8px 0;
    line-height: 1.4;
}

.warning {
    background: rgba(255, 193, 7, 0.2);
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 15px;
    margin: 10px 0;
    color: #ffc107;
}

.status-good { border-left-color: #28a745; }
.status-warning { border-left-color: #ffc107; }
.status-danger { border-left-color: #dc3545; }

.savings { color: #28a745; }
.cost { color: #dc3545; }
.shortfall { color: #dc3545; }
.surplus { color: #28a745; }

/* Credit card calculator specific styles */
.current-plan {
    background: rgba(122, 162, 255, 0.1);
    border-left: 3px solid var(--accent);
}

.current-plan td {
    font-weight: bold;
}

/* Table improvements */
.table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    margin: 12px auto;
    background: rgba(22, 26, 47, 0.3);
    border-radius: 8px;
    overflow: hidden;
    text-align: left;
}

.table th {
    background: rgba(122, 162, 255, 0.2);
    font-weight: bold;
    text-align: left;
    padding: 12px;
}

.table th,
.table td {
    padding: 12px;
    border-bottom: 1px solid #2c325e;
    text-align: left;
}

.table tr:last-child td {
    border-bottom: none;
}

.table tr:hover {
    background: rgba(122, 162, 255, 0.05);
}

/* Form field visibility */
.row {
    display: grid;
    gap: clamp(4px, 1vw, 8px);
    margin-bottom: 8px;
}

/* Better mobile responsiveness for tables */
@media (max-width: 600px) {
    .table {
        font-size: 0.9rem;
    }
    
    .table th,
    .table td {
        padding: 8px 4px;
    }
    
    .comparison {
        overflow-x: auto;
    }
}

/* Mobile specific (small screens) */
@media (max-width: 480px) {
    .grid{
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .card{
        margin-bottom: 10px;
    }
    
    .form{
        gap: 12px;
        max-width: 100%;
    }
    
    nav{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    nav a{
        margin-right: 0;
    }
}

/* Tablet range */
@media (min-width: 481px) and (max-width: 768px) {
    .grid{
        grid-template-columns: repeat(2, 1fr);
    }
    
    .form{
        max-width: 400px;
    }
}

/* Desktop and up */
@media (min-width: 769px) {
    .grid{
        grid-template-columns: repeat(auto-fit, minmax(300px, 350px));
        max-width: 1200px;
        margin: 0 auto;
    }
    
    .card:hover{
        transform: translateY(-3px);
        box-shadow: 0 12px 32px rgba(0,0,0,.3);
    }
    
    .card-link a:hover{
        background: rgba(255,255,255,0.05);
    }
    
    /* Better spacing for desktop */
    .container{
        padding: 30px;
        max-width: 1000px;
    }
    
    /* Form constraints on desktop */
    .form{
        max-width: 350px;
        margin: 20px auto;
    }
    
    /* Center main content */
    main {
        max-width: 800px;
        margin: 0 auto !important;
        padding: 20px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
        position: relative;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
    
    /* Ensure no conflicting margins */
    body {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Center ALL h1 titles regardless of where they are */
    h1 {
        text-align: center !important;
        max-width: 600px;
        margin: 0 auto 1rem auto;
    }
    
    /* Center ALL p descriptions */
    p {
        text-align: center !important;
        max-width: 500px;
        margin: 0 auto 1.5rem auto;
    }
    
    /* Reset text alignment for form elements and result content */
    .form, .row, label, .breakdown, .tip, .comparison, .result-item {
        text-align: left;
    }
    
    /* Center result containers */
    .result, .breakdown, .comparison, .tip {
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Ensure form fields are centered within their container */
    .form .row {
        display: grid;
        gap: clamp(4px, 1vw, 8px);
        text-align: left;
        width: 100%;
    }
    
    /* Center form labels and inputs */
    .form label {
        text-align: left;
        width: 100%;
    }
    
    .form input, .form select, .form button {
        width: 100%;
        margin: 0 auto;
    }
    
    /* Center buttons specifically */
    button {
        display: block;
        margin: 0 auto;
        text-align: center;
    }
}

/* Large desktop */
@media (min-width: 1200px) {
    .container{
        max-width: 1100px;
    }
    
    .grid{
        grid-template-columns: repeat(3, 350px);
        gap: 24px;
        justify-content: center;
    }
    
    .form{
        max-width: 400px;
    }
}

/* Ultra-wide screens */
@media (min-width: 1600px) {
    .container{
        max-width: 1400px;
    }
}

/* Ad styling */
.ad-container {
    margin: 20px auto;
    text-align: center;
    max-width: 100%;
}

.ad-top {
    margin-bottom: 30px;
    background: rgba(22, 26, 47, 0.3);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #252a4b;
}

.ad-bottom {
    margin-top: 40px;
    margin-bottom: 20px;
    background: rgba(22, 26, 47, 0.3);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #252a4b;
}

.ad-sidebar {
    display: none; /* Hidden on mobile */
}

/* Desktop ad positioning */
@media (min-width: 1024px) {
    body {
        position: relative;
    }
    
    .ad-sidebar {
        display: block;
        position: fixed;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        width: 160px;
        z-index: 100;
        background: rgba(22, 26, 47, 0.9);
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #252a4b;
    }
    
    /* Remove margin that was pushing main content left */
    main {
        margin-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Hide sidebar ad on smaller desktop screens */
@media (max-width: 1280px) {
    .ad-sidebar {
        display: none;
    }
    
    main {
        margin-right: 0;
    }
}