*{box-sizing:border-box}body{margin:0;font-family:Segoe UI,Arial,sans-serif;background:#eef3fb;color:#1e293b}.app-shell{display:flex;min-height:100vh}.sidebar{width:270px;background:linear-gradient(180deg,#071635,#0f2a5f);color:#fff;padding:22px;position:fixed;top:0;bottom:0;left:0}.logo-box{display:flex;gap:12px;align-items:center;margin-bottom:34px}.logo-box img{width:64px;height:64px;object-fit:contain;border-radius:14px;background:white}.logo-box span{display:block;font-size:12px;opacity:.8}.sidebar nav a{display:block;color:#e5edff;text-decoration:none;padding:13px 14px;border-radius:10px;margin:6px 0;font-weight:600}.sidebar nav a:hover{background:rgba(255,255,255,.13)}.content{margin-left:270px;width:calc(100% - 270px);padding:26px}.header{display:flex;justify-content:space-between;align-items:center;background:white;border-radius:18px;padding:18px 24px;box-shadow:0 10px 25px rgba(15,42,95,.08);margin-bottom:22px}.header h2{margin:0}.header img{height:52px}.hero{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#0f62fe,#6d5dfc);color:white;border-radius:22px;padding:28px;margin-bottom:20px}.hero h1{margin:0 0 8px}.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:20px}.kpi{background:white;border-radius:18px;padding:20px;box-shadow:0 10px 25px rgba(15,42,95,.08);border-left:6px solid #0f62fe}.kpi strong{display:block;font-size:34px;margin:9px 0}.green{border-color:#16a34a}.orange{border-color:#f97316}.red{border-color:#dc2626}.purple{border-color:#7c3aed}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel{background:white;border-radius:18px;padding:22px;box-shadow:0 10px 25px rgba(15,42,95,.08);margin-bottom:20px}.panel-head{display:flex;justify-content:space-between;align-items:center}.form-panel{max-width:880px}.login-page{min-height:100vh;background:linear-gradient(135deg,#061533,#123879);display:flex;align-items:center;justify-content:center}.login-card{width:430px;background:white;border-radius:24px;padding:32px;text-align:center;box-shadow:0 25px 60px rgba(0,0,0,.25)}.login-card img{width:190px;border-radius:18px}.login-card input,.login-card button,.scanner-input,.form-panel input,.form-panel select,.form-panel textarea{width:100%;padding:13px;margin:8px 0 14px;border:1px solid #cbd5e1;border-radius:10px}.form-panel textarea{min-height:90px}.btn,.danger,.login-card button{background:#0f62fe;color:white;border:0;border-radius:10px;padding:11px 16px;text-decoration:none;display:inline-block;cursor:pointer;font-weight:700}.btn.secondary{background:#475569}.btn.warn{background:#d97706}.btn.light{background:white;color:#0f62fe}.danger{background:#dc2626}.small{padding:7px 10px;font-size:13px}.scanner-input{font-size:24px}.scan-result{margin-top:16px;padding:16px;background:#ecfdf5;border:1px solid #86efac;border-radius:12px;min-height:35px}.alert{background:#fff7ed;border:1px solid #fdba74;padding:10px;border-radius:10px;margin-bottom:15px}table{width:100%;border-collapse:collapse;background:white}th,td{border-bottom:1px solid #e5e7eb;padding:10px;text-align:left;font-size:14px}th{background:#f8fafc}.actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.actions form{margin:0}.product-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:14px;margin-bottom:15px}.badge{display:inline-block;background:#e0edff;color:#0f62fe;border-radius:999px;padding:4px 10px;font-weight:700}.category-list{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.category-list div{background:#f8fafc;border-radius:12px;padding:14px}.category-list strong{font-size:24px}.thumb{width:64px;height:64px;object-fit:cover;border-radius:10px;border:1px solid #e2e8f0}.no-photo{color:#94a3b8;font-size:12px}.photo-preview-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:14px;margin-bottom:18px}.zoom-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}.zoom-toolbar span{font-weight:800;color:#0f62fe;min-width:55px}.zoom-frame{width:100%;height:360px;overflow:auto;background:#0f172a;border-radius:14px;display:flex;align-items:center;justify-content:center;border:1px solid #cbd5e1}.product-photo-preview{max-width:90%;max-height:90%;object-fit:contain;border-radius:12px;transition:transform .12s ease;transform-origin:center center}.empty-photo{background:#f8fafc;border:1px dashed #94a3b8;color:#64748b;border-radius:14px;padding:14px;margin-bottom:18px;text-align:center}.movement-photo{width:120px;height:90px;object-fit:cover;border-radius:10px;float:right;margin-left:15px}.photo-modal{display:none;position:fixed;z-index:9999;inset:0;background:rgba(2,6,23,.82);padding:28px}.photo-modal.show{display:block}.photo-modal-content{height:100%;background:#0f172a;border-radius:18px;padding:16px;display:flex;flex-direction:column;box-shadow:0 25px 70px rgba(0,0,0,.55)}.photo-modal-toolbar{display:flex;gap:10px;align-items:center;justify-content:center;padding-bottom:12px}.photo-modal-toolbar span{color:white;font-weight:800;min-width:60px;text-align:center}.photo-modal-frame{flex:1;overflow:auto;background:#020617;border-radius:14px;display:flex;align-items:center;justify-content:center}.photo-modal-frame img{max-width:90%;max-height:90%;object-fit:contain;transition:transform .12s ease;transform-origin:center center;border-radius:12px}@media(max-width:1000px){.sidebar{position:relative;width:100%}.app-shell{display:block}.content{margin-left:0;width:100%}.kpi-grid,.grid-2,.category-list{grid-template-columns:1fr}}

.professional-hero{background:radial-gradient(circle at top left,#38bdf8 0,#0f62fe 35%,#1e1b4b 100%);box-shadow:0 18px 40px rgba(15,98,254,.28)}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn.ghost{background:rgba(255,255,255,.16)!important;color:white!important;border:1px solid rgba(255,255,255,.45)}
.kpi{transition:.2s}
.kpi:hover{transform:translateY(-4px);box-shadow:0 16px 35px rgba(15,42,95,.15)}
.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px}
.panel-title h3{margin:0}
.panel-title span,.panel-title a{font-size:13px;color:#64748b;text-decoration:none}
.chart-card{min-height:390px}
.chart-card canvas{max-height:300px}


.form-panel small{display:block;margin:-8px 0 14px;color:#64748b}
.product-box strong{font-size:18px}