:root {
    --primary: #611232; --primary-hover: #491027; --primary-soft: #f6edf0;
    --green: #611232; --dark: #491027; --ink: #29242a; --muted: #7d747a;
    --line: #e9e1e4; --paper: #f7f5f3; --gold: #b59a6a;
    font-family: "Segoe UI", Arial, sans-serif; font-size: 14px;
}
body { background: var(--paper); }
a:focus-visible, button:focus-visible { outline-color: #c6aa7a; }
h1 { font-size: 32px; font-weight: 700; letter-spacing: -1px; }
h2 { font-weight: 650; color: #352a30; }
.sidebar { width: 272px; padding: 20px 16px 18px; background: linear-gradient(175deg,#611232,#481027 85%); color: #f5e8ed; }
.institution-logo { display: flex; justify-content: center; align-items: center; min-height: 83px; padding: 14px; border-radius: 10px; background: #fff; margin: 0 3px 22px; }
.institution-logo img { width: 100%; max-height: 64px; height: auto; object-fit: contain; }
.brand { font-size: 18px; letter-spacing: -.3px; gap: 11px; padding: 0 11px; margin-bottom: 23px; }
.brand small { color: #d8bdc7; font-size: 8px; letter-spacing: 1.4px; margin-top: 6px; }
.brand-mark { width: 37px; height: 37px; border-radius: 10px; color: #e4c998; background: #ffffff13; border: 1px solid #ffffff20; }
.brand-mark svg { width: 22px; height: 22px; }
.nav-label { color: #d3b19c; font-size: 9px; letter-spacing: 2px; margin: 15px 14px 9px; }
.sidebar nav a { color: #ebdce3; padding: 12px 14px; font-size: 12px; margin: 3px 0; border: 1px solid transparent; border-radius: 8px; }
.sidebar nav a svg { width: 19px; height: 19px; opacity: .8; }
.sidebar nav a.active { background: #ffffff17; border-color: #d1b57b55; box-shadow: inset 3px 0 #d1b57b; font-weight: 600; }
.sidebar nav a:hover { background: #ffffff10; }
.sidebar-bottom { border-color: #ffffff25; padding: 19px 6px 0; gap: 10px; }
.sidebar-bottom small { color: #d2b9c2; }
.avatar { background: #b59a6a; color: #fff; width: 35px; height: 35px; }
.logout { color: #f0dce4; }
.main { margin-left: 272px; }
.topbar { height: 83px; padding: 0 36px; background: #fff; box-shadow: 0 1px 8px #61123203; }
.topbar-context { display: flex; flex-direction: column; gap: 6px; }
.topbar-institution { font-size: 10px; letter-spacing: .4px; color: #8d7882; }
.topbar-divider { color: #c9b7bf; margin: 0 8px; }
.topbar-context strong { font-size: 13px; color: #422f38; font-weight: 600; }
.today { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; color: #76666d; }
.today-dot { width: 6px; height: 6px; border-radius: 50%; background: #b59a6a; }
.content { padding: 34px 36px 60px; max-width: 1600px; }
.page-heading { margin-bottom: 27px; }
.page-heading .eyebrow { font-size: 9px; letter-spacing: 1.7px; margin-bottom: 12px; }
.page-heading p { font-size: 13px; max-width: 680px; }
.dashboard-hero { padding: 31px 30px 25px; border-radius: 13px; margin-bottom: 26px; background: radial-gradient(ellipse at 90% 20%,#92395355,transparent 65%),linear-gradient(110deg,#611232,#481027); border: 1px solid #7f2e4b; position: relative; overflow: hidden; }
.dashboard-hero .page-heading { margin-bottom: 21px; position: relative; z-index: 1; }
.dashboard-hero h1 { color: #fff; font-size: 31px; }
.dashboard-hero .eyebrow { color: #d5ba89; }
.dashboard-hero .muted { color: #d9bdc9; max-width: 530px; font-size: 12px; }
.dashboard-hero .button { background: #fff; color: #611232; box-shadow: 0 6px 20px #23071422; }
.dashboard-hero .button:hover { background: #f4eaf0; }
.hero-caption { color: #bca18a; font-size: 9px; letter-spacing: .6px; display: flex; gap: 8px; align-items: center; }
.hero-caption span { display: block; width: 5px; height: 5px; border-radius: 50%; background: #c6a975; }
.button { background: var(--primary); min-height: 44px; padding: 12px 20px; border-radius: 8px; font-size: 12px; box-shadow: 0 3px 7px #6112320d; }
.button:hover { background: var(--primary-hover); }
.button.secondary { background: #fff; border-color: #e2d7dc; box-shadow: none; color: #61414e; }
.button.secondary:hover { background: var(--primary-soft); }
.button.small { min-height: 33px; }
.card { border-color: var(--line); border-radius: 12px; box-shadow: 0 4px 18px #49203204; }
.section-heading { padding: 25px 26px 22px; }
.badge { background: #f2edf0; color: #735364; font-size: 10px; }
.badge.green { background: #eaf3eb; color: #3c7155; }
.badge.amber { color: #8b692d; background: #faf1df; }
.stats { gap: 18px; margin-bottom: 25px; }
.stats article { border-color: var(--line); border-radius: 11px; padding: 25px 22px 22px; box-shadow: 0 3px 14px #61123204; border-top: 3px solid #b59a6a; }
.stats article>span { color: #8a717d; font-size: 9px; }
.stats strong { color: #611232; margin: 18px 0 8px; font-size: 35px; }
.stats article>small { color: #8e8187; }
.stats svg { color: #aa8d98; }
.steps b { background: var(--primary-soft); color: var(--primary); }
.steps strong { color: #5a3546; }
.soft-note { background: #faf7f1; border-color: #eadfcf; color: #6e5a43; }
.onboarding { background: #faf6ee; border-color: #eadfc9; border-left: 4px solid #b59a6a; }
.map { background: #eee9e7; }
.map-empty { color: #8a717b; background: repeating-linear-gradient(35deg,#f3eeef,#f3eeef 40px,#eae2e6 41px,#eae2e6 43px,#f3eeef 44px); }
.map-state { color: #8d7380; padding: 12px 25px; }
th { background: #faf7f8; color: #8b7580; padding: 15px 23px; font-size: 10px; letter-spacing: .25px; }
td { padding: 18px 23px; border-color: #f0eaed; font-size: 12px; }
tbody tr:hover { background: #fcfafb; }
.table-wrap td a { color: #611232; font-weight: 600; }
.empty { padding: 58px 25px; }
.empty svg { fill: none; stroke: currentColor; stroke-width: 1.5; color: #9a6c80; }
.form-card { padding: 30px; max-width: 1080px; }
.form-grid { gap: 23px 25px; }
label { font-size: 12px; color: #634b57; gap: 9px; }
input, select, textarea { border-color: #ded2d8; border-radius: 7px; color: #332931; min-height: 46px; background: #fff; }
input::placeholder, textarea::placeholder { color: #b1a2a9; }
input:focus, select:focus, textarea:focus { border-color: #9b5d77; outline: 3px solid #f2e8ed; }
input:disabled, select:disabled { background: #f8f5f6; }
.required { color: #a8664f; }
.upload { background: #fcfafb; border-color: #d9bdc9; }
.notice { background: #faf6ee; color: #765d37; border-color: #eadfca; }
.notice.error { background: #fff1f1; color: #953e4d; border-color: #efd2d8; }
.notice.success { background: #edf5ef; color: #447151; border-color: #d1e6d6; }
.form-intro { display: flex; justify-content: space-between; align-items: start; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 23px; margin-bottom: 26px; }
.form-intro h2 { font-size: 17px; margin-bottom: 6px; }
.form-intro p { font-size: 12px; color: var(--muted); margin: 0; }
.module-pill { background: var(--primary-soft); color: #7f425c; border-radius: 6px; padding: 8px 11px; font-size: 10px; white-space: nowrap; }
.form-hint { font-size: 11px; color: #8c7782; border-left: 3px solid #c0a574; background: #fbf8f2; padding: 13px 17px; margin: 25px 0 0; line-height: 1.7; }
.role-guide { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 26px; }
.role-guide article { padding: 15px; border: 1px solid var(--line); border-radius: 8px; background: #fcfafb; }
.role-guide strong { display: block; font-size: 11px; color: #611232; margin-bottom: 6px; }
.role-guide p { font-size: 10px; color: var(--muted); margin: 0; }
.catalog-summary { padding: 20px 23px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid var(--line); }
.catalog-summary .search { padding: 0; flex: 1; max-width: 570px; }
.catalog-count { color: #8a717d; font-size: 11px; white-space: nowrap; }
.catalog-count strong { color: #611232; font-size: 18px; margin-right: 5px; }
.vin-box { padding: 22px; margin: 0 0 27px; background: #faf6f8; border: 1px solid #ead7e0; border-radius: 10px; }
.vin-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 19px; }
.vin-heading h3 { margin: 0 0 5px; font-size: 15px; color: #611232; }
.vin-heading p { margin: 0; font-size: 11px; color: #8b6e7c; }
.vin-entry { display: flex; align-items: start; gap: 12px; }
.vin-entry label { flex: 1; }
.vin-entry .button { margin-top: 24px; }
.vin-entry input { font-family: Consolas, monospace; letter-spacing: 1.7px; text-transform: uppercase; }
.vin-entry small { font-family: "Segoe UI",Arial; letter-spacing: 0; }
.vin-status { margin: 12px 0 0; font-size: 12px; color: #805264; }
.vin-results { margin-top: 20px; padding-top: 18px; border-top: 1px solid #e5ced8; }
.vin-results[hidden] { display: none; }
.vin-warning { color: #856437; background: #faf1df; border: 1px solid #eadbbb; border-radius: 7px; font-size: 11px; padding: 13px 15px; line-height: 1.7; margin-bottom: 17px; }
.vin-warning[hidden] { display: none; }
.vin-selection { display: grid; gap: 7px; }
.vin-choice { display: flex; flex-direction: row; gap: 12px; align-items: center; padding: 12px 14px; background: #fff; border: 1px solid #eadfe4; border-radius: 7px; }
.vin-choice input { width: 17px; min-height: 17px; flex-shrink: 0; accent-color: #611232; }
.vin-choice span { flex: 1; }
.vin-choice b { color: #402833; font-size: 12px; }
.vin-choice small { display: block; color: #9a818d; margin-top: 3px; }
.vin-details { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px 24px; margin-top: 18px; font-size: 11px; }
.vin-details dt { color: #967e89; margin: 0 0 3px; }
.vin-details dd { margin: 0; color: #4f3943; }
.vin-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 20px; }
.vin-actions small { font-weight: 400; font-size: 10px; color: #937985; }
.auth-main { grid-template-columns: minmax(0,1.18fr) minmax(0,1fr); background: #faf9f6; }
.auth-art { background: radial-gradient(ellipse at 90% 60%,#7e2b47 0,transparent 60%),linear-gradient(140deg,#611232,#3d0c23); padding: 38px 56px 28px; gap: 28px; min-height: 100vh; position: relative; overflow: hidden; }
.auth-art::after { content: ""; width: 520px; height: 520px; border: 1px solid #ffffff06; position: absolute; border-radius: 50%; top: -270px; right: -180px; pointer-events: none; }
.auth-identity { padding: 18px 22px; border-radius: 9px; background: #fff; width: min(370px,100%); position: relative; z-index: 1; }
.auth-identity img { display: block; width: 100%; max-height: 83px; object-fit: contain; }
.auth-art>.auth-identity { margin-top: 0; }
.auth-story { position: relative; z-index: 1; }
.auth-art .eyebrow.light { color: #d8c095; letter-spacing: 2.2px; font-size: 10px; }
.auth-art h1 { font-size: clamp(36px,3.8vw,58px); line-height: 1.12; letter-spacing: -1.8px; margin: 17px 0 21px; font-weight: 650; }
.auth-art h1 em { color: #dfc698; font-style: normal; }
.auth-art p { color: #dfc8d0; font-size: 14px; line-height: 1.8; margin-bottom: 22px; }
.fleet-scene { padding: 20px 20px 16px; border-radius: 13px; border: 1px solid #ffffff17; background: #ffffff06; margin: 26px 0 20px; }
.scene-label { font-size: 8px; color: #d9bdca; letter-spacing: 1.7px; display: flex; align-items: center; gap: 8px; }
.scene-dot { width: 5px; height: 5px; background: #dac28e; border-radius: 50%; }
.fleet-art { display: block; width: 100%; height: auto; margin: 18px 0 7px; }
.scene-stages { display: flex; align-items: center; gap: 12px; color: #e5d0d8; font-size: 9px; }
.scene-stages i { display: block; flex: 1; height: 1px; background: #d4bca04d; }
.auth-modules { display: flex; gap: 18px; flex-wrap: wrap; font-size: 9px; color: #e6d1d9; }
.auth-modules b { display: inline-block; color: #d6bc90; font-size: 9px; margin-right: 5px; }
.auth-institution-name { color: #ceb1be; font-size: 10px; line-height: 1.5; border-top: 1px solid #ffffff16; padding-top: 19px; }
.auth-institution-name span { display: block; color: #ac8497; font-size: 9px; margin-top: 6px; }
.auth-panel { padding: 55px 45px 32px; position: relative; background: #fbfaf8; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 50px; }
.auth-box { max-width: 395px; width: 100%; padding: 35px 32px; background: #fff; border: 1px solid #e9e0e3; border-radius: 15px; box-shadow: 0 15px 65px #49102708; }
.auth-icon { width: 47px; height: 47px; background: #f6edf1; border: 1px solid #ebd8e0; border-radius: 12px; display: grid; place-items: center; margin-bottom: 24px; color: #611232; }
.auth-icon svg { width: 25px; height: 25px; stroke: currentColor; stroke-width: 1.5; fill: none; }
.auth-box .eyebrow { font-size: 8px; letter-spacing: 1.6px; }
.auth-box h2 { font-size: 27px; letter-spacing: -.8px; margin: 11px 0 12px; }
.auth-box>.muted { font-size: 12px; line-height: 1.8; margin-bottom: 29px; }
.auth-box label { font-size: 11px; }
.auth-box input { font-size: 12px; min-height: 47px; }
.auth-box .button.wide { margin-top: 7px; min-height: 47px; }
.password-control { position: relative; display: block; }
.password-control input { padding-right: 74px; }
.password-control button { position: absolute; top: 2px; right: 4px; bottom: 2px; border: 0; background: transparent; color: #8c5970; font-size: 10px; padding: 0 9px; border-radius: 5px; }
.auth-access-note { margin-top: 27px; border-top: 1px solid #efe8eb; padding-top: 20px; font-size: 10px; color: #8d6d7d; line-height: 1.7; }
.auth-access-note>span:last-child { display: block; color: #a7959e; font-size: 9px; margin-top: 4px; }
.access-dot { width: 5px; height: 5px; border-radius: 50%; background: #b59a6a; display: inline-block; margin-right: 5px; }
.auth-footer { font-size: 10px; color: #8d7782; text-align: center; letter-spacing: .7px; }
.auth-footer span { display: block; margin-top: 7px; letter-spacing: 0; font-size: 9px; color: #ac9da5; }
.auth-main>.notice { max-width: 440px; top: 18px; right: 20px; z-index: 20; box-shadow: 0 5px 20px #6112320d; }
.menu-backdrop { position: fixed; inset: 0; z-index: 950; background: #29111e66; border: 0; backdrop-filter: blur(2px); }
.menu-backdrop[hidden] { display: none; }
@media(min-width:1800px) { .auth-art { padding-left: 80px; padding-right: 80px; } .auth-box { max-width: 435px; padding: 45px 40px; } }
@media(max-width:1200px) { .sidebar { width: 248px; } .main { margin-left: 248px; } .content { padding: 30px 28px 50px; } .auth-art { padding: 32px; } .auth-panel { padding: 35px 30px; } .stats article { padding: 22px 17px; } .auth-modules { gap: 12px; } .role-guide { grid-template-columns: repeat(2,1fr); } }
@media(max-width:900px) { .sidebar { transform: translateX(-100%); width: 272px; } .sidebar.open { transform: translateX(0); } .main { margin-left: 0; } .menu-button { display: block; color: #611232; margin-right: 17px; } .topbar { height: 73px; padding: 0 22px; } .topbar-context { margin-right: auto; } .auth-main { grid-template-columns: 1fr; } .auth-art { min-height: 0; padding: 27px 30px 30px; gap: 22px; } .auth-identity { width: 275px; padding: 12px 18px; } .auth-identity img { max-height: 60px; } .auth-art h1 { font-size: 34px; margin: 13px 0 14px; letter-spacing: -1px; } .auth-art h1 br { display: none; } .auth-art p { font-size: 12px; margin-bottom: 0; } .fleet-scene,.auth-modules,.auth-institution-name { display: none; } .auth-panel { padding: 30px 24px; gap: 27px; } .auth-box { max-width: 460px; padding: 30px; } .auth-main>.notice { position: static; max-width: none; margin: 18px; } }
@media(max-width:600px) { .content { padding: 25px 18px 45px; } .topbar { padding: 0 18px; } .topbar .today { display: none; } h1 { font-size: 28px; } .page-heading p { font-size: 12px; } .stats { gap: 12px; } .stats article { padding: 19px 16px; } .stats article>span { font-size: 8px; } .stats strong { font-size: 30px; } .form-card { padding: 23px 20px; } .form-intro { flex-direction: column; gap: 12px; } .form-grid { gap: 19px; } .catalog-summary { flex-direction: column; align-items: stretch; padding: 18px; gap: 14px; } .catalog-count { align-self: flex-start; } .vin-box { padding: 18px 14px; } .vin-entry { flex-direction: column; gap: 12px; } .vin-entry label { width: 100%; } .vin-entry .button { margin-top: 0; align-self: stretch; } .vin-heading { align-items: start; } .vin-heading .module-pill { display: none; } .vin-details { grid-template-columns: 1fr; } .role-guide { grid-template-columns: 1fr 1fr; gap: 9px; } .role-guide article { padding: 12px; } .auth-art { padding: 23px 24px; } .auth-art h1 { font-size: 29px; } .auth-art .eyebrow { font-size: 8px; } .auth-art p br { display: none; } .auth-panel { padding: 24px 20px; } .auth-box { padding: 26px 23px; } .auth-box h2 { font-size: 25px; } .auth-icon { margin-bottom: 20px; } .auth-story { margin-top: 0!important; } }
@media(max-width:600px) { .dashboard-hero { padding: 26px 23px; } .dashboard-hero h1 { font-size: 28px; } .dashboard-hero .page-heading { gap: 20px; } }
@media print { .main { margin: 0; } .content { padding: 0; } .menu-backdrop,.catalog-summary,.vin-box { display: none!important; } .institution-logo { display: none; } .card { box-shadow: none; } }

/* Company, access and personal account */
.settings-stack{display:grid;gap:22px}.settings-stack h2,.identity-card h3{margin-top:0}.identity-grid,.permissions-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:24px}.identity-card,.permission-card{padding:22px;border:1px solid #e7e0e3;border-radius:14px;background:#fcfafb}.identity-preview{height:150px;display:flex;align-items:center;justify-content:center;background:white;border-radius:12px;padding:20px;margin-bottom:16px}.identity-preview img{max-width:100%;max-height:100%;object-fit:contain}.identity-card label,.settings-stack label{margin:14px 0}.check-line{display:flex!important;align-items:center;gap:10px;font-weight:500!important}.check-line input{width:18px!important;height:18px;accent-color:#611232;flex-shrink:0;margin:0!important}.auth-options{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}.auth-options label{margin:0}.auth-divider{display:flex;align-items:center;gap:12px;color:#81757b;font-size:11px;margin:4px 0}.auth-divider:before,.auth-divider:after{content:'';flex:1;height:1px;background:#e7e0e3}.social-buttons{display:grid;grid-template-columns:1fr 1fr;gap:12px}.social-buttons button{display:flex;justify-content:center;align-items:center;gap:9px}.provider-mark{font-size:18px;font-weight:800}.google{color:#4285f4}.microsoft{color:#0078d4}button:disabled{opacity:.5;cursor:not-allowed}.auth-back{display:block;text-align:center;margin-top:12px}.profile-summary{display:flex;align-items:center;gap:24px;padding:26px;margin-bottom:24px}.profile-summary h2{margin:0}.profile-portrait,.profile-preview{width:90px;height:90px;border-radius:22px;object-fit:cover}.profile-portrait{background:#f3e9ed;display:grid;place-items:center;color:#611232;font-size:36px}.profile-portrait img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.brand-mark img{width:30px;height:30px;object-fit:contain}.brand small{white-space:normal;line-height:1.4}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.permissions-grid{grid-template-columns:repeat(3,minmax(0,1fr))}fieldset{border:0;padding:0;margin:0;min-width:0}.block{display:block}.auth-art h1{font-size:clamp(34px,4vw,60px);overflow-wrap:anywhere}.sidebar nav{overflow-y:auto;min-height:0}.sidebar{overflow:auto}.sidebar-bottom{flex-shrink:0}.form-card input[readonly]{background:#f5f1f3;color:#675961}.identity-card input[type=file]{width:100%}
.check-line{flex-direction:row!important}.brand-mark{flex-shrink:0}.form-card .section-heading{padding-left:0;padding-right:0}.profile-summary p{overflow-wrap:anywhere}
@media(max-width:900px){.permissions-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.identity-grid,.permissions-grid{grid-template-columns:1fr}.auth-options{align-items:flex-start;flex-wrap:wrap}.profile-summary{gap:16px;padding:20px}.section-heading{align-items:flex-start;flex-direction:column}.social-buttons{grid-template-columns:1fr 1fr}.auth-art h1{font-size:34px}}
