* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #1a1d23 0%, #0f1114 100%);
    color: #eaeef2;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 24px;
    line-height: 1.5;
    min-height: 100vh;
    overscroll-behavior: contain;
}

#rnbo-root {
    min-height: 100dvh; /* allow full-page vertical scroll; dynamic viewport height */
    width: 100vw;
    display: flex;
    flex-direction: column;
    margin: auto;
    max-width: 800px;
    padding: 36px 24px 24px 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.header {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-bottom: 24px;
}

.header h1 {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #eaeef2;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.power-section { display: none; }

#power-canvas {
    cursor: pointer;
    display: block;
}

.divider {
    width: 100%;
    height: 1px;
    background: #374151;
    margin: 12px 0px;
}

.version-text { color: #6f747a; font-size: 16px; text-align: center; }

.dials-scroll {
    overflow-x: auto;
    overflow-y: visible; /* let page handle vertical scroll; do not clip grid */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    margin-bottom: 12px; /*this helps avois clipping bottom values*/
    padding-left: max(12px, calc((100% - ((140px * 3) + (12px * 2))) / 2));
    padding-right: max(12px, calc((100% - ((140px * 3) + (12px * 2))) / 2));
    padding-bottom: 12px; /* retain bottom gutter */
    display: block;
    width: 100%;
}

.dials-grid {
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: repeat(2, 180px);
    grid-template-columns: repeat(3, 140px);
    gap: 12px;
    justify-content: start;
    align-content: start;
    width: max-content;
    scroll-snap-align: start;
}

.dial-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 140px;
}

.dial-container canvas {
    cursor: pointer;
    display: block;
    touch-action: none; /* prevent page scroll while dragging */
}