@import "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap";:root{--bg-gradient:radial-gradient(circle at 50% 0%, #1e2942 0%, #0f172a 100%);--bg-color:#0b0f19;--card-bg:#1e293bb3;--card-bg-hover:#26344bd9;--card-border:#ffffff14;--card-border-active:#38bdf866;--text-primary:#f8fafc;--text-secondary:#94a3b8;--text-muted:#64748b;--accent-gold:#f59e0b;--accent-gold-glow:#f59e0b33;--accent-blue:#38bdf8;--accent-blue-glow:#38bdf833;--accent-green:#10b981;--accent-green-glow:#10b98133;--accent-red:#ef4444;--color-paypay:#f03;--color-dbarai:#e60012;--color-aupay:#f08300;--color-rakuten:#bf0000;--color-merpay:#007fff;--color-aeon:#a01b5d;--font-display:"Outfit", "Noto Sans JP", sans-serif;--transition-smooth:all .3s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-color);background-image:var(--bg-gradient);color:var(--text-primary);font-family:var(--font-display);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-attachment:fixed;min-height:100vh;line-height:1.5;overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:#0f172a80}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#fff3}.app-container{max-width:1400px;margin:0 auto;padding:2rem 1.5rem 4rem}.glass-panel{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);transition:var(--transition-smooth);border-radius:16px;box-shadow:0 8px 32px #0000005e}.glass-panel:hover{border-color:#ffffff1f}.app-header{flex-direction:column;gap:1rem;margin-bottom:2.5rem;display:flex;position:relative}.app-header:after{content:"";background:linear-gradient(90deg,#38bdf866 0%,#fff0 100%);width:100%;height:1px;position:absolute;bottom:-1rem;left:0}.header-top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}.title-area h1{letter-spacing:-.025em;background:linear-gradient(135deg,#fff 40%,#a5f3fc 100%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:.75rem;font-size:2.25rem;font-weight:800;display:flex}.badge-tag{color:var(--accent-blue);letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(135deg,#38bdf833 0%,#10b98133 100%);border:1px solid #38bdf84d;border-radius:9999px;padding:.25rem .75rem;font-size:.75rem;font-weight:700}.header-actions{gap:.75rem;display:flex}.dashboard-grid{grid-template-columns:1fr;gap:2rem;display:grid}@media (width>=1024px){.dashboard-grid{grid-template-columns:380px 1fr}}.sidebar-panel{flex-direction:column;gap:1.5rem;display:flex}.section-title{color:var(--text-primary);align-items:center;gap:.5rem;margin-bottom:.25rem;font-size:1.25rem;font-weight:700;display:flex}.summary-card{padding:1.5rem;position:relative;overflow:hidden}.summary-card:before{content:"";background:var(--accent-blue);width:4px;height:100%;position:absolute;top:0;left:0}.summary-card.gold:before{background:var(--accent-gold)}.summary-card-grid{grid-template-columns:1fr;gap:1rem;display:grid}.summary-item{flex-direction:column;display:flex}.summary-label{color:var(--text-secondary);align-items:center;gap:.25rem;font-size:.85rem;font-weight:500;display:flex}.summary-value{letter-spacing:-.02em;margin-top:.25rem;font-size:2rem;font-weight:800;line-height:1.2}.summary-value.gold{color:var(--accent-gold);text-shadow:0 0 16px var(--accent-gold-glow)}.summary-value span{color:var(--text-secondary);margin-left:.25rem;font-size:1rem;font-weight:500}.progress-bar-container{background:#ffffff0d;border-radius:9999px;width:100%;height:8px;margin:.75rem 0 .25rem;position:relative;overflow:hidden}.progress-bar-fill{background:var(--accent-blue);border-radius:9999px;width:0%;height:100%;transition:width 1s cubic-bezier(.4,0,.2,1);position:relative}.progress-bar-fill:after{content:"";background:linear-gradient(90deg,#fff0 0%,#ffffff26 50%,#fff0 100%);animation:2s infinite shimmer;position:absolute;inset:0}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.services-list{flex-direction:column;gap:.75rem;display:flex}.service-card{flex-direction:column;gap:.75rem;padding:1.25rem;display:flex}.service-header{justify-content:space-between;align-items:center;display:flex}.service-info{align-items:center;gap:.75rem;display:flex}.service-icon-wrapper{color:#fff;text-shadow:0 1px 2px #0003;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;font-size:.85rem;font-weight:800;display:flex}.service-name{font-size:1rem;font-weight:600}.service-progress-values{text-align:right;flex-direction:column;display:flex}.service-points-value{letter-spacing:-.01em;font-size:1.15rem;font-weight:700}.service-points-value span{color:var(--text-secondary);margin-left:.15rem;font-size:.75rem;font-weight:500}.service-details-row{color:var(--text-secondary);justify-content:space-between;font-size:.75rem;display:flex}.service-PayPay .service-icon-wrapper{background-color:var(--color-paypay)}.service-PayPay .progress-bar-fill{background:linear-gradient(90deg, #ff4d6d, var(--color-paypay))}.service-PayPay.completed{border-color:#ff00334d}.service-d払い .service-icon-wrapper{background-color:var(--color-dbarai)}.service-d払い .progress-bar-fill{background:linear-gradient(90deg, #ff4d4d, var(--color-dbarai))}.service-d払い.completed{border-color:#e600124d}.service-au_PAY .service-icon-wrapper{background-color:var(--color-aupay)}.service-au_PAY .progress-bar-fill{background:linear-gradient(90deg, #fa4, var(--color-aupay))}.service-au_PAY.completed{border-color:#f083004d}.service-楽天ペイ .service-icon-wrapper{background-color:var(--color-rakuten)}.service-楽天ペイ .progress-bar-fill{background:linear-gradient(90deg, #f55, var(--color-rakuten))}.service-楽天ペイ.completed{border-color:#bf00004d}.service-メルペイ .service-icon-wrapper{background-color:var(--color-merpay)}.service-メルペイ .progress-bar-fill{background:linear-gradient(90deg, #39f, var(--color-merpay))}.service-メルペイ.completed{border-color:#007fff4d}.service-AEON_Pay .service-icon-wrapper{background-color:var(--color-aeon)}.service-AEON_Pay .progress-bar-fill{background:linear-gradient(90deg, #d23a8b, var(--color-aeon))}.service-AEON_Pay.completed{border-color:#a01b5d4d}.service-card.completed{background:#1e293be6;box-shadow:0 0 15px #10b9811a}.completed-badge{background:var(--accent-green-glow);color:var(--accent-green);vertical-align:middle;border:1px solid #10b9814d;border-radius:4px;margin-left:.5rem;padding:.1rem .4rem;font-size:.65rem;font-weight:700;display:inline-block}.btn{cursor:pointer;transition:var(--transition-smooth);border:1px solid #0000;border-radius:10px;outline:none;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1.25rem;font-size:.9rem;font-weight:600;display:inline-flex}.btn-primary{color:#fff;background:linear-gradient(135deg,#0ea5e9 0%,#2563eb 100%);box-shadow:0 4px 12px #2563eb4d}.btn-primary:hover{background:linear-gradient(135deg,#38bdf8 0%,#2563eb 100%);transform:translateY(-1px);box-shadow:0 6px 16px #2563eb73}.btn-secondary{color:var(--text-primary);background:#ffffff0d;border-color:#ffffff1a}.btn-secondary:hover{background:#ffffff1a;border-color:#fff3}.btn-danger{color:#fca5a5;background:#ef44441a;border-color:#ef444433}.btn-danger:hover{background:#ef444433;border-color:#ef444466}.btn-icon-only{border-radius:8px;padding:.5rem}.content-panel{flex-direction:column;gap:1.5rem;display:flex}.panel-header-actions{border-bottom:1px solid var(--card-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;display:flex}.filter-bar{flex-wrap:wrap;gap:.5rem;display:flex}.filter-select{border:1px solid var(--card-border);color:var(--text-primary);cursor:pointer;appearance:none;background:#0f172a99 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") right .5rem center/1rem no-repeat;border-radius:8px;outline:none;padding:.5rem 1.75rem .5rem .75rem;font-size:.85rem}.filter-select:focus{border-color:var(--accent-blue)}.table-responsive{width:100%;overflow-x:auto}.transaction-table{border-collapse:collapse;text-align:left;width:100%;font-size:.9rem}.transaction-table th{color:var(--text-secondary);border-bottom:1px solid var(--card-border);background:#0f172a33;padding:1rem 1.5rem;font-weight:600}.transaction-table td{border-bottom:1px solid var(--card-border);color:var(--text-primary);vertical-align:middle;padding:1rem 1.5rem}.transaction-table tr:hover td{background:#ffffff05}.transaction-table tr:last-child td{border-bottom:none}.category-badge{border-radius:6px;padding:.2rem .5rem;font-size:.75rem;font-weight:600;display:inline-block}.category-badge.sme{color:#34d399;background:#10b9811a;border:1px solid #10b98133}.category-badge.large{color:#60a5fa;background:#38bdf81a;border:1px solid #38bdf833}.td-amount{font-size:.95rem;font-weight:700}.td-points{color:var(--accent-gold);font-weight:800}.points-capped-indicator{color:var(--accent-red);vertical-align:middle;background:#ef44441a;border:1px solid #ef444433;border-radius:4px;margin-left:.25rem;padding:.05rem .25rem;font-size:.65rem;display:inline-block}.actions-col{justify-content:flex-end;gap:.5rem;display:flex}.no-data-state{text-align:center;color:var(--text-secondary);flex-direction:column;align-items:center;gap:1rem;padding:4rem 2rem;display:flex}.no-data-icon{width:48px;height:48px;color:var(--text-muted)}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#0b0f19cc;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-content{width:100%;max-width:500px;max-height:90vh;padding:2rem;position:relative;overflow-y:auto}.modal-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.modal-title{font-size:1.35rem;font-weight:700}.modal-close{color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:.25rem;display:flex}.modal-close:hover{color:var(--text-primary);background:#ffffff0d}.form-group{flex-direction:column;gap:.5rem;margin-bottom:1.25rem;display:flex}.form-label{color:var(--text-secondary);font-size:.85rem;font-weight:500}.form-input,.form-select{border:1px solid var(--card-border);color:var(--text-primary);transition:var(--transition-smooth);background:#0f172a99;border-radius:8px;outline:none;width:100%;padding:.75rem 1rem;font-size:.95rem}.form-input:focus,.form-select:focus{border-color:var(--accent-blue);box-shadow:0 0 10px #38bdf826}input[type=date]::-webkit-calendar-picker-indicator{filter:invert();cursor:pointer;opacity:.6;transition:var(--transition-smooth)}input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}.category-toggle-group{grid-template-columns:1fr 1fr;gap:.5rem;display:grid}.category-toggle-btn{border:1px solid var(--card-border);color:var(--text-secondary);cursor:pointer;text-align:center;transition:var(--transition-smooth);background:#0f172a66;border-radius:8px;padding:.75rem;font-size:.9rem;font-weight:600}.category-toggle-btn.active.sme{border-color:var(--accent-green);color:#34d399;background:#10b98126}.category-toggle-btn.active.large{border-color:var(--accent-blue);color:#38bdf8;background:#38bdf826}.category-toggle-btn:hover:not(.active){background:#ffffff0d}.form-preview-box{background:#0f172a66;border:1px dashed #ffffff1a;border-radius:8px;margin-top:.5rem;margin-bottom:1.5rem;padding:1rem}.preview-title{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.5rem;font-size:.75rem}.preview-row{justify-content:space-between;align-items:center;margin-bottom:.25rem;font-size:.85rem;display:flex}.preview-label{color:var(--text-secondary)}.preview-value{font-weight:700}.preview-value.points{color:var(--accent-gold)}.modal-footer{justify-content:flex-end;gap:.75rem;margin-top:2rem;display:flex}.desktop-only{display:block}.mobile-only{display:none}@media (width<=768px){.desktop-only{display:none}.mobile-only{display:block}.app-container{padding:1rem .75rem 2rem}.title-area h1{font-size:1.6rem}.header-top{flex-direction:column;align-items:flex-start;gap:.75rem}.header-actions{grid-template-columns:1fr 1fr;gap:.5rem;width:100%;display:grid}.header-actions .btn{width:100%;padding:.5rem;font-size:.85rem}.panel-header-actions{padding:1rem}.filter-bar{grid-template-columns:1fr 1fr;gap:.5rem;width:100%;margin-top:.5rem;display:grid}.filter-bar>div:first-child{grid-column:span 2}.filter-bar .filter-select{width:100%;height:36px;font-size:.8rem}.filter-bar button{height:36px;padding:.25rem .5rem;font-size:.8rem}.transaction-cards-list{flex-direction:column;gap:.75rem;padding:1rem;display:flex}.mobile-tx-card{border-radius:12px;flex-direction:column;gap:.75rem;padding:1rem;display:flex}.mobile-tx-header{border-bottom:1px solid #ffffff0d;justify-content:space-between;align-items:center;padding-bottom:.5rem;display:flex}.mobile-tx-date{color:var(--text-secondary);font-family:Outfit,sans-serif;font-size:.75rem}.mobile-tx-actions{gap:.5rem;display:flex}.mobile-tx-body{flex-direction:column;gap:.5rem;display:flex}.mobile-tx-store{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.mobile-tx-storename{font-size:.95rem;font-weight:700}.mobile-tx-details{justify-content:space-between;align-items:center;margin-top:.25rem;display:flex}.mobile-tx-service{align-items:center;display:flex}.mobile-tx-financials{text-align:right;align-items:center;gap:.75rem;display:flex}.mobile-tx-amount{color:var(--text-secondary);font-family:Outfit,sans-serif;font-size:.8rem}.mobile-tx-points{color:var(--accent-gold);font-family:Outfit,sans-serif;font-size:1.05rem;font-weight:800}.backup-panel{flex-direction:column;align-items:stretch!important;padding:1rem!important}.backup-panel>div:last-child{grid-template-columns:1fr 1fr;gap:.5rem;width:100%;display:grid}.backup-panel button{width:100%;padding:.5rem!important;font-size:.75rem!important}.backup-panel button:last-child{grid-column:span 2}.sync-panel{flex-direction:column!important;align-items:stretch!important;padding:1rem!important}.sync-controls{flex-direction:column;align-items:stretch;gap:.5rem;width:100%;display:flex}.sync-input-group{width:100%}.sync-code-input{flex:1;width:auto}.sync-controls button,.sync-controls>div{width:100%}.sync-controls>div>button{flex:1}}.management-container{flex-direction:column;gap:1.5rem;display:flex}.backup-panel,.sync-panel{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem;display:flex}.sync-panel-content{flex:1;min-width:280px}.sync-status-badge{letter-spacing:.02em;text-transform:uppercase;border-radius:4px;align-items:center;gap:.35rem;padding:.15rem .45rem;font-size:.7rem;font-weight:600;display:inline-flex}.sync-status-badge.syncing{color:var(--accent-blue);background:#38bdf81a;border:1px solid #38bdf833}.sync-status-badge.success{color:var(--accent-green);background:#10b9811a;border:1px solid #10b98133}.sync-status-badge.error{color:var(--accent-red);background:#ef44441a;border:1px solid #ef444433}.sync-status-badge.idle{color:var(--text-secondary);background:#ffffff0d;border:1px solid #ffffff14}.sync-badge{vertical-align:middle;background:#38bdf81a;border:1px solid #38bdf840;border-radius:50%;justify-content:center;align-items:center;width:22px;height:22px;margin-left:.5rem;display:inline-flex;box-shadow:0 0 8px #38bdf833}.sync-controls{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.sync-input-group{border:1px solid var(--card-border);height:38px;transition:var(--transition-smooth);background:#0f172a99;border-radius:8px;align-items:center;display:flex;overflow:hidden}.sync-input-group:focus-within{border-color:var(--accent-blue);box-shadow:0 0 0 2px var(--accent-blue-glow)}.sync-code-input{color:var(--text-primary);letter-spacing:.05em;background:0 0;border:none;outline:none;width:150px;padding:.5rem .75rem;font-family:Outfit,sans-serif;font-size:.9rem;font-weight:500}.sync-icon-btn{color:var(--text-secondary);cursor:pointer;transition:var(--transition-smooth);background:0 0;border:none;justify-content:center;align-items:center;height:100%;padding:.5rem;display:flex}.sync-icon-btn:hover{color:var(--text-primary);background:#ffffff0d}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spin{animation:1.5s linear infinite spin}
