:root{--pad-top:env(safe-area-inset-top,0px);--pad-bottom:env(safe-area-inset-bottom,0px);--pad-left:env(safe-area-inset-left,0px);--pad-right:env(safe-area-inset-right,0px);}
body{font-family:Arial,sans-serif;margin:0;padding:var(--pad-top) var(--pad-right) var(--pad-bottom) var(--pad-left);}
header{padding:12px;border-bottom:1px solid #ccc;position:sticky;top:0;background:#fff}
#content{padding:12px}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
.menu-card,.item,.video-card{border:1px solid #ccc;border-radius:12px;cursor:pointer;background:#fff}
.menu-card{padding:16px;min-height:140px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.menu-card img{width:64px;height:64px;object-fit:contain;margin-bottom:10px}
.menu-header{
 text-align:center;
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:8px;
}

.menu-header-icon{
 width:64px;
 height:64px;
 object-fit:contain;
}

.menu-header-title{
 font-size:24px;
 font-weight:bold;
}

.icon-item{
 display:flex;
 align-items:center;
 gap:12px;
}

.item-icon{
 width:40px;
 height:40px;
 object-fit:contain;
 flex-shrink:0;
}

.item{padding:14px;margin:8px 0}
.video-card{display:flex;gap:12px;padding:10px;margin:8px 0;align-items:center}
.video-card img{width:140px;aspect-ratio:16/9;object-fit:cover;border-radius:8px}
.video-title{flex:1}
@media(max-width:480px){.video-card img{width:120px}}