:root {
    --c-primary: #3b82f6;
    --c-primary-dark: #1e40af;
    --c-primary-light: #eff6ff;
    --c-primary-border: #bfdbfe;
    --c-success: #16a34a;
    --c-success-bg: #dcfce7;
    --c-success-text: #166534;
    --c-danger: #dc2626;
    --c-danger-cost: #e11d48;
    --c-warning-start: #e67e22;
    --c-warning-end: #f0a04b;
    --c-card-bg: #ffffff;
    --c-page-bg: #f5f7fb;
    --c-text-primary: #0f172a;
    --c-text-secondary: #475569;
    --c-text-muted: #94a3b8;
    --c-border: #eef2f8;
    --c-border-light: #f1f5f9;
    --c-surface: #f8fafc;
    --c-cal-has-data: #eef6ff;
    --c-cal-has-data-border: #bfdbfe;
    --c-recharge-bubble: #16a34a;
    --font-mono: 'DIN Alternate', 'Roboto Mono', ui-monospace, monospace;
    --radius-card: 24px;
    --radius-btn: 30px;
    --radius-tag: 20px;
    --radius-cell: 12px;
    --shadow-card: 0 1px 3px rgba(0,0,0,.02);
    --shadow-hero: 0 10px 20px -5px rgba(30,74,125,.4);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth}
body{background:var(--c-page-bg);font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;padding:16px 12px 20px;color:var(--c-text-primary);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}
.container{max-width:560px;margin:0 auto}
@keyframes cardEntrance{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.card{background:var(--c-card-bg);border-radius:var(--radius-card);margin-bottom:18px;overflow:hidden;border:1px solid var(--c-border);box-shadow:var(--shadow-card);animation:cardEntrance .6s cubic-bezier(.22,1,.36,1) backwards}
.card:nth-child(1){animation-delay:0s}.card:nth-child(2){animation-delay:.1s}.card:nth-child(3){animation-delay:.2s}.card:nth-child(4){animation-delay:.3s}
.card-header{padding:14px 20px;border-bottom:1px solid #eff3f6;display:flex;justify-content:space-between;align-items:center}
.card-header h2{font-size:1.1rem;font-weight:600;display:flex;align-items:center;gap:6px;color:#1e293b}
#selectedDateSpan{font-size:.75rem;background:var(--c-border-light);padding:4px 12px;border-radius:var(--radius-tag);color:var(--c-text-secondary);transition:all .3s ease}
.remaining-card{background:linear-gradient(135deg,#1e4a7d,#2c6eb5);border-radius:20px;padding:24px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow-hero);border:none;transition:all .8s cubic-bezier(.22,1,.36,1)}
.remaining-card::before{content:'';position:absolute;top:-50%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%);border-radius:50%;transition:transform 1.5s ease}
.remaining-card:hover::before{transform:scale(1.2)}
.remaining-inner{position:relative;z-index:2}
.remaining-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.remaining-label{font-size:14px;opacity:.9;display:flex;align-items:center;gap:5px}
.remaining-top-right{text-align:right;font-size:12px;opacity:.8;line-height:1.4;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.relative-time{font-weight:600;font-size:12px;letter-spacing:.2px;color:#fbbf24;font-variant-numeric:tabular-nums}
.absolute-time{font-size:10px;opacity:.6;font-variant-numeric:tabular-nums}
.balance-digits{display:flex;align-items:baseline;margin-bottom:24px}
.num-big{font-family:var(--font-mono);font-size:64px;font-weight:700;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.num-small{font-size:32px;font-weight:500;margin-left:2px;opacity:.9;font-variant-numeric:tabular-nums}
.remaining-unit{font-size:16px;margin-left:8px;opacity:.8}
.stats-mini{background:rgba(255,255,255,.1);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border-radius:var(--radius-cell);padding:12px 16px;display:flex;justify-content:space-between;border:1px solid rgba(255,255,255,.1)}
@supports not ((backdrop-filter: blur(5px)) or (-webkit-backdrop-filter: blur(5px))) {
    .stats-mini{background:rgba(255,255,255,.18)}
}
.stats-mini-item{display:flex;flex-direction:column;align-items:center;flex:1}
.stats-mini-label{font-size:10px;opacity:.7;margin-bottom:4px}
.stats-mini-value{font-size:14px;font-weight:600;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.stat-unit{font-size:10px;margin-left:2px;opacity:.8}
.warning-low{background:rgba(255,215,150,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-radius:var(--radius-cell);padding:8px 14px;margin:12px 0;font-size:.7rem;font-weight:500;text-align:center;color:#ffecb3;border:.5px solid rgba(255,200,100,.4);animation:warningSlideIn .4s ease}
@keyframes warningSlideIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes warningPulse{0%,100%{box-shadow:0 10px 20px -5px rgba(180,100,20,.3)}50%{box-shadow:0 10px 30px -5px rgba(200,120,30,.6)}}
.remaining-card.warning-active{background:linear-gradient(135deg,var(--c-warning-start),var(--c-warning-end));animation:warningPulse 2.5s ease-in-out infinite,cardEntrance .6s cubic-bezier(.22,1,.36,1) backwards}
.remaining-card.warning-active .stats-mini{background:rgba(255,255,255,.08)}
.remaining-card.warning-active .warning-low{background:rgba(255,255,255,.18);color:#fffef5}
.calendar-wrapper{padding:16px}
.calendar-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;background:var(--c-surface);padding:6px 12px;border-radius:40px}
.calendar-nav button{background:var(--c-card-bg);border:none;width:28px;height:28px;border-radius:var(--radius-btn);cursor:pointer;font-size:14px;transition:all .2s ease;display:flex;align-items:center;justify-content:center;color:var(--c-text-secondary)}
.calendar-nav button:active{transform:scale(.9);background:var(--c-border-light)}
.month-year{font-weight:600;font-size:.85rem;min-width:80px;text-align:center}
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:.6rem;color:#5b6e8c;margin-bottom:6px}
.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day{aspect-ratio:1/1;background:#fefefe;border:1px solid var(--c-border);border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.7rem;cursor:pointer;position:relative;transition:all .2s cubic-bezier(.22,1,.36,1);user-select:none}
.cal-day:not(.empty):active{transform:scale(.92)}
.cal-day.empty{background:transparent;border-color:transparent;cursor:default}
.cal-day.has-data{background:var(--c-cal-has-data);border-color:var(--c-cal-has-data-border)}
.cal-day.today{border:2px solid var(--c-primary);background:var(--c-primary-light);font-weight:bold}
.cal-day.selected{background:var(--c-primary)!important;color:#fff!important;border-color:var(--c-primary)!important;transform:scale(1.05);box-shadow:0 4px 12px rgba(59,130,246,.3)}
.cal-day.selected .day-consumption{background:rgba(255,255,255,.25);color:#fff}
.day-consumption{font-size:.5rem;color:var(--c-danger);background:#fff0ee;padding:1px 4px;border-radius:12px;margin-top:2px;font-weight:600;transition:all .2s ease}
.recharge-bubble{position:absolute;top:-4px;right:-4px;background:var(--c-recharge-bubble);color:#fff;font-size:.5rem;padding:1px 4px;border-radius:8px;font-weight:bold;box-shadow:0 2px 4px rgba(22,163,74,.3);z-index:10;animation:bubblePop .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes bubblePop{from{transform:scale(0)}to{transform:scale(1)}}

.bill-toggle{padding:16px 20px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;user-select:none;transition:background .2s ease;border-radius:var(--radius-card)}
.bill-toggle:active{background:var(--c-surface)}
.bill-toggle-left{display:flex;align-items:center;gap:8px}
.bill-toggle-left h2{font-size:1rem;font-weight:600;color:#1e293b}
.bill-summary-tag{font-size:.7rem;background:var(--c-border-light);color:var(--c-text-secondary);padding:3px 10px;border-radius:var(--radius-tag);font-weight:500;font-family:var(--font-mono);transition:all .3s ease}
.bill-toggle-arrow{width:24px;height:24px;border-radius:50%;background:var(--c-surface);display:flex;align-items:center;justify-content:center;font-size:.65rem;color:var(--c-text-muted);transition:all .4s cubic-bezier(.22,1,.36,1)}
.bill-toggle-arrow.expanded{transform:rotate(180deg);background:var(--c-primary-light);color:var(--c-primary)}
.bill-body{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .3s ease;opacity:0}
.bill-body.open{max-height:600px;opacity:1}
.bill-aa-hero{margin:0 16px 14px;padding:20px;border-radius:16px;background:linear-gradient(135deg,var(--c-primary-light) 0%,#dbeafe 100%);border:1px solid var(--c-primary-border);display:flex;align-items:center;justify-content:space-between;position:relative;overflow:hidden}
.bill-aa-hero::after{content:'';position:absolute;right:-20px;top:-20px;width:80px;height:80px;background:radial-gradient(circle,rgba(59,130,246,.08),transparent 70%);border-radius:50%}
.bill-aa-left{display:flex;flex-direction:column;gap:4px;position:relative;z-index:1}
.bill-aa-label{font-size:.75rem;color:var(--c-primary);font-weight:600;display:flex;align-items:center;gap:4px}
.bill-aa-people{font-size:.65rem;color:#64748b;background:var(--c-card-bg);padding:2px 8px;border-radius:10px;display:inline-flex;align-items:center;gap:3px;width:fit-content}
.bill-aa-price{font-family:var(--font-mono);font-size:36px;font-weight:800;color:var(--c-primary-dark);line-height:1.1;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.bill-aa-price .yen{font-size:18px;font-weight:600;margin-right:2px;vertical-align:top;margin-top:6px;display:inline-block}
.bill-aa-right{text-align:right;position:relative;z-index:1}
.bill-aa-total{font-size:.7rem;color:#64748b;margin-bottom:2px}
.bill-aa-total strong{color:#1e293b;font-weight:600;font-variant-numeric:tabular-nums}
.bill-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:0 16px 16px}
.bill-cell{background:var(--c-surface);border-radius:var(--radius-cell);padding:12px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;transition:all .2s ease}
.bill-cell:hover{background:var(--c-border-light);transform:translateY(-1px)}
.bill-cell-label{font-size:.6rem;color:var(--c-text-muted);font-weight:500;white-space:nowrap}
.bill-cell-value{font-size:.95rem;font-weight:700;color:#1e293b;font-family:var(--font-mono);line-height:1.2;font-variant-numeric:tabular-nums}
.bill-cell-sub{font-size:.55rem;color:var(--c-text-muted);margin-top:1px}
.bill-cell.accent-orange .bill-cell-value{color:#ea580c}
.bill-cell.accent-green .bill-cell-value{color:var(--c-success)}
.bill-empty{text-align:center;padding:32px 16px;color:var(--c-text-muted);font-size:.85rem}
.scrollable-list{max-height:420px;overflow-y:auto;scroll-behavior:smooth;-webkit-overflow-scrolling:touch}
.record-item{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--c-border-light);background:var(--c-card-bg);transition:background .15s ease;animation:listItemIn .3s ease backwards}
.record-item:active{background:var(--c-surface)}
@keyframes listItemIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
.record-recharge{background:#fafcfb}
.record-time{font-size:.75rem;color:#64748b;margin-bottom:4px;font-variant-numeric:tabular-nums}
.record-balance{font-size:.9rem;font-weight:500;color:#1e293b;font-variant-numeric:tabular-nums}
.record-money{font-size:.7rem;color:#059669;margin-top:2px;font-variant-numeric:tabular-nums}
.record-right{text-align:right;line-height:1.3}
.record-used{font-size:.95rem;font-weight:600;color:var(--c-danger);font-variant-numeric:tabular-nums}
.record-cost{font-size:.75rem;color:var(--c-danger-cost);margin-top:2px;font-variant-numeric:tabular-nums}
.record-tag{padding:4px 10px;border-radius:12px;font-size:.7rem;font-weight:500;background:var(--c-success-bg);color:var(--c-success-text)}
.empty-state{text-align:center;padding:40px 16px;color:var(--c-text-muted);font-size:.9rem}
.summary-mini{background:var(--c-surface);padding:12px 20px;display:flex;justify-content:space-between;font-size:.8rem;font-weight:500;color:#334155;position:sticky;bottom:0;border-top:1px solid #e2e8f0;font-variant-numeric:tabular-nums;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
#dailyDetailContent{transition:opacity .2s ease;min-height:80px}
.loading-spinner{text-align:center;padding:30px;color:var(--c-text-muted);font-size:.85rem}
.footer-beian{text-align:center;margin:0;padding:1px 0;line-height:8px;opacity:0;animation:fadeIn 1s ease 1s forwards}
.footer-beian a{color:#000;font-size:10px;text-decoration:none;display:inline-block}
@keyframes fadeIn{to{opacity:1}}

.info-trigger {
    background: transparent;
    border: none;
    width: auto;
    height: auto;
    color: rgba(255,255,255,.8);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    margin-left: 4px;
    padding: 0;
    vertical-align: middle;
    font-weight: 700;
    transition: all .2s ease;
}
.info-trigger:hover { color: #fff; transform: scale(1.15); }
.info-trigger:active { transform: scale(.9); opacity: .8; }

.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all .3s ease; padding: 20px;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal-box {
    background: var(--c-card-bg); border-radius: 20px; max-width: 380px; width: 100%; overflow: hidden; transform: translateY(20px) scale(.96); transition: all .3s cubic-bezier(.22,1,.36,1); box-shadow: 0 20px 60px rgba(0,0,0,.15);
}
.modal-overlay.active .modal-box { transform: translateY(0) scale(1); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 14px; border-bottom: 1px solid var(--c-border); }
.modal-header h3 { font-size: 1rem; font-weight: 600; color: var(--c-text-primary); }
.modal-close { background: var(--c-surface); border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 18px; color: var(--c-text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s ease; }
.modal-close:hover { background: var(--c-border); color: var(--c-text-primary); }
.modal-body { padding: 16px 20px 20px; }
.modal-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.modal-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 1px; }
.modal-item strong { font-size: .85rem; color: var(--c-text-primary); display: block; margin-bottom: 2px; }
.modal-item p { font-size: .78rem; color: var(--c-text-secondary); line-height: 1.4; margin: 0; }

@media(min-width:768px){
    .day-consumption{font-size:.72rem;padding:2px 6px}
    .cal-day{font-size:.82rem}
    .recharge-bubble{font-size:.6rem;padding:2px 6px}
    .bill-grid{gap:10px}
    .bill-aa-price{font-size:42px}
}