/* SmartHub — base design v42

* Cleaner header + more breathing room
* Subtle radii (less “bubble”)
* Better card/inputs/buttons
* Responsive grids and thumbnails
  */

:root{
--brand:#ffd500;
--ink:#111;
--ink-2:#444;
--line:#e9e9e9;
--ok:#1f7a3a;
--no:#c23a2b;
--bg:#ffffff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
color:var(--ink);
background:var(--bg);
font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.space{height:16px}
.space-lg{height:28px}

/* Header */
header{
position:sticky; top:0; z-index:50;
background:#fff;
border-bottom:3px solid var(--brand);
}
.hdr{
display:flex; align-items:center; gap:12px;
padding:12px 0;
}
.brand{
display:flex; align-items:center; gap:10px;
font-weight:800; color:var(--ink); text-decoration:none;
}
.brand img{width:36px;height:36px;border-radius:10px;object-fit:cover}
nav.menu{margin-left:auto; display:flex; gap:10px; flex-wrap:wrap}

/* Buttons */
.btn{
display:inline-flex; align-items:center; justify-content:center;
padding:.6rem 1.05rem;
border:2px solid #000; border-radius:16px;
background:var(--brand); color:#000; font-weight:800;
text-decoration:none; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:#fff}
.btn.warn{background:#fff; border-color:var(--no); color:var(--no)}
.btn.small{padding:.4rem .8rem; font-weight:700}

/* Cards */
.card{
background:#fff; border:1px solid var(--line);
border-radius:18px; padding:20px;
box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.card > h3{margin:0 0 10px 0}

/* Inputs */
.input, input.input, textarea.input{
width:100%;
border:2px solid var(--line);
border-radius:14px;
padding:.7rem .9rem;
outline:none; background:#fff; color:var(--ink);
transition:border-color .15s ease, box-shadow .15s ease;
}
.input:focus{
border-color:#f0d200;
box-shadow:0 0 0 3px rgba(255,213,0,.25);
}
label{display:block; font-weight:800; margin:.75rem 0 .35rem}

textarea.input{min-height:140px; resize:vertical}

/* Rows/Grids */
.row{display:flex; align-items:center; gap:10px}
.grid{display:grid; gap:16px}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

/* Status chips */
.status-ok, .status-no{
display:inline-flex; align-items:center; font-weight:800;
padding:.35rem .7rem; border-radius:999px; border:2px solid;
}
.status-ok{border-color:var(--ok); color:var(--ok)}
.status-no{border-color:var(--no); color:var(--no)}

/* Thumbnails / Gallery */
.thumb{
background:#fff;
border:1px solid var(--line);
border-radius:14px;
padding:10px;
}
.thumb img{display:block; width:100%; height:auto; border-radius:10px; border:1px solid var(--line)}
.ba-empty{
display:flex; align-items:center; justify-content:center;
height:200px; color:#888; border:2px dashed #e6e6e6; border-radius:14px;
background:#fafafa;
}

/* Action row inside item */
.actions{
display:flex; align-items:center; gap:12px;
padding:6px 0; margin:4px 0;
}

/* Gallery of extra photos */
.gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px}

/* Hero (landing) — with more top breathing room */
.hero{
display:flex; align-items:center; justify-content:center;
min-height:85vh;
padding:5rem 1.5rem 3rem;
background:linear-gradient(180deg,#fffdf4 0%, #fffbe6 100%);
text-align:center;
}
.hero-content{
max-width:740px; background:#fff; border:2px solid #f7e46a;
border-radius:18px; padding:3rem 2.5rem;
box-shadow:0 10px 28px rgba(0,0,0,.05);
}
.hero h1{font-size:2.4rem; margin:0 0 1.2rem 0}
.hero p.muted{font-size:1.15rem; color:#555; margin:0 0 1.6rem 0}
.hero-list{max-width:520px; margin:0 auto 2rem auto; text-align:left; color:#444; line-height:1.75}
.hero-list li{margin:.55rem 0; padding-left:1.3rem; position:relative}
.hero-list li::before{content:'✓'; position:absolute; left:0; font-weight:800}

/* Footer */
footer{
border-top:3px solid var(--brand); background:#fff;
color:#666; text-align:center; padding:18px 0; font-size:.92rem;
}

/* Mobile tweaks */
@media (max-width:640px){
.btn{border-radius:14px}
.brand img{width:30px;height:30px}
.hero h1{font-size:2rem}
}