:root{--bg-page:#f8fafc;--bg-card:#ffffff;--bg-card-gradient-start:#1d4ed8;--bg-card-gradient-end:#3b82f6;--primary:#2563eb;--primary-hover:#1d4ed8;--primary-light:#dbeafe;--primary-active:#1e40af;--primary-text:#1e40af;--primary-fixed:#2563eb;--primary-fixed-hover:#1d4ed8;--secondary:#64748b;--secondary-hover:#475569;--text-primary:#0f172a;--text-secondary:#64748b;--text-white:#ffffff;--text-white-90:rgba(255, 255, 255, 0.9);--text-white-80:rgba(255, 255, 255, 0.8);--text-white-70:rgba(255, 255, 255, 0.7);--text-white-95:rgba(255, 255, 255, 0.95);--text-input:#1a1a1a;--text-footer:#475569;--border:#e2e8f0;--shadow-sm:0 1px 2px rgba(0, 0, 0, 0.08),0 2px 4px rgba(0, 0, 0, 0.08);--shadow-md:0 4px 8px rgba(0, 0, 0, 0.12),0 2px 4px rgba(0, 0, 0, 0.08);--shadow-button:0 2px 8px rgba(0, 0, 0, 0.15);--shadow-progress:0 0 12px rgba(16, 185, 129, 0.5);--success:#10b981;--success-light:#34d399;--error:#ef4444;--error-hover:#dc2626;--item-bg:rgba(255, 255, 255, 0.25);--item-hover:rgba(255, 255, 255, 0.35);--focus-ring:0 0 0 3px rgba(37, 99, 235, 0.4);--btn-primary-bg:#ffffff;--btn-primary-text:#1d4ed8;--btn-primary-hover-bg:#f1f5f9;--btn-primary-hover-text:#1e40af;--btn-primary-shadow:0 1px 3px rgba(0, 0, 0, 0.05);--btn-primary-hover-shadow:0 4px 20px rgba(0, 0, 0, 0.08);--overlay-white-15:rgba(255, 255, 255, 0.15);--overlay-white-25:rgba(255, 255, 255, 0.25);--overlay-white-30:rgba(255, 255, 255, 0.3);--overlay-white-40:rgba(255, 255, 255, 0.4);--overlay-white-50:rgba(255, 255, 255, 0.5);--overlay-white-80:rgba(255, 255, 255, 0.8);--overlay-white-95:rgba(255, 255, 255, 0.95);--overlay-white-98:rgba(255, 255, 255, 0.98);--overlay-white-20:rgba(255, 255, 255, 0.2);--overlay-black-15:rgba(0, 0, 0, 0.15);--progress-bg:rgba(255, 255, 255, 0.2);--delete-bg:rgba(239, 68, 68, 0.1);--delete-hover-bg:rgba(239, 68, 68, 0.2);--placeholder:#64748b;--mobile-nav-bg:rgba(15, 23, 42, 0.95);--mobile-nav-border:rgba(255, 255, 255, 0.1);--mobile-nav-hover:rgba(255, 255, 255, 0.1);--mobile-nav-active-bg:rgba(37, 99, 235, 0.3);--mobile-nav-active-text:#60a5fa}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg-page:#0f172a;--bg-card:#1e293b;--bg-card-gradient-start:#1e3a8a;--bg-card-gradient-end:#3b82f6;--primary:#3b82f6;--primary-hover:#2563eb;--primary-light:#1e3a8a;--primary-active:#2563eb;--primary-text:#60a5fa;--secondary:#94a3b8;--secondary-hover:#cbd5e1;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-footer-dark:#94a3b8;--border:#334155;--shadow-sm:0 2px 4px rgba(0, 0, 0, 0.4),0 1px 2px rgba(0, 0, 0, 0.3);--shadow-md:0 4px 12px rgba(0, 0, 0, 0.5),0 2px 6px rgba(0, 0, 0, 0.4);--item-bg:rgba(30, 41, 59, 0.5);--item-hover:rgba(30, 41, 59, 0.6);--focus-ring:0 0 0 3px rgba(59, 130, 246, 0.5);--btn-secondary-bg:#475569;--btn-secondary-text:#f1f5f9;--btn-secondary-hover-bg:#334155;--mobile-nav-bg:rgba(15, 23, 42, 0.98);--footer-copyright-opacity:0.85}:root:not([data-theme=light]) .controls input{color:var(--text-primary);background:var(--overlay-white-98)}:root:not([data-theme=light]) .controls input::placeholder{color:var(--placeholder)}}:root[data-theme=dark]{--bg-page:#0f172a;--bg-card:#1e293b;--bg-card-gradient-start:#1e3a8a;--bg-card-gradient-end:#3b82f6;--primary:#3b82f6;--primary-hover:#2563eb;--primary-light:#1e3a8a;--primary-active:#2563eb;--primary-text:#60a5fa;--secondary:#94a3b8;--secondary-hover:#cbd5e1;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--text-footer-dark:#94a3b8;--border:#334155;--shadow-sm:0 2px 4px rgba(0, 0, 0, 0.4),0 1px 2px rgba(0, 0, 0, 0.3);--shadow-md:0 4px 12px rgba(0, 0, 0, 0.5),0 2px 6px rgba(0, 0, 0, 0.4);--item-bg:rgba(30, 41, 59, 0.5);--item-hover:rgba(30, 41, 59, 0.6);--focus-ring:0 0 0 3px rgba(59, 130, 246, 0.5);--btn-secondary-bg:#475569;--btn-secondary-text:#f1f5f9;--btn-secondary-hover-bg:#334155;--mobile-nav-bg:rgba(15, 23, 42, 0.98);--nav-active-bg:#2563eb;--nav-active-text:#ffffff;--footer-copyright-opacity:0.85}:root[data-theme=dark] .controls input{color:var(--text-primary);background:var(--overlay-white-98)}:root[data-theme=dark] .controls input::placeholder{color:var(--placeholder)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.skip-link{position:absolute;top:-40px;left:0;background:var(--primary);color:var(--text-white);padding:8px 16px;text-decoration:none;z-index:100;border-radius:0 0 4px 0}.skip-link:focus{top:0;outline:2px solid var(--primary);outline-offset:2px}:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}button:focus-visible,input:focus-visible{box-shadow:var(--focus-ring)}@keyframes slideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}@media (prefers-reduced-motion:reduce){*,::after,::before{animation-duration:0s!important;animation-iteration-count:1!important;transition-duration:0s!important}}*{box-sizing:border-box}html{height:100%;scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}body{display:flex;flex-direction:column;min-width:300px;min-height:100vh;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--text-primary);background:var(--bg-page);transition:background .3s ease,color .3s ease}main{flex:1;width:100%;max-width:500px;margin:0 auto;padding:20px;animation:slideIn .4s ease-out}@media (min-width:768px){main{max-width:900px;padding:30px 20px}}.btn{padding:12px 24px;border:0;border-radius:12px;font-size:15px;font-weight:600;color:var(--text-white);cursor:pointer;transition:all .2s ease;box-shadow:var(--shadow-sm)}.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-text);font-weight:700;box-shadow:var(--btn-primary-shadow)}.btn-primary:not(:disabled):focus-visible,.btn-primary:not(:disabled):hover{background:var(--btn-primary-hover-bg);color:var(--btn-primary-hover-text);box-shadow:var(--btn-primary-hover-shadow);transform:translateY(-1px)}.btn-primary:not(:disabled):active{transform:translateY(0);box-shadow:var(--shadow-sm)}.btn-secondary{background:var(--secondary)}.btn-secondary:not(:disabled):focus-visible,.btn-secondary:not(:disabled):hover{background:var(--secondary-hover);box-shadow:var(--shadow-md);transform:translateY(-1px)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .btn-secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text)}:root:not([data-theme=light]) .btn-secondary:not(:disabled):focus-visible,:root:not([data-theme=light]) .btn-secondary:not(:disabled):hover{background:var(--btn-secondary-hover-bg)}}:root[data-theme=dark] .btn-secondary{background:var(--btn-secondary-bg);color:var(--btn-secondary-text)}:root[data-theme=dark] .btn-secondary:not(:disabled):focus-visible,:root[data-theme=dark] .btn-secondary:not(:disabled):hover{background:var(--btn-secondary-hover-bg)}.btn:disabled{background:var(--border);cursor:not-allowed;opacity:.6}.quick-add{margin-bottom:20px}.quick-add-label{margin:0 0 12px 0;font-size:14px;font-weight:600;color:var(--text-white-90)}.quick-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.btn-quick{padding:12px 8px;border:2px solid var(--overlay-white-30);border-radius:12px;font-size:14px;font-weight:600;color:var(--text-white);background:var(--overlay-white-15);cursor:pointer;transition:all .2s ease}.btn-quick:focus-visible,.btn-quick:hover{background:var(--overlay-white-25);border-color:var(--overlay-white-50);transform:translateY(-2px);box-shadow:var(--shadow-button)}.btn-quick:active{transform:scale(.95);box-shadow:none}@media (max-width:400px){.quick-buttons{grid-template-columns:repeat(2,1fr);gap:10px}.btn-quick{padding:14px 10px;font-size:15px}}.show-stats-button{width:100%;height:48px;white-space:normal;line-height:1.3;padding:12px 20px;border:2px solid var(--overlay-white-30);border-radius:12px;font-size:15px;font-weight:600;color:var(--text-white);background:var(--overlay-white-15);cursor:pointer;transition:all .2s ease;box-shadow:none}.show-stats-button:focus-visible,.show-stats-button:hover{background:var(--overlay-white-25);border-color:var(--overlay-white-50);transform:translateY(-2px);box-shadow:var(--shadow-button)}.show-stats-button:active{transform:scale(.98);box-shadow:none}.custom-add-label{margin:0 0 12px 0;font-size:14px;font-weight:600;color:var(--text-white-90)}.controls{display:flex;flex-direction:column;gap:12px;margin:0 0 16px 0}.controls input{width:100%;height:48px;padding:0 16px;border:2px solid var(--overlay-white-30);border-radius:12px;font-size:16px;color:var(--text-input);background:var(--overlay-white-95);transition:all .2s ease}.controls input::-webkit-inner-spin-button,.controls input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.controls input[type=number]{-moz-appearance:textfield}.controls input::placeholder{color:var(--placeholder)}.controls input:focus{outline:0;border-color:var(--overlay-white-80);background:var(--text-white);box-shadow:var(--focus-ring)}.controls input.show-validation:invalid,.controls input:invalid:not(:placeholder-shown){border-color:var(--error)}.controls button{width:100%;height:48px}@media (min-width:500px){.controls{flex-direction:row}.controls input{flex:1;min-width:120px;width:auto}.controls button{min-width:120px;width:auto;flex-shrink:0}}.amount-display{display:flex;align-items:baseline;gap:8px;margin-bottom:20px}.amount{font-size:64px;font-weight:800;color:var(--text-white);line-height:1;letter-spacing:-.02em;transition:transform .2s ease}.amount.updated{animation:pulse .4s ease}.amount-unit{font-size:24px;font-weight:500;color:var(--text-white-80)}.progress-wrapper{margin-bottom:24px}.progress-bar-container{width:100%;height:12px;background:var(--progress-bg);border-radius:12px;overflow:hidden;margin-bottom:12px}.progress-bar{height:100%;background:linear-gradient(90deg,var(--success) 0,var(--success-light) 100%);border-radius:12px;transition:width .5s ease;box-shadow:var(--shadow-progress)}.progress-info{display:flex;justify-content:space-between;align-items:center;font-size:14px}.progress-text{font-weight:600;color:var(--text-white-95)}.daily-goal{color:var(--text-white-70)}.stats-block{display:none}.stats-block.shown{display:block;animation:slideIn .3s ease-out}@media (max-width:780px){.stats-block:not(.shown) *{visibility:hidden}}.stats-block .title{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--text-white-90)}.stats-list{list-style:none;max-height:280px;margin:0;padding:0;padding-right:8px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--overlay-white-30) transparent}.stats-list::-webkit-scrollbar{width:8px}.stats-list::-webkit-scrollbar-track{background:0 0}.stats-list::-webkit-scrollbar-thumb{background:var(--overlay-white-30);border-radius:10px}.stats-list::-webkit-scrollbar-thumb:hover{background:var(--overlay-white-40)}.stats-block .item{display:flex;align-items:center;gap:12px;padding:16px;margin-bottom:8px;background:var(--item-bg);backdrop-filter:blur(10px);border-radius:12px;transition:all .2s ease;animation:slideIn .3s ease-out}.stats-block .item:focus-within,.stats-block .item:hover{background:var(--item-hover);transform:translateX(4px)}.item-content{display:flex;align-items:baseline;gap:4px}.stats-amount{font-size:20px;font-weight:700;color:var(--text-white)}.stats-unit{font-size:14px;font-weight:500;color:var(--text-white-80)}.stats-block .item time{margin-left:auto;font-size:14px;font-weight:500;color:var(--text-white-70)}.delete-stats-button{position:relative;width:36px;height:36px;padding:0;border:0;border-radius:50%;font-size:0;background:var(--delete-bg);cursor:pointer;transition:all .2s ease;flex-shrink:0}.delete-stats-button:focus-visible,.delete-stats-button:hover{background:var(--delete-hover-bg);transform:scale(1.1)}.delete-stats-button:active{transform:scale(.95)}.delete-stats-button::after,.delete-stats-button::before{position:absolute;top:50%;left:50%;content:'';width:16px;height:2px;border-radius:1px;background-color:var(--error);transition:background-color .2s ease}.delete-stats-button::before{transform:translate(-50%,-50%) rotate(45deg)}.delete-stats-button::after{transform:translate(-50%,-50%) rotate(-45deg)}.delete-stats-button:hover::after,.delete-stats-button:hover::before{background-color:var(--error-hover)}.drink-water{display:grid;grid-template-columns:1fr;gap:24px;width:100%;padding:32px 20px;background:linear-gradient(135deg,var(--bg-card-gradient-start) 0,var(--bg-card-gradient-end) 100%);box-shadow:none;animation:slideIn .5s ease-out}@media (max-width:599px){main{padding:0}.drink-water{border-radius:0}}@media (min-width:600px){.drink-water{margin:0;padding:32px 28px;border-radius:24px}}.add-block h1{margin:0 0 24px 0;font-size:18px;font-weight:600;color:var(--text-white-90);letter-spacing:-.01em}.header{width:100%;background:var(--bg-card);border-bottom:1px solid var(--border);box-shadow:var(--shadow-sm);position:relative;z-index:999}.header-container{display:flex;align-items:center;justify-content:space-between;max-width:1200px;margin:0 auto;padding:16px 20px;gap:20px}.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text-primary);font-weight:700;font-size:20px;transition:opacity .2s}.logo:hover{opacity:.8}.logo-icon{width:24px;height:24px;flex-shrink:0}.logo-text{display:none}@media (min-width:500px){.logo-text{display:inline}}.nav{display:none;gap:8px}@media (min-width:781px){.nav{display:flex}}.nav-link{padding:8px 16px;border-radius:8px;text-decoration:none;color:var(--text-primary);font-size:15px;font-weight:500;transition:all .2s}.nav-link:hover{background:var(--border)}.nav-link.active{background:var(--primary-fixed);color:var(--text-white);cursor:default}.nav-link.active:hover{background:var(--primary-fixed)}.header-controls{display:flex;align-items:center;gap:12px}.icon-button{width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:8px;background:0 0;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;font-size:18px}.icon-button:hover{background:var(--border)}.language-selector{position:relative}.language-button{padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:0 0;color:var(--text-primary);font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:4px}.language-button:hover{background:var(--border)}.arrow{font-size:10px;transition:transform .2s}.language-button[aria-expanded=true] .arrow{transform:rotate(180deg)}.language-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:160px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow-md);padding:4px;z-index:1000}.language-option{width:100%;padding:10px 12px;border:none;border-radius:6px;background:0 0;color:var(--text-primary);font-size:14px;text-align:left;cursor:pointer;transition:background .2s}.language-option:hover{background:var(--border)}.mobile-menu-toggle{display:flex;flex-direction:column;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--border);border-radius:8px;background:0 0;cursor:pointer;transition:all .2s}@media (min-width:781px){.mobile-menu-toggle{display:none}}.hamburger{position:relative;width:20px;height:2px;background:var(--text-primary);margin:0 auto;transition:all .3s}.hamburger::after,.hamburger::before{content:'';position:absolute;left:0;width:20px;height:2px;background:var(--text-primary);transition:all .3s}.hamburger::before{top:-6px}.hamburger::after{bottom:-6px}.mobile-menu-toggle[aria-expanded=true] .hamburger{background:0 0}.mobile-menu-toggle[aria-expanded=true] .hamburger::before{top:0;transform:rotate(45deg)}.mobile-menu-toggle[aria-expanded=true] .hamburger::after{bottom:0;transform:rotate(-45deg)}.mobile-nav{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;padding-top:73px;background:var(--mobile-nav-bg);backdrop-filter:blur(10px);z-index:998;overflow-y:auto}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .mobile-nav{background:var(--mobile-nav-bg)}}:root[data-theme=dark] .mobile-nav{background:var(--mobile-nav-bg)}.mobile-nav[hidden]{display:none}@media (min-width:781px){.mobile-nav{display:none!important}}.mobile-nav-link{padding:20px;border-bottom:1px solid var(--mobile-nav-border);text-decoration:none;color:var(--text-white);font-size:18px;font-weight:500;transition:background .2s;text-align:center}.mobile-nav-link:hover{background:var(--mobile-nav-hover)}.mobile-nav-link.active{background:var(--mobile-nav-active-bg);color:var(--mobile-nav-active-text);font-weight:600;cursor:default}.info-section{width:100%;max-width:1200px;margin:0 auto;padding:32px 20px 24px;border-top:1px solid rgba(100,116,139,.2);text-align:center}.info-item{margin:8px 0;font-size:14px;color:var(--text-secondary)}.footer-links{display:flex;justify-content:center;align-items:center;gap:12px;margin:16px 0 8px 0;flex-wrap:wrap}.footer-link{font-size:14px;color:var(--text-secondary);text-decoration:none;transition:color .2s}.footer-link:hover{color:var(--primary);text-decoration:underline}.footer-separator{color:var(--text-secondary);opacity:.5}.footer-copyright{margin:8px 0 0 0;font-size:13px;color:var(--text-footer)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .footer-copyright{color:var(--text-secondary);opacity:var(--footer-copyright-opacity)}}:root[data-theme=dark] .footer-copyright{color:var(--text-secondary);opacity:var(--footer-copyright-opacity)}@media (min-width:781px){main{max-width:900px}.drink-water{grid-template-columns:380px 1fr;gap:48px;padding:40px 36px}.show-stats-button{display:none}.stats-block{display:block!important}.stats-list{max-height:380px}.amount{font-size:72px}}.page-container{max-width:800px;padding:40px 20px}@media (max-width:599px){.page-container{padding:0}}.page-title{margin:0 0 32px 0;font-size:32px;font-weight:800;color:var(--text-primary);text-align:center;letter-spacing:-.02em}@media (max-width:599px){.page-title{font-size:24px;margin-bottom:24px}}.about-content{background:var(--bg-card);border-radius:24px;padding:40px 28px;box-shadow:var(--shadow-md)}@media (max-width:599px){.about-content{border-radius:0;box-shadow:none;padding:32px 20px}}.about-section{margin-bottom:36px;padding-bottom:36px;border-bottom:1px solid var(--border)}.about-section:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:none}.section-title{margin:0 0 16px 0;font-size:22px;font-weight:700;color:var(--text-primary);line-height:1.3}@media (max-width:599px){.section-title{font-size:20px}}.section-text{margin:0 0 16px 0;font-size:16px;line-height:1.7;color:var(--text-primary)}.section-text:last-child{margin-bottom:0}.section-text strong{font-weight:600;color:var(--primary-text)}.about-link{color:var(--primary-text);text-decoration:none;font-weight:600;transition:color .2s}.about-link:hover{color:var(--primary-hover);text-decoration:underline}.about-warning{background:var(--primary-light);border-radius:16px;padding:24px;border-bottom:none}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .about-warning{background:var(--primary-light)}}:root[data-theme=dark] .about-warning{background:var(--primary-light)}.about-warning .section-title{color:var(--text-primary)}.about-warning .section-text{color:var(--text-primary)}.about-warning .section-text strong{color:var(--text-primary);font-weight:700}.future-feature{margin-top:20px;padding:16px;background:var(--bg-card);border-radius:12px;border-left:4px solid var(--primary)}.feature-label{margin:0 0 8px 0;font-size:14px;font-weight:700;color:var(--text-primary);text-transform:uppercase;letter-spacing:.05em}.future-feature .section-text{margin-bottom:0;font-size:15px}.install-links{display:flex;flex-direction:column;gap:12px;margin-top:20px}.install-link{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--bg-page);border-radius:12px;color:var(--text-primary);text-decoration:none;font-weight:600;font-size:15px;transition:background .2s,box-shadow .2s}.install-link:hover{background:var(--primary-light);box-shadow:var(--shadow-sm)}.install-link-icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--primary-light);border-radius:10px;color:var(--primary);flex-shrink:0}.install-link:hover .install-link-icon{background:var(--primary);color:var(--text-white)}.install-guide .page-title{margin-bottom:8px}.back-link{display:inline-block;margin-bottom:24px;color:var(--text-secondary);text-decoration:none;font-size:14px;font-weight:500;transition:color .2s}.back-link:hover{color:var(--primary-text)}.install-intro{margin-bottom:32px;font-size:17px}.install-steps{list-style:none;counter-reset:step;padding:0;margin:0 0 36px 0}.install-step{counter-increment:step;position:relative;padding:0 0 32px 56px;border-left:2px solid var(--border);margin-left:16px}.install-step:last-child{border-left-color:transparent;padding-bottom:0}.install-step::before{content:counter(step);position:absolute;left:-17px;top:0;width:32px;height:32px;background:var(--primary);color:var(--text-white);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;line-height:1}.step-title{margin:0 0 8px 0;font-size:17px;font-weight:700;color:var(--text-primary);line-height:32px}.install-step .section-text{margin-bottom:12px;font-size:15px}.install-step .section-text:last-child{margin-bottom:0}.install-screenshot{display:block;max-width:280px;margin-top:16px;border-radius:12px;box-shadow:var(--shadow-md)}.install-note{padding:24px;background:var(--primary-light);border-radius:16px}.install-note .section-title{margin-bottom:12px}.install-note .section-text{font-size:15px}.install-method{margin-bottom:28px}.install-method .section-title{margin-bottom:12px;font-size:18px}@media (max-width:599px){.install-step{padding-left:44px}.install-screenshot{max-width:100%}}.settings-page{position:relative}.settings-content{background:var(--bg-card);border-radius:24px;padding:40px 28px;box-shadow:var(--shadow-md)}@media (max-width:599px){.settings-content{border-radius:0;box-shadow:none;padding:32px 20px}}.settings-section{margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--border)}.settings-section:last-of-type{margin-bottom:0;border-bottom:none}.setting-label{display:flex;align-items:center;gap:8px;margin:0 0 16px 0;font-size:20px;font-weight:700;color:var(--text-primary)}.setting-icon{font-size:24px}.setting-description{margin:0 0 20px 0;font-size:15px;color:var(--text-secondary);line-height:1.5}.setting-control{display:flex;gap:12px;align-items:flex-start}@media (max-width:500px){.setting-control{flex-direction:column;width:100%}}.input-with-unit{position:relative;display:flex;align-items:center;flex:1;max-width:200px}@media (max-width:500px){.input-with-unit{max-width:100%;width:100%}}.setting-input{width:100%;height:48px;padding:0 50px 0 16px;border:2px solid var(--border);border-radius:12px;font-size:16px;font-weight:600;color:var(--text-primary);background:var(--bg-card);transition:all .2s ease}.setting-input:hover{border-color:var(--primary)}.setting-input:focus{outline:0;border-color:var(--primary);box-shadow:var(--focus-ring)}.setting-input::-webkit-inner-spin-button,.setting-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.setting-input[type=number]{-moz-appearance:textfield}.input-unit{position:absolute;right:16px;font-size:14px;font-weight:600;color:var(--text-secondary);pointer-events:none}.btn-small{padding:12px 24px;height:48px}@media (max-width:500px){.btn-small{width:100%}}.quick-buttons-settings{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px}@media (max-width:500px){.quick-buttons-settings{grid-template-columns:1fr}}.quick-button-setting{display:flex;flex-direction:column;gap:8px}.quick-button-setting .input-with-unit{max-width:100%}.quick-btn-label{font-size:14px;font-weight:600;color:var(--text-primary)}#save-quick-buttons{width:100%}.settings-page .btn-primary{background:var(--primary-fixed);color:var(--text-white);box-shadow:var(--shadow-sm);height:48px;padding:12px 24px}.settings-page .btn-primary:not(:disabled):focus-visible,.settings-page .btn-primary:not(:disabled):hover{background:var(--primary-fixed-hover);color:var(--text-white);box-shadow:var(--shadow-md)}.settings-page .btn-secondary{height:48px;padding:12px 24px}.settings-danger{background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.2);border-radius:12px;padding:24px}.settings-danger .setting-description{color:var(--text-primary)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .settings-danger{background:rgba(239,68,68,.1)}}:root[data-theme=dark] .settings-danger{background:rgba(239,68,68,.1)}.settings-notification{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:16px 24px;background:var(--success);color:var(--text-white);border-radius:12px;box-shadow:0 4px 20px rgba(16,185,129,.3);font-weight:600;z-index:1000;animation:slideInUp .3s ease-out}.settings-notification[hidden]{display:none}.notification-icon{font-size:20px}@keyframes slideInUp{from{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%,0)}}.stats-page{max-width:1000px}.stats-content{background:var(--bg-card);border-radius:24px;padding:32px 24px 24px;box-shadow:var(--shadow-md)}@media (max-width:599px){.stats-content{border-radius:0;box-shadow:none;padding:24px 20px 20px}}.period-selector{display:flex;gap:8px;justify-content:center;margin-bottom:20px;padding:4px;background:var(--border);border-radius:12px}@media (max-width:599px){.period-selector{margin-bottom:16px}}.period-button{flex:1;max-width:150px;padding:10px 16px;border:none;border-radius:8px;font-size:14px;font-weight:600;color:var(--text-period-button,#475569);background:0 0;cursor:pointer;transition:all .2s ease}.period-button:hover{color:var(--text-primary);background:rgba(0,0,0,.02)}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .period-button{--text-period-button:#c8d2dc}:root:not([data-theme=light]) .period-button:hover{background:rgba(255,255,255,.05)}}:root[data-theme=dark] .period-button{--text-period-button:#c8d2dc}:root[data-theme=dark] .period-button:hover{background:rgba(255,255,255,.05)}.period-button.active{color:var(--text-white);background:var(--primary-fixed)}.period-button.active:hover{background:var(--primary-fixed-hover)}.month-selector{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px}@media (max-width:599px){.month-selector{flex-direction:column;gap:8px;margin-bottom:16px}}.month-selector[hidden]{display:none}.month-selector-label{font-size:14px;font-weight:600;color:var(--text-primary)}.month-select{padding:8px 12px;border:2px solid var(--border);border-radius:8px;font-size:14px;font-weight:500;color:var(--text-primary);background:var(--bg-card);cursor:pointer;transition:all .2s ease;min-width:200px}@media (max-width:599px){.month-select{width:100%}}.month-select:hover{border-color:var(--primary-fixed)}.month-select:focus{outline:0;border-color:var(--primary-fixed);box-shadow:var(--focus-ring)}.main-metric{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px 20px;margin-bottom:20px;background:linear-gradient(135deg,var(--bg-card-gradient-start) 0,var(--bg-card-gradient-end) 100%);border-radius:16px}@media (max-width:599px){.main-metric{padding:20px 16px;margin-bottom:16px}}.main-metric-content{display:flex;flex-direction:column;align-items:center;gap:4px}.main-metric-label{font-size:14px;font-weight:500;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.05em}.main-metric-value{display:flex;align-items:baseline;gap:6px;font-size:42px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em}@media (max-width:599px){.main-metric-value{font-size:36px}}.main-metric-unit{font-size:18px;font-weight:600;color:rgba(255,255,255,.8)}.chart-container{position:relative;margin-bottom:0}.chart-header{margin-bottom:12px}.chart-title{margin:0;font-size:18px;font-weight:700;color:var(--text-primary)}.chart-wrapper{position:relative;width:100%;background:var(--bg-page);border-radius:12px;padding:16px;margin-bottom:8px}@media (max-width:768px){.chart-wrapper{padding:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}.chart-wrapper::-webkit-scrollbar{height:6px}.chart-wrapper::-webkit-scrollbar-track{background:var(--border);border-radius:3px}.chart-wrapper::-webkit-scrollbar-thumb{background:var(--text-secondary);border-radius:3px}}.chart{width:100%;height:auto;display:block}@media (max-width:768px){.chart{width:750px;min-width:750px}}.chart-note{margin:0;font-size:13px;color:var(--text-secondary);text-align:center}.chart-tooltip{position:absolute;padding:8px 12px;background:#e2e8f0;color:#1e293b;border-radius:6px;font-size:13px;font-weight:600;pointer-events:none;white-space:pre-line;z-index:10;box-shadow:var(--shadow-sm);max-width:250px;line-height:1.4}.chart-tooltip::after{content:'';position:absolute;top:100%;left:var(--arrow-left,50%);transform:translateX(-50%);border:5px solid transparent;border-top-color:#e2e8f0}.chart-tooltip.tooltip-below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:#e2e8f0}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .chart-tooltip{background:#334155;color:#f1f5f9;box-shadow:var(--shadow-md)}:root:not([data-theme=light]) .chart-tooltip::after{border-top-color:#334155}:root:not([data-theme=light]) .chart-tooltip.tooltip-below::after{border-top-color:transparent;border-bottom-color:#334155}}:root[data-theme=dark] .chart-tooltip{background:#334155;color:#f1f5f9;box-shadow:var(--shadow-md)}:root[data-theme=dark] .chart-tooltip::after{border-top-color:#334155}:root[data-theme=dark] .chart-tooltip.tooltip-below::after{border-top-color:transparent;border-bottom-color:#334155}.chart-tooltip[hidden]{display:none}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 20px;text-align:center}.empty-state[hidden]{display:none}.empty-icon{font-size:64px;margin-bottom:16px}.empty-title{margin:0 0 8px 0;font-size:20px;font-weight:700;color:var(--text-primary)}.empty-text{margin:0 0 24px 0;font-size:15px;color:var(--text-secondary)}