body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}
        * { box-sizing: border-box; }
        body {
            background: linear-gradient(135deg, #f5f5f4 0%, #e7e5e4 100%);
            min-height: 100vh;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            margin: 0; padding: 20px;
        }
        .container { width: 100%; max-width: 800px; margin: 0 auto; }
        .card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
            margin-bottom: 24px;
            padding: 24px;
        }
        .input-group { margin-bottom: 16px; }
        .input-label { display: block; font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 8px; }
        .input-row { display: flex; gap: 8px; width: 100%; align-items: center; }
        .input-field { flex: 1; height: 48px; padding: 0 12px; font-size: 16px; border: 2px solid #d1d5db; border-radius: 8px; width: 100%; }
        .unit-select { height: 48px; padding: 0 8px; border: 2px solid #d1d5db; border-radius: 8px; min-width: 75px; background: #fff; }
        .unit-label-fixed { min-width: 75px; text-align: center; font-weight: 600; color: #6b7280; }
        .calc-button { width: 100%; height: 52px; background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); color: white; font-weight: 700; border-radius: 8px; cursor: pointer; margin-top: 8px; }

        /* Syringe Styles */
        .syringe-viewport { display: flex; align-items: center; justify-content: center; padding: 60px 0; overflow-x: auto; }
        .syringe-wrapper { position: relative; display: flex; align-items: center; height: 100px; }
        .needle { width: 40px; height: 1.5px; background: #94a3b8; }
        .hub { width: 15px; height: 25px; background: #ea580c; border-radius: 2px 0 0 2px; }
        .barrel { width: 400px; height: 44px; border: 2px solid #94a3b8; border-left: none; background: rgba(255,255,255,0.4); position: relative; z-index: 10; }
        .liquid { height: 100%; width: 0%; background: rgba(234, 88, 12, 0.5); position: relative; transition: width 0.5s ease; }
        .stopper { position: absolute; right: 0; top: 0; width: 10px; height: 100%; background: #1e293b; }
        .plunger-rod { height: 16px; width: 400px; background: #cbd5e1; border: 1px solid #94a3b8; position: absolute; left: 55px; z-index: 5; transition: transform 0.5s ease; display: flex; align-items: center; justify-content: flex-end; }
        .thumb-pad { width: 8px; height: 60px; background: #94a3b8; border: 2px solid #64748b; border-radius: 2px; }
        .flange { width: 8px; height: 80px; background: #e2e8f0; border: 2px solid #94a3b8; position: absolute; right: -8px; z-index: 20; }
        .scale { position: absolute; width: 100%; height: 100%; display: flex; justify-content: space-between; padding: 0 2px; z-index: 15; pointer-events: none; }
        .tick { width: 1.5px; height: 8px; background: #334155; align-self: flex-end; margin-bottom: 2px; }
        .tick.long { height: 16px; position: relative; }
        .tick-label { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: bold; }
        .hidden { display: none; }