:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color:#173b34; background:#f7f7f2; }
* { box-sizing:border-box } body { margin:0 } .shell { min-height:100vh; display:grid; grid-template-columns:250px 1fr; }
.landing-body { min-height:100vh; background:radial-gradient(circle at 83% 22%,#b8e864 0 6%,transparent 6.2%),radial-gradient(circle at 78% 75%,#2a6052 0 19%,transparent 19.2%),linear-gradient(135deg,#f4f6ef 0%,#e9efe8 100%); }
.landing { min-height:100vh; max-width:1280px; margin:auto; padding:32px 56px 28px; display:flex; flex-direction:column; }.landing-header { display:flex; justify-content:space-between; align-items:center; }.landing-brand { text-decoration:none; font-weight:900; font-size:18px; color:#153f36; letter-spacing:.08em }.landing-brand span { display:block; margin-top:4px; color:#6d887f; font-size:10px; letter-spacing:.2em }.landing-caption { color:#6f827c; font-size:14px }.landing-hero { flex:1; display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }.landing-copy { max-width:620px }.landing-eyebrow { color:#4d806e; font-size:12px; font-weight:800; letter-spacing:.18em; margin:0 0 18px }.landing-copy h1 { margin:0; font-size:clamp(48px,7vw,88px); letter-spacing:-.06em; color:#163d34; line-height:.98 }.landing-copy > p { margin:28px 0 32px; max-width:500px; color:#5b746d; font-size:20px; line-height:1.55 }.landing-enter { display:inline-flex; align-items:center; gap:28px; padding:17px 22px; background:#16483b; color:#fff; border-radius:12px; text-decoration:none; font-weight:750; box-shadow:0 12px 26px #16483b33 }.landing-enter span { font-size:24px; line-height:12px }.landing-copy small { display:block; margin-top:16px; color:#71827c; font-size:13px }.landing-mark { width:min(360px,76vw); aspect-ratio:1; margin:auto; border-radius:42% 58% 52% 48% / 38% 42% 58% 62%; background:#173f36; color:#eaf7ed; padding:52px; position:relative; box-shadow:22px 25px 0 #b5e967; overflow:hidden }.landing-mark::after { content:""; position:absolute; width:210px; height:210px; border:1px solid #87a79c; border-radius:50%; left:-70px; bottom:-92px }.landing-paw { font-size:52px; line-height:1; filter:grayscale(1) brightness(4); margin-bottom:46px }.landing-mark p { position:relative; z-index:1; margin:0; font-weight:900; font-size:56px; letter-spacing:-.09em; line-height:.8 }.landing-mark span { position:absolute; right:36px; bottom:34px; font-size:11px; letter-spacing:.2em; color:#b9cfc6; text-align:right }.landing footer { color:#778780; font-size:12px; }
aside { background:#153f36; color:#eaf3e9; padding:32px 24px; display:flex; flex-direction:column; gap:48px }
.brand { color:#fff; text-decoration:none; font-weight:800; letter-spacing:.08em; } .brand span,.eyebrow { display:block; font-size:11px; letter-spacing:.14em; color:#88a49b; margin-top:7px; font-weight:700 }
nav { display:grid; gap:8px } nav a { color:#c5d7d1; text-decoration:none; padding:12px; border-radius:9px } nav a.active,nav a:hover { background:#27594d;color:#fff }.notice { margin-top:auto; color:#a9c0b9; font-size:13px; line-height:1.5 }
.content { padding:44px; max-width:1440px; width:100%; margin:auto } header { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:30px } h1 { margin:8px 0 0; font-size:36px } h2 { margin:8px 0 12px; font-size:24px }.status { border-radius:999px; padding:10px 14px; background:#ecefe9; color:#5f756e; font-size:14px }.status.ok { background:#dcf5df; color:#24723c }.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:20px }.cards article,.panel { background:#fff; border:1px solid #dce4dd; border-radius:18px; padding:24px; box-shadow:0 5px 18px #1b3b3210 }.cards p { margin:0;color:#6d807b }.cards strong { display:block; font-size:34px;margin:24px 0 16px }.cards small { color:#7d928c }.panel { margin-top:16px; max-width:800px }.panel p:last-child { color:#647974; line-height:1.6; margin-bottom:0 }
.hidden { display:none !important }.header-actions,.section-title,.toolbar,.dialog-title { display:flex; align-items:center; justify-content:space-between; gap:12px }.section-title { margin-bottom:16px }.primary,.secondary { border:0; border-radius:9px; padding:11px 15px; font:inherit; cursor:pointer; font-weight:700 }.primary { background:#154638; color:white }.secondary { background:#edf1ed; color:#294a41 }.auth-card { max-width:450px; border-top:1px solid #e1e8e1; margin-top:20px; padding-top:18px }.auth-card h3 { margin:0 0 7px }.auth-card p { font-size:14px } form { display:grid; gap:14px } label { display:grid; gap:6px; color:#4f6760; font-size:14px; font-weight:650 } input { border:1px solid #c9d5cd; border-radius:8px; padding:10px; font:inherit; color:#173b34; background:#fff }.toolbar { justify-content:flex-start; border-top:1px solid #e1e8e1; padding-top:18px }.toolbar label { display:flex; align-items:center; gap:10px }.message { min-height:22px; padding-top:12px; color:#277047 }.message.error { color:#ab483b }.table-wrap { margin-top:12px; overflow:auto } table { border-collapse:collapse; width:100%; min-width:800px; text-align:left } th,td { padding:12px 10px; border-bottom:1px solid #e7ece7; font-size:14px } th { color:#6b7f78; font-weight:650 } td strong { font-size:14px; margin:0; display:inline } dialog { border:0; border-radius:16px; box-shadow:0 20px 80px #173b3466; width:min(460px, calc(100% - 32px)); padding:24px } dialog::backdrop { background:#173b3455 }.dialog-title h2 { margin:0 }.close { border:0; background:none; font-size:28px; cursor:pointer; color:#49645b }
.dialog-subtitle { margin:-8px 0 4px; color:#6b8078; font-size:14px }.day-inputs { display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
@media (max-width:800px){.shell{grid-template-columns:1fr}aside{gap:22px;padding:20px}nav{display:flex;overflow:auto}.notice{display:none}.content{padding:24px}header{display:block}.status{display:inline-block;margin-top:16px}.cards{grid-template-columns:1fr 1fr}h1{font-size:29px}.landing{padding:24px}.landing-header{align-items:flex-start}.landing-caption{max-width:130px;text-align:right}.landing-hero{grid-template-columns:1fr;gap:28px;padding:50px 0}.landing-copy h1{font-size:54px}.landing-copy > p{font-size:17px;margin:20px 0 26px}.landing-mark{width:240px;padding:34px}.landing-paw{margin-bottom:30px;font-size:40px}.landing-mark p{font-size:40px}.landing-mark span{right:25px;bottom:22px;font-size:9px}} @media(max-width:450px){.cards{grid-template-columns:1fr}.landing-header{display:block}.landing-caption{display:block;text-align:left;margin-top:18px}}