:root{--navy:#0f172a;--slate:#475569;--muted:#64748b;--line:#e2e8f0;--surface:#fff;--canvas:#f5f7fb;--primary:#2563eb;--primary-dark:#1d4ed8;--shadow:0 24px 70px rgba(15,23,42,.12)}
*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--navy);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}.login-page{min-height:100vh;display:grid;place-items:center;padding:32px 20px;background:radial-gradient(circle at 15% 15%,rgba(37,99,235,.16),transparent 28%),radial-gradient(circle at 85% 85%,rgba(14,165,233,.13),transparent 30%),#f8fafc}.login-card{width:min(100%,440px);padding:42px;border:1px solid rgba(226,232,240,.8);border-radius:28px;background:rgba(255,255,255,.94);box-shadow:var(--shadow);backdrop-filter:blur(16px)}.brand-mark{width:82px;height:82px;display:grid;place-items:center;margin-bottom:28px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 10px 30px rgba(15,23,42,.08);overflow:hidden}.company-logo{width:100%;height:100%;object-fit:contain;padding:8px}.eyebrow{display:block;margin-bottom:7px;color:var(--primary);font-size:.74rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.login-heading h1,.page-heading h1{margin:0;font-size:clamp(1.8rem,4vw,2.35rem);font-weight:800;letter-spacing:-.04em}.login-heading p,.page-heading p{margin:10px 0 28px;color:var(--muted);line-height:1.6}.field-group{margin-bottom:18px}.field-group label{display:block;margin:0 0 8px;font-size:.86rem;font-weight:700}.input-shell{height:54px;display:flex;align-items:center;gap:12px;padding:0 15px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:.2s}.input-shell:focus-within{border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,.1)}.input-shell>i{color:#94a3b8;font-size:1.1rem}.input-shell input{width:100%;border:0;outline:0;background:transparent;color:var(--navy);font:inherit}.password-toggle{padding:5px;border:0;background:none;color:var(--muted)}.primary-action{width:100%;height:54px;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:26px;border:0;border-radius:14px;background:linear-gradient(135deg,var(--primary),#3b82f6);color:white;font-weight:750;box-shadow:0 10px 24px rgba(37,99,235,.24);transition:.2s}.primary-action:hover{background:linear-gradient(135deg,var(--primary-dark),var(--primary));transform:translateY(-1px)}.primary-action:disabled{opacity:.65;transform:none}.form-message{min-height:22px;margin-top:16px;color:#dc2626;text-align:center;font-size:.88rem}.app-shell{min-height:100vh}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,5vw,72px);border-bottom:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}.app-brand{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand-logo-small{width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);border-radius:13px;background:white;overflow:hidden}.brand-logo-small img{width:100%;height:100%;object-fit:contain;padding:4px}.app-brand>span:last-child{display:flex;flex-direction:column;line-height:1.15}.app-brand small{color:var(--muted);font-size:.68rem}.app-brand strong{font-size:1rem}.logout-button{display:flex;align-items:center;gap:8px;padding:10px 15px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--slate);font-weight:650}.content-wrap{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:56px 0 80px}.page-heading{margin-bottom:30px}.page-heading p{margin-bottom:0}.search-panel{height:66px;display:flex;align-items:center;gap:14px;margin-bottom:36px;padding:8px 9px 8px 20px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(15,23,42,.06)}.search-panel>i{color:#94a3b8;font-size:1.15rem}.search-panel input{min-width:0;flex:1;border:0;outline:0;background:transparent;font:inherit}.search-panel button{height:48px;padding:0 24px;border:0;border-radius:12px;background:var(--navy);color:#fff;font-weight:700}.product-card{height:100%;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--surface);box-shadow:0 8px 24px rgba(15,23,42,.05);transition:.22s}.product-card:hover{transform:translateY(-4px);border-color:#cbd5e1;box-shadow:0 18px 40px rgba(15,23,42,.09)}.product-top{display:flex;justify-content:space-between;gap:10px;margin-bottom:18px}.product-code,.cost-badge{padding:6px 10px;border-radius:8px;font-size:.72rem;font-weight:800}.product-code{background:#eff6ff;color:#1d4ed8}.cost-badge{background:#fff1f2;color:#be123c}.product-title{min-height:48px;margin-bottom:20px;font-size:1rem;font-weight:750;line-height:1.5}.price-row{display:flex;align-items:center;justify-content:space-between;padding:13px 0;border-top:1px solid #f1f5f9}.price-label{color:var(--muted);font-size:.76rem;font-weight:750;text-transform:uppercase}.price-value{font-size:1rem;font-weight:800}.stock-pill{min-width:74px;padding:7px 10px;border-radius:9px;background:#f1f5f9;color:var(--slate);text-align:center;font-size:.78rem;font-weight:750}.stock-pill small{display:block;color:#94a3b8;font-size:.58rem;text-transform:uppercase}.empty-state{padding:70px 20px!important;text-align:center;color:var(--muted)}.empty-state i{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 18px;border-radius:18px;background:#eaf0f9;color:var(--primary);font-size:1.4rem}.empty-state h2{color:var(--navy);font-size:1.1rem}.empty-state p{margin:6px 0}.loading-spinner{width:30px;height:30px;margin:0 auto 15px;border:3px solid var(--line);border-top-color:var(--primary);border-radius:50%;animation:spin .75s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.product-title{margin-bottom:16px}.product-summary{display:flex;align-items:stretch;gap:14px;padding-top:15px;border-top:1px solid #f1f5f9}.main-price{min-width:92px;display:flex;flex-direction:column;justify-content:center}.product-summary .price-label{font-size:.68rem}.product-summary .price-value{font-size:1.12rem;font-weight:850}.stock-list{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;flex:1}.product-summary .stock-pill{min-width:0;padding:7px 4px;line-height:1.1}.product-summary .stock-pill small{margin-bottom:3px;color:#64748b;font-size:.62rem;font-weight:850}.product-summary .stock-pill strong{display:block;color:var(--navy);font-size:.84rem}.product-summary .stock-pill span{color:#94a3b8;font-size:.56rem}
.captcha-row{display:flex;align-items:center;gap:8px}.captcha-question{height:54px;min-width:102px;display:grid;place-items:center;padding:0 12px;border-radius:14px;background:#eff6ff;color:#1d4ed8;font-size:.9rem;font-weight:850;letter-spacing:.04em;white-space:nowrap}.captcha-input{min-width:0;flex:1}.captcha-input input{min-width:0}.captcha-refresh{width:46px;height:46px;flex:0 0 46px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--slate)}.captcha-refresh:hover{color:var(--primary);border-color:#bfdbfe}
@media(max-width:600px){.login-card{padding:30px 24px;border-radius:22px}.topbar{height:68px;padding:0 16px}.logout-button span{display:none}.content-wrap{width:calc(100% - 28px);padding-top:36px}.search-panel{height:auto;padding:10px 10px 10px 16px;flex-wrap:wrap}.search-panel input{height:40px}.search-panel button{width:100%}.captcha-row{flex-wrap:wrap}.captcha-question{flex:1}.captcha-input{flex:1 1 130px}}
.filters-panel{display:grid;grid-template-columns:minmax(260px,1fr) minmax(210px,300px) auto;align-items:center;gap:10px;margin-bottom:36px;padding:9px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(15,23,42,.06)}.search-field,.line-filter{height:48px;display:flex;align-items:center;gap:11px;padding:0 14px;border-radius:12px;background:#f8fafc}.search-field i,.line-filter i{color:#94a3b8}.search-field input,.line-filter select{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--navy);font:inherit}.line-filter{border-left:1px solid var(--line)}.filters-panel>button{height:48px;padding:0 24px;border:0;border-radius:12px;background:var(--navy);color:#fff;font-weight:700}.product-line{display:flex;align-items:center;gap:6px;margin:-9px 0 14px;color:#64748b;font-size:.68rem;font-weight:750;text-transform:uppercase}.product-line i{color:#94a3b8}
@media(max-width:700px){.filters-panel{grid-template-columns:1fr}.line-filter{border-left:0}.filters-panel>button{width:100%}}