.vendor-shell { max-width:1400px; margin:auto; padding:32px 36px 70px; }
.vendor-header { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:38px; }
.vendor-logo { display:flex; gap:12px; align-items:center; font-size:17px; font-weight:650; }
.vendor-logo b { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:var(--green); color:var(--panel); }
.vendor-logo small { display:block; font-size:10px; color:var(--muted); letter-spacing:1.5px; font-weight:400; }
.vendor-header-actions { display:flex; gap:12px; align-items:center; }
.vendor-hero { border:1px solid var(--line); border-radius:20px; background:linear-gradient(120deg,var(--mint),var(--panel)); padding:32px; margin-bottom:24px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
.vendor-hero h1 { font-size:28px; margin:10px 0; }
.vendor-hero p { max-width:650px; color:var(--muted); line-height:1.9; }
.vendor-tabs { display:flex; gap:26px; border-bottom:1px solid var(--line); margin:26px 0; }
.vendor-tabs button { padding:13px 3px; border-bottom:2px solid transparent; color:var(--muted); }
.vendor-tabs button.active { color:var(--green); border-color:var(--green); font-weight:650; }
.vendor-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.vendor-summary .panel { padding:20px 24px; color:var(--muted); }
.vendor-summary strong { display:block; font-size:30px; color:var(--ink); margin-top:7px; }
.vendor-demo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.vendor-demo { padding:22px; display:flex; flex-direction:column; gap:14px; }
.vendor-demo-top { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.vendor-demo h3 { font-size:17px; }
.vendor-demo p { color:var(--muted); font-size:12px; line-height:1.9; }
.vendor-demo footer { margin-top:auto; display:flex; gap:8px; flex-wrap:wrap; padding-top:18px; border-top:1px solid var(--line); }
.vendor-demo .badge { font-size:10px; }
.vendor-note { padding:16px 20px; background:var(--mint); border-radius:10px; color:var(--green); margin-bottom:20px; line-height:1.9; }
.vendor-login { max-width:440px; margin:9vh auto; padding:34px; }
.vendor-login h1 { margin:26px 0 12px; font-size:25px; }
.vendor-login p { color:var(--muted); margin-bottom:24px; line-height:1.9; }
.vendor-login form { display:grid; gap:20px; }
.vendor-login>a { display:block; margin-top:22px; color:var(--green); }
.vendor-empty { padding:60px 20px; text-align:center; color:var(--muted); }
#vendor-toast { display:none; position:fixed; right:28px; bottom:25px; z-index:200; background:var(--green); color:var(--panel); padding:14px 22px; border-radius:10px; box-shadow:var(--shadow); }
#vendor-toast.visible { display:block; }
.vendor-link { width:100%; padding:12px; border:1px solid var(--line); background:var(--bg); border-radius:7px; color:var(--ink); }
.demo-environment-banner { display:flex; gap:15px; align-items:center; justify-content:space-between; background:var(--mint); border:1px solid var(--line); color:var(--green); border-radius:10px; padding:12px 18px; margin-bottom:20px; }
.app-filter { flex-wrap:wrap; }
@media(max-width:1050px){ .vendor-demo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:650px){ .vendor-shell { padding:22px 16px; } .vendor-header { align-items:flex-start; } .vendor-header-actions { flex-wrap:wrap; justify-content:flex-end; } .vendor-demo-grid { grid-template-columns:1fr; } .vendor-hero { padding:22px; flex-direction:column; align-items:flex-start; } .vendor-summary { gap:8px; } .vendor-summary .panel { padding:14px; font-size:11px; } .vendor-tabs { gap:20px; } .vendor-login { margin:35px 16px; padding:24px; } }