:root{--bg-body:#0e1826;--bg-body-alt:#142236;--bg-panel:#162740;--bg-panel-alt:#1b2f4c;--bg-input:#1c3049;--bg-input-hover:#24395a;--accent:#ef7d40;--accent-soft:#f5a06c;--accent-dark:#c9642e;--accent-blue:#4a90f5;--accent-blue-dark:#3672d1;--text-white:#f4f7fb;--text-label:#92a8c9;--text-muted:#6a80a1;--border:#24395a;--border-strong:#32517c;--btn-clear:#35507a;--success:#35bd72;--success-dark:#24925a;--danger:#f2685f;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--shadow-sm:0 2px 8px #040a1659;--shadow-md:0 10px 28px #040a1673;--shadow-glow:0 0 0 3px #ef7d4040;--font-body:"Inter", system-ui, sans-serif;--font-mono:"Roboto Mono", ui-monospace, monospace}*{box-sizing:border-box}html{scrollbar-gutter:stable}html,body,#root{height:100%}body{background:radial-gradient(ellipse at top, var(--bg-body-alt) 0%, var(--bg-body) 55%) fixed;color:var(--text-white);font-family:var(--font-body);margin:0}button,input,select{font-family:inherit}.field-group{flex-direction:column;gap:6px;display:flex}.field-group>label{text-transform:uppercase;color:var(--text-label);letter-spacing:.5px;font-size:11px;font-weight:700}.plain-input,.plain-select{background:var(--bg-input);border:1.5px solid var(--border);border-radius:var(--radius-sm);width:100%;height:44px;color:var(--text-white);padding:0 14px;font-size:13px;transition:all .15s}.plain-input:focus,.plain-select:focus{border-color:var(--accent);background:var(--bg-input-hover);box-shadow:var(--shadow-glow);outline:none}.clearable-input{width:100%;display:block;position:relative}.clearable-input>input{width:100%;padding-right:34px}.clearable-input-clear{background:var(--bg-input-hover);width:22px;height:22px;color:var(--text-label);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:11px;transition:all .15s;display:flex;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.clearable-input-clear:hover{background:var(--danger);color:#fff}.row{gap:14px;display:flex}.row>*{flex:1;min-width:0}@media (width<=520px){.row{flex-direction:column}}.selection-menu-trigger-wrap{position:relative}.selection-menu-trigger{background:var(--bg-input);border:2px solid var(--border);border-radius:var(--radius-sm);width:100%;height:44px;color:var(--text-white);text-align:left;cursor:pointer;align-items:center;padding:0 38px 0 14px;font-size:13px;transition:all .15s;display:flex}.selection-menu-trigger-wrap.has-value .selection-menu-trigger{padding-right:62px}.selection-menu-trigger:hover{border-color:var(--accent);background:var(--bg-input-hover)}.selection-menu-trigger-text{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.selection-menu-trigger-icon{color:var(--text-label);pointer-events:none;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.selection-menu-clear{background:var(--bg-input-hover);width:22px;height:22px;color:var(--text-label);cursor:pointer;z-index:2;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:11px;transition:all .15s;display:flex;position:absolute;top:50%;right:34px;transform:translateY(-50%)}.selection-menu-clear:hover{background:var(--danger);color:#fff}.selection-menu-hint{color:var(--text-muted);border-bottom:1px solid var(--border);padding:10px 14px;font-size:11.5px}.selection-menu-hint kbd{background:var(--bg-input);border:1px solid var(--border-strong);font-family:var(--font-mono);color:var(--text-white);border-radius:4px;padding:1px 5px;font-size:10.5px}.selection-menu-overlay{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1000;background:#060c18a6;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.selection-menu-panel{background:var(--bg-panel);border:1px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);flex-direction:column;width:min(760px,100%);max-height:min(600px,90vh);display:flex;overflow:hidden}.selection-menu-panel-header{border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:14px;display:flex}.selection-menu-panel-header .clearable-input{flex:1}.selection-menu-search{background:var(--bg-input);border:2px solid var(--border);border-radius:var(--radius-sm);height:40px;color:var(--text-white);padding:0 14px;font-size:13px}.selection-menu-search:focus{border-color:var(--accent);outline:none}.selection-menu-close{color:var(--text-label);cursor:pointer;border-radius:var(--radius-sm);background:0 0;border:none;width:36px;height:36px;font-size:16px}.selection-menu-close:hover{background:var(--bg-input);color:var(--text-white)}.selection-menu-table-wrap{flex:1;overflow:auto}.selection-menu-table{border-collapse:collapse;width:100%;font-size:12.5px}.selection-menu-table thead th{background:var(--bg-panel);text-align:left;color:var(--text-label);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border-strong);padding:8px 12px;font-size:10.5px;position:sticky;top:0}.selection-menu-table tbody td{border-bottom:1px solid var(--border);vertical-align:top;color:var(--text-white);padding:9px 12px}.selection-menu-table tbody tr{cursor:pointer}.selection-menu-table tbody tr:hover{background:var(--bg-input)}.selection-menu-table tbody tr.selected{background:#ef7d4026}.selection-menu-empty{text-align:center;color:var(--text-muted);padding:24px 12px!important}.selection-menu-footer{border-top:1px solid var(--border);justify-content:flex-end;padding:10px 14px;display:flex}.selection-menu-done{background:var(--accent);color:var(--text-white);border-radius:var(--radius-sm);cursor:pointer;border:none;padding:8px 18px;font-size:12.5px;font-weight:700}.color-swatch{vertical-align:middle;border:1px solid #ffffff59;border-radius:4px;width:16px;height:16px;margin-right:6px;display:inline-block}.lis-label-stage{justify-content:center;align-items:center;padding:4px 0 6px;display:flex}.lis-label-frame{width:260px;height:260px}.lis-label-frame svg{filter:drop-shadow(0 10px 22px #040a1673);width:100%;height:100%;display:block}.lis-form{flex-direction:column;gap:18px;display:flex}.viscosity-field{gap:10px;display:flex}.viscosity-system-switch{background:var(--bg-input);border:2px solid var(--border);border-radius:var(--radius-sm);flex-shrink:0;display:flex;overflow:hidden}.viscosity-system-switch button{color:var(--text-label);cursor:pointer;background:0 0;border:none;height:40px;padding:0 12px;font-size:12px;font-weight:700}.viscosity-system-switch button.active{background:linear-gradient(135deg, var(--accent-soft), var(--accent));color:var(--text-white)}.viscosity-field .clearable-input{flex:1}.viscosity-field .plain-input{height:44px}.iso-grease-builder{background:var(--bg-input);border-left:4px solid var(--accent);border-radius:var(--radius-sm);flex-direction:column;gap:12px;padding:14px;display:flex}.iso-grease-builder-title{color:var(--accent);text-transform:uppercase;letter-spacing:.4px;font-size:11px;font-weight:700}.iso-grease-builder-result{color:var(--text-label);font-size:12px}.iso-grease-builder-result strong{color:var(--text-white);font-family:var(--font-mono)}.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-header{background:var(--bg-body-alt);border-bottom:1px solid var(--border);height:50px;box-shadow:var(--shadow-sm);align-items:center;gap:20px;padding:0 22px;display:flex}.app-logo{font-family:var(--font-mono);background:linear-gradient(90deg, var(--accent-soft), var(--accent));color:#0000;letter-spacing:2.5px;-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:900}.header-tabs{align-self:stretch;gap:4px;margin-right:auto;display:flex}.header-tabs button{color:var(--text-label);cursor:pointer;background:0 0;border:none;border-bottom:3px solid #0000;padding:0 14px;font-size:13px;font-weight:700;transition:color .15s,border-color .15s}.header-tabs button:hover{color:var(--text-white)}.header-tabs button.active{color:var(--text-white);border-bottom-color:var(--accent)}.kind-switcher{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);gap:4px;margin-bottom:6px;padding:4px;display:flex}.kind-switcher button{color:var(--text-label);letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;cursor:pointer;background:0 0;border:none;border-radius:6px;flex:1;padding:9px 12px;font-size:12px;font-weight:700;transition:all .15s}.kind-switcher button.active{background:linear-gradient(135deg, var(--accent-soft), var(--accent));color:var(--text-white)}.app-body{flex-direction:column;flex:1;gap:22px;width:100%;max-width:1180px;margin:0 auto;padding:26px;display:flex}.top-mode-switcher,.mode-switcher{background:var(--bg-panel);border-radius:var(--radius-md);border:1px solid var(--border);gap:4px;width:fit-content;padding:5px;display:flex}.top-mode-switcher button,.mode-switcher button{text-align:center;border-radius:var(--radius-sm);cursor:pointer;color:var(--text-label);text-transform:uppercase;background:0 0;border:none;flex:1;padding:11px 22px;font-size:13px;font-weight:800;transition:all .15s}.top-mode-switcher button.active,.mode-switcher button.active{background:linear-gradient(135deg, var(--accent-soft), var(--accent));color:var(--text-white);box-shadow:var(--shadow-sm)}.top-mode-switcher{margin-bottom:-6px}.generator-layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:24px;display:grid}.generator-form-col{flex-direction:column;gap:18px;min-width:0;display:flex}.generator-preview-col{min-width:0}.generator-preview-sticky{flex-direction:column;gap:18px;display:flex;position:sticky;top:22px}@media (width<=900px){.generator-layout{grid-template-columns:1fr}.generator-preview-col{flex-direction:column;align-items:center;display:flex}.generator-preview-sticky{flex-direction:row;align-items:stretch;width:100%;max-width:760px;position:static}.generator-preview-sticky>.panel{flex:1 1 0;min-width:0}}@media (width<=640px){.generator-preview-sticky{flex-direction:column;max-width:420px}}.panel{background:linear-gradient(165deg, var(--bg-panel-alt) 0%, var(--bg-panel) 100%);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:22px}.preview-panel{flex-direction:column;gap:16px;display:flex}.export-bar{flex-direction:column;gap:12px;display:flex}.export-code-row{position:relative}.export-code-display{font-family:var(--font-mono);letter-spacing:.5px;color:var(--accent-soft);background:var(--bg-body);border:1.5px dashed var(--accent);text-align:center;padding-right:40px;font-weight:700}.export-copy-btn{cursor:pointer;color:var(--text-label);background:0 0;border:none;font-size:18px;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.export-copy-btn:hover{color:var(--text-white)}.export-actions{flex-wrap:wrap;gap:10px;display:flex}.btn-primary,.btn-secondary{border-radius:var(--radius-sm);text-transform:uppercase;cursor:pointer;border:none;flex:1;min-width:140px;height:46px;font-size:13px;font-weight:800;transition:all .15s}.btn-primary{background:linear-gradient(135deg, var(--accent-soft), var(--accent));color:var(--text-white);box-shadow:var(--shadow-sm)}.btn-primary:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}.btn-primary:active:not(:disabled){filter:brightness(.97);transform:translateY(0)}.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.btn-secondary{background:var(--btn-clear);color:var(--text-white);box-shadow:var(--shadow-sm)}.btn-secondary:hover{filter:brightness(1.1)}.btn-success{background:linear-gradient(135deg, #4fd58a, var(--success));color:var(--text-white)}.form-error{color:var(--danger);font-size:12px;font-weight:600}.btn-ms{background:linear-gradient(135deg, var(--accent-blue), var(--accent-blue-dark));color:#fff;border-radius:var(--radius-sm);cursor:pointer;border:none;padding:9px 16px;font-size:12px;font-weight:700}.btn-ms:hover{filter:brightness(1.08)}.auth-bar{align-items:center;gap:10px;display:flex}.auth-bar-user{color:var(--text-label);font-size:12px}.auth-bar-disabled{color:var(--text-muted);font-size:11px}.panel-title{color:var(--accent);text-transform:uppercase;letter-spacing:.5px;margin:0;font-size:11px;font-weight:700}.save-to-db{flex-direction:column;gap:14px;display:flex}.save-confirm{background:var(--bg-input);border-left:4px solid var(--accent-blue);border-radius:var(--radius-sm);flex-direction:column;gap:10px;min-width:0;padding:12px;font-size:13px;display:flex}.save-confirm>*{overflow-wrap:break-word;min-width:0}.save-confirm-actions{gap:10px;display:flex}.save-success{color:var(--success);font-size:12px;font-weight:600}.lookup-panel{flex-direction:column;gap:18px;max-width:640px;display:flex}.lookup-input-row{gap:10px;display:flex}.lookup-input-row .clearable-input{flex:1}.lookup-suggestions{flex-direction:column;gap:4px;max-height:260px;margin:0;padding:0;list-style:none;display:flex;overflow-y:auto}.lookup-suggestions button{text-align:left;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;color:var(--text-white);cursor:pointer;flex-direction:column;gap:2px;padding:8px 12px;transition:all .12s;display:flex}.lookup-suggestions button:hover{background:var(--bg-input-hover);border-color:var(--accent)}.lookup-suggestion-code{font-family:var(--font-mono);color:var(--accent-soft);font-size:13px;font-weight:700}.lookup-suggestion-name{color:var(--text-label);font-size:12px}.lookup-breakdown,.lookup-record{flex-direction:column;gap:8px;display:flex}.lookup-breakdown-title{color:var(--accent);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;font-size:11px;font-weight:700}.lookup-record-row{border-bottom:1px solid var(--border);justify-content:space-between;gap:12px;padding-bottom:6px;font-size:13px;display:flex}.lookup-record-row span{color:var(--text-label)}.lookup-record-found{flex-direction:column;gap:8px;display:flex}@media (width<=600px){.app-body{padding:16px}.app-header{padding:14px 16px}.lookup-input-row{flex-direction:column}.lookup-input-row .btn-primary{min-width:0}}