* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Roboto', Arial, sans-serif; background:#000; color:#fff; height:100vh; display:flex; flex-direction:column; }

.header { background:rgba(0,0,0,0.7); padding:15px; text-align:center; }
.header img { width:50px; height:50px; object-fit:contain; }
.header h1 { font-size:20px; margin-top:8px; color:#00ccff; }

.start-screen { flex:1; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:20px; }
.start-screen h2 { font-size:24px; margin-bottom:20px; }
.start-screen p { margin-bottom:30px; color:#ccc; max-width:300px; }
#start-btn { padding:16px 40px; background:#00ccff; color:#000; border:none; border-radius:50px; font-size:20px; font-weight:bold; cursor:pointer; }

.scanner-box { flex:1; position:relative; overflow:hidden; display:none; }
#reader { width:100%; height:100%; }
#reader video { width:100%; height:100%; object-fit:cover; }
.scan-region-highlight { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:280px; height:280px; border:4px solid #00ff00; border-radius:16px; box-shadow:0 0 0 9999px rgba(0,0,0,0.6); pointer-events:none; }

.result { background:rgba(0,0,0,0.8); padding:20px; text-align:center; font-size:18px; display:none; }
.info-item { margin:15px 0; padding:12px; background:rgba(255,255,255,0.1); border-radius:12px; }
.label { display:block; font-size:14px; color:#aaa; margin-bottom:4px; }
.value { font-weight:bold; color:#fff; word-break:break-all; }
.biochar-info { margin-top:20px; padding:15px; background:rgba(0,204,255,0.1); border-radius:12px; font-size:16px; text-align:left; }

#guide { text-align:center; padding:15px; color:#ccc; display:none; }

.footer { padding:12px; text-align:center; font-size:13px; color:#666; background:rgba(0,0,0,0.7); }

#restart-btn { margin-top:20px; padding:12px 24px; background:#00ccff; color:#000; border:none; border-radius:50px; font-weight:bold; }

.action-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.action-buttons button {
    padding: 14px 28px;
    background: #00ccff;
    color: #000;
    border: none;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    min-width: 120px;
    box-shadow: 0 4px 15px rgba(0,204,255,0.3);
    transition: all 0.3s;
}

.action-buttons button:hover {
    background: #00b0e0;
    transform: translateY(-2px);
}

.action-btn {
    padding: 12px 20px;
    border: none;
    border-radius: 50px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    min-width: 110px;
    transition: all 0.2s;
}

.action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.scan-btn { background: #00e5ff; color: #000; }
.cash-btn  { background: #ffd600; color: #000; }
.send-btn  { background: #00c853; color: white; }
.send-btn:not(:disabled):hover { background: #00b140; }