/* =============================
   Layout Styles
   ============================= */

header{
    position:sticky;
    top:0;
    background:rgba(255, 255, 255, 0.95);
    backdrop-filter:blur(12px);
    /* Vertical padding reduced further (html no longer adds safe-area) */
    padding:10px 20px;
    border-bottom:1px solid var(--border);
    z-index:100;
    box-shadow:var(--shadow);
    /* Safe area inset for notch / Dynamic Island */
    padding-top:calc(env(safe-area-inset-top) + 4px);
    padding-left:calc(20px + env(safe-area-inset-left));
    padding-right:calc(20px + env(safe-area-inset-right));
    display: flex;
    align-items: center;
    gap: 8px;
}

.hamburger-btn {
    order: 1;
}

.filter-btn {
    order: 3;
    margin-left: auto;
}

.search-wrapper {
    order: 2;
    flex: 1;
}

h1{
    margin:0 0 14px 0;
    font-size:24px;
    font-weight:700;
    letter-spacing:-0.5px;
    background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

main{
    max-width:900px;
    margin:0 auto;
    padding:16px 20px; /* reduced top padding below header */
    padding-bottom:calc(60px + env(safe-area-inset-bottom));
}

.row{display:flex;gap:10px;flex-wrap:wrap}

.grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:700px){.grid{grid-template-columns:1fr 1fr}}

.list{display:grid;gap:12px}

.fab{bottom:calc(20px + env(safe-area-inset-bottom));}