:root{--bg:#0c1016;--side:#0b0f14;--panel:#141a22;--panel2:#18212b;--text:#eef3f8;--muted:#8c9bab;--line:#27313d;--accent:#61f39c;--accent2:#2dd27b;--danger:#ff6b6b;--warning:#ffcb66;--blue:#72b7ff;--radius:18px}
*{box-sizing:border-box}body{margin:0;font:14px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}.app-shell{min-height:100vh;display:grid;grid-template-columns:240px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:var(--side);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column}.brand{display:flex;gap:11px;align-items:center;padding:4px 6px 22px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--accent),#e5ff64);color:#07130d;font-size:24px;font-weight:900}.brand strong{display:block;font-size:18px}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.06em}.sidebar nav{display:grid;gap:6px}.sidebar nav a{display:flex;gap:12px;align-items:center;padding:11px 12px;color:#b8c4d1;border-radius:12px}.sidebar nav a:hover,.sidebar nav a.active{background:#172019;color:#fff}.sidebar nav a.active{box-shadow:inset 3px 0 var(--accent)}.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding-top:15px}.user-chip b,.user-chip small{display:block}.user-chip small{color:var(--muted)}.logout{display:inline-block;margin-top:10px;color:#ff9191}.main{min-width:0}.topbar{display:flex;align-items:center;gap:16px;padding:26px 30px 18px}.topbar h1{margin:0;font-size:28px}.topbar p{margin:3px 0 0;color:var(--muted)}.top-actions{margin-left:auto}.menu-btn{display:none;background:none;border:0;color:white;font-size:22px}.content{padding:0 30px 36px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.metric{background:linear-gradient(160deg,var(--panel2),var(--panel));border:1px solid var(--line);border-radius:var(--radius);padding:18px}.metric small,.metric span{color:var(--muted);display:block}.metric strong{display:block;font-size:27px;margin:8px 0 2px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px}.panel-head{display:flex;align-items:start;justify-content:space-between;gap:14px;margin-bottom:12px}.panel h3{margin:0;font-size:17px}.panel p{margin:3px 0;color:var(--muted)}.panel-head a{color:var(--accent)}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.rank-list{display:grid}.rank-row{display:flex;align-items:center;gap:12px;padding:12px 2px;border-top:1px solid var(--line)}.rank-row:first-child{border-top:0}.rank{width:27px;height:27px;border-radius:8px;display:grid;place-items:center;background:#202a35;color:var(--muted);font-weight:700}.grow{flex:1}.grow b,.grow small{display:block}.grow small{color:var(--muted)}.pill{font-size:11px;padding:5px 8px;border:1px solid #335a45;background:#173225;border-radius:999px;color:var(--accent)}.opportunity{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}.opportunity:first-of-type{border-top:0}.opportunity b,.opportunity small{display:block}.opportunity small{color:var(--muted)}.suggestion{text-align:right}.suggestion strong{display:block;color:var(--accent);font-size:17px}.suggestion span{font-size:10px;text-transform:uppercase;color:var(--muted)}.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:16px}.quick{display:flex;gap:12px;align-items:center;padding:14px;background:#10161d;border:1px solid var(--line);border-radius:15px}.quick:hover{border-color:#3e5d4a}.quick>span{width:35px;height:35px;border-radius:10px;background:#173225;display:grid;place-items:center;color:var(--accent);font-size:20px}.quick b,.quick small{display:block}.quick small{color:var(--muted)}.btn{border:1px solid #3a4653;background:#1b2430;color:white;padding:9px 13px;border-radius:11px;cursor:pointer}.btn:hover{filter:brightness(1.1)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#07150d;font-weight:800}.btn.small{padding:6px 9px;font-size:12px}.btn.wide{width:100%;padding:12px}.banner,.rule-banner{padding:12px 14px;border-radius:12px;margin-bottom:15px}.banner.warning{border:1px solid #5c4b24;background:#2b2413;color:#ffe3a8}.rule-banner{background:#1c2b20;border:1px solid #31583d;color:#bdf5ce;font-size:12px;letter-spacing:.03em}.flash-stack{padding:0 30px}.flash{padding:11px 13px;border-radius:11px;margin-bottom:8px;transition:.5s}.flash.success{background:#163724;border:1px solid #275c3a}.flash.danger{background:#3a1d22;border:1px solid #6a3038}.flash.warning{background:#3a301b;border:1px solid #705c2d}.flash.fade{opacity:.35}.table-wrap{padding:0;overflow:auto}table{width:100%;border-collapse:collapse;min-width:800px}th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)}th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:#11171e}td{vertical-align:middle}.empty{color:var(--muted);padding:24px;text-align:center}.status{display:inline-block;padding:4px 8px;border-radius:999px;background:#25313e;color:#c4d0dc;font-size:11px}.status.released,.status.available{background:#173627;color:#8ff4b3}.status.draft{background:#3b301c;color:#ffd881}.status.sold{background:#2c2f3a;color:#b8c3d4}.mini-warning{display:block;color:var(--warning);font-size:10px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.good{color:var(--accent)}.warn-text{color:var(--warning)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid.one{grid-template-columns:1fr}.form-grid label{display:grid;gap:6px;color:#c8d2dd;font-size:12px}.form-grid input,.form-grid select,.form-grid textarea,.filter-bar input,.filter-bar select,.inline-form input{width:100%;background:#0e141b;border:1px solid #303b47;color:#f4f7fb;border-radius:10px;padding:10px 11px;outline:none}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.filter-bar input:focus{border-color:#55886a}.span-2{grid-column:span 2}.check{display:flex!important;grid-column:span 2;align-items:center;grid-template-columns:auto 1fr!important}.check input{width:auto}.form-actions{display:flex;justify-content:flex-end;gap:8px;align-items:end}.filter-bar{display:grid;grid-template-columns:1fr 180px auto;gap:8px;margin-bottom:12px}.modal{position:fixed;inset:0;background:#05080cbf;display:none;place-items:center;padding:18px;z-index:50}.modal.show{display:grid}.modal-card{width:min(620px,100%);max-height:90vh;overflow:auto;background:#121923;border:1px solid #34404d;border-radius:20px;padding:18px;box-shadow:0 30px 80px #0008}.modal-card.large{width:min(820px,100%)}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.modal-head h3{margin:0}.modal-head button{border:0;background:none;color:white;font-size:25px;cursor:pointer}.payment-row{display:grid;grid-template-columns:110px 1fr 130px 1fr 32px;gap:6px;margin-bottom:7px}.payment-row select,.payment-row input{min-width:0;background:#0e141b;border:1px solid #303b47;color:white;border-radius:9px;padding:8px}.icon-btn{border:0;background:#311b21;color:#ff9aa4;border-radius:9px}.section-label{font-size:12px;text-transform:uppercase;color:var(--muted);letter-spacing:.05em;margin-bottom:8px}.hint{font-size:12px;color:var(--muted);background:#0f151c;border:1px dashed #35414d;border-radius:10px;padding:9px}.cards-stack{display:grid;gap:14px}.import-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.import-stats span{background:#10171f;border-radius:12px;padding:10px}.import-stats small,.import-stats b{display:block}.import-stats small{color:var(--muted)}.action-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.action-row form{margin:0}.narrow{max-width:650px;margin-top:14px}.inline-form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#183124 0,#0b1118 36%,#070a0e 80%)}.login-card{width:min(420px,calc(100% - 30px));background:#111820;border:1px solid #2b3641;border-radius:24px;padding:26px;box-shadow:0 30px 100px #0008}.login-brand{padding:0 0 20px}.login-card h2{font-size:28px;margin:5px 0}.login-card>p{color:var(--muted);margin-top:0}.login-card .hint{margin-top:15px}.opportunity-panel{border-color:#2f4939}
@media(max-width:1000px){.metric-grid{grid-template-columns:1fr 1fr}.two-col{grid-template-columns:1fr}.quick-grid{grid-template-columns:1fr 1fr}.import-stats{grid-template-columns:1fr 1fr}.payment-row{grid-template-columns:1fr 1fr}.payment-row .icon-btn{grid-column:2}.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-260px;z-index:60;width:240px;transition:.2s}.sidebar.open{left:0}.menu-btn{display:block}}
@media(max-width:620px){.topbar{padding:18px 16px 14px}.content{padding:0 16px 26px}.flash-stack{padding:0 16px}.metric-grid,.quick-grid,.form-grid{grid-template-columns:1fr}.span-2,.check{grid-column:span 1}.metric strong{font-size:23px}.import-stats{grid-template-columns:1fr 1fr}.filter-bar{grid-template-columns:1fr}.payment-row{grid-template-columns:1fr}.payment-row .icon-btn{grid-column:1}.topbar h1{font-size:23px}.opportunity{align-items:flex-start}.suggestion{min-width:100px}.modal{padding:8px}.modal-card{border-radius:15px}.action-row .btn,.action-row form{width:100%}.action-row form .btn{width:100%}}


/* Enhanced M-One Styling Utilities */
.text-accent { color: var(--accent) !important; font-weight: 700; }
.badge { display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; background: var(--panel2); color: var(--text); border: 1px solid var(--line); }
.badge.available { background: rgba(97, 243, 156, 0.15); color: var(--accent); border-color: rgba(97, 243, 156, 0.3); }
.badge.muted { background: rgba(140, 155, 171, 0.15); color: var(--muted); }

.status.warning, .mini-warning { display: inline-block; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 600; background: rgba(255, 203, 102, 0.15); color: var(--warning); border: 1px solid rgba(255, 203, 102, 0.3); }

.filter-bar { display: flex; gap: 12px; margin-bottom: 20px; align-items: center; background: var(--panel); padding: 12px 16px; border-radius: var(--radius); border: 1px solid var(--line); }
.filter-bar input, .filter-bar select { background: var(--bg); border: 1px solid var(--line); color: var(--text); padding: 8px 14px; border-radius: 8px; font-size: 13px; }
.filter-bar input { flex: 1; }

.sale-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; background: var(--panel2); padding: 16px; border-radius: 12px; border: 1px solid var(--line); }
.detail-block small { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; margin-bottom: 4px; }
.detail-block b { font-size: 15px; color: var(--text); }

.detail-section { margin-bottom: 20px; }
.detail-section h4 { margin: 0 0 10px 0; font-size: 14px; color: var(--text); border-bottom: 1px solid var(--line); padding-bottom: 6px; }

.chassis-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chassis-chip { background: var(--panel2); border: 1px solid var(--line); padding: 8px 12px; border-radius: 8px; display: flex; flex-direction: column; gap: 2px; }
.chassis-chip small { color: var(--muted); font-size: 11px; }

.sub-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sub-table th, .sub-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; }
.sub-table th { color: var(--muted); font-size: 11px; text-transform: uppercase; }

.link-btn { background: none; border: none; color: var(--blue); padding: 0; cursor: pointer; text-decoration: underline; font-size: 12px; }
.link-btn:hover { color: var(--accent); }

.user-actions-row { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.action-row-compact { display: flex; gap: 6px; }

.warn-btn { background: rgba(255, 107, 107, 0.15) !important; color: var(--danger) !important; border: 1px solid rgba(255, 107, 107, 0.3) !important; }
.good-btn { background: rgba(97, 243, 156, 0.15) !important; color: var(--accent) !important; border: 1px solid rgba(97, 243, 156, 0.3) !important; }

.rule-banner { background: rgba(255, 203, 102, 0.1); border: 1px solid var(--warning); color: var(--warning); padding: 12px 16px; border-radius: 10px; margin-bottom: 20px; font-weight: 600; font-size: 13px; }


/* WebCam Camera Widget Styling */
.camera-widget-container { background: var(--panel2); padding: 14px; border-radius: 12px; border: 1px solid var(--line); margin-top: 6px; }
.camera-controls-box { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.camera-btn { display: inline-flex; align-items: center; gap: 6px; }
.muted-text { color: var(--muted); font-size: 12px; }

.camera-stream-box { margin-top: 12px; text-align: center; background: #070a0e; padding: 12px; border-radius: 12px; border: 1px solid var(--line); }
.video-preview { width: 100%; max-height: 280px; border-radius: 10px; background: #000; object-fit: cover; border: 1px solid var(--line); }
.camera-actions { margin-top: 10px; display: flex; gap: 10px; justify-content: center; }

.camera-preview-box { margin-top: 12px; text-align: center; background: #0b1118; padding: 12px; border-radius: 12px; border: 1px solid var(--accent); }
.img-preview { max-width: 100%; max-height: 240px; border-radius: 8px; border: 1px solid var(--accent); }
.preview-actions { margin-top: 8px; display: flex; gap: 12px; justify-content: center; align-items: center; }