/* Loan Calculator — style.css v1.0 */

.lcc-wrap {
    max-width: 600px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1a1a1a;
}

/* Header */
.lcc-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.lcc-icon { font-size:32px; line-height:1; }
.lcc-title {
    font-size:22px !important; font-weight:600 !important;
    margin:0 0 3px !important; padding:0 !important;
    border:none !important; color:#1a1a1a !important;
}
.lcc-sub { font-size:13px; color:#666; margin:0; }

/* Tabs */
.lcc-tabs {
    display:flex;
    border:1px solid #d0d0d0;
    border-radius:10px;
    overflow:hidden;
    margin-bottom:20px;
}
.lcc-tab {
    flex:1; padding:10px 8px;
    font-size:13px; font-weight:500;
    border:none; border-right:1px solid #d0d0d0;
    background:#fff; color:#555;
    cursor:pointer; transition:background .13s,color .13s;
    line-height:1.3; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:2px;
}
.lcc-tab:last-child { border-right:none; }
.lcc-tab:hover:not(.act) { background:#f5f5f5; }
.lcc-tab.act { background:#e1f5ee; color:#0F6E56; }
.lcc-tab-sub { font-size:11px; font-weight:400; opacity:.7; }

/* Panels */
.lcc-panel { display:none; }
.lcc-panel.act { display:block; }

/* Section label */
.lcc-section-lbl {
    font-size:11px; font-weight:700;
    color:#999; text-transform:uppercase;
    letter-spacing:.6px; margin-bottom:10px;
}

/* Grid */
.lcc-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:4px;
}
@media (max-width:480px) { .lcc-grid { grid-template-columns:1fr; } }

.lcc-lbl { display:block; font-size:13px; font-weight:500; color:#555; margin-bottom:6px; }
.lcc-sub-lbl { font-size:11px; color:#aaa; margin-bottom:4px; }

/* Inputs */
.lcc-iw { position:relative; }
.lcc-iw input[type="number"],
.lcc-iw select {
    width:100%; box-sizing:border-box;
    padding:9px 40px 9px 26px;
    border:1px solid #d0d0d0;
    border-radius:8px;
    font-size:14px; color:#1a1a1a;
    background:#fff; outline:none;
    transition:border-color .15s;
    -moz-appearance:textfield;
}
.lcc-iw input::-webkit-inner-spin-button,
.lcc-iw input::-webkit-outer-spin-button { -webkit-appearance:none; }
.lcc-iw input:focus { border-color:#0F6E56; box-shadow:0 0 0 3px rgba(15,110,86,.1); }
.lcc-iw select {
    padding:9px 12px;
    appearance:none; -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
    cursor:pointer;
}
.lcc-pre {
    position:absolute; left:9px; top:50%;
    transform:translateY(-50%);
    font-size:13px; color:#999; pointer-events:none;
}
.lcc-suf {
    position:absolute; right:9px; top:50%;
    transform:translateY(-50%);
    font-size:12px; color:#999; pointer-events:none;
}

/* Term row */
.lcc-term-row { display:flex; gap:8px; }
.lcc-term-row > div { flex:1; }

/* Result card */
.lcc-result-card {
    background:#f0faf5;
    border:1px solid #9fe1cb;
    border-radius:12px;
    padding:18px 20px;
    margin-top:18px;
    margin-bottom:16px;
    animation:lcc-in .2s ease;
}
@keyframes lcc-in { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }

.lcc-res-row { display:flex; align-items:center; margin-bottom:14px; }
.lcc-metric { flex:1; text-align:center; }
.lcc-sep { width:1px; height:44px; background:#9fe1cb; }
.lcc-val { font-size:20px; font-weight:700; color:#04342C; }
.lcc-mlbl { font-size:11px; color:#0F6E56; margin-top:3px; }

/* Bars */
.lcc-bars { border-top:1px solid #9fe1cb; padding-top:12px; }
.lcc-bar-row { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.lcc-bar-row:last-child { margin-bottom:0; }
.lcc-blabel { font-size:12px; color:#085041; width:90px; flex-shrink:0; }
.lcc-track { flex:1; height:7px; background:#c5ead9; border-radius:4px; overflow:hidden; }
.lcc-fill { height:100%; border-radius:4px; transition:width .5s ease; }
.lcc-bamt { font-size:12px; color:#04342C; width:110px; text-align:right; flex-shrink:0; }

/* Amortization */
.lcc-amort { margin-bottom:14px; }
.lcc-amort-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.lcc-atitle { font-size:14px; font-weight:600; color:#1a1a1a; }
.lcc-abtns { display:flex; gap:5px; }
.lcc-abtn {
    font-size:12px; padding:5px 12px;
    border:1px solid #d0d0d0; border-radius:6px;
    background:#fff; color:#555; cursor:pointer; transition:background .13s;
}
.lcc-abtn.act { background:#e1f5ee; color:#0F6E56; border-color:#9fe1cb; font-weight:600; }

table.lcc-table {
    width:100%; border-collapse:collapse; font-size:13px;
}
table.lcc-table th {
    padding:8px 10px; text-align:right;
    color:#888; font-weight:600; font-size:11px;
    text-transform:uppercase; letter-spacing:.4px;
    border-bottom:1px solid #e8e8e8; background:#fafafa;
}
table.lcc-table th:first-child { text-align:left; }
table.lcc-table td {
    padding:7px 10px; text-align:right;
    color:#1a1a1a; border-bottom:1px solid #f0f0f0;
}
table.lcc-table td:first-child { text-align:left; color:#555; font-weight:500; }
table.lcc-table tr:hover td { background:#f5fdf8; }
table.lcc-table tr:last-child td { border-bottom:none; }

.lcc-more {
    width:100%; margin-top:8px; padding:9px;
    font-size:13px; color:#555; background:#fff;
    border:1px solid #e0e0e0; border-radius:8px; cursor:pointer;
    transition:background .13s;
}
.lcc-more:hover { background:#f5f5f5; }

.lcc-reset {
    display:block; width:100%; margin-top:10px;
    padding:9px; font-size:13px; color:#999;
    background:none; border:1px solid #e8e8e8;
    border-radius:8px; cursor:pointer; transition:background .13s;
}
.lcc-reset:hover { background:#f5f5f5; color:#333; }