:root{--bg:#F6F4EF;--primary:#1A1A1A;--accent:#E87722;--muted:#5A5A5A;--cta-bg:#111111;--white:#ffffff;--border:#e0ddd8;--success:#2E7D32;--warning:#F57C00;--danger:#C62828;--radius:8px;--shadow:0 2px 12px rgba(0,0,0,0.08);}
*{margin:0;padding:0;box-sizing:border-box;}
html{font-size:16px;-webkit-text-size-adjust:100%;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;background:var(--bg);color:var(--primary);min-height:100vh;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}
button,input,select,textarea{font-family:inherit;font-size:inherit;}
img{max-width:100%;height:auto;}
.container{max-width:480px;margin:0 auto;padding:0 16px;}
.container-wide{max-width:1200px;margin:0 auto;padding:0 24px;}
.app-header{background:var(--primary);padding:14px 20px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;}
.app-logo{font-size:18px;font-weight:900;color:var(--white);letter-spacing:-0.3px;}
.app-logo span{color:var(--accent);}
.header-user{font-size:13px;color:rgba(255,255,255,0.7);}
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px;box-shadow:var(--shadow);}
.card-title{font-size:15px;font-weight:700;margin-bottom:12px;color:var(--primary);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 24px;border:none;border-radius:var(--radius);font-weight:700;font-size:15px;cursor:pointer;transition:opacity 0.15s;min-height:48px;text-decoration:none;}
.btn-primary{background:var(--cta-bg);color:var(--accent);letter-spacing:1px;}
.btn-accent{background:var(--accent);color:var(--white);}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary);}
.btn-danger{background:var(--danger);color:var(--white);}
.btn-success{background:var(--success);color:var(--white);}
.btn-full{width:100%;display:flex;}
.btn:hover{opacity:0.85;}
.btn:disabled{opacity:0.4;cursor:not-allowed;}
.form-group{margin-bottom:18px;}
.form-label{display:block;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;color:var(--muted);}
.form-control{width:100%;padding:14px 16px;border:2px solid var(--border);border-radius:var(--radius);font-size:16px;background:var(--white);color:var(--primary);transition:border-color 0.15s;}
.form-control:focus{outline:none;border-color:var(--accent);}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A5A5A' stroke-width='2' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;}
.form-hint{color:var(--muted);font-size:12px;margin-top:4px;}
.pin-input{display:flex;gap:10px;justify-content:center;margin:16px 0;}
.pin-input input{width:48px;height:58px;text-align:center;font-size:22px;font-weight:700;border:2px solid var(--border);border-radius:var(--radius);background:var(--white);}
.pin-input input:focus{outline:none;border-color:var(--accent);}
.badge{display:inline-block;padding:4px 10px;border-radius:4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;}
.badge-pass{background:#e8f5e9;color:var(--success);}
.badge-minor{background:#fff3e0;color:var(--warning);}
.badge-major{background:#ffebee;color:var(--danger);}
.badge-oos{background:var(--danger);color:var(--white);}
.badge-yard{background:#e3f2fd;color:#1565C0;}
.badge-crew{background:#f3e5f5;color:#6A1B9A;}
.badge-shop{background:#fff8e1;color:#E65100;}
.item-row{border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;background:var(--white);}
.item-label{font-size:16px;font-weight:600;margin-bottom:12px;}
.item-buttons{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:8px;}
.item-btn{padding:12px 4px;border:2px solid var(--border);border-radius:6px;background:var(--white);cursor:pointer;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;text-align:center;transition:all 0.15s;min-height:48px;}
.item-btn.selected-pass{border-color:var(--success);background:#e8f5e9;color:var(--success);}
.item-btn.selected-minor{border-color:var(--warning);background:#fff3e0;color:var(--warning);}
.item-btn.selected-major{border-color:var(--danger);background:#ffebee;color:var(--danger);}
.item-extras{display:none;padding-top:8px;border-top:1px solid var(--border);margin-top:8px;}
.item-extras.open{display:block;}
.progress-wrap{background:var(--border);border-radius:4px;height:6px;margin:16px 0;}
.progress-bar{background:var(--accent);height:6px;border-radius:4px;transition:width 0.3s;}
.progress-label{font-size:13px;color:var(--muted);margin-bottom:4px;}
.section-header{background:var(--primary);color:var(--white);padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;font-weight:700;}
.offline-banner{background:#C62828;color:var(--white);text-align:center;padding:10px 16px;font-size:14px;font-weight:600;display:none;}
.offline-banner.show{display:block;}
.alert{padding:14px 16px;border-radius:var(--radius);margin-bottom:16px;font-size:14px;font-weight:500;}
.alert-danger{background:#ffebee;color:var(--danger);border:1px solid #ffcdd2;}
.alert-warning{background:#fff3e0;color:var(--warning);border:1px solid #ffe0b2;}
.alert-success{background:#e8f5e9;color:var(--success);border:1px solid #c8e6c9;}
.alert-info{background:#e3f2fd;color:#1565C0;border:1px solid #bbdefb;}
.sig-canvas{border:2px solid var(--border);border-radius:var(--radius);background:var(--white);touch-action:none;display:block;width:100%;height:180px;}
.bento{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-bottom:24px;}
.bento-cell{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);}
.bento-number{font-size:36px;font-weight:900;color:var(--accent);margin-bottom:4px;}
.bento-label{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;}
.bento-cell.danger{border-left:4px solid var(--danger);}
.bento-cell.warning{border-left:4px solid var(--warning);}
.bento-cell.success{border-left:4px solid var(--success);}
.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
th{padding:10px 12px;text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted);border-bottom:2px solid var(--border);}
td{padding:12px;font-size:14px;border-bottom:1px solid var(--border);}
tr:hover td{background:#faf9f7;}
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:var(--primary);display:flex;border-top:1px solid #333;}
.bottom-nav a{flex:1;padding:12px 4px;text-align:center;color:rgba(255,255,255,0.6);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;text-decoration:none;}
.bottom-nav a.active{color:var(--accent);}
.page-body{padding-bottom:70px;}
.text-center{text-align:center;}.text-muted{color:var(--muted);}.text-danger{color:var(--danger);}.text-success{color:var(--success);}.text-accent{color:var(--accent);}
.mt-16{margin-top:16px;}.mt-24{margin-top:24px;}.mb-8{margin-bottom:8px;}.mb-16{margin-bottom:16px;}
.d-flex{display:flex;}.align-center{align-items:center;}.justify-between{justify-content:space-between;}.gap-8{gap:8px;}.gap-16{gap:16px;}.flex-1{flex:1;}.hidden{display:none !important;}
.divider{border:none;border-top:1px solid var(--border);margin:16px 0;}
@media(min-width:768px){.container{max-width:600px;}.item-btn{font-size:13px;padding:14px 8px;}}