/* REMARK: DASHBOARD UI v1.0-002 
   Fixes the 'Large Circle' issue and optimizes for iPhone 12 screen.
*/
:root {
    --bg: #09090b;
    --card: #18181b;
    --accent: #3b82f6;
    --text: #fafafa;
    --muted: #71717a;
    --border: #27272a;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body { 
    background: var(--bg); color: var(--text); 
    font-family: -apple-system, sans-serif; height: 100vh; overflow: hidden; 
}

.app-shell { height: 100%; display: flex; flex-direction: column; padding: 16px; padding-top: env(safe-area-inset-top); }

/* THE FIX: Progress Ring Dimensions */
.dashboard-header { display: flex; justify-content: center; padding: 10px 0; }
.progress-container { 
    position: relative; 
    width: 160px;  /* Constraints the circle size */
    height: 160px; 
    cursor: pointer; 
}

.ring { transform: rotate(-90deg); width: 100%; height: 100%; }
.ring-bg { fill: none; stroke: var(--border); stroke-width: 10; }
.ring-progress { 
    fill: none; stroke: var(--accent); stroke-width: 10; 
    stroke-linecap: round; 
    stroke-dasharray: 283; /* Matches the math in dashLogic.js */
    stroke-dashoffset: 283; 
    transition: stroke-dashoffset 0.8s ease-out;
}

.ring-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.ring-label span { display: block; font-size: 24px; font-weight: 800; }
.ring-label label { font-size: 9px; color: var(--muted); font-weight: 700; letter-spacing: 1px; }

/* NAVIGATION */
.main-nav { display: flex; gap: 4px; margin: 16px 0; background: var(--card); padding: 4px; border-radius: 12px; }
.nav-btn { 
    flex: 1; background: transparent; border: none; color: var(--muted);
    padding: 10px 0; border-radius: 8px; font-size: 10px; font-weight: 700; 
}
.nav-btn.active { background: var(--bg); color: var(--text); }

/* VIEWPORT */
.view-container { flex: 1; overflow-y: auto; }
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; margin-bottom: 12px; }

.footer { text-align: right; padding: 4px 0; }
#build-stamp { font-size: 9px; color: #3f3f46; font-family: monospace; }