:root { color: #1c2925; background: #f4f7f5; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: #f4f7f5; }
button, input, textarea { font: inherit; }
button { border: 0; cursor: pointer; }
.shell { max-width: 680px; min-height: 100vh; margin: 0 auto; padding-bottom: 96px; }
.hero { padding: calc(env(safe-area-inset-top) + 36px) 24px 32px; color: #fff; background: linear-gradient(135deg, #075f4c, #0b8a6d); }
.eyebrow { opacity: .78; font-size: 13px; letter-spacing: .08em; }
h1 { margin: 10px 0 0; font-size: 29px; letter-spacing: -.04em; }
.hero p { margin: 10px 0 0; opacity: .86; font-size: 14px; }
.content { padding: 18px; }
.mode { display: inline-flex; margin: 0 0 14px; padding: 7px 10px; border-radius: 999px; color: #76610b; background: #fff4c8; font-size: 12px; }
.toolbar .mode { margin: 0; }
.connect { padding: 8px 10px; border-radius: 9px; color: #08745c; background: #e1f3ec; font-size: 12px; font-weight: 700; white-space: nowrap; }
.toolbar, .tabs, .section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tabs { justify-content: flex-start; overflow-x: auto; margin: 0 0 16px; }
.tab { padding: 9px 13px; border-radius: 999px; color: #66736f; background: #fff; white-space: nowrap; }
.tab.active { color: #075f4c; background: #d7f0e7; font-weight: 700; }
.card { margin: 0 0 12px; padding: 18px; border-radius: 18px; background: #fff; box-shadow: 0 7px 24px rgba(14, 52, 42, .07); }
.task { display: block; width: 100%; text-align: left; color: inherit; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.badge { display: inline-block; padding: 5px 8px; border-radius: 7px; color: #b94b23; background: #fff0eb; font-size: 12px; }
.badge.offline { color: #897005; background: #fff6d5; }
.status { color: #08745c; font-size: 13px; font-weight: 700; }
.store { margin: 15px 0 6px; font-size: 19px; font-weight: 800; }
.muted, .meta { color: #76827e; font-size: 14px; line-height: 1.55; }
.meta { margin-top: 9px; font-size: 13px; }
.empty { margin-top: 90px; text-align: center; color: #76827e; }
.back { padding: 0; color: #08745c; background: transparent; font-weight: 700; }
.label { margin-bottom: 8px; color: #76827e; font-size: 12px; }
.detail-title { margin: 12px 0 20px; font-size: 26px; }
.device { padding: 12px 0; border-top: 1px solid #edf1ef; }
.device:first-child { padding-top: 0; border-top: 0; }
.primary, .secondary { width: 100%; margin-top: 12px; padding: 14px 16px; border-radius: 12px; color: #fff; background: #08745c; font-weight: 750; }
.secondary { color: #075f4c; background: #d7f0e7; }
.bottom { position: fixed; right: 0; bottom: 0; left: 0; z-index: 2; padding: 12px max(18px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.94); backdrop-filter: blur(10px); }
.bottom button { display: block; width: min(644px, 100%); margin: 0 auto; }
.field { width: 100%; margin: 6px 0 14px; padding: 13px; border: 1px solid #d9e2de; border-radius: 12px; background: #fff; }
textarea.field { min-height: 102px; resize: vertical; }
.photo-list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.photo { position: relative; width: 92px; height: 92px; overflow: hidden; border-radius: 12px; background: #e7eeeb; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; color: #fff; background: rgba(0,0,0,.58); }
.notice { margin-bottom: 14px; padding: 11px 13px; border-radius: 10px; color: #8d351e; background: #fff0eb; font-size: 13px; }
.login { max-width: 440px; margin: 14vh auto 0; }
.login h1 { color: #075f4c; }
@media (min-width: 681px) { .shell { box-shadow: 0 0 50px rgba(24, 65, 53, .12); } }