:root{--color-primary: #007AFF;--color-background: #ffffff;--color-surface: #f5f5f7;--color-text: #1d1d1f;--color-text-secondary: #86868b;--color-border: #d2d2d7;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--spacing-unit: 8px;--border-radius: 12px;--ruler-bg: #f9f9f9;--ruler-mark: #333}@media(prefers-color-scheme:dark){:root{--color-background: #000000;--color-surface: #1c1c1e;--color-text: #f5f5f7;--color-text-secondary: #86868b;--color-border: #38383a;--ruler-bg: #111;--ruler-mark: #ccc}}body{margin:0;font-family:var(--font-family);background-color:var(--color-background);color:var(--color-text);overflow:hidden}#app{width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}#ruler-container{width:100%;height:60vh;background:var(--ruler-bg);border-bottom:1px solid var(--color-border);position:relative}.control-panel{position:fixed;bottom:20px;background:var(--color-surface);padding:16px;border-radius:var(--border-radius);box-shadow:0 4px 12px #0000001a;display:flex;gap:16px;align-items:center}.unit-toggles{display:flex;background:var(--color-border);border-radius:8px;padding:2px}.unit-toggles button{background:transparent;border:none;padding:8px 16px;border-radius:6px;cursor:pointer;color:var(--color-text);font-weight:500}.unit-toggles button.active{background:var(--color-background);box-shadow:0 2px 4px #0000000d}#calibrate-btn,#save-calibration{background:var(--color-primary);color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:600}#cancel-calibration.secondary{background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border)}#cancel-calibration.secondary:hover{background:var(--color-border)}.modal-actions{display:flex;gap:12px;justify-content:center;margin-top:20px}.calibration-modal{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:var(--color-background);padding:24px;border-radius:var(--border-radius);width:90%;max-width:400px;text-align:center}.card-container{display:flex;justify-content:center;margin:20px 0;background:#eee;padding:20px;border-radius:8px}.credit-card-box{background:#007aff;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;box-shadow:0 4px 8px #0003}.hidden{display:none!important}