:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #0b0d0b; color: #f4eee1; }
body[data-theme="mobile-lab"] .meter-card, body[data-theme="mobile-lab"] .faq details, body[data-theme="mobile-lab"] .try-form, body[data-theme="mobile-lab"] .try-result, body[data-theme="mobile-lab"] .guide .card { border-color: #348dc1; background: rgb(8 28 43 / .92); } body[data-theme="mobile-lab"] .meter-card p, body[data-theme="mobile-lab"] .faq p, body[data-theme="mobile-lab"] .try-result p, body[data-theme="mobile-lab"] .section-title p { color: #b8d6e4; } body[data-theme="mobile-lab"] .meter-card h3, body[data-theme="mobile-lab"] .faq summary, body[data-theme="mobile-lab"] .guide .card h2, body[data-theme="mobile-lab"] .quick-measure h3, body[data-theme="mobile-lab"] .interval-comparison-card h2 { color: #f2fbff; } body[data-theme="mobile-lab"] .meter-kind, body[data-theme="mobile-lab"] .meter-tags span { color: #b7f5df; border-color: #2f8e74; background: #0b332d; } body[data-theme="mobile-lab"] .guide-key code { color: #d8fff0; border-color: #2f8e74; background: #08251f; } body[data-theme="mobile-lab"] .faq details[open] summary { border-color: #348dc1; } body[data-theme="mobile-lab"] .faq summary::after { color: #6be5c1; }
@media (max-width: 780px) { body[data-theme="mobile-lab"] .shell { width: min(100% - 1rem, 1180px); } body[data-theme="mobile-lab"] header { gap: .8rem; padding: 1rem 0; } body[data-theme="mobile-lab"] nav { width: 100%; } body[data-theme="mobile-lab"] nav a { flex: 1 1 auto; min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; } body[data-theme="mobile-lab"] main { padding: 1.5rem 0 2.5rem; } body[data-theme="mobile-lab"] .card, body[data-theme="mobile-lab"] .meter-card-body, body[data-theme="mobile-lab"] .comparison-chart { padding: 1rem; } body[data-theme="mobile-lab"] .content, body[data-theme="mobile-lab"] .meter-catalogue, body[data-theme="mobile-lab"] .consumption-cards, body[data-theme="mobile-lab"] .cost-cards { grid-template-columns: 1fr; } body[data-theme="mobile-lab"] .quick-measure-form, body[data-theme="mobile-lab"] .cost-form, body[data-theme="mobile-lab"] .cost-rate-dates, body[data-theme="mobile-lab"] .comparison-range-form { grid-template-columns: 1fr; } body[data-theme="mobile-lab"] button, body[data-theme="mobile-lab"] .range-buttons button, body[data-theme="mobile-lab"] .chart-actions button { min-height: 2.75rem; } body[data-theme="mobile-lab"] .chart-wrap, body[data-theme="mobile-lab"] .comparison-wrap { overflow-x: auto; padding-bottom: .35rem; } body[data-theme="mobile-lab"] .chart-wrap svg, body[data-theme="mobile-lab"] .comparison-wrap svg { min-width: 650px; } }
@media (max-width: 780px) { body[data-theme="mobile-lab"] button, body[data-theme="mobile-lab"] a.secondary, body[data-theme="mobile-lab"] .range-buttons button, body[data-theme="mobile-lab"] .chart-actions button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; line-height: 1.15; } body[data-theme="mobile-lab"] .chart-actions, body[data-theme="mobile-lab"] .range-buttons, body[data-theme="mobile-lab"] .dialog-actions { justify-content: stretch; } body[data-theme="mobile-lab"] .chart-actions button, body[data-theme="mobile-lab"] .range-buttons button { flex: 1 1 8.5rem; } }
/* Motyw roboczy do testowania ekranów telefonów. */
body[data-theme="mobile-lab"] { color-scheme: dark; color: #eefaff; background: radial-gradient(circle at 85% 5%, #154a75 0, transparent 28rem), radial-gradient(circle at 4% 24%, #24402c 0, transparent 25rem), #07131e; } body[data-theme="mobile-lab"] .card, body[data-theme="mobile-lab"] .consumption-card, body[data-theme="mobile-lab"] .cost-card, body[data-theme="mobile-lab"] .comparison-chart { border-color: #348dc1; background: rgb(8 28 43 / .92); } body[data-theme="mobile-lab"] .intro p, body[data-theme="mobile-lab"] .card p, body[data-theme="mobile-lab"] .muted, body[data-theme="mobile-lab"] .consumption-metrics span, body[data-theme="mobile-lab"] .cost-metrics span, body[data-theme="mobile-lab"] .comparison-chart p { color: #b8d6e4; } body[data-theme="mobile-lab"] .brand, body[data-theme="mobile-lab"] .chart-head h2, body[data-theme="mobile-lab"] .consumption-heading h2, body[data-theme="mobile-lab"] .consumption-card h3, body[data-theme="mobile-lab"] .comparison-chart h2 { color: #f2fbff; } body[data-theme="mobile-lab"] .brand span, body[data-theme="mobile-lab"] .eyebrow, body[data-theme="mobile-lab"] .meter-card a { color: #6be5c1; } body[data-theme="mobile-lab"] nav a, body[data-theme="mobile-lab"] .meter-choice { color: #d2edf8; border-color: #3b8db8; } body[data-theme="mobile-lab"] .chart-controls select, body[data-theme="mobile-lab"] .cost-form input, body[data-theme="mobile-lab"] .range-dialog input, body[data-theme="mobile-lab"] .quick-measure-form input, body[data-theme="mobile-lab"] .comparison-range-form input, body[data-theme="mobile-lab"] .interval-comparison-form input, body[data-theme="mobile-lab"] .specific-day-form input { color: #effbff; border-color: #3b8db8; background: #092235; } body[data-theme="mobile-lab"] .range-dialog { color: #eefaff; border-color: #3b8db8; background: #0a2436; } body[data-theme="mobile-lab"] .range-buttons button, body[data-theme="mobile-lab"] .comparison-range-form button.secondary { color: #dff7ff; border-color: #3b8db8; background: #123a55; } body[data-theme="mobile-lab"] .range-buttons button.active, body[data-theme="mobile-lab"] .dialog-actions button, body[data-theme="mobile-lab"] .quick-measure-form button, body[data-theme="mobile-lab"] .comparison-range-form button:not(.secondary), body[data-theme="mobile-lab"] .interval-comparison-form button, body[data-theme="mobile-lab"] .specific-day-form button { color: #07131e; border-color: #6be5c1; background: #6be5c1; } body[data-theme="mobile-lab"] .chart-wrap text, body[data-theme="mobile-lab"] .comparison-wrap text { fill: #b8d6e4; } body[data-theme="mobile-lab"] .chart-grid .grid-line, body[data-theme="mobile-lab"] .comparison-grid-line { stroke: #245c78; } body[data-theme="mobile-lab"] .chart-grid .time-line { stroke: #1f526d; } body[data-theme="mobile-lab"] .axis, body[data-theme="mobile-lab"] .comparison-axis { stroke: #639fbc; }
* { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 22% 4%, #2c2114 0, transparent 30rem), #0b0d0b; }
.shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; } header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; }
.brand { color: #f1dfbd; font-size: 1.35rem; font-weight: 850; letter-spacing: -.04em; text-decoration: none; }.brand span, .eyebrow { color: #d3a65c; }
nav { display: flex; flex-wrap: wrap; justify-content: end; gap: .45rem; } nav a { padding: .5rem .75rem; border: 1px solid #48483f; border-radius: 999px; color: #dfd7c7; font-size: .84rem; font-weight: 700; text-decoration: none; } nav a:hover, nav a.active { border-color: #d3a65c; color: #f4eee1; background: #24241e; }
main { padding: clamp(2rem, 7vw, 6rem) 0; }.eyebrow { font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .75rem; }.intro { max-width: 50rem; margin-bottom: 2rem; }.intro h1 { margin: .6rem 0 1rem; font-size: clamp(2.8rem, 8vw, 6rem); letter-spacing: -.075em; }.intro p, .card p { color: #c8c1b2; line-height: 1.65; }
.content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }.card { padding: 1.35rem; border: 1px solid #3d3c34; border-radius: 16px; background: rgb(22 24 20 / .84); box-shadow: 0 1.2rem 4rem rgb(0 0 0 / .22); }.card h2 { margin: 0; font-size: 1.2rem; }.card p { margin-bottom: 0; }
.contact-intro { margin-bottom: 1.3rem; }.contact-intro a { color: #e1ba75; font-weight: 750; }.contact-form-card { max-width: 42rem; padding: clamp(1.1rem, 4vw, 1.6rem); border: 1px solid #4d493d; border-radius: 18px; background: rgb(22 24 20 / .9); box-shadow: 0 1.2rem 4rem rgb(0 0 0 / .22); }.contact-form-card h2 { margin: 0; color: #f1dfbd; font-size: clamp(1.35rem, 3vw, 1.7rem); }.contact-form-card > p { margin: .45rem 0 1.2rem; color: #c8c1b2; line-height: 1.55; }.contact-form-card form { display: grid; gap: .5rem; }.contact-form-card label { display: flex; justify-content: space-between; gap: 1rem; color: #ded6c7; font-size: .86rem; font-weight: 750; }.contact-form-card label span { color: #aaa899; font-weight: 650; }.contact-form-card input, .contact-form-card textarea { width: 100%; padding: .72rem .78rem; border: 1px solid #57584e; border-radius: 9px; color: #f4eee1; background: #11120f; font: inherit; line-height: 1.45; }.contact-form-card textarea { min-height: 11rem; resize: vertical; }.contact-form-card input:focus, .contact-form-card textarea:focus { outline: 2px solid rgb(211 166 92 / .35); outline-offset: 2px; border-color: #d3a65c; }.contact-form-card button { justify-self: start; margin-top: .35rem; cursor: pointer; border: 0; border-radius: 9px; padding: .75rem 1rem; color: #17130d; background: #d3a65c; font: inherit; font-weight: 800; }.contact-form-card button:disabled { cursor: wait; opacity: .65; }.contact-status { min-height: 1.45rem; margin: .1rem 0 0; color: #c8c1b2; font-size: .88rem; line-height: 1.45; }.contact-status.success { color: #9ed4c1; }.contact-status.error { color: #f3aaa0; }
.contact-page { display: grid; place-items: start; min-height: 62vh; padding-top: clamp(2rem, 9vw, 5rem); }.contact-form-simple { width: min(100%, 33rem); padding: clamp(1.1rem, 4vw, 1.65rem); border: 1px solid #4d493d; border-radius: 12px; background: rgb(22 24 20 / .88); box-shadow: 0 1.2rem 4rem rgb(0 0 0 / .2); }.contact-form-simple h1 { margin: 0 0 1.15rem; color: #f1dfbd; font-size: clamp(1.4rem, 4vw, 2rem); font-style: italic; letter-spacing: -.035em; }.contact-form-simple h1 span { color: #d82e31; font-weight: 900; }.contact-form-simple form { display: grid; gap: .38rem; }.contact-form-simple label { display: flex; justify-content: space-between; gap: .75rem; color: #ded6c7; font-size: .9rem; font-style: italic; }.contact-form-simple label span { color: #aaa899; font-size: .78rem; font-style: normal; }.contact-form-simple input, .contact-form-simple textarea { width: 100%; padding: .62rem .72rem; border: 1px solid #68675f; border-radius: 5px; color: #f4eee1; background: #11120f; font: inherit; line-height: 1.45; }.contact-form-simple textarea { min-height: 11rem; resize: vertical; }.contact-form-simple input:focus, .contact-form-simple textarea:focus { outline: 2px solid rgb(211 166 92 / .35); outline-offset: 2px; border-color: #d3a65c; }.contact-form-simple button { justify-self: start; margin-top: .2rem; cursor: pointer; border: 1px solid #776f60; border-radius: 5px; padding: .55rem 1.4rem; color: #f5eee1; background: #313129; font: inherit; }.contact-form-simple button:hover { border-color: #d3a65c; background: #414034; }.contact-form-simple button:disabled { cursor: wait; opacity: .65; }.contact-form-simple .contact-status { min-height: 1.35rem; margin: .1rem 0 0; }.contact-direct { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px solid #3d3c34; color: #bdb6a8; font-size: .84rem; }.contact-direct a { color: #e1ba75; font-weight: 750; }
body[data-theme="porcelana"] .contact-form-simple { border-color: #d5cec0; background: rgb(255 255 252 / .92); box-shadow: 0 1.2rem 4rem rgb(71 54 31 / .12); } body[data-theme="porcelana"] .contact-form-simple h1 { color: #3f392b; } body[data-theme="porcelana"] .contact-form-simple label { color: #575950; } body[data-theme="porcelana"] .contact-form-simple input, body[data-theme="porcelana"] .contact-form-simple textarea { color: #282a26; border-color: #c9c3b6; background: #fffefa; } body[data-theme="porcelana"] .contact-form-simple button { color: #3b3d38; border-color: #c5bfae; background: #eeebe4; } body[data-theme="porcelana"] .contact-direct { border-color: #d5cec0; color: #62665f; }
body[data-theme="aurora"] .contact-form-simple { border-color: #56538a; background: rgb(24 24 55 / .9); } body[data-theme="aurora"] .contact-form-simple h1 { color: #e9ddff; } body[data-theme="aurora"] .contact-form-simple label { color: #d9d9f4; } body[data-theme="aurora"] .contact-form-simple input, body[data-theme="aurora"] .contact-form-simple textarea { color: #f0f1ff; border-color: #625f98; background: #191936; } body[data-theme="aurora"] .contact-form-simple button { color: #e6e8ff; border-color: #625f98; background: #302d61; } body[data-theme="aurora"] .contact-direct { border-color: #56538a; color: #c4c8e6; }
body[data-theme="monochrom"] .contact-form-simple { border-color: #606060; background: rgb(35 35 35 / .92); } body[data-theme="monochrom"] .contact-form-simple h1 { color: #f1f1f1; } body[data-theme="monochrom"] .contact-form-simple label { color: #dedede; } body[data-theme="monochrom"] .contact-form-simple input, body[data-theme="monochrom"] .contact-form-simple textarea { color: #f0f0f0; border-color: #686868; background: #202020; } body[data-theme="monochrom"] .contact-form-simple button { color: #ececec; border-color: #676767; background: #303030; } body[data-theme="monochrom"] .contact-direct { border-color: #606060; color: #c0c0c0; }
body[data-theme="ocean"] .contact-form-simple { border-color: #326d80; background: rgb(9 35 53 / .92); } body[data-theme="ocean"] .contact-form-simple h1 { color: #e1f6f5; } body[data-theme="ocean"] .contact-form-simple label { color: #cce6e9; } body[data-theme="ocean"] .contact-form-simple input, body[data-theme="ocean"] .contact-form-simple textarea { color: #eaf9fa; border-color: #397889; background: #082b42; } body[data-theme="ocean"] .contact-form-simple button { color: #d8eff2; border-color: #397889; background: #0e4259; } body[data-theme="ocean"] .contact-direct { border-color: #326d80; color: #b7d2db; }
/* Publiczne karty korzystają z tych samych palet co panel użytkownika. */
body[data-theme="porcelana"] .meter-card, body[data-theme="porcelana"] .faq details, body[data-theme="porcelana"] .try-form, body[data-theme="porcelana"] .try-result, body[data-theme="porcelana"] .guide .card { border-color: #d5cec0; background: rgb(255 255 252 / .92); box-shadow: 0 1.2rem 4rem rgb(71 54 31 / .12); } body[data-theme="porcelana"] .meter-card h3, body[data-theme="porcelana"] .faq summary, body[data-theme="porcelana"] .guide .card h2 { color: #3f392b; } body[data-theme="porcelana"] .meter-card p, body[data-theme="porcelana"] .faq p, body[data-theme="porcelana"] .try-result p, body[data-theme="porcelana"] .section-title p { color: #62665f; } body[data-theme="porcelana"] .meter-kind, body[data-theme="porcelana"] .meter-tags span { color: #6c4d17; border-color: #c9b17b; background: #fff7e5; } body[data-theme="porcelana"] .guide-key code { color: #3f392b; border-color: #c9b17b; background: #fff7e5; }
body[data-theme="aurora"] .meter-card, body[data-theme="aurora"] .faq details, body[data-theme="aurora"] .try-form, body[data-theme="aurora"] .try-result, body[data-theme="aurora"] .guide .card { border-color: #56538a; background: rgb(24 24 55 / .92); } body[data-theme="aurora"] .meter-card h3, body[data-theme="aurora"] .faq summary, body[data-theme="aurora"] .guide .card h2 { color: #e9ddff; } body[data-theme="aurora"] .meter-card p, body[data-theme="aurora"] .faq p, body[data-theme="aurora"] .try-result p, body[data-theme="aurora"] .section-title p { color: #c4c8e6; } body[data-theme="aurora"] .meter-kind, body[data-theme="aurora"] .meter-tags span { color: #73e1de; border-color: #625f98; background: #27234d; } body[data-theme="aurora"] .guide-key code { color: #e9ddff; border-color: #625f98; background: #191936; }
body[data-theme="monochrom"] .meter-card, body[data-theme="monochrom"] .faq details, body[data-theme="monochrom"] .try-form, body[data-theme="monochrom"] .try-result, body[data-theme="monochrom"] .guide .card { border-color: #606060; background: rgb(35 35 35 / .92); } body[data-theme="monochrom"] .meter-card h3, body[data-theme="monochrom"] .faq summary, body[data-theme="monochrom"] .guide .card h2 { color: #f1f1f1; } body[data-theme="monochrom"] .meter-card p, body[data-theme="monochrom"] .faq p, body[data-theme="monochrom"] .try-result p, body[data-theme="monochrom"] .section-title p { color: #c0c0c0; } body[data-theme="monochrom"] .meter-kind, body[data-theme="monochrom"] .meter-tags span { color: #e6e6e6; border-color: #666; background: #303030; } body[data-theme="monochrom"] .guide-key code { color: #f1f1f1; border-color: #686868; background: #202020; }
body[data-theme="ocean"] .meter-card, body[data-theme="ocean"] .faq details, body[data-theme="ocean"] .try-form, body[data-theme="ocean"] .try-result, body[data-theme="ocean"] .guide .card { border-color: #326d80; background: rgb(9 35 53 / .92); } body[data-theme="ocean"] .meter-card h3, body[data-theme="ocean"] .faq summary, body[data-theme="ocean"] .guide .card h2 { color: #e1f6f5; } body[data-theme="ocean"] .meter-card p, body[data-theme="ocean"] .faq p, body[data-theme="ocean"] .try-result p, body[data-theme="ocean"] .section-title p { color: #b7d2db; } body[data-theme="ocean"] .meter-kind, body[data-theme="ocean"] .meter-tags span { color: #66d3d2; border-color: #397889; background: #082b42; } body[data-theme="ocean"] .guide-key code { color: #e1f6f5; border-color: #397889; background: #082b42; }
.meters-page { padding-top: clamp(1.5rem, 4vw, 4rem); }.meters-intro { max-width: 60rem; }.meters-intro h1 { max-width: 10ch; }.meter-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }.meter-tags span, .meter-kind { border: 1px solid #5a4e35; border-radius: 999px; color: #e5c98e; background: #211c13; font-size: .76rem; font-weight: 750; padding: .3rem .55rem; }
.section-title { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin: 3.75rem 0 1.2rem; }.section-title h2 { margin: .35rem 0 0; font-size: clamp(1.65rem, 3vw, 2.5rem); letter-spacing: -.05em; }.section-title p { max-width: 44ch; margin: 0; color: #aaa899; font-size: .9rem; line-height: 1.5; }
.meter-catalogue { display: grid; grid-template-columns: repeat(auto-fit, minmax(235px, 1fr)); gap: 1rem; }.meter-card { overflow: hidden; border: 1px solid #3d3c34; border-radius: 16px; background: #171914; box-shadow: 0 1.2rem 4rem rgb(0 0 0 / .18); transition: transform .2s ease, border-color .2s ease; }.meter-card:hover { transform: translateY(-3px); border-color: #a78448; }.meter-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center; padding: 0; background: #dedbd2; }.meter-card.heat img { background: #e4e0d8; }.meter-card-body { padding: 1.15rem; }.meter-card h3 { margin: .7rem 0 .45rem; font-size: 1.2rem; }.meter-card p { min-height: 5.3em; margin: 0; color: #bdb6a8; font-size: .9rem; line-height: 1.55; }.meter-card a { display: inline-block; margin-top: 1rem; color: #e1ba75; font-size: .86rem; font-weight: 750; text-decoration: none; }.meter-card a:hover { text-decoration: underline; }
.meter-card img.photo-apator162, .meter-card img.photo-allocator { object-fit: contain; padding: 1rem; background: #dedbd2; }.meter-photo { aspect-ratio: 4 / 3; overflow: hidden; background: #dedbd2; }.meter-card .meter-photo img.photo-apator162 { display: block; width: 100%; height: 100%; aspect-ratio: auto; padding: 0; object-fit: cover; object-position: center; transform: scale(1.55); mix-blend-mode: multiply; }.meter-card .meter-photo img.photo-allocator { display: block; width: 100%; height: 100%; aspect-ratio: auto; padding: 0; object-fit: contain; object-position: center; transform: scale(1.08); filter: contrast(1.1); mix-blend-mode: multiply; }
.guide { max-width: 52rem; }.guide h1 { margin: .65rem 0 1.5rem; font-size: clamp(2.4rem, 7vw, 4.8rem); letter-spacing: -.065em; }.guide .card h2 { color: #f1dfbd; }
.guide-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .9fr); align-items: center; gap: 1.2rem; }.guide-image { display: block; width: 100%; border: 1px solid #4d493d; border-radius: 16px; background: #fff; }.guide-key { margin-top: 1.2rem; }.guide-key code { display: block; overflow-wrap: anywhere; padding: .9rem; border: 1px solid #675331; border-radius: 9px; color: #f4dfb2; background: #11120f; font-size: clamp(.85rem, 2.5vw, 1.1rem); }
.try-page { max-width: 68rem; margin: 0 auto; }.try-page h1 { margin: .65rem 0 .8rem; font-size: clamp(2.5rem, 7vw, 5.5rem); letter-spacing: -.07em; }.try-form { max-width: 35rem; margin: 2rem 0; padding: 1.25rem; border: 1px solid #4d493d; border-radius: 16px; background: rgb(22 24 20 / .84); }.try-form label { display: block; color: #cec8ba; font-size: .92rem; }.try-form input { display: block; width: 100%; margin: .45rem 0 1rem; padding: .78rem; border: 1px solid #57584e; border-radius: 8px; color: #f4eee1; background: #151713; font: inherit; }.try-form button { cursor: pointer; border: 0; border-radius: 9px; padding: .75rem 1rem; color: #17130d; background: #d3a65c; font: inherit; font-weight: 800; }.try-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .82fr); align-items: center; gap: 2rem; margin-top: 2.5rem; padding: 1.25rem; border: 1px solid #4d493d; border-radius: 20px; background: #171914; }.try-result img { width: 100%; max-height: 440px; object-fit: contain; border-radius: 13px; }.try-result h2 { margin: 0 0 .8rem; font-size: clamp(1.7rem, 4vw, 3rem); }.try-result p { color: #c8c1b2; font-size: 1.03rem; line-height: 1.65; }.hidden { display: none !important; }
.info-page { max-width: 58rem; }.faq { display: grid; gap: .75rem; margin-top: 2.5rem; }.faq details { overflow: hidden; border: 1px solid #3d3c34; border-radius: 14px; background: rgb(22 24 20 / .84); box-shadow: 0 1.2rem 4rem rgb(0 0 0 / .12); }.faq summary { padding: 1.1rem 1.25rem; color: #f1dfbd; cursor: pointer; font-weight: 800; list-style: none; }.faq summary::-webkit-details-marker { display: none; }.faq summary::after { float: right; color: #d3a65c; content: '+'; font-size: 1.25rem; line-height: .8; }.faq details[open] summary { border-bottom: 1px solid #3d3c34; }.faq details[open] summary::after { content: '−'; }.faq details > div { padding: .15rem 1.25rem 1.15rem; }.faq p { color: #c8c1b2; line-height: 1.65; }.faq p:last-child { margin-bottom: 0; }
.chart-page { max-width: 72rem; }.chart-controls { display: grid; grid-template-columns: 1fr minmax(220px, .45fr); gap: 1.5rem; align-items: start; }.chart-controls h2 { margin: 0 0 .6rem; }.chart-controls label { display: block; color: #cec8ba; font-size: .9rem; }.chart-controls select { width: 100%; margin-top: .45rem; padding: .72rem; border: 1px solid #57584e; border-radius: 8px; color: #f4eee1; background: #151713; font: inherit; }.meter-options { display: flex; flex-wrap: wrap; gap: .55rem; }.meter-choice { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .65rem; border: 1px solid #4a4b41; border-radius: 999px; color: #ded6c7; font-size: .88rem; cursor: pointer; }.meter-choice input { accent-color: #d3a65c; }.range-buttons { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0; }.range-buttons button { padding: .55rem .8rem; border: 1px solid #505046; border-radius: 999px; color: #eee7da; background: #292a25; font: inherit; font-weight: 750; cursor: pointer; }.range-buttons button.active { color: #17130d; border-color: #d3a65c; background: #d3a65c; }.chart-card { overflow: hidden; }.chart-head { display: flex; justify-content: space-between; gap: 1rem; align-items: start; margin-bottom: 1rem; }.chart-head h2 { color: #f1dfbd; text-transform: capitalize; }.chart-head p { margin-bottom: 0; }.chart-legend { display: flex; flex-wrap: wrap; justify-content: end; gap: .5rem; }.chart-legend span { display: inline-flex; align-items: center; gap: .35rem; color: #d3caba; font-size: .82rem; }.chart-legend i { width: .75rem; height: .75rem; border-radius: 50%; }.chart-wrap { position: relative; min-height: 300px; }.chart-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }.chart-wrap text { fill: #a9a699; font-size: 13px; }.chart-grid .grid-line { stroke: #393a34; stroke-width: 1; }.chart-grid .time-line { stroke: #34362f; stroke-width: .8; }.axis { stroke: #777263; stroke-width: 1; }.chart-lines polyline { fill: none; stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }.chart-tooltip { position: absolute; z-index: 2; display: none; max-width: 180px; padding: .5rem .65rem; border: 1px solid #77613b; border-radius: 8px; color: #f4eee1; background: rgb(18 19 15 / .96); box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .35); font-size: .8rem; line-height: 1.45; pointer-events: none; white-space: pre-line; }.chart-tooltip.visible { display: block; }
.consumption-overview { margin-top: 1.4rem; }.consumption-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin: 0 0 .8rem; }.consumption-heading h2 { margin: .3rem 0 0; color: #f1dfbd; font-size: clamp(1.4rem, 3vw, 2rem); letter-spacing: -.04em; }.consumption-heading p { max-width: 31rem; margin: 0; text-align: right; }.consumption-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .8rem; }.consumption-card { padding: 1rem; border: 1px solid #4b4435; border-radius: 15px; background: linear-gradient(135deg, rgb(36 31 21 / .9), rgb(22 24 20 / .9)); box-shadow: 0 1rem 3rem rgb(0 0 0 / .16); }.consumption-card h3 { overflow: hidden; margin: 0 0 .85rem; color: #f1dfbd; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }.consumption-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }.consumption-metrics div { min-height: 4.2rem; padding: .65rem .7rem; border: 1px solid #46443c; border-radius: 10px; background: rgb(12 14 11 / .44); }.consumption-metrics div:last-child { grid-column: 1 / -1; border-color: #73592e; background: rgb(71 53 23 / .35); }.consumption-metrics span { display: block; color: #bdb5a4; font-size: .73rem; font-weight: 700; line-height: 1.25; }.consumption-metrics strong { display: block; margin-top: .25rem; color: #f5e2b7; font-size: 1.05rem; letter-spacing: -.02em; }
.quick-measure { margin-top: 1.35rem; padding-top: 1.25rem; border-top: 1px solid #4b4435; }.quick-measure h3 { margin: 0 0 .45rem; color: #f1dfbd; font-size: 1.2rem; }.quick-measure p { max-width: 52rem; margin: 0; color: #c8c1b2; font-size: .88rem; line-height: 1.55; }.quick-measure-form { display: grid; grid-template-columns: minmax(11rem, 1fr) minmax(11rem, 1fr) auto; align-items: end; gap: .65rem; margin-top: 1rem; }.quick-measure-form label { display: grid; gap: .32rem; color: #cec8ba; font-size: .78rem; font-weight: 750; }.quick-measure-form input { width: 100%; padding: .6rem; border: 1px solid #57584e; border-radius: 8px; color: #f4eee1; background: #11120f; font: inherit; color-scheme: dark; }.quick-measure-form button { cursor: pointer; border: 0; border-radius: 8px; padding: .64rem .85rem; color: #17130d; background: #d3a65c; font: inherit; font-weight: 800; white-space: nowrap; }.quick-measure-form button:disabled { cursor: wait; opacity: .65; }.quick-measure-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .55rem; margin-top: .85rem; color: #bdb5a4; font-size: .86rem; }.quick-measure-result { min-height: 4rem; padding: .65rem .7rem; border: 1px solid #73592e; border-radius: 10px; background: rgb(71 53 23 / .25); }.quick-measure-result span { display: block; color: #bdb5a4; font-size: .73rem; font-weight: 700; }.quick-measure-result strong { display: block; margin-top: .25rem; color: #f5e2b7; font-size: 1.08rem; }
.cost-overview { margin-top: 1.75rem; }.cost-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: .8rem; }.cost-card { padding: 1rem; border: 1px solid #34504a; border-radius: 15px; background: linear-gradient(135deg, rgb(17 37 33 / .88), rgb(22 24 20 / .9)); box-shadow: 0 1rem 3rem rgb(0 0 0 / .16); }.cost-card h3 { overflow: hidden; margin: 0 0 .85rem; color: #d6f1e0; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }.cost-form { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .65rem; margin-bottom: .9rem; }.cost-form label { color: #b9c9c0; font-size: .73rem; font-weight: 700; }.cost-form input { display: block; width: 100%; margin-top: .3rem; padding: .54rem .6rem; border: 1px solid #49645c; border-radius: 8px; color: #f4eee1; background: #111914; font: inherit; }.cost-form button { justify-self: start; padding: .48rem .7rem; }.cost-help { margin: -.12rem 0 .15rem; color: #9ed4c1; font-size: .72rem; }.cost-help summary { cursor: pointer; font-weight: 750; }.cost-help p { margin: .35rem 0 0; color: #bdc8c0; line-height: 1.4; }.cost-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }.cost-metrics div { padding: .65rem .7rem; border: 1px solid #35534b; border-radius: 10px; background: rgb(8 22 18 / .45); }.cost-metrics div:last-child { grid-column: 1 / -1; border-color: #4b806d; }.cost-metrics span { display: block; color: #a9c2b6; font-size: .73rem; font-weight: 700; }.cost-metrics strong { display: block; margin-top: .25rem; color: #d5f3df; font-size: 1.05rem; letter-spacing: -.02em; }.cost-rate-dates { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }.cost-rate-list { display: grid; gap: .45rem; max-height: 13rem; overflow: auto; }.cost-rate-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .55rem .6rem; border: 1px solid #3d574e; border-radius: 9px; color: #cce4d9; background: rgb(8 22 18 / .35); font-size: .78rem; }.cost-rate-row > div { display: flex; flex-wrap: wrap; justify-content: end; gap: .35rem; }.cost-rate-row button { padding: .38rem .55rem; font-size: .72rem; }
.range-dialog { width: min(100% - 2rem, 27rem); padding: 0; border: 1px solid #6c5834; border-radius: 16px; color: #f4eee1; background: #181914; box-shadow: 0 1.5rem 5rem rgb(0 0 0 / .55); }.range-dialog::backdrop { background: rgb(0 0 0 / .62); }.range-dialog form { display: grid; gap: .8rem; padding: 1.25rem; }.range-dialog h2 { margin: 0; color: #f1dfbd; }.range-dialog p { margin: -.35rem 0 .2rem; color: #bcb5a7; font-size: .88rem; line-height: 1.45; }.range-dialog label { display: grid; gap: .35rem; color: #ded6c7; font-size: .85rem; font-weight: 750; }.range-dialog input { width: 100%; padding: .65rem; border: 1px solid #57584e; border-radius: 8px; color: #f4eee1; background: #11120f; font: inherit; color-scheme: dark; }.dialog-actions { display: flex; justify-content: end; flex-wrap: wrap; gap: .55rem; margin-top: .3rem; }.dialog-actions button { cursor: pointer; border: 0; border-radius: 9px; padding: .65rem .85rem; color: #17130d; background: #d3a65c; font: inherit; font-weight: 800; }.dialog-actions .secondary { border: 1px solid #57584e; color: #eee7da; background: #292a25; }
body[data-theme="porcelana"] { color-scheme: light; color: #252824; background: radial-gradient(circle at 22% 4%, #e9d9b9 0, transparent 30rem), #f4f2ed; } body[data-theme="porcelana"] .card, body[data-theme="porcelana"] .consumption-card, body[data-theme="porcelana"] .cost-card { border-color: #d5cec0; background: rgb(255 255 252 / .92); box-shadow: 0 1.2rem 4rem rgb(71 54 31 / .12); } body[data-theme="porcelana"] .intro p, body[data-theme="porcelana"] .card p, body[data-theme="porcelana"] .muted, body[data-theme="porcelana"] .consumption-metrics span, body[data-theme="porcelana"] .cost-metrics span { color: #62665f; } body[data-theme="porcelana"] .brand, body[data-theme="porcelana"] .chart-head h2, body[data-theme="porcelana"] .consumption-heading h2, body[data-theme="porcelana"] .consumption-card h3 { color: #3f392b; } body[data-theme="porcelana"] nav a, body[data-theme="porcelana"] .meter-choice { color: #575950; border-color: #cfc8bb; } body[data-theme="porcelana"] .chart-controls select, body[data-theme="porcelana"] .cost-form input, body[data-theme="porcelana"] .range-dialog input { color: #282a26; border-color: #c9c3b6; background: #fffefa; } body[data-theme="porcelana"] .range-dialog { color: #292b26; border-color: #c9c3b6; background: #fffefa; } body[data-theme="porcelana"] .range-buttons button { color: #3b3d38; border-color: #c5bfae; background: #eeebe4; } body[data-theme="porcelana"] .range-buttons button.active, body[data-theme="porcelana"] .dialog-actions button { color: #2c2418; border-color: #c9a25a; background: #d3a65c; }
body[data-theme="porcelana"] .quick-measure { border-color: #d5cec0; } body[data-theme="porcelana"] .quick-measure h3 { color: #3f392b; } body[data-theme="porcelana"] .quick-measure p, body[data-theme="porcelana"] .quick-measure-results, body[data-theme="porcelana"] .quick-measure-result span { color: #62665f; } body[data-theme="porcelana"] .quick-measure-form label { color: #575950; } body[data-theme="porcelana"] .quick-measure-form input { color: #282a26; border-color: #c9c3b6; background: #fffefa; color-scheme: light; } body[data-theme="porcelana"] .quick-measure-result { border-color: #d6bf8a; background: #fcf5e6; } body[data-theme="porcelana"] .quick-measure-result strong { color: #6c4d17; }
body[data-theme="aurora"] { color: #eef0ff; background: radial-gradient(circle at 14% 8%, #503a94 0, transparent 29rem), radial-gradient(circle at 86% 20%, #006d78 0, transparent 28rem), #101126; } body[data-theme="aurora"] .card, body[data-theme="aurora"] .consumption-card, body[data-theme="aurora"] .cost-card { border-color: #56538a; background: rgb(24 24 55 / .9); } body[data-theme="aurora"] .intro p, body[data-theme="aurora"] .card p, body[data-theme="aurora"] .muted, body[data-theme="aurora"] .consumption-metrics span, body[data-theme="aurora"] .cost-metrics span { color: #c4c8e6; } body[data-theme="aurora"] .brand, body[data-theme="aurora"] .chart-head h2, body[data-theme="aurora"] .consumption-heading h2, body[data-theme="aurora"] .consumption-card h3 { color: #e9ddff; } body[data-theme="aurora"] .brand span, body[data-theme="aurora"] .eyebrow { color: #73e1de; } body[data-theme="aurora"] nav a, body[data-theme="aurora"] .meter-choice { color: #d9d9f4; border-color: #625f98; } body[data-theme="aurora"] .chart-controls select, body[data-theme="aurora"] .cost-form input, body[data-theme="aurora"] .range-dialog input { color: #f0f1ff; border-color: #625f98; background: #191936; } body[data-theme="aurora"] .range-dialog { color: #eef0ff; border-color: #625f98; background: #1d1d3f; } body[data-theme="aurora"] .range-buttons button { color: #e6e8ff; border-color: #625f98; background: #302d61; } body[data-theme="aurora"] .range-buttons button.active, body[data-theme="aurora"] .dialog-actions button { color: #101126; border-color: #73e1de; background: #73e1de; }
body[data-theme="aurora"] .quick-measure { border-color: #56538a; } body[data-theme="aurora"] .quick-measure h3 { color: #e9ddff; } body[data-theme="aurora"] .quick-measure p, body[data-theme="aurora"] .quick-measure-results, body[data-theme="aurora"] .quick-measure-result span { color: #c4c8e6; } body[data-theme="aurora"] .quick-measure-form label { color: #d9d9f4; } body[data-theme="aurora"] .quick-measure-form input { color: #f0f1ff; border-color: #625f98; background: #191936; } body[data-theme="aurora"] .quick-measure-result { border-color: #5e7bb0; background: rgb(45 48 94 / .55); } body[data-theme="aurora"] .quick-measure-result strong { color: #9beeed; }
body[data-theme="monochrom"] { color: #f0f0f0; background: radial-gradient(circle at 20% 0, #393939 0, transparent 30rem), #151515; } body[data-theme="monochrom"] .card, body[data-theme="monochrom"] .consumption-card, body[data-theme="monochrom"] .cost-card { border-color: #606060; background: rgb(35 35 35 / .92); } body[data-theme="monochrom"] .intro p, body[data-theme="monochrom"] .card p, body[data-theme="monochrom"] .muted, body[data-theme="monochrom"] .consumption-metrics span, body[data-theme="monochrom"] .cost-metrics span { color: #c0c0c0; } body[data-theme="monochrom"] .brand, body[data-theme="monochrom"] .chart-head h2, body[data-theme="monochrom"] .consumption-heading h2, body[data-theme="monochrom"] .consumption-card h3 { color: #f1f1f1; } body[data-theme="monochrom"] .brand span, body[data-theme="monochrom"] .eyebrow { color: #d5d5d5; } body[data-theme="monochrom"] nav a, body[data-theme="monochrom"] .meter-choice { color: #dedede; border-color: #666; } body[data-theme="monochrom"] .chart-controls select, body[data-theme="monochrom"] .cost-form input, body[data-theme="monochrom"] .range-dialog input { color: #f0f0f0; border-color: #686868; background: #202020; } body[data-theme="monochrom"] .range-dialog { color: #f0f0f0; border-color: #686868; background: #242424; } body[data-theme="monochrom"] .range-buttons button { color: #ececec; border-color: #676767; background: #303030; } body[data-theme="monochrom"] .range-buttons button.active, body[data-theme="monochrom"] .dialog-actions button { color: #151515; border-color: #dedede; background: #dedede; }
body[data-theme="monochrom"] .quick-measure { border-color: #606060; } body[data-theme="monochrom"] .quick-measure h3 { color: #f1f1f1; } body[data-theme="monochrom"] .quick-measure p, body[data-theme="monochrom"] .quick-measure-results, body[data-theme="monochrom"] .quick-measure-result span { color: #c0c0c0; } body[data-theme="monochrom"] .quick-measure-form label { color: #dedede; } body[data-theme="monochrom"] .quick-measure-form input { color: #f0f0f0; border-color: #686868; background: #202020; } body[data-theme="monochrom"] .quick-measure-result { border-color: #686868; background: #292929; } body[data-theme="monochrom"] .quick-measure-result strong { color: #f1f1f1; }
body[data-theme="ocean"] { color: #e8f4f7; background: radial-gradient(circle at 78% 0, #0e5770 0, transparent 32rem), radial-gradient(circle at 10% 28%, #123d67 0, transparent 27rem), #071b2c; } body[data-theme="ocean"] .card, body[data-theme="ocean"] .consumption-card, body[data-theme="ocean"] .cost-card { border-color: #326d80; background: rgb(9 35 53 / .92); } body[data-theme="ocean"] .intro p, body[data-theme="ocean"] .card p, body[data-theme="ocean"] .muted, body[data-theme="ocean"] .consumption-metrics span, body[data-theme="ocean"] .cost-metrics span { color: #b7d2db; } body[data-theme="ocean"] .brand, body[data-theme="ocean"] .chart-head h2, body[data-theme="ocean"] .consumption-heading h2, body[data-theme="ocean"] .consumption-card h3 { color: #e1f6f5; } body[data-theme="ocean"] .brand span, body[data-theme="ocean"] .eyebrow { color: #66d3d2; } body[data-theme="ocean"] nav a, body[data-theme="ocean"] .meter-choice { color: #cce6e9; border-color: #397889; } body[data-theme="ocean"] .chart-controls select, body[data-theme="ocean"] .cost-form input, body[data-theme="ocean"] .range-dialog input { color: #eaf9fa; border-color: #397889; background: #082b42; } body[data-theme="ocean"] .range-dialog { color: #e8f4f7; border-color: #397889; background: #092e45; } body[data-theme="ocean"] .range-buttons button { color: #d8eff2; border-color: #397889; background: #0e4259; } body[data-theme="ocean"] .range-buttons button.active, body[data-theme="ocean"] .dialog-actions button { color: #062232; border-color: #66d3d2; background: #66d3d2; }
body[data-theme="ocean"] .quick-measure { border-color: #326d80; } body[data-theme="ocean"] .quick-measure h3 { color: #e1f6f5; } body[data-theme="ocean"] .quick-measure p, body[data-theme="ocean"] .quick-measure-results, body[data-theme="ocean"] .quick-measure-result span { color: #b7d2db; } body[data-theme="ocean"] .quick-measure-form label { color: #cce6e9; } body[data-theme="ocean"] .quick-measure-form input { color: #eaf9fa; border-color: #397889; background: #082b42; } body[data-theme="ocean"] .quick-measure-result { border-color: #397889; background: rgb(8 43 66 / .65); } body[data-theme="ocean"] .quick-measure-result strong { color: #8ce8e4; }
.chart-controls { grid-template-columns: 1fr minmax(220px, .75fr); }.parameter-options { display: grid; gap: .55rem; }.series-parameter { margin: 0; font-size: .8rem; }
.cost-card h3 { margin-bottom: .45rem; }.cost-billing { margin: 0 0 .85rem; color: #9ed4c1; font-size: .78rem; line-height: 1.4; }
.supported-grid .card h3 { margin: 0; color: #f1dfbd; font-size: 1.1rem; }.compatibility-note { margin-top: 2.5rem; padding: 1.1rem 1.2rem; border-left: 3px solid #d3a65c; border-radius: 0 12px 12px 0; color: #cfc7b8; background: #1d1d17; line-height: 1.6; }.compatibility-note strong { color: #f1dfbd; }
@media (max-width: 780px) { header { align-items: start; flex-direction: column; } nav { justify-content: start; }.section-title, .consumption-heading { align-items: start; flex-direction: column; gap: .75rem; }.consumption-heading p { text-align: left; }.meter-card p { min-height: 0; }.guide-layout, .chart-controls, .cost-form, .quick-measure-form { grid-template-columns: 1fr; }.chart-head { flex-direction: column; }.chart-legend { justify-content: start; } }

.chart-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: .55rem; margin: .85rem 0 0; }.chart-actions button { padding: .55rem .8rem; border: 1px solid #505046; border-radius: 999px; color: #eee7da; background: #292a25; font: inherit; font-weight: 750; cursor: pointer; }.chart-actions button:hover { color: #17130d; border-color: #d3a65c; background: #d3a65c; }.chart-actions button:disabled { cursor: wait; opacity: .6; }
.comparison-controls { margin-bottom: 1.2rem; }.comparison-controls h2 { margin: 0 0 .7rem; }.comparison-note { margin: .8rem 0 0; color: #bdb5a4; font-size: .86rem; }.comparison-range-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem; }.comparison-range-card h2 { margin: 0; color: #f1dfbd; font-size: 1.05rem; }.comparison-range-card p { margin: .35rem 0 .75rem; color: #bdb5a4; font-size: .82rem; line-height: 1.45; }.comparison-range-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }.comparison-range-form label { display: grid; gap: .3rem; color: #ded6c7; font-size: .76rem; font-weight: 750; }.comparison-range-form input { width: 100%; padding: .55rem .6rem; border: 1px solid #57584e; border-radius: 8px; color: #f4eee1; background: #11120f; font: inherit; color-scheme: dark; }.comparison-range-form button { cursor: pointer; border: 0; border-radius: 8px; padding: .55rem .7rem; color: #17130d; background: #d3a65c; font: inherit; font-size: .8rem; font-weight: 800; }.comparison-range-form button.secondary { border: 1px solid #57584e; color: #eee7da; background: #292a25; }.comparison-grid { display: grid; gap: 1rem; }.comparison-section-heading { margin-top: 1.35rem; padding-top: 1.2rem; border-top: 1px solid #4b4435; }.comparison-section-heading h2 { margin: .25rem 0; color: #f1dfbd; font-size: clamp(1.45rem, 3vw, 2rem); letter-spacing: -.04em; }.comparison-section-heading p { margin: 0; color: #bdb5a4; font-size: .86rem; }.comparison-chart { padding: 1.2rem; border: 1px solid #4b4435; border-radius: 16px; background: linear-gradient(135deg, rgb(36 31 21 / .9), rgb(22 24 20 / .9)); box-shadow: 0 1rem 3rem rgb(0 0 0 / .16); }.comparison-chart h2 { margin: 0; color: #f1dfbd; font-size: 1.2rem; }.comparison-chart p { margin: .35rem 0 1rem; color: #bdb5a4; font-size: .85rem; }.comparison-wrap { position: relative; min-height: 245px; }.comparison-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }.comparison-wrap text { fill: #aaa699; font-size: 12px; }.comparison-grid-line { stroke: #393a34; stroke-width: 1; }.comparison-axis { stroke: #777263; stroke-width: 1; }.comparison-bar { cursor: default; transition: opacity .15s ease; }.comparison-bar:hover { opacity: .72; }.comparison-tooltip { position: absolute; z-index: 2; display: none; max-width: 190px; padding: .5rem .65rem; border: 1px solid #77613b; border-radius: 8px; color: #f4eee1; background: rgb(18 19 15 / .96); box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / .35); font-size: .8rem; line-height: 1.45; pointer-events: none; white-space: pre-line; }.comparison-tooltip.visible { display: block; }
.comparison-range-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.interval-comparison-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem; }.interval-comparison-card h2 { margin: 0; color: #f1dfbd; font-size: 1.05rem; }.interval-comparison-card p { margin: .35rem 0 .75rem; color: #bdb5a4; font-size: .82rem; line-height: 1.45; }.interval-comparison-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }.interval-range-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; padding: .65rem; border: 1px solid #4b4435; border-radius: 10px; }.interval-range-group strong { grid-column: 1 / -1; color: #e5c98e; font-size: .78rem; }.interval-comparison-form label, .specific-day-form label { display: grid; gap: .3rem; color: #ded6c7; font-size: .76rem; font-weight: 750; }.interval-comparison-form input, .specific-day-form input { width: 100%; padding: .55rem .6rem; border: 1px solid #57584e; border-radius: 8px; color: #f4eee1; background: #11120f; font: inherit; color-scheme: dark; }.interval-comparison-form button, .specific-day-form button { cursor: pointer; border: 0; border-radius: 8px; padding: .55rem .7rem; color: #17130d; background: #d3a65c; font: inherit; font-size: .8rem; font-weight: 800; justify-self: start; }.specific-day-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }.specific-day-form button { grid-column: 1 / -1; }.interval-comparison-results { margin-bottom: 1.2rem; }
@media (max-width: 780px) { .chart-actions { justify-content: start; }.comparison-range-card { grid-template-columns: 1fr; } }
@media (max-width: 780px) { .interval-comparison-card, .interval-comparison-form, .specific-day-form { grid-template-columns: 1fr; } .interval-range-group { grid-template-columns: 1fr; } }
body[data-theme="porcelana"] .comparison-chart { border-color: #d5cec0; background: rgb(255 255 252 / .92); box-shadow: 0 1.2rem 4rem rgb(71 54 31 / .12); } body[data-theme="porcelana"] .comparison-chart h2 { color: #3f392b; } body[data-theme="porcelana"] .comparison-chart p, body[data-theme="porcelana"] .comparison-note, body[data-theme="porcelana"] .comparison-wrap text { color: #62665f; fill: #62665f; }
body[data-theme="aurora"] .comparison-chart { border-color: #56538a; background: rgb(24 24 55 / .9); } body[data-theme="aurora"] .comparison-chart h2 { color: #e9ddff; }
body[data-theme="monochrom"] .comparison-chart { border-color: #606060; background: rgb(35 35 35 / .92); } body[data-theme="monochrom"] .comparison-chart h2 { color: #f1f1f1; }
body[data-theme="ocean"] .comparison-chart { border-color: #326d80; background: rgb(9 35 53 / .92); } body[data-theme="ocean"] .comparison-chart h2 { color: #e1f6f5; }
body[data-theme="porcelana"] .comparison-range-card h2 { color: #3f392b; } body[data-theme="porcelana"] .comparison-range-card p { color: #62665f; } body[data-theme="porcelana"] .comparison-range-form label { color: #575950; } body[data-theme="porcelana"] .comparison-range-form input { color: #282a26; border-color: #c9c3b6; background: #fffefa; } body[data-theme="porcelana"] .comparison-range-form button.secondary { color: #3b3d38; border-color: #c5bfae; background: #eeebe4; }
body[data-theme="aurora"] .comparison-range-form input { color: #f0f1ff; border-color: #625f98; background: #191936; } body[data-theme="aurora"] .comparison-range-form button.secondary { color: #e6e8ff; border-color: #625f98; background: #302d61; }
body[data-theme="monochrom"] .comparison-range-form input { color: #f0f0f0; border-color: #686868; background: #202020; } body[data-theme="monochrom"] .comparison-range-form button.secondary { color: #ececec; border-color: #676767; background: #303030; }
body[data-theme="ocean"] .comparison-range-form input { color: #eaf9fa; border-color: #397889; background: #082b42; } body[data-theme="ocean"] .comparison-range-form button.secondary { color: #d8eff2; border-color: #397889; background: #0e4259; }
body[data-theme="porcelana"] .interval-comparison-card h2 { color: #3f392b; } body[data-theme="porcelana"] .interval-comparison-card p { color: #62665f; } body[data-theme="porcelana"] .interval-range-group { border-color: #d5cec0; } body[data-theme="porcelana"] .interval-range-group strong { color: #6c4d17; } body[data-theme="porcelana"] .interval-comparison-form label, body[data-theme="porcelana"] .specific-day-form label { color: #575950; } body[data-theme="porcelana"] .interval-comparison-form input, body[data-theme="porcelana"] .specific-day-form input { color: #282a26; border-color: #c9c3b6; background: #fffefa; color-scheme: light; }
body[data-theme="aurora"] .interval-comparison-card h2 { color: #e9ddff; } body[data-theme="aurora"] .interval-comparison-card p { color: #c4c8e6; } body[data-theme="aurora"] .interval-range-group { border-color: #56538a; } body[data-theme="aurora"] .interval-range-group strong { color: #73e1de; } body[data-theme="aurora"] .interval-comparison-form label, body[data-theme="aurora"] .specific-day-form label { color: #d9d9f4; } body[data-theme="aurora"] .interval-comparison-form input, body[data-theme="aurora"] .specific-day-form input { color: #f0f1ff; border-color: #625f98; background: #191936; }
body[data-theme="monochrom"] .interval-comparison-card h2 { color: #f1f1f1; } body[data-theme="monochrom"] .interval-comparison-card p { color: #c0c0c0; } body[data-theme="monochrom"] .interval-range-group { border-color: #606060; } body[data-theme="monochrom"] .interval-range-group strong { color: #e6e6e6; } body[data-theme="monochrom"] .interval-comparison-form label, body[data-theme="monochrom"] .specific-day-form label { color: #dedede; } body[data-theme="monochrom"] .interval-comparison-form input, body[data-theme="monochrom"] .specific-day-form input { color: #f0f0f0; border-color: #686868; background: #202020; }
body[data-theme="ocean"] .interval-comparison-card h2 { color: #e1f6f5; } body[data-theme="ocean"] .interval-comparison-card p { color: #b7d2db; } body[data-theme="ocean"] .interval-range-group { border-color: #326d80; } body[data-theme="ocean"] .interval-range-group strong { color: #66d3d2; } body[data-theme="ocean"] .interval-comparison-form label, body[data-theme="ocean"] .specific-day-form label { color: #cce6e9; } body[data-theme="ocean"] .interval-comparison-form input, body[data-theme="ocean"] .specific-day-form input { color: #eaf9fa; border-color: #397889; background: #082b42; }

@media (max-width: 780px), (pointer: coarse) { body[data-theme="mobile-lab"] .chart-tooltip, body[data-theme="mobile-lab"] .comparison-tooltip { width: min(15rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem); overflow-wrap: anywhere; font-size: .78rem; line-height: 1.35; } body[data-theme="mobile-lab"] .chart-wrap svg, body[data-theme="mobile-lab"] .comparison-wrap svg { touch-action: pan-x pan-y; } body[data-theme="mobile-lab"] .comparison-bar { cursor: pointer; } }