* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
    margin: 0; padding: 0; height: 100%;
    background: #12141a; color: #eef0f4;
    font-family: -apple-system, Roboto, "Segoe UI", sans-serif;
}
#app { display: flex; flex-direction: column; height: 100%; }
header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 20px 12px; padding-top: calc(20px + env(safe-area-inset-top));
}
header h1 { font-size: 18px; margin: 0; font-weight: 600; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5757; }
.dot.online { background: #57ff9a; }
main { flex: 1; overflow-y: auto; padding: 0 20px 30px; }
p { color: #a6acbb; line-height: 1.5; font-size: 14px; }
.hint { font-size: 12px; color: #6b7180; margin-top: 14px; }
button {
    width: 100%; padding: 15px; border: none; border-radius: 12px;
    background: #6c5ce7; color: white; font-size: 15px; font-weight: 600;
    margin-top: 12px;
}
button:active { opacity: 0.8; }
button.secondary { background: #232635; color: #c7ccd8; }
.card {
    background: #1b1e28; border-radius: 14px; padding: 6px 16px; margin-top: 10px;
}
.card-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0; border-bottom: 1px solid #262a38; font-size: 14px;
}
.card-row:last-child { border-bottom: none; }
.card-row span { color: #a6acbb; }
h2 { font-size: 14px; color: #a6acbb; margin: 24px 0 10px; text-transform: uppercase; letter-spacing: 0.04em; }
#pet-log { list-style: none; margin: 0; padding: 0; }
#pet-log li {
    background: #1b1e28; border-radius: 12px; padding: 12px 14px; margin-bottom: 8px;
    font-size: 14px; display: flex; justify-content: space-between;
}
#pet-log li .when { color: #6b7180; font-size: 12px; }
.hidden { display: none !important; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: #33384a; border-radius: 24px; transition: .2s; }
.slider:before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: .2s; }
input:checked + .slider { background: #6c5ce7; }
input:checked + .slider:before { transform: translateX(20px); }