/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
    /* Light Theme Variables */
    --bg:#f8fafc;
    --card:#ffffff;
    --card-border:#e2e8f0;
    --card-hover:#f1f5f9;
    --input:#f8fafc;
    --input-border:#cbd5e1;
    
    --text:#0f172a;
    --dim:#64748b;
    --muted:#94a3b8;
    
    --accent:#4f46e5;
    --accent2:#6366f1;
    --accent-glow:rgba(79, 70, 229, 0.15);
    
    --green:#10b981;
    --green-bg:rgba(16, 185, 129, 0.1);
    --green2:#059669;
    
    --red:#ef4444;
    --red-bg:rgba(239, 68, 68, 0.1);
    --red2:#dc2626;
    
    --yellow:#f59e0b;
    --yellow-bg:rgba(245, 158, 11, 0.1);
    
    --blue:#3b82f6;
    --blue-bg:rgba(59, 130, 246, 0.1);
    
    --radius:20px;
    --radius-sm:12px;
    --shadow:0 10px 40px -10px rgba(0,0,0,0.05);
    --transition:all .2s ease;
}
html{font-size:15px;scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;max-width:100vw}
.hidden{display:none!important}
.text-green{color:var(--green2)}
.text-red{color:var(--red2)}

/* ===== ANIMATED BG (Subtle Light Version) ===== */
body::before{
    content:'';
    position:fixed;
    inset:0;
    z-index:0;
    background:
        radial-gradient(ellipse 80% 60% at 10% 20%,rgba(79, 70, 229, 0.03),transparent),
        radial-gradient(ellipse 60% 50% at 90% 80%,rgba(16, 185, 129, 0.03),transparent),
        radial-gradient(ellipse 50% 40% at 50% 50%,rgba(59, 130, 246, 0.03),transparent);
    pointer-events:none;
}

/* ===== LOCK SCREEN ===== */
.lock-screen{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--bg);overflow:hidden}
.lock-bg-orbs{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.3;animation:float 8s ease-in-out infinite}
.orb-1{width:300px;height:300px;background:var(--accent);top:10%;left:15%;animation-delay:0s}
.orb-2{width:250px;height:250px;background:var(--green);bottom:15%;right:10%;animation-delay:2s}
.orb-3{width:200px;height:200px;background:var(--blue);top:50%;left:60%;animation-delay:4s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-30px) scale(1.1)}}

.lock-card{
    position:relative;
    z-index:1;
    background:rgba(255, 255, 255, 0.9);
    backdrop-filter:blur(20px);
    border:1px solid var(--card-border);
    border-radius:30px;
    padding:3.5rem 2.5rem;
    width:min(400px,90vw);
    text-align:center;
    box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.08);
}
.lock-logo{margin-bottom:2.5rem}
.lock-icon-wrap{
    width:72px;
    height:72px;
    margin:0 auto 1.2rem;
    border-radius:20px;
    background:linear-gradient(135deg,var(--accent),var(--accent2));
    display:grid;
    place-items:center;
    font-size:1.8rem;
    color:#fff;
    box-shadow:0 12px 30px rgba(79, 70, 229, 0.3);
}
.lock-logo h1{font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:700}
.lock-logo h1 span{color:var(--accent2)}
.lock-logo p{font-size:.9rem;color:var(--dim);margin-top:.5rem}

.pin-dots{display:flex;justify-content:center;gap:16px;margin-bottom:2rem}
.dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--input-border);background:var(--bg);transition:all .2s ease}
.dot.filled{background:var(--accent);border-color:var(--accent);box-shadow:0 0 15px var(--accent-glow);transform:scale(1.1)}
.pin-error{color:var(--red);font-size:.85rem;font-weight:500;margin-top:-1rem;margin-bottom:1.5rem;animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

.pin-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:280px;margin:0 auto}
.pin-btn{
    width:100%;
    aspect-ratio:1;
    border-radius:20px;
    border:1px solid var(--card-border);
    background:var(--card);
    color:var(--text);
    font-size:1.6rem;
    font-weight:600;
    cursor:pointer;
    transition:var(--transition);
    font-family:'Space Grotesk',sans-serif;
    box-shadow:0 2px 10px rgba(0,0,0,0.02);
}
.pin-btn:hover{background:var(--card-hover);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.05)}
.pin-btn:active{transform:scale(.95);background:var(--accent-glow);color:var(--accent)}
.pin-empty{visibility:hidden;box-shadow:none}
.pin-delete{font-size:1.2rem;color:var(--dim)}

/* ===== APP WRAPPER ===== */
.app-wrapper{position:relative;z-index:1;animation:fadeIn .5s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* ===== HEADER ===== */
#app-header{
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(255, 255, 255, 0.85);
    backdrop-filter:blur(20px);
    border-bottom:1px solid var(--card-border);
    padding:1rem 2rem;
    box-shadow:0 4px 20px rgba(0,0,0,0.02);
}
.header-content{max-width:1400px;margin:auto;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem}
.logo{display:flex;align-items:center;gap:.8rem}
.logo-icon{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-size:1.3rem;color:#fff;box-shadow:0 8px 20px rgba(79, 70, 229, 0.25)}
.logo h1{font-family:'Space Grotesk',sans-serif;font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.accent{color:var(--accent2)}
.tagline{font-size:.8rem;color:var(--dim);margin-top:2px}

.header-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.month-selector{display:flex;align-items:center;gap:.5rem;background:var(--bg);border:1px solid var(--card-border);border-radius:var(--radius-sm);padding:.35rem .5rem}
.month-label{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1rem;min-width:130px;text-align:center;color:var(--text)}

.btn-icon{background:none;border:none;color:var(--dim);cursor:pointer;padding:.4rem;border-radius:10px;transition:var(--transition);font-size:1.1rem}
.btn-icon:hover{color:var(--accent);background:var(--accent-glow)}
.btn-icon-sm{background:none;border:none;color:var(--dim);cursor:pointer;padding:.3rem;border-radius:6px;font-size:.9rem;transition:var(--transition)}
.btn-icon-sm:hover{color:var(--text);background:var(--card-hover)}

.btn-glass{
    background:var(--card);
    border:1px solid var(--card-border);
    color:var(--text);
    padding:.5rem 1rem;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-size:.85rem;
    font-weight:600;
    transition:var(--transition);
    box-shadow:0 2px 10px rgba(0,0,0,0.02);
}
.btn-glass:hover{border-color:var(--accent);background:var(--bg);transform:translateY(-1px);box-shadow:0 6px 15px rgba(0,0,0,0.05)}

/* ===== ALERTS ===== */
.alerts-banner{background:var(--yellow-bg);border-bottom:1px solid rgba(245, 158, 11, 0.2)}
.alerts-content{max-width:1400px;margin:auto;padding:.8rem 2rem;display:flex;align-items:center;gap:.8rem;color:#b45309;font-size:.9rem;font-weight:600}
.alerts-content i:first-child{animation:bell 1s ease-in-out infinite alternate}
@keyframes bell{0%{transform:rotate(0)}50%{transform:rotate(15deg)}100%{transform:rotate(-15deg)}}

/* ===== SUMMARY CARDS ===== */
.summary-section{max-width:1400px;margin:2rem auto 0;padding:0 2rem}
.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem}
.summary-card{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:var(--radius);
    padding:1.5rem;
    display:flex;
    align-items:center;
    gap:1.2rem;
    transition:var(--transition);
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow);
}
.summary-card::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:4px;
    background:transparent;
    transition:var(--transition);
}
.summary-card:hover{transform:translateY(-4px);box-shadow:0 15px 40px -10px rgba(0,0,0,0.08)}
.card-income:hover::after{background:var(--green)}
.card-expense:hover::after{background:var(--red)}
.card-balance:hover::after{background:var(--accent)}
.card-paid:hover::after{background:var(--blue)}

.summary-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:1.3rem;flex-shrink:0}
.card-income .summary-icon{background:var(--green-bg);color:var(--green2)}
.card-expense .summary-icon{background:var(--red-bg);color:var(--red2)}
.card-balance .summary-icon{background:var(--accent-glow);color:var(--accent2)}
.card-paid .summary-icon{background:var(--blue-bg);color:var(--blue)}

.summary-info{display:flex;flex-direction:column;flex:1;min-width:0}
.summary-label{font-size:.75rem;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;font-weight:700;margin-bottom:.2rem}
.summary-value{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:700;color:var(--text)}

.summary-bar{height:4px;background:var(--bg);border-radius:4px;margin-top:10px;overflow:hidden}
.summary-bar-fill{height:100%;border-radius:4px;transition:width .8s cubic-bezier(0.4, 0, 0.2, 1)}
.bar-income{background:var(--green)}
.bar-expense{background:var(--red)}
.bar-paid{background:var(--blue)}

/* ===== MAIN GRID ===== */
#main-content{max-width:1400px;margin:2rem auto 0;padding:0 2rem 3rem}
.main-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:1.8rem;align-items:start}
.column-left,.column-right{display:flex;flex-direction:column;gap:1.8rem;min-width:0}

/* ===== CARDS ===== */
.card,.glass-card{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:var(--radius);
    overflow:hidden;
    transition:var(--transition);
    box-shadow:var(--shadow);
    min-width:0;
    max-width:100%;
}
.card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.4rem 1.8rem;
    border-bottom:1px solid var(--card-border);
    background:rgba(248, 250, 252, 0.5);
}
.card-title{display:flex;align-items:center;gap:.6rem}
.card-title h2,.card-title h3{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:700;color:var(--text)}
.card-title i{font-size:1.2rem}
.icon-expense{color:var(--red)}.icon-income{color:var(--green)}.icon-services{color:var(--yellow)}
.icon-projection{color:var(--accent2)}.icon-chart{color:var(--accent2)}.icon-comparison{color:var(--yellow)}.icon-timeline{color:var(--green)}

.card-footer{
    padding:1.2rem 1.8rem;
    border-top:1px solid var(--card-border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:var(--bg);
    font-size:.95rem;
    color:var(--dim);
}
.card-footer strong{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;color:var(--text)}

.btn-glow{
    background:var(--text);
    border:none;
    color:#fff;
    padding:.5rem 1rem;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-size:.85rem;
    font-weight:600;
    transition:var(--transition);
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}
.btn-glow:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 6px 15px var(--accent-glow)}

/* ===== TABLES ===== */
.table-wrapper{overflow-x:auto;padding:0.5rem 0;width:100%;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:600px}
thead th{
    padding:1rem 1.8rem;
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--dim);
    font-weight:700;
    text-align:left;
    background:transparent;
    white-space:nowrap;
    border-bottom:1px solid var(--card-border);
}
tbody td{
    padding:1rem 1.8rem;
    font-size:.9rem;
    border-bottom:1px solid var(--card-border);
    vertical-align:middle;
    color:var(--text);
}
tbody tr{transition:var(--transition)}
tbody tr:hover{background:var(--card-hover)}
tbody tr:last-child td{border-bottom:none}

.input-inline{
    background:var(--input);
    border:1px solid var(--input-border);
    border-radius:8px;
    color:var(--text);
    padding:.45rem .6rem;
    width:100%;
    transition:var(--transition);
    font-size:.9rem;
}
.input-inline:focus{outline:none;border-color:var(--accent);background:var(--card);box-shadow:0 0 0 3px var(--accent-glow)}
.input-inline[type="number"]{width:120px;font-family:'Space Grotesk',sans-serif;font-weight:600}
.input-inline[type="date"]{width:145px;color:var(--dim)}
select.input-inline{
    cursor:pointer;
    appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
    padding-right:30px;
}

.status-badge{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding:.35rem .8rem;
    border-radius:24px;
    font-size:.75rem;
    font-weight:700;
    white-space:nowrap;
    cursor:pointer;
    transition:var(--transition);
    border:none;
}
.status-paid, .status-received{background:var(--green-bg);color:var(--green2)}
.status-pending{background:var(--yellow-bg);color:#b45309}

.btn-action{
    background:var(--bg);
    border:1px solid var(--card-border);
    cursor:pointer;
    color:var(--dim);
    padding:.4rem;
    border-radius:8px;
    transition:var(--transition);
    font-size:.9rem;
}
.btn-action:hover{color:var(--accent);background:var(--accent-glow);border-color:transparent}
.btn-action.delete:hover{color:var(--red);background:var(--red-bg)}

.obs-icon{color:var(--input-border);font-size:1rem;cursor:pointer;transition:var(--transition)}
.obs-icon.has-note{color:var(--yellow)}
.obs-icon:hover{color:var(--accent)}

/* ===== SUB-SECTION ===== */
.sub-section{border-top:1px solid var(--card-border)}
.sub-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.2rem 1.8rem;
    background:var(--bg);
    border-bottom:1px solid var(--card-border);
}

/* ===== PROJECTION ===== */
.projection-card{
    background:linear-gradient(145deg, var(--accent), var(--accent2)) !important;
    color:white;
}
.projection-card .card-header{
    background:transparent;
    border-bottom:1px solid rgba(255,255,255,0.1);
}
.projection-card .card-title h2, .projection-card .card-title i{color:white}
.projection-body{padding:1.8rem}
.projection-row{display:flex;justify-content:space-between;align-items:center;padding:.8rem 0;font-size:1rem;font-weight:500;color:rgba(255,255,255,0.9)}
.projection-row i{margin-right:.4rem}
.projection-row .text-green{color:#6ee7b7}
.projection-row .text-red{color:#fca5a5}
.projection-row strong{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;color:white}
.projection-balance{font-size:1.1rem;margin-top:.5rem}
.big-value{font-size:2rem !important;font-weight:700}
.divider{border:none;border-top:1px solid rgba(255,255,255,0.1);margin:.8rem 0}
.projection-message{
    margin-top:1.5rem;
    padding:1rem;
    border-radius:var(--radius-sm);
    font-size:.9rem;
    font-weight:600;
    text-align:center;
    background:rgba(255,255,255,0.1);
    backdrop-filter:blur(10px);
}
.projection-message.positive{background:rgba(16, 185, 129, 0.2);border:1px solid rgba(16, 185, 129, 0.3)}
.projection-message.negative{background:rgba(239, 68, 68, 0.2);border:1px solid rgba(239, 68, 68, 0.3)}

/* ===== CHART ===== */
.chart-toggle{display:flex;gap:.5rem}
.btn-chip{
    background:var(--bg);
    border:1px solid var(--card-border);
    color:var(--dim);
    padding:.4rem .6rem;
    border-radius:8px;
    cursor:pointer;
    transition:var(--transition);
    font-size:.9rem;
}
.btn-chip.active{background:var(--accent);color:white;border-color:var(--accent)}
.chart-container{padding:1.5rem;height:300px}
.chart-container canvas{width:100%!important;height:100%!important}

/* ===== COMPARISON ===== */
.comparison-body{padding:1.5rem 1.8rem}
.comparison-empty{text-align:center;padding:2.5rem 1rem;color:var(--muted)}
.comparison-empty i{font-size:2rem;margin-bottom:.8rem;display:block;color:var(--input-border)}
.comparison-row{display:flex;justify-content:space-between;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--card-border)}
.comparison-row:last-child{border-bottom:none}
.comp-label{font-size:.9rem;font-weight:600;color:var(--dim)}
.comp-values{display:flex;align-items:center;gap:.8rem;font-size:.9rem}
.comp-old{color:var(--muted)}.comp-arrow{color:var(--input-border);font-size:.8rem}.comp-new{font-weight:700;color:var(--text);font-family:'Space Grotesk',sans-serif}
.comp-diff{font-size:.8rem;font-weight:700;padding:.2rem .6rem;border-radius:20px}
.comp-diff.up-bad{background:var(--red-bg);color:var(--red2)}
.comp-diff.down-good{background:var(--green-bg);color:var(--green2)}
.comp-diff.up-good{background:var(--green-bg);color:var(--green2)}
.comp-diff.down-bad{background:var(--red-bg);color:var(--red2)}

/* ===== TIMELINE ===== */
.timeline-body{padding:1rem 1.8rem;max-height:320px;overflow-y:auto}
.timeline-body::-webkit-scrollbar{width:6px}
.timeline-body::-webkit-scrollbar-thumb{background:var(--input-border);border-radius:6px}
.timeline-item{display:flex;align-items:center;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--card-border)}
.timeline-item:last-child{border-bottom:none}
.timeline-date{font-family:'Space Grotesk',sans-serif;font-size:.85rem;font-weight:700;min-width:55px;text-align:center;padding:.3rem .5rem;border-radius:10px;background:var(--bg);color:var(--dim)}
.timeline-date.overdue{background:var(--red-bg);color:var(--red2)}
.timeline-date.soon{background:var(--yellow-bg);color:#b45309}
.timeline-info{flex:1}
.timeline-name{font-size:.95rem;font-weight:600;color:var(--text);display:block}
.timeline-amount{font-size:.85rem;color:var(--dim);font-family:'Space Grotesk',sans-serif;font-weight:500}
.timeline-badge{font-size:.7rem;padding:.2rem .5rem}
.empty-text{text-align:center;color:var(--muted);padding:2rem;font-size:.9rem}

/* ===== MODALS ===== */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(15, 23, 42, 0.6);backdrop-filter:blur(4px);display:grid;place-items:center;padding:1rem;animation:fadeIn .2s ease}
.modal{
    background:var(--card);
    border:1px solid var(--card-border);
    border-radius:24px;
    width:100%;
    max-width:480px;
    box-shadow:0 25px 50px -12px rgba(0, 0, 0, 0.25);
    animation:slideUp .3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes slideUp{from{transform:translateY(30px) scale(0.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid var(--card-border);background:var(--bg);border-radius:24px 24px 0 0}
.modal-header h3{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:700;color:var(--text)}
.modal-form{padding:2rem;display:flex;flex-direction:column;gap:1.2rem}
.form-group{display:flex;flex-direction:column;gap:.4rem}
.form-group label{font-size:.8rem;font-weight:700;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
.form-group input,.form-group select,.form-group textarea{
    background:var(--input);
    border:1px solid var(--input-border);
    border-radius:var(--radius-sm);
    color:var(--text);
    padding:.7rem 1rem;
    font-size:1rem;
    transition:var(--transition);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
    outline:none;
    border-color:var(--accent);
    background:var(--card);
    box-shadow:0 0 0 4px var(--accent-glow);
}
.form-group textarea{resize:vertical;min-height:80px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.modal-actions{display:flex;justify-content:flex-end;gap:.8rem;padding-top:1rem;border-top:1px solid var(--card-border);margin-top:.5rem}

.btn-primary{
    background:var(--accent);
    border:none;
    color:#fff;
    padding:.7rem 1.5rem;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:600;
    font-size:.95rem;
    transition:var(--transition);
    box-shadow:0 4px 12px var(--accent-glow);
}
.btn-primary:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 6px 15px rgba(79, 70, 229, 0.25)}
.btn-cancel{
    background:var(--bg);
    border:1px solid var(--card-border);
    color:var(--dim);
    padding:.7rem 1.5rem;
    border-radius:var(--radius-sm);
    cursor:pointer;
    font-weight:600;
    font-size:.95rem;
    transition:var(--transition);
}
.btn-cancel:hover{color:var(--text);border-color:var(--input-border);background:var(--card-hover)}

/* ===== FOOTER ===== */
#app-footer{text-align:center;padding:2rem;color:var(--dim);font-size:.85rem;border-top:1px solid var(--card-border)}
#app-footer .fa-heart{color:var(--red)}

/* ===== RESPONSIVE ===== */
@media(max-width:1024px){
    .main-grid{grid-template-columns:1fr}
    .summary-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
    html{font-size:14px}
    #app-header{padding:.8rem 1.2rem}
    .summary-section{padding:0 1.2rem}
    #main-content{padding:0 1.2rem 2rem}
    .summary-grid{grid-template-columns:1fr 1fr;gap:1rem}
    .header-content{flex-direction:column;align-items:flex-start}
    .header-actions{width:100%;justify-content:space-between}
    .form-row{grid-template-columns:1fr}
    .card-header{flex-direction:column;align-items:flex-start;gap:.8rem}
    .btn-text{display:none}
    .summary-card{padding:1.2rem}
    
    /* Table Adjustments for Mobile */
    table{min-width:500px}
    thead th, tbody td{padding:0.8rem 1rem}
    .input-inline[type="number"]{width:90px}
    .input-inline[type="date"]{width:130px}
    select.input-inline{background-position:right 5px center;padding-right:20px}
}
@media(max-width:420px){
    .summary-grid{grid-template-columns:1fr}
}