html,body,#root{height:100%}body{font-family:Arial,Helvetica,sans-serif;margin:0;padding:0;background:#f5f5f5}.app{max-width:1000px;margin:12px auto;padding:8px;min-height:100vh;display:flex;flex-direction:column}header{display:flex;justify-content:space-between;align-items:center}.card{background:#fff;padding:10px;margin:8px 0;border-radius:6px;box-shadow:0 1px 3px #00000014}.controls{margin:0}main{flex:1;display:flex;flex-direction:column;min-height:0}.top-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}.latest-sample{display:inline-flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:0}.latest-sample div{line-height:1}.latest-top{display:flex;gap:8px;align-items:center}.latest-bottom{font-size:.9rem;color:var(--muted-color,#666);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-row{display:flex;align-items:center;gap:12px;justify-content:space-between;width:100%}.header-left{display:flex;align-items:center;gap:8px}.header-right{display:flex;align-items:center}.temp-value{color:#ff6384;font-weight:600}.hum-value{color:#36a2eb;font-weight:600}.values-group{display:flex;gap:8px;margin-left:8px}.fullwidth-graph{width:100vw;margin-left:calc(50% - 50vw);box-sizing:border-box;display:flex;flex-direction:column;flex:1;min-height:0;max-height:80vh}.fullwidth-graph .graph-top{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;padding:6px 8px;justify-content:space-between}.fullwidth-graph .controls{margin:0;display:inline-flex;align-items:center;gap:8px}.fullwidth-graph .controls.timescale-left{order:0}.graph-spacer{flex:1;min-width:0}.fullwidth-graph .graph-area{flex:1;min-height:0;display:flex;flex-direction:column;padding:0 8px 8px}.fullwidth-graph .graph-area>*{flex:1;min-height:0}.fullwidth-graph .graph-area canvas{width:100%!important;height:100%!important;display:block}@media (max-width: 600px){.app{max-width:none;margin:0;padding:0;height:100vh}.fullwidth-graph{width:100%;margin-left:0;border-radius:0}.fullwidth-graph .graph-top{padding:6px;flex-wrap:wrap}.fullwidth-graph .graph-area{padding:0 4px 4px}.top-row{padding:6px}header{padding:8px}.header-row{gap:6px}}.fullwidth-graph .controls select,.header-left select{background:#fff;border:1px solid #e0e0e0;padding:6px 8px;border-radius:6px}.graph-top .time-left,.graph-top .time-right{color:var(--muted-color, #666);font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}.login-screen{display:flex;align-items:center;justify-content:center;flex:1;min-height:calc(100vh - 120px)}.login-btn{background:#fff;border:1px solid #ddd;padding:16px 28px;font-size:1.25rem;border-radius:8px;cursor:pointer}.login-btn:hover{box-shadow:0 2px 6px #0000000f}.header-right button,.header-right .button,.header-right>button{background:#fff;border:1px solid #e6e6e6;padding:6px 10px;border-radius:6px;cursor:pointer}header h1{margin:0;font-size:1.25rem}.card.small{padding:8px;font-size:.95rem}.graph-time-rail{display:flex;justify-content:space-between;padding:6px 12px 0;font-size:.9rem;color:var(--muted-color, #666);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.graph-time-rail .time-left,.graph-time-rail .time-right{flex:0 0 auto}@media (max-width: 600px){.graph-time-rail{padding:6px 6px 0;font-size:.85rem}}