/* HomeCare — light & dark themes via [data-theme] on */ :root, [data-theme="light"] { --ink: #1a2233; --muted: #667084; --line: #e2e7f0; --bg: #f2f5fa; --card: #ffffff; --card-hover: #fbfcfe; --accent: #3b6ef6; --accent-2: #7c5cf0; --accent-ink: #ffffff; --accent-soft: #e9effe; --accent-soft-ink: #2f5bd0; --danger: #c73838; --danger-soft: #fbeaea; --ok: #1f8a4c; --ok-soft: #e6f5ec; --warn: #b26a12; --warn-soft: #fdf2e0; --shadow: 0 1px 2px rgba(20, 30, 60, .05), 0 6px 20px -8px rgba(20, 30, 60, .12); --grad: linear-gradient(120deg, var(--accent), var(--accent-2)); } [data-theme="dark"] { --ink: #e6eaf3; --muted: #97a1b6; --line: #2a3245; --bg: #10141d; --card: #1a2030; --card-hover: #1f2637; --accent: #6a94ff; --accent-2: #a08bff; --accent-ink: #0d1220; --accent-soft: #223052; --accent-soft-ink: #a9c1ff; --danger: #ff7b7b; --danger-soft: #3a2028; --ok: #5ecb8b; --ok-soft: #1b3327; --warn: #e8b45c; --warn-soft: #38301c; --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -10px rgba(0, 0, 0, .6); --grad: linear-gradient(120deg, #4a72e8, #8a6cf0); } [data-theme="light"] .only-dark { display: none; } [data-theme="dark"] .only-light { display: none; } * { box-sizing: border-box; } html { scrollbar-color: var(--muted) transparent; } body { margin: 0; font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--ink); background: var(--bg); transition: background .25s ease, color .25s ease; } .shell { max-width: 1120px; margin: 0 auto; padding: 0 20px 56px; } .content { margin-top: 20px; } h1 { font-size: 1.55rem; letter-spacing: -.02em; margin: 18px 0 10px; } h2 { font-size: 1.05rem; margin: 4px 0 12px; } h3 { font-size: .95rem; margin: 16px 0 8px; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--muted); } .error { color: var(--danger); background: var(--danger-soft); padding: 10px 14px; border-radius: 10px; font-weight: 600; } /* ------- nav ------- */ .topnav { display: flex; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .topnav a { color: var(--muted); font-weight: 600; padding: 4px 2px; } .topnav a:hover { color: var(--ink); text-decoration: none; } .topnav .brand { font-weight: 800; font-size: 1.12rem; color: var(--ink); display: flex; align-items: center; gap: 8px; } .brand-mark { background: var(--grad); color: #fff; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; } .topnav .spacer { flex: 1; } .username { font-weight: 600; } .inline-form { display: inline; } .linklike { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; font-weight: 600; padding: 0; } .theme-toggle { background: var(--card); border: 1px solid var(--line); border-radius: 999px; width: 36px; height: 36px; cursor: pointer; font-size: 1rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .lang-switch { display: inline-flex; gap: 4px; } .chip { border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px; padding: 3px 10px; font-size: .8rem; font-weight: 700; cursor: pointer; } .chip-on { background: var(--accent-soft); color: var(--accent-soft-ink); border-color: transparent; } /* ------- cards & layout ------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; margin: 16px 0; box-shadow: var(--shadow); } .card.narrow { max-width: 430px; margin: 56px auto; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 840px) { .grid2 { grid-template-columns: 1fr; } } /* ------- stats ------- */ .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; margin: 16px 0; } .stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); } .stat .num { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; } .stat .lbl { color: var(--muted); font-size: .8rem; font-weight: 600; margin-top: 2px; } .stat.alert .num { color: var(--danger); } .stat.good .num { color: var(--ok); } .stat.warn .num { color: var(--warn); } .stat.money .num { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 1.35rem; } /* ------- forms ------- */ label { display: block; margin: 8px 0; font-weight: 600; font-size: .9rem; } input, select, textarea { display: block; width: 100%; margin-top: 5px; padding: 9px 11px; font: inherit; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); } input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent); } textarea { min-height: 70px; resize: vertical; } fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 12px 0; } .formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0 16px; } .checkline { display: flex; gap: 9px; align-items: center; } .checkline input { width: auto; display: inline; margin: 0; } /* ------- buttons ------- */ button, .button { padding: 7px 15px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; font: inherit; font-weight: 600; display: inline-block; transition: transform .06s ease, filter .15s ease; } button:hover, .button:hover { filter: brightness(.97); text-decoration: none; } button:active { transform: translateY(1px); } button.primary { background: var(--grad); border-color: transparent; color: #fff; } button.secondary { background: var(--accent-soft); color: var(--accent-soft-ink); border-color: transparent; } button.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: transparent; } .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ------- tables ------- */ table { width: 100%; border-collapse: collapse; } th { text-align: left; padding: 8px 10px; color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); } td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; } tr:last-child td { border-bottom: none; } tr.overdue td { background: var(--danger-soft); } .badge { background: var(--accent-soft); color: var(--accent-soft-ink); border-radius: 999px; padding: 3px 11px; font-size: .8em; font-weight: 700; } .badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.warn { background: var(--warn-soft); color: var(--warn); } code.invite { font-size: 1.25em; letter-spacing: 3px; background: var(--accent-soft); color: var(--accent-soft-ink); padding: 3px 10px; border-radius: 8px; font-weight: 700; } /* ------- device cards ------- */ .searchbar { position: relative; margin: 14px 0; } .searchbar input { padding-left: 38px; } .searchbar::before { content: "🔍"; position: absolute; left: 12px; top: 50%; transform: translateY(-46%); opacity: .6; } .device-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin: 14px 0; } .device-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); display: block; color: var(--ink); transition: transform .1s ease, border-color .15s; } .device-card:hover { transform: translateY(-2px); border-color: var(--accent); text-decoration: none; } .device-thumb { height: 130px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 2.4rem; position: relative; overflow: hidden; } .device-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .device-body { padding: 12px 14px 14px; } .device-body .name { font-weight: 700; } .device-body .meta { color: var(--muted); font-size: .84rem; margin-top: 2px; } .device-body .tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; } .photo-hero { max-width: 320px; border-radius: 12px; border: 1px solid var(--line); display: block; } /* ------- calendar ------- */ .calendar-nav { display: flex; align-items: center; gap: 16px; margin: 8px 0; } .calendar { table-layout: fixed; } .calendar td { height: 96px; padding: 5px 7px; border: 1px solid var(--line); } .calendar td.outside { background: color-mix(in srgb, var(--bg) 60%, var(--card)); color: var(--muted); } .calendar td.today .daynum { background: var(--grad); color: #fff; border-radius: 999px; padding: 2px 8px; } .daynum { font-weight: 800; font-size: .82em; } .event { display: block; font-size: .76em; margin-top: 3px; padding: 2px 7px; border-radius: 6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event.task { background: var(--accent-soft); color: var(--accent-soft-ink); } .event.warranty { background: var(--warn-soft); color: var(--warn); } .event.done { text-decoration: line-through; opacity: .55; } .legend { display: inline-block; width: 12px; height: 12px; border-radius: 4px; vertical-align: -1px; } .legend.task { background: var(--accent-soft); border: 1px solid var(--accent); } .legend.warranty { background: var(--warn-soft); border: 1px solid var(--warn); } .upload { display: flex; gap: 16px; align-items: end; flex-wrap: wrap; } pre.instructions { white-space: pre-wrap; font: inherit; background: var(--accent-soft); color: inherit; padding: 10px 12px; border-radius: 9px; margin: 6px 0 0; }