:root { --ink:#19231b; --muted:#687069; --cream:#f6f3ea; --card:#fffefa; --yellow:#f7c847; --green:#1d251e; --line:#dedbd1; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-width:320px; color:var(--ink); background:var(--cream); font-family:"Avenir Next",Avenir,"Segoe UI",sans-serif; }
button,input { font:inherit; }
.app-shell { width:min(1240px,calc(100% - 3rem)); margin:0 auto; padding:1.35rem 0 5rem; }
.topbar { display:flex; align-items:center; gap:1.7rem; padding-bottom:3.5rem; }
.brand { flex:0 0 auto; color:var(--ink); font-size:1.55rem; font-weight:900; letter-spacing:-.08em; text-decoration:none; }.brand span{color:#e4744d}
.section-nav { display:flex; align-items:center; gap:.55rem; overflow-x:auto; padding:.25rem; scrollbar-width:thin; }
.section-nav button { flex:0 0 auto; cursor:pointer; border:0; border-radius:999px; padding:.65rem 1.14rem; color:#fff; background:var(--green); box-shadow:inset 0 -1px #4b554c; font-size:.9rem; font-weight:800; transition:transform .18s ease,background .18s ease,color .18s ease; }
.section-nav button:hover,.section-nav button:focus-visible { background:#344538; transform:translateY(-2px); }.section-nav button[aria-selected="true"] { color:#3b2c01; background:var(--yellow); box-shadow:inset 0 -1px #d19b1a; }
.tab-panel { animation:show .28s ease both; }.tab-panel[hidden] { display:none; }@keyframes show { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none} }
.eyebrow { margin:0 0 .9rem; color:#9d7010; font-size:.78rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
h1 { max-width:12ch; margin:0; font-size:clamp(3.6rem,7vw,6.8rem); line-height:.91; letter-spacing:-.075em; }.lead { max-width:45rem; margin:1.55rem 0 0; color:#4e5a50; font-size:clamp(1.08rem,1.8vw,1.32rem); line-height:1.6; }
#werking { padding:clamp(1rem,5vw,4.5rem) 0 0; }.working-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:4rem; }.working-steps article { min-height:15rem; padding:1.6rem; border:1px solid var(--line); border-radius:1.3rem; background:var(--card); box-shadow:0 .65rem 1.7rem #36412d0b; }.working-steps span { color:#ba8710; font-size:.78rem; font-weight:900; letter-spacing:.1em; }.working-steps h2 { margin:2.3rem 0 .55rem; font-size:1.4rem; letter-spacing:-.04em; }.working-steps p { margin:0; color:var(--muted); line-height:1.55; }
.panel-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; padding:1.5rem 0 3.5rem; }.mock-badge { flex:0 0 auto; padding:.48rem .75rem; border:1px solid #d5ad40; border-radius:99px; color:#785700; background:#fff2bd; font-size:.8rem; font-weight:800; }
.mock-group-heading { margin:0; font-size:1.35rem; letter-spacing:-.045em; }.mock-group-copy { max-width:44rem; margin:.55rem 0 1.35rem; color:#657166; line-height:1.5; }.system-heading { margin:3.5rem 0 1.2rem; }
.screens-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; }.mock-screen { position:relative; min-height:25rem; overflow:hidden; border:1px solid #cdd2c8; border-radius:1.1rem; background:#fbfcfa; box-shadow:0 1.15rem 2.6rem #1f2b2210; color:#243126; font-size:.65rem; }.mock-screen>header { display:flex; align-items:center; gap:.6rem; height:2.8rem; padding:0 1.1rem; border-bottom:1px solid #dce1d8; background:#fff; }.mock-screen header b { font-size:.88rem; letter-spacing:-.06em; }.mock-screen header span { color:#849085; }.mock-screen header i { margin-left:auto; font-style:normal; }.mock-screen footer { position:absolute; right:0; bottom:0; left:0; padding:.72rem 1.1rem; border-top:1px solid #dce1d8; color:#778078; background:#fff; font-weight:800; letter-spacing:.03em; }
.search-concepts { grid-template-columns:repeat(3,minmax(0,1fr)); }.search-concepts .mock-screen { min-height:23rem; }.catalog-hero { padding:1.1rem 1rem .7rem; color:#fff; background:linear-gradient(135deg,#263d2a,#547a50); }.catalog-hero p,.vehicle-hero p { margin:0 0 .65rem; font-size:1.05rem; font-weight:800; }.wide-search,.small-search { display:flex; align-items:center; padding:.6rem .65rem; border-radius:.35rem; color:#778577; background:#fff; }.wide-search button { margin-left:auto; padding:.35rem .55rem; border:0; border-radius:.22rem; color:#fff; background:#2e6d37; font-size:.58rem; font-weight:800; }.quick-categories { display:flex; flex-wrap:wrap; gap:.35rem; padding:1rem; }.quick-categories b { flex-basis:100%; margin-bottom:.15rem; }.quick-categories span { padding:.35rem .45rem; border:1px solid #d9dfd6; border-radius:99px; background:#fff; }.plate-strip { display:grid; grid-template-columns:1fr .85fr; gap:.35rem; margin:0 1rem; padding:.7rem; border-radius:.4rem; background:#f1f3ec; }.plate-strip strong { grid-column:span 2; }.plate-strip input,.license-entry input { min-width:0; padding:.42rem; border:1px solid #cbd4c9; border-radius:.25rem; background:#fff; font-size:.63rem; }.plate-strip button,.license-entry button { border:0; border-radius:.25rem; color:#fff; background:#2b6832; font-size:.58rem; font-weight:800; }
.vehicle-hero { padding:1.25rem 1rem .65rem; color:#fff; background:#2a382d; }.license-entry { display:flex; gap:.35rem; }.license-entry label { flex:1; color:#e3e9df; font-size:.55rem; }.license-entry input { display:block; width:100%; margin-top:.2rem; }.license-entry button { align-self:end; padding:.5rem; }.vehicle-hero small { display:block; margin-top:.75rem; color:#d0dccd; }.vehicle-selects { display:flex; gap:.35rem; padding:1rem; }.vehicle-selects span { flex:1; padding:.45rem; border:1px solid #d9dfd6; border-radius:.3rem; color:#7e897e; background:#fff; }.vehicle-selects b { display:block; margin-top:.2rem; color:#263126; }.vehicle-result { margin:0 1rem; padding:.8rem; border-radius:.4rem; background:#eaf4e7; }.vehicle-result b,.vehicle-result span { display:block; }.vehicle-result span { margin-top:.35rem; color:#2f7238; font-weight:700; }
.category-layout { display:grid; grid-template-columns:31% 1fr; min-height:18.2rem; padding-bottom:2.5rem; }.category-layout aside { display:flex; flex-direction:column; gap:.7rem; padding:1rem .75rem; border-right:1px solid #dce1d8; color:#758073; }.category-layout aside b { color:#243126; }.category-layout aside .selected { padding:.4rem; border-radius:.25rem; color:#2e6835; background:#e9f3e7; font-weight:800; }.category-layout>div { padding:.85rem .7rem; }.category-layout .filter-row { padding: .7rem 0; }.small-search { border:1px solid #d5dad2; }.category-part { display:flex; align-items:center; gap:.45rem; padding:.45rem 0; border-top:1px solid #e3e7e1; }.category-part em { width:1.8rem; height:1.65rem; border-radius:.25rem; background:linear-gradient(135deg,#d2dcce,#859486); }.category-part p { flex:1; margin:0; }.category-part b,.category-part small { display:block; }.category-part small { color:#819080; }.category-part mark { padding:.2rem; border-radius:.2rem; color:#397640; background:#e8f5e7; }
.mock-search { margin:1.25rem 1.1rem .8rem; padding:.78rem .9rem; border:1px solid #d5dad2; border-radius:.45rem; color:#829086; background:#fff; }.filter-row { display:flex; gap:.35rem; padding:0 1.1rem; }.filter-row span,.filter-row strong { padding:.45rem .55rem; border:1px solid #d5dad2; border-radius:.35rem; background:#fff; font-weight:600; }.filter-row strong { color:#426b44; border-color:#a8cba9; background:#e8f5e7; }.part-list { padding:1rem 1.1rem 3rem; }.part-list>div { display:flex; align-items:center; gap:.7rem; padding:.6rem 0; border-bottom:1px solid #e2e6e0; }.part-list em { width:2.5rem; height:2.1rem; border-radius:.3rem; background:linear-gradient(135deg,#d2dcce,#859486); }.part-list p { flex:1; margin:0; }.part-list p b,.part-list small { display:block; }.part-list small { padding-top:.2rem; color:#859085; }.part-list>div>strong { color:#36803f; font-size:.58rem; }
.detail-layout,.editor-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:1rem; padding:1.25rem 1.1rem 3rem; }.photo-box { display:grid; min-height:16rem; place-items:center; border-radius:.55rem; color:#829080; background:linear-gradient(135deg,#e4eae0,#b8c3b5); }.detail-layout small { color:#7d887e; }.detail-layout h3 { margin:.5rem 0; font-size:1.15rem; }.detail-layout p { line-height:1.6; }.detail-layout mark { display:inline-block; padding:.35rem .45rem; border-radius:.3rem; color:#2f7337; background:#e8f5e7; }.detail-layout button,.mock-screen header button,.vehicle-form button { display:block; margin-top:.85rem; padding:.55rem .7rem; border:0; border-radius:.35rem; color:#fff; background:#2b6832; font-size:.62rem; font-weight:800; }
.admin-layout { display:grid; grid-template-columns:28% 1fr; min-height:21rem; padding-bottom:2.5rem; }.admin-layout aside { display:flex; flex-direction:column; gap:.9rem; padding:1.25rem 1rem; border-right:1px solid #dce1d8; color:#708070; }.admin-layout aside b { color:#263329; }.stats { padding:1.35rem; }.stats h3 { margin:0 0 1.5rem; font-size:1.2rem; }.stats>div { display:flex; gap:.75rem; }.stats p { flex:1; margin:0; padding:.75rem; border-radius:.45rem; background:#eef4eb; }.stats p b,.stats small { display:block; }.stats p b { font-size:1.25rem; }.stats section { margin-top:1rem; padding:1rem; border:1px solid #dce1d8; border-radius:.45rem; line-height:1.8; }.stats section b { display:block; }
.table-head,.table-row { display:grid; grid-template-columns:1.3fr 1fr .65fr; gap:.6rem; padding:.7rem 1.1rem; }.table-head { color:#7b877d; background:#f1f4ef; font-weight:800; }.table-row { border-bottom:1px solid #e4e7e2; }.table-row mark { width:max-content; padding:.2rem .35rem; border-radius:.25rem; color:#397640; background:#e8f5e7; }.inventory-screen header button { margin:0 0 0 auto; }.inventory-screen header i { margin-left:0; }
.upload-box { display:grid; min-height:14rem; place-items:center; align-content:center; border:1px dashed #a9b5a8; border-radius:.55rem; color:#829082; font-size:1.6rem; }.upload-box small { margin-top:.4rem; font-size:.65rem; }.editor-layout label { display:block; margin-bottom:.7rem; color:#6f7b70; font-size:.58rem; font-weight:800; }.editor-layout input { display:block; width:100%; margin-top:.25rem; padding:.55rem; border:1px solid #d4dbd2; border-radius:.3rem; background:#fff; color:#2b352c; font-size:.68rem; }.split-input { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.vehicle-form { display:grid; grid-template-columns:1fr 1fr; gap:.65rem; padding:1.25rem 1.1rem 3rem; }.vehicle-form label { display:block; padding:.8rem; border:1px solid #dce1d8; border-radius:.4rem; color:#7a857b; }.vehicle-form label b { display:block; margin-top:.3rem; color:#243126; }.vehicle-form button { grid-column:span 2; justify-self:start; }
.simple-panel { padding-top:4rem; }.simple-panel .lead { max-width:34rem; }
@media (max-width:860px) { .app-shell{width:min(100% - 2rem,44rem)}.topbar{align-items:flex-start;flex-direction:column;gap:.6rem;padding-bottom:2.4rem}.section-nav{width:100%}.working-steps,.screens-grid{grid-template-columns:1fr}.panel-heading{align-items:flex-start;flex-direction:column;padding-bottom:2rem}.mock-screen{min-height:23rem} }
@media (max-width:500px) { h1{font-size:clamp(3.2rem,17vw,4.8rem)}.working-steps{margin-top:2rem}.detail-layout,.editor-layout{grid-template-columns:1fr}.photo-box{min-height:10rem}.mock-screen{font-size:.58rem}.vehicle-form{grid-template-columns:1fr}.vehicle-form button{grid-column:auto}.filter-row{overflow:hidden}.table-head,.table-row{grid-template-columns:1.15fr 1fr .65fr;padding-inline:.7rem} }