@tailwind base;@tailwind components;@tailwind utilities;body{@apply bg-gray-100 text-black font-sans leading-normal m-0 p-0;}:root{--font-family-base: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;--font-family-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;--font-h1-size-base: 32px;--font-h1-weight-base: 700;--font-h1-line-base: 1.2;--font-h2-size-base: 24px;--font-h2-weight-base: 600;--font-h2-line-base: 1.2;--font-h3-size-base: 18px;--font-h3-weight-base: 600;--font-h3-line-base: 1.3;--font-size-sm-base: 12px;--font-weight-sm-base: 400;--font-line-sm-base: 1.4;--font-h1-size: var(--font-h1-size-base);--font-h1-weight: var(--font-h1-weight-base);--font-h1-line: var(--font-h1-line-base);--font-h2-size: var(--font-h2-size-base);--font-h2-weight: var(--font-h2-weight-base);--font-h2-line: var(--font-h2-line-base);--font-h3-size: var(--font-h3-size-base);--font-h3-weight: var(--font-h3-weight-base);--font-h3-line: var(--font-h3-line-base);--font-size-sm: var(--font-size-sm-base);--font-weight-sm: var(--font-weight-sm-base);--font-line-sm: var(--font-line-sm-base);--font-caption-weight: 400;--font-mono-weight: 400;--header-height: 72px;--header-height-desktop: 72px;--header-height-tablet: 64px;--header-height-mobile: 64px;--footer-height: 72px;--footer-height-desktop: 72px;--footer-height-tablet: 64px;--footer-height-mobile: 64px;--font-body-size: 16px;--font-body-weight: 400;--font-body-line: 1.5;--font-body-accent-weight: 500;--font-caption-size: 12px;--font-caption-line: 1.4;--font-mono-size: 14px;--font-mono-line: 1.5;--radius-xs: 4px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--space-2: 2px;--space-4: 4px;--space-8: 8px;--space-12: 12px;--space-16: 16px;--space-24: 24px;--space-32: 32px;--space-48: 48px;--space-64: 64px;--space-96: 96px;--animation-fast: .1s;--animation-normal: .3s;--animation-slow: .5s;--shadow-e1: 0 2px 8px rgba(0, 0, 0, .1);--shadow-e2: 0 4px 16px rgba(0, 0, 0, .12);--shadow-e3: 0 8px 24px rgba(0, 0, 0, .14);--color-primary: #3B82F6;--color-bg: #F9FAFB;--color-surface: #FFFFFF;--color-text-main: #111827;--color-text-secondary: #6B7280;--color-error: #EF4444;--color-success: #10B981;--color-border: #E5E7EB;--grid-columns-desktop: 12;--grid-columns-tablet: 8;--grid-columns-mobile: 4;--grid-content-columns-desktop: 3;--grid-content-columns-tablet: 2;--grid-content-columns-mobile: 1;--grid-gutter-desktop: 24px;--grid-gutter-tablet: 20px;--grid-gutter-mobile: 16px;--grid-margin-desktop: 64px;--grid-margin-tablet: 32px;--grid-margin-mobile: 16px;--grid-columns: var(--grid-columns-desktop);--grid-content-columns: var(--grid-content-columns-desktop);--grid-gutter: var(--grid-gutter-desktop);--grid-margin: var(--grid-margin-desktop)}html,body{height:100%;margin:0}body{font-family:var(--font-family-base),system-ui;font-size:var(--font-body-size);font-weight:var(--font-body-weight);line-height:var(--font-body-line);font-kerning:normal;font-feature-settings:"kern" 1;letter-spacing:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--color-text-main);background:var(--color-bg);padding:0 43px}button,input,select,textarea{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;color:inherit}h1,h2,h3{font-kerning:normal;font-feature-settings:"kern" 1;letter-spacing:0}h1{margin:0;font-size:var(--font-h1-size);font-weight:var(--font-h1-weight);line-height:var(--font-h1-line)}h2{margin:0;font-size:var(--font-h2-size);font-weight:var(--font-h2-weight);line-height:var(--font-h2-line)}h3{margin:0;font-size:var(--font-h3-size);font-weight:var(--font-h3-weight);line-height:var(--font-h3-line)}p{margin:0}a{color:var(--color-primary);text-decoration:none}hr{margin:0;padding:0;height:1px}fieldset{margin:0;padding:0;border:none}.caption{font-size:var(--font-caption-size);line-height:var(--font-caption-line);font-weight:var(--font-caption-weight)}.code{font-family:var(--font-family-mono),ui-monospace;font-size:var(--font-mono-size);line-height:var(--font-mono-line);font-weight:var(--font-mono-weight)}.body-accent{font-weight:var(--font-body-accent-weight)}.page{height:100vh;max-width:1140px;margin:auto;padding:var(--space-48) 0;display:grid;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));gap:var(--grid-gutter);grid-template-areas:". . . main main main main main main . . .";box-sizing:border-box}.main{position:relative;grid-area:main;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:var(--space-8)}@media(max-width:1200px){:root{--grid-columns: var(--grid-columns-tablet);--grid-content-columns: var(--grid-content-columns-tablet);--grid-gutter: var(--grid-gutter-tablet);--grid-margin: var(--grid-margin-tablet);--header-height: var(--header-height-tablet);--footer-height: var(--footer-height-tablet)}.page{max-width:704px;padding:var(--space-24) 0;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));grid-template-areas:". main main main main main main .";gap:var(--grid-gutter)}.main{justify-content:space-between;align-items:center;gap:var(--space-8)}}@media(max-width:640px){:root{--grid-columns: var(--grid-columns-mobile);--grid-content-columns: var(--grid-content-columns-mobile);--grid-gutter: var(--grid-gutter-mobile);--grid-margin: var(--grid-margin-mobile);--header-height: var(--header-height-mobile);--footer-height: var(--footer-height-mobile);--font-h1-size: var(--font-h2-size-base);--font-h1-weight: var(--font-h2-weight-base);--font-h1-line: var(--font-h2-line-base);--font-h2-size: var(--font-h3-size-base);--font-h2-weight: var(--font-h3-weight-base);--font-h2-line: var(--font-h3-line-base)}.page{max-width:328px;padding:var(--space-12) 0;grid-template-columns:repeat(var(--grid-columns),minmax(0,1fr));grid-template-areas:"main main main main";gap:var(--grid-gutter)}.main{justify-content:center;align-items:center}}.card-block{width:100%;padding:var(--space-24);border-radius:var(--radius-lg);box-sizing:border-box;box-shadow:var(--shadow-e1);background:var(--color-surface);display:flex;flex-direction:column;transition:opacity var(--animation-fast)}.card-block--welcome{margin:auto;gap:var(--space-16)}.card-block--overflow{gap:var(--space-16);flex:1 1 auto;min-height:0;height:100%}.card__title{display:flex;justify-content:space-between}.card__title--wasted{display:flex;flex-direction:column}.card__title-left{color:var(--color-text-secondary)}.card__title-right{color:var(--color-primary)}.card__body{display:flex;flex-direction:column;gap:var(--space-16);flex:1 1 auto;min-height:0}.card__body__title{color:var(--color-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-sm);line-height:var(--font-line-sm)}.form{display:flex;flex-direction:column;gap:var(--space-16)}.form__submit--welcome{margin-top:var(--space-16)}.btn{border:1px var(--color-primary) solid;border-radius:var(--radius-xs);background:transparent;color:var(--color-primary);text-align:center;padding:var(--space-12) var(--space-16);cursor:pointer;box-sizing:border-box;transition:background var(--animation-normal),opacity var(--animation-normal)}.btn:not(.btn--primary):hover{background:color-mix(in srgb,var(--color-primary) 10%,transparent)}.btn:focus{outline:none}.btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.btn--primary{color:var(--color-surface);background:var(--color-primary)}.btn--primary:hover{opacity:85%}.input{display:flex;flex-direction:column;gap:var(--space-2)}.input__title{padding:0 var(--space-12);color:var(--color-text-secondary)}.input__input{height:50px;padding:var(--space-12);border:1px var(--color-border) solid;border-radius:var(--radius-sm);box-sizing:border-box;transition:border-color ease-in-out var(--animation-normal),box-shadow ease-in-out var(--animation-fast)}.input__input:not(:disabled):hover{border:1px solid var(--color-primary)}.input__input:focus{outline:none;border:1px solid var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.input__input:disabled{background-color:var(--color-bg);cursor:not-allowed}.selector{position:relative;display:flex;flex-direction:column;gap:var(--space-2)}.selector__title{padding:0 var(--space-12);color:var(--color-text-secondary)}.selector__input{height:50px;padding:var(--space-12) var(--space-48) var(--space-12) var(--space-12);border:1px var(--color-border) solid;border-radius:var(--radius-sm);box-sizing:border-box;transition:border-color ease-in-out var(--animation-normal),box-shadow ease-in-out var(--animation-fast);cursor:default}.selector__input:focus-visible::selection{background-color:transparent}.selector__input:disabled{background-color:var(--color-bg);cursor:not-allowed}.selector__drop_button{position:absolute;height:30px;width:30px;top:50%;right:10px;transform:translateY(-50%);background-color:transparent;border:1px solid transparent;border-radius:var(--radius-sm);transition:border var(--animation-normal);cursor:pointer;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center}.selector__drop_button:hover{background-color:color-mix(in srgb,var(--color-primary) 10%,var(--color-surface))}.selector__drop_button img{transition:transform var(--animation-normal) ease}.selector:has(.dropdown_menu-visible) .selector__drop_button img{transform:rotate(180deg)}.selector__input::placeholder{color:var(--color-text-secondary)}.selector__input:hover{border:1px solid var(--color-primary)}.selector__input:focus{outline:none;border:1px solid var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.selector:has(.selector__drop_button:hover) .selector__input{border-color:var(--color-primary)}.selector:has(.dropdown_menu-visible) .selector__input{border-color:var(--color-primary);box-shadow:0 0 0 1px var(--color-primary)}.dropdown_menu{opacity:0;visibility:hidden;pointer-events:none;position:absolute;top:52px;width:100%;min-width:300px;padding:var(--space-8);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);box-shadow:var(--shadow-e2);box-sizing:border-box;display:flex;flex-direction:column;justify-content:start;align-items:stretch;gap:var(--space-4);z-index:1;transform:translateY(-6px);transition:opacity var(--animation-normal) ease,transform var(--animation-fast) ease,visibility 0s linear var(--animation-normal)}.dropdown_menu-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity var(--animation-normal) ease,transform var(--animation-fast) ease,visibility 0s}.dropdown_menu--item{position:relative;padding:var(--space-2) var(--space-12);text-align:start;border:1px solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);cursor:pointer;transition:background-color var(--animation-normal);display:flex;justify-content:space-between;align-items:center}.dropdown_menu--item span{text-align:center}.dropdown_menu--item:hover{color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 10%,var(--color-surface))}.dropdown_menu--item:not(:last-child):after{position:absolute;inset:35px 12px 0;content:"";width:calc(100% - 24px);height:1px;border:none;border-radius:var(--radius-xs);background:var(--color-border);align-self:center;cursor:pointer}.calendar{display:grid;grid-template-columns:1fr 10fr 1fr;grid-template-rows:1fr;grid-template-areas:"prev body next"}.calendar__btn{border:none;border-radius:var(--radius-xs);background-color:transparent;cursor:pointer;transition:background-color var(--animation-normal)}.calendar__btn:hover{color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 10%,var(--color-surface))}.calendar__btn:disabled{color:var(--color-text-secondary);cursor:not-allowed}.calendar__body{grid-area:body;margin:auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.calendar__prev{grid-area:prev}.calendar__next{grid-area:next}.calendar__title{padding:0 var(--space-8);text-transform:capitalize;align-self:stretch;display:flex;justify-content:space-between}.date-picker{display:flex;flex-direction:column;padding:var(--space-8);gap:2px}.date-picker__day-name{width:30px;height:17px;text-align:center;line-height:17px;color:var(--color-text-secondary)}.date-picker__day-name span{display:inline-block}.date-picker__week{display:flex;gap:2px}.date-picker__day{width:30px;height:32px;padding:0;text-align:center;border:none;border-radius:var(--radius-xs);background-color:var(--color-bg);cursor:pointer;transition:background-color var(--animation-normal)}.date-picker__day:not(.date-picker__day--no-active):hover{color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 10%,var(--color-surface))}.date-picker__day--no-active{color:var(--color-bg);background-color:color-mix(in srgb,var(--color-bg) 30%,var(--color-surface));cursor:default}.balance-block{display:flex;justify-content:start;align-items:baseline;gap:var(--space-8)}.balance-block__balance--remained--success{color:var(--color-success)}.balance-block__balance--remained--zero{color:var(--color-text-secondary)}.balance-block__balance--remained--error{color:var(--color-error)}.balance-block__balance--available{position:relative;margin-left:var(--space-16);color:var(--color-text-secondary)}.balance-block__balance--available:before{content:"/";position:absolute;top:45%;transform:translateY(-50%) translate(-170%);margin:0 var(--space-4)}.balance-block__day,.balance-block__wasted-comment{color:var(--color-text-secondary)}.transactions-list{display:flex;flex-direction:column;gap:var(--space-8);height:100px;overflow:auto scroll}.transactions-list--full{flex:1 1 auto;min-height:0;overflow-y:auto;padding:var(--space-12);border:solid 1px var(--color-border);border-radius:var(--radius-xs)}.transaction-card{position:relative;display:flex;justify-content:space-between}.transaction-card:not(:last-child):after{content:"";position:absolute;width:100%;height:1px;inset:35px 0 0;border:none;border-radius:var(--radius-xs);background:var(--color-border);align-self:center;cursor:pointer}.transaction-card__date{color:var(--color-text-secondary)}