:root{--bg: #eef2f6;--panel: #ffffff;--ink: #1b2430;--muted: #6c7a8a;--accent: #2c6ae4;--accent-soft: #dfe9ff;--shadow: 0 20px 50px rgba(27, 36, 48, .08);--radius-lg: 20px;--radius-sm: 12px}*{box-sizing:border-box}html,body{width:100%;max-width:100%;overflow-x:hidden}body{margin:0;font-family:IBM Plex Sans,Avenir Next,Trebuchet MS,sans-serif;color:var(--ink);background:radial-gradient(circle at 15% 15%,#f7f9fc,#eef2f6 55%,#e7ecf3)}#app{min-height:100vh;width:100%;max-width:100%}.app{display:flex;flex-direction:column;min-height:100vh;gap:20px;padding:24px 28px 36px;width:100%;max-width:100%}.topbar{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border-radius:var(--radius-lg);padding:14px 22px;box-shadow:var(--shadow);min-width:0}.brand{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:.2px}.brand-mark{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#2c6ae4,#6cc0ff);display:grid;place-items:center;color:#fff;font-weight:700}.top-actions{display:flex;align-items:center;gap:16px;color:var(--muted);font-size:.92rem;flex-wrap:wrap;min-width:0}.top-meta{display:flex;align-items:center;gap:12px}.layout{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;flex:1;min-width:0}.layout>*{min-width:0}.selection-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:start;min-width:0}.selection-layout>*{min-width:0}.sidebar{background:var(--panel);border-radius:var(--radius-lg);padding:18px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:14px}.sidebar h2{margin:0;font-size:.92rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--muted);font-size:.95rem}.nav-item.active{background:var(--accent-soft);color:var(--accent);font-weight:600}.nav-dot{width:10px;height:10px;border-radius:50%;background:#c7d3e2}.nav-item.active .nav-dot{background:var(--accent)}.panels{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;min-width:0}.card{background:var(--panel);border-radius:var(--radius-lg);padding:18px 18px 16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;min-width:0}.progress-vertical{background:var(--panel);border-radius:var(--radius-lg);padding:18px 18px 16px;box-shadow:var(--shadow);display:grid;gap:18px;position:sticky;top:20px;align-self:start;min-width:0}.progress-details{display:grid;gap:6px}.progress-label{font-size:.8rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}.progress-steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;position:relative}.progress-step{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:center;position:relative;color:var(--muted)}.progress-dot{width:20px;height:20px;border-radius:50%;border:2px solid #c7d3e2;display:inline-block;position:relative;background:#fff}.progress-step.complete{color:var(--ink)}.progress-step.complete .progress-dot{border-color:#2c6ae4;background:#2c6ae4}.progress-step.complete .progress-dot:after{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;background:#fff;border-radius:50%}.progress-line{position:absolute;left:9px;top:28px;width:4px;height:calc(100% + 10px);background:#d7e0ec;border-radius:999px}.progress-step.complete .progress-line{background:#2c6ae4}.progress-meta{margin:0;font-size:.85rem;color:var(--muted)}.card-header{display:flex;align-items:center;gap:10px}.step{font-size:1.4rem;font-weight:700;color:var(--accent)}.card h3{margin:0;font-size:1rem}.field{display:flex;flex-direction:column;gap:6px;font-size:.88rem;color:var(--muted)}.helper-text{font-size:.78rem;color:#8a99ad}.field-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.machine-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:4px}.toggle-button{border:1px solid #d4dbe6;background:#f8fafc;padding:10px 12px;border-radius:12px;font-size:.9rem;color:var(--muted);cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}.toggle-button:hover{border-color:#b8c3d6;background:#eef3fb;color:var(--ink)}.toggle-button.active{border-color:#2c6ae4;background:#dfe9ff;color:var(--accent);font-weight:600}.checkbox-field{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}.checkbox-stack{display:grid;gap:10px}.checkbox-field input{width:18px;height:18px}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #d4dbe6;background:#f8fafc;padding:10px 12px;border-radius:10px;font-size:.95rem;color:var(--ink);background-image:linear-gradient(45deg,transparent 50%,#70819a 50%),linear-gradient(135deg,#70819a 50%,transparent 50%);background-position:calc(100% - 18px) 16px,calc(100% - 13px) 16px;background-size:5px 5px;background-repeat:no-repeat;width:100%;min-width:0}.text-input{border:1px solid #d4dbe6;background:#f8fafc;padding:10px 12px;border-radius:10px;font-size:.95rem;color:var(--ink);width:100%;min-width:0}.text-area{resize:vertical;min-height:80px}.text-input::placeholder{color:#8a99ad}.button{border:none;background:var(--accent);color:#fff;padding:10px 16px;border-radius:999px;font-size:.9rem;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 10px 20px #2c6ae433}.button:hover{transform:translateY(-1px)}.button.secondary{background:#edf2ff;color:var(--accent);box-shadow:none;border:1px solid #c7d7ff}.button.ghost{background:#fff;color:var(--ink);border:1px solid #d4dbe6;box-shadow:none}.button:disabled{opacity:.5;cursor:not-allowed;transform:none}.account-results{display:grid;gap:8px;width:100%}.account-empty{font-size:.85rem;color:var(--muted)}.account-result{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}.account-result button{border:1px solid #d4dbe6;background:#f8fafc;padding:8px 10px;border-radius:10px;font-size:.88rem;color:var(--ink);text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;width:100%}.account-result button span{font-size:.78rem;color:var(--muted);overflow-wrap:anywhere;word-break:break-word}.account-result button:hover{border-color:#b8c3d6;background:#eef3fb}.account-link{white-space:nowrap}.preview{background:var(--panel);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px;position:sticky;top:20px;align-self:start;min-width:0}.preview-header{display:flex;align-items:center;justify-content:space-between;font-size:.95rem;color:var(--muted)}.summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;font-size:.85rem;color:var(--muted)}.summary span{display:block;padding:8px 10px;border-radius:10px;background:#f4f7fb}.summary-list{display:grid;gap:12px;font-size:.9rem}.summary-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;background:#f4f7fb;color:var(--muted);gap:12px}.summary-row strong{color:var(--ink);font-weight:600;overflow-wrap:anywhere;word-break:break-word;text-align:right}.summary-empty{margin:0;color:var(--muted);font-size:.9rem}.preview-actions{display:grid;gap:10px}.action-status,.action-error{margin:0;font-size:.85rem}.action-status{color:var(--accent)}.action-error{color:#b42318}.product-search{display:grid;gap:12px;width:100%}.product-results{display:grid;gap:8px;width:100%}.product-result-row{display:flex;align-items:center;gap:12px;width:100%}.product-result{border:1px solid #d4dbe6;background:#fff;padding:10px 12px;border-radius:12px;font-size:.9rem;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;flex:1;min-width:0}.product-result>div{min-width:0}.product-result>div>strong,.product-result>div>span{display:block;font-size:.78rem;color:var(--muted);overflow-wrap:anywhere;word-break:break-word}.product-result>div>strong{font-size:.9rem;color:var(--ink);margin-bottom:2px}.product-result:hover{border-color:#b8c3d6;background:#f4f7fb}.product-link{white-space:nowrap}.product-pill{padding:4px 10px;background:#e8efff;border-radius:999px;font-size:.75rem;color:var(--accent);font-weight:600;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;word-break:normal;overflow-wrap:normal;flex-shrink:0}.product-selected{display:grid;gap:12px}.product-card{border:1px solid #d4dbe6;background:#fff;border-radius:16px;padding:14px 16px;display:grid;gap:10px;box-shadow:0 10px 20px #1b24300f}.product-card.selected{border-color:#2c6ae4;box-shadow:0 12px 24px #2c6ae42e}.product-card-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.product-card-actions{display:flex;align-items:center}.quantity-controls{display:inline-flex;align-items:center;gap:8px;background:#f4f7fb;border-radius:999px;padding:4px 6px}.quantity-button{border:1px solid #d4dbe6;background:#fff;color:var(--ink);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:1rem;line-height:1}.quantity-button:disabled{opacity:.5;cursor:not-allowed}.quantity-value{font-size:.85rem;color:var(--ink);min-width:16px;text-align:center}.product-card h4{margin:0;font-size:.98rem;color:var(--ink)}.product-code{font-size:.8rem;color:var(--muted);overflow-wrap:anywhere;word-break:break-word}.product-description{margin:0;color:var(--muted);font-size:.88rem;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.product-description.expanded{-webkit-line-clamp:initial}.product-grid{display:grid;gap:12px}.link-button{border:none;background:none;color:var(--accent);font-size:.82rem;cursor:pointer;padding:0;text-align:left}.product-empty{font-size:.85rem;color:var(--muted)}.admin-actions{display:grid;gap:10px}.view-header{display:flex;align-items:center;gap:16px}.view-label{font-size:.95rem;color:var(--muted)}.ghost{border:1px solid #d4dbe6;background:#fff;color:var(--ink);padding:8px 14px;border-radius:999px;font-size:.9rem;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}.ghost:hover{border-color:#b8c3d6;background:#f4f7fb}.home{background:var(--panel);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow);display:grid;gap:24px;min-width:0}.home-hero h1,.service-card h1{margin:8px 0;font-size:2rem}.home-hero p,.service-card p{margin:0;color:var(--muted);max-width:520px}.eyebrow{margin:0;font-size:.75rem;text-transform:uppercase;letter-spacing:1.6px;color:var(--accent);font-weight:600}.home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.home-card{border:1px solid #d4dbe6;background:linear-gradient(145deg,#fff,#f3f7ff);padding:18px;border-radius:var(--radius-lg);text-align:left;cursor:pointer;display:grid;gap:8px;box-shadow:0 16px 30px #1b243014;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;text-decoration:none;color:inherit}.home-card h2{margin:0;font-size:1.1rem}.home-card p{margin:0;color:var(--muted)}.home-card span{font-size:.85rem;color:var(--accent);font-weight:600}.home-card:hover{border-color:#a9bddf;transform:translateY(-2px)}.auth-shell{flex:1;display:grid;place-items:center;padding:20px;gap:24px}.auth-card{width:min(420px,100%);background:var(--panel);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow);display:grid;gap:18px;min-width:0}.auth-card--wide{width:min(720px,100%)}.auth-header h1{margin:6px 0;font-size:clamp(1.8rem,3vw,2.3rem)}.auth-header p{margin:0;color:var(--muted)}.auth-form{display:grid;gap:14px}.auth-field{display:grid;gap:6px;font-size:.92rem;color:var(--muted)}.auth-field input{border:1px solid #d7dee8;border-radius:var(--radius-sm);padding:10px 12px;font-size:1rem;color:var(--ink);width:100%;min-width:0}.auth-error{margin:0;color:#b42318;background:#fdecec;border-radius:10px;padding:8px 10px;font-size:.9rem}.auth-success{margin:0;color:#0f5132;background:#e6f4ea;border-radius:10px;padding:8px 10px;font-size:.9rem}.auth-field select{border:1px solid #d7dee8;border-radius:var(--radius-sm);padding:10px 12px;font-size:1rem;color:var(--ink);background:#fff;width:100%;min-width:0}.auth-help{margin:0;font-size:.85rem;color:var(--muted)}.table-wrap{overflow-x:auto}.data-table{width:100%;border-collapse:collapse;font-size:.95rem}.data-table th,.data-table td{text-align:left;padding:10px 8px;border-bottom:1px solid #e2e8f0}.table-form{display:flex;align-items:center;gap:8px}.table-form input{border:1px solid #d7dee8;border-radius:var(--radius-sm);padding:8px 10px;font-size:.95rem;flex:1}.primary-button{border:none;background:var(--accent);color:#fff;border-radius:999px;padding:10px 18px;font-weight:600;cursor:pointer}.text-button{border:none;background:transparent;color:var(--accent);font-weight:600;cursor:pointer;padding:0;text-decoration:none}.auth-info{display:flex;align-items:center;gap:8px}.role-chip{background:var(--accent-soft);color:var(--accent);border-radius:999px;padding:2px 8px;font-size:.75rem;text-transform:uppercase;letter-spacing:.6px}.service{display:grid;place-items:center;padding:40px 0}.service-card{background:var(--panel);border-radius:var(--radius-lg);padding:28px;box-shadow:var(--shadow);display:grid;gap:16px;text-align:left;min-width:0}@media (max-width: 1200px){.layout,.panels,.selection-layout{grid-template-columns:1fr}.progress-vertical,.preview{position:static}.home-grid{grid-template-columns:1fr}}@media (max-width: 720px){.app{padding:12px;gap:12px}.topbar{flex-direction:column;align-items:flex-start;gap:10px;padding:12px 14px}.top-actions{width:100%;align-items:flex-start;gap:10px}.top-meta{display:none}.auth-info{max-width:100%}.auth-info span:first-child{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.view-header{flex-wrap:wrap;gap:10px}.view-label{width:100%;font-size:.88rem}.layout,.selection-layout,.panels{gap:12px}.card,.progress-vertical,.preview,.home,.service-card,.auth-card{padding:14px}.field-row{flex-direction:column;align-items:stretch}.field-row>*{width:100%}.machine-toggle{grid-template-columns:1fr}.account-result,.product-result-row,.summary-row,.product-card-header{flex-direction:column;align-items:flex-start}.account-results,.product-results{width:calc(100% + 28px);margin-inline:-14px}.account-result,.product-result-row{width:100%;padding-inline:14px}.account-result button,.product-result{width:100%}.account-link,.product-link{white-space:normal;overflow-wrap:anywhere;word-break:break-word;align-self:flex-start}.product-result{width:100%}.summary-row strong{text-align:left;width:100%}.preview-actions .button,.primary-button{width:100%}.table-form{flex-wrap:wrap}.account-results,.summary{grid-template-columns:1fr}}