:root{
  --bg: #EAE4DB;
  --paper: #FFFFFF;
  --ink: #3A2F2A;
  --accent: #7C5B42;
  --accent-2: #C8A888;
  --muted: #6B615B;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;line-height:1.5;}
header{position:sticky;top:0;z-index:10;background:linear-gradient(180deg,#8B6A50,var(--accent));color:#fff;
  padding:14px 18px;box-shadow:0 8px 24px rgba(0,0,0,.12);}
header .top{display:flex;align-items:center;gap:12px;justify-content:space-between;}
.brand{display:flex;align-items:center;gap:10px;}
.brand .logo{width:32px;height:32px;border-radius:10px;background:#EAE4DB;display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);}
.brand .title{font-family:'Playfair Display', Georgia, 'Times New Roman', serif;font-size:1.15rem;letter-spacing:.2px;}
nav a, nav button{color:#fff;text-decoration:none;border:0;background:transparent;cursor:pointer;
  padding:8px 10px;border-radius:10px;transition:.2s;}
nav a:hover, nav button:hover{background:rgba(255,255,255,.12);}
#installBtn{border:1px solid rgba(255,255,255,.5);}
main{padding:18px;max-width:1000px;margin:18px auto}
.card{background:var(--paper);border-radius:18px;padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.08), inset 0 1px rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.06);}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.product{display:flex;gap:12px;align-items:center;}
.product img{width:120px;height:90px;object-fit:cover;border-radius:14px;box-shadow:0 4px 16px rgba(0,0,0,.08);
  border:1px solid rgba(0,0,0,.06);}
h1,h2,h3{font-family:'Playfair Display', Georgia, serif;margin:.3em 0;}
button.primary{background:var(--accent);color:#fff;border:0;padding:10px 14px;border-radius:12px;cursor:pointer;
  box-shadow:0 6px 18px rgba(124,91,66,.25);}
button.primary:hover{filter:brightness(1.05)}
label{display:block;margin:10px 0;font-size:.95rem}
input[type=text], input[type=password], input[type=file], input{width:100%;padding:10px;border:1px solid rgba(0,0,0,.12);border-radius:12px;background:#fff;}
.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:var(--accent-2);color:#fff;font-size:.78rem;}
.footer-note{color:var(--muted);font-size:.9rem;margin-top:12px}
.progress{height:10px;background:#eee;border-radius:8px;overflow:hidden}
.progress > div{height:10px;width:0%;background:var(--accent)}
@media (max-width:600px){ .product img{width:110px;height:82px} }