:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--bg-top: #fdf6f9;--bg-bottom: #f8f4ff;--panel: rgba(255, 255, 255, .92);--panel-solid: #ffffff;--panel-border: rgba(220, 214, 255, .72);--text-main: #6e6e92;--text-strong: #69668f;--text-soft: #a8a8c5;--text-muted: #b5b5d6;--heading: #8e8dbf;--lavender: #dcd6ff;--lavender-hover: #c8c0ff;--lavender-soft: #f3eaff;--pink-soft: #ffdce5;--pink-soft-hover: #ffc9d8;--card-shadow: 0 10px 24px rgba(180, 170, 255, .12);--panel-shadow: 0 8px 22px rgba(180, 170, 255, .1)}*{box-sizing:border-box}html,body{min-width:320px;min-height:100vh}body{margin:0;position:relative;background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-bottom) 100%);overflow-x:hidden}body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.25;background-image:url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23d9d2ff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='90' cy='94' r='22'/%3E%3Ccircle cx='74' cy='75' r='8'/%3E%3Ccircle cx='106' cy='75' r='8'/%3E%3Ccircle cx='83' cy='92' r='1.7' fill='%23d9d2ff'/%3E%3Ccircle cx='97' cy='92' r='1.7' fill='%23d9d2ff'/%3E%3Cpath d='M90 98c4 0 7 3 7 6 0 4-3 7-7 7s-7-3-7-7c0-3 3-6 7-6z'/%3E%3Cpath d='M84 112c2 2 4 3 6 3s4-1 6-3'/%3E%3C/g%3E%3C/svg%3E");background-size:180px 180px;background-repeat:repeat;background-position:center top;z-index:0}#root{min-height:100vh;display:flex;justify-content:center;align-items:center;position:relative;z-index:1}.container{max-width:980px;width:100%;padding:30px}header{text-align:center;margin-bottom:30px}header h1{margin:0;font-size:2.25rem;font-weight:700;letter-spacing:-.02em;color:var(--heading)}header p{margin-top:8px;font-size:.96rem;color:var(--text-soft)}.summary-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:24px}.summary-card{background:var(--panel);border:1px solid var(--panel-border);padding:18px;border-radius:18px;box-shadow:var(--card-shadow);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative;overflow:hidden}.summary-card:after{content:"";position:absolute;inset:0 auto auto 0;width:100%;height:4px;background:linear-gradient(90deg,#e7ddff,#f5dfe8)}.summary-card h3{margin:0 0 10px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9c98c7}.summary-card p{margin:0;font-size:1.12rem;font-weight:700;color:var(--text-strong);line-height:1.35;word-break:break-word}.add-item{display:flex;gap:10px;margin-bottom:30px;flex-wrap:wrap}input{flex:1;min-width:180px;padding:12px 14px;border-radius:14px;border:1px solid transparent;background-color:var(--lavender-soft);outline:none;font-size:.95rem;color:#5a5a6a;transition:border-color .2s ease,background-color .2s ease}input:focus{border-color:#d8cfff;background-color:#f8f5ff}input::placeholder{color:var(--text-muted)}button{padding:12px 16px;border-radius:14px;border:none;background-color:var(--lavender);color:#5a5a6a;font-weight:600;cursor:pointer;transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease}button:hover{background-color:var(--lavender-hover);transform:translateY(-1px);box-shadow:0 8px 16px #b4aaff24}.dashboard h2,.chart-placeholder h2{font-size:1rem;font-weight:700;color:var(--heading);margin-bottom:14px;letter-spacing:.01em}.dashboard ul{list-style:none;padding:0;margin:0}.dashboard li{background-color:var(--panel-solid);border-radius:18px;padding:16px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:14px;box-shadow:var(--panel-shadow);border:1px solid rgba(237,231,255,.85);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.dashboard li:hover{transform:translateY(-1px);box-shadow:0 12px 24px #b4aaff24}.active-item{border-color:#d9d0ff;box-shadow:0 12px 24px #b4aaff29;outline:none}.item-main{flex:1;cursor:pointer}.item-text{display:flex;flex-direction:column;gap:4px;color:var(--text-main)}.item-text strong{font-size:1rem;color:#6a678d}.item-text span{font-size:.96rem;font-weight:700;color:#7f7cad}.item-text small{display:block;font-size:.8rem;color:var(--text-soft)}.item-main>small{color:var(--text-soft);display:inline-block;margin-top:8px}.item-actions{display:flex;gap:8px;flex-wrap:wrap}.delete-btn{background-color:var(--pink-soft)}.delete-btn:hover{background-color:var(--pink-soft-hover)}.chart-placeholder{margin-top:24px}.chart-box,.empty-box{background-color:var(--panel-solid);border-radius:20px;padding:20px;box-shadow:var(--panel-shadow);border:1px solid rgba(237,231,255,.85)}.chart-header{display:flex;justify-content:space-between;align-items:center;color:#7f7cad;margin-bottom:12px;gap:10px;flex-wrap:wrap}.chart-area{width:100%;height:280px}.history-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}.history-item{display:flex;justify-content:space-between;background-color:#faf7ff;border-radius:14px;padding:10px 12px;color:#7f7cad;border:1px solid rgba(237,231,255,.9)}.empty-box{color:var(--text-soft)}@media(max-width:760px){.summary-grid{grid-template-columns:1fr}}@media(max-width:640px){.container{padding:20px}header h1{font-size:2rem}.dashboard li{flex-direction:column;align-items:flex-start}.item-actions{width:100%}body:before{background-size:140px 140px;opacity:.18}}